/* BXL Taxi — feuille unique (accueil + pages secondaires).
   Source visuelle : reference-design.png.png (1 Premium, 2 Moderne, 3 App).
   Les trois concepts partagent la même structure ; seuls les jetons changent,
   plus les règles de composition de la section 10. */

/* ---------- 1. Jetons ---------- */
:root {
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
  /* La planche est dessinée pour une page étroite : le contenu est borné à 1000 px. */
  --container: min(1000px, calc(100vw - 48px));
  --edge: calc((100vw - var(--container)) / 2);
  --hero-top: 40px;
  --hero-bottom: 28px;
  --radius: 12px;

  /* Concept 2 — Moderne (valeurs par défaut) */
  --page: #fff;
  --ink: #0b1f3a;
  --muted: #6b7a8c;
  --line: #e3e8ee;
  --accent: #fcc900;
  --on-accent: #0b1f3a;
  --header-bg: #fff;
  --phone-bg: var(--accent);
  --phone-ink: var(--on-accent);
  --phone-line: transparent;
  --panel: #fff;
  --panel-line: transparent;
  --panel-shadow: 0 18px 44px rgba(11, 31, 58, .14);
  --tab: #eef1f6;
  --tab-ink: var(--ink);
  --field-bg: #fff;
  --field-ink: #0b1f3a;
  --field-muted: #8693a3;
  --field-line: #e3e8ee;
  --pin-from: #1d5fd1;
  --pin-to: #f26a2e;
  --soft: #f4f5f9;
  --soft-line: transparent;
  --card: #fff;
  --card-line: #e6ebf0;
  --thumb: #eaf1f8;
  --thumb-ink: #1e9be0;
  --footer-bg: #0b1f3a;
  --hero-bg: #fff;
  /* Photo de fond du hero : remontée (en fraction de sa largeur) et voile de lisibilité. */
  --hero-photo: url("/assets/hero-taxi.webp");
  --hero-ratio: 2.4;
  --veil-color: #fff;
  --veil-strong: rgba(255, 255, 255, .84);
  --cta-bg: #0b1f3a;
  --veil-side: linear-gradient(90deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .85) calc(var(--edge) + var(--container) * .2), rgba(255, 255, 255, .74) calc(var(--edge) + var(--container) * .34), rgba(255, 255, 255, .56) calc(var(--edge) + var(--container) * .46), rgba(255, 255, 255, .36) calc(var(--edge) + var(--container) * .56), rgba(255, 255, 255, .19) calc(var(--edge) + var(--container) * .65), rgba(255, 255, 255, .07) calc(var(--edge) + var(--container) * .74), transparent calc(var(--edge) + var(--container) * .84));
  /* Voiture de l'estimation : recadrage de la planche sur fond blanc, fondu par multiplication. */
  /* Voiture du bloc d'estimation : détourée (fond transparent), commune aux trois services. */
  --car: url("/assets/estimation-car-bxl-taxi.webp");
}

