/* ===========================================================================
   Page d'état des services Akiden.

   Les couleurs portent une information, pas une décoration : vert en service,
   ambre perturbé, rouge en panne, bleu fermé volontairement. Le bleu est
   délibérément à l'écart du rouge et de l'ambre — une fermeture décidée ne doit
   jamais se lire comme un incident.
   =========================================================================== */

:root {
  --fond: #131313;
  --panneau: #1c1c1c;
  --panneau-2: #232323;
  --bord: #333;
  --bord-fort: #4a4a4a;
  --texte: #fafafa;
  --doux: #a3a3a3;

  --vert: #3fb950;
  --vert-doux: rgba(63, 185, 80, .13);
  --ambre: #d29922;
  --ambre-doux: rgba(210, 153, 34, .13);
  --rouge: #f85149;
  --rouge-doux: rgba(248, 81, 73, .13);
  --bleu: #58a6ff;
  --bleu-doux: rgba(88, 166, 255, .13);
  --gris: #3a3a3a;

  --rayon: 12px;
  --police: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font-family: var(--police); font-size: 15.5px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

.barre {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px clamp(14px, 4vw, 26px);
  border-bottom: 1px solid var(--bord); background: var(--panneau);
}
.marque { font-weight: 800; text-decoration: none; letter-spacing: -.02em; }
.barre-titre { color: var(--doux); font-size: .92rem; }
.maj { margin-left: auto; color: var(--doux); font-size: .8rem; }

.contenu { max-width: 900px; margin: 0 auto; padding: clamp(16px, 4vw, 30px); }

/* ---------- Le bandeau global ---------- */
.bandeau {
  display: flex; gap: 16px; align-items: center;
  padding: 20px 22px; border-radius: var(--rayon);
  border: 1px solid var(--bord); background: var(--panneau); margin-bottom: 22px;
}
.bandeau h1 { font-size: clamp(1.15rem, 3.6vw, 1.5rem); margin: 0 0 2px; letter-spacing: -.02em; }
.bandeau p { margin: 0; font-size: .9rem; }
.bandeau-pastille { width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto; background: var(--gris); }
.b-ok { border-color: var(--vert); background: var(--vert-doux); }
.b-ok .bandeau-pastille { background: var(--vert); }
.b-degrade { border-color: var(--ambre); background: var(--ambre-doux); }
.b-degrade .bandeau-pastille { background: var(--ambre); }
.b-panne { border-color: var(--rouge); background: var(--rouge-doux); }
.b-panne .bandeau-pastille { background: var(--rouge); }
.b-maintenance { border-color: var(--bleu); background: var(--bleu-doux); }
.b-maintenance .bandeau-pastille { background: var(--bleu); }

.doux { color: var(--doux); }

/* ---------- Un service ---------- */
.panneau {
  background: var(--panneau); border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: 18px 20px; margin-bottom: 16px;
}
.service-tete {
  display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;
  padding-bottom: 14px; border-bottom: 1px solid var(--bord); margin-bottom: 4px;
}
.service-tete h2 { font-size: 1.05rem; margin: 0; letter-spacing: -.01em; }
.service-tete p { margin: 2px 0 0; font-size: .85rem; }
.service-lien {
  margin-left: auto; font-size: .8rem; color: var(--doux); text-decoration: none;
  border: 1px solid var(--bord); border-radius: 8px; padding: 4px 10px; white-space: nowrap;
}
.service-lien:hover { color: var(--texte); border-color: var(--bord-fort); }

/* ---------- Une fonction surveillée ---------- */
.sonde { padding: 15px 0; border-bottom: 1px solid var(--bord); }
.sonde:last-child { border-bottom: none; padding-bottom: 2px; }
.sonde-tete { display: flex; align-items: flex-start; gap: 12px; }
.sonde-nom { min-width: 0; }
.sonde-nom b { display: block; font-size: .95rem; font-weight: 600; }
.sonde-nom i { font-style: normal; font-size: .82rem; color: var(--doux); }
.sonde-message { margin: 6px 0 0; font-size: .84rem; color: var(--ambre); }

.etiquette {
  margin-left: auto; flex: 0 0 auto; white-space: nowrap;
  font-size: .74rem; font-weight: 600; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--bord-fort); color: var(--doux);
}
.e-ok { color: var(--vert); border-color: var(--vert); background: var(--vert-doux); }
.e-degrade { color: var(--ambre); border-color: var(--ambre); background: var(--ambre-doux); }
.e-panne { color: var(--rouge); border-color: var(--rouge); background: var(--rouge-doux); }
.e-maintenance { color: var(--bleu); border-color: var(--bleu); background: var(--bleu-doux); }

/* ---------- Les 90 jours ---------- */
.barre-jours { display: flex; gap: 2px; margin: 12px 0 6px; height: 30px; }
.jour { flex: 1; min-width: 2px; border-radius: 2px; background: var(--gris); }
.jour:hover { filter: brightness(1.5); }
.j-ok { background: var(--vert); }
.j-degrade { background: var(--ambre); }
.j-panne { background: var(--rouge); }
.j-maintenance { background: var(--bleu); }
.j-inconnu { background: var(--gris); }
/* Sous 620 px, 90 traits de 2 px deviennent illisibles : on n'en montre que la
   moitié la plus récente, ce qui reste vrai puisqu'ils sont dans l'ordre. */
@media (max-width: 620px) {
  .jour:nth-child(-n+45) { display: none; }
}

.sonde-pied {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: .74rem; color: var(--doux);
}
.dispo { font-variant-numeric: tabular-nums; }

/* ---------- Incidents ---------- */
.incidents { list-style: none; padding: 0; margin: 0; }
.incidents li {
  display: flex; gap: 10px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--bord); font-size: .88rem;
}
.incidents li:last-child { border-bottom: none; }
.pastille { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--gris); }
.p-ok { background: var(--vert); }
.p-degrade { background: var(--ambre); }
.p-panne { background: var(--rouge); }
.p-maintenance { background: var(--bleu); }

h2 { font-size: 1.02rem; margin: 0 0 10px; letter-spacing: -.01em; }
.franchise p { font-size: .87rem; color: var(--doux); margin: 0 0 10px; }
.franchise p:last-child { margin-bottom: 0; }

.pied {
  text-align: center; padding: 26px 16px 40px;
  font-size: .82rem; color: var(--doux);
}
.pied a { color: var(--doux); }