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

   Même principe que la feuille de Noël : elle ne touche à aucun jeton
   de marque, elle ne change pas un produit, et elle redéfinit les gris
   de texte partout où le fond devient sombre.

   Là où Noël descend vers le vert-sapin et l'or, Halloween descend
   vers l'encre et le violet, et la lumière vient d'une seule source —
   la lune. L'orange n'est pas un fond : c'est une braise, et une
   braise se pose par touches.

   Les trois pièges appris sur la page de Noël sont évités d'entrée :
   pas de `body.hw > *{position:relative}`, pas d'inversion des logos,
   pas de `text-shadow` sur un titre découpé en dégradé. Les notes
   restent à leur place dans le fichier.
   ───────────────────────────────────────────────────────────── */

:root{
  /* — L'encre — trois profondeurs, teintées de violet et non de gris :
       une nuit d'octobre n'est pas neutre, elle est froide et mauve. */
  --encre-nuit:#07060B;
  --violet:#160E24;
  --violet-haut:#241639;
  /* — La braise — l'orange de citrouille, et sa version LISIBLE pour
       le texte posé sur l'encre. `--braise` sert aux filets, aux
       bordures et aux aplats ; `--braise-lisible` au texte. */
  --braise:#D2561A;
  --braise-lisible:#F59A4B;
  --braise-pale:#FFD9A8;
  --braise-sourde:rgba(210,86,26,.2);
  /* — La lune — un blanc bleuté, jamais un blanc chaud. */
  --lune:#DCE4F0;
  --os:#EDE9E2;
}

/* ── Le fond de page devient la nuit d'octobre ──────────────
   Trois nappes fixes : la lueur de lune en haut à droite, le violet
   qui monte du bas, et une braise au ras du sol. Elles sont en
   `z-index:-1` — derrière le contenu, devant le fond du corps.

   ⚠️ Surtout PAS de `body.hw > *{position:relative;z-index:1}` pour
   lever le contenu : la règle (0,1,1) bat `.entete`, `.tiroir`,
   `.voile` (0,1,0), qui repassent alors dans le flux — le tiroir du
   menu, haut comme l'écran, pousse le héros mille pixels plus bas.
   C'est exactement ce qui est arrivé sur la page de Noël. */
body.hw{background:var(--encre-nuit);color:var(--os)}
body.hw::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1100px 700px at 84% -6%,rgba(220,228,240,.14),transparent 62%),
    radial-gradient(1000px 700px at 12% 78%,rgba(36,22,57,.9),transparent 70%),
    radial-gradient(900px 380px at 62% 110%,rgba(210,86,26,.10),transparent 74%)}
/* La brume : deux nappes très larges qui dérivent en sens contraire.
   C'est le décalage des deux vitesses qui fait la brume — une seule
   nappe ne donne qu'un dégradé qui glisse. */
body.hw::after{
  content:'';position:fixed;inset:-10% -40%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 34% at 20% 28%,rgba(220,228,240,.055),transparent 70%),
    radial-gradient(52% 30% at 74% 62%,rgba(160,140,200,.06),transparent 72%),
    radial-gradient(44% 26% at 46% 88%,rgba(210,86,26,.05),transparent 74%);
  animation:hw-brume 46s linear infinite alternate}
@keyframes hw-brume{
  from{transform:translate3d(-3%,0,0) scale(1)}
  to{transform:translate3d(3%,-2%,0) scale(1.06)}}

/* Les braises : un canevas de particules qui MONTENT — l'exact
   contraire de la neige, et c'est ce qui distingue les deux pages
   d'un coup d'œil, avant même la couleur.
   `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. */
#hw-braises{position:fixed;inset:0;width:100%;height:100%;z-index:2;
  pointer-events:none}

/* ── Les gris de texte, sur l'encre ───────────────────────── */
body.hw{--encre-doux:rgba(237,233,226,.76);--encre-tres-doux:rgba(237,233,226,.58)}
body.hw h1,body.hw h2,body.hw h3,body.hw h4,body.hw blockquote{color:var(--os)}
body.hw .sur{color:var(--braise-lisible)}

/* ── Le bandeau du prototype ────────────────────────────────── */
body.hw .bandeau-proto{background:#150A04;color:var(--braise-pale);
  border-bottom:1px solid var(--braise-sourde)}

