/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
  --bg: #080504;
  --text: #f5f5f7;
  --text-soft: rgb(var(--grey-rgb) / 0.9);

  /* Couleurs du logo (modifiables dans Sanity) : orange cuivré (principale),
     variante claire, gris (secondaire). Composantes R G B séparées pour
     pouvoir les utiliser avec une transparence : rgb(var(--brand-rgb) / 0.5) */
  --brand-rgb: 195 138 110;
  --brand-light-rgb: 226 172 146;
  --grey-rgb: 200 192 184;
  --brand: rgb(var(--brand-rgb));
  --brand-light: rgb(var(--brand-light-rgb));
  --grey: rgb(var(--grey-rgb));
  --brand-grey: var(--grey);

  --radius-xl: 34px;
  --radius-pill: 999px;
  --gutter: 12px;

  /* Liquid glass bleu (bloc bas) */
  --glass-blue-fill: rgba(46, 28, 19, 0.30);
  --glass-blue-glow: rgb(var(--brand-rgb) / 0.75);

  /* Typos Apple → équivalents libres d'usage commercial (licence SIL OFL) :
     SF Pro → Inter, New York → Newsreader, SF Mono → JetBrains Mono */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Newsreader", "New York", Georgia, serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ==========================================================================
   Base
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

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

/* La page défile (hero puis sections), sans barre de défilement visible */
html {
  overflow-x: hidden;
  overscroll-behavior: none;
  scrollbar-width: none;
}
html::-webkit-scrollbar { display: none; }

/* Pas de défilement pendant le chargement, l'intro, puis la flotte */
html.is-loading,
html.is-intro,
html.is-locked { overflow: hidden; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* ==========================================================================
   Hero
   ========================================================================== */
/* Arrondi partagé entre la vidéo et la découpe du bloc du haut */
@property --corner {
  syntax: "<length>";
  inherits: true;
  initial-value: 34px;
}

.hero {
  --corner: var(--radius-xl);
  position: relative;
  height: 100vh;
  height: 100svh; /* stable quand la barre du navigateur se replie au défilement */
  overflow-x: clip;
  isolation: isolate;
}

/* La vidéo est centrée sur le composant du bas :
   le bas commence à 70 % de la hero, son centre est donc à 85 %.
   Une boîte haute de 2 × 85 % part du haut et a son centre au même endroit.
   Fixe à l'écran : elle reste visible derrière tout le reste du site au défilement. */
.hero__video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 170vh;
  height: 170svh;
  object-fit: cover;
  z-index: -3;
}

/* Assombrit légèrement la vidéo pour la lisibilité (fixe, comme la vidéo) */
.hero__veil {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 80% at 50% 30%, rgba(0,0,0,0), rgba(0,0,0,0.4)),
    linear-gradient(180deg, rgba(8, 5, 4,0.12), rgba(8, 5, 4,0.3));
}

/* Grain argentique, comme la référence */
.hero__grain {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0.045; /* grain fixe, sans fusion : même rendu, bien plus léger */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
/* fixe, comme la vidéo : même grain sur tout le site */
.hero > .hero__grain { position: fixed; }

/* Layout : bloc glass en haut (titre), vidéo visible en bas (CTA) */
.hero__grid {
  display: grid;
  grid-template-rows: 70% 30%; /* 70 % haut / 30 % bas */
  height: 100%;
}

/* ==========================================================================
   Glass
   ========================================================================== */
.glass {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  isolation: isolate;
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  /* Halo intérieur sur les bords (effet de la référence) + ombre portée */
  box-shadow:
    inset 0 0 60px -6px var(--glass-glow),
    inset 0 0 18px -4px var(--glass-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 20px 50px -20px rgba(0, 0, 0, 0.7);
}

/* Bordure spéculaire : plus lumineuse en haut à gauche et en bas à droite */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.08) 30%,
    rgba(255, 255, 255, 0.02) 55%,
    rgba(255, 255, 255, 0.30) 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}

/* Reflet diffus en haut */
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(120% 60% at 20% -10%, rgba(255, 255, 255, 0.14), transparent 60%);
  pointer-events: none;
  z-index: -1;
}

/* Liquid glass bleu : fond plus teinté + reflet caustique */
.glass--blue {
  --glass-fill: var(--glass-blue-fill);
  --glass-glow: var(--glass-blue-glow);
  -webkit-backdrop-filter: blur(22px) saturate(200%) brightness(0.9);
  backdrop-filter: blur(22px) saturate(200%) brightness(0.9);
}

/* Bloc « feuille » : collé en haut/gauche/droite, coins bas INVERSÉS (concaves).
   Le bloc déborde de --radius-xl vers le bas ; le masque découpe deux quarts
   de cercle dans ce débord pour arrondir les coins haut de la zone vidéo. */
.glass--sheet {
  --r: var(--corner);
  border-radius: 0;
  margin-bottom: calc(-1 * var(--r));
  z-index: 1;
  box-shadow: none;
  -webkit-mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--r) + 1px) no-repeat,
    radial-gradient(circle at 100% 100%, transparent calc(var(--r) - 0.5px), #000 var(--r)) left bottom / var(--r) var(--r) no-repeat,
    radial-gradient(circle at 0 100%, transparent calc(var(--r) - 0.5px), #000 var(--r)) right bottom / var(--r) var(--r) no-repeat;
          mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--r) + 1px) no-repeat,
    radial-gradient(circle at 100% 100%, transparent calc(var(--r) - 0.5px), #000 var(--r)) left bottom / var(--r) var(--r) no-repeat,
    radial-gradient(circle at 0 100%, transparent calc(var(--r) - 0.5px), #000 var(--r)) right bottom / var(--r) var(--r) no-repeat;
}

/* Pas de liseré rectangulaire : il ne suivrait pas la découpe */
.glass--sheet::before { display: none; }

.glass--blue::after {
  background:
    radial-gradient(90% 55% at 15% 100%, rgb(var(--brand-light-rgb) / 0.20), transparent 60%),
    radial-gradient(70% 50% at 100% 0%, rgba(205, 145, 115, 0.18), transparent 65%);
}

.glass--sheet.glass--blue::after {
  background:
    /* halo constant dans les coins découpés, puis fondu au-dessus du bord */
    linear-gradient(0deg,
      rgb(var(--brand-rgb) / 0.42) 0,
      rgb(var(--brand-rgb) / 0.42) var(--r),
      rgb(var(--brand-rgb) / 0.12) calc(var(--r) + 40px),
      transparent calc(var(--r) + 110px)),
    radial-gradient(90% 55% at 15% 100%, rgb(var(--brand-light-rgb) / 0.20), transparent 60%),
    radial-gradient(70% 50% at 100% 0%, rgba(205, 145, 115, 0.18), transparent 65%);
}

/* ==========================================================================
   Contenu hero
   ========================================================================== */
.hero__title {
  grid-area: title;
  font-size: clamp(30px, min(11vw, 8svh), 86px);
  line-height: 1;
  font-weight: 300;
  text-wrap: balance;
  max-width: 12ch;
  text-align: center;
  color: var(--text);
}

/* Alternance des polices mot à mot */
.t-sans {
  font-family: var(--font);
  font-weight: 300;
  font-size: 0.86em;
  letter-spacing: -0.03em;
}

.t-serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: #e6f4fa;
}

/* ==========================================================================
   Prix / avis : contenu posé directement sur le verre du bloc, sans conteneur
   ========================================================================== */
.chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.chip { margin-top: 32px; }
.chip--price  { grid-area: price; }
.chip--rating { grid-area: rating; }

.chip__label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 14px;
  color: var(--text-soft);
}

.chip__value {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-serif);
  font-size: 34px;
  line-height: 1;
  color: var(--text);
}

.chip__value small {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--text-soft);
}

.chip__google { width: 18px; height: 18px; flex: none; }

/* Étoiles : 4 pleines + 1 remplie à --fill */
.chip__stars {
  display: inline-flex;
  gap: 3px;
  height: 18px;
}

.chip__stars svg {
  width: 18px;
  height: 18px;
  fill: #e9c77b;
}

.chip__star-part {
  position: relative;
  width: 18px;
  height: 18px;
}

.chip__star-part svg { position: absolute; inset: 0; }
.chip__star-part svg:first-child { fill: rgba(255, 255, 255, 0.22); }
.chip__star-part .is-fill { clip-path: inset(0 calc(100% - var(--fill)) 0 0); }

/* ==========================================================================
   Navbar
   ========================================================================== */
/* caché sur la fiche véhicule, qui a sa propre barre */
body:has(.vehicle.is-open) .navbar { opacity: 0; visibility: hidden; }
.navbar { transition: opacity 0.4s var(--ease), visibility 0.4s; }

.navbar {
  --t-logo: 0.2s; /* délai d'apparition du logo (hors de la hero désormais) */
  /* fixe : le logo reste en haut au centre sur toute la page d'accueil,
     au-dessus des sections (hors de la hero) */
  position: fixed;
  top: calc(var(--gutter) + env(safe-area-inset-top));
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  justify-content: center;
  padding: 8px var(--gutter);
  pointer-events: none;
}

.logo {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  font-family: var(--font-serif);
  font-size: 19px;
  letter-spacing: 0.08em;
  text-indent: 0.08em;
  color: var(--text);
}

.logo { border-radius: 20px; }

/* Verre épais et transparent, arête basse très lumineuse (logo + CTA) */
.glass-thick {
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.09));
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  box-shadow:
    /* épaisseur du verre : ombre intérieure en haut, lueur intérieure en bas */
    inset 0 10px 16px -10px rgba(0, 0, 0, 0.25),
    inset 0 -8px 14px -8px rgba(255, 255, 255, 0.28),
    /* fin contour sombre extérieur + ombre portée */
    0 0 0 1px rgba(0, 0, 0, 0.25),
    0 16px 32px -14px rgba(0, 0, 0, 0.65);
}

/* Arête spéculaire : discrète en haut, très lumineuse en bas */
.glass-thick::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(
    180deg,
    rgba(170, 210, 225, 0.45) 0%,
    rgba(255, 255, 255, 0.06) 35%,
    rgba(255, 255, 255, 0.10) 65%,
    rgba(255, 255, 255, 0.95) 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
}

/* CTA (le verre vient de .glass-thick) */
.btn-glass {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 64px;
  padding: 0 30px 0 32px;
  border-radius: 20px;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #fff;
  transition: transform 0.4s var(--ease), background 0.4s var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.btn-glass svg { transition: transform 0.5s var(--ease); }

/* CTA de la hero : pilule bien ronde, comme le bouton du footer
   (réfraction des bords via data-liquid-glass) */
.hero__cta .btn-glass { border-radius: var(--radius-pill); padding: 0 34px 0 36px; }
.btn-glass:active { transform: scale(0.97); }

/* --------------------------------------------------------------------------
   Survol : le bleu remplit le bouton par le bas, comme un liquide
   -------------------------------------------------------------------------- */
.btn-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  z-index: -2; /* sous l'arête spéculaire (::before), sous le texte */
  pointer-events: none;
}

.btn-fill__level {
  position: absolute;
  inset: 0 0 -25%; /* marge sous le bouton : le dépassement ne découvre pas le bas */
  background: linear-gradient(180deg, rgb(var(--brand-rgb) / 0.22), rgb(var(--brand-rgb) / 0.38));
  transform: translateY(101%);
  /* léger dépassement : le niveau « clapote » avant de se stabiliser */
  transition: transform 1.1s cubic-bezier(0.22, 1.15, 0.36, 1);
}

.btn-glass:hover .btn-fill__level,
.btn-glass:focus-visible .btn-fill__level,
.btn-glass:active .btn-fill__level {
  transform: translateY(0);
}
.btn-glass:hover svg,
.btn-glass:focus-visible svg { transform: translateX(4px); }

.btn-glass:focus-visible {
  outline: 2px solid rgb(var(--brand-light-rgb) / 0.9);
  outline-offset: 3px;
}

/* Bloc glass du haut : titre centré (le haut laisse la place au logo) */
/* Mobile : titre, puis prix et avis côte à côte en dessous.
   Desktop : prix | titre | avis sur une ligne. */
.hero__panel {
  --pad-top: calc(112px + env(safe-area-inset-top));
  --pad-bottom: calc(36px + var(--radius-xl));
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* marges haut/bas en pistes de grille : le bloc peut se replier à 0 (ouverture) */
  grid-template-rows: var(--pad-top) 1fr auto auto 1fr var(--pad-bottom);
  grid-template-areas:
    ".      ."
    ".      ."
    "title  title"
    "price  rating"
    ".      ."
    ".      .";
  align-items: center;
  justify-items: center;
  column-gap: 12px;
  padding:
    0
    calc(24px + env(safe-area-inset-right))
    0
    calc(24px + env(safe-area-inset-left));
}

/* Bas : vidéo visible, CTA centré ; seule l'arête lumineuse borde la vidéo */
.hero__cta {
  --r: var(--corner);
  position: relative;
  z-index: 2;
  border-radius: var(--r) var(--r) 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding:
    24px
    calc(24px + env(safe-area-inset-right))
    calc(24px + env(safe-area-inset-bottom))
    calc(24px + env(safe-area-inset-left));
}

/* Vidéo vue à travers un verre liquide : redessinée en WebGL (intro.js),
   déformée sur les bords de l'écran. Calcul sur la carte graphique : fluide.
   Sans WebGL, le canvas reste vide et la vidéo s'affiche telle quelle. */
.hero__canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -3; /* au niveau de la vidéo, peint par-dessus (après elle) */
  pointer-events: none;
  opacity: 0; /* visible dès la première image dessinée */
}
.hero__canvas.is-ready { opacity: 1; }

/* ==========================================================================
   Section 2 (au défilement) : directement sur la vidéo, qui reste fixe
   ========================================================================== */
.home-section {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding:
    48px
    calc(24px + env(safe-area-inset-right))
    48px
    calc(24px + env(safe-area-inset-left));
}

/* ==========================================================================
   Section 3 : prestations.
   Feuille iOS (matériau sombre flouté, poignée) qui recouvre l'aperçu de la
   flotte. À l'intérieur, la scène est collée à l'écran : le défilement
   vertical fait glisser les cartes à l'horizontale (--shift / --progress,
   intro.js). Cartes façon écran de téléphone.
   ========================================================================== */
.services {
  --shift: 0px; /* distance horizontale à parcourir, mesurée par intro.js */
  position: relative;
  z-index: 2;
  height: calc(100vh + var(--shift));
  height: calc(100svh + var(--shift));
  border-radius: 38px 38px 0 0;
  /* même teinte que le haut de la carte : pas de liseré gris autour d'elle */
  background: #1c130f; /* opaque : la flotte collée derrière ne transparaît pas */
  box-shadow: 0 -24px 60px -30px rgba(0, 0, 0, 0.9);
}

/* Poignée de feuille iOS, en haut de la carte */
.services__grabber {
  position: absolute;
  top: 10px;
  left: 50%;
  z-index: 1;
  width: 40px;
  height: 5px;
  margin-left: -20px;
  border-radius: var(--radius-pill);
  background: rgb(var(--grey-rgb) / 0.41);
}

.services__sticky {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* la carte ne s'élargit pas au contenu */
  grid-template-rows: 1fr;
  justify-items: center;
  height: 100vh;
  height: 100svh;
  padding: calc(var(--gutter) + env(safe-area-inset-top)) 12px calc(var(--radius-xl) + 32px);
  overflow: hidden;
}

/* Carte dégradée (sombre en haut → gris en bas) qui contient le titre, les
   onglets et le texte ; le haut laisse la place au logo fixe */
.services__card {
  --count: 4;
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  justify-items: center;
  gap: clamp(18px, 3svh, 28px);
  width: min(100%, 760px);
  min-height: 0;
  padding: 100px 0 22px;
  overflow: hidden;
  border-radius: 34px;
  background:
    radial-gradient(80% 40% at 80% 0%, rgb(var(--brand-rgb) / 0.2), transparent 70%),
    linear-gradient(180deg, #1c130f 0%, #2f211a 35%, #704e3d 75%, #8a9399 100%);
}

.services__head {
  display: grid;
  gap: 12px;
  justify-items: center;
  padding: 0 24px;
  text-align: center;
}
.services__eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.services__title {
  font-size: clamp(32px, min(8vw, 6svh), 64px);
  font-weight: 300;
  line-height: 1.02;
  text-wrap: balance;
}
.services__title .t-sans,
.services__title .t-serif { display: block; }

/* Onglets : 3 icônes, l'active en blanc, trait qui glisse dessous */
.services__tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--count), 64px);
  padding-bottom: 8px;
}
.services__tab {
  display: grid;
  place-items: center;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  color: rgb(var(--grey-rgb) / 0.61);
  cursor: pointer;
  transition: color 0.3s var(--ease);
}
.services__tab svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.services__tab.is-active { color: #fff; }
.services__tab:focus-visible { outline: 2px solid rgb(var(--brand-light-rgb) / 0.9); outline-offset: -2px; border-radius: 10px; }
.services__indicator {
  position: absolute;
  left: 20px;
  bottom: 0;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transform: translateX(calc(var(--progress, 0) * (var(--count) - 1) * 64px));
}

/* Zone du texte de la prestation : glisse à l'horizontale */
.services__panel {
  position: relative;
  width: 100%;
  min-height: 0;
  overflow: hidden;
}
.services__track {
  display: flex;
  height: 100%;
  transform: translateX(calc(var(--progress, 0) * (var(--count) - 1) * -100%));
  will-change: transform;
}
.services__slide {
  flex: none;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  padding: 24px;
  text-align: center;
}
.services__track { width: 100%; }
.services__slide-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(var(--grey-rgb) / 0.81);
}
.services__slide p {
  max-width: 24ch;
  text-wrap: balance;
  font-size: clamp(17px, 2.6svh, 21px);
  font-weight: 300;
  line-height: 1.3;
  color: #f2f4f6;
}

/* Rond blanc en bas de la carte */
.services__action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 24px 0 26px;
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 600;
  background: #fff;
  color: #0b0b0c;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.6);
  transition: transform 0.4s cubic-bezier(0.22, 1.15, 0.36, 1);
}
.services__action svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (hover: hover) and (pointer: fine) {
  .services__action:hover { transform: translateY(-4px); }
}
.services__action:active { transform: scale(0.9); transition-duration: 0.12s; }
.services__action:focus-visible { outline: 2px solid rgb(var(--brand-light-rgb) / 0.9); outline-offset: 3px; }

/* Mobile / tablette : la carte prend la hauteur de son contenu (centrée),
   la zone de texte a une hauteur fixe → plus de grands vides */
@media (max-width: 1023px) {
  .services__sticky { align-items: center; }
  .services__card {
    grid-template-rows: auto auto auto auto;
    gap: 20px;
    padding: 88px 0 24px;
  }
  .services__panel { height: 168px; }
  .services__slide { padding: 8px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .services__tab, .services__action { transition: none; }
}

/* ==========================================================================
   Section 4 : avis. Continue la feuille sombre des prestations (même teinte),
   note Google en grand puis avis façon notifications iOS qui défilent.
   ========================================================================== */
.reviews {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 40px;
  padding: 72px 0;
  overflow: hidden;
}

.reviews__head {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 0 24px;
  text-align: center;
}
.reviews__eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.reviews__title {
  font-size: clamp(36px, 9vw, 64px);
  font-weight: 300;
  line-height: 1.02;
}
.reviews__title .t-sans,
.reviews__title .t-serif { display: block; }

/* Note globale : grand chiffre + étoiles + Google */
.reviews__score {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
}
.reviews__note {
  font-family: var(--font-serif);
  font-size: 64px;
  line-height: 1;
}
.reviews__meta { display: grid; gap: 6px; justify-items: start; }
.reviews__stars { display: flex; gap: 3px; }
.reviews__stars svg { width: 18px; height: 18px; fill: #f5c451; }
.reviews__count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-soft);
}
.reviews__g svg { display: block; width: 16px; height: 16px; }

/* Rangées qui défilent en continu ; fondu sur les bords */
.reviews__rows {
  display: grid;
  gap: 14px;
  width: 100%;
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.reviews__row { overflow: hidden; }
.reviews__track {
  display: flex;
  gap: 14px;
  width: max-content;
  list-style: none;
  animation: reviews-scroll 60s linear infinite;
}
.reviews__row--right .reviews__track { animation-direction: reverse; }
.reviews__rows:hover .reviews__track { animation-play-state: paused; }
@keyframes reviews-scroll {
  to { transform: translateX(calc(-50% - 7px)); }
}

/* Avis façon notification iOS : verre clair, icône de l'app, nom en gras */
.review {
  flex: none;
  display: grid;
  gap: 6px;
  width: min(78vw, 340px);
  padding: 14px 16px 16px;
  border-radius: 24px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06));
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 12px 30px -18px rgba(0, 0, 0, 0.7);
}
.review__top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}
.review__app {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #fff;
}
.review__app svg { width: 15px; height: 15px; }
.review__source {
  flex: 1;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.review__stars { display: flex; gap: 2px; }
.review__stars svg { width: 12px; height: 12px; fill: #f5c451; }
.review__name { font-size: 15px; font-weight: 600; }
.review__text {
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink-soft);
}

.review { transition: background-color 0.8s var(--ease); }
.flow > section[data-theme="light"] .review {
  background: rgba(255, 255, 255, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 12px 30px -18px rgba(18, 12, 9, 0.35);
}
.flow > section[data-theme="light"] .reviews__link { color: var(--ink); }

/* Lien vers la fiche Google : pilule en verre */
.reviews__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 24px;
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 500;
}
.reviews__link svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .reviews__link:hover svg { transform: translate(2px, -2px); }
}
.reviews__link:focus-visible { outline: 2px solid rgb(var(--brand-light-rgb) / 0.9); outline-offset: 3px; }

@media (min-width: 768px) {
  .reviews { gap: 56px; padding-top: 112px; }
  .reviews__note { font-size: 80px; }
}

/* Mouvement réduit : pas de défilement automatique, défilement à la main */
@media (prefers-reduced-motion: reduce) {
  .reviews__track { animation: none; }
  .reviews__row { overflow-x: auto; scrollbar-width: none; }
}

/* ==========================================================================
   En-tête commun des sections de la feuille sombre
   ========================================================================== */
.block-head {
  display: grid;
  justify-items: center;
  gap: 14px;
  text-align: center;
}
.block-head__eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.block-head__title {
  font-size: clamp(36px, 9vw, 64px);
  font-weight: 300;
  line-height: 1.02;
}
.block-head__title .t-sans,
.block-head__title .t-serif { display: block; }

/* ==========================================================================
   Sections du bas : couleurs fixes. Chaque section part de la couleur de la
   précédente (--from) et rejoint la sienne (--bg) par un long dégradé :
   la transition fait partie de la page, on la traverse en défilant.
   Thème clair / sombre par section (--ink, --surface…).
   ========================================================================== */
