:root{--bg:#0B0F14;--panel:#141A22;--panel2:#1B222C;--line:#263040;--text:#E6EDF3;--muted:#9BA7B4;--dim:#8B97A5;--blue:#58A6FF;--green:#3FB950;--orange:#F0A04B;--red:#FF6B6B}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:Manrope,system-ui,sans-serif}
button,input,select{font-family:inherit}
.app{min-height:100vh;padding:24px 28px 60px}
.wrap{max-width:1600px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
.boot{color:var(--muted);text-align:center;padding:80px 0}
/* connexion */
.login{max-width:380px;margin:12vh auto 0;padding:28px;border:1px solid var(--line);border-radius:18px;background:var(--panel);display:flex;flex-direction:column;gap:14px}
.login h1{margin:0;font-size:22px}
.login p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.login label{font-size:13px;font-weight:700;color:var(--muted)}
.login input{height:42px;border-radius:10px;border:1px solid #2B3644;background:#0F141B;color:var(--text);font-size:16px;padding:0 12px}
.login .err{color:#FF9C94;font-size:13px;min-height:18px}
.btn{display:inline-flex;gap:6px;align-items:center;justify-content:center;height:36px;padding:0 14px;border-radius:9px;border:1px solid #2F6FEB;background:#1F4FB4;color:#fff;font-weight:700;font-size:13px;cursor:pointer;white-space:nowrap}
.btn:hover{background:#2A5FD0}
.btn:disabled{background:var(--panel2);border-color:#2B3644;color:var(--dim);cursor:not-allowed}
.btn.ghost{background:transparent;border-color:#2B3644;color:var(--text)}
.btn.ghost:hover{border-color:var(--blue)}
.btn.danger{background:transparent;border-color:#6E2B2B;color:#FF9C94}
.btn svg{fill:currentColor}
/* entête */
.top{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.title h1{margin:0;font-size:27px;font-weight:800;letter-spacing:-.02em}
.title p{margin:4px 0 0;color:var(--muted);font-size:13px}
.mono{font-family:'JetBrains Mono',monospace}
.top-actions{display:flex;gap:8px;flex-wrap:wrap}
.agent{display:flex;gap:10px;align-items:center;padding:10px 14px;border-radius:12px;font-size:13px;line-height:1.4}
.agent.ok{background:#11251A;color:#9BE0AE}
.agent.bad{background:#2A1517;color:#FFB4AE}
.agent i{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.agent.ok i{background:var(--green)}.agent.bad i{background:var(--red)}
.sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.kpi{display:flex;flex-direction:column;gap:4px;text-align:left;padding:13px 15px;border-radius:14px;border:1px solid #232C38;background:var(--panel);color:var(--text);cursor:pointer}
.kpi:hover{border-color:#3A4757}
.kpi.sel{border-color:var(--blue);background:#16202C}
.kpi .n{font-size:32px;font-weight:600;line-height:1;font-family:'JetBrains Mono',monospace}
.kpi .l{font-size:13px;color:var(--muted);font-weight:600}
.k-active .n{color:var(--green)}.k-running .n{color:var(--blue)}.k-success .n{color:#7EE787}.k-waiting .n{color:var(--orange)}.k-error .n{color:#FF7B72}.k-unknown .n{color:#C6CDD5}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip{height:34px;padding:0 13px;border-radius:999px;border:1px solid #2B3644;background:transparent;color:#C6CDD5;font-weight:600;font-size:13px;cursor:pointer;white-space:nowrap}
.chip.on{background:var(--text);color:var(--bg);border-color:var(--text)}
.grow{flex:1 1 auto}
.flbl{font-size:12px;color:var(--dim)}
.fsel,.fsearch{height:36px;border-radius:9px;border:1px solid #2B3644;background:var(--panel);color:var(--text);font-size:14px;padding:0 10px}
.fsearch{flex:1 1 220px;min-width:170px}
/* tuiles */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:16px}
.tile{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:11px;padding:18px 18px 16px;border-radius:18px;border:1.5px solid var(--line);background:var(--panel);transition:border-color .3s,opacity .3s}
.t-head{display:flex;gap:8px;align-items:center;justify-content:space-between}
.co{font-size:12px;font-weight:700;padding:3px 9px;border-radius:6px;white-space:nowrap}
.co-senzo{background:#1D2A3D;color:#9CC8FF}.co-just{background:#2E2618;color:#F2C879}.co-canna{background:#1C2E22;color:#8FDCA4}.co-fra{background:#2E1F26;color:#F5A7C0}.co-autres{background:#262838;color:#BFC3EE}
.cat{font-size:12px;color:var(--dim);white-space:nowrap}
.t-name{all:unset;cursor:pointer;font-size:19px;font-weight:800;line-height:1.25;color:#F2F6FA}
.t-name:hover{text-decoration:underline;text-underline-offset:3px}
.t-name:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
.t-desc{margin:0;font-size:14px;line-height:1.45;color:#A8B3BF}
.t-state{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--panel2)}
.ico{display:inline-flex;width:30px;height:30px;border-radius:50%;align-items:center;justify-content:center;flex:0 0 auto}
.ico svg{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.st-label{font-size:15px;font-weight:800}
.times{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.times div{display:flex;flex-direction:column;gap:2px;min-width:0}
.times dt{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--dim)}
.times dd{margin:0;font-size:13px;color:#D5DCE3;line-height:1.35}
.res-ok{color:#7EE787!important}.res-ko{color:#FF7B72!important}
.foot{margin-top:auto;display:flex;gap:8px;align-items:center}
.sw-wrap{margin-left:auto;display:flex;gap:8px;align-items:center}
.sw-lbl{font-size:12px;color:var(--dim);white-space:nowrap}
.sw{position:relative;width:46px;height:28px;border-radius:999px;border:1px solid #3A4757;background:#2A323D;cursor:pointer;padding:0;flex:0 0 auto}
.sw .knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--dim);transition:left .2s}
.sw.on{background:#1F6F35;border-color:var(--green)}
.sw.on .knob{left:21px;background:#fff}
.sw:disabled{opacity:.45;cursor:not-allowed}
.prog{height:8px;border-radius:999px;background:#0E1A2A;overflow:hidden}
.bar{height:100%;border-radius:999px;background:var(--blue);transition:width .45s}
.bar.indet{width:100%;background:repeating-linear-gradient(-45deg,#2F6FEB 0 10px,#58A6FF 10px 20px);background-size:200% 100%;animation:stripes 1.2s linear infinite}
.prog-txt{margin:-3px 0 0;font-size:12px;color:#9CC8FF;line-height:1.4}
.note{margin:0;font-size:13px;line-height:1.45;padding:9px 11px;border-radius:10px;background:#1E232B;color:#C6CDD5}
.hint{margin:0;font-size:12px;color:var(--muted);line-height:1.4}
.glow{display:none;position:absolute;top:0;left:-45%;width:45%;height:3px;background:linear-gradient(90deg,transparent,#8CC4FF,transparent);animation:sweep 1.6s linear infinite}
.st-disabled{opacity:.62;border-color:#232A33}
.st-disabled .ico{background:#232A33;color:var(--dim)}.st-disabled .st-label{color:var(--muted)}
.st-ready{border-color:#1F5130}
.st-ready .ico{background:#173A23;color:var(--green)}.st-ready .st-label{color:#56D364}
.st-starting{border-color:#3B6FB0;border-style:dashed}
.st-starting .ico{background:#13294A;color:#8CC4FF}.st-starting .st-label{color:#8CC4FF}
.st-running{border-color:var(--blue);animation:pulse 1.8s ease-in-out infinite}
.st-running .glow{display:block}
.st-running .ico{background:#13294A;color:#8CC4FF}.st-running .st-label{color:#8CC4FF}
.st-running .ico svg{animation:spin 1s linear infinite}
.st-success{border-color:#2EA043}
.st-success .ico{background:#2EA043;color:#fff}.st-success .st-label{color:#7EE787}
.st-waiting{border-color:var(--orange);background:#1A1712}
.st-waiting .ico{background:#4A3112;color:var(--orange)}.st-waiting .st-label{color:#F6B66E}
.st-waiting .note{background:#2B1F10;color:#FFD3A1}
.st-error{border-color:var(--red);background:#1B1314}
.st-error .ico{background:#4A1A1C;color:#FF7B72}.st-error .st-label{color:#FF8E86}
.st-error .note{background:#2A1517;color:#FFB4AE}
.st-unknown{border-style:dashed;border-color:#5B6573}
.st-unknown .ico{background:#232A33;color:#C6CDD5}.st-unknown .st-label{color:#C6CDD5}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(88,166,255,0)}50%{box-shadow:0 0 26px 2px rgba(88,166,255,.38)}}
@keyframes sweep{from{left:-45%}to{left:100%}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes stripes{to{background-position:-40px 0}}
@media (prefers-reduced-motion:reduce){.st-running,.glow,.bar.indet,.st-running .ico svg{animation:none}.st-running{box-shadow:0 0 18px rgba(88,166,255,.35)}}
.empty{padding:40px;text-align:center;color:var(--muted);border:1px dashed #2B3644;border-radius:16px}
.toast{position:fixed;right:20px;bottom:20px;max-width:380px;padding:13px 16px;border-radius:12px;background:var(--text);color:var(--bg);font-size:14px;font-weight:600;line-height:1.4;box-shadow:0 10px 30px rgba(0,0,0,.45);z-index:30}
.toast.bad{background:#FFB4AE}
/* fiche */
.scrim{position:fixed;inset:0;background:rgba(3,6,10,.6);z-index:20}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(560px,100%);overflow-y:auto;background:#10151C;border-left:1px solid var(--line);z-index:21;padding:22px 24px 40px;display:flex;flex-direction:column;gap:18px}
.d-head{display:flex;gap:12px;align-items:flex-start;justify-content:space-between}
.d-head h2{margin:6px 0 0;font-size:22px;font-weight:800;line-height:1.25}
.sec h3{margin:0 0 8px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--dim)}
.sec p{margin:0;font-size:14px;line-height:1.5;color:#C6CDD5}
.caps{display:flex;flex-direction:column;gap:6px}
.cap{display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:start;padding:9px 11px;border-radius:10px;background:#161C25}
.cap b{font-size:13px;text-align:center;padding:2px 0;border-radius:6px}
.cap.yes b{background:#173A23;color:#56D364}.cap.no b{background:#2A2F37;color:#AEB7C1}
.cap .cl{font-size:14px;font-weight:700}.cap .cn{font-size:12px;color:var(--muted);line-height:1.4}
.hist{margin:0;padding:0;list-style:none}
.hist li{display:grid;grid-template-columns:118px 1fr;gap:10px;padding:8px 0;border-bottom:1px solid #1E2631;font-size:13px;line-height:1.4}
.hist .hw{font-family:'JetBrains Mono',monospace;color:var(--muted);font-size:12px}
.k-ok{color:#7EE787}.k-ko{color:#FF7B72}.k-warn{color:var(--orange)}.k-start{color:#8CC4FF}.k-action{color:#D5DCE3}.k-info{color:var(--muted)}
.params{margin:0;display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:6px 14px;font-size:13px}
.params dt{color:var(--dim)}.params dd{margin:0}
.log{margin:0;padding:10px 12px;border-radius:10px;background:#0B0F14;border:1px solid #1E2631;font-family:'JetBrains Mono',monospace;font-size:11.5px;line-height:1.5;color:#AEB7C1;white-space:pre-wrap;word-break:break-all}
/* grand écran */
.tv{padding:20px 26px}
.tv .grid{grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:18px}
.tv .t-name{font-size:22px}.tv .st-label{font-size:17px}.tv .kpi .n{font-size:42px}
.tv .filters{display:none}
@media (max-width:600px){.app{padding:16px}.title h1{font-size:23px}.grid{grid-template-columns:1fr}.times{grid-template-columns:1fr}
  .sum{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.kpi{padding:9px 10px}.kpi .n{font-size:22px}.kpi .l{font-size:12px}
  .tvbtn,.top-actions .tv-only{display:none}.flbl,.grow{display:none}.fsel{flex:1 1 40%;font-size:16px}.fsearch{flex:1 1 100%;font-size:16px}
  .filters{gap:6px}.chip{height:32px;padding:0 11px}}