/* ============================================
   OBSIDIAN PRESTIGE — design tokens
   Direction : noir profond & or — luxe classique,
   intemporel.
   ============================================ */

:root {
  /* --- Couleurs (noir chaud & or) --- */
  --noir: #0b0b0a;
  --anthracite: #171512;
  --charbon: #221f19;
  --ligne: #4a3f27;

  --ivoire: #f7f1e3;
  --sable: #c2b490;
  --sable-dim: #8c8163;

  --bronze: #b3902f;
  --bronze-mat: #6b4f18;
  --bronze-vif: #e3bf5a;

  --vert-confirme: #9c8449;
  --rouge-discret: #a85c4a;
  --ambre: #cf8f2e;

  /* --- Typographie --- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Work Sans", "Segoe UI", sans-serif;
  /* Serif plus classique que Fraunces, réservée au logo/nom dans la
     barre de navigation — voir .brand-name plus bas. */
  --font-brand: "Playfair Display", "Iowan Old Style", Georgia, serif;

  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --shadow-soft: 0 30px 70px rgba(4, 3, 2, 0.6);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  /* Le dégradé radial ci-dessous est volontairement très subtil
     (alpha 0.06 -> 0). Sur un fond aussi sombre, une transition
     aussi douce se rend souvent par paliers visibles ("banding" —
     le "trait" en bande qu'on peut voir en travers du fond) : les
     écrans encodent chaque canal de couleur sur 8 bits, donc une
     variation aussi fine que celle-ci saute par crans plutôt que
     de fondre en continu. Le calque de bruit (background-image #1,
     mélangé en "overlay") ajoute une variation aléatoire minime,
     invisible en tant que grain, qui suffit à casser ces paliers à
     l'œil. Rien d'autre ne change visuellement.*/
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(90% 60% at 50% 0%, rgba(227, 191, 90, 0.06) 0%, transparent 60%);
  background-repeat: repeat, no-repeat;
  background-size: 180px 180px, auto;
  background-blend-mode: overlay, normal;
  background-color: var(--noir);
  color: var(--ivoire);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0;
}

p { margin: 0; }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.7rem;
  color: var(--bronze);
}

.container {
  width: min(1160px, 92%);
  margin-inline: auto;
}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 1px solid var(--bronze-vif);
  outline-offset: 3px;
}

/* ---------------- Nav ---------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  background: rgba(11, 11, 10, 0.82);
  border-bottom: 1px solid var(--ligne);
}

.nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 20px;
  position: relative;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ivoire);
}

.brand-mark {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.brand-text {
  display: flex;
  line-height: 1.2;
}

.brand-name {
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: 0.01em;
}

.brand-name em {
  font-style: italic;
  font-weight: 500;
  color: var(--bronze-vif);
}

.brand:hover .brand-mark {
  transform: rotate(10deg) scale(1.06);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 26px;
}

.nav-links {
  display: flex;
  gap: 34px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.86rem;
}

.nav-links a {
  text-decoration: none;
  color: var(--sable);
  transition: color 0.2s ease;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--ivoire);
}

/* Numéro de téléphone / WhatsApp, affiché dans l'en-tête sur
   toutes les pages. Rempli dynamiquement depuis COMPANY.phone
   (voir config.js et nav-phone.js) pour n'avoir qu'un seul
   endroit où modifier le numéro affiché sur tout le site. */
.nav-whatsapp {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--sable);
  font-size: 0.84rem;
  font-weight: 500;
  padding: 7px 14px 7px 9px;
  border: 1px solid var(--ligne);
  border-radius: 999px;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
  flex-shrink: 0;
  white-space: nowrap;
}

.nav-whatsapp:hover {
  color: var(--ivoire);
  border-color: var(--bronze-vif);
  background-color: rgba(227, 191, 90, 0.07);
}

.nav-whatsapp-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Menu "traduire le site" — bascule entre le français et les 10
   langues les plus parlées au monde, via translate-toggle.js.
   Le bouton reprend volontairement le même style pilule que
   nav-whatsapp, pour rester visuellement cohérent dans l'en-tête ;
   le menu déroulant s'ouvre juste en dessous, ancré au conteneur. */
.nav-translate-wrap {
  position: relative;
  flex-shrink: 0;
}

.nav-translate {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--sable);
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 500;
  padding: 7px 14px;
  border: 1px solid var(--ligne);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
  flex-shrink: 0;
}

.nav-translate:hover,
.nav-translate[aria-expanded="true"] {
  color: var(--ivoire);
  border-color: var(--bronze-vif);
  background-color: rgba(227, 191, 90, 0.07);
}

.nav-translate-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.nav-translate-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  min-width: 200px;
  max-height: 340px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  background-color: var(--charbon);
  border: 1px solid var(--ligne);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.nav-translate-divider {
  height: 1px;
  margin: 6px 4px;
  background-color: var(--ligne);
  list-style: none;
}

.nav-translate-option {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  color: var(--sable);
  font-family: inherit;
  font-size: 0.86rem;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.nav-translate-option:hover {
  color: var(--ivoire);
  background-color: rgba(227, 191, 90, 0.1);
}

.nav-translate-option.is-active {
  color: var(--bronze-vif);
  font-weight: 600;
}

/* Widget Google Translate : on ne s'en sert que comme moteur de
   traduction en arrière-plan, jamais pour son interface (bandeau du
   haut, infobulles au survol, icône de langue) — masquée entièrement
   pour que notre menu de langues reste le seul déclencheur visible.

   Sélecteur principal : body > .skiptranslate — c'est le conteneur
   que Google insère systématiquement juste après <body> pour le
   bandeau du haut, et qui reste stable d'une version à l'autre.
   Les classes internes qu'il génère (type VIpgJd-ZVi9od-ORHb-OEVmcd)
   sont en revanche générées à la volée et changent régulièrement :
   il ne faut jamais s'appuyer dessus. Les anciens sélecteurs
   .goog-te-banner-frame etc. sont conservés en filet de sécurité
   pour d'éventuelles variantes, mais ne sont plus le mécanisme
   principal. */
#google_translate_element { display: none !important; }

body > .skiptranslate,
body > .skiptranslate iframe,
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
iframe.goog-te-banner-frame,
.skiptranslate.goog-te-banner-frame,
#goog-gt-tt,
.goog-te-balloon-frame,
.goog-tooltip,
.goog-tooltip:hover,
.goog-text-highlight {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  box-shadow: none !important;
}
.goog-text-highlight { background: none !important; }

/* Google pousse le contenu de la page vers le bas (top: <hauteur du
   bandeau>px) en style inline sur <body> pendant l'affichage du
   bandeau : on neutralise ce décalage avec la priorité la plus
   forte possible. Exclut .modal-open, qui a besoin de son propre
   décalage "top" pour verrouiller le défilement pendant qu'une
   fenêtre modale est ouverte (voir modal-scroll-lock.js) — les deux
   mécanismes ne sont de toute façon jamais actifs en même temps. */
body:not(.modal-open) {
  top: 0 !important;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--ligne);
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.nav-toggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--ivoire);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---------------- Buttons ---------------- */
.btn[hidden] {
  display: none;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  border-radius: 2px;
  padding: 15px 30px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  text-decoration: none;
}

