/* =========================================================
   Wave Go — feuille de style unique
   ========================================================= */

/* ---------- Polices (auto-hébergées) ---------- */
@font-face {
  font-family: "Unbounded";
  src: url("/assets/fonts/unbounded-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Unbounded";
  src: url("/assets/fonts/unbounded-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Variables ---------- */
:root {
  --green:        #12835F;
  --green-light:  #3AAE86;
  --green-tint:   #E7F3EE;
  --night:        #0C1F19;
  --night-2:      #132B23;
  --ink:          #16201C;
  --ink-soft:     #4C5A54;
  --line:         #DCE5E0;
  --bg:           #FFFFFF;
  --bg-soft:      #F5F8F6;
  --wa:           #25D366;

  --font-title: "Unbounded", system-ui, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --header-h: 72px;
  --header-h-compact: 60px;
  /* encoche / barre d'état iOS en mode app (status bar « black-translucent » + viewport-fit=cover) ; 0 ailleurs */
  --safe-top: env(safe-area-inset-top, 0px);
  --gutter: 20px;
  --radius: 20px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  background-color: var(--night); /* zone de la barre d'état iOS, rebonds du défilement, lancement de la web app */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h-compact) + var(--safe-top));
}

body {
  margin: 0;
  padding-top: calc(var(--header-h) + var(--safe-top));
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--green-light);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

@media (min-width: 768px) {
  :root { --gutter: 32px; }
  body { font-size: 18px; }
}

/* ---------- Lien d'évitement ---------- */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--bg);
  color: var(--night);
  font-weight: 700;
  border-radius: 10px;
  transform: translateY(-150%);
}
.skip-link:focus { transform: none; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s, color .2s;
}
.btn svg { flex-shrink: 0; }
.btn--green { background: var(--green); color: #fff; }
.btn--green:hover { background: #0F7353; }

.btn--lg { min-height: 56px; padding: 0 26px; font-size: 17px; }

/* Bouton « verre » pour fond sombre */
.btn--glass {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
}
.btn--glass:hover { background: rgba(255, 255, 255, .16); }

/* WhatsApp : vert WhatsApp, texte vert nuit (jamais blanc) */
.btn--wa { background: var(--wa); color: var(--night); }
.btn--wa:hover { background: #3ADB78; }

/* =========================================================
   7.1 En-tête — verre dépoli (« liquid glass »)
   Fixé en haut, fond vert nuit translucide + flou d'arrière-plan.
   Le compactage (72 → 60 px) ne joue que sur transform :
   le fond rétrécit, le contenu remonte de 6 px.
   ========================================================= */
.scroll-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 24px;
  pointer-events: none;
}

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: calc(var(--header-h) + var(--safe-top));
  padding-top: var(--safe-top); /* le contenu reste sous la barre d'état ; le fond passe dessous */
  color: #fff;
  pointer-events: none; /* la bande basse transparente en mode compact ne bloque pas les clics */
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  /* opacité ≥ 0,72 : le texte blanc reste lisible même au-dessus d'une section blanche */
  background: linear-gradient(180deg, rgba(19, 43, 35, .78), rgba(12, 31, 25, .74));
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  transform-origin: top;
  transition: transform .25s var(--ease), box-shadow .25s;
}
.site-header__inner {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: transform .25s var(--ease);
}
.site-header__inner > * { pointer-events: auto; }

.site-header.is-compact::before {
  transform: translateY(-12px); /* 72 → 60 px, quelle que soit la marge iOS */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 8px 24px rgba(0, 0, 0, .22);
}
.site-header.is-compact .site-header__inner { transform: translateY(-6px); }

/* Web app installée (iPhone, Android, ordinateur) : en-tête opaque et uni, sans dégradé, flou ni ombre marquée.
   Le fond reste sur ::before pour suivre le compactage au défilement (séparateur au bon endroit). */
@media (display-mode: standalone) {
  .site-header::before {
    background: var(--night);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }
  .site-header.is-compact::before { box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
}
html.is-standalone .site-header::before {
  background: var(--night);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
html.is-standalone .site-header.is-compact::before { box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }

/* Web app sur iPhone / iPad uniquement : iOS 26+ pose sous la barre d'état un dégradé qu'on ne peut pas
   retirer. On ajoute 12 px à la marge du haut pour que le contenu de l'en-tête descende sous ce dégradé.
   --safe-top est utilisé par l'en-tête, le body, le hero et la 404 : tout suit. */
@supports (-webkit-touch-callout: none) {
  @media (display-mode: standalone) {
    :root { --safe-top: calc(env(safe-area-inset-top, 0px) + 12px); }
  }
  html.is-standalone { --safe-top: calc(env(safe-area-inset-top, 0px) + 12px); }
}

.site-header__logo {
  display: block;
  flex-shrink: 0;
  margin-right: auto;
}
.site-header__logo img {
  width: auto;
  height: 24px;
}

/* ---------- Navigation (grand écran) ---------- */
.site-nav { display: none; }
.site-nav ul {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 14px;
  color: rgba(231, 243, 238, .82);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  transition: color .2s;
}
/* soulignement vert qui se dessine au survol et sur la section en cours */
.site-nav a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 8px;
  height: 2px;
  border-radius: 2px;
  background: var(--green-light);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--ease);
}
.site-nav a:hover,
.site-nav a[aria-current="true"] { color: #fff; }
.site-nav a:hover::after,
.site-nav a[aria-current="true"]::after { transform: scaleX(1); }

/* ---------- Actions ---------- */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Pilule en verre : petite pastille verte + « Appeler » / numéro */
.header-call {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px 0 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: background-color .2s, border-color .2s;
}
/* zone tactile portée à 48 px sans grossir le bouton */
.header-call::after,
.header-wa::after {
  content: "";
  position: absolute;
  inset: -4px;
}
.header-call:hover {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .28);
}
.header-call__icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  position: relative;
  background: var(--green);
  color: #fff;
}
/* légère onde autour de la pastille pour inviter au clic */
.header-call__icon::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--green-light);
  opacity: 0;
  animation: call-ring 2.8s var(--ease) infinite;
}
@keyframes call-ring {
  0%   { transform: scale(1);   opacity: .7; }
  70%  { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}
.header-call__label { display: none; }

/* Bulle WhatsApp : vert WhatsApp, icône vert nuit (jamais blanc) */
.header-wa {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--wa);
  color: var(--night);
  box-shadow: 0 0 0 3px rgba(37, 211, 102, .18), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .2s var(--ease);
}
.header-wa:hover { transform: scale(1.06); }

