/* ─────────────────────────────────────────────────────────────
   B.R.M — pages de collection et fiches produit
   Feuille posée sur `site.css` : elle n'invente aucun jeton, aucune
   couleur hors charte, et ne redéfinit rien de la feuille commune.
   Deux gabarits :
     1. collection-<slug>.html  — ouverture, barre de tri, grille, encart
     2. montre-<id>.html        — galerie, achat, caractéristiques, associés
   Principe de mise en page : du blanc, du crème, des filets d'un pixel.
   Jamais de cadre, jamais d'ombre portée.
   ───────────────────────────────────────────────────────────── */


/* ═══════════════════════════════════════════════════════════
   1. PAGE DE COLLECTION
   ═══════════════════════════════════════════════════════════ */

/* ── 1.1 Ouverture ───────────────────────────────────────────
   Le visuel d'une catégorie est un packshot sur fond blanc : il se pose
   sur le crème en `multiply`, il ne se recadre pas. Ajouter la classe
   `.photo` quand le visuel est une vraie photo d'ambiance. */
.coll-ouverture{background:var(--creme);position:relative;overflow:hidden}
.coll-ouverture .wrap{padding-block:clamp(30px,3.8vw,58px)}
/* L'en-tête flotte par-dessus l'ouverture : on lui rend sa hauteur, et à
   TOUTES les largeurs. Le grand écran était réputé assez haut pour que rien
   ne se perde — mais le bloc n'est centré que tant qu'il tient dans ses
   460 px de minimum : dès que le chapeau est long, il repart du haut et le
   sur-titre « Nos collections » passe derrière la barre. */
.coll-ouverture .wrap{padding-top:calc(var(--header) + clamp(18px,2vw,30px))}
/* Deux colonnes seulement si le gabarit fournit le bloc de texte. */
.coll-ouverture .wrap:has(.coll-ouverture-texte){display:grid;align-items:center;
  gap:clamp(26px,4vw,72px)}
@media(min-width:861px){
  .coll-ouverture .wrap:has(.coll-ouverture-visuel){
    grid-template-columns:minmax(0,1.1fr) minmax(0,.7fr)}
}
.coll-ouverture-texte{min-width:0}
.coll-ouverture .sur{display:block;color:var(--laque-lisible)}
.coll-ouverture h1{font-family:var(--display);font-size:clamp(2.5rem,6.4vw,4.8rem);
  text-transform:uppercase;line-height:.94;letter-spacing:.005em;margin-top:16px;
  text-wrap:balance}
.coll-ouverture .coll-chemin{font-size:.74rem;font-weight:300;color:var(--encre-doux);
  margin-top:14px}
.coll-ouverture p:not(.sur):not(.coll-meta):not(.coll-chemin){max-width:46ch;margin-top:20px;
  color:var(--encre-doux);font-weight:300;font-size:1.02rem}
/* Compteur et prix d'entrée : deux valeurs sèches, séparées d'un filet. */
.coll-meta{display:flex;align-items:center;gap:clamp(16px,2.2vw,30px);flex-wrap:wrap;
  margin-top:clamp(24px,3vw,38px);padding-top:22px;border-top:1px solid var(--trait);
  font-size:var(--micro);letter-spacing:var(--piste);text-transform:uppercase;font-weight:600}
.coll-meta span,.coll-meta b{display:inline-flex;align-items:center;gap:12px;font-weight:600}
.coll-meta span+span::before,.coll-meta b+span::before{content:'';width:4px;height:4px;
  background:var(--laque);flex:0 0 auto}
.coll-meta em{font-style:normal;color:var(--encre-doux);font-weight:500}
.coll-ouverture-visuel{min-width:0;display:grid;place-items:center}
.coll-ouverture-visuel img,.coll-ouverture>.wrap>img{width:100%;max-height:min(36vh,320px);
  object-fit:contain;mix-blend-mode:multiply}
/* Variante photo d'ambiance : le visuel passe en fond, le texte se pose dessus,
   protégé par un voile sombre — sans lui, le lettrage blanc disparaît. */
.coll-ouverture.photo{background:var(--noir)}
.coll-ouverture.photo>img,.coll-ouverture.photo>picture,
.coll-ouverture.photo>picture>img,.coll-ouverture.photo .coll-ouverture-visuel img{position:absolute;
  inset:0;width:100%;height:100%;max-height:none;object-fit:cover;object-position:66% 50%;
  mix-blend-mode:normal;opacity:.55}
.coll-ouverture.photo::before{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(11,11,13,.94) 0%,rgba(11,11,13,.82) 34%,
    rgba(11,11,13,.44) 66%,rgba(11,11,13,.12) 100%)}
.coll-ouverture.photo .wrap{position:relative;z-index:2;color:#fff;display:flex;
  flex-direction:column;align-items:flex-start;justify-content:center;
  min-height:min(56vh,460px)}
.coll-ouverture.photo .coll-ouverture-texte{max-width:52ch}
.coll-ouverture.photo .coll-chemin,.coll-ouverture.photo p:not(.sur){color:rgba(255,255,255,.78)}
.coll-ouverture.photo .coll-meta{border-color:rgba(255,255,255,.24)}
.coll-ouverture.photo .coll-meta em{color:rgba(255,255,255,.7)}
@media(max-width:860px){
  .coll-ouverture-visuel{order:-1;padding:0 0 6px}
  .coll-ouverture-visuel img{max-height:34vh}
}

/* ── 1.2 Barre de tri et de filtres ──────────────────────────
   Collante sous l'en-tête. Discrète : un fond dépoli, un filet, rien d'autre. */
/* ⚠️ NE JAMAIS repasser `.coll-barre` en `position:relative` ici. La
   feuille la pose en `sticky` avec `top:calc(var(--header) - 1px)` : c'est
   ainsi qu'elle se cale sous l'en-tête quand on descend, ET qu'elle
   réserve sa place dans le flux. En `relative`, le `top:77px` hérité ne
   colle plus rien — il DÉCALE la barre de 77 px vers le bas sans réserver
   l'espace, et elle se peint par-dessus la première rangée de cartes.
   C'est arrivé : trois lignes traînées depuis un premier essai où le ruban
   de la livrée était posé sur la barre. Il est sur la photo depuis, et
   `sticky` établit de toute façon un bloc conteneur pour les enfants
   absolus — il n'y avait rien à surcharger. */
.coll-barre{position:sticky;top:calc(var(--header) - 1px);z-index:40;
  background:rgba(255,255,255,.9);backdrop-filter:blur(16px) saturate(1.5);
  border-block:1px solid var(--trait)}
:where(.coll-barre-in,.coll-barre>.wrap,.coll-barre>div){max-width:var(--max);
  margin-inline:auto;padding:13px var(--gouttiere);display:flex;align-items:center;
  gap:clamp(12px,1.6vw,22px)}
#coll-compteur{font-size:var(--micro);letter-spacing:var(--piste);text-transform:uppercase;
  font-weight:600;white-space:nowrap;flex:0 0 auto}
.coll-puces{display:flex;align-items:center;gap:7px;flex:1 1 auto;min-width:0;
  flex-wrap:wrap}
.puce{border:1px solid var(--trait);background:transparent;padding:8px 15px;font-size:.67rem;
  letter-spacing:.13em;text-transform:uppercase;font-weight:500;white-space:nowrap;
  color:var(--encre-doux);
  transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease)}
.puce:hover{color:var(--encre);border-color:var(--encre)}
.puce.on,.puce[aria-pressed="true"]{background:var(--encre);border-color:var(--encre);color:#fff}
#coll-raz{font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;font-weight:500;
  color:var(--encre-tres-doux);white-space:nowrap;padding:8px 2px;
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;
  transition:color .25s var(--ease)}
#coll-raz:hover{color:var(--laque)}
.coll-tri{display:flex;align-items:center;gap:10px;flex:0 0 auto;margin-left:auto}
.coll-tri label{font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--encre-tres-doux);white-space:nowrap}
#coll-tri{appearance:none;-webkit-appearance:none;border:1px solid var(--trait);background:#fff;
  font-family:var(--texte);font-size:.72rem;letter-spacing:.04em;color:var(--encre);
  padding:9px 34px 9px 13px;cursor:pointer;border-radius:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23111114' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
  transition:border-color .25s var(--ease)}
#coll-tri:hover{border-color:var(--encre)}
/* Le palier est calé sur celui de la grille (1080 px) et non sur 820 :
   entre les deux, les quatorze filtres d'une collection se repliaient sur
   quatre à cinq lignes, et la barre collante prenait 229 px de haut sur les
   1024 d'un iPad portrait — un quart de l'écran avant la première montre.
   Le pointeur compte autant que la largeur : un iPad Pro fait 1180 px et
   ses puces font quarante-quatre pixels de haut, soit 174 px de barre si
   elles se replient. Au doigt, c'est toujours une piste qui défile. */
@media(max-width:1080px),(pointer:coarse){
  :where(.coll-barre-in,.coll-barre>.wrap,.coll-barre>div){flex-wrap:wrap;
    padding-block:11px;row-gap:10px}
  .coll-tri{margin-left:auto}
  /* Les filtres passent sur une ligne qui défile, bord à bord. */
  .coll-puces{order:3;flex:1 0 100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    margin-inline:calc(var(--gouttiere) * -1);padding-inline:var(--gouttiere);
    padding-bottom:2px}
  .coll-puces::-webkit-scrollbar{display:none}
  .puce,#coll-raz{flex:0 0 auto}
}
@media(max-width:520px){
  .coll-tri label{display:none}
  #coll-tri{padding:8px 30px 8px 11px;background-position:right 10px center}
}

/* ── 1.3 Grille ──────────────────────────────────────────────
   Le filet d'un pixel est la seule séparation : gouttière de grille
   remplie par la couleur de trait, cellules blanches par-dessus. */
#coll-grille{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--trait);border-bottom:1px solid var(--trait)}
@media(max-width:1400px){#coll-grille{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1080px){#coll-grille{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){#coll-grille{grid-template-columns:minmax(0,1fr)}}
#coll-grille>.prod{background:var(--papier);padding-bottom:clamp(28px,2.6vw,40px)}
#coll-grille .prod[hidden]{display:none}
/* Le packshot est sur fond blanc : il se pose sur le crème en multiply,
   avec beaucoup de marge autour. La montre respire, la carte ne cadre pas. */
/* La montre occupait 57 % de la hauteur de sa case : elle flottait. En
   ramenant la marge de 15 % à 8 %, la boîte utile passe de 70 % à 84 %
   de la case — le sujet gagne les 20 % demandés, sans jamais toucher les
   bords. */
#coll-grille .prod-img{background:var(--creme);aspect-ratio:1;padding:8%;
  transition:background .5s var(--ease)}
#coll-grille .prod:hover .prod-img{background:var(--sable)}
/* La marque a disparu des cartes qui n'annonçaient que « B.R.M » — on est
   chez B.R.M, la ligne ne disait rien. C'est donc le premier élément qui
   suit le visuel, quel qu'il soit, qui porte l'écart. */
#coll-grille .prod-marque,
#coll-grille .prod-img + .prod-nom{margin-top:clamp(22px,2.4vw,32px)}
#coll-grille .prod-nom{font-size:1.12rem;margin-top:10px;padding-inline:18px}
#coll-grille .prod-spec{margin-top:10px}
#coll-grille .prod-prix{margin-top:auto;padding-top:14px;font-size:.95rem}
#coll-grille .prod-gravable{margin-top:12px}
/* Tous les visuels du catalogue ne sont pas des packshots detoures : une photo
   de vetement porte son propre fond. Classe `.photo` sur `.prod-img` : l'image
   remplit la cellule au lieu de se poser en multiply. */
#coll-grille .prod-img.photo,.fiche-associes .prod-img.photo{padding:0}
#coll-grille .prod-img.photo img,.fiche-associes .prod-img.photo img{position:absolute;
  inset:0;width:100%;height:100%;max-height:none;object-fit:cover;mix-blend-mode:normal}
/* Liseré rouge qui monte du bas de la cellule au survol.
   Réservé aux pointeurs qui survolent VRAIMENT : au doigt, `:hover` se
   colle à la carte touchée et n'en repart jamais — le liseré restait
   affiché sous une fiche au hasard, comme une décoration qui n'en est
   pas une. Sur mobile, la carte n'a pas besoin de cet effet. */
@media (hover:hover) and (pointer:fine){
  #coll-grille>.prod::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
    background:var(--laque);transform:scaleX(0);transform-origin:center;
    transition:transform .5s var(--ease)}
  #coll-grille>.prod:hover::after{transform:scaleX(1)}
}

/* Message affiché quand les filtres ne laissent rien passer. */
.coll-vide{grid-column:1/-1;background:var(--papier);text-align:center;
  padding:clamp(52px,8vw,110px) var(--gouttiere)}
.coll-vide p{color:var(--encre-doux);font-weight:300;max-width:40ch;margin-inline:auto}
.coll-vide .sur{color:var(--encre-tres-doux);margin-bottom:12px}
/* Bouton « voir plus » d'une grille chargée par tranches. */
.coll-plus{text-align:center;padding-block:clamp(34px,4vw,56px)}

/* ── 1.4 Encart éditorial, au milieu de la grille ───────────
   Pleine largeur, sombre : il coupe la grille et fait respirer la page. */
.coll-encart{grid-column:1/-1;position:relative;overflow:hidden;
  background:var(--charbon);color:#fff;display:grid;align-items:center;
  min-height:clamp(300px,32vw,440px)}
.coll-encart>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:62% 50%;opacity:.68}
.coll-encart::before{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(11,11,13,.92) 0%,rgba(11,11,13,.68) 42%,
    rgba(11,11,13,.2) 76%,rgba(11,11,13,0) 100%)}
.coll-encart-txt{position:relative;z-index:2;padding:clamp(30px,4.6vw,72px);max-width:560px}
.coll-encart .sur{display:block;color:var(--laque-lisible)}
.coll-encart h2,.coll-encart h3{font-family:var(--display);font-size:clamp(1.75rem,3.6vw,2.9rem);
  text-transform:uppercase;line-height:1.02;margin:14px 0 0;max-width:18ch;text-wrap:balance}
.coll-encart p:not(.sur){margin-top:16px;max-width:40ch;color:rgba(255,255,255,.76);
  font-weight:300}
.coll-encart .btn{margin-top:clamp(22px,2.6vw,34px)}
/* ── Encart sans visuel ──────────────────────────────────────
   Le crème le rendait indistinct : posé entre des cartes blanches dont les
   packshots sont déjà sur crème, le bloc ne se lisait plus comme une mise en
   avant mais comme un paragraphe de plus. Il prend donc la laque — le seul
   accent du site — en aplat plein. Rien d'autre ne change : ni la hauteur
   d'une image absente, ni le voile dégradé, qui n'ont plus lieu d'être.
   Contrastes mesurés sur #C8102E : blanc 5,9:1, texte à 90 % 5,0:1,
   filet du bouton 3,7:1, bouton au survol (laque sur blanc) 5,9:1. */
.coll-encart:not(:has(img)){background:var(--laque);color:#fff;
  /* Sans visuel à loger, la hauteur vient du texte et de sa garniture :
     une bande rouge de quatre cent quarante pixels serait vide aux trois
     quarts. */
  min-height:0}
.coll-encart:not(:has(img))::before{display:none}
.coll-encart:not(:has(img)) .coll-encart-txt{padding-block:clamp(34px,4.2vw,60px)}
.coll-encart:not(:has(img)) .sur{color:#fff}
.coll-encart:not(:has(img)) p:not(.sur){color:rgba(255,255,255,.9)}
/* Le gabarit écrit `btn btn-ligne` : de l'encre sur de la laque, 2,6:1.
   On repasse le bouton en blanc, comme sur les encarts à photo. */
.coll-encart:not(:has(img)) .btn{color:#fff;border-color:rgba(255,255,255,.75);
  background-image:linear-gradient(to top,#fff 50%,transparent 50%)}
@media(hover:hover){
  .coll-encart:not(:has(img)) .btn:hover{color:var(--laque);border-color:#fff}
}
.coll-encart:not(:has(img)) .btn:active{color:var(--laque);border-color:#fff}
@media(max-width:760px){
  .coll-encart{display:block;min-height:0}
  /* `height:auto` est indispensable : l'encart est une cellule de grille,
     un pourcentage de hauteur s'y resoudrait sur la rangee. */
  .coll-encart>img{position:relative;inset:auto;height:auto;aspect-ratio:4/3;opacity:1}
  .coll-encart::before{display:none}
  .coll-encart-txt{max-width:none;padding:28px var(--gouttiere) 34px}
}

/* ── 1.5 Texte de fin de collection ─────────────────────────── */
.coll-texte{text-align:center;padding-block:var(--section)}
.coll-texte h2{font-family:var(--display);font-size:clamp(1.55rem,3.2vw,2.4rem);
  text-transform:uppercase;line-height:1.04;text-wrap:balance}
.coll-texte p{max-width:58ch;margin:20px auto 0;color:var(--encre-doux);font-weight:300}
.coll-texte .sur{color:var(--encre-tres-doux);margin-bottom:14px}


/* ═══════════════════════════════════════════════════════════
   2. FICHE PRODUIT
   ═══════════════════════════════════════════════════════════ */

/* ── 2.1 Les deux colonnes ───────────────────────────────────
   La montre occupe la plus large : c'est le sujet de la page. */
.fiche{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:start;
  max-width:var(--max);margin-inline:auto;border-bottom:1px solid var(--trait)}
@media(max-width:1024px){.fiche{grid-template-columns:minmax(0,1fr)}}

/* ── 2.2 Galerie ─────────────────────────────────────────────
   Collante : la montre reste à l'écran pendant qu'on lit la colonne d'achat. */
/* Le visuel ne vit plus dans un carré crème posé sous une bande blanche : sa
   colonne monte jusqu'au haut de la page, sous le header flottant, et porte un
   dégradé qui PART du blanc. Le header, qui est lui-même un dégradé de blanc
   vers le transparent, n'a alors plus de bord à montrer — il se fond dans le
   visuel, et on ne voit plus où l'un finit ni où l'autre commence.

   Le rembourrage rend au contenu la hauteur que le header ne réserve plus
   (`site.js`, PLEIN_CADRE). La colonne restant collante, son accroche passe à
   `top:0` : avec son propre rembourrage, elle se cale d'elle-même sous le
   header au lieu de s'en écarter deux fois. */
.fiche-galerie{position:sticky;top:0;align-self:start;min-width:0;
  padding-top:var(--header);background:transparent}
/* Le dégradé est porté par un calque qui DÉBORDE À GAUCHE jusqu'au bord de la
   fenêtre : la fiche est centrée dans 1 760 px, et un fond qui s'arrêterait à
   sa marge laisserait deux bandes blanches de part et d'autre du visuel. Le
   calque est ancré à DROITE, sur le bord de la colonne : c'est lui qui ne
   bouge pas, donc ni l'image ni les flèches ne se déplacent — seule la couleur
   va jusqu'au bord. Le débordement vers la gauche n'ouvre aucun ascenseur :
   en écriture gauche-à-droite, la zone défilable ne s'étend qu'à droite.
   `z-index:-1` le place derrière le visuel et ses vignettes ; le placement
   collant de la colonne suffit à contenir ce calque dans son propre plan. */
/* ⚠️ Largeur FIXE, surtout pas `100vw`. `100vw` inclut la barre de défilement :
   une boîte large de 100vw peut élargir la page, ce qui change la barre, ce qui
   change 100vw — Safari boucle là-dessus et la page s'allonge sans fin. Trois
   mille pixels couvrent tous les écrans, ancrés à droite sur le bord de la
   colonne, et ne dépendent de rien. */
.fiche-galerie::before{content:'';position:absolute;z-index:-1;top:0;bottom:0;right:0;
  width:3000px;pointer-events:none;
  background:linear-gradient(to bottom,
    var(--papier) 0%, var(--creme) 34%, var(--sable) 100%)}
/* L'image est posée en absolu dans la vue : une hauteur en pourcentage ne se
   résout pas sur une boîte dont la hauteur vient d'un rapport de forme. */
#fiche-vue{position:relative;width:100%;aspect-ratio:1;background:transparent;overflow:hidden;
  /* collante : la vue et ses vignettes tiennent dans la hauteur visible */
  max-height:calc(100vh - var(--header) - 170px)}
#fiche-vue img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  padding:clamp(20px,5.5%,64px);mix-blend-mode:multiply;
  /* Voir `site.css` : la correction de cadrage de cette photo. */
  transform:scale(var(--cadrage,1));
  transition:transform .9s var(--ease)}
#fiche-vue:hover img{transform:scale(calc(var(--cadrage,1) * 1.05))}
/* Si le gabarit pose l'identifiant sur l'image elle-même. */
img#fiche-vue{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;
  padding:clamp(20px,5.5%,64px);mix-blend-mode:multiply;background:transparent;
  max-height:calc(100vh - var(--header) - 170px)}
/* Une photo d'ambiance se recadre au lieu de se poser : classe `.photo`. */
#fiche-vue.photo img{padding:0;object-fit:cover;mix-blend-mode:normal}

/* ── La piste du visuel ──────────────────────────────────────
   Les mêmes vues, mais qu'on fait glisser au doigt. Le défilement est
   natif et accroché : c'est le navigateur qui arbitre entre faire défiler
   la page et faire tourner la montre, et il arbitre mieux que nous.

   L'image d'origine reste dans le DOM — `initGalerie()` écrit dedans sans
   savoir que la piste existe — mais elle disparaît de l'écran dès que la
   piste est là. */
#fiche-vue.avec-piste>img{display:none}
#fiche-vue .fv-piste{position:absolute;inset:0;display:flex;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;
  scrollbar-width:none;-ms-overflow-style:none}
#fiche-vue .fv-piste::-webkit-scrollbar{display:none}
#fiche-vue .fv-piste>img{position:relative;inset:auto;flex:0 0 100%;width:100%;height:100%;
  scroll-snap-align:center;scroll-snap-stop:always;object-fit:contain;
  padding:clamp(20px,5.5%,64px);mix-blend-mode:multiply;transition:none}
