:root {
  --vert: #006a4e;
  --vert-fonce: #00503b;
  --jaune: #ffce00;
  --rouge: #d21034;
  --fond: #f4f6f5;
  --carte: #ffffff;
  --texte: #1d2b26;
  --texte-doux: #5b6b64;
  --bord: #dde5e1;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, sans-serif;
  background: var(--fond);
  color: var(--texte);
  line-height: 1.55;
}

.conteneur { max-width: 1080px; margin: 0 auto; padding: 0 1.2rem; }

.entete {
  background: var(--vert);
  border-bottom: 4px solid var(--jaune);
  color: #fff;
}
.entete-int {
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem;
  align-items: center; justify-content: space-between;
  padding-top: .8rem; padding-bottom: .8rem;
}
.marque { color: #fff; text-decoration: none; font-weight: 700; font-size: 1.1rem; }
.marque span { display: block; font-size: .75rem; font-weight: 400; color: var(--jaune); }
.entete nav { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.entete nav a, .entete nav .lien {
  color: #fff; text-decoration: none; padding: .35rem .7rem;
  border-radius: 6px; font-size: .92rem; background: none;
  border: none; cursor: pointer; font-family: inherit;
}
.entete nav a:hover, .entete nav .lien:hover { background: var(--vert-fonce); }
.inline { display: inline; }

main { padding: 1.6rem 1.2rem 3rem; }

.message { padding: .7rem 1rem; border-radius: 8px; margin-bottom: 1rem; }
.message.success { background: #e2f3ea; border: 1px solid #9ed4b5; }
.message.warning { background: #fff6dc; border: 1px solid #ecd47f; }
.message.error { background: #fde7ea; border: 1px solid #f0a9b4; }
.message.info { background: #e7f0fd; border: 1px solid #a9c4f0; }

.carte {
  background: var(--carte); border: 1px solid var(--bord);
  border-radius: 12px; padding: 1.2rem 1.4rem; margin-bottom: 1.4rem;
}
.carte h2 { margin-top: 0; font-size: 1.15rem; color: var(--vert-fonce); }

.grille { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.hero { text-align: center; padding: 2.5rem 1rem 2rem; }
.hero h1 { font-size: 1.9rem; margin-bottom: .4rem; color: var(--vert-fonce); }
.hero p { color: var(--texte-doux); max-width: 620px; margin: 0 auto 1.4rem; }

.bouton, button[type=submit] {
  display: inline-block; background: var(--vert); color: #fff;
  border: none; border-radius: 8px; padding: .55rem 1.2rem;
  font-size: .95rem; cursor: pointer; text-decoration: none;
  font-family: inherit;
}
.bouton:hover, button[type=submit]:hover { background: var(--vert-fonce); }
.bouton.secondaire { background: transparent; color: var(--vert); border: 1.5px solid var(--vert); }
.bouton.danger { background: var(--rouge); }
.bouton.petit { padding: .3rem .7rem; font-size: .85rem; }

table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--bord); }
th { color: var(--texte-doux); font-weight: 600; font-size: .82rem; text-transform: uppercase; }

.badge {
  display: inline-block; padding: .1rem .55rem; border-radius: 999px;
  font-size: .78rem; font-weight: 600;
}
.badge.vert { background: #e2f3ea; color: var(--vert-fonce); }
.badge.jaune { background: #fff6dc; color: #7a6200; }
.badge.rouge { background: #fde7ea; color: var(--rouge); }
.badge.gris { background: #eceff0; color: var(--texte-doux); }

form p { margin: .8rem 0; }
form label { display: block; font-weight: 600; margin-bottom: .25rem; font-size: .92rem; }
input[type=text], input[type=password], input[type=email], input[type=date],
input[type=number], input[type=file], select, textarea {
  width: 100%; max-width: 420px; padding: .5rem .65rem;
  border: 1px solid var(--bord); border-radius: 8px; font-size: .95rem;
  font-family: inherit; background: #fff;
}
.helptext { display: block; font-size: .8rem; color: var(--texte-doux); }
.errorlist { color: var(--rouge); margin: .2rem 0; padding-left: 1.1rem; font-size: .88rem; }
ul.errorlist.nonfield { list-style: none; padding-left: 0; }

.code-cle {
  font-family: Consolas, monospace; font-weight: 700;
  background: #eef4f1; padding: .15rem .5rem; border-radius: 6px;
  letter-spacing: .5px;
}

.solde { font-size: 1.6rem; font-weight: 700; color: var(--vert-fonce); }

.resultat-verification { border-left: 6px solid var(--vert); }

.pied {
  background: var(--vert-fonce); color: #cfe4dc;
  padding: 1rem 0; font-size: .85rem; margin-top: 2rem;
}