:root{--bg:#070d18;--panel:rgba(13,20,35,.9);--card:rgba(255,255,255,.055);--line:rgba(255,255,255,.12);--txt:#eef3fb;--mut:#93a1b8;--acc:#4cc9f0;--acc2:#4361ee;--gold:#ffcf4a;--red:#ff4d5e;--r:14px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--txt);font:15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","PingFang SC","Microsoft YaHei","Noto Sans Arabic",sans-serif;overflow:hidden}
[hidden]{display:none!important}
.ic{width:20px;height:20px;flex:none;vertical-align:middle}
button{font:inherit;color:inherit}

/* ---------- scène + cadre de visée ---------- */
#stage{position:fixed;inset:0;background:radial-gradient(120% 90% at 50% 0%,#14284a 0,#070d18 62%)}
#frame{position:absolute;left:0;top:0;width:100px;height:100px;overflow:hidden;background:#0b1220;border-radius:14px;box-shadow:0 10px 50px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.14);transition:left .25s,top .25s,width .25s,height .25s}
body.flying #frame{border-radius:0;box-shadow:none;transition:none}
body.nofx #frame{transition:none}
#c{position:absolute;inset:0}
#live,#frame canvas.out{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#frame canvas.out{background:#000;z-index:3}
#live{z-index:2}
body.flying #live{display:none}
.mk{position:absolute;width:16px;height:16px;border:2px solid rgba(255,255,255,.85);z-index:4;pointer-events:none;opacity:.85}
.mk.tl{left:8px;top:8px;border-right:0;border-bottom:0;border-radius:5px 0 0 0}.mk.tr{right:8px;top:8px;border-left:0;border-bottom:0;border-radius:0 5px 0 0}
.mk.bl{left:8px;bottom:8px;border-right:0;border-top:0;border-radius:0 0 0 5px}.mk.br{right:8px;bottom:8px;border-left:0;border-top:0;border-radius:0 0 5px 0}
body.flying .mk{display:none}
.maplibregl-ctrl-top-right{top:34px}
.maplibregl-ctrl-attrib{font-size:10px}
body.flying .maplibregl-ctrl-top-right,body.flying .maplibregl-ctrl-bottom-right,body.flying .maplibregl-ctrl-bottom-left{display:none}

/* ---------- en-tête ---------- */
#top{position:fixed;left:0;right:0;top:0;z-index:12;display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top) + 8px) 12px 8px;pointer-events:none}
#top>*{pointer-events:auto}
.brand{font-weight:800;letter-spacing:.09em;font-size:14px;text-shadow:0 1px 6px #000}
.brand i{color:var(--acc);font-style:normal}.brand small{font-weight:600;color:var(--mut);letter-spacing:.14em;font-size:10px;margin-inline-start:4px}
.free{padding:2px 9px;border-radius:20px;background:rgba(76,201,240,.16);color:var(--acc);font-size:11px;font-weight:700;white-space:nowrap}
.langsel{margin-inline-start:auto;display:flex;align-items:center;gap:6px;background:rgba(10,16,28,.72);border:1px solid var(--line);border-radius:20px;padding:3px 8px;backdrop-filter:blur(10px)}
.langsel select{background:transparent;border:0;color:var(--txt);font-size:13px;font-weight:600;outline:none;height:26px;padding:0 2px}
.langsel option{color:#000}
body.flying #top{display:none}

/* ---------- panneau ---------- */
#sheet{position:fixed;left:0;right:0;bottom:0;z-index:10;display:flex;flex-direction:column;max-height:56vh;background:var(--panel);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border-top:1px solid var(--line);border-radius:22px 22px 0 0;transition:transform .35s ease}
body.flying #sheet{transform:translateY(115%)}
.grip{display:block;width:100%;height:22px;border:0;background:none;cursor:pointer;flex:none;padding:0}
.grip i{display:block;width:44px;height:4px;border-radius:4px;background:rgba(255,255,255,.28);margin:9px auto 0}
.body{overflow-y:auto;overscroll-behavior:contain;padding:0 16px 6px;flex:1 1 auto;min-height:0}
#sheet.collapsed .body{display:none}
.actions{flex:none;padding:6px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,.06)}
#status{min-height:18px;margin:0 0 8px;font-size:13px;color:var(--mut)}#status.err{color:#ff8b97}
.btns{display:grid;grid-template-columns:1fr 1.5fr;gap:10px}
.btns button,.btns3 button,.btns3 a{display:flex;align-items:center;justify-content:center;gap:8px;height:50px;border-radius:14px;border:0;font-size:16px;font-weight:700;cursor:pointer;text-decoration:none}
.ghost{background:rgba(255,255,255,.1);color:var(--txt)}
.primary{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff}
.primary .ic{color:#ffd9de}
button:active{transform:scale(.985)}
button:disabled{opacity:.5}

.ratios{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:2px 0 10px}
.ratios button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;height:56px;border-radius:12px;background:var(--card);border:1px solid transparent;color:var(--mut);font-size:12px;font-weight:700;cursor:pointer}
.ratios i{display:block;width:var(--w);height:var(--h);border:2px solid currentColor;border-radius:3px}
.ratios button[aria-checked=true]{background:rgba(76,201,240,.16);border-color:var(--acc);color:var(--acc)}
.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:0 0 12px;padding:4px;background:rgba(0,0,0,.28);border-radius:14px}
.tabs button{display:flex;align-items:center;justify-content:center;gap:6px;height:38px;border:0;border-radius:10px;background:none;color:var(--mut);font-size:13px;font-weight:700;cursor:pointer}
.tabs button[aria-selected=true]{background:rgba(255,255,255,.12);color:var(--txt)}
.tabs .ic{width:17px;height:17px}
.panel{display:none;padding-bottom:10px}.panel.on{display:block}

/* ---------- champs ---------- */
.f{display:block;margin:12px 0 0;color:var(--mut);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.f>span{display:flex;align-items:center;gap:8px}
.f b{color:var(--acc);text-transform:none;letter-spacing:0;margin-inline-start:auto;font-weight:700}
.f .mini{margin-inline-start:6px}
input[type=text],select{width:100%;height:44px;margin-top:6px;padding:0 12px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--txt);font-size:16px;outline:none;text-transform:none;letter-spacing:0;font-weight:500}
input[type=text]:focus,select:focus{border-color:var(--acc)}
select option{color:#000}
input[type=range]{width:100%;margin:10px 0 0;accent-color:var(--acc)}
.row{display:flex;gap:8px;align-items:center}.row>input[type=text]{flex:1}
.sq{flex:none;margin-top:6px;width:46px;height:44px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.06);cursor:pointer;display:grid;place-items:center}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.two>.only-place,.two>.f{min-width:0}
.checks{display:flex;flex-direction:column;gap:2px;padding-top:12px}.checks.col{padding-top:6px}
.chk{display:flex;align-items:center;gap:10px;color:var(--txt);font-size:14px;font-weight:500;margin:8px 0 0;text-transform:none;letter-spacing:0;cursor:pointer}
.chk input{width:20px;height:20px;accent-color:var(--acc);flex:none}
.hint{font-size:12px;color:var(--mut);margin:8px 0 0;line-height:1.5}
.cap{font-size:12px;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.04em;margin:2px 0 6px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{height:34px;padding:0 12px;border-radius:17px;border:1px solid var(--line);background:rgba(255,255,255,.06);font-size:13px;font-weight:600;cursor:pointer}
.chips button.on{background:rgba(76,201,240,.18);border-color:var(--acc);color:var(--acc)}
.specials{margin-top:8px}.specials button{min-width:34px;padding:0 8px;font-size:16px;height:32px}
.mini{height:28px;padding:0 10px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.08);font-size:12px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:5px;text-transform:none;letter-spacing:0}
.mini.on{background:rgba(76,201,240,.2);border-color:var(--acc);color:var(--acc)}
.file{position:relative;display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 14px;border-radius:12px;background:rgba(255,255,255,.08);border:1px dashed rgba(255,255,255,.28);color:var(--txt);font-size:14px;font-weight:600;cursor:pointer;margin-top:6px;overflow:hidden;text-transform:none;letter-spacing:0}
.file input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
fieldset{border:1px solid var(--line);border-radius:14px;margin:12px 0 0;padding:6px 12px 12px;min-width:0}
legend{padding:0 6px;color:var(--mut);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
#logothumb{height:42px;max-width:84px;object-fit:contain;border-radius:8px;background:repeating-conic-gradient(#2a3550 0 25%,#1b2438 0 50%) 0 0/12px 12px;margin-top:6px}
.clr,.clrl input{width:44px;height:44px;padding:2px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.06);margin-top:6px;cursor:pointer;flex:none}
.colors{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-top:6px}
.clrl{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:var(--mut);font-weight:600}
.corners{display:grid;grid-template-columns:44px 44px;grid-template-rows:30px 30px;gap:4px;margin-top:8px;padding:4px;background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:10px;width:108px;direction:ltr}
.corners button{border:0;border-radius:6px;background:rgba(255,255,255,.07);cursor:pointer;position:relative}
.corners button i{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--mut)}
.corners [data-v=tl] i{left:5px;top:5px}.corners [data-v=tr] i{right:5px;top:5px}.corners [data-v=bl] i{left:5px;bottom:5px}.corners [data-v=br] i{right:5px;bottom:5px}
.corners button[aria-checked=true]{background:rgba(76,201,240,.22)}.corners button[aria-checked=true] i{background:var(--acc)}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;background:rgba(0,0,0,.28);border-radius:14px}
.seg button{display:flex;align-items:center;justify-content:center;gap:7px;height:40px;border:0;border-radius:10px;background:none;color:var(--mut);font-weight:700;font-size:14px;cursor:pointer}
.seg button[aria-checked=true]{background:linear-gradient(135deg,rgba(76,201,240,.28),rgba(67,97,238,.28));color:#fff}
.ab{font-weight:800;letter-spacing:-.5px;color:var(--gold)}

/* visibilité selon le mode (place / trajet) */
body:not([data-target=route]) .only-route,body:not([data-target=place]) .only-place,body:not([data-target=me]) .only-me,body[data-target=me] .not-me{display:none!important}
body:not([data-mode=zoom]) .only-zoom,body[data-mode=zoom][data-target=place] .not-zoom,body[data-target=route] .only-zoom,body[data-target=me] .only-zoom{display:none!important}
.seg button{font-size:13px;padding:0 4px}.seg button .ic{width:16px;height:16px}
.mecard{padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.04);margin-bottom:10px}
.meact{font-size:13px;color:var(--acc);margin-inline-start:auto}
body.picking .maplibregl-canvas{cursor:crosshair!important}
body.picking #frame{box-shadow:0 0 0 3px var(--acc),0 0 30px rgba(76,201,240,.5)}
#pick.on,#pickA.on,#pickB.on{background:rgba(76,201,240,.25);border-color:var(--acc);color:var(--acc)}
body:not([data-rtype=gpx]) .only-gpx,body:not([data-rtype=road]) .only-road,body[data-rtype=gpx] .only-gpxhide{display:none!important}
body[data-target=route][data-rtype=gpx] #pa,body[data-target=route][data-rtype=gpx] #pb{opacity:.4}

