/* =========================================================================
   CONTROL LINE REVIEW (americanmicrowavecorp.com) — design system "control
   line", prefix clr-. Vocabulaire du banc de mesure (bay, bench, ledge, panel,
   sweep, trace, readout, sidebar, baseplate, chip, array, chassis).
   Registre : instrument de laboratoire. Fond gris bleuté d'appareil, encre
   bleu nuit, accent laiton, filets nets, aucun coin arrondi, aucune ombre.
   Titres en grotesque condensée, texte en Charter, chiffres en monospace.
   Aucune requête externe, aucune police distante, aucun script.
   ========================================================================= */

:root {

  /* ---- 1. COULEUR : panneau d'instrument, lumière de laboratoire --------- */
  --haze:            #E9EBEF;  /* fond de page, gris bleuté d'appareil       */
  --gloss:           #FBFBFD;  /* papier vif : listes, registres             */
  --ash:             #D6DAE1;  /* sections alternées, encadrés, lits d'image */
  --anodised:        #141B24;  /* texte courant et titres, bleu nuit         */
  --graphite:        #566274;  /* légendes, chapeaux, signatures             */
  --cobalt:          #7A1F3D;  /* liens et filets porteurs, oxblood          */
  --cobalt-set:      #5A1129;  /* survol et état courant                     */
  --signal:          #B07C1C;  /* ORNEMENT : chiffres, barres, ::selection   */
  --signal-set:      #7E5810;  /* le seul laiton autorisé à porter du texte  */
  --hairrule:        #BCC3CD;  /* filets du registre et des tableaux         */
  --baseplate:       #131A22;  /* fond du pied et en-têtes de tableau        */
  --baseplate-ink:   #DCE2EA;
  --baseplate-jump:  #E2B45A;

  /* ---- 2. TYPOGRAPHIE (piles système, aucun fichier de police) ---------- */
  --slab-stack: "Avenir Next Condensed", "Roboto Condensed", "Liberation Sans Narrow", "Arial Narrow", "Helvetica Neue", sans-serif;
  --text-stack: Charter, "Bitstream Charter", "Iowan Old Style", Georgia, "Noto Serif", serif;
  --idx-stack:  "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Cascadia Mono", "DejaVu Sans Mono", monospace;

  --caps-track: 0.11em;
  --body-size: clamp(1.02rem, 0.98rem + 0.24vw, 1.13rem);
  --body-lead: 1.62;

  /* ---- 3. RYTHME ET JUSTIFICATION -------------------------------------- */
  --linewidth:       70ch;
  --linewidth-wide:  1340px;
  --sidebar-width:   15rem;
  --deck:    clamp(1.1rem, 4vw, 3.6rem);
  --conduit: clamp(0.9rem, 2.2vw, 2rem);
  --airgap:  clamp(2.8rem, 6.6vw, 6rem);

  /* ---- 4. DÉTAIL : filets, angles vifs, aucune ombre -------------------- */
  --chamfer: 0;
  --rule-weight: 1px solid var(--hairrule);
  --rule-strong: 1px solid var(--cobalt);
  --ease: 150ms ease;
}

@media (prefers-color-scheme: dark) {
  :root {
    --haze:           #10151B;
    --gloss:          #18202A;
    --ash:            #1F2833;
    --anodised:       #DFE5ED;
    --graphite:       #A0ACBC;
    --cobalt:         #E6879F;
    --cobalt-set:     #F2A9BC;
    --signal:         #D9A94E;
    --signal-set:     #E8C077;
    --hairrule:       #303C4A;
    --baseplate:      #0A0F14;
    --baseplate-ink:  #D9E1EA;
    --baseplate-jump: #E5BA68;
  }
}

