/* ═══════════════════════════════════════════════════════════════════
   LEON — design system booking · v2 « Escorte »
   Hérite du vocabulaire Reelay (booking/index.html) : mêmes noms de
   classes, mêmes tokens. Seul le thème change + composants sécurité.
   Aucun hexadécimal hors de ce fichier (Blueprint v3 §2.3).

   v2 — optimisations issues des références (concepts Uber + vidéo) :
   · Zone « showroom » claire dans les cartes service (.vc-img)
   · Nouveaux tokens : --lux (champagne), --show, --glass, --route-*
   · Nouveaux composants : .tkr (suivi agent), .convoy (escorte moto),
     .seg (contrôle segmenté), .navpill (nav flottante), .bnr (bannières),
     .avx / .rate / .plate / .tier (identité agent & véhicule)
   · Discipline champagne : réservé à --lux → tier premium, ETA de
     suivi, liens de convoi, tracé d'arrivée. Partout ailleurs : blanc.
   ═══════════════════════════════════════════════════════════════════ */

/* ── TOKENS ──────────────────────────────────────────────────────── */
:root{
  /* Surfaces — near-black opérationnel */
  --bg:#08080a;   --bg2:#0f0f12;
  --bgc:#131317;  --bgc2:#1c1c22;

  /* Texte */
  --fg:#f6f6f8;
  --fg2:rgba(246,246,248,.58);
  --fg3:rgba(246,246,248,.30);

  /* Accent — blanc pur. Un seul geste fort, tout le reste au calme. */
  --acc:#ffffff;
  --acc-d:#d8d8dc;
  --acc-pale:rgba(255,255,255,.08);

  /* Luxe — champagne. Usage strictement limité (voir en-tête). */
  --lux:#d9c48f;
  --lux-d:#b39d6a;
  --lux-pale:rgba(217,196,143,.12);

  /* Showroom — zone claire des cartes véhicule (réf. cartes Uber) */
  --show:#e9ebef;
  --show2:#f8f9fb;
  --show-fg:#101116;

  /* Verre — panneaux de suivi posés sur la carte (réf. montre) */
  --glass:rgba(15,15,18,.68);
  --glass2:rgba(19,19,23,.82);

  /* Enforcement — tokens de surface pour la couche app (ex-hex bruts).
     Clay unifié (pastilles/renders), rouge atténué, ombre pure. */
  --clay-hi:#20222b;   /* dégradé claymorphique — haut */
  --clay-lo:#0c0d12;   /* dégradé claymorphique — bas */
  --sig-soft:#ff8f8f;  /* rouge atténué (icône d'avertissement) */
  --ink:#000;          /* ombre pure (cadre device, profondeur) */
  --elev:#1c1d25;      /* surface élevée (pastilles d'étape, barre profil) */
  --lux-soft:rgba(217,196,143,.45); /* halo champagne (glow orbital) */
  --ease:cubic-bezier(.25,1,.5,1);  /* courbe UX transverse */
  --gap-stack:12px;    /* espace entre cartes empilées */

  /* Bordures */
  --brd:rgba(255,255,255,.09);
  --brd2:rgba(255,255,255,.20);

  /* CTA */
  --cta:#ffffff; --ctaf:#08080a;

  /* Statuts — promus en tokens (étaient en dur dans Reelay) */
  --ok:#2fbf71;          /* disponibilité, ETA */
  --ok-pale:rgba(47,191,113,.10);
  --sig:#ff453a;         /* live / 24-7 uniquement */
  --warn:#f0a020;

  /* Tracé d'itinéraire (Leaflet lit ces tokens via leon.js) */
  --route-a:#f6f6f8;     /* départ */
  --route-b:#d9c48f;     /* arrivée — seul dégradé autorisé */
  --route-halo:rgba(8,8,10,.35);

  /* Rayons & ombres */
  --r:12px; --rl:18px; --rxl:24px;
  --sh:0 4px 24px rgba(0,0,0,.55);
  --sh-up:0 -6px 30px rgba(0,0,0,.55);

  /* Typo */
  --body:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,monospace;

  /* Safe areas iOS */
  --sat:env(safe-area-inset-top,0px);
  --sar:env(safe-area-inset-right,0px);
  --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px);
}

/* ── BASE ────────────────────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden}
body{
  font-family:var(--body);background:var(--bg);color:var(--fg);
  font-size:16px;line-height:1.45;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
button,input,select,textarea{font-family:var(--body);color:inherit}
button{background:none;border:none;cursor:pointer}
svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
svg.fill,svg .fill{fill:currentColor;stroke:none}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* Utilitaires transverses */
.k{font-size:.54rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--fg3)}
.glass{background:var(--glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--brd)}

/* ── MAP ─────────────────────────────────────────────────────────── */
#map{position:fixed;inset:0;z-index:1;background:var(--bg2)}
.leaflet-container{background:var(--bg2)!important;font-family:var(--body)!important}
.leaflet-control-attribution{display:none}
/* Variante tuiles claires (réf. vidéo & concepts) : les chips sombres
   posées sur fond clair gardent leur contraste sans autre règle. */
[data-map="light"] #map,[data-map="light"] .leaflet-container{background:var(--show)!important}

/* Halo position utilisateur */
.upulse{width:16px;height:16px;border-radius:50%;background:var(--acc);position:relative;box-shadow:0 0 0 4px rgba(255,255,255,.14)}
.upulse::after{content:'';position:absolute;inset:-8px;border-radius:50%;border:1.5px solid var(--acc);opacity:.5;animation:ping 2.2s ease-out infinite}
@keyframes ping{0%{transform:scale(.6);opacity:.6}100%{transform:scale(1.7);opacity:0}}

/* Marqueur unité disponible */
.vdot{
  display:flex;align-items:center;gap:.28rem;white-space:nowrap;
  background:var(--bgc);border:1px solid var(--brd2);
  border-radius:999px;padding:.16rem .48rem;
  font-size:.6rem;font-weight:700;color:var(--fg);
  box-shadow:0 2px 10px rgba(0,0,0,.5);
}
.vdot-pulse{width:5px;height:5px;border-radius:50%;background:var(--ok);animation:pulse 2s ease infinite;flex-shrink:0}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
/* v2 — marqueur moto d'escorte (Motoguard) */
.vdot.moto{border-color:var(--lux-d)}
.vdot.moto .vdot-pulse{background:var(--lux)}
.agent-chip{
  display:flex;align-items:center;gap:.38rem;white-space:nowrap;
  background:var(--bgc);border:1px solid var(--brd2);
  border-radius:999px;padding:.2rem .5rem .2rem .2rem;
  box-shadow:0 3px 14px rgba(0,0,0,.55);
}
.aca{
  width:20px;height:20px;border-radius:50%;background:var(--acc);color:var(--ctaf);
  display:flex;align-items:center;justify-content:center;
  font-size:.52rem;font-weight:800;flex-shrink:0;
}
.acn{font-size:.62rem;font-weight:700;line-height:1.1}
.act{font-size:.54rem;color:var(--ok);font-weight:700}

