/*
 * WZ ONEBLOCK — HABILLAGES SAISONNIERS
 * La feuille style.css reste la source unique de la géométrie et des interactions.
 * Ici : UNIQUEMENT couleurs, bordures (sans changer l'épaisseur), textures,
 * filtres et animations décoratives. Aucun déplacement ni changement de taille.
 */

/* HALLOWEEN : nuit aubergine / cuivre citrouille / lueurs violettes. */
html[data-theme="halloween"] {
  --bg: #170e2b;
  --bg2: #231439;
  --panel: #291a43;
  --panel2: #34224c;
  --line: rgba(217, 153, 255, .29);
  --text: #fff8f2;
  --muted: #d2bedf;
  --cyan: #ffad60;
  --blue: #a66cff;
  --gold: #ffc16a;
  --s-top: #170e2b;
  --s-middle: #281336;
  --s-bottom: #170f28;
  --s-primary-a: #f17a31;
  --s-primary-b: #ac4d34;
  --s-primary-hover-a: #ff984f;
  --s-primary-hover-b: #cc633f;
  --s-bright: #ffc18d;
  --s-border: rgba(230, 148, 255, .43);
  --s-outline: rgba(37, 17, 56, .78);
  --s-outline-hover: rgba(107, 47, 117, .48);
  --s-nav: rgba(38, 22, 60, .86);
  --s-panel-a: rgba(61, 31, 77, .91);
  --s-panel-b: rgba(30, 19, 51, .93);
  --s-card-a: rgba(60, 32, 74, .87);
  --s-card-b: rgba(36, 19, 55, .93);
  --s-soft-glow: rgba(221, 99, 70, .17);
  --s-glow: rgba(255, 129, 58, .25);
  --s-hero-filter: hue-rotate(43deg) saturate(.88) brightness(.76);
  --s-image-overlay: rgba(23, 14, 43, .91);
  --s-image-fade: rgba(23, 14, 43, .20);
  --s-heading: #ffae73;
  --s-text: #ead8e9;
  --s-focus: #ffc38a;
}

/* NOËL : bleu nuit givré + lumières chaudes + touches de fête Minecraft. */
html[data-theme="noel"] {
  --bg: #081729;
  --bg2: #102746;
  --panel: #132b49;
  --panel2: #18355a;
  --line: rgba(192, 224, 248, .29);
  --text: #f7fbff;
  --muted: #c7d9eb;
  --cyan: #d4f7ff;
  --blue: #6ccdf2;
  --gold: #ffd58a;
  --s-top: #081729;
  --s-middle: #0f2744;
  --s-bottom: #0b1b31;
  --s-primary-a: #2a90a4;
  --s-primary-b: #315f9d;
  --s-primary-hover-a: #41a8c2;
  --s-primary-hover-b: #4376bd;
  --s-bright: #fff4cf;
  --s-border: rgba(205, 229, 255, .42);
  --s-outline: rgba(11, 31, 58, .76);
  --s-outline-hover: rgba(36, 78, 129, .42);
  --s-nav: rgba(9, 29, 53, .89);
  --s-panel-a: rgba(24, 54, 89, .93);
  --s-panel-b: rgba(12, 31, 56, .96);
  --s-card-a: rgba(24, 56, 92, .88);
  --s-card-b: rgba(11, 35, 62, .94);
  --s-soft-glow: rgba(126, 202, 242, .15);
  --s-glow: rgba(255, 210, 125, .18);
  --s-hero-filter: hue-rotate(-4deg) saturate(.84) brightness(.93);
  --s-image-overlay: rgba(8, 23, 41, .90);
  --s-image-fade: rgba(8, 23, 41, .16);
  --s-heading: #ffe3a8;
  --s-text: #d8e7f3;
  --s-focus: #ffd28a;
}

/* PÂQUES : nuit sauge / jade / lavande, douce mais toujours fidèle au site sombre. */
html[data-theme="paques"] {
  --bg: #122b31;
  --bg2: #173c40;
  --panel: #204447;
  --panel2: #2c4952;
  --line: rgba(177, 222, 198, .31);
  --text: #f8fff6;
  --muted: #d0e5d9;
  --cyan: #c9efae;
  --blue: #b9a3e9;
  --gold: #f6dfa0;
  --s-top: #122b31;
  --s-middle: #1c3d42;
  --s-bottom: #152e38;
  --s-primary-a: #619e79;
  --s-primary-b: #4a806f;
  --s-primary-hover-a: #80bd8d;
  --s-primary-hover-b: #559a85;
  --s-bright: #ecffe0;
  --s-border: rgba(188, 233, 189, .46);
  --s-outline: rgba(23, 55, 61, .73);
  --s-outline-hover: rgba(104, 145, 111, .34);
  --s-nav: rgba(24, 57, 62, .85);
  --s-panel-a: rgba(45, 86, 80, .90);
  --s-panel-b: rgba(22, 54, 61, .94);
  --s-card-a: rgba(47, 86, 83, .86);
  --s-card-b: rgba(25, 58, 64, .94);
  --s-soft-glow: rgba(217, 167, 225, .13);
  --s-glow: rgba(182, 225, 171, .18);
  --s-hero-filter: hue-rotate(100deg) saturate(.65) brightness(.86);
  --s-image-overlay: rgba(18, 43, 49, .92);
  --s-image-fade: rgba(18, 43, 49, .20);
  --s-heading: #d5f1b6;
  --s-text: #d8e9dd;
  --s-focus: #e6ceff;
}

