/* =====================================================================
   CAR&SENS · V2 « jeune et épurée » (26/09/2026)
   Même direction artistique (noir, blanc, rouge #BC1735), mise en page
   aérée, typographie Sora + Inter, en-tête flottant, illustrations
   « plan technique » dessinées dans Figma et animées au défilement.
   Fichier unique : remplace excel.css + premium.css pour la V2.
   ===================================================================== */
/* 01/10 : polices plus chaleureuses, dans la charte. Josefin Sans = police du logo
   (CAR en gras, &SENS en maigre), Jost pour le texte, Allura pour la touche manuscrite. */
@font-face { font-family: "Josefin Sans"; src: url("/assets/fonts/josefin.woff2") format("woff2"); font-weight: 100 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Josefin Sans"; src: url("/assets/fonts/josefin-italic.woff2") format("woff2"); font-weight: 100 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Jost"; src: url("/assets/fonts/jost.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Allura"; src: url("/assets/fonts/allura.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --noir: #070708; --noir-2: #0c0c0e; --carte: #121215; --carte-2: #18181c; --carte-3: #202025; --champ: #0d0d10;
  --ligne: rgba(236,229,214,.09); --ligne-2: rgba(236,229,214,.15); --ligne-3: rgba(236,229,214,.26);
  /* Blanc cassé (01/10) : le blanc pur sur noir était jugé agressif. Fonds : noir neutre d’origine (pas de marron). */
  --blanc: #ece5d6; --creme: #efe8da; --sable: #d9cdb1; --papier: #f1ece2; --encre: #1a1714;
  --texte: rgba(236,229,214,.82); --texte-2: rgba(236,229,214,.62); --texte-3: rgba(236,229,214,.44);
  --rouge: #bc1735; --rouge-2: #d11f40; --rouge-f: #8e0f26; --rouge-halo: rgba(188,23,53,.32); --rouge-voile: rgba(188,23,53,.12);
  --vert: #2fbf71;
  --f-titre: "Josefin Sans", "Jost", ui-sans-serif, system-ui, sans-serif;
  --f-texte: "Jost", ui-sans-serif, system-ui, sans-serif;
  --f-main: "Allura", "Josefin Sans", cursive;
  --r-xs: 10px; --r-s: 14px; --r: 20px; --r-l: 28px; --r-xl: 40px;
  --wrap: 1320px; --gout: clamp(16px, 4vw, 48px);
  --sec: clamp(80px, 8.5vw, 132px);
  --ease: cubic-bezier(.16, .84, .24, 1); --ease-2: cubic-bezier(.65, 0, .35, 1);
  --hd-h: 84px; --bandeau-h: 32px;
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 140px; }
body { margin: 0; min-height: 100vh; background: var(--noir); color: var(--blanc); font: 400 17px/1.62 var(--f-texte); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
::selection { background: var(--rouge); color: var(--creme); }
:focus-visible { outline: 2px solid var(--creme); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
.ico { width: 18px; height: 18px; flex: none; fill: currentColor; }
.sr-only, .visuellement-cache { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.evitement { position: fixed; left: 12px; top: -80px; z-index: 200; padding: 12px 18px; border-radius: 12px; background: var(--creme); color: #000; font-weight: 600; }
.evitement:focus { top: 12px; }
.piege { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Mise en page ---------- */
.wrap { width: min(100% - 2 * var(--gout), var(--wrap)); margin-inline: auto; }
.sec { padding-block: var(--sec); }
.sec--haut { padding-top: calc(var(--sec) * .6); }
.sec--bas { padding-bottom: calc(var(--sec) * .6); }
main { display: block; }
.tete { display: grid; gap: 16px; max-width: 780px; margin-bottom: clamp(40px, 5vw, 72px); }
.tete--centre { margin-inline: auto; text-align: center; justify-items: center; }
.tete--split { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 40px; max-width: none; }
.tete--split > div:first-child { display: grid; gap: 16px; max-width: 760px; }

/* ---------- Typographie ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 500 13.5px/1.2 var(--f-texte); letter-spacing: .01em; color: var(--texte-2); }
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rouge); box-shadow: 0 0 0 4px var(--rouge-voile); flex: none; }
.display, .h1 { font: 500 clamp(44px, 6.4vw, 96px)/.98 var(--f-titre); letter-spacing: -.005em; color: var(--creme); text-wrap: balance; }
.h2 { font: 500 clamp(34px, 4.4vw, 62px)/1.03 var(--f-titre); letter-spacing: -.005em; color: var(--creme); text-wrap: balance; }
.h3 { font: 500 clamp(22px, 2.2vw, 30px)/1.12 var(--f-titre); letter-spacing: -.005em; color: var(--creme); }
.lead { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.6; color: var(--texte); text-wrap: pretty; max-width: 62ch; }
.muted { color: var(--texte-2); }
.rouge { color: var(--rouge); }
.prose p + p { margin-top: 14px; }
.lien-fleche { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--creme); }
.lien-fleche .fl { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--ligne-3); transition: background .3s, border-color .3s, transform .4s var(--ease); }
.lien-fleche:hover .fl { background: var(--rouge); border-color: var(--rouge); transform: translateX(3px); }
.lien-souligne { color: var(--creme); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--ligne-3); transition: text-decoration-color .3s; }
.lien-souligne:hover { text-decoration-color: var(--rouge); }

/* ---------- Boutons (et alias utilisés par les scripts) ---------- */
.btn, .btn-cta, .btn-line, .btn-primary, .btn-outline, .btn-accent, .btn-hero, .btn--rouge-fort, .btn--petit-contour, .btn--encre, .btn--ligne, .btn--rouge, .ech-cta {
  --h: 54px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: var(--h); padding: 0 26px; border-radius: 999px; border: 1px solid transparent;
  font: 600 15px/1 var(--f-texte); letter-spacing: -.005em; white-space: nowrap; cursor: pointer; isolation: isolate; overflow: hidden;
  transition: background-color .3s, color .3s, border-color .3s, box-shadow .3s, transform .4s var(--ease);
}
.btn--red, .btn-cta, .btn-primary, .btn-accent, .btn--rouge-fort, .btn--encre, .btn--rouge, .ech-cta { background: var(--rouge); color: var(--creme); box-shadow: 0 14px 34px -16px var(--rouge-halo); }
.btn--red:hover, .btn-cta:hover, .btn-primary:hover, .btn-accent:hover, .btn--rouge-fort:hover, .btn--encre:hover, .btn--rouge:hover, .ech-cta:hover { background: var(--rouge-2); box-shadow: 0 18px 40px -14px var(--rouge-halo); }
.btn--verre, .btn-line, .btn-outline, .btn-hero, .btn--petit-contour, .btn--ligne { background: rgba(236,229,214,.07); border-color: var(--ligne-2); color: var(--creme); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.btn--verre:hover, .btn-line:hover, .btn-outline:hover, .btn-hero:hover, .btn--petit-contour:hover, .btn--ligne:hover { background: rgba(236,229,214,.14); border-color: var(--ligne-3); }
.btn--blanc { background: var(--creme); color: #14120f; }
.btn--blanc:hover { background: #e2dac8; }
.btn--petit { --h: 44px; padding: 0 18px; font-size: 14px; }
.btn .ico { width: 16px; height: 16px; }
.btn .fl { display: grid; place-items: center; width: 30px; height: 30px; margin-right: -14px; border-radius: 50%; background: rgba(236,229,214,.16); transition: transform .45s var(--ease); }
.btn--verre .fl, .btn-line .fl { background: rgba(236,229,214,.1); }
.btn:hover .fl { transform: translateX(3px) rotate(-45deg); }
.btn .fl svg { width: 14px; height: 14px; }
.btn:active { transform: scale(.98); }
.boutons { display: flex; flex-wrap: wrap; gap: 12px; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--creme); }
.link-arrow .ico { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.link-arrow:hover .ico { transform: translateX(4px); }
[data-magnet] { will-change: transform; }

/* ---------- Pastilles (avis, réseaux, téléphone) ---------- */
.chip { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px; border-radius: 999px; background: rgba(12,12,14,.5); border: 1px solid var(--ligne-2); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font: 500 14px/1 var(--f-texte); color: var(--creme); transition: background .3s, border-color .3s; }
.chip:hover { background: rgba(12,12,14,.72); border-color: var(--ligne-3); }
.chip b { font-weight: 700; }
.chip .muted { color: rgba(236,229,214,.7); }
.chip--rond { width: 46px; padding: 0; justify-content: center; }
.chip--fb { background: #1877f2; border-color: #1877f2; }
.chip--fb:hover { background: #1464cc; border-color: #1464cc; }
.chip--ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); border-color: transparent; }
.chip--ig:hover { filter: brightness(1.1); border-color: transparent; }
.etoiles { display: inline-flex; gap: 2px; color: #fbbc04; }
.etoiles svg { width: 14px; height: 14px; fill: currentColor; }

/* ---------- Apparitions ---------- */
.reveal { opacity: 0; transform: translate3d(0, 34px, 0); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.reveal.vu { opacity: 1; transform: none; }
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.split .w > span { display: inline-block; transform: translate3d(0, 108%, 0); transition: transform 1.1s var(--ease); transition-delay: calc(var(--i, 0) * 45ms + var(--d, 0ms)); }
.split.vu .w > span { transform: none; }
.masque { clip-path: inset(0 0 100% 0 round var(--r)); transition: clip-path 1.3s var(--ease); }
.masque.vu { clip-path: inset(0 0 0 0 round var(--r)); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal, .split .w > span, .masque { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}

/* =====================================================================
   En-tête flottant (verre dépoli) + menu plein écran
   ===================================================================== */
.hd { position: fixed; top: calc(var(--bandeau-h) + 10px); left: 0; right: 0; z-index: 70; padding-inline: 16px; pointer-events: none; transition: transform .6s var(--ease); }
.hd.cache { transform: translate3d(0, calc(-100% - 20px), 0); }
.hd__bar { pointer-events: auto; position: relative; isolation: isolate; display: flex; align-items: center; gap: 12px; max-width: 1360px; height: var(--hd-h); margin: 0 auto; padding: 0 9px 0 18px; border-radius: 20px; }
/* 01/10 : le fond de la barre est une forme (dessinée dans Figma, page « V2 · En-tête animé ») :
   en haut des pages à photo, une languette descend sous le logo pour le porter ; au défilement
   elle se replie en même temps que le logo rapetisse. Forme recalculée par v2.js (formeBarre). */
.hd__fond, .hd__trait { position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: calc(100% + 200px); pointer-events: none; }
.hd__fond { background: rgba(14,14,16,.6); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); clip-path: inset(0 0 200px 0 round 20px); transition: background .4s; }
.hd__trait { overflow: visible; }
.hd__trait path { fill: none; stroke: rgba(236,229,214,.11); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hd.is-scrolled .hd__fond, body.menu-ouvert .hd__fond { background: rgba(14,14,16,.86); }
/* 01/10 : un seul logo (modèle Hangar Bordelais). Volant et nom dessinés séparément pour l'animer :
   en haut des pages à grande photo (.hd.grand), le volant est grand et déborde sur la photo, le nom dessous ;
   au défilement, il rapetisse dans la barre, nom à côté. */
/* 02/10 (Christophe) : en haut de page, grand volant porté par la languette ; au défilement il se fige
   dans la barre avec le nom CAR&SENS, plus grand qu'avant. 03/10 : le nom reste visible en haut (voir fin de fichier). */
.hd__logo { --vl: 60px; --mw: 176px; position: relative; flex: none; display: block; width: calc(var(--vl) + 12px + var(--mw)); height: var(--vl); }
.hd__volant, .hd__mot { position: absolute; display: block; }
.hd__volant { left: 0; top: 0; width: var(--vl); height: var(--vl); }
.hd__volant svg { display: block; width: 100%; height: 100%; }
.hd__mot { left: calc(var(--vl) + 12px); top: 50%; width: var(--mw); height: auto; transform: translateY(-50%); transition: opacity .45s ease .15s; }
.hd.pret .hd__volant { transition: top .7s var(--ease), left .7s var(--ease), width .7s var(--ease), height .7s var(--ease), filter .4s; }
/* 05/10 : marges égales (16 px) entre le grand volant et les bords de la languette : la barre a 18 px de marge
   à gauche et le logo est centré dans ses 84 px (12 px au-dessus) → left -2, top 4 */
.hd.grand .hd__volant { left: -2px; top: 4px; width: 156px; height: 156px; filter: drop-shadow(0 16px 34px rgba(0,0,0,.6)); }
.hd.grand .hd__fond { background: rgba(14,14,16,.5); }
/* Navigation « priorité » : Accueil, Vendre, Acheter, Showroom toujours en premier ;
   ce qui ne rentre pas passe dans le menu déroulant « Plus ». */
.hd__nav { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 4px; margin-inline: 12px; }
.hd__liens { display: flex; align-items: center; gap: 2px; min-width: 0; overflow: hidden; }
.hd__liens li { flex: none; }
.hd__liens li.cache { display: none; }
.hd__liens a { position: relative; display: block; padding: 10px 13px; border-radius: 12px; font: 400 15.5px/1 var(--f-texte); color: var(--texte); white-space: nowrap; transition: color .25s, background .25s; }
.hd__liens a:hover { color: var(--creme); background: rgba(236,229,214,.06); }
.hd__liens a[aria-current="page"] { color: var(--creme); background: rgba(236,229,214,.09); box-shadow: inset 0 -2px 0 var(--rouge); }
.hd__plus { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px 0 10px; border-radius: 14px; background: rgba(236,229,214,.08); border: 1px solid var(--ligne-2); font: 500 15px/1 var(--f-texte); color: var(--creme); transition: background .25s; }
.hd__plus:hover, .hd__plus[aria-expanded="true"] { background: rgba(236,229,214,.15); }
.hd__plus-ico { position: relative; width: 20px; height: 20px; border-radius: 50%; background: var(--rouge); }
.hd__plus-ico::before, .hd__plus-ico::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; margin: -1px 0 0 -5px; border-radius: 2px; background: var(--creme); transition: transform .35s var(--ease); }
.hd__plus-ico::after { transform: rotate(90deg); }
.hd__plus[aria-expanded="true"] .hd__plus-ico::after { transform: rotate(0deg); }
.hd__actions { display: flex; align-items: center; gap: 8px; flex: none; }
.hd__tel { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 46px; padding: 0 18px; border-radius: 14px; background: var(--rouge); color: var(--creme); font: 500 15px/1 var(--f-texte); white-space: nowrap; transition: background .25s; }
.hd__tel:hover { background: var(--rouge-2); }
.hd__tel .ico { width: 16px; height: 16px; }
/* Menu déroulant (remplace le menu plein écran) : textes plus petits et moins blancs */
.hd__deroulant { position: absolute; right: max(16px, calc((100% - 1360px) / 2)); top: calc(100% + 10px); z-index: 5; width: min(340px, calc(100vw - 24px)); padding: 10px; border-radius: 22px; background: rgba(18,18,21,.97); border: 1px solid var(--ligne-2); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 30px 70px -30px #000; pointer-events: auto; animation: descendre .35s var(--ease); }
.hd__deroulant-liens a { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 14px; font: 400 16.5px/1.2 var(--f-texte); color: var(--texte); transition: background .2s, color .2s; }
.hd__deroulant-liens a::after { content: "→"; color: var(--texte-3); }
.hd__deroulant-liens a:hover, .hd__deroulant-liens a[aria-current="page"] { background: rgba(236,229,214,.06); color: var(--creme); }
.hd__deroulant-liens:empty { display: none; }
.hd__deroulant-bas { display: grid; gap: 10px; margin-top: 6px; padding: 14px 14px 6px; border-top: 1px solid var(--ligne); }
.hd__deroulant-liens:empty + .hd__deroulant-bas { margin-top: 0; border-top: 0; }
.hd__deroulant-infos { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; font-size: 14px; color: var(--texte-2); }
.hd__deroulant-infos a { color: var(--creme); }
:root { --hd-h: 84px; }
@media (max-width: 1299px) { .hd__logo { --vl: 54px; --mw: 158px; } .hd.grand .hd__volant { top: 1px; width: 140px; height: 140px; } .hd__tel span { display: none; } .hd__tel { width: 46px; padding: 0; } }
@media (max-width: 1099px) { .hd__logo { --vl: 50px; --mw: 146px; } .hd.grand .hd__volant { top: -1px; } .hd__liens a { padding: 10px 10px; font-size: 15px; } }
@media (max-width: 720px) {
  :root { --hd-h: 124px; }
  .hd { padding-inline: 8px; }
  .hd__bar { flex-wrap: wrap; height: auto; padding: 8px 8px 6px 12px; row-gap: 4px; border-radius: 20px; }
  .hd__logo { --vl: 46px; --mw: 134px; }
  .hd.grand .hd__logo { height: 62px; }
  .hd.grand .hd__volant { left: 0; top: 0; width: 62px; height: 62px; }
  .hd.pret .hd__logo { transition: height .6s var(--ease); }
  .hd__actions { margin-left: auto; order: 2; }
  .hd__nav { order: 3; width: 100%; flex: none; margin: 0; padding-top: 6px; border-top: 1px solid var(--ligne); justify-content: space-between; }
  .hd__liens { flex: 1; justify-content: space-between; }
  .hd__liens a { padding: 10px 8px; font-size: 15.5px; }
  .hd__plus { height: 38px; padding: 0 10px 0 8px; }
  .hd__plus-txt { display: none; }
  .hd__tel { height: 42px; width: 42px; }
  .hd__deroulant { right: 8px; }
}
@media (max-width: 380px) { .hd__logo { --vl: 40px; --mw: 116px; } .hd__liens a { padding: 10px 6px; font-size: 14.5px; } }

@keyframes descendre { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
body.menu-ouvert { overflow: hidden; }

/* Statut d'ouverture */
.statut { display: inline-flex; align-items: center; gap: 8px; font: 500 13.5px/1.2 var(--f-texte); color: var(--texte); }
.statut::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #e0a100; box-shadow: 0 0 0 4px rgba(224,161,0,.16); flex: none; }
.statut.ouvert::before { background: var(--vert); box-shadow: 0 0 0 4px rgba(47,191,113,.18); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(47,191,113,.05); } }

/* =====================================================================
   Pied de page
   ===================================================================== */
.pied { position: relative; margin: clamp(40px, 6vw, 80px) 12px 12px; padding: clamp(56px, 7vw, 96px) 0 28px; border-radius: var(--r-xl); background: radial-gradient(60% 80% at 100% 0%, rgba(188,23,53,.14), transparent 60%), var(--noir-2); border: 1px solid var(--ligne); overflow: hidden; }
.pied__haut { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px; padding-bottom: clamp(48px, 6vw, 80px); border-bottom: 1px solid var(--ligne); }
.pied__slogan { max-width: 16ch; font: 500 clamp(32px, 4.2vw, 60px)/1 var(--f-titre); letter-spacing: -.005em; color: var(--creme); }
.pied__haut .eyebrow { margin-bottom: 18px; }
.pied__grille { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; padding-block: clamp(40px, 5vw, 64px); }
.pied__marque img { width: 170px; height: auto; }
.pied__marque p { max-width: 34ch; margin-top: 18px; font-size: 14.5px; color: var(--texte-2); }
.pied h2 { margin-bottom: 18px; font: 500 13px/1 var(--f-texte); letter-spacing: .06em; text-transform: uppercase; color: var(--texte-3); }
.pied__liste { display: grid; gap: 10px; }
.pied__liste a { font-size: 15px; color: var(--texte); transition: color .25s; }
.pied__liste a:hover { color: var(--creme); }
.pied__infos { display: grid; gap: 14px; font-size: 15px; color: var(--texte); }
.pied__infos a { color: var(--creme); }
.pied__infos .ligne { display: flex; gap: 12px; }
.pied__infos .ico { width: 16px; height: 16px; margin-top: 4px; color: var(--texte-3); }
.social { display: flex; flex-wrap: wrap; gap: 8px; }
.social a { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 16px 0 12px; border-radius: 12px; font: 500 14px/1 var(--f-texte); color: var(--creme); transition: filter .25s, transform .3s var(--ease); }
.social a:hover { filter: brightness(1.1); transform: translateY(-2px); }
.social .ico { width: 17px; height: 17px; }
.social__fb { background: #1877f2; }
.social__ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.social__google { background: var(--creme); color: #1f1f1f !important; }
.social__google .ico { color: #4285f4; }
.pied .social { margin-top: 22px; }
.pied__bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-top: 24px; border-top: 1px solid var(--ligne); font-size: 13px; color: var(--texte-3); }
.pied__bas ul { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.pied__bas a { color: var(--texte-2); transition: color .25s; }
.pied__bas a:hover { color: var(--creme); }
.back-top { position: fixed; right: 18px; bottom: 18px; z-index: 40; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(18,18,21,.8); border: 1px solid var(--ligne-2); color: var(--creme); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .3s, transform .4s var(--ease), background .25s; }
.back-top.visible { opacity: 1; transform: none; pointer-events: auto; }
.back-top:hover { background: var(--rouge); }
.back-top .ico { width: 16px; height: 16px; }
@media (max-width: 1000px) { .pied__grille { grid-template-columns: 1fr 1fr; } .pied__marque { grid-column: 1 / -1; } }
@media (max-width: 560px) { .pied { margin-inline: 8px; border-radius: 28px; } .pied__grille { grid-template-columns: 1fr; gap: 32px; } .pied__bas { flex-direction: column; align-items: flex-start; } }

/* =====================================================================
   Accueil
   ===================================================================== */
.hero { position: relative; height: calc(100svh - 24px - var(--bandeau-h)); min-height: 620px; max-height: 1100px; margin: calc(var(--bandeau-h) + 12px) 12px 0; border-radius: var(--r-xl); overflow: hidden; isolation: isolate; background: #0b0b0c; }
.hero__media { position: absolute; inset: 0; z-index: -2; transform-origin: 50% 60%; will-change: transform; }
.hero__media img, .hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__voile { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(7,7,8,.45) 0%, rgba(7,7,8,0) 26%, rgba(7,7,8,0) 48%, rgba(7,7,8,.82) 100%), linear-gradient(90deg, rgba(7,7,8,.55) 0%, rgba(7,7,8,0) 60%); }
.hero__contenu { position: absolute; left: 0; right: 0; bottom: clamp(28px, 5vw, 64px); display: grid; gap: 20px; justify-items: start; }
.hero__ligne { font: 500 14.5px/1.4 var(--f-texte); color: rgba(236,229,214,.82); }
.hero__titre { max-width: 13ch; font: 500 clamp(40px, 5.4vw, 76px)/1 var(--f-titre); letter-spacing: -.005em; color: var(--creme); text-wrap: balance; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.hero__preuves { display: flex; flex-wrap: wrap; gap: 8px; }
.hero-sound { position: absolute; top: calc(var(--hd-h) + var(--bandeau-h) + 32px); right: 24px; z-index: 2; display: none; align-items: center; gap: 10px; height: 46px; padding: 0 18px 0 14px; border-radius: 999px; background: rgba(12,12,14,.6); border: 1px solid var(--ligne-2); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font: 600 14px/1 var(--f-texte); color: var(--creme); }
.hero-sound.visible { display: inline-flex; }
.hero-sound .ico { width: 18px; height: 18px; }
.hero__defiler { position: absolute; right: clamp(20px, 3vw, 40px); bottom: clamp(28px, 5vw, 64px); display: grid; justify-items: center; gap: 10px; font: 500 12px/1 var(--f-texte); letter-spacing: .12em; text-transform: uppercase; color: rgba(236,229,214,.6); writing-mode: vertical-rl; }
.hero__defiler::after { content: ""; width: 1px; height: 56px; background: linear-gradient(rgba(236,229,214,.7), transparent); animation: defiler 2.2s var(--ease-2) infinite; transform-origin: top; }
@keyframes defiler { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
@media (max-width: 720px) { .hero { margin: calc(var(--bandeau-h) + 8px) 8px 0; height: calc(100svh - 16px - var(--bandeau-h)); border-radius: 28px; min-height: 560px; } .hero__defiler { display: none; } .hero__voile { background: linear-gradient(180deg, rgba(7,7,8,.5) 0%, rgba(7,7,8,0) 22%, rgba(7,7,8,.2) 45%, rgba(7,7,8,.92) 100%); } .hero__actions .btn { flex: 1 1 auto; } }

/* Bandeau de marques (défilement continu, glissable) */
.marques { position: relative; padding: clamp(36px, 5vw, 56px) 0; overflow: hidden; touch-action: pan-y; cursor: grab; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marques.glisse { cursor: grabbing; }
.marques__piste { display: flex; align-items: center; gap: clamp(40px, 5vw, 72px); width: max-content; will-change: transform; }
.brand-link { position: relative; display: flex; align-items: center; justify-content: center; height: 56px; flex: none; opacity: .55; transition: opacity .3s; user-select: none; -webkit-user-drag: none; }
.brand-link:hover { opacity: 1; }
.brand-link img { width: auto; height: 34px; max-width: 120px; object-fit: contain; filter: invert(1); pointer-events: none; }
.brand-link__nb { position: absolute; top: -2px; right: -16px; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--rouge); font: 700 11px/1 var(--f-texte); color: var(--creme); opacity: 0; transform: scale(.6); transition: opacity .25s, transform .35s var(--ease); }
.brand-link:hover .brand-link__nb { opacity: 1; transform: none; }

/* Choisissez votre point de départ */
.acces__grille { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.acces-carte { position: relative; display: flex; flex-direction: column; min-height: clamp(520px, 44vw, 640px); padding: clamp(26px, 3vw, 44px); border-radius: var(--r-xl); background: var(--carte); border: 1px solid var(--ligne); overflow: hidden; isolation: isolate; transition: border-color .4s, transform .6s var(--ease); }
.acces-carte::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 55% at 50% 38%, rgba(188,23,53,.13), transparent 70%); opacity: .8; transition: opacity .5s; }
.acces-carte::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(236,229,214,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(236,229,214,.035) 1px, transparent 1px); background-size: 32px 32px; -webkit-mask-image: radial-gradient(60% 55% at 50% 40%, #000, transparent); mask-image: radial-gradient(60% 55% at 50% 40%, #000, transparent); }
.acces-carte:hover { border-color: var(--ligne-2); }
.acces-carte:hover::before { opacity: 1; }
.acces-carte__illu { position: relative; flex: 1; display: grid; place-items: center; min-height: 240px; padding: 10px 0 24px; }
.acces-carte__illu svg { width: 100%; height: auto; overflow: visible; }
.acces-carte__bas { display: grid; gap: 12px; }
.acces-carte h3 { max-width: 16ch; font: 500 clamp(26px, 2.6vw, 38px)/1.06 var(--f-titre); letter-spacing: -.005em; color: var(--creme); }
.acces-carte p { max-width: 42ch; color: var(--texte); }
.acces-carte .btn { justify-self: start; margin-top: 10px; }
.illu-compteur { position: relative; width: min(78%, 360px); margin-inline: auto; }
.illu-compteur svg { width: 100% !important; }
.compteur-km { position: absolute; left: 50%; top: 81.25%; z-index: 1; transform: translate(-50%, -50%); font: 500 clamp(12px, 1.2vw, 16px)/1 var(--f-titre); letter-spacing: .04em; color: var(--creme); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 860px) { .acces-carte { min-height: 0; } .acces-carte__illu { min-height: 220px; } }
@media (max-width: 640px) { .acces__grille { grid-template-columns: 1fr; } } /* 13/10 : deux colonnes sur tablette portrait */

/* Nos services : liste interactive, aperçu photo qui suit le curseur */
.services__liste { border-bottom: 1px solid var(--ligne); }
.services__liste a { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: clamp(22px, 2.6vw, 34px) 4px; border-top: 1px solid var(--ligne); }
.services__nom { font: 500 clamp(24px, 2.8vw, 40px)/1.1 var(--f-titre); letter-spacing: -.005em; color: var(--creme); transition: transform .6s var(--ease), color .3s; }
.services__desc { font-size: 15.5px; color: var(--texte-2); transition: color .3s; }
.services__fl { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--ligne-2); transition: background .35s, border-color .35s, transform .5s var(--ease); }
.services__fl svg { width: 16px; height: 16px; }
.services__liste a:hover .services__nom { transform: translateX(14px); }
.services__liste a:hover .services__desc { color: var(--texte); }
.services__liste a:hover .services__fl { background: var(--rouge); border-color: var(--rouge); transform: rotate(-45deg); }
.services__apercu { position: fixed; left: 0; top: 0; z-index: 30; width: 300px; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; pointer-events: none; opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.85); transition: opacity .3s, transform .45s var(--ease); box-shadow: 0 30px 70px -30px #000; }
.services__apercu.on { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); }
.services__apercu img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) { .services__liste a { grid-template-columns: 1fr auto; gap: 6px 16px; } .services__desc { grid-column: 1; } .services__fl { grid-row: 1 / span 2; grid-column: 2; width: 42px; height: 42px; } .services__apercu { display: none; } }
@media (hover: none) { .services__apercu { display: none; } }

/* Dernières arrivées : rail glissable */
.arrivees__nav { display: flex; align-items: center; gap: 10px; }
.rond { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--ligne-2); background: rgba(236,229,214,.03); transition: background .3s, border-color .3s; }
.rond:hover { background: rgba(236,229,214,.1); border-color: var(--ligne-3); }
.rond .ico { width: 14px; height: 14px; }
.rail-cartes { --pad: max(var(--gout), calc((100vw - var(--wrap)) / 2)); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); padding: 4px var(--pad) 24px; scrollbar-width: none; cursor: grab; }
.rail-cartes::-webkit-scrollbar { display: none; }
.rail-cartes.glisse { cursor: grabbing; scroll-snap-type: none; }
.rail-cartes.glisse a { pointer-events: none; }
.rail-cartes__piste { display: flex; gap: 18px; width: max-content; }
.rail-cartes .tease { width: clamp(290px, 29vw, 400px); scroll-snap-align: start; }
.arrivees:not(.pret) .rail-cartes { opacity: 0; }
.arrivees .rail-cartes { transition: opacity .8s; }
.arrivees__barre { position: relative; height: 2px; margin-top: 8px; border-radius: 2px; background: var(--ligne); overflow: hidden; }
.arrivees__barre span { position: absolute; inset: 0 auto 0 0; width: 20%; border-radius: 2px; background: var(--creme); transition: transform .2s linear, width .2s; }

/* =====================================================================
   Carte véhicule (structure générée par site.js → carteVH)
   ===================================================================== */
.tease { position: relative; display: flex; flex-direction: column; border-radius: var(--r-l); background: var(--carte); border: 1px solid var(--ligne); overflow: hidden; isolation: isolate; transition: transform .6s var(--ease), border-color .35s, box-shadow .5s; }
.tease:hover { transform: translateY(-6px); border-color: var(--ligne-2); box-shadow: 0 30px 60px -36px #000; }
.car-shot { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #0f0f11; }
.car-img { position: absolute; inset: 0; display: block; }
.car-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s, transform 1.4s var(--ease); }
.car-img img.une { transform: scale(1.3); transform-origin: 50% 96%; }
.tease:hover .car-img img.une { transform: scale(1.36); }
.tease:hover .car-img img:not(.une) { transform: scale(1.05); }
.car-img img.suivante { opacity: 0; }
.car-badge, .car-shot-count { position: absolute; top: 12px; z-index: 3; display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; background: rgba(10,10,12,.62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 600 12px/1 var(--f-texte); color: var(--creme); }
.car-badge { left: 12px; }
.car-shot-count { right: 12px; font-variant-numeric: tabular-nums; color: rgba(236,229,214,.85); }
.car-prev, .car-next { position: absolute; top: 50%; z-index: 3; display: grid; place-items: center; width: 38px; height: 38px; margin-top: -19px; border-radius: 50%; background: rgba(10,10,12,.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--creme); opacity: 0; transition: opacity .3s, background .25s; }
.car-prev { left: 12px; } .car-next { right: 12px; }
.car-prev .ico, .car-next .ico { width: 13px; height: 13px; }
.tease:hover .car-prev, .tease:hover .car-next, .car-prev:focus-visible, .car-next:focus-visible { opacity: 1; }
.car-prev:hover, .car-next:hover { background: var(--rouge); }
@media (hover: none) { .car-prev, .car-next { opacity: 1; } }
.car-dots { position: absolute; left: 0; right: 0; bottom: 12px; z-index: 3; display: flex; justify-content: center; gap: 5px; }
.car-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(236,229,214,.45); transition: width .3s var(--ease), background .3s; }
.car-dots i.active { width: 18px; border-radius: 4px; background: var(--creme); }
.card-body { display: flex; flex-direction: column; gap: 4px; padding: 20px 22px 22px; flex: 1; }
.car-marque { font: 600 12px/1.2 var(--f-texte); letter-spacing: .09em; text-transform: uppercase; color: var(--texte-2); }
.card-title { font: 500 22px/1.15 var(--f-titre); letter-spacing: -.005em; color: var(--creme); }
.card-title a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.car-version { overflow: hidden; font-size: 14px; color: var(--texte-2); white-space: nowrap; text-overflow: ellipsis; }
.car-puces { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.car-puces li { padding: 6px 11px; border-radius: 999px; background: rgba(236,229,214,.06); font-size: 12.5px; line-height: 1.2; color: var(--texte); }
.car-bas { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 18px; }
.car-puces + .car-bas { margin-top: 18px; border-top: 1px solid var(--ligne); }
.car-prix { font: 500 24px/1 var(--f-texte); letter-spacing: -.005em; color: var(--creme); font-variant-numeric: tabular-nums; }
.car-prix small { margin-left: 6px; font: 500 11px/1 var(--f-texte); letter-spacing: .06em; color: var(--texte-2); }
.car-go { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(236,229,214,.07); transition: background .35s, transform .5s var(--ease); }
.car-go svg { width: 15px; height: 15px; }
.tease:hover .car-go { background: var(--rouge); transform: rotate(-45deg); }
.tease.vendu .car-shot::after { content: "Vendu"; position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: rgba(7,7,8,.55); font: 500 22px var(--f-titre); color: var(--creme); }

/* =====================================================================
   En-têtes de pages intérieures
   ===================================================================== */
.page-tete { padding-top: calc(var(--hd-h) + var(--bandeau-h) + clamp(72px, 9vw, 128px)); padding-bottom: clamp(40px, 5vw, 72px); }
.page-tete__in { display: grid; gap: 20px; justify-items: start; }
.page-tete__in > * { max-width: 900px; }
.page-tete--centre .page-tete__in { margin-inline: auto; justify-items: center; text-align: center; }
.page-tete--illu .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 40px; }
.page-tete__illu { position: relative; display: grid; place-items: center; }
.page-tete__illu svg { width: min(100%, 420px); height: auto; overflow: visible; }
@media (max-width: 860px) { .page-tete--illu .wrap { grid-template-columns: 1fr; } .page-tete__illu svg { width: min(80%, 320px); } }
.page-hero { position: relative; height: min(82svh, 820px); min-height: 520px; margin: calc(var(--bandeau-h) + 12px) 12px 0; border-radius: var(--r-xl); overflow: hidden; isolation: isolate; }
.page-hero__media { position: absolute; inset: -8% 0; z-index: -2; will-change: transform; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7,7,8,.45), rgba(7,7,8,0) 30%, rgba(7,7,8,.1) 55%, rgba(7,7,8,.86)); }
.page-hero__contenu { position: absolute; left: 0; right: 0; bottom: clamp(28px, 5vw, 64px); display: grid; gap: 18px; justify-items: start; }
@media (max-width: 720px) { .page-hero { margin: calc(var(--bandeau-h) + 8px) 8px 0; border-radius: 28px; min-height: 460px; } }
.fil { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; color: var(--texte-2); }
.fil a { color: var(--texte); transition: color .25s; }
.fil a:hover { color: var(--creme); }
.fil span[aria-hidden] { color: var(--texte-3); }
.breadcrumbs { display: none; }

/* =====================================================================
   Nos véhicules : filtres, grille, pagination
   ===================================================================== */
.filtres { position: sticky; top: calc(var(--hd-h) + var(--bandeau-h) + 22px); z-index: 20; display: grid; gap: 14px; margin-bottom: 28px; padding: 14px; border-radius: 24px; background: rgba(18,18,21,.82); border: 1px solid var(--ligne); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); transition: top .6s var(--ease); }
body.hd-cache .filtres { top: 14px; }
.filtres__marques { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); padding-right: 40px; }
.filtres__marques::-webkit-scrollbar { display: none; }
.brand-filter { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px 0 12px; border-radius: 999px; border: 1px solid var(--ligne-2); background: transparent; font: 500 14px/1 var(--f-texte); color: var(--texte); white-space: nowrap; flex: none; transition: background .25s, border-color .25s, color .25s; }
.brand-filter img { width: 26px; height: 18px; object-fit: contain; filter: invert(1); opacity: .8; }
.brand-filter b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(236,229,214,.1); font-size: 11px; }
.brand-filter:hover { border-color: var(--ligne-3); color: var(--creme); }
.brand-filter[aria-pressed="true"] { background: var(--creme); border-color: var(--creme); color: #14120f; }
.brand-filter[aria-pressed="true"] img { filter: none; opacity: 1; }
.filtres__ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.select { position: relative; display: inline-flex; align-items: center; }
.select select { height: 44px; padding: 0 40px 0 16px; border-radius: 999px; border: 1px solid var(--ligne-2); background: var(--champ); color: var(--creme); font: 500 14px/1 var(--f-texte); appearance: none; -webkit-appearance: none; cursor: pointer; transition: border-color .25s; }
.select select:hover { border-color: var(--ligne-3); }
.select::after { content: ""; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); pointer-events: none; opacity: .7; }
.filtres__effacer { height: 44px; padding: 0 16px; border-radius: 999px; font: 500 14px/1 var(--f-texte); color: var(--texte); text-decoration: underline; text-underline-offset: 4px; }
.filtres__effacer:hover { color: var(--creme); }
.filtres__compte { margin-left: auto; font-size: 14px; color: var(--texte-2); }
.filtres__compte b { font: 500 16px/1 var(--f-texte); color: var(--creme); }
.grille-vh { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1100px) { .grille-vh { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grille-vh { grid-template-columns: 1fr; } .filtres { position: relative; top: auto !important; padding: 12px; } .filtres__compte { margin-left: 0; width: 100%; } .select { flex: 1 1 140px; } .select select { width: 100%; } }
.vide { display: grid; justify-items: start; gap: 18px; padding: 40px; border-radius: var(--r-l); border: 1px solid var(--ligne); background: var(--carte); color: var(--texte); }
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 44px; }
.pagination button { min-width: 46px; height: 46px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--ligne-2); font: 600 14px/1 var(--f-texte); color: var(--texte); transition: background .25s, color .25s, border-color .25s; }
.pagination button:hover:not(:disabled) { border-color: var(--ligne-3); color: var(--creme); }
.pagination button[aria-current="page"] { background: var(--creme); border-color: var(--creme); color: #14120f; }
.pagination button:disabled { opacity: .35; cursor: default; }
.pagination-info { display: block; margin-top: 14px; text-align: center; font-size: 13px; color: var(--texte-3); }

/* Sélection et vérification : plan de voiture et points de contrôle */
.selection { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 5vw, 80px); }
.selection__texte { display: grid; gap: 20px; }
.selection__texte p { color: var(--texte); }
.selection__note { font-size: 14.5px; color: var(--texte-2) !important; }
.plan { position: relative; margin: 0; padding: clamp(18px, 2.4vw, 32px); border-radius: var(--r-xl); background: var(--carte); border: 1px solid var(--ligne); overflow: hidden; isolation: isolate; }
.plan::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(236,229,214,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(236,229,214,.04) 1px, transparent 1px); background-size: 28px 28px; background-position: -1px -1px; }
.plan__svg { position: relative; }
.plan__svg svg { width: 100%; height: auto; overflow: visible; }
.plan__etiquettes li { position: absolute; top: 11.8%; left: calc(var(--x) * 100%); width: 124px; transform: translate(-50%, calc(-100% - 8px)); text-align: center; font: 500 13px/1.25 var(--f-texte); color: var(--creme); opacity: 0; transition: opacity .6s var(--ease), transform .7s var(--ease); transition-delay: calc(1.3s + var(--i) * .22s); }
.plan.vu .plan__etiquettes li { opacity: 1; transform: translate(-50%, calc(-100% - 2px)); }
@media (max-width: 960px) { .selection { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .plan__etiquettes { display: grid; gap: 10px; margin-top: 18px; }
  .plan__etiquettes li { position: static; width: auto; transform: none !important; opacity: 1; display: flex; align-items: center; gap: 10px; text-align: left; font-size: 14.5px; }
  .plan__etiquettes li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rouge); box-shadow: 0 0 0 4px var(--rouge-voile); }
  .plan [id*="-l-"] { display: none; }
}

/* Animations des illustrations Figma (identifiants de calques) */
.illu [id*="-t-"] { stroke-dasharray: var(--len, 1200); stroke-dashoffset: var(--len, 1200); transition: stroke-dashoffset 1.8s var(--ease-2); transition-delay: calc(var(--k, 0) * 28ms); }
.illu.vu [id*="-t-"] { stroke-dashoffset: 0; }
.illu [id*="-c-"] { opacity: 0; transition: opacity .8s ease 1.4s; }
.illu.vu [id*="-c-"] { opacity: 1; }
.illu [id*="-l-"] { opacity: 0; transition: opacity .6s ease; transition-delay: calc(1.2s + var(--k, 0) * .22s); }
.illu.vu [id*="-l-"] { opacity: 1; }
.illu [id*="-p-"] { opacity: 0; transform: scale(.3); transform-box: fill-box; transform-origin: center; transition: opacity .5s ease, transform .7s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(1.2s + var(--k, 0) * .22s); }
.illu.vu [id*="-p-"] { opacity: 1; transform: none; }
.illu.vu [id*="-p-"] > :first-child { animation: point 2.6s ease-in-out infinite; animation-delay: calc(2.4s + var(--k, 0) * .3s); transform-box: fill-box; transform-origin: center; }
@keyframes point { 50% { transform: scale(1.7); opacity: .25; } }
.illu [id*="-f-"] { opacity: 0; transition: opacity .8s ease 1.3s; }
.illu.vu [id*="-f-"] { opacity: 1; }
.illu [id$="-m-roue-ar"], .illu [id$="-m-roue-av"] { transform-box: fill-box; transform-origin: center; }
.illu.roule [id$="-m-roue-ar"], .illu.roule [id$="-m-roue-av"] { animation: roue 1.2s linear infinite; }
@keyframes roue { to { transform: rotate(360deg); } }
.illu #compteur-m-aiguille { transform-box: view-box; transform-origin: 160px 150px; transform: rotate(0deg); transition: transform 2.2s cubic-bezier(.3, 1.4, .5, 1) .9s; }
.illu.vu #compteur-m-aiguille { transform: rotate(var(--angle, 150deg)); }
.acces-carte:hover .illu.vu #compteur-m-aiguille { transform: rotate(calc(var(--angle, 150deg) + 18deg)); transition-delay: 0s; transition-duration: .9s; }
.illu #cle-m-porte { transform-box: view-box; transform-origin: 86px 32px; }
.illu.vu #cle-m-porte { animation: balance 5s ease-in-out 1.6s infinite; }
@keyframes balance { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 60% { transform: rotate(4deg); } }
.acces-carte:hover .illu.vu #cle-m-porte { animation-duration: 1.6s; }
.illu.voiture-arrive svg { transform: translateX(-12%); opacity: 0; transition: transform 2s var(--ease), opacity .6s; }
.illu.voiture-arrive.vu svg { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .illu [id] { stroke-dashoffset: 0 !important; opacity: 1 !important; transform: none !important; animation: none !important; } }

/* Parcours illustrés : photos reliées par une ligne qui se trace */
.etapes { --n: 4; position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 0 22px; counter-reset: none; }
.etape { position: relative; }
.etape__in { display: grid; grid-template-rows: auto 30px auto; row-gap: 14px; align-content: start; height: 100%; color: inherit; }
.etape__photo { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-l); overflow: hidden; background: var(--carte); }
.etape__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 1.6s var(--ease); }
.etapes.go .etape__photo img { transform: scale(1); }
a.etape__in:hover .etape__photo img { transform: scale(1.05); }
.etape__noeud { position: relative; }
.etape__noeud::before { content: ""; position: absolute; left: 0; top: 50%; z-index: 2; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--noir); border: 2px solid var(--ligne-3); transition: border-color .4s, background .4s, box-shadow .4s; transition-delay: calc(var(--i) * .45s); }
.etape__noeud::after { content: ""; position: absolute; left: 14px; right: -22px; top: 50%; height: 2px; margin-top: -1px; background: linear-gradient(90deg, var(--rouge), rgba(188,23,53,.35)); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-2); transition-delay: calc(var(--i) * .45s + .2s); }
.etape:last-child .etape__noeud::after { right: 0; background: linear-gradient(90deg, rgba(188,23,53,.35), transparent); }
.etapes::before { content: ""; position: absolute; left: 7px; right: 0; top: 0; height: 2px; background: var(--ligne); pointer-events: none; display: none; }
.etapes.go .etape__noeud::before { border-color: var(--rouge); background: var(--rouge); box-shadow: 0 0 0 5px var(--rouge-voile); }
.etapes.go .etape__noeud::after { transform: scaleX(1); }
.etape__txt { display: grid; gap: 6px; padding-right: 8px; }
.etape__txt h3 { font: 500 19px/1.2 var(--f-titre); letter-spacing: -.005em; color: var(--creme); }
a.etape__in .etape__txt h3 { text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--ligne-3); transition: text-decoration-color .3s; }
a.etape__in:hover .etape__txt h3 { text-decoration-color: var(--rouge); }
.etape__txt p { font-size: 14.5px; line-height: 1.55; color: var(--texte-2); }
@media (max-width: 900px) {
  .etapes { grid-template-columns: 1fr; gap: 0; }
  .etape { padding-bottom: 26px; }
  .etape__in { grid-template-columns: 30px 104px minmax(0, 1fr); grid-template-rows: auto; column-gap: 16px; }
  .etape__photo { grid-column: 2; grid-row: 1; aspect-ratio: 1; border-radius: 18px; }
  .etape__noeud { grid-column: 1; grid-row: 1; }
  .etape__noeud::before { left: 8px; top: 12px; margin-top: 0; }
  .etape__noeud::after { left: 14px; top: 26px; right: auto; bottom: -38px; width: 2px; height: auto; margin: 0; transform: scaleY(0); transform-origin: top; background: linear-gradient(180deg, var(--rouge), rgba(188,23,53,.35)); }
  .etapes.go .etape__noeud::after { transform: scaleY(1); }
  .etape:last-child .etape__noeud::after { display: none; }
  .etape__txt { grid-column: 3; grid-row: 1; align-content: start; padding-top: 4px; }
}

/* =====================================================================
   Fiche véhicule
   ===================================================================== */
.fiche-tete { padding-top: calc(var(--hd-h) + var(--bandeau-h) + 48px); padding-bottom: 24px; }
.fiche-tete .fil { margin-bottom: 18px; }
.fiche-tete h1 { max-width: 30ch; font: 500 clamp(28px, 3.4vw, 48px)/1.08 var(--f-titre); letter-spacing: -.005em; color: var(--creme); }
.car-layout { display: grid; grid-template-columns: minmax(0, 1fr) 410px; align-items: start; gap: 28px; }
.car-gallery-main { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-xl); overflow: hidden; background: var(--carte); cursor: zoom-in; }
.car-gallery-main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .3s; }
.car-vo { position: absolute; top: 16px; left: 16px; z-index: 2; display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; background: rgba(10,10,12,.62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 600 12.5px/1 var(--f-texte); color: var(--creme); }
.car-gallery-link { position: absolute; right: 16px; bottom: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 999px; background: rgba(10,10,12,.62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 600 13.5px/1 var(--f-texte); color: var(--creme); transition: background .25s; }
.car-gallery-link:hover { background: var(--rouge); }
/* 14/10 (Christophe) : bande de vignettes qui défile, toutes les photos */
.car-main, .car-gallery-wrap, .car-thumbs-zone { min-width: 0; } /* la colonne ne s'élargit pas pour les vignettes : la bande défile */
.car-thumbs-zone { position: relative; margin-top: 10px; }
.car-thumbs { display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.car-thumbs::-webkit-scrollbar { display: none; }
.car-thumbs button { flex: 0 0 calc((100% - 40px) / 5); scroll-snap-align: start; position: relative; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; outline: 2px solid transparent; outline-offset: -2px; transition: outline-color .25s, opacity .25s; opacity: .7; }
@media (max-width: 720px) { .car-thumbs { gap: 8px; } .car-thumbs button { flex-basis: calc((100% - 24px) / 3.4); border-radius: 12px; } }
.car-thumbs-fl { position: absolute; z-index: 2; top: 50%; width: 42px; height: 42px; margin-top: -21px; display: grid; place-items: center; border-radius: 50%; background: rgba(14,14,16,.82); border: 1px solid var(--ligne-2); color: var(--creme); box-shadow: 0 8px 24px -8px #000; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .2s; }
.car-thumbs-fl:hover { background: var(--rouge); }
.car-thumbs-fl svg { width: 16px; height: 16px; }
.car-thumbs-fl--prec { left: 8px; }
.car-thumbs-fl--suiv { right: 8px; }
.car-thumbs-fl[hidden] { display: none; }
.car-compteur { position: absolute; left: 16px; bottom: 16px; z-index: 2; padding: 7px 12px; border-radius: 999px; background: rgba(14,14,16,.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 500 13px/1 var(--f-texte); color: var(--creme); font-variant-numeric: tabular-nums; pointer-events: none; }
.car-thumbs button:hover { opacity: 1; }
.car-thumbs button[aria-current="true"] { outline-color: var(--creme); opacity: 1; }
.car-thumbs img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.car-thumbs span { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(7,7,8,.6); font: 500 18px var(--f-titre); color: var(--creme); }
.fiche-bloc { margin-top: clamp(40px, 5vw, 64px); }
.fiche-bloc > h2 { margin-bottom: 18px; font: 500 clamp(22px, 2vw, 28px)/1.15 var(--f-titre); letter-spacing: -.005em; color: var(--creme); }
.specs-table { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.specs-table > div { display: flex; justify-content: space-between; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--ligne); }
.specs-table dt { color: var(--texte-2); }
.specs-table dd { text-align: right; font-weight: 500; color: var(--creme); }
.equip-card { margin-bottom: 10px; border-radius: var(--r); background: var(--carte); border: 1px solid var(--ligne); overflow: hidden; }
.equip-card summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; cursor: pointer; list-style: none; font: 500 16px/1.3 var(--f-texte); letter-spacing: -.005em; color: var(--creme); }
.equip-card summary::-webkit-details-marker { display: none; }
.equip-card summary::after { content: "+"; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(236,229,214,.07); font: 400 20px/1 var(--f-texte); transition: transform .4s var(--ease); flex: none; }
.equip-card[open] summary::after { transform: rotate(45deg); }
.equip-list { columns: 2; column-gap: 32px; padding: 0 22px 20px; }
.equip-list li { position: relative; padding: 6px 0 6px 18px; break-inside: avoid; font-size: 14.5px; line-height: 1.5; color: var(--texte); }
.equip-list li::before { content: ""; position: absolute; left: 0; top: 14px; width: 6px; height: 6px; border-radius: 50%; background: var(--ligne-3); }
.equip-list li.option::before { background: var(--rouge); }
.car-history { white-space: pre-line; font-size: 15.5px; line-height: 1.75; color: var(--texte); }
.car-sidebar { position: sticky; top: calc(var(--hd-h) + var(--bandeau-h) + 28px); display: grid; gap: 18px; padding: 26px; border-radius: var(--r-xl); background: var(--carte); border: 1px solid var(--ligne); transition: top .6s var(--ease); }
body.hd-cache .car-sidebar { top: 16px; }
.pp-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.pp-dispo { display: inline-flex; align-items: center; gap: 8px; font: 500 13.5px/1.2 var(--f-texte); color: var(--creme); }
.pp-dispo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--vert); box-shadow: 0 0 0 4px rgba(47,191,113,.16); }
.pp-ref { font-size: 12.5px; color: var(--texte-3); }
.pp-prix-bloc { display: grid; gap: 8px; padding-bottom: 18px; border-bottom: 1px solid var(--ligne); }
.pp-prix { font: 500 clamp(38px, 3.6vw, 48px)/1 var(--f-texte); letter-spacing: -.005em; color: var(--creme); font-variant-numeric: tabular-nums; }
.pp-prix small { margin-left: 8px; font: 500 13px/1 var(--f-texte); letter-spacing: .04em; color: var(--texte-2); }
.pp-total { font-size: 14.5px; color: var(--texte); }
.pp-total strong { color: var(--creme); }
.pp-note { font-size: 12.5px; line-height: 1.5; color: var(--texte-3); }
.pp-caract { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pp-caract > div { padding: 12px; border-radius: 14px; background: rgba(236,229,214,.04); }
.pp-caract dt { font-size: 11.5px; color: var(--texte-3); }
.pp-caract dd { margin-top: 4px; font: 600 14px/1.25 var(--f-texte); color: var(--creme); }
.pp-actions { display: grid; gap: 10px; }
.pp-actions .btn-cta { width: 100%; --h: 58px; }
.pp-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pp-duo .btn { --h: 48px; padding: 0 12px; font-size: 13.5px; gap: 8px; }
.pp-reprise { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--ligne-2); transition: border-color .25s, background .25s; }
.pp-reprise:hover { border-color: var(--rouge); background: var(--rouge-voile); }
.pp-reprise-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(236,229,214,.07); }
.pp-reprise-ico svg { width: 26px; height: 26px; }
.pp-reprise-txt strong { display: block; font: 500 15px/1.25 var(--f-texte); color: var(--creme); }
.pp-reprise-txt small { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.4; color: var(--texte-2); }
.pp-fleche { width: 16px; height: 16px; color: var(--texte-2); }
.pp-reass { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.pp-reass li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texte); }
.pp-reass svg { width: 16px; height: 16px; color: var(--vert); flex: none; }
.pp-horaires { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; padding-top: 16px; border-top: 1px solid var(--ligne); font-size: 13px; color: var(--texte-2); }
.pp-statut { display: inline-flex; align-items: center; gap: 8px; color: var(--creme); }
.pp-statut::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #e0a100; }
.pp-statut.ouvert::before { background: var(--vert); }
.car-sidebar > p:only-child { color: var(--texte-2); }
.barre-mobile { position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 50; display: none; gap: 8px; padding: 8px; border-radius: 22px; background: rgba(18,18,21,.9); border: 1px solid var(--ligne-2); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); transform: translateY(130%); transition: transform .5s var(--ease); }
.barre-mobile .btn { --h: 50px; padding: 0 16px; font-size: 14px; }
.barre-mobile .btn-cta { flex: 1; }
.barre-mobile.visible { transform: none; }
.visionneuse { position: fixed; inset: 0; z-index: 120; display: none; align-items: center; justify-content: center; background: rgba(5,5,6,.95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.visionneuse.ouverte { display: flex; animation: apparaitre .35s ease; }
@keyframes apparaitre { from { opacity: 0; } }
.visionneuse img { max-width: min(92vw, 1500px); max-height: 84vh; border-radius: 18px; object-fit: contain; }
.visionneuse button { position: absolute; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(236,229,214,.1); color: var(--creme); transition: background .25s; }
.visionneuse button:hover { background: var(--rouge); }
.visionneuse .fermer { top: 20px; right: 20px; }
.visionneuse .prec { left: 20px; top: 50%; margin-top: -26px; }
.visionneuse .suiv { right: 20px; top: 50%; margin-top: -26px; }
.visionneuse__compteur { position: absolute; bottom: 24px; left: 50%; translate: -50% 0; font: 500 14px var(--f-texte); letter-spacing: .08em; color: var(--creme); }
@media (max-width: 1080px) {
  .car-layout { grid-template-columns: 1fr; }
  .car-sidebar { position: relative; top: auto !important; order: -1; }
  .car-main { order: 0; }
  body.a-barre .barre-mobile { display: flex; }
  body.a-barre { padding-bottom: 80px; }
}
@media (max-width: 640px) { .specs-table { grid-template-columns: 1fr; } .equip-list { columns: 1; } .car-gallery-main { border-radius: 24px; } .pp-caract { grid-template-columns: repeat(2, 1fr); } .pp-duo { grid-template-columns: 1fr; } }

/* =====================================================================
   Vendre ou estimer ma voiture
   ===================================================================== */
.solutions { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.solution { position: relative; display: flex; flex-direction: column; gap: 22px; padding: clamp(28px, 3.2vw, 48px); border-radius: var(--r-xl); background: var(--carte); border: 1px solid var(--ligne); overflow: hidden; isolation: isolate; }
.solution::before { content: ""; position: absolute; right: -20%; top: -40%; z-index: -1; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(188,23,53,.16), transparent); }
.solution h3 { font: 500 clamp(26px, 2.4vw, 34px)/1.08 var(--f-titre); letter-spacing: -.005em; color: var(--creme); }
.solution ul { display: grid; gap: 14px; }
.solution li { position: relative; padding-left: 22px; font-size: 15.5px; line-height: 1.6; color: var(--texte); }
.solution li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--rouge); box-shadow: 0 0 0 4px var(--rouge-voile); }
.solution li b { color: var(--creme); font-weight: 600; }
.solution .lien-fleche { margin-top: auto; }
@media (max-width: 860px) { .solutions { grid-template-columns: 1fr; } }
.parcours-vente { display: grid; gap: clamp(40px, 5vw, 64px); }
.parcours-vente + .parcours-vente { padding-top: 0; }
/* 05/10 : parcours de vente recadrés : titre au-dessus, puis photo et texte alignés sur la même ligne (centrés) */
.pv__tete { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-areas: "titre ." "photo texte"; align-items: center; column-gap: clamp(28px, 5vw, 72px); row-gap: 26px; }
.pv__titre { grid-area: titre; display: grid; gap: 14px; justify-items: start; }
.pv__tete > .pv__photo { grid-area: photo; margin-top: 0; }
.pv__tete > .pv__texte { grid-area: texte; }
.pv__texte { display: grid; gap: 16px; justify-items: start; }
.pv__texte p { color: var(--texte); }
.pv__places { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--rouge-voile); border: 1px solid rgba(188,23,53,.35); font-size: 14px; color: var(--creme); }
@media (max-width: 900px) { .pv__tete { grid-template-columns: 1fr; grid-template-areas: "titre" "photo" "texte"; } }
.comparatif { overflow-x: auto; border-radius: var(--r-l); border: 1px solid var(--ligne); background: var(--carte); }
.comparatif table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 15px; }
.comparatif th, .comparatif td { padding: 20px 24px; border-bottom: 1px solid var(--ligne); text-align: left; vertical-align: top; }
.comparatif tr:last-child th, .comparatif tr:last-child td { border-bottom: 0; }
.comparatif thead th { font: 600 14px/1.2 var(--f-texte); color: var(--texte-2); }
.comparatif thead th:nth-child(2) { color: var(--creme); }
.comparatif tbody th { width: 22%; font-weight: 500; color: var(--creme); }
.comparatif td { color: var(--texte-2); }
.comparatif td.oui { color: var(--creme); }
.comparatif td.oui::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--vert); vertical-align: 1px; }
.cloture { position: relative; margin-inline: 12px; padding-block: clamp(80px, 10vw, 140px); border-radius: var(--r-xl); background: radial-gradient(60% 90% at 50% 0%, rgba(188,23,53,.2), transparent 70%), var(--carte); border: 1px solid var(--ligne); text-align: center; overflow: hidden; }
.cloture .wrap { display: grid; justify-items: center; gap: 22px; }
.cloture .lead { margin-inline: auto; }
.cloture .boutons { justify-content: center; margin-top: 8px; }
@media (max-width: 720px) { .cloture { margin-inline: 8px; border-radius: 28px; } .cloture .boutons .btn { width: 100%; } }

