/* ==========================================================================
   HAKY AUTOMOBILE — SYSTÈME DE DESIGN
   Toute l'identité visuelle du site tient dans ce bloc.
   Changer une couleur ici la change partout : aucune valeur n'est écrite en
   dur dans le reste de la feuille.
   ========================================================================== */

:root {
  /* Couleurs de marque */
  --noir: #0a0a0a;
  --anthracite: #141619;
  --graphite: #1e2126;
  --argent: #c3c8ce;
  --blanc: #f4f5f6;
  --rouge: #c1121f;

  /* Filets et voiles — dérivés de l'argent */
  --filet: rgb(195 200 206 / 0.14);
  --filet-fort: rgb(195 200 206 / 0.28);

  /* Rythme vertical des sections */
  --pas-section: clamp(5.5rem, 11vw, 10.5rem);
  --hauteur-entete: 5rem;

  /* Typographies */
  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-sans: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --r-plaque: 2px;
  --r-carte: 6px;
  --r-panneau: 10px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; min-width: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }

body {
  margin: 0;
  background-color: var(--noir);
  color: var(--blanc);
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.6;
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Titres : Archivo légèrement élargi — la personnalité de la page. */
h1, h2, h3, .titre {
  font-family: var(--f-display);
  font-stretch: 112%;
  letter-spacing: -0.022em;
  line-height: 0.98;
  text-wrap: balance;
  margin: 0;
  font-weight: 500;
}

p { text-wrap: pretty; margin: 0; }
ul, ol, dl, dd, figure, blockquote, fieldset { margin: 0; padding: 0; }
li { list-style: none; }
img { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }

/* Focus clavier visible partout — exigence d'accessibilité. */
:focus-visible {
  outline: 2px solid var(--rouge);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--rouge); color: var(--blanc); }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--noir); }
::-webkit-scrollbar-thumb {
  background: var(--graphite);
  border: 3px solid var(--noir);
  border-radius: 99px;
}

/* --------------------------------------------------------------------------
   PRIMITIVES
   -------------------------------------------------------------------------- */

/* Conteneur unique : marges généreuses, largeur maîtrisée. */
.contenu {
  width: 100%;
  max-width: 92rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 4.5rem);
}

/* Rythme vertical unique du site. */
.section { position: relative; padding-block: var(--pas-section); }
.section.surface { background: var(--anthracite); }
.bord-haut { border-top: 1px solid var(--filet); }
.bord-bas { border-bottom: 1px solid var(--filet); }

/* Micro-étiquette monospace : eyebrows, unités, libellés de données. */
.etiquette {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--argent);
  font-weight: 500;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}
.etiquette.grande { font-size: clamp(1rem, 2.4vw, 1.5rem); letter-spacing: 0.24em; color: var(--blanc); gap: 1.25rem; }
.etiquette.grande .filet-rouge { width: 3rem; height: 2px; }
@media (min-width: 640px) { .etiquette.grande .filet-rouge { width: 4.5rem; } }
.etiquette .filet-rouge {
  display: block;
  height: 1px;
  width: 2rem;
  background: var(--rouge);
  flex: none;
}
@media (min-width: 640px) { .etiquette .filet-rouge { width: 3rem; } }

/* Chiffres alignés pour les prix, kilométrages et puissances. */
.donnee {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Effet de verre du menu et des panneaux. */
.verre {
  background: rgb(10 10 10 / 0.62);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--filet);
}
.verre-panneau {
  background: rgb(20 22 25 / 0.78);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid var(--filet);
}

/* Reflet lent qui traverse une carte au survol. */
.reflet { position: relative; }
.reflet::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / 0.09) 48%, transparent 58%);
  background-size: 260% 100%;
  background-position: 190% 0;
  transition: background-position 1.1s var(--ease);
}
.reflet:hover::after, .reflet:focus-within::after { background-position: -70% 0; }

/* Dégradé de lecture au-dessus d'une photo. */
.voile-bas {
  background: linear-gradient(to top,
    rgb(10 10 10 / 0.94) 0%,
    rgb(10 10 10 / 0.72) 28%,
    rgb(10 10 10 / 0.15) 62%,
    transparent 100%);
}

.grain::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.28'/%3E%3C/svg%3E");
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   BOUTONS
   -------------------------------------------------------------------------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  height: 3rem;
  padding-inline: 1.75rem;
  border: 1px solid transparent;
  border-radius: var(--r-plaque);
  background: var(--blanc);
  color: var(--noir);
  font-family: var(--f-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
  white-space: nowrap;
}
.btn:hover { background: var(--rouge); color: var(--blanc); }
.btn.contour { background: transparent; color: var(--blanc); border-color: var(--filet-fort); }
.btn.contour:hover { background: var(--blanc); color: var(--noir); border-color: var(--blanc); }
.btn.large { height: 3.5rem; padding-inline: 2.25rem; }
.btn.pleine-largeur { width: 100%; }
.btn:disabled { opacity: .45; pointer-events: none; }

/* --------------------------------------------------------------------------
   LA PLAQUE DE DONNÉES — élément signature du site.
   Une règle graduée horizontale, des libellés monospace, des valeurs alignées :
   la manière dont une voiture est réellement décrite sur sa fiche technique.
   -------------------------------------------------------------------------- */

