/* =============================================================================
   XP WEB — le modèle « Halloween » (27/10/2026). La lueur orange par le bas,
   les chauves-souris, les lanternes, l'araignée — on joue, on ne fait pas
   peur (docs/OPERATIONS-SPECIALES.md, §3). Tout est conditionné par
   `html[data-xp="halloween"]` et par les emplacements cochés
   (`[data-xp-emplacements~="…"]`) — le serveur les pose au rendu, l'îlot les
   corrige aux bornes de la fenêtre. Liée SEULEMENT quand l'opération est en
   cours ou proche : hors de la fête, pas un octet (socle.css).

   Les couleurs sont celles de la charte : Orange Signal en APLAT et en
   lueur (jamais en texte), l'orange abaissé #B83309 pour le trait des
   surtitres (5,97:1 sur blanc), le Corail pour les accents sur Bleu Nuit.
   ============================================================================= */

html[data-xp="halloween"] {
  /* L'accent du bandeau sur fond Nuit (Corail, 6,7:1 sur Nuit) ; le trait
     des surtitres sur fond clair (l'orange abaissé). */
  --xp-accent: #FF8756;
  --xp-trait: #B83309;
}

/* ---- UNE : la lueur orange par le bas, le décor, Barbotte à gauche -------- */
html[data-xp="halloween"][data-xp-emplacements~="une"] [data-bfm="hero"] {
  background:
    radial-gradient(ellipse at 50% 118%, rgba(244, 90, 42, 0.58), rgba(244, 90, 42, 0.2) 32%, transparent 60%),
    var(--gradient-nuit, linear-gradient(160deg, #1B2650 0%, #111A3A 60%, #0A1029 100%));
}
html[data-xp="halloween"][data-xp-emplacements~="une"][data-xp-intensite="festif"] [data-xp-decor="halloween"] {
  display: block;
}
/* Barbotte chauve-souris pointe le museau en bas à GAUCHE (le CAB est à droite). */
html[data-xp="halloween"][data-xp-emplacements~="une"] [data-xp-barbotte="halloween"] {
  display: block;
  left: 40px;
  transform: rotate(5deg);
}
@media (max-width: 767px) {
  html[data-xp="halloween"][data-xp-emplacements~="une"] [data-xp-barbotte="halloween"] {
    left: 12px;
  }
}

/* Les réglages de la scène (27/10) : sans la lueur, la nuit seule ; en léger,
   trois chauves-souris sur six ; en généreux, des silhouettes plus franches. */
html[data-xp="halloween"][data-xp-emplacements~="une"][data-xp-lueur="non"] [data-bfm="hero"] {
  background: var(--gradient-nuit, linear-gradient(160deg, #1B2650 0%, #111A3A 60%, #0A1029 100%));
}
html[data-xp-quantite="leger"] [data-xp-decor="halloween"] .xp-cs:nth-of-type(n + 4) {
  display: none;
}
html[data-xp-quantite="genereux"] [data-xp-decor="halloween"] .xp-cs {
  opacity: 0.9;
}

/* Les ailes battent lentement (les groupes `xp-aile-g` / `xp-aile-d`,
   chacun pivotant autour du corps) ; chaque chauve-souris plane un peu
   (son `animation-delay` la désynchronise des autres). */
[data-xp-decor="halloween"] .xp-cs {
  animation: xp-hw-plane 6s ease-in-out infinite alternate;
}
[data-xp-decor="halloween"] .xp-aile-g,
[data-xp-decor="halloween"] .xp-aile-d,
[data-bfm="xp-traversee"] .xp-aile-g,
[data-bfm="xp-traversee"] .xp-aile-d {
  transform-box: fill-box;
  animation: xp-hw-battement 1.7s ease-in-out infinite alternate;
}
[data-xp-decor="halloween"] .xp-aile-g,
[data-bfm="xp-traversee"] .xp-aile-g {
  transform-origin: right center;
}
[data-xp-decor="halloween"] .xp-aile-d,
[data-bfm="xp-traversee"] .xp-aile-d {
  transform-origin: left center;
  animation-name: xp-hw-battement-d;
}
/* La chauve-souris qui traverse bat plus vite : elle vole, elle ne plane pas. */
[data-bfm="xp-traversee"] .xp-aile-g,
[data-bfm="xp-traversee"] .xp-aile-d {
  animation-duration: 0.45s;
}
@keyframes xp-hw-battement {
  from { transform: rotate(-16deg); }
  to { transform: rotate(14deg); }
}
@keyframes xp-hw-battement-d {
  from { transform: rotate(16deg); }
  to { transform: rotate(-14deg); }
}
@keyframes xp-hw-plane {
  from { translate: 0 -8px; }
  to { translate: 0 10px; }
}

/* Les lanternes respirent : la lueur seule, jamais la lanterne. */
[data-xp-decor="halloween"] .xp-lueur {
  animation: xp-hw-respire 3.4s ease-in-out infinite alternate;
}
@keyframes xp-hw-respire {
  from { opacity: 0.55; }
  to { opacity: 1; }
}

/* ---- COIN : la toile, et l'araignée au bout de son fil -------------------
   Elle descend quand on fait défiler la page et remonte quand on revient
   (animation liée au défilement, sans un octet de JavaScript) ; à défaut,
   un va-et-vient lent. Passer la souris sur la scène la fait remonter
   d'un coup. */
html[data-xp="halloween"][data-xp-emplacements~="coin"][data-xp-intensite="festif"] [data-xp-coin="halloween"] {
  display: block;
}
[data-xp-coin="halloween"] .xp-araignee {
  animation: xp-hw-va-et-vient 7s ease-in-out infinite alternate;
  /* Le réglage « vitesse du coin » (27/10). */
  animation-duration: calc(7s * var(--xp-coin-lenteur, 1));
}
@supports (animation-timeline: scroll()) {
  [data-xp-coin="halloween"] .xp-araignee {
    animation: xp-hw-descend linear both;
    animation-timeline: scroll(root);
  }
}
[data-bfm="hero"]:hover [data-xp-coin="halloween"] .xp-araignee {
  animation: xp-hw-remonte 0.55s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
@keyframes xp-hw-va-et-vient {
  from { translate: 0 -6px; }
  to { translate: 0 28px; }
}
@keyframes xp-hw-descend {
  from { translate: 0 0; }
  to { translate: 0 44px; }
}
@keyframes xp-hw-remonte {
  to { translate: 0 -34px; }
}

/* ---- TRAV : la chauve-souris ne tourne pas sur elle-même ------------------
   Le socle fait tourner l'élément qui traverse (un ballon vrille) ; une
   chauve-souris vole droit, et regarde dans le sens de sa course. */
html[data-xp="halloween"] [data-bfm="xp-traversee"] {
  animation-name: xp-hw-traverse-droite;
}
html[data-xp="halloween"] [data-bfm="xp-traversee"][data-sens="gauche"] {
  animation-name: xp-hw-traverse-gauche;
}
html[data-xp="halloween"] [data-bfm="xp-traversee"][data-sens="gauche"] svg {
  transform: scaleX(-1);
}
@keyframes xp-hw-traverse-droite {
  from { transform: translateX(-110%); }
  to { transform: translateX(calc(100vw + 10%)); }
}
@keyframes xp-hw-traverse-gauche {
  from { transform: translateX(calc(100vw + 10%)); }
  to { transform: translateX(-110%); }
}

/* ---- ICO et ENVOL : les Ondes en chauves-souris, les Cœurs en citrouilles
   Le dessin de l'icône est MASQUÉ, un pseudo-élément porte la forme du
   moment par un masque CSS : la couleur reste celle du texte, la taille
   celle demandée (`--taille`), pas un octet d'image. DEUX FORMES DISTINCTES
   (WCAG 1.4.1) — et le mot lu ne change pas : « Ondes », « Cœurs ». Le
   réglage « qui se déguise » (27/10) : les deux, les Ondes seules ou les
   Cœurs seuls. */
html[data-xp="halloween"]:not([data-xp-ico="coeurs"])[data-xp-emplacements~="ico"] [data-icone="onde"]:not([data-bfm="envol"] *) > svg,
html[data-xp="halloween"]:not([data-xp-ico="ondes"])[data-xp-emplacements~="ico"] [data-icone="coeur"]:not([data-bfm="envol"] *) > svg,
html[data-xp="halloween"]:not([data-xp-ico="coeurs"])[data-xp-emplacements~="envol"] [data-bfm="envol"] [data-icone="onde"] > svg,
html[data-xp="halloween"]:not([data-xp-ico="ondes"])[data-xp-emplacements~="envol"] [data-bfm="envol"] [data-icone="coeur"] > svg {
  display: none;
}
html[data-xp="halloween"]:not([data-xp-ico="coeurs"])[data-xp-emplacements~="ico"] [data-icone="onde"]:not([data-bfm="envol"] *)::before,
html[data-xp="halloween"]:not([data-xp-ico="ondes"])[data-xp-emplacements~="ico"] [data-icone="coeur"]:not([data-bfm="envol"] *)::before,
html[data-xp="halloween"]:not([data-xp-ico="coeurs"])[data-xp-emplacements~="envol"] [data-bfm="envol"] [data-icone="onde"]::before,
html[data-xp="halloween"]:not([data-xp-ico="ondes"])[data-xp-emplacements~="envol"] [data-bfm="envol"] [data-icone="coeur"]::before {
  content: "";
  display: inline-block;
  width: var(--taille, 14px);
  height: var(--taille, 14px);
  background-color: currentColor;
  -webkit-mask: var(--xp-masque) center / contain no-repeat;
  mask: var(--xp-masque) center / contain no-repeat;
}
html[data-xp="halloween"] [data-icone="onde"] {
  --xp-masque: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 5.2c-.9 2-2.3 2.8-4.3 2.6C5 7.6 2.6 8.6 1 11c2-.8 3.4-.3 4.3 1.1.9 1.5 2.6 1.6 3.9.4.6 1.1 1.5 1.8 2.8 1.8s2.2-.7 2.8-1.8c1.3 1.2 3 1.1 3.9-.4.9-1.4 2.3-1.9 4.3-1.1-1.6-2.4-4-3.4-6.7-3.2-2-.2-3.4-1-4.3-2.6zM9.6 4.6l.8-1.8 1 1.6zM14.4 4.6l-.8-1.8-1 1.6z'/></svg>");
}
html[data-xp="halloween"] [data-icone="coeur"] {
  --xp-masque: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M11 1.5h2v3.2h-2zM12 4.6c-2.3-1.2-5-1-7 .8C2.4 7.7 1.8 11.7 3 15.1c1.2 3.4 4.4 5.7 9 5.7s7.8-2.3 9-5.7c1.2-3.4.6-7.4-2-9.7-2-1.8-4.7-2-7-.8zM7.6 10.4l3 2.4H6.2zM16.4 10.4l1.4 2.4h-4.4zM7.2 15.2h9.6c-.8 2-2.6 3.2-4.8 3.2s-4-1.2-4.8-3.2z'/></svg>");
}

/* ---- VIG : les vignettes sans photo, Nuit → orange brûlé ------------------ */
html[data-xp="halloween"][data-xp-emplacements~="vig"] [data-vignette] {
  background: linear-gradient(135deg, #111A3A 0%, #4A1E12 55%, #B83309 100%);
}

/* ---- SURT : le trait des surtitres ----------------------------------------- */
html[data-xp="halloween"][data-xp-emplacements~="surt"] [data-kicker]::before {
  background: var(--xp-trait);
}

/* ---- Le bandeau de la une : l'accent du modèle ----------------------------- */
html[data-xp="halloween"] [data-bfm="xp-bandeau"] {
  --xp-accent: #FF8756;
}

/* ---- Le fond de page (la scène étendue aux pages cochées, 27/10) ----------
   Le même décor, voilé par le socle, et une lueur discrète par le bas. */
[data-bfm="xp-fond"][data-xp-fond="halloween"] {
  background: radial-gradient(ellipse at 50% 112%, rgba(244, 90, 42, 0.32), transparent 56%);
}