/* ==========================================================================
   RÉSA-VTC-63 — Design System
   Clermont-Ferrand / Puy-de-Dôme (63)
   Palette : navy #0A1F44 · vert électrique #00C48C · blanc · gris clair
   ========================================================================== */

/* ---------- 1. Design tokens ---------------------------------------------- */
:root {
  /* Brand colors */
  --navy: #0A1F44;
  --navy-800: #0d2755;
  --navy-700: #123166;
  --navy-100: #e8edf6;
  --green: #00C48C;
  /* Vert de TEXTE. L'ancien #00a878 ne donnait que 2,85:1 sur le gris
     clair (#F5F7FA) et 3,06:1 sur blanc : sous le seuil WCAG AA de
     4,5:1. #007A52 monte a 5,01:1 sur #F5F7FA et 5,37:1 sur blanc.
     Il n'est utilise QUE comme couleur de premier plan (jamais en
     fond) : le redefinir par theme suffit donc a corriger d'un coup
     tous les liens, eyebrows et libelles concernes. */
  --green-dark: #007A52;
  --green-light: #e6faf4;
  --white: #ffffff;
  --gray-50: #F5F7FA;
  --gray-100: #eef1f6;
  --gray-200: #dfe4ec;
  --gray-400: #9aa5b8;
  --gray-600: #5b6779;
  --gray-800: #2c3646;
  --amber: #F59E0B;
  --red: #E63946;
  /* Or du logo — sert au bouton « Réservation » mis en avant dans le menu. */
  --gold: #FFC93C;
  --gold-dark: #E8AE1F;

  /* Semantic */
  --bg: var(--white);
  --bg-alt: var(--gray-50);
  --surface: var(--white);
  --text: var(--navy);
  --text-muted: var(--gray-600);
  --border: var(--gray-200);
  --accent: var(--green);
  --accent-contrast: #04231a;

  /* Typography */
  --font-heading: 'Montserrat', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Radii */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(10, 31, 68, .06);
  --shadow-sm: 0 4px 14px rgba(10, 31, 68, .07);
  --shadow: 0 12px 34px rgba(10, 31, 68, .10);
  --shadow-lg: 0 26px 60px rgba(10, 31, 68, .16);

  /* Layout */
  --container: 1180px;
  --header-h: 76px;

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: .28s;
}

/* Dark theme (opt-in via data-theme="dark") */
[data-theme="dark"] {
  --bg: #061529;
  --bg-alt: #0A1F44;
  --surface: #0d2755;
  --text: #eef3fb;
  --text-muted: #a9b6cc;
  --border: #1d3560;
  --navy-100: #123166;
  --gray-50: #0d2755;
  /* En theme sombre, le vert de texte doit s'eclaircir : #007A52 ne
     donnait que 3,3:1 sur le bleu nuit. On reprend le vert de marque,
     qui atteint 6,4:1 sur les surfaces sombres. */
  --green-dark: #00C48C;
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, .35);
  --shadow: 0 12px 34px rgba(0, 0, 0, .45);
  --shadow-lg: 0 26px 60px rgba(0, 0, 0, .55);
}

/* ---------- 2. Reset ------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; }

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

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

button { cursor: pointer; background: none; border: none; }

ul, ol { list-style: none; }

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

::selection { background: var(--green); color: var(--accent-contrast); }

/* ---------- 3. Typography ------------------------------------------------- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text);
}

h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); }
h2 { font-size: clamp(1.65rem, 3.6vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); }
h4 { font-size: 1.1rem; }

p { color: var(--text-muted); }

.lead {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--text-muted);
  line-height: 1.7;
}

/* ---------- 4. Layout helpers --------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2rem);
}

.section { padding-block: clamp(3.5rem, 8vw, 6rem); }
.section--alt { background: var(--bg-alt); }
.section--navy { background: var(--navy); color: #fff; }
.section--navy h2, .section--navy h3, .section--navy h4, .section--navy h5 { color: #fff; }
.section--navy p { color: rgba(255,255,255,.78); }

.section-head {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.section-head .eyebrow { margin-bottom: var(--space-3); }
.section-head p { margin-top: var(--space-4); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-heading);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--green-dark);
}
.eyebrow::before {
  content: "";
  width: 26px; height: 2px;
  background: var(--green);
  border-radius: 2px;
}
.section--navy .eyebrow { color: var(--green); }

.grid { display: grid; gap: var(--space-5); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.text-center { text-align: center; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }

/* ---------- 5. Buttons ---------------------------------------------------- */
.btn {
  --btn-bg: var(--green);
  --btn-fg: var(--accent-contrast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .92rem 1.6rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .96rem;
  line-height: 1;
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 2px solid transparent;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease),
              color var(--dur) var(--ease);
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(0,196,140,.32); }
.btn:active { transform: translateY(0); }

.btn--navy { --btn-bg: var(--navy); --btn-fg: #fff; }
.btn--navy:hover { box-shadow: 0 14px 28px rgba(10,31,68,.30); }

/* Bouton orange : la couleur d'accentuation traditionnelle (synthèse PDF,
   actions « importantes » qui doivent ressortir sans alerter). */
.btn--orange { --btn-bg: #f59332; --btn-fg: #fff; border-color: transparent; }
.btn--orange:hover { box-shadow: 0 14px 28px rgba(245,147,50,.35); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  border-color: var(--border);
}
.btn--ghost:hover { border-color: var(--green); color: var(--green-dark); box-shadow: none; }

/* Bouton d'alerte sonore : voyant rouge clignotant quand actif. */
.btn--sound-alert {
  position: relative;
  background: transparent !important;
  color: var(--text) !important;
  border-color: var(--border);
  gap: .35rem;
}
.btn--sound-alert:hover { border-color: var(--green); color: var(--green-dark) !important; box-shadow: none; }
.btn--sound-alert.is-on {
  border-color: var(--green);
  color: var(--green-dark) !important;
  font-weight: 600;
}
.btn--sound-alert.is-on::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #e74c3c;
  margin-right: 2px;
  animation: soundPulse 1.5s ease-in-out infinite;
}
@keyframes soundPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(231,76,60,.5); }
  50%      { opacity: .6; box-shadow: 0 0 0 6px rgba(231,76,60,0); }
}

.btn--light {
  --btn-bg: rgba(255,255,255,.12);
  --btn-fg: #fff;
  border-color: rgba(255,255,255,.28);
  backdrop-filter: blur(6px);
}
.btn--light:hover { background: rgba(255,255,255,.2); box-shadow: none; }

.btn--white { --btn-bg: #fff; --btn-fg: var(--navy); }
.btn--lg { padding: 1.1rem 2rem; font-size: 1.02rem; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .5; pointer-events: none; }

/* ---------- 6. Header / navigation ---------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.site-header.is-scrolled {
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-sm);
}

.nav {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.16rem;
  letter-spacing: -.02em;
  color: var(--text);
}
/* Marque d'en-tête : logo client (carré jaune détouré, fond transparent).
   Plus de fond navy ni de rayon : le logo porte sa propre forme, ce qui
   évite tout liseré visible sur le bandeau sombre du pied de page. */
.brand__mark {
  width: 40px; height: 40px;
  display: block;
  flex: none;
  border-radius: 0;
  background: none;
  color: var(--green);
  overflow: visible;
}
.brand__mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand__mark svg { width: 22px; height: 22px; }
.brand__sub {
  display: block;
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: .35rem;
}
.nav__link {
  position: relative;
  padding: .55rem .8rem;
  font-size: .93rem;
  font-weight: 500;
  color: var(--text-muted);
  border-radius: var(--radius-pill);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav__link:hover { color: var(--text); background: var(--gray-100); }
[data-theme="dark"] .nav__link:hover { background: var(--navy-700); }
.nav__link.is-active { color: var(--navy); font-weight: 700; }
[data-theme="dark"] .nav__link.is-active { color: var(--green); }
.nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 2px;
  transform: translateX(-50%);
  width: 18px; height: 3px;
  border-radius: 3px;
  background: var(--green);
}

.nav__actions { display: flex; align-items: center; gap: .6rem; }

.nav__phone {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  font-size: .93rem;
  color: var(--navy);
  padding: .5rem .75rem;
  border-radius: var(--radius-pill);
  transition: background var(--dur) var(--ease);
}
[data-theme="dark"] .nav__phone { color: var(--green); }
.nav__phone:hover { background: var(--gray-100); }
[data-theme="dark"] .nav__phone:hover { background: var(--navy-700); }
.nav__phone svg { width: 17px; height: 17px; }

.theme-toggle {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  color: var(--text-muted);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.theme-toggle:hover { color: var(--green-dark); border-color: var(--green); transform: rotate(-12deg); }
.theme-toggle svg { width: 19px; height: 19px; }
.theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

.nav__toggle {
  display: none;
  width: 44px; height: 44px;
  border-radius: 12px;
  border: 1px solid var(--border);
  place-items: center;
}
.nav__toggle svg { width: 22px; height: 22px; }
.nav__toggle .icon-close { display: none; }
.nav__toggle[aria-expanded="true"] .icon-menu { display: none; }
.nav__toggle[aria-expanded="true"] .icon-close { display: block; }

/* ---------- 7. Hero ------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1100px 560px at 82% -8%, rgba(0,196,140,.16), transparent 62%),
    linear-gradient(170deg, var(--navy) 0%, #071731 100%);
  color: #fff;
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3.5rem, 8vw, 6rem);
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(circle at 60% 40%, #000 0%, transparent 78%);
  pointer-events: none;
}
.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.hero h1 { color: #fff; }
.hero h1 .accent {
  background: linear-gradient(100deg, var(--green), #6ee7c0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero p { color: rgba(255,255,255,.80); font-size: 1.1rem; max-width: 54ch; margin-top: var(--space-5); }

.hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-bottom: var(--space-5);
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .42rem .85rem;
  font-size: .79rem;
  font-weight: 600;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
}
.badge svg { width: 14px; height: 14px; color: var(--green); }
.badge--green { background: rgba(0,196,140,.16); border-color: rgba(0,196,140,.4); }

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: var(--space-6);
}
.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.2rem, 3vw, 2.6rem);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255,255,255,.14);
}
.hero__stat b {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
}
.hero__stat span { font-size: .82rem; color: rgba(255,255,255,.62); }

/* Hero visual : vehicle card */
.hero__visual { position: relative; }
.vehicule-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(160deg, #16283f, #0b1a30);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 40px 80px rgba(0,0,0,.45);
  aspect-ratio: 4 / 3.15;
}
.vehicule-card img { width: 100%; height: 100%; object-fit: cover; }
.vehicule-card__tag {
  position: absolute;
  left: 14px; bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .9rem;
  border-radius: var(--radius-pill);
  background: rgba(6,18,36,.72);
  border: 1px solid rgba(0,196,140,.4);
  color: #fff;
  font-size: .8rem;
  font-weight: 600;
  backdrop-filter: blur(8px);
}
.vehicule-card__tag svg { width: 15px; height: 15px; color: var(--green); }

.hero__float {
  position: absolute;
  right: -12px; top: 26px;
  padding: .8rem 1rem;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: .7rem;
  animation: float 5.5s var(--ease) infinite;
}
.hero__float svg { width: 22px; height: 22px; color: var(--green); }
.hero__float b { display: block; font-family: var(--font-heading); font-size: .95rem; }
.hero__float span { font-size: .74rem; color: var(--text-muted); }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* ---------- 8. Booking quick widget (hero) -------------------------------- */
.quickbook {
  margin-top: clamp(-2.5rem, -3vw, -1.5rem);
  position: relative;
  z-index: 5;
}
/* 49.1 L'estimation est le PREMIER bloc de l'accueil (juste sous le menu) :
   la marge negative de chevauchement n'a plus lieu d'etre — elle tirerait le
   bloc sous l'en-tete collant. On la pose sur une bande claire, separee du hero
   navy qui suit. */
.quickbook--lead {
  margin-top: 0;
  padding-block: clamp(1.1rem, 2.6vw, 1.9rem);
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}
.quickbook__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
}
.quickbook__row {
  display: grid;
  grid-template-columns: 1.3fr 1.3fr 1fr 1fr auto;
  gap: .8rem;
  align-items: end;
}
.quickbook__field label {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin-bottom: .35rem;
}

/* ---------- 9. Forms ------------------------------------------------------ */
.field { position: relative; }
.field > label,
.form-label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: .4rem;
}
.form-label .req { color: var(--red); }

.input, .select, .textarea {
  width: 100%;
  padding: .8rem .95rem;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .95rem;
  color: var(--text);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--gray-400); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 4px rgba(0,196,140,.16);
}
.input[aria-invalid="true"] { border-color: var(--red); }
.textarea { min-height: 110px; resize: vertical; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6779' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; background-size: 17px; padding-right: 2.4rem; }

.field-icon { position: relative; }
/* Les icônes sont injectées DANS le <i data-icon>, donc le SVG est un
   descendant et non un enfant direct : un sélecteur « > svg » ne matcherait
   jamais et le SVG s'afficherait à sa taille par défaut (énorme). */
.field-icon svg {
  position: absolute;
  left: .85rem; top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  color: var(--gray-400);
  pointer-events: none;
}
.field-icon .input { padding-left: 2.6rem; }

/* ---------- Révélation du mot de passe ----------------------------------
   Le bouton vit DANS .field-icon, à droite du champ. Deux précautions :
   · `.field-icon svg` place TOUS les SVG en absolu à gauche (c'est l'icône du
     champ) : sans la règle de réinitialisation ci-dessous, l'œil du bouton
     atterrirait par-dessus l'icône de gauche ;
   · le champ reçoit un padding à droite, sinon le texte saisi passe sous le
     bouton dès qu'il est un peu long.
   ------------------------------------------------------------------------ */
.field-reveal {
  position: absolute;
  right: .3rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .38rem .5rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--gray-500);
  font: inherit;
  font-size: .74rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.field-reveal:hover { background: var(--gray-100); color: var(--navy); }
.field-reveal:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }

/* Réinitialise le positionnement hérité de `.field-icon svg`. */
.field-reveal svg {
  position: static;
  left: auto;
  top: auto;
  transform: none;
  width: 16px;
  height: 16px;
  color: inherit;
  pointer-events: none;
}

.field-icon:has(.field-reveal) .input { padding-right: 6.4rem; }

[data-theme="dark"] .field-reveal { color: var(--gray-400); }
[data-theme="dark"] .field-reveal:hover { background: rgba(255, 255, 255, .08); color: #fff; }

/* Sur un écran étroit, le libellé « Afficher » prend la place du texte saisi :
   on ne garde que l'œil, et c'est l'aria-label qui porte le sens. */
@media (max-width: 420px) {
  .field-reveal span { display: none; }
  .field-icon:has(.field-reveal) .input { padding-right: 2.9rem; }
}

.form-error {
  display: block;
  font-size: .78rem;
  color: var(--red);
  margin-top: .3rem;
  min-height: 1rem;
}

/* Autocomplete dropdown */
.autocomplete {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  z-index: 60;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  max-height: 280px;
  overflow-y: auto;
  display: none;
}
.autocomplete.is-open { display: block; }
.autocomplete__item {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  padding: .7rem .9rem;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background var(--dur) var(--ease);
}
.autocomplete__item:last-child { border-bottom: none; }
.autocomplete__item:hover,
.autocomplete__item.is-active { background: var(--gray-100); }
[data-theme="dark"] .autocomplete__item:hover,
[data-theme="dark"] .autocomplete__item.is-active { background: var(--navy-700); }
.autocomplete__item svg { width: 16px; height: 16px; color: var(--green); flex: none; margin-top: 3px; }
.autocomplete__main { font-size: .9rem; font-weight: 600; color: var(--text); line-height: 1.3; }
.autocomplete__sub { font-size: .78rem; color: var(--text-muted); }
/* Repere de priorite locale (demande du 2026-10-04) : les adresses du
   Puy-de-Dome / de l'agglomeration clermontoise sont proposees EN PREMIER,
   puis la France entiere vient completer la liste. */
.autocomplete__tag {
  display: inline-block;
  margin-left: .4rem;
  padding: .05rem .38rem;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--green-dark);
  background: rgba(0, 196, 140, .14);
  border-radius: 999px;
  vertical-align: 1px;
}
[data-theme="dark"] .autocomplete__tag { color: var(--green); background: rgba(0, 196, 140, .2); }
.autocomplete__state { padding: .8rem .9rem; font-size: .85rem; color: var(--text-muted); display: flex; align-items: center; gap: .6rem; }

.spinner {
  width: 16px; height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--green);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  flex: none;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 10. Cards ----------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(1.3rem, 3vw, 1.8rem);
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card--hover:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: rgba(0,196,140,.45);
}
.card__icon {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 15px;
  background: var(--green-light);
  color: var(--green-dark);
  margin-bottom: var(--space-4);
}
[data-theme="dark"] .card__icon { background: rgba(0,196,140,.14); color: var(--green); }
.card__icon svg { width: 26px; height: 26px; }
.card h3 { margin-bottom: .55rem; }
.card p { font-size: .93rem; }
.card__list { margin-top: var(--space-4); display: grid; gap: .5rem; }
.card__list li {
  display: flex;
  gap: .55rem;
  align-items: flex-start;
  font-size: .89rem;
  color: var(--text-muted);
}
.card__list svg { width: 16px; height: 16px; color: var(--green); flex: none; margin-top: 4px; }

.card--navy {
  background: linear-gradient(155deg, var(--navy), #0d2755);
  border-color: transparent;
  color: #fff;
}
.card--navy h3 { color: #fff; }
.card--navy p { color: rgba(255,255,255,.75); }
.card--navy .card__icon { background: rgba(0,196,140,.18); color: var(--green); }

.card__price {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.7rem;
  color: var(--navy);
}
[data-theme="dark"] .card__price { color: var(--green); }
.card__price small { font-size: .8rem; font-weight: 500; color: var(--text-muted); }

/* ---------- 11. Feature strip --------------------------------------------- */
.feature-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-5);
}
.feature {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
}
.feature svg { width: 26px; height: 26px; color: var(--green); flex: none; margin-top: 3px; }
.feature b { display: block; font-family: var(--font-heading); font-size: .98rem; margin-bottom: .15rem; }
.feature span { font-size: .86rem; color: var(--text-muted); }

/* ---------- 12. Steps ----------------------------------------------------- */
.steps { counter-reset: step; display: grid; gap: var(--space-5); }
.step {
  position: relative;
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
}
.step::before {
  counter-increment: step;
  content: counter(step);
  flex: none;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--navy);
  color: var(--green);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.05rem;
}
.step h4 { margin-bottom: .2rem; }
.step p { font-size: .9rem; }

/* Sur un fond bleu nuit, la pastille de numero (bleu nuit) disparait.
   On lui ajoute un liseré clair pour qu'elle reste lisible comme
   pastille, et on passe le chiffre au vert clair (contraste 8,1:1). */
.section--navy .step::before {
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .30);
  color: #7CF5CB;
}

/* ---------- 13. Booking layout -------------------------------------------- */
.booking-layout {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: start;
}

.stepper {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}
.stepper__item {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  font-weight: 600;
  /* Étapes à venir : --gray-400 (#9aa5b8) ne donnait que 2,49:1 sur blanc,
     sous le seuil WCAG AA. --text-muted suit le thème : #5b6779 en clair
     (5,74:1) et #a9b6cc en sombre (7,13:1). */
  color: var(--text-muted);
  padding: .35rem .1rem;
}
.stepper__dot {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--gray-100);
  color: var(--text-muted);
  font-size: .78rem;
  font-weight: 800;
  border: 2px solid transparent;
  transition: all var(--dur) var(--ease);
}
[data-theme="dark"] .stepper__dot { background: var(--navy-700); }
.stepper__item.is-active .stepper__dot { background: var(--green); color: var(--accent-contrast); }
.stepper__item.is-active { color: var(--text); }
.stepper__item.is-done .stepper__dot { background: var(--navy); color: var(--green); }
.stepper__item.is-done { color: var(--text); }
.stepper__line { flex: 1; height: 2px; background: var(--border); border-radius: 2px; min-width: 12px; }

.form-step { display: none; animation: fadeUp .4s var(--ease); }
.form-step.is-active { display: block; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.form-step__title { margin-bottom: .3rem; }
.form-step__hint { font-size: .88rem; margin-bottom: var(--space-5); }

.form-grid { display: grid; gap: var(--space-4); }
.form-grid--2 { grid-template-columns: 1fr 1fr; }

/* Choice cards (service type, passengers) */
.choices { display: grid; gap: .75rem; }
.choices--2 { grid-template-columns: 1fr 1fr; }
.choice {
  position: relative;
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  padding: 1rem;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  background: var(--surface);
}
.choice:hover { border-color: rgba(0,196,140,.5); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice__icon {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--gray-100);
  color: var(--text-muted);
  flex: none;
  transition: all var(--dur) var(--ease);
}
[data-theme="dark"] .choice__icon { background: var(--navy-700); }
.choice__icon svg { width: 21px; height: 21px; }
.choice__body b { display: block; font-family: var(--font-heading); font-size: .95rem; margin-bottom: .1rem; }
.choice__body span { font-size: .8rem; color: var(--text-muted); }
.choice:has(input:checked) {
  border-color: var(--green);
  background: var(--green-light);
  box-shadow: 0 0 0 4px rgba(0,196,140,.10);
}
[data-theme="dark"] .choice:has(input:checked) { background: rgba(0,196,140,.10); }
.choice:has(input:checked) .choice__icon { background: var(--green); color: var(--accent-contrast); }

/* Counter (passengers / luggage) */
.counter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .8rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
}
.counter__label { display: flex; align-items: center; gap: .6rem; font-size: .92rem; font-weight: 600; }
.counter__label svg { width: 19px; height: 19px; color: var(--green); }
.counter__ctrl { display: flex; align-items: center; gap: .7rem; }
.counter__btn {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  color: var(--text);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  transition: all var(--dur) var(--ease);
}
.counter__btn:hover { border-color: var(--green); color: var(--green-dark); }
.counter__val { min-width: 26px; text-align: center; font-weight: 800; font-family: var(--font-heading); }

.form-nav {
  display: flex;
  justify-content: space-between;
  gap: .8rem;
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}
.form-nav--compact {
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: flex-start;
}
.form-nav--compact .btn {
  padding: .55rem .85rem;
  font-size: .82rem;
}
.form-nav--compact .btn svg { width: 15px; height: 15px; }

/* ---------- 14. Map ------------------------------------------------------- */
.map-panel { position: sticky; top: calc(var(--header-h) + 20px); }
.map-shell {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  background: var(--gray-100);
  height: 340px;
  position: relative;
  z-index: 1;
}
.map-shell--tall { height: 440px; }
#map, .map { width: 100%; height: 100%; }

/* ---------- 14 bis. Deux vues de carte : plan / Waze live ------------------
   Le sélecteur est posé AU-DESSUS des contrôles Leaflet (z-index 800) mais
   sous la légende de la carte. Il vit en haut à droite, seule zone libre de
   la carte de réservation (zoom et fond de plan sont en bas à droite, la
   position GPS en haut à gauche). */
.map-tabs {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 900;
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 1px 6px rgba(10, 31, 68, .22);
}
.map-tabs__btn {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  padding: .34rem .62rem;
  border-radius: 6px;
  cursor: pointer;
  line-height: 1.1;
  white-space: nowrap;
}
.map-tabs__btn:hover { color: var(--navy-800); background: var(--bg-alt); }
.map-tabs__btn.is-active {
  color: #fff;
  background: var(--navy-800);
}
.map-tabs__btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
[data-theme="dark"] .map-tabs { background: var(--navy-800); }
[data-theme="dark"] .map-tabs__btn { color: #cfd9ee; }
[data-theme="dark"] .map-tabs__btn:hover { background: rgba(255,255,255,.08); color: #fff; }
[data-theme="dark"] .map-tabs__btn.is-active { background: var(--green); color: #08111f; }

/* La carte Waze occupe le même cadre ; l'iframe est créée au premier clic. */
.map--waze { position: absolute; inset: 0; background: var(--gray-200); }
.map--waze[hidden] { display: none; }
.waze-frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Lien de navigation Waze : visible dès qu'un point est connu.
   Posé en BAS AU CENTRE : les quatre coins de la carte sont déjà pris
   (GPS en haut à gauche, onglets en haut à droite, échelle en bas à gauche,
   zoom et fond de plan en bas à droite). */
.map-waze-open {
  position: absolute;
  left: 50%; bottom: 10px;
  transform: translateX(-50%);
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .42rem .7rem;
  border-radius: 999px;
  background: var(--navy-800);
  color: #fff;
  font-size: .78rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(10, 31, 68, .3);
}
.map-waze-open svg { width: 15px; height: 15px; }
.map-waze-open:hover { background: var(--navy-700); color: #fff; }
.map-waze-open[hidden] { display: none; }

.map-placeholder {
  position: absolute; inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1.5rem;
  background: linear-gradient(160deg, var(--gray-100), var(--gray-200));
  color: var(--text-muted);
}
[data-theme="dark"] .map-placeholder { background: linear-gradient(160deg, var(--navy-800), var(--navy-700)); }
.map-placeholder svg { width: 40px; height: 40px; margin: 0 auto .7rem; color: var(--gray-400); }
.map-placeholder p { font-size: .88rem; max-width: 30ch; margin-inline: auto; }

.route-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .6rem;
  margin-top: var(--space-4);
}
.route-metric {
  text-align: center;
  padding: .85rem .5rem;
  border-radius: var(--radius);
  background: var(--bg-alt);
  border: 1px solid var(--border);
}
.route-metric svg { width: 19px; height: 19px; color: var(--green); margin: 0 auto .35rem; }
.route-metric b { display: block; font-family: var(--font-heading); font-size: 1.15rem; line-height: 1.2; }
.route-metric span { font-size: .72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }

/* Price estimate panel */
.price-panel {
  margin-top: var(--space-4);
  padding: 1.2rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(155deg, var(--navy), #0d2755);
  color: #fff;
}
.price-panel__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid rgba(255,255,255,.16);
}
.price-panel__head span { font-size: .82rem; color: rgba(255,255,255,.7); }
.price-panel__total {
  font-family: var(--font-heading);
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--green);
  line-height: 1;
}
.price-lines { margin-top: .9rem; display: grid; gap: .5rem; }
.price-line { display: flex; justify-content: space-between; font-size: .87rem; color: rgba(255,255,255,.82); }
.price-line b { font-weight: 700; color: #fff; }
.price-line--surge { color: var(--amber); }
.price-panel__note { margin-top: .9rem; font-size: .76rem; color: rgba(255,255,255,.55); }

/* ---------- 15. Payment / summary ----------------------------------------- */
.summary-list { display: grid; gap: .1rem; }
.summary-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem 0;
  border-bottom: 1px dashed var(--border);
  font-size: .9rem;
}
.summary-row:last-child { border-bottom: none; }
.summary-row dt { color: var(--text-muted); }
.summary-row dd { font-weight: 600; text-align: right; }

.pay-card {
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem;
  background: var(--bg);
}
.pay-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .9rem; }
.pay-card__head b { font-family: var(--font-heading); }
.pay-simulated {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--amber);
  background: rgba(245,158,11,.12);
  padding: .28rem .6rem;
  border-radius: var(--radius-pill);
}

