/* Main courante · e2pz
 *
 * Direction : une tour de contrôle travaille avec des bandes de progression de
 * vol, une par appareil, déplacées entre les cases au fil du vol. C'est la
 * structure exacte de ces données : une action sortante, un état, une
 * annotation. La bande est donc l'élément signature, et le seul endroit où ce
 * tableau prend un risque : du papier clair posé sur une console sombre.
 *
 * Conséquence de forme, et elle est voulue : les refus sont rangés dans le même
 * râtelier que les publications, sur papier teinté. Un tableau de bord qui ne
 * montre que ce qui est parti ment par omission.
 */

:root {
  --console-0: #14181D;
  --console-1: #191E24;
  --console-2: #212832;
  --console-3: #2C3542;
  --trait: #333E4C;

  --bande: #E7E2D6;
  --bande-teintee: #D6D0C1;
  --encre: #1E2229;
  --encre-pale: #565E68;

  --ambre: #E3A33C;
  --ardoise: #7E8FA3;
  --brique: #B4553F;
  --vert: #5E9E7A;

  --texte: #D6DCE4;
  --texte-bas: #8895A6;

  --mono: ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --rail: 46px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--rail) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--console-1);
  color: var(--texte);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--ambre);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- Rail haut */

.rail {
  position: sticky; top: 0; z-index: 20;
  height: var(--rail);
  display: flex; align-items: center; gap: 20px;
  padding: 0 20px;
  background: rgba(20, 24, 29, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--trait);
}

.rail__marque {
  font-family: var(--mono);
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--texte); white-space: nowrap;
}
.rail__marque b { color: var(--ambre); font-weight: 600; }

/* `min-width: 0` n'est pas cosmetique ici. Sans lui, un element flex garde un
 * min-width automatique egal a la largeur de son contenu : la barre refuse de
 * retrecir, elargit le corps de page, et sur telephone TOUT le reste de la mise
 * en page se retrouve rogne a droite. Meme piege que la bande en grille. */
.rail__nav {
  display: flex; gap: 2px; overflow-x: auto; flex: 1; min-width: 0;
  scrollbar-width: none;
}
.rail__nav::-webkit-scrollbar { display: none; }

.rail__nav a {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--texte-bas); text-decoration: none;
  padding: 6px 10px; border-radius: 2px; white-space: nowrap;
}
.rail__nav a:hover { color: var(--texte); background: var(--console-2); }

.rail__heure {
  font-family: var(--mono); font-size: 11px; color: var(--texte-bas);
  white-space: nowrap;
}

/* --------------------------------------------------------------- Structure */

.page { max-width: 1080px; margin: 0 auto; padding: 0 20px 96px; }

.section { padding-top: 56px; }

.eyebrow {
  display: flex; align-items: baseline; gap: 12px;
  border-top: 1px solid var(--trait);
  padding-top: 10px; margin-bottom: 20px;
}
.eyebrow h2 {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--texte);
}
.eyebrow .compte {
  font-family: var(--mono); font-size: 11px; color: var(--texte-bas);
  letter-spacing: .08em;
}
.eyebrow .compte b { color: var(--ambre); font-weight: 600; }

.chapeau {
  max-width: 62ch; margin: -6px 0 22px;
  color: var(--texte-bas); font-size: 14px;
}

/* -------------------------------------------------------------------- Hero */

.hero { padding: 52px 0 8px; }

.hero__eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--ambre); margin-bottom: 14px;
}

/* En monospace, une ligne de 26 caracteres a 28px fait 437px : sur un
 * telephone elle elargit le corps de page, et la barre du haut, les cadrans et
 * les bandes sont rognes avec elle. Le titre se replie donc tout seul, borne
 * par une mesure en caracteres plutot que par un saut de ligne en dur. */
.hero h1 {
  margin: 0 0 14px;
  max-width: 26ch;
  font-family: var(--mono);
  font-size: clamp(21px, 5.4vw, 46px);
  font-weight: 500; line-height: 1.1; letter-spacing: -.02em;
  color: #FFF;
}

.hero p {
  max-width: 60ch; margin: 0; color: var(--texte-bas); font-size: 15px;
}

