/*
    HALLOWEEN -- LES PIECES COMMUNES AUX TROIS MAQUETTES.

    Tout ce qui se pose PAR-DESSUS le site existant ; rien ici ne remplace
    site.css. Pour revenir au site normal en novembre : retirer les deux
    <link> halloween-*.css, le bloc .hw-* des pages et le dossier assets/hal.

    Les images viennent de l'application (assets/hal) : logo violet, toiles,
    citrouilles, bougies, araignee, lune, chateau.

    Animations LENTES et toutes coupees si le visiteur demande moins de mouvement.
    Aucun style en ligne, aucun script : la CSP du site les refuserait.
*/

/* ------------------------------------------------------------------ calque de decor */

.hw-deco { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }

/* toiles de coin */
.hw-web { position: absolute; top: 0; height: auto; width: clamp(110px, 15vw, 210px); opacity: .9; }
.hw-web-tl { left: 0; }
.hw-web-tr { right: 0; }

/* l'araignee descend au bout de son fil, tres lentement */
.hw-spider {
  position: absolute; top: 0; left: clamp(22px, 7vw, 110px);
  display: flex; flex-direction: column; align-items: center; width: 58px;
}
.hw-thread {
  display: block; width: 1.5px; height: 70px;
  background: linear-gradient(to bottom, rgba(255,255,255,.85), rgba(255,255,255,.55));
  box-shadow: 0 0 0 .5px rgba(60, 30, 100, .25);
  animation: hw-drop 22s ease-in-out infinite;
}
.hw-spider img { display: block; width: 58px; height: auto; margin-top: -3px; transform-origin: 50% 0; animation: hw-sway 9s ease-in-out infinite alternate; }
@keyframes hw-drop { 0%, 100% { height: 46px; } 50% { height: 150px; } }
@keyframes hw-sway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }

/* citrouilles et bougies posees */
.hw-pumpkin { position: absolute; height: auto; filter: drop-shadow(0 16px 14px rgba(40, 10, 70, .38)); }
.hw-candle { position: absolute; display: block; }
.hw-candle > img { display: block; width: 100%; height: auto; }
.hw-flame {
  position: absolute; left: var(--wx, 50%); top: var(--wy, 6%);
  width: 15%; aspect-ratio: 11 / 20; min-width: 11px;
  transform: translate(-50%, -90%); transform-origin: 50% 100%;
  border-radius: 50% 50% 50% 50% / 64% 64% 36% 36%;
  background: radial-gradient(ellipse at 50% 72%, #fff7cf 0, #ffd447 36%, #ff8a1f 72%, rgba(255, 80, 10, 0) 100%);
  filter: drop-shadow(0 0 9px rgba(255, 170, 50, .95)) drop-shadow(0 0 22px rgba(255, 120, 20, .5));
  animation: hw-flicker 3.6s ease-in-out infinite;
}
@keyframes hw-flicker {
  0%, 100% { transform: translate(-50%, -90%) scale(1, 1); }
  28% { transform: translate(-53%, -91%) scale(.93, 1.1) rotate(-3deg); }
  62% { transform: translate(-47%, -90%) scale(1.06, .94) rotate(2deg); }
}

/* l'etiquette « Halloween » : la seule mention, pas une fonction */
.hw-badge {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 18px;
  padding: 6px 15px 6px 7px; border-radius: 999px;
  background: #fff4e3; border: 1.5px solid #f0a04a; color: #6f2a05;
  font: 700 .76rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(240, 120, 26, .25);
}
.hw-badge img { width: 28px; height: auto; display: block; }

/* le telephone du hero : les captures de l'application font 9 x 20 */
body.hw .carrousel { aspect-ratio: 648 / 1440; }
body.hw .hero .phone { max-width: 292px; }
body.hw .phone { background: linear-gradient(160deg, #3a2162, #1b0f36 62%, #2c1a52); }
body.hw .phone img { border-radius: 14px; }

/* les cartes portent une toile dans un coin, comme les boutons de l'application */
body.hw .card, body.hw details, body.hw .midi-art { position: relative; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .hw-thread, .hw-spider img, .hw-flame, .hw-cloud { animation: none; }
  .hw-thread { height: 90px; }
}
@media (max-width: 760px) {
  .hw-web { width: 96px; }
  .hw-spider { left: 14px; width: 44px; }
  .hw-spider img { width: 44px; }
  .hw-candle.hw-hide-sm, .hw-pumpkin.hw-hide-sm { display: none; }
}