/* Ecrans du journal et du registre.
Aucune couleur en dur ici : tout vient de tokens.css, et un test refuse toute valeur ecrite a la
main dans cette feuille. La composition suit la section 4 du PRD DA : grille de douze colonnes
volontairement cassee, filets de deux pixels entre toutes les zones, blocs qui se touchent,
aucune carte flottante et aucune marge blanche entre les blocs.
Le Caliper et la colonne sigma ne sont pas ici : ils attendent la serie de cours (decision 0003).
Ce qui les concerne dans le PRD DA, sections 5 et 6.10, n'a donc aucun equivalent CSS. */
/* --- barre de nav, section 6.1 ------------------------------------------------------------- */
/* La barre reste en haut au defilement : sur un registre de quatre mille lignes, revenir en haut
pour changer d'ecran est un aller-retour que rien ne justifie. */
.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;
min-height: var(--nav-height);
position: sticky;
text-transform: uppercase;
top: 0;
z-index: 3;
}
.nav .tab {
align-items: center;
border-right: var(--rule);
color: var(--ink);
display: flex;
gap: 0.6rem;
padding: 0.7rem 1rem;
text-decoration: none;
}
/* Le mark suit la couleur du texte : knockout automatique sur l'onglet actif, qui est un bloc
d'encre plein. Jamais de papier sur encre ailleurs (PRD DA §10.3). */
/* Le mark portait la classe `mark`, deja prise par les pastilles du compteur de discipline : il
heritait donc d'une bordure de deux pixels et d'un rembourrage horizontal, ce qui le tassait. Nom
propre, collision resolue.
**La taille se calcule, elle ne s'estime pas.** Le cadre dessine occupe 50 unites sur les 64 du
viewBox, soit 78,1 % de la boite : une boite de 18 px n'en donnait que 14 dessines, la ou la
planche de marques valide 20 px. Pour 20 px dessines il faut 20 / 0,781, soit 25,6 px, arrondis a
26. */
.brand-mark {
display: block;
height: 26px;
width: 26px;
}
/* L'onglet actif est un bloc plein, pas un soulignement : on lit ou l'on est sans chercher. */
.nav .tab[aria-current="page"] {
background: var(--ink);
color: var(--paper);
}
.nav .week {
color: var(--ink-soft);
margin-left: auto;
padding: 0.7rem 1rem;
}
/* --- grille des ecrans ---------------------------------------------------------------------- */
main {
border-left: var(--rule);
display: grid;
grid-template-columns: repeat(12, 1fr);
}
/* Les zones se touchent : le filet est leur seule separation.
**`min-width: 0` empeche la grille d'exploser.** Une piste `1fr` se dimensionne au moins sur le
contenu minimal de son bloc : un dessin de mille unites de large imposerait mille pixels a sa
piste, et la page entiere passerait hors cadre. Le defaut s'est vu sur la page publique le
2026-08-24, et il etait latent ici pour la meme raison. */
.zone {
border-bottom: var(--rule);
border-right: var(--rule);
grid-column: span 12;
min-width: 0;
padding: var(--pad);
}
/* Largeurs inegales, jamais six rectangles egaux (section 9). */
.span-9 { grid-column: span 9; }
.span-8 { grid-column: span 8; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-5 { grid-column: span 5; }
.span-4 { grid-column: span 4; }
.span-3 { grid-column: span 3; }
.title {
background: var(--paper-hi);
padding: 1.2rem var(--pad);
}
/* --- compteur de discipline, section 6.9 ---------------------------------------------------- */
/* Le bloc jaune ne porte jamais de texte blanc (section 8). */
.counter {
background: var(--yellow);
color: var(--ink);
}
.counter dl {
display: grid;
gap: 0.15rem 1rem;
grid-template-columns: auto auto;
justify-content: start;
margin: 0.6rem 0 0;
}
dt { color: var(--ink); }
dd { margin: 0; }
/* `0037` : le filtre retrecit a voix haute. **Montrees et masquees se lisent au meme rang**, meme
grille, meme corps, meme famille : un compte masque en plus petit serait un compte qu'on ne lit
pas, et l'interdit 7 redeviendrait une decoration.
**Aucune taille n'est declaree ici, et c'est le correctif du 2026-08-24.** Ces comptes portaient
13,5 px, soit moins qu'une note a 14 px et moins que le compte voisin a 16 px : ils se lisaient
comme une legende. Ils heritent desormais du corps, comme les autres comptes de la zone, et la
rupture d'echelle, elle, suit le filtre. */
.narrowing {
display: grid;
gap: 0.15rem 1rem;
grid-template-columns: auto auto;
justify-content: start;
margin: 0.6rem 0 0;
}
/* Sur le jaune, le texte reste l'encre pleine : l'encre douce n'y tiendrait pas les 4,5:1. */
.counter .note {
border-top: var(--rule);
color: var(--ink);
margin-top: 0.6rem;
padding-top: 0.4rem;
}
/* Les quatorze dernieres marques. Pleine pour honoree, cerclee pour manquee, hachuree pour
l'ordre devenu non mesurable : l'etat ne repose jamais sur la seule couleur. */
.marks { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0.6rem 0 0; padding: 0; }
.mark {
border: var(--rule);
font-family: var(--font-mono);
font-size: 11.5px;
letter-spacing: 0.16em;
padding: 0 0.35rem;
text-transform: uppercase;
}
.mark.HONOURED { background: var(--ink); color: var(--paper); }
.mark.MISSED { background: var(--paper); color: var(--ink); }
.mark.HELD_WITH_REASON { background: var(--hatch); color: var(--ink); }
/* --- listes des zones ----------------------------------------------------------------------- */
.zone ul { list-style: none; margin: 0; padding: 0; }
.zone li {
border-top: var(--dotted);
padding: 0.35rem 0;
}
.zone li:first-child { border-top: 0; }
.note, .warning { color: var(--ink-soft); font-size: 14px; margin: 0.4rem 0 0; }
/* --- etats, en blocs pleins ----------------------------------------------------------------- */
.state, .outcome, .overdue, .sealed, .superseded, .manual {
border: var(--rule);
display: inline-block;
padding: 0 0.35rem;
}
/* Le rouge n'est pas le negatif : il est l'irrevocable, l'ordre de sortie et l'ici et maintenant. */
.state, .outcome.MISSED, .overdue { background: var(--red); color: var(--ink); }
.outcome.HONOURED { background: var(--green); color: var(--paper); }
.outcome.HELD_WITH_REASON { background: var(--ink); color: var(--paper); }
.sealed { background: var(--ink); color: var(--paper); }
.superseded { background: var(--paper-hi); color: var(--ink); }
.manual { background: var(--hatch); color: var(--ink); border-style: dashed; }
/* --- fiche de these -------------------------------------------------------------------------- */
.body { font-size: 17px; margin: 0 0 0.8rem; max-width: 44rem; }
article {
border-top: var(--rule);
margin-top: 0.8rem;
padding-top: 0.6rem;
}
/* Une etape fermee reste visible, inerte, jamais masquee (section 6.6). */
article.locked { opacity: 0.35; }
/* La conservation motivee se lit, elle ne se resume pas (interdit 9). */
blockquote.held {
background: var(--paper-hi);
border-left: 6px solid var(--yellow);
margin: 0 0 0.8rem;
padding: 0.5rem 0.8rem;
}
blockquote.held p { font-size: 17px; margin: 0; }
blockquote.held footer {
color: var(--ink-soft);
font-family: var(--font-mono);
font-size: 11.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
}
/* --- formulaires ----------------------------------------------------------------------------- */
fieldset { border: var(--rule); margin: 0 0 0.8rem; padding: 0.6rem; }
label { display: block; margin: 0.5rem 0; }
input, textarea, select {
background: var(--paper-hi);
border: var(--rule);
color: var(--ink);
display: block;
padding: 0.35rem;
width: 100%;
}
button {
background: var(--ink);
border: var(--rule);
color: var(--paper);
cursor: pointer;
letter-spacing: 0.16em;
padding: 0.45rem 1rem;
text-transform: uppercase;
}
/* --- registre de releve, section 6.10 ------------------------------------------------------- */
/* Sur petit ecran le registre defile horizontalement plutot que de se replier en pile de
rectangles identiques (section 4).
**Le tableau defile dans sa propre boite**, et pas seulement avec la page : c'est ce qui permet
aux en-tetes de tenir en haut pendant qu'on parcourt les lignes. Un `overflow-x` seul ne suffit
pas, il rend la boite scrollable sur les deux axes sans lui donner de hauteur, et l'en-tete colle
alors au sommet d'une boite aussi haute que son contenu, donc ne colle a rien. */
/* **La hauteur est bornee, et c'est ce qui fait tenir l'en-tete.** `position: sticky` colle au
bord d'une boite de defilement : sans hauteur maximale, la boite est aussi haute que ses quatre
mille lignes, son bord haut part avec la page, et l'en-tete part avec lui. La borne est donc la
condition, pas une commodite d'affichage.
`100vh` moins la barre de navigation, moins la place du titre et des deux notes au dessus du
tableau. Ces `12rem` sont mesures sur la page reelle, pas devines : deux lignes de note a 14 px,
un titre, et les rembourrages de zone. */
.scroll {
max-height: calc(100vh - var(--nav-height) - 12rem);
min-height: 20rem;
overflow: auto;
}
/* **`separate` et non `collapse`, et ce n'est pas un gout.** En bordures fusionnees, les bords
appartiennent au tableau et non aux cellules : un `| ` colle perd son filet en defilant, et
plusieurs moteurs refusent purement et simplement de le coller. Les filets passent donc aux
cellules, ce qui rend le meme dessin et laisse l'en-tete tenir. */
table { border-collapse: separate; border-spacing: 0; width: 100%; }
/* Un en-tete qu'on ne voit plus laisse deviner ce que mesure une colonne, et on devine mal : les
deux dernieres portent un ecart en sigma et une derive de pente, que rien dans la valeur ne
nomme. Ils restent donc visibles, et lisibles : capitales espacees comme les autres libelles du
produit, et jamais coupes en deux lignes. */
th {
background: var(--paper);
border-bottom: var(--rule);
color: var(--ink-soft);
font-size: 11.5px;
letter-spacing: 0.08em;
position: sticky;
text-align: left;
text-transform: uppercase;
top: 0;
white-space: nowrap;
z-index: 1;
}
td, th { padding: 0.3rem 0.6rem 0.3rem 0; vertical-align: top; }
/* Le filet de ligne passe aux cellules : en bordures separees, un bord pose sur ` | ` n'est
jamais peint. */
tbody td { border-bottom: var(--dotted); }
/* Une ligne non mesuree n'a pas echoue : elle est hachuree, jamais rouge, jamais grisee. */
tbody tr.CHAIN_INCOMPLETE td:first-child { border-left: 6px solid var(--ink-dotted); padding-left: 0.4rem; }
/* --- pied de page ---------------------------------------------------------------------------- */
footer {
border-top: var(--rule);
display: flex;
flex-wrap: wrap;
font-family: var(--font-mono);
gap: 0 1.4rem;
grid-column: span 12;
padding: 0.7rem var(--pad);
}
footer span { font-size: 13.5px; }
footer .label { color: var(--ink-soft); display: block; }
/* La question a trancher d'une etape : ni alerte, ni absence. Un filet a gauche, du corps de
donnees, aucune couleur d'etat : elle rappelle, elle n'avertit pas (`0031`). */
.question {
border-left: 3px solid var(--ink);
font-size: 13.5px;
margin: 0 0 0.6rem;
padding: 0.2rem 0 0.2rem 0.7rem;
}
.question .label { display: block; }
/* Ce qui a bouge depuis une conclusion : un constat, au corps des donnees, sans couleur d'etat.
Ni rouge ni hachures : la phrase n'est pas invalidee, elle est datee. */
.moved { border-left: 3px solid var(--ink-soft); margin: 0.4rem 0 0.8rem; padding-left: 0.7rem; }
.moved dt {
color: var(--ink-soft);
font-size: 11.5px;
text-transform: uppercase;
}
.moved dd { font-family: var(--font-mono); font-size: 13.5px; margin: 0; }
/* --- fiche d'instruction, composition de `Candidate E` ---------------------------------------
Trois bandes qui se touchent sur la grille de douze : identite et statut, mesure, chaine. Les
filets sont la seule separation, il n'y a ni carte, ni ombre, ni marge blanche entre les blocs. */
/* Le nom de la societe se lit, il ne s'affiche pas en enseigne : la seule rupture d'echelle de
l'ecran est le sigma, et un ticker de trois lettres ne merite pas le corps display. */
.identity h1 {
font-size: clamp(28px, 3.4vw, 44px);
letter-spacing: -0.02em;
margin: 0.4rem 0 0;
}
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.9rem 0 0; }
.chip {
border: var(--rule);
font-family: var(--font-mono);
font-size: 13px;
padding: 0.15rem 0.7rem;
}
.chip.solid { background: var(--ink); color: var(--paper); font-weight: 700; }
/* Le bloc de statut est plein : il decrit un etat constate, et il se voit avant d'etre lu. */
.status { display: flex; flex-direction: column; gap: 0.8rem; justify-content: space-between; }
.status-name {
font-family: var(--font-display);
font-size: clamp(22px, 2.6vw, 34px);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 0.95;
}
.status-note { font-family: var(--font-mono); font-size: 13px; margin: 0; }
.status.chain_held { background: var(--green); color: var(--paper); }
.status.chain_broken { background: var(--red); color: var(--ink); }
.status.chain_incomplete, .status.chain_broken_and_incomplete {
background: var(--hatch);
border-top: 2px dashed var(--ink);
}
/* Le releve en grand : **la rupture d'echelle de l'ecran**, et la seule. */
/* Les deux reperes se nomment sous l'instrument. **Aucun des deux libelles ne prend la couleur de
son repere** : le rouge sur le papier tient 3,47:1 et ne se lit pas, et un nom qui dependrait de
sa couleur redirait l'information au lieu de la porter. */
.caliper-marks {
color: var(--ink-soft);
display: flex;
flex-wrap: wrap;
font-family: var(--font-mono);
font-size: 12.5px;
gap: 0 1.2rem;
margin: 0.6rem 0 0;
}
.caliper-figure { display: flex; flex-direction: column; justify-content: center; }
.caliper-figure .figure { font-size: clamp(44px, 6vw, 88px); }
/* **Ecart assume a la maquette, et son motif.** `Candidate E` peint ce chiffre en rouge quand le
cours est sous sa droite. 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 : le controle de contraste l'a refuse, et il a
raison de le refuser pour une valeur qui doit se lire, pas se signaler. Le signe du nombre et le
nom de la zone, juste dessous, portent deja l'information sans dependre d'une couleur, ce que la
section 4 exige par ailleurs. */
.figure-unit {
font-family: var(--font-display);
font-size: 24px;
font-weight: 700;
line-height: 1;
}
.figure-detail {
display: grid;
gap: 0.15rem 0.8rem;
grid-template-columns: auto auto;
justify-content: start;
margin: 0.9rem 0 0;
}
.figure-detail dt { color: var(--ink-soft); font-family: var(--font-mono); font-size: 12.5px; }
.figure-detail dd { font-family: var(--font-mono); font-size: 12.5px; margin: 0; }
.figure-note {
border-top: var(--rule);
font-size: 14px;
line-height: 1.45;
margin: 0.9rem 0 0;
padding-top: 0.6rem;
}
/* La bande de mesure n'a pas de rembourrage a gauche et a droite : le trace touche ses filets, et
le mors atteint les bornes de l'echelle qu'il mesure. */
.caliper-block { padding: 0; }
.caliper-trial, .caliper-provenance, .caliper-reading { padding: 0 var(--pad); }
.caliper-trial { border-top: var(--rule); padding-top: 0.7rem; }
.caliper-provenance { padding-bottom: 0.9rem; }
/* --- chaine des quatre verrous, PRD DA §6.5 --------------------------------------------------
**Quatre blocs bord a bord, et c'est le composant qui exprime la rupture.** Une liste plate se
lit comme quatre remarques d'egale importance ; quatre rectangles pleins qui se touchent disent
d'un coup d'oeil qu'un rouge ferme le dossier.
Trois niveaux par bloc, et l'ecart entre eux est ce qui se lit de loin : libelle en mono, valeur
en display, etat en mono. */
.locks-block { padding: 0; }
.locks-head {
align-items: baseline;
display: flex;
flex-wrap: wrap;
gap: 0.4rem 1.2rem;
padding: var(--pad) var(--pad) 0.9rem;
}
.locks-head h2 { margin: 0; }
/* Meme ecart que pour le chiffre du releve, meme motif : la maquette met cette phrase en rouge, et
le rouge sur papier ne tient pas 4,5:1. La phrase dit deja ce qu'elle a a dire. */
.locks-rule { color: var(--ink-soft); font-family: var(--font-mono); font-size: 13px; }
.locks {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
}
/* Les blocs se touchent : le filet de gauche est retire, celui du voisin le remplace. */
.lock {
border: var(--rule);
border-left-width: 0;
display: flex;
flex: 1 1 11rem;
flex-direction: column;
gap: 0.35rem;
min-width: 10rem;
padding: 1rem 1.1rem;
}
.lock-name {
font-family: var(--font-mono);
font-size: 11.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.lock-figure {
font-family: var(--font-display);
font-size: clamp(24px, 2.6vw, 34px);
font-weight: 800;
line-height: 1;
}
.lock-state { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; }
.lock-detail { font-family: var(--font-mono); font-size: 11.5px; line-height: 1.5; }
.lock.passed { background: var(--green); color: var(--paper); }
.lock.failed { background: var(--red); color: var(--ink); }
/* L'inconnu garde son traitement reserve : hachures et bordure discontinue, jamais un gris. */
.lock.unmeasured { background: var(--hatch); border-style: dashed; }
/* La question a trancher d'une etape : ni alerte, ni absence. Un filet a gauche, du corps de
donnees, aucune couleur d'etat : elle rappelle, elle n'avertit pas (`0031`). */
.question {
border-left: 3px solid var(--ink);
font-size: 13.5px;
margin: 0 0 0.6rem;
padding: 0.2rem 0 0.2rem 0.7rem;
}
.question .label { display: block; }
/* Ce qui a bouge depuis une conclusion : un constat, au corps des donnees, sans couleur d'etat.
Ni rouge ni hachures : la phrase n'est pas invalidee, elle est datee. */
.moved { border-left: 3px solid var(--ink-soft); margin: 0.4rem 0 0.8rem; padding-left: 0.7rem; }
.moved dt {
color: var(--ink-soft);
font-size: 11.5px;
text-transform: uppercase;
}
.moved dd { font-family: var(--font-mono); font-size: 13.5px; margin: 0; }
/* --- fiche d'instruction, composition de `Candidate E` ---------------------------------------
Trois bandes qui se touchent sur la grille de douze : identite et statut, mesure, chaine. Les
filets sont la seule separation, il n'y a ni carte, ni ombre, ni marge blanche entre les blocs. */
/* Le nom de la societe se lit, il ne s'affiche pas en enseigne : la seule rupture d'echelle de
l'ecran est le sigma, et un ticker de trois lettres ne merite pas le corps display. */
.identity h1 {
font-size: clamp(28px, 3.4vw, 44px);
letter-spacing: -0.02em;
margin: 0.4rem 0 0;
}
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.9rem 0 0; }
.chip {
border: var(--rule);
font-family: var(--font-mono);
font-size: 13px;
padding: 0.15rem 0.7rem;
}
.chip.solid { background: var(--ink); color: var(--paper); font-weight: 700; }
/* Le bloc de statut est plein : il decrit un etat constate, et il se voit avant d'etre lu. */
.status { display: flex; flex-direction: column; gap: 0.8rem; justify-content: space-between; }
.status-name {
font-family: var(--font-display);
font-size: clamp(22px, 2.6vw, 34px);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 0.95;
}
.status-note { font-family: var(--font-mono); font-size: 13px; margin: 0; }
.status.chain_held { background: var(--green); color: var(--paper); }
.status.chain_broken { background: var(--red); color: var(--ink); }
.status.chain_incomplete, .status.chain_broken_and_incomplete {
background: var(--hatch);
border-top: 2px dashed var(--ink);
}
/* Le releve en grand : **la rupture d'echelle de l'ecran**, et la seule. */
.caliper-figure { display: flex; flex-direction: column; justify-content: center; }
.caliper-figure .figure { font-size: clamp(44px, 6vw, 88px); }
/* **Ecart assume a la maquette, et son motif.** `Candidate E` peint ce chiffre en rouge quand le
cours est sous sa droite. 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 : le controle de contraste l'a refuse, et il a
raison de le refuser pour une valeur qui doit se lire, pas se signaler. Le signe du nombre et le
nom de la zone, juste dessous, portent deja l'information sans dependre d'une couleur, ce que la
section 4 exige par ailleurs. */
.figure-unit {
font-family: var(--font-display);
font-size: 24px;
font-weight: 700;
line-height: 1;
}
.figure-detail {
display: grid;
gap: 0.15rem 0.8rem;
grid-template-columns: auto auto;
justify-content: start;
margin: 0.9rem 0 0;
}
.figure-detail dt { color: var(--ink-soft); font-family: var(--font-mono); font-size: 12.5px; }
.figure-detail dd { font-family: var(--font-mono); font-size: 12.5px; margin: 0; }
.figure-note {
border-top: var(--rule);
font-size: 14px;
line-height: 1.45;
margin: 0.9rem 0 0;
padding-top: 0.6rem;
}
/* La bande de mesure n'a pas de rembourrage a gauche et a droite : le trace touche ses filets, et
le mors atteint les bornes de l'echelle qu'il mesure. */
.caliper-block { padding: 0; }
.caliper-trial, .caliper-provenance, .caliper-reading { padding: 0 var(--pad); }
.caliper-trial { border-top: var(--rule); padding-top: 0.7rem; }
.caliper-provenance { padding-bottom: 0.9rem; }
/* --- chaine des quatre verrous ---------------------------------------------------------------- */
.locks { display: grid; gap: 0; list-style: none; margin: 0.6rem 0 0; padding: 0; }
.lock {
border-top: var(--rule);
display: grid;
gap: 0 1rem;
grid-template-columns: minmax(12rem, 2fr) 8rem 3fr;
padding: 0.45rem 0;
}
.lock:last-child { border-bottom: var(--rule); }
.lock-name { font-size: 13.5px; }
.lock-state { font-family: var(--font-mono); font-size: 13.5px; }
/* Le rouge ne tient 4,5:1 avec aucun des deux papiers, ni en texte ni en fond avec texte papier :
il se porte donc avec l'encre, comme le fait deja le reste de l'ecran pour l'ordre de sortie et
l'echeance depassee. La croix reste la, et c'est elle qui porte l'etat sans la couleur. */
.lock.failed .lock-state {
background: var(--red);
color: var(--ink);
padding: 0 0.35rem;
}
.lock-detail { color: var(--ink-soft); font-family: var(--font-mono); font-size: 13.5px; }
@media (max-width: 780px) {
.lock { grid-template-columns: 1fr; }
}
/* --- instrument sigma ------------------------------------------------------------------------
Le releve est du HTML pose **au dessus** du SVG, en pourcentage de la largeur du viewBox : c'est
la seule facon de garder le chiffre selectionnable et lisible par une synthese vocale, et le §5
du PRD DA l'exige. Le conteneur porte donc `position: relative`, et rien d'autre ne le porte. */
.caliper-frame { position: relative; }
.caliper svg, .caliper-block svg { display: block; max-width: 100%; width: 100%; }
.caliper-floater {
position: absolute;
top: 0;
transform: translateX(-50%);
text-align: center;
white-space: nowrap;
}
.caliper-sigma {
color: var(--blue);
display: block;
font-family: var(--font-mono);
font-size: 24px;
font-weight: 700;
}
.caliper-price {
display: block;
font-family: var(--font-mono);
font-size: 13.5px;
}
/* Le releve accessible reste visible : une phrase annoncee au lecteur d'ecran et cachee a l'oeil
se desynchronise sans que personne le voie. */
.caliper-reading {
display: block;
font-family: var(--font-mono);
font-size: 13.5px;
margin: 0.6rem 0;
}
.caliper-trial { display: flex; flex-wrap: wrap; gap: 0 1rem; align-items: center; }
.caliper-trial label { color: var(--ink-soft); font-size: 11.5px; text-transform: uppercase; }
.caliper-trial input[type="range"] { flex: 1 1 16rem; min-width: 12rem; }
.caliper-trial input[type="number"] {
border: var(--rule);
border-radius: 0;
font-family: var(--font-mono);
padding: 0.3rem 0.4rem;
width: 7rem;
}
.caliper-trial input:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.caliper-provenance {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
gap: 0.3rem 1rem;
margin: 0.8rem 0 0;
}
.caliper-provenance dt { color: var(--ink-soft); font-size: 11.5px; text-transform: uppercase; }
.caliper-provenance dd { font-family: var(--font-mono); font-size: 13.5px; margin: 0; }
/* --- mobile, jusqu'a 380 px ------------------------------------------------------------------ */
@media (max-width: 780px) {
main { border-left: 0; }
.zone, .span-8, .span-7, .span-5, .span-4, .span-3 { border-right: 0; grid-column: span 12; }
}