/* ===========================================================================
   Awoui — l'état des services.
   Aucune couleur littérale : tout vient de assets/tokens.css, donc les deux
   thèmes suivent sans qu'une règle soit écrite deux fois.

   Une page d'état n'a le droit qu'à une seule qualité : être crue. Le dessin
   sert cet objectif et rien d'autre — ce qui est mesuré est net, ce qui n'est
   pas mesuré est visiblement vide, et rien n'occupe l'écran sans porter un
   chiffre. C'est aussi pourquoi les états ne sont jamais dits par la couleur
   seule : chaque pastille est doublée d'un mot.
   =========================================================================== */

.etat{ --barre:7px; --barre-ecart:3px; }

/* ── le héros ───────────────────────────────────────────────────────────── */

.etat-hero{ position:relative; padding:56px 0 34px; }
.etat-hero::after{
  content:""; position:absolute; inset:-120px 0 auto 0; height:560px; z-index:0;
  pointer-events:none; opacity:.8;
  background:
    radial-gradient(600px 300px at 22% 12%, var(--halo-hero-1), transparent 70%),
    radial-gradient(520px 280px at 82% 0%, var(--halo-hero-3), transparent 70%);
}
.etat-hero > .wrap{ position:relative; z-index:1; }

.etat-hero-in{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:40px;
  align-items:center; padding-bottom:34px;
}
.etat-verdict h1{
  font-size:clamp(30px,4.6vw,50px); margin:4px 0 14px; text-wrap:balance;
  max-width:19ch;
}
.etat-verdict .lead{ color:var(--muted); font-size:clamp(16px,1.8vw,19px); max-width:52ch; margin:0; }

/* La fraîcheur du relevé, sur la même ligne que le pouls. C'est le seul
   chiffre de la page qui dit si tous les autres valent encore quelque chose. */
.etat-frais{
  display:flex; align-items:center; gap:10px; margin:20px 0 0;
  font-family:var(--fm); font-size:13px; color:var(--faint);
}
.etat-pouls{
  width:9px; height:9px; border-radius:50%; flex:none;
  background:var(--etat-teinte,var(--ok));
  box-shadow:0 0 0 0 var(--etat-teinte,var(--ok));
}
@media (prefers-reduced-motion:no-preference){
  .etat-pouls{ animation:etat-pouls 2.6s ease-out infinite; }
}
@keyframes etat-pouls{
  0%   { box-shadow:0 0 0 0 var(--etat-teinte,var(--ok)); opacity:1 }
  70%  { box-shadow:0 0 0 9px transparent; opacity:.85 }
  100% { box-shadow:0 0 0 0 transparent; opacity:1 }
}

/* ── l'anneau : un arc par service ──────────────────────────────────────── */
/* Douze arcs, un par cible, dans l'ordre du registre. Il ne décore pas : on y
   lit d'un coup d'œil combien de services vont bien ET lequel ne va pas — la
   même information que la liste, mais en une seule saccade oculaire. */

.etat-anneau{ width:236px; height:236px; position:relative; justify-self:end; }
.etat-anneau svg{ width:100%; height:100%; display:block; overflow:visible; }
.etat-arc{ transition:opacity .25s ease; }
.etat-arc-ok    { stroke:var(--ok) }
.etat-arc-degrade{ stroke:var(--gold) }
.etat-arc-panne { stroke:var(--warn) }
.etat-arc-vide  { stroke:var(--dot-inert) }
.etat-anneau-fond{ stroke:var(--line); }
.etat-anneau-centre{ fill:var(--text); font-family:var(--fm); font-weight:600; }
.etat-anneau-sous{ fill:var(--faint); font-family:var(--fm); }

/* Le balayage : une lueur qui tourne derrière les arcs. Elle ne code aucune
   information — elle dit seulement que la mesure est vivante. Elle disparaît
   donc entièrement quand le système demande moins de mouvement. */
.etat-balayage{ transform-origin:50% 50%; opacity:.5; }
/* Les arrêts du dégradé sont posés en CSS, pas en attribut : un attribut de
   présentation SVG n'interprète pas var(), il rendrait du noir. */
.etat-sweep-0{ stop-color:var(--brand-cyan); stop-opacity:0; }
.etat-sweep-1{ stop-color:var(--brand-cyan); stop-opacity:.85; }
@media (prefers-reduced-motion:no-preference){
  .etat-balayage{ animation:etat-tour 9s linear infinite; }
}
@media (prefers-reduced-motion:reduce){ .etat-balayage{ display:none } }
@keyframes etat-tour{ to{ transform:rotate(360deg) } }

