/* SwissPartz — refonte v2 « Atelier Nuit » : composants communs.
   Chargée en dernier dans <head> sur toutes les pages (appliquer-comptoir.py,
   fondations()). Valeurs reprises des maquettes design/refonte-v2/maquettes.
   Les sélecteurs « :root body … » l'emportent sur les feuilles historiques
   (style.css, styles.css, pages.css, legacy-light.css) sans !important. */

.sp-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sp-mono{font-family:var(--sp-police-mono)}

/* ---------- 1. Barre utilitaire ---------- */
:root body .servicebar.sp-util{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;margin:0;
  padding:8px max(var(--sp-marge),calc((100% - var(--sp-largeur-max))/2 + var(--sp-marge)));
  background:var(--sp-nuit);color:#C9D0D5;border:0;font:12px/1.5 var(--sp-police-mono);letter-spacing:.02em;text-transform:none}
:root body .servicebar.sp-util span{display:inline;margin:0;color:inherit}
:root body .servicebar.sp-util .sp-util-g+.sp-util-d{margin-left:auto}

/* ---------- 2. En-tête ---------- */
:root body header.sp-entete,:root body .barre{position:sticky;top:0;z-index:30;box-sizing:border-box;height:auto;max-width:none;margin:0;
  background:var(--sp-papier);color:var(--sp-encre);border:0;border-bottom:1px solid var(--sp-ligne);box-shadow:none;
  font:15px/1.5 var(--sp-police-texte);letter-spacing:0;text-transform:none}
:root body header.sp-entete{display:block;padding:0}
.sp-entete-ligne{box-sizing:border-box;max-width:var(--sp-largeur-max);margin:0 auto;padding:16px var(--sp-marge) 16px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px}
.sp-entete-actions{display:flex;align-items:center;gap:8px}
/* Fiches et pages texte : même rendu, éléments à plat dans .barre. */
:root body .barre{display:flex;flex-wrap:wrap;align-items:center;gap:16px 8px;
  padding:16px max(var(--sp-marge),calc((100% - var(--sp-largeur-max))/2 + var(--sp-marge))) 0}
:root body .barre .marque{order:1;margin-right:24px;min-height:0}
:root body .barre .sp-recherche{order:2;margin-right:24px}
:root body .barre .veh-switch{order:3}
:root body .barre .sp-compte{order:4}
:root body .barre .sp-recherche-ouvrir{order:5}
:root body .barre .btn-panier{order:6}
:root body .barre .nav-sp{order:10;flex:1 0 100%}

/* Logo SWISSPARTZ+ : Archivo 800, le « + » en bronze. */
:root body a.logo-sp,:root body .barre a.logo-sp{display:inline-flex;align-items:baseline;gap:2px;font:800 26px/1 var(--sp-police-titre);letter-spacing:-.01em;color:var(--sp-encre);text-decoration:none;text-transform:none;white-space:nowrap}
:root body a.logo-sp span,:root body .barre a.logo-sp span{color:inherit;font-weight:800}
:root body a.logo-sp i,:root body .barre a.logo-sp i{margin:0;font:inherit;font-style:normal;color:var(--sp-bronze)}
:root body a.logo-sp:hover,:root body a.logo-sp:hover span{color:var(--sp-encre)}
:root body .sp-pied a.logo-sp{font-size:22px}
a.logo-sp:focus-visible{outline:2px solid var(--sp-foret);outline-offset:4px;border-radius:2px}

/* Recherche */
.sp-recherche{position:relative;flex:1 1 420px;display:flex;align-items:center;gap:8px;box-sizing:border-box;margin:0;padding:8px 8px 8px 16px;background:var(--sp-blanc);border:1px solid var(--sp-ligne);border-radius:var(--sp-rayon-bouton)}
.sp-recherche>svg{flex:none;color:var(--sp-gris)}
.sp-recherche input{flex:1;min-width:0;margin:0;padding:8px 0;border:0;outline:0;background:transparent;font:15px var(--sp-police-texte);color:var(--sp-encre);box-shadow:none}
.sp-recherche input::placeholder{color:var(--sp-gris);opacity:1}
.sp-recherche:focus-within{outline:2px solid var(--sp-foret);outline-offset:2px}
.sp-recherche button{flex:none;min-height:var(--sp-cible-tactile);padding:0 16px;border:0;border-radius:7px;background:var(--sp-foret);color:var(--sp-blanc);font:600 14px var(--sp-police-texte);cursor:pointer}
.sp-recherche button:hover{background:var(--sp-foret-fonce)}
.sp-recherche button:focus-visible{outline:2px solid var(--sp-encre);outline-offset:2px}

/* Bouton véhicule « Mon garage » (6) — en-tête Comptoir et menu .veh-switch */
.sp-garage{display:flex;align-items:center;gap:8px;min-height:var(--sp-cible-tactile);padding:0 16px;box-sizing:border-box;border:1px solid var(--sp-ligne);border-radius:var(--sp-rayon-bouton);background:transparent;color:var(--sp-encre);font:500 14px var(--sp-police-texte);text-align:left;cursor:pointer}
.sp-garage svg{flex:none}
.sp-garage-texte{display:contents}
.sp-garage-sur,.sp-garage-changer{display:none}
.sp-garage-modele{font:12px var(--sp-police-mono);background:var(--sp-craie);border-radius:6px;padding:4px 8px;white-space:nowrap}
.sp-garage-modele[hidden]{display:none}
.sp-garage:hover{border-color:var(--sp-encre)}
.sp-garage:focus-visible,.sp-icone:focus-visible{outline:2px solid var(--sp-foret);outline-offset:2px}
:root body .barre .veh-switch{display:block;position:relative;margin:0;flex:none;width:auto}
:root body .barre .veh-switch summary{display:flex;align-items:center;gap:8px;min-height:var(--sp-cible-tactile);padding:0 16px;box-sizing:border-box;border:1px solid var(--sp-ligne);border-radius:var(--sp-rayon-bouton);background:transparent;color:var(--sp-encre);font:500 14px var(--sp-police-texte);letter-spacing:0;text-transform:none;list-style:none;cursor:pointer}
:root body .barre .veh-switch summary::before{content:"";flex:none;width:22px;height:22px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 16v-3l2-5h14l2 5v3'/%3E%3Cpath d='M3 16h18'/%3E%3Ccircle cx='7' cy='17.5' r='1.5'/%3E%3Ccircle cx='17' cy='17.5' r='1.5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 16v-3l2-5h14l2 5v3'/%3E%3Cpath d='M3 16h18'/%3E%3Ccircle cx='7' cy='17.5' r='1.5'/%3E%3Ccircle cx='17' cy='17.5' r='1.5'/%3E%3C/svg%3E") center/contain no-repeat}
:root body .barre .veh-switch summary::after{content:none}
:root body .barre .veh-switch summary:hover,:root body .barre .veh-switch[open] summary{border-color:var(--sp-encre);color:var(--sp-encre)}
:root body .barre .veh-switch summary:focus-visible{outline:2px solid var(--sp-foret);outline-offset:2px}
:root body .barre .veh-switch-label{display:flex;flex-direction:row;align-items:center;gap:8px;line-height:1.2}
:root body .barre .veh-switch-prefix{font:500 14px var(--sp-police-texte);letter-spacing:0;color:inherit}
:root body .barre .veh-switch-sur{display:none}
:root body .barre .veh-switch-label b{font:12px var(--sp-police-mono);letter-spacing:0;color:var(--sp-encre);background:var(--sp-craie);border-radius:6px;padding:4px 8px;white-space:nowrap}
:root body .barre .veh-switch-change{display:none}

/* Icônes compte, recherche mobile, panier (badge bronze) */
.sp-icone,:root body .barre .btn-panier,:root body header.sp-entete .cart-button{position:relative;display:flex;align-items:center;justify-content:center;flex:none;width:var(--sp-cible-tactile);height:var(--sp-cible-tactile);margin:0;padding:0;border:0;border-radius:var(--sp-rayon-bouton);background:transparent;color:var(--sp-encre);font:13px var(--sp-police-texte);text-decoration:none;cursor:pointer;box-shadow:none}
:root body .barre .btn-panier:hover,:root body header.sp-entete .cart-button:hover,.sp-icone:hover{background:var(--sp-craie);color:var(--sp-encre)}
:root body .barre .btn-panier:focus-visible,:root body header.sp-entete .cart-button:focus-visible{outline:2px solid var(--sp-foret);outline-offset:2px}
.sp-recherche-ouvrir{display:none}
/* pages.css forçait display:block!important sur le panier des pages à barre. */
:root body .barre .btn-panier{display:flex!important}
:root body header.sp-entete .cart-button .count,:root body .barre .btn-panier #panier-n,:root body .barre .btn-panier[data-vide="1"] #panier-n,.sp-basnav-n{position:absolute;top:4px;right:3px;display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:18px;height:18px;margin:0;padding:0 4px;border-radius:var(--sp-rayon-pastille);background:var(--sp-bronze);color:var(--sp-blanc);font:600 11px/1 var(--sp-police-texte);letter-spacing:0}
:root body [data-sp-zero]{display:none!important}

/* Rubriques (ligne sous l'en-tête), « Carnet d'expertise » en bronze */
:root body nav.sp-rubriques{box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:center;gap:0 24px;height:auto;max-width:var(--sp-largeur-max);margin:0 auto;padding:0 var(--sp-marge) 8px;overflow:visible;font:500 14px/1.5 var(--sp-police-texte);letter-spacing:0;text-transform:none}
:root body .barre nav.sp-rubriques{max-width:none;margin:0;padding:0 0 8px}
:root body nav.sp-rubriques a{display:flex;align-items:center;box-sizing:border-box;min-height:var(--sp-cible-tactile);padding:8px 0;color:var(--sp-encre);text-decoration:none;white-space:nowrap}
:root body nav.sp-rubriques a:hover{color:var(--sp-foret)}
:root body nav.sp-rubriques a[aria-current="page"]{color:var(--sp-foret)}
:root body nav.sp-rubriques a.sp-carnet{color:var(--sp-bronze)}
:root body nav.sp-rubriques a:focus-visible{outline:2px solid var(--sp-foret);outline-offset:2px;border-radius:2px}
@media (pointer:coarse){:root body nav.sp-rubriques a{padding:16px 0}}

/* En-tête sur une ligne (retours aperçu du 13.10.2026) : le bloc garage,
   compte, panier ne passe jamais à la ligne, la recherche se rétrécit ; le
   garage affiche le libellé court, le moteur à partir de 1280 px ; les
   rubriques défilent horizontalement si la place manque. */
.sp-entete-ligne{flex-wrap:nowrap}
.sp-entete-actions{flex:none;flex-wrap:nowrap}
.sp-recherche,:root body .barre .sp-recherche{flex:1 1 0;min-width:180px}
:root body .barre{flex-wrap:wrap}
:root body .barre .marque,:root body .barre .veh-switch,:root body .barre .sp-compte,:root body .barre .btn-panier{flex:none}
.sp-garage,:root body .barre .veh-switch summary{white-space:nowrap}
.sp-garage-moteur{display:none}
@media (min-width:1280px){.sp-garage-moteur{display:inline}}
:root body nav.sp-rubriques{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
:root body nav.sp-rubriques::-webkit-scrollbar{display:none}
:root body nav.sp-rubriques a{flex:none}

/* Fil d'Ariane : pas de trait sous les liens (souligné au survol et au focus). */
:root body .fil a,:root body .sp-catalogue-fil a,:root body .page-texte .fil a{border:0;box-shadow:none;background:none;text-decoration:none}
:root body .fil a:hover,:root body .fil a:focus-visible,:root body .sp-catalogue-fil a:hover,:root body .sp-catalogue-fil a:focus-visible{text-decoration:underline;text-underline-offset:3px}

/* Photo absente ou qui ne charge pas : icône de la zone sur Craie. */
.sp-photo-absente{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;width:100%;height:100%;padding:8px;background:var(--sp-craie);color:var(--sp-gris);font:500 11px/1.2 var(--sp-police-mono);letter-spacing:.08em;text-transform:uppercase;text-align:center}
:root body .sp-photo-absente img,:root body .sp-carte .image-button .sp-photo-absente img{width:min(30%,72px);height:auto;max-height:50%;object-fit:contain;mix-blend-mode:normal;opacity:.75;padding:0;border:0;background:none}
:root body #cart .cart-item>.sp-photo-absente{width:72px;height:72px;flex:none;border-radius:10px;font-size:8px;gap:4px;padding:4px}
:root body .sp-fiche-photo .sp-photo-absente{font-size:12px}

/* Bouton rond flottant (conseil) : en bas à droite, au-dessus du bandeau
   cookies (--sp-cookies-h, v2.js) et de la navigation mobile. */
:root body #conseil-ia-ouvrir{position:fixed;left:auto;top:auto;right:16px;bottom:calc(16px + var(--sp-cookies-h,0px));z-index:35;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:52px;height:52px;min-width:0;padding:0;border:0;border-radius:var(--sp-rayon-pastille);background:var(--sp-foret);color:var(--sp-blanc);box-shadow:none;font-size:18px;letter-spacing:0;transform:none}
:root body #conseil-ia-ouvrir span:not([aria-hidden="true"]){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:root body #conseil-ia-ouvrir:hover{background:var(--sp-foret-fonce)}
:root body #conseil-ia-ouvrir:focus-visible{outline:2px solid var(--sp-encre);outline-offset:3px}
:root body:has(.conseil-ia-ouvrir) .sp-pied-bas{padding-right:80px}

/* ---------- 3. Badge de statut (toujours couleur + icône + texte) ---------- */
.sp-statut,:root body .tampon{display:inline-flex;align-items:center;gap:8px;box-sizing:border-box;max-width:100%;margin:0;padding:4px 8px 4px 8px;border:0;border-radius:var(--sp-rayon-pastille);box-shadow:none;transform:none;font:500 11px/1.3 var(--sp-police-mono);letter-spacing:.04em;text-transform:uppercase;white-space:normal;overflow-wrap:anywhere;opacity:1}
.sp-statut svg{flex:none}
.sp-statut--homologue,:root body .tampon.t-vert{background:var(--sp-homologue-fond);color:var(--sp-homologue-texte)}
.sp-statut--expertise,:root body .tampon.t-ocre{background:var(--sp-expertise-fond);color:var(--sp-expertise-texte)}
.sp-statut--circuit,:root body .tampon.t-oxyde{background:var(--sp-circuit-fond);color:var(--sp-circuit-texte)}
.sp-statut--neutre,:root body .tampon.t-compat{background:var(--sp-neutre-fond);color:var(--sp-neutre-texte)}
/* Badges historiques (.tampon) : l'icône est ajoutée par masque CSS. */
:root body .tampon::before{content:"";flex:none;width:14px;height:14px;background:currentColor;-webkit-mask:var(--sp-icone-statut) center/contain no-repeat;mask:var(--sp-icone-statut) center/contain no-repeat}
:root body .tampon::after{content:none}
:root body .tampon.t-vert{--sp-icone-statut:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
:root body .tampon.t-ocre{--sp-icone-statut:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l5 5v13H7z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E")}
:root body .tampon.t-oxyde{--sp-icone-statut:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4'/%3E%3Cpath d='M5 4h12l-2 4 2 4H5'/%3E%3C/svg%3E")}
:root body .tampon.t-compat{--sp-icone-statut:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E")}

/* ---------- 4. Carte produit (catalogue, app.js) ---------- */
:root body .products article.product.sp-carte{display:flex;flex-direction:column;overflow:hidden;padding:0;background:var(--sp-blanc);border:1px solid var(--sp-ligne);border-radius:var(--sp-rayon-carte);box-shadow:none;color:var(--sp-encre)}
/* Zone photo de hauteur fixe au ratio 4:3, image entière et centrée. */
:root body .sp-carte .product-image{position:relative;flex:none;margin:0;aspect-ratio:4/3;width:100%;height:auto;min-height:0;max-height:none;overflow:hidden;background:var(--sp-craie);border:0;border-radius:0}
:root body .sp-carte .image-button{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:zoom-in}
:root body .sp-carte .image-button>img{display:block;width:100%;height:100%;max-width:none;object-fit:contain;object-position:center;mix-blend-mode:multiply}
:root body .sp-carte .image-button:focus-visible{outline:2px solid var(--sp-foret);outline-offset:-4px}
:root body .sp-carte .product-body{display:flex;flex-direction:column;gap:8px;flex:1;padding:16px 16px 16px}
:root body .sp-carte .product-body>*{margin:0}
:root body .sp-carte .sp-carte-ref{font:11px/1.4 var(--sp-police-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--sp-gris)}
:root body .sp-carte h3{margin:0;font:600 16px/1.3 var(--sp-police-texte);letter-spacing:0}
:root body .sp-carte h3 a{color:var(--sp-encre);text-decoration:none}
:root body .sp-carte h3 a:hover{color:var(--sp-foret);text-decoration:underline}
:root body .sp-carte .sp-statut{align-self:flex-start}
:root body .sp-carte .card-fit,:root body .sp-carte .product-note{font-size:12px;color:var(--sp-gris)}
:root body .sp-carte .product-bottom{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:8px;border:0}
:root body .sp-carte .sp-carte-prix{display:flex;flex-direction:column;gap:2px;min-width:0}
:root body .sp-carte .amount{font:700 20px/1.2 var(--sp-police-titre);color:var(--sp-encre);letter-spacing:0}
:root body .sp-carte .amount small{font:inherit}
:root body .sp-carte .amount .price-tax{display:block;font:400 11px var(--sp-police-texte);color:var(--sp-gris)}
:root body .sp-carte .stock,:root body .sp-carte .product-shipping{margin:0;padding:0;border:0;background:none;font:12px/1.4 var(--sp-police-texte);color:var(--sp-gris)}
:root body .sp-carte .stock::before{content:none}
:root body .sp-carte button.add.sp-ajouter{display:flex;align-items:center;justify-content:center;flex:none;width:var(--sp-cible-tactile);height:var(--sp-cible-tactile);margin:0;padding:0;border:0;border-radius:var(--sp-rayon-bouton);background:var(--sp-foret);color:var(--sp-blanc);cursor:pointer}
:root body .sp-carte button.add.sp-ajouter:hover{background:var(--sp-foret-fonce)}
:root body .sp-carte button.add.sp-ajouter:focus-visible{outline:2px solid var(--sp-encre);outline-offset:2px}

/* ---------- 5. Passeport homologation ---------- */
.sp-passeport{overflow:hidden;background:var(--sp-blanc);border:1px solid var(--sp-ligne);border-radius:16px;color:var(--sp-encre);font:15px/1.45 var(--sp-police-texte)}
.sp-passeport-tete{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:16px 16px;background:var(--sp-nuit)}
.sp-passeport-tete>span:first-child{font:12px var(--sp-police-mono);letter-spacing:.14em;color:var(--sp-bronze-clair)}
.sp-passeport-tete .sp-statut{padding:4px 16px 4px 8px}
.sp-passeport dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:16px 24px;margin:0;padding:16px 16px;border-bottom:1px dashed var(--sp-ligne)}
.sp-passeport dl div{display:flex;flex-direction:column;gap:2px}
.sp-passeport dt{font:11px var(--sp-police-mono);letter-spacing:.1em;color:var(--sp-gris)}
.sp-passeport dd{margin:0;font-weight:600}
.sp-passeport dd.sp-mono{font-weight:400}
.sp-passeport-liens{display:flex;flex-wrap:wrap;gap:0 24px;padding:4px 16px}
.sp-passeport-liens a{display:flex;align-items:center;min-height:var(--sp-cible-tactile);font-size:14px;font-weight:600;color:var(--sp-foret)}
.sp-passeport-liens a:hover{color:var(--sp-foret-fonce)}

/* ---------- 6. Pastilles de statut (filtre du catalogue) ---------- */
.sp-pastilles{display:flex;flex-wrap:wrap;gap:8px}
.sp-pastille{display:inline-flex;align-items:center;gap:8px;min-height:var(--sp-cible-tactile);padding:0 16px;border-radius:var(--sp-rayon-pastille);border:1px solid var(--sp-ligne);background:var(--sp-blanc);color:var(--sp-encre);font:600 14px var(--sp-police-texte);cursor:pointer}
.sp-pastille span{font:500 12px var(--sp-police-mono);opacity:.8}
.sp-pastille:focus-visible{outline:2px solid var(--sp-foret);outline-offset:2px}
.sp-pastille[aria-pressed="true"]{background:var(--sp-encre);border-color:var(--sp-encre);color:var(--sp-blanc)}
.sp-pastille--homologue[aria-pressed="true"]{background:var(--sp-homologue-fond);border-color:var(--sp-homologue-texte);color:var(--sp-homologue-texte)}
.sp-pastille--expertise[aria-pressed="true"]{background:var(--sp-expertise-fond);border-color:var(--sp-expertise-texte);color:var(--sp-expertise-texte)}
.sp-pastille--circuit[aria-pressed="true"]{background:var(--sp-circuit-fond);border-color:var(--sp-circuit-texte);color:var(--sp-circuit-texte)}
.sp-pastille--neutre[aria-pressed="true"]{background:var(--sp-neutre-fond);border-color:var(--sp-neutre-texte);color:var(--sp-neutre-texte)}

/* ---------- 7. Navigation basse mobile ---------- */
:root body nav.sp-basnav{display:none}

/* ---------- 8. Pied de page ---------- */
:root body footer.sp-pied{display:block;height:auto;max-width:none;margin:0;padding:0;border:0;border-top:1px solid var(--sp-ligne);background:var(--sp-papier);color:var(--sp-encre);font:14px/1.5 var(--sp-police-texte);text-align:left;letter-spacing:0;text-transform:none}
.sp-pied-grille{box-sizing:border-box;max-width:var(--sp-largeur-max);margin:0 auto;padding:48px var(--sp-marge) 32px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:32px}
.sp-pied-marque{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
:root body .sp-pied p{margin:0;font-size:14px;line-height:1.5;color:var(--sp-gris);max-width:22em}
.sp-pied-col{display:flex;flex-direction:column;gap:8px;font-size:14px}
.sp-pied-titre{font:11px var(--sp-police-mono);letter-spacing:.1em;color:var(--sp-gris)}
:root body .sp-pied a{color:var(--sp-encre);text-decoration:none;border:0}
:root body .sp-pied a:hover{color:var(--sp-foret);text-decoration:underline}
:root body .sp-pied a:focus-visible{outline:2px solid var(--sp-foret);outline-offset:2px;border-radius:2px}
:root body .sp-pied p a{color:var(--sp-foret)}
.sp-pied-bmw{box-sizing:border-box;max-width:var(--sp-largeur-max);margin:0 auto;padding:0 var(--sp-marge) 32px}
.sp-pied-bmw ul{display:flex;flex-wrap:wrap;gap:4px 16px;margin:8px 0 0;padding:0;list-style:none;font-size:13px}
.sp-pied-bas{box-sizing:border-box;max-width:var(--sp-largeur-max);margin:0 auto;padding:16px var(--sp-marge) 32px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;border-top:1px solid var(--sp-ligne);font:12px var(--sp-police-mono);color:var(--sp-gris)}
:root body .sp-pied .paiements{display:inline;margin:0;padding:0;border:0;letter-spacing:0}
:root body .sp-pied .sp-pied-credits{box-sizing:border-box;max-width:var(--sp-largeur-max);margin:0 auto;padding:0 var(--sp-marge) 32px;font-size:12px}
@media (pointer:coarse){.sp-pied-col{gap:0}.sp-pied-col a,.sp-pied-bmw a{display:flex;align-items:center;min-height:var(--sp-cible-tactile)}}

/* ---------- Ordinateur moyen ---------- */
@media (max-width:1100px){
  :root body nav.sp-rubriques{gap:0 16px}
}

/* ---------- Mobile (maquettes 390 px) ---------- */
@media (max-width:700px){
  :root body .servicebar.sp-util{display:none}
  .sp-entete-ligne{flex-wrap:wrap}
  :root body header.sp-entete,:root body .barre{position:relative}
  .sp-entete-ligne{height:auto;padding:0 8px 0 var(--sp-marge-mobile);gap:0}
  :root body .barre{padding:0 8px 0 var(--sp-marge-mobile);gap:0}
  :root body a.logo-sp,:root body .barre a.logo-sp{font-size:20px}
  :root body .barre .marque,.sp-entete-ligne>a.logo-sp{display:flex;align-items:center;min-height:56px;margin-right:auto}
  .sp-entete-ligne>a.logo-sp{order:1}
  :root body .sp-entete-ligne>a.logo-sp,:root body .barre .marque a.logo-sp{align-items:center;align-self:center}
  .sp-entete-actions{display:contents}
  .sp-recherche-ouvrir{display:flex;order:5;gap:2px}
  .sp-compte{display:none!important}
  :root body header.sp-entete .cart-button,:root body .barre .btn-panier{order:6}
  :root body header.sp-entete .cart-button .count,:root body .barre .btn-panier #panier-n{top:5px;right:4px;min-width:17px;height:17px;font-size:10px}
  /* Recherche repliée derrière la loupe, dépliée sous l'en-tête. */
  .sp-recherche,:root body .barre .sp-recherche{display:none;order:9;flex:1 0 100%;margin:0 8px 16px 0}
  .sp-recherche-active .sp-recherche,:root body .barre.sp-recherche-active .sp-recherche{display:flex}
  /* Bouton véhicule : bandeau Craie pleine largeur sous l'en-tête. */
  .sp-garage,:root body .barre .veh-switch{order:10;flex:1 0 calc(100% + 8px + var(--sp-marge-mobile));margin:0 -8px 0 calc(-1 * var(--sp-marge-mobile))}
  .sp-garage{height:52px;padding:0 var(--sp-marge-mobile);gap:16px;border:0;border-top:1px solid var(--sp-ligne);border-radius:0;background:var(--sp-craie)}
  .sp-garage-titre{display:none}
  .sp-garage-texte{display:flex;flex-direction:column;line-height:1.2}
  .sp-garage-sur{display:block;font:10px var(--sp-police-mono);letter-spacing:.08em;color:var(--sp-gris)}
  .sp-garage-modele{padding:0;background:none;font:600 15px var(--sp-police-texte)}
  .sp-garage-changer{display:block;margin-left:auto;font-size:13px;font-weight:600;color:var(--sp-bronze)}
  :root body .barre .veh-switch summary{height:52px;padding:0 var(--sp-marge-mobile);gap:16px;border:0;border-top:1px solid var(--sp-ligne);border-radius:0;background:var(--sp-craie)}
  :root body .barre .veh-switch-label{flex-direction:column;align-items:flex-start;gap:0}
  :root body .barre .veh-switch-prefix{display:none}
  :root body .barre .veh-switch-sur{display:block;font:10px var(--sp-police-mono);letter-spacing:.08em;color:var(--sp-gris)}
  :root body .barre .veh-switch-label b{padding:0;background:none;font:600 15px var(--sp-police-texte)}
  :root body .barre .veh-switch-change{display:block;margin-left:auto;font:600 13px var(--sp-police-texte);letter-spacing:0;text-transform:none;color:var(--sp-bronze)}
  :root body nav.sp-rubriques,:root body .barre nav.sp-rubriques{display:none}

  /* Valeurs des composants mobiles, sans couper le quatrième statut. */
  :root body .products article.product.sp-carte{border-radius:12px}
  :root body .sp-carte .product-body{padding:8px 8px 16px;gap:8px}
  :root body .sp-carte .sp-carte-ref{font-size:10px;letter-spacing:.08em;overflow-wrap:anywhere}
  :root body .sp-carte h3{font-size:14px;line-height:1.25}
  :root body .sp-carte .amount{font-size:16px}
  :root body .sp-carte .sp-statut{font-size:10px;padding:2px 8px}
  .sp-passeport-tete{padding:16px 16px;gap:8px}
  .sp-passeport-tete>span:first-child{font-size:11px;letter-spacing:.12em}
  .sp-passeport-tete .sp-statut{font-size:10px;padding:4px 8px 4px 8px}
  .sp-passeport dl{grid-template-columns:104px minmax(0,1fr);gap:8px 16px;padding:16px 16px;font-size:13px}
  .sp-passeport dl div{display:contents}
  .sp-passeport dt{padding-top:1px}
  .sp-passeport dd{overflow-wrap:anywhere}
  .sp-passeport-liens{padding:0 16px}
  .sp-passeport-liens a{font-size:13px}

  :root body nav.sp-basnav{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;box-sizing:border-box;height:calc(68px + env(safe-area-inset-bottom));margin:0;padding:0 8px calc(8px + env(safe-area-inset-bottom));background:var(--sp-papier);border:0;border-top:1px solid var(--sp-ligne);box-shadow:none;transform:none}
  :root body nav.sp-basnav>a,:root body nav.sp-basnav>button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:52px;margin:0;padding:0;border:0;background:none;color:var(--sp-gris);font:500 11px/1.2 var(--sp-police-texte);letter-spacing:0;text-transform:none;text-decoration:none;cursor:pointer}
  :root body nav.sp-basnav>[aria-current="page"]{color:var(--sp-foret);font-weight:600}
  :root body nav.sp-basnav>a:focus-visible,:root body nav.sp-basnav>button:focus-visible{outline:2px solid var(--sp-foret);outline-offset:-2px;border-radius:10px}
  :root body nav.sp-basnav span{display:block;margin:0;font:inherit}
  :root body nav.sp-basnav .sp-basnav-n{top:2px;right:calc(50% - 22px);min-width:17px;height:17px;font-size:10px}
  body:has(nav.sp-basnav){padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  body:has(nav.sp-basnav) .bandeau-cookies,body:has(nav.sp-basnav) .dossier-barre{bottom:calc(68px + env(safe-area-inset-bottom))}
  :root body #conseil-ia-ouvrir{bottom:calc(80px + env(safe-area-inset-bottom) + var(--sp-cookies-h,0px))}
  /* Fiches : seule la barre « Projet / Ajouter au panier » reste en bas. */
  :root body:has(.sp-fiche) nav.sp-basnav{display:none}
  :root body:has(.sp-fiche){padding-bottom:calc(80px + env(safe-area-inset-bottom))}
  :root body:has(.sp-fiche) .bandeau-cookies{bottom:calc(77px + env(safe-area-inset-bottom))}
  :root body:has(.sp-fiche) #conseil-ia-ouvrir{bottom:calc(89px + env(safe-area-inset-bottom) + var(--sp-cookies-h,0px))}

  .sp-pied-grille{padding:32px var(--sp-marge-mobile) 24px;gap:32px}
  .sp-pied-bmw,.sp-pied-bas,:root body .sp-pied .sp-pied-credits{padding-left:var(--sp-marge-mobile);padding-right:var(--sp-marge-mobile)}
  :root body:has(.conseil-ia-ouvrir) .sp-pied-bmw{padding-right:80px}
}
@media (prefers-reduced-motion:reduce){.sp-garage,.sp-icone,.sp-pastille{transition:none}}
/* Cibles tactiles de 44 px pour les commandes historiques des pages
   (garage, liens de section, projet, conseil) sur écran tactile ou étroit. */
/* Cibles de 44 px à toutes les largeurs (demande du 15.10.2026). */
@media all{
  :root body main a.home-text-link,:root body main .help-strip button,:root body main .editorial button,:root body #garage-forget,
  :root body .home-garage-actions a,:root body .sp-legende-statuts a,:root body .vehicle-box button,:root body .advice button,
  :root body .sp-section-heading a,:root body .catalogue-views>*,:root body .reset,:root body .fil a,:root body .sp-catalogue-fil a{min-height:var(--sp-cible-tactile);display:inline-flex;align-items:center;box-sizing:border-box}
  :root body .project-heart{min-width:var(--sp-cible-tactile);min-height:var(--sp-cible-tactile)}
  :root body #open-filters,:root body #sort,:root body .gamme-switch button,:root body .category-mobile button,:root body #more,:root body #conseil-ia-ouvrir{min-height:var(--sp-cible-tactile);min-width:var(--sp-cible-tactile)}
  /* Titre de carte : zone de clic de 44 px sans décaler la carte. */
  :root body .sp-carte h3 a{display:block;padding:16px 0;margin:-16px 0}
  :root body a.logo-sp,:root body .homolog-lien,:root body .achat-conditions>a,:root body a.voir3d{min-height:var(--sp-cible-tactile);display:inline-flex;align-items:center}
  :root body .veh-switch-close{min-width:var(--sp-cible-tactile);min-height:var(--sp-cible-tactile)}
}

/* La recherche peut rétrécir avant le point de rupture mobile. */
@media (min-width:701px) and (max-width:1100px){
  .sp-entete-ligne{column-gap:16px}
  .sp-recherche,:root body .barre .sp-recherche{min-width:0}
  .sp-recherche input{min-width:0;width:100%}
  .sp-garage{max-width:220px;min-width:0}
  .sp-garage-modele{overflow:hidden;text-overflow:ellipsis}
}