/* =====================================================================
   Thème Halloween — chargé uniquement si activé dans l'admin (Réglages).
   Règle perf (cf. site.css) : desktop animé, mobile (max-width:560px)
   SANS animation infinie ni filter. Tout est en pointer-events:none :
   rien ne gêne les clics.
   ===================================================================== */
:root{
  --hw-orange:#ff7a18;
  --hw-purple:#8b2cf5;
  --hw-ink:#170d24;
}

/* ---------- Ambiance : lueurs orange / violet (statiques) ---------- */
.hw-glow{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 40% at 50% 105%, #ff7a1838, transparent 70%),
    radial-gradient(45% 35% at 100% 0%, #8b2cf52a, transparent 70%),
    radial-gradient(30% 30% at 0% 60%, #8b2cf51c, transparent 70%);
}
.hw-fog{
  position:fixed;left:-10%;right:-10%;bottom:0;height:24vh;z-index:-1;pointer-events:none;
  background:
    radial-gradient(40% 70% at 20% 100%, #c9b8ff24, transparent 70%),
    radial-gradient(35% 60% at 60% 100%, #ffffff18, transparent 70%),
    radial-gradient(40% 70% at 95% 100%, #c9b8ff20, transparent 70%);
  animation:hwFog 28s ease-in-out infinite alternate;
}
@keyframes hwFog{to{transform:translateX(6%)}}

/* ---------- Paysage hanté en bas de l'écran (image fixe, flou déjà intégré → zéro coût) ---------- */
.hw-land{
  position:fixed;left:0;right:0;bottom:0;z-index:-1;pointer-events:none;
  height:clamp(170px,34vh,380px);
  background:url("/static/img/halloween/landscape-hd.webp?v=8") 50% 100%/cover no-repeat;
}

/* ---------- Orage lointain : lueurs douces + éclairs discrets (desktop) ---------- */
.hw-storm{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hw-flash{position:absolute;inset:0;opacity:0}
.hw-flash.f1{background:radial-gradient(55% 45% at 78% 8%, #c9d4ff 0%, #8f9cff55 35%, transparent 70%);animation:hwFlash 17s linear 3s infinite}
.hw-flash.f2{background:radial-gradient(50% 40% at 28% 4%, #d9ccff 0%, #a58bff4d 35%, transparent 70%);animation:hwFlash2 26s linear 9s infinite}
.hw-bolt{position:absolute;top:0;opacity:0;fill:none;stroke:#eef0ff;stroke-width:1.6;stroke-linejoin:miter;filter:drop-shadow(0 0 6px #b9c3ff)}
.hw-bolt.k1{right:20%;height:40vh;animation:hwBolt 17s linear 3s infinite}
.hw-bolt.k2{left:31%;height:30vh;stroke-width:1.2;animation:hwBolt2 26s linear 9s infinite}
@keyframes hwFlash{0%,86%,100%{opacity:0}87%{opacity:.16}88%{opacity:.04}89.5%{opacity:.22}91%{opacity:.07}94%{opacity:0}}
@keyframes hwFlash2{0%,90%,100%{opacity:0}91%{opacity:.14}92%{opacity:.03}93%{opacity:.18}96%{opacity:0}}
@keyframes hwBolt{0%,86.9%,91.5%,100%{opacity:0}87%,88%{opacity:.55}88.5%{opacity:.1}89.5%,90.5%{opacity:.6}}
@keyframes hwBolt2{0%,90.9%,94%,100%{opacity:0}91%,92%{opacity:.45}92.5%{opacity:.1}93%{opacity:.5}}

/* ---------- Pleine lune + sorcière ---------- */
.hw-moon{
  position:fixed;z-index:-1;pointer-events:none;
  top:clamp(84px,11vh,120px);left:clamp(-90px,-4vw,-40px);
  width:clamp(140px,14vw,220px);aspect-ratio:1;border-radius:50%;
  box-shadow:0 0 36px 4px #fff3dc40, 0 0 110px 26px #ffb45a1e;
  opacity:.95;transform:translateZ(0);   /* couche figée : la lune n'est jamais repeinte au scroll */
}
.hw-moon-disc{display:block;width:100%;height:100%;border-radius:50%;transform:rotate(-8deg)}
.hw-witch{
  position:fixed;left:0;top:clamp(90px,16vh,170px);z-index:85;pointer-events:none;
  width:clamp(150px,13vw,210px);opacity:0;will-change:transform;
  animation:hwWitch 45s linear 6s infinite;
}
.hw-w-bob{animation:hwWBob 1.7s ease-in-out infinite alternate}
.hw-witch svg{display:block;width:100%;height:auto;overflow:visible}
.hw-w-ink{fill:#120a1f}
.hw-w-cape,.hw-w-hair{transform-box:fill-box;transform-origin:100% 20%;animation:hwCape .4s ease-in-out infinite alternate}
@keyframes hwWitch{
  0%{transform:translate(-240px,60px) rotate(-6deg);opacity:1}
  16%{transform:translate(calc(100vw + 40px),-50px) rotate(-2deg);opacity:1}
  16.01%,100%{transform:translate(calc(100vw + 40px),-50px);opacity:0}
}
@keyframes hwWBob{from{transform:translateY(-5px) rotate(-1.5deg)}to{transform:translateY(5px) rotate(1deg)}}
@keyframes hwCape{from{transform:scaleY(.88) skewX(5deg)}to{transform:scaleY(1.06) skewX(-4deg)}}

/* ---------- Lucioles (desktop) ---------- */
.hw-flies{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hw-flies i{
  will-change:transform,opacity;
  position:absolute;bottom:-10px;width:5px;height:5px;border-radius:50%;
  background:#ffe27a;box-shadow:0 0 8px 3px #ffb83f88;opacity:0;
  animation:hwFly 14s ease-in-out infinite;
}
.hw-flies i:nth-child(1){left:8%;animation-delay:0s}
.hw-flies i:nth-child(2){left:22%;animation-delay:-5s;animation-duration:17s}
.hw-flies i:nth-child(3){left:37%;animation-delay:-9s;background:#b98bff;box-shadow:0 0 8px 3px #8b2cf588}
.hw-flies i:nth-child(4){left:51%;animation-delay:-2s;animation-duration:19s}
.hw-flies i:nth-child(5){left:64%;animation-delay:-12s}
.hw-flies i:nth-child(6){left:76%;animation-delay:-7s;animation-duration:16s;background:#b98bff;box-shadow:0 0 8px 3px #8b2cf588}
.hw-flies i:nth-child(7){left:88%;animation-delay:-3s;animation-duration:21s}
.hw-flies i:nth-child(8){left:95%;animation-delay:-10s}
@keyframes hwFly{
  0%{transform:translate(0,0);opacity:0}
  15%{opacity:.9}
  50%{transform:translate(30px,-45vh);opacity:.5}
  85%{opacity:.8}
  100%{transform:translate(-20px,-90vh);opacity:0}
}

/* ---------- Bord bas de la barre du haut (support de la chauve-souris suspendue) ---------- */
.hw-garland{position:absolute;left:0;right:0;top:100%;height:0;pointer-events:none}
/* chauve-souris qui dort, suspendue sous la barre du haut */
.hw-hang{
  position:absolute;top:4px;left:clamp(150px,30%,420px);
  display:flex;flex-direction:column;align-items:center;transform-origin:top center;
  animation:hwSway 4s ease-in-out infinite;
}
.hw-hang-thread{width:1px;height:10px;background:#d8cfe888}
.hw-hang svg{width:22px;height:31px}
@keyframes hwSway{0%,100%{transform:rotate(5deg)}50%{transform:rotate(-5deg)}}

/* ---------- Toiles d'araignée : la toile « respire » au vent, les fils déchirés se balancent.
   Uniquement des transform sur des blocs HTML → composité par le GPU, aucun repaint. ---------- */
.hw-web{position:fixed;z-index:95;pointer-events:none;width:clamp(110px,11vw,170px);aspect-ratio:1}
.hw-web svg{display:block;width:100%;height:100%;overflow:visible}
.hw-web-sway{width:100%;height:100%;transform-origin:0 0;will-change:transform;animation:hwBillow 6s ease-in-out infinite alternate}
@keyframes hwBillow{
  0%{transform:scale(1,1)}
  50%{transform:scale(1.025,1.01)}
  100%{transform:scale(1.01,1.03)}
}
.hw-strand{
  position:absolute;width:1px;border-radius:1px;transform-origin:50% 0;will-change:transform;
  background:linear-gradient(#f1eeffdd,#f1eeff00);
  animation:hwStrand 3.6s ease-in-out infinite alternate;
}
.hw-strand.s1{left:46%;top:24%;height:22%;animation-delay:-1s}
.hw-strand.s2{left:70%;top:9%;height:15%;animation-duration:4.4s}
.hw-strand.s3{left:24%;top:48%;height:28%;animation-duration:5s;animation-delay:-2.2s}
@keyframes hwStrand{from{transform:rotate(9deg)}to{transform:rotate(-7deg)}}
.hw-web-tr{top:0;right:0;transform:scaleX(-1);opacity:.9;width:clamp(130px,12vw,190px)}
.hw-web-bl{bottom:0;left:0;transform:scaleY(-1);z-index:-1;opacity:.8;width:clamp(150px,15vw,240px)}
.hw-web-bl .hw-strand{display:none}
.hw-web-bl .hw-web-sway{animation-duration:8s;animation-delay:-3s}

/* ---------- Araignée qui pend (descend / remonte) ---------- */
.hw-spider{
  position:fixed;top:0;right:clamp(34px,5.5vw,76px);z-index:95;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;transform-origin:top center;
  animation:hwSwing 5s ease-in-out infinite;
}
.hw-thread{
  width:1px;height:clamp(70px,14vh,130px);background:linear-gradient(#e9e4ff00,#e9e4ffaa);
  transform-origin:top;animation:hwRope 11s ease-in-out infinite;
}
.hw-spider svg{width:30px;height:30px;margin-top:-2px;animation:hwRide 11s ease-in-out infinite}
@keyframes hwSwing{0%,100%{transform:rotate(4deg)}50%{transform:rotate(-4deg)}}
@keyframes hwRope{0%,100%{transform:scaleY(1)}45%,55%{transform:scaleY(1.9)}}
@keyframes hwRide{0%,100%{transform:translateY(0)}45%,55%{transform:translateY(clamp(63px,12.6vh,117px))}}

/* ---------- Chauves-souris ---------- */
.hw-bats{position:fixed;inset:0;z-index:85;pointer-events:none;overflow:hidden;contain:strict}
.hw-bat{position:absolute;left:0;width:64px;height:32px;will-change:transform}
.hw-bat svg{width:100%;height:100%;fill:var(--hw-ink);overflow:visible}
.hw-bat .hw-eye{fill:#ff8a1f}
.hw-bat .hw-fang{fill:none;stroke:#fff;stroke-width:.6}
.hw-bat .hw-wl,.hw-bat .hw-wr{transform-box:view-box;animation:hwFlapL .26s ease-in-out infinite alternate}
.hw-bat .hw-wl{transform-origin:46px 22px}
.hw-bat .hw-wr{transform-origin:54px 22px;animation-name:hwFlapR}
@keyframes hwFlapL{from{transform:rotate(-22deg)}to{transform:rotate(28deg) scaleY(.75)}}
@keyframes hwFlapR{from{transform:rotate(22deg)}to{transform:rotate(-28deg) scaleY(.75)}}
.hw-bob{animation:hwBob 1.8s ease-in-out infinite alternate}
@keyframes hwBob{from{transform:translateY(-14px)}to{transform:translateY(14px)}}
.hw-bat.rev .hw-bob svg{transform:scaleX(-1)}

.hw-bat.b1{top:18%;animation:hwCross 24s linear infinite}
.hw-bat.b2{top:38%;width:44px;height:22px;animation:hwCross 31s linear -14s infinite}
.hw-bat.b3{top:11%;width:38px;height:19px;animation:hwCrossBack 27s linear -6s infinite}
.hw-bat.b4{top:58%;width:30px;height:15px;opacity:.75;animation:hwCross 36s linear -24s infinite}
.hw-bat.b5{top:27%;width:52px;height:26px;animation:hwCrossBack 33s linear -19s infinite}
.hw-bat.b2 svg *,.hw-bat.b4 svg *{animation-duration:.2s}
@keyframes hwCross{
  0%{transform:translate(-90px,0) rotate(4deg)}
  30%{transform:translate(30vw,-40px) rotate(-6deg)}
  60%{transform:translate(60vw,30px) rotate(5deg)}
  100%{transform:translate(calc(100vw + 90px),-10px) rotate(-3deg)}
}
@keyframes hwCrossBack{
  0%{transform:translate(calc(100vw + 90px),0) rotate(-4deg)}
  40%{transform:translate(55vw,45px) rotate(6deg)}
  70%{transform:translate(28vw,-25px) rotate(-5deg)}
  100%{transform:translate(-90px,10px) rotate(3deg)}
}

/* ---------- Fantôme (desktop) : flotte, cligne des yeux, fait coucou ---------- */
.hw-ghost{
  position:fixed;left:18px;bottom:24vh;z-index:85;pointer-events:none;
  width:66px;opacity:.93;will-change:transform;
  animation:hwGFloat 4.5s ease-in-out infinite alternate;
}
.hw-ghost::before{content:"";position:absolute;inset:-30%;border-radius:50%;background:radial-gradient(closest-side,#c9b8ff40,transparent)}
.hw-ghost svg{position:relative;display:block;width:100%;height:auto;overflow:visible}
.hw-ghost svg *{transform-box:fill-box}
.hw-g-body{transform-origin:50% 0;animation:hwJelly 3s ease-in-out infinite}
.hw-g-eyes{transform-origin:center;animation:hwBlink 4.2s infinite}
.hw-g-mouth{transform-origin:center;animation:hwOoh 3.4s ease-in-out infinite}
.hw-g-arm-r{transform-origin:0% 100%;animation:hwWave 5s ease-in-out infinite}
.hw-g-arm-l{transform-origin:100% 50%;animation:hwArmL 3s ease-in-out infinite}
@keyframes hwGFloat{from{transform:translateY(0) rotate(-3deg)}to{transform:translateY(-22px) rotate(3deg)}}
@keyframes hwJelly{0%,100%{transform:scale(1,1)}50%{transform:scale(1.04,.97)}}
@keyframes hwBlink{0%,90%,100%{transform:translateX(0) scaleY(1)}93%{transform:scaleY(.1)}96%{transform:scaleY(1)}40%,60%{transform:translateX(2px)}}
@keyframes hwOoh{0%,100%{transform:scale(1)}30%{transform:scale(.6,.5)}60%{transform:scale(1.15,1.2)}}
@keyframes hwWave{0%,55%,100%{transform:rotate(0)}62%,76%{transform:rotate(-28deg)}69%,83%{transform:rotate(14deg)}90%{transform:rotate(0)}}
@keyframes hwArmL{0%,100%{transform:rotate(0)}50%{transform:rotate(12deg)}}
@media (min-width:561px) and (max-width:1199px){.hw-ghost{display:none}}

/* ---------- Citrouille (desktop) : petits sauts, yeux qui clignent, bouche qui rit ---------- */
.hw-pumpkin{
  position:fixed;right:22px;bottom:20px;z-index:85;pointer-events:none;
  width:clamp(76px,6vw,92px);
}
.hw-pumpkin svg{position:relative;display:block;width:100%;height:auto;overflow:visible}
.hw-pumpkin svg *{transform-box:fill-box}
.hw-pk-body{transform-origin:50% 100%;animation:hwHop 5s ease-in-out infinite}
.hw-pk-stem{transform-origin:50% 100%;animation:hwStem 5s ease-in-out infinite}
.hw-face{animation:hwFlicker 3.7s ease-in-out infinite}
.hw-pk-eyes{transform-origin:center;animation:hwPkEyes 6s infinite}
.hw-pk-mouth{transform-origin:50% 0;animation:hwLaugh 5s ease-in-out infinite}
@keyframes hwHop{
  0%,60%,100%{transform:translateY(0) scale(1,1)}
  66%{transform:translateY(0) scale(1.08,.9)}
  72%{transform:translateY(-12px) scale(.95,1.07)}
  78%{transform:translateY(0) scale(1.06,.94)}
  83%{transform:translateY(-4px) scale(1,1)}
  88%{transform:translateY(0) scale(1,1)}
}
@keyframes hwStem{0%,66%,100%{transform:rotate(0)}74%{transform:rotate(-14deg)}82%{transform:rotate(8deg)}}
@keyframes hwPkEyes{
  0%,20%,100%{transform:translateX(0) scaleY(1)}
  25%,40%{transform:translateX(-2px) scaleY(1)}
  45%,58%{transform:translateX(2px) scaleY(1)}
  62%{transform:translateX(0) scaleY(1)}
  90%{transform:scaleY(1)}92%{transform:scaleY(.12)}94%{transform:scaleY(1)}
}
@keyframes hwLaugh{0%,62%,100%{transform:scaleY(1)}68%,76%{transform:scaleY(1.35)}72%,80%{transform:scaleY(.9)}86%{transform:scaleY(1)}}
@keyframes hwFlicker{0%,100%{opacity:1}8%{opacity:.93}15%{opacity:.98}23%{opacity:.9}31%{opacity:.97}39%{opacity:.92}47%{opacity:1}56%{opacity:.88}64%{opacity:.95}72%{opacity:.91}81%{opacity:.99}89%{opacity:.9}95%{opacity:.96}}

/* ---------- Petites touches sur l'existant ---------- */
.halloween .logo{position:relative}
.halloween .logo::after{content:"🎃";position:absolute;right:-18px;top:-8px;font-size:1rem;transform:rotate(14deg);pointer-events:none}
.halloween .livepill{box-shadow:0 0 0 1px #ff7a1866, 0 0 16px #ff7a1830}
.halloween footer .display::after{content:" 🦇";font-size:.8em}
.halloween ::selection{background:var(--hw-orange);color:#120a1f}

/* ---------- Mobile : décor figé (pas d'anim infinie = pas de chauffe) ---------- */
/* ---------- Mobile : animations ALLÉGÉES (cf. perf-mobile du player).
   Uniquement transform sur des blocs HTML (composité GPU, zéro repaint), peu d'éléments.
   Coupés : brume, lucioles, orage, sorcière, fantôme, citrouille, ailes en SVG. ---------- */
@media (max-width:560px){
  .hw-fog,.hw-witch *,.hw-ghost,.hw-ghost *,.hw-pumpkin *,.hw-bat svg *{animation:none !important}
  .hw-flies,.hw-ghost,.hw-pumpkin,.hw-witch,.hw-storm{display:none}
  .hw-moon{width:96px;top:auto;bottom:16vh;left:auto;right:-34px;opacity:.85;box-shadow:0 0 30px 4px #ffd9a02a}
  .hw-web-tr{width:96px}
  .hw-web-bl{width:130px}
  /* chauves-souris : 2 seulement, vol plus lent ; battement d'ailes = scaleY de tout le SVG */
  .hw-bat.b2,.hw-bat.b4,.hw-bat.b5{display:none}
  .hw-bat.b1{animation-duration:16s}
  .hw-bat.b3{animation-duration:19s}
  .hw-bat .hw-bob svg{transform-origin:50% 40%;animation:hwFlapM .28s ease-in-out infinite alternate}
  .hw-bat.rev .hw-bob svg{animation-name:hwFlapMR}
  .hw-thread{height:56px}
  .hw-spider svg{width:24px;height:24px;animation-name:hwRideM}
  .hw-hang{left:62%}
  .hw-land{height:24vh;background-image:url("/static/img/halloween/landscape.webp?v=8");background-position:66% 100%}
  .halloween .logo::after{display:none}
}
@keyframes hwFlapM{from{transform:scaleY(1)}to{transform:scaleY(.5)}}
@keyframes hwFlapMR{from{transform:scale(-1,1)}to{transform:scale(-1,.5)}}
@keyframes hwRideM{0%,100%{transform:translateY(0)}45%,55%{transform:translateY(50px)}}
@media (prefers-reduced-motion:reduce){
  .hw-fog,.hw-spider,.hw-thread,.hw-spider svg,.hw-hang,.hw-witch,.hw-bat,.hw-bob,
  .hw-bat svg *,.hw-ghost,.hw-ghost *,.hw-pumpkin *,.hw-witch *,.hw-flies i,.hw-web-sway,.hw-strand{animation:none !important}
  .hw-bats,.hw-ghost,.hw-flies,.hw-witch,.hw-storm{display:none}
}