/* =====================================================================
   Le showroom et l’entreprise
   ===================================================================== */
.histoire { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(32px, 6vw, 96px); }
.histoire__citation { font: 500 clamp(24px, 2.5vw, 36px)/1.3 var(--f-titre); letter-spacing: -.005em; color: var(--creme); text-wrap: pretty; }
.histoire__signature { display: flex; align-items: center; gap: 14px; margin-top: 28px; font-size: 15px; color: var(--texte-2); }
.histoire__signature::before { content: ""; width: 40px; height: 1px; background: var(--rouge); }
.histoire__suite { margin-top: 24px; color: var(--texte); }
.histoire .boutons { margin-top: 32px; }
.photo-cadre { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-xl); overflow: hidden; }
.photo-cadre img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; will-change: transform; }
@media (max-width: 900px) { .histoire { grid-template-columns: 1fr; } .photo-cadre { aspect-ratio: 4 / 3; } }
.galerie .rail-cartes__piste figure { position: relative; width: clamp(260px, 34vw, 520px); aspect-ratio: 4 / 3; border-radius: var(--r-l); overflow: hidden; scroll-snap-align: start; flex: none; }
.galerie .rail-cartes__piste figure:nth-child(even) { width: clamp(220px, 24vw, 360px); aspect-ratio: 3 / 4; }
.galerie .rail-cartes__piste { align-items: center; }
.galerie img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.chiffre { display: grid; gap: 10px; padding: clamp(24px, 3vw, 40px); border-radius: var(--r-xl); background: var(--carte); border: 1px solid var(--ligne); }
.chiffre b { font: 500 clamp(48px, 6vw, 88px)/1 var(--f-titre); letter-spacing: -.005em; color: var(--creme); font-variant-numeric: tabular-nums; }
.chiffre b small { font-size: .45em; letter-spacing: -.02em; color: var(--texte-2); }
.chiffre > span { font-size: 15px; color: var(--texte-2); }
@media (max-width: 760px) { .chiffres { grid-template-columns: 1fr; } }
.visite { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.visite__txt { display: grid; gap: 20px; }
.visite__txt p { color: var(--texte); }
.horaires-liste { display: grid; }
.horaires-liste li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--ligne); font-size: 15px; color: var(--texte-2); }
.horaires-liste li span:last-child { color: var(--creme); text-align: right; }
.horaires-liste li.aujourdhui span { color: var(--creme); font-weight: 600; }
.horaires-liste li.aujourdhui span:first-child::after { content: " · aujourd’hui"; font-weight: 400; color: var(--rouge); }
.carte-infos { padding: clamp(24px, 3vw, 36px); border-radius: var(--r-xl); background: var(--carte); border: 1px solid var(--ligne); }
.carte-infos .statut { margin-bottom: 8px; }
@media (max-width: 860px) { .visite { grid-template-columns: 1fr; } }
.reels-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.reel { position: relative; aspect-ratio: 4 / 5; margin: 0; border-radius: var(--r-l); overflow: hidden; background: var(--carte); cursor: pointer; }
.reel video, .reel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel-son { position: absolute; top: 14px; right: 14px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(10,10,12,.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--creme); }
.reel-son .ico { width: 16px; height: 16px; }
.reel figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 18px 16px; background: linear-gradient(transparent, rgba(0,0,0,.75)); font-size: 13px; color: var(--creme); }
.insta-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.insta-grid a { position: relative; aspect-ratio: 1; border-radius: 18px; overflow: hidden; }
.insta-grid img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.insta-grid .ico { position: absolute; top: 12px; right: 12px; color: var(--creme); }
@media (max-width: 760px) { .reels-grid { grid-template-columns: 1fr; } .insta-grid { grid-template-columns: repeat(2, 1fr); } }

