@font-face{
  font-family:'Bebas Neue';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/bebas-neue.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/plex-sans.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/plex-mono-400.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/plex-mono-500.woff2') format('woff2');
}

:root{
  --ink:#15171a;
  --paper:#eef0f1;
  --surface:#ffffff;
  --steel:#6d7278;
  --steel-soft:#c9cdd0;
  --graphite:#212326;
  --dacia:#4f5c3a;
  --dacia-soft:#e7ead9;
  /* Vert de l'état « en ligne », volontairement SÉPARÉ du vert Dacia.
     Le vert de marque est un olive sourd : parfait pour une garantie,
     trop terne pour dire « c'est publié ». Celui-ci est franchement
     vert, il se lit d'un coup d'œil dans une liste d'annonces — et
     retoucher le vert Dacia pour cela aurait déteint sur toute
     l'identité de la marque. */
  --en-ligne:#1e8e3e;
  --en-ligne-soft:#e6f4ea;
  --neuf:#c8102e;   /* badge « Nouveau » — rouge, ni Renault ni Dacia */
  --line: rgba(21,23,26,0.12);
  --shadow: 0 1px 0 rgba(21,23,26,0.06);
  --radius: 3px;
  --container: 1180px;
  --logo-filter: none;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root{
    --ink:#eef0f1;
    --paper:#101113;
    --surface:#1a1c1f;
    --steel:#9aa0a5;
    --steel-soft:#33363a;
    --graphite:#000000;
    --dacia:#93a878;
    --en-ligne:#5bd47f;
    --en-ligne-soft:#16301f;
    --neuf:#e63946;
    --dacia-soft:#2a2f22;
    --line: rgba(238,240,241,0.14);
    --shadow: 0 1px 0 rgba(0,0,0,0.4);
    --logo-filter: invert(1);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --ink:#eef0f1;
  --paper:#101113;
  --surface:#1a1c1f;
  --steel:#9aa0a5;
  --steel-soft:#33363a;
  --graphite:#000000;
  --dacia:#93a878;
  --en-ligne:#5bd47f;
  --en-ligne-soft:#16301f;
  --neuf:#e63946;
  --dacia-soft:#2a2f22;
  --line: rgba(238,240,241,0.14);
  --shadow: 0 1px 0 rgba(0,0,0,0.4);
  --logo-filter: invert(1);
  color-scheme: dark;
}
:root[data-theme="light"]{
  --ink:#15171a;
  --paper:#eef0f1;
  --surface:#ffffff;
  --steel:#6d7278;
  --steel-soft:#c9cdd0;
  --graphite:#212326;
  --dacia:#4f5c3a;
  --dacia-soft:#e7ead9;
  --line: rgba(21,23,26,0.12);
  --shadow: 0 1px 0 rgba(21,23,26,0.06);
  --logo-filter: none;
  color-scheme: light;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans', -apple-system, sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{
  font-family:'Bebas Neue', 'IBM Plex Sans', sans-serif;
  font-weight:400;
  letter-spacing:0.01em;
  text-wrap:balance;
  margin:0;
}
p{margin:0;}
a{color:inherit;}
img{max-width:100%;}
.mono{
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-variant-numeric:tabular-nums;
}
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--steel);
}
.wrap{
  max-width:var(--container);
  margin:0 auto;
  padding-left:clamp(20px,4vw,48px);
  padding-right:clamp(20px,4vw,48px);
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  padding:13px 22px;
  font-family:'IBM Plex Sans',sans-serif;
  font-weight:600;
  font-size:0.92rem;
  border-radius:var(--radius);
  border:1px solid transparent;
  cursor:pointer;
  text-decoration:none;
  min-height:44px;
  transition:transform 120ms ease, background 120ms ease, border-color 120ms ease;
}
.btn:focus-visible{outline:2px solid var(--ink); outline-offset:2px;}
.btn-primary{background:var(--ink); color:var(--paper);}
.btn-primary:hover{transform:translateY(-1px);}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line);}
.btn-ghost:hover{border-color:var(--ink);}

/* header */
header{
  position:sticky; top:0; z-index:20;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
/* Le bandeau supérieur (téléphone + adresse sur une ligne) a été supprimé
   le 12/08/2026 pour alléger l'en-tête. Le numéro est désormais dans
   l'en-tête même (.navtel, cliquable) et l'adresse dans le pied de page
   (.foot-contact), présente sur toutes les pages. */
.nav{
  display:flex; align-items:center; justify-content:space-between;
  /* padding vertical uniquement : le raccourci « padding:16px 0 » remettait
     à zéro le padding horizontal hérité de .wrap, et sous 1180px le nom de
     l'enseigne venait coller au bord de l'écran. */
  padding-top:16px; padding-bottom:16px;
  gap:20px;
}
.brand{display:flex; flex-direction:column; line-height:1; text-decoration:none; color:inherit;}
.brand .name{
  font-family:'Bebas Neue',sans-serif;
  font-size:1.5rem;
  letter-spacing:0.02em;
  white-space:nowrap;   /* sinon le nom se coupe en deux lignes dans l'en-tête */
}
.brand .tag{display:flex; align-items:center; gap:10px; margin-top:6px;}
.brand .tag img{height:26px; width:auto; display:block; filter:var(--logo-filter,none);}
.brand .tag .sep{width:1px; height:12px; background:var(--line);}
.brand .tag .txt{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.62rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--steel);
  white-space:nowrap;
}
/* Mention « Agent officiel — Roquemaure » : MASQUÉE À TOUTES LES LARGEURS.
   Mesure du 12/08/2026 : avec elle, l'en-tête réclame 1384px alors que la
   largeur utile est de 1084px — et cette largeur utile est CONSTANTE au-delà
   de 1200px, puisque le conteneur est plafonné à 1180px. Elle ne peut donc
   tenir sur aucun écran, même très large : elle passait sous les liens du
   menu. L'information reste portée par les deux logos et par la ligne du
   pied de page (« Agent Renault & Dacia »), présente sur chaque page.
   Ne pas la réafficher sans refaire la mesure de largeur. */
.brand .tag .txt{display:none;}
.brand .tag .sep:nth-of-type(2){display:none;}  /* 2e trait : le dernier span du groupe est .txt, pas .sep */
/* Le conteneur est plafonné à 1180px : la largeur utile de l'en-tête ne
   dépasse jamais ~1084px, quelle que soit la taille de l'écran. Avec
   6 entrées de menu + téléphone + bouton, tout doit rester compact et en
   une seule ligne — d'où les nowrap et les espacements resserrés. */
/* Écart de 11px et non 14 : avec huit entrées de menu, l'en-tête
   débordait de 46px au-delà de 1200px de large — mesuré le 13/08/2026
   par _entete.html. Toute nouvelle entrée DOIT être vérifiée avec ce
   banc avant d'être mise en ligne. */
.navlinks{display:flex; gap:11px; list-style:none; margin:0; padding:0; font-size:0.875rem; font-weight:500;}
.navlinks a{text-decoration:none; padding:4px 0; border-bottom:2px solid transparent; white-space:nowrap;}
.navlinks a:hover, .navlinks a[aria-current="page"]{border-color:var(--ink);}
.navcta{display:flex; align-items:center; gap:8px;}
.navcta .btn{padding:12px 16px; font-size:0.875rem;}

/* téléphone dans l'en-tête — remplace celui de l'ancien bandeau */
.navtel{
  display:inline-flex; align-items:center; gap:6px;
  min-height:44px; padding:0 10px;
  text-decoration:none; color:var(--ink);
  font-family:'IBM Plex Mono',monospace; font-size:0.8rem; font-weight:500;
  border:1px solid var(--line); border-radius:var(--radius);
  white-space:nowrap;
}
.navtel:hover{border-color:var(--ink);}
.navtel:focus-visible{outline:2px solid var(--ink); outline-offset:2px;}
.navtel .ico{font-size:1rem; line-height:1;}

/* Reprise du bouton « Prendre rendez-vous » en bas du menu déroulant :
   sous 768px il disparaît de l'en-tête (place insuffisante) et réapparaît
   ici, pour rester accessible. Masqué partout ailleurs. */
.nav-mobile-cta{display:none;}

/* bouton menu (visible uniquement sous 1024px — voir media queries) */
.navtoggle{
  display:none;
  width:44px; height:44px; flex:none;
  align-items:center; justify-content:center;
  flex-direction:column; gap:5px;
  background:transparent; border:1px solid var(--line); border-radius:var(--radius);
  cursor:pointer; padding:0;
}
.navtoggle .bar{
  display:block; width:20px; height:2px; background:var(--ink);
  transition:transform 160ms ease, opacity 160ms ease;
}
.navtoggle:focus-visible{outline:2px solid var(--ink); outline-offset:2px;}
/* croix quand le menu est ouvert */
header.nav-open .navtoggle .bar:nth-child(1){transform:translateY(7px) rotate(45deg);}
header.nav-open .navtoggle .bar:nth-child(2){opacity:0;}
header.nav-open .navtoggle .bar:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
@media (prefers-reduced-motion:reduce){
  .navtoggle .bar{transition:none;}
}