/* Bouton Réserver : desktop uniquement */
.header-cta {
  display: none;
  min-height: 40px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
}

/* Très petits écrans : « Appeler » remplace le numéro */
@media (max-width: 359px) {
  .header-call__number { display: none; }
  .header-call__label { display: inline; }
}

@media (min-width: 768px) {
  .site-header__logo img { height: 34px; }
  .site-header__inner { gap: 16px; }
  .site-header__actions { gap: 12px; }
  .header-call { height: 44px; padding-right: 18px; font-size: 16px; }
  .header-call__icon { width: 34px; height: 34px; }
  .header-wa { width: 44px; height: 44px; }
  .header-cta { display: inline-flex; min-height: 44px; }
  /* séparateur entre le vert Wave Go et le vert WhatsApp */
  .header-wa { margin-left: 4px; }
}
@media (min-width: 1140px) {
  .site-nav { display: block; }
}

/* =========================================================
   7.2 Hero
   Mobile : la photo passe en fond, voilée de vert nuit.
   Desktop : la photo occupe la droite, fondue vers la gauche.
   ========================================================= */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: calc(-1 * (var(--header-h) + var(--safe-top))); /* passe sous l'en-tête en verre */
  padding-top: calc(var(--header-h) + var(--safe-top));
  background: var(--night);
  color: #fff;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 30%;
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(12, 31, 25, .55) 0%,
    rgba(12, 31, 25, .82) 40%,
    rgba(12, 31, 25, .96) 75%,
    var(--night) 100%);
}

.hero__inner {
  position: relative;
  padding-top: 40px;
  padding-bottom: 56px;
}
.hero__content { max-width: 640px; }

