/* Auber Pièces Auto, site v2, direction « Le Mur » (DESIGN.md, validée par Salim le 23/10/2026).
   Clonée d'Euro Car Parts (bande véhicule, disponibilité magasin sur chaque produit) et de la maquette .qa-tmp/da/le-mur/mur.css.
   Couleurs : blanc franc, noir #0B0B0B, jaune #FFD500 (jamais en texte sur fond clair). Aucune rayure jaune et noire.
   Mobile d'abord : requêtes min-width 768, 1060, 1440. */

/* ---------- Polices (Barlow et Barlow Semi Condensed, SIL OFL, auto-hébergées) ---------- */
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/barlow-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/barlow-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/barlow-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/barlow-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/barlow-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/barlow-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/barlow-semi-condensed-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/barlow-semi-condensed-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url(/assets/fonts/barlow-semi-condensed-latin-800-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url(/assets/fonts/barlow-semi-condensed-latin-ext-800-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Jetons (DESIGN.md §2, collés tels quels) ---------- */
:root {
  --paper: #FFFFFF;
  --card: #FFFFFF;
  --white: #FFFFFF;
  --ink: #0B0B0B;
  --ink-2: #3B3B3B;
  --ink-3: #595959;
  --line: #D6D6D6;
  --line-2: #BDBDBD;
  --on-dark: #FFFFFF;
  --on-dark-2: #C8C8C8;

  --jaune: #FFD500;
  --jaune-hover: #F0C400;
  --jaune-off: #FFF1A6;
  --eu: #003399;
  --wa: #0E7A3F;
  --wa-hover: #0B6534;

  --on: #0F6436;
  --on-bg: #E2F0E6;
  --cmd: #724600;
  --cmd-bg: #FAEBC8;
  --err: #A3261B;
  --err-bg: #FBE4E1;
  --msg: #E7F4EA;
  --msg-line: #BFDCC6;

  --focus: var(--eu);
  --focus-dark: var(--jaune);
  --focus-jaune: var(--ink);

  --f-disp: 'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
  --f-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --t-count: clamp(4rem, 2.8rem + 3.6vw, 6rem);
  --t-h1: clamp(2.125rem, 1.55rem + 2.1vw, 3.5rem);
  /* H1 des pages 32 → 48 et H2 28 → 40 entre 390 et 1440 px (contrat tenu à 1440, audit visuel V34). */
  --t-h1-page: clamp(2rem, 1.63rem + 1.52vw, 3rem);
  --t-h2: clamp(1.75rem, 1.47rem + 1.14vw, 2.5rem);
  --t-h2-bloc: clamp(1.375rem, 1.3rem + .3vw, 1.5rem);
  --t-h3: clamp(1rem, .97rem + .15vw, 1.125rem);
  --t-lead: clamp(1rem, .95rem + .3vw, 1.125rem);
  --t-body: clamp(1rem, .97rem + .12vw, 1.0625rem);
  --t-small: clamp(.875rem, .86rem + .06vw, .9375rem);
  --t-micro: .8125rem;
  --t-brand: .75rem;

  --g1: 4px; --g2: 8px; --g3: 12px; --g4: 16px; --g5: 24px; --g6: 32px; --g7: 48px; --g8: 72px;
  --section-y: var(--g7);

  --r: 3px;
  --r-plate: 8px;
  --b: 1px solid var(--line);
  --b-2: 1px solid var(--line-2);
  --b-strong: 2px solid var(--ink);
  --shadow-menu: 0 24px 40px -24px rgba(11, 11, 11, .35);
  --shadow-drawer: -16px 0 40px -20px rgba(11, 11, 11, .35);

  /* Hauteurs des commandes (audit visuel V18) : 44 compact (tri, puces, cartes, lignes), 48 standard (boutons, champs,
     listes), 56 envoi (WhatsApp, e-mail, appel). Aucune autre valeur. */
  --h-sm: 44px;
  --h: 48px;
  --h-lg: 56px;
  /* Teintes hors palette ramenées à des jetons (V43). */
  --ink-hover: #262626;
  --press: #EDEDED;
  --line-dark: #2E2E2E;
  --dot-off: #9A9A9A;
  --todo-dark-bg: #3A2E12;
  --todo-dark: #F5D98A;

  --wrap: 1240px;
  --gutter: 16px;
  --header-h: 60px;
  --mbar-h: 64px;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --t-fast: 200ms;
  --t-drawer: 260ms;

  --z-header: 20; --z-mega: 30; --z-mbar: 40; --z-drawer: 50; --z-mmenu: 60; --z-toast: 70;

  /* Champs désactivés hors de la bande jaune : gris neutre (DESIGN 3.22 donnait #EEEDE8, trop beige pour le « bon blanc » demandé). */
  --field-off: #F0F0F0;
  --placeholder: #686B72;
}
@media (min-width: 768px) { :root { --gutter: 24px; --section-y: var(--g8); --header-h: 76px; } }
@media (min-width: 1060px) { :root { --gutter: 32px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--g4); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--t-body)/1.6 var(--f-body); overflow-x: clip; padding-bottom: calc(var(--mbar-h) + 4px + env(safe-area-inset-bottom)); }
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
a { color: inherit; text-underline-offset: 3px; }
@media (hover: hover) { a:hover { text-decoration-thickness: 2px; } }
/* Icônes du jeu commun (ICONS de src-v2/build.py, Tabler) : trait de 2 px réels à 20 comme à 24 px, au plus près du fût
   de Barlow 600 et 700 (audit visuel V02). */
.ic :is(path, circle, rect, line, polyline) { vector-effect: non-scaling-stroke; }
/* Numéros de téléphone jamais coupés (V35). */
a[href^="tel:"]:not(.btn), .nw { white-space: nowrap; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
ul, ol { padding: 0; }
svg { flex: none; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; margin: -1px; padding: 0; border: 0; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 99; background: var(--ink); color: var(--on-dark); padding: var(--g3) var(--g4); font-weight: 700; }
.skip:focus { left: var(--g4); top: var(--g2); outline: 3px solid var(--focus-dark); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.todo { background: var(--cmd-bg); color: var(--cmd); font-weight: 600; padding: 0 var(--g1); border-radius: 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.show-m { display: inline; }
.hide-m { display: none; }
.small { font-size: var(--t-small); color: var(--ink-2); }
.loading { color: var(--ink-3); padding: var(--g6) 0; }
.h2 { font: 800 var(--t-h2)/1.05 var(--f-disp); }
.h2b { font: 800 var(--t-h2-bloc)/1.1 var(--f-disp); color: var(--ink); }
.link-arrow { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.linkish { background: none; border: 0; padding: 0; color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; min-height: 44px; display: inline-flex; align-items: center; }
@media (hover: hover) { .linkish:hover { text-decoration-thickness: 2px; } }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--g3); align-items: center; }
@media (min-width: 768px) { .show-m { display: none; } .hide-m { display: inline; } p.hide-m { display: block; } }

/* ---------- Boutons, champs (DESIGN 3.22) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--g2); min-height: var(--h); padding: 0 var(--g5); border-radius: var(--r); border: 2px solid transparent; font: 700 1rem/1.1 var(--f-body); text-decoration: none; text-align: center; cursor: pointer; transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.btn svg { width: 20px; height: 20px; }
.btn-ink { background: var(--ink); color: var(--card); border-color: var(--ink); }
.btn-jaune { background: var(--jaune); color: var(--ink); border-color: var(--jaune); }
.btn-line { background: var(--card); color: var(--ink); border-color: var(--ink); }
.btn-wa { background: var(--wa); color: #FFFFFF; border-color: var(--wa); }
/* Survol réservé aux souris (audit visuel V20) : sur téléphone, « Réserver » ne reste plus noir après l'appui.
   Un vrai état d'appui (:active) à la place, sur tous les écrans. */
@media (hover: hover) {
  .btn-ink:hover { background: var(--ink-hover); border-color: var(--ink-hover); }
  .btn-jaune:hover { background: var(--jaune-hover); border-color: var(--jaune-hover); }
  .btn-line:hover { background: var(--ink); color: var(--card); }
  .btn-wa:hover { background: var(--wa-hover); border-color: var(--wa-hover); }
}
.btn-ink:active { background: #000000; border-color: #000000; }
.btn-jaune:active { background: var(--jaune-hover); border-color: var(--jaune-hover); }
.btn-line:active { background: #EDEDED; color: var(--ink); }
.btn-wa:active { background: var(--wa-hover); border-color: var(--wa-hover); }
.act:active, .qty button:active:not(:disabled), .chips a:active, .pager a:active, .sugg button:active, .consent-btn:active { background: var(--press); }
.chips a.is-on:active { background: var(--ink-hover); }
.mbar a:active { background: var(--ink-hover); }
.mbar .mbar-cart:active { background: var(--jaune-hover); }
.search button:active { background: var(--ink-hover); }
.btn-block { width: 100%; }
.btn-sm { min-height: var(--h-sm); padding: 0 var(--g4); font-size: .9375rem; }
.btn, .act, .mbar a, .qty button, .chips a, .pager a, .sugg button, .consent-btn { -webkit-tap-highlight-color: transparent; }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--line); border-color: var(--line); color: var(--ink-3); cursor: not-allowed; }
.lbl { display: block; font-weight: 600; font-size: .9375rem; margin-bottom: var(--g2); color: var(--ink); }
.lbl i { font-style: normal; font-weight: 400; color: var(--ink-3); font-size: .875rem; }
.fld { min-width: 0; margin-top: var(--g4); }
.field { display: block; width: 100%; min-height: var(--h); padding: 0 var(--g3); background: var(--white); color: var(--ink); border: var(--b-2); border-radius: var(--r); font: 400 1rem/1.3 var(--f-body); transition: border-color var(--t-fast) var(--ease); }
textarea.field { padding: var(--g3); min-height: 96px; resize: vertical; }
.field::placeholder { color: var(--placeholder); }
@media (hover: hover) { .field:hover { border-color: var(--ink-3); } }
.field:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--ink); }
.field[aria-invalid="true"] { border: 2px solid var(--err); }
.field:disabled { background: var(--field-off); color: var(--ink-3); }
.fld-err { margin-top: var(--g3); padding: var(--g2) var(--g3); background: var(--err-bg); color: var(--err); font-size: .875rem; font-weight: 600; border-radius: var(--r); }
/* Repère d'état en plus de la couleur (V-1.2) : Tabler alert-circle et circle-check, mêmes tracés que ICONS de build.py,
   en masque CSS (le texte est posé par le JavaScript), trait de 2 px à 20 px. */
.fld-err { position: relative; padding-left: calc(var(--g3) + 28px); }
.toast.bad, .toast.ok { padding-left: calc(var(--g4) + 28px); } /* le toast est déjà en position fixe */
.fld-err::before, .toast.bad::before, .toast.ok::before { content: ""; position: absolute; left: var(--g3); top: calc(var(--g2) + 1px); width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--mask-alert) center / 20px no-repeat; mask: var(--mask-alert) center / 20px no-repeat; }
.toast.ok::before { -webkit-mask-image: var(--mask-check); mask-image: var(--mask-check); }
.toast.bad::before, .toast.ok::before { left: var(--g4); top: calc(var(--g3) + 2px); }
:root {
  --mask-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E");
  --mask-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0'/%3E%3Cpath d='M9 12l2 2l4 -4'/%3E%3C/svg%3E");
}
select { cursor: pointer; }

/* ---------- États de disponibilité (DESIGN 3.6) ---------- */
.st { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-micro); font-weight: 600; line-height: 1.3; color: var(--ink-3); white-space: nowrap; }
.st::before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 2px solid currentColor; flex: none; }
.st-on { color: var(--on); }
.st-on::before { background: currentColor; }
.st-cmd { color: var(--cmd); }

/* ---------- Bandeau d'infos ---------- */
.strip { background: var(--ink); color: var(--on-dark); font-size: .875rem; }
.strip-in { display: flex; align-items: center; gap: var(--g4); min-height: 32px; }
.strip a { color: var(--on-dark); text-decoration: none; font-weight: 600; font-variant-numeric: tabular-nums; min-height: 32px; display: inline-flex; align-items: center; }
@media (hover: hover) { .strip a:hover { text-decoration: underline; } }
.strip :focus-visible, .foot :focus-visible, .mbar :focus-visible, .plq-band :focus-visible, .hero-cap :focus-visible { outline-color: var(--focus-dark); }
.strip-push { flex: 1; }
.strip .strip-addr, .strip .strip-wa { display: none; }
.strip-in > * { white-space: nowrap; }
.open { display: inline-flex; align-items: center; gap: var(--g2); font-weight: 600; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dot-off); flex: none; }
.open.is-open .dot { background: #3DBE6E; }
.open-light { color: var(--ink-2); font-size: .9375rem; }
.open-light.is-open .dot { background: var(--on); }
@media (min-width: 768px) {
  .strip-in { min-height: 36px; gap: var(--g5); }
  .strip .strip-addr { display: inline; }
  .strip .strip-wa { display: inline-flex; }
}

/* ---------- En-tête ---------- */
.hdr { position: relative; z-index: var(--z-header); background: var(--card); color: var(--ink); border-bottom: var(--b); }
.hdr-in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "logo . act" "search search search"; align-items: center; column-gap: var(--g3); min-height: var(--header-h); }
.logo { grid-area: logo; display: inline-flex; align-items: center; gap: var(--g3); text-decoration: none; color: var(--ink); min-height: 44px; }
.logo-tag { background: var(--jaune); color: var(--ink); font: 800 1.5rem/1 var(--f-disp); letter-spacing: .01em; padding: var(--g2) var(--g3) 6px; border-radius: var(--r); }
/* Logo complet dès 360 px (V12) : « AUBER » et « Pièces auto », la ville s'ajoute à partir de 768 (Auber Auto, vendeur
   de voitures, est sur la même avenue). Sous 360, le sous-titre reste lu mais masqué. */
