:root{
  /* ===== Palette adaptée au site ===== */
  --bg: #081a2e;
  --card: #0c2542;
  --text: #e9f3ff;
  --muted: #b7c7db;
  --accent: #1e73be;
  --accent-2: #22c55e;
  --error: #ef4444;
  --radius: 16px;
  --pad: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --border: 1px solid rgba(255,255,255,.10);
  --focus: 0 0 0 3px rgba(30,115,190,.35);

  /* Safe areas */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Hauteur réelle du footer, ajustée en JS */
  --footer-h: 96px;

  /* ====== Snap points du panneau (svh) ====== */
  --sheet-collapsed: 18svh;
  --sheet-mid: 56svh;
  --sheet-expanded: 96svh;

  /* Valeur courante (modifiée en JS) */
  --sheet-height: var(--sheet-mid);
}

/* ===== Layout plein écran ===== */
* { box-sizing: border-box; }
html, body { height: 100%; }
body.layout-full{
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Cantarell, Ubuntu, "Helvetica Neue", Arial, "Noto Sans";
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
  background: var(--bg);
  overflow: hidden; /* pas de scroll global ; scroll dans la sheet */
}

/* Carte plein écran derrière (dvh => hauteur utile) */
#map{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
}

/* ===== Bottom sheet fixe ===== */
.sheet-fixed{
  position: fixed;
  left: 0; right: 0; bottom: var(--safe-bottom);
  height: var(--sheet-height);
  min-height: clamp(280px, 36svh, 560px);
  background: linear-gradient(180deg, rgba(6,22,40,.88), rgba(8,28,50,.96));
  border-top: var(--border);
  box-shadow: 0 -30px 60px rgba(0,0,0,.45);
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  display: flex;
  flex-direction: column;
  padding-bottom: var(--safe-bottom);
  contain: layout paint;

  /* Fluidité du swipe / snap */
  transition: height .18s ease;
  will-change: height;
}
.sheet-fixed::before{
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 96px;
  pointer-events: none;
  cursor: grab;
}
.sheet-fixed:active::before{ cursor: grabbing; }

/* Empêche les scroll-bounces durant le drag global */
html.dragging, body.dragging { overscroll-behavior: none; }

/* Poignée */
.sheet-grip{
  position: relative;
  height: 64px;
  display: grid; place-items: center;
  touch-action: none;        /* le JS gère le geste */
  cursor: grab;
}
.dragging .sheet-grip{ cursor: grabbing; }
.sheet-grip::before{
  content: "";
  width: 54px; height: 5px; border-radius: 999px;
  background: rgba(233,243,255,.35);
  display: block; margin-top: 10px;
}

/* Contenu qui scroll */
.sheet-scroll{
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* Espace dynamique = hauteur du footer + marge + safe-bottom */
  padding: 0 12px calc(var(--footer-h) + 24px + var(--safe-bottom));
  /* Focus/ancres ne finissent jamais sous le footer */
  scroll-padding-bottom: calc(var(--footer-h) + 24px + var(--safe-bottom));
}
/* petit spacer final pour être sûr que le dernier bloc soit toujours visible */
.sheet-scroll::after{
  content: "";
  display: block;
  height: calc(var(--footer-h) + 12px + var(--safe-bottom));
}

