:root{--bg:#FAFAF9;--card:#FFFFFF;--fg:#1C1C1A;--muted:#8A8A84;--line:#E7E6E2;
  --accent:#5A45D6;--accent-weak:#EEEBFB;--shadow:0 6px 24px rgba(20,20,26,.12);--r:14px}
:root[data-theme=dark]{--bg:#141517;--card:#1D1F22;--fg:#E8E8E4;--muted:#8C8F94;--line:#2A2D31;
  --accent:#8577F2;--accent-weak:#26243A;--shadow:0 8px 28px rgba(0,0,0,.5)}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--fg);background:var(--bg)}
#map{position:absolute;inset:0}
:root[data-theme=dark] .maplibregl-canvas{filter:brightness(.86) invert(1) hue-rotate(180deg) saturate(.85)}

.search{position:absolute;top:14px;left:14px;right:74px;max-width:420px;z-index:6;display:flex;align-items:center;gap:10px;
  padding:0 14px;height:48px;background:var(--card);border:1px solid var(--line);border-radius:999px;box-shadow:var(--shadow)}
.search .ico{width:20px;height:20px;color:var(--muted);flex:0 0 auto}
#search-input{flex:1;min-width:0;border:none;outline:none;background:none;color:var(--fg);font-size:15px}
#search-input::placeholder{color:var(--muted)}
.lang{flex:0 0 auto;font:600 12px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--fg);
  background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:4px 8px;cursor:pointer}

.results{position:absolute;top:70px;left:14px;right:74px;max-width:420px;z-index:6;max-height:50vh;overflow:auto;
  background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:6px}
.res-row{display:flex;align-items:center;gap:6px;width:100%;background:none;border:none;border-radius:10px;padding:0;color:var(--fg);cursor:pointer}
.res-row:hover{background:var(--bg)}
.res-go{flex:1;display:flex;align-items:center;gap:10px;background:none;border:none;color:var(--fg);text-align:left;padding:10px 8px;font-size:14px;cursor:pointer}
.res-go .ico{width:18px;height:18px;color:var(--accent);flex:0 0 auto}
.res-row>span{padding:10px 8px}
.res-row>.ico{width:18px;height:18px;color:var(--accent);margin-left:8px}
.res-del{background:none;border:none;color:var(--muted);cursor:pointer;padding:8px;border-radius:8px}
.res-del:hover{color:var(--fg);background:var(--bg)}
.res-del .ico{width:16px;height:16px}
.res-empty,.res-hint{color:var(--muted);font-size:12.5px;padding:10px 10px}
.res-hint{border-top:1px solid var(--line);margin-top:4px}

.controls{position:absolute;top:14px;right:14px;z-index:5;display:flex;flex-direction:column;gap:8px}
.grp{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.ctrl{width:48px;height:48px;display:grid;place-items:center;background:none;border:none;color:var(--fg);cursor:pointer;border-bottom:1px solid var(--line)}
.grp .ctrl:last-child{border-bottom:none}
.ctrl:hover{background:var(--bg)}
.ctrl .ico{width:22px;height:22px;color:inherit}
.ctrl.active{color:var(--accent);background:var(--accent-weak)}

.pin,.fav-marker{width:34px;height:38px;display:grid;place-items:center;color:var(--accent);filter:drop-shadow(0 3px 5px rgba(20,20,26,.3))}
.pin .ico,.fav-marker .ico{width:34px;height:38px}
.fav-marker{color:var(--fg);opacity:.7}
.origin-dot{width:16px;height:16px;border-radius:50%;background:var(--accent);border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.4)}

.coord{position:absolute;left:14px;bottom:14px;z-index:5;font:600 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.02em;
  color:var(--fg);background:var(--card);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:8px;padding:9px 12px;box-shadow:var(--shadow)}
.pill-center{position:absolute;left:50%;transform:translateX(-50%);z-index:4;font-size:12px;color:var(--muted);
  background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 14px;box-shadow:var(--shadow);max-width:80vw;text-align:center}
.demo{bottom:14px}
.offline{top:14px;color:var(--fg);border-left:3px solid var(--accent)}

.sheet,.route-panel{position:absolute;left:14px;right:14px;bottom:14px;z-index:7;max-width:460px;margin:0 auto;background:var(--card);
  border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);transform:translateY(160%);transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.sheet{padding:16px}
.sheet.open,.route-panel.open{transform:translateY(0)}
.sheet-head{display:flex;align-items:center;gap:12px}
.sheet-ic{width:44px;height:44px;flex:0 0 auto;display:grid;place-items:center;border-radius:12px;background:var(--accent-weak);color:var(--accent)}
.sheet-ic .ico{width:24px;height:24px}
.sheet-title{font-size:17px;font-weight:650;letter-spacing:-.01em}
.sheet-sub{font:12px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted);margin-top:2px}
.sheet-actions{display:flex;gap:8px;margin-top:14px}
.sheet-actions+.sheet-actions{margin-top:8px}
.btn{flex:1;min-height:44px;border-radius:11px;border:1px solid var(--line);background:var(--bg);color:var(--fg);font-size:14px;font-weight:550;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}
.btn .ico{width:18px;height:18px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.sheet-x{background:none;border:none;color:var(--muted);cursor:pointer;font-size:13px}

.route-panel{padding:14px 16px;max-height:58vh;display:flex;flex-direction:column}
.route-head{display:flex;align-items:center;gap:8px}
.modes{flex:1;display:flex;gap:4px;background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:3px}
.mode{flex:1;min-height:34px;border:none;background:none;color:var(--muted);border-radius:8px;font-size:13px;font-weight:550;cursor:pointer}
.mode.active{background:var(--accent);color:#fff}
.icon-btn{width:38px;height:38px;flex:0 0 auto;display:grid;place-items:center;background:var(--bg);border:1px solid var(--line);border-radius:10px;color:var(--fg);cursor:pointer}
.icon-btn .ico{width:20px;height:20px}
.icon-btn.active{background:var(--accent-weak);color:var(--accent);border-color:var(--accent)}
.pop511 .maplibregl-popup-content{font:500 12.5px/1.45 system-ui;padding:10px 12px;border-radius:10px}
.pop511 b{display:block;font-weight:700;font-size:13px;margin-bottom:3px}
.pop511 small{display:block;color:#666;margin-top:3px}
.pop511 a{color:#1a73e8;font-weight:600}
.route-entraves{margin:6px 0 10px;display:flex;flex-direction:column;gap:6px;max-height:170px;overflow-y:auto;width:100%;box-sizing:border-box}
.entrave-item{padding:8px 10px;border-radius:8px;font:500 12px/1.4 system-ui;border-left:3px solid;box-sizing:border-box;word-break:break-word}
.entrave-item.chantier{background:rgba(255,138,0,.12);border-color:#FF8A00;color:var(--fg)}
.entrave-item.evenement{background:rgba(255,32,32,.12);border-color:#FF2020;color:var(--fg)}
.entrave-item b{display:block;font-weight:700;margin-bottom:2px}
.entrave-item small{color:var(--muted);display:block;margin-top:2px}
.route-summary{font-size:16px;font-weight:650;margin:12px 2px 8px}
.route-steps{overflow:auto;display:flex;flex-direction:column;gap:2px}
.step{display:flex;align-items:flex-start;gap:10px;text-align:left;background:none;border:none;color:var(--fg);padding:10px 8px;border-radius:10px;cursor:pointer;font-size:14px;line-height:1.35}
.step:hover{background:var(--bg)}
.step .ico{width:18px;height:18px;color:var(--accent);flex:0 0 auto;margin-top:1px}

.toast{position:absolute;left:50%;transform:translate(-50%,20px);bottom:74px;z-index:8;opacity:0;pointer-events:none;background:var(--fg);color:var(--bg);
  border-radius:12px;padding:12px 16px;max-width:80vw;box-shadow:var(--shadow);transition:opacity .2s,transform .2s}
.toast.open{opacity:1;transform:translate(-50%,0)}
.toast-title{font-weight:650;font-size:14px}
.toast-body{font-size:13px;opacity:.85;margin-top:2px}

.maplibregl-user-location-dot,.maplibregl-user-location-dot::before{background-color:var(--accent)}
.maplibregl-user-location-dot::after{border-color:var(--accent)}
.maplibregl-user-location-accuracy-circle{background-color:rgba(90,69,214,.15)}
.maplibregl-ctrl-geolocate{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media (max-width:520px){.search,.results{right:70px}.pill-center{font-size:10.5px}}

/* Résultats de recherche : épingles numérotées + distances */
.search-pin{min-width:24px;height:24px;padding:0 6px;display:grid;place-items:center;background:var(--accent);color:#fff;font:700 12px/1 system-ui;border-radius:12px;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.4);cursor:pointer}
.res-num{flex:0 0 auto;width:22px;height:22px;display:grid;place-items:center;background:var(--accent-weak);color:var(--accent);font:700 11px/1 system-ui;border-radius:50%;margin-left:8px}
.res-main{flex:1;padding:10px 8px;text-align:left;color:var(--fg)}
.res-dist{flex:0 0 auto;color:var(--muted);font-size:12px;padding:10px 10px;white-space:nowrap}

/* HUD de navigation : vitesse, altitude, précision GPS, cap */
.navhud{position:absolute;left:12px;top:76px;z-index:5;display:flex;align-items:center;gap:14px;
  padding:10px 14px;background:var(--panel);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 6px 20px rgba(0,0,0,.18);backdrop-filter:blur(8px)}
.nav-item{display:flex;flex-direction:column;align-items:center;min-width:44px}
.nav-val{font:700 17px/1.1 system-ui;color:var(--fg);font-variant-numeric:tabular-nums}
.nav-lbl{font:500 10px/1.3 system-ui;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.nav-coord{font:500 11px/1.3 ui-monospace,monospace;color:var(--muted);padding-left:12px;
  border-left:1px solid var(--line);white-space:nowrap}
@media(max-width:520px){.navhud{left:8px;right:8px;top:70px;gap:8px;padding:8px 10px;justify-content:space-between}
  .nav-coord{display:none}}

/* HUD nav en HAUT, sous la barre de recherche — occupe sa place, ne chevauche rien */
.navhud{left:12px !important;right:12px !important;bottom:auto !important;top:76px !important;
  justify-content:space-around !important}
@media(max-width:520px){.navhud{left:8px !important;right:8px !important;top:70px !important}}

/* HUD compact, centré en haut — pas étiré sur toute la largeur */
.navhud{left:50% !important;right:auto !important;transform:translateX(-50%);
  width:auto !important;justify-content:center !important}
@media(max-width:520px){.navhud{left:50% !important;right:auto !important;transform:translateX(-50%)}}

/* PANNEAUX FLOTTANTS */
.sheet,.route-panel{position:absolute!important;left:16px!important;right:auto!important;bottom:16px!important;top:auto!important;width:340px!important;max-width:calc(100vw - 32px)!important;transform:translateY(140%)!important;border-radius:16px!important;box-shadow:0 8px 28px rgba(0,0,0,.35)!important;padding:14px!important}
.sheet.open,.route-panel.open{transform:translateY(0)!important}
.route-panel{bottom:auto!important;top:16px!important;left:auto!important;right:16px!important;transform:translateY(-140%)!important}
.route-panel.open{transform:translateY(0)!important}
@media(max-width:520px){.sheet{left:8px!important;right:8px!important;width:auto!important;bottom:8px!important}.route-panel{left:8px!important;right:8px!important;width:auto!important;top:auto!important;bottom:8px!important;transform:translateY(140%)!important}}

html,body{overflow:hidden!important;position:fixed!important;width:100%!important;height:100%!important}

/* Itineraire compact sur mobile */
@media(max-width:520px){.route-panel{max-height:38vh!important;overflow-y:auto!important;padding:10px 12px!important}
#route-steps{max-height:22vh;overflow-y:auto}
.route-panel .step{padding:8px 6px!important;font-size:13px!important}
#route-summary{font-size:14px!important;padding:4px 0!important}}

.step .ico.mv{width:22px;height:22px;color:var(--accent);flex:0 0 auto}

.step.current{background:var(--accent-weak);border-left:3px solid var(--accent);font-weight:600}
.snap-arrow{display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))}
.snap-dot{width:14px;height:14px;border-radius:50%;background:var(--accent);border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.4)}

/* Panneau depart/arrivee/arrets */
.route-stops{padding:12px 14px 8px;border-bottom:1px solid var(--line)}
.stop-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;position:relative}
.stop-dot{flex:0 0 auto;width:10px;height:10px;border-radius:50%;border:2px solid var(--accent)}
.stop-dot.start{background:var(--accent)}
.stop-dot.end{background:#E8532E;border-color:#E8532E}
.stop-dot.mid{background:#F5A623;border-color:#F5A623;width:8px;height:8px}
.stop-input{flex:1;min-width:0;padding:9px 10px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--fg);font-size:13px;outline:none}
.stop-input:focus{border-color:var(--accent)}
.stop-me,.stop-del{flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center;border:none;background:transparent;color:var(--muted);cursor:pointer;border-radius:8px;font-size:15px}
.stop-me:hover,.stop-del:hover{background:var(--accent-weak);color:var(--accent)}
.stop-actions{display:flex;gap:8px;margin-top:4px}
.stop-add{flex:1;padding:8px;border:1px dashed var(--line);border-radius:9px;background:transparent;color:var(--muted);font-size:12px;cursor:pointer}
.stop-add:hover{border-color:var(--accent);color:var(--accent)}
.stop-go{flex:1;padding:8px;border:none;border-radius:9px;background:var(--accent);color:#fff;font-size:13px;font-weight:600;cursor:pointer}
.stop-sugg{position:absolute;left:14px;right:14px;top:100%;z-index:20;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.2);max-height:200px;overflow-y:auto}
.sugg-row{display:block;width:100%;padding:9px 12px;border:none;background:transparent;color:var(--fg);text-align:left;font-size:13px;cursor:pointer}
.sugg-row:hover{background:var(--accent-weak)}

/* === PANNEAU NAV : scrollable et compact === */
.route-panel{
  max-height: 70vh !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.route-panel::-webkit-scrollbar{width:6px}
.route-panel::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.route-stops{position:sticky;top:0;background:var(--card);z-index:5;padding:10px 12px 6px}
#route-steps{max-height:none}
.route-panel .step{padding:8px 4px;font-size:13px}
@media(max-width:520px){
  .route-panel{max-height:60vh !important;width:auto !important;left:8px !important;right:8px !important}
  .stop-input{font-size:16px} /* evite le zoom auto iOS */
  .route-stops{padding:8px 10px 4px}
}

/* Popup tour radio */
.tower-pop{font:13px system-ui;color:var(--fg);line-height:1.5}
.pop-title{font-weight:700;font-size:14px;color:var(--accent);margin-bottom:2px}
.pop-site{font-size:12px;color:var(--muted);margin-bottom:6px;padding-bottom:5px;border-bottom:1px solid var(--line)}
.pop-r{font-size:12px;margin:2px 0}
.pop-r b{color:var(--muted);font-weight:600;margin-right:5px}
.pop-warn{margin-top:6px;padding:4px 6px;background:#FFF3CD;color:#856404;border-radius:5px;font-size:11px}
.maplibregl-popup-content{background:var(--card)!important;border:1px solid var(--line);border-radius:10px;padding:12px}

.pop-note{color:var(--muted);font-size:10px}

#btn-live.active{background:var(--accent);color:#fff}
#btn-live{font-size:14px;font-variant-numeric:tabular-nums}
.live-panel .lay-title{display:flex;align-items:center;justify-content:space-between;gap:6px}
.live-close{background:none;border:0;padding:2px;margin-left:auto;cursor:pointer;color:var(--muted);display:flex;align-items:center;border-radius:5px}
.live-close:hover{background:var(--accent-weak);color:var(--fg)}
.live-close .lay-ic{width:14px;height:14px}
.live-panel{top:auto!important;bottom:64px!important;right:12px!important;left:auto!important;width:230px!important;max-height:none!important}
@media(max-width:520px){.live-panel{right:8px!important;left:8px!important;width:auto!important;bottom:70px!important}}

#btn-layers{position:absolute;top:76px;right:12px;z-index:8;width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);border-radius:11px;background:var(--card);color:var(--fg);cursor:pointer;font-size:16px;box-shadow:0 3px 10px rgba(0,0,0,.12)}
#btn-layers:hover{background:var(--accent-weak);color:var(--accent)}
.layers-panel{position:absolute;top:124px;right:12px;z-index:9;width:250px;max-height:65vh;overflow-y:auto;background:var(--card);border:1px solid var(--line);border-radius:13px;box-shadow:0 8px 28px rgba(0,0,0,.22);padding:12px}
.lay-head{display:flex;justify-content:space-between;align-items:center;font:700 14px system-ui;color:var(--fg);margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.lay-close{border:none;background:transparent;color:var(--muted);font-size:20px;cursor:pointer;line-height:1;padding:0 4px}
.lay-group{margin-bottom:12px}
.lay-title{font:600 11px system-ui;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.lay-warn{color:#E8853A;font-weight:400;text-transform:none;letter-spacing:0}
.lay-row{display:flex;align-items:center;gap:8px;padding:6px 4px;font:13px system-ui;color:var(--fg);cursor:pointer;border-radius:7px}
.lay-row:hover{background:var(--accent-weak)}
.lay-row input{accent-color:var(--accent);width:15px;height:15px;cursor:pointer}
.lay-ic{font-size:14px;width:18px;text-align:center}
@media(max-width:520px){.layers-panel{right:8px;left:8px;width:auto;top:120px}#btn-layers{right:8px}}

/* === FIX MENU CALQUES : position + z-index === */
#btn-layers{
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 15 !important;
}
.layers-panel{
  top: 62px !important;
  right: 12px !important;
  z-index: 16 !important;
  pointer-events: auto !important;
}
.layers-panel * { pointer-events: auto !important; }
.lay-row{ user-select: none; }
.lay-row input[type="checkbox"]{
  appearance: auto !important;
  -webkit-appearance: checkbox !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  margin: 0 !important;
}
/* Decaler les autres controles vers le bas */
.ctrls{ top: 62px !important; }
@media(max-width:520px){
  #btn-layers{ top: 8px !important; right: 8px !important; }
  .layers-panel{ top: 56px !important; right: 8px !important; left: 8px !important; width: auto !important; }
  .ctrls{ top: 56px !important; }
}

/* === MENU CALQUES : style autonome === */
#btn-layers{
  position: fixed !important;
  top: 84px !important;
  right: 16px !important;
  z-index: 30 !important;
  width: 44px !important;
  height: 44px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  background: var(--card) !important;
  color: var(--fg) !important;
  cursor: pointer !important;
  font-size: 17px !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.18) !important;
}
#btn-layers:hover{ background: var(--accent-weak) !important; color: var(--accent) !important; }
.layers-panel{
  position: fixed !important;
  top: 134px !important;
  right: 16px !important;
  left: auto !important;
  z-index: 31 !important;
  width: 255px !important;
  max-height: 62vh !important;
  overflow-y: auto !important;
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 32px rgba(0,0,0,.25) !important;
  padding: 13px !important;
}
.layers-panel[hidden]{ display: none !important; }
.lay-row{ display:flex !important; align-items:center !important; gap:9px !important;
  padding:7px 5px !important; font:13px system-ui !important; color:var(--fg) !important;
  cursor:pointer !important; border-radius:7px !important; }
.lay-row:hover{ background: var(--accent-weak) !important; }
.lay-row input[type="checkbox"]{
  appearance: checkbox !important; -webkit-appearance: checkbox !important;
  width:16px !important; height:16px !important; margin:0 !important;
  accent-color: var(--accent) !important; cursor:pointer !important;
  opacity:1 !important; position:static !important; pointer-events:auto !important;
}
.ctrls{ top: 140px !important; }
@media(max-width:520px){
  #btn-layers{ top: 76px !important; right: 10px !important; }
  .layers-panel{ top: 126px !important; right: 10px !important; left: 10px !important; width:auto !important; }
  .ctrls{ top: 132px !important; }
}

/* === MENU CALQUES : fix avec le BON nom de classe (.controls) === */
#btn-layers{
  position:fixed; top:84px; right:16px; z-index:30;
  width:44px; height:44px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:12px;
  background:var(--card); color:var(--fg); cursor:pointer;
  font-size:17px; box-shadow:0 4px 14px rgba(0,0,0,.18);
}
#btn-layers:hover{ background:var(--accent-weak); color:var(--accent); }
.layers-panel{
  position:fixed; top:136px; right:16px; left:auto; z-index:31;
  width:255px; max-height:60vh; overflow-y:auto;
  background:var(--card); border:1px solid var(--line);
  border-radius:14px; box-shadow:0 10px 32px rgba(0,0,0,.25); padding:13px;
}
.layers-panel[hidden]{ display:none; }
.lay-head{ display:flex; justify-content:space-between; align-items:center;
  font:700 14px system-ui; color:var(--fg); margin-bottom:10px;
  padding-bottom:8px; border-bottom:1px solid var(--line); }
.lay-close{ border:none; background:transparent; color:var(--muted);
  font-size:20px; cursor:pointer; line-height:1; padding:0 4px; }
.lay-group{ margin-bottom:12px; }
.lay-title{ font:600 11px system-ui; color:var(--muted);
  text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px; }
.lay-warn{ color:#E8853A; font-weight:400; text-transform:none; letter-spacing:0; }
.lay-row{ display:flex; align-items:center; gap:9px; padding:7px 5px;
  font:13px system-ui; color:var(--fg); cursor:pointer; border-radius:7px; }
.lay-row:hover{ background:var(--accent-weak); }
.lay-row input[type="checkbox"]{
  appearance:checkbox; -webkit-appearance:checkbox;
  width:16px; height:16px; margin:0; accent-color:var(--accent);
  cursor:pointer; opacity:1; position:static; pointer-events:auto;
}
.lay-ic{ font-size:14px; width:18px; text-align:center; }
/* Descendre les contrôles (.controls, pas .ctrls !) */
.controls{ top:190px !important; }
@media(max-width:520px){
  #btn-layers{ top:76px; right:10px; }
  .layers-panel{ top:126px; right:10px; left:10px; width:auto; }
  .controls{ top:180px !important; }
}

svg.lay-ic{width:17px;height:17px;color:var(--muted);flex:0 0 auto}
.lay-row:hover svg.lay-ic{color:var(--accent)}


/* ===================== MODE NAVIGATION ===================== */
/* Bandeaux cachés par défaut (display:none) — affichés UNIQUEMENT via body.navmode */
.nav-top,.nav-bottom{position:absolute;left:12px;right:12px;z-index:8;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 6px 20px rgba(0,0,0,.22);display:none}
.nav-top{top:12px;align-items:center;gap:14px;padding:14px 16px}
.nav-mv-ico{width:34px;height:34px;flex:none;fill:none;stroke:var(--fg)}
.nav-mv-txt{flex:1;min-width:0}
.nav-mv-inst{font:700 17px/1.2 system-ui;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-mv-dist{font:500 13px/1.3 system-ui;color:var(--muted)}
.nav-bottom{bottom:12px;align-items:center;gap:10px;padding:12px 14px}
.nav-remain{flex:1;min-width:0}
.nav-remain-main{font:700 18px/1.1 system-ui;color:var(--fg);font-variant-numeric:tabular-nums}
.nav-remain-sub{font:500 12px/1.3 system-ui;color:var(--muted)}
.nav-btn{display:flex;align-items:center;gap:5px;background:var(--card,var(--panel));color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:8px 12px;font:600 13px/1 system-ui;cursor:pointer}
.nav-btn .ico{width:15px;height:15px}
.nav-btn:active{transform:scale(.97)}
.nav-quit{color:#d98a8a}
/* Afficher les bandeaux SEULEMENT quand body a la classe navmode */
body.navmode .nav-top,body.navmode .nav-bottom{display:flex}
/* Cacher recherche/HUD/feuille/panneau en mode nav (la carte reste visible) */
body.navmode .search,body.navmode .results,body.navmode .sheet,body.navmode .route-panel{display:none!important}
/* HUD GPS gardé visible en navmode, repositionné bas-gauche pour ne pas chevaucher .nav-top */
body.navmode .navhud{display:flex!important;top:86px!important;bottom:auto!important;left:12px!important;right:12px!important;transform:none!important;z-index:6;justify-content:space-between}
@media(max-width:520px){body.navmode .navhud{left:8px!important;right:8px!important;top:82px!important;bottom:auto!important;justify-content:space-between}}
/* Liste des étapes (déroulante en mode nav) */
.nav-steps-pop{position:absolute;left:12px;right:12px;bottom:78px;z-index:9;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px 12px;max-height:38vh;overflow:auto;box-shadow:0 6px 20px rgba(0,0,0,.22)}
.nav-steps-pop[hidden]{display:none}
@media(max-width:520px){.nav-mv-inst{font-size:15px}.nav-remain-main{font-size:16px}}
#map{background:#0B1026}
#map::before,#map::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  opacity:0;transition:opacity .6s ease}
#map.stars-on::before,#map.stars-on::after{opacity:1}
#map::before{
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, #FFF 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 58% 24%, #FFF 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 89% 34%, #FFF 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 45% 91%, #E6EEFF 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 94% 88%, #FFF 50%, transparent 51%);
}
#map::after{
  background-image:
    radial-gradient(1px 1px at 34% 62%, #EAF0FF 50%, transparent 51%),
    radial-gradient(0.9px 0.9px at 77% 71%, #CFE0FF 50%, transparent 51%),
    radial-gradient(1px 1px at 21% 83%, #FFF 50%, transparent 51%),
    radial-gradient(0.8px 0.8px at 67% 8%, #FFF 50%, transparent 51%),
    radial-gradient(1px 1px at 5% 47%, #DCE8FF 50%, transparent 51%);
}
@media (prefers-reduced-motion:reduce){#map::before,#map::after{animation:none}}
#map::before,#map::after{z-index:-1}
#map .maplibregl-canvas-container,#map canvas{position:relative;z-index:1}
#map::before,#map::after{display:none}
#map{background:transparent}
body{background:#05070F}
body::before{content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, #FFF 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 58% 24%, #FFF 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 89% 34%, #FFF 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 45% 91%, #E6EEFF 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 94% 88%, #FFF 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 34% 62%, #EAF0FF 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 77% 71%, #CFE0FF 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 21% 83%, #FFF 50%, transparent 51%);
  background-size:380px 380px;
}
body::after{content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:
    radial-gradient(0.8px 0.8px at 7% 42%, #FFF 50%, transparent 51%),
    radial-gradient(0.7px 0.7px at 28% 11%, #DDE8FF 50%, transparent 51%),
    radial-gradient(0.9px 0.9px at 41% 77%, #FFF 50%, transparent 51%),
    radial-gradient(0.7px 0.7px at 63% 39%, #FFF 50%, transparent 51%),
    radial-gradient(0.8px 0.8px at 82% 15%, #CFE0FF 50%, transparent 51%),
    radial-gradient(0.9px 0.9px at 15% 68%, #FFF 50%, transparent 51%),
    radial-gradient(0.7px 0.7px at 52% 5%, #FFF 50%, transparent 51%),
    radial-gradient(0.8px 0.8px at 71% 93%, #EAF0FF 50%, transparent 51%),
    radial-gradient(0.9px 0.9px at 96% 57%, #FFF 50%, transparent 51%),
    radial-gradient(0.7px 0.7px at 37% 29%, #FFF 50%, transparent 51%);
  background-size:190px 190px;
}

/* Roue de chargement de la recherche.
   Reprise de .spin dans zid.css (ZKID) : anneau discret + tete lumineuse,
   0.7s lineaire. Portee a 20px pour matcher .search .ico, sans decalage.
   Pas de garde prefers-reduced-motion : le reste de l'ecosysteme Zenkari
   tourne sans, on reste coherent. */
.search .spin{width:20px;height:20px;flex:0 0 auto;
  box-sizing:border-box;border-radius:50%;
  border:2px solid color-mix(in srgb, var(--muted) 40%, transparent);
  border-top-color:var(--muted);
  animation:zspin .7s linear infinite}
@keyframes zspin{to{transform:rotate(360deg)}}
.search .spin[hidden]{display:none}

/* La popup MapLibre n'a aucun z-index. Elle est un FRERE du canvas dans
   .maplibregl-map, et le canvas est pose a z-index:1 plus haut dans ce
   fichier — la popup se dessinait donc en dessous, invisible.
   Cette ligne du canvas etait avalee par des accolades non fermees et ne
   s'appliquait pas ; en reparant les accolades je l'ai reveillee et casse
   les popups du meme coup.
   9 place la popup au-dessus du canvas (1), de .controls (5), de .search (6),
   de #sheet (7) et de #toast (8), et sous #btn-layers (30). */
#map .maplibregl-popup{z-index:9}

/* HUD nav : jumeau de la barre de recherche, en haut a droite.
   .search est a top:14px left:14px right:74px height:48px, fond var(--card),
   rayon 999px. On reprend ces valeurs en miroir : meme ligne, meme hauteur.
   right:74px est la meme reserve que .search — ca laisse #btn-layers libre.
   Le fond passe de var(--panel), qui n'existe pas dans :root et rendait le
   HUD transparent, a var(--card) comme la recherche.
   TOUT est scope sous .navhud — .nav-item/.nav-val/.nav-lbl sont globales. */
.navhud{left:auto !important;right:74px !important;top:14px !important;
  bottom:auto !important;transform:none !important;width:auto !important;
  justify-content:flex-end !important;
  height:48px;box-sizing:border-box;gap:14px;padding:0 16px;
  background:var(--card);border:1px solid var(--line);border-radius:999px;
  box-shadow:var(--shadow);backdrop-filter:none;transition:opacity .2s ease}
.navhud .nav-item{flex-direction:row;align-items:baseline;gap:4px;min-width:0}
.navhud .nav-val{font:700 13px/1.2 system-ui}
.navhud .nav-lbl{font:500 9px/1.2 system-ui}
.navhud .nav-coord{font:500 10px/1.2 ui-monospace,monospace;padding-left:12px}
.navhud-t{flex:0 0 auto;display:grid;place-items:center;width:24px;height:24px;
  padding:0;border:1px solid var(--line);border-radius:999px;
  background:var(--bg);color:var(--muted);cursor:pointer}
.navhud-t:hover{color:var(--fg);border-color:var(--muted)}
.navhud-t svg{width:13px;height:13px;transition:transform .2s ease}
.navhud.replie .navhud-t svg{transform:rotate(180deg)}
.navhud.replie .nav-item{display:none}
.navhud.replie .nav-coord{border-left:none;padding-left:0}

/* Sous 900px les deux pastilles se toucheraient : le HUD descend d'une ligne. */
@media(max-width:900px){ .navhud{top:76px !important;right:74px !important} }

/* Telephone : plus petit, cale a gauche du ☰. */
@media(max-width:520px){
  /* Ancrage par la GAUCHE : ancre par la droite, la pastille repliee
     passait de x=67 a x=266 et flottait entre la recherche et le ☰,
     alignee sur rien. A gauche, les deux etats partent de 14px, la meme
     marge que la barre de recherche. */
  .navhud{top:70px !important;left:14px !important;right:auto !important;
    height:34px;gap:10px;padding:0 10px}
  .navhud .nav-val{font:700 12px/1.2 system-ui}
  .navhud .nav-lbl{font:500 8px/1.2 system-ui}
  .navhud-t{width:20px;height:20px}
  .navhud-t svg{width:11px;height:11px}
}

/* Pendant un itineraire, #route-panel occupe le haut-droit (top:16 right:16
   340px, z-index 7 contre 5) et enterrerait le HUD — 282px de recouvrement
   mesures. Le HUD passe a gauche sous la recherche et ne garde que la vitesse :
   a 533px il ne reste que 177px libres a gauche du panneau.
   Sur telephone le panneau est en bas, donc rien a deplacer. */
@media(min-width:521px){
  body:not(.navmode):has(#route-panel.open) .navhud{
    left:14px !important;right:auto !important;top:76px !important}
  body:not(.navmode):has(#route-panel.open) .navhud .nav-coord{display:none}
  body:not(.navmode):has(#route-panel.open) .navhud .nav-item:not(:first-child){display:none}
}

/* Correctif : le HUD doit laisser voir la carte. var(--card) est opaque,
   d'ou le rectangle blanc qui coupait la carte. On revient a un verre
   translucide, en gardant la pastille et la hauteur de la recherche. */
.navhud{background:color-mix(in srgb, var(--card) 68%, transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

/* Correctif telephone : pendant un itineraire, la vitesse doit rester
   visible meme quand le HUD est replie — c'est la valeur qui compte au
   volant. Le reste (alt, precision, cap, coordonnee) reste masque. */
@media(max-width:520px){
  body:not(.navmode):has(#route-panel.open) .navhud.replie .nav-item:first-child{display:flex}
  body:not(.navmode):has(#route-panel.open) .navhud.replie .nav-coord{display:none}
  body:not(.navmode):has(#route-panel.open) .navhud .nav-val{font:700 15px/1.2 system-ui}
}

/* Le canvas porte z-index:1 (ligne reveillee en reparant les accolades).
   Les marqueurs — point GPS, epingle deposee, favoris, fleche de navigation —
   sont ses FRERES dans .maplibregl-canvas-container avec z-index:auto, donc
   le canvas se dessinait par-dessus eux : ils existaient mais restaient
   invisibles. Verifie par elementFromPoint, qui renvoyait le canvas au
   centre exact du point GPS.
   On rend le canvas neutre : les marqueurs, plus loin dans le DOM, repassent
   au-dessus. Le conteneur garde son z-index:1, rien d'autre ne bouge.
   Meme cause que la popup enterree corrigee plus haut — j'avais traite la
   popup sans balayer les marqueurs. */
#map .maplibregl-canvas{z-index:auto}

/* Mode navigation : HUD compact, cale sur la marge du bandeau.
   Mesure a 375px : #nav-top et #nav-bottom ont 12px de marge, le HUD en
   avait 8 — 4px de decalage, visible. Et en pleine largeur il passait sous
   #btn-layers (321,76 44x44).
   Pastille auto-largeur a 12px a gauche : 252px de large, 111px libres a
   droite, aucun chevauchement, meme marge gauche que le bandeau.
   Les mesures restent visibles meme si le HUD etait replie : au volant on
   veut les chiffres, pas un chevron. La coordonnee saute — elle ne sert a
   rien en roulant et c'est elle qui allonge la pastille. */
body.navmode .navhud{
  left:12px !important;right:auto !important;top:84px !important;
  bottom:auto !important;width:auto !important;height:32px !important;
  padding:0 12px !important;gap:12px !important;
  justify-content:flex-start !important;border-radius:999px !important;
  background:color-mix(in srgb, var(--card) 48%, transparent) !important;
  backdrop-filter:blur(12px) !important;
  -webkit-backdrop-filter:blur(12px) !important}
body.navmode .navhud .nav-item{display:flex !important}
body.navmode .navhud .nav-coord{display:none !important}
@media(max-width:520px){
  body.navmode .navhud .nav-val{font:700 12px/1.2 system-ui}
  body.navmode .navhud .nav-lbl{font:500 8px/1.2 system-ui}
}