/* ============================================================
   HALLOWEEN — l'habit de fête du site, du 19 au 31 octobre 2026.
   Cadrage du 29/08/2026 (panel des cinq seniors + arbitrages Vincent).

   TOUT est scopé [data-fete="halloween"] : chargée par accident hors
   fenêtre, cette feuille ne peint RIEN. Elle est chargée APRÈS site.css
   (base.html) : à spécificité égale, la cascade tranche pour elle.
   Préfixe de classes : hw- (vérifié libre le 29/08 — ⚠️ « fete » est PRIS :
   niveau d'actu .niv-fete, carte .com-fete, variable Jinja de participer).
   Décor DOM : base.html, bloc {% if fete_site == 'halloween' %}.
   ============================================================ */

/* ⚠️ LE FONDU ENTRE LES PAGES RESTE, MÊME SUR TÉLÉPHONE (02/10/2026).
   Vidéo de l'iPhone de Vincent : retour à l'accueil par le logo, le doigt qui
   fait défiler au même moment, et la barre du haut descend seule sur une page
   figée avant de revenir à sa place (la photo de la page pendant le fondu
   reste plus longtemps avec tout le décor à peindre). Couper le fondu sur
   écran tactile pendant la fête (v0.99.369) était PIRE : une page noire
   avant chaque chargement. Retiré en v0.99.370 à sa demande. */

/* LA BARRE RESTE DANS LA PAGE PENDANT LE FONDU, SUR ÉCRAN TACTILE (02/10/2026).
   2e vidéo de l'iPhone de Vincent (« je scrolle mais la page met du temps à
   charger et le header descend sans la page ») : le fondu commence (4,2 s), la
   page d'arrivée est une photo figée, et la barre, qui a son propre calque
   (.nav, view-transition-name dans site.css), descend de toute la longueur du
   défilement (≈ 300 px à 4,9 s) avant que tout se remette en place (5,6 s).
   L'iPhone place ce calque comme si la page avait déjà défilé sous la photo.
   On ne coupe PAS le fondu (v0.99.369 : page noire). On retire seulement à la
   barre son calque propre : elle fait partie de la photo de la page et reste
   figée avec elle. Et la page d'arrivée ne glisse plus de 12 px : ce glissé se
   jouait DERRIÈRE la barre, il l'emporterait maintenant avec lui. L'ancienne
   page reste à l'écran jusqu'à ce que la nouvelle soit prête, puis la remplace
   d'un coup. Sur ordinateur et hors de la fête, rien ne change (vérifié dans
   Edge, tactile et ordinateur : le fondu a toujours lieu, sans calque de barre
   ni glissé au toucher). */
@media (pointer:coarse){
  [data-fete="halloween"] .nav{view-transition-name:none}
  [data-fete="halloween"]::view-transition-new(root){animation:none}
}

/* LA TOILE ET SON ARAIGNÉE RESTENT DEVANT LA BARRE PENDANT LE FONDU, SUR
   ORDINATEUR (05/10/2026). Depuis que l'araignée reprend sa balade d'une page à
   l'autre (halloween.js, « La reprise »), elle est déjà sur la barre quand la
   nouvelle page arrive. Or pendant le fondu la barre a son propre calque, peint
   PAR-DESSUS la photo de la page : l'araignée passait sous le verre et pâlissait
   un cinquième de seconde (filmé au banc). Le premier plan prend donc lui aussi
   son calque, peint après celui de la barre (z-index 60 contre 50), et SANS
   AUCUNE animation : seule la nouvelle image compte, et elle est vivante,
   l'araignée y marche.
   ⚠️ « Aucune » compte aussi l'animation de GROUPE que le navigateur pose
   d'office : elle anime la taille du calque, même quand elle ne change pas, et
   avec l'araignée qui marche dedans, la barre sortait délavée sur une image
   d'un changement de page sur deux (filmé : 7 fois sur 12 avec elle, 0 sur 10
   sans elle). Et le fondu par défaut de ce calque donnait une image blanche.
   Rien derrière ce calque ne passe par un verre dépoli : l'extraire ne ternit
   rien (voir site.css). Au toucher, la barre n'a pas de calque pendant la fête
   (règle ci-dessus) : rien à faire. */
@media not (pointer:coarse){
  [data-fete="halloween"] .hw-premier-plan{view-transition-name:hw-premier-plan}
  [data-fete="halloween"]::view-transition-group(hw-premier-plan){animation:none}
  [data-fete="halloween"]::view-transition-old(hw-premier-plan){display:none}
  [data-fete="halloween"]::view-transition-new(hw-premier-plan){animation:none}
  :root.a11y-calme[data-fete="halloween"] .hw-premier-plan{view-transition-name:none}
}

/* ---------- 1. LA LUMIÈRE : les aurores mûrissent ---------- */
/* Le jour : cuivre et prune sur l'automne déjà en place. La 3e nappe de jour
   est un nuage neutre (site.css) : le jour se joue sur --a1/--a2. */
[data-fete="halloween"]{
  --a1:rgba(210,105,20,.42);
  --a2:rgba(126,74,210,.32);
  --a3:rgba(255,122,102,.30);
  /* L'ENCRE DU DÉCOR, par thème ET par plan (revue du 30/08). Avant, une
     seule couleur écrite en dur à cinq endroits : le jour le décor sortait à
     10,5:1 contre le fond, soit le contraste d'un TEXTE (le jeton de texte du
     site est #1e2640, à un cheveu du #232e4d qui servait ici) ; la nuit il
     tombait à 1,4:1 et disparaissait. Un fond dessiné à la force d'un premier
     plan n'est plus un fond. Deux jetons, deux profondeurs, mesurés :
       jour  proche 3,8:1   lointain 2,4:1   (contre le sable du bas de page)
       nuit  proche 2,9:1   lointain 2,0:1   (contre le ciel de nuit)
     ⚠️ Une data-URI n'accepte PAS var() : la palissade passe donc par un
     mask-image, sa couleur venant du background. */
  /* L'AUTOMNE PREND LA PLACE DU GRIS (refonte du 02/10/2026, maquette validée
     par Vincent). Les silhouettes d'ardoise se lisaient comme du carton gris le
     jour : elles passent en PRUNE, la couleur qui fait chanter l'orange des
     citrouilles. Mesuré contre le sable du bas de page (242 210 187) :
     proche 3,1:1, lointain 1,8:1, un cran sous l'ardoise (3,8 et 2,7) : un
     décor de fond se montre, il ne crie pas. */
  --hw-encre:#8a7092;
  --hw-encre-loin:#ad9ab5;
  /* le volume (dégradés hwPierre, hwBois, hwColline de base.html) */
  --hw-pierre-haut:#bca9c4; --hw-pierre-mi:#a690b0; --hw-pierre-bas:#957fa1; --hw-pierre-voile:.55;
  --hw-bois-bas:#5b4265; --hw-bois-haut:#8f7698;
  --hw-colline-haut:#e6d3d6; --hw-colline-bas:#d9c3c9;
  /* la lueur d'horizon derrière le manoir, abricot le jour */
  --hw-lueur-c:rgba(255,186,120,.62); --hw-lueur-m:rgba(255,200,150,.22);
  --hw-sol:#cdb5bd;
  --hw-chat:#3a2a40;
  /* le château (outils/halloween_chateau.py) : toits, ombres, filets de lumière,
     encre des détails, chauves-souris ; fenêtres et porte ÉTEINTES du jour */
  --hw-toit:#7d6487; --hw-toit-lum:#9d86a6;
  --hw-ch-ombre:rgba(70,45,85,.2); --hw-ch-lum:rgba(255,236,214,.6);
  --hw-ch-trait:rgba(80,55,95,.55); --hw-ch-encre:#6f5679; --hw-chauve:#4a3556;
  --hw-fen-jour:#4a3556;
  /* l'ambiance du téléphone : la toile au coin des cartes, la lueur du bas */
  --hw-toile-coin:rgba(92,64,112,.30);
  --hw-lueur-bas:rgba(255,168,104,.26);
  /* Le fond du pied de page pendant la fête. Plus opaque que le jeton --glass
     du site : celui-ci est fait pour passer devant des cartes, pas devant une
     citrouille orange vif. À .55 le lien Cospi restait à 2,8:1. */
  --hw-pied:rgba(252,250,246,.86);
}
/* La nuit : braise et améthyste, et le liseré de TOUTES les cartes passe à
   l'ambre — le reflet de bougie, un seul jeton pour tout le site. */
[data-theme="night"][data-fete="halloween"]{
  --a1:rgba(255,140,50,.32);
  --a2:rgba(140,90,255,.26);
  --a3:rgba(255,122,102,.22);
  --rim:rgba(255,214,170,.24);
  /* La nuit, l'encre s'ÉCLAIRCIT elle aussi, mais pour la raison inverse du
     jour : sur un ciel presque noir, les silhouettes doivent remonter pour
     exister. Le lointain reste sous le proche : plus loin, plus proche du
     ciel, donc moins contrasté. */
  --hw-encre:#4a5a8f;
  /* ⚠️ Ce jeton est PLAFONNÉ par la lisibilité, pas par le goût : sur
     téléphone, le manoir passe derrière la dernière ligne du pied de page, et
     le texte y est clair. Plus il s'éclaircit, moins cette ligne se lit. À
     #35406b elle tombait à 4,16:1, sous le seuil. Mesuré ici à 4,6:1, le
     manoir restant à 1,8:1 contre le ciel (contre 1,4:1 avant la revue, où il
     disparaissait). Ne pas l'éclaircir sans re-mesurer le pied de page. */
  --hw-encre-loin:#303a61;
  --hw-pied:rgba(14,19,38,.86);
  /* (02/10/2026) Les murs du manoir ne prennent plus ce jeton mais le dégradé
     hwPierre : le clair de lune sur les toits, la brume au pied. Le jeton
     reste celui du socle, des os et des détails du chat. */
  --hw-pierre-haut:#5a6699; --hw-pierre-mi:#374270; --hw-pierre-bas:#263058; --hw-pierre-voile:.7;
  --hw-bois-bas:#161c3b; --hw-bois-haut:#4c5b95;
  --hw-colline-haut:#252e55; --hw-colline-bas:#181e3b;
  --hw-lueur-c:rgba(255,158,70,.56); --hw-lueur-m:rgba(255,120,50,.18);
  --hw-sol:#11162c;
  --hw-chat:#0a0d18;
  --hw-toit:#232b4f; --hw-toit-lum:#3c4a80;
  --hw-ch-ombre:rgba(6,9,24,.3); --hw-ch-lum:rgba(176,196,255,.42);
  --hw-ch-trait:rgba(10,14,34,.6); --hw-ch-encre:#283157; --hw-chauve:#0a0d18;
  --hw-toile-coin:rgba(205,218,255,.30);
  --hw-lueur-bas:rgba(255,140,60,.24);
}
/* LE TEXTE DOUX PREND UN CRAN DE CONTRASTE PENDANT LA FÊTE (02/10/2026, vérification
   avant prod). Le décor du bas passe sous le verre : au téléphone le jour, la
   lueur chaude du bas faisait perdre 0,3 à 0,7 point aux textes en --ink-soft,
   déjà tout juste au-dessus de 4,5:1 (« Jeu réservé aux salariés du Pôle » 4,39
   → 3,66) ; sur ordinateur, l'arbre à gauche le jour et la lueur du château la
   nuit faisaient de même. Le jeton s'assombrit le jour et s'éclaircit la nuit,
   dans la direction déjà prise par le fond sobre (site.css), sans aller aussi
   loin : le texte doux reste plus doux que le texte. Le jour, le teal profond des
   liens suit (« cseinterne@intermaide.fr » 4,41 → 3,87 sous la lueur) ; la nuit,
   il est déjà clair. Rien d'autre ne bouge.
   Le fond sobre garde ses propres valeurs (:not(.a11y-sobre)). */