/* =========================================================================
   BASE
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--haze);
  color: var(--anodised);
  font-family: var(--text-stack);
  font-size: var(--body-size);
  line-height: var(--body-lead);
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--slab-stack);
  font-weight: 600;
  letter-spacing: 0.002em;
  line-height: 1.12;
  margin: 0;
}
h1 { font-size: clamp(2rem, 1.25rem + 3.1vw, 3.5rem); }
h2 { font-size: clamp(1.4rem, 1.15rem + 1.1vw, 2rem); }
h3 { font-size: clamp(1.1rem, 1.02rem + 0.42vw, 1.38rem); }
h4 { font-size: 1.02rem; }

p, ul, ol { margin: 0 0 1.12em; }
a { color: var(--cobalt); text-decoration-thickness: 1px; text-underline-offset: 0.18em; transition: color var(--ease); }
a:hover { color: var(--cobalt-set); }
::selection { background: var(--signal); color: #F4F8F7; }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }
hr { border: 0; border-top: var(--rule-weight); margin: var(--airgap) 0; }
time, .clr-idx { font-family: var(--idx-stack); font-variant-numeric: tabular-nums; }

/* =========================================================================
   FRAME
   ========================================================================= */

/* Skip link. DO NOT REMOVE. */
.clr-bypass {
  position: absolute; left: -9999px; top: 0;
  background: var(--anodised); color: var(--haze);
  padding: 0.7rem 1.1rem; z-index: 50;
}
.clr-bypass:focus { left: 0.6rem; top: 0.6rem; }

/* The marsh: usable width of every block on the page. */
.clr-bay {
  width: 100%;
  max-width: var(--linewidth-wide);
  margin-inline: auto;
  padding-inline: var(--deck);
}

/* The levee: the bank you walk along, i.e. the site header. */
.clr-skiprail { border-bottom: var(--rule-weight); padding-block: clamp(0.8rem, 1.7vw, 1.35rem); }
.clr-skiprail__line {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 0.8rem 1.6rem;
}
.clr-marker {
  display: block; text-decoration: none; color: var(--anodised);
  font-family: var(--slab-stack); font-weight: 600;
  font-size: clamp(1.14rem, 1rem + 0.6vw, 1.5rem);
  text-transform: uppercase; letter-spacing: var(--caps-track); line-height: 1.05;
}
.clr-marker:hover { color: var(--cobalt); }
.clr-marker span {
  display: block; margin-top: 0.34rem;
  font-family: var(--text-stack); font-weight: 400; text-transform: none;
  letter-spacing: 0; font-size: 0.8rem; color: var(--graphite); max-width: 44ch;
}
.clr-grating ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; justify-content: flex-end;
}
.clr-grating a {
  color: var(--anodised); text-decoration: none;
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: var(--caps-track);
  padding-bottom: 0.2rem; border-bottom: 2px solid transparent;
}
.clr-grating a:hover, .clr-grating [aria-current="page"] {
  color: var(--cobalt); border-bottom-color: var(--signal);
}

/* Crossing: the breadcrumb. */
.clr-handoff { font-size: 0.76rem; color: var(--graphite); padding-block: 1.05rem; }
.clr-handoff ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.55rem;
}
.clr-handoff li + li::before { content: ">"; margin-right: 0.55rem; color: var(--signal-set); }

/* =========================================================================
   DAYBREAK: the home cover. Flat fog ground, one hairline, no pattern,
   no photo. The subject is stated by the numbers band underneath.
   ========================================================================= */

/* The cover is a BAND, not a screen: the section tiles have to be visible
   without scrolling, and that rule outranks the hero. On wide screens the
   wordmark and the numbers share one row. */
.clr-warmup {
  background: var(--haze); border-bottom: var(--rule-weight);
  padding-block: clamp(1.2rem, 2.6vw, 1.9rem) clamp(0.9rem, 2vw, 1.4rem);
}
.clr-warmup__line { display: grid; gap: clamp(1.1rem, 2.8vw, 2.4rem); }
.clr-warmup__strip {
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: var(--caps-track);
  color: var(--signal-set); margin: 0 0 0.75rem;
}
.clr-warmup h1 {
  font-size: clamp(2.2rem, 1.4rem + 3.2vw, 3.7rem);
  text-transform: uppercase; letter-spacing: 0.045em; line-height: 1.02;
  max-width: 18ch;
}
.clr-warmup__opener {
  margin: 0.85rem 0 0; max-width: 52ch;
  font-size: clamp(1.02rem, 0.98rem + 0.35vw, 1.14rem); color: var(--graphite);
}

