/* t4hub — design system « Encre & Signal » étendu. Self-contained, aucun CDN. */
:root{
  --bg:#0f0f0e;--bg-2:#141413;--surface:#1a1a19;--surface-2:#20201f;--surface-3:#292927;
  --edge:#2c2c2a;--line:#3a3a37;
  --ink:#efede8;--ink-2:#bcb9b1;--ink-3:#8d8a81;--ink-4:#63615a;
  --up:#7fb069;--warn:#e3b341;--down:#e0654f;
  --sig:#5aa9ff;--sig-2:#9a7fd1;--sig-3:#4fd1b8;
  --mono:ui-monospace,'SF Mono',Menlo,monospace;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Inter',sans-serif;
  --serif:'Iowan Old Style','Palatino Linotype',Georgia,serif;
  --r:16px;--r-s:10px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink-2);font:15px/1.62 var(--sans);-webkit-font-smoothing:antialiased;min-height:100vh}
/* aurore + grain : la signature visuelle du hub */
body::before{content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(900px 480px at 12% -8%,rgba(90,169,255,.10),transparent 60%),
             radial-gradient(800px 420px at 88% -6%,rgba(154,127,209,.08),transparent 60%),
             radial-gradient(700px 500px at 50% 110%,rgba(79,209,184,.05),transparent 65%)}