/* =====================================================================
   Contact
   ===================================================================== */
.coord { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 16px; }
.coord__infos { display: grid; gap: 20px; align-content: start; padding: clamp(24px, 3vw, 40px); border-radius: var(--r-xl); background: var(--carte); border: 1px solid var(--ligne); }
.coord__nom { font: 500 30px/1.1 var(--f-titre); letter-spacing: -.005em; color: var(--creme); }
.coord__societe { margin-top: -12px; font-size: 13.5px; color: var(--texte-2); }
.coord__lignes { display: grid; gap: 12px; }
.coord__lignes a, .coord__lignes span { display: flex; align-items: flex-start; gap: 12px; font-size: 15.5px; color: var(--creme); }
.coord__lignes a { text-decoration: underline; text-decoration-color: var(--ligne-3); text-underline-offset: 4px; }
.coord__lignes .ico { width: 16px; height: 16px; margin-top: 4px; color: var(--texte-3); }
.coord__itin { display: flex; flex-wrap: wrap; gap: 10px; }
.coord__itin .btn { flex: 1 1 180px; }
.ech-map, .coord__carte { position: relative; min-height: 460px; border-radius: var(--r-xl); overflow: hidden; background: radial-gradient(60% 60% at 50% 50%, rgba(188,23,53,.12), transparent), var(--carte); border: 1px solid var(--ligne); display: grid; place-items: center; text-align: center; padding: 24px; }
.ech-map iframe, .coord__carte iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.4) contrast(1.05); }
/* 03/10 : carte Google Maps affichée d'office (demande de Christophe), repère placé par Google sur l'adresse */
.ech-map p, .coord__carte p { max-width: 36ch; margin: 10px auto 18px; font-size: 13.5px; color: var(--texte-2); }
.coord__carte strong { font: 500 20px var(--f-titre); color: var(--creme); }
.btn--petit-contour.btn--carte { --h: 46px; }
.acces-rapides { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
@media (max-width: 900px) { .coord { grid-template-columns: 1fr; } .coord__carte { min-height: 320px; } .acces-rapides .btn { flex: 1 1 100%; } }

/* =====================================================================
   Formulaires (estimation, dépôt-vente, intérêt, contact, alerte)
   ===================================================================== */
.ech-head { display: grid; gap: 18px; }
.ech-eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 500 13.5px/1.2 var(--f-texte); color: var(--texte-2); }
.ech-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rouge); box-shadow: 0 0 0 4px var(--rouge-voile); }
.ech-title { font: 500 clamp(38px, 5vw, 72px)/1 var(--f-titre); letter-spacing: -.005em; color: var(--creme); text-wrap: balance; }
.ech-sub { max-width: 60ch; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; color: var(--texte); }
.ech-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 28px; }
.ech-card { display: grid; align-content: start; gap: 8px; padding: 22px 24px; border-radius: var(--r-l); background: var(--carte); border: 1px solid var(--ligne); text-align: left; }
.ech-card.on { border-color: rgba(188,23,53,.45); background: linear-gradient(180deg, var(--rouge-voile), transparent 70%), var(--carte); }
.ech-ct { font: 500 17px/1.2 var(--f-texte); letter-spacing: -.005em; color: var(--creme); }
.ech-cd { font-size: 14.5px; line-height: 1.55; color: var(--texte-2); }
.ech-ar { display: none; }
.ech-formwrap { position: relative; max-width: 880px; margin: 0 auto; padding: clamp(22px, 4vw, 52px); border-radius: var(--r-xl); background: var(--carte); border: 1px solid var(--ligne); }
.ech-step { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 10px; font: 500 13.5px/1.2 var(--f-texte); color: var(--texte-2); }
.ech-step::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rouge); }
.ech-fcat { margin-bottom: 24px; font: 500 clamp(24px, 2.4vw, 32px)/1.1 var(--f-titre); letter-spacing: -.005em; color: var(--creme); }
.ech-note { margin-top: 14px; font-size: 13px; color: var(--texte-3); }
.ech-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 880px; margin: 18px auto 0; }
.ech-ti { display: grid; gap: 4px; padding: 18px 20px; border-radius: var(--r); background: rgba(236,229,214,.03); border: 1px solid var(--ligne); }
.ech-ti b { font: 500 15px/1.2 var(--f-texte); color: var(--creme); }
.ech-ti span { font-size: 13.5px; line-height: 1.5; color: var(--texte-2); }
@media (max-width: 760px) { .ech-trust { grid-template-columns: 1fr; } }
.formulaire { position: relative; display: grid; gap: 20px; }
.formulaire .pas { display: none; flex-direction: column; gap: 20px; }
.formulaire .pas.actif { display: flex; animation: montee .5s var(--ease); }
@keyframes montee { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.formulaire .pas > h2 { font: 500 clamp(22px, 2.2vw, 28px)/1.15 var(--f-titre); letter-spacing: -.005em; color: var(--creme); }
.formulaire .pas > .ech-sub { font-size: 15px; }
.grille-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.champ { display: grid; gap: 8px; align-content: start; min-width: 0; }
.champ.large, .grille-champs > fieldset { grid-column: 1 / -1; }
.champ > span:first-child, .champ > legend { padding: 0; font: 500 14px/1.3 var(--f-texte); color: var(--texte); }
.champ > legend { float: left; width: 100%; margin-bottom: 10px; }
.champ > legend + * { clear: both; }
.champ small { font-size: 12.5px; color: var(--texte-3); }
.formulaire input[type="text"], .formulaire input[type="tel"], .formulaire input[type="email"], .formulaire input[type="number"], .formulaire select, .formulaire textarea {
  width: 100%; height: 54px; padding: 0 16px; border-radius: 16px; border: 1px solid var(--ligne-2); background: var(--champ); color: var(--creme); font: 400 15.5px/1.3 var(--f-texte); transition: border-color .25s, box-shadow .25s, background .25s; appearance: none; -webkit-appearance: none; }
.formulaire textarea { height: 132px; padding: 14px 16px; resize: vertical; }
.formulaire select { padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23f5f5f3' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; cursor: pointer; }
.formulaire select:disabled { opacity: .45; cursor: not-allowed; }
.formulaire input::placeholder, .formulaire textarea::placeholder { color: var(--texte-3); }
.formulaire input:hover, .formulaire select:hover, .formulaire textarea:hover { border-color: var(--ligne-3); }
.formulaire input:focus, .formulaire select:focus, .formulaire textarea:focus { outline: none; border-color: rgba(188,23,53,.8); box-shadow: 0 0 0 4px rgba(188,23,53,.18); background: #111114; }
.champ__erreur { display: none; font-style: normal; font-size: 12.5px; color: #ff7a8f; }
.champ.erreur .champ__erreur { display: block; }
.champ.erreur input, .champ.erreur select, .champ.erreur textarea { border-color: #ff7a8f; }
.choix { display: flex; flex-wrap: wrap; gap: 10px; }
.choix label { position: relative; cursor: pointer; }
.choix input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.choix span { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 18px; border-radius: 16px; border: 1px solid var(--ligne-2); background: var(--champ); font-size: 15px; line-height: 1.35; color: var(--texte); transition: border-color .25s, background .25s, color .25s; }
.choix span::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--ligne-3); flex: none; transition: border-color .25s, background .25s, box-shadow .25s; }
.choix input[type="checkbox"] + span::before { border-radius: 6px; }
.choix label:hover span { border-color: var(--ligne-3); color: var(--creme); }
.choix input:checked + span { border-color: rgba(188,23,53,.7); background: var(--rouge-voile); color: var(--creme); }
.choix input:checked + span::before { border-color: var(--rouge); background: var(--rouge); box-shadow: inset 0 0 0 3px var(--champ); }
.choix input:focus-visible + span { outline: 2px solid var(--creme); outline-offset: 2px; }
.choix--colonne, .choix--detail { flex-direction: column; }
.choix--colonne label, .choix--detail label, .choix--colonne span, .choix--detail span { width: 100%; }
.cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.cases label { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 16px; border-radius: 16px; border: 1px solid var(--ligne-2); background: var(--champ); font-size: 14.5px; color: var(--texte); cursor: pointer; transition: border-color .25s; }
.cases label:hover { border-color: var(--ligne-3); }
.cases input, .rgpd input { width: 18px; height: 18px; margin: 0; accent-color: var(--rouge); flex: none; }
.rgpd { display: flex; align-items: flex-start; gap: 12px; font-size: 13.5px; line-height: 1.5; color: var(--texte-2); }
.rgpd a { color: var(--creme); text-decoration: underline; text-underline-offset: 3px; }
.alerte-envoi:empty { display: none; }
.alerte-envoi { padding: 12px 16px; border-radius: 14px; background: rgba(255,122,143,.1); border: 1px solid rgba(255,122,143,.35); font-size: 14px; color: #ffb3bf; }
.pas__nav { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding-top: 6px; }
.pas__nav > :only-child { margin-left: auto; }
.formulaire .rail { margin-bottom: 8px; }
.rail__libelles { display: grid; margin-bottom: 14px; font: 500 13.5px/1.2 var(--f-texte); color: var(--texte); }
.rail__libelles span { grid-area: 1 / 1; opacity: 0; transition: opacity .3s; }
.rail__libelles span.actif { opacity: 1; }
.rail__libelles em { font-style: normal; color: var(--texte-3); }
.rail__liste { display: flex; align-items: center; }
.rail__liste li { display: flex; align-items: center; flex: 1; }
.rail__liste li:last-child { flex: 0; }
.rail__tuile { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--ligne-2); background: var(--champ); font: 600 13px/1 var(--f-texte); color: var(--texte-2); transition: background .3s, border-color .3s, color .3s; flex: none; }
button.rail__tuile { cursor: pointer; }
.rail__liste li.ici .rail__tuile { border-color: var(--rouge); background: var(--rouge); color: var(--creme); box-shadow: 0 0 0 5px var(--rouge-voile); }
.rail__liste li.fait .rail__tuile { border-color: var(--rouge); color: var(--creme); }
.rail__tuile svg { width: 14px; height: 14px; }
.rail__piste { position: relative; flex: 1; height: 2px; margin: 0 8px; border-radius: 2px; background: var(--ligne-2); overflow: hidden; }
.rail__piste span { position: absolute; inset: 0; width: 0; background: var(--rouge); transition: width .5s var(--ease); }
.rail__liste li.fait .rail__piste span { width: 100%; }
.etapes-form { display: none; }
.avis-auto { display: none; flex-direction: column; gap: 10px; padding: 18px 20px; border-radius: 18px; border: 1px solid var(--ligne-2); font-size: 14.5px; line-height: 1.55; color: var(--texte); }
.avis-auto.visible { display: flex; animation: montee .4s var(--ease); }
.avis-auto strong { color: var(--creme); }
.avis-auto--ok { border-color: rgba(47,191,113,.45); background: rgba(47,191,113,.07); }
.avis-auto--info { border-color: rgba(188,23,53,.45); background: var(--rouge-voile); }
.photos-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.photo-slot { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 12px; border-radius: 18px; border: 1px solid var(--ligne-2); background: var(--champ); text-align: center; font-size: 13.5px; color: var(--texte-2); cursor: pointer; overflow: hidden; transition: border-color .25s, color .25s; }
.photo-slot::before { content: "+"; display: grid; place-items: center; width: 34px; height: 34px; margin: 0 auto 8px; border-radius: 50%; background: rgba(236,229,214,.07); font: 400 22px/1 var(--f-texte); color: var(--creme); }
.photo-slot:hover { border-color: var(--ligne-3); color: var(--creme); }
.photo-slot input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.photo-slot img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.photo-slot button { position: absolute; top: 8px; right: 8px; z-index: 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,.72); color: var(--creme); }
@media (max-width: 640px) { .grille-champs { grid-template-columns: 1fr; } .photos-form { grid-template-columns: repeat(2, 1fr); } .pas__nav .btn, .pas__nav [class*="btn"] { flex: 1 1 auto; } }
.rappel-vh { display: grid; grid-template-columns: 124px 1fr; align-items: center; gap: 16px; padding: 12px; border-radius: 18px; border: 1px solid var(--ligne-2); background: var(--champ); }
.rappel-vh img { width: 124px; aspect-ratio: 4 / 3; border-radius: 12px; object-fit: cover; }
.rappel-vh strong { display: block; font: 500 16px/1.25 var(--f-texte); color: var(--creme); }
.rappel-vh small { display: block; margin-top: 4px; font-size: 13px; color: var(--texte-2); }
.rappel-vh em { font-style: normal; font-weight: 600; color: var(--creme); }
.resultat { display: none; gap: 16px; }
.resultat.visible { display: grid; animation: montee .5s var(--ease); }
.resultat__coche { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--rouge-voile); border: 1px solid rgba(188,23,53,.5); color: var(--creme); }
.resultat__coche svg { width: 28px; height: 28px; }
.resultat h2 { font: 500 clamp(26px, 2.6vw, 34px)/1.1 var(--f-titre); letter-spacing: -.005em; color: var(--creme); }
.resultat p { color: var(--texte); }
.encadre { padding: 18px 20px; border-radius: 18px; border: 1px solid var(--ligne-2); background: rgba(236,229,214,.03); font-size: 14.5px; line-height: 1.55; color: var(--texte); }
.encadre strong { color: var(--creme); }
.alerte-bloc { max-width: 880px; margin: 0 auto; }
.alerte-bloc details { border-radius: var(--r-xl); background: var(--carte); border: 1px solid var(--ligne); overflow: hidden; }
.alerte-bloc summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: clamp(24px, 3vw, 36px); cursor: pointer; list-style: none; }
.alerte-bloc summary::-webkit-details-marker { display: none; }
.alerte-bloc summary .h3 { max-width: 22ch; }
.alerte-bloc summary .rond { flex: none; transition: transform .45s var(--ease), background .3s; }
.alerte-bloc details[open] summary .rond { transform: rotate(45deg); background: var(--rouge); border-color: var(--rouge); }
.alerte-bloc .formulaire { padding: 0 clamp(24px, 3vw, 36px) clamp(24px, 3vw, 36px); }
.alerte-bloc summary p { margin-top: 8px; color: var(--texte-2); }