.plaque {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--filet);
}
@media (min-width: 640px) { .plaque { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.plaque.large { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .plaque.large { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .plaque.large { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.plaque > div {
  position: relative;
  padding: 0.75rem 0.9rem;
  border-right: 1px solid var(--filet);
  text-align: center;
}
.plaque.large > div { padding: 1.25rem 1.25rem; }
.plaque > div:last-child { border-right: 0; }
.plaque > div:nth-child(2n) { border-right: 0; }
@media (min-width: 640px) {
  .plaque > div:nth-child(2n) { border-right: 1px solid var(--filet); }
  .plaque > div:last-child { border-right: 0; }
}
/* Graduation : le repère qui donne son caractère à la plaque. */
.plaque > div::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  height: 0.5rem; width: 1px;
  background: var(--filet-fort);
}
.plaque > div:first-child::before { background: var(--rouge); }
/* Variante isolée : une seule donnée, posée sans filet ni graduation. */
.plaque.solo { grid-template-columns: minmax(0, max-content); border-top: 0; }
.plaque.solo > div { padding: 0; border-right: 0; text-align: left; }
.plaque.solo > div::before { display: none; }
.plaque dt { font-family: var(--f-mono); font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--argent); font-weight: 500; }
.plaque dd {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: rgb(244 245 246 / 0.9);
  line-height: 1.35;
}
.plaque.large dd { font-size: 1rem; }
@media (min-width: 640px) { .plaque.large dd { font-size: 1.125rem; } }
.plaque dd.accent { font-size: clamp(1.25rem, 2.4vw, 1.75rem); font-weight: 500; color: var(--blanc); }

/* --------------------------------------------------------------------------
   RÉVÉLATIONS AU DÉFILEMENT
   -------------------------------------------------------------------------- */

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .95s var(--ease), transform .95s var(--ease); }
.reveal-rapide { transition-duration: .35s; }
.reveal.vu { opacity: 1; transform: none; }
.cascade > * { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.cascade.vu > * { opacity: 1; transform: none; }
.cascade.vu > *:nth-child(1) { transition-delay: 0s; }
.cascade.vu > *:nth-child(2) { transition-delay: .08s; }
.cascade.vu > *:nth-child(3) { transition-delay: .16s; }
.cascade.vu > *:nth-child(4) { transition-delay: .24s; }
.cascade.vu > *:nth-child(5) { transition-delay: .32s; }
.cascade.vu > *:nth-child(6) { transition-delay: .40s; }

/* Masque de révélation : le texte monte derrière une ligne invisible. */
.titre-lignes .ligne { display: block; overflow: hidden; }
.titre-lignes .ligne > span {
  display: block;
  transform: translateY(102%);
  transition: transform 1.05s var(--ease);
}
.titre-lignes.vu .ligne > span { transform: none; }
.titre-lignes.vu .ligne:nth-child(2) > span { transition-delay: .09s; }
.titre-lignes.vu .ligne:nth-child(3) > span { transition-delay: .18s; }

/* --------------------------------------------------------------------------
   EN-TÊTE
   -------------------------------------------------------------------------- */

.lien-evitement {
  position: absolute; left: -9999px; z-index: 100;
}
.lien-evitement:focus {
  left: 1rem; top: 1rem; position: fixed;
  background: var(--blanc); color: var(--noir);
  padding: 0.75rem 1.25rem; font-size: 0.875rem; font-weight: 600;
  border-radius: var(--r-plaque);
}

/* Hauteur constante : le logo ne bouge jamais d'un pixel au défilement.
   Seul le fond apparaît, pour que le contenu ne passe plus derrière lui. */
#entete {
  position: fixed;
  inset-inline: 0; top: 0;
  z-index: 50;
  height: 5rem;
  transition: background-color .5s var(--ease), border-color .5s var(--ease);
  border-bottom: 1px solid transparent;
}
@media (min-width: 768px) { #entete { height: 5.5rem; } }
#entete.defile {
  background: rgb(10 10 10 / 0.82);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--filet);
}
#entete .barre {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; height: 100%;
}

.logo { display: inline-flex; align-items: center; gap: 0.75rem; }
/* Monogramme Haky, intégré au fichier : aucune image externe à héberger. */
.logo .sigle {
  display: block; flex: none;
  height: 2.1rem; width: 2.95rem;
  background: url("data:image/png;base64,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") left center / contain no-repeat;
}
.logo .mot {
  font-family: var(--f-display); font-size: 0.9375rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.26em;
}

#nav-principale { display: none; }
@media (min-width: 1024px) { #nav-principale { display: block; } }
#nav-principale ul { display: flex; align-items: center; gap: 2.25rem; }
#nav-principale a {
  position: relative; display: block; padding-block: 0.5rem;
  font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.02em;
  color: var(--argent); transition: color .4s var(--ease);
}
#nav-principale a:hover { color: var(--blanc); }
#nav-principale a[aria-current="page"] { color: var(--blanc); }
#nav-principale a::after {
  content: ""; position: absolute; bottom: 0; left: 0;
  height: 1px; width: 0; background: var(--rouge);
  transition: width .5s var(--ease);
}
#nav-principale a:hover::after, #nav-principale a[aria-current="page"]::after { width: 100%; }