:root:not([data-theme="night"]):not(.a11y-sobre)[data-fete="halloween"]{--ink-soft:#475071;--teal-deep:#13627d}
:root[data-theme="night"]:not(.a11y-sobre)[data-fete="halloween"]{--ink-soft:#b4bedf}
/* La lune des moissons : le clair de lune se dore. JAMAIS de disque : la
   source de lumière reste invisible (leçon des deux lunes ratées, site.css). */
[data-theme="night"][data-fete="halloween"] .soleil{
  background:radial-gradient(circle,
    rgba(240,215,175,.40),
    rgba(220,180,140,.16) 42%,
    transparent 70%);
}

/* ---------- 2. LA SCÈNE : la toile au coin, les citrouilles posées ---------- */
/* Même étage que les couches du ciel (z:-1), APRÈS elles dans le DOM : le
   décor passe devant les étoiles et sous tout le contenu. pointer-events:none :
   il ne vole aucun clic (cicatrice du bouton flottant). */
[data-fete="halloween"] .hw-decor{position:fixed;inset:0;z-index:-1;pointer-events:none}
/* Le premier plan : la toile et son araignée DEVANT le contenu et
   l'en-tête (z 60 > nav 50), sous les surcouches (pastille dev, chasse).
   pointer-events:none : décoratif, ne vole jamais un clic. */
[data-fete="halloween"] .hw-premier-plan{position:fixed;inset:0;z-index:60;pointer-events:none}

/* Décalée dans le coin (30/08) : ancrée à 0,0 elle tombait pile sur le bloc de
   marque, ses rayons traversaient « CSE Pôle Interm'aide » et un fil coupait
   la baseline en deux. Le logo commence à 121 px du bord en grand écran : la
   toile garde sa taille, c'est sa zone dense qui repart dans l'angle perdu. */
[data-fete="halloween"] .hw-toile{position:absolute;left:-56px;top:-46px;
  width:200px;height:200px}
[data-fete="halloween"] .hw-fils{fill:none;stroke:#5a6a8a;stroke-width:.8;opacity:.42;stroke-linecap:round}
[data-fete="halloween"] .hw-perle{fill:#8fa3c4;opacity:.6}
[data-theme="night"][data-fete="halloween"] .hw-fils{stroke:#cdd9f2;stroke-width:.7;opacity:.4}
[data-theme="night"][data-fete="halloween"] .hw-perle{fill:#e8f0ff;opacity:.7}

/* L'habitante de la toile : elle descend par les vrais fils (points calculés
   sur les rayons de la géométrie générée), va marcher sur la barre de
   navigation puis rentre, avec des pauses d'inspection ; les pattes battent
   pendant tout le trajet. Rare, déclenchée par halloween.js
   (horloge persistante) ; jour ET nuit — c'est SA toile. Sobre : cachée avec
   le décor ; calme/reduced : l'animation se fige sur opacity 0, invisible. */
[data-fete="halloween"] .hw-toile{overflow:visible}
/* ⚠️ PAS de will-change ici (retiré le 30/08, « elle marche sur la moitié du
   header et elle disparaît »). will-change:transform promeut l'araignée sur sa
   propre couche de composition, et cette couche est dimensionnée d'après la
   boîte de son svg — 116 px au téléphone. Or son trajet l'emmène bien au-delà :
   sur un moteur qui borne la texture, elle se fait couper en cours de route.
   Les deux moteurs du banc la dessinaient partout, le symptôme vient d'un vrai
   iPhone : on retire donc la promotion de couche, qui de toute façon n'a rien à
   faire sur un élément présent en permanence. */
[data-fete="halloween"] .hw-araignee{color:#2e3c5e;opacity:0}
[data-theme="night"][data-fete="halloween"] .hw-araignee{color:#05070f;
  filter:drop-shadow(0 0 3px rgba(205,225,255,.55))}
[data-fete="halloween"] .hw-patte{fill:none;stroke:currentColor;stroke-width:1.15;stroke-linecap:round}
/* Le fil passe DEVANT le contenu de la page pendant la descente : à .65 il
   restait un voile là où il croisait une lettre claire, et l'œil concluait
   qu'il passait derrière. Monté à .88, et un peu plus épais. */
[data-fete="halloween"] .hw-fil-soie{display:none;stroke:#8fa3c4;stroke-width:1.05;opacity:.88;
  transform-origin:89.2px 127.4px}
[data-theme="night"][data-fete="halloween"] .hw-fil-soie{stroke:#cdd9f2;opacity:.55}
/* Les deux figures suivent LES VRAIS FILS par offset-path (motion path) :
   chaque virage est un segment EXACT du path généré de la toile (les Q sont
   les mêmes, inversés), l'entrée et la sortie se font HORS ÉCRAN : plus aucun
   fondu, elle arrive et elle repart. offset-rotate auto : elle s'oriente dans
   les virages, tête dans le sens de la marche (le dessin avance en +y : calage
   -90°) ; à la descente, tête en bas ; à la remontée, tête en haut, comme une
   vraie. Navigateur sans offset-path : elle reste hors écran, dégradation
   muette.

   ⚠️ TRAJET REFAIT LE 31/08 (retour Vincent : « l'araignée ne marche pas sur
   le header »). Il avait raison, et la mesure l'a montré : sur un écran LARGE
   elle passait à côté de la barre sans jamais y poser le pied. La toile est
   ancrée au COIN (position fixe, left:-56), son trajet ne bouge donc pas d'un
   pixel ; la barre, elle, est centrée et plafonnée à 1280 px (--maxw), donc
   son bord gauche RECULE quand l'écran s'élargit. Mesuré dans Chrome le 31/08 :
   à 1440 px la barre commence à x 72 et l'araignée marchait bien dessus ; à
   1536 px (l'écran de Vincent) elle commence à x 120 alors que le trajet
   s'arrêtait à x 124, soit 4 px de chevauchement, sur un seul instant, tout en
   haut. La bascule est vers 1520 px : ça se jouait à 16 px près, et c'est
   pour ça que ça pouvait sembler juste ailleurs. Un chemin écrit en dur ne
   peut donc PAS être juste à toutes les largeurs.

   Le grand écran reprend donc la balade du téléphone, avec un PONT (demande de
   Vincent le 31/08, « elle pourrait pas tirer un fil jusqu'au header en partant
   du fil qui dépasse ? ») : elle entre par l'anneau extérieur, arrive au
   croisement 137.8 55.7, SORT par le rayon qui dépasse jusqu'à son bout
   (151.7 61.3, écran x 122 y 26, le seul rayon qui pointe vers la barre et qui
   soit à l'écran), s'y arrête, franchit le vide jusqu'à la barre EN DÉVIDANT
   SON FIL derrière elle, marche sur la barre, fait demi-tour et rentre par le
   même chemin, le fil se raccourcissant à mesure qu'elle revient.
   L'aller-retour est DANS le chemin : offset-distance ne fait que croître, donc
   elle se retourne au demi-tour au lieu de marcher à reculons. Elle entre
   un cran plus bas que la descente (150.6 15.8 au lieu de 172 −22, tout aussi
   hors écran) : autant de secondes gagnées sur une figure déjà longue.

   ⚠️ L'INVARIANT QUI REND LES PALIERS EXACTS À TOUTE LARGEUR : pont + portée sur
   la barre = 502.4 px d'écran, TOUJOURS. Plus la barre est loin, plus le fil est
   long et plus la marche sur la barre est courte ; le parcours total reste de
   1151 px, elle finit toujours à x 625, et le pont et la barre se parcourent à la
   MÊME vitesse (16 px/s), si bien qu'aucun palier ne tombe à leur frontière.
   Vérifié : à 1920, 1536 et 1440 px, mêmes fractions et même durée. Casser cet
   invariant (une portée fixe, ou deux vitesses différentes) remettrait les pauses
   au mauvais endroit selon l'écran.

   ⚠️ ELLE PASSE PAR-DESSUS LE TEXTE DE LA BARRE, et c'est VOULU (arbitrage de
   Vincent le 31/08 : « c'est pas grave si elle marche sur les textes, au
   contraire c'est plus crédible »). Mesuré : pendant la traversée elle occupe
   y 54 à 99, alors que la baseline de la marque tient y 52 à 68 et les entrées
   du menu y 29 à 66. C'est donc l'INVERSE de la règle du téléphone, où elle
   chemine sous le texte : ne pas « corriger » l'un d'après l'autre.

   ⚠️ LE CHEMIN EST CALCULÉ AU DÉPART par halloween.js, d'après le bord réel de
   la barre, et posé dans --arai-balade. La valeur de repli ci-dessous est
   celle d'un écran de 1536 px : elle ne sert que si la mesure échoue (page
   sans barre, géométrie illisible), et halloween.js préfère alors la descente.
   Toucher à la géométrie de la toile OU au gabarit de la barre oblige à
   revérifier les deux. */
[data-fete="halloween"] .hw-arai-scene .hw-araignee{offset-rotate:auto -90deg}
[data-fete="halloween"] .hw-arai-scene.hw-va .hw-araignee{opacity:1;
  offset-path:var(--arai-balade, path("M150.6 15.8 Q127 31.5 137.8 55.7 L151.7 61.3 Q232.8 85.6 313.6 61.3 Q387.9 76.5 459.4 71.4 Q525.7 66.3 578.7 74.8 Q509.8 79.9 435.6 76.5 Q364.0 69.7 313.6 61.3 Q232.8 85.6 151.7 61.3 L137.8 55.7 Q127 31.5 150.6 15.8"));
  animation:hw-arai-balade-pc 56s ease-in-out both}
/* LE PONT, la soie qu'elle laisse derrière elle en franchissant le vide. Même
   trait que le fil de la descente.
   ⚠️ CORRECTION DE VINCENT LE 31/08 : le fil ne se LANCE pas avant elle, « une
   araignée ne lance pas le fil à ma connaissance, ça sort par son postérieur ».
   Exact : la soie sort des filières et se dévide DERRIÈRE la bête. Le fil
   s'allonge donc exactement au rythme de sa traversée et se raccourcit quand
   elle revient, comme hw-fil-soie suit la descente.
   Sa LONGUEUR est posée par halloween.js (attribut x2) : nulle quand la toile
   touche déjà la barre (écran étroit), donc invisible sans cas particulier, y
   compris au téléphone où la barre commence à x 8.
   ⚠️ Le fil N'EST PAS TENDU (demande de Vincent le 01/09, « il serait bien que
   la ligne de la toile vers le header soit moins rigide ») : c'est une courbe
   qui s'affaisse, et l'araignée emprunte EXACTEMENT la même, si bien que le
   fil reste sous elle au lieu de la croiser. Le dévidage se fait donc par
   TRACÉ PROGRESSIF (stroke-dasharray/dashoffset) et non plus par étirement :
   un scaleX aurait allongé la courbe sans creuser son ventre, et un fil court
   serait apparu avec un affaissement de fil long.
   ⚠️ Le tracé ET les instants du dévidage dépendent de la LONGUEUR du pont, que
   seule la mesure connaît : ils sont posés par halloween.js et NON ici. Le d
   vide du gabarit est ce qui garde le fil invisible si le script ne pose rien.
   fill:none est obligatoire depuis le passage de <line> à <path> : sans lui la
   courbe se remplit et le pont devient un aileron. */
[data-fete="halloween"] .hw-fil-pont{display:none;fill:none;stroke:#8fa3c4;stroke-width:1.05;opacity:.88}
[data-theme="night"][data-fete="halloween"] .hw-fil-pont{stroke:#cdd9f2;opacity:.55}
[data-fete="halloween"] .hw-arai-scene.hw-va .hw-fil-pont{display:inline}
/* La descente part du nœud (89.2 127.4), vrai croisement de l'anneau
   extérieur et d'un rayon, et le fil DESCEND DEUX FOIS PLUS BAS qu'avant
   (y 400 au lieu de 265, soit ~310 px d'écran au lieu de 146) : demande de
   Vincent. Elle pend donc devant le contenu, sur le calque de premier plan. */
[data-fete="halloween"] .hw-arai-scene.hw-file .hw-araignee{opacity:1;
  offset-path:path("M172 -22 L161.8 0 Q137.4 7 150.6 15.8 Q127 31.5 137.8 55.7 Q114.4 67.7 118.8 96.2 Q88.8 95.5 89.2 127.4 L89.2 400");
  animation:hw-arai-descente 45s ease-in-out both}
[data-fete="halloween"] .hw-arai-scene.hw-file .hw-fil-soie{display:inline;
  animation:hw-fil-etire 45s ease-in-out both}
/* Les pourcentages sont calés sur les LONGUEURS RÉELLES des segments (1293 px
   d'écran pour la balade, 460 unités pour la descente) : les pauses tombent
   sur les nœuds de la toile et sur le bord de la barre, là où une araignée
   s'arrête pour tâter le terrain. */
/* Chaque palier est le temps qu'il faut pour parcourir SA distance à la
   vitesse voulue, pas une fraction ronde du total : c'est la seule façon
   d'avoir une allure sensée sur un chemin dont les segments sont très
   inégaux. Le profil est celui du téléphone, validé le 30/08 : elle sort de la
   toile d'un pas vif (32 px/s), gagne le bout du rayon (20 px/s) et s'y arrête
   2 s pour lancer son fil, TRAVERSE LENTEMENT le pont puis la barre d'une seule
   allure (16 px/s, c'est le moment qu'on regarde), marque 3,5 s au bout du
   voyage, revient d'un pas plus décidé (36 px/s), souffle 1,2 s au bout du
   rayon et rentre chez elle d'un trait (46 px/s). D'où les 56 s.
   ⚠️ Les paliers ne tiennent que grâce à l'invariant décrit plus haut (pont +
   portée constants, et pont et barre à la MÊME vitesse) : c'est ce qui les rend
   justes à toutes les largeurs. Toucher à TRAJET dans halloween.js sans refaire
   ces paliers, c'est changer la vitesse de marche. */
/* ⚠️ LES DEUX GRANDES TRAVERSÉES SONT EN linear, ET C'EST OBLIGATOIRE. Sur un
   palier de 31 s, l'ease-in-out du raccourci la faisait partir lentement,
   filer au milieu et ralentir à l'arrivée : ce n'est pas une marche, et
   surtout le fil dévidé, lui, s'allonge à vitesse constante, si bien qu'il
   COURAIT DEVANT ELLE de 58 px au milieu du pont (mesuré le 31/08). Les autres
   paliers gardent l'ease-in-out du raccourci : ils sont courts, ou ce sont des
   pauses où l'assouplissement ne se voit pas. */
@keyframes hw-arai-balade-pc{
  0%{offset-distance:0%}
  3%{offset-distance:4.7%}
  4.6%{offset-distance:6.3%} 8.1%{offset-distance:6.3%;animation-timing-function:linear}
  63.8%{offset-distance:50%} 70%{offset-distance:50%;animation-timing-function:linear}
  94.7%{offset-distance:93.7%} 96.9%{offset-distance:93.7%}
  97.9%{offset-distance:95.3%}
  100%{offset-distance:100%}}
/* La descente aussi ralentit sur la toile : elle y descendait à 69 px/s, ce
   qui n'est pas une marche. L'approche se fait à ~16 px/s ; la CHUTE au fil
   reste rapide (≈65 px/s), parce qu'une araignée qui se laisse tomber, ça
   tombe vraiment ; la remontée est intermédiaire. Le fil s'étire aux MÊMES
   pourcentages : les deux keyframes doivent bouger ensemble. */
@keyframes hw-arai-descente{
  0%{offset-distance:0%} 30.5%{offset-distance:41%} 33.8%{offset-distance:41%}
  44.6%{offset-distance:100%} 60%{offset-distance:100%}
  75.6%{offset-distance:41%} 100%{offset-distance:0%}}
@keyframes hw-fil-etire{
  0%,33.8%{transform:scaleY(0)}
  44.6%{transform:scaleY(1)} 60%{transform:scaleY(1)}
  75.6%,100%{transform:scaleY(0)}}
/* LA MARCHE, refaite sur les PATHS (la technique des ailes : transform-box
   fill-box sur le path, jamais sur le <g> — Safari), amplitude visible et
   paires alternées en diagonale (p1+p3 contre p2+p4), au ralenti au fil */
[data-fete="halloween"] .hw-arai-scene.hw-va .hw-patte path,
[data-fete="halloween"] .hw-arai-scene.hw-file .hw-patte path{
  transform-box:fill-box;animation:hw-pas-a .44s ease-in-out infinite alternate}
[data-fete="halloween"] .hw-arai-scene .hw-pg path{transform-origin:100% 40%}
[data-fete="halloween"] .hw-arai-scene .hw-pd path{transform-origin:0% 40%}
[data-fete="halloween"] .hw-arai-scene.hw-va .hw-p2 path,
[data-fete="halloween"] .hw-arai-scene.hw-va .hw-p4 path,
[data-fete="halloween"] .hw-arai-scene.hw-file .hw-p2 path,
[data-fete="halloween"] .hw-arai-scene.hw-file .hw-p4 path{animation-name:hw-pas-b}
[data-fete="halloween"] .hw-arai-scene.hw-file .hw-patte path{animation-duration:1s}
@keyframes hw-pas-a{from{transform:rotate(-12deg)}to{transform:rotate(10deg)}}
@keyframes hw-pas-b{from{transform:rotate(10deg)}to{transform:rotate(-12deg)}}
/* (Le keyframe hw-arai-trajet, trajet par translate d'avant offset-path, est
   retiré le 30/08 : plus rien ne l'appliquait depuis la v0.99.216, mais son NOM
   restait écouté par un animationend de halloween.js, qui ne se déclenchait donc
   jamais et laissait l'araignée bloquée après un seul passage.) */

/* Le GROUPE de citrouilles : une scène composée, pas un rang d'oignons
   (retour Vincent 29/08 : « bizarre, les 3 alignées »). La moyenne derrière
   à gauche, la grande au centre, la petite DEVANT et plus basse : les
   chevauchements sont francs, les rotations varient, et la nuit leurs halos
   fusionnent en un seul foyer. Positions absolues : le viewBox garde ~10 %
   de marge interne (halo), le flex + marges négatives ne suffisait pas. */
/* L'ARBRE MORT au bord gauche (le pendant des citrouilles de droite) :
   silhouette d'encre, trois lanternes suspendues — éteintes le jour,
   allumées et vacillantes la nuit. Masqué sur petit écran (trop étroit). */
[data-fete="halloween"] .hw-arbre{position:absolute;left:-18px;bottom:0;
  width:360px;height:auto;color:var(--hw-encre)}
/* le bois prend du volume (dégradé hwBois) ; les fils des lanternes gardent
   l'encre (currentColor) */
[data-fete="halloween"] .hw-arbre > g:first-child{fill:url(#hwBois)}
[data-theme="night"][data-fete="halloween"] .hw-arbre{
  filter:drop-shadow(0 0 4px rgba(190,215,255,.24))}
/* Une lanterne ÉTEINTE est une silhouette comme le reste de l'arbre. Le kaki
   #8a6a3a d'avant n'était ni éteint ni allumé : trois perles brunes sales à
   côté de boules d'encre nettes, sur le même arbre. */
[data-fete="halloween"] .hw-lant{fill:currentColor;opacity:.85}
[data-theme="night"][data-fete="halloween"] .hw-lant{fill:url(#hwLant);opacity:1;
  filter:drop-shadow(0 0 4px rgba(255,190,90,.8))}
[data-theme="night"][data-fete="halloween"] .hw-arbre-lants{
  animation:hw-vaciller 2.8s ease-in-out infinite alternate}

/* LA SCÈNE, RECOMPOSÉE EN TROIS PLANS le 30/08 (revue à cinq regards ;
   Vincent : « suis les experts »). Le défaut d'origine : tout était posé sur
   UNE seule ligne de sol, dans UNE seule encre, si bien que l'œil mettait le
   manoir et les citrouilles à la même distance et lisait des citrouilles de
   six mètres. Les indices se contredisaient même : la grande citrouille
   RECOUVRAIT le manoir (donc devant) en ayant sa base PLUS HAUTE (donc
   derrière). On ne rapetisse pas les citrouilles (le dessin est validé, et à
   l'échelle vraie elles feraient 8 px) : c'est LE MONDE QUI RECULE.
   L'échelle des bases, du plus loin au plus près, et l'ordre du DOM avec :
     manoir +38  ·  palissade et croix +14  ·  citx +12 et +6  ·  arbre 0
     ·  citrouille moyenne -14  ·  grande citrouille -30 (elle DÉBORDE). */
[data-fete="halloween"] .hw-manoir-svg{position:absolute;right:36px;bottom:38px;
  width:165px;height:auto;color:var(--hw-encre-loin);overflow:visible}
[data-theme="night"][data-fete="halloween"] .hw-manoir{
  filter:drop-shadow(0 0 5px rgba(120,140,220,.18))}
/* LE CHÂTEAU (refonte du 02/10/2026) : ses couches, du fond vers l'avant, sont
   décrites dans outils/halloween_chateau.py, qui l'écrit dans base.html. La lumière
   vient d'en haut à droite (la lune) : ombre à gauche des tours, filet clair à droite,
   moitié droite des toits éclairée. */
[data-fete="halloween"] .hw-ch-murs{fill:url(#hwPierre)}
[data-fete="halloween"] .hw-ch-ombres{fill:var(--hw-ch-ombre)}
[data-fete="halloween"] .hw-ch-lums{fill:var(--hw-ch-lum)}
[data-fete="halloween"] .hw-ch-toits{fill:var(--hw-toit)}
[data-fete="halloween"] .hw-ch-toits-lum{fill:var(--hw-toit-lum);opacity:.55}
[data-fete="halloween"] .hw-ch-encre{fill:var(--hw-ch-encre);stroke:var(--hw-ch-encre)}
[data-fete="halloween"] .hw-ch-traits{fill:none;stroke:var(--hw-ch-trait);stroke-width:.9;stroke-linecap:round}
[data-fete="halloween"] .hw-ch-herse{fill:none;stroke:var(--hw-ch-encre);stroke-width:1.1;opacity:.85}
[data-fete="halloween"] .hw-ch-chauves{fill:var(--hw-chauve)}
/* trois fenêtres restent éteintes la nuit : un château habité, pas un phare */
[data-fete="halloween"] .hw-ch-fen-off{fill:var(--hw-fen-jour);opacity:.55}
[data-theme="night"][data-fete="halloween"] .hw-ch-fen-off{fill:#0a0f1e;opacity:.8}
/* Les fenêtres du jour étaient en kaki #8a6a3a : ni éteintes ni allumées, des
   taches de boue, et la SEULE couleur du manoir, donc l'œil y allait tout
   droit. Le mur ayant pâli avec le recul du plan lointain, une fenêtre éteinte
   se creuse maintenant en SOMBRE : un trou dans une façade claire.
   La nuit elles s'allument et vacillent, inchangé. */
[data-fete="halloween"] .hw-fen{fill:var(--hw-fen-jour);opacity:.55}
/* La porte, même logique que les fenêtres éteintes : un creux, jamais un
   objet posé devant la façade. ⚠️ Pas de currentColor ici : la porte se peint
   PAR-DESSUS le mur, qui est déjà currentColor, elle disparaîtrait. */
[data-fete="halloween"] .hw-porte{fill:var(--hw-fen-jour);opacity:.6}
[data-theme="night"][data-fete="halloween"] .hw-porte{fill:#0a0f1e;opacity:.9}
[data-theme="night"][data-fete="halloween"] .hw-fen{fill:url(#hwLant);opacity:1;
  filter:drop-shadow(0 0 3.5px rgba(255,190,90,.7));
  animation:hw-vaciller 5.6s ease-in-out infinite alternate}
/* Les os étaient à 1,45:1 le jour : des traînées grises lues comme de la
   saleté au sol. Ramenés dans l'encre du plan où ils sont posés. */
[data-fete="halloween"] .hw-os{fill:var(--hw-encre-loin);opacity:.75}
[data-theme="night"][data-fete="halloween"] .hw-os{fill:#c9c2b4;opacity:.42}
[data-fete="halloween"] .hw-socle{color:var(--hw-encre-loin)}

/* ---------- LE CHAT NOIR (demande Vincent 01/09) ----------
   Assis dans la scène, à demeure, sur le plan des citrouilles éparses
   (bottom 8, entre leurs 12 et leurs 6). Encre du plan PROCHE, comme l'arbre :
   au loin il se confondrait avec la palissade.
   Taille calée sur son voisinage plutôt que sur une échelle vraie, comme tout
   le reste de cette scène (les citrouilles y sont volontairement géantes) :
   80 px de haut contre 47 pour la petite citrouille d'à côté, soit une fois et
   demie, le rapport qu'on attend entre un chat assis et une citrouille.
   ⚠️ 61 px de large a été CHOISI SUR PLANCHE le 01/09 : le premier essai à
   47 px était « un peu trop petit », et une planche des trois tailles dans la
   scène a tranché. Le téléphone suit le même rapport, pas une valeur ronde.
   Il ne se déplace pas : il cligne des yeux et sa queue balaie. C'est assez
   pour qu'il soit vivant, et ça ne dispute rien à l'araignée ni à l'orage.
   ⚠️ Les portes de sortie sont déjà là : fond sobre efface .hw-decor entier,
   et « arrêter les animations » coupe tout par la règle globale de site.css.
   Rien de spécifique à écrire ici. */
/* ⚠️ IL NE PREND PAS L'ENCRE DE SON PLAN, et c'est délibéré. Avec
   var(--hw-encre) il sortait bleu lavande : un chat, oui, NOIR, non, alors que
   c'est tout le sujet. Il prend donc les encres de l'ARAIGNÉE, qui est le
   précédent validé d'une bête noire dans ce décor. La nuit il devient plus
   sombre que le ciel : il se lit en creux, comme un vrai chat noir, et ce sont
   ses yeux qui portent sa présence. */
/* (02/10/2026) Il quitte le milieu de l'écran, où il s'asseyait sur les titres
   (« Que veux-tu faire aujourd'hui ? »), pour le groupe du manoir et des
   citrouilles. Sa couleur passe en jeton : aubergine presque noire le jour,
   pour aller avec la prune du décor. */
[data-fete="halloween"] .hw-chat{position:absolute;right:clamp(330px,27.5vw,410px);bottom:12px;
  width:61px;height:auto;color:var(--hw-chat);overflow:visible}
[data-fete="halloween"] .hw-chat-corps{fill:currentColor}
/* ⚠️ fill:none, et JAMAIS un fill hérité d'un sélecteur de thème plus précis :
   cette spirale remplie donne un haricot, pas une queue (vu au banc). */
[data-fete="halloween"] .hw-chat-queue{fill:none;stroke:currentColor;
  stroke-width:8.5;stroke-linecap:round;stroke-linejoin:round;
  transform-origin:56px 150px;
  animation:hw-chat-queue 4.6s ease-in-out infinite alternate}
/* Deux entailles claires suffisent à détacher les pattes avant de la masse :
   à cette taille, un vrai découpage ne se lirait pas. */
[data-fete="halloween"] .hw-chat-pattes path{fill:none;stroke:var(--hw-encre-loin);
  stroke-width:1.6;opacity:.45;stroke-linecap:round}
[data-fete="halloween"] .hw-chat-oreille{fill:var(--hw-encre-loin);opacity:.55}
[data-fete="halloween"] .hw-chat-oeil{fill:#f0b429}
[data-fete="halloween"] .hw-chat-pupille{fill:#141a2e}
[data-fete="halloween"] .hw-chat-nez{fill:var(--hw-encre-loin);opacity:.8}
[data-fete="halloween"] .hw-chat-vibrisses path{fill:none;stroke:var(--hw-encre-loin);
  stroke-width:1.1;opacity:.6;stroke-linecap:round}
/* La nuit, ses yeux s'allument comme les fenêtres du manoir, et le halo est
   le même que celui des lanternes : c'est la seule source chaude du coin. */
[data-theme="night"][data-fete="halloween"] .hw-chat-oeil{fill:#ffc93c;
  filter:drop-shadow(0 0 4px rgba(255,190,90,.9))}
[data-theme="night"][data-fete="halloween"] .hw-chat-pupille{fill:#0a0d18}
/* LE CLIGNEMENT. Deux clignements par cycle de 11 s, à des instants
   irréguliers : une cadence ronde se lit comme un métronome, pas comme une
   bête. La paupière est un écrasement vertical du groupe des yeux autour de
   leur ligne médiane (77 48), la même technique que le fil de soie. */
@keyframes hw-chat-cligne{
  0%,31%{transform:scaleY(1)}
  32.2%{transform:scaleY(.08)}
  33.4%,72%{transform:scaleY(1)}
  73.1%{transform:scaleY(.08)}
  74.2%,100%{transform:scaleY(1)}}
[data-fete="halloween"] .hw-chat-yeux{transform-origin:77px 48px;
  animation:hw-chat-cligne 11s linear infinite}
/* LA QUEUE BALAIE, autour de son attache à la hanche (56 150). Six degrés
   suffisent : la boucle est à ~48 unités du pivot, elle parcourt donc 5 px. */
@keyframes hw-chat-queue{
  from{transform:rotate(-2deg)} to{transform:rotate(4deg)}}

/* LA PALISSADE. Les cinq relecteurs l'ont relevée, avec cinq mots différents :
   bordure de pelouse, rampe de balcon, porte-vélos, barrière de chantier,
   enclos à tondeuse. Trois causes, toutes corrigées ici :
     1. la traverse haute était posée PILE sur les pointes et les avalait
        (traverses descendues à 22 et 12 px du sol : les pointes dégagent
        maintenant de 6 à 13 px) ;
     2. le bloc réservait 56 px de hauteur et n'en peignait que 24
        (35 px peints désormais, piquets épaissis de 3,4 à 4,8) ;
     3. quatre piquets répétés tous les 132 px ne font pas une clôture, qui se
        lit à la RÉPÉTITION : motif porté à 264 px et 8 piquets, tous de
        hauteur et d'inclinaison différentes.
   ⚠️ Un var() n'est JAMAIS résolu à l'intérieur d'une url() : le motif sert
   donc de MASQUE et la couleur vient du background, ce qui lui rend le jeton
   de thème. Le @supports évite le pire des ratés (un bandeau plein écran si
   le masque n'était pas compris quelque part). */
/* opacity .72 : la clôture court sur plus de 1100 px, elle ne doit pas être
   l'objet le plus contrasté du bas de page. Elle donne la ligne d'horizon,
   elle ne la crie pas. */
[data-fete="halloween"] .hw-palissade{position:absolute;bottom:14px;
  left:0;right:150px;height:56px;opacity:.72}
@supports ((-webkit-mask-image:url("")) or (mask-image:url(""))){
  [data-fete="halloween"] .hw-palissade{
    /* Les deux BOUTS S'ÉVANOUISSENT. Une clôture qui traverse tout l'écran
       d'un bord à l'autre se lit comme une frise de papier peint, et celle
       d'avant s'arrêtait en plus net dans le vide, à 141 px du manoir. Le
       dégradé vit dans le FOND (le motif, lui, est le masque) : pas besoin
       de composer deux masques, ce qui évite un mécanisme fragile. */
    /* (02/10/2026) Elle s'efface aussi AU CENTRE : elle passait sous tous les
       titres. Il en reste deux tronçons, au pied de l'arbre et devant le
       manoir : les deux coulisses du décor, le milieu laissé au texte. */
    background:linear-gradient(90deg,transparent 0,var(--hw-encre) 5%,var(--hw-encre) 17%,
      transparent 30%,transparent 58%,var(--hw-encre) 72%,var(--hw-encre) 100%);
    -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http:%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width='264'%20height='56'%20viewBox='0%200%20264%2056'%3E%3Cg%20fill='%23000'%3E%3Cpath%20transform='translate(12%2056)%20rotate(2.0)'%20d='M-2.4%200%20L-2.4%20-28%20L0%20-33%20L2.4%20-28%20L2.4%200%20Z'%2F%3E%3Cpath%20transform='translate(42%2056)%20rotate(-3.0)'%20d='M-2.4%200%20L-2.4%20-24%20L0%20-29%20L2.4%20-24%20L2.4%200%20Z'%2F%3E%3Cpath%20transform='translate(70%2056)%20rotate(1.0)'%20d='M-2.4%200%20L-2.4%20-30%20L0%20-35%20L2.4%20-30%20L2.4%200%20Z'%2F%3E%3Cpath%20transform='translate(98%2056)%20rotate(4.0)'%20d='M-2.4%200%20L-2.4%20-26%20L0%20-31%20L2.4%20-26%20L2.4%200%20Z'%2F%3E%3Cpath%20transform='translate(130%2056)%20rotate(-2.0)'%20d='M-2.4%200%20L-2.4%20-29%20L0%20-34%20L2.4%20-29%20L2.4%200%20Z'%2F%3E%3Cpath%20transform='translate(162%2056)%20rotate(3.0)'%20d='M-2.4%200%20L-2.4%20-23%20L0%20-28%20L2.4%20-23%20L2.4%200%20Z'%2F%3E%3Cpath%20transform='translate(196%2056)%20rotate(-4.0)'%20d='M-2.4%200%20L-2.4%20-27%20L0%20-32%20L2.4%20-27%20L2.4%200%20Z'%2F%3E%3Cpath%20transform='translate(232%2056)%20rotate(1.5)'%20d='M-2.4%200%20L-2.4%20-25%20L0%20-30%20L2.4%20-25%20L2.4%200%20Z'%2F%3E%3Crect%20x='-2'%20y='34'%20width='268'%20height='2.6'%20rx='1.3'%2F%3E%3Crect%20x='-2'%20y='44'%20width='268'%20height='2.2'%20rx='1.1'%20opacity='.9'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") bottom left/auto 56px repeat-x;
    mask:url("data:image/svg+xml,%3Csvg%20xmlns='http:%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width='264'%20height='56'%20viewBox='0%200%20264%2056'%3E%3Cg%20fill='%23000'%3E%3Cpath%20transform='translate(12%2056)%20rotate(2.0)'%20d='M-2.4%200%20L-2.4%20-28%20L0%20-33%20L2.4%20-28%20L2.4%200%20Z'%2F%3E%3Cpath%20transform='translate(42%2056)%20rotate(-3.0)'%20d='M-2.4%200%20L-2.4%20-24%20L0%20-29%20L2.4%20-24%20L2.4%200%20Z'%2F%3E%3Cpath%20transform='translate(70%2056)%20rotate(1.0)'%20d='M-2.4%200%20L-2.4%20-30%20L0%20-35%20L2.4%20-30%20L2.4%200%20Z'%2F%3E%3Cpath%20transform='translate(98%2056)%20rotate(4.0)'%20d='M-2.4%200%20L-2.4%20-26%20L0%20-31%20L2.4%20-26%20L2.4%200%20Z'%2F%3E%3Cpath%20transform='translate(130%2056)%20rotate(-2.0)'%20d='M-2.4%200%20L-2.4%20-29%20L0%20-34%20L2.4%20-29%20L2.4%200%20Z'%2F%3E%3Cpath%20transform='translate(162%2056)%20rotate(3.0)'%20d='M-2.4%200%20L-2.4%20-23%20L0%20-28%20L2.4%20-23%20L2.4%200%20Z'%2F%3E%3Cpath%20transform='translate(196%2056)%20rotate(-4.0)'%20d='M-2.4%200%20L-2.4%20-27%20L0%20-32%20L2.4%20-27%20L2.4%200%20Z'%2F%3E%3Cpath%20transform='translate(232%2056)%20rotate(1.5)'%20d='M-2.4%200%20L-2.4%20-25%20L0%20-30%20L2.4%20-25%20L2.4%200%20Z'%2F%3E%3Crect%20x='-2'%20y='34'%20width='268'%20height='2.6'%20rx='1.3'%2F%3E%3Crect%20x='-2'%20y='44'%20width='268'%20height='2.2'%20rx='1.1'%20opacity='.9'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") bottom left/auto 56px repeat-x}
}
/* Même plan que la palissade, donc même poids : à pleine opacité la croix
   pesait deux fois sa voisine et sautait aux yeux. */
[data-fete="halloween"] .hw-croix{position:absolute;bottom:14px;
  width:22px;height:34px;color:var(--hw-encre);opacity:.72}
[data-fete="halloween"] .hw-croix1{left:clamp(110px,10vw,150px)}
[data-fete="halloween"] .hw-croix2{right:clamp(470px,37vw,560px)}
/* Le plan intermédiaire : plus petites ET plus hautes que celles de devant,
   c'est ce couple qui les envoie derrière. Elles tiennent aussi le centre de
   l'image, où la revue mesurait un trou (6,5 % de l'encre pour 48 % de la
   largeur, entre l'arbre et le manoir). */
[data-fete="halloween"] .hw-citx{position:absolute}
[data-fete="halloween"] .hw-citx1{width:52px;right:clamp(410px,33vw,500px);bottom:10px;transform:rotate(2deg)}
[data-fete="halloween"] .hw-citx2{width:36px;left:clamp(150px,13vw,200px);bottom:10px;transform:rotate(-4deg)}
/* LE PREMIER PLAN. Le dessin ne bouge pas d'un trait, seule la place change.
   Elles débordent par le bas de la fenêtre : un objet coupé par le cadre est
   un objet proche, et c'est très exactement ce qui les autorise à être plus
   grandes que le manoir sans que l'œil proteste. */
[data-fete="halloween"] .hw-citg{position:absolute}
[data-fete="halloween"] .hw-citg-grande{width:150px;right:196px;bottom:-30px}
[data-fete="halloween"] .hw-citg-moyenne{width:104px;right:88px;bottom:-14px;
  transform:rotate(3deg)}
/* Les décorations suspendues de l'arbre : encre le jour, dorées la nuit. */
[data-fete="halloween"] .hw-deco-etoile,
[data-fete="halloween"] .hw-deco-boule{fill:var(--hw-encre)}
[data-theme="night"][data-fete="halloween"] .hw-deco-etoile{fill:#e0b34a;
  filter:drop-shadow(0 0 3px rgba(255,200,90,.55))}
[data-theme="night"][data-fete="halloween"] .hw-deco-boule{fill:#b85a15;
  filter:drop-shadow(0 0 3px rgba(255,160,70,.5))}
/* La brume du sol : deux nappes qui dérivent très lentement (le mode calme
   et reduced-motion les figent d'office, règles globales de site.css). */
[data-fete="halloween"] .hw-brume{position:absolute;left:0;right:0;bottom:-6px;
  height:90px;pointer-events:none;opacity:.42;
  background:
    radial-gradient(46% 90% at 22% 100%,rgba(185,205,250,.11),rgba(185,205,250,0) 74%),
    radial-gradient(56% 100% at 58% 100%,rgba(185,205,250,.10),rgba(185,205,250,0) 76%),
    radial-gradient(40% 84% at 88% 100%,rgba(185,205,250,.10),rgba(185,205,250,0) 72%);
  filter:blur(7px);animation:hw-brume-derive 53s ease-in-out infinite alternate}
[data-fete="halloween"] .hw-brume.hw-b2{height:56px;filter:blur(5px);opacity:.25;
  animation-duration:37s;animation-direction:alternate-reverse}
[data-theme="night"][data-fete="halloween"] .hw-brume{opacity:1}
[data-theme="night"][data-fete="halloween"] .hw-brume.hw-b2{opacity:.6}
@keyframes hw-brume-derive{
  from{transform:translateX(-26px)}to{transform:translateX(26px)}}
/* grand écran : la scène respire à l'échelle de la page */
/* Au-dessus de 880 px, la scène grandit EN CONTINU. Avant, deux paliers en
   marches d'escalier (880 puis 1200) faisaient sauter le décor : en passant
   de 880 à 881 px la scène gagnait 60 % de largeur pendant que la palissade
   en perdait 58 %, et à 1200 tout ressautait. Un seul bloc en clamp() : le
   rendu de 1440 déjà validé est retrouvé aux bornes hautes, et le trou de
   881-1199 disparaît. Les citrouilles gardent leur avance sur le manoir à
   TOUTE largeur (elles le chevauchent de 20 à 47 px) : c'est ce chevauchement
   qui dit « devant », et il ne doit jamais se défaire au redimensionnement. */
/* (02/10/2026) Le tableau final ne sert qu'au téléphone, la lueur d'horizon
   qu'au grand écran : cachés par défaut, chacun s'allume dans son bloc. */
[data-fete="halloween"] .hw-tableau,
[data-fete="halloween"] .hw-fantome,
[data-fete="halloween"] .hw-lueur-coin,
[data-fete="halloween"] .hw-lueur-bas{display:none}
@media (min-width:881px){
  /* (02/10/2026) L'arbre recule dans le bord gauche : ses branches passaient
     sous les boutons et les chiffres de l'accueil. */
  [data-fete="halloween"] .hw-arbre{width:clamp(240px,21vw,320px);left:-58px}
  /* (02/10/2026) le château, plus élancé que le manoir, grandit pour garder sa présence */
  [data-fete="halloween"] .hw-manoir-svg{
    right:clamp(20px,3vw,43px);width:clamp(180px,16vw,236px)}
  [data-fete="halloween"] .hw-palissade{right:clamp(120px,12vw,172px)}
  [data-fete="halloween"] .hw-citg-grande{
    width:clamp(140px,11.7vw,168px);right:clamp(150px,13.2vw,190px)}
  [data-fete="halloween"] .hw-citg-moyenne{
    width:clamp(96px,8vw,116px);right:clamp(70px,6.5vw,93px)}
  [data-fete="halloween"] .hw-citx1{width:clamp(48px,4vw,58px)}
  [data-fete="halloween"] .hw-citx2{width:clamp(33px,2.8vw,40px)}
  /* la lueur d'horizon derrière le manoir, retenue : du texte passe devant */
  [data-fete="halloween"] .hw-lueur-coin{display:block;position:absolute;right:-80px;bottom:-60px;
    width:min(680px,48vw);height:440px;opacity:.75;
    background:radial-gradient(ellipse closest-side,var(--hw-lueur-c),var(--hw-lueur-m) 55%,transparent)}
}

/* LE FANTÔME DU CHÂTEAU (grand écran, 10/10/2026, idée de Vincent, avis d'un expert,
   « ok pour 1 et 2 ») : le fantôme peint du téléphone (fantome-halloween.webp), calé
   sur le château (mêmes clamp() que lui), ENTRE LES TOURS : dans le creux entre la flèche
   du donjon et la tour de droite (le milieu des deux flèches tombe à 39,4 % de la largeur
   du château, depuis la droite), assez bas pour que les tours passent devant lui (Vincent,
   sur le site de test : « descends-le un peu entre les tours » ; il flottait au-dessus de
   la flèche du donjon). Sa brume est derrière elles (base.html). La règle validée au
   téléphone : presque invisible au repos la nuit
   (.09), il surgit avec l'éclair (mêmes keyframes, sur l'élément lui-même) et flotte
   comme Cospi. Le jour, il n'y a pas d'orage : opacité 0, mais l'image est déjà là quand
   la nuit tombe. Il reste sous le banc de nuages de l'orage (44vh), qui noircit le haut
   de l'écran pendant la frappe : il y serait éteint au lieu d'être révélé.
   .hw-reveil (2,6 s, halloween.js) : la foudre tombe sur le château quand la nuit tombe,
   il se dresse ; translate et scale séparés, pour ne pas disputer le transform du
   flottement. Fond sobre : il part avec .hw-decor ; calme et mouvement réduit : figé, .2. */
[data-fete="halloween"] .hw-fantome-pc{display:none}
@media (min-width:881px){
  [data-fete="halloween"] .hw-fantome-pc{display:block;position:absolute;
    right:calc(clamp(20px,3vw,43px) + clamp(180px,16vw,236px) * .394 - clamp(130px,11vw,210px) / 2);
    bottom:calc(38px + clamp(180px,16vw,236px) * .46);
    width:clamp(130px,11vw,210px);aspect-ratio:600/656;opacity:0;pointer-events:none;
    background:url("../img/halloween/fantome-halloween.webp") center bottom/contain no-repeat;
    transition:translate .9s var(--ease),scale .9s var(--ease)}
  [data-theme="night"][data-fete="halloween"] .hw-fantome-pc{opacity:.09;
    animation:hw-fantome-flotte 7s ease-in-out infinite;will-change:transform}
  [data-theme="night"][data-fete="halloween"] .hw-fantome-pc.hw-tonne{
    animation:hw-fantome-flotte 7s ease-in-out infinite,hw-fantome-eclair 2.6s linear both}
  [data-theme="night"][data-fete="halloween"] .hw-fantome-pc.hw-tonne-doux{
    animation:hw-fantome-flotte 7s ease-in-out infinite,hw-fantome-doux 2.4s ease-in-out both}
  [data-theme="night"][data-fete="halloween"] .hw-fantome-pc.hw-reveil{translate:0 -22px;scale:1.14}
  :root.a11y-calme[data-theme="night"][data-fete="halloween"] .hw-fantome-pc{opacity:.2}
  @media (prefers-reduced-motion:reduce){
    [data-theme="night"][data-fete="halloween"] .hw-fantome-pc{opacity:.2}
  }
}

/* Les visages : le contrat du banc validé les montre jour ET nuit (la photo
   de référence est un plein jour) ; les halos au sol restent à la nuit. */
/* LE JOUR, UNE CITROUILLE N'EST PAS ALLUMÉE. Les visages restent montrés jour
   ET nuit (contrat du banc, la photo de référence est un plein jour), mais le
   traitement était resté nocturne : la découpe était remplie d'une lueur crème
   MESURÉE 26 % PLUS SOMBRE QUE LE CIEL qu'elle prétendait éclairer (1,32:1).
   Une source de lumière plus sombre que le ciel ne se lit pas comme une
   lumière : elle se lit comme une gommette jaune collée sur la citrouille.
   Sur une photo de plein jour, les découpes sont des TROUS SOMBRES. Et le
   vacillement s'arrête : trois citrouilles qui battent à l'unisson parfait en
   plein jour, sans bougie pour le justifier, se lisent comme un écran qui
   déconne (aucun animation-delay ne les décalait). */
[data-fete="halloween"] .hw-use-visage{display:inline;
  filter:brightness(.45) saturate(.85)}
[data-theme="night"][data-fete="halloween"] .hw-use-visage{
  filter:drop-shadow(0 0 6px rgba(255,196,100,.85));
  animation:hw-vaciller 4.2s linear infinite}
[data-fete="halloween"] .hw-use-halo{display:none}
[data-theme="night"][data-fete="halloween"] .hw-use-halo{display:inline}
[data-theme="night"][data-fete="halloween"] .hw-citg,
[data-theme="night"][data-fete="halloween"] .hw-citx{
  filter:drop-shadow(0 6px 16px rgba(255,150,50,.22))}
/* la flamme d'une vraie bougie ne bat pas la mesure : paliers irréguliers.
   Opacité seule (compositeur) ; « Arrêter les animations » et reduced-motion
   la figent d'office à pleine lueur (règles globales de site.css). */
@keyframes hw-vaciller{
  0%{opacity:.80} 7%{opacity:.96} 13%{opacity:.86} 24%{opacity:1}
  36%{opacity:.90} 45%{opacity:.99} 58%{opacity:.83} 70%{opacity:.97}
  83%{opacity:.89} 92%{opacity:.99} 100%{opacity:.80}}

/* ---------- 2 bis A. L'ORAGE LOINTAIN : l'éclair améthyste (nuit) ----------
   Trois couches (voile du ciel, banc de nuages en silhouette, éclair) et un
   timing d'orage réel : pré-lueur du traceur, propagation du trait (~110 ms),
   grand coup, rechute, arc en retour, scintillements. Photosensibilité : le
   voile plein écran ne compte que DEUX vrais coups en 1,6 s (loin des trois
   éclats par seconde) ; seuls les traits fins, surface minuscule, scintillent
   davantage. Calme et reduced-motion ne voient jamais rien (règles globales).
   Position, miroir et variante tirés au sort par halloween.js. */
[data-fete="halloween"] .hw-orage-voile{position:fixed;inset:0;opacity:0;pointer-events:none;
  background:
    radial-gradient(30% 22% at var(--orage-x,45%) 5%,rgba(214,196,255,.9),rgba(214,196,255,0) 70%),
    radial-gradient(130% 100% at var(--orage-x,45%) -8%,rgba(158,126,255,.62),rgba(122,92,242,.36) 40%,rgba(72,52,176,.16) 62%,transparent 80%)}
/* Le banc de nuages : masses sombres révélées par la lueur seulement, ourlet
   irrégulier, liseré violet léché par la lumière sous les ventres. */
[data-fete="halloween"] .hw-orage-nuages{position:fixed;top:0;left:0;right:0;height:44vh;
  opacity:0;pointer-events:none;
  background:
    radial-gradient(26% 30% at 10% 16%,rgba(8,6,20,.97) 44%,rgba(8,6,20,0) 70%),
    radial-gradient(20% 24% at 27% 26%,rgba(11,9,27,.95) 40%,rgba(11,9,27,0) 68%),
    radial-gradient(30% 34% at 44% 12%,rgba(9,7,23,.97) 46%,rgba(9,7,23,0) 72%),
    radial-gradient(16% 20% at 58% 30%,rgba(12,10,29,.93) 38%,rgba(12,10,29,0) 66%),
    radial-gradient(28% 32% at 74% 18%,rgba(8,6,20,.97) 44%,rgba(8,6,20,0) 70%),
    radial-gradient(18% 22% at 90% 28%,rgba(11,9,27,.94) 40%,rgba(11,9,27,0) 66%),
    radial-gradient(24% 26% at 99% 10%,rgba(9,7,23,.96) 42%,rgba(9,7,23,0) 68%),
    radial-gradient(30% 26% at 12% 28%,rgba(178,150,255,.22) 30%,rgba(178,150,255,0) 62%),
    radial-gradient(34% 28% at 46% 26%,rgba(178,150,255,.26) 30%,rgba(178,150,255,0) 62%),
    radial-gradient(30% 26% at 76% 30%,rgba(178,150,255,.20) 30%,rgba(178,150,255,0) 62%),
    linear-gradient(rgba(9,7,22,.97),rgba(9,7,22,.9) 30%,rgba(9,7,22,0) 62%)}
/* L'éclair : quatre épaisseurs par décharge (gaine ionisée floue, trait,
   cœur blanc, branches et radicelles). Une variante visible à la fois. */
[data-fete="halloween"] .hw-orage{position:fixed;top:0;left:22%;
  width:min(32vw,400px);height:min(80vh,800px);opacity:0;pointer-events:none}
[data-fete="halloween"] .hw-eclair{display:block;width:100%;height:100%;overflow:visible;
  filter:drop-shadow(0 0 5px #a99bff) drop-shadow(0 0 20px rgba(140,116,255,.8)) drop-shadow(0 0 60px rgba(120,90,240,.65))}
[data-fete="halloween"] .hw-ecl-v{visibility:hidden}
[data-fete="halloween"] .hw-orage[data-v="1"] .hw-ecl-v1,
[data-fete="halloween"] .hw-orage[data-v="2"] .hw-ecl-v2,
[data-fete="halloween"] .hw-orage[data-v="3"] .hw-ecl-v3{visibility:visible}
[data-fete="halloween"] .hw-eclair path{fill:none;stroke-linejoin:round;stroke-linecap:round}
[data-fete="halloween"] .hw-ecl-g{stroke:#8f7bff;stroke-width:6;opacity:.6;filter:blur(2px)}
[data-fete="halloween"] .hw-ecl-p{stroke:#e9e3ff;stroke-width:2.6}
[data-fete="halloween"] .hw-ecl-c{stroke:#fff;stroke-width:1.2}
[data-fete="halloween"] .hw-ecl-b{stroke:rgba(221,213,255,.85);stroke-width:1.4}
[data-fete="halloween"] .hw-ecl-r{stroke:rgba(203,192,255,.55);stroke-width:.8}
[data-theme="night"][data-fete="halloween"] .hw-orage.hw-tonne{
  animation:hw-eclair-flash 1.6s linear both}
[data-theme="night"][data-fete="halloween"] .hw-orage.hw-tonne .hw-ecl-g,
[data-theme="night"][data-fete="halloween"] .hw-orage.hw-tonne .hw-ecl-p,
[data-theme="night"][data-fete="halloween"] .hw-orage.hw-tonne .hw-ecl-c{
  animation:hw-ecl-trace 1.6s linear both}
[data-theme="night"][data-fete="halloween"] .hw-orage.hw-tonne .hw-ecl-b,
[data-theme="night"][data-fete="halloween"] .hw-orage.hw-tonne .hw-ecl-r{
  animation:hw-ecl-pop 1.6s linear both}
[data-theme="night"][data-fete="halloween"] .hw-orage-voile.hw-tonne{
  animation:hw-ciel-flash 1.6s linear both}
[data-theme="night"][data-fete="halloween"] .hw-orage-nuages.hw-tonne{
  animation:hw-nuages-flash 1.6s linear both}
[data-theme="night"][data-fete="halloween"] .hw-orage-voile.hw-tonne-doux{
  animation:hw-ciel-doux 2.4s ease-in-out both}
[data-theme="night"][data-fete="halloween"] .hw-orage-nuages.hw-tonne-doux{
  animation:hw-nuages-doux 2.4s ease-in-out both}
/* Le trait descend en ~110 ms, comme une décharge (--ecl-l : longueur réelle
   du tracé, mesurée par halloween.js au chargement). */
@keyframes hw-ecl-trace{
  0%,6%{stroke-dashoffset:var(--ecl-l,0)}
  13%,100%{stroke-dashoffset:0}}
/* Les branches claquent juste derrière le front de descente. */
@keyframes hw-ecl-pop{
  0%,9%{opacity:0}
  11%,100%{opacity:1}}
@keyframes hw-eclair-flash{
  0%,5.5%{opacity:0}
  6%,16%{opacity:1}
  22%{opacity:.22}
  28%{opacity:.95} 33%{opacity:.85}
  40%{opacity:.18}
  46%{opacity:.5}
  56%{opacity:.1}
  63%{opacity:.22}
  74%,100%{opacity:0}}
@keyframes hw-ciel-flash{
  0%{opacity:0}
  3%{opacity:.18} 5.5%{opacity:.08}
  8%{opacity:.95} 17%{opacity:.65}
  24%{opacity:.14}
  30%{opacity:.75}
  42%{opacity:.16}
  52%{opacity:.06}
  64%,100%{opacity:0}}
@keyframes hw-nuages-flash{
  0%{opacity:0}
  3%{opacity:.25} 5.5%{opacity:.12}
  8%{opacity:.95} 17%{opacity:.72}
  24%{opacity:.2}
  30%{opacity:.8}
  42%{opacity:.2}
  52%{opacity:.08}
  64%,100%{opacity:0}}
/* Le fantôme dans l'éclair (02/10/2026) : calé sur hw-ciel-flash (1,6 s), dont les deux
   éclats tombent à 8 % et 30 %, soit 4,9 % et 18,5 % des 2,6 s de la frappe. Il
   retourne à .09, sa valeur de repos, à 42 % (1,1 s), quand le ciel s'éteint lui aussi :
   il traînait jusqu'à 2,6 s (Vincent : « il met trop de temps à disparaître après
   l'orage »). Même chose pour l'éclair doux, éteint avec le ciel (hw-ciel-doux). */
@keyframes hw-fantome-flotte{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-10px,0)}}
@keyframes hw-fantome-eclair{
  0%{opacity:.09}
  4.9%{opacity:1} 10.5%{opacity:.8}
  14.8%{opacity:.42}
  18.5%{opacity:1} 24%{opacity:.7}
  33%{opacity:.28}
  42%,100%{opacity:.09}}
@keyframes hw-fantome-doux{
  0%{opacity:.09} 12%{opacity:.25} 22%{opacity:.45} 34%{opacity:.25}
  46%{opacity:.4} 60%{opacity:.15} 70%,100%{opacity:.09}}
/* L'éclair intra-nuages (1 frappe sur 3) : pas de trait, la masse qui
   palpite doucement, comme un orage de chaleur. */
@keyframes hw-ciel-doux{
  0%{opacity:0} 12%{opacity:.2} 22%{opacity:.5} 34%{opacity:.22}
  46%{opacity:.42} 62%{opacity:.14} 80%,100%{opacity:0}}
@keyframes hw-nuages-doux{
  0%{opacity:0} 12%{opacity:.35} 22%{opacity:.85} 34%{opacity:.4}
  46%{opacity:.72} 62%{opacity:.22} 80%,100%{opacity:0}}

/* ---------- 2 bis. LA SORCIÈRE AU LOIN : la merveille rare de la nuit ---------- */
/* Silhouette d'encre qui glisse vers le clair de lune (haut droite), tirée au
   sort par halloween.js. Nuit seulement : le jour garde ses oiseaux. Le léger
   liseré lunaire la détache du ciel sans la crier. Transform/opacité, une
   traversée par tirage (both + retrait de classe à animationend). */
/* Taille : montée de moitié le 30/08 (« augmente la taille de la sorcière »),
   puis reprise de 13 % dans la foulée (« réduis-la un tout petit peu »).
   Trajet de la valeur : clamp(96,9vw,150) → clamp(140,13.5vw,215) →
   clamp(122,11.8vw,188). Seule la largeur de base bouge : les échelles tirées
   au sort ne changent pas, la différence entre un passage proche et un
   passage lointain est conservée. Elle mesure donc 153 à 204 px sur un écran
   de 1440 et 110 à 146 px au téléphone. */
[data-fete="halloween"] .hw-sorciere{position:absolute;left:-14vw;top:13vh;
  width:clamp(122px,11.8vw,188px);opacity:0;color:#0a0f1e;display:none;
  filter:drop-shadow(0 0 3px rgba(190,215,255,.22));
  will-change:transform,opacity}
[data-fete="halloween"] .hw-sorciere svg{display:block;width:100%;height:auto;overflow:visible}
/* La diagonale est TIRÉE AU SORT à chaque passage (motif des oiseaux,
   demande Vincent 30/08) : halloween.js pose l'altitude de départ (top),
   la dérive verticale --sw-dy, la durée --sw-duree et l'échelle
   --sw-echelle ; les keyframes lisent les variables (motif --fam-* de
   site.css). Le keyframe n'anime que transform/opacity : le top inline
   posé par le JS n'est jamais disputé. */
[data-theme="night"][data-fete="halloween"] .hw-sorciere.hw-vol{display:block;
  animation:hw-traversee var(--sw-duree,17s) linear 1 both}
/* ⚠️ Un vol ONDULANT a été construit puis RETIRÉ le 30/08, à la demande de
   Vincent : « tout compte fait ne donne pas de mouvement, reviens à l'ancienne
   animation ». La traversée reste donc une diagonale nette, dont seuls
   l'altitude, la pente, la taille et la durée sont tirés au sort. Si l'envie
   revient, le travail est dans le commit v0.99.231 : neuf points de passage,
   une houle --sw-onde superposée à la dérive, et surtout l'assiette animée
   SÉPARÉMENT (propriétés individuelles translate et rotate) pour que les
   extrêmes d'inclinaison tombent au milieu des segments — c'était le point
   dur, et c'est mesuré. */
@keyframes hw-traversee{
  0%{opacity:0;transform:translate3d(0,3vh,0) rotate(2deg) scale(var(--sw-echelle,1))}
  8%{opacity:.85}
  30%{transform:translate3d(34vw,calc(var(--sw-dy,-11vh)*.28),0) rotate(-1deg) scale(var(--sw-echelle,1))}
  55%{transform:translate3d(66vw,calc(var(--sw-dy,-11vh)*.6),0) rotate(-2.5deg) scale(var(--sw-echelle,1))}
  80%{transform:translate3d(96vw,calc(var(--sw-dy,-11vh)*.85),0) rotate(-1deg) scale(var(--sw-echelle,1))}
  92%{opacity:.85}
  100%{opacity:0;transform:translate3d(122vw,var(--sw-dy,-11vh),0) rotate(0) scale(var(--sw-echelle,1))}}

/* ---------- 2 ter. LES RAFALES DE FEUILLES : le pendant JOUR de l'escadrille ----------
   Créées par halloween.js en bourrasques éphémères (le conteneur .hw-feuilles
   se retire seul après 14 s). Chute sur <i> (translate), tournoiement sur le
   SVG enfant (rotate + scaleX qui pince : le retournement 3D d'une feuille) :
   deux éléments, deux animations, aucun transform disputé. */
[data-fete="halloween"] .hw-feuilles{position:absolute;inset:0;overflow:hidden}
[data-fete="halloween"] .hw-feuille{position:absolute;display:block;opacity:0;
  will-change:transform,opacity;
  animation:hw-feuille-chute both;animation-timing-function:cubic-bezier(.3,.15,.7,.85)}
[data-fete="halloween"] .hw-feuille svg{display:block;width:100%;height:100%;
  animation:hw-feuille-tournoie linear infinite}
@keyframes hw-feuille-chute{
  0%{opacity:0;transform:translate3d(0,0,0)}
  6%{opacity:.85}
  88%{opacity:.85}
  100%{opacity:0;transform:translate3d(var(--fdx,40vw),var(--fdy,110vh),0)}}
/* SOULEVÉE DU SOL (13/10/2026, Vincent : « c'est des feuilles, ça peut partir du bas aussi ») :
   partie sous le bas de l'écran, elle monte vite en tourbillonnant (--fmonte, portée du côté
   du vent par --fdx), puis le vent la lâche : elle redescend un peu en s'effaçant. */
[data-fete="halloween"] .hw-feuille.hw-feuille-sol{animation-name:hw-feuille-souleve}
@keyframes hw-feuille-souleve{
  0%{opacity:0;transform:translate3d(0,0,0);animation-timing-function:cubic-bezier(.2,.6,.4,1)}
  7%{opacity:.85}
  50%{transform:translate3d(calc(var(--fdx,30vw) * .55),var(--fmonte,-55vh),0);
    animation-timing-function:cubic-bezier(.45,0,.75,.6)}
  88%{opacity:.85}
  100%{opacity:0;transform:translate3d(var(--fdx,30vw),calc(var(--fmonte,-55vh) + 24vh),0)}}
@keyframes hw-feuille-tournoie{
  0%{transform:rotate(0) scaleX(1)}
  25%{transform:rotate(180deg) scaleX(.45)}
  50%{transform:rotate(360deg) scaleX(1)}
  75%{transform:rotate(540deg) scaleX(.45)}
  100%{transform:rotate(720deg) scaleX(1)}}

/* ---------- 2 quater. LA CHASSE AUX CITROUILLES (19 → 31 octobre) ----------
   Un JEU avec un lot, pas du décor : les citrouilles cachées et la scène
   finale restent visibles en fond sobre (le tirage est ouvert à tous) ;
   seules leurs animations obéissent au mode calme (règles globales).
   Le .chx-spot est de hauteur nulle : la citrouille chevauche le bloc du
   dessus sans bouger le layout (position par variables --chx-r/--chx-l/--chx-t). */
[data-fete="halloween"] .chx-spot{position:relative;display:block;height:0;pointer-events:none}
[data-fete="halloween"] .chx-cit{position:absolute;pointer-events:auto;width:44px;height:40px;
  right:var(--chx-r,auto);left:var(--chx-l,auto);top:var(--chx-t,-24px);margin-top:-8px;
  padding:0;border:0;background:none;cursor:pointer;z-index:3;
  filter:drop-shadow(0 3px 5px rgba(10,6,2,.35));transition:transform .18s var(--ease)}
[data-fete="halloween"] .chx-cit:hover{transform:scale(1.14) rotate(-4deg)}
[data-fete="halloween"] .chx-cit:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:8px}
/* LE JOUR, L'ANNEAU PASSE AU TEAL PROFOND, EN 3 PX (02/10/2026, vérification avant
   prod) : le --teal du jour tombait à 2,2-2,4:1 contre le fond clair, sous le
   3:1 d'un indicateur de focus. Le teal profond y est à 3,8:1 et plus ; 3 px
   comme l'anneau global du site (site.css). La nuit ne change pas (5,5 à 9:1). */
:root:not([data-theme="night"])[data-fete="halloween"] :is(.chx-cit,.chx-messager):focus-visible{
  outline:3px solid var(--teal-deep)}
[data-fete="halloween"] .chx-cit svg{display:block;width:100%;height:100%;overflow:visible;
  transform-origin:50% 90%;animation:chx-frisson 7s ease-in-out infinite;
  animation-delay:calc(var(--chx-n,1) * -1.4s)}
/* (02/10/2026) le dessin du décor (_citrouille_dessin.html), un visage creusé le
   jour, allumé la nuit, et un frétillement toutes les 7 s, décalé d'une
   citrouille à l'autre (--chx-n) : de quoi attirer l'œil sans se dévoiler */
[data-fete="halloween"] .chx-cotes{stroke:#8f3c0c}
[data-fete="halloween"] .chx-ombre{fill:#4a2205}
[data-fete="halloween"] .chx-col{fill:#7a3d10}
[data-fete="halloween"] .chx-trou{fill:#5a2a0b;stroke:#3e1a04;stroke-width:1.6;stroke-linejoin:round}
[data-fete="halloween"] .chx-dent{fill:#7a3c12;stroke:#3e1a04;stroke-width:1.4;stroke-linejoin:round}
[data-fete="halloween"] .chx-braise{display:none}
[data-theme="night"][data-fete="halloween"] .chx-trou{fill:url(#chxLu);stroke:#6e2f08}
[data-theme="night"][data-fete="halloween"] .chx-dent{fill:#d96a24;stroke:#6e2f08}
[data-theme="night"][data-fete="halloween"] .chx-braise{display:inline}
[data-theme="night"][data-fete="halloween"] :is(.chx-cit,.chx-messager) svg{filter:drop-shadow(0 0 7px rgba(255,170,70,.6))}
/* la fantôme : ivoire, yeux ronds et bouche en O, elle flotte au lieu de frétiller */
[data-fete="halloween"] .chx-fantome{width:40px;height:36px;opacity:.94}
[data-fete="halloween"] .chx-fantome svg{animation:chx-flotte-f 3s ease-in-out infinite alternate}
[data-fete="halloween"] .chx-fantome .chx-cotes{stroke:#8a816b}
[data-fete="halloween"] .chx-fantome .chx-ombre{fill:#5b5442}
[data-fete="halloween"] .chx-fantome .chx-col{fill:#6f6a5a}
[data-fete="halloween"] .chx-fantome .chx-trou{fill:#3d3b4a;stroke:none}
[data-theme="night"][data-fete="halloween"] .chx-fantome .chx-trou{fill:url(#chxLu);stroke:none}
[data-theme="night"][data-fete="halloween"] .chx-fantome .chx-braise{opacity:.28}
[data-theme="night"][data-fete="halloween"] .chx-fantome svg{filter:drop-shadow(0 0 8px rgba(200,220,255,.65))}
/* LE JOUR, LA FANTÔME PREND UN LISERÉ (02/10/2026, vérification avant prod) :
   ivoire sur un fond bleu très pâle, elle tombait à 1,35:1, et la nuit à 11:1.
   Un fin contour sépia (le ton de ses côtes) et une ombre courte la détachent du
   fond, à pleine opacité ; elle reste blanche, donc fantôme. La nuit garde son halo. */
:root:not([data-theme="night"])[data-fete="halloween"] .chx-fantome{opacity:1}
:root:not([data-theme="night"])[data-fete="halloween"] .chx-fantome svg{
  filter:drop-shadow(0 0 .8px rgba(84,74,52,.9)) drop-shadow(0 1px 3px rgba(84,74,52,.35))}
@keyframes chx-frisson{0%,86%{transform:rotate(0)}89%{transform:rotate(-8deg)}92%{transform:rotate(7deg)}
  95%{transform:rotate(-4deg)}98%{transform:rotate(2deg)}100%{transform:rotate(0)}}
@keyframes chx-flotte-f{from{transform:translateY(0)}to{transform:translateY(-5px)}}
/* Le gris de la cueillie est posé sur le DESSIN et la coche, plus sur le bouton
   (02/10/2026, vérification avant prod) : un filtre sur le bouton éteignait aussi
   son anneau de focus, à 55 %. Même rendu, l'anneau reste plein. */
[data-fete="halloween"] .chx-cit.chx-cueillie{filter:none}
[data-fete="halloween"] .chx-cit.chx-cueillie > :is(svg,.chx-coche){filter:grayscale(.55) opacity(.55)}
[data-theme="night"][data-fete="halloween"] .chx-cit.chx-cueillie > svg{
  filter:drop-shadow(0 0 7px rgba(255,170,70,.6)) grayscale(.55) opacity(.55)}
[data-theme="night"][data-fete="halloween"] .chx-fantome.chx-cueillie > svg{
  filter:drop-shadow(0 0 8px rgba(200,220,255,.65)) grayscale(.55) opacity(.55)}
:root:not([data-theme="night"])[data-fete="halloween"] .chx-fantome.chx-cueillie > svg{
  filter:drop-shadow(0 0 .8px rgba(84,74,52,.9)) drop-shadow(0 1px 3px rgba(84,74,52,.35)) grayscale(.55) opacity(.55)}
[data-fete="halloween"] .chx-cit.chx-cueillie svg{animation:none}
[data-fete="halloween"] .chx-cit.chx-cueillie:hover{transform:none}
[data-fete="halloween"] .chx-coche{position:absolute;right:-6px;top:-7px;width:17px;height:17px;
  border-radius:50%;background:var(--green);color:#fff;font-size:11px;line-height:17px;
  text-align:center;font-weight:800;opacity:0;transform:scale(.4);transition:.25s}
[data-fete="halloween"] .chx-cueillie .chx-coche{opacity:1;transform:scale(1)}
/* LES CITROUILLES NE SORTENT QUE LA NUIT (10/10/2026, idée de Vincent : « le mode
   jour n'est pas aussi bien en Halloween ») : en mode jour, les cinq de la chasse
   dorment, cachées ; elles se montrent dès que le site passe en mode nuit, son
   réglage de départ. Le jour, la carte de la messagère le dit, et le petit message
   de l'espace (.chx-jour, plus bas), chacun avec un bouton pour passer en nuit.
   La nuit qui tombe SUR la page (halloween.js pose .chx-nuit-tombe le temps de
   l'animation) : la citrouille sort de terre et s'allume. En mouvement réduit et
   avec « Arrêter les animations », elle est là, tout simplement (règles globales).
   Le liseré de jour de la fantôme, plus haut, ne sert plus tant que cette règle tient. */
:root:not([data-theme="night"])[data-fete="halloween"] .chx-cit{display:none}
[data-theme="night"][data-fete="halloween"].chx-nuit-tombe .chx-cit{animation:chx-sort 1s var(--ease) both}
@keyframes chx-sort{
  0%{opacity:0;transform:translateY(16px) scale(.3);filter:drop-shadow(0 0 0 rgba(255,180,80,0))}
  55%{opacity:1;transform:translateY(-5px) scale(1.2);filter:drop-shadow(0 0 16px rgba(255,180,80,.95))}
  100%{opacity:1;transform:none;filter:drop-shadow(0 3px 5px rgba(10,6,2,.35))}}
/* LE BOUTON JOUR/NUIT, LE JOUR (10/10/2026, idée de Vincent : « est-ce qu'il ne faudrait
   pas mettre une citrouille à la place de la lune en mode jour pour la chasse ? ») : la
   lune cède sa place à une citrouille de la chasse (base.html) ; un clic fait tomber la
   nuit, et les citrouilles sortent. Elle frétille comme les autres, et la veilleuse du
   bouton passe à l'orangé. La nuit, le soleil revient comme d'habitude. */
[data-fete="halloween"] #theme-toggle .ic-citrouille{display:none}
:root:not([data-theme="night"])[data-fete="halloween"] #theme-toggle .ic-lune{display:none}
:root:not([data-theme="night"])[data-fete="halloween"] #theme-toggle .ic-citrouille{display:block;width:26px;height:24px}
[data-fete="halloween"] #theme-toggle .ic-citrouille svg{display:block;width:100%;height:100%;overflow:visible;
  transform-origin:50% 90%;animation:chx-frisson 7s ease-in-out infinite}
:root:not([data-theme="night"])[data-fete="halloween"] #theme-toggle{
  box-shadow:var(--shadow),0 0 10px rgba(255,150,50,.45),0 0 20px rgba(232,96,32,.20)}
:root:not([data-theme="night"])[data-fete="halloween"] #theme-toggle:is(:hover,:focus-visible){
  box-shadow:var(--shadow-hover),0 0 16px rgba(255,150,50,.75),0 0 32px rgba(232,96,32,.40)}
/* LE PETIT MESSAGE DU JOUR (10/10/2026) : connecté, en mode jour, chasse en cours,
   une fois par visite (halloween.js). Un morceau de nuit posé sur la page de jour,
   étoiles comprises, dans l'habit du toast du compteur et à sa place : en bas,
   au-dessus du bouton de sortie au téléphone, et au-dessus de la carte flottante
   d'une actu partout (--sortie-bas, posé par site.js, la compte). Fond OPAQUE : à
   95 %, la flèche d'une carte de l'accueil se lisait au travers. Sa citrouille
   dort ; quand la nuit tombe, le CSS de nuit l'allume comme les autres, le message
   le dit, puis s'en va.
   z-index 70 : au-dessus de la sortie (60), sous le panneau Confort (80-90), le
   grand moment (200), le toast du compteur (220) et les cartes du jeu (230). */
[data-fete="halloween"] .chx-jour{--chx-jour-bas:calc(var(--sortie-bas,0px) + 26px);
  position:fixed;left:0;right:0;bottom:var(--chx-jour-bas);z-index:70;
  margin:0 auto;width:min(440px,92vw);box-sizing:border-box;
  display:grid;grid-template-columns:46px 1fr;align-items:center;gap:12px;
  padding:16px 40px 16px 16px;border-radius:18px;
  background:
    radial-gradient(1.3px 1.3px at 12% 18%,rgba(255,255,255,.75),transparent),
    radial-gradient(1px 1px at 31% 82%,rgba(255,255,255,.55),transparent),
    radial-gradient(1.2px 1.2px at 58% 12%,rgba(255,240,200,.6),transparent),
    radial-gradient(1px 1px at 79% 70%,rgba(255,255,255,.45),transparent),
    radial-gradient(1.4px 1.4px at 93% 40%,rgba(255,255,255,.6),transparent),
    linear-gradient(165deg,#1b2446,#10162a 70%);
  color:#f0e8d8;border:1px solid rgba(255,194,102,.35);
  box-shadow:0 14px 38px rgba(0,0,0,.45);
  transform:translateY(calc(100% + var(--chx-jour-bas) + 14px));transition:transform .45s var(--ease)}
@media (max-width:640px){
  [data-fete="halloween"] .chx-jour{
    --chx-jour-bas:calc(var(--sortie-bas,0px) + max(16px,env(safe-area-inset-bottom)) + 56px)}
}
[data-fete="halloween"] .chx-jour[hidden]{display:none}
[data-fete="halloween"] .chx-jour.chx-on{transform:none}
[data-fete="halloween"] .chx-jour-cit{position:relative;width:46px;height:42px}
[data-fete="halloween"] .chx-jour-cit svg{display:block;width:100%;height:100%;overflow:visible}
[data-theme="night"][data-fete="halloween"] .chx-jour-cit svg{filter:drop-shadow(0 0 7px rgba(255,170,70,.6))}
/* les « z » du sommeil, au-dessus de la tige, montent et s'effacent sans jamais
   déborder sur le texte ; figés (animations coupées), ils restent lisibles */
[data-fete="halloween"] .chx-zz{position:absolute;font:800 13px/1 "Manrope",system-ui,sans-serif;font-style:normal;
  color:#ffd98a;opacity:.85;animation:chx-zz 2.8s ease-out infinite}
[data-fete="halloween"] .chx-zz:nth-of-type(1){left:28px;top:-8px}
[data-fete="halloween"] .chx-zz:nth-of-type(2){left:36px;top:-19px;font-size:10px;animation-delay:1.4s}
@keyframes chx-zz{0%{opacity:0;transform:translate(0,4px) scale(.7)}25%{opacity:.9}
  100%{opacity:0;transform:translate(5px,-10px) scale(1.1)}}
[data-theme="night"][data-fete="halloween"] .chx-zz{display:none}
[data-fete="halloween"] .chx-jour-txt b{display:block;font-family:"Manrope",system-ui,sans-serif;font-size:.95rem;margin-bottom:3px}
[data-fete="halloween"] .chx-jour-txt small{display:block;color:#c9c2b4;font-size:.86rem;line-height:1.4}
[data-fete="halloween"] .chx-jour-btn{grid-column:1 / -1;justify-self:stretch;margin:2px 0 0}
[data-theme="night"][data-fete="halloween"] .chx-jour-btn{display:none}
[data-fete="halloween"] .chx-jour .chx-fermer{color:#c9c2b4}
/* la carte de la messagère, le jour : l'encadré qui le dit, et « Passer en mode nuit »
   à la place de « Partir à la chasse », qui revient dès que la nuit tombe */
[data-fete="halloween"] .chx-fin p.chx-jour-carte{margin:0 0 16px;padding:10px 14px;border-radius:14px;
  background:rgba(255,166,61,.13);border:1px solid rgba(232,128,48,.42);color:var(--ink);
  font-weight:700;font-size:.9rem}
[data-theme="night"][data-fete="halloween"] .chx-jour-carte,
:root:not([data-theme="night"])[data-fete="halloween"] .chx-nuit-carte{display:none}
/* LA CITROUILLE MESSAGÈRE DE L'ACCUEIL (02/10/2026, idée de Vincent) : posée sur le
   bord des cartes, elle ouvre la carte du jeu. Elle ne compte pas dans les 5.
   z-index sur la tête de section : son .rv en fait un contexte d'empilement, sans
   lui la citrouille passait SOUS la carte « Je m'informe » (ordinateur). */
[data-fete="halloween"] #piliers .head{position:relative;z-index:5}
[data-fete="halloween"] .chx-messager{position:absolute;right:22px;bottom:var(--chx-msg-bas,-34px);
  width:52px;height:47px;padding:0;border:0;background:none;cursor:pointer;z-index:4;
  filter:drop-shadow(0 4px 6px rgba(10,6,2,.35));transition:transform .18s var(--ease)}
[data-fete="halloween"] .chx-messager:hover{transform:scale(1.1) rotate(-4deg)}
[data-fete="halloween"] .chx-messager:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:10px}
[data-fete="halloween"] .chx-messager svg{display:block;width:100%;height:100%;overflow:visible;
  transform-origin:50% 90%;animation:chx-frisson 7s ease-in-out infinite}
/* le « ? » : une pastille qui dit qu'on peut toucher */
[data-fete="halloween"] .chx-bulle-msg{position:absolute;right:-9px;top:-8px;width:21px;height:21px;
  border-radius:50%;background:var(--teal);color:#fff;font:800 13px/21px "Manrope",system-ui,sans-serif;
  text-align:center;box-shadow:0 3px 8px rgba(10,20,40,.3);animation:chx-pastille 2.4s ease-in-out infinite}
@keyframes chx-pastille{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
/* PAS DE CERCLE AUTOUR D'ELLE (02/10/2026) : la v0.99.386 lui avait donné un cercle
   teal et sa lueur, sur ordinateur, pour la détacher des grosses citrouilles du décor.
   Retiré à la demande de Vincent, après l'avoir vu sur le site de test (« tout compte
   fait enlève le cercle, c'est trop ») : la pastille « ? » suffit à la distinguer. */
/* la carte du jeu : l'habit de la carte de fin de chasse, plus la progression.
   .chx-accueil devant la jauge : la jauge du toast, plus bas dans le fichier, la
   recouvrait à précision égale (segments de 16 px, blancs, invisibles le jour) */
[data-fete="halloween"] .chx-progres{font-weight:800;color:var(--ink);margin:-6px 0 10px}
[data-fete="halloween"] .chx-accueil .chx-jauge-carte{justify-content:center;gap:6px;margin:0 0 20px}
[data-fete="halloween"] .chx-accueil .chx-jauge-carte i{width:32px;height:9px;border-radius:5px;background:rgba(127,150,200,.28)}
[data-fete="halloween"] .chx-accueil .chx-jauge-carte i.chx-ok{background:#ffa53d}
[data-fete="halloween"] .chx-lien{display:block;margin-top:12px;font-weight:700}
/* l'indice de la dernière citrouille (17/10/2026) : à 4 sur 5, la nuit, sous la jauge */
[data-fete="halloween"] .chx-fin p.chx-indice{margin:-6px 0 18px;padding:10px 14px;border-radius:14px;
  background:rgba(255,166,61,.13);border:1px dashed rgba(255,166,61,.7);color:var(--ink);font-size:.95rem;line-height:1.45}
[data-fete="halloween"] .chx-indice b{display:block;color:#ffa53d;font-family:"Manrope",system-ui,sans-serif;
  font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:2px}
[data-fete="halloween"] .chx-indice span{font-style:italic}
[data-fete="halloween"] .chx-indice[hidden]{display:none}

/* le toast du compteur (injecté par halloween.js)
   (02/10/2026, vérification avant prod) Centré par les marges et non plus par
   left:50% + translate(-50%) : sa largeur se calculait alors sur la place restant
   à DROITE du milieu, la moitié de l'écran. Au téléphone il faisait 195 px sur
   390, « Citrouille / trouvée ! » sur deux lignes et la phrase sur trois. Il prend
   maintenant la largeur de son texte, jusqu'à 92 % de l'écran. Caché, il descend
   de SA hauteur (+ 40 px) : il est créé vide au chargement (zone d'annonce), et
   un décalage fixe laissait dépasser un toast haut.
   Au téléphone (02/10/2026, relecture des planches avant prod), presque aussi large
   que l'écran, il passait pendant 3,4 s sur le bouton rond « ← » de sortie de page
   (.sortie, 44 px en bas à droite) : il se pose maintenant AU-DESSUS de ce bouton,
   même calcul que lui (--sortie-bas, encoche), plus 44 px de bouton et 12 d'écart.
   Sa largeur ne change pas : la plafonner l'aurait recoincé dans une moitié d'écran.
   Caché, il descend d'autant (--chx-toast-bas), sinon son haut dépasserait. */
[data-fete="halloween"] .chx-toast{--chx-toast-bas:26px;
  position:fixed;left:0;right:0;bottom:var(--chx-toast-bas);z-index:220;
  margin:0 auto;width:-webkit-fit-content;width:fit-content;
  transform:translateY(calc(100% + var(--chx-toast-bas) + 14px));display:flex;align-items:center;gap:12px;
  background:rgba(16,22,42,.94);color:#f0e8d8;border:1px solid rgba(255,194,102,.35);
  border-radius:16px;padding:12px 18px;max-width:92vw;box-sizing:border-box;
  box-shadow:0 12px 34px rgba(0,0,0,.45);transition:transform .35s var(--ease)}
@media (max-width:640px){
  [data-fete="halloween"] .chx-toast{
    --chx-toast-bas:calc(var(--sortie-bas,0px) + max(16px,env(safe-area-inset-bottom)) + 56px)}
}
[data-fete="halloween"] .chx-toast.chx-on{transform:none}
[data-fete="halloween"] .chx-toast .chx-emo{font-size:26px}
[data-fete="halloween"] .chx-toast b{font-family:"Manrope",system-ui,sans-serif}
[data-fete="halloween"] .chx-toast small{display:block;color:#c9c2b4;font-size:.82rem}
[data-fete="halloween"] .chx-jauge{display:flex;gap:4px;margin-top:5px}
[data-fete="halloween"] .chx-jauge i{width:16px;height:6px;border-radius:3px;background:rgba(255,255,255,.16)}
[data-fete="halloween"] .chx-jauge i.chx-ok{background:#ffc266}

/* la scène finale : Cospi sorcière et la magie de sa potion */
[data-fete="halloween"] .chx-voile{position:fixed;inset:0;z-index:230;background:rgba(5,7,15,.55);
  backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .3s}
[data-fete="halloween"] .chx-voile.chx-on{opacity:1;pointer-events:auto}
[data-fete="halloween"] .chx-fin{position:fixed;left:50%;top:50%;z-index:231;
  transform:translate(-50%,-46%) scale(.92);width:min(430px,92vw);
  background:var(--menu);border:1px solid rgba(255,194,102,.4);border-radius:26px;
  padding:34px 30px 26px;text-align:center;opacity:0;pointer-events:none;
  transition:opacity .35s var(--ease),transform .35s var(--ease)}
[data-fete="halloween"] .chx-fin.chx-on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
[data-fete="halloween"] .chx-fin h2{font-family:"Manrope",system-ui,sans-serif;margin:10px 0 8px;font-size:1.35rem;color:var(--ink)}
[data-fete="halloween"] .chx-fin p{color:var(--ink-soft);font-size:.95rem;margin:0 0 18px}
[data-fete="halloween"] .chx-note{display:block;margin-top:12px;font-size:.8rem;color:var(--ink-soft)}
[data-fete="halloween"] .chx-fermer{position:absolute;right:14px;top:10px;border:0;background:none;
  color:var(--ink-soft);font-size:20px;cursor:pointer}
/* le titre reçoit le focus quand la fenêtre n'a pas de bouton (halloween.js) :
   pas d'anneau sur un titre, il n'est pas cliquable */
[data-fete="halloween"] .chx-fin h2:focus{outline:none}
/* le bulletin déjà dans le chaudron (02/10/2026, vérification avant prod) : la carte
   le dit, en vert (la confiance), à la place du bouton qui invitait encore à participer */
[data-fete="halloween"] .chx-fin .chx-chaudron{margin:0 0 4px;padding:10px 14px;
  border-radius:14px;background:rgba(22,163,74,.10);border:1px solid rgba(22,163,74,.40);
  color:var(--ink);font-weight:700}
/* TÉLÉPHONE TENU À L'HORIZONTALE (02/10/2026, vérification avant prod) : en 844 × 390,
   la carte du jeu (440 px) sortait par le haut, croix de fermeture à moitié hors
   écran. Sur un écran aussi bas, Cospi sorcière s'efface et la carte défile si
   besoin ; en portrait, rien ne change. */
@media (max-height:480px){
  [data-fete="halloween"] .chx-fin{max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);
    overflow-y:auto;padding-top:24px}
  [data-fete="halloween"] .chx-cospi-zone{display:none}
}
[data-fete="halloween"] .chx-cospi-zone{position:relative;height:150px;margin:-88px auto 4px;width:170px}
[data-fete="halloween"] .chx-halo{position:absolute;inset:-14px;border-radius:50%;
  background:radial-gradient(circle,rgba(124,232,181,.38),rgba(124,232,181,.10) 55%,transparent 75%);
  filter:blur(6px);animation:chx-halo-pulse 3s ease-in-out infinite alternate}
[data-fete="halloween"] .chx-cospi{position:relative;display:block;width:106px;height:auto;margin:0 auto;
  animation:chx-flotte 4s ease-in-out infinite alternate;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.45))}
@keyframes chx-flotte{from{transform:translateY(0)}to{transform:translateY(-9px)}}
@keyframes chx-halo-pulse{from{opacity:.6;transform:scale(.94)}to{opacity:1;transform:scale(1.05)}}
[data-fete="halloween"] .chx-bulle{position:absolute;bottom:20px;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 35% 30%,rgba(224,255,238,.95),rgba(124,232,181,.75) 55%,rgba(60,180,120,.25));
  animation:chx-bulle-monte var(--bd,2.6s) ease-out forwards}
@keyframes chx-bulle-monte{
  0%{opacity:0;transform:translate(0,0) scale(.4)}
  12%{opacity:.9}
  80%{opacity:.85;transform:translate(var(--bx,0px),var(--by,-90px)) scale(1)}
  100%{opacity:0;transform:translate(var(--bx,0px),calc(var(--by,-90px) - 14px)) scale(1.5)}}
[data-fete="halloween"] .chx-etin{position:absolute;pointer-events:none;color:#ffe08a;opacity:0;
  animation:chx-etin-brille var(--ed,1.6s) ease-in-out forwards}
@keyframes chx-etin-brille{
  0%{opacity:0;transform:scale(.3) rotate(0)}
  35%{opacity:1;transform:scale(1.15) rotate(40deg)}
  100%{opacity:0;transform:scale(.5) rotate(90deg)}}
/* LE BULLETIN TOMBE DANS LE CHAUDRON (13/10/2026, halloween.js : chxDepot) : une scène posée
   au-dessus de la carte de fin le temps du dépôt, qui ne prend aucun clic */
[data-fete="halloween"] .chx-depot{position:fixed;inset:0;z-index:232;pointer-events:none;overflow:hidden}
[data-fete="halloween"] .chx-depot > *{position:absolute;pointer-events:none}
[data-fete="halloween"] .chx-depot-ticket{left:0;top:0;width:210px;opacity:0;will-change:transform,opacity;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
[data-fete="halloween"] .chx-depot-ticket svg{display:block;width:100%;height:auto}
[data-fete="halloween"] .chx-depot-trace{width:20px;height:20px;margin:-10px 0 0 -10px;line-height:20px;
  text-align:center;color:#ffd77a;animation:chx-depot-trace .75s ease-out forwards}
@keyframes chx-depot-trace{0%{opacity:0;transform:scale(.4)}25%{opacity:1;transform:scale(1.1) rotate(30deg)}
  100%{opacity:0;transform:translateY(10px) scale(.3) rotate(90deg)}}
[data-fete="halloween"] .chx-depot-lueur{width:600px;height:600px;margin:-300px 0 0 -300px;border-radius:50%;
  background:radial-gradient(circle,rgba(206,255,160,.85) 0%,rgba(140,236,140,.42) 24%,rgba(90,200,120,.14) 50%,transparent 70%);
  mix-blend-mode:screen;opacity:0;animation:chx-depot-lueur 2.6s ease-out forwards}
@keyframes chx-depot-lueur{0%{opacity:0;transform:scale(.12)}10%{opacity:1}35%{transform:scale(1)}
  60%{opacity:.75}100%{opacity:0;transform:scale(1.15)}}
[data-fete="halloween"] .chx-depot-anneau{width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;
  border:3px solid rgba(200,255,160,.95);box-shadow:0 0 12px rgba(150,255,120,.8);
  animation:chx-depot-anneau .65s ease-out forwards}
@keyframes chx-depot-anneau{from{opacity:1;transform:scale(.4)}to{opacity:0;transform:scale(6)}}
[data-fete="halloween"] .chx-depot-goutte{width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#efffd8,#8cf06e 55%,#2f9e45)}
[data-fete="halloween"] .chx-depot-fumee{width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;
  background:radial-gradient(circle,rgba(150,236,150,.55),rgba(110,200,130,.25) 50%,transparent 72%)}
[data-fete="halloween"] .chx-depot-fumee-v{
  background:radial-gradient(circle,rgba(176,140,240,.55),rgba(130,100,210,.25) 50%,transparent 72%)}
[data-fete="halloween"] .chx-depot-etin{width:24px;height:24px;margin:-12px 0 0 -12px;line-height:24px;
  text-align:center;color:#ffc266;text-shadow:0 0 8px rgba(255,170,60,.8)}
[data-fete="halloween"] .chx-depot-etin-v{color:#b9ff9a;text-shadow:0 0 8px rgba(140,255,120,.8)}
/* la nuée : la chauve-souris canonique du ciel (le modèle des cartes, base.html), encre de
   nuit violette, sans liseré clair (13/10/2026) : elle se découpe sur la lueur du chaudron */
[data-fete="halloween"] .chx-depot-cs{width:64px;height:32px;margin:-16px 0 0 -32px;
  --hw-cc-aile:#1d1530;--hw-cc-corps:#0f0a1c}
[data-fete="halloween"] .chx-depot-cs .hw-cc-vole{position:static;display:block;width:100%;height:100%;
  opacity:1;overflow:visible}
[data-fete="halloween"] .chx-depot-cs .hw-cc-bete{transform:none}
/* leurs yeux allumés (13/10/2026, « je n'ai pas vu les chauves-souris ») */
[data-fete="halloween"] .chx-depot-oeil{fill:#ffd36a}
[data-fete="halloween"] .chx-depot-halo-oeil{fill:#ff9a2e;opacity:.45}
[data-fete="halloween"] .chx-depot-cs .hw-cc-aile-g{animation:chx-depot-aile-g .22s var(--d,0s) ease-in-out infinite alternate}
[data-fete="halloween"] .chx-depot-cs .hw-cc-aile-d{animation:chx-depot-aile-d .22s var(--d,0s) ease-in-out infinite alternate}
@keyframes chx-depot-aile-g{from{transform:rotate(16deg) scaleY(1)}to{transform:rotate(-26deg) scaleY(.5)}}
@keyframes chx-depot-aile-d{from{transform:rotate(-16deg) scaleY(1)}to{transform:rotate(26deg) scaleY(.5)}}
/* la potion qui déborde (13/10/2026, « Cospi attrape le bulletin ») */
[data-fete="halloween"] .chx-depot-bouillon{width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#f2ffe0,#9af27a 50%,#3aa64c)}
/* LE TROPHÉE (13/10/2026, Vincent : « les cinq citrouilles s'allument ») : les cinq citrouilles de
   la chasse sous « Ton bulletin est dans le chaudron », la fantôme en 4e ; au dépôt, elles
   viennent une à une et leur visage s'allume (halloween.js, chxDepotRevele) */
/* AGRANDIES (13/10/2026, Vincent, sur la planche : « et les citrouilles ? », après le prénom trop
   petit) : 56 px au lieu de 36, 46 au téléphone ; leur visage qui s'allume se voit enfin */
[data-fete="halloween"] .chx-trophee{display:flex;justify-content:center;align-items:flex-end;gap:12px;margin:16px 0 6px}
[data-fete="halloween"] .chx-trophee-cit{display:block;width:56px;height:50px}
[data-fete="halloween"] .chx-trophee-cit svg{display:block;width:100%;height:100%;overflow:visible}
[data-theme="night"][data-fete="halloween"] .chx-trophee-cit svg{filter:drop-shadow(0 0 6px rgba(255,170,70,.55))}
[data-theme="night"][data-fete="halloween"] .chx-trophee .chx-trou{fill:url(#chxToLu)}
[data-fete="halloween"] .chx-trophee-f .chx-cotes{stroke:#8a816b}
[data-fete="halloween"] .chx-trophee-f .chx-ombre{fill:#5b5442}
[data-fete="halloween"] .chx-trophee-f .chx-col{fill:#6f6a5a}
[data-fete="halloween"] .chx-trophee-f .chx-trou{fill:#3d3b4a;stroke:none}
[data-theme="night"][data-fete="halloween"] .chx-trophee-f .chx-trou{fill:url(#chxTfLu);stroke:none}
[data-theme="night"][data-fete="halloween"] .chx-trophee-f .chx-braise{opacity:.28}
[data-theme="night"][data-fete="halloween"] .chx-trophee-f svg{filter:drop-shadow(0 0 7px rgba(200,220,255,.6))}
[data-fete="halloween"] .chx-fin .chx-trophee.chx-depot-attend{visibility:hidden}
[data-fete="halloween"] .chx-trophee.chx-depot-allume .chx-trophee-cit{
  animation:chx-trophee-vient .55s calc((var(--chx-n) - 1) * .2s) var(--ease) both}
[data-fete="halloween"] .chx-trophee.chx-depot-allume .chx-visage{
  animation:chx-trophee-allume .45s calc((var(--chx-n) - 1) * .2s + .3s) ease-out both}
@keyframes chx-trophee-vient{0%{opacity:0;transform:translateY(14px) scale(.3)}
  60%{opacity:1;transform:translateY(-6px) scale(1.15) rotate(-6deg)}100%{opacity:1;transform:none}}
@keyframes chx-trophee-allume{from{opacity:.15}to{opacity:1}}
/* le bulletin attend d'être tombé dans le chaudron pour se dire */
[data-fete="halloween"] .chx-fin .chx-chaudron.chx-depot-attend{visibility:hidden}
[data-fete="halloween"] .chx-fin .chx-chaudron.chx-depot-revele{animation:chx-depot-revele .6s var(--ease) both}
@keyframes chx-depot-revele{0%{opacity:0;transform:scale(.86)}60%{opacity:1;transform:scale(1.05)}
  100%{opacity:1;transform:scale(1)}}
@media (max-width:600px){
  [data-fete="halloween"] .chx-depot-ticket{width:168px}
  [data-fete="halloween"] .chx-trophee{gap:8px}
  [data-fete="halloween"] .chx-trophee-cit{width:46px;height:41px}
  [data-fete="halloween"] .chx-depot-lueur{width:420px;height:420px;margin:-210px 0 0 -210px}
  [data-fete="halloween"] .chx-depot-cs{width:56px;height:28px;margin:-14px 0 0 -28px}
}

/* LE PIED DE PAGE PREND UN FOND, PENDANT LA FÊTE SEULEMENT.
   Mesuré au nœud de texte : la dernière ligne du pied vit à 14 px du bas de la
   fenêtre sur téléphone, 30 px en grand écran. C'est très exactement là où un
   décor de sol pose ses objets, et le calque est FIXE : la collision est donc
   structurelle, elle ne dépend même pas de la page. Relevé : le lien
   « L'histoire de Cospi l'apostrophe » tombait sur la grande citrouille à
   1,26:1 la nuit et 1,76:1 le jour. ⚠️ Ce défaut n'est pas né de la revue, il
   existait déjà avec l'ancienne scène : personne ne l'avait vu.
   Le pied reprend le jeton de verre de l'en-tête, mais SANS backdrop-filter :
   la brume dérive juste en dessous, et site.css:177 rappelle qu'un fond en
   mouvement sous un backdrop-filter le fait recalculer à chaque image. Le
   décor reste visible au travers, le texte retrouve un sol. */
[data-fete="halloween"] footer{
  background:var(--hw-pied);
  border:1px solid var(--glass-brd);
  border-radius:20px}

/* ---------- 3. Petits écrans : la scène devient le tableau final ---------- */
/* (refonte du 02/10/2026, maquette validée par Vincent) Jusque-là la scène du
   sol restait dans le calque FIXE, réduite : sur un téléphone le contenu
   occupe toute la largeur, les cartes passaient donc toujours devant, le
   manoir derrière le texte, et la brume dérivait sous le verre des cartes
   (le site s'interdit ça pour ses aurores sur écran tactile, site.css). Le
   calque fixe ne garde ici que le ciel (orage, sorcière, feuilles) ; la
   scène entière vit dans .hw-tableau, juste avant le pied de page. */
@media (max-width:880px){
  [data-fete="halloween"] .hw-decor > .hw-arbre,
  [data-fete="halloween"] .hw-decor > .hw-manoir-svg,
  [data-fete="halloween"] .hw-decor > .hw-palissade,
  [data-fete="halloween"] .hw-decor > .hw-croix,
  [data-fete="halloween"] .hw-decor > .hw-brume,
  [data-fete="halloween"] .hw-decor > .hw-citx,
  [data-fete="halloween"] .hw-decor > .hw-chat,
  [data-fete="halloween"] .hw-decor > .hw-citg{display:none}
  /* La toile mordait sur 85 % du bloc de marque : les fils passaient
     littéralement sur « CSE Pôle Interm'aide » et sur l'apostrophe.
     ⚠️ CORRIGÉ le 30/08 (« sur le mobile on ne la voit plus du tout ») : je
     l'avais réduite à 92 px en lui laissant le décalage de −56/−46, calculé
     pour une toile de 200. Elle sortait donc presque entièrement de l'écran,
     araignée comprise. Le décalage doit suivre la TAILLE, pas rester fixe :
     il vaut ici le même quart de la largeur qu'en grand écran. */
  /* ⚠️ JAMAIS d'opacity sur .hw-toile : l'araignée et son fil vivent DEDANS.
     Un opacity:.5 posé ici pour rendre les fils discrets au-dessus du repère
     les rendait transparents eux aussi : là où le fil croisait une lettre
     claire, il devenait un voile rosé et la lettre l'emportait à l'œil.
     C'est ce que Vincent lisait comme « elle ne passe pas au-dessus des
     textes » (30/08), et c'est aussi ce qui la faisait paraître grise.
     La discrétion se règle donc sur le DESSIN de la toile seulement. */
  [data-fete="halloween"] .hw-toile{left:-18px;top:-14px;
    width:116px;height:116px}
  [data-fete="halloween"] .hw-fils{opacity:.26}
  [data-fete="halloween"] .hw-perle{opacity:.38}

  /* LE TABLEAU : 270 px, une lueur d'horizon (jamais un disque), une colline
     pour poser le manoir au loin, l'arbre revenu à gauche avec le chat à son
     pied, la barrière, et les citrouilles devant, coupées par le sol comme
     tout objet proche. La brume y est FIXE : le décor ne bouge plus que par
     ses flammes, ses yeux et sa queue de chat. */
  [data-fete="halloween"] .hw-tableau{display:block;position:relative;height:270px;
    margin:30px 0 -18px;overflow:hidden;pointer-events:none}
  /* hors de l'écran, ses animations se figent (classe posée par halloween.js,
     02/10/2026, vérification avant prod : batterie) */
  [data-fete="halloween"] .hw-tableau.hw-hors-vue *{animation-play-state:paused}
  [data-fete="halloween"] .hw-t-lueur{position:absolute;left:0;right:0;bottom:20px;height:260px;
    background:radial-gradient(ellipse 48% 62% at 70% 78%,var(--hw-lueur-c),var(--hw-lueur-m) 55%,transparent)}
  [data-fete="halloween"] .hw-t-colline{position:absolute;left:0;bottom:24px;width:100%;height:96px;
    fill:url(#hwColline)}
  [data-fete="halloween"] .hw-t-sol{position:absolute;left:0;right:0;bottom:0;height:40px;
    background:linear-gradient(180deg,transparent,var(--hw-sol) 70%)}
  [data-fete="halloween"] .hw-tableau .hw-manoir-svg{right:6%;bottom:58px;width:162px}
  [data-fete="halloween"] .hw-tableau .hw-arbre{display:block;left:-34px;bottom:4px;width:206px}
  [data-fete="halloween"] .hw-tableau .hw-palissade{left:24%;right:2%;bottom:26px;height:40px;
    -webkit-mask-size:auto 40px;mask-size:auto 40px;
    background:linear-gradient(90deg,transparent 0,var(--hw-encre) 10%,var(--hw-encre) 78%,transparent 100%)}
  [data-fete="halloween"] .hw-tableau .hw-croix1{left:47%;right:auto;bottom:46px;width:15px;height:23px}
  [data-fete="halloween"] .hw-tableau .hw-croix2{left:57%;right:auto;bottom:52px;width:12px;height:19px}
  [data-fete="halloween"] .hw-tableau .hw-brume{bottom:12px;height:84px;animation:none}
  [data-fete="halloween"] .hw-tableau .hw-citx1{left:37%;right:auto;bottom:22px;width:40px}
  [data-fete="halloween"] .hw-tableau .hw-citx2{left:13%;right:auto;bottom:12px;width:28px}
  [data-fete="halloween"] .hw-tableau .hw-chat{left:22%;right:auto;bottom:12px;width:50px}
  [data-fete="halloween"] .hw-tableau .hw-citg-grande{right:23%;bottom:-18px;width:120px}
  [data-fete="halloween"] .hw-tableau .hw-citg-moyenne{right:3%;bottom:-8px;width:86px}

  /* L'AMBIANCE PENDANT LA LECTURE (02/10/2026, Vincent sur v0.99.371 : « il manque
     quelque chose dans l'ambiance avant d'arriver en bas »). Une lueur chaude qui
     monte du bas de l'écran, derrière le contenu ; une toile d'araignée au coin des
     cartes, un coin sur deux à gauche ; et sur l'accueil, les habitants (plus bas).
     Rien ne bouge sous le verre, rien ne passe devant le texte : la toile est un
     masque fixe au coin, là où les cartes n'écrivent pas. */
  [data-fete="halloween"] .hw-lueur-bas{display:block;position:absolute;left:0;right:0;bottom:0;height:42vh;
    background:radial-gradient(ellipse 95% 100% at 50% 100%,var(--hw-lueur-bas),transparent 72%)}

  /* LE FANTÔME DU HAUT DE PAGE (02/10/2026, Vincent sur son iPhone : « il faut descendre
     pour voir Halloween », puis « plutôt que le château, un fantôme », « plus fondu,
     brouillard »). Une illustration peinte, générée avec Canva sur le compte du CSE, dont
     le bas se défait dans la brume (fantome-halloween.webp, 600 px, fond transparent).
     Elle est posée à droite, en haut de chaque page décorée, DERRIÈRE le contenu, et
     accrochée au haut de <main> (base.html) : elle suit la barre et le bandeau d'annonce
     au lieu de rester dessous (défaut du « ciel » essayé avant elle). Rien ne bouge : une
     image fixe, le téléphone ne chauffe pas sous la barre en verre qui passe devant. */
  [data-fete="halloween"] .hw-fantome{display:block;position:relative;height:0;z-index:-1;pointer-events:none}
  /* PAS DE FANTÔME DERRIÈRE COSPI (02/10/2026, Vincent : « en mode clair, sur les autres
     pages que l'accueil, il est derrière Cospi et ça dénote fort ») : quand l'en-tête de la
     page porte déjà Cospi (en haut à droite, ou centrée au-dessus du titre), le coin est à
     elle : le fantôme s'efface, de jour comme de nuit. L'orage, lui, frappe toujours. Même
     chose sur le Marché Solidaire, dont l'étal commence juste sous la barre : seule la
     capuche dépassait de sa banne. */
  main:has(.page-head .cospi-illus,.cospi-entete,.histoire-hero,.stand-banne) > .hw-fantome{display:none}
  [data-fete="halloween"] .hw-fantome::before{content:"";position:absolute;
    right:0;top:var(--hw-fantome-h,4px);width:var(--hw-fantome-l,clamp(170px,47vw,220px));aspect-ratio:600/656;
    /* l'image déborde de 26 px à droite DANS sa boîte (coupée au bord) : un right négatif
       élargissait la page sur une fenêtre de 881 px et moins hors téléphone (défilement de côté) */
    background:url("../img/halloween/fantome-halloween.webp") right -26px top 0/contain no-repeat}
  /* L'ORAGE LE RÉVÈLE (02/10/2026, idée de Vincent : « il apparaît lorsqu'il y a un
     orage »). La nuit, il n'est qu'une ombre dans la brume (.09) ; quand l'éclair frappe
     (halloween.js, frappeEclair : classe hw-tonne ou hw-tonne-doux pendant 2,6 s), il
     surgit avec les deux éclats du ciel, puis retourne dans la brume. Le jour, il n'y a
     pas d'orage : il reste fondu (.32). Une animation d'opacité seule, d'une seconde (une
     frappe toutes les 14 à 24 s) : rien ne tourne en continu sous la barre en verre. Sans
     animations (« Arrêter les animations », mouvement réduit), l'orage ne frappe pas : le
     fantôme reste fixe, à .32, pour qu'on le voie quand même. Puis « un peu moins visible le
     reste du temps » (Vincent, même soir) : repos .22 → .14, jour .6 → .45, fixe .55 → .42 ;
     puis « encore un peu » : repos .09, jour .32, fixe .32. */
  [data-fete="halloween"] .hw-fantome::before{opacity:.32}
  [data-theme="night"][data-fete="halloween"] .hw-fantome::before{opacity:.09}
  /* IL FLOTTE COMME COSPI (02/10/2026, Vincent : « est-ce que ça prend des ressources si
     tu fais flotter le fantôme dans le même genre que les images de Cospi ? », puis « ok ») :
     la même recette (translate3d de 10 px sur 7 s, calque à part) : la carte graphique le
     fait glisser sans rien repeindre. Il ne flotte qu'EN HAUT de la page : dès qu'on a
     défilé (classe hw-a-defile posée par halloween.js), il se fige, pour que la barre en
     verre, qui passe alors devant lui, n'ait pas à recalculer son flou à chaque image.
     Pendant l'éclair, le flottement reste EN TÊTE de la liste : même nom, même place, il
     continue sans sauter ; seule l'animation de l'éclair s'ajoute (et n'est jamais figée). */
  [data-fete="halloween"] .hw-fantome::before{animation:hw-fantome-flotte 7s ease-in-out infinite;will-change:transform}
  [data-theme="night"][data-fete="halloween"] .hw-fantome.hw-tonne::before{
    animation:hw-fantome-flotte 7s ease-in-out infinite,hw-fantome-eclair 2.6s linear both}
  [data-theme="night"][data-fete="halloween"] .hw-fantome.hw-tonne-doux::before{
    animation:hw-fantome-flotte 7s ease-in-out infinite,hw-fantome-doux 2.4s ease-in-out both}
  :root.hw-a-defile[data-fete="halloween"] .hw-fantome::before{animation-play-state:paused}
  :root.hw-a-defile[data-theme="night"][data-fete="halloween"] .hw-fantome:is(.hw-tonne,.hw-tonne-doux)::before{
    animation-play-state:paused,running}
  :root.a11y-calme[data-theme="night"][data-fete="halloween"] .hw-fantome::before{opacity:.32}
  @media (prefers-reduced-motion:reduce){
    [data-theme="night"][data-fete="halloween"] .hw-fantome::before{opacity:.32}
    [data-fete="halloween"] .hw-fantome::before{animation:none}
  }
}
/* LES TOILES AU COIN DES CARTES, L'ARAIGNÉE DE « JE M'INFORME » ET LE CHAT DE « ÇA BOUGE »,
   SUR TOUS LES ÉCRANS (10/10/2026, Vincent : « sur les cartes du PC tu peux faire comme le
   tel avec les toiles et l'araignée », puis « mets le chat »). Nés au téléphone le
   02/10/2026 (l'ambiance pendant la lecture, plus haut) : une toile en masque fixe au coin
   des cartes, un coin sur deux à gauche, là où les cartes n'écrivent pas ; rien ne bouge
   sous le verre, rien ne passe devant le texte. L'ordinateur les prend tels quels, sauf la
   place des toiles et de l'araignée (plus bas). */
[data-fete="halloween"] :is(.pilier,.now,.band-in,.card,.tile){position:relative}
[data-fete="halloween"] :is(.pilier,.now,.band-in,.card,.tile)::after{content:"";position:absolute;
  top:0;right:0;width:58px;height:58px;pointer-events:none;border-top-right-radius:inherit;
  background:var(--hw-toile-coin);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M64 0 L3.0 0.0 M64 0 L7.1 21.9 M64 0 L20.1 42.4 M64 0 L40.2 56.2 M64 0 L64.0 61.0 M53.8 0.0 Q55.2 1.6 52.6 4.4 M52.6 4.4 Q56.4 4.8 56.7 7.1 M56.7 7.1 Q58.9 7.4 59.2 11.2 M59.2 11.2 Q62.2 8.8 64.0 10.2 M41.3 0.0 Q46.9 3.2 44.7 7.4 M44.7 7.4 Q49.4 9.3 47.7 15.8 M47.7 15.8 Q54.2 14.3 55.9 19.1 M55.9 19.1 Q60.5 17.0 64.0 22.7 M32.3 0.0 Q38.3 4.8 32.5 12.1 M32.5 12.1 Q41.9 14.1 41.2 22.0 M41.2 22.0 Q49.2 21.6 50.8 31.0 M50.8 31.0 Q58.8 25.6 64.0 31.7 M18.8 0.0 Q29.2 6.4 23.7 15.5 M23.7 15.5 Q34.2 19.0 31.5 31.4 M31.5 31.4 Q44.0 29.1 47.1 39.8 M47.1 39.8 Q57.0 34.7 64.0 45.2 M9.8 0.0 Q20.6 8.0 11.5 20.1 M11.5 20.1 Q26.8 23.7 25.0 37.7 M25.0 37.7 Q39.0 36.4 42.0 51.7 M42.0 51.7 Q55.2 43.3 64.0 54.2' fill='none' stroke='%23000' stroke-width='.9' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat top right/100% 100%;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M64 0 L3.0 0.0 M64 0 L7.1 21.9 M64 0 L20.1 42.4 M64 0 L40.2 56.2 M64 0 L64.0 61.0 M53.8 0.0 Q55.2 1.6 52.6 4.4 M52.6 4.4 Q56.4 4.8 56.7 7.1 M56.7 7.1 Q58.9 7.4 59.2 11.2 M59.2 11.2 Q62.2 8.8 64.0 10.2 M41.3 0.0 Q46.9 3.2 44.7 7.4 M44.7 7.4 Q49.4 9.3 47.7 15.8 M47.7 15.8 Q54.2 14.3 55.9 19.1 M55.9 19.1 Q60.5 17.0 64.0 22.7 M32.3 0.0 Q38.3 4.8 32.5 12.1 M32.5 12.1 Q41.9 14.1 41.2 22.0 M41.2 22.0 Q49.2 21.6 50.8 31.0 M50.8 31.0 Q58.8 25.6 64.0 31.7 M18.8 0.0 Q29.2 6.4 23.7 15.5 M23.7 15.5 Q34.2 19.0 31.5 31.4 M31.5 31.4 Q44.0 29.1 47.1 39.8 M47.1 39.8 Q57.0 34.7 64.0 45.2 M9.8 0.0 Q20.6 8.0 11.5 20.1 M11.5 20.1 Q26.8 23.7 25.0 37.7 M25.0 37.7 Q39.0 36.4 42.0 51.7 M42.0 51.7 Q55.2 43.3 64.0 54.2' fill='none' stroke='%23000' stroke-width='.9' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat top right/100% 100%}
[data-fete="halloween"] :is(.pilier,.now,.card,.tile):nth-child(even)::after{right:auto;left:0;transform:scaleX(-1)}
/* PAS DE TOILE SUR LA CARTE « DÉCÈS D'UN PROCHE » (10/10/2026, Vincent : « enlève sur la
   carte décès ») : la classe sans-toile, posée dans le gabarit (evenements/index.html),
   retire la toile d'une carte, au téléphone comme à l'ordinateur. Le formulaire de
   déclaration d'un décès, lui, n'a aucun décor (fete.py, VUES_SANS_FETE). */
[data-fete="halloween"] .sans-toile::after{display:none}
/* L'ARAIGNÉE DE « JE M'INFORME » prend la place de la toile de sa carte : son cadre part
   du bord HAUT de la carte, l'image (un long fil) y est calée en bas ; la HAUTEUR du
   cadre la fait descendre et remonter (Vincent, 02/10/2026 : « monter et descendre…
   garde l'effet balancier lorsqu'elle est en bas », et SUR la carte : pendue dessous, la
   nuit, on ne la voyait pas ; puis « enlève le halo clair… simplement ses pattes » : ses
   pattes remuent). Au téléphone, elle reste dans le coin libre à droite de l'icône,
   au-dessus du titre. Sans animation (mode calme), elle pend à 64 px, pattes immobiles.
   Image fixe tirée du dessin validé (outils/halloween_habitants.py). */
[data-fete="halloween"] #piliers .pilier:nth-child(4)::after{
  -webkit-mask:none;mask:none;border-radius:0;transform:none;left:auto;background-color:transparent;
  background-repeat:no-repeat;top:0;right:34px;width:30px;height:64px;
  background-position:bottom center;background-size:30px auto;transform-origin:50% 0;
  animation:hw-araignee-yoyo 28s infinite;
  background-image:url("../img/halloween/araignee-jour.svg")}
[data-theme="night"][data-fete="halloween"] #piliers .pilier:nth-child(4)::after{
  background-image:url("../img/halloween/araignee-nuit.svg")}
/* ses pattes remuent DANS l'image : « Arrêter les animations » n'y entre pas, on
   lui sert donc la version fixe (prefers-reduced-motion : plus bas, même chose) */
:root.a11y-calme[data-fete="halloween"] #piliers .pilier:nth-child(4)::after{
  background-image:url("../img/halloween/araignee-jour-fixe.svg")}
:root.a11y-calme[data-theme="night"][data-fete="halloween"] #piliers .pilier:nth-child(4)::after{
  background-image:url("../img/halloween/araignee-nuit-fixe.svg")}
/* LE CHAT DE « ÇA BOUGE » : le chat noir de la scène, assis sur une carte « Ça bouge au
   CSE ». Au téléphone depuis le 02/10/2026, sur la 1re ; à l'ordinateur depuis le
   10/10/2026 (« mets le chat »), sur celle du MILIEU : la 1re y est étroite et le titre
   « Ça bouge au CSE » passe juste au-dessus, le chat s'asseyait sur son dernier mot. La
   citrouille posée sur la 1re carte « Que veux-tu faire » est devenue, le 02/10/2026, la
   MESSAGÈRE de la chasse : un vrai bouton, plus haut dans ce fichier, et plus une image.
   Image fixe tirée du dessin validé (outils/halloween_habitants.py) ; le chat prend la
   place de la toile de sa carte. */
@media (max-width:880px){
  [data-fete="halloween"] #en-ce-moment .now:nth-child(1)::after{
    -webkit-mask:none;mask:none;border-radius:0;transform:none;left:auto;background-color:transparent;
    background-repeat:no-repeat;background-size:contain;
    top:-53px;right:30px;width:40px;height:55px;
    background-position:bottom center;background-image:url("../img/halloween/chat-assis-jour.svg")}
  [data-theme="night"][data-fete="halloween"] #en-ce-moment .now:nth-child(1)::after{
    background-image:url("../img/halloween/chat-assis-nuit.svg")}
}
@media (min-width:881px){
  [data-fete="halloween"] #en-ce-moment .now:nth-child(2)::after{
    -webkit-mask:none;mask:none;border-radius:0;transform:none;left:auto;background-color:transparent;
    background-repeat:no-repeat;background-size:contain;
    top:-53px;right:30px;width:40px;height:55px;
    background-position:bottom center;background-image:url("../img/halloween/chat-assis-jour.svg")}
  [data-theme="night"][data-fete="halloween"] #en-ce-moment .now:nth-child(2)::after{
    background-image:url("../img/halloween/chat-assis-nuit.svg")}
}
/* À L'ORDINATEUR, deux retouches :
   · les cartes y sont côte à côte : avec un coin sur deux à gauche, la toile de gauche
     d'une carte retrouvait celle de droite de sa voisine (deux toiles en tas entre elles)
     et mordait sur son icône ; toutes les toiles restent donc au coin droit ;
   · la citrouille messagère de la chasse est posée sur le bord haut de « Je m'informe »,
     à droite (#piliers .head, right:22px) : l'araignée y pendait derrière elle. Elle
     descend donc plus à gauche, entre l'icône et la citrouille. */
@media (min-width:881px){
  [data-fete="halloween"] :is(.pilier,.now,.card,.tile):nth-child(even)::after{right:0;left:auto;transform:none}
  [data-fete="halloween"] #piliers .pilier:nth-child(4)::after{right:112px}
}

@media (max-width:880px){
  /* L'ARAIGNÉE SORT DE SA TOILE ET VA MARCHER SUR LA BARRE (demande Vincent,
     30/08 : « fais-la marcher sur le header et revenir sur la toile, sinon
     elle est cachée »). Au téléphone la toile ne fait que 116 px : sa
     promenade tenait dans un mouchoir de poche, coincée entre le repère et le
     bord de la barre, et elle s'y perdait.
     Mesuré : la barre occupe y 14→76 px, et le nœud (89.2 127.4) de la toile
     tombe à l'écran en (43, 73), c'est-à-dire PILE sur son bord bas. Elle a
     donc de quoi y poser le pied sans qu'on triche sur la géométrie.
     Le trajet fait l'aller ET le retour dans le path lui-même, au lieu de
     rembobiner l'animation : offset-distance ne fait que croître, donc la
     tangente s'inverse au demi-tour et elle se retourne pour rentrer, au lieu
     de marcher à reculons. Elle chemine entre y 60 et 73 à l'écran, sous le
     texte du repère, jamais par-dessus. */
  [data-fete="halloween"] .hw-arai-scene.hw-va .hw-araignee{
    offset-path:path("M0 0 L89.2 127.4 L150 121 Q230 128 310 118 Q400 106 545 120 Q420 114 330 126 Q240 136 152 128 L89.2 127.4 L0 0");
    animation:hw-arai-balade 52s ease-in-out both}
  /* Ses pattes battent plus vite au téléphone : elle y marche moins vite, et
     c'est le RAPPORT entre l'enjambée et la vitesse qui décide si l'œil voit
     marcher ou glisser. Enjambée visée : un tiers de sa longueur. */
  [data-fete="halloween"] .hw-arai-scene.hw-va .hw-patte path{animation-duration:.34s}
  /* La toile faisant 116 px pour un repère de 170, tout y est réduit à 0,68 :
     ses pattes tombaient à 0,8 px de large, sous le pixel, et elle se lisait
     comme une tache grise plutôt que comme une araignée. Elle est grossie
     ici SEULEMENT, autour d'elle-même. ⚠️ transform-box:fill-box est
     obligatoire : sans lui l'origine se calcule sur le repère du svg entier
     et elle part à l'autre bout. Le transform ne dispute rien à offset-path,
     qui positionne, ni aux pattes, qui pivotent chacune sur son propre path. */
  [data-fete="halloween"] .hw-arai-scene .hw-araignee{
    transform-box:fill-box;transform-origin:50% 50%;transform:scale(1.55)}
}
/* LE TEMPO (refait le 30/08 : « elle marche beaucoup trop vite »). Elle
   parcourt 843 px d'écran ; le trajet dure maintenant 40 s au lieu de 26.
   La vitesse n'est PAS uniforme, parce qu'une bête ne se déplace pas à
   vitesse constante : elle sort de son coin d'un pas vif, tâte le bord,
   TRAVERSE LENTEMENT (≈15 px/s, c'est le moment qu'on regarde), s'arrête au
   bout, revient d'un pas plus décidé (≈36 px/s), et rentre chez elle d'un
   trait. Paliers calés sur les longueurs réelles des segments : 12,6 % le
   bord de la toile, 17,5 % le pied sur la barre, 50 % le bout du voyage,
   87,4 % le retour au nœud. */
@media (prefers-reduced-motion:reduce){
  [data-fete="halloween"] #piliers .pilier:nth-child(4)::after{
    background-image:url("../img/halloween/araignee-jour-fixe.svg")}
  [data-theme="night"][data-fete="halloween"] #piliers .pilier:nth-child(4)::after{
    background-image:url("../img/halloween/araignee-nuit-fixe.svg")}
}
/* L'ARAIGNÉE DE « JE M'INFORME », un cycle de 28 s : 4 s blottie contre le bord haut
   de la carte, 3,5 s pour descendre au bout de son fil, puis le balancier d'avant (±5°, 5,5 s par
   aller), une fois et demie, et 4 s pour remonter. La hauteur ne bouge que pendant la
   descente et la remontée : entre les deux, seuls les angles changent. */
@keyframes hw-araignee-yoyo{
  0%,14.3%{height:24px;transform:rotate(0);animation-timing-function:cubic-bezier(.3,.1,.3,1)}
  26.8%{height:84px;transform:rotate(0);animation-timing-function:ease-in-out}
  36.6%{transform:rotate(5deg);animation-timing-function:ease-in-out}
  56.3%{transform:rotate(-5deg);animation-timing-function:ease-in-out}
  75.9%{transform:rotate(5deg);animation-timing-function:ease-in-out}
  85.7%{height:84px;transform:rotate(0);animation-timing-function:ease-in-out}
  100%{height:24px;transform:rotate(0)}}
@keyframes hw-arai-balade{
  0%{offset-distance:0%}
  12.8%{offset-distance:12.6%} 15.8%{offset-distance:12.6%}
  20.9%{offset-distance:17.5%}
  35.3%{offset-distance:30.7%}
  56.5%{offset-distance:50%} 62.3%{offset-distance:50%}
  74.2%{offset-distance:67.7%}
  84.1%{offset-distance:82.4%}
  87.5%{offset-distance:87.4%} 89.8%{offset-distance:87.4%}
  100%{offset-distance:100%}}

/* LA CHAUVE-SOURIS DES CARTES (12/10/2026, Vincent : « est-ce que tu serais capable de
   poser une chauve-souris sur une carte, et si on passe la souris dessus elle s'envole ? »).
   Elle dort pendue par les pieds sous le bord haut d'une carte, enroulée dans ses ailes,
   la tête en bas (.hw-cc-dort, gabarit _chauve_carte.html) ; elle respire et se balance
   à peine. La carte, sa place sous le bord (right, posé en ligne) et la famille sont
   tirées au sort à chaque page par halloween.js. Quand elle se lâche, la chauve-souris canonique du ciel (.hw-cc-vole,
   les tracés de base.html) prend le relais : elle se retourne en ouvrant les ailes et part
   vers la lune, quelques coups d'ailes francs puis un temps de plané, comme celle du ciel
   (le vol ralenti du 12/10/2026, « le vol est peut-être trop rapide »). Le départ et le
   retour : halloween.js, qui la fait voler dans un calque fixe (.hw-cc-ciel) pour
   qu'aucune section ne la coupe. Jour ET nuit : prune le jour, encre de nuit la nuit (les
   teintes de l'Envolée), SANS liseré clair ni halo autour d'elle (13/10/2026, Vincent :
   « il y a un liseré lumineux qui entoure », comme pour l'araignée le 02/10) : une ombre
   sombre la détache ; seuls les plis des ailes et les yeux fermés, dedans, sont clairs. */
[data-fete="halloween"] .hw-cc{position:absolute;top:0;right:0;width:40px;height:60px;
  pointer-events:none;z-index:1;
  --hw-cc-aile:#3a2a4d;--hw-cc-corps:#24182f;
  --hw-cc-pli:rgba(255,255,255,.22);--hw-cc-oeil:rgba(255,255,255,.65);
  filter:drop-shadow(0 2px 2px rgba(42,31,61,.22));
  transform-origin:50% 1px;animation:hw-cc-balance 8s ease-in-out infinite}
[data-theme="night"][data-fete="halloween"] .hw-cc{
  --hw-cc-aile:#0e1527;--hw-cc-corps:#070b16;
  --hw-cc-pli:rgba(165,190,235,.20);--hw-cc-oeil:rgba(200,215,245,.6);
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
[data-fete="halloween"] .hw-cc svg{position:absolute;display:block;overflow:visible}
/* endormie */
[data-fete="halloween"] .hw-cc-dort{left:0;top:0;width:100%;height:100%;transform-origin:50% 0;
  animation:hw-cc-souffle 4.6s ease-in-out infinite}
[data-fete="halloween"] .hw-cc-cape{fill:var(--hw-cc-aile)}
[data-fete="halloween"] .hw-cc-tete{fill:var(--hw-cc-corps)}
[data-fete="halloween"] :is(.hw-cc-pattes,.hw-cc-griffes,.hw-cc-pouces){fill:none;
  stroke:var(--hw-cc-corps);stroke-linecap:round}
[data-fete="halloween"] .hw-cc-pattes{stroke-width:1.15}
[data-fete="halloween"] .hw-cc-griffes{stroke-width:.85}
[data-fete="halloween"] .hw-cc-pouces{stroke-width:.8}
[data-fete="halloween"] .hw-cc-pli{fill:none;stroke:var(--hw-cc-pli);stroke-width:.7px;
  vector-effect:non-scaling-stroke}
[data-fete="halloween"] .hw-cc-yeux{fill:none;stroke:var(--hw-cc-oeil);stroke-width:.6px;
  stroke-linecap:round;vector-effect:non-scaling-stroke}
/* en vol : la chauve-souris du ciel, cachée tant qu'elle dort ; sa boîte suit celle du
   dessin endormi (en %), pour qu'une petite vole petite */
[data-fete="halloween"] .hw-cc-vole{left:-30%;top:13.33%;width:160%;height:53.33%;opacity:0}
[data-fete="halloween"] .hw-cc-aile{fill:var(--hw-cc-aile);transform-box:fill-box}
[data-fete="halloween"] .hw-cc-corps{fill:var(--hw-cc-corps)}
[data-fete="halloween"] .hw-cc-bete{transform-box:fill-box;transform-origin:center;
  transform:rotate(180deg) scale(.78,1.08)}
[data-fete="halloween"] .hw-cc-aile-g{transform-origin:100% 55%;transform:rotate(72deg) scaleY(.9)}
[data-fete="halloween"] .hw-cc-aile-d{transform-origin:0 55%;transform:rotate(-72deg) scaleY(.9)}
@keyframes hw-cc-balance{0%,100%{transform:rotate(0)} 25%{transform:rotate(2.5deg)} 75%{transform:rotate(-2.5deg)}}
@keyframes hw-cc-souffle{0%,100%{transform:scale(1)} 50%{transform:scale(1.035,1.01)}}
/* LA FAMILLE (« à des endroits une, à d'autres une famille ») : la mère au milieu, un
   petit de chaque côté (leurs places : halloween.js) ; chacun son rythme, pour qu'ils ne
   se balancent pas en mesure (des durées, pas des retards : chacun repart de zéro quand
   il revient se pendre, sans à-coup) */
[data-fete="halloween"] .hw-cc.hw-cc-petit1{width:27px;height:40.5px;animation-duration:7s}
[data-fete="halloween"] .hw-cc.hw-cc-petit2{width:30px;height:45px;animation-duration:9.4s}
[data-fete="halloween"] .hw-cc-petit1 .hw-cc-dort{animation-duration:4.1s}
[data-fete="halloween"] .hw-cc-petit2 .hw-cc-dort{animation-duration:5.3s}
/* revenue, elle se balance encore un peu au bout de ses pieds, puis se rendort */
[data-fete="halloween"] .hw-cc.hw-cc-secoue{animation:hw-cc-secousse 1.8s ease-out}
@keyframes hw-cc-secousse{0%{transform:rotate(0)} 18%{transform:rotate(9deg)} 42%{transform:rotate(-6deg)}
  64%{transform:rotate(3.5deg)} 84%{transform:rotate(-1.5deg)} 100%{transform:rotate(0)}}

/* LE VOL, dans un calque fixe sous la barre (z-index 50, comme l'escadrille) : la
   trajectoire est posée par halloween.js (Web Animations), ici le reste. */
.hw-cc-ciel{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:45}
.hw-cc-porteur{position:absolute;inset:0}
[data-fete="halloween"] .hw-cc-ciel .hw-cc{right:auto;animation:none;will-change:transform,opacity}
/* le départ : un sursaut (0,18 s), elle se lâche, se retourne en ouvrant les ailes
   (0,45 s), puis vole : trois coups d'ailes francs, un temps de plané, et ainsi de suite */
[data-fete="halloween"] .hw-cc-part .hw-cc-dort{animation:hw-cc-sursaut .18s linear,hw-cc-efface .12s .18s both}
[data-fete="halloween"] .hw-cc-part .hw-cc-vole{animation:hw-cc-apparait .1s .18s both}
[data-fete="halloween"] .hw-cc-part .hw-cc-bete{animation:hw-cc-retourne .45s .18s ease-out both}
[data-fete="halloween"] .hw-cc-part .hw-cc-aile-g{
  animation:hw-cc-deplie-g .45s .18s ease-out both,hw-cc-vol-g 1.3s .63s ease-in-out infinite}
[data-fete="halloween"] .hw-cc-part .hw-cc-aile-d{
  animation:hw-cc-deplie-d .45s .18s ease-out both,hw-cc-vol-d 1.3s .63s ease-in-out infinite}
/* le retour : elle arrive en volant ; à --hw-cc-pose (posé par halloween.js, 0,55 s avant
   la fin du trajet), elle se retourne, replie ses ailes en s'accrochant et se renroule
   (le dessin endormi revient). Tout est réglé sur l'horloge des animations, aucune
   minuterie : rien ne peut se décaler. */
[data-fete="halloween"] .hw-cc-revient .hw-cc-dort{opacity:0;
  animation:hw-cc-apparait .12s calc(var(--hw-cc-pose,2s) + .43s) both}
[data-fete="halloween"] .hw-cc-revient .hw-cc-vole{opacity:1;
  animation:hw-cc-efface .12s calc(var(--hw-cc-pose,2s) + .43s) forwards}
[data-fete="halloween"] .hw-cc-revient .hw-cc-bete{transform:rotate(0) scale(1);
  animation:hw-cc-retourne .45s var(--hw-cc-pose,2s) ease-in reverse forwards}
[data-fete="halloween"] .hw-cc-revient .hw-cc-aile-g{animation:hw-cc-vol-g 1.15s ease-in-out infinite,
  hw-cc-deplie-g .45s var(--hw-cc-pose,2s) ease-in reverse forwards}
[data-fete="halloween"] .hw-cc-revient .hw-cc-aile-d{animation:hw-cc-vol-d 1.15s ease-in-out infinite,
  hw-cc-deplie-d .45s var(--hw-cc-pose,2s) ease-in reverse forwards}
@keyframes hw-cc-sursaut{0%,100%{transform:rotate(0)} 25%{transform:rotate(5deg)} 50%{transform:rotate(-4deg)} 75%{transform:rotate(3deg)}}
@keyframes hw-cc-efface{to{opacity:0}}
@keyframes hw-cc-apparait{from{opacity:0}to{opacity:1}}
@keyframes hw-cc-retourne{
  0%{transform:rotate(180deg) scale(.78,1.08)}
  25%{transform:rotate(162deg) scale(.82,1.04)}
  50%{transform:rotate(104deg) scale(.90,.98)}
  75%{transform:rotate(38deg) scale(.96)}
  100%{transform:rotate(0) scale(1)}}
@keyframes hw-cc-deplie-g{0%{transform:rotate(72deg) scaleY(.9)} 30%{transform:rotate(58deg) scaleY(.84)}
  70%{transform:rotate(-18deg) scaleY(.88)} 100%{transform:rotate(14deg) scaleY(1)}}
@keyframes hw-cc-deplie-d{0%{transform:rotate(-72deg) scaleY(.9)} 30%{transform:rotate(-58deg) scaleY(.84)}
  70%{transform:rotate(18deg) scaleY(.88)} 100%{transform:rotate(-14deg) scaleY(1)}}
/* trois coups d'ailes (les angles de celle du ciel), puis un plané, ailes à peine levées */
@keyframes hw-cc-vol-g{
  0%{transform:rotate(14deg) scaleY(1)} 11%{transform:rotate(-24deg) scaleY(.52)}
  22%{transform:rotate(14deg) scaleY(1)} 33%{transform:rotate(-24deg) scaleY(.52)}
  44%{transform:rotate(14deg) scaleY(1)} 55%{transform:rotate(-22deg) scaleY(.56)}
  64%,90%{transform:rotate(7deg) scaleY(.96)} 100%{transform:rotate(14deg) scaleY(1)}}
@keyframes hw-cc-vol-d{
  0%{transform:rotate(-14deg) scaleY(1)} 11%{transform:rotate(24deg) scaleY(.52)}
  22%{transform:rotate(-14deg) scaleY(1)} 33%{transform:rotate(24deg) scaleY(.52)}
  44%{transform:rotate(-14deg) scaleY(1)} 55%{transform:rotate(22deg) scaleY(.56)}
  64%,90%{transform:rotate(-7deg) scaleY(.96)} 100%{transform:rotate(-14deg) scaleY(1)}}
/* « Fond sobre » : le décor disparaît entièrement, elle avec. « Arrêter les animations »
   et prefers-reduced-motion : les règles globales de site.css coupent ses animations,
   halloween.js ne la fait jamais partir : elle dort, immobile. */
:root.a11y-sobre .hw-cc,:root.a11y-sobre .hw-cc-ciel{display:none}

/* ---------- 4. Accessibilité : les mêmes portes de sortie que le site ---------- */
/* « Fond sobre » : le décor disparaît ENTIÈREMENT (la promesse « fond uni »). */
:root.a11y-sobre .hw-decor,
:root.a11y-sobre .hw-premier-plan,
:root.a11y-sobre .hw-tableau,
:root.a11y-sobre .hw-fantome,
:root.a11y-sobre :is(.pilier,.now,.band-in,.card,.tile)::after{display:none}
/* « Arrêter les animations » et prefers-reduced-motion : couverts par les
   règles globales de site.css (animation:none sur *, ::before et ::after) —
   hw-vaciller s'y fige d'office, et le décor est STATIQUE par construction :
   rien d'autre à couper ici. */

/* LE CHAUDRON DES CHASSEURS (16/10/2026, Vincent, v0.99.468) : la liste des bulletins sur
   l'accueil des connecté·es. Le premier en vedette sur le ticket doré du dépôt (le même
   dessin que CHX_TICKET de halloween.js), penché comme posé sur la table, trois éclats qui
   scintillent (figés par « Arrêter les animations », règles globales de site.css) ; les
   suivants en petits tickets, mêmes ors, mêmes encoches (masque) ; « Anonyme » plus pâle. */
[data-fete="halloween"] .chd-carte{display:grid;grid-template-columns:minmax(250px,330px) 1fr;
  gap:36px;align-items:center;padding:30px 34px}
[data-fete="halloween"] .chd-premier{text-align:center}
[data-fete="halloween"] .chd-ruban{display:inline-block;padding:5px 14px;border-radius:999px;
  font-weight:800;font-size:.82rem;letter-spacing:.02em;color:var(--ink);
  background:rgba(255,194,102,.16);border:1px solid rgba(255,194,102,.5)}
[data-fete="halloween"] .chd-ticket-zone{position:relative;margin:16px auto 12px;max-width:290px}
[data-fete="halloween"] .chd-ticket{display:block;width:100%;height:auto;transform:rotate(-4deg);
  filter:drop-shadow(0 12px 18px rgba(181,96,15,.28))}
[data-theme="night"][data-fete="halloween"] .chd-ticket{filter:drop-shadow(0 0 20px rgba(255,170,70,.5))}
[data-fete="halloween"] .chd-eclat{position:absolute;width:14px;height:14px;background:#ffd36b;
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
  animation:chd-scintille 2.6s ease-in-out infinite}
[data-fete="halloween"] .chd-e1{left:-4px;top:-8px}
[data-fete="halloween"] .chd-e2{right:6px;top:-14px;width:10px;height:10px;animation-delay:.9s}
[data-fete="halloween"] .chd-e3{right:-8px;bottom:6px;width:12px;height:12px;animation-delay:1.7s}
@keyframes chd-scintille{0%,100%{opacity:.25;transform:scale(.6) rotate(0)}50%{opacity:1;transform:scale(1) rotate(45deg)}}
[data-fete="halloween"] .chd-toi-premier{margin:0}
[data-fete="halloween"] .chd-toi-premier .chd-toi-badge{margin-left:0}
[data-fete="halloween"] .chd-titre-liste{margin:0 0 12px;font-size:.95rem;font-weight:700;color:var(--ink-soft)}
[data-fete="halloween"] .chd-liste{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
[data-fete="halloween"] .chd-tk{display:inline-flex;align-items:center;gap:8px;padding:6px 15px;
  border-radius:7px;background:linear-gradient(180deg,#ffe7a6,#ffc45e 55%,#f39a2d);color:#7a3a0c;
  font-weight:800;font-size:.9rem;line-height:1.3;
  -webkit-mask:radial-gradient(circle 5px at 0 50%,#0000 96%,#000) left/51% 100% no-repeat,
               radial-gradient(circle 5px at 100% 50%,#0000 96%,#000) right/51% 100% no-repeat;
          mask:radial-gradient(circle 5px at 0 50%,#0000 96%,#000) left/51% 100% no-repeat,
               radial-gradient(circle 5px at 100% 50%,#0000 96%,#000) right/51% 100% no-repeat}
[data-fete="halloween"] .chd-tk.chd-anonyme{background:linear-gradient(180deg,#f3e6cf,#e3cfae);color:#6b5a48;font-weight:700}
[data-fete="halloween"] .chd-toi-badge{margin-left:6px;padding:1px 7px;border-radius:6px;font-size:.7rem;
  font-weight:800;background:#7a3a0c;color:#ffe7a6;vertical-align:1px}
[data-fete="halloween"] .chd-toi{margin:22px 0 0;padding:12px 16px;border-radius:14px;color:var(--ink);
  font-weight:700;background:rgba(255,194,102,.10);border:1px solid rgba(255,194,102,.38)}
[data-fete="halloween"] .chd-toi p{margin:8px 0 0}
[data-fete="halloween"] .chd-toi-ok{background:rgba(22,163,74,.10);border-color:rgba(22,163,74,.40)}
[data-fete="halloween"] .chd-toi-ok p{margin:0}
[data-fete="halloween"] .chd-toi form{margin:6px 0 0}
[data-fete="halloween"] .chd-jauge{display:flex;gap:6px}
[data-fete="halloween"] .chd-jauge i{width:32px;height:9px;border-radius:5px;background:rgba(127,150,200,.28)}
[data-fete="halloween"] .chd-jauge i.chx-ok{background:#ffa53d}
/* le bouton du formulaire, habillé comme les liens de texte du site (.lien-txt) */
[data-fete="halloween"] .chd-retirer{padding:0;border:0;background:none;cursor:pointer;font:inherit;
  font-size:.82rem;font-weight:800;color:var(--teal-deep);text-decoration:underline;text-underline-offset:3px}
[data-fete="halloween"] .chd-note{margin:12px 0 0;font-size:.8rem;color:var(--ink-soft)}
@media (max-width:760px){
  [data-fete="halloween"] .chd-carte{grid-template-columns:1fr;gap:22px;padding:24px 18px}
  [data-fete="halloween"] .chd-ticket-zone{max-width:250px}
  [data-fete="halloween"] .chd-liste{gap:8px}
  [data-fete="halloween"] .chd-tk{font-size:.86rem}
}