/* Habillage d'Halloween (proposition du 28/10/2026, version discrète voulue par Antonin : tout dans l'en-tête). Actif quand
   <html data-saison="halloween"> : sur /halloween/ et /en/halloween/ (adresses privées, non indexées) et sur l'accueil pendant les dates de
   publication.json (saison_du_jour.py, retrait automatique le lendemain du dernier jour à 0 h). L'en-tête passe en encre, une petite citrouille
   allumée (image de ChatGPT, communication/halloween-2026/) vacille à côté du logo, et quelques chauves-souris traversent l'en-tête de temps
   en temps (halloween.js), un petit fantôme tourne autour du bouton « Demander un devis », et une toile d'araignée pâle orne le coin haut droit.
   Rien n'est inséré dans l'application : jetons redéfinis, pseudo-éléments, une couche hors de #dc-root. */

/* En-tête en encre : mêmes jetons que :root[data-theme=dark], limités à l'en-tête (menus compris). */
html[data-saison="halloween"] header[data-np]{color-scheme:dark;--logo-clair-d:none;--logo-sombre-d:block;--tile:#DCDAD5;--bg:#0F1114;--paper:#181B1F;--sunken:#DCDAD5;--text:#F2F3F5;--muted:#AEB4BC;--subtle:#9AA1AB;--line:#2B3037;--line-s:#4A515B;--y-100:#EDC527;--y-050:#EDC527;--hdr-bg:rgba(12,14,17,.97);--btn-glass:rgba(24,27,31,.86);--y-ink:#EDC527;--lang-off:#8C939C}

/* Citrouille à côté du logo (élément du lien du logo, qui est en flex), posée sur la ligne du bas du cadre du logo ; sa lueur vacille comme une bougie. */
html[data-saison="halloween"] header[data-np] a[aria-label="Pleine Image Loc"]::after{content:"";flex:none;align-self:flex-end;width:calc(var(--logo-h,76px) * .62);height:calc(var(--logo-h,76px) * .55);
  background:url("/assets/saison/citrouille-mini.webp") center/contain no-repeat;filter:drop-shadow(0 0 5px rgba(242,140,40,.45));animation:pi-hw-bougie 3.1s ease-in-out infinite}
@keyframes pi-hw-bougie{0%,100%{filter:brightness(1) drop-shadow(0 0 5px rgba(242,140,40,.45))}22%{filter:brightness(1.12) drop-shadow(0 0 8px rgba(242,140,40,.6))}37%{filter:brightness(.94) drop-shadow(0 0 4px rgba(242,140,40,.38))}58%{filter:brightness(1.08) drop-shadow(0 0 7px rgba(242,140,40,.55))}74%{filter:brightness(1) drop-shadow(0 0 5px rgba(242,140,40,.45))}}

/* Petit fantôme qui tourne autour du bouton « Demander un devis » (pseudo-élément du lien, positions en % de sa taille) ; il passe devant
   sans gêner le clic. Côté droit limité au bord du bouton : rien ne dépasse de l'écran sur téléphone. */
html[data-saison="halloween"] header[data-np] a[href$="/devis/"],html[data-saison="halloween"] header[data-np] a[href$="/quote/"]{position:relative}
html[data-saison="halloween"] header[data-np] a[href$="/devis/"]::after,html[data-saison="halloween"] header[data-np] a[href$="/quote/"]::after{content:"";position:absolute;left:96%;top:-18%;width:22px;height:26px;margin:-13px 0 0 -11px;pointer-events:none;opacity:.94;
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'><path fill='%23F4F2F7' d='M12 2C6.5 2 3 6 3 11.5V25l3-2.2 3 2.2 3-2.2 3 2.2 3-2.2 3 2.2V11.5C21 6 17.5 2 12 2z'/><ellipse cx='9' cy='11' rx='1.5' ry='2' fill='%2314171A'/><ellipse cx='15' cy='11' rx='1.5' ry='2' fill='%2314171A'/><ellipse cx='12' cy='16.2' rx='1.4' ry='1.8' fill='%2314171A'/></svg>") center/contain no-repeat;
  filter:drop-shadow(0 0 4px rgba(244,242,247,.35));animation:pi-hw-fantome 10s ease-in-out infinite}
@keyframes pi-hw-fantome{
  0%,100%{left:96%;top:-18%;transform:rotate(8deg)}
  18%{left:100%;top:60%;transform:rotate(4deg) translateY(-3px)}
  36%{left:62%;top:116%;transform:rotate(-4deg)}
  52%{left:16%;top:110%;transform:rotate(-8deg) translateY(2px)}
  68%{left:-6%;top:40%;transform:rotate(-4deg)}
  84%{left:30%;top:-32%;transform:rotate(6deg) translateY(-2px)}}
html[data-saison="halloween"].pi-hw-calme header[data-np] a[href$="/devis/"]::after,html[data-saison="halloween"].pi-hw-calme header[data-np] a[href$="/quote/"]::after{animation:none}

/* Toile d'araignée dans le coin haut droit de l'en-tête, très pâle, derrière le contenu (z-index -1 dans l'en-tête, qui forme son propre
   empilement) ; une toute petite araignée descend au bout de son fil et remonte lentement, dans la marge de droite. */
html[data-saison="halloween"] header[data-np]::before{content:"";position:absolute;top:0;right:0;width:clamp(48px,6vw,72px);aspect-ratio:1;z-index:-1;pointer-events:none;opacity:.45;
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72'><path d='M72 0L2.0 0.0M72 0L5.4 21.6M72 0L15.4 41.1M72 0L30.9 56.6M72 0L50.4 66.6M72 0L72.0 70.0M60.0 0.0Q61.8 1.6 60.6 3.7Q62.8 4.7 62.3 7.1Q64.7 7.3 64.9 9.7Q67.3 9.2 68.3 11.4Q70.4 10.2 72.0 12.0M49.0 0.0Q52.5 3.1 50.1 7.1Q54.4 9.0 53.4 13.5Q58.0 14.0 58.5 18.6Q63.0 17.6 64.9 21.9Q68.9 19.5 72.0 23.0M37.0 0.0Q42.3 4.7 38.7 10.8Q45.2 13.7 43.7 20.6Q50.7 21.3 51.4 28.3Q58.3 26.8 61.2 33.3Q67.3 29.7 72.0 35.0M25.0 0.0Q32.1 6.3 27.3 14.5Q36.0 18.4 34.0 27.6Q43.4 28.6 44.4 38.0Q53.6 36.0 57.5 44.7Q65.7 39.9 72.0 47.0M13.0 0.0Q21.9 7.9 15.9 18.2Q26.8 23.0 24.3 34.7Q36.1 35.9 37.3 47.7Q49.0 45.2 53.8 56.1Q64.1 50.1 72.0 59.0' fill='none' stroke='%23E4DEEE' stroke-width='.7' stroke-linecap='round'/></svg>") right top/contain no-repeat}
html[data-saison="halloween"] header[data-np]::after{content:"";position:absolute;top:0;right:clamp(5px,1vw,14px);width:12px;height:40px;pointer-events:none;opacity:.75;transform:translateY(-12px);
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 46'><path d='M7 0v31' stroke='%23E4DEEE' stroke-width='.6'/><g fill='none' stroke='%23E4DEEE' stroke-width='.9' stroke-linecap='round'><path d='M5 34 1.5 31M5 35.5 1 36M5 37 1.5 40.5M5.5 38.5 3 43M9 34l3.5-3M9 35.5l4 .5M9 37l3.5 3.5M8.5 38.5 11 43'/></g><ellipse cx='7' cy='36.5' rx='2.6' ry='3.4' fill='%23E4DEEE'/><circle cx='7' cy='32' r='1.7' fill='%23E4DEEE'/></svg>") center top/contain no-repeat;animation:pi-hw-fil 6.5s ease-in-out infinite alternate}
@keyframes pi-hw-fil{from{transform:translateY(-14px)}to{transform:translateY(2px)}}
html[data-saison="halloween"].pi-hw-calme header[data-np]::after{animation:none}

/* Chauves-souris : une couche fixée sur la hauteur de l'en-tête (mesurée par halloween.js), au-dessus de lui (30) et sous les fenêtres (40 et plus). */
html[data-saison="halloween"] .pi-hw-vol{position:fixed;left:0;top:0;width:100%;height:var(--pi-hw-haut,72px);z-index:31;pointer-events:none;overflow:hidden}
.pi-hw-chauve{position:absolute;left:0;top:0;width:var(--t,34px);height:auto;color:#E4DEEE;will-change:transform}
.pi-hw-chauve svg{display:block;width:100%;height:auto;overflow:visible}
/* Battement : chaque aile tourne autour de son épaule (coordonnées du dessin), pointe vers le haut puis vers le bas. */
.pi-hw-chauve .aile{transform-box:view-box;animation:pi-hw-aile-d 230ms ease-in-out infinite alternate}
.pi-hw-chauve .aile.d{transform-origin:55px 17px}
.pi-hw-chauve .aile.g{transform-origin:45px 17px;animation-name:pi-hw-aile-g}
@keyframes pi-hw-aile-d{from{transform:rotate(-24deg)}to{transform:rotate(14deg)}}
@keyframes pi-hw-aile-g{from{transform:rotate(24deg)}to{transform:rotate(-14deg)}}

/* Bouton pour arrêter le mouvement (chauves-souris et vacillement), en bas à gauche comme pour la neige. */
html[data-saison="halloween"] .pi-hw-bouton{position:fixed;left:10px;bottom:10px;z-index:31;width:26px;height:26px;display:grid;place-items:center;padding:0;border:1px solid var(--line-s);border-radius:999px;background:var(--bg);color:var(--text);font-size:.75rem;line-height:1;cursor:pointer;opacity:.75}
html[data-saison="halloween"] .pi-hw-bouton:hover,html[data-saison="halloween"] .pi-hw-bouton:focus-visible{opacity:1;border-color:var(--text)}
html[data-saison="halloween"] .pi-hw-bouton[aria-pressed=false]{opacity:.45}
@media (max-width:899px){html[data-saison="halloween"] .pi-hw-bouton{bottom:88px}}
html[data-saison="halloween"].pi-hw-calme header[data-np] a[aria-label="Pleine Image Loc"]::after{animation:none}

/* Mouvement réduit : citrouille fixe, pas de vol. Impression : décor retiré. */
@media (prefers-reduced-motion:reduce){html[data-saison="halloween"] header[data-np]::after,html[data-saison="halloween"] header[data-np] a[aria-label="Pleine Image Loc"]::after,html[data-saison="halloween"] header[data-np] a[href$="/devis/"]::after,html[data-saison="halloween"] header[data-np] a[href$="/quote/"]::after{animation:none}}
@media print{html[data-saison="halloween"] header[data-np]::before,html[data-saison="halloween"] header[data-np]::after,html[data-saison="halloween"] .pi-hw-vol,html[data-saison="halloween"] .pi-hw-bouton,html[data-saison="halloween"] header[data-np] a[aria-label="Pleine Image Loc"]::after,html[data-saison="halloween"] header[data-np] a[href$="/devis/"]::after,html[data-saison="halloween"] header[data-np] a[href$="/quote/"]::after{display:none}}