/* Une vue d'ambiance occupe tout le cadre : elle n'a ni fond à fondre ni
   marge à respecter. */
#fiche-vue .fv-piste>img.photo{padding:0;object-fit:cover;mix-blend-mode:normal}
/* Au survol, la vue s'approche — y compris quand elle est portée par la
   piste. Cette ligne posait `transform:none`, ce qui n'annulait pas
   seulement le zoom : ça effaçait aussi la correction de cadrage
   (`--cadrage`, souvent 1,12), et l'image RECULAIT sous le curseur au
   lieu de venir. On garde donc le cadrage et on ajoute les 5 %, comme
   sur une fiche sans piste.

   Au doigt il n'y a pas de survol : le zoom se collerait à la vue
   effleurée pendant qu'on glisse et n'en partirait plus. D'où
   `hover:hover`, qui porte aussi la transition — la piste la refuse
   par ailleurs pour que le glissement reste sec. */
@media(hover:hover){
  #fiche-vue .fv-piste>img{transition:transform .9s var(--ease)}
  #fiche-vue.avec-piste:hover .fv-piste>img{
    transform:scale(calc(var(--cadrage,1) * 1.05))}
}

@media(prefers-reduced-motion:reduce){.fv-piste{scroll-behavior:auto}}

/* ── Les flèches du visuel ───────────────────────────────────
   Visibles en permanence, pas au survol : une commande qui n'apparaît
   qu'une fois le curseur dessus ne sert qu'à ceux qui savaient déjà
   qu'elle existait — et c'est précisément ce qui manquait ici. Elles
   s'appuient sur le fond crème du cadre, sans le masquer.
   Sur un écran tactile, le doigt fait déjà tourner la piste : les
   flèches disparaissent plutôt que de manger le visuel. */
#fiche-vue .fv-fleche{position:absolute;top:50%;z-index:2;
  width:46px;height:46px;display:grid;place-items:center;
  transform:translateY(-50%);
  background:rgba(255,255,255,.88);border:1px solid var(--trait);
  color:var(--encre);font-size:1.45rem;line-height:1;font-family:var(--display);
  cursor:pointer;padding:0;
  transition:background .2s var(--ease),border-color .2s var(--ease)}
#fiche-vue .fv-fleche:hover{background:#fff;border-color:var(--encre)}
#fiche-vue .fv-prec{left:clamp(10px,1.6%,18px)}
#fiche-vue .fv-suiv{right:clamp(10px,1.6%,18px)}
/* Le cadre grandit son image au survol ; les flèches, elles, ne bougent pas. */
#fiche-vue:hover .fv-fleche{transform:translateY(-50%)}
@media(hover:none){#fiche-vue .fv-fleche{display:none}}

/* Fond transparent : la bande de vignettes est la fin du dégradé, pas un bloc
   blanc rapporté dessous. Chaque vignette garde son carré crème. */
#fiche-vignettes{display:flex;flex-wrap:wrap;gap:8px;background:transparent;
  padding:12px clamp(12px,2%,20px);border-top:1px solid var(--trait)}
#fiche-vignettes:empty,#fiche-vignettes:not(:has(*)){display:none}
#fiche-vignettes>*{position:relative;flex:0 0 calc((100% - 40px) / 6);max-width:112px;
  aspect-ratio:1;background:var(--creme);cursor:pointer;overflow:hidden;
  transition:background .3s var(--ease)}
#fiche-vignettes>*:hover{background:var(--sable)}
#fiche-vignettes img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  padding:9px;mix-blend-mode:multiply;transform:scale(var(--cadrage,1))}
#fiche-vignettes>.photo img{padding:0;object-fit:cover;mix-blend-mode:normal}
/* Vignette active : un cadre d'encre, pas une couleur de fond. */
#fiche-vignettes>.on::after,#fiche-vignettes>[aria-current="true"]::after,
#fiche-vignettes>[aria-selected="true"]::after{content:'';position:absolute;inset:0;
  border:1px solid var(--encre)}

/* ── 2.3 Colonne d'achat ─────────────────────────────────────── */
/* La colonne d'achat rend elle aussi la hauteur du header, sinon « DDF12 »
   passerait dessous. Et son filet de séparation ne part plus du pixel zéro :
   une hairline qui traverse un header translucide se voit, et c'est exactement
   la couture qu'on cherche à faire disparaître. Il commence sous le header et
   s'y fond sur quelques dizaines de pixels. */
.fiche-achat{padding:clamp(30px,3.4vw,62px);padding-top:calc(var(--header) + clamp(30px,3.4vw,62px));
  border-left:0;position:relative;min-width:0}
.fiche-achat::before{content:'';position:absolute;left:0;top:var(--header);bottom:0;width:1px;
  background:linear-gradient(to bottom,transparent 0,var(--trait) 72px,var(--trait) 100%);
  pointer-events:none}
.fiche-marque{font-size:.66rem;letter-spacing:var(--piste);text-transform:uppercase;
  color:var(--encre-doux)}
.fiche-achat h1{font-family:var(--display);font-size:clamp(1.8rem,3.2vw,2.7rem);
  text-transform:uppercase;line-height:1.03;letter-spacing:.01em;margin-top:12px;
  text-wrap:balance}
.fiche-ref{font-size:.74rem;color:var(--encre-doux);font-weight:300;margin-top:11px}
.fiche-prix{font-size:clamp(1.3rem,2.2vw,1.65rem);font-weight:500;margin-top:clamp(20px,2.4vw,30px);
  letter-spacing:.01em}
.fiche-prix small,.fiche-tva{display:block;font-size:.72rem;color:var(--encre-doux);
  font-weight:300;letter-spacing:0;margin-top:6px}
/* Quatre à six caractéristiques choisies, chacune ouverte d'un carré rouge. */
.fiche-points{display:grid;gap:11px;margin-top:clamp(22px,2.6vw,30px);padding-top:24px;
  border-top:1px solid var(--trait)}
.fiche-points li{font-size:.9rem;font-weight:300;color:var(--encre-doux);display:flex;
  gap:12px;align-items:baseline}
.fiche-points li::before{content:'';width:5px;height:5px;background:var(--laque);flex:0 0 auto;
  transform:translateY(-2px)}
.fiche-points b,.fiche-points strong{color:var(--encre);font-weight:500}
/* Un bloc vide ne doit pas laisser trainer son filet : 19 produits n'ont
   aucune caracteristique renseignee. */
.fiche-points:not(:has(li)),.fiche-rassure:not(:has(*)),
#fiche-specs:not(:has(.spec-bloc)){display:none}
.fiche-actions{display:grid;gap:10px;margin-top:clamp(26px,3vw,36px)}
.fiche-actions .btn{justify-content:center;padding-block:17px}
.fiche-rassure{display:grid;gap:12px;margin-top:clamp(24px,3vw,34px);padding-top:24px;
  border-top:1px solid var(--trait)}
.fiche-rassure>*{font-size:.82rem;font-weight:300;color:var(--encre-doux);display:flex;
  gap:12px;align-items:baseline}
/* Sous 1024 px la colonne d'achat prend toute la page : « Livraison assurée
   et suivie… » courait alors sur cent dix caractères. La borne est en `ch`,
   elle suit la taille de chaque bloc et ne demande pas de palier. */
.fiche-points li,.fiche-rassure>*,.fiche-compat,
.fiche-declinaisons-note,.fiche-paiement-mens{max-width:64ch}
.fiche-rassure>*::before{content:'';width:12px;height:1px;background:var(--encre-tres-doux);
  flex:0 0 auto;transform:translateY(-4px)}
@media(max-width:1024px){
  /* `relative` et non `static` : il faut annuler le collage SANS relâcher le
     calque de fond. En `static`, le `::before` allait chercher un ancêtre
     positionné bien plus haut, s'étalait sur toute sa hauteur et s'arrêtait
     net — en pleine teinte sable — au milieu du bloc d'achat : une cassure
     grise sur blanc en travers de l'écran. Borné à la colonne, il redevient
     le fond du visuel, et lui seul. */
  .fiche-galerie{position:relative}
  /* Empilé, le dégradé ne sépare plus deux colonnes mais deux bandes l'une
     au-dessus de l'autre : il finit donc sur le blanc du bloc d'achat, qui
     le prolonge sans rupture. Le filet horizontal n'a plus lieu d'être — le
     fondu fait la séparation, et mieux qu'un trait. */
  .fiche-galerie::before{background:linear-gradient(to bottom,
    var(--sable) 0%, var(--creme) 44%, var(--papier) 100%)}
  /* Empilée, la colonne d'achat vient APRÈS le visuel : elle n'a plus de header
     au-dessus d'elle, et son filet vertical n'a plus de sens — c'est le filet
     horizontal qui sépare. */
  .fiche-achat{padding-inline:var(--gouttiere);
    padding-top:clamp(30px,3.4vw,62px)}
  .fiche-achat::before{display:none}
  /* En une colonne, la vue prenait toute la hauteur visible : 768 px de
     packshot sur les 1024 d'un iPad portrait, et rien d'autre à l'écran.
     L'image est posée en `contain`, la borne ne la rogne pas — elle laisse
     simplement voir le nom et le prix sans avoir à défiler. */
  #fiche-vue,img#fiche-vue{max-height:min(56vh,520px)}
}

/* ── 2.4 Caractéristiques en accordéons ──────────────────────
   Deux colonnes de couples libellé / valeur, une seule sous 640 px.
   Le repli est fait par la grille (0fr → 1fr) : il s'anime tout seul. */
#fiche-specs{max-width:960px;margin-inline:auto}
.spec-bloc+.spec-bloc{margin-top:-1px}
.spec-bloc>button{width:100%;display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding:21px 2px;font-family:var(--display);font-size:1.12rem;text-transform:uppercase;
  letter-spacing:.03em;text-align:left;border-block:1px solid var(--trait);
  transition:color .25s var(--ease)}
.spec-bloc>button:hover{color:var(--laque)}
.spec-bloc>button .plus{font-family:var(--texte);font-size:1.05rem;font-weight:300;flex:0 0 auto;
  transition:transform .35s var(--ease)}
.spec-bloc.ouvert>button .plus,
.spec-bloc:has(>button[aria-expanded="true"]) .plus{transform:rotate(45deg)}
.spec-corps{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .42s var(--ease)}
.spec-corps>*{overflow:hidden;min-height:0}
.spec-bloc.ouvert>.spec-corps,
.spec-bloc:has(>button[aria-expanded="true"])>.spec-corps{grid-template-rows:1fr}
.spec-corps[hidden]{display:none}
html:not(.js) .spec-corps{grid-template-rows:1fr}      /* sans script, tout reste lisible */
 /* la garniture se replie avec la grille : sinon elle maintient la ligne ouverte */
.spec-corps dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px clamp(30px,4vw,64px);padding:0 2px;
  transition:padding .42s var(--ease)}
.spec-bloc.ouvert>.spec-corps dl,
.spec-bloc:has(>button[aria-expanded="true"])>.spec-corps dl{padding:24px 2px 30px}
html:not(.js) .spec-corps dl{padding:24px 2px 30px}
.spec-corps dl>div{min-width:0}
.spec-corps dt{font-size:0.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--encre-tres-doux);font-weight:600}
.spec-corps dd{font-size:.92rem;font-weight:300;margin-top:5px;overflow-wrap:anywhere}
@media(max-width:640px){.spec-corps dl{grid-template-columns:minmax(0,1fr);gap:16px}}

/* ── 2.5 Produits associés ───────────────────────────────────
   Une piste qui défile, mêmes filets que la grille de collection. */
.fiche-associes{position:relative}
/* Accrochage SOUPLE et non obligatoire : cette piste-là perd des cartes en
   cours de route (les déclinaisons du modèle passent dans leur propre
   section). Avec `mandatory`, Safari cherche indéfiniment un point d'accroche
   qui n'existe plus et allonge la page à l'infini. `proximity` donne le même
   confort sans exiger que le navigateur retombe toujours sur ses pieds. */
:where(.fiche-piste,.fiche-associes>.piste,.fiche-associes:has(>.prod)){display:flex;
  gap:1px;background:var(--trait);border-block:1px solid var(--trait);
  overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;scrollbar-width:none;
  -webkit-overflow-scrolling:touch}
:where(.fiche-piste,.fiche-associes>.piste,.fiche-associes:has(>.prod))::-webkit-scrollbar{
  display:none}
.fiche-associes .prod{flex:0 0 calc((100% - 3px) / 4);scroll-snap-align:start;
  background:var(--papier);padding-bottom:28px}
.fiche-associes .prod-img{background:var(--creme);padding:16%;
  transition:background .5s var(--ease)}
.fiche-associes .prod:hover .prod-img{background:var(--sable)}
.fiche-associes .prod-marque{margin-top:22px}
.fiche-associes .prod-nom{font-size:1rem;padding-inline:14px}
.fiche-associes .prod-prix{margin-top:auto;padding-top:12px}
@media(max-width:1080px){.fiche-associes .prod{flex-basis:calc((100% - 2px) / 3)}}
@media(max-width:820px){.fiche-associes .prod{flex-basis:calc((100% - 1px) / 2)}}
/* Deux pièces entières et le bord de la troisième, comme les autres pistes
   de la fiche : à 80 % on n'en voyait qu'une par écran, énorme, et rien ne
   disait qu'il y en avait d'autres. */
@media(max-width:520px){.fiche-associes .prod{flex-basis:46%}}
/* Flèches : carrés blancs posés à hauteur de packshot. */
:where(.fiche-fleche,.fiche-associes .fleche){position:absolute;top:30%;z-index:5;width:46px;
  height:46px;background:var(--papier);border:1px solid var(--trait);display:grid;
  place-items:center;font-size:1.15rem;line-height:1;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
:where(.fiche-fleche,.fiche-associes .fleche):hover{background:var(--encre);color:#fff;
  border-color:var(--encre)}
:where(.fiche-fleche,.fiche-associes .fleche)[disabled]{opacity:.3;pointer-events:none}
.fiche-fleche.g,.fiche-associes .fleche.g{left:-1px}
.fiche-fleche.d,.fiche-associes .fleche.d{right:-1px}
@media(max-width:820px){:where(.fiche-fleche,.fiche-associes .fleche){display:none}}

/* ── 2.6 Barre d'achat collante ──────────────────────────────
   Elle monte au défilement. `fiches.js` pose `.on` quand le prix de la
   colonne d'achat est sorti de l'écran, et la retire quand le pied de
   page entre : elle ne doit jamais recouvrir un contenu utile. */
.fiche-barre{position:fixed;left:0;right:0;bottom:0;z-index:55;
  background:rgba(255,255,255,.94);backdrop-filter:blur(16px) saturate(1.5);
  border-top:1px solid var(--trait);transform:translateY(112%);
  transition:transform .38s var(--ease);padding-bottom:env(safe-area-inset-bottom)}
.fiche-barre.on{transform:none}
:where(.fiche-barre-in,.fiche-barre>div){max-width:var(--max);margin-inline:auto;
  padding:10px var(--gouttiere);display:flex;align-items:center;gap:16px}
/* Le conseiller pose sa bulle en bas à droite — soixante-deux pixels, à
   vingt-quatre du bord — par-dessus tout : elle vit dans son propre shadow
   DOM, aucune feuille du site ne peut la déplacer. Elle recouvrait le côté
   droit de « Ajouter au panier ». La barre lui laisse donc son coin.
   `site.js` la pose à droite ; si elle repassait à gauche, c'est la
   garniture de gauche qu'il faudrait ouvrir. */
:where(.fiche-barre-in,.fiche-barre>div){
  padding-right:calc(var(--gouttiere) + 68px)}
/* Sur téléphone, ces soixante-huit pixels se prennent sur le bouton : la
   flèche de `.btn` part, le libellé suffit. */
@media(max-width:680px){
  .fiche-barre .btn::after{content:none}
}
.fiche-barre img{width:48px;height:48px;object-fit:contain;mix-blend-mode:multiply;
  background:var(--creme);padding:4px;flex:0 0 auto}
/* Le bloc nom + référence garde sinon la largeur de son texte et pousse le
   bouton hors de l'écran : mesuré à 430 px, « Ajouter au panier » sortait de
   vingt-neuf pixels. `min-width:0` rend la coupe au nom, qui a déjà ses
   points de suspension. */
:where(.fiche-barre-in,.fiche-barre>div)>div{min-width:0}
.fiche-barre .nom{font-family:var(--display);font-size:.95rem;text-transform:uppercase;
  line-height:1.1;display:block;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:38ch}
.fiche-barre .ref{font-size:.7rem;color:var(--encre-tres-doux);font-weight:300;display:block}
.fiche-barre .prix{font-size:.95rem;font-weight:500;margin-left:auto;white-space:nowrap}
.fiche-barre .btn{flex:0 0 auto;padding-block:13px}
@media(max-width:1024px){
  /* Sur mobile la barre est posée en permanence : on réserve sa hauteur
     pour que le pied de page reste atteignable. */
  .fiche-barre{transform:none}
  body:has(.fiche-barre){padding-bottom:calc(70px + env(safe-area-inset-bottom))}
}
/* Le tiroir « ajouté au panier » de `site.css` quitte le coin haut droit pour
   se coller au bas de l'écran sous 560 px — exactement là où la barre d'achat
   est posée en permanence. Les deux se superposaient, le tiroir masquant le
   bouton de la barre. On le remonte d'une hauteur de barre. Le palier est
   celui de `site.css` : au-dessus, le tiroir est calé par le haut et poser un
   `bottom` l'étirerait sur toute la page. */
@media(max-width:560px){
  body:has(.fiche-barre) .pmini{bottom:calc(70px + env(safe-area-inset-bottom))}
}
@media(max-width:680px){
  .fiche-barre img,.fiche-barre .ref{display:none}
  .fiche-barre .prix{margin-left:0}
  .fiche-barre .nom{max-width:18ch;font-size:.85rem}
  .fiche-barre .btn{margin-left:auto;padding-inline:20px;font-size:.66rem}
  :where(.fiche-barre-in,.fiche-barre>div){gap:12px;padding-block:9px}
}
/* Sous 460 px, nom + prix + bouton ne tiennent plus sur une ligne : le nom
   s'efface (il est écrit trois fois plus haut dans la page) et le bouton
   prend la place qui reste. Le palier était à 420 px, d'où le bouton coupé
   sur un téléphone de 430. */
@media(max-width:460px){
  .fiche-barre .nom{display:none}
  .fiche-barre .btn{flex:1 1 auto;justify-content:center;padding-inline:14px}
}
/* Sous 400 px, « AJOUTER AU PANIER » ne rentre toujours pas : le bouton ne
   peut pas se couper, il débordait de onze pixels sur la bulle. On rend de
   l'interlettrage et de la garniture — mesuré, c'est vingt et un pixels. */
@media(max-width:400px){
  .fiche-barre .btn{letter-spacing:.12em;padding-inline:10px}
  /* Quatre pixels manquaient encore sur une montre à quatre chiffres, dont
     le prix est plus large : ils sortent des écarts de la rangée. */
  :where(.fiche-barre-in,.fiche-barre>div){gap:8px}
}


/* ── 2.7 Bandeau éditorial d'une fiche ───────────────────────
   Même traitement que l'encart de collection, hauteur plus basse. */
.fiche-edito{position:relative;overflow:hidden;background:var(--charbon);color:#fff;
  display:grid;align-items:center;min-height:clamp(300px,34vw,460px)}
.fiche-edito>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:64% 50%;opacity:.6}
.fiche-edito::before{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(11,11,13,.94) 0%,rgba(11,11,13,.74) 42%,
    rgba(11,11,13,.24) 76%,rgba(11,11,13,.04) 100%)}