.logo-sub { font: 600 .8125rem/1.15 var(--f-body); color: var(--ink-2); white-space: nowrap; }
.logo-town { display: none; }
@media (max-width: 359px) { .logo-sub { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }
@media (min-width: 768px) { .logo-town { display: inline; } }
.search { grid-area: search; display: flex; width: 100%; margin: 0 0 var(--g3); border: var(--b-strong); border-radius: var(--r); background: var(--white); }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0 var(--g3); height: 44px; font-size: 1rem; color: var(--ink); }
.search input::placeholder { color: var(--placeholder); }
.search input:focus { outline: none; }
.search:focus-within { outline: 3px solid var(--focus); outline-offset: 1px; }
.search button { border: 0; background: var(--ink); color: var(--card); width: 52px; display: grid; place-items: center; }
.search button svg { width: 24px; height: 24px; }
/* Suggestions pendant la frappe (audit n° 5) : sous le champ de l'en-tête et de /pieces/, au-dessus de la page. */
.has-sugg { position: relative; }
.qsugg { position: absolute; z-index: 70; top: calc(100% + 4px); left: -2px; right: -2px; list-style: none; max-height: min(70vh, 460px); overflow-y: auto; overscroll-behavior: contain; background: var(--card); border: var(--b-strong); border-radius: var(--r); box-shadow: 0 10px 28px rgba(11, 11, 11, .18); }
.qsugg li + li { border-top: var(--b); }
.qsugg a { display: grid; gap: 2px; min-height: 48px; padding: var(--g2) var(--g3); color: var(--ink); text-decoration: none; text-align: left; }
.qsugg [aria-selected="true"] a { background: var(--field-off); box-shadow: inset 4px 0 0 var(--ink); }
@media (hover: hover) { .qsugg a:hover { background: var(--field-off); } }
.qs-t { font-weight: 700; font-size: .9375rem; line-height: 1.3; }
.qs-m { font-size: .8125rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.qs-k { font-size: .75rem; font-weight: 700; letter-spacing: .02em; color: var(--on); }
.qs-all a, .qs-ask a { align-content: center; font-weight: 700; font-size: .9375rem; text-decoration: underline; text-underline-offset: 3px; }
.qs-ask a { font-weight: 600; color: var(--ink-2); }
.hdr-actions { grid-area: act; display: flex; align-items: center; gap: 0; justify-self: end; }
.act { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--g2); min-height: 44px; min-width: 44px; padding: 0 var(--g2); border: 1px solid transparent; border-radius: var(--r); background: var(--card); color: var(--ink); text-decoration: none; font-weight: 600; font-size: .9375rem; }
.act svg { width: 24px; height: 24px; }
.act-veh, .act-label { display: none; }
.count { position: absolute; top: 2px; right: 0; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--jaune); color: var(--ink); font: 700 .75rem/20px var(--f-body); text-align: center; box-shadow: 0 0 0 2px var(--card); }
@media (min-width: 768px) {
  .hdr-in { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "logo search act"; column-gap: var(--g5); }
  .search { margin: 0; max-width: 620px; justify-self: center; }
  .search input { height: 44px; padding: 0 var(--g4); } /* 44 + bordures de 2 = 48 (V18) */
  .act { border-color: var(--line-2); padding: 0 var(--g3); }
  @media (hover: hover) { .act:hover { border-color: var(--ink); } }
  .act-veh { display: inline-flex; }
  .act-veh-t { display: none; }
  .hdr-actions { gap: var(--g2); }
  .count { top: -8px; right: -8px; }
}
@media (min-width: 1060px) {
  .logo-tag { font-size: 1.75rem; }
  .act-veh-t, .act-label { display: inline; }
  .act-veh-t { max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .act-menu { display: none; }
}

/* Navigation (≥ 1060) et méga-menu (DESIGN 3.3) */
.nav { display: none; }
@media (min-width: 1060px) {
  .nav { display: block; border-top: var(--b); }
  .nav-in { display: flex; align-items: center; gap: var(--g1); min-height: 48px; }
  .nav a, .nav-all { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; text-decoration: none; font-weight: 600; font-size: .9375rem; padding: 0 var(--g3); border-radius: var(--r); color: var(--ink); }
  .nav-all { gap: var(--g2); border: 0; background: var(--ink); color: var(--card); margin-right: var(--g3); }
  .nav-all svg { width: 24px; height: 24px; margin-left: -2px; }
  @media (hover: hover) {
    .nav a:hover { text-decoration: underline; }
    .nav-all:hover { background: var(--ink-hover); }
    .mega-fams a:hover { font-weight: 700; }
    .mega-title a:hover, .mega-cols a:hover { text-decoration: underline; }
  }
  .nav-all[aria-expanded="true"] { background: var(--jaune); color: var(--ink); }
  .nav-all:focus-visible { outline-color: var(--focus); }
  .nav-fam { display: none !important; }
  .nav-push { flex: 1; }
  /* Soulignés sous le texte seulement, marges exclues (V25) : deux liens forts voisins ne font plus une barre cassée. */
  .nav-strong, .nav a[aria-current="page"] { background: linear-gradient(var(--jaune), var(--jaune)) no-repeat 50% 100% / calc(100% - 2 * var(--g3)) 3px; border-radius: 0 !important; }
  .nav a[aria-current="page"] { background-image: linear-gradient(var(--ink), var(--ink)); }
  .mega { position: absolute; left: 0; right: 0; top: 100%; z-index: var(--z-mega); background: var(--card); color: var(--ink); border-top: var(--b); border-bottom: var(--b-2); box-shadow: var(--shadow-menu); max-height: calc(100vh - 160px); overflow-y: auto; }
  .mega-in { display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: 420px; }
  .mega-fams { list-style: none; padding: var(--g4) 0; border-right: var(--b); }
  .mega-fams a { display: flex; justify-content: space-between; align-items: center; gap: var(--g3); min-height: 34px; padding: 2px var(--g4) 2px 0; text-decoration: none; font-weight: 400; font-size: .9375rem; color: var(--ink); }
  .mega-fams a.is-on { font-weight: 700; }
  .mega-fams a.is-on { box-shadow: inset -3px 0 0 var(--ink); }
  .mega-fams em { font-style: normal; font-size: var(--t-micro); color: var(--on); font-weight: 600; font-variant-numeric: tabular-nums; }
  .mega-sub { padding: var(--g5) var(--g6); }
  .mega-title { font: 800 1.75rem/1.1 var(--f-disp); margin-bottom: var(--g4); }
  .mega-title a { text-decoration: none; }
  .mega-cols { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--g6); }
  .mega-cols li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--g3); padding: var(--g3) 0; border-bottom: var(--b); }
  .mega-cols a { font-weight: 600; text-decoration: none; }
  .mega-foot { margin-top: var(--g5); color: var(--ink-2); max-width: 70ch; }
  .mega-foot a { font-weight: 700; color: var(--ink); }
}
@media (min-width: 1440px) { .nav-fam { display: inline-flex !important; } }

/* Menu mobile plein écran (DESIGN 3.4) */
.mmenu { position: fixed; inset: 0; width: 100%; z-index: var(--z-mmenu); background: var(--card); color: var(--ink); overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--gutter) var(--g7); }
.mmenu-head { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; min-height: 60px; background: var(--card); border-bottom: var(--b); }
.mmenu-head .act { border-color: var(--line-2); }
.mmenu-veh { padding: var(--g4) 0; border-bottom: var(--b); }
.mmenu-t2 { font-weight: 700; margin-bottom: var(--g2); }
/* Commande, plaques et contact avant les 20 familles (revue du 28/10) ; soulignés jaunes comme les liens forts de la nav */
.mmenu-top { list-style: none; }
.mmenu-top a { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 64px; padding: var(--g3) 0; border-bottom: var(--b); text-decoration: none; color: var(--ink); }
.mmenu-top b { align-self: flex-start; font-size: 1.0625rem; font-weight: 700; box-shadow: inset 0 -3px 0 var(--jaune); }
.mmenu-top span { font-size: .9375rem; line-height: 1.4; color: var(--ink-2); }
.mmenu-call { display: grid; grid-template-columns: 1fr 1fr; gap: var(--g2); padding: var(--g4) 0; border-bottom: var(--b); }
.mmenu-call .btn { padding: 0 var(--g3); }
.mmenu-t { margin-top: var(--g5); font: 800 1.25rem/1.2 var(--f-disp); }
.mmenu-list, .mmenu-more { list-style: none; margin-top: var(--g2); }
.mmenu-list a { display: flex; justify-content: space-between; align-items: center; gap: var(--g3); min-height: 50px; border-bottom: var(--b); text-decoration: none; font-weight: 600; color: var(--ink); }
.mmenu-list em { font-style: normal; font-size: var(--t-micro); font-weight: 600; color: var(--cmd); white-space: nowrap; }
.mmenu-list em.is-on { color: var(--on); }
.mmenu-more { margin-top: var(--g5); }
.mmenu-more a { display: flex; align-items: center; min-height: 48px; font-weight: 700; color: var(--ink); }
.mmenu-contact { margin-top: var(--g5); padding-top: var(--g4); border-top: var(--b); font-size: .9375rem; color: var(--ink-2); line-height: 2; }
.mmenu-contact a { font-weight: 700; color: var(--ink); }
@media (min-width: 1060px) { .mmenu { display: none !important; } }

/* ---------- Choix du véhicule (DESIGN 3.5, aucune plaque) ---------- */
.vsel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--g2); align-items: end; }
.vsel-f { grid-column: 1; min-width: 0; }
.vsel .vsel-go { grid-column: 2; grid-row: 1; min-height: var(--h); height: var(--h); padding: 0 var(--g5); }
.vsel-msg { grid-column: 1 / -1; font-size: .875rem; font-weight: 600; color: var(--ink); }
.vsel-msg:empty { display: none; }
.vsel select { display: block; width: 100%; height: var(--h); padding: 0 40px 0 var(--g3); border: var(--b-strong); border-radius: var(--r); background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B0B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E") no-repeat right 10px center / 20px; color: var(--ink); font: 600 1rem/1 var(--f-body); -webkit-appearance: none; appearance: none; }
.vsel select:disabled { background-color: var(--field-off); border-color: var(--line-2); color: var(--ink-3); cursor: not-allowed; }
.vsel select:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.vsel .lbl { font-size: .875rem; margin-bottom: 4px; }
.vsel-back { grid-column: 1 / -1; justify-self: start; gap: 2px; min-height: 32px; font-size: .875rem; }
.vsel-back svg { width: 20px; height: 20px; margin-left: -6px; } /* l'encre du chevron s'aligne sur la colonne */
/* Téléphone : divulgation progressive, seule la liste en cours reste visible (le bouton reste à droite). */
@media (max-width: 767px) {
  .vsel .vsel-f:not(.is-active) { display: none; }
  .vsel-hero .lbl, .vsel-inline .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 768px) {
  .vsel-back { display: none; }
  .vsel { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
  .vsel-f { grid-column: auto; }
  .vsel .vsel-go { grid-column: auto; grid-row: auto; }
}
/* « Autre modèle… » : un champ libre remplace les trois listes (D6), avec un retour vers la liste. */
.vsel-text { display: block; width: 100%; height: var(--h); padding: 0 var(--g3); border: var(--b-strong); border-radius: var(--r); background: var(--white); color: var(--ink); font: 600 1rem/1 var(--f-body); }
.vsel-text::placeholder { color: var(--placeholder); font-weight: 400; }
.vsel-text:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.vsel .vsel-free[hidden] { display: none !important; }
.vsel.is-free .vsel-f:not(.vsel-free) { display: none !important; }
.vsel.is-free .vsel-free { display: block; grid-column: 1; }
.vsel.is-free .vsel-back { display: inline-flex; }
@media (min-width: 768px) { .vsel.is-free .vsel-free { grid-column: 1 / 4; } }
/* Véhicule enregistré (hero, bande jaune) : une ligne lisible avec « Changer » et « Retirer » (audit n° 12). */
.vsel-sum { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--g4); min-width: 0; }
.vsel-sum-t { min-width: 0; font-size: 1rem; line-height: 1.3; }
.vsel-sum-t b { font-weight: 800; }
.vsel-sum-t span { font-size: .875rem; font-weight: 600; }
.vsel-sum-act { display: flex; gap: var(--g4); }
.vsel-sum-act .linkish { min-height: 44px; font-weight: 700; color: var(--ink); }
.vsel.is-set .vsel-f, .vsel.is-set .vsel-back { display: none !important; }
.vsel-inline.is-set { grid-template-columns: minmax(0, 1fr); }
.vsel-inline.is-set .vsel-go { display: none; }
.vsel-hero.is-set .vsel-sum { grid-column: 1; grid-row: 1; }
@media (min-width: 768px) {
  .vsel-hero.is-set { grid-template-columns: minmax(0, 1fr) auto; }
}

/* Bande jaune compacte des pages catalogue */
.vbar { background: var(--jaune); color: var(--ink); }
.vbar-in { display: grid; gap: var(--g2) var(--g4); padding: var(--g3) 0 var(--g4); }
.vbar-t { font: 800 1.125rem/1.1 var(--f-disp); }
.vbar-note { font-size: .8125rem; font-weight: 600; max-width: 60ch; }
.vbar-note a { color: var(--ink); font-weight: 700; white-space: nowrap; text-underline-offset: 3px; }
.vbar:has(.vsel.is-set) [data-vsel-missing] { display: none; }
.vsel-sum-k { font-weight: 600; }
/* Téléphone, véhicule enregistré : la ligne « Votre voiture : … » remplace le titre (bande plus courte). */
@media (max-width: 767px) {
  .vbar:has(.vsel.is-set) .vbar-t { display: none; }
  .vbar:has(.vsel.is-set) .vbar-in { gap: var(--g1); padding-top: var(--g2); }
}
@media (min-width: 768px) { .vbar .vsel-sum-k { display: none; } }
.vbar :focus-visible, .vbar select:focus-visible { outline-color: var(--focus-jaune); }
.vbar select:disabled { background-color: var(--jaune-off); border-color: #B9A33A; color: var(--ink-3); }
.vbar .vsel .vsel-go { min-height: 48px; height: 48px; }
.vbar .vsel select, .vbar .vsel-text { height: 48px; }
/* 768 à 1059 : les trois listes sur toute la largeur, pour que « Motorisation » ne soit pas coupée (audit n° 20). */
@media (min-width: 768px) {
  .vbar-in { align-items: center; padding: var(--g3) 0; }
  .vbar-t { font-size: 1.25rem; }
}
@media (min-width: 1060px) {
  .vbar-in { grid-template-columns: auto auto minmax(0, 1fr); }
  .vsel-inline { grid-template-columns: repeat(3, minmax(150px, 200px)) auto; }
  .vsel-inline.is-free { grid-template-columns: minmax(300px, 600px) auto; }
  .vsel-inline.is-free .vsel-free { grid-column: 1; }
  .vbar-note { grid-column: 3; }
}

/* ---------- Accueil : hero (photo du magasin et sa légende-étiquette ; bloc blanc à filet jaune et choix du véhicule) ----------
   Décision D1 du 28/10 : une seule photo, le mur des filtres, sans commande ni défilement. Avec deux photos ou plus
   (HERO_SLIDES de src-v2/build.py), le même gabarit devient un diaporama manuel (slider.js) : commandes sous la photo
   jusqu'à 1059 px, en bas à droite au bureau. Jusqu'à 1059 px : H1, une ligne de texte, la photo au centre sur la hauteur
   restante, puis le choix du véhicule, sans chevauchement (règle du 16/10, audit du 28/10 n° 4).
   --hero-top : bandeau d'infos et en-tête au-dessus du hero (32 + 105 px au téléphone, 36 + 77 px à partir de 768). */
.hero { --hero-top: 137px; position: relative; display: flex; flex-direction: column; min-height: calc(100svh - var(--hero-top) - var(--mbar-h)); background: var(--paper); color: var(--ink); }
.hero-in, .hero-card { display: contents; }
.hero h1 { order: 1; padding: var(--g5) var(--gutter) 0; font: 800 var(--t-h1)/1.02 var(--f-disp); letter-spacing: -.01em; }
.hero-lead { order: 2; padding: var(--g2) var(--gutter) var(--g4); font-size: 1rem; line-height: 1.5; color: var(--ink-2); max-width: 46ch; }
.lead-d { display: none; }
.hero-finder { order: 4; padding: var(--g4) var(--gutter) var(--g5); background: var(--card); color: var(--ink); border-top: 6px solid var(--jaune); }
.hero-finder-t { font: 800 1.25rem/1.1 var(--f-disp); margin-bottom: var(--g3); }
.hero-alt { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--g4); margin-top: var(--g2); font-size: .875rem; }
.hero-alt a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--ink); }
.hero .vsel-current { grid-column: 1; font-weight: 700; }
/* Sous 440 px, les deux liens restent sur deux lignes quelle que soit la police : sinon, entre 400 et 440 px, ils passent
   d'une ligne à deux selon que Barlow est chargée ou non, et la bande suivante saute de 44 px (CLS 0,048 en Lighthouse). */
