/* État du serveur · complète apocalypse-*.css (mêmes variables, mêmes polices) */
.etat-page { max-width: 68rem; margin: 0 auto; padding: 0 1.25rem 4rem; }
.etat-entete { padding: 3rem 0 1rem; }
.etat-chapeau { color: rgba(236, 228, 210, 0.72); max-width: 44ch; margin: 0 0 2rem; }
.etat-grille { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.etat-carte {
  background: var(--beton-2); border: 2px solid var(--trait); border-left: 6px solid var(--rouille);
  padding: 1.1rem 1.25rem;
}
.etat-carte-large { border-left-color: var(--rubalise); }
.etat-libelle { margin: 0 0 .35rem; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(236, 228, 210, 0.6); }
.etat-valeur { margin: 0; font-family: "Big Shoulders Display", system-ui, sans-serif; font-size: 2.4rem; line-height: 1; color: var(--os); }
.etat-valeur-petite { font-size: 1.5rem; }
.etat-detail { margin: .4rem 0 0; font-size: .9rem; color: rgba(236, 228, 210, 0.6); }
.pastille { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: .6rem; vertical-align: middle; }
.pastille-en-ligne { background: #8bc34a; box-shadow: 0 0 0 4px rgba(139, 195, 74, 0.18); }
.pastille-hors-ligne { background: #b1473a; box-shadow: 0 0 0 4px rgba(177, 71, 58, 0.18); }
.pastille-attente { background: var(--rubalise); }
.etat-note { color: rgba(236, 228, 210, 0.55); font-size: .9rem; margin-top: 1rem; }
.etat-tableau-cadre { overflow-x: auto; border: 2px solid var(--trait); background: var(--beton-2); }
.etat-tableau { width: 100%; border-collapse: collapse; min-width: 40rem; }
.etat-tableau th, .etat-tableau td { padding: .7rem 1rem; text-align: right; border-bottom: 1px solid var(--trait); }
.etat-tableau th:nth-child(2), .etat-tableau td:nth-child(2) { text-align: left; }
.etat-tableau th:first-child, .etat-tableau td:first-child { text-align: center; width: 3rem; color: rgba(236, 228, 210, 0.5); }
.etat-tableau thead th { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(236, 228, 210, 0.6); font-weight: 600; }
/* la tête du classement se distingue par la graisse ; le jaune reste réservé
   à la colonne sur laquelle on trie, sinon les deux signaux se confondent */
.etat-tableau tbody tr:nth-child(1) td { color: var(--os); font-weight: 700; }
.etat-tableau tbody tr:nth-child(1) td.colonne-active { color: var(--rubalise); }
.etat-tableau tbody tr:hover { background: rgba(236, 228, 210, 0.04); }
.etat-tableau td { font-variant-numeric: tabular-nums; }
@media (max-width: 40rem) { .etat-valeur { font-size: 2rem; } }

/* Classement : onglets de critère, podium des trois premiers, colonne active */
.podium-onglets { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.4rem; }
.podium-onglet {
  font: inherit; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .55rem .95rem; cursor: pointer;
  background: var(--beton-2); color: rgba(236, 228, 210, 0.72); border: 2px solid var(--trait);
}
.podium-onglet:hover { border-color: rgba(242, 194, 27, 0.45); color: var(--os); }
.podium-onglet[aria-selected="true"] { background: var(--rubalise); border-color: var(--rubalise); color: var(--beton); font-weight: 700; }
.podium { list-style: none; padding: 0; margin: 0 0 1.75rem; display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); align-items: end; }
.podium-place { background: var(--beton-2); border: 2px solid var(--trait); border-top: 6px solid var(--trait); padding: 1rem 1.1rem 1.15rem; }
.podium-place-1 { border-top-color: var(--rubalise); }
.podium-place-2 { border-top-color: #b9b3a4; }
.podium-place-3 { border-top-color: #8a6a45; }
.podium-rang { margin: 0 0 .35rem; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(236, 228, 210, 0.55); }
.podium-nom { margin: 0; font-family: "Big Shoulders Display", system-ui, sans-serif; font-size: 1.55rem; line-height: 1.05; color: var(--os); overflow-wrap: anywhere; }
.podium-score { margin: .45rem 0 0; font-family: "Big Shoulders Display", system-ui, sans-serif; font-size: 2.1rem; line-height: 1; color: var(--rubalise); font-variant-numeric: tabular-nums; }
.podium-place-1 .podium-score { font-size: 2.7rem; }
.podium-unite { font-size: .85rem; color: rgba(236, 228, 210, 0.6); margin-left: .3rem; }
.podium-vide { grid-column: 1 / -1; color: rgba(236, 228, 210, 0.55); margin: 0 0 1.5rem; }
.etat-tableau th.colonne-active, .etat-tableau td.colonne-active { color: var(--rubalise); }
@media (max-width: 46rem) { .podium { grid-template-columns: 1fr; } .podium-place-1 .podium-score { font-size: 2.3rem; } }