.fiche-edito .wrap{position:relative;z-index:2;padding-block:clamp(34px,4vw,58px)}
.fiche-edito .sur{display:block;color:var(--laque-lisible)}
.fiche-edito h2{font-family:var(--display);font-size:clamp(1.6rem,3.2vw,2.5rem);
  text-transform:uppercase;line-height:1.03;margin-top:14px;max-width:18ch}
.fiche-edito p:not(.sur){margin-top:16px;max-width:40ch;color:rgba(255,255,255,.76);
  font-weight:300}
@media(max-width:760px){
  .fiche-edito{display:block;min-height:0}
  .fiche-edito>img{position:relative;inset:auto;height:auto;aspect-ratio:4/3;opacity:1}
  .fiche-edito::before{display:none}
}


/* ═══════════════════════════════════════════════════════════
   LA PAGINATION
   Une collection peut compter deux cent trente montres : les
   poser toutes d'un coup, c'est une page de vingt mille pixels
   et autant d'images à charger. On pagine dès qu'il y en a trop.
   ═══════════════════════════════════════════════════════════ */

.coll-pages{
  display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;
  padding-block:clamp(28px,3.4vw,48px)}
.coll-pages:empty{display:none}
.coll-pages button{
  min-width:38px;height:38px;padding:0 10px;border:1px solid var(--trait);background:#fff;
  font-size:.76rem;font-weight:500;color:var(--encre-doux);transition:.22s var(--ease)}
.coll-pages button:hover:not(:disabled){border-color:var(--encre);color:var(--encre)}
.coll-pages button.on{background:var(--encre);border-color:var(--encre);color:#fff}
.coll-pages button:disabled{opacity:.3;cursor:not-allowed}
.coll-pages .coll-pages-ecart{color:var(--encre-tres-doux);padding:0 2px}

/* ═══════════════════════════════════════════════════════════
   LE PAIEMENT EN PLUSIEURS FOIS, SUR LA FICHE
   ═══════════════════════════════════════════════════════════ */

.fiche-pledg{
  margin-top:12px;padding:0;border:0;background:none;
  font-size:.86rem;line-height:1.55;color:var(--encre-doux)}
.fiche-pledg b{font-weight:600}
.fiche-pledg .fiche-pledg-mens{color:var(--laque);font-weight:600}
.fiche-pledg small{display:block;margin-top:5px;font-size:.7rem;color:var(--encre-tres-doux);
  line-height:1.5}


/* ── Autres déclinaisons, fiches déjà consultées ───────────── */
.fiche-variantes{padding-block:clamp(40px,5vw,72px);border-top:1px solid var(--trait)}
.fiche-variantes .titre-centre{margin-bottom:clamp(24px,3vw,38px)}
.fiche-variantes-grille{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--trait);border-block:1px solid var(--trait);
  max-width:var(--max);margin-inline:auto}
.fiche-variantes-grille .prod{background:#fff;padding-bottom:26px}
.fiche-variantes-grille .prod-img{background:#fff}
@media(max-width:1080px){.fiche-variantes-grille{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Pas de colonne unique sur téléphone : ces deux sections comptent jusqu'à
   huit cartes, soit trois mille pixels de défilement pour une rubrique
   secondaire. Deux colonnes, comme la grille du catalogue au même palier. */

/* ── Déclinaisons de la fiche ──────────────────────────────── */
.fiche-declinaisons{display:flex;flex-wrap:wrap;gap:14px 18px;margin:22px 0 6px}
.fiche-champ{display:flex;flex-direction:column;gap:6px;min-width:190px;flex:1 1 190px}
.fiche-champ>span{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--encre-doux);font-weight:500}
.fiche-champ select{appearance:none;-webkit-appearance:none;width:100%;
  padding:12px 34px 12px 14px;border:1px solid var(--trait);background:#fff;
  font:inherit;font-size:.92rem;color:var(--encre);border-radius:0;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--encre) 50%),
    linear-gradient(135deg,var(--encre) 50%,transparent 50%);
  background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.fiche-champ select:focus{outline:none;border-color:var(--encre)}
.fiche-declinaisons-note{flex:1 0 100%;margin:0;font-size:.82rem;color:var(--encre-doux)}
.fiche-declinaisons-note.absent{color:var(--laque)}

/* ── Payer en plusieurs fois : un bloc, huit durées ────────── */
.fiche-paiement{margin:14px 0 0;padding:14px 16px;border:1px solid var(--trait);
  background:var(--creme)}
.fiche-paiement-titre{margin:0;font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--encre-doux);font-weight:500}
.fiche-paiement-titre b{color:var(--encre);font-weight:600}
.fiche-paiement-durees{display:flex;flex-wrap:wrap;gap:6px;margin:11px 0 10px}
.fp-duree{border:1px solid var(--trait);background:#fff;color:var(--encre);
  font:inherit;font-size:.78rem;letter-spacing:.04em;padding:6px 11px;cursor:pointer;
  transition:border-color .18s,background .18s,color .18s}
.fp-duree:hover{border-color:var(--encre)}
.fp-duree.on{background:var(--encre);border-color:var(--encre);color:#fff}
.fiche-paiement-mens{margin:0;font-size:.88rem;color:var(--encre-doux)}
.fiche-paiement-mens b{color:var(--laque);font-weight:600;font-size:.98rem}
.fiche-paiement-legal{display:block;margin-top:8px;font-size:.68rem;line-height:1.5;
  color:var(--encre-tres-doux);max-width:52ch}


/* ═══════════════════════════════════════════════════════════
   LE TÉLÉPHONE
   Tout ce qui suit ne vaut que sur petit écran. Le bloc est
   posé en fin de feuille pour passer devant les règles de
   bureau sans avoir à les toucher.
   Cinq exigences, tenues ici et vérifiées au navigateur :
     · gouttière latérale d'au moins 20 px ;
     · aucune grille laissée à plusieurs colonnes trop étroites ;
     · aucune barre flottante empilée sur l'en-tête ;
     · aucun texte sous 13 px ;
     · aucune zone tactile sous 44 px de côté.
   ═══════════════════════════════════════════════════════════ */

/* ── T.1 La gouttière ────────────────────────────────────────
   `site.css` borne la gouttière à 18 px : c'est deux pixels de
   moins que le minimum tenable au pouce. On relève le jeton pour
   les seules pages qui chargent cette feuille — le calcul de
   bureau reprend la main au-dessus de 900 px. */
@media(max-width:900px){
  :root{--gouttiere:22px}
}

/* ── T.2 L'en-tête flotte : l'ouverture doit lui laisser la place ──
   `site.js` range `.coll-ouverture` parmi les ouvertures plein cadre
   et laisse l'en-tête passer par-dessus. Sur un grand écran le visuel
   est haut, rien ne se perd. Sur un téléphone le bloc se resserre et
   le sur-titre finit caché derrière la barre. On rend la hauteur. */
@media(max-width:860px){
  .coll-ouverture .wrap{padding-top:calc(var(--header) + 16px)}
  .coll-ouverture.photo .wrap{min-height:0}
  /* Le voile d'origine part de la gauche : sur une colonne étroite le
     texte déborde sur la partie claire de la photo. On le reprend de
     haut en bas — mais en dégradé réel, pas en aplat : plein à quarante
     pour cent sous le premier mot, presque rien au-dessus. La photo se
     voit, le texte se pose dessus. À .88 d'aplat sur une image à .40,
     il ne restait qu'une plaque noire : personne ne voyait la photo. */
  .coll-ouverture.photo::before{
    background:linear-gradient(180deg,rgba(11,11,13,.18) 0%,rgba(11,11,13,.30) 22%,
      rgba(11,11,13,.78) 46%,rgba(11,11,13,.93) 68%,rgba(11,11,13,.95) 100%)}
  /* Le cadrage à 66 % vise la droite d'une image large ; sur une colonne
     étroite il tombe à côté du sujet. On recentre et on remonte. */
  .coll-ouverture.photo>img,.coll-ouverture.photo>picture>img,
  .coll-ouverture.photo .coll-ouverture-visuel img{
    opacity:.82;object-position:50% 34%}
  /* Le texte descend sous le dégradé au lieu d'occuper toute la hauteur,
     et la description de catégorie — souvent six lignes reprises de la
     boutique — est ramenée à quatre. Elle reste dans la page : coupée à
     l'affichage, lisible par les moteurs, reprise en entier plus bas. */
  /* Le rembourrage haut est du décor : c'est la part de photo laissée libre
     au-dessus du premier mot. À 26vw il en faisait cent quatre-vingt-cinq —
     l'ouverture atteignait cinq cent cinquante pixels, la barre de tri cent
     vingt, et il ne restait plus rien de l'écran pour une montre. Ramené à
     13vw, la photo se voit encore largement (elle court derrière tout le
     bloc, pas seulement au-dessus du texte) et la première rangée de
     produits rentre dans le premier écran. */
  .coll-ouverture.photo .wrap{justify-content:flex-end;
    padding-top:calc(var(--header) + 13vw)}
  .coll-ouverture.photo p:not(.sur):not(.coll-meta):not(.coll-chemin):not(.coll-accroche){
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
}

/* ── T.3 La barre de tri ─────────────────────────────────────
   Collante, elle venait se poser sous l'en-tête fixe : deux barres
   l'une sur l'autre, cent quatre-vingts pixels d'écran mangés sur
   huit cent quarante. Sur téléphone elle reprend sa place dans le
   flux — les filtres restent en tête de liste, l'écran revient aux
   montres. */
@media(max-width:640px){
  .coll-barre{position:static}
  :where(.coll-barre-in,.coll-barre>.wrap,.coll-barre>div){padding-block:10px;row-gap:9px}
  #coll-compteur{font-size:13px;letter-spacing:.1em}
  .coll-tri label{font-size:13px}
  /* Zones tactiles : quarante-quatre pixels de haut, pas un de moins —
     c'est la taille d'un doigt, et le seuil retenu pour tout le site. */
  .puce{font-size:13px;letter-spacing:.08em;min-height:44px;padding:0 15px;
    display:inline-flex;align-items:center}
  #coll-raz{font-size:13px;letter-spacing:.08em;min-height:44px;padding:0 2px;
    display:inline-flex;align-items:center}
  #coll-tri{font-size:13px;min-height:44px;padding:0 32px 0 12px}
  .coll-puces{gap:8px}
}

/* ── T.3 bis Le téléphone en paysage ─────────────────────────
   Huit cent quarante-quatre pixels de large, trois cent quatre-vingt-dix
   de haut. L'en-tête fixe et la barre collante prenaient cent soixante-deux
   pixels, deux cinquièmes de l'écran, avant la première montre. La mesure
   est une hauteur, pas une largeur : c'est donc une requête sur la hauteur.
   La barre reprend sa place dans le flux, comme elle le fait déjà sous
   640 px de large ; la barre d'achat d'une fiche se resserre. */
@media(max-height:520px){
  .coll-barre{position:static}
  :where(.fiche-barre-in,.fiche-barre>div){padding-block:6px}
  .fiche-barre .btn{padding-block:10px}
}

/* ── T.4 La grille du catalogue ──────────────────────────────
   Une colonne, c'est une vignette de trois cent quatre-vingt-dix
   pixels de côté par produit : trente-deux montres faisaient dix-sept
   mille pixels de page. Deux colonnes rendent la collection
   parcourable au pouce. La typographie se resserre en conséquence,
   sans jamais descendre sous treize pixels. */
@media(max-width:600px){
  #coll-grille{grid-template-columns:repeat(2,minmax(0,1fr))}
  #coll-grille>.prod,.fiche-variantes-grille>.prod{padding-bottom:22px}
  #coll-grille .prod-img{padding:4%}
  #coll-grille .prod-marque,.fiche-variantes-grille .prod-marque{margin-top:16px}
  #coll-grille .prod-nom,.fiche-variantes-grille .prod-nom{font-size:1rem;margin-top:8px;
    padding-inline:9px;line-height:1.14}
  /* En demi-largeur, un libelle long venait toucher le filet de la cellule.
     Les deux grilles de la fiche sont demi-largeur elles aussi. */
  #coll-grille .prod-spec,.fiche-variantes-grille .prod-spec{margin-top:7px;padding-inline:9px}
  #coll-grille .prod-prix,.fiche-variantes-grille .prod-prix{padding-top:11px;font-size:.95rem;
    padding-inline:9px}
  #coll-grille .prod-gravable,.fiche-variantes-grille .prod-gravable{padding-inline:9px}
  /* L'étiquette se resserre pour tenir dans une demi-largeur. */
  .etiq{top:9px;left:9px;gap:4px;max-width:calc(100% - 18px)}
}

/* ── T.5 Les micro-libellés ──────────────────────────────────
   Capitales espacées, ils descendaient jusqu'à neuf pixels. On les
   remonte à treize et on rend l'interlettrage, sinon ils ne tiennent
   plus dans une carte de demi-largeur. Rien ici ne sort des pages de
   collection et des fiches. */
@media(max-width:640px){
  #coll-grille .prod-marque,.fiche-associes .prod-marque,
  .fiche-variantes-grille .prod-marque{font-size:13px;letter-spacing:.12em}
  #coll-grille .prod-spec,.fiche-associes .prod-spec,
  .fiche-variantes-grille .prod-spec{font-size:13px}
  #coll-grille .prod-gravable,.fiche-associes .prod-gravable,
  .fiche-variantes-grille .prod-gravable{font-size:13px;letter-spacing:.1em}
  .etiq b{font-size:13px;letter-spacing:.06em;padding:5px 8px}
  .coll-ouverture .sur,.coll-encart .sur,.coll-texte .sur,.coll-vide .sur,
  .fiche-edito .sur,.fiche-variantes .sur{font-size:13px;letter-spacing:.14em}
  .coll-ouverture .coll-chemin{font-size:13px}
  .coll-meta{font-size:13px;letter-spacing:.1em}
  .fiche-marque{font-size:13px;letter-spacing:.14em}
  .fiche-ref{font-size:13px}
  .fiche-prix small,.fiche-tva{font-size:13px}
  .fiche-champ>span{font-size:13px;letter-spacing:.1em}
  .fiche-declinaisons-note{font-size:13px}
  .spec-corps dt{font-size:13px;letter-spacing:.1em}
  .fiche-paiement-titre{font-size:13px;letter-spacing:.1em}
  .fiche-paiement-legal,.fiche-pledg small,.fiche-sofinco small{font-size:13px}
  .coll-pages button{font-size:13px}
  /* Les boutons de ces pages : `site.css` les pose à 11,4 px. */
  .fiche-actions .btn,.coll-encart .btn,.coll-vide .btn,.fiche-edito .btn,
  .coll-plus .btn,.fiche-barre .btn{font-size:13px}
  /* Le fil d'Ariane : treize pixels, et des liens qu'on peut viser. */
  .ariane{font-size:13px;line-height:44px;padding-block:12px}
  /* « Brake » ne fait que trente-sept pixels de large : on vise à côté.
     Une largeur plancher suffit, le texte reste centré dans sa cible. */
  .ariane a{display:inline-block;line-height:44px;min-width:44px;text-align:center}
}

/* ── T.6 Zones tactiles des fiches ───────────────────────────── */
@media(max-width:640px){
  .fp-duree{font-size:13px;min-height:44px;padding:0 12px;
    display:inline-flex;align-items:center;justify-content:center}
  .coll-pages button{min-width:44px;height:44px}
  .fiche-champ select{min-height:44px}
  /* Le cœur des cartes vient de `compte.css`, chargé APRÈS cette feuille :
     la classe doublée suffit à reprendre la main sans toucher à ce fichier.
     Il y faisait 38 px de côté, sous le seuil du pouce. */
  #coll-grille .prod-img.prod-img>.cpt-coeur,
  .fiche-associes .prod-img.prod-img>.cpt-coeur,
  .fiche-variantes-grille .prod-img.prod-img>.cpt-coeur{width:44px;height:44px}
}

/* ── T.6 bis La tablette se vise au doigt elle aussi ─────────
   Les règles ci-dessus sont bornées à 640 px de large. Un iPad de 1024 px
   n'est pas un écran de bureau : ses cibles doivent faire les mêmes
   quarante-quatre pixels. Le critère n'est donc pas une largeur mais la
   nature du pointeur — une souris garde le dessin serré d'origine. */