/* Base chromatique commune : AUCUNE propriété de taille ou de position modifiée. */
html[data-theme]:not([data-theme="default"]) body {
  background: linear-gradient(180deg, var(--s-top) 0%, var(--s-middle) 45%, var(--s-bottom) 100%);
}
html[data-theme]:not([data-theme="default"]) a:focus-visible,
html[data-theme]:not([data-theme="default"]) button:focus-visible,
html[data-theme]:not([data-theme="default"]) summary:focus-visible,
html[data-theme]:not([data-theme="default"]) input:focus-visible { outline-color: var(--s-focus); }
html[data-theme]:not([data-theme="default"]) .nav-wrap {
  background: var(--s-nav);
  border-color: var(--s-border);
}
html[data-theme]:not([data-theme="default"]) .brand strong,
html[data-theme]:not([data-theme="default"]) .accent,
html[data-theme]:not([data-theme="default"]) .overline,
html[data-theme]:not([data-theme="default"]) .eyebrow,
html[data-theme]:not([data-theme="default"]) .text-link,
html[data-theme]:not([data-theme="default"]) .rank-position { color: var(--s-heading); }
html[data-theme]:not([data-theme="default"]) .btn-primary,
html[data-theme]:not([data-theme="default"]) .ranking-tab.selected {
  color: #fff;
  background: linear-gradient(120deg, var(--s-primary-a), var(--s-primary-b));
  border-color: var(--s-bright);
  box-shadow: 0 0 0 1px var(--s-border), 0 0 22px var(--s-glow), inset 0 1px 0 rgba(255,255,255,.2);
}
html[data-theme]:not([data-theme="default"]) .btn-primary:hover {
  background: linear-gradient(120deg, var(--s-primary-hover-a), var(--s-primary-hover-b));
  box-shadow: 0 0 26px var(--s-glow);
}
html[data-theme]:not([data-theme="default"]) .btn-outline,
html[data-theme]:not([data-theme="default"]) .ranking-tab,
html[data-theme]:not([data-theme="default"]) .menu-toggle {
  background: var(--s-outline);
  border-color: var(--s-border);
  color: var(--text);
}
html[data-theme]:not([data-theme="default"]) .btn-outline:hover,
html[data-theme]:not([data-theme="default"]) .btn-ghost:hover {
  background: var(--s-outline-hover);
  border-color: var(--cyan);
}
html[data-theme]:not([data-theme="default"]) .btn-ghost { color: var(--s-heading); border-color: var(--s-border); }
html[data-theme]:not([data-theme="default"]) .panel,
html[data-theme]:not([data-theme="default"]) .dialog {
  background: linear-gradient(135deg, var(--s-panel-a), var(--s-panel-b));
  border-color: var(--line);
}
html[data-theme]:not([data-theme="default"]) .feature-card {
  background: linear-gradient(115deg, var(--s-card-a), var(--s-card-b));
  border-color: var(--s-border);
}
html[data-theme]:not([data-theme="default"]) .feature-card::before {
  background: radial-gradient(circle at 22% 50%, var(--s-soft-glow), transparent 55%);
}
html[data-theme]:not([data-theme="default"]) .feature-card:hover {
  border-color: var(--cyan);
  box-shadow: 0 20px 50px var(--s-soft-glow);
}
html[data-theme]:not([data-theme="default"]) .round-arrow,
html[data-theme]:not([data-theme="default"]) .product-art,
html[data-theme]:not([data-theme="default"]) .faq details,
html[data-theme]:not([data-theme="default"]) .ranking-heading {
  background: var(--s-outline);
  border-color: var(--line);
}
html[data-theme]:not([data-theme="default"]) .product-art .icon,
html[data-theme]:not([data-theme="default"]) .support-option > .icon,
html[data-theme]:not([data-theme="default"]) .join-icon,
html[data-theme]:not([data-theme="default"]) .small-info .icon,
html[data-theme]:not([data-theme="default"]) .empty-state .icon { color: var(--s-heading); }
html[data-theme]:not([data-theme="default"]) .product-tag { background: var(--s-outline); border-color: var(--s-border); color: var(--text); }
html[data-theme]:not([data-theme="default"]) .feature-copy p,
html[data-theme]:not([data-theme="default"]) .hero-description,
html[data-theme]:not([data-theme="default"]) .page-head p,
html[data-theme]:not([data-theme="default"]) .shop-card p,
html[data-theme]:not([data-theme="default"]) .support-option p,
html[data-theme]:not([data-theme="default"]) .faq details p,
html[data-theme]:not([data-theme="default"]) .join-copy p { color: var(--s-text); }
html[data-theme]:not([data-theme="default"]) .hero h1 span {
  background: linear-gradient(95deg, #fff 6%, var(--s-heading) 88%);
  background-clip: text;
  -webkit-background-clip: text;
}
html[data-theme]:not([data-theme="default"]) .hero-visual img { filter: var(--s-hero-filter); }
html[data-theme]:not([data-theme="default"]) .hero-visual::before {
  background: linear-gradient(90deg, var(--bg) 0%, var(--s-image-overlay) 9%, var(--s-image-fade) 28%, transparent 48%),
    linear-gradient(0deg, var(--bg) 0%, transparent 26%);
}
html[data-theme]:not([data-theme="default"]) .hero::after {
  background: linear-gradient(0deg, var(--bg), transparent);
}
html[data-theme]:not([data-theme="default"]) .join-box,
html[data-theme]:not([data-theme="default"]) .page-head {
  background-image: linear-gradient(95deg, var(--s-image-overlay) 10%, var(--s-card-a) 60%, var(--s-image-fade) 100%), url('../images/banner-islands.webp');
  border-color: var(--s-border);
}
html[data-theme]:not([data-theme="default"]) .join-box::before {
  background: linear-gradient(90deg, var(--s-panel-b), var(--s-card-a) 65%, transparent);
}
html[data-theme]:not([data-theme="default"]) .toast { background: var(--panel); border-color: var(--cyan); }
html[data-theme]:not([data-theme="default"]) .primary-navigation a[aria-current="page"]::after {
  background: linear-gradient(90deg,#fff,var(--cyan));
}
html[data-theme]:not([data-theme="default"]) .dialog { color: var(--text); }

/* Motifs d'ambiance non interactifs : le DOM et les boutons ne bougent pas. */
html[data-theme="halloween"] body::before {
  background: radial-gradient(circle at 79% 10%, rgba(255, 119, 47, .13), transparent 25%),
    radial-gradient(circle at 14% 55%, rgba(132, 65, 186, .21), transparent 42%);
}
html[data-theme="halloween"] .hero::before {
  background: radial-gradient(circle at 76% 25%, rgba(242, 96, 35, .18), transparent 42%),
    radial-gradient(circle at 35% 86%, rgba(125, 61, 169, .24), transparent 57%);
}
html[data-theme="noel"] body::before {
  background-image: radial-gradient(circle, rgba(239, 255, 255, .48) 1px, transparent 2px),
    radial-gradient(circle, rgba(239, 255, 255, .24) 1px, transparent 2px),
    radial-gradient(ellipse at 68% 0%, rgba(126, 211, 235, .12), transparent 62%);
  background-size: 150px 190px, 235px 280px, 100% 100%;
  background-position: 0 0, 63px 40px, center;
  animation: wz-snow 36s linear infinite;
}
html[data-theme="noel"] .hero::before {
  background: radial-gradient(circle at 73% 21%, rgba(191, 246, 240, .17), transparent 42%),
    radial-gradient(circle at 22% 87%, rgba(50, 143, 145, .24), transparent 56%);
}
html[data-theme="paques"] body::before {
  background: radial-gradient(ellipse 13px 18px at 89% 27%, rgba(218, 180, 244, .14) 40%, transparent 55%),
    radial-gradient(ellipse 10px 14px at 82% 40%, rgba(248, 224, 163, .12) 40%, transparent 55%),
    radial-gradient(ellipse 13px 18px at 96% 51%, rgba(189, 232, 186, .17) 40%, transparent 55%),
    radial-gradient(ellipse at 70% 2%, rgba(152, 215, 159, .14), transparent 60%);
}
html[data-theme="paques"] .hero::before {
  background: radial-gradient(circle at 77% 23%, rgba(201, 165, 235, .17), transparent 43%),
    radial-gradient(circle at 22% 87%, rgba(143, 221, 156, .20), transparent 57%);
}
@keyframes wz-snow { to { background-position: 0 280px, 63px 340px, center; } }
@media (prefers-reduced-motion: reduce) {
  html[data-theme="noel"] body::before { animation: none; }
}
@media (max-width: 760px) {
  /* Reprendre le dégradé mobile d'origine pour garantir la lisibilité de l'image. */
  html[data-theme]:not([data-theme="default"]) .hero-visual::before {
    background: linear-gradient(0deg, var(--bg), transparent 23%),
      linear-gradient(180deg, var(--bg), transparent 15%),
      linear-gradient(90deg, var(--bg) 0%, transparent 15%, transparent 85%, var(--bg) 100%);
  }
  html[data-theme]:not([data-theme="default"]) .primary-navigation {
    background: var(--s-panel-b);
    border-color: var(--s-border);
  }
  html[data-theme]:not([data-theme="default"]) .primary-navigation a[aria-current="page"] {
    background: var(--s-outline-hover);
  }
}

/* ================================================================
   WZ ONEBLOCK V2 — DÉCORS SAISONNIERS ILLUSTRÉS
   Même géométrie et mêmes interactions que le site classique :
   la décoration est exclusivement en surimpression non interactive.
   Les SVG sont locaux (pas de CDN, pas de requêtes tierces).
   ================================================================ */
html[data-theme="halloween"] {
  --season-hero: url('../seasons/halloween-hero.svg');
  --season-corner: url('../seasons/halloween-corner.svg');
  --season-icon: url('../seasons/halloween-icon.svg');
  --season-footer: url('../seasons/halloween-footer.svg');
  --season-accent: #ffab63;
  --season-decoration-glow: rgba(238, 109, 44, .23);
}
html[data-theme="noel"] {
  --season-hero: url('../seasons/noel-hero-assets-v4.png');
  --season-page: url('../seasons/noel-icon-assets-v4.png');
  --season-corner: url('../seasons/noel-corner-assets-v4.png');
  --season-icon: url('../seasons/noel-icon-assets-v4.png');
  --season-footer: url('../seasons/noel-footer-assets-v4.png');
  --season-nav: url('../seasons/noel-nav-assets-v4.png');
  --season-accent: #b8f6ee;
  --season-decoration-glow: rgba(190, 245, 247, .19);
}
html[data-theme="paques"] {
  --season-hero: url('../seasons/paques-hero.svg');
  --season-corner: url('../seasons/paques-corner.svg');
  --season-icon: url('../seasons/paques-icon.svg');
  --season-footer: url('../seasons/paques-footer.svg');
  --season-accent: #d5efb0;
  --season-decoration-glow: rgba(187, 235, 159, .15);
}

/* Décors injectés une seule fois : aucun nouvel élément dans les flux du site. */
.seasonal-scene { display: none; }
html[data-theme]:not([data-theme="default"]) .seasonal-scene {
  display: block;
  position: absolute;
  pointer-events: none;
  user-select: none;
  background-repeat: no-repeat;
  background-image: var(--season-hero);
  z-index: 0;
  overflow: hidden;
}
html[data-theme]:not([data-theme="default"]) .seasonal-scene--hero {
  inset: 0 0 0 auto;
  width: min(61%, 980px);
  background-position: right bottom;
  background-size: contain;
  opacity: .98;
}
html[data-theme]:not([data-theme="default"]) .seasonal-scene--page {
  inset: 0 0 0 auto;
  width: min(51%, 540px);
  background-position: right bottom;
  background-size: auto 220%;
  opacity: .73;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 33%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 33%);
}
html[data-theme]:not([data-theme="default"]) .seasonal-scene--join {
  inset: 0 0 0 auto;
  width: min(42%, 480px);
  background-position: right bottom;
  background-size: auto 230%;
  opacity: .48;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 40%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 40%);
}
/* Les textes et les boutons passent devant l'illustration sans changer de place. */
html[data-theme]:not([data-theme="default"]) .page-head > :not(.seasonal-scene),
html[data-theme]:not([data-theme="default"]) .join-box > :not(.seasonal-scene) {
  position: relative;
  z-index: 1;
}
html[data-theme]:not([data-theme="default"]) .hero-content { z-index: 2; }

