/* Bédarieux Automobiles — feuille unique
   Identité : charte graphique Peugeot NBi 2021 + charte digitale (kit officiel reçu le 16/09/2026).
   Couleurs : noir, blanc, Grey Light #F7F7F7, Electric blue #00A3E0 (avec parcimonie, jamais en texte).
   Police : Peugeot New (kit officiel) — Regular/Bold pour le site (charte digitale), Black pour les grands titres,
   ExtraLight en contrepoint des titres en capitales (charte graphique p. 32), Light pour les compléments. Sous-ensemble latin en WOFF2, généré par outils/identite_peugeot.py. */

@font-face { font-family: "Peugeot New"; src: url("../fonts/peugeot-new-extralight.woff2") format("woff2"); font-weight: 100 249; font-style: normal; font-display: swap; }
@font-face { font-family: "Peugeot New"; src: url("../fonts/peugeot-new-light.woff2") format("woff2"); font-weight: 250 349; font-style: normal; font-display: swap; }
@font-face { font-family: "Peugeot New"; src: url("../fonts/peugeot-new-regular.woff2") format("woff2"); font-weight: 350 549; font-style: normal; font-display: swap; }
@font-face { font-family: "Peugeot New"; src: url("../fonts/peugeot-new-bold.woff2") format("woff2"); font-weight: 550 849; font-style: normal; font-display: swap; }
@font-face { font-family: "Peugeot New"; src: url("../fonts/peugeot-new-black.woff2") format("woff2"); font-weight: 850 950; font-style: normal; font-display: swap; }
/* Repli métrique : Peugeot New est environ 32 % plus large qu'Arial */
@font-face { font-family: "Peugeot New repli"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"); size-adjust: 118%; ascent-override: 91%; descent-override: 23%; line-gap-override: 0%; }

@view-transition { navigation: auto; }

:root {
  --noir: #000;
  --encre: #0b0b0c;
  --anthracite: #151517;
  --blanc: #fff;
  --gris-50: #f7f7f7;
  --gris-100: #ececee;   /* Grey Light Deep — charte digitale */
  --gris-200: #dfe0e3;
  --gris-400: #adaeb2;   /* Grey Medium — texte secondaire sur noir (9,5:1) */
  --gris-600: #5d5e65;   /* texte secondaire sur blanc (6,4:1) — le Grey Dark #787B80 de la charte ne fait que 4,3:1 */
  --gris-fonce: #787b80; /* Grey Dark — filets et éléments non textuels */
  --bleu: #00a3e0;       /* Electric blue — aplats, filets, pictos, focus. Texte posé dessus : noir (7,3:1) */
  --sur-bleu: #000;      /* le blanc sur #00A3E0 n'atteint que 2,9:1 */
  --bleu-fonce: #000;    /* ancien bleu « texte » : la charte proscrit le bleu en texte sur noir et il est illisible en petit sur blanc */
  --bleu-clair: #fff;    /* ancien bleu « lien sur noir » : blanc (charte : pas de texte bleu sur fond noir) */
  --ok: #0a7a3d;
  --alerte: #b3261e;
  --ambre: #8a5a00;

  --f: "Peugeot New", "Peugeot New repli", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --large: 100%;         /* Peugeot New n'a qu'une chasse : les anciens réglages de largeur sont neutralisés */
  --moyen: 100%;

  --gouttiere: clamp(1rem, 4vw, 3rem);
  --max: 82rem;
  --rythme: clamp(4rem, 9vw, 8rem);
  --t-rapide: 180ms;
  --t: 420ms;
  --courbe: cubic-bezier(.2, .7, .1, 1);
  --barre-mobile: 0px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 6rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; font-family: var(--f); font-size: clamp(.9375rem, .9rem + .15vw, 1rem); line-height: 1.65; color: var(--encre); background: var(--blanc); font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; padding-bottom: var(--barre-mobile); }
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.05; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
address { font-style: normal; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--bleu); outline-offset: 3px; }
.bloc--noir :focus-visible, .entete :focus-visible, .pied :focus-visible, .hero__texte :focus-visible, .info :focus-visible { outline-color: var(--bleu); }
main:focus { outline: none; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.evitement { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .75rem 1rem; background: var(--bleu); color: var(--sur-bleu); font-weight: 700; transition: top var(--t-rapide); }
.evitement:focus { top: 1rem; }
.ic { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.enveloppe { width: min(100% - 2 * var(--gouttiere), var(--max)); margin-inline: auto; }
/* conteneurs de requête : les grands titres s'adaptent à leur colonne, jamais de débordement */
.enveloppe, .neuf__txt, .deux-col > div, .famille__txt, .services-accueil__tete, .acces > div, .fiche__infos, .vide, .texte-long { container-type: inline-size; }
.titre-1, .titre-2, .fiche__titre { overflow-wrap: break-word; }

/* ---------- Typographie ---------- */
.titre-1, .hero__titre, .fiche__titre, .titre-2, .pied__nom, .marque__nom, .porte__chiffre, .tarif__montant, .plaque dd, .achat__prix, .introuvable__code { font-stretch: var(--large); letter-spacing: -.005em; }
.titre-1 { font-size: min(clamp(2.25rem, 1.4rem + 4.2vw, 5rem), 10cqi); text-transform: uppercase; font-weight: 750; line-height: .98; }
.titre-2 { font-size: min(clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem), 10cqi); text-transform: uppercase; font-weight: 700; line-height: 1; margin-bottom: .6em; }
.titre-3 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); font-stretch: var(--moyen); font-weight: 650; margin-bottom: .6em; }
.chapo { font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); line-height: 1.5; font-weight: 400; }
.surtitre { display: flex; align-items: center; gap: .75rem; margin: 0 0 1.25rem; font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gris-400); }
.surtitre--sombre { color: var(--gris-600); }
.trait { width: 2.5rem; height: 2px; background: var(--bleu); flex: none; }
.note { font-size: .875rem; color: var(--gris-600); }
.note--clair { color: var(--gris-400); }
.aide { font-size: .875rem; color: var(--gris-600); margin: -.25rem 0 1.25rem; }
.compte { display: inline-grid; place-items: center; min-width: 1.8em; height: 1.8em; padding: 0 .4em; margin-left: .35em; font-size: .6em; background: var(--noir); color: #fff; vertical-align: .25em; font-stretch: 100%; }

/* ---------- Boutons & liens ---------- */
.btn { --bg: var(--noir); --fg: #fff; --bd: var(--bg); display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3rem; padding: .8rem 1.4rem; border: 2px solid var(--bd); background: var(--bg); color: var(--fg); font-weight: 700; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background var(--t-rapide), color var(--t-rapide), border-color var(--t-rapide), transform var(--t-rapide); border-radius: 0; white-space: normal; text-align: center; text-wrap: balance; }
.btn .ic { transition: transform var(--t-rapide) var(--courbe); }
.btn:hover .ic:last-child { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
/* CTA principal (charte digitale) : aplat Electric blue, survol noir. Libellé noir pour le contraste. */
.btn--bleu { --bg: var(--bleu); --fg: var(--sur-bleu); }
.btn--bleu:hover { --bg: var(--noir); --fg: #fff; }
.bloc--noir .btn--bleu:hover, .entete .btn--bleu:hover, .pied .btn--bleu:hover, .hero__texte .btn--bleu:hover { --bg: #fff; --fg: var(--noir); }
.btn--noir:hover { --bg: var(--bleu); --fg: var(--sur-bleu); }
.btn--blanc { --bg: #fff; --fg: var(--noir); }
.btn--blanc:hover { --bg: var(--bleu); --fg: var(--sur-bleu); }
.btn--contour { --bg: transparent; --fg: var(--noir); --bd: var(--noir); }
.btn--contour:hover, .btn--contour-noir:hover { --bg: var(--noir); --fg: #fff; --bd: var(--noir); }
.btn--contour-noir { --bg: transparent; --fg: var(--noir); --bd: var(--noir); }
.btn--large { min-height: 3.5rem; width: 100%; font-size: .875rem; }
.lien-fleche { display: inline-flex; align-items: center; gap: .5rem; font-weight: 650; text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: .2rem; white-space: nowrap; }
.lien-fleche .ic { transition: transform var(--t-rapide) var(--courbe); }
.lien-fleche:hover { border-bottom-color: var(--bleu); }
.lien-fleche:hover .ic { transform: translateX(4px); }
.bloc--noir .lien-fleche:hover, .lien-fleche--clair:hover, .pied .lien-fleche:hover { color: var(--bleu-clair); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 2rem; }

/* ---------- Bandeau d'information ---------- */
.info { background: var(--noir); color: var(--gris-400); font-size: .8125rem; border-bottom: 1px solid #222; }
.info__in { display: flex; align-items: center; gap: 1.5rem; min-height: 2.5rem; }
.info p { margin: 0; }
.info__agent { margin-right: auto !important; }
.info__tag { color: #fff; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; margin-right: .5rem; }
.info__tel { display: inline-flex; align-items: center; gap: .4rem; color: #fff; font-weight: 650; text-decoration: none; }
.info__tel:hover { color: var(--bleu-clair); }
.statut { display: inline-flex; align-items: center; gap: .5rem; color: #fff; }
.statut__point { width: .5rem; height: .5rem; border-radius: 50%; background: var(--gris-400); }
.est-ouvert .statut__point { background: #34d17b; box-shadow: 0 0 0 0 rgb(52 209 123 / .6); }
@media (prefers-reduced-motion: no-preference) { .est-ouvert .statut__point { animation: pouls 2.4s infinite; } }
@keyframes pouls { 70% { box-shadow: 0 0 0 .5rem rgb(52 209 123 / 0); } 100% { box-shadow: 0 0 0 0 rgb(52 209 123 / 0); } }
@media (max-width: 760px) { .info__agent { display: none; } .info__in { justify-content: space-between; } }

/* ---------- En-tête ---------- */
.entete { position: sticky; top: 0; z-index: 50; background: rgb(0 0 0 / .94); color: #fff; backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid #1f1f22; }
.entete__in { display: flex; align-items: center; gap: 2rem; min-height: 5rem; transition: min-height var(--t) var(--courbe); }
.entete.est-compacte .entete__in { min-height: 4rem; }
.marque { display: flex; align-items: center; gap: .9rem; text-decoration: none; margin-right: auto; }
@media (min-width: 1201px) { .marque { padding-right: 1rem; } }
.marque__blason, .pied__blason { flex: none; }
.marque__blason { width: 2.6rem; height: auto; transition: width var(--t) var(--courbe); }
.est-compacte .marque__blason { width: 2.15rem; }
.marque__nom { display: grid; gap: .15rem; font-size: 1rem; line-height: 1.1; font-weight: 750; text-transform: uppercase; letter-spacing: .02em; }
.marque__nom span:last-child { font-weight: 400; color: var(--gris-400); letter-spacing: .085em; font-size: .86em; }
.nav__liste { display: flex; align-items: center; gap: .25rem; }
.nav__liste a { position: relative; display: block; padding: .75rem .65rem; font-size: .875rem; font-weight: 550; white-space: nowrap; text-decoration: none; color: #e7e7ea; }
.nav__liste a::after { content: ""; position: absolute; left: .65rem; right: .65rem; bottom: .35rem; height: 2px; background: var(--bleu); transform: scaleX(0); transform-origin: left; transition: transform var(--t) var(--courbe); }
.nav__liste a:hover { color: #fff; }
.nav__liste a:hover::after, .nav__liste a[aria-current="page"]::after { transform: scaleX(1); }
.nav__liste a[aria-current="page"] { color: #fff; }
.nav__bouton, .nav__mobile-tel { display: none; }
.entete__cta { min-height: 2.75rem; padding-inline: 1.25rem; white-space: nowrap; }

@media (max-width: 1200px) {
  .entete__in { gap: .75rem; min-height: 4.25rem; }
  .entete__cta { display: none; }
  .nav__bouton { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .5rem .9rem; border: 1px solid #3a3a3f; background: transparent; color: #fff; cursor: pointer; font-weight: 600; }
  .nav__bouton .ic { width: 1.4rem; height: 1.4rem; }
  .nav__bouton .ic-fermer, .nav__bouton[aria-expanded="true"] .ic-ouvrir { display: none; }
  .nav__bouton[aria-expanded="true"] .ic-fermer { display: block; }
  .nav__liste { position: fixed; inset: var(--haut-menu, 6.75rem) 0 0 0; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 1rem var(--gouttiere) 6rem; background: var(--noir); overflow-y: auto; visibility: hidden; opacity: 0; transform: translateY(-.5rem); transition: opacity var(--t-rapide), transform var(--t) var(--courbe), visibility 0s linear var(--t); }
  .nav.est-ouverte .nav__liste { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .nav__liste a { padding: 1.1rem 0; font-size: clamp(1.5rem, 6vw, 2.25rem); font-stretch: var(--large); font-weight: 700; text-transform: uppercase; border-bottom: 1px solid #222; }
  .nav__liste a::after { display: none; }
  .nav__liste a[aria-current="page"] { color: #fff; box-shadow: inset 4px 0 0 var(--bleu); padding-left: 1rem; }
  .nav__mobile-tel { display: block; }
  .nav__mobile-tel a { display: flex; align-items: center; gap: .75rem; color: var(--bleu-clair); font-size: 1.35rem; border: 0; }
  body.menu-ouvert { overflow: hidden; }
}
@media (max-width: 380px) { .marque { gap: .6rem; } .marque__blason { width: 2.3rem; } .marque__nom { font-size: .875rem; } .nav__bouton { padding-inline: .7rem; } }

/* ---------- Hero (split) ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--noir); color: #fff; min-height: min(46rem, calc(100svh - 7.5rem)); }
.hero__texte { display: flex; flex-direction: column; justify-content: center; padding: clamp(3rem, 6vw, 5.5rem) clamp(1.5rem, 4vw, 4rem) clamp(2.5rem, 5vw, 4rem) max(var(--gouttiere), calc((100vw - var(--max)) / 2)); }
.hero__texte { container-type: inline-size; }
/* Grands titres en capitales : Peugeot Black + Peugeot ExtraLight (charte graphique, hiérarchie) */
.hero__titre { font-size: clamp(1.5rem, 9.2cqi, 5.5rem); text-transform: uppercase; font-weight: 900; line-height: .95; margin-bottom: 1.75rem; }
.hero__titre span { display: block; }
.hero__titre span:last-child { color: #fff; font-weight: 200; }
.hero__intro { max-width: 34rem; color: #d6d6da; font-size: clamp(1.05rem, .98rem + .35vw, 1.25rem); margin-bottom: 2.5rem; }
.portes { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #2a2a2e; border: 1px solid #2a2a2e; max-width: 40rem; }
.porte { position: relative; display: flex; flex-direction: column; gap: .35rem; padding: 1.4rem 1.3rem 1.3rem; min-height: 11rem; background: var(--noir); text-decoration: none; transition: background var(--t) var(--courbe); isolation: isolate; overflow: hidden; }
.porte::before { content: ""; position: absolute; inset: 0; background: var(--bleu); transform: translateY(101%); transition: transform var(--t) var(--courbe); z-index: -1; }
.porte:hover::before, .porte:focus-visible::before { transform: none; }
.porte__ic { display: grid; place-items: center; width: 3rem; height: 3rem; border: 1px solid #3a3a3f; margin-bottom: auto; }
.porte__ic .ic { width: 1.5rem; height: 1.5rem; }
.porte:hover, .porte:focus-visible { color: var(--sur-bleu); }
.porte:hover .porte__ic, .porte:focus-visible .porte__ic { border-color: rgb(0 0 0 / .45); }
.porte__chiffre { font-size: 3rem; font-weight: 800; line-height: 1; margin-bottom: auto; }
.porte__titre { font-weight: 700; font-size: 1.05rem; line-height: 1.2; }
.porte__txt { font-size: .8125rem; color: var(--gris-400); }
.porte:hover .porte__txt, .porte:focus-visible .porte__txt { color: var(--sur-bleu); }
.porte__fl { position: absolute; top: 1.3rem; right: 1.2rem; transition: transform var(--t) var(--courbe); }
.porte:hover .porte__fl { transform: translateX(4px); }
.hero__visuel { position: relative; overflow: hidden; }
.hero__visuel picture, .hero__img { width: 100%; height: 100%; }
.hero__img { object-fit: cover; object-position: 42% 40%; }
.hero__visuel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(0 0 0 / .55), rgb(0 0 0 / 0) 30%), linear-gradient(0deg, rgb(0 0 0 / .55), rgb(0 0 0 / 0) 35%); pointer-events: none; }
.totem { position: absolute; top: 0; bottom: 0; right: clamp(1rem, 3vw, 2.5rem); z-index: 1; margin: 0; display: flex; align-items: flex-start; width: clamp(3.2rem, 5vw, 4.4rem); background: var(--noir); padding: 1.5rem 0; }
.totem span { writing-mode: vertical-rl; transform: rotate(180deg); margin: auto; font-stretch: var(--large); font-weight: 750; font-size: clamp(.95rem, .8rem + .5vw, 1.3rem); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.hero__adresse { position: absolute; left: clamp(1rem, 3vw, 2.5rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 1; display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .875rem; font-weight: 600; letter-spacing: .04em; }
@media (max-width: 1000px) {
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero__visuel { order: -1; aspect-ratio: 16 / 9; }
  .hero__texte { padding-inline: var(--gouttiere); }
  .totem { display: none; }
}
@media (max-width: 520px) {
  .portes { grid-template-columns: minmax(0, 1fr); }
  .porte { min-height: 0; padding-right: 3rem; }
  .porte__ic, .porte__chiffre { margin-bottom: .5rem; }
  .porte__chiffre { font-size: 2.4rem; }
}

/* ---------- Blocs ---------- */
.bloc { padding-block: var(--rythme); }
.bloc--serre { padding-block: clamp(2.5rem, 5vw, 4.5rem) var(--rythme); }
.bloc--noir { background: var(--noir); color: #fff; }
.bloc--noir .chapo, .bloc--noir p { color: #d9d9dd; }
.bloc--gris { background: var(--gris-50); }
.bloc__tete { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.bloc__tete .titre-2 { margin: 0; }
.deux-col { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem clamp(2rem, 6vw, 6rem); }
@media (max-width: 860px) { .deux-col { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Cartes véhicules ---------- */
.grille-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr)); gap: clamp(1rem, 2vw, 1.75rem); }
.grille-cartes--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.carte { container-type: inline-size; }
.carte__lien { display: flex; flex-direction: column; height: 100%; background: #fff; text-decoration: none; border: 1px solid var(--gris-200); transition: border-color var(--t-rapide), box-shadow var(--t) var(--courbe), transform var(--t) var(--courbe); }
.carte__lien:hover { border-color: var(--noir); box-shadow: 0 1.25rem 2.5rem -1.5rem rgb(0 0 0 / .35); transform: translateY(-3px); }
.carte__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--gris-100); }
.carte__img picture, .carte__img img { width: 100%; height: 100%; }
.carte__img img { object-fit: cover; object-position: 50% 58%; transition: transform .8s var(--courbe); }
.carte__lien:hover .carte__img img { transform: scale(1.045); }
.carte__vide { display: flex; height: 100%; align-items: center; justify-content: center; gap: .5rem; color: var(--gris-600); font-size: .875rem; }
.carte__nb { position: absolute; right: .6rem; bottom: .6rem; display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .5rem; background: rgb(0 0 0 / .72); color: #fff; font-size: .75rem; font-weight: 600; }
.carte__nb .ic { width: 1rem; height: 1rem; }
.pastille { position: absolute; left: 0; top: 1rem; padding: .35rem .75rem; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--noir); color: #fff; }
.pastille--reserve { background: var(--bleu); color: var(--sur-bleu); }
.pastille--vendu { background: var(--alerte); }
.carte--reserve .carte__img img { filter: saturate(.6); }
.carte__corps { display: flex; flex-direction: column; flex: 1; padding: 1.25rem 1.25rem 1.1rem; }
.carte__cat { margin: 0 0 .4rem; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gris-600); }
.carte__titre { font-size: 1.35rem; font-stretch: var(--large); font-weight: 750; text-transform: uppercase; line-height: 1.05; }
.carte__titre span { font-weight: 450; color: var(--gris-600); }
.carte__version { margin: .35rem 0 0; font-size: .875rem; color: var(--gris-600); }
.carte__specs { display: flex; flex-wrap: wrap; gap: .35rem; margin: 1rem 0 1.25rem; }
.carte__specs li { padding: .2rem .5rem; background: var(--gris-50); border: 1px solid var(--gris-100); font-size: .8125rem; font-weight: 550; }
.carte__pied { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--gris-100); }
.carte__prix { margin: 0; font-size: 1.5rem; font-weight: 800; font-stretch: var(--moyen); line-height: 1.1; }
.carte__prix small { display: block; font-size: .72rem; font-weight: 550; color: var(--gris-600); font-stretch: 100%; }
.carte__garantie { display: inline-flex; align-items: center; gap: .3rem; margin: 0; font-size: .8125rem; font-weight: 600; color: var(--bleu-fonce); }
.carte__garantie .ic { width: 1.05rem; height: 1.05rem; }

.recherche-marques { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; margin-top: clamp(2rem, 4vw, 3rem); padding: 1.5rem 1.75rem; border-left: 4px solid var(--bleu); background: var(--gris-50); }
.recherche-marques__txt { margin: 0; max-width: 48rem; }

/* ---------- Services (accueil) ---------- */
.services-accueil { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem clamp(2rem, 6vw, 6rem); align-items: start; }
.services-accueil__fig { margin-top: 2.5rem; max-width: 22rem; position: relative; }
.services-accueil__fig::before { content: ""; position: absolute; inset: 1rem -1rem -1rem 1rem; border: 1px solid #333; z-index: 0; }
.services-accueil__fig picture { position: relative; }
.liste-services { border-top: 1px solid #2c2c30; }
.liste-services a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem; padding: clamp(1.25rem, 2.5vw, 2rem) .25rem; border-bottom: 1px solid #2c2c30; text-decoration: none; transition: padding var(--t) var(--courbe), color var(--t-rapide); }
.liste-services__ic { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border: 1px solid #3a3a3f; transition: background var(--t-rapide), border-color var(--t-rapide); }
.liste-services__ic .ic { width: 1.65rem; height: 1.65rem; }
.liste-services__titre { font-size: clamp(1.2rem, 1rem + 1.1vw, 2rem); font-stretch: var(--large); font-weight: 700; text-transform: uppercase; line-height: 1.05; }
.liste-services__fl { width: 1.75rem; height: 1.75rem; transition: transform var(--t) var(--courbe); }
.liste-services a:hover { padding-left: 1rem; color: #fff; }
.liste-services a:hover .liste-services__ic { background: var(--bleu); border-color: var(--bleu); color: var(--sur-bleu); }
.liste-services a:hover .liste-services__fl { transform: translateX(6px); color: var(--bleu); }
@media (max-width: 900px) { .services-accueil { grid-template-columns: minmax(0, 1fr); } .services-accueil__fig { display: none; } }

/* ---------- Location ---------- */
.tarifs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--gris-200); border: 1px solid var(--gris-200); }
.tarifs--grand { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tarif { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(1.5rem, 3vw, 2.5rem); background: #fff; }
.tarif__img { width: 100%; aspect-ratio: 16 / 9; display: grid; place-items: center; margin-bottom: 1.25rem; overflow: hidden; }
.tarif__img img { width: 100%; height: 100%; object-fit: contain; transition: transform .8s var(--courbe); }
.tarif:hover .tarif__img img { transform: translateX(8px); }
.tarif__modele { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.75rem); font-stretch: var(--large); text-transform: uppercase; font-weight: 750; margin-bottom: .5rem; }
.tarif__prix { display: flex; align-items: baseline; gap: .4rem; margin: 0 0 .25rem; }
.tarif__montant { font-size: clamp(2.75rem, 2rem + 3vw, 4.5rem); font-weight: 800; line-height: 1; color: var(--noir); }
.tarif__unite { font-weight: 600; color: var(--gris-600); }
.tarif__km { font-weight: 600; margin-bottom: 1.5rem; }
.tarif .btn { margin-top: auto; }
.tarif__liste { display: grid; gap: .5rem; margin: 1rem 0 2rem; }
.tarif__liste li { display: flex; align-items: center; gap: .6rem; font-weight: 550; }
.tarif--conditions { background: var(--noir); color: #fff; }
.tarif--conditions .note { color: var(--gris-400); margin-top: auto; padding-top: 1.5rem; }
@media (max-width: 960px) { .tarifs { grid-template-columns: 1fr 1fr; } .tarif--conditions { grid-column: 1 / -1; } }
@media (max-width: 620px) { .tarifs, .tarifs--grand { grid-template-columns: minmax(0, 1fr); } }
.coches { display: grid; gap: .6rem; }
.coches li { position: relative; padding-left: 1.75rem; }
.coches li::before { content: ""; position: absolute; left: 0; top: .45em; width: .8rem; height: .45rem; border-left: 2px solid var(--bleu); border-bottom: 2px solid var(--bleu); transform: rotate(-45deg); }
.coches--clair li::before { border-color: var(--bleu); }
.coches--grand li { font-size: clamp(1.1rem, 1rem + .6vw, 1.5rem); font-weight: 600; padding-block: .6rem; border-bottom: 1px solid #2a2a2e; }
.coches--grand li::before { top: 1.25em; }
.coches--colonnes { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); column-gap: 2rem; }

/* ---------- Famille / à propos ---------- */
.famille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem clamp(2rem, 7vw, 7rem); align-items: center; }
.famille--inverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.famille__fig { position: relative; }
.famille__fig img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.famille__fig::after { content: ""; position: absolute; left: -1rem; bottom: -1rem; width: 40%; height: 40%; border-left: 4px solid var(--bleu); border-bottom: 4px solid var(--bleu); pointer-events: none; }
.famille__txt .lien-fleche { margin-top: 1rem; }
.duo { display: grid; gap: 0; margin: 2rem 0; border-top: 1px solid #2c2c30; }
.duo div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; padding: 1.25rem 0; border-bottom: 1px solid #2c2c30; }
.duo dt { font-size: clamp(1.25rem, 1rem + 1vw, 1.9rem); font-stretch: var(--large); font-weight: 700; text-transform: uppercase; }
.duo dd { margin: 0; color: var(--gris-400); align-self: center; }
@media (max-width: 860px) { .famille, .famille--inverse { grid-template-columns: minmax(0, 1fr); } .famille__fig { max-width: 26rem; } }
.apropos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; }
.apropos__fig img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.apropos__txt { width: min(100%, 46rem); justify-self: end; }
.metiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--gris-200); border: 1px solid var(--gris-200); margin-top: 1rem; }
.metier { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(1.5rem, 3vw, 2.5rem); background: #fff; }
.metier__ic { width: 2.5rem; height: 2.5rem; color: var(--bleu); margin-bottom: 2rem; }
.metier .lien-fleche { margin-top: auto; }
@media (max-width: 860px) { .metiers { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Accès / coordonnées ---------- */
.acces { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem clamp(2rem, 6vw, 6rem); align-items: start; }
.acces__cartes { display: grid; gap: 1px; background: var(--gris-200); border: 1px solid var(--gris-200); }
@media (max-width: 860px) { .acces { grid-template-columns: minmax(0, 1fr); } }
.horaires { width: 100%; font-size: 1.0625rem; }
.horaires tr { border-bottom: 1px solid var(--gris-200); }
.horaires th, .horaires td { padding: .85rem 0; text-align: left; font-weight: 500; }
.horaires td { text-align: right; font-variant-numeric: tabular-nums; padding-left: 1rem; }
.horaires td span { white-space: nowrap; }
.horaires td span + span::before { content: " · "; }
@media (max-width: 480px) { .horaires { font-size: .9375rem; } .horaires__auj { display: none; } .horaires td span { display: block; } .horaires td span + span::before { content: none; } }
.horaires .aujourdhui th, .horaires .aujourdhui td { font-weight: 750; }
.horaires .aujourdhui { box-shadow: inset 4px 0 0 var(--bleu); }
.horaires .aujourdhui th { padding-left: 1rem; }
.horaires__auj { display: inline-block; margin-left: .5rem; padding: .05rem .4rem; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--bleu); color: var(--sur-bleu); vertical-align: .15em; }
.coord { display: grid; gap: 1rem; padding: clamp(1.5rem, 3vw, 2.25rem); background: #fff; }
.coord--noir { background: var(--noir); color: #fff; }
.coord .btn { justify-self: start; margin-top: .5rem; }
.coord__lig { display: flex; gap: .85rem; margin: 0; font-size: 1.0625rem; }
.coord__lig .ic { margin-top: .15em; color: var(--bleu); }
.coord--noir .coord__lig .ic { color: var(--bleu); }
.coord__lig a { font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.coord__lig a:hover { text-decoration: underline; }
.conseillere { padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--gris-50); }
.conseillere__role { margin: 0 0 .2rem; font-size: .75rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--gris-600); }
.conseillere__nom { margin: 0 0 .5rem; font-size: 1.6rem; font-stretch: var(--large); font-weight: 750; text-transform: uppercase; line-height: 1.05; }
.conseillere__txt { color: var(--gris-600); font-size: .9375rem; }
.conseillere__tel { display: inline-flex; align-items: center; gap: .5rem; font-size: 1.25rem; font-weight: 750; text-decoration: none; color: var(--bleu-fonce); }
.conseillere__tel:hover { text-decoration: underline; }

/* ---------- En-tête de page intérieure ---------- */
.entete-page { background: var(--noir); color: #fff; padding-block: clamp(2rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem); position: relative; overflow: hidden; }
.entete-page::after { content: ""; position: absolute; right: var(--gouttiere); top: 0; bottom: 0; width: clamp(2.5rem, 5vw, 4.4rem); background: repeating-linear-gradient(180deg, #111 0 2px, transparent 2px 12px); opacity: .9; }
.entete-page .titre-1 { max-width: 16ch; position: relative; z-index: 1; }
.entete-page__chapo { max-width: 42rem; margin: 1.5rem 0 0; color: #d6d6da; font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem); }
.fil ol { display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); font-size: .8125rem; color: var(--gris-400); }
.fil li + li::before { content: "/"; margin-right: .5rem; color: #555; }
.fil a { color: #fff; text-decoration: none; }
.fil a:hover { text-decoration: underline; }
.fil--clair ol { color: var(--gris-600); margin: 1.5rem 0; }
.fil--clair li + li::before { color: var(--gris-400); }
.fil--clair a { color: var(--encre); }

/* ---------- Filtres ---------- */
.filtres { display: grid; gap: 1rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); padding-bottom: 1.5rem; border-bottom: 1px solid var(--gris-200); }
.filtres__compte { margin: 0; font-size: 1.05rem; }
.filtres__compte strong { font-size: 1.6rem; font-stretch: var(--large); font-weight: 800; margin-right: .2rem; }
.filtres__champs { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; }
.champ-select { display: grid; gap: .3rem; font-size: .75rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--gris-600); flex: 1 1 10rem; }
.champ-select select, .champ select, .champ input, .champ textarea { width: 100%; min-height: 3rem; padding: .7rem .9rem; border: 1px solid #8c8e94; border-radius: 0; background: #fff; color: var(--encre); font-size: 1rem; letter-spacing: 0; text-transform: none; font-weight: 450; }
.champ-select select, .champ select { appearance: none; padding-right: 2.5rem; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 1.15rem) 55%, calc(100% - .8rem) 55%; background-size: .35rem .35rem; background-repeat: no-repeat; }
.champ-select select:hover, .champ select:hover, .champ input:hover, .champ textarea:hover { border-color: var(--noir); }
.filtres__ok { flex: none; }
.js .filtres__ok { display: none; }
.filtres__raz { align-self: center; font-weight: 600; font-size: .9375rem; }
.vide { padding: 3rem; background: var(--gris-50); text-align: center; }
.encart-recherche { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; margin-top: clamp(3rem, 6vw, 5rem); padding: clamp(1.75rem, 4vw, 3rem); background: var(--noir); color: #fff; }
.encart-recherche > div { max-width: 44rem; }
.encart-recherche p { margin: 0; color: #d6d6da; }

/* ---------- Fiche véhicule ---------- */
.fiche__grille { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem clamp(2rem, 4vw, 4rem); align-items: start; padding-bottom: clamp(3rem, 6vw, 5rem); }
@media (max-width: 960px) { .fiche__grille { grid-template-columns: minmax(0, 1fr); } }
.galerie__principale { position: relative; background: var(--anthracite); aspect-ratio: 4 / 3.4; overflow: hidden; }
.galerie__vue { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.galerie__vue picture, .galerie__vue img { width: 100%; height: 100%; }
.galerie__vue img { object-fit: contain; }
.galerie__vue.est-active { animation: fondu var(--t) var(--courbe); }
@keyframes fondu { from { opacity: .3; } to { opacity: 1; } }
.galerie__zoom { position: absolute; right: 1rem; top: 1rem; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; background: rgb(0 0 0 / .65); color: #fff; }
.galerie__pastille { top: 1rem; }
.galerie__nav { position: absolute; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 3rem; height: 3rem; border: 0; background: #fff; color: var(--noir); cursor: pointer; transition: background var(--t-rapide), color var(--t-rapide); }
.galerie__nav:hover { background: var(--bleu); color: var(--sur-bleu); }
.galerie__nav--prec { left: 0; }
.galerie__nav--suiv { right: 0; }
.galerie__compteur { position: absolute; left: 1rem; bottom: 1rem; margin: 0; padding: .2rem .6rem; background: rgb(0 0 0 / .7); color: #fff; font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.galerie__vignettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr)); gap: .5rem; margin-top: .5rem; }
.galerie__vignettes button { display: block; width: 100%; padding: 0; border: 2px solid transparent; background: var(--gris-100); cursor: pointer; aspect-ratio: 1; overflow: hidden; opacity: .65; transition: opacity var(--t-rapide), border-color var(--t-rapide); }
.galerie__vignettes img { width: 100%; height: 100%; object-fit: cover; }
.galerie__vignettes button:hover, .galerie__vignettes button[aria-current="true"] { opacity: 1; }
.galerie__vignettes button[aria-current="true"] { border-color: var(--bleu); }
.fiche__infos { position: sticky; top: 6rem; }
@media (max-width: 960px) { .fiche__infos { position: static; } }
.fiche__titre { font-size: min(clamp(2.1rem, 1.5rem + 2.6vw, 3.6rem), 10.5cqi); text-transform: uppercase; font-weight: 800; line-height: .95; }
.fiche__titre span { display: block; font-weight: 400; color: var(--gris-600); font-size: .6em; margin-top: .2em; }
.fiche__version { margin: .75rem 0 0; font-size: 1.05rem; color: var(--gris-600); }
.plaque { container-type: inline-size; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 2rem 0; border-top: 2px solid var(--noir); }
.plaque div { padding: .9rem .25rem .9rem 0; border-bottom: 1px solid var(--gris-200); }
.plaque div:nth-child(3n+2), .plaque div:nth-child(3n) { padding-left: .9rem; border-left: 1px solid var(--gris-200); }
.plaque dt { font-size: .6875rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--gris-600); }
.plaque dd { margin: .15rem 0 0; font-size: min(1.9rem, 6.2cqi); font-weight: 750; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.plaque dd small { font-size: .5em; margin-left: .2em; color: var(--gris-600); font-weight: 600; }
.plaque .plaque__txt { font-size: min(1.25rem, 4.6cqi); font-stretch: var(--moyen); padding-top: .25em; }
.achat { display: grid; gap: .75rem; padding: clamp(1.5rem, 3vw, 2rem); background: var(--gris-50); border-top: 4px solid var(--bleu); }
.achat__prix { margin: 0; font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); font-weight: 800; line-height: 1; }
.achat__mention { margin: -.35rem 0 0; font-size: .875rem; color: var(--gris-600); }
.achat__garantie { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .5rem; font-weight: 700; color: var(--bleu-fonce); }
.achat__vendu { margin: 0; font-weight: 600; color: var(--alerte); }
.achat__lisa { margin: .5rem 0 0; font-size: .875rem; color: var(--gris-600); }
.achat__lisa a { color: var(--encre); font-weight: 650; }
.fiche__details { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; gap: 0 clamp(2rem, 4vw, 4rem); margin-bottom: var(--rythme); }
.fiche__col { display: grid; gap: 1px; background: var(--gris-200); border: 1px solid var(--gris-200); }
.detail { padding: clamp(1.5rem, 3vw, 2.5rem); background: #fff; }
.detail--caract { border: 1px solid var(--gris-200); position: sticky; top: 6rem; }
@media (max-width: 960px) { .fiche__details { grid-template-columns: minmax(0, 1fr); gap: 1rem; } .detail--caract { position: static; } }
.puces-fortes { display: flex; flex-wrap: wrap; gap: .5rem; }
.puces-fortes li { padding: .55rem .9rem; background: var(--noir); color: #fff; font-weight: 600; font-size: .9375rem; }
.caract div { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--gris-100); }
.caract dt { color: var(--gris-600); }
.caract dd { margin: 0; font-weight: 600; text-align: right; }
.etiquettes { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.etiquettes li { padding: .3rem .7rem; border: 1px solid var(--bleu); color: var(--noir); font-size: .875rem; font-weight: 600; }

/* ---------- Visionneuse ---------- */
.visionneuse { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(0 0 0 / .96); color: #fff; }
.visionneuse[open] { display: grid; place-items: center; }
.visionneuse::backdrop { background: rgb(0 0 0 / .8); }
.visionneuse__img { max-width: min(96vw, 1200px); max-height: 86dvh; width: auto; object-fit: contain; }
.visionneuse__fermer, .visionneuse__nav { position: fixed; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border: 1px solid #444; background: #000; color: #fff; cursor: pointer; }
.visionneuse__fermer:hover, .visionneuse__nav:hover { background: var(--bleu); border-color: var(--bleu); color: var(--sur-bleu); }
.visionneuse__fermer { top: 1rem; right: 1rem; }
.visionneuse__nav--prec { left: 1rem; top: 50%; translate: 0 -50%; }
.visionneuse__nav--suiv { right: 1rem; top: 50%; translate: 0 -50%; }
.visionneuse__leg { position: fixed; bottom: 1rem; left: 50%; translate: -50% 0; margin: 0; font-size: .875rem; color: var(--gris-400); }

/* ---------- Services (page) ---------- */
.prestations { border-top: 2px solid var(--noir); }
.prestation { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.5rem clamp(1.5rem, 4vw, 3rem); align-items: center; padding: clamp(1.75rem, 3.5vw, 2.75rem) 0; border-bottom: 1px solid var(--gris-200); scroll-margin-top: 7rem; }
.prestation:target { background: linear-gradient(90deg, var(--gris-50), transparent); }
.prestation__ic { display: grid; place-items: center; width: clamp(3.5rem, 6vw, 5rem); height: clamp(3.5rem, 6vw, 5rem); background: var(--noir); color: #fff; }
.prestation__ic .ic { width: 45%; height: 45%; }
.prestation .titre-3 { font-size: clamp(1.35rem, 1.1rem + 1.2vw, 2.1rem); font-stretch: var(--large); text-transform: uppercase; font-weight: 750; margin: 0; }
.prestation__txt p { margin: .75rem 0 0; max-width: 46rem; color: var(--gris-600); }
@media (max-width: 760px) { .prestation { grid-template-columns: auto 1fr; } .prestation__action { grid-column: 1 / -1; } }
.neuf { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2.5rem clamp(2rem, 5vw, 5rem); align-items: center; }
.neuf__fig img { width: 100%; }
@media (max-width: 900px) { .neuf { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2.5rem clamp(2rem, 5vw, 5rem); align-items: start; }
@media (max-width: 960px) { .contact { grid-template-columns: minmax(0, 1fr); } }
.contact__infos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--gris-200); border: 1px solid var(--gris-200); }
.bloc-horaires { padding: clamp(1.5rem, 3vw, 2.25rem); background: #fff; }
.formulaire { display: grid; gap: 1.25rem; }
.champ { display: grid; gap: .4rem; }
.champ label, .groupe-location legend { font-weight: 650; font-size: .9375rem; }
.champ textarea { min-height: 9rem; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus, .champ-select select:focus { outline: 3px solid var(--bleu); outline-offset: 0; border-color: var(--noir); }
.champ [aria-invalid="true"] { border-color: var(--alerte); border-width: 2px; }
.champ__erreur { margin: 0; color: var(--alerte); font-size: .875rem; font-weight: 600; }
.champ__erreur::before { content: "⚠ "; }
.champ--case { grid-template-columns: auto 1fr; align-items: start; column-gap: .75rem; }
.champ--case input { width: 1.4rem; height: 1.4rem; min-height: 0; margin-top: .15rem; accent-color: var(--bleu); }
.champ--case label { font-weight: 450; }
.champ--case .champ__erreur { grid-column: 1 / -1; }
.champs-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.champs-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 620px) { .champs-2, .champs-3 { grid-template-columns: minmax(0, 1fr); } }
.req { color: var(--alerte); }
.groupe-location { margin: 0; padding: 1.25rem; border: 1px solid var(--gris-200); background: var(--gris-50); }
.groupe-location legend { padding: 0 .5rem; }
.groupe-location .note { margin: .75rem 0 0; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.vref { display: flex; gap: 1rem; align-items: center; padding: .9rem; border: 1px solid var(--gris-200); background: var(--gris-50); }
.vref img { width: 4.5rem; height: 4.5rem; object-fit: cover; }
.vref p { margin: 0; font-size: .9375rem; }
.vref__lib { display: block; font-size: .72rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--gris-600); }
.alerte { padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; border-left: 4px solid; }
.alerte p:last-child { margin: 0; }
.alerte--ok { border-color: var(--ok); background: #eaf6ef; }
.alerte--erreur { border-color: var(--alerte); background: #fbeceb; }

/* ---------- Pages texte ---------- */
.texte-long { max-width: 46rem; }
.texte-long h2 { font-size: 1.35rem; font-stretch: var(--moyen); margin: 2.5rem 0 .75rem; }
.texte-long h2:first-child { margin-top: 0; }
.introuvable { text-align: left; }
.introuvable__code { margin: 0 0 .1em; font-size: clamp(6rem, 20vw, 14rem); font-weight: 200; line-height: .85; color: var(--noir); }

/* ---------- Pied de page ---------- */
.pied { background: var(--noir); color: var(--gris-400); padding-top: clamp(3.5rem, 7vw, 6rem); font-size: .9375rem; }
.pied__grille { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid #222; }
.pied__nom { margin: 0 0 1.5rem; color: #fff; font-size: clamp(1.8rem, 1.3rem + 2vw, 2.8rem); font-weight: 800; text-transform: uppercase; line-height: .95; }
.pied__statut { display: flex; align-items: center; gap: .75rem; }
.pied__blason { width: 2.25rem; }
.pied__titre { margin: 0 0 1rem; color: #fff; font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
.pied a { color: #fff; text-decoration: none; }
.pied a:hover { color: var(--bleu-clair); text-decoration: underline; }
.pied__adresse { margin-bottom: 1rem; line-height: 1.8; }
.pied__adresse a { overflow-wrap: anywhere; }
.pied__liens li { margin-bottom: .45rem; }
.pied__bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; padding-block: 1.5rem 2rem; font-size: .8125rem; }
.pied__bas p { margin: 0; }
@media (max-width: 900px) { .pied__grille { grid-template-columns: 1fr 1fr; } .pied__marque { grid-column: 1 / -1; } }
@media (max-width: 480px) { .pied__grille { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Barre mobile ---------- */
.barre-mobile { display: none; }
@media (max-width: 760px) {
  :root { --barre-mobile: calc(3.75rem + env(safe-area-inset-bottom, 0px)); }
  .barre-mobile { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: repeat(3, 1fr); background: var(--noir); border-top: 1px solid #2a2a2e; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .barre-mobile a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; min-height: 3.75rem; color: #fff; text-decoration: none; font-size: .75rem; font-weight: 600; }
  .barre-mobile a:first-child { background: var(--bleu); color: var(--sur-bleu); }
  .barre-mobile .ic { width: 1.35rem; height: 1.35rem; }
}

/* ---------- Mouvement ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero__titre span, .hero__intro, .portes, .hero .surtitre { animation: monte .9s var(--courbe) both; }
  .hero .surtitre { animation-delay: .05s; }
  .hero__titre span:last-child { animation-delay: .12s; }
  .hero__intro { animation-delay: .2s; }
  .portes { animation-delay: .28s; }
  .hero__img { animation: devoile 1.4s var(--courbe) both; }
  .totem { animation: descend 1s .3s var(--courbe) both; }
  @supports (animation-timeline: view()) {
    .carte, .tarif, .metier, .prestation, .liste-services li, .famille__fig, .detail {
      animation: monte linear both; animation-timeline: view(); animation-range: entry 0% entry 40%;
    }
  }
}
@keyframes monte { from { opacity: 0; translate: 0 1.5rem; } to { opacity: 1; translate: 0 0; } }
@keyframes devoile { from { scale: 1.08; } to { scale: 1; } }
@keyframes descend { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  @view-transition { navigation: none; }
}

/* ---------- Impression (fiche véhicule) ---------- */
@media print {
  .info, .entete, .pied, .barre-mobile, .galerie__nav, .galerie__vignettes, .galerie__zoom, .achat .btn, .bloc--gris, .fil { display: none !important; }
  .fiche__grille { grid-template-columns: 1fr 1fr; }
  body { font-size: 11pt; }
}
.visionneuse__cadre { margin: 0; display: grid; place-items: center; }
.visionneuse__img { width: auto; height: auto; }
.champ-select label { font: inherit; letter-spacing: inherit; }
@media (max-width: 480px) { .btn { white-space: normal; text-align: center; } }
/* cibles tactiles ≥ 24 px (WCAG 2.2 — 2.5.8) */
.fil a, .pied a, .coord__lig a, .achat__lisa a, .texte-long a { display: inline-block; min-height: 24px; padding-block: .15rem; }
.info__tel, .conseillere__tel { min-height: 24px; white-space: nowrap; }
@media (max-width: 760px) { .entete-page::after { display: none; } }
.pied__liens a { padding-block: .2rem; }

.prestation__prix, .liste-services__prix { display: inline-block; margin-left: .5rem; padding: .1rem .55rem; background: var(--bleu); color: var(--sur-bleu); font-style: normal; font-size: .62em; font-stretch: 100%; vertical-align: .25em; }
.evenement { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2.5rem clamp(2rem, 5vw, 5rem); align-items: center; }
.evenement__fig img { width: 100%; }
@media (max-width: 900px) { .evenement { grid-template-columns: minmax(0, 1fr); } }

/* Navigation à six entrées : resserrée sur les écrans intermédiaires */
@media (min-width: 1201px) and (max-width: 1420px) { .nav__liste { gap: 0; } .nav__liste a { padding-inline: .5rem; font-size: .8125rem; } .nav__liste a::after { left: .5rem; right: .5rem; } .entete__cta { padding-inline: .85rem; font-size: .75rem; letter-spacing: .03em; } .marque { gap: .7rem; padding-right: .75rem; } .marque__nom { font-size: .9rem; } }
@media (min-width: 1201px) and (max-width: 1280px) { .nav__liste a { padding-inline: .4rem; font-size: .78rem; } .nav__liste a::after { left: .4rem; right: .4rem; } .marque__blason { width: 2.3rem; } }

/* Atelier : délais et grilles de tarifs */
.prestation__delai { display: flex; align-items: flex-start; gap: .5rem; color: var(--encre) !important; font-size: .9375rem; }
.prestation__delai .ic { flex: none; width: 1.2rem; height: 1.2rem; margin-top: .15rem; color: var(--bleu-fonce); }
.grille-tarifs { width: 100%; max-width: 40rem; margin-top: 1rem; border-collapse: collapse; font-size: .9375rem; }
.grille-tarifs th, .grille-tarifs td { padding: .6rem 0; border-bottom: 1px solid var(--gris-200); vertical-align: baseline; }
.grille-tarifs tr:first-child :is(th, td) { border-top: 1px solid var(--gris-200); }
.grille-tarifs th { text-align: left; font-weight: 500; padding-right: 1rem; }
.grille-tarifs td { text-align: right; white-space: nowrap; font-weight: 800; font-stretch: var(--moyen); font-size: 1.1rem; font-variant-numeric: tabular-nums; }

/* Accueil : bande pièces détachées */
.bande-pieces { background: var(--gris-50); border-top: 1px solid var(--gris-200); }
.bande-pieces__in { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 30rem); gap: 1.5rem clamp(1.5rem, 4vw, 3rem); align-items: center; }
.bande-pieces__ic { display: grid; place-items: center; width: clamp(3.5rem, 6vw, 5rem); aspect-ratio: 1; background: var(--bleu); color: var(--sur-bleu); }
.bande-pieces__ic .ic { width: 50%; height: 50%; }
.bande-pieces__txt { container-type: inline-size; }
.bande-pieces__txt .titre-2 { margin-bottom: .5rem; }
.bande-pieces__txt p:last-child { margin: 0; color: var(--gris-600); }
.bande-pieces__form { display: flex; }
.bande-pieces__form input { flex: 1; min-width: 0; min-height: 3.25rem; padding: .75rem 1rem; border: 1px solid var(--noir); border-right: 0; border-radius: 0; background: #fff; font: inherit; }
.bande-pieces__form input:focus { outline: 3px solid var(--bleu); outline-offset: 0; }
.bande-pieces__form .btn { flex: none; min-height: 3.25rem; }
.bande-pieces .grille-cartes { margin-top: clamp(2rem, 4vw, 3rem); }
@media (max-width: 900px) { .bande-pieces__in { grid-template-columns: auto minmax(0, 1fr); } .bande-pieces__form { grid-column: 1 / -1; } }
@media (max-width: 480px) { .bande-pieces__in { grid-template-columns: minmax(0, 1fr); } .bande-pieces__ic { width: 3rem; } .bande-pieces__form .btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }

/* Catalogue des pièces */
.grille-cartes--pieces { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14.5rem), 1fr)); }
.carte__img--piece { aspect-ratio: 1; background: #fff; border-bottom: 1px solid var(--gris-100); }
.carte__img--piece img { object-fit: contain; object-position: 50% 50%; padding: 8%; }
.carte__img--piece .carte__vide { flex-direction: column; background: var(--gris-50); }
.carte__img--piece .carte__vide .ic { width: 2.5rem; height: 2.5rem; color: var(--gris-400); }
.pastille--etat { left: auto; right: 0; background: var(--gris-600); }
.carte__titre--piece { font-size: min(1.15rem, 7.5cqi); font-stretch: var(--moyen); text-transform: none; line-height: 1.2; overflow-wrap: anywhere; }
.carte__ref { margin: .45rem 0 0; font-size: .8125rem; color: var(--gris-600); }
.carte__ref span, .fiche__version span[translate] { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--encre); letter-spacing: .02em; }
.carte__compat { margin: .5rem 0 0; font-size: .8125rem; color: var(--gris-600); }
.carte--piece .carte__prix { font-size: 1.3rem; }
.carte__stock { margin: 0; font-size: .8125rem; font-weight: 600; color: var(--gris-600); }
.carte__stock.est-dispo { color: var(--ok, #0a7a3d); }
.carte__stock.est-dispo::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .35rem; border-radius: 50%; background: currentColor; vertical-align: .05em; }
.filtres--pieces { gap: 1.25rem; }
.recherche-piece { display: grid; gap: .35rem; }
.recherche-piece label { font-size: .75rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--gris-600); }
.recherche-piece__champ { position: relative; }
.recherche-piece__champ .ic { position: absolute; left: 1rem; top: 50%; width: 1.25rem; height: 1.25rem; transform: translateY(-50%); color: var(--gris-600); pointer-events: none; }
.recherche-piece__champ input { width: 100%; min-height: 3.5rem; padding: .8rem 1rem .8rem 3rem; border: 2px solid var(--noir); border-radius: 0; background: #fff; font: inherit; font-size: 1.125rem; }
.recherche-piece__champ input:focus { outline: 3px solid var(--bleu); outline-offset: 0; }
.case-filtre { display: inline-flex; align-items: center; gap: .5rem; min-height: 3rem; font-weight: 600; font-size: .9375rem; cursor: pointer; }
.case-filtre input { width: 1.25rem; height: 1.25rem; accent-color: var(--bleu); }
.js .filtres--pieces .filtres__ok { display: inline-flex; }
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; margin-top: clamp(2rem, 4vw, 3rem); }
.pagination__lien { display: inline-grid; place-items: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0 .6rem; border: 1px solid var(--gris-200); background: #fff; font-weight: 650; text-decoration: none; font-variant-numeric: tabular-nums; }
.pagination__lien .ic { width: 1.1rem; height: 1.1rem; }
a.pagination__lien:hover { border-color: var(--noir); }
.pagination__lien.est-courant { background: var(--noir); border-color: var(--noir); color: #fff; }
.pagination__ellipse { display: inline-grid; place-items: center; min-width: 1.5rem; color: var(--gris-600); }
.vide--pieces { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.vide--pieces p { max-width: 40rem; margin-inline: auto; }
.vide__ic { display: inline-grid; place-items: center; width: 4rem; height: 4rem; margin-bottom: 1rem; background: var(--noir); color: #fff; }
.vide__ic .ic { width: 55%; height: 55%; }
.vide__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 1.5rem; }

/* Fiche pièce */
.galerie--piece .galerie__principale { aspect-ratio: 1; background: #fff; border: 1px solid var(--gris-200); }
.galerie--piece .galerie__vue img { object-fit: contain; padding: 5%; }
.galerie--piece .galerie__vignettes img { object-fit: contain; background: #fff; aspect-ratio: 1; }
.carte__vide--grand { flex-direction: column; min-height: 100%; font-size: 1rem; }
.carte__vide--grand .ic { width: 4rem; height: 4rem; color: var(--gris-400); }
.fiche__titre--piece { text-transform: none; font-size: clamp(1.8rem, 1.2rem + 2.2vw, 3.2rem); overflow-wrap: anywhere; }
.plaque--piece dd { font-size: min(1.6rem, 5.4cqi); }
.plaque--piece .plaque__txt { overflow-wrap: anywhere; white-space: normal; }
.achat__stock { display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 .5rem; font-weight: 700; color: var(--gris-600); }
.achat__stock.est-dispo { color: var(--ok, #0a7a3d); }
.achat__stock .ic { width: 1.15rem; height: 1.15rem; }
.achat__mention s { color: var(--gris-600); }
.detail__note { margin-top: 1rem; font-size: .875rem; color: var(--gris-600); }
.vref__ic { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; flex: none; background: var(--noir); color: #fff; }
.vref__ic .ic { width: 50%; height: 50%; }
.vref--piece img { object-fit: contain; background: #fff; }
@media (max-width: 600px) {
  .grille-cartes--pieces { grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); gap: .75rem; }
  .carte--piece .carte__corps { padding: .85rem .85rem .8rem; }
  .carte--piece .carte__compat { display: none; }
  .carte--piece .carte__prix { font-size: 1.15rem; }
  .carte--piece .carte__pied { flex-direction: column; align-items: flex-start; }
  .carte__img--piece .carte__vide { font-size: .75rem; }
}

/* ================= Voitures neuves ================= */
/* Grand lion en filigrane : estompé, derrière le contenu, jamais cliquable */
.lion-fond { position: absolute; z-index: 0; pointer-events: none; user-select: none; width: min(64rem, 92vw); max-width: none; height: auto; aspect-ratio: 1; object-fit: contain; opacity: .055; mix-blend-mode: multiply; }
.lion-fond--flou { filter: grayscale(1) blur(2.5px); opacity: .07; }
.lion-fond--entete { right: -8vw; top: 50%; transform: translateY(-50%); width: min(46rem, 80vw); }
.lion-fond--bande { right: -6vw; top: -4rem; width: min(52rem, 90vw); }
.lion-fond--scene { left: 50%; top: 50%; transform: translate(-50%, -52%); width: min(34rem, 80%); opacity: .06; }
.lion-fond--recap { right: -10%; bottom: -12%; width: 70%; opacity: .05; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .lion-fond--entete, .lion-fond--bande { animation: lion-glisse linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    @keyframes lion-glisse { from { translate: 0 -3rem; } to { translate: 0 3rem; } }
  }
}

.n-marque { font-weight: 400; letter-spacing: .12em; font-size: .62em; vertical-align: .18em; margin-right: .1em; color: var(--gris-600); }
.n-badge { position: absolute; left: 0; top: 1rem; padding: .3rem .7rem; background: var(--bleu); color: var(--sur-bleu); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.n-badge--ligne { position: static; display: inline-block; vertical-align: .3em; padding: .15rem .45rem; font-size: .6rem; }
.n-vide { display: grid; place-items: center; width: 100%; height: 100%; min-height: 8rem; color: var(--gris-400); background: linear-gradient(160deg, #fff, var(--gris-50)); }
.n-vide .ic { width: 3rem; height: 3rem; }

.n-energies { display: flex; flex-wrap: wrap; gap: .3rem; margin: .7rem 0 0; }
.n-en { padding: .2rem .55rem; border: 1px solid var(--gris-200); font-size: .75rem; font-weight: 600; background: #fff; }
.n-en--electrique { border-color: var(--bleu); background: #fff; color: var(--noir); box-shadow: inset 3px 0 0 var(--bleu); }
.n-en--hybride, .n-en--hybride-rechargeable { border-color: #cfe7d8; background: #f0f8f3; color: var(--ok); }
.n-energies--grand .n-en { padding: .35rem .8rem; font-size: .875rem; }

.n-pastilles { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem; margin: 0; }
.n-pastilles--vide { font-size: .8125rem; color: var(--gris-600); }
.n-pastilles__nb { margin-left: .4rem; font-size: .8125rem; color: var(--gris-600); }
.n-pastille { --c: var(--gris-200); display: inline-block; width: 1rem; height: 1rem; border-radius: 50%; background: radial-gradient(circle at 32% 28%, rgb(255 255 255 / .55), rgb(255 255 255 / 0) 42%), var(--c); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .14); flex: none; }
.n-pastille--grande { width: 1.6rem; height: 1.6rem; }
.n-pastille--choix { width: 2.5rem; height: 2.5rem; transition: transform var(--t-rapide) var(--courbe), box-shadow var(--t-rapide); }

/* En-tête clair avec filigrane */
.n-entete { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, #fff 0%, var(--gris-50) 100%); border-bottom: 1px solid var(--gris-200); padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(3rem, 6vw, 5rem); }
.n-entete__in { position: relative; z-index: 1; container-type: inline-size; }
.n-titre { font-size: min(clamp(2.4rem, 1.4rem + 4.6vw, 5.6rem), 11cqi); font-stretch: var(--large); font-weight: 780; text-transform: uppercase; line-height: .95; letter-spacing: -.01em; max-width: 14ch; margin: 0 0 1.25rem; }
.n-titre span { display: block; color: var(--noir); font-weight: 200; }
.n-chapo { max-width: 40rem; font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); color: var(--gris-600); margin: 0 0 1.75rem; }
.n-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin: 0; }
.n-actions .btn--large { width: auto; }
.n-mention { font-size: .78rem; color: var(--gris-600); padding-block: 1.5rem 2.5rem; margin: 0 auto; }

/* Filtres de motorisation */
.n-filtres { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); padding-bottom: 1.25rem; border-bottom: 1px solid var(--gris-200); }
.n-filtres__lib { margin: 0; font-size: .75rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--gris-600); }
.n-filtres__choix { display: flex; flex-wrap: wrap; gap: .4rem; }
.n-filtres__choix button { min-height: 2.5rem; padding: .4rem 1rem; border: 1px solid var(--gris-200); background: #fff; font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer; transition: background var(--t-rapide), color var(--t-rapide), border-color var(--t-rapide); }
.n-filtres__choix button:hover { border-color: var(--noir); }
.n-filtres__choix button[aria-pressed="true"] { background: var(--noir); border-color: var(--noir); color: #fff; }
.n-filtres__nb { margin: 0; font-size: .9rem; color: var(--gris-600); }
.n-segment + .n-segment { margin-top: clamp(3rem, 6vw, 5rem); }
.n-segment__nb { margin: 0; color: var(--gris-600); font-weight: 600; }

/* Cartes modèles */
.n-grille { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.n-carte { container-type: inline-size; }
.n-carte__lien { display: flex; flex-direction: column; height: 100%; text-decoration: none; background: #fff; border: 1px solid var(--gris-200); transition: border-color var(--t) var(--courbe), box-shadow var(--t) var(--courbe), transform var(--t) var(--courbe); }
.n-carte__lien:hover { border-color: var(--noir); box-shadow: 0 1.5rem 3rem -2rem rgb(0 0 0 / .45); transform: translateY(-3px); }
.n-carte__img { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: #e9e9ec; }
.n-carte__img img, .n-carte__img picture { display: block; width: 100%; height: 100%; object-fit: cover; }
.n-carte__img img { transition: transform .9s var(--courbe); }
.n-carte__lien:hover .n-carte__img img { transform: scale(1.05); }
.n-carte__corps { display: flex; flex-direction: column; flex: 1; padding: 1.1rem 1.2rem 1.1rem; }
.n-carte__nom { margin: 0; font-size: min(1.9rem, 12cqi); font-stretch: var(--large); font-weight: 780; text-transform: uppercase; line-height: 1; }
.n-carte__nom--long { font-size: min(1.7rem, 9.5cqi); }
.n-carte__pied { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: auto; padding-top: 1rem; }
.n-carte__fl { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: none; background: var(--noir); color: #fff; transition: background var(--t-rapide); }
.n-carte__lien:hover .n-carte__fl { background: var(--bleu); color: var(--sur-bleu); }

/* Étapes */
.n-etapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: clamp(1.5rem, 3vw, 2.5rem) 0 2rem; padding: 0; list-style: none; background: #2a2a2e; border: 1px solid #2a2a2e; }
.n-etapes li { padding: 1.6rem 1.5rem; background: var(--noir); }
.n-etapes h3 { margin: .6rem 0 .5rem; font-size: 1.3rem; font-stretch: var(--large); text-transform: uppercase; }
.n-etapes p { margin: 0; color: var(--gris-400); }
.n-etapes__num { font-size: 2.6rem; font-weight: 800; font-stretch: var(--large); color: var(--bleu-clair); line-height: 1; }
.n-etapes-bloc .btn--large { width: auto; }
@media (max-width: 760px) { .n-etapes { grid-template-columns: minmax(0, 1fr); } }

/* Fiche modèle */
.n-fiche { background: linear-gradient(180deg, #fff 0, #fff 40rem, transparent 40rem); }
.n-scene { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding-block: .5rem clamp(2.5rem, 5vw, 4rem); }
.n-scene__visuel { position: relative; isolation: isolate; background: radial-gradient(ellipse at 50% 60%, #fff 0%, var(--gris-50) 70%); border: 1px solid var(--gris-100); overflow: hidden; }
.n-scene__fig { position: relative; margin: 0; }
.n-scene__img { aspect-ratio: 16 / 9; display: grid; place-items: center; }
.n-scene__img img, .n-scene__img picture { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.n-scene__img img { view-transition-name: n-scene; }
.n-scene__leg { display: flex; align-items: center; gap: .6rem; padding: .9rem 1.2rem; border-top: 1px solid var(--gris-100); background: rgb(255 255 255 / .75); font-weight: 650; }
.n-scene__leg small { font-weight: 450; color: var(--gris-600); }
.n-scene__panneau { container-type: inline-size; }
.n-fiche__titre { margin: 0 0 1.25rem; font-size: min(clamp(2.6rem, 1.5rem + 3.6vw, 4.8rem), 20cqi); font-stretch: var(--large); font-weight: 800; text-transform: uppercase; line-height: .95; }
.n-fiche__titre--long { font-size: min(clamp(2.2rem, 1.3rem + 2.6vw, 3.6rem), 12.5cqi); overflow-wrap: anywhere; }
.n-fiche__titre .n-marque { display: block; font-size: .3em; letter-spacing: .3em; margin-bottom: .6em; vertical-align: 0; }
.n-bloc { padding-block: 1.1rem; border-top: 1px solid var(--gris-200); }
.n-bloc__lib { margin: 0 0 .5rem; font-size: .75rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--gris-600); }
.n-bloc .n-energies { margin: 0; }
.n-teintes { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.n-teinte { display: grid; place-items: center; width: 3.1rem; height: 3.1rem; border: 2px solid transparent; border-radius: 50%; transition: border-color var(--t-rapide); }
.n-teinte:hover .n-pastille--choix { transform: scale(1.08); }
.n-teinte[aria-current="true"] { border-color: var(--noir); }
.n-teinte:focus-visible { outline-offset: 1px; border-radius: 50%; }
.n-texte { padding-block: 1rem; border-top: 1px solid var(--gris-200); color: var(--gris-600); }
.n-commande { display: grid; gap: .6rem; padding-top: 1.25rem; border-top: 1px solid var(--gris-200); }
.n-commande__note { margin: .4rem 0 0; font-size: .875rem; color: var(--gris-600); }
.n-commande__note a, .n-commande__ext a { color: var(--encre); font-weight: 650; display: inline-block; min-height: 24px; }
.n-commande__ext { margin: 0; font-size: .875rem; }
.n-commande__ext a { display: inline-flex; align-items: center; gap: .35rem; min-height: 24px; }
.n-commande__ext .ic { width: .9rem; height: .9rem; transform: rotate(-45deg); }
@media (max-width: 1000px) { .n-scene { grid-template-columns: minmax(0, 1fr); } }

.n-mosaique { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.n-mosaique__lien { display: block; height: 100%; background: #fff; border: 1px solid var(--gris-200); text-decoration: none; transition: border-color var(--t-rapide), transform var(--t) var(--courbe); }
.n-mosaique__lien:hover { border-color: var(--noir); transform: translateY(-2px); }
.n-mosaique__img { display: block; aspect-ratio: 16 / 9; }
.n-mosaique__img img, .n-mosaique__img picture { display: block; width: 100%; height: 100%; object-fit: contain; }
.n-mosaique__nom { display: flex; align-items: center; gap: .55rem; padding: .75rem .9rem; border-top: 1px solid var(--gris-100); font-weight: 650; }

/* Nuancier */
.n-familles ul { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.n-familles a { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.5rem; padding: .35rem .9rem .35rem .45rem; border: 1px solid var(--gris-200); background: #fff; text-decoration: none; font-weight: 600; transition: border-color var(--t-rapide); }
.n-familles a:hover { border-color: var(--noir); }
.n-familles .n-pastille { width: 1.6rem; height: 1.6rem; }
.n-familles .compte { font-size: .7em; }
.n-famille + .n-famille { border-top: 1px solid var(--gris-200); }
.n-tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: clamp(1rem, 2vw, 1.5rem); margin: 0; padding: 0; list-style: none; }
.n-tuile { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--gris-200); overflow: hidden; }
.n-tuile__nappe { --c: var(--gris-200); position: relative; height: 7.5rem; background: linear-gradient(115deg, rgb(255 255 255 / .38) 0%, rgb(255 255 255 / 0) 28%, rgb(0 0 0 / 0) 62%, rgb(0 0 0 / .28) 100%), var(--c); overflow: hidden; }
.n-tuile__reflet { position: absolute; inset: -40% -10%; background: linear-gradient(100deg, transparent 38%, rgb(255 255 255 / .45) 48%, transparent 58%); transform: translateX(-60%); transition: transform 1.2s var(--courbe); }
.n-tuile:hover .n-tuile__reflet { transform: translateX(60%); }
.n-tuile__img { position: relative; margin-top: -3.2rem; aspect-ratio: 16 / 9; padding-inline: .5rem; }
.n-tuile__img img, .n-tuile__img picture { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.n-tuile__img .n-vide { background: transparent; }
.n-tuile__corps { padding: 0 1.2rem 1.2rem; }
.n-tuile__nom { margin: 0; font-size: 1.35rem; font-stretch: var(--large); font-weight: 750; text-transform: uppercase; line-height: 1.05; }
.n-tuile__lib { margin: .35rem 0 .6rem; font-size: .8125rem; color: var(--gris-600); }
.n-tuile__modeles { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.n-tuile__modeles a { display: inline-block; min-height: 2rem; padding: .3rem .65rem; border: 1px solid var(--gris-200); font-size: .8125rem; font-weight: 650; text-decoration: none; transition: background var(--t-rapide), color var(--t-rapide), border-color var(--t-rapide); }
.n-tuile__modeles a:hover { background: var(--noir); border-color: var(--noir); color: #fff; }
.n-appel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; }
.n-appel > div { max-width: 40rem; }
.n-appel p { color: var(--gris-400); margin: 0; }
.n-appel .btn--large { width: auto; }
@media (prefers-reduced-motion: reduce) { .n-tuile__reflet { display: none; } }

/* Rendez-vous */
.n-rdv__groupe { margin: 0 0 1.75rem; padding: 0; border: 0; min-width: 0; }
.n-rdv__groupe > legend { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; font-size: 1.15rem; font-weight: 750; font-stretch: var(--moyen); text-transform: uppercase; }
.n-rdv__num { display: grid; place-items: center; width: 2rem; height: 2rem; background: var(--noir); color: #fff; font-size: .95rem; }
.champ--radios { border: 0; margin: 0; padding: 0; min-width: 0; }
.champ--radios legend { margin-bottom: .45rem; font-weight: 650; font-size: .9375rem; }
.radio { display: flex; align-items: center; gap: .55rem; min-height: 2.5rem; }
.radio label { font-weight: 500; cursor: pointer; min-height: 24px; display: flex; align-items: center; }
.radio input { width: 1.25rem; height: 1.25rem; min-height: 0; margin: 0; accent-color: var(--bleu); }
.aide--alerte { color: var(--alerte); font-weight: 600; }
.n-rdv .btn--large { width: auto; min-width: min(100%, 22rem); }
.n-rdv__cote { display: grid; gap: 1.5rem; }
.n-recap { position: relative; isolation: isolate; overflow: hidden; padding: 1rem 1.25rem 1.25rem; background: radial-gradient(ellipse at 50% 55%, #fff 0%, var(--gris-50) 75%); border: 1px solid var(--gris-200); border-top: 4px solid var(--bleu); }
.n-recap__img { position: relative; aspect-ratio: 16 / 9; }
.n-recap__img img, .n-recap__img picture { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.n-recap__nom { position: relative; z-index: 1; margin: .5rem 0 0; font-size: 1.5rem; font-weight: 780; font-stretch: var(--large); text-transform: uppercase; line-height: 1; }
.n-recap__teinte { position: relative; z-index: 1; margin: .3rem 0 0; color: var(--gris-600); }

/* Accueil : bande « voitures neuves » */
.bande-neuf { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(3.5rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4rem); background: linear-gradient(180deg, #fff 0%, var(--gris-50) 100%); border-bottom: 1px solid var(--gris-200); }
.bande-neuf__in { position: relative; z-index: 1; }
.bande-neuf__tete { container-type: inline-size; max-width: 60rem; }
.bande-neuf__titre { margin: 0 0 1rem; font-size: min(clamp(1.9rem, 1.1rem + 2.6vw, 3.5rem), 9cqi); font-stretch: var(--large); font-weight: 780; text-transform: uppercase; line-height: .98; }
.bande-neuf__titre span { display: block; color: var(--noir); font-weight: 200; }
.bande-neuf__txt { max-width: 38rem; color: var(--gris-600); font-size: 1.1rem; margin: 0 0 1.5rem; }
.rail-neuf { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(15rem, 20rem); gap: 1rem; margin: clamp(2rem, 4vw, 3rem) calc(var(--gouttiere) * -1) 0; padding: .25rem var(--gouttiere) 1.25rem; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gouttiere); scrollbar-width: thin; }
.rail-neuf li { scroll-snap-align: start; }
.rail-neuf__lien { display: flex; flex-direction: column; height: 100%; padding-bottom: 1rem; background: #fff; border: 1px solid var(--gris-200); text-decoration: none; transition: border-color var(--t-rapide), transform var(--t) var(--courbe), box-shadow var(--t) var(--courbe); }
.rail-neuf__lien:hover { border-color: var(--noir); transform: translateY(-3px); box-shadow: 0 1.2rem 2.4rem -1.8rem rgb(0 0 0 / .45); }
.rail-neuf__img { display: block; aspect-ratio: 3 / 2; background: #e9e9ec; overflow: hidden; }
.rail-neuf__img img, .rail-neuf__img picture { display: block; width: 100%; height: 100%; object-fit: cover; }
.rail-neuf__nom { display: block; margin: .9rem 1rem 0; font-size: 1.45rem; font-weight: 780; font-stretch: var(--large); text-transform: uppercase; line-height: 1; }
.rail-neuf__en { display: block; margin: .35rem 1rem .6rem; font-size: .8125rem; color: var(--gris-600); }
.rail-neuf__lien .n-pastilles { margin: auto 1rem 0; }
.rail-neuf__aide { display: none; align-items: center; gap: .4rem; margin: .25rem 0 0; font-size: .8125rem; color: var(--gris-600); }
.rail-neuf__aide.est-visible { display: flex; }
.rail-neuf__aide .ic { width: 1rem; height: 1rem; }
.portes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 48rem; }
.porte--neuf { background: var(--bleu); color: var(--sur-bleu); }
.porte--neuf::before { background: #fff; }
.porte--neuf .porte__txt, .porte--neuf:hover .porte__txt { color: var(--sur-bleu); }
.porte--neuf .porte__ic { border-color: rgb(0 0 0 / .4); }
@media (max-width: 1200px) and (min-width: 1001px) { .portes--3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .portes--3 .porte--neuf { grid-column: 1 / -1; min-height: 0; } }
@media (max-width: 700px) { .portes--3 { grid-template-columns: minmax(0, 1fr); } }
.n-commande .btn { white-space: normal; text-align: center; height: auto; padding-block: .8rem; }

.insecable { white-space: nowrap; }
.n-rdv .champ { align-content: start; }
.n-scene__leg, .n-recap__nom, .n-recap__teinte { position: relative; }
@media (max-width: 420px) { .lien-fleche { white-space: normal; } }
/* Horaires dans les colonnes étroites (contact, rendez-vous) : les deux plages s'empilent */
.bloc-horaires .horaires td span { display: block; }
.bloc-horaires .horaires td span + span::before { content: none; }
.bloc-horaires { min-width: 0; }
@media (max-width: 360px) { .bloc-horaires, .coord, .conseillere { padding-inline: 1rem; } .horaires td { padding-left: .5rem; } }
/* Menu : « Pièces détachées classiques » sur deux lignes en bureau, une seule dans le menu mobile */
.nav__liste a:has(.nav__cesure) { line-height: 1.15; padding-block: .45rem; }
.nav__liste a:has(.nav__cesure)::after { bottom: .05rem; }
@media (max-width: 1200px) { .nav__liste a { white-space: normal; } .nav__cesure { display: none; } .nav__liste a:has(.nav__cesure) { line-height: inherit; padding-block: 1.1rem; } }
/* Menu mobile : backdrop-filter ferait de l'en-tête le bloc conteneur du menu fixe (menu tronqué) */
@media (max-width: 1200px) { .entete { backdrop-filter: none; background: var(--noir); } }