:root{
  --vert:#0E5A43; --vert-clair:#DCEBE4; --papier:#F4F6F5; --blanc:#FFFFFF;
  --encre:#18241F; --gris:#5B6B65; --trait:#D5DDD9;
  --sable:#C98F22; --sable-clair:#F7EBD2; --laterite:#A8432F; --laterite-clair:#F4DDD7;
  --ardoise:#3E5C6B;
  --f-texte:"Public Sans", "Segoe UI", Roboto, Arial, sans-serif;
}
*{box-sizing:border-box}
html{font-size:16px}
body{margin:0;background:var(--papier);color:var(--encre);font-family:var(--f-texte);line-height:1.5;font-variant-numeric:tabular-nums}
a{color:var(--vert)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--sable);outline-offset:2px}

.entete{background:var(--vert);color:#fff}
.entete-in{max-width:1200px;margin:0 auto;padding:1rem 1.5rem 0;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem}
.marque{padding-bottom:1rem}
.marque strong{display:block;font-size:1.25rem;letter-spacing:-.01em}
.marque span{font-size:.85rem;opacity:.8}
.nav{display:flex;gap:.25rem;flex-wrap:wrap}
.nav a{color:#fff;text-decoration:none;padding:.7rem 1rem;border-radius:6px 6px 0 0;font-weight:500;opacity:.85}
.nav a[aria-current=page]{background:var(--papier);color:var(--vert);opacity:1}
.nav a:hover{opacity:1}
.nav form{display:inline}
.nav button{background:none;border:0;color:#fff;font:inherit;padding:.7rem 1rem;cursor:pointer;opacity:.7}

main{max-width:1200px;margin:0 auto;padding:2rem 1.5rem 4rem}
h1{font-size:2rem;line-height:1.15;margin:0 0 .35rem;letter-spacing:-.02em}
h2{font-size:1.2rem;margin:2.5rem 0 1rem}
.chapo{color:var(--gris);max-width:70ch;margin:0 0 2rem}
.source{font-size:.8rem;color:var(--gris)}

/* Élément signature : la jauge des 477 agents */
.jauge{background:var(--blanc);border:1px solid var(--trait);border-radius:10px;padding:1.5rem 1.75rem}
.jauge-chiffre{display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap}
.jauge-chiffre b{font-size:4rem;line-height:1;color:var(--vert);letter-spacing:-.03em}
.jauge-chiffre span{font-size:1.25rem;color:var(--gris)}
.barre{display:flex;height:28px;background:repeating-linear-gradient(90deg,var(--vert-clair) 0 2px,#EDF3F0 2px 8px);border-radius:4px;overflow:hidden;margin:1.25rem 0 .75rem}
.barre i{display:block;height:100%}
.barre .f{background:var(--sable)}
.barre .h{background:var(--vert)}
.legende{display:flex;gap:1.5rem;flex-wrap:wrap;font-size:.9rem;color:var(--gris)}
.legende em{font-style:normal;display:inline-block;width:.8rem;height:.8rem;border-radius:2px;margin-right:.4rem;vertical-align:-1px}

.grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1rem;margin-top:1rem}
.indic{background:var(--blanc);border-left:4px solid var(--vert);padding:1rem 1.1rem;border-radius:0 6px 6px 0}
.indic b{display:block;font-size:1.6rem;line-height:1.2}
.indic span{font-size:.88rem;color:var(--gris)}
.indic.sable{border-color:var(--sable)} .indic.laterite{border-color:var(--laterite)} .indic.ardoise{border-color:var(--ardoise)}

.deux{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
@media (max-width:860px){.deux{grid-template-columns:1fr}.jauge-chiffre b{font-size:3rem}}
.bloc{background:var(--blanc);border:1px solid var(--trait);border-radius:8px;padding:1.25rem}
.bloc h2{margin-top:0}

.alertes{list-style:none;margin:0;padding:0}
.alertes li{padding:.6rem .8rem;border-radius:4px;margin-bottom:.4rem;font-size:.95rem}
.alertes .retard{background:var(--laterite-clair);color:#6E2415}
.alertes .attention{background:var(--sable-clair);color:#6A4A0C}
.vide{color:var(--gris);font-size:.95rem}

.organes{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem}
.organe{background:var(--blanc);border:1px solid var(--trait);border-radius:8px;padding:1.25rem;border-top:5px solid var(--vert)}
.organe.retard{border-top-color:var(--laterite)} .organe.proche{border-top-color:var(--sable)}
.organe h3{margin:0 0 .2rem;font-size:1.1rem}
.organe .compte{font-size:2.2rem;font-weight:700;line-height:1.1;margin:.6rem 0 0}
.organe dl{display:grid;grid-template-columns:auto 1fr;gap:.25rem .75rem;margin:1rem 0 0;font-size:.9rem}
.organe dt{color:var(--gris)} .organe dd{margin:0;text-align:right}

table{width:100%;border-collapse:collapse;font-size:.92rem}
.tab{overflow-x:auto}
th{text-align:left;font-weight:600;color:var(--gris);border-bottom:2px solid var(--trait);padding:.5rem .6rem}
td{border-bottom:1px solid var(--trait);padding:.55rem .6rem;vertical-align:top}
td.n,th.n{text-align:right}
.pastille{display:inline-block;padding:.1rem .55rem;border-radius:99px;font-size:.8rem;background:var(--vert-clair);color:var(--vert)}
.pastille.retard{background:var(--laterite-clair);color:var(--laterite)}
.pastille.attente{background:var(--sable-clair);color:#6A4A0C}

.hbar{display:grid;grid-template-columns:9rem 1fr 3rem;gap:.6rem;align-items:center;margin:.35rem 0;font-size:.9rem}
.hbar div{background:#EDF3F0;height:12px;border-radius:2px}
.hbar div i{display:block;height:100%;background:var(--vert);border-radius:2px}
.hbar div i.s{background:var(--sable)}

.circuit{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-top:.5rem}
.circuit div{padding:.6rem;border-radius:4px;background:#EDF3F0;font-size:.82rem;color:var(--gris)}
.circuit div.fait{background:var(--vert);color:#fff}
@media (max-width:640px){.circuit{grid-template-columns:1fr 1fr}}

.connexion{max-width:380px;margin:4rem auto;background:var(--blanc);padding:2rem;border-radius:10px;border:1px solid var(--trait)}
.connexion label{display:block;font-weight:600;margin:.8rem 0 .3rem}
.connexion input{width:100%;padding:.6rem;border:1px solid var(--trait);border-radius:4px;font:inherit}
.connexion button{margin-top:1.25rem;width:100%;padding:.75rem;background:var(--vert);color:#fff;border:0;border-radius:4px;font:inherit;font-weight:600;cursor:pointer}
.erreur{background:var(--laterite-clair);color:#6E2415;padding:.6rem;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}