/* ═══════════════════════════════════════════
   PGE Informatique — Thèmes saisonniers v3 (édition spéciale intégrée)
   Actif quand <html data-season="halloween|noel">.
   v3 : la saison habite les composants — nav (guirlande / toile +
   chauve-souris perchée), panneau hero (cap de neige + boule au fil),
   cartes d'avis (coin cadeau), footer (lumières / araignée au fil qui
   descend au scroll via --spider-drop posé par home.js), sol (brouillard /
   congèle + givre aux coins). Chargé APRÈS design-system.css.
   ═══════════════════════════════════════════ */

/* ══════════ HALLOWEEN ══════════ */
html[data-season="halloween"] {
  /* le vert de la charte cède la scène à la citrouille ; sémantique intacte */
  --green: #e2711a;
  --green-light: #f59a4a;
  --green-dark: #b3520f;
  --green-glow: rgba(226,113,26,.14);
  --green-border: rgba(226,113,26,.3);
  --green-bg: rgba(226,113,26,.06);
  --shadow-green: 0 8px 26px rgba(226,113,26,.3);

  --cream: #efe0c2;
  --cream-dark: #d9c193;
  --bg: #f7efe0;
  --bg-alt: #efe5d0;
  --bg-card: #fffaf1;
  --bg-card-hover: #fff6e9;
  --border: rgba(60,42,20,.09);
  --border-hover: rgba(60,42,20,.16);

  --fog: rgba(196,188,174,.42);
  --moon: #f6ecc9;
}
html.dark-mode[data-season="halloween"] {
  --green: #e8842f;
  --green-dark: #f59a4a;
  --cream: #2a2010;
  --cream-dark: #3c2d14;
  --cream-light: #1d1608;
  --bg: #0f0b06;
  --bg-alt: #171007;
  --bg-card: #1b130b;
  --bg-card-hover: #241a10;
  --bg-elevated: #241a10;
  --green-glow: rgba(255,140,40,.18);
  --green-border: rgba(255,140,40,.36);
  --fog: rgba(120,110,95,.22);
  --moon: #fff3c4;
}

/* halos & accents */
html[data-season="halloween"] #progress {
  background: linear-gradient(90deg, #f59a4a, #b3520f);
}
html[data-season="halloween"] .hero::before {
  background:
    radial-gradient(60% 50% at 88% 2%, rgba(246,236,201,.5), transparent 55%),
    radial-gradient(70% 60% at 85% 8%, rgba(226,113,26,.16), transparent 62%),
    radial-gradient(50% 46% at 2% 96%, rgba(120,90,40,.14), transparent 60%);
}

/* la LUNE, coin haut-droit du hero */
html[data-season="halloween"] .hero::after {
  content: '';
  position: absolute; top: 96px; right: 7%;
  width: 110px; height: 110px; border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, rgba(255,255,255,.65), transparent 46%),
    radial-gradient(circle at 62% 60%, rgba(0,0,0,.06) 0 9%, transparent 10%),
    radial-gradient(circle at 40% 66%, rgba(0,0,0,.05) 0 7%, transparent 8%),
    radial-gradient(circle at 70% 38%, rgba(0,0,0,.05) 0 5%, transparent 6%),
    var(--moon);
  box-shadow: 0 0 0 14px rgba(246,236,201,.22), 0 0 0 34px rgba(246,236,201,.1),
              0 0 60px 18px rgba(246,236,201,.35);
  animation: moon-breathe 9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes moon-breathe {
  0%, 100% { box-shadow: 0 0 0 14px rgba(246,236,201,.22), 0 0 0 34px rgba(246,236,201,.1), 0 0 60px 18px rgba(246,236,201,.35); }
  50%      { box-shadow: 0 0 0 18px rgba(246,236,201,.26), 0 0 0 42px rgba(246,236,201,.12), 0 0 78px 26px rgba(246,236,201,.45); }
}
@media (max-width: 860px) {
  html[data-season="halloween"] .hero::after { display: none; }
}

/* mot accentué qui vacille comme une bougie */
html[data-season="halloween"] .kinetic .word.accent {
  background: linear-gradient(120deg, #b3520f, #f59a4a);
  -webkit-background-clip: text; background-clip: text;
  animation: candle 3.4s ease-in-out infinite;
}
@keyframes candle {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(255,140,40,.45)); }
  30%      { filter: drop-shadow(0 0 10px rgba(255,140,40,.75)); }
  45%      { filter: drop-shadow(0 0 5px rgba(255,140,40,.5)); }
  60%      { filter: drop-shadow(0 0 12px rgba(255,140,40,.8)); }
}

