/* LiveQuest — habillage saisonnier « Préparation de Noël » (2026-11), sur le modèle de saison-octobre-rose.css.
   ------------------------------------------------------------------
   Chargée UNIQUEMENT quand le serveur a activé la saison (src/services/saison.js) :
     - phase A (2 → 6 novembre) : seulement le bandeau .lq-nl-bandeau, AUCUN token touché
       (pas d'attribut data-saison : les règles de la section 1 à 3 ne s'appliquent pas) ;
     - phase B (7 novembre → 26 décembre) : html[data-saison="noel"] = tokens bordeaux + or,
       bandeau, et ruban en pied du blog (html[data-saison-ruban="noel"]).
   Sobre : pas de guirlande, pas de neige, pas d'animation, pas de sapin. Hors saison, ni cette
   feuille ni l'attribut ne sont servis.

   Discipline : toute couleur est un JETON --nl-* déclaré en section 0 (seul endroit où figurent des
   valeurs hexadécimales ; verrouillé par tests/unit/saison-noel.test.js).
   Contrastes WCAG 2.x (luminance relative), calculés et verrouillés par le même test :
     blanc sur bordeaux #8A1F36        9,0:1     blanc sur bordeaux foncé #6E1829  11,5:1
     bordeaux foncé sur papier         11,0:1    texte #3A1A20 sur papier           14,9:1
     or #E3C170 sur nuit #2E0710       10,5:1    encre #2A0A12 sur or               10,5:1
     or clair #EBD3A0 sur bordeaux #5A1424  9,2:1
   ------------------------------------------------------------------ */

/* ═══ 0. Jetons ═══ */
html[data-saison="noel"],
html[data-saison-ruban="noel"],
.lq-nl-bandeau,
.lq-nl-ruban {
  --nl-bordeaux: #8A1F36;
  --nl-bordeaux-ink: #6E1829;
  --nl-bordeaux-deep: #5A1424;
  --nl-nuit: #2E0710;
  --nl-or: #E3C170;
  --nl-or-clair: #EBD3A0;
  --nl-or-pale: #F3E3C0;
  --nl-papier: #FFF9EE;
  --nl-papier-2: #F6EBD3;
  --nl-bord: #E3D2A8;
  --nl-texte: #3A1A20;
  --nl-titre: #2A0A12;
  --nl-blanc: #FFFFFF;
  --nl-bordeaux-rgb: 138, 31, 54;
  --nl-ink-rgb: 110, 24, 41;
  --nl-or-rgb: 227, 193, 112;
  --nl-clair-rgb: 255, 246, 225;
  --nl-rouge: #C8323F;
  --nl-rouge-rgb: 200, 50, 63;
}

/* ═══ 1. Accueil historique (livequest.html) + pages utilisant lq-tokens — phase B ═══ */
html[data-saison="noel"] {
  --forest: var(--nl-bordeaux-deep);
  --lq-forest: var(--nl-bordeaux-deep);
  --sage: var(--nl-bordeaux);
  --lq-sage: var(--nl-bordeaux);
  --sage-light: var(--nl-or-clair);
  --accent: var(--nl-bordeaux);
  --accent-light: var(--nl-or-clair);
  --accent-dark: var(--nl-bordeaux-deep);
  --accent-ink: var(--nl-bordeaux-ink);
  --accent-ui: var(--nl-bordeaux);
  --on-accent: var(--nl-blanc);
  /* Blog (src/pages/blog.js, :root --b-*) : couleurs aussi, en plus de la pastille (décision du 02/11). */
  --b-green: var(--nl-bordeaux);
  --b-green-ink: var(--nl-bordeaux-ink);
  --b-cream: var(--nl-papier-2);
  --b-paper: var(--nl-papier);
  --b-ink: var(--nl-titre);
  --b-text: var(--nl-texte);
  --b-line: rgba(var(--nl-ink-rgb), .16);
}

/* ═══ 2. Landings v4 : les tokens d'accent vivent sur body.pg-* → même nœud, spécificité supérieure ═══ */
html[data-saison="noel"] body {
  --accent: var(--nl-bordeaux);
  --accent-ink: var(--nl-bordeaux-ink);
  --on-accent: var(--nl-blanc);
  --btn-bg: var(--nl-bordeaux);
  --btn-ink: var(--nl-blanc);
  --focus: var(--nl-bordeaux-ink);
  --line: rgba(var(--nl-ink-rgb), .18);
}
/* Particuliers : « coral » reste un aplat CLAIR (or pâle) : le texte posé dessus est foncé. Associations : « green/gdark » = accent ; Tourisme : « deep » = accent. */
html[data-saison="noel"] body.pg-part { --coral: var(--nl-or-clair); --pink: var(--nl-or-pale); }
html[data-saison="noel"] body.pg-asso { --green: var(--nl-bordeaux); --gdark: var(--nl-bordeaux-ink); }
html[data-saison="noel"] body.pg-tour { --deep: var(--nl-bordeaux-deep); --accent: var(--nl-bordeaux-ink); --btn-bg: var(--nl-bordeaux-ink); --focus: var(--nl-bordeaux-deep); }
/* Entreprises (nuit indigo) : l'ambre devient or, texte sombre dessus. */
html[data-saison="noel"] body.pg-ent {
  --amber: var(--nl-or); --accent: var(--nl-or); --on-accent: var(--nl-titre); --btn-bg: var(--nl-or); --btn-ink: var(--nl-titre);
  --accent-ink: var(--nl-or-clair); --focus: var(--nl-or-clair); --line: rgba(var(--nl-clair-rgb), .16);
}