@media(pointer:coarse){
  .puce,#coll-raz{min-height:44px;display:inline-flex;align-items:center}
  #coll-tri{min-height:44px}
  .coll-pages button{min-width:44px;height:44px}
  .fp-duree{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .fiche-champ select{min-height:44px}
  .ariane a{display:inline-block;line-height:44px;min-width:44px;text-align:center}
  #coll-grille .prod-img.prod-img>.cpt-coeur,
  .fiche-associes .prod-img.prod-img>.cpt-coeur,
  .fiche-variantes-grille .prod-img.prod-img>.cpt-coeur{width:44px;height:44px}
  .spec-bloc>button{min-height:44px}
  /* Même raison que sous 1024 px : sur un iPad Pro de 1180, la vue prenait
     652 des 820 pixels de haut. La borne suit la hauteur visible ; sous
     640 px, la règle du téléphone (T.7) reprend la main juste après. */
  #fiche-vue,img#fiche-vue{max-height:min(56vh,520px)}
}

/* ── T.7 La galerie de la fiche ──────────────────────────────
   La montre est ce qu'on vient voir : elle prend le carré plein, sans
   bride de hauteur. Les vignettes ne sont plus qu'un index — cinq sur
   une seule ligne, jamais de seconde rangée qui repousse le prix hors
   de l'écran. Au-delà de cinq (une fiche qui en porterait plus), la
   ligne défile au doigt plutôt que de se replier. */
@media(max-width:640px){
  #fiche-vignettes{gap:6px;padding:10px var(--gouttiere) 14px;
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  #fiche-vignettes::-webkit-scrollbar{display:none}
  #fiche-vignettes>*{flex:0 0 calc((100% - 24px) / 5);max-width:none;min-width:0}
  #fiche-vignettes img{padding:5px}
  /* La vue principale garde son carré : c'est la montre, pas une bande. */
  #fiche-vue,img#fiche-vue{max-height:none}
}

/* ── T.8 Les pastilles du carrousel des associés ──────────────
   `fiches.js` ne les habille en dur que si la feuille ne les a pas
   déjà mises en ligne : en les posant ici, on garde la main sur leur
   taille. Le filet reste un filet, la cible fait quarante-quatre pixels. */
.fiche-associes .points{display:flex;gap:9px;justify-content:center;margin-top:30px}
.fiche-associes .points button{width:30px;height:2px;border:0;padding:0;cursor:pointer;
  background:var(--trait);transition:background .25s var(--ease)}
.fiche-associes .points button.on{background:var(--encre);transform:scaleY(2)}
@media(max-width:640px){
  .fiche-associes .points{gap:0;margin-top:22px}
  .fiche-associes .points button{width:44px;height:44px;background:none;position:relative}
  .fiche-associes .points button.on{background:none;transform:none}
  .fiche-associes .points button::before{content:'';position:absolute;left:7px;right:7px;
    top:21px;height:2px;background:var(--trait)}
  .fiche-associes .points button.on::before{top:20px;height:4px;background:var(--encre)}
}

/* ── T.9 Les mots ne se coupent pas en deux ───────────────────
   `overflow-wrap:anywhere` coupait « entre-cornes » n'importe où.
   `break-word` ne tranche que les mots réellement trop longs. */
.spec-corps dd{overflow-wrap:break-word;word-break:normal}

/* ── T.10 Les blocs propres à quelques pages ─────────────────
   Le guide des tailles des bracelets, le renvoi entre écarts et la
   liste de compatibilité d'un bracelet sont déclarés dans le `<style>`
   de leur page, donc APRÈS cette feuille. Une classe doublée suffit à
   reprendre la main sans toucher aux pages elles-mêmes. */
@media(max-width:640px){
  .coll-guide.coll-guide a{font-size:13px;padding-block:13px;min-height:44px;
    align-items:center}
  .coll-guide.coll-guide b{font-size:13px;letter-spacing:.06em;flex-basis:4.6em}
  .coll-ouverture .coll-guide-titre{font-size:13px;letter-spacing:.12em}
  .coll-ecarts.coll-ecarts a{font-size:13px;letter-spacing:.08em;min-height:44px;
    padding:0 15px;display:inline-flex;align-items:center}
  .coll-ecarts.coll-ecarts>span{font-size:13px;letter-spacing:.12em}
  .fiche-compat.fiche-compat{font-size:13px}
  .fiche-compat.fiche-compat b{font-size:13px;letter-spacing:.12em}
  .titre-centre .sur,.fiche-associes .sur{font-size:13px;letter-spacing:.14em}
}

/* ── T.11 Le texte de fin de collection ──────────────────────
   Il n'a pas de `.wrap` : sans gouttière, son titre touchait le bord. */
.coll-texte{padding-inline:var(--gouttiere)}


/* ═══════════════════════════════════════════════════════════
   LE TEXTE DE LA FICHE
   L'accroche et la description rédigées dans PrestaShop, greffées
   par `fiches.js` sous les caractéristiques. Une colonne de lecture
   étroite posée au milieu du blanc : pas de cadre, pas de fond, un
   filet d'un pixel en haut comme partout ailleurs.
   ═══════════════════════════════════════════════════════════ */

.fiche-texte{padding-block:clamp(52px,6.5vw,104px);border-top:1px solid var(--trait)}
/* 760 px donnaient quatre-vingt-seize caractères par ligne à 16 px : l'œil
   perd le début de la ligne suivante. Le `ch` suit la taille du texte, il
   n'a donc pas besoin d'un palier — et il vaut à toutes les largeurs, le
   grand écran souffrait du même défaut. */
.fiche-texte-in{max-width:min(100%,59ch);margin-inline:auto;min-width:0}

/* ── L'accroche ──────────────────────────────────────────────
   Une phrase, souvent seule : 230 fiches n'ont que celle-là. Elle
   se tient donc comme un titre, centrée, en caractères d'affichage —
   et jamais en capitales forcées, ce sont des phrases entières. */
.fiche-texte-chapeau{font-family:var(--display);font-weight:500;
  font-size:clamp(1.3rem,2.5vw,2.05rem);line-height:1.16;letter-spacing:.005em;
  text-align:center;text-wrap:balance;margin:0}
/* Quand le texte suit, un filet sépare l'accroche du récit. */
.fiche-texte-chapeau+.fiche-texte-corps{margin-top:clamp(30px,3.6vw,50px);
  padding-top:clamp(30px,3.6vw,50px);border-top:1px solid var(--trait)}

/* ── Le récit ────────────────────────────────────────────────
   Le gris de lecture de la fiche, la même graisse légère que les
   colonnes d'à côté. Une largeur de ligne qui se lit. */
.fiche-texte-corps{font-size:1.02rem;font-weight:300;line-height:1.78;
  color:var(--encre-doux);overflow-wrap:break-word}
.fiche-texte-corps>*:first-child{margin-top:0}
.fiche-texte-corps>*:last-child{margin-bottom:0}
.fiche-texte-corps p{margin-block:0 1.15em}
.fiche-texte-corps strong,.fiche-texte-corps b{color:var(--encre);font-weight:500}
.fiche-texte-corps em,.fiche-texte-corps i{font-style:italic}

/* Les intertitres du rédacteur : même famille que les accordéons de
   caractéristiques, pour que la page n'ait qu'une seule voix. */
.fiche-texte-corps :is(h2,h3,h4){font-family:var(--display);color:var(--encre);
  text-transform:uppercase;letter-spacing:.03em;line-height:1.2;
  margin:2.1em 0 .75em;text-wrap:balance}
.fiche-texte-corps h2{font-size:clamp(1.02rem,1.7vw,1.28rem)}
.fiche-texte-corps h3{font-size:clamp(.95rem,1.5vw,1.12rem)}
.fiche-texte-corps h4{font-size:.92rem}
/* Un carré de laque ouvre l'intertitre, comme les points de la fiche. */
.fiche-texte-corps :is(h2,h3,h4)::before{content:'';display:inline-block;
  width:5px;height:5px;background:var(--laque);margin-right:12px;
  transform:translateY(-3px)}

.fiche-texte-corps :is(ul,ol){margin-block:0 1.15em;padding-left:0;list-style:none}
.fiche-texte-corps ol{counter-reset:fiche-texte-n}
.fiche-texte-corps li{display:flex;gap:12px;align-items:baseline;margin-block:8px}
.fiche-texte-corps ul>li::before{content:'';width:5px;height:5px;flex:0 0 auto;
  background:var(--encre-tres-doux);transform:translateY(-2px)}
.fiche-texte-corps ol>li{counter-increment:fiche-texte-n}
.fiche-texte-corps ol>li::before{content:counter(fiche-texte-n) '.';flex:0 0 auto;
  color:var(--laque);font-weight:500;font-size:.82rem}

/* ── Les images du texte ─────────────────────────────────────
   Aucune description n'en porte aujourd'hui ; le jour où la boutique
   en ajoutera, elles tiendront la largeur de la colonne, sur le crème
   des packshots, sans jamais déformer ni déborder. */
.fiche-texte-corps :is(img,figure){display:block;max-width:100%;margin-inline:auto}
.fiche-texte-corps img{height:auto;background:var(--creme)}
.fiche-texte-corps figure{margin-block:clamp(26px,3.2vw,44px)}
.fiche-texte-corps p>img,.fiche-texte-corps>img{margin-block:clamp(26px,3.2vw,44px)}
.fiche-texte-corps figcaption{margin-top:12px;font-size:.78rem;text-align:center;
  color:var(--encre-tres-doux)}

/* ── Les tableaux ────────────────────────────────────────────
   Enveloppés par le script : eux seuls défilent, jamais la page. */
.fiche-texte-tableau{overflow-x:auto;margin-block:clamp(22px,2.6vw,36px);
  -webkit-overflow-scrolling:touch}
.fiche-texte-corps table{border-collapse:collapse;width:100%;min-width:min(420px,100%);
  font-size:.9rem}
.fiche-texte-corps :is(td,th){padding:11px 14px;border-bottom:1px solid var(--trait);
  text-align:left;vertical-align:top}
.fiche-texte-corps th{font-size:0.66rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--encre)}

.fiche-texte-corps a{color:var(--encre);text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:var(--trait);
  transition:text-decoration-color .25s var(--ease)}
.fiche-texte-corps a:hover{text-decoration-color:var(--laque)}

@media(max-width:640px){
  .fiche-texte-corps{font-size:15px;line-height:1.72}
  .fiche-texte-corps :is(h2,h3,h4)::before{margin-right:10px}
}

/* ═══════════════════════════════════════════════════════════
   L'ENCART À PACKSHOT SE DÉTACHE
   Il occupait un fond crème, c'est-à-dire à peu près la couleur de la
   page : le bloc ne se lisait plus comme une mise en avant mais comme
   un paragraphe de plus.

   On ne peut pas simplement peindre le bloc en rouge : les packshots
   sont détourés sur BLANC. Posés sur la couleur en fusion
   multiplicative, ils se teintent — un disque de titane ressort rose ;
   sans la fusion, leur fond blanc dessine un rectangle qui flotte.

   Donc on coupe le bloc en deux : le texte prend la laque, le produit
   garde son fond clair. Le bloc tranche, et la pièce reste elle-même.

   Ces règles écrasent le bloc <style> que chaque page de collection
   porte en ligne, et qui gagnerait à spécificité égale puisqu'il vient
   après la feuille. D'où le doublement de classe.
   ═══════════════════════════════════════════════════════════ */
.coll-encart.pack.pack{background:var(--creme);color:var(--encre)}
.coll-encart.pack.pack .coll-encart-txt{
  background:var(--laque);color:#fff;
  /* La colonne de texte va d'un bord à l'autre du bloc, en hauteur : un
     aplat qui s'arrête au ras des mots ferait une étiquette, pas un
     encart. */
  align-self:stretch;display:flex;flex-direction:column;justify-content:center;
  /* Sans cette ligne, le bouton s'étire sur toute la colonne : en flex,
     un enfant s'aligne sur la largeur du conteneur. */
  align-items:flex-start;
  max-width:none}
.coll-encart.pack.pack .coll-encart-txt .sur{color:rgba(255,255,255,.82)}
.coll-encart.pack.pack .coll-encart-txt h2,
.coll-encart.pack.pack .coll-encart-txt h3{color:#fff}
.coll-encart.pack.pack .coll-encart-txt p:not(.sur){color:rgba(255,255,255,.92)}
.coll-encart.pack.pack .coll-encart-txt .btn,
.coll-encart.pack.pack .coll-encart-txt .btn-ligne{border-color:#fff;color:#fff}
@media(hover:hover){
  .coll-encart.pack.pack .coll-encart-txt .btn:hover,
  .coll-encart.pack.pack .coll-encart-txt .btn-ligne:hover{background:#fff;color:var(--laque)}
}
.coll-encart.pack.pack .coll-encart-txt .btn:active,
.coll-encart.pack.pack .coll-encart-txt .btn-ligne:active{background:#fff;color:var(--laque)}

/* ═══════════════════════════════════════════════════════════
   LES DEUX BLOCS DE MAISON
   Ils ferment la fiche, comme sur la boutique : on ne renvoie pas le
   visiteur ailleurs avant de lui avoir montré la montre.
   ═══════════════════════════════════════════════════════════ */

/* Ils portaient deux photographies de 28 et 64 Ko étirées sur une demi-page :
   à cette taille, la compression se voyait. Plus d'image du tout — une carte
   dessinée, au format d'une carte produit, nette à toutes les tailles. Le filet
   rouge qui la coiffe est la seule couleur : c'est une invitation, pas une
   vignette produit ratée. */
.fiche-illustr{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.6vw,22px);margin-top:clamp(40px,5vw,72px);
  max-width:var(--max);margin-inline:auto;padding-inline:var(--gouttiere)}
.fiche-illustr-bloc{
  position:relative;display:block;aspect-ratio:1;overflow:hidden;
  background:var(--charbon)}
/* L'image n'était pas mauvaise : elle était ÉTIRÉE. Rendue à la taille d'une
   carte, la même source redevient nette. Elle revient donc, mais derrière le
   cartouche et sous un voile, pour que le texte tienne sans lutter. */
.fiche-illustr-bloc > img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--ease)}
.fiche-illustr-bloc::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(11,11,13,.94) 0%,rgba(11,11,13,.62) 46%,
    rgba(11,11,13,.26) 100%)}
.fiche-illustr-bloc:hover > img{transform:scale(1.05)}
.fiche-illustr-bloc::before{
  content:'';position:absolute;inset-inline:0;top:0;height:3px;background:var(--laque);
  z-index:2;transform:scaleX(.18);transform-origin:left;transition:transform .45s var(--ease)}
.fiche-illustr-bloc:hover::before{transform:scaleX(1)}
.fiche-illustr-ligne{
  font-size:.9rem;font-weight:300;color:rgba(255,255,255,.66);margin-top:12px;max-width:30ch}
.fiche-illustr-txt{
  position:relative;z-index:1;display:flex;flex-direction:column;
  justify-content:flex-end;height:100%;
  padding:clamp(22px,2.8vw,40px);color:#fff}
.fiche-illustr-txt .sur{
  font-size:0.66rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.8)}
.fiche-illustr-txt b{
  font-family:var(--display);font-size:clamp(1.2rem,2.2vw,1.7rem);font-weight:500;
  text-transform:uppercase;line-height:1.1;margin-top:10px;max-width:18ch}
.fiche-illustr-lien{
  margin-top:16px;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:8px}
.fiche-illustr-lien i{font-style:normal;transition:transform .3s var(--ease)}
.fiche-illustr-bloc:hover .fiche-illustr-lien i{transform:translateX(4px)}
@media(max-width:760px){
  .fiche-illustr{grid-template-columns:minmax(0,1fr)}
  .fiche-illustr-bloc{aspect-ratio:16/10}
}

/* ═══════════════════════════════════════════════════════════
   LES ILLUSTRATIONS DE COLLECTION
   L'infographie est dessinée au trait BLANC sur fond transparent :
   son aplat sombre n'est pas une décision de goût, c'est ce qui la
   rend visible. Sur du blanc, elle disparaît entièrement.
   ═══════════════════════════════════════════════════════════ */
.coll-infos{
  background:var(--charbon,#0b0b0d);display:grid;place-items:center;
  padding:clamp(26px,3.4vw,52px) var(--gouttiere,20px)}
.coll-infos img{max-width:min(100%,620px);height:auto;display:block}

/* L'encart promotionnel prenait une rangée entière et portait une image de
   900 px étirée sur toute la largeur de la grille : la compression se voyait.
   Il occupe maintenant LA PLACE D'UN PRODUIT et ne porte plus d'image du tout.
   Il ne risque plus de passer pour une vignette ratée : il ne ressemble plus à
   une photo — fond d'encre, filet rouge, titre en capitales. */
/* La carte prend TOUTE la hauteur de sa rangée, pas seulement celle du packshot.
   En `aspect-ratio:1` elle s'arrêtait au carré de l'image, et la bande du nom et
   du prix des montres voisines restait vide à côté d'elle. */
.coll-promo{grid-column:span 1;display:block;position:relative;overflow:hidden;
  background:var(--charbon);color:#fff;align-self:stretch;min-height:100%}
@supports not (min-height:100%){.coll-promo{aspect-ratio:1}}
/* Ces bannières portent leur titre INCRUSTÉ, aligné à gauche — « EN PISTE VERS
   L'UNIVERS RACING » fait partie du pixel. Il entrerait en concurrence avec le
   cartouche qu'on pose par-dessus. On décale donc la fenêtre vers la droite :
   le sujet reste, le lettrage sort du champ. */
.coll-promo > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:78% center;transition:transform .7s var(--ease)}
.coll-promo::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(11,11,13,.94) 0%,rgba(11,11,13,.60) 46%,
    rgba(11,11,13,.24) 100%)}
.coll-promo:hover > img{transform:scale(1.05)}
.coll-promo::before{content:'';position:absolute;inset-inline:0;top:0;height:3px;
  background:var(--laque);z-index:2;transform:scaleX(.18);transform-origin:left;
  transition:transform .45s var(--ease)}
.coll-promo:hover::before{transform:scaleX(1)}
.coll-promo-in{position:relative;z-index:1;display:flex;flex-direction:column;
  justify-content:flex-end;height:100%;padding:clamp(20px,2.2vw,32px)}
.coll-promo .sur{font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.72)}
.coll-promo b{font-family:var(--display);font-size:clamp(1.3rem,2.2vw,1.9rem);font-weight:500;
  text-transform:uppercase;line-height:1.06;margin-top:10px;letter-spacing:.02em}
.coll-promo .ligne{font-size:.86rem;font-weight:300;color:rgba(255,255,255,.64);
  margin-top:10px;max-width:26ch}
.coll-promo .lien{margin-top:16px;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:8px}
.coll-promo .lien i{font-style:normal;transition:transform .3s var(--ease)}
.coll-promo:hover .lien i{transform:translateX(4px)}

/* ═══════════════════════════════════════════════════════════
   CE QUE LA BOUTIQUE DIT ET QUE LA FICHE TAISAIT
   Disponibilité, promesse de livraison, prix barré, accessoires.
   Aucune couleur nouvelle : le rouge de la laque pour ce qui change
   un prix, l'encre douce pour ce qui informe.
   ═══════════════════════════════════════════════════════════ */

/* ── Disponibilité et livraison ──────────────────────────────
   « Sur commande — Livraison entre le 11/10 et le 23/10 », posé au-dessus
   du prix comme sur la boutique. Une pastille d'un pixel ouvre la ligne :
   verte n'existe pas dans la charte, c'est la laque qui signale, et le gris
   qui dit l'absence. */
.fiche-dispo{display:block;margin-top:clamp(18px,2.2vw,26px);font-size:.82rem;
  font-weight:300;line-height:1.65;color:var(--encre-doux);max-width:52ch;
  padding-left:18px;position:relative}
.fiche-dispo::before{content:'';position:absolute;left:0;top:.55em;width:7px;height:7px;
  border-radius:50%;background:var(--laque)}
.fiche-dispo b{color:var(--encre);font-weight:600;letter-spacing:.02em}
.fiche-dispo.absent::before{background:var(--encre-tres-doux)}
.fiche-dispo.absent b{color:var(--encre-doux)}
/* Le prix suit immédiatement : il n'a plus besoin de sa marge haute. */
.fiche-dispo+.fiche-prix{margin-top:10px}

/* Un bouton éteint reste lisible — on ne cache pas qu'il a existé — mais
   il ne fait plus rien et ne prétend plus le contraire. */
.btn.eteint{background-image:none;background:var(--sable);color:var(--encre-doux);
  border-color:var(--trait);cursor:not-allowed;pointer-events:none}
.btn.eteint::after{content:none}

/* ── Prix barré ──────────────────────────────────────────────
   Le prix payé reste en tête ; le prix catalogue passe derrière, barré, et
   la remise se dit une fois, en petit. */
.fiche-prix-avant{margin-left:12px;font-size:.72em;font-weight:300;
  color:var(--encre-doux);text-decoration:line-through;
  text-decoration-thickness:1px;letter-spacing:0}
.fiche-prix-remise{display:inline-block;margin-left:10px;padding:3px 9px;
  font-size:.58em;font-weight:600;letter-spacing:var(--piste);text-transform:uppercase;
  color:#fff;background:var(--laque);vertical-align:middle}
.fiche-prix-avant[hidden],.fiche-prix-remise[hidden]{display:none}

/* ── Une vignette épuisée ────────────────────────────────────
   Elle reste en rayon — la boutique la garde aussi — mais elle le dit, et
   son visuel se retire d'un cran pour ne pas appeler le clic. */
.prod.indispo .prod-img{opacity:.48}
.prod-indispo{display:block;margin-top:8px;font-size:var(--micro);
  letter-spacing:var(--piste);text-transform:uppercase;font-weight:600;
  color:var(--encre-doux)}

/* ── Les accessoires compatibles ─────────────────────────────
   Quatre par rangée, deux sous 820 px, une sous 520. Même grammaire que la
   vignette produit : le packshot sur son crème, le nom, le prix, et la
   seule action qui a du sens pour cet accessoire. */
.fiche-accessoires{padding-block:clamp(46px,5vw,88px);border-top:1px solid var(--trait)}
.fiche-accessoires .titre-centre{margin-bottom:clamp(24px,3vw,38px)}
.fiche-accessoires h2{font-family:var(--display);font-size:clamp(1.5rem,2.8vw,2.2rem);
  text-transform:uppercase;letter-spacing:.01em;line-height:1.06}
.fiche-accessoires .titre-centre p{margin-top:12px;color:var(--encre-doux);
  font-weight:300;font-size:.94rem}
/* Les filets sont portés par les cartes, pas par un fond de grille : une
   dernière rangée incomplète — six accessoires sur quatre colonnes — laisserait
   sinon deux aplats gris là où il n'y a rien. */
.fiche-accessoires-grille{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--trait);border-left:1px solid var(--trait)}
.acc{display:flex;flex-direction:column;background:var(--papier);
  border-right:1px solid var(--trait);border-bottom:1px solid var(--trait);
  padding-bottom:clamp(20px,2.2vw,28px);text-align:center;min-width:0}
/* Même piège que les vignettes du menu : dans une grille, la piste implicite
   reste dimensionnée en `auto`, le `height:100%` de l'image ne s'y résout pas
   et elle retombe sur sa hauteur naturelle — décentrée dans sa case. Une boîte
   simple suffit : le pourcentage se résout, `object-fit:contain` centre. */