body::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:var(--sig);text-decoration:none} a:hover{text-decoration:underline}
.wrap{max-width:1140px;margin:0 auto;padding:0 22px}
/* ---- shell (injecté par hub.js) ---- */
.hubtop{position:sticky;top:0;z-index:60;background:rgba(15,15,14,.82);backdrop-filter:blur(16px) saturate(1.2);border-bottom:1px solid var(--edge)}
.hubtop .wrap{display:flex;align-items:center;gap:20px;height:58px}
.hubmark{font:700 17px var(--mono);color:var(--ink);letter-spacing:.02em;white-space:nowrap}
.hubmark b{color:var(--sig);font-weight:700}
.hubnav{display:flex;gap:4px;font-size:13px;overflow-x:auto;scrollbar-width:none}
.hubnav::-webkit-scrollbar{display:none}
.hubnav a{color:var(--ink-3);padding:6px 11px;border-radius:8px;white-space:nowrap}
.hubnav a:hover{color:var(--ink);background:var(--surface-2);text-decoration:none}
.hubnav a.on{color:var(--ink);background:var(--surface-3)}
.hubstate{margin-left:auto;display:flex;align-items:center;gap:8px;font:11.5px var(--mono);color:var(--ink-3);white-space:nowrap}
/* ---- primitives ---- */
.dot{width:9px;height:9px;border-radius:50%;background:var(--ink-4);display:inline-block;flex:none}
.dot.up{background:var(--up);box-shadow:0 0 10px rgba(127,176,105,.55)}
.dot.slow,.dot.degraded,.dot.warn,.dot.unknown{background:var(--warn)}
.dot.down{background:var(--down);animation:hpulse 1.5s infinite}
@keyframes hpulse{50%{opacity:.35}}
.card{background:linear-gradient(180deg,#1c1c1b,#191918);border:1px solid var(--edge);border-radius:var(--r);padding:20px 22px;box-shadow:0 1px 0 rgba(255,255,255,.035) inset,0 10px 30px rgba(0,0,0,.28)}
.card.glass{background:rgba(28,28,27,.6);backdrop-filter:blur(10px)}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g2,.g3,.g4{grid-template-columns:1fr}}
section{padding:40px 0 6px}
.sechead{display:flex;align-items:baseline;gap:12px;margin-bottom:16px;flex-wrap:wrap}
h1.display{font-size:clamp(30px,5vw,44px);font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1.12}
h2{font-size:19px;color:var(--ink);font-weight:650;letter-spacing:-.01em}
h3{font-size:14px;color:var(--ink);font-weight:640}
.sub{font-size:12.5px;color:var(--ink-4)}
.kicker{font:600 11px var(--mono);color:var(--sig);text-transform:uppercase;letter-spacing:.14em}
.stat .v{font:750 27px var(--mono);color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat .l{font-size:11.5px;color:var(--ink-3);margin-top:3px}
.chip{font:11px var(--mono);border:1px solid var(--line);border-radius:99px;padding:3px 10px;color:var(--ink-3);cursor:pointer;background:none}
.chip.on,.chip:hover{color:var(--ink);border-color:var(--sig);background:rgba(90,169,255,.08)}
.sev{font:9.5px var(--mono);border-radius:5px;padding:1.5px 6px;border:1px solid var(--line);color:var(--ink-3);text-transform:uppercase}
.sev.major{color:var(--down);border-color:rgba(224,101,79,.4)}.sev.notable{color:var(--warn);border-color:rgba(227,179,65,.35)}
.stbadge{font:10px var(--mono);border-radius:5px;padding:1.5px 7px;background:var(--surface-3);color:var(--ink-3)}
.evt{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--surface-2);font-size:13.5px;align-items:baseline}
.evt:last-child{border-bottom:0}
.evt .t{font:10.5px var(--mono);color:var(--ink-4);white-space:nowrap}
.probe{background:var(--surface-2);border:1px solid var(--edge);border-radius:var(--r-s);padding:11px 13px;transition:border-color .15s}
.probe:hover{border-color:var(--line)}
.probe .nm{font-size:11px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.probe .st{display:flex;align-items:center;gap:7px;margin-top:5px;font:12.5px var(--mono);color:var(--ink)}
.probe .up24{font:10px var(--mono);color:var(--ink-4);margin-top:3px}
.recap{font-family:var(--serif);font-size:16.5px;line-height:1.78;color:var(--ink-2)}
.recap h3{font:650 15px var(--sans);color:var(--ink);margin:18px 0 6px}
.recap li{margin:4px 0 4px 18px}
.recap p{margin:9px 0}
.btn{display:inline-block;background:var(--surface-3);border:1px solid var(--line);color:var(--ink);border-radius:9px;padding:9px 16px;font:600 13px var(--sans);cursor:pointer}
.btn:hover{border-color:var(--sig);text-decoration:none}
.btn.primary{background:linear-gradient(135deg,rgba(90,169,255,.18),rgba(154,127,209,.14));border-color:rgba(90,169,255,.45)}
.skel{background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 50%,var(--surface-2) 75%);background-size:200% 100%;animation:hsh 1.2s infinite;border-radius:8px;min-height:16px}
@keyframes hsh{to{background-position:-200% 0}}
.err{color:var(--ink-4);font-size:12.5px;font-style:italic}
.tblwrap{overflow-x:auto}
table.t{width:100%;border-collapse:collapse}
table.t th{font:10.5px var(--mono);color:var(--ink-4);text-align:left;padding:8px 12px;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--edge)}
table.t td{padding:8px 12px;font-size:13px;border-bottom:1px solid var(--surface-2)}
footer.hubfoot{margin-top:60px;border-top:1px solid var(--edge);padding:26px 0 42px;font-size:12.5px;color:var(--ink-4)}
footer.hubfoot .links{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* ---- chat flottant (toutes les pages) ---- */
.chatfab{position:fixed;right:22px;bottom:22px;z-index:80;width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:linear-gradient(135deg,#232322,#1b1b1a);color:var(--ink);cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;font-size:20px}
.chatfab:hover{border-color:var(--sig)}
.chatfab .cb{position:absolute;top:-4px;right:-4px;background:var(--sig);color:#fff;font:700 10px var(--mono);border-radius:99px;min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.chatpanel{position:fixed;right:22px;bottom:84px;z-index:80;width:min(380px,calc(100vw - 32px));height:min(560px,calc(100vh - 130px));background:rgba(24,24,23,.92);backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 70px rgba(0,0,0,.55);display:flex;flex-direction:column;overflow:hidden}
.chatpanel .ch{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--edge)}
.chatpanel .ch b{color:var(--ink);font-size:13.5px}
.chatpanel .ch .on{font:10.5px var(--mono);color:var(--ink-4)}
.chatpanel .ch .x{margin-left:auto;background:none;border:0;color:var(--ink-3);cursor:pointer;font-size:16px}
.chatlist{flex:1;overflow-y:auto;padding:10px 14px}
.cmsg{padding:7px 0;border-bottom:1px solid rgba(255,255,255,.03);font-size:13px;position:relative}
.cmsg .mh{display:flex;gap:8px;align-items:baseline}
.cmsg .mh b{color:var(--ink);font-size:12.5px}
.cmsg .mh .mt{font:9.5px var(--mono);color:var(--ink-4)}
.cmsg .mb{color:var(--ink-2);word-wrap:break-word;white-space:pre-wrap}
.cmsg .rq{font-size:11px;color:var(--ink-4);border-left:2px solid var(--line);padding-left:8px;margin:2px 0}
.cmsg.adm b{color:var(--sig)}
.cmsg .del{position:absolute;right:0;top:7px;background:none;border:0;color:var(--ink-4);cursor:pointer;font-size:12px;opacity:0;transition:opacity .12s}
.cmsg:hover .del{opacity:1}
.cmsg .del:hover{color:var(--down)}
.chatform{border-top:1px solid var(--edge);padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.chatform .row1{display:flex;gap:8px}
.chatform input,.chatform textarea{background:var(--surface-2);border:1px solid var(--line);border-radius:8px;color:var(--ink);font:13px var(--sans);padding:8px 10px;outline:none}
.chatform input:focus,.chatform textarea:focus{border-color:var(--sig)}
.chatform input{width:120px}
.chatform textarea{flex:1;resize:none;height:38px}
.chatform .send{background:var(--sig);border:0;color:#fff;border-radius:8px;padding:0 14px;font:600 12.5px var(--sans);cursor:pointer}
.chatform .hint{font:9.5px var(--mono);color:var(--ink-4)}
@media(max-width:640px){.chatpanel{right:8px;bottom:76px}}