/* ===========================
   ZZZPOP — Thème saisonnier « Halloween » (tout le site)
   ===========================
   QUAND il s'applique : voir l'en-tête de assets/js/halloween.js (du 19
   octobre au 2 novembre 2026). TOUTES les règles de ce fichier dépendent de
   html.halloween, posée par ce script : hors saison, ou sans JavaScript, ce
   fichier ne change rien.

   Grammaire du site (style BD : contours noirs épais, ombres portées
   pleines, aplats), version adulte — couverture de comics d'horreur plutôt
   que dessin animé (demande de Damien, 05/10/2026) : regards mauvais,
   ombrages francs, silhouettes, rien de « mignon ». Les dessins sont dans
   assets/img/halloween/ (SVG), les chauves-souris directement dans
   halloween.js (leurs ailes battent). Les couleurs passent par les variables
   de style.css : --yellow devient orange citrouille partout où il sert
   (en-tête, boutons, ombres, autocollants), sans réécrire une règle du site.

   Contrastes mesurés : noir (#1A1A1A) sur citrouille (#FF8A1F) 7,4:1, et
   l'inverse. Le crème des cartes et des textes ne change pas.

   La sous-catégorie « 🎃 Halloween » des rubriques n'est PAS ici : elle est
   permanente, et utilise les styles ordinaires des puces (style.css). */

/* Autocollant « SPÉCIAL HALLOWEEN » (index.html) : masqué hors saison. */
html:not(.halloween) .hw-saison { display: none !important; }

html.halloween {
  --yellow: #FF8A1F;      /* citrouille : remplace le jaune ZZZpop */
  --hw-violet: #6B2FB3;
  --hw-violet-clair: #9B5FE0;
  --hw-nuit: #1C0D2E;
  --hw-sang: #9E0F16;
  --hw-poison: #46B82A;
  /* Liseré pâle : une silhouette noire sur la nuit reste lisible. */
  --hw-lisere: drop-shadow(0 0 1.5px rgba(239,230,204,0.75));
}

/* ---------- Fond de page : la nuit, sur toute la largeur ---------- */
/* Demande de Damien (16/10, soir du lancement) : plus de crème autour du
   contenu, le violet couvre toute la page. Les blocs qui ont leur propre fond
   (cartes, vedette, barre de filtres, Hall of Fame/Shame, tuiles) ne bougent
   pas ; seuls les textes posés DIRECTEMENT sur le fond de page changent de
   couleur, élément par élément (jamais par héritage : les cartes crème
   deviendraient illisibles). */