/* citrouille lanterne dans la nav (yeux allumés) */
html[data-season="halloween"] .v5nav .brand::before,
html[data-season="halloween"] .footer__brand-desc::before {
  content: '';
  width: 26px; height: 26px; flex-shrink: 0;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='14.5' y='3.5' width='3' height='6' rx='1.5' fill='%236b8a2e'/%3E%3Cellipse cx='16' cy='19.5' rx='12.5' ry='9.5' fill='%23f07f22'/%3E%3Cellipse cx='16' cy='19.5' rx='6.8' ry='9.5' fill='%23e2711a'/%3E%3Cpath d='M10.2 16.4l3-3.8 3 3.8zM15.8 16.4l3-3.8 3 3.8z' fill='%23ffd76f'/%3E%3Cpath d='M9 23h3l1.5 2 2-2h3l2 2 1.5-2h3l-1.8 3.6-2.2 1.4-2.5-1.5-2.5 1.5-2.5-1.4-2.2-1.6z' fill='%23ffd76f'/%3E%3C/svg%3E");
  filter: drop-shadow(0 0 6px rgba(255,170,60,.75));
  animation: candle 3.4s ease-in-out infinite;
  margin: 0 -2px;
}
html[data-season="halloween"] .footer__brand-desc { display: block; }
html[data-season="halloween"] .footer__brand-desc::before {
  display: inline-block; vertical-align: -6px; margin: 0 8px 0 0;
}