/* Le CSS historique fixe ses bannières avec !important : ces deux thèmes
   reprennent la priorité uniquement sur les dégradés, jamais sur la taille. */
html[data-theme="halloween"] .page-head,
html[data-theme="halloween"] .join-box {
  background-image: linear-gradient(100deg, #211430 7%, #321e45 58%, #51274c 100%) !important;
}
html[data-theme="noel"] .page-head,
html[data-theme="noel"] .join-box {
  background-image: linear-gradient(100deg, #0c203b 7%, #163a63 56%, #1d5f82 100%) !important;
}
html[data-theme="paques"] .page-head,
html[data-theme="paques"] .join-box {
  background-image: linear-gradient(100deg, #18383c 7%, #23564b 58%, #456657 100%) !important;
}

/* Toiles d'araignée, guirlandes lumineuses ou rameaux dans le HEADER. */
html[data-theme]:not([data-theme="default"]) .nav-wrap {
  position: relative;
  isolation: isolate;
}
html[data-theme]:not([data-theme="default"]) .nav-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
}
html[data-theme="halloween"] .nav-wrap::before {
  background-image: var(--season-corner), var(--season-corner);
  background-position: left -10px top -4px, right -10px top -4px;
  background-size: 104px auto, 104px auto;
  background-repeat: no-repeat;
  opacity: .46;
}
html[data-theme="noel"] .nav-wrap::before {
  background: url('../seasons/noel-nav.svg') repeat-x left top -3px / 490px 39px;
  opacity: .85;
}
html[data-theme="paques"] .nav-wrap::before {
  background-image: var(--season-corner), var(--season-corner);
  background-position: left -5px bottom -4px, right -5px bottom -4px;
  background-size: 80px auto, 80px auto;
  background-repeat: no-repeat;
  opacity: .37;
}
/* Accents sur le logo original sans remplacer son image ni modifier sa taille. */
html[data-theme]:not([data-theme="default"]) .brand { position: relative; }
html[data-theme]:not([data-theme="default"]) .brand img {
  filter: drop-shadow(0 0 9px var(--season-decoration-glow));
}
html[data-theme]:not([data-theme="default"]) .site-header .brand::after,
html[data-theme]:not([data-theme="default"]) .footer-brand .brand::after {
  content: "";
  position: absolute;
  width: 25px;
  height: 25px;
  top: -7px;
  left: 28px;
  pointer-events: none;
  background: var(--season-icon) center/contain no-repeat;
  filter: drop-shadow(0 0 4px var(--season-decoration-glow));
}

/* Une seule empreinte saisonnière par carte : pas de déco sur les boutons. */
html[data-theme]:not([data-theme="default"]) .feature-card::after,
html[data-theme]:not([data-theme="default"]) .shop-card::after,
html[data-theme]:not([data-theme="default"]) .support-option::after,
html[data-theme]:not([data-theme="default"]) .reward-card::after,
html[data-theme]:not([data-theme="default"]) .info-panel::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  top: 6px;
  right: 7px;
  width: 47px;
  height: 47px;
  background: var(--season-icon) center/contain no-repeat;
  opacity: .24;
}
html[data-theme]:not([data-theme="default"]) .shop-card,
html[data-theme]:not([data-theme="default"]) .support-option,
html[data-theme]:not([data-theme="default"]) .reward-card,
html[data-theme]:not([data-theme="default"]) .info-panel { position: relative; }
html[data-theme]:not([data-theme="default"]) .feature-card > *,
html[data-theme]:not([data-theme="default"]) .shop-card > *,
html[data-theme]:not([data-theme="default"]) .support-option > * { position: relative; z-index: 1; }
/* Préserver les étiquettes positionnées sur les fiches de boutique. */
html[data-theme]:not([data-theme="default"]) .shop-card > .product-tag {
  position: absolute;
}
html[data-theme="noel"] .panel,
html[data-theme="noel"] .feature-card { box-shadow: 0 8px 36px rgba(19, 126, 143, .10), inset 0 1px 0 rgba(223, 254, 255, .09); }
html[data-theme="halloween"] .panel,
html[data-theme="halloween"] .feature-card { box-shadow: 0 8px 36px rgba(101, 36, 114, .14), inset 0 1px 0 rgba(255, 172, 108, .065); }
html[data-theme="paques"] .panel,
html[data-theme="paques"] .feature-card { box-shadow: 0 8px 36px rgba(62, 126, 94, .12), inset 0 1px 0 rgba(222, 255, 203, .07); }

/* Paysage en pied de page, derrière les liens, sur les cinq pages. */
html[data-theme]:not([data-theme="default"]) .site-footer {
  position: relative;
  isolation: isolate;
}
html[data-theme]:not([data-theme="default"]) .site-footer::before {
  content: "";
  position: absolute;
  inset: -115px 0 0;
  z-index: -1;
  pointer-events: none;
  background: var(--season-footer) center bottom/ min(100%, 1200px) auto no-repeat;
  opacity: .72;
}
html[data-theme]:not([data-theme="default"]) .footer-inner {
  position: relative;
  z-index: 1;
}

/* Détails d'atmosphère : brume, neige et pollen. Images légères, sans JS lourd. */
html[data-theme="halloween"] .seasonal-scene--hero::after,
html[data-theme="halloween"] .seasonal-scene--page::after {
  content: "";
  position: absolute;
  inset: 64% -10% -10%;
  background: radial-gradient(ellipse at 40% 65%, rgba(207,147,211,.19), transparent 60%),
              radial-gradient(ellipse at 74% 65%, rgba(246,148,81,.18), transparent 54%);
  filter: blur(13px);
  animation: wz-v2-mist 15s ease-in-out infinite alternate;
}
html[data-theme="noel"] .seasonal-scene--hero::after,
html[data-theme="noel"] .seasonal-scene--page::after,
html[data-theme="noel"] .seasonal-scene--join::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.72) 1.6px,transparent 2.6px),
                    radial-gradient(circle, rgba(206,247,252,.46) 1px,transparent 2px);
  background-size: 97px 113px, 147px 169px;
  background-position: 10px 0, 40px 20px;
  opacity: .66;
  animation: wz-v2-flakes 24s linear infinite;
}
html[data-theme="paques"] .seasonal-scene--hero::after,
html[data-theme="paques"] .seasonal-scene--page::after {
  content: "";
  position: absolute;
  inset: 8%;
  background-image: radial-gradient(circle,rgba(253,240,184,.8) 2px,transparent 3px),
                    radial-gradient(circle,rgba(214,183,242,.48) 2px,transparent 3px);
  background-size: 117px 149px, 193px 211px;
  opacity: .62;
  animation: wz-v2-pollen 17s ease-in-out infinite alternate;
}
@keyframes wz-v2-mist { from{transform:translateX(-4%);opacity:.57;} to{transform:translateX(5%);opacity:1;} }
@keyframes wz-v2-flakes { to { background-position: 10px 565px, 40px 620px; } }
@keyframes wz-v2-pollen { to { transform:translate3d(5px,-22px,0);opacity:.85; } }

