/* ============================================================
   CV — « AICH-1 », une fiche technique de composant.

   THÈSE      Le CV est publié comme la datasheet qu'un ingénieur lit pour
              décider d'intégrer un composant. Refuse l'agencement du
              portfolio de développeur : fond marine, nom en dégradé,
              faux prompt de terminal, grille de cartes arrondies.
   MONDE      Papier gris froid, encre carbone, deux encres d'accent :
              bleu d'imprimeur (structure) et rouge process (action et
              élément courant). Filets 1px, angles vifs, chiffres
              tabulaires en monospace, capitales grotesques condensées,
              sections numérotées, cartouche persistant.
   RÉCIT      Le recruteur lit la référence, la description, les
              caractéristiques, puis commande le PDF. Le manager continue
              vers le brochage, les tableaux et l'historique de révision.
   1er ÉCRAN  Cartouche, puis deux colonnes : nom en display, description
              générale et caractéristiques à gauche ; photo encadrée en
              figure 1 et brochage en figure 2 à droite. Le bloc
              « Commande » ferme l'écran.
   FORME      Datasheet, direction fondée 6/7, tirage 7180ccfe. Grille
              orthogonale stricte du document ; la mise en scène
              diagonale proposée a été refusée (l'autorité de la fiche
              vient de l'alignement rigide).

   Voir DESIGN.md.
   ============================================================ */

:root {
  --paper: #e8e8e3;
  --sheet: #f4f4f0;
  --ink: #15161a;
  --ink-2: #4a4d55;
  --rule: #c3c4bf;
  --rule-soft: #d8d8d3;
  --blue: #0f3cc9;
  /* #cf2318 tombait à 4.36:1 sur le papier : insuffisant pour les petits
     libellés en gras (numéros de section, mention « Avis »). */
  --red: #c01f14;
  --grid: rgb(15 60 201 / 0.05);
  --grain: 0.035;

  --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "Azeret Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --col: min(74rem, calc(100vw - 3rem));
  --tb-h: 3.25rem;
}

:root[data-theme="dark"] {
  --paper: #0d0e10;
  --sheet: #141619;
  --ink: #eceae3;
  --ink-2: #9a9ba3;
  --rule: #2b2e34;
  --rule-soft: #212429;
  --blue: #7da2ff;
  --red: #ff6a4d;
  --grid: rgb(125 162 255 / 0.055);
  --grain: 0.05;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

/* Le grain du papier et la trame d'ingénieur, sous la feuille.
   Si l'un des deux devient lisible comme texture, il est trop fort. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: 2.5rem 2.5rem;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

body > * { position: relative; z-index: 1; }

a { color: inherit; }

::selection { background: var(--blue); color: var(--sheet); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--paper);
  padding: 0.6rem 1rem;
  font: 500 0.75rem/1 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

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

/* ============================================================
   Cartouche — la bande d'identification répétée sur chaque page
   ============================================================ */

/* Au-dessus du sommaire : le cartouche reste visible quand il est ouvert,
   sinon son bouton de fermeture passerait sous la nappe. */
.titleblock {
  position: sticky;
  top: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: stretch;
  min-height: var(--tb-h);
  width: var(--col);
  margin: 0 auto;
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
}

.tb-part {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.5rem 1rem 0.5rem 0;
  text-decoration: none;
  min-width: 0;
}

.tb-part-no {
  font: 700 0.9rem/1 var(--font-mono);
  letter-spacing: 0.02em;
  color: var(--blue);
  padding: 0.3rem 0.45rem;
  border: 1px solid var(--blue);
  flex: none;
}

.tb-part-name {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 88;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tb-specs {
  display: flex;
  margin: 0;
  border-left: 1px solid var(--rule);
}

.tb-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.1rem;
  padding: 0.4rem 0.9rem;
  border-right: 1px solid var(--rule);
}

.tb-cell dt {
  font: 500 0.5625rem/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.tb-cell dd {
  margin: 0;
  font: 500 0.8125rem/1 var(--font-mono);
  color: var(--ink);
}

.tb-of { color: var(--ink-2); }

.tb-controls {
  display: flex;
  align-items: stretch;
}

.tb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0 0.9rem;
  min-width: 2.75rem;
  background: none;
  border: 0;
  border-right: 1px solid var(--rule);
  color: var(--ink);
  font: 500 0.75rem/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.12s linear, color 0.12s linear;
}
.tb-btn:first-child { border-left: 1px solid var(--rule); }
.tb-btn:last-child { border-right: 0; }
.tb-btn:hover { background: var(--ink); color: var(--paper); }

.tb-theme-mark {
  width: 0.85rem;
  height: 0.85rem;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background: linear-gradient(90deg, currentColor 50%, transparent 50%);
}

.tb-toc { padding-right: 0.75rem; }

.tb-toc-mark {
  display: grid;
  gap: 3px;
  width: 1rem;
}
.tb-toc-mark i {
  display: block;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.18s linear;
}
.tb-toc[aria-expanded="true"] .tb-toc-mark i:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.tb-toc[aria-expanded="true"] .tb-toc-mark i:nth-child(2) { opacity: 0; }
.tb-toc[aria-expanded="true"] .tb-toc-mark i:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }

@media (max-width: 40rem) {
  .tb-part-name { display: none; }
  .tb-toc-label { display: none; }
  .tb-cell:first-child { display: none; }
}

/* ============================================================
   Sommaire — table des matières à points de conduite
   ============================================================ */

.contents {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--paper);
  overflow-y: auto;
  animation: sheet-in 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes sheet-in {
  from { opacity: 0; transform: translateY(-1.25rem); }
  to { opacity: 1; transform: none; }
}

.contents-inner {
  width: var(--col);
  margin: 0 auto;
  padding: calc(var(--tb-h) + 3rem) 0 4rem;
}

/* Même gabarit de colonnes que les lignes du sommaire, pour que
   « entrées » et « page » tombent au-dessus de leurs chiffres. */
.contents-head {
  display: grid;
  grid-template-columns: 2.5rem auto 1fr auto 3rem;
  gap: 0.75rem;
  margin: 0 0 0.75rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--ink);
  font: 500 0.625rem/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.ch-title { grid-column: 1 / 3; }
.ch-count { grid-column: 4; }
.ch-page { grid-column: 5; text-align: right; }

.toc {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}

.toc-row a {
  display: grid;
  grid-template-columns: 2.5rem auto 1fr auto 3rem;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule-soft);
  text-decoration: none;
  transition: color 0.12s linear;
}
.toc-row a:hover { color: var(--blue); }
.toc-row a:hover .toc-leader { border-bottom-color: currentColor; }

.toc-no {
  font: 500 0.75rem/1 var(--font-mono);
  color: var(--ink-2);
}