/* `min-height:0` : la carte est une colonne flex, et la taille minimale
   AUTOMATIQUE d'un de ses éléments l'emporte sur le rapport de forme. Le
   navigateur prenait la hauteur intrinsèque du packshot comme plancher :
   une case déclarée carrée mesurait 159 sur 186, la photo débordait de sa
   gouttière et se retrouvait décentrée vers le bas. Remise à zéro, la case
   est carrée pour de bon et `object-fit:contain` centre ce qu'elle reçoit. */
.acc-img{background:var(--creme);aspect-ratio:1;padding:15%;min-height:0;
  transition:background .5s var(--ease)}
a.acc:hover .acc-img{background:var(--sable)}
.acc-img img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.acc-nom{display:block;margin-top:clamp(18px,2vw,26px);padding-inline:16px;
  font-size:.98rem;line-height:1.35;text-wrap:balance}
.acc-prix{display:block;margin-top:10px;font-size:.9rem;color:var(--encre-doux)}
.acc-ajout{margin:16px auto 0;padding:12px 24px}
.acc-lien{display:block;margin-top:14px;font-size:var(--micro);
  letter-spacing:var(--piste);text-transform:uppercase;font-weight:600;
  color:var(--laque)}
.acc-lien i{font-style:normal;transition:transform .4s var(--ease);display:inline-block}
a.acc:hover .acc-lien i{transform:translateX(4px)}
@media(max-width:1080px){.fiche-accessoires-grille{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.fiche-accessoires-grille{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Sur un téléphone, une colonne unique donnait un bracelet haut de trois cents
   pixels par écran : il fallait descendre quatre fois pour voir quatre pièces,
   et on ne devinait jamais qu'il y en avait d'autres. La grille devient une
   piste qui défile au doigt, réglée pour laisser voir DEUX pièces entières et
   le bord de la troisième — c'est ce bord qui dit qu'on peut pousser. */
@media(max-width:520px){
  .fiche-accessoires-grille,.fiche-variantes-grille{
    display:flex;grid-template-columns:none;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none}
  .fiche-accessoires-grille::-webkit-scrollbar,
  .fiche-variantes-grille::-webkit-scrollbar{display:none}
  .fiche-accessoires-grille>.acc,.fiche-variantes-grille>.prod{
    flex:0 0 46%;min-width:0;scroll-snap-align:start}
  .fiche-dispo,.prod-indispo{font-size:13px}
  .acc-lien{font-size:12px}
}


/* ═══ SHOCK ABSORBERS — posé par construire-shock-absorbers.py ═══ */
/* ═══ Shock Absorbers — encart de fiche et de collection ═══ */
.sa-fiche{background:var(--noir);color:#fff;padding-block:clamp(52px,6.5vw,96px)}
.sa-fiche .sa-sur{font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--laque-lisible);margin-bottom:14px}
.sa-fiche-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(28px,4vw,64px);align-items:start}
@media(max-width:900px){.sa-fiche-in{grid-template-columns:minmax(0,1fr)}}
.sa-fiche h2{font-family:var(--display);font-size:clamp(1.9rem,4vw,3rem);text-transform:uppercase;
  line-height:1;letter-spacing:.02em;color:#fff}
.sa-fiche p{font-weight:300;color:rgba(255,255,255,.74);margin-top:16px;max-width:60ch}
.sa-fiche .sa-fiche-lead{color:rgba(255,255,255,.92);font-size:1.06rem;margin-top:22px}
.sa-fiche-chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:1px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.16);margin-top:30px}
.sa-fiche-chiffres > div{background:var(--noir);padding:18px 16px}
.sa-fiche-chiffres b{display:block;font-family:var(--display);font-size:1.7rem;line-height:1;color:#fff}
.sa-fiche-chiffres b i{font-style:normal;font-size:.6em}
.sa-fiche-chiffres span{display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.56);margin-top:8px}
.sa-fiche .sa-depot{margin-top:22px;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.52);font-weight:300}
.sa-fiche .sa-depot strong{font-weight:500;color:rgba(255,255,255,.78)}
.sa-fiche .btn{margin-top:22px}
.sa-fiche-visuel{margin:0}
.sa-fiche-visuel img{width:100%;height:auto;aspect-ratio:5/4;object-fit:cover;display:block}
.sa-fiche-visuel figcaption{font-size:.8rem;font-weight:300;color:rgba(255,255,255,.56);margin-top:12px}

.sa-encart{background:var(--creme);border-block:1px solid var(--trait)}
.sa-encart-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(24px,3.4vw,52px);align-items:center;padding-block:clamp(40px,5vw,72px)}
@media(max-width:820px){.sa-encart-in{grid-template-columns:minmax(0,1fr)}}
.sa-encart img{width:100%;height:auto;aspect-ratio:5/4;object-fit:cover;display:block}
.sa-encart .sa-sur{font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--laque);margin-bottom:12px}
.sa-encart h2{font-family:var(--display);font-size:clamp(1.7rem,3.4vw,2.6rem);text-transform:uppercase;
  line-height:1;letter-spacing:.02em}
.sa-encart p{font-weight:300;color:var(--encre-doux);margin-top:16px;max-width:56ch}
.sa-encart .btn{margin-top:24px}
/* ═══ fin SHOCK ABSORBERS ═══ */

/* « À découvrir aussi » retiré des fiches sur demande : la section reste dans
   le DOM (elle sert d'ancre aux autres blocs) mais ne s'affiche plus. */
.fiche-associes{display:none}

/* ══ HABILLAGE PAR UNIVERS — ART CAR ══════════════════════════════════════
   La structure de la page ne bouge pas d'un élément : seules les couleurs
   changent. Elles ne sont pas inventées — elles sont relevées sur le cadran
   de cette montre, ces traits de peinture jetés sur le noir, et sur le mur
   peint du shooting. L'accent rouge de la maison cède la place à toute la
   palette : les puces des caractéristiques prennent chacune la leur, les
   filets deviennent des coups de pinceau, et le cadre du visuel reçoit la
   géométrie colorée du mur, assez pâle pour que la montre reste le sujet.
   Le thème s'applique à TOUTE fiche dont le fil d'Ariane désigne la
   collection Art Car : `fiches.js` lit l'identifiant de collection dans le
   balisage structuré — un nombre, donc indépendant de la langue — et pose
   `data-univers` sur le corps de page. Les neuf Art Car d'aujourd'hui et
   celles de demain entrent donc dans leur univers sans qu'on y touche.
   ══════════════════════════════════════════════════════════════════════ */
body[data-univers="art-car"]{
  --ac-1:#E8352E; --ac-2:#F07C1E; --ac-3:#F3C218; --ac-4:#3FAE49;
  --ac-5:#22A7D8; --ac-6:#2E4FA8; --ac-7:#8E4FA8; --ac-8:#E8559B;
  /* Huit bandes égales, ça ne dit pas la peinture : ça fait drapeau. Le
     cadran, lui, est fait de traits jetés — inégaux, espacés, trois ou
     quatre couleurs qui se croisent sur du noir. La signature reprend ce
     geste : des segments de longueurs différentes, séparés de blanc. */
  --ac-traits:linear-gradient(90deg,
    var(--ac-1) 0 26%, transparent 26% 31%,
    var(--ac-5) 31% 44%, transparent 44% 47%,
    var(--encre) 47% 72%, transparent 72% 78%,
    var(--ac-3) 78% 88%, transparent 88% 92%,
    var(--ac-1) 92% 100%)}

/* Le cadre du visuel : le mur peint, en sourdine. Des bandes en biais, à
   peine posées sur la crème — à pleine saturation, la montre disparaissait
   dedans. */
/* ⚠️ Pas de `position` ici : la colonne est COLLANTE (voir `.fiche-galerie`,
   plus haut). Ces six règles la repassaient en `relative` pour se donner un
   plan d'empilement — or `isolation:isolate` le fait à lui seul, et `sticky`
   est déjà un ancêtre positionné pour le calque décoratif. Le `relative`
   décollait donc le visuel sur TOUTES les fiches à univers, c'est-à-dire sur
   presque toutes : on descendait vers « Ajouter au panier » et la montre
   avait disparu de l'écran. */
body[data-univers="art-car"] .fiche-galerie{isolation:isolate}
/* `width:auto` n'est pas un luxe : la feuille de la fiche donne déjà un
   `::before` de 3 000 px à la galerie. Sans remise à zéro, les bandes
   peintes traversaient la page entière, jusque derrière le prix. */
body[data-univers="art-car"] .fiche-galerie::before{
  content:'';position:absolute;inset:0;width:auto;height:auto;overflow:hidden;
  z-index:0;pointer-events:none;
  background:
    linear-gradient(118deg,transparent 0 12%,rgba(232,53,46,.10) 12% 19%,transparent 19% 27%),
    linear-gradient(118deg,transparent 0 30%,rgba(34,167,216,.10) 30% 36%,transparent 36% 46%),
    linear-gradient(118deg,transparent 0 49%,rgba(243,194,24,.12) 49% 55%,transparent 55% 63%),
    linear-gradient(118deg,transparent 0 66%,rgba(63,174,73,.09) 66% 71%,transparent 71% 80%),
    linear-gradient(118deg,transparent 0 83%,rgba(142,79,168,.10) 83% 89%,transparent 89% 100%)}
body[data-univers="art-car"] .fiche-galerie > *{position:relative;z-index:1}

/* Le nom du modèle est signé d'un trait de peinture. */
body[data-univers="art-car"] .fiche-achat h1{position:relative;padding-bottom:16px}
body[data-univers="art-car"] .fiche-achat h1::after{
  content:'';position:absolute;left:0;bottom:0;width:186px;height:4px;
  background:var(--ac-traits);transform:skewX(-18deg);transform-origin:left bottom}
/* La marque ne passe plus en dégradé multicolore : elle garde l'encre, et
   c'est un seul point de couleur qui la signe — comme les pastilles du
   réhaut, posées une par une sur le cadran. */
body[data-univers="art-car"] .fiche-marque{color:var(--encre);font-weight:600;
  display:flex;align-items:center;gap:9px}
body[data-univers="art-car"] .fiche-marque::before{
  content:'';width:9px;height:9px;border-radius:50%;background:var(--ac-1);
  box-shadow:14px 0 0 -2px var(--ac-5), 26px 0 0 -3px var(--ac-3)}
body[data-univers="art-car"] .fiche-marque{padding-left:0;letter-spacing:.24em}

/* Chaque caractéristique porte une couleur du cadran, dans l'ordre où elles
   s'y croisent. */
body[data-univers="art-car"] .fiche-points li::before{background:var(--ac-1)}
body[data-univers="art-car"] .fiche-points li:nth-child(2)::before{background:var(--ac-3)}
body[data-univers="art-car"] .fiche-points li:nth-child(3)::before{background:var(--ac-4)}
body[data-univers="art-car"] .fiche-points li:nth-child(4)::before{background:var(--ac-5)}
body[data-univers="art-car"] .fiche-points li:nth-child(5)::before{background:var(--ac-6)}
body[data-univers="art-car"] .fiche-points li:nth-child(6)::before{background:var(--ac-8)}

/* La pastille de disponibilité et les filets du paiement suivent. */
body[data-univers="art-car"] .fiche-dispo::before{background:var(--ac-4)}
body[data-univers="art-car"] .fiche-paiement{
  border-left:4px solid transparent;
  border-image:var(--ac-traits) 1;border-image-slice:1;border-width:0 0 0 4px}