@media (max-width: 1000px) {
  html[data-theme]:not([data-theme="default"]) .seasonal-scene--hero { width: 63%; }
  html[data-theme]:not([data-theme="default"]) .seasonal-scene--page { opacity: .45; }
}
@media (max-width: 760px) {
  /* Sur téléphone : illustrations uniquement sur la zone photo, texte protégé. */
  html[data-theme]:not([data-theme="default"]) .seasonal-scene--hero {
    inset: auto 0 0 0;
    width: 100%;
    height: 375px;
    background-position: right bottom;
    background-size: auto 100%;
    opacity: .79;
  }
  html[data-theme]:not([data-theme="default"]) .seasonal-scene--page {
    inset: 0 0 0 auto;
    width: 55%;
    background-position: right bottom;
    opacity: .19;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 65%);
    mask-image:linear-gradient(90deg,transparent,#000 65%);
  }
  html[data-theme]:not([data-theme="default"]) .seasonal-scene--join { opacity: .23; width: 45%; }
  html[data-theme]:not([data-theme="default"]) .site-footer::before { opacity: .47; }
  html[data-theme="noel"] .nav-wrap::before { background-size: 360px 31px; opacity: .54; }
  html[data-theme="halloween"] .nav-wrap::before { opacity: .23; }
  html[data-theme]:not([data-theme="default"]) .brand::after { opacity: .72; }
}
@media (max-width: 490px) {
  html[data-theme]:not([data-theme="default"]) .seasonal-scene--hero { height: 335px; opacity: .64; }
  html[data-theme]:not([data-theme="default"]) .seasonal-scene--join { opacity: .12; }
  html[data-theme]:not([data-theme="default"]) .nav-wrap::before { opacity: .30; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme]:not([data-theme="default"]) .seasonal-scene::after { animation: none !important; }
}

/* Ornements lisibles dans les coins de la bannière : toile, flocon ou fleurs. */
html[data-theme]:not([data-theme="default"]) .seasonal-scene--hero::before,
html[data-theme]:not([data-theme="default"]) .seasonal-scene--page::before {
  content: "";
  position: absolute;
  inset: 0 0 auto auto;
  width: clamp(110px, 16vw, 210px);
  height: clamp(110px, 16vw, 210px);
  background: var(--season-corner) right top/contain no-repeat;
  pointer-events: none;
  opacity: .64;
  transform: scaleX(-1);
}
html[data-theme="noel"] .seasonal-scene--hero::before,
html[data-theme="noel"] .seasonal-scene--page::before { opacity: .34; }
html[data-theme="paques"] .seasonal-scene--hero::before,
html[data-theme="paques"] .seasonal-scene--page::before { opacity: .46; }
@media (max-width:760px) {
  html[data-theme]:not([data-theme="default"]) .seasonal-scene--hero::before { opacity: .23; }
}