.btn-primary {
  background: var(--bronze);
  color: var(--noir);
}
.btn-primary:hover { background: var(--bronze-vif); }
.btn-primary:disabled {
  background: var(--charbon);
  color: var(--sable-dim);
  cursor: not-allowed;
}

.btn-ghost {
  background: transparent;
  border-color: var(--ligne);
  color: var(--ivoire);
  padding: 14px 29px;
}
.btn-ghost:hover { border-color: var(--bronze); color: var(--bronze-vif); }

.btn-danger {
  background: transparent;
  color: var(--rouge-discret);
  border-color: rgba(176, 106, 90, 0.4);
  padding: 8px 15px;
}

.btn-block { width: 100%; }
.btn-sm { padding: 9px 17px; font-size: 0.8rem; }

/* ---------------- Section rhythm ---------------- */
.section {
  padding-block: 96px;
  border-top: 1px solid var(--ligne);
}

.section-head {
  max-width: 56ch;
}

.section-head h2 {
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  margin-top: 10px;
}

.section-head p {
  margin-top: 14px;
  color: var(--sable);
  font-size: 1rem;
  max-width: 52ch;
}

/* ---------------- 1. Hero ---------------- */
.hero {
  padding-block: 56px 90px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: start;
  gap: 60px;
}

.hero-intro { padding-top: 34px; }

.hero h1 {
  font-size: clamp(2.3rem, 3.6vw, 3.4rem);
  line-height: 1.1;
  margin-top: 16px;
  max-width: 15ch;
}

.hero h1 .accent { color: var(--bronze-vif); font-style: italic; }

.hero-sub {
  margin-top: 22px;
  max-width: 42ch;
  color: var(--sable);
  font-size: 1.05rem;
}

.hero-meta {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  color: var(--sable-dim);
}

.hero-meta-sep { color: var(--ligne); }

.hero-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 34px;
  font-size: 0.82rem;
  color: var(--bronze-vif);
  text-decoration: none;
  border-bottom: 1px solid var(--bronze-mat);
  padding-bottom: 3px;
}

.hero-link:hover { border-color: var(--bronze-vif); }

/* Le formulaire, intégré directement dans le premier écran plutôt
   que relégué en bas de page : c'est ici, sans avoir à faire défiler,
   que la demande de trajet se fait. */
.hero-booking {
  position: relative;
}

.hero-booking::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 3px;
  background: linear-gradient(90deg, var(--bronze-mat), var(--bronze-vif) 55%, transparent);
}

.demande-card-head {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--ligne);
}

.demande-card-head h2 {
  font-size: 1.5rem;
  margin-top: 8px;
}

.demande-card-head .demande-note {
  margin-top: 10px;
}

/* ---------------- 2. Chauffeur ---------------- */
.driver-layout {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 54px;
  align-items: start;
}

.driver-portrait {
  text-align: center;
  border: 1px solid var(--ligne);
  padding: 30px 20px;
}

.driver-avatar {
  width: 84px;
  height: 84px;
  margin: 0 auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--noir);
  background: linear-gradient(160deg, var(--bronze-vif), var(--bronze-mat));
  box-shadow: 0 14px 30px rgba(227, 191, 90, 0.18);
}

.driver-name {
  font-size: 1.35rem;
  margin-top: 16px;
}

.driver-rating {
  margin-top: 12px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
}

.driver-rating .stars {
  color: var(--bronze-vif);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
}

.driver-rating .rating-value {
  font-family: var(--font-display);
  color: var(--ivoire);
  font-size: 1rem;
}

.rating-note {
  display: block;
  margin-top: 4px;
  font-size: 0.72rem;
  color: var(--sable-dim);
}

.driver-facts {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.driver-fact {
  display: flex;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ligne);
}

.driver-fact:last-child { border-bottom: none; padding-bottom: 0; }

.driver-fact .label {
  flex: 0 0 148px;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sable-dim);
  padding-top: 2px;
}

.driver-fact .value {
  color: var(--ivoire);
  font-size: 0.98rem;
}

.driver-quote {
  margin-top: 26px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--sable);
  border-left: 1px solid var(--bronze-mat);
  padding-left: 18px;
}

/* ---------------- 4. Usages ---------------- */
.usages-grid {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--ligne);
  border: 1px solid var(--ligne);
}

.usage-card {
  background: var(--noir);
  padding: 34px 30px;
}

.usage-card h3 {
  font-size: 1.2rem;
  margin-top: 12px;
}

.usage-card p {
  margin-top: 10px;
  color: var(--sable);
  font-size: 0.92rem;
}

.usage-mark {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--bronze);
}

/* ---------------- 5. Déroulé (rituel) ---------------- */
.ritual {
  margin-top: 46px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}

.ritual::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 6%;
  right: 6%;
  height: 1px;
  background: var(--ligne);
}

.ritual-step {
  text-align: center;
  padding-inline: 12px;
  position: relative;
}

.ritual-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid var(--bronze);
  background: var(--noir);
  margin: 0 auto 22px;
  position: relative;
  z-index: 1;
}

.ritual-step h3 {
  font-size: 1.05rem;
}

.ritual-step p {
  margin-top: 8px;
  color: var(--sable);
  font-size: 0.86rem;
}

/* ---------------- 6. Confiance & crédibilité ---------------- */
.trust-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.trust-item {
  border-top: 1px solid var(--bronze-mat);
  padding-top: 16px;
}

.trust-item .k {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sable-dim);
}

.trust-item .v {
  margin-top: 8px;
  font-size: 0.98rem;
  color: var(--ivoire);
}