/* ── TOP BAR ─────────────────────────────────────────────────────── */
.top{
  position:fixed;top:0;left:0;right:0;z-index:300;
  padding-top:calc(var(--sat) + .5rem);
  padding-left:calc(var(--sal) + .65rem);
  padding-right:calc(var(--sar) + .65rem);
  padding-bottom:.3rem;
  pointer-events:none;
}
.top::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,var(--bg) 0%,var(--bg) 55%,transparent 100%);
  opacity:.9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:-1;
}
.brand-row{display:flex;align-items:center;gap:.45rem;margin-bottom:.32rem;pointer-events:auto}
.brand{
  font-weight:800;font-size:.95rem;letter-spacing:.14em;
  color:var(--fg);line-height:1;text-transform:uppercase;
}
.status-pill{
  display:inline-flex;align-items:center;gap:.28rem;
  background:var(--bgc2);border:1px solid var(--brd);
  border-radius:999px;padding:.14rem .48rem;
  font-size:.58rem;font-weight:700;color:var(--fg2);letter-spacing:.02em;
}
.sig-dot{width:5px;height:5px;border-radius:50%;background:var(--sig);flex-shrink:0;animation:pulse 1.6s ease infinite}
.city-pill{
  display:none;align-items:center;gap:.25rem;margin-left:auto;
  background:var(--bgc2);border:1px solid var(--brd);
  border-radius:999px;padding:.14rem .48rem;
  font-size:.6rem;font-weight:600;color:var(--fg2);
}
.city-pill.on{display:inline-flex}
.cpulse{width:5px;height:5px;border-radius:50%;background:var(--ok);flex-shrink:0;animation:pulse 2s ease infinite}

/* Carte adresses */
.addr-card{
  background:var(--bgc);border:1px solid var(--brd);
  border-radius:var(--rl);box-shadow:var(--sh);
  pointer-events:auto;overflow:hidden;
}
.af{
  display:flex;align-items:center;gap:.48rem;
  padding:.5rem .72rem;cursor:pointer;
  transition:background .1s;position:relative;
}
.af:hover{background:var(--acc-pale)}
.af+.af{border-top:1px solid var(--brd)}
.af-dot-wrap{width:16px;display:flex;flex-direction:column;align-items:center;gap:2px;flex-shrink:0;color:var(--acc)}
.af-line{width:1.5px;height:6px;background:var(--brd2);border-radius:1px}
.af-text{flex:1;min-width:0}
.af-lbl{font-size:.52rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--fg3);line-height:1;margin-bottom:.06rem}
.af-val{font-size:.8rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--fg);line-height:1.3}
.af-val.ph{color:var(--fg3);font-weight:400;font-size:.78rem}
#af-do{display:none}
#af-do.on{display:flex}
.af-swap-btn{
  width:22px;height:22px;border-radius:50%;
  background:var(--bgc2);border:1px solid var(--brd);
  display:flex;align-items:center;justify-content:center;
  color:var(--fg2);transition:all .12s;flex-shrink:0;
}
.af-swap-btn:hover{border-color:var(--acc);color:var(--acc)}

/* Bouton localiser */
.loc-btn{
  position:fixed;right:calc(var(--sar) + .7rem);z-index:150;
  width:38px;height:38px;border-radius:50%;
  background:var(--bgc);border:1px solid var(--brd);
  display:flex;align-items:center;justify-content:center;
  color:var(--fg2);box-shadow:var(--sh);transition:all .12s;
}
.loc-btn:hover{border-color:var(--acc);color:var(--acc)}
.loc-btn.loading .ic-locate{animation:spinA .8s linear infinite}
@keyframes spinA{to{transform:rotate(360deg)}}

