/* ============================================================
   Opération Prométhée — supplemental styles for the note body.
   Builds on styles.css (design tokens, fonts, header) reused from
   the Europe 2031 design system.
   ============================================================ */

/* ============================================================
   1950s GOVERNMENT-AGENCY REPORT TYPE SYSTEM
   Body: Courier Prime (typewriter, ragged-right, like a typed
   technical report / declassified memo).
   Headings & letterhead: Oswald (condensed gothic, set in caps),
   the mid-century "official cover / stamp" voice.
   ============================================================ */
/* Light scheme only (dark mode removed). */
html { color-scheme: light; }

:root {
  --font-serif: "Courier Prime", "Courier New", ui-monospace, monospace;
  --font-num: "Courier Prime", "Courier New", monospace;
  --font-mono: "Courier Prime", "Courier New", ui-monospace, monospace;
  --font-mono-cap: "Courier Prime", "Courier New", monospace;
  --font-mono-ch: "Courier Prime", "Courier New", monospace;
  --font-display: "Oswald", "Arial Narrow", "Helvetica Neue", sans-serif;
  --ember: #C0451C;
  --ember-soft: #D98A6E;
}

/* Letterhead / cover voice — condensed gothic, all caps */
.wordmark,
.footer-wordmark,
.hero-mark,
.part-head h2,
.note-toc-title,
.part-kicker {
  font-family: var(--font-display) !important;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-weight: 700;
}
.hero-mark {
  white-space: normal !important;
  font-size: clamp(46px, 5vw, 84px) !important;
  /* Enough leading that acute accents on capitals (É) clear the
     line above instead of merging with it. */
  line-height: 1.18 !important;
  letter-spacing: .015em !important;
  max-width: 12ch;
}
.part-head h2 { letter-spacing: .015em; }
.note-toc-title,
.part-kicker { letter-spacing: .12em; font-weight: 600; }

/* Typed body — Courier Prime, looser leading for legibility */
.note-article p,
.note-article li {
  font-size: 16px;
  line-height: 1.72;
  letter-spacing: 0;
}
.hero-sub {
  font-family: var(--font-serif) !important;
  font-size: clamp(17px, 1.8vw, 23px) !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
}
.hero-date {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.hero-authors {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.55;
  letter-spacing: .01em;
  color: var(--ink-soft);
  max-width: 540px;
}

/* ============================================================
   Résumé subpage — the abstract on its own tab, in an outlined box
   ============================================================ */
.resume-page {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 64px var(--gutter) 110px;
}
.resume-wrap {
  max-width: 820px;
  margin: 0 auto;
}
.resume-head { margin-bottom: 30px; }
.resume-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .03em;
  font-weight: 700;
  font-size: clamp(40px, 5vw, 66px);
  line-height: 1.02;
  color: var(--ink);
  margin: 0 0 12px;
}
.resume-strap {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}
.resume-box p {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.72;
  letter-spacing: 0;
  color: var(--ink);
  margin: 0;
}
.resume-more {
  margin: 26px 0 0;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .04em;
}
.resume-more a { color: var(--blue-700); text-decoration: none; }
.resume-more a:hover { text-decoration: underline; }

/* Authors list (Les auteurs page) */
.authors-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.authors-list li {
  padding: 26px 2px;
  border-bottom: 1px solid var(--rule);
}
.author-name {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .02em;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 9px;
}
.author-name .author-x {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  color: var(--ink-soft);
  vertical-align: baseline;
  transition: color .18s var(--ease-out);
}
.author-name .author-x:hover { color: var(--blue-700); }
.author-bio {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.62;
  color: var(--ink-soft);
  margin: 0;
  max-width: 680px;
}
.author-bio em { font-style: italic; }

@media (max-width: 720px) {
  .resume-page { padding: 40px 22px 72px; }
  .resume-box { padding: 24px 22px; }
}

/* Typed subheadings — bold typewriter, underscored like a typed report */
.note-article h3 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

/* Tab-style nav labels in the gothic */
.nav-link {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 500;
}

/* Tables read as a typed data appendix */
.note-table thead th { font-family: var(--font-display); letter-spacing: .06em; font-weight: 600; }

/* Discrete footer, styled like the header: full-width bar, paper texture,
   a thin rule on top mirroring the header's bottom rule. */
.footer {
  display: flex !important;
  align-items: center;
  min-height: 70px;
  margin: 0 !important;
  max-width: none !important;
  padding: 18px var(--gutter) !important;
  border-top: 1px solid var(--blue-100);
  background-color: var(--paper);
  background-image: url("/assets/paper-texture.webp");
  background-repeat: repeat;
  background-size: 520px auto;
  background-attachment: fixed;
}
.footer-credit {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: .02em;
  color: var(--ink-soft);
  margin: 0;
}

