/* ════════════════════════════════════════════════════════════════════════════
   LE FEU — composant partagé. Module DÉCIDER, bloc « Les feux ».
   Relevé sur les trois rendus visés G1 : la ligne est IDENTIQUE sur iPhone,
   iPad et bureau (56 px, pastille 12 px, valeur en Bodoni, heure à droite).
   Seule la largeur du conteneur change — c'est ce qui en fait un composant
   et non trois variantes.

   Règles de la charte tenues ici :
     · un feu = PASTILLE + LIBELLÉ + VALEUR, jamais la couleur seule (G1) ;
     · chaque feu porte SON heure de relevé — un feu sans horodatage ment par
       fraîcheur ;
     · matérialité papier : filets, pas d'ombres, rayons de 3 px.
   ════════════════════════════════════════════════════════════════════════════ */

.bloc-feux {
  background: var(--bg-card);
  border: 1px solid var(--hair);
  border-radius: var(--radius-card);
}
.bloc-titre {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  margin: 0 0 var(--space-2);
  color: var(--text);
}

.feu {
  min-height: 56px;                 /* cible tactile : la doctrine terrain */
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 14px;
  border-top: 1px solid var(--hair);
}
.feu:first-child { border-top: none }

.feu .pastille {
  width: 12px; height: 12px;
  border-radius: var(--radius-card);
  flex: 0 0 12px;
  background: var(--faint);         /* défaut : inconnu, pas « vert » */
}
.feu-vert    .pastille { background: var(--sauge) }
.feu-ambre   .pastille { background: var(--warn) }
.feu-rouge   .pastille { background: var(--terre) }
.feu-inconnu .pastille { background: var(--faint) }

.feu .libelle { flex: 1; font-size: 15px; color: var(--text); min-width: 0 }
.feu .valeur {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  white-space: nowrap;
}
.feu-vert  .valeur { color: var(--sauge) }
.feu-ambre .valeur { color: var(--warn) }
.feu-rouge .valeur { color: var(--terre) }
.feu-inconnu .valeur { color: var(--faint); font-style: italic }

.feu .releve {
  font-size: 12px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  width: 38px;
  text-align: right;
  flex: 0 0 38px;
}

/* ── Ce que la sonde ne mesure PAS ─────────────────────────────────────────
   Écart assumé au rendu G1, sous la règle posée au gate G2 : le rendu montrait
   quatre feux, deux n'ont aucune source. Plutôt qu'une ligne vide ou un zéro
   inventé, on dit lesquels manquent et pourquoi. Un blanc nommé vaut mieux
   qu'un vert emprunté. */
.feux-manquants {
  padding: 10px 14px;
  border-top: 1px solid var(--hair);
  font-size: 12px;
  color: var(--faint);
  line-height: 1.45;
}
.feux-manquants b { font-weight: 600; color: var(--muted) }

/* ── La fraîcheur du relevé lui-même ───────────────────────────────────────
   Le pire feu est celui qui reste vert parce que plus personne ne le regarde.
   Si le pouls a vieilli, on le dit AU-DESSUS des feux : ils deviennent des
   souvenirs, pas des mesures. */
.pouls-perime {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: 12px 14px;
  border-bottom: 1px solid var(--hair);
  border-left: 3px solid var(--warn);
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
}
.pouls-perime .pastille {
  width: 10px; height: 10px; border-radius: var(--radius-card);
  background: var(--warn); flex: 0 0 10px; margin-top: 4px;
}
.bloc-feux[data-perime="oui"] .feu .valeur,
.bloc-feux[data-perime="oui"] .feu .libelle { opacity: .55 }

.feux-pied {
  padding: 8px 14px 10px;
  border-top: 1px solid var(--hair);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

/* ── Placement dans le tableau de bord ─────────────────────────────────────
   Le rendu G1 met les feux dans la colonne latérale au bureau et en pleine
   largeur sur les petits écrans. Le shell actuel n'a pas encore la grille de
   Décider : on pose le bloc en tête du contenu, à une largeur lisible, et il
   se déplacera dans la colonne quand la grille arrivera. */
.hos-feux { margin: 0 0 calc(var(--bl) * 3); max-width: 520px }
@media (min-width: 1100px) {
  .hos-feux { max-width: 420px }
}