/* ─────────────────────────────────────────────────────────────
   B.R.M — prototype de site marchand
   Feuille commune : jetons, header, menu latéral, cartes,
   bandeaux, pied de page. Structure calquée sur les codes du
   secteur, contenu et visuels B.R.M réels.
   ───────────────────────────────────────────────────────────── */

/* ── Le passage d'une page à l'autre ─────────────────────────
   Le site compte sept cent seize pages statiques. Sans rien, chaque
   clic donne le clignotement blanc du rechargement ; avec cette règle,
   les navigateurs qui la gèrent fondent l'ancienne page dans la
   nouvelle. Les navigateurs qui l'ignorent naviguent comme avant —
   c'est du confort, jamais une dépendance.

   L'en-tête, le bandeau et le pied portent un nom de transition : ils
   sont identiques d'une page à l'autre, et sans nom ils fondraient
   eux aussi, c'est-à-dire qu'ils clignoteraient à chaque clic. Nommés,
   ils restent simplement en place pendant que le corps change. */
@view-transition { navigation: auto; }
::view-transition-old(root){ animation:vt-sortie .16s ease both }
::view-transition-new(root){ animation:vt-entree .26s var(--ease) both }
@keyframes vt-sortie{ to{ opacity:0 } }
@keyframes vt-entree{ from{ opacity:0; transform:translateY(6px) } }
@media(prefers-reduced-motion:reduce){ @view-transition { navigation: none } }

:root{
  /* — Couleurs — */
  --noir:#0B0B0D; --charbon:#131316; --graphite:#1C1C21; --fumee:#2A2A31;
  --papier:#FFFFFF; --creme:#F4F2EF; --sable:#EBE8E3; --trait:#E3E0DB;
  --encre:#111114;
  /* Les deux gris de texte ont été assombris : #6E727B et #9AA0A8 donnaient
     4,3 et 2,4 de contraste sur nos fonds crème, très en dessous des 4,5
     exigés pour un texte courant — cinq cent soixante et onze défauts de
     lisibilité relevés sur le site tenaient à ces deux valeurs. Les nouvelles
     restent dans la même famille bleu-gris et gardent l'écart de hiérarchie
     entre le texte secondaire et les libellés en capitales.
        --encre-doux       7,1 sur blanc · 6,4 sur crème
        --encre-tres-doux  5,2 sur blanc · 4,7 sur crème */
  --encre-doux:#55585F; --encre-tres-doux:#686D75;
  --laque:#C8102E;                    /* le rouge B.R.M — accent unique du site */
  /* Le même rouge, éclairci pour le TEXTE posé sur un aplat sombre : sur
     l'encre, #C8102E ne donne que 3,3 de contraste, en dessous des 4,5
     qu'un libellé de onze pixels réclame. On ne touche pas à `--laque`
     lui-même : trente-quatre aplats s'en servent, et changer le rouge de
     la maison pour un défaut de lisibilité serait prendre le problème à
     l'envers. */
  --laque-lisible:#EE4A60;            /* 5,4 sur l'encre */
  --laque-doux:rgba(200,16,46,.12);

  /* — Typographie — */
  /* Anton n'a qu'une graisse, très lourde : en capitales et en petit, les
     titres devenaient des pâtés. Oswald garde le caractère condensé et
     mécanique, mais il a des graisses — on respire. */
  --display:'Oswald','Anton',Impact,'Arial Narrow',sans-serif;
  --texte:'Inter','Helvetica Neue',Arial,sans-serif;
  --t-xxl:clamp(2.6rem,7.2vw,6.4rem);
  --t-xl:clamp(2rem,4.8vw,3.8rem);
  --t-l:clamp(1.65rem,3.4vw,2.7rem);
  --t-m:clamp(1.25rem,2.2vw,1.7rem);
  --micro:.68rem;                      /* sur-titres et libellés capitales */
  --piste:.22em;                       /* interlettrage des capitales */

  /* — Rythme — */
  --header:78px;
  --gouttiere:clamp(18px,2.4vw,40px);
  --section:clamp(64px,9vw,132px);
  --max:1760px;

  /* — Mouvement — */
  --ease:cubic-bezier(.22,.61,.36,1);
  --lent:.8s var(--ease);
}

/* ── Les sections sombres redéfinissent les gris de texte ────
   `--encre-doux` et `--encre-tres-doux` disent un rôle — « texte
   secondaire », « libellé » — et non une couleur. Sur le papier, ce
   rôle est un gris foncé ; sur un aplat d'encre, c'est un blanc
   atténué. Tant qu'une seule valeur servait aux deux, le texte
   secondaire des bandeaux noirs tombait à 2,6 de contraste : lisible
   pour qui sait déjà ce qui est écrit, illisible pour les autres.

   Les deux jetons ne servent qu'à peindre du texte et quelques filets
   (vérifié : aucun aplat de couleur ne les emploie hors de ces
   sections), leur redéfinition est donc sans effet de bord.

   La liste ci-dessous est celle des sections réellement sombres,
   relevée à l'exécution sur dix-huit pages. Une section sombre qui
   naîtrait plus tard s'ajoute ici, ou porte la classe `.sombre`.

   Une réserve : une section sombre peut contenir une carte claire. La
   liste ne retient donc que les sections sombres **de part en part** —
   celles où aucun encart blanc ne vient se poser. Les autres gardent
   les jetons du papier et se corrigent une par une. */
:is(footer, .sombre, .ruban, .revendeurs, .doc-bande, .event,
    .coll-ouverture, .coll-infos, .coll-encart, .fiche-recit, .fiche-edito,
    .mm-cfg, .mp-simu){
  --encre-doux:rgba(255,255,255,.74);
  --encre-tres-doux:rgba(255,255,255,.56);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip;-webkit-text-size-adjust:100%}
body{background:var(--papier);color:var(--encre);font-family:var(--texte);font-size:16px;
  line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--laque);color:#fff}
:focus-visible{outline:2px solid var(--laque);outline-offset:3px}

/* Un en-tête fixe recouvre la cible d'une ancre : on réserve sa hauteur
   pour que « #garantie » arrive sous le bandeau et non dessous. */
[id]{scroll-margin-top:calc(var(--header) + 22px)}
/* `pretty` évite le mot seul en fin de paragraphe ; `balance` est déjà
   posé sur les titres, où c'est l'équilibre des lignes qui compte. */
p,li,dd,figcaption{text-wrap:pretty}

/* Sur un très petit écran — un iPhone SE en fait encore 320 — un bouton
   qui refuse de couper ses lignes déborde de la page. « Ajouter une
   adresse » mesure 282 pixels à lui seul. On lui rend le droit de passer
   à la ligne : deux lignes centrées valent mieux qu'un mot coupé par le
   bord de l'écran. */
@media(max-width:380px){
  /* Rien ne dépasse de la page sur un écran de 320 : un bouton, un champ ou
     une étiquette qui déborde n'est pas signalé par une barre de défilement
     — `overflow-x:clip` le rogne en silence, et le client ne sait pas qu'il
     lui manque un mot. */
  .btn,input,select,textarea,label{max-width:100%}
}

/* ── Aller au contenu ────────────────────────────────────────
   Le lien est posé par site.js, en tête de page : au clavier, la
   première tabulation doit permettre de sauter le menu, sur les sept
   cent seize pages, sans toucher à leur HTML. */
.saut-contenu{position:fixed;top:10px;left:10px;z-index:200;
  background:var(--encre);color:#fff;padding:14px 20px;min-height:46px;
  display:inline-flex;align-items:center;font-size:.78rem;
  letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  transform:translateY(-160%);transition:transform .2s var(--ease)}
.saut-contenu:focus{transform:none}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gouttiere)}
.bandeau-proto{background:var(--laque);color:#fff;view-transition-name:bandeau;font-size:.72rem;letter-spacing:.04em;
  text-align:center;padding:8px 16px;font-weight:500;position:relative;z-index:70}
@media(max-width:640px){.bandeau-proto{font-size:0.66rem;padding:6px 12px;line-height:1.4}}
/* Retiré de l'écran le 18/09/2026, demande de François : le site approche de
   la mise en ligne et ce bandeau d'avertissement n'a plus lieu d'être en tête
   de chaque page. Le balisage reste — `produire-site.sh` le supprime pour de
   bon dans la version de production, et il suffit de retirer cette règle pour
   le faire revenir sur le prototype. L'en-tête n'en dépend pas : il est fixé
   à `top:0` et le bandeau ne faisait que défiler devant lui. */
.bandeau-proto{display:none}

/* Grain discret pour casser les aplats sombres */
.grain{position:relative}
.grain::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.22;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}

/* ── Micro-libellés ──────────────────────────────────────── */
.sur,.micro{font-size:var(--micro);letter-spacing:var(--piste);text-transform:uppercase;
  font-weight:600}

/* ── Boutons ─────────────────────────────────────────────── */
/* Le remplissage monte depuis le bas : dégradé en deux moitiés dont on
   déplace la position, plutôt qu'un pseudo-élément qui passerait devant
   le texte. */
.btn{display:inline-flex;align-items:center;gap:11px;padding:15px 30px;font-size:.71rem;
  letter-spacing:.18em;text-transform:uppercase;font-weight:600;border:1px solid transparent;
  /* Le libellé revient à la ligne plutôt que de sortir de la page : un bouton
     ne déborde jamais, quelle que soit la largeur de la colonne qui l'accueille.
     Tant qu'il y a la place, rien ne change — un texte qui tient ne se coupe pas. */
  white-space:normal;text-align:center;line-height:1.3;max-width:100%;
  cursor:pointer;background-size:100% 200%;background-position:0 0;
  transition:background-position .42s var(--ease),color .32s var(--ease),
             border-color .32s var(--ease)}
.btn::after{content:'→';font-size:.9em;transform:translateX(-3px);opacity:.7;
  transition:transform .35s var(--ease),opacity .35s var(--ease)}
