/* =====================================================================
 *  Skynium ACADEMY - Thèmes de saison : décor commun
 *  Fichier : /saisons/saisons.css
 *  Version : saisons-2026.10.01-02
 *
 *  Partagé par l'ENT, Travel et la page de vote. Chaque page associe
 *  ensuite ces jetons (--sz-*) à ses propres variables, dans son CSS.
 *  Tout est inerte : pointer-events none, aria-hidden, et rien ne bouge
 *  quand l'appareil demande moins d'animations ou qu'un mode
 *  d'accessibilité (TDAH, malvoyant) est actif (html.sz-calme).
 * ===================================================================== */

/* ---------- Halloween : les couleurs ----------
   Clair : une fin d'après-midi d'automne, parchemin et citrouille.
   Sombre : la nuit, violet profond, lune et lueur de bougie. */
html[data-saison="halloween"]{
  --sz-c1:#C2410C; --sz-c2:#6D28D9; --sz-c3:#F59F00; --sz-c4:#3B0764;
  --sz-vert:#2F9E44; --sz-sur-c1:#FFFFFF;
  --sz-fond:#FFF4E6; --sz-carte:#FFFFFF; --sz-creux:#FFF8EF; --sz-bord:#F2D8BD;
  --sz-texte:#2A160A; --sz-doux:#7A5A45;
  --sz-lueur:rgba(232,89,12,.28);
  --sz-toile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='none' stroke='%23B7A08C' stroke-width='.8' opacity='.6'%3E%3Cpath d='M60 0L0 60M60 0L22 60M60 0L0 22M60 0L42 60M60 0L0 42'/%3E%3Cpath d='M46 0q2 12 14 14M33 0q4 23 27 27M20 0q6 34 40 40M8 0q8 44 52 52'/%3E%3C/svg%3E");
}
html[data-saison="halloween"][data-sombre="1"]{
  --sz-c1:#FF7A1A; --sz-c2:#8B5CF6; --sz-c3:#FFC14D; --sz-c4:#12081C;
  --sz-vert:#7CE35A; --sz-sur-c1:#1C0A00;
  --sz-fond:#0C0711; --sz-carte:#19111F; --sz-creux:#22172C; --sz-bord:#3B2650;
  --sz-texte:#F5ECFF; --sz-doux:#B9A6CC;
  --sz-lueur:rgba(255,122,26,.35);
  --sz-toile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='none' stroke='%23B9A6CC' stroke-width='.8' opacity='.35'%3E%3Cpath d='M60 0L0 60M60 0L22 60M60 0L0 22M60 0L42 60M60 0L0 42'/%3E%3Cpath d='M46 0q2 12 14 14M33 0q4 23 27 27M20 0q6 34 40 40M8 0q8 44 52 52'/%3E%3C/svg%3E");
}
html[data-saison="halloween"] ::selection{background:var(--sz-c1);color:var(--sz-sur-c1)}
html[data-saison="halloween"]{scrollbar-color:var(--sz-c1) transparent}

