/* ===========================================================================
   BLACKCAB — style.css
   Animations & composants non couverts par Tailwind (ondes, carte simulée,
   pilules de progression, cartes véhicule, bottom-sheet).
   La couleur d'accent vient de --accent (injectée par header.php).
   =========================================================================== */

*{ -webkit-tap-highlight-color: transparent; }
html,body{ height:100%; margin:0; }
::selection{ background: var(--accent); color:#0B0B0E; }

/* Scrollbar discrète dans le panneau */
#panel-scroll{ scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.18) transparent; }
#panel-scroll::-webkit-scrollbar{ width:6px; }
#panel-scroll::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.18); border-radius:999px; }

/* --- Panneau masqué (bouton œil) -------------------------------------------- */
#panel.is-hidden{ transform: translateY(110%); }
@media (min-width:1024px){
  #panel.is-hidden{ transform: translateX(-130%); }
}

/* ===========================================================================
   PILULES DE PROGRESSION
   =========================================================================== */
.progress{ display:flex; gap:6px; margin-bottom:28px; }
.progress .pill{
  height:4px; flex:1; border-radius:999px; background: rgba(11,11,14,.10);
  overflow:hidden; position:relative;
}
.progress .pill::after{
  content:""; position:absolute; inset:0; width:0;
  background: var(--accent); border-radius:999px;
  transition: width .5s cubic-bezier(.4,0,.2,1);
}
.progress .pill.done::after{ width:100%; }
.progress .pill.active::after{ width:55%; }

/* ===========================================================================
   TRANSITIONS D'ÉTAPES
   =========================================================================== */
.step{ animation: stepIn .45s cubic-bezier(.16,1,.3,1) both; }
@keyframes stepIn{
  from{ opacity:0; transform: translateY(14px); }
  to{ opacity:1; transform:none; }
}
.field-label{ font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color: rgba(11,11,14,.45); }

/* Champ de saisie large avec icône */
.lux-field{
  display:flex; align-items:center; gap:12px;
  background:#fff; border:1.5px solid rgba(11,11,14,.10);
  border-radius:18px; padding:16px 18px; transition: border-color .2s, box-shadow .2s;
}
.lux-field:focus-within{ border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.lux-field input{ flex:1; border:0; outline:0; background:transparent; font-size:16px; font-weight:500; }
.lux-field input::placeholder{ color: rgba(11,11,14,.35); }

/* Boutons */
.btn-primary{
  width:100%; padding:16px; border-radius:18px; border:0; cursor:pointer;
  background:var(--btn-bg,#0B0B0E); color:var(--btn-text,#fff); font-weight:700; font-size:15px;
  transition: transform .12s, filter .2s; 
}
.btn-primary:hover{ filter:brightness(1.12); }
.btn-primary:active{ transform: scale(.985); }
.btn-primary:disabled{ opacity:.4; cursor:not-allowed; }
.btn-ghost{
  width:100%; padding:14px; border-radius:16px; cursor:pointer;
  background:transparent; border:1.5px solid rgba(11,11,14,.12);
  color:#0B0B0E; font-weight:600; font-size:14px; transition: background .2s;
}
.btn-ghost:hover{ background: rgba(11,11,14,.04); }

/* ===========================================================================
   CARTES VÉHICULE (style Uber)
   =========================================================================== */
.veh-card{
  display:flex; align-items:center; gap:14px; width:100%;
  padding:16px; border-radius:20px; cursor:pointer; text-align:left;
  background:#fff; border:2px solid rgba(11,11,14,.08);
  transition: border-color .18s, transform .12s, box-shadow .18s;
}
.veh-card:hover{ box-shadow: 0 10px 30px -12px rgba(0,0,0,.18); }
.veh-card.selected{ border-color:#0B0B0E; box-shadow: 0 14px 34px -14px rgba(0,0,0,.30); }
.veh-card .veh-ico{
  width:54px; height:54px; border-radius:14px; flex-shrink:0;
  display:grid; place-items:center; background: rgba(11,11,14,.05); color:#0B0B0E;
}
.veh-card.selected .veh-ico{ background: var(--accent); }

/* ===========================================================================
   ANIMATION D'ONDES (étape recherche)
   Canvas dessiné par JS ; ce conteneur le centre.
   =========================================================================== */
.waves-wrap{ position:relative; height:120px; margin: 12px 0 26px; }
.waves-wrap canvas{ position:absolute; inset:0; width:100%; height:100%; }

/* Timeline de validation d'itinéraire */
.timeline{ display:flex; flex-direction:column; gap:14px; }
.timeline .tl-row{ display:flex; align-items:center; gap:12px; opacity:.35; transition:opacity .4s; }
.timeline .tl-row.on{ opacity:1; }
.timeline .tl-check{
  width:24px; height:24px; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center; background: rgba(11,11,14,.10); color:#fff;
  transition: background .4s, transform .4s;
}
.timeline .tl-row.on .tl-check{ background: var(--accent); transform: scale(1); }
.tl-check svg{ width:14px; height:14px; opacity:0; transition:opacity .3s .15s; }
.timeline .tl-row.on .tl-check svg{ opacity:1; }

/* ===========================================================================
   MENU DÉROULANT PASSAGERS (luxe, padding généreux)
   =========================================================================== */
.lux-select{
  width:100%; appearance:none; -webkit-appearance:none;
  background:#fff; border:1.5px solid rgba(11,11,14,.10); border-radius:18px;
  padding:18px 20px; font-size:16px; font-weight:600; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%230B0B0E' stroke-width='2'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position: right 18px center;
}

/* ===========================================================================
   CARTE SIMULÉE (fallback sans clé Google)
   Routes SVG + voitures animées en CSS keyframes.
   =========================================================================== */
#sim-map .road{ fill:none; stroke:#cfd6dc; stroke-linecap:round; }
#sim-map .road.major{ stroke:#c2cad1; }
#sim-map .route{ fill:none; stroke: var(--accent); stroke-width:5; stroke-linecap:round;
  filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--accent) 50%, transparent)); }
#sim-map .pin{ fill:#0B0B0E; }