body[data-univers="art-car"] .fiche-paiement-mens b,
body[data-univers="art-car"] .fiche-paiement-durees button[aria-pressed="true"]{color:inherit}
body[data-univers="art-car"] .fiche-paiement-durees button[aria-pressed="true"]{
  background:var(--encre);border-color:var(--encre);color:#fff}

/* Le bouton d'achat garde sa forme et prend la peinture sur sa tranche
   haute : on ne repeint pas un appel à l'action, on le signe. */
body[data-univers="art-car"] .fiche-actions .btn-plein{position:relative;overflow:hidden}
body[data-univers="art-car"] .fiche-actions .btn-plein::before{
  content:'';position:absolute;left:0;right:0;top:0;height:4px;background:var(--ac-traits)}

/* Les titres de sections dépliantes : le « + » prend une couleur. */
body[data-univers="art-car"] #fiche-specs .spec-bloc:nth-child(odd) .plus{color:var(--ac-1)}
body[data-univers="art-car"] #fiche-specs .spec-bloc:nth-child(even) .plus{color:var(--ac-5)}
/* ── Le bas de page entre dans l'univers, lui aussi ───────────────────── */

/* « L'esprit de la pièce » : le mur peint revient en fond, très en retrait,
   et les deux chapitres sont marqués d'un trait de couleur. */
body[data-univers="art-car"] .fiche-recit{position:relative;isolation:isolate}
body[data-univers="art-car"] .fiche-recit::before{
  content:'';position:absolute;inset:0;width:auto;height:auto;z-index:-1;pointer-events:none;
  background:
    linear-gradient(118deg,transparent 0 8%,rgba(46,79,168,.07) 8% 14%,transparent 14% 24%),
    linear-gradient(118deg,transparent 0 28%,rgba(232,53,46,.07) 28% 33%,transparent 33% 44%),
    linear-gradient(118deg,transparent 0 58%,rgba(243,194,24,.09) 58% 64%,transparent 64% 74%),
    linear-gradient(118deg,transparent 0 79%,rgba(63,174,73,.07) 79% 85%,transparent 85% 100%)}
body[data-univers="art-car"] .fiche-recit h2,
body[data-univers="art-car"] .fiche-recit h3{position:relative;padding-left:18px}
body[data-univers="art-car"] .fiche-recit h2::before,
body[data-univers="art-car"] .fiche-recit h3::before{
  content:'';position:absolute;left:0;top:.18em;bottom:.18em;width:5px;
  background:var(--ac-1);transform:skewX(-16deg)}
/* Les deux chapitres sont deux H2 dans deux blocs frères : c'est le BLOC
   qu'il faut compter, pas le titre — ils sont chacun premiers chez eux. */
body[data-univers="art-car"] .recit-in > *:nth-child(2) h2::before{background:var(--ac-5)}
body[data-univers="art-car"] .recit-in > *:nth-child(3) h2::before{background:var(--ac-3)}
body[data-univers="art-car"] .fiche-recit .sur{color:var(--ac-1);font-weight:600}

/* Les pièces associées : la manufacture les a dessinées pour cette montre,
   leurs prix prennent la couleur du cadran. */
body[data-univers="art-car"] .fiche-accessoires .prod-prix{color:var(--encre);font-weight:600}
body[data-univers="art-car"] .fiche-accessoires .prod:nth-child(odd) .prod-img{
  background:linear-gradient(140deg,rgba(232,53,46,.06),rgba(34,167,216,.06))}
body[data-univers="art-car"] .fiche-accessoires .prod:nth-child(even) .prod-img{
  background:linear-gradient(140deg,rgba(243,194,24,.08),rgba(63,174,73,.06))}

/* La barre de rappel, en bas : la peinture sur la tranche haute.
   ⚠️ Surtout PAS de `position:relative` ici : la feuille des fiches la pose
   en `fixed`, collée au bas de l'écran, et elle ne paraît que lorsque le
   bouton d'achat est sorti par le haut. En lui donnant `relative` pour
   ancrer ce trait, je l'avais fait retomber dans le flux — elle s'affichait
   en plein milieu de la page, entre les accessoires et « Notre savoir-faire ».
   Un élément `fixed` ancre déjà ses enfants absolus : il n'y avait rien à
   changer. */
body[data-univers="art-car"] .fiche-barre::before{
  content:'';position:absolute;left:0;right:0;top:0;height:4px;width:auto;
  background:var(--ac-traits)}

/* Les trois promesses du bas prennent chacune une couleur. */
body[data-univers="art-car"] .svc-grid > *:nth-child(1) strong,
body[data-univers="art-car"] .svc-grid > *:nth-child(1) b{color:var(--ac-1)}
body[data-univers="art-car"] .svc-grid > *:nth-child(2) strong,
body[data-univers="art-car"] .svc-grid > *:nth-child(2) b{color:var(--ac-5)}
body[data-univers="art-car"] .svc-grid > *:nth-child(3) strong,
body[data-univers="art-car"] .svc-grid > *:nth-child(3) b{color:var(--ac-4)}

/* La carte « Inspirez-vous » montre l'univers de CETTE montre. */
body[data-univers="art-car"] .fiche-illustr-bloc:last-child .sur{color:var(--ac-1)}

/* ══ HABILLAGE PAR UNIVERS — MARTINI RACING ═══════════════════════════════
   Même mécanique qu'Art Car, autre sujet. La structure des pages ne bouge
   pas d'un élément : seules les couleurs et quelques filets changent.

   ── LE MOTIF ──────────────────────────────────────────────────────────
   Cinq bandes, dans cet ordre, sans dégradé :

        bleu ciel · bleu ciel · ROUGE · bleu ciel · bleu ciel

   La rouge au centre, deux bleu ciel de chaque côté. Deux couleurs, pas
   trois : le bleu nuit ne fait pas partie du motif — il sert de fond et
   de texte, jamais de bande. Décision de François, 18/09/2026, après une
   première version à trois bandes inégales qui « ressemblait trop au M de
   BMW ».

   La rouge est deux fois plus large que chacune des bleues (François,
   18/09/2026). Les bandes sont séparées de fines fentes transparentes :
   c'est ce qui les rend dénombrables. Sans elles, les deux bleus voisins se soudent et
   le motif se lit « bleu large · rouge · bleu large » — trois bandes, pas
   cinq. La fente laisse voir le support, elle n'ajoute pas de couleur.

   Une seule définition, réutilisée partout — bandeau de collection,
   cartouches, fiches, séparateurs. Deux variantes seulement : droite et
   penchée ; la penchée, c'est la même, comme elle court sur une
   carrosserie.

   ── LES COULEURS ──────────────────────────────────────────────────────
   Elles sont MESURÉES sur les packshots de l'archive (1367, 1377, 1481,
   9679), pas retenues de mémoire : on a compté les pixels colorés de
   chaque cadran et pris les teintes dominantes. Le rouge tombe au chiffre
   près sur celui de la maison (--laque, #C8102E) : la Martini n'apporte
   pas une couleur de plus, elle apporte une SÉQUENCE.

   ⚠️ Les logos Martini et Martini Racing n'existent nulle part — ni dans
   le dépôt, ni dans l'archive de la boutique (vérifié le 18/09/2026 :
   aucun fichier, et l'archive répond 404 sur tous les noms plausibles). On
   ne les invente pas de mémoire : un logo de marque mal redessiné est un
   faux. Le nom est donc composé dans la typographie de la maison — Oswald
   en capitales — et c'est la bande qui porte la reconnaissance. Le jour où
   la licence fournit les fichiers, ils se posent dans
   `illustration/martini/` et la règle `.mr-logo` plus bas les accueille
   sans rien changer d'autre.
   ══════════════════════════════════════════════════════════════════════ */
body[data-univers="martini"]{
  --mr-ciel:#489CD8;          /* la laque bleu ciel — bracelet et réhaut de la BT12-45 */
  --mr-rouge:#C8102E;         /* le rouge de la bande — celui de la maison, au chiffre près */
  --mr-ciel-clair:#7FC0EA;    /* la même, relevée pour le texte sur fond sombre */
  --mr-nuit:#182D50;          /* le bleu des cadrans — fond et texte, JAMAIS une bande */

  /* Quatre bandes bleu ciel de 14,67 %, une rouge de 29,33 % — le DOUBLE,
     demandé par François le 18/09/2026 — et quatre fentes de 3 %.
     4 × 14,67 + 29,33 + 4 × 3 = 100. Le tout est symétrique : la rouge
     est exactement au centre, de 35,33 % à 64,67 %. */
  --mr-bandes:linear-gradient(90deg,
    var(--mr-ciel)  0      14.67%, transparent 14.67% 17.67%,
    var(--mr-ciel)  17.67% 32.33%, transparent 32.33% 35.33%,
    var(--mr-rouge) 35.33% 64.67%, transparent 64.67% 67.67%,
    var(--mr-ciel)  67.67% 82.33%, transparent 82.33% 85.33%,
    var(--mr-ciel)  85.33% 100%);
  --mr-bandes-obl:linear-gradient(104deg,
    var(--mr-ciel)  0      14.67%, transparent 14.67% 17.67%,
    var(--mr-ciel)  17.67% 32.33%, transparent 32.33% 35.33%,
    var(--mr-rouge) 35.33% 64.67%, transparent 64.67% 67.67%,
    var(--mr-ciel)  67.67% 82.33%, transparent 82.33% 85.33%,
    var(--mr-ciel)  85.33% 100%);
  /* La même séquence en sourdine, pour passer DERRIÈRE une montre sans la
     manger. Les fentes y sont plus larges : de loin, ce sont les bandes
     d'une carrosserie, pas un aplat. */
  --mr-bandes-fond:linear-gradient(104deg,
    transparent 0 44%,
    rgba(72,156,216,.17) 44% 49%, transparent 49% 51%,
    rgba(72,156,216,.17) 51% 56%, transparent 56% 58%,
    rgba(200,16,46,.15)  58% 68%, transparent 68% 70%,
    rgba(72,156,216,.17) 70% 75%, transparent 75% 77%,
    rgba(72,156,216,.17) 77% 82%, transparent 82% 100%);
}

/* ── La bande, partout où un filet suffisait ──────────────────────────── */
/* Le nom du modèle est souligné de la livrée, penchée comme sur un capot. */
body[data-univers="martini"] .fiche-achat h1{position:relative;padding-bottom:16px}
body[data-univers="martini"] .fiche-achat h1::after{
  content:'';position:absolute;left:0;bottom:0;width:210px;height:5px;
  background:var(--mr-bandes);transform:skewX(-14deg);transform-origin:left bottom}

/* La marque porte le motif en miniature. Vingt-six pixels : en dessous,
   les cinq bandes ne se comptent plus. */
body[data-univers="martini"] .fiche-marque{color:var(--encre);font-weight:600;
  display:flex;align-items:center;gap:10px;padding-left:0;letter-spacing:.24em}
body[data-univers="martini"] .fiche-marque::before{
  content:'';width:26px;height:13px;background:var(--mr-bandes);
  transform:skewX(-14deg)}

/* Les caractéristiques reprennent la séquence, de haut en bas : deux
   ciel, une rouge, deux ciel, et l'on recommence. */
body[data-univers="martini"] .fiche-points li::before{background:var(--mr-ciel)}
body[data-univers="martini"] .fiche-points li:nth-child(5n+3)::before{background:var(--mr-rouge)}

body[data-univers="martini"] .fiche-dispo::before{background:var(--mr-ciel)}

/* Le fond de la galerie : la livrée passe derrière la montre, en sourdine.
   `width:auto` remet à zéro le `::before` de 3 000 px que la feuille des
   fiches donne déjà à la galerie — sans quoi les bandes traversent la page
   entière (la même embûche qu'en Art Car). */
body[data-univers="martini"] .fiche-galerie{isolation:isolate}
body[data-univers="martini"] .fiche-galerie::before{
  content:'';position:absolute;inset:0;width:auto;height:auto;overflow:hidden;
  z-index:0;pointer-events:none;background:var(--mr-bandes-fond)}
body[data-univers="martini"] .fiche-galerie > *{position:relative;z-index:1}

/* Le paiement et le bouton d'achat : la bande sur la tranche, jamais un
   aplat. On ne repeint pas un appel à l'action, on le signe. */
body[data-univers="martini"] .fiche-paiement{
  border-left:4px solid transparent;
  border-image:var(--mr-bandes) 1;border-image-slice:1;border-width:0 0 0 4px}
body[data-univers="martini"] .fiche-paiement-mens b,
body[data-univers="martini"] .fiche-paiement-durees button[aria-pressed="true"]{color:inherit}
body[data-univers="martini"] .fiche-paiement-durees button[aria-pressed="true"]{
  background:var(--mr-nuit);border-color:var(--mr-nuit);color:#fff}
body[data-univers="martini"] .fiche-actions .btn-plein{position:relative;overflow:hidden}
body[data-univers="martini"] .fiche-actions .btn-plein::before{
  content:'';position:absolute;left:0;right:0;top:0;height:4px;background:var(--mr-bandes)}

body[data-univers="martini"] #fiche-specs .spec-bloc .plus{color:var(--mr-ciel)}
body[data-univers="martini"] #fiche-specs .spec-bloc:nth-child(5n+3) .plus{color:var(--mr-rouge)}

/* ── Le bas de page ───────────────────────────────────────────────────── */
body[data-univers="martini"] .fiche-recit{position:relative;isolation:isolate}
body[data-univers="martini"] .fiche-recit::before{
  content:'';position:absolute;inset:0;width:auto;height:auto;z-index:-1;pointer-events:none;
  background:linear-gradient(104deg,
    rgba(72,156,216,.12) 0 5%, transparent 5% 7%,
    rgba(72,156,216,.12) 7% 12%, transparent 12% 14%,
    rgba(200,16,46,.10)  14% 24%, transparent 24% 26%,
    rgba(72,156,216,.12) 26% 31%, transparent 31% 33%,
    rgba(72,156,216,.12) 33% 38%, transparent 38% 100%)}
body[data-univers="martini"] .fiche-recit h2,
body[data-univers="martini"] .fiche-recit h3{position:relative;padding-left:18px}
body[data-univers="martini"] .fiche-recit h2::before,
body[data-univers="martini"] .fiche-recit h3::before{
  content:'';position:absolute;left:0;top:.18em;bottom:.18em;width:5px;
  background:var(--mr-ciel);transform:skewX(-14deg)}
body[data-univers="martini"] .recit-in > *:nth-child(2) h2::before{background:var(--mr-rouge)}
body[data-univers="martini"] .fiche-recit .sur{color:var(--mr-nuit);font-weight:600}

body[data-univers="martini"] .fiche-accessoires .prod-prix{color:var(--encre);font-weight:600}
/* ⚠️ Pas de `position:relative` sur la barre de rappel : la feuille des
   fiches la pose en `fixed`, et un `fixed` ancre déjà ses enfants
   absolus. En lui donnant `relative`, elle retombe dans le flux et
   s'affiche en plein milieu de la page (mésaventure vécue en Art Car). */
body[data-univers="martini"] .fiche-barre::before{
  content:'';position:absolute;left:0;right:0;top:0;height:4px;width:auto;
  background:var(--mr-bandes)}

body[data-univers="martini"] .svc-grid > * strong,
body[data-univers="martini"] .svc-grid > * b{color:var(--mr-ciel)}
body[data-univers="martini"] .svc-grid > *:nth-child(2) strong,
body[data-univers="martini"] .svc-grid > *:nth-child(2) b{color:var(--mr-rouge)}
body[data-univers="martini"] .fiche-illustr-bloc:last-child .sur{color:var(--mr-nuit)}

/* ══ LA PAGE DE COLLECTION MARTINI RACING ═════════════════════════════════
   Art Car n'habillait que la fiche. Ici la collection a sa page à elle, et
   c'est la première chose qu'on voit : elle porte la livrée pour de bon.
   ══════════════════════════════════════════════════════════════════════ */

/* Le voile de la photo tire vers le bleu nuit plutôt que vers le noir :
   la bannière est bleue, le titre doit s'y poser sans la grisailler. */
body[data-univers="martini"] .coll-ouverture.photo::before{
  background:linear-gradient(90deg,rgba(9,20,42,.88) 0%,rgba(9,20,42,.62) 46%,rgba(9,20,42,.12) 100%)}
body[data-univers="martini"] .coll-ouverture .sur{color:var(--mr-ciel-clair)}
/* Le nom de la collection, souligné de la livrée. C'est le seul « logo »
   que nous ayons le droit de composer : le nom dans la typographie de la
   maison, et la bande dessous. */
body[data-univers="martini"] .coll-ouverture h1{position:relative;padding-bottom:18px}
body[data-univers="martini"] .coll-ouverture h1::after{
  content:'';position:absolute;left:0;bottom:0;width:min(300px,64%);height:7px;
  background:var(--mr-bandes);transform:skewX(-14deg);transform-origin:left bottom}
body[data-univers="martini"] .coll-accroche{color:var(--mr-ciel-clair)}
body[data-univers="martini"] .coll-meta span+span::before{background:var(--mr-ciel-clair)}

/* La couture entre la photo et la page : la livrée court d'un bord à
   l'autre, à la tranche basse de l'ouverture.

   Deux essais pour y arriver. Posée à même la photo, les fentes laissaient
   passer l'image et les deux bandes de gauche disparaissaient dans le
   bleu du voile — le motif ne se comptait plus. Reportée en tête de la
   barre de filtres, elle se lisait, mais flottait à quatre-vingts pixels
   de la photo, sans rien coudre du tout. Elle est donc restée au bord de
   la photo, avec la CRÈME derrière : les fentes montrent le papier, le
   motif tient, et la bande fait la couture qu'on lui demande. */
body[data-univers="martini"] .coll-ouverture.photo::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:8px;z-index:3;
  background-color:var(--creme);background-image:var(--mr-bandes)}
/* Une puce active prend le bleu nuit : sur cette page, le rouge appartient
   à la bande. */
body[data-univers="martini"] .puce.on{
  background:var(--mr-nuit);border-color:var(--mr-nuit);color:#fff}

/* Le texte de bas de page s'ouvre sur la bande, en filet. */
body[data-univers="martini"] .coll-texte{position:relative;padding-top:clamp(28px,4vw,52px)}
body[data-univers="martini"] .coll-texte::before{
  content:'';position:absolute;top:0;left:var(--gouttiere);width:clamp(140px,18vw,240px);
  height:5px;background:var(--mr-bandes)}

/* Les cartes : la livrée se déroule sur la tranche haute du visuel au
   survol. Rien au repos — une grille reste une grille. */
body[data-univers="martini"] #coll-grille .prod .prod-img{position:relative}
body[data-univers="martini"] #coll-grille .prod .prod-img::after{
  content:'';position:absolute;left:0;right:0;top:0;height:5px;z-index:2;
  background:var(--mr-bandes);transform:scaleX(0);transform-origin:left;
  transition:transform .42s var(--ease)}
body[data-univers="martini"] #coll-grille .prod:hover .prod-img::after,
body[data-univers="martini"] #coll-grille .prod:focus-visible .prod-img::after{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){
  body[data-univers="martini"] #coll-grille .prod .prod-img::after{transition:none}
}

/* Le jour où la licence fournit les fichiers : un `<img class="mr-logo">`
   posé dans l'ouverture prend la place du nom composé, à la même hauteur.
   Rien d'autre ne bouge. */
body[data-univers="martini"] .mr-logo{
  display:block;width:auto;height:clamp(34px,4.6vw,64px);margin-bottom:10px}
/* ═══ fin MARTINI RACING ═══ */

/* ── Le nombre de pièces d'une série limitée ──────────────────────────────
   Il dormait dans un accordéon replié ; il se lit maintenant sous la
   référence, dans le premier écran. Deux blocs : le libellé en capitales,
   comme les sur-titres de la maison, et le nombre en chiffres d'affiche —
   c'est lui qu'on vient chercher. Un filet d'un pixel les tient ensemble.
   Voir `fiches.js` et `outils-proto/series-limitees.py`. */
.fiche-serie{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  margin-top:10px;padding-top:12px;border-top:1px solid var(--trait)}
/* `--laque`, pas `--laque-lisible` : la seconde est la variante RELEVÉE,
   faite pour tenir sur l'encre — sur le papier blanc de la fiche, elle
   pâlit. Le rouge de la maison est celui-ci. */
.fiche-serie b{font-size:var(--micro);letter-spacing:var(--piste);
  text-transform:uppercase;font-weight:600;color:var(--laque)}
.fiche-serie .fiche-serie-n{font-family:var(--display);font-size:1.45rem;
  line-height:1;font-weight:500;color:var(--encre)}
.fiche-serie span:last-child{font-size:.82rem;font-weight:300;color:var(--encre-doux)}
/* Dans la livrée Martini, le libellé prend le bleu ciel : sur ces pages,
   le rouge appartient à la bande. */
body[data-univers="martini"] .fiche-serie b{color:var(--mr-nuit)}

/* ══ HABILLAGE PAR UNIVERS — GOLF (GF6 et GF7) ════════════════════════════
   Troisième univers habillé, même mécanique que les deux premiers : la
   structure de la page ne bouge pas, seules les couleurs et quelques
   filets changent. Il couvre les quatre-vingt-une montres de la collection
   Golf — trente-cinq GF7 de 38 mm, quarante-six GF6 de 44 mm — et rien
   d'autre.

   La GF7-38-SA Art Car n'en est PAS : au catalogue elle pend sous Art Car
   (7) et non sous Golf (10), son fil d'Ariane le dit, et elle garde donc
   son habillage Art Car sans qu'on ait à l'exclure à la main. Vérifié.

   ── CE QU'ON A POUR LE DIRE ───────────────────────────────────────────
   Pas de club, pas de logo, pas de partenariat : rien de tout cela
   n'existe dans les données et on n'en invente pas. Deux faits, tous deux
   dans les caractéristiques du catalogue, suffisent à faire un univers :

   · LA LAQUE. Un boîtier inox PVD noir, et une couleur posée dessus en
     traits fins — sur le flanc, sur la couronne, sur les aiguilles, sur
     les coutures et dans les trous du bracelet. Quinze teintes en tout ;
     le vert pomme est la plus répandue (dix références) et c'est celle de
     l'encart de la collection. Sa valeur est MESURÉE sur le packshot 3262,
     pas retenue de mémoire : #64A00A. La laque ne fait jamais un aplat —
     un trait, un point, un liseré. La règle de dessin découle du produit.

   · LES SIX AMORTISSEURS. « Type de balancier : système full-floating
     composé d'une masse autorégulante et de SIX amortisseurs. » C'est ce
     qui distingue une Golf de tout le reste du catalogue — un mouvement
     suspendu, pensé pour encaisser le swing. Six points, donc, là où les
     autres univers mettent un trait : la signature se compte.

   Le bracelet est perforé, et la laque se voit par les trous. C'est le
   seul fond qu'on se permet : une trame de perforations, très en retrait.
   ══════════════════════════════════════════════════════════════════════ */
body[data-univers="golf"]{
  --gf-vert:#64A00A;          /* la laque vert pomme, mesurée sur le packshot 3262 */
  --gf-vert-clair:#8FCB3A;    /* la même, relevée pour le texte sur fond sombre */
  --gf-noir:#15170F;          /* le PVD noir du boîtier, à peine verdi */
  /* Les six amortisseurs, en points. On les pose en `box-shadow` sur un
     seul pseudo-élément : six points, une seule règle, rien à empiler. */
  --gf-six:6px 0 0 -1px var(--gf-vert), 12px 0 0 -1px var(--gf-vert),
           18px 0 0 -1px var(--gf-vert), 24px 0 0 -1px var(--gf-vert),
           30px 0 0 -1px var(--gf-vert);
  /* Les perforations du bracelet, en trame. */
  --gf-trame:radial-gradient(circle at center, rgba(100,160,10,.16) 0 2.5px, transparent 2.6px);
}

/* Le nom du modèle est souligné d'un trait de laque — fin, comme sur le
   flanc du boîtier. Pas de bande : la laque ne s'étale pas. */
body[data-univers="golf"] .fiche-achat h1{position:relative;padding-bottom:15px}
body[data-univers="golf"] .fiche-achat h1::after{
  content:'';position:absolute;left:0;bottom:0;width:190px;height:2px;
  background:var(--gf-vert);
  box-shadow:0 5px 0 -0.5px var(--gf-vert)}   /* deux traits, comme les deux filets du flanc */

/* La marque porte les six amortisseurs. */
body[data-univers="golf"] .fiche-marque{color:var(--encre);font-weight:600;
  display:flex;align-items:center;gap:44px;padding-left:0;letter-spacing:.24em}
body[data-univers="golf"] .fiche-marque::before{
  content:'';width:4px;height:4px;border-radius:50%;background:var(--gf-vert);
  box-shadow:var(--gf-six)}

/* Les six amortisseurs ouvrent la liste des caractéristiques : c'est là
   que le mouvement se décrit, et c'est la signature de l'univers. Toutes
   les fiches ont cette liste ; toutes n'ont pas de `.fiche-marque` — la
   GF6-44-SA-N-AVP, par exemple, n'en a pas, et la signature n'y paraissait
   nulle part. */
body[data-univers="golf"] .fiche-points{position:relative;padding-top:20px}
body[data-univers="golf"] .fiche-points::before{
  content:'';position:absolute;left:0;top:4px;width:4px;height:4px;border-radius:50%;
  background:var(--gf-vert);box-shadow:var(--gf-six)}
body[data-univers="golf"] .fiche-points li::before{background:var(--gf-vert)}
body[data-univers="golf"] .fiche-dispo::before{background:var(--gf-vert)}

/* Le fond de la galerie : la trame du bracelet perforé, en sourdine.
   ⚠️ `width:auto` : la feuille des fiches donne déjà un `::before` de
   3 000 px à la galerie (mésaventure d'Art Car, puis de Martini). */
body[data-univers="golf"] .fiche-galerie{isolation:isolate}
body[data-univers="golf"] .fiche-galerie::before{
  content:'';position:absolute;inset:0;width:auto;height:auto;overflow:hidden;
  z-index:0;pointer-events:none;
  background:var(--gf-trame);background-size:26px 26px}
body[data-univers="golf"] .fiche-galerie > *{position:relative;z-index:1}

body[data-univers="golf"] .fiche-paiement{border-left:3px solid var(--gf-vert)}
body[data-univers="golf"] .fiche-paiement-mens b{color:inherit}
body[data-univers="golf"] .fiche-paiement-durees button[aria-pressed="true"]{
  background:var(--gf-noir);border-color:var(--gf-noir);color:#fff}
body[data-univers="golf"] .fiche-actions .btn-plein{position:relative;overflow:hidden}
body[data-univers="golf"] .fiche-actions .btn-plein::before{
  content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--gf-vert)}

body[data-univers="golf"] #fiche-specs .spec-bloc .plus{color:var(--gf-vert)}
body[data-univers="golf"] .fiche-serie b{color:var(--gf-vert)}

/* ── Le bas de page ───────────────────────────────────────────────────── */
body[data-univers="golf"] .fiche-recit{position:relative;isolation:isolate}
body[data-univers="golf"] .fiche-recit::before{
  content:'';position:absolute;inset:0;width:auto;height:auto;z-index:-1;pointer-events:none;
  background:var(--gf-trame);background-size:30px 30px;opacity:.6}
body[data-univers="golf"] .fiche-recit h2,
body[data-univers="golf"] .fiche-recit h3{position:relative;padding-left:16px}
body[data-univers="golf"] .fiche-recit h2::before,
body[data-univers="golf"] .fiche-recit h3::before{
  content:'';position:absolute;left:0;top:.2em;bottom:.2em;width:3px;background:var(--gf-vert)}
body[data-univers="golf"] .fiche-recit .sur{color:var(--gf-vert);font-weight:600}
body[data-univers="golf"] .fiche-accessoires .prod-prix{color:var(--encre);font-weight:600}
/* ⚠️ Pas de `position:relative` sur `.fiche-barre` : elle est `fixed`. */
body[data-univers="golf"] .fiche-barre::before{
  content:'';position:absolute;left:0;right:0;top:0;height:3px;width:auto;
  background:var(--gf-vert)}
body[data-univers="golf"] .svc-grid > * strong,
body[data-univers="golf"] .svc-grid > * b{color:var(--gf-vert)}
body[data-univers="golf"] .fiche-illustr-bloc:last-child .sur{color:var(--gf-vert)}

/* ── Les pages de collection Golf, GF6 et GF7 ─────────────────────────── */
body[data-univers="golf"] .coll-ouverture.photo::before{
  background:linear-gradient(90deg,rgba(14,20,8,.88) 0%,rgba(14,20,8,.60) 46%,rgba(14,20,8,.10) 100%)}
body[data-univers="golf"] .coll-ouverture .sur{color:var(--gf-vert-clair)}
body[data-univers="golf"] .coll-ouverture h1{position:relative;padding-bottom:16px}
body[data-univers="golf"] .coll-ouverture h1::after{
  content:'';position:absolute;left:0;bottom:0;width:min(280px,62%);height:2px;
  background:var(--gf-vert-clair);box-shadow:0 6px 0 -0.5px var(--gf-vert-clair)}
