/* ANGÉLIQUE (30/07) : `hidden` doit toujours gagner — sinon les blocs
   en attente (carnets vides, narration à venir) restaient visibles. */
[hidden]{ display:none !important; }

/* ================================================================
   SANCTUAIRE DE SÉRIE — la lecture mise en scène (charte §1.5)
   « Un beau livre porté à l'écran » : texte sacré au centre, le monde
   autour le sert. Défilement calme (pas de snap), lecture ~62 caractères,
   lettrine, ornement de scène maison. Couleurs du monde via --s-* .
   ================================================================ */
/* ANGÉLIQUE (30/07) : la palette vient désormais du SOCLE MALAKH, relevé
   sur les pages livres du site vitrine. « C'est lui que je souhaite
   partout. » L'ancien or jaune (#e8b23a) et les fonds verts sont écartés. */
:root{
  --bg:#0c0a18; --bg2:#15102b;
  --ink:#ece6f5; --muted:#aba0c6; --titre:#f3ead8;
  --gold:#cba45c; --gold-soft:#e3c98c; --violet:#8a5cb0; --blood:#a32f3e;
  /* alias : le reste de la feuille parle encore en --creme / --or / --nuit */
  --creme:var(--ink); --or:var(--gold); --nuit:var(--bg);
}
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ min-height:100%; }
body{
  font-family:"Montserrat", sans-serif; font-weight:300; color:var(--ink);
  background:var(--bg); position:relative; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; line-height:1.75;
}
/* le fond signature de la vitrine : la photo en sourdine, puis le voile */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:url("/grianan/assets/socle/fond-malakh.jpg") center top/cover no-repeat;
  opacity:.26;
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(12,8,22,.42), rgba(12,8,22,.62) 55%, rgba(10,7,18,.93));
}
/* ANGÉLIQUE (01/08) : « Retour » et le bouton son sont en position fixe ; à
   certaines largeurs ils passaient PAR-DESSUS la colonne de texte. On réserve
   une zone de sécurité en haut, et la colonne ne monte jamais dessous. */
.enveloppe{ max-width:1100px; margin:0 auto; padding:76px 20px 120px; }

/* ---------- chrome ---------- */
.retour{ position:fixed; top:16px; left:16px; z-index:50; display:inline-flex;
  align-items:center; min-height:44px; padding:0 10px 0 2px; font-family:"Montserrat",sans-serif; font-weight:300; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(236,230,245,.82); text-decoration:none; text-shadow:0 2px 8px rgba(0,0,0,.85); }