.stripe-strip {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  color: var(--text-muted);
  margin-top: .8rem;
}
.stripe-strip svg { width: 15px; height: 15px; color: var(--green); }

/* Status pills */
.pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .26rem .65rem;
  border-radius: var(--radius-pill);
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.pill--pending { background: rgba(245,158,11,.14); color: #8a5600; }
.pill--paid { background: rgba(0,196,140,.14); color: var(--green-dark); }
.pill--confirmed { background: rgba(59,130,246,.14); color: #1d4ed8; }
.pill--completed { background: rgba(10,31,68,.12); color: var(--navy); }
.pill--cancelled { background: rgba(230,57,70,.14); color: #b3261e; }
[data-theme="dark"] .pill--completed { background: rgba(255,255,255,.12); color: #fff; }

/* --- Pastilles : rattrapage de contraste en thème sombre ------------------
   Le fond d'une pastille est une teinte TRANSLUCIDE (alpha .14). Posée sur
   une surface sombre, elle reste sombre : la couleur de texte prévue pour un
   fond clair n'y tient plus le seuil AA.

   Mesuré le 2026-10-13, avant correction :
     · « Indisponible »  #E63946 sur rgba(230,57,70,.14)  ->  3,2:1  (clair : 3,4:1)
     · « 0 » (archives)  #1d4ed8 sur rgba(59,130,246,.14) ->  1,8:1
     · « En attente »    #b06f00 sur rgba(245,158,11,.14) ->  2,9:1
   On éclaircit donc l'encre, et on remonte légèrement l'opacité du fond pour
   que la pastille garde sa teinte au lieu de virer au gris.

   `.pill--paid` n'a pas besoin d'exception : il s'appuie déjà sur
   `--green-dark`, que le thème sombre redéfinit (voir plus haut). */
[data-theme="dark"] .pill--pending { background: rgba(245,158,11,.20); color: #f5b347; }
[data-theme="dark"] .pill--confirmed { background: rgba(59,130,246,.22); color: #93b4fb; }
[data-theme="dark"] .pill--cancelled { background: rgba(230,57,70,.22); color: #ff8a93; }

/* ---------- 16. Alerts / success ------------------------------------------ */
.alert {
  display: flex;
  gap: .8rem;
  padding: 1rem 1.1rem;
  border-radius: var(--radius);
  font-size: .9rem;
  align-items: flex-start;
}
.alert svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.alert--success { background: var(--green-light); color: #06624a; }
.alert--success svg { color: var(--green-dark); }
.alert--info { background: var(--gray-100); color: var(--navy); }
.alert--warn { background: rgba(245,158,11,.12); color: #8a5600; }
[data-theme="dark"] .alert--success { background: rgba(0,196,140,.13); color: #7ff0cd; }
[data-theme="dark"] .alert--info { background: var(--navy-700); color: #dbe6f7; }

.success-screen { text-align: center; padding: var(--space-6) var(--space-4); }
.success-screen__icon {
  width: 82px; height: 82px;
  margin: 0 auto var(--space-5);
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--green-light);
  color: var(--green-dark);
  animation: pop .5s var(--ease);
}
[data-theme="dark"] .success-screen__icon { background: rgba(0,196,140,.15); color: var(--green); }
.success-screen__icon svg { width: 40px; height: 40px; }
@keyframes pop {
  0% { transform: scale(.5); opacity: 0; }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}
.ref-code {
  display: inline-block;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--navy);
  background: var(--gray-100);
  padding: .6rem 1.1rem;
  border-radius: var(--radius);
  margin-top: .5rem;
}
[data-theme="dark"] .ref-code { background: var(--navy-700); color: var(--green); }

/* ---------- 17. Testimonials ---------------------------------------------- */
.quote {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.quote__stars { display: flex; gap: 2px; color: var(--amber); }
.quote__stars svg { width: 17px; height: 17px; }
.quote p { font-size: .93rem; font-style: italic; color: var(--text); flex: 1; }
.quote__author { display: flex; align-items: center; gap: .7rem; }
.quote__avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--navy);
  color: var(--green);
  font-family: var(--font-heading);
  font-weight: 800;
  flex: none;
}
.quote__author b { display: block; font-size: .9rem; font-family: var(--font-heading); }
.quote__author span { font-size: .78rem; color: var(--text-muted); }

/* ---------- 18. FAQ ------------------------------------------------------- */
.faq { display: grid; gap: .7rem; max-width: 820px; margin-inline: auto; }
.faq__item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.faq__item[open] { border-color: rgba(0,196,140,.45); box-shadow: var(--shadow-xs); }
.faq__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem 1.2rem;
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .98rem;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q svg { width: 20px; height: 20px; color: var(--green); flex: none; transition: transform var(--dur) var(--ease); }
.faq__item[open] .faq__q svg { transform: rotate(45deg); }
.faq__a { padding: 0 1.2rem 1.15rem; font-size: .91rem; color: var(--text-muted); }

/* ---------- 19. Blog ------------------------------------------------------ */
.post {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.post:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.post__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--navy); position: relative; }
.post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.post:hover .post__media img { transform: scale(1.06); }
.post__media--grad { display: grid; place-items: center; color: rgba(255,255,255,.9); }
.post__media--grad svg { width: 46px; height: 46px; color: var(--green); }
.post__cat {
  position: absolute; top: 12px; left: 12px;
  padding: .28rem .7rem;
  border-radius: var(--radius-pill);
  background: rgba(6,18,36,.75);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  backdrop-filter: blur(6px);
}
.post__body { padding: 1.3rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.post__meta { font-size: .78rem; color: var(--text-muted); display: flex; gap: .7rem; align-items: center; }
.post__body h3 { font-size: 1.12rem; }
.post__body p { font-size: .89rem; flex: 1; }
.post__more { font-weight: 700; font-size: .86rem; color: var(--green-dark); display: inline-flex; align-items: center; gap: .4rem; }
.post__more svg { width: 15px; height: 15px; transition: transform var(--dur) var(--ease); }
.post:hover .post__more svg { transform: translateX(4px); }

/* Article layout */
.article { max-width: 760px; margin-inline: auto; }
.article h2 { margin-top: var(--space-7); margin-bottom: var(--space-4); }
.article h3 { margin-top: var(--space-6); margin-bottom: var(--space-3); }
.article p, .article li { color: var(--text-muted); margin-bottom: var(--space-4); }
.article ul { list-style: disc; padding-left: 1.4rem; }
.article ul li { margin-bottom: .5rem; }
.article ul li::marker { color: var(--green); }
.article blockquote {
  border-left: 4px solid var(--green);
  padding: .4rem 0 .4rem 1.2rem;
  margin: var(--space-5) 0;
  font-style: italic;
  color: var(--text);
}

/* ---------- 20. Contact --------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.contact-item {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
}
.contact-item:last-of-type { border-bottom: none; }
.contact-item__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--green-light);
  color: var(--green-dark);
  flex: none;
}
[data-theme="dark"] .contact-item__icon { background: rgba(0,196,140,.14); color: var(--green); }
.contact-item__icon svg { width: 21px; height: 21px; }
.contact-item b { display: block; font-family: var(--font-heading); font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: .15rem; }
.contact-item a, .contact-item span { font-size: .98rem; font-weight: 600; color: var(--text); }
.contact-item a:hover { color: var(--green-dark); }

/* ---------- 21. Legal / prose --------------------------------------------- */
.prose { max-width: 820px; margin-inline: auto; }
.prose h2 { font-size: 1.45rem; margin-top: var(--space-7); margin-bottom: var(--space-3); }
.prose h3 { font-size: 1.1rem; margin-top: var(--space-5); margin-bottom: var(--space-2); }
.prose p, .prose li { color: var(--text-muted); margin-bottom: var(--space-3); font-size: .94rem; }
.prose ul { list-style: disc; padding-left: 1.4rem; }
.prose ul li::marker { color: var(--green); }
.prose strong { color: var(--text); }
.prose table { width: 100%; border-collapse: collapse; margin: var(--space-4) 0; font-size: .88rem; }
.prose th, .prose td { text-align: left; padding: .6rem .7rem; border: 1px solid var(--border); }
.prose th { background: var(--bg-alt); font-family: var(--font-heading); }
.toc {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  margin-bottom: var(--space-6);
}
.toc b { font-family: var(--font-heading); display: block; margin-bottom: .5rem; }
.toc ol { list-style: decimal; padding-left: 1.2rem; }
.toc li { margin-bottom: .25rem; font-size: .89rem; }
.toc a { color: var(--text-muted); }
.toc a:hover { color: var(--green-dark); }

/* ---------- 22. Page hero (inner pages) ----------------------------------- */
.page-hero {
  background:
    radial-gradient(900px 420px at 85% -20%, rgba(0,196,140,.18), transparent 60%),
    linear-gradient(165deg, var(--navy), #071731);
  color: #fff;
  padding-block: clamp(2.5rem, 6vw, 4rem);
}
.page-hero h1 { color: #fff; }
.page-hero p { color: rgba(255,255,255,.78); max-width: 62ch; margin-top: var(--space-4); font-size: 1.05rem; }
.breadcrumb {
  display: flex;
  gap: .45rem;
  align-items: center;
  font-size: .82rem;
  color: rgba(255,255,255,.62);
  margin-bottom: var(--space-4);
}
.breadcrumb a:hover { color: var(--green); }
.breadcrumb svg { width: 14px; height: 14px; }
.breadcrumb [aria-current] { color: #fff; }

/* ---------- 23. CTA band -------------------------------------------------- */
.cta-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(700px 300px at 90% 10%, rgba(0,196,140,.25), transparent 60%),
    linear-gradient(150deg, var(--navy), #0b2450);
  color: #fff;
  padding: clamp(2rem, 5vw, 3.2rem);
  text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.78); max-width: 56ch; margin: var(--space-4) auto var(--space-6); }
.cta-band__actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }

/* ---------- 24. Footer ---------------------------------------------------- */
.site-footer {
  background: var(--navy);
  color: rgba(255,255,255,.72);
  padding-top: clamp(3rem, 6vw, 4.5rem);
  font-size: .9rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-bottom: var(--space-7);
}
.site-footer .brand { color: #fff; }
.site-footer h4 {
  color: #fff;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  margin-bottom: var(--space-4);
}
.footer-links { display: grid; gap: .55rem; }
.footer-links a { color: rgba(255,255,255,.72); transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease); }
.footer-links a:hover { color: var(--green); padding-left: 4px; }
.footer-contact { display: grid; gap: .7rem; }
.footer-contact a { display: flex; gap: .6rem; align-items: center; color: rgba(255,255,255,.82); }
.footer-contact a:hover { color: var(--green); }
.footer-contact svg { width: 17px; height: 17px; color: var(--green); flex: none; }
.footer-about { margin-top: var(--space-4); max-width: 34ch; line-height: 1.7; }

/* ⚠️ CORRECTION DE CONTRASTE
   Le pied de page est BLEU NUIT dans les DEUX thèmes. Or la règle globale
   `p { color: var(--text-muted) }` (section 2) l'emportait sur la couleur
   héritée du pied de page : les paragraphes s'affichaient donc en gris
   moyen (#5b6779) sur le navy — un contraste de 2,8:1, sous le seuil
   lisible. Ils reprennent ici la couleur claire du pied de page. */
.site-footer p { color: inherit; }
.site-footer .brand__sub { color: rgba(255, 255, 255, .72); }
.footer-legal {
  border-top: 1px solid rgba(255,255,255,.12);
  padding-block: var(--space-5);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: .82rem;
  color: rgba(255,255,255,.55);
}
.footer-legal__links { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.footer-legal__links a:hover { color: var(--green); }
.footer-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: var(--space-4);
  padding: .45rem .8rem;
  border-radius: var(--radius-pill);
  background: rgba(0,196,140,.12);
  border: 1px solid rgba(0,196,140,.3);
  color: var(--green);
  font-size: .76rem;
  font-weight: 600;
}

/* ---------- 25. Floating call button -------------------------------------- */
.call-fab {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 800;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1.2rem;
  border-radius: var(--radius-pill);
  background: var(--green);
  color: var(--accent-contrast);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: .92rem;
  box-shadow: 0 12px 30px rgba(0,196,140,.42);
  transition: transform var(--dur) var(--ease);
}
.call-fab:hover { transform: translateY(-3px) scale(1.03); }
.call-fab svg { width: 19px; height: 19px; }
@media (max-width: 720px) {
  .call-fab { right: 14px; bottom: 14px; padding: .8rem; }
  .call-fab span { display: none; }
}

/* ---------- 26. Admin ----------------------------------------------------- */
.admin-login {
  max-width: 420px;
  margin: clamp(3rem, 8vw, 6rem) auto;
}
.admin-shell { display: none; }
.admin-shell.is-auth { display: block; }
.admin-login.is-hidden { display: none; }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-4); }
.kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.2rem;
}
.kpi__label { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 700; }
.kpi__value { font-family: var(--font-heading); font-size: 1.9rem; font-weight: 800; margin-top: .3rem; line-height: 1.1; }
.kpi__delta { font-size: .78rem; color: var(--green-dark); font-weight: 600; }

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
table.data { width: 100%; border-collapse: collapse; font-size: .87rem; min-width: 820px; }
table.data th {
  text-align: left;
  padding: .85rem .9rem;
  background: var(--bg-alt);
  font-family: var(--font-heading);
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
table.data td { padding: .8rem .9rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.data tbody tr { transition: background var(--dur) var(--ease); }
table.data tbody tr:hover { background: var(--bg-alt); }
table.data tbody tr:last-child td { border-bottom: none; }
.cell-strong { font-weight: 700; color: var(--text); }
.cell-muted { color: var(--text-muted); font-size: .82rem; }

.filters {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: var(--space-5);
}
.filters .input, .filters .select { width: auto; min-width: 150px; }

.icon-btn {
  width: 32px; height: 32px;
  display: inline-grid; place-items: center;
  border-radius: 8px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  transition: all var(--dur) var(--ease);
}
.icon-btn:hover { border-color: var(--green); color: var(--green-dark); }
.icon-btn svg { width: 15px; height: 15px; }
.row-actions { display: flex; gap: .35rem; }

/* Code couleur des lignes du tableau de réservations */
table.data tbody tr.tr--pending   { border-left: 4px solid var(--amber); background: rgba(245, 158, 11, .06); }
table.data tbody tr.tr--confirmed { border-left: 4px solid #3B82F6; background: rgba(59, 130, 246, .06); }
table.data tbody tr.tr--completed { border-left: 4px solid var(--green); background: rgba(0, 196, 140, .06); }
table.data tbody tr.tr--cancelled { border-left: 4px solid var(--red);  background: rgba(230, 57, 70, .06); }

/* Bouton "Ouvrir" dans le tableau (gros, visible, tactile) */
.btn--open {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .55rem 1rem;
  font-size: .82rem; font-weight: 600;
  border-radius: var(--radius-sm);
  background: var(--navy); color: #fff;
  border: none; cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.btn--open:hover { opacity: .85; }
.btn--open svg { width: 14px; height: 14px; }

/* Variantes colorées du bouton "Ouvrir" selon le statut */
.btn--open--green  { background: var(--green); color: #fff; }
.btn--open--red    { background: var(--red);   color: #fff; }
.btn--open--blue   { background: #3B82F6;      color: #fff; }
.btn--open--orange { background: var(--amber); color: #1a1200; }

/* Pilotage chauffeur dans le modal */
.admin-actions { display: grid; gap: .55rem; }
.admin-actions__row {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  padding: .55rem .7rem;
  background: var(--bg-alt);
  border-radius: var(--radius-sm);
}
.admin-actions__label {
  min-width: 5.5rem;
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted);
}
.admin-actions .btn { padding: .5rem .85rem; font-size: .82rem; }
.admin-actions .btn svg { width: 14px; height: 14px; }

/* Modal */
.modal {
  position: fixed; inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  background: rgba(6,18,36,.6);
  backdrop-filter: blur(4px);
}
.modal.is-open { display: flex; }
/* Boîte de dialogue NATIVE (<dialog id="modal-forfait">).
   ------------------------------------------------
   showModal() pose l'attribut « open » et place la boîte dans le « top
   layer » — il ne pose AUCUNE classe. Or .modal { display:none } l'emportait
   sur l'affichage natif : le dialogue s'ouvrait pour de bon (open === true,
   champs remplis, Enregistrer opérationnel) mais restait INVISIBLE. Cliquer
   « Nouveau forfait » ou « Modifier » ne montrait donc rien du tout.
   Ces règles rendent l'ouverture native visible ; js/admin.js ajoute en plus
   .is-open, pour que les deux chemins donnent le même résultat. */
dialog.modal[open] {
  display: flex;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
}
/* Le fond est déjà peint par .modal : le ::backdrop natif ferait doublon. */
dialog.modal::backdrop { background: transparent; }
/* Chrome pose le focus sur le <form> (conteneur défilant) : l'anneau global
   :focus-visible dessinait un liseré vert autour de la boîte, qu'on lisait
   comme une erreur. js/admin.js place le curseur dans le premier champ. */
dialog.modal form:focus-visible { outline: none; }
/* Titre du dialogue : icône calibrée. Il n'existe AUCUNE règle globale
   `[data-icon] svg` sur ce site — sans ceci, le drapeau s'affichait à sa
   taille intrinsèque (515 px) et poussait les champs hors de l'écran. */
#modal-forfait-title {
  display: flex;
  align-items: center;
  gap: .5rem;
}
#modal-forfait-title svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--green);
}
/* Le refus de doublon propose un bouton « Ouvrir la fiche » : il doit passer
   sous le message, pas dedans. */
.form-error .btn { display: flex; margin-top: .45rem; }
/* La boîte elle-même : dans un <dialog>, le panneau est un <form>. Sans ces
   règles il s'affichait à même le voile sombre, sans fond ni largeur. */
dialog.modal > .modal__box,
dialog.modal > form.modal__body {
  background: var(--surface);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  animation: fadeUp .3s var(--ease);
}
.modal__box {
  background: var(--surface);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  animation: fadeUp .3s var(--ease);
}
.modal__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 1.4rem;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0;
  background: var(--surface);
}
.modal__head h3 { font-size: 1.15rem; }
.modal__body { padding: 1.4rem; }
/* Bouton « Fermer » (×) des modales. Taille confortable pour la cible
   tactile, transparent jusqu'au survol. */
.modal__close {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: .25rem .55rem;
  border-radius: var(--radius);
  transition: background .15s, color .15s;
}
.modal__close:hover { background: var(--bg-soft); color: var(--text); }

/* Toast */
.toast-host {
  position: fixed;
  bottom: 22px; left: 50%;
  transform: translateX(-50%);
  z-index: 1100;
  display: grid;
  gap: .5rem;
  width: min(420px, calc(100vw - 28px));
}
.toast {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  padding: .85rem 1rem;
  border-radius: var(--radius);
  background: var(--navy);
  color: #fff;
  box-shadow: var(--shadow-lg);
  font-size: .88rem;
  animation: fadeUp .3s var(--ease);
}
.toast svg { width: 18px; height: 18px; color: var(--green); flex: none; margin-top: 2px; }
.toast--error svg { color: #ff8f99; }

/* ---------- 27. Reveal on scroll ------------------------------------------ */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- 28. Responsive ------------------------------------------------ */
@media (max-width: 1024px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__visual { max-width: 560px; }
  .booking-layout { grid-template-columns: 1fr; }
  .map-panel { position: static; }
  .quickbook__row { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
}

/* Bascule du tiroir latéral : portée étendue de 860 à 940 px.
   Mesuré : entre 861 et 940 px de fenêtre, la somme marque + 7 liens +
   téléphone + bascule ne tient pas sur une ligne (le numéro de téléphone se
   repliait sur deux lignes). Un tiroir est plus lisible qu'un en-tête écrasé.
   Ce bloc ne contient QUE des règles de tiroir : l'étendre est sans effet
   de bord sur le reste de la mise en page mobile (section 41). */
@media (max-width: 940px) {
  /* ---- Tiroir latéral (menu déroulant latéral) ---- */
  .nav__links {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    width: min(84vw, 340px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .15rem;
    padding: 0 1rem 1.6rem;
    background: var(--bg);
    border-right: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    transform: translateX(-105%);
    visibility: hidden;
    transition: transform var(--dur) var(--ease), visibility var(--dur) var(--ease);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .nav__links.is-open { transform: translateX(0); visibility: visible; }

  /* En-tête du tiroir : marque + fermeture (injecté par js/main.js) */
  .nav__drawer-head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    margin: 0 -1rem .6rem;
    padding: .85rem 1rem;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
  }
  .nav__drawer-brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--font-heading);
    font-size: .95rem;
    font-weight: 800;
    color: var(--text);
  }
  .nav__drawer-brand img { width: 32px; height: 32px; border-radius: 8px; }
  .nav__drawer-close {
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    flex: none;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--bg-alt);
    color: var(--text);
    cursor: pointer;
  }
  .nav__drawer-close:hover { border-color: var(--green); color: var(--green-dark); }
  .nav__drawer-close svg { width: 18px; height: 18px; }

  .nav__link {
    padding: .9rem 1rem;
    font-size: 1rem;
    border-radius: var(--radius-sm);
  }
  .nav__link.is-active::after { display: none; }
  .nav__link.is-active { background: var(--gray-100); }
  [data-theme="dark"] .nav__link.is-active { background: var(--navy-700); }

  /* Le téléphone reste accessible depuis le tiroir */
  .nav__phone span { display: inline; }
  .nav__toggle { display: grid; }

  /* Voile derrière le tiroir.
     ⚠️ 850 et NON 950 : `.site-header` porte `z-index: 900` ET un
     `backdrop-filter`, il forme donc un CONTEXTE D'EMPILEMENT. Or le tiroir
     (`.nav__links`, z-index 1000) vit À L'INTÉRIEUR de cet en-tête : son 1000 ne
     compte qu'au sein de ce contexte. Un voile à 950 passait donc au-dessus de
     l'en-tête entier, et par conséquent au-dessus du tiroir.
     Mesuré en 390 px : les 7 liens du menu répondaient `nav-scrim` à
     `elementFromPoint` — le menu était incliquable, tout appui fermait le
     tiroir au lieu de naviguer. Le voile doit rester SOUS l'en-tête (900) mais
     AU-DESSUS du contenu de page et du bouton d'appel flottant (800). */
  .nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 850;
    background: rgba(4, 12, 26, .55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
  }
  body.nav-locked { overflow: hidden; }
  body.nav-locked .nav-scrim { opacity: 1; visibility: visible; }
}

/* Le voile n'existe pas en affichage bureau */
@media (min-width: 941px) {
  .nav-scrim { display: none; }
  .nav__drawer-head { display: none; }
}

@media (max-width: 640px) {
  .quickbook__row { grid-template-columns: 1fr; }
  .form-grid--2 { grid-template-columns: 1fr; }
  .choices--2 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .route-summary { grid-template-columns: 1fr 1fr 1fr; }
  .stepper__label { display: none; }
  .hero__float { display: none; }
  .footer-legal { flex-direction: column; }
  .btn { width: 100%; }
  .hero__cta .btn, .cta-band__actions .btn { width: auto; flex: 1 1 auto; }
  .form-nav { flex-direction: column-reverse; }
  .form-nav .btn { width: 100%; }
  /* ⚠️ `.btn` porte `white-space: nowrap`. Un libellé long — « Confirmer ma
     réservation — paiement sur place » — impose donc sa largeur MINIMALE au
     formulaire entier : mesuré à 569 px de large dans une fenêtre de 489 px,
     soit 80 px de débordement horizontal sur un écran étroit. Le passage à la
     ligne n'est autorisé que là où le bouton occupe déjà toute la largeur. */
  .form-nav .btn, .co-step__cta { white-space: normal; }
}

/* ---------- 29. Utilities ------------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 1200;
  padding: .7rem 1.1rem;
  background: var(--green);
  color: var(--accent-contrast);
  border-radius: 0 0 var(--radius) var(--radius);
  font-weight: 700;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 0; }
.hidden { display: none !important; }

/* ---------- Contenu rédactionnel « paiement en ligne bientôt » -------------
   Toutes les phrases qui annoncent le paiement en ligne comme « à venir »
   portent `.pay-soon-only`. Dès que le SERVEUR ouvre le paiement,
   `applyPayState()` pose `pay-online-open` sur <html> et ces phrases
   disparaissent d'un seul coup, sans que le HTML ait à être retouché.

   Le repli est volontairement « visible » : si le JavaScript ne s'exécute
   pas, la classe n'est jamais posée et les mentions « bientôt » restent —
   ce qui est exact, puisque sans JavaScript le formulaire ne peut de toute
   façon pas payer en ligne. */
.pay-online-open .pay-soon-only { display: none !important; }
.divider { height: 1px; background: var(--border); margin-block: var(--space-6); border: 0; }

/* Leaflet tuning */
.leaflet-container { font-family: var(--font-body); z-index: 1; }
.leaflet-bar a { color: var(--navy) !important; }
.leaflet-popup-content-wrapper { border-radius: var(--radius) !important; }

/* ---------- 30. Hero video intro ------------------------------------------ */
/* Texte d'accroche du hero : slogan principal + précision secondaire */
.hero .hero__lead { color: rgba(255, 255, 255, .88); font-size: 1.12rem; }
.hero .hero__sub { color: rgba(255, 255, 255, .60); font-size: .95rem; margin-top: .7rem; }

.hero-video {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(160deg, #16283f, #0b1a30);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 40px 80px rgba(0, 0, 0, .45);
  aspect-ratio: 4 / 3.15;
  isolation: isolate;
}
.hero-video__media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #061529;
}

/* PC (au-delà de 640 px) : montrer l'IMAGE ENTIÈRE de la vidéo.
   ----------------------------------------------------------------
   Le cadre est en 4/3.15, plus « carré » que la vidéo (16/9). En `cover`, le
   navigateur AGRANDIT l'image d'environ 1,4× pour remplir le cadre, puis rogne
   les côtés : sur grand écran, on ne voyait donc jamais toute la scène (le
   sujet pouvait sortir du champ). En `contain`, l'image est entière, centrée,
   et le cadre garde sa taille — deux bandes sombres de la couleur du fond
   l'encadrent.

   Le rendu étroit (≤ 640 px, voir plus bas) conserve `cover` : là, le cadre
   est en 16/11, tout proche du 16/9, et le rognage est négligeable. C'est le
   seul endroit où la règle diffère entre PC et mobile. */
@media (min-width: 641px) {
  .hero-video__media { object-fit: contain; }
}
.hero-video__overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.25rem;
  text-align: center;
  background: linear-gradient(180deg, rgba(6, 18, 36, .35) 0%, rgba(6, 18, 36, .72) 60%, rgba(6, 18, 36, .9) 100%);
  transition: opacity .45s var(--ease), visibility .45s var(--ease);
}
.hero-video__overlay[hidden] { display: none; }

/* Pendant la lecture, l'habillage s'efface — mais la main doit rester
   PRÉVISIBLE. Deux pièges corrigés ici :
   1. `pointer-events: none` sur tout l'habillage créait des zones cliquables
      invisibles : le bouton « Lancer l'intro » venait de s'effacer au même
      endroit, et le clic atteignait la vidéo, qui se mettait en pause —
      l'inverse de ce que l'utilisateur venait de demander.
   2. La transition de 450 ms sur `visibility` laissait le bouton cliquable
      pendant qu'il devenait transparent.
   On coupe donc l'INTERACTION tout de suite (`pointer-events: none` sans
   transition) et on ne fait durer que l'opacité. Les commandes explicites
   (son, plein écran, z-index 5) restent, elles, cliquables. */
.hero-video.is-playing .hero-video__overlay {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .45s var(--ease);
}
.hero-video__play {
  display: grid;
  place-items: center;
  width: 76px; height: 76px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: #04231a;
  background: radial-gradient(circle at 32% 28%, #34e0ab, var(--green));
  box-shadow: 0 0 0 0 rgba(0, 196, 140, .55), 0 18px 40px rgba(0, 196, 140, .38);
  animation: heroPulse 2.6s var(--ease) infinite;
  transition: transform .25s var(--ease);
}
.hero-video__play:hover { transform: scale(1.07); }
.hero-video__play svg { width: 30px; height: 30px; margin-left: 3px; }
@keyframes heroPulse {
  0%   { box-shadow: 0 0 0 0 rgba(0, 196, 140, .55), 0 18px 40px rgba(0, 196, 140, .38); }
  70%  { box-shadow: 0 0 0 22px rgba(0, 196, 140, 0), 0 18px 40px rgba(0, 196, 140, .38); }
  100% { box-shadow: 0 0 0 0 rgba(0, 196, 140, 0), 0 18px 40px rgba(0, 196, 140, .38); }
}
.hero-video__cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1.15rem;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: var(--radius-pill);
  background: rgba(6, 18, 36, .55);
  color: #fff;
  font: inherit;
  font-size: .84rem;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.hero-video__cta:hover { background: rgba(0, 196, 140, .22); border-color: rgba(0, 196, 140, .6); }
.hero-video__cta svg { width: 15px; height: 15px; color: var(--green); }
.hero-video__caption {
  max-width: 30ch;
  margin: 0;
  color: rgba(255, 255, 255, .9);
  font-size: .86rem;
  line-height: 1.5;
}

/* 41.5 bis — État « vidéo indisponible » (2026-10-17).
   Le fichier tronqué laissait l'utilisateur devant une image figée, sans un
   mot d'explication. Dans cet état, la pastille de durée et le badge « 0 g
   CO₂ » n'ont plus de sens : on les estompe, on atténue l'affiche, et on
   remonte l'habillage (affiche + bouton « Réessayer ») au premier plan.
   Rien n'est retiré du DOM : la page reste complète pour un lecteur d'écran. */
.hero-video.is-video-error .hero-video__badge,
.hero-video.is-video-error .hero-video__tag { opacity: .45; }
.hero-video.is-video-error .hero-video__media { opacity: .55; }
.hero-video.is-video-error .hero-video__overlay {
  opacity: 1;
  pointer-events: auto;
}
.hero-video.is-video-error .hero-video__caption { max-width: 36ch; color: #fff; }
.hero-video__badge {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .34rem .7rem;
  border-radius: var(--radius-pill);
  background: rgba(6, 18, 36, .72);
  border: 1px solid rgba(255, 255, 255, .2);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  backdrop-filter: blur(8px);
  transition: opacity .3s var(--ease);
}
.hero-video__badge svg { width: 13px; height: 13px; color: var(--green); }
.hero-video.is-playing .hero-video__badge { opacity: 0; pointer-events: none; }
.hero-video__tag {
  position: absolute;
  left: 14px; bottom: 14px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .9rem;
  border-radius: var(--radius-pill);
  background: rgba(6, 18, 36, .72);
  border: 1px solid rgba(0, 196, 140, .4);
  color: #fff;
  font-size: .8rem;
  font-weight: 600;
  backdrop-filter: blur(8px);
}
.hero-video__tag svg { width: 15px; height: 15px; color: var(--green); }
.hero-video__fs {
  position: absolute;
  right: 12px; bottom: 12px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .44rem .8rem;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--radius-pill);
  background: rgba(6, 18, 36, .68);
  color: #fff;
  font: inherit;
  font-size: .74rem;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.hero-video__fs:hover { background: rgba(0, 196, 140, .22); border-color: rgba(0, 196, 140, .6); }
.hero-video__fs svg { width: 14px; height: 14px; }
.hero-video__fs[hidden] { display: none; }

/* Bouton son — DÉTACHÉ du bouton plein écran.
   Les deux portaient la classe .hero-video__fs, donc la MÊME position
   (right:12px; bottom:12px) : ils se superposaient et le plein écran
   recouvrait le son. Le bouton son a désormais sa propre place, en haut à
   gauche — le seul coin resté libre (badge en haut à droite, tag véhicule en
   bas à gauche, plein écran en bas à droite).
   Cette règle est placée APRÈS .hero-video__fs : à spécificité égale, c'est
   l'ordre de déclaration qui tranche, et il faut donc qu'elle vienne après.
   `right` et `bottom` sont remis à `auto` : sans cela, les deux jeux de
   coordonnées coexisteraient et l'élément serait étiré. */
.hero-video__sound {
  right: auto;
  bottom: auto;
  left: 12px;
  top: 12px;
  background: rgba(6, 18, 36, .78);
  border-color: rgba(255, 255, 255, .34);
}
.hero-video__sound svg { color: var(--green); }
.hero-video.is-fullscreen .hero-video__sound { left: 20px; top: 20px; }

/* Commande lecture / pause — au CENTRE en bas, le seul emplacement resté
   libre (badge « Intro · 40 s » en haut à droite, son en haut à gauche,
   tag véhicule en bas à gauche, plein écran en bas à droite).
   Elle reste visible EN PERMANENCE, y compris pendant la lecture : c'est
   elle qui rend « arrêter puis reprendre » découvrable. Le libellé suit
   l'état du média (voir setPlaying, js/main.js). */
.hero-video__toggle {
  left: 50%;
  right: auto;
  bottom: 12px;
  transform: translateX(-50%);
  z-index: 6;
}
.hero-video.is-fullscreen .hero-video__toggle { bottom: 20px; }

/* Écrans étroits : le libellé du bouton son se retirerait sur le badge
   « Intro · 40 s ». On ne garde alors que l'icône, dans une pastille ronde. */
@media (max-width: 430px) {
  .hero-video__sound { padding: .44rem; }
  .hero-video__sound span { display: none; }
  .hero-video__sound svg { width: 16px; height: 16px; }
}

/* Repli si l'API Fullscreen n'est pas disponible : plein écran simulé en CSS */
.hero-video.is-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 2000;
  width: 100vw;
  height: 100vh;
  max-width: none;
  aspect-ratio: auto;
  border-radius: 0;
  border: 0;
}
.hero-video.is-fullscreen .hero-video__media { height: 100vh; object-fit: contain; background: #000; }

/* Plein écran NATIF (API Fullscreen).
   ----------------------------------------------------------------
   Deux pleins écrans coexistent, et ils ne se ressemblent pas :
     · l'API native — le navigateur met .hero-video en plein écran, et AUCUNE
       classe n'est posée ;
     · le repli simulé en CSS — c'est NOUS qui posons `.is-fullscreen`.
   La règle ci-dessus ne couvrait donc que le repli. En plein écran natif, la
   vidéo restait en `cover` : elle était ROGNÉE au moment précis où l'on veut
   tout voir. On aligne les deux sur `contain`. */
.hero-video:fullscreen .hero-video__media,
.hero-video:-webkit-full-screen .hero-video__media {
  object-fit: contain;
  background: #000;
}
.hero-video.is-fullscreen .hero-video__fs { right: 20px; bottom: 20px; }
.hero-video.is-fullscreen .hero-video__tag { left: 20px; bottom: 20px; }
body.video-locked { overflow: hidden; }

/* Variante posée sous la vidéo (le badge flottant chevaucherait les boutons) */
.hero__float--static {
  position: static;
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem .95rem;
}
.hero__float--static > div { display: grid; gap: .1rem; }
.hero__float--static b { font-family: var(--font-heading); font-size: .9rem; }
.hero__float--static span { font-size: .78rem; color: var(--text-muted); }
.hero__float--static svg { width: 22px; height: 22px; color: var(--green); flex: none; }
@media (max-width: 640px) { .hero__float--static { display: none; } }

/* ---------- 31. Moyens de paiement ---------------------------------------- */
.pay-brands {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  margin-top: .35rem;
  padding-top: .9rem;
  border-top: 1px dashed var(--border);
}
.pay-brands__label {
  width: 100%;
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
}
.pay-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  min-width: 62px;
  padding: 0 .6rem;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
  box-shadow: var(--shadow-xs);
}
.pay-brand svg { height: 22px; width: auto; display: block; }
[data-theme="dark"] .pay-brand { background: #f7f9fc; border-color: rgba(255, 255, 255, .16); }
.pay-brand--wide { min-width: 78px; }
.pay-note {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-top: .75rem;
  font-size: .76rem;
  color: var(--text-muted);
}
.pay-note svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--green); }

/* ---------- 32. Siège enfant ---------------------------------------------- */
.child-seat {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: .9rem 1rem;
  border: 1.5px solid color-mix(in srgb, var(--green) 45%, var(--border));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--green) 7%, var(--bg));
}
.child-seat__icon {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: none;
  border-radius: 11px;
  background: rgba(0, 196, 140, .16);
}
.child-seat__icon svg { width: 21px; height: 21px; color: var(--green-dark); }
[data-theme="dark"] .child-seat__icon svg { color: var(--green); }
.child-seat__body { display: grid; gap: .15rem; }
.child-seat__body b { font-family: var(--font-heading); font-size: .93rem; }
.child-seat__body span { font-size: .8rem; color: var(--text-muted); line-height: 1.45; }
.child-seat__count {
  margin-left: auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .7rem;
  border-radius: var(--radius-pill);
  background: var(--green);
  color: var(--accent-contrast);
  font-size: .74rem;
  font-weight: 800;
  white-space: nowrap;
}
.child-seat__count svg { width: 13px; height: 13px; }

/* Version case à cocher (formulaire de réservation) */
label.child-seat {
  position: relative;
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
label.child-seat:hover { border-color: var(--green); }
label.child-seat:has(input:checked) {
  border-color: var(--green);
  background: color-mix(in srgb, var(--green) 15%, var(--bg));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 18%, transparent);
}
label.child-seat:has(input:focus-visible) { outline: 2px solid var(--green); outline-offset: 3px; }
label.child-seat .child-seat__count svg { opacity: .45; transition: opacity .2s var(--ease); }
label.child-seat:has(input:checked) .child-seat__count svg { opacity: 1; }
.field input.input:disabled { opacity: .55; cursor: not-allowed; }

/* Chip « siège enfant inclus » réutilisable (services, à-propos, tarifs) */
.feature-chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .42rem .85rem;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--green) 40%, var(--border));
  background: color-mix(in srgb, var(--green) 8%, var(--bg));
  font-size: .8rem;
  font-weight: 600;
}
.feature-chip svg { width: 15px; height: 15px; color: var(--green-dark); }
[data-theme="dark"] .feature-chip svg { color: var(--green); }

@media (max-width: 640px) {
  .hero-video { aspect-ratio: 16 / 11; }
  .hero-video__play { width: 62px; height: 62px; }
  .hero-video__play svg { width: 25px; height: 25px; }
  .hero-video__caption { font-size: .8rem; }
  .child-seat { flex-wrap: wrap; }
  .child-seat__count { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-video__play { animation: none; }
  .hero-video__overlay { transition: none; }
}

/* ---------- 33. Carte : repères, position GPS, popups ---------------------- */
/* Repères Départ (vert) / Arrivée (navy) — liseré blanc + ombre portée */
.taxi-pin { background: none; border: 0; }
.taxi-pin svg { display: block; filter: drop-shadow(0 5px 7px rgba(6, 18, 36, .38)); }
.taxi-pin--start svg { filter: drop-shadow(0 5px 8px rgba(0, 196, 140, .45)); }
.taxi-pin--end svg { filter: drop-shadow(0 5px 8px rgba(10, 31, 68, .45)); }

/* Point bleu « vous êtes ici », à la manière de Google Maps */
.taxi-user { background: none; border: 0; }
.taxi-user__core {
  position: absolute; left: 50%; top: 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: #1A73E8;
  border: 3px solid #fff;
  box-shadow: 0 2px 7px rgba(6, 18, 36, .5);
  z-index: 2;
}
.taxi-user__halo {
  position: absolute; left: 50%; top: 50%;
  width: 24px; height: 24px;
  margin: -12px 0 0 -12px;
  border-radius: 50%;
  background: rgba(26, 115, 232, .38);
  animation: userPulse 2.2s var(--ease) infinite;
}
@keyframes userPulse {
  0%   { transform: scale(.55); opacity: .85; }
  70%  { transform: scale(2.5); opacity: 0; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* Bouton « Ma position » (contrôle Leaflet en haut à droite) */
.map-locate {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: var(--surface);
  color: var(--navy);
  cursor: pointer;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.map-locate svg { width: 19px; height: 19px; }
.map-locate:hover { color: var(--green-dark); background: var(--bg-alt); }
.map-locate.is-loading { color: var(--green-dark); }
.map-locate.is-loading svg { animation: spin 1s linear infinite; }
[data-theme="dark"] .map-locate { color: #e8eefc; }

/* Popups de la carte (fond blanc imposé par Leaflet → texte sombre) */
.map-popup { display: grid; gap: .2rem; min-width: 150px; }
.map-popup__head {
  display: flex; align-items: center; gap: .45rem;
  font-family: var(--font-heading);
  font-weight: 700; font-size: .87rem; color: #0A1F44;
}
.map-popup__dot {
  width: 9px; height: 9px; flex: none;
  border-radius: 50%;
  background: var(--dot, #00C48C);
}
.map-popup__addr { font-size: .78rem; line-height: 1.4; color: #4A5568; }

/* Bouton « Ma position » dans le champ Adresse de départ */
.field-locate {
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .34rem .62rem;
  border: 1px solid color-mix(in srgb, var(--green) 45%, var(--border));
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--green) 10%, var(--surface));
  color: var(--green-dark);
  font: inherit; font-size: .73rem; font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  z-index: 3;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.field-locate:hover { background: color-mix(in srgb, var(--green) 20%, var(--surface)); border-color: var(--green); }
.field-locate svg { width: 14px; height: 14px; }
.field-locate.is-loading svg { animation: spin 1s linear infinite; }
[data-theme="dark"] .field-locate { color: var(--green); }
.field-icon:has(.field-locate) .input { padding-right: 124px; }

/* Pastilles D / A devant les libellés d'adresse (rappel des repères carte) */
.field-mark {
  display: inline-grid;
  place-items: center;
  width: 17px; height: 17px;
  margin-right: .38rem;
  border-radius: 50%;
  font-family: var(--font-heading);
  font-size: .67rem;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  vertical-align: -3px;
}
.field-mark--start { background: var(--green); color: var(--accent-contrast); }
.field-mark--end { background: var(--navy); color: #fff; }
.field-icon--start svg { color: var(--green-dark); }
.field-icon--end svg { color: var(--navy); }
[data-theme="dark"] .field-icon--end svg { color: #8FB4FF; }
[data-theme="dark"] .field-mark--end { background: #24467f; }

@media (max-width: 640px) {
  .field-locate span { display: none; }
  .field-locate { padding: .34rem .5rem; }
  .field-icon:has(.field-locate) .input { padding-right: 52px; }
}

/* ---------- 34. Sélecteur de fond de plan ---------------------------------- */
.map-layers {
  position: relative;
  font-family: var(--font-body);
}
.map-layers__btn {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: var(--surface);
  color: var(--navy);
  cursor: pointer;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.map-layers__btn svg { width: 19px; height: 19px; }
.map-layers__btn:hover { color: var(--green-dark); background: var(--bg-alt); }
[data-theme="dark"] .map-layers__btn { color: #e8eefc; }

.map-layers__panel {
  position: absolute;
  top: 0; left: calc(100% + 7px);
  display: none;
  min-width: 148px;
  padding: .3rem;
  border-radius: 9px;
  background: var(--surface);
  box-shadow: var(--shadow);
  z-index: 900;
}
.map-layers.is-open .map-layers__panel { display: block; }
.map-layers__item {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .42rem .55rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.map-layers__item:hover { background: var(--bg-alt); }
.map-layers__item.is-active { color: var(--green-dark); background: color-mix(in srgb, var(--green) 12%, transparent); }
[data-theme="dark"] .map-layers__item.is-active { color: var(--green); }
.map-layers__swatch {
  width: 15px; height: 15px; flex: none;
  border-radius: 4px;
  border: 1px solid rgba(10, 31, 68, .18);
}
.map-layers__swatch--plan { background: linear-gradient(135deg, #fdf6e8 0 55%, #f0a860 55% 100%); }
.map-layers__swatch--detailed { background: linear-gradient(135deg, #f7f1e3 0 45%, #b8d8a0 45% 70%, #7fb3e0 70% 100%); }
.map-layers__swatch--satellite { background: linear-gradient(135deg, #4b5a3a 0 50%, #2f4a2a 50% 100%); }
.map-layers__swatch--relief { background: linear-gradient(135deg, #efe7d8 0 50%, #c9b89a 50% 100%); }

/* Thème sombre : on assombrit les tuiles vectorielles (jamais le satellite) */
.map-tiles-dark .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) saturate(.75) brightness(.92) contrast(1.05);
}

/* ---------- 35. Visionneuse d'image (zoom au clic) ------------------------- */
[data-zoom] { cursor: zoom-in; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(4, 12, 26, .92);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s var(--ease), visibility .22s var(--ease);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
/* Empêche la page de défiler derrière la visionneuse. */
body.lightbox-locked { overflow: hidden; }

.lightbox__inner {
  margin: 0;
  display: grid;
  place-items: center;
  gap: .9rem;
  transform: scale(.94);
  transition: transform .28s var(--ease);
}
.lightbox.is-open .lightbox__inner { transform: scale(1); }
.lightbox__img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 9rem);
  border-radius: var(--radius);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  background: #fff;
}
@supports (height: 100dvh) {
  .lightbox__img { max-height: calc(100dvh - 9rem); }
}
.lightbox__cap {
  max-width: 62ch;
  text-align: center;
  font-size: .86rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .84);
}
.lightbox__close {
  position: absolute;
  top: clamp(.8rem, 3vw, 1.6rem);
  right: clamp(.8rem, 3vw, 1.6rem);
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  background: rgba(6, 18, 36, .6);
  color: #fff;
  cursor: pointer;
}
.lightbox__close:hover { background: rgba(0, 196, 140, .3); }
.lightbox__close svg { width: 20px; height: 20px; }

/* Flèches de la visionneuse. Elles ne servent QUE si l'image ouverte fait
   partie d'un groupe (les photos du véhicule, « data-zoom-group ») : un bandeau
   de marque ouvert seul n'en affiche aucune. C'est js/main.js qui les masque,
   en posant l'attribut « hidden » — inutile d'ajouter une classe d'état. */
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  background: rgba(6, 18, 36, .6);
  color: #fff;
  cursor: pointer;
  transition: background .2s ease, opacity .2s ease;
}
.lightbox__nav[hidden] { display: none; }
.lightbox__nav--prev { left: clamp(.6rem, 2.5vw, 2rem); }
.lightbox__nav--next { right: clamp(.6rem, 2.5vw, 2rem); }
/* La même icône que la flèche « suivant » : on la retourne pour « précédent ». */
.lightbox__nav--prev svg { transform: scaleX(-1); }
.lightbox__nav:hover:not([disabled]) { background: rgba(0, 196, 140, .3); }
.lightbox__nav:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.lightbox__nav[disabled] { opacity: .28; cursor: default; }
.lightbox__nav svg { width: 22px; height: 22px; }

/* « 3 / 6 » : situe la photo dans la série. Chiffres tabulaires pour que le
   compteur ne tressaute pas en passant de 9 à 10. */
.lightbox__compteur {
  font-size: .78rem;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .62);
  font-variant-numeric: tabular-nums;
}
.lightbox__compteur[hidden] { display: none; }

/* ---------- 36. Bloc marque (blog / contact) ------------------------------- */
.brand-showcase {
  margin: 0;
  padding: clamp(1.2rem, 3vw, 2rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  text-align: center;
}
/* Deux visuels côte à côte sur grand écran, empilés sur mobile.
   `align-items: start` : chaque carte se cale sur la hauteur réelle de son
   visuel, sans bande blanche résiduelle sous le plus petit des deux. */
.brand-showcase__grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: clamp(1rem, 2.5vw, 1.6rem);
  margin-top: clamp(1.2rem, 3vw, 2rem);
}
@media (min-width: 900px) {
  .brand-showcase__grid { grid-template-columns: 1fr 1fr; }
}
/* Le déclencheur du zoom : un vrai <button> (accessible au clavier). */
.brand-showcase__zoom {
  position: relative;
  display: block;
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: none;
  font: inherit;
  overflow: hidden;
  cursor: zoom-in;
}
.brand-showcase__img {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  border-radius: var(--radius);
  transition: transform .35s var(--ease);
}
.brand-showcase__zoom:hover .brand-showcase__img,
.brand-showcase__zoom:focus-visible .brand-showcase__img { transform: scale(1.035); }
.brand-showcase__zoom:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.brand-showcase figcaption {
  margin-top: 1rem;
  font-size: .82rem;
  color: var(--text-muted);
}
.brand-showcase__hint {
  position: absolute;
  left: 50%;
  bottom: .7rem;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .7rem;
  border-radius: var(--radius-pill);
  background: rgba(4, 12, 26, .72);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}
.brand-showcase__zoom:hover .brand-showcase__hint,
.brand-showcase__zoom:focus-visible .brand-showcase__hint { opacity: 1; }
.brand-showcase__hint svg { width: 13px; height: 13px; }
@media (hover: none) {
  /* Écrans tactiles : pas de survol, on montre l'indication en permanence. */
  .brand-showcase__hint { opacity: 1; }
}

/* Bandeau de marque (page à propos) */
.brand-banner {
  display: block;
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

/* ---------- 37. Bouton « Inverser » (départ / arrivée) --------------------- */
.form-swap {
  display: flex;
  justify-content: center;
  margin-top: .9rem;
}
.btn-swap {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.btn-swap:hover { border-color: var(--green); color: var(--green-dark); background: color-mix(in srgb, var(--green) 8%, var(--bg)); }
.btn-swap:active { transform: scale(.97); }
.btn-swap svg { width: 16px; height: 16px; }
.btn-swap.is-spun svg { animation: swap-spin .5s var(--ease); }
@keyframes swap-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(180deg); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-swap.is-spun svg { animation: none; }
}

/* Pastilles D / A → remplacées par les icônes épingle / drapeau, comme sur
   Google Maps ; on garde la classe pour la compatibilité d'affichage. */
.field-mark { display: none; }

/* ---------- 38. Adresses vérifiées & confirmation avant facturation -------- */

/* 38.1 Bandeau d'état affiché sous un champ d'adresse ----------------------- */
.field-status {
  display: none;
  align-items: flex-start;
  gap: .4rem;
  margin-top: .4rem;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.35;
}
.field-status.is-ok,
.field-status.is-warn { display: flex; }
.field-status svg { width: 14px; height: 14px; flex: none; margin-top: .13rem; }
.field-status.is-ok { color: var(--green-dark); }
.field-status.is-warn { color: #a86300; }
[data-theme="dark"] .field-status.is-warn { color: var(--amber); }

/* Le champ lui-même prend une teinte d'état.
   :where() annule la spécificité pour que :focus et [aria-invalid] restent
   prioritaires — sinon le vert « vérifié » masquerait l'anneau de focus. */
.input:where(.is-verified) { border-color: var(--green); }
.input:where(.is-unverified) { border-color: var(--amber); }

/* 38.2 Bloc « adresses vérifiées » (étape 5) -------------------------------- */
.verify-box {
  border: 1.5px solid color-mix(in srgb, var(--green) 38%, var(--border));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--green) 6%, var(--surface));
  padding: 1rem 1.1rem;
}
.verify-box__head {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  font-family: var(--font-heading);
  font-size: .95rem;
  color: var(--green-dark);
}
[data-theme="dark"] .verify-box__head { color: var(--green); }
.verify-box__head svg { width: 18px; height: 18px; flex: none; }
.verify-box__tag {
  margin-left: auto;
  padding: .18rem .6rem;
  border-radius: var(--radius-pill);
  background: var(--green);
  color: var(--accent-contrast);
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.verify-box__tag.is-warn { background: var(--amber); color: #2b1a00; }
.verify-box__list {
  list-style: none;
  margin: .85rem 0 0;
  padding: 0;
  display: grid;
  gap: .55rem;
}
.verify-box__list li { display: flex; align-items: flex-start; gap: .6rem; }
.verify-box__dot {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
}
.verify-box__dot svg { width: 14px; height: 14px; }
.verify-box__dot--start { background: var(--green); }
.verify-box__dot--end { background: var(--navy); }
[data-theme="dark"] .verify-box__dot--end { background: var(--navy-700); }
.verify-box__text { display: flex; flex-direction: column; min-width: 0; }
.verify-box__kind {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.verify-box__text b { font-weight: 600; font-size: .9rem; overflow-wrap: anywhere; }
.verify-box__note {
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  margin-top: .85rem;
  padding-top: .75rem;
  border-top: 1px dashed color-mix(in srgb, var(--green) 34%, var(--border));
  font-size: .78rem;
  line-height: 1.45;
  color: var(--text-muted);
}
.verify-box__note svg { width: 15px; height: 15px; flex: none; margin-top: .1rem; color: var(--green-dark); }

/* 38.3 Étape « confirmation par e-mail » ----------------------------------- */
.confirm-box {
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-alt);
  padding: 1rem 1.1rem;
}
.confirm-box__head {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-heading);
  font-size: .95rem;
}
.confirm-box__num,
.pay-step-head__num {
  flex: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-heading);
  font-size: .78rem;
  font-weight: 800;
}
[data-theme="dark"] .confirm-box__num,
[data-theme="dark"] .pay-step-head__num { background: var(--navy-700); }
.confirm-box__text {
  margin: .6rem 0 .9rem;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--text-muted);
}
.confirm-box__text b { color: var(--text); }
.confirm-box__status {
  margin-top: .7rem;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.4;
}
.confirm-box__status:empty { display: none; }
.confirm-box__status.is-ok { color: var(--green-dark); }
.confirm-box__status.is-err { color: var(--red); }
.confirm-box.is-done { border-color: var(--green); background: color-mix(in srgb, var(--green) 7%, var(--bg-alt)); }

/* 38.4 Titre de l'étape paiement + rappel de verrouillage ------------------ */
.pay-step-head {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-heading);
  font-size: .95rem;
  margin-bottom: .7rem;
}
.pay-lock {
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  margin-top: .7rem;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.4;
  color: #a86300;
}
[data-theme="dark"] .pay-lock { color: var(--amber); }
.pay-lock svg { width: 14px; height: 14px; flex: none; margin-top: .1rem; }
.pay-lock.is-ok { color: var(--green-dark); }
[data-theme="dark"] .pay-lock.is-ok { color: var(--green); }

/* Bouton d'action désactivé (paiement en attente de confirmation) */
.btn[disabled], .btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  filter: grayscale(.35);
}
.btn[disabled]:hover, .btn:disabled:hover { transform: none; box-shadow: none; }

/* Le badge « exemple » se colle à droite de l'en-tête de confirmation */
.confirm-box__head .pay-simulated { margin-left: auto; }

/* 38.5 Option « Éditer ma facture » (facultative, décochée par défaut) ------ */
label.invoice-opt {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: .9rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-alt);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
label.invoice-opt:hover { border-color: var(--navy-700); }
label.invoice-opt:has(input:checked) {
  border-color: var(--navy);
  background: color-mix(in srgb, var(--navy) 5%, var(--bg-alt));
}
label.invoice-opt:has(input:focus-visible) {
  outline: 3px solid color-mix(in srgb, var(--green) 45%, transparent);
  outline-offset: 2px;
}
.invoice-opt__icon {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: none;
  border-radius: 11px;
  background: rgba(10, 31, 68, .08);
}
[data-theme="dark"] .invoice-opt__icon { background: rgba(255, 255, 255, .1); }
.invoice-opt__icon svg { width: 20px; height: 20px; color: var(--navy); }
[data-theme="dark"] .invoice-opt__icon svg { color: var(--text); }
.invoice-opt__body { display: grid; gap: .15rem; }
.invoice-opt__body b { font-family: var(--font-heading); font-size: .93rem; }
.invoice-opt__body span { font-size: .8rem; color: var(--text-muted); line-height: 1.45; }
.invoice-opt__tag {
  margin-left: auto;
  align-self: center;
  padding: .3rem .7rem;
  border-radius: var(--radius-pill);
  background: var(--gray-200);
  color: var(--gray-600);
  font-size: .72rem;
  font-weight: 800;
  white-space: nowrap;
}
.invoice-opt__tag.is-on { background: var(--navy); color: #fff; }
[data-theme="dark"] .invoice-opt__tag { background: rgba(255, 255, 255, .12); color: var(--text-muted); }
[data-theme="dark"] .invoice-opt__tag.is-on { background: var(--green); color: var(--accent-contrast); }

.invoice-fields {
  margin-top: .8rem;
  padding: .9rem 1rem 1rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}
.invoice-fields[hidden] { display: none; }
.invoice-note {
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  margin-top: .8rem;
  font-size: .76rem;
  line-height: 1.45;
  color: var(--text-muted);
}
.invoice-note svg { width: 14px; height: 14px; flex: none; margin-top: .1rem; color: var(--navy); }
[data-theme="dark"] .invoice-note svg { color: var(--green); }

/* Lien « voir un exemple de facture » (exemple) */
.invoice-preview-link { margin-top: .9rem; font-size: .8rem; }
.invoice-preview-link a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
  color: var(--navy);
}
.invoice-preview-link svg { width: 15px; height: 15px; flex: none; }
.invoice-preview-link a:hover { color: var(--green-dark); }
.invoice-preview-link__tag {
  display: inline-block;
  padding: .05rem .45rem;
  background: #fff8e6;
  border: 1px solid #f0d089;
  border-radius: 999px;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: #8a5c00;
}
[data-theme="dark"] .invoice-preview-link a { color: var(--green); }
[data-theme="dark"] .invoice-preview-link a:hover { color: #fff; }
[data-theme="dark"] .invoice-preview-link__tag {
  background: rgba(224, 163, 24, .16);
  border-color: rgba(224, 163, 24, .45);
  color: #f0c469;
}

@media (max-width: 620px) {
  /* Sur écran étroit, le libellé d'état passe sous le texte au lieu de serrer */
  label.invoice-opt { flex-wrap: wrap; }
  .invoice-opt__tag { margin-left: 3.4rem; }
  .child-seat__count { margin-left: 3.4rem; }
}

/* ---------- 39. Facture (document A4) -------------------------------------- */

/* Le document est TOUJOURS sur fond blanc, même en thème sombre : une facture
   imprimée doit rester lisible telle quelle. On n'utilise donc pas les jetons
   de thème à l'intérieur de .inv. */
/* Palette calquee sur le modele facture-FAC-2026-0002.pdf (releve au pixel
   par PyMuPDF) : bandeau #FFC93C, navy #0A1F44, vert #00C48C, gris #6B7280. */
.inv {
  --inv-ink: #1A1A1A;
  --inv-muted: #6B7280;
  --inv-line: #D8DDE3;
  --inv-soft: #F5F7FA;
  --inv-zebra: #FBFCFD;
  --inv-navy: #0A1F44;
  --inv-green: #00C48C;
  --inv-amber: #FFC93C;
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 0 clamp(1.1rem, 3vw, 2rem);
  overflow: hidden;
  background: #fff;
  color: var(--inv-ink);
  border: 1px solid var(--inv-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-family: var(--font-body);
  font-size: .88rem;
  line-height: 1.5;
}
/* Padding lateral porte par les sections : le bandeau jaune doit, lui,
   toucher les deux bords de la page (comme sur le modele). */
.inv > header,
.inv > section,
.inv > footer,
.inv > table,
.inv > .inv__test { padding-left: clamp(1.1rem, 3vw, 2.2rem); padding-right: clamp(1.1rem, 3vw, 2.2rem); }

/* 39.0 exemple — facture d'aperçu (aucune valeur comptable) */
.inv--test { border-color: #e6b64c; }

.inv__test {
  margin-bottom: 1.15rem;
  padding: .8rem 1rem;
  background: #fff8e6;
  border: 1px solid #f0d089;
  border-left: 4px solid #e0a318;
  border-radius: 8px;
  color: #6b4a05;
  font-size: .8rem;
  line-height: 1.45;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.inv__test > b {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .25rem;
  font-family: var(--font-heading);
  letter-spacing: .05em;
  color: #8a5c00;
}
.inv__test > b svg { width: 16px; height: 16px; flex: none; }
.inv__test > span { display: block; }
/* Les <b> du corps du texte restent en ligne (sinon chaque emphase passe a la
   ligne) — selecteur enfant direct ci-dessus, jamais un descendant. */
.inv__test > span b { display: inline; font-weight: 700; }

.inv__watermark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.inv__watermark span {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(3.4rem, 17vw, 9.5rem);
  letter-spacing: .14em;
  color: #e0a318;
  opacity: .1;
  transform: rotate(-24deg);
  white-space: nowrap;
}
.inv__title h1 em {
  display: block;
  font-style: normal;
  font-size: .6em;
  letter-spacing: .05em;
  color: #b8860b;
}

/* 39.1 En-tête : identité vendeur + identification du document */
.inv__head {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: .9rem 1.4rem;
  align-items: start;
  padding-bottom: 1.1rem;
  border-bottom: 0;
}
/* .inv__brand / .inv__brandmeta : conserves mais plus utilises — l'identite du
   vendeur n'est plus repetee dans l'en-tete (doublon signale le 2026-10-04),
   elle figure une seule fois dans le bloc PRESTATAIRE. */
.inv__brand { display: flex; flex-direction: column; gap: .7rem; }
.inv__logo { width: 100%; max-width: 250px; height: auto; display: block; }
/* Logo de la facture : le favicon est un CARRE jaune « VTC / VTC-63 ».
   Sans cette borne il occuperait 250 x 250 px et écraserait l'en-tête A4. */
.inv__logo--icon { max-width: 92px; border-radius: 12px; }

/* 39.1b Bandeau d'en-tête : bande jaune #FFC93C pleine largeur, liseré navy
   de 4 px en sous-face, puis l'identité à gauche et les coordonnées à droite.
   Le bloc est en saignée (padding horizontal annulé) pour que le jaune
   atteigne les bords du document, exactement comme le modèle. */
/* Bandeau jaune #FFC93C (RGB 1.000 0.788 0.235 du modèle), 66 pt de haut sur
   une page A4, souligné d'un liseré navy #0A1F44 de 3 pt. Le bloc est en
   saignée (padding horizontal annulé) pour que le jaune atteigne les bords. */
.inv__band {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.2rem;
  margin: 0 calc(-1 * clamp(1.1rem, 3vw, 2.2rem)) 1.35rem;
  padding: 1.1rem clamp(1.1rem, 3vw, 2.2rem) 1rem;
  background: var(--inv-amber);
  border-bottom: 3px solid var(--inv-navy);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.inv__band-id { display: flex; flex-direction: column; gap: .12rem; }
.inv__band-name {
  font-family: var(--font-heading);
  font-size: clamp(1.15rem, 2.9vw, 1.6rem);
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.05;
  color: var(--inv-navy);
  word-break: break-word;
}
/* Ligne 1 : navy ; ligne 2 : brun doré #4D3D0F — comme sur le modèle. */
.inv__band-tag { font-size: .75rem; color: var(--inv-navy); line-height: 1.45; }
.inv__band-tag i { font-style: normal; color: #4D3D0F; }
.inv__band-meta {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  text-align: right;
  font-size: .76rem;
  line-height: 1.55;
  color: var(--inv-navy);
  white-space: nowrap;
}
.inv__band-meta b { font-size: .92rem; font-weight: 700; }
.inv__band-meta span:last-child { color: #4D3D0F; }
/* Le bandeau-image est conserve en repli si aucun bloc d'identite n'est fourni. */
.inv__logo--banner { max-width: 100%; width: 100%; border-radius: 0; display: block; }
.inv__brandmeta { display: grid; gap: .05rem; font-size: .78rem; color: var(--inv-muted); }
.inv__brandmeta b { color: var(--inv-ink); font-size: .86rem; }

/* Titre « FACTURE » (navy, à gauche) + tableau d'identification (à droite) */
.inv__title { grid-column: 1; align-self: start; }
.inv__title h1 {
  font-family: var(--font-heading);
  font-size: clamp(1.7rem, 4.4vw, 2.35rem);
  font-weight: 800;
  letter-spacing: .015em;
  line-height: 1;
  color: var(--inv-navy);
  margin: 0 0 .3rem;
}
.inv__title span {
  display: block;
  font-size: .82rem;
  color: var(--inv-muted);
  letter-spacing: .01em;
}
.inv__id { width: 100%; border-collapse: collapse; font-size: .8rem; grid-column: 2; align-self: start; }
.inv__id th,
.inv__id td { padding: .22rem 0; text-align: right; vertical-align: top; }
.inv__id th { color: var(--inv-muted); font-weight: 500; padding-right: .7rem; white-space: nowrap; }
.inv__id td { color: var(--inv-navy); }
.inv__id td b { font-weight: 800; }

/* 39.2 Blocs Prestataire / Client — pas d'encadré : un simple libellé vert
   souligné d'un filet, comme sur le modèle. */
.inv__parties {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: .2rem;
}
.inv__party { padding: 0; background: none; border-radius: 0; }
/* Personne ayant reserve, quand la facture est au nom d'une societe. */
.inv__contact { color: var(--inv-muted); }
.inv__party h2 {
  font-family: var(--font-heading);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--inv-green);
  margin: 0 0 .45rem;
  padding-bottom: .38rem;
  border-bottom: 1px solid var(--inv-line);
}
.inv__party p { font-size: .82rem; margin: 0; line-height: 1.55; }
.inv__party b { color: var(--inv-navy); font-weight: 800; }

/* 39.3 Tableau des prestations */
.inv__table {
  width: calc(100% - 2 * clamp(1.1rem, 3vw, 2.2rem));
  margin: 1.35rem clamp(1.1rem, 3vw, 2.2rem) 0;
  border-collapse: collapse;
  font-size: .82rem;
}
.inv__table thead th {
  background: var(--inv-navy);
  color: #fff;
  font-family: var(--font-heading);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-align: left;
  padding: .5rem .7rem;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.inv__table thead th:first-child { border-radius: 0; }
.inv__table thead th:last-child { border-radius: 0; text-align: right; }
.inv__table td {
  padding: .55rem .7rem;
  border-bottom: 1px solid var(--inv-line);
  vertical-align: top;
}
.inv__c-qty { width: 3.4rem; text-align: center; }
.inv__c-pu { width: 7.5rem; text-align: right; white-space: nowrap; }
.inv__c-tot { width: 7.5rem; text-align: right; white-space: nowrap; font-weight: 700; color: var(--inv-navy); }
.inv__table thead th.inv__c-qty { text-align: center; }
.inv__table thead th.inv__c-pu { text-align: right; }
.inv__lbl { display: block; font-weight: 700; color: var(--inv-navy); }
.inv__det { display: block; margin-top: .1rem; font-size: .72rem; color: var(--inv-muted); }

/* Ligne de contexte : le trajet concerné (bandeau gris clair pleine largeur) */
.inv__triprow td {
  background: var(--inv-soft);
  border-bottom: 1px solid var(--inv-line);
  padding-top: .65rem;
  padding-bottom: .6rem;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.inv__trip { display: block; font-size: .84rem; color: var(--inv-navy); }
.inv__trip b { font-weight: 700; }
.inv__trip i { color: var(--inv-green); font-style: normal; font-weight: 700; }
.inv__tripmeta {
  display: block;
  margin-top: .22rem;
  padding-top: .22rem;
  border-top: 1px solid var(--inv-line);
  font-size: .74rem;
  color: var(--inv-muted);
}

/* 39.4 Totaux — filet vert de séparation, puis note TVA à gauche et tableau
   des totaux aligné à droite, exactement comme sur le modèle. */
.inv__totals {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem 1.5rem;
  align-items: start;
  margin-top: 1.15rem;
  border-top: 3px solid var(--inv-green);
  padding-top: 1rem;
}
.inv__tot-col { align-self: start; padding-top: .1rem; }
.inv__tot { border-collapse: collapse; min-width: 17.5rem; }
.inv__tot th,
.inv__tot td { padding: .38rem .8rem; font-size: .84rem; }
.inv__tot th { text-align: left; color: var(--inv-muted); font-weight: 500; }
.inv__tot td { text-align: right; white-space: nowrap; color: var(--inv-ink); }
/* Le modèle ne sépare que Total HT / TVA : la barre « Net à payer » est
   franchement détachée juste en dessous. */
.inv__tot tr + tr:not(.inv__tot--net) th,
.inv__tot tr + tr:not(.inv__tot--net) td { border-top: 1px solid var(--inv-line); }
/* La barre « Net à payer » occupe toute la largeur du tableau et écarte le
   libellé du montant, comme sur le modèle. */
.inv__tot--net th,
.inv__tot--net td {
  background: var(--inv-navy);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .95rem;
  border-top: 0;
  padding-top: .55rem;
  padding-bottom: .55rem;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.inv__tot--net th { width: 11.5rem; }
.inv__tot--net td { padding-right: 1.4rem; }
.inv__tot--net td { color: var(--inv-amber); font-weight: 800; }
/* Arrondi aux seules extremites : avec un rayon sur CHAQUE cellule, la barre
   « Net a payer » se coupait en deux (defaut visible sur le PDF imprime). */
.inv__tot--net th { border-radius: 4px 0 0 4px; }
.inv__tot--net td { border-radius: 0 4px 4px 0; }
.inv__vatnote { font-size: .72rem; color: var(--inv-muted); font-style: normal; margin: 0; line-height: 1.5; max-width: 22rem; }

/* 39.5 Règlement */
.inv__pay { margin-top: 1.5rem; }
.inv__pay h2 {
  font-family: var(--font-heading);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--inv-green);
  margin: 0 0 .45rem;
  padding-bottom: .38rem;
  border-bottom: 1px solid var(--inv-line);
}
.inv__pay p { font-size: .82rem; margin: 0; line-height: 1.55; }
.inv__pay-state { margin-bottom: .2rem !important; }
.inv__pay-line { color: var(--inv-ink); }
.inv__pay-confirm { margin-top: .15rem !important; color: var(--inv-muted); }
/* Pastille d'état : saumon neutre quand le règlement est en attente, sinon
   elle reprend le libellé déjà écrit dans .inv__pay-line (elle ne le duplique
   pas visuellement en gras, elle l'accompagne). */
.inv__state {
  display: inline-block;
  padding: .16rem .6rem;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.inv__state--cb { background: #e8f8f1; color: #04785a; }
.inv__state--especes { background: #fff5d6; color: #8a5c00; }
.inv__state--attente { background: #f0f2f6; color: #5b6779; }

/* 39.6 Mentions légales */
.inv__foot {
  margin-top: 1.5rem;
  padding-top: .9rem;
  border-top: 1px solid var(--inv-line);
  font-size: .72rem;
  color: var(--inv-muted);
  line-height: 1.55;
}
.inv__foot p { margin-bottom: .5rem; }
.inv__foot b { color: var(--inv-ink); font-weight: 700; }
.inv__legal { font-size: .68rem; letter-spacing: .02em; }

/* Filigrane facture annulée */
.inv__void {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 9vw, 5rem);
  font-weight: 800;
  letter-spacing: .12em;
  color: rgba(230, 57, 70, .16);
  transform: rotate(-18deg);
  pointer-events: none;
}

.inv__empty {
  padding: 2rem;
  text-align: center;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}

/* 39.7 Barre d'outils et recherche (écran uniquement) */
.inv-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.2rem;
  padding: .85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.inv-toolbar__info { display: flex; align-items: center; gap: .7rem; }
.inv-toolbar__info svg { width: 24px; height: 24px; color: var(--green-dark); flex: none; }
.inv-toolbar__info b { display: block; font-family: var(--font-heading); font-size: .95rem; }
.inv-toolbar__info span { display: block; font-size: .78rem; color: var(--text-muted); }
.inv-toolbar__actions { display: flex; gap: .6rem; flex-wrap: wrap; }

.inv-lookup { max-width: 620px; margin: 0 auto 1.5rem; }
.inv-lookup__form { display: flex; gap: .7rem; align-items: flex-start; flex-wrap: wrap; }
.inv-lookup__form .field { flex: 1 1 240px; margin: 0; }
.inv-lookup__demo {
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px dashed var(--border);
  font-size: .85rem;
  color: var(--text-muted);
}
.inv-lookup__demo a { font-weight: 600; }
.inv-lookup__demo-tag {
  display: inline-block;
  margin-left: .3rem;
  padding: .05rem .45rem;
  background: #fff8e6;
  border: 1px solid #f0d089;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: #8a5c00;
  vertical-align: 1px;
}

/* Bandeau « exemple » au-dessus du document */
.inv-demo-banner {
  max-width: 900px;
  margin: 0 auto 1.2rem;
  border-left: 4px solid #e0a318;
  background: var(--surface);
}
.inv-demo-banner__body { display: flex; gap: .8rem; align-items: flex-start; }
.inv-demo-banner__body > svg { width: 22px; height: 22px; flex: none; color: #b8860b; margin-top: 2px; }
.inv-demo-banner__body > div > b { display: block; font-family: var(--font-heading); margin-bottom: .2rem; }
.inv-demo-banner__body p { margin: 0; font-size: .85rem; color: var(--text-muted); line-height: 1.55; }
/* Les <b> a l'interieur du paragraphe restent en ligne. */
.inv-demo-banner__body p b { display: inline; }
.inv-demo-banner__back { margin-top: .5rem !important; }
.inv-demo-banner__back a { font-weight: 600; }

.inv-wrap { margin-bottom: 2rem; }

@media (max-width: 760px) {
  .inv__head { grid-template-columns: 1fr; }
  .inv__title { text-align: left; }
  .inv__id th, .inv__id td { text-align: left; }
  .inv__parties { grid-template-columns: 1fr; }
  .inv__totals { grid-template-columns: 1fr; }
  .inv__tot { min-width: 0; width: 100%; }
}
@media (max-width: 560px) {
  /* Quantité toujours égale à 1 : masquer la colonne « Prix unitaire »
     revient au même et libère la largeur pour la désignation. */
  .inv__c-pu { display: none; }
  .inv__c-qty { width: 2.6rem; }
  .inv__c-tot { width: 6rem; }
  .inv { padding: .9rem; font-size: .82rem; }
}

/* 39.8 Impression : ne sortir que la facture, au format A4 */
/* Marges papier reduites de 12 a 8 mm (demande du 2026-10-04 : « reduire les
   marges »). 8 mm reste au-dessus du minimum physique de la plupart des
   imprimantes (≈ 5 mm). Le §51 ci-dessous resserre le contenu lui-meme. */
@page { size: A4; margin: 8mm; }

@media print {
  html, body { background: #fff !important; }
  .site-header, .site-footer, .call-fab, .skip-link,
  .page-hero, .inv-hero, .no-print, #inv-lookup, .inv-toolbar { display: none !important; }

  .section { padding: 0 !important; }
  .section--alt { background: #fff !important; }
  .container { max-width: none !important; padding: 0 !important; }
  .inv-wrap { margin: 0 !important; }

  .inv {
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: 10.5pt;
  }
  .inv__table thead th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .inv__tot--net th, .inv__tot--net td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .inv__party, .inv__triprow td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* Le bandeau d'en-tete (logo principal) doit sortir en couleurs : navy + or. */
  .inv__logo--banner { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* On évite de couper une ligne du tableau entre deux pages */
  .inv__table tr { break-inside: avoid; page-break-inside: avoid; }
  .inv__totals, .inv__foot { break-inside: avoid; page-break-inside: avoid; }
}

/* ---------- 40. Compléments facture (tableau de bord) ---------------------- */

/* Lien vers le document de facture dans la liste des réservations */
.inv-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .78rem;
  font-weight: 700;
  color: var(--green-dark);
  text-decoration: none;
  white-space: nowrap;
}
.inv-link:hover { text-decoration: underline; }
.inv-link svg { width: 14px; height: 14px; flex: none; }
[data-theme="dark"] .inv-link { color: var(--green); }

/* Variante compacte de bouton (colonnes de tableau) */
.btn--xs {
  padding: .35rem .65rem;
  font-size: .74rem;
  border-radius: var(--radius-sm);
  gap: .3rem;
}
.btn--xs svg { width: 13px; height: 13px; }

/* Pastille d'alerte douce */
.pill--warn { background: rgba(245, 158, 11, .16); color: #8a5600; }
[data-theme="dark"] .pill--warn { color: var(--amber); }

/* ---------- 41. Confort mobile (Android & iOS) ----------------------------- */

/* 41.1 Encoches, Dynamic Island et barre d'accueil (viewport-fit=cover).
   max() garantit une marge minimale même quand la zone sûre vaut 0. */
.site-header { padding-top: env(safe-area-inset-top, 0px); }
.site-header .container {
  padding-left: max(1.1rem, env(safe-area-inset-left, 0px));
  padding-right: max(1.1rem, env(safe-area-inset-right, 0px));
}
.site-footer .container {
  padding-left: max(1.1rem, env(safe-area-inset-left, 0px));
  padding-right: max(1.1rem, env(safe-area-inset-right, 0px));
}
.call-fab {
  right: max(14px, env(safe-area-inset-right, 0px));
  bottom: max(14px, env(safe-area-inset-bottom, 0px));
}
.toast-host { bottom: max(22px, env(safe-area-inset-bottom, 0px)); }
.nav__links {
  padding-left: max(1rem, env(safe-area-inset-left, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: max(1.6rem, env(safe-area-inset-bottom, 0px));
}

/* 41.2 Plein écran : 100dvh suit la barre d'URL mobile qui se rétracte. */
@supports (height: 100dvh) {
  .hero-video.is-fullscreen .hero-video__media { height: 100dvh; }
}

/* 41.3 Aucun débordement horizontal possible */
html, body { max-width: 100%; }
img, video, canvas, iframe { max-width: 100%; height: auto; }
.summary-row dd { min-width: 0; overflow-wrap: anywhere; }
.verify-box__text b, .inv__party p, .autocomplete__main { overflow-wrap: anywhere; }

@media (max-width: 860px) {
  /* Safari iOS zoome automatiquement tout champ dont la police descend sous
     16 px : on force 16 px pour supprimer ce zoom involontaire à la saisie. */
  .input, .select, .textarea { font-size: 16px; }

  /* 41.4 Cibles tactiles : 44 px minimum (recommandation Apple / Google) */
  .btn:not(.btn--xs) { min-height: 46px; }
  .icon-btn { width: 40px; height: 40px; }
  .icon-btn svg { width: 17px; height: 17px; }
  .theme-toggle { width: 44px; height: 44px; }
  .nav__toggle { width: 44px; height: 44px; }
  .nav__link { min-height: 48px; display: flex; align-items: center; }
  .btn-swap { min-height: 44px; }
  .field-locate { min-height: 36px; }
  .brand-showcase__zoom { min-height: 44px; }
  .stepper__item { min-height: 44px; }

  /* Les champs d'adresse gardent une hauteur confortable au doigt */
  .input, .select { min-height: 48px; }

  /* 41.5 Tableaux et blocs larges : défilement interne plutôt que débordement */
  .table-wrap { -webkit-overflow-scrolling: touch; }
}

/* 41.6 Très petits écrans (320 px — iPhone SE 1re génération, Galaxy Fold) */
@media (max-width: 360px) {
  :root { --header-h: 68px; }
  .container { padding-inline: .85rem; }
  .btn { padding: .85rem 1.1rem; font-size: .9rem; }
  .nav__links { width: 88vw; }
  .hero__title { font-size: clamp(1.7rem, 8vw, 2.2rem); }
  .card { padding: 1.1rem; }
  .quickbook__card { padding: 1.1rem .9rem; }
}

/* 41.7 Mouvement réduit : on coupe les animations non essentielles */
@media (prefers-reduced-motion: reduce) {
  .nav__links, .nav-scrim, .lightbox, .lightbox__img { transition: none !important; }
  html { scroll-behavior: auto; }
}

/* 41.8 Grilles tarifaires à 4 colonnes : sous 620 px, les colonnes ne tiennent
   plus dans la largeur d'un téléphone. On rend la table défilable
   horizontalement (défilement interne) au lieu de faire déborder la page. */
@media (max-width: 620px) {
  .prose table.grid-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .prose table.grid-table th,
  .prose table.grid-table td { padding: .45rem .55rem; font-size: .8rem; }
  .prose table.grid-table small { font-size: .68rem; }
}

/* ---------- 42. Carte « service à venir » (Bientôt disponible) ------------- */

/* Un service annoncé mais non encore ouvert porte un badge « Bientôt » et un
   traitement visuel légèrement en retrait — sans être masqué pour autant. */
.card--soon { position: relative; }
.card--soon .card__icon { opacity: .72; }
.card--soon h3 { color: var(--text-muted); }
.card--soon p { opacity: .85; }

.card__badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  align-self: flex-start;
  margin-bottom: .55rem;
  padding: .28rem .68rem;
  border-radius: var(--radius-pill);
  background: rgba(245, 158, 11, .16);
  /* #a86300 ne donnait que 4,18:1 sur ce fond ambré : on descend à #8A4F00,
     soit 5,79:1 — même teinte que les pastilles de tarifs. */
  color: #8A4F00;
  font-family: var(--font-heading);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.card__badge svg { width: 12px; height: 12px; }
[data-theme="dark"] .card__badge { background: rgba(245, 158, 11, .22); color: var(--amber); }

/* Bandeau d'information « service à venir » (pages détail) */
.soon-banner {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  padding: 1rem 1.1rem;
  border: 1.5px dashed color-mix(in srgb, var(--amber) 55%, var(--border));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--amber) 8%, var(--surface));
}
.soon-banner > svg { width: 22px; height: 22px; flex: none; color: #a86300; }
[data-theme="dark"] .soon-banner > svg { color: var(--amber); }
.soon-banner b { font-family: var(--font-heading); }
.soon-banner p { margin: .2rem 0 0; font-size: .85rem; color: var(--text-muted); }

/* ---------- 43. Cartes bancaires en miniature (étape paiement) ------------- */

/* Quatre vraies cartes miniatures (puce, ondes, numéro masqué, logo) au lieu
   de simples pastilles. Ratio carte bancaire : 85,60 × 53,98 mm ≈ 1,586:1. */
.pay-brands { align-items: flex-start; }

.pay-cardmark {
  margin: 0;
  flex: 1 1 118px;
  max-width: 172px;
  min-width: 0;
  display: grid;
  gap: .45rem;
  justify-items: center;
}
.pay-cardmark__art {
  display: block;
  width: 100%;
  line-height: 0;
  border-radius: 11px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(10, 31, 68, .18), 0 1px 2px rgba(10, 31, 68, .12);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.pay-cardmark__art svg { display: block; width: 100%; height: auto; }
.pay-cardmark:hover .pay-cardmark__art,
.pay-cardmark:focus-within .pay-cardmark__art {
  transform: translateY(-3px);
  box-shadow: 0 14px 26px rgba(10, 31, 68, .26);
}
.pay-cardmark figcaption {
  font-family: var(--font-heading);
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.25;
}
[data-theme="dark"] .pay-cardmark__art { box-shadow: 0 6px 18px rgba(0, 0, 0, .5); }

@media (max-width: 620px) {
  /* Deux cartes par ligne sur téléphone */
  .pay-cardmark { flex: 1 1 calc(50% - .55rem); max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pay-cardmark__art { transition: none; }
  .pay-cardmark:hover .pay-cardmark__art { transform: none; }
}

/* ---------- 44. En-tête : correction du palier bureau 941 -> 1150 px ------- */

/* 44.1 Le rembourrage « zone sûre » défini en 41.1 ne concerne QUE le tiroir
   mobile (position:fixed). Appliqué aussi au bandeau horizontal, il gonflait
   la barre de navigation de 25,6 px et la faisait déborder de l'en-tête
   (hauteur fixe 77 px). On l'annule dès qu'on repasse en affichage bureau. */
@media (min-width: 941px) {
  .nav__links {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
  /* « À propos » se coupait sur deux lignes : un libellé de navigation ne
     doit jamais se replier. */
  .nav__link { white-space: nowrap; }
}

/* 44.2 Entre 941 px et 1150 px (petite fenêtre, tablette paysage étroite), la
   somme marque + 7 liens + téléphone + bascule dépasse la largeur disponible.
   On resserre au lieu de laisser les libellés se replier ou se chevaucher.
   Aucun contenu n'est supprimé : seuls les espacements et tailles changent. */
@media (min-width: 941px) and (max-width: 1150px) {
  .nav { gap: .5rem; }
  .brand { font-size: 1rem; gap: .5rem; }
  .brand__mark { width: 34px; height: 34px; }
  .brand__sub { font-size: .62rem; letter-spacing: .02em; }
  .nav__links { gap: 0; }
  .nav__link { padding: .5rem .5rem; font-size: .86rem; }
  .nav__phone { padding: .45rem .5rem; font-size: .86rem; gap: .35rem; }
  .nav__phone svg { width: 16px; height: 16px; }
  .theme-toggle { width: 36px; height: 36px; }
}

/* 44.3 Filet de sécurité : si un jour l'en-tête manque encore de place,
   il GRANDIT au lieu de laisser son contenu se superposer. */
@media (min-width: 941px) {
  .nav { height: auto; min-height: var(--header-h); }
}

/* 44.4 Tiroir latéral : hauteur pleine garantie.
   `.site-header` porte un `backdrop-filter`, ce qui en fait le BLOC CONTENEUR
   des descendants en position:fixed. `top:0;bottom:0` se résolvait donc sur la
   hauteur de l'en-tête (77 px) et non sur celle de l'écran : le tiroir ne
   mesurait que 76 px de haut et ses 7 liens étaient coupés (overflow-y:auto).
   On impose une hauteur de viewport explicite, indépendante du conteneur.
   Mesuré : tiroir 76 px -> 844 px, les 7 liens redeviennent visibles. */
@media (max-width: 940px) {
  .nav__links {
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    bottom: auto;
  }
}

/* ---------- 45. Confirmation par téléphone (fin de réservation) ----------- */

/* Message principal demandé par le client : à la fin de la réservation, on
   affiche le numéro à appeler, le prix et le détail du trajet (départ /
   arrivée). Le bloc est présent à l'étape 5 ET sur l'écran de succès. */
.call-confirm {
  border: 1.5px solid color-mix(in srgb, var(--green) 55%, var(--border));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--green) 8%, var(--bg-alt));
  padding: 1.1rem 1.15rem;
  text-align: left;
}

.call-confirm__head {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-heading);
  font-size: .98rem;
  line-height: 1.35;
}
.call-confirm__head b { font-weight: 800; }
.call-confirm__head span[data-phone] { white-space: nowrap; }
.call-confirm__icon {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--green);
  color: #04231a;
}
.call-confirm__icon svg { width: 19px; height: 19px; }

.call-confirm__text {
  margin: .7rem 0 .9rem;
  font-size: .86rem;
  line-height: 1.5;
  color: var(--text-muted);
}
.call-confirm__text b { color: var(--text); }

.call-confirm__trip {
  list-style: none;
  display: grid;
  gap: .55rem;
  margin: 0 0 .9rem;
}
.call-confirm__trip li { display: flex; align-items: flex-start; gap: .6rem; }
.call-confirm__dot {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
}
.call-confirm__dot svg { width: 14px; height: 14px; }
.call-confirm__dot--start { background: var(--green); }
.call-confirm__dot--end { background: var(--navy); }
[data-theme="dark"] .call-confirm__dot--end { background: var(--navy-700); }

.call-confirm__trip-text { display: flex; flex-direction: column; min-width: 0; }
.call-confirm__trip-text > span {
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.call-confirm__trip-text b {
  font-size: .9rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.call-confirm__amount {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem .85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.call-confirm__amount > span {
  font-size: .8rem;
  font-weight: 700;
  color: var(--text-muted);
}
.call-confirm__amount > b {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--green-dark);
}
[data-theme="dark"] .call-confirm__amount > b { color: var(--green); }

.call-confirm__btn { margin-top: 1rem; width: 100%; }

.call-confirm__note {
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  margin-top: .8rem;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text-muted);
}
.call-confirm__note svg {
  width: 14px;
  height: 14px;
  flex: none;
  margin-top: .12rem;
  color: var(--green-dark);
}

/* ---------- 46. Choix du mode de règlement (étape paiement) --------------- */

/* Deux options : « sur place » (disponible) et « en ligne » (bientôt).
   L'option indisponible reste affichée : rien n'est supprimé, elle est
   simplement neutralisée. */
.pay-methods { display: grid; gap: .6rem; margin-bottom: 1rem; }

.pay-method {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .85rem .9rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.pay-method input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.pay-method__icon {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--gray-100);
  color: var(--navy);
}
[data-theme="dark"] .pay-method__icon { background: var(--navy-100); color: var(--text); }
.pay-method__icon svg { width: 19px; height: 19px; }

.pay-method__body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.pay-method__body b { font-family: var(--font-heading); font-size: .92rem; }
.pay-method__body > span { font-size: .8rem; line-height: 1.4; color: var(--text-muted); }

.pay-method__tag {
  flex: none;
  align-self: center;
  margin-left: auto;
  padding: .25rem .6rem;
  border-radius: var(--radius-pill);
  background: var(--gray-100);
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}
[data-theme="dark"] .pay-method__tag { background: var(--navy-100); }
.pay-method__tag--ok { background: var(--green-light); color: var(--green-dark); }
[data-theme="dark"] .pay-method__tag--ok { background: rgba(0, 196, 140, .18); color: var(--green); }

/* Étiquette « Recommandé » du paiement en ligne : elle n'a de sens que si le
   serveur a réellement ouvert le paiement. Symétrique de .pay-soon-only. */
.pay-online-only { display: none; }
.pay-online-open .pay-online-only { display: inline-flex; }

.pay-method.is-on {
  border-color: var(--green);
  background: color-mix(in srgb, var(--green) 6%, var(--surface));
}
.pay-method.is-on .pay-method__icon { background: var(--green); color: #04231a; }

.pay-method.is-soon { opacity: .62; cursor: not-allowed; border-style: dashed; }
.pay-method.is-soon .pay-method__body b { color: var(--text-muted); }

/* Le formulaire de carte est conservé mais neutralisé : le paiement en ligne
   n'est pas encore ouvert. Aucune fonctionnalité n'est supprimée. */
.pay-online-soon {
  margin-top: .2rem;
  padding: .9rem;
  border: 1.5px dashed var(--border);
  border-radius: var(--radius);
  background: var(--bg-alt);
}
.pay-soon-note {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-bottom: .9rem;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--text-muted);
}
.pay-soon-note svg { width: 15px; height: 15px; flex: none; margin-top: .15rem; color: #a86300; }
[data-theme="dark"] .pay-soon-note svg { color: var(--amber); }
.pay-soon-note b { color: var(--text); }

.pay-card-fields {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
  opacity: .55;
}
.pay-card-fields .input { cursor: not-allowed; }

@media (max-width: 560px) {
  .pay-method { flex-wrap: wrap; }
  .pay-method__tag { align-self: flex-start; margin-left: 0; }
  .call-confirm__amount { flex-direction: column; align-items: flex-start; gap: .2rem; }
}

/* ---------- 47. Synthèse encadrée de l'étape 5 ---------------------------- */

/* Demande du client : n'afficher QUE la synthèse réduite, dans une section à
   trait — adresses courtes, distance, durée, prix et bouton d'appel. */
.trip-recap {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 1.15rem 1.2rem 1.2rem;
  box-shadow: var(--shadow-xs);
}

.trip-recap__head {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-heading);
  font-size: .95rem;
}
/* ⚠️ L'icône est injectée DANS le <i data-icon> : le SVG est un descendant,
   jamais un enfant direct — un sélecteur « > svg » ne matcherait pas. */
.trip-recap__head svg { width: 18px; height: 18px; flex: none; color: var(--green-dark); }
[data-theme="dark"] .trip-recap__head svg { color: var(--green); }

.trip-recap__tag {
  margin-left: auto;
  padding: .25rem .65rem;
  border-radius: var(--radius-pill);
  background: var(--green);
  color: var(--accent-contrast);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.trip-recap__tag.is-warn { background: var(--amber); color: #2b1a00; }

.trip-recap__stops {
  list-style: none;
  display: grid;
  gap: .7rem;
  margin: 1rem 0;
}
.trip-recap__stop { display: flex; align-items: flex-start; gap: .65rem; }
.trip-recap__dot {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
}
.trip-recap__dot svg { width: 15px; height: 15px; }
.trip-recap__dot--start { background: var(--green); }
.trip-recap__dot--end { background: var(--navy); }
[data-theme="dark"] .trip-recap__dot--end { background: var(--navy-700); }

.trip-recap__text { display: flex; flex-direction: column; min-width: 0; }
.trip-recap__kind {
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.trip-recap__text b {
  font-size: .95rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.trip-recap__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  padding: .85rem .3rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.trip-recap__metric { display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.trip-recap__metric svg { width: 17px; height: 17px; color: var(--text-muted); }
.trip-recap__metric > b {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  white-space: nowrap;
}
.trip-recap__metric > span {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.trip-recap__metric--price > b { color: var(--green-dark); }
[data-theme="dark"] .trip-recap__metric--price > b { color: var(--green); }

/* --- Minuterie d'estimation d'arrivée du chauffeur --- */
.trip-recap__eta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  margin-top: 1rem;
  padding: .9rem 1rem;
  background: linear-gradient(135deg, rgba(0,196,140,.08), rgba(0,196,140,.02));
  border: 1px solid rgba(0,196,140,.25);
  border-radius: var(--radius);
}
.trip-recap__eta-label {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  font-weight: 700;
  color: var(--green-dark);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.trip-recap__eta-label svg { width: 15px; height: 15px; }
.trip-recap__eta-timer {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1;
  letter-spacing: .05em;
}
.trip-recap__eta-note {
  font-size: .7rem;
  color: var(--text-muted);
}
.trip-recap__eta-note--unavailable {
  font-size: .85rem;
  font-weight: 700;
  color: var(--red, #e53935);
  margin-top: .3rem;
}
.trip-recap__eta--unavailable {
  border-color: rgba(229,57,53,.3);
  background: rgba(229,57,53,.06);
}
.trip-recap__eta--unavailable .trip-recap__eta-timer,
.trip-recap__eta--unavailable .trip-recap__eta-note:not(.trip-recap__eta-note--unavailable) {
  display: none;
}

.trip-recap__call { margin-top: 1.1rem; width: 100%; }

.trip-recap__note {
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  margin-top: .8rem;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text-muted);
}
.trip-recap__note svg {
  width: 14px;
  height: 14px;
  flex: none;
  margin-top: .12rem;
  color: var(--green-dark);
}

.trip-recap__details {
  margin-top: 1rem;
  padding-top: .8rem;
  border-top: 1px dashed var(--border);
}
/* Bouton « Voir le détail » de l'étape 5 : vrai bouton, visible, qui ouvre
   la modale de récapitulatif détaillé. Il ne remplace pas le <details>
   inline (conservé pour les utilisateurs avancés) mais il est l'entrée
   principale demandée par le client. */
.trip-recap__details-btn {
  margin-top: 1rem;
  width: 100%;
  justify-content: center;
}
.trip-recap__details-btn svg {
  width: 16px;
  height: 16px;
}
.trip-recap__details > summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-heading);
  font-size: .82rem;
  font-weight: 700;
  color: var(--text-muted);
}
.trip-recap__details > summary::-webkit-details-marker { display: none; }
.trip-recap__details > summary::before { content: '＋ '; font-weight: 800; }
.trip-recap__details[open] > summary::before { content: '− '; }
.trip-recap__details > summary:hover { color: var(--green-dark); }

.trip-recap__source {
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  margin-top: .8rem;
  font-size: .76rem;
  line-height: 1.45;
  color: var(--text-muted);
}
.trip-recap__source svg {
  width: 14px;
  height: 14px;
  flex: none;
  margin-top: .12rem;
  color: var(--green-dark);
}

@media (max-width: 480px) {
  .trip-recap { padding: 1rem .9rem 1.05rem; }
  .trip-recap__head { font-size: .88rem; }
  .trip-recap__metric > b { font-size: .95rem; }
}

/* ---------- 48. Pied de page : place pour le bouton d'appel flottant ------ */

/* Le bouton « Appeler » est en position:fixed (bas-droite de l'écran). Sans
   réserve d'espace, il recouvrait les liens légaux du pied de page
   (« Espace pro », « Mentions légales »…) dès que la page était défilée
   jusqu'en bas — le lien devenait incliquable. On réserve la hauteur du
   bouton (≈ 56 px) sous la dernière ligne du pied de page. */
.site-footer { padding-bottom: 5.4rem; }
@media (max-width: 720px) { .site-footer { padding-bottom: 6.2rem; } }

/* ---------- 49. « Réservation » mis en avant dans le menu (jaune) --------- */

/* Demande du 2026-10-04 : « mettre le bouton Réservation en surbrillance
   (clignotant) Jaune ». Le lien est en plus remonté en 2e position, juste après
   Accueil (fait dans le HTML des 16 pages par `_nav_reserve.py`).
   La pulsation joue sur `filter` et `box-shadow` — pas sur `background` — pour
   ne pas entrer en conflit avec les règles `:hover` de `.nav__link`. */
.nav__link--cta,
.nav__link--cta:hover,
[data-theme="dark"] .nav__link--cta,
[data-theme="dark"] .nav__link--cta:hover {
  color: var(--navy);
  background: var(--gold);
  font-weight: 700;
}
.nav__link--cta { animation: navCtaPulse 1.7s ease-in-out infinite; }
.nav__link--cta:hover { background: var(--gold-dark); }
/* ⚠️ Sur la page courante, le lien porte aussi `.is-active`, dont la règle
   sombre `[data-theme="dark"] .nav__link.is-active` (0,3,0) est plus
   spécifique que `[data-theme="dark"] .nav__link--cta` (0,2,0) : le texte
   devenait vert sur l'or, soit 1,47:1. On reprend la main sur la
   combinaison, en clair comme en sombre. */
.nav__link--cta.is-active,
.nav__link--cta.is-active:hover,
[data-theme="dark"] .nav__link--cta.is-active,
[data-theme="dark"] .nav__link--cta.is-active:hover {
  color: var(--navy);
}
/* Le soulignement vert du lien actif devient navy, lisible sur l'or. */
.nav__link--cta::after { background: var(--navy); }

@keyframes navCtaPulse {
  0%, 100% { filter: brightness(1);    box-shadow: 0 0 0 0 rgba(255, 201, 60, .80); }
  50%      { filter: brightness(1.30); box-shadow: 0 0 0 9px rgba(255, 201, 60, 0); }
}

/* Accessibilité : aucun clignotement si l'utilisateur l'a demandé au système. */
@media (prefers-reduced-motion: reduce) {
  .nav__link--cta { animation: none !important; }
}

/* Dans le tiroir mobile, le lien occupe toute la largeur : l'or devient une
   barre pleine, le texte reste navy. */
@media (max-width: 940px) {
  .nav__link--cta { background: var(--gold); }
}

/* ---------- 50. Compactage des textes et des espacements verticaux -------- */

/* Demande du 2026-10-04 : « compacter le texte et réduire l'espacement des
   zones section » là où il y a un titre + une accroche.
   AUCUN TEXTE N'EST SUPPRIMÉ : on ne resserre que les espacements et les
   interlignes. Les valeurs d'origine restent en place plus haut dans le fichier
   (§2 .section, §2 .section-head, §3 .lead, §5 .hero, §31 .page-hero) ; ce bloc
   les resserre, comme les sections §45 à §49. */

/* Sections : ~30 % de respiration en moins. */
.section { padding-block: clamp(2.4rem, 5.2vw, 4rem); }

/* Bloc « eyebrow + h2 + accroche » : marges intérieures resserrées. */
.section-head { margin-bottom: clamp(1.3rem, 3vw, 2.1rem); }
.section-head .eyebrow { margin-bottom: var(--space-2); }
.section-head p { margin-top: var(--space-3); }

/* Accroches : interligne et taille légèrement réduits. */
.lead { font-size: clamp(1rem, 1.4vw, 1.1rem); line-height: 1.55; }

/* Hero d'accueil. */
.hero { padding-block: clamp(2.2rem, 4.8vw, 3.8rem) clamp(2.4rem, 5.2vw, 4rem); }
.hero p { margin-top: var(--space-4); line-height: 1.55; }
.hero .hero__lead { font-size: 1.06rem; line-height: 1.5; }
.hero .hero__sub { font-size: .93rem; margin-top: .5rem; line-height: 1.5; }

/* Bandeau de titre des pages intérieures (mêmes titres + accroches). */
.page-hero { padding-block: clamp(1.9rem, 4.4vw, 3rem); }
.page-hero p { margin-top: var(--space-3); line-height: 1.55; }
.breadcrumb { margin-bottom: var(--space-3); }

/* ---------- 51. Impression : facture compacte sur UNE seule page A4 -------- */

/* Demande du 2026-10-04 : « le rendu imprimer la facture, on doit ajuster et
   compacter la facture en une seule page, prestatire/client a positionner cote
   a cote, et reduire les marges ».
   RIEN N'EST SUPPRIME : ce bloc ne resserre que l'impression ; l'ecran garde
   exactement la presentation precedente (§39).
   ⚠️ Ce bloc est volontairement place EN FIN DE FEUILLE, apres les requetes
   `@media (max-width: 760px)` (l. 2935). La largeur utile d'une A4 imprimee
   vaut ~733 px, donc cette requete SE DECLENCHE A L'IMPRESSION : elle empile
   Prestataire/Client, met le titre a gauche et remet la grille d'en-tete sur
   une colonne. Il faut donc la reprendre explicitement ici (d'ou les
   `!important`, qui protegent aussi d'un futur deplacement de ce bloc). */
@media print {
  /* Interlignes et corps resserres : c'est le levier principal. 9,8 pt reste
     confortable a lire (un corps de facture usuel va de 9 a 10 pt) tout en
     tenant sur une page. */
  .inv { font-size: 9.8pt; line-height: 1.34; }

  /* --- En-tete : bandeau et bloc titre/identification COTE A COTE ---------
     Le bandeau seul mesurait ~57 mm de haut (ratio 3,26:1 sur 194 mm), soit un
     cinquieme de la page. Borne a 22 mm, il laisse la colonne de droite au
     titre FACTURE et au tableau d'identification. */
  .inv__head {
    grid-template-columns: auto 1fr !important;
    gap: .55rem;
    align-items: start;
    padding-bottom: .5rem;
  }
  .inv__band { grid-column: 1 !important; margin-bottom: 0; }
  .inv__logo--banner { width: auto; max-height: 22mm; border-radius: 6px; }
  .inv__title { grid-column: 2 !important; text-align: right !important; }
  .inv__title h1 { font-size: 1.25rem; }
  .inv__title h1 em { font-size: .58em; }
  .inv__id { font-size: .72rem; grid-column: 2 !important; }
  .inv__id th, .inv__id td { text-align: right !important; padding: .05rem 0; }
  .inv__id th { padding-right: .5rem; }

  /* --- Marqueur de test : une seule ligne --- */
  .inv__test { margin-bottom: .45rem; padding: .3rem .55rem; font-size: .72rem; }
  .inv__test > b { margin-bottom: 0; }

  /* --- Prestataire / Client COTE A COTE (cf. avertissement ci-dessus) ----- */
  .inv__parties {
    grid-template-columns: 1fr 1fr !important;
    gap: .55rem;
    margin-top: .5rem;
  }
  .inv__party { padding: .5rem .6rem; border-radius: 6px; }
  .inv__party h2 { font-size: .62rem; margin-bottom: .18rem; }
  .inv__party p { font-size: .79rem; line-height: 1.32; }

  /* --- Tableau des prestations --- */
  .inv__table { margin-top: .55rem; font-size: .79rem; }
  .inv__table thead th { padding: .32rem .5rem; font-size: .67rem; }
  .inv__table td { padding: .34rem .5rem; }
  .inv__det, .inv__tripmeta { font-size: .70rem; }
  .inv__trip { font-size: .82rem; }
  .inv__c-pu, .inv__c-tot { width: 6.2rem; }

  /* --- Totaux : la grille repasse en deux colonnes (cf. 760 px) --- */
  .inv__totals { grid-template-columns: 1fr auto !important; gap: .5rem; margin-top: .5rem; }
  .inv__tot { min-width: 12.5rem !important; width: auto !important; }
  .inv__tot th, .inv__tot td { padding: .2rem .5rem; font-size: .80rem; }
  .inv__tot--net th, .inv__tot--net td { font-size: .88rem; }
  .inv__vatnote { font-size: .70rem; margin-bottom: .12rem; }

  /* --- Reglement --- */
  .inv__pay { margin-top: .5rem; }
  .inv__pay h2 { margin-bottom: .18rem; }
  .inv__pay p { font-size: .79rem; }

  /* --- Mentions legales --- */
  .inv__foot { margin-top: .5rem; padding-top: .4rem; font-size: .70rem; line-height: 1.34; }
  .inv__foot p { margin-bottom: .18rem; }
  .inv__legal { font-size: .62rem; }

  /* --- Aucune coupure au milieu d'un bloc --- */
  .inv__party, .inv__table tr, .inv__totals, .inv__pay, .inv__foot {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* ---------- 52. Titres et accroches : compaction (2026-10-04) -------------- */

/* Demande du 2026-10-04 :
   - accueil : « reduire la taille du texte titre : Votre VTC electrique a
     Clermont-Ferrand » ;
   - pages interieures (services, tarifs, contact, a propos, blog…) :
     « compacter le texte et reduire l'espacement / dimensionnement de ces
     zones section texte », avec « parfois une section encadree, parfois
     simplement une info-bulle qui se developpe au clic ».
   AUCUN TEXTE N'EST SUPPRIME : seules les tailles et les espacements changent.
   ⚠️ La taille des h1 vient de la regle globale `h1` (l. 142, jusqu'a 3,6 rem) ;
   `.hero h1` et `.page-hero h1` ne posaient que la couleur. On les borne ici. */

/* --- Accueil : titre du hero et accroches --- */
.hero h1 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
.hero .hero__lead { font-size: 1rem; line-height: 1.5; }
.hero .hero__sub { font-size: .9rem; line-height: 1.45; margin-top: .45rem; }

/* --- Pages interieures : bandeau de titre resserre --- */
.page-hero { padding-block: clamp(1.4rem, 3.2vw, 2.1rem); }
.page-hero h1 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.page-hero .breadcrumb { margin-bottom: var(--space-2); }

/* Accroche ENCADREE : le paragraphe nu devient une zone delimitee, plus
   lisible et visuellement plus compacte. S'applique aux 13 bandeaux. */
.page-hero p {
  display: inline-block;
  max-width: 74ch;
  margin-top: var(--space-3);
  padding: .7rem 1rem;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  border-left: 3px solid var(--green);
  border-radius: var(--radius-sm);
  font-size: .95rem;
  line-height: 1.5;
}

/* --- Info-bulle qui se deplie au clic (details / summary) --- */
.infobubble {
  max-width: 860px;
  margin: 0 auto 1.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.infobubble > summary {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .9rem;
  cursor: pointer;
  font-weight: 700;
  font-size: .92rem;
  color: var(--text);
  list-style: none;
}
.infobubble > summary::-webkit-details-marker { display: none; }
.infobubble > summary svg { width: 16px; height: 16px; color: var(--green); flex: none; }
/* Chevron dessine en CSS : aucun caractere ajoute, donc rien a traduire. */
.infobubble > summary::after {
  content: '';
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur) var(--ease);
}
.infobubble[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.infobubble__body {
  padding: 0 .9rem .8rem;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--text-muted);
}
/* Variante COMPACTE : info-bulles de l'espace pro (Réglages). Le panneau est
   déjà dense ; on resserre la bulle (pas de largeur maxi, marges internes
   réduites) pour qu'elle reste une note discrète et non un bloc de texte. */
.infobubble--compact {
  max-width: none;
  margin: 0 0 .5rem;
  font-size: .84rem;
}
.infobubble--compact > summary {
  padding: .45rem .7rem;
  font-size: .84rem;
  font-weight: 600;
}
.infobubble--compact > summary svg { width: 15px; height: 15px; color: var(--text-muted); }
.infobubble--compact > summary::after { width: 6px; height: 6px; }
.infobubble--compact .infobubble__body { padding: 0 .7rem .6rem; font-size: .82rem; }

/* ---------- 55. Espace pro — Dossier archives ------------------------------ */

/* En-tête du dossier : titre + compteur à gauche, actions à droite. */
.archives__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.archives__head h3 {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
}
.archives__head h3 svg { width: 18px; height: 18px; color: var(--navy-700, #0A1F44); flex: none; }
.archives__head .filters { margin: 0; }
/* Le compteur doit rester lisible même à zéro : la pastille existante est
   redimensionnée pour un usage en ligne de titre. */
#archives-count { font-size: .72rem; padding: .12rem .5rem; }
/* Ligne d'archive : fond légèrement sourd, pour marquer qu'elle n'est plus
   active (elle n'apparaît ni dans les KPIs ni dans les totaux). */
#archives-body tr td { vertical-align: middle; }
#archives-body tr.is-picked { background: #fff8e6; }
.archives__motif {
  display: inline-block;
  padding: .1rem .45rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: .7rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.archives__ref { font-family: var(--font-heading); font-weight: 700; white-space: nowrap; }
/* Référence, montant et n° de facture ne doivent jamais se couper : ce sont
   les colonnes par lesquelles on identifie un dossier. La cellule
   « Référence » porte aussi le nom du client sur une seconde ligne : c'est
   donc la RÉFÉRENCE (le <span>) qui reste insécable, pas la cellule. */
#archives-body td:nth-child(2) .archives__ref,
#archives-body td:nth-child(4),
#archives-body td:nth-child(5) { white-space: nowrap; }
/* Les colonnes « Course » (date) et « Archivé » (date + motif) se coupent
   proprement sur deux lignes : ce sont les informations les moins critiques
   à l'identification d'un dossier. */
#archives-body td:nth-child(3),
#archives-body td:nth-child(6) { white-space: normal; }
#archives-body td:nth-child(6) .archives__motif { white-space: nowrap; }
/* Colonne d'actions : les boutons se placent HORIZONTALEMENT et passent à la
   ligne suivante si la cellule est étroite — au lieu de s'empiler en colonne.
   Demande explicite : « Ouvrir » et ses voisins (Voir, Rétablir, Supprimer)
   doivent rester alignés et visibles d'un coup d'œil. */
#archives-body td:last-child {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: .3rem;
  align-items: center;
}
#archives-body td:last-child .btn { justify-content: center; white-space: nowrap; }

/* --- Fiche dépliée d'un dossier archivé (« Ouvrir ») ---------------------
   La fiche occupe toute la largeur du tableau (colspan=8) et n'a donc qu'un
   seul <td> : sans précaution, la règle « td:last-child » ci-dessus lui
   imposerait la colonne flex prévue pour les boutons d'action, et tout le
   contenu s'empilerait verticalement. On rétablit explicitement un bloc. */
#archives-body tr.archives__fiche > td {
  display: block;
  white-space: normal;
  padding: 0 0 .9rem;
  background: transparent;
  border: none;
}
.archives__fiche-box {
  margin: 0 0 .4rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--green);
  border-radius: var(--radius);
  background: var(--bg-alt);
}
.archives__fiche-titre {
  margin: 0 0 .5rem;
  font-size: .76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
}
.archives__fiche-box .summary-list { margin: 0 0 1rem; }
.archives__fiche-box .summary-list:last-of-type { margin-bottom: .2rem; }
.archives__fiche-box .admin-actions { margin-top: .9rem; }
/* Sur un écran large, les champs se lisent sur deux colonnes : la fiche est
   longue (18 lignes + le détail du prix) et une seule colonne obligerait à
   faire défiler pour voir la fin d'un dossier.
   Le seuil est passé de 900 à 1200 px : le dossier d'archives vit désormais
   dans une carte à ~deux tiers de largeur (rangée « Réglages »), donc plus
   étroite qu'avant ; sous 1200 px, deux colonnes y seraient tassées. */
@media (min-width: 1200px) {
  .archives__fiche-box .summary-list { grid-template-columns: 1fr 1fr; column-gap: 2rem; }
}

/* Le dossier d'archives doit se lire SANS défilement horizontal. On abandonne
   le mix rem/% (dont la somme n'est pas prévisible sous `table-layout: fixed`
   et provoquait ~25 px de débordement) au profit d'un <colgroup> en
   pourcentages : 4 + 14 + 12 + 10 + 17 + 13 + 30 = 100 %.
   La colonne « Actions » (30 %) est la plus large : elle doit contenir
   « Ouvrir », « Voir », « Rétablir » et « Supprimer » sur deux lignes. La
   colonne « Client » a disparu : le nom est passé SOUS la référence, pour
   que le tableau tienne dans une carte à ~deux tiers de largeur.
   Les `<col>` sont posés dans admin.html, ici on ne fixe que le style. */
#archives-wrap table.data {
  min-width: 0;
  width: 100%;
  table-layout: fixed;
  font-size: .82rem;
}
#archives-wrap table.data th,
#archives-wrap table.data td { padding: .55rem .42rem; font-size: .82rem; }
#archives-wrap table.data th { font-size: .74rem; letter-spacing: .01em; }
/* Aucune colonne descriptive ne casse : ce sont des identifiants ou des
   montants, une coupure les rendrait illisibles. */
#archives-wrap table.data td { overflow: hidden; text-overflow: ellipsis; }
/* La colonne d'actions est en flex : `overflow: hidden` rognerait les boutons,
   on le neutralise pour cette seule cellule. */
#archives-body td:last-child { overflow: visible; }

/* ============================================================================
   §53 — Page Réservation : titre du bloc « Ce qui est inclus »
   Ajouté le 2026-10-04. La liste elle-même réutilise le motif `.card__list`
   déjà employé ailleurs sur le site (icônes vertes, 16 px) : seuls le titre
   et son icône demandent un alignement propre.
   ============================================================================ */
.included-card__title {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 1rem;
}
.included-card__title svg { width: 19px; height: 19px; color: var(--green); flex: none; }

/* ---------------------------------------------------------------------------
   Champ « Numéro de vol / de train » (etape 3 de la reservation).
   ⚠️ Il n'existe AUCUNE regle globale `[data-icon] svg` sur ce site : chaque
   contexte dimensionne ses icones. Sans la regle ci-dessous, le SVG injecte
   dans le <label> s'affiche a sa taille intrinseque — enorme.
   --------------------------------------------------------------------------- */
.flight-ref__label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
}
.flight-ref__label svg { width: 17px; height: 17px; color: var(--green); flex: none; }
.flight-ref__opt { color: var(--text-muted); font-weight: 400; }

/* Le bloc est aussi lisible en thème sombre : les couleurs viennent des
   jetons (--surface / --border / --text), aucune valeur figée n'est posée. */

/* ---------------------------------------------------------------------------
   §54 — Envoi des messages du site
   --------------------------------------------------------------------------- */

/* Piège à robots du formulaire de contact.
   Volontairement SORTI de l'écran plutôt qu'en `display:none` : un champ
   réellement absent du rendu est ignoré par beaucoup de robots, alors qu'un
   champ simplement hors champ est rempli. Il reste inaccessible aux lecteurs
   d'écran grâce à aria-hidden="true" posé dans le HTML. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Variante « erreur » des encarts .alert (définis en §~1035).
   Sert quand l'API d'envoi ne répond pas : on ne fait jamais croire à un
   envoi réussi, on affiche l'échec et on propose le repli par e-mail. */
.alert--error { background: rgba(220, 38, 38, .10); color: #9b1c1c; }
.alert--error svg { color: #b91c1c; }
.alert--error div { min-width: 0; }

/* Lien de repli « écrivez-nous directement » dans l'encart d'erreur. */
[data-form-fallback] {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  overflow-wrap: anywhere;
}
[data-form-fallback]:hover { text-decoration: none; }


/* ==========================================================================
   § Disponibilité du chauffeur — vue client (reservation.html)
   Rempli par js/availability.js. Deux états seulement :
     .dispo-card--on  : un chauffeur est disponible (temps d'attente calculé) ;
     .dispo-card--off : personne — le message d'indisponibilité s'affiche.
   ========================================================================== */
.dispo-card {
  margin-top: var(--space-4);
  padding: 1rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-alt);
  display: grid;
  gap: .45rem;
}
.dispo-card__head {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}
.dispo-card__head svg { width: 18px; height: 18px; flex: none; }
.dispo-card__head b { font-size: .95rem; }
.dispo-card__head .pill { margin-left: auto; }
.dispo-card__text { margin: 0; font-size: .9rem; line-height: 1.55; }
.dispo-card__hours { margin: 0; font-size: .8rem; }

.dispo-card--on {
  border-color: rgba(0, 196, 140, .38);
  background: var(--green-light);
}
.dispo-card--on .dispo-card__head svg { color: var(--green-dark); }

.dispo-card--off {
  border-color: rgba(230, 57, 70, .30);
  background: rgba(230, 57, 70, .06);
}
.dispo-card--off .dispo-card__head svg { color: var(--red); }
.dispo-card--off .dispo-card__text { color: #9b1c1c; font-weight: 600; }

[data-theme="dark"] .dispo-card { background: var(--bg-alt); }
[data-theme="dark"] .dispo-card--on { background: rgba(0, 196, 140, .12); }
[data-theme="dark"] .dispo-card--off { background: rgba(230, 57, 70, .14); }
[data-theme="dark"] .dispo-card--off .dispo-card__text { color: #ffb3ba; }

/* ==========================================================================
   § Espace professionnel — ossature à menu latéral
   Le tableau de bord est découpé en VOLETS (.admin-panel). Un seul est
   visible à la fois ; le menu latéral bascule de l'un à l'autre sans
   rechargement. Sur mobile, le menu devient une bande horizontale.
   ========================================================================== */
.admin-layout {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

/* Le tableau de bord a besoin de LARGEUR. Ses volets portent des tableaux à
   huit colonnes, et le panneau « Réglages » aligne désormais deux volets
   côte à côte (Guide + Dossier archives). La largeur de lecture du site
   (--container : 1180 px) ne laissait que ~860 px de contenu sur un écran de
   1440 px : les colonnes s'y écrasaient et les boutons d'action tombaient
   l'un sous l'autre. L'espace pro ouvre donc sa propre largeur, sans toucher
   au reste du site. */
.admin-shell .container { max-width: 1500px; }

.admin-nav {
  position: sticky;
  top: 92px;
  display: grid;
  gap: .25rem;
  padding: .7rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-alt);
}
.admin-nav__titre {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  font-weight: 700;
  padding: .35rem .55rem;
}
.admin-nav__link {
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  padding: .6rem .7rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.admin-nav__link svg { width: 17px; height: 17px; flex: none; }
.admin-nav__link:hover { background: var(--navy-100); }
.admin-nav__link.is-on { background: var(--navy); color: #fff; }
.admin-nav__link.is-on svg { color: var(--green); }
[data-theme="dark"] .admin-nav__link:hover { background: rgba(255,255,255,.07); }
[data-theme="dark"] .admin-nav__link.is-on { background: var(--navy-700); }

.admin-content { min-width: 0; }
.admin-panel { display: none; }
.admin-panel.is-active { display: block; animation: panneau .3s var(--ease); }
@keyframes panneau {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .admin-panel.is-active { animation: none; }
}

/* --- Bandeau-image du tableau de bord ------------------------------------
   En tete du volet « Vue d'ensemble », aligne sur le titre de la page.
   L'image vient de api/admin-image.php et n'existe qu'a l'interieur d'une
   session ouverte : il n'y a aucune adresse publique a mettre en cache.
   `object-fit: contain` plutot que `cover` : un bandeau vertical n'est jamais
   rogne — mieux vaut une image entiere un peu petite qu'un cadrage qui coupe
   la moitie du sujet. ---------------------------------------------------- */
.banner { margin-bottom: var(--space-5); }

.banner__vide {
  display: flex;
  align-items: center;
  gap: .9rem;
  flex-wrap: wrap;
  padding: 1.1rem 1.2rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--bg-alt);
}
.banner__icone { color: var(--text-muted); }
.banner__icone svg { width: 26px; height: 26px; }
.banner__texte { display: flex; flex-direction: column; gap: .15rem; margin-right: auto; }
.banner__texte b { font-size: .92rem; }

.banner__plein {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.banner__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 300px;
  object-fit: contain;
  background: var(--bg-alt);
}
.banner__bar {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  padding: .6rem .8rem;
  border-top: 1px solid var(--border);
  background: var(--bg-alt);
}
.banner__meta { margin-right: auto; font-size: .78rem; }
.banner__actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.banner__etat { margin: .7rem .1rem 0; font-size: .82rem; color: var(--text-muted); }
.banner__etat.is-ko { color: #C0392B; }

/* --- Totaux par période -------------------------------------------------- */
.admin-totaux {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
}
.admin-total {
  padding: .85rem .95rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg);
}
.admin-total__label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  font-weight: 700;
}
.admin-total__value {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 800;
  margin-top: .25rem;
  line-height: 1.1;
}
.admin-total--accent { border-color: rgba(0, 196, 140, .40); background: var(--green-light); }
[data-theme="dark"] .admin-total--accent { background: rgba(0, 196, 140, .12); }

/* Ligne de detail des totaux : rappelle la periode et l'etat de facturation
   retenus, et donne le nombre de courses correspondantes. */
.tot-detail { margin-top: var(--space-3); font-size: .86rem; color: var(--text-muted); }
.tot-detail b { color: var(--text); font-family: var(--font-heading); font-size: 1.05rem; }

/* --- Colonne des cases a cocher (purge ciblee) ---------------------------
   Etroite, centree, et sans titre : c'est une colonne d'action, pas une
   donnee. `accent-color` accorde la case a la charte sans redessiner un
   controle natif. ------------------------------------------------------- */
table.data th.col-check,
table.data td.col-check { width: 34px; padding-inline: .5rem; text-align: center; }
table.data th.col-check input,
table.data td.col-check input { cursor: pointer; accent-color: var(--green); }
table.data tbody tr.is-picked { background: var(--green-light); }
[data-theme="dark"] table.data tbody tr.is-picked { background: rgba(0, 196, 140, .10); }

/* --- Interrupteur « Disponible » ----------------------------------------- */
.switch-row {
  display: flex;
  align-items: center;
  gap: .9rem;
  flex-wrap: wrap;
}
.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  cursor: pointer;
  user-select: none;
}
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch__piste {
  width: 52px;
  height: 30px;
  border-radius: var(--radius-pill);
  background: var(--gray-300, #cbd5e1);
  position: relative;
  transition: background var(--dur) var(--ease);
  flex: none;
}
.switch__bille {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur) var(--ease);
}
.switch input:checked + .switch__piste { background: var(--green); }
.switch input:checked + .switch__piste .switch__bille { transform: translateX(22px); }
.switch input:focus-visible + .switch__piste { outline: 2px solid var(--navy); outline-offset: 2px; }
.switch__label { font-weight: 700; font-size: .95rem; }

/* --- Grille des plages horaires ------------------------------------------ */
.hours-grid { display: grid; gap: .5rem; }
.hours-day {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: .7rem;
  align-items: center;
  padding: .5rem .2rem;
  border-bottom: 1px solid var(--border);
}
.hours-day:last-child { border-bottom: 0; }
.hours-day__nom { font-size: .86rem; font-weight: 600; }
.hours-day__slots { display: flex; gap: .45rem; flex-wrap: wrap; align-items: center; }
.hours-day input[type="time"] {
  padding: .35rem .5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: .84rem;
  background: var(--bg);
  color: var(--text);
}
.hours-day__vide { font-size: .82rem; color: var(--text-muted); }
.hours-sep { color: var(--text-muted); font-size: .8rem; }
@media (max-width: 620px) {
  .hours-day { grid-template-columns: 1fr; gap: .35rem; }
}

/* --- Écran de réinitialisation ------------------------------------------- */
.reset-box { max-width: 520px; margin-inline: auto; }
.reset-box .card__icon { margin-inline: auto; }
/* Le bouton « Retour à la connexion » du bloc « mot de passe oublié » vit HORS
   du formulaire : c'est ce qui permet de masquer la demande (serveur non
   configuré) sans supprimer la sortie de secours. Le `gap` du formulaire ne
   s'applique donc plus à lui — il lui faut sa propre marge.
   ⚠️ Sélecteur en enfant direct : le bouton « Retour » de #admin-reset est,
   lui, DANS son formulaire et ne doit pas hériter de cette marge. */
.reset-box > .btn--ghost { margin-top: .75rem; }
.reset-lien {
  display: inline-block;
  margin-top: .9rem;
  font-size: .86rem;
  color: var(--navy);
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: 0;
  font-family: inherit;
  padding: 0;
}
[data-theme="dark"] .reset-lien { color: #9fc4ff; }
.reset-lien:hover { text-decoration: none; }

@media (max-width: 900px) {
  .admin-layout { grid-template-columns: 1fr; }
  .admin-nav {
    position: static;
    display: flex;
    gap: .4rem;
    overflow-x: auto;
    padding: .5rem;
    -webkit-overflow-scrolling: touch;
  }
  .admin-nav__titre { display: none; }
  .admin-nav__link { width: auto; white-space: nowrap; }
}

/* ---------- 48. Parcours de règlement compact (étape 5) ------------------- */

/* Demande du client : « cette section 3, compacte-la avec un bon rendu
   visuel ». Le parcours de confirmation tenait sur une longue colonne ; il
   devient une liste de deux étapes : pastille numérotée, titre et explication
   au centre, action à droite. Rien n'a été retiré, seulement resserré. */
.co-steps { display: grid; gap: .6rem; }

.co-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .9rem;
  padding: .85rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-alt);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.co-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-heading);
  font-size: .8rem;
  font-weight: 800;
  line-height: 1;
}

.co-step__body { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.co-step__title { font-family: var(--font-heading); font-size: .95rem; }
.co-step__text { margin: 0; font-size: .8rem; line-height: 1.45; color: var(--text-muted); }
.co-step__cta { flex: none; white-space: nowrap; }

/* Étape validée : la confirmation est partie, la pastille passe au vert. */
.co-step.is-done { border-color: var(--green); background: color-mix(in srgb, var(--green) 7%, var(--bg-alt)); }
.co-step.is-done .co-step__num { background: var(--green); color: #04231a; }

@media (max-width: 620px) {
  .co-step { grid-template-columns: auto minmax(0, 1fr); }
  .co-step__cta { grid-column: 1 / -1; width: 100%; }
}

/* Ligne du montant : une CLASSE au lieu d'un style inline (le montant doit
   rester alignable et thémable comme le reste de la page). */
.pay-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.pay-total > span { font-size: .85rem; color: var(--text-muted); }
.pay-total > b { font-family: var(--font-heading); font-size: 1.5rem; }

/* Les moyens de paiement sont désormais TOUJOURS affichés : ils ne sont plus
   enfermés dans la zone « bientôt ». On leur donne l'air d'une vraie bande de
   logos plutôt que d'un encadré d'attente.
   ⚠️ En flex, la cinquième vignette (Espèces) tombait SEULE à la ligne
   suivante : une grille de cinq colonnes garde la bande alignée. */
.pay-card > .pay-brands { margin-top: 1rem; }
.pay-card > .pay-online-soon { margin-top: .9rem; }

.pay-brands {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .55rem;
}
.pay-brands__label { grid-column: 1 / -1; width: auto; }

@media (max-width: 620px) {
  .pay-brands { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 380px) {
  .pay-brands { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   Galerie du véhicule — bande défilante
   --------------------------------------------------------------------------
   Un CARROUSEL NATIF : la piste est un conteneur à défilement horizontal
   (scroll-snap). Sans JavaScript, on peut donc déjà la faire glisser au doigt
   et la parcourir au clavier — js/galerie.js n'ajoute que les flèches, les
   points et la rotation automatique. Du confort, pas une dépendance : une
   galerie qui disparaît faute de script n'est pas une galerie.

   Les photos ont DEUX orientations (paysage 16/9, portrait 3/4). On leur donne
   une hauteur commune et une largeur déduite ; sans cela la bande descendrait
   en escalier.
   ========================================================================== */
.galerie { position: relative; }

.galerie__piste {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: .3rem .3rem 1rem;
  margin: 0;
  list-style: none;
  scrollbar-width: thin;
  scrollbar-color: var(--gray-400) transparent;
}
.galerie__piste:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 4px;
  border-radius: var(--radius);
}
.galerie__piste::-webkit-scrollbar { height: 8px; }
.galerie__piste::-webkit-scrollbar-thumb {
  background: var(--gray-400);
  border-radius: var(--radius-pill);
}
.galerie__piste::-webkit-scrollbar-track { background: transparent; }

.galerie__item {
  flex: 0 0 auto;
  margin: 0;
  position: relative;
  scroll-snap-align: center;
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* --surface plutôt que --gray-100 : cette dernière n'est pas redéfinie par
     le thème sombre, et la vignette flasherait en clair pendant le chargement. */
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm, 0 10px 24px rgba(10, 31, 68, .10));
  transition: transform .35s ease, box-shadow .35s ease;
}
.galerie__item--paysage  { height: clamp(210px, 36vw, 350px); aspect-ratio: 16 / 9; }
.galerie__item--portrait { height: clamp(210px, 36vw, 350px); aspect-ratio: 3 / 4; }

/* « Effet flottant » : la vignette se soulève au survol et au focus clavier. */
.galerie__item:hover,
.galerie__item:focus-within {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg, 0 22px 44px rgba(10, 31, 68, .20));
}
.galerie__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.galerie__item:hover img { transform: scale(1.04); }

.galerie__legende {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2rem .95rem .75rem;
  color: #fff;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.3;
  background: linear-gradient(to top, rgba(6, 18, 36, .84), rgba(6, 18, 36, 0));
  pointer-events: none;
}


/* Le déclencheur du zoom : un VRAI <button>, donc atteignable au clavier et
   annoncé comme une action. Il remplit la vignette ; la légende reste
   au-dessus de lui et laisse passer les clics (pointer-events: none). */
.galerie__zoom {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.galerie__zoom:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: -3px;
}

/* Loupe : révélée au survol et au focus. Sur un écran tactile il n'y a pas de
   survol — on la laisse donc visible en permanence, sinon rien n'indiquerait
   que la vignette est cliquable. */
.galerie__loupe {
  position: absolute;
  top: .45rem;
  right: .45rem;
  z-index: 2;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(6, 18, 36, .62);
  color: #fff;
  opacity: 0;
  transform: scale(.85);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.galerie__loupe svg { width: 16px; height: 16px; }
.galerie__item:hover .galerie__loupe,
.galerie__item:focus-within .galerie__loupe {
  opacity: 1;
  transform: scale(1);
}
@media (hover: none) {
  .galerie__loupe { opacity: .88; transform: none; }
}

/* --- Commandes ------------------------------------------------------------ */
.galerie__nav {
  position: absolute;
  top: calc(50% - 1.5rem);
  transform: translateY(-50%);
  z-index: 2;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  box-shadow: var(--shadow, 0 8px 20px rgba(10, 31, 68, .18));
  transition: background .2s ease, transform .2s ease, opacity .2s ease;
}
/* Le SVG est injecté DANS le <i data-icon> : on le dimensionne en descendant,
   jamais par un « > svg » qui ne matcherait rien. */
.galerie__nav svg { width: 20px; height: 20px; }
.galerie__nav--prev { left: -6px; }
.galerie__nav--prev svg { transform: scaleX(-1); }
.galerie__nav--next { right: -6px; }
.galerie__nav:hover:not([disabled]) { background: var(--bg-alt); }
.galerie__nav:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.galerie__nav[disabled] { opacity: .3; cursor: default; }
/* Hors JavaScript, des flèches qui ne font rien sont un piège. Elles restent
   donc dans le HTML — c'est là que main.js injecte leur icône — mais masquées ;
   js/galerie.js les révèle en posant « is-ready » sur le conteneur. */
.galerie .galerie__nav { display: none; }
.galerie.is-ready .galerie__nav { display: grid; }

.galerie__points {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin-top: .1rem;
}
.galerie__point {
  width: 9px; height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--gray-400);
  opacity: .45;
  cursor: pointer;
  transition: opacity .2s ease, transform .2s ease, background .2s ease;
}
.galerie__point[aria-current="true"] {
  background: var(--green);
  opacity: 1;
  transform: scale(1.3);
}
.galerie__point:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

@media (max-width: 640px) {
  .galerie__nav { width: 38px; height: 38px; }
  .galerie__nav--prev { left: 2px; }
  .galerie__nav--next { right: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .galerie__piste { scroll-behavior: auto; }
  .galerie__item,
  .galerie__item img { transition: none; }
  .galerie__item:hover,
  .galerie__item:focus-within { transform: none; }
  .galerie__item:hover img { transform: none; }
  .galerie__loupe { transition: none; }
}

/* ==========================================================================
 * §56. RÉGLAGES — CHAMPS EN PASTILLES COLORÉES
 *
 * Demande du 2026-10-12 : « disposer les champs en pastilles divers coloris
 * (carrés et rectangles, dans un tableau à colonnes) ».
 *
 * Pourquoi une GRILLE et non un <table> + <input> éclaté
 * -----------------------------------------------------
 * Un vrai <table> obligerait à sortir les <input> de leur <label>, donc à
 * réécrire tout le câblage de js/admin.js (qui cible #set-baseFare, etc. par
 * identifiant). La grille CSS donne exactement le rendu demandé — colonnes,
 * pastilles, couleurs — en CONSERVANT chaque champ dans son <label> : aucune
 * ligne de JavaScript n'est touchée.
 *
 * Le champ lui-même RESTE un <input type="number"> natif : on ne remplace pas
 * la saisie par un faux contrôle. La « pastille » est son habillage.
 * ========================================================================= */

/* --- Un groupe de pastilles = un tableau à colonnes -------------------- */
.pills {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: .6rem;
}

/* --- Une pastille ------------------------------------------------------
   --pill et --pill-ink sont posés par le HTML (ou par défaut ci-dessous).
   Deux formes cohabitent, comme demandé : rectangulaire (par défaut) et
   carrée (.pill-field--sq), la seconde pour les cases à valeur courte. */
.pill-field {
  --pill: var(--accent);
  --pill-ink: var(--navy);
  display: grid;
  grid-template-columns: 4px 1fr auto;
  align-items: center;
  gap: .55rem;
  padding: .5rem .55rem;
  border: 1px solid var(--border);
  border-left: 0;
  border-radius: var(--radius-sm);
  background: var(--bg);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.pill-field::before {
  content: "";
  align-self: stretch;
  border-radius: var(--radius-pill);
  background: var(--pill);
  grid-column: 1;
}
.pill-field:hover { border-color: color-mix(in srgb, var(--pill) 55%, var(--border)); }
.pill-field:focus-within {
  border-color: var(--pill);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pill) 22%, transparent);
}

/* Libellé : texte simple, jamais un <label> flottant (les champs sont déjà
   légendés). Il reflue sur deux lignes plutôt que d'être tronqué. */
.pill-field__label {
  grid-column: 2;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
}
.pill-field__hint {
  display: block;
  font-size: .72rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: .1rem;
}

/* Le champ : largeur fixe, aligné à droite, cadre discret.
   La couleur du TEXTE vient de --pill-ink, c'est-à-dire d'une nuance FONCÉE
   de la teinte de la pastille : lisible sur le fond clair du thème clair,
   tout en gardant l'identité de couleur de chaque champ. */
.pill-field .input {
  grid-column: 3;
  width: 5.6rem;
  padding: .34rem .5rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: .86rem;
  color: var(--pill-ink);
  background: color-mix(in srgb, var(--pill) 12%, var(--bg));
  border-color: color-mix(in srgb, var(--pill) 40%, var(--border));
}
.pill-field .input:focus { background: var(--bg); }
.pill-field .input::-webkit-outer-spin-button,
.pill-field .input::-webkit-inner-spin-button { opacity: .55; }

/* ⚠️ THÈME SOMBRE — CORRECTION DE CONTRASTE
   En thème sombre, --navy (#0A1F44) posé sur un fond lui aussi sombre rendait
   les montants ILLISIBLES : on devinait à peine « 3.80 » dans la case. La
   teinte de la pastille est donc éclaircie vers le blanc (30 % de couleur,
   70 % de blanc) : la nuance reste reconnaissable, mais le texte devient
   franchement clair — donc lisible — sur le fond sombre. */
[data-theme="dark"] .pill-field .input {
  color: color-mix(in srgb, var(--pill) 30%, #ffffff);
  background: color-mix(in srgb, var(--pill) 20%, var(--bg));
  border-color: color-mix(in srgb, var(--pill) 45%, var(--border));
}
[data-theme="dark"] .pill-field .input:focus {
  background: color-mix(in srgb, var(--pill) 26%, var(--bg));
  color: #ffffff;
}

/* Unité affichée APRÈS le champ, en gris, hors du contrôle. */
.pill-field__unit {
  grid-column: 3;
  font-size: .72rem;
  color: var(--text-muted);
  font-weight: 600;
  margin-left: 5.2rem;
  margin-top: -1.15rem;
  pointer-events: none;
  justify-self: end;
  padding-right: .3rem;
}

/* Variante CARRÉE : même structure, proportions plus compactes. Sert aux
   interrupteurs et aux valeurs courtes, pour alterner les formes. */
.pill-field--sq {
  grid-template-columns: 4px 1fr auto;
  min-height: 62px;
}
.pill-field--sq .pill-field__label { font-size: .78rem; }

/* Teintes : chaque pastille reçoit sa couleur, la barre latérale et le fond
   du champ en dérivent — une seule variable à changer par champ.

   ⚠️ --pill-ink est la couleur du MONTANT affiché dans le champ. Elle doit
   être assez FONCÉE pour rester lisible sur le fond clair du champ (seuil
   WCAG AA = 4.5:1), tout en gardant la teinte de la pastille. Deux valeurs
   ont dû être assombries : le vert (#00a878 tombait à 2,75:1 — illisible) et
   l'ambre (#A86300 tombait à 4,31:1, juste sous le seuil). Mesuré par
   verify-contraste.js. */
.pill-field--navy   { --pill: var(--navy);   --pill-ink: var(--navy); }
.pill-field--green  { --pill: var(--green);  --pill-ink: #046B4D; }
.pill-field--teal   { --pill: #0D9C9C;       --pill-ink: #076868; }
.pill-field--blue   { --pill: #3B82F6;       --pill-ink: #1D4ED8; }
.pill-field--purple { --pill: #7C3AED;       --pill-ink: #5B21B6; }
.pill-field--amber  { --pill: var(--amber);  --pill-ink: #8A4F00; }
.pill-field--red    { --pill: var(--red);    --pill-ink: #B3222E; }
.pill-field--gold   { --pill: var(--gold-dark); --pill-ink: #7A5A00; }
.pill-field--slate  { --pill: #64748B;       --pill-ink: #3F4C5E; }

/* Séparateur de section à l'intérieur d'un groupe de pastilles. */
.pills__titre {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: .5rem 0 0;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.pills__titre::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* --- Carte « Guide d'utilisation » -------------------------------------- */
.guide-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
}
.guide-card__icon {
  width: 58px;
  height: 74px;
  border-radius: 6px;
  background: linear-gradient(160deg, var(--gold) 0 26%, var(--navy) 26% 100%);
  box-shadow: var(--shadow-sm);
  position: relative;
  flex: none;
}
.guide-card__icon::after {
  content: "";
  position: absolute;
  inset: 30% 16% 14% 16%;
  border-radius: 3px;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.85) 0 2px,
    transparent 2px 8px);
}
.guide-card__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.06rem;
  color: var(--navy);
}
/* Le titre du guide est un TITRE DE CARTE : il doit suivre l'encre du thème.
   Sans cette exception, `--navy` (#0A1F44) restait posé sur la surface sombre
   (#0d2755) — soit 1,11:1, un titre littéralement illisible. Mesuré le
   2026-10-13 par verify-contraste.js (volet Réglages, thème sombre). */
[data-theme="dark"] .guide-card__title { color: var(--text); }
.guide-card__meta {
  font-size: .84rem;
  color: var(--text-muted);
  margin-top: .2rem;
}
.guide-card__actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* --- Description repliée du guide ----------------------------------------
   Trois lignes de texte affichées en permanence pour une information qu'on ne
   lit qu'une fois : elles repoussaient les boutons vers le bas et noyaient le
   titre. Repliées dans un <details> natif — repliable sans JavaScript,
   accessible au clavier, et correctement annoncé (rôle « group ») aux
   lecteurs d'écran, ce qu'un div cliquable n'aurait pas fait. */
.guide-card__corps { min-width: 0; }

.guide-card__plus { margin-top: .45rem; }

.guide-card__plus > summary {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--green-dark);
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius-sm);
}
/* On masque le marqueur natif des deux moteurs, et on dessine le nôtre. */
.guide-card__plus > summary::-webkit-details-marker { display: none; }
.guide-card__plus > summary::before {
  content: "";
  width: .42rem;
  height: .42rem;
  flex: none;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--dur) var(--ease);
}
.guide-card__plus[open] > summary::before { transform: rotate(45deg); }
.guide-card__plus > summary:hover { text-decoration: underline; }
.guide-card__plus > summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--green) 45%, transparent);
  outline-offset: 2px;
}

.guide-card__plus > p {
  margin-top: .55rem;
  font-size: .84rem;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 62ch;
}

@media (max-width: 620px) {
  .guide-card { grid-template-columns: 1fr; }
  .guide-card__icon { width: 44px; height: 56px; }
  .pill-field__unit { margin-left: 0; }
}

/* =========================================================================
 * 57. RÉGLAGES — deux volets côte à côte, deux blocs en dessous
 * =========================================================================
 * « Guide d'utilisation » et « Dossier archives » sont les deux blocs qu'on
 * ouvre le plus souvent : ils partagent une rangée à DEUX colonnes, pour que
 * le regard les embrasse d'un coup. « Export et maintenance » et « Session »
 * sont courts et se lisent mieux en PLEINE LARGEUR, empilés sous la rangée
 * (voir admin.html, panneau « reglages »).
 *
 * Ce n'est PAS un empilement de cartes : c'est une grille de 2 colonnes
 * égales, chaque carte gardant sa lecture VERTICALE (titre, texte, actions).
 *
 * Sur mobile et tablette, la grille repasse en une seule colonne : deux
 * colonnes de moins de 450 px écraseraient le tableau des archives.
 * ---------------------------------------------------------------------- */
.reglages-grid {
  display: grid;
  /* Le guide est une carte COMPACTE (une icône, un titre, deux boutons) : une
     largeur fixe lui suffit. Le dossier d'archives, lui, porte un tableau à
     huit colonnes — il prend TOUT le reste. Un partage à parts égales
     écraserait le tableau. */
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

/* Le tableau des archives compte 8 colonnes : dans un tiers de largeur, il
   défile horizontalement plutôt que d'écraser ses cellules. On abaisse sa
   largeur minimale pour qu'il reste lisible sans trop de défilement. */
.reglages-grid .table-wrap { overflow-x: auto; }
.reglages-grid table.data { min-width: 640px; font-size: .8rem; }
.reglages-grid table.data th,
.reglages-grid table.data td { padding: .5rem .5rem; }
/* Le tableau des archives vit dans une carte à ~deux tiers de largeur : à
   cette largeur, la police de .82rem faisait déborder la colonne
   « Référence » (le <td> porte `text-overflow: ellipsis`, donc la référence
   s'abrégeait — or c'est la colonne qui identifie le dossier). On la ramène
   à .78rem : tout tient, référence comprise, dès 1361 px. */
.reglages-grid #archives-wrap table.data td { font-size: .78rem; }
.reglages-grid #archives-wrap table.data th { font-size: .72rem; }

/* La carte du guide n'a que 280 px dans cette rangée : ses deux boutons
   (« Voir », « Télécharger ») ne tiennent plus à droite du texte sans
   l'écraser. On les empile donc SOUS le titre, sur toute la largeur. */
.reglages-grid .guide-card { grid-template-columns: auto minmax(0, 1fr); }
.reglages-grid .guide-card__actions {
  grid-column: 1 / -1;
  margin-top: .15rem;
}

/* Les actions occupent la largeur : alignées à gauche, elles ne se
   chevauchent jamais et se replient proprement l'une sous l'autre. */
.reglages-grid .filters { margin-bottom: 0; }
.reglages-grid .archives__head { align-items: flex-start; }
.reglages-grid .archives__head .filters { flex-wrap: wrap; }

/* « Session » et « Export et maintenance » ne sont PLUS dans la grille
   (pleine largeur, sous la rangée) : leur .form-nav reprend donc la
   disposition par défaut — deux boutons aux deux extrémités. */

/* Sous 1360 px : une seule colonne.
   La rangée à deux volets réserve 280 px au guide ; en dessous de 1360 px de
   fenêtre, il ne reste plus assez de largeur pour les sept colonnes du
   tableau des archives (mesuré : ~603 px à 1281 — la référence et le n° de
   facture s'y tronquaient). On empile, et chaque carte retrouve toute la
   largeur du panneau. */
@media (max-width: 1360px) {
  .reglages-grid { grid-template-columns: 1fr; }
  .reglages-grid table.data { min-width: 820px; }
}

/* ---------- 58. Cartes d'activité : filtres cliquables -------------------- */

/* Demande du 2026-10-12 : rendre la section « Activité » de la Vue
   d'ensemble exploitable pour l'analyse. Chaque carte de STATUT devient un
   bouton qui ouvre la liste des réservations déjà filtrée.
   Orange = à traiter, vert = sain, rouge = sans suite. */

/* Orange et vert de TEXTE. Ils sont posés sur une teinte de fond très
   légère de la même famille : les valeurs claires ci-dessous atteignent
   5,5:1 au minimum, les vives du thème sombre 5,3:1. */
:root {
  --kpi-orange: #9A4407;
  --kpi-vert:   #007A52;
  --kpi-rouge:  #C1121F;
}
[data-theme="dark"] {
  --kpi-orange: #F59E0B;
  --kpi-vert:   #00C48C;
  --kpi-rouge:  #FF6B7A;
}

/* Rappel de mode d'emploi, sous le titre « Activité ». */
.kpi-aide {
  display: block;
  margin-top: .3rem;
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
}

.kpi__hint {
  font-size: .76rem;
  color: var(--text-muted);
  margin-top: .25rem;
}

/* Une carte cliquable est un VRAI bouton : on neutralise le style natif
   pour que le rendu reste identique à celui des cartes chiffrées. */
.kpi--clic {
  --kpi-accent: var(--border);
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  overflow: hidden;
  padding-left: 1.45rem;         /* laisse la place à la barre d'accent */
  background: color-mix(in srgb, var(--kpi-accent) 7%, var(--surface));
  border: 1.5px solid color-mix(in srgb, var(--kpi-accent) 42%, var(--border));
  transition: transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.kpi--orange { --kpi-accent: var(--kpi-orange); }
.kpi--vert   { --kpi-accent: var(--kpi-vert); }
.kpi--rouge  { --kpi-accent: var(--kpi-rouge); }

/* Barre d'accent, à gauche de la carte. */
.kpi--clic::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--kpi-accent);
}

/* Le libellé prend la couleur de la famille ; le CHIFFRE reste en couleur de
   texte (--text) : c'est lui qu'on lit, il ne doit jamais perdre en
   contraste à cause d'une teinte décorative. */
.kpi--clic .kpi__label { color: var(--kpi-accent); }

.kpi--clic:hover {
  transform: translateY(-2px);
  border-color: var(--kpi-accent);
  box-shadow: var(--shadow-sm);
}
.kpi--clic:focus-visible {
  outline: 3px solid var(--kpi-accent);
  outline-offset: 2px;
}

/* Carte correspondant au filtre en cours. On utilise un contour intérieur
   (et non une ombre) : l'ombre est déjà prise par l'animation. */
.kpi--clic.is-actif {
  border-color: var(--kpi-accent);
  outline: 2px solid var(--kpi-accent);
  outline-offset: -2px;
}

/* Scintillement : un halo qui pulse autour de la carte et un contour qui
   respire. Le TEXTE ne clignote pas — un libellé qui s'éteint serait
   illisible, et contraire à l'objectif d'accessibilité. */
@keyframes kpiHalo {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--kpi-accent) 0%, transparent); }
  50%      { box-shadow: 0 0 0 7px color-mix(in srgb, var(--kpi-accent) 24%, transparent); }
}
@keyframes kpiSouffle {
  0%, 100% { border-color: color-mix(in srgb, var(--kpi-accent) 42%, var(--border)); }
  50%      { border-color: var(--kpi-accent); }
}
.kpi--orange,
.kpi--vert,
.kpi--rouge {
  animation: kpiHalo 1.9s ease-in-out infinite,
             kpiSouffle 1.9s ease-in-out infinite;
}
/* Décalage des départs : les cartes ne clignotent pas à l'unisson. */
.kpi--vert  { animation-delay: .5s; }
.kpi--rouge { animation-delay: 1s; }

/* Accessibilité : aucun clignotement si l'utilisateur l'a demandé au
   système. Les couleurs, elles, restent. */
@media (prefers-reduced-motion: reduce) {
  .kpi--orange,
  .kpi--vert,
  .kpi--rouge { animation: none !important; }
  .kpi--clic:hover { transform: none; }
}

/* ---------- 59. Bloc d'avis clients (Trustpilot) -------------------------
   Remplace l'ancienne statistique « 4,9/5 — Note moyenne clients » du hero.
   Le bloc vit sur le fond bleu nuit du hero, dans les DEUX thèmes : ses
   couleurs sont donc posées en clair, indépendamment de [data-theme]. */

.hero__stat--avis { min-width: 0; }

.tp-badge {
  display: inline-flex;
  flex-direction: column;
  gap: .18rem;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-sm);
}

.tp-badge__haut {
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* Note chiffrée : mêmes métriques que .hero__stat b, pour que la ligne
   s'aligne sur les trois autres statistiques du hero. */
.tp-badge__note {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  white-space: nowrap;
}

/* --- Étoiles Trustpilot --------------------------------------------------
   Cinq carrés verts (#00B67A, la couleur de la marque) portant une étoile
   blanche. Une note de 4,9 laisse la cinquième case remplie à 90 % : le
   remplissage est piloté par --tp-fill, calculé par js/main.js à partir de
   REVIEWS.trustpilot.score. Rien n'est figé ici. */
.tp-stars {
  display: inline-flex;
  gap: 2px;
  flex: none;
}
.tp-stars i {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  background: #dcdce6;
  overflow: hidden;
}
.tp-stars i::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--tp-fill, 100%);
  background: #00b67a;
}
.tp-stars i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 2.4l2.95 6.36 6.95.73-5.18 4.66 1.44 6.83L12 17.5l-6.16 3.48 1.44-6.83L2.1 9.49l6.95-.73z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* Intitulé : même traitement que .hero__stat span. */
.tp-badge__label {
  font-size: .82rem;
  color: rgba(255, 255, 255, .62);
}

.tp-badge:hover .tp-badge__label,
.tp-badge:focus-visible .tp-badge__label { color: #fff; }
.tp-badge:hover .tp-stars { filter: brightness(1.08); }
.tp-badge:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
}

/* Écrans étroits : les étoiles passent au-dessus de la note, sinon la
   première colonne du hero devient plus large que les trois autres. */
@media (max-width: 560px) {
  .tp-badge__haut { flex-wrap: wrap; gap: .3rem; }
}

/* ==========================================================================
 * §57. AGENT STRIPE — PASTILLE ROUGE CLIGNOTANTE
 * ==========================================================================
 * La pastille est la SEULE voie par laquelle l'agent Stripe demande quelque
 * chose a l'exploitant : elle doit donc etre impossible a manquer, mais
 * n'apparaitre QUE lorsqu'il y a reellement une decision a prendre. Une
 * alerte qui clignote pour rien s'ignore en trois jours ; une alerte qui ne
 * s'allume que pour un remboursement en attente garde tout son poids.
 *
 * Le clignotement est volontairement lent (1,6 s) et porte sur un halo, pas
 * sur le texte : un texte qui clignote est illisible et fatigue. On respecte
 * `prefers-reduced-motion` — l'accessibilite prime sur l'insistance.
 * ========================================================================== */

.agent-bubble {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  /* Sous les modales (z-index 1000) : la pastille reste visible pendant qu'on
     lit une fiche, mais ne passe jamais DEVANT la fiche elle-meme. */
  z-index: 950;
}

.agent-bubble__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--red);
  color: #fff;
  font-family: var(--font-heading);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(230, 57, 70, .42);
  animation: agent-bubble-blink 1.6s ease-in-out infinite;
  transition: transform .15s ease, box-shadow .15s ease;
}

.agent-bubble__btn:hover { transform: translateY(-2px); }
.agent-bubble__btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
.agent-bubble__btn svg { width: 18px; height: 18px; }

/* Halo : c'est LUI qui pulse. Il grandit et s'efface, sans deplacer le
   bouton — aucun risque de « saut » de mise en page. */
.agent-bubble__pulse {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--red);
  opacity: .55;
  animation: agent-bubble-halo 1.6s ease-out infinite;
  pointer-events: none;
  z-index: -1;
}

.agent-bubble__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.45rem;
  height: 1.45rem;
  padding: 0 .38rem;
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--red);
  font-size: .8rem;
  font-weight: 800;
  line-height: 1;
}

@keyframes agent-bubble-blink {
  0%, 100% { box-shadow: 0 10px 26px rgba(230, 57, 70, .42); }
  50%      { box-shadow: 0 10px 34px rgba(230, 57, 70, .95); }
}

@keyframes agent-bubble-halo {
  0%   { transform: scale(1);    opacity: .55; }
  70%  { transform: scale(1.45); opacity: 0;   }
  100% { transform: scale(1.45); opacity: 0;   }
}

/* Sur un ecran etroit, le libelle « Agent Stripe » mange la largeur : on ne
   garde que la cloche et le compteur, qui suffisent a comprendre. */
@media (max-width: 560px) {
  .agent-bubble { right: .8rem; bottom: .8rem; }
  .agent-bubble__txt { display: none; }
  .agent-bubble__btn { padding: .7rem .85rem; }
}

@media (prefers-reduced-motion: reduce) {
  .agent-bubble__btn { animation: none; }
  .agent-bubble__pulse { animation: none; opacity: 0; }
}

/* ---------- Panneau de validation ---------------------------------------- */

.agent-req {
  border: 1px solid var(--border);
  border-left: 4px solid var(--red);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 1rem 1.1rem;
  margin-bottom: .9rem;
}

.agent-req__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
  flex-wrap: wrap;
}

.agent-req__ref {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.02rem;
  color: var(--text);
}

.agent-req__montant {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--red);
}

.agent-req__meta {
  margin: .5rem 0 0;
  font-size: .88rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.agent-req__raison {
  margin: .55rem 0 0;
  font-size: .88rem;
  color: var(--text);
  background: var(--bg-alt);
  border-radius: var(--radius-sm);
  padding: .5rem .7rem;
}

.agent-req__actions {
  display: flex;
  gap: .55rem;
  flex-wrap: wrap;
  margin-top: .85rem;
}

.agent-vide {
  font-size: .92rem;
  color: var(--text-muted);
  margin: 0 0 1rem;
}

.agent-hist {
  margin-top: 1.4rem;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}

.agent-hist__titre {
  font-family: var(--font-heading);
  font-size: .95rem;
  font-weight: 700;
  margin: 0 0 .6rem;
}

.agent-hist__ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
  font-size: .87rem;
  padding: .35rem 0;
  border-bottom: 1px dashed var(--border);
}

.agent-hist__ligne:last-child { border-bottom: 0; }
.agent-hist__etat { font-weight: 700; }
.agent-hist__etat.is-ok  { color: var(--green-dark); }
.agent-hist__etat.is-non { color: var(--text-muted); }
.agent-hist__etat.is-err { color: var(--red); }

/* ==========================================================================
   Passe 19 — Bandeau de pilotage tarifaire (espace pro → Tarifs)
   --------------------------------------------------------------------------
   Quatre informations côte à côte : profil appliqué, période en cours, période
   suivante, dernière synchronisation. Elles doivent tenir sur une ligne à
   1366 px — au-delà, on les lit mal, et c'est justement l'écran de l'exploitant.
   Sous 820 px, la grille passe à deux colonnes, puis à une.
   ========================================================================== */
.pilot { padding: 1.1rem 1.2rem; }

.pilot__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .9rem;
}

.pilot__cell {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 0;
}

.pilot__label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}

.pilot__value {
  font-size: .96rem;
  font-weight: 700;
  color: var(--navy);
  overflow-wrap: anywhere;
}

.pilot__hint {
  font-size: .76rem;
  color: var(--muted);
  line-height: 1.35;
}

[data-theme="dark"] .pilot__value { color: #fff; }

/* Les listes d'alertes du bandeau : puces compactes, lisibles sur deux lignes. */
#pilot-alertes .alert ul { margin: .35rem 0 0; padding-left: 1.1rem; }
#pilot-alertes .alert li { margin: .15rem 0; }
#pilot-alertes .alert + .alert { margin-top: .5rem; }

@media (max-width: 820px) {
  .pilot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .pilot__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Sélecteur de profil tarifaire — deux BOUTONS colorés (A vert / B orange)
   --------------------------------------------------------------------------
   Demande du 2026-10-19 : « transformer (A) et (B) en boutons colorés ».
   Deux pastilles radio grises ne disaient pas, à distance, quel barème était
   publié ; la couleur le dit.

   Les <input type="radio"> restent la source de vérité (nom « fare-profile »,
   identifiants #profile-A / #profile-B, événement « change »). Ils sont
   seulement rendus invisibles : opacity:0 + taille nulle, mais TOUJOURS
   focusables au clavier — d'où l'anneau :focus-visible sur le libellé.

   Contrastes (mesurés, seuil WCAG AA = 4,5:1) :
     · texte #04231A sur vert  #00C48C → 8,1:1
     · texte #2B1600 sur ambre #F59E0B → 9,2:1
   L'ambre avec du blanc ne donnait que 2,1:1 : le texte est donc foncé.
   ========================================================================== */
.profile-pick {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.profile-pick__label {
  font-size: .9rem;
  white-space: nowrap;
}
.profile-switch {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}

/* --- Le bouton lui-même --------------------------------------------------- */
.profile-switch__opt {
  --ps-accent: var(--green);
  --ps-ink: #04231A;
  --ps-soft: rgba(0, 196, 140, .12);
  --ps-line: rgba(0, 196, 140, .42);

  position: relative;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .62rem 1.05rem .62rem .62rem;
  border: 2px solid var(--ps-line);
  border-radius: var(--radius-pill);
  background: var(--ps-soft);
  cursor: pointer;
  user-select: none;
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.profile-switch__opt--b {
  --ps-accent: var(--amber);
  --ps-ink: #2B1600;
  --ps-soft: rgba(245, 158, 11, .14);
  --ps-line: rgba(245, 158, 11, .48);
}

.profile-switch__opt:hover {
  border-color: var(--ps-accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* Le radio est présent, nommé, focusable — simplement pas dessiné. */
.profile-switch__opt input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

/* --- Pastille « A » / « B » ---------------------------------------------- */
.profile-switch__badge {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: .95rem;
  line-height: 1;
  background: var(--ps-accent);
  color: var(--ps-ink);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.profile-switch__txt {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.profile-switch__txt b { font-size: .9rem; }
.profile-switch__txt small {
  font-size: .73rem;
  color: var(--text-muted);
  transition: color var(--dur) var(--ease);
}

/* Coche de l'option active : invisible tant que l'option ne l'est pas. */
.profile-switch__check {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-left: .15rem;
  border-radius: 50%;
  background: var(--ps-ink);
  color: var(--ps-accent);
  opacity: 0;
  transform: scale(.6);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.profile-switch__check svg { width: 13px; height: 13px; }

/* --- État sélectionné -----------------------------------------------------
   :has() évite de dépendre d'une classe posée par JavaScript : que le radio
   soit coché par l'utilisateur ou par loadSettingsForm (radio.checked = true),
   l'habillage suit. */
.profile-switch__opt:has(input:checked) {
  background: var(--ps-accent);
  border-color: var(--ps-accent);
  color: var(--ps-ink);
  box-shadow: 0 6px 18px rgba(10, 31, 68, .18);
}
.profile-switch__opt:has(input:checked) .profile-switch__badge {
  background: rgba(255, 255, 255, .9);
  color: var(--ps-ink);
}
.profile-switch__opt:has(input:checked) .profile-switch__txt b { color: var(--ps-ink); }
.profile-switch__opt:has(input:checked) .profile-switch__txt small { color: var(--ps-ink); opacity: .82; }
.profile-switch__opt:has(input:checked) .profile-switch__check { opacity: 1; transform: scale(1); }

/* Repli sans :has() (navigateurs anciens) : le bouton coché reste lisible
   même s'il ne se remplit pas. */
.profile-switch__opt input:checked ~ .profile-switch__badge {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .55) inset;
}
.profile-switch__opt input:checked ~ .profile-switch__check { opacity: 1; transform: scale(1); }

/* --- Clavier -------------------------------------------------------------- */
.profile-switch__opt:has(input:focus-visible) {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
}
[data-theme="dark"] .profile-switch__opt:has(input:focus-visible) {
  outline-color: #fff;
}

/* --- Petits écrans : les deux boutons prennent toute la largeur ---------- */
@media (max-width: 620px) {
  .profile-pick { display: block; }
  .profile-pick__label { display: block; margin-bottom: .6rem; }
  .profile-switch { display: grid; grid-template-columns: 1fr; }
  .profile-switch__opt { border-radius: var(--radius); }
}

/* ==========================================================================
   Page Tarifs — renvoi « forfait prioritaire »
   --------------------------------------------------------------------------
   Placé sous chaque grille de destinations, il remplace les lignes retirées
   parce que la destination a un forfait publié (voir js/tarifs.js,
   reconcilierGrilles). Sans lui, la commune disparaîtrait de la page sans
   explication. Il est masqué tant que JavaScript n'a rien retiré : le HTML
   statique reste donc propre, sans note vide.
   ========================================================================== */
.grid-renvoi {
  margin: .9rem 0 0;
  padding: .62rem .9rem;
  border-left: 3px solid var(--green);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--bg-alt);
  font-size: .84rem;
  line-height: 1.5;
  color: var(--text-muted);
}
.grid-renvoi b { color: var(--text); }
.grid-renvoi a {
  color: var(--green-dark);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.grid-renvoi[hidden] { display: none; }

/* ==========================================================================
   Blog — cartes enrichies (photo de couverture + sommaire cliquable)
   --------------------------------------------------------------------------
   Demande du 2026-10-19 : une miniature par article, et le sommaire de chaque
   article visible depuis la page Blog. Les ancres visées (#a1, #b1, #c1…)
   existent déjà dans les pages d'articles : aucun identifiant n'a été inventé.
   ========================================================================== */

/* La vignette est un lien : <a> est inline par défaut, ce qui casserait
   l'aspect-ratio et le positionnement absolu du badge de catégorie. */
.post__media { display: block; }

/* Titre cliquable — la carte entière devient une cible, sans multiplier les
   liens « Lire l'article » (un seul par carte reste nécessaire pour le
   repère visuel et pour l'accessibilité). */
.post__body h3 a { color: inherit; text-decoration: none; }
.post__body h3 a:hover { color: var(--green-dark); }

.post__toc {
  border-top: 1px solid var(--border);
  padding-top: .75rem;
  margin-top: .15rem;
}
.post__toc-title {
  display: block;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: .5rem;
}
.post__toc ol {
  display: grid;
  gap: .12rem;
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: tocb;
}
.post__toc li {
  font-size: .82rem;
  line-height: 1.42;
  counter-increment: tocb;
}
.post__toc li a {
  display: flex;
  align-items: baseline;
  gap: .42rem;
  padding: .12rem 0;
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
/* Numéro de section : il rappelle l'ordre de lecture de l'article. */
.post__toc li a::before {
  content: counter(tocb);
  flex: none;
  width: 1.05rem;
  font-size: .7rem;
  font-weight: 800;
  color: var(--green-dark);
  text-align: right;
}
.post__toc li a:hover,
.post__toc li a:focus-visible {
  color: var(--green-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Les trois cartes ont des sommaires de 6 ou 7 lignes : on laisse la grille
   s'étirer plutôt que de rogner. Dans une carte de blog, c'est le chapeau
   (`p`) qui absorbait l'espace libre — le sommaire se retrouvait poussé vers
   le bas et décalé d'une carte à l'autre. Ici le sommaire suit le texte, et
   c'est le lien « Lire l'article » qui est plaqué en bas. */
.grid-3--posts { align-items: stretch; }
.grid-3--posts .post__body > p { flex: 0 0 auto; }
.grid-3--posts .post__more { margin-top: auto; padding-top: .35rem; }

/* ==========================================================================
   Cibles tactiles sur appareil mobile (iPhone / Android / tablette)
   --------------------------------------------------------------------------
   Audit du 2026-10-20 (verify-responsive.js, 6 gabarits × 4 pages) :
   le layout ne débordait nulle part, mais plusieurs commandes restaient
   sous 40 px — la zone de confort du doigt, et encore plus le minimum
   quand on tape à une main dans un véhicule qui roule.

   Le seuil retenu est 44 px (recommandation Material/iOS), avec un plancher
   de 40 px là où la hauteur est contrainte par la mise en page.

   Ce bloc ne s'applique qu'aux appareils SANS survol (`hover: none`) : sur
   un poste de travail, la souris n'a pas besoin d'une cible agrandie et on
   ne veut pas dégrader la densité de l'interface.
   ========================================================================== */
@media (hover: none) and (pointer: coarse) {

  /* --- Navigation principale : les liens étaient à 39 px de haut --------- */
  .nav__link {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding-top: .35rem;
    padding-bottom: .35rem;
  }

  /* --- Bouton « Ma position » : 36 × 18 px, cible quasi inratable --------
     Le libellé disparaît sous 560 px (règle existante ligne 2458) ; le
     bouton se réduisait donc à l'icône seule, sur une bande très basse. */
  .field-locate {
    min-height: 44px;
    min-width: 44px;
    padding: 0 .6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .field-locate svg { width: 18px; height: 18px; }
  /* Le champ doit réserver la place du bouton agrandi. */
  .field-icon:has(.field-locate) .input { padding-right: 62px; }

  /* --- Zoom et boutons de la carte : 30-34 px, trop petits pour viser ----
     On couvre aussi les boutons Leaflet maison (« recentrer », « calques »)
     qui n'utilisent pas les classes standard de Leaflet. */
  .leaflet-control-zoom a,
  .map-recenter,
  .map-locate,
  .map-layers__btn {
    width: 44px !important;
    height: 44px !important;
    min-height: 44px;
    min-width: 44px;
    font-size: 22px;
    line-height: 44px;
  }
  .leaflet-touch .leaflet-control-zoom a { width: 44px; height: 44px; }

  /* --- Fermeture du tiroir de navigation : 38 px ------------------------ */
  .nav__drawer-close {
    width: 44px;
    height: 44px;
    min-height: 44px;
    min-width: 44px;
  }

  /* --- Points de la galerie : invisibles au doigt (9 px) ----------------- */
  .galerie__point {
    width: 14px; height: 14px;
    margin: 6px 3px;
  }
  /* On garde la pastille petite mais on agrandit la zone de toucher. */
  .galerie__points { gap: .15rem; }
  .galerie__point::before {
    content: '';
    position: absolute;
    inset: -15px;
  }
  .galerie__point { position: relative; }

  /* --- Commandes de l'espace pro -----------------------------------------
     Le chauffeur décide au volant : « Accepter » / « Refuser » doivent
     être impossibles à rater. */
  .admin-nav__link,
  .admin-panel__tab {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .btn--open,
  .row-actions .btn {
    min-height: 44px;
  }

  /* --- Champs de formulaire : le zoom iOS sur les champs de moins de 16 px
     est pénible, on garde 16 px et on agrandit la zone tactile. ---------- */
  input[type="text"],
  input[type="tel"],
  input[type="email"],
  input[type="date"],
  input[type="time"],
  input[type="number"],
  input[type="search"],
  select,
  textarea {
    min-height: 44px;
    font-size: 16px; /* < 16 px déclenche le zoom automatique sur iOS */
  }
  textarea { min-height: 88px; }

  /* --- Petits boutons utilitaires --------------------------------------- */
  .btn--ghost,
  .btn--icon {
    min-height: 44px;
  }

  /* --- Fil des étapes de la réservation : 39 px sur tablette ------------
     Sur téléphone le libellé disparaît (règle existante ligne 1884) et il ne
     reste qu'un point ; sur tablette en paysage les cinq étapes tiennent sur
     une ligne et restent trop basses. */
  .stepper__item {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* --- Bascule de thème : 36 × 36 px, présente sur TOUTES les pages ------ */
  .theme-toggle {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
  }

  /* --- Boutons de la vidéo d'accueil (superposition maison) -------------
     Ce ne sont pas les commandes natives du <video> (que le navigateur
     dessine lui-même) mais nos propres boutons « plein écran », « son »,
     « lecture » : ils sont à 36 px de haut. */
  .hero-video__fs {
    min-height: 44px;
    padding-top: .55rem;
    padding-bottom: .55rem;
  }

  /* --- Bouton « Inverser départ / arrivée » : 40 px de haut -------------- */
  .btn-swap {
    min-height: 44px;
  }

  /* --- Bouton hamburger : 44 × 23 px, trop étroit pour le pouce -------- */
  .nav__toggle {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
  }

  /* --- Lecture de la vidéo d'accueil : bouton central de 25 px ---------- */
  .hero-video__play {
    min-width: 64px;
    min-height: 64px;
    height: 64px;
    width: 64px;
  }

  /* --- Flèches de la galerie : 38 px sous 640 px (règle existante) ----- */
  .galerie__nav {
    width: 44px;
    height: 44px;
  }
}

/* Tablette en paysage : les liens de navigation restent un peu courts
   (39 px) parce que la barre est compacte. On les ramène à la norme
   tactile sans dégrader la barre. */
@media (hover: none) and (pointer: coarse) and (min-width: 768px) {
  .nav__link { min-height: 44px; }
}

/* ==========================================================================
   ESPACE PROFESSIONNEL — compte, parc, documents, chauffeurs
   --------------------------------------------------------------------------
   Ces quatre volets partagent une grammaire visuelle simple : une carte
   d'en-tête qui résume le dossier, des grilles de champs à deux ou trois
   colonnes, et des lignes de registre. Tout est bâti sur les jetons de
   couleur existants, donc le thème sombre suit sans règle supplémentaire.
   ========================================================================== */

/* --- En-tête du dossier ------------------------------------------------- */
.pro-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.pro-head__name {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.pro-head__score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  min-width: 96px;
}

/* Jauge de complétude : un anneau, pas une barre. Elle se lit d'un coup
   d'œil à côté d'un nom, là où une barre demanderait une échelle. */
.pro-ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  border: 4px solid var(--gray-200);
  color: var(--text);
  background: var(--surface);
}
.pro-ring--ok  { border-color: var(--green); color: var(--green-dark); }
.pro-ring--mid { border-color: var(--amber); }
/* Rouge de TEXTE : #E63946 ne donne que ~4,0:1 sur blanc, sous le seuil AA
   pour un corps de 16 px. #a93226 est le rouge déjà employé pour les boutons
   dangereux du tableau de bord, et passe 6,5:1. */
.pro-ring--low { border-color: var(--red); color: #a93226; }

/* --- Grilles de champs --------------------------------------------------- */
/* Les volets professionnels enveloppent le champ dans son <label> (le clic sur
   le texte place le curseur dans le champ). Le style de libellé existant ne
   visait que `.field > label` : sans cette règle, le texte sortirait en ligne,
   collé à la saisie. */
.field > span {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: .4rem;
}

.pro-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3) var(--space-4);
}
.pro-grid__wide { grid-column: span 2; }
@media (max-width: 900px) {
  .pro-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .pro-grid { grid-template-columns: 1fr; }
  .pro-grid__wide { grid-column: auto; }
}

/* --- Cases à cocher d'activité ------------------------------------------ */
.pro-checks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
}
.pro-check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: .9rem;
  color: var(--text);
  cursor: pointer;
  min-height: 44px;
}
.pro-check input { width: 18px; height: 18px; accent-color: var(--green); }

/* --- Bandeau de retour --------------------------------------------------- */
.pro-flash {
  margin: var(--space-3) 0 0;
  padding: .7rem .95rem;
  border-radius: var(--radius-sm);
  font-size: .88rem;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--text);
}
.pro-flash--ok   { border-color: var(--green); background: var(--green-light); color: var(--green-dark); }
.pro-flash--err  { border-color: var(--red);   background: color-mix(in srgb, var(--red) 8%, var(--surface)); color: #a93226; }
.pro-flash--warn { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, var(--surface)); }

/* --- Carte véhicule ------------------------------------------------------ */
.pro-veh {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.pro-veh__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.pro-veh__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

/* --- Ligne de compte professionnel -------------------------------------- */
.pro-drv {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: var(--space-3);
}
.pro-drv.is-current { border-color: var(--green); box-shadow: inset 3px 0 0 var(--green); }
.pro-drv__main b { font-family: var(--font-heading); font-size: 1rem; }
.pro-drv__meta { display: flex; align-items: center; gap: var(--space-3); }
.pro-drv__pct { font-weight: 700; font-size: .85rem; color: var(--text-muted); }
.pro-drv__acts { display: flex; gap: var(--space-2); flex-wrap: wrap; }
@media (max-width: 760px) {
  .pro-drv { grid-template-columns: 1fr; }
  .pro-drv__acts { justify-content: flex-start; }
}

/* --- Actions dans un tableau --------------------------------------------
   Deux boutons texte ne tiennent pas côte à côte dans une colonne de 16 % :
   ils passaient à la ligne et le second débordait du cadre. On assume
   l'empilement — deux boutons de même largeur, l'un sous l'autre. */
.pro-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
}
.pro-actions .btn { justify-content: center; white-space: nowrap; }

/* --- Icônes des volets professionnels -----------------------------------
   Il n'existe AUCUNE règle globale `[data-icon] svg` sur ce site : chaque
   contexte dimensionne la sienne. Sans ces trois règles, le pictogramme
   « bouclier » de la note d'architecture s'affichait à sa taille intrinsèque
   (600 px) et poussait tout le volet hors de l'écran — constaté à la capture
   du 2026-11-05. */
.admin-panel[data-panel="profil"] h3,
.admin-panel[data-panel="vehicules"] h3,
.admin-panel[data-panel="documents"] h3,
.admin-panel[data-panel="chauffeurs"] h3,
#doc-modal-titre,
#drv-modal-titre {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.admin-panel[data-panel="profil"] h3 svg,
.admin-panel[data-panel="vehicules"] h3 svg,
.admin-panel[data-panel="documents"] h3 svg,
.admin-panel[data-panel="chauffeurs"] h3 svg,
#doc-modal-titre svg,
#drv-modal-titre svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--green);
}

/* --- Pastille de rappel dans le menu ------------------------------------
   `hidden` ne suffit pas : `.pill` impose `display:inline-flex`, qui l'emporte
   sur la règle `[hidden]{display:none}` du navigateur. La pastille vide
   restait donc visible sous forme de tiret orange. */
.nav-badge { margin-left: auto; font-size: .7rem; padding: .1rem .45rem; line-height: 1.4; }
.nav-badge[hidden] { display: none; }

/* ==========================================================================
   ACCÈS PROFESSIONNEL — bouton sous le numéro de téléphone
   --------------------------------------------------------------------------
   Le bouton est un ACCÈS, pas une publicité : il mène à l'espace du chauffeur
   (connexion ou inscription). Il se place sous le téléphone parce que c'est
   la seconde chose qu'un professionnel cherche dans un en-tête.
   ========================================================================== */

.nav__pro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .1rem;
}

.nav__pro-btn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.2;
  color: var(--green-dark);
  text-decoration: none;
  padding: .3rem .6rem;
  /* 40 px de haut : c'est le seuil en dessous duquel un doigt rate la cible
     (recommandation Material, reprise par verify-responsive.js). Un bouton
     d'accès qui ne s'ouvre pas au doigt ne sert à rien. */
  min-height: 40px;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--green) 45%, var(--border));
  background: color-mix(in srgb, var(--green) 8%, transparent);
  white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nav__pro-btn b { font-weight: 800; }
.nav__pro-btn:hover,
.nav__pro-btn:focus-visible {
  background: color-mix(in srgb, var(--green) 18%, transparent);
  border-color: var(--green);
}
[data-theme="dark"] .nav__pro-btn { color: var(--green); }

/* Sous 1100 px, la phrase complète ne tient plus dans l'en-tête : on garde
   « TAXI · VTC », qui dit déjà de quoi il s'agit. */
@media (max-width: 1100px) {
  .nav__pro-long { display: none; }
}

/* ==========================================================================
   MENU LATÉRAL — groupes et sous-menus
   --------------------------------------------------------------------------
   Le menu comptait treize entrées à plat : « Tarifs » voisinait « Documents »
   sans que rien ne dise qu'ils appartiennent à deux métiers différents. On
   regroupe désormais par USAGE (Gestion / Profil pro), avec un en-tête
   repliable et des sous-entrées indentées.
   ========================================================================== */

.admin-nav__group {
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  padding: .6rem .7rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  cursor: pointer;
  min-height: 44px;
}
.admin-nav__group:hover { background: var(--navy-100); color: var(--navy); }
.admin-nav__group svg { width: 16px; height: 16px; flex: none; }
.admin-nav__group .admin-nav__chev {
  margin-left: auto;
  transition: transform .2s var(--ease);
}
.admin-nav__group[aria-expanded="true"] .admin-nav__chev { transform: rotate(90deg); }

.admin-nav__sub {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding-left: .55rem;
  margin: .1rem 0 .35rem .45rem;
  border-left: 2px solid var(--border);
}
.admin-nav__sub[hidden] { display: none; }

.admin-nav__link--sub {
  font-size: .84rem;
  font-weight: 600;
  padding: .5rem .6rem;
  min-height: 40px;
}
.admin-nav__link--sub svg { width: 15px; height: 15px; }

[data-theme="dark"] .admin-nav__group:hover { background: rgba(255,255,255,.07); color: #fff; }
[data-theme="dark"] .admin-nav__sub { border-left-color: rgba(255,255,255,.14); }