* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; margin: 0; color: #1c2733; background: #f4f6f8; }
a { color: #0b5cad; }
h1 { font-size: 1.4rem; }
h2 { font-size: 1.15rem; margin-top: 1.5rem; }

header.site { background: #17324c; color: #fff; padding: .6rem 1.2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
header.site .marque { font-weight: 700; letter-spacing: .04em; }
header.site nav { display: flex; flex-wrap: wrap; gap: .9rem; }
header.site nav a { color: #cfe0f2; text-decoration: none; font-size: .95rem; }
header.site nav a:hover, header.site nav a.actif { color: #fff; text-decoration: underline; }
header.site .identite { margin-left: auto; font-size: .9rem; color: #9fb8d1; }

main { max-width: 1100px; margin: 1.2rem auto 3rem; padding: 0 1rem; }

.flash { border-radius: 6px; padding: .6rem .9rem; margin: .8rem 0; list-style: none; }
.flash li { margin: .15rem 0; }
.flash.succes { background: #e2f3e6; border: 1px solid #66bb7a; }
.flash.erreur { background: #fbe4e4; border: 1px solid #e06666; }
.flash.info { background: #e3edf8; border: 1px solid #7aa7d9; }

table.liste { width: 100%; border-collapse: collapse; background: #fff; font-size: .92rem; }
table.liste th, table.liste td { border: 1px solid #d7dde3; padding: .45rem .6rem; text-align: left; vertical-align: top; }
table.liste th { background: #eef2f6; }
table.liste tr:nth-child(even) td { background: #fafcfe; }

form.ordonnee label { display: block; font-weight: 600; margin-top: .9rem; }
form.ordonnee label.choix { display: inline-block; font-weight: 400; margin: .25rem 1.2rem .25rem 0; }
form.ordonnee input[type=text], form.ordonnee input[type=email], form.ordonnee input[type=password],
form.ordonnee input[type=number], form.ordonnee input[type=date], form.ordonnee select, form.ordonnee textarea {
  width: 100%; max-width: 480px; padding: .45rem; border: 1px solid #b7c1cc; border-radius: 4px;
}
.champs-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0 1.4rem; }

.boutons { margin-top: 1rem; display: flex; gap: .6rem; flex-wrap: wrap; }
button, .btn { background: #17324c; color: #fff; border: 0; border-radius: 5px; padding: .5rem 1rem; cursor: pointer; text-decoration: none; display: inline-block; font-size: .95rem; }
button.secondaire, .btn.secondaire { background: #5b7288; }
button.danger { background: #a33; }

.badge { display: inline-block; border-radius: 10px; padding: .1rem .55rem; font-size: .8rem; font-weight: 600; }
.badge-neutre { background: #e0e6ec; color: #33465a; }
.badge-ok { background: #d9f0de; color: #1e6b34; }
.badge-alerte { background: #fdeeda; color: #8a5a10; }
.badge-erreur { background: #fbe0e0; color: #933; }

.carte { background: #fff; border: 1px solid #d7dde3; border-radius: 8px; padding: 1rem 1.2rem; margin: .8rem 0; }
.filtres { display: flex; gap: .6rem; flex-wrap: wrap; align-items: end; margin: .8rem 0; }
.filtres input, .filtres select { padding: .4rem; border: 1px solid #b7c1cc; border-radius: 4px; }
.barre { height: 14px; background: #17324c; border-radius: 3px; display: inline-block; vertical-align: middle; }
.graphe { background: #fff; border: 1px solid #d7dde3; border-radius: 8px; display: block; max-width: 760px; }
.legende { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; padding: 0; margin: .5rem 0 1rem; font-size: .88rem; }
.legende li { display: inline-flex; align-items: center; gap: .35rem; }
.legende span { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.connexion { max-width: 380px; margin: 4rem auto; background: #fff; border: 1px solid #d7dde3; border-radius: 8px; padding: 1.5rem; }
.muted { color: #64748b; font-size: .88rem; }
code { background: #eef2f6; padding: .1rem .3rem; border-radius: 3px; }