/* Ajustements de caractère pour le nouveau Noël : plus chaleureux, plus festif. */
html[data-theme="noel"] .btn-primary,
html[data-theme="noel"] .ranking-tab.selected {
  box-shadow: 0 0 0 1px rgba(255, 224, 154, .26), 0 0 28px rgba(120, 194, 255, .20), inset 0 1px 0 rgba(255,255,255,.25);
}
html[data-theme="noel"] .btn-outline:hover,
html[data-theme="noel"] .btn-ghost:hover {
  border-color: var(--gold);
}
html[data-theme="noel"] .nav-wrap {
  box-shadow: 0 8px 28px rgba(3, 12, 24, .26), inset 0 1px 0 rgba(255,255,255,.06);
}
html[data-theme="noel"] .site-footer::before { opacity: .82; }
html[data-theme="noel"] .seasonal-scene--hero { opacity: 1; }
html[data-theme="noel"] .seasonal-scene--page { opacity: .84; }
html[data-theme="noel"] .seasonal-scene--join { opacity: .56; }


/* ================================================================
   NOËL — version finale basée sur les assets fournis par l'utilisateur.
   Les emplacements du site restent identiques ; seuls les visuels changent.
   ================================================================ */
html[data-theme="noel"] .seasonal-scene--hero {
  width: min(59%, 860px);
  background-image: var(--season-hero);
  background-position: right center;
  background-size: contain;
  opacity: 1;
}
html[data-theme="noel"] .seasonal-scene--page,
html[data-theme="noel"] .seasonal-scene--join {
  background-image: var(--season-page);
  background-position: right 16px center;
  background-repeat: no-repeat;
}
html[data-theme="noel"] .seasonal-scene--page {
  width: min(37%, 410px);
  background-size: min(92%, 320px) auto;
  opacity: .95;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 28%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 28%);
}
html[data-theme="noel"] .seasonal-scene--join {
  width: min(35%, 360px);
  background-size: min(90%, 285px) auto;
  opacity: .82;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 36%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 36%);
}
html[data-theme="noel"] .nav-wrap::before {
  inset: -8px 10px auto 10px;
  height: 58px;
  border-radius: 22px 22px 0 0;
  background: var(--season-nav) center top / min(100%, 980px) auto no-repeat;
  opacity: .94;
}
html[data-theme="noel"] .site-header .brand::after,
html[data-theme="noel"] .footer-brand .brand::after {
  width: 23px;
  height: 23px;
  top: -6px;
  left: 30px;
}
html[data-theme="noel"] .feature-card::after,
html[data-theme="noel"] .shop-card::after,
html[data-theme="noel"] .support-option::after,
html[data-theme="noel"] .reward-card::after,
html[data-theme="noel"] .info-panel::after {
  width: 52px;
  height: 52px;
  top: 4px;
  right: 4px;
  opacity: .28;
}
html[data-theme="noel"] .site-footer::before {
  inset: -90px 0 0;
  background: var(--season-footer) center bottom / min(100%, 1380px) auto no-repeat;
  opacity: .94;
}
html[data-theme="noel"] .seasonal-scene--hero::before,
html[data-theme="noel"] .seasonal-scene--page::before {
  width: clamp(128px, 18vw, 240px);
  height: clamp(128px, 18vw, 240px);
  opacity: .82;
}
html[data-theme="noel"] .seasonal-scene--hero::after,
html[data-theme="noel"] .seasonal-scene--page::after,
html[data-theme="noel"] .seasonal-scene--join::after {
  opacity: .56;
}
@media (max-width: 1000px) {
  html[data-theme="noel"] .seasonal-scene--hero { width: min(62%, 760px); }
  html[data-theme="noel"] .seasonal-scene--page { width: min(38%, 330px); background-size: min(88%, 260px) auto; }
}
@media (max-width: 760px) {
  html[data-theme="noel"] .seasonal-scene--hero {
    inset: auto 0 0 0;
    width: 100%;
    height: 360px;
    background-position: center bottom;
    background-size: auto 96%;
    opacity: .88;
  }
  html[data-theme="noel"] .seasonal-scene--page,
  html[data-theme="noel"] .seasonal-scene--join {
    width: 44%;
    background-size: 88% auto;
    background-position: right bottom;
  }
  html[data-theme="noel"] .nav-wrap::before {
    inset: -4px 8px auto 8px;
    height: 42px;
    background-size: min(100%, 720px) auto;
    opacity: .82;
  }
  html[data-theme="noel"] .site-footer::before {
    inset: -45px 0 0;
    background-size: min(100%, 1080px) auto;
    opacity: .74;
  }
  html[data-theme="noel"] .seasonal-scene--hero::before,
  html[data-theme="noel"] .seasonal-scene--page::before { opacity: .54; }
}
@media (max-width: 490px) {
  html[data-theme="noel"] .seasonal-scene--hero { height: 320px; }
  html[data-theme="noel"] .seasonal-scene--page,
  html[data-theme="noel"] .seasonal-scene--join { width: 49%; background-size: 94% auto; }
  html[data-theme="noel"] .nav-wrap::before { opacity: .72; }
}


/* ================================================================
   WZ OneBlock — Noël V5 basé exactement sur les 5 assets fournis.
   Cette section surcharge les versions précédentes pour éviter tout doute.
   ================================================================ */
