/* Habillage Comptoir Clair pour les fiches produit (page_produit()) et les
   pages homologation (page_homologation()) — décision Miguel, 17.09.2026 :
   mêmes couleurs/typographie que le catalogue, sans toucher au HTML ni au
   JS existants (panier, JSON-LD, vérification DTC), ni à la mise en page
   grille de .fiche/.fiche-homolog (grid-column/grid-row définis dans
   /styles.css, volontairement non touchés ici). Sélecteurs préfixés
   .fiche / .fiche-homolog / .barre pour égaler la spécificité des règles
   d'origine (`.fiche .xxx`) — un simple `.xxx{}` perdrait la cascade face
   à elles. Portée étendue le 17.09.2026 à CGV/livraison-retours/mon-compte
   (mêmes classes .barre/.pied-page, aucun sélecteur supplémentaire requis).
   /styles.css reste inchangé pour les pages qui ne chargent pas ce
   fichier. */

:root{
  --trait:var(--sp-encre);--trait-rgb:var(--sp-encre-rgb);--gris:var(--sp-gris);--jaune:var(--sp-bronze);--nuit:var(--sp-papier);--vert:var(--sp-foret);
  --mono:var(--sp-police-texte);--display:var(--sp-police-titre);
}

body{background:var(--sp-papier);color:var(--sp-encre);font-family:var(--sp-police-texte)}

/* Même rythme et même bouton d’achat que le catalogue. */
.fiche{max-width:1180px;column-gap:64px;grid-template-columns:minmax(280px,440px) minmax(0,1fr)}
.fiche img.vignette-piece{max-width:440px;height:400px;padding:30px;border:1px solid var(--sp-ligne);border-radius:10px;background:var(--sp-blanc)}
.fiche .achat{gap:16px;padding:24px;border-radius:10px}
.fiche .achat .ajouter{width:100%;margin-left:0;background:var(--sp-foret-fonce)!important;border-color:var(--sp-foret-fonce)!important;border-radius:5px;min-height:48px;font-size:15px}
.fiche .achat .ajouter:hover{background:var(--sp-foret)!important}
.fiche .achat-conditions{flex-basis:100%;padding:16px;background:var(--sp-papier);border-radius:6px;font-size:13px;line-height:1.6}
.fiche .achat-conditions strong{font:600 13px var(--sp-police-texte)}
.fiche .achat-conditions p{margin:6px 0;color:var(--sp-gris)}
.fiche .achat-conditions a{color:var(--sp-bronze);text-underline-offset:3px}
.fiche .prix-regime{display:block;font-size:12px;color:var(--sp-bronze);margin-top:5px}
.fiche .compat{font-size:12px;line-height:1.6}
.fiche .compat::before{content:'i';background:var(--sp-craie);color:var(--sp-bronze)}
.fiche .contenu-fiche{max-width:none;border-top:1px solid var(--sp-ligne);padding-top:32px;line-height:1.7}
.fiche .contenu-fiche section{max-width:82ch}
@media(max-width:760px){.fiche{display:block;padding:28px 20px 48px}.fiche img.vignette-piece{max-width:100%;height:240px;box-sizing:border-box}.fiche .fil{line-height:1.8;overflow-wrap:anywhere}.fiche .achat{padding:18px}.fiche h1{margin:16px 0}.fiche .marque-p{display:block}.fiche .titre-brut{overflow-wrap:anywhere}.fiche .voir3d{display:block;margin-top:20px}.barre .btn-panier{display:inline-flex!important;align-items:center;gap:5px}.barre .lien-compte{margin-left:0}.barre{gap:12px}.barre>a[href="/dtc-homologation/"]{display:none}}

/* En-tête : même fond clair que Comptoir Clair, au lieu du bandeau sombre
   var(--sp-nuit) d'origine. */
