/* ============================================================
   PANTHEON MOTORS — VERSION FINALE (19/10/2026)
   DA aux couleurs du logo définitif : noir #000, blanc #FFF, gris argenté #B8BCC2 (celui des fichiers).
   Sections sombres continues, sans coupure ; titres Archivo large (axe de largeur), texte Inter.
   Ni pastille au-dessus d'un titre, ni sur-titre en capitales, ni badge rond.
   Cette feuille se charge après site.css (composants communs : réservation, calendrier, formulaires),
   dont elle ne garde que la mécanique : toutes les surfaces passent en sombre.
   Animations en transform, opacity et clip-path seulement ; rien sous prefers-reduced-motion.
   ============================================================ */

@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url(/assets/fonts/archivo-v-latin.woff2) format("woff2"); }

html.final {
  --ag: #B8BCC2;                 /* gris argenté du logo */
  --ag-grad: linear-gradient(180deg, #FFFFFF 0%, #DADCE0 45%, #B8BCC2 100%);
  --s0: #000000;
  --s1: #0B0B0C;
  --s2: #111113;
  --s3: #18181B;
  --s4: #222226;
  --ln: rgba(255, 255, 255, .10);
  --ln2: rgba(255, 255, 255, .18);
  --t1: #FFFFFF;
  --t2: #A9ADB4;                 /* texte secondaire : 9:1 sur noir */
  --t3: #8A8E96;                 /* aides et légendes : 6:1 sur noir */
  --red: #FF7466;
  --green: #6FD39A;
  --display: "Archivo", "Inter", ui-sans-serif, system-ui, sans-serif;
  /* Variables des composants communs (site.css), réglées sur le sombre */
  --ink: #FFFFFF; --ink-2: #A9ADB4; --line-l: rgba(255, 255, 255, .10); --line-d: rgba(255, 255, 255, .10);
  --light: #111113; --anth: #18181B; --anth-2: #222226; --on-dark-2: #A9ADB4; --silver: #B8BCC2;
  --hdr: 72px;
  background: #000; color-scheme: dark;
}
@media (min-width: 1200px) { html.final { --hdr: 84px; } }
.final body { background: #000; color: var(--t1); font-size: 16px; line-height: 1.65; }
.final ::selection { background: #FFFFFF; color: #000000; }
.final :focus-visible, .final .sheet :focus-visible, .final .card :focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
.final a { text-underline-offset: 3px; }

/* ---------- Typographie ---------- */
.f-display, .f-h1, .f-h2, .f-h3, .f-statement, .final .bk-h, .final .bk-sum-h, .final .done__t, .final .bk-soon__t, .final .card h2, .final .card h3, .final .callpop h2 {
  font-family: var(--display); font-stretch: 112%; font-weight: 640; letter-spacing: -.02em; font-variation-settings: normal; text-wrap: balance;
}
.f-display { font-size: clamp(2.35rem, 1.05rem + 5.6vw, 6rem); line-height: .98; max-width: 13ch; font-weight: 660; letter-spacing: -.03em; }
.f-display--page { font-size: clamp(2.2rem, 1.05rem + 4.6vw, 5rem); max-width: 15ch; }
.f-display--art { font-size: clamp(1.9rem, 1.05rem + 3.2vw, 3.9rem); max-width: 22ch; line-height: 1.04; }
.f-h1 { font-size: clamp(2.3rem, 1.15rem + 4.4vw, 4.8rem); line-height: 1; max-width: 18ch; letter-spacing: -.03em; }
.f-h1__line { display: block; margin-top: .45em; font-family: "Inter", sans-serif; font-stretch: 100%; font-size: .4em; font-weight: 400; letter-spacing: -.01em; line-height: 1.25; color: var(--t2); }
.f-h2 { font-size: clamp(1.95rem, 1.05rem + 3vw, 3.5rem); line-height: 1.02; max-width: 20ch; letter-spacing: -.025em; }
.final .h2.f-h2 { font-size: clamp(1.95rem, 1.05rem + 3vw, 3.5rem); font-weight: 640; letter-spacing: -.025em; line-height: 1.02; }
.f-h3 { font-size: clamp(1.1rem, 1rem + .35vw, 1.3rem); line-height: 1.22; font-stretch: 106%; font-weight: 620; letter-spacing: -.01em; }
.f-statement { font-size: clamp(2.2rem, .9rem + 4.6vw, 5.2rem); line-height: 1; max-width: 16ch; letter-spacing: -.03em; background: var(--ag-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.f-statement__lead { margin-top: 26px; }
.f-lead { font-size: clamp(1.04rem, .98rem + .32vw, 1.22rem); line-height: 1.55; max-width: 56ch; margin-top: 18px; }
.f-muted { color: var(--t2); }
.f-head { display: grid; gap: 14px; margin-bottom: clamp(32px, 5vw, 60px); max-width: 760px; }
.f-head p { max-width: 58ch; }
.f-head--row { max-width: none; align-items: end; }
@media (min-width: 900px) { .f-head--row { grid-template-columns: 1fr auto; } }
.final .link-arrow { color: #FFFFFF; border-bottom-color: rgba(255, 255, 255, .45); }
.final .link-arrow:hover { border-bottom-color: #FFFFFF; }
.mt-40 { margin-top: 40px; }

/* Titres d'ouverture : mot à mot (CSS seul, le titre reste un seul texte pour les lecteurs d'écran) */
.fw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; margin-bottom: -.06em; }
.fw > span { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .fw > span { animation: fw-in .95s cubic-bezier(.2, .7, .2, 1) both; }
  .fw:nth-child(2) > span { animation-delay: .06s; } .fw:nth-child(3) > span { animation-delay: .12s; } .fw:nth-child(4) > span { animation-delay: .18s; }
  .fw:nth-child(5) > span { animation-delay: .24s; } .fw:nth-child(6) > span { animation-delay: .3s; } .fw:nth-child(7) > span { animation-delay: .36s; } .fw:nth-child(n+8) > span { animation-delay: .42s; }
  .fx-intro-quick .fw > span { animation-delay: .4s; } .fx-intro-quick .fw:nth-child(2) > span { animation-delay: .46s; } .fx-intro-quick .fw:nth-child(n+3) > span { animation-delay: .52s; }
  .fx-intro-quick .f-hero__lead, .fx-intro-quick .f-hero__cta { animation-delay: .7s; }
  .fx-intro-full .fw > span { animation-delay: 1.6s; }
  .fx-intro-full .fw:nth-child(2) > span { animation-delay: 1.66s; } .fx-intro-full .fw:nth-child(3) > span { animation-delay: 1.72s; } .fx-intro-full .fw:nth-child(n+4) > span { animation-delay: 1.78s; }
}
@keyframes fw-in { from { transform: translateY(105%); } to { transform: none; } }

/* ---------- Boutons ---------- */
.final .btn { font-weight: 500; letter-spacing: -.005em; }
.final .btn--light, .final .btn--dark { background: #FFFFFF; color: #000000; border-color: #FFFFFF; }
.final .btn--light:hover, .final .btn--dark:hover { background: #E4E6E9; border-color: #E4E6E9; }
.final .btn--light::after, .final .btn--dark::after { background: linear-gradient(90deg, transparent, rgba(184, 188, 194, .55), transparent) !important; }
.final .btn--ghost, .final .btn--line { background: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, .32); }
.final .btn--ghost:hover, .final .btn--line:hover { background: rgba(255, 255, 255, .06); border-color: #FFFFFF; }
.final .btn.is-loading::after { border-color: rgba(0, 0, 0, .25); border-top-color: #000; }

/* ---------- En-tête ---------- */
.fh { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--hdr); color: #FFFFFF; background: rgba(0, 0, 0, .94); border-bottom: 1px solid var(--ln);
  background-origin: border-box; background-repeat: no-repeat; transition: background-color .35s var(--ease), border-color .35s var(--ease); }
.fh--over:not(.is-scrolled) { background: linear-gradient(180deg, rgba(0, 0, 0, .62), rgba(0, 0, 0, 0)); border-bottom-color: transparent; }
@media (hover: hover) { .fh.is-scrolled, .fh:not(.fh--over) { background: rgba(0, 0, 0, .82); -webkit-backdrop-filter: saturate(1.2) blur(14px); backdrop-filter: saturate(1.2) blur(14px); } }
.fh__in { height: 100%; display: flex; align-items: center; gap: 20px; }
.fh__logo { display: inline-flex; align-items: center; min-height: 44px; flex: none; text-decoration: none; }
/* Logo principal (charte du 15/10, script et silhouette de la Porsche), blanc détouré : « MOTORS » reste lisible
   (environ 5,3 px de haut sur mobile, 6,7 px sur ordinateur, comme la version A). */
.f-logo { display: block; width: auto; height: 46px; aspect-ratio: 1900 / 427; }
@media (min-width: 1080px) { .f-logo { height: 50px; } }
@media (min-width: 1200px) { .f-logo { height: 58px; } }
.fh__nav { display: none; margin-left: auto; }
.fh__nav ul { list-style: none; display: flex; gap: 2px; }
.fh__nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; font-size: .94rem; font-weight: 500; color: rgba(255, 255, 255, .78); text-decoration: none; transition: color .2s var(--ease); }
.fh__nav a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 8px; height: 1px; background: var(--ag); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.fh__nav a:hover, .fh__nav a[aria-current="page"] { color: #FFFFFF; }
.fh__nav a:hover::after, .fh__nav a[aria-current="page"]::after { transform: scaleX(1); }
.fh__cta { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.fh__tel { display: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; color: rgba(255, 255, 255, .82); text-decoration: none; font-size: .92rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.fh__tel svg { width: 17px; height: 17px; }
.fh__tel:hover { color: #FFFFFF; }
.fh__book { display: none; }
.fh__burger { width: 46px; height: 46px; margin-right: -10px; display: inline-grid; place-content: center; gap: 7px; border: 0; background: none; color: #FFFFFF; cursor: pointer; border-radius: 12px; }
.fh__burger span { display: block; width: 24px; height: 1.5px; background: currentColor; transition: transform .3s var(--ease); }
.fh__burger span + span { width: 16px; margin-left: 8px; }
.fh__burger:hover span + span { transform: translateX(-8px) scaleX(1.5); }
@media (min-width: 640px) { .fh__book { display: inline-flex; } }
@media (min-width: 1080px) { .fh__nav { display: block; } .fh__cta { margin-left: 12px; } .fh__burger { display: none; } }
@media (min-width: 1320px) { .fh__tel { display: inline-flex; } }
/* Espace client (Corsiva OS en marque blanche, 22/10/2026) : bouton discret à côté de « Réserver », avec son nom dès 640 px
   (mesuré : tient sans rien comprimer jusqu'à 1080 px) ; pictogramme seul sur téléphone, son nom restant lu par les
   lecteurs d'écran. Aussi dans le menu mobile et le pied de page. */
.fh__client { gap: 8px; padding: 0 15px; }
.fh__client svg, .fm__client svg, .ff__client svg { width: 18px; height: 18px; }
/* Téléphone : pictogramme seul, sans cercle ni contour (comme le bouton du menu), jamais un badge rond. */
@media (max-width: 639px) {
  .final .fh__cta .fh__client { width: 44px; min-height: 44px; padding: 0; border-color: transparent; background: none; }
  .fh__client svg { width: 22px; height: 22px; }
  .fh__client span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- Menu mobile : opaque dès la première image (jamais de blanc), seul son contenu s'anime ---------- */
.fm { position: fixed; inset: 0; z-index: 70; background: #000000; color: #FFFFFF; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
.fm[hidden] { display: none; }
.fm__top { flex: none; height: var(--hdr); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--ln); max-width: none; }
.fm__close { width: 46px; height: 46px; margin-right: -10px; display: grid; place-items: center; border: 0; background: none; color: #FFFFFF; cursor: pointer; border-radius: 12px; }
.fm__close svg { width: 24px; height: 24px; }
.fm__body { display: flex; flex-direction: column; flex: 1; gap: 28px; padding-top: 12px; }
.fm__nav { list-style: none; }
.fm__nav a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; border-bottom: 1px solid var(--ln); color: #FFFFFF; text-decoration: none;
  font-family: var(--display); font-stretch: 112%; font-weight: 600; font-size: clamp(1.45rem, 1.1rem + 2vw, 1.9rem); letter-spacing: -.02em; }
.fm__nav a svg { width: 20px; height: 20px; color: var(--t3); transition: transform .25s var(--ease), color .25s; }
.fm__nav a:hover svg, .fm__nav a[aria-current="page"] svg { color: #FFFFFF; transform: translateX(3px); }
.fm__nav a[aria-current="page"] { color: var(--ag); }
.fm__h { font-size: .9rem; color: var(--t2); margin-bottom: 4px; }
.fm__cities ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0 18px; }
.fm__cities a { display: inline-flex; align-items: center; min-height: 44px; color: #FFFFFF; text-decoration: none; font-weight: 500; }
.fm__foot { margin-top: auto; display: grid; gap: 10px; }
.fm__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fm__social, .fm__legal { display: flex; flex-wrap: wrap; gap: 0 18px; }
.fm__social a, .fm__legal a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.fm__social a { color: #FFFFFF; font-weight: 500; }
.fm__legal a { color: var(--t2); font-size: .85rem; }
@media (prefers-reduced-motion: no-preference) {
  .fm:not([hidden]) .fm__nav li { animation: rise .5s var(--ease) both; }
  .fm:not([hidden]) .fm__nav li:nth-child(2) { animation-delay: .03s; } .fm:not([hidden]) .fm__nav li:nth-child(3) { animation-delay: .06s; }
  .fm:not([hidden]) .fm__nav li:nth-child(4) { animation-delay: .09s; } .fm:not([hidden]) .fm__nav li:nth-child(5) { animation-delay: .12s; }
  .fm:not([hidden]) .fm__nav li:nth-child(6) { animation-delay: .15s; } .fm:not([hidden]) .fm__nav li:nth-child(n+7) { animation-delay: .18s; }
  .fm:not([hidden]) .fm__cities, .fm:not([hidden]) .fm__foot { animation: rise .5s var(--ease) .2s both; }
}
@media (min-width: 1080px) { .fm { display: none !important; } }

/* ---------- Écran de chargement : le LOGO PRINCIPAL argenté, avec un reflet métallique (intro.js) ----------
   Choix v3 (19/10/2026) : une seule identité à l'ouverture, celle qu'Ahmed a choisie comme principale. Le logo est le
   fichier « argenté sur noir » détouré, jamais redessiné. Seuls bougent : un masque en dégradé qui le dévoile de gauche
   à droite (le sens de l'écriture), l'opacité, une légère transformation, et un reflet clair vu à travers un masque
   tiré du même fichier (le reflet ne touche que le métal, et plus fort là où le métal est clair). Au repos, c'est
   exactement le logo du fichier. */
.f-intro { display: none; }
.fx-intro .f-intro, .pm-leave .f-intro { position: fixed; inset: 0; z-index: 200; display: grid; place-content: center; justify-items: center; gap: 28px; background: #000000; pointer-events: none; }
.ld { position: relative; width: min(520px, 78vw); aspect-ratio: 1902 / 427; }
.ld__logo { position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  -webkit-mask-image: linear-gradient(100deg, #000 44%, transparent 56%); mask-image: linear-gradient(100deg, #000 44%, transparent 56%);
  -webkit-mask-size: 260% 100%; mask-size: 260% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 0% 0; mask-position: 0% 0; }
.ld__glint { position: absolute; inset: 0; overflow: hidden;
  -webkit-mask-image: url(/assets/brand/principal-argent-960.webp); mask-image: url(/assets/brand/principal-argent-960.webp);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.ld__sheen { position: absolute; top: -40%; bottom: -40%; left: -40%; width: 30%; transform: translateX(0) skewX(-18deg); opacity: 0;
  background: linear-gradient(90deg, rgba(255, 252, 245, 0) 0%, rgba(243, 238, 228, .5) 32%, #FFFDF8 50%, rgba(243, 238, 228, .5) 68%, rgba(255, 252, 245, 0) 100%); }
.f-intro__line { display: block; width: min(380px, 62vw); height: 1px; background: linear-gradient(90deg, rgba(184, 188, 194, 0), #B8BCC2 30%, #F3EEE4 50%, #B8BCC2 70%, rgba(184, 188, 194, 0)); transform: scaleX(0); transform-origin: center; }
/* Version complète : le logo se dévoile dans le sens de l'écriture, puis le reflet passe sur le métal */
.fx-intro-full .ld__logo { animation: ld-write 1s cubic-bezier(.55, .1, .25, 1) both, ld-in .9s cubic-bezier(.2, .7, .2, 1) both; }
.fx-intro-full .ld__sheen { animation: ld-sheen .8s cubic-bezier(.45, 0, .25, 1) .85s both; }
.fx-intro-full .f-intro__line { animation: ld-line 1.1s cubic-bezier(.65, 0, .35, 1) .3s both; }
/* Version courte (pages suivantes) et départ vers une autre page : le logo est posé, un reflet rapide */
.fx-intro-quick .ld__sheen, .pm-leave .ld__sheen { animation: ld-sheen .55s cubic-bezier(.45, 0, .25, 1) .05s both; }
.fx-intro-quick .f-intro__line, .pm-leave .f-intro__line, .fx-intro-static .f-intro__line { transform: none; }
.pm-leave .f-intro { animation: ld-fade .26s ease both; }
.fx-intro-out .f-intro { opacity: 0; transition: opacity .45s var(--ease); }
.fx-intro-static.fx-intro-out .f-intro { transition: none; }
@keyframes ld-write { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0% 0; mask-position: 0% 0; } }
@keyframes ld-in { from { opacity: 0; transform: translateY(4%) scale(.985); } 35% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes ld-sheen { 0% { opacity: 0; transform: translateX(0) skewX(-18deg); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(560%) skewX(-18deg); } }
@keyframes ld-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ld-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .f-intro *, .f-intro { animation: none !important; transition: none !important; } .ld__sheen { display: none; } }

/* ---------- Monogramme PM, logo complémentaire : trois usages discrets ----------
   1. Filigrane derrière la signature (accueil, À propos) ; 2. séparateur entre deux sections sombres (accueil, fin des
   articles) ; 3. signature du bas de page. Le tracé du fichier, en gris argenté, jamais redessiné ni animé. */
.f-sec--wm { overflow: hidden; isolation: isolate; }
.f-wm { position: absolute; z-index: -1; right: -6%; bottom: -10%; width: min(92vw, 980px); line-height: 0; opacity: .045; pointer-events: none; }
.f-wm__img { display: block; width: 100%; height: auto; }
@media (max-width: 767px) { .f-wm { right: -18%; bottom: -4%; width: 118vw; opacity: .04; } }
.f-sep { display: flex; align-items: center; justify-content: center; gap: 22px; width: min(560px, calc(100% - 32px)); margin: 0 auto; line-height: 0; }
.f-sep::before, .f-sep::after { content: ""; flex: 1; height: 1px; }
.f-sep::before { background: linear-gradient(90deg, rgba(184, 188, 194, 0), rgba(184, 188, 194, .38)); }
.f-sep::after { background: linear-gradient(90deg, rgba(184, 188, 194, .38), rgba(184, 188, 194, 0)); }
.f-sep__img { display: block; width: auto; height: 16px; opacity: .6; }
.f-art__main .f-sep { margin: clamp(40px, 5vw, 56px) auto; }

/* ---------- Sections : sombres et continues ---------- */
.f-sec { position: relative; padding: clamp(72px, 9vw, 144px) 0; }
.f-sec--tight { padding: clamp(52px, 6.5vw, 100px) 0; }
.f-sec--top { padding-top: clamp(28px, 4vw, 52px); }
.f-narrow > * { max-width: 860px; }
.final .faq { border-top-color: var(--ln); }
.final .faq details { border-bottom-color: var(--ln); }
.final .faq summary { font-weight: 500; font-size: clamp(1.02rem, .98rem + .3vw, 1.18rem); min-height: 44px; }
.final .faq summary:hover { color: #FFFFFF; }
.final .faq .faq__a { color: var(--t2); }
.final .crumbs { color: var(--t2); margin-bottom: 10px; }
.final .crumbs a:hover { color: #FFFFFF; }

/* En-tête de page courte */
.f-phead { position: relative; padding: calc(var(--hdr) + clamp(32px, 6vw, 88px)) 0 clamp(28px, 4vw, 56px); }
.f-phead::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(184, 188, 194, 0), rgba(184, 188, 194, .4), rgba(184, 188, 194, 0)); }
.f-phead--car::after, .f-phead--resa::after { display: none; }
.f-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.f-chips li { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--ln2); font-size: .85rem; font-weight: 500; color: rgba(255, 255, 255, .9); }
.f-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 26px; }
.f-trust li { display: inline-flex; align-items: center; gap: 10px; font-size: .93rem; color: rgba(255, 255, 255, .88); }
.f-trust svg { width: 18px; height: 18px; color: var(--ag); flex: none; }

/* ---------- Ouverture (accueil et pages à photo) ---------- */
.f-hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; background: #000; }
.f-hero__media { position: absolute; inset: 0; z-index: -2; }
.f-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.f-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 24%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .78) 72%, #000 100%); }
.f-hero__in { padding-top: calc(var(--hdr) + 40px); padding-bottom: clamp(96px, 14vh, 150px); }
.f-hero__lead { color: rgba(255, 255, 255, .88); max-width: 40ch; }
.f-hero__cta { margin-top: 30px; }
@media (min-width: 900px) {
  .f-hero::after { background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 22%), linear-gradient(90deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .66) 38%, rgba(0, 0, 0, .18) 62%, rgba(0, 0, 0, 0) 74%), linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 42%); }
  .f-hero__media img { object-position: 62% 50%; }
}
@media (min-width: 1024px) { .f-hero:not(.f-hero--page) { min-height: max(680px, min(100svh, 980px)); } .f-hero:not(.f-hero--page) .f-hero__in { padding-bottom: 150px; } }
@media (prefers-reduced-motion: no-preference) {
  .f-hero__media img { animation: f-zoom 1.8s var(--ease) both; }
  .f-hero__lead, .f-hero__cta { animation: rise .8s var(--ease) .35s both; }
  .fx-intro-full .f-hero__media img { animation-delay: 1.2s; }
  .fx-intro-full .f-hero__lead, .fx-intro-full .f-hero__cta { animation-delay: 1.9s; }
}
@keyframes f-zoom { from { transform: scale(1.04); } to { transform: none; } }
.f-hero--page { min-height: 78svh; }
.f-hero--page .f-hero__in { padding-bottom: clamp(48px, 8vh, 96px); }
.f-hero--art { min-height: 66svh; }
.f-art-meta { margin-top: 18px; color: rgba(255, 255, 255, .78); font-size: .93rem; font-variant-numeric: tabular-nums; }
/* Mobile : photo en haut, texte dessous sur le noir (lisibilité) */
@media (max-width: 767px) {
  .f-hero:not(.f-hero--page) { min-height: 0; height: auto; display: block; }
  .f-hero:not(.f-hero--page) .f-hero__media { position: relative; z-index: 0; height: 58svh; min-height: 360px; }
  .f-hero:not(.f-hero--page) .f-hero__media::after, .f-hero--page .f-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, 0) 26%, rgba(0, 0, 0, 0) 55%, #000 100%); }
  .f-hero::after { display: none; }
  .f-hero:not(.f-hero--page) .f-hero__in { position: relative; margin-top: -120px; padding-top: 0; padding-bottom: 92px; }
  .f-hero--page { display: block; min-height: 0; }
  .f-hero--page .f-hero__media { position: relative; z-index: 0; height: 46svh; min-height: 300px; }
  .f-hero--page .f-hero__in { position: relative; margin-top: -84px; padding-top: 0; padding-bottom: 40px; }
  .f-hero--page .crumbs { display: none; }
  .f-hero__cta .btn { flex: 1 1 auto; }
}

/* ---------- Carte de dates (accueil, pages villes) : verre sombre ---------- */
.final .beam, .final .sheen { display: none; } /* décors de la version Boostée : absents ici */
.final .bkbar { margin-top: -64px; }
.final .bk-card { background: rgba(14, 14, 16, .9); color: #FFFFFF; border: 1px solid var(--ln2); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); }
.final .bk-f { background: var(--s3); }
.final .bk-f:hover { background: var(--s4); }
.final .bk-f:focus-within { background: var(--s4); box-shadow: inset 0 0 0 1.5px #FFFFFF; }
.final .bk-l, .final .bk-s, .final .search-note { color: var(--t2); }
.final .bk-sel, .final .datefield { color: #FFFFFF; }
.final .bk-sel { background-image: linear-gradient(45deg, transparent 50%, #A9ADB4 50%), linear-gradient(135deg, #A9ADB4 50%, transparent 50%); }
.final .bk-sel option, .final .select option { background: #18181B; color: #FFFFFF; }
.final .df-text.placeholder { color: var(--t2); }
.final .bk-total { font-family: var(--display); font-stretch: 108%; color: #FFFFFF; }
.final .bk-result { border-top-color: var(--ln); }
.final .bk-result p { color: var(--t2); }
.final .bk-result strong { color: #FFFFFF; }
.final .search-note.err { color: var(--red); }
@media (max-width: 767px) { .final .bkbar { margin-top: -54px; } .final .f-hero--page + .bkbar { margin-top: -10px; } }
@media (min-width: 768px) { .final .f-hero--page + .bkbar { margin-top: -40px; } }

/* ---------- Calendrier (commun aux réservations) ---------- */
.final .cal-pop { background: #141416; color: #FFFFFF; box-shadow: 0 0 0 1px var(--ln2), 0 30px 80px -24px rgba(0, 0, 0, .9); }
@media (max-width: 899px) { .final .cal-pop { box-shadow: 0 0 0 1px var(--ln2); } }
.final .cal-nav { background: var(--s3); color: #FFFFFF; border-color: var(--ln); }
.final .cal-nav:hover:not([disabled]) { border-color: rgba(255, 255, 255, .5); }
.final .cal-wd span { color: var(--t3); }
.final .cal-day { color: #FFFFFF; }
.final .cal-day:hover:not([disabled]):not(.is-start):not(.is-end) { background: var(--s4); }
.final .cal-day[disabled] { color: #4E5158; }
.final .cal-day.is-between, .final .cal-day.is-preview { background: #26262B; color: #FFFFFF; }
.final .cal-day.is-preview { background: #1F1F23; }
.final .cal-day.is-start, .final .cal-day.is-end { background: #FFFFFF; color: #000000; }
.final .cal-day.is-today:not(.is-start):not(.is-end) { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7); }
.final .cal-day.is-busy, .final .cal-day.is-busy[disabled] { color: #6E727A; background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .09) 0 3px, transparent 3px 7px); }
.final .cal-legend { color: var(--t2); }
.final .cal-legend .lg-sel { background: #FFFFFF; }
.final .cal-legend .lg-range { background: #26262B; }
.final .cal-legend .lg-busy { background-color: transparent; background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .3) 0 2px, transparent 2px 5px); box-shadow: inset 0 0 0 1px var(--ln2); }
.final .cal-hint { color: var(--t2); }
.final .cal-hint strong, .final .cal-clear { color: #FFFFFF; }
.final .cal-times { border-top-color: var(--ln); }
.final .cal-times label { color: var(--t2); }
.final .cal-times select { background-color: var(--s3); color: #FFFFFF; border-color: var(--ln2); }

/* ---------- Champs ---------- */
.final .input, .final .select, .final .textarea { background-color: var(--s2); color: #FFFFFF; border-color: #2E2E33; }
.final .input::placeholder, .final .textarea::placeholder { color: #7E828A; }
.final .input:focus, .final .select:focus, .final .textarea:focus { border-color: #B8BCC2; box-shadow: 0 0 0 3px rgba(184, 188, 194, .2); }
.final .input[aria-invalid="true"], .final .select[aria-invalid="true"] { border-color: var(--red); }
.final .select { background-image: linear-gradient(45deg, transparent 50%, #A9ADB4 50%), linear-gradient(135deg, #A9ADB4 50%, transparent 50%); }
.final .field > span, .final .field__l, .final .field legend, .final .label { color: #E6E7E9; }
.final .field .hint { color: var(--t3); }
.final .check { color: #D7D9DD; }
.final .check input, .final .f-choice input { accent-color: #FFFFFF; }
.final .form-note { color: var(--t2); }
.final .err, .final .f-err { color: var(--red); }
.final .f-err::before { background: var(--red); color: #000; border-radius: 4px; }
.final .field.is-err .input { border-color: var(--red); box-shadow: 0 0 0 3px rgba(255, 116, 102, .16); }
.final .field.is-ok .input { border-color: #3D9A64; }
.final .field.is-ok .input:not([type="date"]) { background: var(--s2) url(/assets/brand/ui-check.svg) right 14px center / 18px 18px no-repeat; }
.final .check-wrap.is-err .check input { outline-color: var(--red); }
.final input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); }
.final .card { background: var(--s1); color: #FFFFFF; border-color: var(--ln); }

/* ---------- Fiche de location (fiche du véhicule, page Réservation, tiroir) ---------- */
.final .sheet { background: transparent; color: #FFFFFF; padding: 0 0 clamp(56px, 7vw, 96px); }
.final .sheet__panel { background: var(--s1); border-color: var(--ln); box-shadow: none; border-radius: 26px; }
.final .sheet__panel::before { background: linear-gradient(90deg, rgba(184, 188, 194, 0), rgba(184, 188, 194, .65), rgba(184, 188, 194, 0)); }
.final .bk-head { border-bottom-color: var(--ln); }
.final .bk-carchip:hover { background: var(--s3); }
.final .bk-car-title { font-family: var(--display); font-stretch: 108%; font-weight: 620; }
.final .bk-car-txt small { color: var(--t2); }
.final .bk-share, .final .bk-x { background: transparent; color: #FFFFFF; border: 1px solid var(--ln2); }
.final .bk-share:hover, .final .bk-x:hover { border-color: #FFFFFF; }
.final .bk-x { border-radius: 12px; }
.final .bk-sec { border-top-color: var(--ln); gap: 16px; padding: 28px 0; }
.final .bk-h { font-size: clamp(1.15rem, 1.05rem + .4vw, 1.35rem); gap: 14px; align-items: baseline; }
/* Numéros de section : chiffres argentés suivis d'un filet (pas de pastille) */
.final .bk-n { width: auto; height: auto; display: inline-flex; align-items: center; gap: 12px; background: none; box-shadow: none; border-radius: 0; color: var(--ag); font-size: .95rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.final .bk-n::after { content: ""; width: 18px; height: 1px; background: var(--ln2); }
.final .bk-sub { color: var(--t2); margin-top: -8px; }
.final .bk-sub strong { color: #FFFFFF; }
.final .fchips__h { color: #E6E7E9; }
.final .fchip { background: var(--s2); border-color: var(--ln); }
.final .fchip b, .final .fchip small, .final .fchips__cap { color: var(--t2); }
.final .fchip span { font-family: var(--display); font-stretch: 106%; color: #FFFFFF; }
.final .fchip.is-on { background: #FFFFFF; border-color: #FFFFFF; box-shadow: none; }
.final .fchip.is-on span { color: #000; }
.final .fchip.is-on b, .final .fchip.is-on small { color: #3C3F45; }
.final .ret { background: var(--s2); color: #FFFFFF; }
.final .dep-info { background: var(--s2); border-color: var(--ln); color: var(--t2); }
.final .dep-info__ic { color: #FFFFFF; }
.final .dep-recap__row { background: var(--s2); }
.final .dep-recap__ic { background: var(--s4); color: var(--ag); }
.final .dep-recap__txt small { color: var(--t2); }
.final .ins-inc { background: var(--s2); border: 1px solid var(--ln); }
.final .ins-inc__ic { background: var(--s4); }
.final .bk-soon { border-top-color: var(--ln); }
.final .bk-soon p { color: var(--t2); }
.final .bk-main > .loading { border-top-color: var(--ln); color: var(--t2); }
.final .spin { border-color: #2A2A2F; border-top-color: #FFFFFF; }
.final .up { background: var(--s2); border-color: #3A3A40; }
.final .up svg { color: var(--t2); }
.final .up span { color: var(--t2); }
.final .up strong { color: #FFFFFF; }
.final .up:hover { border-color: #6E727A; }
.final .up.is-set { background: var(--s3); border-color: #FFFFFF; }
.final .up.is-set svg { color: #FFFFFF; }
.final .up.is-miss { border-color: var(--red); background: rgba(255, 116, 102, .06); }
.final .up:focus-within { outline-color: #FFFFFF; }
.final .docs-group__h svg, .final .docs-group__h small { color: var(--t2); }
.final .opt { background: var(--s2); border-color: #2E2E33; }
.final .opt__box small { color: var(--t2); }
.final .opt:has(input:checked) { background: var(--s3); border-color: #FFFFFF; box-shadow: inset 0 0 0 1px #FFFFFF; }
.final .opt:has(input:focus-visible) { outline-color: #FFFFFF; }
.final .drv-block { background: var(--s2); border: 1px solid var(--ln); }
.final .notice { background: rgba(245, 180, 60, .08); border-color: rgba(245, 180, 60, .35); color: #F3D9A4; }
.final .notice--info { background: var(--s2); border-color: var(--ln); color: #FFFFFF; }
.final .notice--err { background: rgba(255, 116, 102, .08); border-color: rgba(255, 116, 102, .4); color: #FFC2BA; }
.final .notice--ok { background: rgba(111, 211, 154, .08); border-color: rgba(111, 211, 154, .35); color: #BFEBD1; }
/* Étapes : barre de progression, repères carrés (pas de pastille ronde) */
.final .bk-steps { background: var(--s2); border: 1px solid var(--ln); }
.final .bk-steps a { color: var(--t2); }
.final .bk-steps a:hover, .final .bk-steps a[aria-current="step"] { color: #FFFFFF; }
.final .bk-steps__dot { background: transparent; border-color: #3A3A40; border-radius: 7px; }
.final .bk-steps a[aria-current="step"] .bk-steps__dot { border-color: #FFFFFF; box-shadow: 0 0 0 3px rgba(255, 255, 255, .1); }
.final .bk-steps li.is-done .bk-steps__dot { background: #FFFFFF; border-color: #FFFFFF; color: #000; }
.final .bk-steps__bar { background: var(--s4); }
.final .bk-steps__bar > span { background: linear-gradient(90deg, #6E727A, #B8BCC2 60%, #FFFFFF); }
@media (max-width: 1023px) { .final .bk-steps { background: rgba(17, 17, 19, .96); box-shadow: 0 12px 26px -18px rgba(0, 0, 0, .9); } }
/* Six étapes sur un téléphone : chaque étape prend sa part de la largeur, rien ne déborde. Le véhicule (choisi
   d'office quand l'OS n'en propose qu'un) quitte la barre sous 480 px ; sa section reste dans la page. */
.final .bk-steps ol { gap: 2px; flex: 1 1 auto; width: 100%; }
.final .bk-steps li { flex: 1 1 0; min-width: 0; }
.final .bk-steps a { min-width: 0; padding: 4px 0; }
.final .bk-steps__t { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 480px) { .final .bk-steps li[data-step="vehicle"] { display: none; } .final .bk-steps a { font-size: .72rem; } }
@media (max-width: 380px) { .final .bk-steps { padding: 8px 6px 14px; } .final .bk-steps a { font-size: .66rem; letter-spacing: -.01em; } }
/* Récapitulatif */
.final .bk-summary { background: var(--s2); border-color: var(--ln); }
.final .bk-summary .beam { display: none; }
.final .sum-trip { background: var(--s1); border-color: var(--ln); }
.final .sum-trip > div + div { border-top-color: var(--ln); }
.final .sum-trip dt, .final .bk-sum-dates, .final .msl, .final .msum-ttc, .final .msum-offer, .final .msum-row, .final .pay-note, .final .quote-state { color: var(--t2); }
.final .msl strong, .final .msum-row > span:last-child { color: #FFFFFF; }
.final .msl--disc, .final .msl--disc strong, .final .msum-offer strong { color: var(--green); }
.final .msum-total { border-top-color: var(--ln); }
.final .msum-total strong { font-family: var(--display); font-stretch: 108%; font-weight: 640; color: #FFFFFF; }
.final .msum-total strong:empty, .final .msum-total strong.is-empty { color: var(--t2); }
.final .sum-pay { background: #000; border: 1px solid var(--ln); }
.final .pay-none { background: var(--s1); border-color: var(--ln); color: var(--t2); }
.final .pay-none svg { color: var(--green); }
.final .pay-none strong { color: #FFFFFF; }
/* Confirmation */
.final .done__check { width: auto; height: auto; background: none; color: var(--green); justify-content: start; }
.final .done__check svg { width: 34px; height: 34px; }
.final .done__steps, .final .done .muted { color: var(--t2); }
.final .doclist li.ok { color: var(--green); }
.final .doclist li.err { color: var(--red); }
.final .toast { background: #FFFFFF; color: #000; }
.final .bk-modal__panel { background: var(--s1); color: #FFFFFF; border: 1px solid var(--ln); }
.final .bk-modal__back { background: rgba(0, 0, 0, .78); }
.final .sheet__panel--modal .bk-head { background: rgba(11, 11, 12, .96); }
.final .sbar { background: rgba(10, 10, 12, .96); border-color: var(--ln2); }
.final .lb__btn { background: rgba(24, 24, 27, .85); border-color: var(--ln2); }
.final .mg { background: #000; }

/* Page Réservation redessinée : choix du véhicule, grille posée sur le noir */
.f-phead--resa { padding-bottom: clamp(28px, 4vw, 44px); }
.vchoose { display: grid; gap: 10px; }
.vopt { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 10px 16px 10px 10px; border-radius: 18px; border: 1px solid #2E2E33; background: var(--s2); cursor: pointer; transition: border-color .2s var(--ease), background-color .2s var(--ease); }
.vopt:hover { border-color: #6E727A; }
.vopt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.vopt:has(input:checked) { border-color: #FFFFFF; box-shadow: inset 0 0 0 1px #FFFFFF; background: var(--s3); }
.vopt:has(input:focus-visible) { outline: 2px solid #FFFFFF; outline-offset: 3px; }
.vopt__img { width: 112px; height: 76px; object-fit: cover; border-radius: 12px; background: #000; }
.vopt__box { display: grid; gap: 3px; min-width: 0; }
.vopt__t { font-family: var(--display); font-stretch: 108%; font-weight: 620; font-size: 1.12rem; letter-spacing: -.01em; line-height: 1.2; overflow-wrap: anywhere; }
.vopt__specs, .vopt__facts { font-size: .86rem; color: var(--t2); overflow-wrap: anywhere; }
.vopt__facts { color: #D7D9DD; }
.vopt__state { font-size: .84rem; font-weight: 600; color: var(--t2); }
.vopt:has(input:checked) .vopt__state { color: #FFFFFF; }
@media (max-width: 560px) {
  .vopt { grid-template-columns: 88px minmax(0, 1fr); padding-right: 12px; align-items: start; }
  .vopt__img { width: 88px; height: 64px; }
  .vopt__state { grid-column: 2; }
}
@media (max-width: 380px) {
  .vopt { grid-template-columns: minmax(0, 1fr); padding: 10px; }
  .vopt__img { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .vopt__state { grid-column: 1; }
}
@media (min-width: 1024px) { .f-phead--resa + .sheet .bk-body { grid-template-columns: minmax(0, 1fr) 380px; } .f-phead--resa + .sheet .bk-summary { grid-row: 1 / span 2; top: calc(var(--hdr) + 18px); } }

/* ---------- Statistiques ---------- */
.f-stats { list-style: none; margin-top: clamp(40px, 6vw, 80px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--ln); }
.f-stats--flush { margin-top: 0; }
.f-stats li { padding: 24px 12px 6px 0; }
.f-stats__n { display: block; font-family: var(--display); font-stretch: 110%; font-weight: 640; font-size: clamp(2rem, .9rem + 3.6vw, 4.2rem); letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.f-stats__l { display: block; margin-top: 10px; font-size: .9rem; line-height: 1.4; color: var(--t2); max-width: 24ch; }
@media (min-width: 900px) {
  .f-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .f-stats li { padding: 32px 24px 0; border-left: 1px solid var(--ln); }
  .f-stats li:first-child { padding-left: 0; border-left: 0; }
}

/* ---------- Véhicule mis en avant, aperçus ---------- */
.f-feature, .f-teaser { display: grid; gap: 32px; align-items: center; }
.f-feature__media, .f-teaser__media { position: relative; display: block; border-radius: 22px; overflow: hidden; aspect-ratio: 3 / 2; background: var(--s2); }
.f-feature__media img, .f-teaser__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.f-feature__media::after, .f-teaser__media::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--ln); pointer-events: none; }
@media (hover: hover) { .f-feature__media:hover img { transform: scale(1.025); } }
.f-feature__body > p, .f-teaser__body > p { margin-top: 16px; max-width: 52ch; }
.f-feature__body .btn-row, .f-teaser__body .btn-row { margin-top: 28px; }
@media (min-width: 960px) { .f-feature { grid-template-columns: 7fr 5fr; gap: 64px; } .f-teaser { grid-template-columns: 6fr 6fr; gap: 64px; } }
.f-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin: 26px 0 0; }
.f-specs div { padding: 13px 0; border-top: 1px solid var(--ln); }
.f-specs dt { font-size: .8rem; color: var(--t2); }
.f-specs dd { margin: 2px 0 0; font-weight: 500; }

/* ---------- Grille tarifaire ---------- */
.f-prices__list { list-style: none; border-top: 1px solid var(--ln); }
.f-prices__list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "f p" "k p"; align-items: center; column-gap: 20px; row-gap: 2px; padding: 20px 0; border-bottom: 1px solid var(--ln); transition: background-color .25s var(--ease); }
.f-prices__f { grid-area: f; font-family: var(--display); font-stretch: 108%; font-weight: 600; font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem); letter-spacing: -.01em; }
.f-prices__km { grid-area: k; font-size: .9rem; color: var(--t2); white-space: nowrap; }
.f-prices__p { grid-area: p; justify-self: end; font-family: var(--display); font-stretch: 110%; font-weight: 640; font-size: clamp(1.45rem, 1.05rem + 1.4vw, 2.3rem); letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.f-prices__p small { margin-left: 6px; font-family: "Inter", sans-serif; font-stretch: 100%; font-size: .38em; font-weight: 500; letter-spacing: 0; color: var(--t2); }
@media (min-width: 768px) {
  .f-prices__list li { grid-template-columns: minmax(0, 1fr) 220px 200px; grid-template-areas: "f k p"; padding: 24px 8px; }
  .f-prices__km { font-size: .95rem; }
}
@media (hover: hover) { .f-prices__list li:hover { background: rgba(255, 255, 255, .025); } }
.f-prices__foot { margin-top: 28px; display: grid; gap: 22px; align-items: center; }
.f-prices__foot p { max-width: 64ch; font-size: .92rem; }
@media (min-width: 900px) { .f-prices__foot { grid-template-columns: 1fr auto; gap: 48px; } }
/* Grille du 20/10/2026 : prix par jour, précision de la formule, lien vers le barème des km supplémentaires. */
.f-prices__list li { grid-template-areas: "f p" "k p" "d p"; }
.f-prices__f small { display: block; margin-top: 2px; font-family: "Inter", sans-serif; font-stretch: 100%; font-size: .78rem; font-weight: 450; letter-spacing: 0; color: var(--t3); }
.f-prices__d { grid-area: d; font-size: .84rem; color: var(--t3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.f-prices__km-link { color: var(--t1); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ag); }
@media (min-width: 768px) {
  .f-prices__list li { grid-template-columns: minmax(0, 1fr) 150px 170px 180px; grid-template-areas: "f k d p"; }
  .f-prices__d { font-size: .9rem; }
}
@media (min-width: 1024px) { .f-prices__list li { grid-template-columns: minmax(0, 1fr) 190px 200px 200px; } }

/* ---------- Kilomètres supplémentaires : barème, exemples et calculateur (km.js) ---------- */
.km-grid { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (min-width: 960px) { .km-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }
.km-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.km-table th, .km-table td { padding: 14px 0; border-bottom: 1px solid var(--ln); text-align: left; vertical-align: baseline; }
.km-table thead th { padding-top: 0; font-size: .8rem; font-weight: 500; color: var(--t3); border-bottom-color: var(--ln2); }
.km-table tbody th { font-weight: 500; color: var(--t1); font-size: .95rem; }
.km-table td { text-align: right; color: var(--t2); font-size: .95rem; white-space: nowrap; padding-left: 12px; }
.km-table td:nth-child(2) { color: var(--t1); font-family: var(--display); font-stretch: 108%; font-weight: 620; font-size: 1.12rem; }
.km-table thead th + th { text-align: right; padding-left: 12px; }
.km-how { margin-top: 18px; font-size: .92rem; color: var(--t2); max-width: 60ch; }
.km-scale .km-ex__h { margin-top: 32px; }
.km-ex { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin-top: 14px; }
.km-ex__b { width: 100%; min-height: 64px; display: grid; gap: 2px; justify-items: start; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--ln); background: var(--s2); color: var(--t2); font: inherit; font-size: .84rem; text-align: left; cursor: pointer; transition: border-color .2s var(--ease), background-color .2s var(--ease); }
.km-ex__b b { color: var(--t1); font-family: var(--display); font-stretch: 108%; font-weight: 620; font-size: 1.08rem; font-variant-numeric: tabular-nums; }
.km-ex__b:hover, .km-ex__b:focus-visible { border-color: var(--ag); background: var(--s3); }
.km-ex__72 { margin-top: 16px; font-size: .92rem; color: var(--t2); max-width: 62ch; }
.km-calc { display: grid; gap: 12px; padding: clamp(20px, 3vw, 30px); border-radius: 20px; border: 1px solid var(--ln); background-image: var(--brushed, none), var(--metal-panel); }
.km-calc__l { font-size: .88rem; color: var(--t2); }
.km-calc .cg-num > span { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--t3); font-size: .9rem; pointer-events: none; }
.km-calc__sel { padding-right: 16px; font-size: .95rem; appearance: auto; }
.km-calc__alt { border-top: 1px solid var(--ln); padding-top: 10px; }
.km-calc__alt summary { cursor: pointer; font-size: .88rem; color: var(--t2); min-height: 44px; display: flex; align-items: center; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ln2); }
.km-calc__alt[open] summary { color: var(--t1); }
.km-calc__alt-in { display: grid; gap: 10px; padding: 6px 0 4px; }
.km-calc__from { font-size: .86rem; color: var(--t2); min-height: 0; }
.km-calc__from:empty { display: none; }
.km-calc__out { border-top: 1px solid var(--ln2); padding-top: 12px; }
.km-calc__rows { list-style: none; display: grid; gap: 0; }
.km-calc__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t a" "m a"; column-gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--ln); font-variant-numeric: tabular-nums; }
.km-calc__t { grid-area: t; font-size: .9rem; color: var(--t1); }
.km-calc__m { grid-area: m; font-size: .82rem; color: var(--t3); }
.km-calc__a { grid-area: a; align-self: center; font-size: 1rem; font-weight: 600; white-space: nowrap; }
.km-calc__row--none { display: block; font-size: .9rem; color: var(--t2); }
.km-calc__total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 12px; font-size: .92rem; color: var(--t2); }
.km-calc__total b { font-family: var(--display); font-stretch: 110%; font-weight: 640; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -.02em; font-variant-numeric: tabular-nums; background-image: var(--metal-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.km-calc__note { font-size: .8rem; color: var(--t3); }

/* Conditions : carte pleine largeur des kilomètres supplémentaires, avec le barème. */
.f-conds .f-conds__wide { grid-column: 1 / -1; }
.f-conds__wide a { color: var(--t1); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ag); }
.f-conds__tiers { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 8px; margin-top: 8px; }
.f-conds .f-conds__tiers li { display: grid; gap: 2px; align-content: start; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--ln); background: rgba(255, 255, 255, .02); background-image: none; font-size: .82rem; color: var(--t2); overflow: visible; }
.f-conds .f-conds__tiers li::after { content: none; }
.f-conds__tiers b { color: var(--t1); font-weight: 600; font-size: 1rem; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- Étapes ---------- */
.f-steps { list-style: none; display: grid; }
.f-steps li { padding: 24px 0 26px; border-top: 1px solid var(--ln); display: grid; gap: 8px; }
.f-steps__n { font-family: var(--display); font-stretch: 110%; font-weight: 600; font-size: .95rem; color: var(--ag); font-variant-numeric: tabular-nums; }
.f-steps p { color: var(--t2); }
@media (min-width: 900px) { .f-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; } .f-steps__n { font-size: 2.4rem; margin-bottom: 18px; background: var(--ag-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } }

/* ---------- Bloc photo plein cadre ---------- */
.f-band { position: relative; overflow: hidden; isolation: isolate; color: #FFFFFF; background: #000; }
.f-band__media { position: absolute; inset: 0; z-index: -2; }
.f-band__media img { width: 100%; height: 100%; object-fit: cover; }
.f-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, .78) 45%, rgba(0, 0, 0, .5) 100%), linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 18%); }
@media (min-width: 900px) { .f-band::after { background: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .86) 32%, rgba(0, 0, 0, .1) 72%), linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 16%), linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 16%); } }
.f-band__in { padding: clamp(110px, 14vw, 200px) 0 clamp(80px, 10vw, 150px); max-width: 600px; }
.f-band__in > p { margin-top: 18px; color: rgba(255, 255, 255, .86); }
.f-band__in .btn-row { margin-top: 30px; }
.f-places { list-style: none; margin-top: 24px; }
.f-places li { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid rgba(255, 255, 255, .16); font-weight: 500; }
.f-places li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .16); }
.f-places svg { width: 18px; height: 18px; color: var(--ag); flex: none; }

/* ---------- Cartes (articles), cartes d'information ---------- */
.f-cards { list-style: none; display: grid; gap: 14px; }
@media (min-width: 700px) { .f-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .f-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.f-cards > li { display: flex; }
.f-card { display: flex; flex-direction: column; width: 100%; border-radius: 20px; overflow: hidden; background: var(--s1); border: 1px solid var(--ln); color: #FFFFFF; text-decoration: none; transition: border-color .3s var(--ease); }
.f-card:hover { border-color: rgba(255, 255, 255, .34); }
.f-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--s2); }
.f-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
@media (hover: hover) { .f-card:hover .f-card__media img { transform: scale(1.035); } }
.f-card__body { display: grid; gap: 10px; padding: 20px 20px 22px; flex: 1; align-content: start; }
.f-card__t { font-family: var(--display); font-stretch: 106%; font-weight: 620; font-size: 1.16rem; line-height: 1.25; letter-spacing: -.01em; }
.f-card__d { color: var(--t2); font-size: .93rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* Mobile : moins de texte (titres seuls), et deux articles sur l'accueil */
@media (max-width: 699px) { .f-card__d { display: none; } .f-cards--home > li:nth-child(n+3) { display: none; } }
.f-card__more { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; padding-top: 6px; font-size: .92rem; font-weight: 500; }
.f-card__more svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.f-card:hover .f-card__more svg { transform: translateX(3px); }
.f-conds, .f-feats { list-style: none; display: grid; gap: 12px; }
@media (min-width: 640px) { .f-conds, .f-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .f-conds, .f-feats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .f-feats--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.f-conds li, .f-feats li { display: grid; gap: 8px; align-content: start; padding: 24px 22px 26px; border-radius: 18px; background: var(--s1); border: 1px solid var(--ln); }
.f-conds p, .f-feats p { color: var(--t2); font-size: .95rem; }
.f-ic { width: 42px; height: 42px; margin-bottom: 8px; display: grid; place-items: center; border-radius: 12px; background: var(--s3); border: 1px solid var(--ln); color: var(--ag); }
.f-ic svg { width: 20px; height: 20px; }
.f-panel { padding: clamp(22px, 3vw, 34px); border-radius: 22px; background: var(--s1); border: 1px solid var(--ln); display: grid; gap: 12px; }
.f-panel .btn-row { margin-top: 8px; }

/* ---------- Deux colonnes éditoriales ---------- */
.f-split { display: grid; gap: 26px; }
@media (min-width: 960px) { .f-split { grid-template-columns: 4fr 7fr; gap: 80px; align-items: start; } .f-split__aside { position: sticky; top: calc(var(--hdr) + 32px); } }
.f-split__aside p { margin-top: 22px; }
.f-prose { color: #E3E5E8; font-size: 1.06rem; line-height: 1.75; }
.f-prose > * + * { margin-top: 1.05em; }
.f-prose h2 { font-family: var(--display); font-stretch: 108%; font-weight: 620; font-size: clamp(1.35rem, 1.15rem + .8vw, 1.75rem); line-height: 1.2; letter-spacing: -.015em; color: #FFFFFF; margin-top: 2em; scroll-margin-top: calc(var(--hdr) + 24px); }
.f-prose ul { padding-left: 1.2em; }
.f-prose li + li { margin-top: .45em; }
.f-prose li::marker { color: var(--ag); }
/* Pages légales (22/10/2026) : texte courant, liens soulignés, noms des indications techniques en police fixe. */
.f-legal { max-width: 860px; }
.f-legal__upd { color: var(--t2); font-size: .95rem; }
.f-legal > h2:first-of-type { margin-top: 1.4em; }
.f-legal a { overflow-wrap: anywhere; text-decoration-color: rgba(255, 255, 255, .45); }
.f-legal a:hover { text-decoration-color: #FFFFFF; }
.f-legal code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .86em; padding: 1px 6px; border-radius: 6px; background: var(--s2); color: #FFFFFF; overflow-wrap: anywhere; }

/* ---------- Nos véhicules ---------- */
.f-vcard { display: grid; border-radius: 24px; overflow: hidden; background: var(--s1); border: 1px solid var(--ln); }
.f-vcard__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--s2); }
.f-vcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
@media (hover: hover) { .f-vcard:hover .f-vcard__media img { transform: scale(1.02); } }
.f-vcard__body { display: grid; gap: 16px; align-content: center; padding: 26px 22px 30px; }
.f-vcard__tags { color: var(--t2); font-size: .92rem; }
.f-vcard__price strong { font-family: var(--display); font-stretch: 108%; font-weight: 640; font-size: 1.6rem; letter-spacing: -.02em; }
@media (min-width: 960px) { .f-vcard { grid-template-columns: 7fr 5fr; } .f-vcard__body { padding: 48px; } }
.final a.plain { color: inherit; }

/* ---------- Contact ---------- */
.f-contact { display: grid; gap: 32px; }
@media (min-width: 960px) { .f-contact { grid-template-columns: 5fr 7fr; gap: 56px; align-items: start; } }
.f-clist { list-style: none; display: grid; gap: 10px; }
.f-citem { display: flex; gap: 16px; align-items: flex-start; padding: 18px; border-radius: 16px; background: var(--s1); border: 1px solid var(--ln); color: #FFFFFF; text-decoration: none; transition: border-color .25s var(--ease); }
a.f-citem:hover { border-color: rgba(255, 255, 255, .34); }
.f-citem svg { width: 22px; height: 22px; flex: none; margin-top: 2px; color: var(--ag); }
.f-citem strong { display: block; font-weight: 600; }
.f-citem span span { display: block; color: var(--t2); font-size: .93rem; overflow-wrap: anywhere; }
.f-socials { display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: 14px; }
.f-socials a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .3); }
.final .f-contact .card, .final .bk-soon-form .card { border-radius: 22px; }
.f-pending h2 { margin-bottom: 4px; }
.f-nf { min-height: 80svh; display: flex; align-items: center; padding-top: var(--hdr); }
.f-nf p { margin: 16px 0 28px; }

/* ---------- Conciergerie : calculateur et prise d'e-mail ---------- */
.f-calc { display: grid; gap: 32px; }
@media (min-width: 1024px) { .f-calc { grid-template-columns: 5fr 7fr; gap: 72px; align-items: start; } .f-calc__intro { position: sticky; top: calc(var(--hdr) + 32px); } }
.f-calc__intro p { margin-top: 18px; max-width: 46ch; }
.f-calc__warn { display: flex; gap: 10px; align-items: flex-start; color: #E6E7E9; font-size: .95rem; }
.f-calc__warn svg { width: 19px; height: 19px; flex: none; margin-top: 2px; color: var(--ag); }
.f-calc__card, .f-form { display: grid; gap: 20px; padding: clamp(20px, 3vw, 34px); border-radius: 26px; background: var(--s1); border: 1px solid var(--ln); }
.f-calc__group { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 18px; }
@media (min-width: 640px) { .f-calc__group { grid-template-columns: 1fr 1fr; } .f-calc__group legend { grid-column: 1 / -1; } }
.f-calc__group legend { padding: 0; margin-bottom: 4px; }
.f-calc__f { display: grid; gap: 6px; align-content: start; }
.f-calc__l { font-size: .9rem; font-weight: 500; color: #E6E7E9; }
.f-calc__in { position: relative; }
.f-calc__in .input { padding-right: 70px; font-variant-numeric: tabular-nums; font-size: 1.05rem; }
.f-calc__in span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: .9rem; color: var(--t2); pointer-events: none; }
.f-calc__h { font-size: .8rem; color: var(--t3); line-height: 1.4; }
.f-calc__out { padding-top: 20px; border-top: 1px solid var(--ln); display: grid; gap: 12px; }
.f-calc__state { color: var(--t2); }
.f-calc__state.is-err { color: var(--red); }
.f-calc__res { display: grid; gap: 0; margin: 0; }
.f-calc__res div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--ln); }
.f-calc__res dt { color: var(--t2); font-size: .93rem; }
.f-calc__res dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.f-calc__res .f-calc__main dt { color: #FFFFFF; font-weight: 500; }
.f-calc__res .f-calc__main dd { font-family: var(--display); font-stretch: 110%; font-weight: 640; font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem); letter-spacing: -.03em; }
.f-calc__tag { color: #E6E7E9; font-size: .9rem; font-weight: 600; }
.f-calc__note { font-size: .84rem; color: var(--t2); line-height: 1.55; }
.f-lead-grid { display: grid; gap: 32px; }
@media (min-width: 1024px) { .f-lead-grid { grid-template-columns: 5fr 7fr; gap: 72px; align-items: start; } }
.f-lead-grid__intro p { margin-top: 18px; max-width: 48ch; }
.f-checks { list-style: none; margin-top: 26px; display: grid; gap: 12px; }
.f-checks li { display: flex; gap: 12px; align-items: flex-start; color: #E6E7E9; }
.f-checks svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--ag); }
.f-choice { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 8px; }
.f-choice legend { padding: 0; margin-bottom: 8px; }
@media (min-width: 640px) { .f-choice { grid-template-columns: 1fr 1fr; } .f-choice legend { grid-column: 1 / -1; } }
.f-choice__it { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 10px 14px; border-radius: 14px; border: 1px solid #2E2E33; background: var(--s2); cursor: pointer; font-size: .95rem; }
.f-choice__it input { width: 18px; height: 18px; margin: 0; flex: none; }
.f-choice__it:has(input:checked) { border-color: #FFFFFF; background: var(--s3); }
.f-form__est { font-size: .9rem; color: var(--t2); padding: 12px 14px; border-radius: 12px; background: var(--s2); border: 1px solid var(--ln); }
.f-form__est strong { color: #FFFFFF; }
.f-form__done { display: grid; gap: 6px; padding: 16px; border-radius: 14px; background: rgba(111, 211, 154, .07); border: 1px solid rgba(111, 211, 154, .35); }
.f-form__done p { color: #D7D9DD; font-size: .93rem; }
.f-form__done a { color: #FFFFFF; }
.f-form .btn-row .btn { flex: 1 1 220px; }

/* ---------- Articles ---------- */
.f-readbar { position: fixed; z-index: 60; left: 0; right: 0; top: 0; height: 2px; pointer-events: none; }
.f-readbar span { display: block; height: 100%; background: linear-gradient(90deg, #8A8E96, #FFFFFF); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.f-art { display: grid; gap: 32px; }
@media (min-width: 1024px) { .f-art { grid-template-columns: 280px minmax(0, 1fr); gap: 72px; align-items: start; } .f-art__aside { position: sticky; top: calc(var(--hdr) + 28px); } }
.f-art__main { max-width: 760px; min-width: 0; }
.f-art__aside { display: grid; gap: 14px; align-content: start; }
.f-toc { padding: 18px 20px; border-radius: 18px; background: var(--s1); border: 1px solid var(--ln); }
.f-toc__h { font-family: var(--display); font-stretch: 106%; font-weight: 620; margin-bottom: 6px; }
.f-toc ol { list-style: none; display: grid; }
.f-toc a { display: flex; align-items: center; min-height: 40px; color: var(--t2); text-decoration: none; font-size: .92rem; line-height: 1.35; border-left: 1px solid var(--ln); padding-left: 12px; transition: color .2s, border-color .2s; }
.f-toc a:hover, .f-toc a.is-on { color: #FFFFFF; border-left-color: #FFFFFF; }
.f-art__card { display: grid; gap: 10px; padding: 18px 20px 20px; border-radius: 18px; background: var(--s2); border: 1px solid var(--ln); }
.f-art__card strong { font-family: var(--display); font-stretch: 106%; font-weight: 620; }
.f-art__card span { color: var(--t2); font-size: .9rem; }
.f-art__card .btn { justify-self: start; }
@media (max-width: 1023px) { .f-art__card { display: none; } }
.f-tldr { padding: 4px 0 4px 20px; border-left: 2px solid var(--ag); margin-bottom: 34px; }
.f-tldr__h { font-family: var(--display); font-stretch: 106%; font-weight: 620; margin-bottom: 6px; }
.f-tldr p:last-child { color: #E3E5E8; font-size: 1.08rem; line-height: 1.65; }
.f-art__faq { margin-top: 56px; display: grid; gap: 14px; }
.f-art__links { margin-top: 44px; display: grid; gap: 16px; }
.f-art__link { display: flex; align-items: center; gap: 16px; padding: 12px 16px 12px 12px; border-radius: 18px; background: var(--s1); border: 1px solid var(--ln); color: #FFFFFF; text-decoration: none; transition: border-color .25s; }
.f-art__link:hover { border-color: rgba(255, 255, 255, .34); }
.f-art__link-media { width: 96px; height: 64px; border-radius: 12px; overflow: hidden; flex: none; }
.f-art__link-media img { width: 100%; height: 100%; object-fit: cover; }
.f-art__link > span:nth-child(2) { display: grid; gap: 2px; flex: 1; min-width: 0; }
.f-art__link small { color: var(--t2); }
.f-art__link > svg { width: 18px; height: 18px; flex: none; }
.f-art__cities { color: var(--t2); font-size: .93rem; }
.f-art__cities a { color: #FFFFFF; display: inline-block; padding: 10px 0; }
.f-cities__list { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 26px; margin-top: 14px; }

/* ---------- Pied de page ---------- */
.ff { position: relative; padding: clamp(64px, 8vw, 110px) 0 calc(36px + env(safe-area-inset-bottom)); }
.ff__top { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; padding-bottom: clamp(32px, 5vw, 56px); border-bottom: 1px solid var(--ln); }
.ff__sig { flex: 1 1 260px; font-family: var(--display); font-stretch: 110%; font-weight: 600; font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); letter-spacing: -.015em; background: var(--ag-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ff__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 20px; padding-top: clamp(36px, 5vw, 56px); }
@media (min-width: 1024px) { .ff__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; } }
@media (max-width: 599px) { .ff__grid > div:last-child { grid-column: 1 / -1; } }
.ff h2 { font-size: .86rem; font-weight: 500; color: var(--t2); margin-bottom: 8px; }
.ff ul { list-style: none; }
.ff ul a, .ff__contact span { display: inline-flex; align-items: center; min-height: 44px; color: rgba(255, 255, 255, .9); text-decoration: none; font-size: .95rem; overflow-wrap: anywhere; }
.ff ul a:hover { color: #FFFFFF; text-decoration: underline; }
.ff__contact span { min-height: 0; padding: 10px 0; color: var(--t2); }
.ff__social { display: flex; flex-wrap: wrap; gap: 0 22px; margin-top: 28px; }
.ff__social a { display: inline-flex; align-items: center; min-height: 44px; color: #FFFFFF; font-weight: 500; text-decoration: none; }
/* Logo principal argenté en grand, en clôture (lien vers l'accueil) ; monogramme PM en signature, à côté du « © ». */
.ff__mark { display: block; width: min(720px, 100%); margin-top: clamp(40px, 6vw, 72px); line-height: 0; }
.ff__mark-img { display: block; width: 100%; height: auto; }
.ff__mark:focus-visible { outline-offset: 6px; }
.ff__copy { display: inline-flex; align-items: center; gap: 12px; }
.ff__pm { display: block; width: auto; height: 13px; opacity: .7; }
.ff__bottom { margin-top: clamp(28px, 4vw, 48px); padding-top: 18px; border-top: 1px solid var(--ln); display: flex; flex-wrap: wrap; gap: 6px 28px; justify-content: space-between; align-items: center; font-size: .85rem; color: var(--t2); }
.ff__legal { display: flex; flex-wrap: wrap; gap: 0 20px; }
.ff__legal a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.ff__legal a:hover { color: #FFFFFF; }
@media (max-width: 1023px) { .has-sheet .ff { padding-bottom: calc(36px + 90px); } }

/* ---------- Joindre l'agence : barre mobile, bouton fixe, pop-up ---------- */
@media (max-width: 899px) {
  .final .mbar { background: rgba(0, 0, 0, .96); border-top-color: var(--ln); }
  .final .mbar a { background: var(--s2); border-color: var(--ln2); border-radius: 14px; }
  .final .mbar .mbar__go { background: #FFFFFF; color: #000; border-color: #FFFFFF; }
  .final .ff { padding-bottom: calc(40px + 70px + env(safe-area-inset-bottom)); }
}
.final .reach__bar { background: var(--s2); border-color: var(--ln2); }
.final .reach__bar > :hover { background: var(--s3); }
.final .callpop { background: var(--s2); color: #FFFFFF; border: 1px solid var(--ln2); box-shadow: 0 34px 80px -24px rgba(0, 0, 0, .9); }
.final .callpop p { color: var(--t2); }
.final .callpop__x { background: var(--s4); color: #FFFFFF; border-radius: 12px; }
.final .callpop .btn--dark { background: #FFFFFF; color: #000; }

/* ---------- Apparitions ---------- */
@media (prefers-reduced-motion: no-preference) {
  .final.rv-on .rv { transform: translateY(16px); transition-duration: .8s; }
  .final.rv-on .rv.in { transform: none; }
}

/* ---------- Petits écrans (320 px) ---------- */
@media (max-width: 380px) {
  .final .bk-card { grid-template-columns: minmax(0, 1fr); }
  .final .wrap { padding: 0 16px; }
  .f-logo { height: 42px; }
  .f-display { font-size: 2.15rem; }
  .f-h1 { font-size: 2.1rem; }
  .final .bk-card .bk-f { padding: 9px 10px; }
  .f-prices__p { font-size: 1.35rem; }
  .fm__row { grid-template-columns: 1fr; }
  .f-chips li { font-size: .8rem; padding: 6px 11px; }
}


/* ==========================================================================
   DÉGRADÉS GRIS MÉTAL ET ANIMATIONS (demande du dirigeant, 19/10/2026)
   Métal brossé et argent : #B8BCC2 vers un blanc chaud #F3EEE4, puis vers l'anthracite. Sur les textes, la teinte
   la plus sombre reste #8D9199 (6,6:1 sur noir) : contraste AA partout. Reflets en transform seulement.
   ========================================================================== */
html.final {
  --metal-text: linear-gradient(100deg, #D6D8DC 0%, #FFFFFF 24%, #F3EEE4 40%, #B8BCC2 62%, #8D9199 84%, #C9CCD1 100%);
  --metal-hero: linear-gradient(100deg, #FFFFFF 0%, #FBF8F2 40%, #DADCE0 75%, #C9CCD1 100%);
  --metal-btn: linear-gradient(180deg, #FFFFFF 0%, #F3EEE4 46%, #D2D5D9 100%);
  --metal-line: linear-gradient(90deg, rgba(184, 188, 194, 0), #8D9199 18%, #F3EEE4 50%, #8D9199 82%, rgba(184, 188, 194, 0));
  --metal-panel: linear-gradient(155deg, #1A1A1D 0%, #0D0D0F 46%, #151518 100%);
  --brushed: repeating-linear-gradient(90deg, rgba(255, 255, 255, .014) 0 1px, rgba(255, 255, 255, 0) 1px 3px);
}
/* Titres clés : argent brossé (titres mot à mot : le dégradé est posé sur chaque mot) */
.f-statement, .ff__sig, .f-stats__n, .f-prices__p, .f-calc__res .f-calc__main dd, .f-h2:not(.wsplit), .f-h2.wsplit .w, .f-h1, .vopt__t {
  background-image: var(--metal-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.f-display .fw > span { background-image: var(--metal-hero); -webkit-background-clip: text; background-clip: text; color: transparent; }
.f-h1__line { -webkit-text-fill-color: var(--t2); }
.f-prices__p small { -webkit-text-fill-color: var(--t2); }
/* Séparateurs en filet de métal */
.f-phead::after, .f-stats::before, .f-prices__list::before, .ff__top::after { content: ""; display: block; height: 1px; background: var(--metal-line); }
.f-stats { position: relative; border-top: 0; }
.f-stats::before { position: absolute; left: 0; right: 0; top: 0; }
.f-prices__list { position: relative; border-top: 0; }
.f-prices__list::before { position: absolute; left: 0; right: 0; top: 0; }
.ff__top { position: relative; border-bottom: 0; }
.ff__top::after { position: absolute; left: 0; right: 0; bottom: 0; }
/* Boutons : métal clair, reflet au survol (et au toucher, une fois) */
.final .btn--light, .final .btn--dark { background-image: var(--metal-btn); border-color: #E9E6DF; }
.final .btn--light:hover, .final .btn--dark:hover { background-image: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 40%, #E1E3E6 100%); }
.final .btn--ghost { position: relative; overflow: hidden; isolation: isolate; border-color: rgba(214, 216, 220, .4); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .final .btn--ghost::after { content: ""; position: absolute; inset: 0; z-index: -1; transform: translateX(-120%) skewX(-18deg); background: linear-gradient(90deg, transparent, rgba(243, 238, 228, .16), transparent); transition: transform .8s var(--ease); }
  .final .btn--ghost:hover::after { transform: translateX(120%) skewX(-18deg); }
}
/* Fonds de section : anthracite et halo argenté très doux, du noir au noir (aucune coupure) */
.f-sec--metal { background: radial-gradient(90% 60% at 50% 0%, rgba(184, 188, 194, .075), rgba(0, 0, 0, 0) 62%), linear-gradient(180deg, #000 0%, #0C0C0E 50%, #000 100%); }
/* Cartes et panneaux : anthracite brossé, reflet métallique qui passe */
.f-card, .f-conds li, .f-feats li, .f-vcard, .f-panel, .f-toc, .f-art__card, .f-calc__card, .f-form, .f-citem, .final .sheet__panel, .final .bk-summary {
  background-image: var(--brushed), var(--metal-panel); }
.f-card, .f-conds li, .f-feats li, .f-vcard, .vopt, .f-citem { position: relative; overflow: hidden; isolation: isolate; }
.f-card::after, .f-conds li::after, .f-feats li::after, .f-vcard::after, .vopt::after, .f-citem::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 40%; z-index: 2; pointer-events: none; opacity: 0;
  transform: translateX(0) skewX(-18deg); background: linear-gradient(90deg, rgba(243, 238, 228, 0), rgba(243, 238, 228, .11), rgba(243, 238, 228, 0)); }
@media (prefers-reduced-motion: no-preference) {
  @media (hover: hover) {
    .f-card:hover::after, .f-conds li:hover::after, .f-feats li:hover::after, .f-vcard:hover::after, .vopt:hover::after, .f-citem:hover::after { animation: card-sheen 1s cubic-bezier(.45, 0, .25, 1) both; }
  }
  @media (hover: none) {
    .rv.in .f-card::after, .f-conds li.rv.in::after, .f-feats li.rv.in::after, .f-vcard.rv.in::after { animation: card-sheen 1.3s cubic-bezier(.45, 0, .25, 1) .35s both; }
  }
}
@keyframes card-sheen { 0% { opacity: 0; transform: translateX(0) skewX(-18deg); } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(430%) skewX(-18deg); } }
/* Images dévoilées : un voile anthracite se retire, la photo se pose (final.js) */
.f-unveil { isolation: isolate; }
.f-unveil::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(100deg, #1A1A1D, #0B0B0C 60%, #222226); transform-origin: 100% 50%; transition: transform 1s cubic-bezier(.77, 0, .18, 1); }
.f-unveil img { opacity: 0; transform: scale(1.08); transition: opacity .9s var(--ease) .25s, transform 1.4s cubic-bezier(.2, .7, .2, 1) .15s; }
.f-unveil.in::before { transform: scaleX(0); }
.f-unveil.in img { opacity: 1; transform: none; }
@media (hover: hover) { .f-feature__media.f-unveil.in:hover img, .f-card:hover .f-unveil.in img { transform: scale(1.03); } }
.f-card__media, .f-vcard__media, .f-art__link-media { position: relative; }
/* Parallaxe : le bandeau photo dépasse un peu de son cadre pour ne jamais laisser de vide */
.fx-par .f-band__media { top: -12%; bottom: -12%; will-change: transform; }
.fx-par .f-hero__media { will-change: transform; }
/* Apparitions un peu plus présentes, sans excès */
@media (prefers-reduced-motion: no-preference) {
  .final.rv-on .rv { transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
  .final.rv-on .rv.in { transform: none; }
  .final.rv-on .f-stats li.rv { transform: translateY(26px); }
}
@media (prefers-reduced-motion: reduce) { .f-unveil::before { display: none; } .f-unveil img { opacity: 1; transform: none; } }

/* ============================================================
   EN-TÊTE ANIMÉ (v2, 19/10/2026) — transform et opacity seulement, rien sous prefers-reduced-motion.
   - titre en dégradé « métal brossé » (blanc → gris argenté du logo), apparition mot à mot (ci-dessus) ;
   - reflet métallique qui balaie le titre : une copie du titre (aria-hidden, posée par final.js) vue à travers une
     fenêtre qui glisse (la fenêtre et le texte se déplacent en sens inverse : le texte reste immobile) ;
   - filet argenté qui se trace sous le titre ;
   - photo de l'A45 S en mouvement lent (léger travelling), en plus du parallaxe au défilement et au pointeur.
   ============================================================ */
.f-sheen-host { position: relative; width: fit-content; max-width: 100%; }
.f-sheen-host > .f-display { margin: 0; }
.f-hero .f-display .fw > span { background: linear-gradient(180deg, #FFFFFF 0%, #E9EAEC 28%, #BFC2C8 60%, #969AA2 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.f-sheen { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.f-sheen__win { position: absolute; inset: 0; transform: translateX(-100%); -webkit-mask-image: linear-gradient(105deg, transparent 30%, #000 45%, #000 55%, transparent 70%); mask-image: linear-gradient(105deg, transparent 30%, #000 45%, #000 55%, transparent 70%); }
.f-sheen__t { display: block; margin: 0; transform: translateX(100%); color: #FFFFFF; text-shadow: 0 0 22px rgba(255, 255, 255, .55); }
.f-sheen__t .fw > span { background: none !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF; animation: none !important; transform: none !important; }
.f-rule { display: block; width: min(320px, 62%); height: 1px; margin-top: 22px; background: linear-gradient(90deg, #FFFFFF, #B8BCC2 45%, rgba(184, 188, 194, 0)); transform-origin: 0 50%; }
@media (prefers-reduced-motion: no-preference) {
  .f-sheen__win { animation: sheen-win 10s cubic-bezier(.45, 0, .25, 1) 1.15s infinite; }
  .f-sheen__t { animation: sheen-txt 10s cubic-bezier(.45, 0, .25, 1) 1.15s infinite; }
  .fx-intro-quick .f-sheen__win, .fx-intro-quick .f-sheen__t { animation-delay: 1.5s; }
  .fx-intro-full .f-sheen__win, .fx-intro-full .f-sheen__t { animation-delay: 2.75s; }
  .f-rule { animation: rule-in 1.2s cubic-bezier(.65, 0, .35, 1) .55s both; }
  .fx-intro-quick .f-rule { animation-delay: .9s; }
  .fx-intro-full .f-rule { animation-delay: 2.1s; }
  /* Photo en mouvement : arrivée (img, ci-dessus), puis lent travelling continu (picture) */
  .f-hero__media picture { display: block; width: 100%; height: 100%; animation: hero-drift 26s ease-in-out 2.2s infinite alternate; }
  .f-hero__media picture img { animation: f-zoom2 2.2s var(--ease) both; }
  .f-hero__media > img { animation: f-zoom2 2.2s var(--ease) both, hero-drift 26s ease-in-out 2.2s infinite alternate; }
  .fx-intro-full .f-hero__media picture, .fx-intro-full .f-hero__media picture img { animation-delay: 1.2s; }
  .fx-intro-full .f-hero__media picture { animation-delay: 3.4s; }
  .fx-intro-full .f-hero__media > img { animation-delay: 1.2s, 3.4s; }
  .fx-hover .f-hero__in { transition: transform .9s cubic-bezier(.2, .7, .2, 1); will-change: transform; }
}
@keyframes sheen-win { 0% { transform: translateX(-100%); } 16%, 100% { transform: translateX(100%); } }
@keyframes sheen-txt { 0% { transform: translateX(100%); } 16%, 100% { transform: translateX(-100%); } }
@keyframes rule-in { from { transform: scaleX(0); opacity: 0; } 30% { opacity: 1; } to { transform: scaleX(1); opacity: 1; } }
@keyframes hero-drift { from { transform: none; } to { transform: scale(1.06) translate3d(-1.4%, -.8%, 0); } }
@keyframes f-zoom2 { from { transform: scale(1.12); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .f-sheen { display: none; } }

/* ============================================================
   CONCIERGERIE (v2) — structure et simulateur de corsiva.fr/conciergerie, aux couleurs de PANTHEON MOTORS.
   ============================================================ */
.cg-center { margin-left: auto; margin-right: auto; text-align: center; justify-items: center; }
.cg-center .f-h2 { margin-left: auto; margin-right: auto; }
/* Repères numérotés carrés (aucun badge rond) */
.cg-n, .cg-lbl > i { flex: 0 0 auto; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: rgba(184, 188, 194, .12); box-shadow: inset 0 0 0 1px rgba(184, 188, 194, .38); color: #FFFFFF; font: 700 12.5px/1 Inter, sans-serif; font-style: normal; font-variant-numeric: tabular-nums; }

/* Faits sous l'ouverture (bandeau de chiffres de corsiva.fr, ici sans aucun chiffre attribué) */
.cg-facts { position: relative; z-index: 2; }
.cg-facts__list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border-top: 1px solid var(--ln); border-bottom: 1px solid var(--ln); background: var(--ln); }
.cg-facts__list li { display: grid; gap: 4px; align-content: start; padding: 22px 18px 22px 0; background: #000; }
.cg-facts__list li:nth-child(2n) { padding-left: 18px; }
.cg-facts__list b { font-family: var(--display); font-stretch: 110%; font-weight: 640; font-size: clamp(1.05rem, .95rem + .55vw, 1.4rem); letter-spacing: -.02em; line-height: 1.15; background: var(--ag-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cg-facts__list span { font-size: .88rem; color: var(--t2); line-height: 1.45; }
@media (min-width: 900px) { .cg-facts__list { grid-template-columns: repeat(4, 1fr); } .cg-facts__list li, .cg-facts__list li:nth-child(2n) { padding: 28px 26px; } .cg-facts__list li:first-child { padding-left: 0; } }

/* Étapes en images (cx-steps de corsiva.fr) */
.cg-steps { list-style: none; display: grid; gap: 14px; }
@media (min-width: 640px) { .cg-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cg-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } }
.cg-stepcard { position: relative; display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: var(--s1); border: 1px solid var(--ln); }
.cg-stepcard__media { margin: 0; aspect-ratio: 4 / 3.4; overflow: hidden; background: var(--s2); }
.cg-stepcard__media img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .cg-stepcard__media img { transition: transform 1.2s var(--ease); } .cg-stepcard:hover .cg-stepcard__media img { transform: scale(1.05); } }
.cg-stepcard__body { display: grid; gap: 8px; padding: 18px 20px 22px; }
.cg-stepcard__body p { color: var(--t2); font-size: .93rem; }
.cg-stepcard--spot { background: radial-gradient(120% 80% at 50% 0%, rgba(184, 188, 194, .2), rgba(184, 188, 194, 0) 65%), linear-gradient(180deg, #141417, #0B0B0C); border-color: rgba(184, 188, 194, .38); }
.cg-stepcard__big { aspect-ratio: 4 / 3.4; display: grid; place-content: center; text-align: center; gap: 6px; padding: 20px; }
.cg-stepcard__big b { font-family: var(--display); font-stretch: 116%; font-weight: 680; font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem); letter-spacing: -.035em; line-height: 1; background: var(--ag-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cg-stepcard__big span { color: var(--t2); font-size: .95rem; }
@media (max-width: 639px) {
  .cg-stepcard { flex-direction: row; align-items: stretch; }
  .cg-stepcard__media, .cg-stepcard__big { flex: 0 0 36%; aspect-ratio: auto; min-height: 132px; }
  .cg-stepcard__big { padding: 12px; gap: 2px; }
  .cg-stepcard__big b { font-size: 1.5rem; }
  .cg-stepcard__big span { font-size: .8rem; }
  .cg-stepcard__body { padding: 14px 14px 16px; gap: 6px; align-content: start; }
  .cg-stepcard__body p { font-size: .86rem; }
}

/* Simulateur : panneau des réglages + carte de résultat (sim-panel, sim-result de corsiva.fr) */
.cg-sim { display: grid; gap: 18px; }
@media (min-width: 1024px) { .cg-sim { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 22px; align-items: start; } .cg-result { position: sticky; top: calc(var(--hdr) + 24px); } }
.cg-panel { display: grid; gap: 26px; padding: clamp(20px, 3vw, 32px); border-radius: 26px; background: rgba(11, 11, 12, .92); border: 1px solid var(--ln); }
.cg-step { display: grid; gap: 10px; min-width: 0; }
.cg-step__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.cg-lbl { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-stretch: 106%; font-weight: 620; font-size: 1.02rem; letter-spacing: -.01em; color: #FFFFFF; }
.cg-lbl small { display: block; font-family: Inter, sans-serif; font-stretch: 100%; font-size: .8rem; font-weight: 400; color: var(--t3); margin-left: 6px; }
.cg-step--cover .cg-lbl { display: grid; gap: 2px; }
.cg-step--cover .cg-lbl small { margin: 0; }
.cg-out { font-weight: 600; font-size: .95rem; color: var(--t3); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.cg-out.is-set { color: #FFFFFF; }
.cg-num { position: relative; }
.cg-input { width: 100%; min-height: 52px; padding: 12px 70px 12px 16px; border-radius: 14px; border: 1px solid var(--ln2); background: var(--s2); color: #FFFFFF; font: 500 1.05rem/1.3 Inter, sans-serif; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.cg-num--text .cg-input { padding-right: 16px; font-size: 1rem; }
.cg-input::-webkit-outer-spin-button, .cg-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cg-input::placeholder { color: #7D8189; }
.cg-input:focus { outline: none; border-color: #B8BCC2; box-shadow: 0 0 0 3px rgba(184, 188, 194, .2); }
.cg-input[aria-invalid="true"] { border-color: var(--red); }
.cg-num span { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--t2); font-size: .95rem; pointer-events: none; }
.cg-hint { font-size: .8rem; color: var(--t3); line-height: 1.45; }
/* Curseur argenté (sim-range de corsiva.fr) ; « À choisir » : piste neutre, poignée en retrait */
.cg-range { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; margin: 2px 0 0; }
.cg-range::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, #B8BCC2, #FFFFFF) 0 0 / var(--fill, 0%) 100% no-repeat, #26262B; }
.cg-range::-moz-range-track { height: 4px; border-radius: 4px; background: #26262B; }
.cg-range::-moz-range-progress { height: 4px; border-radius: 4px; background: linear-gradient(90deg, #B8BCC2, #FFFFFF); }
.cg-range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -10px; border-radius: 50%; background: #FFFFFF; border: 0; box-shadow: 0 0 0 6px rgba(184, 188, 194, .22), 0 6px 16px rgba(0, 0, 0, .6); }
.cg-range::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #FFFFFF; border: 0; box-shadow: 0 0 0 6px rgba(184, 188, 194, .22), 0 6px 16px rgba(0, 0, 0, .6); }
.cg-range.is-unset::-webkit-slider-thumb { background: #4A4C52; box-shadow: none; }
.cg-range.is-unset::-moz-range-thumb { background: #4A4C52; box-shadow: none; }
.cg-range.is-unset::-moz-range-progress { background: transparent; }
.cg-ticks { display: flex; justify-content: space-between; font-size: .78rem; color: var(--t3); margin-top: -4px; }
.cg-covers { padding: 18px 20px; border-radius: 18px; border: 1px solid var(--ln); background: var(--s1); }
.cg-covers > p:first-child { font-size: .9rem; color: var(--t2); margin-bottom: 12px; }
.cg-covers ul { list-style: none; display: grid; gap: 10px 18px; }
@media (min-width: 640px) { .cg-covers ul { grid-template-columns: 1fr 1fr; } }
.cg-covers li { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; color: #E6E7E9; line-height: 1.4; }
.cg-covers li svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: #B8BCC2; }
.cg-covers__def { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ln); font-size: .88rem; color: var(--t2); }
.cg-hyp { font-size: .82rem; color: var(--t3); line-height: 1.55; }
/* Carte de résultat : le « spotlight » de corsiva.fr, en métal brossé sur noir */
.cg-result { position: relative; display: grid; gap: 0; padding: clamp(22px, 3vw, 32px); border-radius: 26px; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 70% at 85% 0%, rgba(243, 238, 228, .16), rgba(243, 238, 228, 0) 60%), linear-gradient(160deg, #26272B 0%, #141416 45%, #0B0B0C 100%);
  border: 1px solid rgba(184, 188, 194, .42); box-shadow: 0 40px 100px -40px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .12); }
.cg-result__head { padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.cg-result__model { font-family: var(--display); font-stretch: 108%; font-weight: 640; font-size: 1.25rem; letter-spacing: -.02em; overflow-wrap: anywhere; }
.cg-result__kind { font-size: .86rem; color: var(--t2); margin-top: 2px; }
.cg-result__state { color: #DADCE0; padding: 18px 0 26px; min-height: 120px; }
.cg-result__state.is-err { color: var(--red); }
.cg-result__lbl { font-size: .95rem; color: #DADCE0; }
.cg-result__main { font-family: var(--display); font-stretch: 112%; font-weight: 680; font-size: clamp(2.8rem, 2rem + 3.4vw, 4.6rem); line-height: 1; letter-spacing: -.045em; margin: 10px 0 8px; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, #FFFFFF 0%, #F3EEE4 50%, #B8BCC2 100%); -webkit-background-clip: text; background-clip: text; color: transparent; overflow-wrap: anywhere; }
.cg-result__sub { color: #DADCE0; }
.cg-result__sub b { color: #FFFFFF; }
.cg-split { margin-top: 22px; }
.cg-bar { height: 8px; border-radius: 8px; background: rgba(184, 188, 194, .28); overflow: hidden; }
.cg-bar i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, #B8BCC2, #FFFFFF); transform: scaleX(0); transform-origin: 0 50%; }
@media (prefers-reduced-motion: no-preference) { .cg-bar i, .cg-row__b i, .cg-gauge i { transition: transform .6s cubic-bezier(.2, .7, .2, 1); } }
.cg-lines { margin: 14px 0 0; display: grid; }
.cg-lines div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 8px 0; font-size: .93rem; }
.cg-lines dt { color: #DADCE0; display: flex; align-items: center; gap: 9px; }
.cg-lines dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cg-lines__tot { border-top: 1px solid rgba(255, 255, 255, .14); margin-top: 4px; padding-top: 12px !important; }
.cg-dot { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.cg-dot--o { background: #FFFFFF; } .cg-dot--a { background: rgba(184, 188, 194, .45); }
.cg-compare { margin-top: 18px; display: grid; gap: 4px; }
.cg-compare > p { font-size: .86rem; color: var(--t2); margin-bottom: 6px; }
.cg-row { display: grid; grid-template-columns: minmax(0, 8.5em) 1fr auto; align-items: center; gap: 12px; min-height: 44px; padding: 6px 10px; margin: 0 -10px; border-radius: 10px; border: 0; background: transparent; color: #DADCE0; font: inherit; font-size: .9rem; text-align: left; cursor: pointer; }
.cg-row:hover, .cg-row.is-on { background: rgba(255, 255, 255, .07); color: #FFFFFF; }
.cg-row__b { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.cg-row__b i { display: block; height: 100%; background: linear-gradient(90deg, #B8BCC2, #FFFFFF); transform: scaleX(0); transform-origin: 0 50%; }
.cg-row b { font-variant-numeric: tabular-nums; color: #FFFFFF; white-space: nowrap; }
.cg-result__cta { margin-top: 24px; }
.cg-result__tag { margin-top: 12px; text-align: center; font-size: .84rem; }
@media (max-width: 380px) { .cg-row { grid-template-columns: minmax(0, 1fr) auto; } .cg-row__b { display: none; } }

/* Frais couverts (inv-calc de corsiva.fr) */
.cg-inv__grid { display: grid; gap: 22px; }
@media (min-width: 1024px) { .cg-inv__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; } }
.cg-inv__steps { list-style: none; display: grid; gap: 12px; }
.cg-inv__steps li { display: flex; gap: 16px; align-items: flex-start; padding: 22px 22px 24px; border-radius: 18px; background: var(--s1); border: 1px solid var(--ln); }
.cg-inv__steps li > div { display: grid; gap: 6px; }
.cg-inv__steps p { color: var(--t2); font-size: .93rem; }
.cg-cover { display: grid; gap: 16px; padding: clamp(22px, 3vw, 32px); border-radius: 26px; border: 1px solid rgba(184, 188, 194, .38); background: radial-gradient(110% 70% at 100% 0%, rgba(184, 188, 194, .14), rgba(184, 188, 194, 0) 60%), #0B0B0C; }
.cg-cover__t { font-family: var(--display); font-stretch: 108%; font-weight: 640; font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); letter-spacing: -.02em; line-height: 1.15; }
.cg-cover__model { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .93rem; padding-bottom: 14px; border-bottom: 1px solid var(--ln); }
.cg-cover__model a { color: #FFFFFF; }
.cg-cover__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--ln); color: #DADCE0; }
.cg-cover__row b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cg-cover__row small { color: var(--t2); font-weight: 400; }
.cg-gauge { height: 10px; border-radius: 10px; background: #1E1E22; overflow: hidden; }
.cg-gauge i { display: block; height: 100%; background: linear-gradient(90deg, #8D9199, #B8BCC2 45%, #FFFFFF); transform: scaleX(0); transform-origin: 0 50%; }
.cg-cover__res { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.cg-cover__res b { font-family: var(--display); font-stretch: 112%; font-weight: 680; font-size: clamp(2.2rem, 1.7rem + 2vw, 3.2rem); letter-spacing: -.04em; line-height: 1; background: linear-gradient(180deg, #FFFFFF, #B8BCC2); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cg-cover__res span { flex: 1 1 14em; color: #DADCE0; }
.cg-cover__state { color: var(--t2); }
.cg-cover__legal { font-size: .8rem; color: var(--t3); line-height: 1.5; }
.cg-lead__alt { margin-top: 26px; }

/* À propos : « Bienvenue chez PANTHEON MOTORS » et « Nos valeurs » (demande d'Ahmed du 20/10/2026). */
.f-statement--welcome { max-width: 18ch; }
.f-welcome { display: grid; gap: 14px; margin-top: 22px; max-width: 62ch; color: var(--t2); font-size: clamp(1rem, .95rem + .25vw, 1.12rem); line-height: 1.6; }
@media (min-width: 900px) { .f-welcome { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; max-width: 980px; } }
.f-values { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .f-values { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.f-values .f-h3 { letter-spacing: .02em; }

/* Réservation : option ou destination « sur devis » (aucun montant ajouté au total). */
.rz-opt__price--devis { font-weight: 500; opacity: .8; white-space: nowrap; }