/* ─────────────────────────────────────────────────────────────
   B.R.M — Noël 2026
   Feuille de saison, posée PAR-DESSUS site.css.

   Elle ne touche à aucun jeton de marque : le rouge reste `--laque`,
   la typographie reste Oswald + Inter, et pas un produit ne change.
   Elle ajoute une nuit, un or, de la neige — et redéfinit les gris de
   texte partout où le fond devient sombre, faute de quoi le texte
   secondaire tombe à 2,4 de contraste (c'est la règle du reste du
   site : un jeton dit un rôle, pas une teinte).

   Ce que la pose a appris, et qui est écrit ici pour ne pas être
   refait : pas de `body.noel > *`, pas d'inversion des logos, pas de
   `text-shadow` sur un titre découpé en or. Les trois notes sont à
   leur place dans le fichier.
   ───────────────────────────────────────────────────────────── */

:root{
  /* — La nuit — trois profondeurs de vert-noir, jamais du noir pur :
       un sapin la nuit n'est pas noir, il est vert très sombre. */
  --nuit:#060D0B;
  --sapin:#0B1F19;
  --sapin-haut:#103126;
  /* — L'or — un or laiton, pas un or jaune de papier cadeau.
       `--or-lisible` est réservé au TEXTE sur la nuit ; `--or` sert
       aux filets, aux bordures et aux aplats. */
  --or:#B9932F;
  --or-lisible:#E4C97E;
  --or-pale:#F4E6C0;
  --or-sourd:rgba(185,147,47,.22);
  --neige:#F6F8F7;
}

/* ── Le fond de page devient la nuit ────────────────────────
   Deux nappes fixes : les lueurs (or, sapin, laque) et le semis
   d'étoiles. Elles sont en `z-index:-1`, donc derrière le contenu et
   devant le fond du corps.

   ⚠️ Surtout PAS de `body.noel > *{position:relative;z-index:1}` pour
   lever le contenu. La règle paraît innocente, mais sa spécificité
   (0,1,1) bat celle de `.entete`, `.tiroir`, `.voile` et `.guirlande`
   (0,1,0) : les quatre repassent en `position:relative`, donc dans le
   flux. Le tiroir du menu, haut comme l'écran, pousse alors le héros
   1 100 px plus bas et la page s'ouvre sur du vide. */
body.noel{background:var(--nuit);color:var(--neige)}
body.noel::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1200px 700px at 78% -8%,rgba(185,147,47,.16),transparent 62%),
    radial-gradient(900px 600px at 8% 22%,rgba(18,51,40,.85),transparent 68%),
    radial-gradient(700px 500px at 96% 78%,rgba(200,16,46,.10),transparent 70%)}
/* Le semis d'étoiles : huit nappes de points, tailles et positions
   irrégulières, pour qu'aucune régularité ne se voie. */
body.noel::after{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.55;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%,rgba(255,255,255,.9),transparent),
    radial-gradient(1.1px 1.1px at 74% 9%,rgba(255,255,255,.8),transparent),
    radial-gradient(1.6px 1.6px at 42% 34%,rgba(244,230,192,.9),transparent),
    radial-gradient(1px 1px at 88% 46%,rgba(255,255,255,.7),transparent),
    radial-gradient(1.3px 1.3px at 26% 62%,rgba(255,255,255,.75),transparent),
    radial-gradient(1px 1px at 61% 74%,rgba(244,230,192,.8),transparent),
    radial-gradient(1.5px 1.5px at 8% 88%,rgba(255,255,255,.8),transparent),
    radial-gradient(1.1px 1.1px at 93% 92%,rgba(255,255,255,.7),transparent);
  animation:noel-scintille 7s ease-in-out infinite alternate}
@keyframes noel-scintille{from{opacity:.35}to{opacity:.7}}

/* La neige : un canevas posé au-dessus des aplats, sous l'en-tête
   (z-index 60) et sans jamais recevoir un clic.
   `width`/`height` explicites : un <canvas> est un élément remplacé,
   il a une taille intrinsèque de 300 × 150 px, et `inset:0` seul ne
   l'étire pas — la neige tombait dans un timbre-poste. */
