/* La feuille du moniteur.

   Elle reprend les memes roles de couleur que web/style.css — meme palette de
   reference, meme sombre — sans la partager : les deux services ne montent
   rien en commun et n'ont pas de raison de se tenir par un fichier. Ce qui
   compte est que les deux pages se ressemblent, pas qu'elles lisent le meme
   octet ; si la palette bouge, elle bouge des deux cotes dans le meme commit.

   La teinte de serie dit une quantite. L'alerte est reservee a ce qui est en
   retard, et le vert a ce qui tourne. */

:root{
  color-scheme: light;
  --fond:#eef0f2; --carte:#ffffff; --bord:#e2e4e7;
  --ink:#0b0b0b; --ink2:#52514e; --ink3:#8a8984;
  --serie:#2a78d6; --muet:#c9cbce; --grille:#eceef0;
  --accent:#2a78d6; --alerte:#e34948; --ok:#008300;
  --ombre:0 1px 3px rgba(0,0,0,.08);
}
@media (prefers-color-scheme: dark){
  :root{
    color-scheme: dark;
    --fond:#141413; --carte:#1a1a19; --bord:#2c2c2a;
    --ink:#ffffff; --ink2:#c3c2b7; --ink3:#8a8984;
    --serie:#3987e5; --muet:#3d3e40; --grille:#262625;
    --accent:#3987e5; --alerte:#e66767; --ok:#4caf50;
    --ombre:0 1px 3px rgba(0,0,0,.4);
  }
}
*{box-sizing:border-box; margin:0; padding:0}
body{
  background:var(--fond); color:var(--ink);
  font:13px/1.4 'Segoe UI',system-ui,-apple-system,sans-serif;
}
.num{font-variant-numeric:tabular-nums}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px}

/* ---------------------------------------------------------------- entête */
header{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:8px 14px;
  background:var(--carte); border-bottom:1px solid var(--bord);
}
header h1{font-size:15px; font-weight:600}
header h1 span{color:var(--ink3); font-weight:400}
.periode{margin-left:auto; font-size:11.5px; color:var(--ink2);
         display:flex; gap:5px; align-items:center}
.periode select{
  font-size:11.5px; padding:2px 5px; border:1px solid var(--bord);
  border-radius:4px; background:var(--fond); color:var(--ink);
}

/* le fil : là où l'on est dans les domaines, et par où remonter */
#fil{display:flex; align-items:center; gap:4px; flex-wrap:wrap}
#fil .brique{
  font-size:12px; padding:3px 9px; border-radius:4px; cursor:pointer;
  background:var(--carte); color:var(--ink2); border:1px solid var(--bord);
}
#fil .brique:hover{border-color:var(--accent); color:var(--accent)}
#fil .brique:last-child{
  background:color-mix(in srgb, var(--accent) 12%, var(--carte));
  color:var(--accent); font-weight:600;
}
#fil .sep{color:var(--ink3)}

/* ------------------------------------------------------------- structure */
#page{display:flex; flex-direction:column; gap:10px; padding:10px 14px}
.carte{
  background:var(--carte); border:1px solid var(--bord); border-radius:6px;
  box-shadow:var(--ombre); padding:10px 12px;
}
.carte h2{
  font-size:11px; font-weight:600; letter-spacing:.04em; color:var(--ink2);
  text-transform:uppercase; margin-bottom:8px;
}
.meta{font-size:11.5px; color:var(--ink2); margin-bottom:6px}
.vide{color:var(--ink3); font-size:12px; padding:18px 0; text-align:center}
.vide .l{display:block; margin-top:4px; font-size:11px}
#chargement{padding:60px; text-align:center; color:var(--ink2)}

/* ---------------------------------------------------------- le chemin */
#chemin{display:flex; align-items:stretch; overflow-x:auto; padding-top:4px}
.etape{
  flex:1 1 0; min-width:132px; text-align:left; cursor:pointer; font:inherit;
  background:var(--carte); border:1px solid var(--bord); border-radius:6px;
  padding:8px 10px; color:var(--ink);
}
.etape:hover{border-color:var(--accent)}
.etape.choisie{
  border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 7%, var(--carte));
}
.etape .t{font-size:11px; color:var(--ink2); text-transform:uppercase;
          letter-spacing:.04em}
.etape .v{font-size:21px; font-weight:600; letter-spacing:-.01em; margin-top:1px}
.etape .s{font-size:11px; color:var(--ink3); margin-top:3px}
.etape .p{font-size:11px; color:var(--ink3); margin-top:5px;
          display:flex; align-items:center; gap:5px}
.etape.vivante{border-color:var(--ok)}
.etape.vivante .p{color:var(--ok)}
.fleche{
  flex:0 0 44px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:3px;
}
.fleche .tige{width:100%; height:1px; background:var(--bord); position:relative}
.fleche .tige::after{
  content:''; position:absolute; right:0; top:-3px;
  border:3px solid transparent; border-left-color:var(--bord);
}
.fleche .perte{font-size:10.5px; color:var(--ink3)}