/* Sélecteur de langue : trois pastilles monospace, la langue active en blanc. */
.choix-langue { display: flex; align-items: center; gap: 0.25rem; }
.choix-langue button {
  border: 0; background: none; cursor: pointer;
  padding: 0.35rem 0.45rem;
  font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.14em;
  color: rgb(195 200 206 / 0.55);
  transition: color .4s var(--ease);
}
.choix-langue button:hover { color: var(--blanc); }
.choix-langue button[aria-pressed="true"] { color: var(--blanc); }
.choix-langue button[aria-pressed="true"]::after {
  content: ""; display: block; height: 1px; margin-top: 3px; background: var(--rouge);
}
.choix-langue .separateur { color: rgb(195 200 206 / 0.25); font-family: var(--f-mono); font-size: 0.625rem; }
#choix-langue-mobile { margin-top: 2.5rem; }
#choix-langue-mobile button { font-size: 0.875rem; padding: 0.5rem 0.75rem; }

.actions-entete { display: flex; align-items: center; gap: 1rem; }
.tel-entete { display: none; font-size: 0.8125rem; letter-spacing: 0.06em; transition: color .4s var(--ease); }
.tel-entete:hover { color: var(--rouge); }
@media (min-width: 1280px) { .tel-entete { display: block; } }

#bouton-menu {
  display: flex; align-items: center; gap: 0.75rem;
  height: 2.5rem; padding-inline: 0.25rem;
  background: none; border: 0; cursor: pointer;
}
@media (min-width: 1024px) { #bouton-menu { display: none; } }
#bouton-menu .traits { position: relative; display: flex; flex-direction: column; justify-content: space-between; height: 0.75rem; width: 1.5rem; }
#bouton-menu .traits span { display: block; height: 1px; width: 100%; background: var(--blanc); transition: transform .5s var(--ease); }
#bouton-menu[aria-expanded="true"] .traits span:first-child { transform: translateY(5.5px) rotate(45deg); }
#bouton-menu[aria-expanded="true"] .traits span:last-child { transform: translateY(-5.5px) rotate(-45deg); }

#menu-mobile {
  position: fixed; inset: 0; z-index: 40;
  background: rgb(10 10 10 / 0.97);
  backdrop-filter: blur(20px);
  padding-top: 6rem;
  opacity: 0; visibility: hidden;
  transition: opacity .4s var(--ease), visibility .4s;
  overflow-y: auto;
}
#menu-mobile.ouvert { opacity: 1; visibility: visible; }
@media (min-width: 1024px) { #menu-mobile { display: none; } }
#menu-mobile ul { border-top: 1px solid var(--filet); }
#menu-mobile li { border-bottom: 1px solid var(--filet); opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
#menu-mobile.ouvert li { opacity: 1; transform: none; }
#menu-mobile.ouvert li:nth-child(1) { transition-delay: .07s; }
#menu-mobile.ouvert li:nth-child(2) { transition-delay: .13s; }
#menu-mobile.ouvert li:nth-child(3) { transition-delay: .19s; }
#menu-mobile.ouvert li:nth-child(4) { transition-delay: .25s; }
#menu-mobile.ouvert li:nth-child(5) { transition-delay: .31s; }
#menu-mobile a.lien-mobile { display: flex; align-items: baseline; justify-content: space-between; padding-block: 1.5rem; }
#menu-mobile .libelle { font-family: var(--f-display); font-size: 2rem; font-weight: 500; letter-spacing: -0.022em; }
#menu-mobile .numero { font-family: var(--f-mono); font-size: 0.5625rem; letter-spacing: 0.18em; color: rgb(195 200 206 / 0.5); }

/* Compteur kilométrique de progression : le défilement converti en kilomètres. */
#odometre {
  position: fixed; bottom: 1.75rem; right: 1.75rem; z-index: 40;
  display: none; align-items: center; gap: 0.5rem;
  pointer-events: none; opacity: 0; transition: opacity .7s var(--ease);
}
@media (min-width: 1024px) and (pointer: fine) { #odometre { display: flex; } }
#odometre .trait { height: 1px; width: 1.5rem; background: var(--filet-fort); }
#odometre .valeur { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.22em; color: rgb(195 200 206 / 0.7); font-variant-numeric: tabular-nums; }
#odometre .unite { font-family: var(--f-mono); font-size: 0.5625rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(195 200 206 / 0.4); }

/* Aucune animation ne doit gêner : on coupe tout si l'utilisateur le demande. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .cascade > * { opacity: 1; transform: none; }
  .titre-lignes .ligne > span { transform: none; }
  #odometre { display: none !important; }
}
/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  height: 100svh; min-height: 600px;
  overflow: hidden;
}
.hero .media { position: absolute; inset: 0; z-index: -1; }
.hero .fond {
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 70% 15%, #22262c 0%, #101215 45%, #0a0a0a 100%);
}
/* Silhouette de calandre tracée en CSS : le média tant qu'aucune vidéo n'est fournie. */
.hero .horizon {
  position: absolute; inset-inline: -10%; bottom: 18%;
  height: 1px; background: linear-gradient(90deg, transparent, var(--filet-fort) 30%, var(--filet-fort) 70%, transparent);
}
.hero .halo {
  position: absolute; left: 50%; top: 40%;
  width: min(130vw, 1500px); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgb(193 18 31 / 0.16) 0%, transparent 62%);
  filter: blur(30px);
}
.hero .voile-bas, .hero .grain { position: absolute; inset: 0; }
.hero .grain { opacity: .3; }
/* Le bloc est calé en bas de l'écran : augmenter cette marge le remonte. */
.hero .contenu { position: relative; padding-bottom: 4rem; }
@media (min-width: 768px) { .hero .contenu { padding-bottom: 6.5rem; } }