.hero__overline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  color: var(--green-light);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.hero__overline::before {
  content: "";
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.hero__title {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: clamp(2rem, 6vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.hero__title .accent { color: var(--green-light); white-space: nowrap; }

.hero__lead {
  max-width: 34em;
  margin: 20px 0 0;
  color: rgba(231, 243, 238, .9);
  font-size: 18px;
}

/* Mobile : Réserver en pleine largeur, Appeler + WhatsApp côte à côte */
.hero__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 28px;
}
.hero__actions .btn { padding: 0 16px; }
.hero__book { grid-column: 1 / -1; }
.hero__book svg { transition: transform .2s var(--ease); }
.hero__book:hover svg { transform: translateX(4px); }

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  color: rgba(231, 243, 238, .85);
  font-size: 15px;
}
.hero__proof li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero__proof svg { flex-shrink: 0; color: var(--green-light); }

/* Carte en verre avec le logo empilé (desktop) */
.hero__badge { display: none; }

@media (min-width: 600px) {
  .hero__actions { display: flex; flex-wrap: wrap; }
  .hero__actions .btn { padding: 0 26px; }
}

@media (min-width: 1024px) {
  .hero__media { left: 36%; }
  .hero__media img { object-position: 30% 35%; } /* masque la vitre de séparation à droite */
  .hero__media::after {
    background:
      linear-gradient(90deg, var(--night) 0%, rgba(12, 31, 25, .75) 18%, rgba(12, 31, 25, 0) 55%),
      linear-gradient(0deg, var(--night) 0%, rgba(12, 31, 25, 0) 30%),
      linear-gradient(180deg, rgba(12, 31, 25, .5) 0%, rgba(12, 31, 25, 0) 25%);
  }

  .hero__inner {
    display: flex;
    align-items: center;
    min-height: min(86vh, 780px);
    padding-top: 64px;
    padding-bottom: 136px;
  }
  .hero__content { max-width: 620px; }
  .hero__lead { font-size: 20px; }

  .hero__badge {
    position: absolute;
    right: var(--gutter);
    bottom: 120px; /* au-dessus de la carte formulaire qui chevauche le hero */
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 24px 18px 20px;
    border-radius: var(--radius);
    background: rgba(12, 31, 25, .35);
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 20px 40px rgba(0, 0, 0, .25);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
  }
  .hero__badge img { width: 96px; height: auto; }
  .hero__badge p {
    margin: 0;
    padding-left: 18px;
    border-left: 1px solid rgba(255, 255, 255, .2);
    color: rgba(231, 243, 238, .9);
    font-size: 15px;
    line-height: 1.4;
  }
}

/* =========================================================
   7.3 Formulaire de demande de réservation
   Mobile/tablette : titre → widget → rappel → mention.
   Desktop : carte blanche qui chevauche le hero ; panneau vert nuit
   à gauche, à sa taille naturelle, aligné sur le haut du widget.
   L'intérieur du widget (iframe VTC Planner) n'est jamais stylé.
   ========================================================= */
.booking {
  position: relative;
  padding: 32px 0 64px;
  background: var(--bg-soft);
}

.booking__card {
  display: flex;
  flex-direction: column;
  padding: 24px 16px;
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: 0 1px 2px rgba(12, 31, 25, .06), 0 16px 48px rgba(12, 31, 25, .10);
}
.booking__panel { display: contents; }
.booking__head   { order: 1; }
.booking__widget { order: 2; }
.booking__alt    { order: 3; }
.booking__legal  { order: 4; }
.booking__route,
.booking__checks { display: none; }

.booking__title {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: clamp(1.5rem, 3.4vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.booking__intro {
  max-width: 34em;
  margin: 12px 0 0;
  color: var(--ink-soft);
}

/* Zone du widget : hauteur réservée (mesurée sur le widget réel) jusqu'au chargement */
.booking__widget {
  position: relative;
  min-height: 1820px; /* widget mesuré : 1823 px à 303 px de large */
  margin-top: 24px;
}
.booking__widget.is-loaded,
.booking__widget.is-failed { min-height: 0; }

.booking__skeleton {
  position: absolute;
  inset: 0 0 auto;
  display: grid;
  gap: 14px;
  max-width: 640px;
  margin-inline: auto;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
}
.booking__skeleton span {
  position: relative;
  overflow: hidden;
  height: 48px;
  border-radius: 10px;
  background: var(--bg-soft);
}
.booking__skeleton span.is-btn { height: 56px; background: var(--green-tint); }
.booking__skeleton span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent);
  transform: translateX(-100%);
  animation: skeleton 1.4s ease-in-out infinite;
}
@keyframes skeleton { to { transform: translateX(100%); } }
.booking__widget.is-loaded .booking__skeleton,
.booking__widget.is-failed .booking__skeleton { display: none; }

.booking__fallback {
  display: none;
  margin: 0;
  padding: 16px 20px;
  border-radius: 12px;
  background: var(--green-tint);
  color: var(--ink);
  font-weight: 600;
}
.booking__widget.is-failed .booking__fallback { display: block; }

/* Rappel discret : deux petites pastilles, pas de gros boutons
   (les CTA principaux sont déjà dans le hero) */
.booking__alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin-top: 24px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
}
.booking__alt-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}
.booking__alt-actions {
  display: flex;
  gap: 8px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 16px 0 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: border-color .2s, background-color .2s;
}
.chip:hover { border-color: var(--green); background: var(--bg-soft); }
.chip__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
}
.chip__icon svg { flex-shrink: 0; }
.chip__icon--call { background: var(--green); color: #fff; }
.chip__icon--wa   { background: var(--wa); color: var(--night); }

.booking__legal {
  margin: 20px 0 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.5;
}
.booking__legal a { color: var(--green); font-weight: 600; }

@media (min-width: 700px) {
  .booking__widget { min-height: 1700px; } /* 1705 px à 624 px de large */
}

@media (min-width: 768px) {
  .booking { padding: 48px 0 88px; }
  .booking__card { padding: 40px; }
}

@media (min-width: 1024px) {
  /* la carte remonte sur le hero, façon Heetch */
  .booking { padding-top: 0; }
  .booking__card { position: relative; margin-top: -72px; }
}

/* ---------- Desktop : panneau vert nuit + widget ---------- */
@media (min-width: 1100px) {
  .booking__card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 640px;
    grid-template-rows: auto auto;
    column-gap: 40px;
    padding: 16px 40px 32px 16px;
  }

  .booking__panel {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start; /* taille naturelle, aligné sur le haut du formulaire, défile avec la page */
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    padding: 40px 36px 32px;
    overflow: hidden;
    border-radius: 16px;
    background:
      radial-gradient(120% 60% at 100% 0%, rgba(58, 174, 134, .22), transparent 60%),
      linear-gradient(160deg, var(--night-2), var(--night));
    color: #fff;
  }
  .booking__head, .booking__alt { order: 0; } /* ordre du HTML dans le panneau */
  .booking__intro { color: rgba(231, 243, 238, .85); }

  .booking__widget {
    grid-column: 2;
    grid-row: 1;
    margin-top: 24px;
    min-height: 1580px; /* 1582 px à 640 px */
  }
  .booking__legal { grid-column: 2; grid-row: 2; padding-inline: 8px; }

  /* Illustration : départ → arrivée, une voiture qui glisse sur le tracé */
  .booking__route {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 20px 20px 36px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .10);
  }
  .booking__pin {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 3px solid var(--green-light);
  }
  .booking__pin--to { background: var(--green-light); }
  .booking__track {
    position: relative;
    height: 2px;
    background: repeating-linear-gradient(90deg, rgba(231, 243, 238, .45) 0 8px, transparent 8px 14px);
  }
  .booking__car {
    position: absolute;
    top: -5px;
    left: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 5px rgba(58, 174, 134, .35);
  }
  .booking__route-label {
    position: absolute;
    left: 14px;
    bottom: 10px;
    color: rgba(231, 243, 238, .7);
    font-size: 13px;
    font-weight: 600;
  }
  .booking__route-label--to { left: auto; right: 14px; }

  .booking__checks {
    display: grid;
    gap: 14px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
    color: rgba(231, 243, 238, .92);
    font-size: 16px;
    line-height: 1.45;
  }
  .booking__checks li {
    display: flex;
    gap: 12px;
  }
  .booking__checks svg { flex-shrink: 0; margin-top: 1px; color: var(--green-light); }

  /* Rappel en bas du panneau, version verre */
  .booking__alt {
    margin-top: auto;
    padding: 18px;
    border-color: rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .06);
  }
  .booking__head { margin-bottom: 32px; }
  .booking__panel .booking__checks { margin-bottom: 32px; }
  .booking__alt-title { width: 100%; color: #fff; }
  .chip {
    border-color: rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .06);
    color: #fff;
  }
  .chip:hover { border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .12); }
}

@media (min-width: 1100px) and (prefers-reduced-motion: no-preference) {
  .booking__track { container-type: inline-size; }
  .booking__car { animation: booking-drive 4.5s var(--ease) infinite; }
}
@keyframes booking-drive {
  0%   { transform: translateX(0);                      opacity: 0; }
  10%  { opacity: 1; }
  80%  { transform: translateX(calc(100cqw - 12px)); opacity: 1; }
  100% { transform: translateX(calc(100cqw - 12px)); opacity: 0; }
}

/* ---------- Titres de section (H2) ---------- */
.section-title {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* =========================================================
   7.4 Bande engagements — façon « bande manifeste » de Heetch :
   aplat vert pleine largeur, grande phrase, pictos qui flottent,
   trois piliers, puis une bande défilante.
   ========================================================= */
.pledge__band {
  position: relative;
  overflow: hidden;
  padding: 72px 0 64px;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(58, 174, 134, .45), transparent 70%),
    var(--green);
  color: #fff;
}
.pledge__band .container { position: relative; }

