/* ============================================================
   POLICES LOCALES (Phase perf/RGPD) — Outfit + Inter
   Hébergées en local dans /fonts/ (plus de chargement Google).
   Voir refactor-log.md.
   ============================================================ */
/* Outfit — titres (--font-display) */
@font-face { font-display: swap; font-family: "Outfit"; font-style: normal; font-weight: 400; src: url("/fonts/outfit-v15-latin-regular.woff2") format("woff2"); }
@font-face { font-display: swap; font-family: "Outfit"; font-style: normal; font-weight: 500; src: url("/fonts/outfit-v15-latin-500.woff2") format("woff2"); }
@font-face { font-display: swap; font-family: "Outfit"; font-style: normal; font-weight: 600; src: url("/fonts/outfit-v15-latin-600.woff2") format("woff2"); }
@font-face { font-display: swap; font-family: "Outfit"; font-style: normal; font-weight: 700; src: url("/fonts/outfit-v15-latin-700.woff2") format("woff2"); }
@font-face { font-display: swap; font-family: "Outfit"; font-style: normal; font-weight: 800; src: url("/fonts/outfit-v15-latin-800.woff2") format("woff2"); }
/* Inter — texte (--font-body) */
@font-face { font-display: swap; font-family: "Inter"; font-style: normal; font-weight: 400; src: url("/fonts/inter-v20-latin-regular.woff2") format("woff2"); }
@font-face { font-display: swap; font-family: "Inter"; font-style: normal; font-weight: 500; src: url("/fonts/inter-v20-latin-500.woff2") format("woff2"); }
@font-face { font-display: swap; font-family: "Inter"; font-style: normal; font-weight: 600; src: url("/fonts/inter-v20-latin-600.woff2") format("woff2"); }
@font-face { font-display: swap; font-family: "Inter"; font-style: normal; font-weight: 700; src: url("/fonts/inter-v20-latin-700.woff2") format("woff2"); }

*, *::before, *::after { box-sizing: border-box; }/* ============================================================
   MY VTC GO — GLOBAL STYLESHEET v2
   Direction : sobre, contrasté, blanc/noir, accent vert de marque
   Inspiré de l'esthétique samsung.com (contraste fort, netteté, espace blanc généreux, pas de fioritures)
   ============================================================ */

/* Polices désormais LOCALES : voir bloc @font-face en haut de ce fichier. */

:root {
  /* ---- Color tokens ---- */
  --ink:        #0A0A0A;   /* texte principal, quasi-noir */
  --black:      #000000;
  --white:      #FFFFFF;
  --surface:    #F7F8F7;   /* sections alternées, très légèrement teinté */
  --card:       #FFFFFF;
  --stroke:     #E6E8E6;   /* hairline borders */
  --stroke-strong: #D5D8D5;

  --text-hi:    #0A0A0A;
  --text-mid:   #54585A;
  --text-low:   #626664;

  --accent:        #107C56;  /* vert de marque (logo), ajusté pour contraste AA sur fond clair */
  --accent-soft:   #22C58B;
  --accent-dim:    #E8F7EF;  /* fond vert très clair pour badges */
  --accent-line:   #BCE8D3;

  --amber:      #FF9F1C;
  --amber-dim:  #FFF1DD;

  --on-dark-text: #FFFFFF;

  /* ---- Radii (légèrement arrondi, pas excessif) ---- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ---- Shadows (discrètes) ---- */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.12);

  /* ---- Type scale ---- */
  --font-display: "Outfit", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  /* ---- Layout ---- */
  --container: 1180px;
  --gutter: 24px;
  --header-h: 72px;
}/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }ul[class], ol[class] { margin: 0; padding: 0; list-style: none; }img, picture, svg { max-width: 100%; display: block; }input, button, textarea, select { font: inherit; color: inherit; }button { cursor: pointer; }a { color: inherit; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {*, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}/* ============================================================
   BASE
   ============================================================ */
body {
  background: var(--white);
  color: var(--text-hi);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-hi);
  line-height: 1.12;
  letter-spacing: -0.015em;
  font-weight: 700;
}h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 800; }h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); }p { color: var(--text-mid); }.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px solid var(--accent-line);
  padding: 7px 16px;
  border-radius: var(--r-pill);
}.eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}.section {
  padding: clamp(52px, 8vw, 100px) 0;
}.section-head {
  max-width: 680px;
  margin-bottom: clamp(32px, 5vw, 52px);
}.section-head p { font-size: 1.05rem; margin-top: 14px; }/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.96rem;
  padding: 15px 26px;
  border-radius: var(--r-pill);
  border: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}.btn[hidden] { display: none; }.btn svg { width: 18px; height: 18px; flex-shrink: 0; }.btn-accent {
  background: var(--accent);
  color: var(--white);
}.btn-accent:hover { background: var(--accent-soft); }.btn-ghost {
  background: var(--white);
  color: var(--text-hi);
  border: 1.5px solid var(--stroke-strong);
}.btn-ghost:hover { border-color: var(--ink); }.btn-sm { padding: 11px 20px; font-size: 0.88rem; }/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: var(--black);
  border-bottom: 1px solid #1E1E1E;
}.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--white);
  flex-shrink: 0;
  letter-spacing: -0.01em;
}.logo img {
  height: 32px; width: auto;
}/* ============================================================
   ANIMATION LOGO — marche au premier chargement (accueil uniquement)
   Le logo lui-même n'est jamais modifié, seules 2 petites jambes
   SVG sont superposées pendant l'animation, puis retirées du DOM.
   ============================================================ */
