:root{
  --green:#2f8f3a; --green-d:#1e6b2b; --green-l:#e6f3e4; --blue:#1f8fb0; --blue-l:#e3f2f7;
  --ink:#16261a; --muted:#5b6b5f; --bg:#f4f8f2; --card:#fff; --line:#dfe8dc;
  --ok:#3aa655; --mid:#f0a020; --bad:#d9442f; --r:16px;
  --nav-h:64px; --vb-h:0px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--bg);font-size:17px;line-height:1.4}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3{margin:.2em 0 .4em;line-height:1.15}
h1{font-size:1.7rem} h2{font-size:1.3rem} h3{font-size:1.05rem}
.muted{color:var(--muted);font-size:.9rem}
.hide{display:none!important}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:52px;padding:.7rem 1.4rem;border:0;border-radius:999px;background:var(--green);color:#fff;font-weight:700;font-size:1.05rem;box-shadow:0 3px 0 var(--green-d)}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--green-d)}
.btn.sec{background:#fff;color:var(--green-d);border:2px solid var(--green);box-shadow:none}
.btn.blue{background:var(--blue);box-shadow:0 3px 0 #17708a}
.btn.ghost{background:transparent;color:var(--muted);box-shadow:none;font-weight:500;text-decoration:underline}
.btn.block{display:flex;width:100%}
.btn.sm{min-height:40px;padding:.4rem 1rem;font-size:.95rem}
.btn[disabled]{opacity:.45;pointer-events:none}
.iconbtn{width:48px;height:48px;border-radius:50%;border:2px solid var(--green);background:#fff;font-size:1.3rem}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

/* ---------- écrans plein cadre (parcours) ---------- */
.screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 20px calc(24px + var(--vb-h));text-align:center;background:linear-gradient(180deg,#fff 0%,var(--green-l) 100%);overflow:auto}
.screen .inner{width:100%;max-width:460px;display:flex;flex-direction:column;gap:14px;align-items:stretch}
.screen.dark{background:#02060f;color:#fff}
.dots{display:flex;gap:6px;justify-content:center}
.dots i{width:9px;height:9px;border-radius:50%;background:var(--line)} .dots i.on{background:var(--green)}
.field{display:flex;gap:8px;align-items:center}
.field input,.card input,.card select,.card textarea,.field select{flex:1;min-height:52px;padding:.6rem 1rem;border:2px solid var(--line);border-radius:14px;background:#fff;width:100%}
.field input:focus,.card input:focus,textarea:focus{border-color:var(--green);outline:0}
label.l{display:block;text-align:left;font-weight:600;margin-bottom:4px}

/* splash : feuille qui pousse, satellite qui orbite */
.logo-wrap{position:relative;width:min(70vw,300px);margin:0 auto}
.logo-wrap img{width:100%;display:block;animation:grow 1.4s cubic-bezier(.2,.9,.2,1) both}
.orbit{position:absolute;inset:6% 10% 28% 8%;border-radius:50%;animation:spin 7s linear infinite;pointer-events:none}
.orbit::after{content:"";position:absolute;top:-4px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--blue);box-shadow:0 0 14px 4px rgba(31,143,176,.55)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes grow{from{transform:scale(.4) rotate(-12deg);opacity:0}to{transform:none;opacity:1}}
.tagline{font-size:1.1rem;color:var(--green-d);font-weight:600}
.demo-badge{display:inline-block;background:#fff4d6;color:#7a5800;border:1px solid #f0d58a;border-radius:999px;padding:3px 12px;font-size:.8rem;margin:0 auto}

/* permissions */
.perm{display:flex;align-items:center;gap:12px;text-align:left;background:#fff;border:2px solid var(--line);border-radius:var(--r);padding:12px 14px}
.perm .ic{font-size:1.6rem} .perm b{display:block}
.perm .st{margin-left:auto;font-size:.85rem;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--line)}
.perm.ok{border-color:var(--ok)} .perm.ok .st{background:var(--ok);color:#fff}
.perm.no{border-color:var(--mid)} .perm.no .st{background:var(--mid);color:#fff}
.perm.cur{border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-l)}

/* globe / placement */
#place{position:fixed;inset:0;background:#02060f}
#gmap{position:absolute;inset:0}
.sheet{position:absolute;left:0;right:0;bottom:0;padding:16px 16px calc(16px + var(--vb-h));background:rgba(255,255,255,.96);border-radius:24px 24px 0 0;box-shadow:0 -8px 30px rgba(0,0,0,.3);display:flex;flex-direction:column;gap:10px;align-items:stretch;max-width:560px;margin:0 auto;transition:transform .5s}
.sheet.hidden{transform:translateY(110%)}
.sheet h2{margin:0;text-align:center}
.triple{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.triple .btn{flex-direction:column;min-height:84px;border-radius:18px;padding:.5rem .3rem;font-size:.95rem;text-align:center}
.triple .btn span{font-size:1.7rem}
.topchip{position:absolute;top:calc(12px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);background:rgba(0,0,0,.55);color:#fff;border-radius:999px;padding:6px 16px;font-size:.9rem;white-space:nowrap}

/* ---------- application ---------- */
#shell{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--bg)}
#topbar{display:flex;align-items:center;gap:10px;padding:10px 16px;padding-top:calc(10px + env(safe-area-inset-top));background:#fff;border-bottom:1px solid var(--line)}
#topbar img{height:34px} #topbar b{font-size:1.15rem;color:var(--green-d)}
#topbar .sp{flex:1}
#main{flex:1;overflow:auto;padding:16px 16px calc(var(--nav-h) + 24px + var(--vb-h));-webkit-overflow-scrolling:touch}
#main.map{padding:0;overflow:hidden}
.wrap{max-width:760px;margin:0 auto}
#nav{position:fixed;left:0;right:0;bottom:0;height:calc(var(--nav-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:#fff;border-top:1px solid var(--line);display:flex;justify-content:space-around;z-index:5}
#nav button{flex:1;border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:.72rem;color:var(--muted)}
#nav button span{font-size:1.4rem}
#nav button.on{color:var(--green-d);font-weight:700}
#nav button.on span{transform:translateY(-2px)}
@media(min-width:900px){
  #shell{flex-direction:row;flex-wrap:wrap}
  #topbar{width:100%}
  #nav{position:static;flex-direction:column;justify-content:flex-start;width:200px;height:auto;border-top:0;border-right:1px solid var(--line);order:2;padding-top:12px}
  #nav button{flex:none;flex-direction:row;justify-content:flex-start;gap:12px;padding:14px 20px;font-size:1rem}
  #main{order:3;flex:1;height:calc(100% - 58px);padding-bottom:24px}
  :root{--nav-h:0px}
}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:14px}
.card.hl{border-color:var(--green);background:linear-gradient(180deg,#fff,var(--green-l))}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row.sp{justify-content:space-between}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.tile{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 10px;text-align:center;font-weight:600;display:flex;flex-direction:column;gap:4px;align-items:center}
.tile span{font-size:1.8rem}
.chip{display:inline-block;padding:3px 10px;border-radius:999px;background:var(--green-l);color:var(--green-d);font-size:.82rem;font-weight:600}
.chip.blue{background:var(--blue-l);color:#14657f}
.chip.vert{background:var(--ok);color:#fff}.chip.orange{background:var(--mid);color:#fff}.chip.rouge{background:var(--bad);color:#fff}
.notif{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line)}
.notif:last-child{border:0}.notif.unread{font-weight:600}
.fab{position:fixed;right:16px;bottom:calc(var(--nav-h) + 16px + var(--vb-h) + env(safe-area-inset-bottom));z-index:6;min-height:60px;padding:0 22px;font-size:1.05rem}
@media(min-width:900px){.fab{bottom:24px}}

/* jauge */
.gauge{--p:0;--c:var(--ok);width:92px;height:92px;border-radius:50%;background:conic-gradient(var(--c) calc(var(--p)*1%),var(--line) 0);display:grid;place-items:center;flex:none}
.gauge b{width:70px;height:70px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:1.4rem}
.bar{height:10px;border-radius:99px;background:var(--line);overflow:hidden;margin:2px 0 8px}.bar i{display:block;height:100%;background:var(--c,var(--ok))}
ul.clean{list-style:none;padding:0;margin:6px 0}ul.clean li{padding:3px 0}
.src{font-size:.78rem;color:var(--muted);margin-top:6px}

/* calendrier de simulation */
.cal{display:flex;gap:3px;flex-wrap:wrap;margin:6px 0 2px}
.cal i{width:26px;height:34px;border-radius:6px;font-style:normal;font-size:.62rem;color:#fff;display:grid;place-items:center;font-weight:700}
.cal i.vert{background:var(--ok)}.cal i.orange{background:var(--mid)}.cal i.rouge{background:var(--bad)}
.legend{display:flex;gap:12px;font-size:.8rem;flex-wrap:wrap}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:4px;vertical-align:-1px}
.timeline{display:flex;gap:6px;flex-wrap:wrap;align-items:stretch;margin:6px 0}
.timeline div{flex:1 1 110px;background:var(--green-l);border-radius:12px;padding:8px 10px;font-size:.9rem}
.timeline div small{display:block;color:var(--muted)}
.scn{border:2px solid var(--line);border-radius:14px;padding:10px 12px;margin:8px 0}.scn.best{border-color:var(--green)}

/* carte */
#map{position:absolute;inset:0}
.maptools{position:absolute;z-index:3;top:10px;left:10px;right:10px;display:flex;gap:6px;flex-wrap:wrap;pointer-events:none}
.maptools>*{pointer-events:auto}
.maptools label{background:#fff;border-radius:999px;padding:6px 12px;font-size:.85rem;box-shadow:0 1px 4px rgba(0,0,0,.25);display:flex;gap:6px;align-items:center}
.maptools select{border:0;background:#fff;border-radius:999px;padding:6px 12px;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.tabs{display:flex;gap:6px;margin-bottom:12px;overflow:auto}
.tabs button{border:2px solid var(--line);background:#fff;border-radius:999px;padding:6px 16px;white-space:nowrap}
.tabs button.on{background:var(--green);border-color:var(--green);color:#fff}

/* agent */
#chat{position:fixed;inset:0;z-index:20;background:var(--bg);display:flex;flex-direction:column}
#chat header{display:flex;align-items:center;gap:10px;padding:10px 14px;padding-top:calc(10px + env(safe-area-inset-top));background:#fff;border-bottom:1px solid var(--line)}
#chat header b{flex:1}
#msgs{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.bub{max-width:min(92%,620px);padding:10px 14px;border-radius:18px;white-space:pre-wrap}
.bub.me{align-self:flex-end;background:var(--green);color:#fff;border-bottom-right-radius:4px}
.bub.ai{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px}
.cardmsg{align-self:stretch;max-width:620px}
#composer{display:flex;gap:8px;padding:10px 12px calc(10px + var(--vb-h) + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line)}
#composer input{flex:1;min-height:52px;padding:0 16px;border:2px solid var(--line);border-radius:999px}
.mic{width:56px;height:56px;border-radius:50%;border:0;background:var(--green);color:#fff;font-size:1.5rem;flex:none}
.mic.rec{background:var(--bad);animation:pulse 1s infinite}
@keyframes pulse{50%{transform:scale(1.1)}}
.suggest{display:flex;gap:6px;flex-wrap:wrap}.suggest button{border:1px solid var(--green);background:#fff;color:var(--green-d);border-radius:999px;padding:6px 12px;font-size:.88rem}

/* appel */
#call{position:fixed;inset:0;z-index:30;background:linear-gradient(180deg,#0e3b24,#0a2a3a);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;text-align:center}
#call img{width:110px;border-radius:50%;background:#fff;padding:8px;animation:ring 1.2s infinite}
@keyframes ring{50%{box-shadow:0 0 0 22px rgba(255,255,255,.12)}}
#call .acts{display:flex;gap:40px;margin-top:20px}
#call .acts button{width:72px;height:72px;border-radius:50%;border:0;font-size:1.8rem;color:#fff}
.accept{background:var(--ok)}.decline{background:var(--bad)}
#call .tx{max-width:420px;min-height:3em;font-size:1.05rem}

/* bandeaux */
#voicebar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(14,59,36,.96);color:#fff;padding:8px 14px calc(8px + env(safe-area-inset-bottom));display:flex;gap:10px;align-items:center}
#voicebar p{margin:0;flex:1;font-size:.92rem}
#voicebar button{background:rgba(255,255,255,.15);color:#fff;border:0;border-radius:999px;padding:6px 12px;font-size:.82rem;white-space:nowrap}
.vb-actions{display:flex;gap:6px;flex-direction:column}
@media(min-width:600px){.vb-actions{flex-direction:row}}
#listening{position:fixed;top:calc(14px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:50;background:var(--bad);color:#fff;border-radius:999px;padding:8px 18px;font-weight:700;display:flex;gap:8px;align-items:center}
.pulse{width:10px;height:10px;border-radius:50%;background:#fff;animation:pulse 1s infinite}
#toast{position:fixed;left:50%;bottom:calc(90px + var(--vb-h));transform:translateX(-50%);z-index:60;background:#222;color:#fff;padding:10px 18px;border-radius:12px;max-width:90%;text-align:center}
.maplibregl-popup-content{font-family:inherit;border-radius:12px;padding:12px 14px;max-width:260px}