/* ── OVERLAY RECHERCHE ADRESSE ───────────────────────────────────── */
.sov{
  position:fixed;inset:0;z-index:500;background:var(--bg);
  display:none;flex-direction:column;
  padding-top:var(--sat);
}
.sov.on{display:flex;animation:sovUp .16s ease}
@keyframes sovUp{from{opacity:.7;transform:translateY(3px)}to{opacity:1;transform:none}}
.sov-hdr{display:flex;align-items:center;gap:.5rem;padding:.6rem calc(var(--sar)+.8rem) .6rem calc(var(--sal)+.8rem);border-bottom:1px solid var(--brd)}
.sov-back{width:32px;height:32px;border-radius:50%;background:var(--bgc2);border:1px solid var(--brd);display:flex;align-items:center;justify-content:center;color:var(--fg2);flex-shrink:0}
.sov-bar{flex:1;display:flex;align-items:center;gap:.4rem;background:var(--bgc2);border:1.5px solid var(--brd);border-radius:var(--r);padding:.5rem .7rem}
.sov-inp{flex:1;background:none;border:none;outline:none;font-size:.88rem;color:var(--fg);caret-color:var(--acc);min-width:0}
.sov-inp::placeholder{color:var(--fg3)}
.sov-clr{color:var(--fg3);display:none;flex-shrink:0}
.sov-target{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--acc);padding:0 .55rem 0 0;border-right:1px solid var(--brd2);margin-right:.2rem;flex-shrink:0}
.sov-myloc{display:flex;align-items:center;gap:.55rem;padding:.75rem calc(var(--sal)+.9rem);color:var(--acc);font-size:.82rem;font-weight:700;border-bottom:1px solid var(--brd);cursor:pointer}
.sov-myloc:active{background:var(--acc-pale)}
.sov-list{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.sov-list::-webkit-scrollbar{display:none}
.sov-section-lbl{font-size:.54rem;font-weight:700;text-transform:uppercase;letter-spacing:.11em;color:var(--fg3);padding:.8rem calc(var(--sal)+.9rem) .35rem}
.sov-row{display:flex;align-items:center;gap:.6rem;padding:.62rem calc(var(--sal)+.9rem);cursor:pointer;border-bottom:1px solid var(--brd)}
.sov-row:active{background:var(--acc-pale)}
.sov-ico{width:30px;height:30px;border-radius:8px;background:var(--bgc2);display:flex;align-items:center;justify-content:center;color:var(--fg2);flex-shrink:0}
.sov-main{font-size:.82rem;font-weight:600;color:var(--fg);line-height:1.3}
.sov-sub{font-size:.68rem;color:var(--fg2);margin-top:.05rem}
.sov-hint{text-align:center;padding:2rem 1rem;color:var(--fg3);font-size:.78rem}
.qchips{display:flex;gap:.3rem;flex-wrap:wrap;padding:.7rem calc(var(--sal)+.9rem)}
.qch{display:flex;align-items:center;gap:.25rem;background:var(--bgc2);border:1px solid var(--brd);border-radius:999px;padding:.3rem .6rem;font-size:.68rem;font-weight:600;color:var(--fg2);cursor:pointer}
.qch:active{border-color:var(--acc);color:var(--acc)}

/* ── BOTTOM SHEET ────────────────────────────────────────────────── */
.bsh{
  position:fixed;bottom:0;left:0;right:0;z-index:200;
  border-radius:var(--rxl) var(--rxl) 0 0;
  background:var(--bgc);border-top:1px solid var(--brd);
  box-shadow:var(--sh-up);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  display:flex;flex-direction:column;padding:4px 0;
}
.bsh-handle{width:36px;height:3px;border-radius:2px;background:var(--brd2);margin:.45rem auto .2rem;flex-shrink:0}

/* Pills catégories */
.cpills{display:flex;gap:.3rem;overflow-x:auto;scrollbar-width:none;padding:6px calc(var(--sar)+.75rem) 8px calc(var(--sal)+.75rem);flex-shrink:0}
.cpills::-webkit-scrollbar{display:none}
.cpill{
  flex-shrink:0;display:flex;align-items:center;gap:.25rem;
  padding:.26rem .62rem;border-radius:9px;
  background:var(--bgc2);border:1.5px solid var(--brd);
  font-size:.66rem;font-weight:700;color:var(--fg2);
  cursor:pointer;transition:all .12s;white-space:nowrap;letter-spacing:-.01em;
}
.cpill.on{background:var(--acc);color:var(--ctaf);border-color:var(--acc)}
.cpill svg{height:12px;width:12px;flex-shrink:0;display:block}

/* Cartes services — v2 : zone showroom claire (réf. cartes Uber).
   Le pictogramme se pose sur un dégradé platine, l'info reste sombre :
   le contraste clair/sombre EST la signature des références. */
.vcards{
  display:flex;gap:.45rem;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding:.22rem calc(var(--sar)+.75rem) .3rem calc(var(--sal)+.75rem);
  scroll-snap-type:x mandatory;flex-shrink:0;margin-bottom:6px;
}
.vcards::-webkit-scrollbar{display:none}
.vcard{
  flex-shrink:0;width:262px;height:92px;
  background:var(--bgc);border:1.5px solid var(--brd);
  border-radius:var(--r);overflow:hidden;cursor:pointer;
  transition:border-color .15s,transform .08s,box-shadow .15s;
  scroll-snap-align:start;display:flex;
}
.vcard:active{transform:scale(.975)}
.vcard.sel{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-pale)}
.vc-img{
  width:92px;flex-shrink:0;position:relative;
  background:linear-gradient(155deg,var(--show2) 0%,var(--show) 78%);
  display:flex;align-items:center;justify-content:center;padding:.5rem;
  box-shadow:inset -8px 0 14px -12px rgba(0,0,0,.35);
}
.vc-img svg{width:44px;height:44px;color:var(--show-fg);transition:color .15s,transform .15s;stroke-width:1.4}
.vcard:hover .vc-img svg{transform:scale(1.06) translateY(-1px)}
.vcard.sel .vc-img{background:linear-gradient(155deg,var(--show2) 0%,var(--show) 60%,var(--lux-pale) 130%)}
.vc-eta{
  position:absolute;bottom:.4rem;left:.4rem;
  display:flex;align-items:center;gap:.2rem;
  font-size:.55rem;font-weight:700;color:var(--ok);
  border:1px solid var(--ok);border-radius:6px;padding:1px 5px;
  background:var(--show2);
}
.vc-eta-dot{width:4px;height:4px;border-radius:50%;background:var(--ok);flex-shrink:0;animation:pulse 2s ease infinite}
.vc-info{flex:1;padding:.5rem .55rem .45rem;display:flex;flex-direction:column;justify-content:space-between;min-width:0}
.vc-cls{font-size:.5rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--fg3);line-height:1}
.vc-name{font-weight:700;font-size:.78rem;line-height:1.2;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;letter-spacing:-.02em;margin-top:.08rem}
.vc-specs{display:flex;gap:.2rem;flex-wrap:wrap;margin:.16rem 0}
.vsp{font-size:.52rem;font-weight:600;background:var(--bgc2);border-radius:4px;padding:.06rem .28rem;color:var(--fg2);white-space:nowrap}
.vc-ft{display:flex;align-items:center;justify-content:space-between;gap:.2rem}
.vc-pr{font-weight:800;font-size:.86rem;color:var(--fg);letter-spacing:-.03em}
.vc-pr small{font-size:.58rem;font-weight:600;color:var(--fg3);letter-spacing:0}
.vc-btn{background:var(--acc);color:var(--ctaf);border-radius:6px;padding:.2rem .46rem;font-size:.6rem;font-weight:700;white-space:nowrap;flex-shrink:0;letter-spacing:-.01em}
.vcard.sel .vc-btn{background:transparent;color:var(--acc);border:1.5px solid var(--acc)}
/* Variante XL — vitrine, le picto déborde de la zone showroom */
.vcard.xl{width:100%;height:118px}
.vcard.xl .vc-img{width:118px}
.vcard.xl .vc-img svg{width:64px;height:64px;transform:translateY(6px)}
.vcard.xl .vc-name{font-size:.92rem}
.vcard.xl .vc-pr{font-size:1rem}

/* Tier premium — seul badge autorisé à porter le champagne */
.tier{
  display:inline-flex;align-items:center;gap:.22rem;
  font-size:.5rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;
  color:var(--lux);border:1px solid var(--lux-d);border-radius:5px;
  padding:.1rem .32rem;background:var(--lux-pale);white-space:nowrap;
}

/* Ligne durée — spécifique LEON (facturation horaire) */
.durw{
  display:flex;align-items:center;gap:.45rem;
  padding:0 calc(var(--sar)+.75rem) .5rem calc(var(--sal)+.75rem);
  flex-shrink:0;
}
.dur-box{
  flex:1;display:flex;align-items:center;justify-content:space-between;
  background:var(--bgc2);border:1.5px solid var(--brd);border-radius:var(--r);
  padding:.3rem .42rem;gap:.4rem;
}
.dur-lbl{font-size:.5rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--fg3);line-height:1}
.dur-val{font-weight:800;font-size:.92rem;letter-spacing:-.03em;line-height:1.1}
.dur-val small{font-size:.58rem;font-weight:600;color:var(--fg3)}
.dur-btns{display:flex;align-items:center;gap:.3rem}
.cb{
  width:28px;height:28px;border-radius:50%;
  background:var(--bgc);border:1.5px solid var(--brd);
  display:flex;align-items:center;justify-content:center;
  color:var(--fg);font-weight:700;font-size:.9rem;transition:all .12s;flex-shrink:0;
}
.cb:hover{border-color:var(--acc);color:var(--acc)}
.cb:disabled{opacity:.25;pointer-events:none}
.dur-chips{display:flex;gap:.25rem;flex-shrink:0}
.dch{
  background:var(--bgc2);border:1.5px solid var(--brd);border-radius:8px;
  padding:.3rem .45rem;font-size:.64rem;font-weight:700;color:var(--fg2);transition:all .12s;
}
.dch.on{border-color:var(--acc);color:var(--acc);background:var(--acc-pale)}

/* Bandeau confiance */
.trust{
  display:flex;align-items:center;gap:.4rem;
  padding:0 calc(var(--sar)+.8rem) .45rem calc(var(--sal)+.8rem);
  font-size:.6rem;color:var(--fg3);font-weight:600;
}
.trust b{color:var(--ok);font-weight:700}