/* ============================================================
   COMPACT HERO  (overlap fix)
   The reference hero is a full-viewport block with a STICKY
   illustration, designed for a long scrolling preamble. This
   note has no such preamble, so that sticky image pinned itself
   and overlapped the article on scroll, and the 100vh min-height
   left a large empty band. Make the hero a normal, self-contained
   block and keep the article above it in the stacking order.
   ============================================================ */
.hero {
  align-items: center;
  padding-bottom: 64px;
}
.hero-title {
  min-height: 0 !important;
  justify-content: center !important;
  pointer-events: auto !important;
  will-change: auto !important;
  /* Kill the reference's scroll-driven "hero-pin" animation, which translated
     the title down as you scrolled (pinning it in place so the content rode up
     over it). We want plain scrolling: the content pushes the title up. */
  animation: none !important;
  transform: none !important;
}
.hero-illustration {
  position: static !important;
  top: auto !important;
  align-self: center !important;
  height: 480px !important;          /* mobile / stacked default */
}
.hero-illustration .hero-image {
  height: 100% !important;
  width: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  object-fit: contain;
  display: block;
}
/* Desktop hero. The decisive guarantee against the abstract overlapping is
   min-height on the hero CONTAINER: every browser honours it unconditionally,
   so the next block (the abstract) always starts at least this far down,
   regardless of how the artwork itself is sized. Below 1024px the base
   stylesheet stacks the hero, so leave it alone. */
@media (min-width: 1025px) {
  .hero {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 56px !important;
    /* Fill the first screen so the article/TOC sits below the fold on landing. */
    min-height: calc(100vh - 72px) !important;
  }
  .hero > .hero-title { flex: 1 1 38%; min-width: 0; }
  .hero > .hero-illustration { flex: 1 1 62%; min-width: 0; height: 780px !important; }
}
/* Mobile / stacked hero: full-width, left-aligned, no desktop rail padding;
   the illustration simply fills the screen width (square art). */
@media (max-width: 1024px) {
  .hero {
    /* drop the empty "preamble" row and its gaps; tighten bottom spacing */
    grid-template-areas: "title" "illustration" !important;
    grid-template-rows: auto auto !important;
    row-gap: 24px !important;
    padding-bottom: 28px !important;
  }
  .hero-title {
    padding-left: 0 !important;
    max-width: none !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
  .hero-sub,
  .hero-authors { max-width: none !important; }
  .hero-illustration {
    height: auto !important;
    justify-content: flex-start !important;
  }
  .hero-illustration .hero-image {
    width: 100% !important;
    height: auto !important;
  }
}
/* No stacking context here, so the figure's multiply blend reaches the
   paper texture painted on <body> behind it. */

/* ============================================================
   Tiled paper texture background (1950s report stock)
   ============================================================ */
body {
  background-color: var(--paper);
  background-image: url("/assets/paper-texture.webp");
  background-repeat: repeat;
  background-size: 520px auto;
  background-attachment: fixed;
}
/* Sticky header carries the same paper so content scrolls under it cleanly */
.site-header {
  background-color: var(--paper);
  background-image: url("/assets/paper-texture.webp");
  background-repeat: repeat;
  background-size: 520px auto;
  background-attachment: fixed;
}
/* Bottom border only while the header is stuck to the viewport top (see the
   sentinel/IntersectionObserver in note.js), not while it sits at the top of
   the page in normal flow. */
.site-header { border-bottom-color: transparent !important; }
.site-header.is-stuck { border-bottom-color: var(--blue-100) !important; }

/* ============================================================
   Reading layout: sticky table of contents + article
   ============================================================ */
.note-layout {
  display: grid;
  grid-template-columns: var(--rail-right) minmax(0, 1fr);
  column-gap: var(--gutter);
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter) 40px;
}

.note-toc {
  position: sticky;
  top: 96px;
  align-self: start;
  max-height: calc(100vh - 120px);
  overflow: auto;
  padding-top: 8px;
}
.note-toc-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 14px;
}
.note-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
}
.note-toc > ol > li { margin-bottom: 6px; }
.note-toc a {
  display: block;
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.3;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 4px 0 4px 0;
  border-left: 2px solid transparent;
  padding-left: 14px;
  margin-left: -2px;
  transition: color .18s var(--ease-out), border-color .18s var(--ease-out);
}
.note-toc > ol > li > a { counter-increment: toc; }
.note-toc > ol > li > a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 11px;
  color: inherit;            /* follow the link's colour, incl. is-read / is-active */
  margin-right: 10px;
}
.note-toc a:hover { color: var(--ink); }
.note-toc a.is-read { color: var(--ink); }
.note-toc a.is-active {
  color: var(--blue-700);
  border-left-color: var(--blue-700);
}
.note-toc .toc-sub a {
  font-size: 13.5px;
  padding-left: 36px;
  color: var(--ink-soft);
}
.note-toc .toc-sub a::before { content: none; }
.note-toc .toc-sub a.is-read { color: var(--ink); }
.note-toc .toc-sub a.is-active { color: var(--blue-700); }

