/* Laoud — « Commander une course » (reserver.html), en complément de style.css (jetons, en-tête, pied de page).
   Téléphone d'abord (375 px), clair par défaut, sombre via prefers-color-scheme. Une seule colonne de 600 px au plus.
   Couleurs d'action (docs/QUALITY.md §2 bis) : émeraude #047857 pour « Commander / Réserver » (et « Relancer la recherche »)
   et pour tout état choisi ou actif, toujours plein (jamais un contour vert) ; rouge pour annuler. Pas de boîte dans la
   carte : des rangées à filet. Aucun texte coupé : tout passe à la ligne. */

:root {
  --order: #047857;
  --order-pressed: #065F46;
  --on-order: #FFFFFF;
  --danger: #B91C1C;
  --danger-pressed: #991B1B;
  --danger-bg: #FEE2E2;
  --danger-text: #991B1B;
  --field-bg: #FFFFFF;
  --field-border: #8792AB;
  --radius-field: 14px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --danger: #DC2626;
    --danger-pressed: #B91C1C;
    --danger-bg: #331515;
    --danger-text: #FCA5A5;
    --field-bg: #0B1220;
    --field-border: #5B6886;
  }
}

[hidden] { display: none !important; }
.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; }

.book-page main { padding: 20px 0 40px; }
.book-main:focus { outline: none; }
.book-main .wrap { max-width: 600px; }
.book-header .wrap { min-height: 60px; flex-wrap: nowrap; }
.book-page .site-header .brand { min-height: 44px; }
.book-head-actions { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.head-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--radius-pill); border: 0; background: transparent; color: var(--text-muted); font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; }
.head-link:hover { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }
.head-link:active { background: var(--pressed); }

/* ---------- Carte ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; }
.card + .card, .book > .card + .card { margin-top: 16px; }
.card p { max-width: none; }
.card-title { font-size: clamp(24px, 6.4vw, 30px); line-height: 1.2; margin: 0 0 8px; overflow-wrap: anywhere; }
.card-title:focus, .card-title:focus-visible { outline: none; }
.lead-sm { color: var(--text-muted); margin: 0 0 18px; }
.info { margin: 0 0 14px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--brand-soft); color: var(--text); font-weight: 600; }
.r-label { display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin: 0; }

/* ---------- Champs ---------- */
.field { margin: 0 0 16px; }
.field label, legend { display: block; font-weight: 600; font-size: 15px; color: var(--text); margin: 0 0 6px; padding: 0; }
.book-page input[type='text'], .book-page input[type='email'], .book-page input[type='tel'], .book-page input[type='time'], .book-page select, .book-page textarea {
  width: 100%; min-height: 52px; padding: 12px 14px; border: 1px solid var(--field-border); border-radius: var(--radius-field);
  background: var(--field-bg); color: var(--text); font: inherit; font-size: 17px; line-height: 1.35;
}
.book-page textarea { min-height: 80px; resize: vertical; }
.book-page select { appearance: auto; cursor: pointer; }
.book-page input::placeholder, .book-page textarea::placeholder { color: var(--text-muted); opacity: 0.85; }
.book-page input:focus-visible, .book-page select:focus-visible, .book-page textarea:focus-visible { outline: 3px solid var(--brand-text); outline-offset: 1px; border-color: var(--brand-text); }
.book-page input[aria-invalid='true'] { border-color: var(--danger); border-width: 2px; }
.field-help { margin: 6px 0 0; font-size: 15px; color: var(--text-muted); }
.field-error { margin: 6px 0 0; font-size: 15px; font-weight: 600; color: var(--danger-text); }
.count { text-align: right; }
.code-input { font-family: 'Lexend', system-ui, sans-serif; font-size: 26px !important; letter-spacing: 0.3em; text-align: center; }

.check { display: grid; grid-template-columns: 28px 1fr; gap: 4px 10px; align-items: start; }
.check input { width: 24px; height: 24px; margin: 10px 0 0 2px; accent-color: var(--order); cursor: pointer; }
.check label { font-weight: 400; font-size: 16px; margin: 0; padding: 8px 0; cursor: pointer; }
.check .field-error { grid-column: 2; }