@media (max-width: 439px) { .hero-alt { flex-direction: column; align-items: flex-start; } }

/* Zone photo. La piste est posée en absolu sur toute la zone : sa hauteur vient du hero (flex) jusqu'à 1059 px, d'une
   hauteur fixe au bureau ; l'image n'a donc aucun décalage à son chargement. Diaporama : glissé natif en scroll-snap,
   diapositives 2 et suivantes masquées jusqu'à .is-ready (posée après le chargement), sans concurrencer l'image LCP. */
.hero-slider { order: 3; position: relative; z-index: 0; flex: 1 1 auto; min-height: 196px; max-height: 440px; }
.sl-track { position: absolute; inset: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding: 0; overscroll-behavior-x: contain; scrollbar-width: none; }
.sl-track::-webkit-scrollbar { display: none; }
.is-single .sl-track { overflow: hidden; }
.sl-slide { position: relative; flex: 0 0 100%; height: 100%; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; background: var(--line); }
.sl-slide + .sl-slide { display: none; }
.hero-slider.is-ready .sl-slide { display: block; }
.sl-pic, .sl-pic img { display: block; width: 100%; height: 100%; }
.sl-pic img { object-fit: cover; object-position: var(--sl-pos, 50% 50%); }
/* Cadrage par photo (sl-s-{clé de HERO_SLIDES}) : ajouter une ligne par nouvelle photo, aux trois tailles. */
.sl-s-mur { --sl-pos: 30% 50%; }
/* Légende : une étiquette jaune, comme celles du rayon et du logo ; filet noir pour la détacher des cartons jaunes. */
.sl-cap { position: absolute; left: var(--gutter); top: var(--g4); display: grid; gap: 2px; max-width: calc(100% - 2 * var(--gutter)); padding: var(--g2) var(--g3) 10px; background: var(--jaune); color: var(--ink); border-radius: var(--r); box-shadow: 0 0 0 2px var(--ink); }
.sl-t { font: 800 1.5rem/1 var(--f-disp); letter-spacing: -.005em; font-variant-numeric: tabular-nums; }
.sl-d { font: 600 .875rem/1.3 var(--f-body); }
/* Commandes (deux photos ou plus) : sous la photo jusqu'à 1059 px, jamais dessus. */
.hero-slider:has(.sl-ctl) .sl-track { bottom: 48px; }
.sl-ctl { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: flex-end; gap: var(--g1); height: 48px; padding: 0 var(--gutter); background: var(--paper); color: var(--ink); }
.sl-btn { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--r); background: none; color: inherit; cursor: pointer; }
.sl-play { margin-right: auto; }
.sl-play .i-play, .hero-slider.is-paused .sl-play .i-pause { display: none; }
.hero-slider.is-paused .sl-play .i-play { display: block; }
.sl-count { flex: none; min-width: 44px; text-align: center; font: 700 .9375rem/1 var(--f-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hero-slider :focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
@media (scripting: none) {
  .sl-slide + .sl-slide { display: block; }
  .sl-ctl { display: none; }
  .hero-slider:has(.sl-ctl) .sl-track { bottom: 0; }
}
@media (min-width: 768px) {
  /* La barre basse disparaît à partir de 768 : le hero prend toute la hauteur sous l'en-tête. */
  .hero { --hero-top: 113px; min-height: calc(100svh - var(--hero-top)); }
  .hero h1, .hero-lead { padding-inline: var(--gutter); }
  .hero-lead { max-width: 62ch; font-size: 1.0625rem; }
  .hero-finder { padding: var(--g5) var(--gutter) var(--g6); }
  .hero-slider { max-height: 520px; }
  .sl-s-mur { --sl-pos: 50% 45%; }
  .sl-cap { top: var(--g5); padding: var(--g3) var(--g4) var(--g3); }
  .sl-t { font-size: 1.75rem; }
  .sl-d { font-size: .9375rem; }
}
@media (min-width: 1060px) {
  .hero { display: grid; min-height: 0; }
  .lead-d { display: inline; }
  .lead-m { display: none; }
  .hero-slider, .hero-in { grid-area: 1 / 1; }
  /* Bord droit de .wrap, pour aligner la légende et les commandes sur la grille de la page. */
  .hero-slider { --sl-wr: calc((100% - min(100% - 2 * var(--gutter), var(--wrap))) / 2); height: max(600px, min(78svh, 760px)); max-height: none; }
  .hero-in { position: relative; z-index: 1; display: flex; align-items: center; padding-block: var(--g6); pointer-events: none; }
  .hero-card { display: grid; gap: var(--g3); width: min(600px, 48%); padding: var(--g6) var(--g6) var(--g5); background: var(--card); border-top: 6px solid var(--jaune); position: relative; z-index: 1; pointer-events: auto; }
  .hero h1 { padding: 0; font-size: 3.5rem; max-width: 17ch; }
  .hero-lead { padding: 0; font-size: 1.0625rem; max-width: 44ch; }
  .hero-finder { margin: 0; padding: var(--g4) 0 0; border-top: var(--b); }
  .vsel-hero { grid-template-columns: 1fr 1fr; }
  .vsel-hero .vsel-f[data-f="make"] { grid-column: 1 / -1; }
  .vsel-hero .vsel-go { grid-column: 1 / -1; width: 100%; }
  .vsel-hero.is-free .vsel-free, .vsel-hero.is-set .vsel-sum { grid-column: 1 / -1; }
  .vsel-hero.is-set { grid-template-columns: 1fr; }
  .hero-alt { justify-content: flex-start; gap: 0 var(--g5); font-size: .9375rem; }
  .sl-s-mur { --sl-pos: 50% 50%; }
  /* Légende (et commandes s'il y a plusieurs photos) en bas à droite, alignées sur la grille. */
  .sl-cap { left: auto; right: var(--sl-wr); top: auto; bottom: var(--g6); padding: var(--g3) var(--g5) var(--g4); }
  .sl-t { font-size: 2.25rem; }
  .sl-d { font-size: 1rem; }
  .hero-slider:has(.sl-ctl) .sl-track { bottom: 0; }
  .hero-slider:has(.sl-ctl) .sl-cap { bottom: calc(var(--g6) + 60px); }
  .sl-ctl { left: auto; right: var(--sl-wr); bottom: var(--g6); height: 52px; padding: 0 var(--g1); background: var(--ink); color: var(--on-dark); border-radius: var(--r); }
  @media (hover: hover) { .sl-ctl .sl-btn:hover { color: var(--jaune); } }
  .sl-ctl :focus-visible { outline-color: var(--focus-dark); }
}

/* En rayon aujourd'hui (le nombre de références est monté dans la légende du hero, D1 du 28/10) */
.rayon { background: var(--paper); padding: var(--g7) 0 var(--g6); }
.rayon-head { display: grid; gap: var(--g1); margin-bottom: var(--g4); }
.rayon-head h2, .deals-head h2, .sec-head h2 { font: 800 var(--t-h2)/1.05 var(--f-disp); }
.rayon-sub { margin-top: var(--g2); color: var(--ink-2); font-size: .9375rem; max-width: 60ch; }
@media (min-width: 768px) {
  .rayon { padding: var(--section-y) 0 var(--g7); }
  .rayon-head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--g6); margin-bottom: var(--g5); }
  .rayon-sub { font-size: 1rem; }
}

/* Rails de cartes (DESIGN 3.7) : défilement avec accroche sous 1060, grille de 6 au-delà */
.rail { list-style: none; display: flex; gap: var(--g3); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter); margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) var(--g2); scrollbar-width: thin; }
.rail > .card { flex: 0 0 64%; scroll-snap-align: start; }
@media (min-width: 768px) { .rail > .card { flex-basis: calc((100% - 2 * var(--g3)) / 3.2); } }
@media (min-width: 1060px) {
  .rail { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--g4); overflow: visible; margin: 0; padding: 0; }
}
.card { position: relative; display: flex; flex-direction: column; background: var(--card); color: var(--ink); border: var(--b); border-radius: var(--r); container-type: inline-size; transition: border-color var(--t-fast) var(--ease); }
@media (hover: hover) {
  .card:hover { border-color: var(--ink); }
  .card:hover .card-t a { text-decoration: underline; }
}
.card-img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--white); border-bottom: var(--b); border-radius: var(--r) var(--r) 0 0; }
span.card-img { display: block; background: var(--field-off); }
.card-brand { margin: var(--g3) var(--g3) 0; font-size: var(--t-brand); font-weight: 700; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.card-t { margin: var(--g1) var(--g3) 0; min-height: 2.5em; font: 700 1rem/1.25 var(--f-body); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-t a { text-decoration: none; color: var(--ink); }
.card-t a::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.card .ref, .row .ref { font-size: .875rem; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.card .ref { margin: var(--g2) var(--g3) 0; }
.card-st { margin: var(--g2) var(--g3) 0; }
.card .compat { margin: var(--g2) var(--g3) 0; }
.card-foot { margin-top: auto; padding: var(--g3); display: grid; gap: var(--g2); }
.card-foot .btn { position: relative; z-index: 1; min-height: var(--h-sm); padding: 0 var(--g3); }
.price-na { font-size: var(--t-micro); color: var(--ink-3); }
.deal { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--g2); }
.deal-tag { background: var(--jaune); color: var(--ink); font-size: var(--t-micro); font-weight: 700; padding: 2px 6px; border-radius: var(--r); }
.deal-price { font: 700 1.375rem/1 var(--f-disp); color: var(--ink); }
.compat { display: block; font-size: var(--t-micro); color: var(--ink-3); }
.compat-ok { color: var(--on); font-weight: 600; }
@container (max-width: 180px) {
  .card-brand, .card-t, .card .ref, .card-st { margin-inline: var(--g2); }
  .card-foot { padding: var(--g2); }
}

/* Bons plans : toujours visibles (décision du 23/10, D2) ; une seule ligne tant qu'il n'y en a pas */
.deals { background: var(--paper); padding: 0 0 var(--section-y); }
.deals-head { display: grid; gap: var(--g2); align-items: end; padding-top: var(--g5); border-top: var(--b-strong); margin-bottom: var(--g4); }
.deals-head p { color: var(--ink-2); margin-top: var(--g1); }
@media (min-width: 768px) { .deals-head { grid-template-columns: minmax(0, 1fr) auto; } }
.deals-line { padding: 0 0 var(--g5); }
.deals-line p { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--g1) var(--g3); padding-top: var(--g4); border-top: var(--b-strong); font-size: .9375rem; color: var(--ink-2); }
.deals-line .deal-tag { font-size: .875rem; }
@media (min-width: 768px) { .deals-line { padding-bottom: var(--g7); } }

/* Index des familles (DESIGN 3.12) : très dense, texte seul */
/* Rythme de l'accueil (audit du 28/10, n° 27 et V42) : plus de filet gris entre les sections, le titre suffit ;
   blanc pour le catalogue (rail, familles, commande), puis jaune (remise), noir (plaques), blanc, noir (magasin). */
.fams { padding: var(--g7) 0; }
.fams-tight { padding: var(--g7) 0 var(--g6); border-top: 0; }
.sec-head { margin-bottom: var(--g5); max-width: 70ch; }
.sec-head p, .fams-lead { margin-top: var(--g2); color: var(--ink-2); }
.fams-tight .fams-lead { margin-bottom: var(--g4); }
/* Index des familles : tuiles-liens serrées comme l'index d'un catalogue de pièces, sans compte en rayon (28/10).
   Toute la tuile est le lien ; jaune de l'enseigne au survol et à l'appui ; chevron d'affordance en CSS. */
.fams-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.famt { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 4px; min-height: 64px; padding: var(--g3) calc(var(--g3) + 20px) var(--g3) var(--g3); background: var(--card); color: var(--ink); text-decoration: none; }
.famt::after { content: ""; position: absolute; right: var(--g3); top: 50%; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: translateY(-50%) rotate(45deg); }
.famt-n { font: 800 1.0625rem/1.15 var(--f-disp); }
.famt-ex { display: none; font-size: .875rem; line-height: 1.45; color: var(--ink-2); }
.famt:focus-visible { outline-offset: -3px; }
.famt:active { background: var(--jaune); }
@media (hover: hover) { .famt:hover { background: var(--jaune); } .famt:hover .famt-ex { color: var(--ink); } }
@media (min-width: 768px) {
  .fams-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .famt { justify-content: flex-start; gap: var(--g2); min-height: 116px; padding: var(--g4) calc(var(--g4) + 22px) var(--g4) var(--g4); }
  .famt::after { top: calc(var(--g4) + .55em); transform: translateY(-50%) rotate(45deg); right: var(--g4); }
  .famt-n { font-size: 1.25rem; }
  .famt-ex { display: block; }
}
@media (min-width: 1060px) { .fams-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Pièce sur commande (accueil) */
.cmdh { padding: 0 0 var(--section-y); }
.cmdh-in { display: grid; gap: var(--g5); padding-top: var(--g6); border-top: var(--b-strong); }
.cmdh h2 { font: 800 var(--t-h2)/1.05 var(--f-disp); }
.cmdh-txt > p { margin-top: var(--g3); color: var(--ink-2); max-width: 56ch; }
.dem-mini { background: var(--card); border: var(--b-2); border-radius: var(--r); padding: var(--g4); }
.dem-mini-t { display: flex; align-items: center; gap: var(--g3); font: 800 1.375rem/1.1 var(--f-disp); margin-bottom: var(--g3); }
.dem-mini-row { align-items: end; }
.dem-mini-row .btn { min-height: var(--h); }
@media (min-width: 1060px) {
  .cmdh-in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--g7); align-items: start; }
  .dem-mini { padding: var(--g6); }
}