body[data-univers="golf"] .coll-accroche{color:var(--gf-vert-clair)}
body[data-univers="golf"] .coll-meta span+span::before{background:var(--gf-vert-clair)}
body[data-univers="golf"] .puce.on{
  background:var(--gf-noir);border-color:var(--gf-noir);color:#fff}
body[data-univers="golf"] .coll-texte{position:relative;padding-top:clamp(28px,4vw,52px)}
body[data-univers="golf"] .coll-texte::before{
  content:'';position:absolute;top:0;left:var(--gouttiere);width:4px;height:4px;
  border-radius:50%;background:var(--gf-vert);box-shadow:var(--gf-six)}
/* Au survol, la laque passe sur la tranche du visuel — un trait, pas une
   bande. */
body[data-univers="golf"] #coll-grille .prod .prod-img{position:relative}
body[data-univers="golf"] #coll-grille .prod .prod-img::after{
  content:'';position:absolute;left:0;right:0;top:0;height:3px;z-index:2;
  background:var(--gf-vert);transform:scaleX(0);transform-origin:left;
  transition:transform .42s var(--ease)}
body[data-univers="golf"] #coll-grille .prod:hover .prod-img::after,
body[data-univers="golf"] #coll-grille .prod:focus-visible .prod-img::after{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){
  body[data-univers="golf"] #coll-grille .prod .prod-img::after{transition:none}
}
/* ═══ fin GOLF ═══ */

/* ══ HABILLAGE PAR UNIVERS — RACING ═══════════════════════════════════════
   Le quatrième univers habillé, et le plus fourni : deux cent trente-trois
   fiches et quatorze pages de collection — Racing et ses treize familles de
   modèle, du V3 au V17. C'est l'univers d'origine de la maison ; il est
   resté nu jusqu'ici alors qu'Art Car, Golf et Martini étaient vêtus.

   Même mécanique que les trois autres : le gabarit commun ne bouge pas
   d'un élément, seules les couleurs et quelques filets changent.

   ── CE QUI NE RENTRE PAS ──────────────────────────────────────────────
   Pas d'écurie, pas de circuit, pas de logo. Et surtout PAS de damier :
   c'est le cliché du genre, et chez nous le damier est déjà une FINITION
   DE BOÎTIER — trente et une références Racing en portent un, dont les
   Martini et la Gillian Henrion. En faire le motif de l'univers
   brouillerait une finition réelle avec une décoration.

   ── CE QU'ON A POUR LE DIRE, ET D'OÙ ÇA VIENT ─────────────────────────
   Tout est relevé dans les caractéristiques des 241 références de la
   collection 6 et dans l'éditorial du site. Rien n'est emprunté.

   · L'ACIER USINÉ DANS LA MASSE. « Type de boîtier : rond taillé dans la
     masse » sur 235 des 241. L'éditorial de la collection le redit :
     « la course comme cahier des charges », « boîtier rond usiné dans la
     masse ». Les deux teintes sont MESURÉES sur les packshots 842, 849 et
     5303 : la lumière sur l'inox poli #D0D0D0, son ombre #686868. Le motif
     de fond est le brossage — des striations fines et parallèles, ce à
     quoi ressemble un inox brossé, la matière de boîtier la plus répandue
     de la collection.

   · LA LAQUE ROUGE. Racing garde le rouge DE LA MAISON (--laque, #C8102E)
     au lieu d'en importer un : c'est l'univers d'origine, l'accent est né
     avec lui. Il est d'ailleurs la couleur d'aiguilles la plus fréquente
     de la collection — « perforées rouges avec pointe recouverte de
     Superluminova® », trente-cinq références. Mesuré sur le packshot 5303
     à #A00A1E dans l'ombre, #FA4646 en pleine lumière : le rouge de la
     maison tombe au milieu.

   · LA VISSERIE. « Visserie spécifique : inox surfin » sur 236 des 241, et
     elle se VOIT — la couronne de vis qui ceinture la lunette est la
     signature de tous ces boîtiers. C'est elle qu'on pose là où Golf met
     ses six amortisseurs : une signature se compte, et celle-ci dit qu'un
     boîtier B.R.M se démonte.

   ── LE DESSIN QUI EN DÉCOULE ──────────────────────────────────────────
   Trois gestes, trois formes distinctes de celles des autres univers —
   Art Car a ses traits de peinture, Martini ses cinq bandes, Golf ses
   points. Racing a le FILET D'ACIER À LAQUE : une barre d'inox dont le
   tiers central est rouge, comme la laque déposée au creux d'une pièce
   usinée. Massif, mécanique, et reconnaissable au premier coup d'œil sans
   ressembler à rien d'autre.
   ══════════════════════════════════════════════════════════════════════ */
body[data-univers="racing"]{
  --rc-acier:#686868;          /* l'ombre de l'inox usiné, mesurée (842/849/5303) */
  --rc-acier-clair:#D0D0D0;    /* la lumière sur l'inox, mesurée */
  --rc-laque:var(--laque);     /* le rouge de la maison — Racing l'a vu naître */

  /* Le filet d'acier à laque : la signature de l'univers. */
  --rc-filet:linear-gradient(90deg,
    var(--rc-acier) 0 38%,
    var(--rc-laque) 38% 62%,
    var(--rc-acier) 62% 100%);
  /* Le brossage de l'inox : des striations fines et parallèles. Verticales,
     pour ne se confondre ni avec les bandes penchées de Martini ni avec la
     trame de points de Golf. */
  --rc-brossage:repeating-linear-gradient(90deg,
    transparent 0 5px, rgba(104,104,104,.055) 5px 6px);
  /* La couronne de vis, à plat : six têtes d'inox régulièrement espacées. */
  --rc-visserie:radial-gradient(circle at center,
    var(--rc-acier) 0 2.1px, transparent 2.3px);
}

/* ── La fiche ─────────────────────────────────────────────────────────── */
/* Le nom du modèle est souligné du filet d'acier, la laque en son milieu. */
body[data-univers="racing"] .fiche-achat h1{position:relative;padding-bottom:16px}
body[data-univers="racing"] .fiche-achat h1::after{
  content:'';position:absolute;left:0;bottom:0;width:200px;height:4px;
  background:var(--rc-filet)}

/* La marque porte la visserie : six têtes de vis, comme au tour de lunette. */
body[data-univers="racing"] .fiche-marque{color:var(--encre);font-weight:600;
  display:flex;align-items:center;gap:12px;padding-left:0;letter-spacing:.24em}
body[data-univers="racing"] .fiche-marque::before{
  content:'';width:44px;height:6px;background:var(--rc-visserie);
  background-size:8px 6px}

/* Les caractéristiques : l'acier, et la laque une fois sur trois — comme
   elle se pose sur une pièce usinée, par touches. */
/* Vingt-six fiches Racing sur 241 n'ont pas de `.fiche-marque` — elles
   n'auraient porté aucune signature. `:has()` la leur donne au-dessus des
   caractéristiques, et seulement à elles : pas de doublon sur les 215
   autres. */
body[data-univers="racing"] .fiche-achat:not(:has(.fiche-marque)) .fiche-points{
  position:relative;padding-top:24px}
body[data-univers="racing"] .fiche-achat:not(:has(.fiche-marque)) .fiche-points::before{
  content:'';position:absolute;left:0;top:3px;width:44px;height:6px;
  background:var(--rc-visserie);background-size:8px 6px}
body[data-univers="racing"] .fiche-points li::before{background:var(--rc-acier)}
body[data-univers="racing"] .fiche-points li:nth-child(3n+1)::before{background:var(--rc-laque)}
body[data-univers="racing"] .fiche-dispo::before{background:var(--rc-laque)}

/* Le fond de la galerie : le brossage de l'inox, en sourdine.
   ⚠️ `width:auto` : la feuille des fiches donne déjà un `::before` de
   3 000 px à la galerie — sans remise à zéro, la texture traverse la page
   entière (l'embûche d'Art Car, puis de Martini, puis de Golf). */
body[data-univers="racing"] .fiche-galerie{isolation:isolate}
body[data-univers="racing"] .fiche-galerie::before{
  content:'';position:absolute;inset:0;width:auto;height:auto;overflow:hidden;
  z-index:0;pointer-events:none;background:var(--rc-brossage)}
body[data-univers="racing"] .fiche-galerie > *{position:relative;z-index:1}

/* Le paiement et le bouton d'achat : le filet sur la tranche. On ne
   repeint pas un appel à l'action, on le signe. */
body[data-univers="racing"] .fiche-paiement{
  border-left:4px solid transparent;
  border-image:var(--rc-filet) 1;border-image-slice:1;border-width:0 0 0 4px}
body[data-univers="racing"] .fiche-paiement-mens b{color:inherit}
body[data-univers="racing"] .fiche-paiement-durees button[aria-pressed="true"]{
  background:var(--encre);border-color:var(--encre);color:#fff}
body[data-univers="racing"] .fiche-actions .btn-plein{position:relative;overflow:hidden}
body[data-univers="racing"] .fiche-actions .btn-plein::before{
  content:'';position:absolute;left:0;right:0;top:0;height:4px;background:var(--rc-filet)}

body[data-univers="racing"] #fiche-specs .spec-bloc .plus{color:var(--rc-acier)}
body[data-univers="racing"] #fiche-specs .spec-bloc:nth-child(3n+1) .plus{color:var(--rc-laque)}
body[data-univers="racing"] .fiche-serie b{color:var(--rc-laque)}

/* ── Le bas de page ───────────────────────────────────────────────────── */
body[data-univers="racing"] .fiche-recit{position:relative;isolation:isolate}
body[data-univers="racing"] .fiche-recit::before{
  content:'';position:absolute;inset:0;width:auto;height:auto;z-index:-1;
  pointer-events:none;background:var(--rc-brossage);opacity:.75}
body[data-univers="racing"] .fiche-recit h2,
body[data-univers="racing"] .fiche-recit h3{position:relative;padding-left:17px}
body[data-univers="racing"] .fiche-recit h2::before,
body[data-univers="racing"] .fiche-recit h3::before{
  content:'';position:absolute;left:0;top:.18em;bottom:.18em;width:4px;
  background:var(--rc-acier)}
body[data-univers="racing"] .recit-in > *:nth-child(2) h2::before{background:var(--rc-laque)}
body[data-univers="racing"] .fiche-recit .sur{color:var(--rc-laque);font-weight:600}
body[data-univers="racing"] .fiche-accessoires .prod-prix{color:var(--encre);font-weight:600}
/* ⚠️ Pas de `position:relative` sur `.fiche-barre` : la feuille la pose en
   `fixed`, et un `fixed` ancre déjà ses enfants absolus. */
body[data-univers="racing"] .fiche-barre::before{
  content:'';position:absolute;left:0;right:0;top:0;height:4px;width:auto;
  background:var(--rc-filet)}
body[data-univers="racing"] .svc-grid > * strong,
body[data-univers="racing"] .svc-grid > * b{color:var(--rc-acier)}
body[data-univers="racing"] .svc-grid > *:nth-child(1) strong,
body[data-univers="racing"] .svc-grid > *:nth-child(1) b{color:var(--rc-laque)}
body[data-univers="racing"] .fiche-illustr-bloc:last-child .sur{color:var(--rc-laque)}

/* ── Les quatorze pages de collection ─────────────────────────────────── */
/* Le voile de la photo tire vers le charbon : ces boîtiers sont d'acier et
   de noir, le titre doit s'y poser sans réchauffer l'image. */
body[data-univers="racing"] .coll-ouverture.photo::before{
  background:linear-gradient(90deg,rgba(11,11,13,.90) 0%,rgba(11,11,13,.62) 46%,rgba(11,11,13,.10) 100%)}
body[data-univers="racing"] .coll-ouverture .sur{color:var(--laque-lisible)}
body[data-univers="racing"] .coll-ouverture h1{position:relative;padding-bottom:17px}
body[data-univers="racing"] .coll-ouverture h1::after{
  content:'';position:absolute;left:0;bottom:0;width:min(290px,62%);height:5px;
  background:linear-gradient(90deg,
    var(--rc-acier-clair) 0 38%, var(--laque-lisible) 38% 62%, var(--rc-acier-clair) 62% 100%)}
body[data-univers="racing"] .coll-accroche{color:var(--rc-acier-clair)}
body[data-univers="racing"] .coll-meta span+span::before{background:var(--laque-lisible)}

/* La couture entre la photo et la page : le filet, d'un bord à l'autre. */
body[data-univers="racing"] .coll-ouverture.photo::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:5px;z-index:3;
  background:var(--rc-filet)}
/* Une puce active prend l'encre : sur ces pages, le rouge est un accent,
   pas un fond. */
body[data-univers="racing"] .puce.on{
  background:var(--encre);border-color:var(--encre);color:#fff}

/* Le texte de bas de page s'ouvre sur la visserie. */
body[data-univers="racing"] .coll-texte{position:relative;padding-top:clamp(28px,4vw,52px)}
body[data-univers="racing"] .coll-texte::before{
  content:'';position:absolute;top:0;left:var(--gouttiere);width:92px;height:6px;
  background:var(--rc-visserie);background-size:8px 6px}

/* Au survol, le filet se déroule sur la tranche du visuel. */
body[data-univers="racing"] #coll-grille .prod .prod-img{position:relative}
body[data-univers="racing"] #coll-grille .prod .prod-img::after{
  content:'';position:absolute;left:0;right:0;top:0;height:4px;z-index:2;
  background:var(--rc-filet);transform:scaleX(0);transform-origin:left;
  transition:transform .42s var(--ease)}
body[data-univers="racing"] #coll-grille .prod:hover .prod-img::after,
body[data-univers="racing"] #coll-grille .prod:focus-visible .prod-img::after{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){
  body[data-univers="racing"] #coll-grille .prod .prod-img::after{transition:none}
}
/* ═══ fin RACING ═══ */

/* ══ HABILLAGE PAR UNIVERS — BOAT MASTER ══════════════════════════════════
   Le cinquième univers habillé : vingt et une fiches et trois pages de
   collection — Boat Master et ses deux boîtiers, le BM2 de 34 mm et le BM6
   de 44 mm. Même mécanique que les quatre autres, gabarit commun inchangé.

   ── LE TON ────────────────────────────────────────────────────────────
   La mer et la lumière, pas la piste. Là où Racing est mécanique et laqué
   d'un rouge franc, celui-ci est calme : un bleu profond, une lumière qui
   part du centre, et rien qui crie. C'est une collection homogène — vingt
   et une références qui partagent presque toutes leurs caractéristiques —
   et l'habillage doit avoir cette égalité d'humeur.

   ── CE QU'ON A POUR LE DIRE, ET D'OÙ ÇA VIENT ─────────────────────────
   Relevé sur les 21 références de la collection 8 et sur l'éditorial.
   Aucune marque tierce, aucun club nautique, aucune course au large.

   · LE CADRAN BLEU SOLEILLÉ. « Couleur du cadran : Bleu soleillé » sur
     seize des vingt et un — et l'éditorial du BM6 s'intitule « BLEU
     SOLEILLÉ, 44 MM ». Soleillé veut dire ce qu'il dit : la lumière part
     du centre en rayons. C'est le motif de fond de l'univers, et il ne
     ressemble à rien des quatre autres — ni aux traits de peinture d'Art
     Car, ni aux cinq bandes de Martini, ni à la trame de points de Golf,
     ni aux striations parallèles de Racing.
     Le bleu est MESURÉ sur les packshots 3161 et 619, qui donnent la même
     valeur : #102840. La laque bleu ciel est mesurée sur le 112 : #80A8D8.

   · LES QUATRE VENTS. L'éditorial de la collection s'appelle « LES QUATRE
     VENTS AU CADRAN », et ils y sont pour de bon : TRAMONTANE, PONANT,
     LEVANT et MARIN sont imprimés aux quatre points cardinaux du cadran.
     D'où la signature de l'univers — une croix, quatre branches aux quatre
     aires. Golf compte ses six amortisseurs, Racing ses six vis ; Boat
     Master a quatre vents, et une croix ne se confond avec aucune rangée
     de points.

   · LA LAQUE EN DEUX TONS. « Le réhaut y est laqué, en deux tons sur dix
     des onze références » (BM2) ; « sur huit références sur dix, la lunette
     et le fond sont laqués, blanc et rouge, blanc et orange ou blanc et
     bleu ciel » (BM6). Le filet de l'univers est donc coupé en deux, pas
     en trois comme Racing ni en cinq comme Martini. Le blanc étant
     invisible sur du papier, ce sont les deux bleus mesurés qui le portent.
   ══════════════════════════════════════════════════════════════════════ */