/* ---------------- 7. Zone & disponibilité ---------------- */
.zone-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}

.zone-item .k {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--bronze);
}

.zone-item .v {
  margin-top: 8px;
  font-size: 0.95rem;
  color: var(--sable);
}

/* ---------------- Demande / formulaire ---------------- */
.demande-note {
  font-size: 0.92rem;
  color: var(--sable);
  margin-top: 18px;
  max-width: 34ch;
}

.demande-card {
  border: 1px solid var(--ligne);
  background: rgba(23, 20, 15, 0.55);
  backdrop-filter: blur(6px);
  padding: 34px;
  box-shadow: var(--shadow-soft);
}

.field { margin-top: 18px; }
.field:first-child { margin-top: 0; }

.field label {
  display: block;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sable-dim);
  margin-bottom: 7px;
}

.field select,
.field input[type="text"],
.field input[type="datetime-local"],
.field input[type="date"],
.field input[type="tel"],
.field input[type="email"],
.field input[type="password"],
.field textarea {
  width: 100%;
  background: var(--noir);
  border: 1px solid var(--ligne);
  color: var(--ivoire);
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-family: var(--font-body);
}

.field textarea {
  resize: vertical;
  min-height: 44px;
}

.field select:focus,
.field input:focus,
.field textarea:focus {
  border-color: var(--bronze);
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 18px;
}

.field-row:first-child { margin-top: 0; }

/* Les 2 champs d'une field-row doivent démarrer exactement à la même
   hauteur : c'est la field-row qui porte l'espacement du haut, pas ses
   champs (sinon le 2e champ hérite de margin-top:18px alors que le 1er,
   étant :first-child, retombe à 0 — d'où le décalage). */
.field-row .field {
  margin-top: 0;
}

.phone-field {
  display: flex;
  gap: 8px;
}

.phone-prefix-wrap {
  flex: 0 0 66px;
  display: flex;
  align-items: center;
  background: var(--noir);
  border: 1px solid var(--ligne);
  border-radius: var(--radius-sm);
  padding-left: 10px;
}
.phone-prefix-wrap:focus-within { border-color: var(--bronze); }

.phone-plus {
  color: var(--sable-dim);
  font-size: 0.9rem;
  pointer-events: none;
}

.phone-field select {
  flex: 1;
  width: 100%;
  min-width: 0;
  background: transparent;
  border: none;
  color: var(--ivoire);
  padding: 12px 6px 12px 2px;
  font-size: 0.9rem;
  font-family: var(--font-body);
}
.phone-field select:focus { outline: none; }

.phone-field input[type="tel"] {
  flex: 1;
  min-width: 0;
  background: var(--noir);
  border: 1px solid var(--ligne);
  color: var(--ivoire);
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-family: var(--font-body);
}

.phone-field input:focus {
  border-color: var(--bronze);
}

.time-field {
  display: flex;
  align-items: center;
  gap: 8px;
}

.time-field select {
  flex: 1;
  min-width: 0;
  background: var(--noir);
  border: 1px solid var(--ligne);
  color: var(--ivoire);
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-family: var(--font-body);
  text-align: center;
}

.time-field select:focus {
  border-color: var(--bronze);
}

.time-field-sep {
  color: var(--sable-dim);
  font-size: 1.1rem;
  font-weight: 600;
}

@media (max-width: 480px) {
  .phone-prefix-wrap { flex-basis: 58px; padding-left: 8px; }
}

.address-field { position: relative; }

.address-field input[type="text"] { width: 100%; }

.suggestions {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 4px;
  background: var(--anthracite);
  border: 1px solid var(--ligne);
  list-style: none;
  padding: 4px;
  max-height: 230px;
  overflow-y: auto;
}

.suggestions[hidden] { display: none; }

.suggestions li {
  padding: 10px 12px;
  font-size: 0.86rem;
  color: var(--sable);
  cursor: pointer;
  border-radius: 2px;
}

.suggestions li.active,
.suggestions li:hover {
  background: rgba(227, 191, 90, 0.14);
  color: var(--ivoire);
}

.address-confirm {
  margin-top: 7px;
  font-size: 0.78rem;
  color: var(--vert-confirme);
  min-height: 1.1em;
}

/* Menu "Terminal" — n'apparaît que si l'adresse choisie correspond à
   CDG ou Orly (voir detectAirport() dans booking.js). Marge resserrée
   par rapport à un .field ordinaire, car il vient juste après le
   texte de confirmation de l'adresse, pas après un champ neutre. */
.address-field .terminal-field {
  margin-top: 10px;
}

.address-error {
  margin-top: 7px;
  font-size: 0.78rem;
  color: var(--rouge-discret);
}

.address-field.has-error input {
  border-color: var(--rouge-discret);
}

.vehicle-single {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--ligne);
  padding: 12px 16px;
}

.vehicle-single strong { color: var(--ivoire); font-size: 0.95rem; font-weight: 500; }
.vehicle-single span { font-size: 0.78rem; color: var(--sable-dim); }

.estimation-note {
  margin-top: 10px;
  font-size: 0.76rem;
  color: var(--sable-dim);
}

/* ---------------- Créneaux horaires (5 min) ---------------- */
/* Sélecteur d'heure façon "roue" (comme Uber ou un UIPickerView iOS) :
   les créneaux de la journée défilent verticalement, celui qui
   s'arrête au centre (bandeau ---) est le créneau choisi. Défilement
   au doigt/molette, ou clic direct sur une ligne pour la centrer.

   Les créneaux passés ou déjà réservés par une autre course restent
   affichés (très faible opacité) mais ne sont plus des points
   d'ancrage du défilement magnétique : la classe .is-disabled retire
   `scroll-snap-align`, ce qui fait que le relâchement du doigt "saute"
   tout seul par-dessus, direction le prochain créneau réellement
   disponible. Aucune logique JS de saut n'est nécessaire pour ça,
   uniquement pour lire la ligne qui finit centrée une fois le
   défilement stabilisé (voir booking.js).

   ITEM_HEIGHT (38px) est dupliqué dans booking.js/tracking.js : il
   doit rester synchronisé avec la hauteur de .time-wheel-item
   ci-dessous, sans quoi le calcul "quelle ligne est au centre ?"
   dérive. */
.time-wheel-wrap {
  position: relative;
  border: 1px solid var(--ligne);
  border-radius: var(--radius-sm);
  background: var(--noir);
  overflow: hidden;
}