/* Bande Plaques (fond noir, bouton jaune) */
.plq-band { background: var(--ink); color: var(--on-dark); padding: var(--g6) 0; }
.plq-band-in { display: grid; gap: var(--g4); }
.plq-band h2 { font: 800 var(--t-h2)/1.05 var(--f-disp); color: var(--on-dark); }
.plq-band p { margin-top: var(--g2); color: var(--on-dark-2); max-width: 60ch; }
.plq-band-act { display: flex; flex-direction: column; align-items: flex-start; gap: var(--g2); }
.plq-band-tel { color: var(--on-dark); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
@media (min-width: 768px) { .plq-band { padding: var(--g7) 0; } .plq-band-in { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--g6); } }

/* Trois modes de remise : trois lignes, pas trois cartes */
/* Sur l'accueil, bande jaune pleine, texte noir (audit du 28/10, §2) ; le vérificateur de commune reste sur blanc. */
.modes { padding: var(--section-y) 0; }
.page-home .modes { background: var(--jaune); color: var(--ink); }
.page-home .modes .sec-head p, .page-home .modes-list li > p:last-child { color: var(--ink); }
.page-home .modes-list li { border-bottom-color: rgba(11, 11, 11, .28); }
.page-home .modes :focus-visible { outline-color: var(--focus-jaune); }
.modes-list { list-style: none; border-top: var(--b-strong); }
.modes-list li { display: grid; gap: var(--g1); padding: var(--g3) 0 var(--g4); border-bottom: var(--b); }
.modes-t { font: 700 1.125rem/1.2 var(--f-disp); }
.modes-when { font-weight: 700; color: var(--ink); font-size: .9375rem; }
.modes-list li > p:last-child { color: var(--ink-2); font-size: .9375rem; max-width: 70ch; }
.modes-check { margin-top: var(--g5); max-width: 560px; padding: var(--g4); background: var(--white); border-radius: var(--r); }
.modes-check .small { margin-top: var(--g2); }
.modes-check .small a { font-weight: 700; color: var(--ink); }
@media (min-width: 1060px) {
  .modes-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--g7); align-items: start; }
  .modes-in .sec-head { grid-column: 1 / -1; }
  .modes-list li { grid-template-columns: 220px minmax(0, 1fr); column-gap: var(--g5); }
  .modes-list li > p:last-child { grid-column: 2; }
  .modes-when { grid-column: 2; grid-row: 1; }
  .modes-t { grid-row: 1 / span 2; }
  .modes-check { margin-top: 0; padding: var(--g5); }
}
.commune-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--g2); }
.commune-row .btn { min-height: var(--h); }
.commune-result { margin-top: var(--g2); font-size: .9375rem; font-weight: 600; }
.commune-result:empty { display: none; }
.commune-result.ok { color: var(--on); }
.commune-result.bad { color: var(--err); }
.commune-pick { min-height: 32px; }

/* Garagistes (accueil) */
.pro { padding: var(--section-y) 0; }
.pro-in { display: grid; gap: var(--g5); }
.pro h2 { font: 800 var(--t-h2)/1.05 var(--f-disp); }
.pro-txt > p { margin-top: var(--g3); color: var(--ink-2); max-width: 60ch; }
.pro-search { margin: var(--g4) 0 var(--g3); max-width: 520px; }
.pro-search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--g2); }
.pro-search-row .btn { min-height: var(--h); }
.pro-fig img, .dem-fig img, .pro-page-fig img { border-radius: var(--r); width: 100%; }
.pro-fig figcaption, .dem-fig figcaption, .pro-page-fig figcaption, .shop-photo figcaption, .mag-facade figcaption, .mag-photos figcaption { margin-top: var(--g2); font-size: var(--t-micro); color: var(--ink-3); }
.pro-fig { max-width: 260px; }
@media (min-width: 768px) { .pro-fig { max-width: 420px; } }
@media (min-width: 768px) { .pro-in { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--g7); align-items: center; } }

/* Mur des marques (repris de la v1) */
.brands-sec { padding: var(--g7) 0; }
/* Filets portés par chaque case (V31) : une dernière rangée incomplète reste blanche, sans bloc gris. */
.brands { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: var(--b); border-left: var(--b); }
.brand { background: var(--white); border-right: var(--b); border-bottom: var(--b); }
.brand a, .brand-cell { display: grid; grid-template-rows: 1fr auto; place-items: center; gap: var(--g1); min-height: 84px; padding: var(--g3) var(--g2); text-decoration: none; color: var(--ink); text-align: center; }
@media (hover: hover) { .brand a:hover { box-shadow: inset 0 0 0 2px var(--ink); } }
.brand-mark { display: grid; place-items: center; height: 40px; }
.brand-mark img { width: auto; max-width: min(100%, 110px); object-fit: contain; } /* Hutchinson ne s'étale plus sur 147 px (V45) */
.brand-mark .lg-r1 { height: 38px; }
.brand-mark .lg-r2 { height: 30px; }
.brand-mark .lg-r3 { height: 24px; }
.brand-mark .lg-r5 { height: 18px; }
.brand-name { font: 700 .9375rem/1.1 var(--f-disp); color: var(--ink-2); }
.brand small { font-size: .75rem; font-weight: 700; color: var(--on); }
.brand:not(.has-stock) .brand-mark img { filter: grayscale(1); opacity: .55; }
.brand:not(.has-stock) .brand-name { color: var(--ink-3); }
.brands-wrap.is-collapsed .brand:nth-child(n + 7) { display: none; }
.brands-foot { margin-top: var(--g4); display: grid; gap: var(--g3); justify-items: start; }
@media (min-width: 768px) { .brands { grid-template-columns: repeat(4, minmax(0, 1fr)); } .brands-wrap.is-collapsed .brand:nth-child(n + 7) { display: block; } .brands-wrap.is-collapsed .brand:nth-child(n + 9) { display: none; } }
@media (min-width: 1060px) { .brands { grid-template-columns: repeat(6, minmax(0, 1fr)); } .brands-wrap.is-collapsed .brand:nth-child(n + 9) { display: block; } .brands-wrap.is-collapsed .brand:nth-child(n + 13) { display: none; } }

/* Le magasin (accueil) : bande noire, adresse, état d'ouverture, horaires groupés, itinéraire, avis Google, plan */
.shop { padding: var(--section-y) 0; background: var(--ink); color: var(--on-dark); }
.shop :focus-visible { outline-color: var(--focus-dark); }
.shop-in { display: grid; gap: var(--g6); }
.shop h2 { font: 800 var(--t-h2)/1.05 var(--f-disp); color: var(--on-dark); }
.shop-addr { margin: var(--g3) 0 var(--g2); font-size: 1.0625rem; font-weight: 600; }
.shop .open { font-size: .9375rem; }
.hours-c { list-style: none; max-width: 420px; margin-top: var(--g3); border-top: 1px solid var(--line-dark); font-size: .9375rem; }
.hours-c li { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: var(--g3); padding: var(--g2) 0; border-bottom: 1px solid var(--line-dark); }
.hours-c b { font-weight: 600; }
.hours-c span { color: var(--on-dark-2); }
.shop .btn-row { margin-top: var(--g5); }
.btn-line-dark { background: transparent; color: var(--on-dark); border-color: var(--on-dark); }
@media (hover: hover) { .btn-line-dark:hover { background: var(--on-dark); color: var(--ink); } }
.btn-line-dark:active { background: var(--on-dark); color: var(--ink); }
.shop-more { margin-top: var(--g3); font-size: .9375rem; }
.shop-more a { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-dark); font-weight: 600; }
.shop-map img, .mag-map img { width: 100%; border: var(--b); border-radius: var(--r); }
.shop-map figcaption, .mag-map figcaption { margin-top: var(--g2); font-size: var(--t-micro); color: var(--ink-3); }
.shop .shop-map figcaption { color: var(--on-dark-2); }
.shop .shop-map img { border-color: var(--line-dark); }
/* « Qui vous répond » (GERANT de build.py) : absent tant que le prénom et la photo ne sont pas fournis. */
.who { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: var(--g4); margin-top: var(--g5); }
.who img { width: 88px; height: 110px; object-fit: cover; border-radius: var(--r); }
.who figcaption { font-weight: 600; }
.who-dark figcaption { color: var(--on-dark); }
@media (min-width: 768px) { .shop-in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--g7); align-items: start; } }
.hours { width: 100%; max-width: 420px; margin-top: var(--g3); font-size: .9375rem; }
.hours th, .hours td { padding: var(--g2) 0; border-bottom: var(--b); text-align: left; vertical-align: top; }
.hours th { font-weight: 600; padding-right: var(--g4); width: 40%; }
.hours tr.today th, .hours tr.today td { font-weight: 700; }
.hours tr.today th::after { content: "Aujourd'hui"; display: block; width: max-content; margin-top: 2px; padding: 0 6px; background: var(--jaune); color: var(--ink); font-size: .75rem; font-weight: 700; border-radius: var(--r); }

/* ---------- Pages intérieures ---------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--g2); padding-top: var(--g1); font-size: var(--t-small); color: var(--ink-3); }
.crumbs a { color: var(--ink-2); display: inline-flex; align-items: center; min-height: 44px; }
.page-head { padding: 0 0 var(--g4); }
.page-head h1 { font: 800 var(--t-h1-page)/1.04 var(--f-disp); letter-spacing: -.01em; max-width: 26ch; }
@media (max-width: 767px) { .crumbs [aria-current], .crumbs span[aria-hidden]:nth-last-child(2) { display: none; } }
.page-lead { margin-top: var(--g2); color: var(--ink-2); max-width: 56ch; font-size: .9375rem; }
@media (min-width: 768px) { .page-head { padding: var(--g3) 0 var(--g5); } .page-lead { font-size: 1.0625rem; margin-top: var(--g3); } }

/* Sous-familles en pastilles */
.chips { list-style: none; display: flex; gap: var(--g2); overflow-x: auto; scrollbar-width: none; margin: var(--g4) calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter); scroll-padding-left: var(--gutter); }
.chips::-webkit-scrollbar { display: none; }
.chips a { display: inline-flex; align-items: center; gap: var(--g2); min-height: 44px; padding: 0 var(--g4); border: var(--b-2); border-radius: var(--r); background: var(--card); color: var(--ink); text-decoration: none; font-weight: 600; font-size: .9375rem; white-space: nowrap; }
@media (hover: hover) { .chips a:hover { border-color: var(--ink); } }
.chips a.is-on { background: var(--ink); color: var(--card); border-color: var(--ink); }
.chips em { font-style: normal; font-size: var(--t-micro); color: var(--on); font-weight: 700; }
.chips a.is-on em { color: var(--jaune); }
.chips a.is-on:focus-visible { outline-color: var(--focus); }
@media (min-width: 768px) { .chips { flex-wrap: wrap; overflow: visible; margin: var(--g5) 0 0; padding: 0; } }