/* Concept 1 — Premium */
body[data-experience=premium] {
  --page: #020c16;
  --ink: #fff;
  --muted: #aab6c2;
  --line: rgba(232, 185, 103, .3);
  --accent: linear-gradient(180deg, #f6d99c, #e2b05c);
  --on-accent: #1a1406;
  --header-bg: #061927;
  --phone-bg: transparent;
  --phone-ink: #e8b967;
  --phone-line: #e8b967;
  --panel: rgba(2, 19, 35, .84);
  --panel-line: rgba(232, 185, 103, .28);
  --panel-shadow: 0 24px 60px rgba(0, 0, 0, .5);
  --tab: transparent;
  --tab-ink: #d5dce3;
  --field-line: transparent;
  --soft: #061928;
  --soft-line: rgba(232, 185, 103, .22);
  --card: #0a1b2c;
  --card-line: #1e3246;
  --thumb: #102a41;
  --thumb-ink: #e8b967;
  --footer-bg: #010810;
  --hero-bg: #020c16;
  --hero-photo: url("/assets/hero-premium.webp");
  --hero-ratio: 2.5;
  --veil-color: #020c16;
  --veil-strong: rgba(2, 12, 22, .7);
  --cta-bg: #061928;
  --veil-side: linear-gradient(90deg, rgba(2, 12, 22, .84), rgba(2, 12, 22, .76) calc(var(--edge) + var(--container) * .3), rgba(2, 12, 22, .36) calc(var(--edge) + var(--container) * .55), transparent calc(var(--edge) + var(--container) * .7));
  --gold: #e8b967;
}

/* Concept 3 — App de mobilité */
body[data-experience=quick] {
  --page: #f7fbfc;
  --accent: #001e42;
  --on-accent: #fff;
  --panel-shadow: 0 18px 44px rgba(11, 31, 58, .1);
  --tab: #eef1f5;
  --pin-to: #1d5fd1;
  --soft: #fff;
  --card: #f1f6fa;
  --card-line: transparent;
  --hero-bg: #f7fbfc;
  --cta-bg: #001e42;
  --cta-accent: #fff;
  --cta-on-accent: #001e42;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--page); line-height: 1.4; -webkit-text-size-adjust: 100%; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
svg { width: 1.25em; height: 1.25em; flex: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* En-tête, pied de page et appel à réserver sont produits par site.js dans ces éléments. */
bxl-header, bxl-footer, bxl-cta, bxl-related { display: contents; }
:focus-visible { outline: 2px solid #2f80ed; outline-offset: 2px; }

/* Éléments propres à un seul concept */
body:not([data-experience=premium]) [data-only=premium],
body:not([data-experience=urban]) [data-only=urban],
body:not([data-experience=quick]) [data-only=quick] { display: none; }

/* ---------- 3. En-tête ---------- */
.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 28px; min-height: 72px; padding: 0 var(--edge); background: var(--header-bg); border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: baseline; gap: 3px; color: var(--gold, var(--ink)); text-decoration: none; font-size: 26px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.brand span { font-size: 16px; font-weight: 700; }
.brand-mark { align-self: center; width: 28px; height: 28px; margin-right: 5px; color: #d6a545; }
.mark { align-self: center; display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 6px; border-radius: 50%; background: #d6a545; color: #0b1f3a; font-size: 15px; }
.top nav { display: flex; align-items: center; gap: 24px; margin-left: auto; font-size: 14px; font-weight: 600; }
.top nav a { text-decoration: none; }
.top nav a:hover { text-decoration: underline; }
.top .site-nav { margin-inline: auto; }
.site-nav .phone-link { display: none; }
.head-actions { display: flex; align-items: center; gap: 16px; }
.lang-links { display: flex; gap: 2px; }
.lang-links button { padding: 6px; border: 0; background: none; font-size: 13px; font-weight: 700; color: var(--muted); }
.lang-links [aria-pressed=true] { color: var(--ink); }
#lang { border: 0; background: transparent; font-size: 14px; font-weight: 700; }
#lang option { color: #0b1f3a; }
.head-actions #lang, .menu-toggle { display: none; }
.phone-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1.5px solid var(--phone-line); border-radius: 12px; background: var(--phone-bg); color: var(--phone-ink); font-size: 14px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.menu-toggle { width: 44px; height: 44px; padding: 0; border: 0; background: none; font-size: 22px; }

/* ---------- 4. Hero ---------- */
/* Grille commune : titre et arguments sur toute la largeur, formulaire à gauche (60 %),
   colonne visuelle à droite (40 %), estimation en pied. Le visuel de fond est placé par concept (section 10). */
.hero { position: relative; isolation: isolate; overflow: hidden; padding: var(--hero-top) var(--edge) var(--hero-bottom); background: var(--hero-bg); }
.hero-inner { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-areas: "copy copy" "extras extras" "form side" "estimate estimate"; }
.hero-copy, .hero-extras, .booking, .assurances, .estimate { position: relative; z-index: 1; }
.hero-media { z-index: 0; pointer-events: none; }
.hero-copy { grid-area: copy; }
.hero h1 { margin: 0; font-size: clamp(34px, 4.6vw, 46px); font-weight: 700; line-height: 1.14; letter-spacing: -.02em; white-space: pre-line; }
.hero-sub { margin: 8px 0 0; font-size: 18px; color: var(--muted); white-space: pre-line; }

.hero-extras { grid-area: extras; margin-top: 18px; }
.categories { display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 15px; font-weight: 600; }
.categories li, .benefits li, .assurances li { display: flex; align-items: center; gap: 10px; }
.categories svg { color: var(--gold); font-size: 17px; }
.benefits { display: flex; justify-content: space-between; gap: 12px; width: 82%; padding: 9px 14px; border-radius: 14px; background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: 13px; font-weight: 700; line-height: 1.2; }
.benefits li { max-width: 150px; }
.benefits i { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 9px; background: var(--accent); color: var(--on-accent); }
.assurances { grid-area: side; align-self: end; display: grid; gap: 14px; padding: 0 0 6px 12%; font-size: 15px; font-weight: 600; }
.assurances i { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border: 1.5px solid var(--gold); border-radius: 50%; color: var(--gold); }

/* ---------- 5. Formulaire ---------- */
.booking { grid-area: form; display: flex; flex-direction: column; gap: 10px; margin-top: 20px; padding: 16px; border: 1px solid var(--panel-line); border-radius: 18px; background: var(--panel); box-shadow: var(--panel-shadow); }
.anchor { position: absolute; top: 0; }
.booking-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.trip-tab { min-height: 46px; border: 1px solid var(--panel-line); border-radius: 12px; background: var(--tab); color: var(--tab-ink); font-size: 15px; font-weight: 600; }
.trip-tab.active { border-color: transparent; background: var(--accent); color: var(--on-accent); font-weight: 700; }
.trip-tab .narrow { display: none; }

.field { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 56px; padding: 7px 14px; border: 1px solid var(--field-line); border-radius: var(--radius); background: var(--field-bg); color: var(--field-ink); text-align: left; }
.field:focus-within { border-color: #2f80ed; box-shadow: 0 0 0 3px rgba(47, 128, 237, .2); }
.field-icon { font-size: 16px; }
.field-body { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.field small { font-size: 12px; color: var(--field-muted); }
.field input, .field select, .now-value { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; font-size: 15px; font-weight: 600; }
.field select { -webkit-appearance: none; appearance: none; cursor: pointer; }
.field input::placeholder { color: var(--field-muted); font-weight: 500; opacity: 1; }
.field-chevron { font-size: 12px; }
.pin-from { color: var(--pin-from); }
.pin-to { color: var(--pin-to); }

.route { position: relative; display: flex; flex-direction: column; gap: 8px; }
.route .field { padding-right: 68px; }
.swap-route { position: absolute; top: 50%; right: 14px; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid #e3e8ee; border-radius: 12px; background: #fff; color: #0b1f3a; box-shadow: 0 6px 16px rgba(11, 31, 58, .14); transform: translateY(-50%); }

/* Maintenant : « Aujourd'hui » et l'heure courante remplacent les sélecteurs natifs (désactivés mais envoyés). */
.schedule { display: grid; grid-template-columns: 1.35fr 1fr; gap: 8px; }
.schedule.is-now .field { cursor: pointer; }
.schedule.is-now input, .schedule:not(.is-now) .now-value, .schedule:not(.is-now) .field-chevron { display: none; }
.phone-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
.country-trigger { gap: 8px; font-size: 15px; font-weight: 600; }
#countryFlag.flag-be { width: 22px; height: 16px; border-radius: 3px; background: linear-gradient(90deg, #15171a 33.33%, #fdda24 0 66.66%, #ef3340 0); font-size: 0; }
.country-native { display: none; }

.submit { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; border: 0; border-radius: var(--radius); background: var(--accent); color: var(--on-accent); font-size: 16px; font-weight: 700; }
.submit:disabled { opacity: .6; cursor: progress; }
.booking-status { display: none; padding: 10px 12px; border-radius: 10px; background: #eef1f6; color: #0b1f3a; font-size: 14px; }
.booking-status.show { display: block; }
.booking-status.ok { background: #dff7e8; color: #146b36; }
.booking-status.error { background: #fee8e8; color: #a32626; }

/* ---------- 6. Estimation ---------- */
.estimate { grid-area: estimate; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: 36px; margin-top: 14px; padding: 10px 22px; border: 1px solid var(--soft-line); border-radius: 16px; background: var(--soft); scroll-margin-top: 96px; }
.estimate-route { display: grid; gap: 6px; min-width: 0; }
.estimate-route b { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 17px; }
.estimate-route b svg { color: var(--gold, currentColor); font-size: 13px; }
#estimateRoute { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#estimateMeta { display: flex; flex-wrap: wrap; gap: 4px 22px; color: var(--muted); font-size: 14px; }
#estimateMeta span { display: inline-flex; align-items: center; gap: 7px; }
.estimate-price strong { display: block; color: var(--gold, inherit); font-size: 34px; line-height: 1.05; white-space: nowrap; }
.estimate-price small { color: var(--muted); font-size: 12px; }
.estimate-car { width: 150px; height: 76px; background: var(--car) center / contain no-repeat; }
.estimate-more { display: none; }
/* Un seul lieu saisi : pas de prix à afficher, même pas un tiret. */
.estimate[data-state=partial] .estimate-price strong { display: none; }

/* ---------- 7. Destinations ---------- */
.destinations { padding: 24px var(--edge) 56px; }
.destinations h2 { margin: 0; font-size: 26px; letter-spacing: -.01em; }
.destinations-sub { margin: 4px 0 0; color: var(--muted); font-size: 15px; }
/* Huit destinations : quatre colonnes, deux rangées de cartes identiques. */
.dest-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 14px; margin-top: 16px; }
.dest { display: flex; flex-direction: column; overflow: hidden; padding: 0 0 12px; border: 1px solid var(--card-line); border-radius: 14px; background: var(--card); color: var(--ink); text-align: left; }
.dest:hover { border-color: var(--thumb-ink); }
.dest-thumb { display: flex; flex: none; align-items: center; justify-content: center; overflow: hidden; height: 118px; margin-bottom: 10px; background: var(--thumb); color: var(--thumb-ink); font-size: 30px; }
.dest-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dest-thumb img + svg { display: none; }
.dest > :not(.dest-thumb) { padding-inline: 14px; }
.dest b { font-size: 15px; line-height: 1.25; }
.dest small { color: var(--muted); font-size: 12px; }
.dest-price { margin-top: 6px; color: var(--gold, inherit); font-size: 22px; line-height: 1.2; }
.dest-meta { color: var(--muted); font-size: 12.5px; }
.fare-prefix { margin-right: 2px; color: var(--muted); font-size: 11.5px; font-weight: 600; }
.dest-price.no-fare { color: var(--gold, var(--thumb-ink)); font-size: 13px; }

/* ---------- 8. Pied de page ---------- */
footer { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 48px; padding: 32px var(--edge); background: var(--footer-bg); color: #dfe6ec; font-size: 14px; }
footer p { margin: 0; }
footer .brand { color: #fff; }
.site-footer { align-items: flex-start; padding-bottom: 88px; }
.footer-about { flex: 1 1 320px; display: grid; gap: 10px; max-width: 460px; }
.footer-links, .footer-contact { display: grid; gap: 10px; }
.footer-contact { margin-left: auto; }
.site-footer .phone-link { border-color: rgba(255, 255, 255, .4); background: transparent; color: #fff; }

/* ---------- 9. Sélecteur de concept, sélecteur de pays ---------- */
.experience-switch { position: fixed; right: 16px; bottom: 16px; z-index: 40; display: flex; padding: 4px; border: 1px solid rgba(11, 31, 58, .12); border-radius: 12px; background: #fff; box-shadow: 0 8px 28px rgba(0, 21, 44, .2); }
.experience-switch button { padding: 8px 12px; border: 0; border-radius: 9px; background: none; color: #0b1f3a; font-size: 12px; font-weight: 700; }
.experience-switch .active { background: #0b1f3a; color: #fff; }

#countryPicker { position: fixed; inset: 0; z-index: 100; display: grid; place-items: start center; padding: 7vh 16px; background: rgba(0, 21, 44, .55); }
#countryPicker[hidden] { display: none; }
.picker { display: flex; flex-direction: column; width: min(480px, 100%); max-height: 84vh; border-radius: 16px; background: #fff; color: #0b1f3a; }
.picker-head { display: flex; gap: 8px; padding: 14px; border-bottom: 1px solid #e3e8ee; }
.picker-head input { flex: 1; min-width: 0; padding: 12px; border: 1px solid #d5dce3; border-radius: 10px; font-size: 16px; }
.picker-head button { width: 44px; border: 0; background: none; font-size: 20px; }
#countryList { overflow: auto; }
.country-option { display: flex; gap: 12px; width: 100%; padding: 12px 16px; border: 0; border-bottom: 1px solid #eef1f5; background: none; text-align: left; }
.country-option:hover { background: #f4f5f9; }
.country-option span:nth-child(2) { flex: 1; }

/* ---------- 10. Composition propre à chaque concept ---------- */
/* Premium et Moderne : la photographie est l'arrière-plan du hero, pas une colonne. Elle occupe toute la largeur
   sans déformation ni recadrage (format panoramique, véhicule dans la moitié droite, donc à droite du formulaire),
   jamais au-delà de sa largeur native ; son bas se fond dans la couleur du hero, qui porte le bas du formulaire
   et l'estimation. Un voile latéral progressif (sombre en Premium, clair en Moderne) porte le titre. */
body[data-experience=premium] .hero-media, body[data-experience=urban] .hero-media { position: absolute; inset: 0; overflow: hidden; container-type: size; }
body[data-experience=premium] .hero-media::before, body[data-experience=urban] .hero-media::before, body[data-experience=premium] .hero-media::after, body[data-experience=urban] .hero-media::after { content: ""; position: absolute; --w: min(100cqw, 1983px); --h: calc(var(--w) / var(--hero-ratio)); --x: calc(50cqw - var(--w) / 2); }
body[data-experience=premium] .hero-media::before, body[data-experience=urban] .hero-media::before { top: 0; left: var(--x); width: var(--w); height: var(--h); background: var(--hero-photo) center / cover no-repeat; }
/* Voiles : pied de la photo, lisibilité à gauche, et bords latéraux quand la fenêtre dépasse la largeur native. */
body[data-experience=premium] .hero-media::after, body[data-experience=urban] .hero-media::after { inset: 0; --side: clamp(0px, calc((100cqw - 1983px) * 1000), 220px); background: linear-gradient(180deg, transparent calc(var(--h) * .84), var(--veil-color) calc(var(--h) - 1px)), var(--veil-side), linear-gradient(90deg, var(--veil-color) var(--x), transparent calc(var(--x) + var(--side)), transparent calc(var(--x) + var(--w) - var(--side)), var(--veil-color) calc(var(--x) + var(--w))); }
body[data-experience=premium] .booking { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
body[data-experience=premium] .hero h1 { font-weight: 600; }
/* Lisibilité sur les façades éclairées : ombre douce plutôt qu'un voile plus opaque sur la photo. */
body[data-experience=premium] .hero-copy, body[data-experience=premium] .categories { text-shadow: 0 1px 14px rgba(2, 12, 22, .7), 0 1px 2px rgba(2, 12, 22, .5); }
body[data-experience=premium] .hero-sub { margin-top: 4px; color: var(--gold); font-size: clamp(22px, 3vw, 30px); }
body[data-experience=premium] .swap-route { border-color: transparent; }
body[data-experience=premium] .phone-row { gap: 0; }
body[data-experience=premium] .country-trigger { border-right-color: #dfe4ea; border-radius: var(--radius) 0 0 var(--radius); }
body[data-experience=premium] .phone-row label { border-radius: 0 var(--radius) var(--radius) 0; }
body[data-experience=premium] .dest small { display: none; }
body[data-experience=urban] .hero-media::before { background-position: center bottom; }
body[data-experience=urban] .hero-sub { color: #4a5a6e; }

/* App : carte à droite jusqu'au bord de la fenêtre, départ et destination groupés en tête du formulaire,
   estimation en carte dans la colonne de droite. */
body[data-experience=quick] .hero-inner { grid-template-areas: "copy copy" "form side"; }
body[data-experience=quick] .hero-media { position: relative; grid-area: 1 / 2 / 3 / 3; overflow: hidden; margin: calc(-1 * var(--hero-top)) calc(-1 * var(--edge)) calc(-1 * var(--hero-bottom)) calc(var(--container) * -.14); -webkit-mask-image: linear-gradient(90deg, transparent, #000 26%); mask-image: linear-gradient(90deg, transparent, #000 26%); }
/* La carte garde une échelle liée à la largeur du contenu : l'itinéraire reste à droite du formulaire. */
.map-desktop { position: absolute; top: 0; left: 0; width: calc(var(--container) * 1.8); height: calc(var(--container) * .9); }
.map-mobile { display: none; }
.map-pill rect { fill: #fff; filter: drop-shadow(0 2px 5px rgba(11, 31, 58, .16)); }
.map-pill text { fill: #0b1f3a; font-family: var(--font); font-size: 15px; font-weight: 700; text-anchor: middle; }
.map-mobile .map-pill text { font-size: 12.5px; }
body[data-experience=quick] .hero-extras { display: none; }
body[data-experience=quick] .route { order: -1; gap: 0; border: 1px solid var(--field-line); border-radius: var(--radius); background: var(--field-bg); }
body[data-experience=quick] .route .field { border: 0; background: none; box-shadow: none; }
body[data-experience=quick] .route .field + .field .field-body { border-top: 1px solid var(--field-line); padding-top: 7px; }
body[data-experience=quick] .estimate { grid-area: side; align-self: end; justify-self: end; grid-template-columns: 1fr; row-gap: 10px; width: 72%; padding: 20px; box-shadow: var(--panel-shadow); }
body[data-experience=quick] #estimateRoute { white-space: normal; }
body[data-experience=quick] .estimate-price strong { font-size: 38px; }
body[data-experience=quick] .estimate-car { justify-self: end; width: 170px; height: 88px; }
/* App : cartes photo allégées — photo inscrite dans la carte, pastille d'icône bleu mobilité, prix sans décor. */
body[data-experience=quick] .dest { padding: 8px 8px 14px; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 6px 20px rgba(0, 30, 66, .07); }
body[data-experience=quick] .dest:hover { box-shadow: 0 0 0 2px var(--thumb-ink), 0 6px 20px rgba(0, 30, 66, .07); }
body[data-experience=quick] .dest .dest-thumb { position: relative; height: 112px; margin-bottom: 12px; border-radius: 11px; background: var(--card); }
body[data-experience=quick] .dest-thumb svg { display: block; position: absolute; left: 10px; bottom: 10px; width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: #fff; color: var(--thumb-ink); box-shadow: 0 4px 12px rgba(0, 30, 66, .18); }
body[data-experience=quick] .dest > :not(.dest-thumb) { padding-inline: 6px; }
body[data-experience=quick] .dest small, body[data-experience=quick] .dest-km { display: none; }
body[data-experience=quick] .dest-price { margin-top: 4px; font-size: 19px; }
body[data-experience=quick] .dest-price.no-fare { color: var(--thumb-ink); font-size: 13px; }

/* ---------- 11. Pages secondaires (aéroports, gare, services, confidentialité) ---------- */
/* Même structure pour les trois services ; l'identité vient des jetons de la section 1.
   Premium et Moderne : la photo est l'arrière-plan du bandeau, sous le même voile que le hero de l'accueil.
   App : pas de photo de fond, elle tient dans la carte de droite (logique de cartes de ce service). */
.eyebrow, .section-kicker { margin: 0 0 10px; color: var(--gold, var(--muted)); font-size: 12px; font-weight: 800; letter-spacing: .14em; }
.page-hero { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: center; gap: 40px; min-height: 440px; padding: 56px var(--edge); background: var(--hero-bg); }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--veil-side); }
.page-hero-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.page-hero h1 { margin: 0; font-size: clamp(32px, 4.4vw, 44px); font-weight: 700; line-height: 1.14; letter-spacing: -.02em; text-wrap: balance; }
.lead { margin: 12px 0 0; max-width: 34em; color: var(--muted); font-size: 18px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.primary, .secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 24px; border: 1.5px solid transparent; border-radius: var(--radius); font-size: 16px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.primary { background: var(--accent); color: var(--on-accent); }
.secondary { border-color: var(--gold, var(--ink)); color: var(--gold, var(--ink)); }
.route-card { display: grid; gap: 6px; justify-self: end; width: min(100%, 340px); padding: 22px; border: 1px solid var(--panel-line); border-radius: 18px; background: var(--panel); box-shadow: var(--panel-shadow); }
.route-card span { color: var(--gold, var(--muted)); font-size: 12px; font-weight: 800; letter-spacing: .14em; }
.route-card strong { font-size: 22px; line-height: 1.2; }
.route-card p { margin: 0; color: var(--muted); font-size: 14px; }
.page-hero-side { display: grid; }

.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 40px var(--edge); }
.detail-grid:has(> article:nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.detail-grid article { padding: 24px; border: 1px solid var(--card-line); border-radius: 16px; background: var(--card); }
.detail-grid span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-size: 14px; font-weight: 800; }
.detail-grid h2 { margin: 14px 0 6px; font-size: 20px; }
.detail-grid p { margin: 0; color: var(--muted); }

/* Les huit destinations en liens photo (pages de service) : grille 4 × 2, cartes de même taille, comme sur l'accueil. */
.related { padding: 0 var(--edge) 40px; }
.related h2 { margin: 0 0 14px; font-size: 22px; letter-spacing: -.01em; }
.related-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 14px; }
.related-card { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 12px; border: 1px solid var(--card-line); border-radius: 14px; background: var(--card); color: var(--ink); text-decoration: none; }
.related-card:hover { border-color: var(--thumb-ink); }
.related-card img { display: block; flex: none; width: 100%; height: 118px; margin-bottom: 10px; object-fit: cover; }
.related-card b, .related-card span { padding-inline: 14px; }
.related-card b { font-size: 15px; line-height: 1.25; }
.related-card span { margin-top: 2px; color: var(--gold, var(--thumb-ink)); font-size: 13px; font-weight: 700; }
body[data-experience=quick] .related-card { padding: 8px 8px 12px; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 6px 20px rgba(0, 30, 66, .07); }
body[data-experience=quick] .related-card img { border-radius: 11px; }
body[data-experience=quick] .related-card b, body[data-experience=quick] .related-card span { padding-inline: 6px; }

.cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin: 0 var(--edge) 56px; padding: 32px; border: 1px solid var(--soft-line); border-radius: 18px; background: var(--cta-bg); color: #fff; }
.cta h2 { margin: 0 0 6px; font-size: 26px; letter-spacing: -.01em; }
.cta p { margin: 0; color: #c9d3dd; }
.cta .section-kicker { margin-bottom: 10px; color: var(--gold, #aab6c2); }
.cta .actions { margin-top: 0; }
.cta .primary { background: var(--cta-accent, var(--accent)); color: var(--cta-on-accent, var(--on-accent)); }
.cta .secondary { border-color: rgba(255, 255, 255, .45); color: #fff; }

.legal-page { max-width: calc(760px + 2 * var(--edge)); padding: 56px var(--edge) 64px; }
.legal-page h1 { margin: 0 0 16px; font-size: clamp(30px, 4vw, 40px); letter-spacing: -.02em; }
.legal-page h2 { margin: 28px 0 8px; font-size: 20px; }
.legal-page p { color: var(--muted); }
.legal-page a { color: var(--gold, var(--ink)); }
.legal-note { font-size: 13px; }

body[data-experience=premium] .page-hero h1 { font-weight: 600; }
body[data-experience=premium] .route-card { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
body[data-experience=premium] .detail-grid span { border: 1.5px solid var(--gold); border-radius: 50%; background: none; color: var(--gold); }
body[data-experience=urban] .lead { color: #4a5a6e; }
body[data-experience=urban] .route-card { background: rgba(255, 255, 255, .9); }
body[data-experience=quick] .page-hero::before { display: none; }
body[data-experience=quick] .page-hero-side { justify-self: end; overflow: hidden; width: min(100%, 380px); border-radius: 18px; background: #fff; box-shadow: var(--panel-shadow); }
body[data-experience=quick] .page-hero-photo { position: static; z-index: auto; height: auto; aspect-ratio: 2 / 1; }
body[data-experience=quick] .route-card { justify-self: stretch; width: auto; border: 0; border-radius: 0; box-shadow: none; }
body[data-experience=quick] .route-card span, body[data-experience=quick] .eyebrow { color: var(--thumb-ink); }
/* App avec photo dédiée (page Taxi rapide) : la photo devient l'arrière-plan du bandeau, sous un voile clair
   côté texte ; la voiture, à droite de l'image, reste visible derrière la carte. */
body[data-experience=quick] .page-hero--photo::before { display: block; background: linear-gradient(90deg, rgba(247, 251, 252, .8), rgba(247, 251, 252, .72) calc(var(--edge) + var(--container) * .3), rgba(247, 251, 252, .42) calc(var(--edge) + var(--container) * .5), rgba(247, 251, 252, .14) calc(var(--edge) + var(--container) * .62), transparent calc(var(--edge) + var(--container) * .74)); }
/* Voile allégé : un halo clair suit le texte pour qu'il reste lisible sur la photo plus visible. */
body[data-experience=quick] .page-hero--photo :is(.eyebrow, h1, .lead) { text-shadow: 0 0 18px rgba(247, 251, 252, .9), 0 0 3px rgba(247, 251, 252, .8); }
/* Le sous-titre s'arrête avant le capot de la voiture. */
body[data-experience=quick] .page-hero--photo .lead { max-width: min(34em, calc(var(--container) * .44)); color: #3f4f63; }
body[data-experience=quick] .page-hero--photo .page-hero-side { overflow: visible; background: none; box-shadow: none; }
body[data-experience=quick] .page-hero--photo .page-hero-photo { position: absolute; inset: 0; z-index: -2; height: 100%; aspect-ratio: auto; object-position: 70% 100%; }
body[data-experience=quick] .page-hero--photo .page-hero-side { align-self: start; }
body[data-experience=quick] .page-hero--photo .route-card { border-radius: 18px; background: rgba(255, 255, 255, .94); box-shadow: var(--panel-shadow); }
body[data-experience=quick] .detail-grid article { background: #fff; box-shadow: 0 8px 24px rgba(11, 31, 58, .06); }

/* ---------- 12. Mobile ---------- */
/* Les maquettes mobiles de la planche sont des compositions propres : une colonne, champs compacts sans
   petits libellés, estimation en ligne sous le bouton, destinations en rangée. */
@media (max-width: 900px) {
  :root { --container: calc(100vw - 32px); --hero-top: 18px; --hero-bottom: 18px; }
  html { scroll-padding-top: 68px; }

  .top { gap: 12px; min-height: 56px; }
  .top nav { flex-wrap: wrap; gap: 6px 16px; padding: 8px 0; }
  .top .site-nav { display: none; position: absolute; top: 100%; right: 0; left: 0; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 8px var(--edge) 16px; border-bottom: 1px solid var(--line); background: var(--header-bg); font-size: 16px; }
  .top.menu-open .site-nav { display: flex; }
  .site-nav a { padding: 12px 0; }
  .site-nav .phone-link { display: inline-flex; justify-content: center; margin-top: 8px; }
  .head-actions { gap: 4px; margin-left: auto; }
  .head-actions .lang-links, .head-actions .phone-link { display: none; }
  .head-actions #lang, .menu-toggle { display: block; }

  .hero-inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "form" "estimate"; }
  .hero-media, .hero-extras, .assurances { display: none; }
  .hero h1 { font-size: clamp(25px, 7.2vw, 32px); }
  .hero-sub { margin-top: 4px; font-size: 14px; }

  .booking { gap: 7px; margin-top: 14px; padding: 0; border: 0; background: none; box-shadow: none; }
  .trip-tab { min-height: 42px; font-size: 14px; }
  .trip-tab .wide { display: none; }
  .trip-tab .narrow { display: inline; }
  .field { min-height: 46px; padding: 5px 12px; }
  .field small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .field input, .field select { font-size: 16px; }
  .route { gap: 7px; }
  .route .field { padding-right: 60px; }
  .swap-route { right: 10px; width: 40px; height: 40px; }
  .schedule, .phone-row { gap: 7px; }
  .submit { min-height: 50px; }

  /* Estimation : prix, distance · durée, mention ; voiture à droite. */
  .estimate { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; margin-top: 10px; padding: 10px 14px; }
  .estimate-price { display: contents; }
  .estimate-price strong { grid-area: 1 / 1; font-size: 28px; }
  .estimate-route { grid-area: 2 / 1; }
  .estimate-price small { grid-area: 3 / 1; }
  .estimate-car { grid-area: 1 / 2 / 4 / 3; width: 124px; height: 66px; }
  .estimate[data-state=idle] .estimate-route b, #estimateMeta svg { display: none; }
  .estimate-route b { font-size: 13px; font-weight: 600; }
  #estimateMeta { gap: 2px 6px; font-size: 12.5px; }
  #estimateMeta span + span::before { content: "·"; }

  /* Destinations : deux colonnes de cartes photo, sans défilement horizontal. */
  .destinations { padding: 10px var(--edge) 36px; }
  .destinations h2 { font-size: 19px; }
  .destinations-sub { font-size: 13px; }
  .dest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
  .dest { padding-bottom: 10px; }
  .dest-thumb { height: 86px; margin-bottom: 8px; }
  .dest > :not(.dest-thumb) { padding-inline: 10px; }
  .dest b { font-size: 13px; }
  .dest small { font-size: 11px; }
  .dest-price { margin-top: 3px; font-size: 17px; }
  .dest-price.no-fare { font-size: 12px; }
  .dest-meta { font-size: 11.5px; }

  .footer-contact { margin-left: 0; }
  /* Sélecteur de service : se retire pendant la lecture (défilement vers le bas), revient au défilement vers le haut. */
  .experience-switch { right: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(50%); transition: transform .25s ease, opacity .25s ease; }
  .experience-switch.is-away { opacity: 0; pointer-events: none; transform: translate(50%, calc(100% + 24px)); }

  /* Premium mobile : la photo occupe le haut de l'écran, derrière le titre et les onglets. */
  body[data-experience=premium] { --hero-photo: url("/assets/hero-premium-1600.webp"); }
  body[data-experience=premium] .hero-media { display: block; bottom: auto; height: 250px; }
  body[data-experience=premium] .hero-media::before { inset: 0; width: auto; height: auto; background-position: 60% 100%; background-size: auto 130%; }
  body[data-experience=premium] .hero-media::after { background: linear-gradient(0deg, #020c16 4%, rgba(2, 12, 22, .35) 55%, rgba(2, 12, 22, .15)), linear-gradient(90deg, rgba(2, 12, 22, .75), transparent 72%); }
  body[data-experience=premium] .booking { -webkit-backdrop-filter: none; backdrop-filter: none; }
  body[data-experience=premium] { --pin-to: #1d5fd1; }
  body[data-experience=premium] .hero-sub { color: #fff; font-size: 15px; }
  body[data-experience=premium] .trip-tab:not(.active) { background: rgba(2, 19, 35, .78); }
  body[data-experience=premium] .swap-route { background: #020c16; color: #fff; }

  /* Moderne mobile : ni photo ni sous-titre ; les trajets suivent l'estimation sans titre visible. */
  body[data-experience=urban] .hero-sub { display: none; }
  body[data-experience=urban] .destinations h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  body[data-experience=urban] .destinations { padding-top: 4px; }
  body[data-experience=urban] .dest-grid { margin-top: 0; }

  /* App mobile : carte entre le titre et le formulaire, recouverte par le bloc départ / destination ;
     estimation avec la voiture à gauche. */
  body[data-experience=quick] .hero-inner { grid-template-areas: "copy" "media" "form" "estimate"; }
  body[data-experience=quick] .hero-sub { max-height: 1.4em; overflow: hidden; }
  body[data-experience=quick] .hero-media { display: block; grid-area: media; height: 184px; margin: 10px calc(-1 * var(--edge)) -26px; -webkit-mask-image: none; mask-image: none; }
  .map-desktop { display: none; }
  .map-mobile { display: block; width: 100%; height: 100%; }
  body[data-experience=quick] .booking { margin-top: 0; }
  body[data-experience=quick] .route { box-shadow: 0 8px 22px rgba(11, 31, 58, .1); }
  body[data-experience=quick] .estimate { grid-area: estimate; justify-self: stretch; grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 0; width: auto; padding: 10px 14px; }
  body[data-experience=quick] .estimate-car { grid-area: 1 / 1 / 4 / 2; justify-self: start; width: 124px; height: 66px; }
  body[data-experience=quick] .estimate-price strong { grid-area: 1 / 2; font-size: 28px; }
  body[data-experience=quick] .estimate-route { grid-area: 2 / 2; }
  body[data-experience=quick] .estimate-price small { grid-area: 3 / 2; }
  body[data-experience=quick] .estimate-more { display: block; grid-area: 1 / 3 / 4 / 4; transform: rotate(-90deg); }

  body[data-experience=quick] .dest { padding: 6px 6px 10px; }
  body[data-experience=quick] .dest .dest-thumb { height: 84px; margin-bottom: 8px; border-radius: 10px; }
  body[data-experience=quick] .dest-thumb svg { left: 7px; bottom: 7px; width: 28px; height: 28px; padding: 6px; }
  body[data-experience=quick] .dest > :not(.dest-thumb) { padding-inline: 4px; }
  body[data-experience=quick] .dest-price { font-size: 17px; }
  body[data-experience=quick] .dest-price.no-fare { font-size: 12px; }

  /* Pages secondaires : une colonne ; le voile couvre toute la photo puisque le texte occupe toute la largeur. */
  .page-hero, .detail-grid, .detail-grid:has(> article:nth-child(3)) { grid-template-columns: minmax(0, 1fr); }
  .page-hero { gap: 24px; min-height: 0; padding: 32px var(--edge); }
  .page-hero::before { background: var(--veil-strong); }
  body[data-experience=quick] .page-hero--photo .lead { max-width: none; }
  /* App mobile : deux boutons pleine largeur alignés plutôt que deux largeurs différentes sur deux lignes ;
     la carte ne répète pas le libellé déjà affiché au-dessus du titre. */
  body[data-experience=quick] .page-hero--photo .actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  body[data-experience=quick] .page-hero--photo .route-card span { display: none; }
  /* App mobile : encarts plus denses, pastille et titre sur une même ligne. */
  body[data-experience=quick] .detail-grid { gap: 12px; }
  body[data-experience=quick] .detail-grid article { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px; padding: 18px; }
  body[data-experience=quick] .detail-grid h2 { margin: 0; font-size: 18px; }
  body[data-experience=quick] .detail-grid p { grid-column: 1 / -1; margin-top: 10px; }
  body[data-experience=quick] .cta h2 { text-wrap: balance; }
  body[data-experience=quick] .page-hero--photo::before { background: linear-gradient(180deg, rgba(247, 251, 252, .86), rgba(247, 251, 252, .76) 55%, rgba(247, 251, 252, .45)); }
  .page-hero h1 { font-size: clamp(27px, 7.4vw, 34px); }
  .lead { font-size: 16px; }
  .primary, .secondary { min-height: 50px; padding: 0 18px; }
  .route-card, body[data-experience=quick] .page-hero-side { justify-self: stretch; width: auto; }
  .detail-grid { padding: 24px var(--edge); }
  .related { padding-bottom: 28px; }
  /* Mobile et tablette : deux colonnes de cartes photo, comme les destinations de l'accueil. */
  .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .related-card { padding-bottom: 10px; }
  body[data-experience=quick] .related-card { padding: 6px 6px 10px; }
  .related-card img { height: 86px; margin-bottom: 8px; }
  body[data-experience=quick] .related-card img { height: 84px; border-radius: 10px; }
  .related-card b, .related-card span { padding-inline: 10px; }
  body[data-experience=quick] .related-card b, body[data-experience=quick] .related-card span { padding-inline: 4px; }
  .related-card b { font-size: 13px; }
  .related-card span { font-size: 12px; }
  .cta { margin-bottom: 32px; padding: 24px; }
  .legal-page { padding: 32px var(--edge) 48px; }
}

/* ---------- 13. Page Taxi Business (Premium), tablette et mobile ---------- */
/* Règles limitées à body[data-service=premium] (taxi-business-bruxelles.html). */
@media (max-width: 900px) {
  /* Voile allégé pour laisser voir la photo de nuit ; le texte garde une ombre douce. */
  body[data-service=premium] .page-hero::before { background: linear-gradient(180deg, rgba(2, 12, 22, .72), rgba(2, 12, 22, .5) 50%, rgba(2, 12, 22, .78)); }
  body[data-service=premium] .page-hero-copy { text-shadow: 0 1px 14px rgba(2, 12, 22, .75); }
  /* La carte ne répète pas le libellé affiché au-dessus du titre. */
  body[data-service=premium] .route-card span { display: none; }
  body[data-service=premium] .cta h2 { text-wrap: balance; }
}
@media (min-width: 601px) and (max-width: 900px) {
  /* Tablette : les trois encarts tiennent sur une ligne. */
  body[data-service=premium] .detail-grid:has(> article:nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  /* Mobile : boutons pleine largeur alignés ; encarts plus denses, pastille et titre sur une ligne. */
  body[data-service=premium] .page-hero .actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  body[data-service=premium] .detail-grid { gap: 12px; }
  body[data-service=premium] .detail-grid article { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px; padding: 18px; }
  body[data-service=premium] .detail-grid h2 { margin: 0; font-size: 18px; }
  body[data-service=premium] .detail-grid p { grid-column: 1 / -1; margin-top: 10px; }
}

/* ---------- 14. Page Taxi Bruxelles (Taxi), finitions ---------- */
/* Règles limitées à body[data-service=urban] (taxi-bruxelles.html). */
/* Desktop : le sous-titre s'arrête avant le toit de la voiture. */
body[data-service=urban] .page-hero .lead { max-width: min(34em, calc(var(--container) * .44)); }
@media (max-width: 900px) {
  body[data-service=urban] .page-hero .lead { max-width: none; }
  /* Voile clair allégé pour laisser voir la Grand-Place ; halo clair derrière le texte. */
  body[data-service=urban] .page-hero::before { background: linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .7) 55%, rgba(255, 255, 255, .5)); }
  body[data-service=urban] .page-hero-copy :is(.eyebrow, h1, .lead) { text-shadow: 0 0 16px rgba(255, 255, 255, .9), 0 0 3px rgba(255, 255, 255, .8); }
  body[data-service=urban] .route-card span { display: none; }
  body[data-service=urban] .cta h2 { text-wrap: balance; }
}
@media (min-width: 601px) and (max-width: 900px) {
  body[data-service=urban] .detail-grid:has(> article:nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  body[data-service=urban] .page-hero .actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  body[data-service=urban] .detail-grid { gap: 12px; }
  body[data-service=urban] .detail-grid article { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px; padding: 18px; }
  body[data-service=urban] .detail-grid h2 { margin: 0; font-size: 18px; }
  body[data-service=urban] .detail-grid p { grid-column: 1 / -1; margin-top: 10px; }
}

/* BXL Quick = réservation immédiate uniquement : pas d'onglets Maintenant / Planifier, date et heure non modifiables. */
body[data-experience=quick] .booking-tabs, body[data-experience=quick] .schedule .field-chevron { display: none; }

/* ---------- Formulaire : bagages et besoins particuliers (moteur de devis V1) ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.luggage-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.luggage-row select { min-width: 0; text-overflow: ellipsis; }
.needs-toggle { justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 2px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.needs-toggle::before { content: "+"; display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1.5px solid currentColor; border-radius: 50%; font-size: 14px; line-height: 1; text-decoration: none; }
.needs-toggle.open::before { content: "−"; }
.needs-panel { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.needs-panel[hidden] { display: none; }
.need-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.need-chip { position: relative; display: inline-flex; }
.need-chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.need-chip span { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px; border: 1px solid var(--field-line); border-radius: 999px; background: var(--field-bg); color: var(--field-ink); font-size: 13.5px; font-weight: 600; }
.need-chip input:checked + span { border-color: transparent; background: var(--accent); color: var(--on-accent); }
.need-chip input:focus-visible + span { outline: 2px solid var(--field-ink); outline-offset: 2px; }
.need-other[hidden] { display: none; }
.estimate-attrib { display: block; font-size: 10.5px; opacity: .65; }
.estimate-attrib:empty { display: none; }

/* ---------- stops : arrêts intermédiaires (commun aux trois modes) ---------- */
.stops { display: grid; gap: 8px; }
.stops:empty { display: none; }
.stop-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; }
.stop-row .field { min-width: 0; }
.stop-actions { display: flex; gap: 4px; }
.stop-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--field-line); border-radius: 50%; background: var(--field-bg); color: var(--field-ink); font: inherit; font-size: 16px; line-height: 1; cursor: pointer; }
.stop-num { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--field-ink); color: var(--field-bg); font-size: 12px; font-weight: 700; line-height: 1; }
.stop-btn:disabled { opacity: .35; cursor: default; }
.stops-rule { margin: 0; color: var(--muted); font-size: 12px; }
.stops-rule[hidden], .add-stop[hidden] { display: none; }
.estimate-price small .estimate-line { display: block; }
@media (max-width: 380px) { .stop-btn { width: 30px; height: 30px; } }
/* Libellés « grandes valises » / « bagages cabine / sacs » lisibles en entier sur téléphone : une colonne. */
@media (max-width: 480px) { .luggage-row { grid-template-columns: minmax(0, 1fr); } }

/* ---------- ux v2 : trajet relié (départ → arrêts → destination), cibles tactiles, résumé du prix, Quick simplifié ---------- */
.route .stops { display: grid; gap: inherit; }
.route .stop-row .field { padding-right: 14px; }
.route > .field, .route .stop-row .field { position: relative; }
/* Liaison visuelle entre les points (dans l'espace qui sépare deux champs) */
.route .stop-row .field::before, .route > .field ~ .field::before { content: ""; position: absolute; left: 22px; top: -10px; width: 2px; height: 10px; border-radius: 1px; background: var(--field-muted); opacity: .45; }
body[data-experience=quick] .route .field::before { display: none; }
body[data-experience=quick] .route .stop-row .field-body { border-top: 1px solid var(--field-line); padding-top: 7px; }
.stop-num { margin-left: -2px; }
.stop-btn, .stop-btn:disabled { width: 44px; height: 44px; font-size: 18px; opacity: 1; }
@media (max-width: 380px) { .stop-btn { width: 44px; height: 44px; } }
.needs-toggle, .add-stop, .details-toggle { min-height: 44px; }
/* BXL Quick : détails facultatifs repliés tant que « Ajouter des détails » n'est pas ouvert */
/* « + Ajouter un arrêt » reste visible près du trajet (un arrêt modifie l'itinéraire) ; seuls bagages et besoins sont repliés. */
body[data-experience=quick] #rideForm:not(.details-open) :is(.luggage-row, #needsPanel) { display: none; }
body[data-experience=quick] #needsToggle { display: none; }
/* Résumé du prix juste avant l'action */
.price-summary { display: grid; gap: 6px; padding: 14px 16px; border: 1px solid var(--field-line); border-radius: var(--radius); background: var(--field-bg); color: var(--field-ink); }
.price-summary[hidden] { display: none; }
.price-summary p { margin: 0; }
.ps-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ps-label { color: var(--field-muted); font-size: 14px; font-weight: 600; }
.ps-price { font-size: 24px; font-weight: 800; line-height: 1.1; white-space: nowrap; }
.ps-line { font-size: 14px; font-weight: 600; }
.ps-reason { color: var(--field-muted); font-size: 13px; line-height: 1.35; }
.ps-detail summary { display: flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ps-rows { display: grid; gap: 4px; padding-bottom: 4px; }
.ps-rows > div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.ps-rows > .total { margin-top: 2px; padding-top: 6px; border-top: 1px solid var(--field-line); font-weight: 800; }
.need-chip span { min-height: 44px; }
.need-chips { gap: 8px; }

/* ---------- ux v3 : adresses d'arrêt sur 2 lignes, prix unique, sélecteur sans masquage, Quick neutre ---------- */
.field textarea.stop-input { display: block; width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; font-size: 15px; font-weight: 600; line-height: 1.3; resize: none; overflow-y: auto; }
.field textarea.stop-input::placeholder { color: var(--field-muted); font-weight: 500; opacity: 1; }
/* Prix dominant unique : la carte d'estimation garde le trajet et un statut (« Estimation TTC »), pas un second gros prix. */
.estimate[data-state=ok] .estimate-price strong { display: none; }
/* BXL Quick : jamais de trajet de démonstration présenté comme un trajet réel ; écran neutre avant toute saisie. */
.hero-map .map-demo { display: none; }
body[data-experience=quick] .estimate:is([data-state=idle], [data-state=partial]) { display: none; }
/* Sélecteur Premium / Taxi / App : flottant seulement s'il y a la place ; sur petit écran ou faible hauteur, dans le flux
   (après le pied de page), jamais par-dessus le formulaire. */
@media (max-width: 900px), (max-height: 640px) {
  .experience-switch, .experience-switch.is-away { position: static; right: auto; bottom: auto; width: max-content; margin: 16px auto 24px; opacity: 1; pointer-events: auto; transform: none; }
}

/* ---------- ux v4 : cibles tactiles ≥ 44 px (onglets Maintenant / Planifier, inversion du trajet) ---------- */
.trip-tab { min-height: 46px; }
.swap-route { width: 44px; height: 44px; }
@media (max-width: 900px) { .trip-tab { min-height: 44px; } .swap-route { width: 44px; height: 44px; } }

/* Liens « Réserver ce trajet » des pages aéroports et gare : formulaire de l'accueil prérempli (?dest= / ?from=). */
.detail-grid .detail-link { display: inline-block; grid-column: 1 / -1; margin-top: 14px; color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }