/* Omaps — les cartes d'Orvel. Mobile d'abord, même famille que outils.css. */
:root{
  --bg:#04050a;--carte:rgba(10,13,24,.86);--ink:#eef2fb;--mute:#8e9ab0;--line:rgba(255,255,255,.1);
  --cy:#3ce1ff;--ro:#ff2fd0;--vi:#a78bfa;--or:#ffd76a;--ve:#34d399;--rouge:#ff5470;
  --grad:linear-gradient(100deg,var(--cy),var(--vi) 45%,var(--ro));
  --body:'Inter',system-ui,-apple-system,sans-serif;--mono:ui-monospace,'JetBrains Mono',monospace;
  --haut:env(safe-area-inset-top);--bas:env(safe-area-inset-bottom);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font:15px/1.45 var(--body);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
a{color:var(--cy);text-decoration:none}
#carte{position:fixed;inset:0}
.verre{background:var(--carte);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);border:1px solid var(--line)}

/* barre de recherche */
.haut{position:fixed;left:0;right:0;top:0;padding:calc(10px + var(--haut)) 10px 0;z-index:20;pointer-events:none}
.haut>*{pointer-events:auto}
.barre{display:flex;align-items:center;gap:6px;max-width:640px;margin:0 auto;padding:6px 6px 6px 12px;border-radius:999px;
  background:var(--carte);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--line);box-shadow:0 10px 40px rgba(0,0,0,.45),0 0 0 1px rgba(60,225,255,.08)}
.marque{display:flex;align-items:center;gap:6px;color:var(--ink);font:700 13px var(--mono);letter-spacing:.18em;white-space:nowrap}
.marque img{width:24px;height:24px}
.marque b{color:var(--cy);text-shadow:0 0 12px var(--cy)}
@media (max-width:520px){.marque b,.marque{font-size:0;gap:0}.marque img{width:26px;height:26px}}
#q{flex:1;min-width:0;background:none;border:0;outline:0;padding:8px 4px;font-size:16px}
#q::placeholder{color:var(--mute)}
.ic{width:38px;height:38px;border-radius:50%;font-size:17px}
.ic:hover{background:rgba(255,255,255,.07)}
.ic.on{background:rgba(255,47,208,.2);animation:pulse 1.2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(255,47,208,.15)}}
.orvel{display:flex;align-items:center;gap:7px;padding:9px 14px;border-radius:999px;background:var(--grad);color:#05060b;font-weight:700;white-space:nowrap}
.orvel i{width:9px;height:9px;border-radius:50%;background:#05060b;box-shadow:0 0 0 3px rgba(5,6,11,.25)}
.orvel.charge i{animation:pulse 0.8s infinite}

.sugg{max-width:640px;margin:6px auto 0;border-radius:18px;overflow:hidden;background:var(--carte);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--line)}
.sugg button{display:flex;width:100%;text-align:left;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line)}
.sugg button:last-child{border:0}
.sugg button:hover,.sugg button.sel{background:rgba(60,225,255,.08)}
.sugg small{display:block;color:var(--mute);font-size:12.5px}
.sugg .orv{color:var(--cy)}

.puces{display:flex;gap:6px;overflow-x:auto;max-width:640px;margin:8px auto 0;padding-bottom:4px;scrollbar-width:none}
.puces::-webkit-scrollbar{display:none}
.puces button{flex:none;padding:7px 12px;border-radius:999px;background:var(--carte);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);font-size:13.5px;white-space:nowrap}
.puces button:hover,.puces button.on{border-color:var(--cy);color:var(--cy)}

/* boutons flottants */
.boutons{position:fixed;right:10px;top:calc(122px + var(--haut));display:flex;flex-direction:column;gap:8px;z-index:15}
.boutons button{width:44px;height:44px;border-radius:14px;background:var(--carte);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);font-size:18px;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.boutons button#lang{font:700 12px var(--mono)}
.boutons button.on{color:var(--cy);border-color:rgba(60,225,255,.5)}

/* panneau du bas (mobile) / latéral (bureau) */
.panneau{position:fixed;left:0;right:0;bottom:0;z-index:30;max-height:62vh;overflow:auto;padding:8px 16px calc(18px + var(--bas));border-radius:22px 22px 0 0;
  background:var(--carte);backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);border:1px solid var(--line);box-shadow:0 -10px 50px rgba(0,0,0,.5);
  overscroll-behavior:contain;transition:max-height .25s}