.flow {
  position: relative;
  z-index: 2;
  margin-top: -1px;
}
.flow > section {
  --from: #1c130f;
  --bg: #1c130f;
  --ink: #f5f5f7;
  --ink-soft: rgb(var(--grey-rgb) / 0.9);
  --surface: rgba(255, 255, 255, 0.05);
  --hairline: rgba(255, 255, 255, 0.12);
  --accent: var(--brand-light);
  --text: var(--ink);
  --text-soft: var(--ink-soft);
  position: relative;
  z-index: 1;
  margin-top: -1px;
  color: var(--ink);
  /* dégradé seul (sans couleur de fond dessous) : aucun liseré au bord */
  background: linear-gradient(180deg, var(--from) 0, var(--bg) var(--blend, 240px), var(--bg) 100%);
  box-shadow: 0 -3px 0 var(--from);
}
/* sections claires : encre foncée */
.flow > section[data-theme="light"] {
  --ink: #120c09;
  --ink-soft: #6f665e;
  --surface: rgba(18, 12, 9, 0.05);
  --hairline: rgba(18, 12, 9, 0.12);
  --accent: #8a5238;
}
/* palette : nuit → bleu pétrole → clair → bleu nuit → ivoire.
   Le dégradé (--blend) tient entièrement dans l'espace vide du haut de la
   section : le contenu ne commence qu'après, sur la couleur pleine (+ --lead). */
.flow > section { --lead: 32px; padding-top: calc(var(--blend) + var(--lead)); }
.flow > .howto      { --from: #1c130f; --bg: #180f0b; --blend: 56px; padding-bottom: 0; }
.flow > .conditions { --from: #180f0b; --bg: #0c0806; --blend: 56px; }
.flow > .offers     { --from: #0c0806; --bg: #19100c; --blend: 56px; }
.flow > .reviews    { --from: #19100c; --bg: #0c0806; --blend: 120px; }
.flow > .gallery    { --from: #f5f2ec; --bg: #f5f2ec; --blend: 16px; }
.flow > .faq        { --from: #f5f2ec; --bg: #f5f2ec; --blend: 16px; }
.flow > .contact    { --from: #f5f2ec; --bg: #140e0b; --blend: 120px; }
/* Avis et contact : sections transparentes, on revoit la vidéo de fond
   (voile léger pour la lisibilité) */
.flow > section[data-see-video] {
  background: linear-gradient(180deg, var(--from) 0, rgba(12, 8, 6, 0.45) var(--blend), rgba(12, 8, 6, 0.45) 100%);
}
/* Avis → FAQ : le fondu se fait dans le bas des avis (espace vide). L'ivoire
   monte en opacité (courbe adoucie) pendant que le voile sombre s'efface ;
   la FAQ commence sur l'ivoire plein : aucun raccord visible. */
.flow > .reviews[data-see-video] {
  --tail: 220px;
  padding-bottom: calc(var(--tail) + 40px);
  background:
    linear-gradient(180deg,
      rgba(245, 242, 236, 0) calc(100% - var(--tail)),
      rgba(245, 242, 236, 0.04) calc(100% - var(--tail) * 0.8),
      rgba(245, 242, 236, 0.16) calc(100% - var(--tail) * 0.6),
      rgba(245, 242, 236, 0.42) calc(100% - var(--tail) * 0.4),
      rgba(245, 242, 236, 0.78) calc(100% - var(--tail) * 0.2),
      #f5f2ec 100%),
    linear-gradient(180deg,
      var(--from) 0,
      rgba(12, 8, 6, 0.45) var(--blend),
      rgba(12, 8, 6, 0.45) calc(100% - var(--tail)),
      rgba(12, 8, 6, 0.3) calc(100% - var(--tail) * 0.5),
      rgba(12, 8, 6, 0) 100%);
}
@media (min-width: 1024px) {
  .flow > .reviews { --tail: 360px; padding-bottom: calc(var(--tail) + 64px); }
}
@media (max-width: 1023px) {
  .flow > section:not(.contact) { padding-bottom: 48px; }
}
@media (min-width: 1024px) {
  .flow > section { --lead: 96px; }
  .flow > .conditions,
  .flow > .howto,
  .flow > .offers { --blend: 120px; }
  .flow > .gallery { --blend: 16px; }
  .flow > .reviews,
  .flow > .contact { --blend: 260px; }
  .flow > .faq { --blend: 16px; }
}

/* l'accent en italique suit le thème (il est bleuté clair ailleurs) */
.flow .t-serif { color: var(--ink); }

/* Logo et navbars au-dessus d'une section claire : contenu foncé */
.navbar .logo,
.tabbar__btn:not(.is-active) { transition: color 0.5s var(--ease); }
html.is-on-light .navbar .logo { color: #120c09; }
html.is-on-light-bottom .tabbar__btn:not(.is-active) { color: rgba(18, 12, 9, 0.8); }
html.is-on-light-bottom .tabbar__btn.is-active { color: #120c09; background: rgba(255, 255, 255, 0.55); }

/* Plan épuré (étape 4 des conditions + à propos) : tuiles de fond de carte
   sombres sans aucun nom ni lieu (Esri « World Dark Gray Base »), posées par intro.js autour du centre ; non interactif.
   Épingle dans une pastille en verre liquide au centre. */
.gmap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: #140e0b;
}
.gmap img {
  position: absolute;
  width: 256px;
  height: 256px;
  max-width: none;
  user-select: none;
}
.gmap__credit {
  position: absolute;
  top: 10px;
  right: 16px;
  z-index: 1;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  pointer-events: none;
}
/* voile qui calme les bords et les détails du plan : l'œil va à l'épingle */
.gmap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(closest-side, transparent 35%, rgba(16, 11, 9, 0.55));
}
.map-pin {
  position: relative;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.12),
    0 14px 30px -12px rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(2px) saturate(160%);
  backdrop-filter: blur(2px) saturate(160%);
}
.map-pin__dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  color: #120c09;
  box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.5);
}
.map-pin__dot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  animation: map-pulse 2.4s var(--ease-out) infinite;
}
@keyframes map-pulse {
  from { transform: scale(1); opacity: 0.7; }
  to { transform: scale(2.6); opacity: 0; }
}
.map-pin__dot svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (prefers-reduced-motion: reduce) {
  .map-pin__dot::before { animation: none; opacity: 0; }
}

.conditions__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--accent);
}
.conditions__link svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .conditions__link:hover svg { transform: translateX(3px); }
}
.conditions__link:focus-visible { outline: 2px solid rgb(var(--brand-light-rgb) / 0.9); outline-offset: 3px; border-radius: 4px; }

/* ==========================================================================
   À propos : manifeste qui s'allume mot à mot (--p : progression du
   défilement, intro.js), photo qui s'ouvre d'une capsule à la pleine
   taille, chiffres en compteur kilométrique.
   ========================================================================== */
/* Placée juste après la flotte : feuille sombre (coins arrondis en haut)
   qui glisse par-dessus l'aperçu collé de la flotte, comme les prestations */
.about {
  --ink: #f5f5f7;
  --ink-soft: rgb(var(--grey-rgb) / 0.9);
  --surface: rgba(255, 255, 255, 0.05);
  --hairline: rgba(255, 255, 255, 0.12);
  --accent: var(--brand-light);
  --text: var(--ink);
  --text-soft: var(--ink-soft);
  position: relative;
  z-index: 2;
  padding: 72px 16px 96px;
  border-radius: 38px 38px 0 0;
  background: #20110a;
  color: var(--ink);
  box-shadow: 0 -24px 60px -30px rgba(0, 0, 0, 0.9);
}
.about .t-serif { color: var(--ink); }
.about__inner {
  display: grid;
  justify-items: center;
  gap: 40px;
  width: min(100%, 1080px);
  margin: 0 auto;
}

.about__manifesto {
  max-width: 22ch;
  font-size: clamp(28px, 7.5vw, 56px);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-align: center;
  text-wrap: balance;
}
.about__manifesto .w {
  opacity: 0.16;
  transition: opacity 0.35s var(--ease);
}
.about__manifesto .w.is-lit { opacity: 1; }

/* Plan de l'agence (à propos) : carte arrondie, épingle au centre, fiche en
   verre en bas avec lien vers l'itinéraire */
.about__map {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 320px;
  overflow: hidden;
  border-radius: 32px;
  background: #281c16;
  isolation: isolate;
}
.about__map-card {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px 14px 20px;
  border-radius: 22px;
  background: rgba(30, 21, 16, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  color: #f5f5f7;
}
.about__map-text { display: grid; gap: 2px; }
.about__map-title { font-size: 15px; font-weight: 600; }
.about__map-addr { font-size: 13px; font-style: italic; color: rgb(var(--grey-rgb) / 0.81); }
.about__map-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: #fff;
  color: #120c09;
  font-size: 14px;
  font-weight: 600;
  transition: transform 0.3s var(--ease);
}
.about__map-go svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (hover: hover) and (pointer: fine) {
  .about__map-card:hover .about__map-go { transform: translateX(3px); }
}
.about__map-card:focus-visible { outline: 2px solid rgb(var(--brand-light-rgb) / 0.9); outline-offset: 3px; }
@media (min-width: 1024px) {
  .about__map { height: 440px; border-radius: 40px; }
  .about__map-card { left: 20px; right: auto; bottom: 20px; min-width: 360px; }
}

/* Photo : capsule au départ, pleine taille à l'arrivée (clip-path) */
.about__photo {
  --open: 0;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 28px;
  background:
    radial-gradient(80% 60% at 30% 20%, rgb(var(--brand-rgb) / 0.3), transparent 70%),
    linear-gradient(160deg, #2f211a, #493328);
  font-family: var(--font-serif);
  font-size: 18px;
  letter-spacing: 0.06em;
  color: rgb(var(--grey-rgb) / 0.74);
  clip-path: inset(calc((1 - var(--open)) * 34%) calc((1 - var(--open)) * 30%) round calc(28px + (1 - var(--open)) * 200px));
}

/* Compteurs façon odomètre : chaque chiffre est un rouleau 0 → 9 */
.about__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  list-style: none;
}
.odo {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 8px 0;
}
.odo__window {
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 1.15em;
  font-family: var(--font-serif);
  font-size: 44px;
  line-height: 1.15;
}
.odo__digit {
  display: block;
  height: 1.15em;
  overflow: hidden;
}
.odo__reel {
  display: grid;
  transform: translateY(0);
  transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.odo__reel span { height: 1.15em; text-align: center; }
.about__stats.is-counting .odo__reel { transform: translateY(calc(var(--d) * -1.15em)); }
.about__stats.is-counting .odo:nth-child(2) .odo__reel { transition-delay: 0.12s; }
.about__stats.is-counting .odo:nth-child(3) .odo__reel { transition-delay: 0.24s; }
.about__stats.is-counting .odo:nth-child(4) .odo__reel { transition-delay: 0.36s; }
.odo__sep { font-size: 0.8em; opacity: 0.7; }
.odo__label { font-size: 13px; color: var(--text-soft); text-align: center; }

@media (min-width: 768px) {
  .about { padding: 112px 24px; }
  .about__inner { gap: 56px; }
  .about__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .odo__window { font-size: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .odo__reel, .about__manifesto .w { transition: none; }
  .about__manifesto .w { opacity: 1; }
  .about__photo { clip-path: none; }
}

/* ==========================================================================
   Contact : fiche façon app Contacts d'iOS + conversation façon iMessage
   ========================================================================== */
.contact {
  display: grid;
  justify-items: center;
  gap: 48px;
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: calc(var(--radius-xl) + 72px);
}
.contact__grid {
  display: grid;
  gap: 16px;
  width: min(100%, 1040px);
}

/* Fiche contact */
.contact-card {
  display: grid;
  justify-items: center;
  align-content: start;
  padding: 32px 20px 12px;
  border-radius: 28px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--hairline);
  text-align: center;
}
.contact-card__avatar,
.chat__avatar {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(160deg, #c98d70, #5a3424);
  font-family: var(--font-serif);
  letter-spacing: 0.06em;
  color: #fff;
}
.contact-card__avatar { width: 88px; height: 88px; font-size: 15px; box-shadow: 0 12px 28px -12px rgb(var(--brand-rgb) / 0.7); }
.contact-card__name { margin-top: 16px; font-size: 21px; font-weight: 600; }
.contact-card__sub { margin-top: 2px; font-size: 15px; color: var(--text-soft); }
.contact-card__actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
  margin-top: 22px;
}
.contact-card__action {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 12px 6px 10px;
  border-radius: 16px;
  background: var(--surface);
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  transition: transform 0.4s cubic-bezier(0.22, 1.15, 0.36, 1), background-color 0.25s var(--ease);
}
.contact-card__action:active { transform: scale(0.94); transition-duration: 0.12s; }
@media (hover: hover) and (pointer: fine) {
  .contact-card__action:hover { background: var(--hairline); }
}
.contact-card__action:focus-visible { outline: 2px solid rgb(var(--brand-light-rgb) / 0.9); outline-offset: 2px; }
.contact-card__icon svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.contact-card__rows {
  width: 100%;
  margin-top: 22px;
  text-align: left;
}
.contact-card__rows > div {
  display: grid;
  gap: 2px;
  padding: 12px 4px;
}
.contact-card__rows > div + div { border-top: 1px solid var(--hairline); }
.contact-card__rows dt { font-size: 13px; color: var(--text-soft); }
.contact-card__rows dd { font-size: 16px; color: var(--accent); }
.contact-card__rows .is-todo { font-style: italic; color: var(--text-soft); }

/* Conversation */
.chat {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  height: 560px;
  overflow: hidden;
  border-radius: 28px;
  background: rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.chat__head {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 14px 16px 12px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid var(--hairline);
}
.chat__avatar { width: 40px; height: 40px; font-size: 9px; }
.chat__name { font-size: 12px; color: var(--text-soft); }

.chat__log {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 14px;
  overflow-y: auto;
  scrollbar-width: none;
}
.chat__log::-webkit-scrollbar { display: none; }

.bubble {
  max-width: 78%;
  padding: 9px 14px;
  border-radius: 20px;
  font-size: 16px;
  line-height: 1.35;
  animation: bubble-in 0.4s cubic-bezier(0.22, 1.15, 0.36, 1) both;
}
.bubble--in {
  align-self: flex-start;
  border-bottom-left-radius: 6px;
  background: #26262a;
  color: #f5f5f7;
  transform-origin: 0 100%;
}
.bubble--out {
  align-self: flex-end;
  border-bottom-right-radius: 6px;
  background: var(--brand);
  color: #fff;
  transform-origin: 100% 100%;
}
@keyframes bubble-in {
  from { opacity: 0; transform: scale(0.6) translateY(8px); }
}
.chat__status {
  align-self: flex-end;
  margin-top: -2px;
  font-size: 11px;
  color: var(--text-soft);
}

/* « en train d'écrire » : trois points qui ondulent */
.bubble--typing { display: inline-flex; gap: 4px; padding: 13px 14px; }
.bubble--typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgb(var(--grey-rgb) / 0.74);
  animation: typing 1s ease-in-out infinite;
}
.bubble--typing span:nth-child(2) { animation-delay: 0.15s; }
.bubble--typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* Réponses rapides */
.chat__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 14px 10px;
}
.chat__chips:empty { display: none; }
.chat__chip {
  padding: 8px 14px;
  border: 1px solid rgb(var(--brand-rgb) / 0.6);
  border-radius: var(--radius-pill);
  background: none;
  color: #e2a98c;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), transform 0.3s cubic-bezier(0.22, 1.15, 0.36, 1);
}
.chat__chip:hover { background: rgb(var(--brand-rgb) / 0.12); }
.chat__chip:active { transform: scale(0.95); }

/* Barre de saisie */
.chat__composer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--hairline);
}
.chat__input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font: inherit;
  font-size: 16px;
}
.chat__input::placeholder { color: var(--text-soft); }
.chat__input:focus { outline: none; border-color: rgb(var(--brand-rgb) / 0.7); }
.chat__input.is-invalid { border-color: #ff453a; }
.chat__send {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.22, 1.15, 0.36, 1), opacity 0.2s var(--ease);
}
.chat__send:active { transform: scale(0.88); }
.chat__send:disabled { opacity: 0.35; cursor: default; }
.chat__send svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chat__send:focus-visible, .chat__chip:focus-visible { outline: 2px solid rgb(var(--brand-light-rgb) / 0.9); outline-offset: 2px; }

@media (min-width: 900px) {
  .contact { gap: 64px; }
  .contact__grid { grid-template-columns: 360px 1fr; gap: 20px; align-items: stretch; }
  .chat { height: 600px; }
}

@media (prefers-reduced-motion: reduce) {
  .bubble, .bubble--typing span { animation: none; }
}

/* ==========================================================================
   Section 5 : FAQ. Continue la feuille sombre ; liste groupée façon réglages
   iOS (lignes séparées par un filet), réponses qui se déplient en douceur
   (grid-template-rows 0fr → 1fr).
   ========================================================================== */
.faq {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 40px;
  padding: 24px 16px calc(var(--radius-xl) + 72px);
}

.faq__head {
  display: grid;
  justify-items: center;
  gap: 14px;
  text-align: center;
}
.faq__eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.faq__title {
  font-size: clamp(36px, 9vw, 64px);
  font-weight: 300;
  line-height: 1.02;
}
.faq__title .t-sans,
.faq__title .t-serif { display: block; }

.faq__list {
  width: min(100%, 720px);
  list-style: none;
  border-radius: 26px;
  background: var(--surface);
  overflow: hidden;
}
.faq__item + .faq__item { border-top: 1px solid var(--hairline); }

.faq__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 20px 22px;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.25s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) and (pointer: fine) {
  .faq__toggle:hover { background: var(--surface); }
}
.faq__toggle:focus-visible { outline: 2px solid rgb(var(--brand-light-rgb) / 0.9); outline-offset: -2px; }

/* « + » qui tourne en « × » à l'ouverture */
.faq__icon {
  position: relative;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface);
  transition: transform 0.4s var(--ease-out), background-color 0.3s var(--ease);
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.6px;
  margin: -0.8px 0 0 -6px;
  border-radius: 1px;
  background: currentColor;
}
.faq__icon::after { transform: rotate(90deg); }
.faq__item.is-open .faq__icon { transform: rotate(45deg); background: var(--hairline); }

/* Réponse : se déplie sans animer la hauteur directement */
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ease-out);
}
.faq__a > div { min-height: 0; overflow: hidden; }
.faq__a p {
  padding: 0 22px 22px;
  max-width: 60ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-soft);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__item.is-open .faq__a p { opacity: 1; transition-delay: 0.1s; }

@media (min-width: 768px) {
  .faq { gap: 56px; padding-top: 48px; }
  .faq__toggle { padding: 24px 28px; font-size: 17px; }
  .faq__a p { padding: 0 28px 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .faq__toggle, .faq__icon, .faq__a, .faq__a p { transition: none; }
}

/* ==========================================================================
   Footer : carte en liquid glass « clair », quasi transparent, sur la vidéo
   ========================================================================== */
.site-footer {
  position: relative;
  z-index: 3; /* au-dessus de la feuille des prestations */
  /* remonte sous la fin des prestations : derrière les coins arrondis du haut,
     on voit leur fond sombre et non la vidéo */
  margin-top: calc(-1 * var(--radius-xl));
}

/* Collée en bas, à gauche et à droite : seuls les coins du haut sont
   arrondis, sans trait de bordure */
.site-footer__card {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 28px;
  padding:
    32px
    calc(24px + env(safe-area-inset-right))
    calc(20px + env(safe-area-inset-bottom))
    calc(24px + env(safe-area-inset-left));
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  color: var(--text);
  /* verre presque invisible : la vidéo reste nette, juste adoucie */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02) 45%, rgba(255, 255, 255, 0.03));
  -webkit-backdrop-filter: blur(4px) saturate(140%) brightness(1.08);
  backdrop-filter: blur(4px) saturate(140%) brightness(1.08);
  box-shadow:
    /* épaisseur du verre : lueur claire diffuse en haut */
    inset 0 14px 24px -14px rgba(255, 255, 255, 0.22),
    0 -12px 40px -24px rgba(0, 0, 0, 0.55);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}


/* Typo des liens : capitales en chasse fixe, comme la référence */
.site-footer__card {
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  grid-template-columns: 1fr;
  gap: 32px;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.site-footer__logo {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.06);
  font-family: var(--font-serif);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-indent: 0.08em;
  text-transform: none;
}

.site-footer__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 24px;
}
.site-footer__col { display: grid; align-content: start; gap: 22px; }
.site-footer__title {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: rgb(var(--grey-rgb) / 0.68);
}
.site-footer__links {
  display: grid;
  gap: 18px;
  list-style: none;
  font-size: 12px;
}
.site-footer__links address { font-style: normal; }
.site-footer__links a { transition: color 0.2s var(--ease); }
.site-footer__links a:hover { color: var(--brand-light); }

/* Bouton pilule bien ronde en liquid glass (verre de .glass-thick +
   réfraction des bords via data-liquid-glass) */
.site-footer__cta {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 54px;
  padding: 0 28px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 500;
  transition: background-color 0.3s var(--ease);
}
.site-footer__cta svg { transition: transform 0.3s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .site-footer__cta:hover { background: rgb(var(--brand-rgb) / 0.35); }
  .site-footer__cta:hover svg { transform: translateX(3px); }
}
.site-footer a:focus-visible { outline: 2px solid rgb(var(--brand-light-rgb) / 0.9); outline-offset: 3px; }

