:root {
    --c-bleu: #2D6CDF;
    --c-bleu-nuit: #0F1E3D;
    --c-vert: #2E9E5B;
    --c-brume: #F3F6FC;
    --c-encre: #1B2333;
    --c-encre-douce: #57607A;
    --c-ligne: #DDE4F2;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; background: var(--c-brume); color: var(--c-encre); }

.page-connexion { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.carte-connexion { background: #fff; padding: 2rem; border-radius: 12px; box-shadow: 0 6px 24px rgba(15,30,61,0.12); width: 320px; }
.carte-connexion h1 { font-size: 1.2rem; margin-top: 0; color: var(--c-bleu-nuit); }
.carte-connexion label { display: block; margin-bottom: 0.8rem; font-size: 0.85rem; }
.carte-connexion input { width: 100%; padding: 0.5rem; margin-top: 0.3rem; border: 1px solid var(--c-ligne); border-radius: 6px; }
.carte-connexion button { width: 100%; padding: 0.6rem; background: var(--c-bleu); color: #fff; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; }
.erreur { color: #C0392B; font-size: 0.85rem; }
.succes { color: var(--c-vert); }

.coquille { display: flex; min-height: 100vh; }
.barre-laterale { width: 220px; background: var(--c-bleu-nuit); color: #fff; display: flex; flex-direction: column; padding: 1.2rem 0; }
.barre-laterale .logo { padding: 0 1.2rem 1rem; font-weight: 700; font-size: 1.1rem; }
.barre-laterale nav { flex: 1; display: flex; flex-direction: column; }
.barre-laterale a { color: rgba(255,255,255,0.75); text-decoration: none; padding: 0.6rem 1.2rem; }
.barre-laterale a.actif, .barre-laterale a:hover { background: rgba(255,255,255,0.08); color: #fff; }
.barre-laterale .deconnexion { margin: 0 1.2rem; }

.contenu-principal { flex: 1; padding: 1.6rem 2rem; }
.contenu-principal h1 { color: var(--c-bleu-nuit); margin-top: 0; }

.carte { background: #fff; border-radius: 10px; padding: 1.2rem 1.4rem; margin-bottom: 1.2rem; box-shadow: 0 1px 3px rgba(15,30,61,0.08); }
.texte-doux { color: var(--c-encre-douce); font-size: 0.85rem; }

.grille-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.8rem; margin-bottom: 1.2rem; }
.carte-stat { background: #fff; border-radius: 10px; padding: 1rem; text-align: center; box-shadow: 0 1px 3px rgba(15,30,61,0.08); }
.carte-stat .valeur { font-size: 1.6rem; font-weight: 700; color: var(--c-bleu-nuit); }
.carte-stat .label { font-size: 0.8rem; color: var(--c-encre-douce); }

.table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.table th, .table td { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--c-ligne); text-align: left; }

.formulaire-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.8rem; align-items: end; }
.formulaire-grille label { font-size: 0.82rem; display: flex; flex-direction: column; gap: 0.3rem; }
.formulaire-grille input, .formulaire-grille select, .formulaire-grille textarea { padding: 0.45rem; border: 1px solid var(--c-ligne); border-radius: 6px; font-family: inherit; }
.formulaire-grille .pleine-largeur { grid-column: 1 / -1; }
.formulaire-grille .case { flex-direction: row; align-items: center; }
.formulaire-grille button { grid-column: 1 / -1; justify-self: start; }

.bouton { display: inline-block; padding: 0.5rem 1rem; background: var(--c-bleu); color: #fff; border: none; border-radius: 6px; cursor: pointer; text-decoration: none; font-weight: 600; font-size: 0.85rem; }
.bouton-danger { background: #C0392B; }

.badge { font-size: 0.75rem; padding: 0.2rem 0.55rem; border-radius: 999px; font-weight: 600; }
.badge-vert { background: rgba(46,158,91,0.14); color: var(--c-vert); }
.badge-orange { background: rgba(242,153,74,0.16); color: #b5651d; }
.badge-rouge { background: rgba(192,57,43,0.12); color: #C0392B; }