/* =====================================================================
   Questions fréquentes
   ===================================================================== */
.faq-recherche { position: relative; display: block; width: min(100%, 620px); }
.faq-recherche .ico { position: absolute; left: 20px; top: 50%; margin-top: -9px; color: var(--texte-2); }
.faq-recherche input { width: 100%; height: 60px; padding: 0 20px 0 52px; border-radius: 999px; border: 1px solid var(--ligne-2); background: var(--carte); color: var(--creme); font: 400 16px/1 var(--f-texte); transition: border-color .25s, box-shadow .25s; }
.faq-recherche input:focus { outline: none; border-color: rgba(188,23,53,.8); box-shadow: 0 0 0 4px rgba(188,23,53,.18); }
.faq-parcours { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.faq-parcours__carte { display: inline-flex; align-items: center; gap: 12px; height: 52px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--ligne-2); font: 500 15px/1 var(--f-texte); color: var(--texte); transition: background .25s, border-color .25s, color .25s; }
.faq-parcours__carte span { display: none; }
.faq-parcours__carte em { font-style: normal; font-size: 12.5px; color: var(--texte-3); }
.faq-parcours__carte:hover { border-color: var(--ligne-3); color: var(--creme); }
.faq-parcours__carte[aria-selected="true"] { background: var(--creme); border-color: var(--creme); color: #14120f; }
.faq-parcours__carte[aria-selected="true"] em { color: rgba(0,0,0,.55); }
.faq-corps { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.faq-groupe { margin-bottom: 40px; scroll-margin-top: 110px; }
.faq-groupe h2 { margin-bottom: 14px; font: 500 clamp(22px, 2vw, 28px)/1.15 var(--f-titre); letter-spacing: -.005em; color: var(--creme); }
.faq-questions { display: grid; gap: 8px; }
.faq-questions details { border-radius: var(--r); background: var(--carte); border: 1px solid var(--ligne); transition: border-color .3s; scroll-margin-top: 110px; }
.faq-questions details[open] { border-color: var(--ligne-2); }
.faq-questions summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; cursor: pointer; list-style: none; font: 500 16.5px/1.4 var(--f-texte); color: var(--creme); }
.faq-questions summary::-webkit-details-marker { display: none; }
.faq-questions summary::after { content: "+"; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(236,229,214,.07); font: 400 20px/1 var(--f-texte); flex: none; transition: transform .4s var(--ease), background .3s; }
.faq-questions details[open] summary::after { transform: rotate(45deg); background: var(--rouge); }
.faq-questions details p { padding: 0 22px 22px; font-size: 15.5px; line-height: 1.7; color: var(--texte); }
.faq-questions details p a { color: var(--creme); text-decoration: underline; text-underline-offset: 3px; }
.faq-questions mark { background: rgba(188,23,53,.35); color: var(--creme); border-radius: 3px; padding: 0 2px; }
.faq-aside { position: sticky; top: calc(var(--hd-h) + var(--bandeau-h) + 28px); display: grid; gap: 16px; padding: 26px; border-radius: var(--r-xl); background: var(--carte); border: 1px solid var(--ligne); }
.faq-aside h2 { font: 500 22px/1.15 var(--f-titre); letter-spacing: -.005em; color: var(--creme); }
.faq-aside p { font-size: 14.5px; color: var(--texte-2); }
.faq-aside__actions { display: grid; gap: 8px; }
.faq-aside__actions .btn, .faq-aside__actions [class*="btn"] { width: 100%; --h: 50px; }
.vide { font-size: 15px; }
@media (max-width: 1000px) { .faq-corps { grid-template-columns: 1fr; } .faq-aside { position: relative; top: auto; } }

/* =====================================================================
   Blog et article
   ===================================================================== */
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tease-post { position: relative; display: flex; flex-direction: column; border-radius: var(--r-xl); background: var(--carte); border: 1px solid var(--ligne); overflow: hidden; transition: transform .6s var(--ease), border-color .3s; }
.tease-post:hover { transform: translateY(-6px); border-color: var(--ligne-2); }
.tease-post .thumb { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.tease-post .thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.tease-post:hover .thumb img { transform: scale(1.05); }
.tease-post .badge { position: absolute; top: 14px; left: 14px; z-index: 2; display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; background: rgba(10,10,12,.62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 600 12px/1 var(--f-texte); color: var(--creme); }
.tease-post .body { display: grid; gap: 10px; padding: 22px 24px 26px; }
.tease-post time { font-size: 13px; color: var(--texte-3); }
.tease-post h2 { font: 500 22px/1.2 var(--f-titre); letter-spacing: -.005em; color: var(--creme); }
.tease-post h2 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.tease-post p { font-size: 15px; color: var(--texte-2); }
.tease-post .link-arrow { margin-top: 6px; font-size: 14.5px; }
.tease-post.featured { grid-column: 1 / -1; display: grid; grid-template-columns: 1.2fr 1fr; }
.tease-post.featured .thumb { aspect-ratio: auto; min-height: 380px; }
.tease-post.featured .body { align-content: center; padding: clamp(28px, 4vw, 56px); }
.tease-post.featured h2 { font-size: clamp(26px, 2.8vw, 40px); letter-spacing: -.04em; }
@media (max-width: 1000px) { .blog-grid { grid-template-columns: 1fr 1fr; } .tease-post.featured { grid-template-columns: 1fr; } .tease-post.featured .thumb { min-height: 260px; } }
@media (max-width: 640px) { .blog-grid { grid-template-columns: 1fr; } }
.article { max-width: 780px; margin: 0 auto; padding-top: calc(var(--hd-h) + var(--bandeau-h) + clamp(64px, 8vw, 110px)); }
.article .surtitle { display: inline-flex; align-items: center; gap: 10px; font: 500 13.5px/1.2 var(--f-texte); color: var(--texte-2); }
.article .surtitle::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rouge); box-shadow: 0 0 0 4px var(--rouge-voile); }
.article h1 { margin-top: 18px; font: 500 clamp(34px, 4.6vw, 60px)/1.04 var(--f-titre); letter-spacing: -.005em; color: var(--creme); text-wrap: balance; }
.article .chapo { margin-top: 22px; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.6; color: var(--texte); }
.article__img { margin: 40px -8% 44px; border-radius: var(--r-xl); overflow: hidden; }
.article__img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.article__corps { display: grid; gap: 18px; font-size: 17px; line-height: 1.78; color: var(--texte); }
.article__corps h2 { margin-top: 22px; font: 500 clamp(24px, 2.2vw, 30px)/1.2 var(--f-titre); letter-spacing: -.005em; color: var(--creme); }
.article__corps ul { display: grid; gap: 10px; }
.article__corps li { position: relative; padding-left: 22px; }
.article__corps li::before { content: ""; position: absolute; left: 0; top: .75em; width: 7px; height: 7px; border-radius: 50%; background: var(--rouge); }
.article .boutons { margin-top: 44px; }
@media (max-width: 860px) { .article__img { margin-inline: 0; } }

/* =====================================================================
   Pages juridiques et 404
   ===================================================================== */
.juridique { max-width: 820px; margin: 0 auto; padding-top: calc(var(--hd-h) + var(--bandeau-h) + clamp(64px, 8vw, 110px)); }
.juridique .page-h1, .juridique h1 { margin-bottom: 36px; font: 500 clamp(36px, 4.6vw, 60px)/1.04 var(--f-titre); letter-spacing: -.005em; color: var(--creme); }
.juridique h2 { margin: 40px 0 14px; font: 500 22px/1.2 var(--f-titre); letter-spacing: -.005em; color: var(--creme); scroll-margin-top: 110px; }
.juridique p, .juridique li { font-size: 15.5px; line-height: 1.75; color: var(--texte); }
.juridique ul { display: grid; gap: 6px; }
.juridique li { position: relative; padding-left: 18px; }
.juridique li::before { content: ""; position: absolute; left: 0; top: .8em; width: 6px; height: 6px; border-radius: 50%; background: var(--ligne-3); }
.juridique a { color: var(--creme); text-decoration: underline; text-underline-offset: 3px; }
.a-completer { display: inline-flex; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: rgba(224,161,0,.14); font-size: 12px; font-weight: 600; color: #f0b429; }
.erreur-404 { min-height: 100svh; display: grid; align-content: center; justify-items: center; gap: 22px; padding: calc(var(--hd-h) + var(--bandeau-h) + 60px) var(--gout) 60px; text-align: center; }
.erreur-404 .illu { width: min(100%, 560px); overflow: hidden; }
.erreur-404 .illu svg { width: 100%; height: auto; }
.illu.part svg { animation: partir 6s var(--ease-2) 2.2s infinite; }
@keyframes partir { 0%, 30% { transform: none; } 60% { transform: translateX(120%); } 60.01% { transform: translateX(-120%); } 90%, 100% { transform: none; } }

/* Pages formulaires (estimation, dépôt-vente, intérêt) */
.ech-section { width: min(100% - 2 * var(--gout), var(--wrap)); margin-inline: auto; padding-top: calc(var(--hd-h) + var(--bandeau-h) + clamp(72px, 9vw, 120px)); padding-bottom: var(--sec); }
.ech-tete { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; gap: 40px; margin-bottom: clamp(36px, 5vw, 56px); }
.ech-section > .ech-head { max-width: 900px; margin-bottom: clamp(36px, 5vw, 56px); }
.ech-tete .illu-compteur { width: min(100%, 380px); }
.ech-tete .illu-voiture { width: 100%; }
@media (max-width: 860px) { .ech-tete { grid-template-columns: 1fr; } .ech-tete .illu-compteur { width: min(70%, 300px); } }
.juridique-page { padding-bottom: var(--sec); }
.illu-cle { width: min(62%, 280px); margin-inline: auto; }
.illu-cle svg { width: 100% !important; }
@media (max-width: 560px) { .hero__preuves .chip:first-child { flex: 1 1 100%; justify-content: center; } .hero__preuves .chip:last-child { flex: 1 1 auto; justify-content: center; } }

/* =====================================================================
   Avis Google (accueil, showroom, vendre)
   ===================================================================== */
.avis-sec .rail-cartes__piste { align-items: stretch; }
.avis-note, .avis-carte { width: clamp(280px, 27vw, 360px); scroll-snap-align: start; flex: none; border-radius: var(--r-xl); border: 1px solid var(--ligne); }
.avis-note { display: flex; flex-direction: column; gap: 14px; padding: clamp(26px, 2.6vw, 36px); background: radial-gradient(90% 70% at 0% 0%, rgba(188,23,53,.22), transparent 70%), var(--carte); }
.avis-note__chiffre { font: 500 clamp(64px, 6vw, 88px)/.9 var(--f-titre); letter-spacing: -.005em; color: var(--creme); }
.avis-note__chiffre small { margin-left: 4px; font-size: .38em; letter-spacing: -.02em; color: var(--texte-2); }
.etoiles--grandes svg { width: 22px; height: 22px; }
.avis-note__nb { font-size: 15.5px; color: var(--texte); }
.avis-note__nb span { font-weight: 600; color: var(--creme); }
.avis-note__liens { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 10px; }
.avis-google { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--texte-3); }
.avis-google .ico { width: 14px; height: 14px; color: var(--creme); }
.avis-carte { display: flex; flex-direction: column; gap: 14px; padding: 26px; background: var(--carte); transition: border-color .3s, transform .6s var(--ease); }
.avis-carte:hover { border-color: var(--ligne-2); transform: translateY(-4px); }
.avis-carte__tete { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; }
.avis-carte__photo { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--carte-3); font: 500 15px/1 var(--f-texte); color: var(--creme); }
.avis-carte__tete strong { display: block; font: 500 15.5px/1.25 var(--f-texte); letter-spacing: -.005em; color: var(--creme); }
.avis-carte__tete strong a:hover { text-decoration: underline; text-underline-offset: 3px; }
.avis-carte__tete small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--texte-3); }
.avis-carte__g { width: 18px; height: 18px; color: var(--texte-2); }
.avis-carte__texte { font-size: 15px; line-height: 1.65; color: var(--texte); white-space: pre-line; }
.avis-carte__texte.ferme { display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.avis-carte__lire { align-self: flex-start; margin-top: -4px; font: 600 14px/1 var(--f-texte); color: var(--creme); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--ligne-3); }
.avis-carte__lire:hover { text-decoration-color: var(--rouge); }
@media (max-width: 640px) { .avis-note, .avis-carte { width: 84vw; } }
/* Photos du véhicule : 4 obligatoires (point rouge), 7 facultatives */
.photos-form { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.photo-slot > span { position: relative; z-index: 0; line-height: 1.35; }
.photo-slot.obligatoire > span::after, .point-rouge { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: var(--rouge); vertical-align: 2px; }
.point-rouge { margin: 0 2px; }
.photo-slot.manque { border-color: #ff7a8f; background: rgba(255,122,143,.06); }
.photos-erreur { padding: 12px 16px; border-radius: 14px; background: rgba(255,122,143,.1); border: 1px solid rgba(255,122,143,.35); font-size: 14px; color: #ffb3bf; }
@media (max-width: 760px) { .photos-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* =====================================================================
   Remarques de Christophe du 01/10/2026 : chaleur, volant, lisibilité
   (structure inspirée du Hangar Bordelais : grand emblème sur la vidéo,
   section claire « venez nous rencontrer », appel à téléphoner)
   ===================================================================== */
/* Pastilles d'accueil : G de Google, Facebook / Instagram deux fois plus petits (zone tactile conservée) */
.g-couleur { width: 18px; height: 18px; flex: none; }
.chip--avis { gap: 9px; }
.chip--avis .etoiles svg { width: 13px; height: 13px; }
.chip--mini { position: relative; width: 28px; height: 28px; padding: 0; justify-content: center; border: 0; }
.chip--mini .ico { width: 14px; height: 14px; }
.chip--mini::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; }
.hero__preuves { align-items: center; }
.avis-note__chiffre { display: flex; align-items: center; gap: 14px; }
.avis-note__chiffre .g-couleur { width: .42em; height: .42em; align-self: center; }
.avis-google .g-couleur { width: 15px; height: 15px; }

/* Titres : Josefin Sans en casse normale, interlignage plus souple, textes en Jost */
.hero__titre { max-width: 14ch; line-height: 1.04; letter-spacing: -.018em; }
.display, .h1, .h2, .ech-title, .article h1, .juridique h1, .pied__slogan, .acces-carte h3, .services__nom, .solution h3 { letter-spacing: -.015em; }
.hero__ligne { font-size: 16px; font-weight: 400; color: var(--texte); }
.lead, .prose p, .selection__texte p, .pv__texte p, .visite__txt p { font-weight: 400; }
.eyebrow, .ech-eyebrow, .ech-step { font-size: 14.5px; font-weight: 500; letter-spacing: .02em; color: var(--texte-2); }

/* Bouton contour foncé (sur fond papier) */
.btn--ligne-encre { background: transparent; border-color: rgba(26,23,20,.28); color: var(--encre); }
.btn--ligne-encre:hover { background: rgba(26,23,20,.06); border-color: rgba(26,23,20,.5); }

/* « Venez nous rencontrer » : section claire et chaleureuse, comme le showroom du Hangar Bordelais */
.visite-accueil { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: stretch; margin: var(--sec) 12px 0; border-radius: var(--r-xl); background: var(--papier); color: var(--encre); overflow: hidden; }
.visite-accueil__photo { position: relative; min-height: 520px; border-radius: 0; }
.visite-accueil__photo.masque, .visite-accueil__photo.masque.vu { clip-path: inset(0 0 0 0); }
.visite-accueil__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.visite-accueil__txt { display: grid; align-content: center; gap: 18px; padding: clamp(32px, 5vw, 76px); }
.visite-accueil .eyebrow { color: rgba(26,23,20,.62); }
.visite-accueil .h2 { color: var(--encre); }
.visite-accueil p { color: rgba(26,23,20,.78); font-size: 17px; line-height: 1.65; }
.visite-accueil .horaires-liste li { border-bottom-color: rgba(26,23,20,.12); color: rgba(26,23,20,.62); font-size: 15.5px; padding: 10px 0; }
.visite-accueil .horaires-liste li span:last-child, .visite-accueil .horaires-liste li.aujourdhui span { color: var(--encre); }
.visite-accueil .boutons { margin-top: 6px; }
.signature-main { display: grid; gap: 0; margin-top: 4px; font-size: 16px !important; color: rgba(26,23,20,.62) !important; }
.signature-main span { font: 400 46px/1 var(--f-main); color: var(--rouge); transform: rotate(-3deg); transform-origin: left; display: inline-block; margin-top: 4px; }
@media (max-width: 900px) { .visite-accueil { grid-template-columns: 1fr; margin-inline: 8px; } .visite-accueil__photo { min-height: 300px; } }

/* Mention « Présent au showroom » : uniquement pour les véhicules signalés dans Vroomiz */
.car-badge--showroom, .pp-showroom { display: inline-flex; align-items: center; gap: 7px; }
.car-badge--showroom::before, .pp-showroom::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--vert); box-shadow: 0 0 0 3px rgba(47,191,113,.2); }
.car-badge--showroom { top: 48px; }
.pp-dispo--neutre::before { background: var(--sable); box-shadow: 0 0 0 4px rgba(217,205,177,.16); }
.pp-showroom { font: 500 13.5px/1.2 var(--f-texte); color: var(--creme); }
.pp-avant { padding: 14px 16px; border-radius: 16px; background: rgba(236,229,214,.05); border: 1px solid var(--ligne); font-size: 14px; line-height: 1.55; color: var(--texte); }
.pp-avant a { color: var(--creme); text-decoration: underline; text-underline-offset: 3px; }
.pp-garanties { display: grid; gap: 6px; font-size: 14px; color: var(--texte); }
.pp-garanties b { color: var(--creme); font-weight: 500; }

/* Vendre : conditions séparées, critères visibles, flèche « Voir le parcours » */
.note-photo { display: flex; align-items: flex-start; gap: 14px; max-width: 760px; margin: -12px 0 28px; padding: 18px 22px; border-radius: 20px; background: var(--rouge-voile); border: 1px solid rgba(188,23,53,.35); font-size: 16px; line-height: 1.55; color: var(--texte); }
.note-photo .ico { width: 24px; height: 24px; margin-top: 1px; color: var(--creme); fill: none; }
.note-photo b { color: var(--creme); font-weight: 500; }
.solution__cas { display: grid; gap: 12px; padding-top: 18px; border-top: 1px solid var(--ligne); }
.solution__titre { font: 500 19px/1.25 var(--f-titre); color: var(--creme); }
.solution__criteres { display: grid; gap: 6px; padding: 16px 18px; border-radius: 16px; background: rgba(236,229,214,.05); border: 1px solid var(--ligne-2); }
.solution__criteres b { font: 500 18px/1.25 var(--f-titre); color: var(--creme); }
.solution__criteres span { font-size: 14.5px; line-height: 1.55; color: var(--texte-2); }
.pv__texte .solution__criteres { margin-bottom: 4px; }
.voir-parcours { display: grid; justify-items: center; gap: 10px; margin-top: auto; padding-top: 18px; font: 500 16px/1.2 var(--f-texte); color: var(--creme); text-align: center; }
.voir-parcours__fl { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--ligne-3); transition: background .3s, border-color .3s; animation: rebond 2.4s var(--ease-2) infinite; }
.voir-parcours__fl svg { width: 16px; height: 16px; }
.voir-parcours:hover .voir-parcours__fl { background: var(--rouge); border-color: var(--rouge); }
@keyframes rebond { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .voir-parcours__fl { animation: none; } }