/* Illustration au trait, posée sur la ligne du bas */
.site-footer__art {
  justify-self: end;
  width: 150px;
  height: auto;
  margin-bottom: -20px;
  fill: none;
  stroke: rgba(245, 245, 247, 0.85);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 10px;
  color: rgb(var(--grey-rgb) / 0.68);
}
.site-footer__legal-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.site-footer__legal a { transition: color 0.2s var(--ease); }
.site-footer__legal a:hover { color: #fff; }

/* Desktop : logo en haut, puis 3 colonnes à gauche et le bouton à droite */
@media (min-width: 768px) {
  .site-footer__card {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "logo logo"
      "cols cta"
      "legal legal";
    gap: 40px 32px;
    padding: 36px clamp(32px, 4vw, 64px) calc(22px + env(safe-area-inset-bottom));
  }
  .site-footer__logo  { grid-area: logo; }
  .site-footer__cols  { grid-area: cols; grid-template-columns: repeat(3, minmax(0, 210px)); }
  .site-footer__cta   { grid-area: cta; align-self: start; }
  .site-footer__legal { grid-area: legal; }
}

/* Pendant le défilement, les verres à réfraction (filtre SVG recalculé à
   chaque image) passent sur un simple flou : la réfraction revient à l'arrêt */
html.is-scrolling [data-liquid-glass] {
  -webkit-backdrop-filter: blur(8px) saturate(150%) !important;
  backdrop-filter: blur(8px) saturate(150%) !important;
}

/* Footer copié dans la flotte et la fiche véhicule */
.site-footer--fleet { margin-top: 24px; }
.site-footer--compact {
  margin: 28px -20px calc(-20px - env(safe-area-inset-bottom));
}
.site-footer[hidden] { display: none; }
/* Fiche véhicule : colonne étroite → mise en page mobile, quelle que soit la taille d'écran */
.site-footer--compact .site-footer__card {
  grid-template-columns: 1fr;
  grid-template-areas: none;
  gap: 28px;
  padding: 28px 20px calc(20px + env(safe-area-inset-bottom));
  border-radius: 28px 28px 0 0;
}
.site-footer--compact .site-footer__logo,
.site-footer--compact .site-footer__cols,
.site-footer--compact .site-footer__cta,
.site-footer--compact .site-footer__art,
.site-footer--compact .site-footer__legal { grid-area: auto; }
.site-footer--compact .site-footer__cols { grid-template-columns: 1fr 1fr; }
.site-footer--compact .site-footer__art { display: none; }

/* ==========================================================================
   Apparitions au défilement (motion design sobre) : intro.js pose
   data-reveal et --d (décalage), puis .is-revealed à l'entrée à l'écran.
   Lignes de titre dévoilées derrière un cache, blocs qui montent ou
   arrivent par le côté. Uniquement transform / opacity / clip-path.
   ========================================================================== */
[data-reveal] {
  transition:
    opacity 0.8s var(--ease-out),
    transform 1.1s var(--ease-out),
    clip-path 1.1s var(--ease-out);
  transition-delay: var(--d, 0s);
}
[data-reveal="fade-up"]:not(.is-revealed)    { opacity: 0; transform: translateY(28px); }
[data-reveal="from-left"]:not(.is-revealed)  { opacity: 0; transform: translateX(-56px); }
[data-reveal="from-right"]:not(.is-revealed) { opacity: 0; transform: translateX(56px); }
[data-reveal="fade-scale"]:not(.is-revealed) { opacity: 0; transform: scale(0.94); }
[data-reveal="line"] { clip-path: inset(-0.25em -0.3em -0.25em -0.3em); }
[data-reveal="line"]:not(.is-revealed) {
  clip-path: inset(-0.25em -0.3em 100% -0.3em);
  transform: translateY(0.6em);
}
/* mots qui montent derrière un cache, l'un après l'autre */
.wd { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.wd__in {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.9s var(--ease-out);
  transition-delay: calc(var(--d, 0s) + var(--wi) * 35ms);
}
[data-reveal="words"].is-revealed .wd__in,
:not([data-reveal]) > .wd > .wd__in { transform: none; }
/* billets qui basculent depuis le haut, comme un ticket qu'on rabat */
[data-reveal="flip"] { transform-origin: 50% 0; }
[data-reveal="flip"]:not(.is-revealed) {
  opacity: 0;
  transform: perspective(900px) rotateX(-80deg) translateY(-12px);
}
/* photos dévoilées par un rideau qui remonte, l'image se resserre */
[data-reveal="mask"]:not(.is-revealed) { clip-path: inset(100% 0 0 0 round 20px); }
[data-reveal="mask"] { clip-path: inset(0 0 0 0 round 20px); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { transition: none; }
  .wd__in { transform: none; transition: none; }
}

/* Bouton blanc des offres */
.offers__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: var(--radius-pill);
  background: #fff;
  color: #120c09;
  font-size: 15px;
  font-weight: 600;
  transition: transform 0.4s cubic-bezier(0.22, 1.15, 0.36, 1);
}
.offers__cta svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .offers__cta:hover { transform: translateY(-2px); }
  .offers__cta:hover svg { transform: translateX(3px); }
}
.offers__cta:active { transform: scale(0.96); transition-duration: 0.12s; }
.offers__cta:focus-visible { outline: 2px solid rgb(var(--brand-light-rgb) / 0.9); outline-offset: 3px; }

/* ==========================================================================
   Comment ça marche : récit au défilement façon Apple. .howto__track donne
   la longueur de défilement, .howto__pin reste collée ; intro.js pose
   .is-active sur l'étape et la scène courantes, --bar (0 → 1) sur chaque
   étape. L'écran est une interface iOS (pas de téléphone autour).
   ========================================================================== */
.howto {
  padding-left: 20px;
  padding-right: 20px;
}
.howto__track { height: calc(100vh + 3 * 75vh); height: calc(100svh + 3 * 75svh); }
.howto__pin {
  position: sticky;
  top: 0;
  display: grid;
  align-items: center;
  height: 100vh;
  height: 100svh;
  padding: calc(96px + env(safe-area-inset-top)) 0 calc(108px + env(safe-area-inset-bottom));
}
.howto__stage {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 24px;
  width: min(100%, 460px);
  height: 100%;
  margin: 0 auto;
}

/* --- écran : fond d'écran iOS sombre, scènes empilées en fondu */
.howto__screen {
  position: relative;
  display: grid;
  min-height: 0;
  overflow: hidden;
  border-radius: 36px;
  background:
    radial-gradient(80% 60% at 20% 0%, rgb(var(--brand-rgb) / 0.35), transparent 70%),
    radial-gradient(70% 60% at 100% 100%, rgba(90, 74, 110, 0.4), transparent 70%),
    #140d0a;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 40px 80px -40px rgba(0, 0, 0, 0.9);
  isolation: isolate;
}
.howto__scene {
  grid-area: 1 / 1;
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  opacity: 0;
  transform: scale(0.94) translateY(16px);
  transition: opacity 0.5s var(--ease), transform 0.8s var(--ease-out);
  pointer-events: none;
}
.howto__scene.is-active { opacity: 1; transform: none; }