/* Réduit pour respirer sous le logo : la ligne longue tenait sur 16ch et repassait à la ligne. */
.t-hero { font-size: clamp(2.25rem, 7.5vw, 6.5rem); max-width: 24ch; }
.t-section { font-size: clamp(2rem, 5vw, 3.75rem); }
.t-page { font-size: clamp(2.25rem, 6.5vw, 5rem); }
.t-appel { font-size: clamp(2.5rem, 7vw, 5.5rem); }

.hero-bas { margin-top: 2.25rem; display: flex; flex-direction: column; gap: 2.5rem; }
@media (min-width: 1024px) { .hero-bas { flex-direction: row; align-items: flex-end; justify-content: space-between; } }
.hero-bas p { max-width: 28rem; font-size: 0.9375rem; color: var(--argent); }
.groupe-boutons { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* --------------------------------------------------------------------------
   GRILLES ÉDITORIALES
   -------------------------------------------------------------------------- */

.duo { display: grid; gap: 3.5rem; }
@media (min-width: 1024px) { .duo { grid-template-columns: 5fr 7fr; gap: 4rem; } }
.duo-inverse { display: grid; gap: 3.5rem; }
@media (min-width: 1024px) { .duo-inverse { grid-template-columns: 7fr 5fr; gap: 4rem; } }

.tete-section { display: flex; flex-direction: column; gap: 2rem; }
@media (min-width: 640px) { .tete-section { flex-direction: row; align-items: flex-end; justify-content: space-between; } }

.texte-courant { font-size: 0.9375rem; line-height: 1.75; color: var(--argent); max-width: 30rem; }

.liste-detaillee > li { border-top: 1px solid var(--filet); padding-block: 2rem; }
.liste-detaillee > li:last-child { border-bottom: 1px solid var(--filet); }
@media (min-width: 640px) { .liste-detaillee > li { padding-block: 2.5rem; } }
.liste-detaillee h3 { font-size: 1.375rem; }
@media (min-width: 640px) { .liste-detaillee h3 { font-size: 1.625rem; } }
.liste-detaillee p { margin-top: 0.75rem; max-width: 36rem; font-size: 0.9375rem; line-height: 1.75; color: var(--argent); }
.etape { display: grid; grid-template-columns: auto 1fr; column-gap: 1.5rem; }
@media (min-width: 640px) { .etape { column-gap: 2.5rem; } }
.etape .rang { font-family: var(--f-mono); padding-top: 0.25rem; font-size: 0.75rem; letter-spacing: 0.14em; color: var(--rouge); }

.marques-grille { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 2.5rem; margin-top: 2.5rem; }
@media (min-width: 640px) { .marques-grille { grid-template-columns: repeat(3, 1fr); } }
.marques-grille div { border-top: 1px solid var(--filet); padding-top: 1.25rem; text-align: center; }
.marques-grille span { font-family: var(--f-display); font-size: clamp(1.5rem, 3.4vw, 2.5rem); font-weight: 500; letter-spacing: -0.022em; }

/* --------------------------------------------------------------------------
   CARTE VÉHICULE
   -------------------------------------------------------------------------- */

.grille-selection { margin-top: 3.5rem; display: grid; gap: 3.5rem 2.5rem; }
@media (min-width: 768px) { .grille-selection { grid-template-columns: 1fr 1fr; gap: 4rem 2.5rem; } }

.grille-catalogue { margin-top: 3rem; display: grid; gap: 3.5rem 2rem; }
@media (min-width: 640px) { .grille-catalogue { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .grille-catalogue { grid-template-columns: repeat(3, 1fr); } }

.carte { position: relative; display: block; }
.carte .visuel {
  position: relative; overflow: hidden;
  border-radius: var(--r-carte);
  background: var(--graphite);
  aspect-ratio: 4 / 3;
}
.carte.grand .visuel { aspect-ratio: 16 / 10; }
.carte .visuel .plaque-photo { transition: transform 1.4s var(--ease); }
.carte:hover .visuel .plaque-photo { transform: scale(1.045); }
.carte .halo-bas {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(80% 60% at 50% 100%, rgb(10 10 10 / 0.6) 0%, transparent 70%);
  opacity: 0; transition: opacity .7s var(--ease);
}
.carte:hover .halo-bas { opacity: 1; }
.carte .badge {
  position: absolute; top: 1rem; z-index: 4;
  padding: 0.375rem 0.75rem;
  border-radius: var(--r-plaque);
  background: rgb(10 10 10 / 0.78);
  backdrop-filter: blur(6px);
  font-size: 0.5625rem;
}
.carte .badge.gauche { left: 1rem; }
.carte .badge.droite { right: 1rem; font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.04em; color: var(--blanc); text-transform: none; }
.carte .entete-carte { margin-top: 1.5rem; display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; }
.carte .entete-carte h3 { font-size: 1.25rem; }
.carte.grand .entete-carte h3 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
.carte .version { margin-top: 0.375rem; font-size: 0.875rem; color: var(--argent); }
.carte .prix { font-family: var(--f-mono); font-variant-numeric: tabular-nums; flex: none; text-align: right; font-size: 1rem; font-weight: 500; }
@media (min-width: 640px) { .carte .prix { font-size: 1.125rem; } }
.carte .plaque { margin-top: 1.25rem; }

/* Plaque photo : repli dessiné tant qu'aucune image n'est déposée. */
/* Photo réelle : elle occupe exactement la place de la plaque dessinée. */
.photo-vehicule {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease), opacity .45s ease;
}
/* Fondu enchaîné : la nouvelle photo apparaît par-dessus l'ancienne,
   qui ne disparaît qu'une fois la nouvelle chargée. Jamais de cadre vide. */
.photo-vehicule.entrante, .plaque-photo.entrante { opacity: 0; }
.photo-vehicule.sortante, .plaque-photo.sortante { opacity: 0; }
.plaque-photo { transition: opacity .45s ease; }
.carte:hover .visuel .photo-vehicule { transform: scale(1.045); }

.plaque-photo {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  overflow: hidden;
}
.plaque-photo .fond-marque { position: absolute; inset: 0; }
.plaque-photo .grain { position: absolute; inset: 0; opacity: .4; }
.plaque-photo .interieur { position: relative; text-align: center; padding: 1rem; z-index: 2; }
.plaque-photo .mot-marque {
  display: block;
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(1.5rem, 4vw, 2.75rem);
  letter-spacing: 0.3em; text-indent: 0.3em;
  color: rgb(244 245 246 / 0.12);
}
.plaque-photo .legende { display: block; margin-top: 0.75rem; font-family: var(--f-mono); font-size: 0.5625rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(195 200 206 / 0.5); }
.plaque-photo .filet-bas { position: absolute; inset-inline: 12%; bottom: 22%; height: 1px; background: linear-gradient(90deg, transparent, var(--filet), transparent); }

/* --------------------------------------------------------------------------
   CATALOGUE
   -------------------------------------------------------------------------- */

/* L'en-tête ne fait plus que 5,5 rem : le titre peut remonter d'autant. */
.entete-page { padding-top: calc(var(--hauteur-entete) + 2.25rem); padding-bottom: 3rem; }
@media (min-width: 768px) { .entete-page { padding-top: 9rem; padding-bottom: 4rem; } }
/* Variante resserrée : bandeau plus haut et titre légèrement réduit. */
.entete-page.serree { padding-top: calc(var(--hauteur-entete) + 1rem); padding-bottom: 1rem; }
@media (min-width: 768px) { .entete-page.serree { padding-top: 6.75rem; padding-bottom: 1.25rem; } }
/* Le filet rouge est calé en haut ; le titre garde sa position d'origine. */
.etiquette-haute { display: block; margin-bottom: 2.5rem; }
@media (min-width: 768px) { .etiquette-haute { margin-bottom: 3.25rem; } }
.t-page.compact { font-size: clamp(2rem, 5.2vw, 4rem); }
.entete-page .intro { margin-top: 2rem; max-width: 34rem; font-size: 0.9375rem; line-height: 1.75; color: var(--argent); }

.mise-catalogue { display: grid; gap: 2rem 3rem; padding-bottom: var(--pas-section); }
@media (min-width: 1024px) { .mise-catalogue { grid-template-columns: 3fr 9fr; } }

#panneau-filtres { display: none; margin-top: 2rem; }
#panneau-filtres.ouvert { display: block; }
@media (min-width: 1024px) {
  /* Colonne autonome : la molette agit sur les filtres quand le curseur est
     dessus, sur le catalogue quand il est ailleurs. */
  #panneau-filtres {
    display: block !important; margin-top: 0;
    position: sticky; top: 7rem;
    max-height: calc(100vh - 9rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 0.85rem;
    scrollbar-width: thin;
    scrollbar-color: var(--graphite) transparent;
  }
  #panneau-filtres::-webkit-scrollbar { width: 4px; }
  #panneau-filtres::-webkit-scrollbar-track { background: transparent; }
  #panneau-filtres::-webkit-scrollbar-thumb { background: var(--graphite); border: 0; border-radius: 99px; }
  #bascule-filtres { display: none; }
}
.filtres-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.lien-effacer { background: none; border: 0; cursor: pointer; font-family: var(--f-mono); font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--argent); text-decoration: underline; text-underline-offset: 4px; transition: color .4s; }
.lien-effacer:hover { color: var(--blanc); }