.pledge__title {
  max-width: 15em;
  margin: 0 auto;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: clamp(1.75rem, 5.2vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
}

.pledge__floats { display: none; }

.pledge__grid {
  display: grid;
  gap: 16px;
  margin-top: 48px;
}
.pillar {
  display: flex;
  flex-direction: column;
  padding: 28px 24px;
  border-radius: var(--radius);
  background: rgba(12, 31, 25, .22);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}
.pillar__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  color: var(--green);
}
.pillar__kicker {
  margin: 20px 0 6px;
  color: var(--green-tint);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.pillar__title {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.pillar__text { margin: 12px 0 20px; }
.pillar__proof {
  margin: auto 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .2);
  font-weight: 700;
  line-height: 1.45;
}
.pillar__proof span {
  display: block;
  margin-bottom: 4px;
  color: var(--green-tint);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Marqueur visible d'une info manquante ([À COMPLÉTER] / [À VALIDER]) */
mark.todo {
  padding: 0 4px;
  border-radius: 4px;
  background: rgba(120, 130, 125, .2);
  outline: 1px dashed currentColor;
  color: inherit; /* lisible sur fond clair comme sur fond vert */
}

/* Bande défilante */
.marquee {
  overflow: hidden;
  padding: 18px 0;
  background: var(--night);
  color: var(--green-tint);
}
.marquee__track {
  display: flex;
  width: max-content;
}
.marquee__list {
  display: flex;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 18px;
  white-space: nowrap;
}
.marquee__list li {
  display: flex;
  align-items: center;
}
.marquee__list li::after {
  content: "";
  width: 8px;
  height: 8px;
  margin: 0 24px;
  border-radius: 50%;
  background: var(--green-light);
}

@media (min-width: 768px) {
  .pledge__band { padding: 104px 0 96px; }
  .marquee { padding: 22px 0; }
  .marquee__list { font-size: 20px; }

}

/* Pictos flottants : seulement quand il y a de la place autour du titre */
@media (min-width: 1200px) {
  .pledge__floats { display: block; position: absolute; inset: 0; }
  .pledge__floats span {
    position: absolute;
    left: var(--x);
    top: var(--y);
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff;
    transform: translate(-50%, -50%) rotate(-8deg);
  }
  .pledge__floats span:nth-child(even) { transform: translate(-50%, -50%) rotate(8deg); }
}

@media (min-width: 900px) {
  .pledge__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 64px; }
  .pillar { padding: 32px; }
}

@media (prefers-reduced-motion: no-preference) {
  .marquee__track { animation: marquee 40s linear infinite; }
  .marquee:hover .marquee__track { animation-play-state: paused; }
}
@media (min-width: 1200px) and (prefers-reduced-motion: no-preference) {
  .pledge__floats span { animation: picto-float 6s ease-in-out var(--d, 0s) infinite; }
  .pledge__floats span:nth-child(even) { animation-name: picto-float-alt; }
}
@keyframes marquee {
  to { transform: translateX(-50%); }
}
@keyframes picto-float {
  0%, 100% { transform: translate(-50%, -50%) rotate(-8deg); }
  50%      { transform: translate(-50%, calc(-50% - 10px)) rotate(-4deg); }
}
@keyframes picto-float-alt {
  0%, 100% { transform: translate(-50%, -50%) rotate(8deg); }
  50%      { transform: translate(-50%, calc(-50% - 10px)) rotate(4deg); }
}

/* =========================================================
   7.5 Services — inspiré d'Uber Drive :
   un grand « pare-brise » illustré, puis trois colonnes.
   ========================================================= */
.services {
  padding: 72px 0 80px;
  background: var(--bg);
}
.services__header { max-width: 760px; }
.services__lead {
  margin: 16px 0 0;
  color: var(--ink-soft);
  font-size: 18px;
}

/* Pare-brise : aplat vert, coins hauts très arrondis */
.services__visual {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 40px;
  padding: 48px 20px 32px;
  overflow: hidden;
  border-radius: 140px 140px 24px 24px / 90px 90px 24px 24px;
  background:
    radial-gradient(80% 70% at 50% 60%, rgba(58, 174, 134, .55), transparent 70%),
    var(--green);
}
.services__lines { display: none; }

.services__hub {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-basis: 100%;
  justify-content: center;
  margin-bottom: 8px;
  color: #fff;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.01em;
}
.services__hub svg { color: #fff; }

.services__dest {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(12, 31, 25, .18);
}

/* Trois cartes */
.services__grid {
  display: grid;
  gap: 16px;
  margin-top: 32px;
}
.service {
  display: flex;
  flex-direction: column;
  padding: 28px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  transition: border-color .2s, box-shadow .2s;
}
.service:hover {
  border-color: rgba(18, 131, 95, .4);
  box-shadow: 0 16px 40px rgba(12, 31, 25, .08);
}
.service__icon {
  box-sizing: content-box;
  padding: 12px;
  border-radius: 14px;
  background: var(--green-tint);
  color: var(--green);
}
.service__title {
  margin: 20px 0 10px;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.service p { margin: 0 0 20px; color: var(--ink-soft); }

.service .service__plus {
  margin: auto 0 0; /* calé en bas : les trois encadrés s'alignent */
  padding: 14px 16px;
  border-left: 3px solid var(--green);
  border-radius: 4px 12px 12px 4px;
  background: var(--green-tint);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.4;
}
.service__plus span {
  display: block;
  margin-bottom: 4px;
  color: var(--green);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.service__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  min-height: 48px;
  padding-top: 12px;
  color: var(--green);
  font-weight: 700;
  text-decoration: none;
}
.service__link svg { transition: transform .2s var(--ease); }
.service__link:hover { text-decoration: underline; text-underline-offset: 4px; }
.service__link:hover svg { transform: translateX(4px); }

.services__black {
  margin: 32px 0 0;
  color: var(--ink-soft);
  text-align: center;
}
.services__black a { color: var(--green); font-weight: 700; text-underline-offset: 4px; }

@media (min-width: 768px) {
  .services { padding: 104px 0 112px; }
  .service { padding: 32px; }

  /* Desktop/tablette : destinations disposées autour du Mans, reliées par des tracés */
  .services__visual {
    display: block;
    height: 380px;
    margin-top: 48px;
    padding: 0;
    border-radius: 320px 320px 32px 32px / 150px 150px 32px 32px;
  }
  .services__lines {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: rgba(255, 255, 255, .45);
    stroke-width: 1.5;
    stroke-dasharray: 5 6;
    vector-effect: non-scaling-stroke;
  }
  .services__lines path { vector-effect: non-scaling-stroke; }
  .services__hub {
    position: absolute;
    left: 50%;
    top: 58%;
    margin: 0;
    padding: 14px 22px;
    border-radius: 999px;
    background: var(--night);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 10px rgba(12, 31, 25, .18), 0 16px 32px rgba(12, 31, 25, .3);
  }
  .services__hub svg { color: var(--green-light); }
  .services__dest {
    position: absolute;
    left: var(--x);
    top: var(--y);
    min-height: 40px;
    padding: 0 16px;
    font-size: 15px;
    transform: translate(-50%, -50%);
  }
}

@media (min-width: 900px) {
  .services__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
}

/* Les destinations flottent doucement (transform uniquement) */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .services__dest { animation: dest-float 5s ease-in-out var(--d, 0s) infinite; }
}
@keyframes dest-float {
  0%, 100% { transform: translate(-50%, -50%); }
  50%      { transform: translate(-50%, calc(-50% - 6px)); }
}

/* =========================================================
   7.6 Comment ça marche — trois étapes numérotées (Uber),
   reliées par un tracé en pointillés. Mobile : vertical.
   ========================================================= */
.steps {
  padding: 72px 0 80px;
  background: var(--night);
  color: #fff;
}
.steps__title { text-align: center; }

.steps__list {
  position: relative;
  display: grid;
  gap: 32px;
  max-width: 1040px;
  margin: 48px auto 0;
  padding: 0;
  list-style: none;
}
/* tracé vertical (mobile) entre les numéros */
.steps__list::before {
  content: "";
  position: absolute;
  top: 28px;
  bottom: 28px;
  left: 27px;
  width: 2px;
  background: repeating-linear-gradient(180deg, rgba(58, 174, 134, .7) 0 6px, transparent 6px 12px);
  transform-origin: top;
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  column-gap: 20px;
}
.step__num {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 6px var(--night), 0 0 0 7px rgba(58, 174, 134, .5);
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 22px;
}
.step__title {
  margin: 4px 0 6px;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.25;
}
.step p { margin: 0; color: rgba(231, 243, 238, .85); }

@media (min-width: 768px) {
  .steps { padding: 104px 0 112px; }
  .steps__list { grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 64px; }
  /* tracé horizontal, du 1er au 3e numéro */
  .steps__list::before {
    top: 32px;
    bottom: auto;
    left: calc(100% / 6);
    right: calc(100% / 6);
    width: auto;
    height: 2px;
    background: repeating-linear-gradient(90deg, rgba(58, 174, 134, .7) 0 8px, transparent 8px 14px);
    transform-origin: left;
  }
  .step { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .step__num { grid-row: auto; width: 64px; height: 64px; font-size: 26px; }
  .step__title { margin: 24px 0 8px; }
  .step p { max-width: 18em; }
}

/* =========================================================
   7.8 Un humain vous répond — fausse conversation WhatsApp
   dont les bulles apparaissent une à une (main.js).
   ========================================================= */
.human {
  padding: 72px 0 80px;
  background: var(--green-tint);
}
.human__layout {
  display: grid;
  gap: 32px;
  grid-template-areas: "head" "chat" "actions";
}
.human__head { grid-area: head; }
.human__chat { grid-area: chat; margin: 0; }
.human__actions { grid-area: actions; display: grid; gap: 12px; }
.human__text { max-width: 34em; margin: 16px 0 0; color: var(--ink-soft); font-size: 18px; }
.human__actions .btn { padding: 0 20px; }

.chat {
  max-width: 420px;
  margin-inline: auto;
  overflow: hidden;
  border-radius: 24px;
  background: var(--bg-soft);
  box-shadow: 0 1px 2px rgba(12, 31, 25, .08), 0 24px 56px rgba(12, 31, 25, .16);
}
.chat__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--night);
  color: #fff;
}
.chat__avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--green);
}
.chat__name { display: grid; font-weight: 700; line-height: 1.25; }
.chat__name small { color: rgba(231, 243, 238, .7); font-weight: 400; font-size: 13px; }