/* CTA */
.bsh-cta{display:none;padding:.3rem calc(var(--sar)+.75rem) calc(.5rem + var(--sab)) calc(var(--sal)+.75rem);flex-shrink:0}
.bsh-cta.on{display:block}
.cta-pill{
  width:100%;height:54px;background:var(--cta);color:var(--ctaf);
  border-radius:var(--rl);display:flex;align-items:center;
  padding:0 1.1rem;transition:opacity .12s,transform .1s;
  box-shadow:0 4px 22px rgba(0,0,0,.5);gap:.65rem;position:relative;overflow:hidden;
}
.cta-pill:active{opacity:.92;transform:scale(.99)}
.cta-left{display:flex;flex-direction:column;flex:1;align-items:flex-start;gap:.06rem;min-width:0}
.cta-name{font-size:.88rem;font-weight:800;letter-spacing:-.03em;line-height:1.15}
.cta-sub{font-size:.62rem;font-weight:500;opacity:.72;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cta-price{font-size:1.1rem;font-weight:800;letter-spacing:-.03em;flex-shrink:0}
.cta-arrow{width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* ── FLOW MODAL ──────────────────────────────────────────────────── */
.fov{position:fixed;inset:0;z-index:600;background:rgba(0,0,0,.62);display:none;align-items:flex-end}
.fov.on{display:flex;animation:fovFade .16s ease}
@keyframes fovFade{from{opacity:0}to{opacity:1}}
.fsheet{
  width:100%;background:var(--bgc);border-radius:var(--rxl) var(--rxl) 0 0;
  border-top:1px solid var(--brd);max-height:94dvh;display:flex;flex-direction:column;
  animation:fshUp .26s cubic-bezier(.22,.61,.36,1);
}
@keyframes fshUp{from{transform:translateY(100%)}to{transform:none}}
.fsh-drag{width:36px;height:3px;border-radius:2px;background:var(--brd2);margin:.48rem auto .14rem;flex-shrink:0}
.fsh-hdr{padding:.38rem calc(var(--sar)+.9rem) .58rem calc(var(--sal)+.9rem);border-bottom:1px solid var(--brd);flex-shrink:0}
.fsh-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:.3rem}
.fsh-title{font-weight:800;font-size:.95rem;letter-spacing:-.03em}
.fsh-x{width:26px;height:26px;border-radius:50%;background:var(--bgc2);border:1px solid var(--brd);display:flex;align-items:center;justify-content:center;color:var(--fg2)}
.fsteps{display:flex;gap:.25rem}
.fsd{height:2.5px;flex:1;border-radius:2px;background:var(--brd);transition:background .2s}
.fsd.done{background:var(--acc-d)}
.fsd.act{background:var(--acc)}
.fbody{flex:1;overflow-y:auto;padding:.8rem calc(var(--sar)+.9rem) .8rem calc(var(--sal)+.9rem);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.fbody::-webkit-scrollbar{display:none}
.ffoot{flex-shrink:0;padding:.58rem calc(var(--sar)+.9rem) calc(.58rem + var(--sab)) calc(var(--sal)+.9rem);border-top:1px solid var(--brd);display:flex;gap:.4rem}
.fbk{width:44px;height:48px;border-radius:var(--r);background:var(--bgc2);border:1px solid var(--brd);display:none;align-items:center;justify-content:center;color:var(--fg2);flex-shrink:0}
.fbk.show{display:flex}
.fnxt{
  flex:1;height:48px;background:var(--cta);color:var(--ctaf);border-radius:var(--r);
  font-weight:800;font-size:.88rem;display:flex;align-items:center;justify-content:center;
  gap:.35rem;letter-spacing:-.02em;
}
.fnxt:disabled{opacity:.25;pointer-events:none}

/* Formulaires */
.fg{margin-bottom:.75rem}
.fl{font-size:.56rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--fg3);margin-bottom:.28rem}
.fi{
  width:100%;background:var(--bgc2);border:1.5px solid var(--brd);border-radius:var(--r);
  padding:.62rem .8rem;font-size:.86rem;color:var(--fg);outline:none;transition:border-color .15s;
}
.fi:focus{border-color:var(--acc)}
.fi::placeholder{color:var(--fg3)}
.fi::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.45}
textarea.fi{resize:none;min-height:74px;line-height:1.45}
.fw{display:flex;gap:.38rem}
.fpfx{background:var(--bgc2);border:1.5px solid var(--brd);border-radius:var(--r);padding:.62rem .5rem;display:flex;align-items:center;min-width:78px}
.fpfx select{background:none;border:none;outline:none;font-size:.74rem;font-weight:700;color:var(--fg);width:100%}
.fpfx select option{background:var(--bgc);color:var(--fg)}

/* Compteurs */
.cr{display:flex;align-items:center;justify-content:space-between;background:var(--bgc2);border:1px solid var(--brd);border-radius:var(--r);padding:.5rem .78rem;margin-bottom:.4rem}
.ci{display:flex;align-items:center;gap:.5rem}
.cic{color:var(--fg2);flex-shrink:0;display:flex}
.cn{font-size:.8rem;font-weight:600}
.cs{font-size:.62rem;color:var(--fg3)}
.cc{display:flex;align-items:center;gap:.4rem}
.cv{font-weight:800;font-size:1rem;min-width:26px;text-align:center;letter-spacing:-.02em}

/* Toggle Maintenant / Programmer */
.billing-toggle{display:grid;grid-template-columns:1fr 1fr;border:1.5px solid var(--brd);border-radius:var(--r);overflow:hidden;margin-bottom:.6rem}
.billing-opt{padding:.58rem .6rem;cursor:pointer;text-align:center;font-size:.76rem;font-weight:700;color:var(--fg2);background:var(--bgc2);transition:all .15s;display:flex;align-items:center;justify-content:center;gap:.35rem}
.billing-opt.on{background:var(--acc);color:var(--ctaf)}
.billing-opt svg{width:14px;height:14px}

/* Options mission */
.amg{display:grid;grid-template-columns:repeat(3,1fr);gap:.3rem;margin-bottom:.3rem}
.amp{display:flex;flex-direction:column;align-items:center;gap:.22rem;background:var(--bgc2);border:1.5px solid var(--brd);border-radius:var(--r);padding:.5rem .25rem;font-size:.6rem;font-weight:600;color:var(--fg2);cursor:pointer;transition:all .12s;text-align:center}
.amp svg{width:16px;height:16px}
.amp.on{border-color:var(--acc);background:var(--acc-pale);color:var(--fg)}
.amp-note{font-size:.6rem;color:var(--warn);line-height:1.4;margin-bottom:.7rem;display:none}
.amp-note.on{display:block}