/* 1 — cartes de la flotte qui s'ouvrent en éventail */
.scene-fleet__card {
  grid-area: 1 / 1;
  position: relative;
  display: grid;
  align-content: end;
  gap: 8px;
  width: 58%;
  aspect-ratio: 3 / 4;
  padding: 18px;
  border-radius: 26px;
  background:
    radial-gradient(90% 70% at 30% 15%, rgba(255, 255, 255, 0.3), transparent 60%),
    linear-gradient(160deg, var(--photo), color-mix(in srgb, var(--photo) 40%, #000));
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.8);
  transition: transform 0.9s var(--ease-out);
}
.scene-fleet__card--1 { --photo: #2f6f95; z-index: 3; }
.scene-fleet__card--2 { --photo: #9a5c38; z-index: 2; transform: scale(0.94); }
.scene-fleet__card--3 { --photo: #4f6b48; z-index: 1; transform: scale(0.88); }
.scene-fleet.is-active .scene-fleet__card--2 { transform: translateX(-34%) rotate(-9deg) scale(0.9); transition-delay: 0.15s; }
.scene-fleet.is-active .scene-fleet__card--3 { transform: translateX(34%) rotate(9deg) scale(0.9); transition-delay: 0.15s; }
.scene-chip {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: 11px;
  font-weight: 600;
  color: #fff;
}
.scene-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #34c759; }
.scene-fleet__line { height: 10px; width: 70%; border-radius: 5px; background: rgba(255, 255, 255, 0.85); }
.scene-fleet__line--short { width: 42%; height: 8px; background: rgba(255, 255, 255, 0.5); }

/* 2 — feuille de réservation iOS */
.scene-book { align-items: center; }
.sheet {
  display: grid;
  gap: 12px;
  width: 100%;
  padding: 10px 18px 18px;
  border-radius: 30px 30px 0 0;
  background: rgba(28, 28, 32, 0.92);
  box-shadow: 0 -20px 40px -20px rgba(0, 0, 0, 0.8);
  transform: translateY(40%);
  transition: transform 0.8s var(--ease-out);
}
.scene-book.is-active .sheet { transform: none; }
.sheet__grabber { justify-self: center; width: 36px; height: 5px; border-radius: 3px; background: rgb(var(--grey-rgb) / 0.41); }
.sheet__title { font-size: 17px; font-weight: 600; color: #fff; }
.cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-gap: 2px;
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
}
.cal__w { padding-bottom: 4px; font-size: 10px; font-weight: 600; color: rgb(var(--grey-rgb) / 0.61); }
.cal__d { position: relative; display: grid; place-items: center; height: 24px; z-index: 0; }
/* plage de dates : la bande se trace de gauche à droite */
.cal__d.is-start::before,
.cal__d.is-in::before,
.cal__d.is-end::before {
  content: "";
  position: absolute;
  inset: 1px 0;
  z-index: -1;
  background: rgb(var(--brand-rgb) / 0.28);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.25s linear;
}
.cal__d.is-start::before { left: 50%; }
.cal__d.is-end::before { right: 50%; }
.cal__d.is-start::after,
.cal__d.is-end::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border-radius: 50%;
  background: var(--brand);
  transform: scale(0);
  transition: transform 0.4s var(--ease-out);
}
.cal__d.is-start, .cal__d.is-end { color: #fff; font-weight: 600; }
.scene-book.is-active .cal__d.is-start::after { transform: none; transition-delay: 0.5s; }
.scene-book.is-active .cal__d.is-start::before { transform: none; transition-delay: 0.7s; }
.scene-book.is-active .cal__d.is-in::before { transform: none; transition-delay: 0.95s; }
.scene-book.is-active .cal__d.is-end::before { transform: none; transition-delay: 1.2s; }
.scene-book.is-active .cal__d.is-end::after { transform: none; transition-delay: 1.4s; }
.sheet__rows { list-style: none; border-radius: 14px; background: rgba(255, 255, 255, 0.06); }
.sheet__rows li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  font-size: 13px;
  color: #fff;
}
.sheet__rows li + li { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.sheet__rows svg { width: 14px; height: 14px; fill: none; stroke: rgb(var(--grey-rgb) / 0.47); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sheet__btn {
  display: grid;
  place-items: center;
  height: 44px;
  border-radius: 14px;
  background: var(--brand);
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  transform: scale(0.96);
  opacity: 0.5;
  transition: transform 0.5s var(--ease-out) 1.6s, opacity 0.5s var(--ease) 1.6s;
}
.scene-book.is-active .sheet__btn { transform: none; opacity: 1; }

/* 3 — retrait : plan épuré, épingle qui tombe, sélecteur segmenté */
.scene-map .gmap { border-radius: inherit; }
.scene-map__pin {
  transform: translateY(-60px) scale(0.6);
  opacity: 0;
  transition: transform 0.7s var(--ease-out) 0.2s, opacity 0.3s var(--ease) 0.2s;
}
.scene-map.is-active .scene-map__pin { transform: none; opacity: 1; }
.seg {
  position: absolute;
  bottom: 18px;
  left: 50%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(80%, 300px);
  padding: 3px;
  border-radius: 12px;
  background: rgba(118, 118, 128, 0.32);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  transform: translateX(-50%);
}
.seg__thumb {
  grid-area: 1 / 1;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}
.scene-map.is-active .seg__thumb { animation: seg-toggle 4s var(--ease) 1s infinite; }
@keyframes seg-toggle {
  0%, 40% { transform: translateX(0); }
  50%, 90% { transform: translateX(100%); }
  100% { transform: translateX(0); }
}
.seg__opt {
  position: relative;
  grid-row: 1;
  padding: 8px 4px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  color: #fff;
  mix-blend-mode: difference;
}
.seg__opt:nth-child(2) { grid-column: 1; }
.seg__opt:nth-child(3) { grid-column: 2; }

/* 4 — activité en direct : la pilule s'ouvre en widget, le trajet avance */
.live {
  display: grid;
  gap: 14px;
  width: 100%;
  padding: 18px;
  border-radius: 30px;
  background: #000;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  transform: scale(0.42, 0.22);
  transform-origin: 50% 0;
  transition: transform 0.8s var(--ease-out);
}
/* écran réparti : îlot en haut, activité au milieu, widgets en bas */
.scene-live {
  grid-template-rows: auto 1fr auto;
  align-items: center;
  justify-items: stretch;
  gap: 18px;
  padding: 16px 18px 20px;
}
.island {
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 128px;
  height: 36px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  background: #000;
  transform: scaleX(0.7);
  transition: transform 0.6s var(--ease-out);
}
.scene-live.is-active .island { transform: none; }
.island__car { display: grid; color: #30d158; }
.island__car svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.island__dot { width: 8px; height: 8px; border-radius: 50%; background: #30d158; animation: island-dot 1.6s var(--ease) infinite; }
@keyframes island-dot { 50% { opacity: 0.3; } }
.widgets { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.widget {
  display: grid;
  grid-template-rows: 1fr auto auto; /* icône en haut, intitulé + valeur groupés en bas */
  gap: 2px;
  aspect-ratio: 1;
  padding: 16px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  opacity: 0;
  transform: translateY(18px) scale(0.96);
  transition: opacity 0.5s var(--ease), transform 0.7s var(--ease-out);
}
.scene-live.is-active .widget { opacity: 1; transform: none; transition-delay: 0.7s; }
.scene-live.is-active .widget + .widget { transition-delay: 0.82s; }
.widget__ring { width: 46px; height: 46px; transform: rotate(-90deg); }
.widget__ring circle { fill: none; stroke: rgba(255, 255, 255, 0.15); stroke-width: 5; }
.widget__ring .widget__ring-fill {
  stroke: var(--brand);
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1.6s var(--ease-out) 1s;
}
.scene-live.is-active .widget__ring-fill { stroke-dashoffset: 30; }
.widget__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 159, 10, 0.2);
  color: #ff9f0a;
}
.widget__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.widget__label { font-size: 12px; color: rgb(var(--grey-rgb) / 0.81); }
.widget__value { font-size: 16px; font-weight: 600; line-height: 1.2; color: #fff; }
.scene-live.is-active .live { transform: none; transition-delay: 0.15s; }
.live > * { opacity: 0; transition: opacity 0.4s var(--ease); }
.scene-live.is-active .live > * { opacity: 1; transition-delay: 0.6s; }
.live__row { display: flex; align-items: center; gap: 12px; }
.live__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(48, 209, 88, 0.18);
  color: #30d158;
}
.live__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.live__text { display: grid; flex: 1; }
.live__kicker { font-size: 12px; color: rgb(var(--grey-rgb) / 0.81); }
.live__title { font-size: 20px; font-weight: 600; color: #fff; }
.live__logo { font-family: var(--font-serif); font-size: 12px; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.7); }
.live__track { position: relative; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.15); overflow: hidden; }
.live__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #30d158;
  transform: scaleX(0.04);
  transform-origin: 0 50%;
  transition: transform 2.4s var(--ease) 0.9s;
}
.scene-live.is-active .live__fill { transform: scaleX(0.62); }
.live__ends { display: flex; justify-content: space-between; font-size: 11px; color: rgb(var(--grey-rgb) / 0.68); }

/* --- texte : barres de progression façon stories (mobile), étapes empilées
   en fondu ; liste complète avec l'étape courante allumée (desktop) */
.howto__copy { display: grid; gap: 18px; }
.howto__bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.howto__bar { height: 3px; border-radius: 2px; background: var(--hairline); overflow: hidden; }
.howto__bar span {
  display: block;
  height: 100%;
  background: #fff;
  transform: scaleX(var(--bar, 0));
  transform-origin: 0 50%;
}
.howto__list { display: grid; list-style: none; }
.howto__item {
  grid-area: 1 / 1;
  display: grid;
  gap: 6px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.4s var(--ease), transform 0.6s var(--ease-out);
}
.howto__item.is-active { opacity: 1; transform: none; }
.howto__kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.howto__title { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.howto__text { font-size: 16px; line-height: 1.45; color: var(--text-soft); text-wrap: pretty; }

@media (min-width: 1024px) {
  .howto__pin { padding: 120px 0 64px; }
  .howto__stage {
    grid-template-columns: 1fr minmax(0, 520px);
    grid-template-rows: none;
    align-items: center;
    gap: 96px;
    width: min(100%, 1120px);
  }
  .howto__screen { order: 2; height: min(100%, 620px); }
  .howto__bars { display: none; }
  .howto__list { gap: 34px; }
  .howto__item {
    grid-area: auto;
    position: relative;
    padding-left: 28px;
    opacity: 0.28;
    transform: none;
    transition: opacity 0.5s var(--ease);
  }
  .howto__item.is-active { opacity: 1; }
  /* trait de progression de l'étape, à gauche */
  .howto__item::before,
  .howto__item::after {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    width: 2px;
    border-radius: 2px;
    background: var(--hairline);
  }
  .howto__item::after {
    background: #fff;
    transform: scaleY(var(--bar, 0));
    transform-origin: 50% 0;
  }
  .howto__title { font-size: 40px; }
  .howto__text { font-size: 18px; max-width: 32ch; }
}
@media (prefers-reduced-motion: reduce) {
  .howto__scene, .howto__item, .sheet, .live, .live > *, .live__fill, .scene-map__pin,
  .scene-fleet__card, .cal__d::before, .cal__d::after, .sheet__btn,
  .island, .widget, .widget__ring-fill { transition: none; }
  .scene-map.is-active .seg__thumb { animation: none; }
}

/* Fin des sections collantes : un temps de pause avant que la feuille
   suivante ne les recouvre (la section reste visible en entier) */
.about { margin-top: 45vh; margin-top: 45svh; }
.services { margin-top: 40vh; margin-top: 40svh; }
.howto__track { --hold: 40vh; height: calc(100vh + 3 * 75vh + var(--hold)); height: calc(100svh + 3 * 75svh + var(--hold)); }

/* ==========================================================================
   Conditions de location : galerie de cartes façon Apple. Défilement
   horizontal aimanté (qui déborde jusqu'au bord de l'écran), flèches
   rondes, « + » qui ouvre une feuille iOS avec le détail (intro.js).
   ========================================================================== */
.conditions {
  display: grid;
  justify-items: center;
  gap: 40px;
  overflow-x: clip;
}
.cgallery { display: grid; gap: 20px; width: 100%; }
.cgallery__track {
  --edge: max(20px, calc((100vw - 1120px) / 2));
  display: flex;
  gap: 14px;
  padding: 8px var(--edge) 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--edge);
  scrollbar-width: none;
  list-style: none;
  overscroll-behavior-x: contain;
}
.cgallery__track::-webkit-scrollbar { display: none; }
.ccard {
  flex: none;
  width: min(78vw, 320px);
  scroll-snap-align: start;
}
.ccard__inner {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr;
  height: min(118vw, 480px);
  padding: 26px 24px;
  overflow: hidden;
  border-radius: 28px;
  background:
    radial-gradient(110% 70% at 50% 100%, var(--glow), transparent 70%),
    var(--tone);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  transition: transform 0.5s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .ccard__inner:hover { transform: scale(1.015); }
}
.ccard--tone1 { --tone: #1d1612; --glow: rgba(214, 140, 96, 0.45); }
.ccard--tone2 { --tone: #1f1611; --glow: rgba(190, 153, 135, 0.35); }
.ccard--tone3 { --tone: #1d130e; --glow: rgba(205, 150, 120, 0.4); }
.ccard--tone4 { --tone: #1b130f; --glow: rgb(var(--brand-light-rgb) / 0.35); }
.ccard--tone5 { --tone: #1c130e; --glow: rgb(var(--brand-rgb) / 0.45); }
.ccard--tone6 { --tone: #1a1613; --glow: rgb(var(--grey-rgb) / 0.35); }
.ccard__eyebrow {
  position: relative;
  z-index: 1;
  font-size: 14px;
  font-weight: 600;
  color: rgb(var(--grey-rgb) / 0.94);
}
.ccard__value {
  position: relative;
  z-index: 1;
  margin-top: 6px;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #f5f5f7;
}
.ccard--todo .ccard__value { color: rgb(var(--grey-rgb) / 0.61); }
.ccard__art {
  align-self: end;
  justify-self: center;
  color: rgba(255, 255, 255, 0.85);
  transform: translateY(18px);
  transition: transform 0.9s var(--ease-out);
}
.ccard__art svg {
  width: 150px;
  height: 150px;
  fill: none;
  stroke: currentColor;
  stroke-width: 0.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ccard.is-revealed .ccard__art,
.ccard:not([data-reveal]) .ccard__art { transform: none; }
/* carte du retrait : le plan remplit le bas de la carte */
.ccard__map {
  position: absolute;
  inset: 40% 0 0;
  display: grid;
  place-items: center;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 35%);
  mask-image: linear-gradient(180deg, transparent, #000 35%);
}
.ccard__map .gmap img { filter: brightness(1.5); }
.ccard__map .gmap__credit { top: auto; bottom: 10px; right: 16px; font-size: 9px; }
/* « + » rond en bas à droite, comme sur apple.com */
.ccard__more {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(245, 245, 247, 0.92);
  color: #120c09;
  cursor: pointer;
  transition: transform 0.3s var(--ease-out), background-color 0.2s var(--ease);
}
.ccard__more svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
@media (hover: hover) and (pointer: fine) {
  .ccard__more:hover { transform: scale(1.08); background: #fff; }
}
.ccard__more:active { transform: scale(0.9); }
.ccard__more:focus-visible { outline: 2px solid rgb(var(--brand-light-rgb) / 0.9); outline-offset: 3px; }

/* flèches rondes grises, à droite sous la galerie */
.cgallery__nav {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  padding: 0 max(20px, calc((100vw - 1120px) / 2));
}
.cgallery__btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(210, 210, 215, 0.16);
  color: rgba(245, 245, 247, 0.9);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), opacity 0.3s var(--ease), transform 0.2s var(--ease);
}
.cgallery__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) {
  .cgallery__btn:hover { background: rgba(210, 210, 215, 0.26); }
}
.cgallery__btn:active { transform: scale(0.92); }
.cgallery__btn:disabled { opacity: 0.35; cursor: default; }
.cgallery__btn:focus-visible { outline: 2px solid rgb(var(--brand-light-rgb) / 0.9); outline-offset: 3px; }

/* feuille iOS : monte du bas sur mobile, fenêtre centrée sur desktop */
.csheet {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  align-items: end;
}
.csheet[hidden] { display: none; }
.csheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.csheet__panel {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 12px 24px calc(36px + env(safe-area-inset-bottom));
  border-radius: 32px 32px 0 0;
  background: #1c1c1e;
  color: #f5f5f7;
  transform: translateY(100%);
  transition: transform 0.5s var(--ease-out);
}
.csheet.is-open .csheet__backdrop { opacity: 1; }
.csheet.is-open .csheet__panel { transform: none; }
.csheet__grabber { justify-self: center; width: 36px; height: 5px; margin-bottom: 14px; border-radius: 3px; background: rgb(var(--grey-rgb) / 0.41); }
.csheet__close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(118, 118, 128, 0.24);
  color: rgb(var(--grey-rgb) / 1);
  cursor: pointer;
}
.csheet__close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.csheet__close:focus-visible { outline: 2px solid rgb(var(--brand-light-rgb) / 0.9); outline-offset: 2px; }
.csheet__eyebrow { font-size: 14px; font-weight: 600; color: var(--accent, var(--brand-light)); }
.csheet__title { font-size: 34px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.csheet__text { font-size: 17px; line-height: 1.5; color: rgb(var(--grey-rgb) / 0.94); }
@media (min-width: 768px) {
  .csheet { place-items: center; }
  .csheet__panel {
    width: min(92vw, 560px);
    padding: 40px 44px 44px;
    border-radius: 32px;
    transform: translateY(24px) scale(0.96);
    opacity: 0;
    transition: transform 0.5s var(--ease-out), opacity 0.3s var(--ease);
  }
  .csheet.is-open .csheet__panel { opacity: 1; }
  .csheet__grabber { display: none; }
}
@media (min-width: 1024px) {
  .conditions { gap: 56px; padding-bottom: 112px; }
  .ccard { width: 360px; }
  .ccard__inner { height: 520px; padding: 32px 30px; }
  .ccard__value { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .ccard__inner, .ccard__art, .csheet__panel, .csheet__backdrop { transition: none; }
}

/* ==========================================================================
   Offres : liste groupée iOS (icônes en pastilles de couleur, chevrons) et
   bouton bleu iOS, à côté de la carte cadeau.
   ========================================================================== */
.offers__side { display: grid; gap: 24px; justify-items: start; }
.offers__lead {
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  text-wrap: pretty;
}
.ios-group { display: grid; gap: 8px; width: 100%; }
.ios-group__header {
  padding-left: 16px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: rgb(var(--grey-rgb) / 0.74);
}
.ios-list {
  overflow: hidden;
  border-radius: 14px;
  background: #1c1c1e;
  list-style: none;
}
.ios-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 10px 16px;
  transition: background-color 0.2s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .ios-row:hover { background: #2c2c2e; }
}
/* séparateur iOS : commence après l'icône */
.ios-row + .ios-row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 60px;
  right: 0;
  height: 1px;
  background: rgba(84, 84, 88, 0.6);
}
.ios-row__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: #fff;
}
.ios-row__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ios-row__icon--orange { background: #ff9f0a; }
.ios-row__icon--purple { background: #bf5af2; }
.ios-row__icon--blue { background: var(--brand); }
.ios-row__text { display: grid; flex: 1; gap: 2px; min-width: 0; }
.ios-row__title { font-size: 17px; color: #fff; }
.ios-row__title--todo { color: rgb(var(--grey-rgb) / 0.81); font-style: italic; }
.ios-row__sub { font-size: 13px; color: rgb(var(--grey-rgb) / 0.74); }
.ios-row__chev { flex: none; width: 16px; height: 16px; fill: none; stroke: rgb(var(--grey-rgb) / 0.41); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
/* entrée : les lignes glissent l'une après l'autre, les pastilles « poppent » */
.ios-list[data-reveal] .ios-row { opacity: 0; transform: translateX(24px); transition: opacity 0.5s var(--ease), transform 0.7s var(--ease-out); }
.ios-list[data-reveal] .ios-row__icon { transform: scale(0.4); transition: transform 0.6s var(--ease-out); }
.ios-list.is-revealed .ios-row,
.ios-list.is-revealed .ios-row__icon { opacity: 1; transform: none; }
.ios-list .ios-row:nth-child(1), .ios-list .ios-row:nth-child(1) .ios-row__icon { transition-delay: 0.15s; }
.ios-list .ios-row:nth-child(2), .ios-list .ios-row:nth-child(2) .ios-row__icon { transition-delay: 0.27s; }
.ios-list .ios-row:nth-child(3), .ios-list .ios-row:nth-child(3) .ios-row__icon { transition-delay: 0.39s; }
.ios-btn {
  display: grid;
  place-items: center;
  width: 100%;
  height: 52px;
  border-radius: 14px;
  background: var(--brand);
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .ios-btn:hover { background: #d29a7e; }
}
.ios-btn:active { transform: scale(0.97); }
.ios-btn:focus-visible { outline: 2px solid rgb(var(--brand-light-rgb) / 0.9); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .ios-list .ios-row, .ios-list .ios-row__icon { transition: none; }
}

/* Comment ça marche : pas de fond derrière les cartes de la flotte (étape 1),
   le cadre réapparaît pour les autres scènes ; cartes cliquables */
.howto__screen { background: none; box-shadow: none; }
.howto__screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(80% 60% at 20% 0%, rgb(var(--brand-rgb) / 0.35), transparent 70%),
    radial-gradient(70% 60% at 100% 100%, rgba(90, 74, 110, 0.4), transparent 70%),
    #140d0a;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: opacity 0.5s var(--ease);
}
/* plus aucun cadre derrière les scènes : chaque scène flotte seule */
.howto__screen::before { display: none; }
.howto__screen { overflow: visible; }
/* le plan (étape 3) garde ses coins arrondis */
.scene-map .gmap { border-radius: 36px; }
/* sans cadre derrière, la feuille « Dates » est arrondie de tous côtés */
.sheet { border-radius: 30px; }
.scene-fleet.is-active { pointer-events: auto; }
.scene-fleet__card { cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  .scene-fleet.is-active .scene-fleet__card--1:hover { transform: translateY(-6px) scale(1.02); }
}
.scene-fleet__card--1:focus-visible { outline: 2px solid rgb(var(--brand-light-rgb) / 0.9); outline-offset: 4px; }

/* ==========================================================================
   Offres & cartes cadeaux : carte cadeau en verre qui s'incline sous le
   curseur (--rx / --ry, intro.js) avec un reflet qui la traverse ; offres
   du moment à côté.
   ========================================================================== */
.offers {
  display: grid;
  justify-items: center;
  gap: 48px;
  padding-left: 20px;
  padding-right: 20px;
}
.offers__grid {
  display: grid;
  gap: 40px;
  width: min(100%, 1080px);
  align-items: center;
}
.giftcard-stage {
  display: grid;
  place-items: center;
  perspective: 1000px;
}
.giftcard {
  --rx: 0deg;
  --ry: 0deg;
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: min(100%, 420px);
  aspect-ratio: 1.586;
  padding: 22px 24px;
  overflow: hidden;
  border-radius: 24px;
  background:
    radial-gradient(90% 120% at 100% 0%, rgb(var(--brand-light-rgb) / 0.45), transparent 60%),
    radial-gradient(80% 90% at 0% 100%, rgb(var(--brand-rgb) / 0.35), transparent 60%),
    linear-gradient(135deg, #2c1d16, #160f0b);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 40px 80px -30px rgba(0, 0, 0, 0.85);
  color: #f5f5f7;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 0.6s var(--ease-out);
  will-change: transform;
}
.giftcard.is-tilting { transition-duration: 0.12s; }
/* reflet qui traverse la carte en boucle lente */
.giftcard__shine {
  position: absolute;
  inset: -50%;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.16) 50%, transparent 58%);
  animation: giftcard-shine 6s var(--ease) infinite;
  pointer-events: none;
}
@keyframes giftcard-shine {
  0%, 55% { transform: translateX(-40%); }
  100% { transform: translateX(40%); }
}
.giftcard__top,
.giftcard__bottom {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.giftcard__top { align-items: center; }
.giftcard__logo {
  font-family: var(--font-serif);
  font-size: 18px;
  letter-spacing: 0.08em;
}
.giftcard__kind {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(var(--grey-rgb) / 0.94);
}
.giftcard__chip {
  align-self: center;
  width: 46px;
  height: 34px;
  border-radius: 8px;
  background: linear-gradient(135deg, #e9e4d6, #b9ad8f);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
  opacity: 0.85;
}
.giftcard__amount {
  font-family: var(--font-serif);
  font-size: clamp(20px, 5vw, 26px);
  font-style: italic;
  color: rgb(var(--grey-rgb) / 1);
}
.giftcard__note {
  font-size: 11px;
  font-style: italic;
  color: rgb(var(--grey-rgb) / 0.68);
  text-align: right;
}

.offers__side {
  display: grid;
  gap: 22px;
  justify-items: start;
}
.offers__lead {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 300;
  line-height: 1.35;
  text-wrap: pretty;
}
@media (min-width: 1024px) {
  .offers { gap: 64px; padding-bottom: 112px; }
  .offers__grid { grid-template-columns: 1.1fr 1fr; gap: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .giftcard__shine { animation: none; opacity: 0; }
  .giftcard { transform: none; }
}

/* ==========================================================================
   Galerie Instagram : mosaïque façon bento (photos provisoires en dégradé),
   survol : la photo grossit doucement, l'icône apparaît.
   ========================================================================== */
.gallery {
  display: grid;
  justify-items: center;
  gap: 40px;
  padding-left: 16px;
  padding-right: 16px;
}
.gallery__handle {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--accent);
}
.gallery__handle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 44vw;
  grid-auto-flow: dense;
  gap: 8px;
  width: min(100%, 1120px);
  list-style: none;
}
.gallery__tile:nth-child(1),
.gallery__tile:nth-child(6) { grid-row: span 2; }
.gallery__tile a {
  position: relative;
  display: grid;
  place-items: center;
  height: 100%;
  overflow: hidden;
  border-radius: 20px;
  isolation: isolate;
}
.gallery__tile a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(90% 70% at 30% 20%, rgba(255, 255, 255, 0.35), transparent 60%),
    linear-gradient(160deg, var(--photo), color-mix(in srgb, var(--photo) 45%, #000));
  transition: transform 0.8s var(--ease-out);
}
.gallery__tile--sky      { --photo: #2f6f95; }
.gallery__tile--hills    { --photo: #4f6b48; }
.gallery__tile--dunes    { --photo: #9a5c38; }
.gallery__tile--dusk     { --photo: #5a4a6e; }
.gallery__tile--concrete { --photo: #5b6168; }
.gallery__ph {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}
.gallery__icon {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.3s var(--ease), transform 0.4s cubic-bezier(0.22, 1.15, 0.36, 1);
}
.gallery__icon svg,
.gallery__cta svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (hover: hover) and (pointer: fine) {
  .gallery__tile a:hover::before { transform: scale(1.06); }
  .gallery__tile a:hover .gallery__icon { opacity: 1; transform: none; }
}
.gallery__tile a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.gallery__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: var(--radius-pill);
  background: #120c09;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  transition: transform 0.4s cubic-bezier(0.22, 1.15, 0.36, 1);
}
@media (hover: hover) and (pointer: fine) {
  .gallery__cta:hover { transform: translateY(-2px); }
}
.gallery__cta:active { transform: scale(0.96); transition-duration: 0.12s; }
.gallery__cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (min-width: 768px) {
  .gallery__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 240px; gap: 12px; }
  .gallery__tile:nth-child(1) { grid-column: span 2; grid-row: span 2; }
}
@media (min-width: 1024px) {
  .gallery { gap: 56px; padding-bottom: 112px; }
}

/* ==========================================================================
   À propos collée : une fois son bas atteint, elle reste en place et les
   prestations glissent par-dessus ; elle recule doucement (--cover,
   intro.js). --stick = hauteur d'écran − hauteur de la section.
   ========================================================================== */
.about {
  position: sticky;
  top: var(--stick, 0px);
  transform-origin: 50% 100%;
  scale: calc(1 - var(--cover, 0) * 0.05);
  will-change: scale;
}
.about__inner { opacity: calc(1 - var(--cover, 0) * 0.6); }

/* ==========================================================================
   Animations retravaillées des nouvelles sections
   ========================================================================== */

/* --- Galerie : rideau qui remonte + image qui se resserre ; colonnes en
   parallaxe (--gp × --sp, intro.js) */
.gallery__tile {
  transform: translateY(calc(var(--gp, 0) * var(--sp, 0) * -48px));
  will-change: transform;
}
.gallery__tile[data-reveal] {
  /* seul le rideau est animé ; la parallaxe suit le défilement sans retard */
  transition: clip-path 1.3s var(--ease-out);
  transition-delay: calc(var(--i) * 0.07s);
}
.gallery__tile[data-reveal]:not(.is-revealed) a::before { transform: scale(1.35); }
.gallery__tile a::before { transition: transform 1.6s var(--ease-out); }
.gallery__tile[data-reveal]:not(.is-revealed) .gallery__ph { opacity: 0; transform: translateY(12px); }
.gallery__ph { transition: opacity 0.6s var(--ease) 0.6s, transform 0.8s var(--ease-out) 0.6s; }
@media (max-width: 767px) {
  .gallery__tile { transform: translateY(calc(var(--gp, 0) * var(--sp, 0) * -24px)); }
}
@media (prefers-reduced-motion: reduce) {
  .gallery__tile { transform: none; }
}

/* Contact : message WhatsApp pré-écrit (aperçu + bouton vert) en fin de conversation */
.chat__draft {
  align-self: flex-end;
  display: grid;
  gap: 10px;
  width: min(100%, 300px);
  margin-left: auto;
  padding: 12px;
  border-radius: 20px;
  background: rgba(37, 211, 102, 0.12);
  box-shadow: inset 0 0 0 1px rgba(37, 211, 102, 0.3);
  animation: bubble-in 0.45s var(--ease-out);
}
.chat__draft-text {
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-line;
  color: #f5f5f7;
}
.chat__wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  border-radius: 14px;
  background: #25d366;
  font-size: 15px;
  font-weight: 600;
  color: #04210f;
  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease);
}
.chat__wa svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) {
  .chat__wa:hover { background: #3ee07a; }
}
.chat__wa:active { transform: scale(0.97); }
.chat__wa:focus-visible { outline: 2px solid rgb(var(--brand-light-rgb) / 0.9); outline-offset: 3px; }

/* Prestations (desktop) : la carte prend toute la largeur ; ses larges côtés
   sont en verre et déforment l'image derrière (data-liquid-glass="sides"),
   le contenu reste centré. Son bord haut contourne la navbar (encoche,
   intro.js). */
@media (min-width: 768px) {
  .services { background: transparent; box-shadow: none; }
  .services__sticky { padding: 0 0 24px; }
  .services__card {
    width: 100%;
    padding-top: 148px;
    border-radius: 38px 38px 34px 34px;
    background:
      radial-gradient(60% 40% at 50% 0%, rgb(var(--brand-rgb) / 0.18), transparent 70%),
      linear-gradient(180deg, rgba(28, 19, 15, 0.8) 0%, rgba(47, 33, 26, 0.82) 35%, rgba(112, 78, 61, 0.86) 75%, rgba(138, 147, 153, 0.9) 100%);
  }
  .services__head,
  .services__panel { width: min(100%, 760px); justify-self: center; }
}

/* ==========================================================================
   Contenu MK MotorSport
   ========================================================================== */
/* 6e teinte de carte (en attendant les photos) */
.car-card__photo--steel { fill: #3d4a5c; }
.showcase-card--steel    { --photo: #3d4a5c; }
/* pastille d'info sans voyant (puissance) */
.car-card__status--spec::before,
.showcase-card__status--spec::before { display: none; }
.car-card__status--spec { padding-left: 13px; }

/* Hero : lien vers les avis Google */
a.chip--rating { color: inherit; text-decoration: none; transition: opacity 0.2s var(--ease); }
a.chip--rating:hover { opacity: 0.85; }
a.chip--rating:focus-visible { outline: 2px solid rgb(var(--brand-light-rgb) / 0.9); outline-offset: 6px; border-radius: 8px; }
.chip--rating .chip__value { font-size: 30px; }

/* Fiche véhicule : caractéristiques et tarifs */
.specs {
  display: grid;
  margin: 0;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.specs__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  font-size: 14px;
}
.specs__row + .specs__row { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.specs__row dt { flex: none; color: var(--text-soft); }
.specs__row dd { margin: 0; text-align: right; color: var(--text); font-weight: 500; }
.rates {
  display: grid;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.rates__row {
  display: grid;
  grid-template-columns: 1.4fr 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  font-size: 14px;
}
.rates__row + .rates__row { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.rates__name { color: var(--text); font-weight: 500; }
.rates__km { color: var(--text-soft); }
.rates__price { font-family: var(--font-serif); font-size: 18px; color: var(--text); text-align: right; }
.vehicle__caution { margin-top: 12px; font-size: 13px; color: var(--text-soft); }
/* la fiche est une colonne de hauteur fixe qui défile : rien ne se tasse */
.vehicle__sheet > * { flex-shrink: 0; }

/* Réservation : aides, formules, bouton WhatsApp */
.booking__hint { margin: -4px 0 14px; font-size: 14px; color: var(--text-soft); }
.booking__note { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--text-soft); }
.option-cards--options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 520px) { .option-cards--options { grid-template-columns: minmax(0, 1fr); } }
.booking__wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  margin-top: 20px;
  padding: 0 26px;
  border-radius: 16px;
  background: #25d366;
  font-size: 16px;
  font-weight: 600;
  color: #04210f;
  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease);
}
.booking__wa svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.booking__wa:hover { background: #3ee07a; }
.booking__wa:active { transform: scale(0.97); }
.booking__wa:focus-visible { outline: 2px solid rgb(var(--brand-light-rgb) / 0.9); outline-offset: 3px; }

/* Avis : lien vers la fiche Google (à la place de la note) */
.reviews__google {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  transition: background-color 0.2s var(--ease);
}
.reviews__google svg { width: 18px; height: 18px; }
.reviews__google:hover { background: rgba(255, 255, 255, 0.14); }
.reviews__google:focus-visible { outline: 2px solid rgb(var(--brand-light-rgb) / 0.9); outline-offset: 3px; }

/* Conditions : 2 teintes de plus (8 cartes) */
.ccard--tone7 { --tone: #1c120d; --glow: rgba(185, 105, 70, 0.42); }
.ccard--tone8 { --tone: #171310; --glow: rgb(var(--grey-rgb) / 0.3); }

/* Comment ça marche, étape 2 : « Envoyer la demande » cliquable */
.scene-book.is-active { pointer-events: auto; }
a.sheet__btn { cursor: pointer; }
a.sheet__btn:hover { background: #d29a7e; }
a.sheet__btn:focus-visible { outline: 2px solid rgb(var(--brand-light-rgb) / 0.9); outline-offset: 3px; }

/* Prestations : bouton « Demander un devis » */
.services__action span { white-space: nowrap; }

/* Prestations (desktop) : pendant le défilement, plus aucun filtre sur
   toute la largeur de la carte (c'était le gros coût par image) ; la
   déformation des côtés revient à l'arrêt. */
html.is-scrolling .services__card[data-liquid-glass] {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.services__track { backface-visibility: hidden; }


/* ==========================================================================
   Photos, logo et avis réels (MK MotorSport)
   ========================================================================== */
/* Logo : marque « MK » (images) à la place du texte provisoire */
.mk-mark { display: block; width: 100%; height: auto; pointer-events: none; user-select: none; }
.logo .mk-mark { width: 62%; }
.loader__text { display: grid; place-items: center; width: 100%; }
.loader__text .mk-mark { width: 64%; }
.topbar__logo .mk-mark { width: 64px; }
.contact-card__avatar,
.chat__avatar { background: #120c09; }
.contact-card__avatar .mk-mark { width: 62%; }
.chat__avatar .mk-mark { width: 66%; }
.live__logo .mk-mark { width: 34px; }
.site-footer__logo { width: auto; height: auto; padding: 0; border: 0; background: none; border-radius: 0; }
.site-footer__logo img { display: block; width: 168px; height: auto; }
.giftcard__logo img { display: block; width: 110px; height: auto; }

/* Fond : plus de vidéo, la boîte sert de cadre au diaporama WebGL */
div.hero__video { background: #080504; }

/* Aperçu de la flotte : la photo remplit la carte */
.showcase-card[style*="--img"] {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.28), transparent 26%, transparent 58%, rgba(0, 0, 0, 0.62)),
    var(--img) center / cover no-repeat,
    var(--photo);
}

/* Comment ça marche, étape 1 : vraies photos dans l'éventail */
.scene-fleet__card[style*="--img"] {
  background:
    linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.55)),
    var(--img) center / cover no-repeat,
    var(--photo);
}

/* Instagram : photos réelles */
.gallery__tile[style*="--img"] a::before {
  background: var(--img) center / cover no-repeat, #291c16;
}

/* À propos : photo */
.about__photo {
  background:
    linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.35)),
    url(assets/photos/6.webp) center 55% / cover no-repeat,
    #2f211a;
}

/* Page véhicule : photo plein cadre + vignettes */
.vehicle__media.has-photo {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.35), transparent 22%, transparent 60%, rgba(0, 0, 0, 0.45)),
    var(--media) center / cover no-repeat,
    var(--car-color, #2f6f95);
}
.vehicle__media.has-photo .vehicle__watermark { display: none; }
.vehicle__thumbs {
  display: flex;
  gap: 8px;
  margin-top: 18px;
  overflow-x: auto;
  scrollbar-width: none;
}
.vehicle__thumbs[hidden] { display: none; }
.vehicle__thumb {
  flex: none;
  width: 64px;
  height: 84px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: center / cover no-repeat;
  opacity: 0.55;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.vehicle__thumb:hover { opacity: 0.85; }
.vehicle__thumb.is-active { opacity: 1; box-shadow: inset 0 0 0 2px #fff; }
.vehicle__thumb:active { transform: scale(0.95); }
.vehicle__thumb:focus-visible { outline: 2px solid rgb(var(--brand-light-rgb) / 0.9); outline-offset: 2px; }

/* Avis : la note redevient un lien vers la fiche Google */
a.reviews__score { color: inherit; text-decoration: none; transition: opacity 0.2s var(--ease); }
a.reviews__score:hover { opacity: 0.85; }
a.reviews__score:focus-visible { outline: 2px solid rgb(var(--brand-light-rgb) / 0.9); outline-offset: 6px; border-radius: 12px; }
.chip--rating .chip__value { font-size: 34px; }

/* ==========================================================================
   Navbar desktop façon iOS : pilule en verre liquide (réfraction via
   data-liquid-glass, même texture qu'avant), icône + libellé, pastille de
   sélection en verre qui glisse vers l'élément survolé puis revient sur
   l'élément actif (--l / --r posés par intro.js, animés en clip-path).
   Logo logé au centre (colonnes égales de part et d'autre).
   Cachée sur la hero, qui a déjà son logo.
   ========================================================================== */
.topbar { display: none; }

@media (min-width: 768px) {
  .topbar {
    position: fixed;
    top: calc(var(--gutter) + env(safe-area-inset-top) + 8px);
    left: 50%;
    z-index: 41; /* au-dessus du logo fixe, qui s'efface quand la barre est là */
    display: inline-grid;
    /* symétrique : 4 boutons de même largeur, logo au centre */
    grid-template-columns: 1fr 1fr auto 1fr 1fr;
    align-items: center;
    gap: 4px;
    padding: 8px;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
    -webkit-backdrop-filter: blur(6px) saturate(150%);
    backdrop-filter: blur(6px) saturate(150%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.4),
      inset 0 0 18px -6px rgba(255, 255, 255, 0.25),
      0 18px 40px -18px rgba(0, 0, 0, 0.7);
    transform: translateX(-50%);
    transition:
      transform 0.6s var(--ease-out),
      opacity 0.4s var(--ease);
  }
  /* arête spéculaire */
  .topbar::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.8) 0%,
      rgba(255, 255, 255, 0.1) 35%,
      rgba(255, 255, 255, 0.05) 65%,
      rgba(255, 255, 255, 0.5) 100%);
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
  }

  html:not(.is-past-hero) .topbar,
  .is-locked .topbar,
  .is-loading .topbar,
  .is-intro .topbar {
    transform: translate(-50%, calc(-100% - 40px));
    opacity: 0;
    pointer-events: none;
  }

  /* logo intégré à la barre, à la hauteur des boutons */
  .topbar__logo {
    display: grid;
    place-items: center;
    min-width: 120px;
    height: 64px;
    margin: 0 8px;
    padding: 0 22px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    font-family: var(--font-serif);
    font-size: 20px;
    letter-spacing: 0.08em;
    color: #fff;
    transition: background-color 0.25s var(--ease), transform 0.3s var(--ease-out);
  }
  .topbar__logo:hover { background: rgba(255, 255, 255, 0.16); }
  .topbar__logo:active { transform: scale(0.95); }
  html.is-on-light .topbar__logo { color: #120c09; background: rgba(18, 12, 9, 0.06); }
  /* le logo fixe s'efface quand la barre (qui contient le logo) est là */
  html.is-past-hero:not(.is-locked) .navbar .logo { opacity: 0; pointer-events: none; }
  .navbar .logo { transition: opacity 0.4s var(--ease), color 0.5s var(--ease); }

  /* pastille de sélection : verre clair, découpée à la taille de l'élément */
  .topbar__lens {
    --l: 0px;
    --r: 100%;
    position: absolute;
    inset: 8px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(255, 255, 255, 0.08);
    clip-path: inset(0 var(--r) 0 var(--l) round 20px);
    transition: clip-path 0.45s var(--ease-out), opacity 0.3s var(--ease);
    pointer-events: none;
  }
  .topbar.is-pressing .topbar__lens { transition-duration: 0.2s; }

  .topbar__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 64px;
    padding: 0 22px;
    border-radius: 20px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.01em;
    white-space: nowrap;
    color: rgb(var(--grey-rgb) / 0.97);
    transition: color 0.25s var(--ease), transform 0.3s var(--ease-out);
  }
  .topbar__btn svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .topbar__btn:hover,
  .topbar__btn.is-active { color: #fff; }
  .topbar__btn:active { transform: scale(0.94); transition-duration: 0.12s; }
  /* bouton d'action : bleu iOS plein */
  .topbar__btn--cta {
    background: var(--brand);
    color: #fff;
    font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 6px 16px -6px rgb(var(--brand-rgb) / 0.7);
    transition: background-color 0.25s var(--ease), transform 0.3s var(--ease-out);
  }
  .topbar__btn--cta svg { width: 16px; height: 16px; stroke-width: 2.2; transition: transform 0.3s var(--ease-out); }
  .topbar__btn--cta:hover { background: #d29a7e; }
  .topbar__btn--cta:hover svg { transform: translateX(3px); }

  /* sur une section claire : texte foncé, pastille foncée */
  html.is-on-light .topbar__btn:not(.topbar__btn--cta) { color: rgba(18, 12, 9, 0.65); }
  html.is-on-light .topbar__btn.is-active:not(.topbar__btn--cta),
  html.is-on-light .topbar__btn:not(.topbar__btn--cta):hover { color: #120c09; }
  html.is-on-light .topbar__lens { background: rgba(18, 12, 9, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); }

  .topbar a:focus-visible { outline: 2px solid rgb(var(--brand-light-rgb) / 0.9); outline-offset: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .topbar, .topbar__btn, .topbar__lens { transition: none; }
}

/* ==========================================================================
   Navbar basse (mobile) : pilule en verre, 4 boutons ronds, l'actif en noir
   ========================================================================== */
.tabbar { display: none; }

@media (max-width: 767px) {
  .tabbar {
    position: fixed;
    left: 50%;
    bottom: calc(14px + env(safe-area-inset-bottom));
    z-index: 50;
    display: flex;
    gap: 6px;
    padding: 6px;
    border-radius: var(--radius-pill);
    /* même verre « clair » que le footer : quasi transparent, la vidéo
       derrière est déformée sur les bords (data-liquid-glass) */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03) 55%, rgba(255, 255, 255, 0.06));
    -webkit-backdrop-filter: blur(4px) saturate(140%) brightness(1.08);
    backdrop-filter: blur(4px) saturate(140%) brightness(1.08);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.35),
      inset 0 0 22px -8px rgba(255, 255, 255, 0.22),
      0 16px 36px -14px rgba(0, 0, 0, 0.6);
    transform: translateX(-50%);
    transition:
      transform 0.6s var(--ease-out),
      opacity 0.4s var(--ease);
  }

  .tabbar::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.75) 0%,
      rgba(255, 255, 255, 0.1) 35%,
      rgba(255, 255, 255, 0.05) 65%,
      rgba(255, 255, 255, 0.45) 100%);
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
  }

  /* Cachée sur la hero (elle apparaît en arrivant sur la section 2, ou sur la
     flotte), pendant le chargement / l'intro et sur la fiche véhicule */
  html:not(.is-past-hero):not(.is-locked) .tabbar,
  .is-loading .tabbar,
  .is-intro .tabbar,
  body:has(.vehicle.is-open) .tabbar {
    transform: translate(-50%, calc(100% + 40px));
    opacity: 0;
    pointer-events: none;
  }

  .tabbar__btn {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.82);
    transition:
      background-color 0.3s var(--ease),
      color 0.3s var(--ease),
      transform 0.45s cubic-bezier(0.22, 1.15, 0.36, 1);
    -webkit-tap-highlight-color: transparent;
  }
  .tabbar__btn:active { transform: scale(0.88); transition-duration: 0.12s; }
  .tabbar__btn svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  /* bouton actif : goutte de verre plus claire, avec reflet */
  .tabbar__btn.is-active {
    background: rgba(255, 255, 255, 0.18);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.45),
      inset 0 -1px 0 rgba(255, 255, 255, 0.12),
      0 4px 14px -6px rgba(0, 0, 0, 0.5);
    color: #fff;
  }
  .tabbar__btn:focus-visible { outline: 2px solid rgb(var(--brand-light-rgb) / 0.9); outline-offset: 2px; }

  /* Le bas du site et de la flotte reste accessible au-dessus de la navbar */
  .services__sticky { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  .site-footer__card { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .fleet .fleet__list { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .tabbar, .tabbar__btn { transition: none; }
}

/* ==========================================================================
   Section 2 : aperçu de la flotte, cartes empilées façon iOS
   La carte active est au premier plan ; les voisines sont glissées derrière,
   plus petites et inclinées en 3D (--o : position par rapport à l'active,
   mise à jour par intro.js). Uniquement transform / opacity.
   ========================================================================== */
.showcase {
  --card-w: min(64vw, 270px);
  /* collée en haut de l'écran : la section des prestations glisse par-dessus,
     pendant qu'elle recule doucement (--cover : 0 → 1, intro.js) */
  position: sticky;
  top: 0;
  scale: calc(1 - var(--cover, 0) * 0.08);
  opacity: calc(1 - var(--cover, 0) * 0.7);
  transform-origin: 50% 40%;
  will-change: scale, opacity;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-content: center;
  gap: 30px;
  padding-left: 0;
  padding-right: 0;
  overflow-x: clip;
}

.showcase__head {
  display: grid;
  gap: 10px;
  justify-items: center;
  padding: 0 24px;
  text-align: center;
}
.showcase__eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.showcase__title {
  font-size: clamp(34px, 9vw, 64px);
  font-weight: 300;
  line-height: 1.02;
  text-wrap: balance;
}
.showcase__title .t-sans,
.showcase__title .t-serif { display: block; }

.showcase__stage {
  justify-self: stretch;
  perspective: 1200px;
  touch-action: pan-y; /* le glissement horizontal est géré par intro.js */
  user-select: none;
  -webkit-user-select: none;
}
.showcase__track {
  position: relative;
  height: calc(var(--card-w) * 4 / 3);
  list-style: none;
  transform-style: preserve-3d;
}

.showcase__item {
  --o: 0;
  --abs: 0;
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--card-w);
  height: 100%;
  margin-left: calc(var(--card-w) / -2);
  /* position continue (--o), animée image par image par intro.js : la pile
     glisse d'un seul tenant, et l'ordre de superposition suit la position */
  transform:
    translateX(calc(var(--o) * var(--card-w) * 0.5))
    scale(calc(1 - min(var(--abs), 2) * 0.13))
    rotateY(calc(var(--o) * -12deg));
  opacity: calc(1 - min(max(var(--abs) - 1, 0), 1));
  will-change: transform, opacity;
}
.showcase__item.is-far { pointer-events: none; }

/* Carte : « photo » pleine (aplat provisoire), grands arrondis, arête en verre */
.showcase-card {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr; /* puissance en haut, prix en bas : la photo occupe le reste */
  padding: 16px;
  overflow: hidden;
  border-radius: 38px;
  background:
    radial-gradient(120% 70% at 25% 10%, rgba(255, 255, 255, 0.22), transparent 60%),
    linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.55)),
    var(--photo);
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.85);
  -webkit-tap-highlight-color: transparent;
}
.showcase-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.7) 0%,
    rgba(255, 255, 255, 0.08) 35%,
    rgba(255, 255, 255, 0.04) 65%,
    rgba(255, 255, 255, 0.4) 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
/* voile sur les cartes de derrière, pour la profondeur */
.showcase-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(8, 5, 4, 0.45);
  opacity: min(var(--abs), 1);
  pointer-events: none;
}
.showcase-card--sky      { --photo: #2f6f95; }
.showcase-card--hills    { --photo: #4f6b48; }
.showcase-card--dunes    { --photo: #9a5c38; }
.showcase-card--dusk     { --photo: #5a4a6e; }
.showcase-card--concrete { --photo: #5b6168; }
.showcase-card:focus-visible { outline: 2px solid rgb(var(--brand-light-rgb) / 0.9); outline-offset: 4px; }

.showcase-card__status {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 11px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: 12px;
  font-weight: 500;
}
.showcase-card__status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dot);
}
.showcase-card__status--available   { --dot: #34c759; }
.showcase-card__status--rented      { --dot: #ff9f0a; }
.showcase-card__status--unavailable { --dot: #ff453a; }


.showcase-card__foot {
  align-self: end;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-left: 4px;
}
.showcase-card__price { font-size: 14px; color: rgba(255, 255, 255, 0.85); }
/* Bouton flèche : micro-interactions (transform / opacity uniquement)
   - n'apparaît vraiment que sur la carte de devant (suit --abs, image par image)
   - survol : il grossit, un halo apparaît, la flèche sort à droite et une
     nouvelle entre par la gauche
   - appui : il s'enfonce, puis rebondit au relâchement
   - activation : la flèche file vers la droite (.is-launching, intro.js) */
.showcase-card__go {
  --spring: cubic-bezier(0.22, 1.15, 0.36, 1);
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #0b0b0c;
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.5);
  opacity: calc(1 - min(var(--abs, 0) * 2, 1));
  scale: calc(1 - min(var(--abs, 0), 1) * 0.35);
  transition:
    transform 0.5s var(--spring),
    box-shadow 0.3s var(--ease);
}
.showcase-card__go svg {
  grid-area: 1 / 1;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition:
    transform 0.45s var(--ease-out),
    opacity 0.3s var(--ease);
}
.showcase-card__go svg + svg { transform: translateX(-170%); opacity: 0; }

@media (hover: hover) and (pointer: fine) {
  .showcase__item.is-current .showcase-card:hover .showcase-card__go {
    transform: scale(1.1);
    box-shadow:
      0 0 0 6px rgba(255, 255, 255, 0.16),
      0 10px 22px -8px rgba(0, 0, 0, 0.6);
  }
  .showcase__item.is-current .showcase-card:hover .showcase-card__go svg:first-child {
    transform: translateX(170%);
    opacity: 0;
  }
  .showcase__item.is-current .showcase-card:hover .showcase-card__go svg + svg {
    transform: none;
    opacity: 1;
  }
}

/* Appui : la carte et le bouton s'enfoncent (retour en rebond) */
.showcase-card { transition: transform 0.5s cubic-bezier(0.22, 1.15, 0.36, 1); }
.showcase__item.is-current .showcase-card:active { transform: scale(0.97); transition-duration: 0.15s; }
.showcase__item.is-current .showcase-card:active .showcase-card__go {
  transform: scale(0.86);
  transition-duration: 0.12s;
}

/* Activation : la flèche file vers la droite pendant que la flotte s'ouvre */
.showcase-card.is-launching .showcase-card__go { transform: scale(1.12); }
.showcase-card.is-launching .showcase-card__go svg:first-child,
.showcase-card.is-launching .showcase-card__go svg + svg {
  transform: translateX(170%);
  opacity: 0;
  transition-duration: 0.35s;
}

.showcase-card:focus-visible .showcase-card__go {
  box-shadow:
    0 0 0 3px rgba(8, 5, 4, 0.6),
    0 0 0 5px rgb(var(--brand-light-rgb) / 0.9);
}

@media (prefers-reduced-motion: reduce) {
  .showcase-card, .showcase-card__go, .showcase-card__go svg { transition: none; }
}

/* Points de page dans une petite pilule en verre */
.showcase__dots {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.showcase__dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: background-color 0.3s var(--ease);
}
.showcase__dot.is-active { background: #fff; }
.showcase__dot:focus-visible { outline: 2px solid rgb(var(--brand-light-rgb) / 0.9); outline-offset: 3px; }

@media (min-width: 768px) {
  .showcase { --card-w: 300px; gap: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .showcase__dot { transition: none; }
}

/* ==========================================================================
   Tablette / desktop
   ========================================================================== */
@media (min-width: 768px) {
  :root { --gutter: 16px; --radius-xl: 40px; }

  .hero__panel {
    --pad-top: calc(128px + env(safe-area-inset-top));
    --pad-bottom: calc(48px + var(--radius-xl));
    padding: 0 40px;
  }

  .chip__value { font-size: 40px; }
}

@media (min-width: 1024px) {
  .hero__panel {
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: var(--pad-top) 1fr auto 1fr var(--pad-bottom);
    grid-template-areas:
      ".     .     ."
      ".     .     ."
      "price title rating"
      ".     .     ."
      ".     .     .";
    column-gap: 48px;
  }

  .chip { margin-top: 0; }

  .chip { gap: 8px; }
  .chip__value { font-size: 56px; }
  .chip__label, .chip__value small { font-size: 13px; }
  .chip__stars, .chip__stars svg, .chip__star-part, .chip__google { width: auto; height: 22px; }
  .chip__stars svg, .chip__star-part, .chip__google { width: 22px; }

  .hero__title { font-size: clamp(60px, min(6vw, 10svh), 108px); }
}

/* ==========================================================================
   Écran de chargement : logo en verre qui se remplit de bleu (comme le CTA),
   puis fondu. L'intro de la hero reste en pause tant que .is-loading est là.
   ========================================================================== */
.loader { display: none; }

.is-loading .loader,
.loader.is-leaving {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
}

/* Fond de l'écran (séparé du logo pour pouvoir s'effacer seul) */
.loader::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 45% at 50% 50%, rgb(var(--brand-rgb) / 0.16), transparent 70%),
    var(--bg);
}

/* Sortie : le fond et le grain s'effacent, le logo s'envole vers la navbar */
.loader::before,
.loader .hero__grain { transition: opacity 1s var(--ease-out); }
/* Retour depuis la flotte : le logo est déjà en place au centre */
.is-returning .loader__logo { animation: none; }

.loader.is-leaving::before,
.loader.is-leaving .hero__grain { opacity: 0; }

.loader__logo {
  --p: 0; /* progression 0 → 1, pilotée par intro.js */
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  border-radius: 28px;
  overflow: hidden;
  animation: loader-in 0.9s var(--ease-out) backwards;
}

/* Le logo de la navbar prend le relais du logo de chargement :
   pas de descente, et caché tant que le logo de chargement vole vers lui */
.logo-handoff .navbar .logo { animation: none; }
.logo-hidden .navbar .logo { visibility: hidden; }

/* Le bleu monte avec la progression */
.loader__fill {
  position: absolute;
  inset: 0;
  z-index: -2; /* sous l'arête spéculaire */
  background: linear-gradient(180deg, rgb(var(--brand-rgb) / 0.30), rgb(var(--brand-rgb) / 0.55));
  transform: translateY(calc((1 - var(--p)) * 100%));
  transition: transform 0.6s var(--ease-out);
}


.loader__text {
  font-family: var(--font-serif);
  font-size: 26px;
  letter-spacing: 0.08em;
  text-indent: 0.08em;
  color: var(--text);
}

@keyframes loader-in {
  from { opacity: 0; transform: scale(0.9); filter: blur(10px); }
}

/* Intro en pause derrière l'écran de chargement */
.is-loading .logo,
.is-loading .hero__title,
.is-loading .chip,
.is-loading .hero__panel,
.is-loading .hero__panel > *,
.is-loading .hero__cta,
.is-loading .hero__cta .btn-glass {
  animation-play-state: paused;
}

/* ==========================================================================
   Apparition (intro), dans l'ordre :
   1. logo  2. titre lettre par lettre  3. prix / avis  4. vidéo  5. CTA
   Les délais sont des variables ; intro.js recale 3-5 sur la durée du titre.
   Toutes les animations sont en « backwards » : l'état final est le style normal.
   ========================================================================== */
.hero {
  --t-logo: 0.2s;
  --t-text: 1s;
  --t-chips: 2.8s;
  --t-video: 3.6s;
  --t-cta: 4.7s;
}

/* 1. Le logo descend depuis le haut */
.logo {
  animation: intro-logo 1.1s var(--ease-out) var(--t-logo) backwards;
}
@keyframes intro-logo {
  from { transform: translateY(-160px); opacity: 0; }
}

/* 2. Le titre apparaît en fondu */
.hero__title { animation: intro-title 0.6s var(--ease-out) 0.2s backwards; }
@keyframes intro-title {
  from { opacity: 0; transform: translateY(12px); }
}


/* 3. Prix et avis sortent des bords de l'écran */
.chip--price {
  animation:
    intro-from-left 0.6s var(--ease-out) var(--t-chips) backwards,
    intro-unstretch 0.7s var(--ease-out) var(--t-video) backwards; /* voir étape 4 */
}
.chip--rating {
  animation:
    intro-from-right 0.6s var(--ease-out) var(--t-chips) backwards,
    intro-unstretch 0.7s var(--ease-out) var(--t-video) backwards;
}
@keyframes intro-from-left  { from { transform: translateX(-50vw); opacity: 0; } }
@keyframes intro-from-right { from { transform: translateX(50vw);  opacity: 0; } }

/* 4. Le composant vidéo remonte par le bas et pousse le bloc du haut.
      Uniquement des transformations (aucun recalcul de mise en page) :
      - le composant vidéo part de sous l'écran (sa hauteur + la bordure en verre) ;
      - le bloc du haut est étiré de 10/7 depuis le haut : son bord bas suit
        exactement le haut du composant vidéo pendant toute la montée
        (0,7 × 10/7 = 100 % de l'écran au départ, 70 % à l'arrivée) ;
      - son contenu est contre-étiré pour ne pas être déformé. */
.hero__panel {
  transform-origin: top center;
  animation: intro-stretch 0.7s var(--ease-out) var(--t-video) backwards;
}
@keyframes intro-stretch {
  from { scale: 1 1.428571; }
}
.hero__title {
  animation: intro-unstretch 0.7s var(--ease-out) var(--t-video) backwards;
}
@keyframes intro-unstretch {
  from { scale: 1 0.7; }
}
.hero__cta {
  animation: intro-rise 0.7s var(--ease-out) var(--t-video) backwards;
}
@keyframes intro-rise {
  from { transform: translateY(100%); }
}

/* 5. Le CTA apparaît par le bas */
.hero__cta .btn-glass {
  animation: intro-cta 0.6s var(--ease-out) var(--t-cta) backwards;
}
@keyframes intro-cta {
  from { transform: translateY(48px); opacity: 0; }
}

/* ==========================================================================
   Flotte → accueil (clic sur le logo) : tout s'efface sauf le logo, qui
   rejoint le centre de l'écran ; la page se recharge alors sur l'écran de
   chargement, identique, et l'intro de l'accueil se rejoue.
   ========================================================================== */
.home-return {
  position: absolute;
  inset: 0;
  z-index: 9; /* au-dessus de la flotte, sous la navbar (le logo reste visible) */
  pointer-events: none;
  background:
    radial-gradient(60% 45% at 50% 50%, rgb(var(--brand-rgb) / 0.16), transparent 70%),
    var(--bg);
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.hero.is-going-home .home-return { opacity: 1; }
.hero.is-going-home .fleet {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.45s var(--ease), transform 0.6s var(--ease-out);
}

/* ==========================================================================
   Page véhicule (ouverte depuis une carte de la flotte)
   ========================================================================== */

/* Carte cliquable : lien étiré sur toute la carte */
.car-card__link {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
}
.car-card__link:focus-visible { outline: 2px solid rgb(var(--brand-light-rgb) / 0.9); outline-offset: 3px; }
/* Survol : la carte se soulève (sans transition) ; seule l'opacité est
   animée, pour l'estompage pendant la recherche */
.car-card { transition: opacity 0.3s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .car-card:hover { transform: translateY(-4px); }
}

.vehicle {
  position: absolute;
  inset: 0;
  z-index: 12; /* au-dessus de la flotte et de la navbar */
  display: flex;
  flex-direction: column;
  background: var(--bg);
  visibility: hidden;
  transition: visibility 0s linear 0.7s;
}
.vehicle[hidden] { display: none; }
.vehicle.is-open { visibility: visible; transition-delay: 0s; }

/* Barre du haut : retour, titre, favori */
.vehicle__bar {
  position: absolute;
  top: calc(16px + env(safe-area-inset-top));
  left: 16px;
  right: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.vehicle__bar-title { font-size: 16px; font-weight: 500; color: var(--text); }

.icon-btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:focus-visible { outline: 2px solid rgb(var(--brand-light-rgb) / 0.9); outline-offset: 3px; }

/* Équilibre la barre (même largeur que le bouton retour) : titre centré */
.vehicle__bar-spacer { width: 48px; height: 48px; }

/* Photo */
.vehicle__media {
  position: absolute;
  inset: 0; /* plein écran, derrière la fiche : aucune zone vide pendant l'arrivée */
  overflow: hidden;
  background:
    radial-gradient(70% 60% at 50% 45%, rgba(255, 255, 255, 0.14), transparent 70%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.45)),
    var(--car-color, #2f6f95);
  transform: scale(1.04);
  opacity: 0;
  transition: transform 0.9s var(--ease-out), opacity 0.6s var(--ease);
}
.vehicle.is-open .vehicle__media { transform: none; opacity: 1; }

/* Ouverture depuis une carte : un calque de la couleur de la carte s'étend
   jusqu'à couvrir l'écran (clip-path animé par intro.js), puis la page prend
   le relais avec la photo déjà en place. */
.vehicle-expand {
  position: absolute;
  inset: 0;
  z-index: 13;
  pointer-events: none;
  /* départ : même aspect que la carte (couleur + dégradé sombre) */
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.18) 45%, rgba(0, 0, 0, 0.62) 100%),
    var(--car-color, #2f6f95);
}
/* arrivée : même aspect que la photo de la page véhicule (fondu pendant l'expansion) */
.vehicle-expand::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: var(--page-look, 0);
  background:
    radial-gradient(70% 60% at 50% 45%, rgba(255, 255, 255, 0.14), transparent 70%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.45)),
    var(--car-color, #2f6f95);
}
.vehicle.from-card .vehicle__media,
.vehicle.is-closing .vehicle__media { transition: none; transform: none; opacity: 1; }

/* Fermeture (effet inverse) : les éléments partent vite, la fiche redescend
   en accélérant, puis intro.js rétracte la couleur jusqu'à la carte. */
.vehicle.is-closing .vehicle__sheet {
  transition: transform 0.55s cubic-bezier(0.7, 0, 0.84, 0), opacity 0.4s var(--ease);
  transition-delay: 0s;
}
.vehicle.is-closing .vehicle__bar,
.vehicle.is-closing .vehicle__watermark,
.vehicle.is-closing .feature {
  transition-duration: 0.35s;
  transition-delay: 0s;
}

/* Puis les éléments apparaissent dans l'ordre : filigrane, barre, fiche, tuiles */
/* --sheet-h = hauteur de la fiche (mesurée par intro.js) : le filigrane part
   du bas de l'écran et remonte en même temps que la fiche, comme poussé */
.vehicle__watermark {
  opacity: 0;
  transform: translateY(var(--sheet-h, 24px));
  transition:
    opacity 0.8s var(--ease),
    transform 1.4s var(--ease-out);
}
.vehicle.is-open .vehicle__watermark { opacity: 1; transform: none; transition-delay: 0.1s; }

.vehicle__bar {
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.5s var(--ease), transform 0.7s var(--ease-out);
}
.vehicle.is-open .vehicle__bar { opacity: 1; transform: none; transition-delay: 0.15s; }

.feature {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease), transform 0.7s var(--ease-out);
}
.vehicle.is-open .feature { opacity: 1; transform: none; }
.vehicle.is-open .feature:nth-child(1) { transition-delay: 0.8s; }
.vehicle.is-open .feature:nth-child(2) { transition-delay: 0.88s; }
.vehicle.is-open .feature:nth-child(3) { transition-delay: 0.96s; }

/* Nom du modèle en filigrane, en attendant la photo */
.vehicle__watermark {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--sheet-h, 0px) + 12px); /* centré au-dessus de la fiche */
  font-size: clamp(96px, 34vw, 260px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  text-align: center;
  color: rgba(255, 255, 255, 0.16);
}

/* Feuille d'infos en verre sombre (monte par le bas) */
.vehicle__sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 78%;
  overflow-y: auto;
  padding: 28px 20px calc(20px + env(safe-area-inset-bottom));
  border-radius: 32px 32px 0 0;
  background: rgba(28, 17, 12, 0.78);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow:
    inset 0 1.5px 0 rgba(170, 210, 225, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 -20px 40px -20px rgba(0, 0, 0, 0.6);
  /* arrivée progressive depuis le bas, même courbe que la vidéo de l'accueil */
  transform: translateY(100%);
  transition: transform 1.4s var(--ease-out);
}
.vehicle.is-open .vehicle__sheet { transform: none; transition-delay: 0.1s; }

.vehicle__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.vehicle__brand {
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-soft);
}
.vehicle__name {
  margin-top: 2px;
  font-family: var(--font-serif);
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
  color: var(--text);
}
.vehicle__rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 15px;
  white-space: nowrap;
  color: var(--text);
}
.vehicle__rating svg { width: 18px; height: 18px; fill: #e9c77b; }
.vehicle__rating-count { color: var(--text-soft); font-size: 13px; }

/* Statut réutilise la pastille des cartes, en position normale */
.vehicle__status.car-card__status { position: static; align-self: flex-start; margin-top: 14px; }

.vehicle__desc-wrap { margin-top: 14px; }
.vehicle__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-soft);
}
.vehicle__desc.is-expanded { -webkit-line-clamp: unset; }
.vehicle__more { padding: 2px 0; margin-top: 2px; }

.vehicle__section {
  margin: 22px 0 12px;
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}

.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.feature {
  -webkit-backdrop-filter: none; /* déjà sur la fiche floutée : pas de flou imbriqué */
  backdrop-filter: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 12px;
  border-radius: 18px;
}
.feature svg { width: 22px; height: 22px; margin-bottom: 8px; color: var(--brand-light); }
.feature__label { font-size: 12px; color: var(--text-soft); }
.feature__value { font-size: 16px; font-weight: 600; color: var(--text); }

.vehicle__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 22px;
}
.vehicle__price-label { display: block; font-size: 12px; color: var(--text-soft); }
.vehicle__price-value {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 400;
  color: var(--text);
}
.vehicle__price-value small {
  margin-left: 2px;
  font-family: var(--font);
  font-size: 14px;
  color: var(--text-soft);
}
.vehicle__book { flex: 1; max-width: 240px; }
.vehicle__book:disabled { opacity: 0.55; cursor: not-allowed; }
.vehicle__book:disabled .btn-fill { display: none; }

/* Desktop : photo plein écran, fiche en « liquid glass » bleu clair sur toute
   la hauteur à droite (collée en haut, à droite et en bas, arrondie à gauche) */
@media (min-width: 1024px) {
  .vehicle { --panel-w: clamp(440px, 34vw, 660px); flex-direction: row; }
  /* barre sur la zone photo : titre centré à gauche du panneau */
  .vehicle__bar { left: 32px; right: calc(var(--panel-w) + 32px); top: 24px; }
  /* centré sur la zone photo, à gauche du panneau */
  .vehicle__watermark {
    right: var(--panel-w);
    bottom: 32px;
    font-size: clamp(160px, 18vw, 300px);
    transform: translateY(40px);
  }
  .vehicle__sheet {
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: var(--panel-w);
    max-height: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 72px clamp(32px, 3.4vw, 56px) 48px;
    overflow-y: auto;
    border-radius: 44px 0 0 44px;
    /* verre clair teinté du bleu du site : reflet blanc en haut à gauche,
       voile bleu léger, arêtes lumineuses et lueur intérieure */
    background:
      linear-gradient(155deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.05) 38%, rgba(255, 255, 255, 0.02) 62%, rgb(var(--brand-light-rgb) / 0.10) 100%),
      rgb(var(--brand-rgb) / 0.16);
    -webkit-backdrop-filter: blur(26px) saturate(170%);
    backdrop-filter: blur(26px) saturate(170%);
    box-shadow:
      inset 1.5px 0 0 rgba(255, 255, 255, 0.45),
      inset 0 1.5px 0 rgba(255, 255, 255, 0.35),
      inset 0 -1.5px 0 rgba(255, 255, 255, 0.30),
      inset 24px 0 40px -24px rgba(255, 255, 255, 0.18),
      inset 0 -30px 50px -30px rgb(var(--brand-light-rgb) / 0.25),
      -30px 0 60px -24px rgba(0, 0, 0, 0.45);
    /* remonte depuis sous l'écran jusqu'à sa place */
    transform: translateY(100%);
  }
  .vehicle__name { font-size: 56px; }
  /* tuiles : même verre clair, plus discret */
  .vehicle__sheet .feature {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.45),
      inset 0 -1px 0 rgba(255, 255, 255, 0.2),
      inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  }
  .vehicle__sheet .feature::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .vehicle, .vehicle__media, .vehicle__sheet, .car-card,
  .vehicle__watermark, .vehicle__bar, .feature { transition: none; }
}

/* ==========================================================================
   Réservation (formulaire en 3 étapes, ouvert depuis la page véhicule)
   ========================================================================== */
.booking {
  position: absolute;
  inset: 0;
  z-index: 14; /* au-dessus de la page véhicule */
  color-scheme: dark; /* calendriers et listes natifs en sombre */
}
.booking[hidden] { display: none; }

.booking__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 5, 3, 0.55);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.booking.is-open .booking__backdrop { opacity: 1; }

/* Feuille en verre sombre : monte depuis le bas (comme la fiche véhicule) */
.booking__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  height: 88%; /* hauteur fixe : la feuille ne saute pas d'un écran à l'autre */
  border-radius: 32px 32px 0 0;
  background: rgba(28, 17, 12, 0.86);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow:
    inset 0 1.5px 0 rgba(170, 210, 225, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 -20px 40px -20px rgba(0, 0, 0, 0.6);
  transform: translateY(100%);
  transition: transform 0.9s var(--ease-out);
}
.booking.is-open .booking__panel { transform: none; }

.booking__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 20px 0;
}
.booking__vehicle {
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-soft);
}
.booking__title {
  margin-top: 2px;
  font-family: var(--font-serif);
  font-size: 34px;
  font-weight: 400;
  line-height: 1;
  color: var(--text);
}

/* Progression : une question par écran */
.progress { margin: 18px 20px 0; }
.progress__track {
  height: 4px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.progress__fill {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), var(--brand-light));
  box-shadow: 0 0 10px rgb(var(--brand-light-rgb) / 0.6);
  transform-origin: left;
  transform: scaleX(var(--progress, 0));
  transition: transform 0.6s var(--ease-out);
}
.progress__label {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-soft);
}
.progress[hidden] { display: none; }