/* ------------------------------------------------------------- Cadrans */

.cadrans {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  background: var(--trait);
  border: 1px solid var(--trait);
  margin-top: 34px;
}

.cadran { background: var(--console-2); padding: 16px 16px 14px; }

.cadran__valeur {
  font-family: var(--mono);
  font-size: clamp(28px, 4vw, 38px); font-weight: 500;
  font-variant-numeric: tabular-nums; line-height: 1;
  color: #FFF;
}
.cadran__valeur.est-nul { color: var(--texte-bas); }
.cadran__valeur.est-bon { color: var(--vert); }
.cadran__valeur.est-vif { color: var(--ambre); }

.cadran__delta {
  font-family: var(--mono); font-size: 12px; color: var(--vert);
  margin-left: 6px;
}

.cadran__label {
  margin-top: 8px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--texte-bas); line-height: 1.4;
}

/* ------------------------------------------------------- Bande (signature) */

.ratelier { display: flex; flex-direction: column; gap: 4px; }

.bande {
  display: grid;
  grid-template-columns: 5px 156px 1fr;
  background: var(--bande);
  color: var(--encre);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}

.bande--refus, .bande--abstention { background: var(--bande-teintee); }

.bande__etat { background: var(--ardoise); border-radius: 2px 0 0 2px; }
.bande--publie .bande__etat { background: var(--ambre); }
.bande--refus .bande__etat { background: var(--brique); }
.bande--reaction .bande__etat { background: var(--vert); }

.bande__id {
  padding: 12px 12px 12px 14px;
  border-right: 1px dashed rgba(30, 34, 41, .28);
  font-family: var(--mono); font-size: 11.5px; line-height: 1.5;
}
.bande__horo { color: var(--encre); font-weight: 600; letter-spacing: .02em; }
/* Un identifiant Bluesky depasse souvent la colonne. Le couper n'importe ou
 * (`break-all`) donne « @itsalexzajac.b / sky.social », illisible. On tronque
 * proprement et le nom entier reste dans l'attribut title. */