/* Sélecteur véhicule */
.vehsel{display:flex;gap:.3rem;overflow-x:auto;scrollbar-width:none;padding-bottom:.3rem;margin-bottom:.5rem}
.vehsel::-webkit-scrollbar{display:none}
.vhc{
  flex-shrink:0;min-width:106px;background:var(--bgc2);border:1.5px solid var(--brd);
  border-radius:var(--r);padding:.5rem .55rem;cursor:pointer;transition:all .12s;
}
.vhc.on{border-color:var(--acc);background:var(--acc-pale)}
.vhc-n{font-size:.7rem;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.vhc-t{font-size:.54rem;color:var(--fg3);text-transform:uppercase;letter-spacing:.08em;margin-top:.12rem}
.vhc-p{font-size:.76rem;font-weight:800;margin-top:.25rem}
.vhc-p small{font-size:.55rem;color:var(--fg3);font-weight:600}

/* Paiement */
.popt{display:flex;align-items:center;gap:.55rem;background:var(--bgc2);border:1.5px solid var(--brd);border-radius:var(--r);padding:.62rem .78rem;cursor:pointer;margin-bottom:.4rem;transition:all .12s}
.popt.on{border-color:var(--acc);background:var(--acc-pale)}
.prad{width:15px;height:15px;border-radius:50%;border:1.5px solid var(--brd2);flex-shrink:0;display:flex;align-items:center;justify-content:center}
.popt.on .prad{border-color:var(--acc)}
.popt.on .prad::after{content:'';width:7px;height:7px;background:var(--acc);border-radius:50%}
.pn{font-weight:700;font-size:.8rem;display:flex;align-items:center;gap:.35rem}
.pd{font-size:.66rem;color:var(--fg2);margin-top:.04rem}

/* Récap */
.rchdr{background:var(--bgc2);border:1px solid var(--brd);border-radius:var(--r);padding:.68rem .82rem;margin-bottom:.6rem}
.rcrow{display:flex;justify-content:space-between;gap:1rem;padding:.28rem 0;border-bottom:1px solid var(--brd);font-size:.76rem}
.rcrow:last-child{border-bottom:none}
.rcl{color:var(--fg2);flex-shrink:0}
.rcv{font-weight:600;text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rctot{display:flex;justify-content:space-between;align-items:center;background:var(--acc-pale);border-radius:var(--r);padding:.62rem .82rem;margin-top:.45rem}
.rtl{font-weight:700;font-size:.82rem}
.rtv{font-weight:800;font-size:1.24rem;color:var(--acc);letter-spacing:-.03em}
.rt-note{font-size:.58rem;color:var(--fg3);margin-top:.4rem;line-height:1.45}

/* Lien WhatsApp secondaire */
.wa-link{
  display:flex;align-items:center;justify-content:center;gap:.4rem;
  width:100%;padding:.6rem;margin-top:.2rem;
  border:1px solid var(--brd);border-radius:var(--r);
  background:var(--bgc2);color:var(--fg2);
  font-size:.74rem;font-weight:700;text-decoration:none;transition:all .12s;
}
.wa-link:hover{border-color:var(--ok);color:var(--ok)}
.wa-link svg{width:15px;height:15px}

/* ── FILE DE DÉPLOIEMENT + SUCCÈS ────────────────────────────────── */
.sucov{
  position:fixed;inset:0;z-index:900;background:var(--bg);
  display:none;flex-direction:column;align-items:center;justify-content:center;
  padding:1rem calc(var(--sar)+1rem) calc(1rem+var(--sab)) calc(var(--sal)+1rem);overflow-y:auto;
}
.sucov.on{display:flex;animation:fovFade .25s ease}
.suc-content{width:100%;max-width:420px}
.search-queue{display:flex;flex-direction:column;gap:.4rem;padding:.8rem 0;max-height:56vh;overflow:hidden}
.sq-card{display:flex;align-items:center;gap:.6rem;background:var(--bgc);border:1.5px solid var(--brd);border-radius:var(--r);padding:.55rem .65rem;transition:transform .6s cubic-bezier(.34,1.56,.64,1),opacity .4s}
.sq-card.highlight{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-pale)}
.sq-av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.65rem;color:var(--ctaf);flex-shrink:0;background:var(--acc)}
.sq-info{flex:1;min-width:0}
.sq-name{font-weight:700;font-size:.78rem;letter-spacing:-.01em}
.sq-meta{font-size:.62rem;color:var(--fg3);margin-top:.1rem}
.sq-dist{font-size:.72rem;font-weight:700;color:var(--fg2);flex-shrink:0;text-align:right}
.sq-dist small{display:block;font-size:.55rem;font-weight:500;color:var(--fg3)}
.sq-status{font-size:.66rem;font-weight:700;text-align:center;padding:.5rem 0;color:var(--fg3);animation:fadeUp .4s ease}
.sq-status strong{color:var(--acc)}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.sucring{width:64px;height:64px;border-radius:50%;border:2px solid var(--acc);background:var(--acc-pale);display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;color:var(--acc);animation:popIn .4s cubic-bezier(.34,1.56,.64,1)}
@keyframes popIn{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.suctitle{font-weight:800;font-size:1.2rem;margin-bottom:.3rem;letter-spacing:-.03em;text-align:center}
.sucsub{font-size:.78rem;color:var(--fg2);line-height:1.5;margin:0 auto 1rem;max-width:310px;text-align:center}
.sucref{background:var(--bgc2);border:1px solid var(--brd);border-radius:var(--r);padding:.3rem .8rem;font-family:var(--mono);font-size:.78rem;color:var(--acc);margin:0 auto .9rem;display:block;width:fit-content;letter-spacing:.06em}
.sucbtns{display:flex;flex-direction:column;gap:.4rem;width:100%;max-width:310px;margin:0 auto}
.sbcall{height:48px;background:var(--cta);color:var(--ctaf);border-radius:var(--rl);font-weight:800;font-size:.88rem;display:flex;align-items:center;justify-content:center;gap:.4rem;text-decoration:none}
.sbnew{height:42px;background:var(--bgc2);border:1px solid var(--brd);color:var(--fg2);border-radius:var(--rl);font-size:.8rem;font-weight:600}

.sp2{display:inline-block;width:13px;height:13px;border:2px solid var(--brd2);border-top-color:var(--acc);border-radius:50%;animation:spinA .7s linear infinite;vertical-align:middle}
.loading-row{padding:.7rem 1rem;color:var(--fg3);font-size:.76rem;width:100%;text-align:center}

/* ═══ v2 — COMPOSANTS SUIVI & ESCORTE ════════════════════════════ */

/* Identité agent & véhicule ─────────────────────────────────────── */
.avx{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  background:var(--acc);color:var(--ctaf);
  display:flex;align-items:center;justify-content:center;
  font-size:.66rem;font-weight:800;letter-spacing:.02em;
  border:1.5px solid var(--brd2);overflow:hidden;
}
.avx img{width:100%;height:100%;object-fit:cover}
.avx.lg{width:44px;height:44px;font-size:.8rem}
.rate{display:inline-flex;align-items:center;gap:.18rem;font-size:.68rem;font-weight:700;color:var(--fg)}
.rate svg{width:11px;height:11px;color:var(--acc)}
.plate{
  font-family:var(--mono);font-size:.62rem;font-weight:600;letter-spacing:.14em;
  color:var(--fg2);background:var(--bgc2);border:1px solid var(--brd2);
  border-radius:5px;padding:.14rem .4rem;white-space:nowrap;
}

/* Carte de suivi — « votre agent arrive » (réf. montre Uber).
   Panneau de verre posé sur la carte, ETA en champagne :
   c'est LE moment où le service devient réel. */
.tkr{
  border-radius:var(--rl);box-shadow:var(--sh);overflow:hidden;
  background:var(--glass2);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid var(--brd);
}
.tkr-eta{
  display:flex;align-items:flex-end;justify-content:space-between;gap:.6rem;
  padding:.7rem .85rem .55rem;
}
.tkr-eta-l .k{margin-bottom:.1rem}
.tkr-eta-v{font-size:1.5rem;font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--lux)}
.tkr-eta-v small{font-size:.72rem;font-weight:700;color:var(--fg2);letter-spacing:0;margin-left:.14rem}
.tkr-dist{
  display:inline-flex;align-items:center;gap:.26rem;
  background:var(--bgc2);border:1px solid var(--brd);border-radius:9px;
  padding:.28rem .5rem;font-size:.62rem;font-weight:700;color:var(--fg2);
}
.tkr-dist b{color:var(--ok)}
.tkr-agent{
  display:flex;align-items:center;gap:.55rem;
  padding:.55rem .85rem;border-top:1px solid var(--brd);
}
.tkr-id{flex:1;min-width:0}
.tkr-name{display:flex;align-items:center;gap:.4rem;font-size:.82rem;font-weight:700;letter-spacing:-.01em}
.tkr-sub{display:flex;align-items:center;gap:.4rem;font-size:.62rem;color:var(--fg2);margin-top:.14rem;flex-wrap:wrap}
.tkr-veh{font-weight:600;white-space:nowrap}
.tkr-act{
  display:flex;gap:.4rem;padding:.55rem .85rem .7rem;border-top:1px solid var(--brd);
}
.tkr-msg{
  flex:1;height:40px;border-radius:999px;
  background:var(--bgc2);border:1px solid var(--brd2);color:var(--fg);
  font-size:.76rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;gap:.4rem;
  transition:all .12s;
}
.tkr-msg:hover{border-color:var(--acc)}
.tkr-call{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  background:var(--cta);color:var(--ctaf);
  display:flex;align-items:center;justify-content:center;
}