/* ============================================================
   Article
   ============================================================ */
.note-article {
  max-width: 760px;
  min-width: 0;
}
.note-article > section { scroll-margin-top: 110px; }

.part-head {
  margin: 72px 0 26px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}
.note-article > section:first-child .part-head { border-top: none; padding-top: 0; margin-top: 8px; }
.part-kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--blue-700);
  display: block;
  margin-bottom: 12px;
}
.part-head h2 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.06;
  letter-spacing: -.025em;
  color: var(--ink);
  margin: 0;
  max-width: 720px;
}
.note-article h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.14;
  letter-spacing: -.018em;
  color: var(--ink);
  margin: 48px 0 6px;
  max-width: 720px;
}
.note-article p {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.62;
  letter-spacing: -.001em;
  color: var(--ink);
  max-width: 720px;
  margin: 18px 0;
}
.note-article p em { font-style: italic; }
.note-article strong { font-weight: 700; }

/* --- Figures --- */
.figure {
  margin: 40px 0;
  max-width: 760px;
}
.figure img {
  width: 100%;
  height: auto;
  display: block;
  /* The figure's white background drops into the paper texture. */
  mix-blend-mode: multiply;
}
html.dark .figure img { filter: brightness(.94); }
.figure figcaption {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.5;
  letter-spacing: -.005em;
  color: var(--ink-soft);
  max-width: 680px;
}
.figure figcaption .fig-num {
  color: var(--blue-700);
  margin-right: 8px;
}

/* --- Inline SVG charts (figures 3-7) --- */
.chart {
  margin: 44px 0;
  max-width: 760px;
}
.chart-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .03em;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 20px;
  max-width: 680px;
}
.chart svg { width: 100%; height: auto; display: block; }
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 18px;
}
.chart-key {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .01em;
  color: var(--ink-soft);
}
.chart-swatch {
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 8px;
  border-radius: 2px;
  flex: none;
}

/* --- Equation callout --- */
.equation {
  margin: 32px 0;
  padding: 26px 30px;
  /* Just a touch darker than the paper background, in every theme. */
  background: rgba(0, 0, 0, 0.045);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 28px);
  letter-spacing: -.01em;
  color: var(--blue-800);
}

/* --- Pull quote (conclusion) --- */
.note-quote {
  margin: 44px 0;
  padding: 6px 0 6px 28px;
  border-left: 3px solid var(--blue-700);
  max-width: 720px;
}
.note-quote p {
  font-style: italic;
  color: var(--ink);
}
.note-quote cite {
  display: block;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ink-soft);
}

/* --- Tables --- */
.table-wrap {
  margin: 36px 0;
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: 8px;
}
.note-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 720px;
  font-family: var(--font-serif);
  font-size: 14.5px;
  line-height: 1.45;
}
.note-table thead th {
  background: var(--ink);
  text-align: left;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--paper);
  padding: 14px 16px;
  border-bottom: none;
  vertical-align: bottom;
}
.note-table tbody th {
  text-align: left;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.note-table td,
.note-table tbody th {
  padding: 14px 16px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  color: var(--ink);
}
.note-table tbody tr:last-child td,
.note-table tbody tr:last-child th { border-bottom: none; }
.note-table tbody tr:nth-child(even) td,
.note-table tbody tr:nth-child(even) th { background: rgba(0,0,0,.012); }
html.dark .note-table tbody tr:nth-child(even) td,
html.dark .note-table tbody tr:nth-child(even) th { background: rgba(255,255,255,.025); }

/* --- Draft / placeholder notes for unfinished sections --- */
.draft-note {
  margin: 22px 0;
  padding: 14px 18px;
  border: 1px dashed var(--mute);
  border-radius: 6px;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .02em;
  color: var(--ink-soft);
  max-width: 720px;
}
.draft-note::before {
  content: "À VENIR";
  display: inline-block;
  margin-right: 12px;
  color: var(--blue-700);
  font-weight: 600;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1040px) {
  .note-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .note-toc {
    position: static;
    max-height: none;
    margin-bottom: 40px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--rule);
  }
}
@media (max-width: 720px) {
  .note-layout { padding: 0 22px 32px; }
  .note-article p,
  .figure figcaption { font-size: 17px; }
  .equation { padding: 20px 18px; }
}

/* ============================================================
   Calculs — interactive cost simulator
   ============================================================ */
.calc-intro {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
  max-width: 720px;
  margin: 0 0 14px;
}
.calc-note {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.5;
  letter-spacing: .01em;
  color: var(--ink-soft);
  max-width: 720px;
  margin: 0 0 40px;
}
.calc-tool {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 48px;
  align-items: start;
}