/* toile d'araignée AU COIN DE LA NAV (intégrée au verre) */
html[data-season="halloween"] .v5nav::before {
  content: '';
  position: absolute; top: 1px; right: 12px;
  width: 70px; height: 64px;
  transform: scaleX(-1);
  background: no-repeat top right / 64px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%238a8172' stroke-opacity='.55' stroke-width='1.6'%3E%3Cpath d='M0 0 100 100M0 0 45 100M0 0 100 45M0 0 100 18M0 0 18 100'/%3E%3Cpath d='M11 5A12 12 0 0 1 5 11M23 11A26 26 0 0 1 11 23M36 17A40 40 0 0 1 17 36M49 23A55 55 0 0 1 23 49'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}
/* chauve-souris perchée sur le bord haut de la nav (batte par moments) */
html[data-season="halloween"] .v5nav::after {
  content: '';
  position: absolute; top: -17px; left: 9%;
  width: 44px; height: 18px;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Cg transform='translate(50,20)'%3E%3Cg%3E%3CanimateTransform attributeName='transform' type='scale' values='1 1;1 .5;1 1;1 1' keyTimes='0;.1;.2;1' dur='5.5s' repeatCount='indefinite'/%3E%3Cpath transform='translate(-50,-20)' d='M50 6c3.5 0 6 2.2 7 5l4-5c6-6.5 16-9.5 27-9.5-4.5 4-6.5 9-6.5 14 4-2 9-2 13.5.5-7.5.5-12.5 4.5-14.5 10.5-3 8-10 13-18 13h-25c-8 0-15-5-18-13-2-6-7-10-14.5-10.5C9 8.5 14 8.5 18 10.5c0-5-2-10-6.5-14 11 0 21 3 27 9.5l4 5c1-2.8 3.5-5 7.5-5z' fill='%23241c12'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity: .8;
  pointer-events: none;
}

html[data-season="halloween"] .btn--green {
  box-shadow: 0 10px 26px -12px rgba(255,140,40,.7);
}
html[data-season="halloween"] .footer {
  border-top: 2px solid rgba(226,113,26,.45);
  position: relative;
}

/* araignée au fil — le fil s'allonge à mesure qu'on scrolle
   (--spider-drop posé par home.js d'après la progression de scroll) */
html[data-season="halloween"] .footer::before {
  content: '';
  position: absolute; top: -2px; right: 12%;
  width: 24px; height: calc(84px + var(--spider-drop, 0px));
  background: no-repeat center / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 84' preserveAspectRatio='none'%3E%3Cpath d='M12 0v56' stroke='%23888' stroke-width='1'/%3E%3Cellipse cx='12' cy='66' rx='7' ry='8.5' fill='%23241c12'/%3E%3Ccircle cx='12' cy='56.5' r='4' fill='%23241c12'/%3E%3Cpath d='M8 60 3 54M8 66 2 66M8 71 3 77M16 60l5-6M16 66h6M16 71l5 6' stroke='%23241c12' stroke-width='1.7' fill='none'/%3E%3C/svg%3E");
  animation: spider-bob 6.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes spider-bob {
  0%, 100% { transform: translateY(0); }
  40%      { transform: translateY(16px); }
  55%      { transform: translateY(10px); }
}

/* nuée de chauves-souris — battement d'ailes SMIL dans le SVG */
html[data-season="halloween"] body::before,
html[data-season="halloween"] body::after,
html[data-season="halloween"]::before {
  content: '';
  position: fixed; left: -90px;
  z-index: 150; pointer-events: none;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Cg transform='translate(50,20)'%3E%3Cg%3E%3CanimateTransform attributeName='transform' type='scale' values='1 1;1 .55;1 1' dur='.5s' repeatCount='indefinite'/%3E%3Cpath transform='translate(-50,-20)' d='M50 6c3.5 0 6 2.2 7 5l4-5c6-6.5 16-9.5 27-9.5-4.5 4-6.5 9-6.5 14 4-2 9-2 13.5.5-7.5.5-12.5 4.5-14.5 10.5-3 8-10 13-18 13h-25c-8 0-15-5-18-13-2-6-7-10-14.5-10.5C9 8.5 14 8.5 18 10.5c0-5-2-10-6.5-14 11 0 21 3 27 9.5l4 5c1-2.8 3.5-5 7.5-5z' fill='%23241c12'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
html[data-season="halloween"] body::before {
  top: 12%; width: 58px; height: 24px; opacity: .55;
  animation: bat-a 26s linear infinite;
}
html[data-season="halloween"] body::after {
  top: 34%; width: 38px; height: 16px; opacity: .45;
  animation: bat-b 41s linear -16s infinite;
}
html[data-season="halloween"]::before {
  top: 58%; width: 26px; height: 11px; opacity: .32;
  animation: bat-b 55s linear -34s infinite;
  z-index: 140;
}
@keyframes bat-a {
  0%   { transform: translate(-80px, 0) rotate(0deg); }
  20%  { transform: translate(24vw, -34px) rotate(-7deg); }
  40%  { transform: translate(48vw, 24px) rotate(6deg); }
  60%  { transform: translate(70vw, -28px) rotate(-6deg); }
  80%  { transform: translate(90vw, 20px) rotate(5deg); }
  100% { transform: translate(110vw, -12px) rotate(0deg); }
}
@keyframes bat-b {
  0%   { transform: translate(110vw, 0) scaleX(-1) rotate(0deg); }
  25%  { transform: translate(76vw, 42px) scaleX(-1) rotate(7deg); }
  50%  { transform: translate(46vw, -22px) scaleX(-1) rotate(-6deg); }
  75%  { transform: translate(20vw, 32px) scaleX(-1) rotate(6deg); }
  100% { transform: translate(-70px, -16px) scaleX(-1) rotate(0deg); }
}

/* brouillard au ras du sol */
html[data-season="halloween"]::after {
  content: '';
  position: fixed; left: -10%; right: -10%; bottom: 0;
  height: 32vh; z-index: 145; pointer-events: none;
  background:
    radial-gradient(38% 60% at 18% 100%, var(--fog), transparent 70%),
    radial-gradient(30% 55% at 55% 100%, var(--fog), transparent 72%),
    radial-gradient(40% 62% at 88% 100%, var(--fog), transparent 70%);
  filter: blur(6px);
  animation: fog-a 30s ease-in-out infinite alternate;
}
@keyframes fog-a {
  from { transform: translateX(-3%); opacity: .75; }
  to   { transform: translateX(4%); opacity: 1; }
}

/* rangée de citrouilles-lanternes au pied du hero (derrière le texte,
   faces allumées qui vacillent comme des bougies) */
html[data-season="halloween"] .hero__inner::after {
  content: '';
  position: absolute; left: 0; bottom: -46px; z-index: -1;
  width: min(430px, 66%); height: 108px;
  background: no-repeat bottom left / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 110'%3E%3Cdefs%3E%3Cg id='pk'%3E%3Crect x='14.5' y='3.5' width='3' height='6' rx='1.5' fill='%236b8a2e'/%3E%3Cellipse cx='16' cy='19.5' rx='12.5' ry='9.5' fill='%23f07f22'/%3E%3Cellipse cx='16' cy='19.5' rx='6.8' ry='9.5' fill='%23e2711a'/%3E%3Cpath d='M10.2 16.4l3-3.8 3 3.8zM15.8 16.4l3-3.8 3 3.8z' fill='%23ffd76f'/%3E%3Cpath d='M9 23h3l1.5 2 2-2h3l2 2 1.5-2h3l-1.8 3.6-2.2 1.4-2.5-1.5-2.5 1.5-2.5-1.4-2.2-1.6z' fill='%23ffd76f'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23pk' transform='translate(16,34.6) scale(2.6)'/%3E%3Cuse href='%23pk' transform='translate(150,52) scale(2)'/%3E%3Cuse href='%23pk' transform='translate(255,66.5) scale(1.5)'/%3E%3Cuse href='%23pk' transform='translate(322,78) scale(1.1)' opacity='.85'/%3E%3C/svg%3E");
  filter: drop-shadow(0 0 14px rgba(255,150,50,.38));
  animation: candle 3.4s ease-in-out infinite;
  pointer-events: none;
}
@media (max-width: 860px) {
  html[data-season="halloween"] .hero__inner::after { display: none; }
}

/* ══════════ NOËL ══════════ */
html[data-season="noel"] {
  /* accent de Noël = rouge Père Noël (le vert ne reste que sur la
     guirlande, les lumières et les décorations) */
  --green: #c9463a;
  --green-light: #e0685c;
  --green-dark: #a32f26;
  --green-glow: rgba(201,70,58,.14);
  --green-border: rgba(201,70,58,.3);
  --green-bg: rgba(201,70,58,.05);
  --bg: #f7f9f6;
  --bg-alt: #ecf1ea;
  --cream: #eaefe2;
  --cream-dark: #d5ddc6;
  --border: rgba(30,60,45,.08);
  --border-hover: rgba(30,60,45,.16);
  --shadow-green: 0 8px 26px rgba(201,70,58,.3);
  --season-gold: #d8a53c;
  --season-red: #b3382e;
  --snow: rgba(125,150,180,.5);
  --snow-2: rgba(125,150,180,.3);
  --snowcap: #ffffff;
  --drift: #ffffff;
  --frost: rgba(255,255,255,.6);
  --ember: rgba(255,166,64,.22);
}
html.dark-mode[data-season="noel"] {
  --green: #d9584b;
  --green-dark: #e0685c;
  --bg: #0d1211;
  --bg-alt: #141b17;
  --bg-card: #17201b;
  --bg-card-hover: #1d2822;
  --bg-elevated: #1d2822;
  --cream: #222b22;
  --cream-dark: #303a2e;
  --cream-light: #181e17;
  --snow: rgba(255,255,255,.6);
  --snow-2: rgba(255,255,255,.32);
  --snowcap: #dfe9f4;
  --drift: #d7e2ef;
  --frost: rgba(210,228,248,.16);
  --ember: rgba(255,166,64,.15);
}

/* barre de progression canne de sucre */
html[data-season="noel"] #progress {
  z-index: 235;
  background: repeating-linear-gradient(60deg, #b3382e 0 10px, #fff 10px 20px);
  box-shadow: 0 0 0 1px rgba(0,0,0,.06);
  animation: candy 1.4s linear infinite;
}
@keyframes candy { to { background-position-x: 46px; } }

html[data-season="noel"] .hero::before {
  background:
    radial-gradient(56% 46% at 92% 4%, rgba(114,177,36,.14), transparent 60%),
    radial-gradient(46% 42% at 2% 96%, rgba(213,221,198,.45), transparent 60%);
}
/* feu de foyer qui pulse en bas du hero */
html[data-season="noel"] .hero::after {
  content: '';
  position: absolute; left: 50%; bottom: -30px;
  width: min(680px, 80%); height: 220px;
  transform: translateX(-50%);
  background: radial-gradient(50% 60% at 50% 100%, var(--ember), transparent 70%);
  animation: hearth 4.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes hearth {
  0%, 100% { opacity: .55; transform: translateX(-50%) scaleY(.92); }
  50%      { opacity: 1; transform: translateX(-50%) scaleY(1.06); }
}

/* cadeau dans la nav + footer (flotte doucement) */
html[data-season="noel"] .v5nav .brand::before,
html[data-season="noel"] .footer__brand-desc::before {
  content: '';
  width: 26px; height: 26px; flex-shrink: 0;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='5' y='13' width='22' height='15' rx='2.5' fill='%23b3382e'/%3E%3Crect x='3' y='9' width='26' height='6' rx='2' fill='%23c9463a'/%3E%3Crect x='14' y='9' width='4' height='19' fill='%23d8a53c'/%3E%3Cpath d='M16 9.5c-2.5-5.5-9-5.5-9-1.5 0 1.8 4.5 1.5 9 1.5zm0 0c2.5-5.5 9-5.5 9-1.5 0 1.8-4.5 1.5-9 1.5z' fill='%23d8a53c'/%3E%3C/svg%3E");
  filter: drop-shadow(0 3px 6px rgba(179,56,46,.35));
  animation: gift-bob 5s ease-in-out infinite;
  margin: 0 -2px;
}
@keyframes gift-bob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-3px) rotate(3deg); }
}
html[data-season="noel"] .footer__brand-desc { display: block; }
html[data-season="noel"] .footer__brand-desc::before {
  display: inline-block; vertical-align: -6px; margin: 0 8px 0 0;
}

html[data-season="noel"] .btn--green {
  box-shadow: 0 10px 26px -12px rgba(216,165,60,.6);
}

/* LA GUIRLANDE HABITE LA NAV ELLE-MÊME (deux rangées alternées) */
html[data-season="noel"] .v5nav::before,
html[data-season="noel"] .v5nav::after {
  content: '';
  position: absolute; top: 0; left: 14px; right: 14px;
  height: 18px; pointer-events: none;
  background-repeat: repeat-x;
}
html[data-season="noel"] .v5nav::before {
  background-image:
    linear-gradient(rgba(40,55,40,.4) 0 2px, transparent 2px),
    radial-gradient(5px 5px at 24px 8px, #c9463a 60%, transparent 64%),
    radial-gradient(5px 5px at 72px 8px, #6f9f3d 60%, transparent 64%);
  background-size: 100% 2px, 96px 18px, 96px 18px;
  background-position: 0 3px, 0 0, 0 0;
  animation: twinkle-a 1.7s ease-in-out infinite;
}
html[data-season="noel"] .v5nav::after {
  background-image:
    radial-gradient(5px 5px at 48px 11px, #d8a53c 60%, transparent 64%),
    radial-gradient(5px 5px at 0 11px, #4a7fb5 60%, transparent 64%),
    radial-gradient(5px 5px at 96px 11px, #4a7fb5 60%, transparent 64%);
  background-size: 96px 18px;
  animation: twinkle-b 1.7s ease-in-out infinite;
}
@keyframes twinkle-a {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 3px rgba(255,120,90,.7)); }
  50%      { opacity: .6; filter: drop-shadow(0 0 1px rgba(255,120,90,.2)); }
}
@keyframes twinkle-b {
  0%, 100% { opacity: .6; filter: drop-shadow(0 0 1px rgba(255,200,90,.2)); }
  50%      { opacity: 1; filter: drop-shadow(0 0 3px rgba(255,210,110,.8)); }
}

/* cap de neige sur le panneau hero + boule accrochée à son coin */
html[data-season="noel"] .hero__panel::before {
  content: '';
  position: absolute; top: -7px; left: 7%; right: 7%;
  height: 14px; pointer-events: none;
  background:
    radial-gradient(38px 12px at 12% 86%, var(--snowcap) 58%, transparent 60%),
    radial-gradient(46px 14px at 34% 86%, var(--snowcap) 58%, transparent 60%),
    radial-gradient(40px 12px at 56% 86%, var(--snowcap) 58%, transparent 60%),
    radial-gradient(44px 13px at 80% 86%, var(--snowcap) 58%, transparent 60%),
    linear-gradient(to top, var(--snowcap) 0 7px, transparent 7px);
  background-repeat: no-repeat;
  filter: drop-shadow(0 2px 4px rgba(90,110,130,.28));
}
html[data-season="noel"] .hero__panel::after {
  content: '';
  position: absolute; top: -2px; right: 30px;
  width: 20px; height: 54px;
  background: no-repeat bottom center / 20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 54'%3E%3Cpath d='M10 0v26' stroke='%23c9b98a' stroke-width='1.4'/%3E%3Crect x='7.5' y='26' width='5' height='4' rx='1' fill='%23d8a53c'/%3E%3Ccircle cx='10' cy='39' r='10' fill='%234a7fb5'/%3E%3Cpath d='M10 29a10 10 0 0 1 7.5 3.3' stroke='%23d8a53c' stroke-width='2.6' fill='none'/%3E%3Ccircle cx='6.5' cy='35.5' r='2.6' fill='%2386aed4'/%3E%3C/svg%3E");
  transform-origin: top center;
  animation: bauble-sway 5.2s ease-in-out infinite;
}
@keyframes bauble-sway {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(6deg); }
}

/* point du pill = boule dorée */
html[data-season="noel"] .pill .dot {
  background: radial-gradient(circle at 35% 30%, #f4d98d, var(--season-gold));
  box-shadow: 0 0 8px rgba(216,165,60,.55);
}

/* cartes d'avis : coin de papier cadeau (ruban rouge, liseré or) */
html[data-season="noel"] .t-card {
  position: relative;
}
html[data-season="noel"] .t-card::before {
  content: '';
  position: absolute; top: 0; right: 0;
  width: 34px; height: 34px;
  background: linear-gradient(225deg, var(--season-red) 0 44%, var(--season-gold) 44% 52%, transparent 52%);
  border-top-right-radius: inherit;
  border-bottom-left-radius: 26px;
  opacity: .92;
  pointer-events: none;
}

/* lumières le long du dessus du footer */
html[data-season="noel"] .footer {
  border-top: 2px solid rgba(216,165,60,.5);
  position: relative;
}
html[data-season="noel"] .footer::before {
  content: '';
  position: absolute; top: -2px; left: 0; right: 0;
  height: 12px; pointer-events: none;
  background-image:
    radial-gradient(4px 4px at 20px 6px, #d8a53c 60%, transparent 64%),
    radial-gradient(4px 4px at 60px 6px, #c9463a 60%, transparent 64%);
  background-size: 80px 12px;
  background-repeat: repeat-x;
  animation: twinkle-b 2.3s ease-in-out infinite;
}

/* neige : 3 nappes (grosses, moyennes, fines) */
html[data-season="noel"] body::before {
  content: '';
  position: fixed; inset: -90vh 0 0 0;
  z-index: 150; pointer-events: none;
  background-repeat: repeat;
  background-image:
    radial-gradient(4.5px 4.5px at 90px 120px, var(--snow) 55%, transparent 62%),
    radial-gradient(5px 5px at 360px 430px, var(--snow) 55%, transparent 62%),
    radial-gradient(4px 4px at 610px 240px, var(--snow) 55%, transparent 62%);
  background-size: 700px 700px;
  opacity: .85;
  animation: snow-a 11s linear infinite;
}
html[data-season="noel"] body::after {
  content: '';
  position: fixed; inset: -70vh 0 0 0;
  z-index: 150; pointer-events: none;
  background-repeat: repeat;
  background-image:
    radial-gradient(3px 3px at 60px 80px, var(--snow) 55%, transparent 62%),
    radial-gradient(3.5px 3.5px at 270px 260px, var(--snow) 55%, transparent 62%),
    radial-gradient(3px 3px at 430px 150px, var(--snow) 55%, transparent 62%),
    radial-gradient(3.5px 3.5px at 540px 390px, var(--snow) 55%, transparent 62%);
  background-size: 600px 600px;
  opacity: .7;
  animation: snow-b 15s linear infinite;
}
html[data-season="noel"]::before {
  content: '';
  position: fixed; inset: -50vh 0 0 0;
  z-index: 148; pointer-events: none;
  background-repeat: repeat;
  background-image:
    radial-gradient(2px 2px at 40px 60px, var(--snow-2) 55%, transparent 62%),
    radial-gradient(2px 2px at 200px 300px, var(--snow-2) 55%, transparent 62%),
    radial-gradient(2px 2px at 330px 120px, var(--snow-2) 55%, transparent 62%);
  background-size: 420px 420px;
  opacity: .8;
  animation: snow-c 19s linear infinite;
}
@keyframes snow-a { from { background-position: 0 0; } to { background-position: 40px 700px; } }
@keyframes snow-b { from { background-position: 0 0; } to { background-position: -34px 600px; } }
@keyframes snow-c { from { background-position: 0 0; } to { background-position: 26px 420px; } }

/* congèle discret au ras du sol + léger givre en bas des vitres */
html[data-season="noel"]::after {
  content: '';
  position: fixed; inset: 0;
  z-index: 146; pointer-events: none;
  background:
    radial-gradient(52% 56px at 50% 100%, var(--drift) 0 58%, transparent 61%),
    radial-gradient(34% 40px at 16% 100%, var(--drift) 0 58%, transparent 61%),
    radial-gradient(38% 46px at 82% 100%, var(--drift) 0 58%, transparent 61%),
    radial-gradient(150px 150px at 0 100%, var(--frost), transparent 68%),
    radial-gradient(150px 150px at 100% 100%, var(--frost), transparent 68%);
  filter: blur(1px);
  opacity: .8;
}

/* LE TRAÎNEAU DU PÈRE NOËL survole le hero (silhouette + rennes,
   houle douce en SMIL, trajectoire en CSS, nez du meneur qui clignote) */
html[data-season="noel"] .hero__inner::before {
  content: '';
  position: absolute; bottom: -58px; left: 0; z-index: -1;
  width: 240px; height: 76px; opacity: .92;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 76'%3E%3Cdefs%3E%3Cg id='d'%3E%3Cellipse cx='22' cy='17' rx='13' ry='6'/%3E%3Cpath d='M32 12q5-7 8-8' stroke='%23050d1a' stroke-width='4' fill='none'/%3E%3Cellipse cx='42' cy='5' rx='5' ry='3'/%3E%3Cpath d='M41 2l-3-8m3 4l-5-3M44 2l3-8m-3 4l5-3' stroke='%23050d1a' stroke-width='1.6' fill='none'/%3E%3Cpath d='M14 22l-3 10M19 23l1 9M28 23l-2 9M34 21l4 10' stroke='%23050d1a' stroke-width='2' fill='none'/%3E%3Cpath d='M9 14l-4-3' stroke='%23050d1a' stroke-width='2' fill='none'/%3E%3C/g%3E%3C/defs%3E%3Cg%3E%3CanimateTransform attributeName='transform' type='translate' values='0 0;0 4;0 0' dur='5s' repeatCount='indefinite'/%3E%3Cg fill='%23050d1a'%3E%3Cpath d='M18 54q-4 8 6 8h44q8 0 8-6' stroke='%23050d1a' stroke-width='3' fill='none'/%3E%3Cpath d='M76 56q6-2 6-8' stroke='%23050d1a' stroke-width='3' fill='none'/%3E%3Cpath d='M22 36h44l4 14H18q-6 0-4-8z'/%3E%3Cpath d='M22 36v-8h6v8z'/%3E%3Ccircle cx='34' cy='31' r='10'/%3E%3Ccircle cx='40' cy='21' r='6'/%3E%3Cpath d='M36 17q6-9 14-5l-6 6z'/%3E%3Ccircle cx='51' cy='11' r='2'/%3E%3C/g%3E%3Ccircle cx='16' cy='39' r='8' fill='%23b98a3e'/%3E%3Cuse href='%23d' transform='translate(166,20)'/%3E%3Cuse href='%23d' transform='translate(112,30) scale(.82)'/%3E%3Cpath d='M46 20C80 14 120 18 208 25M46 22C78 22 110 28 154 34' stroke='%23050d1a' stroke-width='1.4' fill='none'/%3E%3Ccircle cx='214' cy='26' r='2.4' fill='%23e0453a'%3E%3Canimate attributeName='opacity' values='1;.35;1' dur='2.2s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
  filter: drop-shadow(0 0 12px rgba(226,180,90,.25));
  animation: santa-fly 38s linear infinite;
  pointer-events: none;
}
@keyframes santa-fly {
  0%   { transform: translateX(-260px); }
  100% { transform: translateX(115vw); }
}
@media (max-width: 860px) {
  html[data-season="noel"] .hero__inner::before { display: none; }
}

/* Le hero de design-system.css est display:flex (rangée) — avec le bandeau
   d'édition comme 2e enfant, tout partait en colonne horizontale ET hors
   écran. En saison : on empile proprement. */
html[data-season] .hero {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}
/* stacking context : sans ça, les décors z-index:-1 du hero__inner
   (citrouilles, traîneau) passeraient DERRIÈRE le fond opaque du hero */
html[data-season] .hero__inner {
  position: relative;
  z-index: 0;
}

/* ══════════ ÉDITORIAL (les deux saisons) ══════════
   Bandeau-ticker d'édition + compte à rebours (hero), carte offre de
   saison (panneau hero), note de fin (footer). Textes = pge_season_copy()
   dans includes/season.php, surchargeables par le CMS (clé `seasonal`). */
.season-edition {
  position: relative; z-index: 3;
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 30px;
}
.season-edition__tape {
  flex: 1 1 auto; min-width: 0;
  height: 44px; overflow: hidden; position: relative;
  display: flex; align-items: center;
  border-radius: 16px;
}
.season-ticker__track {
  display: flex; width: max-content;
  animation: ticker 26s linear infinite;
  will-change: transform;
}
.season-ticker__track span {
  white-space: nowrap; padding: 0 26px;
  font-size: .88rem; font-weight: 700; letter-spacing: .02em;
}
@keyframes ticker { to { transform: translateX(-50%); } }
.season-edition__count {
  flex-shrink: 0; white-space: nowrap;
  font-family: var(--display); font-size: .85rem; font-weight: 700;
  padding: 11px 18px; border-radius: 999px;
}
html[data-season="halloween"] .season-edition__tape {
  background: linear-gradient(180deg, #241708, #170e05);
  border: 1px solid rgba(255,140,40,.42);
  color: #f2c58b;
  box-shadow: 0 12px 34px -18px rgba(0,0,0,.55), inset 0 0 26px rgba(255,140,40,.08);
}
html[data-season="halloween"] .season-edition__count {
  background: rgba(255,140,40,.14);
  border: 1px solid rgba(255,140,40,.5);
  color: #f59a4a;
  box-shadow: 0 0 18px rgba(255,140,40,.25);
}
html[data-season="noel"] .season-edition__tape {
  background:
    repeating-linear-gradient(60deg, transparent 0 14px, rgba(216,165,60,.09) 14px 28px),
    linear-gradient(180deg, #8f2b22, #6f2019);
  border: 1px solid rgba(216,165,60,.55);
  color: #f7e7c4;
  box-shadow: 0 12px 34px -18px rgba(120,40,30,.5), inset 0 0 26px rgba(216,165,60,.1);
}
html[data-season="noel"] .season-edition__count {
  background: rgba(216,165,60,.16);
  border: 1px solid rgba(216,165,60,.6);
  color: #c99534;
  box-shadow: 0 0 18px rgba(216,165,60,.3);
}
@media (prefers-reduced-motion: reduce) {
  .season-ticker__track { animation: none; }
}

/* note de fin de page */
.season-note {
  margin: 22px 0 0; padding: 12px 16px;
  text-align: center; font-style: italic;
  font-size: .85rem; color: var(--text-muted);
  border-radius: 12px;
}
html[data-season="halloween"] .season-note { background: rgba(226,113,26,.07); border: 1px dashed rgba(226,113,26,.35); }
html[data-season="noel"] .season-note { background: rgba(216,165,60,.08); border: 1px solid rgba(216,165,60,.4); }

/* ══════════ NOCTURNE (le hero devient la nuit) ══════════
   Le hero bascule en scène nocturne (dégradé nuit + étoiles, texte crème),
   le footer devient un bâtiment éclairé de nuit, et une lanterne suit le
   curseur (créée par home.js, classe .season-lantern, blend screen : elle
   n'éclaire que les zones sombres). */
html[data-season="halloween"] .hero {
  background: linear-gradient(180deg, #0c0913 0%, #150f1c 40%, #251506 84%, var(--bg) 100%);
  color: #f2e8d8;
}
html[data-season="halloween"] .hero::before {
  background:
    radial-gradient(2px 2px at 40px 30px, rgba(255,240,210,.8), transparent 62%),
    radial-gradient(1.6px 1.6px at 150px 95px, rgba(255,240,210,.55), transparent 62%),
    radial-gradient(1.5px 1.5px at 60px 140px, rgba(255,240,210,.5), transparent 62%),
    radial-gradient(60% 50% at 88% 2%, rgba(246,236,201,.38), transparent 55%),
    radial-gradient(70% 60% at 85% 8%, rgba(255,150,60,.13), transparent 62%),
    radial-gradient(60% 50% at 50% 100%, rgba(255,140,40,.1), transparent 60%);
  background-size: 260px 210px, 340px 280px, 210px 190px, auto, auto, auto;
  animation: twinkle-stars 4.2s ease-in-out infinite alternate;
}
@keyframes twinkle-stars { from { opacity: .82; } to { opacity: 1; } }
html[data-season="halloween"] .kinetic { color: #f7edda; }
html[data-season="halloween"] .hero__sub { color: rgba(242,232,216,.82); }
html[data-season="halloween"] .hero .btn--ghost {
  color: #f6ecd9 !important; border-color: rgba(246,236,217,.4);
}
html[data-season="halloween"] .hero .btn--ghost:hover {
  border-color: #f59a4a; color: #f59a4a !important;
}
html[data-season="halloween"] .footer {
  background: linear-gradient(180deg, #181006, #0e0903);
  color: #cdbb9d;
}
html[data-season="halloween"] .footer a { color: #eeb15f; }
html[data-season="halloween"] .footer__heading { color: #f2c58b; }
html[data-season="halloween"] .footer__bottom { border-top-color: rgba(255,140,40,.22); color: #9a8a72; }
html[data-season="halloween"] .footer .season-note {
  color: rgba(235,220,195,.75);
  background: rgba(255,140,40,.07);
  border-color: rgba(255,140,40,.35);
}

html[data-season="noel"] .hero {
  background: linear-gradient(180deg, #0e1b2e 0%, #14273d 44%, #1f3246 80%, var(--bg) 100%);
  color: #eaf1f8;
}
html[data-season="noel"] .hero::before {
  background:
    radial-gradient(1.6px 1.6px at 70px 50px, rgba(255,255,255,.7), transparent 62%),
    radial-gradient(1.4px 1.4px at 210px 110px, rgba(255,255,255,.55), transparent 62%),
    radial-gradient(1.5px 1.5px at 120px 30px, rgba(255,255,255,.6), transparent 62%),
    radial-gradient(56% 46% at 92% 4%, rgba(114,177,36,.16), transparent 60%),
    radial-gradient(60% 50% at 50% 100%, rgba(255,180,80,.14), transparent 62%);
  background-size: 300px 240px, 360px 300px, 250px 220px, auto, auto;
}
html[data-season="noel"] .kinetic { color: #f1f6fb; }
html[data-season="noel"] .hero__sub { color: rgba(234,241,248,.84); }
html[data-season="noel"] .hero .btn--ghost {
  color: #f1f6fb !important; border-color: rgba(230,240,250,.42);
}
html[data-season="noel"] .hero .btn--ghost:hover {
  border-color: #d8a53c; color: #f0d493 !important;
}
html[data-season="noel"] .footer {
  background: linear-gradient(180deg, #13231b, #0c1712);
  color: #c6d6c6;
}
html[data-season="noel"] .footer a { color: #e3c37a; }
html[data-season="noel"] .footer__heading { color: #dcb968; }
html[data-season="noel"] .footer__bottom { border-top-color: rgba(216,165,60,.25); color: #8fa392; }
html[data-season="noel"] .footer .season-note {
  color: rgba(220,232,220,.75);
  background: rgba(216,165,60,.08);
  border-color: rgba(216,165,60,.4);
}

/* sur mobile étroit : l'emblème saisonnier est sacrifié, le numéro de
   téléphone et le menu burger passent avant tout */
@media (max-width: 640px) {
  html[data-season] .v5nav .brand::before { display: none; }
}

/* badge « Fermé » lisible sur la nav glass de nuit */
html[data-season] .v5nav .openbadge--closed {
  background: rgba(127,120,110,.2);
  border-color: rgba(127,120,110,.4);
  color: var(--text-secondary);
}

/* lanterne / chausson de lumière qui suit le curseur */
.season-lantern {
  position: fixed; top: 0; left: 0;
  width: 460px; height: 460px; border-radius: 50%;
  pointer-events: none; z-index: 155;
  mix-blend-mode: screen;
}
html[data-season="halloween"] .season-lantern {
  background: radial-gradient(circle, rgba(255,150,50,.20), rgba(255,120,40,.07) 55%, transparent 70%);
}
html[data-season="noel"] .season-lantern {
  background: radial-gradient(circle, rgba(255,205,105,.14), rgba(150,190,255,.07) 55%, transparent 70%);
}

/* accessibilité : pas de mouvement pour qui le demande */
@media (prefers-reduced-motion: reduce) {
  html[data-season="halloween"] body::before,
  html[data-season="halloween"] body::after,
  html[data-season="halloween"]::before,
  html[data-season="halloween"] .v5nav::after,
  html[data-season="halloween"] .footer::before,
  html[data-season="noel"] .hero__inner::before { display: none; }
  html[data-season="halloween"]::after,
  html[data-season="halloween"] .hero::after,
  html[data-season="halloween"] .hero__inner::after,
  html[data-season="halloween"] .kinetic .word.accent,
  html[data-season="halloween"] .v5nav .brand::before,
  html[data-season="noel"] .hero::after,
  html[data-season="noel"] .v5nav .brand::before,
  html[data-season="noel"] .v5nav::before,
  html[data-season="noel"] .v5nav::after,
  html[data-season="noel"] .hero__panel::after,
  html[data-season="noel"] .footer::before,
  html[data-season="noel"] #progress,
  html[data-season="noel"]::before,
  html[data-season="noel"] body::before,
  html[data-season="noel"] body::after { animation: none; }
}