/* La page publique de l'apex, **composee comme les trois autres ecrans** (PRD DA sections 3, 4, 8).
   Elle est la premiere chose qu'on voit du produit : la voir en document centre donnerait a lire
   une brochure la ou les ecrans donnent a lire un instrument.

   **Aucun chiffre du registre n'y paraît** : la page est servie sans authentification, et `0029`
   ne l'autorise pas. Aucun script, aucun formulaire, aucune requete vers un tiers.

   **Aucune couleur en dur** : les jetons viennent de `tokens.css`, comme dans l'application. */

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  margin: 0;
}

/* --- la barre, la meme grammaire que celle du produit ---------------------------------------- */

/* **Un visiteur doit pouvoir entrer sans chercher.** Le lien est en haut et il revient en bas ;
   c'est un lien, jamais un formulaire, la page ne collectant rien.

   La barre reprend celle des ecrans : onglets separes par un filet, mono en capitales, mark en
   ligne. L'onglet du nom est **un bloc plein**, comme l'onglet actif du produit, et le mark y
   passe en knockout parce qu'il herite de la couleur du texte. */
.nav {
  align-items: stretch;
  background: var(--paper);
  border-bottom: var(--rule);
  display: flex;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.nav .tab {
  align-items: center;
  border-right: var(--rule);
  color: var(--ink);
  display: flex;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  text-decoration: none;
}

.nav .current {
  background: var(--ink);
  color: var(--paper);
}

/* Le lien d'entree est pousse a droite : c'est la seule action de la page. */
.nav .tab:last-child { border-right: 0; margin-left: auto; }

/* Le cadre dessine occupe 78,1 % de la boite : pour vingt pixels dessines il en faut vingt-six. */
/* Le mark porte une taille en pixels, jamais une taille par defaut : un SVG sans dimension prend
   celle que le navigateur veut bien lui donner. */
.brand-mark {
  display: block;
  flex: 0 0 auto;
  height: 26px;
  width: 26px;
}

/* --- geometrie : douze colonnes volontairement cassees (section 4) --------------------------- */

main {
  border-left: var(--rule);
  border-top: var(--rule);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

/* Les blocs se touchent : le filet est leur seule separation, jamais une marge (section 4).
   **L'air vient donc du dedans**, pas d'un espace entre les blocs : la charte interdit la marge
   blanche entre zones, elle n'interdit pas de respirer a l'interieur.

   **`min-width: 0` n'est pas une precaution de style, c'est ce qui empeche la page d'exploser.**
   Une piste `1fr` se dimensionne au moins sur le contenu minimal de son bloc, et un dessin de mille
   unites de large impose donc mille pixels a sa piste : douze pistes ainsi tirees font une page
   plus large que l'ecran, et tout ce qui s'y trouve part hors cadre. Trouve le 2026-08-24, sur une
   page en ligne que sept cent soixante-quinze tests declaraient bonne. */
.zone {
  border-bottom: var(--rule);
  border-right: var(--rule);
  grid-column: span 12;
  min-width: 0;
  padding: 1.7rem 1.5rem;
}

/* La bande de respiration entre l'objet et la doctrine : elle ne porte qu'un libelle, et son vide
   est ce qui separe deux lectures. */
.pause {
  background: var(--paper-hi);
  padding: 2.4rem 1.5rem 0.9rem;
}

.span-8 { grid-column: span 8; }
.span-7 { grid-column: span 7; }
.span-5 { grid-column: span 5; }
.span-4 { grid-column: span 4; }

.title {
  background: var(--paper-hi);
  padding: 2.6rem 1.5rem;
}

/* L'objet vient avant la doctrine : son titre annonce un specimen, pas une mesure. */
.specimen-head { padding-bottom: 1rem; }
.specimen-head h2 { margin-bottom: 0.3rem; }

.access { padding: 2.2rem 1.5rem; }
.access h2 { margin-bottom: 0.4rem; }

/* --- typographie (section 3) ----------------------------------------------------------------- */

.label {
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  margin: 0 0 0.8rem;
  text-transform: uppercase;
}

/* **La rupture d'echelle de la page**, et la seule : le titre, quatre fois ses voisins. */
h1 {
  font-family: var(--font-display);
  font-size: clamp(44px, 7.4vw, 104px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 0.88;
  margin: 0 0 1.2rem;
}

/* La phrase qui dit ce que l'outil fait, avant tout ce qu'il refuse. Un cran au dessus du corps,
   loin sous le titre : c'est la deuxieme chose qu'on lit, jamais la premiere. */
.lead {
  font-size: clamp(17px, 1.9vw, 21px);
  line-height: 1.4;
  margin: 0;
  max-width: 34ch;
}

/* Le point colore final du titre est la signature de la charte (section 3), et il **est** la
   ponctuation : la phrase ne porte pas le sien, sans quoi le point s'afficherait deux fois.

   **Il n'est pas rouge, et c'est le meme arbitrage que le 2026-08-23** : le rouge sur le papier
   tient 3,47:1, sous les 4,5:1 que ce depot s'impose sur toute paire de fond et de texte. Plutot
   que d'exempter une ponctuation d'une regle que tout le produit respecte, la signature prend le
   seul accent qui tienne le rapport sur le papier. */
.signature { color: var(--blue); }

h2 {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 700;
  line-height: 1.05;
  margin: 0 0 0.7rem;
}

p { margin: 0 0 0.9rem; }
p:last-child { margin-bottom: 0; }
ul { margin: 0; padding-left: 1.1rem; }
li { margin-bottom: 0.45rem; }
li:last-child { margin-bottom: 0; }
em { font-family: var(--font-mono); font-size: 0.92em; font-style: normal; }
.note { color: var(--ink-soft); font-size: 14px; margin: 0.8rem 0 0; }

/* --- blocs de couleur : chacun dit une chose, et une seule (section 8) ------------------------ */

/* L'encre pleine porte la regle centrale du produit. Un bloc colore declare toujours sa couleur
   de texte, sans quoi le texte herite d'une couleur pensee pour un autre fond. */
.rule-block {
  background: var(--ink);
  color: var(--paper-hi);
}

/* Le libelle **redeclare son fond**, identique a celui du bloc : sans lui, un controle qui lit
   une couleur de texte seule la suppose posee sur le papier et refuse a juste titre un texte
   clair. Le fond n'est pas une decoration ici, c'est la moitie manquante d'une paire. */
.rule-block .label {
  background: var(--ink);
  color: var(--paper-hi);
}

.rule-line {
  font-family: var(--font-display);
  font-size: clamp(19px, 2.2vw, 26px);
  font-weight: 700;
  line-height: 1.1;
}

/* Le jaune porte ce que le produit **refuse** de faire. Jamais de texte blanc dessus. */
.refusal-block {
  background: var(--yellow);
  color: var(--ink);
}

/* Le bleu porte la mesure. */
.measure-block {
  background: var(--blue);
  color: var(--paper-hi);
}

.measure-block .label {
  background: var(--blue);
  color: var(--paper-hi);
}

/* --- la chaine, dessinee a vide (section 6.5) ------------------------------------------------- */

.chain-head {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: space-between;
  margin-bottom: 0.9rem;
}

.chain-rule {
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 13.5px;
}

.chain {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Les quatre blocs se touchent : le filet de gauche est retire, celui du voisin le remplace. */
/* Chaque niveau est **un bloc**, sur sa ligne : en ligne, la valeur et l'etat se collaient,
   « 7 / 9HELD ». Trois lignes, trois rangs, et l'ecart entre eux est ce qui se lit de loin. */
.link {
  border: var(--rule);
  border-left-width: 0;
  display: flex;
  flex: 1 1 12rem;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1rem;
}

.link span { display: block; }

.link:first-child { border-left-width: 2px; }

.link-name {
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
}

/* La valeur est en display, et elle est vide : c'est la forme de l'ecran, pas une mesure. */
.link-figure {
  background: var(--hatch);
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
  padding: 0 0.3rem;
}

.link-state {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
}

.link-detail {
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 11.5px;
}

/* **L'etat ne repose jamais sur la seule couleur** (section 8) : la croix dit le casse, les
   hachures disent l'inconnu, et le libelle est ecrit en toutes lettres a cote.

   Le maillon est un **bloc plein**, comme dans le produit, et non un texte colore : le rouge sur
   le papier tient 3,47:1 et ne se lit pas, la ou le meme rouge en fond porte l'encre a 5,4:1.
   C'est le meme arbitrage que le 2026-08-23, et il ne se rediscute pas par ecran. */
.link.held { background: var(--green); color: var(--paper); }
.link.broken { background: var(--red); color: var(--ink); }
.link.unmeasured { background: var(--hatch); border-style: dashed; }

.link.held .link-name,
.link.broken .link-name { color: inherit; }

.link.held .link-figure,
.link.broken .link-figure { background: none; }

/* --- l'instrument, dessine a vide (section 5) ------------------------------------------------- */

/* **Le dessin ne depasse jamais son bloc.** `width: 100%` seul ne suffit pas : pendant le calcul
   des pistes, un pourcentage est traite comme `auto` et c'est la largeur intrinseque du `viewBox`
   qui compte. `max-width` la borne pour de bon. */
.gauge {
  display: block;
  height: auto;
  max-width: 100%;
  width: 100%;
}

/* --- l'appel a l'action, et il mene au journal, pas a une inscription ------------------------- */

.cta {
  background: var(--blue);
  color: var(--paper-hi);
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.08em;
  padding: 0.7rem 1.1rem;
  text-decoration: none;
}

footer {
  border-bottom: var(--rule);
  border-left: var(--rule);
  border-right: var(--rule);
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 0.9rem var(--pad);
}

/* Sous la largeur ou douze colonnes n'ont plus de sens, les blocs s'empilent et gardent leurs
   filets : la grille se casse par des largeurs inegales, jamais par des trous. */
@media (max-width: 46rem) {
  .span-8, .span-7, .span-5, .span-4 { grid-column: span 12; }
}