/* Count: one column per published figure, monospace, on a blaze rule. */
.clr-readout__array {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
}
.clr-readout__column { border-top: 3px solid var(--signal); padding-top: 0.6rem; }
.clr-readout__idx {
  display: block; font-family: var(--idx-stack);
  font-size: clamp(2.2rem, 1.5rem + 2.4vw, 3.2rem);
  line-height: 1; letter-spacing: -0.02em; color: var(--anodised);
  font-variant-numeric: tabular-nums;
}
.clr-readout__tagline {
  display: block; margin-top: 0.45rem;
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: var(--caps-track);
  color: var(--anodised);
}
.clr-readout__record { display: block; margin-top: 0.25rem; font-size: 0.8rem; color: var(--graphite); }
.clr-readout__sole {
  margin: clamp(0.9rem, 2vw, 1.4rem) 0 0; padding-top: 0.7rem;
  border-top: var(--rule-weight);
  font-size: 0.8rem; color: var(--graphite); max-width: 118ch;
}

@media (min-width: 1000px) {
  .clr-warmup__line { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: end; }
}

/* =========================================================================
   FLAT: a numbered section. A flat is shallow water you can walk.
   ========================================================================= */

.clr-bench { margin-top: clamp(2rem, 4.4vw, 3.4rem); }
.clr-bench--lead { margin-top: clamp(1.1rem, 2.2vw, 1.7rem); }
.clr-bench--recessed {
  background: var(--ash);
  padding-block: clamp(2rem, 4.4vw, 3.4rem);
  margin-block: clamp(2.6rem, 5.4vw, 4.4rem) 0;
}
.clr-bench__ledge {
  border-top: var(--rule-weight); padding-top: 0.85rem; margin-bottom: 1.15rem;
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 0.5rem 1.6rem;
}
.clr-bench__headline { display: flex; align-items: baseline; gap: 0.85rem; max-width: 46ch; }
.clr-bench__readout {
  font-family: var(--idx-stack); font-size: 0.86rem; color: var(--signal-set);
  letter-spacing: 0.06em; white-space: nowrap;
}
.clr-bench__standfirst { font-size: 0.82rem; color: var(--graphite); max-width: 46ch; margin: 0; }

/* Band: the small-caps overline, like the ring on a bird's leg. */
.clr-strip {
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: var(--caps-track);
  color: var(--signal-set); margin: 0 0 0.7rem;
}

/* =========================================================================
   SPREAD: an even grid of equal-height tiles. No slope, no variable span.
   ========================================================================= */

.clr-array {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: calc(var(--conduit) * 1.35) var(--conduit);
  grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr));
}
.clr-pickup { margin: 0; position: relative; display: flex; flex-direction: column; }
.clr-pickup__chassis { overflow: hidden; background: var(--ash); border: var(--rule-weight); border-radius: var(--chamfer); aspect-ratio: 3 / 2; }
.clr-pickup__shot { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms ease; }
.clr-pickup__slot { padding-top: 0.75rem; margin-top: 0.75rem; border-top: var(--rule-weight); flex: 1; }
.clr-pickup__headline { margin: 0; font-size: clamp(1.06rem, 1rem + 0.4vw, 1.26rem); }
.clr-pickup__jump { color: var(--anodised); text-decoration: none; transition: color var(--ease); }
.clr-pickup__jump:hover { color: var(--cobalt); }
.clr-pickup__jump::after { content: ""; position: absolute; inset: 0; }
.clr-pickup:hover .clr-pickup__shot { transform: scale(1.02); }
.clr-pickup__sidenote { margin: 0.45rem 0 0; color: var(--graphite); font-size: 0.86rem; max-width: 46ch; }
.clr-pickup__trace {
  margin: 0.6rem 0 0; font-family: var(--idx-stack); font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--graphite);
}