.champ-recherche {
  height: 3rem; width: 100%; margin-top: 1.5rem;
  border: 1px solid var(--filet); border-radius: var(--r-plaque);
  background: transparent; padding-inline: 1rem;
  font-size: 0.875rem; color: var(--blanc);
}
.champ-recherche::placeholder { color: rgb(195 200 206 / 0.5); }
.champ-recherche:focus { border-color: var(--filet-fort); outline: none; }

.groupe-filtre { border-top: 1px solid var(--filet); padding-block: 1.5rem; border-inline: 0; border-bottom: 0; }
.groupe-filtre legend { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--argent); margin-bottom: 1rem; }
.jetons { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.jeton {
  cursor: pointer; border: 1px solid var(--filet); border-radius: var(--r-plaque);
  padding: 0.5rem 0.875rem; font-size: 0.8125rem; color: var(--argent);
  transition: color .4s var(--ease), border-color .4s var(--ease), background-color .4s var(--ease);
}
.jeton:hover { border-color: var(--filet-fort); color: var(--blanc); }
.jeton.actif { background: var(--blanc); border-color: var(--blanc); color: var(--noir); }
.jeton input { position: absolute; width: 1px; height: 1px; opacity: 0; clip: rect(0 0 0 0); clip-path: inset(50%); }

.curseur-filtre { border-top: 1px solid var(--filet); padding-block: 1.5rem; }
.curseur-filtre .ligne-valeur { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
/* Valeur saisissable : soulignée en pointillés pour signaler qu'on peut la taper. */
.valeur-editable { display: inline-flex; align-items: baseline; gap: 0.35rem; }
.saisie-filtre {
  width: 8ch; text-align: right;
  background: transparent; border: 0;
  border-bottom: 1px dashed var(--filet-fort);
  color: var(--rouge);
  font-family: var(--f-mono); font-variant-numeric: tabular-nums;
  font-size: 0.875rem; font-weight: 500;
  padding: 0 0 2px; cursor: text;
}
.saisie-filtre:focus { outline: none; border-bottom-color: var(--rouge); border-bottom-style: solid; }
.saisie-filtre::-webkit-outer-spin-button,
.saisie-filtre::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.unite-filtre { font-family: var(--f-mono); font-size: 0.75rem; color: var(--rouge); }

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 3px; cursor: pointer;
  background: var(--graphite); border-radius: 999px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 999px;
  background: var(--rouge); border: 2px solid var(--noir);
}
input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 999px;
  background: var(--rouge); border: 2px solid var(--noir);
}