#noel-neige{position:fixed;inset:0;width:100%;height:100%;z-index:2;
  pointer-events:none}

/* ── Les gris de texte, sur la nuit ───────────────────────── */
body.noel{--encre-doux:rgba(246,248,247,.76);--encre-tres-doux:rgba(246,248,247,.58)}
body.noel h1,body.noel h2,body.noel h3,body.noel h4,body.noel blockquote{color:var(--neige)}
body.noel .sur{color:var(--or-lisible)}

/* ── Le bandeau du prototype ────────────────────────────────── */
body.noel .bandeau-proto{background:#1A0509;color:var(--or-pale);
  border-bottom:1px solid var(--or-sourd)}

/* ── Le bandeau de saison, au-dessus de l'en-tête ────────────
   Il défile avec la page ; noel.js recale l'en-tête sous ce qu'il en
   reste à l'écran (site.js ne connaît que `.bandeau-proto`, et il y a
   ici deux bandeaux). */
.noel-bandeau{position:relative;z-index:61;
  background:linear-gradient(90deg,#7A0B1C,#C8102E 42%,#7A0B1C);
  color:#fff;padding:11px var(--gouttiere);
  display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap;
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  border-bottom:1px solid rgba(244,230,192,.34)}
.noel-bandeau b{font-weight:700;color:var(--or-pale)}
.noel-bandeau span{display:inline-flex;align-items:center;gap:9px}
.noel-bandeau span::before{content:'';width:5px;height:5px;transform:rotate(45deg);
  background:var(--or-pale);flex:none}
.noel-bandeau a{color:#fff;text-decoration:underline;
  text-decoration-color:rgba(255,255,255,.45);text-underline-offset:4px}
@media(max-width:760px){
  .noel-bandeau{gap:14px;font-size:.62rem;letter-spacing:.1em;padding:9px 14px}
  .noel-bandeau .masq-xs{display:none}
}

/* ── L'en-tête, de jour comme de nuit ───────────────────────
   Le site a un en-tête blanc flottant. Sur une page de nuit, il
   devenait une barre de lumière au-dessus du sapin. */
body.noel .entete{
  background:linear-gradient(to bottom,rgba(6,13,11,.94) 0%,rgba(6,13,11,.62) 58%,
    rgba(6,13,11,0) 100%);
  border-bottom-color:transparent}
body.noel .entete.pose{background:rgba(6,13,11,.92);
  backdrop-filter:blur(18px) saturate(1.3);
  border-bottom-color:var(--or-sourd);box-shadow:0 1px 28px rgba(0,0,0,.6)}
body.noel .entete a,body.noel .entete button{color:var(--neige)}
body.noel .entete .burger i{background:var(--neige)}
body.noel .entete .pastille{background:var(--laque);color:#fff}
body.noel .entete .jauge{background:linear-gradient(90deg,var(--or),var(--laque))}
body.noel .lang-menu{background:var(--sapin);border-color:var(--or-sourd);
  color:var(--neige)}
body.noel .lang-opt{color:var(--neige)}
body.noel .lang-opt:hover{background:rgba(185,147,47,.16)}

/* ── Les logos, sur la nuit ─────────────────────────────────
   `logo-brm-hub.jpg` et `logo-brm-hub-clair.png` sont des cartouches
   NOIRS à lettrage blanc, bordés d'un fin liseré blanc. Deux fausses
   pistes ont été essayées avant la bonne :
     · `invert(1)` + `screen` → la « plaque percée » : un rectangle
       blanc avec des lettres noires dedans ;
     · `screen` seul → le cartouche se dissout bien, mais le liseré
       blanc reste et fait un cadre lumineux ; `clip-path` ne le
       rattrape pas proprement.
   La maison a déjà l'image qu'il faut : `logo-brm-clair.png`, lettrage
   blanc sur fond transparent. C'est noel.js qui pose cette source — un
   changement d'habillage, pas de contenu. Ici, on se contente de ne
   rien filtrer. */
body.noel .entete .logo img,
body.noel footer .logo img,
body.noel .tiroir-haut .logo img{mix-blend-mode:normal;filter:none}

/* ── La guirlande ───────────────────────────────────────────
   Un câble qui pend sous l'en-tête et des ampoules qui respirent.
   Tout est dessiné par noel.js à la largeur réelle : aucune image,
   donc aucun poids, et pas d'ovales quand l'écran s'élargit.

   Elle est ABSOLUE, pas fixée : fixée, elle passait au-dessus de tout
   — cartes de campagne, photos d'atelier — à mi-page. Elle appartient
   au haut du document et s'en va avec lui. */
.guirlande{position:absolute;left:0;right:0;z-index:59;height:64px;
  pointer-events:none;overflow:visible}
.guirlande svg{display:block;width:100%;height:64px}
.guirlande .cable{fill:none;stroke:rgba(244,230,192,.55);stroke-width:1.6}
.guirlande .ampoule{transform-box:fill-box;transform-origin:center;
  animation:noel-ampoule 2.6s ease-in-out infinite}
/* Le halo est flouté : sans flou, une ampoule n'est qu'un point beige
   sur une nuit, et rien ne dit qu'elle est allumée. */
.guirlande .halo{filter:blur(2px);animation:noel-halo 2.6s ease-in-out infinite}
@keyframes noel-ampoule{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes noel-halo{0%,100%{opacity:.16}50%{opacity:.62}}

/* ── Le grand titre : de l'or, pas du jaune ─────────────────
   Un dégradé à cinq arrêts, balayé lentement : c'est ce qui fait lire
   « métal » plutôt que « couleur ». Le repli est une couleur pleine
   pour les navigateurs sans `background-clip:text`. */
.or{color:var(--or-lisible)}
@supports (-webkit-background-clip:text) or (background-clip:text){
  .or{background:linear-gradient(100deg,#8A6A16 0%,#F4E6C0 26%,#B9932F 48%,
      #FFF6DD 62%,#8A6A16 100%);
    background-size:220% 100%;-webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    animation:noel-or 9s linear infinite}
}
@keyframes noel-or{to{background-position:220% 0}}

/* Le filet doré : sépare sans ajouter une ligne de plus. Il se tire
   d'un bord à l'autre quand la section entre à l'écran (noel.js). */
.filet-or{height:1px;border:0;margin:0;opacity:.5;
  background:linear-gradient(90deg,transparent,var(--or),transparent);
  transform:scaleX(0);transform-origin:center;
  transition:transform 1.3s var(--ease)}
.filet-or.tire{transform:scaleX(1)}

/* ── Le sur-titre de saison ─────────────────────────────────── */
.sur-noel{font-size:var(--micro);letter-spacing:.34em;text-transform:uppercase;
  font-weight:600;color:var(--or-lisible);display:inline-flex;align-items:center;
  gap:13px}
.sur-noel::before,.sur-noel::after{content:'';width:34px;height:1px;
  background:var(--or);opacity:.7}

/* ── Le héros ───────────────────────────────────────────────
   site.css distingue `.slide.clair` et `.slide.sombre`, et ses
   sélecteurs (0,3,0) battent un `body.noel .slide-voile` (0,2,0) : les
   diapositives claires gardaient leur voile BLANC, et le titre doré se
   posait sur du bleu pâle. On vise les deux cas nommément — et on
   refroidit le visuel lui-même, parce qu'une photo de studio en plein
   jour ne devient pas une nuit de Noël avec un dégradé par-dessus. */
body.noel .slide.clair .slide-voile,
body.noel .slide.sombre .slide-voile{
  background:
    linear-gradient(90deg,rgba(4,10,8,.93) 0%,rgba(4,10,8,.72) 34%,
      rgba(4,10,8,.28) 62%,rgba(4,10,8,.10) 100%),
    radial-gradient(1000px 640px at 84% 34%,rgba(185,147,47,.22),transparent 72%),
    linear-gradient(180deg,rgba(4,10,8,.55) 0%,transparent 26%,transparent 74%,
      rgba(4,10,8,.6) 100%)}
/* 0,72 et pas 0,62 : plus bas, la photo devient grise, et la montre
   doit rester la chose la plus lisible de la page. */
body.noel .slide-img img{filter:brightness(.72) contrast(1.06) saturate(.82)}
body.noel .slide.clair .slide-txt,
body.noel .slide.sombre .slide-txt{color:var(--neige)}
body.noel .slide.clair .slide-sur,
body.noel .slide.sombre .slide-sur{color:var(--or-lisible)}
body.noel .slide.clair .slide-modele,
body.noel .slide.sombre .slide-modele{color:var(--or-pale);opacity:.94}
body.noel .slide .btn-ligne{color:#fff;border-color:rgba(255,255,255,.5)}
body.noel .slide .btn-ligne:hover{color:#120C02}
/* ⚠️ Pas de `text-shadow` sur un titre en or : `text-shadow` peint
   l'ombre du GLYPHE, et comme le glyphe est transparent
   (`background-clip:text`), l'ombre se voit à travers — un fantôme
   gris sous chaque lettre. L'ombre se pose sur la boîte, par filtre. */
body.noel .slide h2{text-shadow:none;filter:drop-shadow(0 8px 30px rgba(0,0,0,.6))}
body.noel .slider-barre{color:var(--neige)}
body.noel .slider-puces button.on{background:var(--or-lisible)}
body.noel .defiler{color:rgba(246,248,247,.7)}

/* L'étoile filante : elle traverse le ciel du héros toutes les
   dix-huit secondes, une fois, en diagonale. Une seule, et rare —
   au-delà, ce n'est plus un ciel, c'est une pluie de météores. */
.comete{position:absolute;top:14%;left:-8%;z-index:3;width:120px;height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);
  opacity:0;transform:rotate(14deg);
  animation:noel-comete 18s var(--ease) infinite}
.comete::after{content:'';position:absolute;right:0;top:-1.5px;width:4px;height:4px;
  border-radius:50%;background:#fff;box-shadow:0 0 10px 3px rgba(255,255,255,.7)}
@keyframes noel-comete{
  0%{opacity:0;transform:translate(0,0) rotate(14deg)}
  2%{opacity:.9}
  11%{opacity:0;transform:translate(78vw,30vh) rotate(14deg)}
  100%{opacity:0;transform:translate(78vw,30vh) rotate(14deg)}}

/* ── Le sceau de cire ───────────────────────────────────────
   Un sceau, c'est une goutte de cire écrasée : un liseré d'or, une
   lumière en haut à gauche, une ombre interne en bas. Tout est en
   dégradés — rien à charger. */
.sceau{position:absolute;right:var(--gouttiere);top:calc(var(--header) + 28px);
  z-index:6;width:126px;height:126px;display:grid;place-items:center;
  text-align:center;border-radius:50%;padding:0;
  background:
    radial-gradient(circle at 34% 28%,rgba(255,255,255,.34),transparent 46%),
    radial-gradient(circle at 50% 50%,#D8213B 0%,#A00E22 62%,#6E0716 100%);
  border:1px solid rgba(244,230,192,.45);
  box-shadow:0 16px 46px rgba(0,0,0,.55),inset 0 3px 12px rgba(255,255,255,.22),
             inset 0 -6px 16px rgba(0,0,0,.35);
  color:var(--or-pale);font-family:var(--display);text-transform:uppercase;
  animation:noel-sceau 6s var(--ease) infinite alternate}
.sceau span{display:grid;gap:2px;align-content:center;justify-items:center;
  width:96px;height:96px;border-radius:50%;
  border:1px solid rgba(244,230,192,.4);
  font-size:.56rem;letter-spacing:.2em;line-height:1.6}
.sceau b{display:block;font-size:1.62rem;letter-spacing:.02em;color:#fff}
@keyframes noel-sceau{from{transform:rotate(-7deg)}to{transform:rotate(-3deg)}}
@media(max-width:900px){
  .sceau{width:96px;height:96px}
  .sceau span{width:72px;height:72px;font-size:.46rem}
  .sceau b{font-size:1.16rem}
}

/* ── Le compte à rebours, sous le héros ─────────────────────── */
.noel-compte{padding-block:clamp(46px,6vw,84px);
  background:
    radial-gradient(900px 420px at 18% 50%,rgba(200,16,46,.16),transparent 70%),
    linear-gradient(180deg,var(--nuit),#0A1A15 55%,var(--nuit))}
.compte-in{display:grid;grid-template-columns:1.1fr auto;gap:clamp(26px,4vw,64px);
  align-items:center}
@media(max-width:900px){.compte-in{grid-template-columns:1fr}}
.compte-txt h2{font-family:var(--display);font-size:var(--t-l);line-height:.96;
  text-transform:uppercase;margin:18px 0 0}
.compte-note{margin-top:18px;max-width:52ch;font-weight:300;font-size:.96rem;
  line-height:1.75;color:var(--encre-doux)}
.rebours{display:flex;gap:10px;flex-wrap:wrap}
.rebours .case{min-width:82px;padding:13px 10px 11px;text-align:center;
  border:1px solid var(--or-sourd);background:rgba(6,13,11,.5);
  backdrop-filter:blur(6px)}
.rebours .case b{display:block;font-family:var(--display);font-size:1.9rem;
  line-height:1;color:var(--or-lisible)}
.rebours .case span{display:block;margin-top:7px;font-size:.58rem;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(246,248,247,.62)}
/* La seconde bat : c'est la seule chose de la page qui bouge au rythme
   d'une montre, et c'est pour cela qu'elle bat. */
.rebours .case.seconde b{animation:noel-bat 1s steps(1,end) infinite}
@keyframes noel-bat{0%,49%{opacity:1}50%,100%{opacity:.62}}

/* ── Le ruban défilant ──────────────────────────────────────── */
body.noel .ruban{background:var(--sapin);border-block:1px solid var(--or-sourd);
  color:var(--or-pale)}
body.noel .ruban-piste span::after{background:var(--or);opacity:.55}

/* ── Les vignettes produit ──────────────────────────────────
   Les packshots sont en `mix-blend-mode:multiply` sur un fond crème :
   on ne touche donc PAS au fond de la vignette, sinon la montre
   devient une tache. On l'entoure d'un filet d'or — à 22 % il ne se
   voyait pas, les vignettes flottaient sur la nuit sans bord. */
body.noel .prod-img{box-shadow:0 0 0 1px rgba(185,147,47,.5),
  0 18px 50px rgba(0,0,0,.45)}
body.noel .prod:hover .prod-img{box-shadow:0 0 0 1px var(--or),
  0 26px 70px rgba(0,0,0,.6)}
body.noel .prod-nom{color:var(--neige)}
body.noel .prod-marque{color:var(--or-lisible)}
body.noel .prod-prix{color:var(--or-pale)}
body.noel .etiq b.sobre{background:#0B1F19;border:1px solid var(--or-sourd);
  color:var(--or-pale)}

/* ── Le nœud posé sur chaque vignette ───────────────────────
   Chaque montre du site est un cadeau possible : on pose un nœud sur
   le coin de sa vignette. Deux bandes croisées avaient été essayées
   d'abord — elles donnaient une croix rouge en travers de la montre,
   pas un nœud. Celui-ci est petit, dans le coin, et ne recouvre
   jamais le produit ; il grandit au survol. Le dessin est posé par
   noel.js, qui le clone au lieu de le refabriquer. */
.ruban-coin{position:absolute;top:11px;right:11px;width:38px;height:32px;
  z-index:3;pointer-events:none;opacity:.92;transform-origin:top right;
  transition:transform .35s var(--ease),opacity .35s var(--ease)}
.ruban-coin svg{display:block;width:100%;height:100%;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.28))}
.prod:hover .ruban-coin{opacity:1;transform:scale(1.14)}

/* ── Les tuiles d'univers et les cartes de campagne ─────────── */
body.noel .uni-tuile{box-shadow:0 0 0 1px var(--or-sourd)}
body.noel .uni-tuile:hover{box-shadow:0 0 0 1px var(--or),0 26px 70px rgba(0,0,0,.5)}
body.noel .uni-nom,body.noel .camp-nom,body.noel .genre-txt b{color:#fff}
body.noel .uni-accroche,body.noel .camp-coll{color:rgba(255,255,255,.76)}
body.noel .uni-compte,body.noel .camp-scene{color:var(--or-lisible)}
body.noel .uni-bande{background:rgba(11,31,25,.96);border:1px solid var(--or-sourd)}
body.noel .camp-fleche,body.noel .fleche{color:var(--or-lisible);
  border-color:var(--or-sourd);background:rgba(11,31,25,.7)}
body.noel .camp-fleche:hover,body.noel .fleche:hover{background:var(--or);
  color:#120C02;border-color:var(--or)}
body.noel .onglets-in button{color:rgba(246,248,247,.7)}
body.noel .onglets-in button.on{color:var(--or-lisible);border-color:var(--or)}
body.noel .points i{background:rgba(246,248,247,.3)}
body.noel .points i.on{background:var(--or-lisible)}
body.noel .lien-trait::after{background:var(--or)}
body.noel .etape b{color:var(--or-lisible)}
body.noel .edito{background:transparent}
body.noel .genre-txt{background:linear-gradient(to top,rgba(6,13,11,.92),transparent)}

/* ── Les boutons ────────────────────────────────────────────── */
body.noel .btn-ligne{color:var(--neige);border-color:rgba(246,248,247,.34);
  background-image:linear-gradient(to top,var(--or) 50%,transparent 50%)}
body.noel .btn-ligne:hover{color:#120C02;border-color:var(--or)}
body.noel .btn-plein{background-image:linear-gradient(to top,var(--or) 50%,
  var(--laque) 50%)}
body.noel .btn-plein:hover{color:#120C02}

/* ── L'atelier, la nuit ─────────────────────────────────────── */
body.noel .recit{background:linear-gradient(180deg,var(--nuit),var(--sapin) 60%,
  var(--nuit))}
body.noel .recit-etape.actif h3{color:var(--or-lisible)}
body.noel .recit-num{color:var(--or)}
body.noel .chiffre b{color:var(--or-lisible)}
body.noel .devise,body.noel .citation{background:transparent}
body.noel blockquote{color:var(--neige)}
body.noel cite{color:var(--or-lisible)}

/* ── Les trois promesses ────────────────────────────────────
   `.svc{background:#fff}` : trois pavés BLANCS en bas d'une page de
   nuit, et leur texte — passé en clair par les jetons — devenait
   invisible sur invisible. On peint les cellules, pas seulement la
   grille qui les sépare. */
body.noel .svc-grid{background:var(--sapin);border-block:1px solid var(--or-sourd)}
body.noel .svc{background:#0A1C16}
body.noel .svc:hover{background:#12312A}
body.noel .svc h4{color:var(--neige)}
body.noel .svc p{color:var(--encre-doux)}
body.noel .svc-ico{color:var(--or-lisible)}

/* ── Revendeurs et pied de page ─────────────────────────────── */
body.noel .revendeurs{background:
  radial-gradient(700px 400px at 50% 0%,rgba(200,16,46,.2),transparent 70%),#0A0507}
body.noel .revendeurs h3{color:var(--neige)}
body.noel footer{background:var(--nuit);border-top:1px solid var(--or-sourd)}
body.noel footer h4{color:var(--or-lisible)}
body.noel footer a{color:rgba(246,248,247,.74)}
body.noel footer a:hover{color:var(--or-pale)}
body.noel .foot-bas{color:var(--encre-tres-doux);
  border-top-color:rgba(185,147,47,.18)}

/* ── Le bandeau cookies, en version de saison ───────────────
   Il est en `--papier` : une barre blanche en bas d'une page de nuit.
   On la passe en sapin — et on remonte le contraste des liens, qui
   étaient calculés pour du texte sur du blanc. */
body.noel .ckb{background:#0A1C16;border-top:1px solid var(--or-sourd);
  box-shadow:0 -18px 50px rgba(0,0,0,.5)}
body.noel .ckb-titre{color:var(--or-lisible)}
body.noel .ckb-titre::after{color:var(--or)}
body.noel .ckb-mot p{color:rgba(246,248,247,.78)}
body.noel .ckb-liens a{color:rgba(246,248,247,.72)}
body.noel .ckb-liens a:hover{color:var(--or-pale)}
body.noel .ckb-choix{border-top-color:var(--or-sourd)}
body.noel .ckb-fam b{color:var(--neige)}
body.noel .ckb-fam span{color:rgba(246,248,247,.72)}
body.noel .ckb-regler{color:rgba(246,248,247,.7)}
body.noel .ckb-regler:hover{color:var(--or-pale)}

/* ── Le tiroir du menu ──────────────────────────────────────── */
body.noel .tiroir{background:var(--sapin);color:var(--neige)}
body.noel .tiroir a,body.noel .tiroir button{color:var(--neige)}
body.noel .tiroir-lien,body.noel .bloc > button{border-bottom-color:var(--or-sourd)}
body.noel .bloc-contenu a:hover,body.noel .tiroir-lien:hover{color:var(--or-lisible)}
body.noel .tiroir-bas{border-top-color:var(--or-sourd)}
body.noel .tiroir-bas a{color:rgba(246,248,247,.72)}
body.noel .tiroir-langue{color:var(--or-lisible)}

/* ── Le héros sur téléphone ─────────────────────────────────
   Sous 860 px, le site empile : la photo, puis le texte — et il pose
   ce texte SUR LE PAPIER CLAIR, volontairement (`.slide-txt{color:
   var(--encre)!important}`, `.slide-voile{display:none}`). Sur une
   page de nuit, le titre doré se retrouvait sur du crème, illisible,
   et la ligne de modèle disparaissait tout à fait.

   On passe donc la zone de texte à la nuit — avec `!important`, parce
   que le site en met un — et on fait descendre la photo dans cette
   nuit par un dégradé posé sur `.slide-img`. Le voile, lui, reste
   masqué : sur téléphone il couvrirait aussi le texte. */
@media(max-width:860px){
  body.noel .slider{background:var(--nuit)}
  body.noel .slide-txt{color:var(--neige)!important;
    background:linear-gradient(180deg,#0A1A15,var(--nuit))}
  body.noel .slide.clair .slide-sur,
  body.noel .slide.sombre .slide-sur{color:var(--or-lisible)}
  body.noel .slide.clair .slide-modele,
  body.noel .slide.sombre .slide-modele{color:var(--or-pale)}
  body.noel .slider-barre,
  body.noel .slider.sur-sombre .slider-barre{color:var(--neige)}
  /* La photo se fond dans la nuit qui la suit : un dégradé sur
     `.slide-img`, et non le voile — celui-ci est en `inset:0` sur tout
     le bloc, texte compris. */
  body.noel .slide-img::after{content:'';position:absolute;inset:0;
    pointer-events:none;
    background:linear-gradient(180deg,rgba(4,10,8,.5) 0%,transparent 32%,
      transparent 56%,rgba(6,13,11,.82) 88%,var(--nuit) 100%)}
  /* Les boutons du héros : le site les repasse en variantes sombres
     pour le papier clair. Sur la nuit, il faut l'inverse. */
  body.noel .slide-actions .btn-clair,
  body.noel .slide-actions .btn-plein{color:#fff;
    background-image:linear-gradient(to top,var(--or) 50%,var(--laque) 50%)}
  body.noel .slide-actions .btn-clair:hover,
  body.noel .slide-actions .btn-plein:hover{color:#120C02}
  body.noel .slide-actions .btn-clair-ligne,
  body.noel .slide-actions .btn-ligne{color:#fff;
    border-color:rgba(255,255,255,.5);
    background-image:linear-gradient(to top,var(--or) 50%,transparent 50%)}
  body.noel .slide-actions .btn-clair-ligne:hover,
  body.noel .slide-actions .btn-ligne:hover{color:#120C02}
  /* Le sceau sort du cadre sur un petit écran : il se pose sous la
     guirlande, à droite, et rétrécit encore. */
  .sceau{top:calc(var(--header) + 12px);width:84px;height:84px}
  .sceau span{width:62px;height:62px;font-size:.42rem;letter-spacing:.14em}
  .sceau b{font-size:1rem}
}

/* ── Ce que l'utilisateur a demandé de ne pas voir bouger ────
   On coupe tout ce qui bouge de soi-même. Le survol et les
   transitions d'état restent : ce sont des réponses à une action,
   pas du mouvement subi. */
@media(prefers-reduced-motion:reduce){
  body.noel::after,.guirlande .ampoule,.guirlande .halo,.or,.sceau,.comete,
  .rebours .case.seconde b{animation:none}
  .comete{display:none}
  #noel-neige{display:none}
  .filet-or{transform:none;transition:none}
}