/* Le mini-site d'Aylen : sa propre direction artistique, façon Ori (nuit bleu-vert, capitales Cinzel fines et lumineuses).
   Commun aux pages aylen.html, aylen-world.html, aylen-gameplay.html et aylen-media.html. */
:root { --nuit: #03090b; --nuit-2: #071417; --ink: #ebfadc; --lueur: #78ffd2; --doux: #8fb5ad; --ligne: #78ffd22b; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--nuit); color: var(--ink); font: 300 1.08rem/1.75 "Jost", system-ui, sans-serif; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--lueur); outline-offset: 4px; }
.wrap { max-width: 76rem; margin: 0 auto; padding: 0 2rem; }
@media (max-width: 40rem) { .wrap { padding: 0 1.25rem; } }

/* le menu du jeu : le logo à gauche, les pages en petites capitales, le retour au studio à droite */
.menu { position: fixed; z-index: 30; inset: 0 0 auto; display: flex; align-items: center; gap: 2.5rem; padding: 1.1rem 2rem; transition: background .4s, backdrop-filter .4s; }
.menu.sombre { background: #03090bdd; backdrop-filter: blur(10px); }
.menu .logo img { height: 1.9rem; width: auto; }
.menu nav { display: flex; gap: 2rem; font: 400 .72rem "Cinzel", serif; letter-spacing: .3em; text-transform: uppercase; }
.menu nav a { text-decoration: none; color: var(--doux); transition: color .2s; }
.menu nav a:hover, .menu nav a.actif { color: var(--ink); text-shadow: 0 0 12px var(--lueur); }
.menu .studio { margin-left: auto; font: 400 .65rem "Cinzel", serif; letter-spacing: .3em; text-transform: uppercase; color: var(--doux); text-decoration: none; }
@media (max-width: 56rem) { .menu { gap: 1rem; padding: .9rem 1.25rem; } .menu nav { gap: 1rem; font-size: .62rem; letter-spacing: .15em; } .menu .studio { display: none; } }
@media (max-width: 30rem) { .menu .logo { display: none; } }

/* les titres */
.surtitre { display: block; font: 400 .72rem "Cinzel", serif; letter-spacing: .45em; text-transform: uppercase; color: var(--lueur); margin-bottom: 1rem; }
.titre { font: 400 clamp(1.8rem, 4vw, 3rem)/1.2 "Cinzel", serif; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 1.5rem; text-shadow: 0 0 30px #78ffd255; }
.recit { font: 400 1.4rem/1.8 "Cormorant Garamond", serif; color: #cfe6df; }
.trait { width: 14rem; height: 1px; margin: 0 auto 3rem; background: linear-gradient(90deg, transparent, var(--lueur), transparent); }

/* les boutons */
.bouton { display: inline-block; padding: .9rem 2rem; border: 1px solid #ebfadc66; text-decoration: none; letter-spacing: .3em; font: 400 .72rem "Cinzel", serif; text-transform: uppercase; transition: background .2s, color .2s, box-shadow .2s; cursor: pointer; background: none; color: var(--ink); }
.bouton:hover, .bouton.plein { background: var(--ink); color: var(--nuit); box-shadow: 0 0 30px #78ffd244; }
.boutons { display: flex; gap: 1rem; flex-wrap: wrap; }

/* l'ouverture des pages intérieures */
.entete-page { position: relative; padding: 11rem 0 5rem; text-align: center; background: radial-gradient(ellipse 60% 70% at 50% 0%, #0e2b29, transparent 70%); }
.entete-page .recit { max-width: 40rem; margin: 0 auto; }

/* le pied de page */
.pied { text-align: center; padding: 3rem 1rem; font-size: .8rem; color: var(--doux); letter-spacing: .1em; border-top: 1px solid var(--ligne); }
.pied a { margin: 0 .6rem; }

/* les animations au défilement (seulement si le visiteur accepte le mouvement) */
.anim .monte { opacity: 0; translate: 0 2rem; transition: opacity 1.1s ease, translate 1.2s cubic-bezier(.16, 1, .3, 1); }
.anim .monte.vu { opacity: 1; translate: 0 0; }