.logo-walk-wrap {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  height: 32px;
  flex-shrink: 0;
}
.logo-walk-wrap img {
  height: 32px; width: auto;
  position: relative;
  z-index: 2;
}.logo-legs {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}.logo-legs line {
  stroke: var(--accent);
  stroke-width: 2.4;
  stroke-linecap: round;
}.logo-bounce {
  animation: logoBounce 0.45s cubic-bezier(.34,1.56,.64,1);
}
@media (max-width: 1024px) {.logo-walk-wrap { overflow: hidden; }.logo-legs { display: none !important; }.logo-bounce { animation: none !important; }.logo-walk-wrap img { position: static; }
}
@keyframes logoBounce {0% { transform: scale(1); }40% { transform: scale(1.18); }100% { transform: scale(1); }
}.nav-desktop {
  display: flex;
  align-items: center;
  gap: 28px;
}.nav-desktop a {
  font-size: 0.92rem;
  font-weight: 500;
  color: rgba(255,255,255,0.68);
  transition: color 0.15s ease;
  position: relative;
}.nav-desktop a:hover { color: var(--white); }.nav-desktop a.nav-cta {
  background: var(--accent);
  color: var(--white);
  padding: 8px 16px;
  border-radius: var(--r-pill);
  font-weight: 700;
}.nav-desktop a.nav-cta:hover { background: var(--accent-hover, var(--accent)); color: var(--white); opacity: 0.92; }.nav-dropdown { position: relative; }.nav-dropdown > span {
  display: flex; align-items: center; gap: 5px;
  font-size: 0.92rem; font-weight: 500; color: rgba(255,255,255,0.68);
  cursor: pointer;
}.nav-dropdown > span svg { width: 13px; height: 13px; transition: transform 0.2s ease; }.nav-dropdown:hover > span { color: var(--white); }.nav-dropdown:hover > span svg { transform: rotate(180deg); }.dropdown-panel {
  position: absolute;
  top: 100%;
  margin-top: 14px;
  left: -10px;
  background: var(--white);
  border: 1px solid var(--stroke);
  border-radius: var(--r-md);
  padding: 10px;
  min-width: 220px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}.nav-dropdown::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 14px;
}.nav-dropdown:hover .dropdown-panel {
  opacity: 1; visibility: visible; transform: translateY(0);
}.dropdown-panel a {
  display: block;
  padding: 10px 14px;
  border-radius: var(--r-xs);
  font-size: 0.9rem;
  color: var(--text-mid);
}.dropdown-panel a:hover { background: var(--surface); color: var(--text-hi); }.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}.phone-link {
  display: none;
  align-items: center; gap: 8px;
  font-size: 0.88rem; font-weight: 600; color: var(--white);
}.phone-link svg { width: 16px; height: 16px; }
@media (min-width: 860px) {.phone-link { display: flex; } }.burger {
  display: flex;
  width: 42px; height: 42px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,0.1);
  border: 1.5px solid rgba(255,255,255,0.25);
  align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--white);
}.burger svg { width: 20px; height: 20px; }/* Sélecteur de langue (top bar) */
.lang-switcher {
  position: relative;
  display: flex;
  align-items: center;
}
.lang-switcher::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 12px;
}.lang-current { display: flex; }
.lang-current {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(255,255,255,0.25);
  border-radius: var(--r-pill);
  padding: 6px 10px;
  cursor: pointer;
}.lang-current .flag-icon {
  display: block;
  width: 20px; height: 14px;
  border-radius: 3px;
  flex-shrink: 0;
}
.lang-current-code {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: rgba(255,255,255,0.85);
  line-height: 1;
}
.lang-current svg {
  width: 10px; height: 10px;
  color: rgba(255,255,255,0.65);
  transition: transform 0.2s ease;
}.lang-switcher:hover .lang-current svg, .lang-switcher:focus-within .lang-current svg { transform: rotate(180deg); }.lang-panel {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 12px;
  background: var(--white);
  border: 1px solid var(--stroke);
  border-radius: var(--r-md);
  padding: 8px;
  min-width: 130px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 250;
}.lang-switcher:hover .lang-panel, .lang-switcher:focus-within .lang-panel, .lang-switcher.open .lang-panel {
  opacity: 1; visibility: visible; transform: translateY(0);
}.lang-option {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: var(--r-xs);
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--text-mid);
}.lang-option .flag-icon {
  width: 18px; height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}.lang-option:hover { background: var(--surface); color: var(--text-hi); }.lang-option.active { color: var(--text-hi); font-weight: 700; background: var(--accent-dim); }