/* Convoi Motoguard — signature LEON. Deux motos encadrent le client,
   le flux champagne circule vers l'avant : la formation est vivante. */
.convoy{
  border-radius:var(--rl);border:1px solid var(--brd);background:var(--bgc);
  box-shadow:var(--sh);padding:.75rem .85rem .6rem;overflow:hidden;
}
.cv-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.6rem}
.cv-title{font-size:.8rem;font-weight:800;letter-spacing:-.02em}
.cv-lock{
  display:inline-flex;align-items:center;gap:.26rem;
  font-size:.56rem;font-weight:700;color:var(--ok);
  border:1px solid var(--ok);border-radius:6px;padding:.12rem .4rem;background:var(--ok-pale);
}
.cv-lane{display:flex;align-items:center;gap:.3rem;padding:.15rem 0 .3rem}
.cv-unit{display:flex;flex-direction:column;align-items:center;gap:.28rem;flex-shrink:0;min-width:52px}
.cv-chip{
  width:40px;height:40px;border-radius:50%;
  background:var(--bgc2);border:1.5px solid var(--lux-d);color:var(--lux);
  display:flex;align-items:center;justify-content:center;position:relative;
}
.cv-chip::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--lux-d);opacity:.4;animation:ping 2.4s ease-out infinite}
.cv-unit.client .cv-chip{background:var(--acc);border-color:var(--acc);color:var(--ctaf)}
.cv-unit.client .cv-chip::after{border-color:var(--acc)}
.cv-lbl{font-size:.52rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--fg3);white-space:nowrap}
.cv-unit.client .cv-lbl{color:var(--fg)}
.cv-link{
  flex:1;height:2px;border-radius:2px;min-width:18px;
  background:repeating-linear-gradient(90deg,var(--lux) 0 7px,transparent 7px 14px);
  animation:convoyFlow 1.1s linear infinite;opacity:.75;
}
@keyframes convoyFlow{to{background-position:-14px 0}}
.cv-foot{display:flex;align-items:center;gap:.35rem;font-size:.6rem;color:var(--fg3);font-weight:600;border-top:1px solid var(--brd);padding-top:.5rem}
.cv-foot b{color:var(--fg2)}

/* Contrôle segmenté (réf. CAR · BIKE · SCOOT) */
.seg{
  display:inline-flex;gap:.2rem;padding:.2rem;
  background:var(--bgc2);border:1px solid var(--brd);border-radius:999px;
}
.seg-btn{
  padding:.42rem .95rem;border-radius:999px;
  font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--fg2);transition:all .15s;white-space:nowrap;
}
.seg-btn.on{background:var(--acc);color:var(--ctaf)}
.seg.grow{display:flex}
.seg.grow .seg-btn{flex:1;text-align:center}

/* Navigation flottante (réf. vidéo — pill sombre, actif en blanc) */
.navpill{
  display:flex;align-items:center;gap:.15rem;
  padding:.3rem;border-radius:999px;
  background:var(--glass2);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid var(--brd);box-shadow:var(--sh);
  width:fit-content;
}
.navpill.fixed{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--sab) + .8rem);z-index:250}
.np-btn{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  color:var(--fg2);transition:all .15s;position:relative;
}
.np-btn.on{background:var(--acc);color:var(--ctaf)}
.np-btn .np-dot{position:absolute;top:7px;right:7px;width:6px;height:6px;border-radius:50%;background:var(--sig);border:1.5px solid var(--bgc)}

/* Bannières services (réf. vidéo — « Delivery to the Hotel ») */
.bnrs{display:flex;gap:.45rem;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}
.bnrs::-webkit-scrollbar{display:none}
.bnr{
  flex-shrink:0;width:210px;scroll-snap-align:start;
  display:flex;align-items:center;gap:.55rem;
  background:var(--bgc);border:1px solid var(--brd);border-radius:var(--rl);
  padding:.65rem .7rem;cursor:pointer;transition:border-color .15s;
  position:relative;overflow:hidden;
}
.bnr::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brd2)}
.bnr:hover{border-color:var(--brd2)}
.bnr.lux::before{background:linear-gradient(180deg,var(--lux),var(--lux-d))}
.bnr-ic{
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(155deg,var(--show2),var(--show));color:var(--show-fg);
  display:flex;align-items:center;justify-content:center;
}
.bnr-t{flex:1;min-width:0}
.bnr-n{display:block;font-size:.74rem;font-weight:700;letter-spacing:-.01em;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.bnr-s{display:block;font-size:.6rem;color:var(--fg3);margin-top:.08rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.bnr-ar{color:var(--fg3);flex-shrink:0}

/* ── DESKTOP ─────────────────────────────────────────────────────── */
@media (min-width:820px){
  .top{max-width:400px;left:1rem;right:auto}
  .bsh{left:1rem;right:auto;bottom:1rem;width:400px;border-radius:var(--rxl);border:1px solid var(--brd)}
  .loc-btn{right:1.2rem}
  .fsheet{max-width:440px;margin:0 auto 1rem;border-radius:var(--rxl)}
  .fov{align-items:center;justify-content:center}
  .fsheet{max-height:86vh}
  .tkr,.convoy{max-width:400px}
  .navpill.fixed{bottom:1.2rem}
}

/* ═══ v2 — VISUELS CLAYMORPHIQUES (renders 3D) ═══════════════════
   Additif. Traitement clay + voile de verre pour les images, sans
   toucher au reste du système. Utilisé par .vc-img.clay, .clay-hero,
   .vhc-ph.clay. Sur un socle near-black, l'objet garde sa propre lueur. */
.vc-img.clay{
  background:
    radial-gradient(72% 60% at 50% 118%,rgba(255,255,255,.05),transparent 70%),
    linear-gradient(158deg,#20222b 0%,#141620 60%,#0c0d12 100%);
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,.08),
    inset 0 -12px 18px rgba(0,0,0,.5),
    inset -8px 0 14px -12px rgba(0,0,0,.55);
  padding:0;overflow:hidden;
}
.vc-img.clay svg{width:40px;height:40px;color:var(--fg2);stroke-width:1.5;
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.55))}
.vc-photo{width:100%;height:100%;object-fit:cover;object-position:50% 46%;
  transition:transform .5s cubic-bezier(.22,1,.36,1)}