.barre{background:var(--sp-blanc);color:var(--sp-encre);border-bottom:1px solid var(--sp-ligne);box-shadow:none}
.barre .marque,.barre .marque a{
  font-family:var(--sp-police-titre);font-weight:700;
  letter-spacing:-1px;font-size:22px;color:var(--sp-encre);text-transform:none;
}
.barre > a,.barre .lien-compte{color:var(--sp-encre);text-transform:none;font-size:13px;letter-spacing:0}
.barre > a:hover,.barre .lien-compte:hover{color:var(--sp-bronze)}
.barre .btn-panier{
  border:1px solid var(--sp-ligne);background:transparent;color:var(--sp-encre);
  border-radius:4px;padding:8px 14px;text-transform:none;
}

/* Sélecteur "Ma BMW" dans l'en-tête : même traitement clair. */
.veh-switch summary{color:var(--sp-encre)}
.veh-switch-prefix,.veh-switch-change{text-transform:none;letter-spacing:0}
.veh-switch-menu{
  background:var(--sp-blanc)!important;border:1px solid var(--sp-ligne)!important;
  color:var(--sp-encre)!important;box-shadow:0 24px 70px rgba(var(--sp-encre-rgb),.14)!important;
}
.veh-switch-head{color:var(--sp-encre)!important}
.veh-switch-close{color:var(--sp-gris)!important}
.veh-switch-search{background:var(--sp-papier)!important;border:1px solid var(--sp-ligne)!important;color:var(--sp-encre)!important}
.veh-switch-group h3{color:var(--sp-bronze)}
.veh-switch-cards a{background:var(--sp-blanc);border:1px solid var(--sp-ligne);color:var(--sp-encre)}
.veh-switch-cards a:hover{border-color:var(--sp-bronze)}

/* Fil d'Ariane, titre, ligne marque/compat — mêmes sélecteurs que
   /styles.css (préfixés .fiche) pour gagner la cascade. */
