/* ============ Mousse Club — thème Halloween (soirée du 31 octobre 2026) ============
   Calque posé PAR-DESSUS style.css : retirer la ligne <link halloween.css> et le
   <script halloween.js> de index.html suffit à revenir au site normal.
   Les décors (lune, chauves-souris, fantômes, brume, araignée, citrouilles…) sont
   injectés par halloween.js ; tout est en fichiers externes (CSP sans inline). */

@font-face{
  font-family:'Creepster';font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/creepster-v13-latin.woff2) format('woff2');
}

body.halloween{
  --bg:#07050b; --bg2:#0d0813; --bg3:#150b1d;
  --gold:#ff7a1a; --gold2:#ffb35c; --gold-dim:rgba(255,122,26,.5);
  --line:rgba(255,179,92,.16);
  --violet:#8d3dff; --violet-dim:rgba(141,61,255,.35); --slime:#8dff5a;
  --creep:'Creepster','Bricolage Grotesque',serif;
}

/* ---------- tonalité générale ---------- */
.halloween .hero{background:radial-gradient(ellipse 90% 70% at 50% 20%,#24103a 0%,#0e0716 55%,#07050b 100%)}
.halloween .hero::after{background:radial-gradient(circle at 50% 46%,rgba(255,122,26,.20),transparent 46%)}
.halloween .hero::before{background:linear-gradient(180deg,rgba(14,7,22,.35),rgba(7,5,11,.55) 60%,#07050b)!important}
.halloween .hero-photo{filter:hue-rotate(-18deg) saturate(1.25) brightness(.62) contrast(1.1)}
.halloween .nav{background:linear-gradient(180deg,rgba(7,5,11,.94),rgba(7,5,11,0))}
.halloween .section.alt{background:linear-gradient(180deg,var(--bg2),var(--bg))}
.halloween .invite{background:radial-gradient(ellipse 70% 90% at 50% 0%,#1d0d2b,var(--bg) 70%)}
.halloween .dj-sec{background:linear-gradient(180deg,var(--bg),#10081a)}
.halloween .foot{background:var(--bg2)}
.halloween .btn-gold{background:linear-gradient(180deg,#ffb35c,#ff7a1a 55%,#e2560b);color:#1a0b02;
  box-shadow:0 8px 30px -10px rgba(255,122,26,.7),0 0 0 1px rgba(255,179,92,.25) inset}
.halloween .btn-gold:hover{box-shadow:0 14px 44px -10px rgba(255,122,26,.85),0 0 22px rgba(141,61,255,.35)}
.halloween .rules li::before{content:"✦";color:var(--gold)}
.halloween .crown svg{fill:var(--gold);filter:drop-shadow(0 0 18px rgba(255,122,26,.65))}
.halloween .invite-form input:focus,.halloween .invite-form textarea:focus{background:rgba(255,122,26,.06)}
.halloween .nav-cta:hover{background:rgba(255,122,26,.1)}
.halloween .dj-photo{box-shadow:0 0 0 2px var(--gold),0 0 60px -6px rgba(255,122,26,.7),0 0 120px -20px var(--violet)!important}

/* titres : « CLUB » en citrouille qui vacille */
.halloween .hero-title .t2{background:linear-gradient(180deg,#ffd08a,#ff7a1a 55%,#b9400a);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 22px rgba(255,122,26,.55));animation:hw-flicker 6s infinite}
@keyframes hw-flicker{
  0%,18%,22%,62%,64%,100%{opacity:1}
  20%{opacity:.35}63%{opacity:.55}
}

/* bandeau « Halloween Night » qui dégouline */
.hw-banner{font-family:var(--creep);font-size:clamp(34px,7.5vw,74px);line-height:1;letter-spacing:.04em;
  color:var(--gold);margin:-6px 0 22px;position:relative;display:inline-block;
  text-shadow:0 0 18px rgba(255,122,26,.65),0 0 46px rgba(141,61,255,.45);animation:hw-glow 3.2s ease-in-out infinite}
.hw-banner small{display:block;font-family:var(--sans);font-size:clamp(11px,1.6vw,13px);letter-spacing:.34em;
  text-transform:uppercase;color:var(--gold2);text-shadow:none;margin-top:10px}
@keyframes hw-glow{0%,100%{text-shadow:0 0 14px rgba(255,122,26,.55),0 0 40px rgba(141,61,255,.35)}
  50%{text-shadow:0 0 26px rgba(255,122,26,.9),0 0 70px rgba(141,61,255,.6)}}
.halloween .sur,.halloween .eyebrow{color:var(--gold)}
.halloween h2{text-shadow:0 0 30px rgba(141,61,255,.25)}

/* ---------- décor du héros ---------- */
.hw-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hw-back{z-index:1}
.hw-front{z-index:4}

/* lune + nuages */
.hw-moon{position:absolute;top:13%;right:9%;width:clamp(90px,15vw,170px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff7df 0,#ffe7a8 38%,#f2b65a 70%,#c97a2a 100%);
  box-shadow:0 0 60px 12px rgba(255,190,90,.35),0 0 160px 40px rgba(255,122,26,.18);animation:hw-moon 7s ease-in-out infinite}
.hw-moon::before,.hw-moon::after{content:"";position:absolute;border-radius:50%;background:rgba(160,90,30,.28)}
.hw-moon::before{width:22%;height:22%;top:26%;left:52%}
.hw-moon::after{width:14%;height:14%;top:58%;left:30%;box-shadow:38px -6px 0 -2px rgba(160,90,30,.22)}
@keyframes hw-moon{0%,100%{box-shadow:0 0 60px 12px rgba(255,190,90,.35),0 0 160px 40px rgba(255,122,26,.18)}
  50%{box-shadow:0 0 80px 18px rgba(255,190,90,.45),0 0 200px 60px rgba(255,122,26,.25)}}
.hw-cloud{position:absolute;height:46px;border-radius:50px;background:rgba(40,22,58,.85);filter:blur(6px);
  animation:hw-cloud linear infinite}
.hw-cloud::before,.hw-cloud::after{content:"";position:absolute;background:inherit;border-radius:50%}
.hw-cloud::before{width:60px;height:60px;top:-28px;left:22%}
.hw-cloud::after{width:84px;height:70px;top:-36px;left:48%}
.hw-cloud.c1{top:17%;width:220px;animation-duration:46s}
.hw-cloud.c2{top:27%;width:160px;animation-duration:62s;animation-delay:-30s;opacity:.7}
@keyframes hw-cloud{from{transform:translateX(105vw)}to{transform:translateX(-320px)}}

/* chauves-souris */
.hw-bat{position:absolute;left:0;top:var(--y,20%);width:var(--s,46px);
  animation:hw-fly var(--d,14s) linear var(--w,0s) infinite;opacity:0}
.hw-bat svg{width:100%;height:auto;fill:#0b0610;filter:drop-shadow(0 0 6px rgba(255,122,26,.45))}
.hw-bat .wing{transform-box:fill-box;animation:hw-flap .32s ease-in-out infinite alternate}
.hw-bat .wing.l{transform-origin:right center}
.hw-bat .wing.r{transform-origin:left center}
@keyframes hw-flap{from{transform:scaleY(1)}to{transform:scaleY(-.35)}}
@keyframes hw-fly{
  0%{transform:translate(-12vw,0) rotate(-6deg);opacity:0}
  6%{opacity:1}
  25%{transform:translate(22vw,-5vh) rotate(4deg)}
  50%{transform:translate(50vw,3vh) rotate(-5deg)}
  75%{transform:translate(78vw,-7vh) rotate(6deg)}
  94%{opacity:1}
  100%{transform:translate(112vw,-2vh) rotate(-4deg);opacity:0}
}
.hw-bat.rev{animation-name:hw-fly-rev}
.hw-bat.rev svg{transform:scaleX(-1)}
@keyframes hw-fly-rev{
  0%{transform:translate(112vw,0) rotate(6deg);opacity:0}
  6%{opacity:1}
  33%{transform:translate(70vw,6vh) rotate(-4deg)}
  66%{transform:translate(30vw,-4vh) rotate(5deg)}
  94%{opacity:1}
  100%{transform:translate(-12vw,2vh) rotate(-6deg);opacity:0}
}

/* fantômes */
.hw-ghost{position:absolute;bottom:14%;left:var(--x,10%);width:var(--s,70px);opacity:0;
  animation:hw-ghost var(--d,11s) ease-in-out var(--w,0s) infinite}
.hw-ghost svg{width:100%;height:auto;filter:drop-shadow(0 0 14px rgba(200,180,255,.55))}
.hw-ghost .body{fill:rgba(236,230,255,.82)}
.hw-ghost .eye{fill:#160a22}
@keyframes hw-ghost{
  0%{transform:translate(0,30px) scale(.9);opacity:0}
  15%{opacity:.75}
  50%{transform:translate(28px,-60px) scale(1);opacity:.65}
  85%{opacity:.7}
  100%{transform:translate(-10px,-150px) scale(.95);opacity:0}
}

/* brume au ras du sol */
.hw-fog{position:absolute;left:-50%;bottom:-40px;width:200%;height:220px;
  background:radial-gradient(ellipse 22% 60% at 15% 70%,rgba(170,140,220,.20),transparent 70%),
             radial-gradient(ellipse 20% 55% at 45% 75%,rgba(170,140,220,.16),transparent 70%),
             radial-gradient(ellipse 24% 60% at 75% 70%,rgba(170,140,220,.20),transparent 70%);
  filter:blur(10px);animation:hw-fog 38s linear infinite}
.hw-fog.f2{bottom:-70px;opacity:.7;animation-duration:56s;animation-direction:reverse}
@keyframes hw-fog{from{transform:translateX(0)}to{transform:translateX(25%)}}

/* araignée qui descend au bout de son fil */
.hw-spider{position:absolute;top:0;left:12%;width:40px;animation:hw-spider 9s ease-in-out infinite;transform-origin:top center}
.hw-spider::before{content:"";position:absolute;left:50%;bottom:30px;width:1px;height:100vh;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.4))}
.hw-spider svg{position:relative;width:40px;height:auto;fill:#0d0812;stroke:#2a1838;stroke-width:1;filter:drop-shadow(0 0 6px rgba(255,122,26,.35))}
.hw-spider .eye{fill:#ff3b1a}
@keyframes hw-spider{0%,100%{transform:translateY(-60px)}35%{transform:translateY(26vh) rotate(4deg)}
  50%{transform:translateY(24vh) rotate(-4deg)}65%{transform:translateY(27vh) rotate(3deg)}}

/* éclair */
.hw-flash{position:absolute;inset:0;background:rgba(210,190,255,.9);mix-blend-mode:overlay;opacity:0;animation:hw-flash 11s infinite}
@keyframes hw-flash{0%,89%,100%{opacity:0}90%{opacity:.85}91%{opacity:.1}92.5%{opacity:.6}94%{opacity:0}}

/* gouttes qui coulent sous le héros */
.hw-drips{position:absolute;left:0;right:0;bottom:-1px;height:70px;z-index:4;pointer-events:none}
.hw-drips svg{width:100%;height:100%;display:block}
.hw-drips .base{fill:var(--bg)}
.hw-drips .drop{fill:var(--bg);animation:hw-drop 4.5s ease-in infinite}
.hw-drips .drop:nth-of-type(2){animation-delay:1.6s}
.hw-drips .drop:nth-of-type(3){animation-delay:3.1s}
@keyframes hw-drop{0%{transform:translateY(-8px);opacity:0}25%{opacity:1}100%{transform:translateY(46px);opacity:0}}

/* bulles de la mousse -> bulles de potion */
.halloween .bubble{background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.7),rgba(141,255,90,.4) 45%,rgba(141,255,90,.1) 70%);
  border-color:rgba(141,255,90,.4);box-shadow:0 0 12px rgba(141,255,90,.25)}
.halloween .bubble:nth-child(3n){background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.5),rgba(255,122,26,.28) 45%,rgba(255,122,26,.06) 70%);
  border-color:rgba(255,179,92,.3)}

/* ---------- compte à rebours : citrouilles ---------- */
.halloween .countdown{position:relative;overflow:hidden}
.hw-pumpkins{display:flex;justify-content:center;align-items:flex-end;gap:clamp(14px,4vw,40px);margin:6px auto 26px}
.hw-pumpkin{width:clamp(54px,9vw,84px);animation:hw-sway 4s ease-in-out infinite}
.hw-pumpkin.big{width:clamp(74px,12vw,112px);animation-delay:-1.3s}
.hw-pumpkin:last-child{animation-delay:-2.4s}
.hw-pumpkin svg{width:100%;height:auto;overflow:visible}
.hw-pumpkin .skin{fill:url(#hw-pk)}
.hw-pumpkin .rib{fill:none;stroke:rgba(110,40,0,.55);stroke-width:2}
.hw-pumpkin .stem{fill:#3d5a1c}
.hw-pumpkin .face{fill:#ffe27a;animation:hw-candle 1.6s infinite}
.hw-pumpkin svg{filter:drop-shadow(0 0 16px rgba(255,122,26,.6))}
@keyframes hw-sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes hw-candle{0%,100%{fill:#ffe27a;opacity:1}20%{fill:#ffb347;opacity:.8}45%{opacity:1}60%{fill:#fff1a8;opacity:.9}80%{opacity:.75}}
.halloween .cd-n{color:var(--gold2)}

/* ---------- toiles d'araignée dans les coins ---------- */
.hw-web{position:absolute;top:0;width:clamp(90px,14vw,170px);pointer-events:none;opacity:.32;z-index:0}
.hw-web.l{left:0}
.hw-web.r{right:0;transform:scaleX(-1)}
.hw-web svg{width:100%;height:auto;fill:none;stroke:#d8cff0;stroke-width:1}

/* braises qui montent dans la section invitation */
.hw-embers{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.hw-ember{position:absolute;bottom:-10px;left:var(--x,50%);width:var(--s,4px);height:var(--s,4px);border-radius:50%;
  background:#ffb35c;box-shadow:0 0 8px 2px rgba(255,122,26,.7);opacity:0;animation:hw-ember var(--d,9s) linear var(--w,0s) infinite}
@keyframes hw-ember{0%{transform:translate(0,0);opacity:0}10%{opacity:.9}100%{transform:translate(var(--dx,20px),-110vh);opacity:0}}
.halloween #invitation .wrap,.halloween #acces .wrap{position:relative;z-index:1}

/* ---------- mobile ---------- */
@media(max-width:640px){
  .hw-moon{top:11%;right:6%}
  .hw-ghost.g3,.hw-bat.b5,.hw-bat.b6{display:none}
  .hw-ghost{width:calc(var(--s,70px) * .7);bottom:24%}
  .hw-spider{left:6%}
}

/* ---------- accessibilité : mouvements réduits ---------- */
@media(prefers-reduced-motion:reduce){
  .hw-bat,.hw-ghost,.hw-cloud,.hw-fog,.hw-spider,.hw-flash,.hw-ember,.hw-drips .drop{animation:none!important}
  .hw-bat,.hw-ghost,.hw-flash,.hw-ember,.hw-spider{display:none}
  .hw-banner,.hw-pumpkin,.hw-pumpkin .face,.hero-title .t2,.hw-moon{animation:none!important}
}

/* =====================================================================
   ANIMATIONS D'ENTRÉE
   1) intro plein écran au premier chargement de la session : un cercueil monte,
      on frappe dedans, le couvercle glisse (fumée, chauves-souris), le logo en sort — clic = passer ;
   2) haut de page qui apparaît en cascade (body.hw-go) ;
   3) sections qui sortent de la brume au défilement (.reveal).
   ===================================================================== */
.hw-intro{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;
  background:radial-gradient(ellipse 70% 60% at 50% 55%,#22103a 0%,#0c0614 55%,#050307 100%);transition:opacity .7s ease}
.hw-intro.out{opacity:0}
.hw-intro-flash{position:absolute;inset:0;z-index:5;background:#d9c8ff;opacity:0;pointer-events:none;animation:hw-in-flash .9s 1.35s}
.hw-intro-skip{position:absolute;bottom:22px;left:0;right:0;z-index:6;text-align:center;font-size:11px;letter-spacing:.3em;
  text-transform:uppercase;color:rgba(255,179,92,.45)}

/* le cercueil : forme hexagonale (clip-path), bois + liseré or, intérieur en velours */
.hw-coffin{position:relative;z-index:2;height:min(64vh,540px);aspect-ratio:.56;opacity:0;
  animation:hw-cof-rise .7s cubic-bezier(.2,.8,.3,1) .1s forwards,hw-cof-knock .9s ease-in-out .55s 1;
  transition:transform .7s cubic-bezier(.6,0,.4,1)}
.hw-intro.out .hw-coffin{transform:scale(1.35)}
.hw-cof-glow{position:absolute;inset:-30%;border-radius:50%;background:radial-gradient(circle,rgba(255,122,26,.45),rgba(141,61,255,.25) 40%,transparent 68%);
  opacity:0;animation:hw-cof-glow 1.4s ease-out 1.6s forwards}
.hw-cof-shape{position:absolute;inset:0;clip-path:polygon(30% 0,70% 0,100% 21%,82% 100%,18% 100%,0 21%)}
.hw-cof-rim{background:linear-gradient(160deg,#c48a3a,#6b3f16 30%,#2a1608 70%,#5a3412)}
.hw-cof-inner{inset:4.5%;background:radial-gradient(ellipse 80% 70% at 50% 40%,#5a1030 0%,#2a0820 50%,#12040f 100%);
  container-type:inline-size;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.hw-cof-inner::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 2px,transparent 2px 14px)}
.hw-cof-logo{position:relative;opacity:0;transform:translateY(30%) scale(.8);filter:blur(6px);
  animation:hw-cof-logo 1s cubic-bezier(.2,.9,.3,1.2) 1.95s forwards}
.hw-cof-logo svg{width:30cqw;margin:0 auto 4cqw;fill:var(--gold);filter:drop-shadow(0 0 4cqw rgba(255,122,26,.9))}
.hw-cof-logo b{display:block;font-family:var(--serif);font-weight:800;font-size:19cqw;line-height:.92;color:#f3efe6;letter-spacing:-.01em}
.hw-cof-logo b span{display:block;background:linear-gradient(180deg,#ffd08a,#ff7a1a 55%,#b9400a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hw-cof-logo i{display:block;font-style:normal;font-family:var(--creep);font-size:11.5cqw;color:var(--gold);margin-top:5cqw;
  text-shadow:0 0 3cqw rgba(255,122,26,.9),0 0 8cqw rgba(141,61,255,.7)}

/* couvercle : grain du bois, croix et clous dorés ; il tressaute puis glisse et tombe */
.hw-cof-lid{z-index:3;background:
  linear-gradient(90deg,transparent 47%,#e7b768 47%,#b7832f 53%,transparent 53%) 0 18%/100% 46% no-repeat,
  linear-gradient(0deg,transparent 44%,#e7b768 44%,#b7832f 52%,transparent 52%) 0 25%/100% 18% no-repeat,
  repeating-linear-gradient(94deg,rgba(0,0,0,.18) 0 3px,transparent 3px 11px),
  linear-gradient(160deg,#8a5524,#4d2a0e 40%,#2b1607 75%,#4a2a0f);
  box-shadow:inset 0 0 40px rgba(0,0,0,.6);
  animation:hw-lid-jolt .9s ease-in-out .55s 1,hw-lid-off 1.1s cubic-bezier(.5,0,.75,0) 1.5s forwards}
.hw-cof-lid::after{content:"";position:absolute;inset:3.5%;clip-path:inherit;border:2px solid rgba(231,183,104,.4)}
.hw-cof-smoke{position:absolute;left:10%;right:10%;top:20%;bottom:10%;z-index:4;pointer-events:none}
.hw-cof-smoke span{position:absolute;left:var(--x,50%);top:var(--y,50%);width:var(--s,90px);height:var(--s,90px);border-radius:50%;
  background:radial-gradient(circle,rgba(200,180,240,.55),rgba(160,130,220,.18) 50%,transparent 70%);filter:blur(8px);opacity:0;
  animation:hw-smoke 2s ease-out var(--w,1.6s) forwards}

.hw-intro .hw-swarm{position:absolute;left:50%;top:50%;z-index:4;width:var(--s,40px);margin:-14px 0 0 -20px;opacity:0;
  animation:hw-swarm 1.4s cubic-bezier(.2,.7,.4,1) var(--w,1.7s) forwards}
.hw-intro .hw-swarm svg{width:100%;height:auto;fill:#0b0610;filter:drop-shadow(0 0 6px rgba(255,122,26,.7))}
.hw-intro .hw-swarm .wing{transform-box:fill-box;animation:hw-flap .18s ease-in-out infinite alternate}
.hw-intro .hw-swarm .wing.l{transform-origin:right center}
.hw-intro .hw-swarm .wing.r{transform-origin:left center}

@keyframes hw-cof-rise{from{opacity:0;transform:translateY(60px) scale(.92)}to{opacity:1;transform:none}}
@keyframes hw-cof-knock{0%,100%{rotate:0deg}10%{rotate:-1.6deg}20%{rotate:1.6deg}30%{rotate:0deg}
  55%{rotate:-2deg}65%{rotate:2deg}75%{rotate:0deg}}
@keyframes hw-lid-jolt{0%,100%{translate:0 0}12%{translate:0 -10px}24%{translate:0 0}58%{translate:0 -14px}70%{translate:0 0}}
@keyframes hw-lid-off{0%{transform:none}25%{transform:translate(4%,-6%) rotate(4deg)}
  100%{transform:translate(-130%,40%) rotate(-38deg);opacity:.9}}
@keyframes hw-cof-glow{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes hw-cof-logo{to{opacity:1;transform:none;filter:none}}
@keyframes hw-smoke{0%{opacity:0;transform:translate(0,0) scale(.5)}25%{opacity:.9}
  100%{opacity:0;transform:translate(var(--dx,0px),-160px) scale(2.2)}}
@keyframes hw-swarm{0%{opacity:0;transform:translate(0,0) scale(.2)}15%{opacity:1}
  100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(1.4) rotate(var(--r,0deg))}}
@keyframes hw-in-drop{from{opacity:0;transform:translateY(-60px)}to{opacity:1;transform:none}}
@keyframes hw-in-rise{from{opacity:0;transform:translateY(24px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
@keyframes hw-in-flash{0%,100%{opacity:0}12%{opacity:.7}22%{opacity:0}34%{opacity:.45}46%{opacity:0}}

/* 2) haut de page en cascade : on neutralise le .reveal du héros et on joue
      une animation par élément quand body reçoit .hw-go */
.halloween .hero .reveal{transition:none;transform:none;filter:none}
.halloween:not(.hw-go) .hero-inner > *,
.halloween:not(.hw-go) .hero-title > span{opacity:0}
.halloween.hw-go .hero-inner > *{animation:hw-in-rise .8s ease-out both}
.halloween.hw-go .hero-inner > .crown{animation:hw-in-drop .8s cubic-bezier(.3,1.6,.5,1) both}
.halloween.hw-go .hero-inner > .eyebrow{animation-delay:.15s}
.halloween.hw-go .hero-inner > .hero-title{animation:none}
.halloween.hw-go .hero-title > span:first-child{display:inline-block;animation:hw-in-fog 1s ease-out .25s both}
.halloween.hw-go .hero-title > .t2{animation:hw-in-swing 1.1s cubic-bezier(.3,1.4,.5,1) .55s both,hw-flicker 6s 2s infinite}
.halloween.hw-go .hero-inner > .hw-banner{animation:hw-in-ooze 1s ease-out .95s both,hw-glow 3.2s ease-in-out 2s infinite}
.halloween.hw-go .hero-inner > .hero-sub{animation-delay:1.2s}
.halloween.hw-go .hero-inner > .cd-mini{animation:hw-in-pop .7s cubic-bezier(.3,1.6,.5,1) 1.4s both}
.halloween.hw-go .hero-inner > .hero-cta{animation-delay:1.55s}
.halloween.hw-go .hero-inner > .hero-note{animation-delay:1.7s}
.halloween:not(.hw-go) .nav{opacity:0;transform:translateY(-20px)}
.halloween .nav{transition:opacity .8s ease .2s,transform .8s ease .2s}
@keyframes hw-in-fog{from{opacity:0;transform:translateY(40px) scale(.96);filter:blur(14px)}to{opacity:1;transform:none;filter:none}}
@keyframes hw-in-swing{0%{opacity:0;transform:translateY(-80px) rotate(-8deg)}60%{opacity:1;transform:translateY(6px) rotate(3deg)}
  80%{transform:rotate(-1.5deg)}100%{opacity:1;transform:none}}
@keyframes hw-in-ooze{0%{opacity:0;transform:scaleY(.2) translateY(-30px);transform-origin:top;filter:blur(6px)}
  70%{opacity:1;transform:scaleY(1.08)}100%{opacity:1;transform:none;filter:none}}
@keyframes hw-in-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}

/* 3) sections : elles sortent de la brume */
.halloween .reveal{filter:blur(8px);transition:opacity .9s ease,transform .9s ease,filter .9s ease}
.halloween .reveal.in{filter:none}
.halloween h2.reveal{transform:translateY(30px) scale(.97)}
.halloween h2.reveal.in{transform:none}
.halloween .hw-pumpkins{opacity:0;transform:translateY(30px) scale(.8);transition:opacity .8s ease .2s,transform .9s cubic-bezier(.3,1.6,.5,1) .2s}
.halloween .hw-pumpkins.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  .hw-intro{display:none}
  .halloween .hero-inner > *,.halloween .hero-title > span,.halloween .nav{opacity:1!important;animation:none!important;transform:none!important}
  .halloween .reveal{filter:none}
  .halloween .hw-pumpkins{opacity:1;transform:none}
}

/* =====================================================================
   EFFET « WHAOU » : éclairs au toucher, impact sur le logo, yeux dans le noir
   ===================================================================== */
.hw-fx{position:absolute;inset:0;z-index:5;pointer-events:none;width:100%;height:100%}
.hero.hw-strike{animation:hw-shake .45s cubic-bezier(.36,.07,.19,.97)}
.hero.hw-strike .hero-photo{filter:hue-rotate(-18deg) saturate(1.4) brightness(1.5) contrast(1.2)!important;transition:none}
.hero .hero-photo{transition:filter .6s ease}
@keyframes hw-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)}}
.hero-title .t2.hw-hit{animation:hw-hit 1.2s ease-out!important}
@keyframes hw-hit{0%{filter:drop-shadow(0 0 0 #fff) brightness(3);transform:scale(1.08)}
  15%{filter:drop-shadow(0 0 40px #d9c8ff) brightness(2.2);transform:scale(.97) rotate(-1.5deg)}
  35%{transform:scale(1.03) rotate(1deg)}100%{filter:drop-shadow(0 0 22px rgba(255,122,26,.55));transform:none}}
.hw-burst{position:absolute;z-index:6;width:var(--s,40px);margin:-14px 0 0 -20px;opacity:0;pointer-events:none;
  animation:hw-swarm 1.2s cubic-bezier(.2,.7,.4,1) forwards}
.hw-burst svg{width:100%;height:auto;fill:#0b0610;filter:drop-shadow(0 0 6px rgba(255,122,26,.8))}
.hw-burst .wing{transform-box:fill-box;animation:hw-flap .16s ease-in-out infinite alternate}
.hw-burst .wing.l{transform-origin:right center}
.hw-burst .wing.r{transform-origin:left center}
.hw-hint{position:absolute;left:0;right:0;bottom:64px;z-index:6;text-align:center;font-size:11px;letter-spacing:.3em;
  text-transform:uppercase;color:rgba(217,200,255,.75);pointer-events:none;animation:hw-hint 2.4s ease-in-out infinite;transition:opacity .6s}
.hw-hint.off{opacity:0!important;animation:none}
@keyframes hw-hint{0%,100%{opacity:.35}50%{opacity:1;text-shadow:0 0 14px rgba(141,61,255,.9)}}
.halloween .hero{cursor:crosshair}
.halloween .hero a,.halloween .hero button{cursor:pointer}

/* yeux dans le noir */
.hw-eyes{position:absolute;left:var(--x);top:var(--y);width:var(--w,46px);z-index:2;pointer-events:none;
  transition:opacity .5s ease;opacity:0}
.hw-eyes.on{opacity:1}
.hw-eyes svg{width:100%;height:auto;overflow:visible}
.hw-eyes .eye{fill:var(--c,#ffb020);filter:drop-shadow(0 0 5px var(--c,#ff7a1a)) drop-shadow(0 0 12px var(--c,#ff7a1a))}
.hw-eyes .pupil{fill:#120208;transition:transform .25s ease-out}
.hw-eyes .lids{transform-box:fill-box;transform-origin:center;animation:hw-blink var(--b,5s) infinite var(--bd,0s)}
@keyframes hw-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.05)}}
@media(prefers-reduced-motion:reduce){.hw-fx,.hw-hint,.hw-burst,.hw-eyes{display:none}.hero.hw-strike{animation:none}}

/* bouton son */
.hw-sound{position:fixed;left:16px;bottom:16px;z-index:60;display:flex;align-items:center;gap:8px;
  padding:9px 14px;border-radius:30px;border:1px solid rgba(255,179,92,.35);background:rgba(12,6,18,.82);
  backdrop-filter:blur(6px);color:var(--gold2);font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
  box-shadow:0 6px 24px -8px rgba(255,122,26,.5);transition:.25s}
.hw-sound:hover{border-color:var(--gold)}
.hw-sound .bars{display:flex;gap:2px;align-items:flex-end;height:12px}
.hw-sound .bars i{width:2px;height:3px;background:var(--gold);border-radius:1px}
.hw-sound.on .bars i{animation:hw-eq .9s ease-in-out infinite}
.hw-sound.on .bars i:nth-child(2){animation-delay:-.3s}.hw-sound.on .bars i:nth-child(3){animation-delay:-.6s}
@keyframes hw-eq{0%,100%{height:3px}50%{height:12px}}
.halloween:not(.hw-go) .hw-sound{opacity:0}

/* ==================== ALLÈGEMENT (13/10) ====================
   Le site ramait : halos/ombres recalculés à chaque image, flous sur des
   éléments qui bougent, animations qui tournaient hors écran. Ici on garde
   le même décor mais tout ce qui bouge passe par transform/opacity. */
.hw-bat,.hw-ghost,.hw-cloud,.hw-fog,.hw-ember,.hw-spider{will-change:transform}
/* lune : halo fixe au lieu d'une ombre géante animée */
.hw-moon{animation:none;box-shadow:0 0 50px 10px rgba(255,190,90,.32),0 0 110px 24px rgba(255,122,26,.14)}
/* nuages et brume : plus de flou en direct */
.hw-cloud{filter:none;opacity:.8}
.hw-cloud.c2{opacity:.55}
.hw-fog{filter:none}
/* les ailes / bougies / paupières bougent DANS le SVG : un drop-shadow dessus
   oblige à recalculer le halo à chaque image -> retiré */
.hw-bat svg,.hw-intro .hw-swarm svg,.hw-burst svg,.hw-spider svg{filter:none}
.hw-ghost svg{filter:none}
.hw-ghost .body{fill:rgba(240,234,255,.86)}
.hw-pumpkin svg{filter:none}
.hw-pumpkin{position:relative}
.hw-pumpkin::before{content:"";position:absolute;inset:-25%;z-index:-1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,122,26,.45),transparent 65%)}
.hw-pumpkin .face{animation-name:hw-candle-lite}
@keyframes hw-candle-lite{0%,100%{opacity:1}20%{opacity:.8}45%{opacity:1}60%{opacity:.9}80%{opacity:.75}}
.hw-eyes .eye{filter:none}
/* bandeau : lueur fixe (un text-shadow animé = repeint permanent) */
.hw-banner{animation:none;text-shadow:0 0 18px rgba(255,122,26,.65),0 0 40px rgba(141,61,255,.4)}
.halloween.hw-go .hero-inner > .hw-banner{animation:hw-in-ooze 1s ease-out .95s both}
@keyframes hw-hint{0%,100%{opacity:.35}50%{opacity:1}}
/* éclair d'ambiance sans mélange de calques */
.hw-flash{mix-blend-mode:normal;background:rgba(210,190,255,.35)}
/* apparition des sections : fondu sans flou */
.halloween .reveal{filter:none;transition:opacity .9s ease,transform .9s ease}
/* bouton son : pas de flou d'arrière-plan sur tout ce qui bouge derrière */
.hw-sound{backdrop-filter:none;background:rgba(12,6,18,.94)}
.hw-sound .bars i{height:12px;transform:scaleY(.25);transform-origin:bottom}
@keyframes hw-eq{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
/* tout se met en pause quand le haut de page n'est plus visible */
.hw-hero-off .hero *,.hw-hero-off .hero *::before,.hw-hero-off .hero *::after,
.hw-inv-off .hw-ember{animation-play-state:paused!important}
/* mobile : moins de figurants */
@media(max-width:640px){
  .hw-bat.b4,.hw-ghost.g2,.hw-fog.f2,.hw-cloud.c2{display:none}
  .hw-ember:nth-child(n+10){display:none}
}
/* éclairs supprimés (13/10) : plus de flash du ciel ni de l'intro */
.hw-flash,.hw-intro-flash{display:none!important}
/* photo du haut : le filtre couleur en direct coûtait ~40 % des images/s.
   Même ambiance avec une photo assombrie + un voile violet/orangé fixe. */
.halloween .hero-photo{filter:none!important;opacity:.32;transition:none}
.halloween .hero-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(60,20,90,.38),rgba(120,40,10,.22) 70%,rgba(20,6,30,.4))}