/* ═══════════════════════════════════════════════════════════════
   🌙 VAELORA — page d'attente
   Ciel étoilé (app.js), trois lunes et leurs déesses.
   Aucune ressource extérieure : polices du système, rien à télécharger.
   ═══════════════════════════════════════════════════════════════ */

:root {
    --nuit-1: #04030c;
    --nuit-2: #0b0920;
    --nuit-3: #1a1339;
    --texte: #ece8fb;
    --texte-doux: #b9b2d8;
    --texte-pale: #8c85b0;
    --ligne: rgba(236, 232, 251, .14);
    --serif-titre: "Cinzel", "Cormorant SC", "Trajan Pro", Georgia, "Times New Roman", serif;
    --serif: "Cormorant Garamond", "EB Garamond", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;

    /* Nyssara · Veil — argent et lavande */
    --nyssara-1: #fdfcff;
    --nyssara-2: #cfc8f4;
    --nyssara-3: #6a5db5;
    --nyssara-halo: rgba(176, 164, 255, .55);
    --nyssara-accent: #cbc3ff;
    /* Ryssah · Ember — or et braise */
    --ryssah-1: #fff7e6;
    --ryssah-2: #f6bf72;
    --ryssah-3: #c4532c;
    --ryssah-halo: rgba(255, 166, 88, .55);
    --ryssah-accent: #ffc98a;
    /* Auralys · Bloom — écume et courants */
    --auralys-1: #f0feff;
    --auralys-2: #98e5eb;
    --auralys-3: #2b8aa3;
    --auralys-halo: rgba(110, 222, 232, .5);
    --auralys-accent: #9eeef3;
}

*, *::before, *::after { box-sizing: border-box; }

html {
    background: var(--nuit-1);
    color-scheme: dark;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    color: var(--texte);
    font-family: var(--serif);
    font-size: clamp(1.05rem, 2.7vw, 1.2rem);
    line-height: 1.6;
    background:
        radial-gradient(120% 70% at 50% 112%, rgba(86, 58, 168, .38), transparent 62%),
        radial-gradient(90% 60% at 50% -12%, rgba(42, 30, 96, .55), transparent 70%),
        linear-gradient(180deg, var(--nuit-1) 0%, var(--nuit-2) 55%, var(--nuit-3) 100%);
    background-color: var(--nuit-1);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.visuellement-cache {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

/* ─── Décor : ciel, teinte de la déesse choisie, brume ─── */

#ciel {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.teintes, .brume {
    position: fixed;
    z-index: 0;
    pointer-events: none;
}

.teintes { inset: 0; }

.teinte {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.4s ease;
}
.teinte-nyssara { background: radial-gradient(75% 55% at 50% 36%, rgba(150, 136, 255, .22), transparent 72%); }
.teinte-ryssah { background: radial-gradient(75% 55% at 50% 36%, rgba(255, 150, 70, .2), transparent 72%); }
.teinte-auralys { background: radial-gradient(75% 55% at 50% 36%, rgba(80, 210, 225, .2), transparent 72%); }
body[data-deesse="nyssara"] .teinte-nyssara,
body[data-deesse="ryssah"] .teinte-ryssah,
body[data-deesse="auralys"] .teinte-auralys { opacity: 1; }

.brume {
    left: -25%;
    right: -25%;
    bottom: -14vh;
    height: 48vh;
    opacity: .6;
}
.brume span {
    position: absolute;
    bottom: 0;
    height: 75%;
    border-radius: 50%;
    animation: deriver 40s ease-in-out infinite alternate;
}
.brume span:nth-child(1) { left: 0; width: 60%; background: radial-gradient(closest-side, rgba(118, 92, 222, .5), transparent); }
.brume span:nth-child(2) { right: 0; width: 55%; background: radial-gradient(closest-side, rgba(64, 178, 200, .3), transparent); animation-duration: 48s; animation-direction: alternate-reverse; }
.brume span:nth-child(3) { left: 30%; width: 40%; height: 55%; background: radial-gradient(closest-side, rgba(255, 158, 86, .18), transparent); animation-duration: 56s; }

/* ─── Mise en page ─── */

.scene {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(1.5rem, 4.8vh, 2.9rem);
    width: 100%;
    padding: max(2.4rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) 1.5rem max(1.25rem, env(safe-area-inset-left));
    text-align: center;
}

/* ─── Titre ─── */

.titre h1 {
    margin: 0;
    font-family: var(--serif-titre);
    font-weight: 400;
    font-size: clamp(2.6rem, 12.5vw, 6.4rem);
    line-height: 1.05;
    letter-spacing: .32em;
    text-indent: .32em; /* recentre le mot malgré l'espacement des lettres */
    text-transform: uppercase;
    background: linear-gradient(100deg,
        #bdb4f0 0%, #ffffff 12.5%, #ffd9a6 25%, #ffffff 37.5%,
        #bdb4f0 50%, #ffffff 62.5%, #a8eef3 75%, #ffffff 87.5%, #bdb4f0 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: miroiter 16s linear infinite;
    filter: drop-shadow(0 0 18px rgba(190, 175, 255, .28));
}

.devise {
    margin: .85rem 0 0;
    font-size: clamp(.74rem, 2.5vw, .95rem);
    letter-spacing: .36em;
    text-indent: .36em;
    text-transform: uppercase;
    color: var(--texte-doux);
}
.devise span { white-space: nowrap; } /* sur téléphone, la ligne se coupe entre deux morceaux */
.devise i { font-style: normal; color: var(--texte-pale); }

/* ─── Les trois lunes ─── */

.lunes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1.1rem, 6.5vw, 3.6rem);
    transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
    transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}