.time-wheel {
  height: 190px; /* 5 lignes visibles de 38px */
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* (hauteur - 1 ligne) / 2 de chaque côté : permet au tout premier
     (00:00) comme au tout dernier créneau (23:55) de venir eux aussi
     se centrer sous le bandeau, pas seulement les créneaux du milieu. */
  padding: 76px 0;
}

.time-wheel::-webkit-scrollbar { display: none; }

.time-wheel-item {
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  color: var(--sable);
  cursor: pointer;
  scroll-snap-align: center;
  transition: color 0.15s ease, font-size 0.15s ease, opacity 0.15s ease, filter 0.15s ease;
}

/* Écart volontairement marqué avec les créneaux libres ci-dessus
   (couleur ET opacité réduites, en plus d'un léger passage en
   niveaux de gris) : au premier coup d'œil, "grisé" doit se
   distinguer sans ambiguïté de "normal", y compris pour un
   défilement rapide au doigt. */
.time-wheel-item.is-disabled {
  color: var(--sable-dim);
  opacity: 0.32;
  filter: grayscale(0.6);
  cursor: default;
  pointer-events: none;
  scroll-snap-align: none;
}

.time-wheel-item.is-selected {
  color: var(--ivoire);
  font-size: 1.5rem;
  font-weight: 600;
}

/* Bandeau central fixe, superposé — repère visuel uniquement, ne
   capte jamais de clic (le clic doit atteindre la ligne dessous). */
.time-wheel-highlight {
  position: absolute;
  top: 50%;
  left: 10px;
  right: 10px;
  height: 38px;
  transform: translateY(-50%);
  border-top: 1px solid var(--bronze);
  border-bottom: 1px solid var(--bronze);
  pointer-events: none;
}

/* Estompage haut/bas du dégradé, pour suggérer qu'on peut encore
   faire défiler plutôt que de laisser une coupure nette. */
.time-wheel-wrap::before,
.time-wheel-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 60px;
  pointer-events: none;
  z-index: 2;
}

.time-wheel-wrap::before {
  top: 0;
  background: linear-gradient(to bottom, var(--noir), transparent);
}

.time-wheel-wrap::after {
  bottom: 0;
  background: linear-gradient(to top, var(--noir), transparent);
}

.slot-empty {
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--sable-dim);
}

/* Confirmation discrète, sous la roue, que le créneau actuellement
   centré est bien disponible — même couleur que les autres repères
   de confirmation du site (voir --vert-confirme). N'est jamais
   affiché en même temps que .slot-empty (voir booking.js/tracking.js :
   render() bascule l'un ou l'autre selon qu'il reste ou non des
   créneaux ce jour-là). */
.time-wheel-status {
  margin-top: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--vert-confirme);
}

/* ---------------- Calendrier personnalisé ---------------- */
/* Champ déclencheur : affiche la date choisie en une ligne, comme un
   champ de formulaire classique. Le calendrier complet ne s'ouvre qu'au
   clic, en popover — il n'occupe pas en permanence la place d'un mois
   entier dans le formulaire. */
.date-field { position: relative; }

.date-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--noir);
  border: 1px solid var(--ligne);
  color: var(--ivoire);
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-family: var(--font-body);
  cursor: pointer;
  text-align: left;
  text-transform: capitalize;
}

.date-trigger:hover { border-color: var(--bronze); }
.date-trigger[aria-expanded="true"] { border-color: var(--bronze); }

.date-trigger-icon {
  color: var(--bronze);
  font-size: 0.7rem;
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.date-trigger[aria-expanded="true"] .date-trigger-icon { transform: rotate(180deg); }

.calendar-popover {
  position: absolute;
  z-index: 25;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 6px;
}

.calendar-popover[hidden] { display: none; }

.calendar {
  border: 1px solid var(--ligne);
  background: var(--anthracite);
  box-shadow: var(--shadow-soft);
  padding: 12px;
}

.calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cal-month {
  font-family: var(--font-display);
  font-size: 0.92rem;
  color: var(--ivoire);
  text-transform: capitalize;
}

.cal-nav {
  width: 26px;
  height: 26px;
  border: 1px solid var(--ligne);
  background: var(--charbon);
  color: var(--sable);
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  line-height: 1;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.cal-nav:hover:not(:disabled) { border-color: var(--bronze); color: var(--ivoire); }
.cal-nav:disabled { opacity: 0.3; cursor: not-allowed; }

.calendar-weekdays {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sable-dim);
}

.calendar-grid {
  margin-top: 4px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.cal-blank { visibility: hidden; }

.cal-day {
  height: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--sable);
  font-family: var(--font-body);
  font-size: 0.8rem;
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.cal-day:hover:not(:disabled) { border-color: var(--bronze); color: var(--ivoire); }

.cal-day.is-today { color: var(--bronze-vif); font-weight: 600; }

/* "selected" (popover de réservation) et "is-selected" (calendrier
   du tableau de bord chauffeur) partagent le même rendu. */
.cal-day.selected,
.cal-day.is-selected {
  background: var(--bronze);
  border-color: var(--bronze);
  color: var(--noir);
  font-weight: 600;
}

.cal-day.selected .cal-day-count,
.cal-day.is-selected .cal-day-count {
  color: var(--noir);
}

.cal-day:disabled {
  color: var(--sable-dim);
  opacity: 0.3;
  cursor: not-allowed;
}

/* Case vide en début de mois (calendrier chauffeur — les jours du
   formulaire de réservation utilisent .cal-blank pour ce même rôle). */
.cal-day.is-empty {
  visibility: hidden;
  cursor: default;
}

/* Petit badge sous le numéro du jour, indiquant le nombre de
   courses ce jour-là (calendrier du tableau de bord chauffeur). */
.cal-day-count {
  font-size: 0.56rem;
  line-height: 1;
  font-weight: 600;
  color: var(--bronze-vif);
}

/* ---------------- Variante compacte — calendrier & créneaux ----------------
   Même design que le calendrier et le sélecteur d'heure de la page de
   réservation (voir plus haut), en plus petit : utilisée dans la modale
   « Modifier ma réservation » (voir suivi.html / tracking.js), une
   fenêtre plus étroite où le calendrier pleine taille prendrait
   proportionnellement plus de place. */
.calendar--sm { padding: 9px; }
.calendar--sm .cal-month { font-size: 0.8rem; }
.calendar--sm .cal-nav { width: 21px; height: 21px; font-size: 0.82rem; }
.calendar--sm .calendar-weekdays { margin-top: 8px; font-size: 0.56rem; }
.calendar--sm .calendar-grid { margin-top: 3px; gap: 1px; }
.calendar--sm .cal-day { height: 28px; font-size: 0.72rem; }
.calendar--sm .cal-day-count { font-size: 0.5rem; }

/* Roue horaire compacte : 3 lignes visibles au lieu de 5 (hauteur
   d'item inchangée à 38px, pour que le calcul JS "quelle ligne est au
   centre ?" reste identique entre les deux tailles — voir booking.js). */
.time-wheel--sm { height: 114px; padding: 38px 0; }

/* ---------------- Onglets de type "période" (réutilisés par le
   tableau de bord chauffeur pour ses filtres) ---------------- */
.period-btn {
  font-size: 0.74rem;
  padding: 6px 13px;
  border: 1px solid var(--ligne);
  background: transparent;
  color: var(--sable);
  cursor: pointer;
  border-radius: 999px;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.period-btn:hover { border-color: var(--bronze); color: var(--ivoire); }

.period-btn.active {
  border-color: var(--bronze);
  color: var(--ivoire);
  background: var(--charbon);
}

/* ---------------- Options (aller-retour, sièges auto) ---------------- */
.option-toggle { margin-top: 18px; }

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 0.92rem;
  color: var(--ivoire);
}

.checkbox-label input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--bronze);
  cursor: pointer;
}

