:root{
  --nuit:var(--sp-nuit);--trait:var(--sp-texte-sur-nuit);--trait-rgb:var(--sp-texte-sur-nuit-rgb);--gris:var(--sp-gris-sur-nuit);--jaune:var(--sp-bronze-clair);
  --vert:var(--sp-homologue-fond);--ocre:var(--sp-expertise-fond);--oxyde:var(--sp-circuit-fond);
  --display:var(--sp-police-titre);
  --corps:var(--sp-police-texte);
  --mono:var(--sp-police-mono);
}
/* Utilitaire réutilisable — jusqu'ici chaque sélecteur qui voulait du
   monospace redéfinissait font-family:var(--mono) localement (.marque-p,
   .dispo...). Gardé pour ces cas-là (spécificité déjà en place, rien à
   casser) ; .mono sert aux nouveaux éléments qui n'ont pas de sélecteur
   dédié, sans dupliquer la déclaration. */
.mono{font-family:var(--mono)}
/* ---------- thème clair : uniquement les pages texte (contact, expertise,
   légal…) ----------  Le catalogue, les fiches produit/homologation et le
   pied de page restent dans le thème sombre par défaut (:root), pour ne
   pas rebasculer en crème au clic sur un article ou son homologation. */
.page-texte{
  --nuit:var(--sp-papier);--trait:var(--sp-encre);--trait-rgb:var(--sp-encre-rgb);--gris:var(--sp-gris);
  --jaune:var(--sp-bronze);--vert:var(--sp-homologue-texte);--ocre:var(--sp-expertise-texte);--oxyde:var(--sp-circuit-texte);
  background:var(--nuit);color:var(--trait);
}
.catalogue img.vignette-piece,.fiche img.vignette-piece{
  box-shadow:0 0 0 1px rgba(var(--sp-encre-rgb),.08),0 2px 10px rgba(var(--sp-encre-rgb),.07)}
body:has(.page-texte){
  --nuit:var(--sp-papier);--trait:var(--sp-encre);--trait-rgb:var(--sp-encre-rgb);--gris:var(--sp-gris);--jaune:var(--sp-bronze);
  background:var(--nuit);color:var(--trait);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--nuit);color:var(--trait);font-family:var(--corps);
  -webkit-font-smoothing:antialiased}
/* Fond du hero : dégradé très sombre légèrement bleuté vers le bas, pour
   rejoindre le ciel nocturne de la scène 3D au lieu de juxtaposer deux noirs
   différents. Le canvas WebGL est opaque, il recouvre sa moitié — le dégradé
   n'est visible que derrière le texte et la barre. */