/* Grille famille : filtres | liste | encadré « La référence n'est pas là ? » */
.fam-layout, .cat-layout { display: grid; gap: var(--g5); margin-top: var(--g5); align-items: start; }
@media (max-width: 767px) { .fam-layout { padding-bottom: var(--g6); } } /* l'encadré « Pas en rayon ? » ne touche plus le filet suivant (V40) */
.fam-main, .cat-main { min-width: 0; display: grid; gap: var(--g6); }
.cat-main { gap: 0; align-content: start; }
.cat-main .list-info:not(:empty) { margin-top: var(--g3); }
.filters { display: none; }
.filters.is-open { display: block; position: fixed; inset: 0; z-index: var(--z-mmenu); background: var(--card); color: var(--ink); overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--gutter); }
.filters-head { display: flex; justify-content: space-between; align-items: center; min-height: 60px; border-bottom: var(--b); margin-bottom: var(--g3); }
.filters-t { font: 800 1.25rem/1.1 var(--f-disp); }
.filters-close { border-color: var(--line-2); }
/* « Voir les pièces » toujours sous le pouce, même après 60 marques (constat 21). */
.filters-foot { position: sticky; bottom: 0; z-index: 1; margin: 0 calc(-1 * var(--gutter)); padding: var(--g3) var(--gutter) calc(var(--g3) + env(safe-area-inset-bottom, 0px)); background: var(--card); border-top: var(--b); }
.filters-open { gap: var(--g2); }
.filters-open svg { width: 20px; height: 20px; flex: none; }
/* Filtres actifs, retirables (constat 22). */
.active-filters { list-style: none; display: flex; flex-wrap: wrap; gap: var(--g2); margin-top: var(--g3); }
.active-filters a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--g2) 0 var(--g3); border: var(--b-2); border-radius: var(--r); background: var(--card); color: var(--ink); font-weight: 600; font-size: .9375rem; text-decoration: none; white-space: nowrap; }
.active-filters a svg { width: 20px; height: 20px; flex: none; }
.active-filters .af-clear { border-color: transparent; background: none; padding: 0 var(--g2); text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) { .active-filters a:hover { border-color: var(--ink); } }
.list-note { margin-top: var(--g3); font-size: .9375rem; color: var(--ink-2); max-width: 64ch; }
.rows-ask { padding: var(--g4) 0 0; font-size: .9375rem; color: var(--ink-2); }
.rows-ask a { font-weight: 700; color: var(--ink); text-underline-offset: 3px; }
.empty-rayons { font-size: .9375rem; color: var(--ink-2); }
.empty-rayons a { font-weight: 700; color: var(--ink); }
.fgroup { border: 0; padding: 0; margin: 0 0 var(--g5); min-width: 0; }
.fgroup legend { width: 100%; font-weight: 700; padding: 0 0 var(--g2); margin-bottom: var(--g2); border-bottom: var(--b-2); }
.chk { display: flex; align-items: center; gap: var(--g2); min-height: 44px; font-size: .9375rem; font-weight: 400; cursor: pointer; }
.chk input { width: 20px; height: 20px; accent-color: var(--ink); flex: none; font-size: 16px; }
.chk em { margin-left: auto; font-style: normal; font-size: var(--t-micro); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.filters-open { justify-self: start; flex: none; }
.list-bar .sort { flex: none; }
.list-bar { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: var(--g3); padding-bottom: var(--g3); border-bottom: var(--b-strong); }
.list-t { flex: 1; min-width: 0; font: 800 1.375rem/1.15 var(--f-disp); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--g1) var(--g3); }
.list-t > span { font: 600 .875rem/1.4 var(--f-body); color: var(--ink-2); }
.list-info { font-size: .9375rem; color: var(--ink-2); }
@media (max-width: 767px) { .list-bar { flex-wrap: wrap; } .list-bar .list-t { flex-basis: 100%; } .list-bar:has(.filters-open):not(:has(.sort)) { flex-wrap: nowrap; } .list-bar:has(.filters-open):not(:has(.sort)) .list-t { flex-basis: auto; } }
.list-info:empty { display: none; }
.rows, .cmd { list-style: none; }
/* Ligne pièce (DESIGN 3.8, constats 24 et 25) : sous 768 px, photo | titre + « marque · réf. · caractéristiques »,
   puis l'état (et le prix) à côté de « Réserver » : environ 110 px par pièce. */
.row { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-areas: "img txt txt" "img st act"; gap: 4px var(--g3); align-items: center; padding: 10px 0; border-bottom: var(--b); }
@media (hover: hover) { @media (hover: hover) { .row:hover .row-t a { text-decoration: underline; } } }
.row-img { grid-area: img; width: 72px; height: 72px; object-fit: cover; border-radius: var(--r); border: var(--b); background: var(--white); align-self: start; }
span.row-img { display: block; background: var(--field-off); }
.row-txt { grid-area: txt; min-width: 0; }
.row-t { font: 700 1rem/1.25 var(--f-body); }
.row-t a { text-decoration: none; color: var(--ink); }
.row-t a::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.row-meta { margin-top: 2px; font-size: .8125rem; line-height: 1.35; color: var(--ink-2); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.row-brand { font-weight: 700; color: var(--ink); }
.row-st { grid-area: st; min-width: 0; display: flex; flex-wrap: wrap; gap: 2px var(--g3); align-items: center; }
.row-st .price-na { font-size: var(--t-micro); }
.row-st .deal-price { font-size: 1.125rem; }
.row-st .compat { display: none; }
.row-st .compat.compat-ok, .row-st .compat.compat-no { display: block; flex-basis: 100%; }
.row-act { grid-area: act; justify-self: end; }
.row-act .btn { position: relative; z-index: 1; min-height: var(--h-sm); padding: 0 var(--g4); }
.rows-more { padding: var(--g3) 0 0; font-weight: 700; }
.rows-more a, .rows-more button { min-height: 44px; display: inline-flex; align-items: center; }
.cmd li { display: grid; gap: var(--g3); padding: var(--g4) 0; border-bottom: var(--b); scroll-margin-top: var(--g5); }
.cmd h3 { font: 700 1.0625rem/1.25 var(--f-body); }
.cmd h3 a { color: var(--ink); }
.cmd p { margin-top: 2px; font-size: .9375rem; color: var(--ink-2); }
.cmd p .st { margin-left: var(--g2); }
.cmd .btn { justify-self: start; }
.cmd-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g1) var(--g4); justify-self: start; }
.cmd-act .linkish { min-height: 44px; font-weight: 600; }
.cmd li:target { box-shadow: inset 4px 0 0 var(--jaune); padding-left: var(--g3); }
@media (min-width: 768px) {
  .row { grid-template-columns: 104px minmax(0, 1fr) auto; grid-template-areas: "img txt act" "img st act"; grid-template-rows: auto 1fr; gap: var(--g2) var(--g4); align-items: start; padding: var(--g3) 0; }
  .row-img { width: 104px; height: 104px; }
  .row-meta { font-size: .875rem; }
  .row-act { align-self: center; }
  .cmd li { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--g4); }
  .cmd .btn, .cmd-act { justify-self: end; }
}
.ask { background: var(--card); border: var(--b-strong); border-radius: var(--r); padding: var(--g4); }
.ask > p { margin-top: var(--g2); color: var(--ink-2); font-size: .9375rem; }
.ask-steps { margin: var(--g3) 0; padding-left: 1.25em; font-weight: 600; font-size: .9375rem; }
.ask-steps li + li { margin-top: var(--g2); }
.ask-tel { margin-top: var(--g3); font-size: .875rem; color: var(--ink-2); }
.ask-tel a { font-weight: 700; color: var(--ink); }
@media (min-width: 768px) {
  .fam-layout { grid-template-columns: minmax(0, 1fr) 260px; }
  .ask { position: sticky; top: var(--g4); padding: var(--g5); grid-column: 2; grid-row: 1; }
  .fam-main { grid-column: 1; grid-row: 1; }
}
@media (min-width: 1060px) {
  .fam-layout { grid-template-columns: 200px minmax(0, 1fr) 280px; gap: var(--g6); }
  .fam-layout:not(:has(.filters)) { grid-template-columns: minmax(0, 1fr) 280px; }
  .filters { display: block; position: sticky; top: var(--g4); }
  .filters-head { display: none; }
  .filters-apply, .filters-open, .filters-foot { display: none !important; }
  .fam-layout .filters { grid-column: 1; grid-row: 1; }
  .fam-layout:has(.filters) .fam-main { grid-column: 2; }
  .fam-layout:has(.filters) .ask { grid-column: 3; }
  .cat-layout { grid-template-columns: 220px minmax(0, 1fr); gap: var(--g6); }
  .cat-layout:not(:has(.filters)) { grid-template-columns: minmax(0, 1fr); }
}
.fournir, .intro-sec, .about, .fam-brands { max-width: 34em; } /* environ 66 caractères de Barlow (V36) */
.fournir { padding: var(--g5); background: var(--card); border: var(--b-2); border-radius: var(--r); }
.fournir ul, .signes { margin: var(--g3) 0 0; padding-left: 1.2em; }
.fournir li, .signes li { color: var(--ink-2); }
.fournir li + li, .signes li + li { margin-top: var(--g2); }
.fournir-alt, .about-note { margin-top: var(--g3); font-size: .9375rem; color: var(--ink-2); }
.intro-sec p, .fam-brands p { margin-top: var(--g3); color: var(--ink-2); }
.fam-brands a { font-weight: 600; color: var(--ink); }
.faq { padding-top: var(--g5); border-top: var(--b-2); }
.faq-g { margin-top: var(--g4); display: grid; gap: var(--g5); }
.faq-i h3 { font: 700 1rem/1.3 var(--f-body); }
.faq-i p { margin-top: var(--g2); font-size: .9375rem; color: var(--ink-2); max-width: 60ch; }
@media (min-width: 1060px) { .faq-g { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* /pieces/ : recherche en grand, tri, pagination en liens */
.bigsearch { margin: 0 0 var(--g4); max-width: 760px; }
.bigsearch-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--g2); }
.bigsearch .field { min-height: var(--h); border: var(--b-strong); }
.bigsearch .btn { min-height: var(--h); }
.bigsearch .btn span { display: none; }
@media (max-width: 767px) { .page-pieces .bigsearch { display: none; } }
@media (min-width: 768px) { .bigsearch .btn span { display: inline; } }
.sort { display: flex; align-items: center; gap: var(--g2); font-size: .9375rem; }
.sort select { height: var(--h-sm); padding: 0 var(--g3); border: var(--b-2); border-radius: var(--r); background: var(--white); font-size: 1rem; }
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g2); padding-top: var(--g4); }
.pager ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--g1); }
.pager li[aria-hidden] { display: grid; place-items: center; min-height: 44px; padding: 0 var(--g1); color: var(--ink-3); }
.pager a, .pager span[aria-current] { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 var(--g3); border: var(--b-2); border-radius: var(--r); text-decoration: none; font-weight: 700; color: var(--ink); }
@media (hover: hover) { .pager a:hover { border-color: var(--ink); } }
.pager li[aria-hidden] { display: grid; place-items: center; min-height: 44px; padding: 0 var(--g1); color: var(--ink-3); } /* « … » centré (V23) */
.pager span[aria-current] { background: var(--ink); color: var(--card); border-color: var(--ink); }
.empty { padding: var(--g5) 0; display: grid; gap: var(--g4); }
.empty h2 { font: 800 var(--t-h2-bloc)/1.1 var(--f-disp); } /* /suivi/ sans commande (V33) */
.empty p { color: var(--ink-2); max-width: 60ch; }
.empty-deals { padding: var(--g5); border: 1px dashed var(--line-2); border-radius: var(--r); }
.deals-page { margin-top: var(--g4); }
.deals-more { margin: var(--g5) 0; color: var(--ink-2); }
.deals-more a { font-weight: 700; color: var(--ink); }

/* ---------- Bon de demande en 3 étapes (DESIGN 3.13) ---------- */
.dem-sec { padding: var(--section-y) 0; border-top: var(--b); scroll-margin-top: var(--g3); }
.page-demande .dem-sec { border-top: 0; padding-top: 0; }
.dem-head { margin-bottom: var(--g5); max-width: 64ch; }
.dem-head p { margin-top: var(--g2); color: var(--ink-2); }
.dem { display: grid; gap: var(--g5); align-items: start; }
.dem-form { background: var(--card); border: var(--b-2); border-radius: var(--r); padding: var(--g4); min-width: 0; }
.dem-bar { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--g1); margin-bottom: var(--g4); counter-reset: s; }
@media (min-width: 768px) { .dem-bar { display: none; } } /* les trois étapes sont visibles et numérotées (V26) */
.dem-bar li { counter-increment: s; padding-top: var(--g2); border-top: 4px solid var(--line); font-size: var(--t-micro); font-weight: 700; color: var(--ink-3); }
.dem-bar li::before { content: counter(s) ". "; }
.dem-bar li.is-on { border-color: var(--ink); color: var(--ink); }
.dem-bar li.is-done { border-color: var(--on); color: var(--on); }
.dem-step { border: 0; margin: 0; padding: 0; min-width: 0; }
.dem-step legend { float: left; display: flex; align-items: center; gap: var(--g3); width: 100%; padding: 0; font: 800 1.375rem/1.1 var(--f-disp); margin-bottom: var(--g3); }
.dem-step > :not(legend) { clear: both; }
.dem-n, .dem-mini-t .dem-n { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--card); font: 700 1rem/1 var(--f-body); flex: none; }
.dem-step.is-done .dem-n { background: var(--on); }
.dem-recap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g1) var(--g3); margin-bottom: var(--g3); padding: var(--g2) var(--g3); background: var(--on-bg); color: var(--ink); border-radius: var(--r); font-size: .9375rem; }
.dem-recap button { margin-left: auto; }
.dem-sel { grid-template-columns: minmax(0, 1fr); }
.dem-sel .vsel-f { margin-top: 0; }
.dem-or { margin-top: var(--g2); font-size: .9375rem; }
.dem-or a, .dem-or button { font-weight: 700; color: var(--ink); min-height: 44px; display: inline-flex; align-items: center; }
.dem-next { margin-top: var(--g5); min-height: var(--h-lg); }
.dem-two { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--g2); }
.dem-two .fld { margin-top: var(--g4); }
.dem-mini-row { margin-top: var(--g2); }
.dem-mini-row .fld { margin-top: var(--g2); }
.sugg { list-style: none; display: flex; gap: var(--g2); overflow-x: auto; scrollbar-width: none; margin: var(--g3) calc(-1 * var(--g4)) 0; padding: 0 var(--g4); }
.sugg::-webkit-scrollbar { display: none; }
.sugg button { min-height: 44px; padding: 0 var(--g3); border: var(--b-2); border-radius: var(--r); background: var(--white); color: var(--ink); font-weight: 600; font-size: .875rem; white-space: nowrap; }
@media (hover: hover) { .sugg button:hover, .photo:hover { border-color: var(--ink); } }
.photo { display: flex; align-items: center; gap: var(--g3); margin-top: var(--g4); min-height: var(--h); padding: 0 var(--g4); border: 1px dashed var(--line-2); border-radius: var(--r); font-weight: 600; cursor: pointer; }
.photo i { margin-left: auto; font-style: normal; font-weight: 400; font-size: .875rem; color: var(--ink-3); }
.photo svg { width: 20px; height: 20px; }
input[type="file"]:focus-visible + .photo-note, .photo:focus-within { outline: 3px solid var(--focus); }
.photo-note { margin-top: var(--g2); font-size: .875rem; color: var(--ink-2); }
.seg { border: 0; margin: var(--g4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--g2); min-width: 0; }
.seg legend { width: 100%; padding: 0; }
.seg label span { display: inline-flex; align-items: center; min-height: var(--h-sm); padding: 0 var(--g4); border: var(--b-2); border-radius: var(--r); background: var(--white); font-weight: 600; cursor: pointer; }
.seg input:checked + span { border: 2px solid var(--ink); box-shadow: inset 0 -3px 0 var(--jaune); }
.seg input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.how { display: grid; grid-template-columns: 1fr 1fr; gap: var(--g2); }
.how-opt { display: flex; flex-direction: column; gap: 2px; padding: var(--g3); border: var(--b-2); border-radius: var(--r); cursor: pointer; min-height: 44px; }
.how-opt span { font-size: .8125rem; color: var(--ink-2); }
.how-opt:has(input:checked) { border: 2px solid var(--ink); padding: calc(var(--g3) - 1px); }
.how-opt:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.dem-form .btn-wa { margin-top: var(--g5); min-height: var(--h-lg); }
.dem-form .btn-wa + .btn-line { margin-top: var(--g2); }
.dem-legal { margin-top: var(--g3); font-size: var(--t-micro); color: var(--ink-3); }
.dem-sent { display: grid; gap: var(--g3); }
.ok-band { display: flex; align-items: center; gap: var(--g2); padding: var(--g3); background: var(--on-bg); color: var(--ink); font-weight: 700; border-radius: var(--r); }
.ok-band svg { color: var(--on); }
.dem-side { min-width: 0; }
.msg { margin-top: var(--g3); background: var(--msg); border: 1px solid var(--msg-line); border-radius: 8px 8px 8px 2px; padding: var(--g4); font-size: .9375rem; color: var(--ink); }
.msg p + p { margin-top: var(--g2); }
.facts { margin: var(--g4) 0 0; border-top: var(--b-2); }
.facts > div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: var(--g3); padding: var(--g3) 0; border-bottom: var(--b); font-size: .9375rem; }
.facts dt { font-weight: 700; }
.facts dd { color: var(--ink-2); }
.facts dd a { font-weight: 700; color: var(--ink); }
.facts-wide > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
@media (max-width: 767px) {
  .dem-form { padding: var(--g4); } /* aligné sur la grille, plus de débordement de 4 px (V39) */
  .dem-n { display: none !important; } /* la barre d'étapes numérote déjà (V26) */
  .dem-form .dem-step { display: none; }
  .dem-form .dem-step.is-current, .dem-form:not([data-js]) .dem-step[data-step="1"] { display: block; }
  .dem-form[data-js] .dem-step.is-done:not(.is-current) { display: block; }
  .dem-form[data-js] .dem-step.is-done:not(.is-current) .dem-body, .dem-form[data-js] .dem-step.is-done:not(.is-current) legend { display: none; }
  .dem-side .facts { display: none; }
}
@media (min-width: 768px) {
  .dem-form { padding: var(--g6); }
  .dem-step + .dem-step { margin-top: var(--g5); padding-top: var(--g5); border-top: var(--b); }
  .dem-step legend { font-size: 1.5rem; margin-bottom: var(--g4); }
  .dem-sel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dem-step .dem-next { display: none; }
  .dem-recap { display: none !important; }
  .sugg { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding: 0; }
  .how-opt span { font-size: .875rem; }
}
@media (min-width: 1060px) {
  .dem { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--g7); }
  .dem-side { position: sticky; top: var(--g4); }
}
.dem-after { display: grid; gap: var(--g5); padding-bottom: var(--section-y); }
.dem-fig { max-width: 420px; }
.dem-fams p { margin-top: var(--g2); color: var(--ink-2); max-width: 64ch; }
.links-cols { list-style: none; margin-top: var(--g3); columns: 2; column-gap: var(--g5); }
.links-cols a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 600; }
@media (min-width: 768px) { .links-cols { columns: 3; } .dem-after { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--g7); align-items: start; } }