.lune {
    --taille: clamp(58px, 17vw, 100px);
    position: relative;
    display: grid;
    justify-items: center;
    gap: .75rem;
    padding: .4rem;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    animation: flotter 8s ease-in-out infinite;
}
/* Tailles du lore : Auralys la plus grande, Nyssara l'intermédiaire, Ryssah la plus petite.
   Plus une lune est petite, plus elle est haute dans le ciel : on dirait qu'elle est plus loin. */
.lune-nyssara {
    --taille: clamp(66px, 19.5vw, 116px);
    --c1: var(--nyssara-1); --c2: var(--nyssara-2); --c3: var(--nyssara-3); --halo: var(--nyssara-halo);
    margin-bottom: clamp(.7rem, 2.6vh, 1.5rem);
    animation-delay: -2.7s;
}
.lune-auralys {
    --taille: clamp(86px, 25.5vw, 150px);
    --c1: var(--auralys-1); --c2: var(--auralys-2); --c3: var(--auralys-3); --halo: var(--auralys-halo);
}
.lune-ryssah {
    --taille: clamp(48px, 14vw, 84px);
    --c1: var(--ryssah-1); --c2: var(--ryssah-2); --c3: var(--ryssah-3); --halo: var(--ryssah-halo);
    margin-bottom: clamp(1.5rem, 5.5vh, 3rem);
    animation-delay: -5.2s;
}

.lune-corps {
    position: relative;
    display: block;
    width: var(--taille);
    height: var(--taille);
}

.lune-halo {
    position: absolute;
    inset: -34%;
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--halo), transparent);
    opacity: .5;
    animation: respirer 6.5s ease-in-out infinite;
    transition: opacity .7s ease;
}

.lune-astre {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 63% 36%, rgba(20, 12, 50, .14) 0 9%, transparent 10%),
        radial-gradient(circle at 41% 67%, rgba(20, 12, 50, .12) 0 7%, transparent 8%),
        radial-gradient(circle at 71% 69%, rgba(20, 12, 50, .1) 0 5%, transparent 6%),
        radial-gradient(circle at 28% 46%, rgba(20, 12, 50, .08) 0 4%, transparent 5%),
        radial-gradient(circle at 34% 30%, var(--c1) 0%, var(--c2) 44%, var(--c3) 100%);
    box-shadow:
        0 0 calc(var(--taille) * .32) calc(var(--taille) * .04) var(--halo),
        inset calc(var(--taille) * -.12) calc(var(--taille) * -.14) calc(var(--taille) * .3) rgba(10, 6, 34, .55);
    transition: filter .7s ease, transform .7s ease;
}