.hero{position:relative;z-index:1;height:min(72vh,760px);
  background:
    /* débord chaud de la marquise : le foyer est sous le canvas, seule sa
       retombée gauche déborde sur la colonne texte, comme une lumière de
       station qui lèche le panneau */
    radial-gradient(76% 118% at 63% 36%,
      rgba(228,178,88,.16) 0%, rgba(228,178,88,.055) 40%, transparent 66%),
    /* remontée froide du bitume mouillé, coin bas gauche */
    radial-gradient(88% 78% at 6% 110%,
      rgba(96,140,176,.15) 0%, transparent 62%),
    linear-gradient(168deg,#090D0F 0%,#11161A 54%,#161F27 100%);
  min-height:560px;display:flex;flex-direction:column}

/* Trame de plan d'atelier, côté texte uniquement, en fondu vers la 3D pour
   qu'aucune arête ne vienne couper le hero en deux. Purement décoratif :
   pointer-events:none et aria-hidden implicite (pseudo-élément). */
.hero-texte::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    /* divisions majeures tous les 170 px (= 5 × 34), elles retombent donc
       pile sur une ligne mineure : c'est ce qui fait lire une grille cotée
       plutôt qu'un simple quadrillage */
    repeating-linear-gradient(0deg,  rgba(var(--trait-rgb),.13) 0 1px, transparent 1px 170px),
    repeating-linear-gradient(90deg, rgba(var(--trait-rgb),.13) 0 1px, transparent 1px 170px),
    /* divisions mineures */
    repeating-linear-gradient(0deg,  rgba(var(--trait-rgb),.055) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(var(--trait-rgb),.055) 0 1px, transparent 1px 34px);
  -webkit-mask-image:linear-gradient(100deg,#000 55%,transparent 92%);
  mask-image:linear-gradient(100deg,#000 55%,transparent 92%)}
.barre{position:sticky;top:0}
.hero-corps{position:relative;flex:1;min-height:0;display:flex}
/* overflow:hidden pour que le panneau, rangé en translateX(100%), reste
   caché derrière la photo au lieu de déborder du hero. */
.hero-texte{position:relative;flex:0 1 42%;min-width:280px;display:flex;
  flex-direction:column;justify-content:center;padding:16px clamp(24px,4vw,64px);
  overflow:hidden}
.hero-texte > *{position:relative}   /* le texte passe au-dessus de la trame */
.hero-texte .eyebrow{margin:0 0 12px;font-family:var(--mono);font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gris)}
.hero-texte h1{margin:0 0 16px;font-family:var(--display);font-weight:800;
  font-size:clamp(28px,3.4vw,44px);line-height:1.06;letter-spacing:-.03em;max-width:22ch}
.hero-sous{margin:0 0 8px;font-size:15.5px;line-height:1.65;color:var(--gris);max-width:46ch}
.hero-demo{margin:0 0 14px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  color:var(--ocre)}
.hero-statuts{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:7px}
.hero-statuts li{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.hero-statuts li>span:last-child{font-size:12.5px;color:var(--gris)}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px}
.hero-cta .bouton{display:inline-block;width:auto;padding:15px 28px}
.lien-secondaire{color:var(--trait);text-decoration:none;
  border-bottom:1px solid rgba(var(--trait-rgb),.35);font-family:var(--mono);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.lien-secondaire:visited{color:var(--trait)}
.lien-secondaire:hover{color:var(--jaune);border-color:var(--jaune)}

.reassurance{border-bottom:1px solid rgba(var(--trait-rgb),.12)}
.showcase-home{position:relative;z-index:2;background:#0d0e0e;color:#ece0c8;padding:20px clamp(20px,3vw,42px) 28px;border-top:1px solid rgba(236,224,200,.12)}
.showcase-categories{display:flex;overflow:auto;border-bottom:1px solid rgba(236,224,200,.12);margin-bottom:18px}
.showcase-category{flex:1 0 auto;min-height:58px;padding:18px 22px;gap:8px;color:#8E9CA6;
  font-size:12px;text-decoration:none;display:flex;align-items:center;justify-content:center;
  border-right:1px solid rgba(236,224,200,.1);white-space:nowrap;transition:color .18s,background .18s}
.showcase-category:hover,.showcase-category:focus-visible{color:#e0a82e;background:rgba(140,90,22,.08)}
.showcase-category span{font-family:var(--mono);font-size:9.5px;color:#68747D}
.showcase-category:hover span{color:#b98a43}
.showcase-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.showcase-card{display:flex;align-items:center;gap:12px;min-height:178px;padding:14px;text-decoration:none;color:#ece0c8;border:1px solid rgba(236,224,200,.15);background:#111212;transition:border-color .2s,transform .2s}
.showcase-card:hover{border-color:#8c5a16;transform:translateY(-2px)}
.showcase-card img{width:43%;height:145px;object-fit:contain;background:var(--sp-blanc)}
.showcase-card span{display:flex;flex-direction:column;gap:7px;min-width:0}.showcase-card b{font-family:var(--display);font-size:14px;line-height:1.2}.showcase-card small{color:#8E9CA6;font-size:11px;line-height:1.3}.showcase-card strong{font-size:15px;margin-top:6px}.showcase-card em{font-style:normal;font-size:11px}.showcase-card .d-stock{color:#939CA3}.showcase-card .d-commande{color:#c69a52}.showcase-all{display:block;width:max-content;margin:22px auto 0;color:#B1BAC1;text-decoration:none;font-size:13px}.showcase-all:hover{color:#e0a82e}
@media(max-width:900px){.showcase-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.showcase-grid{grid-template-columns:1fr}.showcase-category{justify-content:flex-start;padding:14px 16px}.showcase-card img{width:38%}}
.reassurance-grille{max-width:1180px;margin:0 auto;padding:20px 28px;
  display:flex;flex-wrap:wrap;justify-content:center;gap:14px 44px}
.reassurance-pt{margin:0;display:flex;align-items:baseline;gap:9px;
  font-family:var(--mono);font-size:11px;letter-spacing:.02em}
.reassurance-pt b{font-family:var(--display);font-weight:800;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--trait);white-space:nowrap}
.reassurance-pt span{color:var(--gris)}
@media (max-width:640px){.reassurance-grille{flex-direction:column;align-items:center;
  text-align:center;gap:12px;padding:18px 24px}
  .reassurance-pt{flex-direction:column;gap:3px}}

.barre{z-index:8;display:flex;flex-wrap:wrap;gap:14px;
  justify-content:space-between;align-items:center;padding:18px 28px;
  border-bottom:1px solid rgba(var(--trait-rgb),.12)}
.marque{font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:-.02em}
/* Sélecteur véhicule persistant : <details> natif, zéro JS de bascule à
   câbler dans chacun des 8 gabarits de page qui l'affichent — le navigateur
   gère ouverture/fermeture/clavier. Remplace l'ancienne rangée de 8 onglets
   qui débordait dès 12 châssis (cf. lot 4 du brief). */
.veh-switch{position:relative}
/* Même gabarit que .btn-panier (cadre, padding) : sans lui, "Ma BMW" en
   texte nu à côté d'un vrai bouton "Panier" ne se lisait pas comme un
   contrôle cliquable au même titre — juste une légende. Le chevron confirme
   que c'est un menu déroulant, pas une simple info. */
.veh-switch summary{list-style:none;cursor:pointer;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);
  padding:9px 32px 9px 14px;border:1px solid rgba(var(--trait-rgb),.28);position:relative}
.veh-switch summary::-webkit-details-marker{display:none}
.veh-switch summary::after{content:"▾";position:absolute;right:13px;top:50%;
  transform:translateY(-50%);font-size:9px;color:var(--gris)}
.veh-switch[open] summary::after{content:"▴"}
.veh-switch summary:hover,.veh-switch[open] summary{color:var(--trait);border-color:var(--jaune)}
.veh-switch summary:focus-visible{outline:2px solid var(--jaune);outline-offset:3px}
.veh-switch summary b{color:var(--trait);font-weight:600}
.veh-switch-menu{position:absolute;top:calc(100% + 10px);left:0;z-index:20;
  min-width:220px;padding:10px 0;background:var(--nuit);
  border:1px solid rgba(var(--trait-rgb),.18);box-shadow:0 12px 32px rgba(0,0,0,.35)}
.veh-switch-menu a{display:block;padding:9px 16px;font-family:var(--mono);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gris);text-decoration:none}
.veh-switch-menu a:hover,.veh-switch-menu a:focus-visible{color:var(--trait);
  background:rgba(var(--trait-rgb),.06)}
.veh-switch-menu a[aria-current="true"]{color:var(--jaune)}

.veh-switch summary{display:flex;align-items:center;gap:12px;min-height:58px}
.veh-switch-label{display:flex;flex-direction:column;gap:4px;min-width:0;line-height:1.4}
.veh-switch-prefix{font-size:9px;letter-spacing:.14em}
.veh-switch-label b{font-size:10px;letter-spacing:.06em;overflow-wrap:anywhere}
.veh-switch-change{font-size:9px;margin-left:5px}
.veh-switch-menu{max-width:min(340px,calc(100vw - 40px));min-width:100%}
@media(max-width:640px){
  .barre .veh-switch{order:3;flex:1 0 100%;width:100%;margin-left:0}
  .veh-switch summary{gap:10px;padding:7px 25px 7px 10px}
  .veh-switch-change{display:none}
  .veh-switch-menu{left:0;right:0;max-height:55vh;overflow-y:auto}
}

.scene{position:relative;flex:1 1 auto;min-width:0;min-height:0;overflow:hidden;background:var(--nuit)}
/* Deux calques photo empilés : le hero suit la zone survolée ou ouverte
   (cf. montrerPhoto). Le calque du dessous est celui qui précharge la photo
   suivante — on ne croise les opacités qu'une fois l'image décodée, sinon on
   verrait le fond noir de .scene le temps du téléchargement. */
.scene-photo{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:70% center;transition:opacity .5s ease}
.scene-photo.dessous{opacity:0}
@media (prefers-reduced-motion:reduce){.scene-photo{transition:none}}

/* Deux voiles superposés sur la photo :
   1. le raccord — la photo du disque est éclairée en fond clair, ce dégradé
      la rattrape vers le noir du hero sur son bord gauche pour qu'aucune
      arête lumineuse ne vienne buter contre la colonne texte ;
   2. la vignette d'ambiance — assombrit les bords pour que le panneau et le
      bandeau de zones restent lisibles par-dessus la photo. */
.scene::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(100deg,#0B0F11 0%,rgba(11,15,17,.55) 26%,
      rgba(11,15,17,.12) 58%,transparent 80%),
    radial-gradient(125% 90% at 50% 46%,transparent 45%,rgba(0,0,0,.4) 100%)}

/* ---------- bandeau de zones ---------- */
.zones-rapides{position:absolute;z-index:5;left:24px;bottom:24px;
  display:flex;flex-wrap:wrap;gap:8px;max-width:calc(100% - 48px)}
.zones-rapides button{background:rgba(15,19,21,.72);color:var(--trait);
  border:1px solid rgba(var(--trait-rgb),.22);font-family:var(--mono);font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;padding:10px 12px;cursor:pointer;
  backdrop-filter:blur(6px);transition:border-color .18s,color .18s,background .18s}
.zones-rapides button:hover,.zones-rapides button:focus-visible{
  border-color:var(--jaune);color:var(--jaune)}
.zones-rapides button:focus-visible{outline:2px solid var(--jaune);outline-offset:3px}
.zones-rapides button[aria-pressed="true"]{border-color:var(--jaune);
  color:var(--jaune);background:rgba(242,194,48,.14)}

/* Coin haut gauche : c'est le seul angle de la scène qui reste libre — le
   pont occupe la droite sur toute sa hauteur, et le bandeau de zones court
   sur presque toute la largeur en bas. C'est aussi le coin le plus sombre de
   la photo, grâce au dégradé de raccord : le texte y reste lisible quelle que
   soit l'image affichée. */
.credit{position:absolute;z-index:5;left:24px;top:14px;font-family:var(--mono);
  font-size:9px;letter-spacing:.06em;color:rgba(var(--sp-texte-sur-nuit-rgb),.6);max-width:26ch;
  text-align:left;line-height:1.6;
  /* les cinq photos n'ont pas le même haut : l'ombre garantit la lisibilité
     même quand la zone survolée est claire à cet endroit */
  text-shadow:0 1px 3px rgba(0,0,0,.85)}
.credit a{color:inherit}

/* ---------- achat ---------- */
.ligne-achat{display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-top:12px}
.dispo{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris)}
/* Statut de stock des cartes catalogue : mêmes teintes et même puce que
   "Les pièces du moment" (.product-stock, cf. hero) au lieu du texte gris
   neutre — la disponibilité se repère au meme coup d'œil partout sur le site. */
.ligne-achat .dispo{display:flex;align-items:center;gap:6px;
  font-family:var(--corps);font-size:11px;letter-spacing:0;text-transform:none;
  color:#ADB4B9}
.ligne-achat .dispo::before{content:"";width:6px;height:6px;border-radius:50%;
  background:currentColor;flex:0 0 auto}
.carte[data-dispo="Sur commande"] .ligne-achat .dispo{color:#d7bc8f}
.ajouter{background:var(--trait);border:1px solid var(--trait);color:var(--nuit);
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  padding:8px 14px;cursor:pointer;transition:background .18s,border-color .18s,
  transform .15s,box-shadow .15s}
.ajouter:hover{background:var(--jaune);border-color:var(--jaune);
  transform:translateY(-1px);box-shadow:0 6px 14px rgba(var(--trait-rgb),.2)}
.ajouter.mis{background:var(--vert);border-color:var(--vert);color:var(--nuit)}

.btn-panier{background:none;border:1px solid rgba(var(--trait-rgb),.28);color:var(--trait);
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  padding:9px 14px;cursor:pointer;display:flex;align-items:center;gap:9px;transition:all .18s}
.btn-panier:hover{border-color:var(--jaune);color:var(--jaune)}
.btn-panier b{font-family:var(--display);font-size:12px;min-width:16px;
  background:var(--trait);color:var(--nuit);border-radius:9px;padding:1px 6px}
.btn-panier[data-vide="1"] b{background:rgba(var(--trait-rgb),.18);color:var(--gris)}

.lien-compte{margin-left:auto;color:var(--trait);font-family:var(--mono);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.lien-compte:hover{color:var(--jaune)}

.tiroir{position:fixed;top:0;right:0;height:100%;width:390px;max-width:92vw;z-index:20;
  background:rgba(10,13,15,.97);backdrop-filter:blur(12px);
  border-left:1px solid rgba(var(--trait-rgb),.16);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .4s cubic-bezier(.22,.7,.2,1);visibility:hidden}
.tiroir.ouvert{transform:none;visibility:visible}
.tiroir .ligne{display:flex;gap:12px;align-items:flex-start;padding:16px 0;
  border-bottom:1px solid rgba(var(--trait-rgb),.12)}
.tiroir .ligne div{flex:1}
.tiroir .ligne .nom{margin:4px 0}
.tiroir .retirer{background:none;border:none;color:var(--gris);cursor:pointer;
  font-family:var(--mono);font-size:15px;padding:2px 6px}
.tiroir .retirer:hover{color:var(--oxyde)}
.total{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 14px}
.total span{font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gris)}
.total strong{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.02em}
.note-commande{margin:12px 0 0;font-size:12px;line-height:1.6;color:var(--gris)}
.note-commande a{color:var(--jaune)}
.demande-form{display:grid;gap:.7rem;margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(242,240,232,.14)}
.demande-form label{display:grid;gap:.32rem;color:var(--trait);font-size:.78rem;letter-spacing:.04em;text-transform:uppercase}
.demande-form small{color:var(--gris);font-size:.68rem;letter-spacing:0;text-transform:none}
.demande-form input,.demande-form textarea{width:100%;box-sizing:border-box;border:1px solid rgba(242,240,232,.25);background:#111719;color:var(--trait);padding:.7rem;font:inherit;text-transform:none;letter-spacing:normal}
.demande-form textarea{resize:vertical}
.demande-form .bouton{width:100%;margin-top:.25rem}
.demande-retour{margin:0;color:#BDC2C6;line-height:1.45}

/* ---------- catalogue sous le hero ---------- */
/* box-shadow en vmax : étend le fond clair jusqu'aux bords de la fenêtre sans
   toucher au max-width qui contraint la lecture (sinon le fond sombre du body
   perce en deux bandes noires de part et d'autre sur les grands écrans) */
body{overflow-x:hidden}
.catalogue{max-width:1180px;margin:0 auto;padding:96px 28px 120px;
  background:radial-gradient(1100px 620px at 50% 0, #161c1e 0%, var(--sp-nuit) 45%, var(--nuit) 100%);
  box-shadow:0 0 0 100vmax var(--nuit);clip-path:inset(0 -100vmax)}
.catalogue > header{max-width:60ch;margin:0 0 64px}
.catalogue > header p{margin:0 0 12px;font-family:var(--mono);font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gris)}
.catalogue > header h2{margin:0 0 16px;font-family:var(--display);font-weight:800;
  font-size:clamp(26px,3.4vw,42px);letter-spacing:-.03em;line-height:1.05}
.catalogue > header .intro{font-size:15.5px;line-height:1.65;color:var(--gris);
  font-family:var(--corps);letter-spacing:0;text-transform:none}
/* Gris neutre et non la couleur "ocre" du badge "Expertise requise" — sinon
   le bandeau "données fictives" se lit comme un signal de statut légal. */
.avertissement{margin:0 0 64px;padding:18px 22px;border:1px solid rgba(var(--trait-rgb),.3);
  border-left-width:3px;background:rgba(var(--trait-rgb),.045);color:var(--trait);
  font-size:14px;line-height:1.6;max-width:78ch}
.avertissement strong{font-family:var(--display);font-weight:700}

/* ---------- menu de catégories : une zone affichée à la fois ---------- */
.cat-zones{display:flex;flex-wrap:wrap;gap:8px 10px;margin:0 0 28px;
  padding-bottom:20px;border-bottom:1px solid rgba(var(--trait-rgb),.14)}
.cat-zones button{background:none;border:none;border-bottom:2px solid transparent;
  color:var(--gris);font-family:var(--display);font-weight:700;font-size:15px;
  letter-spacing:-.01em;padding:6px 2px;cursor:pointer;transition:color .18s,border-color .18s}
.cat-zones button:hover{color:var(--trait)}
.cat-zones button[aria-pressed="true"]{color:var(--trait);border-color:var(--jaune)}
.cat-zones .compte{font-family:var(--mono);font-weight:400;font-size:10px;
  letter-spacing:.06em;color:var(--gris);margin-left:2px}

/* ---------- barre de recherche et filtres du catalogue ---------- */
.outils-catalogue{margin:0 0 56px;padding:20px 22px;border:1px solid rgba(var(--trait-rgb),.14);
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;background:rgba(var(--trait-rgb),.02)}
.cat-recherche{flex:1 1 260px;min-width:0;background:none;border:1px solid rgba(var(--trait-rgb),.22);
  color:var(--trait);padding:11px 14px;font-family:var(--corps);font-size:14px}
.cat-recherche::placeholder{color:var(--gris)}
.cat-recherche:focus-visible{outline:2px solid var(--jaune);outline-offset:2px}
.cat-chips{display:flex;flex-wrap:wrap;gap:6px}
.cat-chips button{padding:9px 12px;background:none;color:var(--gris);
  border:1px solid rgba(var(--trait-rgb),.18);font-family:var(--mono);font-size:9.5px;
  letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:all .18s;white-space:nowrap}
.cat-chips button:hover{color:var(--trait);border-color:rgba(var(--trait-rgb),.4)}
.cat-chips button[aria-pressed="true"]{color:var(--nuit);background:var(--trait);border-color:var(--trait)}
.cat-selects{display:flex;flex-wrap:wrap;gap:10px}
.cat-selects select{background:var(--nuit);border:1px solid rgba(var(--trait-rgb),.22);
  color:var(--trait);padding:10px 10px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.05em;cursor:pointer;max-width:190px}
.cat-selects select:focus-visible{outline:2px solid var(--jaune);outline-offset:2px}
.cat-compte{flex:1 1 100%;margin:0;font-family:var(--mono);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gris);order:9}
/* Masquer .grille seul, pas toute la section : sinon un onglet sans résultat
   perd aussi son titre et son résumé, et l'écran paraît cassé plutôt que
   simplement filtré (une recherche valable dans une autre catégorie). */
.zone-cat.cat-vide-zone .grille{display:none}
.zone-vide{display:none}
.zone-cat.cat-vide-zone .zone-vide{display:block}
.carte[hidden]{display:none}
.cat-vide,.zone-vide{margin:0 0 56px;padding:40px 20px;text-align:center;
  border:1px solid rgba(var(--trait-rgb),.14);
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gris)}
.cat-vide{display:none}
.cat-vide.montre{display:block}
.zone-cat{margin:0 0 80px;scroll-margin-top:96px}
.zone-cat h3{margin:0 0 6px;font-family:var(--display);font-weight:800;font-size:26px;
  letter-spacing:-.025em}
.zone-cat .resume{margin:0 0 6px;color:var(--gris);font-size:14.5px;max-width:62ch}
.zone-cat .compte{margin:0 0 26px;font-family:var(--mono);font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gris)}
.zone-cat .voir3d{color:var(--jaune);text-decoration:none;border-bottom:1px solid currentColor}
/* Comparer est une aide ponctuelle, pas une nouvelle famille de filtres : il
   n'apparaît que quand plusieurs dimensions H&R sont réellement disponibles
   pour le véhicule affiché. */
.comparateur-elargisseurs{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
  margin:-8px 0 28px}
.ouvrir-comparaison{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;
  background:none;border:1px solid rgba(var(--trait-rgb),.28);color:var(--trait);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  cursor:pointer;transition:border-color .18s,color .18s,background .18s}
.ouvrir-comparaison svg{width:15px;height:15px;color:var(--jaune)}
.ouvrir-comparaison:hover,.ouvrir-comparaison[aria-expanded="true"]{border-color:var(--jaune);color:var(--jaune);
  background:rgba(var(--trait-rgb),.04)}
.comparateur-elargisseurs>span{font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--gris)}
.comparaison-dialogue{width:min(920px,calc(100vw - 32px));max-height:min(780px,calc(100vh - 32px));
  padding:0;border:1px solid rgba(var(--trait-rgb),.3);background:var(--nuit);color:var(--trait);
  box-shadow:0 24px 80px rgba(0,0,0,.6)}
.comparaison-dialogue::backdrop{background:rgba(0,0,0,.74);backdrop-filter:blur(3px)}
.comparaison-dialogue form{position:absolute;top:14px;right:16px;z-index:1}
.fermer-comparaison{width:32px;height:32px;padding:0;border:1px solid rgba(var(--trait-rgb),.28);
  background:var(--nuit);color:var(--trait);font-family:var(--display);font-size:23px;line-height:1;cursor:pointer}
.fermer-comparaison:hover{border-color:var(--jaune);color:var(--jaune)}
.comparaison-corps{padding:38px clamp(20px,4vw,44px) 42px}
.comparaison-eyebrow{margin:0 0 10px;font-family:var(--mono);font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--jaune)}
.comparaison-corps h2{margin:0 0 10px;font-family:var(--display);font-size:clamp(27px,4vw,40px);
  letter-spacing:-.035em;line-height:1.04}
.comparaison-corps>p:not(.comparaison-eyebrow){max-width:66ch;margin:0 0 28px;color:var(--gris);
  font-size:14px;line-height:1.6}
.tableau-comparaison{overflow-x:auto;border-top:1px solid rgba(var(--trait-rgb),.18)}
.tableau-comparaison table{width:100%;min-width:620px;border-collapse:collapse}
.tableau-comparaison th,.tableau-comparaison td{padding:13px 12px;border-bottom:1px solid rgba(var(--trait-rgb),.14);
  text-align:left;vertical-align:middle}
.tableau-comparaison thead th{font-family:var(--display);font-size:18px;font-weight:700}
.tableau-comparaison tbody th{font-family:var(--mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gris);font-weight:400}
.tableau-comparaison td{font-size:13px;color:var(--gris)}
.tableau-comparaison thead a{display:block;margin-top:6px;color:var(--trait);text-decoration:none}
.tableau-comparaison thead a:hover{color:var(--jaune)}
.tableau-comparaison small{display:block;margin-top:3px;font-family:var(--mono);font-size:8.5px;
  letter-spacing:.06em;color:var(--gris)}
.comparaison-photo{display:block;width:58px;height:44px;object-fit:contain;background:var(--sp-blanc);margin:0 0 3px}
.comparaison-ref{display:inline-block;min-width:58px;padding:12px 0 7px;font-family:var(--mono);font-size:8px;color:var(--gris)}
/* Le liseré vient des bordures de chaque .carte, pas d'un fond posé sous la
   grille : avec `gap`, un fond sur .grille perce en case grise pleine dès
   qu'une ligne n'est pas complète (17, 10 pièces ne remplissent jamais un
   nombre entier de colonnes) — visible sur presque toutes les zones. */
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  border-top:1px solid rgba(var(--trait-rgb),.12);border-left:1px solid rgba(var(--trait-rgb),.12)}
.carte{background:var(--nuit);padding:22px 20px;display:flex;flex-direction:column;gap:9px;
  border-right:1px solid rgba(var(--trait-rgb),.12);border-bottom:1px solid rgba(var(--trait-rgb),.12);
  transition:background .18s}
.carte:hover{background:rgba(var(--trait-rgb),.025)}
/* Photos et pictogrammes partagent la même hauteur. Sans ça une rangée qui
   mêle les deux — la zone Moteur a 8 photos sur 17 pièces — part en dents de
   scie : hauteurs de cartes mesurées de 301 à 463 px sur la même grille. */
.vignette-piece{width:100%;height:168px;color:var(--gris);
  transition:color .18s}
/* Un fond teinté plutôt qu'un contour sur l'icône : sans rien, une carte à
   icône posée à côté d'une carte à vraie photo (boîte blanche nette) lit
   comme deux composants différents plutôt que deux états du même système —
   mais un trait dur en plus des bordures de la grille faisait beaucoup de
   rectangles empilés. Le fond seul suffit à délimiter la zone. */
/* Carte sans photo : pictogramme réduit + référence fabricant en mono. Le
   picto seul ne distinguait rien — les icônes sont choisies par famille, donc
   les dix cartes d'une même zone affichaient dix fois le même dessin. La
   référence est unique par pièce, et elle remplit une boîte qui, à 168 px de
   haut pour aligner les photos, serait sinon un grand vide. */
.vign-picto{display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;padding:18px 14px;box-sizing:border-box;
  background:rgba(var(--trait-rgb),.035);border-radius:6px;overflow:hidden}
.vign-picto svg{width:34px;height:32px;flex:none;opacity:.85}
/* Trois lignes maximum : quelques références dépassent 40 signes
   (« RADIUM DUAL UNIVERSAL CATCH CAN KIT — FLUID LOCK ») et déborderaient. */
.vign-ref{font-family:var(--mono);font-size:12px;letter-spacing:.09em;
  line-height:1.45;text-align:center;color:var(--gris);word-break:break-word;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.carte:hover .vign-ref{color:var(--trait)}
/* Conservé pour les vignettes fabriquées en JS dans le panneau 3D (.piece),
   qui portent encore la classe sur le <svg> lui-même. */
svg.vignette-piece{background:rgba(var(--trait-rgb),.035);border-radius:6px;
  box-sizing:border-box;padding:46px 0}
img.vignette-piece{object-fit:contain;background:var(--sp-blanc);
  border-radius:6px;padding:16px;box-sizing:border-box}
.carte:hover .vignette-piece{color:var(--jaune)}
.carte .marque-p{font-size:9.5px}
/* Titre fournisseur brut, affiché sous le titre court (formater_titre_produit()
   côté generer-catalogue.py) — repère pour qui cherche la formulation exacte
   du fournisseur, jamais le premier élément lu sur la carte. */
.carte .titre-brut{margin:0;font-size:10.5px;line-height:1.4;color:var(--gris);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Le séparateur vit dans le ::before de la référence, pas dans un nœud texte
   à part : masquer .m-ref emporte alors le point médian avec lui. */
.carte .m-ref::before{content:" · "}
/* Carte sans photo : la référence est déjà en grand dans la vignette,
   l'afficher une seconde fois 40 px plus bas lit comme un doublon. La ligne
   ne garde que la marque. `data-recherche` porte la référence de son côté,
   la recherche n'est pas touchée. */
.carte:has(.vign-picto) .m-ref{display:none}
.carte .nom{margin:0;font-size:16px}
.carte .nom a{color:inherit;text-decoration:none}
.carte .nom a:hover,.carte .nom a:focus-visible{color:var(--jaune)}
.carte .nom a:focus-visible{outline:2px solid var(--jaune);outline-offset:2px}
.carte .dimension-piece{margin:-2px 0 0;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--jaune)}
.carte .detail{margin:0;flex:1}
/* Le panneau reste un aperçu : trois lignes suffisent. Les descriptions
   venant de Shopify font parfois quinze lignes et repoussaient le prix et
   le bouton hors de la carte. Le texte complet est sur la fiche produit. */
.piece .detail{display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:3;overflow:hidden}
.pied-page{border-top:1px solid rgba(var(--trait-rgb),.12);padding:56px 28px 28px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--gris)}
.pied-page a{color:inherit}
.pied-grille{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 24px;
  max-width:1180px;margin:0 auto}
.pied-grille h5{margin:0 0 16px;font-family:var(--display);font-weight:800;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--trait)}
.pied-grille ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.pied-grille a{text-decoration:none;letter-spacing:.02em;font-size:13px}
.pied-grille a:hover{color:var(--trait)}
.pied-ident p{margin:0 0 8px;letter-spacing:.02em;font-size:13px;line-height:1.6}
.pied-bas{max-width:1180px;margin:40px auto 0;padding-top:22px;
  border-top:1px solid rgba(var(--trait-rgb),.12);display:flex;flex-wrap:wrap;
  justify-content:space-between;gap:14px 22px;align-items:center;font-size:9.5px}
.paiements{display:flex;flex-wrap:wrap;gap:8px}
.paiements span{border:1px solid rgba(var(--trait-rgb),.22);padding:5px 9px;letter-spacing:.1em}
@media (max-width:820px){.pied-grille{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.pied-grille{grid-template-columns:1fr}}

/* ---------- conseil IA ---------- */
.conseil-ia-ouvrir{position:fixed;right:24px;bottom:24px;z-index:35;display:flex;align-items:center;gap:9px;
  padding:13px 17px;border:1px solid var(--jaune);background:var(--nuit);color:var(--trait);font-family:var(--mono);
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;box-shadow:0 12px 36px rgba(0,0,0,.28)}
.conseil-ia-ouvrir span:first-child{color:var(--jaune);font-size:17px;line-height:0}
.conseil-ia-ouvrir:hover,.conseil-ia-ouvrir:focus-visible{background:var(--jaune);color:var(--nuit);outline:none}
.conseil-ia-ouvrir:hover span:first-child,.conseil-ia-ouvrir:focus-visible span:first-child{color:var(--nuit)}
.conseil-ia[hidden]{display:none}.conseil-ia{position:fixed;z-index:50;inset:0;background:rgba(6,8,9,.72);display:grid;place-items:end end;padding:24px}
.conseil-ia-carte{width:min(410px,100%);max-height:min(680px,calc(100vh - 48px));display:flex;flex-direction:column;background:var(--sp-nuit);border:1px solid rgba(var(--trait-rgb),.25);box-shadow:0 20px 70px rgba(0,0,0,.55)}
.conseil-ia-carte header{display:flex;align-items:start;justify-content:space-between;padding:20px 20px 16px;border-bottom:1px solid rgba(var(--trait-rgb),.14)}
.conseil-ia-carte header .eyebrow{margin:0 0 6px;color:var(--jaune)}.conseil-ia-carte h2{margin:0;font-family:var(--display);font-size:23px}.conseil-ia-carte header button{border:0;background:transparent;color:var(--trait);font-size:25px;cursor:pointer}
.conseil-ia-fil{overflow:auto;padding:16px 20px;display:flex;flex-direction:column;gap:10px}.conseil-message{margin:0;max-width:91%;padding:11px 12px;font-size:14px;line-height:1.5}.conseil-message-bot{align-self:flex-start;background:#1c2427;color:var(--trait)}.conseil-message-client{align-self:flex-end;background:var(--jaune);color:var(--nuit)}.conseil-attente{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--gris)}
.conseil-ia form{display:grid;grid-template-columns:1fr auto;gap:8px;padding:14px;border-top:1px solid rgba(var(--trait-rgb),.14)}.conseil-ia textarea{resize:none;width:100%;box-sizing:border-box;padding:10px;background:#0b0f10;border:1px solid rgba(var(--trait-rgb),.22);color:var(--trait);font:14px/1.35 var(--corps)}.conseil-ia textarea:focus{outline:1px solid var(--jaune);border-color:var(--jaune)}.conseil-ia form button{align-self:stretch;padding:0 12px;border:0;background:var(--jaune);color:var(--nuit);font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}.conseil-ia form button:disabled{opacity:.55;cursor:wait}
@media (max-width:560px){.conseil-ia{padding:12px;place-items:end stretch}.conseil-ia-ouvrir{right:16px;bottom:16px}.conseil-ia-carte{width:100%;max-height:calc(100vh - 24px)}}

/* ---------- pages texte (expertise, contact, livraison, légal) ---------- */
.page-texte{max-width:760px;margin:0 auto;padding:72px 28px 64px}
.page-texte .fil{margin:0 0 32px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gris)}
.page-texte .fil a{color:var(--gris);text-decoration:none;border-bottom:1px solid rgba(var(--trait-rgb),.3)}
.page-texte .fil a:hover{color:var(--trait);border-color:var(--trait)}
.page-texte .eyebrow{margin:0 0 12px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gris)}
.page-texte h1{margin:0 0 22px;font-family:var(--display);font-weight:800;
  font-size:clamp(28px,3.6vw,42px);letter-spacing:-.03em;line-height:1.06}
.page-texte h2{margin:48px 0 14px;font-family:var(--display);font-weight:800;
  font-size:21px;letter-spacing:-.02em}
.page-texte p{margin:0 0 16px;font-size:15.5px;line-height:1.7}
.page-texte p a,.page-texte li a,.page-texte dd a{color:var(--jaune);text-decoration:none;
  border-bottom:1px solid currentColor}
.page-texte p a:hover,.page-texte li a:hover,.page-texte dd a:hover{color:var(--trait)}
.page-texte p.lead{font-size:17px;color:var(--gris);max-width:60ch}
.page-texte ul,.page-texte ol{margin:0 0 20px;padding-left:22px;font-size:15px;line-height:1.75}
.page-texte li{margin:0 0 8px}
.page-texte strong{font-family:var(--display);font-weight:700}
.page-texte .encart{margin:0 0 28px;padding:18px 22px;border:1px solid rgba(var(--trait-rgb),.3);
  border-left-width:3px;background:rgba(var(--trait-rgb),.045);font-size:14px;line-height:1.6}
.page-texte .acompleter{color:var(--ocre)}
.page-texte .statuts-legende{display:grid;gap:14px;margin:0 0 8px}
.page-texte .statut-item{padding:16px 18px;border:1px solid rgba(var(--trait-rgb),.14)}
.page-texte .statut-item p{margin:6px 0 0;font-size:14px;color:var(--gris);line-height:1.6}
.page-texte table.exemples{width:100%;border-collapse:collapse;margin:0 0 28px;font-size:13.5px}
.page-texte table.exemples th,.page-texte table.exemples td{text-align:left;padding:10px 12px;
  border-bottom:1px solid rgba(var(--trait-rgb),.14)}
.page-texte table.exemples th{font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gris)}
.page-texte .cta-bloc{margin-top:48px;padding:28px 26px;border:1px solid rgba(var(--trait-rgb),.2);
  text-align:center}
.page-texte .cta-bloc a.bouton{display:inline-block;margin-top:14px;background:var(--trait);
  color:var(--nuit);padding:14px 26px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none}
.page-texte .cta-bloc a.bouton:hover{background:var(--jaune)}
.form-contact{display:flex;flex-direction:column;gap:18px;margin:0 0 44px}
.form-contact label{display:flex;flex-direction:column;gap:6px;font-family:var(--mono);
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}
.form-contact input,.form-contact select,.form-contact textarea{background:none;
  border:1px solid rgba(var(--trait-rgb),.28);color:var(--trait);padding:12px 14px;
  font-family:var(--corps);font-size:14.5px}
.form-contact textarea{resize:vertical;min-height:120px}
.form-contact button{align-self:flex-start;background:var(--trait);color:var(--nuit);border:none;
  padding:14px 28px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;cursor:pointer}
.form-contact button:hover{background:var(--jaune)}
.form-contact .note-envoi{margin:-8px 0 0;font-size:12px;color:var(--gris)}
.contact-direct{margin:0 0 44px;font-size:14.5px;line-height:2}
.contact-direct dt{font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gris)}
.contact-direct dd{margin:0 0 12px}

/* ---------- panneau ---------- */
/* Panneau-pont : aperçu crème toujours visible (survol d'une pastille ou
   zone par défaut), pas de fond sombre transparent comme .panneau — c'est
   volontairement la couleur du catalogue qui remonte dans le héros, pour que
   la bascule héros sombre → catalogue clair au scroll ne soit plus un choc
   visuel. Masqué pendant que .panneau (liste complète, sur clic) est ouvert :
   même zone, pas la peine d'afficher les deux à la fois. */
/* Le pont n'est plus posé SUR la photo : c'est la troisième colonne du hero.
   La photo n'est donc jamais recouverte au repos. Quand .panneau prend le
   relais (clic sur une zone), le pont ne disparaît pas d'un coup — sa base
   flex tombe à zéro et la photo s'élargit dans le même mouvement. */
.pont{position:relative;flex:0 0 clamp(210px,17vw,250px);align-self:stretch;min-width:0;
  z-index:6;overflow:hidden;
  display:flex;flex-direction:column;padding:24px 22px 20px;gap:4px;
  border-left:1px solid rgba(var(--sp-encre-rgb),.14);
  transition:flex-basis .45s cubic-bezier(.22,.7,.2,1),opacity .3s,padding .45s}
.pont.cache{flex-basis:0;padding-left:0;padding-right:0;opacity:0;pointer-events:none}
.pont-eyebrow{margin:0;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gris)}
.pont h3{margin:2px 0 12px;font-family:var(--display);font-weight:800;font-size:19px;
  letter-spacing:-.02em}