/* hero (accueil uniquement) */
.hero{
  position:relative;
  /* Hauteur réduite le 18/08/2026 : la bannière occupait la quasi-totalité
     du premier écran et repoussait le stock d'occasion hors de vue. */
  padding:clamp(40px,6vw,72px) 0 clamp(36px,5vw,60px);
  overflow:hidden;
  /* Aucune bordure : « --line » est une teinte pensée pour les fonds
     clairs, et posée ici elle traçait un trait pâle en travers d'une
     photo sombre. Le bandeau des services, juste dessous, marque déjà la
     séparation. */
  /* Les deux voiles sont DANS le fond, empilés au-dessus de la photo,
     et non dans un pseudo-élément.

     Motif : un fond se peint sous la bordure, alors qu'un enfant en
     « inset:0 » s'arrête à la limite intérieure. Avec la bordure basse
     d'un pixel, la photo restait donc à nu sur cette rangée — un liseré
     clair en bas de la bannière, visible sur toute la largeur. Empilés
     ici, voiles et photo couvrent exactement la même surface, quelle que
     soit la bordure.

     Le premier voile descend verticalement et va JUSQU'AU NOIR, ou
     presque : à 62 % d'opacité, le bas de la photo restait plus clair
     que le bandeau des services posé dessous, et la rupture se lisait
     comme un trait en travers de la bannière.
     Le second, en diagonale, assombrit la gauche pour que le titre
     ressorte. */
  background-image:
    linear-gradient(to bottom, rgba(9,10,12,0) 42%, rgba(9,10,12,0.34) 76%, rgba(9,10,12,0.93) 100%),
    linear-gradient(112deg, rgba(9,10,12,0.92) 0%, rgba(9,10,12,0.82) 42%, rgba(9,10,12,0.42) 74%, rgba(9,10,12,0.66) 100%),
    url('../img/hero-building.jpg');
  background-size:cover, cover, cover;
  background-position:center, center, center 60%;
  background-repeat:no-repeat;
}
.hero-grid{
  position:relative;
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap:clamp(28px,5vw,64px);
  align-items:center;
}
.hero .eyebrow{color:#c9cdd1;}
.hero h1{font-size:clamp(2.3rem,5vw,3.9rem); line-height:0.98; margin-top:12px; color:#ffffff;}
.hero h1 mark{
  background:#ffffff; color:#0c0d0f; padding:0 8px;
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
}
.hero-sub{margin-top:16px; max-width:46ch; color:#dfe1e3; font-size:1rem;}
.hero-cta{display:flex; gap:14px; margin-top:24px; flex-wrap:wrap;}
.hero .btn-ghost{color:#ffffff; border-color:rgba(255,255,255,0.55);}
.hero .btn-ghost:hover{border-color:#ffffff;}
.hero-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 10px 28px rgba(0,0,0,0.32); padding:22px;
}
.hero-card .k{font-family:'Bebas Neue',sans-serif; font-size:2.6rem; line-height:1; color:var(--ink);}
.hero-card .lbl{
  font-family:'IBM Plex Mono',monospace; font-size:0.68rem; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--steel); margin-top:6px;
}
/* La grille suit le NOMBRE d'encarts réellement affichés : ils sont
   composés à partir de ce que le site sait compter, et il y en a deux,
   trois ou quatre selon ce qui est en ligne. Une grille figée à deux
   colonnes laissait une case vide avec trois chiffres. */
.hero-stats{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px;}
.hero-stats[data-n="2"]{grid-template-columns:1fr 1fr;}
.hero-stats[data-n="3"]{grid-template-columns:repeat(3, 1fr);}
.hero-stats[data-n="4"]{grid-template-columns:1fr 1fr;}

/* page header (sous-pages) */
.pagehead{
  background:var(--graphite);
  color:#f2f2ef;
  padding:clamp(40px,7vw,68px) 0;
  border-bottom:1px solid var(--line);
}
.pagehead .eyebrow{color:#aeb2b6;}
.pagehead h1{font-size:clamp(2.2rem,5vw,3.4rem); margin-top:10px; color:#ffffff;}
.pagehead p{margin-top:14px; max-width:60ch; color:#c7cacd;}

/* photo strip */

/* activities strip */
.strip{background:var(--graphite); color:#f2f2ef; border-bottom:1px solid var(--line);}
.strip-row{display:grid; grid-template-columns:repeat(5,1fr); padding:0;}
.strip-item{
  padding:22px 18px; border-right:1px solid rgba(255,255,255,0.1);
  font-size:0.86rem; font-weight:500; display:flex; align-items:center; gap:10px;
  text-decoration:none; color:inherit;
}
.strip-item:last-child{border-right:none;}
.strip-item .ico{width:22px; height:22px; flex:none; color:#f2f2ef;}

section{padding:clamp(56px,8vw,100px) 0;}
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px; margin-bottom:40px; flex-wrap:wrap;
  border-bottom:1px solid var(--line); padding-bottom:22px;
}
.section-head h2{font-size:clamp(1.9rem,3.4vw,2.6rem);}

/* offres et événements */
.promos{background:var(--surface); border-bottom:1px solid var(--line);}
/* Chaque carte porte son propre trait. La version précédente dessinait
   les séparations avec le fond de la grille vu au travers d'un écart d'un
   pixel : dès qu'il y avait moins de trois publications, ce fond restait
   visible dans les colonnes vides sous la forme d'un grand rectangle gris. */
.promo-grid{--ecart:20px;}
/* Une ou deux publications ne doivent pas laisser un vide béant à côté :
   la grille se resserre sur ce qu'elle contient réellement. */

.promo{
  background:var(--surface); padding:clamp(22px,3vw,30px);
  border:1px solid var(--line); border-radius:var(--radius);
  display:flex; flex-direction:column; gap:10px; overflow:hidden;
}
.promo-tag{
  align-self:flex-start;
  font-family:'IBM Plex Mono',monospace; font-size:0.68rem; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--dacia);
  border:1px solid var(--dacia); border-radius:var(--radius);
  padding:3px 8px;
}
.promo h3{font-size:1.25rem; font-family:'IBM Plex Sans',sans-serif; font-weight:600; letter-spacing:0;}
.promo-when{font-size:0.78rem; color:var(--steel);}
.promo p{color:var(--steel); font-size:0.94rem;}
/* le bouton se cale en bas : les cartes gardent la même hauteur et les
   boutons restent alignés même si les textes ont des longueurs différentes */
.promo .btn{align-self:flex-start; margin-top:auto;}

/* brands */
.brand-mark{height:46px; width:auto; display:block; align-self:flex-start;}

/* used cars cta */
.used{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(28px,5vw,52px); display:grid; grid-template-columns:1.3fr 0.7fr; gap:32px; align-items:center;
}
.used h3{font-size:clamp(1.5rem,3vw,2.1rem); max-width:20ch;}
/* Le bouton est un element de grille : il s'etire sur toute la colonne,
   et son libelle restait cale a gauche d'un bloc de 330 pixels. */
.used .btn{justify-content:center;}
.used p{color:var(--steel); margin-top:12px; max-width:48ch;}

/* services grid */
.services{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
/* Carte de prestation, page d'accueil. La vignette occupe toute la
   largeur, bord à bord ; le rembourrage descend sur le texte plutôt que
   sur la carte, comme sur la page Atelier. Neuf lignes de texte seules
   se ressemblaient toutes, et rien n'attirait l'œil sur la prestation
   qu'on cherchait. */
.svc{
  background:var(--surface);
  display:flex; flex-direction:column; align-items:stretch; gap:0;
  overflow:hidden;
  /* Le soulignement du lien courait sous le numéro et le libellé, juste
     sous la photo. Comme pour .strip-item, la tuile entière est le lien :
     c'est le survol qui le signale, pas un trait. */
  text-decoration:none; color:inherit;
}
.svc-vignette{
  width:100%; height:auto; aspect-ratio:8/5; object-fit:cover; display:block;
  transition:transform .35s ease;
}
.svc:hover .svc-vignette,
.svc:focus-visible .svc-vignette{transform:scale(1.04);}
/* Le numéro et le libellé se replacent sous la vignette, sur une ligne. */
.svc .num, .svc .lbl{padding-left:20px; padding-right:20px;}
.svc .num{padding-top:16px;}
.svc .lbl{padding-bottom:18px; margin-top:5px;}
.svc .num{font-family:'IBM Plex Mono',monospace; font-size:0.78rem; color:var(--steel);}
.svc .lbl{font-weight:600; font-size:0.96rem; line-height:1.3;}
/* La vignette sort du rembourrage de la carte : elle occupe toute la
   largeur, bord à bord, comme la photo d'une annonce. D'où le padding
   déplacé sur le contenu plutôt que sur la carte. */
/* La carte de prestation est un LIEN vers sa page dédiée : toute la
   carte est cliquable, pas seulement un libellé en pied. Le repli écrit
   dans la page reste un <div> — ces règles ne le gênent pas. */
.svc-detail{
  background:var(--surface); display:flex; flex-direction:column;
  text-decoration:none; color:inherit; overflow:hidden;
  transition:background 160ms ease;
}
.svc-detail:hover{background:var(--paper);}
.svc-detail:focus-visible{outline:2px solid var(--ink); outline-offset:-2px;}
.svc-detail:hover .svc-visuel,
.svc-detail:focus-visible .svc-visuel{transform:scale(1.04);}
/* « En savoir plus » collé en bas de carte : sur une rangée de trois, les
   trois libellés sont alors sur la même ligne, quelle que soit la
   longueur des descriptions. */
.svc-suite{
  margin-top:auto; padding-top:18px; padding-bottom:clamp(22px,3vw,30px);
  font-family:'IBM Plex Mono',monospace; font-size:0.74rem;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--dacia);
  display:inline-flex; align-items:center; gap:8px;
}
.svc-suite::after{content:'\2192'; transition:transform 160ms ease;}
.svc-detail:hover .svc-suite::after{transform:translateX(4px);}
.svc-visuel{
  width:100%; height:auto; aspect-ratio:8/5; object-fit:cover; display:block;
  transition:transform .35s ease;
}
.svc-detail > :not(.svc-visuel){
  padding-left:clamp(22px,3vw,30px); padding-right:clamp(22px,3vw,30px);
}
.svc-detail p{margin-top:8px;}
.svc-detail > .top{padding-top:clamp(20px,2.6vw,26px);}
/* Dernier élément de la carte : c'est lui qui porte la marge du bas,
   sinon les neuf cartes n'ont pas toutes la même hauteur de pied. */
.svc-detail > p:last-child{padding-bottom:clamp(22px,3vw,30px);}
.svc-detail h3{margin-top:10px;}
.svc-detail > .top + h3{margin-top:8px;}
.svc-detail .top{display:flex; align-items:center; justify-content:space-between;}
/* Le pictogramme au trait faisait doublon avec la vignette, qui porte le
   même dessin en grand. On le masque plutôt que de le retirer du HTML :
   il reste disponible si l'on revenait à une présentation sans images. */
.svc-detail .ico{display:none;}
.svc-detail .top{justify-content:flex-end;}
.svc-detail .num{font-family:'IBM Plex Mono',monospace; font-size:0.78rem; color:var(--steel);}
.svc-detail h3{font-size:1.15rem; font-family:'IBM Plex Sans',sans-serif; font-weight:600; letter-spacing:0;}
.svc-detail p{color:var(--steel); font-size:0.92rem;}

/* ══ Page dédiée d'une prestation (prestation.html) ══
   Le texte à gauche, ce qui est compris et l'appel à droite. La colonne
   de droite reste visible pendant la lecture : le bouton de rendez-vous
   ne doit jamais être « plus haut sur la page ». */
.presta-visuel{
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  background:var(--surface);
}
.presta-visuel img{
  width:100%; height:auto; aspect-ratio:8/5; object-fit:cover; display:block;
}
.presta-grille{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:clamp(28px,4vw,56px);}
.presta-texte p{
  font-size:1.02rem; line-height:1.72; color:var(--ink); max-width:66ch;
}
.presta-texte p + p{margin-top:18px;}
/* Première phrase mise en avant : c'est elle qui décide si on lit la
   suite. */
.presta-texte p:first-child{font-size:1.12rem; line-height:1.62;}

.presta-cote{display:flex; flex-direction:column; gap:18px; align-self:start; position:sticky; top:96px;}
.presta-encart{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(20px,2.4vw,26px);
}
.presta-points{list-style:none; margin:14px 0 0; padding:0;}
.presta-points li{
  position:relative; padding-left:22px; font-size:0.94rem; line-height:1.5;
}
.presta-points li + li{margin-top:11px; padding-top:11px; border-top:1px solid var(--line);}
/* Coche tracée en CSS : pas d'image à charger, et elle suit la couleur
   du texte en thème sombre. */
.presta-points li::before{
  content:''; position:absolute; left:2px; top:0.38em;
  width:9px; height:5px; border-left:2px solid var(--dacia);
  border-bottom:2px solid var(--dacia); transform:rotate(-45deg);
}
.presta-appel{
  background:var(--graphite); color:#f2f2ef; border-radius:var(--radius);
  padding:clamp(20px,2.4vw,26px); display:flex; flex-direction:column; align-items:flex-start; gap:10px;
}
.presta-appel strong{font-size:1.05rem; line-height:1.35;}
.presta-appel p{color:#c7cacd; font-size:0.9rem; line-height:1.55; margin:0;}
/* Sur le panneau sombre, le bouton d'action s'inverse : un bouton
   « encre » sur un fond « graphite », c'est deux noirs l'un sur l'autre
   et l'appel à l'action disparait. */
.presta-appel .btn{margin-top:6px; justify-content:center;}
.presta-appel .btn-primary{background:#ffffff; color:var(--ink); border-color:#ffffff;}
.presta-appel .btn-primary:hover{background:var(--paper); border-color:var(--paper);}
.presta-tel{
  font-family:'IBM Plex Mono',monospace; font-size:0.95rem;
  color:#ffffff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,0.35);
  padding-bottom:2px; min-height:0;
}
.presta-tel:hover{border-bottom-color:#ffffff;}

.presta-galerie{display:grid; gap:1px; background:var(--line); border:1px solid var(--line);}
.presta-galerie[data-n="1"]{grid-template-columns:minmax(0,1fr);}
.presta-galerie[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr));}
.presta-galerie[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr));}
.presta-galerie figure{margin:0; background:var(--surface); display:flex; flex-direction:column;}
.presta-galerie img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; display:block;}
.presta-galerie figcaption{padding:12px 16px; font-size:0.84rem; color:var(--steel);}

.presta-atouts{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.presta-atouts > div{background:var(--surface); padding:clamp(20px,2.6vw,28px);}
.presta-atouts h3{font-size:1.02rem; font-family:'IBM Plex Sans',sans-serif; font-weight:600; letter-spacing:0;}
.presta-atouts p{margin-top:8px; color:var(--steel); font-size:0.9rem; line-height:1.55;}

/* Le fil d'Ariane du bandeau : un lien discret, sur fond sombre. */
.pagehead .eyebrow a{
  position:relative;
  color:#aeb2b6; text-decoration:none; border-bottom:1px solid rgba(255,255,255,0.28);
}
.pagehead .eyebrow a:hover{color:#ffffff; border-bottom-color:#ffffff;}
/* Sur téléphone, ce lien ne fait que 20 px de haut : on élargit sa zone
   tactile par un calque invisible, sans changer sa hauteur à l'œil ni
   décaler le titre qui suit. */
@media (max-width:767px){
  .pagehead .eyebrow a::before{
    content:''; position:absolute; left:0; right:0; top:-12px; bottom:-12px;
  }
}

/* team */
.team{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.member{background:var(--surface); padding:26px 20px;}
.member .initials{
  width:44px; height:44px; background:var(--ink); color:var(--paper);
  display:flex; align-items:center; justify-content:center;
  font-family:'Bebas Neue',sans-serif; font-size:1.1rem;
}
.member .who{margin-top:14px; font-weight:600;}
.member .role{color:var(--steel); font-size:0.82rem; margin-top:2px;}

/* practical info */
.practical{display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--line); border:1px solid var(--line);}
.practical .col{background:var(--surface); padding:clamp(26px,4vw,40px);}
.hours{width:100%; border-collapse:collapse; font-size:0.92rem;}
.hours td{padding:7px 0; border-bottom:1px solid var(--line);}
.hours td:first-child{color:var(--steel);}
.hours td:last-child{text-align:right;}
.hours tr.closed td:last-child{color:var(--steel);}
.contact-row{display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--line); font-size:0.94rem;}
.contact-row:last-child{border-bottom:none;}
.contact-row .k{color:var(--steel); display:flex; align-items:center; gap:8px;}
.ico-sm{width:16px; height:16px; flex:none; color:var(--steel);}

/* section photo (bannière pleine largeur) */
.section-photo{
  aspect-ratio:16/7; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
}
.section-photo img{width:100%; height:100%; object-fit:cover; display:block;}

/* carte de situation (page Contact) — pleine largeur sous les deux
   colonnes d'infos pratiques : dans la colonne de gauche, elle était
   réduite de moitié alors que la moitié droite restait vide. */
.mapwrap{margin-top:24px; display:flex; flex-direction:column; gap:10px;}
.mapframe{
  width:100%; display:block;
  /* hauteur fixe plutôt qu'un ratio : en pleine largeur, un ratio 16/9
     donnerait une carte de plus de 650px de haut sur grand écran. */
  height:clamp(320px, 46vh, 520px);
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface);
}
.maplink{
  align-self:flex-start;
  display:inline-flex; align-items:center; min-height:44px;
  font-size:0.85rem; color:var(--ink);
  text-decoration:underline; text-underline-offset:3px;
}
/* ancien emplacement réservé, conservé au cas où une page l'utiliserait */

/* form */
.form{display:grid; gap:16px; max-width:560px;}
.form .row2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.field{display:flex; flex-direction:column; gap:6px;}
.field label{font-size:0.8rem; font-weight:600; color:var(--ink);}

/* ══ CHAMPS DE SAISIE — RÈGLE UNIQUE ══
   Tous les champs du site, y compris ceux de l'espace de gestion, passent
   par ici. Le sélecteur vise les balises elles-mêmes et non un conteneur
   particulier : auparavant la règle visait « .form select », or les
   formulaires du back-office n'ont pas cette classe — leurs listes
   déroulantes retombaient sur le style du navigateur (19px, Arial, sans
   arrondi) à côté de champs texte de 46px.

   Hauteur imposée et non « min-height » : un select et un input[date]
   calculent leur hauteur différemment d'un input texte et arrivaient à
   48px contre 46px. */
/* Sélecteur par exclusion et non par liste de types : un champ écrit
   simplement « <input> » (sans attribut type) est un champ texte pour le
   navigateur mais n'est PAS atteint par « input[type=text] ». C'est le cas
   de plusieurs champs de l'espace de gestion, qui restaient en 22px Arial. */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="hidden"]):not([type="range"]):not([type="color"]),
select, textarea{
  box-sizing:border-box;
  width:100%;
  font-family:'IBM Plex Sans',sans-serif;
  font-size:0.95rem;
  line-height:1.4;
  color:var(--ink);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:0 14px;
  height:46px;
  margin:0;
}
textarea{
  height:auto; min-height:120px; padding:12px 14px; resize:vertical;
}

/* Les champs « fichier » sont exclus de la règle ci-dessus — un
   navigateur refuse d'en changer la hauteur par « height ». Ils
   restaient donc à 22 px Arial au milieu de champs de 46 px, et sous le
   seuil de 44 px des zones tactiles. On habille donc le conteneur, et le
   bouton interne par ::file-selector-button. */
input[type="file"]{
  box-sizing:border-box; width:100%;
  font-family:'IBM Plex Sans',sans-serif; font-size:0.95rem;
  color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius);
  /* Hauteur FIXE et non « min-height » : le bouton interne poussait la
     boîte à 56 px, soit 10 de plus que les champs voisins. La règle du
     site est que tous les champs d'un même formulaire ont exactement la
     même hauteur. */
  height:46px; padding:0 12px; margin:0; cursor:pointer;
  display:flex; align-items:center;
}
input[type="file"]::file-selector-button{
  font:inherit; font-size:0.85rem; font-weight:600;
  color:var(--ink); background:var(--paper);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:0 12px; height:30px; margin-right:12px; cursor:pointer;
}
input[type="file"]::file-selector-button:hover{border-color:var(--ink);}

/* Le select doit perdre son habillage natif pour s'aligner exactement sur
   les champs texte ; la flèche est redessinée en fond. */
select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding-right:38px; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236d7278' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
}
/* Le champ date affiche une icône native : on lui laisse la place. */
input[type="date"]{padding-right:10px;}