/* Showroom : l'histoire de Christophe présentée comme une lettre (fond papier, écriture plus légère, signature manuscrite) */
.histoire--lettre { padding: clamp(36px, 5vw, 80px); margin-top: var(--sec); margin-bottom: var(--sec); padding-block: clamp(40px, 5vw, 80px); border-radius: var(--r-xl); background: var(--papier); color: var(--encre); width: min(100% - 24px, var(--wrap) + 96px); }
.histoire--lettre .eyebrow { color: rgba(26,23,20,.6); }
.histoire--lettre .histoire__citation { position: relative; font: 300 clamp(21px, 2vw, 28px)/1.55 var(--f-titre); font-style: italic; letter-spacing: 0; color: rgba(26,23,20,.86); }
.histoire--lettre .histoire__citation { padding-left: 1.15em; }
.histoire--lettre .histoire__citation::before { content: "“"; position: absolute; left: -.05em; top: .05em; font: 400 2.6em/1 var(--f-titre); color: var(--rouge); opacity: .5; pointer-events: none; }
.histoire--lettre .histoire__signature { display: grid; gap: 2px; margin-top: 22px; font-size: 14.5px; color: rgba(26,23,20,.6); }
.histoire--lettre .histoire__signature::before { display: none; }
.histoire__main { font: 400 clamp(46px, 4.4vw, 60px)/1 var(--f-main); color: var(--rouge); transform: rotate(-4deg); transform-origin: left center; display: inline-block; }
.histoire--lettre .histoire__suite { color: rgba(26,23,20,.74); font-size: 16.5px; }
.histoire--lettre .btn--verre { background: transparent; border-color: rgba(26,23,20,.28); color: var(--encre); -webkit-backdrop-filter: none; backdrop-filter: none; }
.histoire--lettre .btn--verre:hover { background: rgba(26,23,20,.06); border-color: rgba(26,23,20,.5); }
.histoire--lettre .photo-cadre { border-radius: var(--r-l); }
@media (max-width: 720px) { .histoire--lettre { width: calc(100% - 16px); padding: 28px 22px; } }
.pp-garanties { padding: 14px 16px; border-radius: 16px; background: rgba(47,191,113,.06); border: 1px solid rgba(47,191,113,.22); }
.pp-garanties span { display: flex; align-items: center; gap: 8px; }
.pp-garanties svg { width: 16px; height: 16px; flex: none; color: var(--vert); }
.car-sidebar { gap: 14px; }