.return-block {
  margin-top: 14px;
  padding: 18px;
  border: 1px dashed var(--bronze-mat);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Le bloc retour utilise display:flex ci-dessus, ce qui écraserait
   l'attribut HTML "hidden" (même spécificité CSS). Cette règle rétablit
   la fermeture réelle du calendrier + heure de retour quand on décoche
   "Aller-retour". */
.return-block[hidden] {
  display: none;
}

/* ---------------- Prix estimé ---------------- */
.price-field {
  border: 1px solid var(--bronze-mat);
  padding: 16px 18px;
  background: rgba(227, 191, 90, 0.05);
}

.price-row {
  margin-top: 6px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.price-value {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--ivoire);
}

.price-km {
  font-size: 0.8rem;
  color: var(--sable-dim);
}

/* ---------------- Footer ---------------- */
.footer {
  border-top: 1px solid var(--ligne);
  padding-block: 34px;
  color: var(--sable-dim);
  font-size: 0.8rem;
}

.footer .container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------------- Modal ---------------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(11, 11, 10, 0.8);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}

.modal-backdrop.open { display: flex; }

/* Empêche le geste de défilement, une fois arrivé en haut/bas du
   contenu de la modale, de continuer vers la page en dessous
   (le "scroll chaining" qui faisait défiler l'arrière-plan sur
   mobile). Complété par le verrou body ci-dessous pour les
   navigateurs où overscroll-behavior seul ne suffit pas. */
.modal-backdrop {
  overscroll-behavior: contain;
}

/* Verrou de défilement du body pendant qu'une modale est ouverte
   (voir modal-scroll-lock.js). La position "fixed" est le seul
   moyen fiable de bloquer totalement le défilement d'arrière-plan
   sur Safari iOS ; le décalage vertical est compensé en JS via
   `top`, puis restauré à la fermeture. */
body.modal-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

.modal {
  width: min(440px, 100%);
  background: var(--anthracite);
  border: 1px solid var(--ligne);
  padding: 32px;
  max-height: 90vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-close {
  background: none;
  border: none;
  color: var(--sable);
  font-size: 1.2rem;
  cursor: pointer;
  line-height: 1;
}

.notice-banner {
  margin-top: 16px;
  border: 1px solid var(--bronze-mat);
  padding: 11px 13px;
  font-size: 0.76rem;
  color: var(--bronze-vif);
}

/* ---------------- Formulaire de paiement ---------------- */
.form-section-title {
  margin-top: 26px;
  margin-bottom: 12px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--bronze);
  border-bottom: 1px solid var(--ligne);
  padding-bottom: 8px;
}

.form-section-title:first-child { margin-top: 0; }

.optional-tag {
  text-transform: none;
  letter-spacing: normal;
  color: var(--sable-dim);
  font-weight: 400;
}

.deposit-box {
  border: 1px solid var(--bronze-mat);
  padding: 16px 18px;
  background: rgba(227, 191, 90, 0.05);
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.deposit-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.86rem;
  color: var(--sable);
}

.deposit-row-main {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--ivoire);
}

/* ---------------- Timeline (suivi) — legacy, conservé si réutilisé ---------------- */
.timeline {
  display: flex;
  justify-content: space-between;
  margin-top: 34px;
  position: relative;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--ligne);
}

.timeline-step { position: relative; z-index: 1; flex: 1; text-align: center; }

.timeline-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--noir);
  border: 1px solid var(--ligne);
  margin: 0 auto 12px;
  transition: all 0.3s ease;
}

.timeline-step.done .timeline-dot {
  background: var(--bronze);
  border-color: var(--bronze);
}

.timeline-step span { font-size: 0.74rem; color: var(--sable-dim); }
.timeline-step.done span { color: var(--ivoire); }

/* ---------------- Suivi — statut héros ---------------- */
@keyframes hero-reveal {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.status-hero {
  margin-top: 26px;
  padding: 32px clamp(20px, 4vw, 38px);
  border: 1px solid var(--ligne);
  background: linear-gradient(160deg, rgba(227, 191, 90, 0.055), transparent 60%);
  position: relative;
  overflow: hidden;
  animation: hero-reveal 0.6s ease both;
}

.status-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 120% at 0% 0%, rgba(227, 191, 90, 0.10), transparent 70%);
  pointer-events: none;
}

.status-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  position: relative;
}

.status-id-row { display: flex; align-items: center; gap: 12px; }

.copy-btn {
  background: none;
  border: 1px solid var(--ligne);
  color: var(--sable);
  font-size: 0.66rem;
  padding: 4px 10px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: border-color 0.15s ease, color 0.15s ease;
  font-family: var(--font-body);
}
.copy-btn:hover { border-color: var(--bronze); color: var(--ivoire); }
.copy-btn.copied { border-color: var(--vert-confirme); color: var(--vert-confirme); }

.status-headline-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 26px;
  position: relative;
}