.booking__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px;
}

.booking__step-title {
  margin-bottom: 18px;
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.1;
  font-weight: 600;
  color: var(--text);
}

/* Changement d'étape : fondu + léger glissement */
.booking__step.is-entering { animation: step-in 0.5s var(--ease-out); }
.booking__step.is-entering.is-back { animation-name: step-in-back; }
@keyframes step-in      { from { opacity: 0; transform: translateX(24px); } }
@keyframes step-in-back { from { opacity: 0; transform: translateX(-24px); } }

/* ---- Champs ---- */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
}
.field > label,
.field > legend {
  padding: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-soft);
}
.field > legend { margin-bottom: 6px; }
.field__optional { font-weight: 400; opacity: 0.8; }
.field[hidden] { display: none; } /* ex. adresse de livraison, masquée pour l'agence */
.field-row { display: flex; gap: 10px; }
.field-row > .field { flex: 1; }
.field-row > .field--time { flex: 0 0 38%; }

.input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  font: inherit;
  font-size: 16px; /* pas de zoom automatique sur iOS */
  color: var(--text);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
}
.input::placeholder { color: rgb(var(--grey-rgb) / 0.54); }
.input:focus {
  outline: 0;
  border-color: rgb(var(--brand-light-rgb) / 0.8);
  background: rgba(255, 255, 255, 0.09);
  box-shadow: 0 0 0 4px rgb(var(--brand-rgb) / 0.25);
}
textarea.input { resize: vertical; min-height: 88px; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, rgb(var(--grey-rgb) / 0.94) 50%), linear-gradient(135deg, rgb(var(--grey-rgb) / 0.94) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
select.input option { background: #1c110c; color: var(--text); }

.field.is-invalid .input { border-color: rgba(255, 110, 110, 0.85); }
.field__error {
  min-height: 0;
  font-size: 12px;
  color: #ff8a8a;
}
.field__error:empty { display: none; }
.field__hint { font-size: 12px; color: var(--text-soft); }

/* Choix côte à côte (lieu, kilométrage) */
.segmented {
  display: flex;
  gap: 6px;
  padding: 4px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.segmented label { flex: 1; cursor: pointer; }
.segmented input,
.option-card input,
.check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.segmented span {
  display: grid;
  place-items: center;
  min-height: 42px;
  padding: 6px 10px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  color: var(--text-soft);
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.segmented input:checked + span {
  background: rgb(var(--brand-rgb) / 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  color: var(--text);
}
.segmented input:focus-visible + span { outline: 2px solid rgb(var(--brand-light-rgb) / 0.9); outline-offset: 2px; }

/* Options en cartes cochables */
.option-cards { display: grid; gap: 10px; }
.field--spaced { margin-top: 16px; }
.option-card { cursor: pointer; }
.option-card__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.option-card__body strong { font-size: 15px; font-weight: 500; color: var(--text); }
.option-card__body small { font-size: 13px; color: var(--text-soft); white-space: nowrap; }
.option-card input:checked + .option-card__body {
  background: rgb(var(--brand-rgb) / 0.22);
  border-color: rgb(var(--brand-light-rgb) / 0.7);
}
.option-card input:focus-visible + .option-card__body { outline: 2px solid rgb(var(--brand-light-rgb) / 0.9); outline-offset: 2px; }

/* Récapitulatif */
.summary { margin: 0 0 18px; }
.summary__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 14px;
}
.summary__row dt { color: var(--text-soft); flex: none; }
.summary__row dd { margin: 0; text-align: right; color: var(--text); }

/* Case à cocher (conditions) */
.check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text);
  cursor: pointer;
}
.check__box {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.06);
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.check__box::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.25s var(--ease-out);
}
.check input:checked + .check__box { background: var(--brand); border-color: var(--brand); }
.check input:checked + .check__box::after { transform: rotate(45deg) scale(1); }
.check input:focus-visible + .check__box { outline: 2px solid rgb(var(--brand-light-rgb) / 0.9); outline-offset: 2px; }

/* Confirmation */
.booking__done { padding: 24px 0 8px; text-align: center; }
.done__icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  color: var(--brand-light);
}
.done__icon circle { stroke-dasharray: 151; stroke-dashoffset: 151; }
.done__icon path   { stroke-dasharray: 36;  stroke-dashoffset: 36; }
.booking__done.is-entering .done__icon circle { animation: draw 0.8s var(--ease-out) 0.1s forwards; }
.booking__done.is-entering .done__icon path   { animation: draw 0.5s var(--ease-out) 0.7s forwards; }
.booking__done:not(.is-entering) .done__icon circle,
.booking__done:not(.is-entering) .done__icon path { stroke-dashoffset: 0; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.done__text { max-width: 34ch; margin: 0 auto; font-size: 15px; line-height: 1.55; color: var(--text-soft); }

/* Pied : total + boutons */
.booking__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.booking__total { display: flex; flex-direction: column; min-width: 0; }
.booking__total-label { font-size: 12px; color: var(--text-soft); }
.booking__total-value {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--text);
}
.booking__total-detail { font-size: 12px; color: var(--text-soft); }
.booking__actions { display: flex; gap: 8px; flex: none; }
.booking__prev { width: auto; height: 56px; padding: 0 16px; }
.booking__next,
.booking__finish { min-height: 56px; padding: 0 22px; font-size: 16px; }
.booking__prev[hidden],
.booking__next[hidden],
.booking__finish[hidden],
.booking__total[hidden] { display: none; }