@media (max-width: 1019px) {.nav-desktop { display: none; }

  body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }

  .res-reorder { display: flex; flex-direction: column; }
  .res-reorder .res-form-section { order: 1; }
  .res-reorder .res-hero { order: 2; }
  .res-reorder .logo-strip { order: 3; }
}/* Mobile drawer */
.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 300;
  visibility: hidden;
  overflow: hidden;
}.mobile-drawer.open { visibility: visible; }.mobile-drawer .backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.4);
  opacity: 0;
  transition: opacity 0.25s ease;
}.mobile-drawer.open .backdrop { opacity: 1; }.mobile-drawer .panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(80vw, 300px);
  min-width: 0;
  max-width: 100vw;
  background: var(--white);
  border-left: none;
  padding: 0;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(.2,.9,.25,1);
  overflow-y: auto;
  scrollbar-width: none;
}
.mobile-drawer .panel::-webkit-scrollbar { width: 0; display: none; }
.mobile-drawer nav { padding: 0 22px 22px; }.mobile-drawer.open .panel { transform: translateX(0); }.mobile-drawer .panel-head {
  display: flex; justify-content: space-between; align-items: center;
  margin: 0 0 24px;
  padding: 18px 22px;
  background: var(--black);
  position: sticky; top: 0;
}.mobile-drawer .panel-head .logo { color: var(--white); }.mobile-drawer .close-btn {
  width: 38px; height: 38px; border-radius: var(--r-sm);
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center;
  color: var(--white);
}.mobile-drawer .close-btn svg { width: 18px; height: 18px; }.mobile-drawer nav a, .mobile-drawer nav .group-label {
  display: block;
  padding: 12px 4px;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--text-hi);
  border-bottom: 1px solid var(--stroke);
}.mobile-drawer nav .group-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-low);
  font-weight: 600;
  border-bottom: none;
  padding-top: 22px;
  padding-bottom: 6px;
}.mobile-drawer .cta-block { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mobile-drawer .cta-block .btn {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 13px 16px;
  font-size: 0.92rem;
  white-space: normal;
  overflow-wrap: anywhere;
  border-radius: var(--r-pill);
}
.mobile-drawer .btn-call-menu {
  background: var(--black);
  color: var(--white);
}
.mobile-drawer .btn-wa-menu {
  background: var(--accent);
  color: var(--white);
}/* ============================================================
   BOOKING FORM (shared component — hero + dedicated page)
   ============================================================ */
.booking-card {
  background: var(--white);
  border: 1px solid var(--stroke);
  border-radius: var(--r-xl);
  padding: clamp(14px, 4vw, 30px);
  box-shadow: var(--shadow-lg);
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}.booking-card .booking-title {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
}.booking-card .booking-title h2 { font-size: 1.1rem; margin: 0; }.booking-card .booking-title .live {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.74rem; color: var(--accent); font-weight: 600;
}.booking-card .booking-title .live .pulse {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 0 rgba(22,165,114,0.5);
  animation: pulse 1.8s infinite;
}
@keyframes pulse {0% { box-shadow: 0 0 0 0 rgba(22,165,114,0.45); }70% { box-shadow: 0 0 0 8px rgba(22,165,114,0); }100% { box-shadow: 0 0 0 0 rgba(22,165,114,0); }
}.trip-toggle {
  display: flex;
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--r-pill);
  padding: 4px;
  margin-bottom: 16px;
  position: relative;
  width: 100%;
  box-sizing: border-box;
}.trip-toggle button {
  flex: 1;
  background: none; border: none;
  padding: 10px 12px;
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-mid);
  border-radius: var(--r-pill);
  position: relative; z-index: 2;
  transition: color 0.2s ease;
}.trip-toggle button.active { color: var(--white); }.trip-toggle .slider {
  position: absolute;
  top: 4px; left: 4px;
  height: calc(100% - 8px);
  width: calc(50% - 4px);
  background: var(--ink);
  border-radius: var(--r-pill);
  transition: transform 0.28s cubic-bezier(.2,.9,.25,1);
  z-index: 1;
}.trip-toggle.return .slider { transform: translateX(100%); }.form-row { display: grid; gap: 12px; margin-bottom: 12px; }.form-row.cols-2 { grid-template-columns: 1fr 1fr; }.field { display: flex; flex-direction: column; gap: 6px; }.field label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-low);
  padding-left: 2px;
}.field input, .field select {
  background: var(--white);
  border: 1.5px solid var(--stroke-strong);
  border-radius: var(--r-sm);
  padding: 13px 14px;
  font-size: 0.92rem;
  color: var(--text-hi);
  width: 100%;
  transition: border-color 0.15s ease;
}.field input::placeholder { color: var(--text-low); }.field input:focus, .field select:focus {
  border-color: var(--ink);
  outline: none;
}.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%2354585A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 34px;
}.return-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 12px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.25s ease, margin 0.3s ease;
}.return-fields.show {
  max-height: 320px;
  opacity: 1;
  overflow: visible;
}.form-foot {
  text-align: center;
  font-size: 0.76rem;
  color: var(--text-low);
  margin-top: 12px;
}

