/* =====================================================================
   Wyvo — Design system (mobile-first)
   Vert #63cd84 / Blanc (primaire) · Noir (secondaire) — DA sobre
   ===================================================================== */
:root{
  --bg:#ffffff; --bg-alt:#f5f6f3; --card:#ffffff; --card-2:#eff1ec;
  --ink:#14171a; --ink-soft:#5a615e; --white:#ffffff;
  --grey:#767d79; --grey-2:#9ba19d;
  --line:#e8ebe6;
  /* Vert Wyvo adouci : accents, états actifs, succès. */
  --green:#63cd84; --green-soft:#e9f8ee; --green-dark:#2e8b53; --green-ink:#0b2f1a;
  /* Vert pâle signature : boutons principaux (texte encre par-dessus). */
  --lime:#cdee7a; --lime-dark:#bce362; --lime-soft:#f1fadb; --lime-ink:#1b2410;
  --red:#ef4444;
  --radius:20px; --radius-lg:26px;
  --ease:cubic-bezier(.16,1,.3,1);
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bot:env(safe-area-inset-bottom,0px);
  /* alias hérité (anciens styles inline) */
  --orange:#63cd84; --orange-soft:#2e8b53;
}
/* Logo Wyvo (wordmark « wyvo. ») */
.logo-dots{height:26px;width:auto;display:inline-block;vertical-align:middle;flex:0 0 auto}
.db-logo .logo-dots,.splash-logo .logo-dots{height:30px}
.topbar .logo-dots,.logo .logo-dots{height:22px}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:"Helvetica Neue",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg);color:var(--ink);
  -webkit-font-smoothing:antialiased;line-height:1.5;overflow:hidden;
  overscroll-behavior:none;
}
::selection{background:var(--green);color:#fff}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
input,select,textarea{font-family:inherit}
h1,h2,h3{font-weight:800;letter-spacing:-.02em;line-height:1.05}
.accent{color:var(--green-dark)}
.muted{color:var(--grey)}
[hidden]{display:none!important}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:700;font-size:16px;padding:16px 22px;border-radius:100px;border:none;cursor:pointer;width:100%;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),opacity .2s,background .2s}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--lime);color:var(--lime-ink);box-shadow:0 8px 24px rgba(163,206,84,.3)}
.btn-primary:active{box-shadow:0 8px 26px rgba(163,206,84,.42)}
.btn-white{background:var(--ink);color:#fff}
.btn-ghost{background:var(--bg);color:var(--ink);border:1.5px solid var(--ink)}
.btn-dark{background:var(--ink);color:#fff;border:1px solid var(--ink)}
.btn:disabled{opacity:.5;pointer-events:none}
.btn.small{padding:11px 16px;font-size:14px;width:auto}

/* ---------- Champs ---------- */
.field{margin-bottom:15px}
.field label{display:block;font-size:13px;color:var(--ink-soft);margin-bottom:7px;font-weight:600}
.field input,.field select{
  width:100%;background:var(--bg);border:1px solid var(--line);color:var(--ink);
  padding:15px 16px;border-radius:14px;font-size:16px;outline:none;transition:border-color .2s,background .2s}
.field input:focus,.field select:focus{border-color:var(--green);background:var(--bg)}
.field input::placeholder{color:var(--grey-2)}
.field .hint{font-size:12px;color:var(--grey);margin-top:6px}
.field.err input,.field.err select{border-color:var(--red)}
.field .err-msg{color:var(--red);font-size:12.5px;margin-top:6px;display:none}
.field.err .err-msg{display:block}
.file-input{position:relative;display:flex;align-items:center;gap:12px;background:var(--bg-alt);border:1px dashed var(--line);
  padding:14px 16px;border-radius:14px;cursor:pointer;transition:border-color .2s}
.file-input.filled{border-style:solid;border-color:var(--green)}
.file-input input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.file-input .fi-label{font-size:14px;color:var(--grey)}
.file-input.filled .fi-label{color:var(--ink)}
.seg{display:flex;gap:10px;margin-bottom:22px}
.seg button{flex:1;padding:16px;border-radius:14px;border:1px solid var(--line);background:var(--bg);color:var(--grey);
  font-weight:700;font-size:15px;cursor:pointer;transition:.2s;display:flex;flex-direction:column;align-items:center;gap:6px}
.seg button.active{border-color:var(--green);background:var(--green-soft);color:var(--green-dark)}
.seg button svg{width:26px;height:26px}

/* ---------- Écran de blocage ordinateur ---------- */
.desktop-block{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 90% at 70% 20%,var(--green-soft),var(--bg));padding:40px;text-align:center}
.db-inner{max-width:460px}
.db-logo{display:flex;align-items:center;justify-content:center;gap:12px;font-size:30px;font-weight:800;margin-bottom:34px}
.db-dot{width:44px;height:44px;border-radius:12px;background:var(--green);display:grid;place-items:center;box-shadow:0 8px 26px rgba(99,205,132,.35)}
.db-dot svg{width:26px;height:26px}
.desktop-block h1{font-size:32px;margin-bottom:16px}
.desktop-block p{color:var(--ink-soft);font-size:16px;margin-bottom:22px;line-height:1.6}
.db-url{display:inline-block;background:var(--bg);border:1px solid var(--line);padding:11px 18px;border-radius:100px;
  font-size:14px;color:var(--green-dark);font-weight:600;word-break:break-all;margin-bottom:34px}
.db-phone{width:190px;height:320px;border:3px solid var(--ink);border-radius:34px;margin:0 auto;position:relative;
  background:linear-gradient(160deg,#fff,var(--bg-alt));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.db-phone-notch{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:56px;height:6px;border-radius:6px;background:var(--ink)}
.db-qr{background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px;line-height:0;box-shadow:0 6px 20px rgba(16,19,18,.08)}
.db-qr svg{display:block;border-radius:6px}
.db-qr-hint{color:var(--grey);font-size:12.5px;max-width:140px;text-align:center;line-height:1.4}
.desktop-block small{display:block;margin-top:28px;color:var(--grey-2);letter-spacing:.06em}

/* ---------- App shell mobile ---------- */
/* Hauteur = viewport RÉELLEMENT visible.
   Sur iOS Safari, `inset:0` couvre le grand viewport, qui passe DERRIÈRE la
   barre d'outils du navigateur : tout ce qui est ancré en bas (bouton
   « Annuler la demande », barre d'onglets…) devient intouchable.
   `dvh` suit la hauteur visible et corrige ça ; `vh` sert de repli. */
.app{position:fixed;top:0;left:0;right:0;height:100vh;height:100dvh;
  display:flex;flex-direction:column;max-width:520px;margin:0 auto;background:var(--bg)}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;animation:fadeIn .35s var(--ease);background:var(--bg)}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pad{padding:calc(22px + var(--safe-top)) 22px calc(22px + var(--safe-bot))}
.grow{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}

/* ---------- Écran d'installation PWA ---------- */
.install-screen{position:absolute;inset:0;display:flex;flex-direction:column;
  background:radial-gradient(130% 60% at 50% 0%,var(--green-soft),var(--bg));overflow-y:auto}
.inst-top{padding:calc(40px + var(--safe-top)) 30px 10px;text-align:center}
.inst-logo{width:88px;height:88px;border-radius:22px;box-shadow:0 12px 34px rgba(16,19,18,.22);margin-bottom:20px}
.install-screen h1{font-size:28px;margin-bottom:12px}
.inst-top p{color:var(--ink-soft);font-size:15px;max-width:340px;margin:0 auto;line-height:1.55}
.inst-card{margin:22px 22px 0;background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:10px 18px;box-shadow:0 10px 30px rgba(16,19,18,.05)}
.inst-step{display:flex;align-items:center;gap:14px;padding:15px 0;border-bottom:1px solid var(--line)}
.inst-step:last-child{border-bottom:none}
.inst-ic{width:44px;height:44px;flex:0 0 auto;border-radius:12px;background:var(--green-soft);color:var(--green-dark);
  display:grid;place-items:center;font-size:20px;font-weight:800}
.inst-ic svg{width:22px;height:22px}
.inst-step b{display:block;font-size:15px;font-weight:600}
.inst-step small{color:var(--grey);font-size:13px}
.inst-foot{margin-top:auto;padding:22px 22px calc(28px + var(--safe-bot))}

/* ---------- Splash ---------- */
.splash{position:fixed;inset:0;z-index:150;background:var(--bg);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:26px;transition:opacity .5s}
.splash.hide{opacity:0;pointer-events:none}
.splash-logo{display:flex;align-items:center;gap:12px;font-size:30px;font-weight:800}
.splash-logo img{height:34px;width:auto;display:block}
.splash-bar{width:180px;height:5px;background:var(--card-2);border-radius:5px;overflow:hidden}
.splash-bar i{display:block;height:100%;width:40%;background:var(--green);border-radius:5px;animation:load 1.1s var(--ease) infinite}
@keyframes load{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}

/* ---------- Onboarding ---------- */
.onb{position:absolute;inset:0;display:flex;flex-direction:column;background:radial-gradient(120% 70% at 50% 0%,var(--green-soft),var(--bg))}
.onb-3d{height:44%;position:relative}
.onb-3d canvas{width:100%;height:100%;display:block}
.onb-body{flex:1;padding:10px 30px 0;text-align:center;display:flex;flex-direction:column;align-items:center}
.onb-body h2{font-size:27px;margin-bottom:14px;max-width:340px}
.onb-body p{color:var(--ink-soft);font-size:16px;max-width:320px;line-height:1.6}
.onb-dots{display:flex;gap:8px;justify-content:center;margin:26px 0 6px}
.onb-dots i{width:8px;height:8px;border-radius:50%;background:var(--line);transition:.3s}
.onb-dots i.on{width:26px;border-radius:5px;background:var(--green)}
.onb-foot{padding:20px 22px calc(26px + var(--safe-bot))}
.onb-skip{position:absolute;top:calc(16px + var(--safe-top));right:20px;z-index:3;color:var(--ink-soft);font-size:14px;
  background:rgba(255,255,255,.7);backdrop-filter:blur(8px);border:1px solid var(--line);padding:8px 15px;border-radius:100px;cursor:pointer}

/* ---------- Portail auth ---------- */
.portal{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  background:radial-gradient(130% 60% at 50% 0%,var(--green-soft),var(--bg))}
.portal-top{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:40px 30px}
.portal-top .db-logo{margin-bottom:24px}
.portal-top h1{font-size:34px;line-height:1.1;margin-bottom:14px}
.portal-top p{color:var(--ink-soft);font-size:16px;max-width:300px}
.portal-actions{padding:24px 22px calc(30px + var(--safe-bot));display:flex;flex-direction:column;gap:12px}

/* ---------- Header d'écran ---------- */
.topbar{display:flex;align-items:center;gap:14px;padding:calc(16px + var(--safe-top)) 20px 14px}
.topbar .back{width:42px;height:42px;flex:0 0 auto;border-radius:50%;background:var(--bg);border:1px solid var(--line);
  display:grid;place-items:center;cursor:pointer}
.topbar .back svg{width:20px;height:20px;stroke:var(--ink)}
.topbar h2{font-size:20px}

/* ---------- Cartes / listes ---------- */
.card-lite{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.divider{height:1px;background:var(--line);margin:18px 0}

/* ---------- Toasts ---------- */
.toast-layer{position:fixed;left:0;right:0;bottom:calc(24px + var(--safe-bot));z-index:300;display:flex;flex-direction:column;
  align-items:center;gap:10px;pointer-events:none;padding:0 16px}
.toast{pointer-events:auto;background:rgba(16,19,18,.96);color:#fff;border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(14px);
  padding:14px 18px;border-radius:14px;font-size:14.5px;font-weight:500;max-width:420px;width:100%;
  box-shadow:0 18px 44px rgba(16,19,18,.28);display:flex;align-items:center;gap:11px;
  transform:translateY(140%);opacity:0;transition:transform .45s var(--ease),opacity .3s}
.toast.in{transform:none;opacity:1}
.toast .tdot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:#fff}
.toast.ok .tdot{background:var(--green)} .toast.err .tdot{background:var(--red)}

/* ---------- Modales ---------- */
.modal-layer,.sheet-layer{position:fixed;inset:0;z-index:290;display:flex}
.modal-layer{align-items:center;justify-content:center;padding:24px;background:rgba(16,19,18,.45);backdrop-filter:blur(4px)}
.modal{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px;max-width:400px;width:100%;
  animation:pop .3s var(--ease)}
@keyframes pop{from{transform:scale(.92);opacity:0}to{transform:none;opacity:1}}
.modal h3{font-size:20px;margin-bottom:10px}
.modal p{color:var(--ink-soft);font-size:15px;line-height:1.6;margin-bottom:22px}
.modal-actions{display:flex;flex-direction:column;gap:10px}
.modal-icon{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;margin-bottom:18px}
.modal-icon svg{width:30px;height:30px}
.modal-icon.warn{background:var(--green-soft)}.modal-icon.warn svg{stroke:var(--green-dark)}
.modal-icon.info{background:var(--bg-alt)}.modal-icon.info svg{stroke:var(--ink)}

/* ---------- Feuilles (bottom sheet) ---------- */
.sheet-layer{align-items:flex-end;background:rgba(16,19,18,.4);backdrop-filter:blur(3px)}
.sheet{background:var(--bg);border-top-left-radius:26px;border-top-right-radius:26px;width:100%;max-width:520px;margin:0 auto;
  padding:12px 22px calc(24px + var(--safe-bot));max-height:88vh;overflow-y:auto;animation:slideUp .4s var(--ease);border:1px solid var(--line);border-bottom:none}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:none}}
.sheet-handle{width:44px;height:5px;border-radius:5px;background:var(--line);margin:6px auto 18px}

/* spinner */
.spin{width:20px;height:20px;border:2.5px solid rgba(16,19,18,.2);border-top-color:var(--ink);border-radius:50%;animation:sp .7s linear infinite;display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}
.btn-primary .spin{border-color:rgba(27,36,16,.25);border-top-color:var(--lime-ink)}
.btn-white .spin,.btn-dark .spin{border-color:rgba(255,255,255,.3);border-top-color:#fff}

.center-col{display:flex;flex-direction:column;gap:10px}
.txt-c{text-align:center}
.mt{margin-top:16px}.mt-s{margin-top:8px}
.badge-pending{display:inline-flex;align-items:center;gap:7px;background:var(--green-soft);border:1px solid rgba(99,205,132,.4);
  color:var(--green-dark);padding:7px 14px;border-radius:100px;font-size:13px;font-weight:600}

/* =====================================================================
   App client — carte, recherche, navigation
   ===================================================================== */
.map-screen{position:absolute;inset:0}
#map{position:absolute;inset:0;background:#eef1ef;z-index:1}
/* Carte Leaflet : rendu clair & épuré */
.leaflet-container{background:#eef1ef;font-family:inherit}
.leaflet-tile{filter:saturate(.82) contrast(1.02)}
/* Repli OpenStreetMap : léger adoucissement, rendu clair conservé */
.osm .leaflet-tile,#map.osm .leaflet-tile,#adminMap.osm .leaflet-tile{filter:saturate(.75) brightness(1.02) contrast(.98)}
.leaflet-control-attribution{background:rgba(255,255,255,.7)!important;color:#9aa09c!important;font-size:9px!important}
.leaflet-control-attribution a{color:#6b716e!important}
.leaflet-control-zoom{display:none}

/* Barre de recherche haute */
.searchbar{position:absolute;top:calc(14px + var(--safe-top));left:14px;right:14px;z-index:20}
.searchbar .sb-input{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:16px;padding:15px 17px;box-shadow:0 10px 34px rgba(16,19,18,.12);cursor:text}
.searchbar .sb-input svg{width:20px;height:20px;stroke:var(--green-dark);flex:0 0 auto}
.searchbar .sb-input span{color:var(--grey);font-size:15.5px}

/* Bouton de recentrage GPS */
.gps-btn{position:absolute;right:16px;bottom:190px;z-index:20;width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.96);border:1px solid var(--line);display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 24px rgba(16,19,18,.14)}
.gps-btn svg{width:22px;height:22px;stroke:var(--ink)}
.gps-btn.locating svg{stroke:var(--green-dark);animation:sp 1s linear infinite}

/* Navigation basse */
.tabbar{position:absolute;left:0;right:0;bottom:0;z-index:25;display:flex;background:rgba(14,14,16,.96);backdrop-filter:blur(16px);
  border-top:1px solid rgba(255,255,255,.09);padding:10px 8px calc(10px + var(--safe-bot))}
.tabbar button{flex:1;background:none;border:none;color:#5a5a62;display:flex;flex-direction:column;align-items:center;gap:5px;
  font-size:11px;font-weight:600;cursor:pointer;padding:6px 0;transition:color .2s}
.tabbar button svg{width:24px;height:24px}
.tabbar button.active{color:var(--orange)}

/* Marqueurs carte */
.mk-me{width:20px;height:20px;border-radius:50%;background:var(--green);border:3px solid #fff;box-shadow:0 0 0 6px rgba(99,205,132,.25),0 3px 10px rgba(16,19,18,.3)}
.mk-me.pulse{animation:mePulse 2s infinite}
@keyframes mePulse{0%{box-shadow:0 0 0 4px rgba(99,205,132,.3)}70%{box-shadow:0 0 0 16px rgba(99,205,132,0)}100%{box-shadow:0 0 0 4px rgba(99,205,132,0)}}
.mk-pin{display:grid;place-items:center}
.mk-pin svg{width:34px;height:34px;filter:drop-shadow(0 4px 6px rgba(16,19,18,.35))}
/* Puck de navigation du conducteur (flèche ronde, façon GPS) */
.mk-driver{width:34px;height:34px;border-radius:50%;background:var(--green);border:3px solid #fff;display:grid;place-items:center;
  box-shadow:0 0 0 6px rgba(99,205,132,.22),0 4px 12px rgba(16,19,18,.3)}
.mk-driver svg{width:20px;height:20px;display:block}
/* Voiture 3D vue par le client (sprite orienté selon le cap) */
.mk-car{width:46px;height:46px;display:grid;place-items:center;filter:drop-shadow(0 3px 5px rgba(16,19,18,.35))}
.mk-car img{width:44px;height:44px;object-fit:contain;display:block}

/* Épingle centrale de sélection (drag map) */
.center-pin{position:absolute;top:50%;left:50%;transform:translate(-50%,-100%);z-index:15;pointer-events:none;transition:transform .15s}
.center-pin svg{width:40px;height:40px;filter:drop-shadow(0 6px 8px rgba(16,19,18,.35))}
.center-pin.lift{transform:translate(-50%,-115%)}

/* Feuille "Itinéraire vers" / actions */
.act-card{position:absolute;left:14px;right:14px;bottom:calc(90px + var(--safe-bot));z-index:22;background:var(--bg);
  border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:0 14px 40px rgba(16,19,18,.16)}
.act-card .addr{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.act-card .addr .lbl{flex:1;min-width:0}
.act-card .addr .lbl b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.act-card .addr .lbl small{color:var(--grey-2);font-size:12px}
.dot-o{width:11px;height:11px;border-radius:50%;background:var(--green);flex:0 0 auto}
.dot-w{width:11px;height:11px;border-radius:3px;background:var(--ink);flex:0 0 auto}

/* Autocomplétion adresses */
.search-panel{position:absolute;inset:0;z-index:40;background:var(--bg);display:flex;flex-direction:column;
  border-radius:22px 22px 0 0;will-change:transform,opacity}
/* Poignée de glissement (fermer en tirant vers le bas). */
.sp-grab{display:flex;justify-content:center;align-items:center;padding:calc(8px + var(--safe-top)) 0 2px;cursor:grab;touch-action:none}
.sp-grab span{width:42px;height:5px;border-radius:3px;background:var(--line)}
.sp-grab:active{cursor:grabbing}
.sp-head{padding:8px 16px 10px;display:flex;align-items:center;gap:12px;cursor:grab;touch-action:none}
.sp-head .back{width:42px;height:42px;flex:0 0 auto;border-radius:50%;background:var(--bg);border:1px solid var(--line);display:grid;place-items:center;cursor:pointer}
.sp-head .back svg{width:20px;height:20px;stroke:var(--ink)}
.sp-head .back:active{background:var(--bg-alt)}
.sp-fields{padding:0 16px 10px}
.sp-field{display:flex;align-items:center;gap:12px;background:var(--bg-alt);border:1px solid var(--line);border-radius:14px;padding:13px 15px;margin-bottom:10px}
.sp-field input{flex:1;background:none;border:none;color:var(--ink);font-size:16px;outline:none}
.sp-field input::placeholder{color:var(--grey-2)}
.sp-results{flex:1;overflow-y:auto;padding:6px 8px}
.sp-item{display:flex;align-items:center;gap:14px;padding:14px 12px;border-radius:12px;cursor:pointer}
.sp-item:active{background:var(--bg-alt)}
.sp-item .ico{width:38px;height:38px;border-radius:10px;background:var(--bg-alt);display:grid;place-items:center;flex:0 0 auto}
.sp-item .ico svg{width:19px;height:19px;stroke:var(--grey)}
.sp-item b{font-size:15px;font-weight:600;display:block}
.sp-item small{color:var(--grey-2);font-size:13px}
.sp-current{color:var(--green-dark)}
.sp-current .ico{background:var(--green-soft)} .sp-current .ico svg{stroke:var(--green-dark)}

/* Dégage le bas des écrans à onglets : le dernier bouton (déconnexion) reste
   accessible au-dessus de la barre d'onglets fixe. */
.screen:has(.tabbar) .grow{padding-bottom:calc(100px + var(--safe-bot))}

/* Autocomplétion adresses (formulaire de planification) */
.pn-ac{position:relative}
.pn-results{position:absolute;left:0;right:0;top:100%;margin-top:4px;background:var(--bg);border:1px solid var(--line);border-radius:12px;overflow:hidden;max-height:230px;overflow-y:auto;z-index:5;display:none;box-shadow:0 14px 34px rgba(16,19,18,.14)}
.pn-results.open{display:block}
.pn-item{padding:12px 14px;cursor:pointer;border-bottom:1px solid var(--line)}
.pn-item:last-child{border-bottom:none}
.pn-item:active{background:var(--bg-alt)}
.pn-item b{font-size:14.5px;font-weight:600;display:block}
.pn-item small{color:var(--grey-2);font-size:12.5px}

/* Feuille tarif */
.quote-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;font-size:14.5px}
.quote-row.total{border-top:1px solid var(--line);margin-top:6px;padding-top:14px;font-size:20px;font-weight:800}
.quote-row .muted{color:var(--grey)}
.trip-visual{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.trip-visual .line{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:3px}
.trip-visual .line i{width:2px;height:22px;background:var(--line)}
.trip-visual .ends{flex:1;min-width:0}
.trip-visual .ends div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px;padding:3px 0}
.coupon-box{display:flex;gap:8px;margin-top:12px}
.coupon-box input{flex:1;min-width:0;background:var(--bg);border:1px solid var(--line);color:var(--ink);padding:13px 14px;border-radius:12px;font-size:15px;text-transform:uppercase;outline:none}
.coupon-box input:focus{border-color:var(--green)}
.coupon-box .btn{width:auto;flex:0 0 auto}
.coupon-chip{display:inline-block;background:var(--green-soft);border:1px solid rgba(99,205,132,.45);color:var(--green-dark);padding:6px 12px;border-radius:100px;font-size:12.5px;margin:3px;cursor:pointer}
.loyalty-tag{display:inline-flex;align-items:center;gap:7px;background:var(--green-soft);border:1px solid rgba(99,205,132,.45);
  color:var(--green-dark);padding:8px 13px;border-radius:100px;font-size:13px;font-weight:600;margin-bottom:14px}

/* Recherche chauffeur (overlay) */
.searching-ov{position:absolute;left:14px;right:14px;bottom:calc(24px + var(--safe-bot));z-index:30;background:var(--bg);
  border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:0 16px 44px rgba(16,19,18,.18);text-align:center}
.radar{width:96px;height:96px;margin:0 auto 18px;position:relative}
.radar::before,.radar::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--green);opacity:0;animation:radar 2.2s ease-out infinite}
.radar::after{animation-delay:1.1s}
@keyframes radar{0%{transform:scale(.3);opacity:.8}100%{transform:scale(1);opacity:0}}
.radar .core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;background:var(--green);display:grid;place-items:center}
.radar .core svg{width:20px;height:20px}
.search-timer{font-size:13px;color:var(--grey-2);margin-top:6px}

/* Carte profil chauffeur (course acceptée) */
.driver-panel{position:absolute;left:14px;right:14px;bottom:calc(24px + var(--safe-bot));z-index:30;background:var(--bg);
  border:1px solid var(--line);border-radius:22px;padding:20px;box-shadow:0 16px 44px rgba(16,19,18,.18)}
.dp-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.dp-avatar{width:56px;height:56px;border-radius:50%;background:var(--bg-alt);border:2px solid var(--green);display:grid;place-items:center;font-size:22px;font-weight:800;flex:0 0 auto;overflow:hidden}
/* Photos de profil : toujours remplir le cercle */
.dp-avatar img,.acct-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
/* Croix de fermeture (bottom sheets / cartes) */
.sheet-close{position:absolute;top:10px;right:12px;width:30px;height:30px;border-radius:50%;background:var(--bg-alt);border:1px solid var(--line);color:var(--ink);font-size:14px;line-height:1;cursor:pointer;display:grid;place-items:center;z-index:3}
.act-card{position:absolute}
.dp-info{flex:1}
.dp-info b{font-size:17px}
.dp-info small{display:block;color:var(--grey);font-size:13px}
.dp-rating{color:var(--green-dark);font-weight:700;font-size:14px}
.dp-call{width:48px;height:48px;border-radius:50%;background:var(--green);display:grid;place-items:center;flex:0 0 auto}
.dp-call svg{width:22px;height:22px;stroke:var(--green-ink)}
.pickup-code{background:var(--green-soft);border:1px dashed rgba(99,205,132,.55);border-radius:14px;padding:14px;text-align:center;margin-top:6px}
.pickup-code small{color:var(--grey);font-size:12px;display:block;margin-bottom:4px}
.pickup-code b{font-size:30px;letter-spacing:.3em;color:var(--green-dark)}

/* Compte / listes */
.acct-head{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.acct-avatar{width:64px;height:64px;border-radius:50%;background:var(--green);color:var(--green-ink);display:grid;place-items:center;font-size:26px;font-weight:800;overflow:hidden}
.acct-row{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.acct-row:last-child{border-bottom:none}
.acct-row .k{color:var(--grey);font-size:14px}
.acct-row .v{font-weight:600;font-size:14px}

/* =====================================================================
   App chauffeur
   ===================================================================== */
.drv-status{position:absolute;top:calc(14px + var(--safe-top));left:50%;transform:translateX(-50%);z-index:20;
  background:rgba(255,255,255,.96);border:1px solid var(--line);backdrop-filter:blur(12px);padding:9px 18px;border-radius:100px;
  font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:9px;box-shadow:0 8px 24px rgba(16,19,18,.12)}
.drv-status .sdot{width:9px;height:9px;border-radius:50%;background:var(--grey-2)}
.drv-status.on .sdot{background:var(--green);box-shadow:0 0 0 0 rgba(99,205,132,.6);animation:pulse 2s infinite}

/* Bouton En ligne / Hors ligne : pilule posée au-dessus de la barre d'onglets */
.online-btn{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(100px + var(--safe-bot));z-index:26;
  display:inline-flex;align-items:center;gap:10px;padding:16px 30px;border-radius:100px;border:none;cursor:pointer;
  background:var(--ink);color:#fff;font-size:16px;font-weight:800;white-space:nowrap;
  box-shadow:0 12px 32px rgba(16,19,18,.28);transition:transform .2s var(--ease),background .3s,box-shadow .3s}
.online-btn svg{width:20px;height:20px;flex:0 0 auto}
.online-btn:active{transform:translateX(-50%) scale(.96)}
.online-btn.on{background:var(--green);color:var(--green-ink);box-shadow:0 12px 34px rgba(99,205,132,.4)}
.online-btn.on::after{content:"";position:absolute;inset:-6px;border-radius:100px;border:2px solid var(--green);opacity:.45;animation:onlinePulse 2s infinite}
@keyframes onlinePulse{0%{transform:scale(1);opacity:.45}70%{transform:scale(1.08);opacity:0}100%{transform:scale(1);opacity:0}}

.drv-searching{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(162px + var(--safe-bot));z-index:24;
  background:rgba(255,255,255,.96);border:1px solid var(--line);padding:11px 20px;border-radius:100px;display:flex;align-items:center;gap:12px;font-size:13.5px;color:var(--grey);box-shadow:0 8px 24px rgba(16,19,18,.12);white-space:nowrap}

/* Offre de course */
.offer-card{position:absolute;left:14px;right:14px;bottom:calc(24px + var(--safe-bot));z-index:30;background:var(--bg);
  border:1px solid rgba(99,205,132,.5);border-radius:24px;padding:22px;box-shadow:0 18px 50px rgba(16,19,18,.2);
  animation:slideUp .35s var(--ease)}
.offer-card.urgent{border-color:var(--red)}
.offer-amt{font-size:44px;font-weight:800;letter-spacing:-.03em;text-align:center;margin-bottom:2px}
.offer-sub{text-align:center;color:var(--grey);font-size:13px;margin-bottom:18px}
.offer-urgent-tag{display:block;text-align:center;color:var(--red);font-weight:700;font-size:13px;margin-bottom:10px}
.offer-leg{display:flex;align-items:center;gap:12px;padding:9px 0}
.offer-leg .lbl{flex:1;min-width:0}
.offer-leg .lbl b{display:block;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.offer-leg .lbl small{color:var(--grey-2);font-size:12px}
.offer-accept{position:relative;overflow:hidden}
.offer-accept .cd{position:absolute;left:0;top:0;bottom:0;background:rgba(6,51,23,.14)}

/* Course active chauffeur */
.drv-active{position:absolute;left:14px;right:14px;bottom:calc(24px + var(--safe-bot));z-index:30;background:var(--bg);
  border:1px solid var(--line);border-radius:24px;padding:20px;box-shadow:0 18px 50px rgba(16,19,18,.2)}
.drv-active h3{font-size:19px;margin-bottom:6px}
.drv-active .sub{color:var(--grey);font-size:13.5px;margin-bottom:16px}
.code-boxes{display:flex;gap:10px;justify-content:center;margin:10px 0 4px}
.code-boxes input{width:56px;height:64px;text-align:center;font-size:26px;font-weight:800;background:var(--bg-alt);
  border:1px solid var(--line);border-radius:14px;color:var(--ink);outline:none}
.code-boxes input:focus{border-color:var(--green)}

.wallet-balance{background:linear-gradient(150deg,var(--green-soft),rgba(99,205,132,.04));border:1px solid rgba(99,205,132,.35);
  border-radius:20px;padding:26px;text-align:center;margin-bottom:18px}
.wallet-balance small{color:var(--grey);font-size:13px}
.wallet-balance b{display:block;font-size:44px;font-weight:800;letter-spacing:-.03em;margin-top:4px}
.move-row{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-bottom:1px solid var(--line);font-size:14px}
.move-row:last-child{border:none}
.move-row .amt{color:var(--green-dark);font-weight:700}
.move-row .amt.neg{color:var(--grey)}
.po-badge{font-size:11px;padding:3px 9px;border-radius:100px;font-weight:700}
.po-pending{background:var(--bg-alt);color:var(--ink-soft)}
.po-paid{background:var(--green-soft);color:var(--green-dark)}

/* =====================================================================
   Navigation GPS (chauffeur & client)
   ===================================================================== */
.nav-banner{position:absolute;top:calc(12px + var(--safe-top));left:12px;right:12px;z-index:30;
  background:var(--bg);border:1px solid var(--line);border-radius:18px;
  padding:14px 16px;display:none;align-items:center;gap:14px;box-shadow:0 12px 34px rgba(16,19,18,.16)}
.nav-banner.show{display:flex;animation:fadeIn .25s var(--ease)}
.nav-banner .nav-ic{width:50px;height:50px;flex:0 0 auto;border-radius:13px;background:var(--green);color:var(--green-ink);display:grid;place-items:center}
.nav-banner .nav-txt{min-width:0}
.nav-banner .nav-txt b{display:block;font-size:17px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-banner .nav-txt small{color:var(--green-dark);font-size:13px;font-weight:600}

.drv-nav-card{position:absolute;left:14px;right:14px;bottom:calc(24px + var(--safe-bot));z-index:30;background:var(--bg);
  border:1px solid var(--line);border-radius:22px;padding:16px 18px;box-shadow:0 16px 44px rgba(16,19,18,.18)}
.drv-nav-card .nav-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.drv-nav-card .nav-head b{font-size:16px}
.nav-voice{width:40px;height:40px;flex:0 0 auto;border-radius:50%;background:var(--bg-alt);border:1px solid var(--line);color:var(--ink);display:grid;place-items:center;cursor:pointer}
.nav-voice svg{width:20px;height:20px}
.nav-eta{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}
.nav-eta b{font-size:26px;font-weight:800;letter-spacing:-.02em}
.nav-eta span{color:var(--grey);font-size:14px}
.nav-actions{display:flex;gap:10px;margin-top:10px}
.nav-actions .btn{flex:1}
.btn.small{padding:11px 14px;font-size:14px;width:auto}

/* Marqueur véhicule orienté */
.mk-driver{transition:transform .3s linear}

/* ---------- Écran "Bonne route" (prise en charge) ---------- */
.goodtrip{position:fixed;inset:0;z-index:400;background:radial-gradient(130% 60% at 50% 0%,var(--green-soft),var(--bg));
  display:flex;align-items:center;justify-content:center;text-align:center;animation:fadeIn .3s var(--ease);transition:opacity .5s}
.goodtrip.out{opacity:0;pointer-events:none}
.gt-inner{padding:30px;max-width:340px}
.gt-road{position:relative;height:96px;margin-bottom:6px;overflow:hidden}
.gt-road i{position:absolute;left:12%;right:12%;bottom:10px;height:3px;border-radius:3px;background:var(--line)}
.gt-car{width:88px;position:relative;z-index:1;animation:gtDrive 3s var(--ease) both}
@keyframes gtDrive{0%{transform:translateX(-46vw)}30%,72%{transform:translateX(0)}100%{transform:translateX(46vw)}}
.goodtrip h2{font-size:28px;margin:8px 0 10px;animation:pop .5s var(--ease) .35s both}
.goodtrip p{color:var(--grey);font-size:15px;animation:pop .5s var(--ease) .5s both}

/* Carte orientée dans le sens de la marche (course-up) */
#map.rot{position:absolute;transition:transform .35s ease-out}
/* Les marqueurs restent droits/lisibles malgré la rotation de la carte */
#map.rot .mk-pin,#map.rot .mk-me,#map.rot .mk-driver{transform:rotate(var(--brg,0deg))!important}
/* Boussole */
.nav-compass{width:40px;height:40px;flex:0 0 auto;border-radius:50%;background:var(--bg-alt);border:1px solid var(--line);color:var(--ink);display:grid;place-items:center;cursor:pointer;position:relative}
.nav-compass.on{border-color:var(--green);color:var(--green-dark)}
.nav-compass svg{width:22px;height:22px}
.compass-badge{position:absolute;top:calc(14px + var(--safe-top));right:66px;z-index:20;width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.96);border:1px solid var(--line);display:grid;place-items:center;box-shadow:0 8px 24px rgba(16,19,18,.12)}
.compass-badge .needle{width:22px;height:22px;transition:transform .3s ease-out}

/* Bandeau de suivi côté client */
.track-banner{position:absolute;top:calc(12px + var(--safe-top));left:12px;right:12px;z-index:22;
  background:rgba(255,255,255,.96);border:1px solid var(--line);backdrop-filter:blur(12px);border-radius:16px;
  padding:12px 15px;display:flex;align-items:center;gap:12px;box-shadow:0 10px 30px rgba(16,19,18,.14)}
.track-banner .tb-ic{width:38px;height:38px;flex:0 0 auto;border-radius:11px;background:var(--green-soft);color:var(--green-dark);display:grid;place-items:center}
.track-banner .tb-ic svg{width:20px;height:20px}
.track-banner b{font-size:14.5px;display:block}
.track-banner small{color:var(--grey);font-size:12.5px}
.deviation-alert{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.45)}
.deviation-alert .tb-ic{background:rgba(239,68,68,.14);color:var(--red)}

/* Notation étoiles */
.stars{display:flex;justify-content:center;gap:8px;margin:6px 0}
.stars .star{background:none;border:none;font-size:40px;line-height:1;color:var(--line);cursor:pointer;transition:transform .1s,color .15s;padding:0}
.stars .star:active{transform:scale(1.2)}
.stars .star.on{color:var(--green)}

/* Statistiques chauffeur */
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
.stat-box{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:18px}
.stat-box .sv{font-size:26px;font-weight:800;letter-spacing:-.02em}
.stat-box .sk{color:var(--grey);font-size:12.5px;margin-top:4px}
.stat-hero{background:linear-gradient(150deg,var(--green-soft),transparent);border:1px solid rgba(99,205,132,.35);border-radius:20px;padding:22px;text-align:center;margin-bottom:16px}
.stat-hero .big{font-size:44px;font-weight:800}
.stat-hero .stars-static{color:var(--green);font-size:20px;letter-spacing:2px}

/* =====================================================================
   V2 — Préférences, hotspots, repérez-moi, tags, objet oublié
   ===================================================================== */
/* Préférences de trajet (feuille de devis) */
.prefs-block{margin:14px 0 4px}
.prefs-title{font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-bottom:9px}
.prefs-pills{display:flex;flex-wrap:wrap;gap:8px}
.pref-pill{display:inline-flex;align-items:center;gap:7px;background:var(--bg);border:1.5px solid var(--line);color:var(--ink-soft);
  border-radius:100px;padding:9px 14px;font-size:13.5px;font-weight:600;cursor:pointer;transition:.18s}
.pref-pill svg{width:16px;height:16px;flex:0 0 auto}
.pref-pill:active{transform:scale(.96)}
.pref-pill.on{background:var(--green-soft);border-color:var(--green);color:var(--green-dark)}

/* Préférences vues par le conducteur (lecture seule) */
.drv-prefs{display:flex;flex-wrap:wrap;gap:7px;margin:4px 0 12px}
.drv-pref{display:inline-flex;align-items:center;gap:6px;background:var(--bg-alt);border:1px solid var(--line);color:var(--ink-soft);
  border-radius:100px;padding:6px 11px;font-size:12.5px;font-weight:600}
.drv-pref svg{width:15px;height:15px;flex:0 0 auto}
.drv-pref.hs{background:var(--green-soft);border-color:rgba(99,205,132,.4);color:var(--green-dark)}

/* Point de rencontre (hotspot) — note carte d'action + marqueur */
.hotspot-note{display:flex;gap:11px;align-items:flex-start;background:var(--green-soft);border:1px solid rgba(99,205,132,.4);
  border-radius:14px;padding:12px 14px;margin-bottom:12px}
.hotspot-note .hs-ic{width:34px;height:34px;flex:0 0 auto;border-radius:10px;background:var(--green);color:#fff;display:grid;place-items:center}
.hotspot-note .hs-ic svg{width:19px;height:19px}
.hotspot-note b{font-size:14px;display:block}
.hotspot-note small{color:var(--green-dark);font-size:12.5px;opacity:.9}
.mk-hotspot{width:30px;height:30px;display:grid;place-items:center;color:#fff}
.mk-hotspot svg{width:18px;height:18px;background:var(--green);border:2px solid #fff;border-radius:50% 50% 50% 4px;padding:4px;box-sizing:content-box;
  box-shadow:0 3px 10px rgba(16,19,18,.35);transform:rotate(-45deg)}
.mk-hotspot svg path,.mk-hotspot svg circle{transform-box:fill-box;transform-origin:center}

/* Tags de feedback (après la note) */
.tag-block{margin:6px 0 4px;text-align:left}
.tag-title{font-size:13px;font-weight:600;color:var(--ink-soft);margin:4px 0 10px;text-align:center}
.tag-grid{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.tag-chip{display:inline-flex;align-items:center;gap:7px;background:var(--bg);border:1.5px solid var(--line);color:var(--ink-soft);
  border-radius:100px;padding:9px 13px;font-size:13px;font-weight:600;cursor:pointer;transition:.18s}
.tag-chip svg{width:16px;height:16px;flex:0 0 auto}
.tag-chip:active{transform:scale(.96)}
.tag-chip.on{background:var(--green-soft);border-color:var(--green);color:var(--green-dark)}
/* Tags affichés sur le profil conducteur (vue client) */
.dp-tags{display:flex;flex-wrap:wrap;gap:7px;margin:2px 0 14px}
.dp-tag{display:inline-flex;align-items:center;gap:6px;background:var(--green-soft);border:1px solid rgba(99,205,132,.35);
  color:var(--green-dark);border-radius:100px;padding:6px 11px;font-size:12.5px;font-weight:600}
.dp-tag svg{width:14px;height:14px;flex:0 0 auto}

/* Mode "Repérez-moi" — proposition + écran illuminé */
.beacon-offer{position:fixed;inset:0;z-index:360;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(16,19,18,.45);backdrop-filter:blur(4px);animation:fadeIn .25s var(--ease)}
.bo-card{background:var(--bg);border-top-left-radius:26px;border-top-right-radius:26px;width:100%;max-width:520px;
  padding:26px 22px calc(26px + var(--safe-bot));text-align:center;animation:slideUp .35s var(--ease)}
.bo-ic{width:60px;height:60px;border-radius:18px;background:var(--green-soft);color:var(--green-dark);display:grid;place-items:center;margin:0 auto 14px}
.bo-ic svg{width:30px;height:30px}
.bo-card h3{font-size:20px;margin-bottom:8px}
.bo-card p{color:var(--grey);font-size:14.5px;line-height:1.55;margin-bottom:20px}
.beacon-screen{position:fixed;inset:0;z-index:500;background:var(--green);display:flex;align-items:center;justify-content:center;
  text-align:center;animation:beaconPulse 1.3s ease-in-out infinite}
@keyframes beaconPulse{0%,100%{background:#63cd84}50%{background:#7ef0a3}}
.bs-inner{position:relative;color:var(--green-ink)}
.bs-halo{width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.55);margin:0 auto 22px;animation:bsHalo 1.3s ease-out infinite}
@keyframes bsHalo{0%{transform:scale(.85);opacity:.9}100%{transform:scale(1.5);opacity:0}}
.bs-name{font-size:40px;font-weight:800;letter-spacing:-.02em}
.bs-sub{font-size:16px;font-weight:600;margin-top:8px;opacity:.85}
.bs-close{margin-top:34px;background:var(--green-ink);color:#fff;border:none;border-radius:100px;padding:14px 30px;font-size:15px;font-weight:700;cursor:pointer}

/* Objet oublié — chip d'accès rapide (fin de course), avec croix pour masquer */
.lost-chip{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(96px + var(--safe-bot));z-index:120;
  display:inline-flex;align-items:stretch;background:var(--ink);color:#fff;border-radius:100px;
  box-shadow:0 10px 30px rgba(16,19,18,.3);animation:rise .4s var(--ease) both;overflow:hidden}
.lost-chip .lost-main{display:inline-flex;align-items:center;gap:9px;background:none;border:none;color:#fff;
  padding:12px 8px 12px 20px;font-size:14px;font-weight:700;cursor:pointer}
.lost-chip .lost-main:active{opacity:.7}
.lost-chip svg{width:17px;height:17px;flex:0 0 auto}
.lost-chip .lost-x{display:grid;place-items:center;background:none;border:none;border-left:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.75);padding:0 15px 0 13px;cursor:pointer}
.lost-chip .lost-x svg{width:15px;height:15px}
.lost-chip .lost-x:active{color:#fff}

/* =====================================================================
   V2.1 — Tarif dynamique (badges) + Heatmap prédictive
   ===================================================================== */
/* Badges de facteurs sur les frais de service */
.fee-tag{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:100px;vertical-align:middle;
  background:var(--bg-alt);color:var(--ink-soft);margin-left:5px}
.fee-tag.hot{background:var(--green-soft);color:var(--green-dark)}
.fee-tag.bat{background:#eaf4ff;color:#2563eb}
/* Note "prix garanti" (verrou anti-manipulation) */
.lock-note{display:flex;align-items:center;gap:8px;color:var(--green-dark);background:var(--green-soft);
  border:1px solid rgba(99,205,132,.3);border-radius:12px;padding:9px 13px;font-size:12.5px;font-weight:600;margin:12px 0 2px}
.lock-note svg{width:15px;height:15px;flex:0 0 auto}

/* Bouton "Demande" (toggle heatmap) sur la carte conducteur */
.heat-btn{position:absolute;top:calc(14px + var(--safe-top));right:16px;z-index:20;display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.96);border:1px solid var(--line);color:var(--ink-soft);border-radius:100px;
  padding:9px 14px;font-size:13px;font-weight:700;cursor:pointer;box-shadow:0 8px 24px rgba(16,19,18,.12)}
.heat-btn svg{width:16px;height:16px;flex:0 0 auto}
.heat-btn:active{transform:scale(.96)}
.heat-btn.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.heat-btn.on svg{stroke:var(--green)}
/* Légende dégradé demande */
.heat-legend{position:absolute;top:calc(58px + var(--safe-top));right:16px;z-index:20;background:rgba(16,19,18,.92);
  color:#fff;border-radius:12px;padding:9px 12px;display:grid;grid-template-columns:auto auto;gap:2px 8px;align-items:center;
  box-shadow:0 8px 24px rgba(16,19,18,.28);backdrop-filter:blur(8px)}
.heat-legend .hl-title{grid-column:1 / -1;font-size:11px;font-weight:700;opacity:.85;margin-bottom:3px}
.heat-legend .hl-bar{grid-column:1 / -1;height:7px;border-radius:5px;background:linear-gradient(90deg,rgba(99,205,132,.12),#63cd84)}
.heat-legend .hl-lo,.heat-legend .hl-hi{font-size:10px;opacity:.75}
.heat-legend .hl-hi{text-align:right}
/* Libellé de zone prédictive sur la carte */
.heat-tag{transform:translate(-50%,-140%);white-space:nowrap;background:rgba(16,19,18,.9);color:#fff;border-radius:10px;
  padding:5px 9px;text-align:center;box-shadow:0 6px 18px rgba(16,19,18,.3);pointer-events:none}
.heat-tag b{display:block;font-size:11.5px;font-weight:700;line-height:1.1}
.heat-tag small{font-size:10px;color:#9be9b6}
.heat-tag.rising{border:1px solid var(--green)}
.heat-tag.rising small{color:var(--green)}
/* Zones "événement" (match diffusé, concert, spectacle…) : bleu */
.heat-tag.ev{background:rgba(23,37,84,.94)}
.heat-tag.ev small{color:#93c5fd}
.heat-tag.ev.rising{border-color:#3b82f6}
.heat-legend .hl-ev{grid-column:1 / -1;font-size:10px;color:#93c5fd;margin-top:4px}

/* =====================================================================
   V3 — Tiers de confiance · Wyvo for teens · ID · Suppression de compte
   ===================================================================== */
/* Badge "Tiers de confiance" (profil conducteur + vue passager) */
.trust-badge{display:inline-flex;align-items:center;gap:5px;background:var(--green-soft);color:var(--green-dark);
  border:1px solid rgba(99,205,132,.45);padding:5px 11px;border-radius:100px;font-size:12px;font-weight:800;
  text-transform:uppercase;letter-spacing:.04em;vertical-align:middle}
.trust-badge svg{width:13px;height:13px;flex:0 0 auto}
.trust-badge.sm{padding:2px 8px;font-size:10px}
.trust-badge.sm svg{width:11px;height:11px}
/* Bouton rond "devenir conducteur de confiance" (profil conducteur) */
.trust-round{width:46px;height:46px;flex:0 0 auto;border-radius:50%;background:var(--green-soft);border:1.5px solid rgba(99,205,132,.5);
  color:var(--green-dark);display:grid;place-items:center;cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s;
  box-shadow:0 6px 18px rgba(99,205,132,.18)}
.trust-round svg{width:22px;height:22px}
.trust-round:active{transform:scale(.92)}
.trust-round.pending{background:var(--bg-alt);border-color:var(--line);color:var(--grey);box-shadow:none}

/* Wyvo for teens — bascule dans la feuille de devis / planification */
.teen-block{margin:14px 0 4px;background:var(--bg-alt);border:1px solid var(--line);border-radius:16px;padding:13px 14px}
.teen-toggle{display:flex;align-items:center;gap:12px;cursor:pointer}
.teen-toggle input{width:20px;height:20px;flex:0 0 auto;accent-color:var(--green)}
.teen-toggle .tt-txt{flex:1;min-width:0}
.teen-toggle .tt-txt b{display:block;font-size:14px}
.teen-toggle .tt-txt small{color:var(--grey);font-size:11.5px;line-height:1.4;display:block}
.teen-toggle .tt-ic{width:34px;height:34px;flex:0 0 auto;border-radius:10px;background:var(--green-soft);color:var(--green-dark);display:grid;place-items:center}
.teen-toggle .tt-ic svg{width:18px;height:18px}
#teenFields{margin-top:11px}
#teenFields input,#pnTeenFields input{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--ink);
  padding:13px 14px;border-radius:12px;font-size:15px;outline:none}
#teenFields input:focus,#pnTeenFields input:focus{border-color:var(--green)}
#pnTeenFields{margin-top:11px}
.teen-info{margin-top:8px;font-size:12px;font-weight:600;color:var(--grey)}
.teen-info.ok{color:var(--green-dark)}
/* Chip "Wyvo for teens" (suivi, panneau conducteur, plans) */
.teen-tag-line{margin:2px 0 10px;text-align:center}
.teen-chip{display:inline-flex;align-items:center;gap:6px;background:var(--green-soft);border:1px solid rgba(99,205,132,.4);
  color:var(--green-dark);padding:6px 12px;border-radius:100px;font-size:12.5px;font-weight:700}
.drv-pref.teen{background:var(--green-soft);border-color:rgba(99,205,132,.4);color:var(--green-dark)}

/* Ligne "Identifiant" copiable (Mon compte) */
.acct-id{cursor:pointer}
.acct-id .v{display:inline-flex;align-items:center;gap:8px}
.acct-id .uid{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;background:var(--bg-alt);
  border:1px solid var(--line);border-radius:8px;padding:4px 8px;color:var(--ink-soft);letter-spacing:.02em}
.acct-id svg{width:15px;height:15px;color:var(--grey-2);flex:0 0 auto}
.acct-id:active .uid{border-color:var(--green)}

/* Zone de suppression du compte */
.danger-zone{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.03)}
.danger-zone b{color:var(--red)}
.btn-danger{background:rgba(239,68,68,.1);color:var(--red);border:1.5px solid rgba(239,68,68,.45)}
.btn-danger:active{background:rgba(239,68,68,.18)}

/* Bouton icône rond minimaliste (ex. "Ouvrir dans le GPS") */
.icon-round{width:44px;height:44px;flex:0 0 auto;border-radius:50%;background:var(--ink);border:none;color:#fff;
  display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 18px rgba(16,19,18,.22);
  transition:transform .2s var(--ease),box-shadow .2s}
.icon-round svg{width:19px;height:19px}
.icon-round:active{transform:scale(.9)}

/* ---------- Tarification par le conducteur ---------- */
/* Attente pendant que le conducteur fixe le tarif / que le passager répond */
.pricing-wait{display:flex;align-items:center;gap:14px;background:var(--bg-alt);border:1px solid var(--line);
  border-radius:16px;padding:14px 16px;margin:6px 0 10px}
.pricing-wait b{display:block;font-size:14.5px}
.pricing-wait small{color:var(--grey);font-size:12.5px;line-height:1.4;display:block}
/* Saisie du tarif conducteur */
.price-input{display:flex;align-items:center;justify-content:center;gap:8px;margin:14px 0 2px}
.price-input input{width:150px;text-align:center;font-size:34px;font-weight:800;letter-spacing:-.02em;
  background:var(--bg-alt);border:1.5px solid var(--line);border-radius:16px;padding:12px 10px;color:var(--ink);outline:none}
.price-input input:focus{border-color:var(--green)}
.price-input span{font-size:26px;font-weight:800;color:var(--grey)}
/* Apparition de l'offre côté client */
.driver-panel.offer-in{animation:slideUp .35s var(--ease)}

/* =====================================================================
   V4 — Refonte visuelle globale (surcouche)
   Verre dépoli sur les panneaux flottants, tabbar flottante, ombres en
   couches, boutons & champs raffinés. Aucun changement de comportement.
   ===================================================================== */
:root{
  --glass:rgba(255,255,255,.88);
  --shadow-s:0 1px 2px rgba(16,19,18,.05),0 4px 14px rgba(16,19,18,.06);
  --shadow-m:0 2px 6px rgba(16,19,18,.06),0 12px 34px rgba(16,19,18,.12);
  --shadow-l:0 4px 10px rgba(16,19,18,.07),0 24px 60px rgba(16,19,18,.17);
  --ring:0 0 0 4px rgba(99,205,132,.2);
}
h1,h2,h3{letter-spacing:-.028em}
body{text-rendering:optimizeLegibility}

/* ---- Boutons ---- */
.btn{font-weight:750;letter-spacing:-.01em;transition:transform .22s var(--ease),box-shadow .25s var(--ease),filter .2s,opacity .2s}
.btn:active{transform:scale(.965)}
.btn-primary{background:linear-gradient(165deg,#d8f38d 0%,#cdee7a 58%,#bfe463 100%);color:var(--lime-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 2px 6px rgba(163,206,84,.24),0 10px 26px rgba(163,206,84,.3)}
.btn-primary:active{filter:brightness(.97)}
.btn-dark,.btn-white{background:linear-gradient(165deg,#212724,#0d100e);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 8px 22px rgba(16,19,18,.22)}
.btn-ghost{background:#fff;border:1.5px solid rgba(16,19,18,.14);box-shadow:var(--shadow-s)}
.btn-ghost:active{background:var(--bg-alt)}
.btn:focus-visible{outline:none;box-shadow:var(--ring)}
.btn-danger{box-shadow:none}

/* ---- Champs & formulaires ---- */
.field input,.field select,.field textarea{border-radius:15px;transition:border-color .2s,box-shadow .2s,background .2s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--green);box-shadow:var(--ring)}
.sp-field{border-radius:16px;transition:border-color .2s,box-shadow .2s}
.sp-field:focus-within{border-color:var(--green);box-shadow:var(--ring);background:#fff}
.coupon-box input:focus{box-shadow:var(--ring)}
#teenFields input:focus,#pnTeenFields input:focus{box-shadow:var(--ring)}
.price-input input:focus{box-shadow:var(--ring)}
.code-boxes input{border-radius:16px;transition:border-color .2s,box-shadow .2s,transform .15s}
.code-boxes input:focus{box-shadow:var(--ring);transform:translateY(-2px)}
.file-input{border-radius:15px}
.seg button{border-radius:16px;transition:.22s var(--ease)}
.seg button.active{box-shadow:0 6px 18px rgba(99,205,132,.18)}

/* ---- Cartes & surfaces ---- */
.card-lite{border-radius:20px;box-shadow:var(--shadow-s)}
.divider{background:linear-gradient(90deg,transparent,var(--line) 18%,var(--line) 82%,transparent)}
.acct-avatar{box-shadow:0 8px 22px rgba(99,205,132,.28)}
.acct-head b{letter-spacing:-.02em}
.wallet-balance{border-radius:24px;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 10px 30px rgba(99,205,132,.14)}
.stat-box{border-radius:18px;box-shadow:var(--shadow-s)}
.stat-hero{border-radius:24px;box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
.badge-pending{box-shadow:0 4px 14px rgba(99,205,132,.14)}

/* ---- Panneaux flottants sur carte : verre dépoli ---- */
.act-card,.driver-panel,.searching-ov,.drv-nav-card,.offer-card{
  border-radius:26px;background:var(--glass);backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(255,255,255,.65);box-shadow:var(--shadow-l)}
.offer-card{border:1px solid rgba(99,205,132,.5)}
.offer-card.urgent{border-color:rgba(239,68,68,.55)}
.searchbar .sb-input{background:var(--glass);backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);border:1px solid rgba(255,255,255,.65);
  border-radius:18px;box-shadow:var(--shadow-m)}
.search-panel .sp-head .back,.topbar .back{box-shadow:var(--shadow-s);transition:transform .2s var(--ease)}
.topbar .back:active,.sp-head .back:active{transform:scale(.92)}
.drv-status,.heat-btn{background:var(--glass);backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);border:1px solid rgba(255,255,255,.65);box-shadow:var(--shadow-m)}
.gps-btn{background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.65);box-shadow:var(--shadow-m);transition:transform .2s var(--ease)}
.gps-btn:active{transform:scale(.9)}
.track-banner,.nav-banner{background:var(--glass);backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);border:1px solid rgba(255,255,255,.65);
  border-radius:20px;box-shadow:var(--shadow-m)}
.nav-banner .nav-ic{box-shadow:0 6px 16px rgba(99,205,132,.3)}
.hotspot-note,.pickup-code,.teen-block,.pricing-wait{border-radius:18px}
.pickup-code b{text-shadow:0 1px 0 rgba(255,255,255,.6)}

/* ---- Barre d'onglets flottante ---- */
.tabbar{left:14px;right:14px;bottom:calc(12px + var(--safe-bot));border-radius:30px;
  gap:6px;
  background:linear-gradient(180deg,rgba(24,26,25,.94),rgba(13,15,14,.94));
  backdrop-filter:blur(22px) saturate(1.35);
  -webkit-backdrop-filter:blur(22px) saturate(1.35);
  border:1px solid rgba(255,255,255,.08);
  padding:8px 8px calc(8px + var(--safe-bot) * .4);
  box-shadow:0 22px 52px rgba(16,19,18,.45),inset 0 1px 0 rgba(255,255,255,.14)}
.tabbar button{border-radius:20px;padding:9px 0;transition:color .22s var(--ease),background .22s var(--ease),transform .18s var(--ease)}
.tabbar button:active{transform:scale(.93)}
.tabbar button.active{color:var(--green);background:rgba(99,205,132,.16);box-shadow:inset 0 0 0 1px rgba(99,205,132,.22)}
.tabbar button.active svg{filter:drop-shadow(0 3px 8px rgba(99,205,132,.45))}

/* ---- Feuilles & modales ---- */
.sheet{border-top-left-radius:30px;border-top-right-radius:30px;
  box-shadow:0 -16px 50px rgba(16,19,18,.16);border-color:rgba(255,255,255,.6)}
.sheet-handle{width:40px;background:rgba(16,19,18,.14)}
.modal{border-radius:26px;box-shadow:var(--shadow-l)}
.modal-icon{border-radius:18px}
.sheet-close{transition:transform .15s,background .2s}
.sheet-close:active{transform:scale(.9);background:var(--line)}

/* ---- Toasts ---- */
.toast{border-radius:16px;background:rgba(13,15,14,.94);backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);box-shadow:0 18px 44px rgba(16,19,18,.32);border-color:rgba(255,255,255,.1)}

/* ---- Splash / onboarding / portail ---- */
.splash{background:radial-gradient(120% 80% at 50% 0%,var(--green-soft) 0%,var(--bg) 60%)}
.splash-bar{box-shadow:inset 0 1px 2px rgba(16,19,18,.06)}
.onb-dots i.on{box-shadow:0 3px 10px rgba(99,205,132,.4)}
.portal-top h1{letter-spacing:-.035em}
.inst-card{border-radius:24px;box-shadow:var(--shadow-m)}
.inst-ic{border-radius:14px}

/* ---- Pills / chips ---- */
.pref-pill,.tag-chip{transition:.2s var(--ease);box-shadow:var(--shadow-s)}
.pref-pill.on,.tag-chip.on{box-shadow:0 5px 16px rgba(99,205,132,.2)}
.drv-pref,.dp-tag,.teen-chip,.coupon-chip,.trust-badge{box-shadow:0 1px 4px rgba(16,19,18,.05)}
.lost-chip{border-radius:100px;background:rgba(13,15,14,.94);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.1)}

/* ---- Boutons ronds (GPS externe, appel, confiance) ---- */
.icon-round,.dp-call,.trust-round{transition:transform .2s var(--ease),box-shadow .25s var(--ease)}
.icon-round:active,.dp-call:active,.trust-round:active{transform:scale(.88)}
.dp-call{box-shadow:0 8px 20px rgba(99,205,132,.32)}

/* ---- Divers ---- */
.online-btn{border-radius:100px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 14px 36px rgba(16,19,18,.3)}
.online-btn.on{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 14px 38px rgba(99,205,132,.42)}
.drv-searching{background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.65);box-shadow:var(--shadow-s)}
.offer-amt{letter-spacing:-.04em}
.wallet-balance b,.stat-hero .big{letter-spacing:-.04em}
.heat-legend{border-radius:14px}
.acct-id .uid{transition:border-color .2s,background .2s}
.acct-id:active .uid{background:var(--green-soft)}
.goodtrip h2{letter-spacing:-.03em}
.quote-row.total{letter-spacing:-.02em}
.dp-avatar{box-shadow:0 6px 16px rgba(99,205,132,.2)}
.radar .core{box-shadow:0 8px 22px rgba(99,205,132,.4)}
.quote-row{gap:14px}
.quote-row span:last-child{text-align:right}

/* =====================================================================
   COVOITURAGE PLANIFIÉ — carte isométrique, agenda conducteur,
   recherche passager, réservations.  (refonte)
   ===================================================================== */

/* ---------- Carte vue du dessus (sobre, à plat) ----------
   Plus d'inclinaison 3D : conteneur plein écran, lecture classique.
   La sélection sur carte se fait à l'épingle centrale (centre = exact). */
.map-3d{position:absolute;inset:0;z-index:1}
.map-3d #map{position:absolute;inset:0;width:100%;height:100%}
/* Tuiles épurées, légèrement adoucies. */
.map-3d .leaflet-tile{filter:saturate(.9) contrast(1.02)}
.map-3d .leaflet-control-attribution{transform:scale(.9);transform-origin:100% 100%}
/* Tracés d'itinéraire : épais, arrondis, halo doux. */
.leaflet-overlay-pane path{stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 6px 10px rgba(16,19,18,.22))}

/* ---------- Épingle moderne (SVG, style Uber) ---------- */
.mk-pin{display:grid;place-items:center}
.mk-pin .pin-svg{width:40px;height:auto;display:block;filter:drop-shadow(0 5px 7px rgba(16,19,18,.32))}
.mk-pin.big .pin-svg{width:52px}
/* Épingle centrale de sélection : se soulève avec ombre au sol quand on bouge la carte. */
.center-pin{position:absolute;top:50%;left:50%;transform:translate(-50%,-100%);z-index:15;pointer-events:none;
  transition:transform .2s var(--ease)}
.center-pin .pin-svg{width:56px}
.center-pin.lift{transform:translate(-50%,-124%) scale(1.03)}
.center-pin::after{content:'';position:absolute;left:50%;bottom:-8px;width:16px;height:6px;border-radius:50%;
  background:rgba(16,19,18,.3);transform:translateX(-50%);filter:blur(2.5px);transition:.2s var(--ease)}
.center-pin.lift::after{width:24px;background:rgba(16,19,18,.18)}

/* ---------- Barre d'onglets : 5 entrées + pastille de notification ---------- */
.tabbar button{font-size:10.5px;gap:4px}
.tb-ic{position:relative;display:block;line-height:0}
.tb-badge{position:absolute;top:-5px;right:-9px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  background:var(--green);color:#062c14;font-size:10.5px;font-weight:800;font-style:normal;
  display:grid;place-items:center;box-shadow:0 3px 8px rgba(99,205,132,.5)}

/* ---------- Accueil conducteur : trajet du jour & demandes ---------- */
.trip-head{display:flex;align-items:flex-start;gap:12px;justify-content:space-between;margin-bottom:10px}
.trip-head b{font-size:16.5px;display:block}
.trip-head small{color:var(--grey);font-size:12.5px;display:block;margin-top:2px}
.seat-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;background:var(--green-soft);color:var(--green-dark);
  border-radius:100px;padding:6px 11px;font-size:13px;font-weight:800}
.seat-chip svg{width:15px;height:15px}
.req-title{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--grey-2);
  margin:14px 0 8px}
.req-row{display:flex;align-items:center;gap:11px;padding:9px;border:1px solid var(--line);border-radius:16px;margin-bottom:8px;background:var(--bg)}
.rq-av{width:38px;height:38px;flex:0 0 auto;border-radius:50%;background:var(--green-soft);color:var(--green-dark);
  display:grid;place-items:center;font-weight:800;overflow:hidden}
.rq-av img{width:100%;height:100%;object-fit:cover}
.rq-info{flex:1;min-width:0}
.rq-info b{display:block;font-size:14px}
.rq-info small{display:block;color:var(--grey);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rq-actions{display:flex;gap:7px;flex:0 0 auto}
.rq-btn{width:38px;height:38px;border-radius:50%;border:none;display:grid;place-items:center;cursor:pointer;
  transition:transform .18s var(--ease),opacity .2s}
.rq-btn svg{width:19px;height:19px}
.rq-btn.ok{background:var(--green);color:#04240f;box-shadow:0 6px 16px rgba(99,205,132,.4)}
.rq-btn.no{background:var(--bg-alt);color:var(--grey)}
.rq-btn:active{transform:scale(.88)}
.rq-btn.busy{opacity:.5}
.rq-badge{flex:0 0 auto;font-size:11px;font-weight:800;padding:5px 9px;border-radius:100px}
.rq-badge.ok{background:var(--green-soft);color:var(--green-dark)}
.rq-badge.wait{background:#fff5e5;color:#a35b00}
.run-stops{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.stop-chip{font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:100px;background:var(--bg-alt);color:var(--ink)}
.stop-chip.done{background:var(--green-soft);color:var(--green-dark)}

/* ---------- Agenda (onglet Planification) ---------- */
.day-block{margin-top:20px}
.day-title{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--grey-2);margin-bottom:8px}
.trip-card{display:flex;align-items:center;gap:12px;background:var(--bg);border:1px solid var(--line);
  border-radius:18px;padding:14px;margin-bottom:9px;box-shadow:0 6px 18px rgba(16,19,18,.05)}
.trip-card.running{border-color:var(--green);box-shadow:0 8px 24px rgba(99,205,132,.22)}
.tc-time{flex:0 0 auto;font-size:16px;font-weight:800;letter-spacing:-.02em;min-width:46px}
.tc-main{flex:1;min-width:0}
.tc-main b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-main small{display:block;color:var(--grey);font-size:12px;margin-top:1px}
.tc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.tc-tag{font-size:11px;font-weight:700;padding:4px 9px;border-radius:100px;background:var(--bg-alt);color:var(--ink-soft)}
.tc-tag.alert{background:var(--green-soft);color:var(--green-dark)}
.tc-tag.live{background:var(--ink);color:#fff}
.tc-x{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:var(--bg);
  color:var(--grey);font-size:14px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:transform .18s}
.tc-x:active{transform:scale(.88)}

/* ---------- Feuille « annoncer un trajet » ---------- */
.nt-block{margin-bottom:14px}
.nt-lbl{display:block;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--grey-2);margin-bottom:7px}
.nt-search{position:relative}
.nt-search input{width:100%;background:var(--bg-alt);border:1px solid var(--line);border-radius:14px;
  padding:14px 40px 14px 14px;font-size:15px;color:var(--ink)}
.nt-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;
  border:none;background:var(--line);color:var(--ink);font-size:12px;cursor:pointer;display:grid;place-items:center}
.city-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.city-chip{border:1px solid var(--line);background:var(--bg);border-radius:100px;padding:8px 13px;font-size:13.5px;
  font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all .2s var(--ease)}
.city-chip small{color:var(--grey-2);font-weight:600;font-size:11px}
.city-chip.on{background:var(--green);border-color:var(--green);color:#04240f}
.city-chip.on small{color:rgba(4,36,15,.6)}
.city-chip:active{transform:scale(.94)}
.nt-row{display:flex;gap:10px}
.nt-row .field{flex:1;min-width:0}
.stepper{display:flex;align-items:center;justify-content:space-between;background:var(--bg-alt);border:1px solid var(--line);
  border-radius:14px;padding:6px 8px}
.stepper button{width:34px;height:34px;border-radius:50%;border:none;background:var(--bg);color:var(--ink);
  font-size:19px;font-weight:700;cursor:pointer;box-shadow:0 2px 6px rgba(16,19,18,.08)}
.stepper b{font-size:17px;font-weight:800}

/* ---------- Recherche passager : croix, heure, actions ---------- */
.sp-field{position:relative}
.sp-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;
  border:none;background:var(--line);color:var(--ink);cursor:pointer;display:grid;place-items:center;padding:0}
.sp-clear svg{width:13px;height:13px}
.sp-when{display:flex;gap:8px;align-items:center;padding:0 16px 10px}
.when-chip{border:1px solid var(--line);background:var(--bg);border-radius:100px;padding:9px 14px;font-size:13px;
  font-weight:700;cursor:pointer;white-space:nowrap}
.when-chip.on{background:var(--green);border-color:var(--green);color:#04240f}
.sp-when input{flex:1;min-width:0;background:var(--bg-alt);border:1px solid var(--line);border-radius:100px;
  padding:9px 12px;font-size:13px;color:var(--ink)}
.sp-foot{position:sticky;bottom:0;background:linear-gradient(to top,var(--bg) 70%,transparent);
  padding:10px 16px calc(14px + var(--safe-bot));display:flex;flex-direction:column;gap:8px}
.pick-bar{position:absolute;top:calc(14px + var(--safe-top));left:14px;right:14px;z-index:20;
  background:var(--bg);border:1px solid var(--line);border-radius:16px;
  padding:12px 14px;box-shadow:0 10px 30px rgba(16,19,18,.12)}
.pick-bar b{display:block;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pick-bar small{color:var(--grey);font-size:12px}

/* ---------- Résultats de recherche ---------- */
.res-head{margin-bottom:6px}
.res-when{font-size:12.5px;color:var(--grey);margin-top:6px}
.res-title{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--grey-2);margin:18px 0 9px}
.res-empty{background:var(--bg-alt);border-radius:16px;padding:14px;margin-top:12px}
.res-empty b{display:block;font-size:14.5px}
.res-empty small{display:block;color:var(--grey);font-size:12.5px;margin-top:3px}
.trip-res{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:18px;padding:13px;
  margin-bottom:9px;cursor:pointer;background:var(--bg);transition:transform .18s var(--ease),box-shadow .25s}
.trip-res:active{transform:scale(.985);box-shadow:0 8px 22px rgba(16,19,18,.1)}
.trip-res.alt{border-style:dashed}
.tr-time{flex:0 0 auto;text-align:center;min-width:48px}
.tr-time b{display:block;font-size:16px;font-weight:800;letter-spacing:-.02em}
.tr-time small{display:block;color:var(--grey-2);font-size:11px}
.tr-main{flex:1;min-width:0}
.tr-main>b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-gap{display:block;color:#a35b00;font-size:11.5px;margin-top:2px}
.tr-drv{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--grey);margin-top:5px}
.tr-av{width:22px;height:22px;border-radius:50%;background:var(--green-soft);color:var(--green-dark);font-size:11px;
  font-weight:800;display:grid;place-items:center;overflow:hidden;flex:0 0 auto}
.tr-av img{width:100%;height:100%;object-fit:cover}
.tr-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.tr-go{flex:0 0 auto;color:var(--grey-2);font-size:22px;line-height:1}

/* ---------- Transports en commun ---------- */
.transit-card{border:1px solid var(--line);border-radius:18px;padding:13px;margin-bottom:9px;background:var(--bg)}
.tt-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:13.5px}
.tt-head b{font-size:14.5px}
.tt-head .muted{font-size:12px}
.tt-prov{font-size:11px;font-weight:800;padding:4px 9px;border-radius:100px;background:var(--ink);color:#fff}
.tt-prov.sncf{background:#0a2c6b}
.tt-prov.mova{background:#2e8b53}
.tt-legs{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:9px}
.tt-legs i{color:var(--grey-2);font-style:normal}
.tt-leg{font-size:11.5px;font-weight:700;padding:4px 9px;border-radius:100px;background:var(--bg-alt);color:var(--ink-soft)}
.tt-leg.walk{background:transparent;color:var(--grey)}

/* ---------- Encadré de réservation (profil / accueil) ---------- */
.bk-overlay{position:absolute;left:14px;right:14px;bottom:calc(90px + var(--safe-bot));z-index:22}
.bk-card{background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:16px;margin-bottom:10px;
  box-shadow:0 14px 40px rgba(16,19,18,.14)}
.bk-card.ok{border-color:var(--green)}
.bk-card.live{border-color:var(--ink)}
.bk-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.bk-status{font-size:11px;font-weight:800;letter-spacing:.02em;padding:5px 10px;border-radius:100px;
  background:var(--bg-alt);color:var(--ink-soft)}
.bk-status.wait{background:#fff5e5;color:#a35b00}
.bk-status.pay{background:#eaf1ff;color:#1c4fbf}
.bk-status.ok{background:var(--green-soft);color:var(--green-dark)}
.bk-status.live{background:var(--ink);color:#fff}
.bk-when{font-size:12px;color:var(--grey)}
.bk-route{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.bk-route b{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;
  padding-top:10px;border-top:1px solid var(--line)}
.bk-drv{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-soft)}
.bk-card .pickup-code{margin-top:10px}

/* ---------- Glisser pour fermer ---------- */
.sheet,.act-card,.driver-panel,.bk-overlay{touch-action:pan-y}
.sheet-handle{cursor:grab}

/* --- Ajustements conducteur : le bandeau d'état ne chevauche plus le bouton
       Affluence, et la carte d'action laisse la barre d'onglets accessible. --- */
.drv-status{left:14px;transform:none;max-width:calc(100% - 160px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drv-nav-card{bottom:calc(92px + var(--safe-bot));max-height:calc(100vh - 220px);overflow-y:auto}

/* =====================================================================
   ACCUEIL PAGE UNIQUE (plus d'onglets)
   Bandeau vert pâle + salutation, recherche, sélecteur de mode,
   puis l'historique des covoiturages. Le compte s'ouvre en haut à gauche.
   ===================================================================== */
.home{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--bg);overflow-y:auto}
/* Texture topographique en filigrane, fixe derrière tout le contenu. */
.home::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:url("../icons/Fond/fond%20app.jpg") center center / cover no-repeat;
  opacity:.06}
.home > *{position:relative;z-index:1}

/* ---- Bandeau haut ---- */
.home-top{background:var(--lime-soft);padding:calc(16px + var(--safe-top)) 20px 62px;
  border-radius:0 0 32px 32px;position:relative}
.home-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:22px}
/* Pastille compte (haut gauche) */
.acct-chip{display:inline-flex;align-items:center;gap:10px;background:#fff;border:none;cursor:pointer;
  padding:6px 18px 6px 6px;border-radius:100px;box-shadow:var(--shadow-s);
  font-weight:750;font-size:15.5px;color:var(--ink);transition:transform .2s var(--ease)}
.acct-chip:active{transform:scale(.96)}
.acct-chip .av{width:38px;height:38px;border-radius:50%;overflow:hidden;flex:0 0 auto;background:var(--green-soft);
  display:grid;place-items:center;font-weight:800;color:var(--green-dark);font-size:16px}
.acct-chip .av img{width:100%;height:100%;object-fit:cover}
/* Pastille solde de Lys (haut droite) */
.lys-chip{display:inline-flex;align-items:center;gap:7px;background:#fff;border:none;cursor:pointer;
  padding:9px 16px;border-radius:100px;box-shadow:var(--shadow-s);
  font-weight:800;font-size:15px;color:var(--ink);transition:transform .2s var(--ease)}
.lys-chip:active{transform:scale(.94)}
.lys-chip .lys-ic{width:19px;height:19px;flex:0 0 auto}
/* Salutation */
.home-hello{font-size:26px;line-height:1.18;font-weight:800;letter-spacing:-.02em;color:var(--ink);
  text-wrap:balance;margin-bottom:4px}

/* ---- Carte de recherche (chevauche le bandeau) ---- */
/* La carte de recherche chevauche le bas du bandeau vert (effet d'étage). */
.home-search-wrap{margin:-44px 16px 0;background:#fff;border-radius:28px;padding:13px;box-shadow:var(--shadow-m)}
.home-search{display:flex;align-items:center;gap:12px;background:var(--bg-alt);border-radius:100px;
  padding:16px 20px;cursor:pointer;transition:background .2s}
.home-search:active{background:var(--card-2)}
.home-search svg{width:20px;height:20px;flex:0 0 auto;stroke:var(--ink)}
.home-search span{color:var(--grey);font-size:16px;font-weight:600}

/* ---- Sélecteur de mode Fire / Zzz ---- */
.mode-switch{display:flex;gap:6px;margin:14px 16px 0;background:#fff;border-radius:100px;padding:6px;
  box-shadow:var(--shadow-s)}
.mode-switch button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:none;background:none;cursor:pointer;border-radius:100px;padding:12px 10px;
  font-weight:750;font-size:14.5px;color:var(--grey);transition:.22s var(--ease)}
.mode-switch button .mi{font-size:16px;line-height:1}
.mode-switch button.on{background:var(--lime);color:var(--lime-ink);box-shadow:0 4px 14px rgba(163,206,84,.35)}
.mode-switch button:active{transform:scale(.96)}
.mode-note{margin:8px 20px 0;font-size:12.5px;color:var(--grey);text-align:center}

/* ---- Corps : historique ---- */
.home-body{flex:1;padding:22px 16px calc(28px + var(--safe-bot))}
.home-h2{font-size:21px;font-weight:800;letter-spacing:-.02em;margin-bottom:12px}
.home-empty{text-align:center;padding:30px 20px;color:var(--grey)}
.home-empty .ill{width:210px;max-width:70%;margin:0 auto 18px}
.home-empty .ill svg{width:100%;height:auto;display:block}
.home-empty b{display:block;color:var(--ink);font-size:16.5px;font-weight:750;margin-bottom:4px}
.home-empty small{font-size:14px}

/* =====================================================================
   ESPACE COMPTE (ouvert depuis la pastille en haut à gauche)
   ===================================================================== */
.acct-page{background:var(--bg-alt)}
.acct-nav{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;
  padding:calc(12px + var(--safe-top)) 14px 8px}
.acct-nav b{text-align:center;font-size:17px;font-weight:800}
.acct-nav .back{width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;cursor:pointer;color:var(--ink);box-shadow:var(--shadow-s)}
.acct-nav .back svg{width:20px;height:20px}
.acct-nav .back:active{transform:scale(.92)}

.acct-hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;padding:10px 0 20px}
.acct-photo{width:96px;height:96px;border-radius:28px;overflow:hidden;background:var(--green-soft);
  display:grid;place-items:center;font-size:34px;font-weight:800;color:var(--green-dark);box-shadow:var(--shadow-m)}
.acct-photo img{width:100%;height:100%;object-fit:cover}
.acct-name{font-size:23px;font-weight:800;letter-spacing:-.02em}
.acct-role{display:inline-flex;align-items:center;gap:7px;background:var(--lime-soft);color:var(--green-dark);
  font-size:12.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:6px 14px;border-radius:100px}
.acct-role .lys-ic{width:16px;height:16px}
.acct-stars{display:flex;align-items:center;gap:8px;font-size:14px}
.stars-static i{font-style:normal;color:var(--line);font-size:19px}
.stars-static i.on{color:var(--green)}

/* Tuiles porte-monnaie / covoit' passés */
.acct-tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.acct-tile{background:#fff;border:none;border-radius:22px;padding:18px 14px;text-align:center;
  box-shadow:var(--shadow-s);display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;
  transition:transform .2s var(--ease)}
.acct-tile:active{transform:scale(.97)}
.acct-tile small{font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--grey);text-transform:uppercase}
.acct-tile b{font-size:21px;font-weight:800;letter-spacing:-.02em}
.acct-tile .ti{width:28px;height:28px;stroke:var(--green-dark)}
.lys-ic{width:20px;height:20px;display:block}
.lys-ic.big{width:30px;height:30px}

/* Programme de fidélité */
.loyalty-card{background:#fff;border-radius:24px;padding:20px;box-shadow:var(--shadow-s);margin-bottom:14px}
.loyalty-card>b{font-size:17px;font-weight:800}
.loyalty-card p{color:var(--ink-soft);font-size:14.5px;margin:6px 0 16px}
.loyalty-card .hl{color:var(--green-dark)}
.loy-track{position:relative;height:8px;border-radius:5px;background:var(--lime-soft);margin-bottom:12px}
.loy-track i{position:absolute;inset:0 auto 0 0;border-radius:5px;background:var(--green);transition:width .5s var(--ease)}
.loy-goal{position:absolute;right:-4px;top:50%;transform:translateY(-50%);width:28px;height:28px;
  border-radius:50%;background:#fff;box-shadow:var(--shadow-s);display:grid;place-items:center}
.loy-goal .lys-ic{width:17px;height:17px}
.loy-foot{display:flex;justify-content:space-between;font-size:13px;color:var(--grey)}
.loy-foot b{color:var(--ink)}

/* =====================================================================
   PORTEFEUILLE DE LYS
   ===================================================================== */
.lys-head{display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px 0 14px;text-align:center}
.lys-head b{font-size:30px;font-weight:800;letter-spacing:-.02em}
.lys-head small{color:var(--grey);font-size:13px}
.lys-payout{background:var(--lime-soft);color:var(--green-dark);border-radius:14px;padding:11px 14px;
  font-size:13.5px;font-weight:650;text-align:center;margin-bottom:14px}
.lys-title{font-size:13px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--grey);
  margin:16px 0 10px}
.lys-packs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lys-pack{position:relative;background:var(--bg-alt);border:1.5px solid transparent;border-radius:20px;
  padding:16px 12px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px;
  transition:.2s var(--ease)}
.lys-pack:active{transform:scale(.96)}
.lys-pack.pop{border-color:var(--green);background:var(--lime-soft)}
.lys-pack b{font-size:16px;font-weight:800}
.lys-pack .bonus{font-size:11.5px;font-weight:750;color:var(--green-dark)}
.lys-pack .price{font-size:14px;font-weight:750;color:var(--ink-soft)}
.pop-tag{position:absolute;top:-9px;left:50%;transform:translateX(-50%);background:var(--green);color:#fff;
  font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:3px 10px;border-radius:100px}
.lys-free{display:flex;gap:9px;margin-top:12px}
.lys-free input{flex:1;background:var(--bg-alt);border:1.5px solid var(--line);border-radius:14px;
  padding:13px 15px;font-size:15px;color:var(--ink);outline:none}
.lys-free input:focus{border-color:var(--green)}
.lys-free .btn{width:auto;flex:0 0 auto}

/* =====================================================================
   INSCRIPTION EN ÉTAPES (assistant) + vérification de l'e-mail
   ===================================================================== */
.su-screen{background:var(--bg)}
.su-top{display:flex;align-items:center;gap:14px;padding:calc(12px + var(--safe-top)) 16px 6px}
.su-top .back{width:42px;height:42px;flex:0 0 auto;border-radius:50%;background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;cursor:pointer;color:var(--ink);box-shadow:var(--shadow-s)}
.su-top .back svg{width:20px;height:20px}
.su-top .back:active{transform:scale(.92)}
.su-spacer{width:42px;flex:0 0 auto}
.su-prog{flex:1;height:6px;border-radius:4px;background:var(--card-2);overflow:hidden}
.su-prog i{display:block;height:100%;border-radius:4px;background:var(--green);transition:width .45s var(--ease)}

.su-body{padding-top:4px}
.su-head{text-align:center;margin:14px 0 24px}
.su-emoji{font-size:44px;line-height:1;margin-bottom:12px}
.su-head h1{font-size:25px;font-weight:800;letter-spacing:-.02em;text-wrap:balance}
.su-head p{color:var(--grey);font-size:15px;margin-top:7px}

/* Choix du rôle */
.su-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.su-card{background:#fff;border:1.5px solid var(--line);border-radius:24px;padding:22px 14px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;
  box-shadow:var(--shadow-s);transition:.2s var(--ease)}
.su-card:active{transform:scale(.96)}
.su-card:hover{border-color:var(--green)}
.su-card .ic{width:54px;height:54px;border-radius:50%;background:var(--card-2);display:grid;place-items:center;color:var(--ink)}
.su-card .ic svg{width:26px;height:26px}
.su-card b{font-size:17px;font-weight:800}
.su-card small{font-size:13px;color:var(--grey);line-height:1.35}

/* Saisie du code à 6 chiffres */
.code-boxes{display:flex;gap:9px;justify-content:center}
.code-boxes input{width:46px;height:58px;text-align:center;font-size:24px;font-weight:800;color:var(--ink);
  background:var(--bg-alt);border:1.5px solid var(--line);border-radius:15px;outline:none;transition:.15s}
.code-boxes input:focus{border-color:var(--green);background:#fff;box-shadow:var(--ring)}

/* =====================================================================
   MODE FIRE — offre du conducteur (payée en Lys)
   ===================================================================== */
.quote-offer{position:absolute;left:14px;right:14px;bottom:calc(18px + var(--safe-bot));z-index:22;
  background:var(--glass);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(255,255,255,.65);border-radius:26px;padding:18px;box-shadow:var(--shadow-l)}
.qo-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.qo-head .tr-av{width:46px;height:46px;border-radius:50%;overflow:hidden;flex:0 0 auto;background:var(--green-soft);
  display:grid;place-items:center;font-weight:800;color:var(--green-dark)}
.qo-head .tr-av img{width:100%;height:100%;object-fit:cover}
.qo-head b{display:block;font-size:16px}
.qo-head small{color:var(--grey);font-size:12.5px}
.qo-price{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;
  background:var(--lime-soft);border-radius:20px;padding:16px;margin-bottom:14px}
.qo-price b{font-size:26px;font-weight:800;letter-spacing:-.02em}
.qo-price span{color:var(--ink-soft);font-size:14px;font-weight:650}
.qo-legs .addr{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.qo-legs .lbl b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qo-legs .lbl small{color:var(--grey-2);font-size:12px}
.qo-bal{text-align:center;font-size:13px;color:var(--grey);margin-top:2px}
.qo-bal.short{color:var(--red);font-weight:650}

/* Parrainage */
.ref-card{background:#fff;border-radius:24px;padding:20px;box-shadow:var(--shadow-s);margin-bottom:14px}
.ref-card>b{font-size:17px;font-weight:800}
.ref-card p{color:var(--ink-soft);font-size:14.5px;margin:6px 0 14px}
.ref-code{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--lime-soft);
  border:1.5px dashed var(--green);border-radius:16px;padding:14px 16px;cursor:pointer}
.ref-code code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:20px;font-weight:800;
  letter-spacing:.1em;color:var(--green-dark)}
.ref-code svg{width:19px;height:19px;stroke:var(--green-dark);flex:0 0 auto}
.ref-stats{display:flex;gap:10px;margin-top:12px}
.ref-stats div{flex:1;background:var(--bg-alt);border-radius:15px;padding:12px;text-align:center}
.ref-stats b{display:block;font-size:18px;font-weight:800}
.ref-stats small{font-size:11.5px;color:var(--grey)}

/* =====================================================================
   PARCOURS DE RÉSERVATION EN 3 ÉTAPES
   ===================================================================== */
.tf{position:absolute;inset:0;z-index:45;background:var(--bg);display:flex;flex-direction:column}
.tf-top{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:calc(14px + var(--safe-top)) 20px 6px}
.tf-steps{display:flex;gap:10px;flex:1;justify-content:center;max-width:70%}
.tf-steps i{height:6px;flex:1;max-width:76px;border-radius:4px;background:var(--card-2);transition:background .3s var(--ease)}
.tf-steps i.on{background:var(--green)}
.tf-x{width:40px;height:40px;flex:0 0 auto;border:none;background:none;cursor:pointer;color:var(--ink);
  display:grid;place-items:center;border-radius:50%}
.tf-x svg{width:24px;height:24px}
.tf-x:active{background:var(--card-2)}

.tf-body{flex:1;overflow-y:auto;padding:6px 20px 16px}
.tf-title{font-size:26px;font-weight:800;letter-spacing:-.02em;text-align:center;margin:14px 0 22px}

/* Aperçu carte */
.tf-map{height:170px;border-radius:20px;overflow:hidden;background:var(--card-2);margin-bottom:20px;
  display:grid;place-items:center;position:relative}
.tf-map-hint{font-size:13.5px;color:var(--grey);padding:0 20px;text-align:center}
.tf-map .leaflet-container{height:100%;width:100%}

/* Départ / arrivée */
.tf-route{position:relative;border:1.5px solid var(--line);border-radius:20px;background:#fff;margin-bottom:22px}
.tf-row{display:flex;align-items:center;gap:14px;padding:18px 16px;cursor:pointer}
.tf-row + .tf-row{border-top:1.5px solid var(--line)}
.tf-row b{flex:1;min-width:0;font-size:17px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tf-row b.ph{color:var(--grey-2);font-weight:600}
.tf-row-ic{width:22px;height:22px;flex:0 0 auto;stroke:var(--green);opacity:.85}
.tf-row:active{background:var(--bg-alt)}
.tf-swap{position:absolute;left:-1px;top:50%;transform:translate(-42%,-50%);width:44px;height:44px;
  border-radius:50%;background:#fff;border:1.5px solid var(--line);cursor:pointer;color:var(--ink);
  display:grid;place-items:center;box-shadow:var(--shadow-s);z-index:2}
.tf-swap svg{width:20px;height:20px}
.tf-swap:active{transform:translate(-42%,-50%) scale(.9)}

/* Date & heure */
.tf-when{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tf-when label{display:block;font-size:12px;font-weight:800;letter-spacing:.05em;color:var(--ink);margin-bottom:8px}
.tf-box{width:100%;background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:18px 14px;
  font:inherit;font-size:17px;font-weight:750;color:var(--ink);cursor:pointer;text-align:center}
.tf-box:active{background:var(--bg-alt)}
.tf-hidden{position:absolute;opacity:0;width:0;height:0;pointer-events:none}

/* Étape 2 */
.tf-lbl{display:block;font-size:12px;font-weight:800;letter-spacing:.05em;color:var(--ink);margin:0 0 12px}
.tf-pax{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px}
.tf-pax button{aspect-ratio:1;border-radius:50%;border:1.5px solid var(--line);background:#fff;cursor:pointer;
  font:inherit;font-size:19px;font-weight:750;color:var(--ink);transition:.2s var(--ease)}
.tf-pax button.on{background:var(--lime);border-color:var(--lime-dark);color:var(--lime-ink)}
.tf-pax button:active{transform:scale(.93)}
.tf-input{width:100%;background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:18px 16px;
  font:inherit;font-size:16px;color:var(--ink);outline:none;margin-bottom:20px}
.tf-input:focus{border-color:var(--green)}
.tf-tip{display:flex;gap:12px;align-items:flex-start}
.tf-tip span{font-size:20px;line-height:1.2}
.tf-tip p{color:var(--ink-soft);font-size:14.5px;line-height:1.45}

/* Étape 3 */
.tf-price{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;min-height:56px;margin-bottom:28px}
.tf-price b{font-size:34px;font-weight:800;letter-spacing:-.02em}
.tf-price span{font-size:15px;color:var(--grey);font-weight:650}
.tf-price .lys-ic{width:32px;height:32px}
.tf-pay-opt{display:flex;align-items:center;gap:12px;border:1.5px solid var(--line);border-radius:20px;
  padding:18px 16px;background:#fff}
.tf-pay-opt.on{border-color:var(--green);box-shadow:var(--ring)}
.tf-pay-opt b{font-size:16px;font-weight:750}
.tf-pay-opt small{margin-left:auto;font-size:13px;color:var(--grey)}
.tf-pay-opt .radio{width:24px;height:24px;border-radius:50%;border:2px solid var(--line);flex:0 0 auto;
  display:grid;place-items:center}
.tf-pay-opt .radio.on{border-color:var(--green)}
.tf-pay-opt .radio.on::after{content:'';width:12px;height:12px;border-radius:50%;background:var(--green)}
.tf-note{color:var(--grey);font-size:13px;line-height:1.5;margin-top:16px;text-align:center}

/* Pied : boutons d'action */
.tf-foot{display:flex;gap:12px;padding:12px 20px calc(18px + var(--safe-bot));background:var(--bg)}
.tf-foot .btn{flex:1}

/* Sélecteur d'adresse par-dessus le parcours */
.tf-picker{position:absolute;inset:0;z-index:50;background:var(--bg);display:flex;flex-direction:column}

/* =====================================================================
   TRAJETS PLANIFIÉS (mode Zzz) : liste sur l'accueil + feuille de détail
   ===================================================================== */
.plan-list{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.plan-row{display:flex;align-items:center;gap:14px;background:#fff;border-radius:20px;padding:14px 16px;
  box-shadow:var(--shadow-s);cursor:pointer;transition:transform .18s var(--ease)}
.plan-row:active{transform:scale(.98)}
/* Pastille de date */
.pr-date{flex:0 0 auto;width:50px;text-align:center;background:var(--lime-soft);border-radius:14px;padding:8px 0}
.pr-date b{display:block;font-size:20px;font-weight:800;line-height:1;color:var(--ink)}
.pr-date small{display:block;font-size:11px;font-weight:700;color:var(--green-dark);text-transform:uppercase;margin-top:2px}
/* Trajet */
.pr-main{flex:1;min-width:0}
.pr-main b{display:block;font-size:16px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-main small{display:block;font-size:12.5px;color:var(--grey);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-main .pr-time{color:var(--green-dark);font-weight:650;margin-top:2px}
/* État + chevron */
.pr-side{flex:0 0 auto;display:flex;align-items:center;gap:6px}
.pr-badge{font-size:11.5px;font-weight:800;padding:5px 10px;border-radius:100px;
  background:var(--card-2);color:var(--grey);white-space:nowrap}
.pr-badge.on{background:var(--lime);color:var(--lime-ink)}
.pr-arrow{width:18px;height:18px;stroke:var(--grey-2);flex:0 0 auto}

/* Feuille de détail */
.ps-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.ps-when{font-size:17px;font-weight:800;letter-spacing:-.01em}
.ps-legs .addr{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.ps-legs .lbl b{display:block;font-size:15px;font-weight:700}
.ps-legs .lbl small{color:var(--grey-2);font-size:12.5px}
.ps-info{background:var(--bg-alt);border-radius:16px;padding:14px 16px;font-size:13.5px;color:var(--ink-soft);
  line-height:1.5;margin:6px 0 18px}