.chat__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 330px;
  padding: 20px 16px 24px;
}
.bubble {
  max-width: 82%;
  margin: 0;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 16px;
  line-height: 1.45;
  box-shadow: 0 1px 1px rgba(12, 31, 25, .08);
}
.bubble--me {
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  background: #D3EDE2; /* vert clair, distinct du vert WhatsApp réservé aux boutons */
}
.bubble--wave {
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  background: var(--bg);
}

/* Indicateur « … en train d'écrire » (affiché par main.js entre deux bulles) */
.chat__body { position: relative; }
.chat__typing {
  position: absolute; /* posé à la place de la bulle à venir : aucun décalage */
  display: none;
  gap: 4px;
  margin: 0;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--bg);
}
.chat__typing.is-me { right: 16px; background: #D3EDE2; border-bottom-right-radius: 4px; }
.chat__typing.is-wave { left: 16px; border-bottom-left-radius: 4px; }
.chat__typing.is-active { display: inline-flex; }
.chat__typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-soft);
  animation: typing 1s ease-in-out infinite;
}
.chat__typing span:nth-child(2) { animation-delay: .15s; }
.chat__typing span:nth-child(3) { animation-delay: .3s; }
@keyframes typing {
  0%, 60%, 100% { opacity: .3; transform: none; }
  30%           { opacity: 1;  transform: translateY(-3px); }
}

.human__chat figcaption {
  margin-top: 12px;
  color: var(--ink-soft);
  font-size: 14px;
  text-align: center;
}

/* Bulles masquées tant que la séquence ne les a pas montrées (seulement avec JS + mouvement autorisé) */
.js-reveal .chat .bubble { opacity: 0; transform: translateY(8px) scale(.98); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.js-reveal .chat .bubble--me { transform-origin: bottom right; }
.js-reveal .chat .bubble--wave { transform-origin: bottom left; }
.js-reveal .chat .bubble.is-shown { opacity: 1; transform: none; }

@media (min-width: 600px) {
  .human__actions { display: flex; flex-wrap: wrap; justify-content: center; }
}
@media (min-width: 768px) {
  .human { padding: 104px 0 112px; }
}
@media (min-width: 1024px) {
  .human__layout {
    grid-template-columns: minmax(0, 1fr) 420px;
    grid-template-areas: "head chat" "actions chat";
    grid-template-rows: auto 1fr;
    column-gap: 64px;
    align-items: start;
  }
  .human__actions { justify-content: flex-start; }
}

/* =========================================================
   7.9 FAQ — <details>/<summary> natifs ; main.js n'en garde
   qu'une ouverte à la fois.
   ========================================================= */
.faq {
  padding: 72px 0 80px;
  background: var(--bg);
}
.faq__layout { display: grid; gap: 32px; }
.faq__lead { margin: 16px 0 0; color: var(--ink-soft); }
.faq__lead a { color: var(--green); font-weight: 700; text-underline-offset: 4px; }

.faq__list { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 20px 56px 20px 0;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  transition: color .2s;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--green); }
/* pastille + / − */
.faq__item summary::before,
.faq__item summary::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 14px;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: var(--green);
  transition: transform .25s var(--ease);
}
.faq__item summary::after { transform: rotate(90deg); }
.faq__item[open] summary::after { transform: rotate(0deg); }
.faq__item summary { background: no-repeat right 0 center / 38px 38px radial-gradient(circle, var(--green-tint) 18px, transparent 19px); }