html[data-theme="noel"] {
  --season-hero: url('../seasons/noel-hero-user-v5.png');
  --season-page: url('../seasons/noel-icon-user-v5.png');
  --season-corner: url('../seasons/noel-corner-user-v5.png');
  --season-icon: url('../seasons/noel-icon-user-v5.png');
  --season-footer: url('../seasons/noel-footer-user-v5.png');
  --season-nav: url('../seasons/noel-nav-user-v5.png');
}
html[data-theme="noel"] .seasonal-scene--hero {
  width: min(62%, 920px) !important;
  background-image: var(--season-hero) !important;
  background-position: right bottom !important;
  background-size: contain !important;
  opacity: 1 !important;
}
html[data-theme="noel"] .seasonal-scene--page,
html[data-theme="noel"] .seasonal-scene--join {
  background-image: var(--season-page) !important;
  background-repeat: no-repeat !important;
  background-position: right 18px bottom !important;
}
html[data-theme="noel"] .seasonal-scene--page {
  width: min(36%, 400px) !important;
  background-size: min(90%, 300px) auto !important;
  opacity: .96 !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 28%) !important;
  mask-image: linear-gradient(90deg, transparent 0%, #000 28%) !important;
}
html[data-theme="noel"] .seasonal-scene--join {
  width: min(34%, 340px) !important;
  background-size: min(88%, 260px) auto !important;
  opacity: .86 !important;
}
html[data-theme="noel"] .nav-wrap::before {
  inset: -6px 8px auto 8px !important;
  height: 58px !important;
  background: var(--season-nav) center top / min(100%, 1080px) auto no-repeat !important;
  opacity: .98 !important;
}
html[data-theme="noel"] .site-footer::before {
  inset: -85px 0 0 !important;
  background: var(--season-footer) center bottom / min(100%, 1450px) auto no-repeat !important;
  opacity: .97 !important;
}
html[data-theme="noel"] .seasonal-scene--hero::before,
html[data-theme="noel"] .seasonal-scene--page::before {
  background: var(--season-corner) right top / contain no-repeat !important;
  width: clamp(140px, 19vw, 250px) !important;
  height: clamp(140px, 19vw, 250px) !important;
  opacity: .82 !important;
}
html[data-theme="noel"] .feature-card::after,
html[data-theme="noel"] .shop-card::after,
html[data-theme="noel"] .support-option::after,
html[data-theme="noel"] .reward-card::after,
html[data-theme="noel"] .info-panel::after {
  background: var(--season-icon) center/contain no-repeat !important;
  width: 54px !important;
  height: 54px !important;
  opacity: .28 !important;
}
@media (max-width: 760px) {
  html[data-theme="noel"] .seasonal-scene--hero {
    width: 100% !important;
    height: 360px !important;
    background-position: center bottom !important;
    background-size: auto 96% !important;
    opacity: .90 !important;
  }
  html[data-theme="noel"] .seasonal-scene--page,
  html[data-theme="noel"] .seasonal-scene--join {
    width: 46% !important;
    background-position: right bottom !important;
    background-size: 92% auto !important;
  }
  html[data-theme="noel"] .nav-wrap::before {
    height: 42px !important;
    background-size: min(100%, 760px) auto !important;
  }
  html[data-theme="noel"] .site-footer::before {
    inset: -40px 0 0 !important;
    background-size: min(100%, 1100px) auto !important;
    opacity: .80 !important;
  }
}
@media (max-width: 490px) {
  html[data-theme="noel"] .seasonal-scene--hero { height: 320px !important; }
  html[data-theme="noel"] .seasonal-scene--page,
  html[data-theme="noel"] .seasonal-scene--join { width: 50% !important; }
}


/* ================================================================
   WZ OneBlock — Noël V7 (polish visuel)
   Ajustements de proportions et d'équilibre après test en situation.
   ================================================================ */
html[data-theme="noel"] .nav-wrap::before {
  inset: 2px 22px auto 22px !important;
  height: 44px !important;
  background: var(--season-nav) center top / min(100%, 920px) auto no-repeat !important;
  opacity: .92 !important;
}
html[data-theme="noel"] .site-header .brand::after,
html[data-theme="noel"] .footer-brand .brand::after {
  width: 20px !important;
  height: 20px !important;
  top: -4px !important;
  left: 24px !important;
  opacity: .78 !important;
}
html[data-theme="noel"] .seasonal-scene--hero {
  width: min(54%, 780px) !important;
  background-position: right 10px bottom 0 !important;
  background-size: contain !important;
  opacity: .95 !important;
}
html[data-theme="noel"] .seasonal-scene--hero::before {
  inset: 8px 8px auto auto !important;
  width: clamp(110px, 14vw, 180px) !important;
  height: clamp(110px, 14vw, 180px) !important;
  opacity: .64 !important;
  transform: none !important;
}
html[data-theme="noel"] .seasonal-scene--page {
  width: min(23%, 210px) !important;
  background-position: right 14px bottom 10px !important;
  background-size: min(80%, 182px) auto !important;
  opacity: .68 !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%) !important;
  mask-image: linear-gradient(90deg, transparent 0%, #000 38%) !important;
}
html[data-theme="noel"] .seasonal-scene--join {
  width: min(22%, 205px) !important;
  background-position: right 6px bottom 4px !important;
  background-size: min(82%, 178px) auto !important;
  opacity: .72 !important;
}
html[data-theme="noel"] .seasonal-scene--page::before {
  inset: 8px 8px auto auto !important;
  width: 118px !important;
  height: 118px !important;
  opacity: .42 !important;
  transform: none !important;
}
html[data-theme="noel"] .feature-card::after,
html[data-theme="noel"] .shop-card::after,
html[data-theme="noel"] .support-option::after,
html[data-theme="noel"] .reward-card::after,
html[data-theme="noel"] .info-panel::after {
  width: 38px !important;
  height: 38px !important;
  top: 8px !important;
  right: 10px !important;
  opacity: .17 !important;
}
html[data-theme="noel"] .site-footer::before {
  inset: -54px 0 0 !important;
  background: var(--season-footer) center bottom / min(100%, 1320px) auto no-repeat !important;
  opacity: .88 !important;
}
html[data-theme="noel"] .join-box > :not(.seasonal-scene) { z-index: 2; }
@media (max-width: 1200px) {
  html[data-theme="noel"] .seasonal-scene--hero { width: min(50%, 650px) !important; }
}
@media (max-width: 760px) {
  html[data-theme="noel"] .nav-wrap::before {
    inset: 4px 10px auto 10px !important;
    height: 36px !important;
    background-size: min(100%, 620px) auto !important;
    opacity: .84 !important;
  }
  html[data-theme="noel"] .seasonal-scene--hero {
    width: 100% !important;
    height: 330px !important;
    background-position: center bottom !important;
    background-size: auto 90% !important;
    opacity: .90 !important;
  }
  html[data-theme="noel"] .seasonal-scene--hero::before {
    width: 104px !important;
    height: 104px !important;
    opacity: .48 !important;
  }
  html[data-theme="noel"] .seasonal-scene--page,
  html[data-theme="noel"] .seasonal-scene--join {
    width: 31% !important;
    background-size: 88% auto !important;
    opacity: .62 !important;
  }
  html[data-theme="noel"] .site-footer::before {
    inset: -26px 0 0 !important;
    background-size: min(100%, 1040px) auto !important;
    opacity: .76 !important;
  }
}


/* ================================================================
   WZ OneBlock — Noël V9 (placement & taille)
   L'objectif est de conserver les assets Noël tout en améliorant
   leur positionnement et leur échelle pour éviter les chevauchements.
   ================================================================ */
