:root {
  --fond: #ffffff;
  --texte: #1a1a1a;
  --bandeau: #1f3a5f;
  --bandeau-texte: #ffffff;
  --accent: #0b5cad;
  --erreur: #b00020;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
  color: var(--texte);
  background: var(--fond);
}
header {
  background: var(--bandeau);
  color: var(--bandeau-texte);
  padding: 1rem;
}
header a { color: var(--bandeau-texte); }
nav ul { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0; }
main { max-width: 60rem; margin: 0 auto; padding: 1rem; }
table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid #767676; padding: 0.5rem; text-align: left; }
th { background: #e8eef5; }
label { display: block; font-weight: 600; }
input, select, button { font: inherit; padding: 0.4rem; min-width: 14rem; }
button { background: var(--accent); color: #ffffff; border: 0; border-radius: 4px; cursor: pointer; }
:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; }
.erreur { color: var(--erreur); font-weight: 600; }
.masque { display: none; }
footer { text-align: center; padding: 1rem; font-size: 0.9rem; }
@media (max-width: 600px) {
  nav ul { flex-direction: column; }
  th, td { padding: 0.3rem; font-size: 0.9rem; }
  input, select, button { width: 100%; }
}