/* ---------- résultat ---------- */
#prog{position:fixed;left:0;right:0;top:0;height:3px;z-index:20;display:none;background:rgba(255,255,255,.15)}
#prog i{display:block;height:100%;width:0;background:var(--red)}
body.flying #prog{display:block}
#stop{position:fixed;z-index:20;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translateX(-50%);display:none;align-items:center;gap:8px;height:46px;padding:0 24px;border-radius:24px;border:1px solid var(--line);background:rgba(10,14,24,.82);backdrop-filter:blur(10px);color:#fff;font-size:15px;font-weight:700;cursor:pointer}
body.flying #stop{display:flex}
#result{position:fixed;inset:0;z-index:30;background:rgba(5,8,14,.95);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:16px}
#result video{max-width:100%;max-height:70vh;border-radius:14px;background:#000}
.btns3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:min(560px,100%)}
.btns3 a,.btns3 button{background:rgba(255,255,255,.12);color:#fff;height:48px;font-size:15px}

/* ---------- grand écran : panneau latéral ---------- */
@media(min-width:900px){
  #sheet{left:0;right:auto;top:0;bottom:0;width:410px;max-height:none;border-radius:0;border-top:0;border-inline-end:1px solid var(--line)}
  html[dir=rtl] #sheet{left:auto;right:0}
  body.flying #sheet{transform:translateX(-115%)}html[dir=rtl] body.flying #sheet{transform:translateX(115%)}
  .grip{display:none}
  #top{padding-inline-start:422px}
  body.flying #top{padding:0}
}
@media(max-width:380px){.tabs span{display:none}.tabs .ic{width:20px;height:20px}}