.sim-car{
  position:absolute; width:26px; height:13px; border-radius:4px;
  background:#0B0B0E; box-shadow:0 3px 8px rgba(0,0,0,.25);
}
.sim-car::before{ content:""; position:absolute; inset:3px 4px; border-radius:2px; background: rgba(255,255,255,.25); }
.sim-car.c1{ animation: drive1 14s linear infinite; }
.sim-car.c2{ animation: drive2 18s linear infinite; background:#3a3a3a; }
.sim-car.c3{ animation: drive3 11s linear infinite; }
.sim-car.c4{ animation: drive4 22s linear infinite; background:#444; }
@keyframes drive1{ 0%{transform:translate(-40px, 26vh)} 100%{transform:translate(102vw, 26vh)} }
@keyframes drive2{ 0%{transform:translate(102vw, 62vh) rotate(180deg)} 100%{transform:translate(-40px,62vh) rotate(180deg)} }
@keyframes drive3{ 0%{transform:translate(34vw,-30px) rotate(90deg)} 100%{transform:translate(34vw,102vh) rotate(90deg)} }
@keyframes drive4{ 0%{transform:translate(72vw,102vh) rotate(-90deg)} 100%{transform:translate(72vw,-30px) rotate(-90deg)} }

/* Pastille d'info sur la carte */
.map-badge{
  position:absolute; top:96px; left:50%; transform:translateX(-50%);
  background:#fff; border-radius:999px; padding:8px 16px; font-size:13px; font-weight:600;
  box-shadow:0 8px 24px -8px rgba(0,0,0,.25); display:flex; align-items:center; gap:8px;
}
@media (min-width:1024px){ .map-badge{ left:calc(50% + 240px); } }

/* Reçu / récap */
.recap{ background:#fff; border:1px solid rgba(11,11,14,.08); border-radius:20px; overflow:hidden; }
.recap .row{ display:flex; justify-content:space-between; gap:16px; padding:14px 18px; font-size:14px; }
.recap .row + .row{ border-top:1px solid rgba(11,11,14,.06); }
.recap .row .k{ color: rgba(11,11,14,.5); font-weight:600; }
.recap .row .v{ font-weight:600; text-align:right; }
.recap .total{ background:#0B0B0E; color:#fff; }
.recap .total .k{ color: rgba(255,255,255,.6); }

/* ===========================================================================
   ACCESSIBILITÉ
   =========================================================================== */
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ============================================================
   ESPACE CLIENT (templates/account.php)
   ============================================================ */
.flow-head{ margin-bottom: 22px; }
.flow-title{ font-family:'Space Grotesk',system-ui,sans-serif; font-weight:700; font-size:26px; line-height:1.1; letter-spacing:-.5px; }
.flow-sub{ color: rgba(11,11,14,.5); font-size:14px; margin-top:6px; }
.lux-label{ display:block; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:rgba(11,11,14,.55); margin:14px 0 6px; }

.acc-tabs{ display:flex; gap:6px; background:rgba(11,11,14,.05); padding:5px; border-radius:14px; margin-bottom:18px; }
.acc-tab{ flex:1; border:0; background:transparent; padding:10px; border-radius:10px; font-weight:600; font-size:14px; color:rgba(11,11,14,.55); cursor:pointer; transition:.2s; }
.acc-tab.on{ background:#fff; color:#0B0B0E; box-shadow:0 2px 8px rgba(0,0,0,.08); }

.acc-pane{ display:block; }
.acc-submit{ width:100%; margin-top:20px; }
.acc-msg{ padding:11px 14px; border-radius:12px; font-size:14px; font-weight:500; margin-bottom:14px; }
.acc-msg.ko{ background:#fdecec; color:#c0392b; }
.acc-msg.ok{ background:#e7f6ec; color:#1a8f4a; }

.acc-or{ display:flex; align-items:center; gap:12px; margin:22px 0; color:rgba(11,11,14,.4); font-size:13px; }
.acc-or::before,.acc-or::after{ content:''; flex:1; height:1px; background:rgba(11,11,14,.1); }
.g-wrap{ display:flex; justify-content:center; }

.acc-actions{ display:flex; gap:10px; margin-bottom:26px; }
.acc-actions .btn-primary{ flex:1; text-align:center; text-decoration:none; }
.acc-h2{ font-family:'Space Grotesk',system-ui,sans-serif; font-weight:600; font-size:17px; margin:6px 0 14px; }
.acc-empty{ background:rgba(11,11,14,.04); border-radius:16px; padding:22px; color:rgba(11,11,14,.55); font-size:14px; line-height:1.5; }

.acc-list{ display:flex; flex-direction:column; gap:12px; }
.acc-card{ border:1px solid rgba(11,11,14,.08); border-radius:18px; padding:16px 18px; background:#fff; }
.acc-card-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.acc-route{ font-weight:700; font-size:15px; line-height:1.35; }
.acc-route span{ color:var(--accent); margin:0 4px; }
.acc-when{ color:rgba(11,11,14,.5); font-size:13px; margin-top:3px; }
.acc-price{ font-family:'Space Grotesk',system-ui,sans-serif; font-weight:700; font-size:18px; white-space:nowrap; }
.acc-card-bot{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:13px; padding-top:13px; border-top:1px solid rgba(11,11,14,.07); font-size:13px; }
.acc-badge{ font-weight:700; padding:3px 10px; border-radius:999px; font-size:12px; }
.acc-badge.b-ok{ background:#e7f6ec; color:#1a8f4a; }
.acc-badge.b-cancel{ background:#fdecec; color:#c0392b; }
.acc-veh{ color:rgba(11,11,14,.5); }
.acc-invoice{ margin-left:auto; font-weight:700; color:#0B0B0E; text-decoration:none; border-bottom:2px solid var(--accent); }
.acc-unpaid{ margin-left:auto; color:#c0392b; font-weight:600; }

/* Petits éléments du tunnel (étape coordonnées) */
.lux-mini{ display:block; font-size:12px; font-weight:600; color:rgba(11,11,14,.55); margin:0 0 5px 2px; }
.lux-note{ background:rgba(11,11,14,.04); border-radius:12px; padding:11px 14px; font-size:14px; color:rgba(11,11,14,.7); }

/* Panneau sécurité espace client */
.sec-row{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
.sec-row strong{ font-size:15px; }

/* ============================================================
   AUTOCOMPLÉTION GOOGLE — toujours au-dessus du panneau
   ============================================================ */
.pac-container{ z-index: 2147483647 !important; border-radius:12px; margin-top:4px; box-shadow:0 12px 40px rgba(0,0,0,.18); border:none; font-family:'Manrope',system-ui,sans-serif; }
.pac-item{ padding:8px 12px; cursor:pointer; }
.pac-item:hover{ background:#f5f5f7; }

/* ============================================================
   COORDONNÉES (étape compte) — champs homogènes
   ============================================================ */
.coord-grid{ display:flex; flex-direction:column; gap:12px; margin-bottom:6px; }
.coord-grid .lux-field{ margin:0; height:54px; }
.coord-grid .lux-field input{ font-size:16px; }     /* 16px = pas de zoom auto iOS */
.field-hint{ font-size:12px; margin-top:3px; }
.field-hint.ok{ color:#1a8f4a; } .field-hint.bad{ color:#c0392b; }
.cgv-row{ display:flex; align-items:flex-start; gap:10px; margin:14px 0 18px; font-size:13.5px; line-height:1.45; color:rgba(11,11,14,.7); }
.cgv-row input{ width:20px; height:20px; flex:none; margin-top:1px; accent-color:var(--accent); }
.cgv-row a{ color:#0B0B0E; text-decoration:underline; }
.acc-choice-sep{ display:flex; align-items:center; gap:12px; margin:18px 0; color:rgba(11,11,14,.4); font-size:13px; }
.acc-choice-sep::before,.acc-choice-sep::after{ content:''; flex:1; height:1px; background:rgba(11,11,14,.1); }

/* ============================================================
   MOBILE — fluidité & confort tactile
   ============================================================ */
@media (max-width: 640px){
  #panel{ inset: auto 0 0 0 !important; top:auto !important; max-height: 86vh; border-radius: 22px 22px 0 0; }
  #panel-scroll{ padding: 20px 18px calc(20px + env(safe-area-inset-bottom)) !important; }
  .flow-title{ font-size:23px; }
  .btn-primary,.btn-ghost{ min-height:52px; font-size:16px; }
  .lux-field{ min-height:52px; }
  .lux-field input,.lux-select{ font-size:16px; }
  .veh-card{ padding:14px; }
  .acc-card{ padding:14px; }
  .acc-actions{ flex-direction:column; }
  .acc-tabs{ position:sticky; top:0; z-index:2; }
}
/* Cibles tactiles plus généreuses partout */
button, .btn-primary, .btn-ghost, a.btn-primary{ touch-action: manipulation; }

/* ============================================================
   SECTIONS SEO (page d'accueil, sous la scène immersive)
   ============================================================ */
#seo-content{ position:relative; z-index:40; margin-top:0; background:#fff; }
.seo-sec{ padding:64px 0; }
.seo-sec.alt{ background:#0B0B0E; color:#fff; }
.seo-inner{ max-width:1080px; margin:0 auto; padding:0 24px; }
.seo-h2{ font-family:'Space Grotesk',system-ui,sans-serif; font-weight:700; font-size:30px; letter-spacing:-.5px; margin:0 0 28px; }
.seo-sec.alt .seo-h2{ color:#fff; }
.seo-lead{ font-size:17px; line-height:1.7; color:rgba(255,255,255,.8); max-width:760px; }
.seo-cta{ display:inline-block; margin-top:22px; background:var(--accent); color:var(--accent-ink,#0B0B0E); font-weight:700; padding:13px 26px; border-radius:12px; text-decoration:none; }

.trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.trust-card{ background:#fafafb; border:1px solid #eee; border-radius:18px; padding:22px; }
.trust-dot{ display:inline-block; width:12px; height:12px; border-radius:50%; background:var(--accent); margin-bottom:14px; }
.trust-card h3{ font-size:16px; margin:0 0 8px; font-weight:700; }
.trust-card p{ font-size:14px; line-height:1.55; color:#5a5a64; margin:0; }

.faq{ max-width:780px; }
.faq-item{ border-bottom:1px solid #ececf0; padding:6px 0; }
.faq-item summary{ cursor:pointer; font-weight:600; font-size:16.5px; padding:14px 0; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:'+'; color:var(--accent); font-size:22px; font-weight:700; }
.faq-item[open] summary::after{ content:'–'; }
.faq-a{ padding:0 0 16px; color:#5a5a64; line-height:1.6; font-size:15px; }

.seo-footer{ background:#0B0B0E; color:#fff; padding:54px 0 26px; }
.seo-foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px; }
.foot-brand{ font-family:'Space Grotesk',system-ui,sans-serif; font-weight:800; font-size:22px; letter-spacing:.5px; margin-bottom:8px; }
.seo-footer p{ color:rgba(255,255,255,.65); font-size:14px; line-height:1.6; margin:6px 0; }
.seo-footer .foot-muted{ color:rgba(255,255,255,.4); }
.seo-footer h4{ font-size:13px; text-transform:uppercase; letter-spacing:.6px; color:rgba(255,255,255,.5); margin:0 0 12px; }
.seo-footer a{ display:block; color:rgba(255,255,255,.8); text-decoration:none; font-size:14px; padding:4px 0; }
.seo-footer a:hover{ color:#fff; }
.seo-foot-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  margin-top:34px; padding-top:20px; border-top:1px solid rgba(255,255,255,.1); font-size:13px; color:rgba(255,255,255,.5); }
.wl-credit{ color:var(--accent); text-decoration:none; font-weight:600; }

/* Indicateur de défilement */
.scroll-cue{ position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:25;
  display:flex; flex-direction:column; align-items:center; gap:4px; color:rgba(11,11,14,.45);
  font-size:11px; letter-spacing:.5px; text-transform:uppercase; pointer-events:none; animation:cueBob 1.8s ease-in-out infinite; }
@keyframes cueBob{ 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,5px); } }
body.scrolled .scroll-cue{ opacity:0; }

/* Quand on défile vers le contenu SEO, on estompe le panneau immersif (DESKTOP only) */
@media (min-width: 641px){
  body.scrolled #panel, body.scrolled #toggle-panel, body.scrolled footer.absolute{
    opacity:0; pointer-events:none; transition:opacity .3s; }
}

@media (max-width:900px){ .trust-grid{ grid-template-columns:repeat(2,1fr); } .seo-foot-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){
  .seo-sec{ padding:44px 0; } .seo-h2{ font-size:24px; }
  .trust-grid{ grid-template-columns:1fr; } .seo-foot-grid{ grid-template-columns:1fr 1fr; gap:22px; }
}

/* Annulation côté client */
.acc-cancel-row{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:11px; padding-top:11px; border-top:1px solid rgba(11,11,14,.07); }
.acc-cancel-info{ font-size:12.5px; color:rgba(11,11,14,.6); }
.btn-cancel{ border:1px solid #e3b3b3; background:#fff; color:#c0392b; font-weight:700; font-size:13px;
  padding:7px 14px; border-radius:10px; cursor:pointer; }
.btn-cancel:hover{ background:#fdecec; }
.btn-cancel:disabled{ opacity:.6; cursor:default; }
.acc-cancel-note{ margin-top:11px; padding-top:11px; border-top:1px solid rgba(11,11,14,.07);
  font-size:12.5px; color:#c0392b; }

/* Séquence de confirmation animée */
.confirm-seq{ padding:34px 6px; text-align:center; }
.confirm-spinner{ width:54px; height:54px; margin:0 auto 26px; border-radius:50%;
  border:4px solid rgba(11,11,14,.12); border-top-color:var(--accent); animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.confirm-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; max-width:320px; margin:0 auto; }
.confirm-list li{ font-size:15px; color:rgba(11,11,14,.3); display:flex; align-items:center; gap:10px;
  justify-content:flex-start; transition:color .3s; }
.confirm-list li::before{ content:''; width:18px; height:18px; border-radius:50%; flex:none;
  border:2px solid rgba(11,11,14,.2); transition:.3s; }
.confirm-list li.active{ color:#0B0B0E; font-weight:600; }
.confirm-list li.done{ color:rgba(11,11,14,.55); }
.confirm-list li.done::before{ background:var(--accent); border-color:var(--accent);
  content:'✓'; font-size:11px; color:#0B0B0E; display:flex; align-items:center; justify-content:center; font-weight:800; }

/* ============================================================
   CHAMPS DE COMPTE — pleine largeur de colonne
   ============================================================ */
input.lux-field{ display:block; width:100%; box-sizing:border-box; }

/* ============================================================
   REFONTE MOBILE — empilé : formulaire, carte, puis le site
   + barre de navigation à 3 onglets
   ============================================================ */
@media (max-width: 640px){
  /* La scène n'est plus fixe : tout s'empile et défile normalement */
  main.fixed{ position:static !important; inset:auto !important; display:flex; flex-direction:column; min-height:auto; }

  /* 1) Le panneau (formulaire) en premier */
  #panel{
    position:relative !important; inset:auto !important; order:1;
    width:auto !important; max-width:none; margin:0; max-height:none !important;
    border-radius:0 !important; background:#fff !important; backdrop-filter:none !important;
    border:0 !important; box-shadow:none !important;
  }
  #panel-scroll{ overflow:visible !important; }

  /* 2) La carte ensuite, hauteur fixe */
  #map-stage{ position:relative !important; inset:auto !important; order:2; height:42vh; width:100%; }
  #map-stage .lg\:block{ display:none !important; }

  /* Masque le bouton œil et la poignée de bottom-sheet */
  #toggle-panel{ display:none !important; }
  #panel > .lg\:hidden{ display:none !important; }

  /* 3) Le contenu SEO suit directement (pas de marge d'une page) */
  #seo-content{ margin-top:0 !important; }

  /* Le footer flottant desktop est remplacé par la barre d'onglets */
  footer.absolute{ display:none !important; }

  /* Espace pour la barre d'onglets en bas */
  body{ padding-bottom:68px; }

  /* Barre d'onglets mobile */
  .mobile-tabbar{ display:flex; }
}
.mobile-tabbar{ display:none; }
@media (max-width: 1023px){
  .mobile-tabbar{
    display:flex !important;
    position:fixed; left:0; right:0; bottom:0; z-index:9000;
    background:#fff; border-top:1px solid rgba(11,11,14,.08);
    padding:6px 8px calc(6px + env(safe-area-inset-bottom));
    box-shadow:0 -6px 24px rgba(0,0,0,.06);
  }
  .mobile-tabbar a{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
    text-decoration:none; color:rgba(11,11,14,.5); font-size:11px; font-weight:600; padding:6px 0;
  }
  .mobile-tabbar a.active{ color:#0B0B0E; }
  .mobile-tabbar a.active .tb-ico{ background:var(--accent); color:var(--accent-ink,#0B0B0E); }
  .tb-ico{ width:38px; height:30px; border-radius:10px; display:flex; align-items:center; justify-content:center;
    background:rgba(11,11,14,.05); transition:.2s; }
  .tb-ico svg{ width:19px; height:19px; }
}

/* Navigation header plus compacte sur petit écran */
@media (max-width: 640px){
  header nav, header .nav, header .topbar{ flex-wrap:wrap; }
}

/* Avis clients */
.reviews-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.review-card{ background:#fafafb; border:1px solid #eee; border-radius:18px; padding:22px; }
.review-stars{ color:var(--accent); font-size:18px; letter-spacing:2px; margin-bottom:10px; }
.review-text{ font-size:15px; line-height:1.6; color:#33333a; margin:0 0 14px; }
.review-name{ font-weight:700; font-size:14px; }
@media (max-width:900px){ .reviews-grid{ grid-template-columns:1fr; } }

/* Header en flux normal sur mobile (ne recouvre plus le formulaire) */
@media (max-width: 640px){
  header.absolute{ position:relative !important; inset:auto !important; background:#fff !important;
    backdrop-filter:none !important; height:60px; }
}

/* Sur mobile, la carte ne s'affiche que sur l'accueil (réservation) */
@media (max-width: 640px){
  body:not(.page-home) #map-stage{ display:none !important; }
  body:not(.page-home) main.fixed{ min-height:60vh; }
}

/* Bouton « Localiser mon adresse » */
.btn-locate{ display:inline-flex; align-items:center; gap:7px; background:rgba(11,11,14,.04);
  border:1px solid rgba(11,11,14,.1); color:#0B0B0E; font-weight:600; font-size:13.5px;
  padding:9px 14px; border-radius:12px; cursor:pointer; transition:.2s; }
.btn-locate:hover{ background:rgba(224,168,46,.14); border-color:var(--accent); }
.btn-locate:disabled{ opacity:.6; cursor:default; }

/* Tableau des conditions d'annulation (espace client) */
.cancel-policy{ background:#fafafb; border:1px solid #ececf0; border-radius:16px; padding:18px 18px 8px; margin-bottom:20px; }
.cancel-policy-head{ font-weight:700; font-size:15px; margin-bottom:4px; }
.cancel-policy-sub{ font-size:13px; color:rgba(11,11,14,.55); margin:0 0 12px; }
.cancel-table{ width:100%; border-collapse:collapse; font-size:14px; }
.cancel-table th{ text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.4px; color:rgba(11,11,14,.4); padding:6px 8px; }
.cancel-table td{ padding:10px 8px; border-top:1px solid #ececf0; }
.refund-pill{ display:inline-block; padding:3px 10px; border-radius:999px; font-size:12.5px; font-weight:700; }
.refund-pill.full{ background:#e7f6ec; color:#1a8f4a; }
.refund-pill.partial{ background:#fff4d6; color:#9a7400; }
.refund-pill.none{ background:#fdecec; color:#c0392b; }

/* ============================================================
   PAGES DE CONTENU PLEIN ÉCRAN (blog, contact, compte, à propos, CGV)
   ============================================================ */
.content-page{ min-height:calc(100vh - 60px); background:#f6f7f9; padding:40px 20px 80px; }
.content-wrap{ max-width:920px; margin:0 auto; background:#fff; border:1px solid #ececf0;
  border-radius:22px; padding:40px 38px; box-shadow:0 14px 50px rgba(0,0,0,.05); }
.page-title{ font-family:'Space Grotesk',system-ui,sans-serif; font-weight:800; font-size:32px;
  letter-spacing:-.6px; margin:0 0 20px; }
.page-prose{ font-size:16px; line-height:1.75; color:#33333a; }
.page-prose a:not([class*="btn"]){ color:#0B0B0E; text-decoration:underline; }

/* Header collant (sticky) sur les pages de contenu — réserve sa place, ne recouvre jamais */
body:not(.page-home) header.absolute{ position:sticky !important; top:0 !important; inset-inline:0 !important;
  background:#fff !important; backdrop-filter:none !important; border-bottom:1px solid rgba(11,11,14,.07); z-index:50; }

@media (max-width:640px){
  .content-page{ padding:18px 12px 90px; }
  .content-wrap{ padding:24px 18px; border-radius:16px; }
  .page-title{ font-size:25px; }
}

/* Réserve l.espace pour la barre d.onglets */
@media (max-width: 1023px){
  body{ padding-bottom:70px; }
  footer.absolute{ display:none !important; }
}

/* En-tête espace client + bouton déconnexion discret */
.acc-header{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:18px; }
.btn-logout-link{ display:inline-flex; align-items:center; gap:6px; background:none; border:0; cursor:pointer;
  color:rgba(11,11,14,.45); font-weight:600; font-size:13px; padding:6px 8px; border-radius:8px; white-space:nowrap; }
.btn-logout-link:hover{ color:#c0392b; background:rgba(192,57,43,.06); }

/* ============================================================
   MODALE DE CONFIRMATION PLEIN ÉCRAN
   ============================================================ */
.confirm-modal{ position:fixed; inset:0; z-index:99999; background:rgba(11,11,14,.55);
  backdrop-filter:blur(6px); display:flex; align-items:flex-start; justify-content:center; padding:20px;
  overflow-y:auto; -webkit-overflow-scrolling:touch; animation:cmFade .25s ease; }
@keyframes cmFade{ from{ opacity:0 } to{ opacity:1 } }
.confirm-modal-card{ background:#fff; width:100%; max-width:440px; border-radius:26px; padding:34px 28px;
  box-shadow:0 40px 100px rgba(0,0,0,.4); margin:auto; animation:cmRise .35s ease; }
@keyframes cmRise{ from{ transform:translateY(20px); opacity:.6 } to{ transform:translateY(0); opacity:1 } }
.cm-success{ text-align:center; margin-bottom:18px; }
.cm-check{ display:grid; place-items:center; width:64px; height:64px; border-radius:50%; margin:0 auto 14px; background:var(--accent); }
.cm-title{ font-family:'Space Grotesk',system-ui,sans-serif; font-weight:800; font-size:24px; letter-spacing:-.5px; margin:0; }
.cm-sub{ color:rgba(11,11,14,.5); font-size:14px; margin-top:6px; }
.cm-recap{ margin:6px 0 14px; }
.cm-note{ text-align:center; font-size:13.5px; color:rgba(11,11,14,.55); margin:0 0 18px; }
@media (max-width:480px){ .confirm-modal-card{ padding:26px 18px; border-radius:20px; } .cm-title{ font-size:21px; } }

/* ============================================================
   MODALE DE CONNEXION INVITÉ (code e-mail)
   ============================================================ */
.auth-modal{ position:fixed; inset:0; z-index:99998; background:rgba(11,11,14,.55); backdrop-filter:blur(6px);
  display:flex; align-items:flex-start; justify-content:center; padding:20px; overflow-y:auto;
  -webkit-overflow-scrolling:touch; animation:cmFade .2s ease; }
.auth-card{ position:relative; background:#fff; width:100%; max-width:420px; border-radius:24px; padding:30px 26px;
  box-shadow:0 40px 100px rgba(0,0,0,.4); margin:auto; animation:cmRise .3s ease; }
.auth-x{ position:absolute; top:14px; right:16px; background:none; border:0; font-size:18px; color:rgba(11,11,14,.4); cursor:pointer; line-height:1; }
.auth-x:hover{ color:#0B0B0E; }
.auth-title{ font-family:'Space Grotesk',system-ui,sans-serif; font-weight:800; font-size:22px; letter-spacing:-.4px; margin:4px 0 8px; }
.auth-sub{ color:rgba(11,11,14,.55); font-size:14px; line-height:1.5; margin:0 0 18px; }
.auth-input{ width:100%; box-sizing:border-box; height:54px; border:1.5px solid rgba(11,11,14,.12); border-radius:14px;
  padding:0 16px; font-size:16px; margin-bottom:8px; }
.auth-input:focus{ outline:0; border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.auth-code{ text-align:center; letter-spacing:12px; font-size:28px; font-weight:700; }
.auth-err{ color:#c0392b; font-size:13.5px; margin:0 0 10px; }
.auth-link{ display:block; width:100%; background:none; border:0; color:rgba(11,11,14,.5); font-weight:600; font-size:13.5px; padding:10px; cursor:pointer; margin-top:6px; }
.auth-link:hover{ color:#0B0B0E; }
.auth-card .btn-primary{ margin-top:6px; }

/* Liens texte dans l'espace compte (mot de passe oublié, retour) */
.acc-textlink{ display:block; width:100%; background:none; border:0; cursor:pointer; margin-top:10px;
  color:rgba(11,11,14,.5); font-weight:600; font-size:13.5px; text-align:center; padding:6px; }
.acc-textlink:hover{ color:#0B0B0E; }

/* ============================================================
   ACCUEIL — 2 états : HÉRO (image) puis OPTIONS (3 colonnes)
   ============================================================ */
.uber-grid{ display:flex; flex-direction:column; }            /* mobile: empilé */
.uber-left{ order:1; background:#fff; }
.uber-left-scroll{ padding:22px 20px; }
.uber-center{ order:2; background:#f6f7f9; padding:18px 16px; }
.uber-right{ order:3; position:relative; height:46vh; min-height:300px; }

.hero-visual{ position:absolute; inset:0; background-size:cover; background-position:center; background-color:#1a1a1f; }
.hero-visual-fallback{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; color:rgba(255,255,255,.25); text-align:center; padding:24px; }
#map-stage{ position:absolute; inset:0; }
#map-stage #google-map, #map-stage #sim-map{ position:absolute; inset:0; }

.uber-grid.state-hero .uber-center{ display:none; }
.uber-grid.state-hero #map-stage{ display:none; }
.uber-grid.state-options .hero-visual{ display:none; }
.uber-grid.state-options #map-stage{ display:block; }

@media (min-width:1024px){
  .uber-grid{ display:grid; height:calc(100vh - 64px); overflow:hidden; }
  .uber-grid.state-hero{ grid-template-columns:minmax(440px,1fr) 1.1fr; }
  .uber-grid.state-options{ grid-template-columns:380px minmax(0,1fr) minmax(0,1.1fr); }
  .uber-left{ order:0; overflow-y:auto; border-right:1px solid #ececf0; }
  .uber-left-scroll{ padding:44px 42px; }
  .uber-center{ order:0; overflow-y:auto; padding:30px 30px 110px; position:relative; }
  .uber-right{ order:0; height:auto; }
  .uber-grid.state-hero .uber-right{ grid-column:2; }
}

header.absolute{ position:sticky !important; top:0; inset-inline:0 !important; z-index:50;
  background:#fff !important; backdrop-filter:none !important; border-bottom:1px solid rgba(11,11,14,.07); }
body.scrolled #panel{ opacity:1 !important; pointer-events:auto !important; }

/* Section héro */
.hero-city{ display:flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color:#0B0B0E; margin-bottom:18px; }
.hero-city a{ color:#0B0B0E; text-decoration:underline; cursor:pointer; }
.hero-title{ font-family:'Space Grotesk',system-ui,sans-serif; font-weight:800; font-size:46px; line-height:1.04; letter-spacing:-1.5px; margin:0 0 16px; }
.hero-subtitle{ font-size:16px; color:rgba(11,11,14,.6); line-height:1.5; margin:0 0 22px; max-width:420px; }
.when-select{ display:flex; align-items:center; gap:10px; width:100%; background:#eef0f2; border:0; border-radius:12px; padding:14px 16px; font-size:15px; font-weight:600; color:#0B0B0E; cursor:pointer; margin-bottom:14px; }
.when-select .chev{ margin-left:auto; }
.when-panel{ background:#f6f7f9; border-radius:12px; padding:12px; margin:-6px 0 14px; }
@media (max-width:1023px){ .hero-title{ font-size:32px; letter-spacing:-1px; } .uber-left-scroll{ padding:24px 18px; } }

/* Colonne centrale : options */
.ride-options-head{ font-family:'Space Grotesk',system-ui,sans-serif; font-weight:800; font-size:28px; letter-spacing:-.6px; margin:0 0 4px; }
.ride-options-sub{ display:flex; align-items:center; gap:7px; color:#1a8f4a; font-size:14px; font-weight:600; margin:0 0 18px; }
.ride-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:14px; color:rgba(11,11,14,.4); min-height:240px; padding:30px; }
.ride-empty p{ max-width:280px; font-size:14.5px; line-height:1.5; }
.ride-checkout-bar{ position:sticky; bottom:0; background:#fff; border-top:1px solid #ececf0; padding:16px 0 0; display:flex; gap:12px; margin-top:18px; }
@media (min-width:1024px){ .ride-checkout-bar{ position:absolute; left:30px; right:30px; bottom:0; padding:16px 0; background:#fff; } }

/* FOOTER en flux normal sur les pages de contenu (corrige le chevauchement) */
body:not(.page-home) footer.absolute{ position:static !important; display:flex !important; background:#fff !important; backdrop-filter:none !important; border-top:1px solid rgba(11,11,14,.08); justify-content:center; gap:18px; }

/* Récap trajet (colonne gauche pendant le choix du véhicule) */
.trip-summary{ background:#fff; border:1px solid #ececf0; border-radius:16px; padding:18px 16px; }
.ts-row{ display:flex; align-items:center; gap:10px; }
.ts-dot{ width:10px; height:10px; border-radius:50%; flex:none; }
.ts-dot.start{ background:#0B0B0E; } .ts-dot.end{ background:var(--accent); }
.ts-text{ font-weight:600; font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ts-line{ width:2px; height:18px; background:rgba(11,11,14,.15); margin:2px 0 2px 4px; }
.ts-meta{ margin-top:12px; font-size:13px; color:rgba(11,11,14,.5); }

/* Cartes d'options de trajet (façon Uber) */
.ride-list{ display:flex; flex-direction:column; gap:4px; }
.ro-card{ display:flex; align-items:center; gap:16px; width:100%; text-align:left; background:none;
  border:2px solid transparent; border-radius:16px; padding:14px 16px; cursor:pointer; transition:.15s; }
.ro-card:hover{ background:#f3f4f6; }
.ro-card.selected{ border-color:#0B0B0E; background:#fff; }
.ro-ico{ flex:none; width:64px; height:46px; display:flex; align-items:center; justify-content:center; color:#0B0B0E; }
.ro-ico svg{ width:48px; height:48px; }
.ro-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ro-name{ font-weight:700; font-size:17px; }
.ro-cap{ color:rgba(11,11,14,.45); font-weight:600; font-size:14px; }
.ro-eta{ font-size:13.5px; color:rgba(11,11,14,.6); }
.ro-desc{ font-size:12.5px; color:rgba(11,11,14,.45); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ro-price{ flex:none; text-align:right; font-weight:800; font-size:18px; display:flex; flex-direction:column; align-items:flex-end; }
.ro-approach{ font-size:10.5px; font-weight:600; color:rgba(11,11,14,.45); margin-top:2px; }

/* ============================================================
   ESPACE CLIENT — mise en page 2 colonnes + style soigné
   ============================================================ */
.acc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
@media (max-width:860px){ .acc-grid{ grid-template-columns:1fr; gap:0; } }
.acc-col{ min-width:0; }
#account-root{ max-width:1000px; margin:0 auto; }
.acc-card{ background:#fff; border:1px solid #ececf0; border-radius:18px; padding:20px; box-shadow:0 6px 24px rgba(0,0,0,.03); }
.acc-h2{ font-family:'Space Grotesk',system-ui,sans-serif; font-weight:700; font-size:18px; margin:22px 0 12px; }
.acc-header{ background:#fff; border:1px solid #ececf0; border-radius:18px; padding:20px 22px; box-shadow:0 6px 24px rgba(0,0,0,.03); }

/* ============================================================
   CORRECTIFS CHEVAUCHEMENT (pages de contenu)
   ============================================================ */
/* Le footer flottant (conçu pour l'accueil immersif) passe en flux normal
   sur les pages de contenu, pour ne plus recouvrir le contenu (photo 3). */
body:not(.page-home) footer.absolute{
  position:static !important; inset:auto !important;
  width:100%; background:#fff !important; border-top:1px solid rgba(11,11,14,.07);
  backdrop-filter:none !important; margin-top:30px;
}
/* Marge basse de sécurité sous le contenu */
body:not(.page-home) .content-page{ padding-bottom:40px; }
@media (max-width:1023px){
  body:not(.page-home) .content-page{ padding-bottom:90px; } /* place pour la tabbar */
}

/* ============================================================
   POLISH v1.9.0 — espace client large, pages de contenu soignées
   ============================================================ */
/* Espace client : conteneur large, cartes sur fond gris (style tableau de bord) */
body.page-compte .content-wrap{ max-width:1120px; background:transparent; border:0; box-shadow:none; padding:6px 0 0; }
body.page-compte .content-page{ background:#f4f5f7; }
#account-root{ max-width:1120px; }
.acc-header{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:22px; }
.acc-card{ transition:box-shadow .2s; }
.acc-card:hover{ box-shadow:0 10px 30px rgba(0,0,0,.05); }

/* Pages À propos / Blog / Contact : carte blanche centrée, belle typo */
body.page-about .content-wrap,
body.page-blog .content-wrap,
body.page-contact .content-wrap,
body.page-cgv .content-wrap{ max-width:860px; padding:48px 46px; }
.page-title{ font-size:36px; letter-spacing:-1px; line-height:1.08; }
.page-prose{ font-size:16.5px; line-height:1.8; color:#2c2c33; }
.page-prose p{ margin:0 0 16px; }
.content-wrap .flow-title{ font-family:'Space Grotesk',system-ui,sans-serif; font-weight:800;
  font-size:34px; letter-spacing:-.8px; margin:0 0 18px; }

/* En-tête de page : petit fil d'Ariane discret */
.page-eyebrow{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--accent); margin-bottom:10px; }

@media (max-width:640px){
  body.page-about .content-wrap, body.page-blog .content-wrap,
  body.page-contact .content-wrap, body.page-cgv .content-wrap{ padding:26px 20px; }
  .page-title{ font-size:27px; }
}

/* Cartes d'articles de blog */
.blog-cards{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:640px){ .blog-cards{ grid-template-columns:1fr; } }
.blog-card{ display:block; background:#fff; border:1px solid #ececf0; border-radius:16px; padding:22px;
  transition:.18s; position:relative; }
.blog-card:hover{ box-shadow:0 14px 40px rgba(0,0,0,.07); transform:translateY(-2px); border-color:#e0e0e6; }
.blog-card-tag{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  color:var(--accent); margin-bottom:10px; }
.blog-card h2{ font-family:'Space Grotesk',system-ui,sans-serif; font-weight:700; font-size:18px;
  line-height:1.25; letter-spacing:-.3px; margin:0 0 8px; color:#0B0B0E; }
.blog-card p{ font-size:14px; line-height:1.55; color:rgba(11,11,14,.55); margin:0 0 14px; }
.blog-card-more{ font-size:13px; font-weight:700; color:#0B0B0E; }

/* Options du sélecteur horaire (immédiat / planifier) */
.when-opt{ display:block; width:100%; text-align:left; background:#fff; border:1px solid #ececf0;
  border-radius:10px; padding:11px 14px; font-size:14px; font-weight:600; color:#0B0B0E; cursor:pointer; margin-bottom:8px; }
.when-opt:hover{ border-color:#0B0B0E; background:#fafafa; }
.when-panel{ background:#f6f7f9; border-radius:12px; padding:12px; margin-bottom:14px; }

/* Évite le double pied de page sur l'accueil : la page d'accueil a déjà
   le pied de page riche (seo-footer). On masque la barre flottante ici. */
body.page-home footer.absolute{ display:none !important; }

/* ============================================================
   THÈME PERSONNALISABLE (couleurs pilotées depuis l'admin)
   ============================================================ */
body{ color:var(--text,#0B0B0E); }
/* Liens & accents de texte */
a.text-accent, .text-accent{ color:var(--accent); }
/* Icônes "marque" qui doivent suivre la couleur d'icône choisie */
.themed-icon, .ro-ico svg, .tb-ico svg{ color:var(--icon,#0B0B0E); }
/* Liens de contenu */
.page-prose a:not([class*="btn"]), .hero-city a{ color:var(--link,#0B0B0E); }
/* Pastille de progression / accent */
.ts-dot.end{ background:var(--accent); }

/* ============================================================
   APPLICATION DU THÈME (couleurs personnalisables en back-office)
   ============================================================ */
.content-page{ background:var(--page-bg, #f6f7f9); }
.ro-ico, .veh-ico{ color:var(--icon, var(--accent)); }
.hero-city svg{ color:var(--icon, var(--accent)); }
.hero-visual-fallback svg{ stroke:var(--icon, var(--accent)); }
.page-eyebrow{ color:var(--icon, var(--accent)); }
.page-title, .flow-title{ color:var(--text, #0B0B0E); }
.page-prose a:not([class*="btn"]), .content-wrap a:not([class*="btn"]):not(.acc-invoice):not(.seo-cta){ color:var(--link, #0B0B0E); }
/* Les liens-boutons gardent la couleur de texte des boutons */
.content-wrap a.btn-primary, a.btn-primary{ color:var(--btn-text, #fff); }
.content-wrap a.btn-ghost, a.btn-ghost{ color:#0B0B0E; }
.seo-cta, .ride-options-head{ color:var(--text, #0B0B0E); }

/* ============================================================
   PAGE CONTACT soignée
   ============================================================ */
.contact-flash{ background:#e8f7ee; border:1px solid #b7e6c9; color:#1a7a42; border-radius:12px;
  padding:14px 18px; font-weight:600; font-size:14.5px; margin-bottom:22px; }
.contact-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:26px; align-items:start; }
@media (max-width:760px){ .contact-grid{ grid-template-columns:1fr; gap:18px; } }
.contact-info{ display:flex; flex-direction:column; gap:12px; }
.contact-card{ display:flex; align-items:center; gap:14px; background:#fff; border:1px solid #ececf0;
  border-radius:16px; padding:16px 18px; text-decoration:none; color:#0B0B0E; transition:.16s; }
a.contact-card:hover{ border-color:var(--accent); box-shadow:0 10px 30px rgba(0,0,0,.05); transform:translateY(-1px); }
.contact-ico{ flex:none; width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--accent) 16%, #fff); color:var(--icon, var(--accent)); }
.contact-lab{ display:block; font-size:12px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:rgba(11,11,14,.45); }
.contact-val{ display:block; font-size:15.5px; font-weight:600; }
.contact-note{ font-size:13px; color:rgba(11,11,14,.5); line-height:1.6; padding:4px 6px; }
.contact-form{ background:#fff; border:1px solid #ececf0; border-radius:20px; padding:26px 24px; box-shadow:0 10px 36px rgba(0,0,0,.04); }
.contact-form .lux-field{ margin-bottom:12px; }
.contact-form-title{ font-family:'Space Grotesk',system-ui,sans-serif; font-weight:800; font-size:20px; margin:0 0 16px; }

/* ============================================================
   MODALE DE CONFIRMATION « Bienvenue à bord » — version festive
   ============================================================ */
.cm-success{ text-align:center; padding:6px 0 4px; }
.cm-check{ position:relative; width:84px; height:84px; margin:0 auto 16px; border-radius:50%;
  display:grid; place-items:center; background:color-mix(in srgb, var(--accent) 18%, #fff);
  animation:cmPop .5s cubic-bezier(.18,.9,.32,1.3) both; }
.cm-check::before{ content:""; position:absolute; inset:-6px; border-radius:50%;
  border:3px solid color-mix(in srgb, var(--accent) 55%, #fff); animation:cmRing 1.1s ease-out .15s both; }
.cm-check svg{ stroke:var(--icon, var(--accent)); animation:cmDraw .5s ease .25s both; }
@keyframes cmPop{ 0%{ transform:scale(.4); opacity:0 } 100%{ transform:scale(1); opacity:1 } }
@keyframes cmRing{ 0%{ transform:scale(.7); opacity:.9 } 100%{ transform:scale(1.25); opacity:0 } }
@keyframes cmDraw{ from{ opacity:0; transform:scale(.6) } to{ opacity:1; transform:scale(1) } }
.cm-title{ font-family:'Space Grotesk',system-ui,sans-serif; font-weight:800; font-size:26px;
  letter-spacing:-.6px; margin:0 0 6px; }
.cm-sub{ color:rgba(11,11,14,.55); font-size:14.5px; margin:0 0 16px; }
.cm-recap{ text-align:left; margin:0 0 14px; }
.cm-note{ background:#f6f7f9; border-radius:12px; padding:12px 14px; font-size:13.5px;
  color:rgba(11,11,14,.6); margin:0 0 16px; }
/* Petits confettis décoratifs */
.confirm-modal-card{ position:relative; }
.cm-success::before,.cm-success::after{ content:""; position:absolute; top:-6px; width:8px; height:8px; border-radius:2px; opacity:.85; }
.cm-success::before{ left:26%; background:var(--accent); animation:confetti 1.4s ease-in .2s both; }
.cm-success::after{ right:28%; background:#0B0B0E; animation:confetti 1.6s ease-in .35s both; }
@keyframes confetti{ 0%{ transform:translateY(0) rotate(0); opacity:1 } 100%{ transform:translateY(90px) rotate(360deg); opacity:0 } }

/* Champ « message au chauffeur » en pleine largeur dans la modale de commande */
#co-notes{ width:100%; box-sizing:border-box; display:block; min-height:76px; resize:vertical;
  border:1.5px solid rgba(11,11,14,.12); border-radius:14px; padding:12px 14px; font:inherit; }
#co-notes:focus{ outline:0; border-color:var(--accent); }

/* ============================================================
   PAGE CONTACT — formulaire CENTRÉ + réseaux sociaux
   ============================================================ */
.contact-center{ max-width:560px; margin:0 auto; text-align:center; }
.contact-center .page-title{ margin-bottom:10px; }
.contact-intro{ margin:0 auto 26px; max-width:480px; }
.contact-center .contact-form{ text-align:left; background:#fff; border:1px solid #ececf0;
  border-radius:20px; padding:26px 24px; box-shadow:0 12px 40px rgba(0,0,0,.05); }
.contact-center .contact-form .lux-field{ margin-bottom:12px; }
.contact-flash{ background:#e8f7ee; border:1px solid #b7e6c9; color:#1a7a42; border-radius:12px;
  padding:13px 18px; font-weight:600; font-size:14.5px; margin-bottom:20px; }
.contact-direct{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:22px; }
.contact-chip{ display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid #ececf0;
  border-radius:999px; padding:10px 18px; font-weight:600; font-size:14px; color:#0B0B0E; text-decoration:none; transition:.16s; }
.contact-chip:hover{ border-color:var(--accent); box-shadow:0 8px 22px rgba(0,0,0,.06); }
.contact-chip svg{ color:var(--icon, var(--accent)); }
.contact-addr{ margin-top:14px; font-size:13.5px; color:rgba(11,11,14,.5); }
/* Réseaux sociaux (partagé contact + footer) */
.social-links{ display:flex; gap:10px; justify-content:center; margin-top:22px; }
.social-ico{ display:grid; place-items:center; width:42px; height:42px; border-radius:50%;
  background:#fff; border:1px solid #ececf0; color:#0B0B0E; transition:.16s; }
.social-ico:hover{ background:var(--accent); color:var(--accent-ink,#0B0B0E); border-color:var(--accent); transform:translateY(-2px); }
.seo-social{ margin:18px 0 6px; }
.seo-social .social-ico{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); color:#fff; }
.seo-social .social-ico:hover{ background:var(--accent); color:var(--accent-ink,#0B0B0E); }

/* ============================================================
   PAGE CONTACT — formulaire centré + réseaux sociaux
   ============================================================ */
.contact-wrap-center{ max-width:560px; margin:0 auto; }
.contact-form-center{ background:#fff; border:1px solid #ececf0; border-radius:20px; padding:26px 24px;
  box-shadow:0 14px 44px rgba(0,0,0,.05); }
.contact-form-center .lux-field{ margin-bottom:12px; }
.contact-direct{ display:flex; flex-wrap:wrap; gap:10px 22px; justify-content:center; margin:22px 0 6px; }
.contact-direct-item{ display:inline-flex; align-items:center; gap:8px; color:var(--text,#0B0B0E);
  font-weight:600; font-size:14.5px; text-decoration:none; }
.contact-direct-item svg{ color:var(--icon,var(--accent)); }
.contact-direct-item:hover{ color:var(--accent); }
.social-row-public{ display:flex; gap:12px; justify-content:center; margin:16px 0 6px; }
.social-ico{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:#fff; border:1px solid #ececf0; color:var(--text,#0B0B0E); transition:.16s; }
.social-ico:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,.07); }
.contact-address{ text-align:center; color:rgba(11,11,14,.5); font-size:13.5px; margin-top:14px; }
/* Réseaux dans le pied de page */
.seo-foot-social{ display:flex; gap:10px; margin-top:14px; }
.seo-foot-social a{ width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  background:rgba(255,255,255,.06); color:#fff; opacity:.75; transition:.16s; }
.seo-foot-social a:hover{ opacity:1; background:var(--accent); color:var(--accent-ink,#0B0B0E); }

/* Anti-spam page contact */
.antispam-label{ display:block; font-size:13px; font-weight:600; color:rgba(11,11,14,.6); margin:2px 0 6px; }

/* ============================================================
   PAGE À PROPOS — avantages + photos
   ============================================================ */
.about-photos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin:28px 0; }
.about-photo{ height:200px; border-radius:16px; background-size:cover; background-position:center; border:1px solid #ececf0; }
.about-h2{ font-family:'Space Grotesk',system-ui,sans-serif; font-weight:800; font-size:24px; letter-spacing:-.5px; margin:34px 0 18px; }
.about-adv{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.about-adv-card{ background:#fff; border:1px solid #ececf0; border-radius:16px; padding:22px; position:relative; transition:.18s; }
.about-adv-card:hover{ box-shadow:0 14px 40px rgba(0,0,0,.06); transform:translateY(-2px); border-color:#e0e0e6; }
.about-adv-num{ font-family:'Space Grotesk',system-ui,sans-serif; font-weight:800; font-size:14px; color:var(--icon,var(--accent)); }
.about-adv-card h3{ font-family:'Space Grotesk',system-ui,sans-serif; font-weight:700; font-size:17px; margin:8px 0 6px; }
.about-adv-card p{ font-size:14px; line-height:1.6; color:rgba(11,11,14,.6); margin:0; }
.about-cta{ margin-top:30px; text-align:center; }

/* ============================================================
   ESPACE CLIENT — responsive mobile
   ============================================================ */
@media (max-width:560px){
  /* En-tête : le bouton « Se déconnecter » ne dépasse plus */
  .acc-header{ flex-direction:column; align-items:stretch; gap:10px; padding:16px 16px; }
  .acc-header .flow-title{ font-size:22px; }
  .btn-logout-link{ align-self:flex-end; }
}
@media (max-width:860px){
  /* Sur mobile : les réservations (activité) AVANT les informations */
  .acc-grid{ display:flex; flex-direction:column; }
  .acc-col-right{ order:1; }
  .acc-col-left{ order:2; margin-top:20px; }
  html{ scroll-behavior:smooth; }
  /* décalage pour l'ancre sous l'en-tête collant */
  #acc-infos, #acc-activite{ scroll-margin-top:80px; }
}

/* Blog — article + titres */
.blog-back{ display:inline-block; margin-bottom:16px; color:rgba(11,11,14,.5); text-decoration:none; font-size:14px; font-weight:600; }
.blog-back:hover{ color:var(--accent); }
.blog-lead{ font-size:16px; line-height:1.6; color:rgba(11,11,14,.7); margin:0 0 22px; }
.blog-h2{ font-family:'Space Grotesk',system-ui,sans-serif; font-weight:700; font-size:19px; margin:26px 0 8px; color:var(--text,#0B0B0E); }
.blog-p{ font-size:15px; line-height:1.7; color:rgba(11,11,14,.72); margin:0 0 14px; }
.blog-cta{ display:inline-block; width:auto; padding:14px 28px; margin-top:24px; text-decoration:none; }

/* ============================================================
   TITRES DE PAGE — tiret d'accent après chaque titre (aligné à gauche)
   ============================================================ */
.page-title{ position:relative; }
.page-title::after{
  content:""; display:block; width:52px; height:3px; border-radius:2px;
  background:var(--accent); margin-top:14px;
}
/* Titres centrés (contact, article) : tiret centré aussi */
.contact-wrap-center .page-title::after,
.blog-article .page-title::after{ margin-left:auto; margin-right:auto; }
.contact-wrap-center .page-title,
.blog-article .page-title{ text-align:center; }

/* ============================================================
   ANIMATIONS (respect de prefers-reduced-motion)
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  @keyframes revealUp{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
  @keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
  @keyframes floatY{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }

  /* Entrée des pages de contenu, en cascade */
  .content-wrap > *{ animation: revealUp .55s cubic-bezier(.22,.9,.3,1) both; }
  .content-wrap > *:nth-child(1){ animation-delay:.02s; }
  .content-wrap > *:nth-child(2){ animation-delay:.09s; }
  .content-wrap > *:nth-child(3){ animation-delay:.16s; }
  .content-wrap > *:nth-child(4){ animation-delay:.23s; }
  .content-wrap > *:nth-child(n+5){ animation-delay:.3s; }

  /* Éléments marqués .reveal (cartes blog, article…) */
  .reveal{ animation: revealUp .6s cubic-bezier(.22,.9,.3,1) both; animation-delay: var(--d, 0s); }

  /* Accueil : formulaire + visuel */
  .state-hero .flow-card{ animation: revealUp .6s cubic-bezier(.22,.9,.3,1) both; }
  .state-hero .hero-visual{ animation: fadeIn .8s ease both; }

  /* Cartes : petite élévation animée au survol */
  .about-adv-card, .blog-card, .contact-card, .ro-card, .veh-card{ transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
  .about-adv-card:hover, .blog-card:hover, .contact-card:hover{ transform: translateY(-3px); }

  /* Boutons : léger ressort */
  .btn-primary{ transition: transform .12s ease, filter .2s ease, box-shadow .2s ease; }
  .btn-primary:hover{ transform: translateY(-1px); box-shadow:0 10px 24px -10px rgba(0,0,0,.5); }

  /* Puce d'accent qui respire */
  .trust-dot, .page-eyebrow::before{ animation: floatY 3s ease-in-out infinite; }
}