.faq__answer { padding: 0 0 24px; }
.faq__answer p { margin: 0; max-width: 62ch; color: var(--ink-soft); }
.faq__answer a { color: var(--green); font-weight: 600; text-underline-offset: 3px; }

@media (min-width: 768px) {
  .faq { padding: 104px 0 112px; }
  .faq__answer { padding-right: 56px; }
}
@media (min-width: 1024px) {
  .faq__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 64px; align-items: start; }
}
@media (prefers-reduced-motion: no-preference) {
  .faq__item[open] .faq__answer { animation: faq-open .35s var(--ease); }
}
@keyframes faq-open {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- §6.4 Apparition au défilement ----------
   main.js ajoute .js-reveal sur <html> (si mouvement autorisé),
   puis .is-visible sur chaque .reveal qui entre à l'écran. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.js-reveal .reveal.is-visible { opacity: 1; transform: none; }

/* Étapes : le tracé se dessine, puis les étapes arrivent une à une */
.js-reveal .steps__list.reveal { opacity: 1; transform: none; }
.js-reveal .steps__list::before { transform: scaleY(0); transition: transform 1s var(--ease) .2s; }
.js-reveal .step { opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.js-reveal .step:nth-child(2) { transition-delay: .35s; }
.js-reveal .step:nth-child(3) { transition-delay: .7s; }
.js-reveal .steps__list.is-visible::before { transform: none; }
.js-reveal .steps__list.is-visible .step { opacity: 1; transform: none; }
@media (min-width: 768px) {
  .js-reveal .steps__list::before { transform: scaleX(0); }
}

/* =========================================================
   7.7 Tarifs et paiement
   Grille (<table> qui devient des cartes sous 600 px) ;
   à droite, ce qui est inclus + paiement.
   ========================================================= */
.tariffs {
  padding: 72px 0 80px;
  background: var(--bg); /* blanc : se distingue du formulaire (gris clair) juste au-dessus */
}
.tariffs__header { max-width: 760px; }
.tariffs__lead {
  margin: 16px 0 0;
  color: var(--ink-soft);
  font-size: 18px;
}

.tariffs__layout {
  display: grid;
  gap: 24px;
  margin-top: 40px;
}

/* Grille de forfaits */
.tariffs__table {
  width: 100%;
  margin-top: 0;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
}
.tariffs__table caption {
  padding: 0 0 12px;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
}
.tariffs__table thead th {
  padding: 14px 24px;
  background: var(--green-tint);
  color: var(--green);
  font-size: 13px;
  letter-spacing: .1em;
  text-align: left;
  text-transform: uppercase;
}
/* coins arrondis sans overflow: hidden (qui rognait la légende) */
.tariffs__table thead th:first-child { border-top-left-radius: calc(var(--radius) - 1px); }
.tariffs__table thead th:last-child { border-top-right-radius: calc(var(--radius) - 1px); }
.tariffs__table tbody tr:last-child th { border-bottom-left-radius: calc(var(--radius) - 1px); }
.tariffs__table tbody tr:last-child td { border-bottom-right-radius: calc(var(--radius) - 1px); }
.tariffs__table thead th:last-child,
.tariffs__table td { text-align: right; }
.tariffs__table tbody th,
.tariffs__table td {
  padding: 18px 24px;
  border-top: 1px solid var(--line);
}
.tariffs__table tbody th { font-weight: 600; text-align: left; }
.tariffs__table td {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 18px;
  white-space: nowrap;
}
.tariffs__table tbody tr { transition: background-color .2s; }
.tariffs__table tbody tr:hover { background: var(--bg-soft); }
.tariffs__table td small { color: var(--ink-soft); font-family: var(--font-body); font-size: 14px; font-weight: 600; }
/* intertitres de la grille : Aéroports, Depuis la gare, Mise à disposition */
.tariffs__table .tariffs__group th {
  padding-top: 22px;
  padding-bottom: 10px;
  color: var(--green);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.tariffs__table .tariffs__group small { color: var(--ink-soft); font-weight: 600; letter-spacing: 0; text-transform: none; }
.tariffs__table tbody tr.tariffs__group:hover { background: none; }
.route i { color: var(--green); font-style: normal; padding: 0 4px; }
.route small { color: var(--ink-soft); font-weight: 400; font-size: 15px; }

/* Sous 600 px : chaque ligne devient une carte */
@media (max-width: 599px) {
  .tariffs__table,
  .tariffs__table tbody,
  .tariffs__table tr { display: block; }
  .tariffs__table { border: 0; background: none; }
  .tariffs__table caption { display: block; padding-bottom: 4px; }
  .tariffs__table tbody tr.tariffs__group { display: block; margin-top: 20px; padding: 0 2px; border: 0; background: none; }
  .tariffs__table .tariffs__group th { display: block; padding: 0; }
  .pay { flex-direction: column; align-items: flex-start; }
  .tariffs__table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .tariffs__table tbody tr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--bg);
  }
  .tariffs__table tbody th,
  .tariffs__table td { padding: 0; border: 0; }
  .tariffs__table td { font-size: 16px; }
}

.tariffs__notes { margin-top: 16px; color: var(--ink-soft); font-size: 15px; }
.tariffs__notes p { margin: 0 0 6px; }

.tariffs__ask {
  margin: 20px 0 0;
  font-weight: 600;
}
.tariffs__ask a { color: var(--green); font-weight: 700; text-underline-offset: 4px; }

/* Ce qui est inclus */
.included {
  padding: 28px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
}
.included__title {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}
.included__list {
  display: grid;
  gap: 14px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.included__list li { display: flex; gap: 12px; line-height: 1.45; }
.included__list svg { flex-shrink: 0; margin-top: 2px; color: var(--green); }

/* Paiement : interrupteur carte ↔ espèces */
.pay {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 16px;
  padding: 24px;
  border-radius: var(--radius);
  background: var(--green);
  color: #fff;
}
.pay__text { margin: 0; font-weight: 600; line-height: 1.45; }
.pay__switch {
  position: relative;
  flex-shrink: 0;
  display: flex;
  width: 104px;  /* 4 + 48 + 48 + 4 : la pastille tombe pile sur chaque picto */
  height: 56px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(12, 31, 25, .35);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .25);
}
.pay__opt {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
}
.pay__knob {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .28);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .4);
}

