:root {
  --bleu: #1f4e78;
  --bleu-clair: #eaf1f8;
  --vert: #2e7d32;
  --rouge: #c0392b;
  --gris: #666;
  --bordure: #d9dee3;
}
* { box-sizing: border-box; }
body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  background: #f5f6f8;
  color: #222;
}
header.topbar {
  background: var(--bleu);
  color: white;
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
header.topbar a { color: white; text-decoration: none; margin-right: 16px; font-size: 14px; }
header.topbar a:hover { text-decoration: underline; }
header.topbar .brand { font-weight: bold; font-size: 18px; }
main { max-width: 1100px; margin: 20px auto; padding: 0 16px; }
.card {
  background: white;
  border: 1px solid var(--bordure);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}
h1, h2 { color: var(--bleu); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--bordure); text-align: left; }
th { background: var(--bleu-clair); color: var(--bleu); }
tr:hover td { background: #fafcfe; }
.badge-ok { color: var(--vert); font-weight: bold; }
.badge-low { color: var(--rouge); font-weight: bold; }
form.inline { display: inline; }
label { display: block; margin: 10px 0 4px; font-size: 14px; font-weight: bold; }
select, input[type=text], input[type=password], input[type=number] {
  width: 100%; padding: 8px; border: 1px solid var(--bordure); border-radius: 4px; font-size: 15px;
}
button, .btn {
  background: var(--bleu); color: white; border: none; padding: 10px 18px;
  border-radius: 4px; font-size: 15px; cursor: pointer; margin-top: 14px; text-decoration: none; display: inline-block;
}
button:hover, .btn:hover { opacity: 0.9; }
button.secondary { background: #888; }
.alert-error { background: #fdecea; color: var(--rouge); padding: 10px 14px; border-radius: 4px; margin-bottom: 14px; }
.alert-ok { background: #e8f5e9; color: var(--vert); padding: 10px 14px; border-radius: 4px; margin-bottom: 14px; }
.tabs { margin-bottom: 16px; }
.tabs a { margin-right: 10px; padding: 8px 14px; border-radius: 4px; background: var(--bleu-clair); color: var(--bleu); text-decoration: none; font-size: 14px; }
.tabs a.active { background: var(--bleu); color: white; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.stat { text-align: center; }
.stat .val { font-size: 26px; font-weight: bold; color: var(--bleu); }
.stat .lbl { font-size: 13px; color: var(--gris); }
.login-wrap { max-width: 380px; margin: 80px auto; }
small.hint { color: var(--gris); }