/* --- Controls --- */
.calc-controls {
  position: sticky;
  top: 96px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 26px 24px 22px;
  background: rgba(29, 28, 28, 0.03);
}
.calc-controls-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
  margin: 0 0 22px;
}
.calc-field { margin-bottom: 24px; }
.calc-field-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}
.calc-field-label {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .01em;
  color: var(--ink);
  font-weight: 600;
}
.calc-field-value {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--ember);
  white-space: nowrap;
}
.calc-field-hint {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 7px 0 0;
}
.calc-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 3px;
  background: rgba(29, 28, 28, 0.14);
  outline: none;
  margin: 0;
}
.calc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ember);
  cursor: pointer;
  border: 2px solid var(--paper);
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.calc-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ember);
  cursor: pointer;
  border: 2px solid var(--paper);
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.calc-reset {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  background: transparent;
  border: 1px solid rgba(29, 28, 28, 0.25);
  border-radius: 6px;
  padding: 9px 14px;
  cursor: pointer;
  width: 100%;
  margin-top: 4px;
  transition: background .15s, color .15s;
}
.calc-reset:hover { background: var(--ink); color: var(--paper); }

/* --- Results --- */
.calc-results { min-width: 0; }
.calc-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 8px;
}
.calc-stat { background: var(--paper); padding: 20px 18px; }
.calc-stat-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 8px;
}
.calc-stat-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -.01em;
}
.calc-stat-value .calc-unit {
  font-size: .5em;
  color: var(--ink-soft);
  margin-left: 4px;
  letter-spacing: 0;
}
.calc-stat-sub {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ember);
  margin: 9px 0 0;
}
.calc-stat.is-headline { background: var(--ink); }
.calc-stat.is-headline .calc-stat-label { color: var(--mute); }
.calc-stat.is-headline .calc-stat-value { color: var(--paper); }
.calc-stat.is-headline .calc-stat-sub { color: var(--ember-soft); }

.calc-chart { margin: 40px 0 0; max-width: none; }

.calc-tangibles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  margin-top: 44px;
}
.calc-tangible {
  border-top: 2px solid var(--ink);
  padding-top: 12px;
}
.calc-tangible-value {
  font-family: var(--font-mono);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
}
.calc-tangible-label {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.45;
  color: var(--ink-soft);
  margin-top: 5px;
}
.calc-compare {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  max-width: 720px;
  margin: 40px 0 0;
  padding: 22px 26px;
  background: rgba(192, 69, 28, 0.06);
  border-left: 3px solid var(--ember);
  border-radius: 0 8px 8px 0;
}
.calc-compare strong { color: var(--ember); }

@media (max-width: 900px) {
  .calc-tool { grid-template-columns: 1fr; gap: 32px; }
  .calc-controls { position: static; }
  .calc-stats { grid-template-columns: 1fr; }
}

/* ============================================================
   Hero torch animation
   ============================================================ */
.hero-illustration .torch-stage {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  margin: 0 auto;
}
@media (min-width: 1025px) {
  .hero-illustration .torch-stage { width: auto; height: 100%; }
}
.hero-illustration .torch-stage .hero-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}
.hero-illustration .torch-stage .hero-anim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ============================================================
   Figures, sub-headings and part numbers
   ============================================================ */
/* Figure / chart titles become numbered captions below the figure, in the
   caption style (mono, sentence case) instead of the all-caps display title. */
.note-article { counter-reset: figcap partno; }
.figure,
.chart { display: flex; flex-direction: column; }
.chart-title {
  order: 2;                       /* move the caption below the figure */
  counter-increment: figcap;
  margin: 16px auto 0;
  text-align: center;
  font-family: var(--font-mono);
  text-transform: none;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -.005em;
  color: var(--ink);
}
.chart-title::before {
  content: "Figure " counter(figcap) " : ";
  color: inherit;               /* same colour as the caption text */
}
/* Sub-section headings (h3, e.g. "Véhicule") take the big-title display face,
   but smaller and not in all caps. */
.note-article h3 {
  font-family: var(--font-display);
  text-transform: none;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: .01em;
  text-decoration: none;
}
/* Use the real accent (ember orange, as in the charts) instead of blue. */
.part-kicker { color: var(--ember); }
.note-toc a.is-active { color: var(--ember); border-left-color: var(--ember); }
.note-toc .toc-sub a.is-active { color: var(--ember); }

/* Part numbers without leading zeros (TOC sommaire + article kickers). */
.note-toc > ol > li > a::before { content: counter(toc); }
.part-kicker {
  counter-increment: partno;
  font-size: 0;                 /* hide the literal "01" text */
}
.part-kicker::before {
  content: counter(partno);
  font-size: 24px;             /* twice the normal kicker size */
}