/* ---------- Les deux couches du décor ---------- */
.sz-deco{display:none}
html[data-saison] .sz-deco{display:block}
.sz-fond{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.sz-avant{position:fixed;inset:0;z-index:65;pointer-events:none;overflow:hidden}
.sz-deco svg{display:block;width:100%;height:auto;overflow:visible}

/* Le ciel remplace le fond de la page. */
.sz-ciel{position:absolute;inset:0;
  background:
    radial-gradient(1100px 520px at 88% -8%, rgba(245,159,0,.22), transparent 62%),
    radial-gradient(900px 480px at -5% 105%, rgba(194,65,12,.16), transparent 60%),
    linear-gradient(180deg, #FFF0DC 0%, #FFF6EC 45%, #FFEBD6 100%)}
html[data-sombre="1"] .sz-ciel{
  background:
    radial-gradient(900px 520px at 85% -10%, rgba(139,92,246,.38), transparent 62%),
    radial-gradient(1000px 520px at 10% 112%, rgba(255,122,26,.20), transparent 58%),
    linear-gradient(180deg, #120A1E 0%, #0C0711 55%, #090510 100%)}

/* Étoiles (la nuit seulement), qui scintillent. */
.sz-etoiles{position:absolute;inset:0;opacity:0}
html[data-sombre="1"] .sz-etoiles{opacity:.9;animation:sz-scintille 5s ease-in-out infinite alternate;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, #fff, transparent 60%), radial-gradient(1px 1px at 27% 9%, #fff, transparent 60%),
    radial-gradient(1.6px 1.6px at 44% 22%, #FFE9B8, transparent 60%), radial-gradient(1px 1px at 63% 6%, #fff, transparent 60%),
    radial-gradient(1.2px 1.2px at 71% 31%, #fff, transparent 60%), radial-gradient(1px 1px at 8% 44%, #fff, transparent 60%),
    radial-gradient(1.3px 1.3px at 35% 51%, #E9DDFF, transparent 60%), radial-gradient(1px 1px at 92% 47%, #fff, transparent 60%),
    radial-gradient(1.5px 1.5px at 56% 62%, #fff, transparent 60%), radial-gradient(1px 1px at 18% 73%, #FFE9B8, transparent 60%),
    radial-gradient(1.2px 1.2px at 81% 79%, #fff, transparent 60%), radial-gradient(1px 1px at 47% 88%, #fff, transparent 60%)}
@keyframes sz-scintille{from{opacity:.45}to{opacity:1}}

/* La lune : pleine et lumineuse la nuit, soleil d'automne voilé le jour. */
.sz-lune{position:absolute;top:calc(var(--h-header,70px) + 18px);right:6vw;width:clamp(64px,9vw,128px);
  opacity:.55;filter:drop-shadow(0 0 26px rgba(245,159,0,.55));animation:sz-halo 7s ease-in-out infinite alternate}
.sz-lune .sz-l1{stop-color:#FFE8B0} .sz-lune .sz-l2{stop-color:#F5A13A}
.sz-lune .sz-cratere{fill:rgba(196,110,20,.25)}
html[data-sombre="1"] .sz-lune{opacity:.95;filter:drop-shadow(0 0 34px rgba(255,214,140,.55))}
html[data-sombre="1"] .sz-lune .sz-l1{stop-color:#FFF8E1} html[data-sombre="1"] .sz-lune .sz-l2{stop-color:#F2D48A}
html[data-sombre="1"] .sz-lune .sz-cratere{fill:rgba(160,130,80,.28)}
@keyframes sz-halo{from{transform:scale(1)}to{transform:scale(1.04)}}

/* Les fantômes guettent sur les bords. */
.sz-fantome{position:absolute;width:clamp(34px,4vw,54px);opacity:.32;
  animation:sz-flotte 6.5s ease-in-out infinite alternate}
.sz-fantome.a{left:1.6vw;top:58%}
.sz-fantome.b{right:2.4vw;top:34%;animation-duration:8s;animation-delay:-3s}
.sz-fantome .sz-f-corps{fill:#FFFFFF;stroke:#D9C7F2;stroke-width:1.2}
.sz-fantome .sz-f-oeil{fill:#2A0F3A}
html[data-sombre="1"] .sz-fantome{opacity:.5;filter:drop-shadow(0 0 12px rgba(220,200,255,.45))}
html[data-sombre="1"] .sz-fantome .sz-f-corps{fill:#F1EAFF;stroke:none}
@keyframes sz-flotte{from{transform:translateY(8px) rotate(-3deg)}to{transform:translateY(-16px) rotate(4deg)}}

/* Feuilles d'automne, le jour. */
.sz-feuille{position:absolute;top:-8%;left:var(--g);width:calc(24px * var(--e));opacity:.75;
  animation:sz-tombe var(--d) linear infinite;animation-delay:var(--r)}
.sz-feuille svg{animation:sz-balance 3.2s ease-in-out infinite alternate}
.sz-feuille.f0 path{fill:#E8590C} .sz-feuille.f1 path{fill:#C92A2A} .sz-feuille.f2 path{fill:#D4A017}
.sz-feuille .sz-nervure{fill:none !important;stroke:rgba(80,30,0,.35);stroke-width:1}
html[data-sombre="1"] .sz-feuille{display:none}
@keyframes sz-tombe{from{transform:translateY(0) rotate(0)}to{transform:translateY(118vh) rotate(540deg)}}
@keyframes sz-balance{from{transform:translateX(-22px)}to{transform:translateX(22px)}}

/* La brume, la nuit, au ras du sol. */
.sz-brume{position:absolute;left:-50%;width:200%;height:34vh;bottom:-8vh;opacity:0;
  background:radial-gradient(ellipse at 30% 60%, rgba(190,170,225,.20), transparent 62%),
             radial-gradient(ellipse at 75% 55%, rgba(190,170,225,.16), transparent 60%)}
html[data-sombre="1"] .sz-brume{opacity:1;animation:sz-derive 46s linear infinite alternate}
html[data-sombre="1"] .sz-brume.b{bottom:-14vh;animation-duration:63s;animation-direction:alternate-reverse}
@keyframes sz-derive{from{transform:translateX(-12%)}to{transform:translateX(12%)}}

/* Les chauves-souris traversent de temps en temps. */
.sz-cs{position:absolute;top:var(--t);left:0;width:calc(54px * var(--e));
  animation:sz-vol var(--d) linear infinite;animation-delay:var(--r);will-change:transform}
.sz-cs-bat{animation:sz-ondule 1.5s ease-in-out infinite alternate}
.sz-cs-svg{fill:#2B1A33;filter:drop-shadow(0 2px 3px rgba(0,0,0,.18))}
.sz-cs-svg .sz-oeil{fill:#FFB627}
html[data-sombre="1"] .sz-cs-svg{fill:#05020A;filter:drop-shadow(0 0 7px rgba(255,140,40,.45))}
.sz-aile{transform-origin:32px 15px;animation:sz-bat .19s ease-in-out infinite alternate}
@keyframes sz-bat{from{transform:scaleY(1)}to{transform:scaleY(.28)}}
@keyframes sz-vol{0%{transform:translateX(-14vw)}46%{transform:translateX(114vw)}100%{transform:translateX(114vw)}}
@keyframes sz-ondule{from{transform:translateY(-12px)}to{transform:translateY(12px)}}
.sz-cs.nuee{animation:sz-nuee var(--d) cubic-bezier(.45,.05,.6,1) forwards;animation-delay:var(--r)}
@keyframes sz-nuee{0%{transform:translate(-14vw,8vh)}100%{transform:translate(114vw,-28vh)}}

/* L'araignée descend du bandeau et remonte. */
.sz-araignee{position:absolute;top:0;right:clamp(70px,22vw,360px);width:28px;
  display:flex;flex-direction:column;align-items:center}
.sz-fil{width:1px;height:110px;background:linear-gradient(rgba(140,120,160,.15),rgba(140,120,160,.75));
  animation:sz-descend 9s ease-in-out infinite}
.sz-arai{width:28px;margin-top:-2px;animation:sz-tourne 9s ease-in-out infinite}
.sz-arai svg{fill:#1E1024}
.sz-arai .sz-pattes{stroke:#1E1024;stroke-width:2;stroke-linecap:round;fill:none;
  transform-origin:20px 21px;animation:sz-pattes .5s ease-in-out infinite alternate}
.sz-arai .sz-oeil{fill:#FF3B3B}
html[data-sombre="1"] .sz-arai svg{fill:#08030C;filter:drop-shadow(0 0 5px rgba(185,166,204,.55))}
html[data-sombre="1"] .sz-arai .sz-pattes{stroke:#08030C}
/* Elle reste sous le bandeau, au-dessus du contenu : jamais sur un
   texte. Sur téléphone, la place manque : elle ne vient pas. */
@keyframes sz-descend{0%,100%{height:calc(var(--h-header,70px) - 6px)}45%,60%{height:calc(var(--h-header,70px) + 34px)}}
@media (max-width:820px){.sz-araignee{display:none}}
@keyframes sz-tourne{0%,100%{transform:rotate(0)}50%{transform:rotate(8deg)}}
@keyframes sz-pattes{from{transform:scaleX(1)}to{transform:scaleX(.88)}}

/* ---------- La citrouille (un vrai bouton) ---------- */
.sz-citrouille{position:relative;display:inline-block;vertical-align:middle;width:52px;height:48px;
  padding:0;margin:0 0 0 10px;border:0;background:none;cursor:pointer;border-radius:50%;
  filter:drop-shadow(0 0 10px rgba(255,140,0,.55));animation:sz-lueur 2.6s ease-in-out infinite}
.sz-citrouille:focus-visible{outline:2px solid var(--sz-c2,#6D28D9);outline-offset:3px}
.sz-citrouille svg{width:100%;height:100%;overflow:visible}
.sz-ci-tige{fill:#2B8A3E}
.sz-ci-corps ellipse:nth-child(1),.sz-ci-corps ellipse:nth-child(2){fill:#E8590C}
.sz-ci-corps ellipse:nth-child(3){fill:#FD7E14}
.sz-ci-visage path{fill:#FFD43B;animation:sz-bougie 1.3s steps(3) infinite}
.sz-citrouille.rit{animation:sz-rire .55s ease-in-out 2}
.sz-bulle{position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);white-space:nowrap;
  padding:5px 11px;border-radius:12px 12px 12px 3px;font-size:.82rem;font-weight:700;
  background:var(--sz-c2,#6D28D9);color:#fff;-webkit-text-fill-color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.2);pointer-events:none}
.sz-bulle:empty{display:none}
@keyframes sz-lueur{0%,100%{filter:drop-shadow(0 0 8px rgba(255,140,0,.45))}50%{filter:drop-shadow(0 0 18px rgba(255,170,40,.85))}}
@keyframes sz-bougie{0%{fill:#FFD43B}50%{fill:#FFA94D}100%{fill:#FFE066}}
@keyframes sz-rire{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg) scale(1.08)}75%{transform:rotate(14deg) scale(1.08)}}

/* =====================================================================
   NOËL
   Clair : un matin givré, neige fraîche, bleu glacé, argent, rubans
   rouges. Sombre : la nuit de Noël, bleu nuit, aurore boréale, rouge
   velours et or des guirlandes.
   ===================================================================== */
html[data-saison="noel"]{
  --sz-c1:#C8102E; --sz-c2:#1E6FB8; --sz-c3:#C9971A; --sz-c4:#14532D;
  --sz-vert:#1F8A4C; --sz-sur-c1:#FFFFFF;
  --sz-fond:#EEF5FC; --sz-carte:#FFFFFF; --sz-creux:#F3F8FE; --sz-bord:#D3E3F3;
  --sz-texte:#0F2238; --sz-doux:#4A6180;
  --sz-lueur:rgba(200,16,46,.22); --sz-or:#C9971A;
  --sz-neige:#FFFFFF; --sz-neige-ombre:#C7DCF1;
  /* Coin givré des cartes (un flocon dans l'angle). */
  --sz-toile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='none' stroke='%239CC3E8' stroke-width='1.3' stroke-linecap='round' opacity='.75'%3E%3Cpath d='M44 2v28M31.9 9l24.2 14M31.9 23l24.2-14M44 7l-3-3M44 7l3-3M44 25l-3 3M44 25l3 3'/%3E%3Ccircle cx='14' cy='8' r='1.6' fill='%239CC3E8' stroke='none'/%3E%3Ccircle cx='24' cy='40' r='1.2' fill='%239CC3E8' stroke='none'/%3E%3Ccircle cx='54' cy='46' r='1.4' fill='%239CC3E8' stroke='none'/%3E%3C/svg%3E");
  /* La neige tombée sur le haut des cartes. */
  --sz-congere:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath fill='%23C7DCF1' d='M0 0h300v7c-8 0-10 6-18 6s-9-7-17-7-10 9-19 9-8-6-15-6-11 5-20 5-8-8-16-8-10 7-18 7-8-5-15-5-11 8-20 8-8-7-15-7-10 5-17 5-9-6-16-6-11 7-19 7-8-4-14-4-10 6-18 6-8-7-15-7-9 5-16 5-9-5-15-5-6 3-8 3z'/%3E%3Cpath fill='%23FFFFFF' d='M0 0h300v5c-8 0-10 6-18 6s-9-7-17-7-10 9-19 9-8-6-15-6-11 5-20 5-8-8-16-8-10 7-18 7-8-5-15-5-11 8-20 8-8-7-15-7-10 5-17 5-9-6-16-6-11 7-19 7-8-4-14-4-10 6-18 6-8-7-15-7-9 5-16 5-9-5-15-5-6 3-8 3z'/%3E%3C/svg%3E");
}
html[data-saison="noel"][data-sombre="1"]{
  --sz-c1:#FF5A6A; --sz-c2:#F2C14E; --sz-c3:#3DD68C; --sz-c4:#0A1230;
  --sz-vert:#3DD68C; --sz-sur-c1:#FFFFFF;
  --sz-fond:#070D24; --sz-carte:#0F1834; --sz-creux:#152045; --sz-bord:#26365F;
  --sz-texte:#EEF3FF; --sz-doux:#A8B5D6;
  --sz-lueur:rgba(242,193,78,.32); --sz-or:#F2C14E;
  --sz-neige:#E6EEFF; --sz-neige-ombre:#8FA6D6;
  --sz-toile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='none' stroke='%23F2C14E' stroke-width='1.3' stroke-linecap='round' opacity='.45'%3E%3Cpath d='M44 2v28M31.9 9l24.2 14M31.9 23l24.2-14M44 7l-3-3M44 7l3-3M44 25l-3 3M44 25l3 3'/%3E%3Ccircle cx='14' cy='8' r='1.6' fill='%23F2C14E' stroke='none'/%3E%3Ccircle cx='24' cy='40' r='1.2' fill='%23F2C14E' stroke='none'/%3E%3Ccircle cx='54' cy='46' r='1.4' fill='%23F2C14E' stroke='none'/%3E%3C/svg%3E");
  --sz-congere:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath fill='%237F95C6' d='M0 0h300v7c-8 0-10 6-18 6s-9-7-17-7-10 9-19 9-8-6-15-6-11 5-20 5-8-8-16-8-10 7-18 7-8-5-15-5-11 8-20 8-8-7-15-7-10 5-17 5-9-6-16-6-11 7-19 7-8-4-14-4-10 6-18 6-8-7-15-7-9 5-16 5-9-5-15-5-6 3-8 3z'/%3E%3Cpath fill='%23E6EEFF' d='M0 0h300v5c-8 0-10 6-18 6s-9-7-17-7-10 9-19 9-8-6-15-6-11 5-20 5-8-8-16-8-10 7-18 7-8-5-15-5-11 8-20 8-8-7-15-7-10 5-17 5-9-6-16-6-11 7-19 7-8-4-14-4-10 6-18 6-8-7-15-7-9 5-16 5-9-5-15-5-6 3-8 3z'/%3E%3C/svg%3E");
}
html[data-saison="noel"] ::selection{background:var(--sz-c1);color:#fff}
html[data-saison="noel"]{scrollbar-color:var(--sz-c1) transparent}

/* Le ciel : matin givré / nuit de Noël. */
html[data-saison="noel"] .sz-ciel{
  background:
    radial-gradient(900px 480px at 85% -10%, rgba(255,255,255,.95), transparent 60%),
    radial-gradient(1000px 520px at 0% 0%, rgba(173,212,255,.45), transparent 62%),
    radial-gradient(900px 500px at 100% 100%, rgba(200,16,46,.07), transparent 60%),
    linear-gradient(180deg, #DCEBFA 0%, #EAF3FC 45%, #F7FBFF 100%)}
html[data-saison="noel"][data-sombre="1"] .sz-ciel{
  background:
    radial-gradient(900px 520px at 85% -10%, rgba(242,193,78,.16), transparent 60%),
    radial-gradient(1100px 600px at 10% 110%, rgba(255,90,106,.12), transparent 60%),
    linear-gradient(180deg, #0B1638 0%, #070D24 55%, #050A1C 100%)}

/* L'aurore boréale, la nuit : deux voiles qui ondulent lentement. */
.sz-n-aurore{position:absolute;left:-20%;width:140%;height:46vh;top:-6vh;opacity:0;pointer-events:none;
  filter:blur(28px);transform:skewY(-7deg)}
.sz-n-aurore.a{background:linear-gradient(100deg,transparent 12%,rgba(61,214,140,.30) 32%,rgba(64,170,255,.22) 50%,rgba(150,110,255,.16) 64%,transparent 82%)}
.sz-n-aurore.b{top:4vh;background:linear-gradient(80deg,transparent 20%,rgba(64,170,255,.18) 40%,rgba(61,214,140,.22) 58%,transparent 80%)}
html[data-saison="noel"][data-sombre="1"] .sz-n-aurore{opacity:1;animation:sz-n-aurore 22s ease-in-out infinite alternate}
html[data-saison="noel"][data-sombre="1"] .sz-n-aurore.b{animation-duration:31s;animation-direction:alternate-reverse}
@keyframes sz-n-aurore{0%{transform:skewY(-7deg) translateX(-6%);opacity:.55}50%{opacity:1}100%{transform:skewY(-4deg) translateX(6%);opacity:.7}}

/* L'étoile du berger : rayons qui tournent doucement. */
.sz-n-etoile{position:absolute;top:calc(var(--h-header,70px) + 24px);right:6vw;width:clamp(56px,7.5vw,108px);
  filter:drop-shadow(0 0 18px rgba(242,183,5,.55));animation:sz-halo 6s ease-in-out infinite alternate}
.sz-n-astre{fill:#F2B705}
.sz-n-rayons{stroke:rgba(242,183,5,.45);stroke-width:2.4;stroke-linecap:round;transform-origin:60px 60px;
  animation:sz-n-tourne 40s linear infinite}
html[data-sombre="1"] .sz-n-etoile{filter:drop-shadow(0 0 26px rgba(255,224,138,.8))}
html[data-sombre="1"] .sz-n-astre{fill:#FFE08A}
html[data-sombre="1"] .sz-n-rayons{stroke:rgba(255,224,138,.55)}
@keyframes sz-n-tourne{to{transform:rotate(360deg)}}

/* La neige. Les flocons ronds sont de simples disques (léger) ; un sur
   cinq est un cristal. */
.sz-n-flocon{position:absolute;top:-4vh;left:var(--g);width:calc(7px * var(--e));height:calc(7px * var(--e));
  border-radius:50%;background:var(--sz-neige);box-shadow:0 0 0 1px var(--sz-neige-ombre);opacity:.9;
  animation:sz-n-chute var(--d) linear infinite;animation-delay:var(--r);will-change:transform}
html[data-sombre="1"] .sz-n-flocon{box-shadow:0 0 6px rgba(230,238,255,.7)}
.sz-n-flocon.cristal{width:calc(18px * var(--e));height:auto;background:none;box-shadow:none;border-radius:0}
.sz-n-flocon.cristal svg{stroke:#8CB8E4;stroke-width:2.4;stroke-linecap:round;fill:none}
html[data-sombre="1"] .sz-n-flocon.cristal{box-shadow:none}
html[data-sombre="1"] .sz-n-flocon.cristal svg{stroke:#E6EEFF;filter:drop-shadow(0 0 4px rgba(230,238,255,.6))}
.sz-n-flocon.avant{width:calc(6px * var(--e));height:calc(6px * var(--e));opacity:.85}
.sz-n-flocon.rafale{animation:sz-n-rafale var(--d) cubic-bezier(.3,.1,.6,1) forwards;animation-delay:var(--r)}
@keyframes sz-n-chute{
  0%{transform:translate3d(0,0,0)}
  25%{transform:translate3d(var(--x),28vh,0)}
  50%{transform:translate3d(0,56vh,0)}
  75%{transform:translate3d(calc(var(--x) * -1),84vh,0)}
  100%{transform:translate3d(0,112vh,0)}}
@keyframes sz-n-rafale{from{transform:translate3d(-10vw,0,0)}to{transform:translate3d(calc(var(--x) * 3),112vh,0)}}
/* Sur téléphone, moitié moins de flocons. */
@media (max-width:820px){
  .sz-n-flocon:nth-of-type(2n){display:none}
  .sz-n-flocon.rafale{display:block}
}

/* Les collines enneigées, les sapins et le chalet, au ras du sol. */
.sz-n-collines{position:absolute;left:0;right:0;bottom:0;height:clamp(80px,17vh,170px)}
.sz-n-collines svg{width:100%;height:100%}
.sz-n-colline-a{fill:#DCE9F7} .sz-n-colline-b{fill:#FFFFFF}
.sz-n-sapin{fill:#1F6B47} .sz-n-tronc{fill:#6B4426} .sz-n-neige-sapin{fill:#FFFFFF}
.sz-n-mur{fill:#9C5B34} .sz-n-toit{fill:#7A3E22} .sz-n-neige-toit{fill:#FFFFFF}
.sz-n-porte{fill:#5B2F17} .sz-n-fenetre{fill:#FFD66B;animation:sz-n-veilleuse 3.4s ease-in-out infinite alternate}
html[data-sombre="1"] .sz-n-colline-a{fill:#16244F} html[data-sombre="1"] .sz-n-colline-b{fill:#C9D6F2}
html[data-sombre="1"] .sz-n-sapin{fill:#0D3A2C} html[data-sombre="1"] .sz-n-neige-sapin,
html[data-sombre="1"] .sz-n-neige-toit{fill:#DCE6FA}
html[data-sombre="1"] .sz-n-mur{fill:#4A2A1C} html[data-sombre="1"] .sz-n-toit{fill:#33190F}
html[data-sombre="1"] .sz-n-fenetre{fill:#FFC94D;filter:drop-shadow(0 0 6px rgba(255,201,77,.9))}
@keyframes sz-n-veilleuse{from{opacity:.75}to{opacity:1}}

/* La guirlande lumineuse, accrochée sous l'en-tête. */
.sz-hote{position:relative}
.sz-guirlande{position:absolute;left:0;right:0;top:calc(100% - 6px);height:26px;pointer-events:none;z-index:2}
.sz-guirlande svg{position:absolute;left:0;top:0;width:100%;height:14px;overflow:visible}
.sz-guirlande path{fill:none;stroke:#2E3A2E;stroke-width:1.6;vector-effect:non-scaling-stroke}
html[data-sombre="1"] .sz-guirlande path{stroke:#55603F}
/* Travel et POLLS : un bandeau collant (alerte réseau) suit l'en-tête ;
   la guirlande reste DANS l'en-tête, en bas, pour ne pas passer dessous. */
.tete > .sz-guirlande{top:auto;bottom:4px}
.sz-ampoule{position:absolute;top:6px;width:9px;height:14px;margin-left:-4.5px;
  border-radius:50% 50% 50% 50% / 62% 62% 40% 40%;background:var(--b);
  box-shadow:0 0 8px 2px var(--h);animation:sz-n-clignote 1.8s ease-in-out infinite alternate;animation-delay:var(--r)}
.sz-ampoule::before{content:"";position:absolute;left:2px;top:-3px;width:5px;height:4px;border-radius:1px;background:#4A4F45}
.sz-ampoule.c0{--b:#FF3B4E;--h:rgba(255,59,78,.75)}
.sz-ampoule.c1{--b:#FFC83D;--h:rgba(255,200,61,.75)}
.sz-ampoule.c2{--b:#2BD67B;--h:rgba(43,214,123,.7)}
.sz-ampoule.c3{--b:#3DA5FF;--h:rgba(61,165,255,.75)}
@keyframes sz-n-clignote{0%,30%{opacity:.4;box-shadow:0 0 2px 0 var(--h)}70%,100%{opacity:1;box-shadow:0 0 12px 3px var(--h)}}
@media (max-width:820px){.sz-ampoule:nth-of-type(2n){display:none}}
@media print{.sz-guirlande{display:none !important}}

/* Le traîneau du Père Noël : il traverse le ciel toutes les 50 s
   environ, en haut de l'écran. On peut le toucher. */
.sz-n-traineau{position:absolute;left:0;top:calc(var(--h-header,70px) + 30px);width:clamp(150px,17vw,230px);
  pointer-events:auto;cursor:pointer;transform:translateX(-40vw);
  animation:sz-n-vol 50s linear infinite;animation-delay:6s;-webkit-tap-highlight-color:transparent}
.sz-n-traineau.maintenant{animation:sz-n-passe 10s linear 1}
.sz-n-tr-vol{animation:sz-n-houle 2.6s ease-in-out infinite alternate;
  filter:drop-shadow(0 6px 8px rgba(15,34,56,.22))}
html[data-sombre="1"] .sz-n-tr-vol{filter:drop-shadow(0 0 10px rgba(255,224,138,.35))}
@keyframes sz-n-vol{0%{transform:translate(-40vw,30px)}24%{transform:translate(118vw,-24px)}100%{transform:translate(118vw,-24px)}}
@keyframes sz-n-passe{from{transform:translate(-40vw,30px)}to{transform:translate(118vw,-24px)}}
@keyframes sz-n-houle{from{transform:translateY(-6px) rotate(-2deg)}to{transform:translateY(6px) rotate(1.5deg)}}
.sz-n-traineau .sz-bulle{left:30%;top:-30px;transform:none;border-radius:12px 12px 12px 3px;background:#C8102E}
/* Le dessin. */
.sz-n-renne{fill:#8B5A2B}
.sz-n-pattes path,.sz-n-bois{stroke:#6B4220;stroke-width:2.4;stroke-linecap:round;fill:none}
.sz-n-pattes{transform-box:fill-box;transform-origin:50% 0;animation:sz-n-galop .45s ease-in-out infinite alternate}
.sz-n-nez{fill:#FF2B3A;filter:drop-shadow(0 0 4px #FF2B3A);animation:sz-n-rudolph 1s ease-in-out infinite alternate}
.sz-n-museau{fill:#3A2414}
.sz-n-renes{stroke:#C9971A;stroke-width:1.3;fill:none}
.sz-n-patin{stroke:#C9971A;stroke-width:3;fill:none;stroke-linecap:round}
.sz-n-caisse{fill:#C8102E;stroke:#8E0B20;stroke-width:1}
.sz-n-lisere{stroke:#F2C14E;stroke-width:1.6;fill:none;stroke-linecap:round}
.sz-n-sac{fill:#8B5A2B}
.sz-n-cadeau-a{fill:#1F8A4C} .sz-n-cadeau-b{fill:#1E6FB8}
.sz-n-manteau,.sz-n-bonnet{fill:#D62839} .sz-n-ceinture{fill:#1B1B1B}
.sz-n-visage{fill:#F6C7A0} .sz-n-oeil{fill:#2B1A10} .sz-n-joue{fill:#F28B82} .sz-n-barbe,.sz-n-fourrure{fill:#FFFFFF}
.sz-n-bras{stroke:#D62839;stroke-width:4.4;stroke-linecap:round;fill:none;transform-origin:48px 27px;transition:transform .3s}
.sz-n-traineau.salue .sz-n-bras{transform:rotate(-62deg);animation:sz-n-coucou .35s ease-in-out 4 alternate}
@keyframes sz-n-galop{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}
@keyframes sz-n-rudolph{from{opacity:.75}to{opacity:1}}
@keyframes sz-n-coucou{from{transform:rotate(-50deg)}to{transform:rotate(-80deg)}}

/* Les cadeaux qui tombent du traîneau. */
.sz-n-chute{position:fixed;width:26px;pointer-events:none;
  animation:sz-n-tombe var(--d) cubic-bezier(.4,.05,.7,1) forwards;animation-delay:var(--r)}
.sz-n-chute.c0{--pq:#C8102E;--rb:#F2C14E} .sz-n-chute.c1{--pq:#1F8A4C;--rb:#FFFFFF}
.sz-n-chute.c2{--pq:#1E6FB8;--rb:#F2C14E} .sz-n-chute.c3{--pq:#F2C14E;--rb:#C8102E}
.sz-pq-boite{fill:var(--pq,#C8102E)} .sz-pq-couv{filter:brightness(.88)} .sz-pq-ruban{fill:var(--rb,#F2C14E)}
@keyframes sz-n-tombe{0%{transform:translate(0,0) rotate(0);opacity:1}85%{opacity:1}
  100%{transform:translate(var(--x),105vh) rotate(var(--rot));opacity:0}}

/* ---------- Le cadeau (la mascotte de Noël, un vrai bouton) ---------- */
.sz-citrouille.sz-paquet{--pq:#C8102E;--rb:#F2C14E;filter:drop-shadow(0 0 10px rgba(242,193,78,.55));
  animation:sz-n-lueur 2.8s ease-in-out infinite}
.sz-paquet .sz-pq-noeud{fill:#E0A82E}
.sz-paquet .sz-pq-haut{transform-origin:32px 28px;transition:transform .25s}
.sz-paquet .sz-pq-etincelles path{fill:#FFD66B;opacity:0;transform-origin:center}
.sz-paquet:hover .sz-pq-haut{transform:translateY(-2px) rotate(-3deg)}
.sz-paquet.rit{animation:sz-n-saute .5s ease-in-out 2}
.sz-paquet.rit .sz-pq-haut{transform:translateY(-9px) rotate(-12deg)}
.sz-paquet.rit .sz-pq-etincelles path{animation:sz-n-etincelle .8s ease-out}
.sz-paquet .sz-bulle{background:#C8102E}
html[data-sombre="1"] .sz-paquet .sz-bulle{background:#B3122A}
@keyframes sz-n-lueur{0%,100%{filter:drop-shadow(0 0 7px rgba(242,193,78,.45))}50%{filter:drop-shadow(0 0 16px rgba(255,214,107,.9))}}
@keyframes sz-n-saute{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-8px) rotate(-8deg)}70%{transform:translateY(-4px) rotate(8deg)}}
@keyframes sz-n-etincelle{0%{opacity:0;transform:scale(.4)}40%{opacity:1;transform:scale(1.2)}100%{opacity:0;transform:scale(.8)}}

/* ---------- Calme : moins d'animations, ou mode TDAH / malvoyant ---------- */
html.sz-calme .sz-deco *,html.sz-calme .sz-citrouille,html.sz-calme .sz-citrouille *,
html.sz-calme .sz-guirlande *{animation:none !important}
html.sz-calme .sz-cs,html.sz-calme .sz-feuille,html.sz-calme .sz-araignee,html.sz-calme .sz-brume,
html.sz-calme .sz-n-flocon,html.sz-calme .sz-n-traineau,html.sz-calme .sz-n-chute{display:none}
/* La guirlande reste allumée, sans clignoter. */
html.sz-calme .sz-ampoule{opacity:1;box-shadow:0 0 6px 1px var(--h)}
@media print{.sz-deco,.sz-citrouille{display:none !important}}