.ech-card--photo { border-color: rgba(188,23,53,.35); }
.ech-card--photo .ech-ct { display: flex; align-items: center; gap: 10px; }
.ech-card--photo .ech-ct .ico { width: 20px; height: 20px; fill: none; }
.ech-card--photo b { color: var(--creme); font-weight: 500; }
.plus-infos { border-radius: 18px; border: 1px solid var(--ligne-2); background: rgba(236,229,214,.02); }
.plus-infos > summary { display: flex; align-items: center; gap: 12px; padding: 16px 18px; cursor: pointer; list-style: none; font: 500 15.5px/1.3 var(--f-texte); color: var(--creme); }
.plus-infos > summary::-webkit-details-marker { display: none; }
.plus-infos > summary::before { content: "+"; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(236,229,214,.08); font: 400 18px/1 var(--f-texte); transition: transform .35s var(--ease); flex: none; }
.plus-infos[open] > summary::before { transform: rotate(45deg); }
.plus-infos > summary small { font-size: 13px; font-weight: 400; color: var(--texte-3); }
.plus-infos__corps { display: grid; gap: 20px; padding: 4px 18px 20px; }
.choix--grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .choix--grille { grid-template-columns: 1fr; } }
.photo-slot--une { border-color: rgba(188,23,53,.45); }

/* =====================================================================
   Remarques de Christophe du 01/10 après-midi
   ===================================================================== */
/* Accueil : « Acheter » / « Vendre » en gros, la phrase en dessous en plus petit */
.acces-carte h3 { max-width: none; font: 500 clamp(40px, 4.4vw, 64px)/1 var(--f-titre); letter-spacing: -.015em; }
.acces-carte__sous { margin-top: -2px; font: 400 clamp(18px, 1.5vw, 21px)/1.35 var(--f-texte) !important; color: var(--creme) !important; opacity: .9; }
#titre-acces + .lead { margin-top: -4px; }
/* Carré de la note Google plus discret */
.avis-note { width: clamp(240px, 21vw, 290px); gap: 10px; padding: 24px; }
.avis-note__chiffre { font-size: clamp(44px, 3.8vw, 58px); }
.etoiles--grandes svg { width: 18px; height: 18px; }
.avis-note__liens .btn { --h: 40px; padding: 0 14px; font-size: 13.5px; }

/* Adresse tout en haut de toutes les pages (comme le bandeau du Hangar Bordelais) */
.bandeau-adresse { position: fixed; top: 0; left: 0; right: 0; z-index: 72; height: var(--bandeau-h); margin: 0; display: flex; align-items: center; justify-content: center; padding-inline: 12px; background: #0b0b0c; border-bottom: 1px solid var(--ligne); font: 400 13.5px/1 var(--f-texte); color: var(--texte); }
.bandeau-adresse a { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; min-width: 0; }
.bandeau-adresse .ico { width: 14px; height: 14px; color: var(--rouge-2); }
.bandeau-adresse b { font-weight: 500; letter-spacing: .04em; color: var(--creme); }
.bandeau-adresse__court { display: none; }
.bandeau-adresse__itin { margin-left: 6px; padding-left: 12px; border-left: 1px solid var(--ligne-2); color: var(--creme); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ligne-3); }
.bandeau-adresse a:hover .bandeau-adresse__itin { text-decoration-color: var(--rouge); }
/* 02/10 : petites icônes Facebook / Instagram, fixes tout en haut, discrètes */
.bandeau-adresse__reseaux { position: absolute; right: max(16px, calc((100% - 1360px) / 2 + 8px)); top: 0; bottom: 0; display: flex; align-items: center; gap: 4px; }
.bandeau-adresse__reseaux a { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: var(--texte-3); transition: color .25s, background .25s; }
.bandeau-adresse__reseaux a:hover { color: var(--creme); background: rgba(236,229,214,.07); }
.bandeau-adresse__reseaux .ico { width: 13px; height: 13px; color: currentColor; }
@media (max-width: 560px) { :root { --bandeau-h: 30px; } .bandeau-adresse { font-size: 12.5px; } .bandeau-adresse__long, .bandeau-adresse__itin { display: none; } .bandeau-adresse__court { display: inline; overflow: hidden; text-overflow: ellipsis; } .bandeau-adresse { justify-content: flex-start; padding-right: 72px; } .bandeau-adresse__reseaux { right: 8px; } }

/* Showroom : « Notre histoire » plus gros, texte du fondateur plus petit */
.histoire--lettre .histoire__titre { color: var(--encre); margin-bottom: 8px; }
.histoire--lettre .histoire__citation { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.6; margin-top: 18px !important; }
.histoire--lettre .histoire__main { font-size: clamp(40px, 3.6vw, 52px); }
/* Galerie en grille : photos, vidéos et chiffres mélangés (plus de défilement horizontal) */
.mos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 15vw, 230px); grid-auto-flow: dense; gap: 12px; }
.mos__item { position: relative; margin: 0; border-radius: var(--r-l); overflow: hidden; background: var(--carte); }
.mos__item img, .mos__item video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.mos__item:hover img { transform: scale(1.04); }
.mos__item--grand { grid-column: span 2; grid-row: span 2; }
.mos__item--large { grid-column: span 2; }
.mos__item--haut { grid-row: span 2; }
.mos__chiffre { display: grid; align-content: center; gap: 8px; padding: clamp(18px, 2vw, 28px); background: var(--papier); color: var(--encre); }
.mos__chiffre b { display: flex; align-items: center; gap: 10px; font: 500 clamp(28px, 2.8vw, 42px)/1 var(--f-titre); color: var(--encre); }
.mos__chiffre > span { font-size: 14.5px; line-height: 1.45; color: rgba(26,23,20,.68); }
.mos__chiffre .etoiles svg { width: 15px; height: 15px; }
.mos__chiffre--avis .g-couleur { width: 26px; height: 26px; }
.mos__chiffre--avis:hover { background: #fff8ec; }
@media (max-width: 900px) { .mos { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 170px; } }
@media (max-width: 480px) { .mos { gap: 8px; grid-auto-rows: 140px; } .mos__chiffre b { font-size: 24px; } .mos__chiffre > span { font-size: 13px; } }
/* Réseaux : Facebook et Instagram côte à côte */
.reseaux { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.reseaux__titre { font: 500 15px/1 var(--f-texte); color: var(--texte-2); margin-right: 4px; }
.reseaux .chip { height: 44px; }

/* Nos véhicules : boutons d'accès rapide sous le titre, toutes les marques visibles sur ordinateur */
.acces-ancres { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.acces-ancres .btn svg { width: 15px; height: 15px; }
@media (min-width: 900px) {
  .filtres__marques { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; padding-right: 0; gap: 6px; }
  .filtres__marques .brand-filter { height: 38px; padding: 0 12px 0 10px; font-size: 13.5px; }
}
@media (max-width: 640px) { .acces-ancres .btn { width: 100%; justify-content: space-between; white-space: normal; text-align: left; height: auto; min-height: 52px; padding-block: 12px; } }

/* Fiche : visionneuse zoomable à la molette */
.visionneuse img { transform-origin: 50% 50%; transition: transform .18s ease-out; cursor: zoom-in; user-select: none; -webkit-user-drag: none; }
.visionneuse.zoome img { cursor: grab; }
.visionneuse.glisse img { cursor: grabbing; transition: none; }
.visionneuse__aide { position: absolute; bottom: 24px; right: 24px; font-size: 12.5px; color: var(--texte-3); }
@media (hover: none) { .visionneuse__aide { display: none; } }
/* Fiche : présence au showroom (vert sur place, rouge pas sur place), reprise en rouge */
.pp-presence { display: inline-flex; align-items: center; gap: 8px; font: 500 13.5px/1.2 var(--f-texte); color: var(--creme); }
.pp-presence::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.pp-presence--oui::before { background: var(--vert); box-shadow: 0 0 0 4px rgba(47,191,113,.18); }
.pp-presence--non::before { background: #e3a33b; box-shadow: 0 0 0 4px rgba(227,163,59,.18); }
.pp-reprise-btn { width: 100%; --h: 54px; }
.pp-reprise-btn svg { width: 22px; height: 22px; }
.car-badge--absent { top: 48px; }
.car-badge--absent::before { content: ""; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #e5484d; }

/* Formulaire d'achat : un vrai bouton pour faire reprendre sa voiture */
.reprise-encart { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; padding: 18px 20px; border-radius: 18px; border: 1px solid rgba(188,23,53,.4); background: var(--rouge-voile); }
.reprise-encart strong { display: block; font: 500 16px/1.3 var(--f-texte); color: var(--creme); }
.reprise-encart span { display: block; margin-top: 3px; font-size: 14px; color: var(--texte-2); }
.ech-sous-titre { margin-top: 10px; font: 500 clamp(20px, 2vw, 24px)/1.2 var(--f-titre); color: var(--creme); }
@media (max-width: 640px) { .reprise-encart .btn { width: 100%; } }

/* Vendre : trois encarts, parcours + questions fréquentes en bas de chacun */
.solutions--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.solutions--3 .solution { gap: 18px; padding: clamp(24px, 2.4vw, 36px); }
.solutions--3 .solution h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
/* 02/10 : « Notre cible » + dérogation visible ; « Avec ou sans stockage » devient un bouton vers /stockage */
.derogation { display: inline-flex; align-items: center; gap: 7px; justify-self: start; padding: 5px 11px 5px 8px; border-radius: 999px; background: rgba(66,180,110,.12); border: 1px solid rgba(66,180,110,.35); font: 500 13.5px/1 var(--f-texte); color: #9fe0b5; }
.derogation .ico { width: 11px; height: 11px; color: #4cc77c; }
.solution__criteres .derogation { font-size: 13.5px; line-height: 1; color: #9fe0b5; }
.stockage-btn { display: inline-flex; align-self: flex-start; align-items: center; gap: 10px; height: 40px; padding: 0 8px 0 16px; border-radius: 999px; background: linear-gradient(135deg, #d11f40, #8e0f26); box-shadow: 0 10px 26px -12px rgba(188,23,53,.8); font: 500 15px/1 var(--f-texte); color: var(--creme); transition: transform .3s var(--ease), box-shadow .3s; }
.stockage-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(188,23,53,.9); }
.stockage-btn__fl { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(236,229,214,.16); font-size: 14px; transition: transform .3s var(--ease); }
.stockage-btn:hover .stockage-btn__fl { transform: translateX(3px); }
.pv__tete .stockage-btn { margin-top: 0; }
.solution__etiquette { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--rouge-voile); border: 1px solid rgba(188,23,53,.45); font: 500 13px/1 var(--f-texte); letter-spacing: .01em; color: var(--creme); }
.solution__bas { display: grid; justify-items: center; gap: 14px; margin-top: auto; padding-top: 10px; }
.solution__bas .voir-parcours { margin-top: 0; padding-top: 0; }
@media (max-width: 1100px) { .solutions--3 { grid-template-columns: 1fr; } }
/* Parcours : la dernière étape garde son trait rouge, comme les autres */
.etape:last-child .etape__noeud::after { right: 0; background: linear-gradient(90deg, var(--rouge), rgba(188,23,53,.35)); }
@media (max-width: 900px) { .etape:last-child .etape__noeud::after { display: block; bottom: -14px; } }
.faq-groupe__tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; }
.faq-groupe__tete h2 { margin-bottom: 0 !important; }
/* Téléphone et tablette : les boutons à long libellé passent sur deux lignes au lieu d'être coupés (13/10 : jusqu'à 1199 px) */
@media (max-width: 1199px) {
  .btn, .btn-cta, .btn-line { white-space: normal; height: auto; min-height: var(--h); padding-block: 10px; text-align: center; line-height: 1.25; max-width: 100%; }
}

/* =====================================================================
   Parcours illustrés (01/10 soir) : scènes « interface » dessinées pour Figma
   (page « V2 · Parcours illustrés »), animées par leurs calques à l'apparition.
   -u- carte qui monte · -t- trait tracé · -l- élément qui apparaît · -b- barre qui se remplit
   -s- tampon qui se pose · -p- appui qui pulse · -m- mouvement continu
   ===================================================================== */
.etape__illu { background: #0c0c0f; }
.etape__illu svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.etapes .etape:nth-child(2) .etape__illu { --d0: .3s; }
.etapes .etape:nth-child(3) .etape__illu { --d0: .6s; }
.etapes .etape:nth-child(4) .etape__illu { --d0: .9s; }
.etape__illu [id*="-u-"] { opacity: 0; transform: translateY(18px); transform-box: fill-box; transition: opacity .7s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--d0, 0s) + .1s + var(--k, 0) * .14s); }
.etape__illu.vu [id*="-u-"] { opacity: 1; transform: none; }
.etape__illu [id*="-t-"] { transition-duration: 1.1s; transition-delay: calc(var(--d0, 0s) + .55s + var(--k, 0) * .16s); }
.etape__illu [id*="-l-"] { transition-delay: calc(var(--d0, 0s) + .45s + var(--k, 0) * .14s); }
.etape__illu [id*="-b-"] { transform: scaleX(0); transform-box: fill-box; transform-origin: left center; transition: transform 1.6s var(--ease-2); transition-delay: calc(var(--d0, 0s) + 1.1s); }
.etape__illu.vu [id*="-b-"] { transform: none; }
.etape__illu [id*="-s-"] { opacity: 0; transform: scale(1.5); transform-box: fill-box; transform-origin: center; transition: opacity .35s ease, transform .55s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(var(--d0, 0s) + 1.5s + var(--k, 0) * .25s); }
.etape__illu.vu [id*="-s-"] { opacity: 1; transform: none; }
.etape__illu [id*="-p-"] { transition-delay: calc(var(--d0, 0s) + 1.2s); }
.etape__illu.vu [id*="-p-"] > :first-child { animation-delay: calc(var(--d0, 0s) + 1.8s); }
/* mouvements continus */
.etape__illu.vu [id$="-m-trajet"] { animation: trajet 5s var(--ease-2) calc(var(--d0, 0s) + 1.2s) infinite alternate; }
@keyframes trajet { from { transform: translateX(0); } to { transform: translateX(196px); } }
.etape__illu.vu [id$="-m-flux"] { animation: flux 1.8s var(--ease-2) calc(var(--d0, 0s) + 1.4s) infinite; }
@keyframes flux { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(152px); opacity: 0; } }
.etape__illu [id$="-m-cle"] { transform-box: fill-box; transform-origin: 50% 0; }
.etape__illu.vu [id$="-m-cle"] { animation: balance 3.4s ease-in-out calc(var(--d0, 0s) + 1s) infinite; }
.etape__illu.vu [id$="-m-loupe"] { animation: loupe 5s ease-in-out calc(var(--d0, 0s) + .8s) infinite; }
@keyframes loupe { 0%, 100% { transform: translate(150px, 118px); } 50% { transform: translate(262px, 112px); } }
@media (prefers-reduced-motion: reduce) { .etape__illu [id] { opacity: 1 !important; transform: none !important; animation: none !important; stroke-dashoffset: 0 !important; } .etape__illu [id$="-m-loupe"] { transform: translate(150px, 118px) !important; } }
@media (max-width: 900px) {
  .etape__in:has(.etape__illu) { grid-template-columns: 30px 150px minmax(0, 1fr); }
  .etape__illu { aspect-ratio: 4 / 5 !important; border-radius: 16px; }
}
@media (max-width: 380px) { .etape__in:has(.etape__illu) { grid-template-columns: 26px 128px minmax(0, 1fr); column-gap: 12px; } }

/* Photos réelles du showroom (01/10) */
.photo-cadre--portrait img { object-position: 38% 50%; }
.pv__photo { position: relative; aspect-ratio: 4 / 3; margin-top: 22px; border-radius: var(--r-l); overflow: hidden; background: var(--carte); }
.pv__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.selection__photo { position: relative; aspect-ratio: 4 / 3; margin: 0; border-radius: var(--r-xl); overflow: hidden; background: var(--carte); } /* 05/10 : 4:3 au lieu de carré, à la hauteur du texte */
.selection__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.points-verifies { display: flex; flex-wrap: wrap; gap: 8px; }
.points-verifies li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(236,229,214,.06); border: 1px solid var(--ligne); font-size: 14px; color: var(--creme); }
.points-verifies li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--vert); box-shadow: 0 0 0 3px rgba(47,191,113,.18); }

/* Accueil : photos dans les carrés « Acheter » / « Vendre » (01/10) */
.acces-carte__photo { position: relative; flex: 1; min-height: 260px; margin: calc(-1 * clamp(26px, 3vw, 44px)) calc(-1 * clamp(26px, 3vw, 44px)) 28px; overflow: hidden; border-radius: var(--r-xl) var(--r-xl) 0 0; }
.acces-carte__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.4s var(--ease); }
.acces-carte__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,7,8,0) 55%, var(--carte) 100%); pointer-events: none; }
.acces-carte:hover .acces-carte__photo img { transform: scale(1.07); }
.acces-carte:has(.acces-carte__photo)::after { display: none; }
.visite-accueil__photo--portrait img { object-position: 36% 30%; }
@media (max-width: 860px) { .acces-carte__photo { min-height: 220px; flex: none; aspect-ratio: 16 / 10; } }