/* ── Le bandeau de saison, au-dessus de l'en-tête ────────────
   Il défile avec la page ; halloween.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).
   Le clignotement : une ampoule qui faiblit, pas une guirlande de
   foire. Deux micro-coupures dans un cycle de sept secondes — assez
   pour qu'on le remarque une fois, pas assez pour qu'on le regarde. */
/* Le bandeau est une BRAISE, pas une citrouille. En orange vif il
   emportait toute la page : le fond du héros est froid (mesuré : 5,6,13
   dans l'angle), mais l'œil ne voyait plus que cette bande. En ember
   sombre, c'est le titre qui mène, et le bandeau l'accompagne. */
.hw-bandeau{position:relative;z-index:61;
  background:linear-gradient(90deg,#230A03,#8A3510 46%,#230A03);
  color:var(--braise-pale);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(245,154,75,.35);
  animation:hw-clignote 7s steps(1,end) infinite}
.hw-bandeau b{font-weight:700;color:#FFF0D8}
.hw-bandeau span{display:inline-flex;align-items:center;gap:9px}
.hw-bandeau span::before{content:'';width:5px;height:5px;transform:rotate(45deg);
  background:var(--braise-lisible);flex:none}
.hw-bandeau a{color:var(--braise-pale);text-decoration:underline;
  text-decoration-color:rgba(245,154,75,.5);text-underline-offset:4px}
@keyframes hw-clignote{
  0%,42%,100%{filter:none}
  43%{filter:brightness(.42) saturate(.6)}
  44%,58%{filter:none}
  59%{filter:brightness(.55) saturate(.7)}
  60%{filter:none}}
@media(max-width:760px){
  .hw-bandeau{gap:14px;font-size:.62rem;letter-spacing:.1em;padding:9px 14px}
  .hw-bandeau .masq-xs{display:none}
}

/* ── L'en-tête ──────────────────────────────────────────────── */
body.hw .entete{
  background:linear-gradient(to bottom,rgba(7,6,11,.95) 0%,rgba(7,6,11,.64) 58%,
    rgba(7,6,11,0) 100%);
  border-bottom-color:transparent}
body.hw .entete.pose{background:rgba(7,6,11,.93);
  backdrop-filter:blur(18px) saturate(1.2);
  border-bottom-color:var(--braise-sourde);box-shadow:0 1px 28px rgba(0,0,0,.7)}
body.hw .entete a,body.hw .entete button{color:var(--os)}
body.hw .entete .burger i{background:var(--os)}
body.hw .entete .pastille{background:var(--braise);color:#140A04}
body.hw .entete .jauge{background:linear-gradient(90deg,var(--braise),#8A1E4E)}
body.hw .lang-menu{background:var(--violet);border-color:var(--braise-sourde);
  color:var(--os)}
body.hw .lang-opt{color:var(--os)}
body.hw .lang-opt:hover{background:rgba(210,86,26,.16)}

/* ── Les logos, sur l'encre ─────────────────────────────────
   `logo-brm-hub.jpg` et `logo-brm-hub-clair.png` sont des cartouches
   NOIRS à lettrage blanc, bordés d'un fin liseré blanc. Ni inversion
   (elle fabrique la « plaque percée » : un rectangle blanc, des
   lettres noires), ni `screen` seul (le liseré reste et fait un cadre
   lumineux). La maison a déjà l'image qu'il faut —
   `logo-brm-clair.png`, lettrage blanc sur fond transparent —, et
   c'est halloween.js qui pose cette source. Ici, on ne filtre rien. */
body.hw .entete .logo img,
body.hw footer .logo img,
body.hw .tiroir-haut .logo img{mix-blend-mode:normal;filter:none}

/* ── La lune ────────────────────────────────────────────────
   Une seule source de lumière dans la page, en haut à droite du
   héros, avec son halo et ses deux mers. Elle respire très lentement.
   Elle est ABSOLUE, pas fixée : fixée, elle suivrait le défilement et
   se retrouverait au milieu des photos d'atelier — l'erreur commise
   d'abord avec la guirlande de Noël. */
.lune{position:absolute;z-index:3;pointer-events:none;
  right:clamp(150px,25vw,430px);top:clamp(58px,10vh,124px);
  width:clamp(74px,8vw,126px);aspect-ratio:1;border-radius:50%;
  /* Quatre arrêts et non deux : la lune s'éteint vers son bord bas —
     c'est le terminateur qui la fait lire comme une sphère. À deux
     arrêts, elle ressemblait à une perle posée sur la photo. */
  background:radial-gradient(circle at 36% 30%,#F4F8FF 0%,#D4DEEE 44%,
    #9AA7BF 76%,#6E7A93 100%);
  box-shadow:0 0 0 1px rgba(220,228,240,.22),
             0 0 70px 26px rgba(220,228,240,.13),
             0 0 190px 80px rgba(170,190,224,.1);
  animation:hw-lune 9s ease-in-out infinite alternate}
/* Les mers : deux creux gris posés en dégradés, jamais des cercles
   nets — la lune n'a pas de contours francs. */
/* Les mers : deux creux très larges et très faibles. Serrées et
   marquées, elles faisaient deux yeux. */
.lune::before,.lune::after{content:'';position:absolute;border-radius:50%;
  background:radial-gradient(circle,rgba(110,124,150,.3),transparent 74%)}
.lune::before{width:52%;height:52%;left:14%;top:18%}
.lune::after{width:36%;height:36%;right:16%;bottom:20%}
@keyframes hw-lune{from{filter:brightness(.94)}to{filter:brightness(1.06)}}

/* Les nuages qui passent devant : trois bandes floues qui traversent
   lentement. Elles sont posées SUR la lune, dans le même cadre. */
/* Les nuées couvrent tout le cadre du héros, et non une boîte autour
   de la lune : une bande qui n'existerait qu'autour d'elle se verrait
   apparaître et disparaître à ses bords. */
.nuees{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.nuee{position:absolute;height:22%;left:-50%;width:46%;
  background:radial-gradient(60% 100% at 50% 50%,rgba(12,10,18,.86),transparent 72%);
  filter:blur(9px);animation:hw-nuee linear infinite}
.nuee:nth-child(1){top:26%;animation-duration:38s}
.nuee:nth-child(2){top:48%;animation-duration:54s;animation-delay:-12s;height:16%}
.nuee:nth-child(3){top:12%;animation-duration:68s;animation-delay:-30s;height:12%}
@keyframes hw-nuee{from{transform:translateX(0)}to{transform:translateX(230%)}}

/* ── La toile d'araignée ────────────────────────────────────
   Dans les deux coins hauts du héros, dessinée par halloween.js :
   des rayons et des cordes, rien d'autre. Elle ne bouge pas — une
   toile qui s'agite n'est plus une toile, c'est un filet. */
.toile{position:absolute;z-index:5;pointer-events:none;
  width:clamp(120px,15vw,230px);aspect-ratio:1}
.toile.g{left:0;top:0}
.toile.d{right:0;top:0;transform:scaleX(-1)}
.toile svg{display:block;width:100%;height:100%}
.toile .fil{fill:none;stroke:rgba(237,233,226,.3);stroke-width:1}
.toile .corde{fill:none;stroke:rgba(237,233,226,.42);stroke-width:1.2}

/* ── Les chauves-souris ─────────────────────────────────────
   Trois silhouettes traversent le ciel du héros, à des hauteurs et
   des vitesses différentes, en battant des ailes. Le battement est
   une bascule d'échelle verticale, pas un changement d'image : une
   seule forme, et le vol reste crédible.
   Elles sont rares — sur un ciel, trois chauves-souris sont une
   ambiance ; trente sont un dessin animé. */
.chauve{position:absolute;z-index:4;pointer-events:none;
  width:clamp(22px,2.4vw,40px);color:#07060C;
  animation:hw-vol linear infinite}
/* Le liseré de lune : une silhouette noire sur un ciel noir ne se voit
   pas. Ce n'est pas une ombre portée mais un contre-jour — la lueur
   est CLAIRE, et c'est elle qui détache la bête du ciel. */
.chauve svg{display:block;width:100%;height:auto;fill:currentColor;
  filter:drop-shadow(0 0 5px rgba(214,226,246,.4))
         drop-shadow(0 2px 4px rgba(0,0,0,.7));
  transform-origin:50% 50%;animation:hw-aile .34s ease-in-out infinite alternate}
/* Chacune est nommée, pas comptée : `nth-of-type` compte les <span>
   frères, et `.defiler` du slider en est un — le premier sélecteur ne
   tombait sur aucune chauve-souris et les deux autres se décalaient. */
.chauve.un{top:16%;animation-duration:26s}
.chauve.deux{top:34%;animation-duration:34s;animation-delay:-9s;
  width:clamp(16px,1.7vw,28px)}
.chauve.trois{top:9%;animation-duration:44s;animation-delay:-21s;
  width:clamp(13px,1.3vw,22px)}
@keyframes hw-vol{
  from{transform:translateX(-14vw) translateY(0)}
  25%{transform:translateX(15vw) translateY(-3vh)}
  50%{transform:translateX(44vw) translateY(2vh)}
  75%{transform:translateX(74vw) translateY(-2vh)}
  to{transform:translateX(112vw) translateY(1vh)}}
@keyframes hw-aile{from{transform:scaleY(.52)}to{transform:scaleY(1)}}

/* ── Le grand titre : de la braise, pas de l'orange ─────────
   Cinq arrêts, du charbon au blanc chaud, balayés lentement : c'est
   ce qui fait lire « métal chauffé » plutôt que « couleur ». Le repli
   est une couleur pleine pour les navigateurs sans
   `background-clip:text`. */
.braise{color:var(--braise-lisible)}
@supports (-webkit-background-clip:text) or (background-clip:text){
  .braise{background:linear-gradient(100deg,#6E2A08 0%,#F59A4B 24%,#D2561A 46%,
      #FFE2BC 62%,#6E2A08 100%);
    background-size:220% 100%;-webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    animation:hw-braise 10s linear infinite}
}
@keyframes hw-braise{to{background-position:220% 0}}

/* Le filet de braise, qui se tire quand la section entre à l'écran */
.filet-braise{height:1px;border:0;margin:0;opacity:.55;
  background:linear-gradient(90deg,transparent,var(--braise),transparent);
  transform:scaleX(0);transform-origin:center;
  transition:transform 1.3s var(--ease)}
.filet-braise.tire{transform:scaleX(1)}

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

/* ── Le héros ───────────────────────────────────────────────
   site.css distingue `.slide.clair` et `.slide.sombre`, et ses
   sélecteurs (0,3,0) battent un `body.hw .slide-voile` (0,2,0) : sans
   viser les deux cas nommément, les diapositives claires gardent leur
   voile BLANC. Le violet se pose dans le voile, pas dans un filtre :
   une teinte appliquée à la photo fausserait la couleur de la
   montre, et une montre ne change pas de couleur pour une saison. */
/* L'orange est sorti du voile, et une nappe froide l'a remplacé. La
   première version en mettait deux — une braise au sol et un halo de
   lune — sur une photo déjà désaturée : tout le héros virait au sépia,
   alors que le reste de la page tenait sur l'encre et le violet. La
   braise ne reste qu'au ras du bord inférieur, comme une lueur qui
   monterait du sol.
   La teinte froide est posée dans le VOILE, jamais en filtre sur
   l'image : un `hue-rotate` sur la photo changerait la couleur de la
   montre, et une montre ne change pas de couleur pour une saison. */
body.hw .slide.clair .slide-voile,
body.hw .slide.sombre .slide-voile{
  background:
    linear-gradient(90deg,rgba(4,4,9,.95) 0%,rgba(8,7,16,.8) 34%,
      rgba(14,12,26,.42) 62%,rgba(14,12,26,.26) 100%),
    radial-gradient(900px 600px at 82% 24%,rgba(214,226,246,.15),transparent 66%),
    linear-gradient(0deg,rgba(210,86,26,.11) 0%,transparent 20%),
    linear-gradient(180deg,rgba(4,4,9,.62) 0%,transparent 26%,transparent 72%,
      rgba(4,4,9,.72) 100%),
    linear-gradient(0deg,rgba(26,28,56,.34),rgba(26,28,56,.34))}
body.hw .slide-img img{filter:brightness(.58) contrast(1.12) saturate(.7)}
body.hw .slide.clair .slide-txt,
body.hw .slide.sombre .slide-txt{color:var(--os)}
body.hw .slide.clair .slide-sur,
body.hw .slide.sombre .slide-sur{color:var(--braise-lisible)}
body.hw .slide.clair .slide-modele,
body.hw .slide.sombre .slide-modele{color:var(--braise-pale);opacity:.94}
body.hw .slide .btn-ligne{color:#fff;border-color:rgba(255,255,255,.5)}
body.hw .slide .btn-ligne:hover{color:#140A04}
/* ⚠️ Pas de `text-shadow` sur un titre en braise : elle peint l'ombre
   du GLYPHE, et le glyphe est transparent (`background-clip:text`) —
   l'ombre se voit à travers, comme un fantôme gris sous chaque
   lettre. L'ombre se pose sur la boîte, par filtre. */
body.hw .slide h2{text-shadow:none;filter:drop-shadow(0 8px 34px rgba(0,0,0,.72))}
body.hw .slider-barre{color:var(--os)}
body.hw .slider-puces button.on{background:var(--braise-lisible)}
body.hw .defiler{color:rgba(237,233,226,.7)}

/* ── Le sceau de cire ───────────────────────────────────────
   Noir cirée et braise : une goutte de cire noire, une lumière en
   haut à gauche, un liseré de braise. Il pend légèrement de travers,
   comme un sceau posé à la main. */
.sceau-hw{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,217,168,.3),transparent 46%),
    radial-gradient(circle at 50% 50%,#3A1206 0%,#1C0703 62%,#0B0402 100%);
  border:1px solid rgba(245,154,75,.55);
  box-shadow:0 16px 46px rgba(0,0,0,.7),inset 0 3px 12px rgba(255,217,168,.16),
             inset 0 -6px 16px rgba(0,0,0,.5);
  color:var(--braise-pale);font-family:var(--display);text-transform:uppercase;
  /* ⚠️ La rotation est une animation, et une animation bat un
     `style.transform` posé en ligne par le script. Le parallaxe au
     défilement se fait donc sur `top` — que rien n'anime. */
  animation:hw-sceau 7s var(--ease) infinite alternate}
.sceau-hw span{display:grid;gap:2px;align-content:center;justify-items:center;
  width:96px;height:96px;border-radius:50%;
  border:1px solid rgba(245,154,75,.4);
  font-size:.52rem;letter-spacing:.2em;line-height:1.6}
.sceau-hw b{display:block;font-size:1.5rem;letter-spacing:.02em;
  color:var(--braise-lisible)}
@keyframes hw-sceau{from{transform:rotate(6deg)}to{transform:rotate(2deg)}}
@media(max-width:900px){
  .sceau-hw{width:96px;height:96px}
  .sceau-hw span{width:72px;height:72px;font-size:.42rem}
  .sceau-hw b{font-size:1.06rem}
}

/* ── Le compte à rebours, sous le héros ─────────────────────── */
.hw-compte{padding-block:clamp(46px,6vw,84px);
  background:
    radial-gradient(900px 420px at 82% 50%,rgba(210,86,26,.15),transparent 70%),
    linear-gradient(180deg,var(--encre-nuit),#130C1E 55%,var(--encre-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(--braise-sourde);background:rgba(7,6,11,.55);
  backdrop-filter:blur(6px)}
.rebours .case b{display:block;font-family:var(--display);font-size:1.9rem;
  line-height:1;color:var(--braise-lisible)}
.rebours .case span{display:block;margin-top:7px;font-size:.58rem;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(237,233,226,.62)}
/* La seconde bat : 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:hw-bat 1s steps(1,end) infinite}
@keyframes hw-bat{0%,49%{opacity:1}50%,100%{opacity:.6}}

/* ── Le ruban défilant ──────────────────────────────────────── */
body.hw .ruban{background:var(--violet);border-block:1px solid var(--braise-sourde);
  color:var(--braise-pale)}
body.hw .ruban-piste span::after{background:var(--braise);opacity:.6}

/* ── 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 de braise. */
body.hw .prod-img{box-shadow:0 0 0 1px rgba(210,86,26,.45),
  0 18px 50px rgba(0,0,0,.55)}
body.hw .prod:hover .prod-img{box-shadow:0 0 0 1px var(--braise),
  0 26px 70px rgba(0,0,0,.7)}
body.hw .prod-nom{color:var(--os)}
body.hw .prod-marque{color:var(--braise-lisible)}
body.hw .prod-prix{color:var(--braise-pale)}
body.hw .etiq b.sobre{background:#160E24;border:1px solid var(--braise-sourde);
  color:var(--braise-pale)}

/* ── L'araignée au fil ──────────────────────────────────────
   Le pendant du nœud de Noël : une araignée pend au coin de chaque
   vignette, au bout d'un fil. Au survol, elle DESCEND — c'est le seul
   endroit de la page où le décor réagit au geste, et c'est pour cela
   qu'il n'y en a qu'un.
   Le fil et la bête sont dans le même élément, posé par halloween.js ;
   `.prod-img` est en `overflow:hidden`, donc rien ne dépasse. */
.fil-araignee{position:absolute;top:0;right:22px;width:26px;height:74px;
  z-index:3;pointer-events:none;
  transform:translateY(-30px);
  transition:transform .5s var(--ease)}
.fil-araignee svg{display:block;width:100%;height:100%;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.4))}
.prod:hover .fil-araignee{transform:translateY(4px)}
/* La bête balance très légèrement : un fil vivant, pas un piquet. */
.fil-araignee .bete{transform-box:fill-box;transform-origin:50% 0;
  animation:hw-balance 3.4s ease-in-out infinite alternate}
@keyframes hw-balance{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}

/* ── Les tuiles d'univers et les cartes de campagne ─────────── */
body.hw .uni-tuile{box-shadow:0 0 0 1px var(--braise-sourde)}
body.hw .uni-tuile:hover{box-shadow:0 0 0 1px var(--braise),0 26px 70px rgba(0,0,0,.6)}
body.hw .uni-nom,body.hw .camp-nom,body.hw .genre-txt b{color:#fff}
body.hw .uni-accroche,body.hw .camp-coll{color:rgba(255,255,255,.76)}
body.hw .uni-compte,body.hw .camp-scene{color:var(--braise-lisible)}
body.hw .uni-bande{background:rgba(22,14,36,.97);border:1px solid var(--braise-sourde)}
body.hw .camp-fleche,body.hw .fleche{color:var(--braise-lisible);
  border-color:var(--braise-sourde);background:rgba(22,14,36,.75)}
body.hw .camp-fleche:hover,body.hw .fleche:hover{background:var(--braise);
  color:#140A04;border-color:var(--braise)}
body.hw .onglets-in button{color:rgba(237,233,226,.7)}
body.hw .onglets-in button.on{color:var(--braise-lisible);border-color:var(--braise)}
body.hw .points i{background:rgba(237,233,226,.3)}
body.hw .points i.on{background:var(--braise-lisible)}
body.hw .lien-trait::after{background:var(--braise)}
body.hw .etape b{color:var(--braise-lisible)}
body.hw .edito{background:transparent}
body.hw .genre-txt{background:linear-gradient(to top,rgba(7,6,11,.94),transparent)}

/* ── Les boutons ────────────────────────────────────────────── */
body.hw .btn-ligne{color:var(--os);border-color:rgba(237,233,226,.34);
  background-image:linear-gradient(to top,var(--braise) 50%,transparent 50%)}
body.hw .btn-ligne:hover{color:#140A04;border-color:var(--braise)}
body.hw .btn-plein{background-image:linear-gradient(to top,var(--braise) 50%,
  #6E2A08 50%)}
body.hw .btn-plein:hover{color:#140A04}

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

/* ── Les trois promesses ────────────────────────────────────
   `.svc{background:#fff}` : trois pavés BLANCS en bas d'une page
   d'encre, 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.hw .svc-grid{background:var(--violet);border-block:1px solid var(--braise-sourde)}
body.hw .svc{background:#120B1D}
body.hw .svc:hover{background:#1E1330}
body.hw .svc h4{color:var(--os)}
body.hw .svc p{color:var(--encre-doux)}
body.hw .svc-ico{color:var(--braise-lisible)}

/* ── Revendeurs et pied de page ─────────────────────────────── */
body.hw .revendeurs{background:
  radial-gradient(700px 400px at 50% 0%,rgba(210,86,26,.2),transparent 70%),#0A0509}
body.hw .revendeurs h3{color:var(--os)}
body.hw footer{background:var(--encre-nuit);border-top:1px solid var(--braise-sourde)}
body.hw footer h4{color:var(--braise-lisible)}
body.hw footer a{color:rgba(237,233,226,.74)}
body.hw footer a:hover{color:var(--braise-pale)}
body.hw .foot-bas{color:var(--encre-tres-doux);
  border-top-color:rgba(210,86,26,.18)}

/* ── Le bandeau cookies, en version de saison ─────────────── */
body.hw .ckb{background:#120B1D;border-top:1px solid var(--braise-sourde);
  box-shadow:0 -18px 50px rgba(0,0,0,.6)}
body.hw .ckb-titre{color:var(--braise-lisible)}
body.hw .ckb-titre::after{color:var(--braise)}
body.hw .ckb-mot p{color:rgba(237,233,226,.78)}
body.hw .ckb-liens a{color:rgba(237,233,226,.72)}
body.hw .ckb-liens a:hover{color:var(--braise-pale)}
body.hw .ckb-choix{border-top-color:var(--braise-sourde)}
body.hw .ckb-fam b{color:var(--os)}
body.hw .ckb-fam span{color:rgba(237,233,226,.72)}
body.hw .ckb-regler{color:rgba(237,233,226,.7)}
body.hw .ckb-regler:hover{color:var(--braise-pale)}

/* ── Le tiroir du menu ──────────────────────────────────────── */
body.hw .tiroir{background:var(--violet);color:var(--os)}
body.hw .tiroir a,body.hw .tiroir button{color:var(--os)}
body.hw .tiroir-lien,body.hw .bloc > button{border-bottom-color:var(--braise-sourde)}
body.hw .bloc-contenu a:hover,body.hw .tiroir-lien:hover{color:var(--braise-lisible)}
body.hw .tiroir-bas{border-top-color:var(--braise-sourde)}
body.hw .tiroir-bas a{color:rgba(237,233,226,.72)}
body.hw .tiroir-langue{color:var(--braise-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 d'encre, le titre en braise se retrouvait sur du crème.

   On passe donc la zone de texte à l'encre — avec `!important`, parce
   que le site en met un — et on fait descendre la photo dedans 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.hw .slider{background:var(--encre-nuit)}
  body.hw .slide-txt{color:var(--os)!important;
    background:linear-gradient(180deg,#130C1E,var(--encre-nuit))}
  body.hw .slide.clair .slide-sur,
  body.hw .slide.sombre .slide-sur{color:var(--braise-lisible)}
  body.hw .slide.clair .slide-modele,
  body.hw .slide.sombre .slide-modele{color:var(--braise-pale)}
  body.hw .slider-barre,
  body.hw .slider.sur-sombre .slider-barre{color:var(--os)}
  body.hw .slide-img::after{content:'';position:absolute;inset:0;
    pointer-events:none;
    background:linear-gradient(180deg,rgba(5,4,9,.55) 0%,transparent 32%,
      transparent 56%,rgba(7,6,11,.85) 88%,var(--encre-nuit) 100%)}
  body.hw .slide-actions .btn-clair,
  body.hw .slide-actions .btn-plein{color:#fff;
    background-image:linear-gradient(to top,var(--braise) 50%,#6E2A08 50%)}
  body.hw .slide-actions .btn-clair:hover,
  body.hw .slide-actions .btn-plein:hover{color:#140A04}
  body.hw .slide-actions .btn-clair-ligne,
  body.hw .slide-actions .btn-ligne{color:#fff;
    border-color:rgba(255,255,255,.5);
    background-image:linear-gradient(to top,var(--braise) 50%,transparent 50%)}
  body.hw .slide-actions .btn-clair-ligne:hover,
  body.hw .slide-actions .btn-ligne:hover{color:#140A04}
  /* La lune et le sceau se serrent : sur un petit écran, ils se
     marchaient dessus dans le même coin. La lune passe à gauche. */
  .lune{left:var(--gouttiere);right:auto}
  .sceau-hw{top:calc(var(--header) + 12px);width:84px;height:84px}
  .sceau-hw span{width:62px;height:62px;font-size:.38rem;letter-spacing:.14em}
  .sceau-hw b{font-size:.92rem}
  /* Les toiles mangent la moitié de la photo sur un téléphone : on ne
     garde que celle de gauche, et plus petite. */
  .toile.d{display:none}
  .toile{width:96px}
}

/* ── 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.hw::after,.hw-bandeau,.lune,.nuee,.braise,.sceau-hw,
  .rebours .case.seconde b,.fil-araignee .bete{animation:none}
  .chauve,.nuees{display:none}
  #hw-braises{display:none}
  .filet-braise{transform:none;transition:none}
}