.panneau.grand{max-height:88vh}
.panneau.petit{max-height:118px;overflow:hidden}
.poignee{width:44px;height:5px;border-radius:9px;background:rgba(255,255,255,.22);margin:2px auto 10px;cursor:grab}
.fermer{position:absolute;right:10px;top:10px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.07)}
@media (min-width:900px){
  .panneau{left:12px;right:auto;top:calc(120px + var(--haut));bottom:12px;width:400px;max-height:none;border-radius:22px}
  .panneau.petit,.panneau.grand{max-height:none;overflow:auto}
  .poignee{display:none}
}
.panneau h2{font-size:19px;line-height:1.25;margin:0 36px 4px 0}
.panneau .sous{color:var(--mute);font-size:13.5px}
.panneau .actions{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.05);font-size:14px;white-space:nowrap}
.btn:hover{border-color:rgba(60,225,255,.5)}
.btn.prim{background:var(--cy);color:#04121a;border-color:transparent;font-weight:700}
.btn.rose{background:var(--grad);color:#05060b;border-color:transparent;font-weight:700}
.btn.petit{padding:6px 10px;font-size:13px}
.etiq{display:inline-block;font:600 11.5px var(--mono);padding:3px 8px;border-radius:999px;margin:6px 6px 0 0;border:1px solid var(--line);color:var(--mute)}
.etiq.ok{color:var(--ve);border-color:rgba(52,211,153,.4)}
.etiq.non{color:var(--rouge);border-color:rgba(255,84,112,.4)}
.infos{display:grid;gap:6px;margin-top:8px;font-size:14px}
.infos div{display:flex;gap:10px}.infos span:first-child{width:20px;text-align:center}

.liste{display:grid;gap:2px;margin-top:8px}
.item{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;padding:10px 8px;border-radius:12px}
.item:hover{background:rgba(255,255,255,.05)}
.item .n{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:700 12px var(--mono);background:rgba(60,225,255,.15);color:var(--cy)}
.item b{display:block}
.item small{color:var(--mute);font-size:12.5px}
.item .d{margin-left:auto;color:var(--mute);font:600 12px var(--mono);white-space:nowrap}

.orvel-rep{margin:6px 0 10px;padding:12px 14px;border-radius:16px;background:linear-gradient(135deg,rgba(60,225,255,.1),rgba(255,47,208,.08));border:1px solid rgba(60,225,255,.22);font-size:14.5px;white-space:pre-line}
.orvel-rep .qui{display:flex;align-items:center;gap:7px;font:700 11.5px var(--mono);letter-spacing:.14em;color:var(--cy);margin-bottom:6px}
.orvel-rep .qui i{width:8px;height:8px;border-radius:50%;background:var(--cy);box-shadow:0 0 10px var(--cy)}

/* itinéraire */
.pts{display:grid;gap:6px;margin:8px 0}
.pt{display:flex;align-items:center;gap:8px}
.pt .r{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:700 11px var(--mono);border:2px solid var(--cy);color:var(--cy)}
.pt:last-child .r{border-color:var(--ro);color:var(--ro)}
.pt input{flex:1;min-width:0;padding:9px 12px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.04);outline:0}
.pt input:focus{border-color:rgba(60,225,255,.5)}
.pt button{width:30px;height:30px;border-radius:50%;color:var(--mute)}
.modes{display:flex;gap:6px;margin:6px 0}
.modes button{flex:1;padding:9px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.04)}
.modes button.on{border-color:var(--cy);color:var(--cy);background:rgba(60,225,255,.08)}
.resume{display:flex;align-items:baseline;gap:10px;margin:10px 0 4px}
.resume b{font-size:24px}
.resume span{color:var(--mute)}
.alts{display:flex;gap:6px;flex-wrap:wrap}
.etapes{display:grid;gap:0;margin-top:8px;font-size:14px}
.etapes div{display:flex;gap:10px;padding:8px 2px;border-bottom:1px solid var(--line)}
.etapes div span:last-child{margin-left:auto;color:var(--mute);font:12px var(--mono);white-space:nowrap}

.form{display:grid;gap:8px;margin-top:10px}
.form label{font-size:12.5px;color:var(--mute)}
.form input,.form select,.form textarea{padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.04);outline:0;width:100%}
.form select option{background:#0b0f1c}

/* guidage */
.guidage{position:fixed;left:10px;right:10px;top:calc(10px + var(--haut));z-index:40;max-width:640px;margin:0 auto;padding:14px 16px;border-radius:20px;
  background:linear-gradient(135deg,rgba(6,40,52,.94),rgba(40,10,48,.94));border:1px solid rgba(60,225,255,.35);box-shadow:0 10px 40px rgba(0,0,0,.5)}
.g-txt{font-size:20px;font-weight:700;padding-right:90px}
.g-sous{color:#b9c5dc;font-size:13.5px;margin-top:4px}
.guidage button{position:absolute;right:12px;top:14px;padding:8px 12px;border-radius:999px;background:rgba(255,84,112,.2);border:1px solid rgba(255,84,112,.5)}

.toast{position:fixed;left:50%;bottom:calc(24px + var(--bas));transform:translateX(-50%);z-index:60;padding:10px 16px;border-radius:999px;background:#0e1424;border:1px solid var(--line);box-shadow:0 8px 30px rgba(0,0,0,.5);font-size:14px;max-width:92vw}

/* marqueurs */
.mq{width:30px;height:30px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--cy);border:2px solid #04050a;box-shadow:0 0 16px rgba(60,225,255,.8);display:grid;place-items:center;cursor:pointer}
.mq span{transform:rotate(45deg);font:700 12px var(--mono);color:#04121a}
.mq.ro{background:var(--ro);box-shadow:0 0 16px rgba(255,47,208,.8)}
.mq.or{background:var(--or);box-shadow:0 0 16px rgba(255,215,106,.7)}
.moi{width:18px;height:18px;border-radius:50%;background:var(--cy);border:3px solid #fff;box-shadow:0 0 0 8px rgba(60,225,255,.22),0 0 20px var(--cy)}
.maplibregl-ctrl-attrib{background:rgba(4,5,10,.6)!important;color:var(--mute)!important;font-size:10px}
.maplibregl-ctrl-attrib a{color:var(--mute)!important}
.maplibregl-ctrl-bottom-right{bottom:var(--bas)}