@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --encre:#16222e; --encre-2:#22303d; --papier:#f5f6f7; --carte:#ffffff;
  --trait:#dde2e7; --texte:#26313b; --sourdine:#68767f;
  --sac:#0a6ed1; --tagetik:#b8452e; --std:#3d5a80; --emb:#7a5195;
  --ok:#1e7a46; --ok-bg:#e2f2e8; --partiel:#9a6b00; --partiel-bg:#fdf1d8; --gap:#b3261e; --gap-bg:#fbe4e2;
}
*{box-sizing:border-box} html,body{margin:0;height:100%}
body{font:15px/1.5 'IBM Plex Sans',sans-serif;background:var(--papier);color:var(--texte);display:flex}
a{color:var(--sac);text-decoration:none}
.mono{font-family:'IBM Plex Mono',monospace}

/* --- navigation latérale --- */
nav{width:224px;min-height:100vh;background:var(--encre);color:#cfd8de;flex-shrink:0;
    display:flex;flex-direction:column;padding:20px 0}
nav .marque{padding:0 20px 18px;border-bottom:1px solid var(--encre-2);margin-bottom:12px}
nav .marque b{color:#fff;font-size:19px;letter-spacing:.4px}
nav .marque small{display:block;color:#8fa1ad;font-size:11px;margin-top:2px;
    font-family:'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.8px}
nav a{display:block;color:#cfd8de;padding:9px 20px;font-size:14px;border-left:3px solid transparent}
nav a:hover{background:var(--encre-2);color:#fff}
nav a.actif{background:var(--encre-2);color:#fff;border-left-color:var(--sac)}
nav .pied{margin-top:auto;padding:14px 20px;border-top:1px solid var(--encre-2);font-size:12px;color:#8fa1ad}
nav .pied .role{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#aab8c2}

main{flex:1;padding:28px 34px;max-width:1240px}
h1{font-size:21px;font-weight:600;margin:0 0 4px}
h2{font-size:15px;font-weight:600;margin:26px 0 10px}
.sous{color:var(--sourdine);font-size:13px;margin-bottom:22px}

/* --- cartes & grilles --- */
.grille{display:grid;gap:14px}
.g4{grid-template-columns:repeat(4,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g2{grid-template-columns:repeat(2,1fr)}
.carte{background:var(--carte);border:1px solid var(--trait);border-radius:8px;padding:16px 18px}
.kpi .valeur{font-family:'IBM Plex Mono',monospace;font-size:26px;font-weight:600}
.kpi .libelle{font-size:12px;color:var(--sourdine);text-transform:uppercase;letter-spacing:.5px}

/* --- signature : double jauge readiness --- */
.jauge{margin:10px 0 4px}
.jauge .ligne{display:flex;align-items:center;gap:10px;margin:8px 0}
.jauge .cible{width:110px;font-size:12px;font-weight:600;font-family:'IBM Plex Mono',monospace}
.jauge .barre{flex:1;height:14px;background:#edf0f2;border-radius:7px;overflow:hidden}
.jauge .rempli{height:100%;border-radius:7px;transition:width .6s ease}
.jauge .pct{width:44px;text-align:right;font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:13px}
.rempli.sac{background:var(--sac)} .rempli.tagetik{background:var(--tagetik)}

/* --- tables --- */
table{width:100%;border-collapse:collapse;background:var(--carte);border:1px solid var(--trait);border-radius:8px;overflow:hidden;font-size:13.5px}
th{background:#eef1f3;text-align:left;padding:9px 12px;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--sourdine)}
td{padding:8px 12px;border-top:1px solid var(--trait);vertical-align:top}
tr:hover td{background:#fafbfc}

/* --- badges --- */
.badge{display:inline-block;padding:2px 9px;border-radius:10px;font-size:11px;font-weight:600;
       font-family:'IBM Plex Mono',monospace;letter-spacing:.3px}
.b-ok{background:var(--ok-bg);color:var(--ok)} .b-partiel{background:var(--partiel-bg);color:var(--partiel)}
.b-gap{background:var(--gap-bg);color:var(--gap)}
.b-std{background:#e4ebf3;color:var(--std)} .b-emb{background:#ece4f1;color:var(--emb)}
.b-haute{background:var(--gap-bg);color:var(--gap)} .b-moyenne{background:var(--partiel-bg);color:var(--partiel)}
.b-faible{background:var(--ok-bg);color:var(--ok)}

/* --- formulaires --- */
input,select,textarea{font:inherit;padding:7px 10px;border:1px solid var(--trait);border-radius:6px;background:#fff}
input:focus,select:focus,textarea:focus{outline:2px solid var(--sac);outline-offset:0;border-color:var(--sac)}
button,.btn{font:inherit;font-weight:600;font-size:13.5px;padding:8px 16px;border:0;border-radius:6px;
  background:var(--encre);color:#fff;cursor:pointer}
button:hover,.btn:hover{background:var(--encre-2)}
.btn-clair{background:#fff;color:var(--texte);border:1px solid var(--trait)}
.btn-danger{background:transparent;color:var(--gap);border:1px solid var(--trait);padding:4px 10px;font-size:12px}
.filtres{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0;align-items:center}
.alerte{background:var(--ok-bg);color:var(--ok);border-radius:6px;padding:10px 14px;margin:12px 0;font-size:14px}
.alerte.err{background:var(--gap-bg);color:var(--gap)}
.pagination{display:flex;gap:6px;margin:16px 0;font-family:'IBM Plex Mono',monospace;font-size:13px;align-items:center}
.pagination a{padding:4px 10px;border:1px solid var(--trait);border-radius:5px;background:#fff}
.pagination .cur{padding:4px 10px;background:var(--encre);color:#fff;border-radius:5px}

/* --- login --- */
.login-page{margin:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;width:100%}
.login-boite{width:360px}
.login-boite .marque{text-align:center;margin-bottom:22px}
.login-boite .marque b{font-size:26px;color:var(--encre)}
.login-boite input{width:100%;margin-bottom:10px}
.login-boite button{width:100%}

@media(max-width:900px){
  body{flex-direction:column} nav{width:100%;min-height:0;flex-direction:row;flex-wrap:wrap;align-items:center}
  nav .marque{border:0;padding:10px 16px;margin:0} nav a{padding:10px 12px;border-left:0}
  nav .pied{margin:0;border:0;margin-left:auto}
  .g4,.g3,.g2{grid-template-columns:1fr} main{padding:18px}
}
@media print{nav,form,.filtres,button{display:none!important} main{padding:0;max-width:none} body{background:#fff}}