input:focus, select:focus, textarea:focus{outline:2px solid var(--ink); outline-offset:1px;}

@media (max-width:767px){
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="hidden"]):not([type="range"]):not([type="color"]),
  select, textarea{font-size:1rem;}   /* 16px : évite le zoom automatique sur iPhone */
  /* Même hauteur que les autres champs, y compris sur téléphone : 46 px
     dépassent déjà le seuil confortable de 44 px. */
  input[type="file"]{font-size:1rem;}
}
.form-note{color:var(--steel); font-size:0.82rem;}
/* Un lien au milieu d'une mention légale ne fait que la hauteur de sa
   ligne — 19 px, bien en dessous des 44 px confortables au doigt. On
   agrandit la zone tactile par un rembourrage vertical, compensé par une
   marge négative : la surface cliquable grandit, la mise en page ne bouge
   pas d'un pixel. Réservé au téléphone : à la souris, 19 px suffisent. */
@media (max-width:767px){
  .form-note a{
    display:inline-block;
    padding-top:12px; padding-bottom:12px;
    margin-top:-12px; margin-bottom:-12px;
  }
}

footer{background:var(--graphite); color:#dfe1de; padding:36px 0;}
.foot-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; font-size:0.8rem; color:#9a9d9a;}
.foot-row a{text-decoration:none; color:#c7c9c5;}
.foot-links{display:flex; gap:20px; flex-wrap:wrap;}
/* identité + coordonnées (adresse et téléphone repris de l'ancien bandeau).
   Adresse et téléphone sont deux blocs distincts séparés par un gap, sans
   caractère « · » écrit en dur : en colonne sur mobile, le séparateur se
   serait retrouvé orphelin en fin de ligne. */
.foot-id{display:flex; flex-direction:column; gap:5px;}
.foot-contact{
  display:flex; flex-wrap:wrap; align-items:center; gap:0 14px;
  font-family:'IBM Plex Mono',monospace; color:#c7c9c5;
}
.foot-contact a{text-decoration:underline; text-underline-offset:2px;}

/* ══ TABLETTE ET EN DESSOUS (< 1200px) ══
   Le menu horizontal ne tient plus : il devient un panneau déroulant
   commandé par le bouton .navtoggle. Avant, .navlinks passait simplement
   en display:none — le site n'était plus navigable du tout sur tablette
   et sur mobile. */
@media (max-width:1199px){
  .navtoggle{display:flex;}
  .navlinks{
    display:none;
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; gap:0;
    margin:0; padding:6px 0;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    box-shadow:0 12px 24px rgba(0,0,0,0.14);
    font-size:1rem;
  }
  header.nav-open .navlinks{display:flex;}
  .navlinks li{width:100%;}
  .navlinks a{
    display:flex; align-items:center;
    min-height:48px;                     /* zone de tap confortable */
    padding:0 clamp(20px,4vw,48px);
    border-bottom:none;
    border-left:3px solid transparent;
  }
  .navlinks a:hover, .navlinks a[aria-current="page"]{
    border-bottom:none;
    border-left-color:var(--ink);
    background:rgba(21,23,26,0.04);
  }

  .hero-grid{grid-template-columns:1fr;}
  .strip-row{grid-template-columns:repeat(2,1fr);}
  .strip-item{border-bottom:1px solid rgba(255,255,255,0.1);}
  .used{grid-template-columns:1fr;}
  .services{grid-template-columns:1fr 1fr;}
  .team{grid-template-columns:1fr 1fr;}
  .practical{grid-template-columns:1fr;}
  .form .row2{grid-template-columns:1fr;}
}

/* ══ SMARTPHONE (< 768px) ══
   Seuil unique : toutes les règles téléphone sont à 767 px. Un iPad
   classique en portrait mesure exactement 768 — mélanger 767 et 768
   lui donnait une mise en page moitié tablette, moitié mobile.
   Typographie : plancher à 14px (0.875rem) sur tous les libellés, y compris
   les petites capitales en monospace. Leur interlettrage est réduit en
   conséquence pour qu'elles ne débordent pas une fois agrandies.
   Zones de tap : 44px minimum sur tout ce qui se clique. */
@media (max-width:767px){
  /* en-tête : la mention « Agent officiel » passait sous le bouton
     « Prendre rendez-vous ». On la masque et on autorise le bloc marque
     à se compresser (min-width:0) pour supprimer tout recouvrement. */
  .nav{gap:12px;}
  .brand{min-width:0; flex:1 1 auto;}
  .brand .name{font-size:1.25rem;}
  .brand .tag .txt{display:none;}
  .brand .tag .sep:nth-of-type(2){display:none;}  /* 2e trait : le dernier span du groupe est .txt, pas .sep */
  .brand .tag img{height:22px;}
  .navcta{flex:none; gap:8px;}

  /* Place insuffisante à 375px pour marque + téléphone + bouton + menu :
     le bouton « Prendre rendez-vous » quitte l'en-tête et réapparaît en
     bas du menu déroulant (.nav-mobile-cta). Le téléphone reste visible
     en permanence — c'est l'action principale pour un garage — mais
     réduit à son icône, dans une cible de 44px. */
  .navcta .btn{display:none;}
  .nav-mobile-cta{display:block; padding:10px clamp(20px,4vw,48px) 6px;}
  .nav-mobile-cta .btn{display:inline-flex; width:100%; justify-content:center;}
  .navtel{padding:0; width:44px; justify-content:center; gap:0;}
  .navtel .num{display:none;}
  .navtel .ico{font-size:1.15rem;}

  /* plancher de lisibilité à 14px */
  .eyebrow{font-size:0.875rem; letter-spacing:0.1em;}
  .brand .tag .txt{font-size:0.875rem; letter-spacing:0.06em;}
  .hero-card .lbl{font-size:0.875rem; letter-spacing:0.06em;}
  .strip-item{font-size:0.9375rem;}
  .svc .num, .svc-detail .num{font-size:0.875rem;}
  .svc .lbl{font-size:1rem;}
  .svc-detail p{font-size:0.9375rem;}
  .member .role{font-size:0.875rem;}
  .hours{font-size:0.9375rem;}
  .contact-row{font-size:0.9375rem;}
  .form-note{font-size:0.875rem;}
  .maplink{font-size:0.875rem;}
  .field label{font-size:0.875rem;}
  .foot-row{font-size:0.875rem;}
  .foot-links a{display:inline-flex; align-items:center; min-height:44px;}
  /* le téléphone du pied de page et celui des coordonnées (page Contact)
     sont des liens d'appel : cible de 44px comme le reste */
  .foot-contact{flex-direction:column; align-items:flex-start; gap:0;}
  .foot-contact a, .contact-row a{display:inline-flex; align-items:center; min-height:44px;}

  /* grilles en pleine largeur */
  .strip-row{grid-template-columns:1fr;}
  .services{grid-template-columns:1fr;}
  .team{grid-template-columns:1fr;}
  .promo-tag{font-size:0.875rem; letter-spacing:0.08em;}
  .promo-when{font-size:0.875rem;}
  .promo p{font-size:0.9375rem;}
  .hero-stats,
.hero-stats[data-n="2"],
.hero-stats[data-n="3"],
.hero-stats[data-n="4"]{grid-template-columns:1fr;}
  .hero-cta .btn{flex:1 1 auto; justify-content:center;}
}
@media (prefers-reduced-motion:reduce){
  .btn{transition:none;}
}

/* ── Gamme neuve alimentée automatiquement (page Véhicules neufs) ──
   Cartes de hauteur identique et boutons alignés en bas quelle que soit
   la longueur des noms de modèles. */
.modeles-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); margin-bottom:28px;
}
.modele{background:var(--surface); display:flex; flex-direction:column;}
.modele-visuel{aspect-ratio:16/10; overflow:hidden;}
.modele-visuel img{width:100%; height:100%; object-fit:cover; display:block;}
.modele-corps{padding:20px 22px; display:flex; flex-direction:column; gap:8px; flex:1;}
.modele-marque{
  font-family:'IBM Plex Mono',monospace; font-size:0.68rem; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--steel);
}
.modele h3{font-size:1.3rem; font-family:'IBM Plex Sans',sans-serif; font-weight:600; letter-spacing:0;}
.modele-prix{display:flex; flex-direction:column; gap:1px;}
.modele-prix-mention{
  font-family:'IBM Plex Mono',monospace; font-size:0.7rem; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--steel);
}
.modele-prix strong{font-family:'Bebas Neue',sans-serif; font-size:1.7rem; font-weight:400; letter-spacing:0.01em;}
.modele-versions{font-size:0.85rem; color:var(--steel);}
/* Une carte porte maintenant un ou deux boutons selon que l'essai est
   proposé. Ils se calent en bas pour que toutes les cartes d'une même
   ligne restent alignées, quel que soit leur nombre de boutons. */
