/* status.artaun.fr — jetons identiques à l'espace client. */
@import url("icons.css");
:root{color-scheme:light;--bg:#f6f6f8;--bg-2:#efeff3;--surface:#ffffff;--surface-2:#f7f7f9;--surface-3:#f1f1f5;--hover:rgba(20,16,42,.045);--border:rgba(20,16,42,.09);--border-2:rgba(20,16,42,.15);--text:#16141f;--text-2:#46434f;--muted:#76737f;--faint:#a3a1ab;--brand:#6d28d9;--brand-2:#5b21b6;--brand-soft:rgba(109,40,217,.08);--ok:#15803d;--ok-soft:rgba(21,128,61,.09);--warn:#b45309;--warn-soft:rgba(180,83,9,.1);--bad:#be123c;--bad-soft:rgba(190,18,60,.08);--info:#2563eb;--info-soft:rgba(37,99,235,.09);--shadow-sm:0 1px 2px rgba(20,16,42,.05);--shadow:0 10px 30px -12px rgba(20,16,42,.18);--r:10px;--r-md:12px;--r-lg:16px;--r-xl:20px;--f-body:"Inter",system-ui,sans-serif;--f-display:"Space Grotesk","Inter",sans-serif}
html.dark{color-scheme:dark;--bg:#0c0c10;--bg-2:#111116;--surface:#15151b;--surface-2:#1a1a21;--surface-3:#202029;--hover:rgba(255,255,255,.045);--border:rgba(255,255,255,.08);--border-2:rgba(255,255,255,.14);--text:#f1f0f5;--text-2:#c7c5d0;--muted:#8f8d9a;--faint:#62606c;--brand:#8b5cf6;--brand-2:#7c3aed;--brand-soft:rgba(167,139,250,.12);--ok:#4ade80;--ok-soft:rgba(74,222,128,.1);--warn:#fbbf24;--warn-soft:rgba(251,191,36,.1);--bad:#fb7185;--bad-soft:rgba(251,113,133,.1);--info:#60a5fa;--info-soft:rgba(96,165,250,.12);--shadow-sm:0 1px 2px rgba(0,0,0,.4);--shadow:0 12px 32px -14px rgba(0,0,0,.7)}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:14.5px/1.55 var(--f-body);-webkit-font-smoothing:antialiased;min-height:100dvh;display:flex;flex-direction:column}
h1,h2,h3{font-family:var(--f-display);font-weight:600;letter-spacing:-.015em;margin:0;line-height:1.25}
a{color:var(--brand);text-decoration:none}
.wrap{width:100%;max-width:880px;margin:0 auto;padding:0 16px}
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border-2);background:var(--surface);color:var(--text);font-size:13px;font-weight:600;padding:7px 13px;border-radius:var(--r)}
.btn:hover{border-color:var(--brand);color:var(--brand)}
.ibtn{width:36px;height:36px;border-radius:var(--r);border:0;background:transparent;color:var(--text-2);cursor:pointer;font-size:17px}
.ibtn:hover{background:var(--hover)}
.hd{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.hd-in{display:flex;align-items:center;gap:12px;height:62px}
.brand{display:flex;align-items:center;gap:10px;color:var(--text)}
.brand img{width:34px;height:34px;border-radius:9px}
.brand b{display:block;font-family:var(--f-display);font-size:16px;line-height:1.1}.brand small{color:var(--muted);font-size:12px}
.hd-r{margin-left:auto;display:flex;align-items:center;gap:6px}
.live{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:12px;font-weight:600;margin-right:4px}
.live i{width:8px;height:8px;border-radius:50%;background:var(--ok)}
.live.beat i{animation:beat .9s}.live.off i{background:var(--bad)}
@keyframes beat{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 60%,transparent)}100%{box-shadow:0 0 0 7px transparent}}
.main{padding:28px 16px 56px;flex:1}
.banner{display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--border);margin-bottom:22px}
.ban-ic{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:18px;flex:none;color:#fff}
.banner.ok .ban-ic{background:var(--ok)}.banner.warn .ban-ic{background:var(--warn)}.banner.bad .ban-ic{background:var(--bad)}.banner.info .ban-ic{background:var(--info)}.banner.off .ban-ic{background:var(--faint)}
.banner h1{font-size:17px}.banner p{margin:2px 0 0;color:var(--muted);font-size:13px}
.sec-row{display:flex;align-items:baseline;gap:10px;margin:28px 0 12px}
.sec-t{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);font-family:var(--f-body);margin:28px 0 12px}
.sec-row .sec-t{margin:0}
.hint{color:var(--faint);font-size:12px}
.more{margin-left:auto;color:var(--text-2);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.more:hover{color:var(--text)}
.svcs{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:4px 16px}
.grp-t{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);padding:14px 0 2px}
.svc{padding:12px 0;border-bottom:1px solid var(--border)}
.svc:last-child{border-bottom:0}
.svc-main{display:flex;align-items:center;gap:10px;cursor:pointer}
.svc-n{flex:1;min-width:0;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.svc-ms{color:var(--faint);font-size:12px;font-variant-numeric:tabular-nums}
.dot{width:9px;height:9px;border-radius:50%;flex:none}
.dot.ok{background:var(--ok)}.dot.bad{background:var(--bad)}.dot.info{background:var(--info)}.dot.off{background:var(--faint)}
.st{font-size:12.5px;font-weight:600;min-width:84px;text-align:right}.st.ok{color:var(--ok)}.st.bad{color:var(--bad)}.st.info{color:var(--info)}.st.off{color:var(--muted)}
.chev{color:var(--faint);font-size:12px;transition:transform .15s}.svc.open .chev{transform:rotate(180deg)}
.bars{display:flex;gap:2px;margin-top:10px;height:26px}
.b{flex:1;border-radius:2px;background:var(--surface-3);cursor:pointer;min-width:2px}
.b:hover{opacity:.7}.b.s-u{background:var(--ok)}.b.s-p{background:var(--warn)}.b.s-d{background:var(--bad)}.b.s-m{background:var(--info)}
.bars-l{display:flex;justify-content:space-between;color:var(--faint);font-size:11px;margin-top:5px}
.detail{margin-top:12px}
.kp{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.kp div{background:var(--surface-2);border-radius:var(--r);padding:8px 10px}.kp span{display:block;color:var(--muted);font-size:11px}.kp b{font-family:var(--f-display);font-size:15px}
.ch{height:170px;position:relative;margin-bottom:6px}
/* avis / incidents */
.day{display:flex;align-items:center;gap:14px;margin:22px 0 10px;font-weight:700;font-size:14px}.day i{flex:1;height:1px;background:var(--border)}
.inc{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px 18px;margin-bottom:12px}
.inc-top{display:flex;gap:12px;align-items:flex-start}
.inc-ic{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;font-size:15px;color:#fff}
.inc-ic.ok{background:var(--ok)}.inc-ic.warn{background:var(--warn)}.inc-ic.bad{background:var(--bad)}.inc-ic.info{background:var(--info)}
.inc-tt{flex:1;min-width:0}.inc-tt h3{font-size:15px}
.inc-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12.5px;color:var(--muted);margin-top:3px}
.inc-meta .sep{color:var(--faint)}.inc-meta .bi{font-size:11px}
.c-ok{color:var(--ok);font-weight:600}.c-warn{color:var(--warn);font-weight:600}.c-bad{color:var(--bad)}.c-info{color:var(--info);font-weight:600}
.inc-d{margin:8px 0 0;color:var(--text-2);font-size:13.5px}
.tl{list-style:none;margin:14px 0 0;padding:0;position:relative}
.tl li{display:grid;grid-template-columns:120px 1fr;gap:14px;position:relative;padding-bottom:16px}
.tl li:last-child{padding-bottom:0}
.tl li:not(:last-child)::before{content:"";position:absolute;left:60px;top:30px;bottom:0;width:1px;background:var(--border-2)}
.tl-pill{align-self:start;justify-self:stretch;text-align:center;font-size:12px;font-weight:600;padding:6px 8px;border-radius:999px;border:1px solid var(--border-2);color:var(--text-2);background:var(--surface);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;z-index:1}
.tl-pill.on{background:var(--text);color:var(--bg);border-color:var(--text)}
.tl time{color:var(--muted);font-size:12.5px}.tl p{margin:2px 0 0;font-size:13.5px;color:var(--text-2)}
.back{display:inline-flex;gap:6px;align-items:center;color:var(--muted);font-size:13px;margin-bottom:10px}.pg-t{font-size:20px;margin-bottom:6px}
.empty{text-align:center;color:var(--muted);padding:26px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg)}
.empty .bi{display:block;font-size:24px;color:var(--ok);margin-bottom:6px}
.tip{position:absolute;z-index:50;display:none;background:var(--surface);color:var(--text);border:1px solid var(--border-2);border-radius:8px;padding:6px 9px;font-size:12px;box-shadow:var(--shadow);pointer-events:none;white-space:nowrap}
.ft{border-top:1px solid var(--border);padding:20px 0;color:var(--faint);font-size:12px}.ft .wrap{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
@media(max-width:640px){.kp{grid-template-columns:repeat(2,1fr)}.bars{gap:1px;height:22px}.bars .b:nth-child(-n+30){display:none}.bars-l span:first-child{visibility:hidden}
.tl li{grid-template-columns:1fr;gap:6px}.tl li::before{display:none}.tl-pill{justify-self:start}.hd .btn{display:none}.svc-ms{display:none}.st{min-width:0}}
.inc.coll .inc-top{cursor:pointer}.inc.coll .chev{margin-left:auto;align-self:center;color:var(--faint);transition:transform .15s}.inc.coll.open .chev{transform:rotate(180deg)}
.inc.coll:not(.open){padding-top:13px;padding-bottom:13px}

.det-btn{margin-top:8px;background:none;border:0;padding:0;color:var(--info,#3b82f6);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.det-btn:hover{text-decoration:underline}
.inc-full{white-space:normal;line-height:1.6;margin-top:8px}