:root {
  --fond: #f2f4f7; --carte: #ffffff; --texte: #17202a; --doux: #5b6876; --ligne: #e0e5eb;
  --rouge: #c0362c; --rouge-fond: #fdeeec; --orange: #a86200; --orange-fond: #fdf3e2;
  --vert: #1d7a4b; --vert-fond: #e7f5ee; --accent: #2a5d8f;
  --ombre: 0 1px 2px rgba(20, 30, 45, .06);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #0e1318; --carte: #161d24; --texte: #e4e9ee; --doux: #8d99a6; --ligne: #252f39;
    --rouge: #f0766b; --rouge-fond: #2b1716; --orange: #f0a640; --orange-fond: #2a2010;
    --vert: #52c28c; --vert-fond: #12261c; --accent: #6ea8de; --ombre: none;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fond: #0e1318; --carte: #161d24; --texte: #e4e9ee; --doux: #8d99a6; --ligne: #252f39;
  --rouge: #f0766b; --rouge-fond: #2b1716; --orange: #f0a640; --orange-fond: #2a2010;
  --vert: #52c28c; --vert-fond: #12261c; --accent: #6ea8de; --ombre: none;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}
.page { max-width: 980px; margin: 0 auto; padding: 20px 16px 60px; display: flex; flex-direction: column; gap: 22px; }
h1 { font-size: 20px; margin: 0; letter-spacing: -.01em; }
h2 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--doux); margin: 0 0 10px; font-weight: 700; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tete .infos { color: var(--doux); font-size: 13px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
/* Les onglets : un par famille d'agents surveillés, plus les patrons. */
.onglets { display: flex; gap: 4px; flex-wrap: wrap; margin-right: auto; margin-left: 18px; }
.onglets a { color: var(--doux); text-decoration: none; font-size: 14px; padding: 6px 11px; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px; }
.onglets a:hover { background: var(--carte); color: var(--texte); }
.onglets a[aria-current="page"] { background: var(--carte); color: var(--texte); font-weight: 600; box-shadow: var(--ombre); border: 1px solid var(--ligne); }
.badge { font-size: 11.5px; font-weight: 700; line-height: 1; padding: 3px 6px; border-radius: 10px; background: var(--rouge); color: var(--carte); }
.badge.orange { background: var(--orange); }
.badge:empty { display: none; }
.boites { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.boite { display: flex; flex-direction: column; gap: 10px; }
.boite .entete { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.boite .entete b { font-size: 15.5px; }
.boite .entete span, .boite .meta { color: var(--doux); font-size: 13px; }
.agent-u { border-top: 1px solid var(--ligne); padding-top: 9px; display: flex; flex-direction: column; gap: 3px; font-size: 14px; }
.agent-u .nom { font-weight: 600; display: flex; align-items: center; }
.agent-u .ligne-d { color: var(--doux); font-size: 13px; }
.lien { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

.verdict { border-radius: 12px; padding: 16px 18px; display: flex; align-items: center; gap: 14px; border: 1px solid var(--ligne); background: var(--carte); box-shadow: var(--ombre); }
.verdict .pastille { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.verdict b { font-size: 18px; display: block; }
.verdict span { color: var(--doux); font-size: 13.5px; }
.verdict.ok { background: var(--vert-fond); border-color: transparent; } .verdict.ok .pastille { background: var(--vert); }
.verdict.ko { background: var(--rouge-fond); border-color: transparent; } .verdict.ko .pastille { background: var(--rouge); }
.verdict.attention { background: var(--orange-fond); border-color: transparent; } .verdict.attention .pastille { background: var(--orange); }

.liste { display: flex; flex-direction: column; gap: 10px; }
.probleme { background: var(--carte); border: 1px solid var(--ligne); border-left: 4px solid var(--rouge); border-radius: 10px; padding: 13px 15px; box-shadow: var(--ombre); display: flex; flex-direction: column; gap: 5px; }
.probleme.interne { border-left-color: var(--orange); }
.probleme.doute { border-left-color: var(--orange); }
.sous-titre { margin: -4px 0 10px; color: var(--doux); font-size: 13.5px; max-width: 70ch; }
.probleme .titre { font-weight: 700; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.probleme .titre small { font-weight: 400; color: var(--doux); }
.probleme .phrase { font-size: 15px; }
.probleme .effet { color: var(--doux); font-size: 13.5px; }
.probleme .quand { color: var(--doux); font-size: 13px; display: flex; gap: 16px; flex-wrap: wrap; }
.technique { font: 12px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--doux); background: var(--fond); border-radius: 6px; padding: 6px 8px; overflow-wrap: anywhere; }
details > summary { cursor: pointer; color: var(--doux); font-size: 13px; }

.bloc { background: var(--carte); border: 1px solid var(--ligne); border-radius: 12px; padding: 14px 16px; box-shadow: var(--ombre); }
.vide { color: var(--doux); font-size: 14px; }

.jauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.jauge .lab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 13.5px; }
.jauge .lab span { color: var(--doux); font-size: 12.5px; }
.jauges > .vide { grid-column: 1 / -1; font-size: 13px; }
.etats { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 4px; font-size: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--ligne); }
.etat-ligne { display: flex; align-items: center; }
.jauge .barre { height: 8px; border-radius: 4px; background: var(--ligne); margin-top: 6px; overflow: hidden; }
.jauge .barre i { display: block; height: 100%; background: var(--vert); border-radius: 4px; }
.jauge.moyen .barre i { background: var(--orange); } .jauge.haut .barre i { background: var(--rouge); }

.docs { display: flex; flex-direction: column; gap: 8px; }
.doc-groupe summary { display: flex; align-items: baseline; gap: 6px; color: var(--texte); font-size: 14.5px; padding: 4px 0; list-style: none; }
.doc-groupe summary::-webkit-details-marker { display: none; }
.doc-groupe summary::before { content: "▸"; color: var(--doux); }
.doc-groupe summary > span:first-child { flex: 1; }
.doc-groupe[open] summary::before { content: "▾"; }
.doc-groupe summary .compte { font-weight: 700; }
.doc-groupe ul { margin: 4px 0 8px; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.doc-groupe li span { color: var(--doux); }

.tableau { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tableau-cadre { overflow-x: auto; }
.tableau th { text-align: left; color: var(--doux); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; padding: 6px 8px; border-bottom: 1px solid var(--ligne); }
.tableau td { padding: 7px 8px; border-bottom: 1px solid var(--ligne); vertical-align: top; }
.point { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--vert); margin-right: 8px; }
.point.ko { background: var(--rouge); }
.point.gris { background: var(--ligne); }

/* connexion */
.connexion { max-width: 380px; margin: 12vh auto 0; padding: 0 16px; }
.titre-connexion { margin-bottom: 14px; }
.connexion form { background: var(--carte); border: 1px solid var(--ligne); border-radius: 12px; padding: 22px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--ombre); }
.connexion label { display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; color: var(--doux); }
.connexion input { font: inherit; padding: 9px 11px; border-radius: 8px; border: 1px solid var(--ligne); background: var(--fond); color: var(--texte); }
.connexion button[type=submit] { padding: 10px; border: 0; border-radius: 8px; background: var(--accent); color: #fff; font-weight: 700; cursor: pointer; }
.erreur { color: var(--rouge); font-size: 13.5px; min-height: 1em; }

/* patrons : le formulaire d'invitation */
.formulaire { display: flex; flex-direction: column; gap: 12px; }
.formulaire label { display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; color: var(--doux); flex: 1; }
.formulaire input { font: inherit; padding: 9px 11px; border-radius: 8px; border: 1px solid var(--ligne); background: var(--fond); color: var(--texte); }
.formulaire .deux { display: flex; gap: 12px; flex-wrap: wrap; }
.formulaire .actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.formulaire button[type=submit] { padding: 10px 16px; border: 0; border-radius: 8px; background: var(--accent); color: #fff; font-weight: 700; cursor: pointer; }
.formulaire button[disabled] { opacity: .55; cursor: default; }
.sortie { font-size: 13.5px; color: var(--doux); }
.sortie.ok { color: var(--vert); }
.sortie.erreur { color: var(--rouge); }

@media (max-width: 600px) {
  .verdict b { font-size: 16px; }
  .tableau .cache-mobile { display: none; }
}

/* Onglet « Agents universels », l'arbre patron › centre › agent (01/11/2026) */
.point.orange { background: var(--orange); }
.centre-u { border-top: 1px solid var(--ligne); padding-top: 9px; display: flex; flex-direction: column; gap: 6px; }
.centre-nom { font-weight: 700; font-size: 14px; }
.rangee { display: grid; grid-template-columns: minmax(150px, 190px) 1fr; gap: 4px 14px; font-size: 13.5px; align-items: baseline; }
.rangee .quoi { display: flex; align-items: center; font-weight: 600; }
.rangee .phrase { color: var(--doux); }
.rangee.ko .phrase { color: var(--rouge); }
.rangee.passager .phrase { color: var(--orange); }
.rangee .qui, .probleme .qui { font-style: italic; }
@media (max-width: 560px) { .rangee { grid-template-columns: 1fr; } .rangee .phrase { padding-left: 17px; } }

/* Agents universels, trois niveaux : patrons › centres › agents (01/11/2026) */
.fil { display: flex; gap: 8px; align-items: center; font-size: 14px; margin: 4px 0 -6px; flex-wrap: wrap; }
.fil a { color: var(--accent); text-decoration: none; }
.fil a:hover { text-decoration: underline; }
.fil .sep { color: var(--doux); }
.niveau { display: flex; flex-direction: column; gap: 8px; }
.ligne-niveau { display: grid; grid-template-columns: minmax(170px, 240px) 1fr auto; gap: 4px 16px; align-items: center;
  background: var(--carte); border: 1px solid var(--ligne); border-left: 4px solid var(--ligne); border-radius: 10px;
  padding: 13px 16px; color: var(--texte); text-decoration: none; box-shadow: var(--ombre); }
a.ligne-niveau:hover { border-color: var(--accent); }
.ligne-niveau.ko { border-left-color: var(--rouge); }
.ligne-niveau.passager { border-left-color: var(--orange); }
.ligne-niveau.ok { border-left-color: var(--vert); }
.nom-niveau { display: flex; align-items: center; font-weight: 700; font-size: 15px; }
.detail-niveau { color: var(--doux); font-size: 14px; }
.ligne-niveau.ko .detail-niveau { color: var(--rouge); }
.ligne-niveau.passager .detail-niveau { color: var(--orange); }
.ligne-niveau .fleche { color: var(--doux); font-size: 22px; line-height: 1; }
.ligne-niveau.fixe { grid-template-columns: minmax(170px, 240px) 1fr; }
.legende { margin-top: 18px; }
@media (max-width: 560px) { .ligne-niveau, .ligne-niveau.fixe { grid-template-columns: 1fr auto; } .detail-niveau { grid-column: 1 / -1; } }
.fil[hidden] { display: none; }
/* Maquette validée le 01/11/2026 : bouton Retour, étiquette en clair à droite */
.retour { display: inline-block; border: 1px solid var(--ligne); background: var(--carte); color: var(--texte); border-radius: 8px; padding: 7px 14px; text-decoration: none; font-weight: 600; font-size: 14px; }
.retour:hover { border-color: var(--accent); }
.ligne-niveau { grid-template-columns: minmax(160px, 220px) 1fr auto auto; }
.ligne-niveau.fixe { grid-template-columns: minmax(160px, 220px) 1fr auto; }
.etiquette { font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: 8px; white-space: nowrap; background: var(--fond); color: var(--doux); }
.etiquette.ko { background: var(--rouge-fond); color: var(--rouge); }
.etiquette.passager { background: var(--orange-fond); color: var(--orange); }
.etiquette.ok { background: var(--vert-fond); color: var(--vert); }
@media (max-width: 560px) { .ligne-niveau, .ligne-niveau.fixe { grid-template-columns: 1fr auto; } .etiquette { grid-column: 1; justify-self: start; } }
#titre-niveau { font-size: 20px; text-transform: none; letter-spacing: 0; color: var(--texte); margin: 6px 0 8px; text-wrap: balance; }
.fil { margin: 4px 0 2px; }