.barre-resultats { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--filet); padding-bottom: 1.25rem; }
.choix-tri { display: flex; align-items: center; gap: 0.75rem; }
select {
  cursor: pointer; border: 1px solid var(--filet); border-radius: var(--r-plaque);
  background: transparent; padding: 0.5rem 0.75rem; font-size: 0.8125rem; color: var(--blanc);
}
select:focus { border-color: var(--filet-fort); outline: none; }
select option { background: var(--noir); }

.vide { padding-block: 6rem; text-align: center; }
.vide h3 { font-size: 1.5rem; }
.vide p { margin: 1rem auto 0; max-width: 28rem; font-size: 0.875rem; line-height: 1.75; color: var(--argent); }

/* --------------------------------------------------------------------------
   FICHE VÉHICULE
   -------------------------------------------------------------------------- */

.fil-ariane { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.fil-ariane a { transition: color .4s; }
.fil-ariane a:hover { color: var(--blanc); }

.mise-vehicule { display: grid; gap: 3rem; }
@media (min-width: 1024px) { .mise-vehicule { grid-template-columns: 7fr 5fr; gap: 4rem; align-items: start; } }

.galerie .cadre { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-carte); overflow: hidden; background: var(--graphite); cursor: zoom-in; }
.galerie .compteur { position: absolute; bottom: 1rem; right: 1rem; z-index: 5; padding: 0.375rem 0.75rem; border-radius: var(--r-plaque); background: rgb(10 10 10 / 0.75); backdrop-filter: blur(6px); font-family: var(--f-mono); font-size: 0.6875rem; }
.galerie .fleche {
  position: absolute; top: 50%; z-index: 5; transform: translateY(-50%);
  height: 2.75rem; width: 2.75rem; display: grid; place-items: center;
  border: 1px solid var(--filet-fort); border-radius: 999px;
  background: rgb(10 10 10 / 0.55); backdrop-filter: blur(6px);
  cursor: pointer; transition: background-color .4s var(--ease), color .4s var(--ease);
}
.galerie .fleche:hover { background: var(--blanc); color: var(--noir); }
.galerie .fleche.prec { left: 1rem; }
.galerie .fleche.suiv { right: 1rem; }
/* Une voiture peut avoir vingt photos : la bande défile au lieu de se comprimer. */
.vignettes {
  margin-top: 0.75rem; display: flex; gap: 0.75rem;
  overflow-x: auto; padding-bottom: 0.5rem;
  scroll-snap-type: x proximity;
  scrollbar-width: thin; scrollbar-color: var(--graphite) transparent;
}
.vignettes::-webkit-scrollbar { height: 4px; }
.vignettes::-webkit-scrollbar-track { background: transparent; }
.vignettes::-webkit-scrollbar-thumb { background: var(--graphite); border-radius: 99px; }
.vignette {
  position: relative; flex: 0 0 5.5rem; aspect-ratio: 4 / 3;
  border-radius: var(--r-plaque); overflow: hidden; background: var(--graphite);
  cursor: pointer; border: 1px solid transparent; padding: 0;
  scroll-snap-align: start;
}
@media (min-width: 768px) { .vignette { flex-basis: 7rem; } }
.vignette.actif { border-color: var(--blanc); }
.vignette:not(.actif) { opacity: .45; transition: opacity .4s; }
.vignette:not(.actif):hover { opacity: .8; }