body[data-univers="boat-master"]{
  --bm-nuit:#102840;           /* le bleu soleillé du cadran, mesuré (3161/619) */
  --bm-ciel:#80A8D8;           /* la laque bleu ciel, mesurée (112) */
  --bm-ciel-clair:#A8C8EC;     /* la même, relevée pour le texte sur fond sombre */

  /* Le filet en deux tons : la laque du réhaut, coupée net. */
  --bm-deux-tons:linear-gradient(90deg,
    var(--bm-ciel) 0 50%, var(--bm-nuit) 50% 100%);
  /* Le soleillé : la lumière part du centre en rayons.
     ⚠️ Premier essai beaucoup trop fort — des coins de 3° à 5,5 % d'encre
     donnaient une grande étoile grise qui mangeait la montre, exactement
     le contraire du calme qu'on cherche. Un cadran soleillé ne brille
     pas : il change avec l'angle, et de face on le devine à peine.
     ⚠️ Deuxième essai trop faible : en descendant à 2 % d'encre et 1,6° de
     pas, on est passé de « trop fort » à « invisible » — plus rien à voir
     sur le crème. « À peine » n'est pas « pas du tout ».
     Le réglage est donc MESURÉ, pas estimé. On isole le motif (contenu de
     la galerie masqué), on photographie, et on relève l'écart crête à
     creux sur une fenêtre centrale. Les autres univers donnent l'échelle :
     Martini 27, Golf 21, Art Car 13, Racing 9 — et ce soleillé était
     tombé à 4. Le balayage donne 10 à 4,5 %, 15 à 6,5 %, 20 à 9 %, 24 à
     11 %. Retenu : 9 % d'encre, 3° de pas, masque à 0,85 → écart 20,
     identique à 1440 et à 390 px. Visible comme Golf, un cran sous
     Martini : c'est la place d'un univers qu'on veut calme. Le masque
     radial reste — les rayons s'éteignent en s'éloignant du centre, comme
     sur le cadran — mais il part de plus haut. */
  --bm-soleille:repeating-conic-gradient(from 0deg at 50% 44%,
    rgba(16,40,64,.090) 0deg 3deg, transparent 3deg 6deg);
  --bm-halo:radial-gradient(circle at 50% 44%,
    #000 0%, rgba(0,0,0,.85) 38%, transparent 72%);
}

/* ── La fiche ─────────────────────────────────────────────────────────── */
body[data-univers="boat-master"] .fiche-achat h1{position:relative;padding-bottom:16px}
body[data-univers="boat-master"] .fiche-achat h1::after{
  content:'';position:absolute;left:0;bottom:0;width:196px;height:4px;
  background:var(--bm-deux-tons)}

/* La marque porte les quatre vents : une croix, quatre branches. */
body[data-univers="boat-master"] .fiche-marque{color:var(--encre);font-weight:600;
  display:flex;align-items:center;gap:11px;padding-left:0;letter-spacing:.24em}
/* ⚠️ AUCUNE des vingt et une fiches Boat Master ne porte `.fiche-marque`
   (vérifié : 0/21, comme les 81 Golf). La signature monte donc sur la
   liste des caractéristiques, qui est là partout. La règle ci-dessous
   reste pour le jour où une fiche en aura une. */
body[data-univers="boat-master"] .fiche-marque::before,
body[data-univers="boat-master"] .fiche-points::before{
  content:'';width:13px;height:13px;
  background:
    linear-gradient(var(--bm-nuit),var(--bm-nuit)) center/1.5px 100% no-repeat,
    linear-gradient(var(--bm-ciel),var(--bm-ciel)) center/100% 1.5px no-repeat}
body[data-univers="boat-master"] .fiche-points{position:relative;padding-top:26px}
body[data-univers="boat-master"] .fiche-points::before{position:absolute;left:0;top:2px}

body[data-univers="boat-master"] .fiche-points li::before{background:var(--bm-nuit)}
body[data-univers="boat-master"] .fiche-points li:nth-child(4n+1)::before{background:var(--bm-ciel)}
body[data-univers="boat-master"] .fiche-dispo::before{background:var(--bm-ciel)}

/* Le fond de la galerie : le soleillé, la lumière au centre.
   ⚠️ `width:auto` : la feuille des fiches donne déjà un `::before` de
   3 000 px à la galerie (l'embûche des quatre univers précédents). */
body[data-univers="boat-master"] .fiche-galerie{isolation:isolate}
body[data-univers="boat-master"] .fiche-galerie::before{
  content:'';position:absolute;inset:0;width:auto;height:auto;overflow:hidden;
  z-index:0;pointer-events:none;background:var(--bm-soleille);
  -webkit-mask-image:var(--bm-halo);mask-image:var(--bm-halo)}
body[data-univers="boat-master"] .fiche-galerie > *{position:relative;z-index:1}

body[data-univers="boat-master"] .fiche-paiement{
  border-left:4px solid transparent;
  border-image:var(--bm-deux-tons) 1;border-image-slice:1;border-width:0 0 0 4px}
body[data-univers="boat-master"] .fiche-paiement-mens b{color:inherit}
body[data-univers="boat-master"] .fiche-paiement-durees button[aria-pressed="true"]{
  background:var(--bm-nuit);border-color:var(--bm-nuit);color:#fff}
body[data-univers="boat-master"] .fiche-actions .btn-plein{position:relative;overflow:hidden}
body[data-univers="boat-master"] .fiche-actions .btn-plein::before{
  content:'';position:absolute;left:0;right:0;top:0;height:4px;background:var(--bm-deux-tons)}

body[data-univers="boat-master"] #fiche-specs .spec-bloc .plus{color:var(--bm-nuit)}
body[data-univers="boat-master"] #fiche-specs .spec-bloc:nth-child(2n) .plus{color:var(--bm-ciel)}
body[data-univers="boat-master"] .fiche-serie b{color:var(--bm-nuit)}

/* ── Le bas de page ───────────────────────────────────────────────────── */
body[data-univers="boat-master"] .fiche-recit{position:relative;isolation:isolate}
body[data-univers="boat-master"] .fiche-recit::before{
  content:'';position:absolute;inset:0;width:auto;height:auto;z-index:-1;
  pointer-events:none;background:var(--bm-soleille);opacity:.7;
  -webkit-mask-image:var(--bm-halo);mask-image:var(--bm-halo)}
body[data-univers="boat-master"] .fiche-recit h2,
body[data-univers="boat-master"] .fiche-recit h3{position:relative;padding-left:17px}
body[data-univers="boat-master"] .fiche-recit h2::before,
body[data-univers="boat-master"] .fiche-recit h3::before{
  content:'';position:absolute;left:0;top:.18em;bottom:.18em;width:4px;
  background:var(--bm-nuit)}
body[data-univers="boat-master"] .recit-in > *:nth-child(2) h2::before{background:var(--bm-ciel)}
body[data-univers="boat-master"] .fiche-recit .sur{color:var(--bm-nuit);font-weight:600}
body[data-univers="boat-master"] .fiche-accessoires .prod-prix{color:var(--encre);font-weight:600}
/* ⚠️ Pas de `position:relative` sur `.fiche-barre` : elle est `fixed`. */
body[data-univers="boat-master"] .fiche-barre::before{
  content:'';position:absolute;left:0;right:0;top:0;height:4px;width:auto;
  background:var(--bm-deux-tons)}
body[data-univers="boat-master"] .svc-grid > * strong,
body[data-univers="boat-master"] .svc-grid > * b{color:var(--bm-nuit)}
body[data-univers="boat-master"] .svc-grid > *:nth-child(2) strong,
body[data-univers="boat-master"] .svc-grid > *:nth-child(2) b{color:var(--bm-ciel)}
body[data-univers="boat-master"] .fiche-illustr-bloc:last-child .sur{color:var(--bm-nuit)}

/* ── Les trois pages de collection (8, 56, 57) ────────────────────────── */
/* Le voile tire vers le bleu de nuit, pas vers le noir : ces cadrans sont
   bleus, la photo doit le rester. */
body[data-univers="boat-master"] .coll-ouverture.photo::before{
  background:linear-gradient(90deg,rgba(10,24,42,.90) 0%,rgba(10,24,42,.62) 46%,rgba(10,24,42,.10) 100%)}
body[data-univers="boat-master"] .coll-ouverture .sur{color:var(--bm-ciel-clair)}
body[data-univers="boat-master"] .coll-ouverture h1{position:relative;padding-bottom:17px}
body[data-univers="boat-master"] .coll-ouverture h1::after{
  content:'';position:absolute;left:0;bottom:0;width:min(280px,62%);height:5px;
  background:linear-gradient(90deg,
    var(--bm-ciel-clair) 0 50%, var(--bm-ciel) 50% 100%)}
body[data-univers="boat-master"] .coll-accroche{color:var(--bm-ciel-clair)}
body[data-univers="boat-master"] .coll-meta span+span::before{background:var(--bm-ciel-clair)}
body[data-univers="boat-master"] .coll-ouverture.photo::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:5px;z-index:3;
  background:var(--bm-deux-tons)}
body[data-univers="boat-master"] .puce.on{
  background:var(--bm-nuit);border-color:var(--bm-nuit);color:#fff}

/* Le texte de bas de page s'ouvre sur les quatre vents. */
body[data-univers="boat-master"] .coll-texte{position:relative;padding-top:clamp(28px,4vw,52px)}
body[data-univers="boat-master"] .coll-texte::before{
  content:'';position:absolute;top:0;left:var(--gouttiere);width:18px;height:18px;
  background:
    linear-gradient(var(--bm-nuit),var(--bm-nuit)) center/2px 100% no-repeat,
    linear-gradient(var(--bm-ciel),var(--bm-ciel)) center/100% 2px no-repeat}

body[data-univers="boat-master"] #coll-grille .prod .prod-img{position:relative}
body[data-univers="boat-master"] #coll-grille .prod .prod-img::after{
  content:'';position:absolute;left:0;right:0;top:0;height:4px;z-index:2;
  background:var(--bm-deux-tons);transform:scaleX(0);transform-origin:left;
  transition:transform .42s var(--ease)}
body[data-univers="boat-master"] #coll-grille .prod:hover .prod-img::after,
body[data-univers="boat-master"] #coll-grille .prod:focus-visible .prod-img::after{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){
  body[data-univers="boat-master"] #coll-grille .prod .prod-img::after{transition:none}
}
/* ═══ fin BOAT MASTER ═══ */

/* ══ HABILLAGE PAR UNIVERS — AÉRO ═════════════════════════════════════════
   Le sixième et dernier univers habillé, et le plus petit du catalogue :
   trois fiches et une page de collection. Pas d'enfants — Aéro n'a aucune
   sous-collection (vérifié dans `cat-arbre.json`), donc pas le trou de
   `MONDES` qu'avaient les treize familles Racing et les deux Boat Master.
   '37' y était déjà et suffit.

   ── LE PROBLÈME, ET COMMENT IL EST RÉSOLU ─────────────────────────────
   Aéro n'a que DEUX couleurs, et ce sont celles du site. L'éditorial
   s'intitule « NOIR PVD, LAQUE BLANCHE » : boîtier inox PVD noir, cadran
   noir, décalques blancs, réhaut laque blanche, aiguilles blanches et
   noires — sur les trois références, sans exception. Sur une page déjà
   crème et encre, un habillage noir et blanc risquait de ne pas se voir
   du tout : « pas d'habillage » plutôt qu'un univers.

   La tentation était d'ajouter une couleur. On ne l'a pas fait : le
   catalogue n'en donne aucune, et le rouge appartient déjà à Racing — les
   deux se seraient brouillés. C'est donc la GÉOMÉTRIE qui porte l'univers,
   pas la teinte. Et elle le porte mieux, parce qu'elle vient des montres
   elles-mêmes.

   ── CE QU'ON A POUR LE DIRE, ET D'OÙ ÇA VIENT ─────────────────────────
   Relevé sur les trois fiches, pas sur une idée de l'aviation. Aucun logo,
   aucune compagnie, aucun avion dessiné : l'INSTRUMENT, jamais l'aéronef.

   · LES TROIS NOMS DISENT LA MÊME CHOSE. AERO-2 **Elevation**, AERO-6
     **Tailplane**, AERO-8 **ChronoHorizon** : l'altitude, l'empennage —
     le plan HORIZONTAL de la queue — et l'horizon artificiel. Les trois
     convergent sur une horizontale. C'est assez rare pour qu'on s'en
     serve : la signature de l'univers est UNE LIGNE D'HORIZON, dessinée
     comme sur un indicateur d'assiette — le ciel au-dessus, le sol en
     dessous, un trait net entre les deux.

   · LE BLANC EST UNE LAQUE DÉPOSÉE DANS DU NOIR. « Réhaut : laque
     blanche », « Couronne : inox PVD noir et laque blanche ». Sur le
     papier, le blanc ne se voit pas — alors c'est LE PAPIER qui fait le
     ciel, et le noir qui fait le sol. Le filet est l'exact inverse de
     celui de Racing (une barre d'acier dont le tiers central est rouge) :
     ici, une barre sombre dont la partie haute est vide.

   · LA GRADUATION. Un instrument de bord se lit à ses graduations, et le
     réhaut laqué blanc des Aéro en porte une. D'où le second geste : des
     traits de deux longueurs, un long tous les cinq, comme sur un cadran
     gradué. C'est ce que Racing met en vis et Boat Master en croix.

   · LES VALEURS SONT MESURÉES sur les packshots 3154, 3157 et 3170, qui
     donnent tous les trois la même chose : le noir PVD à #1E1E24, la laque
     blanche à #FCFCFC.

   ⚠️ Aucune des trois fiches ne porte `.fiche-marque` (0/3, comme les 21
   Boat Master et les 81 Golf) : la signature monte sur la liste des
   caractéristiques, qui est là partout.
   ══════════════════════════════════════════════════════════════════════ */
body[data-univers="aero"]{
  --ae-noir:#1E1E24;           /* l'inox PVD noir, mesuré (3154/3157/3170) */
  --ae-blanc:#FCFCFC;          /* la laque blanche, mesurée */

  /* La ligne d'horizon. Le papier fait le ciel, le noir fait le sol, et le
     trait net les sépare — un indicateur d'assiette, en trois valeurs et
     deux couleurs. Se pose sur une barre d'une dizaine de pixels : en
     dessous, les trois plages ne se distinguent plus. */
  --ae-horizon:linear-gradient(180deg,
    transparent 0 44%,
    var(--ae-noir) 44% 60%,
    rgba(30,30,36,.42) 60% 100%);
  /* La même, pour un fond sombre : c'est alors le blanc qui porte. */
  --ae-horizon-clair:linear-gradient(180deg,
    transparent 0 44%,
    var(--ae-blanc) 44% 60%,
    rgba(252,252,252,.42) 60% 100%);
  /* ── L'HORIZON ARTIFICIEL ────────────────────────────────────────
     ⚠️ Premier essai : un dégradé à trois plages, « ciel » à peine plus
     clair que « sol », séparés d'un filet. Refusé, et à juste titre — de
     face, ça ne disait rien : un trait gris oublié derrière le visuel,
     pas un instrument. Un horizon artificiel ne se SUGGÈRE pas, il se
     LIT : deux demi-champs, une ligne, une échelle d'assiette de part et
     d'autre, un repère central, et la couronne graduée en degrés autour.
     C'est un dessin, donc il est dessiné — en SVG, posé en data-URI comme
     les trois autres de la maison (site.css, legal.css, fiches.css), sans
     nouveau fichier. Huit éléments, 996 octets : les graduations ne sont
     pas 72 traits mais deux cercles à trait pointillé dont l'épaisseur
     fait la longueur de la graduation.

     C'est ici que le blanc laqué sert. Le noir et blanc des Aéro ne tient
     pas seul sur du crème — alors la couronne est une bande sombre et les
     degrés sont TAILLÉS DEDANS en crème, exactement comme la laque
     blanche est déposée dans le PVD noir sur les trois montres. Le motif
     existe parce qu'il a deux valeurs, pas une.

     Et l'interdit tient : le repère central est deux barres et un point.
     Un repère d'assiette, jamais un aéronef. */
  --ae-instrument:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Ccircle cx='200' cy='200' r='156' fill='none' stroke='rgba(30,30,36,.085)' stroke-width='17'/%3E%3Ccircle cx='200' cy='200' r='156' fill='none' stroke='%23FAF8F5' stroke-width='17' stroke-dasharray='1.60 12.01' stroke-dashoffset='0.80'/%3E%3Ccircle cx='200' cy='200' r='156' fill='none' stroke='%23FAF8F5' stroke-width='21' stroke-dasharray='3.40 78.28' stroke-dashoffset='1.70'/%3E%3Ccircle cx='200' cy='200' r='139' fill='none' stroke='rgba(30,30,36,.15)' stroke-width='11' stroke-dasharray='3.00 69.78' stroke-dashoffset='1.50'/%3E%3Cpath d='M48 200h110M242 200h110' stroke='rgba(30,30,36,.20)' stroke-width='2.2'/%3E%3Cpath d='M154 172h92M176 144h48M154 116h92M176 88h48M154 228h92M176 256h48M154 284h92M176 312h48' stroke='rgba(30,30,36,.14)' stroke-width='1.8'/%3E%3Cpath d='M158 200h28M214 200h28' stroke='rgba(30,30,36,.30)' stroke-width='3'/%3E%3Ccircle cx='200' cy='200' r='2.6' fill='rgba(30,30,36,.30)'/%3E%3C/svg%3E");
}

/* ── La fiche ─────────────────────────────────────────────────────────── */
body[data-univers="aero"] .fiche-achat h1{position:relative;padding-bottom:18px}
body[data-univers="aero"] .fiche-achat h1::after{
  content:'';position:absolute;left:0;bottom:0;width:200px;height:10px;
  background:var(--ae-horizon)}

/* La graduation : des traits de deux longueurs, un long tous les cinq.
   Aucune des trois fiches n'ayant de `.fiche-marque`, elle se pose sur les
   caractéristiques ; la règle sur la marque reste pour plus tard. */
body[data-univers="aero"] .fiche-marque{color:var(--encre);font-weight:600;
  display:flex;align-items:flex-end;gap:12px;padding-left:0;letter-spacing:.24em}
body[data-univers="aero"] .fiche-marque::before,
body[data-univers="aero"] .fiche-points::before{
  content:'';width:72px;height:10px;
  background:
    repeating-linear-gradient(90deg,var(--ae-noir) 0 1px,transparent 1px 5px) bottom/100% 4px no-repeat,
    repeating-linear-gradient(90deg,var(--ae-noir) 0 1px,transparent 1px 25px) bottom/100% 9px no-repeat}
body[data-univers="aero"] .fiche-points{position:relative;padding-top:26px}
body[data-univers="aero"] .fiche-points::before{position:absolute;left:0;top:2px}

body[data-univers="aero"] .fiche-points li::before{background:var(--ae-noir)}
body[data-univers="aero"] .fiche-dispo::before{background:var(--ae-noir)}

/* Le fond de la galerie : l'horizon, à peine.
   ⚠️ `width:auto` : la feuille des fiches donne déjà un `::before` de
   3 000 px à la galerie (l'embûche des cinq univers précédents). */
body[data-univers="aero"] .fiche-galerie{isolation:isolate}
body[data-univers="aero"] .fiche-galerie::before{
  content:'';position:absolute;inset:0;width:auto;height:auto;overflow:hidden;
  z-index:0;pointer-events:none;
  background:var(--ae-instrument) center 46% / min(620px,72%) auto no-repeat}
body[data-univers="aero"] .fiche-galerie > *{position:relative;z-index:1}

body[data-univers="aero"] .fiche-paiement{border-left:3px solid var(--ae-noir)}
body[data-univers="aero"] .fiche-paiement-mens b{color:inherit}
body[data-univers="aero"] .fiche-paiement-durees button[aria-pressed="true"]{
  background:var(--ae-noir);border-color:var(--ae-noir);color:#fff}
body[data-univers="aero"] .fiche-actions .btn-plein{position:relative;overflow:hidden}
body[data-univers="aero"] .fiche-actions .btn-plein::before{
  content:'';position:absolute;left:0;right:0;top:0;height:8px;
  background:var(--ae-horizon-clair)}

body[data-univers="aero"] #fiche-specs .spec-bloc .plus{color:var(--ae-noir)}
body[data-univers="aero"] .fiche-serie b{color:var(--ae-noir)}

/* ── Le bas de page ───────────────────────────────────────────────────── */
body[data-univers="aero"] .fiche-recit{position:relative;isolation:isolate}
body[data-univers="aero"] .fiche-recit::before{
  content:'';position:absolute;inset:0;width:auto;height:auto;z-index:-1;
  pointer-events:none;opacity:.55;
  background:var(--ae-instrument) center center / min(480px,46%) auto no-repeat}
body[data-univers="aero"] .fiche-recit h2,
body[data-univers="aero"] .fiche-recit h3{position:relative;padding-left:17px}
body[data-univers="aero"] .fiche-recit h2::before,
body[data-univers="aero"] .fiche-recit h3::before{
  content:'';position:absolute;left:0;top:.42em;height:3px;width:11px;
  background:var(--ae-noir)}
body[data-univers="aero"] .fiche-recit .sur{color:var(--ae-noir);font-weight:600}
body[data-univers="aero"] .fiche-accessoires .prod-prix{color:var(--encre);font-weight:600}
/* ⚠️ Pas de `position:relative` sur `.fiche-barre` : elle est `fixed`. */
body[data-univers="aero"] .fiche-barre::before{
  content:'';position:absolute;left:0;right:0;top:0;height:8px;width:auto;
  background:var(--ae-horizon-clair)}
body[data-univers="aero"] .svc-grid > * strong,
body[data-univers="aero"] .svc-grid > * b{color:var(--ae-noir)}
body[data-univers="aero"] .fiche-illustr-bloc:last-child .sur{color:var(--ae-noir)}

/* ── La page de collection (37) ───────────────────────────────────────── */
/* Le voile va presque au noir : ces trois montres sont noires, la photo
   doit l'être aussi. */
body[data-univers="aero"] .coll-ouverture.photo::before{
  background:linear-gradient(90deg,rgba(14,14,17,.93) 0%,rgba(14,14,17,.66) 46%,rgba(14,14,17,.10) 100%)}
body[data-univers="aero"] .coll-ouverture .sur{color:var(--ae-blanc)}
body[data-univers="aero"] .coll-ouverture h1{position:relative;padding-bottom:20px}
body[data-univers="aero"] .coll-ouverture h1::after{
  content:'';position:absolute;left:0;bottom:0;width:min(290px,62%);height:11px;
  background:var(--ae-horizon-clair)}
body[data-univers="aero"] .coll-accroche{color:rgba(252,252,252,.82)}
body[data-univers="aero"] .coll-meta span+span::before{background:var(--ae-blanc)}
body[data-univers="aero"] .coll-ouverture.photo::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:8px;z-index:3;
  background:var(--ae-horizon)}
body[data-univers="aero"] .puce.on{
  background:var(--ae-noir);border-color:var(--ae-noir);color:#fff}

/* Le texte de bas de page s'ouvre sur la graduation. */
body[data-univers="aero"] .coll-texte{position:relative;padding-top:clamp(28px,4vw,52px)}
body[data-univers="aero"] .coll-texte::before{
  content:'';position:absolute;top:0;left:var(--gouttiere);width:120px;height:10px;
  background:
    repeating-linear-gradient(90deg,var(--ae-noir) 0 1px,transparent 1px 5px) bottom/100% 4px no-repeat,
    repeating-linear-gradient(90deg,var(--ae-noir) 0 1px,transparent 1px 25px) bottom/100% 9px no-repeat}

/* Au survol, l'horizon se déroule sur la tranche du visuel. */
body[data-univers="aero"] #coll-grille .prod .prod-img{position:relative}
body[data-univers="aero"] #coll-grille .prod .prod-img::after{
  content:'';position:absolute;left:0;right:0;top:0;height:8px;z-index:2;
  background:var(--ae-horizon);transform:scaleX(0);transform-origin:left;
  transition:transform .42s var(--ease)}
body[data-univers="aero"] #coll-grille .prod:hover .prod-img::after,
body[data-univers="aero"] #coll-grille .prod:focus-visible .prod-img::after{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){
  body[data-univers="aero"] #coll-grille .prod .prod-img::after{transition:none}
}
/* ═══ fin AÉRO ═══ */