/* ── les trois chiffres ─────────────────────────────────────────────────── */

.etat-chiffres{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;
  position:relative; z-index:1;
}
.etat-chiffre{
  position:relative; border-radius:16px; padding:20px 22px;
  background:var(--glass-fill);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
}
.etat-chiffre::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  pointer-events:none; background:var(--glass-edge);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude; opacity:.5;
}
.etat-chiffre b{
  display:block; font-family:var(--fm); font-weight:600; letter-spacing:-.02em;
  font-size:clamp(26px,3.4vw,34px); color:var(--text); font-variant-numeric:tabular-nums;
}
.etat-chiffre span{ display:block; margin-top:6px; font-size:13.5px; color:var(--muted); }
.etat-chiffre i{ display:block; margin-top:3px; font-size:12px; font-style:normal; color:var(--faint); }

/* ── les blocs ──────────────────────────────────────────────────────────── */

.etat-bloc{ padding:34px 0 0; }
.etat-bloc-fin{ padding-bottom:64px; }
.etat-tete{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:20px; flex-wrap:wrap; margin-bottom:16px;
}
.etat-tete h2{ margin:0; }

.etat-legende{
  display:flex; gap:16px; flex-wrap:wrap;
  font-family:var(--fm); font-size:12px; color:var(--faint);
}
.etat-legende span{ display:inline-flex; align-items:center; gap:7px; }
.etat-legende i{ width:8px; height:12px; border-radius:2px; display:inline-block; }

/* ── un groupe de services ──────────────────────────────────────────────── */

.etat-groupe{
  position:relative; border-radius:18px; margin-bottom:16px; overflow:hidden;
  background:var(--glass-fill);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
}
.etat-groupe-tete{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  padding:16px 22px 14px; border-bottom:1px solid var(--line);
}
.etat-groupe-tete h3{ margin:0; font-size:16px; }
.etat-groupe-tete p{ margin:0; font-size:13px; color:var(--faint); }

/* Les trois colonnes sont déclarées une fois, ici : le rang d'un service ET
   le pied du groupe (qui porte l'échelle des dates) doivent tomber sur la
   même grille, sinon l'échelle ne désigne pas les barres qu'elle légende. */
.etat-groupe{ --cols:minmax(170px,13.5rem) minmax(0,1fr) minmax(112px,auto); }

.etat-svc{
  display:grid; gap:8px 20px; padding:18px 22px;
  grid-template-columns:var(--cols);
  grid-template-areas:"nom bande etat" "nom fen etat";
  align-items:center;
}
.etat-svc + .etat-svc{ border-top:1px solid var(--line); }

.etat-groupe-pied{
  display:grid; grid-template-columns:var(--cols); gap:20px;
  padding:0 22px 14px;
}