@media (min-width: 768px) {
  .tariffs { padding: 104px 0 112px; }
  .included { padding: 32px; }
}
@media (min-width: 1024px) {
  .tariffs__layout { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 32px; align-items: start; }
}

@media (prefers-reduced-motion: no-preference) {
  .pay__knob { animation: pay-toggle 3.2s var(--ease) infinite; }
}
@keyframes pay-toggle {
  0%, 40%   { transform: translateX(0); }
  50%, 90%  { transform: translateX(48px); }
  100%      { transform: translateX(0); }
}

/* Entrée en douceur (transform + opacity uniquement) */
@media (prefers-reduced-motion: no-preference) {
  .hero__media img { animation: hero-zoom 1.6s var(--ease) both; }
  .hero__lead, .hero__actions, .hero__proof, .hero__badge {
    animation: hero-rise .7s var(--ease) both;
  }
  .hero__lead    { animation-delay: .1s; }
  .hero__actions { animation-delay: .2s; }
  .hero__proof   { animation-delay: .3s; }
  .hero__badge   { animation-delay: .5s; }
}
@keyframes hero-zoom {
  from { transform: scale(1.06); }
  to   { transform: none; }
}
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* =========================================================
   7.10 Appel à l'action final
   ========================================================= */
.final-cta {
  padding: 72px 0;
  background:
    radial-gradient(70% 90% at 50% 0%, rgba(58, 174, 134, .28), transparent 70%),
    var(--night);
  color: #fff;
  text-align: center;
}
.final-cta__title {
  max-width: 17em;
  margin: 0 auto;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: clamp(1.75rem, 4.6vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.final-cta__title .accent { color: var(--green-light); }
.final-cta__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-width: 560px;
  margin: 32px auto 0;
}
.final-cta__actions .btn { padding: 0 16px; }
.final-cta__actions .btn--green { grid-column: 1 / -1; }

@media (min-width: 600px) {
  .final-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; max-width: none; }
  .final-cta__actions .btn { padding: 0 26px; }
}
@media (min-width: 768px) {
  .final-cta { padding: 104px 0; }
  .final-cta__actions { margin-top: 40px; }
}