/* =========================================================================
   TIDE: the dated register. Dense, ruled, no thumbnail. Date on the left
   in monospace, title on the same line, one sentence underneath.
   ========================================================================= */

.clr-sweep { list-style: none; margin: 0; padding: 0; border-top: var(--rule-weight); }
.clr-sweep__line {
  display: grid; grid-template-columns: 10.5rem 1fr;
  gap: 0.2rem 1.6rem; align-items: baseline;
  padding-block: 0.95rem;
  border-bottom: var(--rule-weight);
}
.clr-sweep__line:hover { background: var(--gloss); }
.clr-datestamp {
  font-family: var(--idx-stack); font-size: 0.78rem; color: var(--graphite);
  text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap;
}
.clr-sweep__headline { margin: 0; font-size: clamp(1.02rem, 0.98rem + 0.34vw, 1.22rem); }
.clr-sweep__headline a { color: var(--anodised); text-decoration: none; }
.clr-sweep__headline a:hover { color: var(--cobalt); text-decoration: underline; }
.clr-sweep__standfirst { grid-column: 2; margin: 0.3rem 0 0; color: var(--graphite); font-size: 0.88rem; max-width: 78ch; }
.clr-sweep__chip { grid-column: 1; margin: 0.3rem 0 0; font-size: 0.72rem; text-transform: uppercase; letter-spacing: var(--caps-track); color: var(--signal-set); }

/* =========================================================================
   REACH: sticky rail on the LEFT, single reading column on its right.
   ========================================================================= */

.clr-span { display: block; }
.clr-sidebar { margin-bottom: 2rem; }
.clr-sidebar__headline {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: var(--caps-track);
  color: var(--graphite); margin: 0 0 0.6rem; border-top: 3px solid var(--signal); padding-top: 0.6rem;
}
.clr-sidebar ul { list-style: none; margin: 0 0 1.4rem; padding: 0; }
.clr-sidebar li { border-bottom: var(--rule-weight); }
.clr-sidebar a {
  display: block; padding-block: 0.5rem; font-size: 0.87rem;
  color: var(--anodised); text-decoration: none;
}
.clr-sidebar a:hover { color: var(--cobalt); }
.clr-sidebar [aria-current="page"] { color: var(--signal-set); }

@media (min-width: 1100px) {
  .clr-span {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    gap: calc(var(--conduit) * 2);
    align-items: start;
  }
  .clr-sidebar { position: sticky; top: 1.6rem; margin-bottom: 0; margin-top: clamp(1.6rem, 3.4vw, 2.8rem); }
}

/* =========================================================================
   SLIP, PLATE AND CURRENT: the reading page.
   ========================================================================= */

.clr-stub { padding-block: clamp(1.1rem, 2.6vw, 2rem) clamp(0.9rem, 2vw, 1.6rem); }
.clr-stub h1 { max-width: 24ch; }
.clr-stub__standfirst {
  margin: 1rem 0 0; max-width: 60ch;
  font-size: clamp(1.06rem, 1rem + 0.5vw, 1.24rem); color: var(--graphite);
}
.clr-trace {
  list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem;
  margin: 1.4rem 0 0; padding: 0;
  font-family: var(--idx-stack); font-size: 0.73rem;
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--graphite);
}
.clr-trace a { color: var(--graphite); }

.clr-panel { margin: 0; }
.clr-panel__shot { width: 100%; aspect-ratio: 21 / 9; max-height: 22rem; object-fit: cover; background: var(--ash); }
.clr-panel__legend {
  max-width: var(--linewidth-wide); margin-inline: auto;
  padding: 0.7rem var(--deck) 0;
  font-size: 0.8rem; color: var(--graphite);
}

