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

   Même principe que les feuilles de Noël et d'Halloween : 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.

   Le piège de cette fête-là, c'est le rose. B.R.M n'est pas une maison
   rose : c'est de la laque rouge sur du métal brossé, et c'est déjà la
   couleur de la marque. La page descend donc vers le GRENAT — un rouge
   profond, presque noir — et la lumière vient de deux sources seulement,
   la laque et la nacre. Aucun cœur n'est dessiné nulle part.

   Ce qui bouge est choisi pour ne ressembler NI à la neige de Noël (qui
   tombe) NI aux braises d'Halloween (qui montent) : ici la poussière de
   laque DÉRIVE latéralement, et le fil rouge COUD — il traverse, il ne
   traverse pas tout seul.

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

:root{
  /* — Le grenat — trois profondeurs. Un rouge sombre n'est pas un noir
       teinté : il garde du rouge jusque dans son ombre, sinon la page
       vire au brun. */
  --grenat-nuit:#0B0508;
  --grenat:#1B0810;
  --grenat-haut:#2E0D1A;
  /* — La laque — le rouge B.R.M, et sa version LISIBLE pour le texte
       posé sur le grenat. `--laque` sert aux filets, aux bordures et
       aux aplats ; `--laque-lisible` au texte, jamais l'inverse. */
  --laque:#C8102E;
  --laque-lisible:#FF7D86;
  --laque-pale:#FFD3D0;
  --laque-sourde:rgba(200,16,46,.24);
  /* — La nacre — un blanc légèrement rosé, la seule autre lumière. */
  --nacre:#F3E7E4;
  --os:#EDE7E5;
}

/* ── Le fond de page devient la nuit de février ─────────────
   Trois nappes fixes : la chaleur de laque en haut à gauche, le grenat
   qui monte du bas, et une lueur de nacre au ras du sol. Elles sont en
   `z-index:-1` — derrière le contenu, devant le fond du corps.

   ⚠️ Surtout PAS de `body.sv > *{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.sv{background:var(--grenat-nuit);color:var(--os)}
body.sv::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1000px 680px at 14% -8%,rgba(200,16,46,.20),transparent 64%),
    radial-gradient(1000px 700px at 86% 76%,rgba(46,13,26,.92),transparent 70%),
    radial-gradient(900px 360px at 44% 108%,rgba(243,231,228,.06),transparent 74%)}
/* Le souffle : deux nappes très larges qui respirent en opposition.
   C'est le décalage des deux rythmes qui fait le souffle — une seule
   nappe ne donne qu'un dégradé qui pulse, et on voit le battement. */
body.sv::after{
  content:'';position:fixed;inset:-10% -40%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 40% at 30% 30%,rgba(200,16,46,.10),transparent 70%),
    radial-gradient(55% 38% at 72% 64%,rgba(255,125,134,.07),transparent 72%);
  animation:sv-souffle 26s ease-in-out infinite alternate}
@keyframes sv-souffle{
  from{transform:translate3d(-2%,0,0) scale(1)}
  to{transform:translate3d(2%,-1.5%,0) scale(1.06)}}

/* ── Les gris de texte, sur le grenat ───────────────────────── */
body.sv{--grenat-doux:rgba(237,231,229,.76);--grenat-tres-doux:rgba(237,231,229,.58)}
body.sv h1,body.sv h2,body.sv h3,body.sv h4,body.sv blockquote{color:var(--os)}
body.sv .sur{color:var(--laque-lisible)}

/* ── Le bandeau du prototype ────────────────────────────────── */
body.sv .bandeau-proto{background:#17060C;color:var(--laque-pale);
  border-bottom:1px solid var(--laque-sourde)}

/* ── Le bandeau de saison, au-dessus de l'en-tête ────────────
   Un filet de laque le souligne, et il glisse lentement d'un bord à
   l'autre : c'est la première fois que le fil rouge apparaît, et toute
   la page le reprend ensuite. */
