/* Olympe by Keros Group. Identité : turquoise du logo Keros (#38b4a1), noir du mot « keros », symbole spirale.
   Layout : barre latérale (Ma journée · Direction · Cycle de vente · En soutien · Réglages) + zone principale. */
:root{
  --keros:#38b4a1; --keros-deep:#1d8a78; --keros-soft:#e2f4f0; --ink:#0f1716;
  --bg:#f3f7f6; --surface:#ffffff; --surface-2:#edf3f1; --line:#dce6e3; --side:#f9fbfa;
  --fg:#13201e; --muted:#5b6b67; --accent:#1d8a78; --accent-fg:#ffffff;
  --bad:#d9445a; --warn:#d9822b; --ok:#1d8a78; --run:#2f7fd1; --wait:#8a97a3;
  --brief-bg:#0f1716; --brief-fg:#eaf5f2;
  --c-hermes:#fbcda4; --c-athena:#b8cff3; --c-demeter:#cbdec8; --c-zeus:#cfc0ec; --c-hera:#f8c7c8; --c-apollon:#f9e08f; --c-hades:#c9cddc;
  --orb-mode:light;
  --display:"Outfit","Segoe UI",system-ui,sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --keros:#4fd0bb; --keros-deep:#3fbfa9; --keros-soft:#16312d;
  --bg:#0c1312; --surface:#131c1b; --surface-2:#1a2624; --line:#24322f; --side:#0f1716;
  --fg:#e6efed; --muted:#93a6a2; --accent:#3fbfa9; --accent-fg:#06110f; --bad:#ff7085; --warn:#f0a65a; --ok:#4fd0bb; --run:#7bb4ff; --wait:#8a97a3;
  --brief-bg:#16312d; --brief-fg:#eaf5f2; --orb-mode:dark; color-scheme:dark }}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:14px;line-height:1.5}
button{font:inherit;color:inherit}
button:focus-visible,input:focus-visible,textarea:focus-visible,a:focus-visible{outline:2px solid var(--keros);outline-offset:2px}
[hidden]{display:none!important}
.face{border-radius:50%;object-fit:cover;object-position:50% 16%;display:block;flex:none}
.lbl-up{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--keros-deep)}
.mark{width:28px;height:28px;flex:none;display:block}
.logo-dark{display:none!important}
@media (prefers-color-scheme: dark){.logo-light{display:none!important}.logo-dark{display:block!important}}
.app{display:grid;grid-template-columns:280px minmax(0,1fr);min-height:100%}
@media (max-width:880px){.app{grid-template-columns:minmax(0,1fr)}}