@media (max-width: 640px) {.return-fields { grid-template-columns: 1fr; }.form-row.cols-2 { grid-template-columns: 1fr; }

  .form-row.cols-2 > .field > label,
  .form-row.cols-2 > .field > .depart-gps-labels { min-height: 0; }
}/* ============================================================
   CARDS / CHIPS / MISC SHARED COMPONENTS
   ============================================================ */
.card {
  background: var(--white);
  border: 1px solid var(--stroke);
  border-radius: var(--r-lg);
  padding: 28px;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}.card:hover { transform: translateY(-3px); border-color: var(--stroke-strong); box-shadow: var(--shadow-md); }.icon-tile {
  width: 50px; height: 50px;
  border-radius: var(--r-sm);
  background: var(--accent-dim);
  border: 1px solid var(--accent-line);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}.icon-tile svg { width: 24px; height: 24px; color: var(--accent); }.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.8rem; font-weight: 500;
  color: var(--text-mid);
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--r-pill);
  padding: 7px 14px;
}/* Reveal-on-scroll utility */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(.2,.7,.2,1), transform 0.6s cubic-bezier(.2,.7,.2,1);
}.reveal.in { opacity: 1; transform: translateY(0); }/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--ink);
  color: #C9CBC9;
  padding: 64px 0 28px;
}.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 40px;
}.footer-brand .logo { margin-bottom: 14px; color: var(--white); }.footer-brand p { font-size: 0.92rem; max-width: 320px; color: #9A9D9A; }.footer-col h3 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #848884;
  font-weight: 600;
  margin-bottom: 16px;
}.footer-col a, .footer-col li {
  display: block;
  font-size: 0.9rem;
  color: #C9CBC9;
  padding: 6px 0;
}.footer-col a:hover { color: var(--accent-soft); }.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
  padding-top: 28px;
  border-top: 1px solid #232423;
  font-size: 0.8rem;
  color: #848884;
}.footer-bottom .legal-links { display: flex; gap: 18px; }.footer-bottom a:hover { color: var(--white); }.footer-badges { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 6px; align-items: center; }.footer-badges .chip { background: #161716; border-color: #2A2B2A; color: #C9CBC9; }.footer-badges .chip:not(:last-child)::after { content: "•"; color: #6b6d6b; position: absolute; right: -13px; top: 50%; transform: translateY(-50%); }.footer-badges .chip { position: relative; }

@media (max-width: 900px) {.footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
/* ============================================================
   LOGO STRIP — bande de réassurance (Google Avis, Carte Pro VTC...)
   Réutilisable sur toutes les pages, pas seulement l'accueil
   ============================================================ */
.logo-strip {
  border-bottom: 1px solid var(--stroke);
  background: var(--surface);
  padding: 26px 0;
}.logo-strip .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
}.logo-strip .tag {
  font-size: 0.82rem;
  color: var(--text-low);
  flex-shrink: 0;
}.logo-strip .marks {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}.logo-strip .marks span {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-mid);
}.logo-strip .marks span { position: relative; }.logo-strip .marks span:not(:last-child)::after { content: "•"; color: #6b6d6b; position: absolute; right: -16px; top: 50%; transform: translateY(-50%); }/* ============================================================
   BARRE DE NAVIGATION MOBILE/TABLETTE (façon V1)
   Barre plate noire, 5 items, cercle central noir surélevé avec
   logo + halo vert léger. Textes blancs. Visible < 1020px.
   ============================================================ */
.sticky-cta {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 190;
  background: var(--black);
  padding-bottom: env(safe-area-inset-bottom);
  pointer-events: none;
}
@media (min-width: 1020px) {.lang-switcher { display: flex; align-items: center; }.lang-current { display: flex; }
.nav-desktop { display: flex; }.burger { display: none; }
 .sticky-cta { display: none; } }
.sticky-cta .nav-items {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px 10px;
}
.sticky-cta .nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-decoration: none;
  color: var(--white);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  pointer-events: auto;
}
.sticky-cta .nav-item svg,
.sticky-cta .nav-item .nav-ic {
  width: 22px; height: 22px;
  color: var(--white); fill: var(--white);
}
.sticky-cta .nav-item span {
  font-size: 0.64rem;
  font-weight: 500;
  color: var(--white);
  letter-spacing: 0.02em;
}
/* Bouton central : cercle noir surélevé + logo + halo vert léger */
.sticky-cta .nav-center {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-decoration: none;
  width: 72px;
  pointer-events: auto;
}
.sticky-cta .nav-center .nav-logo-wrap {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--black);
  display: flex; align-items: center; justify-content: center;
  margin-top: -28px;
  border: 3px solid var(--black);
  box-shadow: 0 0 12px 2px rgba(16,124,86,0.55);
}
.sticky-cta .nav-center .nav-logo-wrap img {
  width: 42px; height: 42px; display: block;
  filter: drop-shadow(0 0 2px rgba(16,124,86,0.5));
}
.sticky-cta .nav-center span {
  font-size: 0.64rem;
  font-weight: 600;
  color: var(--white);
  letter-spacing: 0.03em;
}