.status-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: linear-gradient(160deg, var(--bronze-vif), var(--bronze-mat));
  color: var(--noir);
  box-shadow: 0 14px 30px rgba(227, 191, 90, 0.2);
  transition: background 0.4s ease, box-shadow 0.4s ease;
}
.status-icon-wrap svg { width: 26px; height: 26px; }

.status-hero[data-status="annulee"] .status-icon-wrap {
  background: linear-gradient(160deg, #c99a8c, var(--rouge-discret));
  box-shadow: none;
  color: var(--noir);
}

.status-hero[data-status="paiement_attente"] .status-icon-wrap {
  background: linear-gradient(160deg, var(--sable), var(--sable-dim));
  box-shadow: none;
  color: var(--noir);
}
.status-hero[data-status="paiement_attente"] .route-rail,
.status-hero[data-status="paiement_attente"] .timeline-v2 {
  opacity: 0.35;
  filter: grayscale(0.5);
}

#status-headline { font-size: clamp(1.5rem, 3vw, 2rem); }

.status-eta {
  margin-top: 8px;
  color: var(--sable);
  font-size: 0.9rem;
}

.cancel-banner {
  margin-top: 26px;
  border: 1px solid rgba(176, 106, 90, 0.4);
  background: rgba(176, 106, 90, 0.07);
  color: var(--rouge-discret);
  padding: 15px 17px;
  font-size: 0.88rem;
  position: relative;
}

.payment-banner {
  margin-top: 26px;
  border: 1px solid rgba(207, 143, 46, 0.45);
  background: rgba(207, 143, 46, 0.08);
  color: var(--ambre);
  padding: 15px 17px;
  font-size: 0.88rem;
}

/* Rail de trajet */
.route-rail { margin-top: 32px; position: relative; }

.route-points {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.82rem;
  color: var(--sable);
  margin-bottom: 12px;
}
.route-points span:first-child::before { content: "● "; color: var(--bronze-vif); font-size: 0.6em; }
.route-points span:last-child { color: var(--ivoire); text-align: right; }
.route-points span:last-child::after { content: " ●"; color: var(--sable-dim); font-size: 0.6em; }

.route-track {
  position: relative;
  height: 3px;
  background: var(--ligne);
  border-radius: 999px;
}

.route-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--bronze-mat), var(--bronze-vif));
  border-radius: 999px;
  transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.route-marker {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--ivoire);
  border: 2px solid var(--bronze-vif);
  box-shadow: 0 0 0 5px rgba(227, 191, 90, 0.14);
  transition: left 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.route-marker.pulse::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid var(--bronze-vif);
  animation: route-ripple 1.8s ease-out infinite;
}

@keyframes route-ripple {
  0% { transform: scale(0.6); opacity: 0.65; }
  100% { transform: scale(2); opacity: 0; }
}

.status-hero[data-status="annulee"] .route-rail { opacity: 0.35; filter: grayscale(0.5); }

/* Trajet (carte récapitulative) — départ / arrivée empilés proprement,
   plutôt qu'une seule ligne "A → B" qui devenait illisible dès que les
   adresses étaient un peu longues. Même langage visuel que .route-points
   (point plein pour le départ, point creux pour l'arrivée). */
.trip-route-row {
  display: flex;
  gap: 12px;
  margin-top: 14px;
}

.trip-route-rail {
  flex: none;
  width: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 5px;
}

.trip-route-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-sizing: border-box;
}
.trip-route-dot--start { background: var(--bronze-vif); }
.trip-route-dot--end { background: transparent; border: 2px solid var(--sable-dim); }

.trip-route-connector {
  flex: 1;
  width: 1px;
  min-height: 22px;
  margin: 5px 0;
  background: var(--ligne);
}

.trip-route-addresses {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.trip-route-label {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sable-dim);
}

.trip-route-address {
  margin-top: 3px;
  font-size: 1rem;
  color: var(--ivoire);
  line-height: 1.35;
}

/* Timeline enrichie, à icônes */
.timeline-v2 {
  margin-top: 42px;
  display: flex;
  justify-content: space-between;
  position: relative;
}

.timeline-v2::before {
  content: "";
  position: absolute;
  top: 19px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--ligne);
}

.tstep {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.tstep-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--noir);
  border: 1px solid var(--ligne);
  color: var(--sable-dim);
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.tstep-icon svg { width: 16px; height: 16px; }

.tstep.done .tstep-icon {
  border-color: var(--bronze);
  color: var(--bronze-vif);
  background: var(--charbon);
}

.tstep.current .tstep-icon {
  border-color: var(--bronze-vif);
  color: var(--noir);
  background: var(--bronze-vif);
  box-shadow: 0 0 0 5px rgba(227, 191, 90, 0.16);
  animation: tstep-breathe 1.8s ease-in-out infinite;
}

@keyframes tstep-breathe {
  0%, 100% { box-shadow: 0 0 0 5px rgba(227, 191, 90, 0.16); }
  50% { box-shadow: 0 0 0 9px rgba(227, 191, 90, 0.04); }
}

.tstep span { font-size: 0.7rem; color: var(--sable-dim); max-width: 12ch; }
.tstep.done span, .tstep.current span { color: var(--ivoire); }

@media (max-width: 640px) {
  .tstep span { display: none; }
  .tstep.current span { display: block; }

  .lookup-form { flex-direction: column; align-items: stretch; }
  .lookup-form input { min-width: 0; }
  .lookup-form .btn { width: 100%; }
}

/* ---------------- Driver dashboard ---------------- */
.dash-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.dash-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#push-toggle-btn.is-active {
  color: var(--bronze-vif);
  border-color: var(--bronze-vif);
}

.dash-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--ligne);
  border: 1px solid var(--ligne);
  margin-bottom: 34px;
}

.stat { background: var(--noir); padding: 22px; }
.stat .eyebrow { display: block; margin-bottom: 8px; }
.stat .value { font-family: var(--font-display); font-size: 1.9rem; color: var(--ivoire); }

.dash-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.dash-tabs { display: flex; gap: 8px; flex-wrap: wrap; }

.dash-search {
  background: var(--noir);
  border: 1px solid var(--ligne);
  color: var(--ivoire);
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-family: var(--font-body);
  min-width: 220px;
}
.dash-search:focus { border-color: var(--bronze); outline: none; }

/* ---------------- Bilan de période & calendrier ---------------- */
.dash-period-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 20px;
  margin-bottom: 34px;
}