/* ---------- 404 : reprend le style de l'appel à l'action final ---------- */
.notfound {
  display: grid;
  align-items: center;
  min-height: calc(100vh - var(--header-h) - var(--safe-top));
}
.notfound__code {
  margin: 0 0 16px;
  color: var(--green-light);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.notfound__text { max-width: 34em; margin: 20px auto 0; color: rgba(231, 243, 238, .85); }
.notfound__home { margin: 24px 0 0; }
.notfound__home a { display: inline-flex; align-items: center; min-height: 48px; color: var(--green-light); font-weight: 700; text-decoration: none; }
.notfound__home a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* =========================================================
   §8 Pages légales — colonne de lecture de 720 px
   ========================================================= */
.legal {
  padding: 48px var(--gutter) 80px;
  background: var(--bg);
}
.legal__inner { max-width: 720px; margin-inline: auto; }
.legal__back { margin: 0 0 24px; font-size: 15px; }
.legal__back a { display: inline-flex; align-items: center; min-height: 48px; color: var(--green); font-weight: 700; text-decoration: none; }
.legal__back a:hover { text-decoration: underline; text-underline-offset: 4px; }
.legal__title {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: clamp(1.75rem, 5vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.legal__intro { margin: 16px 0 0; color: var(--ink-soft); font-size: 18px; }
.legal section {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.legal h2 {
  margin: 0 0 12px;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.legal p { margin: 0 0 12px; }
.legal p a { color: var(--green); font-weight: 600; overflow-wrap: anywhere; text-underline-offset: 3px; }

@media (min-width: 768px) {
  .legal { padding: 72px var(--gutter) 112px; }
}

/* =========================================================
   7.11 Pied de page
   ========================================================= */
.site-footer {
  padding: 56px 0 32px;
  border-top: 1px solid rgba(231, 243, 238, .1); /* sépare du CTA final, même fond */
  background: var(--night);
  color: rgba(231, 243, 238, .8);
  font-size: 16px;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 24px;
}
.site-footer__brand { grid-column: 1 / -1; }
.site-footer__logo { display: inline-block; }
.site-footer__brand p { margin: 16px 0 0; }

.site-footer__title {
  margin: 0 0 12px;
  color: #fff;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .02em;
}
.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer li { display: flex; align-items: center; min-height: 48px; } /* cibles tactiles ≥ 48 px */
.site-footer li a { display: inline-flex; align-items: center; min-height: 48px; }
.site-footer a {
  color: rgba(231, 243, 238, .8);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color .2s;
}
.site-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(231, 243, 238, .14);
  font-size: 14px;
}
.site-footer__bottom p { max-width: 60em; margin: 0; }
.site-footer__bottom a { display: inline-flex; align-items: center; min-height: 48px; color: var(--green-light); font-weight: 600; }

@media (min-width: 768px) {
  .site-footer { padding: 72px 0 40px; }
  .site-footer__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .site-footer__grid { grid-template-columns: 1.4fr repeat(3, 1fr); }
  .site-footer__brand { grid-column: auto; }
}

/* =========================================================
   Web app : bandeau « Installer l'application » + modale iOS
   (créés par main.js uniquement quand l'installation est possible)
   ========================================================= */
.install-banner {
  position: fixed;
  z-index: 60;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex;
  gap: 14px;
  align-items: flex-start;
  max-width: 460px;
  margin-inline: auto;
  padding: 18px 44px 18px 18px;
  border-radius: var(--radius);
  background: var(--night);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .35);
  color: #fff;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.install-banner.is-open { opacity: 1; transform: none; }
.install-banner__icon { flex-shrink: 0; width: 48px; height: 48px; border-radius: 12px; }
.install-banner__title {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
}
.install-banner__text { margin: 6px 0 0; color: rgba(231, 243, 238, .85); font-size: 15px; line-height: 1.45; }
.install-banner__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 14px; }
.install-banner__actions .btn { min-height: 44px; padding: 0 18px; font-size: 15px; }
.install-banner__later {
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: rgba(231, 243, 238, .8);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.install-banner__later:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
/* Mobile : bouton principal pleine largeur, « Plus tard » centré dessous */
@media (max-width: 599px) {
  .install-banner__actions { flex-direction: column; align-items: stretch; gap: 4px; }
  .install-banner__actions .btn { width: 100%; }
  .install-banner__later { align-self: center; }
}
.install-banner__close,
.install-dialog__close {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  opacity: .75;
}
.install-banner__close:hover,
.install-dialog__close:hover { opacity: 1; }

/* Modale d'instructions iOS (élément <dialog> natif : focus et touche Échap gérés par le navigateur) */
.install-dialog {
  width: min(420px, calc(100% - 32px));
  padding: 28px 24px 24px;
  border: 0;
  border-radius: var(--radius);
  background: var(--night);
  color: #fff;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .45);
}
.install-dialog::backdrop { background: rgba(12, 31, 25, .6); }
.install-dialog__title {
  margin: 0 32px 0 0;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.25;
}
.install-dialog__warn {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(58, 174, 134, .16);
  color: var(--green-tint);
  font-size: 15px;
  line-height: 1.45;
}
.install-dialog__steps {
  display: grid;
  gap: 14px;
  margin: 20px 0 24px;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.install-dialog__steps li {
  display: flex;
  align-items: center;
  gap: 14px;
  line-height: 1.4;
}
.install-dialog__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .08);
  color: var(--green-light);
}
.install-dialog__ok { width: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .install-dialog[open] { animation: install-pop .3s var(--ease); }
}
@keyframes install-pop {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* Lien permanent dans le pied de page (affiché par main.js seulement si l'installation est possible) */
.site-footer__install {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--green-light);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.site-footer__install[hidden] { display: none; }
.site-footer__install:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
  }
}

/* =========================================================
   Web app : écran d'ouverture (splash screen)
   Affiché seulement en mode application (lancé depuis l'écran d'accueil).
   Repères du logo (viewBox 1039,6 × 229,6) : « Wave » 2–49 %, point 50,6–54 %, « GO » 55,5–98 %.
   Durée de l'animation : 2,6 s ; main.js attend aussi le chargement de la page avant le fondu.
   ========================================================= */
.splash {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: var(--safe-top) 24px env(safe-area-inset-bottom, 0px);
  background:
    radial-gradient(60% 45% at 78% 18%, rgba(58, 174, 134, .16), transparent 70%),
    radial-gradient(50% 40% at 15% 90%, rgba(58, 174, 134, .07), transparent 70%),
    var(--night);
  transition: opacity .5s var(--ease), visibility 0s linear .5s;
  /* sécurité sans JS : l'écran s'efface de lui-même au bout de 8 s */
  animation: splash-fallback .5s 8s forwards;
}
@media (display-mode: standalone) { .splash { display: flex; } }
html.splash-test .splash { display: flex; } /* aperçu en navigateur : ajouter ?splash à l'adresse */
.splash.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes splash-fallback { to { opacity: 0; visibility: hidden; pointer-events: none; } }

.splash__logo {
  position: relative;
  width: min(76vw, 380px);
  aspect-ratio: 1039.6 / 229.6;
}
.splash__img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-clip-path: inset(0 0 0 0);
  clip-path: inset(0 0 0 0);
  animation: splash-reveal 2.1s cubic-bezier(.45, 0, .2, 1) .25s both;
}
/* « GO » se dessine de gauche à droite derrière le point, puis « Wave. » apparaît de droite à gauche */
@keyframes splash-reveal {
  0%   { -webkit-clip-path: inset(0 45% 0 55%); clip-path: inset(0 45% 0 55%); }
  42%  { -webkit-clip-path: inset(0 0 0 55%);   clip-path: inset(0 0 0 55%); }
  62%  { -webkit-clip-path: inset(0 0 0 55%);   clip-path: inset(0 0 0 55%); }
  100% { -webkit-clip-path: inset(0 0 0 0);     clip-path: inset(0 0 0 0); }
}

/* Le « runner » a la taille du logo : ses translations en % suivent donc les repères du logo */
.splash__runner {
  position: absolute;
  inset: 0;
  animation: splash-run 2.35s cubic-bezier(.45, 0, .2, 1) both;
}
.splash__dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: #E7F3EE;
  box-shadow: 0 0 10px 3px rgba(58, 174, 134, .9), 0 0 28px 8px rgba(58, 174, 134, .45);
  animation: splash-dot 2.35s ease both;
}
/* départ au début de « GO », course jusqu'au bout, retour à la place du point de « Wave. » */
@keyframes splash-run {
  0%, 11% { transform: translate(55.5%, 58%); }
  48%     { transform: translate(98%, 58%); }
  70%     { transform: translate(52.3%, 81.6%); }
  100%    { transform: translate(52.3%, 81.6%); }
}
@keyframes splash-dot {
  0%   { opacity: 0; transform: scale(0); }
  10%  { opacity: 1; transform: scale(1.25); }
  14%  { transform: scale(1); }
  70%  { opacity: 1; transform: scale(1); }
  84%  { opacity: 0; transform: scale(.6); } /* se fond dans le vrai point du logo */
  100% { opacity: 0; transform: scale(.6); }
}

.splash__tagline {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: rgba(231, 243, 238, .7);
  animation: splash-fade .6s ease 2s both;
}
@keyframes splash-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* iPhone / iPad : iOS affiche un écran noir le temps de lancer l'app. Le splash part de ce noir et
   s'éclaircit en douceur vers le vert nuit, au lieu d'un changement de couleur brusque. */
@supports (-webkit-touch-callout: none) {
  .splash::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #000;
    pointer-events: none;
    animation: splash-unveil .5s ease-out both;
  }
}
@keyframes splash-unveil { to { opacity: 0; } }

/* Mouvement réduit : logo affiché d'emblée, sans point ni tracé */
@media (prefers-reduced-motion: reduce) {
  .splash__img, .splash__tagline { animation: none; }
  .splash__runner { display: none; }
}