.retour:hover{ color:var(--or); }
.retour--site{ top:52px; opacity:.85; }
.son{ position:fixed; z-index:50; top:14px; right:14px; width:46px; height:46px; display:grid; place-items:center; border-radius:50%; border:1px solid rgba(236,230,245,.3); background:radial-gradient(circle at 50% 38%,rgba(31,37,71,.62),rgba(6,6,12,.55)); color:var(--creme); cursor:pointer; -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); box-shadow:0 4px 18px rgba(0,0,0,.45); transition:transform .25s,border-color .3s,color .3s; }
.son:hover{ transform:translateY(-1px) scale(1.05); border-color:rgba(203,164,92,.65); color:#fff; }
.son svg{ width:22px; height:22px; }
.son.son--off{ color:#9aa0b8; } .son .son__barre{ opacity:0; } .son.son--off .son__ondes{ opacity:.25; } .son.son--off .son__barre{ opacity:1; }
.son:focus-visible{ outline:none; border-color:var(--or); }
.grain{ position:fixed; inset:0; z-index:40; pointer-events:none; opacity:.30; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:150px 150px; }

/* ---------- S1 · le seuil de la série ---------- */
.seuil{ text-align:center; padding:14svh 0 6vh; }
.seuil__planete{ font-family:"Montserrat",sans-serif; font-weight:300; letter-spacing:.28em; text-transform:uppercase; font-size:.72rem; color:#cba45c; }
.seuil__titre{ font-family:"Cormorant Garamond",serif; font-size:clamp(2rem,7vw,3.6rem); letter-spacing:.04em; line-height:1.12; margin:10px 0; text-wrap:balance; text-shadow:0 3px 20px rgba(0,0,0,.6); }
.seuil__logoS{ font-family:"Cormorant Garamond",serif; font-size:2.4rem; color:var(--or); display:block; margin-bottom:2px; }
.seuil__pitch{ font-style:italic; font-size:clamp(1.1rem,2.6vw,1.5rem); max-width:34ch; margin:14px auto 0; color:#f0e6d2; }
.sceaux{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:22px; }
.sceau{ font-family:"Montserrat",sans-serif; font-weight:300; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(236,230,245,.85); border:1px solid rgba(236,230,245,.35); border-radius:30px; padding:6px 14px; }
.proposition{ margin:16px auto 0; max-width:52ch; font-size:.82rem; color:rgba(236,230,245,.5); border-top:1px dashed rgba(236,230,245,.25); padding-top:10px; }

/* ---------- S2 · illustration d'ouverture (se dévoile) ---------- */
/* ANGÉLIQUE (01/08) : l'image était posée en « contain » dans une boîte au format
   imposé, avec fond translucide et ombre — dès que le visuel n'avait pas ce format
   exact, on voyait la DÉCOUPE de la boîte autour. La boîte devient invisible :
   seule l'image se voit, jamais recadrée. */
.illus{ margin:4vh auto; border-radius:8px; overflow:hidden; aspect-ratio:16/10; max-height:200px; background:transparent center/contain no-repeat; filter:drop-shadow(0 20px 45px rgba(0,0,0,.75)); opacity:0; transform:translateY(30px); transition:opacity 1.1s ease, transform 1.1s ease; }
.illus.vue{ opacity:1; transform:none; }
.illus[data-ph]::after{ content:attr(data-ph); display:grid; place-items:center; height:100%; font-family:"Montserrat",sans-serif; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.45); }
.illus.chargee[data-ph]::after{ content:none; }
@media (prefers-reduced-motion: reduce){ .illus{ opacity:1; transform:none; transition:none; } }

/* ---------- S3 · la lecture (le texte sacré) ---------- */
.lecture{ max-width:38em; margin:6vh auto; padding:clamp(24px,5vw,52px); background:linear-gradient(180deg,rgba(18,15,28,.82),rgba(10,8,18,.86)); border:1px solid rgba(236,230,245,.14); border-radius:10px; box-shadow:0 24px 70px -30px #000; }
.lecture__balise{ display:block; text-align:center; font-family:"Montserrat",sans-serif; font-weight:300; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(236,230,245,.5); margin-bottom:18px; }
.lecture__titre{ font-family:"Cormorant Garamond",serif; font-size:1.5rem; text-align:center; margin-bottom:8px; }
.lecture__corps{ font-size:1.16rem; line-height:1.9; color:#efe6d4; }
.lecture__corps p{ margin:0 0 1.2em; text-align:justify; hyphens:auto; }
.lecture__corps p:first-of-type::first-letter{ font-family:"Cormorant Garamond",serif; float:left; font-size:3.6em; line-height:.82; padding:6px 10px 0 0; color:var(--or); text-shadow:0 2px 10px rgba(203,164,92,.35); }
.placeholder{ color:rgba(236,230,245,.55); font-style:italic; }
.placeholder::first-letter{ font:inherit!important; float:none!important; padding:0!important; color:inherit!important; }
/* ornement de scène maison (un glyphe à toi, pas ***) */
.ornement{ display:flex; align-items:center; justify-content:center; gap:14px; margin:2em 0; color:var(--or); opacity:.8; }
.ornement::before, .ornement::after{ content:""; height:1px; width:60px; background:linear-gradient(90deg,transparent,currentColor); }
.ornement::after{ background:linear-gradient(90deg,currentColor,transparent); }
.ornement span{ font-size:1.1rem; letter-spacing:.3em; }

/* ---------- S4 · narration audio ---------- */
.narration{ max-width:38em; margin:3vh auto; display:flex; align-items:center; justify-content:center; gap:12px; }
.narration button{ display:inline-flex; align-items:center; gap:10px; font-family:"Montserrat",sans-serif; font-weight:300; letter-spacing:.12em; text-transform:uppercase; font-size:.74rem; color:var(--creme); background:rgba(255,255,255,.06); border:1px solid rgba(236,230,245,.4); border-radius:30px; padding:11px 22px; min-height:44px; cursor:pointer; transition:border-color .25s,color .25s; }
.narration button:hover{ border-color:var(--or); color:var(--or); }
.narration .note{ font-size:.78rem; color:rgba(236,230,245,.45); font-style:italic; }

/* ---------- S5 · galerie ---------- */
.galerie{ margin:8vh auto 0; }
.galerie__titre{ text-align:center; font-family:"Montserrat",sans-serif; font-weight:300; letter-spacing:.24em; text-transform:uppercase; font-size:.72rem; color:#cba45c; margin-bottom:20px; }
.galerie__grille{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; max-width:900px; margin:0 auto; }
/* même chose pour les vignettes : ni fond ni bordure, sinon la découpe se voit
   autour des visuels qui ne sont pas exactement en 3/4 */
.galerie__item{ aspect-ratio:3/4; border-radius:8px; background:transparent center/contain no-repeat; border:0; display:grid; place-items:center; filter:drop-shadow(0 10px 24px rgba(0,0,0,.55)); }
.galerie__item span{ font-family:"Montserrat",sans-serif; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.4); text-align:center; padding:6px; }

/* ---------- S6 · le ticket d'or ---------- */
.ticket{ text-align:center; margin:9vh auto 0; max-width:44em; }
.ticket__phrase{ font-family:"Cormorant Garamond",serif; font-size:clamp(1.3rem,4vw,2rem); }
.ticket__detail{ margin-top:12px; color:rgba(236,230,245,.75); line-height:1.7; }
.ticket__actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:22px; }
.lien{ font-family:"Montserrat",sans-serif; font-weight:300; letter-spacing:.12em; text-transform:uppercase; font-size:.74rem; color:var(--creme); background:rgba(255,255,255,.06); border:1px solid rgba(236,230,245,.4); border-radius:30px; padding:14px 26px; min-height:44px; display:inline-flex;
  align-items:center; justify-content:center; cursor:pointer; transition:border-color .25s,color .25s; }
.lien:hover{ border-color:var(--or); color:var(--or); }
.lien--cle{ background:var(--s-cta,linear-gradient(135deg,#9d6bc0,#5a3580)); border:none; color:#fff; }