/* ----- barre latérale ----- */
.side{background:var(--side);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:4px;padding:16px 12px;padding-left:max(12px, env(safe-area-inset-left, 0px));padding-top:max(16px, env(safe-area-inset-top, 0px));position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{display:flex;align-items:center;gap:10px;padding:0 6px 14px;text-decoration:none;color:var(--fg)}
.brand .mark{width:30px;height:30px}
.brand b{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.01em;line-height:1;display:block}
.by{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);margin-top:3px}
.by img{height:15px;width:auto}
.search{position:relative;margin-bottom:8px}
.search label{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:8px 10px;color:var(--muted)}
.search label:focus-within{border-color:var(--keros)}
.search input{border:0;background:transparent;font:inherit;color:var(--fg);min-width:0;flex:1}
.search input:focus-visible{outline:none}
.results{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:8;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px rgb(0 0 0 / .14);padding:4px;max-height:60vh;overflow-y:auto}
.results button{display:grid;grid-template-columns:26px minmax(0,1fr);gap:8px;align-items:center;width:100%;border:0;background:transparent;text-align:left;padding:6px 8px;border-radius:8px;cursor:pointer}
.results button:hover,.results button:focus-visible{background:var(--surface-2)}
.results img{width:26px;height:26px}
.results b{display:block;font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.results small{color:var(--muted);font-size:11.5px}
.results p{margin:0;padding:10px;color:var(--muted);font-size:13px}
.nav{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;border:0;background:transparent;text-align:left;padding:6px 8px;border-radius:12px;cursor:pointer;text-decoration:none;color:var(--fg);width:100%;position:relative}
.nav:hover{background:var(--surface-2)}
.nav[aria-current="page"]{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.nav .ico{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--keros-soft);color:var(--keros-deep)}
.nav img{width:34px;height:34px}
.nav b{display:block;font-size:13.5px;font-weight:600;line-height:1.2}
.nav small{display:block;font-size:11.5px;color:var(--muted);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.badges{display:flex;gap:3px}
.bd{min-width:18px;height:18px;border-radius:9px;font-size:10.5px;font-weight:700;display:grid;place-items:center;padding:0 5px;background:var(--bad);color:#fff}
.bd.r{background:color-mix(in srgb,var(--run) 16%,transparent);color:var(--run)}
.grp{margin-top:12px;padding:0 8px 4px;display:flex;align-items:center;gap:8px}
.grp::after{content:"";flex:1;height:1px;background:var(--line)}
.couple{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.couple .nav{grid-template-columns:30px minmax(0,1fr) auto;padding:6px;gap:7px}
.couple .nav img{width:30px;height:30px}
.couple .nav small{display:none}
.flow .nav + .nav::before,.flow .convs + .nav::before{content:"↓";position:absolute;left:24px;top:-10px;font-size:10px;color:var(--keros);line-height:1}
.convs{display:flex;flex-direction:column;gap:1px;margin:2px 0 6px 25px;padding-left:12px;border-left:1.5px solid var(--line)}
.conv{display:grid;grid-template-columns:9px minmax(0,1fr);gap:8px;align-items:center;border:0;background:transparent;text-align:left;padding:5px 8px;border-radius:8px;cursor:pointer;font-size:12.5px}
.conv:hover{background:var(--surface-2)}
.conv.on{background:var(--keros-soft);font-weight:600}
.conv span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv.new{color:var(--keros-deep);font-weight:600;grid-template-columns:minmax(0,1fr)}
.sd{width:8px;height:8px;border-radius:50%}
.sd.run{background:var(--run);animation:pulse 1.2s infinite} .sd.val{background:var(--bad)} .sd.done{background:var(--ok)} .sd.wait{background:var(--wait)}
@keyframes pulse{50%{opacity:.25}}
.side-foot{margin-top:auto;padding-top:10px;border-top:1px solid var(--line)}
@media (max-width:880px){
  .side{position:sticky;top:0;z-index:5;height:auto;flex-direction:row;align-items:center;overflow-x:auto;overflow-y:hidden;padding:8px max(12px, env(safe-area-inset-left, 0px));padding-top:max(8px, env(safe-area-inset-top, 0px));border-right:0;border-bottom:1px solid var(--line)}
  .side-nav{display:flex;align-items:center;gap:4px}
  .brand{padding:0 8px 0 0}.brand .by,.search,.grp,.nav small,.convs,.flow .nav + .nav::before,.flow .convs + .nav::before{display:none}
  .side-foot{margin:0;padding:0;border:0}
  .nav,.couple .nav{grid-template-columns:34px;padding:3px}.nav b{display:none}
  .couple,.flow{display:flex;gap:4px}.couple .nav img{width:34px;height:34px}
  .nav .badges{position:absolute;top:-2px;right:-2px}.nav .bd.r{display:none}
}

/* ----- zone principale ----- */
.main{min-width:0;padding-block:24px 48px;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
@media (min-width:881px){.main{padding-left:32px;padding-right:max(32px, env(safe-area-inset-right, 0px))}}
.page{max-width:1120px;margin:0 auto;display:grid;gap:22px}
.hello{display:flex;justify-content:space-between;align-items:end;gap:10px;flex-wrap:wrap}
.hello h1{font-family:var(--display);font-weight:700;font-size:clamp(26px,3vw,32px);margin:2px 0 0;letter-spacing:-.01em}
.hello .date{color:var(--muted);font-size:13px}
.notice{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--surface);border:1px dashed var(--line);border-radius:12px;padding:9px 12px;font-size:13px;color:var(--muted)}
.notice b{color:var(--fg)}
.notice a{color:var(--keros-deep);font-weight:600}
.empty{padding:22px;text-align:center;color:var(--muted);margin:0}

/* Mot de Zeus */
.brief{position:relative;overflow:hidden;background:var(--brief-bg);color:var(--brief-fg);border-radius:20px;padding:20px 22px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center}
.brief .wm{position:absolute;right:-50px;top:50%;width:230px;height:230px;transform:translateY(-50%);opacity:.16;pointer-events:none}
.brief img.face{width:58px;height:58px;border:3px solid var(--keros)}
.brief .lbl-up{color:var(--keros)}
.brief p{margin:4px 0 10px;font-size:15px;max-width:62ch;position:relative}
.chips{display:flex;flex-wrap:wrap;gap:6px;position:relative}
.chip{border:1px solid rgb(255 255 255 / .18);background:rgb(255 255 255 / .06);color:var(--brief-fg);border-radius:999px;padding:4px 11px;font-size:12.5px;font-weight:500;text-decoration:none}
.chip:hover{background:rgb(255 255 255 / .12)}
.chip b{color:var(--keros)}
.ask{display:flex;align-items:center;gap:6px;background:var(--surface);border:1.5px solid var(--line);border-radius:16px;padding:6px 6px 6px 10px}
.ask:focus-within{border-color:var(--keros)}
.ask .mark{width:26px;height:26px}
.ask input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:15px;color:var(--fg);padding:8px 6px}
.ask input:focus-visible{outline:none}
.go{border:0;background:var(--accent);color:var(--accent-fg);border-radius:11px;padding:9px 16px;font-weight:600;cursor:pointer;flex:none;display:inline-grid;place-items:center}
.go:disabled{opacity:.6;cursor:default}

.sec-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.sec-h h2{font-family:var(--display);font-weight:700;font-size:19px;margin:0;display:flex;align-items:center;gap:8px}
.sec-h h2 .n{font-family:var(--body);font-size:11.5px;font-weight:700;border-radius:999px;padding:1px 8px;background:var(--surface-2);color:var(--muted)}
.sec-h h2 .n.red{background:var(--bad);color:#fff}
.sec-h span{font-size:12.5px;color:var(--muted)}

/* À valider */
.vlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
@media (max-width:400px){.vlist{grid-template-columns:minmax(0,1fr)}}
.vcard{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px;display:grid;gap:10px;align-content:start}
.vhead{display:flex;gap:10px;align-items:center}
.vhead img{width:38px;height:38px}
.vhead div{min-width:0}
.vhead b{display:block;line-height:1.3}
.vhead small{color:var(--muted);font-size:12px}
.preview{background:var(--surface-2);border-radius:12px;padding:10px 12px;font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere;max-height:7.6em;overflow:hidden;position:relative}
.preview.open{max-height:none}
.preview:not(.open)::after{content:"";position:absolute;inset:auto 0 0 0;height:2.2em;background:linear-gradient(transparent,var(--surface-2))}
textarea.preview{width:100%;max-height:none;min-height:160px;border:1px solid var(--keros);font:inherit;font-size:13px;color:var(--fg);resize:vertical}
.more{border:0;background:transparent;color:var(--keros-deep);font-size:12.5px;font-weight:600;cursor:pointer;justify-self:start;padding:0}
.btns{display:flex;flex-wrap:wrap;gap:6px}
.btn{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:7px 13px;font-size:13px;font-weight:600;cursor:pointer;color:var(--fg);text-decoration:none;display:inline-flex;align-items:center}
.btn:hover{border-color:var(--keros)}
.btn.p{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.btn.x{border-color:transparent;color:var(--bad)}

/* À toi de jouer / En cours */
.two{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:1050px){.two{grid-template-columns:minmax(0,1fr)}}
.list{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.me-row{padding:12px 14px;border-top:1px solid var(--line);display:grid;gap:8px}
.me-row:first-child{border-top:0}
.me-top{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center}
.me-top img{width:34px;height:34px}
.me-top b{display:block;line-height:1.3}
.me-top small{color:var(--muted);font-size:12px}
.kind{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:6px;padding:2px 7px;white-space:nowrap}
.kind.call{background:var(--keros-soft);color:var(--keros-deep)}
.kind.rdv{background:color-mix(in srgb,var(--run) 14%,transparent);color:var(--run)}
.kind.money{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
.kind.task{background:var(--surface-2);color:var(--muted)}
.fiche{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-left:44px}
@media (max-width:640px){.fiche{grid-template-columns:minmax(0,1fr);margin-left:0}}
.fiche div{background:var(--surface-2);border-radius:10px;padding:8px 10px;font-size:12.5px}
.fiche div b{display:block;font-size:11px;color:var(--keros-deep);text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px}
.me-row .btns{margin-left:44px}
@media (max-width:640px){.me-row .btns{margin-left:0}}
.me-row.done{opacity:.55}
.me-row.done .me-top b{text-decoration:line-through}
.run-row{display:grid;grid-template-columns:30px minmax(0,1fr) 70px;gap:10px;align-items:center;padding:10px 14px;border:0;border-top:1px solid var(--line);background:transparent;cursor:pointer;color:var(--fg);text-align:left;width:100%}
.run-row:first-child{border-top:0}
.run-row:hover{background:var(--surface-2)}
.run-row img{width:30px;height:30px}
.run-row b{display:block;font-weight:500;font-size:13px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.run-row small{color:var(--muted);font-size:11.5px}
.mini{height:5px;border-radius:3px;background:var(--surface-2);overflow:hidden}
.mini i{display:block;height:100%;background:var(--keros)}
.mini.wait i{background:var(--wait)}

/* ----- page d'un dieu ----- */
.chat{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:20px;display:flex;flex-direction:column;height:calc(100dvh - 72px);min-height:480px;overflow:hidden}
@media (max-width:880px){.chat{height:calc(100dvh - 140px)}}
.c-head{display:flex;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line)}
.c-head img{width:46px;height:46px}
.c-head .ti{flex:1;min-width:0}
.c-head b{display:block;font-family:var(--display);font-weight:700;font-size:19px;line-height:1.2}
.c-head small{display:block;color:var(--muted);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gtabs{display:flex;gap:4px;background:var(--surface-2);border-radius:12px;padding:3px}
.gtabs a{border-radius:9px;padding:6px 12px;font-weight:600;font-size:13px;color:var(--muted);text-decoration:none;white-space:nowrap}
.gtabs a[aria-selected="true"]{background:var(--surface);color:var(--fg);box-shadow:0 1px 3px rgb(0 0 0 / .1)}
.hbtn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:7px 11px;font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;color:var(--fg);text-decoration:none}
.hbtn:hover{border-color:var(--keros)}
.hbtn.p{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
@media (max-width:700px){.c-head{flex-wrap:wrap}.gtabs{order:3;width:100%}.gtabs a{flex:1;text-align:center}.hbtn .lbl{display:none}}
.dhead{background:var(--surface);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.dhead .c-head{border-bottom:0}
.relay{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:10px 16px;background:var(--keros-soft);border-bottom:1px solid var(--line);font-size:12.5px}
.relay .lbl-up{margin-right:4px}
.hop{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:3px 10px 3px 3px}
.hop img{width:22px;height:22px}
.hop.done{color:var(--muted)} .hop.now{border-color:var(--keros);font-weight:600} .hop.next{opacity:.7}
.arrow{color:var(--keros-deep);font-weight:700}
.pw{border-bottom:1px solid var(--line);padding:10px 16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:6px;background:var(--surface-2);max-height:40vh;overflow-y:auto}
.power{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;background:var(--surface);border-radius:10px;padding:7px 10px}
.power b{font-weight:500;font-size:13px;display:block;line-height:1.3}
.power small{color:var(--muted);font-size:11.5px;line-height:1.3;display:block}
.mode{font-size:10.5px;font-weight:600;border-radius:6px;padding:2px 6px;border:1px solid var(--line);background:var(--surface);white-space:nowrap;color:var(--muted)}
button.mode{cursor:pointer}
.mode.auto{color:var(--ok);border-color:var(--ok)}
.msgs{flex:1;padding:18px;display:flex;flex-direction:column;gap:16px;overflow-y:auto}
.steps{display:grid;gap:6px;background:var(--surface-2);border-radius:14px;padding:12px 14px;max-width:520px}
.step{display:flex;gap:10px;align-items:center;font-size:13px}
.step i{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;flex:none;font-style:normal;color:#fff;background:var(--surface)}
.step.ok i{background:var(--ok);border-color:var(--ok)}
.step.now i{border-color:var(--run);border-top-color:transparent;animation:rot 1s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.step.todo{color:var(--muted)}
.msg{display:flex;gap:8px;align-items:flex-end;max-width:min(700px,92%)}
.msg.me{align-self:flex-end;flex-direction:row-reverse}
.msg img,.msg .me-av{width:30px;height:30px}
.msg .me-av{border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:700;flex:none}
.msg .col{min-width:0;display:grid}
.bub{background:var(--surface-2);border-radius:14px 14px 14px 4px;padding:9px 12px;white-space:pre-wrap;overflow-wrap:anywhere;min-width:0}
.me .bub{background:var(--accent);color:var(--accent-fg);border-radius:14px 14px 4px 14px}
.bub .who{display:block;font-size:11px;font-weight:700;color:var(--keros-deep);margin-bottom:2px}
.bub .vtag{display:block;font-size:11px;opacity:.75;margin-bottom:2px}
.handoff{align-self:center;display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);background:var(--surface-2);border-radius:999px;padding:4px 12px 4px 4px}
.handoff img{width:22px;height:22px}
.acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;align-items:center}
.ic2{width:28px;height:28px;border:0;background:transparent;color:var(--muted);border-radius:8px;display:grid;place-items:center;cursor:pointer}
.ic2:hover{background:var(--surface-2);color:var(--fg)}
.val{border:1.5px solid var(--bad);border-radius:14px;padding:12px;display:grid;gap:10px;max-width:620px;margin-left:38px}
.val h4{margin:0;font-size:13px;display:flex;justify-content:space-between;gap:8px}
.val h4 span{color:var(--bad);font-size:11.5px}
.val pre,.val textarea{margin:0;white-space:pre-wrap;font:13px/1.5 var(--body);background:var(--surface-2);border-radius:10px;padding:10px 12px;color:var(--fg)}
.val textarea{width:100%;min-height:150px;border:1px solid var(--keros);resize:vertical}
.start{margin:auto;max-width:460px;text-align:center;display:grid;gap:12px;justify-items:center}
.start img{width:84px;height:84px}
.start p{margin:0;color:var(--muted)}
.sugg{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.sugg button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 12px;font-size:12.5px;cursor:pointer;color:var(--muted)}
.sugg button:hover{border-color:var(--keros);color:var(--fg)}
.compose{display:flex;align-items:center;gap:6px;margin:0 14px 6px;border:1.5px solid var(--line);border-radius:16px;padding:6px;background:var(--surface)}
.compose:focus-within{border-color:var(--keros)}
.compose input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:15px;color:var(--fg);padding:8px 6px}
.compose input:focus-visible{outline:none}
.icon-btn{width:38px;height:38px;border-radius:11px;border:0;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer;flex:none}
.icon-btn:hover{background:var(--surface-2);color:var(--fg)}
.fine{font-size:11px;color:var(--muted);text-align:center;margin:0 0 10px}

/* Tableaux de bord */
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.kpis4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:900px){.kpis4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.kpis{grid-template-columns:minmax(0,1fr)}}
@media (max-width:420px){.kpis4{grid-template-columns:minmax(0,1fr)}}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 16px;display:grid;gap:2px;position:relative;overflow:hidden}
.kpi .lbl-up{color:var(--muted)}
.kpi b{font-family:var(--display);font-size:26px;font-weight:700;font-variant-numeric:tabular-nums}
.kpi small{color:var(--muted);font-size:12px}
.kpi:first-child b{color:var(--keros-deep)}
.kpis .kpi:nth-child(2) b{color:var(--warn)}
.kpi .wm{position:absolute;right:-18px;bottom:-18px;width:80px;height:80px;opacity:.09}
.dgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:12px;align-items:start}
@media (max-width:1000px){.dgrid{grid-template-columns:minmax(0,1fr)}}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 16px;min-width:0}
.panel h3{margin:0 0 10px;font-size:14px;font-weight:700}
.panel .tblwrap{border:0;border-radius:0;margin:0 -16px -14px}
.panel table{min-width:560px}
svg.chart{width:100%;height:auto;display:block}
svg.chart .ax{fill:var(--muted);font:11px var(--body)}
svg.chart .vl{fill:var(--fg);font:600 11px var(--body)}
svg.chart .grid{stroke:var(--line)}
svg.chart .bar{fill:var(--keros)}
svg.chart .bar.last{fill:var(--keros-deep)}
.funnel{display:grid;gap:7px}
.frow{display:grid;grid-template-columns:120px minmax(0,1fr) 44px;gap:10px;align-items:center;font-size:12.5px}
.frow .fb{height:20px;border-radius:6px;background:var(--surface-2);overflow:hidden}
.frow .fb i{display:block;height:100%;background:var(--keros);border-radius:6px}
.frow b{text-align:right;font-variant-numeric:tabular-nums}
.frow small{grid-column:2/4;color:var(--muted);font-size:11px;margin-top:-4px}
.src{font-size:12px;color:var(--muted);margin:0}
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.select{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:7px 12px;font-weight:600;font-size:13px}
.acts3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:900px){.acts3{grid-template-columns:minmax(0,1fr)}}
.alist{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px;display:grid;gap:8px;align-content:start}
.alist h3{margin:0 0 2px;font-size:14px;font-weight:700;display:flex;justify-content:space-between;align-items:center}
.alist h3 .n{font-size:11px;border-radius:999px;padding:1px 8px;background:var(--surface-2);color:var(--muted)}
.aitem{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;background:var(--surface-2);border-radius:10px;padding:8px 10px;font-size:12.5px}
.aitem b{display:block;font-size:13px}
.aitem small{color:var(--muted)}
.aitem .btn{padding:5px 10px;font-size:12px}
.tabs{display:flex;gap:4px;background:var(--surface-2);border-radius:12px;padding:3px;width:max-content;max-width:100%}
.tabs button{border:0;background:transparent;border-radius:9px;padding:6px 14px;font-weight:600;font-size:13px;cursor:pointer;color:var(--muted)}
.tabs button[aria-selected="true"]{background:var(--surface);color:var(--fg);box-shadow:0 1px 3px rgb(0 0 0 / .1)}
.tblwrap{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:860px;font-size:13px}
th{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
td.marge{color:var(--keros-deep);font-weight:700}
tr.gap td{background:color-mix(in srgb,var(--warn) 9%,transparent)}
.st{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:12px;font-weight:700}
.st.y{background:var(--keros-soft);color:var(--keros-deep)} .st.n{background:var(--surface-2);color:var(--muted)} .st.w{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.note{font-size:12px;color:var(--warn);font-weight:600}
.legend{font-size:12px;color:var(--muted);display:flex;gap:14px;flex-wrap:wrap;margin:0}

/* Mode vocal dans la discussion */
.voice{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;text-align:center;background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(6px)}
.voice::before{content:"";position:absolute;left:50%;top:42%;width:min(560px,120%);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,var(--glow) 0,transparent 62%);opacity:.7;pointer-events:none}
.orb{position:relative;width:min(320px,62vw,44vh);aspect-ratio:1}
.orb canvas{position:absolute;inset:0;width:100%;height:100%}
.core{position:absolute;left:50%;top:50%;width:40%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:4px solid var(--surface);box-shadow:0 6px 24px rgb(20 33 61 / .18);overflow:hidden}
.core img{width:100%;height:100%}
.v-status{position:relative;margin:0;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.v-lines{position:relative;max-width:420px;font-size:14px;margin:0}
.v-row{position:relative;display:flex;gap:12px;align-items:center}

/* Réglages */
.settings{display:grid;gap:16px;max-width:820px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px}
.card h2{font-family:var(--display);font-weight:700;font-size:17px;margin:0 0 8px}
.card p{margin:0 0 8px;color:var(--muted)}
.card code{background:var(--surface-2);border-radius:6px;padding:1px 6px;font-size:12.5px}
.card ul{margin:0 0 8px;padding-left:18px;color:var(--muted)}
.ok-txt{color:var(--ok);font-weight:600}
.hist-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;padding:8px 0;border-top:1px solid var(--line);font-size:13px}
.hist-row:first-of-type{border-top:0}
.hist-row time{color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.hist-row span{min-width:0;overflow-wrap:anywhere}

/* Connexion */
.login{min-height:100%;display:grid;place-items:center;padding:24px max(16px, env(safe-area-inset-left, 0px));background:radial-gradient(circle at 80% 10%,var(--keros-soft),transparent 45%),var(--bg)}
.login form{width:min(390px,100%);background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:26px 22px;display:grid;gap:14px;box-shadow:0 20px 50px rgb(15 23 22 / .08)}
.login-brand{display:flex;align-items:center;gap:10px}
.login-brand .mark{width:38px;height:38px}
.login-brand h1{font-family:var(--display);font-weight:800;font-size:30px;margin:0;letter-spacing:-.01em;line-height:1}
.login-brand .by img{height:18px}
.login p{margin:0;color:var(--muted)}
.login label{display:grid;gap:5px;font-weight:600;font-size:13px}
.login input{border:1.5px solid var(--line);background:var(--surface);color:var(--fg);border-radius:12px;padding:11px 12px;font:inherit;font-size:15px}
.login input:focus{border-color:var(--keros);outline:none}
.login .err{color:var(--bad);font-size:13px;min-height:1.2em}
.login .gods-row{display:flex;justify-content:center}
.login .gods-row img{width:34px;height:34px;margin-left:-8px;border:2px solid var(--surface)}

@media (prefers-reduced-motion:reduce){.sd.run{animation:none}.step.now i{animation:none;border-top-color:var(--run)}}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom, 0px));background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;font-weight:500;z-index:20;box-shadow:0 8px 24px rgb(0 0 0 / .25);max-width:calc(100% - 32px)}