.clr-live { max-width: var(--linewidth); margin-top: clamp(1.6rem, 3.4vw, 2.8rem); }
.clr-live h2 { margin-top: 2.4rem; }
.clr-live h3 { margin-top: 1.9rem; }
.clr-live h2:first-child, .clr-live h3:first-child { margin-top: 0; }
.clr-live ul, .clr-live ol { padding-left: 1.15rem; }
.clr-live li { margin-bottom: 0.44em; }
.clr-live strong { color: var(--anodised); }
.clr-live > h2 { border-top: var(--rule-weight); padding-top: 1.2rem; }

/* Pull quote. */
.clr-cue {
  margin: 2.4rem 0; padding-left: 1.3rem; border-left: 3px solid var(--signal);
  font-family: var(--slab-stack); font-size: clamp(1.16rem, 1.05rem + 0.7vw, 1.5rem);
  line-height: 1.34; color: var(--anodised);
}

/* Note box. */
.clr-case { background: var(--gloss); padding: clamp(1.1rem, 2.8vw, 1.8rem); margin: 2.2rem 0; border: var(--rule-weight); }
.clr-case > :last-child { margin-bottom: 0; }

/* Checklist: the game strap, where the birds line up. */
.clr-clamp {
  background: var(--gloss); border: var(--rule-weight); border-left: 3px solid var(--cobalt);
  padding: clamp(1.1rem, 2.6vw, 1.7rem); margin: 2.2rem 0;
}
.clr-clamp h3 { margin-bottom: 0.7rem; }
.clr-clamp ul { list-style: none; margin: 0; padding: 0; }
.clr-clamp li { position: relative; padding-left: 1.5rem; margin-bottom: 0.55em; }
.clr-clamp li::before {
  content: ""; position: absolute; left: 0; top: 0.72em;
  width: 0.85rem; height: 0; border-top: 2px solid var(--cobalt);
}

/* Common mistakes: the shallows, where you run aground. */
.clr-shelf {
  background: var(--ash); border-left: 3px solid var(--signal);
  padding: clamp(1.1rem, 2.6vw, 1.7rem); margin: 2.2rem 0;
}
.clr-shelf h3 {
  font-size: 0.86rem; text-transform: uppercase; letter-spacing: var(--caps-track);
  color: var(--signal-set); margin-bottom: 0.8rem;
}
.clr-shelf ul { margin-bottom: 0; padding-left: 1.15rem; }
.clr-shelf li { margin-bottom: 0.55em; }