.sv-bandeau{position:relative;z-index:60;
  display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap;
  padding:9px 18px;
  background:linear-gradient(90deg,#1B0810,#3A0F1E 50%,#1B0810);
  border-bottom:1px solid var(--laque-sourde);
  color:var(--laque-pale);
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase}
.sv-bandeau b{color:var(--laque-lisible);font-weight:600}
.sv-bandeau a{color:var(--laque-pale);text-decoration:none;
  border-bottom:1px solid var(--laque-sourde);padding-bottom:2px}
.sv-bandeau a:hover{color:#fff;border-bottom-color:var(--laque)}
.sv-bandeau::after{content:'';position:absolute;left:0;bottom:-1px;
  width:36%;height:1px;
  background:linear-gradient(90deg,transparent,var(--laque),transparent);
  animation:sv-file 9s linear infinite}
@keyframes sv-file{from{transform:translateX(-100%)}to{transform:translateX(380%)}}
@media(max-width:760px){
  .sv-bandeau{gap:14px;font-size:.58rem;letter-spacing:.14em}
  .sv-bandeau .masq-xs{display:none}
}

/* ── L'en-tête ──────────────────────────────────────────────── */
body.sv .entete{
  background:linear-gradient(180deg,rgba(11,5,8,.9),rgba(11,5,8,0));
  border-bottom-color:transparent}
body.sv .entete.pose{background:rgba(11,5,8,.94);
  border-bottom:1px solid var(--laque-sourde);
  backdrop-filter:blur(10px)}
body.sv .entete a,body.sv .entete button{color:var(--os)}
body.sv .entete .burger i{background:var(--os)}
body.sv .entete .pastille{background:var(--laque);color:#fff}
body.sv .entete .jauge{background:linear-gradient(90deg,var(--laque),#FF7D86)}
body.sv .lang-menu{background:var(--grenat);border-color:var(--laque-sourde);
  box-shadow:0 20px 50px rgba(0,0,0,.6)}
body.sv .lang-opt{color:var(--os)}
body.sv .lang-opt:hover{background:rgba(200,16,46,.18)}

/* ── Les logos, sur le grenat ───────────────────────────────
   Le site sert un cartouche noir à lettrage blanc, bordé d'un liseré
   blanc : sur le grenat, le liseré fait un cadre et le cartouche fait
   une tache. La maison a déjà l'image qu'il faut — `logo-brm-clair.png`.
   On échange la source (saint-valentin.js), on n'INVERSE rien : un
   `filter:invert()` sur un cartouche noir donne la « plaque percée »
   déjà connue de la maison. */
body.sv .entete .logo img,
body.sv footer .logo img,
body.sv .tiroir-haut .logo img{mix-blend-mode:normal;filter:none}

/* ── Le balancier ───────────────────────────────────────────
   Posé DANS le cadre du slider par saint-valentin.js, donc coupé net à
   ses bords et immobile au défilement (leçon de la guirlande de Noël,
   d'abord fixée, qui passait par-dessus les photos d'atelier).

   Il oscille lentement : un balancier réel bat huit fois par seconde,
   ce qui à l'écran ne se lit pas — ça vibre. On montre le geste, pas
   la fréquence, et le texte de la page donne le chiffre. */
/* Il était d'abord en haut à droite, où il percutait le sceau de cire :
   deux disques rouges dans le même angle, dont l'un tourne. Il descend
   dans le coin BAS GAUCHE, à demi sorti du cadre — le slider est en
   `overflow:hidden`, la roue y est coupée net et se lit comme un rouage
   entrevu, pas comme une vignette posée. C'est aussi la seule zone du
   héros que ni le texte ni la photo n'occupent. */
.balancier{position:absolute;left:-5%;bottom:-8%;width:clamp(150px,19vw,300px);
  aspect-ratio:1;z-index:1;pointer-events:none;opacity:.32;
  filter:drop-shadow(0 0 30px rgba(200,16,46,.35))}
.balancier svg{display:block;width:100%;height:100%}
.balancier .roue{transform-box:fill-box;transform-origin:50% 50%;
  animation:sv-balance 3.6s cubic-bezier(.45,0,.55,1) infinite alternate}
@keyframes sv-balance{from{transform:rotate(-38deg)}to{transform:rotate(38deg)}}
/* Le halo respire au même rythme, un temps derrière : c'est ce décalage
   qui donne l'impression d'un organe, et non d'un rouage. */
.balancier::after{content:'';position:absolute;inset:14%;border-radius:50%;
  background:radial-gradient(circle,rgba(200,16,46,.30),transparent 68%);
  animation:sv-halo 3.6s ease-in-out .5s infinite alternate}
@keyframes sv-halo{from{opacity:.35;transform:scale(.94)}
  to{opacity:.75;transform:scale(1.08)}}

/* ── La poussière de laque ──────────────────────────────────
   Le canevas couvre l'écran, derrière tout le contenu. */
#sv-poussiere{position:fixed;inset:0;z-index:-1;pointer-events:none}

/* ── Le grand titre : de la laque, pas du rose ──────────────
   ⚠️ Le titre est découpé dans un dégradé (`background-clip:text`) :
   le glyphe est TRANSPARENT. Un `text-shadow` peindrait l'ombre du
   glyphe, qu'on verrait alors à travers lui. L'ombre se pose au
   `filter`, qui travaille sur le rendu et non sur la lettre. */
/* Le dosage est tout : un dégradé qui part du pâle et y revient donne du
   ROSE, ce que cette page refuse. La laque domine, le clair n'est qu'un
   reflet — deux bandes étroites, comme la lumière sur du vernis. */
.laque{background:linear-gradient(104deg,var(--laque) 0%,#FF9AA0 16%,
    var(--laque) 38%,#8E0C22 62%,#FF9AA0 84%,var(--laque) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 6px 26px rgba(0,0,0,.6));
  animation:sv-laque 11s ease-in-out infinite alternate}
@keyframes sv-laque{from{background-position:0% 50%}to{background-position:100% 50%}}

/* ── Le sur-titre de saison ─────────────────────────────────── */
.sur-sv{font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--laque-lisible);margin:0}

/* ── Le héros ───────────────────────────────────────────────
   On ne touche ni aux photos ni aux textes : on assombrit le voile et
   on réchauffe très légèrement le bas du cadre. La teinte froide du
   site reste dans la photo — un `hue-rotate` la ferait virer, et la
   montre n'aurait plus sa couleur. */
body.sv .slide.clair .slide-voile,
body.sv .slide.sombre .slide-voile{
  background:
    linear-gradient(90deg,rgba(11,5,8,.86) 0%,rgba(11,5,8,.52) 46%,transparent 74%),
    linear-gradient(0deg,rgba(43,10,22,.6) 0%,transparent 42%)}
body.sv .slide-img img{filter:brightness(.6) contrast(1.1) saturate(.82)}
body.sv .slide.clair .slide-txt,
body.sv .slide.sombre .slide-txt{color:var(--os)}
body.sv .slide.clair .slide-sur,
body.sv .slide.sombre .slide-sur{color:var(--laque-lisible)}
body.sv .slide.clair .slide-modele,
body.sv .slide.sombre .slide-modele{color:var(--laque-pale);opacity:.94}
body.sv .slide .btn-ligne{color:#fff;border-color:rgba(255,255,255,.5)}
body.sv .slide .btn-ligne:hover{color:#fff}
body.sv .slide h2{text-shadow:none;filter:drop-shadow(0 8px 34px rgba(0,0,0,.72))}
body.sv .slider-barre{color:var(--os)}
body.sv .slider-puces button.on{background:var(--laque-lisible)}
body.sv .defiler{color:rgba(237,231,229,.7)}

/* ── Le sceau de cire ───────────────────────────────────────
   Cire rouge et lumière rasante : une goutte posée à la main, donc
   légèrement de travers. */
.sceau-sv{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,211,208,.34),transparent 46%),
    radial-gradient(circle at 50% 50%,#8E0C22 0%,#4A0611 62%,#210308 100%);
  border:1px solid rgba(255,125,134,.5);
  box-shadow:0 16px 46px rgba(0,0,0,.7),inset 0 3px 12px rgba(255,211,208,.18),
             inset 0 -6px 16px rgba(0,0,0,.5);
  color:var(--laque-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:sv-sceau 7s var(--ease) infinite alternate}
.sceau-sv span{display:grid;gap:2px;align-content:center;justify-items:center;
  width:96px;height:96px;border-radius:50%;
  border:1px solid rgba(255,125,134,.38);
  font-size:.52rem;letter-spacing:.2em;line-height:1.6}
.sceau-sv b{display:block;font-size:1.5rem;letter-spacing:.02em;
  color:var(--laque-pale)}
@keyframes sv-sceau{from{transform:rotate(-6deg)}to{transform:rotate(-2deg)}}
@media(max-width:900px){
  .sceau-sv{width:96px;height:96px}
  .sceau-sv span{width:72px;height:72px;font-size:.42rem}
  .sceau-sv b{font-size:1.06rem}
}

/* ── Le compte à rebours, sous le héros ─────────────────────── */
.sv-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(--grenat-nuit),#1B0810 55%,var(--grenat-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:54ch;font-weight:300;font-size:.96rem;
  line-height:1.75;color:var(--grenat-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(--laque-sourde);background:rgba(11,5,8,.55);
  backdrop-filter:blur(6px)}
.rebours .case b{display:block;font-family:var(--display);font-size:1.9rem;
  line-height:1;color:var(--laque-lisible)}
.rebours .case span{display:block;margin-top:7px;font-size:.58rem;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(237,231,229,.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:sv-bat 1s steps(1,end) infinite}
@keyframes sv-bat{0%,49%{opacity:1}50%,100%{opacity:.6}}

/* ── Le ruban défilant ──────────────────────────────────────── */
body.sv .ruban{background:var(--grenat);border-block:1px solid var(--laque-sourde);
  color:var(--laque-pale)}
body.sv .ruban-piste span::after{background:var(--laque);opacity:.7}

/* ── Le filet cousu, entre les sections ─────────────────────
   Le pendant du filet d'or de Noël et du filet de braise d'Halloween,
   mais il ne se tire pas : il se COUD. Le trait est en pointillés, et
   c'est son décalage qui avance — l'aiguille passe, le fil suit.
   `saint-valentin.js` pose la classe `.cousu` quand la section entre
   à l'écran. */
.filet-couture{border:0;height:1px;margin:0;width:100%;
  background-image:linear-gradient(90deg,var(--laque) 0 14px,transparent 14px 26px);
  background-size:26px 1px;background-repeat:repeat-x;
  opacity:.16;
  transform:scaleX(0);transform-origin:left center;
  transition:transform 1.5s var(--ease),opacity 1.5s var(--ease)}
.filet-couture.cousu{transform:scaleX(1);opacity:.6;
  animation:sv-coudre 1.6s linear infinite}
@keyframes sv-coudre{from{background-position:0 0}to{background-position:26px 0}}

/* ── 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 laque. */
body.sv .prod-img{box-shadow:0 0 0 1px rgba(200,16,46,.42),
  0 18px 50px rgba(0,0,0,.55)}
body.sv .prod:hover .prod-img{box-shadow:0 0 0 1px var(--laque),
  0 26px 70px rgba(0,0,0,.7)}
body.sv .prod-nom{color:var(--os)}
body.sv .prod-marque{color:var(--laque-lisible)}
body.sv .prod-prix{color:var(--laque-pale)}
body.sv .etiq b.sobre{background:#1B0810;border:1px solid var(--laque-sourde);
  color:var(--laque-pale)}

/* ── La surpiqûre, au coin des vignettes ────────────────────
   Le pendant du nœud de Noël et de l'araignée d'Halloween : deux
   points de couture rouges dans l'angle, comme sur un bracelet B.R.M.
   Au survol, la couture se POURSUIT — le trait s'allonge d'un point.
   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.
   `.prod-img` est en `overflow:hidden`, donc rien ne dépasse. */
/* Coin HAUT GAUCHE, et pas droit : le bouton favori de la vignette est à
   droite, et la couture lui passait dessus — on lisait une rayure sur un
   cœur, exactement le contresens que cette page évite partout ailleurs. */
.surpiqure{position:absolute;top:0;left:0;width:96px;height:96px;
  z-index:3;pointer-events:none}
.surpiqure svg{display:block;width:100%;height:100%;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.35))}
/* Le trait est court et le vide un peu plus grand : c'est l'écart entre
   deux points qui fait lire « couture » plutôt que « pointillé ». Le
   décalage part à 52 — la longueur d'un côté — pour que le fil se pose
   au survol au lieu d'apparaître d'un bloc. */
.surpiqure .fil{stroke:var(--laque);stroke-width:2;fill:none;
  stroke-linecap:round;
  stroke-dasharray:6 5.5;
  stroke-dashoffset:52;opacity:.85;
  transition:stroke-dashoffset .8s var(--ease)}
.prod:hover .surpiqure .fil{stroke-dashoffset:0}
.surpiqure .fil.second{stroke:#8E0C22;opacity:.6;stroke-width:1.6}

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

/* ── Les boutons ────────────────────────────────────────────── */
body.sv .btn-ligne{color:var(--os);border-color:rgba(237,231,229,.34);
  background-image:linear-gradient(to top,var(--laque) 50%,transparent 50%)}
body.sv .btn-ligne:hover{color:#fff;border-color:var(--laque)}
body.sv .btn-plein{background-image:linear-gradient(to top,var(--laque) 50%,
  #6E0619 50%)}
body.sv .btn-plein:hover{color:#fff}

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

/* ── Les trois promesses ────────────────────────────────────
   `.svc{background:#fff}` : trois pavés BLANCS en bas d'une page
   sombre, 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. (Leçon de la page d'Halloween.) */
body.sv .svc-grid{background:var(--grenat);border-block:1px solid var(--laque-sourde)}
body.sv .svc{background:#16070D}
body.sv .svc:hover{background:#260C17}
body.sv .svc h4{color:var(--os)}
body.sv .svc p{color:var(--grenat-doux)}
body.sv .svc-ico{color:var(--laque-lisible)}

/* ── Revendeurs et pied de page ─────────────────────────────── */
body.sv .revendeurs{background:
  radial-gradient(700px 400px at 50% 0%,rgba(200,16,46,.22),transparent 70%),#0A0407}
body.sv .revendeurs h3{color:var(--os)}
body.sv footer{background:var(--grenat-nuit);border-top:1px solid var(--laque-sourde)}
body.sv footer h4{color:var(--laque-lisible)}
body.sv footer a{color:rgba(237,231,229,.74)}
body.sv footer a:hover{color:var(--laque-pale)}
body.sv .foot-bas{color:var(--grenat-tres-doux);
  border-top-color:rgba(200,16,46,.2)}

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

/* ── Le tiroir du menu ──────────────────────────────────────── */
body.sv .tiroir{background:var(--grenat);color:var(--os)}
body.sv .tiroir a,body.sv .tiroir button{color:var(--os)}
body.sv .tiroir-lien,body.sv .bloc > button{border-bottom-color:var(--laque-sourde)}
body.sv .bloc-contenu a:hover,body.sv .tiroir-lien:hover{color:var(--laque-lisible)}
body.sv .tiroir-bas{border-top-color:var(--laque-sourde)}
body.sv .tiroir-bas a{color:rgba(237,231,229,.72)}
body.sv .tiroir-langue{color:var(--laque-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 sombre, le titre en laque se retrouvait sur du crème.

   On passe donc la zone de texte au grenat — 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.sv .slider{background:var(--grenat-nuit)}
  body.sv .slide-txt{color:var(--os)!important;
    background:linear-gradient(180deg,#1B0810,var(--grenat-nuit))}
  body.sv .slide.clair .slide-sur,
  body.sv .slide.sombre .slide-sur{color:var(--laque-lisible)}
  body.sv .slide.clair .slide-modele,
  body.sv .slide.sombre .slide-modele{color:var(--laque-pale)}
  body.sv .slider-barre,
  body.sv .slider.sur-sombre .slider-barre{color:var(--os)}
  body.sv .slide-img::after{content:'';position:absolute;inset:0;
    pointer-events:none;
    background:linear-gradient(180deg,rgba(6,3,5,.55) 0%,transparent 32%,
      transparent 56%,rgba(11,5,8,.85) 88%,var(--grenat-nuit) 100%)}
  body.sv .slide-actions .btn-clair,
  body.sv .slide-actions .btn-plein{color:#fff;
    background-image:linear-gradient(to top,var(--laque) 50%,#6E0619 50%)}
  body.sv .slide-actions .btn-clair-ligne,
  body.sv .slide-actions .btn-ligne{color:#fff;
    border-color:rgba(255,255,255,.5);
    background-image:linear-gradient(to top,var(--laque) 50%,transparent 50%)}
  .sceau-sv{top:calc(var(--header) + 12px);width:84px;height:84px}
  .sceau-sv span{width:62px;height:62px;font-size:.38rem;letter-spacing:.14em}
  .sceau-sv b{font-size:.92rem}
  .surpiqure{width:70px;height:70px}
  .balancier{left:-8%;bottom:auto;top:6%;width:110px;opacity:.26}
}

/* ── 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.sv::after,.sv-bandeau::after,.balancier .roue,.balancier::after,
  .laque,.sceau-sv,.rebours .case.seconde b{animation:none}
  #sv-poussiere{display:none}
  .filet-couture{transform:none;transition:none;opacity:.5;animation:none}
}