/* Optimus — ce qui s'ajoute à l'identité de Nexus (style.css, servi depuis ./public).
   Uniquement ce qui est propre à une console de parc : les tuiles d'état, les
   bandeaux de fraîcheur et la fiche d'une machine. */

:root {
  --etat-ok: #48c774;
  --etat-attention: #ffb54e;
  --etat-probleme: #ff6b6b;
  --etat-inconnu: #6b7280;
}

.petit { font-size: .85rem; }
.lien-nexus { color: var(--muted); font-size: .9rem; }
.lien-nexus:hover { color: var(--accent); }

/* --- Le bandeau de fraîcheur -------------------------------------------------
   Il dit QUAND la mesure a été prise. C'est la première chose à lire : un parc
   tout vert mesuré il y a six jours ne dit rien de l'état d'aujourd'hui. */
.bandeau {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem .9rem; margin-bottom: 1rem;
  border: 1px solid var(--bord); border-left-width: 4px; border-radius: var(--rayon);
  background: var(--fond-2); font-size: .9rem;
}
.bandeau .quoi { color: var(--muted); }
.bandeau.ok { border-left-color: var(--etat-ok); }
.bandeau.attention { border-left-color: var(--etat-attention); }
.bandeau.probleme { border-left-color: var(--etat-probleme); background: #2a1515; }
.bandeau.inconnu { border-left-color: var(--etat-inconnu); }

.bilan { display: flex; gap: .75rem; font-size: .85rem; color: var(--muted); }
.bilan .n { font-variant-numeric: tabular-nums; font-weight: 600; }
.bilan .ok .n { color: var(--etat-ok); }
.bilan .attention .n { color: var(--etat-attention); }
.bilan .probleme .n { color: var(--etat-probleme); }
.bilan .inconnu .n { color: var(--etat-inconnu); }

/* --- Les tuiles --------------------------------------------------------------
   Une machine par tuile, l'essentiel sans cliquer. La barre de gauche porte
   l'état : c'est la seule chose qu'on doit pouvoir lire de loin. */
.tuile {
  background: var(--fond-2); border: 1px solid var(--bord); border-left: 4px solid var(--etat-inconnu);
  border-radius: var(--rayon); padding: .9rem 1rem; cursor: pointer; text-align: left; width: 100%;
  display: flex; flex-direction: column; gap: .5rem; transition: border-color .15s, transform .15s;
}
.tuile:hover { transform: translateY(-1px); border-color: var(--accent); }
.tuile.etat-ok { border-left-color: var(--etat-ok); }
.tuile.etat-attention { border-left-color: var(--etat-attention); }
.tuile.etat-probleme { border-left-color: var(--etat-probleme); }
/* Un poste non relevé est TIRETÉ, jamais plein : il ne doit pas avoir l'air sain. */
.tuile.etat-inconnu { border-left-style: dashed; opacity: .75; }

.tuile .haut { display: flex; align-items: baseline; gap: .5rem; }
.tuile .nom { font-weight: 600; font-size: 1.05rem; }
.tuile .modele { color: var(--muted); font-size: .8rem; margin-left: auto; text-align: right; }
.tuile .mesures { display: flex; gap: 1rem; font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.tuile .mesures b { color: var(--texte); font-weight: 600; }
.tuile .alertes { display: flex; flex-direction: column; gap: .2rem; font-size: .82rem; }
.tuile .alertes .a { color: var(--muted); }
.tuile .alertes .a.probleme { color: #fca5a5; }
.tuile .alertes .a.attention { color: #fcd34d; }
.tuile .puce { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: .4rem; background: currentColor; vertical-align: middle; }
.tuile .en-ligne-nexus { font-size: .75rem; color: var(--accent); }

/* --- Sauvegardes ------------------------------------------------------------- */
.sauvegarde { background: var(--fond-2); border: 1px solid var(--bord); border-left: 4px solid var(--etat-inconnu); border-radius: var(--rayon); padding: 1rem; margin-bottom: 1rem; }
.sauvegarde.etat-ok { border-left-color: var(--etat-ok); }
.sauvegarde.etat-attention { border-left-color: var(--etat-attention); }
.sauvegarde.etat-probleme { border-left-color: var(--etat-probleme); }
.sauvegarde h2 { display: flex; align-items: baseline; gap: .6rem; }
.sauvegarde .etiquette { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; padding: .1rem .45rem; border-radius: 999px; border: 1px solid var(--bord); color: var(--muted); }
.sauvegarde .etiquette.ok { color: var(--etat-ok); border-color: var(--etat-ok); }
.sauvegarde .etiquette.attention { color: var(--etat-attention); border-color: var(--etat-attention); }
.sauvegarde .etiquette.probleme { color: var(--etat-probleme); border-color: var(--etat-probleme); }
.sauvegarde dl { display: grid; grid-template-columns: max-content 1fr; gap: .25rem .9rem; margin: .5rem 0; font-size: .88rem; }
.sauvegarde dt { color: var(--muted); }
.sauvegarde dd { margin: 0; font-variant-numeric: tabular-nums; }
.sauvegarde ul { margin: .5rem 0 0; padding-left: 1.1rem; font-size: .85rem; }
.sauvegarde li.probleme { color: #fca5a5; }
.sauvegarde li.attention { color: #fcd34d; }
.sauvegarde li.inconnu { color: var(--muted); }

/* --- Fiche ------------------------------------------------------------------- */
dialog#fiche {
  background: var(--fond-2); color: var(--texte); border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: 1.25rem; max-width: 620px; width: calc(100% - 2rem);
}
dialog#fiche::backdrop { background: rgba(0, 0, 0, .7); }
.fiche-entete { display: flex; align-items: center; gap: 1rem; margin-bottom: .75rem; }
.fiche-entete h2 { margin: 0; }
.fiche-entete button { margin-left: auto; }
#fiche-corps dl { display: grid; grid-template-columns: max-content 1fr; gap: .3rem .9rem; font-size: .9rem; }
#fiche-corps dt { color: var(--muted); }
#fiche-corps dd { margin: 0; }
#fiche-corps h3 { font-size: .95rem; margin: 1rem 0 .4rem; }

@media (max-width: 640px) {
  .tuile .modele { display: none; }
  .bilan { flex-wrap: wrap; gap: .5rem; }
}