.bande__cible {
  color: var(--encre-pale);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bande__decision {
  display: inline-block; margin-top: 6px;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 600; color: var(--encre-pale);
}
.bande--publie .bande__decision { color: #8A6112; }
.bande--refus .bande__decision { color: var(--brique); }

.bande__corps { padding: 12px 16px; min-width: 0; }

.bande__texte {
  margin: 0; font-size: 14px; line-height: 1.5; color: var(--encre);
}
.bande__texte.est-barre { color: var(--encre-pale); }

.bande__amont {
  margin: 0 0 8px; font-size: 12.5px; color: var(--encre-pale);
  border-left: 2px solid rgba(30, 34, 41, .18); padding-left: 9px;
}

.bande__annotation {
  margin-top: 10px; padding: 7px 10px;
  background: rgba(30, 34, 41, .06);
  border-left: 2px solid var(--brique);
  font-size: 12.5px; color: var(--encre-pale);
}
.bande--publie .bande__annotation { border-left-color: var(--ambre); }
.bande--abstention .bande__annotation { border-left-color: var(--ardoise); }

.bande__pied {
  margin-top: 11px; padding-top: 9px;
  border-top: 1px solid rgba(30, 34, 41, .12);
  display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center;
}

.bande__lien {
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  color: #5A4413; text-decoration: none;
  border-bottom: 1px solid rgba(90, 68, 19, .35);
  display: inline-flex; align-items: center; gap: 5px;
}
.bande__lien:hover { border-bottom-color: #5A4413; }
.bande__lien svg { width: 12px; height: 12px; }

.bande__mesure {
  margin-left: auto;
  font-family: var(--mono); font-size: 11px; color: var(--encre-pale);
  letter-spacing: .04em;
}
.bande__mesure.est-bon { color: #2F6B4E; font-weight: 600; }

/* ------------------------------------------------------------------ Tables */

/* Un tableau a six colonnes ne rentre pas dans un telephone. Sans ce cadre qui
 * defile, c'est la page entiere qui deborde horizontalement, et tout le reste
 * de la mise en page part avec elle. */
.cadre-tableau { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.tableau {
  width: 100%; border-collapse: collapse; font-size: 13.5px;
  min-width: 720px;
}
.tableau .quand { white-space: nowrap; }
.tableau th {
  text-align: left; padding: 8px 12px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--texte-bas);
  border-bottom: 1px solid var(--trait);
}
.tableau td {
  padding: 9px 12px; border-bottom: 1px solid rgba(51, 62, 76, .5);
  vertical-align: top;
}
.tableau tr:hover td { background: var(--console-2); }
.tableau .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tableau .faible { color: var(--texte-bas); }

.jeton {
  display: inline-block; padding: 1px 7px; border-radius: 2px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; white-space: nowrap;
  border: 1px solid currentColor;
}
.jeton--ambre { color: var(--ambre); }
.jeton--vert { color: var(--vert); }
.jeton--brique { color: var(--brique); }
.jeton--ardoise { color: var(--ardoise); }

.bloc { background: var(--console-2); border: 1px solid var(--trait); padding: 18px 20px; }

/* --------------------------------------------------------------- Doctrine */

.critere {
  border-top: 1px solid var(--trait);
  padding: 18px 0;
  display: grid; grid-template-columns: 34px 1fr; gap: 16px;
}
.critere__rang {
  font-family: var(--mono); font-size: 12px; color: var(--ambre);
  padding-top: 2px; font-variant-numeric: tabular-nums;
}
.critere h3 {
  margin: 0 0 6px; font-size: 16px; font-weight: 600; color: #FFF;
  line-height: 1.35;
}
.critere p { margin: 0; color: var(--texte-bas); max-width: 66ch; font-size: 14px; }
.critere .preuve {
  margin-top: 12px; padding: 10px 14px;
  background: var(--console-2); border-left: 2px solid var(--trait);
  font-size: 13px; color: var(--texte);
}
.critere .preuve span {
  display: block; margin-bottom: 5px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--texte-bas);
}

/* -------------------------------------------------------------------- Pied */

.pied {
  margin-top: 64px; padding-top: 18px; border-top: 1px solid var(--trait);
  font-family: var(--mono); font-size: 11px; color: var(--texte-bas);
  display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center;
}
.pied form { margin-left: auto; }
.pied button {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--texte-bas);
  background: none; border: 1px solid var(--trait); border-radius: 2px;
  padding: 5px 12px; cursor: pointer;
}
.pied button:hover { color: var(--texte); border-color: var(--texte-bas); }

.vide {
  padding: 22px; border: 1px dashed var(--trait); border-radius: 2px;
  color: var(--texte-bas); font-size: 14px;
}

/* ------------------------------------------------------------------ Entree */

.entree {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
}
.entree__boite { width: 100%; max-width: 340px; }
.entree__marque {
  font-family: var(--mono); font-size: 12px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--texte-bas); margin-bottom: 26px;
}
.entree__marque b { color: var(--ambre); font-weight: 600; }
.entree h1 {
  margin: 0 0 6px; font-family: var(--mono); font-size: 22px; font-weight: 500;
  color: #FFF;
}
.entree p { margin: 0 0 24px; color: var(--texte-bas); font-size: 14px; }

.entree input {
  width: 100%; padding: 14px 16px;
  background: var(--console-2); border: 1px solid var(--trait); border-radius: 2px;
  color: #FFF; font-family: var(--mono); font-size: 24px;
  letter-spacing: .5em; text-align: center;
  font-variant-numeric: tabular-nums;
}
.entree input::placeholder { color: #46525F; letter-spacing: .5em; }
.entree input:focus { border-color: var(--ambre); outline: none; }

.entree button {
  width: 100%; margin-top: 12px; padding: 12px;
  background: var(--ambre); color: #14181D; border: none; border-radius: 2px;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; cursor: pointer;
}
.entree button:hover { background: #EFB055; }

.entree__erreur {
  margin-top: 14px; padding: 9px 12px;
  border-left: 2px solid var(--brique); background: rgba(180, 85, 63, .1);
  color: #E29B87; font-size: 13px;
}

/* ----------------------------------------------------------------- Mobile */

@media (max-width: 640px) {
  /* Sur une seule ligne, la navigation se retrouve coincee entre la marque et
   * l'heure et se reduit a rien : le tableau devient un long defilement sans
   * moyen d'atteindre une section. Elle passe donc sur sa propre ligne. */
  .rail { height: auto; flex-wrap: wrap; padding: 8px 14px; gap: 6px 14px; }
  .rail__heure { margin-left: auto; }
  .rail__nav { order: 3; flex-basis: 100%; margin: 0 -14px; padding: 0 14px; }
  html { scroll-padding-top: 100px; }

  /* La bande porte trois enfants. En passant a deux colonnes, il faut dire
   * explicitement ou vont l'identite et le corps, sinon le corps retombe dans
   * la colonne du bord d'etat, large de quatre pixels, et le texte sort a un
   * mot par ligne. */
  .bande { grid-template-columns: 4px 1fr; }
  .bande__etat { grid-row: 1 / span 2; border-radius: 2px 0 0 2px; }
  .bande__id, .bande__corps { grid-column: 2; min-width: 0; }
  .bande__id {
    border-right: none;
    border-bottom: 1px dashed rgba(30, 34, 41, .28);
    display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline;
  }
  .bande__cible { max-width: 60vw; }
  .bande__decision { margin-top: 0; }
  .bande__mesure { margin-left: 0; width: 100%; }
  .tableau { font-size: 12.5px; }
  .tableau th, .tableau td { padding: 7px 8px; }
  .critere { grid-template-columns: 1fr; gap: 6px; }
  .pied form { margin-left: 0; }
}

/* ----------------------------------------------------------------- Motion */

@media (prefers-reduced-motion: no-preference) {
  .bande { animation: poser .26s cubic-bezier(.2, .7, .3, 1) both; }
  @keyframes poser {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: none; }
  }
}

/* ------------------------------------------------------- Graphe et sous-blocs */

.sous-titre {
  margin: 30px 0 12px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--texte);
}
.section > .sous-titre:first-of-type { margin-top: 26px; }

/* Le graphe est en HTML, pas en SVG : une seule serie, une seule teinte, et
 * surtout des etiquettes qui restent en pixels. La version SVG etiree
 * deformait « 11/08 » avec la largeur de la fenetre. */
.graphe {
  display: flex; align-items: flex-end; gap: 4px;
  height: 156px; padding: 12px 12px 0;
  background: var(--console-2); border: 1px solid var(--trait);
}

.colonne {
  flex: 1; min-width: 0; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  align-items: stretch; gap: 4px;
}

.colonne__barre {
  display: block; background: var(--ambre);
  border-radius: 2px 2px 0 0; min-height: 2px;
}
.colonne:hover .colonne__barre { background: #F2B860; }

.colonne__valeur {
  font-family: var(--mono); font-size: 11px; color: #FFF;
  text-align: center; font-variant-numeric: tabular-nums;
}

.colonne__jour {
  font-family: var(--mono); font-size: 10px; color: var(--texte-bas);
  text-align: center; letter-spacing: .02em;
  padding: 5px 0 8px; border-top: 1px solid var(--trait);
  overflow: hidden; white-space: nowrap;
}

.repli { margin-top: 10px; }
.repli summary {
  cursor: pointer; font-family: var(--mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--texte-bas);
  padding: 6px 0;
}
.repli summary:hover { color: var(--texte); }
.repli[open] summary { margin-bottom: 8px; }

.tableau--etroit { min-width: 260px; }

/* Barre de part, dans une cellule. Elle double le chiffre voisin au lieu de le
 * remplacer : la valeur exacte reste lisible, la barre donne l'ordre de
 * grandeur d'un coup d'oeil. */
.barre-cellule { width: 32%; min-width: 120px; }
.barre {
  display: block; height: 6px; border-radius: 1px;
  background: var(--ambre); min-width: 2px;
}

.note {
  margin: 22px 0 0; padding-top: 12px;
  border-top: 1px solid var(--trait);
  font-size: 13px; color: var(--texte-bas); max-width: 74ch;
}

@media (max-width: 640px) {
  .graphe { height: 108px; }
  .barre-cellule { min-width: 70px; }
}