.modele-actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:12px;}
.modele-actions .btn{align-self:flex-start; margin-top:0;}
.modele .btn{align-self:flex-start; margin-top:auto;}
@media (max-width:767px){
  /* En colonne unique, deux boutons côte à côte deviennent illisibles. */
  .modele-actions{flex-direction:column; align-items:stretch;}
  .modele-actions .btn{width:100%; justify-content:center;}
}
.gamme-note{color:var(--steel); font-size:0.85rem; max-width:70ch;}
@media (max-width:1199px){
  .modeles-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:767px){
  .modeles-grid{grid-template-columns:1fr;}
  .modele-marque{font-size:0.875rem; letter-spacing:0.08em;}
  .modele-prix-mention{font-size:0.875rem;}
  .modele-versions{font-size:0.9375rem;}
  .gamme-note{font-size:0.9375rem;}
}

/* ── Stock d'occasion alimenté depuis l'espace de gestion ──
   Même principe que la gamme neuve : cartes de hauteur égale et
   boutons alignés en bas, quelle que soit la longueur des libellés. */
/* Chaque carte porte son propre trait. La version précédente dessinait
   les séparations avec le fond de la grille vu au travers d'un écart d'un
   pixel : avec moins de trois véhicules, ce fond restait visible dans les
   colonnes vides sous la forme d'un rectangle gris — le même défaut que
   celui corrigé sur les actualités le 13/08/2026. */
.vo-grid{--ecart:20px; margin-bottom:28px;}

.vo{
  background:var(--surface); display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  position:relative;   /* repère du badge « Nouveau » */
}

/* ── Version « page d'accueil » ──
   Trois colonnes en toutes circonstances, et une photo un peu moins
   haute : la page d'accueil montre qu'il y a du stock, elle ne le
   détaille pas. Deux véhicules étalés sur toute la largeur écrasaient
   les rubriques suivantes. */
.vo-grid--accueil .vo-visuel{aspect-ratio:16/11;}
.vo-grid--accueil .vo-corps{padding:16px 18px; gap:7px;}
.vo-grid--accueil .vo h3{font-size:1.1rem;}
.vo-grid--accueil .vo-version{font-size:0.85rem;}
.vo-grid--accueil .vo-prix strong{font-size:1.5rem;}
.vo-grid--accueil .vo-garantie{font-size:0.8rem;}
.vo-grid--accueil .btn{padding:9px 14px; min-height:40px; font-size:0.85rem;}

/* Bouton de renvoi vers le parc complet, sur la page d'accueil. */
.vo-bas{display:flex; justify-content:center; margin-top:4px;}
/* Aucun fond derrière l'image : un aplat gris se voit pendant le
   chargement et reste affiché si la photo manque — on préfère ne rien
   montrer plutôt qu'un rectangle vide. */

/* ── Badge « Nouveau » ──
   Posé en absolu : il ne pousse rien, les cartes d'une même rangée
   gardent la même hauteur et le même alignement interne, qu'elles
   portent le badge ou non. Coin haut-gauche, à l'opposé du compteur de
   photos qui occupe déjà le coin bas-droit. */
.vo-neuf{
  position:absolute; left:12px; top:12px; z-index:2;
  display:inline-flex; align-items:center; gap:6px;
  background:var(--neuf); color:#fff;
  font-size:11px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; padding:6px 13px 6px 11px;
  border-radius:999px;
  box-shadow:0 2px 10px rgba(21,23,26,0.28);
  pointer-events:none;   /* la photo dessous reste cliquable */
}
/* Petite étoile dessinée en CSS : charger un pictogramme de plus pour
   neuf pixels de décor n'en vaut pas la peine. */