/* la jauge, partout la même : une part de quelque chose */
.jauge{height:5px; border-radius:3px; background:var(--grille);
       overflow:hidden; margin-top:5px}
.jauge i{display:block; height:100%; background:var(--serie); border-radius:3px}
.jauge.rouge i{background:var(--alerte)}

/* le point qui bat quand une passe tourne */
.pouls{
  width:7px; height:7px; border-radius:50%; background:var(--ok); flex:0 0 auto;
  animation:pouls 1.6s ease-in-out infinite;
}
@keyframes pouls{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion: reduce){.pouls{animation:none}}

/* ---------------------------------------------------------- le pavage */
#deux{display:grid; grid-template-columns:1fr 300px; gap:10px; align-items:start}
#colonne{display:flex; flex-direction:column; gap:10px}
#pavage svg{display:block; width:100%}
#pavage .tuile text{pointer-events:none}
#pavage .tnom{font-size:11.5px; font-weight:600; fill:var(--ink)}
#pavage .tval{font-size:11px; fill:var(--ink2)}
#pavage .tuile:hover rect{stroke:var(--accent); stroke-width:1.5}

/* ------------------------------------------------------- la grille mois */
#mois{overflow-x:auto}
table.grille{border-collapse:collapse; font-size:11px; width:100%}
table.grille th{
  font-weight:600; color:var(--ink2); padding:2px 3px; text-align:center;
  white-space:nowrap;
}
table.grille th.nom{text-align:left; padding-right:8px; white-space:nowrap}
table.grille td.case{height:17px; border:1px solid var(--carte)}

/* ------------------------------------------------------ photo, en cours */
.mesures{display:flex; flex-direction:column; gap:7px}
.mesure .l{display:flex; justify-content:space-between; font-size:11.5px;
           color:var(--ink2)}
.services{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.service{
  display:inline-flex; align-items:center; gap:5px; font-size:11px;
  border:1px solid var(--bord); border-radius:20px; padding:2px 8px;
  color:var(--ink2);
}
.service i{width:6px; height:6px; border-radius:50%; background:var(--muet)}
.service.ok i{background:var(--ok)}
.service.ko i{background:var(--alerte)}
.service.ko{color:var(--alerte);
            border-color:color-mix(in srgb, var(--alerte) 40%, var(--bord))}
#photo .ligne{font-size:11.5px; color:var(--ink); margin-top:7px}
#photo .ligne .l,.tourne .l{color:var(--ink3)}
.tourne{
  display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:12px;
  padding:6px 0; border-bottom:1px solid var(--grille);
}
.tourne:last-child{border-bottom:0}
.tourne .num{color:var(--ink2)}
.tourne.perime .pouls{background:var(--alerte); animation:none}

/* ------------------------------------------------------------ retards */
table.sante{width:100%; border-collapse:collapse; font-size:12px}
table.sante td{padding:4px 8px 4px 0; border-bottom:1px solid var(--grille);
               vertical-align:middle}
table.sante td.nom{font-weight:600; white-space:nowrap}
table.sante td.jaugec{width:110px}
table.sante td.jaugec .jauge{margin-top:0}
table.sante td.num{text-align:right; white-space:nowrap;
                   font-variant-numeric:tabular-nums}
table.sante td.l{color:var(--ink3); font-size:11.5px}
table.sante tr.rouge td.nom{color:var(--alerte)}
.badge{
  display:inline-block; font-size:10px; font-weight:600; border-radius:3px;
  padding:0 5px; margin-left:5px; vertical-align:1px;
  background:color-mix(in srgb, var(--accent) 14%, var(--carte));
  color:var(--accent);
}
#sante .note{font-size:11px; color:var(--ink3); margin-top:8px}

/* ------------------------------------------------------- autres flux */
.flux{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
      gap:10px}
.unflux .t{font-size:11px; color:var(--ink2); text-transform:uppercase;
           letter-spacing:.04em}
.unflux .v{font-size:19px; font-weight:600; margin-top:1px}
.unflux .s{font-size:11px; color:var(--ink3); margin-top:4px}
.unflux .p{font-size:11px; color:var(--ink3); margin-top:2px}

/* -------------------------------------------------------------- bulle */
#bulle{
  position:fixed; z-index:10; pointer-events:none; display:none; max-width:300px;
  background:var(--carte); border:1px solid var(--bord); border-radius:5px;
  box-shadow:0 4px 14px rgba(0,0,0,.18); padding:7px 10px; font-size:12px;
}
#bulle b{display:block; margin-bottom:3px}
#bulle .l{color:var(--ink2)}

@media (max-width:900px){
  #deux{grid-template-columns:1fr}
  #chemin{display:grid; grid-template-columns:repeat(2,1fr); gap:8px}
  .fleche{display:none}
  .periode{margin-left:0}
}