.vcard:hover .vc-photo{transform:scale(1.06)}
.vcard.sel .vc-img.clay{box-shadow:
  inset 0 2px 1px rgba(255,255,255,.1),
  inset 0 -12px 18px rgba(0,0,0,.5),
  inset 0 0 0 1.5px var(--acc)}
/* voile de verre en diagonale */
.vc-img.clay::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(150deg,rgba(255,255,255,.14),transparent 42%);mix-blend-mode:overlay}
/* pastille « voir la fiche » */
.vc-info-tap{position:absolute;z-index:2;top:.34rem;right:.34rem;width:18px;height:18px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--fg);
  background:var(--glass2);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid var(--brd2);opacity:0;transform:scale(.6);transition:all .16s}
.vc-img.clay:hover .vc-info-tap,.vcard.sel .vc-info-tap{opacity:1;transform:none}

/* Hero claymorphique dans la fiche service (drawer d'info) */
.clay-hero{position:relative;height:186px;border-radius:var(--rl);overflow:hidden;margin-bottom:.8rem;
  display:flex;align-items:flex-end;
  background:
    radial-gradient(78% 62% at 50% 108%,rgba(255,255,255,.06),transparent 68%),
    linear-gradient(160deg,#20222b 0%,#141620 58%,#0b0c11 100%);
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,.09),
    inset 0 -18px 26px rgba(0,0,0,.55),
    0 20px 40px -24px rgba(0,0,0,.9);
}
.clay-hero::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(152deg,rgba(255,255,255,.12),transparent 40%);mix-blend-mode:overlay}
.clay-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%;z-index:0}
.clay-hero-ic{width:78px;height:78px;color:var(--fg2);stroke-width:1.2;position:relative;z-index:0;margin:auto;
  filter:drop-shadow(0 12px 12px rgba(0,0,0,.6))}
.clay-hero-eta{position:absolute;z-index:2;left:.6rem;bottom:.6rem;
  display:inline-flex;align-items:center;gap:.28rem;border-radius:8px;padding:.2rem .5rem;
  font-size:.6rem;font-weight:700;color:var(--ok)}
.clay-hero-tier{position:absolute;z-index:2;right:.6rem;top:.6rem}
.det-cls{font-size:.54rem;font-weight:700;text-transform:uppercase;letter-spacing:.11em;color:var(--fg3);margin-bottom:.25rem}
.det-desc{font-size:.82rem;color:var(--fg2);line-height:1.55;margin-bottom:.2rem}

/* Vignette render dans le sélecteur de véhicule */
.vhc-ph.clay{display:block;width:100%;height:46px;border-radius:9px;overflow:hidden;margin-bottom:.35rem;position:relative;
  background:linear-gradient(158deg,#20222b,#0c0d12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 -6px 10px rgba(0,0,0,.5)}
.vhc-ph.clay img{width:100%;height:100%;object-fit:cover;object-position:50% 44%}
.vhc-ph.clay::before{content:'';position:absolute;inset:0;background:linear-gradient(150deg,rgba(255,255,255,.12),transparent 45%);mix-blend-mode:overlay}
.vhc{min-width:150px}

/* ═══ v3 — DEPLOY : agent référent (écran de confirmation) ═══════════
   Complète le composant « Confirmation » du showroom (deploy-hero était
   référencé sans définition). Bandeau claymorphique de l'agent dédié :
   la file de recherche devient l'équipe assignée. Couleurs = tokens. */
.deploy-hero{display:flex;align-items:center;gap:.7rem;padding:.8rem;border-radius:var(--rl);position:relative;overflow:hidden;
  background:
    radial-gradient(82% 130% at 0% 0%,rgba(217,196,143,.12),transparent 60%),
    linear-gradient(158deg,#20222b 0%,#141620 60%,#0c0d12 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 -10px 16px rgba(0,0,0,.45),0 16px 30px -22px rgba(0,0,0,.9)}
.deploy-hero::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(150deg,rgba(255,255,255,.10),transparent 42%);mix-blend-mode:overlay}
.dh-av{width:46px;height:46px;border-radius:14px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:1rem;color:var(--ctaf);z-index:1;
  background:linear-gradient(150deg,var(--lux),var(--lux-d));box-shadow:0 6px 14px -6px rgba(217,196,143,.5)}
.dh-info{flex:1;min-width:0;z-index:1}
.dh-name{font-size:.92rem;font-weight:800;letter-spacing:-.02em;display:flex;align-items:center;gap:.4rem}
.dh-meta{font-size:.66rem;color:var(--fg2);margin-top:.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dh-eta{text-align:right;flex-shrink:0;z-index:1}
.dh-eta b{display:block;font-size:1.05rem;font-weight:800;letter-spacing:-.03em;color:var(--ok)}
.dh-eta small{font-size:.52rem;text-transform:uppercase;letter-spacing:.08em;color:var(--fg3)}

/* ── Utilitaire clay réutilisable — bloc-icône claymorphique ─────────
   Même recette que .vc-img.clay, exposée en classe autonome pour les
   contextes hors carte service (rail de la carte, cartes véhicule).
   La hauteur est fixée par le consommateur (dimension, pas couleur). */
.clay-ic{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:12px;
  background:
    radial-gradient(72% 60% at 50% 118%,rgba(255,255,255,.05),transparent 70%),
    linear-gradient(158deg,#20222b 0%,#141620 60%,#0c0d12 100%);
  box-shadow:inset 0 2px 1px rgba(255,255,255,.08),inset 0 -12px 18px rgba(0,0,0,.5)}
.clay-ic::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(150deg,rgba(255,255,255,.14),transparent 42%);mix-blend-mode:overlay}
.clay-ic svg{color:var(--fg2);stroke-width:1.5;filter:drop-shadow(0 5px 7px rgba(0,0,0,.55))}

/* ═══════════════════════════════════════════════════════════════════════════
   ENFORCEMENT — application stricte du contrat (§3 lisibilité · §4 tactile).
   Chargé en fin de leon.css → gagne sur les déclarations précédentes.
   Additif : ne touche PAS aux cartes à hauteur fixe (rail service, véhicules) —
   le passage du corps à 15–24px (§3) impose un re-dimensionnement par écran,
   traité en sprint dédié.
   ═══════════════════════════════════════════════════════════════════════════ */

/* §4 — cibles tactiles ≥ 44px. Halo de touche invisible (visuel inchangé),
   ciblé sur les contrôles réels de la PWA sous 44px : croix de feuille,
   boutons de segment (durée / agents). */
.fsh-x,.seg-btn{position:relative}
.fsh-x::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%}
.seg-btn::after{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  height:44px}

/* §3 — plancher de lisibilité. Le contrat fixe les libellés majuscules (kickers)
   à 12px (0.75rem) ; 11px est réservé aux micro-badges/ETA. On relève donc les
   kickers du ~8–9px actuel à 12px. `!important` = plancher dur (couche
   d'enforcement), garanti face aux règles inline composées de index.html.
   Cartes à hauteur fixe (rail service, véhicules) exclues → sprint relayout. */
.k,.af-lbl,.dur-lbl,.grp-k,.p-k,.cfg-lbl,.conf-lbl,.enc{font-size:.75rem!important}
/* onglets : libellé relevé à 12px (descente 13px pleine = sprint relayout). */
.tab{font-size:.75rem!important}
.tab span:last-child{white-space:nowrap}

/* ═══════════════════════════════════════════════════════════════════════════
   SPRINT — assets réels · carte Leaflet · UX (photos, compteur, passe boutons).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Photos réelles dans les pastilles clay (rail, véhicules) — sous le voile verre
   (.clay-ic::before reste au-dessus, z-index:1). */
.clay-ic .clay-ph,.clay-ic>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%;z-index:0}

/* Compteur durée : boutons stylés (alignés sur le compteur canonique .cb) +
   icônes ligne Lucide centrées (remplacent les glyphes − / +). */
.dur-btn{width:30px;height:30px;border-radius:50%;background:var(--bgc);border:1.5px solid var(--brd);display:flex;align-items:center;justify-content:center;color:var(--fg);cursor:pointer;flex-shrink:0;transition:border-color .12s,color .12s,transform .1s}
.dur-btn svg{width:15px;height:15px}
.dur-btn:hover{border-color:var(--acc);color:var(--acc)}
.dur-btn:active{transform:scale(.92)}

/* Passe boutons : un peu plus petits, rayon un peu moindre (fontes inchangées). */
.cmd-cta{height:55px;border-radius:15px}

/* Léger twist shadcn : anneau de focus discret (offset + hairline), ambiance gardée. */
.cmd-cta:focus-visible,.cta-pill:focus-visible,.fnxt:focus-visible,.seg-btn:focus-visible,.dur-btn:focus-visible,.bnr:focus-visible,.smini:focus-visible,.vcard:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--brd2)}