html[data-theme="noel"] .nav-wrap { overflow: hidden; }
html[data-theme="noel"] .nav-wrap::before {
  inset: -6px 26px auto 26px !important;
  height: 34px !important;
  background: var(--season-nav) center top / min(100%, 760px) auto no-repeat !important;
  opacity: .78 !important;
  z-index: 0 !important;
}
html[data-theme="noel"] .nav-wrap > * { position: relative; z-index: 1; }
html[data-theme="noel"] .site-header .brand::after,
html[data-theme="noel"] .footer-brand .brand::after {
  width: 18px !important;
  height: 18px !important;
  top: -3px !important;
  left: 22px !important;
  opacity: .72 !important;
}
html[data-theme="noel"] .seasonal-scene--hero {
  width: min(49%, 700px) !important;
  background-position: right 18px bottom 0 !important;
  background-size: contain !important;
  opacity: .95 !important;
}
html[data-theme="noel"] .seasonal-scene--hero::before {
  inset: 10px 10px auto auto !important;
  width: clamp(92px, 11vw, 148px) !important;
  height: clamp(92px, 11vw, 148px) !important;
  opacity: .55 !important;
}
html[data-theme="noel"] .seasonal-scene--page {
  width: min(17%, 148px) !important;
  background-position: right 10px top 8px !important;
  background-size: min(86%, 132px) auto !important;
  opacity: .60 !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
html[data-theme="noel"] .seasonal-scene--join {
  width: min(15%, 138px) !important;
  background-position: right 14px top 8px !important;
  background-size: min(84%, 128px) auto !important;
  opacity: .82 !important;
}
html[data-theme="noel"] .seasonal-scene--page::before {
  inset: 8px 8px auto auto !important;
  width: 94px !important;
  height: 94px !important;
  opacity: .28 !important;
}
html[data-theme="noel"] .feature-card::after,
html[data-theme="noel"] .shop-card::after,
html[data-theme="noel"] .support-option::after,
html[data-theme="noel"] .reward-card::after,
html[data-theme="noel"] .info-panel::after {
  width: 26px !important;
  height: 26px !important;
  top: 8px !important;
  right: 10px !important;
  opacity: .12 !important;
}
html[data-theme="noel"] .join-box {
  overflow: hidden;
}
html[data-theme="noel"] .join-box > :not(.seasonal-scene) { position: relative; z-index: 1; }
html[data-theme="noel"] .site-footer {
  overflow: hidden;
}
html[data-theme="noel"] .site-footer::before {
  inset: 70px 0 -8px !important;
  background: var(--season-footer) center bottom / min(100%, 1180px) auto no-repeat !important;
  opacity: .72 !important;
}
html[data-theme="noel"] .footer-inner {
  padding-bottom: 88px !important;
}
@media (max-width: 1100px) {
  html[data-theme="noel"] .seasonal-scene--hero { width: min(44%, 560px) !important; }
}
@media (max-width: 760px) {
  html[data-theme="noel"] .nav-wrap::before {
    inset: -2px 10px auto 10px !important;
    height: 28px !important;
    background-size: min(100%, 520px) auto !important;
    opacity: .70 !important;
  }
  html[data-theme="noel"] .seasonal-scene--hero {
    width: 100% !important;
    height: 300px !important;
    background-position: center bottom !important;
    background-size: auto 86% !important;
  }
  html[data-theme="noel"] .seasonal-scene--hero::before {
    width: 82px !important;
    height: 82px !important;
    opacity: .40 !important;
  }
  html[data-theme="noel"] .seasonal-scene--page,
  html[data-theme="noel"] .seasonal-scene--join {
    width: 20% !important;
    background-size: 92% auto !important;
    background-position: right 8px top 8px !important;
    opacity: .60 !important;
  }
  html[data-theme="noel"] .site-footer::before {
    inset: 84px 0 -6px !important;
    background-size: min(100%, 920px) auto !important;
    opacity: .62 !important;
  }
  html[data-theme="noel"] .footer-inner { padding-bottom: 64px !important; }
}


/* ================================================================
   WZ OneBlock — Noël V14
   Thème classique conservé, hero et logo en version Noël,
   seul le cadeau est gardé comme décoration secondaire.
   ================================================================ */
html[data-theme="noel"] {
  --season-icon: url('../seasons/noel-icon-user-v5.png');
}

/* Supprimer les autres assets de Noël autour du site. */
html[data-theme="noel"] .nav-wrap::before,
html[data-theme="noel"] .site-header .brand::after,
html[data-theme="noel"] .footer-brand .brand::after,
html[data-theme="noel"] .feature-card::after,
html[data-theme="noel"] .shop-card::after,
html[data-theme="noel"] .support-option::after,
html[data-theme="noel"] .reward-card::after,
html[data-theme="noel"] .info-panel::after,
html[data-theme="noel"] .site-footer::before,
html[data-theme="noel"] .seasonal-scene--hero,
html[data-theme="noel"] .seasonal-scene--page,
html[data-theme="noel"] .seasonal-scene--hero::before,
html[data-theme="noel"] .seasonal-scene--hero::after,
html[data-theme="noel"] .seasonal-scene--page::before,
html[data-theme="noel"] .seasonal-scene--page::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

/* Garder uniquement le paquet cadeau dans le bloc CTA. */
html[data-theme="noel"] .seasonal-scene--join {
  display: block !important;
  inset: 12px 18px auto auto !important;
  width: 170px !important;
  height: 120px !important;
  background-image: var(--season-icon) !important;
  background-repeat: no-repeat !important;
  background-position: right top !important;
  background-size: contain !important;
  opacity: .98 !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
html[data-theme="noel"] .seasonal-scene--join::after {
  display: none !important;
  content: none !important;
}
html[data-theme="noel"] .join-box { overflow: hidden; }
html[data-theme="noel"] .join-box > :not(.seasonal-scene) { position: relative; z-index: 1; }

/* Pas de neige qui tombe sur le site : aucun overlay global supplémentaire. */
html[data-theme="noel"] .hero-visual::after {
  content: none !important;
  display: none !important;
}

/* Le hero devient Noël via l'image dédiée. On ajuste juste l'ambiance et la lisibilité. */
html[data-theme="noel"] .hero::before {
  background:
    radial-gradient(circle at 74% 20%, rgba(195, 228, 255, .18), transparent 42%),
    radial-gradient(circle at 25% 87%, rgba(69, 130, 196, .16), transparent 56%);
}
html[data-theme="noel"] .hero-visual::before {
  background:
    linear-gradient(90deg, var(--bg) 0%, rgba(8,23,41,.88) 10%, rgba(8,23,41,.18) 28%, transparent 46%),
    linear-gradient(0deg, var(--bg) 0%, transparent 16%);
}
html[data-theme="noel"] .hero-visual img {
  filter: saturate(.98) brightness(.96) contrast(1.02);
}

/* Logo en mode Noël : l'image est changée par JS, ici on ajoute juste un léger glow froid. */
html[data-theme="noel"] .brand img {
  filter: drop-shadow(0 0 10px rgba(202, 234, 255, .18));
}

@media (max-width: 760px) {
  html[data-theme="noel"] .seasonal-scene--join {
    width: 110px !important;
    height: 82px !important;
    inset: 10px 12px auto auto !important;
  }
}


/* ================================================================
   WZ OneBlock — Pâques V17
   Hero + logo dédiés, ambiance plus propre et plus premium.
   ================================================================ */
html[data-theme="paques"] .hero-visual img {
  filter: saturate(1.02) brightness(.98) contrast(1.01) !important;
}
html[data-theme="paques"] .brand img {
  filter: drop-shadow(0 0 12px rgba(255, 206, 238, .20));
}

/* On retire les gros décors de pages pour laisser vivre le hero Pâques. */
html[data-theme="paques"] .nav-wrap::before,
html[data-theme="paques"] .site-header .brand::after,
html[data-theme="paques"] .footer-brand .brand::after,
html[data-theme="paques"] .feature-card::after,
html[data-theme="paques"] .shop-card::after,
html[data-theme="paques"] .support-option::after,
html[data-theme="paques"] .reward-card::after,
html[data-theme="paques"] .info-panel::after,
html[data-theme="paques"] .site-footer::before,
html[data-theme="paques"] .seasonal-scene--hero,
html[data-theme="paques"] .seasonal-scene--page,
html[data-theme="paques"] .seasonal-scene--hero::before,
html[data-theme="paques"] .seasonal-scene--hero::after,
html[data-theme="paques"] .seasonal-scene--page::before,
html[data-theme="paques"] .seasonal-scene--page::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

/* On garde uniquement un rappel décoratif léger sur le bloc rejoindre. */
html[data-theme="paques"] .seasonal-scene--join {
  display: block !important;
  inset: 0 0 0 auto !important;
  width: min(31%, 290px) !important;
  height: 100% !important;
  opacity: .85 !important;
  background-image: var(--season-icon) !important;
  background-repeat: no-repeat !important;
  background-position: right bottom !important;
  background-size: contain !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  filter: drop-shadow(0 0 10px rgba(197, 232, 180, .15));
}
html[data-theme="paques"] .seasonal-scene--join::before {
  content: none !important;
  display: none !important;
  background: none !important;
}
html[data-theme="paques"] .seasonal-scene--join::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(18,43,49,.08) 45%, rgba(18,43,49,.20) 100%);
  pointer-events: none;
}
html[data-theme="paques"] .join-box { overflow: hidden; }
html[data-theme="paques"] .join-box > :not(.seasonal-scene) { position: relative; z-index: 1; }

