: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)}
.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-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}

#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)}