:root {
  --fond: #0b1020;
  --carte: #151c33;
  --texte: #ffffff;
  --discret: #b6c0dd;
  --gris: #3b4668;
  --orange: #f59e0b;
  --rouge: #ef4444;
  --vert: #22c55e;
  --cyan: #38bdf8;
}
* { box-sizing: border-box; }
html { font-size: 24px; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  line-height: 1.15;
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  overflow: hidden;
}
body.defilable { height: auto; overflow: auto; display: block; }
header.haut {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.25rem 1rem;
}
.titre { font-size: 1.1rem; font-weight: 700; }
.chrono { font-size: 2.6rem; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.chrono.urgent { color: var(--rouge); }
.chrono.gele { color: var(--cyan); }
.jauge { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; gap: 0.75rem; align-items: center; }
.piste { position: relative; height: 1.1rem; background: var(--gris); border-radius: 0.6rem; overflow: visible; }
.remplissage { height: 100%; width: 0; background: var(--vert); border-radius: 0.6rem; transition: width 0.6s ease; }
.objectif { position: absolute; top: -0.25rem; bottom: -0.25rem; width: 3px; background: #fff; }
.jauge.atteint .remplissage { animation: eclat 3s ease 1; }
@keyframes eclat { 0%, 100% { filter: none; } 30% { filter: brightness(1.8) drop-shadow(0 0 0.6rem var(--vert)); } }
.libelle-jauge { font-size: 1rem; color: var(--discret); white-space: nowrap; }
main.corps { display: grid; grid-template-columns: 1fr 18.5rem; gap: 0.75rem; min-height: 0; }
.grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  grid-auto-rows: min-content;
  gap: 0.35rem;
  align-content: start;
}
.case {
  background: var(--gris);
  border-radius: 0.45rem;
  padding: 0.25rem 0.4rem;
  font-size: 1rem;
  font-weight: 600;
  min-height: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow-wrap: anywhere;
}
.case .l2 { font-weight: 500; opacity: 0.95; }
.case .glyphe { position: absolute; right: 0.3rem; top: 0.1rem; font-size: 1rem; }
.case.s-vert { background: #15803d; }
.case.s-orange { background: #b45309; }
.case.s-rouge { background: #b91c1c; }
.case.s-gris { background: var(--gris); }
.colonne { display: flex; flex-direction: column; gap: 0.5rem; min-height: 0; }
.bloc { background: var(--carte); border-radius: 0.5rem; padding: 0.4rem 0.6rem; }
.bloc h2 { margin: 0 0 0.2rem; font-size: 1rem; color: var(--cyan); text-transform: uppercase; letter-spacing: 0.04em; }
ol.rang, ul.fil { list-style: none; margin: 0; padding: 0; }
ol.rang li { display: grid; grid-template-columns: 1.6rem 1fr auto; gap: 0.3rem; font-size: 1rem; padding: 0.04rem 0; transition: background 0.8s; }
ol.rang li.monte { background: rgba(34, 197, 94, 0.35); }
ol.rang .pts { font-weight: 700; font-variant-numeric: tabular-nums; }
ul.fil li { font-size: 1rem; padding: 0.06rem 0; }
.topbug { font-size: 1rem; }
.banniere {
  position: fixed; left: 0; right: 0; bottom: 0; text-align: center; font-size: 1rem;
  background: var(--orange); color: #111; padding: 0.2rem; display: none; font-weight: 700;
}
.banniere.visible { display: block; }
/* Vues formateur et étudiante : des pages qui défilent */
.page { max-width: 70rem; margin: 0 auto; }
table.liste { border-collapse: collapse; width: 100%; font-size: 1rem; }
table.liste th, table.liste td { text-align: left; padding: 0.15rem 0.4rem; border-bottom: 1px solid var(--gris); }
.pastille { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 50%; margin-right: 0.3rem; }
.pastille.s-vert { background: var(--vert); } .pastille.s-orange { background: var(--orange); }
.pastille.s-rouge { background: var(--rouge); } .pastille.s-gris { background: var(--gris); }
button, input { font: inherit; font-size: 1rem; padding: 0.2rem 0.6rem; border-radius: 0.3rem; border: 1px solid var(--gris); }
button { background: var(--cyan); color: #04121f; font-weight: 700; cursor: pointer; }
button[disabled] { background: var(--gris); color: var(--discret); cursor: not-allowed; }
.gros { font-size: 1.6rem; font-weight: 800; }

/* Écran de salle plus petit (1280 × 720) : mêmes tailles de texte, moins de lignes. */
@media (max-height: 800px) {
  body { gap: 0.3rem; padding: 0.35rem 0.6rem; }
  .chrono { font-size: 2.1rem; }
  .case { min-height: 2.3rem; }
  ol.rang li:nth-child(n+9) { display: none; }
  ul.fil li:nth-child(n+3) { display: none; }
  ul.fil li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbug { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .colonne { overflow: hidden; }
  .bloc { padding: 0.3rem 0.5rem; }
}
[hidden] { display: none !important; }