/* Desktop : même panneau que la fiche véhicule (pleine hauteur à droite) */
@media (min-width: 1024px) {
  .booking__panel {
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: clamp(440px, 34vw, 660px);
    height: auto;
    max-height: none;
    border-radius: 44px 0 0 44px;
    background:
      linear-gradient(155deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 38%, rgb(var(--brand-light-rgb) / 0.08) 100%),
      rgba(54, 33, 22, 0.72);
    -webkit-backdrop-filter: blur(26px) saturate(170%);
    backdrop-filter: blur(26px) saturate(170%);
    box-shadow:
      inset 1.5px 0 0 rgba(255, 255, 255, 0.45),
      inset 0 1.5px 0 rgba(255, 255, 255, 0.35),
      inset 0 -1.5px 0 rgba(255, 255, 255, 0.30),
      inset 24px 0 40px -24px rgba(255, 255, 255, 0.14),
      -30px 0 60px -24px rgba(0, 0, 0, 0.45);
    transform: translateY(100%);
  }
  .booking__head { padding: 40px clamp(32px, 3.4vw, 56px) 0; }
  .progress { margin: 20px clamp(32px, 3.4vw, 56px) 0; }
  .booking__body { padding: 24px clamp(32px, 3.4vw, 56px); }
  .booking__foot { padding: 18px clamp(32px, 3.4vw, 56px) 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .booking__backdrop, .booking__panel, .progress__fill,
  .input, .segmented span, .option-card__body, .check__box, .check__box::after { transition: none; }
  .booking__step.is-entering { animation: none; }
  .booking__done .done__icon circle, .booking__done .done__icon path { animation: none; stroke-dashoffset: 0; }
}

/* ==========================================================================
   Accessibilité
   ========================================================================== */
/* ==========================================================================
   Ouverture au clic sur « Réserver un véhicule » :
   1. le composant vidéo s'agrandit et remonte jusqu'à couvrir tout l'écran
   2. puis le bouton descend et disparaît
   ========================================================================== */
/* Uniquement des déplacements (transform) : aucun recalcul de mise en page
   pendant l'animation. Tout le bloc remonte de 70 % : le verre du haut sort
   par le haut et la vidéo (fond de la hero) occupe tout l'écran. */
.hero__grid  { transition: transform 0.9s var(--ease-inout); }
.hero__video { transition: transform 0.9s var(--ease-inout); }

/* -70 % + l'arrondi + la bordure : les coins en verre du bas du bloc
   (et la bordure du composant vidéo) sortent aussi entièrement de l'écran */
.hero.is-open .hero__grid { transform: translateY(calc(-70% - var(--radius-xl) - 12px)); }
/* et le bloc du haut s'efface une fois sorti, pour ne rien laisser en haut */
.hero__panel { transition: opacity 0.4s var(--ease); }
.hero.is-open .hero__panel { opacity: 0; transition-delay: 0.5s; }
/* titre, prix et avis s'effacent en remontant (ils ne passent pas sous le logo) */
.hero__panel > * { transition: opacity 0.4s var(--ease); }
.hero.is-open .hero__panel > * { opacity: 0; }
/* la bordure en verre du composant vidéo s'efface en remontant */
/* la vidéo se recentre sur tout l'écran : son centre passe de 85 % à 50 %
   de la hero, soit -35 % de la hero = -35 / 170 ≈ -20,6 % de sa propre hauteur */
.hero.is-open .hero__video { transform: translateY(-20.6%); }

.hero.is-cta-out .hero__cta .btn-glass {
  transform: translateY(45vh);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.8s var(--ease-inout),
    opacity 0.6s var(--ease-inout) 0.15s;
}

/* ==========================================================================
   Flotte : cartes véhicules (après l'ouverture)
   ========================================================================== */
.fleet {
  position: absolute;
  inset: 0;
  z-index: 8; /* sous la navbar (logo), au-dessus de la vidéo */
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  visibility: hidden;
  pointer-events: none;
  /* les cartes s'estompent en passant sous le logo */
  -webkit-mask: linear-gradient(180deg, transparent 0, #000 120px);
          mask: linear-gradient(180deg, transparent 0, #000 120px);
}
.fleet::-webkit-scrollbar { display: none; }

.hero.is-fleet .fleet { visibility: visible; pointer-events: auto; }

.fleet__list {
  display: grid;
  gap: 14px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding:
    calc(116px + env(safe-area-inset-top))
    calc(16px + env(safe-area-inset-right))
    calc(32px + env(safe-area-inset-bottom))
    calc(16px + env(safe-area-inset-left));
}

.fleet__defs { position: absolute; width: 0; height: 0; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* En-tête de la flotte : sous-titre + barre de recherche */
.fleet__head {
  position: relative;
  z-index: 5; /* les menus passent au-dessus des cartes */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 6px;
  text-align: center;
}

.fleet__title {
  font-size: 28px;
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--text);
}
.fleet__title .t-sans  { font-size: 0.9em; }
.fleet__title .t-serif { color: #e6f4fa; }

/* Barre de recherche en verre (même verre que le logo et le CTA) */
.search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 420px;
  height: 52px;
  padding: 0 20px;
  border-radius: 18px;
  color: var(--text);
  cursor: text;
  transition: box-shadow 0.3s var(--ease);
}
.search:focus-within {
  box-shadow:
    inset 0 10px 16px -10px rgba(0, 0, 0, 0.25),
    inset 0 -8px 14px -8px rgba(255, 255, 255, 0.28),
    0 0 0 1px rgba(0, 0, 0, 0.25),
    0 0 0 4px rgb(var(--brand-rgb) / 0.35);
}

.search__icon {
  width: 20px;
  height: 20px;
  flex: none;
  color: rgba(245, 245, 247, 0.8);
  transition: opacity 0.2s var(--ease), transform 0.3s var(--ease);
}

/* Chargement : la loupe laisse place à un petit anneau qui tourne */
.search__spinner {
  position: absolute;
  left: 21px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.22);
  border-top-color: rgba(255, 255, 255, 0.95);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s var(--ease), transform 0.3s var(--ease);
}
@keyframes spin { to { rotate: 360deg; } }

.fleet.is-searching .search__icon    { opacity: 0; transform: scale(0.6); }
/* ne tourne que pendant une recherche (pas d'animation infinie invisible) */
.fleet.is-searching .search__spinner { opacity: 1; transform: scale(1); animation: spin 0.7s linear infinite; }

.search__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 16px; /* 16 px : pas de zoom automatique sur iOS */
  color: var(--text);
}
.search__input::placeholder { color: rgb(var(--grey-rgb) / 0.81); }
.search__input::-webkit-search-cancel-button { filter: invert(1) opacity(0.6); }

/* ---- Outils : recherche + Trier + Filtrer ---- */
.fleet__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  max-width: 420px;
}
.fleet__tools .search { flex: 1 1 100%; max-width: none; }

.dropdown { position: relative; flex: 1 1 0; }

.tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 0;
  border-radius: 16px;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tool-btn svg { width: 18px; height: 18px; flex: none; }
.tool-btn__chevron { opacity: 0.7; transition: transform 0.3s var(--ease); }
.dropdown.is-open .tool-btn__chevron { transform: rotate(180deg); }
.tool-btn:focus-visible { outline: 2px solid rgb(var(--brand-light-rgb) / 0.9); outline-offset: 3px; }

/* Nombre de filtres actifs */
.tool-btn__badge {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  background: var(--brand);
  box-shadow: 0 0 10px rgb(var(--brand-rgb) / 0.6);
}
.tool-btn__badge[hidden] { display: none; }

/* Panneau déroulant en verre sombre */
.dropdown__panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: min(280px, calc(100vw - 32px));
  padding: 14px;
  border-radius: 20px;
  text-align: left;
  background: rgba(28, 17, 12, 0.72);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 24px 48px -16px rgba(0, 0, 0, 0.7);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top;
  transition:
    opacity 0.25s var(--ease),
    transform 0.35s var(--ease-out),
    visibility 0s linear 0.35s;
}
.dropdown--filter .dropdown__panel { left: auto; right: 0; width: min(310px, calc(100vw - 32px)); }
.dropdown.is-open .dropdown__panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.dropdown__label {
  margin: 0 0 8px 4px;
  padding: 0;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-soft);
}

/* Contrôles natifs gardés accessibles, masqués visuellement */
.option input,
.switch input,
.chip-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Options de tri */
.option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 15px;
  color: var(--text);
  cursor: pointer;
  transition: background 0.2s var(--ease);
}
.option:hover { background: rgba(255, 255, 255, 0.06); }
.option:has(input:checked) { background: rgb(var(--brand-rgb) / 0.22); }
.option:has(input:checked)::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--brand-light);
  box-shadow: 0 0 8px var(--brand-light);
}
.option:has(input:focus-visible) { outline: 2px solid rgb(var(--brand-light-rgb) / 0.9); outline-offset: -2px; }

/* Filtres */
.filter-group {
  min-width: 0;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}