.btn-plein{color:#fff;background-image:linear-gradient(to top,var(--laque) 50%,var(--encre) 50%)}
.btn-ligne{color:var(--encre);border-color:var(--encre);
  background-image:linear-gradient(to top,var(--encre) 50%,transparent 50%)}
.btn-clair{color:var(--noir);background-image:linear-gradient(to top,var(--laque) 50%,#fff 50%)}
.btn-clair-ligne{color:#fff;border-color:rgba(255,255,255,.42);
  background-image:linear-gradient(to top,#fff 50%,transparent 50%)}
/* Le remplissage est réservé aux pointeurs qui survolent VRAIMENT. Au doigt,
   `:hover` se pose sur le bouton touché et n'en repart jamais : le bouton
   restait rempli de rouge après l'appui, et on surprenait la montée du
   dégradé à mi-course — un empilement de rectangles qui n'a l'air de rien.
   C'est la règle déjà appliquée au liseré des cartes ; les boutons l'avaient
   manquée. */
@media(hover:hover){
  .btn:hover::after{transform:translateX(3px);opacity:1}
  .btn:hover{background-position:0 100%}
  .btn-ligne:hover{color:#fff}
  .btn-clair:hover{color:#fff}
  .btn-clair-ligne:hover{color:var(--noir);border-color:#fff}
}
/* Le doigt garde sa réponse : le remplissage se fait pendant l'appui, et se
   défait quand on relâche. `:active` ne colle pas, lui. */
.btn:active{background-position:0 100%}
.btn-ligne:active,.btn-clair:active{color:#fff}
.btn-clair-ligne:active{color:var(--noir);border-color:#fff}
/* Lien souligné qui se dessine */
.lien-trait{position:relative;font-size:var(--micro);letter-spacing:var(--piste);
  text-transform:uppercase;font-weight:600;padding-bottom:4px}
.lien-trait::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:currentColor;transform:scaleX(1);transform-origin:right;
  transition:transform .4s var(--ease)}
.lien-trait:hover::after{transform:scaleX(0)}

/* ── Header ──────────────────────────────────────────────── */
/* Le header flotte AU-DESSUS de la page. En haut, il ne pose pas de barre :
   un dégradé blanc s'efface vers le bas, assez pour que le texte sombre reste
   lisible sur n'importe quelle photo, assez peu pour qu'on ne voie pas de
   bandeau. Dès qu'on défile, il se pose en verre dépoli. */
.entete{position:fixed;top:0;left:0;right:0;z-index:60;view-transition-name:entete;
  background:linear-gradient(to bottom,rgba(255,255,255,.92) 0%,
    rgba(255,255,255,.72) 55%,rgba(255,255,255,0) 100%);
  /* Le dégradé est dimensionné sur la boîte de padding et peint jusqu'au
     bord de la bordure : le pixel en trop le REPRENAIT à son début, donc
     à 92 % de blanc — c'est le trait clair qui coupait le haut des pages.
     On l'origine sur la bordure et on interdit la répétition. */
  background-origin:border-box;background-repeat:no-repeat;background-size:100% 100%;
  backdrop-filter:none;border-bottom:1px solid transparent;
  transition:background .45s var(--ease),border-color .45s var(--ease),
             box-shadow .45s var(--ease),backdrop-filter .45s var(--ease)}
.entete.pose{background:rgba(255,255,255,.94);backdrop-filter:blur(18px) saturate(1.5);
  border-bottom-color:var(--trait);box-shadow:0 1px 24px rgba(11,11,13,.07)}
/* Le bandeau du prototype défile avec la page : site.js cale le header sous
   ce qu'il en reste à l'écran, et il remonte à zéro quand le bandeau est passé. */
/* Les pages dont la première section n'est pas un visuel plein cadre
   réservent la hauteur du header — sinon leur contenu passerait dessous.
   La classe est posée par site.js, qui regarde ce qui suit le header. */
/* La réserve est déclarée ici pour la lecture, et **redéclarée en fin de
   feuille** : `site.js` la pose sur l'élément qui suit l'en-tête, quel
   qu'il soit, et cet élément peut avoir sa propre règle de marge plus bas
   dans la feuille — `.ariane` emploie `padding-block`, qui écrase alors la
   réserve et fait passer le fil d'Ariane sous l'en-tête flottant. */
.entete-reserve{padding-top:var(--header)}
.entete-in{max-width:var(--max);margin-inline:auto;padding-inline:var(--gouttiere);
  height:var(--header);display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:14px}
.entete-g,.entete-d{display:flex;align-items:center;gap:26px}
.entete-d{justify-content:flex-end}
.entete a,.entete button{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:500;color:var(--encre);display:inline-flex;align-items:center;gap:8px;
  position:relative;transition:color .25s var(--ease)}
.entete a::after,.entete button:not([data-menu])::after{content:'';position:absolute;left:0;
  bottom:-5px;width:100%;height:1px;background:currentColor;transform:scaleX(0);
  transform-origin:left;transition:transform .35s var(--ease)}
.entete a:hover::after,.entete button:not([data-menu]):hover::after{transform:scaleX(1)}
.entete a:hover,.entete button:hover{color:var(--laque)}
/* Le logo est le cartouche B.R.M lui-même : version noire sur fond clair,
   lettrage détouré sur fond sombre. */
/* Le logo est celui du Hub, au fichier près : le cartouche officiel, cadre
   compris. Il n'est donc plus tracé en CSS — le dessiner à côté de l'image
   revenait à redessiner ce que la maison a déjà dessiné, et les
   proportions ne tombaient jamais tout à fait juste.
   Deux fichiers, un par fond : `logo-brm-hub.jpg` pose le cartouche noir
   sur les fonds clairs ; `logo-brm-hub-clair.png` en est la version
   évidée — cadre et lettrage blancs, intérieur transparent — pour les
   fonds sombres. */
/* Le fichier du Hub porte le cartouche — pavé noir, lettrage blanc — mais
   pas de trait autour : posé sur un en-tête blanc, il se lit comme une
   tache, pas comme une plaque. On trace donc le contour ici, en
   `currentColor` : noir sur l'en-tête clair, blanc dans le pied de page
   sombre, sans exiger un troisième fichier. La marge blanche que porte
   déjà le fichier fait l'espace entre le trait et le pavé. */
.logo{--logo-h:46px;display:inline-flex;align-items:center;line-height:0;
  border:max(1.5px, calc(var(--logo-h) * .04)) solid currentColor}
.logo img{height:var(--logo-h);width:auto}
.foot-haut .logo{--logo-h:64px}
.tiroir-haut .logo{--logo-h:34px}
@media(max-width:640px){.logo{--logo-h:38px}}
@media(max-width:420px){.logo{--logo-h:34px}}
.pastille{background:var(--laque);color:#fff;width:17px;height:17px;border-radius:50%;
  display:grid;place-items:center;font-size:0.66rem;font-weight:600;letter-spacing:0}
.burger{display:inline-flex;flex-direction:column;gap:4px;width:20px}
.burger i{display:block;height:1.5px;background:currentColor;transition:transform .3s var(--ease)}
.entete button[data-menu]:hover .burger i:first-child{transform:translateX(3px)}
.entete button[data-menu]:hover .burger i:last-child{transform:translateX(-3px)}

/* Sélecteur de langue : deux drapeaux, pas de texte */
.drapeaux{display:flex;gap:8px;align-items:center}
.drapeaux button{width:24px;height:16px;padding:0;opacity:.4;overflow:hidden;
  box-shadow:0 0 0 1px rgba(17,17,20,.18);transition:opacity .25s var(--ease)}
.drapeaux button svg{width:100%;height:100%;display:block}
.drapeaux button:hover{opacity:.8}
.drapeaux button.on{opacity:1;box-shadow:0 0 0 1px var(--encre)}
.drapeaux button::after{display:none}
/* Jauge de lecture */
.jauge{position:absolute;left:0;bottom:-1px;height:2px;background:var(--laque);width:0;
  transition:width .12s linear}
/* « Mon compte » : le lien d'en-tête se cachait sous 1024 px parce que le
   tiroir en portait un. Le bas du tiroir a été retiré le 18/09/2026 — il ne
   reste donc AUCUN accès au compte sur téléphone, et le pied de page n'en
   porte pas. Le lien d'en-tête reste visible : mesuré de 320 à 768 px, il
   tient sans faire déborder la barre. */
@media(max-width:1024px){.entete .masq-md{display:inline-flex;align-items:center}}
@media(max-width:400px){.entete .masq-md{font-size:.62rem;letter-spacing:.08em}}
@media(max-width:640px){
  .entete .masq-sm{display:none}
  .entete-g,.entete-d{gap:18px}
  .entete a,.entete button{font-size:0.66rem;letter-spacing:.12em}
  .logo{font-size:1.4rem}
}
@media(max-width:420px){
  .entete .masq-xs{display:none}
  .entete-in{gap:10px}
  .entete-g,.entete-d{gap:12px}
}
/* Sur les plus petits écrans, les deux boutons de gauche réclament leurs
   44 px de cible chacun : à 320, la colonne ne les tenait pas et ils
   passaient SOUS le logo — l'un des deux devenait invisible au doigt.
   On rend la place en rétrécissant le cartouche et l'écart. */
@media(max-width:360px){
  .logo{--logo-h:30px}
  .entete-g{gap:6px}
}

/* ── Menu latéral droit ──────────────────────────────────── */
.voile{position:fixed;inset:0;background:rgba(11,11,13,.5);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s;z-index:80}
.voile.on{opacity:1;visibility:visible}
.tiroir{position:fixed;top:0;left:0;bottom:0;width:min(460px,100%);background:#fff;z-index:90;
  transform:translateX(-100%);transition:transform .5s var(--ease);
  display:flex;flex-direction:column;overflow:hidden}
.tiroir.on{transform:none}
.tiroir-haut{height:var(--header);display:flex;align-items:center;justify-content:space-between;
  padding-inline:26px;border-bottom:1px solid var(--trait);flex:0 0 auto}
.tiroir-haut .logo{font-size:1.3rem;text-align:left}
.tiroir-fermer{font-size:var(--micro);letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;display:inline-flex;align-items:center;gap:9px;transition:color .25s}
.tiroir-fermer:hover{color:var(--laque)}
/* Le contenu dépasse la hauteur d'un écran de portable : il défile. On
   resserre le rythme pour qu'il tienne le plus souvent d'un coup, et on
   pose un dégradé en bas — sans lui, la dernière entrée coupée en deux se
   lit comme un défaut de mise en page, pas comme « ça continue ». */
.tiroir-corps{flex:1;overflow-y:auto;padding-bottom:26px;overscroll-behavior:contain;
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 36px),transparent 100%);
  mask-image:linear-gradient(to bottom,#000 calc(100% - 36px),transparent 100%)}
.bloc>button{width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:15px 26px;font-family:var(--display);font-weight:500;font-size:1.15rem;
  text-transform:uppercase;letter-spacing:.07em;text-align:left;border-bottom:1px solid var(--trait);
  transition:color .25s var(--ease),padding-left .35s var(--ease)}
.bloc>button:hover{color:var(--laque);padding-left:32px}
.bloc>button .plus{font-family:var(--texte);font-size:1.15rem;font-weight:200;
  transition:transform .35s var(--ease)}
.bloc.ouvert>button .plus{transform:rotate(135deg)}
.bloc-contenu{display:none;padding:14px 26px 20px;background:var(--creme);
  border-bottom:1px solid var(--trait)}
.bloc.ouvert .bloc-contenu{display:block;animation:deroule .4s var(--ease)}
@keyframes deroule{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.bloc-contenu h5{font-size:0.66rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--encre-tres-doux);margin:20px 0 10px;font-weight:600}
.bloc-contenu h5:first-child{margin-top:0}
.bloc-contenu li{margin-bottom:8px}
.bloc-contenu a{font-size:.95rem;font-weight:300;transition:color .2s,padding-left .3s var(--ease);
  display:inline-block}
.bloc-contenu a:hover{color:var(--laque);padding-left:6px}
.tiroir-lien{display:block;padding:15px 26px;font-family:var(--display);font-weight:500;
  font-size:1.15rem;text-transform:uppercase;letter-spacing:.07em;border-bottom:1px solid var(--trait);
  transition:color .25s var(--ease),padding-left .35s var(--ease)}
.tiroir-lien:hover{color:var(--laque);padding-left:32px}
.tiroir-bas{padding:18px 26px 6px}
.tiroir-bas a{display:block;font-size:.85rem;font-weight:300;color:var(--encre-doux);padding:6px 0;
  transition:color .2s}
.tiroir-bas a:hover{color:var(--encre)}

/* ── Cartes produit ──────────────────────────────────────── */
.prod{display:flex;flex-direction:column;text-align:center;position:relative}
/* Pas de grille. C'est le même piège que les vignettes du menu et que les
   accessoires : dans une grille, la piste implicite reste dimensionnée en
   `auto`, un `height`/`max-height` en pourcentage ne s'y résout pas, et l'image
   retombe sur sa hauteur naturelle — décentrée dans son cadre, et rognée par
   l'`overflow`. Une boîte simple suffit : le pourcentage se résout sur elle, et
   `object-fit:contain` fait le centrage. */
.prod-img{position:relative;background:var(--creme);aspect-ratio:1;
  padding:5%;overflow:hidden}
/* `--cadrage` : la correction de cadrage de CETTE photo, posée par
   `site.js`. Les packshots de la boutique ne sont pas tous shootés au même
   éloignement — douze pour cent d'entre eux serrent le sujet sur toute la
   hauteur du fichier quand les autres lui laissent un cinquième de marge,
   et la même montre paraissait alors un quart plus grosse que sa voisine.
   Le facteur remet chaque sujet à la taille de la majorité. Vaut 1 pour
   les images déjà dans la norme, donc pour neuf sur dix. */
.prod-img img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;
  transform:scale(var(--cadrage,1));
  transition:transform .85s var(--ease)}
.prod:hover .prod-img img{transform:scale(calc(var(--cadrage,1) * 1.1)) translateY(-2%)}
.etiq{position:absolute;top:14px;left:14px;display:flex;gap:6px;flex-wrap:wrap;max-width:80%;z-index:2}
.etiq b{background:var(--laque);color:#fff;font-size:0.66rem;letter-spacing:.16em;
  text-transform:uppercase;font-weight:600;padding:5px 9px}
.etiq b.sobre{background:var(--encre)}
.prod-marque{font-size:0.66rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--encre-tres-doux);margin-top:20px}
/* Sur les cartes où la marque a sauté — elle ne disait que « B.R.M » —,
   c'est le nom qui reprend l'écart au visuel. */
.prod-img + .prod-nom{margin-top:20px}
.prod-nom{font-family:var(--display);font-weight:500;font-size:1.02rem;text-transform:uppercase;
  line-height:1.2;margin-top:8px;letter-spacing:.05em;display:inline-block;position:relative}
/* Le soulignement rouge du nom est retiré : au survol, la carte montrait DEUX
   traits rouges — celui-ci et celui du pied de cartouche. Un seul suffit, et
   c'est celui du bas qui souligne la carte entière. */
.prod-spec{font-size:.78rem;color:var(--encre-doux);font-weight:300;margin-top:8px}
.prod-prix{font-size:.9rem;margin-top:12px;font-weight:500}
.prod-gravable{font-size:0.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--encre-tres-doux);margin-top:10px}

/* ── Titres de section ───────────────────────────────────── */
section{padding-block:var(--section)}
.titre-centre{text-align:center;margin-bottom:clamp(32px,4vw,58px)}
.titre-centre .sur{color:var(--encre-tres-doux);margin-bottom:14px}
.titre-centre h2{font-family:var(--display);font-weight:600;font-size:var(--t-l);
  text-transform:uppercase;line-height:1.04;letter-spacing:.02em;text-wrap:balance}
.titre-centre p{color:var(--encre-doux);max-width:58ch;margin:16px auto 0;font-weight:300}
.sous-cta{text-align:center;margin-top:clamp(28px,3.4vw,46px)}

/* ── Bandeau défilant ────────────────────────────────────── */
.ruban{background:var(--encre);color:#fff;overflow:hidden;padding-block:15px;
  border-block:1px solid var(--encre)}
.ruban-piste{display:flex;gap:0;width:max-content;animation:defile 34s linear infinite}
.ruban:hover .ruban-piste{animation-play-state:paused}
.ruban span{font-family:var(--display);font-size:1.05rem;text-transform:uppercase;
  letter-spacing:.1em;padding-inline:26px;display:inline-flex;align-items:center;gap:26px;
  white-space:nowrap}
.ruban span::after{content:'';width:5px;height:5px;background:var(--laque);flex:0 0 auto}
@keyframes defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ruban-piste{animation:none}}

/* ── Bandeau revendeurs ──────────────────────────────────── */
.revendeurs{background:var(--charbon);color:#fff;padding-block:clamp(40px,5vw,64px)}
.revendeurs .wrap{display:flex;align-items:center;justify-content:space-between;gap:26px;
  flex-wrap:wrap}
.revendeurs h3{font-family:var(--display);font-weight:500;font-size:var(--t-m);
  text-transform:uppercase;line-height:1.14;letter-spacing:.03em;max-width:24ch}

/* ── Réassurance ─────────────────────────────────────────── */
.svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--trait);
  border-block:1px solid var(--trait)}
@media(max-width:760px){.svc-grid{grid-template-columns:minmax(0,1fr)}}
.svc{background:#fff;padding:clamp(26px,3vw,40px) clamp(20px,2.4vw,32px);text-align:center;
  transition:background .35s var(--ease)}
.svc:hover{background:var(--creme)}
/* Les trois promesses se lisaient en trois pavés de texte identiques :
   rien ne les distinguait à l'œil. Un pictogramme au trait par promesse
   donne à chacune sa silhouette — on reconnaît la ligne avant de la lire. */
.svc-ico{display:block;margin:0 auto 14px;width:30px;height:30px;color:var(--laque)}
.svc-ico svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor;
  stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.svc:hover .svc-ico{color:var(--encre)}
.svc-ico,.svc:hover .svc-ico{transition:color .3s var(--ease)}
.svc h4{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600}
.svc p{color:var(--encre-doux);font-size:.86rem;font-weight:300;margin-top:10px}

/* ── Fil d'Ariane ────────────────────────────────────────── */
.ariane{font-size:.72rem;color:var(--encre-tres-doux);font-weight:300;padding-block:24px}
.ariane a{transition:color .2s}
.ariane a:hover{color:var(--encre)}
.ariane span{margin-inline:9px;opacity:.45}

/* Ce bloc vivait dans `fiches.css`, que l'accueil ne charge pas : `fiches.js`
   y greffait donc la piste et ses feuillets sur les cartes du carrousel
   « Découvrez notre univers », mais rien ne les habillait — `display:contents`
   partout, aucune zone défilable, aucun point. La carte est un composant du
   site, pas de la fiche : son habillage appartient ici, où toutes les pages
   le trouvent. */
/* ═══════════════════════════════════════════════════════════
   LE FEUILLETAGE DES CARTES PRODUIT
   ═══════════════════════════════════════════════════════════

   Une carte montrait un packshot et rien d'autre. Elle montre
   maintenant les vues choisies du tour photographique, ou les photos
   d'ambiance quand il n'y a pas de tour.

   Au repos, la piste est un `display:contents` : elle n'existe pas
   comme boîte, la carte est exactement celle d'avant, et rien n'est
   chargé. `fiches.js` pose `.feuillete` au premier signe d'intérêt —
   la piste devient alors une bande qui défile.

   Le défilement est celui du navigateur, avec accrochage. C'est lui
   qui sait si un geste est horizontal ou vertical, et le visiteur qui
   descend la page descend la page.
   ═══════════════════════════════════════════════════════════ */

.prod-piste{display:contents}

.prod-img.feuillete > .prod-piste{
  display:flex;width:100%;height:100%;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  /* le feuilletage ne doit jamais entraîner la page ni le geste de retour */
  overscroll-behavior-x:contain;
  scrollbar-width:none;-ms-overflow-style:none}
.prod-img.feuillete > .prod-piste::-webkit-scrollbar{display:none}
/* Chaque visuel a son feuillet, et c'est le feuillet qui porte la
   gouttière — `fiches.js` la lui transmet en pourcentage au moment
   d'armer la carte. Le packshot retrouve ainsi au pixel près la boîte
   qu'il avait (une gouttière posée au jugé le rétrécirait de dix pour
   cent au moment même où le visiteur s'approche), et une photo
   d'ambiance, elle, peut aller d'un bord à l'autre de la carte. */
.prod-feuillet{display:contents}
.prod-img.feuillete > .prod-piste > .prod-feuillet{
  display:block;flex:0 0 100%;min-width:0;
  box-sizing:border-box;padding:var(--prod-gout,0);
  scroll-snap-align:center;scroll-snap-stop:always}
/* Chaque feuillet est la MÊME boîte que le packshot d'origine, et l'image
   s'y pose comme lui : `contain` dans toute la case, donc centrée et jamais
   débordante. Le feuillet était auparavant une grille centrée dont l'image
   gardait sa hauteur naturelle — une vue 540 × 670 dans une case carrée
   dépassait alors du quart de sa hauteur : la montre paraissait plus grosse
   que sur la première vue, et sortait du cadre par le bas. La boîte est un
   bloc et non une grille, sans quoi le `height:100%` ne se résoudrait sur
   rien (la piste étire le feuillet, la grille ne transmettait pas la
   hauteur). Les dimensions restent en attribut sur l'image : elles servent
   au navigateur à réserver la place avant le chargement. */
.prod-img.feuillete > .prod-piste > .prod-feuillet > img{
  width:100%;height:100%;max-width:100%;object-fit:contain}
/* Une photo d'ambiance n'est pas un packshot : elle va d'un bord à
   l'autre au lieu de flotter au milieu, et elle n'a rien à multiplier.
   C'est déjà la règle de la grille pour une carte en photo d'ambiance
   (`.prod-img.photo`) : on la suit, feuillet par feuillet. */
.prod-img.feuillete > .prod-piste > .prod-feuillet.ambiance{padding:0}
.prod-img.feuillete > .prod-piste > .prod-feuillet.ambiance img{
  width:100%;height:100%;max-width:none;max-height:none;
  object-fit:cover;mix-blend-mode:normal}
/* Le grossissement au survol ferait trembler l'accrochage : un élément
   transformé agrandit la zone défilable de la piste. On ne grossit donc que
   le PREMIER feuillet — le packshot, la vignette principale — et on le
   rogne à sa case (`overflow:hidden`) pour que la piste ne bouge pas. */
.prod-img.feuillete .prod-feuillet img,
.prod:hover .prod-img.feuillete .prod-feuillet img{transform:none}
.prod-img.feuillete > .prod-piste > .prod-feuillet:first-child{overflow:hidden}
/* Le packshot garde sa correction de cadrage au repos : « transform:none »
   l'annulait sur toutes les cartes feuilletées (V12 Chocolat démesurée). */
.prod-img.feuillete > .prod-piste > .prod-feuillet:first-child img{transform:scale(var(--cadrage,1))}
.prod:hover .prod-img.feuillete > .prod-piste > .prod-feuillet:first-child img{
  transform:scale(calc(var(--cadrage,1) * 1.1)) translateY(-2%)}

/* Les commandes sont HORS de la piste : dedans, elles défileraient
   avec les images. Elles couvrent le cadre carré du visuel. */
.prod-feuillets{
  /* Pas de `z-index` : il ferait de ce calque un contexte d'empilement, et
     les points, qui se dessinent en différence avec l'image, n'auraient
     plus rien sous eux à quoi se mesurer. Posé après la piste, il passe
     de toute façon devant. */
  position:absolute;inset:0;pointer-events:none}

/* Les points restent dans le visuel : le cadre est rogné, on ne peut pas
   les poser dessous. Ils sont sombres sur le crème des packshots, clairs
   sur une photo d'ambiance — `fiches.js` sait laquelle est affichée et
   pose `.sombre`. Un mélange par différence aurait fait le même travail
   tout seul, mais il vire la couleur du fond : sur une photo rouge, le
   point devenait cyan. */
.prod-points{
  position:absolute;left:0;right:0;bottom:10px;
  display:flex;justify-content:center;gap:5px}
.prod-points i{
  width:16px;height:2px;background:var(--trait);
  /* Une photo peut être claire ici et sombre trois pixels plus loin :
     l'ombre portée tient le trait lisible sans qu'on ait à deviner. */
  box-shadow:0 0 3px rgba(11,11,13,.45);
  transition:background .3s var(--ease),transform .3s var(--ease)}
.prod-points i.on{background:var(--encre);transform:scaleY(2)}
.prod-points.sombre i{background:rgba(255,255,255,.45)}
.prod-points.sombre i.on{background:#fff}

/* Les flèches reprennent celles du configurateur : un disque blanc
   discret. La CIBLE, elle, fait quarante-quatre pixels — le disque n'en
   dessine que trente-deux au milieu. Un disque de trente pixels posé à
   huit pixels du bord était juste, mais tout ce qui le manquait ouvrait
   la fiche : on cherchait une pastille dans un lien. La cible grandit,
   le dessin ne bouge pas. */
.prod-fleche{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;
  color:var(--encre);display:none;align-items:center;justify-content:center;
  cursor:pointer;pointer-events:auto;
  opacity:0;transition:opacity .2s}
.prod-fleche::before{
  content:'';position:absolute;inset:6px;border-radius:50%;
  border:1px solid var(--trait);background:rgba(255,255,255,.94);
  box-shadow:0 2px 10px rgba(11,11,13,.09);
  transition:border-color .2s,background .2s}
.prod-fleche svg{position:relative;width:15px;height:15px;display:block}
.prod-fleche.g{left:2px}
.prod-fleche.d{right:2px}
.prod-fleche:hover::before{border-color:var(--encre);background:#fff}
.prod-feuillets.au-debut .prod-fleche.g,
.prod-feuillets.a-la-fin .prod-fleche.d{opacity:0;pointer-events:none}
@media(hover:hover) and (pointer:fine){
  .prod-fleche{display:flex}
  .prod:hover .prod-fleche{opacity:1}
}
/* Au doigt, il n'y a pas de survol pour les faire paraître, et le
   glissement part mal : le geste doit être franchement horizontal, sinon
   c'est la page qui descend. Les flèches restent donc affichées, en
   retrait. Elles ne coûtent rien : une carte sans visuel supplémentaire
   n'en reçoit aucune. */
@media(hover:none){
  .prod-fleche{display:flex;opacity:.92}
}

/* Les points deviennent des cibles : on tape le troisième point, on voit
   la troisième image. La barre, elle, reste transparente au clic — large
   comme la carte, elle aurait volé la moitié des ouvertures de fiche. */
.prod-points i{position:relative;pointer-events:auto;cursor:pointer}
.prod-points i::before{content:'';position:absolute;inset:-13px -5px}

/* Lu, jamais vu. Pour un titre que la page porte déjà visuellement d'une
   autre façon — l'accueil ouvre sur un diaporama dont chaque volet a son
   propre titre, aucun ne pouvant faire office de titre de page. Le retrait
   d'un pixel et non `display:none` : ce dernier retirerait aussi le texte
   des lecteurs d'écran, ce qui viderait la mesure de son sens. */
.hors-vue{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* ── Sélecteur de langue (façon site des pendules, thème clair) ── */
.lang-drop{position:relative}
.lang-trigger{display:inline-flex;align-items:center;gap:7px;padding:6px 8px;border:1px solid transparent;
  background:none;cursor:pointer;font:inherit;color:var(--encre);transition:border-color .2s}
.lang-trigger:hover{border-color:var(--trait)}
.lang-flag{display:block;width:22px;height:15px;overflow:hidden;border:1px solid var(--trait)}
.lang-flag svg{display:block;width:100%;height:100%}
.lang-code{font-size:.72rem;letter-spacing:.12em;font-weight:600}
.lang-caret{font-size:13px;line-height:1;transform:rotate(90deg);transition:transform .2s;opacity:.5}
.lang-drop.open .lang-caret{transform:rotate(270deg)}
.lang-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:176px;background:var(--papier);
  border:1px solid var(--trait);box-shadow:0 14px 38px rgba(17,17,20,.13);padding:5px;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .2s,visibility .2s;z-index:60}
.lang-drop.open .lang-menu{opacity:1;visibility:visible;transform:none}
.lang-opt{display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;background:none;border:0;
  cursor:pointer;font:inherit;font-size:.9rem;color:var(--encre-doux);text-align:left;text-decoration:none}
.lang-opt svg{display:block;width:22px;height:15px;flex:0 0 auto;border:1px solid var(--trait)}
.lang-opt:hover{background:var(--creme);color:var(--encre)}
.lang-opt.active{color:var(--encre);font-weight:600}
.lang-opt.active::after{content:'';margin-left:auto;width:6px;height:6px;border-radius:50%;background:var(--laque)}
.tiroir-langue{display:block;padding:12px 0;font-size:.9rem;color:var(--encre-doux)}
/* Le compte descend dans le tiroir sur téléphone et tablette, et quitte
   l'en-tête où il faisait la quatrième icône d'une barre qui n'en tient
   que trois. Sur le bureau, il reste où il est et la copie dort. */
.tiroir-compte{display:none}
@media(max-width:1024px){
  .entete a[href$="compte.html"]{display:none}
  .tiroir-compte{display:block;padding:16px 26px;border-top:1px solid var(--trait);
    font-family:var(--display);font-weight:500;font-size:1.02rem;
    text-transform:uppercase;letter-spacing:.02em;color:var(--encre);
    text-decoration:none}
  .tiroir-compte:hover{color:var(--laque)}
}
@media(pointer:coarse){.lang-trigger{min-height:40px}.lang-opt{padding-block:12px}}
@media(max-width:520px){.lang-code{display:none}}

/* ── Sélecteur « pays, langue et devise » (devises.js) ────────────────
   Le déclencheur est le frère de celui de la langue ; le PANNEAU, lui,
   emprunte au volet du menu (.mm-volet) : un titre en capitales espacées,
   du crème pour les zones de service, du blanc pour la liste, et de vraies
   marges de 22 px. Il ouvre par [hidden] (pas de classe .open), avec un
   champ de recherche parce que la liste couvre 251 pays.
   Refonte 17/09/2026 : la fenêtre de 290 px coupait les noms de pays et
   collait un bloc de langues sous la liste, aussi haut qu'elle. */
.pays-drop{position:relative}
.pays-trigger{display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border:1px solid transparent;
  background:none;cursor:pointer;font:inherit;color:var(--encre);transition:border-color .2s}
.pays-trigger:hover{border-color:var(--trait)}
.pays-drop.open .pays-trigger .lang-caret{transform:rotate(270deg)}
.pays-flag{font-size:16px;line-height:1}
.pays-code{font-size:.72rem;letter-spacing:.1em;font-weight:600}
.pays-menu{position:absolute;top:calc(100% + 10px);inset-inline-end:0;width:min(540px,calc(100vw - 32px));
  background:var(--papier);border:1px solid var(--trait);box-shadow:0 18px 48px rgba(17,17,20,.16);
  z-index:60;display:flex;flex-direction:column;max-height:min(760px,calc(100vh - 130px));
  animation:paysOuvre .22s var(--ease)}
@keyframes paysOuvre{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.pays-menu[hidden]{display:none}
/* L'en-tête impose la capitale espacée à TOUS ses boutons et liens
   (`.entete a,.entete button`) : dans ce panneau, elle transformait « États
   Unis » en « ÉTATS UNIS » — illisible sur 251 lignes — et volait sa position
   absolue à la croix de fermeture. Même spécificité, plus bas dans la feuille :
   la remise à zéro l'emporte, et les règles qui suivent portent deux classes. */
.pays-menu button,.pays-menu a{font-size:inherit;letter-spacing:normal;text-transform:none;
  font-weight:inherit;position:static;color:inherit}
.pays-menu button::after,.pays-menu a::after{display:none}

/* L'en-tête : ce qu'on regarde d'abord — le titre, puis la phrase honnête
   qui dit dans quelle devise et sous quel régime la commande sera facturée. */
.pays-tete{position:relative;padding:18px 22px 14px;background:var(--creme);
  border-bottom:1px solid var(--trait);flex:0 0 auto}
.pays-titre{font-size:0.66rem;letter-spacing:.24em;text-transform:uppercase;font-weight:600;
  color:var(--encre-tres-doux);padding-inline-end:34px}
.pays-note{font-family:var(--display);font-size:1.02rem;font-weight:500;line-height:1.35;
  color:var(--encre);margin-top:9px;padding-inline-end:34px}
.pays-note[hidden]{display:none}
.pays-menu .pays-fermer{position:absolute;top:10px;inset-inline-end:12px;width:32px;height:32px;display:flex;
  align-items:center;justify-content:center;font-size:1.35rem;line-height:1;font-weight:300;
  color:var(--encre-doux);background:none;border:0;cursor:pointer;transition:color .2s}
.pays-menu .pays-fermer:hover{color:var(--laque)}

/* Le champ de recherche : la porte des 251 pays, donc visible, pas discret. */
.pays-champ{position:relative;flex:0 0 auto;padding:14px 22px;border-bottom:1px solid var(--trait)}
.pays-loupe{position:absolute;inset-inline-start:34px;top:50%;transform:translateY(-50%);width:17px;height:17px;
  color:var(--encre-tres-doux);pointer-events:none}
.pays-rech{width:100%;padding:11px 12px 11px 38px;border:1px solid var(--trait);background:var(--papier);
  font:inherit;font-size:.95rem;color:var(--encre);border-radius:0}
.pays-rech::placeholder{color:var(--encre-tres-doux)}
.pays-rech:focus{outline:2px solid var(--laque);outline-offset:-2px}
.pays-rech::-webkit-search-cancel-button{cursor:pointer}

/* La liste : une ligne = un pays, sa ou ses langues, sa monnaie. */
.pays-liste{list-style:none;margin:0;padding:6px 0;flex:1 1 auto;min-height:0;
  max-height:min(56vh,430px);overflow-y:auto;overscroll-behavior:contain}
.pays-liste::-webkit-scrollbar{width:4px}
.pays-liste::-webkit-scrollbar-thumb{background:var(--trait)}
.pays-menu .pays-opt{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;width:100%;padding:10px 22px;
  background:none;border:0;cursor:pointer;font:inherit;font-size:.95rem;color:var(--encre);
  text-align:start;transition:background-color .15s}
.pays-menu .pays-opt:hover{background:var(--creme)}
.pays-menu .pays-opt.active{font-weight:600}
.pays-menu .pays-opt.active .pays-opt-nom::after{content:'';display:inline-block;vertical-align:middle;
  margin-inline-start:9px;width:6px;height:6px;border-radius:50%;background:var(--laque)}
.pays-opt-flag{font-size:19px;line-height:1;flex:0 0 auto}
.pays-opt-nom{flex:1 1 140px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pays-opt-lgs{flex:0 1 auto;margin-inline-start:auto;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px}
.pays-opt-lg{font-style:normal;font-weight:400;font-size:.72rem;letter-spacing:.06em;
  padding:3px 8px;border:1px solid var(--trait);color:var(--encre-doux);white-space:nowrap;
  transition:border-color .15s,color .15s,background-color .15s}
.pays-opt-lg.active{border-color:var(--encre);color:var(--encre)}
.pays-opt-lg:hover{background:var(--encre);border-color:var(--encre);color:#fff}
.pays-opt-dev{flex:0 0 auto;width:3.4em;text-align:end;font-size:.74rem;letter-spacing:.09em;
  font-weight:600;color:var(--encre)}
.pays-vide{padding:26px 22px;color:var(--encre-doux);font-size:.9rem;text-align:center}
/* Les intertitres restent lisibles pendant qu'on déroule : sans ça, on ne sait
   plus si l'on est encore dans les marchés principaux ou déjà dans les 225 autres. */
.pays-sep{position:sticky;top:0;z-index:1;padding:11px 22px 7px;font-size:0.63rem;letter-spacing:.24em;
  text-transform:uppercase;font-weight:600;color:var(--encre-tres-doux);
  background:var(--papier);box-shadow:0 1px 0 var(--trait)}

/* Le pied : changer la langue SANS toucher au pays. Un cas rare — il tient
   donc sur une ligne, repliée, et non sur un second panneau. */
.pays-langues{flex:0 0 auto;border-top:1px solid var(--trait);background:var(--creme)}
.pays-menu .pays-langues-bt{display:flex;align-items:center;gap:10px;width:100%;padding:13px 22px;
  background:none;border:0;cursor:pointer;font:inherit;font-size:.82rem;color:var(--encre-doux);
  text-align:start;transition:color .2s}
.pays-menu .pays-langues-bt:hover{color:var(--encre)}
.pays-menu .pays-langues-bt .lang-caret{margin-left:0;opacity:.5;transition:transform .25s}
.pays-menu .pays-langues-bt[aria-expanded="true"] .lang-caret{transform:rotate(270deg)}
.pays-langues-dr{display:block;width:22px;height:15px;flex:0 0 auto;overflow:hidden;border:1px solid var(--trait)}
.pays-langues-dr svg{display:block;width:100%;height:100%}
.pays-langues-lib{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.pays-langues-cur{flex:0 0 auto;font-weight:600;color:var(--encre)}
.pays-langues-liste{display:flex;flex-wrap:wrap;gap:6px;padding:2px 22px 16px}
.pays-langues-liste[hidden]{display:none}
.pays-langues .lang-opt{width:auto;padding:7px 10px;border:1px solid var(--trait);gap:8px;
  background:var(--papier);font-size:.72rem;letter-spacing:.06em;color:var(--encre-doux);text-decoration:none}
.pays-langues .lang-opt svg{width:19px;height:13px}
.pays-langues .lang-opt:hover{background:var(--encre);border-color:var(--encre);color:#fff}
.pays-langues .lang-opt.active{border-color:var(--encre);color:var(--encre);font-weight:600}
.pays-langues .lang-opt.active::after{display:none}
@media(pointer:coarse){.pays-trigger{min-height:40px}.pays-menu .pays-opt{padding-block:13px}
  .pays-langues .lang-opt{padding-block:10px}}
@media(max-width:520px){.pays-code{display:none}}

/* Le sélecteur posé en tête du menu (téléphone) : une ligne, le panneau dessous.
   Le panneau est alors DANS le flux du tiroir, sans ombre ni encadrement — le
   tiroir en tient lieu. */
.pays-drop--tiroir{display:block;padding:4px 26px 10px;border-bottom:1px solid var(--trait);margin-bottom:6px}
.pays-drop--tiroir .pays-trigger{width:100%;justify-content:flex-start;gap:10px;padding:12px 0;min-height:44px;
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.pays-drop--tiroir .pays-code{display:inline;letter-spacing:.14em}
.pays-drop--tiroir .lang-caret{margin-left:auto;display:inline}
.pays-drop--tiroir .pays-menu{position:static;width:100%;max-width:none;max-height:none;
  box-shadow:none;border:0;border-top:1px solid var(--trait);animation:none}
.pays-drop--tiroir .pays-tete{padding:14px 0 12px;background:none;border-bottom:1px solid var(--trait)}
.pays-drop--tiroir .pays-fermer{display:none}
.pays-drop--tiroir .pays-titre,.pays-drop--tiroir .pays-note{padding-right:0}
.pays-drop--tiroir .pays-champ{padding:12px 0}
.pays-drop--tiroir .pays-loupe{inset-inline-start:12px}
.pays-drop--tiroir .pays-opt,.pays-drop--tiroir .pays-sep{padding-inline:0}
.pays-drop--tiroir .pays-langues-bt{padding-inline:0}
.pays-drop--tiroir .pays-langues{background:none}
/* La bulle du chat est fixée en bas à droite de l'écran : sans réserve, le
   dernier jeton de langue (中文, العربية) tombait dessous une fois le tiroir
   déroulé jusqu'au bout et n'était plus cliquable. */
.pays-drop--tiroir .pays-langues-liste{padding-inline:0;padding-bottom:84px}
.pays-drop--tiroir .pays-liste{max-height:46vh}
@media(max-width:420px){
  .pays-trigger{padding:6px 3px;gap:0}
  .pays-trigger .lang-caret{display:none}
  .pays-drop--tiroir .pays-trigger{padding:12px 0;gap:10px}
  .pays-drop--tiroir .pays-trigger .lang-caret{display:inline}
  .entete-d{gap:8px}
}
/* Petit écran : la ligne cesse d'être un flux qui retombe où il peut — la
   monnaie se retrouvait seule, à gauche, sous le drapeau. C'est une grille :
   drapeau, nom, jetons de langue, monnaie. Un pays qui parle deux ou trois
   langues descend ses jetons sur un second niveau, sous le nom. */
@media(max-width:640px){
  .pays-liste{max-height:min(46vh,340px)}
  .pays-tete{padding:15px 18px 12px}
  .pays-champ{padding:12px 18px}
  .pays-loupe{inset-inline-start:30px}
  .pays-menu .pays-opt,.pays-sep,.pays-menu .pays-langues-bt,
  .pays-langues-liste{padding-inline:18px}
  .pays-menu .pays-opt{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;
    column-gap:12px;row-gap:6px;align-items:center}
  .pays-opt-flag{grid-area:1/1}
  .pays-opt-nom{grid-area:1/2}
  .pays-opt-lgs{grid-area:1/3;margin-inline-start:0;justify-content:flex-end}
  .pays-opt-dev{grid-area:1/4;width:auto}
  .pays-menu .pays-opt--multi{grid-template-columns:auto minmax(0,1fr) auto}
  .pays-opt--multi .pays-opt-dev{grid-area:1/3}
  .pays-opt--multi .pays-opt-lgs{grid-area:2/2/auto/4;justify-content:flex-start}
  .pays-note{font-size:.95rem}
  /* Dans le tiroir, le panneau est déjà en retrait de 26 px : il n'en reprend
     pas 18 de plus, sinon la ligne ne tient plus sur un écran de 390 px. */
  .pays-drop--tiroir .pays-menu .pays-opt,.pays-drop--tiroir .pays-sep,
  .pays-drop--tiroir .pays-menu .pays-langues-bt,
  .pays-drop--tiroir .pays-langues-liste{padding-inline:0}
}


/* ── Pied de page ────────────────────────────────────────── */
footer{background:var(--noir);color:#fff;padding-block:clamp(48px,6vw,76px) 0;view-transition-name:pied}
.foot-haut{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
  padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.1)}
.foot-haut .logo{text-align:left;font-size:1.9rem}
.reseaux{display:flex;gap:24px;font-size:.67rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.6);flex-wrap:wrap}
/* Les réseaux sont des signes, pas des mots : chacun occupe la même case
   carrée, quelle que soit la longueur de son nom. La cible reste visable au
   pouce — c'était déjà le problème de « X », large de onze pixels. */
.reseaux a{transition:color .25s;display:inline-flex;align-items:center;
  min-width:34px;min-height:34px;justify-content:center}
.reseaux a svg{display:block;width:21px;height:21px}
@media(hover:hover){.reseaux a:hover{color:var(--laque)}}
.reseaux a:active{color:var(--laque)}
.foot-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px;
  padding-block:clamp(32px,4vw,52px)}
/* 900 et non 820 : une tablette en portrait (768, 834) tenait quatre
   colonnes de 190 px où « Entreprise du Patrimoine Vivant » prenait
   trois lignes. */
@media(max-width:900px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:460px){.foot-grid{grid-template-columns:minmax(0,1fr)}}
.foot-grid h4{font-size:0.66rem;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(255,255,255,.45);margin-bottom:18px;font-weight:600}
.foot-grid li{margin-bottom:11px}
.foot-grid a{font-size:.86rem;color:rgba(255,255,255,.78);font-weight:300;
  transition:color .2s,padding-left .3s var(--ease);display:inline-block}
.foot-grid a:hover{color:var(--laque);padding-left:5px}
/* ── Les autres adresses de la maison ────────────────────── */
/* Le Club, les pendules, la presse, les revendeurs : ce ne sont pas des
   rubriques du site marchand, elles ne méritaient pas une cinquième
   colonne — qui aurait d'ailleurs cassé la grille de quatre. Une ligne
   sous les colonnes, au-dessus de la mention légale. */
.foot-maison{display:flex;flex-wrap:wrap;gap:14px 28px;
  padding-block:22px;border-top:1px solid rgba(255,255,255,.1);
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.foot-maison a{color:rgba(255,255,255,.62);transition:color .25s}
.foot-maison a:hover{color:var(--laque)}
@media(pointer:coarse){.foot-maison{gap:2px 24px}.foot-maison a{padding-block:12px}}
@media(max-width:640px){.foot-maison{font-size:.78rem;letter-spacing:.1em}}

.foot-bas{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-block:26px;border-top:1px solid rgba(255,255,255,.1);font-size:.72rem;
  color:rgba(255,255,255,.42);font-weight:300}
.haut{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.65);
  transition:color .25s}
.haut:hover{color:var(--laque)}

/* ── Apparition au défilement ────────────────────────────── */
/* l'opacité n'est retirée que si le script tourne : sans JS, tout reste visible */
.js .reveal{opacity:0;transform:translateY(26px);
  transition:opacity .85s var(--ease),transform .85s var(--ease)}
.js .reveal.vu{opacity:1;transform:none}
/* Image qui se dévoile par le bas */
.js .devoile{clip-path:inset(14% 0 0 0);transform:scale(1.06);
  transition:clip-path 1.1s var(--ease),transform 1.1s var(--ease)}
.js .devoile.vu{clip-path:inset(0 0 0 0);transform:none}
@media(prefers-reduced-motion:reduce){
  .js .reveal,.js .devoile{opacity:1;transform:none;clip-path:none;transition:none}
}


/* ═══════════════════════════════════════════════════════════
   Oswald : une graisse par usage
   Anton n'en avait qu'une, écrasante. Ici on choisit — 600 pour
   les grands titres, 500 pour les titres courants, et une chasse
   un peu ouverte pour que les capitales respirent.
   ═══════════════════════════════════════════════════════════ */

h1,h2,h3,h4{letter-spacing:.02em}
.logo{font-weight:600}

/* ── Le tiroir « ajouté au panier » ─────────────────────────
   Il glisse depuis la droite, sous le header, et se referme seul. */
/* Il ne dépasse jamais de l'écran : en paysage sur un téléphone, ses
   366 px de haut sortaient par le bas. C'est le corps qui défile. */
/* Toute la hauteur, du haut de l'écran au bas. Il s'arrêtait sous le header
   et flottait, 384 px de large, une fenêtre parmi d'autres ; à pleine hauteur
   c'est un panneau, la montre qu'on vient de choisir s'y voit en grand, et le
   pied — total, « voir le panier » — tient toujours au même endroit.
   Le format bas-de-page du téléphone (≤ 560 px) n'est pas touché : sur un
   écran de poche, une feuille qui monte du bas reste le bon geste. */
.pmini{position:fixed;top:0;right:0;bottom:0;z-index:110;
  width:min(480px,100vw);background:var(--papier,#fff);
  display:flex;flex-direction:column;
  max-height:none;
  border:1px solid var(--trait);border-right:0;border-top:0;border-bottom:0;
  box-shadow:0 24px 70px rgba(11,11,13,.16);
  transform:translateX(calc(100% + 24px));opacity:0;visibility:hidden;
  transition:transform .42s var(--ease,cubic-bezier(.22,1,.36,1)),
             opacity .3s ease,visibility .42s}
.pmini.on{transform:translateX(0);opacity:1;visibility:visible}
/* Le voile : le panneau était blanc sur une page blanche, et rien ne
   disait qu'une fenêtre s'était ouverte par-dessus. Le fond s'assombrit,
   la fenêtre se détache, et le voile lui-même ferme au doigt. */
.pmini-voile{position:fixed;inset:0;z-index:105;background:rgba(11,11,13,.42);
  backdrop-filter:blur(2px);opacity:0;visibility:hidden;
  transition:opacity .32s var(--ease),visibility .32s}
.pmini-voile.on{opacity:1;visibility:visible}
@media(prefers-reduced-motion:reduce){.pmini-voile{transition:none}}

/* L'en-tête prend l'encre : c'est la barre de titre d'une fenêtre, elle
   doit se lire comme telle — et la croix avec elle. */
.pmini-tete{display:flex;align-items:center;justify-content:space-between;
  padding:13px 14px 13px 18px;background:var(--encre);color:#fff;flex:0 0 auto}
.pmini-titre{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.86);font-weight:500}
/* La croix seule se rate : elle porte son mot, et fait 44 px de haut. */
.pmini-fermer{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  background:none;border:1px solid rgba(255,255,255,.34);color:#fff;
  padding:0 12px;min-height:38px;line-height:1;
  font-size:0.66rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  transition:background-color .2s var(--ease),border-color .2s var(--ease)}
.pmini-fermer i{font-style:normal;font-size:.9rem}
.pmini-fermer:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}
.pmini-corps{padding:22px 20px;flex:1 1 auto;min-height:0;overflow-y:auto}
.pmini-ligne{display:grid;grid-template-columns:136px minmax(0,1fr);gap:18px;align-items:start}
.pmini-img{background:var(--creme);aspect-ratio:1;position:relative;display:grid;
  place-items:center;overflow:hidden}
.pmini-photo{max-width:86%;max-height:86%;object-fit:contain;mix-blend-mode:multiply}
.pmini-pile{position:absolute;inset:0}
.pmini-pile img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.pmini-marque,.pmini-nom,.pmini-det,.pmini-prix{display:block}
.pmini-marque{font-size:0.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--encre-doux)}
.pmini-nom{font-family:var(--display);font-size:1.12rem;text-transform:uppercase;
  line-height:1.15;margin-top:4px}
.pmini-det{font-size:.74rem;color:var(--encre-doux);margin-top:5px}
.pmini-prix{margin-top:9px;font-weight:500}
.pmini-pied{padding:0 18px 18px;border-top:1px solid var(--trait);padding-top:16px;flex:0 0 auto}
.pmini-total{display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:14px}
.pmini-total span{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--encre-doux)}
.pmini-total b{font-family:var(--display);font-size:1.2rem;font-weight:500}
.pmini-voir{display:block;text-align:center;width:100%}
.pmini-suite{display:block;width:100%;margin-top:10px;background:none;border:0;
  font:inherit;font-size:.8rem;color:var(--encre-doux);text-decoration:underline;
  text-underline-offset:3px;cursor:pointer;padding:6px}
.pmini-suite:hover{color:var(--encre)}
@media(max-width:560px){
  .pmini-ligne{grid-template-columns:104px minmax(0,1fr);gap:16px}
  .pmini{top:auto;bottom:var(--pmini-reserve,0px);right:0;left:0;width:auto;
    border-right:1px solid var(--trait);
    max-height:calc(78dvh - var(--pmini-reserve,0px));
    padding-bottom:env(safe-area-inset-bottom);
    transform:translateY(calc(100% + 24px))}
  .pmini.on{transform:translateY(0)}
}

/* Sur une fiche, la barre d'achat occupe déjà le bas de l'écran sous
   860 px : le tiroir de confirmation se pose DESSUS, il ne la recouvre
   pas. 70 px est la hauteur que la fiche se réserve elle-même. */
@media(max-width:860px){
  body:has(.fiche-barre){--pmini-reserve:calc(70px + env(safe-area-inset-bottom))}
}

/* La case des CGV qu'on a oublié de cocher : elle clignote deux fois, le
   temps que l'œil arrive — le défilement l'a mise au centre, encore
   faut-il la voir parmi six lignes de texte légal. */
@keyframes cgv-appel{0%,100%{background:transparent}30%,70%{background:rgba(196,30,36,.12)}}
.cgv.manque{animation:cgv-appel 1.4s var(--ease) 2}
@media(prefers-reduced-motion:reduce){.cgv.manque{animation:none;
  background:rgba(196,30,36,.12)}}

/* ── Le bracelet qu'on choisit avant d'acheter ───────────────
   Sur la fiche : une ligne, le bracelet retenu en vignette. Le choix lui-même
   se fait dans une fenêtre — soixante-deux bracelets dans un menu déroulant
   font une liste plus haute que l'écran, où l'on ne voit aucun bracelet. */
.brc-bouton{display:flex;align-items:center;gap:14px;width:100%;padding:10px;
  background:var(--papier,#fff);border:1px solid var(--trait);cursor:pointer;
  font:inherit;text-align:left;transition:border-color .2s}
.brc-bouton:hover{border-color:var(--encre)}
.brc-vue{flex:0 0 68px;width:68px;height:68px;background:var(--creme);
  display:block;overflow:hidden}
.brc-vue img{display:block;width:100%;height:100%;object-fit:contain;
  mix-blend-mode:multiply}
.brc-lib{min-width:0}
.brc-lib b{display:block;font-weight:500;line-height:1.2}
.brc-lib i{display:block;font-style:normal;font-size:.76rem;margin-top:4px;
  color:var(--encre-doux);text-decoration:underline;text-underline-offset:3px}

/* La fenêtre : le voile ferme au doigt, la fenêtre défile, la page dessous
   ne défile plus — sinon on choisit un bracelet en perdant sa montre. */
.brc-voile{position:fixed;inset:0;z-index:120;background:rgba(11,11,13,.5);
  opacity:0;visibility:hidden;transition:opacity .28s,visibility .28s}
.brc-voile.on{opacity:1;visibility:visible}
html.brc-ouvert,html.brc-ouvert body{overflow:hidden}
.brc-fenetre{position:fixed;z-index:121;top:50%;left:50%;
  transform:translate(-50%,-48%);width:min(1100px,calc(100vw - 40px));
  max-height:86vh;background:var(--papier,#fff);display:flex;flex-direction:column;
  box-shadow:0 30px 90px rgba(11,11,13,.28);
  opacity:0;visibility:hidden;transition:opacity .28s var(--ease),
  transform .28s var(--ease),visibility .28s}
.brc-fenetre.on{opacity:1;visibility:visible;transform:translate(-50%,-50%)}
.brc-tete{display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--trait);flex:0 0 auto}
.brc-titre{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--encre-doux)}
.brc-fermer{background:none;border:0;font:inherit;font-size:1.1rem;cursor:pointer;
  color:var(--encre-doux);padding:4px 6px}
.brc-fermer:hover{color:var(--encre)}
.brc-corps{padding:6px 20px 22px;overflow-y:auto;flex:1 1 auto;min-height:0}
/* `section{padding-block:var(--section)}` donne à toute section du site son
   respir de 132 px : dans une fenêtre, il ouvrait deux clairières autour de
   chaque rangée de bracelets. Ici, c'est le titre qui sépare. */
.brc-section{margin-top:18px;padding-block:0}
.brc-section h3{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--encre-tres-doux,#9a9a9a);margin:0 0 10px;font-weight:400}
.brc-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  gap:10px}
.brc-carte{display:block;width:100%;padding:10px;background:var(--creme);
  border:1px solid transparent;cursor:pointer;font:inherit;text-align:left;
  transition:border-color .2s}
.brc-carte:hover{border-color:var(--trait)}
.brc-carte.on{border-color:var(--encre)}
.brc-carte-vue{display:block;width:100%;height:132px;overflow:hidden}
.brc-carte-vue img{display:block;width:100%;height:100%;object-fit:contain;
  mix-blend-mode:multiply}
.brc-carte-nom{display:block;margin-top:8px;font-size:.8rem;line-height:1.3}
@media(max-width:560px){
  .brc-fenetre{width:100vw;max-height:92vh;top:auto;bottom:0;left:0;
    transform:translateY(12px)}
  .brc-fenetre.on{transform:translateY(0)}
  .brc-grille{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
  .brc-carte-vue{height:104px}
}

/* ── La France se vend en direct ────────────────────────────
   `vente-directe` sur <html> (posée par devises.js quand le pays est la
   France) : la bande « Trouvez le revendeur le plus proche de chez vous »
   disparaît des 693 pages qui la portent. Elle reste entière partout
   ailleurs, où le réseau est le chemin d'achat. Le lien du pied de page
   n'est pas touché — c'est le seul accès qu'on garde, et il suffit. */
.vente-directe .revendeurs{display:none}

/* ── Le menu à deux volets ──────────────────────────────────
   À gauche les rubriques, à droite leurs collections en vignettes.
   Le tiroir s'élargit pour les accueillir ; sous 900 px il garde sa
   largeur et le volet glisse par-dessus les rubriques. */
/* 90 % de la fenêtre, pas 1 240 px : sur un écran de 1 920 le menu s'arrêtait
   aux deux tiers et ses vignettes restaient des timbres, alors que la place
   était là. Le voile garde la bande de droite — on voit qu'il y a une page
   dessous, et on la ferme d'un clic dedans. */
.tiroir.mm-actif{width:min(90vw,100%)}
.mm{display:grid;grid-template-columns:242px minmax(0,1fr);min-height:0;position:relative}

/* ── « Il y a la suite » ─────────────────────────────────────
   Le volet des collections défile — trois mille pixels pour Montres — et
   rien ne le disait : l'ascenseur fait quatre pixels et ne se montre qu'au
   survol. Les trois quarts du menu restaient donc invisibles pour qui ne
   pensait pas à faire défiler. Un voile dégradé mange la dernière ligne au
   lieu de la couper net — un demi-mot fait deviner la suite mieux qu'un
   bord franc — et un chevron l'accompagne. Les deux s'effacent dès qu'on a
   touché le fond, et ne se montrent pas quand tout tient à l'écran.
   La bande commence après la colonne des rubriques : elles, ne défilent
   pas. */
.mm::after{content:"";position:absolute;left:242px;right:0;bottom:0;height:78px;
  background:linear-gradient(to top,#F4F2EF 22%,rgba(244,242,239,0));
  opacity:0;transition:opacity .3s var(--ease);pointer-events:none;z-index:2}
.mm::before{content:"⌄";position:absolute;left:242px;right:0;bottom:14px;
  text-align:center;font-size:1.5rem;line-height:1;color:var(--encre-doux);
  opacity:0;transition:opacity .3s var(--ease);pointer-events:none;z-index:3}
.mm.mm-suite::after{opacity:1}
.mm.mm-suite::before{opacity:.75;animation:mm-respire 1.9s var(--ease) infinite}
@keyframes mm-respire{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media(prefers-reduced-motion:reduce){.mm.mm-suite::before{animation:none}}

.mm-nav{border-right:1px solid var(--trait);padding:10px 0}
.mm-rub-lien{text-decoration:none;color:inherit}
.mm-rub{display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;background:none;border:0;font:inherit;cursor:pointer;text-align:left;
  font-family:var(--display);font-size:1.02rem;text-transform:uppercase;
  letter-spacing:.02em;color:var(--encre);padding:13px 20px 13px 26px;
  transition:color .2s,background .2s}
.mm-rub:hover{color:var(--laque)}
.mm-rub.on{background:var(--creme);color:var(--laque)}
.mm-fleche{font-size:1.1rem;font-weight:300;opacity:.4;transition:opacity .2s,transform .2s}
.mm-rub.on .mm-fleche{opacity:1;transform:translateX(2px)}

/* Le volet défile : une collection de quinze familles ne tient pas dans
   un écran, et on préfère une liste qu'on parcourt à des vignettes
   trop petites pour être lues.
   Sa hauteur se compte depuis l'endroit où il COMMENCE, pas depuis le
   haut du header : site.js mesure ce début à l'ouverture et le pose dans
   --mm-haut. Avec la seule hauteur du header, sa dernière ligne tombait
   trente pixels sous la ligne de flottaison. */
.mm-volet{padding:14px 20px 22px;background:var(--creme);min-width:0;
  max-height:calc(100svh - var(--mm-haut,var(--header)) - 16px);overflow-y:auto;
  overscroll-behavior:contain;scrollbar-width:thin;
  scrollbar-color:var(--trait) transparent}
.mm-volet::-webkit-scrollbar{width:4px}
.mm-volet::-webkit-scrollbar-thumb{background:var(--trait)}
.mm-titre{font-size:0.66rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--encre-tres-doux,#9a9a9a);margin:16px 0 8px}
.mm-titre:first-child{margin-top:2px}

/* Le configurateur ouvre le menu : il ne fait pas la queue. */
.mm-cfg{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:0 14px 10px;padding:14px 16px;background:var(--encre,#151515);color:#fff;
  transition:background .2s}
.mm-cfg:hover{background:var(--laque)}
.mm-cfg-txt b{display:block;font-family:var(--display);font-size:1rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.02em;line-height:1.15}
.mm-cfg-txt i{display:block;font-style:normal;font-size:.7rem;opacity:.72;margin-top:3px}
.mm-cfg-fleche{font-size:1.05rem;opacity:.8}
.mm-rub-sel{font-weight:600}
.mm-panneau{display:none}
.mm-panneau.on{display:block;animation:deroule .34s var(--ease)}

/* Un univers par colonne : Racing tient la première à lui seul, Boat Master,
   Art Car et Golf se partagent la deuxième, « Par envie » ferme à droite.
   `align-items:start` pour que chaque colonne s'arrête où son contenu
   s'arrête — sans cela la plus longue étire les deux autres. */
.mm-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:4px 22px;align-items:start}
.mm-col{min-width:0}
.mm-col .mm-titre:first-child{margin-top:2px}
/* Un univers sans intertitre — Art Car — vient juste après la grille du
   précédent. Sans cet écart, sa carte se lisait comme la troisième
   Boat Master. L'espace fait le titre qu'elle n'a pas. */
.mm-col .mm-grille + .mm-grille{margin-top:18px}

/* Les rubriques à un seul paquet — Bijoux, Bracelets, Accessoires, la
   sélection — n'ont pas de colonnes à tenir : leurs cartes se rangent
   d'elles-mêmes sur la largeur disponible. Dans une colonne d'univers, au
   contraire, les cartes s'empilent : c'est la colonne qui fait la mise en
   page. */
.mm-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:5px}
.mm-col .mm-grille{grid-template-columns:minmax(0,1fr)}
.mm-carte{display:flex;align-items:center;gap:16px;padding:9px 12px 9px 9px;
  background:#fff;border:1px solid transparent;
  transition:border-color .2s,transform .2s}
.mm-carte:hover{border-color:var(--trait);transform:translateX(3px)}
/* La vignette était à 84 px, l'image bridée à 90 % de ce carré : une montre
   photographiée au centre d'un fond blanc n'y faisait plus que quelques
   dizaines de pixels, et on ne distinguait pas une V6 d'une V12. Le carré
   grandit, et l'image l'occupe entièrement — le blanc du fond de la photo
   fait la marge, il n'y a pas à en ajouter une seconde. */
/* `place-items:center` ne stretchait pas l'image, et sa piste de grille reste
   dimensionnée en `auto` : le `height:100%` de l'image ne se résolvait pas et
   retombait sur sa hauteur naturelle — 120×149 dans un carré de 120, dont
   `overflow:hidden` rognait 29 px, quatorze en haut, quinze en bas. C'est le bas
   des montres qui disparaissait. En `stretch`, l'image occupe exactement la
   case, et c'est `object-fit:contain` qui la centre sans rien couper. */
/* Pas de grille ici. Dans une grille, la piste implicite reste dimensionnée en
   `auto` : le `height:100%` de l'image ne s'y résout pas et retombe sur sa
   hauteur naturelle — 120×149 dans un carré de 120, dont `overflow:hidden`
   rognait 29 px, quatorze en haut, quinze en bas. C'est le bas des montres,
   bracelet compris, qui disparaissait. Une simple boîte de taille fixe suffit :
   le pourcentage se résout sur sa hauteur, et `object-fit:contain` centre. */
.mm-img{flex:0 0 200px;width:200px;height:200px;
  background:var(--creme);overflow:hidden}
/* `max-height:100%` ne bornait rien : le packshot fait 540×670, la largeur
   seule le gouvernait, et l'image sortait à 112×139 dans un carré de 112 —
   vingt-sept pixels rognés, treize en haut, treize en bas. C'est le bas de la
   montre, bracelet compris, qui disparaissait. Des dimensions pleines et un
   `contain` posent le packshot entier dans le carré, centré, sans rien couper. */
.mm-img img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;
  /* Le carré fait 120 px, mais la montre n'en occupait que 84 : un packshot
     de la boutique laisse 30 % de blanc autour du sujet (mesuré sur les 588
     images, médiane 70,1 % du côté). On agrandit donc l'image de 25 % dans
     un cadre qui la rogne : c'est le BLANC qui sort, le sujet passe à 88 %
     du carré. Au-delà de ×1,34 il se ferait couper — le bracelet 12 × 8 est
     le plus excentré des cinquante-cinq.
     `--cadrage` (voir plus haut) met d'abord toutes les images à la même
     norme ; sans lui, la vignette « Pendules » à 58 % et le bracelet des
     partenaires à 87 % resteraient du simple au double. */
  transform:scale(calc(var(--cadrage,1) * 1.25))}
/* Une image déjà cadrée bord à bord — les rendus de clock-machines.com —
   n'a pas ce blanc à rattraper : elle se ramène à la norme au lieu de s'en
   éloigner. 0,70 × 1,25, le même 88 % que les autres. */
.mm-img-pleine img{transform:scale(.875)}
.mm-txt{min-width:0}
.mm-txt b{display:block;font-family:var(--display);font-size:1.2rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.02em;line-height:1.15;color:var(--encre)}
.mm-txt i{display:block;font-style:normal;font-size:.85rem;color:var(--encre-doux);
  margin-top:4px}
.mm-tout{display:inline-block;margin-top:14px;font-size:.82rem;color:var(--encre-doux);
  text-decoration:underline;text-underline-offset:3px}
.mm-tout:hover{color:var(--laque)}

/* Sur un téléphone, les deux volets ne tiennent pas côte à côte. Ils se
   recouvraient : celui des collections glissait PAR-DESSUS les rubriques,
   on ne les voyait plus, il fallait trouver un « ‹ Rubriques » pour y
   revenir — trois gestes pour atteindre « Montres » — et il défilait dans
   un tiroir qui défile déjà : 366 px de fenêtre sur 2 500 px de contenu.
   Le menu se range donc en un seul niveau : les rubriques passent en
   onglets, comme ceux des collections sur l'accueil, et leur contenu se
   pose dessous. Les cinq entrées sont visibles d'un coup, une touche
   suffit pour passer de l'une à l'autre, le tiroir garde son unique
   ascenseur, et « Dessiner ma montre » comme « La sélection » restent
   en haut, ouverts dès le premier geste. */
@media(max-width:900px){
  .tiroir.mm-actif{width:min(460px,100%)}
  .mm{display:flex;flex-direction:column}
  .mm-nav{display:flex;flex-wrap:wrap;column-gap:24px;border-right:0;
    padding:0 20px 0 26px;border-bottom:1px solid var(--trait)}
  /* Le configurateur garde sa ligne à lui : il rétrécit pour tenir dans
     ses marges (flex-shrink), sinon la base de 100 % le ferait déborder. */
  .mm-cfg{flex:1 1 100%;margin:12px 0 14px}
  .mm-rub{width:auto;padding:13px 0;font-size:.95rem;
    border-bottom:2px solid transparent}
  .mm-rub.on{background:none;border-bottom-color:var(--laque)}
  /* Un onglet ne se déplie pas : son chevron ne veut plus rien dire. */
  .mm-fleche{display:none}
  .mm-volet{position:static;max-height:none;overflow:visible;
    padding:10px 20px 22px 26px}
  /* L'onglet nomme déjà la sélection : le titre du panneau bégayait. */
  .mm-panneau[data-cle="selection"] > .mm-titre{display:none}
  /* Les colonnes d'univers se remettent l'une sous l'autre, et les cartes
     reprennent leur pile : 272 px de large ne tiennent pas deux fois dans
     un tiroir de 460 px. La vignette, elle, garde sa nouvelle taille. */
  .mm-cols{display:block}
  .mm-grille{grid-template-columns:minmax(0,1fr)}
  /* Le volet ne défile plus ici : c'est le tiroir entier qui défile, et il a
     son propre ascenseur. Le voile n'annoncerait rien. */
  .mm::after,.mm::before{display:none}
  /* La vignette du bureau est passée à 180 px : dans un tiroir de 460, elle ne
     laisserait plus de quoi lire le nom de la montre. Le téléphone garde 120. */
  .mm-img{flex:0 0 120px;width:120px;height:120px}
  .mm-txt b{font-size:1.08rem}
}


/* ═══════════════════════════════════════════════════════════
   TÉLÉPHONE ET TABLETTE
   Trois choses, et rien d'autre : on lit, on vise, et les barres
   collantes ne mangent pas l'écran. Aucun dessin n'est repris ;
   ce sont les tailles et les zones qui changent.
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Le plancher de lisibilité ────────────────────────────
   Sur un téléphone, rien ne descend sous 13 px. Le jeton --micro
   porte à lui seul la moitié des libellés capitales : on le relève
   une fois, et le reste suit. Les quelques tailles écrites en dur
   sont reprises à la main, à l'identique de leur rôle.
   Seul le bandeau du prototype reste en dessous : c'est une mention
   de service, et à 13 px il prendrait trois lignes en haut de
   chaque page.
   La condition dit « téléphone », pas « écran étroit » : couché, le
   même téléphone fait 844 px de large et ses libellés étaient restés
   à 9,6 px. */
@media(max-width:640px),(orientation:landscape) and (max-height:520px){
  :root{--micro:.82rem}
  .btn{font-size:.82rem;gap:9px;padding:15px 26px}
  .entete a,.entete button{font-size:.82rem;letter-spacing:.1em}
  .pastille{width:22px;height:22px;font-size:.82rem}
  .etiq b{font-size:.82rem;letter-spacing:.12em;padding:5px 8px}
  .prod-marque{font-size:.82rem;letter-spacing:.18em}
  .prod-spec{font-size:.86rem}
  .prod-gravable{font-size:.82rem;letter-spacing:.14em}
  .bloc-contenu h5{font-size:.82rem;letter-spacing:.2em}
  .mm-titre{font-size:.82rem;letter-spacing:.2em}
  .mm-txt i{font-size:.86rem}
  .mm-cfg-txt i{font-size:.82rem}
  .svc h4{font-size:.86rem;letter-spacing:.14em}
  .ariane{font-size:.82rem}
  .foot-grid h4{font-size:.82rem;letter-spacing:.2em}
  .reseaux{font-size:.82rem;letter-spacing:.12em}
  .reseaux a svg{width:23px;height:23px}
  .foot-bas{font-size:.82rem}
  .haut{font-size:.82rem;letter-spacing:.12em}
  .pmini-titre{font-size:.82rem;letter-spacing:.14em}
  .pmini-marque{font-size:.82rem;letter-spacing:.16em}
  .pmini-det{font-size:.84rem}
  .pmini-suite{font-size:.86rem}
  .pmini-total span{font-size:.82rem;letter-spacing:.14em}
}

/* ── 2. Les cibles au doigt ──────────────────────────────────
   44 px, mesurés. On agrandit la ZONE, pas le dessin : soit par une
   hauteur minimale, soit par une plage transparente posée autour
   d'un trait trop fin pour être visé. La condition est le doigt
   (pointer:coarse), pas la largeur : une tablette au doigt a le
   même problème qu'un téléphone. */
@media(pointer:coarse){
  .entete a,.entete button{min-height:44px}
  .entete-g>button{min-width:44px;justify-content:center}
  .entete .logo{min-height:44px;align-items:center}
  /* Les drapeaux gardent leurs 24×16 : c'est leur ZONE qui déborde.
     Le minimum de hauteur du header les étirerait en bannières —
     on le leur retire, et on pose la plage autour. */
  .drapeaux{gap:20px}
  /* overflow:hidden (règle de base) coupait la plage au ras du drapeau :
     le SVG remplit déjà la boîte, rien ne déborde à cacher. */
  .drapeaux button{position:relative;min-height:0;overflow:visible}
  /* Sélecteur volontairement plus fort que celui du soulignement du
     header (.entete button:not([data-menu])::after) : sans cela, ses
     left/width/height/transform reprenaient la main et la plage
     retombait à un trait d'un pixel. */
  .entete .drapeaux button::after{content:'';display:block;position:absolute;
    top:-14px;right:-10px;bottom:-14px;left:-10px;width:auto;height:auto;
    background:none;transform:none}
  .tiroir-fermer{min-height:44px;padding-inline:2px}
  .tiroir-bas a{padding-block:12px}
  .mm-tout{padding-block:10px}
  .mm-rub{min-height:44px}
  .foot-grid a{padding-block:12px}
  .foot-grid li{margin-bottom:0}
  .reseaux{gap:20px}
  .reseaux a,.haut{display:inline-block;padding-block:12px}
  .pmini-fermer{min-height:44px;padding-inline:14px}
  .pmini-suite{min-height:44px}
  /* Fil d'Ariane : la rangée fait déjà 46 px de haut, mais les 28 px
     appartenaient au conteneur, pas aux liens. On déplace le rembourrage
     sur les liens eux-mêmes : même hauteur à l'œil, cible atteignable. */
  .doc-fil .wrap{padding-block:1px}
  .doc-fil a{display:inline-block;padding-block:13px}
  /* Le même raisonnement, pour trois cibles que le balayage des pages a
     trouvées hors couverture. Ce sont des commandes à part entière — pas des
     liens au fil d'une phrase, qui eux n'ont pas à grossir :
     · `.ariane a` — le fil d'Ariane des pages de contenu, « Accueil » en
       tête, haut de dix-neuf pixels ;
     · `.act-lien` — « Tout News », « Tout Événements » sur les actualités ;
     · `.lien-trait` — « Choisir un autre modèle » et « Partager cette
       configuration » dans le configurateur, « Comprendre le mécanisme »
       sur La maison. */
  .ariane{padding-block:4px}
  .ariane a{display:inline-block;padding-block:12px}
  .act-lien,.lien-trait{display:inline-block;padding-block:12px}
}

/* ── 3. Le téléphone en paysage ──────────────────────────────
   390 px de haut : le bandeau et l'en-tête prenaient 113 px, presque
   le tiers de l'écran. Le header rétrécit — et comme tout le site se
   cale sur --header, les barres collantes des autres pages suivent. */
@media(orientation:landscape) and (max-height:520px){
  :root{--header:56px}
  .bandeau-proto{padding:4px 12px;font-size:.68rem;line-height:1.35}
  .logo{--logo-h:30px}
  .tiroir-haut .logo{--logo-h:26px}
  .tiroir-bas{padding-top:12px}
  /* Le tiroir de confirmation devient une bande basse : posé à droite,
     il n'aurait plus la place de se déplier. */
  .pmini{top:auto;bottom:var(--pmini-reserve,0px);
    max-height:calc(100dvh - var(--header) - 12px - var(--pmini-reserve,0px))}
}

/* ═══════════════════════════════════════════════════════════
   LA PAGE D'ERREUR — 404.html
   ═══════════════════════════════════════════════════════════
   Une 404 n'est pas une impasse : c'est le dernier écran avant
   que le visiteur reparte. Il y trouve la recherche et les
   collections, pas des excuses.
   ═══════════════════════════════════════════════════════════ */
/* `section` porte déjà un rembourrage vertical généreux : sans cette
   remise à zéro, la page d'erreur ouvrait sur 190 px de vide. */
.err{background:#fff;padding-block:clamp(32px,4.5vw,60px) clamp(56px,7vw,96px)}
.err-titre{font-family:var(--display);text-transform:uppercase;
  font-size:clamp(1.1rem,2.2vw,1.45rem);letter-spacing:.02em;
  margin:clamp(34px,4vw,52px) 0 18px}
.err-titre:first-of-type{margin-top:0}
.err-form{margin-bottom:6px}
.err-liens{display:flex;flex-wrap:wrap;gap:10px}
.err-liens a{border:1px solid var(--trait);padding:12px 18px;
  font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500;
  color:var(--encre);transition:color .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease)}
.err-liens a:hover,.err-liens a:focus-visible{background:var(--encre);border-color:var(--encre);color:#fff}
.err-liens-doux a{border-color:transparent;padding-inline:0;padding-right:22px;
  color:var(--encre-doux);text-transform:none;letter-spacing:0;font-size:.9rem;font-weight:400}
.err-liens-doux a:hover,.err-liens-doux a:focus-visible{background:none;color:var(--laque)}
/* Le renvoi automatique : un ton d'information, pas d'alerte. */
.err-renvoi{border-left:2px solid var(--laque);padding:14px 18px;margin-bottom:clamp(28px,3.5vw,42px);
  background:var(--creme);font-size:.9rem;font-weight:300;color:var(--encre)}
.err-renvoi[hidden]{display:none}

/* ── Le garde-fou de [hidden] ────────────────────────────────
   `display:grid` ou `display:flex` posé par une CLASSE l'emporte sur le
   `display:none` que le navigateur attache à [hidden] : un bloc marqué
   caché s'affichait quand même. La règle a déjà coûté un tunnel qui
   demandait à tout le monde sa raison sociale. Elle vaut pour toute la
   boutique, pas pour la page qui vient de se faire prendre. */
[hidden]{display:none!important}
.err-renvoi a{text-decoration:underline;text-underline-offset:3px}
@media(pointer:coarse){.err-liens a{min-height:44px;display:inline-flex;align-items:center}
  .err-liens-doux a{padding-block:12px}}
@media(max-width:640px){.err-liens a{font-size:.82rem;letter-spacing:.06em}}

/* ── La réserve de l'en-tête, le dernier mot ─────────────────
   Voir le commentaire près de la première déclaration : posée ici, en fin
   de feuille, elle gagne contre toute règle de marge déclarée entre-temps
   sur le même élément. `--reserve-sup` permet à un élément d'ajouter sa
   propre respiration sans redéclarer la réserve. */
.entete-reserve{padding-top:calc(var(--header) + var(--reserve-sup, 0px))}
.ariane.entete-reserve{--reserve-sup:24px}

/* ── Financement réservé France/Belgique (règle direction 15/09/2026) ──
   Hors FR/BE, ou sur une page non française sans pays choisi, devises.js pose
   `hors-financement` sur <html> : on masque les blocs « payer en plusieurs
   fois » et les moyens de paiement financés, fiche comme panier. */
.hors-financement .fiche-paiement-titre,.hors-financement .fiche-paiement-durees,
.hors-financement .fiche-paiement-mens,.hors-financement .fiche-paiement-legal,
.hors-financement .fiche-paiement,.hors-financement .panier-financement,
.hors-financement .echeancier,.hors-financement [data-financement],
.hors-financement .moyen-pledg,.hors-financement .moyen-alma,.hors-financement .moyen-sofinco,
.hors-financement .cfg-finance,.hors-financement .cfg-mention{display:none!important}
/* Les notes de chantier du prototype (« Coordonnées et sujets du formulaire
   repris de… ») parlent aux développeurs, jamais au client : masquées. */
.doc-source,.note-proto,.a-valider,.doc-demo{display:none!important}

html:not([lang="fr"]) .tiroir-art{display:none}

/* ═══ Droite → gauche (arabe) ═════════════════════════════════════════
   `dir="rtl"` sur <html> retourne la grille ; ici, ce que la direction ne
   retourne pas toute seule : les flèches et chevrons dessinés en CSS, le sens
   des glissements au survol, et les mesures (« 44 mm », prix) qui doivent
   rester lues de gauche à droite dans un texte arabe. */
[dir="rtl"] .btn::after{content:'←';transform:translateX(3px)}
@media(hover:hover){
  [dir="rtl"] .btn:hover::after{transform:translateX(-3px)}
  [dir="rtl"] .mm-carte:hover{transform:translateX(-3px)}
  [dir="rtl"] .entete button[data-menu]:hover .burger i:first-child{transform:translateX(-3px)}
  [dir="rtl"] .entete button[data-menu]:hover .burger i:last-child{transform:translateX(3px)}
}
[dir="rtl"] .mm-fleche,[dir="rtl"] .cmd-fleche,[dir="rtl"] .ariane span,[dir="rtl"] .pays-trigger .lang-caret,
[dir="rtl"] .carr-fleche,[dir="rtl"] .uni-compte::after{display:inline-block;transform:scaleX(-1)}
[dir="rtl"] .lang-caret{transform:rotate(90deg) scaleX(-1)}
[dir="rtl"] .lang-drop.open .lang-caret{transform:rotate(270deg) scaleX(-1)}
[dir="rtl"] .lien-trait::after{transform-origin:left}
[dir="rtl"] .prod-spec,[dir="rtl"] .prod-prix,[dir="rtl"] .fiche-prix,[dir="rtl"] .cmd-montant,
[dir="rtl"] .recap-ligne span:last-child,[dir="rtl"] .pays-opt-dev,[dir="rtl"] .fiche-ref,
[dir="rtl"] .ligne-ref,[dir="rtl"] .prod-nom,[dir="rtl"] .mm-carte-nom,[dir="rtl"] .cmd-ref,
[dir="rtl"] .puce,[dir="rtl"] .coll-compteur,[dir="rtl"] .mm-carte-spec,[dir="rtl"] .fiche-spec dd{unicode-bidi:plaintext}
[dir="rtl"] .tiroir-langue{direction:ltr;text-align:right}
[dir="rtl"] input[type="email"],[dir="rtl"] input[type="tel"],[dir="rtl"] input[type="search"],
[dir="rtl"] .pays-rech,[dir="rtl"] .otp input{direction:ltr;text-align:right}
[dir="rtl"] .pays-rech{padding:11px 38px 11px 12px}


/* ═══════════════════════════════════════════════════════════════
   UNIVERS ET LA MAISON NE BOUGENT PLUS
   ═══════════════════════════════════════════════════════════════
   Les deux dernières entrées du tiroir suivaient la hauteur du volet
   ouvert au-dessus d'elles : on changeait de rubrique, elles sautaient
   de deux cents pixels, et sur une rubrique longue elles passaient
   carrément sous la ligne de flottaison. On les sortait en défilant,
   c'est-à-dire qu'on les trouvait par hasard.

   Le corps du tiroir devient donc une colonne à hauteur fixe : le
   méga-menu prend la place qui reste et défile CHEZ LUI — sa liste de
   rubriques d'un côté, son volet de l'autre —, pendant qu'Univers et
   La maison gardent le bas de l'écran, à la même place, toujours
   visibles. Le dégradé de bas de tiroir disparaît avec le défilement
   qu'il annonçait.

   Sous 901 px le méga-menu passe en onglets et le tiroir redevient une
   liste qui défile d'un bloc : la règle n'y a pas cours.
   ═══════════════════════════════════════════════════════════════ */
@media(min-width:901px){
  .tiroir.mm-actif .tiroir-corps{
    display:flex;flex-direction:column;overflow:hidden;
    -webkit-mask-image:none;mask-image:none}
  .tiroir.mm-actif .tiroir-corps > .mm{flex:1 1 auto;min-height:0}
  .tiroir.mm-actif .tiroir-corps > .bloc,
  .tiroir.mm-actif .tiroir-corps > .tiroir-lien{flex:0 0 auto}
  /* Les deux colonnes du méga-menu défilent chacune pour son compte. */
  .tiroir.mm-actif .mm-nav{
    overflow-y:auto;min-height:0;
    scrollbar-width:thin;scrollbar-color:var(--trait) transparent}
  .tiroir.mm-actif .mm-nav::-webkit-scrollbar{width:4px}
  .tiroir.mm-actif .mm-nav::-webkit-scrollbar-thumb{background:var(--trait)}
  /* Le volet ne se mesure plus sur la hauteur de l'écran : il prend la
     hauteur de sa case, qui est déjà bornée par la colonne. */
  .tiroir.mm-actif .mm-volet{max-height:none;height:100%}
}


/* ══ Bandeau de consentement aux cookies ═══════════════════════════════
   Ces règles vivaient dans `compte.css`, que SEULE la page « mon compte »
   charge. Or le bandeau est posé par `compte.js` sur le panier, et par
   `legal.js` sur les pages légales : partout ailleurs il s'affichait NU —
   texte collé au bord gauche, boutons empilés dans un même cadre, liens
   accolés sans séparateur (« Politique de confidentialitéMentions
   légales »), et il recouvrait le pied de page. Relevé le 18/09/2026 par
   les dix passages de commande, dans les dix langues à la fois.
   Le bandeau étant global, son habillage l'est aussi : il rejoint la
   feuille que toutes les pages chargent. ═══════════════════════════════ */
/* L'étage du bandeau. Il doit passer devant la page, mais DERRIÈRE tout
   ce qui demande une décision : la recherche plein écran (120), la
   fenêtre de nommage d'une configuration (120), le tiroir du menu (90),
   le tiroir « ajouté au panier » (110). À 140, il passait devant tous.
   Le défaut se voyait surtout au téléphone : le voile de recherche
   s'ouvrait, et le bandeau, collé en bas sur toute la largeur, avalait
   les clics des deux dernières lignes de vignettes. */
.ckb{position:fixed;left:0;right:0;bottom:0;z-index:85;background:var(--papier);
  border-top:1px solid var(--trait);box-shadow:0 -14px 44px rgba(11,11,13,.14);
  transform:translateY(100%);transition:transform .22s var(--ease,ease);display:none}
.ckb.on{display:block;transform:none}
/* Le bandeau est FIXE en bas de fenêtre : sur un téléphone il prend près
   de trois cents pixels, et tout ce qui tombe dessous devient injoignable
   — l'appel à l'action de la page SAV se trouvait exactement là, et le
   bouton ne répondait pas. Tant que le bandeau est là, la page lui rend
   la hauteur qu'il occupe. `--ckb-h` est publiée par `compte.js`, qui
   mesure la boîte réelle : elle change avec la largeur et la langue. */
body.ckb-ouvert{padding-bottom:var(--ckb-h,0px)}

/* Et il s'efface franchement — pas seulement par en dessous — dès qu'une
   de ces couches s'ouvre : un bandeau qu'on devine sous un voile sombre
   ne sert à rien, et sa place au bas de l'écran est exactement celle où
   l'on va cliquer. Il revient tel quel à la fermeture, le choix n'ayant
   pas été demandé entre-temps.
   Les sélecteurs sont volontairement plus forts que `.ckb.on`. */
html.rch-fige .ckb.on,
body:has(.cpt-modale.on) .ckb.on,
body:has(.tiroir.on) .ckb.on,
body:has(.pmini.on) .ckb.on{transform:translateY(100%);pointer-events:none}
/* Le bandeau est un avis de consentement, pas une page : il prenait deux
   fois la place qu'il lui faut. Le texte court sert désormais à TOUTES les
   largeurs — le long disait la même chose en trois lignes de plus —, le
   titre se met sur la même ligne que lui, et le rembourrage tombe de
   moitié. L'information légale est intacte : rien n'est retiré, tout est
   resserré. */
.ckb-in{max-width:1180px;margin-inline:auto;padding:12px var(--gouttiere,24px);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 28px;align-items:center;
  /* Téléphone couché : 390 px de haut en tout. Sans ce plafond, le
     bandeau déplié couvrait l'écran entier et rien ne disait qu'il
     fallait faire défiler pour atteindre les boutons. */
  max-height:80vh;overflow-y:auto}
/* Le titre rejoint la phrase : « COOKIES — Le strict nécessaire… ». */
.ckb-titre{display:inline;font-family:var(--display);font-size:.92rem;
  text-transform:uppercase;margin:0 6px 0 0}
/* L'espace après le tiret est posé ici : la marge de `.ckb-titre` est
   écrasée par `.ckb-mot p`, plus spécifique. */
.ckb-titre::after{content:'—';margin:0 7px;color:var(--encre-tres-doux);
  font-family:var(--texte);font-weight:300}
.ckb-mot p{display:inline;font-size:.84rem;font-weight:300;line-height:1.5;
  color:var(--encre-doux);max-width:none;margin:0}
.ckb-mot .ckb-liens, .ckb-liens{display:inline-flex;gap:16px;flex-wrap:wrap;
  margin:0 0 0 14px!important;vertical-align:baseline}
.ckb-liens a{font-size:.76rem;color:var(--encre-doux);text-decoration:underline;
  text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px}
.ckb-liens a:hover{color:var(--laque)}
.ckb-choix{grid-column:1/-1;display:grid;gap:10px;border-top:1px solid var(--trait);
  padding-top:18px}
.ckb-choix[hidden]{display:none}
.ckb-fam{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;
  cursor:pointer;padding-block:4px;min-height:44px}
.ckb-fam input{width:22px;height:22px;margin-top:2px;accent-color:var(--laque);flex:0 0 auto}
.ckb-fam span{font-size:.84rem;font-weight:300;color:var(--encre-doux);line-height:1.55}
.ckb-fam b{display:block;font-size:.88rem;font-weight:500;color:var(--encre);margin-bottom:2px}
.ckb-fam-bloquee{cursor:default;opacity:.72}
.ckb-boutons{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-self:end}
/* Refuser doit se voir autant qu'accepter : même taille, même place,
   même poids typographique. Un « continuer sans accepter » en lien gris
   sous le pli n'est pas un refus offert, c'est un refus caché. */
.ckb-boutons .btn{padding:14px 24px;min-height:48px;white-space:nowrap;
  /* Même largeur, à tous les écrans : l'œil ne doit pas pouvoir dire
     lequel des deux on attend de lui. */
  flex:1 1 0;min-width:210px;justify-content:center}
.ckb-regler,.ckb-garder{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase}
.ckb-regler{background:none;border:0;font-family:inherit;color:var(--encre-doux);
  text-decoration:underline;text-underline-offset:4px;cursor:pointer;
  display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
.ckb-regler:hover{color:var(--encre)}
.ckb-garder[hidden]{display:none}
/* Les deux longueurs de texte. La courte sert partout : le bandeau
   mangeait quarante pour cent d'un écran de téléphone.
   Le sélecteur porte `.ckb-mot` parce que `.ckb-mot p` est plus
   spécifique que `.ckb-long` seul — sans ça, la règle ne s'appliquait
   pas et les deux paragraphes s'affichaient l'un derrière l'autre. */
.ckb-mot .ckb-long, .ckb-long{display:none}
.ckb-mot .ckb-court, .ckb-court{display:inline}

@media(max-width:900px){
  .ckb-in{grid-template-columns:minmax(0,1fr);gap:16px}
  /* En colonne : côte à côte, l'un des deux se retrouvait plus étroit
     que l'autre parce que « Choisir » lui prenait la fin de la ligne.
     Deux boutons de largeurs différentes, c'est déjà une préférence
     affichée. */
  .ckb-boutons{justify-self:stretch;flex-direction:column;align-items:stretch}
  .ckb-boutons .btn{flex:0 0 auto;width:100%;min-width:0;justify-content:center}
  .ckb-regler{align-self:center}
}

/* ── Le bandeau sur un téléphone ─────────────────────────────
   Mesuré à 390 px : 416 pixels de haut sur 664, soit les deux tiers de
   l'écran, et la montre réduite à un liseré. Un consentement doit se
   demander, pas s'imposer devant la page qu'on vient d'ouvrir.

   On garde tout — le titre, le propos, les deux liens, le réglage fin,
   et surtout le refus au même poids que l'accord. On resserre le
   rythme, on raccourcit la phrase, et les deux boutons reviennent sur
   une seule ligne puisqu'ils portent enfin des libellés de même
   longueur. */
@media(max-width:620px){
  .ckb-in{padding:16px var(--gouttiere,20px) 18px;gap:12px}
  .ckb-titre{font-size:.92rem;margin-bottom:6px!important}
  .ckb-mot p{font-size:.82rem;line-height:1.5}
  .ckb-liens{gap:14px;margin-top:8px!important}
  .ckb-liens a{font-size:.72rem}
  /* Deux boutons de largeur strictement égale : aucune préférence
     affichée, ni par la taille ni par la place. */
  .ckb-boutons{flex-direction:row;gap:8px;flex-wrap:wrap}
  .ckb-boutons .btn{flex:1 1 0;width:auto;padding:13px 10px;min-height:46px;
    font-size:.66rem;letter-spacing:.1em}
  .ckb-boutons .btn::after{display:none}
  /* « Choisir » partageait sa ligne avec personne : quarante-quatre pixels
     pour un mot, sur un bandeau qui en prenait déjà près de trois cents et
     recouvrait le bouton d'appel de la page SAV. Il rejoint les liens
     légaux, à droite — même information, une ligne de moins. */
  .ckb-regler{order:0;align-self:center;padding:12px 0;margin-left:auto}
  .ckb-mot .ckb-liens, .ckb-liens{display:flex;align-items:center;gap:14px;
    margin:8px 0 0 0!important}
  /* `display:contents` promouvait chaque paragraphe en rangée de la
     grille : le titre prenait une ligne pour lui seul. Il redevient un
     bloc, et « COOKIES — Le strict nécessaire… » tient sur une phrase. */
  .ckb-mot{display:block}
  .ckb-liens a{min-height:40px;display:inline-flex;align-items:center}
}
/* Deux pages ont déjà une barre d'action fixe en bas : le tunnel sous
   980 px, et le configurateur à toutes les largeurs. Le bandeau se pose
   AU-DESSUS, jamais dessus — recouvrir « Ajouter au panier » avec une
   demande de consentement, c'est faire payer le consentement d'une
   vente. Le configurateur mesure lui-même sa barre et pose sa hauteur
   dans `--cfg-barre-h` : on s'en sert plutôt que de deviner. */
body:has(.cfg-barre) .ckb{bottom:calc(var(--cfg-barre-h,104px) + 4px)}
/* La fiche produit a la MÊME barre collée en bas que le configurateur, et
   elle n'était connue d'aucun des deux bandeaux. Mesuré le 21/09/2026 au
   `document.elementFromPoint()`, sur téléphone, PREMIÈRE VISITE : le centre
   du bouton « Ajouter au panier » renvoyait le bouton « Tout refuser » du
   bandeau. Autrement dit, le client qui voulait acheter refusait les
   cookies. Le défaut ne frappait que les nouveaux venus — c'est-à-dire
   exactement ceux qu'on cherche.
   Le bandeau monte au-dessus de la barre, jamais l'inverse : une barre
   d'achat qu'on déplace sort de l'écran ou masque le prix. */
body:has(.fiche-barre) .ckb,
body:has(.fiche-barre) #brm-consent{
  bottom:calc(70px + env(safe-area-inset-bottom) + 14px)}
/* Le tunnel a la même barre basse sous 980 px — « Passer à la livraison »,
   « Passer au paiement » — et elle, personne ne la relevait : le bandeau
   cookies se posait dessus, la bulle du conseiller mordait dessus, et le
   bouton qui décide d'une commande se trouvait coincé entre les deux, sur
   les cinquante derniers pixels de l'écran. `--recap-h` est publiée par
   `panier.html`, qui mesure sa propre barre. */
@media(max-width:980px){
  body:has(.recap-action) .ckb{bottom:calc(var(--recap-h,72px) + 4px)}
  body:has(.recap-action) .rpt{bottom:calc(var(--recap-h,72px) + 16px)}
}
@media(max-width:980px){
  .ckb{bottom:0}
  body:has(.recap-action) .ckb{bottom:82px}
  body.ckb-ouvert:has(.recap-action){padding-bottom:82px}
}