/* Accueil — Chroniques d'une alchimiste */

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    min-height: 100%;
}

body {
    background: #16091f;
}

/* Illustration principale */

.accueil {
    display: flex;
    justify-content: center;
    min-height: 100vh;
}

.grimoire {
    position: relative;
    width: min(100%, 1536px);
    aspect-ratio: 2 / 3;
}

.illustration {
    display: block;
    width: 100%;
    height: auto;
}

/* Zones cliquables */

.zone {
    position: absolute;
    display: block;
    cursor: pointer;
    border-radius: 12%;
    outline: 2px solid transparent;
}



/* Repère accessible au clavier */

.zone:focus-visible {
    outline: 2px solid #ffe39b;
    outline-offset: 3px;
}


/* Première rangée */

.livres {
    left: 8%;
    top: 22%;
    width: 25%;
    height: 15%;
}

.enigmes {
    left: 36%;
    top: 22%;
    width: 27%;
    height: 15%;
}

.coulisses {
    left: 66%;
    top: 22%;
    width: 25%;
    height: 15%;
}

/* Dernière rangée */

.avis {
    left: 17%;
    top: 75%;
    width: 27%;
    height: 14%;
}

.contact {
    left: 53%;
    top: 75%;
    width: 27%;
    height: 14%;
}

/* Curseur magique */

.curseur-magique {
    position: fixed;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1000;

    transform: translate(-50%, -50%);

    background: radial-gradient(
        circle,
        #ffffff 0%,
        #fff6c8 12%,
        rgba(255, 215, 110, 0.8) 28%,
        rgba(255, 170, 55, 0.3) 55%,
        transparent 75%
    );

    filter: drop-shadow(0 0 12px #ffd16a);

    opacity: 0;
}

/* Curseur lumineux sur ordinateur */

@media (hover: hover) and (pointer: fine) {
    .grimoire,
    .grimoire .zone {
        cursor: none;
    }
}

/* Pas de curseur magique sur téléphone */

@media (hover: none), (pointer: coarse) {
    .curseur-magique {
        display: none;
    }
}
/* Ajustement des zones cliquables sur mobile */

@media (max-width: 768px) {
    .grimoire {
        align-self: flex-start;
        height: fit-content;
    }
}