.theme-apparition{--bg:#0a0d10;--surface:#151a20;--ink:#eee9df;--ink-muted:#b9b0a6;--accent:#d8d5cf;--accent-2:#8ea0b5;--font-display:"Instrument Serif",Georgia,serif;--font-body:"Literata",Georgia,serif}
.story-hero{min-height:78svh;position:relative;isolation:isolate;overflow:hidden}.story-hero::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,rgba(0,0,0,.18),var(--bg) 96%),var(--hero) center/cover no-repeat;filter:saturate(.72) contrast(1.05)}.story-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 50% 35%,transparent,rgba(0,0,0,.58) 76%)}.story-hero h1{font-family:var(--font-display);font-size:clamp(4rem,12vw,10rem);line-height:.82;max-width:10ch;text-wrap:balance}.story-kicker{letter-spacing:.16em;text-transform:uppercase;font-size:.75rem}.hero-hook{font-family:var(--font-display);font-size:clamp(1.6rem,4vw,3.2rem);max-width:22ch;margin-top:2rem;color:var(--accent-2)}.chapter{transition:background .8s ease}.chapter[data-mood="m2"]{--accent:#8ea0b5}.illu__frame img{filter:saturate(.75) contrast(1.08)}
/* Immersion V2 : brume, présence, lumière instable */
.theme-apparition{position:relative;background:linear-gradient(180deg,#0b1015,var(--bg));transition:background 1.6s ease}
.theme-apparition::before,.theme-apparition::after{content:"";position:fixed;inset:-20%;z-index:-1;pointer-events:none;opacity:.18;background:radial-gradient(ellipse at 20% 45%,rgb(190 210 225/.2),transparent 34%),radial-gradient(ellipse at 75% 62%,rgb(150 170 190/.14),transparent 30%);filter:blur(28px);animation:ghost-fog 18s ease-in-out infinite alternate}
.theme-apparition::after{animation-duration:25s;animation-direction:alternate-reverse;transform:scaleX(-1)}
.theme-apparition[data-mood="m2"]::before,.theme-apparition[data-mood="m2"]::after{opacity:.32}.theme-apparition[data-mood="m3"]::before{opacity:.42}
.theme-apparition .illu__frame::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgb(225 235 245/.11) 48%,transparent 66%);transform:translateX(-120%)}
.theme-apparition .illu.is-revealed .illu__frame::before{animation:spectral-pass 7s ease-in-out 1.2s 2}
.theme-apparition #page-3 .illu.is-revealed img{animation:spectral-focus 7s ease-in-out 1}
@keyframes ghost-fog{to{transform:translate3d(7%,3%,0) scale(1.08)}}
@keyframes spectral-pass{0%,12%{transform:translateX(-120%);opacity:0}35%{opacity:.8}60%,100%{transform:translateX(120%);opacity:0}}
@keyframes spectral-focus{0%,100%{filter:saturate(.92) contrast(1.06) brightness(.96)}45%{filter:saturate(.55) contrast(1.02) brightness(1.1) blur(.35px)}55%{filter:saturate(.7) contrast(1.08) brightness(.9)}}

.theme-apparition[data-mood="m4"]::before{opacity:.76;animation-duration:13s}.theme-apparition[data-mood="m5"]::before{opacity:.9;animation-duration:9s}.theme-apparition[data-mood="m4"] .chapter,.theme-apparition[data-mood="m5"] .chapter{text-shadow:0 0 1.2rem rgb(220 230 235/.08)}.theme-apparition #page-5 .illu.is-revealed img{filter:saturate(.35) contrast(1.08) blur(.25px);animation:spectral-focus 5s ease-in-out 1}@keyframes spectral-focus{0%,100%{filter:saturate(.35) blur(0)}50%{filter:saturate(.15) blur(1.2px);transform:scale(1.035)}}

.theme-apparition[data-mood="m4"]::before{opacity:.76;animation-duration:13s}.theme-apparition[data-mood="m5"]::before{opacity:.9;animation-duration:9s}.theme-apparition[data-mood="m4"] .chapter,.theme-apparition[data-mood="m5"] .chapter{text-shadow:0 0 1.2rem rgb(220 230 235/.08)}.theme-apparition #page-5 .illu.is-revealed img{filter:saturate(.35) contrast(1.08) blur(.25px);animation:spectral-focus 5s ease-in-out 1}@keyframes spectral-focus{0%,100%{filter:saturate(.35) blur(0)}50%{filter:saturate(.15) blur(1.2px);transform:scale(1.035)}}

/* V3.2 : immersion renforcée; le titre reste géré par le lecteur commun */
body::before,body::after{pointer-events:none;position:fixed;content:"";inset:0;z-index:0}
.scene-figure{position:relative;overflow:hidden;isolation:isolate}
.scene-figure::after{content:"";position:absolute;inset:-8%;pointer-events:none;z-index:2;opacity:0}
body.effects-off::before,body.effects-off::after,body.effects-off .scene-figure::after{animation:none!important;opacity:0!important}
@media (prefers-reduced-motion:reduce){body::before,body::after,.scene-figure::after,.scene-figure img,.story-part p{animation:none!important;transform:none!important}}
body::before{inset:-25%;background:radial-gradient(ellipse at 25% 70%,rgba(220,230,235,.11),transparent 34%),radial-gradient(ellipse at 80% 30%,rgba(230,235,240,.08),transparent 30%);filter:blur(18px);animation:spectralFog 18s ease-in-out infinite alternate}body::after{background:radial-gradient(circle at 78% 22%,rgba(255,213,142,.10),transparent 9%);animation:candleGhost 3.2s ease-in-out infinite}body[data-mood="m4"] .scene-figure::after,body[data-mood="m5"] .scene-figure::after{opacity:.5;background:linear-gradient(100deg,transparent 30%,rgba(225,235,240,.18) 48%,transparent 62%);filter:blur(8px);animation:ghostPass 8s ease-in-out infinite}@keyframes spectralFog{from{transform:translate3d(-5%,2%,0) scale(1.03)}to{transform:translate3d(6%,-3%,0) scale(1.12)}}@keyframes candleGhost{0%,100%{opacity:.3}40%{opacity:.8}46%{opacity:.25}55%{opacity:.7}}@keyframes ghostPass{0%,30%{transform:translateX(-55%);opacity:0}48%{opacity:.55}70%,100%{transform:translateX(55%);opacity:0}}
/* V3.3 : alignement du hero sur le composant historique du lecteur */
.story-hero > div {
  position: relative;
  z-index: 1;
  width: min(100%, 76rem);
  margin-inline: auto;
  padding: clamp(5.5rem, 10vh, 7rem) var(--gutter) clamp(3rem, 8vh, 5rem);
  box-sizing: border-box;
}
@media (max-width: 640px) {
  .story-hero > div { padding-top: 5.25rem; padding-bottom: 2.75rem; }
  .story-hero h1 { font-size: clamp(3.4rem, 18vw, 6rem); }
}

/* ===== V4.2.5 : cheveux, dédoublement, buée (piloté par scripts/themes/apparition.js) ===== */
.ap-hairs { position: fixed; left: 0; top: 0; bottom: 0; width: min(11rem, 26vw); z-index: 1; pointer-events: none; }
.ap-hairs svg { width: 100%; height: 100%; overflow: visible; }
.ap-hairs g { transform-origin: 50% 0; animation: hair-sway 9s ease-in-out infinite alternate; }
.ap-hairs path { fill: none; stroke: rgb(236 226 206 / .6); stroke-width: 1.2px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-dasharray: 5000; stroke-dashoffset: 5000; }
.ap-hairs path.is-drawn { animation: hair-draw 4.2s ease-out forwards; animation-delay: calc(var(--i) * .35s); }
@keyframes hair-draw { to { stroke-dashoffset: 0; } }
@keyframes hair-sway { from { transform: rotate(-.9deg) skewX(-1deg); } to { transform: rotate(.9deg) skewX(1deg); } }
.is-double { animation: text-double 3.2s ease-in-out; }
@keyframes text-double {
  0%, 100% { text-shadow: none; }
  14%, 30% { text-shadow: -.22rem 0 0 rgb(170 205 255 / .5), .22rem 0 0 rgb(255 185 185 / .32); }
  22% { text-shadow: none; }
  52%, 70% { text-shadow: -.3rem 0 0 rgb(170 205 255 / .55), .3rem 0 0 rgb(255 185 185 / .36); }
  60% { text-shadow: none; }
}
.ap-condense {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 6s ease;
  background: radial-gradient(90% 70% at 55% 62%, rgb(205 222 240 / .16), rgb(205 222 240 / .06) 62%, transparent 92%);
  -webkit-backdrop-filter: blur(1.2px); backdrop-filter: blur(1.2px);
}
body.ap-fogged .ap-condense { opacity: 1; }
.ap-prints { position: fixed; right: max(1rem, 2vw); bottom: 12vh; width: min(11rem, 22vw); z-index: 1; pointer-events: none; opacity: 0; transition: opacity 4.5s ease 2s; }
body.ap-fogged .ap-prints { opacity: .7; }
@media (max-width: 700px) { body.ap-fogged .ap-prints { opacity: .4; } }
.ap-prints .hand rect { fill: none; stroke: rgb(232 242 252 / .75); stroke-width: .9px; }
body.effects-off .ap-hairs, body.effects-off .ap-condense, body.effects-off .ap-prints { display: none; }