#pont-liste{flex:1;min-height:0;overflow-y:auto}
.pont .p-item{display:block;padding:10px 0;border-top:1px solid rgba(var(--sp-encre-rgb),.1);
  color:inherit;text-decoration:none}
.pont .p-item:first-child{border-top:none}
.pont .p-nom{display:block;font-family:var(--display);font-weight:700;font-size:13px;
  letter-spacing:-.01em;line-height:1.3;margin:0 0 3px}
.pont .p-item:hover .p-nom{color:var(--jaune)}
.pont .p-prix{font-family:var(--mono);font-size:11.5px;font-weight:600}
.pont-cta{margin-top:auto;padding-top:14px;color:var(--jaune);text-decoration:none;
  border-top:1px solid rgba(var(--sp-encre-rgb),.1);font-family:var(--mono);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase}
.pont-cta:hover{color:var(--ocre)}
/* En dessous de 1080 px le pont mangerait la photo : à 940 px il lui restait
   315 px de large contre 510 px sans le pont. Le hero repasse donc à deux
   colonnes bien avant de s'empiler. */
@media (max-width:1080px){.pont{display:none}}

/* Enfant de .hero-texte, pas de .scene : le panneau recouvre la colonne de
   texte et sort de derrière la photo. La photo reste entièrement visible
   pendant qu'on parcourt les références — c'est elle qui dit quelle zone on
   regarde. Largeur pleine colonne : à moitié couvert, le titre du hero
   dépassait derrière le panneau. */