.fiche .fil{color:var(--sp-gris);font-family:var(--sp-police-texte);text-transform:none;letter-spacing:0;font-size:12px}
.fiche .fil a{color:var(--sp-gris);border-color:var(--sp-ligne)}
.fiche .fil a:hover{color:var(--sp-bronze);border-color:var(--sp-bronze)}
.fiche h1{color:var(--sp-encre);font-family:var(--sp-police-titre);font-weight:500;letter-spacing:-1px}
.fiche .marque-p{
  font-family:var(--sp-police-texte);color:var(--sp-bronze);letter-spacing:.07em;
  text-transform:none;font-weight:600;
}
.fiche .titre-brut{color:var(--sp-gris);font-family:inherit;text-transform:none}
.fiche .compat{color:var(--sp-gris);text-transform:none;letter-spacing:0;background:var(--sp-papier);border-color:var(--sp-ligne)}
.fiche .compat::before{background:#E8EAEB;color:var(--sp-foret)}

/* Bloc d'achat : reprend le style carte + bouton or de Comptoir Clair. */
.fiche .achat{background:var(--sp-blanc);border:1px solid var(--sp-ligne);border-radius:6px}
.fiche .achat strong{color:var(--sp-encre);font-family:var(--sp-police-titre)}
.fiche .dispo{color:var(--sp-foret);text-transform:none;letter-spacing:0}
.fiche .tampon{border-radius:20px;letter-spacing:.03em;text-transform:none;transform:none!important}
.fiche .tampon.t-vert{background:#e7efe4;color:var(--sp-foret)}
.fiche .tampon.t-ocre{background:#f8f0e2;color:var(--sp-bronze)}
.fiche .tampon.t-oxyde{background:#f3e3da;color:#8a4a2b}
.fiche .homolog-lien{color:var(--sp-bronze);font-family:var(--sp-police-texte);text-transform:none;letter-spacing:0}
.fiche .homolog-lien:hover{color:var(--sp-bronze);border-color:var(--sp-bronze)}
.fiche .delai-livraison{color:var(--sp-gris);text-transform:none;letter-spacing:0}
.fiche .option-dtc{color:var(--sp-encre)}
.fiche .option-dtc strong{color:var(--sp-encre)}
.fiche .option-dtc a{color:var(--sp-bronze)}
.fiche .option-dtc a:hover{color:var(--sp-bronze)}
.fiche .ajouter{
  background:#9c7b49;color:var(--sp-blanc);border-radius:3px;font-family:var(--sp-police-texte);
  text-transform:none;letter-spacing:0;
}
.fiche .ajouter:hover{background:var(--sp-bronze);transform:none}
.fiche .ajouter.mis{background:var(--sp-foret);color:var(--sp-blanc)}
.fiche .reassurance-humaine{color:var(--sp-gris)}
.fiche .reassurance-humaine a{color:var(--sp-bronze)}
.fiche .voir3d{color:var(--sp-bronze);text-transform:none;font-size:13px;letter-spacing:0}

/* Description et caractéristiques : prose lisible, plus de police mono. */
.contenu-fiche,.description-produit,.specifications-produit{
  color:var(--sp-encre);font-family:var(--sp-police-texte);
}
.contenu-fiche h2{
  font-family:var(--sp-police-titre);font-weight:500;
  color:var(--sp-encre);letter-spacing:0;text-transform:none;
}
.contenu-fiche dt{color:var(--sp-gris);text-transform:none;letter-spacing:0}
.contenu-fiche dd{color:var(--sp-encre)}
.source-technique a{color:var(--sp-bronze)}
.avertissement{color:#8a4a2b;background:#f3e3da;border-radius:4px;padding:12px 16px}

/* Pied de page : même fond clair, plus de contraste inversé. */
.pied-page{background:var(--sp-papier);color:var(--sp-encre);border-top:1px solid var(--sp-ligne)}
.pied-page h5{color:var(--sp-bronze);text-transform:none;letter-spacing:0}
.pied-page a{color:var(--sp-gris)}
.pied-page a:hover{color:var(--sp-bronze)}

/* Page homologation (page_homologation(), .fiche-homolog). */
.fiche-homolog .fil{color:var(--sp-gris);font-family:var(--sp-police-texte);text-transform:none;letter-spacing:0;font-size:12px}
.fiche-homolog .fil a{color:var(--sp-gris);border-color:var(--sp-ligne)}
.fiche-homolog .fil a:hover{color:var(--sp-bronze);border-color:var(--sp-bronze)}
.fiche-homolog .marque-p{font-family:var(--sp-police-texte);color:var(--sp-bronze);letter-spacing:.07em;text-transform:none;font-weight:600}
.fiche-homolog h1{color:var(--sp-encre);font-family:var(--sp-police-titre);font-weight:500;letter-spacing:-1px}
.fiche-homolog .compat{color:var(--sp-gris);text-transform:none;letter-spacing:0;font-family:var(--sp-police-texte)}
.fiche-homolog .tableau{border-color:var(--sp-ligne)}
.fiche-homolog .lh{border-color:var(--sp-ligne)}
.fiche-homolog .lh .cle{color:var(--sp-gris);text-transform:none;letter-spacing:0;font-family:var(--sp-police-texte)}
.fiche-homolog .lh .val{color:var(--sp-encre)}
.fiche-homolog .homolog-pdf{color:var(--sp-bronze);text-transform:none;letter-spacing:0;font-family:var(--sp-police-texte)}
.fiche-homolog .voir-fiche{color:var(--sp-bronze);text-transform:none;letter-spacing:0;font-family:var(--sp-police-texte)}

.achat .product-shipping{width:100%;flex-basis:100%;font-size:13px;line-height:1.6;padding:10px 0;border-top:1px solid var(--sp-ligne)}.product-shipping span{display:block;font-weight:600}.product-shipping small{display:block;font-size:11px;color:var(--sp-gris)}
.shipping-tax{display:block;margin-top:3px;font-size:10px;line-height:1.5}.shipping-tax.is-due{color:#8a5a12}.shipping-tax.is-none{color:var(--sp-foret)}
.tampon.t-compat,.t-compat{background:var(--sp-craie);color:var(--sp-gris)}