/* 02/10 : page /stockage (dépôt-vente avec ou sans stockage) */
.stock-preuve__in { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(20px, 4vw, 56px); padding: clamp(28px, 4vw, 56px); border-radius: var(--r-xl); background: radial-gradient(80% 120% at 0% 50%, rgba(188,23,53,.22), transparent 65%), var(--carte); border: 1px solid var(--ligne); }
.stock-preuve__chiffre { font: 500 clamp(72px, 11vw, 150px)/.9 var(--f-titre); letter-spacing: -.02em; color: var(--creme); }
.stock-preuve .h2 { margin-bottom: 12px; }
@media (max-width: 640px) { .stock-preuve__in { grid-template-columns: 1fr; } }

/* 02/10 : réassurance complète de la fiche (coches vertes), en encadré vert */
.pp-reass { grid-template-columns: 1fr 1fr; gap: 9px 14px; padding: 14px 16px; border-radius: 16px; background: rgba(47,191,113,.06); border: 1px solid rgba(47,191,113,.22); }
.pp-reass li { align-items: flex-start; font-size: 13.5px; line-height: 1.35; }
.pp-reass b { color: var(--creme); font-weight: 500; }
.pp-reass svg { margin-top: 1px; }
@media (max-width: 400px) { .pp-reass { grid-template-columns: 1fr; } }

/* 02/10 (Christophe : « le carré blanc et la photo font prétentieux ») : lettre plus compacte,
   photo réduite ; textes et polices inchangés */
