/* =====================================================================
   tufo.css — la feuille de style de tufo.fr
   Base : reparermaroue.fr (charte Velox : marine, Archivo / Public Sans /
   IBM Plex Mono). Ce qui change ici : le JAUNE Tufo (#FFF200) porte À LA
   FOIS la marque — bandes diagonales, chevrons, surtitres — ET l'action :
   tous les boutons sont jaunes. L'orange Velox n'apparaît nulle part.

   Les deux seules exceptions, qui ne sont ni de la marque ni des boutons :
   la jauge de stock (rouge → orange → jaune → vert, le code universel de
   la disponibilité, repris de reparermaroue.fr) et le libellé « Sur
   commande » en rouille. Ce sont des signaux d'état, pas des couleurs de
   charte.
   ===================================================================== */

/* --- polices locales (servies depuis le site, aucune requête tierce) --- */
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;src:url('polices/archivo-v25-latin-500.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;src:url('polices/archivo-v25-latin-700.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;src:url('polices/archivo-v25-latin-800.woff2') format('woff2');font-display:swap}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;src:url('polices/ibm-plex-mono-v20-latin-regular.woff2') format('woff2');font-display:swap}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;src:url('polices/ibm-plex-mono-v20-latin-500.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400;src:url('polices/public-sans-v21-latin-regular.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:500;src:url('polices/public-sans-v21-latin-500.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:600;src:url('polices/public-sans-v21-latin-600.woff2') format('woff2');font-display:swap}

:root{
  /* ⚠ Le site est en clair, et le dit. Sans cette ligne, un visiteur
     dont le système est en mode sombre reçoit des CHAMPS DE FORMULAIRE
     noircis par le navigateur — Safari et Chrome repeignent d'office
     les contrôles natifs (champs, listes, cases à cocher, barres de
     défilement) quand la page ne déclare pas sa préférence. Le
     formulaire de contact en compte treize : texte sombre sur fond
     sombre, illisible, et rien dans la feuille de style ne l'explique.
     Une ligne, aucun effet en clair, la panne évitée. */
  color-scheme: light;

  /* L'orange Velox n'est PLUS utilisé dans l'interface depuis le
     04/09/2026 : toutes les actions sont en jaune Tufo. Les trois
     variables restent définies pour les documents PDF du dossier, qui
     suivent la charte Velox, et pour ne rien casser si on les rappelle. */
  --orange:#FE5000;          /* Pantone Orange 021 C — Velox */
  --orange-fonce:#C63A00;
  --orange-clair:#FF7433;
  --jaune:#FFF200;           /* jaune Tufo, relevé sur le catalogue 2025 */
  --jaune-fonce:#D9CB00;
  --jaune-encre:#6B6400;     /* le jaune qui reste lisible sur blanc (4,6:1) */
  --marine:#44546A;
  --marine-fonce:#2A3442;
  --marine-nuit:#1C232E;
  --noir:#0E1116;
  --papier:#FAFAF9;
  --blanc:#FFFFFF;
  --encre:#17202B;
  --gris:#5B6675;
  --alu:#C6CDD6;
  --trait:#E3E4E2;
  --gris-pale:#F2F3F1;

  --display:"Archivo", system-ui, sans-serif;
  --texte:"Public Sans", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, monospace;

  --marge:clamp(1.25rem, 5vw, 4.5rem);
  --large:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--texte);font-size:17px;line-height:1.55;color:var(--encre);background:var(--papier);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.enveloppe{max-width:var(--large);margin:0 auto;padding-inline:var(--marge)}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;line-height:1.05;letter-spacing:-.02em;margin:0;overflow-wrap:break-word;text-wrap:balance}
h2{font-size:clamp(1.8rem,3.6vw,2.7rem)}
h3{font-size:1.18rem;letter-spacing:-.01em;font-weight:700}
p{margin:0 0 1rem}
/* Le focus clavier ne peut pas être jaune : sur fond clair il disparaît.
   Contour encre + halo jaune, visible sur les deux fonds du site. */
a:focus-visible,button:focus-visible{outline:3px solid var(--encre);outline-offset:2px;
  box-shadow:0 0 0 6px rgba(255,242,0,.55)}
.visuellement-cache{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Le surtitre : chevrons jaunes, comme les titres du catalogue Tufo ---------- */
.etiquette{font-family:var(--mono);font-size:0.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--jaune-encre);display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1rem}
.etiquette::before{content:"";width:22px;height:12px;background:var(--jaune);clip-path:polygon(0 0,45% 0,100% 50%,45% 100%,0 100%,55% 50%)}
.sombre .etiquette,.hero .etiquette{color:var(--jaune)}

/* ---------- Boutons ---------- */
/* ⚠ RÈGLE DE MISE EN FORME — posée le 06/09/2026 par Rémy, à ne plus
   enfreindre : « même hauteur de bouton partout, sinon ce n'est pas beau
   visuellement », et « ajuste les largeurs et les hauteurs des boutons
   avec l'environnement ».

   Comment elle est tenue, mécaniquement :
   1. white-space:nowrap — AUCUN bouton ne passe sur deux lignes. Un
      libellé sur deux lignes était la seule cause de hauteurs
      différentes ; il ne peut plus s'en produire.
   2. min-height fixe — un bouton sans texte long garde quand même la
      hauteur commune.
   3. Les rangées de boutons (.fiche-actions, .hero-actions) sont des
      GRILLES à colonnes égales : même largeur, et l'étirement de la
      grille garantit la même hauteur, rangée par rangée.

   Conséquence à respecter en écrivant les libellés : ils doivent tenir
   sur une ligne dans leur colonne. Un libellé trop long DÉBORDE au lieu
   de se replier — c'est voulu, ça se voit tout de suite. Le contrôle
   automatique de generer-site.js refuse de livrer au-delà de 22 signes. */
.bouton{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-family:var(--display);font-weight:700;font-size:0.95rem;padding:0 1.5rem;height:3.2rem;white-space:nowrap;border-radius:3px;text-decoration:none;border:2px solid transparent;cursor:pointer;line-height:1.3;text-align:center;transition:transform .15s ease,background-color .15s ease,color .15s ease,border-color .15s ease}
.bouton:hover{transform:translateY(-2px)}
/* ⚠ RÈGLE DE COULEUR — révisée le 04/09/2026 à la demande de Rémy :
   « passe tous les boutons avec du jaune, l'orange Velox ne doit pas rester ».
   Le JAUNE TUFO porte donc TOUTES les actions, achat compris ; l'orange
   Velox ne sert plus nulle part dans l'interface du site. La hiérarchie ne
   se fait plus par la couleur mais par le remplissage : jaune plein pour
   l'action principale, contour encre pour la secondaire.
   Jaune Tufo sur encre marine : 13,9:1, très au-dessus du minimum exigé. */
.bouton-jaune{background:var(--jaune);color:var(--marine-nuit)}
.bouton-jaune:hover{background:#FFF66A}
.bouton-clair{background:transparent;color:var(--blanc);border-color:rgba(255,255,255,.34)}
.bouton-clair:hover{border-color:var(--jaune);color:var(--jaune)}
.bouton-marine{background:var(--marine-nuit);color:var(--blanc)}
.bouton-marine:hover{background:var(--marine-fonce)}
.bouton-vide{background:transparent;color:var(--encre);border-color:var(--encre)}
.bouton-vide:hover{background:var(--encre);color:var(--blanc)}
.bouton-blanc{background:var(--blanc);color:var(--marine-nuit)}
.bouton-blanc:hover{background:var(--gris-pale)}
.bouton-petit{padding:0 1rem;height:2.75rem;font-size:.85rem}
.bouton[aria-disabled="true"]{opacity:.55;pointer-events:none}

/* ---------- Bandeau de confiance ---------- */
.confiance{background:var(--noir);color:var(--alu)}
/* UNE SEULE LIGNE, jamais deux : le bandeau est un filet, pas un
   paragraphe. On interdit le retour à la ligne, et on retire une entrée
   par palier plutôt que de laisser la troisième se couper en deux. */
.confiance ul{display:flex;flex-wrap:nowrap;white-space:nowrap;overflow:hidden;
  gap:.4rem 2.2rem;justify-content:center;list-style:none;margin:0;padding-block:.6rem;
  font-family:var(--mono);font-size:0.72rem;letter-spacing:.08em;text-transform:uppercase}
.confiance li{display:flex;align-items:center;gap:.5rem}
.confiance li::before{content:"";width:5px;height:5px;background:var(--jaune);border-radius:50%;flex:0 0 auto}
.confiance li.li-fr{color:var(--blanc);font-weight:500}
.confiance li.li-fr::before{display:none}
.confiance .drapeau-bandeau{width:17px;height:11px;flex:0 0 auto;display:block;border-radius:1px;box-shadow:0 0 0 1px rgba(255,255,255,.3)}
/* Mesuré : les trois entrées réclament ~900 px. En dessous, la
   troisième saute ; en dessous de 620 px, il ne reste que la première. */
@media(max-width:1000px){.confiance li:nth-child(n+3){display:none}}
@media(max-width:620px){.confiance li:nth-child(n+2){display:none}}

/* ---------- En-tête : Velox, distributeur France de Tufo ---------- */
/* position:sticky fait aussi de l'en-tête le référent des positions
   absolues : c'est par rapport à LUI que le panneau « Pneus » se place,
   sur toute la largeur, juste en dessous. */
.entete{position:sticky;top:0;z-index:50;background:var(--blanc);border-bottom:1px solid var(--trait)}
.entete-int{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;height:82px}
.marque{display:flex;align-items:center;gap:.9rem;text-decoration:none;flex:0 0 auto}
.logo-velox{height:60px;width:auto;display:block;color:var(--encre)}
.marque .distrib{display:flex;flex-direction:column;border-left:1px solid var(--trait);padding-left:.9rem;line-height:1.15}
.marque .distrib small{font-family:var(--mono);font-size:0.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}
/* Le mot TUFO en Archivo 800, souligné d'un trait jaune : le logotype
   officiel (logos/tufo.svg) le remplace dès qu'il est dans le dossier. */
.marque .tufo{font-family:var(--display);font-weight:800;font-size:1.55rem;letter-spacing:.06em;color:var(--noir);line-height:1;padding-bottom:3px;background:linear-gradient(var(--jaune),var(--jaune)) no-repeat left bottom/100% 5px}
.marque img.logo-tufo{height:30px;width:auto}
/* Le gap se resserre quand la barre se remplit : l'ajout de
   « Documentation » et le passage du bouton à « Tous les pneus »
   faisaient déborder le bouton hors de la marge de la page. */
.menu{display:flex;align-items:center;gap:clamp(.48rem,.9vw,.94rem);min-width:0}
.menu > a{font-size:clamp(.84rem,.6vw + .32rem,.9rem);font-weight:500;color:var(--encre);text-decoration:none;padding-bottom:3px;border-bottom:2px solid transparent;white-space:nowrap}
.menu > a:hover,.menu > a[aria-current="page"]{border-bottom-color:var(--jaune)}
/* Le bouton de la barre de navigation a SA hauteur, la même pour tous
   les boutons de la barre — pas celle des boutons de page. */
.menu .bouton{padding:0 .85rem;height:2.75rem;border-bottom:none}
.menu .bouton:hover{border-bottom:none}
@media(max-width:1180px){.menu > a:not(.bouton){display:none}}
/* Sur téléphone on garde « TUFO » — c'est la marque du site — et on
   ne retire que la ligne « distributeur France de », qui ne tient plus. */
@media(max-width:600px){
  .marque{gap:.6rem}
  .marque .distrib small{display:none}
  .marque .distrib{padding-left:.65rem}
  .marque .tufo{font-size:1.2rem;background-size:100% 4px}
  .marque img.logo-tufo{height:24px}
}

/* ---------- Navigation mobile ---------- */
.burger{display:none;align-items:center;justify-content:center;background:transparent;border:1px solid var(--trait);border-radius:3px;padding:.45rem .5rem;cursor:pointer}
.burger svg{width:22px;height:22px;fill:none;stroke:var(--encre);stroke-width:1.8;stroke-linecap:round}
.burger:hover{border-color:var(--jaune-fonce)}
.menu-mobile{display:none;position:absolute;left:0;right:0;top:100%;background:var(--blanc);border-bottom:1px solid var(--trait);box-shadow:0 14px 34px rgba(23,32,43,.14);padding:.25rem var(--marge) 1.25rem}
.menu-mobile[data-ouvert]{display:block}
.menu-mobile a{display:block;padding:.85rem 0;border-bottom:1px solid var(--trait);text-decoration:none;font-weight:500;color:var(--encre);font-size:1rem}
.menu-mobile a:last-child{border-bottom:0}
.menu-mobile .bouton{display:flex;margin-top:1.1rem;border-bottom:0}
@media(max-width:1180px){.burger{display:inline-flex}.menu{gap:.6rem}}
@media(max-width:760px){.entete-int{height:68px;gap:.75rem}.logo-velox{height:46px}}
@media(max-width:560px){.entete-int > .menu > .bouton{display:none}}

/* ---------- Hero : marine, avec la bande diagonale jaune du catalogue Tufo ---------- */
.hero{position:relative;background:var(--marine-nuit);color:var(--blanc);padding-block:clamp(2rem,4vw,3.5rem);overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;background:var(--jaune);clip-path:polygon(72% 0,100% 0,100% 100%,52% 100%);z-index:-1;opacity:.97}
.hero::after{content:"";position:absolute;inset:0;background:var(--noir);clip-path:polygon(69% 0,72% 0,52% 100%,49% 100%);z-index:-1}
.hero-grille{display:grid;grid-template-columns:1.18fr .82fr;gap:clamp(1.6rem,4vw,3.4rem);align-items:center}
.hero h1{font-size:clamp(2.1rem,4.6vw,3.4rem);color:var(--blanc)}
.hero h1 em{font-style:normal;color:var(--jaune)}
.hero-texte{color:var(--alu);font-size:clamp(1.02rem,1.5vw,1.16rem);max-width:34rem;margin-top:1rem}
/* minmax(0,1fr) et non 1fr : sans le minimum à zéro, la piste du bouton
   au libellé le plus long impose sa largeur et les deux boutons finissent
   inégaux. Ici ils sont strictement de même largeur. */
.hero-actions{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:.7rem;margin-top:1.4rem}
/* Entre 900 et 1180 px, la colonne de texte du hero devient trop étroite
   pour deux boutons côte à côte de même largeur : le libellé le plus long
   (« Boyau, boyau-pneu ou tubeless ? ») s'y faisait couper. Ils passent
   donc l'un sous l'autre, toujours de même largeur et de même hauteur. */
@media(max-width:1180px){.hero-actions{grid-auto-flow:row}}
.hero-note{font-family:var(--mono);font-size:0.76rem;color:#8894A6;margin-top:1.1rem;letter-spacing:.03em;line-height:1.7}
.hero-visuel{position:relative;min-height:280px;display:flex;align-items:center;justify-content:center}
.hero-visuel img{max-height:420px;width:auto;filter:drop-shadow(0 22px 30px rgba(0,0,0,.35))}
.hero-visuel .legende{position:absolute;right:0;bottom:0;background:var(--noir);color:var(--blanc);font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;padding:.45rem .8rem}
@media(max-width:900px){
  .hero-grille{grid-template-columns:1fr}
  .hero::before{clip-path:polygon(0 78%,100% 62%,100% 100%,0 100%)}
  .hero::after{clip-path:polygon(0 78%,100% 62%,100% 64.5%,0 80.5%)}
  .hero-visuel{min-height:0}.hero-visuel img{max-height:260px}
}

/* ---------- Bandeau de chiffres ---------- */
.bandeau{background:var(--jaune);color:var(--encre)}
.bandeau-int{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding-block:1.4rem}
.chiffre b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1}
.chiffre span{font-family:var(--mono);font-size:0.74rem;letter-spacing:.11em;text-transform:uppercase;opacity:.85}
@media(max-width:700px){.bandeau-int{grid-template-columns:1fr 1fr;gap:1.2rem}}

/* ---------- Sections ----------
   Respiration resserrée le 6 septembre 2026 : la fiche produit demandait
   cinq écrans de défilement sur bureau et près de onze sur mobile. Ce
   réglage vaut pour TOUTES les pages du site, pas seulement les fiches. */
.section{padding-block:clamp(1.4rem,2.2vw,2rem)}
.section.sombre{background:var(--marine-nuit);color:var(--blanc)}
.section.sombre h2{color:var(--blanc)}
.section.claire{background:var(--blanc);border-block:1px solid var(--trait)}
.section.grise{background:var(--gris-pale)}
.section-tete{margin-bottom:.9rem}
.section-tete h2{max-width:44rem}
.section-tete p{color:var(--gris);font-size:.98rem;margin-top:.45rem;max-width:52rem}
.sombre .section-tete p{color:var(--alu)}
.section-tete.avec-lien{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:1rem}
.lien-suite{font-weight:600;font-size:.95rem;color:var(--jaune-encre);text-decoration:none;white-space:nowrap}
.lien-suite:hover{text-decoration:underline}
.lien-suite::after{content:" \2192"}

/* ---------- Bandeau de titre des pages intérieures ---------- */
.page-tete{background:var(--marine-nuit);color:var(--blanc);position:relative;overflow:hidden;isolation:isolate;padding-block:clamp(1.6rem,3vw,2.4rem)}
.page-tete::before{content:"";position:absolute;inset:0;background:var(--jaune);clip-path:polygon(88% 0,100% 0,100% 100%,80% 100%);z-index:-1}
.page-tete h1{font-size:clamp(1.9rem,3.8vw,2.9rem);color:var(--blanc);max-width:18ch}
.page-tete .chapeau{color:var(--alu);max-width:60rem;margin:.8rem 0 0;font-size:1.04rem}
/* Sur téléphone, la bande jaune passait DERRIÈRE le chapeau, qui prend
   toute la largeur : le texte devenait illisible sur le jaune. On la
   remplace par un filet en pied de bandeau, qui dit la même chose. */
@media(max-width:820px){
  .page-tete::before{display:none}
  .page-tete{border-bottom:6px solid var(--jaune)}
}
.fil{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:#8894A6;margin:0 0 .9rem;display:flex;flex-wrap:wrap;gap:.4rem}
.fil a{color:var(--alu);text-decoration:none}
.fil a:hover{color:var(--jaune)}
.fil span::before{content:"\203A";margin-right:.4rem;color:var(--jaune)}

/* ---------- Grille des disciplines (accueil) ---------- */
.disciplines{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.disc{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:220px;background:var(--marine-fonce);color:var(--blanc);text-decoration:none;overflow:hidden;border:1px solid var(--trait)}
.disc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.78;transition:transform .4s ease,opacity .3s ease}
.disc:hover img{transform:scale(1.04);opacity:.9}
.disc .disc-texte{position:relative;padding:1.1rem 1.1rem 1rem;background:linear-gradient(transparent,rgba(14,17,22,.92) 45%)}
.disc h3{color:var(--blanc);font-size:1.25rem;margin-bottom:.25rem}
.disc h3::before{content:"\00BB ";color:var(--jaune)}
/* ⚠ Le texte réserve TROIS lignes, même quand il n'en occupe que deux.
   Sans ça, le bloc est calé en bas et c'est le TITRE qui monte ou
   descend selon la longueur de la description : dans une même rangée,
   les titres ne tombaient pas sur la même ligne — jusqu'à 20 px
   d'écart, mesuré. Une description courte laisse maintenant du vide
   sous elle, et les titres s'alignent. Trois lignes est le maximum
   relevé de 360 à 1920 px ; une description plus longue casserait de
   nouveau l'alignement — le contrôle automatique le signalerait. */
.disc p{margin:0;color:var(--alu);font-size:.86rem;line-height:1.4;min-height:4.2em}
.disc .nb{position:absolute;top:.7rem;right:.7rem;background:var(--jaune);color:var(--encre);font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;padding:.25rem .5rem}
@media(max-width:1000px){.disciplines{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.disciplines{grid-template-columns:1fr}.disc{min-height:170px}}

/* ---------- Vignettes produit ---------- */
.grille-produits{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:1rem}
.vignette{position:relative;display:flex;flex-direction:column;background:var(--blanc);border:1px solid var(--trait);text-decoration:none;color:inherit;transition:border-color .15s ease,transform .15s ease}
.vignette:hover{border-color:var(--jaune-fonce);transform:translateY(-3px)}
.vignette .photo{position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:.9rem;background:var(--blanc)}
.vignette .photo img{max-height:100%;width:auto;object-fit:contain;mix-blend-mode:multiply}
.vignette .photo .manque{width:70%;height:70%;border:1px dashed var(--alu);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.66rem;color:var(--gris);text-align:center;padding:1rem}
.vignette .corps{padding:.9rem 1rem 1rem;border-top:1px solid var(--trait);display:flex;flex-direction:column;gap:.35rem;flex:1}
.vignette .type{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--jaune-encre)}
.vignette h3{font-size:1.08rem;line-height:1.15}
.vignette .accroche{color:var(--gris);font-size:.86rem;line-height:1.4;margin:0}
.vignette .bas{margin-top:auto;padding-top:.6rem;display:flex;align-items:end;justify-content:space-between;gap:.5rem}
.vignette .tailles{font-family:var(--mono);font-size:.7rem;color:var(--gris);letter-spacing:.03em}
.vignette .prix{font-family:var(--display);font-weight:800;font-size:1.05rem;color:var(--encre)}
.vignette .prix small{font-family:var(--mono);font-weight:400;font-size:.66rem;color:var(--gris);display:block;letter-spacing:.06em}
.badges{position:absolute;top:.6rem;left:.6rem;display:flex;flex-direction:column;gap:.3rem;z-index:2}
.badge{font-family:var(--mono);font-weight:500;font-size:0.64rem;letter-spacing:.06em;text-transform:uppercase;line-height:1.35;padding:.22rem .55rem;border-radius:2px;background:var(--marine);color:var(--blanc)}
.badge.neuf{background:var(--jaune);color:var(--encre);font-weight:600}
.badge.promo{background:var(--noir);color:var(--jaune);font-weight:600}
.badge.hd{background:var(--noir);color:var(--jaune)}

/* --- La jauge de stock : cinq barres par paliers de cinq, comme sur reparermaroue.fr --- */
.jauge{display:inline-flex;align-items:flex-end;gap:1.5px;height:13px}
.jauge i{display:block;width:3.5px;background:#D7DADD;border-radius:.5px}
.jauge i:nth-child(1){height:5px}.jauge i:nth-child(2){height:7px}.jauge i:nth-child(3){height:9px}.jauge i:nth-child(4){height:11px}.jauge i:nth-child(5){height:13px}
.jauge.j1 i.on{background:#E03A2F}.jauge.j2 i.on{background:#F2761B}.jauge.j3 i.on{background:#F5B301}.jauge.j4 i.on{background:#8CC63F}.jauge.j5 i.on{background:#3DAE4B}
.stk{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.03em;white-space:nowrap}
.stk.cmde{color:#9C4715}
/* « Sur commande, nous contacter » est long : on l'autorise sur deux
   lignes plutôt que d'élargir le tableau et de créer un défilement
   horizontal sur les fiches qui n'ont aucune référence boutique. */
.tailles-table .stk.cmde{white-space:normal;display:inline}
.stk.n0 .lb{color:#9C4715}
.vignette .stk{position:absolute;right:.7rem;bottom:.85rem}
.vignette .stk.ok{background:var(--blanc);padding:.15rem .45rem;border:1px solid var(--trait);border-radius:999px}
.vignette .stk.cmde{background:var(--marine-nuit);color:var(--blanc);padding:.22rem .55rem;border-radius:2px;font-size:.62rem;text-transform:uppercase;letter-spacing:.06em}
.vignette .stk.contact{background:var(--gris-pale);color:var(--gris);padding:.22rem .55rem;border-radius:2px;font-size:.62rem;text-transform:uppercase;letter-spacing:.06em}

/* ---------- Filtres du catalogue ---------- */
.catalogue{display:grid;grid-template-columns:250px minmax(0,1fr);gap:clamp(1.25rem,3vw,2.5rem);align-items:start}
.filtres{position:sticky;top:96px;background:var(--blanc);border:1px solid var(--trait);padding:1.1rem 1.1rem 1.3rem}
.filtres h2{font-size:1rem;margin-bottom:.9rem}
.filtres fieldset{border:0;padding:0;margin:0 0 1.1rem}
.filtres legend{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--jaune-encre);margin-bottom:.5rem;padding:0}
.filtres label{display:flex;align-items:center;gap:.5rem;font-size:.9rem;padding:.22rem 0;cursor:pointer}
.filtres input{accent-color:var(--jaune-fonce)}
.filtres .compte{font-family:var(--mono);font-size:.68rem;color:var(--gris);margin-left:auto}
.filtres .raz{font-size:.85rem;color:var(--jaune-encre);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline}
.resume-filtres{font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;color:var(--gris);margin:0 0 .9rem}
.filtres-bouton{display:none}

/* ---- la recherche du catalogue ------------------------------------
   Le champ n'apparaît que si le script tourne : sans JavaScript, il ne
   filtrerait rien et ne ferait qu'une promesse en l'air. */
.recherche[hidden]{display:none}
.recherche{margin:0 0 .9rem}
.recherche label{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--jaune-encre);margin-bottom:.4rem}
.recherche .champ{display:flex;align-items:center;gap:.6rem;background:var(--blanc);border:1px solid var(--trait);border-left:4px solid var(--jaune);padding:.1rem .7rem}
.recherche .champ:focus-within{border-color:var(--encre);border-left-color:var(--jaune);box-shadow:0 0 0 3px rgba(255,242,0,.55)}
.recherche svg{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:var(--gris);stroke-width:2;stroke-linecap:round}
.recherche input{flex:1;min-width:0;border:0;outline:0;background:none;font-family:var(--texte);font-size:.95rem;color:var(--encre);padding:.62rem 0}
.recherche input::placeholder{color:var(--gris);opacity:.85}
.recherche input::-webkit-search-cancel-button{display:none}
.recherche .vider{border:0;background:none;color:var(--gris);font-size:1.35rem;line-height:1;cursor:pointer;padding:0 .1rem}
.recherche .vider:hover{color:var(--encre)}
@media(max-width:600px){.recherche input{font-size:16px}}

/* Une case de filtre qui ne mène à rien : grisée, et inactive. */
.filtres .aide-compte{font-size:.76rem;line-height:1.4;color:var(--gris);margin:-.4rem 0 1rem}
.filtres label.vide{color:var(--gris);opacity:.45;cursor:default}
.filtres label.vide input{cursor:default}

/* Ce que le site a à dire sur les disponibilités quand il ne peut pas
   les afficher — ou quand il en montre de fausses, exprès. */
.avis-stock{font-size:.86rem;line-height:1.45;background:var(--blanc);border:1px solid var(--trait);border-left:4px solid var(--jaune);padding:.75rem 1rem;margin:0 0 1.1rem}
.avis-stock.demo{border-left-color:var(--marine)}
.aucun{background:var(--blanc);border:1px solid var(--trait);border-left:4px solid var(--jaune);padding:1rem 1.2rem;margin:1rem 0}

/* La loupe de l'en-tête : même gabarit que le burger, sans le fond. */
.recherche-site{display:flex;align-items:center}
.lien-recherche{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--trait);border-radius:2px;flex:0 0 auto}
.lien-recherche svg{width:17px;height:17px;fill:none;stroke:var(--encre);stroke-width:2;stroke-linecap:round}
.lien-recherche:hover{border-color:var(--jaune-fonce);background:var(--jaune)}
.lien-recherche[aria-expanded="true"]{border-color:var(--jaune-fonce);background:var(--jaune)}

/* --- Le panneau de recherche du site ---------------------------------
   Il tombe sous l'en-tête, sur toute sa largeur, comme le panneau des
   disciplines : même géométrie, mêmes marges, même ombre. L'en-tête est
   « sticky », donc positionné : c'est lui le repère de ce left/right/top.
   Le panneau reste dans le flux du HTML mais masqué (hidden) tant que le
   script ne l'a pas ouvert — sans JavaScript, la loupe redevient le lien
   vers le catalogue et personne ne voit un champ mort. */
.recherche-panneau{position:absolute;left:0;right:0;top:100%;background:var(--blanc);
  border-bottom:1px solid var(--trait);box-shadow:0 14px 34px rgba(23,32,43,.14);
  padding:1.1rem 0 1.2rem;z-index:60}
.recherche-panneau[hidden]{display:none}
.recherche-boite{display:flex;align-items:center;gap:.7rem;background:var(--blanc);
  border:1px solid var(--encre);border-left:4px solid var(--jaune);padding:0 .85rem}
.recherche-boite:focus-within{box-shadow:0 0 0 3px rgba(255,242,0,.55)}
.recherche-boite > svg{width:19px;height:19px;flex:0 0 auto;fill:none;stroke:var(--gris);stroke-width:2;stroke-linecap:round}
.recherche-boite input{flex:1;min-width:0;border:0;outline:0;background:none;
  font-family:var(--texte);font-size:1rem;color:var(--encre);padding:.8rem 0}
.recherche-boite input::placeholder{color:var(--gris);opacity:.85}
.recherche-boite input::-webkit-search-cancel-button{display:none}
.recherche-vider{border:0;background:none;color:var(--gris);font-size:1.4rem;line-height:1;cursor:pointer;padding:0 .2rem}
.recherche-vider:hover{color:var(--encre)}
.recherche-fermer{border:0;background:none;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gris);cursor:pointer;
  padding:.35rem 0 .35rem .7rem;border-left:1px solid var(--trait)}
.recherche-fermer:hover{color:var(--encre)}
.recherche-resultats{margin-top:.7rem;max-height:min(58vh,25rem);overflow-y:auto}
.recherche-aide{font-size:.88rem;color:var(--gris);margin:.35rem .1rem 0}
.recherche-aide b{color:var(--encre);font-weight:600}
/* Une ligne de résultat. Les trois colonnes sont fixes à gauche et à
   droite : les noms s'alignent entre eux et les prix aussi, quelle que
   soit la longueur du libellé du milieu. */
.res{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:.95rem;
  padding:.5rem .6rem;text-decoration:none;color:var(--encre);border-radius:2px}
.res:hover,.res[data-actif]{background:var(--gris-pale)}
.res[data-actif]{outline:2px solid var(--jaune-fonce);outline-offset:-2px}
.res img{width:52px;height:52px;object-fit:contain;mix-blend-mode:multiply;display:block}
.res .rien{width:52px;height:52px;border:1px dashed var(--alu);border-radius:2px}
.res-nom{display:block;font-weight:600;font-size:.98rem;line-height:1.25}
.res-nom mark{background:var(--jaune);color:inherit;padding:0 1px}
.res-det{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gris);margin-top:.22rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.res-prix{font-family:var(--mono);font-size:.82rem;color:var(--encre);white-space:nowrap;text-align:right}
.res-prix small{display:block;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gris);margin-bottom:.1rem}
.recherche-pied{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:.55rem;padding-top:.6rem;border-top:1px solid var(--trait);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gris)}
.recherche-pied a{color:var(--encre)}
@media(max-width:760px){
  .recherche-fermer{display:none}
  .res{grid-template-columns:40px minmax(0,1fr) auto;gap:.7rem}
  .res img,.res .rien{width:40px;height:40px}
  .res-nom{font-size:.92rem}
  .res-det{font-size:.6rem;letter-spacing:.04em}
  .recherche-boite input{font-size:16px}   /* iOS n'agrandit pas la page en dessous */
}
@media(max-width:900px){
  .catalogue{grid-template-columns:1fr}
  .filtres{position:static}
  .filtres-bouton{display:inline-flex;margin-bottom:.8rem}
  .filtres[hidden]{display:none}
}

/* ---------- Fiche produit ---------- */
.fiche{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.fiche-visuel{background:var(--blanc);border:1px solid var(--trait);padding:1rem;position:sticky;top:100px}
/* Le fond blanc est explicite, et il le reste : mix-blend-mode ci-dessous
   multiplie la photo par CE QU'IL Y A DERRIÈRE. Sur un fond transparent,
   Safari et Chrome ne remontent pas à la même couche — la photo ressort
   grise chez l'un, propre chez l'autre. Nommer le blanc lève le doute. */
.fiche-visuel .grand{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;background:var(--blanc)}
.fiche-visuel .grand img{max-height:100%;width:auto;object-fit:contain;mix-blend-mode:multiply}
.fiche-visuel .grand .manque{width:70%;aspect-ratio:1;border:1px dashed var(--alu);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.72rem;color:var(--gris);text-align:center;padding:1.5rem}
.fiche-visuel .vues{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.8rem}
.fiche-visuel .vues button{background:var(--blanc);border:1px solid var(--trait);padding:.3rem;width:64px;height:64px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.fiche-visuel .vues button img{max-height:100%;width:auto;mix-blend-mode:multiply}
.fiche-visuel .vues button[aria-pressed="true"]{border-color:var(--jaune-fonce);box-shadow:0 0 0 2px var(--jaune)}
.fiche-visuel .vues button span{font-family:var(--mono);font-size:.6rem;color:var(--gris)}
@media(max-width:860px){.fiche{grid-template-columns:1fr}.fiche-visuel{position:static}}
/* --- Les étiquettes du haut de fiche ---------------------------------
   Refaites le 07/09/2026. Les capsules rondes d'avant avaient deux
   défauts : elles donnaient LA MÊME FORME à deux natures d'information
   — le type de pneu et ses largeurs — et le rayon 999px était le seul
   arrondi du site, où tout le reste tient en 2 ou 3 pixels.
   Trois formes désormais, et une seule par nature :
     .picto        un fait, en gris pâle — largeurs, hookless, boyau-pneu
     .picto.type   la construction, en marine plein avec son filet jaune
     .picto.neuf   la nouveauté, seule chose que le jaune signale ici
   Les largeurs tiennent dans UNE étiquette (« 25 · 28 · 32 mm ») : le
   catalogue n'en compte jamais plus de quatre. */
.pictos{display:flex;flex-wrap:wrap;gap:.38rem;margin:.2rem 0 1.1rem}
.picto{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;background:var(--gris-pale);padding:.3rem .56rem;border-radius:2px;color:var(--encre)}
.picto.type{background:var(--marine-nuit);color:var(--blanc);font-weight:500;border-left:3px solid var(--jaune);padding-left:.5rem}
.picto.neuf{background:var(--jaune);color:var(--encre);font-weight:500}
.fiche .accroche{font-size:1.12rem;color:var(--encre);font-weight:500;margin:0 0 .9rem}
.fiche .texte{color:var(--gris);font-size:.96rem}
.points{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.4rem}
.points li{position:relative;padding-left:1.4rem;font-size:.95rem}
.points li::before{content:"";position:absolute;left:0;top:.5em;width:10px;height:8px;background:var(--jaune);clip-path:polygon(0 0,45% 0,100% 50%,45% 100%,0 100%,55% 50%)}

/* --- Les jauges de critères (compétition, confort…) --- */
.criteres{display:grid;grid-template-columns:repeat(2,1fr);gap:.35rem 1.6rem;margin:0 0 1rem;padding:0;list-style:none}
.criteres li{display:grid;grid-template-columns:8.2rem 1fr;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--gris)}
.criteres .barre{height:8px;background:var(--gris-pale);border-radius:2px;overflow:hidden}
.criteres .barre i{display:block;height:100%;background:var(--jaune-fonce);border-radius:2px}
@media(max-width:560px){.criteres{grid-template-columns:1fr}}

/* --- Le tableau des tailles : la seule table du site --- */
.tailles-table{width:100%;border-collapse:collapse;background:var(--blanc);border:1px solid var(--trait);font-size:.9rem}
.tailles-table th{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);font-weight:500;text-align:left;padding:.6rem .7rem;border-bottom:2px solid var(--noir);white-space:nowrap}
.tailles-table td{padding:.6rem .7rem;border-bottom:1px solid var(--trait);vertical-align:middle}
.tailles-table tr:last-child td{border-bottom:0}
.tailles-table td.mod{font-weight:600}
.tailles-table td.num{font-family:var(--mono);font-size:.82rem;white-space:nowrap}
.tailles-table td.prix{font-family:var(--display);font-weight:800;white-space:nowrap}
.tailles-table td.dispo{white-space:nowrap}
/* Idem dans le tableau des tailles : une hauteur de ligne, identique
   pour les 3 à 12 boutons « Acheter » de la colonne. */
/* La colonne d'action du tableau des tailles. « Acheter » et « Nous
   contacter » ne font pas la même longueur : laissés libres, les boutons
   sortaient à deux largeurs différentes dans la même colonne.
   La cellule est ramenée à sa largeur minimale (width:1% sur une table en
   mise en page automatique = « aussi étroit que le contenu le permet ») ;
   c'est donc le libellé le plus long de la colonne qui la dimensionne, et
   le bouton la remplit. Tous font la même largeur, sans chiffre écrit en
   dur qui vieillirait au premier changement de libellé. */
/* Un fond gris pâle un MODÈLE sur deux (et non une ligne sur deux) : un
   modèle occupe autant de lignes qu'il a de coloris, et zébrer par ligne
   le couperait en deux. La classe est posée à la fabrication, sur le
   groupe, pas par un :nth-child qui ne saurait pas les compter.
   Le gris est celui des vignettes du catalogue, éclairci : il doit se
   deviner, pas se voir. */
.tailles-table tr.pair td{background:#F5F6F4}
.tailles-table td.action{width:1%;white-space:nowrap}
.tailles-table .bouton{padding:0 .8rem;height:2.35rem;font-size:.8rem;width:100%}
.tailles-table .cmde{font-family:var(--mono);font-size:.72rem;color:#9C4715}
.tailles-table .neuf{display:inline-block;background:var(--jaune);font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;padding:.1rem .4rem;margin-left:.4rem;vertical-align:middle;text-transform:uppercase}
.tailles-enveloppe{overflow-x:auto;margin-bottom:.6rem;border:1px solid var(--trait);background:var(--blanc)}
/* Le tableau prend toute la largeur de la page : les colonnes prix,
   stock et bouton doivent être visibles sans défilement horizontal. */
#tailles .tailles-table{width:100%}
#tailles .tailles-table td.mod{min-width:11rem}
.tailles-enveloppe .tailles-table{border:0}
@media(max-width:700px){.tailles-table th.opt,.tailles-table td.opt{display:none}}

/* --- Les technologies de la fiche ---
   Ce bloc est SOUS les deux colonnes, pleine largeur, et non dans la
   colonne de droite. La photo étant collante, la colonne de gauche
   restait vide sur 600 px : c'est cette hauteur-là qu'on récupère, sans
   rien retirer du contenu. */
.bloc-technos{margin-top:1.4rem}
.bloc-technos .h2-bloc{margin-top:0}
.technos{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;margin:0;padding:0;list-style:none}
.technos li{background:var(--blanc);border:1px solid var(--trait);border-left:4px solid var(--jaune);padding:.6rem .75rem}
.techno-logo{display:flex;align-items:center;height:34px;margin-bottom:.4rem}
.techno-logo img{max-height:100%;width:auto;max-width:78%;object-fit:contain}
.technos b{display:block;font-family:var(--display);font-size:.88rem;margin-bottom:.15rem}
.technos p{margin:0;font-size:.8rem;color:var(--gris);line-height:1.42}
@media(max-width:900px){.technos{grid-template-columns:repeat(2,1fr)}.technos p{font-size:.76rem}}
@media(max-width:560px){.technos{grid-template-columns:1fr}}
/* ⚠ Les trois boutons de la fiche NE TIENNENT PAS côte à côte.
   Mesuré le 06/09/2026 : il leur faut 544 px, et la colonne de droite
   de la fiche n'en fait que 406 à 557 selon la largeur d'écran. En
   « grid-auto-columns:1fr » chaque colonne se dilatait à la largeur de
   son libellé (nowrap) : la rangée sortait de la colonne et TOUTE LA
   PAGE prenait une barre de défilement horizontale, de 900 à 1 240 px.
   Deux colonnes suffisent largement (2 × 191 px = 393 px) : les deux
   premiers boutons se partagent la ligne, le troisième prend la
   largeur entière. Chaque rangée garde donc des boutons de largeur
   égale, la règle est tenue, et rien ne déborde nulle part.
   minmax(0,1fr) et non 1fr : c'est le « 0 » qui autorise la colonne à
   être plus étroite que son contenu, donc à ne jamais pousser. */
.fiche-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;margin:1rem 0 .4rem}
.fiche-actions > :last-child:nth-child(odd){grid-column:1 / -1}
@media(max-width:820px){.fiche-actions{grid-template-columns:1fr}}

/* ---------- Technologie : les coupes ---------- */
.constructions{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
.construction{background:var(--blanc);border:1px solid var(--trait);padding:1.4rem;display:flex;flex-direction:column;gap:.6rem}
.construction img{height:170px;width:auto;object-fit:contain;align-self:center}
.construction h3{font-size:1.3rem}
.construction h3::before{content:"\00BB ";color:var(--jaune-fonce)}
.construction p{color:var(--gris);font-size:.95rem;margin:0}
.construction .pour{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--jaune-encre)}
@media(max-width:760px){.constructions{grid-template-columns:1fr}}
/* Le schéma de coupe : dessin original, légendé A à F comme la liste qui
   le suit. Sans lui, les six lettres ne veulent rien dire. */
.coupe{margin:0 0 1.6rem;background:var(--blanc);border:1px solid var(--trait);padding:1rem 1rem .8rem}
.coupe-svg{display:block;width:100%;height:auto;max-width:1040px;margin-inline:auto}
.coupe-lettre{font-family:var(--mono);font-size:12px;font-weight:500;fill:var(--encre)}
.coupe-libelle{font-family:var(--display);font-size:15px;font-weight:700;fill:var(--encre)}
.coupe-jante{font-family:var(--mono);font-size:11px;letter-spacing:.12em;fill:#8A94A3}
.coupe figcaption{font-family:var(--mono);font-size:.7rem;line-height:1.6;color:var(--gris);text-align:center;margin-top:.4rem}
/* Sous 760 px, les libellés du schéma deviennent illisibles : on les retire
   et on garde le dessin — les six cartes juste en dessous disent la même
   chose en toutes lettres. */
@media(max-width:760px){.coupe-libelle,.coupe-jante{display:none}}

/* Les trois coupes tubeless, par terrain */
.coupes-trois{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.coupes-trois figure{margin:0;background:var(--blanc);border:1px solid var(--trait);padding:1rem 1.1rem 1.1rem;display:flex;flex-direction:column;align-items:center}
.coupes-trois img{height:170px;width:auto;object-fit:contain}
.coupes-trois figcaption{margin-top:.7rem;font-size:.88rem;color:var(--gris);line-height:1.45}
.coupes-trois figcaption b{display:block;font-family:var(--display);font-size:1rem;color:var(--encre);margin-bottom:.25rem}
@media(max-width:820px){.coupes-trois{grid-template-columns:1fr}}

.couches{counter-reset:c;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.couches li{counter-increment:c;background:var(--blanc);border:1px solid var(--trait);padding:.9rem 1rem .9rem 3rem;position:relative;font-size:.92rem}
.couches li::before{content:counter(c,upper-alpha);position:absolute;left:.9rem;top:.8rem;width:1.5rem;height:1.5rem;background:var(--jaune);font-family:var(--mono);font-size:.72rem;font-weight:500;display:flex;align-items:center;justify-content:center}
.couches b{display:block;margin-bottom:.15rem}
@media(max-width:860px){.couches{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.couches{grid-template-columns:1fr}}
.gommes{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem}
.gomme{background:var(--blanc);border:1px solid var(--trait);border-top:4px solid var(--jaune);padding:1.1rem 1.2rem;display:flex;flex-direction:column}
/* La pastille officielle Tufo, telle qu'elle figure sur les fiches du
   fabricant. Hauteur bornée : elles n'ont pas toutes le même gabarit
   (de 41 à 92 px de haut à l'origine), on les ramène à la même ligne. */
.gomme-logo{display:flex;align-items:center;height:52px;margin-bottom:.7rem}
.gomme-logo img{max-height:100%;width:auto;max-width:100%;object-fit:contain}
.gomme h3{font-size:1.02rem;margin-bottom:.4rem}
.gomme p{margin:0;font-size:.88rem;color:var(--gris);line-height:1.45}
.gomme .ou{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--jaune-encre);display:block;margin-top:.6rem}
@media(max-width:900px){.gommes{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.gommes{grid-template-columns:1fr}}

/* ---------- Conseils / articles ---------- */
.articles{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.article{background:var(--blanc);border:1px solid var(--trait);display:flex;flex-direction:column;text-decoration:none;transition:border-color .15s ease,transform .15s ease}
.article:hover{border-color:var(--jaune-fonce);transform:translateY(-3px)}
/* La photo du produit dont parle l'article, détourée, posée sur le marine
   de la tuile. La pointe jaune du site reste dans le coin. Sans photo, on
   retrouve le grand aplat diagonal d'origine. */
.article .img{height:170px;background:var(--marine-nuit) linear-gradient(135deg,var(--marine-nuit) 60%,var(--jaune) 60.5%);display:flex;align-items:end;padding:1rem;position:relative;overflow:hidden}
.article .img:has(img){background:var(--marine-nuit);padding:0;display:block}
.article .img:has(img)::after{content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,transparent 74%,var(--jaune) 74.5%)}
.article .img img{height:100%;width:100%;object-fit:contain;padding:.7rem 1.9rem .7rem .8rem}
/* Le manomètre est une prise de vue d'ambiance, pas un produit détouré :
   elle remplit la tuile et se fait couper par la pointe jaune. */
.article .img img.brut{object-fit:cover;padding:0;
  clip-path:polygon(0 0,100% 0,100% 74%,74% 100%,0 100%)}
.article .img span{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--jaune);position:relative;z-index:2}
.article .img:has(img) span{position:absolute;left:.9rem;bottom:.75rem;
  background:var(--marine-nuit);padding:.15rem .45rem}
.article-corps{padding:1.2rem 1.3rem}
.article-date{font-family:var(--mono);font-size:0.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--jaune-encre);display:block;margin-bottom:.6rem}
.article h3{margin-bottom:.5rem;font-size:1.08rem}
.article p{color:var(--gris);font-size:0.9rem;margin:0}
@media(max-width:900px){.articles{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.articles{grid-template-columns:1fr}}

.prose{max-width:46rem}
.prose h2{font-size:clamp(1.35rem,2.4vw,1.8rem);margin:2rem 0 .8rem}
.prose h2::before{content:"\00BB ";color:var(--jaune-fonce)}
.prose h3{margin:1.4rem 0 .5rem}
.prose p,.prose li{font-size:1.02rem;line-height:1.65}
.prose ul,.prose ol{padding-left:1.3rem;margin:0 0 1rem}
.prose li{margin-bottom:.35rem}
.prose table{width:100%;border-collapse:collapse;background:var(--blanc);border:1px solid var(--trait);font-size:.92rem;margin:0 0 1.2rem}
.prose th{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);font-weight:500;text-align:left;padding:.55rem .7rem;border-bottom:2px solid var(--noir)}
.prose td{padding:.5rem .7rem;border-bottom:1px solid var(--trait)}
/* Un tableau d'article ne descend pas sous la largeur de ses colonnes :
   sur un écran étroit, il élargissait toute la page — le texte des
   paragraphes partait alors hors champ, à droite. Il défile désormais
   dans son propre cadre. Repéré sur conseils-boyau-ou-tubeless.html
   à 390 px, le 6 septembre 2026. */
@media(max-width:760px){
  .prose table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* Le descriptif long d'une fiche produit : des intertitres nets, mais
   plus discrets que le titre de la section qui les porte. */
/* Deux colonnes : à une seule, le descriptif poussait le tableau des
   tailles 200 px plus bas pour la même quantité de texte. */
.detail-produit{max-width:64rem;column-count:2;column-gap:2.8rem}
/* Un intertitre ne se sépare JAMAIS de son texte. « break-after:avoid » sur
   le h3 ne suffit pas : en mise en colonnes, les navigateurs l'ignorent, et
   le titre restait seul en bas de la colonne de gauche. Chaque couple
   titre + texte est donc enfermé dans un .part que la colonne ne coupe pas.
   L'écart entre deux sections est porté par le .part, plus par le h3 :
   sinon les deux marges s'ajouteraient. */
.detail-produit .part{break-inside:avoid;margin:0 0 1.5rem}
.detail-produit .part:last-child{margin-bottom:0}
.detail-produit h3{break-after:avoid}
.detail-produit p{break-inside:avoid}
@media(max-width:820px){.detail-produit{column-count:1;max-width:52rem}}
.detail-produit h3{font-family:var(--display);font-size:1.08rem;letter-spacing:-.01em;margin:0 0 .45rem;padding-left:.7rem;border-left:4px solid var(--jaune)}
.detail-produit p{margin:0}
.prose .encadre{background:var(--blanc);border:1px solid var(--trait);border-left:4px solid var(--jaune);padding:1rem 1.2rem;margin:1.2rem 0}
.prose .encadre p:last-child{margin:0}
.prose .attention{border-left-color:var(--noir)}
.prose .duree{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);margin:0 0 1.4rem}
.prose .sommaire{background:var(--gris-pale);padding:1rem 1.2rem;margin:0 0 1.5rem;font-size:.92rem}
.prose .sommaire b{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);display:block;margin-bottom:.4rem;font-weight:500}
.prose .sommaire ol{margin:0}
.prose .sommaire a{text-decoration:none;color:var(--encre)}
.prose .sommaire a:hover{color:var(--jaune-encre)}
.prose a{text-decoration-color:var(--jaune-fonce);text-underline-offset:2px}
.prose a:hover{color:var(--jaune-encre)}
.etapes-num{counter-reset:e;list-style:none;padding:0;margin:0 0 1.2rem}
.etapes-num li{counter-increment:e;position:relative;padding-left:3rem;margin-bottom:1rem}
.etapes-num li::before{content:counter(e,decimal-leading-zero);position:absolute;left:0;top:.1rem;font-family:var(--mono);font-size:.8rem;font-weight:500;background:var(--jaune);padding:.15rem .4rem}
.etapes-num b{display:block;margin-bottom:.15rem}

/* ---------- FAQ ---------- */
.faq-groupe{margin-bottom:2rem}
.faq-groupe h2{font-size:1.4rem;margin-bottom:.8rem}
.faq details{background:var(--blanc);border:1px solid var(--trait);margin-bottom:.5rem}
.faq summary{cursor:pointer;padding:.9rem 1.1rem;font-weight:600;list-style:none;display:flex;gap:.7rem;align-items:baseline}
.faq summary::before{content:"\00BB";color:var(--jaune-fonce);font-family:var(--display);font-weight:800;flex:0 0 auto;transition:transform .2s ease;display:inline-block}
.faq details[open] summary::before{transform:rotate(90deg)}
.faq summary::-webkit-details-marker{display:none}
.faq .rep{padding:0 1.1rem 1rem 2.4rem;color:var(--gris);font-size:.95rem}
.faq .rep p:last-child{margin:0}

/* ---------- Trois parcours (accueil) ---------- */
.parcours{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
/* ⚠ color: est OBLIGATOIRE ici, il n'est pas décoratif.
   Une tuile blanche peut se poser dans une section sombre (l'accueil le
   fait) ; la section y met color:#fff pour son propre texte, et la
   tuile n'héritait que de ça. Le fond redevenait blanc, la couleur du
   texte restait blanche : le 06/09/2026, les titres « Le boyau », « Le
   boyau-pneu » et « Le tubeless ready » et leurs listes étaient
   INVISIBLES sur la page d'accueil — blanc sur blanc, un trou que rien
   ne signale. Une tuile qui pose son fond doit poser sa couleur. */
.voie{background:var(--blanc);color:var(--encre);border:1px solid var(--trait);border-top:4px solid var(--jaune);padding:clamp(1.4rem,2.4vw,2rem);display:flex;flex-direction:column}
.voie.pro{border-top-color:var(--noir)}
.voie.tech{border-top-color:var(--noir)}
.voie .public{font-family:var(--mono);font-size:0.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gris);display:block;margin-bottom:.6rem}
.voie h3{font-size:clamp(1.25rem,2vw,1.5rem);margin-bottom:.8rem}
.voie p{color:var(--gris);margin-bottom:1.2rem;font-size:0.96rem}
.voie ul{list-style:none;margin:0 0 1.6rem;padding:0}
.voie li{position:relative;padding-left:1.4rem;margin-bottom:.5rem;font-size:0.93rem}
.voie li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:2px;background:var(--jaune-fonce)}
.voie .voie-actions{margin-top:auto;display:flex;flex-direction:column;gap:.6rem}
@media(max-width:1000px){.parcours{grid-template-columns:1fr}}

/* ---------- Fins de série ---------- */
/* ---------- Promos et fins de série : UNE SEULE LIGNE qui défile ----------
   Demandé par Rémy le 06/09/2026. En grille, la cinquième carte partait
   seule à la ligne et laissait trois trous : une liste qui varie de deux à
   dix références ne se range pas en grille fixe.

   Le défilement est en CSS pur : la ligne se prend au doigt et au pavé
   tactile même sans JavaScript. Les deux flèches sont un CONFORT ajouté
   par le script — elles n'apparaissent que s'il y a de quoi défiler, et
   elles sont masquées à l'impression. */
.fins-piste{position:relative}
.fins{list-style:none;margin:0;padding:0 0 .3rem;
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(258px,1fr);gap:.7rem;
  overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x proximity;
  scrollbar-width:thin}
/* Une seule carte tient toute la largeur plutôt que de flotter à gauche. */
.fins.tient{grid-auto-columns:minmax(258px,1fr);overflow-x:visible}
.fins li{background:var(--blanc);border:1px solid var(--trait);padding:.9rem 1rem;
  display:flex;flex-direction:column;gap:.3rem;font-size:.92rem;scroll-snap-align:start}
.fins .prix{font-family:var(--display);font-weight:800}
.fins small{color:var(--gris);font-size:.8rem}
/* Le lien est poussé en bas : dans une ligne de cartes de hauteurs
   différentes, les « Voir sur velox.fr » tombent sur la même ligne. */
.fins li > a{margin-top:auto;padding-top:.35rem;color:var(--jaune-encre);font-weight:600;
  text-decoration:none;font-size:.88rem}
.fins li > a:hover{text-decoration:underline}

/* Les deux flèches : mêmes dimensions, posées dans l'en-tête de section,
   à droite du titre. Carrées, donc largeur = hauteur, et la hauteur est
   celle des boutons de tableau — le plus petit gabarit du site. */
.fins-fleches{display:flex;gap:.4rem}
.fins-fleches button{width:2.35rem;height:2.35rem;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--blanc);border:1px solid var(--trait);color:var(--encre);
  cursor:pointer;border-radius:3px;transition:border-color .15s ease,color .15s ease}
.fins-fleches button:hover:not(:disabled){border-color:var(--jaune-fonce)}
.fins-fleches button:disabled{color:var(--alu);cursor:default}
.fins-fleches svg{width:15px;height:15px;fill:currentColor}
@media print{.fins-fleches{display:none}.fins{overflow:visible}}

/* ---------- Appel final ---------- */
.final{background:var(--jaune);color:var(--encre);text-align:center;padding-block:clamp(2rem,3.4vw,3rem)}
.final h2{color:var(--encre);max-width:24ch;margin-inline:auto}
.final p{color:var(--encre);font-weight:500;max-width:48ch;margin:1.2rem auto 1.6rem}
.final .bouton{margin:.3rem}
/* UNE RANGÉE DE BOUTONS : MÊMES LARGEURS.
   Même grammaire que .hero-actions, .fiche-actions et .doc-actions, qui
   sont des grilles à colonnes égales depuis le début. Les blocs .final
   et la page 404, eux, laissaient les boutons à leur largeur naturelle :
   « La page Technologie » faisait 201 px et « Filtrer le catalogue »
   186 px, côte à côte, sur neuf pages. Mesuré, pas jugé à l'œil.

   Sous 520 px ils passent l'un sous l'autre : à deux colonnes, un
   libellé long deviendrait illisible plutôt que simplement plus étroit. */
.boutons{display:inline-grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:.7rem;vertical-align:top}
.final .boutons .bouton{margin:0}
@media(max-width:520px){.boutons{grid-auto-flow:row;width:100%}}
.final .bouton-vide{border-color:rgba(23,32,43,.5)}

/* ---------- Pied ---------- */
.pied{background:var(--marine-nuit);color:var(--alu);padding-block:2.5rem 1.5rem;font-size:0.92rem}
.pied-g{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem}
.pied h2{font-family:var(--mono);font-size:0.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--jaune);margin:0 0 1rem;font-weight:500}
.pied ul{list-style:none;margin:0;padding:0}
.pied li{margin-bottom:.35rem}
.pied a{color:var(--alu);text-decoration:none}
.pied a:hover{color:var(--blanc);text-decoration:underline}
.pied address{font-style:normal;line-height:1.8;margin-bottom:1rem}
.pied .logo-velox{color:var(--blanc);height:52px;margin-bottom:.8rem}
.pied-reseaux{display:flex;gap:.6rem;margin-top:1.2rem}
.pied-reseaux a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid rgba(255,255,255,.22);border-radius:3px;color:var(--alu)}
.pied-reseaux a:hover{color:var(--blanc);border-color:var(--jaune);text-decoration:none}
.pied-reseaux svg{width:19px;height:19px;fill:currentColor}
.pied-b{border-top:1px solid rgba(255,255,255,.12);margin-top:2rem;padding-top:1.15rem;font-family:var(--mono);font-size:0.72rem;letter-spacing:.07em;color:#8894A6;display:flex;flex-wrap:wrap;gap:.5rem 2rem;justify-content:space-between}
@media(max-width:900px){.pied-g{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.pied-g{grid-template-columns:1fr;gap:1.6rem}}

/* ---------- Divers ---------- */
.ic{width:26px;height:26px;display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mentions{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.mentions .bloc{background:var(--blanc);border:1px solid var(--trait);padding:1.2rem 1.4rem;font-size:.93rem}
.mentions .bloc h2{font-size:1.1rem;margin-bottom:.7rem}
.mentions .bloc p{color:var(--gris);margin-bottom:.7rem}
.mentions .bloc p:last-child{margin:0}
.mentions .fiche-id{background:var(--gris-pale);padding:.9rem 1rem;font-size:.9rem;line-height:1.7}
@media(max-width:800px){.mentions{grid-template-columns:1fr}}
.p404{text-align:center;padding-block:clamp(3rem,8vw,6rem)}
.p404 .code{font-family:var(--display);font-weight:800;font-size:clamp(5rem,16vw,10rem);line-height:1;color:var(--jaune);-webkit-text-stroke:2px var(--encre)}
@media(prefers-reduced-motion:reduce){.bouton:hover,.vignette:hover,.article:hover{transform:none}html{scroll-behavior:auto}}
@media print{
  .entete,.confiance,.pied,.burger,.menu-mobile,.filtres,.final,.hero-actions,.fiche-actions{display:none !important}
  .hero,.page-tete,.section.sombre{background:#fff !important;color:#000 !important}
  .hero::before,.hero::after,.page-tete::before{display:none}
  .fiche{grid-template-columns:1fr}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.7em;color:#555}
}


/* =====================================================================
   CLASSES UTILITAIRES — remplacent les attributs style="…"

   Ces classes existent pour UNE raison, et il ne faut pas la perdre :
   la politique de sécurité servie par Cloudflare interdit désormais le
   style écrit dans la balise — « style-src 'self' », SANS
   'unsafe-inline'. Un attribut style= est alors purement ignoré par le
   navigateur, sans message et sans page cassée : le style ne s'applique
   pas, c'est tout.

   C'est exactement ce qui s'était produit le 4 septembre 2026 sur les
   fiches produit : les six barres du diagramme de propriétés portaient
   leur valeur en style="width:40%", la largeur était ignorée, et les
   six barres s'affichaient pleines et identiques — un diagramme faux,
   sur les 31 fiches qui en ont un.

   ⚠ RÈGLE : ne jamais réintroduire un attribut style= dans une page.
   Toute mise en forme passe par une classe, ici ou plus haut.
   ===================================================================== */
.en-jaune{color:var(--jaune)}
.en-gris{color:var(--gris)}
.gris-intro{color:var(--gris);max-width:52rem;margin-top:-.4rem}
.gris-centre{color:var(--gris);max-width:40rem;margin-inline:auto}
.h2-moyen{font-size:1.6rem}
.h2-petit{font-size:1.5rem}
.h2-groupe{font-size:1.35rem;margin:1.8rem 0 .9rem}
.h2-groupe-serre{font-size:1.35rem;margin:1.6rem 0 .9rem}
.h2-bloc{font-size:1.25rem;margin:1.6rem 0 .3rem}
.compte-mono{font-family:var(--mono);font-size:.7rem;color:var(--gris);letter-spacing:.1em;font-weight:400}
.pleine-largeur{max-width:none;margin-bottom:.5rem}
.marge-h-s{margin-top:.8rem}
.marge-h-m{margin-top:1.2rem}
.marge-h-l{margin-top:2.5rem}
.h1-404{font-size:clamp(1.6rem,3vw,2.3rem);margin:.5rem 0 1rem}
.photo-attente{width:300px;height:300px;border:1px dashed rgba(255,255,255,.4);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.7rem;color:#8894A6}

/* Les barres des diagrammes de propriétés, de 0 à 100 par pas de 5
   (« pr » comme propriété : « n0 » est déjà pris par la jauge de
   stock). Les notes des données sont toutes des multiples de 5 ; le
   script arrondit par sécurité, pour qu'une valeur intermédiaire ne se
   retrouve jamais sans classe — donc sans largeur. */
.pr0{width:0%}.pr5{width:5%}.pr10{width:10%}.pr15{width:15%}.pr20{width:20%}.pr25{width:25%}.pr30{width:30%}.pr35{width:35%}.pr40{width:40%}.pr45{width:45%}.pr50{width:50%}.pr55{width:55%}.pr60{width:60%}.pr65{width:65%}.pr70{width:70%}.pr75{width:75%}.pr80{width:80%}.pr85{width:85%}.pr90{width:90%}.pr95{width:95%}.pr100{width:100%}


/* =====================================================================
   LE FORMULAIRE DE CONTACT

   Même grammaire que le champ de recherche du catalogue : fond blanc,
   filet fin, et un LISERÉ JAUNE À GAUCHE qui dit « c'est ici qu'on
   écrit ». Au focus, le filet passe à l'encre et le halo jaune reprend
   celui des boutons — un seul vocabulaire pour tout le site.
   ===================================================================== */
.formulaire{max-width:44rem}
.form-grille{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.1rem}
.form-grille .large{grid-column:1 / -1}
.champ-bloc{display:flex;flex-direction:column}
.champ-bloc label{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--jaune-encre);margin-bottom:.35rem}
.champ-bloc label .opt{color:var(--gris);letter-spacing:.06em}
.champ-bloc input,.champ-bloc select,.champ-bloc textarea{
  width:100%;background:var(--blanc);border:1px solid var(--trait);border-left:4px solid var(--jaune);
  padding:.7rem .8rem;font-family:var(--texte);font-size:.95rem;color:var(--encre);outline:0;border-radius:0}
.champ-bloc textarea{min-height:9rem;resize:vertical;line-height:1.55}
.champ-bloc input:focus,.champ-bloc select:focus,.champ-bloc textarea:focus{
  border-color:var(--encre);border-left-color:var(--jaune);box-shadow:0 0 0 3px rgba(255,242,0,.55)}
/* Le rouge ne vient QU'APRÈS une tentative d'envoi ou une sortie de
   champ — :user-invalid, et non :invalid, qui marquerait en faute un
   champ vide que le visiteur n'a pas encore touché. */
.champ-bloc input:user-invalid,.champ-bloc textarea:user-invalid,.champ-bloc select:user-invalid{border-color:#9C4715}
.aide-champ{font-size:.82rem;color:var(--gris);margin-top:.3rem}

/* Le choix du profil. La classe .choisi est posée par le script :
   :has() ne suffit pas, les Safari d'avant 2023 ne le connaissent pas. */
.profil{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin:0 0 1.7rem;max-width:44rem}
.profil label{position:relative;display:block;background:var(--blanc);border:1px solid var(--trait);border-left:4px solid var(--trait);padding:1rem 1.1rem;cursor:pointer}
.profil label:hover{border-color:var(--alu);border-left-color:var(--jaune)}
.profil input{position:absolute;opacity:0;width:0;height:0}
.profil b{display:block;font-family:var(--display);font-weight:700;font-size:1rem;color:var(--encre)}
.profil span{display:block;font-size:.87rem;color:var(--gris);margin-top:.2rem}
/* La tuile choisie passe en MARINE NUIT, texte blanc, filet jaune.
   Le fond jaune très pâle qui servait avant (#FFDE6) n'appartenait à
   aucune palette du site : ni le jaune Tufo, ni un des gris. */
.profil label.choisi{background:var(--marine-nuit);border-color:var(--marine-nuit);
  border-left-color:var(--jaune);border-left-width:6px}
.profil label.choisi b{color:var(--blanc)}
.profil label.choisi span{color:var(--alu)}
.profil input:focus-visible + b{outline:2px solid var(--encre);outline-offset:3px}

/* Le bloc magasin s'ouvre EN TÊTE du formulaire : le filet et la marge
   sont donc en bas, pas en haut. */
.bloc-pro{border-bottom:1px solid var(--trait);margin-bottom:1.5rem;padding-bottom:1.3rem}
/* Le captcha Cloudflare Turnstile. On ne touche pas au widget lui-même —
   c'est un cadre extérieur, on n'a aucune prise dedans : on lui réserve
   sa place. La hauteur est posée d'avance (65 px, la taille « normal »
   de Turnstile) pour que l'arrivée du widget ne fasse pas sauter le
   bouton d'envoi une seconde après l'affichage de la page.

   Sa largeur, elle, est FIXE : 300 px, et Turnstile n'offre aucun moyen
   de la réduire. La zone utile d'une page vaut « largeur − 2 × 20 px »
   tant que l'écran fait moins de 400 px : elle passe donc sous 300 px
   dès 339 px d'écran, et le widget ferait défiler la page latéralement.
   D'où ce seuil à 339 px — et pas à 360 px, où les 300 px tiennent
   encore sans être rétrécis pour rien. Un iPhone SE de première
   génération fait 320 px : 0,9 × 300 = 270 px, ça rentre, et le widget
   reste lisible et cliquable. */
.captcha{margin:1.5rem 0 0;max-width:44rem}
.captcha .etiquette{margin-bottom:.55rem}
.captcha .cf-turnstile{min-height:65px}
@media(max-width:339px){
  .captcha .cf-turnstile{transform:scale(.9);transform-origin:0 0;min-height:59px}
}

.case{display:flex;gap:.6rem;align-items:flex-start;margin:1.2rem 0 0;max-width:44rem}
.case input{margin-top:.2rem;width:18px;height:18px;accent-color:var(--noir);flex:0 0 auto}
.case label{font-size:.9rem;color:var(--encre);line-height:1.5}
.form-pied{display:flex;flex-wrap:wrap;align-items:center;gap:1.1rem;margin-top:1.6rem}
.form-note{font-size:.82rem;color:var(--gris);max-width:32rem;line-height:1.5;margin:0}
.form-pied button[disabled]{opacity:.55;cursor:progress;transform:none}

/* La réponse après envoi. Elle remplace le formulaire : on ne laisse pas
   le visiteur se demander si son message est parti. */
.form-reponse{border-left:4px solid var(--jaune);background:var(--gris-pale);padding:1.4rem 1.5rem;max-width:44rem}
.form-reponse h2{font-size:1.25rem;margin:0 0 .5rem}
.form-reponse p{margin:0;color:var(--gris)}
.form-reponse.erreur{border-left-color:#C0392B;background:#FCF3F1}
.form-reponse.erreur p{color:var(--encre)}

/* Les coordonnées, à côté du formulaire sur grand écran. */
.contact-grille{display:grid;grid-template-columns:1.55fr 1fr;gap:2.4rem;align-items:start}
.coord{background:var(--gris-pale);padding:1.3rem 1.4rem;border-left:4px solid var(--jaune)}
.coord dt{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);margin-top:1rem}
.coord dt:first-of-type{margin-top:0}
.coord dd{margin:.15rem 0 0;font-size:.95rem;line-height:1.5}
.coord dd small{color:var(--gris)}
.coord a{color:var(--encre)}
@media(max-width:900px){.contact-grille{grid-template-columns:1fr;gap:1.8rem}}
@media(max-width:620px){.form-grille,.profil{grid-template-columns:1fr}}

/* ---------- « Dans la même famille », sous une fiche produit ----------
   Vignettes compactes : sur mobile, ce bloc pesait 32 % de la hauteur de
   la page — quatre vignettes pleines pour une liste qu'on parcourt du
   regard. La classe est propre à la fiche : les grilles de l'accueil et
   du catalogue gardent leur taille. */
.famille-proches .grille-produits{grid-template-columns:repeat(4,1fr);gap:.7rem}
.famille-proches .vignette .photo{aspect-ratio:16/10}
.famille-proches .vignette .corps{padding:.6rem .7rem}
.famille-proches .vignette .accroche{display:none}
.famille-proches .vignette h3{font-size:.95rem}
@media(max-width:900px){.famille-proches .grille-produits{grid-template-columns:repeat(2,1fr)}}

/* ---------- Vidéo YouTube, à chargement différé ----------
   RIEN n'est demandé à YouTube tant que le visiteur n'a pas cliqué : la
   vignette est dessinée ici, en couleurs du site. Au clic seulement, le
   script pose l'iframe vers youtube-nocookie.com. Deux raisons :
   la page reste légère, et aucun cookie tiers n'est déposé sans geste
   du visiteur — ce que disent les mentions légales.

   ⚠ La politique de sécurité doit autoriser l'image : frame-src
   https://www.youtube-nocookie.com. Elle est servie par CLOUDFLARE,
   pas par ce .htaccess. Sans la règle Cloudflare, le lecteur reste
   noir, SANS message d'erreur. */
.video{margin:1.6rem 0 1.4rem;max-width:46rem}
.video-lancer{position:relative;display:block;width:100%;aspect-ratio:16/9;
  background:var(--marine-nuit);border:0;padding:0;cursor:pointer;overflow:hidden;
  text-align:left;font-family:inherit}
.video-lancer::before{content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,transparent 78%,var(--jaune) 78.5%)}
.video-play{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  width:84px;height:84px;border-radius:50%;background:var(--jaune);
  display:flex;align-items:center;justify-content:center;transition:transform .15s ease}
.video-play::after{content:"";width:0;height:0;margin-left:6px;
  border-left:26px solid var(--marine-nuit);border-top:16px solid transparent;
  border-bottom:16px solid transparent}
.video-lancer:hover .video-play{transform:translate(-50%,-50%) scale(1.08)}
.video-titre{position:absolute;left:1.2rem;bottom:2.5rem;right:1.2rem;color:var(--blanc);
  font-family:var(--display);font-weight:700;font-size:1.15rem;line-height:1.15}
.video-note{position:absolute;left:1.2rem;bottom:1.1rem;right:1.2rem;color:var(--alu);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase}
.video iframe{display:block;width:100%;aspect-ratio:16/9;border:0;background:var(--marine-nuit)}
.video figcaption{font-size:.86rem;color:var(--gris);margin-top:.55rem}
@media(max-width:560px){
  .video-play{width:62px;height:62px}
  .video-play::after{border-left-width:20px;border-top-width:12px;border-bottom-width:12px}
  .video-titre{font-size:.98rem;bottom:2.7rem}
}

/* ---------- Documentation technique : le grand tableau ----------
   Il reprend le tableau des tailles des fiches, avec des lignes de
   regroupement par discipline. */
.doc-table td a{color:var(--encre);font-weight:600}
.doc-groupe th{background:var(--marine-nuit);color:var(--jaune);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  text-align:left;padding:.5rem .7rem;border-bottom:0}

/* ---------- Documents à feuilleter (catalogue, notices) ----------
   Même principe que la vidéo : le PDF n'est PAS chargé au chargement de
   la page. Le lecteur est une iframe posée au clic, ce qui évite de
   faire descendre 14 Mo à un visiteur qui passait juste par là.
   ⚠ Demande frame-src 'self' dans la politique de sécurité — celle de
   Cloudflare, pas seulement celle du .htaccess. */
.documents{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1rem}
.doc{background:var(--blanc);border:1px solid var(--trait);border-top:4px solid var(--jaune);
  display:flex;flex-direction:column}
.doc-texte{padding:1.2rem 1.3rem;display:flex;flex-direction:column;flex:1}
.doc-couv{background:var(--noir);overflow:hidden;aspect-ratio:16/9}
.doc-couv img{width:100%;height:100%;object-fit:cover;display:block}
.doc .format{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris);display:block;margin-bottom:.5rem}
.doc h3{font-size:1.15rem;margin-bottom:.5rem}
.doc p{color:var(--gris);font-size:.94rem;margin:0 0 1rem}
.doc-actions{margin-top:auto;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:.6rem}
@media(max-width:620px){.doc-actions{grid-auto-flow:row}}

.lecteur{margin-top:1.4rem;border:1px solid var(--trait);background:var(--blanc);
  scroll-margin-top:96px}
.lecteur-barre{background:var(--marine-nuit);color:var(--blanc);display:flex;
  align-items:center;justify-content:space-between;gap:1rem;padding:.6rem .9rem}
.lecteur-barre b{font-family:var(--display);font-size:.95rem}
.lecteur-fermer{background:none;border:0;color:var(--blanc);font-size:1.05rem;
  cursor:pointer;padding:.2rem .5rem;line-height:1}
.lecteur-fermer:hover{color:var(--jaune)}
.lecteur-cadre{height:78vh;min-height:520px}
.lecteur-cadre iframe{width:100%;height:100%;border:0;display:block}
@media(max-width:760px){.lecteur-cadre{height:66vh;min-height:400px}}


/* ---------- Le panneau « Pneus » de la barre de navigation ----------
   Il s'ouvre au survol ET au clic (donc au clavier et au doigt) : le
   survol seul exclurait les tablettes et la navigation au clavier.
   Le script pose aria-expanded ; sans lui, le bouton reste un bouton
   inerte et le menu téléphone, lui, liste tout à plat. */
/* Le bouton jaune porte le panneau : il reste un LIEN vers le catalogue
   — le clic emmène voir tous les pneus — et le survol déroule les huit
   disciplines. Au clavier, le focus ouvre le panneau et Entrée suit le
   lien : les deux chemins marchent. */
.sousmenu{display:flex;align-items:center}
.sousmenu-tete .chev{width:0;height:0;border-left:4px solid transparent;
  border-right:4px solid transparent;border-top:5px solid var(--marine-nuit);
  transition:transform .18s ease;margin-left:.1rem}
.sousmenu-tete[aria-expanded="true"] .chev{transform:rotate(180deg)}

/* Le panneau prend toute la largeur de la fenêtre, sous la barre. */
.panneau{position:absolute;left:0;right:0;top:100%;background:var(--blanc);
  border-top:1px solid var(--trait);border-bottom:3px solid var(--jaune);
  padding:1.3rem 0 1.5rem;box-shadow:0 18px 30px rgba(23,32,43,.10);z-index:60}
.panneau-grille{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;align-items:start}
/* Une tuile = une photo de la discipline, puis son nom et le nombre de
   modèles. Les photos sortent des ouvertures de chapitre du catalogue
   Tufo 2025 : même source et mêmes droits que les photos produit. */
.disc-lien{display:block;text-decoration:none;background:var(--blanc);
  border:1px solid var(--trait);overflow:hidden;position:relative}
.disc-lien .disc-photo{display:block;aspect-ratio:16/10;background:var(--marine-nuit);
  overflow:hidden}
.disc-lien .disc-photo img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .35s ease}
.disc-lien:hover .disc-photo img{transform:scale(1.05)}
.disc-lien .disc-texte{display:block;padding:.6rem .8rem;border-left:4px solid var(--jaune)}
.disc-lien:hover{border-color:var(--alu)}
.disc-lien:hover .disc-texte{border-left-color:var(--jaune-fonce);background:var(--gris-pale)}
.disc-lien.actif{border-color:var(--encre)}
.disc-lien.actif .disc-texte{border-left-color:var(--jaune-fonce)}
.disc-lien b{display:block;font-family:var(--display);font-size:1rem;color:var(--encre);
  line-height:1.15;margin-bottom:.1rem}
.disc-lien .disc-texte span{display:block;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.panneau-pied{display:flex;justify-content:space-between;align-items:center;
  gap:1rem;flex-wrap:wrap;margin-top:1rem}
.panneau-pied p{margin:0;font-size:.9rem;color:var(--gris);max-width:44rem}
@media(max-width:1180px){.sousmenu{display:none}}

/* Les intertitres du menu téléphone */
.menu-mobile .menu-titre{display:block;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gris);
  padding:.9rem 0 .3rem;border-bottom:0}