/* ═══════════════════════════════════════════════════════════════════════════
   PROFIL — glow orbital de complétion (§6.9, porté de polish.css).
   Bordure conique champagne animée sur les étapes à faire (respire) ; l'étape
   complétée passe au gris et éteint le halo. #fff remplacé par var(--acc).
   ═══════════════════════════════════════════════════════════════════════════ */
.pf-fill{margin:14px 0 4px}
.pf-fill-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
.pbar{height:6px;border-radius:3px;background:var(--elev);overflow:hidden;margin:8px 0 12px}
.pbar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--lux-d),var(--lux));transition:width .6s var(--ease);width:0}
.pstack{display:flex;flex-direction:column;gap:var(--gap-stack)}
.pcard{position:relative;border-radius:var(--r);padding:1.6px;overflow:hidden;isolation:isolate;transition:transform .18s var(--ease);cursor:pointer;width:100%;text-align:left;background:none;border:none;font-family:inherit;color:inherit;display:block}
.pcard:active{transform:scale(.985)}
.pcard::before{content:"";position:absolute;z-index:-1;inset:-60%;background:conic-gradient(from 0deg,transparent 0 60%,var(--lux) 74%,var(--acc) 82%,var(--lux) 90%,transparent 100%);animation:orbit 4.2s linear infinite}
.pcard.done::before{animation:none;background:var(--brd)}
.pcard:not(.done){box-shadow:0 0 26px -8px var(--lux-soft);animation:breathe 3.4s ease-in-out infinite}
@keyframes orbit{to{transform:rotate(360deg)}}
@keyframes breathe{0%,100%{box-shadow:0 0 22px -10px var(--lux-soft)}50%{box-shadow:0 0 34px -6px var(--lux-soft)}}
.pcard-in{position:relative;display:flex;align-items:center;gap:12px;border-radius:calc(var(--r) - 1.6px);background:var(--bgc);padding:14px}
.pstep{width:38px;height:38px;border-radius:12px;flex-shrink:0;display:grid;place-items:center;background:var(--elev);border:1px solid var(--brd2);color:var(--lux)}
.pstep svg{width:17px;height:17px}
.pcard.done .pstep{background:var(--ok-pale);border-color:var(--ok);color:var(--ok)}
.ptxt{flex:1;min-width:0}
.ptitle{font-size:.86rem;font-weight:500;letter-spacing:-.02em}
.psub{font-size:.72rem;color:var(--fg2);font-weight:400;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcta{flex-shrink:0;color:var(--fg3);display:flex}
.pcta svg{width:16px;height:16px}
.pcard.done .pcta{color:var(--ok)}

/* Modale d'édition d'étape (slide-up) */
.pmodal{position:absolute;inset:0;z-index:560;background:rgba(0,0,0,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:flex;align-items:flex-end;opacity:0;pointer-events:none;transition:opacity .3s cubic-bezier(.4,0,.2,1)}
.pmodal.on{opacity:1;pointer-events:auto}
.pmsheet{width:100%;background:var(--bg2);border-top:1px solid var(--brd2);border-radius:var(--rxl) var(--rxl) 0 0;padding:8px 18px calc(20px + var(--sab));transform:translateY(100%);transition:transform .42s var(--ease);max-height:86%;overflow-y:auto}
.pmodal.on .pmsheet{transform:none}
.pm-grab{width:38px;height:4px;border-radius:3px;background:var(--brd2);margin:6px auto 14px}
.pm-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.pm-hd h3{font-size:1.05rem;font-weight:700;letter-spacing:-.03em}

/* ═══════════════════════════════════════════════════════════════════════════
   Réparations + refonte : hero de drawer pleine largeur (nom overlay) +
   overlay d'édition d'adresse (géolocalisation restaurée).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Drawer service — hero pleine largeur, nom/classe/prix en overlay sur la photo */
.det-hero{position:relative;height:200px;border-radius:var(--rl);overflow:hidden;margin-bottom:14px;display:block}
.det-hero .clay-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%;z-index:0}
.det-hero .clay-hero-ic{position:relative;z-index:0;margin:auto}
.det-hero-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:32px 16px 14px;background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.55) 42%,transparent 100%)}
.det-hero-cls{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.7)}
.det-hero-name{font-size:1.5rem;font-weight:800;letter-spacing:-.03em;line-height:1.08;margin-top:3px;color:var(--acc)}
.det-hero-price{font-size:.92rem;font-weight:800;margin-top:5px;color:var(--acc)}
.det-hero-price small{font-size:.62rem;font-weight:600;color:rgba(255,255,255,.65)}
.det-hero .clay-hero-eta{top:.6rem;left:.6rem;bottom:auto;color:var(--ok)}
.det-hero .clay-hero-tier{top:.6rem;right:.6rem}

/* Édition d'adresse */
.addr-edit{margin-left:auto;color:var(--fg3);display:flex;flex-shrink:0}
.addr-edit svg{width:16px;height:16px}
.addr-card{cursor:pointer}
.addr-geo{display:flex;align-items:center;gap:13px;width:100%;text-align:left;background:var(--acc-pale);border:1px solid var(--brd2);border-radius:14px;padding:13px;cursor:pointer;font-family:inherit;color:inherit;transition:transform .1s}
.addr-geo:active{transform:scale(.99)}
.addr-geo .ai{color:var(--acc)}
.addr-inp-row{display:flex;gap:8px}
.addr-inp-row .fi{flex:1;min-width:0}
.addr-ok{flex-shrink:0;padding:0 18px;border-radius:12px;background:var(--acc);color:var(--ctaf);font-weight:800;font-family:inherit;cursor:pointer;border:none}
.addr-saved{cursor:pointer}