/* 03/10 : encart encore réduit (marges, photo) et fond adouci pour ne plus agresser l'œil après le noir */
.histoire--lettre { width: min(100% - 24px, 960px); padding: clamp(24px, 3vw, 38px); grid-template-columns: minmax(0, 1fr) 200px; gap: clamp(24px, 3vw, 38px); background: #cdc5b6; box-shadow: inset 0 0 0 1px rgba(26,23,20,.06); }
.histoire--lettre .photo-cadre { width: 200px; justify-self: end; }
/* 06/10 (Christophe) : « Venez nous rencontrer » réduit : encart centré moins large, marges réduites,
   horaires sur deux colonnes (moitié moins haut), photo plus basse */
.visite-accueil { grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); width: min(100% - 24px, 1080px); margin-inline: auto; }
.visite-accueil__photo { min-height: 340px; }
.visite-accueil__txt { gap: 14px; padding: clamp(24px, 3.2vw, 44px); }
.visite-accueil p { font-size: 16px; line-height: 1.6; }
.visite-accueil .horaires-liste { grid-template-columns: 1fr 1fr; column-gap: 28px; }
.visite-accueil .horaires-liste li { padding: 7px 0; font-size: 14.5px; }
@media (max-width: 900px) { .visite-accueil { width: calc(100% - 16px); } .visite-accueil__photo { min-height: 240px; } }
@media (max-width: 560px) { .visite-accueil .horaires-liste { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .histoire--lettre { grid-template-columns: 1fr; } .histoire--lettre .photo-cadre { width: min(180px, 60%); justify-self: start; order: -1; } }

/* 02/10 : parcours simplifiés (design/illus/etapes.py) : trajets ajustés aux nouvelles scènes */
.etape__illu.vu #etape-depot-reglement-m-flux { animation-name: flux-depot; }
@keyframes flux-depot { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(180px); opacity: 0; } }
.etape__illu.vu #etape-depot-etude-m-loupe { animation-name: loupe-depot; }
@keyframes loupe-depot { 0%, 100% { transform: translate(150px, 145px); } 50% { transform: translate(250px, 140px); } }
@media (prefers-reduced-motion: reduce) { .etape__illu #etape-depot-etude-m-loupe { transform: translate(150px, 145px) !important; } }

/* ===== 03/10 (tableau de Christophe du 3 octobre matin) : retouches ciblées ===== */
/* Boutons repères (« Pourquoi passer par CAR&SENS ? », « Sélection et vérification ») : fond plus visible */
.btn--repere { background: rgba(188,23,53,.2); border-color: rgba(188,23,53,.65); color: var(--creme); }
.btn--repere:hover { background: rgba(188,23,53,.32); border-color: var(--rouge-2); }
.btn--repere .fl { background: var(--rouge); }
/* Comparatif sur téléphone : une carte par critère, plus de défilement horizontal */
@media (max-width: 720px) {
  .comparatif { overflow: visible; }
  .comparatif table { min-width: 0; }
  .comparatif thead { display: none; }
  .comparatif tr, .comparatif th, .comparatif td { display: block; width: auto !important; }
  .comparatif tbody tr { padding: 16px 18px; border-bottom: 1px solid var(--ligne); }
  .comparatif tbody tr:last-child { border-bottom: 0; }
  .comparatif th, .comparatif td { padding: 0; border: 0; }
  .comparatif tbody th { margin-bottom: 10px; font-size: 16px; }
  .comparatif td + td { margin-top: 10px; }
  .comparatif td[data-label]::before { content: attr(data-label); display: block; width: auto; height: auto; margin: 0 0 3px; border-radius: 0; background: none; font: 600 12.5px/1.2 var(--f-texte); letter-spacing: .02em; text-transform: uppercase; color: var(--texte-3); }
  .comparatif td.oui[data-label]::before { color: #4cc77c; }
}
/* Menu déroulant : « Suivez notre actualité » mène à la section du showroom (pas directement à Facebook ou Instagram) */
.hd__deroulant-actu { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 0 -14px -6px; border-radius: 14px; font: 500 15.5px/1.2 var(--f-texte); color: var(--creme); transition: background .2s; }
.hd__deroulant-actu:hover { background: rgba(236,229,214,.06); }
.hd__deroulant-actu > span:last-child { margin-left: auto; color: var(--texte-3); }
.hd__deroulant-actu-ico { display: inline-flex; gap: 4px; }
.hd__deroulant-actu-ico .ico { width: 22px; height: 22px; padding: 5px; border-radius: 50%; color: #fff; background: #1877F2; }
.hd__deroulant-actu-ico .ico + .ico { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
/* Facebook / Instagram du bandeau : tout à droite et bien plus visibles (pastilles aux couleurs des réseaux) */
.bandeau-adresse__reseaux { right: 12px; gap: 6px; }
.bandeau-adresse__reseaux a { width: 24px; height: 24px; border-radius: 50%; color: #fff; }
.bandeau-adresse__reseaux a:first-child { background: #1877F2; }
.bandeau-adresse__reseaux a:last-child { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.bandeau-adresse__reseaux a:hover { color: #fff; filter: brightness(1.12); background-color: transparent; }
.bandeau-adresse__reseaux a:first-child:hover { background: #1877F2; }
.bandeau-adresse__reseaux .ico { width: 12px; height: 12px; }
/* Logo : CAR&SENS visible dès l'arrivée. En haut de page, le grand volant est porté par la languette
   et le nom s'affiche dans la barre, à sa droite ; au défilement, le volant rapetisse et le nom glisse à côté. */
.hd.pret .hd__logo { transition: width .7s var(--ease); }
.hd.pret .hd__mot { transition: left .7s var(--ease), width .7s var(--ease); }
.hd.grand .hd__logo { width: calc(184px + var(--mw)); }
.hd.grand .hd__mot { opacity: 1; left: 184px; pointer-events: auto; }
@media (max-width: 1299px) { .hd.grand .hd__logo { width: calc(168px + var(--mw)); } .hd.grand .hd__mot { left: 168px; } }
@media (max-width: 720px) { .hd.grand .hd__logo { width: calc(74px + var(--mw)); } .hd.grand .hd__mot { left: 74px; } }
/* Fiche : options signalées comme dans les annonces (point rouge + « OPTION : ») */
.equip-list .option__mot { font-weight: 600; letter-spacing: .02em; color: var(--rouge-2); }
/* Fiche : photos glissées au doigt (fiche et galerie plein écran) */
[data-principale], .visionneuse { touch-action: pan-y; }
[data-principale] img { will-change: transform; }
/* 06/10 : photos des cartes véhicules glissées au doigt */
.car-shot { touch-action: pan-y; }
/* 06/10 : comparatif = dépôt-vente, suivi des boutons vers le dépôt-vente ; « Pourquoi passer par CAR&SENS ? » dans l'encart dépôt-vente */
.comparatif__suite { justify-content: center; margin-top: 24px; }
.solution__pourquoi { align-self: flex-start; }
.selection__texte .btn { justify-self: start; }
/* 08/10 : « Pourquoi passer par CAR&SENS ? » à côté de « Avec ou sans stockage » (même hauteur, passe dessous si l'encart est trop étroit) */
.solution__boutons { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.solution__boutons .stockage-btn { align-self: center; }
.solution__boutons .solution__pourquoi { --h: 40px; align-self: center; padding: 0 8px 0 16px; }
/* 10/10 (Christophe) : en-têtes de l'accueil et des onglets, petite ligne un peu plus grande, titre un peu plus petit */
.hero__ligne { font-size: 18.5px; }
.hero__titre { font-size: clamp(38px, 4.8vw, 68px); }
.page-hero .eyebrow, .page-tete .eyebrow { font-size: 17px; }
.page-hero .display, .page-tete .display { font-size: clamp(40px, 5.7vw, 82px); }
@media (max-width: 600px) {
  .hero__ligne { font-size: 17px; }
  .page-hero .eyebrow, .page-tete .eyebrow { font-size: 16px; }
}
/* 11/10 (Christophe) : Vendre, visuel du haut moins haut pour voir les trois solutions plus vite */
.page-hero--court { height: min(60svh, 600px); min-height: 420px; }
@media (max-width: 720px) { .page-hero--court { min-height: 380px; } }
/* Petite ligne sur deux lignes (« À votre service depuis 2018 ») : le point rouge reste face à la première */
.page-hero .eyebrow:has(br) { align-items: flex-start; }
.page-hero .eyebrow:has(br)::before { margin-top: .45em; }
/* Encadrés : « Comment… » + « Questions fréquentes », puis le bouton direct vers le formulaire */
.solution__liens { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.solution__form { width: 100%; justify-content: center; }
#encart-depot-vente { scroll-margin-top: 140px; }
/* Mention mise en évidence (dépôt-vente : paiement via compte séquestre) */
.mise-en-avant { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; border-radius: var(--r); background: var(--rouge-voile); border: 1px solid rgba(188,23,53,.45); color: var(--creme); }
.mise-en-avant .ico { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--rouge); }
.mise-en-avant b { font-weight: 600; }
/* 11/10 (Christophe) : formulaires vendeurs, aide téléphonique et précisions toujours visibles */
.aide-tel { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 15px; line-height: 1.4; color: var(--texte); }
.aide-tel .ico { flex: none; width: 16px; height: 16px; color: var(--rouge); }
.aide-tel a { color: var(--creme); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.plus-infos--fixe { padding-top: 6px; }
.plus-infos__titre { padding: 14px 18px 6px; font: 500 15.5px/1.3 var(--f-texte); color: var(--creme); }
.champ__aide { margin: 2px 0 10px; font-size: 14px; color: var(--creme); font-weight: 500; }
.ech-head .mise-en-avant { margin-top: 14px; max-width: 560px; }
.champ__note { display: block; margin-top: 6px; font-size: 13.5px; color: var(--texte-2); }
/* 11/10 : bandeau de consentement aux cookies (Refuser et Accepter à égalité) */
.consent { position: fixed; z-index: 90; left: 16px; right: 16px; bottom: 16px; max-width: 720px; margin: 0 auto; display: grid; gap: 14px; padding: 18px 20px; border-radius: var(--r-xl); background: rgba(18,17,19,.96); border: 1px solid var(--ligne-2); box-shadow: 0 24px 60px -20px rgba(0,0,0,.7); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.consent[hidden] { display: none; }
.consent__texte { font-size: 14.5px; line-height: 1.5; color: var(--texte); }
.consent__texte b { color: var(--creme); margin-right: 6px; }
.consent__texte a { color: var(--creme); text-decoration: underline; text-underline-offset: 3px; }
.consent__choix { display: grid; gap: 10px; }
.consent__choix label { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--texte); cursor: pointer; }
.consent__choix input { margin-top: 3px; accent-color: var(--rouge); }
.consent__choix b { color: var(--creme); font-weight: 600; }
.consent__boutons { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
@media (max-width: 520px) { .consent__boutons .btn { flex: 1 1 0; } }
/* 13/10 (Christophe) : le rond de la flèche ne déborde plus de « Pourquoi passer par CAR&SENS ? » (marge droite réduite) */
.solution__boutons .solution__pourquoi .fl { margin-right: 0; width: 26px; height: 26px; }
/* Encadrés : consigne de la reprise ; formulaire de reprise sans véhicule choisi */
.solution__consigne { font-size: 14.5px; line-height: 1.5; color: var(--texte); text-align: center; }
.solution__consigne b { color: var(--creme); font-weight: 600; }
.reprise-choix { display: grid; gap: 16px; justify-items: start; margin-top: 8px; }
.reprise-choix > p:not(.mise-en-avant) { font-size: 15px; line-height: 1.55; color: var(--texte); }
/* 13/10 : responsive téléphone et tablette (retouches mesurées, rien d'autre)
   · ancres : l'en-tête du téléphone mesure jusqu'à 167 px, la marge de défilement passe de 140 à 180 px
   · zones tactiles agrandies sans bouger la mise en page (pseudo-élément), textes de moins de 12 px relevés */
@media (max-width: 720px) {
  html { scroll-padding-top: 180px; }
  #encart-depot-vente { scroll-margin-top: 180px; }
}
@media (pointer: coarse) {
  .pied__liste a, .avis-carte__lire, .fil a { position: relative; }
  .pied__liste a::after, .avis-carte__lire::after, .fil a::after { content: ""; position: absolute; inset: -10px -6px; }
}
/* 13/10 (photo 3 de Christophe) : sur téléphone, l'en-tête défilé ne se teinte plus du rouge des boutons qui passent dessous */
@media (max-width: 720px) { .hd.is-scrolled .hd__fond, body.menu-ouvert .hd__fond { background: rgba(14,14,16,.96); } }
/* 13/10 : « TTC » et libellés de caractéristiques lisibles aussi sur tablette (écrans tactiles) */
@media (max-width: 720px), (pointer: coarse) { .car-prix small { font-size: 12px; } .pp-caract dt { font-size: 12.5px; } }
/* 13/10 (photo 3 de Christophe) : téléphone et tablette, la fente de 10 px entre le bandeau d'adresse et l'en-tête
   ne laisse plus passer le contenu qui défile (boutons rouges visibles entre les deux) */
@media (max-width: 1199px) {
  .hd::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; background: #0b0b0c; opacity: 0; transition: opacity .3s; }
  .hd.is-scrolled::before { opacity: 1; }
}
/* 13/10 (Mehdi) : bandeaux photo de Vendre, Showroom et Stockage. La photo (1 200 px) n'est plus étirée sur toute
   la largeur (floue, voiture coupée) : elle est posée entière et nette dans un panneau, sur un fond flouté
   de la même photo. Ordinateur : panneau à droite, titre à gauche ; téléphone et tablette : bandeau sous l'en-tête. */
.page-hero--photo { container-type: size; background: #0b0b0c; --ph-w: min(48cqw, calc((100cqh - var(--hd-h) - 50px) * 1.2)); }
.page-hero--photo .page-hero__media { inset: -6%; }
.page-hero--photo .page-hero__media img { filter: blur(40px) saturate(1.15) brightness(.4); transform: scale(1.12); }
.page-hero--photo::after { background: linear-gradient(90deg, rgba(7,7,8,.8) 0%, rgba(7,7,8,.3) 48%, rgba(7,7,8,0) 72%), linear-gradient(180deg, rgba(7,7,8,.35), rgba(7,7,8,0) 30%, rgba(7,7,8,0) 70%, rgba(7,7,8,.55)); }
.page-hero__photo { position: absolute; z-index: 0; top: calc(var(--hd-h) + 34px); bottom: 16px; right: 16px; width: var(--ph-w); border-radius: 26px; overflow: hidden; box-shadow: 0 40px 90px -30px #000, 0 0 0 1px rgba(236,229,214,.09); }
.page-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.page-hero--photo .page-hero__contenu { z-index: 1; }
.page-hero--photo .page-hero__contenu > * { max-width: calc(100cqw - var(--ph-w) - 140px); }
@media (max-width: 900px) {
  .page-hero--photo { --bande-top: 172px; --bande-h: calc((100vw - 36px) / 1.333); height: calc(var(--bande-top) + var(--bande-h) + 216px); min-height: 0; }
  .page-hero--photo.page-hero--court { --bande-h: calc((100vw - 36px) / 2); height: calc(var(--bande-top) + var(--bande-h) + 222px); }
  .page-hero--photo::after { background: linear-gradient(180deg, rgba(7,7,8,.4), rgba(7,7,8,0) 25%, rgba(7,7,8,.55) 62%, rgba(7,7,8,.9)); }
  .page-hero__photo { top: var(--bande-top); bottom: auto; left: 10px; right: 10px; width: auto; height: var(--bande-h); border-radius: 20px; }
  .page-hero__photo img { object-position: var(--pos, center 72%); }
  .page-hero--photo .page-hero__contenu > * { max-width: none; }
}
@media (max-width: 720px) { .page-hero--photo { --bande-top: calc(var(--hd-h) + 14px); } } /* téléphone : petit volant dans la barre ; tablette : le grand volant descend jusqu'à 160 px */
/* héros graphique : le compte-tours est à droite, l'image se cale à droite quand l'écran est moins large que 16:9 */
.hero__media img { object-position: right center; }
@media (max-width: 760px), (orientation: portrait) and (max-width: 1100px) { .hero__media img { object-position: center top; } }
/* 13/10 : petits téléphones (iPhone SE…) : le texte du héros remonte jusque sur l'image, on l'assombrit pour la lisibilité */
@media (max-width: 760px) and (max-height: 740px) { .hero__voile { background: linear-gradient(180deg, rgba(7,7,8,.35) 0%, rgba(7,7,8,.5) 25%, rgba(7,7,8,.78) 55%, rgba(7,7,8,.94) 100%); } .hero__media img { object-position: center 6%; } }
/* tablette couchée (≤ 3:2) : variante 4:3 du héros graphique (compteur plus compact, à l'écart du titre) */
/* 13/10 : téléphones courts (360 × 640…) : le texte du héros passait sous l'en-tête. Le bloc reste en bas comme avant,
   mais le héros s'allonge si le texte ne tient pas sous l'en-tête. */
@media (max-width: 720px) {
  .hero { height: auto; min-height: max(560px, calc(100svh - 16px - var(--bandeau-h))); display: flex; flex-direction: column; justify-content: flex-end; }
  .hero__contenu { position: relative; bottom: auto; padding-top: calc(var(--hd-h) + 28px); padding-bottom: 28px; }
}
/* 14/10 : très petits écrans (320 px) : « Commercialisation » débordait de la carte d'étape (colonne de texte 110 px) */
@media (max-width: 340px) { .etape__in:has(.etape__illu) { grid-template-columns: 24px 96px minmax(0, 1fr); column-gap: 10px; } .etape__txt h3 { font-size: 17px; } }
.etape__txt h3 { overflow-wrap: break-word; hyphens: auto; }
/* 15/10 (Christophe : « la photo de Christophe est coupée ») : photo paysage → cadre 4:3 qui montre Christophe et le
   volant mural entiers, sans allonger l'encart ; téléphone : photo au-dessus du texte (la règle du 06/10 gardait
   2 colonnes sur téléphone, d'où une bande de 116 px de large) */
.visite-accueil { grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); align-items: center; }
.visite-accueil__txt { gap: 12px; padding-block: 22px; } /* reste sous les 620 px demandés le 06/10 */
.visite-accueil__photo { min-height: 0; aspect-ratio: 4 / 3; margin: clamp(20px, 2.4vw, 30px) 0 clamp(20px, 2.4vw, 30px) clamp(20px, 2.4vw, 30px); border-radius: 22px; overflow: hidden; }
.visite-accueil__photo--portrait img { object-position: 42% 38%; }
@media (max-width: 900px) {
  .visite-accueil { grid-template-columns: 1fr; }
  .visite-accueil__photo { aspect-ratio: 16 / 10; margin: 10px 10px 0; border-radius: 20px; }
  .visite-accueil__photo--portrait img { object-position: 40% 35%; }
}
/* 15/10 (Christophe : « c'est trop long » sur téléphone) : retouches de longueur, même contenu, téléphone seulement */
@media (max-width: 720px) {
  :root { --sec: 52px; }
  /* Nos véhicules et véhicules similaires : carte en ligne, photo à gauche, infos à droite (comme les annonces sur téléphone) */
  .grille-vh { gap: 12px; }
  .grille-vh .tease { flex-direction: row; border-radius: 18px; }
  .grille-vh .tease:hover { transform: none; }
  .grille-vh .car-shot { flex: 0 0 44%; aspect-ratio: auto; min-height: 150px; }
  .grille-vh .car-badge, .grille-vh .car-shot-count, .grille-vh .car-prev, .grille-vh .car-next, .grille-vh .car-dots { display: none; }
  .grille-vh .car-shot .car-badge--showroom { display: inline-flex; top: auto; bottom: 8px; left: 8px; height: 22px; padding: 0 8px; font-size: 12px; }
  .grille-vh .card-body { min-width: 0; gap: 2px; padding: 12px 14px; }
  .grille-vh .car-marque { font-size: 12px; }
  .grille-vh .card-title { font-size: 17px; }
  .grille-vh .car-version { font-size: 12.5px; }
  .grille-vh .car-puces { gap: 4px; margin-top: 8px; }
  .grille-vh .car-puces li { padding: 4px 8px; font-size: 12px; }
  .grille-vh .car-puces + .car-bas { margin-top: 10px; padding-top: 10px; }
  .grille-vh .car-prix { font-size: 19px; }
  .grille-vh .car-go { width: 34px; height: 34px; }
  /* Étapes des parcours : illustration plus petite */
  .etape__in:has(.etape__illu) { grid-template-columns: 26px 96px minmax(0, 1fr); column-gap: 12px; }
  /* Pied de page : listes côte à côte, espacements resserrés */
  .pied { padding-top: 40px; }
  .pied__haut { padding-bottom: 32px; }
  .pied__grille { grid-template-columns: 1fr 1fr; gap: 28px 20px; padding-block: 32px; }
  .pied__marque, .pied__infos { grid-column: 1 / -1; }
  .pied h2 { margin-bottom: 12px; }
  /* Photos d'illustration plus basses (accueil, Vendre) */
  .acces-carte__photo { min-height: 190px; margin-bottom: 20px; }
  .selection__photo { aspect-ratio: 16 / 10; }
  .pv__photo { aspect-ratio: 16 / 10; min-height: 0; }
  .pied__slogan { font-size: 30px; }
}

/* 15/10 (Christophe) : cartes véhicules sans défilement ; badges et nombre de photos laissent passer le clic vers la fiche */
.car-shot .car-badge, .car-shot .car-shot-count { pointer-events: none; }

/* 15/10 soir (Christophe) : sur ordinateur, héros moins haut (le texte remonte, moins de « trou noir » sous l'en-tête) ;
   l'image 16:9 a un compteur réduit à 78 % (hero-graphique-16x9-v2.jpg). Téléphone et tablette inchangés. */
@media (min-width: 1101px) and (orientation: landscape) and (min-aspect-ratio: 3/2) {
  .hero { height: clamp(620px, min(calc(100svh - 24px - var(--bandeau-h)), 46vw), 900px); }
}

/* 16/10 (Christophe) : « on doit voir la marque en premier » : le mot CAR&SENS (avec son slogan) agrandi d'environ 35 % */
.hd__logo { --mw: 238px; }
@media (max-width: 1299px) { .hd__logo { --mw: 206px; } }
@media (max-width: 1099px) { .hd__logo { --mw: 188px; } }
@media (max-width: 720px) { .hd__logo { --mw: 168px; } }
@media (max-width: 380px) { .hd__logo { --mw: 142px; } }

/* 16/10 (Christophe) : « agrandir les textes de la bannière, sur mobile ce n'est pas simple à lire » : 12,5/13,5 → 14,5 px */
:root { --bandeau-h: 34px; }
.bandeau-adresse { font-size: 14.5px; }
.bandeau-adresse .ico { width: 15px; height: 15px; }
@media (max-width: 560px) { :root { --bandeau-h: 34px; } .bandeau-adresse { font-size: 14.5px; } }
@media (max-width: 340px) { .bandeau-adresse { font-size: 13.5px; } }
@media (min-width: 561px) and (max-width: 660px) { .bandeau-adresse__long, .bandeau-adresse__itin { display: none; } .bandeau-adresse__court { display: inline; overflow: hidden; text-overflow: ellipsis; } .bandeau-adresse { justify-content: flex-start; padding-right: 72px; } .bandeau-adresse__reseaux { right: 8px; } }
/* … et le menu se resserre pour garder toutes ses rubriques visibles (Contact, Blog) */
@media (min-width: 1100px) { .hd__liens a { padding: 10px 10px; font-size: 15px; } .hd__liens { gap: 0; } }
@media (min-width: 1300px) and (max-width: 1365px) { .hd__logo { --mw: 214px; } }
@media (max-width: 380px) { .hd__logo { --mw: 156px; } }
@media (max-width: 340px) { .hd__logo { --mw: 136px; } }

/* 16/10 (Mehdi) : bandeaux photo (Showroom, Vendre, Stockage) : le texte s'arrête avant la photo, quelle que soit la largeur
   (la marge gauche du conteneur n'était pas comptée : sur grand écran le titre passait sous la photo) */
@media (min-width: 901px) {
  .page-hero--photo .page-hero__contenu > * { max-width: calc(100cqw - var(--ph-w) - 16px - 56px - (100cqw - min(100cqw - 2 * var(--gout), var(--wrap))) / 2); }
}
/* 16/10 (Mehdi) : avis Google en défilement continu (v2-avis.js) : pas d'aimantation pendant le défilement */
.rail-cartes--auto { scroll-snap-type: none; }

/* 16/10 (Mehdi : « fais de meilleurs en-têtes avec Figma ») : en-têtes composés dans Figma (page « V2 · En-têtes de pages »,
   cadres 59:3 Showroom, 68:2 Vendre 3:1, 62:58 Stockage) : fond, cadran, traînées et photo encadrée dans une seule image,
   calée à droite sur toute la hauteur (photo jamais coupée), le titre à gauche s'arrête avant la photo.
   --compo-r : proportion de l'image (2 ou 3) ; --compo-k : largeur de la partie photo rapportée à la hauteur.
   Téléphone et tablette en portrait (≤ 900 px) : inchangés (bande photo). */
@media (min-width: 901px) {
  .page-hero--compo .page-hero__media { inset: 0; transform: none !important; }
  .page-hero--compo .page-hero__media img { position: absolute; left: auto; right: 0; top: auto; bottom: 0; width: auto; max-width: none; height: min(100%, calc(100cqw / var(--compo-r) * 1.02)); object-fit: fill; filter: none; transform: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%); mask-image: linear-gradient(90deg, transparent 0, #000 12%); }
  .page-hero--compo .page-hero__photo { display: none; }
  .page-hero--compo::after { background: linear-gradient(180deg, rgba(7,7,8,.3), rgba(7,7,8,0) 22%), linear-gradient(90deg, rgba(7,7,8,.35), rgba(7,7,8,0) 38%); }
  .page-hero--compo .page-hero__contenu > * { max-width: calc(100cqw - var(--compo-k) * min(100cqh, 100cqw / var(--compo-r) * 1.02) - 56px - (100cqw - min(100cqw - 2 * var(--gout), var(--wrap))) / 2); }
}
/* l'image du fond est dans un <picture> : il prend toute la place du conteneur (téléphone compris) */
.page-hero__media picture { display: block; width: 100%; height: 100%; }

/* 18/10 : bloc de 3 questions fréquentes (accueil, véhicules, vendre, showroom, contact), rendu par scripts/seo.mjs */
.faq-mini__grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.faq-mini__tete { display: grid; gap: 16px; justify-items: start; }
.faq-mini__tete .h2 { max-width: 14ch; }
.faq-mini .faq-questions { grid-template-columns: 1fr; }
@media (max-width: 900px) { .faq-mini__grille { grid-template-columns: 1fr; gap: 24px; } }
.pied__maj { display: block; margin-top: 4px; } /* 18/10 : date de mise à jour visible, sous le © */

/* 19/10 : case d'acceptation obligatoire, signalée comme les autres champs en erreur */
.rgpd.erreur { flex-wrap: wrap; color: var(--creme); }
.rgpd.erreur input { outline: 2px solid var(--rouge); outline-offset: 2px; }
.rgpd.erreur::after { content: "Cochez cette case pour envoyer votre demande."; flex-basis: 100%; padding-left: 30px; font-size: 13px; font-weight: 600; color: #ff7a8a; }
/* 19/10 : la galerie plein écran gère elle-même les gestes (zoom à deux doigts, déplacement, photo suivante) */
.visionneuse, .visionneuse img { touch-action: none; }
.rgpd > label, .rgpd > span { flex: 1 1 0; min-width: 0; }

/* 22/10 : héros vidéo du showroom (image d'attente = premier plan de la vidéo) : cadrage centré, identique pour l'image et la vidéo
   (les décalages droite / haut servaient au héros graphique compte-tours, conservé dans assets/img/hero/hero-graphique-*) */
.hero__media img, .hero__media video { object-position: center center; }
/* 22/10 : lisibilité du texte sur la vidéo (plans clairs ou chargés : vue aérienne, hall blanc) */
/* 23/10 : retour client « trop sombre, on voit presque rien » → voile allégé (assombrit seulement derrière le texte),
   vidéo un peu éclaircie, lisibilité tenue par l'ombre du texte */
.hero__media img, .hero__media video { filter: brightness(1.12) saturate(1.06); }
.hero__voile { background: linear-gradient(180deg, rgba(7,7,8,.32) 0%, rgba(7,7,8,0) 18%, rgba(7,7,8,0) 58%, rgba(7,7,8,.5) 100%), radial-gradient(ellipse 62% 78% at 18% 58%, rgba(7,7,8,.5) 0%, rgba(7,7,8,.22) 55%, rgba(7,7,8,0) 82%); }
.hero__ligne, .hero__titre { text-shadow: 0 1px 3px rgba(0,0,0,.45), 0 2px 22px rgba(0,0,0,.55); }
.hero__ligne { text-shadow: 0 1px 2px rgba(0,0,0,.75), 0 0 14px rgba(0,0,0,.6); }
@media (max-width: 760px), (orientation: portrait) and (max-width: 1100px) {
  .hero__voile { background: linear-gradient(180deg, rgba(7,7,8,.28) 0%, rgba(7,7,8,0) 20%, rgba(7,7,8,.2) 36%, rgba(7,7,8,.42) 50%, rgba(7,7,8,.52) 72%, rgba(7,7,8,.62) 100%); }
}
/* 22/10 (vitesse) : hauteur de la bande de vignettes réservée avant leur arrivée (évitait un saut de page, CLS 0,24 sur mobile) */
.car-thumbs-zone { container-type: inline-size; }
.car-thumbs { min-height: calc((100cqw - 40px) / 5 * .75); }
@media (max-width: 720px) { .car-thumbs { min-height: calc((100cqw - 24px) / 3.4 * .75); } }