/* ─── Effet de chaque déesse quand on choisit sa lune ─── */

.lune-effet {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 1s ease;
}
.lune[aria-expanded="true"] .lune-effet { opacity: 1; }
.lune:not([aria-expanded="true"]) .lune-effet,
.lune:not([aria-expanded="true"]) .lune-effet::before,
.lune:not([aria-expanded="true"]) .lune-effet::after { animation-play-state: paused; }

/* Nyssara · Veil : un voile de lumière qui tourne lentement autour d'elle */
.lune-nyssara .lune-effet {
    inset: -44%;
    background: conic-gradient(from 0deg,
        transparent 0 10%, rgba(208, 198, 255, .5) 20%, transparent 33%,
        transparent 50%, rgba(208, 198, 255, .34) 62%, transparent 76%, transparent 100%);
    -webkit-mask: radial-gradient(closest-side, transparent 52%, #000 60%, #000 78%, transparent 100%);
    mask: radial-gradient(closest-side, transparent 52%, #000 60%, #000 78%, transparent 100%);
    animation: tourner 24s linear infinite;
}

/* Auralys · Bloom : des ondes, comme à la surface de l'eau */
.lune-auralys .lune-effet::before,
.lune-auralys .lune-effet::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(160, 236, 242, .6);
    animation: onde 4.2s ease-out infinite;
}
.lune-auralys .lune-effet::after { animation-delay: -2.1s; }

/* Ryssah · Ember : une couronne de braise qui vacille */
.lune-ryssah .lune-effet {
    inset: -55%;
    background: radial-gradient(closest-side, rgba(255, 198, 122, .55), rgba(255, 126, 54, .24) 55%, transparent 80%);
    animation: vaciller 1.8s ease-in-out infinite;
}

.lune-nom {
    font-size: .72rem;
    letter-spacing: .3em;
    text-indent: .3em;
    text-transform: uppercase;
    color: var(--texte-pale);
    transition: color .7s ease;
}

@media (hover: hover) {
    .lune:hover .lune-halo { opacity: .8; }
    .lune:hover .lune-astre { transform: scale(1.04); }
    .lune:hover .lune-nom { color: var(--texte-doux); }
}

.lune:focus { outline: none; }
.lune:focus-visible .lune-astre {
    outline: 2px solid rgba(255, 255, 255, .75);
    outline-offset: 6px;
}

.lune[aria-expanded="true"] .lune-halo { opacity: 1; }
.lune[aria-expanded="true"] .lune-astre { transform: scale(1.07); }
.lune[aria-expanded="true"] .lune-nom { color: var(--texte); }
.lunes.une-choisie .lune:not([aria-expanded="true"]) .lune-astre { filter: saturate(.55) brightness(.7); }
.lunes.une-choisie .lune:not([aria-expanded="true"]) .lune-halo { opacity: .25; }

/* ─── Message ─── */

.message { max-width: 34rem; }
.message h2 {
    margin: 0 0 .55rem;
    font-family: var(--serif-titre);
    font-weight: 400;
    font-size: clamp(1.02rem, 3.6vw, 1.32rem);
    letter-spacing: .22em;
    text-indent: .22em;
    text-transform: uppercase;
}
.message p { margin: 0; color: var(--texte-doux); }
.message .retour { margin-top: 1.3rem; }

a {
    color: var(--nyssara-accent);
    text-decoration-color: rgba(203, 195, 255, .4);
    text-underline-offset: .22em;
    transition: color .3s ease;
}
a:hover, a:focus-visible { color: #fff; }

/* ─── Fiche de la déesse ─── */

.carte {
    display: grid;
    justify-items: center;
    align-content: start; /* place gardée pour la fiche : rien ne bouge quand elle apparaît */
    width: min(30rem, 100%);
    min-height: 10.5rem;
}

.invite {
    margin: 0;
    font-style: italic;
    color: var(--texte-pale);
    animation: luire 4.5s ease-in-out infinite;
}
.invite[hidden] { display: none; }

.deesse {
    display: none;
    width: 100%;
    padding: 1.1rem 1.4rem 1.25rem;
    border: 1px solid var(--ligne);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
    box-shadow: 0 0 46px -14px var(--halo), inset 0 1px 0 rgba(255, 255, 255, .06);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.deesse.visible {
    display: block;
    animation: apparaitre .75s cubic-bezier(.2, .7, .2, 1) both;
}
.deesse-nyssara { --halo: var(--nyssara-halo); --accent: var(--nyssara-accent); }
.deesse-ryssah { --halo: var(--ryssah-halo); --accent: var(--ryssah-accent); }
.deesse-auralys { --halo: var(--auralys-halo); --accent: var(--auralys-accent); }

.deesse-lune {
    margin: 0;
    font-size: .72rem;
    letter-spacing: .3em;
    text-indent: .3em;
    text-transform: uppercase;
    color: var(--accent);
}
.deesse h3 {
    margin: .2rem 0 .3rem;
    font-family: var(--serif-titre);
    font-weight: 400;
    font-size: clamp(1.5rem, 5.6vw, 2rem);
    letter-spacing: .12em;
}
.deesse h3 span {
    font-size: .58em;
    letter-spacing: .2em;
    color: var(--texte-pale);
}
.deesse-role { margin: 0 0 .7rem; color: var(--texte-doux); }
.deesse blockquote {
    margin: 0;
    font-style: italic;
    font-size: 1.08em;
    color: var(--texte);
    text-shadow: 0 0 18px var(--halo);
}

/* ─── Bas de page et murmure ─── */

.pied {
    position: relative;
    z-index: 1;
    padding: .9rem 1rem max(1rem, env(safe-area-inset-bottom));
    text-align: center;
    font-size: .68rem;
    letter-spacing: .28em;
    text-indent: .28em;
    text-transform: uppercase;
    color: var(--texte-pale);
}

.murmure {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(3.2rem + env(safe-area-inset-bottom));
    z-index: 2;
    margin: 0;
    padding: 0 1rem;
    text-align: center;
    font-style: italic;
    color: var(--auralys-accent);
    text-shadow: 0 0 14px rgba(110, 222, 232, .55);
    opacity: 0;
    transition: opacity 2.6s ease;
    pointer-events: none;
}
.murmure.visible { opacity: .92; }

/* ─── Animations ─── */

@keyframes miroiter { to { background-position: -100% 0; } } /* un motif complet : la boucle ne se voit pas */
@keyframes flotter { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes respirer { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } }
@keyframes luire { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes deriver { from { transform: translateX(-8%); } to { transform: translateX(8%); } }
@keyframes tourner { to { transform: rotate(1turn); } }
@keyframes onde { from { transform: scale(1); opacity: .85; } to { transform: scale(2.2); opacity: 0; } }
@keyframes vaciller {
    0%, 100% { transform: scale(1); opacity: .85; }
    21% { transform: scale(1.07); opacity: 1; }
    47% { transform: scale(.96); opacity: .68; }
    72% { transform: scale(1.04); opacity: .95; }
}
@keyframes apparaitre {
    from { opacity: 0; transform: translateY(12px) scale(.98); filter: blur(4px); }
    to { opacity: 1; transform: none; filter: none; }
}

/* Écrans bas (téléphone à l'horizontale) : tout resserrer */
@media (max-height: 560px) {
    .scene { gap: 1rem; padding-top: 1.2rem; }
    .titre h1 { font-size: clamp(2rem, 8vh, 3.2rem); }
    .lune-auralys { --taille: clamp(60px, 18vh, 104px); }
    .lune-nyssara { --taille: clamp(48px, 14vh, 82px); margin-bottom: .5rem; }
    .lune-ryssah { --taille: clamp(36px, 10vh, 60px); margin-bottom: 1rem; }
    .carte { min-height: 8rem; }
}

/* Mouvements réduits (réglage du téléphone ou de l'ordinateur) : rien ne bouge */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .lunes { transform: none; }
}