.bloc-achat { border: 1px solid var(--filet); border-radius: var(--r-panneau); padding: 1.75rem; }
@media (min-width: 640px) { .bloc-achat { padding: 2rem; } }
@media (min-width: 1024px) { .bloc-achat { position: sticky; top: 7rem; } }
.bloc-achat .prix-grand { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 500; letter-spacing: -0.02em; }
.bloc-achat .actions { margin-top: 1.75rem; display: grid; gap: 0.75rem; }
.liste-rassurance { margin-top: 1.75rem; border-top: 1px solid var(--filet); padding-top: 1.25rem; display: grid; gap: 0.75rem; }
.liste-rassurance li { display: flex; gap: 0.75rem; font-size: 0.8125rem; color: var(--argent); line-height: 1.55; }
.liste-rassurance .puce { color: var(--rouge); flex: none; }

.bloc-texte h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.bloc-texte p { margin-top: 1.25rem; font-size: 0.9375rem; line-height: 1.8; color: var(--argent); max-width: 46rem; }
.bloc-texte p:first-child { margin-top: 0; font-size: clamp(1.0625rem, 2vw, 1.25rem); line-height: 1.7; color: var(--blanc); }

.colonnes-listes { display: grid; gap: 2.5rem; }
@media (min-width: 640px) { .colonnes-listes { grid-template-columns: 1fr 1fr; } }
.liste-puces li { display: flex; gap: 0.75rem; padding-block: 0.5rem; font-size: 0.875rem; color: var(--argent); }
.liste-puces .tiret { color: var(--rouge); flex: none; font-family: var(--f-mono); font-size: 0.75rem; padding-top: 0.15rem; }

.mention { margin-top: 1.5rem; font-size: 0.75rem; line-height: 1.65; color: rgb(195 200 206 / 0.65); }

/* Détail complet du véhicule, replié par défaut. */
.bloc-detail { margin-top: 2.5rem; }
.bloc-detail[hidden] { display: none; }
.groupes-detail { display: grid; gap: 2.5rem; }
@media (min-width: 640px) { .groupes-detail { grid-template-columns: 1fr 1fr; } }
.groupe-detail h3 { font-size: 1rem; margin-bottom: 1rem; }
.ligne-detail { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; padding-block: 0.6rem; border-bottom: 1px solid var(--filet); }
.ligne-detail dt { font-size: 0.875rem; color: var(--argent); }
.ligne-detail dd { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: 0.875rem; text-align: right; }
.options-completes { margin-top: 2.5rem; border-top: 1px solid var(--filet); padding-top: 2rem; }
.options-completes ul { columns: 1; column-gap: 2.5rem; margin-top: 1rem; }
@media (min-width: 640px) { .options-completes ul { columns: 2; } }
@media (min-width: 1024px) { .options-completes ul { columns: 3; } }
.options-completes li { break-inside: avoid; display: flex; gap: 0.6rem; padding-block: 0.35rem; font-size: 0.8125rem; color: var(--argent); }
.options-completes .tiret { color: var(--rouge); flex: none; font-family: var(--f-mono); font-size: 0.6875rem; padding-top: 0.2rem; }
.bloc-detail .texte-libre p { margin-top: 1rem; font-size: 0.9375rem; line-height: 1.8; color: var(--argent); max-width: 46rem; }

/* --------------------------------------------------------------------------
   FORMULAIRE DE CONTACT
   -------------------------------------------------------------------------- */

.mise-contact { display: grid; gap: 3.5rem; }
@media (min-width: 1024px) { .mise-contact { grid-template-columns: 7fr 5fr; gap: 4rem; align-items: start; } }
.champs { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .champs.deux { grid-template-columns: 1fr 1fr; } }
.champ label { display: block; font-family: var(--f-mono); font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--argent); margin-bottom: 0.625rem; }
.champ input, .champ textarea, .champ select {
  width: 100%; border: 1px solid var(--filet); border-radius: var(--r-plaque);
  background: transparent; padding: 0.875rem 1rem;
  font-size: 0.9375rem; color: var(--blanc);
}
.champ textarea { min-height: 9rem; resize: vertical; line-height: 1.6; }
.champ input:focus, .champ textarea:focus, .champ select:focus { border-color: var(--filet-fort); outline: none; }
.champ input::placeholder, .champ textarea::placeholder { color: rgb(195 200 206 / 0.4); }
.champ .erreur { margin-top: 0.5rem; font-size: 0.75rem; color: var(--rouge); }
.champ.invalide input, .champ.invalide textarea { border-color: var(--rouge); }

.bloc-infos { border: 1px solid var(--filet); border-radius: var(--r-panneau); padding: 2rem; }
.bloc-infos + .bloc-infos { margin-top: 1.5rem; }

.confirmation { border: 1px solid var(--filet-fort); border-radius: var(--r-panneau); padding: 2rem; background: var(--anthracite); }
.confirmation h3 { font-size: 1.5rem; }
.confirmation p { margin-top: 1rem; font-size: 0.9375rem; line-height: 1.75; color: var(--argent); }

/* --------------------------------------------------------------------------
   TÉMOIGNAGES
   -------------------------------------------------------------------------- */