/* En-tête partagé des landings (variables --hd-* exposées par public/landing/header.css). */
html[data-saison="noel"] header.lq-hd { --hd-accent: var(--nl-bordeaux); --hd-on-accent: var(--nl-blanc); --hd-focus: var(--nl-bordeaux-ink); }
html[data-saison="noel"] header.lq-hd[data-tone="dark"] { --hd-accent: var(--nl-or); --hd-on-accent: var(--nl-titre); --hd-focus: var(--nl-or-clair); }

/* ═══ 3. Couleurs codées en dur dans les pages (habillage uniquement) ═══ */
html[data-saison="noel"] .btn-hero-primary,
html[data-saison="noel"] .split-trail .split-cta,
html[data-saison="noel"] .universe-trail .universe-cta { background: var(--nl-bordeaux); color: var(--nl-blanc); box-shadow: 0 4px 24px rgba(var(--nl-bordeaux-rgb), .4); }
html[data-saison="noel"] .split-trail,
html[data-saison="noel"] .universe-trail { background: linear-gradient(160deg, var(--nl-nuit) 0%, var(--nl-bordeaux-deep) 55%, var(--nl-bordeaux-ink) 100%); }
html[data-saison="noel"] .hero-headline h1 em { text-shadow: 0 2px 12px rgba(0, 0, 0, .6); }
html[data-saison="noel"] .mode-where { background: var(--nl-papier-2); color: var(--nl-bordeaux-deep); }
html[data-saison="noel"] .feat-badge-trail { background: rgba(var(--nl-bordeaux-rgb), .1); }
html[data-saison="noel"] a:focus-visible,
html[data-saison="noel"] button:focus-visible,
html[data-saison="noel"] input:focus-visible,
html[data-saison="noel"] select:focus-visible,
html[data-saison="noel"] textarea:focus-visible { outline-color: var(--nl-bordeaux); }
/* Pastille « Plateforme pour organisateurs » (couleurs en style inline → !important nécessaire). */
html[data-saison="noel"] .hero-b2b-badge { background: rgba(var(--nl-or-rgb), .16) !important; border-color: rgba(var(--nl-or-rgb), .5) !important; color: var(--nl-or-clair) !important; }
html[data-saison="noel"] .hero-b2b-badge span { background: var(--nl-or-clair) !important; }
/* Texte « sage » posé sur fond SOMBRE : or clair. */
html[data-saison="noel"] .hero-trust span::before,
html[data-saison="noel"] .comparison-col .col-title.trail-c { color: var(--nl-or-clair); }

/* ═══ 4. Bandeau « Préparez vos quêtes de Noël » (sous le héros, phases A et B) ═══ */
.lq-nl-bandeau {
  background: linear-gradient(135deg, var(--nl-papier-2) 0%, var(--nl-papier) 70%);
  border-top: 3px solid var(--nl-or);
  border-bottom: 1px solid var(--nl-bord);
  color: var(--nl-texte);
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  line-height: 1.55;
  position: relative;
  z-index: 2;
}
.lq-nl-in {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  box-sizing: border-box;
}
.lq-nl-body { flex: 1 1 320px; min-width: 0; }
.lq-nl-bandeau .lq-nl-body > * { text-align: left; }
.lq-nl-bandeau .lq-nl-eyebrow { margin: 0 0 2px; font: 700 12px/1.4 Inter, -apple-system, system-ui, sans-serif !important; letter-spacing: .05em; text-transform: uppercase; color: var(--nl-bordeaux-ink); }
.lq-nl-bandeau .lq-nl-body h2 { margin: 0 0 6px; padding: 0; text-shadow: none; text-transform: none; color: var(--nl-titre);
  /* !important : typo.css (landings v4) impose Fraunces 3 rem à tout h2 en !important */
  font-family: Inter, -apple-system, system-ui, sans-serif !important; font-weight: 700 !important; font-variation-settings: normal !important;
  font-size: clamp(1.05rem, 2.2vw, 1.25rem) !important; line-height: 1.25 !important; letter-spacing: -.01em !important; word-spacing: normal !important; }