/* Rend le CTA un peu plus pastel / printanier. */
html[data-theme="paques"] .join-box {
  background-image: linear-gradient(95deg, rgba(22, 50, 56, .96) 8%, rgba(44, 73, 82, .90) 62%, rgba(44, 73, 82, .72) 100%), url('../images/banner-islands.webp') !important;
}
html[data-theme="paques"] .join-box::before {
  background: linear-gradient(90deg, rgba(23,55,61,.94), rgba(60,95,89,.42) 72%, transparent) !important;
}

@media (max-width: 920px) {
  html[data-theme="paques"] .seasonal-scene--join {
    width: min(40%, 230px) !important;
  }
}
@media (max-width: 760px) {
  html[data-theme="paques"] .seasonal-scene--join {
    width: 42% !important;
    opacity: .40 !important;
  }
}


/* ================================================================
   WZ OneBlock — Pâques V18 superposition CTA
   Correction de lisibilité et d'empilement du bloc rejoindre.
   ================================================================ */
html[data-theme="paques"] .join-box {
  align-items: center;
}
html[data-theme="paques"] .join-copy {
  max-width: calc(100% - 360px);
}
html[data-theme="paques"] .join-box > .btn {
  position: relative;
  z-index: 3;
  margin-left: auto;
  flex-shrink: 0;
}
html[data-theme="paques"] .seasonal-scene--join {
  right: 14px !important;
  left: auto !important;
  bottom: 6px !important;
  top: 6px !important;
  width: min(20%, 180px) !important;
  opacity: .72 !important;
  background-position: right center !important;
  background-size: contain !important;
  z-index: 0 !important;
}
html[data-theme="paques"] .seasonal-scene--join::after {
  background: linear-gradient(90deg, transparent 0%, rgba(18,43,49,.04) 40%, rgba(18,43,49,.12) 100%);
}
@media (max-width: 1100px) {
  html[data-theme="paques"] .join-copy {
    max-width: calc(100% - 330px);
  }
  html[data-theme="paques"] .seasonal-scene--join {
    width: min(18%, 150px) !important;
    opacity: .62 !important;
  }
}
@media (max-width: 920px) {
  html[data-theme="paques"] .join-copy {
    max-width: calc(100% - 280px);
  }
  html[data-theme="paques"] .seasonal-scene--join {
    width: min(16%, 120px) !important;
    opacity: .50 !important;
  }
}
@media (max-width: 760px) {
  html[data-theme="paques"] .join-copy {
    max-width: 100%;
  }
  html[data-theme="paques"] .join-box > .btn {
    z-index: 3;
  }
  html[data-theme="paques"] .seasonal-scene--join {
    width: 26% !important;
    top: auto !important;
    bottom: 10px !important;
    right: 10px !important;
    opacity: .32 !important;
  }
}


/* ================================================================
   WZ OneBlock — Pâques V19 fond CTA propre
   Supprime l'image de fond contenant déjà du texte/bouton.
   ================================================================ */
html[data-theme="paques"] .join-box {
  background-image:
    radial-gradient(circle at 18% 24%, rgba(186, 255, 214, .10) 0, rgba(186, 255, 214, 0) 22%),
    radial-gradient(circle at 72% 76%, rgba(255, 214, 238, .08) 0, rgba(255, 214, 238, 0) 24%),
    linear-gradient(95deg, rgba(19, 54, 58, .98) 10%, rgba(31, 79, 80, .95) 58%, rgba(46, 94, 86, .90) 100%) !important;
  background-size: auto, auto, auto !important;
  background-repeat: no-repeat !important;
}
html[data-theme="paques"] .join-box::before {
  background: linear-gradient(90deg, rgba(18, 52, 54, .32), rgba(18, 52, 54, .08) 48%, transparent 100%) !important;
}
html[data-theme="paques"] .join-copy,
html[data-theme="paques"] .join-box > .btn {
  isolation: isolate;
}


/* WZ ONEBLOCK — V22 : Halloween epure.
   Seuls les deux coins de toile du header et l'illustration du
   bandeau Rejoins l'aventure restent. Le hero et le logo restent saisonniers. */
html[data-theme="halloween"] .site-header .brand::after,
html[data-theme="halloween"] .footer-brand .brand::after,
html[data-theme="halloween"] .feature-card::after,
html[data-theme="halloween"] .shop-card::after,
html[data-theme="halloween"] .support-option::after,
html[data-theme="halloween"] .reward-card::after,
html[data-theme="halloween"] .info-panel::after,
html[data-theme="halloween"] .site-footer::before,
html[data-theme="halloween"] .seasonal-scene--hero,
html[data-theme="halloween"] .seasonal-scene--page {
  display: none !important;
  content: none !important;
  background-image: none !important;
}

/* Ces toiles sont les deux decorations conservees dans le bandeau du haut. */
html[data-theme="halloween"] .nav-wrap::before {
  background-image: url('../seasons/halloween-corner.svg'), url('../seasons/halloween-corner.svg') !important;
  background-position: left -10px top -4px, right -10px top -4px !important;
  background-size: 104px auto, 104px auto !important;
  background-repeat: no-repeat !important;
  opacity: .55 !important;
}

/* Garder l'illustration de citrouilles en bas, dans le bandeau rejoindre. */
html[data-theme="halloween"] .seasonal-scene--join {
  display: block !important;
  background-image: url('../seasons/halloween-hero.svg') !important;
}
@media (max-width: 760px) {
  html[data-theme="halloween"] .seasonal-scene--join { opacity: .35 !important; }
}