[hidden]{display:none!important}
:root{
  --bg:#0c111c;--side:#0f1522;--surface:#141b29;--surface-2:#1b2436;--line:#2a3448;--line-soft:#1f2838;
  --text:#e9eef7;--muted:#a3adbf;--soft:#c6cedc;
  --cyan:#7fd8e6;--cyan-ink:#0c111c;--teal:#2f8fa0;--teal-bg:#11303a;--violet:#c8a6ff;--violet-bg:#2a2340;
  --orange:#f2b880;--orange-bg:#2a2016;--green:#6fd3a0;--green-bg:#15302a;--red:#ff9b9b;--red-bg:#3a1d22;
  --radius:14px;--display:"Space Grotesk",system-ui,sans-serif;--body:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 var(--body);-webkit-font-smoothing:antialiased}
a{color:var(--cyan)}a:hover{color:#b3e8f0}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.3px;margin:0}
h1{font-size:28px}h2{font-size:19px}h3{font-size:15px;font-family:var(--body)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.boot{min-height:100vh;display:grid;place-items:center}
.muted{color:var(--muted)}.small{font-size:13px}.tiny{font-size:12px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--text);font-weight:500;font-size:14px;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{border-color:#3a4766;color:var(--text)}
.btn.primary{background:var(--cyan);border-color:var(--cyan);color:var(--cyan-ink);font-weight:600}
.btn.primary:hover{background:#9fe3ee}
.btn.ghost{background:transparent}
.btn.danger{color:var(--red);border-color:#5a2e36;background:transparent}
.btn.sm{min-height:36px;padding:0 12px;font-size:13px;border-radius:10px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.linkbtn{background:none;border:0;padding:0;color:var(--cyan);font-weight:600;cursor:pointer;min-height:32px}
.iconbtn{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:transparent;display:inline-grid;place-items:center;cursor:pointer;color:var(--text)}

/* champs */
label.f{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
.input,select.input,textarea.input{width:100%;min-height:44px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--text);padding:0 12px;font-size:14px}
textarea.input{padding:10px 12px;min-height:96px;resize:vertical;line-height:1.5}
.input:focus{border-color:var(--cyan);outline:none}
.check{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text);min-height:32px}
.check input{width:18px;height:18px;accent-color:var(--cyan)}
.row{display:flex;gap:14px;flex-wrap:wrap}.row>*{flex:1 1 220px}
.stack{display:flex;flex-direction:column;gap:14px}
.seg{display:inline-flex;padding:4px;border-radius:12px;background:var(--bg);border:1px solid var(--line);flex-wrap:wrap}
.seg button{min-height:36px;padding:0 14px;border-radius:9px;border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:13px}
.seg button[aria-pressed="true"]{background:var(--surface-2);color:var(--text);font-weight:600}
.money{display:flex;align-items:center;border-radius:10px;border:1px solid var(--line);background:var(--bg);padding:0 10px;min-height:40px}
.money input{flex:1;min-width:0;border:0;background:transparent;font-family:var(--display);font-weight:600;font-size:15px;outline:none;width:70px}
.money:focus-within{border-color:var(--cyan)}
.money span{color:var(--muted);font-size:13px}

/* mise en page */
.shell{min-height:100vh;display:flex;flex-wrap:wrap}
.side{flex:1 1 240px;max-width:100%;background:var(--side);border-right:1px solid var(--line);padding:22px 16px;display:flex;flex-direction:column;gap:20px}
.side .logo img{height:36px;width:auto;display:block}
.side .logo{display:flex;align-items:center;gap:10px;padding:0 6px}
.chip-role{font-size:11px;font-weight:600;padding:3px 8px;border-radius:6px;background:var(--surface-2);color:var(--soft)}
.nav{display:flex;flex-direction:column;gap:4px}
.nav a{min-height:42px;padding:0 12px;border-radius:10px;display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--muted);font-weight:500;font-size:14px}
.nav a[aria-current="page"]{background:var(--surface-2);color:var(--text);font-weight:600}
.nav a:hover{color:var(--text)}
.nav .sep{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);padding:10px 12px 2px}
.kubecard{display:flex;align-items:center;gap:10px;padding:12px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line)}
.kubecard .t{font-weight:600;font-size:14px}
.side .foot{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.main{flex:999 1 560px;min-width:0;padding:30px 40px 60px;display:flex;flex-direction:column;gap:22px}
@media (max-width:860px){.main{padding:22px 16px 60px}.side{border-right:0;border-bottom:1px solid var(--line)}.side .foot{margin-top:0}}
.head{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;justify-content:space-between}
.head .sub{color:var(--muted);font-size:14px;margin-top:6px}
.crumb{font-size:13px;color:var(--muted);margin-bottom:6px}.crumb a{text-decoration:none}
.card{padding:20px;border-radius:16px;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:14px}
.card.flat{background:transparent}
.grid2{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start}.grid2>.wide{flex:999 1 520px;min-width:0}.grid2>.narrow{flex:1 1 300px;min-width:0}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.tile{padding:16px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.tile b{display:block;font-family:var(--display);font-size:26px}
.empty{padding:28px;border:1.5px dashed var(--line);border-radius:16px;text-align:center;color:var(--muted)}

/* tableaux */
.tablebox{overflow-x:auto;border-radius:16px;border:1px solid var(--line);background:var(--surface)}
table.t{width:100%;border-collapse:collapse;min-width:720px}
table.t th{text-align:left;font-size:12px;font-weight:600;color:var(--muted);padding:12px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
table.t td{padding:10px 14px;border-bottom:1px solid var(--line-soft);vertical-align:middle;font-size:14px}
table.t tr:last-child td{border-bottom:0}
table.t tr.sel td{background:#13272f}
table.t tr.zone td{background:var(--bg);font-weight:600;font-size:13px;color:var(--soft)}
.pname{display:flex;align-items:center;gap:12px;min-width:0}
.dot{width:34px;height:34px;border-radius:9px;flex:none;border:1px solid rgba(255,255,255,.08);background-size:cover;background-position:center}
.pname b{display:block;font-weight:600}.pname small{color:var(--muted);font-size:12px}

/* pastilles */
.pill{display:inline-flex;align-items:center;font-size:12px;font-weight:600;padding:3px 9px;border-radius:8px;white-space:nowrap}
.pill.green{background:var(--green-bg);color:var(--green)}.pill.orange{background:var(--orange-bg);color:var(--orange)}
.pill.violet{background:var(--violet-bg);color:var(--violet)}.pill.grey{background:#222b3b;color:var(--soft)}
.pill.cyan{background:var(--teal-bg);color:var(--cyan)}.pill.red{background:var(--red-bg);color:var(--red)}
.pill.promo{background:var(--orange);color:#0c111c}

.bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;background:var(--teal-bg);border:1px solid var(--teal)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{min-height:36px;padding:0 14px;border-radius:18px;border:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer;font-size:13px}
.chips button[aria-pressed="true"]{background:var(--text);color:var(--bg);border-color:var(--text);font-weight:600}
.note{display:flex;gap:10px;padding:12px 14px;border-radius:12px;font-size:13px;line-height:1.5}
.note.info{background:var(--teal-bg);border:1px solid #26707e;color:#d5dce8}
.note.warn{background:var(--orange-bg);border:1px solid #7a5a3a;color:#f6cfa6}
.note.err{background:var(--red-bg);border:1px solid #6b3640;color:#ffc9c9}
code.inline,pre.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;background:var(--bg);border:1px solid var(--line);border-radius:8px}
code.inline{padding:2px 6px}pre.code{padding:12px;white-space:pre-wrap;word-break:break-all;margin:0}

/* connexion */
.auth{min-height:100vh;display:grid;place-items:center;padding:24px}
.auth .box{width:100%;max-width:420px;display:flex;flex-direction:column;gap:22px}
.auth .box img.logo{height:44px;width:auto;align-self:flex-start}

/* import */
.how{font-size:12px;color:var(--muted)}
.diff{display:flex;flex-wrap:wrap;gap:4px}
.diff span{font-size:11px;padding:2px 6px;border-radius:6px;background:var(--surface-2);color:var(--soft)}
.diff span.conflict{background:var(--orange-bg);color:var(--orange)}
.drop{border:1.5px dashed #3c4a66;border-radius:16px;padding:28px;text-align:center;color:var(--soft);cursor:pointer;background:transparent;width:100%}
.drop.over{border-color:var(--cyan);background:var(--teal-bg)}

/* photos */
.photos{display:flex;flex-wrap:wrap;gap:10px}
.photo{position:relative;width:104px;height:104px;border-radius:12px;background:var(--surface-2) center/cover no-repeat;border:1px solid var(--line)}
.photo .x{position:absolute;top:4px;right:4px;width:28px;height:28px;border-radius:14px;border:0;background:rgba(12,17,28,.85);color:var(--text);cursor:pointer}
.photo .main{position:absolute;left:4px;bottom:4px;font-size:11px;font-weight:600;padding:2px 6px;border-radius:6px;background:var(--bg)}

/* toasts & modale */
#toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:50;width:min(440px,calc(100vw - 32px))}
.toast{padding:12px 16px;border-radius:12px;background:var(--text);color:var(--bg);font-weight:500;font-size:14px;box-shadow:0 8px 30px rgba(0,0,0,.4)}
.toast.err{background:#ffd6d6;color:#3a0d12}
dialog#modal{border:1px solid var(--line);border-radius:18px;background:var(--surface);color:var(--text);padding:22px;width:min(520px,calc(100vw - 32px))}
dialog#modal::backdrop{background:rgba(5,8,14,.7)}
.spin{width:18px;height:18px;border:2px solid var(--line);border-top-color:var(--cyan);border-radius:50%;animation:sp 1s linear infinite;display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:3s}}
@media (max-width:860px){
  .side{padding:14px 16px;gap:12px}
  .nav{flex-direction:row;overflow-x:auto;gap:6px;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav a{flex:none;min-height:40px}
  .nav .sep{display:none}
  .side .foot{flex-direction:row;flex-wrap:wrap;align-items:center}
  .side .foot .tiny{display:none}
  .side .foot>*{flex:1 1 auto}
  .seg{max-width:100%}
  h1{font-size:24px}
}