.dash-period-card,
.dash-calendar-card {
  display: flex;
  flex-direction: column;
}

.dash-period-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.dash-period-select {
  background-color: var(--noir);
  border: 1px solid var(--ligne);
  color: var(--ivoire);
  padding: 8px 32px 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-family: var(--font-body);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23c2b490' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px 7px;
  transition: border-color 0.15s ease;
}

.dash-period-select:hover,
.dash-period-select:focus {
  border-color: var(--bronze);
  outline: none;
}

.dash-period-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--ligne);
}

.dash-period-stats .eyebrow { display: block; margin-bottom: 8px; }
.dash-period-stats .value { font-family: var(--font-display); font-size: 1.55rem; color: var(--ivoire); }

.dash-calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dash-calendar-head .eyebrow {
  text-align: center;
  flex: 1;
}

.cal-nav-btn {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: 1px solid var(--ligne);
  background: var(--charbon);
  color: var(--sable);
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  line-height: 1;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.cal-nav-btn:hover { border-color: var(--bronze); color: var(--ivoire); }

.cal-weekdays {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sable-dim);
}

.cal-grid {
  margin-top: 4px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.cal-clear-btn {
  margin-top: 16px;
  width: 100%;
}

.booking-row {
  display: grid;
  grid-template-columns: auto 1.4fr 1fr 0.8fr 1.2fr;
  gap: 16px;
  align-items: center;
  padding: 18px;
  border: 1px solid var(--ligne);
  margin-bottom: 12px;
  transition: border-color 0.3s ease, background 0.3s ease;
}

@keyframes new-row-glow {
  0% { border-color: var(--bronze-vif); background: rgba(227, 191, 90, 0.09); }
  100% { border-color: var(--ligne); background: transparent; }
}
.booking-row.is-new { animation: new-row-glow 2.4s ease-out; }

.booking-row.is-clickable { cursor: pointer; }
.booking-row.is-clickable:hover { border-color: var(--bronze); background: rgba(227, 191, 90, 0.04); }

/* Trajet compact — reprend la même mise en page que la carte "Trajet"
   de la page de suivi (.trip-route-row : départ et arrivée empilés,
   reliés par un fil avec point plein / point creux), réduite pour
   tenir dans une ligne de la liste des courses de l'espace chauffeur.
   Remplace l'ancienne ligne "adresse1 → adresse2" qui débordait dès
   que les adresses étaient un peu longues. */
.booking-route { margin-top: 0; gap: 8px; }
.booking-route .trip-route-rail { width: 8px; padding-top: 4px; }
.booking-route .trip-route-dot { width: 6px; height: 6px; }
.booking-route .trip-route-connector { min-height: 12px; margin: 3px 0; }
.booking-route .trip-route-addresses { gap: 6px; }
.booking-route .trip-route-label { font-size: 0.6rem; }
.booking-route .trip-route-address { font-size: 0.86rem; margin-top: 1px; line-height: 1.3; }

/* ---------------- Détail de course (modale chauffeur) ---------------- */
.detail-section-title {
  margin: 20px 0 2px 0;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bronze-vif);
}
.detail-section-title:first-child { margin-top: 0; }
.detail-row { margin-top: 10px; }
.detail-row-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sable-dim);
}
.detail-row-value {
  display: block;
  margin-top: 3px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ivoire);
}
.detail-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; align-items: center; }

/* Notes internes par client — mise en avant discrète pour signaler
   que cette zone n'est jamais visible du client (bordure pointillée,
   même traitement que la note de réservation côté formulaire client). */
.notes-internal-field { margin-top: 10px; }
.notes-internal-field textarea {
  border: 1px dashed var(--bronze-mat);
}
.notes-internal-field textarea:focus {
  border-style: solid;
  border-color: var(--bronze);
}
.notes-internal-meta {
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--sable-dim);
  line-height: 1.5;
}
.notes-internal-status {
  font-size: 0.82rem;
  color: var(--bronze-vif);
}

.row-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--charbon);
  border: 1px solid var(--bronze-mat);
  color: var(--bronze-vif);
  flex: 0 0 auto;
}
.row-icon svg { width: 15px; height: 15px; }
.row-icon.is-done { border-color: var(--ligne); color: var(--sable-dim); background: var(--noir); }
.row-icon.is-cancelled { border-color: rgba(176, 106, 90, 0.4); color: var(--rouge-discret); background: var(--noir); }

.row-progress {
  margin-top: 8px;
  height: 2px;
  background: var(--ligne);
  border-radius: 999px;
  overflow: hidden;
  width: 100%;
  max-width: 160px;
}
.row-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--bronze-mat), var(--bronze-vif));
  border-radius: 999px;
  transition: width 0.6s ease;
}

.badge {
  display: inline-block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 5px 11px;
  border: 1px solid var(--ligne);
  color: var(--sable);
  width: fit-content;
}

.badge.pending { color: var(--bronze); border-color: var(--bronze-mat); }
.badge.active { color: var(--vert-confirme); border-color: var(--vert-confirme); }
.badge.done { color: var(--sable-dim); }
.badge.cancelled { color: var(--rouge-discret); border-color: rgba(176, 106, 90, 0.4); }

.row-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.gate { min-height: 70vh; display: flex; align-items: center; justify-content: center; }
.gate .card { width: min(380px, 100%); text-align: center; border: 1px solid var(--ligne); padding: 34px; }

.gate-card { position: relative; animation: hero-reveal 0.5s ease both; }

.gate-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--bronze-vif), var(--bronze-mat));
  color: var(--noir);
  box-shadow: 0 14px 30px rgba(227, 191, 90, 0.2);
}
.gate-icon svg { width: 24px; height: 24px; }

.gate-icon.locked {
  background: linear-gradient(160deg, #c99a8c, var(--rouge-discret));
  box-shadow: none;
}

.gate-msg {
  font-size: 0.85rem;
  margin-top: 12px;
  color: var(--rouge-discret);
}

#gate-submit:disabled { opacity: 0.5; cursor: not-allowed; }

.card { border: 1px solid var(--ligne); padding: 24px; }

.empty-state { text-align: center; padding: 60px 20px; color: var(--sable); }

.lookup-form {
  margin-top: 22px;
  display: flex;
  gap: 10px;
  max-width: 420px;
  margin-inline: auto;
  flex-wrap: wrap;
}

.lookup-form input {
  flex: 1;
  min-width: 220px;
  background: var(--noir);
  border: 1px solid var(--ligne);
  color: var(--ivoire);
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-family: var(--font-body);
  text-transform: uppercase;
}

.lookup-form input:focus { border-color: var(--bronze); outline: none; }

/* ---------------- Suivi : actions client ---------------- */
.suivi-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 26px;
}