.switch {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px;
  font-size: 15px;
  color: var(--text);
  cursor: pointer;
}
.switch__track {
  position: relative;
  flex: none;
  width: 42px;
  height: 26px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  transition: background 0.25s var(--ease);
}
.switch__track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  transition: transform 0.3s var(--ease-out);
}
.switch input:checked + .switch__track { background: var(--brand); }
.switch input:checked + .switch__track::after { transform: translateX(16px); }
.switch input:focus-visible + .switch__track { outline: 2px solid rgb(var(--brand-light-rgb) / 0.9); outline-offset: 2px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-toggle span {
  display: inline-block;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.28);
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.chip-toggle input:checked + span {
  background: rgb(var(--brand-rgb) / 0.35);
  border-color: rgb(var(--brand-light-rgb) / 0.75);
}
.chip-toggle input:focus-visible + span { outline: 2px solid rgb(var(--brand-light-rgb) / 0.9); outline-offset: 2px; }

.range input { width: 100%; accent-color: #d9a084; cursor: pointer; }
.range__value {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  text-align: right;
  color: var(--text-soft);
}

.dropdown__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.link-btn {
  padding: 4px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--brand-light);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.dropdown__count { font-size: 13px; color: var(--text-soft); }

.fleet__empty {
  padding: 32px 0;
  font-size: 15px;
  text-align: center;
  color: var(--text-soft);
}

.car-card[hidden] { display: none; }

/* Pendant la recherche, les cartes s'estompent (transition définie avec le survol) */
.fleet.is-searching .car-card { opacity: 0.3; }

/* …puis les résultats réapparaissent un par un (--j = rang du résultat) */
.hero.is-fleet .car-card.is-revealing {
  animation: car-reveal 0.7s var(--ease-out) calc(var(--j, 0) * 0.08s) backwards;
}
@keyframes car-reveal {
  from { opacity: 0; transform: translateY(24px) scale(0.97); filter: blur(6px); }
}
.fleet__empty:not([hidden]) { animation: car-reveal 0.5s var(--ease-out) backwards; }

/* Carte : fond transparent ; la bordure en verre est dessinée dans le SVG
   pour s'interrompre sous les lettres et entrer à l'intérieur */
.car-card {
  position: relative;
  isolation: isolate;
  aspect-ratio: 16 / 10;
  border-radius: 28px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.25),
    0 16px 32px -14px rgba(0, 0, 0, 0.65);
}

/* Photo + dégradé en SVG, avec le nom découpé dedans (transparent sur la vidéo) */
.car-card__art {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

/* Bordure de la carte (masquée là où sont les lettres) */
.car-card__rim {
  fill: none;
  stroke: url(#car-rim);
  stroke-width: 3; /* moitié visible, l'autre sort de la carte */
  /* pathLength="1" : un seul trait = tout le contour, pour pouvoir le « dessiner » */
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

/* Arête intérieure des lettres, même verre que la bordure */
.car-card__knock.car-card__letter-rim {
  fill: url(#car-letter-rim-fill);
  filter: url(#car-letter-rim);
}

/* Photo (placeholder unicolore, en attendant les vraies photos) */
.car-card__photo--sky      { fill: #2f6f95; }
.car-card__photo--hills    { fill: #4f6b48; }
.car-card__photo--dunes    { fill: #9a5c38; }
.car-card__photo--dusk     { fill: #5a4a6e; }
.car-card__photo--concrete { fill: #5b6168; }

/* Nom découpé : ligne de base (y = 100 %) collée au pied de la carte */
.car-card__knock {
  font-family: var(--font);
  font-size: clamp(72px, 26vw, 128px);
  font-weight: 800;
  letter-spacing: -0.05em;
  fill: #000; /* noir = zone retirée du masque */
}

/* Pastille en verre (haut gauche) */
.car-card__pill {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 7px 13px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.45);
}

/* Statut en verre (haut droite) : pastille de couleur + libellé */
.car-card__status {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px 7px 11px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.45);
}
.car-card__status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--status);
  box-shadow: 0 0 8px var(--status);
}
.car-card__status--available   { --status: #34c759; }
.car-card__status--rented      { --status: #ff9f0a; }
.car-card__status--unavailable { --status: #ff453a; }

/* Nom du modèle : lu par les lecteurs d'écran, affiché via la découpe SVG */
.car-card__name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Apparition des cartes, une par une */
.hero.is-fleet .fleet__head {
  animation: car-in 1s var(--ease-out) backwards;
}
.hero.is-fleet .car-card {
  animation: car-in 1s var(--ease-out) calc(var(--i) * 0.12s) backwards;
}
@keyframes car-in {
  from { opacity: 0; transform: translateY(80px) scale(0.96); }
}

@media (min-width: 768px) {
  .fleet__list {
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 18px;
    padding-left: 40px;
    padding-right: 40px;
  }
  .car-card__knock { font-size: 120px; }
}

/* Desktop : galerie qui remplit l'espace entre le logo et le bas de l'écran.
   Grille de 6 colonnes : 3 cartes par ligne (2 colonnes chacune) ; la dernière
   ligne s'élargit pour que la galerie reste un rectangle propre
   (2 cartes restantes = 3 colonnes chacune, 1 carte = toute la largeur). */
@media (min-width: 1024px) {
  .fleet__list {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto;          /* en-tête */
    grid-auto-rows: minmax(220px, 1fr); /* lignes de cartes */
    gap: 20px;
    max-width: 1680px;
    min-height: 100%;
    /* même écart (32 px) sous le logo et au-dessus du bas de l'écran */
    padding: calc(128px + env(safe-area-inset-top)) 48px calc(32px + env(safe-area-inset-bottom));
  }

  .car-card {
    grid-column: span 2;
    aspect-ratio: auto;          /* la hauteur vient de la grille */
    container-type: size;        /* le nom s'adapte à la taille de la carte */
  }
  /* Comptage sur les seules cartes visibles : la galerie reste un rectangle
     propre aussi après une recherche */
  .car-card:nth-last-child(2 of .car-card:not([hidden])):nth-child(3n + 1 of .car-card:not([hidden])),
  .car-card:nth-last-child(2 of .car-card:not([hidden])):nth-child(3n + 1 of .car-card:not([hidden])) ~ .car-card { grid-column: span 3; }
  .car-card:nth-last-child(1 of .car-card:not([hidden])):nth-child(3n + 1 of .car-card:not([hidden])) { grid-column: span 6; }

  /* En-tête sur une ligne : sous-titre à gauche, recherche à droite */
  .fleet__head,
  .fleet__empty { grid-column: 1 / -1; }
  .fleet__head {
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 0;
    text-align: left;
  }
  .fleet__title { font-size: 40px; }
  .fleet__tools { flex-wrap: nowrap; width: auto; max-width: none; }
  .fleet__tools .search { flex: 0 1 320px; }
  .dropdown { flex: none; }
  .tool-btn { width: auto; height: 52px; padding: 0 18px; border-radius: 18px; }
  .dropdown--sort .dropdown__panel { left: auto; right: 0; }

  .car-card__knock { font-size: min(46cqh, 32cqw); }
}

@media (prefers-reduced-motion: reduce) {
  .hero.is-fleet .car-card, .hero.is-fleet .fleet__head { animation: none; }
  .search, .search__icon, .search__spinner, .car-card, .dropdown__panel,
  .tool-btn__chevron, .switch__track, .switch__track::after { transition: none; }
  .search__spinner { animation-duration: 1.4s; }
  .hero.is-fleet .car-card.is-revealing, .fleet__empty:not([hidden]) { animation: none; }
  .hero, .hero__grid, .hero__video,
  .hero.is-cta-out .hero__cta .btn-glass { transition: none; }
  .btn-glass, .btn-glass svg, .btn-fill__level { transition: none; }
  .logo, .hero__title, .chip, .hero__panel, .hero__panel > *, .hero__cta, .hero__cta .btn-glass,
  .loader__logo { animation: none; }
  .loader__fill, .loader::before, .loader .hero__grain { transition: none; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass--blue    { --glass-fill: rgba(46, 28, 19, 0.85); }
}

/* « Réserver un véhicule » cliqué : le bouton reste à sa place (copie fixe)
   pendant que la vidéo monte ; il se resserre en rond bleu avec un anneau
   de chargement, puis s'efface quand les véhicules arrivent (intro.js) */
.hero.is-cta-loading .hero__cta .btn-glass { opacity: 0; transition: none; }
.cta-loader {
  position: fixed;
  z-index: 45;
  margin: 0;
  pointer-events: none;
  clip-path: inset(0 0 round 999px);
  transition:
    clip-path 0.6s var(--ease-out),
    left 0.7s var(--ease-inout),
    top 0.7s var(--ease-inout),
    opacity 0.4s var(--ease),
    transform 0.45s var(--ease-out);
}
.cta-loader > span:not(.btn-fill):not(.cta-loader__ring),
.cta-loader > svg { transition: opacity 0.2s var(--ease); }
.cta-loader .btn-fill__level { transition: transform 0.5s var(--ease-out); }
.cta-loader.is-spinning { clip-path: inset(0 calc(50% - var(--half)) round 999px); }
.cta-loader.is-spinning > span:not(.btn-fill):not(.cta-loader__ring),
.cta-loader.is-spinning > svg { opacity: 0; }
.cta-loader.is-spinning .btn-fill__level { transform: translateY(0); }
.cta-loader__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border: 2.5px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  border-radius: 50%;
  opacity: 0;
  animation: cta-spin 0.8s linear infinite;
  transition: opacity 0.3s var(--ease) 0.25s;
}
.cta-loader.is-spinning .cta-loader__ring { opacity: 1; }
.cta-loader.is-done { opacity: 0; transform: scale(0.6); }
@keyframes cta-spin { to { transform: rotate(360deg); } }

/* Navbar desktop : icônes seules, cases carrées de même taille */
@media (min-width: 768px) {
  .topbar__btn { width: 64px; padding: 0; justify-content: center; }
  .topbar__btn svg { width: 22px; height: 22px; }
  .topbar__btn--cta svg { width: 22px; height: 22px; stroke-width: 1.8; }
  .topbar__btn--cta:hover svg { transform: none; }
}

/* Comment ça marche (desktop) : tout tient dans la hauteur de l'écran,
   sous la navbar (80 px) ; tailles qui suivent la hauteur de la fenêtre */
@media (min-width: 1024px) {
  .howto__pin { padding: calc(var(--gutter) + 8px + 80px + 24px) 0 clamp(20px, 4svh, 48px); }
  .howto__stage { gap: clamp(48px, 6vw, 96px); }
  .howto__screen { height: min(100%, 620px); }
  .howto__list { gap: clamp(12px, 2.6svh, 34px); }
  .howto__item { gap: clamp(2px, 0.6svh, 6px); }
  .howto__kicker { font-size: clamp(11px, 1.4svh, 12px); }
  .howto__title { font-size: clamp(26px, 4.4svh, 40px); }
  .howto__text { font-size: clamp(14px, 2svh, 18px); line-height: 1.4; max-width: 38ch; }
}

/* Conditions de location : cartes moins hautes */
.ccard__inner { height: min(88vw, 360px); }
.ccard__art svg { width: 108px; height: 108px; }
@media (min-width: 1024px) {
  .ccard__inner { height: 380px; }
}

/* Écran de chargement : logo complet MK MOTORSPORT dans une tuile plus grande ;
   il s'efface au profit de la marque « MK » pendant l'envol vers la navbar */
.loader__logo { width: 176px; height: 176px; border-radius: 44px; }
.loader__text { position: relative; width: 100%; height: 100%; }
.loader__lockup,
.loader__mark {
  position: absolute;
  top: 50%;
  left: 50%;
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.loader__lockup { width: 84%; }
.loader__text .loader__mark { width: 62%; opacity: 0; }

/* Diaporama de secours (sans WebGL) : deux calques en fondu, zoom lent */
.hero__slide {
  position: absolute;
  inset: 0;
  background: center / cover no-repeat;
  opacity: 0;
  transition: opacity 1.8s ease-in-out, transform 9s linear;
  transform: scale(1);
}
.hero__slide.is-front { opacity: 1; }
.hero__slide.is-on { transform: scale(1.07); }
@media (prefers-reduced-motion: reduce) { .hero__slide { transition: opacity 1.8s ease-in-out; transform: none !important; } }

/* Logo seul, sans tuile en verre : navbar (logo fixe + barre desktop)
   et écran de chargement */
.navbar .logo,
.loader__logo,
.topbar__logo,
.topbar__logo:hover,
html.is-on-light .topbar__logo {
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.navbar .logo::before,
.loader__logo::before { content: none; }
.loader__fill { display: none; }
.navbar .logo .mk-mark { width: 100%; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45)); }
.loader__lockup { width: 100%; }
.loader__text .loader__mark { width: 100%; }
/* la progression du chargement se lit sur le logo lui-même */
.loader__lockup { opacity: calc(0.35 + 0.65 * var(--p)); transition: opacity 0.6s var(--ease-out); }

/* À propos : texte plus petit */
.about__manifesto {
  max-width: 30ch;
  font-size: clamp(20px, 5vw, 34px);
  line-height: 1.25;
}

/* Contact : réponses uniquement à toucher (plus de saisie) */
.chat__chips { justify-content: flex-end; padding-top: 4px; }
.chat__chip {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  line-height: 1.2;
}
.chat__chip-sub { font-size: 12px; color: var(--text-soft); }
.chat__chip--back { border-color: var(--hairline); color: var(--text-soft); }
.chat__chip--back:hover { background: rgba(255, 255, 255, 0.06); }
/* premier choix : grille de véhicules avec photo */
.chat__chips--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.chat__chips--grid .chat__chip { width: 100%; padding: 8px 10px 10px; border-radius: 16px; }
.chat__chip--car { padding-top: 8px; }
.chat__chip-img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  margin-bottom: 6px;
  border-radius: 10px;
  background: center 60% / cover no-repeat #2f211a;
}
@media (min-width: 768px) {
  .chat__chips--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* la conversation s'agrandit pour montrer tous les choix */
.chat { grid-template-rows: auto 1fr auto; height: auto; min-height: 560px; }
.chat__log { min-height: 200px; max-height: 420px; }
.chat__chips { padding-bottom: 14px; }
.chat__chip-label { font-size: 14px; }
.chat__chips--grid .chat__chip-label { font-size: 13px; font-weight: 500; color: var(--text); }
/* vignette compacte : photo carrée à gauche, nom + prix à droite */
.chat__chips--grid .chat__chip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 2px;
  align-content: center;
  min-height: 60px;
  padding: 7px 10px 7px 7px;
  border-radius: 14px;
}
.chat__chips--grid .chat__chip:not(.chat__chip--car) { padding-left: 12px; grid-template-columns: minmax(0, 1fr); }
.chat__chip-img {
  grid-row: 1 / 3;
  width: 46px;
  height: 46px;
  aspect-ratio: auto;
  margin: 0;
  border-radius: 10px;
}
.chat__chips--grid .chat__chip-label,
.chat__chips--grid .chat__chip-sub { align-self: end; overflow: hidden; text-overflow: ellipsis; }
.chat__chips--grid .chat__chip-sub { align-self: start; }
.chat__chips--grid .chat__chip-label { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.15; }
@media (min-width: 768px) {
  .chat__chips--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Choix du chat : texte centré verticalement, marge pour les coins arrondis */
.chat__chips { padding: 6px 20px 20px; }
.chat__chip { justify-content: center; min-height: 44px; }

/* Calendrier interactif (dates de location) */
.ccal {
  width: 100%;
  max-width: 360px;
  margin-left: auto;
  padding: 12px 12px 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.ccal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ccal__month { font-size: 15px; font-weight: 600; text-transform: capitalize; }
.ccal__nav {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--brand);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.ccal__nav:disabled { opacity: 0.3; cursor: default; }
.ccal__week,
.ccal__grid { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.ccal__week span { padding: 4px 0; font-size: 11px; font-weight: 600; color: var(--text-soft); }
.ccal__grid { row-gap: 2px; }
.ccal__day {
  position: relative;
  height: 38px;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}
.ccal__day::before {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: -1;
  border-radius: 50%;
  transition: background-color 0.2s var(--ease);
}
.ccal__day { isolation: isolate; }
.ccal__day:hover:not(:disabled)::before { background: rgba(255, 255, 255, 0.08); }
.ccal__day:disabled { color: rgb(var(--grey-rgb) / 0.3); cursor: default; }
.ccal__day.is-today { color: var(--brand); font-weight: 600; }
.ccal__day.is-in { background: rgb(var(--brand-rgb) / 0.18); }
.ccal__day.is-start,
.ccal__day.is-end { color: #fff; font-weight: 600; }
.ccal__day.is-start::before,
.ccal__day.is-end::before { background: var(--brand); }
/* bande continue entre le départ et le retour */
.ccal__day.is-start:has(~ .is-in, ~ .is-end) { background: linear-gradient(90deg, transparent 50%, rgb(var(--brand-rgb) / 0.18) 50%); }
.ccal__day.is-end { background: linear-gradient(90deg, rgb(var(--brand-rgb) / 0.18) 50%, transparent 50%); }
.ccal__day.is-start.is-end { background: none; }
.ccal__foot { margin-top: 10px; min-height: 20px; font-size: 13px; color: var(--text-soft); text-align: center; }
.ccal__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.ccal__confirm {
  min-height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--brand);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s var(--ease), transform 0.3s cubic-bezier(0.22, 1.15, 0.36, 1);
}
.ccal__confirm:disabled { opacity: 0.35; cursor: default; }
.ccal__confirm:not(:disabled):active { transform: scale(0.95); }
.ccal__day:focus-visible,
.ccal__nav:focus-visible,
.ccal__confirm:focus-visible { outline: 2px solid rgb(var(--brand-light-rgb) / 0.9); outline-offset: 2px; }

/* Prestations : la photo de la prestation occupe toute la carte.
   Elle n'est jamais agrandie : affichée en entier (« contain »), le reste de
   la carte est rempli par la même photo, déformée (effet distorsion) et
   assombrie. Les photos glissent avec la prestation (même --progress). */
.services__card { isolation: isolate; }
.services__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.services__bg-track {
  display: flex;
  height: 100%;
  transform: translateX(calc(var(--progress, 0) * (var(--count) - 1) * -100%));
  will-change: transform;
}
.services__bg-item {
  position: relative;
  flex: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.services__bg-fill,
.services__bg-photo {
  position: absolute;
  inset: 0;
  background: var(--img) center / cover no-repeat;
}
/* remplissage : photo déformée, floutée, plus sombre */
.services__bg-fill {
  inset: -12%;
  filter: url(#svc-distort) blur(6px) brightness(0.55) saturate(1.1);
}
/* photo nette, en entier, fondue sur les bords dans le remplissage */
.services__bg-photo {
  background-size: contain;
  -webkit-mask: radial-gradient(closest-side, #000 78%, transparent 100%);
          mask: radial-gradient(closest-side, #000 78%, transparent 100%);
  -webkit-mask-size: var(--mask-w, 100%) 100%;
          mask-size: var(--mask-w, 100%) 100%;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
/* lisibilité : sombre en haut (titre) et en bas (texte, bouton) */
.services__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 5, 4, 0.78) 0%, rgba(8, 5, 4, 0.25) 34%, rgba(8, 5, 4, 0.2) 52%, rgba(8, 5, 4, 0.85) 82%, rgba(8, 5, 4, 0.92) 100%);
}
/* le texte de la prestation se pose en bas, la photo respire au milieu */
.services__slide { align-content: end; padding-bottom: 6px; }
.services__slide p { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5); }
@media (max-width: 1023px) {
  .services__sticky { align-items: stretch; }
  .services__card { grid-template-rows: auto auto minmax(0, 1fr) auto; height: 100%; }
  .services__panel { height: auto; }
}
/* photo nette à sa vraie proportion, la plus grande possible sans
   dépasser la carte, bords fondus dans le remplissage déformé */
.services__bg-item { container-type: size; }
.services__bg-photo {
  inset: auto;
  top: 50%;
  left: 50%;
  width: min(100cqw, 100cqh * var(--ar));
  height: min(100cqh, 100cqw / var(--ar));
  transform: translate(-50%, -50%);
  background-size: cover;
  -webkit-mask: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent),
                linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-composite: source-in;
          mask: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent),
                linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent);
          mask-composite: intersect;
}
/* onglets lisibles sur la photo */
.services__tab { color: rgba(255, 255, 255, 0.62); filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.6)); }
.services__tab.is-active { color: #fff; }
.services__title, .services__eyebrow { text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45); }
/* Prestations : couches de photos prêtes à glisser sans être redessinées */
.services__bg-item { will-change: transform; contain: paint; }
.services__track, .services__bg-track { transition: none; }

/* ==========================================================================
   Page véhicule (refonte façon iOS) : galerie plein écran, chiffres clés,
   listes groupées, réservation fixe en bas. Ordinateur : galerie à gauche
   (collée), infos à droite.
   ========================================================================== */
.vp {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #0b0806;
  color: var(--text);
}
.vp__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding-bottom: calc(110px + env(safe-area-inset-bottom));
}
.vp__scroll::-webkit-scrollbar { display: none; }

/* Barre du haut : bouton rond en verre ; titre qui apparaît en défilant */
.vp__top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 12px;
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
  transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.vehicle.is-scrolled .vp__top {
  background: rgba(11, 8, 6, 0.72);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
          backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}
.vp__round {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(20, 14, 10, 0.45);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
          backdrop-filter: blur(16px) saturate(160%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 6px 18px -8px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.22, 1.15, 0.36, 1);
}
.vp__round:active { transform: scale(0.9); }
.vp__round svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.vp__round:focus-visible { outline: 2px solid rgb(var(--brand-light-rgb) / 0.9); outline-offset: 3px; }
.vp__top-title {
  margin: 0;
  overflow: hidden;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 16px;
  font-weight: 600;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.vehicle.is-scrolled .vp__top-title { opacity: 1; transform: none; }
.vp__count {
  justify-self: end;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: rgba(20, 14, 10, 0.45);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: opacity 0.25s var(--ease);
}
.vp__count:empty { display: none; }
.vehicle.is-scrolled .vp__count { opacity: 0; }

/* Galerie : photos plein cadre qu'on fait glisser */
.vp__gallery { position: relative; height: 66svh; min-height: 380px; background: #140e0a; }
.vp__slides {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.vp__slides::-webkit-scrollbar { display: none; }
.vp__slide { flex: none; width: 100%; height: 100%; margin: 0; scroll-snap-align: center; }
.vp__slide img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
/* fondu vers la page sous la photo, et voile en haut pour les boutons */
.vp__gallery::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 120px;
  background: linear-gradient(180deg, rgba(11, 8, 6, 0), #0b0806);
  pointer-events: none;
}
.vp__gallery::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  height: 120px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.45), transparent);
  pointer-events: none;
}
.vp__dots {
  position: absolute;
  left: 50%;
  bottom: 40px;
  z-index: 2;
  display: flex;
  gap: 6px;
  padding: 6px 9px;
  border-radius: var(--radius-pill);
  background: rgba(20, 14, 10, 0.45);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  transform: translateX(-50%);
}
.vp__dots[hidden] { display: none; }
.vp__dots span { width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.45); transition: background-color 0.3s var(--ease); }
.vp__dots span.is-active { width: 18px; background: #fff; }

/* Infos */
.vp__info { position: relative; z-index: 1; margin-top: -20px; padding: 0 20px; }
.vp__brand {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
}
.vp__name {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(34px, 9vw, 52px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.01em;
}

/* Chiffres clés : bandeau à colonnes séparées (App Store) */
.vp__stats {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  margin: 22px 0 0;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.vp__stat { display: grid; gap: 4px; padding: 0 6px; text-align: center; }
.vp__stat + .vp__stat { border-left: 1px solid rgba(255, 255, 255, 0.1); }
.vp__stat dt { font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-soft); white-space: nowrap; }
.vp__stat dd { margin: 0; font-size: 21px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vp__stat dd small { font-size: 12px; font-weight: 500; color: var(--text-soft); }

.vp__desc { margin: 20px 0 0; font-size: 16px; line-height: 1.55; color: rgba(245, 240, 236, 0.86); }

.vp__section { margin: 34px 0 10px; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }

/* Listes groupées iOS */
.vp__list {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
}
.vp__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 54px;
  padding: 12px 16px;
}
.vp__row + .vp__row { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.vp__row-main { display: grid; gap: 2px; }
.vp__row-title { font-size: 16px; font-weight: 500; }
.vp__row-sub { font-size: 13px; color: var(--text-soft); }
.vp__row-price { font-size: 17px; font-weight: 600; color: var(--brand); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vp__specs .vp__row { align-items: flex-start; }
.vp__specs dt { flex: none; max-width: 45%; font-size: 15px; color: var(--text-soft); }
.vp__specs dd { margin: 0; font-size: 15px; font-weight: 500; text-align: right; }
.vp__note { margin: 10px 4px 0; font-size: 13px; color: var(--text-soft); }

.vp__facts li { display: grid; grid-template-columns: 32px auto 1fr; align-items: center; gap: 12px; min-height: 54px; padding: 10px 16px; }
.vp__facts li + li { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.vp__facts span:not(.vp__fact-icon) { font-size: 15px; color: var(--text-soft); }
.vp__facts strong { font-size: 15px; font-weight: 500; text-align: right; }
.vp__fact-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: rgb(var(--brand-rgb) / 0.18); color: var(--brand); }
.vp__fact-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vp__info .site-footer { margin: 40px -20px 0; }

/* Barre de réservation fixe (verre) */
.vp__bar {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 10px 10px 20px;
  border-radius: 26px;
  background: rgba(28, 20, 15, 0.72);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
          backdrop-filter: blur(24px) saturate(180%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 18px 40px -16px rgba(0, 0, 0, 0.8);
}
.vp__price { display: grid; line-height: 1.15; }
.vp__price-label { font-size: 12px; color: var(--text-soft); }
.vp__price-value { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.vp__price-value small { font-size: 13px; font-weight: 500; color: var(--text-soft); }
.vp__cta {
  min-width: 150px;
  height: 52px;
  padding: 0 26px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--brand);
  color: #fff;
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 10px 24px -10px rgb(var(--brand-rgb) / 0.8);
  transition: transform 0.3s cubic-bezier(0.22, 1.15, 0.36, 1), filter 0.2s var(--ease);
}
.vp__cta:hover { filter: brightness(1.08); }
.vp__cta:active { transform: scale(0.95); }
.vp__cta:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.vp__cta:focus-visible { outline: 2px solid rgb(var(--brand-light-rgb) / 0.9); outline-offset: 3px; }

/* Apparition : la photo se pose (léger zoom arrière), le contenu monte */
.vp__slides, .vp__info, .vp__bar, .vp__top { transition: opacity 0.5s var(--ease), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.vehicle:not(.is-open) .vp__slides { opacity: 0; transform: scale(1.06); }
.vehicle:not(.is-open) .vp__info { opacity: 0; transform: translateY(40px); }
.vehicle:not(.is-open) .vp__bar { opacity: 0; transform: translateY(30px); }
.vehicle:not(.is-open) .vp__top { opacity: 0; }
.vehicle.is-open .vp__info { transition-delay: 0.08s; }
.vehicle.is-open .vp__bar { transition-delay: 0.2s; }
.vehicle.is-closing .vp__slides,
.vehicle.is-closing .vp__info,
.vehicle.is-closing .vp__bar,
.vehicle.is-closing .vp__top { transition-duration: 0.35s; transition-delay: 0s; }

/* Ordinateur : galerie collée à gauche, infos à droite */
@media (min-width: 1024px) {
  .vp__scroll {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(420px, 1fr);
    padding-bottom: 0;
  }
  .vp__gallery { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; }
  .vp__gallery::after { inset: 0 0 0 auto; width: 120px; height: auto; background: linear-gradient(90deg, rgba(11, 8, 6, 0), #0b0806); }
  .vp__dots { bottom: 28px; }
  .vp__info { margin: 0; padding: 110px clamp(32px, 4vw, 64px) 140px; max-width: 640px; }
  .vp__bar { left: auto; right: clamp(24px, 3vw, 48px); width: min(560px, calc(46vw - 48px)); bottom: 24px; }
  .vp__top { padding: 20px 28px; }
  .vehicle.is-scrolled .vp__top { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .vp__top-title { display: none; }
  .vp__count { position: absolute; left: calc(53.5% - 80px); top: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .vp__slides, .vp__info, .vp__bar, .vp__top { transition: none; }
}

/* Page véhicule : la barre de réservation suit le contenu (collée en bas
   pendant la lecture) et s'arrête au-dessus du footer, qui passe dessous
   en pleine largeur. */
.vp__scroll { padding-bottom: 0; }
.vp__info { padding-bottom: 20px; }
.vp__bar {
  position: sticky;
  left: auto;
  right: auto;
  bottom: calc(12px + env(safe-area-inset-bottom));
  width: auto;
  margin: 28px -8px 0;
}
.vp__scroll > .site-footer { margin: 28px 0 0; }
@media (min-width: 1024px) {
  .vp__scroll { display: block; }
  .vp__main {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(420px, 1fr);
  }
  .vp__info { padding-bottom: 32px; }
  .vp__bar { right: auto; width: auto; bottom: 24px; margin: 36px 0 0; }
}

/* ==========================================================================
   Réservation (refonte façon iOS) : feuille sombre, progression en
   segments, calendrier tactile, listes groupées, interrupteurs, bouton orange
   ========================================================================== */
.booking .booking__panel {
  background: #120d0a;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 -20px 60px -20px rgba(0, 0, 0, 0.8);
}
.booking__grabber {
  align-self: center;
  flex: none;
  width: 38px;
  height: 5px;
  margin-top: 8px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.22);
}
.booking .booking__head { align-items: center; gap: 14px; padding: 14px 20px 0; }
.booking__thumb {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #241a14 center 60% / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.booking__head-text { flex: 1; min-width: 0; }
.booking .booking__vehicle { margin: 0 0 2px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; color: var(--brand); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.booking .booking__title { margin: 0; font-family: var(--font); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.booking__close {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(245, 240, 236, 0.75);
  cursor: pointer;
}
.booking__close svg, .booking__prev svg, .bcal__nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.booking__close:active { transform: scale(0.9); }

/* Progression : 7 segments */
.booking .progress { padding: 16px 20px 0; }
.booking .progress__track {
  height: 4px;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.12);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc((100% - 24px) / 7), transparent 0 calc((100% - 24px) / 7 + 4px));
          mask: repeating-linear-gradient(90deg, #000 0 calc((100% - 24px) / 7), transparent 0 calc((100% - 24px) / 7 + 4px));
}
.booking .progress__fill { background: var(--brand); border-radius: 0; }
.booking .progress__label { margin-top: 8px; font-size: 12px; color: var(--text-soft); }

.booking .booking__body { padding: 22px 20px 28px; }
.booking .booking__step-title {
  margin: 0 0 6px;
  font-family: var(--font);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
}
.booking .booking__hint { margin: 0 0 16px; font-size: 15px; color: var(--text-soft); }
.booking .booking__step-title + :not(.booking__hint) { margin-top: 16px; }
.booking .booking__note { margin: 12px 4px 0; font-size: 13px; line-height: 1.45; color: var(--text-soft); }

/* Calendrier */
.bcal { padding: 14px 12px 12px; border-radius: 20px; background: rgba(255, 255, 255, 0.06); }
.bcal__head { display: flex; align-items: center; gap: 6px; padding: 0 4px 8px; }
.bcal__month { flex: 1; font-size: 17px; font-weight: 600; text-transform: capitalize; }
.bcal__nav {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--brand);
  cursor: pointer;
}
.bcal__nav:disabled { opacity: 0.3; cursor: default; }
.bcal__week, .bcal__grid { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.bcal__week span { padding: 2px 0 6px; font-size: 12px; font-weight: 600; color: var(--text-soft); }
.bcal__grid { row-gap: 4px; }
.bcal__day {
  position: relative;
  isolation: isolate;
  height: 42px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.bcal__day::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.bcal__day:hover:not(:disabled)::before { background: rgba(255, 255, 255, 0.08); }
.bcal__day:disabled { color: rgb(var(--grey-rgb) / 0.28); cursor: default; }
.bcal__day.is-today { color: var(--brand); font-weight: 700; }
.bcal__day.is-in { background: rgb(var(--brand-rgb) / 0.2); }
.bcal__day.is-start, .bcal__day.is-end { color: #fff; font-weight: 700; }
.bcal__day.is-start::before, .bcal__day.is-end::before { background: var(--brand); }
.bcal__day.is-start:has(~ .is-end) { background: linear-gradient(90deg, transparent 50%, rgb(var(--brand-rgb) / 0.2) 50%); }
.bcal__day.is-end { background: linear-gradient(90deg, rgb(var(--brand-rgb) / 0.2) 50%, transparent 50%); }
.bcal__day:focus-visible { outline: none; }
.bcal__day:focus-visible::before { box-shadow: 0 0 0 2px rgb(var(--brand-light-rgb) / 0.9); }
.bcal__summary { margin: 10px 4px 0; font-size: 14px; font-weight: 500; text-align: center; color: var(--text-soft); }
.field--bare { margin: 0; }
.field--bare .field__error:empty { display: none; }

/* Listes groupées (heures, choix, options) */
.booking .ios-group,
.booking .option-cards {
  display: block;
  margin-top: 16px;
  overflow: hidden;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
}
.booking .ios-row,
.booking .option-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 56px;
  margin: 0;
  padding: 12px 16px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  cursor: pointer;
}
.booking .ios-row + .ios-row,
.booking .option-card + .option-card { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.booking .ios-row > span { font-size: 16px; }
.booking .ios-row select {
  -webkit-appearance: none;
          appearance: none;
  padding: 6px 12px;
  border: 0;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}
.booking .option-card input { position: absolute; opacity: 0; pointer-events: none; }
.booking .option-card__body { display: grid; gap: 2px; padding: 0; }
.booking .option-card__body strong { font-size: 16px; font-weight: 500; }
.booking .option-card__body small { font-size: 13px; color: var(--text-soft); }
.booking .option-card::before,
.booking .option-card::after { content: none; }
/* choix unique : coche orange à droite */
.booking .option-card:has(input[type="radio"])::after {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25);
}
.booking .option-card:has(input[type="radio"]:checked)::after {
  box-shadow: none;
  background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat;
}
/* options : interrupteurs iOS */
.booking .option-card:has(input[type="checkbox"])::after {
  content: "";
  flex: none;
  width: 51px;
  height: 31px;
  border-radius: 16px;
  background:
    radial-gradient(circle 13.5px at 15.5px 50%, #fff 96%, transparent 100%),
    rgba(255, 255, 255, 0.16);
  transition: background-color 0.25s var(--ease), background-position 0.25s var(--ease);
}
.booking .option-card:has(input[type="checkbox"]:checked)::after {
  background:
    radial-gradient(circle 13.5px at 35.5px 50%, #fff 96%, transparent 100%),
    #34c759;
}
.booking .option-card:has(input:focus-visible) { outline: 2px solid rgb(var(--brand-light-rgb) / 0.9); outline-offset: -2px; border-radius: 18px; }

/* Champs texte : cartes à étiquette intégrée */
.booking .field { margin-top: 12px; }
.booking .field-row { gap: 12px; }
.booking .field-row .field { margin-top: 12px; }
.booking .field > label,
.booking .field__label { display: block; margin: 0 0 6px 4px; font-size: 13px; font-weight: 500; color: var(--text-soft); }
.booking .input {
  height: 52px;
  padding: 0 16px;
  border: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: none;
  color: var(--text);
  font-size: 17px;
}
.booking textarea.input { height: auto; min-height: 96px; padding: 14px 16px; }
.booking .input:focus { outline: none; box-shadow: 0 0 0 2px var(--brand); background: rgba(255, 255, 255, 0.09); }
.booking .field.is-invalid .input { box-shadow: 0 0 0 2px #ff453a; }
.booking .field__error { margin: 6px 4px 0; font-size: 13px; color: #ff6961; }

/* Permis : sélecteur segmenté */
.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
}
.segmented label { position: relative; cursor: pointer; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span {
  display: grid;
  place-items: center;
  min-height: 42px;
  padding: 4px 8px;
  border-radius: 9px;
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  line-height: 1.15;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.segmented small { display: block; font-size: 11px; color: var(--text-soft); }
.segmented input:checked + span { background: #3a2b22; color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); }
.segmented input:focus-visible + span { outline: 2px solid rgb(var(--brand-light-rgb) / 0.9); }

/* Récapitulatif + case à cocher */
.booking .summary { margin-top: 16px; overflow: hidden; border-radius: 18px; background: rgba(255, 255, 255, 0.06); }
.booking .check { margin-top: 16px; }

/* Pied : total + retour (chevron rond) + bouton orange */
.booking .booking__foot { padding: 12px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255, 255, 255, 0.08); background: #120d0a; }
.booking .booking__total-value { font-family: var(--font); font-size: 24px; font-weight: 700; }
.booking .booking__actions { display: flex; align-items: center; gap: 10px; }
.booking__prev {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
  cursor: pointer;
}
.booking__prev[hidden] { display: none; }
.booking .booking__next {
  min-width: 140px;
  height: 50px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--brand);
  box-shadow: 0 10px 24px -10px rgb(var(--brand-rgb) / 0.8);
  color: #fff;
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.22, 1.15, 0.36, 1), filter 0.2s var(--ease);
}
.booking .booking__next[hidden] { display: none; }
.booking .booking__next:hover { filter: brightness(1.08); }
.booking .booking__next:active, .booking__prev:active { transform: scale(0.94); }
.booking__prev:focus-visible, .booking .booking__next:focus-visible, .booking__close:focus-visible { outline: 2px solid rgb(var(--brand-light-rgb) / 0.9); outline-offset: 3px; }

@media (min-width: 1024px) {
  .booking .booking__panel { background: #120d0a; }
  .booking__grabber { display: none; }
  .booking .booking__head { padding-top: 28px; }
}
.booking .summary__row { padding: 12px 16px; border: 0; }
.booking .summary__row + .summary__row { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.booking .option-card__body,
.booking .option-card input:checked + .option-card__body {
  display: grid;
  border: 0;
  border-radius: 0;
  background: none;
  outline: none;
}
.booking .option-card__body small { white-space: normal; }

/* Galerie : boutons des réseaux, aux couleurs de chaque réseau (dégradés) */
.gallery__socials {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 760px;
  padding: 0 16px;
}
.social-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 20px 0 16px;
  border-radius: var(--radius-pill);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 10px 24px -12px var(--glow, rgba(0, 0, 0, 0.5)), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: transform 0.4s cubic-bezier(0.22, 1.15, 0.36, 1), filter 0.2s var(--ease);
}
.social-btn svg { flex: none; width: 20px; height: 20px; fill: currentColor; }
@media (hover: hover) and (pointer: fine) {
  .social-btn:hover { transform: translateY(-2px); filter: brightness(1.06) saturate(1.05); }
}
.social-btn:active { transform: scale(0.96); transition-duration: 0.12s; }
.social-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.social-btn--instagram {
  --glow: rgba(214, 41, 118, 0.7);
  background: radial-gradient(circle at 18% 110%, #feda75 0%, #fa7e1e 22%, #d62976 48%, #962fbf 72%, #4f5bd5 100%);
}
.social-btn--tiktok {
  --glow: rgba(37, 244, 238, 0.45);
  background: linear-gradient(135deg, #25f4ee -30%, #0b0b0d 32%, #0b0b0d 68%, #fe2c55 130%);
}
.social-btn--facebook {
  --glow: rgba(24, 119, 242, 0.65);
  background: linear-gradient(135deg, #3b9bff 0%, #1877f2 55%, #0a5ad1 100%);
}
.social-btn--snapchat {
  --glow: rgba(255, 214, 0, 0.6);
  background: linear-gradient(135deg, #fff35c 0%, #fffc00 45%, #ffd600 100%);
  color: #111;
}
.social-btn--whatsapp {
  --glow: rgba(37, 211, 102, 0.6);
  background: linear-gradient(135deg, #5af08a 0%, #25d366 50%, #128c7e 100%);
}

/* le chat ne s’élargit jamais au-delà de sa colonne (contenu long, grille de choix) */
.contact__grid > * { min-width: 0; }
.chat { max-width: 100%; }
/* Réservation : formule incompatible avec les dates choisies */
.booking .option-card.is-disabled { opacity: 0.38; cursor: not-allowed; }
.booking .option-card.is-disabled::after { visibility: hidden; }

/* Ouverture d'une fiche : la photo de la carte s'agrandit jusqu'à la grande
   photo de la fiche (aucune couleur intermédiaire). Position et taille
   animées par intro.js ; les voiles reprennent ceux de la galerie. */
.vehicle-expand {
  position: absolute;
  inset: auto;
  z-index: 13;
  overflow: hidden;
  pointer-events: none;
  background: #140e0a center 60% / cover no-repeat;
  will-change: left, top, width, height;
}
.vehicle-expand::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.45), transparent 120px),
    linear-gradient(0deg, #0b0806, rgba(11, 8, 6, 0) 120px);
}
.vehicle-expand.is-page::after { opacity: 1; }
@media (min-width: 1024px) {
  .vehicle-expand::after {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.45), transparent 120px),
      linear-gradient(270deg, #0b0806, rgba(11, 8, 6, 0) 120px);
  }
}
/* Chat : options cochées (choix multiples) */
.chat__chip.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
.chat__chip.is-on .chat__chip-sub { color: rgba(255, 255, 255, 0.85); }
.chat__multi-actions { flex-basis: 100%; }

/* ==========================================================================
   Prestations : slider classique (plus de scène collée ni de distorsion).
   La section a sa hauteur naturelle ; la zone de texte défile à
   l'horizontale (aimantée), photos et trait des onglets suivent.
   ========================================================================== */
.services { --shift: 0px; height: auto; }
.services__sticky { position: relative; height: auto; min-height: 0; }
.services__card { min-height: min(760px, 92svh); }
.services__panel {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.services__panel::-webkit-scrollbar { display: none; }
.services__track { transform: none !important; will-change: auto; }
.services__slide { scroll-snap-align: start; }
/* fond : flou simple (dessiné une fois), plus de filtre de distorsion */
.services__bg-fill { inset: -6%; filter: blur(28px) brightness(0.5) saturate(1.1); }
.services__bg-track { transition: none; }
/* flèches (ordinateur) */
.services__nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: none;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 14, 10, 0.5);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  color: #fff;
  cursor: pointer;
  transform: translateY(-50%);
  transition: opacity 0.2s var(--ease), transform 0.3s cubic-bezier(0.22, 1.15, 0.36, 1);
}
.services__nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.services__nav--prev { left: 18px; }
.services__nav--next { right: 18px; }
.services__nav:disabled { opacity: 0; pointer-events: none; }
.services__nav:active { transform: translateY(-50%) scale(0.92); }
.services__nav:focus-visible { outline: 2px solid rgb(var(--brand-light-rgb) / 0.9); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .services__nav { display: grid; }
}

/* Réservation : détail du tarif calculé (lignes non cliquables) */
.booking .option-card--static { cursor: default; }
.booking .option-card--static::after { content: none; }
.option-card__price { flex: none; font-size: 16px; font-weight: 600; color: var(--brand); font-variant-numeric: tabular-nums; }

/* Comment ça marche, étape 4 : widgets remplis (dossier + acompte) */
.widget { grid-template-rows: auto 1fr; gap: 14px; align-content: start; }
.widget__head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.widget__titles { display: grid; gap: 1px; min-width: 0; }
.widget__ringwrap { position: relative; flex: none; width: 46px; height: 46px; }
.widget__ring-text { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.scene-live.is-active .widget__ring-fill { stroke-dashoffset: 0; }
.widget__icon { flex: none; background: rgb(var(--brand-rgb) / 0.2); color: var(--brand); }
.widget__value { display: inline-flex; align-items: center; gap: 6px; }
.widget__badge { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #34c759; }
.widget__badge svg, .widget__check svg { width: 11px; height: 11px; fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.widget__list { display: grid; align-content: end; gap: 8px; margin: 0; padding: 0; list-style: none; }
.widget__list li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255, 255, 255, 0.86); opacity: 0; transform: translateY(6px); transition: opacity 0.4s var(--ease), transform 0.5s var(--ease-out); }
.widget__check { display: grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--brand); }
.scene-live.is-active .widget__list li { opacity: 1; transform: none; }
.scene-live.is-active .widget__list li:nth-child(1) { transition-delay: 1.2s; }
.scene-live.is-active .widget__list li:nth-child(2) { transition-delay: 1.6s; }
.scene-live.is-active .widget__list li:nth-child(3) { transition-delay: 2s; }
.widget__pays { display: grid; align-content: end; gap: 8px; }
.widget__pays-label { font-size: 12px; color: rgb(var(--grey-rgb) / 0.81); }
.widget__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.widget__chips span { padding: 5px 10px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.1); font-size: 12px; font-weight: 500; color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .widget__list li { opacity: 1; transform: none; transition: none; }
}
.widget { aspect-ratio: auto; min-height: 180px; }
.widget__value { flex-wrap: wrap; }

/* Aucun défilement horizontal : les éléments qui entrent par le côté
   (animations d’apparition) ne débordent jamais de la page. « clip » garde
   les éléments collés (sticky) fonctionnels. */
html, body { overflow-x: clip; }

/* Comment ça marche : la scène tient toujours entre la navbar du haut et
   la barre du bas (la ligne de grille a la hauteur disponible, l’écran
   rétrécit au lieu de pousser le texte sous la barre) */
.howto__pin { grid-template-rows: minmax(0, 1fr); }
.howto__stage { min-height: 0; max-height: 100%; }
.howto__screen { container-type: size; }
.scene-fleet__card { max-height: 88cqh; width: auto; height: min(88cqh, calc(58cqw * 4 / 3)); }
/* calque d'ouverture de fiche : transformé (pas redimensionné) */
.vehicle-expand { transform-origin: 0 0; will-change: transform, clip-path; }
/* Fiche véhicule plus fluide : pas de flou recalculé pendant le défilement
   (fonds presque opaques à la place, même rendu) */
.vp__bar { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(26, 18, 14, 0.95); }
.vehicle.is-scrolled .vp__top { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(11, 8, 6, 0.95); }
.vp__round, .vp__count, .vp__dots { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(16, 11, 8, 0.62); }
.vp__slide img { content-visibility: auto; }
.vp__info { contain: layout paint; }
/* Flotte plus fluide : chaque carte (masque + filtre des lettres) est dessinée
   une fois sur son propre calque, puis seulement déplacée */
.car-card { contain: layout paint; }
.car-card__art { will-change: transform; }

/* Réservation : sélecteur d'heure intégré (façon iOS) */
.booking .tpick__native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.booking .ios-row { position: relative; }
.tpick__value {
  min-width: 78px;
  padding: 7px 14px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.booking .ios-row.is-picking .tpick__value { background: rgb(var(--brand-rgb) / 0.22); color: var(--brand-light); }
.tpick__value:focus-visible { outline: 2px solid rgb(var(--brand-light-rgb) / 0.9); outline-offset: 2px; }
.tpick {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s var(--ease);
}
.tpick.is-open { grid-template-rows: 1fr; }
.tpick__inner { overflow: hidden; }
.tpick__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
  padding: 4px 14px 14px;
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}
.tpick.is-open .tpick__grid { opacity: 1; transition-delay: 0.08s; }
.tpick__chip {
  height: 40px;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.tpick__chip:hover { background: rgba(255, 255, 255, 0.12); }
.tpick__chip:active { transform: scale(0.95); }
.tpick__chip.is-on { background: var(--brand); color: #fff; font-weight: 700; }
.tpick__chip:focus-visible { outline: 2px solid rgb(var(--brand-light-rgb) / 0.9); outline-offset: 2px; }
.booking .bcal__summary { text-wrap: balance; }
@media (prefers-reduced-motion: reduce) { .tpick, .tpick__grid { transition: none; } }