/* =========================================================
   NE SCROLLE PAS. — Expérience immersive pour Halloween
   ========================================================= */
:root{
  --ink:#050304;
  --ink-2:#0e0909;
  --blood:#a3001a;
  --blood-hi:#e01530;
  --bone:#ece4d6;
  --bone-dim:#b9ae9f;
  --mute:#8d8278;
  --cold:#9cc3d8;
  --sick:#b8d48a;
  --flame:#ffb347;
  --hud-h:56px;
  --r:240px;           /* rayon de la lampe */
  --font-horror:"Creepster", "Impact", fantasy;
  --font-text:"Grenze Gotisch", "UnifrakturCook", Georgia, serif;
  color-scheme: dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html.calm{scroll-behavior:auto}
body{
  margin:0;background:var(--ink);color:var(--bone);
  font-family:var(--font-text);font-size:clamp(17px,1.1vw + 11px,21px);line-height:1.45;letter-spacing:.01em;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img,video,canvas,svg{display:block;max-width:100%}
button{font:inherit;color:inherit}
a{color:inherit}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:8px;top:-60px;z-index:100;background:var(--bone);color:var(--ink);padding:8px 12px}
.skip:focus{top:8px}
:focus-visible{outline:2px dashed var(--flame);outline-offset:3px}

/* ---------- Header ---------- */
.hud{
  position:fixed;inset:0 0 auto 0;height:var(--hud-h);z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0 16px;background:linear-gradient(#000c,#0000);
}
.logo{font-family:var(--font-horror);font-size:clamp(26px,3.4vw,42px);letter-spacing:.05em;text-decoration:none;white-space:nowrap;line-height:1;color:#ff4d63;text-shadow:0 0 3px #fff9,0 0 9px #ff2a3d,0 0 22px #ff2a3d,0 0 44px #e01530}
.depth{margin:0;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--bone-dim);text-align:center;flex:1}
.hud-btns{display:flex;gap:8px}
.hud-btn{
  display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border-radius:999px;
  background:#0009;border:1px solid #ffffff2a;cursor:pointer;font-size:13px;transition:border-color .2s,background .2s;
}
.hud-btn svg{width:18px;height:18px}
.hud-btn:hover{border-color:#fff6}
.hud-btn[aria-pressed="true"]{background:var(--bone);color:var(--ink);border-color:var(--bone)}
#btn-sound .wave{display:none}
#btn-sound[aria-pressed="true"] .wave{display:block}
#btn-sound[aria-pressed="true"] .cross{display:none}
@media (max-width:640px){
  .hud-btn .lbl{display:none}
  .hud-btn{width:42px;justify-content:center;padding:0}
  .logo{font-size:24px}
  .depth{font-size:11px;letter-spacing:.06em}
}

/* ---------- Dots ---------- */
.dots{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:12px}
.dots a{position:relative;display:block;width:12px;height:12px;border-radius:50%;border:1px solid #fff8;background:transparent;transition:background .3s,transform .3s}
.dots a.on{background:var(--blood-hi);border-color:var(--blood-hi);transform:scale(1.25)}
.dots a span{position:absolute;right:22px;top:50%;transform:translateY(-50%);white-space:nowrap;font-size:12px;background:#000c;padding:2px 8px;opacity:0;pointer-events:none;transition:opacity .2s}
.dots a:hover span,.dots a:focus-visible span{opacity:1}
@media (max-width:768px){.dots{display:none}}

/* ---------- Overlays globaux ---------- */
#veil{position:fixed;inset:0;background:#000;z-index:60;opacity:0;pointer-events:none;transition:opacity .35s ease}
#veil.on{opacity:1}
#flash{position:fixed;inset:0;z-index:59;pointer-events:none;background:#c1001c;opacity:0;mix-blend-mode:screen}
#flash.on{animation:flash .6s steps(1,end)}
@keyframes flash{0%{opacity:.55}20%{opacity:0}45%{opacity:.35}65%,100%{opacity:0}}
#grain{position:fixed;inset:-50%;z-index:58;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain .8s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-5%,3%)}50%{transform:translate(4%,-4%)}75%{transform:translate(-3%,-2%)}100%{transform:translate(0,0)}}
body.shake main{animation:shake .45s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{10%,90%{transform:translate(-2px,1px)}20%,80%{transform:translate(4px,-2px)}30%,50%,70%{transform:translate(-7px,3px)}40%,60%{transform:translate(7px,-3px)}}

/* ---------- Boutons ---------- */
.btn-blood,.btn-ghost,.btn-vote{
  display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;
  border-radius:4px;cursor:pointer;text-decoration:none;letter-spacing:.04em;transition:transform .15s,box-shadow .2s,background .2s;
}
.btn-blood{background:var(--blood);color:#fff;border:1px solid var(--blood-hi);font-size:1.15em;box-shadow:0 0 0 0 #e0153000,0 10px 30px #0008}
.btn-blood:hover{background:var(--blood-hi);box-shadow:0 0 36px #e0153088}
.btn-blood:active{transform:scale(.97)}
.btn-ghost{background:#0007;border:1px solid #ffffff40;color:var(--bone)}
.btn-ghost:hover{border-color:var(--bone)}
.small{min-height:46px;padding:0 18px;font-size:.95em}
.link-btn{background:none;border:0;text-decoration:underline;cursor:pointer;color:var(--bone-dim);padding:8px}

/* ---------- Scènes ---------- */
.scene{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;scroll-margin-top:0;isolation:isolate}
.stage{position:absolute;inset:0;overflow:hidden;cursor:crosshair;touch-action:pan-y}
.stage .bg,.bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.stage .bg{filter:brightness(.9) contrast(1.1) saturate(.8)}
.fog{position:absolute;inset:-10% -30%;z-index:2;pointer-events:none;opacity:.55;
  background:radial-gradient(ellipse 40% 18% at 20% 70%,#cfd6db33,transparent 70%),radial-gradient(ellipse 45% 20% at 70% 80%,#cfd6db2b,transparent 70%),radial-gradient(ellipse 30% 15% at 50% 60%,#cfd6db22,transparent 70%);
  animation:fog 22s ease-in-out infinite alternate}
.fog-low{top:30%}
@keyframes fog{to{transform:translateX(12%)}}

/* La lampe torche */
.dark{
  position:absolute;inset:0;z-index:10;pointer-events:none;
  background:radial-gradient(circle var(--r) at var(--x,50%) var(--y,55%),#0000 0,#0000001a 40%,#000000cc 76%,#000000e6 100%);
  transition:opacity .4s;
}
.calm .dark{background:radial-gradient(circle calc(var(--r) * 1.6) at var(--x,50%) var(--y,55%),#0000 0,#0003 40%,#000a 80%,#000c 100%)}
.stage.flicker .dark{animation:lampflicker .9s steps(2) 2}
@keyframes lampflicker{0%{opacity:1}30%{opacity:.6}50%{opacity:1}70%{opacity:.75}}

/* Zones à explorer */
.hot{position:absolute;z-index:20;background:transparent;border:0;padding:0;cursor:crosshair;border-radius:40%}
.hot:focus-visible{outline:2px dashed #ffb34799;outline-offset:-4px}
.hot.done{cursor:crosshair}

.scene-head{position:absolute;z-index:30;left:clamp(16px,4vw,56px);top:calc(var(--hud-h) + 14px);max-width:min(560px,80vw);pointer-events:none;text-shadow:0 2px 10px #000,0 0 30px #000}
.scene-head h2{margin:0;font-family:var(--font-horror);font-weight:400;font-size:clamp(34px,5vw,64px);line-height:1;color:var(--bone);letter-spacing:.02em}
.scene-head h2 small{display:block;font-family:var(--font-text);font-size:13px;letter-spacing:.2em;color:var(--blood-hi);margin-bottom:4px}
.consigne{margin:.4em 0 0;font-size:1.05em;color:var(--flame)}
.found{position:absolute;z-index:30;right:clamp(16px,4vw,56px);top:calc(var(--hud-h) + 18px);margin:0;font-size:13px;letter-spacing:.1em;background:#000a;border:1px solid #ffffff22;padding:4px 10px;border-radius:999px}
@media (min-width:769px){.found{right:52px}}
.found b{color:var(--blood-hi)}
.next{
  position:absolute;z-index:30;left:50%;bottom:max(22px,env(safe-area-inset-bottom));transform:translateX(-50%);
  min-height:52px;padding:0 24px;border-radius:999px;cursor:pointer;white-space:nowrap;
  background:#000b;border:1px solid #ffffff55;color:var(--bone);letter-spacing:.05em;transition:background .2s,border-color .2s;
}
.next:hover{background:var(--blood);border-color:var(--blood-hi)}
.next span{display:inline-block;margin-left:6px;animation:bob 1.6s ease-in-out infinite}
.next.pulse{animation:heartbtn 1.1s ease-in-out infinite;border-color:var(--blood-hi)}
@keyframes heartbtn{0%,100%{transform:translateX(-50%) scale(1)}15%{transform:translateX(-50%) scale(1.07)}30%{transform:translateX(-50%) scale(1)}45%{transform:translateX(-50%) scale(1.05)}}
@keyframes bob{50%{transform:translateY(4px)}}

/* Textes visibles seulement dans la lumière */
.in-light{position:absolute;z-index:5;margin:0;max-width:min(360px,70vw);font-size:clamp(16px,1.6vw,22px);color:var(--bone);text-shadow:0 0 8px #000;pointer-events:none}

/* Révélations */
.rv{opacity:0;pointer-events:none;transition:opacity .5s}
.rv.on{opacity:1}
.blood-word{position:absolute;z-index:6;font-family:var(--font-horror);color:var(--blood-hi);text-shadow:0 0 18px #ff00224d,0 2px 0 #4a000a;letter-spacing:.04em;line-height:1;pointer-events:none}
.blood-word.on{animation:write 1.2s steps(14,end) both}
@keyframes write{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* ---------- Accueil ---------- */
#accueil{display:grid;place-items:center;padding:calc(var(--hud-h) + 24px) 16px 40px}
#accueil .bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;z-index:0;filter:brightness(.62) saturate(.9) contrast(1.05)}
/* Lampe de l'accueil : une copie éclairée du manoir, visible seulement dans le faisceau */
#accueil{--x:50%;--y:42%;--lr:300px}
#accueil .bg-img{filter:brightness(.5) saturate(.85) contrast(1.05)}
.accueil-lit{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;z-index:0;pointer-events:none;filter:brightness(1.35) saturate(1.15) contrast(1.08);-webkit-mask-image:radial-gradient(circle var(--lr) at var(--x) var(--y),#000 0,#000c 42%,#0000 100%);mask-image:radial-gradient(circle var(--lr) at var(--x) var(--y),#000 0,#000c 42%,#0000 100%);animation:lampflicker 5s steps(1,end) infinite}
.calm .accueil-lit{animation:none}
@media (max-width:640px){#accueil{--lr:210px}}
/* Voile léger : bords sombres + zone de texte lisible, le manoir reste net */
.accueil-fog{position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at 50% 45%,#0000 0,#0000 38%,#000a 100%),linear-gradient(#0009,#0000 22%,#0000 62%,#000c 100%),radial-gradient(ellipse 58% 62% at 50% 52%,#000a,#0000 75%)}
.accueil-inner{position:relative;z-index:2;max-width:940px;text-align:center}
.kicker{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 0 16px;font-size:clamp(14px,1.5vw,21px);letter-spacing:.2em;white-space:nowrap;text-transform:uppercase;color:var(--flame);text-shadow:0 0 12px #ffb34799,0 0 30px #ffb34744,0 2px 8px #000}
.kicker::before,.kicker::after{content:'';flex:0 1 70px;height:2px;background:linear-gradient(90deg,#0000,var(--flame));box-shadow:0 0 10px #ffb347aa}
.kicker::after{transform:scaleX(-1)}
@media (max-width:640px){.kicker{white-space:normal;letter-spacing:.14em;text-wrap:balance}.kicker::before,.kicker::after{display:none}}
h1{margin:0;font-family:var(--font-horror);font-weight:400;font-size:clamp(38px,6.2vw,84px);line-height:1;color:var(--blood-hi);text-shadow:0 0 40px #e015305c,0 4px 0 #3d0008}
.title-shake{animation:tremble 4s infinite}
@keyframes tremble{0%,92%,100%{transform:none}93%{transform:translate(-2px,1px) skewX(-2deg)}95%{transform:translate(3px,-1px)}97%{transform:translate(-1px,2px) skewX(2deg)}}
.drip{position:relative;display:inline-block}
.drip::after{content:"";position:absolute;left:30%;top:80%;width:8px;height:0;background:var(--blood-hi);border-radius:0 0 6px 6px;animation:drip 11s 2s ease-in infinite}
@keyframes drip{0%{height:0;opacity:1}75%{height:44px;opacity:1}100%{height:50px;opacity:0}}
.lede{margin:14px auto 26px;font-size:clamp(21px,2vw,27px);font-weight:500;line-height:1.3;max-width:620px;color:var(--flame);text-shadow:0 0 12px #ffb34799,0 0 30px #ffb34744,0 2px 8px #000}
.howto{list-style:none;margin:0 auto 22px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;text-align:left}
.howto li{display:flex;gap:14px;align-items:flex-start;background:#000a;border:1px solid #ffb34740;border-radius:8px;padding:20px 20px;font-size:1.08em;line-height:1.3;box-shadow:0 8px 28px #0008, inset 0 0 22px #ffb3470d}
.howto svg{flex:none;width:36px;height:36px;color:var(--flame);filter:drop-shadow(0 0 8px #ffb34788)}
.howto b{color:var(--bone)}
@media (max-width:700px){.howto{grid-template-columns:1fr}.howto li{padding:9px 12px}}
.warning{margin:0 auto 18px;max-width:470px;border:1px solid var(--blood-hi);background:#2a00069e;border-radius:6px;padding:7px 12px;font-size:.78em;line-height:1.3}
.warning p{margin:0}
.warn-title{color:#ff5065;font-size:1.08em;margin-bottom:1px!important}
.enter{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hint-small{margin:14px 0 0;font-size:15px;color:var(--mute)}

/* ---------- Forêt ---------- */
#foret .bg{filter:brightness(.95) contrast(1.15) saturate(.6)}
.far-manor{position:absolute;z-index:11;left:50%;top:4%;width:clamp(130px,16vw,230px);transform:translateX(-50%);opacity:.6;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 45%,transparent 75%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 45%,transparent 75%);filter:brightness(.6) contrast(1.2)}
.window-light{position:absolute;left:47%;top:44%;width:7%;height:12%;background:#ffcf73;box-shadow:0 0 18px 6px #ffb34799;animation:candle 3s infinite;transition:opacity .2s}
.window-shadow{position:absolute;left:47.5%;top:46%;width:6%;height:10%;background:#000;border-radius:50% 50% 10% 10%;opacity:0;transition:opacity .3s}
.far-manor.off .window-light{opacity:0}
.far-manor.ghost .window-shadow{opacity:1}
@keyframes candle{0%,100%{opacity:1}40%{opacity:.8}60%{opacity:.95}80%{opacity:.7}}
.rv-eyes{position:absolute;z-index:11;left:36%;top:51%;width:26%;mix-blend-mode:screen}
.rv-eyes.on{animation:blink 3.5s 1.2s infinite}
@keyframes blink{0%,46%,54%,100%{transform:scaleY(1)}50%{transform:scaleY(.08)}}
.rv-run{left:72%;top:44%;font-size:clamp(46px,7vw,96px);transform:rotate(-8deg)}
.rv-hand{position:absolute;z-index:4;left:16%;bottom:4%;width:clamp(120px,14vw,200px);transform:translateY(60%);transition:transform 1.2s cubic-bezier(.2,.9,.2,1),opacity .4s;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 45%,#000 40%,transparent 72%);mask-image:radial-gradient(ellipse 50% 50% at 50% 45%,#000 40%,transparent 72%)}
.rv-hand.on{transform:translateY(0)}
.rv-spectre{position:absolute;z-index:3;right:-4%;top:6%;width:clamp(150px,18vw,260px);mix-blend-mode:lighten;
  -webkit-mask-image:radial-gradient(ellipse 45% 50% at 50% 50%,#000 40%,transparent 75%);mask-image:radial-gradient(ellipse 45% 50% at 50% 50%,#000 40%,transparent 75%)}
.rv-spectre.on{animation:glide 4.5s ease-in-out forwards}
@keyframes glide{0%{transform:translateX(0);opacity:0}15%{opacity:1}100%{transform:translateX(-55vw);opacity:0}}
.rv-crowtext{transition-delay:1.1s}
.crows{position:absolute;z-index:15;inset:0;width:100%;height:100%;pointer-events:none;fill:#030303;opacity:0;filter:drop-shadow(0 0 5px #c9d6e6aa) drop-shadow(0 0 14px #9fb3c855)}
.stage.moonflash .dark{opacity:.25;transition:opacity .08s}
.crows.on{opacity:1}
.crows.on .crow{animation:fly 1.6s var(--d) cubic-bezier(.3,.1,.4,1) forwards}
@keyframes fly{0%{transform:translate(0,0) scale(.6)}100%{transform:translate(var(--x),var(--y)) scale(2.2);opacity:0}}
.crow{transform-box:fill-box;transform-origin:center}
.crows.on .flap{animation:flap .18s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}
@keyframes flap{to{transform:scaleY(-.6)}}

/* ---------- Cimetière ---------- */
#cimetiere .bg{filter:brightness(.85) contrast(1.15) saturate(.7) hue-rotate(-10deg)}
/* décor photo (allée vers le manoir) — règles prioritaires via #cimetiere */
#cimetiere .stage{background:#07040a}
#cimetiere .stage::before{display:none}
#cimetiere .forest-main.cim-main{object-position:50% 58%;filter:brightness(1.12) contrast(1.05)}
#cimetiere .forest-blur{object-position:50% 58%}
#cimetiere .dark{background:radial-gradient(ellipse calc(var(--r) * 1.1) calc(var(--r) * .92) at var(--x,50%) var(--y,55%),#0000 0,#00000014 36%,#0a020340 62%,#06010270 84%,#05010290 100%)}
#cimetiere .fog{opacity:.3}
#cimetiere .tomb{background:none;box-shadow:none}
/* épitaphes gravées sur les deux stèles du milieu (placées en JS sur l'image) */
#cimetiere .epi{position:absolute;z-index:2;margin:0;transform:translate(-50%,-50%);text-align:center;line-height:1.12;
  font-family:'Special Elite',var(--font-body,serif);color:#e9e2d4;opacity:.9;pointer-events:none;
  text-shadow:0 -1px 0 #000,0 1px 0 #ffffff22,0 0 6px #ff6a3a66;letter-spacing:.07em;line-height:1.2}
#cimetiere .epi b{letter-spacing:.06em}
/* cloporte entre les citrouilles de droite : pattes qui s'agitent au survol */
#cimetiere .bug{position:absolute;z-index:11;aspect-ratio:236/275;cursor:pointer;
  /* étiré le long de son corps (axe diagonal) et aminci */
  transform:translate(-50%,-80%) rotate(42deg) scale(1.45,.72) rotate(-42deg)}
#cimetiere .bug img{display:block;width:100%;height:auto;filter:brightness(1.1) saturate(1.1) drop-shadow(0 0 3px #ff3a3a44) drop-shadow(0 2px 2px #000)}
#cimetiere .bug.walk img{filter:url(#legwiggle) brightness(.85) saturate(1) drop-shadow(0 2px 2px #000);animation:bugCrawl 2.2s ease-in-out forwards}
@keyframes bugCrawl{0%{transform:none}10%{transform:translate(2%,1.5%) rotate(1deg)}25%{transform:translate(6%,4%) rotate(-1deg)}40%{transform:translate(10%,7%) rotate(1.5deg)}55%{transform:translate(14%,9%) rotate(-1deg)}75%{transform:translate(17%,11%) rotate(.5deg)}100%{transform:translate(18%,12%)}}
#cimetiere .bug.walk{animation:bugJolt .4s linear}
@keyframes bugJolt{0%,100%{translate:0 0}12%{translate:-3px 1px}25%{translate:3px -1px}37%{translate:-3px -1px}50%{translate:2px 1px}62%{translate:-2px 0}75%{translate:2px -1px}87%{translate:-1px 1px}}
.calm #cimetiere .bug.walk,.calm #cimetiere .bug.walk img{filter:brightness(.85);animation:none}
/* attaque de chauves-souris (déclenchée au milieu des escaliers du manoir) */
#cimetiere .bat-trigger{position:absolute;z-index:11;aspect-ratio:2/1;transform:translate(-50%,-50%);cursor:crosshair}
#cimetiere .bat-attack{position:absolute;inset:0;z-index:35;pointer-events:none;overflow:hidden}
#cimetiere .purple-mist{position:absolute;inset:0;opacity:0;background:radial-gradient(ellipse at 50% 45%,#6a2382aa,#2a0a3a55 45%,transparent 75%)}
#cimetiere .bat-swarm{position:absolute;left:50%;top:50%;width:min(115vw,190vh);max-width:none;opacity:0;
  transform:translate(-50%,-50%) translate(var(--dx,0),var(--dy,0)) scale(.05);filter:drop-shadow(0 0 14px #000) saturate(1.1)}
#cimetiere .bat-attack.attack .bat-swarm{animation:batAttack 1s cubic-bezier(.4,0,.6,1) forwards}
#cimetiere .bat-attack.attack .purple-mist{animation:mistFlash 1s ease forwards}
#cimetiere .bat-attack.attack{animation:batShake .3s ease .65s}
@keyframes batAttack{
  0%{opacity:0;transform:translate(-50%,-50%) translate(var(--dx,0),var(--dy,0)) scale(.05) rotate(-6deg)}
  12%{opacity:1}
  45%{transform:translate(-50%,-50%) translate(calc(var(--dx,0px) * .5),calc(var(--dy,0px) * .5)) scale(.45) rotate(4deg)}
  72%{opacity:1;transform:translate(-50%,-50%) translateY(4%) scale(1.4) rotate(-3deg)}
  100%{opacity:0;transform:translate(-50%,-50%) translateY(14%) scale(3) rotate(4deg)}}
@keyframes mistFlash{0%,100%{opacity:0}40%{opacity:.85}70%{opacity:.35}}
@keyframes batShake{0%,100%{transform:none}25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}
.calm #cimetiere .bat-attack.attack{animation:none}
.calm #cimetiere .bat-attack.attack .bat-swarm{animation:batCalm 2.4s ease forwards}
@keyframes batCalm{0%,100%{opacity:0;transform:translate(-50%,-50%) translate(calc(var(--dx,0px) * .6),calc(var(--dy,0px) * .6)) scale(.3)}30%,70%{opacity:.8}}
#cimetiere .epi-libre b{color:#f4efe6;text-shadow:0 0 6px #ffffff55,0 -1px 0 #000}
/* corbeaux perchés sur les stèles (placés en JS sur l'image) */
#cimetiere .raven{position:absolute;z-index:11;transform:translate(-50%,-94%);cursor:pointer}
#cimetiere .rv-body{position:relative;filter:brightness(1.35) contrast(1.1) drop-shadow(0 0 3px #b9c8e0aa) drop-shadow(0 0 10px #8fa6c855) drop-shadow(0 2px 3px #000)}
#cimetiere .raven.flip .rv-body{transform:scaleX(-1)}
#cimetiere .raven img{display:block;width:100%;height:auto}
/* seule l'aile bouge : copie détourée de l'aile, pivot à l'épaule, au survol uniquement */
#cimetiere .raven .wing{position:absolute;inset:0}
#cimetiere .raven .wing.wa{clip-path:polygon(32.7% 29.8%,57.7% 24.9%,66.3% 33.8%,65.4% 59.6%,48.1% 79.5%,25% 85.5%,23% 65.6%);transform-origin:59.6% 29.8%}
#cimetiere .raven .wing.wb{clip-path:polygon(36% 27%,64% 23.8%,83% 36.7%,97% 71.3%,91.7% 95%,69.4% 82%,41.7% 64.8%);transform-origin:47% 28%}
#cimetiere .raven.caw .wing{animation:wingFlutter .2s ease-in-out 8 alternate}
@keyframes wingFlutter{from{transform:rotate(0)}to{transform:rotate(-7deg) scaleY(.94)}}
.calm #cimetiere .raven.caw .wing{animation:none}
/* mains qui sortent de terre (cachées sous la ligne du sol, révélées au survol) */
#cimetiere .grave-hand{position:absolute;z-index:11;transform:translate(-50%,-97%);aspect-ratio:420/480;cursor:pointer;
  clip-path:inset(-60% -6% 0 -6%)}
#cimetiere .grave-hand img{position:absolute;left:0;bottom:0;width:100%;height:auto;transform-origin:50% 100%;
  transform:translateY(105%);filter:brightness(.95) contrast(1.05) drop-shadow(0 0 6px #8fa6c844);
  transition:transform 1.1s cubic-bezier(.5,0,.75,0)}
#cimetiere .grave-hand.flip img{scale:-1 1}
/* nouvelles mains : teintes ramenées à la nuit du décor */
#cimetiere .grave-hand.mound img,#cimetiere .grave-hand:not(.mound) img[src*="main-deux"]{filter:brightness(.62) saturate(.7) contrast(1.1) hue-rotate(-8deg) drop-shadow(0 0 6px #8fa6c844)}
#cimetiere .grave-hand.up img{transform:translateY(0);animation:handRise 1.4s cubic-bezier(.2,.7,.3,1) both}
@keyframes handRise{0%{transform:translateY(105%) rotate(0)}18%{transform:translateY(70%) rotate(-1deg)}26%{transform:translateY(72%) rotate(1deg)}
  45%{transform:translateY(30%) rotate(-.6deg)}55%{transform:translateY(32%) rotate(.6deg)}80%{transform:translateY(-1%)}100%{transform:translateY(0) rotate(0)}}
.calm #cimetiere .grave-hand.up img{animation:none;transition:transform 1.6s ease}
#cimetiere .epi b{display:inline;font-family:var(--font-horror);font-weight:400;font-size:1.45em;line-height:1.05;color:#ffb38a;text-shadow:0 0 8px #ff4a2a99,0 -1px 0 #000}
#cimetiere .rip{visibility:hidden}
.moon{position:absolute;z-index:1;right:6%;top:9%;width:clamp(110px,14vw,210px);border-radius:50%;
  -webkit-mask-image:radial-gradient(circle at 50% 42%,#000 30%,transparent 55%);mask-image:radial-gradient(circle at 50% 42%,#000 30%,transparent 55%);opacity:.9}
.tombs{position:absolute;z-index:3;left:0;right:0;bottom:13%;height:36%;display:flex;justify-content:space-around;align-items:flex-end;padding:0 4%}
.tomb{position:relative;width:clamp(110px,19vw,250px);height:80%;background:linear-gradient(160deg,#8a8781,#55524d 55%,#2b2927);border-radius:48% 48% 6px 6px / 30% 30% 6px 6px;
  box-shadow:inset -12px -10px 30px #0009,0 20px 30px #000;display:flex;flex-direction:column;align-items:center;padding-top:1.4em;text-align:center;color:#d8d2c7}
.tomb.t1{transform:rotate(-5deg);height:70%}
.tomb.t3{transform:rotate(4deg);height:66%}
.tomb.t2{height:92%}
.rip{font-family:var(--font-horror);font-size:clamp(20px,2.4vw,34px);line-height:1;color:#2a2826;text-shadow:0 1px 0 #a9a59d}
.t2 .rip{color:#7a0012;text-shadow:none}
.epitaph{margin:10px 8px 0;font-size:clamp(12px,1.1vw,15px);line-height:1.3;color:#f4efe6;text-shadow:0 1px 3px #000}
.rv-bones{position:absolute;z-index:4;left:20%;bottom:0;width:60%;height:28%;object-fit:cover;transform:translateY(100%);mix-blend-mode:lighten;transition:transform 1.4s cubic-bezier(.2,.9,.2,1),opacity .3s;
  -webkit-mask-image:linear-gradient(transparent,#000 40%);mask-image:linear-gradient(transparent,#000 40%)}
.rv-bones.on{transform:translateY(10%)}
.rv-ghost{position:absolute;z-index:4;left:6%;top:16%;width:clamp(100px,12vw,180px);mix-blend-mode:screen}
.rv-ghost.on{animation:ghostglide 5s ease-in-out forwards}
@keyframes ghostglide{0%{opacity:0;transform:translate(0,0)}20%{opacity:.95}80%{opacity:.8}100%{opacity:0;transform:translate(45vw,-4vh)}}
.rv-wolf{display:none}
.scare{position:absolute;z-index:16;opacity:0;pointer-events:none}
.rv-ghoul{left:50%;top:50%;width:min(70vw,620px);transform:translate(-50%,-50%) scale(.4);
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 45%,#000 45%,transparent 75%);mask-image:radial-gradient(ellipse 50% 50% at 50% 45%,#000 45%,transparent 75%)}
.rv-ghoul.on{animation:jump 1.3s cubic-bezier(.1,.9,.2,1) forwards}
@keyframes jump{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}12%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}70%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.2)}}
.calm .rv-ghoul.on{animation:calmshow 2.4s ease forwards}
@keyframes calmshow{0%{opacity:0;transform:translate(-50%,-50%) scale(.9)}30%,70%{opacity:.85;transform:translate(-50%,-50%) scale(.92)}100%{opacity:0;transform:translate(-50%,-50%) scale(.92)}}

/* ---------- Manoir ---------- */
#manoir .stage{background:#0a0203}
#manoir .stage::before{display:none}
#manoir .forest-main.hall-main{left:0;width:100%;transform:none;object-fit:cover;object-position:50% 60%;-webkit-mask-image:none;mask-image:none;filter:brightness(1.05) contrast(1.05)}
#manoir .dark{background:radial-gradient(ellipse calc(var(--r) * 1.1) calc(var(--r) * .92) at var(--x,50%) var(--y,55%),#0000 0,#00000014 36%,#0a020340 62%,#06010270 84%,#05010290 100%)}
#manoir .fog{opacity:.18}
#manoir .frame.portrait{--ogive:polygon(50% 0,61% 3.5%,72% 9%,82% 16.5%,90% 25%,96% 34%,99.5% 43%,100% 100%,0 100%,.5% 43%,4% 34%,10% 25%,18% 16.5%,28% 9%,39% 3.5%);
  z-index:11;transform:translate(-50%,-50%);aspect-ratio:3/4.7;border:0;cursor:crosshair;pointer-events:auto;box-shadow:none;clip-path:var(--ogive);
  background:repeating-linear-gradient(90deg,#0000 0 3px,#00000040 3px 4px),linear-gradient(160deg,#6b5326 0%,#2a1c0b 22%,#8a6a2f 40%,#1b1206 58%,#7a5c27 78%,#241808 100%)}
#manoir .frame.portrait::before,#manoir .frame.portrait::after{content:'';position:absolute;clip-path:var(--ogive)}
#manoir .frame.portrait::before{inset:5%;background:#050203;z-index:0}
#manoir .frame.portrait::after{inset:9%;z-index:3;pointer-events:none;box-shadow:inset 0 0 10px 3px #000;background:radial-gradient(ellipse at 50% 40%,#0000 55%,#1a000555 100%)}
#manoir .frame.portrait img{inset:9%;width:82%;height:82%;object-position:50% 30%;clip-path:var(--ogive);z-index:1}
#manoir .frame.portrait .p2{z-index:2}
#manoir .lamp-hide{position:absolute;z-index:2;aspect-ratio:480/426;transform:translate(-50%,-50%);pointer-events:none;--mx:-9999px;--my:-9999px;--cr:90px}
#manoir .balloons-hide{aspect-ratio:360/339;z-index:1}
#manoir .eyes-hide{aspect-ratio:338/600}
#manoir .gift{position:absolute;z-index:3;aspect-ratio:250/295;transform:translate(-50%,-50%);transform-origin:50% 100%;cursor:crosshair;
  background:url(../assets/img/hall-manoir.jpg) no-repeat;filter:brightness(1.05) contrast(1.05);
  clip-path:polygon(17.2% 13.6%,29.2% 1.7%,54.8% 3.7%,74.8% 8.5%,81.2% 19.3%,99.2% 21.4%,99.2% 99%,11.2% 99%,11.2% 32.2%,8% 22%)}
#manoir .gift.rattle{animation:giftRattle 1.9s linear}
@keyframes giftRattle{
  0%,100%{transform:translate(-50%,-50%)}
  3%{transform:translate(calc(-50% - 3px),calc(-50% - 2px)) rotate(-2deg)}
  6%{transform:translate(calc(-50% + 3px),calc(-50% - 4px)) rotate(2.2deg)}
  9%{transform:translate(calc(-50% - 2px),calc(-50% - 1px)) rotate(-1.6deg)}
  12%{transform:translate(calc(-50% + 2px),calc(-50% - 3px)) rotate(1.4deg)}
  15%{transform:translate(calc(-50% - 1px),-50%) rotate(-.8deg)}
  18%,40%{transform:translate(-50%,-50%)}
  43%{transform:translate(calc(-50% + 2px),calc(-50% - 5px)) rotate(1.8deg)}
  46%{transform:translate(calc(-50% - 3px),calc(-50% - 2px)) rotate(-2.4deg)}
  49%{transform:translate(calc(-50% + 3px),calc(-50% - 6px)) rotate(2.6deg)}
  52%{transform:translate(calc(-50% - 2px),calc(-50% - 1px)) rotate(-1.8deg)}
  55%{transform:translate(calc(-50% + 2px),calc(-50% - 3px)) rotate(1.2deg)}
  58%{transform:translate(calc(-50% - 1px),-50%) rotate(-.6deg)}
  62%,80%{transform:translate(-50%,-50%)}
  83%{transform:translate(-50%,calc(-50% - 7px)) scaleY(1.03)}
  87%{transform:translate(-50%,calc(-50% + 1px)) scaleY(.97)}
  91%{transform:translate(-50%,-50%)}}
.calm #manoir .gift.rattle{animation:none}
#manoir .scene-head.story small,#attaque .scene-head.story small{font-size:clamp(14px,1.1vw,20px);letter-spacing:.2em;margin-bottom:10px}
#manoir .banner-clown{position:absolute;z-index:12;aspect-ratio:150/260;transform:translate(-50%,-50%)}
#manoir .clown-eye{position:absolute;z-index:11;aspect-ratio:1;transform:translate(-50%,-50%) scale(.3);border-radius:50%;opacity:0;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(circle,#fff 0 12%,#ffe066 22%,#ff3a1a 45%,#ff000000 70%)}
#manoir .clown-eye.lit{animation:clownEyes 3s ease forwards}
@keyframes clownEyes{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}8%{opacity:1;transform:translate(-50%,-50%) scale(1.5)}14%{opacity:.5}20%,72%{opacity:1;transform:translate(-50%,-50%) scale(1.25)}78%{opacity:.4}84%{opacity:.95}100%{opacity:0;transform:translate(-50%,-50%) scale(.6)}}
.calm #manoir .clown-eye.lit{animation:calmfade2 3s ease forwards;transform:translate(-50%,-50%)}
#manoir .eyes-hide .ch-lit{opacity:.55;filter:brightness(.75) blur(.3px)}
#manoir .balloons-hide .ch-lit{opacity:.6;filter:brightness(.8) blur(.3px)}
#manoir .balloons-hide .ch-base{opacity:.07;filter:brightness(.35) blur(.8px)}
#manoir .lamp-hide img{position:absolute;inset:0;width:100%;height:100%;max-width:none}
#manoir .ch-base{opacity:.06;filter:brightness(.3) saturate(.5) blur(.8px)}
#manoir .ch-lit{opacity:.5;filter:brightness(.62) saturate(.8) blur(.3px);
  -webkit-mask-image:radial-gradient(circle var(--cr) at var(--mx) var(--my),#000 0,#0009 40%,#0000 100%);
  mask-image:radial-gradient(circle var(--cr) at var(--mx) var(--my),#000 0,#0009 40%,#0000 100%)}
#manoir .clown-zone{position:absolute;z-index:12;aspect-ratio:260/480;transform:translate(-50%,-50%)}
#manoir .frame.portrait .p1{filter:sepia(.35) saturate(.8) brightness(.78) contrast(1.1)}
.rv-isee{left:50%;top:18%;transform:translateX(-50%) rotate(-3deg);font-size:clamp(40px,6.5vw,92px);white-space:nowrap}
.rv-window{position:absolute;z-index:4;left:43%;top:30%;width:clamp(80px,9vw,130px);mix-blend-mode:lighten;
  -webkit-mask-image:radial-gradient(ellipse 45% 50% at 50% 45%,#000 40%,transparent 72%);mask-image:radial-gradient(ellipse 45% 50% at 50% 45%,#000 40%,transparent 72%)}
.rv-window.on{animation:windowpeek 4s ease forwards}
@keyframes windowpeek{0%{opacity:0}25%,70%{opacity:.95}100%{opacity:0}}
.frame{position:absolute;z-index:4;overflow:hidden;background:#111}
.frame.portrait{left:4%;top:34%;width:clamp(110px,15vw,210px);aspect-ratio:3/4;border:12px solid #4a3417;border-image:linear-gradient(135deg,#9c7a3c,#3b2a12,#b8914a,#3b2a12) 1;box-shadow:0 10px 30px #000}
.frame.mirror{right:4%;top:32%;width:clamp(110px,15vw,210px);aspect-ratio:2/3;border-radius:50% 50% 46% 46%/38% 38% 30% 30%;border:10px solid #6d6a63;box-shadow:inset 0 0 40px #000,0 10px 30px #000;background:radial-gradient(#3a4248,#0d1012)}
.frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.frame.portrait .p1{filter:sepia(.5) brightness(.8)}
.frame.portrait .p2.on{animation:swap 3.5s steps(1) forwards}
@keyframes swap{0%{opacity:1}12%{opacity:0}18%{opacity:1}75%{opacity:1}100%{opacity:0}}
.frame.mirror img{filter:brightness(.9) contrast(1.1)}
.frame.mirror img.on{animation:mirrorshow 4s ease forwards}
@keyframes mirrorshow{0%{opacity:0;transform:scale(1.15)}30%,75%{opacity:1;transform:scale(1)}100%{opacity:0}}
.knock-text.on,.rv.in-light.on{transition-delay:.2s}
.rv-drap{left:50%;top:50%;width:min(46vw,420px);transform:translate(-50%,-50%);
  -webkit-mask-image:radial-gradient(ellipse 45% 50% at 50% 50%,#000 40%,transparent 75%);mask-image:radial-gradient(ellipse 45% 50% at 50% 50%,#000 40%,transparent 75%)}
.rv-drap.on{animation:drapshow 4.2s ease forwards}
@keyframes drapshow{0%{opacity:0}10%,80%{opacity:1}100%{opacity:0}}

/* ---------- Attaque finale ---------- */
.attack .bg-video{filter:brightness(.75) contrast(1.2) saturate(.6)}
.attack .dark{background:radial-gradient(circle var(--r) at var(--x,50%) var(--y,55%),#0000 0,#00000022 35%,#000000c0 72%,#000000e6 100%)}
.attack.lamp-dying .dark{animation:lampflicker .4s steps(2) infinite}
.attack.lamp-off .dark{background:#000;animation:none}
.red-pulse{position:absolute;inset:0;z-index:12;pointer-events:none;background:radial-gradient(ellipse at center,transparent 30%,#9b001899 100%);opacity:0}
.attack.running .red-pulse{animation:pulse var(--beat,1s) ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.15}20%{opacity:.7}}
.calm .attack.running .red-pulse{animation:none;opacity:.2}
.wall-word{z-index:3;left:6%;top:58%;font-size:clamp(32px,5vw,70px);transform:rotate(-4deg);opacity:.85}
.wall-word-r{left:auto;right:5%;top:46%;text-align:center;line-height:1.05;transform:rotate(3deg)}
/* mêmes effets de sang que le titre de l'accueil : dégradé sang + coulures (js/blood.js) */
.wall-word.blood-drip{background:linear-gradient(180deg,#d42a3c 0%,#aa1427 38%,#7c0b19 78%,#56060f 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 0 22px #b0102440) drop-shadow(0 3px 0 #250005)}
@media (max-width:768px){.wall-word-r{top:62%;right:4%}}
@media (max-width:480px){.wall-word{font-size:26px;top:31%;left:5%}.wall-word-r{top:37%;right:5%;left:auto}}
.creatures{position:absolute;inset:0;z-index:11;pointer-events:none}
.cr{position:absolute;left:50%;top:50%;width:clamp(150px,24vw,330px);aspect-ratio:3/4;object-fit:cover;opacity:0;will-change:transform,opacity;
  -webkit-mask-image:radial-gradient(ellipse 48% 48% at 50% 48%,#000 45%,transparent 78%);mask-image:radial-gradient(ellipse 48% 48% at 50% 48%,#000 45%,transparent 78%)}
.cr{filter:brightness(.38) contrast(1.25);transition:filter .15s}
.cr.hit{filter:brightness(1.15) contrast(1.1)}
.attack-msg{position:absolute;z-index:30;left:50%;top:44%;transform:translate(-50%,-50%);margin:0;font-family:var(--font-horror);font-size:clamp(40px,7vw,96px);color:var(--bone);text-shadow:0 0 30px #000,0 0 6px #000;pointer-events:none;text-align:center;white-space:nowrap}
.attack-msg.pop{animation:msgpop .6s ease-out}
@keyframes msgpop{from{transform:translate(-50%,-50%) scale(1.4);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}
.battery{position:absolute;z-index:30;right:clamp(16px,4vw,56px);top:calc(var(--hud-h) + 18px);display:flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.1em}
@media (min-width:769px){.battery{right:52px}}
.bat{position:relative;width:74px;height:22px;border:2px solid var(--bone);border-radius:4px;padding:2px}
.bat::after{content:"";position:absolute;right:-6px;top:5px;width:4px;height:8px;background:var(--bone);border-radius:0 2px 2px 0}
.bat i{display:block;height:100%;width:var(--lvl,100%);background:var(--sick);transition:width .25s linear,background .3s}
.bat.low i{background:var(--blood-hi)}
.attack-start{position:absolute;z-index:31;left:50%;top:55%;transform:translate(-50%,-50%);min-height:56px;padding:0 28px;border-radius:999px;cursor:pointer;background:var(--blood);border:1px solid var(--blood-hi);color:#fff;font-size:1.1em;box-shadow:0 0 40px #e0153066}
.attack-start:hover{background:var(--blood-hi)}
.attack.running .attack-start,.attack.done .attack-start{display:none}

/* ---------- Fin ---------- */
#fin{height:100vh;height:100svh;min-height:560px;background:radial-gradient(ellipse 60% 45% at 50% 30%,#2a0d06 0,#0b0504 55%,#000 85%)}
.final-dark{position:absolute;inset:0;z-index:20;background:#000;pointer-events:none;opacity:0;transition:opacity .6s}
.js #fin.ph-dark .final-dark,.js #fin.ph-eyes .final-dark,.js #fin.ph-scare .final-dark{opacity:1}
.final-dark img{position:absolute;left:50%;top:min(50vh,50%);transform:translate(-50%,-50%);opacity:0}
.final-eyes{width:min(70vw,560px);transition:opacity .3s ease}
#fin.ph-eyes .final-eyes{transition:opacity 2.5s ease}
#fin.ph-eyes .final-eyes{opacity:.9}
.final-scare{width:min(92vw,820px);-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 42%,#000 35%,transparent 70%);mask-image:radial-gradient(ellipse 50% 50% at 50% 42%,#000 35%,transparent 70%)}
#fin.ph-scare .final-scare{animation:finalscare 1.4s cubic-bezier(.1,.9,.2,1) forwards}
@keyframes finalscare{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}8%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}80%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.3)}}
.final-inner{position:relative;z-index:2;height:100%;max-width:900px;margin:0 auto;padding:calc(var(--hud-h) + 2vh) 16px 2vh;display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center;transition:opacity 1.6s ease}
.fin-eye{display:block;width:clamp(70px,11vh,110px);height:auto;margin:0 auto clamp(18px,3.4vh,34px);border-radius:50%;mix-blend-mode:screen;-webkit-mask-image:radial-gradient(circle,#000 58%,transparent 71%);mask-image:radial-gradient(circle,#000 58%,transparent 71%);filter:drop-shadow(0 0 18px #e0153088);animation:fineye 7s ease-in-out infinite}
@keyframes fineye{0%,44%,52%,100%{transform:scaleX(1);filter:brightness(1) drop-shadow(0 0 18px #e0153088)}47%,49%{transform:scaleX(.04)}70%{filter:brightness(1.25) drop-shadow(0 0 30px #ff2a3dcc)}}
.calm .fin-eye{animation:none}
.fin-cols{display:flex;flex-direction:column;align-items:center}
.fin-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.fin-cta .share-msg{min-height:1.4em;margin:10px 0 0}
.fin-foot{display:flex;flex-direction:column;align-items:center}
.fin-fire{display:block;width:clamp(240px,min(60vw,46vh),720px);height:auto;mix-blend-mode:screen;-webkit-mask-image:radial-gradient(ellipse 52% 50% at 50% 50%,#000 70%,transparent 100%);mask-image:radial-gradient(ellipse 52% 50% at 50% 50%,#000 70%,transparent 100%);animation:finfire 2.6s ease-in-out infinite}
@keyframes finfire{0%,100%{filter:brightness(1)}30%{filter:brightness(1.18) saturate(1.1)}55%{filter:brightness(.9)}75%{filter:brightness(1.1)}}
.calm .fin-fire{animation:none}
.fin-foot .lights-on{margin:2px 0 0;color:#ff4d63}
.js #fin:not(.ph-light) .final-inner{opacity:0}
@keyframes flame{0%,100%{transform:scaleY(1) rotate(-1deg)}30%{transform:scaleY(1.08) rotate(2deg)}60%{transform:scaleY(.94) rotate(-2deg)}}
.survived{margin:0;font-family:var(--font-horror);font-weight:400;font-size:clamp(48px,8vw,100px);line-height:1;color:var(--bone);text-shadow:0 0 30px #ffb34744}
#fin .survived{font-size:clamp(38px,min(7vw,7.75vh),84px);color:#fff2c8;cursor:default;transition:transform .4s ease;
  text-shadow:0 0 .04em #fff,0 -.04em .05em #ffe066,.02em -.09em .08em #ffb020,-.02em -.15em .13em #ff7a00,.02em -.24em .2em #e83a00,0 -.32em .3em #a01000;
  animation:finflame 1.1s ease-in-out infinite alternate}
@keyframes finflame{
  0%{text-shadow:0 0 .04em #fff,0 -.04em .05em #ffe066,.02em -.09em .08em #ffb020,-.02em -.15em .13em #ff7a00,.02em -.24em .2em #e83a00,0 -.32em .3em #a01000}
  33%{text-shadow:0 0 .04em #fff,.01em -.05em .05em #ffe066,-.02em -.1em .09em #ffb020,.03em -.17em .14em #ff7a00,-.02em -.27em .22em #e83a00,.01em -.36em .32em #a01000}
  66%{text-shadow:0 0 .04em #fff,-.01em -.04em .04em #ffe066,.03em -.08em .08em #ffb020,-.03em -.14em .12em #ff7a00,.03em -.22em .19em #e83a00,-.01em -.3em .28em #a01000}
  100%{text-shadow:0 0 .05em #fff,0 -.05em .06em #ffe066,-.01em -.11em .1em #ffb020,.02em -.18em .15em #ff7a00,-.01em -.28em .23em #e83a00,0 -.38em .34em #a01000}}
@keyframes finflamehi{
  0%{text-shadow:0 0 .06em #fff,0 -.06em .06em #ffe066,.03em -.14em .1em #ffb020,-.04em -.25em .18em #ff7a00,.04em -.4em .28em #e83a00,0 -.56em .4em #a01000,0 -.7em .55em #5a0800}
  50%{text-shadow:0 0 .06em #fff,.02em -.07em .07em #ffe066,-.04em -.16em .12em #ffb020,.05em -.29em .2em #ff7a00,-.04em -.46em .3em #e83a00,.02em -.62em .44em #a01000,0 -.78em .6em #5a0800}
  100%{text-shadow:0 0 .07em #fff,-.02em -.06em .06em #ffe066,.04em -.13em .1em #ffb020,-.05em -.24em .17em #ff7a00,.05em -.38em .26em #e83a00,-.02em -.52em .38em #a01000,0 -.66em .5em #5a0800}}
#fin .fin-head:hover .survived{animation:finflamehi .35s ease-in-out infinite alternate;transform:scale(1.03)}
#fin .final-sub,#fin .vote-note{color:#ff9a3c;text-shadow:0 0 6px #ff6a0055,0 0 14px #e83a0033;transition:color .4s,text-shadow .4s}
#fin .fin-head:hover .final-sub,#fin .vote-note:hover{color:#ffb35c;text-shadow:0 0 4px #ffcc66aa,0 -2px 8px #ff7a00cc,0 -5px 16px #e83a0099,0 -9px 26px #a0100066;animation:finsubflick .18s steps(2) infinite alternate}
@keyframes finsubflick{to{text-shadow:0 0 5px #ffcc66cc,0 -3px 9px #ff7a00dd,0 -7px 19px #e83a00aa,0 -11px 30px #a0100077}}
.calm #fin .survived,.calm #fin .fin-head:hover .survived,.calm #fin .fin-head:hover .final-sub,.calm #fin .vote-note:hover{animation:none}
.final-sub{margin:8px auto 18px;max-width:820px;line-height:1.5;color:var(--bone);text-wrap:pretty}
.btn-vote{min-height:68px;padding:0 36px;font-size:clamp(19px,2vw,24px);background:var(--blood);color:#fff;border:2px solid var(--blood-hi);border-radius:6px;box-shadow:0 0 50px #e0153066,0 0 120px #ffb34722;animation:votepulse 2.4s ease-in-out infinite}
.btn-vote:hover{background:var(--blood-hi);transform:scale(1.03)}
@keyframes votepulse{50%{box-shadow:0 0 70px #e01530aa,0 0 140px #ffb34733}}
.vote-note{margin:14px auto 18px;max-width:440px;font-size:.92em;color:var(--bone)}
.share-msg{min-height:1.5em;margin:8px 0 0;font-size:.9em;color:var(--sick)}
.lights-on{margin:46px 0 0;color:var(--mute);font-size:.95em}


/* ---------- Footer ---------- */
.site-footer{padding:30px 16px 40px;text-align:center;font-size:13px;color:var(--mute);border-top:1px solid #ffffff12}
.site-footer details{max-width:640px;margin:10px auto;text-align:left}
.site-footer summary{cursor:pointer;text-align:center;padding:8px}
.nochild{color:var(--bone-dim);margin:0 0 6px}
.copy{margin:10px 0 0}
/* Pied de page logé dans la dernière page : une seule ligne, mentions en panneau */
#fin .site-footer{position:relative;width:100%;padding:8px 0 0;border-top:1px solid #ffffff12;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px 18px;font-size:12px}
#fin .site-footer>p{margin:0}
#fin .site-footer .link-btn{padding:4px 0;font-size:12px}
#fin .site-footer details{margin:0;max-width:none;position:static}
#fin .site-footer summary{padding:4px 0;text-decoration:underline;color:var(--bone-dim)}
#fin .legal-panel p{margin:0 0 8px}
#fin .legal-panel{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);width:min(640px,92vw);max-height:60vh;overflow:auto;padding:16px 18px 8px;text-align:left;background:#0b0606f2;border:1px solid #ffffff22;border-radius:10px;box-shadow:0 10px 40px #000;z-index:5}

/* ---------- Mobile ---------- */
@media (max-width:480px){.depth{display:none}}
@media (max-width:640px){
  .attack-start{white-space:nowrap;font-size:.95em;padding:0 20px}
  :root{--r:160px}
  .scene-head{max-width:calc(100vw - 32px)}
  .found{top:auto;bottom:calc(max(22px,env(safe-area-inset-bottom)) + 64px);right:50%;transform:translateX(50%)}
  .battery{top:auto;bottom:calc(max(22px,env(safe-area-inset-bottom)) + 64px);right:50%;transform:translateX(50%)}
  .tomb{width:30vw}
  .epitaph{font-size:11px;margin:6px 4px 0}
  .frame.portrait,.frame.mirror{width:26vw;top:44%}
  .rv-eyes{width:46%}
  .next{padding:0 18px;font-size:.95em}
  .attack-msg{white-space:normal;width:90vw}
}

/* ---------- Mode calme ---------- */
.calm #grain{animation:none}
.calm .title-shake,.calm .drip::after,.calm .fog,.calm .next span,.calm .next.pulse,.calm .btn-vote,.calm .rv-eyes.on{animation:none}
.calm body.shake main,.calm .shake main{animation:none}
.calm .blood-word.on{animation:none}
.calm .crows.on .crow{animation:calmfade 2s var(--d) ease forwards}
@keyframes calmfade{to{opacity:0}}
.calm .rv-spectre.on,.calm .rv-ghost.on,.calm .rv-window.on,.calm .rv-drap.on,.calm .frame.mirror img.on{animation:calmfade2 4s ease forwards}
.calm .frame.portrait .p2.on{animation:calmfade2 4s ease forwards}
@keyframes calmfade2{0%{opacity:0}25%,75%{opacity:.9}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- Améliorations des scènes ---------- */
/* Indice sur une zone non explorée */
.hot.hint::after{content:'';position:absolute;inset:22%;border-radius:50%;border:2px solid #ffb347cc;box-shadow:0 0 22px #ffb34777;animation:hintring 1.6s ease-out infinite;pointer-events:none}
@keyframes hintring{0%{transform:scale(.5);opacity:.95}100%{transform:scale(1.25);opacity:0}}
.calm .hot.hint::after{animation:none;opacity:.8}
.found.all{border-color:#ffb347;color:#ffb347}

/* Le miroir du manoir ressemble à un miroir avant qu'on s'en approche */
.frame.mirror::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,#0000 30%,#ffffff1f 46%,#0000 60%);background-size:260% 100%;animation:mirrorsheen 7s ease-in-out infinite}
@keyframes mirrorsheen{0%{background-position:130% 0}60%,100%{background-position:-60% 0}}
.calm .frame.mirror::before{animation:none;background-position:40% 0}

/* Briefing avant l'attaque */
.attack-brief{position:absolute;z-index:31;left:50%;top:67%;transform:translateX(-50%);width:min(92vw,520px);margin:0;text-align:center;font-size:.98em;line-height:1.5;color:#e9dccb;text-shadow:0 2px 10px #000}
.attack-brief b{color:var(--flame)}
.attack.running .attack-brief,.attack.done .attack-brief{display:none}

/* Logo en néon cassé : certaines lettres vacillent, une est quasi morte */
.logo i{font-style:normal;display:inline-block}
.logo .lg-end,.at-fin .logo span:first-child{display:none}
.at-fin .logo .lg-end{display:inline}
.logo .f1{animation:nflick1 3.1s linear infinite}
.logo .f2{animation:nflick2 4.3s linear infinite}
.logo .f3{animation:nflick1 5.7s 1s linear infinite}
.logo .dead{animation:ndead 2.6s linear infinite}
.logo{animation:nhum 6s linear infinite}
@keyframes nflick1{0%,17%,22%,58%,61%,100%{color:#ff4d63;text-shadow:0 0 3px #fff9,0 0 9px #ff2a3d,0 0 22px #ff2a3d,0 0 44px #e01530}18%,20%,59%{color:#4a1219;text-shadow:none}19%,60%{color:#ff4d63;text-shadow:0 0 3px #fff9,0 0 9px #ff2a3d}}
@keyframes nflick2{0%,40%,46%,100%{color:#ff4d63;text-shadow:0 0 3px #fff9,0 0 9px #ff2a3d,0 0 22px #ff2a3d,0 0 44px #e01530}41%,43%,45%{color:#4a1219;text-shadow:none}42%,44%{color:#ff4d63;text-shadow:0 0 3px #fff9,0 0 9px #ff2a3d}}
@keyframes ndead{0%,7%,11%,13%,56%,60%,100%{color:#4a1219;text-shadow:none}8%,10%,57%,59%{color:#ff4d63;text-shadow:0 0 3px #fff9,0 0 9px #ff2a3d,0 0 22px #ff2a3d}9%{color:#2a0a0e;text-shadow:none}58%{color:#4a1219;text-shadow:none}}
@keyframes nhum{0%,93%,100%{opacity:1}94%{opacity:.82}95%{opacity:1}96%{opacity:.7}97%{opacity:1}}
.calm .logo,.calm .logo i{animation:none}
.calm .logo .dead{color:#ff4d63;text-shadow:0 0 3px #fff9,0 0 9px #ff2a3d,0 0 22px #ff2a3d}

/* Sang réaliste sous le titre (SVG généré par js/blood.js) */
.title-shake{position:relative;display:inline-block;margin-bottom:96px}
h1.title-shake{background:linear-gradient(180deg,#d42a3c 0%,#aa1427 38%,#7c0b19 78%,#56060f 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 0 22px #b0102440) drop-shadow(0 3px 0 #250005)}
.drip::after{display:none}
.blood-svg{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;z-index:2;filter:drop-shadow(0 3px 4px #0009)}
@media (max-width:640px){.title-shake{margin-bottom:60px}}

/* Police gothique : ajustements de taille */
.lede{text-wrap:balance}
.hud-btn{font-size:16px}
.depth{font-size:16px;letter-spacing:.12em}
@media (min-width:769px){#depth{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap}}
.kicker{font-weight:600}

/* Bouton de vote en néon cassé (même rendu que le logo) */
.btn-vote.neon{font-family:var(--font-horror);font-weight:400;font-size:clamp(26px,3.2vw,38px);letter-spacing:.05em;line-height:1.1;padding:14px 38px;color:#ff4d63;background:#0009;border:2px solid #ff4d63;border-radius:10px;text-shadow:0 0 3px #fff9,0 0 9px #ff2a3d,0 0 22px #ff2a3d,0 0 44px #e01530;box-shadow:0 0 10px #ff2a3d99,0 0 34px #e0153066,inset 0 0 14px #ff2a3d55;animation:nhum 6s linear infinite}
.btn-vote.neon:hover{background:#1a0006;transform:scale(1.03);box-shadow:0 0 14px #ff2a3dcc,0 0 50px #e0153099,inset 0 0 18px #ff2a3d77}
.neon i{font-style:normal;display:inline-block}
.neon .nw{display:inline-block;white-space:nowrap}
.neon .f1{animation:nflick1 3.1s linear infinite}
.neon .f2{animation:nflick2 4.3s linear infinite}
.neon .f3{animation:nflick1 5.7s 1s linear infinite}
.neon .dead{animation:ndead 2.6s linear infinite}
.calm .btn-vote.neon,.calm .neon i{animation:none}
.calm .neon .dead{color:#ff4d63;text-shadow:0 0 3px #fff9,0 0 9px #ff2a3d,0 0 22px #ff2a3d}

/* Bouton d'entrée de l'accueil en néon cassé */
.btn-blood.neon{font-family:var(--font-horror);font-weight:400;font-size:clamp(22px,2.3vw,30px);letter-spacing:.05em;line-height:1.1;padding:10px 30px;min-height:0;color:#ff4d63;background:#0009;border:2px solid #ff4d63;border-radius:8px;text-shadow:0 0 3px #fff9,0 0 9px #ff2a3d,0 0 22px #ff2a3d,0 0 44px #e01530;box-shadow:0 0 10px #ff2a3d99,0 0 34px #e0153066,inset 0 0 14px #ff2a3d55;animation:nhum 6s linear infinite}
.btn-blood.neon:hover{background:#1a0006;box-shadow:0 0 14px #ff2a3dcc,0 0 50px #e0153099,inset 0 0 18px #ff2a3d77}
.calm .btn-blood.neon{animation:none}

/* Ancienne écriture (machine à écrire) pour le surtitre et la présentation de l'accueil uniquement */
.kicker,.lede{font-family:"Special Elite","Courier New",monospace;font-weight:400}
.kicker{font-size:clamp(14px,1.5vw,21px);letter-spacing:.2em}
.lede{font-size:clamp(17px,1.6vw,21px);line-height:1.5;max-width:540px}
@media (max-width:640px){.kicker{letter-spacing:.14em}}

/* Espacement entre les mots dans les cartes d'explication */
.howto li span{word-spacing:.22em}

/* ---------- Forêt : lampe chaude, clair de lune, vie ---------- */
@property --fl{syntax:'<number>';inherits:true;initial-value:1}
#foret .stage{animation:lampjit 3.6s linear infinite}
@keyframes lampjit{0%{--fl:1}6%{--fl:.95}11%{--fl:1.03}19%{--fl:.97}27%{--fl:1}34%{--fl:.93}38%{--fl:1.02}52%{--fl:.98}61%{--fl:1.04}70%{--fl:.96}78%{--fl:1}88%{--fl:.94}100%{--fl:1}}
#foret .bg{filter:brightness(1.12) contrast(1.12) saturate(.65)}
#foret .dark{background:radial-gradient(ellipse calc(var(--r) * var(--fl,1) * 1.1) calc(var(--r) * var(--fl,1) * .92) at var(--x,50%) var(--y,55%),#0000 0,#00000014 36%,#0a0f1a59 62%,#04070e94 84%,#03050ba8 100%)}
/* clair de lune bleuté */
#foret .stage::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(ellipse 60% 45% at 72% 4%,#9db8e83d 0,#6f8fc01f 40%,transparent 75%),linear-gradient(180deg,#2a3f6a2e 0,transparent 55%)}
/* faisceau chaud, irrégulier, qui vacille */
#foret .stage::after{content:"";position:absolute;inset:0;z-index:12;pointer-events:none;mix-blend-mode:screen;
  background:
    radial-gradient(circle calc(var(--r) * var(--fl,1) * .95) at var(--x,50%) var(--y,55%),#ffc47842 0,#ffaa5a1f 45%,transparent 78%),
    radial-gradient(ellipse calc(var(--r) * var(--fl,1) * .5) calc(var(--r) * .36) at calc(var(--x,50%) + var(--r) * .14) calc(var(--y,55%) - var(--r) * .1),#ffebbe29,transparent 72%),
    radial-gradient(ellipse calc(var(--r) * .38) calc(var(--r) * .5) at calc(var(--x,50%) - var(--r) * .2) calc(var(--y,55%) + var(--r) * .12),#ff9a4624,transparent 70%)}
#foret .fog{opacity:.7}
#foret .fog-2{z-index:5;top:20%;opacity:.5;animation:fog2 34s ease-in-out infinite alternate}
@keyframes fog2{from{transform:translateX(10%)}to{transform:translateX(-14%)}}
.life{position:absolute;inset:0;z-index:12;pointer-events:none;overflow:hidden}
.ff{position:absolute;width:var(--s);height:var(--s);border-radius:50%;background:#e9f7a8;box-shadow:0 0 8px 3px #d8ef7a99,0 0 22px 8px #b8d85a33;opacity:0;animation:ff var(--t) var(--dl) ease-in-out infinite}
@keyframes ff{0%{opacity:0;transform:translate(0,0)}15%{opacity:.9}40%{opacity:.25}60%{opacity:.85}100%{opacity:0;transform:translate(var(--dx),var(--dy))}}
.leaf{position:absolute;top:-6%;width:var(--sz);height:calc(var(--sz) * .6);background:#4a2a14;border-radius:0 100% 0 100%;opacity:.8;filter:brightness(.8);animation:leaf var(--t) var(--dl) linear infinite}
@keyframes leaf{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(calc(var(--sw) * .6),55vh) rotate(calc(var(--rot) * .5))}100%{transform:translate(var(--sw),112vh) rotate(var(--rot))}}
.calm .ff,.calm .leaf,.calm #foret .stage,.calm #foret .fog-2{animation:none}
.calm .ff{opacity:.5}.calm .leaf{display:none}
/* texte d'ambiance */
.scene-head.story{max-width:min(500px,88vw);padding:14px 20px 16px;background:linear-gradient(90deg,#000000d6,#000000b0 78%,#0000);border-left:2px solid var(--blood-hi);font-size:clamp(14px,.5vw + 11px,18px);line-height:1.45;color:var(--bone)}
.scene-head.story small{display:block;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--blood-hi);margin-bottom:6px}
.scene-head.story p{margin:.5em 0}
.scene-head.story .story-end{margin:.7em 0 0;font-family:var(--font-horror);font-size:1.7em;line-height:1.1;color:var(--flame);text-shadow:0 0 16px #ff8c2a66,0 2px 8px #000}
@media (max-width:768px){.scene-head.story{padding:10px 14px 12px;font-size:13px;line-height:1.38;max-width:calc(100vw - 24px)}.scene-head.story .story-end{font-size:1.5em}}

/* ---------- Pages d'un livre : chaque bloc = exactement un écran, on tourne la page au scroll ---------- */
html{scroll-snap-type:y mandatory}
.scene{height:100vh;height:100svh;min-height:0;scroll-snap-align:start;scroll-snap-stop:always}
.scene-head.story{max-height:calc(100svh - var(--hud-h) - 110px);overflow:hidden;font-size:clamp(11px,min(2.1vh,.5vw + 10px),18px)}
.scene-head.story .story-end{font-size:1.55em}

/* ---------- Forêt : chemin sans fin (canvas) ---------- */
.path-cv{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
#foret .bg{filter:none}
#foret .far-manor{top:31%;width:clamp(64px,7.5vw,112px);opacity:.75}
#foret .rv-spectre{top:26%;right:auto;left:56%}

/* ---------- Forêt : décor photo (chemin brumeux vers le manoir) ---------- */
#foret .stage{background:#0a0405}
.forest-blur{position:absolute;inset:-4%;width:108%;height:108%;object-fit:cover;object-position:50% 55%;z-index:0;filter:blur(22px) brightness(.55) saturate(1.1)}
.forest-main{position:absolute;z-index:1;top:0;left:50%;height:100%;width:auto;max-width:none;transform:translateX(-50%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%)}
@media (max-aspect-ratio:3/4){.forest-main{left:0;width:100%;object-fit:cover;object-position:50% 50%;transform:none;-webkit-mask-image:none;mask-image:none}}
#foret .stage::before{display:none}
#foret .dark{background:radial-gradient(ellipse calc(var(--r) * var(--fl,1) * 1.1) calc(var(--r) * var(--fl,1) * .92) at var(--x,50%) var(--y,55%),#0000 0,#00000014 36%,#0a020340 62%,#06010270 84%,#05010290 100%)}
#foret .fog{opacity:.45}
.ff{background:#ffd9a8;box-shadow:0 0 8px 3px #ffb07a88,0 0 22px 8px #ff6a4a2e}
.forest-main{width:max(58vw,66.7vh);object-fit:cover;object-position:50% 56%;filter:brightness(1.15) contrast(1.05);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
@media (max-aspect-ratio:3/4){.forest-main{width:100%}}
#foret .fog{opacity:.3}
/* ---------- Attaque : couloir de l'étage ---------- */
#attaque .stage{background:#05030a}
#attaque .forest-main.etage-main{width:max(52vw,72vh);object-position:50% 42%;filter:brightness(1.05) contrast(1.05);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}
#attaque .forest-blur{object-position:50% 42%;filter:blur(24px) brightness(.5) saturate(1.1)}
@media (max-aspect-ratio:3/4){#attaque .forest-main.etage-main{width:100%}}
/* monstre du plafond : détouré, sans masque radial */
.cr[data-cr="plafond"]{aspect-ratio:726/501;object-fit:contain;width:clamp(200px,30vw,420px);-webkit-mask-image:none;mask-image:none}
.cr[data-cr="aquatre"]{aspect-ratio:464/424;object-fit:contain;width:clamp(180px,24vw,340px);-webkit-mask-image:none;mask-image:none}
.cr[data-cr="goule"]{aspect-ratio:690/1210;object-fit:contain;width:clamp(170px,20vw,300px);-webkit-mask-image:none;mask-image:none}
.cr[data-cr="suaire"]{aspect-ratio:497/971;object-fit:contain;width:clamp(160px,17vw,260px);-webkit-mask-image:none;mask-image:none}
#attaque .attack-msg{white-space:normal;width:max-content;max-width:min(90vw,1100px);line-height:1.05}
/* femme qui sort du portrait de clown (survol) */
#attaque .mirror-zone{position:absolute;z-index:12;aspect-ratio:200/775;transform:translate(-50%,-50%);cursor:pointer}
#attaque .mirror-woman{position:absolute;z-index:11;transform:translate(-50%,-50%);aspect-ratio:735/1124;opacity:0;pointer-events:none;filter:drop-shadow(0 0 24px #000)}
#attaque .mirror-woman img{width:100%;height:100%;display:block}
#attaque .mirror-woman.show{animation:mirrorOut 2.6s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes mirrorOut{0%{opacity:0;transform:translate(-50%,-50%) scale(.82);filter:brightness(2.2) drop-shadow(0 0 24px #000)}
  6%{opacity:.9}9%{opacity:.15}13%{opacity:1;filter:brightness(1.3) drop-shadow(0 0 24px #000)}
  35%{transform:translate(-38%,-50%) scale(1.06);filter:brightness(1) drop-shadow(0 0 24px #000)}
  80%{opacity:1;transform:translate(-36%,-50%) scale(1.08)}100%{opacity:0;transform:translate(-36%,-50%) scale(1.08)}}
.calm #attaque .mirror-woman.show{animation:calmfade2 2.6s ease forwards}
/* aucune animation avant « Commencer la partie » : les zones de survol ne s'activent qu'en jeu */
#attaque:not(.running) .mirror-zone,#attaque:not(.running) .door-zone{pointer-events:none;cursor:default}
/* porte du couloir qui s'entrouvre : quelque chose en sort (survol) */
#attaque .door-fx,#attaque .door-zone{position:absolute;aspect-ratio:135/515;transform:translate(-50%,-50%)}
#attaque .door-fx{z-index:11;pointer-events:none}
#attaque .door-zone{z-index:12;cursor:pointer}
#attaque .door-gap{position:absolute;inset:0;background:radial-gradient(ellipse 60% 45% at 85% 50%,#3a0208 0,#0a0002 55%,#000 100%);box-shadow:inset 0 0 12px #000;
  clip-path:polygon(100% 3%,100% 3%,100% 97%,100% 97%)}
#attaque .door-fog{position:absolute;left:40%;bottom:-6%;width:160%;height:30%;border-radius:50%;background:radial-gradient(ellipse at 30% 60%,#cfe3ffaa 0,#9fbbe055 40%,#0000 70%);filter:blur(10px);opacity:0}
#attaque .door-ghost{position:absolute;left:78%;top:38%;width:230%;max-width:none;transform:translate(-50%,-50%) scale(.15);opacity:0;filter:brightness(.8) drop-shadow(0 0 20px #000)}
#attaque .door-fx.open .door-gap{animation:doorGap 3.4s ease forwards}
#attaque .door-fx.open .door-fog{animation:doorFog 3.4s ease-out forwards}
#attaque .door-fx.open .door-ghost{animation:doorGhost 3.4s cubic-bezier(.3,.6,.3,1) forwards}
@keyframes doorGap{0%{clip-path:polygon(100% 3%,100% 3%,100% 97%,100% 97%)}
  12%{clip-path:polygon(88% 4%,100% 3%,100% 97%,88% 96%)}20%{clip-path:polygon(86% 4%,100% 3%,100% 97%,86% 96%)}
  32%{clip-path:polygon(38% 8%,100% 3%,100% 97%,38% 92%)}80%{clip-path:polygon(38% 8%,100% 3%,100% 97%,38% 92%)}
  100%{clip-path:polygon(100% 3%,100% 3%,100% 97%,100% 97%)}}
@keyframes doorFog{0%,15%{opacity:0;transform:translateX(-30%) scale(.6)}40%{opacity:.9}100%{opacity:0;transform:translateX(10%) scale(1.4)}}
@keyframes doorGhost{0%,28%{opacity:0;transform:translate(-50%,-50%) scale(.15)}
  33%{opacity:.85;transform:translate(-50%,-50%) scale(.35)}
  48%{opacity:1;transform:translate(-20%,-40%) scale(1.15);filter:brightness(1.15) drop-shadow(0 0 20px #000)}
  58%{transform:translate(-22%,-41%) scale(1.1)}
  78%{opacity:1;transform:translate(-40%,-48%) scale(.5);filter:brightness(.7) drop-shadow(0 0 20px #000)}
  86%,100%{opacity:0;transform:translate(-50%,-50%) scale(.15)}}
.calm #attaque .door-fx.open .door-ghost{animation:calmfade2 3.4s ease forwards;transform:translate(-50%,-50%) scale(.6)}
#attaque:not(.running):not(.lamp-off) .dark{background:radial-gradient(ellipse calc(var(--r) * 1.1) calc(var(--r) * .92) at 50% 55%,#0000 0,#00000014 36%,#0a020340 62%,#06010270 84%,#05010290 100%)}

/* Histoire de la forêt : même écriture que « Expérience immersive pour Halloween » (taille inchangée) */
.scene-head.story p:not(.story-end){font-family:"Special Elite","Courier New",monospace;font-weight:400;color:var(--flame);text-shadow:0 0 12px #ffb34799,0 0 30px #ffb34744,0 2px 8px #000}

/* Histoire en bandeau en haut du bloc */
.scene-head.story{left:0;right:0;top:var(--hud-h);max-width:none;margin:0;padding:14px clamp(16px,6vw,120px) 26px;border-left:0;text-align:center;
  background:linear-gradient(180deg,#000000e0 0,#000000b8 70%,#0000 100%);max-height:calc(100svh - var(--hud-h) - 100px)}
.scene-head.story small{margin-bottom:8px}
.scene-head.story p{max-width:1100px;margin:.35em auto;text-wrap:balance}
.scene-head.story .story-end{margin-top:.45em}
@media (max-width:768px){.scene-head.story{padding:10px 14px 18px;max-width:none}}
.scene-head.story .story-end{margin:.45em auto 0}

/* Forêt : yeux rouges de chauves-souris dans les coins du bas */
.bat-eyes{position:absolute;z-index:22;bottom:0;width:min(30vw,420px);height:min(34vh,300px)}
.bat-eyes.left{left:0}.bat-eyes.right{right:0}
.peye{position:absolute;display:flex;gap:calc(var(--s) * .9);padding:16px;margin:-16px;cursor:crosshair}
.peye i{display:block;width:var(--s);height:calc(var(--s) * .62);border-radius:50% 50% 45% 45%;background:radial-gradient(circle at 50% 45%,#ffd0c8 0,#ff2a1a 35%,#a00000 75%);
  box-shadow:0 0 6px 2px #ff1a0acc,0 0 16px 5px #ff00004d;opacity:0;transform:scaleY(.1);transition:opacity .35s,transform .25s}
.peye i:first-child{transform-origin:50% 50%;rotate:12deg}.peye i:last-child{rotate:-12deg}
.peye.on i{opacity:1;transform:scaleY(1);animation:batblink var(--bd) var(--bo) infinite}
@keyframes batblink{0%,42%,50%,88%,94%,100%{transform:scaleY(1)}46%,91%{transform:scaleY(.08)}}
.calm .peye.on i{animation:none}
.bat-eyes{pointer-events:none}.peye{pointer-events:auto}

/* Forêt : attaque de l'araignée (surgit du point de fuite, au bout du chemin) */
.spider-zone{position:absolute;z-index:21;left:43%;top:34%;width:14%;height:22%;border-radius:50%;cursor:crosshair}
.spider-attack{position:absolute;inset:0;z-index:35;pointer-events:none;overflow:hidden}
.giant-spider{position:absolute;left:50%;top:46%;width:min(150vw,190vh);height:auto;max-width:none;opacity:0;
  transform:translate(-50%,-46%) scale(.02);filter:brightness(.35);
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 48%,#000 52%,transparent 74%);mask-image:radial-gradient(ellipse 50% 50% at 50% 48%,#000 52%,transparent 74%)}
.spider-attack.attacking .giant-spider{animation:spiderLunge 3.6s cubic-bezier(.2,.75,.25,1) forwards}
@keyframes spiderLunge{
  0%{opacity:0;transform:translate(-50%,-46%) scale(.02);filter:brightness(.3) blur(2px)}
  8%{opacity:.9;transform:translate(-50%,-46%) scale(.04);filter:brightness(.4) blur(1px)}
  14%{transform:translate(-50%,-46%) scale(.05)}
  30%{opacity:1;transform:translate(-50%,-44%) scale(1.22);filter:brightness(1.1) blur(0)}
  36%{transform:translate(-50%,-47%) scale(1.08)}
  42%{transform:translate(-50%,-45%) scale(1.12)}
  78%{opacity:1;transform:translate(-50%,-45%) scale(1.13);filter:brightness(1)}
  100%{opacity:0;transform:translate(-50%,-45%) scale(1.5);filter:brightness(.4) blur(4px)}}
.web-impact{position:absolute;inset:-20%;opacity:0;transform:scale(.1);
  background:repeating-radial-gradient(ellipse at center,transparent 0 35px,rgba(220,220,220,.4) 36px 37px,transparent 38px 65px),
    repeating-conic-gradient(from 0deg at 50% 50%,transparent 0 13deg,rgba(220,220,220,.35) 13.4deg 14deg,transparent 14.4deg 30deg);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 30%,transparent 70%);mask-image:radial-gradient(circle at 50% 50%,#000 30%,transparent 70%)}
.spider-attack.attacking .web-impact{animation:webStrike 2.4s 1s ease-out forwards}
@keyframes webStrike{0%{opacity:0;transform:scale(.1)}30%{opacity:.75;transform:scale(1.2)}100%{opacity:0;transform:scale(1.7)}}
.dark-flash{position:absolute;inset:0;background:#000;opacity:0}
.spider-attack.attacking .dark-flash{animation:darkFlash 3.6s forwards}
@keyframes darkFlash{0%,26%{opacity:0}29%{opacity:.85}33%{opacity:0}100%{opacity:0}}
/* mode calme : l'araignée apparaît au loin, sans charge ni flash */
.spider-attack.soft .giant-spider{animation:spiderSoft 3.6s ease forwards}
@keyframes spiderSoft{0%,100%{opacity:0;transform:translate(-50%,-46%) scale(.12)}30%,70%{opacity:.85;transform:translate(-50%,-46%) scale(.18);filter:brightness(.6)}}

/* Nuée de petites araignées */
.swarm{position:absolute;inset:0}
.mini-spider{position:absolute;left:0;top:0;width:44px;height:44px;margin:-22px 0 0 -22px;will-change:transform;filter:drop-shadow(0 3px 4px #000c)}
.mini-spider svg{width:100%;height:100%;overflow:visible}
.mini-spider path{fill:none;stroke:#0b0a0a;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mini-spider .ab{fill:#120d0d;stroke:#3a2a2a;stroke-width:.8}.mini-spider .ce{fill:#0b0909}.mini-spider .ey{fill:#ff2a1a}
.mini-spider .la,.mini-spider .lb{transform-origin:0 0;animation:legs var(--leg) steps(2,jump-none) infinite alternate}
.mini-spider .lb{animation-direction:alternate-reverse}
@keyframes legs{from{transform:rotate(-9deg) scale(1,.92)}to{transform:rotate(9deg) scale(1,1.06)}}
/* L'araignée géante court : elle zigzague et tangue en approchant */
@keyframes spiderLunge{
  0%{opacity:0;transform:translate(-50%,-46%) scale(.02) rotate(0);filter:brightness(.3) blur(2px)}
  4%{opacity:.9;transform:translate(-50%,-46%) scale(.035) rotate(0)}
  8%{transform:translate(-46%,-45%) scale(.07) rotate(4deg);filter:brightness(.45) blur(1px)}
  12%{transform:translate(-54%,-47%) scale(.12) rotate(-4deg)}
  16%{transform:translate(-47%,-45%) scale(.2) rotate(3.5deg)}
  20%{transform:translate(-53%,-47%) scale(.34) rotate(-3.5deg)}
  24%{transform:translate(-48%,-45%) scale(.55) rotate(2.5deg);filter:brightness(.8) blur(0)}
  28%{transform:translate(-52%,-46%) scale(.85) rotate(-2deg)}
  32%{opacity:1;transform:translate(-50%,-43%) scale(1.22) rotate(0);filter:brightness(1.1)}
  37%{transform:translate(-50%,-47%) scale(1.08) rotate(1deg)}
  43%{transform:translate(-50%,-45%) scale(1.13) rotate(-.5deg)}
  50%,58%,66%,74%{transform:translate(-50.4%,-45%) scale(1.13)}
  54%,62%,70%,78%{transform:translate(-49.6%,-45.4%) scale(1.14)}
  78%{opacity:1;filter:brightness(1)}
  100%{opacity:0;transform:translate(-50%,-45%) scale(1.5);filter:brightness(.4) blur(4px)}}
@keyframes darkFlash{0%,29%{opacity:0}32%{opacity:.85}36%{opacity:0}100%{opacity:0}}
.spider-attack.attacking .web-impact{animation-delay:1.15s}
.mini-spider{width:58px;height:58px;margin:-29px 0 0 -29px;filter:drop-shadow(0 0 1.5px #ffb4a066) drop-shadow(0 4px 5px #000d)}
.mini-spider path{stroke:#1c1414}
.mini-spider{filter:drop-shadow(0 0 1.2px #ffb4a040) drop-shadow(0 4px 5px #000d)}

/* Araignée géante v3 : elle court (zigzag), se redresse, puis plonge ses crochets sur toi */
.giant-spider{width:min(118vw,128vh);-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 48%,#000 58%,transparent 76%);mask-image:radial-gradient(ellipse 50% 50% at 50% 48%,#000 58%,transparent 76%)}
.spider-attack.attacking .giant-spider{animation:spiderLunge 3.9s linear forwards}
@keyframes spiderLunge{
  0%{opacity:0;transform:translate(-50%,-46%) scale(.02) rotate(0);filter:brightness(.3) blur(2px);animation-timing-function:ease-out}
  4%{opacity:.9;transform:translate(-50%,-46%) scale(.035)}
  8%{transform:translate(-46%,-45%) scale(.07) rotate(4deg);filter:brightness(.45) blur(1px)}
  12%{transform:translate(-54%,-46%) scale(.12) rotate(-4deg)}
  16%{transform:translate(-47%,-44%) scale(.2) rotate(3.5deg)}
  20%{transform:translate(-53%,-45%) scale(.34) rotate(-3deg)}
  24%{transform:translate(-48%,-43%) scale(.55) rotate(2.5deg);filter:brightness(.8) blur(0)}
  28%{transform:translate(-51%,-44%) scale(.82) rotate(-1.5deg)}
  /* elle se redresse */
  30%{opacity:1;transform:translate(-50%,-46%) scale(1.05) rotate(0);filter:brightness(1);animation-timing-function:ease-out}
  38%{transform:translate(-50%,-56%) scale(1.2);filter:brightness(1.05);animation-timing-function:cubic-bezier(.7,0,1,.6)}
  /* les crochets plongent vers toi */
  44%{transform:translate(-50%,-38%) scale(1.45);filter:brightness(1.25)}
  48%{transform:translate(-50%,-43%) scale(1.35);filter:brightness(1.05)}
  53%,61%,69%,77%{transform:translate(-50.4%,-43%) scale(1.35)}
  57%,65%,73%{transform:translate(-49.6%,-43.5%) scale(1.36)}
  80%{opacity:1;transform:translate(-50%,-43%) scale(1.36);filter:brightness(1)}
  100%{opacity:0;transform:translate(-50%,-43%) scale(1.6);filter:brightness(.4) blur(4px)}}
@keyframes darkFlash{0%,41%{opacity:0}44%{opacity:.8}48%{opacity:0}100%{opacity:0}}
.spider-attack.attacking .dark-flash{animation-duration:3.9s}

/* Araignée géante v4 : elle surgit d'un coup au centre de l'écran et mord aussitôt */
.giant-spider{top:50%;width:min(112vw,118vh);-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 60%,transparent 78%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 60%,transparent 78%)}
.spider-attack.attacking .giant-spider{animation:spiderLunge 2.8s linear forwards}
@keyframes spiderLunge{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.35);filter:brightness(.4) blur(6px);animation-timing-function:cubic-bezier(.1,.9,.2,1)}
  9%{opacity:1;transform:translate(-50%,-50%) scale(1.12);filter:brightness(1.1) blur(0)}
  14%{transform:translate(-50%,-50%) scale(1.02);animation-timing-function:ease-out}
  /* elle se redresse */
  22%{transform:translate(-50%,-58%) scale(1.14);filter:brightness(1.05);animation-timing-function:cubic-bezier(.7,0,1,.6)}
  /* et plonge ses crochets sur toi */
  30%{transform:translate(-50%,-40%) scale(1.5);filter:brightness(1.3)}
  35%{transform:translate(-50%,-46%) scale(1.38);filter:brightness(1.05)}
  40%,50%,60%,70%{transform:translate(-50.5%,-46%) scale(1.38)}
  45%,55%,65%{transform:translate(-49.5%,-46.6%) scale(1.39)}
  78%{opacity:1;transform:translate(-50%,-46%) scale(1.39);filter:brightness(1)}
  100%{opacity:0;transform:translate(-50%,-46%) scale(1.65);filter:brightness(.4) blur(5px)}}
@keyframes darkFlash{0%,27%{opacity:0}30%{opacity:.8}35%{opacity:0}100%{opacity:0}}
.spider-attack.attacking .dark-flash{animation-duration:2.8s}

/* Araignée géante v5 : détourée (fond transparent), attaque furtive : surgit, mord, disparaît */
.giant-spider{top:50%;width:min(96vw,150vh);-webkit-mask-image:none;mask-image:none;filter:drop-shadow(0 0 30px #000) drop-shadow(0 0 60px #8a000055)}
.spider-attack.attacking .giant-spider{animation:spiderLunge 1.9s linear forwards}
@keyframes spiderLunge{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.3);animation-timing-function:cubic-bezier(.05,.9,.2,1)}
  6%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}
  12%{transform:translate(-50%,-56%) scale(1.12);animation-timing-function:cubic-bezier(.8,0,1,.6)}
  25%{transform:translate(-50%,-40%) scale(1.6)}
  31%{transform:translate(-50%,-46%) scale(1.45)}
  36%,48%,60%{transform:translate(-50.6%,-46%) scale(1.45)}
  42%,54%{transform:translate(-49.4%,-46.5%) scale(1.46)}
  64%{opacity:1;transform:translate(-50%,-46%) scale(1.46)}
  100%{opacity:0;transform:translate(-50%,-46%) scale(1.75);filter:blur(6px)}}
@keyframes darkFlash{0%,22%{opacity:0}25%{opacity:.75}31%{opacity:0}100%{opacity:0}}
.spider-attack.attacking .dark-flash{animation-duration:1.9s}
.giant-spider{--sh:drop-shadow(0 0 30px #000) drop-shadow(0 0 60px #8a000055)}
@keyframes spiderLunge{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.3);filter:var(--sh) blur(4px) brightness(.6);animation-timing-function:cubic-bezier(.05,.9,.2,1)}
  6%{opacity:1;transform:translate(-50%,-50%) scale(1.05);filter:var(--sh) blur(0) brightness(1)}
  12%{transform:translate(-50%,-56%) scale(1.12);filter:var(--sh) blur(0) brightness(1);animation-timing-function:cubic-bezier(.8,0,1,.6)}
  25%{transform:translate(-50%,-40%) scale(1.6);filter:var(--sh) blur(0) brightness(1.2)}
  31%{transform:translate(-50%,-46%) scale(1.45);filter:var(--sh) blur(0) brightness(1)}
  36%,48%,60%{transform:translate(-50.6%,-46%) scale(1.45)}
  42%,54%{transform:translate(-49.4%,-46.5%) scale(1.46)}
  64%{opacity:1;transform:translate(-50%,-46%) scale(1.46);filter:var(--sh) blur(0) brightness(1)}
  100%{opacity:0;transform:translate(-50%,-46%) scale(1.75);filter:var(--sh) blur(6px) brightness(.5)}}

/* v6 : l'araignée surgit en entier, puis gros plan sur les crocs au moment de la morsure */
@keyframes spiderLunge{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.3);filter:var(--sh) blur(4px) brightness(.6);animation-timing-function:cubic-bezier(.05,.9,.2,1)}
  7%{opacity:1;transform:translate(-50%,-50%) scale(1.05);filter:var(--sh) blur(0) brightness(1)}
  14%{opacity:1;transform:translate(-50%,-56%) scale(1.12);filter:var(--sh) blur(0) brightness(1);animation-timing-function:cubic-bezier(.8,0,1,.6)}
  23%{opacity:1;transform:translate(-50%,-44%) scale(1.5);filter:var(--sh) blur(0) brightness(1.2)}
  27%,100%{opacity:0;transform:translate(-50%,-42%) scale(1.7);filter:var(--sh) blur(3px) brightness(1)}}
.spider-attack.attacking .spider-crocs{animation:spiderBite 1.9s linear forwards}
@keyframes spiderBite{
  0%,21%{opacity:0;transform:translate(-50%,-50%) scale(.9);filter:var(--sh) blur(3px) brightness(1.2)}
  26%{opacity:1;transform:translate(-50%,-46%) scale(1.45);filter:var(--sh) blur(0) brightness(1.3);animation-timing-function:ease-out}
  32%{transform:translate(-50%,-50%) scale(1.3);filter:var(--sh) blur(0) brightness(1)}
  37%,49%,61%{transform:translate(-50.6%,-50%) scale(1.3)}
  43%,55%{transform:translate(-49.4%,-50.5%) scale(1.31)}
  66%{opacity:1;transform:translate(-50%,-50%) scale(1.31);filter:var(--sh) blur(0) brightness(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.6);filter:var(--sh) blur(6px) brightness(.5)}}
/* la nuée est sous le voile de la lampe : on la voit vraiment dans le faisceau */
#foret > .stage > .swarm{position:absolute;inset:0;z-index:8;pointer-events:none;overflow:hidden}
.mini-spider{filter:drop-shadow(0 3px 3px #000e)}
.mini-spider path{stroke:#070505}.mini-spider .ab{fill:#0d0909;stroke:#2a1c1c}
#foret > .stage > .swarm{z-index:12}
.mini-spider{filter:drop-shadow(0 0 1px #ff464270) drop-shadow(0 3px 3px #000e)}
.mini-spider .ab{stroke:#4a2626}.mini-spider .ey{fill:#ff3322}

/* ---------- Forêt : le loup ---------- */
#foret{--wp:0}
.wolf{position:absolute;z-index:4;left:61%;top:27%;width:clamp(170px,19vw,330px);pointer-events:none;
  opacity:calc(var(--wp) * .75);transform:translateX(calc((1 - var(--wp)) * 28px)) scale(calc(.94 + var(--wp) * .06));
  transition:opacity .35s linear,transform .5s ease-out;
  -webkit-mask-image:radial-gradient(ellipse 46% 50% at 50% 40%,#000 45%,transparent 72%);mask-image:radial-gradient(ellipse 46% 50% at 50% 40%,#000 45%,transparent 72%)}
.wolf img{display:block;width:100%;height:auto;filter:brightness(.85) contrast(1.15)}
/* les deux yeux blancs, seuls visibles au départ (au-dessus du voile sombre) */
.wolf-eyes{position:absolute;z-index:13;left:61%;top:27%;width:clamp(170px,19vw,330px);aspect-ratio:520/560;pointer-events:none;
  transform:translateX(calc((1 - var(--wp)) * 28px)) scale(calc(.94 + var(--wp) * .06));transition:transform .5s ease-out,opacity .6s}
.wolf-eyes i{position:absolute;width:3.4%;aspect-ratio:1;border-radius:50%;background:#fff;
  box-shadow:0 0 6px 2px #fff,0 0 16px 6px #dfe8ffaa,0 0 34px 10px #bcd0ff44;transform:translate(-50%,-50%);animation:wolfblink 6s infinite}
.wolf-eyes i:first-child{left:35%;top:25.2%}.wolf-eyes i:last-child{left:64%;top:26.1%}
@keyframes wolfblink{0%,93%,100%{transform:translate(-50%,-50%) scaleY(1)}95%,97%{transform:translate(-50%,-50%) scaleY(.1)}}
/* il sort de l'orée du bois… */
#foret.wolf-out .wolf{opacity:1;transform:translateX(-46px) scale(1.08);transition:opacity .5s ease-out,transform 1.1s cubic-bezier(.2,.8,.3,1)}
#foret.wolf-out .wolf-eyes{transform:translateX(-46px) scale(1.08);transition:transform 1.1s cubic-bezier(.2,.8,.3,1)}
/* …puis retourne à l'intérieur */
#foret.wolf-back .wolf{opacity:0;transform:translateX(50px) scale(.92);transition:opacity 1.4s ease-in,transform 1.6s ease-in}
#foret.wolf-back .wolf-eyes{opacity:0;transform:translateX(50px) scale(.92);transition:opacity 1s ease-in .6s,transform 1.6s ease-in}
.calm .wolf-eyes i{animation:none}
.wolf{z-index:11}
.wolf img{filter:brightness(1.7) contrast(1.25) saturate(.8)}

/* ---------- Forêt : le loup v2 (tête de loup-garou aux yeux glacés) ---------- */
.wolf{position:absolute;z-index:11;left:60%;top:24%;width:clamp(150px,16vw,280px);aspect-ratio:700/656;opacity:1;transform:none;transition:none;
  pointer-events:auto;cursor:crosshair;-webkit-mask-image:none;mask-image:none}
.wolf-head{position:absolute;inset:0;transform:translateX(34%) rotate(4deg);transition:transform 1.4s cubic-bezier(.45,0,.3,1)}
.wolf-head img{display:block;width:100%;height:100%;filter:brightness(.9);opacity:0;transition:opacity 1.2s ease-in}
.weye{position:absolute;width:5%;aspect-ratio:1.5;border-radius:50%;background:#f2f8ff;transform:translate(-50%,-50%);
  box-shadow:0 0 6px 2px #fff,0 0 16px 6px #8fc4ffcc,0 0 36px 12px #4d8dff55;animation:wolfblink 6.5s infinite}
.weye.l{left:37.8%;top:51.9%}.weye.r{left:63.5%;top:52.1%}
/* il sort un peu la tête de la forêt… */
.wolf.out .wolf-head{transform:translateX(-6%) rotate(-5deg);transition:transform 1s cubic-bezier(.2,.8,.3,1)}
.wolf.out .wolf-head img{opacity:1;transition:opacity .7s ease-out}
.calm .weye{animation:none}
.wolf{top:31%}.wolf-head img{filter:brightness(.8) drop-shadow(0 0 18px #000)}

/* ---------- Forêt : le loup v3 — surgit de l'obscurité, à gauche, plus loin sur le chemin, près du sol ---------- */
.wolf{left:34%;top:42%;width:clamp(110px,10.5vw,190px);aspect-ratio:520/608;mix-blend-mode:screen}
.wolf-head{transform:translateX(-38%) scale(.86) rotate(0);transform-origin:50% 80%;transition:transform 1.5s cubic-bezier(.45,0,.3,1)}
.wolf-head img{filter:brightness(.25) contrast(1.2);opacity:0;transition:opacity 1.3s ease-in,filter 1.3s ease-in;
  -webkit-mask-image:radial-gradient(ellipse 55% 55% at 50% 45%,#000 50%,transparent 80%);mask-image:radial-gradient(ellipse 55% 55% at 50% 45%,#000 50%,transparent 80%)}
.weye{width:7%;aspect-ratio:1.7;border-radius:50% 50% 45% 45%;background:radial-gradient(circle at 50% 50%,#fff3c4 0,#ffb340 40%,#ff5a0a 80%);
  box-shadow:0 0 5px 2px #ffa23a,0 0 14px 5px #ff6a0099,0 0 30px 10px #ff3d0044}
.weye.l{left:27.6%;top:27.1%;rotate:12deg}.weye.r{left:71.6%;top:27.1%;rotate:-12deg}
/* il sort de la forêt, la gueule ouverte, en avançant vers toi */
.wolf.out .wolf-head{transform:translateX(12%) scale(1.12) rotate(-3deg);transition:transform 1.1s cubic-bezier(.2,.8,.3,1)}
.wolf.out .wolf-head img{opacity:1;filter:brightness(1.15) contrast(1.15);transition:opacity .8s ease-out,filter 1s ease-out}
.wolf{left:33%;top:40%;width:clamp(130px,12.5vw,220px)}

/* ---------- Forêt : le loup v4 — loup-garou aux yeux de braise, opaque ---------- */
.wolf{aspect-ratio:560/588;mix-blend-mode:normal}
.wolf-head img{-webkit-mask-image:none;mask-image:none;filter:brightness(.2);opacity:0}
.wolf.out .wolf-head img{opacity:1;filter:brightness(1.05) contrast(1.1) drop-shadow(0 0 14px #000)}
.weye{width:6%}
.weye.l{left:35.8%;top:43%;rotate:14deg}.weye.r{left:65.1%;top:43%;rotate:-14deg}
.wolf{aspect-ratio:560/583}.weye.l,.weye.r{top:43.4%}

/* Boutons « Avancer » : même néon cassé que « Entre si tu l'oses » (bloc 1) */
.next.neon{font-family:var(--font-horror);font-weight:400;font-size:clamp(20px,2vw,27px);letter-spacing:.05em;line-height:1.1;padding:10px 28px;min-height:0;
  color:#ff4d63;background:#0009;border:2px solid #ff4d63;border-radius:8px;
  text-shadow:0 0 3px #fff9,0 0 9px #ff2a3d,0 0 22px #ff2a3d,0 0 44px #e01530;box-shadow:0 0 10px #ff2a3d99,0 0 34px #e0153066,inset 0 0 14px #ff2a3d55;animation:nhum 6s linear infinite}
.next.neon:hover{background:#1a0006;border-color:#ff4d63;box-shadow:0 0 14px #ff2a3dcc,0 0 50px #e0153099,inset 0 0 18px #ff2a3d77}
.calm .next.neon{animation:none}
@media (max-width:768px){.next.neon{font-size:19px;padding:8px 18px}}
@media (max-width:480px){
  .next.neon{white-space:normal;width:max-content;max-width:calc(100vw - 32px);text-align:center;font-size:18px}
  #fin .final-inner{padding:calc(var(--hud-h) + 6px) 16px 8px}
  .fin-eye{width:56px;margin-bottom:12px}
  #fin .survived{font-size:38px}
  #fin .final-sub{font-size:14px;line-height:1.4;margin:6px auto 12px}
  #fin .btn-vote.neon{font-size:22px;padding:8px 18px}
  #fin .vote-note{font-size:13px;margin:8px auto 10px}
  .fin-btns{gap:8px}
  .fin-btns .btn-ghost{min-height:40px;padding:0 14px;font-size:14px}
  .fin-fire{width:210px}
  .fin-foot .lights-on{font-size:13px}
  #fin .site-footer{gap:0 12px;font-size:11px;padding-top:6px}
  #fin .site-footer .link-btn,#fin .site-footer summary{font-size:11px;padding:2px 0}
}
@media (max-width:480px) and (max-height:720px){
  .fin-eye{width:42px;margin-bottom:8px}
  #fin .survived{font-size:32px}
  #fin .final-sub{font-size:13px;line-height:1.35;margin:4px auto 8px}
  #fin .btn-vote.neon{font-size:20px;padding:6px 14px}
  #fin .vote-note{margin:6px auto 8px}
  .fin-fire{width:160px}
}
/* très petits écrans : la page s'allonge plutôt que de couper du contenu */
@media (max-height:600px){#fin{height:auto;min-height:100svh}}
/* Mobile : le néon de fin, plus long, ne doit pas pousser les boutons hors de l'écran */
@media (max-width:480px){.at-fin .logo{font-size:clamp(15px,5vw,20px)}.hud-btns{flex-shrink:0}}