/* Table. */
.clr-tally { margin: 2.4rem 0; overflow-x: auto; border: var(--rule-weight); }
.clr-tally table { border-collapse: collapse; width: 100%; min-width: 36rem; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.clr-tally caption {
  text-align: left; padding: 0.85rem 1rem; background: var(--gloss);
  font-size: 0.76rem; text-transform: uppercase; letter-spacing: var(--caps-track);
  color: var(--graphite); border-bottom: var(--rule-weight);
}
.clr-tally th, .clr-tally td { text-align: left; padding: 0.66rem 1rem; border-bottom: var(--rule-weight); vertical-align: top; }
.clr-tally tr:last-child td { border-bottom: 0; }
.clr-tally th {
  background: var(--baseplate); color: var(--baseplate-ink);
  font-family: var(--slab-stack); font-weight: 600;
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.07em;
}
.clr-tally .clr-method { display: block; margin-top: 0.35rem; color: var(--graphite); font-style: italic; }
.clr-tally .clr-method::before {
  content: "Practice "; font-style: normal; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: var(--caps-track); color: var(--signal-set);
}

/* Read next. */
.clr-backlink { border-top: var(--rule-weight); margin-top: var(--airgap); padding-top: 1.2rem; }
.clr-backlink h2 { font-size: clamp(1.16rem, 1rem + 0.7vw, 1.5rem); border-top: 0; padding-top: 0; }
.clr-backlink ul { list-style: none; margin: 0.7rem 0 0; padding: 0; }
.clr-backlink li { margin-bottom: 0.62rem; }

/* Separator: the wake, an offset single rule. */
.clr-trail { border: 0; border-top: var(--rule-weight); width: 42%; margin: var(--airgap) 0 var(--airgap) 0; }

/* =========================================================================
   LANDING: the launch, i.e. the footer.
   ========================================================================= */

.clr-baseplate {
  background: var(--baseplate); color: var(--baseplate-ink);
  margin-top: var(--airgap); padding-block: clamp(2.4rem, 5vw, 4rem);
}
.clr-baseplate__columns {
  display: grid; gap: var(--conduit);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.clr-baseplate h2 { font-size: 0.86rem; text-transform: uppercase; letter-spacing: var(--caps-track); margin-bottom: 0.9rem; color: var(--baseplate-ink); }
.clr-baseplate ul { list-style: none; margin: 0; padding: 0; }
.clr-baseplate li { margin-bottom: 0.5rem; }
.clr-baseplate a { color: var(--baseplate-jump); text-decoration: none; border-bottom: 1px solid transparent; font-size: 0.9rem; }
.clr-baseplate a:hover { border-bottom-color: var(--baseplate-jump); }
.clr-baseplate p { color: var(--baseplate-ink); font-size: 0.88rem; max-width: 54ch; }
.clr-baseplate__floor {
  margin-top: clamp(1.8rem, 3.4vw, 2.6rem); padding-top: 1.1rem;
  border-top: 1px solid rgba(220, 231, 229, 0.22);
  font-family: var(--idx-stack); font-size: 0.74rem;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--baseplate-ink);
}

/* =========================================================================
   RESPONSIVE: the grid folds, nothing overflows sideways.
   ========================================================================= */

@media (max-width: 900px) {
  .clr-skiprail__line { align-items: flex-start; flex-direction: column; }
  .clr-grating ul { justify-content: flex-start; }
}
@media (max-width: 640px) {
  :root { --airgap: clamp(2.2rem, 9vw, 3.4rem); }
  .clr-array { grid-template-columns: 1fr; }
  .clr-sweep__line { grid-template-columns: 1fr; gap: 0.25rem; }
  .clr-sweep__standfirst, .clr-sweep__chip { grid-column: 1; }
  .clr-readout__column { border-top-width: 2px; }
  .clr-warmup h1 { letter-spacing: 0.03em; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .clr-pickup:hover .clr-pickup__shot { transform: none; }
}

/* =========================================================================
   PRINT
   ========================================================================= */

@media print {
  .clr-skiprail, .clr-baseplate, .clr-grating, .clr-sidebar, .clr-backlink, .clr-bypass { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .clr-live, .clr-bay { max-width: none; padding: 0; }
  .clr-tally { overflow: visible; }
  .clr-clamp, .clr-shelf, .clr-case { border: 1px solid #999; background: none; }
}

/* =========================================================================
   AJOUTS DU RHABILLAGE 05/09/2026
   1. Le bandeau de non-affiliation, permanent, au-dessus de l'en-tête.
   2. Le menu REPLIÉ sur mobile : case à cocher + étiquette, aucun script.
   3. Le héros illustré de la couverture d'accueil, exigé par le brief.
   ========================================================================= */

/* 1. Bandeau de non-affiliation ----------------------------------------- */
.clr-notice {
  background: var(--baseplate);
  color: var(--baseplate-ink);
  border-bottom: 3px solid var(--signal);
}
.clr-notice p {
  margin: 0;
  padding-block: 0.62rem;
  font-size: 0.83rem;
  line-height: 1.45;
}
.clr-notice strong { font-family: var(--slab-stack); text-transform: uppercase; letter-spacing: var(--caps-track); }
.clr-notice a { color: var(--baseplate-jump); }
.clr-notice a:hover { color: #fff; }

/* 2. Menu replié sur mobile --------------------------------------------- */
.clr-grating__box { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.clr-grating__btn {
  display: inline-block;
  border: var(--rule-strong);
  padding: 0.42rem 0.95rem;
  font-family: var(--slab-stack);
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: var(--caps-track);
  color: var(--cobalt); cursor: pointer; user-select: none;
}
.clr-grating__box:focus-visible + .clr-grating__btn { outline: 2px solid var(--signal); outline-offset: 2px; }
.clr-grating__btn::after { content: " +"; font-family: var(--idx-stack); }
.clr-grating__box:checked + .clr-grating__btn::after { content: " \2212"; }
.clr-grating > ul { display: none; }
.clr-grating__box:checked ~ ul { display: block; }
.clr-grating > ul > li { border-top: var(--rule-weight); }
.clr-grating > ul > li a { display: block; padding-block: 0.6rem; }

@media (min-width: 62rem) {
  .clr-grating__btn { display: none; }
  .clr-grating > ul { display: flex; }
  .clr-grating > ul > li { border-top: 0; }
  .clr-grating > ul > li a { display: inline-block; padding-block: 0; }
}

/* 3. Héros de la couverture --------------------------------------------- */
.clr-warmup__panel { margin: 0; grid-column: 1 / -1; }
.clr-warmup__shot {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border: var(--rule-weight); background: var(--ash);
}
.clr-warmup__panel .clr-panel__legend { margin-top: 0.5rem; }

@media (min-width: 1000px) {
  /* Couverture : le texte à gauche, le héros à droite, la bande de chiffres
     dessous et pleine largeur. La première rangée de rubriques doit rester
     visible sur 1456x800, donc le héros est bridé en hauteur. */
  .clr-warmup__line { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; }
  .clr-warmup__panel { grid-column: 2; grid-row: 1 / span 2; }
  .clr-warmup__prose { grid-column: 1; }
  .clr-warmup__line > .clr-readout { grid-column: 1; }
  .clr-warmup__shot { max-height: 21rem; }
}

/* Les vignettes de carte : au moins un quart de la largeur de ligne, jamais
   une colonne comprimée (contrôle de terrain du 03/09/2026). Mesuré le
   06/09/2026 : à 17rem la grille tombait à quatre colonnes de 280 px, soit
   23,5 % du conteneur et 19 % de la fenêtre. À 21rem elle tient trois colonnes
   d'environ 380 px, soit 32 % du conteneur et 26 % de la fenêtre. */
.clr-array { grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); }
.clr-pickup__chassis { aspect-ratio: 3 / 2; overflow: hidden; background: var(--ash); border: var(--rule-weight); }
.clr-pickup__shot { width: 100%; height: 100%; object-fit: cover; }

/* Le tableau du parameter index déborde horizontalement dans SON conteneur. */
.clr-readout { overflow-x: auto; }

/* Glossaire : liste de définitions dense. */
dl.clr-case { margin: 1.6rem 0; }
dl.clr-case dt {
  font-family: var(--slab-stack); font-weight: 600;
  font-size: 1.06rem; margin-top: 1.3rem;
  padding-top: 0.6rem; border-top: var(--rule-weight);
}
dl.clr-case dd { margin: 0.35rem 0 0; }
dl.clr-case dd em { color: var(--signal-set); font-style: italic; }

/* Correction du 06/09/2026 après capture : la bande de la couverture ne porte
   pas des chiffres d'un caractère comme chez le donneur mais des valeurs avec
   leur unité (« 1.22 : 1 », « 10 to 90 % »). À 3,2rem elles cassaient sur deux
   lignes et la colonne devenait illisible. Taille réduite et coupure interdite. */
.clr-readout__idx {
  font-size: clamp(1.35rem, 0.95rem + 1.15vw, 1.95rem);
  letter-spacing: 0;
  white-space: nowrap;
}
.clr-readout__array { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 1.4rem; }

/* La bande tient en 2 x 2 dans la colonne de gauche de la couverture : quatre
   colonnes de valeurs longues ne rentrent pas dans 590 px et la quatrième
   retombait seule sur une deuxième rangée (capture du 06/09/2026). */
.clr-readout__array { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2rem; }
@media (max-width: 30rem) { .clr-readout__array { grid-template-columns: 1fr; } }