.vo-neuf::before{
  content:''; width:9px; height:9px; flex:none; background:currentColor;
  clip-path:polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%,
                    50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.vo-visuel{position:relative; aspect-ratio:4/3; overflow:hidden;}
.vo-visuel img{width:100%; height:100%; object-fit:cover; display:block;}
.vo-nbphotos{
  position:absolute; right:10px; bottom:10px;
  background:rgba(21,23,26,0.78); color:#f2f2ef;
  font-family:'IBM Plex Mono',monospace; font-size:0.68rem; letter-spacing:0.06em;
  padding:4px 8px; border-radius:var(--radius);
}
.vo-corps{padding:20px 22px; display:flex; flex-direction:column; gap:8px; flex:1;}
.vo h3{font-size:1.25rem; font-family:'IBM Plex Sans',sans-serif; font-weight:600; letter-spacing:0;}
.vo-version{color:var(--steel); font-size:0.9rem;}
.vo-faits{
  list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px;
  font-family:'IBM Plex Mono',monospace; font-size:0.72rem; letter-spacing:0.04em;
}
.vo-faits li{border:1px solid var(--line); border-radius:var(--radius); padding:3px 8px; color:var(--steel);}
.vo-prix strong{font-family:'Bebas Neue',sans-serif; font-size:1.8rem; font-weight:400; letter-spacing:0.01em;}
.vo-garantie{font-size:0.85rem; color:var(--dacia); font-weight:500;}
.vo .btn{align-self:flex-start; margin-top:auto;}
@media (max-width:1199px){
}
@media (max-width:767px){
  /* En colonne unique, on retrouve la taille normale : il n'y a plus de
     largeur à économiser. */
  .vo-grid--accueil .vo h3{font-size:1.25rem;}
  .vo-grid--accueil .vo-prix strong{font-size:1.8rem;}
  .vo-bas .btn{width:100%; justify-content:center;}
  .vo-version{font-size:0.9375rem;}
  .vo-faits{font-size:0.875rem;}
  .vo-nbphotos{font-size:0.875rem;}
  .vo-garantie{font-size:0.9375rem;}
}

/* ── Formulaire de contact ── */
/* Champ piège à robots : retiré de l'affichage sans display:none, que
   certains automates détectent. Il reste hors écran et hors tabulation. */
.pot-de-miel{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.form-retour{padding:12px 14px; border-radius:var(--radius); font-size:0.94rem; margin-top:4px;}
.form-retour.ok{background:var(--dacia-soft); color:#31392a; border:1px solid var(--dacia);}
.form-retour.err{background:#fdecec; color:#8a1c1c; border:1px solid #e0a3a3;}
@media (max-width:767px){
  .form-retour{font-size:0.9375rem;}
}

/* ── Rubriques de marque sur la page d'accueil ──
   Une rubrique par marque, l'une sous l'autre : les gammes Renault et
   Dacia ne se côtoient jamais dans un même bloc. */
/* ── Bande de marque ──
   Le bloc n'a plus de colonne photo : les visuels vivent dans la bande
   défilante, au-dessus. Il ne porte plus que le logo, une phrase et le
   bouton — donc une bande horizontale, et non une carte à moitié vide.

   Le logo à gauche, le texte au milieu, le bouton à droite : on lit dans
   l'ordre où l'on décide. */
.marque-bloc{
  display:flex; align-items:center; gap:clamp(18px,3vw,36px);
  padding:clamp(18px,2.4vw,26px) clamp(20px,3vw,32px);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius);
}
.marque-bloc.renault{border-top:4px solid var(--ink);}
.marque-bloc.dacia{border-top:4px solid var(--dacia);}

/* ── Projecteur de gamme (page d'accueil) ──
   Un modèle à la fois, en grand, qui change de lui-même en fondu. Trois
   formes l'ont précédé : une photo unique (un modèle sur quatorze), une
   mosaïque de vignettes (un trou dès qu'un visuel manquait), une bande
   défilant en continu (des photos trop petites, et l'allure d'un bandeau
   publicitaire).

   Rien ne se déplace à l'écran : seule l'image se substitue à la
   précédente. C'est ce qui sépare une animation calme d'un carrousel qui
   s'agite. */
.gamme-defile{
  margin-bottom:14px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--ink);
}

.proj{position:relative; display:block;}

.proj-scene{
  position:relative; display:block;
  /* Largeur et hauteur FIXÉES séparément, jamais par un rapport.
     Avec « aspect-ratio » plus « max-height », le plafond de hauteur
     rabotait la largeur : la scène tombait à 980 px dans un bloc de
     1084, et les 103 px restants laissaient voir le fond noir sur la
     droite. C'est la bande que l'on voyait à côté de la photo. */
  width:100%;
  /* Un peu plus haut qu'avant : le cadre approche le format 16/9 des
     visuels constructeurs, ce qui réduit d'autant la bande floutée sur
     les côtés. */
  height:clamp(230px, 34vw, 500px);
  background:var(--graphite);
  /* Le navigateur peut ignorer tout ce qui déborde de la scène : le fond
     agrandi de 15 % n'a pas à être calculé au-delà du cadre. */
  contain:paint;
}
.proj-vue{
  position:absolute; inset:0;
  opacity:0;
  /* « visibility » en plus de l'opacité : une vue transparente reste
     dessinée par le navigateur. Avec dix-sept calques portant chacun un
     fond flouté, la page figeait le moteur de rendu. Masquée, elle n'est
     plus peinte du tout.

     Le délai sur « visibility » attend la fin du fondu pour la vue qui
     sort ; la vue qui entre, elle, redevient visible immédiatement. */
  visibility:hidden;
  transition:opacity .28s ease, visibility 0s linear .28s;
}
.proj-vue--active{
  opacity:1;
  visibility:visible;
  transition:opacity .28s ease, visibility 0s linear 0s;
}
/* Fond : la même photo, agrandie pour remplir le cadre puis floutée.
   Elle n'est là que pour éviter deux bandes vides sur les côtés — d'où
   le flou et l'assombrissement, qui l'empêchent de concurrencer la
   photo nette posée par-dessus. */
.proj-fond{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  /* AUCUN filtre : l'image reçue fait 80 px de large et porte déjà son
     flou, calculé une fois par le serveur. Un « filter: blur() » devait
     être recalculé à chaque rendu, sur chaque appareil — assez coûteux
     pour faire saccader la page, et pour bloquer une capture d'écran. */
  transform:scale(1.06);   /* masque les bords délavés par l'étirement */
  display:block;
}
/* La photo elle-même, ENTIÈRE : le recadrage coupait les véhicules —
   un visuel 16/9 dans un cadre plus large perd un tiers de sa hauteur,
   et les rares visuels en portrait étaient massacrés. */
.proj-photo{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain; object-position:center;
  display:block;
}

/* Voile de bas en haut : le nom et le prix restent lisibles quelle que
   soit la photo — certains visuels constructeurs sont clairs en bas,
   d'autres presque noirs. */
.proj-legende{
  position:absolute; left:0; right:0; bottom:0;
  padding:clamp(40px,7vw,72px) clamp(18px,3vw,32px) clamp(20px,2.8vw,28px);
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  background:linear-gradient(to top,
             rgba(9,10,12,0.92) 0%, rgba(9,10,12,0.55) 45%, rgba(9,10,12,0) 100%);
  pointer-events:none;
}
/* La légende s'efface le temps de changer de texte : elle ne se réécrit
   jamais sous les yeux du visiteur. */
.proj-nom, .proj-prix{transition:opacity .14s ease;}
.proj-legende--change .proj-nom,
.proj-legende--change .proj-prix{opacity:0;}
.proj-nom{
  font-family:'Oswald','IBM Plex Sans',sans-serif;
  font-size:clamp(20px,2.6vw,30px);
  font-weight:600; letter-spacing:0.01em; line-height:1.1;
  color:#fff; text-transform:uppercase;
}
.proj-prix{
  font-family:'IBM Plex Mono',monospace;
  font-size:clamp(12px,1.1vw,14px);
  letter-spacing:0.04em; color:rgba(255,255,255,0.82);
}

/* Repères : un par modèle, avec une jauge qui se remplit pendant
   l'affichage — on sait combien de temps il reste au lieu de le
   deviner. */
.proj-reperes{
  position:absolute; left:clamp(18px,3vw,32px); right:clamp(18px,3vw,32px);
  bottom:clamp(9px,1.4vw,14px);
  display:flex; gap:5px;
}
.proj-puce{
  flex:1 1 0; height:16px; padding:0;
  background:none; border:0; cursor:pointer;
  display:flex; align-items:flex-end; position:relative;
}
.proj-puce::after{
  content:''; display:block; width:100%; height:3px;
  background:rgba(255,255,255,0.32); border-radius:2px;
}
.proj-puce:hover::after{background:rgba(255,255,255,0.62);}
.proj-puce:focus-visible{outline:2px solid #fff; outline-offset:2px; border-radius:2px;}
.proj-jauge{display:none;}
.proj-puce--active .proj-jauge{
  display:block; position:absolute; left:0; bottom:0;
  height:3px; border-radius:2px; background:#fff;
  animation:proj-remplir 3.2s linear forwards;
}
.proj--pause .proj-puce--active .proj-jauge{animation-play-state:paused;}
@keyframes proj-remplir{from{width:0;} to{width:100%;}}

@media (max-width:767px){
  .proj-scene{height:clamp(190px, 58vw, 320px);}

  .proj-puce{height:22px;}   /* zone tactile */
}
/* Animation refusée : aucune rotation automatique (gamme.js s'en charge)
   et aucune jauge qui court. */
@media (prefers-reduced-motion:reduce){
  .proj-vue{transition:none;}
  .proj-nom, .proj-prix{transition:none;}
  .proj-puce--active .proj-jauge{animation:none; width:100%;}
}

/* Conservé pour la compatibilité : plus aucun bloc n'utilise cette
   classe depuis que le bloc de marque est une bande horizontale. */
.marque-texte{display:contents;}
.marque-bloc .brand-mark{
  height:38px; width:auto; flex:0 0 auto;
  filter:var(--logo-filter,none);
}
.marque-bloc.dacia .brand-mark{height:29px;}
.marque-bloc p{color:var(--steel); flex:1 1 auto; max-width:70ch; font-size:0.95rem;}
.marque-bloc .btn{flex:0 0 auto; white-space:nowrap;}

@media (max-width:900px){
  /* En dessous, les trois éléments ne tiennent plus côte à côte : on
     empile, le bouton en pleine largeur puisque c'est le geste attendu. */
  .marque-bloc{flex-direction:column; align-items:flex-start; gap:16px;}
  .marque-bloc .btn{width:100%; text-align:center;}
}

/* ── Bandeau de gamme (pages Renault et Dacia) ──
   Mosaïque des modèles réellement disponibles, construite depuis les
   données collectées : elle reflète la gamme du jour sans intervention. */
.bandeau-gamme{
  display:grid; grid-template-columns:repeat(4,1fr); gap:2px;
  background:var(--line); border:1px solid var(--line);
}
.bandeau-tuile{position:relative; background:var(--surface); aspect-ratio:4/3; overflow:hidden;}
.bandeau-tuile img{width:100%; height:100%; object-fit:cover; display:block;}
.bandeau-nom{
  position:absolute; left:0; right:0; bottom:0;
  padding:7px 10px; background:rgba(21,23,26,0.78); color:#f2f2ef;
  font-family:'IBM Plex Mono',monospace; font-size:0.68rem; letter-spacing:0.06em;
  text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:clip;
}
@media (max-width:1199px){
  .bandeau-gamme{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:767px){
  .bandeau-gamme{grid-template-columns:repeat(2,1fr);}
  .bandeau-nom{font-size:0.875rem; letter-spacing:0.04em;}
}

/* visuel d'une opération (rubrique Offres et événements) */
/* Carte illustrée : l'image occupe toute la largeur, bord à bord, et c'est
   le corps de texte qui porte les marges. Auparavant l'image était tirée
   d'un pixel vers le haut tout en restant en retrait de 28 px sur les
   côtés : elle paraissait collée au trait du cadre. */
.promo--media{padding:0;}
.promo-visuel{aspect-ratio:16/10; overflow:hidden; margin:0;}
.promo-visuel img{width:100%; height:100%; object-fit:cover; display:block;}
.promo-corps{display:flex; flex-direction:column; gap:10px; flex:1;}
.promo--media .promo-corps{padding:clamp(22px,3vw,30px);}
.promo-accroche{font-weight:600; color:var(--ink)!important;}
.promo-conditions{font-size:0.82rem; color:var(--steel); font-style:italic;}
@media (max-width:767px){ .promo-conditions{font-size:0.9375rem;} }

/* ══ AVIS GOOGLE ══════════════════════════════════════════════
   Rubrique alimentée en direct par la fiche Google de l'agence.
   Les cartes doivent rester de hauteur égale quelle que soit la
   longueur des avis, d'où l'étirement de la grille. */
.avis{background:var(--paper); border-bottom:1px solid var(--line);}

.avis-resume{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 20px; margin-bottom:20px;
}
.avis-logo{display:inline-flex; align-items:center; flex:none;}
.avis-note{font-size:1.6rem; font-weight:700; line-height:1;}
.avis-total{font-size:0.8rem; color:var(--steel);}
/* Le bouton se cale à droite sans être étiré sur toute la ligne. */
.avis-resume .btn{margin-left:auto; padding:9px 14px; min-height:40px; font-size:0.85rem;}

.avis-etoiles{display:inline-flex; gap:2px; vertical-align:middle;}
.avis-etoiles svg{width:16px; height:16px; fill:#f5a623;}
.avis-etoiles svg.vide{fill:var(--steel-soft);}

.avis-liste{--ecart:20px;}
/* Moins de trois avis retenus : la grille se resserre plutôt que de
   laisser des colonnes vides — même principe que les actualités. */


.avis-carte{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(18px,2.4vw,24px);
  display:flex; flex-direction:column; gap:10px;
}
.avis-tete{display:flex; align-items:center; gap:12px;}
.avis-pastille{
  width:40px; height:40px; flex:none; border-radius:50%;
  background:var(--paper); color:var(--steel);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  font-size:0.85rem; font-weight:600; letter-spacing:0.02em;
}
.avis-pastille img{width:100%; height:100%; object-fit:cover; display:block;}
.avis-meta{min-width:0;}
.avis-auteur{font-weight:600; font-size:0.95rem;}
.avis-quand{font-size:0.8rem; color:var(--steel);}
/* Pas de troncature : un avis coupé au milieu d'une phrase donne
   l'impression qu'on cache quelque chose. */
.avis-texte{font-size:0.94rem; color:var(--steel); line-height:1.6;}

@media (max-width:1199px){
}
@media (max-width:767px){
  .avis-texte{font-size:0.9375rem;}
  .avis-quand{font-size:0.875rem;}
  .avis-total{font-size:0.875rem;}
  /* Sur mobile le bouton passe à la ligne : le coller à droite le
     rendrait illisible dans une colonne étroite. */
  .avis-resume .btn{margin-left:0; width:100%; justify-content:center;}
}

/* ══ RECRUTEMENT ══════════════════════════════════════════════
   Une annonce d'emploi se lit en entier : contrairement à une carte
   produit, elle n'est pas tronquée et occupe toute la largeur. */
.rec-liste{display:grid; gap:20px;}
.rec-offre{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(22px,3vw,30px);
  display:flex; flex-direction:column; gap:16px;
}
.rec-tete{display:flex; flex-direction:column; gap:10px;}
.rec-offre h3{font-size:1.35rem; font-family:'IBM Plex Sans',sans-serif; font-weight:600; letter-spacing:0;}
.rec-etiquettes{display:flex; flex-wrap:wrap; gap:8px;}
.rec-etiquette{
  font-family:'IBM Plex Mono',monospace; font-size:0.68rem; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--dacia);
  border:1px solid var(--dacia); border-radius:var(--radius); padding:3px 8px;
}
.rec-bloc h4{
  font-size:0.78rem; font-family:'IBM Plex Mono',monospace; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--steel); margin-bottom:6px; font-weight:400;
}
.rec-bloc p{color:var(--steel); font-size:0.94rem; line-height:1.65;}
.rec-bas{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  border-top:1px solid var(--line); padding-top:16px; margin-top:2px;
}
.rec-limite{font-size:0.8rem; color:var(--steel);}
/* Le bouton reste à sa taille : jamais pleine largeur sur grand écran. */
.rec-bas .btn{margin-left:auto;}

/* Aucun poste ouvert : le bloc ne doit pas ressembler à une erreur. */
.rec-vide{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(24px,3.4vw,34px); display:flex; flex-direction:column; gap:12px;
  align-items:flex-start;
}
.rec-vide h3{font-size:1.2rem; font-family:'IBM Plex Sans',sans-serif; font-weight:600; letter-spacing:0;}
.rec-vide p{color:var(--steel); font-size:0.94rem; max-width:62ch;}

.rec-form-bloc{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(22px,3vw,30px);
}
/* Le formulaire de candidature comporte des champs jumelés : il a
   besoin de plus de largeur que le formulaire de contact. */
.rec-form-bloc .form{max-width:720px;}
.field-aide{font-weight:400; color:var(--steel); font-size:0.78rem;}

@media (max-width:767px){
  .rec-bas .btn{margin-left:0; width:100%; justify-content:center;}
  .rec-bloc p, .rec-vide p{font-size:0.9375rem;}
  .rec-etiquette{font-size:0.8125rem;}
  .rec-limite{font-size:0.875rem;}
  .field-aide{font-size:0.875rem;}
}

/* ══ MINIATURES DES VÉHICULES D'OCCASION ══════════════════════
   Une seule grande photo ne dit pas grand-chose d'une occasion : c'est
   l'intérieur, le coffre et les jantes qu'on veut voir avant de se
   déplacer. */
.vo-visuel{cursor:zoom-in;}
.vo-visuel:focus-visible{outline:2px solid var(--ink); outline-offset:-2px;}

/* Les miniatures respirent : collées à la grande photo elles semblaient
   en faire partie, et la grille à cinq colonnes laissait un bloc gris à
   droite dès qu'il y en avait moins de cinq. En flex, elles se partagent
   la largeur quel que soit leur nombre. */
.vo-minis{
  display:flex; gap:6px;
  padding:10px 12px 0;
}
.vo-mini{
  position:relative;
  /* Largeur bornée au cinquième de la bande : avec « flex:1 » seul, une
     miniature isolée s'étirait sur toute la largeur et la carte se
     retrouvait avec deux grandes photos empilées. */
  flex:0 1 calc((100% - 24px) / 5); min-width:0;
  border:0; padding:0; margin:0; background:none;
  cursor:zoom-in; line-height:0; aspect-ratio:4/3; overflow:hidden;
  border-radius:var(--radius);
}
.vo-mini img{width:100%; height:100%; object-fit:cover; display:block;}
.vo-mini:hover img{opacity:0.82;}
.vo-mini:focus-visible{outline:2px solid var(--ink); outline-offset:-2px;}
/* Le reste des photos est annoncé sur la dernière miniature plutôt que
   d'allonger la bande sous la carte. */
.vo-mini-reste{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(21,23,26,0.68); color:#fff;
  font-family:'IBM Plex Mono',monospace; font-size:0.8rem; letter-spacing:0.04em;
}

/* ══ PHOTO EN PLEIN ÉCRAN ═════════════════════════════════════ */
.photo-plein{
  position:fixed; inset:0; z-index:120;
  background:rgba(21,23,26,0.94);
  display:flex; align-items:center; justify-content:center;
  padding:56px 64px;
}
.photo-plein img{max-width:100%; max-height:100%; object-fit:contain; cursor:pointer;}
.photo-plein-titre{
  position:absolute; top:20px; left:24px; color:#f2f2ef;
  font-size:0.92rem; font-weight:600;
}
.photo-plein-compteur{
  position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
  font-family:'IBM Plex Mono',monospace; font-size:0.78rem; letter-spacing:0.08em;
  color:#fff; background:rgba(255,255,255,0.14); padding:5px 12px; border-radius:999px;
}
.photo-plein-fermer{
  position:absolute; top:14px; right:16px;
  width:44px; height:44px; border:0; border-radius:50%;
  background:rgba(255,255,255,0.14); color:#fff; font-size:1.2rem; cursor:pointer; line-height:1;
}
.photo-plein-fermer:hover{background:rgba(255,255,255,0.26);}
.photo-plein-fleche{
  position:absolute; top:50%; transform:translateY(-50%);
  width:52px; height:72px; border:0; border-radius:var(--radius);
  background:rgba(255,255,255,0.12); color:#fff; font-size:2.2rem; cursor:pointer; line-height:1;
}
.photo-plein-fleche:hover{background:rgba(255,255,255,0.24);}
.photo-plein-prec{left:12px;}
.photo-plein-suiv{right:12px;}

@media (max-width:767px){
  /* Les flèches mangeraient la photo sur un écran étroit : on navigue en
     touchant l'image, et le compteur dit où l'on en est. */
  .photo-plein{padding:14px;}
  .photo-plein-fleche{display:none;}
  .photo-plein-titre{font-size:0.875rem;}
}

/* Deux actions sous chaque véhicule : prendre contact, ou emporter la
   fiche. Elles se calent en bas pour que les cartes restent alignées. */
.vo-actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:12px;}
.vo-actions .btn{margin-top:0;}
@media (max-width:767px){
  .vo-actions{flex-direction:column; align-items:stretch;}
  .vo-actions .btn{width:100%; justify-content:center;}
}

/* Séparateur de milliers.
   Le serveur renvoie « 39 750 km » avec une espace ordinaire : dans une
   police à chasse fixe elle occupe une cellule entière et le nombre
   paraît coupé en deux. Ce séparateur-ci fait le quart d'un caractère. */
.mil{display:inline-block; width:0.26em;}


/* ── Fiche véhicule en fenêtre modale ──
   Auparavant un onglet séparé : les bloqueurs de fenêtres l'arrêtaient
   sans explication, et sur téléphone le visiteur perdait sa page. */
.fiche-modale{
  position:fixed; inset:0; z-index:1200;
  background:rgba(21,23,26,0.78);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(8px,2vw,28px);
}
/* Hauteur DÉFINIE, et pas seulement un maximum : le cadre du PDF est un
   élément flexible sans hauteur propre, il s'écrasait à quelques pixels
   et la fiche était illisible. */
.fiche-boite{
  background:var(--surface); border-radius:var(--radius);
  width:min(860px,100%); height:min(92vh, 1180px); max-height:100%;
  display:flex; flex-direction:column; overflow:hidden;
}
.fiche-tete{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 14px; border-bottom:1px solid var(--line);
}
.fiche-tete strong{font-size:15px; margin-right:auto;}
.fiche-tete .btn{padding:9px 16px; font-size:13px;}
.fiche-fermer{
  background:none; border:1px solid var(--line); border-radius:var(--radius);
  color:var(--ink); font-size:16px; line-height:1; cursor:pointer;
  width:38px; height:38px; flex:0 0 auto;
}
.fiche-fermer:hover{border-color:var(--ink);}
/* Fond blanc imposé : la fiche est un document imprimable, elle ne suit
   pas le thème sombre du site. */
.fiche-cadre{
  flex:1 1 auto; width:100%; min-height:0; border:0;
  background:#fff;
}
/* Le PDF est fabriqué par le serveur : quelques centaines de
   millisecondes s'écoulent avant qu'il arrive. Un cadre blanc muet
   laisserait croire à une panne. */
.fiche-attente{
  flex:1 1 auto; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:40px 24px; color:var(--steel); font-size:14px;
}
.fiche-attente--err{color:#8a1c1c;}
/* « display:flex » ci-dessus l'emportait sur l'attribut hidden : le
   message « Préparation… » restait affiché au-dessus de la fiche. */
@media (max-width:767px){
  .fiche-modale{padding:0;}
  .fiche-boite{width:100%; height:100%; max-height:100%; border-radius:0;}
  /* Sur téléphone, la visionneuse PDF intégrée est souvent illisible :
     le bouton de téléchargement passe donc en pleine largeur, bien
     visible, c'est le geste le plus utile là-bas. */
  .fiche-tete .btn{width:100%;}
  .fiche-tete strong{flex:1 1 100%; margin-right:0;}
  .fiche-tete .btn{flex:1 1 auto;}
}

/* Sur écran tactile, on fait glisser la photo plutôt que viser les
   flèches : le geste horizontal est capté par le script, on empêche
   seulement le navigateur d'en faire un défilement de page. */
@media (pointer:coarse){
  .photo-plein{touch-action:pan-y;}
  .photo-plein img{touch-action:pan-y;}
}


/* ── Réglage du cadrage sous l'aperçu d'une fiche ──
   La photo est recadrée au format paysage : quand le véhicule s'y trouve
   coupé, on déplace la fenêtre de recadrage au lieu de retoucher le
   fichier. Le réglage reste attaché à la photo. */
.fiche-cadrage{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:10px 14px; border-top:1px solid var(--line);
  background:var(--paper); flex:0 0 auto;
}
.fiche-cadrage label{font-size:13px; font-weight:600; white-space:nowrap;}
.fiche-cadrage input[type="range"]{
  flex:1 1 160px; min-width:120px; accent-color:var(--ink); height:24px;
}
.fiche-cadrage-val{
  font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--steel);
  min-width:120px;
}
.fiche-cadrage .btn{padding:8px 14px; font-size:13px;}
@media (max-width:767px){
  .fiche-cadrage label{flex:1 1 100%;}
  .fiche-cadrage .btn{flex:1 1 auto;}
}


/* ── Fenêtre « Ce véhicule m'intéresse » ──
   Le visiteur ne quitte pas la page où il regardait la voiture : le
   message est déjà rédigé, il ne complète que ses coordonnées et relit
   avant d'envoyer. */
.demande-modale{
  position:fixed; inset:0; z-index:1200;
  background:rgba(21,23,26,0.78);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(8px,2vw,28px);
}
.demande-boite{
  background:var(--surface); border-radius:var(--radius);
  width:min(620px,100%); max-height:100%;
  display:flex; flex-direction:column; overflow:hidden;
}
.demande-tete{
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; border-bottom:1px solid var(--line); flex:0 0 auto;
}
.demande-tete strong{font-size:16px; margin-right:auto;}
.demande-corps{padding:16px; overflow-y:auto; flex:1 1 auto;}

/* Rappel du véhicule : la fenêtre s'ouvre par-dessus la liste, sans lui
   on ne sait plus quelle voiture on a cliquée. */
.demande-vehicule{
  display:flex; gap:12px; align-items:center;
  padding:10px; margin-bottom:18px;
  border:1px solid var(--line); border-radius:var(--radius);
}
.demande-vehicule img{
  width:96px; height:64px; object-fit:cover; border-radius:var(--radius); flex:none;
}
.demande-vehicule div{display:flex; flex-direction:column; gap:3px; min-width:0;}
.demande-vehicule strong{font-size:15px; line-height:1.25;}
.demande-vehicule span{font-size:13px; color:var(--steel);}

/* Prénom et nom côte à côte : ils tiennent sur une ligne et raccourcissent
   le formulaire, ce qui compte quand on hésite déjà à le remplir. */
.demande-ligne{display:flex; gap:12px; flex-wrap:wrap;}
.demande-ligne .field{flex:1 1 180px; min-width:0;}

.demande-corps textarea{
  min-height:180px; line-height:1.5; font-size:14px; resize:vertical;
}
.demande-boutons{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px;}
.demande-retour{margin-top:12px; font-size:14px;}
.demande-retour--err{color:#8a1c1c;}

.demande-ok{display:flex; flex-direction:column; gap:12px; align-items:flex-start; padding:16px 0;}
.demande-ok strong{font-size:18px;}
.demande-ok p{color:var(--steel); line-height:1.55;}

@media (max-width:767px){
  .demande-modale{padding:0;}
  .demande-boite{width:100%; height:100%; max-height:100%; border-radius:0;}
  .demande-boutons .btn{flex:1 1 auto;}
  .demande-vehicule img{width:76px; height:54px;}
}


/* ── Favoris ──
   On ne choisit pas une voiture en une visite. Le cœur permet d'en
   retenir deux ou trois et de les retrouver au passage suivant, sans
   compte à créer : tout reste dans le navigateur du visiteur. */
.vo-favori{
  position:absolute; right:10px; top:10px; z-index:3;
  width:38px; height:38px; padding:0; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.92); color:var(--ink);
  border:1px solid rgba(21,23,26,0.10); border-radius:999px;
  cursor:pointer; transition:transform .12s ease, color .12s ease;
  box-shadow:0 1px 6px rgba(21,23,26,0.18);
}
.vo-favori svg{width:20px; height:20px; display:block;}
.vo-favori:hover{transform:scale(1.08);}
.vo-favori--actif{color:var(--neuf);}
.vo-favori:focus-visible{outline:2px solid var(--ink); outline-offset:2px;}
/* Sur une annonce sans photo, le cœur se pose sur la carte : il lui faut
   alors un fond opaque pour rester lisible. */
.vo > .vo-favori{background:var(--surface);}

/* Bascule « tout le parc / mes favoris ». Masquée tant qu'aucun favori
   n'existe : un filtre vide n'apprend rien. */
/* Même piège que pour le menu d'actions et le message d'attente : un
   display explicite l'emporte sur l'attribut « hidden ». Sans cette
   règle, la bascule s'affichait même sans aucun favori. */
.vo-tri{
  display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px;
}
.vo-tri-bouton{
  font:inherit; font-size:14px; font-weight:600;
  background:var(--surface); color:var(--steel);
  border:1px solid var(--line); border-radius:999px;
  padding:9px 18px; min-height:42px; cursor:pointer;
}
.vo-tri-bouton:hover{color:var(--ink); border-color:var(--steel-soft);}
.vo-tri-bouton.actif{background:var(--ink); color:var(--surface); border-color:var(--ink);}
.vo-vide{
  padding:32px 16px; text-align:center; color:var(--steel);
  border:1px dashed var(--line); border-radius:var(--radius);
}


/* ── Bandeau d'information sur les traceurs ──
   Il informe, il ne bloque pas : le site ne dépose aucun cookie et n'a
   donc rien à faire accepter. Un voile modal serait ici une gêne
   inutile — et laisserait croire à un choix qui n'existe pas. */
.bandeau-traceurs{
  position:fixed; left:0; right:0; bottom:0; z-index:1100;
  display:flex; align-items:center; gap:clamp(12px,3vw,28px);
  padding:16px clamp(16px,4vw,40px);
  background:var(--graphite); color:#f2f2ef;
  border-top:3px solid var(--neuf);
  box-shadow:0 -4px 24px rgba(21,23,26,0.28);
  transform:translateY(100%); transition:transform .28s ease;
}
.bandeau-traceurs--visible{transform:translateY(0);}
.bandeau-traceurs--parti{transform:translateY(100%);}
.bandeau-traceurs-texte{flex:1 1 auto; min-width:0;}
.bandeau-traceurs strong{
  display:block; font-size:15px; margin-bottom:4px; color:#ffffff;
}
.bandeau-traceurs p{
  font-size:13.5px; line-height:1.55; color:#c9cdd0; max-width:88ch;
}
.bandeau-traceurs a{color:#ffffff; text-decoration:underline;}
/* Sur téléphone, ce lien inline ne faisait que 19 px de haut : sous le
   seuil des 44 px, il se ratait une fois sur deux. Il devient un bloc à
   part entière, détaché du paragraphe. */
@media (max-width:767px){
  .bandeau-traceurs a{
    display:inline-flex; align-items:center; min-height:44px;
    margin-top:4px; font-weight:600;
  }
}
.bandeau-traceurs .btn{flex:0 0 auto; white-space:nowrap;}

@media (max-width:767px){
  .bandeau-traceurs{flex-direction:column; align-items:stretch; gap:12px; padding:16px;}
  .bandeau-traceurs p{font-size:14px;}
  /* Zone de tap confortable : c'est le seul geste demandé ici. */
  .bandeau-traceurs .btn{width:100%; min-height:48px;}
}
@media (prefers-reduced-motion:reduce){
  .bandeau-traceurs{transition:none;}
}


/* ── Bandeau de confirmation du site public ──
   En position fixe, en bas de l'écran : les formulaires du site font deux
   écrans de haut, et un message rendu à sa place dans la page se
   retrouvait au-dessus de la zone visible. */
#site-toasts{
  position:fixed; z-index:1300;
  left:50%; bottom:24px; transform:translateX(-50%);
  width:min(560px, calc(100vw - 32px));
  pointer-events:none;
}
.site-toast{
  pointer-events:auto;
  display:flex; align-items:center; gap:12px;
  padding:15px 17px; border-radius:var(--radius);
  font-size:15px; line-height:1.45;
  box-shadow:0 6px 26px rgba(21,23,26,0.26);
  animation:toast-entre .22s ease;
}
.site-toast.ok{background:var(--en-ligne-soft); color:#14361f; border:1px solid var(--en-ligne);}
.site-toast.err{background:#fdecec; color:#8a1c1c; border:1px solid #e0a3a3;}
.site-toast--parti{opacity:0; transition:opacity .3s ease;}
.site-toast-fermer{
  margin-left:auto; flex:none;
  background:none; border:0; color:inherit;
  font:inherit; font-size:16px; line-height:1; cursor:pointer;
  width:36px; height:36px; border-radius:var(--radius);
}
.site-toast-fermer:hover{background:rgba(21,23,26,0.08);}
@keyframes toast-entre{
  from{opacity:0; transform:translateY(14px);}
  to{opacity:1; transform:translateY(0);}
}
@media (prefers-reduced-motion:reduce){
  .site-toast{animation:none;}
  .site-toast--parti{transition:none;}
}
@media (max-width:600px){
  /* Le bandeau cookies occupe aussi le bas de l'écran : on remonte
     au-dessus de lui plutôt que de l'y superposer. */
  #site-toasts{left:8px; right:8px; bottom:8px; width:auto; transform:none;}
  .site-toast-fermer{width:44px; height:44px;}
}

/* ── L'attribut « hidden » l'emporte, toujours ──
   Une règle qui pose un display explicite (flex, grid, block) prend le
   pas sur l'attribut HTML « hidden ». Sur ce projet le piège s'est
   présenté quatre fois : le message d'attente d'une fiche PDF resté
   par-dessus le PDF, les quatre menus « Autres actions » ouverts
   d'entrée, la bascule des favoris affichée sans aucun favori, et le
   champ « Choisir un fichier » visible à côté du bouton qui devait le
   masquer.

   Cette règle unique ferme le sujet. Le « !important » est ici à sa
   place : « hidden » est une intention non négociable, pas une
   préférence de mise en page. */
[hidden]{display:none !important;}

/* ══ Page de prestation — tablette et mobile ══
   La colonne de droite passe SOUS le texte mais AVANT la galerie : le
   bouton de rendez-vous reste à portée de pouce dès la fin de la
   lecture, sans avoir à faire défiler toute la page. On enlève aussi le
   « sticky », qui n'a plus de sens une fois la colonne à pleine largeur. */
@media (max-width:1199px){
  .presta-grille{grid-template-columns:minmax(0,1fr); gap:32px;}
  .presta-cote{position:static; top:auto;}
  .presta-atouts{grid-template-columns:repeat(2,minmax(0,1fr));}
  .presta-galerie[data-n="3"]{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:767px){
  .presta-visuel img{aspect-ratio:3/2;}
  .presta-texte p{font-size:0.9375rem; line-height:1.68;}
  .presta-texte p:first-child{font-size:1rem;}
  .presta-points li{font-size:0.9375rem;}
  .presta-atouts{grid-template-columns:minmax(0,1fr);}
  .presta-galerie[data-n="2"],
  .presta-galerie[data-n="3"]{grid-template-columns:minmax(0,1fr);}
  /* Zone de tap : le bouton et le numéro doivent rester attrapables. */
  .presta-appel .btn{width:100%; justify-content:center;}
  .presta-tel{min-height:44px; display:inline-flex; align-items:center;}
}


/* ═══════════════════════════════════════════════════════════════
   RANGÉE INCOMPLÈTE — rien ne reste calé à gauche
   ═══════════════════════════════════════════════════════════════
   Une grille CSS en colonnes « 1fr » ne laisse aucun espace libre :
   le dernier élément d'une rangée incomplète se colle donc à gauche,
   avec un grand vide à sa droite. C'est ce qu'on voyait sur l'iPad —
   deux annonces d'occasion dans une grille de trois colonnes, les
   actualités et les avis à trois éléments sur deux colonnes.

   Deux familles, deux traitements :

   1. LES CARTES ESPACÉES (annonces, actualités, avis). Elles passent en
      « flex » : c'est le seul modèle qui CENTRE nativement une rangée
      incomplète, quel que soit le nombre de cartes — et ce nombre n'est
      jamais fixe ici. Les hauteurs restent égales rangée par rangée,
      comme avec la grille.

   2. LES GRILLES À SÉPARATION FINE (prestations, équipe, gamme, bandeau
      des services). Leur trait de séparation est le fond vu à travers un
      écart d'un ou deux pixels : une case vide y apparaît en GRIS, ce
      qu'aucun centrage ne corrige. Le dernier élément OCCUPE donc la
      place restante.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Cartes espacées ── */
.vo-grid, .promo-grid, .avis-liste{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch;
  gap:var(--ecart);
}
.vo-grid > *, .promo-grid > *, .avis-liste > *{
  /* min-width:0 : sans lui, un titre long empêche la carte de se
     réduire et fait déborder la rangée. */
  min-width:0;
  flex:0 1 calc((100% - 2 * var(--ecart)) / 3);
}
/* Une seule carte : elle garde une largeur lisible et reste centrée. */
.vo-grid[data-n="1"] > *, .promo-grid[data-n="1"] > *, .avis-liste[data-n="1"] > *{
  flex-basis:min(460px, 100%);
}
.vo-grid[data-n="2"] > *, .promo-grid[data-n="2"] > *, .avis-liste[data-n="2"] > *{
  flex-basis:calc((100% - var(--ecart)) / 2);
}

@media (max-width:1199px){
  .vo-grid > *, .promo-grid > *, .avis-liste > *{
    flex-basis:calc((100% - var(--ecart)) / 2);
  }
}
@media (max-width:767px){
  .vo-grid > *, .promo-grid > *, .avis-liste > *,
  .vo-grid[data-n="1"] > *, .promo-grid[data-n="1"] > *, .avis-liste[data-n="1"] > *,
  .vo-grid[data-n="2"] > *, .promo-grid[data-n="2"] > *, .avis-liste[data-n="2"] > *{
    flex-basis:100%;
  }
}

/* ── 2. Grilles à séparation fine ──
   « nth-child(3n+1):last-child » = le dernier élément ouvre une rangée,
   il est donc seul : il prend les trois colonnes. « 3n+2 » = il est le
   deuxième de sa rangée : il en prend deux. Et ainsi de suite selon le
   nombre de colonnes du moment.

   La règle vaut pour toutes ces grilles, y compris celle des « autres
   prestations » en pied de page dédiée : sur tablette, ses trois tuiles
   passent en 2 + 1, et la dernière doit occuper sa rangée. */

/* Trois colonnes : prestations, équipe, gamme neuve, atouts. */
@media (min-width:1200px){
  .services > :last-child:nth-child(3n+1),
  .team > :last-child:nth-child(3n+1),
  .modeles-grid > :last-child:nth-child(3n+1),
  .presta-atouts > :last-child:nth-child(3n+1){grid-column:span 3;}

  .services > :last-child:nth-child(3n+2),
  .team > :last-child:nth-child(3n+2),
  .modeles-grid > :last-child:nth-child(3n+2),
  .presta-atouts > :last-child:nth-child(3n+2){grid-column:span 2;}

  /* Quatre colonnes : bandeau de gamme. */
  .bandeau-gamme > :last-child:nth-child(4n+1){grid-column:span 4;}
  .bandeau-gamme > :last-child:nth-child(4n+2){grid-column:span 3;}
  .bandeau-gamme > :last-child:nth-child(4n+3){grid-column:span 2;}

  /* Cinq colonnes : bandeau des services, sous la bannière. */
  .strip-row > :last-child:nth-child(5n+1){grid-column:span 5;}
  .strip-row > :last-child:nth-child(5n+2){grid-column:span 4;}
  .strip-row > :last-child:nth-child(5n+3){grid-column:span 3;}
  .strip-row > :last-child:nth-child(5n+4){grid-column:span 2;}
}

/* Tablette : deux colonnes partout, trois pour le bandeau de gamme. */
@media (max-width:1199px) and (min-width:768px){
  .services > :last-child:nth-child(odd),
  .team > :last-child:nth-child(odd),
  .modeles-grid > :last-child:nth-child(odd),
  .presta-atouts > :last-child:nth-child(odd),
  .strip-row > :last-child:nth-child(odd){grid-column:span 2;}

  .bandeau-gamme > :last-child:nth-child(3n+1){grid-column:span 3;}
  .bandeau-gamme > :last-child:nth-child(3n+2){grid-column:span 2;}
}

/* Téléphone : une seule colonne, sauf le bandeau de gamme qui en garde
   deux — les vignettes y sont carrées et lisibles à cette taille. */
@media (max-width:767px){
  .bandeau-gamme > :last-child:nth-child(odd){grid-column:span 2;}
}

/* ═══════════════════════════════════════════════════════════════
   ZONES DE TAP — 44 px au minimum sur téléphone
   ═══════════════════════════════════════════════════════════════
   Trois commandes passaient sous la barre : le cœur des favoris
   (38 px), les boutons compacts des cartes d'accueil et du bandeau
   d'avis (40 px), et les puces du projecteur de gamme (22 px).
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:767px){
  .vo-favori{width:44px; height:44px;}

  /* Ces deux boutons étaient volontairement compacts pour tenir dans une
     carte à trois colonnes. En colonne unique, la place ne manque plus. */
  .vo-grid--accueil .btn, .avis-resume .btn{min-height:44px; padding:11px 16px;}

  /* La puce reste fine à l'œil : c'est sa zone tactile qu'on agrandit,
     par un calque invisible qui ne déplace rien. */
  .proj-puce::before{
    content:''; position:absolute; left:0; right:0; top:-11px; bottom:-11px;
  }
}