.captcha { margin: 0 0 16px; min-height: 65px; }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; padding: 12px 22px; border-radius: var(--radius-pill); border: 1px solid transparent; font: inherit; font-weight: 600; font-size: 17px; line-height: 1.25; text-align: center; text-decoration: none; white-space: normal; cursor: pointer; }
.btn svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.btn:focus-visible { outline: 3px solid var(--brand-text); outline-offset: 3px; }
.btn:disabled { cursor: not-allowed; opacity: 0.55; }
.btn[aria-busy='true'] { cursor: progress; opacity: 0.8; }
.btn-primary { background: var(--brand); color: var(--on-brand); }
.btn-primary:hover:not(:disabled) { background: var(--brand-pressed); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--field-border); }
.btn-secondary:hover:not(:disabled) { border-color: var(--brand-text); }
.btn-secondary:active:not(:disabled) { background: var(--pressed); }
.btn-ghost { background: transparent; color: var(--brand-text); min-height: 44px; padding: 8px 12px; text-decoration: underline; text-underline-offset: 3px; }
.btn-ghost:hover:not(:disabled) { color: var(--text); }
.btn-ghost:active:not(:disabled) { background: var(--pressed); }
.btn-small { width: auto; min-height: 44px; padding: 8px 18px; font-size: 16px; background: var(--brand); color: var(--on-brand); }
.btn-order { background: var(--order); color: var(--on-order); min-height: 56px; font-size: 18px; }
.btn-order:hover:not(:disabled) { background: var(--order-pressed); }
.btn-order:disabled { background: var(--surface-alt); color: var(--text-muted); border-color: var(--border); opacity: 1; }
.btn-danger { background: var(--danger); color: #FFFFFF; }
.btn-danger:hover:not(:disabled) { background: var(--danger-pressed); }
.btn-danger-outline { background: transparent; color: var(--danger-text); border: 2px solid var(--danger); }
.btn-danger-outline:hover:not(:disabled) { background: var(--danger-bg); }
/* Sombre : les boutons foncés se détachent de la carte foncée par un liseré clair. */
@media (prefers-color-scheme: dark) {
  .btn-primary, .btn-small { border-color: var(--text-muted); }
}
.link-btn { background: none; border: 0; padding: 10px 4px; min-height: 44px; font: inherit; font-weight: 600; color: var(--brand-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link-btn:focus-visible, .head-link:focus-visible, .icon-btn:focus-visible { outline: 3px solid var(--brand-text); outline-offset: 2px; }
.switch { margin: 14px 0 0; text-align: center; color: var(--text-muted); }
.code-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; margin-top: 10px; }
.code-actions .btn { width: auto; }

.form-error, .inline-alert { margin: 0 0 14px; padding: 10px 12px; border-radius: 12px; background: var(--danger-bg); color: var(--danger-text); font-weight: 600; }
.inline-alert.warn { background: var(--warning-bg); color: var(--warning-text); }
.inline-alert p { margin: 0 0 8px; }

/* ---------- Trajet (départ / arrivée) ---------- */
.book-card { padding-bottom: 0; }
/* Rangées à filet, sans boîte dans la carte (QA : boîtes imbriquées). */
.trip { position: relative; margin: 8px 0 14px; border-bottom: 1px solid var(--border); }
.trip-row { position: relative; display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; padding: 8px 0; }
.trip-row + .trip-row { border-top: 1px solid var(--border); }
.trip-mark { margin-top: 38px; width: 12px; height: 12px; justify-self: center; background: var(--brand-text); }
.mark-pickup { border-radius: 50%; }
.mark-dropoff { border-radius: 3px; }
.combo { position: relative; min-width: 0; }
.combo label { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.combo-input { position: relative; display: flex; align-items: center; gap: 4px; }
.combo-input input { flex: 1; min-width: 0; }
.chosen { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; min-height: 52px; padding: 8px 14px; border: 1px solid var(--field-border); border-radius: var(--radius-field); background: var(--field-bg); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.chosen:hover { border-color: var(--brand-text); }
.chosen:focus-visible { outline: 3px solid var(--brand-text); outline-offset: 1px; }
.chosen-name { font-weight: 600; font-size: 17px; line-height: 1.3; }
.chosen-address { font-size: 15px; line-height: 1.3; color: var(--text-muted); }
.chosen-address:empty { display: none; }
.icon-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--text-muted); cursor: pointer; }
.icon-btn:hover { color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
.icon-btn:active { background: var(--pressed); }
.icon-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn[aria-busy='true'] { cursor: progress; opacity: 0.6; }
.trip-error { margin: 4px 0 8px 30px; }

.suggestions { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; margin: 0; padding: 6px; list-style: none; max-width: none; background: var(--surface); border: 0; border-radius: 16px; box-shadow: 0 12px 28px rgba(9, 15, 29, 0.18); max-height: min(60vh, 420px); overflow-y: auto; }
/* Clair : l'ombre seule (QA). Sombre : l'ombre ne se voit pas sur fond foncé, le filet reste. */
@media (prefers-color-scheme: dark) { .suggestions { border: 1px solid var(--field-border); } }
.suggestions li { margin: 0; }
.option { display: flex; flex-direction: column; justify-content: center; min-height: 52px; padding: 8px 12px; border-radius: 12px; cursor: pointer; }
.option:hover { box-shadow: inset 0 0 0 1px var(--border); }
/* Suggestion active (clavier) : émeraude plein, texte blanc. */
.option[aria-selected='true'] { background: var(--order); box-shadow: none; }
.option[aria-selected='true'] .option-name, .option[aria-selected='true'] .option-address { color: var(--on-order); }
.option-name { font-weight: 600; color: var(--text); line-height: 1.3; }
.option-address { font-size: 15px; color: var(--text-muted); line-height: 1.35; }
.option-empty { padding: 12px; color: var(--text-muted); font-size: 15px; }

/* ---------- Quand ---------- */
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.when { margin: 0 0 18px; display: flow-root; }
/* « Quand ? » et son choix sur la même ligne (moins de défilement). */
.when legend { float: left; margin: 12px 12px 0 0; }
.when .segmented { width: min(280px, 72%); margin-left: auto; }
.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--surface); }
.segmented input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segmented label { display: flex; align-items: center; justify-content: center; min-height: 44px; margin: 0; padding: 6px 12px; border-radius: var(--radius-pill); font-weight: 600; color: var(--text-muted); cursor: pointer; text-align: center; }
.segmented input:checked + label { background: var(--order); color: var(--on-order); }
.segmented input:focus-visible + label { outline: 3px solid var(--brand-text); outline-offset: 2px; }
.later { clear: both; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 12px; }
.later .field { margin: 0; }
.later .field-error { grid-column: 1 / -1; }

/* ---------- Véhicule et prix ---------- */
.offer { margin: 0 0 4px; scroll-margin-top: 12px; }
/* Rangées à filet ; la catégorie choisie est pleine en émeraude, texte blanc (jamais un contour vert). */
.cat-list { display: grid; gap: 4px; }
.cat { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; min-height: 56px; padding: 8px 14px; border-radius: 16px; cursor: pointer; background: var(--surface); }
.cat + .cat::before { content: ''; position: absolute; left: 14px; right: 14px; top: -3px; border-top: 1px solid var(--border); }
.cat:has(input:checked)::before, .cat:has(input:checked) + .cat::before { content: none; }
.cat input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cat:hover { box-shadow: inset 0 0 0 1px var(--border); }
.cat:has(input:checked) { background: var(--order); box-shadow: none; }
.cat:has(input:checked) :is(.cat-name, .cat-line, .cat-price, .cat-flat) { color: var(--on-order); }
.cat:has(input:focus-visible) { outline: 3px solid var(--brand-text); outline-offset: 2px; }
.cat-name { font-family: 'Lexend', system-ui, sans-serif; font-weight: 600; font-size: 17px; color: var(--text); line-height: 1.25; }
.cat-line { display: block; font-size: 15px; color: var(--text-muted); line-height: 1.3; }
.cat-price { font-family: 'Lexend', system-ui, sans-serif; font-weight: 600; font-size: 18px; color: var(--text); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cat-price .sk { display: inline-block; width: 64px; height: 20px; vertical-align: middle; }
.cat[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; }

.facts { margin: 12px 0 4px; font-size: 15px; color: var(--text-muted); }
.surge { margin: 4px 0; font-size: 15px; font-weight: 600; color: var(--warning-text); background: var(--warning-bg); border-radius: 10px; padding: 6px 10px; }
.pay { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; font-weight: 600; color: var(--text); }
.pay svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.note-box { margin: 10px 0 0; border: 0; background: transparent; max-width: none; }
.note-box summary { min-height: 44px; padding: 8px 0 8px 28px; font-weight: 600; color: var(--brand-text); position: relative; cursor: pointer; }
.note-box summary::after { content: none; }
.note-box summary::before { content: '+'; position: absolute; left: 4px; top: 50%; transform: translateY(-50%); font-family: 'Lexend', sans-serif; font-size: 22px; }
.note-box[open] summary::before { content: '–'; }
.note-box summary:focus-visible { outline: 3px solid var(--brand-text); outline-offset: 2px; border-radius: 8px; }
.note-box .field { margin: 6px 0 0; }

/* Barre de commande : collée en bas de l'écran tant que la carte défile (le bouton reste toujours visible). */
.order-bar { position: sticky; bottom: 0; z-index: 10; margin: 14px -22px 0; padding: 12px 22px calc(16px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius); }
.order-bar .inline-alert { margin-bottom: 10px; }
.order-hint { margin: 0 0 8px; font-size: 15px; color: var(--text-muted); text-align: center; }

/* ---------- Réservations à venir ---------- */
.upcoming h2 { font-size: 20px; margin: 0 0 8px; }
.upcoming-list { list-style: none; margin: 0; padding: 0; max-width: none; }
.upcoming-list > li { margin: 0; padding: 12px 0; border-top: 1px solid var(--border); }
.upcoming-list > li:first-child { border-top: 0; padding-top: 4px; }
.up-when { font-weight: 600; margin: 0; }
.up-route { margin: 2px 0 8px; font-size: 15px; color: var(--text-muted); }
.up-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.up-actions .btn { width: auto; min-height: 44px; padding: 8px 18px; font-size: 16px; }
.up-q { margin: 0 0 8px; font-weight: 600; }

/* ---------- Course ---------- */
.ride-status { position: relative; }
.ride-detail { margin: 0 0 14px; color: var(--text-muted); font-size: 17px; }
.pulse { display: block; width: 44px; height: 44px; margin: 4px 0 12px; border-radius: 50%; border: 1px solid var(--border); background: var(--brand-soft); position: relative; }
.pulse::after { content: ''; position: absolute; inset: 14px; border-radius: 50%; background: var(--brand-text); }
@media (prefers-reduced-motion: no-preference) {
  .pulse { animation: pulse 1.6s ease-in-out infinite; }
  @keyframes pulse { 50% { transform: scale(1.18); opacity: 0.7; } }
}
.ride-map { height: 220px; border-radius: 16px; border: 1px solid var(--border); overflow: hidden; margin: 0 0 14px; background: var(--surface-alt); }
.leaflet-container { font: inherit; }
.car-marker span, .pickup-marker span { display: block; width: 100%; height: 100%; border-radius: 50%; border: 3px solid #FFFFFF; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); }
.car-marker span { background: #090F1D; }
.pickup-marker span { background: #FFFFFF; border: 5px solid #090F1D; }

.driver { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin: 0 0 14px; }
.driver-main p { margin: 0; }
.driver-name { font-family: 'Lexend', system-ui, sans-serif; font-weight: 600; font-size: 20px; line-height: 1.25; }
.driver-vehicle { color: var(--text-muted); }
.plate-row { margin: 0; }
.plate { display: inline-block; padding: 4px 10px; border: 2px solid var(--text); border-radius: 8px; font-family: 'Lexend', system-ui, sans-serif; font-weight: 600; font-size: 18px; letter-spacing: 0.06em; white-space: nowrap; }
.call { grid-column: 1 / -1; }
.call svg { stroke-width: 2; }

.route { list-style: none; padding: 0; margin: 0 0 8px; max-width: none; }
.route-stop { position: relative; display: flex; flex-direction: column; padding: 0 0 12px 26px; margin: 0; }
.route-stop::before { content: ''; position: absolute; left: 4px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--brand-text); }
.route-end::before { border-radius: 2px; }
.route-stop:not(.route-end)::after { content: ''; position: absolute; left: 8px; top: 22px; bottom: 2px; border-left: 2px solid var(--border); }
.route-address { font-weight: 600; }
.ride-summary { margin: 0 0 14px; color: var(--text-muted); font-size: 15px; }

.cancel-zone { margin-top: 6px; }
.cancel-confirm { margin-top: 12px; padding: 14px; border-radius: 16px; background: var(--danger-bg); }
.cancel-q { margin: 0 0 4px; font-weight: 600; color: var(--text); }
.cancel-fee { margin: 0 0 12px; color: var(--text); }
.cancel-actions { display: grid; gap: 10px; }
.ride-end { display: grid; gap: 10px; margin-top: 8px; }

/* ---------- Chargement ---------- */
.skeleton { display: grid; gap: 14px; }
.sk { background: var(--surface-alt); border: 1px solid var(--border); border-radius: 12px; }
.sk-title { height: 34px; width: 60%; }
.sk-field { height: 52px; }
.sk-button { height: 52px; border-radius: var(--radius-pill); }
@media (prefers-reduced-motion: no-preference) {
  .sk { animation: sk-pulse 1.4s ease-in-out infinite; }
  @keyframes sk-pulse { 50% { opacity: 0.55; } }
}

.book-footer { padding: 24px 0 32px; }
.book-footer p { max-width: 60ch; }

@media (prefers-reduced-motion: no-preference) {
  .btn, .head-link, .icon-btn, .cat, .option, .segmented label { transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease; }
}

@media (max-width: 480px) {
  .book-page main { padding: 12px 0 24px; }
  .book-main .wrap { padding: 0 12px; }
  .card { padding: 18px 16px; border-radius: 18px; }
  .order-bar { margin: 12px -16px 0; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); border-radius: 0 0 18px 18px; }
  .trip { margin: 10px 0 14px; padding: 4px 10px; }
  .when { margin-bottom: 14px; }
  .book-header .wrap { padding-left: 12px; padding-right: 12px; }
}

/* ---------- Aéroport (p19) : terminal, atterrissage, sortie, vol ; frais d'accès et total ---------- */
.airport { margin: 0 0 18px; padding: 14px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); }
.airport-title { display: flex; align-items: flex-start; gap: 8px; font-size: 18px; line-height: 1.3; margin: 0 0 12px; overflow-wrap: anywhere; }
.airport-title svg { width: 22px; height: 22px; flex: none; margin-top: 1px; fill: none; stroke: var(--brand-text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.req { font-weight: 400; color: var(--text-muted); }
.terminals { margin: 0 0 12px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.terminal-chosen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; min-height: 44px; }
.terminal-chosen-name { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text); }
.terminal-chosen-name::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-text); flex: none; }
.pill { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--field-border); border-radius: var(--radius-pill); background: var(--surface); color: var(--text); font-weight: 600; font-size: 15px; line-height: 1.25; cursor: pointer; }
.pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pill:hover { border-color: var(--brand-text); }
.pill:active { background: var(--pressed); }
.pill:has(input:checked) { background: var(--order); border-color: transparent; color: var(--on-order); }
.pill:has(input:focus-visible) { outline: 3px solid var(--brand-text); outline-offset: 2px; }
.pills[aria-invalid='true'] .pill { border-color: var(--danger); }
.landing { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.landing .field { margin: 0 0 4px; }
.landing:has(#landing-day-field[hidden]) { grid-template-columns: 1fr; }
.landing-error { grid-column: 1 / -1; margin: 0 0 8px; }
.margin { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 10px 0 8px; }
.margin-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 180px; }
.margin-text .field-help { margin: 0; }
.margin-label { font-weight: 600; font-size: 15px; }
.stepper { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 2px; }
.step-value { min-width: 64px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.airport-result { margin: 4px 0 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.airport-result p { margin: 0; }
#airport-pickup-at { font-weight: 600; color: var(--text); }
#airport-free-wait { font-size: 15px; color: var(--text-muted); }
.flight { margin: 0; }
.flight input { text-transform: uppercase; }
.cat-flat { display: block; font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.3; margin-top: 2px; }
.fee-line { margin: 4px 0; font-size: 15px; font-weight: 600; color: var(--text); }
.total-line { margin: 4px 0; font-size: 15px; color: var(--text-muted); }
.ride-airport { margin: 0 0 12px; font-size: 15px; color: var(--text); }
.ride-airport p { margin: 0 0 2px; }

/* Retard de vol (Tes réservations) */
.delay-panel { margin-top: 10px; padding: 12px; border: 1px solid var(--border-strong, var(--field-border)); border-radius: 14px; background: var(--surface); }
.delay-panel p { margin: 0 0 6px; }
.delay-intro { font-size: 15px; color: var(--text-muted); }
.delay-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 8px; }
.delay-value { font-family: 'Lexend', system-ui, sans-serif; font-weight: 600; font-size: 20px; font-variant-numeric: tabular-nums; min-width: 72px; text-align: center; }
.delay-shift { font-weight: 600; }
.up-airport { margin: 0 0 8px; font-size: 15px; color: var(--text); }
.btn-inline { width: auto; min-height: 44px; padding: 8px 16px; font-size: 16px; }
#upcoming-notice:focus { outline: none; }

/* Carte obligatoire pour commander (p25j) : une section simple en tête du formulaire (jamais une boîte dans la carte),
   calme (pas d'alerte rouge), puis un filet gris avant « Départ ». */
.card-needed { display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; margin: 0 0 16px; padding: 0 0 16px; border-bottom: 1px solid var(--border); }
.card-needed[hidden] { display: none; }
.card-needed-icon { width: 22px; height: 22px; margin-top: 1px; fill: none; stroke: var(--text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.card-needed-text { margin: 0; font-weight: 600; color: var(--text); }
.card-needed-actions { grid-column: 1 / -1; display: grid; gap: 8px; }
.card-needed-actions .btn[hidden] { display: none; }