/* Interface pensée "gros et lisible" : base 18px, boutons hauts, contrastes forts. */
:root {
  --bleu: #1a56a0; --bleu-fonce: #123c70;
  --rouge: #c0392b; --rouge-pale: #fdecea;
  --vert: #1e7d43;  --vert-pale: #e8f6ee;
  --jaune-pale: #fff7d6;
  --gris: #f2f3f5; --bord: #ccc; --texte: #1c1c1c;
}
* { box-sizing: border-box; }
body {
  margin: 0; color: var(--texte); background: #fafafa;
  font: 18px/1.5 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
main { max-width: 1100px; margin: 0 auto; padding: 20px 14px 60px; }
h1 { font-size: 1.7rem; margin: 10px 0 18px; }
h2 { font-size: 1.3rem; margin: 26px 0 10px; }

/* ---- navigation ---- */
.topnav {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  background: var(--bleu); padding: 8px 12px; position: sticky; top: 0; z-index: 5;
}
.topnav a {
  color: #fff; text-decoration: none; font-weight: 600; font-size: 1.05rem;
  padding: 12px 16px; border-radius: 8px;
}
.topnav a:hover, .topnav a.actif { background: var(--bleu-fonce); }
.topnav .spacer { flex: 1; }
.topnav .sortie { opacity: .85; font-weight: 400; }

/* ---- boutons ---- */
.btn {
  display: inline-block; border: 0; cursor: pointer; text-decoration: none;
  font-size: 1.1rem; font-weight: 700; padding: 14px 22px; border-radius: 10px;
  background: var(--bleu); color: #fff;
}
.btn:hover { background: var(--bleu-fonce); }
.btn-vert { background: var(--vert); }
.btn-rouge { background: var(--rouge); }
.btn-gris { background: #666; }
.btn-grand { font-size: 1.25rem; padding: 18px 28px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 14px 0 22px; }

/* ---- tableaux ---- */
table { border-collapse: collapse; width: 100%; background: #fff; }
th, td { border: 1px solid var(--bord); padding: 10px 12px; text-align: center; }
th { background: var(--gris); font-size: 1rem; }
td.gauche, th.gauche { text-align: left; }
tr.alerte td { background: var(--rouge-pale); color: var(--rouge); font-weight: 700; }
.badge {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  font-size: .95rem; font-weight: 700;
}
.badge-BROUILLON { background: var(--jaune-pale); }
.badge-ENVOYEE { background: #e3edfa; color: var(--bleu); }
.badge-RECUE { background: var(--vert-pale); color: var(--vert); }
.ecart-plus { color: var(--vert); font-weight: 700; }
.ecart-moins { color: var(--rouge); font-weight: 700; }

/* ---- cartes produit du dashboard ---- */
.carte {
  background: #fff; border: 1px solid var(--bord); border-radius: 12px;
  padding: 16px; margin-bottom: 22px;
}
.carte h2 { margin-top: 0; }

/* ---- formulaires ---- */
input, select, textarea {
  font-size: 1.1rem; padding: 12px; border: 2px solid var(--bord);
  border-radius: 8px; width: 100%; max-width: 420px; background: #fff;
}
input:focus, select:focus, textarea:focus { border-color: var(--bleu); outline: 0; }
label { display: block; font-weight: 700; margin: 16px 0 6px; }
input.qte { width: 90px; max-width: 90px; text-align: center; font-size: 1.15rem; }
.theo { color: #777; font-size: .95rem; }

/* ---- messages ---- */
.flash { padding: 14px 18px; border-radius: 10px; margin-bottom: 16px; font-weight: 600; }
.flash-ok { background: var(--vert-pale); color: var(--vert); }
.flash-error { background: var(--rouge-pale); color: var(--rouge); }

/* ---- login ---- */
.login-box {
  max-width: 380px; margin: 12vh auto; background: #fff; padding: 30px;
  border-radius: 14px; border: 1px solid var(--bord); text-align: center;
}
.login-box input { max-width: 100%; margin-bottom: 12px; }

.recherche { margin-bottom: 18px; }
@media (max-width: 640px) {
  body { font-size: 17px; }
  th, td { padding: 8px 6px; }
  .topnav a { padding: 10px 10px; font-size: .95rem; }
}

/* ---- vignettes familles ---- */
.vignettes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.vignette {
  display: flex; flex-direction: column; gap: 8px; text-decoration: none;
  background: #fff; border: 2px solid var(--bord); border-radius: 16px;
  padding: 34px 26px; color: var(--texte);
}
.vignette:hover { border-color: var(--bleu); }
.vignette-titre { font-size: 2rem; font-weight: 800; color: var(--bleu); }
.vignette-sous { font-size: 1.05rem; color: #666; }
.vignette-alerte { color: var(--rouge); font-weight: 700; }
.vignette-ok { color: var(--vert); font-weight: 700; }