.panneau{position:absolute;top:0;right:0;height:100%;width:100%;z-index:7;
  background:rgba(12,15,17,.94);backdrop-filter:blur(10px);
  border-right:1px solid rgba(var(--trait-rgb),.16);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .45s cubic-bezier(.22,.7,.2,1);visibility:hidden}
.panneau.ouvert{transform:none;visibility:visible}
.panneau-tete{padding:20px 24px 16px;border-bottom:1px solid rgba(var(--trait-rgb),.14);position:relative}
.panneau-tete .eyebrow{margin:0 0 9px;font-family:var(--mono);font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gris)}
.panneau-tete h2{margin:0 0 5px;font-family:var(--display);font-weight:800;font-size:28px;
  letter-spacing:-.025em;line-height:1.05}
.panneau-tete p{margin:0;font-size:14px;color:var(--gris)}
.fermer{position:absolute;top:16px;right:16px;width:30px;height:30px;background:none;
  border:1px solid rgba(var(--trait-rgb),.24);color:var(--trait);font-family:var(--mono);
  font-size:13px;line-height:1;cursor:pointer;padding:0}
.fermer:hover{border-color:var(--jaune);color:var(--jaune)}

.filtres{display:flex;gap:6px;padding:14px 24px 0}
.filtres button{flex:1;padding:7px 4px;background:none;color:var(--gris);
  border:1px solid rgba(var(--trait-rgb),.18);font-family:var(--mono);font-size:9.5px;
  letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:all .18s}
.filtres button:hover{color:var(--trait);border-color:rgba(var(--trait-rgb),.4)}
.filtres button[aria-pressed="true"]{color:var(--nuit);background:var(--trait);border-color:var(--trait)}

.liste{flex:1;overflow-y:auto;padding:4px 24px 24px;scrollbar-width:thin;
  scrollbar-color:rgba(var(--trait-rgb),.25) transparent}
.piece{display:block;padding:17px 0;border-bottom:1px solid rgba(var(--trait-rgb),.12);color:inherit}
.piece .vignette-piece{width:100%;height:52px;padding:4px 0 2px;color:var(--gris)}
.piece img.vignette-piece{height:108px;padding:12px}
.piece .nom{text-decoration:none;color:inherit}
.piece:hover .nom,.piece:focus-visible .nom{color:var(--jaune)}
.piece.masque{display:none}
.marque-p{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gris)}
/* iOS transforme les longues suites de chiffres en liens tel: — les
   références produit (55133989667158…) s'affichaient en bleu souligné sur
   iPhone, et un appui lançait le composeur téléphonique. La meta
   format-detection dans chaque <head> l'empêche ; cette règle reste comme
   garde-fou pour les WebViews et versions d'iOS qui l'ignorent. Le site
   n'affiche aucun vrai numéro de téléphone cliquable, rien à préserver. */
a[href^="tel:"]{color:inherit;text-decoration:none;pointer-events:none}
.nom{display:block;margin:6px 0 5px;font-family:var(--display);font-weight:700;
  font-size:17px;letter-spacing:-.01em;line-height:1.25;transition:color .18s}