/* ============================================================
   FAQ ACCORDION (shared)
   ============================================================ */
.faq-item {
  border: 1px solid var(--stroke);
  border-radius: var(--r-md);
  background: var(--white);
  margin-bottom: 12px;
  overflow: hidden;
}.faq-item button {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  background: none; border: none;
  padding: 20px 22px;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-hi);
}.faq-item .icon-plus {
  width: 28px; height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--stroke);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}.faq-item .icon-plus::before, .faq-item .icon-plus::after {
  content: ""; position: absolute;
  background: var(--text-mid);
  transition: transform 0.25s ease;
}.faq-item .icon-plus::before { width: 10px; height: 1.6px; }.faq-item .icon-plus::after { width: 1.6px; height: 10px; }.faq-item.open .icon-plus::after { transform: rotate(90deg) scaleY(0); }.faq-item.open .icon-plus { background: var(--accent-dim); border-color: var(--accent-line); }.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}.faq-answer p {
  padding: 0 22px 20px;
  font-size: 0.93rem;
}
/* ============================================================
   FAQ — variante "liste épurée" (trait de séparation, sans carte)
   Classe .faq-list-simple ajoutée volontairement sur certaines pages
   (Alentours ×3, Villes du Luxembourg) en plus de .faq-list, pour ne
   jamais affecter les autres pages qui utilisent .faq-list avec le
   style "carte" par défaut ci-dessus, ou leur propre CSS (transfert-
   gare, transfert-aeroport).
   ============================================================ */
.faq-list-simple { max-width: 820px; margin: 0 auto; }
.faq-list-simple .faq-item { border: none; border-radius: 0; background: none; margin-bottom: 0; border-bottom: 1px solid var(--stroke); }
.faq-list-simple .faq-item button {
  width: 100%; background: none; border: none; text-align: left;
  padding: 22px 0;
  font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: var(--text-hi);
  cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px;
}
.faq-list-simple .faq-item .icon-plus { position: relative; width: 20px; height: 20px; flex-shrink: 0; background: none; border: none; border-radius: 0; }
.faq-list-simple .faq-item .icon-plus::before, .faq-list-simple .faq-item .icon-plus::after {
  content: ""; position: absolute; background: var(--accent);
  border-radius: 1px; transition: transform 0.25s ease;
}
.faq-list-simple .faq-item .icon-plus::before { top: 50%; left: 0; right: 0; height: 2px; width: auto; transform: translateY(-50%); }
.faq-list-simple .faq-item .icon-plus::after { left: 50%; top: 0; bottom: 0; width: 2px; height: auto; transform: translateX(-50%); }
.faq-list-simple .faq-item.open .icon-plus::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }
.faq-list-simple .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.faq-list-simple .faq-answer p { padding: 0 0 22px; font-size: 0.96rem; line-height: 1.7; color: var(--text-mid); margin: 0; }
.faq-list-simple .faq-answer a { color: var(--accent); text-decoration: none; font-weight: 500; }
.faq-list-simple .faq-answer a:hover { text-decoration: underline; }
/* ============================================================
   ENGAGEMENTS — .commitment-grid / .commitment-item
   Identique sur 7 pages (home, bienveillance, mise-a-disposition,
   vtc-metz/thionville/amneville/luxembourg). .commitment-item est
   strictement identique partout. .commitment-grid varie seulement
   sur home.css (3 colonnes au lieu de 2) : la valeur par défaut
   ci-dessous est à 2 colonnes, home.css la surcharge localement.
   ============================================================ */
.commitment-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 760px) { .commitment-grid { grid-template-columns: 1fr; } }
.commitment-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px;
  background: var(--white);
  border: 1px solid var(--stroke);
  border-radius: var(--r-md);
}
.commitment-item .ci-check {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--ink); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
}
.commitment-item .ci-check svg { width: 21px; height: 21px; color: var(--white); shape-rendering: geometricPrecision; }
.commitment-item h4 { font-size: 0.94rem; margin-bottom: 4px; }
.commitment-item p { font-size: 0.85rem; margin: 0; }
/* ============================================================
   BANDEAU DE COUVERTURE — .coverage-strip / .coverage-track
   Identique sur 3 pages (vtc-thionville, vtc-amneville, vtc-luxembourg),
   vérifié ligne par ligne, aucune variation trouvée.
   ============================================================ */