/* Sections */
.sheet-section{
  background: rgba(255,255,255,.035);
  border: var(--border); /* unified border style */
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 12px;
}
.sheet-header{ display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
h2{ margin: 0 0 10px 0; font-size: 18px; }

/* Grids responsive */
.grid{ display: grid; gap: 12px; }
.grid-2{ grid-template-columns: 1fr 1fr; }
.grid-3{ grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 860px){
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* Form */
.field{ display: flex; flex-direction: column; }
label{ font-weight: 600; }
input, select, textarea{
  background: var(--card); /* unified surface color */
  color: var(--text);
  border: var(--border);
  border-radius: 12px;
  padding: 14px 14px;
  outline: none;
  font-size: 16px;
  width: 100%;
}
input:focus, textarea:focus, select:focus { box-shadow: var(--focus); }

.input-row{ display: flex; gap: 8px; align-items: center; }
.btn-ghost{
  white-space: nowrap;
  border: var(--border);
  background: var(--card);
  color: var(--text);
  padding: 14px 14px; /* align with input padding for consistency */
  border-radius: 12px;
  cursor: pointer;
}
.btn-ghost:focus { box-shadow: var(--focus); }

/* Chips rapides */
.chips{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chip-ghost{
  background: rgba(255,255,255,.06);
  border: 1px dashed rgba(255,255,255,.18);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
}
.chip-ghost:focus { outline: none; box-shadow: var(--focus); }

.segmented{ display: flex; gap: 8px; }
.segmented input{ display: none; }
.segmented label{
  flex: 1; cursor: pointer; user-select: none; text-align: center;
  background: var(--card);
  border: var(--border);
  padding: 10px 12px;
  border-radius: 12px;
}
.segmented input:checked + span,
.segmented label:has(input:checked){
  background: linear-gradient(135deg, rgba(30,115,190,.35), rgba(30,115,190,.15));
  border-color: rgba(30,115,190,.6);
}
.segmented label:has(input:focus-visible) { box-shadow: var(--focus); }

.checkbox{ display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.checkbox input{ width: 18px; height: 18px; }

.muted{ color: var(--muted); font-size: 13px; }
.figure{ font-size: 22px; font-weight: 800; }

/* ===== Footer de la sheet ===== */
.sheet-footer{
  position: absolute;
  left: 5px; right: 5px;
  bottom: calc(var(--safe-bottom) + 12px);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 5px 5px;
  background: var(--card);
  border: var(--border);
  box-shadow: var(--shadow);
  border-radius: 12px;
  z-index: 1;
}
.sheet-footer .mini { min-width: 10px; }
.cta-wrap{ display: flex; gap: 8px; align-items: center; }

.btn-primary{
  background: linear-gradient(135deg, var(--accent), #2d9cf0);
  color: white;
  border: 0;
  padding: 12px 18px;
  font-weight: 700;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.btn-primary:disabled { opacity: .6; cursor: not-allowed; }
.btn-primary:focus { outline: none; box-shadow: var(--focus); }

.form-message{ min-height: 22px; color: var(--muted); padding: 8px 12px; }
.form-message.error{ color: var(--error); }
.form-message.success{ color: var(--accent-2); }

/* Utils */
.hp{ position: absolute; left: -9999px; height: 0; width: 0; opacity: 0; }
.hidden{ display: none !important; }

/* Suggestions */
.suggestions{ position: relative; margin-top: 6px; }
.suggestions:empty { display: none; }
.suggestions .panel{
  position: absolute;
  z-index: 20;
  inset: 4px 0 auto 0;
  background: var(--card);
  border: var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  max-height: 240px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.suggestions .item{
  padding: 12px 12px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.suggestions .item:last-child { border-bottom: 0; }
.suggestions .item[aria-selected="true"]{
  background: rgba(30,115,190,.25);
}

/* Empêcher la sélection pendant le drag */
.dragging, .dragging *{
  user-select: none !important;
  -webkit-user-select: none !important;
  -ms-user-select: none !important;
}
.sheet-grip,
.sheet-fixed::before{
  user-select: none;
  -webkit-user-select: none;
}
input, textarea{
  user-select: text;
  -webkit-user-select: text;
}
img, svg{ -webkit-user-drag: none; }
.dragging .sheet-fixed::before { cursor: grabbing; }

/* ===== Vehicle cards : toujours côte à côte, sans scrollbar ===== */
.vehicle-choices{
  display: flex;
  flex-wrap: nowrap;            /* reste en ligne */
  gap: 12px;
  overflow: hidden;             /* jamais de barre de défilement */
}
.vehicle-card{
  position: relative;
  display: grid;
  place-items: center;
  padding: 10px;
  background: var(--card);
  border: var(--border);
  border-radius: 14px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
  user-select: none;

  /* Les deux cartes se partagent la ligne et rapetissent si nécessaire */
  flex: 1 1 0;
  min-width: 0;                 /* autorise la réduction sans overflow */
  aspect-ratio: 16 / 9;         /* garde de belles proportions */
}
.vehicle-card img{
  display: block;
  max-width: 70%;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.vehicle-card input{
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.vehicle-card:has(input:checked){
  background: linear-gradient(135deg, rgba(30,115,190,.22), rgba(30,115,190,.10));
  border-color: rgba(30,115,190,.65);
  box-shadow: 0 10px 25px rgba(30,115,190,.18);
  transform: translateY(-1px);
}
.vehicle-card:has(input:focus-visible){
  outline: none;
  box-shadow: var(--focus);
}
.vehicle-card:hover { transform: translateY(-1px); }

/* Tablettes / Desktop : on garde 2 cartes, respirantes */
@media (min-width: 768px){
  .vehicle-card { aspect-ratio: 16/9; }
  .vehicle-card img { max-width: 54%; }

}

/* ===== Pastilles passagers ===== */
.pax-choices{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  outline: none;
}
.pax-item{
  width: 48px;
  aspect-ratio: 1 / 1;
  line-height: 0;
  display: grid;
  place-items: center;
  padding: 0;
  margin: 0;
  background: var(--card);
  border: var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
  box-sizing: border-box;
}
.pax-item img{
  display: block;
  width: 64%;
  height: 64%;
  object-fit: contain;
  margin: 0;
  pointer-events: none;
}
.pax-item.is-selected{
  background: linear-gradient(135deg, rgba(30,115,190,.22), rgba(30,115,190,.10));
  border-color: rgba(30,115,190,.65);
  box-shadow: 0 10px 25px rgba(30,115,190,.18);
  transform: translateY(-1px);
}
.pax-item:focus-visible{
  outline: none;
  box-shadow: var(--focus);
}
.pax-van-only { display: none; }
.pax-choices[data-mode="van"] .pax-van-only { display: grid; }

/* Footer — typo réduite petits écrans */
.sheet-footer .mini { transform: translateY(1px); }
.sheet-footer .mini .muted { font-size: 11px; line-height: 1.1; }
.sheet-footer .mini .figure { font-size: 16px; line-height: 1.1; font-weight: 700; }
@media (max-width: 380px){
  .sheet-footer .mini .muted { font-size: 10px; }
  .sheet-footer .mini .figure { font-size: 15px; }
}

/* ===== Ajustements par tailles d’écran ===== */
@media (max-width: 360px){
  :root { --pad: 12px; }
  .sheet-section { padding: 10px; }
  input, select, textarea { font-size: 10px; padding: 5px; }
}

@media (max-height: 480px){
  .sheet-fixed{ border-top-left-radius: 24px; border-top-right-radius: 24px; /* symmetrize corners */ }
  .sheet-grip { height: 52px; }
  .vehicle-card img { max-width: 24%; }

  /* on garde l’espace dynamique ici aussi */
  .sheet-scroll { padding-bottom: calc(var(--footer-h) + 16px + var(--safe-bottom)); }
}

@media (min-width: 768px){
  .sheet-fixed { border-top-left-radius: 48px; border-top-right-radius: 48px; /* symmetrize corners */ }
  .sheet-section { padding: 16px; }
  h2 { font-size: 20px; }
  .vehicle-card { aspect-ratio: 16/9; }
  .vehicle-card img { max-width: 54%; }
}

/* Écrans larges (Nest Hub, desktop) → SPLIT SCREEN (50/50) */
@media (min-width: 1024px){
  /* Carte à gauche (50%) */
  #map{
    left: 0;
    width: 50vw;
    height: 100dvh;
    
  }
    input, select, textarea { font-size: 15px; padding: 10px; }

  /* Panneau formulaire à droite (50%) */
  .sheet-fixed{
    top: var(--safe-top);
    bottom: 0;
    right: 0;
    left: auto;
    width: 50vw;
    height: 100dvh;
    max-width: none;
    margin: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-left: var(--border);
    border-top: 0;
    backdrop-filter: saturate(110%) blur(8px);
    padding-bottom: 0;
  }

  .sheet-fixed::before,
  .sheet-grip { display: none !important; }

  .sheet-scroll { padding: 16px 16px calc(var(--footer-h) + 24px); }
  .sheet-footer { left: 12px; right: 12px; bottom: 12px; }

  .leaflet-bottom.leaflet-right,
  .leaflet-bottom.leaflet-left{
    bottom: 16px !important;
  }
}

/* Déplace les contrôles Leaflet sous la sheet uniquement mobile/tablette */
@media (max-width: 1023.98px){
  .leaflet-bottom.leaflet-right,
  .leaflet-bottom.leaflet-left{
    bottom: calc(var(--sheet-height) + 16px) !important;
  }
      input, select, textarea { font-size: 10px; padding: 5px; }

}

/* ===== Modal de confirmation ===== */
.confirm-modal{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(4px);
  z-index: 9999;
}
.confirm-modal[hidden] { display: none; }

.confirm-card{
  width: min(520px, 92vw);
  background: linear-gradient(180deg, rgba(12,37,66,.98), rgba(9,27,48,.98));
  border: var(--border);
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  border-radius: var(--radius);
  padding: 22px 20px 18px;
  text-align: center;
  animation: popIn .18s ease-out both;
}
@keyframes popIn{
  from{ transform: translateY(6px) scale(.98); opacity: 0; }
  to  { transform: translateY(0) scale(1); opacity: 1; }
}

.confirm-icon{
  width: 68px;
  height: 68px;
  margin: 6px auto 10px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(45% 45% at 50% 50%, rgba(34,197,94,.85), rgba(34,197,94,.55));
  color: white;
  font-weight: 900;
  font-size: 36px;
  box-shadow: 0 12px 28px rgba(34,197,94,.35);
}

.confirm-text{ margin: 4px 0 14px; color: var(--muted); }
.confirm-actions{ display: flex; justify-content: center; gap: 8px; }
.confirm-actions .btn-primary{ min-width: 120px; }

/* =========================================================
   MICRO-ÉCRANS (≈ 220×470) — Répartition & tailles compactes
   ========================================================= */
@media (max-width: 260px){
  :root{
    /* compacter la sheet et les espacements */
    --pad: 10px;
    --radius: 12px;
    --footer-h: 80px;               /* footer un peu plus fin */
    --sheet-collapsed: 22svh;       /* poignée un peu plus haute = saisie + facile */
    --sheet-mid: 58svh;
    --sheet-expanded: 96svh;
  }

  /* base typo + interlignage plus serré */
  body { font-size: 13px; line-height: 1.25; }

  /* sections + champs plus denses */
  .sheet-section{ padding: 10px; margin-bottom: 10px; }
  label{ font-size: 12px; }
  input, select, textarea{
    font-size: 13px;
    padding: 10px 12px;
    border-radius: 10px;
  }
  .input-row { gap: 6px; }
  .btn-ghost{ padding: 10px 12px; font-size: 13px; border-radius: 10px; }

  /* cartes véhicule — toujours côte à côte mais plus compactes */
  .vehicle-choices{ gap: 8px; }
  .vehicle-card{
    padding: 8px;
    border-radius: 12px;
    aspect-ratio: 15 / 9;          /* un peu moins haut */
  }
  .vehicle-card img{ max-width: 48%; }

  /* pastilles passagers plus petites */
  .pax-item{ width: 40px; border-radius: 10px; }
  .pax-item img{ width: 60%; height: 60%; }

  /* grille => 1 colonne partout à cette largeur */
  .grid-2, .grid-3 { grid-template-columns: 1fr !important; }

  /* ===== Footer très lisible et compact ===== */
  .sheet-footer{
    padding: 8px 8px;
    border-radius: 10px;
    gap: 10px;

    /* sur ultra-étroit, meilleur flux avec grid */
    display: grid;
    grid-template-columns: 1fr 1fr;   /* Distance/Durée | Tarif */
    align-items: center;
  }

  .sheet-footer .mini{
    min-width: 0;         /* autorise le rétrécissement */
  }

  .sheet-footer .mini .muted{
    font-size: 10px;      /* libellé "Distance", "Tarif" */
    opacity: .9;
  }
  .sheet-footer .mini .figure{
    font-size: 15px;      /* valeur principale */
    line-height: 1.05;
    font-weight: 800;
  }
  .sheet-footer .mini .sub{
    margin-top: 2px;
    font-size: 11px;      /* durée sous la distance */
    color: var(--muted);
    line-height: 1.1;
    white-space: nowrap;
  }

  /* CTA pleine largeur, sous les métriques */
  .sheet-footer .cta-wrap{
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
  }
  #prevBtn, #submitBtn{
    padding: 10px 12px;
    font-size: 13px;
    border-radius: 9px;
    flex: 1 1 0;          /* boutons qui s’étirent */
  }

  /* messages et aides plus discrets */
  .muted{ font-size: 12px; }
  .form-message{ font-size: 12px; padding: 6px 8px; }

  /* poignée légèrement réduite mais cliquable */
  .sheet-grip{ height: 52px; }
  .sheet-grip::before{ width: 42px; height: 4px; }
}

/* Hauteurs serrées (ex: 470px) — encore un cran d’optimisation */
@media (max-height: 520px) and (max-width: 300px){
  :root{ --footer-h: 72px; }

  .sheet-section{ padding: 8px; margin-bottom: 8px; }
  input, select, textarea{ padding: 5px 5px; }
  .vehicle-card{ aspect-ratio: 16 / 10; }
  .vehicle-card img{ max-width: 44%; }
  .pax-item{ width: 26px; }

  .sheet-footer{
    padding: 6px 8px;
    gap: 8px;
  }
  .sheet-footer .mini .figure{ font-size: 14px; }
  .sheet-footer .mini .sub{ font-size: 10px; }
  #prevBtn, #submitBtn{ padding: 9px 10px; font-size: 12.5px; }
}



/* Bonus : très petits écrans (≤ 230px) – sécurité visuelle */
@media (max-width: 230px){
  body{ font-size: 12.5px; }
  .sheet-footer .mini .figure{ font-size: 13.5px; }
  .sheet-footer .mini .sub{ font-size: 9.5px; }
  #prevBtn, #submitBtn{ font-size: 12px; }
}

/* ===== Plein écran au snap max (mobile/tablette) ===== */
@media (max-width: 1023.98px){
  body.full-sheet #map{
    pointer-events: none; /* la carte ne capte plus les gestes */
  }
    .vehicle-card{ max-width: 30%; }

  body.full-sheet .sheet-fixed{
    top: var(--safe-top);
    left: 0; right: 0; bottom: 0;
    height: 100svh;              /* plein écran en svh */
    min-height: 100svh;
    border-radius: 0;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    backdrop-filter: none;
  }
  /* Si le navigateur supporte dvh, on l’utilise (meilleur sur iOS/Android) */
  @supports (height: 100dvh){
    body.full-sheet .sheet-fixed{
      height: 100dvh;
      min-height: 100dvh;
    }
  }
  body.full-sheet .sheet-grip { display: none; }  /* on cache la poignée en plein écran */

  /* Ajuste les contrôles Leaflet pour qu’ils restent visibles au-dessus du footer */
  body.full-sheet .leaflet-bottom.leaflet-right,
  body.full-sheet .leaflet-bottom.leaflet-left{
    bottom: calc(var(--footer-h) + 12px) !important;
  }
}

/* ===== Footer responsive — évite tout débordement ===== */
.sheet-footer{
  display: flex;
  flex-wrap: wrap;                 /* autorise le retour à la ligne */
  align-items: center;
  gap: 8px;
}

.sheet-footer .mini{
  flex: 1 1 140px;                 /* se réduit mais reste lisible */
  min-width: 0;                    /* autorise le shrink sans overflow */
  overflow: hidden;                /* évite les débordements texte */
}
.sheet-footer .mini .figure,
.sheet-footer .mini .muted,
.sheet-footer .mini .sub{
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.sheet-footer .cta-wrap{
  display: flex;
  gap: 8px;
  margin-left: auto;               /* pousse les CTA à droite quand il y a la place */
  flex: 1 1 260px;                 /* grandit/rétrécit selon l’espace */
  min-width: 0;                    /* pas d’overflow interne */
}

#prevBtn,
#submitBtn{
  flex: 1 1 0;                     /* les boutons se partagent l’espace */
  min-width: 0;                    /* pas de largeur minimale bloquante */
  max-width: 100%;
  box-sizing: border-box;
}

/* Palier compact : les CTA passent sous les métriques en pleine largeur */
@media (max-width: 560px){
  .sheet-footer{
    gap: 10px;
  }
  .sheet-footer .cta-wrap{
    flex-basis: 100%;              /* force la ligne suivante */
  }
  #prevBtn,
  #submitBtn{
    width: 100%;                   /* boutons pleine largeur, côte à côte ou empilés selon place */
  }
}

/* Palier très compact : un bouton par ligne si nécessaire */
@media (max-width: 360px){
  .sheet-footer .cta-wrap{
    flex-direction: column;        /* empile les CTA */
  }
  #prevBtn,
  #submitBtn{
    width: 100%;
  }
}
.captcha-field {
  margin-top: 1rem;
}

.captcha-box {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

#captchaText {
  background: linear-gradient(135deg, #1e73be, #22c55e);
  color: white;
  font-family: monospace;
  font-weight: bold;
  font-size: 1.2rem;
  letter-spacing: 3px;
  padding: 8px 14px;
  border-radius: 8px;
  box-shadow: var(--shadow);
  user-select: none;
  text-transform: uppercase;
}

#captchaInput {
  width: 100%;
  padding: 8px;
  border-radius: var(--radius);
  border: var(--border);
  background: var(--card);
  color: var(--text);
}

#refreshCaptcha {
  background: var(--card);
  color: var(--accent);
  font-size: 1.2rem;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
}
#refreshCaptcha:hover {
  transform: rotate(90deg);
}
input, textarea, select, button {
  font-size: 16px !important;
}
html, body {
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
}
button, input, textarea {
  -webkit-tap-highlight-color: transparent;
}
button, .btn-primary, .btn-ghost, .pax-item, .vehicle-card {
  min-height: 44px;
  min-width: 44px;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
button, input, textarea, .vehicle-card, .pax-item {
  transition: all 0.15s ease-in-out;
}

/* ===== Overlay de chargement global ===== */
.loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
}

.loading-overlay[hidden] { display: none; }

.loading-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--bg, #0b0b0f) 40%, transparent);
  backdrop-filter: blur(6px);
}

/* Spinner circulaire */
.loading-spinner {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 6px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Flou du contenu et verrouillage des interactions pendant le chargement */
body.is-loading {
  overflow: hidden;
}

body.is-loading #map,
body.is-loading .sheet-fixed,
body.is-loading #confirmModal {
  filter: blur(3px);
  pointer-events: none;
  user-select: none;
}