html.halloween body {
  background:
    radial-gradient(ellipse 90% 40% at 50% 0%, rgba(107,47,179,0.22), transparent 70%),
    linear-gradient(180deg, #1C0D2E 0%, #160A25 60%, #0F0718 100%);
}
/* Accueil : titres de section (Bangers) en crème, ombre citrouille gardée. */
.halloween .sec-title { color: var(--white); text-shadow: 3px 3px 0 var(--yellow), 5px 5px 0 var(--hw-nuit); }
/* Rubriques, /halloween, contact : titre, sous-titre, sommaire, fil d'Ariane. */
.halloween .cat-title { color: var(--white); }
.halloween .cat-title .cat-sub,
.halloween .cat-sub { color: rgba(245,240,232,0.72); }
.halloween .cat-subcats,
.halloween .cat-subcats-label { color: rgba(245,240,232,0.8); }
.halloween .cat-page > .sa-breadcrumb,
.halloween .cat-page > .sa-breadcrumb a,
.halloween .cat-page > .sa-breadcrumb span { color: rgba(245,240,232,0.6); }
/* Contact : étiquettes du formulaire (les champs ont leur propre fond). */
.halloween .cat-page form label { color: rgba(245,240,232,0.9); }
/* Fiches (/critique/{id}) et pages texte (À propos, légales) : un panneau
   crème au milieu de la nuit, le texte noir n'y change pas — plus lisible
   qu'un long texte clair sur fond sombre. */
.halloween main.static-article,
.halloween main.legal-page {
  background: var(--white);
  border: var(--outline);
  box-shadow: var(--shadow);
  max-width: 900px;
  margin: 2.5rem auto 3rem;
  padding: 1.5rem 2.5rem 3rem;
}
.halloween main.legal-page { padding-top: 2rem; }
/* Pages annexes : toiles et araignée en version claire, comme sur le hero
   (la version sombre était faite pour le crème). */
.halloween .hw-coins .hw-toile { filter: none; opacity: 0.45; }
.halloween .hw-coins .hw-fil { background: rgba(245,240,232,0.5); }
.halloween .hw-coins .hw-araignee { filter: var(--hw-lisere); }

/* ---------- Logo : éclat violet, Z spectraux ---------- */
.halloween .pop-rayons {
  background: repeating-conic-gradient(from 0deg, rgba(255,138,31,0.14) 0deg 4deg, transparent 4deg 13deg);
}
.halloween .pop-eclat::before { background: var(--hw-violet); }
.halloween .pop-eclat::after { background: var(--hw-violet-clair); }
.halloween .pop-slogan { box-shadow: 4px 4px 0 var(--hw-violet); }
.halloween .pop-z { color: #CFE3C4; }

/* ---------- Intro : nuit violette, lune ---------- */
html.halloween.intro-on .intro {
  background:
    repeating-linear-gradient(45deg, transparent 0 18px, rgba(255,138,31,0.05) 18px 36px),
    radial-gradient(circle at 50% 45%, #3B1A5C 0%, var(--hw-nuit) 60%, #0F0718 100%);
}
/* Lune : disque crème, cratères, contour BD, halo. */
.hw-lune {
  position: absolute;
  width: 130px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 3px solid var(--black);
  background:
    radial-gradient(circle at 30% 34%, rgba(214,196,150,0.9) 0 9%, transparent 9.5%),
    radial-gradient(circle at 62% 62%, rgba(214,196,150,0.9) 0 13%, transparent 13.5%),
    radial-gradient(circle at 70% 28%, rgba(214,196,150,0.9) 0 6%, transparent 6.5%),
    radial-gradient(circle at 36% 32%, #FFF8E0 0%, #F6E6B4 55%, #D9C486 100%);
  box-shadow:
    0 0 0 12px rgba(255,241,194,0.08),
    0 0 70px 26px rgba(255,241,194,0.22),
    0 0 160px 70px rgba(155,95,224,0.22);
}
.hw-lune-intro {
  left: 50%;
  top: 46%;
  width: min(62vmin, 520px);
  translate: -50% -50%;
  opacity: 0;
  border-width: 6px;
}
.intro-go .hw-lune-intro { animation: hwLever 0.6s ease-out 0.1s both; }
@keyframes hwLever {
  from { opacity: 0; transform: translateY(40px) scale(0.92); }
  to   { opacity: 1; transform: none; }
}

/* ---------- La nuée ---------- */
.hw-nuee {
  position: fixed;
  inset: 0;
  z-index: 10002; /* au-dessus de l'intro (10001) */
  overflow: hidden;
  pointer-events: none;
}
.hw-chauve {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 90px;
  margin: -21px 0 0 -45px;
  opacity: 0;
  filter: var(--hw-lisere);
  animation: hwEnvol var(--duree) cubic-bezier(0.5, 0.05, 0.75, 0.6) var(--delai) both;
}
.hw-chauve svg,
.hw-chauve-deco svg { display: block; width: 100%; overflow: visible; }
@keyframes hwEnvol {
  0%   { opacity: 0; transform: translate(var(--ox), var(--oy)) scale(0.15); }
  12%  { opacity: 1; }
  55%  { transform: translate(calc(var(--dx) * 0.4 + var(--zig)), calc(var(--dy) * 0.4)) scale(calc(var(--taille) * 0.55)) rotate(var(--penche)); }
  100% { opacity: 1; transform: translate(var(--dx), var(--dy)) scale(var(--taille)) rotate(var(--penche)); }
}
/* Battement d'ailes : chaque aile pivote autour de l'épaule. */
.aile {
  transform-box: fill-box;
  animation: hwBat var(--battement, 140ms) ease-in-out infinite alternate;
}
.aile-g { transform-origin: 100% 40%; --sens: 1; }
.aile-d { transform-origin: 0% 40%; --sens: -1; }
@keyframes hwBat {
  from { transform: rotate(calc(-24deg * var(--sens))); }
  to   { transform: rotate(calc(26deg * var(--sens))) scaleY(0.5); }
}

/* ---------- Hero de l'accueil : la nuit ---------- */
.halloween .hero {
  background: radial-gradient(ellipse at 50% 30%, #35174F 0%, var(--hw-nuit) 56%, #0C0614 100%);
}
.halloween .hero::before {
  background-image: repeating-linear-gradient(
    45deg, transparent, transparent 18px,
    rgba(255,138,31,0.035) 18px, rgba(255,138,31,0.035) 36px
  );
}
.halloween .hero-bulle { box-shadow: 5px 5px 0 var(--yellow); }
.halloween .ne-zzz { background: #E3D7F5; }
.halloween .hero-cta:hover { box-shadow: 7px 7px 0 var(--hw-violet-clair); }
.halloween .bandeau-piste i { color: var(--hw-violet); }

/* Autocollant « SPÉCIAL HALLOWEEN », à côté de « CRITIQUE CULTURELLE… » */
.hw-special {
  display: inline-block;
  margin: 0 0 1.2rem 0.6rem;
  background: var(--yellow);
  color: var(--black);
  font-family: var(--font-title);
  font-size: 0.72rem;
  letter-spacing: 2px;
  padding: 4px 14px;
  border: 2px solid var(--black);
  box-shadow: 3px 3px 0 var(--hw-violet-clair);
  transform: rotate(2.5deg);
  position: relative;
  z-index: 1;
  cursor: pointer;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s;
}
.hw-special:hover,
.hw-special:focus-visible { transform: rotate(-1deg) scale(1.06); box-shadow: 5px 5px 0 var(--hw-violet-clair); }
.hw-special:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--black); }

/* Le décor : derrière le contenu (premier enfant du hero, aucun z-index
   positif), jamais cliquable. */
.hw-hero,
.hw-coins {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
/* max-width: none : la règle générale img { max-width: 100% } de style.css
   écraserait l'araignée à la largeur de son fil (2 px). */
.hw-hero img,
.hw-coins img { position: absolute; display: block; max-width: none; }
.hw-hero .hw-lune { right: 9%; top: 56px; }

/* Ciel étoilé : une vingtaine d'étoiles éparses (pas une trame), qui
   scintillent lentement. */
.hw-etoiles {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.6px 1.6px at 6% 14%, #FFF4D6 60%, transparent 100%),
    radial-gradient(1.2px 1.2px at 13% 38%, #FFF4D6 60%, transparent 100%),
    radial-gradient(2px 2px at 21% 9%, #FFF4D6 60%, transparent 100%),
    radial-gradient(1.2px 1.2px at 28% 27%, #E3D7F5 60%, transparent 100%),
    radial-gradient(1.6px 1.6px at 35% 6%, #FFF4D6 60%, transparent 100%),
    radial-gradient(1.2px 1.2px at 42% 19%, #FFF4D6 60%, transparent 100%),
    radial-gradient(1.6px 1.6px at 55% 11%, #E3D7F5 60%, transparent 100%),
    radial-gradient(1.2px 1.2px at 61% 24%, #FFF4D6 60%, transparent 100%),
    radial-gradient(2px 2px at 69% 7%, #FFF4D6 60%, transparent 100%),
    radial-gradient(1.2px 1.2px at 76% 31%, #E3D7F5 60%, transparent 100%),
    radial-gradient(1.6px 1.6px at 84% 48%, #FFF4D6 60%, transparent 100%),
    radial-gradient(1.2px 1.2px at 93% 12%, #FFF4D6 60%, transparent 100%),
    radial-gradient(1.6px 1.6px at 97% 36%, #E3D7F5 60%, transparent 100%),
    radial-gradient(1.2px 1.2px at 9% 58%, #FFF4D6 60%, transparent 100%),
    radial-gradient(1.2px 1.2px at 48% 40%, #E3D7F5 60%, transparent 100%),
    radial-gradient(1.6px 1.6px at 88% 66%, #FFF4D6 60%, transparent 100%);
  animation: hwScintille 6s ease-in-out infinite alternate;
}
@keyframes hwScintille {
  from { opacity: 0.55; }
  to   { opacity: 1; }
}
/* Collines au pied du hero, liserées de clair de lune : le manoir, les
   citrouilles et les personnages reposent sur quelque chose. */
.hw-sol {
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: 0;
  height: 230px; /* le bandeau couvre les ~100 px du bas : les collines doivent dépasser au-dessus */
  background:
    radial-gradient(ellipse 60% 110% at 18% 108%, #0B0612 49.4%, rgba(155,95,224,0.55) 50%, transparent 51.2%),
    radial-gradient(ellipse 70% 100% at 78% 112%, #0D0716 49.4%, rgba(155,95,224,0.45) 50%, transparent 51.2%),
    radial-gradient(ellipse 90% 70% at 50% 120%, #09050F 49.4%, rgba(155,95,224,0.35) 50%, transparent 51.2%);
}

/* Toiles dans les coins. */
.hw-toile { width: 220px; top: -4px; opacity: 0.6; }
.hw-toile-g { left: -4px; }
.hw-toile-d { right: -4px; transform: scaleX(-1); }

/* Araignée (veuve noire) au bout de son fil, qui monte et descend. */
.hw-fil {
  position: absolute;
  left: 150px;
  top: 0;
  width: 1.5px;
  height: 220px;
  background: rgba(245,240,232,0.6);
  transform-origin: 50% 0;
  animation: hwFil 6s ease-in-out infinite;
}
.hw-araignee {
  left: 50%;
  bottom: -40px;
  width: 52px;
  translate: -50% 0;
  filter: var(--hw-lisere);
}
@keyframes hwFil {
  0%, 100% { height: 220px; rotate: 1.5deg; }
  50%      { height: 150px; rotate: -1.5deg; }
}

/* Chauves-souris en silhouette autour de la lune. */
.hw-chauve-deco {
  position: absolute;
  width: 46px;
  --battement: 160ms;
  filter: var(--hw-lisere);
  animation: hwPlane 7s ease-in-out infinite;
}
.hw-vol-1 { right: 20%; top: 64px; }
.hw-vol-2 { right: 5%; top: 210px; width: 34px; animation-delay: -2.4s; --battement: 130ms; }
.hw-vol-3 { right: 17%; top: 236px; width: 28px; animation-delay: -4.6s; --battement: 110ms; }
@keyframes hwPlane {
  0%, 100% { translate: 0 0; }
  50%      { translate: -22px 12px; }
}

/* Brume au ras du bandeau. */
.hw-brume {
  position: absolute;
  left: -20%;
  width: 140%;
  bottom: 40px;
  height: 130px;
  background:
    radial-gradient(ellipse 22% 50% at 20% 60%, rgba(220,205,245,0.18), transparent 70%),
    radial-gradient(ellipse 26% 45% at 55% 70%, rgba(220,205,245,0.14), transparent 70%),
    radial-gradient(ellipse 20% 50% at 85% 55%, rgba(220,205,245,0.18), transparent 70%);
  filter: blur(6px);
  animation: hwBrume 38s ease-in-out infinite alternate;
}
.hw-brume-2 { bottom: 70px; opacity: 0.7; animation-duration: 52s; animation-direction: alternate-reverse; }
@keyframes hwBrume {
  from { transform: translateX(-6%); }
  to   { transform: translateX(6%); }
}

/* Lycan et vampire (illustrations Canva, WebP 440 px) passent la tête
   derrière le bandeau. Ombre douce : un décalage dur à la BD jurerait sur un
   dessin peint. */
.hw-lycan,
.hw-vampire {
  bottom: 26px;
  width: 220px;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,0.6)) drop-shadow(0 0 24px rgba(155,95,224,0.25));
  animation: hwGuette 7s ease-in-out infinite;
}
.hw-lycan { left: 3%; }
.hw-vampire { right: 3%; animation-delay: -3.5s; }
@keyframes hwGuette {
  0%, 100% { translate: 0 30px; }
  45%, 60% { translate: 0 0; }
}
/* Citrouilles sculptées : leur lueur vacille. */
.hw-citrouille {
  width: 90px;
  filter: drop-shadow(0 0 14px rgba(255,170,60,0.45)) drop-shadow(4px 4px 0 rgba(0,0,0,0.5));
  animation: hwLueur 2.8s ease-in-out infinite alternate;
}
.hw-citrouille-g { left: 17%; bottom: 96px; rotate: -6deg; }
.hw-citrouille-d { right: 17%; bottom: 96px; width: 72px; rotate: 5deg; animation-delay: -1.3s; }
@keyframes hwLueur {
  from { filter: drop-shadow(0 0 8px rgba(255,170,60,0.30)) drop-shadow(4px 4px 0 rgba(0,0,0,0.5)); }
  to   { filter: drop-shadow(0 0 18px rgba(255,170,60,0.60)) drop-shadow(4px 4px 0 rgba(0,0,0,0.5)); }
}

/* ---------- Autres pages : toiles et araignée aux coins de la fenêtre ---------- */
/* L'ancre (hauteur 0) est insérée juste APRÈS l'en-tête par halloween.js :
   les coins suivent donc sa hauteur réelle, même quand la nav passe sur deux
   lignes ou que la fenêtre change de taille. z-index -1 : derrière le texte
   (sans ça, un élément positionné se peint par-dessus le contenu ordinaire),
   mais devant le fond crème, porté par le canevas. */
.hw-coins-ancre { position: relative; height: 0; }
.hw-coins { top: 0; bottom: auto; height: 260px; z-index: -1; }
.hw-coins .hw-toile { width: 170px; opacity: 0.32; filter: invert(1); }
.hw-coins .hw-fil { left: 110px; height: 150px; background: rgba(26,26,26,0.45); animation-name: hwFilCourt; }
.hw-coins .hw-araignee { width: 40px; bottom: -30px; filter: none; }
@keyframes hwFilCourt {
  0%, 100% { height: 150px; rotate: 1.5deg; }
  50%      { height: 100px; rotate: -1.5deg; }
}

/* ---------- Cartes ---------- */
/* Une toile dans le coin bas-droit de chaque affiche (le coin libre : les
   pastilles occupent les trois autres), et une araignée qui descend au
   survol. */
.halloween .card { position: relative; }
.halloween .card-poster::before {
  content: '';
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 66px;
  aspect-ratio: 1;
  background: url('../img/halloween/toile-claire.svg') no-repeat center / contain;
  transform: rotate(180deg);
  opacity: 0.7;
  z-index: 1;
  pointer-events: none;
}
.halloween .card::after {
  content: '';
  position: absolute;
  right: 26%;
  top: -160px;
  width: 30px;
  height: 160px;
  background:
    url('../img/halloween/araignee.svg') no-repeat center bottom / 30px auto,
    linear-gradient(rgba(245,240,232,0.85), rgba(245,240,232,0.85)) no-repeat center top / 1.5px calc(100% - 20px);
  transition: transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1);
  pointer-events: none;
  z-index: 2;
}
.halloween .card:hover::after { transform: translateY(140px); }

/* ---------- Hall of Fame : le chaudron ---------- */
.halloween .fame-header { position: relative; padding-right: 150px; }
.hw-chaudron {
  position: absolute;
  right: 18px;
  bottom: -8px;
  width: 116px;
  pointer-events: none;
}
.hw-chaudron img { position: relative; display: block; width: 100%; filter: drop-shadow(4px 4px 0 var(--black)); }
/* Bulles de poison : translucides, lueur verte, sans contour de dessin animé. */
.hw-bulles { position: absolute; left: 22%; right: 22%; top: 18%; height: 0; }
.hw-bulles b {
  position: absolute;
  bottom: 0;
  width: 12px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #C9FFB0, var(--hw-poison) 70%);
  box-shadow: 0 0 8px rgba(124,255,79,0.6);
  opacity: 0;
  animation: hwBulle 2.6s ease-in infinite;
}
.hw-bulles b:nth-child(1) { left: 6%; }
.hw-bulles b:nth-child(2) { left: 40%; width: 8px; animation-delay: 0.7s; }
.hw-bulles b:nth-child(3) { left: 70%; width: 14px; animation-delay: 1.3s; }
.hw-bulles b:nth-child(4) { left: 25%; width: 7px; animation-delay: 1.9s; }
@keyframes hwBulle {
  0%   { opacity: 0; transform: translateY(0) scale(0.4); }
  15%  { opacity: 0.9; }
  80%  { opacity: 0.9; transform: translateY(-34px) scale(1); }
  100% { opacity: 0; transform: translateY(-40px) scale(1.4); }
}
/* Vapeur verdâtre qui monte du chaudron. */
.hw-vapeur { position: absolute; left: 10%; right: 10%; top: -10%; height: 50%; }
.hw-vapeur b {
  position: absolute;
  bottom: 0;
  width: 46%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 60%, rgba(180,255,150,0.35), transparent 70%);
  filter: blur(4px);
  animation: hwVapeur 4s ease-out infinite;
}
.hw-vapeur b:nth-child(1) { left: 8%; }
.hw-vapeur b:nth-child(2) { left: 46%; animation-delay: -2s; }
@keyframes hwVapeur {
  0%   { opacity: 0; transform: translateY(10px) scale(0.6); }
  40%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-30px) scale(1.3); }
}

/* ---------- Hall of Shame : griffures de lycan ---------- */
.halloween .shame-header { position: relative; overflow: hidden; }
.hw-griffes {
  position: absolute;
  right: 40px;
  top: -10px;
  bottom: -10px;
  width: 90px;
  pointer-events: none;
}
.hw-griffes b {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 9px;
  background: var(--black);
  clip-path: polygon(50% 0, 100% 18%, 70% 100%, 30% 100%, 0 18%);
  rotate: 18deg;
}
.hw-griffes b:nth-child(1) { left: 10px; }
.hw-griffes b:nth-child(2) { left: 38px; top: -6px; }
.hw-griffes b:nth-child(3) { left: 66px; }

/* ---------- Pied de page : le cimetière des navets ---------- */
/* Pierre sombre et texte gravé : l'humour est dans les épitaphes, pas dans
   le dessin. */
.hw-cimetiere {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 1.6rem;
  margin: -2.5rem -2rem 2rem;
  padding: 2rem 1rem 0;
  border-bottom: 5px solid #140B1C;
  background:
    radial-gradient(ellipse 60% 70% at 50% 100%, rgba(107,47,179,0.25), transparent 70%),
    linear-gradient(transparent 60%, rgba(220,205,245,0.05));
  pointer-events: none;
}
.hw-tombe {
  display: grid;
  place-content: center;
  text-align: center;
  width: 84px;
  height: 104px;
  background: linear-gradient(100deg, #4A4650, #34303A 60%, #2A2730);
  border: 3px solid #0B0708;
  border-bottom: none;
  border-radius: 46px 46px 0 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 1px;
  line-height: 1.05;
  color: #1C1A20;
  text-shadow: 0 1px 0 rgba(255,255,255,0.14);
  padding-top: 10px;
}
.hw-tombe small { display: block; font-family: var(--font-title); font-size: 0.55rem; letter-spacing: 1px; }
.hw-tombe-1 { rotate: -5deg; }
.hw-tombe-2 { height: 128px; width: 96px; }
.hw-tombe-3 { height: 86px; rotate: 4deg; }
.hw-tombe-4 { width: 110px; height: 116px; font-size: 1rem; rotate: -3deg; }
.hw-croix {
  position: relative;
  width: 14px;
  height: 92px;
  background: #2A2730;
  border: 3px solid #0B0708;
  border-bottom: none;
}
.hw-croix::before {
  content: '';
  position: absolute;
  left: -19px;
  top: 16px;
  width: 46px;
  height: 12px;
  background: #2A2730;
  border: 3px solid #0B0708;
}
.hw-croix-2 { height: 74px; rotate: 6deg; }
.hw-citrouille-pied {
  width: 76px;
  margin-bottom: -4px;
  filter: drop-shadow(0 0 14px rgba(255,170,60,0.45));
}

/* ---------- Écrans plus étroits ---------- */
/* Le texte du hero occupe le centre : sous 1200 px, les grands éléments
   n'ont plus la place sur les côtés et passeraient sous le texte. Préfixe
   .hw-hero : la règle .hw-hero img (display: block) l'emporterait. */
@media (max-width: 1200px) {
  .hw-hero .hw-lycan, .hw-hero .hw-vampire, .hw-hero .hw-citrouille { display: none; }
  .hw-hero .hw-lune { width: 92px; right: 4%; top: 24px; }
  .hw-vol-2, .hw-vol-3 { display: none; }
}
@media (max-width: 640px) {
  .hw-toile { width: 120px; }
  .hw-fil { left: 56px; height: 110px; animation: none; }
  .hw-araignee { width: 36px; bottom: -28px; }
  .hw-hero .hw-lune { width: 64px; border-width: 3px; }
  .hw-vol-1 { width: 32px; right: 24%; top: 34px; }
  .hw-coins .hw-toile { width: 110px; }
  /* Pages annexes : la colonne de texte prend toute la largeur, l'araignée
     tomberait sur le titre. Les toiles restent. */
  .hw-coins .hw-fil { display: none; }
  .hw-special { margin: 0 0 1.2rem; }
  .halloween .fame-header { padding-right: 96px; }
  .hw-chaudron { width: 78px; right: 8px; }
  .hw-griffes { right: 10px; width: 70px; opacity: 0.6; }
  .halloween main.static-article, .halloween main.legal-page { margin: 1rem 0.75rem 2rem; padding: 1rem 1.1rem 2rem; }
  .hw-cimetiere { gap: 0.6rem; margin: -2.5rem -1rem 2rem; }
  .hw-tombe { width: 60px; height: 78px; font-size: 0.85rem; }
  .hw-tombe-2 { width: 68px; height: 92px; }
  .hw-tombe-4, .hw-croix-2 { display: none; }
  .hw-citrouille-pied { width: 52px; }
}

/* Moins d'animations demandé : tout le décor est figé (la nuée, elle, ne
   part jamais : voir halloween.js). */
@media (prefers-reduced-motion: reduce) {
  .hw-hero *, .hw-coins *, .aile, .hw-bulles b, .hw-vapeur b, .hw-chauve-deco { animation: none !important; }
  .hw-bulles b, .hw-vapeur b { opacity: 0; }
  .halloween .card::after { transition: none; }
}