/* ---------- Plaques d'immatriculation (seule page qui dessine une plaque) ---------- */
.plq { display: grid; gap: var(--g5); align-items: start; padding-bottom: var(--g6); }
.plq-call { background: var(--jaune); color: var(--ink); border-radius: var(--r); padding: var(--g5); }
.plq-call p { margin-top: var(--g2); }
.plq-call :focus-visible { outline-color: var(--focus-jaune); }
.btn-call { margin-top: var(--g4); min-height: 56px; font-size: 1.125rem; width: 100%; }
.btn-call:focus-visible { outline-color: var(--ink); }
.plq-form { margin-top: var(--g6); padding-top: var(--g5); border-top: var(--b-strong); }
.plq-form .h2b { margin-bottom: var(--g4); }
.plate { display: flex; align-items: stretch; width: 100%; max-width: 520px; aspect-ratio: 520 / 110; background: var(--white); border: 3px solid var(--ink); border-radius: var(--r-plate); overflow: hidden; }
.plate-eu, .plate-dep { flex: 0 0 9%; background: var(--eu); color: #FFFFFF; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4%; }
.plate-eu svg { width: 62%; height: auto; }
.plate-eu b, .plate-dep b { font: 700 clamp(.75rem, 2.4vw, 1.25rem)/1 var(--f-body); }
.plate-dep i { width: 56%; aspect-ratio: 1; border: 1.5px dashed rgba(255, 255, 255, .7); border-radius: 3px; }
.plate-num { flex: 1; display: flex; align-items: center; justify-content: center; font: 700 clamp(1.75rem, 8vw, 3.5rem)/1 var(--f-disp); letter-spacing: .04em; color: var(--ink); text-transform: uppercase; white-space: nowrap; }
.plate-num.is-empty { color: #8A8D93; }
.plate-note { margin: var(--g2) 0 0; font-size: var(--t-micro); color: var(--ink-3); }
.field-num { font: 700 1.375rem/1 var(--f-disp); letter-spacing: .06em; text-transform: uppercase; }
.plq-form .btn-wa { margin-top: var(--g5); min-height: 56px; }
.plq-form .btn-line { margin-top: var(--g2); }
.plq-side .facts { margin-top: var(--g3); }
.plq-more { display: grid; gap: var(--g6); padding-bottom: var(--section-y); }
.plq-sec { max-width: 58ch; }
.plq-call p { max-width: 56ch; }
.plq-sec p { margin-top: var(--g3); color: var(--ink-2); }
.plq-formats, .plq-steps, .plq-rules { list-style: none; margin-top: var(--g3); border-top: var(--b-2); }
.plq-formats li { display: grid; gap: var(--g1); padding: var(--g3) 0; border-bottom: var(--b); }
.plq-formats span { color: var(--ink-2); font-size: .9375rem; }
.plq-formats em { font-style: normal; justify-self: start; }
.plq-steps li, .plq-rules li { padding: var(--g3) 0; border-bottom: var(--b); color: var(--ink-2); }
.plq-rules b { color: var(--ink); }
@media (min-width: 1060px) {
  .plq { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--g7); }
  .plq-side { position: sticky; top: var(--g4); }
  .btn-call { width: auto; }
  .plq-formats li { grid-template-columns: 220px minmax(0, 1fr) auto; column-gap: var(--g4); align-items: baseline; }
}

/* ---------- Le magasin, livraison, garagistes ---------- */
.mag { display: grid; gap: var(--g6); padding-bottom: var(--g6); }
.mag-main { display: grid; gap: var(--g6); min-width: 0; }
.mag-contact { list-style: none; margin-top: var(--g3); border-top: var(--b); }
.mag-contact li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 2px var(--g3); padding: var(--g3) 0; border-bottom: var(--b); }
.mag-contact a { font-weight: 700; color: var(--ink); min-height: 44px; display: inline-flex; align-items: center; word-break: break-word; }
.mag-contact span { grid-column: 2; font-size: .875rem; color: var(--ink-2); }
.mag-acces p { margin-top: var(--g3); color: var(--ink-2); max-width: 56ch; }
.mag-acces .btn-row { margin-top: var(--g4); }
.mag-map { margin-top: var(--g4); }
.mag-facade img { width: 100%; border-radius: var(--r); }
.mag-more { display: grid; gap: var(--g6); padding-bottom: var(--section-y); }
.mag-sec p { margin-top: var(--g3); color: var(--ink-2); max-width: 64ch; }
.mag-list { list-style: none; margin-top: var(--g3); border-top: var(--b); }
.mag-list li { padding: var(--g3) 0; border-bottom: var(--b); color: var(--ink-2); }
.mag-list b { color: var(--ink); }
.mag-list a { font-weight: 700; color: var(--ink); white-space: nowrap; }
.mag-photos { display: grid; gap: var(--g4); }
.mag-photos img { width: 100%; border-radius: var(--r); }
.specs { width: 100%; max-width: 720px; margin-top: var(--g3); font-size: .9375rem; }
.specs th, .specs td { padding: var(--g2) var(--g3) var(--g2) 0; border-bottom: var(--b); text-align: left; vertical-align: top; }
.specs th { font-weight: 600; width: 40%; color: var(--ink); }
.specs td { color: var(--ink-2); }
@media (min-width: 768px) { .mag-photos { grid-template-columns: 3fr 2fr; align-items: start; } }
@media (min-width: 1060px) { .mag { grid-template-columns: minmax(0, 1fr) 420px; gap: var(--g7); align-items: start; } .mag-facade { position: sticky; top: var(--g4); } .mag-main { grid-template-columns: 1fr 1fr; } .mag-acces { grid-column: 1 / -1; } }
.liv-modes { list-style: none; display: grid; gap: var(--g5); padding-bottom: var(--g6); }
.liv-modes > li { padding-top: var(--g4); border-top: var(--b-strong); scroll-margin-top: var(--g4); }
@media (min-width: 1060px) { .liv-modes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g6); } }
.liv-zone { padding: var(--section-y) 0; border-top: var(--b); }
.liv-zone-in { display: grid; gap: var(--g5); }
.sec-lead { margin-top: var(--g2); color: var(--ink-2); max-width: 64ch; }
.communes { list-style: none; margin-top: var(--g4); columns: 2; column-gap: var(--g5); font-size: .9375rem; }
.communes li { padding: 6px 0; break-inside: avoid; scroll-margin-top: var(--g6); }
.communes li.is-hit { font-weight: 700; box-shadow: inset 3px 0 0 var(--jaune); padding-left: var(--g2); }
.liv-check { padding: var(--g4); border: var(--b-2); border-radius: var(--r); align-self: start; }
.liv-check .small { margin-top: var(--g2); }
@media (min-width: 768px) { .communes { columns: 3; } }
@media (min-width: 1060px) { .liv-zone-in { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--g7); } .communes { columns: 4; } .liv-check { position: sticky; top: var(--g4); padding: var(--g5); } }
.pro-page { display: grid; gap: var(--g6); padding-bottom: var(--section-y); }
.pro-page-main { display: grid; gap: var(--g6); min-width: 0; max-width: 720px; }
.pro-now p, .pro-form-sec > p { margin-top: var(--g2); color: var(--ink-2); }
.pro-now .btn-row { margin-top: var(--g4); }
.pro-form { margin-top: var(--g3); }
.pro-form .btn { margin-top: var(--g5); }
.pro-send { margin-top: var(--g4); display: grid; gap: var(--g3); }
.pro-send .btn { margin-top: 0; }
.pro-page-fig { max-width: 440px; }
@media (min-width: 1060px) { .pro-page { grid-template-columns: minmax(0, 1fr) 420px; gap: var(--g7); align-items: start; } .pro-page-fig { position: sticky; top: var(--g4); } }

/* Bloc magasin compact (DESIGN 3.16) */
.shopc { display: grid; gap: var(--g4); margin: var(--g6) 0 var(--section-y); padding: var(--g5) var(--g4); background: var(--card); border: var(--b); border-radius: var(--r); }
.shopc-addr { margin-top: var(--g2); font-weight: 600; }
.shopc .open { margin-top: var(--g1); }
.shopc-modes { list-style: none; display: grid; gap: var(--g2); font-size: .9375rem; }
.shopc-modes li { display: grid; gap: 0; }
.shopc-modes span { color: var(--ink-2); }
.shopc-act { display: flex; flex-wrap: wrap; gap: var(--g2); }
.shopc-act .btn { flex: 1 1 140px; }
@media (min-width: 1060px) { .shopc { grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) auto; align-items: center; gap: var(--g6); padding: var(--g5) var(--g6); } .shopc-act { flex-direction: column; } .shopc-act .btn { flex: none; } }