.etat-svc-nom{ grid-area:nom; display:flex; align-items:center; gap:10px; min-width:0; }
.etat-pastille{
  width:9px; height:9px; border-radius:50%; flex:none;
  background:var(--etat-teinte,var(--dot-inert));
}
.etat-svc-nom b{ font-weight:500; font-size:15.5px; }
.etat-svc-nom a{ color:inherit; text-decoration:none; }
.etat-svc-nom a:hover{ text-decoration:underline; text-underline-offset:3px; }
.etat-svc-hote{
  display:block; font-family:var(--fm); font-size:11.5px; color:var(--faint);
  margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.etat-svc-chiffres{
  grid-area:etat; display:flex; flex-direction:column; align-items:flex-end; gap:6px;
  font-family:var(--fm); font-size:12px; color:var(--faint);
  font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap;
}
.etat-etiquette{
  display:inline-flex; align-items:center; gap:6px;
  padding:2px 9px; border-radius:999px; font-size:11.5px; letter-spacing:.02em;
  border:1px solid var(--etat-bord,var(--line)); background:var(--etat-fond,transparent);
  color:var(--etat-encre,var(--muted));
}

/* ── la bande des 90 jours ──────────────────────────────────────────────── */

.etat-bande{ grid-area:bande; min-width:0; }
.etat-bande{
  display:flex; align-items:flex-end; gap:var(--barre-ecart);
  height:36px; margin-bottom:8px;
}
.etat-barre{
  flex:1 1 0; min-width:2px; height:100%; border-radius:2px;
  background:var(--dot-inert); opacity:.45;
}
.etat-barre-ok{ background:var(--ok); opacity:1; }
.etat-barre-tiede{ background:var(--gold); opacity:1; }
.etat-barre-panne{ background:var(--warn); opacity:1; }
/* Le jour en cours est le seul qui bouge encore : on le distingue, sinon on
   croit lire une journée finie. */
.etat-barre-aujourdhui{ box-shadow:0 0 0 1px var(--bg-0), 0 0 12px -2px var(--glow); }

.etat-echelle{
  grid-column:2; display:flex; justify-content:space-between;
  font-family:var(--fm); font-size:11px; color:var(--faint);
}
.etat-fen{
  grid-area:fen; min-width:0;
  display:flex; gap:6px 16px; flex-wrap:wrap;
  font-family:var(--fm); font-size:12px; color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.etat-fen b{ color:var(--text); font-weight:600; }
.etat-fen span{ color:var(--faint); }
/* Une valeur dont la fenêtre n'est pas encore remplie. Elle n'est pas fausse,
   elle est creuse : le pointillé le dit sans ajouter une ligne de texte. */
.etat-partiel b{ color:var(--muted); border-bottom:1px dotted var(--line-strong); cursor:help; }
/* Une fenêtre que le registre n'a pas encore vécue n'affiche PAS de chiffre.
   « 90 j : 100 % » au troisième jour serait exact au sens arithmétique et faux
   au sens où on le lit — c'est le genre de vrai qui décrédibilise tout le
   reste de la page. Le tiret, lui, se remplira tout seul. */
.etat-creux b{ color:var(--faint); font-weight:400; cursor:help; }

/* ── le journal des incidents ───────────────────────────────────────────── */

.etat-vide{
  border-radius:16px; padding:22px; border:1px dashed var(--line-2);
  color:var(--muted); font-size:15px; background:var(--inset);
}
.etat-vide b{ color:var(--text); font-weight:500; }

.etat-inc{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:4px 16px;
  align-items:baseline; padding:14px 4px; border-bottom:1px solid var(--line);
  font-size:14.5px;
}
.etat-inc:last-child{ border-bottom:0; }
.etat-inc time, .etat-inc .etat-duree{
  font-family:var(--fm); font-size:12.5px; color:var(--faint);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.etat-inc-nom{ color:var(--text); }

/* ── la sonde ───────────────────────────────────────────────────────────── */

.etat-sonde{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:2px;
  border-radius:16px; overflow:hidden; border:1px solid var(--line);
  background:var(--line);
}
.etat-sonde div{ background:var(--bg-1); padding:16px 18px; }
.etat-sonde b{
  display:block; font-family:var(--fm); font-size:19px; color:var(--text);
  font-variant-numeric:tabular-nums; font-weight:600;
}
.etat-sonde span{ display:block; margin-top:4px; font-size:12.5px; color:var(--faint); }
.etat-methode{
  margin:16px 0 0; font-size:13.5px; color:var(--faint); max-width:78ch;
}
.etat-methode a{ color:var(--muted); }

.etat-noscript{ padding:40px 0; color:var(--muted); }

/* ── quand la mesure s'est tue ──────────────────────────────────────────── */
/* Une page d'état qui garde un air serein pendant que sa mesure est morte est
   pire qu'une page absente. Passé le délai, elle cesse d'affirmer. */
.etat-perime .etat-anneau{ opacity:.4; }
.etat-perime .etat-frais{ color:var(--warn); }

/* ── écrans étroits ─────────────────────────────────────────────────────── */

@media (max-width:900px){
  .etat-hero-in{ grid-template-columns:minmax(0,1fr); gap:28px; }
  .etat-anneau{ justify-self:start; width:180px; height:180px; order:-1; }
  .etat-groupe{ --cols:minmax(0,1fr); }
  .etat-svc{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"nom" "etat" "bande" "fen";
    gap:12px;
  }
  .etat-svc-chiffres{
    flex-direction:row; align-items:center; flex-wrap:wrap; gap:8px 12px;
    justify-self:start; text-align:left;
  }
  .etat-echelle{ grid-column:1; }
  .etat-chiffres{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:560px){
  .etat{ --barre:5px; --barre-ecart:2px; }
  .etat-bande{ height:30px; }
  .etat-inc{ grid-template-columns:minmax(0,1fr); }
}