.lq-nl-bandeau .lq-nl-body p { margin: 0 0 4px; font: 400 .92rem/1.55 Inter, -apple-system, system-ui, sans-serif; color: var(--nl-texte); max-width: 62ch; text-shadow: none; }
.lq-nl-btn {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px;
  padding: 10px 20px;
  border-radius: 12px;
  background: var(--nl-bordeaux);
  color: var(--nl-blanc);
  font-weight: 600; font-size: .95rem;
  text-decoration: none;
  transition: background-color .18s ease;
}
.lq-nl-btn:hover { background: var(--nl-bordeaux-ink); opacity: 1; }
.lq-nl-btn:focus-visible { outline: 3px solid var(--nl-bordeaux-deep); outline-offset: 3px; }
@media (max-width: 560px) {
  .lq-nl-in { padding: 14px 16px; gap: 10px; }
  .lq-nl-btn { min-height: 44px; padding: 8px 16px; font-size: .9rem; }
  .lq-nl-bandeau .lq-nl-body h2 { font-size: 1.05rem; line-height: 1.25; margin-bottom: 4px; }
  .lq-nl-bandeau .lq-nl-body p { font-size: .88rem; line-height: 1.45; }
}
/* Accueil historique, phase B : la barre de navigation est fixe (64 px, 56 px sur mobile) → le bandeau s'y glisse dessous. */
html[data-saison="noel"] .lq-nl-bandeau { margin-top: 64px; }
@media (max-width: 768px) { html[data-saison="noel"] .lq-nl-bandeau { margin-top: 56px; } }
html[data-saison="noel"] .lq-nl-bandeau + .hero-headline { padding-top: 56px; }
/* Landings v4 : l'en-tête est sticky et dans le flux → pas de marge (aussi en phase A, sans attribut). */
main > .lq-nl-bandeau,
html[data-saison="noel"] main > .lq-nl-bandeau { margin-top: 0; }

/* ═══ 4 bis. Décor (phase B seulement, landings v4 : accueil et pages par public) — UN geste par zone ═══
   Aucune animation : rien ne bouge, donc rien à couper pour prefers-reduced-motion ni pour le bouton « Animations »
   (html.paused). Purement décoratif : pointer-events none, pas de texte, aucune information portée par la couleur.
   (a) Fine guirlande rouge et or sous l'en-tête collant (ampoules de 5 px sur un fil de 1 px, 10 px de haut) ;
   (b) lueur or discrète dans le coin haut-droit du héros de l'accueil et de /tourisme (sous le texte : z-index -1
       dans le contexte d'empilement isolé du héros, 16 % d'opacité maximum, loin des titres). */
html[data-saison="noel"] header.lq-hd::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 100%;
  height: 10px;
  pointer-events: none;
  background:
    linear-gradient(rgba(var(--nl-or-rgb), .55), rgba(var(--nl-or-rgb), .55)) 0 0 / 100% 1px no-repeat,
    radial-gradient(circle at 9px 5px, var(--nl-rouge) 0 2.5px, rgba(var(--nl-rouge-rgb), .35) 3px, transparent 5px) 0 0 / 36px 10px repeat-x,
    radial-gradient(circle at 27px 5px, var(--nl-or) 0 2.5px, rgba(var(--nl-or-rgb), .35) 3px, transparent 5px) 0 0 / 36px 10px repeat-x;
}
html[data-saison="noel"] :is(body.pg-home, body.pg-tour) .hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 94% 6%, rgba(var(--nl-or-rgb), .16) 0, transparent 22%),
    radial-gradient(circle at 86% 14%, rgba(var(--nl-or-rgb), .12) 0, transparent 9%);
}
@media print { html[data-saison="noel"] header.lq-hd::after, html[data-saison="noel"] .hero::after { display: none; } }

/* Maya Noël : pose fixe, donc le calque des gestes (second <img>, en absolu, opacité 0) n'a rien à jouer : retiré (aucune requête, aucun doublon possible).
   La boîte de repos est celle de l'original (90×240, pieds en bas) : même taille et même position que hors saison, pilotées par les mêmes règles de landing.css/js. */
html[data-saison="noel"] .maya-btn .maya-geste { display: none; }

/* ═══ 5. Ruban discret du blog (phase B, pied de page) ═══ */
.lq-nl-ruban { display: flex; justify-content: center; padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box; width: 100%; clear: both; }
.lq-nl-pill {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; max-width: 100%; box-sizing: border-box;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--nl-papier-2); border: 1px solid var(--nl-bord); color: var(--nl-bordeaux-ink);
  font: 600 13px/1.3 Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  text-decoration: none;
  transition: background-color .18s ease;
}
.lq-nl-pill .lq-nl-sub { font-weight: 500; }
a.lq-nl-pill:hover { background: var(--nl-or-pale); text-decoration: underline; opacity: 1; }
a.lq-nl-pill:focus-visible { outline: 3px solid var(--nl-bordeaux-ink); outline-offset: 2px; }
@media (max-width: 380px) { .lq-nl-pill .lq-nl-sep, .lq-nl-pill .lq-nl-sub { display: none; } }

@media (prefers-reduced-motion: reduce) { .lq-nl-btn, .lq-nl-pill { transition: none; } }
@media print { .lq-nl-ruban, .lq-nl-bandeau { display: none !important; } }