/* ---------- Panier, réservation, suivi ---------- */
.cartp, .co { display: grid; gap: var(--g5); align-items: start; padding-bottom: var(--section-y); }
.cartp-sum, .co-sum { padding: var(--g4); border: var(--b-2); border-radius: var(--r); background: var(--card); }
.cartp-sum .btn, .co-sum .btn { margin-top: var(--g4); }
.lines { list-style: none; border-top: var(--b-strong); }
.line { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--g2) var(--g3); padding: var(--g3) 0; border-bottom: var(--b); }
.line-img { width: 64px; height: 64px; object-fit: cover; border: var(--b); border-radius: var(--r); background: var(--white); }
span.line-img { display: block; background: var(--field-off); }
.line-name { font-weight: 700; line-height: 1.25; }
.line-name a { color: var(--ink); text-decoration: none; }
@media (hover: hover) { .line-name a:hover { text-decoration: underline; } }
.line-meta { font-size: .875rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.line-warn { font-size: .8125rem; color: var(--cmd); margin-top: 2px; }
.line-row { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--g2); }
.line-price { font-size: var(--t-micro); color: var(--ink-3); }
.qty { display: inline-flex; align-items: center; border: var(--b-2); border-radius: var(--r); }
.qty button { width: 44px; height: 44px; border: 0; background: var(--white); display: grid; place-items: center; color: var(--ink); }
.qty button svg { width: 24px; height: 24px; } /* tracés posés sur la grille de 24 : nets à 1x (V07) */
/* « − » à 1 désactivé et lisible comme tel, pas une case vide (audit visuel V10). */
.qty button:disabled { color: var(--ink-3); opacity: .45; cursor: not-allowed; }
.qty output { min-width: 32px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.qty-max { font-size: .8125rem; color: var(--ink-2); }
.line .qty-max { grid-column: 2; }
.sum-row, .sum-total { display: flex; justify-content: space-between; gap: var(--g3); padding: var(--g2) 0; border-bottom: var(--b); font-size: .9375rem; }
.sum-total { font-weight: 700; border-bottom: 0; }
.note { margin-top: var(--g3); font-size: .875rem; color: var(--ink-2); }
.sum-modes { list-style: none; margin-top: var(--g3); font-size: .875rem; color: var(--ink-2); }
.sum-modes li + li { margin-top: var(--g2); }
.co-form { padding: var(--g4); }
.co-opts { display: grid; gap: var(--g2); }
.co-opt { display: grid; gap: 2px; padding: var(--g3) var(--g4); border: var(--b-2); border-radius: var(--r); background: var(--white); text-align: left; cursor: pointer; min-height: 56px; }
.co-opt b { font-size: 1rem; }
.co-opt span { font-size: .875rem; color: var(--ink-2); }
.co-opt:has(input:checked) { border: 2px solid var(--ink); padding: calc(var(--g3) - 1px) calc(var(--g4) - 1px); box-shadow: inset 4px 0 0 var(--jaune); }
.co-opt:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.co-recap { display: grid; gap: var(--g2); padding: var(--g4); background: var(--msg); border: 1px solid var(--msg-line); border-radius: 8px 8px 8px 2px; }
.co-actions { display: grid; gap: var(--g2); margin-top: var(--g4); }
@media (min-width: 768px) { .co-form { padding: var(--g6); } }
@media (min-width: 1060px) { .cartp, .co { grid-template-columns: minmax(0, 1fr) 380px; gap: var(--g7); } .cartp-sum, .co-sum { position: sticky; top: var(--g4); padding: var(--g5); } }
.trk { display: grid; gap: var(--g5); padding-bottom: var(--section-y); }
.trk-card { padding: var(--g4); border: var(--b-2); border-radius: var(--r); background: var(--card); display: grid; gap: var(--g3); }
.trk-card h2 { font: 800 1.375rem/1.1 var(--f-disp); }
.trk-card p { color: var(--ink-2); }
.track { list-style: none; border-left: 3px solid var(--line); margin-left: var(--g2); }
.track li { position: relative; padding: 0 0 var(--g4) var(--g4); color: var(--ink-3); font-weight: 600; }
.track li::before { content: ""; position: absolute; left: -9px; top: 4px; width: 15px; height: 15px; border-radius: 50%; background: var(--white); border: 3px solid var(--line); }
.track li.done { color: var(--ink); }
.track li.done::before { background: var(--on); border-color: var(--on); }
.track li.now { color: var(--ink); }
.track li.now::before { background: var(--jaune); border-color: var(--ink); }
.track small { display: block; font-weight: 400; color: var(--ink-3); }
.callout { padding: var(--g3) var(--g4); border-radius: var(--r); background: var(--on-bg); color: var(--ink); display: grid; gap: 2px; }
.badge { font-size: var(--t-micro); font-weight: 700; padding: 2px var(--g2); border: var(--b-2); border-radius: var(--r); }
.trk-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--g2); }
.orders-list { list-style: none; border-top: var(--b); }
.orders-list a { display: flex; justify-content: space-between; gap: var(--g3); padding: var(--g3) 0; border-bottom: var(--b); color: var(--ink); min-height: 44px; }
.check { display: flex; gap: var(--g2); align-items: flex-start; font-size: .9375rem; }
.check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--ink); }
.btn-danger { background: var(--card); color: var(--err); border-color: var(--err); }
@media (hover: hover) { .btn-danger:hover { background: var(--err); color: #FFFFFF; } }
.btn-danger:active { background: var(--err); color: #FFFFFF; }
@media (min-width: 1060px) { .trk { grid-template-columns: minmax(0, 1fr) 380px; gap: var(--g7); align-items: start; } }

/* ---------- Pages légales ---------- */
.legal { display: grid; gap: var(--g5); padding-bottom: var(--section-y); }
.toc { padding: var(--g4); border: var(--b); border-radius: var(--r); align-self: start; }
.toc-t { font-weight: 700; margin-bottom: var(--g2); }
.toc ol { list-style: none; }
.toc a { display: flex; align-items: center; min-height: 44px; color: var(--ink); font-size: .9375rem; }
.prose { max-width: 34em; }
.prose h3 { font: 700 1.0625rem/1.3 var(--f-body); margin: var(--g5) 0 var(--g2); color: var(--ink); } /* CGV (V33) */
.prose h2 { font: 800 var(--t-h2-bloc)/1.15 var(--f-disp); margin: var(--g6) 0 var(--g3); scroll-margin-top: var(--g4); }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose ul, .prose ol { margin-top: var(--g3); color: var(--ink-2); }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: var(--g2); }
.prose table { width: 100%; margin-top: var(--g3); font-size: .9375rem; }
.prose th, .prose td { padding: var(--g2) var(--g3) var(--g2) 0; border-bottom: var(--b); text-align: left; vertical-align: top; }
.prose th { width: 34%; font-weight: 600; }
.prose a { color: var(--ink); font-weight: 600; }
@media (min-width: 1060px) { .legal { grid-template-columns: 280px minmax(0, 1fr); gap: var(--g7); } .toc { position: sticky; top: var(--g4); } }
.e404 { padding-bottom: var(--section-y); }
.e404 > p { color: var(--ink-2); }
.e404 > p a { font-weight: 700; color: var(--ink); }

/* ---------- Fiche pièce (DESIGN 3.10) ---------- */
.pp { display: grid; gap: var(--g5); padding: var(--g2) 0 var(--g6); }
.pp-info { display: grid; gap: var(--g3); min-width: 0; align-content: start; }
@media (max-width: 767px) { .pp-buy { order: 1; } .pp-compat { order: 2; } .pp-info > :not(.pp-buy):not(.pp-compat) { order: 0; } }
.pp-brand { font-size: var(--t-brand); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.pp-title { font: 800 var(--t-h1-page)/1.04 var(--f-disp); letter-spacing: -.01em; }
.pp-title .pp-mk { display: block; font-size: .62em; line-height: 1.15; color: var(--ink-2); font-weight: 700; margin-top: var(--g1); }
.pp-codes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g1) var(--g3); font-size: .9375rem; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.pp-codes b { color: var(--ink); }
.pp-codes button { min-height: 44px; }
.pp-buy { display: grid; gap: var(--g3); padding: var(--g4); background: var(--card); border: var(--b-strong); border-radius: var(--r); }
.pp-price { font-size: .9375rem; color: var(--ink-2); }
.pp-price b { font: 700 2rem/1 var(--f-disp); color: var(--ink); }
.pp-actions { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--g2); align-items: center; }
/* Quantité et « Réserver » à la même hauteur, 48 px (audit visuel V19) : 46 px de bouton + 2 px de bordure. */
.pp-actions .btn { min-height: 48px; }
.pp-actions .qty button { height: 46px; }
.pp-help { font-size: .9375rem; color: var(--ink-2); }
.pp-help a { font-weight: 700; color: var(--ink); }
.pp-compat { display: grid; gap: var(--g2); padding: var(--g3) var(--g4); border-left: 4px solid var(--jaune); background: var(--white); font-size: .9375rem; box-shadow: inset 0 0 0 1px var(--line); }
.pp-compat b { display: block; }
.pp-compat.is-ok { border-left-color: var(--on); }
.pp-compat .btn-row { gap: var(--g2); }
.pp-modes { list-style: none; border-top: var(--b); }
.pp-modes li { display: grid; gap: 0; padding: var(--g2) 0; border-bottom: var(--b); font-size: .9375rem; }
.pp-modes span { color: var(--ink-2); }
.pp-photo { order: 2; }
.pp-modes { order: 3; }
.pp-nophoto { display: grid; place-items: center; aspect-ratio: 1; max-width: 560px; background: var(--field-off); color: var(--ink-3); border-radius: var(--r); }
.pp-photo img { width: 100%; max-width: 560px; aspect-ratio: 1; object-fit: cover; background: var(--white); border: var(--b); border-radius: var(--r); }
.pp-more { display: grid; gap: var(--g6); padding-bottom: var(--g6); }
.pp-more .specs { max-width: none; }
.related { padding: var(--g6) 0 var(--section-y); border-top: var(--b); }
.related-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--g3); margin-bottom: var(--g4); }
.related-head h2 { font: 800 var(--t-h2)/1.05 var(--f-disp); }
.pp-fit details { border-bottom: var(--b); }
.pp-fit summary { min-height: 44px; display: flex; align-items: center; gap: var(--g2); font-weight: 700; cursor: pointer; }
.pp-fit ul { list-style: none; padding-bottom: var(--g3); }
.pp-fit li { padding: 4px 0; font-size: .9375rem; color: var(--ink-2); }
@media (min-width: 768px) {
  .pp { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--g6); align-items: start; }
  .pp-photo { order: 0; grid-column: 1; grid-row: 1 / span 2; position: sticky; top: var(--g4); }
  .pp-info { grid-column: 2; grid-row: 1; }
  .pp-modes { grid-column: 2; grid-row: 2; }
  .pp-more { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--g7); }
}

/* ---------- Pied de page (DESIGN 3.18) ---------- */
.foot { background: var(--ink); color: var(--on-dark); padding: var(--g7) 0 var(--g5); margin-top: 0; }
.foot-grid { display: grid; gap: var(--g6); }
/* Titres de colonne en blanc, 16 px, au-dessus des liens qu'ils annoncent : « .foot .foot-t » passe devant « .foot p »
   qui les mettait en 15 px gris sur toutes les pages (V32). */
.foot .foot-t { font: 700 1.0625rem/1.2 var(--f-disp); color: var(--on-dark); margin-bottom: var(--g2); }
.foot ul { list-style: none; }
.foot a, .foot-btn { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-dark); text-decoration: none; font-size: .9375rem; }
@media (hover: hover) { .foot a:hover, .foot-btn:hover { text-decoration: underline; } .foot .foot-logo:hover { text-decoration: none; } }
/* Étiquette du magasin en tête du bas de page (V13). */
.foot-logo { display: inline-flex; align-items: center; gap: var(--g3); justify-self: start; min-height: 44px; }
.foot-logo .logo-tag { font-size: 1.375rem; }
.foot .foot-logo .logo-sub { color: var(--on-dark-2); white-space: nowrap; }
.foot-btn { background: none; border: 0; padding: 0; font: inherit; font-size: .9375rem; }
.foot p { color: var(--on-dark-2); font-size: .9375rem; margin-bottom: var(--g2); }
.foot-fams ul { columns: 2; column-gap: var(--g4); }
.foot-fams a { min-height: 44px; }
.foot-bottom { display: grid; gap: var(--g3); margin-top: var(--g6); padding-top: var(--g4); border-top: 1px solid var(--line-dark); font-size: .8125rem; color: var(--on-dark-2); }
.foot-bottom p { font-size: .8125rem; margin: 0; }
.foot-social { display: flex; flex-wrap: wrap; gap: 0 var(--g4); align-items: center; }
.foot-social li { min-height: 44px; display: inline-flex; align-items: center; gap: var(--g1); }
.foot .todo { background: var(--todo-dark-bg); color: var(--todo-dark); }
/* À partir de 768, colonnes côte à côte : lignes de 32 px (DESIGN 3.18 ne demande 44 qu'au téléphone) et première ligne
   de l'adresse au niveau du premier lien des colonnes voisines (V41). */
@media (min-width: 768px) {
  .foot a, .foot-btn, .foot-fams a { min-height: 32px; }
  .foot-shop > .foot-t + p { padding-top: 4px; }
}
@media (min-width: 768px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-bottom { grid-template-columns: 1fr auto; align-items: center; } }
@media (min-width: 1060px) { .foot-grid { grid-template-columns: 2fr 1fr 1.3fr 1.2fr; gap: var(--g6); } .foot-fams ul { columns: 2; } }
/* Pied de page au téléphone (audit du 28/10, n° 34) : 6 familles puis un lien vers les 20, au lieu de la liste entière. */
.foot-fams-all { display: none; }
@media (max-width: 767px) {
  .foot-fams li:nth-child(n + 7) { display: none; }
  .foot .foot-fams-all { display: block; margin: 0; }
  .foot-fams-all a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
  /* Le magasin d'abord, puis « Commander » et « Informations » côte à côte, puis les familles. */
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--g4); }
  .foot-fams, .foot-shop { grid-column: 1 / -1; }
  .foot-shop { order: -1; }
  .foot-fams { order: 5; }
}

/* ---------- Barre basse mobile (DESIGN 3.17) ---------- */
.mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-mbar); display: grid; grid-template-columns: repeat(3, 1fr); background: var(--ink); color: var(--on-dark); padding-bottom: env(safe-area-inset-bottom); }
.mbar a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: var(--mbar-h); text-decoration: none; font-weight: 600; font-size: var(--t-micro); color: var(--on-dark); border-right: 1px solid var(--line-dark); }
.mbar svg { width: 24px; height: 24px; }
.mbar .mbar-cart { background: var(--jaune); color: var(--ink); border-right: 0; }
.mbar .mbar-cart:focus-visible { outline-color: var(--ink); outline-offset: -4px; }
.mbar .count { top: 6px; right: calc(50% - 26px); background: var(--ink); color: var(--jaune); box-shadow: none; }
@media (min-width: 768px) { .mbar { display: none; } body { padding-bottom: 0; } }