.detail{display:block;margin:0 0 11px;font-size:12.5px;line-height:1.5;color:var(--gris)}
.ligne-prix{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ligne-prix strong{font-family:var(--display);font-weight:800;font-size:16px;letter-spacing:-.02em}
/* Cartes du catalogue complet alignées sur la typo de "Les pièces du
   moment" (.product-*, cf. hero) : marque dorée, nom moins gras, prix en
   corps de texte plus grand plutôt qu'en Archivo gras — même carte,
   qu'elle soit dans l'aperçu ou dans le catalogue exhaustif. */
.carte .marque-p{color:var(--gold);letter-spacing:.07em}
.carte .nom{font-weight:500;letter-spacing:0}
.carte .ligne-prix strong{font-family:var(--corps);font-weight:400;font-size:19px;letter-spacing:0}
.tampon{display:inline-block;border:1.5px solid currentColor;padding:4px 8px 3px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  transform:rotate(-1.4deg)}
/* légère variation du tampon selon la position dans la grille — répété à
   l'identique sur 50+ cartes, l'angle fixe se lisait comme un défaut CSS
   plutôt qu'un vrai effet de tampon encré. */
.carte:nth-child(3n+2) .tampon{transform:rotate(1deg)}
.carte:nth-child(3n) .tampon{transform:rotate(-.3deg)}
.t-vert{color:var(--vert)}.t-ocre{color:var(--ocre)}.t-oxyde{color:var(--oxyde)}
.vide{padding:26px 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris);text-align:center}
.panneau-pied{padding:16px 24px;border-top:1px solid rgba(var(--trait-rgb),.14)}
.panneau-pied .compat{margin:0 0 12px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.bouton{display:block;width:100%;padding:14px;background:var(--trait);color:var(--nuit);
  border:none;font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;cursor:pointer;text-align:center;text-decoration:none;
  transition:background .18s,transform .15s,box-shadow .15s}
.bouton:visited{color:var(--nuit)}
.bouton:hover{background:var(--jaune);transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(var(--trait-rgb),.2)}

/* ---------- tactile ---------- */
@media (pointer:coarse){
  .piece{padding:20px 0}
  .filtres button{padding:11px 4px}
}

@media (max-width:820px){
  .barre{padding:14px 16px}
  .hero{height:auto;min-height:0}
  .hero-corps{flex-direction:column}
  /* La photo d'abord, le texte ensuite : sur mobile hero-texte et scene
     s'empilent (au lieu de côte à côte comme sur desktop), et le bloc de
     texte (accroche + 3 statuts + CTA) est assez long pour repousser toute
     la photo hors du premier écran — l'ordre visuel s'inverse sans
     changer l'ordre du DOM (lecture au clavier/lecteur d'écran inchangée). */
  .hero-texte{order:2;flex:0 0 auto;max-width:none;padding:24px 20px 40px}
  /* Le fondu horizontal de la trame n'a de sens qu'en deux colonnes, pour
     rejoindre la scène 3D placée à droite. Empilé, il effacerait la trame
     sur la moitié droite du texte sans raison : on fond vers le bas. */
  .hero-texte::before{
    -webkit-mask-image:linear-gradient(180deg,#000 60%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 60%,transparent 100%)}
  .hero-texte h1{max-width:none;font-size:clamp(24px,7vw,32px)}
  .scene{order:1;flex:0 0 45vh;min-height:300px}
  /* Même logique que pour la trame : le raccord sombre de la photo vise la
     colonne texte. Empilé, celle-ci passe dessous — le dégradé bascule donc
     de l'horizontale vers le bas, sinon il assombrirait le bord gauche de la
     photo face à rien. */
  .scene::after{
    background:
      linear-gradient(180deg,transparent 42%,rgba(11,15,17,.5) 78%,#0B0F11 100%),
      radial-gradient(125% 90% at 50% 46%,transparent 45%,rgba(0,0,0,.4) 100%)}
  /* position:fixed (et non plus absolute) : le panneau (jusqu'à 70vh) est
     plus haut que .scene (45vh) sur mobile. En absolute il restait un
     descendant de .scene, dont l'overflow:hidden rognait tout le haut du
     panneau (titre, filtres, bouton fermer). En fixed il échappe à ce
     découpage et se positionne par rapport à l'écran entier. z-index
     au-dessus de .dossier-barre (19) pour rester lisible par-dessus elle. */
  .panneau{position:fixed;left:0;width:100%;height:min(70vh,640px);top:auto;
    bottom:0;border-left:none;z-index:21;
    border-top:1px solid rgba(var(--trait-rgb),.16);transform:translateY(100%);
    border-radius:16px 16px 0 0;padding-top:10px}
  .panneau.ouvert{transform:none}
  .panneau::before{content:"";position:absolute;top:7px;left:50%;
    transform:translateX(-50%);width:38px;height:4px;border-radius:2px;
    background:rgba(var(--trait-rgb),.28)}
  .panneau-tete{padding-top:14px}
  .fermer{top:14px}
  /* padding-bottom = hauteur approx. de .panneau-pied (barre "Compatible..."
     + bouton), pour que la dernière carte reste lisible même si le flex du
     panneau se tasse sur un petit écran */
  .liste{-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-bottom:110px}
  .zones-rapides{left:16px;bottom:16px;max-width:calc(100% - 32px)}
  .zones-rapides button{padding:9px 11px;font-size:10px}
  .credit{display:none}
  /* Les 5 onglets tiennent sur une seule ligne desktop ; sur mobile ils
     passaient à la ligne en texte nu, sans fond ni bordure — se lisait comme
     un paragraphe plutôt que des onglets cliquables. Une bande qui défile
     horizontalement (patron mobile courant) plutôt qu'un empilement ambigu. */
  .cat-zones{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    gap:6px 20px;padding-bottom:14px;scrollbar-width:none}
  .cat-zones::-webkit-scrollbar{display:none}
  .cat-zones button{white-space:nowrap;flex:0 0 auto}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important}
}

/* ═══════════ CARTES DENSES SOUS 640 px ═══════════
   Même contenu, même ordre DOM, même recherche : seule la mise en place
   change. Inspirée des fiches produit mobiles façon ECS Tuning : grande
   photo carrée + prix/CTA à droite sur la même ligne, titre et description
   en pleine largeur en dessous, marque/référence en petite ligne de pied.
   .ligne-prix passe en display:contents pour que <strong> et .tampon
   deviennent des cases de la grille de la carte. */
@media (max-width:640px){

  .grille{grid-template-columns:1fr}

  .carte{
    display:grid;
    grid-template-columns:118px minmax(0,1fr);
    grid-template-areas:
      "vign tampon"
      "vign prix"
      "vign achat"
      "nom    nom"
      "titrebrut titrebrut"
      "detail detail"
      "marque marque";
    align-items:start;
    column-gap:14px;row-gap:6px;
    padding:14px 14px 16px;
  }

  /* vignette : grande photo carrée, posée comme sur une fiche produit */
  .carte .vignette-piece{
    grid-area:vign;align-self:start;
    width:118px;height:118px;min-height:0;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:5px;padding:6px;box-sizing:border-box;
    border:1px solid rgba(var(--trait-rgb),.14);border-radius:8px;background:var(--sp-blanc);
  }
  .carte .vign-picto svg{width:56px;height:52px;flex:none}
  .carte .vign-picto{padding:0;background:none}
  /* la référence reste, mais sur une ligne : elle sert de repère, pas de titre */
  .carte .vign-ref{
    font-size:7.5px;letter-spacing:.04em;line-height:1.2;max-width:104px;
    -webkit-line-clamp:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }

  .carte .marque-p{grid-area:marque;margin-top:2px;font-size:9px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* cartes photo : la référence (.m-ref) reste visible ici, c'est son seul
     emplacement — seules les cartes picto la masquent (règle .carte:has(.vign-picto)
     .m-ref déjà globale, plus haut), parce qu'elles la répètent dans la vignette. */

  /* .ligne-prix n'est plus une boîte : ses deux enfants rejoignent la grille */
  .carte .ligne-prix{display:contents}
  .carte .ligne-prix .tampon{grid-area:tampon;justify-self:start;
    transform:none;font-size:8.5px;padding:3px 6px 2px}
  .carte .ligne-prix strong{grid-area:prix;font-size:19px;justify-self:start}

  .carte .nom{grid-area:nom;margin-top:4px;font-size:16px;line-height:1.22}
  .carte .dimension-piece{grid-area:detail;align-self:start;justify-self:start;margin:0;font-size:8.5px}
  .carte .titre-brut{grid-area:titrebrut;margin-top:2px;font-size:10px;
    -webkit-line-clamp:1}
  .carte .detail{grid-area:detail;flex:none;margin:0;
    font-size:12px;line-height:1.4;color:var(--gris);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

  .carte .ligne-achat{grid-area:achat;justify-self:start;margin-top:2px;
    display:flex;flex-direction:column;align-items:flex-start;gap:7px}
  .carte .ligne-achat .dispo{font-size:8.5px;letter-spacing:.1em}
  .carte .ligne-achat .ajouter{padding:10px 16px;font-size:9.5px;min-height:36px}

  /* le survol de la vignette n'a pas de sens au doigt */
  .carte:hover{background:none}
}

/* très petits écrans : la disponibilité passe à la trappe avant le bouton */
@media (max-width:360px){
  .carte .ligne-achat .dispo{display:none}
}

/* ═══════════ BARRE DE DOSSIER (mobile) ═══════════ */
.dossier-barre{
  --nuit:var(--sp-nuit);--trait:var(--sp-texte-sur-nuit);--trait-rgb:var(--sp-texte-sur-nuit-rgb);--gris:var(--sp-gris-sur-nuit);
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:19;
  background:var(--nuit);color:var(--trait);
  padding:11px 16px calc(14px + env(safe-area-inset-bottom));
  border-top:1px solid var(--verdict-teinte,rgba(var(--sp-texte-sur-nuit-rgb),.28));
  box-shadow:0 -10px 26px rgba(0,0,0,.55);
  transition:transform .22s ease,border-color .22s;
}
/* pendant que le tiroir panier est ouvert, ou qu'on défile vers le bas
   (catalogue-ui.js), la barre s'efface */
.dossier-barre[data-cache="1"],.dossier-barre.masque-scroll{transform:translateY(100%)}

.dossier-tete{display:flex;align-items:center;gap:9px}
.dossier-pastille{width:8px;height:8px;flex:none;background:var(--verdict-teinte)}
.dossier-verdict{font-family:var(--display);font-weight:800;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--verdict-teinte)}
.dossier-n{margin-left:auto;font-family:var(--mono);font-size:9.5px;color:var(--gris)}

/* bilan : une barre de proportions, un segment par statut */
.dossier-bilan{display:flex;height:4px;margin-top:10px;overflow:hidden;
  background:rgba(var(--trait-rgb),.1)}
.dossier-bilan span{transition:width .22s}
.dossier-bilan .b-vert{background:var(--gris)}
.dossier-bilan .b-ocre{background:#D9662E}
.dossier-bilan .b-oxyde{background:repeating-linear-gradient(90deg,
  var(--sp-texte-sur-nuit) 0 5px,transparent 5px 10px)}

.dossier-pied{display:flex;align-items:center;gap:12px;margin-top:11px}
.dossier-total{flex:none}
.dossier-total span{display:block;font-family:var(--mono);font-size:8.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}
.dossier-total strong{display:block;margin-top:5px;font-family:var(--display);
  font-weight:800;font-size:17px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.dossier-voir{flex:1;min-height:44px;border:1px solid var(--trait);
  background:var(--trait);color:var(--nuit);font-family:var(--display);
  font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  cursor:pointer}

@media (max-width:640px){
  .dossier-barre{display:block}
  /* le bouton du haut ferait doublon */
  .barre .btn-panier{display:none}
  /* le pied de page doit pouvoir se lire sous la barre */
  .pied-page{padding-bottom:132px}
  /* .barre (sticky, en haut) + .dossier-barre (fixed, en bas) : à elles deux,
     près de 100px pris en permanence sur un petit écran. catalogue-ui.js
     ajoute/retire .masque-scroll en défilant — rendu de l'espace pendant la
     lecture, jamais de perte d'accès (réapparaît en remontant). */
  .barre{transition:transform .22s ease}
  .barre.masque-scroll{transform:translateY(-100%)}
}
@media (prefers-reduced-motion:reduce){
  .barre,.dossier-barre,.dossier-bilan span{transition:none}
}

/* ═══════════ BANDEAU COOKIES ═══════════
   Barre basse compacte : une ligne de texte + 2 boutons, jamais un panneau
   déplié par défaut. Un seul choix existe ici (mesure d'audience GA, binaire
   accepter/refuser) — pas de vraie granularité à proposer, donc
   "Personnaliser" renvoie vers /confidentialite/ plutôt que de dupliquer les
   2 mêmes boutons dans un faux panneau d'options.
   z-index:15, sous .tiroir/.panneau (20/21 — les vraies modales) mais aussi
   sous #dossier-barre (19, résumé panier fixe mobile) : sous 640px,
   [data-dossier-actif] la décale au-dessus plutôt que de risquer de la
   recouvrir. */
.bandeau-cookies{display:none;position:fixed;left:0;right:0;bottom:0;z-index:15;
  align-items:center;justify-content:center;gap:10px 20px;flex-wrap:wrap;
  max-height:64px;overflow:hidden;padding:10px 22px;box-sizing:border-box;
  background:var(--nuit);color:var(--trait);
  border-top:1px solid rgba(var(--trait-rgb),.18);font-family:var(--corps)}
.bandeau-cookies[data-visible="1"]{display:flex}
.bandeau-cookies p{margin:0;font-size:12.5px;line-height:1.4;flex:1 1 260px;min-width:0}
.bandeau-cookies .perso{margin-left:8px;color:var(--gris);text-decoration:underline;
  text-decoration-color:rgba(var(--trait-rgb),.35);font-size:11.5px;white-space:nowrap}
.bandeau-cookies .perso:hover{color:var(--trait)}
.bandeau-boutons{display:flex;gap:8px;flex:none}
.bandeau-boutons button{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;padding:9px 16px;cursor:pointer;white-space:nowrap;border-radius:2px}
#cookies-accepter{background:var(--trait);color:var(--nuit);border:none}
#cookies-refuser{background:none;color:var(--trait);border:1px solid rgba(var(--trait-rgb),.3)}
@media (max-width:640px){
  .bandeau-cookies{max-height:88px;
    padding:9px 16px calc(9px + env(safe-area-inset-bottom));justify-content:flex-start}
  /* #dossier-barre mesure 108px de haut sous 640px (vérifié) — cf.
     .pied-page{padding-bottom:132px} un peu plus haut, même réservation
     d'espace pour la même raison. */
  .bandeau-cookies[data-dossier-actif="1"]{bottom:108px}
  .bandeau-cookies p{font-size:11.5px;flex-basis:100%}
}

/* Fiche produit (mise en page 2 colonnes) */
/* Deux colonnes (image à gauche, infos à droite) sans toucher au HTML : la
   fiche produit tenait sur 760px de colonne unique, la moitié droite d'un
   grand écran restait vide. `grid-row:2/-1` fait tenir l'image sur toute la
   hauteur de la colonne de droite quel que soit le nombre de lignes qu'elle
   occupe (texte de longueur variable). Repli en une colonne sous 760px. */
.fiche{max-width:1040px;margin:0 auto;padding:72px 28px 64px;
  display:grid;grid-template-columns:minmax(240px,360px) 1fr;column-gap:56px}
.fiche .fil{grid-column:1/-1;grid-row:1;margin:0 0 40px;font-family:var(--mono);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}
.fiche .fil a{color:var(--gris);text-decoration:none;border-bottom:1px solid rgba(var(--sp-texte-sur-nuit-rgb),.3)}
.fiche .fil a:hover{color:var(--trait);border-color:var(--trait)}
.fiche .vignette-piece{grid-column:1;grid-row:2/9;align-self:start;
  width:100%;max-width:320px;height:280px;color:var(--gris);margin:0 0 28px}
.fiche img.vignette-piece{grid-column:1;grid-row:2/9;align-self:start;
  width:100%;max-width:360px;height:340px;margin:0 0 28px}
.fiche .vign-picto{display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:18px;padding:28px;box-sizing:border-box;
  background:rgba(var(--trait-rgb),.05);border-radius:6px}
.fiche .vign-picto svg{width:150px;height:142px;flex:none;opacity:.85}
.fiche .vign-ref{font-family:var(--mono);font-size:13px;letter-spacing:.1em;
  line-height:1.5;text-align:center;color:var(--gris);word-break:break-word}
.fiche .marque-p{grid-column:2;grid-row:2;font-family:var(--mono);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}
.fiche h1{grid-column:2;grid-row:3;margin:10px 0 4px;font-family:var(--display);
  font-weight:800;font-size:clamp(24px,3vw,34px);letter-spacing:-.03em;line-height:1.08}
/* grid-row:4 — libre entre h1 (3) et .compat (5), aucun autre élément à
   décaler. Titre fournisseur brut, tel que reçu : formater_titre_produit()
   n'en cache qu'une partie dans le h1 au-dessus. */
.fiche .titre-brut{grid-column:2;grid-row:4;margin:0 0 18px;font-size:12px;
  line-height:1.5;color:var(--gris)}
/* La description quitte la colonne de droite : sur les fiches issues de
   Shopify elle fait parfois quinze lignes et repoussait le prix hors écran.
   Elle passe pleine largeur sous le bloc d'achat, là où le lecteur la
   cherche une fois le prix et le statut vus. Les données fournisseur qui
   arrivent comme « Clé : valeur » sont rendues en tableau, tandis que seul
   le vrai texte libre reste en paragraphes. */
.fiche .contenu-fiche{grid-column:1/-1;grid-row:9;margin-top:40px;max-width:74ch}
.contenu-fiche section{margin:0 0 34px}
.contenu-fiche h2{margin:0 0 14px;font-family:var(--display);font-weight:800;
  font-size:21px;letter-spacing:-.02em;color:var(--trait)}
.description-produit{font-size:16px;line-height:1.7;color:var(--trait);max-width:60ch}
.description-produit p{margin:0 0 14px}
.description-produit ul,.description-produit ol{margin:0 0 14px;padding-left:22px}
.description-produit li{margin:0 0 7px}
.resume-produit{max-width:760px}
.resume-produit dl{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px}
.resume-produit dl>div{border:1px solid rgba(var(--sp-texte-sur-nuit-rgb),.12);border-radius:8px;padding:12px 14px;background:rgba(255,255,255,.03)}
.resume-produit dt{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);margin-bottom:4px}
.resume-produit dd{margin:0;font-size:15px;line-height:1.45;color:var(--trait)}
.specifications-produit{max-width:760px;padding-top:24px;
  border-top:1px solid rgba(var(--sp-texte-sur-nuit-rgb),.14)}
.specifications-produit dl{margin:0;border-top:1px solid rgba(var(--sp-texte-sur-nuit-rgb),.12)}
.specifications-produit dl>div{display:grid;grid-template-columns:minmax(140px,31%) 1fr;
  gap:18px;padding:12px 0;border-bottom:1px solid rgba(var(--sp-texte-sur-nuit-rgb),.12)}
.specifications-produit dt{font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gris)}
.specifications-produit dd{margin:0;font-size:14.5px;line-height:1.5;color:var(--trait)}
.source-technique{margin:0;font-family:var(--mono);font-size:10px;letter-spacing:.05em;
  color:var(--gris)}
.source-technique a{color:var(--jaune);text-underline-offset:3px}
@media (max-width:520px){
  .fiche .contenu-fiche{margin-top:34px}
  .resume-produit dl{grid-template-columns:1fr}
  .specifications-produit dl>div{grid-template-columns:1fr;gap:4px;padding:11px 0}
}
.fiche .compat{grid-column:2;grid-row:5;display:flex;align-items:center;gap:9px;margin:0 0 22px;
  padding:12px 14px;border:1px solid rgba(var(--trait-rgb),.2);background:rgba(var(--trait-rgb),.025);
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
.fiche .compat::before{content:"✓";display:grid;place-items:center;width:17px;height:17px;flex:none;
  border:1px solid rgba(131,142,149,.6);color:var(--vert);font-size:11px;line-height:1}
.fiche .achat{grid-column:2;grid-row:6;display:flex;align-items:center;flex-wrap:wrap;
  gap:16px 24px;padding:22px 0 24px;border-top:1px solid rgba(var(--sp-texte-sur-nuit-rgb),.14);
  border-bottom:1px solid rgba(var(--sp-texte-sur-nuit-rgb),.14)}
.fiche .achat strong{font-family:var(--display);font-weight:800;font-size:28px;letter-spacing:-.02em}
.fiche .dispo{display:block;margin-top:4px;font-family:var(--mono);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}
.fiche .ajouter{margin-left:auto;background:var(--trait);color:var(--nuit);border:none;
  padding:14px 26px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;cursor:pointer;transition:background .18s,transform .15s,box-shadow .15s}
.fiche .ajouter:hover{background:var(--jaune);transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(var(--sp-encre-rgb),.2)}
.fiche .ajouter.mis{background:var(--vert)}
.fiche .ajouter.mis{background:var(--vert);color:var(--nuit)}
/* flex-basis:100% dans .achat (flex-wrap:wrap) : force sa propre ligne
   plutôt que de disputer l'espace horizontal au prix/bouton — placée juste
   avant <button class="ajouter"> dans le HTML, elle atterrit donc juste
   au-dessus (jamais dans .detail, qui est le bloc specs). */
.fiche .delai-livraison{flex-basis:100%;margin:0;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.05em;color:var(--gris)}
/* Même technique, placée juste après <button> dans le HTML : sa propre
   ligne, sous le bouton. */
.fiche .reassurance-humaine{flex-basis:100%;display:flex;align-items:center;
  gap:6px;margin:0;font-size:11.5px;line-height:1.4;color:var(--gris)}
.fiche .reassurance-humaine svg{width:14px;height:14px;flex:none;opacity:.8}
.fiche .reassurance-humaine a{color:inherit;text-decoration:underline;
  text-decoration-color:rgba(var(--trait-rgb),.35)}
.fiche .reassurance-humaine a:hover{color:var(--trait);text-decoration-color:currentColor}
/* Un rapport DTC est vendu comme article séparé. Case à cocher (pas un simple
   lien) : la décision d'ajouter ce second article se prend au même endroit
   que celle d'ajouter la pièce elle-même, avant le bouton "Ajouter au panier"
   qu'elle pilote via data-dtc-ref (panier.js). Cochée par défaut : c'est un
   document requis pour la mise en circulation, pas un accessoire. */
.fiche .option-dtc{flex-basis:100%;display:flex;align-items:flex-start;gap:9px;
  margin:2px 0;padding:11px 13px;border:1px solid rgba(var(--trait-rgb),.3);
  border-radius:9px;background:rgba(var(--trait-rgb),.05);
  font-size:12.5px;line-height:1.45;color:var(--gris);cursor:pointer}
.fiche .option-dtc input{margin-top:2px;flex:none;width:15px;height:15px;accent-color:var(--jaune)}
.fiche .option-dtc strong{color:var(--trait);font-weight:600;white-space:nowrap}
.fiche .option-dtc a{color:inherit;text-decoration:underline;
  text-decoration-color:rgba(var(--trait-rgb),.35)}
.fiche .option-dtc a:hover{color:var(--trait);text-decoration-color:currentColor}
.fiche .tampon-groupe{display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.fiche .homolog-lien{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gris);text-decoration:none;
  border-bottom:1px solid rgba(var(--sp-texte-sur-nuit-rgb),.3)}
.fiche .homolog-lien:hover{color:var(--trait);border-color:var(--trait)}
.fiche .voir3d{grid-column:2;grid-row:7;display:inline-block;margin-top:28px;
  color:var(--jaune);text-decoration:none;border-bottom:1px solid currentColor;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.fiche .avertissement{grid-column:1/-1;grid-row:10;margin-top:36px}
@media (max-width:760px){
  .fiche{display:block}
  .fiche .vignette-piece,.fiche img.vignette-piece{max-width:none}
}

/* Fiche homologation */
.fiche-homolog{max-width:680px;margin:0 auto;padding:72px 28px 64px}
.fiche-homolog .fil{margin:0 0 40px;font-family:var(--mono);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}
.fiche-homolog .fil a{color:var(--gris);text-decoration:none;border-bottom:1px solid rgba(var(--sp-texte-sur-nuit-rgb),.3)}
.fiche-homolog .fil a:hover{color:var(--trait);border-color:var(--trait)}
.fiche-homolog .marque-p{font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gris)}
.fiche-homolog h1{margin:10px 0 8px;font-family:var(--display);font-weight:800;
  font-size:clamp(22px,2.8vw,30px);letter-spacing:-.03em;line-height:1.14}
.fiche-homolog .compat{margin:0 0 34px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.fiche-homolog .tableau{border-top:1px solid rgba(var(--sp-texte-sur-nuit-rgb),.14);margin:0 0 28px}
.fiche-homolog .lh{display:flex;justify-content:space-between;gap:20px;padding:14px 0;
  border-bottom:1px solid rgba(var(--sp-texte-sur-nuit-rgb),.14)}
.fiche-homolog .lh .cle{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gris);flex:0 0 auto}
.fiche-homolog .lh .val{font-size:14.5px;line-height:1.5;text-align:right;max-width:60%}
.fiche-homolog .homolog-pdf{color:var(--jaune);text-decoration:none;
  border-bottom:1px solid currentColor;font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase}
.fiche-homolog .voir-fiche{display:inline-block;margin-top:8px;color:var(--jaune);
  text-decoration:none;border-bottom:1px solid currentColor;font-family:var(--mono);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase}


/* Accueil adapté de la maquette validée. */
body:has(.hero){
  color-scheme: dark;
  --ink: var(--sp-nuit);
  --paper: var(--sp-texte-sur-nuit);
  --muted: var(--sp-gris-sur-nuit);
  --gold: var(--sp-bronze-clair);
  --line: #343630;
  --sans: var(--sp-police-texte);
  --display: var(--sp-police-titre);
  --mono: var(--sp-police-mono);
}
body:has(.hero) :where(.hero,.zone-nav,.selection) *{ box-sizing: border-box; }
body:has(.hero) :where(.hero,.zone-nav,.selection) button,body:has(.hero) :where(.hero,.zone-nav,.selection) input,body:has(.hero) :where(.hero,.zone-nav,.selection) select{ font: inherit; }
body:has(.hero) :where(.hero,.zone-nav,.selection) button,body:has(.hero) :where(.hero,.zone-nav,.selection) a,body:has(.hero) :where(.hero,.zone-nav,.selection) select{ -webkit-tap-highlight-color: transparent; }
body:has(.hero) :where(.hero,.zone-nav,.selection) button,body:has(.hero) :where(.hero,.zone-nav,.selection) select{ cursor: pointer; }
body:has(.hero) :where(.hero,.zone-nav,.selection) a{ color: inherit; }
body:has(.hero) :where(.hero,.zone-nav,.selection) button{ color: inherit; }
body:has(.hero) :where(.hero,.zone-nav,.selection) svg{ width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
body:has(.hero) :where(.hero,.zone-nav,.selection) button:disabled{ cursor: wait; opacity: .6; }
body:has(.hero) :where(.hero,.zone-nav,.selection) :focus-visible{ outline: 2px solid var(--gold); outline-offset: 5px; }
body:has(.hero) [hidden]{ display: none !important; }
body:has(.hero) .sr-only{ position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body:has(.hero) .skip-link{ position: fixed; top: 12px; left: 12px; padding: 12px; z-index: 10; background: var(--paper); color: var(--ink); transform: translateY(-150%); }
body:has(.hero) .skip-link:focus{ transform: none; }
body:has(.hero) .site-header{ min-height: 82px; padding: 16px clamp(20px, 4vw, 64px); display: flex; align-items: center; justify-content: space-between; gap: 28px; border-bottom: 1px solid var(--line); }
body:has(.hero) .logo{ text-decoration: none; font: 700 23px var(--display); letter-spacing: .06em; white-space: nowrap; }
body:has(.hero) .logo span{ color: var(--gold); }
body:has(.hero) .main-nav{ display: flex; gap: clamp(16px, 2.5vw, 38px); font-size: 14px; }
body:has(.hero) .main-nav a{ text-decoration: none; color: var(--muted); padding-block: 10px; }
body:has(.hero) .main-nav a:hover,body:has(.hero) .site-footer a:hover{ color: var(--paper); }
body:has(.hero) .cart-button{ display: flex; gap: 10px; align-items: center; padding: 8px 0 8px 12px; border: 0; background: none; font-size: 13px; }
body:has(.hero) .cart-button b{ display: grid; place-items: center; min-width: 23px; height: 23px; border: 1px solid var(--line); border-radius: 50%; font-size: 11px; }
body:has(.hero) .hero{ min-height: 605px; position: relative; display: flex; align-items: center; overflow: hidden; background: #0b0e0d; }
body:has(.hero) .hero-photo{ position: absolute; right: 0; top: 0; width: 77%; height: 100%; object-fit: cover; object-position: 64% 53%; }
body:has(.hero) .hero-shade{ position: absolute; inset: 0; background: linear-gradient(90deg, #0b0e0d 6%, rgba(11,14,13,.95) 27%, rgba(11,14,13,.42) 46%, transparent 72%), linear-gradient(0deg, rgba(var(--sp-nuit-rgb),.5) 0%, transparent 27%); }
body:has(.hero) .hero-copy{ position: relative; padding: 56px clamp(20px, 4vw, 64px) 46px; width: min(780px, 61%); }
body:has(.hero) .eyebrow{ margin: 0 0 14px; font: 400 10px/1.6 var(--mono); letter-spacing: .15em; text-transform: uppercase; color: var(--gold); }
body:has(.hero) :where(.hero,.zone-nav,.selection) h1{ font: 700 clamp(40px, 4.2vw, 66px)/1.04 var(--display); letter-spacing: -.045em; margin: 0 0 22px; }
body:has(.hero) :where(.hero,.zone-nav,.selection) h1 span{ color: #d1c6af; }
body:has(.hero) .hero-description{ margin: 0 0 28px; max-width: 470px; font-size: 15px; line-height: 1.6; color: #B9BFC4; }
body:has(.hero) .vehicle-form{ max-width: 630px; }
body:has(.hero) .vehicle-form fieldset{ border: 0; margin: 0; padding: 0; min-width: 0; }
body:has(.hero) .vehicle-form legend{ padding: 0; margin: 0 0 9px; font-size: 13px; }
body:has(.hero) .vehicle-fields{ display: grid; grid-template-columns: .65fr 1.05fr 1.4fr .85fr; border: 1px solid #4D5256; background: rgba(12,15,14,.92); }
body:has(.hero) .vehicle-fields label{ min-width: 0; padding: 9px 10px 7px; border-right: 1px solid var(--line); font-size: 10px; color: var(--muted); }
body:has(.hero) .vehicle-fields label:last-child{ border-right: 0; }
body:has(.hero) .vehicle-fields label:focus-within{ box-shadow: inset 0 -2px var(--gold); }
body:has(.hero) .vehicle-fields select{ display: block; width: 100%; min-height: 27px; padding: 0 19px 0 0; appearance: none; border: 0; outline: 0; border-radius: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23c9a369'/%3E%3C/svg%3E") right center/9px no-repeat; color: var(--paper); font-size: 12px; text-overflow: ellipsis; }
body:has(.hero) .vehicle-fields option{ background: var(--sp-nuit); }
body:has(.hero) .hero-actions{ display: flex; align-items: center; gap: 18px 22px; margin-top: 18px; flex-wrap: wrap; }
body:has(.hero) .primary-button{ display: inline-flex; justify-content: space-between; align-items: center; gap: 32px; min-height: 48px; padding: 13px 20px; border: 1px solid var(--paper); background: var(--paper); color: var(--sp-nuit); font-size: 13px; text-decoration: none; font-weight: 600; }
body:has(.hero) .primary-button:hover{ background: #fff4da; }
body:has(.hero) .text-link{ display: inline-flex; align-items: center; gap: 13px; padding-block: 8px; text-decoration: none; font-size: 12px; color: #BCC5CB; }
body:has(.hero) .text-link:hover{ color: var(--gold); }
body:has(.hero) .text-link span{ color: var(--gold); font-size: 18px; }
body:has(.hero) .proofs{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 32px; }
body:has(.hero) .proofs p{ display: flex; gap: 10px; margin: 0; padding-right: 10px; border-right: 1px solid #42443b; }
body:has(.hero) .proofs p:last-child{ border: 0; padding-right: 0; }
body:has(.hero) .proofs svg{ color: var(--gold); width: 24px; }
body:has(.hero) .proofs b{ display: block; font-weight: 400; font-size: 12px; margin-bottom: 5px; }
body:has(.hero) .proofs small{ display: block; font-size: 10px; line-height: 1.5; color: var(--muted); }
body:has(.hero) .zone-nav{ display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); margin: 0 clamp(20px,4vw,64px); border: 1px solid var(--line); position: relative; }
body:has(.hero) .zone-nav button{ display: grid; grid-template-columns: 1fr auto; row-gap: 7px; text-align: left; padding: 20px 22px; border: 0; border-right: 1px solid var(--line); background: var(--sp-nuit); min-width: 0; }
body:has(.hero) .zone-nav button:last-child{ border-right: 0; }
body:has(.hero) .zone-nav button > span{ grid-column: 1/-1; color: var(--gold); font-size: 19px; }
body:has(.hero) .zone-nav b{ font: 400 11px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
body:has(.hero) .zone-nav small{ font: 10px/1.5 var(--mono); color: #91999F; }
body:has(.hero) .zone-nav button:hover{ background: #1b211c; }
body:has(.hero) .zone-nav button[aria-pressed="true"]{ box-shadow: inset 0 -2px var(--gold); background: var(--sp-encre); }
body:has(.hero) .selection{ padding: 46px clamp(20px,4vw,64px) 52px; }
body:has(.hero) .selection-heading{ display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
body:has(.hero) .selection-heading .eyebrow{ margin-bottom: 9px; }
body:has(.hero) :where(.hero,.zone-nav,.selection) h2{ font: 500 30px/1.12 var(--display); letter-spacing: -.035em; margin: 0; }
body:has(.hero) .selection-toolbar{ margin: 23px 0 18px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
body:has(.hero) .selection-tools{ display: flex; align-items: center; flex-wrap: wrap; gap: 15px; }
body:has(.hero) .selection-tools p{ margin: 0; font-size: 12px; color: var(--muted); }
body:has(.hero) .reset-selection{ background: none; border: 1px solid var(--line); padding: 8px 12px; font-size: 12px; }
body:has(.hero) .reset-selection span{ color: var(--gold); margin-left: 8px; }
body:has(.hero) .product-search{ display: flex; align-items: center; gap: 10px; padding: 10px 13px; border: 1px solid var(--line); width: min(340px, 100%); }
body:has(.hero) .product-search:focus-within{ border-color: var(--gold); }
body:has(.hero) .product-search svg{ width: 17px; height: 17px; color: var(--gold); }
body:has(.hero) .product-search input{ width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--paper); font-size: 12px; min-height: 23px; }
body:has(.hero) .product-search input::placeholder{ color: var(--muted); }
body:has(.hero) .product-grid{ display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
body:has(.hero) .product-card{ display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); background: var(--sp-nuit); text-decoration: none; transition: border-color .18s, transform .18s; }
body:has(.hero) .product-card:hover{ transform: translateY(-3px); border-color: var(--gold); }
body:has(.hero) .product-image{ position: relative; aspect-ratio: 1.4; display: grid; place-items: center; background: var(--sp-papier); overflow: hidden; color: #444a40; }
body:has(.hero) .product-image img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 20px; mix-blend-mode: multiply; }
body:has(.hero) .product-image span{ font-size: 12px; }
body:has(.hero) .product-body{ display: flex; flex-direction: column; flex: 1; gap: 10px; padding: 20px; }
body:has(.hero) .product-brand{ font: 10px var(--mono); letter-spacing: .07em; color: var(--gold); text-transform: uppercase; }
body:has(.hero) .product-card h3{ font: 500 17px/1.3 var(--display); margin: 0; overflow-wrap: anywhere; }
body:has(.hero) .product-ref{ margin: 0; font: 10px/1.5 var(--mono); color: var(--muted); overflow-wrap: anywhere; }
body:has(.hero) .product-price{ margin-top: auto; padding-top: 8px; font-size: 19px; font-weight: 400; }
body:has(.hero) .product-stock{ display: flex; gap: 7px; align-items: center; color: #ADB4B9; font-size: 11px; }
body:has(.hero) .product-stock::before{ content: ""; width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: currentColor; }
body:has(.hero) .product-stock.on-order{ color: #d7bc8f; }
body:has(.hero) .empty-state{ padding: 36px 20px; text-align: center; border: 1px solid var(--line); color: var(--muted); font-size: 14px; }
body:has(.hero) .help-strip{ display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 32px clamp(20px,4vw,64px); background: #e9dfc7; color: var(--sp-encre); }
body:has(.hero) .help-strip .eyebrow{ color: #695639; margin-bottom: 8px; }
body:has(.hero) .help-strip h2{ font-size: 25px; }
body:has(.hero) .help-strip a{ font-size: 16px; text-decoration: none; overflow-wrap: anywhere; }
body:has(.hero) .help-strip a span{ margin-left: 20px; color: var(--sp-bronze); }
body:has(.hero) .site-footer{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 22px; padding: 35px clamp(20px,4vw,64px) 23px; }
body:has(.hero) .site-footer .logo{ font-size: 17px; }
body:has(.hero) .site-footer p{ font-size: 11px; color: var(--muted); margin: 8px 0 0; }
body:has(.hero) .site-footer nav{ display: flex; gap: 20px; flex-wrap: wrap; font-size: 11px; color: var(--muted); }
body:has(.hero) .site-footer nav a{ text-decoration: none; padding-block: 8px; }
body:has(.hero) .site-footer .photo-credit{ flex: 0 0 100%; font-size: 10px; color: #90979C; }
body:has(.hero) .site-footer .demo-note{ font-size: 11px; }
body:has(.hero) dialog{ border: 1px solid #535849; background: var(--sp-nuit); color: var(--paper); padding: 26px; width: min(540px, calc(100% - 32px)); max-height: 85dvh; overflow: auto; }
body:has(.hero) dialog::backdrop{ background: rgba(0,0,0,.65); }
body:has(.hero) .dialog-heading{ display: flex; align-items: center; justify-content: space-between; gap: 18px; }
body:has(.hero) .close-button{ border: 1px solid var(--line); background: none; width: 44px; height: 44px; font-size: 24px; }
body:has(.hero) .cart-note{ font-size: 12px; color: var(--muted); }
body:has(.hero) .cart-line{ padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
body:has(.hero) .cart-line small{ display: block; margin-top: 8px; color: var(--muted); }
body:has(.hero) #cart-lines{ margin: 20px 0; }
@media (min-width: 1600px){body:has(.hero) main,body:has(.hero) .site-header,body:has(.hero) .site-footer{ max-width: 1600px; margin-inline: auto; }

}
@media (max-width: 1100px){body:has(.hero) .hero-copy{ width: 70%; }
body:has(.hero) .hero-photo{ width: 87%; object-position: 55% center; }
body:has(.hero) .hero-shade{ background: linear-gradient(90deg,#0b0e0d 5%,rgba(11,14,13,.78) 42%,rgba(11,14,13,.08) 100%),linear-gradient(0deg,rgba(var(--sp-nuit-rgb),.55),transparent 25%); }
body:has(.hero) .main-nav{ gap: 18px; font-size: 12px; }
body:has(.hero) .product-grid{ gap: 12px; }
body:has(.hero) .product-body{ padding: 15px; }

}
@media (max-width: 800px){body:has(.hero) .site-header{ flex-wrap: wrap; row-gap: 8px; }
body:has(.hero) .main-nav{ order: 3; flex-basis: 100%; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 3px; }
body:has(.hero) .hero{ min-height: 620px; }
body:has(.hero) .hero-copy{ width: 100%; max-width: 700px; padding-block: 42px; }
body:has(.hero) .hero-photo{ width: 100%; object-position: 65% center; opacity: .7; }
body:has(.hero) .hero-shade{ background: linear-gradient(90deg,rgba(11,14,13,.88),rgba(11,14,13,.45) 70%,rgba(11,14,13,.1)),linear-gradient(0deg,rgba(var(--sp-nuit-rgb),.55),transparent); }
body:has(.hero) .zone-nav{ grid-template-columns: repeat(5, minmax(138px,1fr)); overflow-x: auto; overscroll-behavior-inline: contain; }
body:has(.hero) .zone-nav button{ padding: 16px; }
body:has(.hero) .product-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); }
body:has(.hero) .help-strip{ align-items: flex-start; flex-direction: column; }

}
@media (max-width: 520px){body:has(.hero) .site-header{ column-gap: 12px; }
body:has(.hero) .site-header .logo{ font-size: 19px; }
body:has(.hero) .cart-button{ gap: 8px; padding-left: 0; font-size: 12px; }
body:has(.hero) .cart-button svg{ width: 20px; height: 20px; }
body:has(.hero) .main-nav{ gap: 10px; font-size: 11px; white-space: nowrap; }
body:has(.hero) :where(.hero,.zone-nav,.selection) h1{ font-size: 43px; }
body:has(.hero) .hero-description{ font-size: 14px; }
body:has(.hero) .vehicle-fields{ grid-template-columns: repeat(2,minmax(0,1fr)); }
body:has(.hero) .vehicle-fields label:nth-child(2){ border-right: 0; }
body:has(.hero) .vehicle-fields label:nth-child(-n+2){ border-bottom: 1px solid var(--line); }
body:has(.hero) .vehicle-fields select{ min-height: 31px; font-size: 13px; }
body:has(.hero) .hero-actions{ gap: 10px; }
body:has(.hero) .primary-button{ min-height: 49px; }
body:has(.hero) .proofs{ gap: 10px; }
body:has(.hero) .proofs p{ flex-direction: column; gap: 8px; }
body:has(.hero) .proofs b{ font-size: 11px; }
body:has(.hero) .proofs small{ font-size: 10px; }
body:has(.hero) .selection{ padding-top: 32px; }
body:has(.hero) .selection-heading{ display: block; }
body:has(.hero) .selection-heading > a{ margin-top: 12px; }
body:has(.hero) :where(.hero,.zone-nav,.selection) h2{ font-size: 27px; }
body:has(.hero) .selection-toolbar{ flex-direction: column-reverse; align-items: stretch; gap: 14px; margin-top: 16px; }
body:has(.hero) .product-search{ width: 100%; }
body:has(.hero) .product-grid{ gap: 10px; }
body:has(.hero) .product-image{ aspect-ratio: 1; }
body:has(.hero) .product-image img{ padding: 12px; }
body:has(.hero) .product-body{ padding: 12px; gap: 8px; }
body:has(.hero) .product-card h3{ font-size: 14px; }
body:has(.hero) .product-price{ font-size: 16px; }
body:has(.hero) .product-brand,body:has(.hero) .product-ref{ font-size: 9px; }
body:has(.hero) .help-strip a{ font-size: 14px; }

}
@media (prefers-reduced-motion: reduce){body:has(.hero) .product-card{ transition: none; }

}


body:has(.hero) .hero{height:auto;flex-direction:row;border:0;min-height:605px}
body:has(.hero) .barre{position:relative;flex-wrap:wrap;gap:18px;padding:18px clamp(20px,4vw,64px);background:var(--sp-nuit);color:var(--sp-texte-sur-nuit);--trait:var(--sp-texte-sur-nuit);--gris:var(--sp-gris-sur-nuit);--jaune:var(--sp-bronze-clair);--nuit:var(--sp-nuit)}
.site-nav{display:flex;gap:22px;margin-left:auto;font-size:12px}
.site-nav a{color:inherit;text-decoration:none}
body:has(.hero) .hero-copy h1{font:700 clamp(36px,4.2vw,66px)/1.04 var(--display);letter-spacing:-.045em;margin:0 0 22px}
body:has(.hero) .hero-copy h1 span{color:#d1c6af}
body:has(.hero) .selection h2{font:500 30px/1.12 var(--display);margin:0}
@media(max-width:980px){.site-nav{order:4;width:100%;justify-content:space-between;gap:10px}}
@media(max-width:520px){body:has(.hero) .barre{gap:10px}body:has(.hero) .marque{font-size:20px}body:has(.hero) .veh-switch{margin-left:auto}body:has(.hero) .veh-switch summary{font-size:9px}body:has(.hero) .hero{min-height:620px}}

body:has(.hero){background:var(--sp-nuit);color:var(--sp-texte-sur-nuit)}
body:has(.hero) .marque{font-size:23px;letter-spacing:-.03em}
body:has(.hero) .hero svg,body:has(.hero) .selection svg{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:520px){body:has(.hero) .marque{font-size:19px}}

/* Icônes techniques des catégories : mêmes tracés que les vignettes. */
body:has(.hero) .zone-nav .zone-icon{grid-column:1/-1;width:68px;height:68px;padding:12px;box-sizing:border-box;
  border-radius:50%;border:1px solid rgba(201,163,105,.46);
  background:linear-gradient(145deg,rgba(201,163,105,.18),rgba(201,163,105,.035) 72%);
  filter:drop-shadow(0 5px 10px rgba(0,0,0,.16));
  transition:transform .18s,border-color .18s,background .18s}
body:has(.hero) .zone-nav button:hover .zone-icon,body:has(.hero) .zone-nav button[aria-pressed="true"] .zone-icon{
  transform:translateY(-2px);border-color:rgba(201,163,105,.9);background:linear-gradient(145deg,rgba(201,163,105,.32),rgba(201,163,105,.08) 72%)}
@media(max-width:800px){body:has(.hero) .zone-nav .zone-icon{width:50px;height:50px;padding:9px}}

/* Sélection opaque : le fond crème appartient uniquement au catalogue. */
body:has(.hero) .selection{position:relative;background:var(--sp-nuit)}

/* Sélecteur véhicule : champs compacts et menus dessinés avec le site. */
body:has(.hero) .vehicle-form legend{font-size:12px;color:#d1c6af;margin-bottom:12px}
body:has(.hero) .vehicle-fields{gap:6px;border:0;background:none;grid-template-columns:.62fr 1fr 1.3fr .8fr}
body:has(.hero) .vehicle-fields label{padding:12px 12px 10px;border:1px solid #41453d;border-radius:5px;background:rgba(15,19,17,.96);transition:border-color .15s}
body:has(.hero) .vehicle-fields label:last-child{border:1px solid #41453d}
body:has(.hero) .vehicle-fields label:focus-within{box-shadow:none;border-color:var(--sp-bronze-clair)}
body:has(.hero) .vehicle-fields .vehicle-field-label{display:block;margin-bottom:6px;font-size:9px;letter-spacing:.07em;text-transform:uppercase;color:#a5a99e}
body:has(.hero) .vehicle-fields .vehicle-picker{position:relative;display:block;width:100%;min-height:28px;border:0;padding:0 17px 0 0;background:none;text-align:left;color:var(--sp-texte-sur-nuit);font:500 12px/1.4 var(--corps);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
body:has(.hero) .vehicle-fields .vehicle-picker::after{content:"";position:absolute;right:1px;top:9px;width:6px;height:6px;border-right:1.4px solid var(--sp-bronze-clair);border-bottom:1.4px solid var(--sp-bronze-clair);transform:rotate(45deg)}
body:has(.hero) .vehicle-fields .vehicle-picker[aria-expanded="true"]::after{transform:translateY(3px) rotate(225deg)}
body:has(.hero) .vehicle-fields .vehicle-picker:disabled{opacity:1;cursor:default}
body:has(.hero) .vehicle-fields .vehicle-picker.is-fixed::after{display:none}
body:has(.hero) .vehicle-fields select[hidden]{display:none}
.vehicle-picker-menu{position:fixed;z-index:100;overflow-y:auto;padding:6px;background:#191e1a;color:var(--sp-texte-sur-nuit);border:1px solid #525a4d;border-radius:7px;box-shadow:0 14px 40px #0008;font:13px/1.4 var(--sp-police-texte);overscroll-behavior:contain;scrollbar-color:#555d50 #191e1a}
.vehicle-picker-menu[hidden]{display:none}
.vehicle-picker-option{position:relative;padding:12px 35px 12px 12px;border-radius:3px;cursor:pointer}
.vehicle-picker-option:hover,.vehicle-picker-option.is-active{background:#2c342b}
.vehicle-picker-option[aria-selected="true"]{color:#e5c99c}
.vehicle-picker-option[aria-selected="true"]::after{content:"";position:absolute;right:14px;top:15px;width:5px;height:10px;border-right:1.5px solid var(--sp-bronze-clair);border-bottom:1.5px solid var(--sp-bronze-clair);transform:rotate(45deg)}
@media(max-width:520px){
  body:has(.hero) .vehicle-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  body:has(.hero) .vehicle-fields label:nth-child(n){border:1px solid #41453d}
  body:has(.hero) .vehicle-fields .vehicle-picker{font-size:13px;min-height:31px}
}
@media(prefers-reduced-motion:reduce){body:has(.hero) .vehicle-fields label{transition:none}}

/* Hero vivant : la catégorie retenue a son propre univers photo sans à-coup. */
body:has(.hero) .hero-photo{transition:opacity .22s ease}
body:has(.hero) .hero-photo.is-changing{opacity:.52}

/* Navigation mobile : le sélecteur véhicule reste disponible, mais les quatre
   liens n'occupent plus une seconde ligne permanente. */
.mobile-menu{display:none;position:relative}
.mobile-menu summary{list-style:none;cursor:pointer;font-family:var(--mono);font-size:9px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--trait);white-space:nowrap}
.mobile-menu summary::-webkit-details-marker{display:none}
.mobile-menu summary span{margin-left:6px;color:var(--jaune);font-size:13px}
.mobile-menu nav{position:absolute;right:0;top:calc(100% + 12px);z-index:30;width:min(230px,calc(100vw - 32px));
  padding:7px;background:var(--sp-nuit);border:1px solid rgba(var(--trait-rgb),.26);box-shadow:0 16px 36px rgba(0,0,0,.4)}
.mobile-menu nav a{display:block;padding:12px;color:var(--trait);text-decoration:none;font-size:12px}
.mobile-menu nav a:hover{background:rgba(var(--trait-rgb),.08);color:var(--jaune)}
@media(max-width:640px){
  body:has(.hero) .barre{flex-wrap:nowrap;gap:10px;padding:12px 16px}
  body:has(.hero) .site-nav{display:none}
  body:has(.hero) .barre .veh-switch{order:0;flex:0 1 140px;width:auto;margin-left:auto}
  body:has(.hero) .veh-switch summary{min-height:34px;padding:5px 18px 5px 8px;border:1px solid rgba(var(--trait-rgb),.2);gap:0}
  body:has(.hero) .veh-switch-prefix,body:has(.hero) .veh-switch-change{display:none}
  body:has(.hero) .veh-switch-label b{display:block;max-width:108px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px}
  body:has(.hero) .veh-switch summary::after{right:8px}
  .mobile-menu{display:block;order:1;flex:none}
}
@media(prefers-reduced-motion:reduce){body:has(.hero) .hero-photo{transition:none}}

/* Le catalogue complet vit juste sous la vitrine (hero + sélection) : sur les
   pages véhicule, on le garde dans le même thème sombre au lieu du crème des
   fiches produit/pages texte, pour que le scroll ne bascule pas de couleur
   au milieu de la même page. */
body:has(.hero) .catalogue,body:has(.hero) .pied-page{--nuit:var(--sp-nuit);--trait:var(--sp-texte-sur-nuit);--trait-rgb:var(--sp-texte-sur-nuit-rgb);--gris:var(--sp-gris-sur-nuit);
  --jaune:var(--sp-bronze-clair);--vert:var(--sp-homologue-fond);--ocre:var(--sp-expertise-fond);--oxyde:var(--sp-circuit-fond)}

/* Types de pièces : deuxième niveau de navigation du catalogue. */
.cat-types{display:flex;flex-wrap:wrap;gap:8px;padding:20px 0 26px;border-bottom:1px solid rgba(var(--trait-rgb),.18);margin-bottom:26px}
.cat-types[hidden]{display:none}
.cat-types button{display:inline-flex;align-items:center;gap:10px;padding:11px 16px;border:1px solid rgba(var(--trait-rgb),.25);border-radius:6px;background:transparent;color:var(--trait);font:inherit;font-size:14px;cursor:pointer;transition:background .18s,border-color .18s}
.cat-types button span{font-size:12px;opacity:.6;font-variant-numeric:tabular-nums}
.cat-types button:hover{border-color:var(--jaune)}
.cat-types button[aria-pressed="true"]{background:var(--jaune);border-color:var(--jaune);color:#101416}
.cat-types button:focus-visible{outline:2px solid var(--jaune);outline-offset:3px}
.veh-switch-menu{position:fixed;left:50%;right:auto;top:var(--veh-menu-top,100px);transform:translateX(-50%);width:min(980px,calc(100vw - 32px));min-width:0;max-width:none;max-height:calc(100dvh - var(--veh-menu-top,100px) - 20px);overflow:auto;padding:22px;background:var(--sp-nuit);border:1px solid #424C53;border-radius:12px;box-shadow:0 24px 80px #0009;z-index:1000}
.veh-switch-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px;color:var(--sp-craie)}
.veh-switch-head>strong{font-size:20px;font-weight:500;letter-spacing:0}
.veh-switch-close{background:none;border:0;color:#B3BCC3;font-size:28px;cursor:pointer;min-width:40px;min-height:40px}
.veh-switch-search{width:100%;padding:12px 14px;border:1px solid #43483d;border-radius:6px;background:#191B1C;color:var(--sp-craie);font:inherit;font-size:14px;margin-bottom:18px;box-sizing:border-box}
.veh-switch-groups{display:grid;grid-template-columns:1.35fr 1fr 1fr .68fr;gap:18px}
.veh-switch-group h3{color:var(--sp-bronze-clair);font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;margin:0 0 9px;white-space:nowrap}
.veh-switch-cards{display:grid;grid-template-columns:1fr;gap:7px}
.veh-switch-group:first-child .veh-switch-cards{grid-template-columns:1fr 1fr}
.veh-switch-menu .veh-switch-cards a{display:flex;flex-direction:column;gap:4px;padding:10px 11px;border:1px solid #30392f;border-radius:6px;background:#191B1C;text-transform:none;letter-spacing:0;color:var(--sp-craie);text-decoration:none;min-height:54px;box-sizing:border-box}
.veh-switch-cards a strong{font:500 13px var(--sans, sans-serif)}
.veh-switch-cards a span{font-size:10px;color:#97A2AA;line-height:1.5}
.veh-switch-menu .veh-switch-cards a:hover,.veh-switch-menu .veh-switch-cards a[aria-current="true"]{border-color:var(--sp-bronze-clair);background:var(--sp-encre);color:#e3c480}
.veh-switch-menu [hidden]{display:none!important}
.veh-switch-search:focus-visible,.veh-switch-close:focus-visible{outline:2px solid var(--sp-bronze-clair);outline-offset:3px}
.veh-switch-empty{color:#B3BCC3;font-size:14px}
@media(max-width:900px){.veh-switch-groups{grid-template-columns:1fr 1fr}.veh-switch-group h3{white-space:normal}}
@media(max-width:640px){.veh-switch-menu{left:50%;right:auto;top:64px;max-width:none;max-height:calc(100dvh - 82px);padding:16px}.veh-switch-groups{grid-template-columns:1fr;gap:18px}.veh-switch-head>strong{font-size:18px}.veh-switch-cards a span{font-size:11px}.veh-switch-menu .veh-switch-cards a{min-height:60px}.veh-switch-search{font-size:16px}}
@media(max-width:640px){.cat-types{gap:6px;padding:16px 0 20px}.cat-types button{padding:11px 12px;font-size:13px}}

/* Fiches véhicules : une identité commune, deux parcours indépendants. */
body:has(.hero) .hero.hero-vehicule{min-height:390px;position:relative;overflow:hidden}
body:has(.hero) .hero-vehicule .hero-copy{width:65%;padding:42px clamp(24px,5vw,76px);position:relative;z-index:1}
body:has(.hero) .hero-vehicule h1{font-size:clamp(34px,4vw,58px);line-height:1.07;margin:14px 0 18px;letter-spacing:-.045em}
body:has(.hero) .hero-vehicule h1 span{color:var(--sp-bronze-clair);font-size:.7em;letter-spacing:-.02em}
body:has(.hero) .hero-vehicule .hero-description{font-size:16px;margin:18px 0}
.hero-vehicule-meta{display:flex;flex-wrap:wrap;gap:8px 18px;color:#C9D0D5;font-size:14px}
.hero-vehicule-meta span+span{border-left:1px solid #515D66;padding-left:18px}
.hero-vehicule-actions{display:flex;align-items:center;gap:14px 24px;flex-wrap:wrap}
.hero-legende{position:absolute;right:24px;bottom:18px;color:#e2dbc9;font:12px var(--mono);z-index:1;background:#101211b8;padding:6px 10px}
.changer-vehicule{margin-top:24px;max-width:720px}
.changer-vehicule>summary{cursor:pointer;color:#c9b58f;font-size:14px;width:fit-content;padding-block:8px}
.changer-vehicule .vehicle-form{margin-top:16px}
body:has(.hero) .hero-vehicule .proofs{display:none}
.decouverte-vehicule{background:var(--sp-nuit);border-block:1px solid #343630}
.decouverte-vehicule>summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:18px clamp(24px,5vw,76px);font-size:14px;color:#B3BCC3;cursor:pointer}
.decouverte-vehicule>summary::-webkit-details-marker{display:none}
.decouverte-vehicule>summary span{font-size:22px;color:var(--sp-bronze-clair)}
.decouverte-vehicule[open]>summary span{transform:rotate(45deg)}
body:has(.hero) .decouverte-vehicule .zone-nav{margin-top:12px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
body:has(.hero) .decouverte-vehicule .zone-nav button{min-width:0;min-height:100px}
.catalogue.catalogue-vehicule{padding:38px clamp(24px,5vw,76px) 64px;max-width:1440px;margin:auto;scroll-margin-top:20px}
.catalogue-vehicule .vehicule-entete{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:28px;max-width:none}
.catalogue-vehicule .vehicule-entete .eyebrow{font:12px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:#b4a282;margin:0 0 10px}
.catalogue-vehicule .vehicule-entete h2{font:600 clamp(24px,2.7vw,34px)/1.15 var(--display);letter-spacing:-.03em;margin:0}
.vehicule-moteur{font:14px var(--mono);color:#ddc395;white-space:nowrap}
.vehicule-moteur span{color:#a5a79e;font-size:12px}
.vehicule-onglets{display:flex;flex-wrap:wrap;gap:0 28px;border-bottom:1px solid #3d413a;margin-bottom:32px}
.vehicule-vues{display:flex;gap:28px;min-width:0}
.vehicule-onglets a{display:flex;align-items:center;gap:10px;padding:17px 0;color:#b2b6ac;text-decoration:none;font-size:16px;font-weight:500;border-bottom:3px solid transparent;margin-bottom:-1px}
.vehicule-onglets a:hover{color:#ecd4a5}
.vehicule-onglets a span{font:12px var(--mono);border:1px solid #404638;border-radius:30px;padding:3px 8px;color:#b5bbab}
.vehicule-onglets a[aria-selected="true"]{color:#ecd4a5;border-color:var(--sp-bronze-clair)}
.vehicule-onglets a[aria-selected="true"] span{background:var(--sp-bronze-clair);color:var(--sp-nuit);border-color:var(--sp-bronze-clair)}
.vehicule-onglets a:focus-visible,.point-vehicule summary:focus-visible,.changer-vehicule>summary:focus-visible,.decouverte-vehicule>summary:focus-visible{outline:2px solid var(--sp-bronze-clair);outline-offset:5px}
.vehicule-panel[hidden]{display:none!important}
.vehicule-panel{scroll-margin-top:100px}
.catalogue-vehicule .outils-catalogue{margin-bottom:32px;padding:18px;background:var(--sp-nuit);border-color:#323c33}
.catalogue-vehicule .cat-zones{margin-bottom:0}
.catalogue-vehicule .cat-zones button{font-size:14px;padding-block:14px}
.catalogue-vehicule .cat-types{padding-block:18px;margin-bottom:0}
.catalogue-vehicule .cat-selects select{font-family:var(--corps);font-size:14px}
.catalogue-vehicule .cat-chips button{font-size:12px;letter-spacing:.02em;text-transform:none}
.fiche-defauts{display:grid;grid-template-columns:minmax(220px,.8fr) minmax(0,1.6fr);gap:clamp(24px,5vw,64px);align-items:start;margin:0;padding:12px 0 20px}
.fiche-defauts .eyebrow{font:12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--sp-bronze-clair);margin:0 0 16px}
.fiche-defauts h2{font:600 clamp(26px,3vw,38px)/1.12 var(--display);letter-spacing:-.035em;margin:0 0 18px;color:#ebe3d1}
.fiche-defauts p{font-size:16px;line-height:1.65;color:var(--sp-gris-sur-nuit);margin:0}
.fiche-defauts p.fiche-defauts-note{font-size:14px;color:#959f93;border-top:1px solid #303a32;padding-top:20px;margin-top:28px}
.points-vehicule{min-width:0;border-top:1px solid #44484A}
.point-vehicule{border-bottom:1px solid #37393B}
.point-vehicule summary{display:grid;grid-template-columns:30px 1fr auto 18px;gap:14px;align-items:center;list-style:none;cursor:pointer;padding:23px 12px}
.point-vehicule summary::-webkit-details-marker{display:none}
.point-numero{font:13px var(--mono);color:#70828F}
.point-titre{font-size:17px;font-weight:500;color:#DCE0E3;line-height:1.4}
.point-nature{font-size:12px;padding:5px 9px;white-space:nowrap;border:1px solid #465342;border-radius:4px;color:#BCC0C3}
.point-nature.nature-f{border-color:#675637;color:#ddbc7f}
.point-nature.nature-c{border-color:#425967;color:#b0c6d2}
.point-plus{width:12px;height:12px;position:relative;justify-self:end}
.point-plus::before,.point-plus::after{content:"";position:absolute;background:#baa77b;left:0;top:5px;width:12px;height:1px}
.point-plus::after{transform:rotate(90deg)}
.point-vehicule[open] .point-plus::after{transform:rotate(0)}
.point-vehicule[open]{background:linear-gradient(100deg,#c9a3690c,transparent)}
.point-vehicule[open] .point-titre{color:#edd2a0}
.point-contenu{padding:0 48px 25px 56px;max-width:78ch}
.point-contenu p{font-size:16px}
.point-pieces{margin-top:22px}
.point-contenu .point-pieces-label{font-size:14px;color:#d5c09a;margin-bottom:10px}
.point-pieces ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.point-piece{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px;border:1px solid #44484A;border-radius:6px;background:#ffffff04;text-decoration:none;color:#DCE0E3;transition:background .15s,border-color .15s}
.point-piece:hover{background:#c9a36910;border-color:var(--sp-bronze-clair)}
.point-piece:focus-visible{outline:2px solid var(--sp-bronze-clair);outline-offset:3px}
.point-piece-info{display:grid;gap:5px;min-width:0}
.point-piece-marque{font-size:12px;color:var(--sp-bronze-clair);overflow-wrap:anywhere}
.point-piece-nom{font-size:15px;line-height:1.5;overflow-wrap:anywhere}
.point-piece-action{flex-shrink:0;display:grid;gap:7px;text-align:right;font-size:14px}
.point-piece-action strong{font-weight:500;color:#edd2a0;white-space:nowrap}
.point-piece-action>span{color:#bfc6b9}
.point-contenu .point-pieces-note,.point-contenu .point-sans-piece{font-size:14px;line-height:1.55;color:#a7afa0;margin-top:14px}
.point-contenu .point-sans-piece{padding-left:12px;border-left:2px solid #44484A}
@media(max-width:640px){
  .point-piece{flex-direction:column;align-items:stretch;gap:12px;padding:14px}
  .point-piece-action{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;text-align:left}
}
body:has(.bandeau-cookies[data-visible="1"]) .conseil-ia-ouvrir{bottom:88px}
.bandeau-cookies{max-height:none}
@media(max-width:900px){
  body:has(.hero) .hero-vehicule .hero-copy{width:80%}
  .fiche-defauts{grid-template-columns:1fr;gap:28px}
  .fiche-defauts>div:first-child{max-width:65ch}
  .fiche-defauts p.fiche-defauts-note{margin-top:14px;padding-top:14px}
  .catalogue-vehicule .vehicule-entete{align-items:flex-start}
  .vehicule-moteur span{display:block;margin-top:8px}
  body:has(.hero) .decouverte-vehicule .zone-nav{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:640px){
  body:has(.hero) .hero.hero-vehicule{min-height:350px}
  body:has(.hero) .hero-vehicule .hero-copy{width:100%;padding:32px 22px 44px}
  body:has(.hero) .hero-vehicule .hero-shade{background:linear-gradient(90deg,#101211f5,#101211b0)}
  body:has(.hero) .hero-vehicule h1{font-size:38px}
  .hero-vehicule-meta{font-size:13px;gap:8px 10px}
  .hero-vehicule-meta span+span{padding-left:10px}
  .hero-vehicule-actions{gap:8px 16px}
  .hero-legende{font-size:12px;bottom:8px;right:12px}
  .catalogue.catalogue-vehicule{padding:26px 20px 50px}
  .catalogue-vehicule .vehicule-entete{display:block;margin-bottom:16px}
  .vehicule-moteur{display:block;margin-top:12px}
  .vehicule-moteur span{display:inline;font-size:12px}
  .vehicule-onglets{column-gap:18px;margin-bottom:24px}
  .vehicule-vues{gap:18px;flex:1 1 100%}
  .vehicule-onglets a{font-size:14px;gap:7px;line-height:1.4;flex:1}
  .vehicule-onglets a span{font-size:12px;padding:2px 6px}
  .point-vehicule summary{grid-template-columns:22px 1fr 14px;gap:8px 12px;padding:18px 8px}
  .point-titre{font-size:16px}
  .point-nature{grid-column:2;justify-self:start}
  .point-plus{grid-column:3;grid-row:1}
  .point-contenu{padding:0 16px 22px 42px}
  .catalogue-vehicule .cat-selects{width:100%}
  .catalogue-vehicule .cat-selects select{flex:1;min-width:120px;max-width:100%}
  .dossier-barre[data-vide="true"]{display:none}
  body:has(.hero) .barre .btn-panier{display:block;padding:8px;font-size:12px;min-height:36px}
  body:has(.hero) .barre .veh-switch{flex-basis:116px}
  .dossier-barre{padding:8px 68px calc(8px + env(safe-area-inset-bottom)) 16px}
  .dossier-tete,.dossier-bilan{display:none}
  .dossier-pied{margin:0}
  .dossier-total span{font-size:10px}
  .dossier-voir{font-size:12px;letter-spacing:0;text-transform:none}
  .conseil-ia-ouvrir{right:12px;bottom:12px;width:44px;height:44px;min-width:0;padding:0;justify-content:center;border-radius:50%}
  .conseil-ia-ouvrir span:last-child{display:none}
  .conseil-ia-ouvrir span:first-child{font-size:21px}
  .bandeau-cookies,.bandeau-cookies[data-dossier-actif="1"]{bottom:0;max-height:none;padding:14px 16px;gap:10px}
  .bandeau-cookies p{font-size:13px}
  .bandeau-cookies button{min-height:38px}
  body:has(.bandeau-cookies[data-visible="1"]) .conseil-ia-ouvrir{bottom:152px}
  body:has(.bandeau-cookies[data-visible="1"]) .dossier-barre{display:none}
}
.t-compat{color:var(--gris,#6b6f66)}
.page-texte .btn-ligne{background:none;border:1px solid currentColor;color:inherit;padding:8px 14px;
  border-radius:8px;font:inherit;cursor:pointer}
.page-texte .btn-ligne:hover{background:rgba(127,127,127,.12)}