.suivi-actions .btn { width: 100%; }

.policy-box {
  margin-top: 22px;
  border: 1px solid var(--ligne);
  padding: 18px 20px;
  font-size: 0.82rem;
  color: var(--sable);
}

.policy-box h4 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bronze);
  margin-bottom: 10px;
}

.policy-box summary {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bronze);
  cursor: pointer;
  list-style: none;
}
.policy-box summary::-webkit-details-marker { display: none; }
.policy-box summary::after { content: "+"; float: right; }
.policy-box[open] summary::after { content: "−"; }
.policy-box summary ~ ul { margin-top: 12px; }

.policy-box ul { margin: 0; padding-left: 18px; }
.policy-box li { margin-bottom: 4px; }

.refund-highlight {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--bronze-mat);
  color: var(--bronze-vif);
  font-size: 0.85rem;
}

/* Contact chauffeur */
.driver-contact-card {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  border: 1px solid var(--ligne);
  padding: 18px 20px;
}

.driver-phone-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 0.95rem;
  color: var(--sable);
}

.driver-phone-line .whatsapp-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.driver-contact-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.driver-contact-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.driver-contact-actions svg { width: 16px; height: 16px; }

/* Pourboire */
.tip-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 16px;
}

.tip-option {
  border: 1px solid var(--ligne);
  background: transparent;
  color: var(--ivoire);
  padding: 12px 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.95rem;
}

.tip-option:hover { border-color: var(--bronze); }
.tip-option.selected { border-color: var(--bronze-vif); color: var(--bronze-vif); }

.tip-confirmation {
  margin-top: 16px;
  color: var(--vert-confirme);
  font-size: 0.85rem;
}

/* ---------------- Bandeau cookies ---------------- */
.cookie-banner {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 200;
  max-width: 640px;
  margin-inline: auto;
  background: var(--anthracite);
  border: 1px solid var(--ligne);
  box-shadow: var(--shadow-soft);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.cookie-banner p {
  font-size: 0.8rem;
  color: var(--sable);
  margin: 0;
  flex: 1 1 320px;
}

.cookie-banner a { color: var(--bronze-vif); text-decoration: underline; }
.cookie-banner-actions { flex: 0 0 auto; }

/* ---------------- FAQ ---------------- */
.faq-list { margin-top: 30px; border-top: 1px solid var(--ligne); }

.faq-item { border-bottom: 1px solid var(--ligne); }

.faq-question {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--ivoire);
  font-family: var(--font-display);
  font-size: 1.05rem;
  padding: 20px 4px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.faq-question:hover { color: var(--bronze-vif); }

.faq-icon {
  flex-shrink: 0;
  font-size: 1.1rem;
  color: var(--bronze);
  transition: transform 0.2s ease;
}

.faq-item.open .faq-icon { transform: rotate(45deg); }

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
  color: var(--sable);
  font-size: 0.92rem;
}

.faq-item.open .faq-answer { max-height: 400px; }

.faq-answer-inner { padding: 0 4px 22px; }

/* ---------------- Pages légales ---------------- */
.legal-content { margin-top: 20px; max-width: 760px; }
.legal-content h2 { font-size: 1.3rem; margin-top: 38px; margin-bottom: 12px; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content p, .legal-content li { color: var(--sable); font-size: 0.92rem; margin-bottom: 10px; }
.legal-content ul { padding-left: 20px; }
.legal-content strong { color: var(--ivoire); }
.legal-updated { color: var(--sable-dim); font-size: 0.78rem; margin-top: 6px; }

.footer-links {
  margin-top: 10px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 0.78rem;
}

.footer-links a { color: var(--sable-dim); text-decoration: underline; }
.footer-links a:hover { color: var(--bronze-vif); }

/* ---------------- Page Contact ---------------- */
.contact-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.contact-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.contact-icon {
  width: 32px;
  height: 32px;
  color: var(--bronze-vif);
  margin-bottom: 12px;
}

.contact-icon svg { width: 100%; height: 100%; }

.contact-card .btn { margin-top: 16px; }

/* ---------------- Responsive ---------------- */
@media (max-width: 900px) {
  .usages-grid { grid-template-columns: 1fr; }
  .ritual { grid-template-columns: 1fr 1fr; row-gap: 34px; }
  .ritual::before { display: none; }
  .trust-grid { grid-template-columns: 1fr; }
  .zone-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr 1fr; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-intro { padding-top: 0; }
  .field-row { grid-template-columns: 1fr; }
  .driver-layout { grid-template-columns: 1fr; }
  .driver-portrait { max-width: 260px; margin-inline: auto; }
  .booking-row { grid-template-columns: 1fr; }
  .row-icon { display: none; }
  .dash-stats { grid-template-columns: 1fr; }
  .dash-period-row { grid-template-columns: 1fr; }
  .nav-toggle { display: flex; }
  .nav-right { gap: 10px; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: rgba(11, 11, 10, 0.97);
    border-bottom: 1px solid var(--ligne);
    padding: 6px 0;
  }
  .nav-links.is-open { display: flex; }
  .nav-links a {
    display: block;
    padding: 14px 24px;
  }
  /* Sous 900px, le texte du numéro disparaît : seule l'icône
     WhatsApp reste, sous forme de bouton rond à côté du menu ☰
     — assez de place pour le pouce, sans encombrer l'en-tête. */
  .nav-whatsapp {
    padding: 9px;
    border-radius: 50%;
  }
  .nav-whatsapp-text { display: none; }
  .nav-translate {
    padding: 9px;
    border-radius: 50%;
  }
  .nav-translate-text { display: none; }
  .nav-translate-menu {
    right: -8px;
    max-width: calc(100vw - 32px);
  }
  .suivi-actions { grid-template-columns: 1fr 1fr; }
  .tip-options { grid-template-columns: repeat(2, 1fr); }
  .cookie-banner { flex-direction: column; align-items: stretch; }
}

@media (max-width: 420px) {
  .brand-name { font-size: 1.18rem; }
  .contact-grid { grid-template-columns: 1fr; }
  .dash-period-stats { grid-template-columns: 1fr 1fr; row-gap: 16px; }
}