/* ---------- Tiroir panier et panneau véhicule ---------- */
dialog { padding: 0; border: 0; color: var(--ink); background: var(--card); max-width: none; max-height: none; }
dialog::backdrop { background: rgba(11, 11, 11, .55); }
.drawer { position: fixed; inset: 0 0 0 auto; width: min(420px, 100%); height: 100%; margin: 0; box-shadow: var(--shadow-drawer); }
.drawer[open] { animation: drawer-in var(--t-drawer) var(--ease); }
@keyframes drawer-in { from { transform: translateX(100%); } }
.drawer-in { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; gap: var(--g3); min-height: 60px; padding: 0 var(--g4); border-bottom: var(--b); }
.sheet-head .act { border-color: var(--line-2); }
.sheet-t { font: 800 1.375rem/1.1 var(--f-disp); }
.drawer-body { overflow-y: auto; padding: var(--g4); }
.drawer-foot { padding: var(--g4); border-top: var(--b); display: grid; gap: var(--g2); }
.drawer-foot:empty { display: none; }
.drawer .lines { border-top: 0; }
.added { padding: var(--g2) var(--g3); background: var(--on-bg); border-radius: var(--r); font-weight: 600; font-size: .9375rem; margin-bottom: var(--g3); }
.drawer-empty { display: grid; gap: var(--g3); justify-items: start; }
.vdlg { width: min(520px, 100% - 32px); margin: auto; border-radius: var(--r); }
.vdlg-body { padding: var(--g4); display: grid; gap: var(--g3); }
.vdlg-cur { padding: var(--g2) var(--g3); background: var(--on-bg); border-radius: var(--r); font-weight: 600; }
.vsel-dlg { grid-template-columns: minmax(0, 1fr); }
.vsel-dlg .vsel-f { display: block !important; grid-column: 1; }
.vsel-dlg .vsel-go { grid-column: 1; grid-row: auto; width: 100%; }
.vsel-dlg .vsel-back { display: none; }
.vdlg-alt { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--g2); font-size: .9375rem; }
.vdlg-alt a { font-weight: 700; color: var(--ink); min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 767px) { .vdlg { width: 100%; height: 100%; margin: 0; border-radius: 0; } }

/* ---------- Message éphémère et bandeau de consentement ---------- */
.toast { position: fixed; left: 50%; bottom: calc(var(--mbar-h) + 16px + env(safe-area-inset-bottom)); z-index: var(--z-toast); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; max-width: min(92vw, 460px); padding: var(--g3) var(--g4); background: var(--ink); color: var(--on-dark); border-radius: var(--r); font-weight: 600; font-size: .9375rem; transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { background: var(--err); }
@media (min-width: 768px) { .toast { bottom: var(--g5); } }
.consent { position: fixed; left: 0; right: 0; bottom: calc(var(--mbar-h) + env(safe-area-inset-bottom)); z-index: var(--z-toast); background: var(--card); color: var(--ink); border-top: var(--b-strong); padding: var(--g3) 0; box-shadow: 0 -12px 24px -16px rgba(11, 11, 11, .35); }
.consent-in { display: grid; gap: var(--g3); }
.consent-title { font: 800 1.125rem/1.1 var(--f-disp); }
.consent-text { font-size: .875rem; color: var(--ink-2); margin-top: var(--g1); }
.consent-text a { color: var(--ink); font-weight: 700; }
.consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--g2); }
/* « Refuser » et « Accepter » au même poids (D9, refuser aussi simple qu'accepter) : même bouton bordé, même hauteur. */
.consent-btn { min-height: var(--h); border: var(--b-strong); border-radius: var(--r); background: var(--card); color: var(--ink); font-weight: 700; transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
@media (hover: hover) { .consent-btn:hover { background: var(--ink); color: var(--card); } }
@media (min-width: 768px) { .consent { bottom: 0; } .consent-in { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .consent-actions { grid-template-columns: auto auto; } .consent-btn { padding: 0 var(--g5); } }

/* ---------- Techniques récentes, toujours avec repli ---------- */
@supports (field-sizing: content) { textarea.field { field-sizing: content; min-height: 96px; } }
@supports selector(:has(*)) {
  body:has(.mmenu:not([hidden])), body:has(.filters.is-open) { overflow: hidden; }
}
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vt-out .14s ease both; }
  ::view-transition-new(root) { animation: vt-in .18s ease both; }
  @keyframes vt-out { to { opacity: 0; } }
  @keyframes vt-in { from { opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Suivi de commande (tracking.js, repris de la v1) */
.co-panel { display: grid; gap: var(--g4); min-width: 0; }
.summary { padding: var(--g4); border: var(--b-2); border-radius: var(--r); background: var(--card); display: grid; gap: var(--g2); align-content: start; }
.summary h2 { font: 800 1.375rem/1.1 var(--f-disp); }
.sum-items { list-style: none; border-top: var(--b); }
.sum-items li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--g3); padding: var(--g2) 0; border-bottom: var(--b); font-size: .9375rem; }
.sum-items small { grid-column: 1 / -1; color: var(--ink-2); }
.sendbox, .actions { display: grid; gap: var(--g2); }
.sendbox-note, .note-legal { font-size: .875rem; color: var(--ink-2); }
.trk-card label.field { display: grid; gap: var(--g1); min-height: 0; padding: 0; border: 0; }
.trk-card label.field span { font-weight: 600; font-size: .9375rem; }
.trk-card label.field input { min-height: var(--h); padding: 0 var(--g3); border: var(--b-2); border-radius: var(--r); font-size: 1rem; }
.chat-error { color: var(--err); font-weight: 600; font-size: .875rem; }
.line-sum { grid-template-columns: minmax(0, 1fr); gap: 2px; }

/* ---------- Parcours d'achat : correctifs du 28/10/2026 (audit parcours ; visuel V10, V19, V20, V35) ---------- */
/* Numéros de téléphone jamais coupés sur deux lignes (n° 42, V35). */
a[href^="tel:"] { white-space: nowrap; }
/* Fiche : vignette au premier écran sous 768 px (n° 31), photo zoomable (n° 30), véhicules de la boîte (n° 33), panier (n° 34). */
.pp-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--g3); align-items: start; }
.pp-thumb { display: block; width: 72px; height: 72px; border: var(--b); border-radius: var(--r); background: var(--white); overflow: hidden; cursor: zoom-in; }
.pp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pp-zoom { position: relative; display: block; max-width: 560px; cursor: zoom-in; }
.pp-zoom-tag { position: absolute; right: var(--g2); bottom: var(--g2); padding: 2px var(--g2); background: var(--ink); color: var(--on-dark); border-radius: var(--r); font-size: var(--t-micro); font-weight: 700; }
@media (min-width: 768px) { .pp-head { grid-template-columns: minmax(0, 1fr); } .pp-thumb { display: none; } }
.pp-box { font-size: .875rem; color: var(--ink-2); }
.pp-incart { font-size: .9375rem; color: var(--ink-2); }
.pp-incart b { color: var(--on); }
.zoom { width: 100%; height: 100%; margin: 0; }
.zoom[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.zoom-body { min-height: 0; overflow: auto; display: grid; place-items: center; padding: var(--g3); background: var(--white); overscroll-behavior: contain; }
.zoom-body img { max-width: 100%; max-height: 100%; width: auto; height: auto; cursor: zoom-in; }
.zoom.is-full .zoom-body { place-items: start; }
.zoom.is-full .zoom-body img { max-width: none; max-height: none; cursor: zoom-out; }
.zoom-hint { padding: var(--g2) var(--g4) calc(var(--g2) + env(safe-area-inset-bottom)); font-size: .875rem; color: var(--ink-2); border-top: var(--b); }
.related-cmd { margin-top: var(--g3); max-width: 68ch; color: var(--ink-2); }
.related-cmd a { color: var(--ink); font-weight: 600; }
/* Panier : ligne retirée avec « Annuler » (n° 40), état « Au magasin » sur chaque ligne (revue 2.1 n° 8). */
.line-undo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--g3); padding: var(--g2) 0; border-bottom: var(--b); font-size: .9375rem; color: var(--ink-2); }
.line-st { margin-top: 2px; line-height: 1.2; }
.drawer-continue { justify-self: center; }
/* Panier sous 768 px : « Valider ma réservation » collé au-dessus de la barre basse (n° 39). */
.cart-bar { position: fixed; left: 0; right: 0; bottom: calc(var(--mbar-h) + env(safe-area-inset-bottom)); z-index: calc(var(--z-mbar) - 1); display: flex; align-items: center; justify-content: space-between; gap: var(--g3); padding: var(--g2) var(--gutter); background: var(--card); border-top: var(--b-strong); transition: transform var(--t-fast) var(--ease), visibility var(--t-fast); }
.cart-bar-t { display: grid; min-width: 0; font-size: .8125rem; line-height: 1.3; color: var(--ink-2); }
.cart-bar-t b { font-size: .9375rem; color: var(--ink); }
.cart-bar .btn { flex: none; padding: 0 var(--g4); }
.cart-bar.is-off { transform: translateY(110%); visibility: hidden; }
body.has-cart-bar { padding-bottom: calc(var(--mbar-h) + 72px + env(safe-area-inset-bottom)); }
body.has-cart-bar .toast { bottom: calc(var(--mbar-h) + 88px + env(safe-area-inset-bottom)); }
@media (min-width: 768px) { .cart-bar { display: none; } body.has-cart-bar { padding-bottom: 0; } body.has-cart-bar .toast { bottom: var(--g5); } }
/* Réservation : lignes au récapitulatif sous 1060 px (n° 45), dernière étape annoncée (D5), tuiles compactes (n° 54). */
.co-recap-lines { list-style: none; display: grid; gap: 2px; font-size: .9375rem; }
.co-recap-lines small { display: block; color: var(--ink-2); font-size: .8125rem; }
@media (min-width: 1060px) { .co-recap-lines { display: none; } }
.co-recap-warn { color: var(--cmd); }
.co-recap-warn .linkish { display: inline; min-height: 0; }
.co-next { margin-top: var(--g4); padding: var(--g3) var(--g4); border: var(--b-strong); border-radius: var(--r); background: var(--card); font-size: .9375rem; color: var(--ink-2); }
.co-next b { display: block; color: var(--ink); }
.commune-pick-w { white-space: nowrap; }
@media (max-width: 399px) {
  .co-opt { display: block; padding: var(--g2) var(--g3); min-height: 0; font-size: .8125rem; line-height: 1.4; }
  .co-opt:has(input:checked) { padding: calc(var(--g2) - 1px) calc(var(--g3) - 1px); }
  .co-opt b { font-size: .9375rem; }
  .co-opt b::after { content: "\00A0: "; }
  .co-opt span { font-size: .8125rem; }
  .co-form .dem-next { margin-top: var(--g4); }
}
/* Petit téléphone (375 × 667) : barre 1-2-3 resserrée (elle seule numérote les étapes sous 768 px) pour garder « Continuer » à l'écran. */
@media (max-width: 399px) and (max-height: 700px) {
  .co-form .dem-bar { margin-bottom: var(--g2); }
  .co-form .dem-bar li { padding-top: var(--g1); line-height: 1.3; }
  .co-form .co-opts { gap: 6px; }
}
/* Suivi : récapitulatif obligatoire en tête (D5), annulation en lien sobre (n° 58). */
.trk-send.is-required { border: var(--b-strong); }
.trk-send.is-required p b { color: var(--ink); }
.trk-cancel .linkish { color: var(--ink-2); font-weight: 600; }
.track li[aria-current="step"] { font-weight: 700; }

/* Pièces par modèle (pages en noindex tant que la compatibilité n'est pas renseignée) */
.vp-mine { margin-top: var(--g3); font-weight: 600; }
.vp-mine a { color: var(--ink); }
.vp-index { display: grid; gap: var(--g5); margin-top: var(--g5); padding-bottom: var(--g6); }
.vp-make { scroll-margin-top: var(--g4); }
.vp-models { list-style: none; margin-top: var(--g3); display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 var(--g5); }
.vp-models a { display: flex; justify-content: space-between; align-items: center; gap: var(--g3); min-height: 44px; border-bottom: var(--b); text-decoration: none; color: var(--ink); }
@media (hover: hover) { .vp-models a:hover b { text-decoration: underline; } }
.vp-sec { margin-top: var(--g6); }
.vp-engines { list-style: none; margin-top: var(--g3); border-top: var(--b); }
.vp-engine { display: flex; justify-content: space-between; align-items: center; gap: var(--g3); padding: var(--g2) 0; border-bottom: var(--b); }
.vp-engine.is-mine { box-shadow: inset 4px 0 0 var(--jaune); padding-left: var(--g3); }
.vp-sec .rail { margin-top: var(--g3); }

/* ---------- Revue du 28/10/2026 (corrections hors hero) ---------- */
/* Lignes pièce sous 768 : la mention de compatibilité n'apparaît que si un véhicule est choisi (classes posées par shop.js). */
/* « Compatibilité à vérifier » n'est plus répétée sur chaque ligne (constat 16) : la bande jaune le dit une fois. */
/* 404 : le titre ne touche plus le filet de la première ligne de familles. */
.fams-tight > .h2b + .fams-grid { margin-top: var(--g4); }
/* Magasin : libellé et valeur alignés sur la même ligne (la valeur est une cible de 44 px). */
.mag-contact b { display: flex; align-items: center; min-height: 44px; }
/* Livraison sous 1060 : le vérificateur de commune passe avant la liste des 51 communes. */
@media (max-width: 1059px) { .liv-check { order: -1; } }
/* Impression (pages légales, panier, suivi) : le texte seul, sans bandeau, menus, barre basse ni consentement. */
@media print {
  @page { margin: 16mm 14mm; }
  body { padding-bottom: 0; background: #fff; color: #000; font-size: 11pt; }
  .skip, .strip, .hdr .search, .hdr-actions, .nav, .mega, .mbar, .mmenu, .drawer, .vdlg, .consent, .toast, .toc, .foot-grid, .foot-social, .vbar, .dem-sec, .shopc-act { display: none !important; }
  .hdr { border-bottom: 1px solid #000; }
  .hdr-in { min-height: 0; padding: 0 0 var(--g2); }
  .logo { display: inline-flex; align-items: center; gap: var(--g3); }
  .logo-sub { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; font: 600 9pt/1.15 var(--f-body); color: #000; }
  .foot { background: none; color: #000; padding: var(--g4) 0 0; }
  .foot-bottom { margin-top: 0; border-top: 1px solid #000; color: #000; }
  .foot-bottom p { color: #000; }
  .legal { display: block; }
  .prose { max-width: none; }
  .prose p, .prose ul, .prose ol, .prose td, .prose th { color: #000; }
  .prose h2 { break-after: avoid; }
  .prose p, .prose li { orphans: 3; widows: 3; }
  .prose a[href^="http"]::after, .prose a[href^="mailto:"]::after { content: " (" attr(href) ")"; font-weight: 400; overflow-wrap: anywhere; }
  .todo { background: none; border: 1px solid #000; color: #000; }
}

/* Résultats de recherche sur téléphone : la bande véhicule s'efface pour que les pièces passent en premier (relecture du 28/10) */
@media (max-width: 767px) { main:has([data-q-results]) .vbar { display: none; } }