.coverage-strip {
  background: var(--white);
  border-top: 1px solid var(--stroke);
  border-bottom: 1px solid var(--stroke);
  padding: 18px 0;
  overflow: hidden;
}
.coverage-track {
  display: flex; gap: 32px; white-space: nowrap;
  font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; color: var(--text-low);
  overflow-x: auto;
  scrollbar-width: none;
}
.coverage-track::-webkit-scrollbar { display: none; }
.coverage-track span.dot-sep { color: var(--stroke-strong); }
/* ============================================================
   TUILES "LANDMARK" — .landmark-grid / .landmark-tile
   Identique sur 2 pages (vtc-metz, vtc-luxembourg), vérifié ligne
   par ligne y compris la partie responsive (même seuil 700px).
   ============================================================ */
.landmark-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 90px;
  gap: 12px;
}
.landmark-tile {
  background: var(--white);
  border: 1px solid var(--stroke);
  border-radius: var(--r-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.landmark-tile:hover { border-color: var(--stroke-strong); transform: translateY(-2px); }
.landmark-tile .lt-title { font-family: var(--font-display); font-weight: 700; font-size: 0.92rem; color: var(--text-hi); margin-bottom: 2px; }
.landmark-tile .lt-sub { font-size: 0.76rem; color: var(--text-low); }
.landmark-tile.span-2 { grid-column: span 2; }
.landmark-tile.dark { background: var(--ink); border-color: var(--ink); }
.landmark-tile.dark .lt-title { color: var(--white); }
.landmark-tile.dark .lt-sub { color: rgba(255,255,255,0.55); }
@media (max-width: 700px) {
  .landmark-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 84px; }
  .landmark-tile.span-2 { grid-column: span 2; }
}
/* ============================================================
   BLOC "POURQUOI NOUS" — .why-list / .why-item
   Identique sur 2 pages (vtc-metz, vtc-thionville), vérifié ligne
   par ligne y compris la partie responsive (même seuil 760px).
   ============================================================ */
.why-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--stroke);
  border: 1px solid var(--stroke);
  border-radius: var(--r-lg);
  overflow: hidden;
}
@media (max-width: 760px) { .why-list { grid-template-columns: 1fr; } }
.why-item {
  background: var(--white);
  padding: 28px;
}
.why-item .why-num {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 10px;
  display: block;
}
.why-item h3 { font-size: 1.02rem; margin-bottom: 8px; }
.why-item p { font-size: 0.9rem; margin: 0; }
/* FAQ des pages transfert (gare/aéroport) : utilise désormais le même
   système par défaut que la home (.faq-item/.faq-answer bruts, plus
   haut dans ce fichier) — pas de classe wrapper dédiée, pour éviter
   tout écart de comportement avec la version qui fonctionne partout. */
/* ============================================================
   READ MORE — système "Lire la suite" accessible, sans hauteur fixe
   Réutilisable sur toutes les pages (accueil + pages villes)

   IMPORTANT : .read-more-content doit contenir UN SEUL enfant direct
   (.read-more-inner), qui lui-même contient tout le texte à replier.
   La technique grid-template-rows: 0fr/1fr ne fonctionne correctement
   que sur une grille à une seule ligne — plusieurs enfants directs
   (plusieurs <p>/<h3>...) cassent silencieusement l'animation.
   ============================================================ */
.read-more-wrap {
  margin-top: 4px;
}.read-more-content {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.35s ease;
}.read-more-content > .read-more-inner {
  overflow: hidden;
  min-height: 0;
}.read-more-inner p {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--text-mid);
  margin-top: 14px;
}
/* ============================================================
   CALLOUT BIENVEILLANCE — bloc visuel réutilisable
   (pages villes + alentours, renvoi contextuel vers /bienveillance/)
   ============================================================ */
.bv-callout {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  margin-top: 24px;
}
.bv-callout-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  color: var(--accent);
}
.bv-callout h3 {
  font-size: 1rem;
  margin-bottom: 6px;
  color: var(--text-hi);
}
.bv-callout p {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-mid);
  margin: 0 0 10px;
}
.bv-callout-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--accent);
  text-decoration: underline;
}
@media (max-width: 540px) {
  .bv-callout { flex-direction: column; gap: 10px; }
}.read-more-content.is-open {
  grid-template-rows: 1fr;
}.read-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink);
  border-bottom: 1.5px solid var(--stroke-strong);
  padding-bottom: 2px;
}.read-more-btn:hover { color: var(--accent); border-color: var(--accent); }.read-more-btn .read-more-chevron {
  width: 15px;
  height: 15px;
  transition: transform 0.25s ease;
}.read-more-btn[aria-expanded="true"] .read-more-chevron {
  transform: rotate(180deg);
}/* ============================================================
   NOUVEAU FORMULAIRE v2 — PRICE CARD, CANAL, COMPTEURS, RÉSUMÉ
   ============================================================ */

