:root{
  --brand:#2563eb; /* bleu moderne */
  --ok:#16a34a;    /* vert */
  --warn:#f59e0b;  /* jaune */
  --bad:#ef4444;   /* rouge */
  --muted:#6b7280; /* gris */
  --bg:#0b1220;
  --card:#ffffff;
}
html, body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Noto Sans', Arial, 'Apple Color Emoji','Segoe UI Emoji'; }
main.container{ max-width:1100px }
h1, h2, h3 { letter-spacing:.2px }
table { font-size: .95rem }
button, .button, input, select, textarea { font-size: .95rem }
.badge{border-radius:999px;padding:.2rem .55rem;display:inline-block;font-size:.8rem; font-weight:600}
.badge.ok{ background: #dcfce7; color:#14532d; }
.badge.warn{ background:#fef3c7; color:#92400e; }
.badge.bad{ background:#fee2e2; color:#991b1b; }
.badge.neutral{ background:#e5e7eb; color:#111827; }
.card{ background:var(--card); border:1px solid #e5e7eb; border-radius:14px; padding:1rem 1.1rem; box-shadow:0 1px 2px rgba(0,0,0,.06); }
.card + .card{ margin-top:1rem }
.header-actions a.button { margin-left:.5rem }
.grid { display:grid; gap:1rem }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
label b { font-weight:700 }
.small { font-size:.92rem; color:var(--muted) }
hr { border:none; border-top:1px solid #eee; margin:1rem 0 }
.table-compact td, .table-compact th { padding:.45rem .6rem }
.action-btn{ display:inline-block; padding:.45rem .75rem; border-radius:10px; background:var(--brand); color:#fff; text-decoration:none; font-weight:600; }
.action-btn.secondary{ background:#334155 }
.action-btn.ghost{ background:#e5e7eb; color:#111827 }
.status-dot{ display:inline-block; width:.6rem; height:.6rem; border-radius:999px; vertical-align:middle; margin-right:.35rem }
.status-ok{ background:var(--ok) }
.status-warn{ background:var(--warn) }
.status-bad{ background:var(--bad) }
.status-none{ background:#9ca3af }
thead th { background:#f8fafc }
blockquote.rules { border-left:4px solid var(--brand); padding:.6rem .9rem; background:#f1f5f9; }
fieldset { border:1px solid #e5e7eb; border-radius:12px; padding:1rem }
legend { font-weight:700 }
.select-sm { max-width:180px }
@media (max-width: 800px){
  .grid-2 { grid-template-columns: 1fr; }
  .select-sm { max-width:100% }
}