:root {
  --black: #0B0B0B;
  --ink: #F2F2F2;
  --gray: #9A9A9A;
  --gray2: #C8C8C8;
  --line: #2E2E2E;
  --paper: #121212;
  --card: #1C1C1C;
  --red: #E63030;
  --r: 8px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: Arial, Helvetica, Verdana, sans-serif;
  min-height: 100%;
}
.hidden { display: none !important; }
header {
  background: var(--black);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 28px;
  border-bottom: 4px solid var(--red);
}
header .brand { font-weight: 700; letter-spacing: 0.08em; font-size: 22px; }
header .crumb { color: #c8c8c8; font-size: 14px; }
header button.back { background: none; border: 0; color: #c8c8c8; font: inherit; cursor: pointer; }
header .right { margin-left: auto; color: var(--red); font-size: 14px; }
main { padding: 20px 28px; max-width: 1280px; margin: 0 auto; }
h2.sec { font-size: 11px; letter-spacing: 0.08em; color: #E8E8E8; margin: 0 0 10px; }
.grid-home {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  gap: 20px;
  margin-bottom: 22px;
}
.col-projets, .agents, .relay, .card, button.project, .item, .carte-agent {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.col-projets { border-top: 4px solid var(--red); padding: 16px; }
.agents { padding: 16px; }
.projects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
button.project {
  text-align: left; width: 100%; font: inherit; cursor: pointer;
  background: #242424; padding: 18px 16px; color: var(--ink);
  min-height: 140px;
}
button.project:hover { border-color: var(--red); }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }
.name { font-weight: 700; font-size: 16px; color: #fff; }
.st { color: var(--gray); font-size: 11px; }
.desc { color: var(--gray2); font-size: 13px; margin: 8px 0 10px; }
.open { color: var(--red); font-size: 12px; }
.row-top { display: flex; align-items: center; gap: 8px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi { padding: 12px 14px; }
.kpi .label { font-size: 11px; color: var(--gray); }
.kpi .val { font-size: 20px; font-weight: 700; margin: 4px 0 2px; }
.kpi .sub { font-size: 12px; color: var(--gray); }
.relay { padding: 14px 16px; margin-bottom: 20px; border-top: 3px solid var(--red); }
.relay .now { font-size: 18px; font-weight: 700; margin: 4px 0 6px; }
.hint { color: var(--gray2); font-size: 13px; }
.speak { background: #1A1A1A; border-left: 3px solid var(--red); padding: 10px 12px; margin: 0 0 12px; border-radius: var(--r); }
nav.tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 28px 0; background: var(--black); }
nav.tabs button {
  font: inherit; font-size: 13px; cursor: pointer;
  border: 1px solid #333; background: #1A1A1A; color: #DDD;
  padding: 10px 14px; border-radius: var(--r) var(--r) 0 0;
}
nav.tabs button.on { background: var(--paper); color: #FFF; border-color: var(--red); }
.btns button, form.enc button, form.enc input, header #btnTheme {
  font: inherit; border-radius: var(--r);
}
.btns button, form.enc button {
  background: #E63030; color: #fff; border: 0; padding: 8px 12px; cursor: pointer;
}
form.enc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
form.enc input { background: #242424; color: #fff; border: 1px solid #333; padding: 8px; }
.cartes-agents {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.carte-agent {
  --c: #E63030;
  border-left: 4px solid var(--c);
  padding: 14px;
  min-height: 168px;
  display: flex;
  flex-direction: column;
}
.carte-agent .haut { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.buste { width: 36px; height: 40px; }
.buste .tete { display: block; width: 16px; height: 16px; margin: 0 auto; background: var(--c); border-radius: 50%; }
.buste .corps { display: block; width: 28px; height: 16px; margin: 4px auto 0; background: var(--c); border-radius: 14px 14px 6px 6px; opacity: 0.85; }
.carte-agent .qui { font-weight: 700; font-size: 15px; }
.carte-agent .fait { color: #C8C8C8; font-size: 13px; flex: 1; margin: 0 0 10px; }
.carte-agent .maintenant { font-size: 12px; color: var(--c); margin-bottom: 10px; }
.carte-agent button { font: inherit; cursor: pointer; background: var(--c); color: #fff; border: 0; padding: 8px 10px; text-align: left; border-radius: var(--r); }
.carte-agent button[disabled] { background: #333; color: #888; }
.carte-grok, .carte-ceo { --c: #E63030; }
.carte-claude { --c: #C45C26; }
.carte-gpt { --c: #6B7280; }
.carte-dev { --c: #4A90D9; }
.carte-sales { --c: #FF6B35; }
.carte-test { --c: #E6B422; }
.carte-cfo { --c: #2F9E44; }
.carte-legal { --c: #95A5A6; }
.carte-graph { --c: #9B59B6; }
.sq { width: 9px; height: 9px; display: inline-block; border-radius: 2px; }
.sq-jaune { background: #E6B422; }
.sq-gris { background: #B0B0B0; }
footer { max-width: 1280px; margin: 0 auto; padding: 8px 28px 28px; color: var(--gray); font-size: 12px; }
@media (max-width: 900px) { .grid-home { grid-template-columns: 1fr; } }