/* --- Price Card --- */
.price-reveal-card {
  background: var(--surface);
  border: 2px solid var(--accent-line);
  border-radius: var(--r-lg);
  padding: 20px;
  margin: 16px 0;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}.price-reveal-card[hidden] { display: none; }.price-reveal-card.price-card-visible { opacity: 1; transform: translateY(0); }.price-reveal-label {
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-mid); margin-bottom: 6px;
}.price-reveal-amount {
  font-family: var(--font-display); font-size: 2.2rem; font-weight: 800;
  color: var(--ink); line-height: 1.1; margin-bottom: 12px;
}.price-reveal-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink); color: var(--white);
  border: none; border-radius: var(--r-pill);
  padding: 13px 28px; font-size: 0.92rem; font-weight: 700;
  cursor: pointer; width: 100%;
  justify-content: center;
  transition: background 0.18s ease;
}.price-reveal-cta:hover { background: var(--accent); }.price-reveal-cta svg { width: 16px; height: 16px; flex-shrink: 0; }.price-reveal-reassurance {
  font-size: 0.75rem; color: var(--text-low); margin-top: 10px;
}/* --- Booking Summary --- */
.booking-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--surface); border: 1px solid var(--stroke);
  border-radius: var(--r-sm); padding: 10px 14px;
  margin-bottom: 14px;
}.booking-summary-text {
  font-size: 0.84rem; color: var(--text-hi); font-weight: 500;
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}.booking-summary-edit {
  display: flex; align-items: center; gap: 5px;
  font-size: 0.78rem; font-weight: 600; color: var(--accent);
  background: none; border: none; cursor: pointer; flex-shrink: 0;
}.booking-summary-edit svg { width: 13px; height: 13px; }/* --- Channel choice --- */
.channel-choice-label {
  font-size: 0.86rem; font-weight: 600; color: var(--text-hi);
  margin-bottom: 10px;
}.channel-radio {
  display: block; cursor: pointer; margin-bottom: 8px;
}.channel-radio input[type="radio"] { display: none; }.channel-radio-inner {
  display: flex; align-items: flex-start; gap: 12px;
  border: 2px solid var(--stroke-strong);
  border-radius: var(--r-md); padding: 12px 14px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
@media (max-width: 560px) {.footer-grid { grid-template-columns: 1fr; gap: 28px; }.footer-bottom { flex-direction: column; align-items: flex-start; }
.price-reveal-amount { font-size: 1.8rem; }.channel-radio-inner { padding: 10px 12px; }.booking-summary-text { font-size: 0.78rem; }
}.channel-radio:has(input:checked) .channel-radio-inner {
  border-color: var(--accent); background: var(--accent-dim);
}.channel-radio-inner > svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; color: var(--text-mid); }.channel-radio:has(input:checked) .channel-radio-inner > svg { color: var(--accent); }.channel-radio-title {
  display: block; font-size: 0.88rem; font-weight: 700; color: var(--text-hi);
}.channel-recommended {
  font-style: normal; font-size: 0.72rem; font-weight: 600;
  background: var(--accent); color: var(--white);
  border-radius: 20px; padding: 1px 7px; margin-left: 6px;
  vertical-align: middle;
}.channel-radio-hint {
  display: block; font-size: 0.77rem; color: var(--text-mid); margin-top: 2px;
}.channel-continue-btn {
  width: 100%; margin-top: 10px;
  justify-content: center;
}.channel-choice-full {
  margin-bottom: 20px;
}
/* --- Compteurs +/- --- */
.counter-input {
  display: flex; align-items: center;
  border: 1.5px solid var(--stroke-strong);
  border-radius: var(--r-sm); overflow: hidden;
}.counter-btn {
  width: 40px; height: 44px; flex-shrink: 0;
  background: var(--surface); border: none;
  font-size: 1.1rem; font-weight: 700; color: var(--text-hi);
  cursor: pointer; line-height: 1;
  transition: background 0.15s ease;
}.counter-btn:hover { background: var(--stroke); }.counter-input input {
  flex: 1; text-align: center; border: none !important;
  font-size: 0.92rem; font-weight: 600; color: var(--text-hi);
  background: var(--white); min-width: 0; padding: 0 !important;
  pointer-events: none;
}.optional-label {
  font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-low);
}/* --- Devis notice --- */
.devis-notice {
  display: flex; align-items: center; gap: 8px;
  background: #fff8ec; border: 1px solid #f0c060;
  border-radius: var(--r-sm); padding: 10px 14px;
  font-size: 0.82rem; color: #8a6a00; font-weight: 500;
  margin: 8px 0 12px;
}.devis-notice[hidden] { display: none; }.devis-notice svg { width: 16px; height: 16px; flex-shrink: 0; }

/* --- Responsive --- */
/* --- Bouton GPS avec label "Ma position" --- */
/* --- Label Ma position au niveau des labels Départ/Destination --- */
.depart-gps-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
}.depart-gps-labels label { margin-bottom: 0; }.geoloc-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-mid);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
}/* ============================================================
   ANTI-OVERFLOW MOBILE GLOBAL
   ============================================================ */
* { max-width: 100%; }img, svg, video, canvas { max-width: 100%; height: auto; }pre, code, table { overflow-x: auto; }

/* ---------- .lead (base canonique — Phase 3) ---------- */
.lead {
  color: rgba(255,255,255,0.72);
  font-size: 1.08rem;
  margin-bottom: 28px;
}