.toc-title {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 92;
  font-weight: 600;
  font-size: clamp(1.35rem, 3.4vw, 2.1rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.toc-leader {
  border-bottom: 1px dotted var(--rule);
  transform: translateY(-0.28em);
}

.toc-count,
.toc-page {
  font: 500 0.75rem/1 var(--font-mono);
  color: var(--ink-2);
}
.toc-page { text-align: right; }

.toc-row.is-current a { color: var(--red); }
.toc-row.is-current .toc-no,
.toc-row.is-current .toc-page { color: var(--red); }
.toc-row.is-current .toc-title::after {
  content: "◂";
  margin-left: 0.5rem;
  font-size: 0.6em;
  vertical-align: middle;
}

.contents-order { margin-top: 2.5rem; }

/* ============================================================
   Feuille
   ============================================================ */

.sheet {
  position: relative;
  width: var(--col);
  margin: 0 auto;
  padding: 2.5rem 0 4rem;
}

/* ---------- Substrat : relevés imprimés sous la feuille ----------
   Purement ornemental — pas de chiffre, pas d'axe, aucune donnée : ce sont
   les courbes que porte le papier, pas une affirmation sur quelqu'un. */

.substrate {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.sheet > *:not(.substrate) {
  position: relative;
  z-index: 1;
}

.sub-panel {
  position: absolute;
  width: clamp(11rem, 22vw, 17rem);
  aspect-ratio: 3 / 2;
  opacity: 0.5;
}
.sub-panel svg { width: 100%; height: 100%; overflow: visible; }
.sub-panel .grat { stroke: var(--blue); stroke-width: 0.4; opacity: 0.14; }
.sub-panel .trace {
  fill: none;
  stroke: var(--blue);
  stroke-width: 0.9;
  opacity: 0.2;
}
.sub-panel .trace-2 { stroke: var(--ink); opacity: 0.11; stroke-dasharray: 3 2.5; }

.sub-a { top: 6%; right: -3rem; }
.sub-b { top: 42%; left: -4rem; }
.sub-c { bottom: 8%; right: 4%; }

@media (max-width: 60rem) {
  /* Sur petit écran la feuille est étroite : les relevés passeraient sous
     le texte au lieu de rester en marge. */
  .sub-b, .sub-c { display: none; }
  .sub-a { right: -5rem; opacity: 0.35; }
}

/* ---------- Couverture ---------- */

.cover { padding-bottom: 0.5rem; }

.cover-part {
  margin: 0 0 0.9rem;
  font: 500 0.6875rem/1 var(--font-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.cover-name {
  margin: 0;
  font-family: var(--font-display);
  font-variation-settings: "wdth" 78;
  font-weight: 800;
  font-size: clamp(3.25rem, 13vw, 6rem);
  line-height: 0.86;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  text-wrap: balance;
}

.cover-label {
  margin: 0.9rem 0 0;
  font-family: var(--font-display);
  font-variation-settings: "wdth" 92;
  font-weight: 500;
  font-size: clamp(1rem, 2.6vw, 1.3rem);
  letter-spacing: 0.02em;
  color: var(--blue);
}

/* Le filet d'accent qui se trace : l'unique moment de mouvement. */
.cover-rule {
  height: 2px;
  margin-top: 1.75rem;
  background: var(--ink);
  transform-origin: left center;
  animation: rule-draw 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes rule-draw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* ---------- Grille à deux colonnes ---------- */

.columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 19rem);
  gap: 0 3.5rem;
  align-items: start;
  padding-top: 2.25rem;
}

.col-side {
  position: sticky;
  top: calc(var(--tb-h) + 2rem);
  display: grid;
  gap: 2rem;
}

.block-pinout { padding: 4.5rem 0 1.5rem; }
.block-pinout figcaption {
  width: min(100%, 40rem);
  margin: 1.1rem auto 0;
}

@media (max-width: 60rem) {
  .columns { grid-template-columns: 1fr; gap: 2.5rem; }
  .col-side { position: static; }
  /* Sans bride, la photo prend toute la largeur de la feuille et écrase
     la page une fois les colonnes empilées. */
  .figure-photo { max-width: 19rem; }
}

/* ---------- Têtes de section ---------- */

.sec-head {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  margin: 2.75rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--ink);
  font-family: var(--font-display);
  font-variation-settings: "wdth" 90;
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.sec-head:first-child { margin-top: 0; }

.sec-no {
  font: 700 0.75rem/1 var(--font-mono);
  color: var(--red);
  letter-spacing: 0;
}

.lede {
  max-width: 68ch;
  margin: 0 0 1.15rem;
  font-size: 1.0625rem;
  line-height: 1.62;
  color: var(--ink);
}

/* ---------- Caractéristiques (index des sections) ---------- */

.features {
  list-style: none;
  margin: 0;
  padding: 0;
}

.features a {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, auto) minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.9rem;
  padding: 0.72rem 0;
  border-bottom: 1px solid var(--rule-soft);
  text-decoration: none;
  transition: color 0.12s linear, transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.features a:hover {
  color: var(--blue);
  transform: translateX(0.4rem);
}

.feat-no {
  font: 500 0.6875rem/1 var(--font-mono);
  color: var(--ink-2);
}

.feat-title {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 92;
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.005em;
}

.feat-lead {
  font-size: 0.8125rem;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.feat-count {
  font: 500 0.6875rem/1 var(--font-mono);
  color: var(--ink-2);
  padding: 0.22rem 0.4rem;
  border: 1px solid var(--rule);
}

@media (max-width: 34rem) {
  .features a { grid-template-columns: 1.5rem minmax(0, 1fr) auto; }
  .feat-lead { display: none; }
}

/* ---------- Figures ---------- */

.figure { margin: 0; }

.figure figcaption {
  margin-top: 0.6rem;
  font: 400 0.6875rem/1.45 var(--font-mono);
  color: var(--ink-2);
}

.fig-no {
  color: var(--blue);
  font-weight: 700;
  margin-right: 0.4rem;
}

.photo-frame {
  border: 1px solid var(--ink);
  padding: 0.5rem;
  background: var(--sheet);
}

.photo-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(1) contrast(1.12);
}

:root[data-theme="dark"] .photo-frame img { filter: grayscale(1) contrast(1.05) brightness(0.92); }

/* ---------- Brochage ---------- */

/* Les rangées doivent être explicites : « grid-row: 1 / -1 » ne traverse
   pas les rangées implicites, et le boîtier ne couvrirait qu'une broche. */
.pinout-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: repeat(var(--pin-rows, 4), minmax(2.85rem, auto));
  width: min(100%, 40rem);
  margin: 1.75rem auto 0;
}

.pin {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.2rem 0;
  animation: pin-in 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--pin-i, 0) * 45ms + 260ms);
}

@keyframes pin-in {
  from { opacity: 0; transform: translateX(var(--pin-from, -0.5rem)); }
  to { opacity: 1; transform: none; }
}

.pin-l {
  grid-column: 1;
  justify-content: flex-end;
  text-align: right;
  padding-right: 0.7rem;
  border-right: 1px solid var(--ink);
  --pin-from: -0.5rem;
}

.pin-r {
  grid-column: 3;
  justify-content: flex-start;
  padding-left: 0.7rem;
  border-left: 1px solid var(--ink);
  --pin-from: 0.5rem;
}

.pin-l .pin-no { order: 2; }

.pin-no {
  flex: none;
  font: 500 0.625rem/1 var(--font-mono);
  color: var(--paper);
  background: var(--ink);
  padding: 0.2rem 0.3rem;
  min-width: 1.25rem;
  text-align: center;
}

.pin-name {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 86;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.15;
  min-width: 0;
}

.pin-nc { border-color: var(--rule-soft); }

/* Le corps du boîtier occupe la colonne centrale sur toute la hauteur. */
/* Le boîtier occupe la colonne centrale sur toute la hauteur de la grille. */
.pinout-body {
  grid-column: 2;
  grid-row: 1 / -1;
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(5rem, 14vw, 8rem);
  background: var(--ink);
  color: var(--paper);
}

.pinout-mark {
  font: 700 0.8125rem/1 var(--font-mono);
  letter-spacing: 0.22em;
  writing-mode: vertical-rl;
}

.pinout-notch {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1.6rem;
  height: 0.8rem;
  transform: translateX(-50%);
  background: var(--paper);
  border-radius: 0 0 999px 999px;
}

/* ---------- Figure 3 : chronologie ----------
   Une seule encre pour les barres ; l'identité vient du couloir étiqueté et
   de l'étiquette portée par chaque barre, jamais de la couleur seule. */

.block-timeline { padding: 3.5rem 0 1.5rem; }

.chart {
  margin-top: 1.75rem;
  border: 1px solid var(--rule);
}

.lane {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  align-items: center;
  gap: 0 1.25rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.lane:last-child { border-bottom: 0; }

.lane-name {
  margin: 0;
  padding-left: 1rem;
  font: 700 0.625rem/1.3 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* La graticule appartient à l'aire de tracé, pas au cartouche : posée sur
   « .track », ses montants tombent exactement sur les années. */
.track {
  display: grid;
  /* minmax(0,…) : sans plancher à zéro, les étiquettes en nowrap imposent
     leur largeur minimale aux colonnes et la feuille déborde. */
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-auto-rows: 1.9rem;
  gap: 0.3rem 0;
  background-image: linear-gradient(to right, var(--rule-soft) 0 1px, transparent 1px);
  background-size: calc(100% / var(--cols)) 100%;
}

.bar {
  grid-column: var(--s) / var(--e);
  display: flex;
  align-items: center;
  padding: 0 0.6rem;
  background: var(--blue);
  color: var(--sheet);
  min-width: 0;
}

.bar-label {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 86;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chart-axis {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 0 1.25rem;
  padding: 0.45rem 0;
  border-top: 1px solid var(--ink);
}
/* Cale la piste des années sous les barres, pas sous les étiquettes. */
.chart-axis::before { content: ""; }

.axis-track {
  display: grid;
  /* minmax(0,…) : sans plancher à zéro, les étiquettes en nowrap imposent
     leur largeur minimale aux colonnes et la feuille déborde. */
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
}

.tick {
  grid-column: var(--c);
  font: 500 0.625rem/1 var(--font-mono);
  color: var(--ink-2);
}

@media (max-width: 48rem) {
  .lane,
  .chart-axis { grid-template-columns: 1fr; gap: 0.5rem; }
  .chart-axis::before { display: none; }
  .lane-name { padding-left: 0.75rem; }
  .track,
  .chart-axis { margin: 0 0.75rem; }
}

/* ---------- Tableaux ---------- */

.block { padding-top: 0.5rem; }

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.table thead th {
  padding: 0.5rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--ink);
  font: 700 0.625rem/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.table td,
.table tbody th {
  padding: 0.7rem 0.75rem;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: baseline;
  text-align: left;
}

.table tbody th {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 92;
  font-weight: 600;
  font-size: 0.875rem;
  width: 32%;
  color: var(--ink);
}

.table td:first-child,
.table tbody th:first-child { padding-left: 0; }
.table td:last-child { padding-right: 0; }
.table thead th:first-child { padding-left: 0; }
.table thead th:last-child { padding-right: 0; }

.cell-mono {
  font: 400 0.8125rem/1.4 var(--font-mono);
  color: var(--ink-2);
  word-break: break-word;
}
.cell-mono a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }

.col-action { text-align: right; width: 1%; white-space: nowrap; }

/* Sur mobile le nom de fichier casse mal et n'aide pas : le format et
   l'action suffisent. Il reste lisible dans le colophon. */
@media (max-width: 34rem) {
  .table-order thead th:nth-child(2),
  .table-order tbody td:nth-child(2) { display: none; }
}

.order-link {
  display: inline-block;
  padding: 0.34rem 0.8rem;
  border: 1px solid var(--rule);
  font: 500 0.6875rem/1 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.12s linear, color 0.12s linear, border-color 0.12s linear;
}
.order-link:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.order-link.is-primary {
  background: var(--red);
  border-color: var(--red);
  color: var(--sheet);
  font-weight: 700;
}
.order-link.is-primary:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.table-order tr.is-primary td { border-bottom-color: var(--rule); }

/* ---------- Boutons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.85rem 1.1rem;
  text-decoration: none;
  border: 1px solid var(--ink);
  transition: background-color 0.14s linear, color 0.14s linear;
}

.btn-order {
  background: var(--red);
  border-color: var(--red);
  color: var(--sheet);
  width: 100%;
  max-width: 32rem;
}
.btn-order:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.btn-label {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 92;
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Pas d'opacité ici : à 11px sur le rouge, elle faisait tomber le
   contraste sous 4.5:1. */
.btn-ref { font: 400 0.6875rem/1 var(--font-mono); }

/* ============================================================
   Pages de section
   ============================================================ */

.page-head {
  padding-bottom: 1.25rem;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 2rem;
}

.page-kicker {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.9rem;
  font: 500 0.625rem/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.page-kicker-sep {
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.page-title {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin: 0;
  font-family: var(--font-display);
  font-variation-settings: "wdth" 80;
  font-weight: 800;
  font-size: clamp(2.5rem, 9vw, 5rem);
  line-height: 0.9;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  text-wrap: balance;
}

.page-no {
  flex: none;
  font: 700 clamp(1rem, 2.4vw, 1.5rem)/1 var(--font-mono);
  color: var(--red);
  letter-spacing: 0;
}

/* ---------- Entrées ---------- */

/* Le rail gauche porte la référence et la période, comme la colonne
   « Symbol / Conditions » d'un tableau de caractéristiques. */
.entry {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 0 2.25rem;
  padding: 1.9rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.entry:last-of-type { border-bottom: 0; }

.entry-rail {
  display: grid;
  gap: 0.85rem;
  align-content: start;
  padding-top: 0.35rem;
}

.rail-cell { display: grid; gap: 0.25rem; }

.rail-key {
  font: 500 0.5625rem/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.rail-val {
  justify-self: start;
  font: 500 0.8125rem/1 var(--font-mono);
  color: var(--ink);
  padding: 0.25rem 0.45rem;
  border: 1px solid var(--rule);
}

.entry-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.55rem 0.85rem;
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-variation-settings: "wdth" 94;
  font-weight: 700;
  font-size: clamp(1.25rem, 3.2vw, 1.6rem);
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.entry-no {
  font: 700 0.9375rem/1 var(--font-mono);
  color: var(--red);
  letter-spacing: 0;
}

.entry-org {
  font-weight: 500;
  font-variation-settings: "wdth" 94;
  color: var(--blue);
}
.entry-org::before {
  content: "/";
  margin-right: 0.6rem;
  color: var(--rule);
}

.notes {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 72ch;
}

.notes li {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 0.75rem;
  padding: 0.42rem 0;
}

.note-no {
  font: 400 0.6875rem/1.7 var(--font-mono);
  color: var(--ink-2);
}

.note-text { line-height: 1.6; }

@media (max-width: 48rem) {
  .entry { grid-template-columns: 1fr; gap: 1rem; }
  .entry-rail {
    grid-auto-flow: column;
    justify-content: start;
    align-items: center;
    gap: 1rem;
    padding-top: 0;
  }
  .rail-cell { grid-auto-flow: column; align-items: center; gap: 0.55rem; }
  .notes li { grid-template-columns: 3.25rem 1fr; gap: 0.6rem; }
}

/* ---------- Listes simples ---------- */

.plain-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 74ch;
}

.plain-list li {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 1.0625rem;
}

/* Deux colonnes seulement : sans bride, l'étiquette et la valeur
   s'éloignent jusqu'à ne plus se lire comme une même ligne. */
.table-spec,
.table-contact { max-width: 54rem; }
.table-spec tbody th,
.table-contact tbody th { width: 26%; }

/* ---------- Pagination ---------- */

.pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: 3.5rem;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.pager-link {
  display: grid;
  gap: 0.4rem;
  padding: 1.1rem 1.15rem;
  background: var(--paper);
  text-decoration: none;
  transition: background-color 0.12s linear, color 0.12s linear;
}
.pager-link:hover { background: var(--ink); color: var(--paper); }
.pager-link:only-child { grid-column: 1 / -1; }
.pager-next { text-align: right; }

.pager-dir {
  font: 500 0.625rem/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.pager-link:hover .pager-dir { color: inherit; }

.pager-title {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 92;
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}

@media (max-width: 34rem) {
  .pager { grid-template-columns: 1fr; }
  .pager-next { text-align: left; }
}

/* ============================================================
   Colophon — le pied de document
   ============================================================ */

.colophon {
  width: var(--col);
  margin: 0 auto;
  padding: 1.5rem 0 3rem;
  border-top: 1px solid var(--ink);
}

.colophon-notice {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: baseline;
  margin: 0 0 0.9rem;
  max-width: 72ch;
  font-size: 0.8125rem;
  color: var(--ink-2);
}

.colophon-key {
  flex: none;
  font: 700 0.5625rem/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  border: 1px solid currentColor;
  padding: 0.2rem 0.35rem;
}

.colophon-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin: 0;
  font: 400 0.6875rem/1.5 var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.colophon-meta a { color: var(--blue); }

/* ============================================================
   Impression et mouvement réduit
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@media print {
  body::before, body::after { display: none; }
  .titleblock, .contents, .pager, .tb-controls { display: none; }
  .sheet, .colophon { width: 100%; }
  .col-side { position: static; }
  a { text-decoration: none; }
}