/* =========================================================
   La Nuitée — couche de décor
   Toiles, araignées, chauves-souris, fantômes.
   Tout est en position fixe, derrière le contenu, sans
   aucune interaction : pointer-events: none.
   ========================================================= */

.decor-canvas {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: -1;
  pointer-events: none;
}

.decor-layer {
  position: fixed; inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}

/* ---------- Toiles d'araignée ---------- */
.deco-web {
  position: absolute;
  width: clamp(150px, 17vw, 260px);
  height: auto;
  color: rgba(239, 233, 247, .34);
  opacity: .75;
  animation: webSway 13s ease-in-out infinite;
  transform-origin: top left;
}
.deco-web--tl { top: 74px; left: 0; }
.deco-web--tr { top: 74px; right: 0; scale: -1 1; animation-delay: -4s; }
.deco-web--bl { bottom: 0; left: 0; scale: 1 -1; animation-delay: -8s; }
.deco-web--br { bottom: 0; right: 0; scale: -1 -1; animation-delay: -11s; }

@media (max-width: 767.98px) {
  .deco-web { width: 42vw; opacity: .45; }
  .deco-web--bl, .deco-web--br { display: none; }
}

/* ---------- Araignées qui descendent ---------- */
.deco-spider { position: absolute; }
.deco-spider img { display: block; width: 100%; height: auto; color: rgba(15, 8, 24, .92); }

.deco-spider::before {
  content: '';
  position: absolute; left: 50%; bottom: 100%;
  width: 1px; translate: -50% 0;
  background: linear-gradient(180deg, transparent, rgba(239, 233, 247, .3));
}
.deco-spider--1 { top: 0; left: 12%; width: 30px; animation: spiderDrop 9s  ease-in-out 0s   infinite; }
.deco-spider--1::before { height: 120px; }
.deco-spider--2 { top: 0; left: 84%; width: 22px; animation: spiderDrop 11s ease-in-out 2.5s infinite; }
.deco-spider--2::before { height: 170px; }
.deco-spider--3 { top: 0; left: 58%; width: 18px; animation: spiderDrop 13s ease-in-out 5s   infinite; }
.deco-spider--3::before { height: 210px; }

@media (max-width: 767.98px) {
  .deco-spider--3 { display: none; }
  .deco-spider--1, .deco-spider--2 { width: 22px; }
  .deco-spider--1::before, .deco-spider--2::before { height: 80px; }
}

/* ---------- Chauves-souris ---------- */
.deco-bat {
  position: absolute; top: 0; left: 0;
  width: clamp(40px, 4.4vw, 66px);
  color: rgba(239, 233, 247, .82);
  offset-path: path('M -60 180 C 20% 60, 40% 240, 62% 110 S 88% 40, 108% 150');
  animation: batFly linear infinite;
  will-change: offset-distance, transform;
}
.deco-bat img { display: block; width: 100%; height: auto; animation: wingFlap .19s ease-in-out infinite; }
.deco-bat--1 { animation-duration: 15s; animation-delay: 0s;   top: 12%; }
.deco-bat--2 { animation-duration: 21s; animation-delay: -6s;  top: 24%; width: clamp(28px, 3vw, 46px); }
.deco-bat--3 { animation-duration: 18s; animation-delay: -12s; top: 6%;  width: clamp(30px, 3.2vw, 50px); }

/* ---------- Fantômes ---------- */
.deco-ghost {
  position: absolute; top: 0; left: 0;
  width: clamp(34px, 4vw, 64px);
  color: rgba(226, 214, 255, .8);
  animation: ghostDrift linear infinite;
  will-change: transform, opacity;
}
.deco-ghost svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 16px rgba(157, 107, 255, .5)); }
.deco-ghost--1 { top: 16%; animation-duration: 46s; animation-delay: -4s;  animation-timing-function: ease-in-out; }
.deco-ghost--2 { top: 52%; animation-duration: 63s; animation-delay: -28s; animation-timing-function: ease-in-out; width: clamp(26px, 3vw, 48px); }
.deco-ghost--3 { top: 34%; animation-duration: 78s; animation-delay: -52s; animation-timing-function: ease-in-out; width: clamp(22px, 2.6vw, 40px); }

@media (max-width: 767.98px) {
  .deco-ghost--3 { display: none; }
  .deco-ghost--2 { animation-duration: 55s; }
}

/* ---------- Citrouilles flottantes du héros ---------- */
.hw-pumpkin {
  position: absolute;
  width: clamp(60px, 7vw, 104px);
  filter: drop-shadow(0 0 22px rgba(255, 122, 26, .5));
  animation: floatY 6s ease-in-out infinite;
  z-index: 0;
}
.hw-pumpkin--a { left: 6%;  bottom: 16%; animation-delay: -1.4s; }
.hw-pumpkin--b { right: 7%; bottom: 22%; width: clamp(48px, 5.4vw, 82px); animation-delay: -3.2s; }
.hw-pumpkin--c { left: 15%; top: 22%;  width: clamp(40px, 4.4vw, 66px); animation: floatYSoft 7.5s ease-in-out -2s infinite; }

@media (max-width: 767.98px) { .hw-pumpkin--c { display: none; } }

/* ---------- Bougies qui vacillent (section programme) ---------- */
.candle {
  position: absolute; bottom: 0;
  width: clamp(10px, 1.1vw, 15px); height: clamp(30px, 3.4vw, 46px);
  background: linear-gradient(180deg, #f4e3c1, #c9a978);
  border-radius: 3px 3px 1px 1px;
  box-shadow: 0 0 18px rgba(255, 179, 71, .35);
}
.candle::after {
  content: '';
  position: absolute; left: 50%; top: -9px; translate: -50% 0;
  width: 6px; height: 11px; border-radius: 50% 50% 45% 45%;
  background: radial-gradient(circle at 50% 68%, #fff6cf, #ffb347 55%, #ff7a1a 88%);
  transform-origin: bottom center;
  animation: candleFlicker 2.6s ease-in-out infinite;
  box-shadow: 0 0 22px 5px rgba(255, 150, 40, .5);
}
.candle--1 { left: 4%;  height: clamp(34px, 4vw, 58px); animation-delay: -1.1s; }
.candle--2 { left: 8%;  height: clamp(24px, 2.6vw, 38px); animation-delay: -.4s; }
.candle--3 { right: 5%; height: clamp(30px, 3.4vw, 50px); animation-delay: -1.8s; }
.candle--4 { right: 9%; height: clamp(20px, 2.2vw, 32px); animation-delay: -2.4s; }

@media (max-width: 767.98px) { .candle { display: none; } }