/* ============================================================
   .eyebrow-label — variante LABEL (Phase 3 refactor)
   Extraite des définitions dupliquées dans les fichiers de page.
   Base canonique = propriétés identiques sur les 6 définitions d'origine.
   Les différences (letter-spacing, margin-bottom, fond pill de
   decouvrir-vivre) sont conservées en OVERRIDE dans les fichiers
   concernés — voir refactor-log.md.
   ============================================================ */
.eyebrow-label {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;   /* valeur majoritaire (5/6) ; decouvrir-vivre override à 0.1em */
  color: var(--accent);
}
/* ============================================================
   PAGE RÉSERVATION — formulaire en premier sur mobile (SEO préservé :
   le H1 reste avant dans le HTML, seul l'affichage est réordonné)
   ============================================================ */


/* Lien vers les guides piliers depuis la page destinations */
.dest-category-guide {
  margin: -4px 0 18px;
}
.dest-category-guide a {
  display: inline-block;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--brand, #02886B);
  text-decoration: none;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 1px;
}
.dest-category-guide a:hover {
  opacity: 0.75;
}

/* ============================================================
   PANNEAU DE REMERCIEMENT (après envoi réussi)
   Remplace le formulaire, puis retour à l'accueil de la langue.
   ============================================================ */
.merci-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 34px 26px 30px;
  animation: merciIn .35s ease-out;
}
@keyframes merciIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.merci-check {
  width: 68px; height: 68px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: #e8f7ef;
  color: #12a05c;
  margin-bottom: 18px;
}
.merci-titre {
  margin: 0 0 8px;
  font-size: 1.45rem;
  font-weight: 800;
  color: #111827;
  letter-spacing: -.01em;
}
.merci-l1 {
  margin: 0 0 4px;
  font-size: .98rem;
  color: #374151;
}
.merci-l2 {
  margin: 0 0 18px;
  font-size: .9rem;
  color: #6b7280;
}
.merci-ref {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0 0 22px;
  padding: 11px 20px;
  background: #f7f8fa;
  border: 1px solid #eceef1;
  border-radius: 10px;
}
.merci-ref span {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #9ca3af;
}
.merci-ref strong {
  font-size: .96rem;
  font-weight: 700;
  color: #111827;
  font-variant-numeric: tabular-nums;
}
.merci-btn {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 9px;
  background: #111827;
  color: #fff;
  font-size: .92rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s ease;
}
.merci-btn:hover, .merci-btn:focus-visible { background: #000; }

@media (max-width: 520px) {
  .merci-panel { padding: 28px 18px 24px; }
  .merci-titre { font-size: 1.28rem; }
}

/* ============================================================
   ALIGNEMENT DES CHAMPS SUR DEUX COLONNES
   Le bloc "Lieu de prise en charge" contient un libellé GPS
   qui le rendait plus haut que la colonne voisine.
   On force une hauteur de libellé identique dans les deux.
   ============================================================ */
.form-row.cols-2 > .field > label,
.form-row.cols-2 > .field > .depart-gps-labels {
  display: flex;
  align-items: flex-end;
  min-height: 1.6rem;
  margin-bottom: 6px;
}
.form-row.cols-2 > .field > .depart-gps-labels {
  justify-content: space-between;
  gap: 10px;
}
.form-row.cols-2 > .field > .depart-gps-labels > label {
  min-height: 0;
  margin-bottom: 0;
}
/* les champs eux-mêmes démarrent à la même hauteur */
.form-row.cols-2 > .field {
  display: flex;
  flex-direction: column;
}
.form-row.cols-2 > .field > .input-with-action,
.form-row.cols-2 > .field > input,
.form-row.cols-2 > .field > textarea {
  margin-top: auto;
}



/* ============ INDICATEUR D'ATTENTE PRIX (secours itinéraire) ============
   Affiché par reservation-form.js / bienveillance-form.js UNIQUEMENT
   quand OpenRouteService échoue et que le secours Google Routes calcule.
   Anneau de graduations tournant autour du G, couleurs de marque. */
.prix-attente { display: none; align-items: center; gap: 12px; margin: 10px 0; font-size: 0.9rem; color: var(--black); }
.prix-attente-visible { display: flex; }
.prix-attente-icone { position: relative; width: 38px; height: 38px; flex: 0 0 38px; }
.prix-attente-ring {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    conic-gradient(var(--accent-soft) 0deg 70deg, var(--accent) 70deg 360deg);
  -webkit-mask:
    radial-gradient(circle, transparent 62%, #000 64%),
    repeating-conic-gradient(#000 0deg 4deg, transparent 4deg 10deg);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle, transparent 62%, #000 64%),
    repeating-conic-gradient(#000 0deg 4deg, transparent 4deg 10deg);
  mask-composite: intersect;
  animation: prix-attente-spin 1.4s linear infinite;
}
.prix-attente-g {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.05rem; color: var(--accent); line-height: 1;
}
@keyframes prix-attente-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .prix-attente-ring { animation-duration: 4s; } }