/* Carrousel d'avis : la piste glisse d'une carte à la fois. */
.carrousel { margin-top: 3.5rem; overflow: hidden; }
.piste { display: flex; gap: 2rem; transition: transform .9s var(--ease); will-change: transform; }
.piste > .avis { flex: 0 0 100%; }
@media (min-width: 768px) { .piste > .avis { flex: 0 0 calc(50% - 1rem); } }
@media (min-width: 1280px) { .piste > .avis { flex: 0 0 calc(33.333% - 1.34rem); } }
.puces-avis { display: flex; justify-content: center; gap: 0.5rem; margin-top: 2.5rem; }
.puces-avis button {
  height: 2px; width: 1.75rem; padding: 0;
  border: 0; background: var(--filet-fort); cursor: pointer;
  transition: background-color .5s var(--ease), width .5s var(--ease);
}
.puces-avis button:hover { background: var(--argent); }
.puces-avis button[aria-selected="true"] { background: var(--rouge); width: 2.75rem; }
.avis { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-panneau); padding: 1.75rem; transition: border-color .7s var(--ease); }
.avis blockquote { flex: 1; }
@media (min-width: 640px) { .avis { padding: 2.25rem; } }
.avis:hover { border-color: var(--filet-fort); }
.avis .note { display: flex; align-items: center; gap: 0.375rem; }
.avis .note span { display: block; height: 3px; width: 1.5rem; background: var(--rouge); }
.avis blockquote { margin-top: 1.5rem; font-size: 0.9375rem; line-height: 1.75; color: rgb(244 245 246 / 0.9); }
.avis figcaption { margin-top: 1.75rem; border-top: 1px solid var(--filet); padding-top: 1.25rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; }
.avis .auteur { font-size: 0.875rem; font-weight: 600; }

/* --------------------------------------------------------------------------
   PIED DE PAGE
   -------------------------------------------------------------------------- */

footer { border-top: 1px solid var(--filet); background: var(--noir); }
footer .interieur { padding-block: 4rem; }
@media (min-width: 768px) { footer .interieur { padding-block: 5rem; } }
.grille-pied { display: grid; gap: 3rem; }
@media (min-width: 768px) { .grille-pied { grid-template-columns: 5fr 3fr 4fr; } }
.grille-pied h2 { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--argent); font-weight: 500; }
.grille-pied ul { margin-top: 1.25rem; display: grid; gap: 0.75rem; }
.grille-pied a { font-size: 0.875rem; color: var(--argent); transition: color .4s var(--ease); }
.grille-pied a:hover { color: var(--blanc); }
.grille-pied address { font-style: normal; margin-top: 1.25rem; display: grid; gap: 0.75rem; font-size: 0.875rem; color: var(--argent); line-height: 1.6; }
.reseaux { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.reseaux a { font-family: var(--f-mono); font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase; }
.bas-pied { margin-top: 3.5rem; border-top: 1px solid var(--filet); padding-top: 1.75rem; display: flex; flex-direction: column; gap: 1.25rem; }
@media (min-width: 640px) { .bas-pied { flex-direction: row; align-items: center; justify-content: space-between; } }
.bas-pied ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.bas-pied a { font-size: 0.75rem; color: rgb(195 200 206 / 0.7); transition: color .4s; }
.bas-pied a:hover { color: var(--blanc); }

/* Visionneuse plein écran de la galerie */
#visionneuse {
  position: fixed; inset: 0; z-index: 80;
  background: rgb(10 10 10 / 0.96);
  display: none; place-items: center;
  padding: clamp(1rem, 5vw, 4rem);
}
#visionneuse.ouvert { display: grid; }
#visionneuse .cadre-plein { position: relative; width: min(100%, 78rem); aspect-ratio: 16 / 10; border-radius: var(--r-carte); overflow: hidden; background: var(--graphite); }
#visionneuse .photo-vehicule { object-fit: contain; }
#visionneuse .fleche {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
  height: 3rem; width: 3rem; display: grid; place-items: center;
  border: 1px solid var(--filet-fort); border-radius: 999px;
  background: rgb(10 10 10 / 0.55); backdrop-filter: blur(6px);
  color: var(--blanc); font-size: 1.5rem; line-height: 1; cursor: pointer;
  transition: background-color .4s var(--ease), color .4s var(--ease);
}
#visionneuse .fleche:hover { background: var(--blanc); color: var(--noir); }
#visionneuse .fleche.prec { left: clamp(0.5rem, 3vw, 2.5rem); }
#visionneuse .fleche.suiv { right: clamp(0.5rem, 3vw, 2.5rem); }
#visionneuse .compteur-plein {
  position: absolute; bottom: clamp(1rem, 4vw, 2.5rem); left: 50%;
  transform: translateX(-50%); z-index: 6;
  font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: 0.75rem;
  padding: 0.4rem 0.85rem; border-radius: var(--r-plaque);
  background: rgb(10 10 10 / 0.6); backdrop-filter: blur(6px);
}
#visionneuse .fermer { position: absolute; top: 1.5rem; right: 1.5rem; z-index: 6; height: 2.75rem; width: 2.75rem; display: grid; place-items: center; border: 1px solid var(--filet-fort); border-radius: 999px; background: transparent; cursor: pointer; }
#visionneuse .fermer:hover { background: var(--blanc); color: var(--noir); }