/* RichCommerce — feuille unique. Polices locales (SIL OFL), aucune ressource externe. */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("../fonts/literata-var.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("../fonts/literata-var-italic.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --ink: #17122e;
  --ink-soft: #524c6e;
  --stage: #180f42;
  --stage-raised: #24185c;
  --stage-line: #3a2d7a;
  --violet: #4526cf;
  --violet-deep: #2f1a93;
  --violet-wash: #ebe7fb;
  --paper: #f5f4f9;
  --sheet: #ffffff;
  --line: #dcd8ea;
  --mark: #e6f23c;
  --mark-deep: #c9d61f;
  --ok: #0a6a4c;
  --ok-wash: #dcf2e8;
  --on-stage: #f3f0ff;
  --on-stage-soft: #b9b0e4;

  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --serif: "Literata", "Iowan Old Style", Georgia, serif;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: 1.5625rem;
  --step-3: clamp(1.75rem, 1.3rem + 1.6vw, 2.375rem);
  --step-4: clamp(2.125rem, 1.4rem + 2.9vw, 3.5rem);
  --step-5: clamp(2.75rem, 1.2rem + 6.4vw, 6rem);

  --gap: clamp(1.25rem, 0.6rem + 2.4vw, 3rem);
  --band: clamp(4rem, 2.4rem + 6.5vw, 8.5rem);
  --radius: 6px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.55;
  font-variant-numeric: tabular-nums lining-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 0.14em; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 640; font-stretch: 84%; line-height: 1.04; letter-spacing: -0.012em; text-wrap: balance; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; border-radius: 2px; }
.stage :focus-visible, .foot :focus-visible { outline-color: var(--mark); }
.skip { position: absolute; left: 1rem; top: -4rem; background: var(--mark); color: var(--ink); padding: 0.6rem 1rem; z-index: 50; font-weight: 600; }
.skip:focus { top: 1rem; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: min(100% - 2 * clamp(1.25rem, 4vw, 3.5rem), 78rem); margin-inline: auto; }

/* ───────── En-tête ───────── */
.top { background: var(--stage); color: var(--on-stage); position: sticky; top: 0; z-index: 40; }
.top__in { display: flex; align-items: center; gap: 2rem; min-height: 4.25rem; }
.brand { display: inline-flex; align-items: center; gap: 0.65rem; text-decoration: none; font-weight: 700; font-stretch: 86%; font-size: 1.3rem; letter-spacing: -0.01em; }
.brand svg { width: 1.7rem; height: 1.7rem; flex: none; }
.nav { margin-left: auto; display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.1rem); font-size: 0.97rem; font-weight: 500; }
.nav a { text-decoration: none; padding: 0.4rem 0; border-bottom: 2px solid transparent; color: var(--on-stage-soft); }
.nav a:hover { color: #fff; }
.nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--mark); }
.nav .btn { margin-left: 0.4rem; }
.menu { display: none; margin-left: auto; }

/* ───────── Boutons ───────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3rem; padding: 0.7rem 1.35rem; border-radius: var(--radius); border: 2px solid transparent; font-weight: 600; font-size: 1rem; line-height: 1.15; text-decoration: none; cursor: pointer; transition: background-color 0.15s, border-color 0.15s, color 0.15s; }
.btn--mark { background: var(--mark); color: var(--ink); }
.btn--mark:hover { background: #f1fa6b; }
.btn--violet { background: var(--violet); color: #fff; }
.btn--violet:hover { background: var(--violet-deep); }
.btn--line { border-color: currentColor; background: transparent; }
.btn--line:hover { background: rgba(255, 255, 255, 0.1); }
.band .btn--line:hover { background: var(--violet-wash); }
.nav .btn { min-height: 2.5rem; padding: 0.45rem 1rem; font-size: 0.95rem; color: var(--ink); border-bottom-width: 2px; }
.nav .btn:hover { color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }

/* ───────── Scène d’ouverture ───────── */
.stage { background: var(--stage); color: var(--on-stage); }
.hero { padding: clamp(2.5rem, 1rem + 5vw, 5.5rem) 0 var(--band); }
.hero__head { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); row-gap: 1.6rem; align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.hero h1 { grid-column: 1 / span 12; font-size: var(--step-5); font-stretch: 76%; font-weight: 660; line-height: 0.95; letter-spacing: -0.018em; color: #fff; max-width: 13ch; }
.hero__lead { grid-column: 1 / span 6; font-size: var(--step-1); line-height: 1.45; color: var(--on-stage); margin: 0; max-width: 34em; }
.hero__actions { grid-column: 8 / span 5; justify-content: flex-end; }
.hero__head .kicker { grid-column: 1 / -1; margin: 0 0 -0.6rem; }
.hero--page { padding-bottom: clamp(3rem, 6vw, 5rem); }
.hero--page h1 { font-size: var(--step-4); max-width: 18ch; font-stretch: 80%; line-height: 1; }
.hero--page .hero__head { margin-bottom: 0; }
.hero--page.hero--with-dossier .hero__head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

/* ───────── Le dossier : pièce à gauche, contrôle à droite ───────── */
.dossier { display: grid; grid-template-columns: minmax(0, 1fr); }
.dossier__title, .row, .dossier__foot { background: var(--sheet); color: var(--ink); position: relative; z-index: 1; }
.dossier__title { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.3rem 1.5rem; padding: 1.15rem 1.35rem 1rem; border-bottom: 2px solid var(--ink); border-radius: var(--radius) var(--radius) 0 0; }
.dossier__title strong { font-size: 1.2rem; font-stretch: 84%; font-weight: 680; }
.dossier__title span { color: var(--ink-soft); font-size: var(--step--1); }
.row { display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 1rem; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 0.95rem 1.35rem; cursor: pointer; position: relative; }
.row:hover { background: #faf9fd; }
.row__ref { font-weight: 640; font-stretch: 88%; }
.row__what { grid-column: 1; color: var(--ink-soft); font-size: var(--step--1); }
.row__amount { grid-row: 1; grid-column: 2; justify-self: end; font-weight: 600; white-space: nowrap; }
.row--plain .row__state { grid-row: 1 / span 2; align-self: center; }
.row__state { grid-column: 2; justify-self: end; }
.row[aria-expanded="true"] { background: var(--violet-wash); box-shadow: inset 4px 0 0 var(--violet); }
.row--flag .row__amount { background: linear-gradient(var(--mark), var(--mark)) no-repeat 0 62% / 100% 58%; padding-inline: 0.25em; margin-inline: -0.25em; }
.dossier__foot { margin: 0; padding: 0.85rem 1.35rem 1rem; font-size: var(--step--1); color: var(--ink-soft); display: flex; gap: 0.5rem; align-items: baseline; border-radius: 0 0 var(--radius) var(--radius); }

.state { display: inline-flex; align-items: center; gap: 0.4em; font-size: 0.8125rem; font-weight: 600; line-height: 1.2; padding: 0.22em 0.6em; border-radius: 3px; white-space: nowrap; }
.state--review { background: var(--mark); color: var(--ink); }
.state--ok { background: var(--ok-wash); color: var(--ok); }
.state--missing { border: 1.5px dashed currentColor; color: var(--ink-soft); padding-block: 0.14em; }
.state--none { border: 1.5px solid var(--line); color: var(--ink-soft); padding-block: 0.14em; }
.state--change { border: 1.5px solid var(--mark-deep); color: var(--ink); padding-block: 0.14em; }
.stage .panel .state--change { color: var(--on-stage); border-color: var(--mark); }
.stage .panel .state--missing { color: var(--on-stage-soft); }
.stage .panel .state--none { color: var(--on-stage-soft); border-color: var(--stage-line); }
.stage .panel .state--ok { background: #1c5a48; color: #d6f7ea; }

.panel { padding: 1.6rem 0 2.4rem; }
.panel__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-bottom: 1.3rem; }
.panel__head h3 { font-size: var(--step-2); color: inherit; }
.figures { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--stage-line); border-bottom: 1px solid var(--stage-line); margin: 0 0 1.4rem; }
.figures div { padding: 1rem 1rem 1.1rem 0; }
.figures div + div { padding-left: 1rem; border-left: 1px solid var(--stage-line); }
.figures dt { font-size: var(--step--1); color: var(--on-stage-soft); margin-bottom: 0.2rem; }
.figures dd { margin: 0; font-size: clamp(1.5rem, 1rem + 2.2vw, 2.6rem); font-stretch: 80%; font-weight: 620; line-height: 1; letter-spacing: -0.01em; white-space: nowrap; }
.figures .is-key dd { color: var(--mark); }
.figures .is-unknown dd { font-size: var(--step-1); line-height: 1.25; white-space: normal; color: var(--on-stage-soft); font-stretch: 90%; }
.panel__why { font-size: var(--step-1); line-height: 1.45; max-width: 36em; margin-bottom: 1.6rem; }
.panel__grid { display: grid; gap: 1.6rem var(--gap); }
.panel h4 { font-size: 1rem; font-stretch: 100%; font-weight: 600; letter-spacing: 0; color: var(--on-stage-soft); margin-bottom: 0.6rem; }
.calc { font-size: 0.97rem; }
.calc div { display: flex; justify-content: space-between; gap: 1.5rem; padding: 0.42rem 0; border-bottom: 1px solid var(--stage-line); }
.calc dt { color: var(--on-stage-soft); }
.calc dd { margin: 0; text-align: right; font-weight: 500; }
.calc div:last-child { border-bottom: 0; font-weight: 600; }
.calc div:last-child dt { color: inherit; }
.pieces details { border-bottom: 1px solid var(--stage-line); }
.pieces summary { cursor: pointer; padding: 0.55rem 0; font-weight: 500; display: flex; justify-content: space-between; gap: 1rem; list-style: none; }
.pieces summary::-webkit-details-marker { display: none; }
.pieces summary::after { content: "+"; font-weight: 400; color: var(--on-stage-soft); }
.pieces details[open] summary::after { content: "−"; }
.pieces ul { padding: 0.1rem 0 0.9rem; font-size: 0.94rem; color: var(--on-stage); }
.pieces li { padding: 0.12rem 0 0.12rem 0.9rem; border-left: 2px solid var(--stage-line); }
.pieces .fictive { color: var(--on-stage-soft); font-size: var(--step--1); }
.track { counter-reset: step; }
.track li { counter-increment: step; display: grid; grid-template-columns: 1.7rem 1fr; column-gap: 0.75rem; padding-bottom: 0.85rem; position: relative; }
.track li::before { content: counter(step); grid-row: span 2; width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center; font-size: 0.8rem; font-weight: 600; border: 1.5px solid var(--stage-line); color: var(--on-stage-soft); }
.track li:not(:last-child)::after { content: ""; position: absolute; left: 0.82rem; top: 1.9rem; bottom: 0.1rem; width: 1.5px; background: var(--stage-line); }
.track strong { font-weight: 600; }
.track span { grid-column: 2; font-size: 0.94rem; color: var(--on-stage-soft); }
.track .is-complete::before { background: var(--on-stage); color: var(--stage); border-color: var(--on-stage); }
.track .is-current::before { background: var(--mark); color: var(--ink); border-color: var(--mark); }
.track .is-pending strong { color: var(--on-stage-soft); font-weight: 500; }
.next { margin-top: 1.6rem; padding: 1rem 1.2rem; background: var(--stage-raised); border-left: 4px solid var(--mark); border-radius: 0 var(--radius) var(--radius) 0; max-width: 46em; }
.next strong { display: block; font-size: var(--step--1); color: var(--on-stage-soft); font-weight: 500; margin-bottom: 0.15rem; }
.notice { margin: 1.75rem 0 0; font-size: var(--step--1); color: var(--on-stage-soft); display: flex; gap: 0.6rem; align-items: baseline; }
.notice::before { content: ""; flex: none; width: 0.6rem; height: 0.6rem; background: var(--mark); border-radius: 50%; transform: translateY(0.02rem); }
.dossier__foot::before { content: ""; flex: none; width: 0.55rem; height: 0.55rem; background: var(--mark-deep); border-radius: 50%; }

.dossier__sum { margin: 0; padding: 1.5rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; color: var(--on-stage); }
.dossier__sum div { border-top: 1px solid var(--stage-line); padding-top: 0.8rem; }
.dossier__sum dt { font-size: var(--step--1); color: var(--on-stage-soft); }
.dossier__sum dd { margin: 0.15rem 0 0; font-size: var(--step-3); font-stretch: 80%; font-weight: 620; line-height: 1.05; }
.dossier__sum p { grid-column: 1 / -1; margin: 0.8rem 0 0; font-size: var(--step--1); color: var(--on-stage-soft); }

/* face-à-face site / registre (surveillance) */
.versus { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--stage-line); border-radius: var(--radius); margin-bottom: 1.5rem; }
.versus > div { padding: 1.1rem 1.2rem 1.25rem; min-width: 0; }
.versus > div + div { border-left: 1px solid var(--stage-line); }
.versus h4 { margin-bottom: 0.7rem; }
.versus dl { margin: 0; display: grid; gap: 0.7rem; }
.versus dt { font-size: var(--step--1); color: var(--on-stage-soft); }
.versus dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.versus .is-gap dd { display: inline; background: var(--mark); color: var(--ink); padding: 0.08em 0.35em; box-decoration-break: clone; -webkit-box-decoration-break: clone; border-radius: 2px; }
.versus .is-unknown dd { color: var(--on-stage-soft); font-weight: 400; }
.versus small { display: block; margin-top: 0.9rem; font-size: 0.8125rem; color: var(--on-stage-soft); }

@media (min-width: 62rem) {
  .dossier.is-live { grid-template-columns: minmax(21rem, 5fr) 7fr; column-gap: var(--gap); align-items: start; }
  .dossier.is-live::before { content: ""; grid-column: 1; align-self: stretch; background: var(--sheet); border-radius: var(--radius); box-shadow: 0 2.2rem 4rem -1.6rem rgba(6, 2, 30, 0.75); }
  .dossier.is-live > .dossier__title, .dossier.is-live > .row, .dossier.is-live > .dossier__foot, .dossier.is-live > .dossier__sum { grid-column: 1; }
  .dossier.is-live > .dossier__title { grid-row: 1; }
  .dossier.is-live > .row:nth-of-type(1) { grid-row: 2; }
  .dossier.is-live > .row:nth-of-type(2) { grid-row: 3; }
  .dossier.is-live > .row:nth-of-type(3) { grid-row: 4; }
  .dossier.is-live > .row:nth-of-type(4) { grid-row: 5; }
  .dossier.is-live > .row:nth-of-type(5) { grid-row: 6; }
  .dossier.is-live > .row:nth-of-type(6) { grid-row: 7; }
  .dossier.is-live > .row:nth-of-type(7) { grid-row: 8; }
  .dossier--n5.is-live { grid-template-rows: repeat(8, auto) 1fr; }
  .dossier--n5.is-live::before { grid-row: 1 / span 7; }
  .dossier--n5.is-live > .dossier__foot { grid-row: 7; }
  .dossier--n5.is-live > .dossier__sum { grid-row: 8; }
  .dossier--n6.is-live { grid-template-rows: repeat(9, auto) 1fr; }
  .dossier--n6.is-live::before { grid-row: 1 / span 8; }
  .dossier--n6.is-live > .dossier__foot { grid-row: 8; }
  .dossier--n6.is-live > .dossier__sum { grid-row: 9; }
  .dossier--n7.is-live { grid-template-rows: repeat(10, auto) 1fr; }
  .dossier--n7.is-live::before { grid-row: 1 / span 9; }
  .dossier--n7.is-live > .dossier__foot { grid-row: 9; }
  .dossier--n7.is-live > .dossier__sum { grid-row: 10; }
  .dossier.is-live > .panel { grid-column: 2; grid-row: 1 / -1; padding-top: 0.2rem; }
  .panel__grid { grid-template-columns: 1fr 1fr; }
}
.dossier.is-live > .panel[hidden] { display: none; }
.dossier:not(.is-live) > .row { cursor: default; }
.dossier:not(.is-live) > .row:hover { background: var(--sheet); }

/* ───────── Bandes claires ───────── */
.band { padding-block: var(--band); }
.band--sheet { background: var(--sheet); }
.band--wash { background: var(--violet-wash); }
.band--tight { padding-block: calc(var(--band) * 0.62); }
.split { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); row-gap: 1.25rem; margin-bottom: clamp(2.25rem, 4vw, 3.75rem); }
.split h2 { grid-column: 1 / span 6; font-size: var(--step-4); font-stretch: 80%; max-width: 15ch; }
.split p { grid-column: 8 / span 5; font-size: var(--step-1); line-height: 1.5; color: var(--ink-soft); margin: 0; align-self: end; }
.split--solo h2 { grid-column: 1 / span 9; max-width: 20ch; }

/* trois travaux : registre, pas des cartes */
.works { border-top: 2px solid var(--ink); }
.works li { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); row-gap: 0.75rem; padding: clamp(1.5rem, 3vw, 2.4rem) 0; border-bottom: 1px solid var(--line); align-items: start; }
.works h3 { grid-column: 1 / span 4; font-size: var(--step-3); font-stretch: 82%; }
.works p { grid-column: 5 / span 4; margin: 0; color: var(--ink-soft); }
.works .proof { grid-column: 9 / span 4; }
.proof { font-size: 0.97rem; }
.proof div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.35rem 0; border-bottom: 1px solid var(--line); }
.proof div:last-child { border-bottom: 0; font-weight: 640; }
.proof dt { color: var(--ink-soft); }
.proof dd { margin: 0; text-align: right; white-space: nowrap; }
.proof .hl dd { background: linear-gradient(var(--mark), var(--mark)) no-repeat 0 62% / 100% 58%; padding-inline: 0.25em; }
.proof a { display: inline-block; margin-top: 0.7rem; font-weight: 600; color: var(--violet); }

.works--text h3 { grid-column: 1 / span 5; }
.works--text p { grid-column: 6 / span 6; font-size: var(--step-1); line-height: 1.5; }

/* déroulé : une vraie séquence */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: var(--gap); row-gap: 2rem; counter-reset: s; }
.steps li { counter-increment: s; border-top: 2px solid var(--ink); padding-top: 1rem; }
.steps li::before { content: counter(s); display: block; font-size: var(--step-4); font-stretch: 72%; font-weight: 660; line-height: 0.9; color: var(--violet); margin-bottom: 0.9rem; }
.steps h3 { font-size: var(--step-1); font-stretch: 92%; line-height: 1.2; margin-bottom: 0.6rem; }
.steps p { color: var(--ink-soft); font-size: 0.97rem; margin: 0 0 0.6rem; }
.steps .who { font-size: var(--step--1); color: var(--ink); }
.steps .who b { font-weight: 600; }
.steps--three { grid-template-columns: repeat(3, 1fr); }
.grid--states tbody th { width: 17rem; }

/* grilles d’information */
.grid { width: 100%; font-size: 0.97rem; border-top: 2px solid var(--ink); }
.grid th, .grid td { text-align: left; vertical-align: top; padding: 0.95rem 1.25rem 0.95rem 0; border-bottom: 1px solid var(--line); }
.grid thead th { font-weight: 600; font-size: var(--step--1); color: var(--ink-soft); padding-block: 0.7rem; }
.grid tbody th { font-weight: 640; font-stretch: 90%; font-size: var(--step-0); width: 26%; }
.grid td { color: var(--ink-soft); }
.grid td strong { color: var(--ink); font-weight: 600; }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.duo > * { min-width: 0; }
.list-plain li { padding: 0.8rem 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1.4rem 1fr; gap: 0.6rem; }
.list-plain li::before { content: ""; width: 0.7rem; height: 0.7rem; margin-top: 0.5em; background: var(--violet); border-radius: 1px; }
.list-plain--no li::before { background: none; border: 2px solid var(--ink-soft); border-radius: 50%; }
.list-plain strong { font-weight: 600; }
.sub { font-size: var(--step-2); font-stretch: 84%; margin-bottom: 1rem; }
.kicker { font-size: var(--step-1); font-weight: 500; color: var(--violet); margin: 0 0 0.9rem; }
.stage .kicker { color: var(--mark); }
.lede { font-size: var(--step-1); line-height: 1.5; max-width: 38em; }
.fine { font-size: var(--step--1); color: var(--ink-soft); }

/* bandeau surveillance sur l’accueil */
.teaser { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); row-gap: 2rem; align-items: center; }
.teaser__text { grid-column: 1 / span 5; }
.teaser__text h2 { font-size: var(--step-4); font-stretch: 80%; margin-bottom: 1.1rem; }
.teaser__text p { color: var(--ink-soft); font-size: var(--step-1); line-height: 1.5; }
.teaser__art { grid-column: 7 / span 6; background: var(--stage); color: var(--on-stage); border-radius: var(--radius); padding: 1.4rem 1.4rem 1.2rem; box-shadow: 0 2rem 3.5rem -1.8rem rgba(24, 15, 66, 0.55); }
.teaser__art .versus { margin-bottom: 0.9rem; }
.teaser__art p { margin: 0; font-size: var(--step--1); color: var(--on-stage-soft); }

/* ressources */
.docs { border-top: 2px solid var(--ink); }
.docs li { border-bottom: 1px solid var(--line); }
.docs a { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); row-gap: 0.3rem; padding: 1.5rem 0; text-decoration: none; align-items: baseline; }
.docs a:hover h3 { text-decoration: underline; text-decoration-thickness: 0.07em; text-underline-offset: 0.16em; }
.docs h3 { grid-column: 1 / span 7; font-size: var(--step-2); font-stretch: 86%; line-height: 1.15; }
.docs .docs__kind { grid-column: 9 / span 2; color: var(--ink-soft); font-size: 0.97rem; }
.docs .docs__time { grid-column: 11 / span 2; color: var(--ink-soft); font-size: 0.97rem; text-align: right; }
.docs p { grid-column: 1 / span 7; margin: 0; color: var(--ink-soft); }
.more { margin-top: 1.75rem; }
.more a { font-weight: 600; color: var(--violet); }

/* appel final */
.close { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); row-gap: 1.75rem; align-items: end; }
.close h2 { grid-column: 1 / span 7; font-size: var(--step-4); font-stretch: 78%; color: #fff; max-width: 16ch; }
.close__side { grid-column: 9 / span 4; }
.close__side p { color: var(--on-stage); margin-bottom: 1.25rem; }

/* pilotes */
.offers { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: start; }
.offer { background: var(--sheet); border-radius: var(--radius); border-top: 6px solid var(--violet); padding: clamp(1.4rem, 3vw, 2.4rem); }
.offer h2 { font-size: var(--step-3); font-stretch: 82%; margin-bottom: 0.5rem; }
.offer > p { color: var(--ink-soft); }
.offer dl { margin: 1.4rem 0 1.6rem; border-top: 2px solid var(--ink); }
.offer dl div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1rem; padding: 0.8rem 0; border-bottom: 1px solid var(--line); }
.offer dt { font-weight: 600; font-size: 0.97rem; }
.offer dd { margin: 0; color: var(--ink-soft); font-size: 0.97rem; }
.offer dd strong { color: var(--ink); }

/* ───────── Lecture des documents ───────── */
.progress { position: fixed; left: 0; top: 0; height: 3px; width: 100%; background: var(--mark); transform-origin: 0 50%; transform: scaleX(0); z-index: 60; }
@supports (animation-timeline: scroll()) {
  .progress { animation: grow linear both; animation-timeline: scroll(root block); }
  @keyframes grow { to { transform: scaleX(1); } }
}
.doc-head { padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3.25rem); }
.doc-head__in { max-width: 54rem; }
.doc-head h1 { font-size: var(--step-4); font-stretch: 80%; line-height: 1.02; color: #fff; margin-bottom: 1rem; }
.doc-head .standfirst { font-family: var(--serif); font-style: italic; font-size: var(--step-1); line-height: 1.45; color: var(--on-stage); max-width: 36em; margin-bottom: 1.5rem; }
.doc-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 2rem; font-size: 0.94rem; color: var(--on-stage-soft); margin: 0; }
.doc-meta div { display: flex; gap: 0.45rem; }
.doc-meta dt::after { content: " :"; }
.doc-meta dd { margin: 0; color: var(--on-stage); }
.crumb { font-size: 0.94rem; color: var(--on-stage-soft); margin-bottom: 1.5rem; }
.crumb a { color: var(--on-stage); }

.doc { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); padding-block: clamp(2.25rem, 5vw, 4.25rem) var(--band); }
.toc { font-size: 0.94rem; }
.toc summary { cursor: pointer; font-weight: 600; padding: 0.8rem 0; border-block: 1px solid var(--line); list-style: none; display: flex; justify-content: space-between; }
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after { content: "+"; color: var(--ink-soft); }
.toc details[open] summary::after { content: "−"; }
.toc ol { padding: 0.6rem 0 0.4rem; }
.toc li a { display: block; padding: 0.38rem 0 0.38rem 0.9rem; border-left: 2px solid var(--line); text-decoration: none; color: var(--ink-soft); line-height: 1.3; }
.toc li a:hover { color: var(--ink); }
.toc li a.is-here { color: var(--ink); font-weight: 600; border-left-color: var(--violet); }
.toc .lvl3 a { padding-left: 1.7rem; font-size: 0.9rem; }

.prose { font-family: var(--serif); font-size: 1.1875rem; line-height: 1.68; max-width: 41rem; font-variant-numeric: oldstyle-nums proportional-nums; hanging-punctuation: first; }
.prose > * { margin-block: 1.15em 0; }
.prose > :first-child { margin-top: 0; }
.prose p { margin-bottom: 0; text-wrap: pretty; }
.prose li p, .callout p, .schema p { margin-top: 0; }
.prose li p + p { margin-top: 0.6em; }
.prose > p:first-of-type { font-size: 1.3125rem; line-height: 1.58; }
.prose h2 { font-family: var(--sans); font-size: var(--step-3); font-stretch: 82%; line-height: 1.08; margin-top: 2.4em; padding-top: 1.1rem; border-top: 2px solid var(--ink); }
.prose h3 { font-family: var(--sans); font-size: var(--step-2); font-stretch: 88%; line-height: 1.15; margin-top: 2em; }
.prose h2 + *, .prose h3 + * { margin-top: 0.85em; }
.prose a { color: var(--violet-deep); }
.prose strong { font-weight: 650; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose ul { list-style: square; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 0.45em; }
.prose li::marker { color: var(--violet); }
.prose blockquote { margin-inline: 0; padding-left: 1.2rem; border-left: 3px solid var(--violet); font-style: italic; }
.prose .ref { font-family: var(--sans); font-size: 0.68em; font-weight: 600; vertical-align: 0.5em; line-height: 0; margin-left: 0.12em; font-variant-numeric: lining-nums; white-space: nowrap; }
.prose .ref a { text-decoration: none; color: var(--violet); padding: 0.15em 0.1em; }
.prose .ref a:hover { background: var(--mark); color: var(--ink); }
.callout { font-family: var(--sans); font-size: 1.0625rem; line-height: 1.55; background: var(--sheet); border-left: 4px solid var(--violet); border-radius: 0 var(--radius) var(--radius) 0; padding: 1.1rem 1.3rem 1.2rem; font-variant-numeric: lining-nums tabular-nums; }
.callout--exemple { border-left-color: var(--mark-deep); }
.callout strong:first-child { display: block; font-size: var(--step--1); font-weight: 600; color: var(--violet-deep); margin-bottom: 0.25rem; }
.callout--exemple strong:first-child { color: #5c6400; }
.table-wrap { font-family: var(--sans); font-size: 0.97rem; line-height: 1.45; font-variant-numeric: lining-nums tabular-nums; margin-block: 2em; }
.table-wrap table { border-top: 2px solid var(--ink); }
.table-wrap th, .table-wrap td { text-align: left; vertical-align: top; padding: 0.8rem 1rem 0.8rem 0; border-bottom: 1px solid var(--line); }
.table-wrap thead th { font-size: var(--step--1); font-weight: 600; color: var(--ink-soft); }
.table-wrap td:first-child { font-weight: 600; }
.sources { font-family: var(--sans); font-size: 0.97rem; line-height: 1.5; margin-top: 3.25em; border-top: 2px solid var(--ink); font-variant-numeric: lining-nums; max-width: 41rem; }
.sources > summary { cursor: pointer; font-size: var(--step-1); font-weight: 640; font-stretch: 88%; padding: 1rem 0; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.sources > summary::-webkit-details-marker { display: none; }
.sources > summary::after { content: "Afficher"; font-size: var(--step--1); font-weight: 500; font-stretch: 100%; color: var(--violet); align-self: center; }
.sources[open] > summary::after { content: "Replier"; }
.sources ol { counter-reset: none; }
.sources li { display: grid; grid-template-columns: 2.6rem 1fr; gap: 0.5rem; padding: 0.85rem 0; border-top: 1px solid var(--line); }
.sources li:target { background: linear-gradient(var(--mark), var(--mark)) no-repeat 0 0 / 2.2rem 100%; }
.sources .sid { font-weight: 640; }
.sources .back { display: block; margin-top: 0.3rem; font-size: var(--step--1); color: var(--ink-soft); }
.sources a { color: var(--violet-deep); overflow-wrap: anywhere; }
.method-note { font-family: var(--sans); font-size: 0.94rem; color: var(--ink-soft); margin-top: 1.2rem; max-width: 41rem; }
.method-note li { padding: 0.25rem 0 0.25rem 1rem; border-left: 2px solid var(--line); }
.doc-next { font-family: var(--sans); margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; max-width: 41rem; }
.doc-next a { font-weight: 600; color: var(--violet); }
.doc-next span { display: block; font-size: var(--step--1); color: var(--ink-soft); font-weight: 400; }

/* schémas repris des guides */
.schema { font-family: var(--sans); font-size: 0.97rem; line-height: 1.45; margin: 2.4em 0; background: var(--sheet); border-radius: var(--radius); padding: 1.5rem 1.5rem 1.3rem; font-variant-numeric: lining-nums; hyphens: manual; }
.schema p { margin: 0; hyphens: manual; }
.schema-titre { font-weight: 640; font-stretch: 88%; font-size: var(--step-1); margin-bottom: 0.9rem; }
.schema-num { color: var(--violet); margin-right: 0.5rem; }
.schema-entree { color: var(--ink-soft); margin-bottom: 1.2rem !important; }
.schema-icone { display: none; }
.schema-note { color: var(--ink-soft); font-size: var(--step--1); margin-top: 1.1rem !important; }
.prose .moments { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem 1.6rem; }
.prose .moments > li { margin: 0; border-top: 2px solid var(--ink); padding-top: 0.7rem; }
.moment-nom { font-weight: 640; font-stretch: 90%; font-size: 1.0625rem; display: flex; gap: 0.55rem; align-items: baseline; }
.moment-n { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--violet); color: #fff; font-size: 0.8rem; font-weight: 600; display: inline-grid; place-items: center; transform: translateY(-0.08rem); }
.moment-but { color: var(--ink-soft); margin: 0.2rem 0 0.5rem !important; }
.prose .moment-points, .prose .retours ul { list-style: none; padding: 0; }
.prose .moment-points li, .prose .retours li { margin: 0; padding: 0.3rem 0 0.3rem 0.9rem; border-left: 2px solid var(--line); }
.retours { margin-top: 1.4rem; padding-top: 0.9rem; border-top: 2px solid var(--ink); }
.retours-titre { font-weight: 640; font-stretch: 90%; margin-bottom: 0.5rem !important; }
.lectures { display: grid; gap: 1.2rem; }
.lecture { border-top: 2px solid var(--ink); padding-top: 0.7rem; display: grid; grid-template-columns: 11rem 1fr; column-gap: 1.4rem; row-gap: 0.15rem; }
.lecture-nom { font-weight: 640; font-stretch: 90%; font-size: 1.0625rem; grid-column: 1; }
.lecture-ex { color: var(--ink-soft); font-size: var(--step--1); grid-column: 1; grid-row: 2 / span 3; }
.lecture > p:not(.lecture-nom):not(.lecture-ex) { grid-column: 2; }
.lecture-titre { font-size: var(--step--1); font-weight: 600; }
.lecture-titre.lecture-oui { grid-row: 1; color: var(--ok); }
.lecture-non { color: var(--ink-soft); margin-top: 0.5rem !important; }
.schema .ref { font-size: 0.72em; }

.info { max-width: 44rem; }
.info h2 { font-size: var(--step-2); font-stretch: 86%; margin: 2.4rem 0 0.7rem; }
.info h2:first-child { margin-top: 0; }
.info p, .info li { color: var(--ink-soft); }
.info ul { list-style: square; padding-left: 1.2em; margin-bottom: 1em; }
.info strong { color: var(--ink); font-weight: 600; }
.todo { background: var(--mark); color: var(--ink); padding: 0.05em 0.4em; border-radius: 2px; font-weight: 600; }

/* ───────── Pied ───────── */
.foot { background: var(--ink); color: #cfcbe0; padding: clamp(2.75rem, 6vw, 4.5rem) 0 2.25rem; font-size: 0.97rem; }
.foot__in { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); row-gap: 2.25rem; }
.foot__brand { grid-column: 1 / span 5; }
.foot__brand .brand { color: #fff; margin-bottom: 0.9rem; }
.foot__brand p { max-width: 28em; margin: 0; }
.foot nav { grid-column: span 2; }
.foot nav:first-of-type { grid-column: 7 / span 2; }
.foot h2 { font-size: var(--step--1); font-stretch: 100%; font-weight: 600; letter-spacing: 0; color: #fff; margin-bottom: 0.75rem; }
.foot li { padding: 0.24rem 0; }
.foot a { text-decoration: none; }
.foot a:hover { color: #fff; text-decoration: underline; }
.foot__note { grid-column: 1 / -1; border-top: 1px solid #37315a; padding-top: 1.4rem; font-size: var(--step--1); color: #9d98b8; display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; justify-content: space-between; }

/* ───────── Un seul mouvement à l’ouverture : le surligneur ───────── */
@media (prefers-reduced-motion: no-preference) {
  .dossier.is-live .row--flag .row__amount { animation: stroke 0.7s cubic-bezier(0.3, 0.7, 0.2, 1) 0.45s both; }
  @keyframes stroke { from { background-size: 0 58%; } to { background-size: 100% 58%; } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}

/* ───────── Écrans moyens et petits ───────── */
@media (min-width: 70rem) {
  .doc { grid-template-columns: 15rem minmax(0, 1fr); column-gap: clamp(3rem, 6vw, 6rem); }
  .toc { position: sticky; top: 6rem; align-self: start; max-height: calc(100vh - 7.5rem); overflow: auto; }
  .toc summary { pointer-events: none; border-top: 2px solid var(--ink); border-bottom: 0; padding-bottom: 0.3rem; }
  .toc summary::after { content: none; }
}
@media (max-width: 61.99rem) {
  .nav { display: none; }
  .menu { display: block; }
  .menu summary { list-style: none; cursor: pointer; font-weight: 600; padding: 0.55rem 0.95rem; border: 2px solid var(--stage-line); border-radius: var(--radius); }
  .menu summary::-webkit-details-marker { display: none; }
  .menu[open] summary { background: var(--stage-raised); }
  .menu__list { position: absolute; left: 0; right: 0; top: 100%; background: var(--stage); border-top: 1px solid var(--stage-line); padding: 0.5rem clamp(1.25rem, 4vw, 3.5rem) 1.5rem; box-shadow: 0 1.5rem 2rem -1rem rgba(0, 0, 0, 0.5); }
  .menu__list a { display: block; padding: 0.85rem 0; border-bottom: 1px solid var(--stage-line); text-decoration: none; font-size: var(--step-1); font-weight: 500; }
  .menu__list .btn { margin-top: 1.1rem; width: 100%; border-bottom: 0; font-size: 1rem; }
  .hero__lead, .hero__actions { grid-column: 1 / -1; }
  .hero__actions { justify-content: flex-start; }
  .split h2, .split p, .split--solo h2 { grid-column: 1 / -1; }
  .works h3, .works--text h3, .works--text p { grid-column: 1 / -1; }
  .works p { grid-column: 1 / span 6; }
  .works .proof { grid-column: 7 / span 6; }
  .steps, .steps--three { grid-template-columns: 1fr 1fr; }
  .teaser__text, .teaser__art { grid-column: 1 / -1; }
  .close h2, .close__side { grid-column: 1 / -1; }
  .offers, .duo { grid-template-columns: 1fr; }
  .docs h3, .docs p { grid-column: 1 / -1; }
  .docs .docs__kind { grid-column: 1 / span 8; grid-row: 3; }
  .docs .docs__time { grid-column: 9 / span 4; grid-row: 3; }
  .foot__brand { grid-column: 1 / -1; }
  .foot nav, .foot nav:first-of-type { grid-column: span 4; }
  .dossier.is-live > .panel { padding: 1.4rem 0.15rem 2rem; }
}
@media (max-width: 40rem) {
  body { font-size: 1rem; }
  .works p, .works .proof { grid-column: 1 / -1; }
  .steps, .steps--three { grid-template-columns: 1fr; }
  .figures div { padding-right: 0.5rem; }
  .figures div + div { padding-left: 0.6rem; }
  .versus { grid-template-columns: 1fr; }
  .versus > div + div { border-left: 0; border-top: 1px solid var(--stage-line); }
  .offer dl div { grid-template-columns: 1fr; gap: 0.15rem; }
  .foot nav, .foot nav:first-of-type { grid-column: span 6; }
  .prose { font-size: 1.125rem; line-height: 1.66; }
  .prose > p:first-of-type { font-size: 1.1875rem; }
  .prose p, .prose li { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 9 4 4; }
  .prose strong { hyphens: manual; }
  .prose .moments { grid-template-columns: 1fr; }
  .lecture { grid-template-columns: 1fr; }
  .lecture > p:not(.lecture-nom):not(.lecture-ex), .lecture-ex, .lecture-titre.lecture-oui { grid-column: 1; grid-row: auto; }
  /* tableaux recomposés en blocs */
  .grid thead, .table-wrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .grid tr, .table-wrap tr { display: block; padding: 0.9rem 0; border-bottom: 1px solid var(--line); }
  .grid th, .grid td, .table-wrap th, .table-wrap td { display: block; width: auto !important; border: 0; padding: 0.15rem 0; }
  .grid td[data-label]::before, .table-wrap td[data-label]::before { content: attr(data-label); display: block; font-size: 0.8125rem; font-weight: 600; color: var(--ink-soft); margin-top: 0.45rem; }
  .table-wrap td:first-child::before { content: none; }
}

@media print {
  .top, .foot, .progress, .toc, .doc-next, .skip { display: none !important; }
  body, .stage { background: #fff; color: #000; }
  .doc-head h1, .doc-head .standfirst, .doc-meta dd, .doc-meta, .crumb { color: #000; }
  .prose { font-size: 11pt; max-width: none; }
  .sources > summary::after { content: none; }
  a { text-decoration: none; }
}

/* ───────────────────────── scène : un contrôle rejoué pas à pas ───────────────────────── */
.scene { display: grid; gap: 1rem; background: var(--stage-raised); border: 1px solid var(--stage-line); border-radius: 10px; padding: 1.15rem 1.25rem 1.1rem; color: var(--on-stage); box-shadow: 0 2.5rem 4rem -2.2rem rgba(0, 0, 0, 0.7); }
.scene__bar { display: flex; align-items: center; gap: 0.75rem; min-height: 2rem; }
.scene__bar strong { font-size: var(--step--1); font-weight: 600; color: #fff; white-space: nowrap; }
.scene__count { font-size: var(--step--1); color: var(--on-stage-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.scene__ctl { margin-left: auto; font: inherit; font-size: 0.8125rem; font-weight: 600; line-height: 1.2; color: var(--on-stage); background: none; border: 1.5px solid var(--stage-line); border-radius: 3px; padding: 0.42em 0.8em; cursor: pointer; }
.scene__ctl:hover { background: rgba(255, 255, 255, 0.08); }
.scene__ctl:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px; }
.scene__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
.scene__list { background: var(--sheet); color: var(--ink); border-radius: 6px; padding: 0.8rem 0 0.45rem; min-width: 0; }
.scene__head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; margin: 0; padding: 0 0.95rem 0.6rem; border-bottom: 2px solid var(--ink); }
.scene__head strong { font-size: var(--step--1); font-weight: 650; }
.scene__head span { font-size: 0.75rem; color: var(--ink-soft); white-space: nowrap; }
.scene__rows { position: relative; }
.scene__rows ol { list-style: none; margin: 0; padding: 0; position: relative; }
.scene__rows li { display: grid; grid-template-columns: minmax(0, 1fr) 4.3rem 5.2rem; align-items: center; gap: 0.6rem; min-height: 2.5rem; padding: 0.35rem 0.95rem; border-bottom: 1px solid var(--line); font-size: var(--step--1); }
.scene__rows li:last-child { border-bottom: 0; }
.srow__ref { font-size: 0.8125rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srow__val { justify-self: end; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.scene--text .scene__rows li { grid-template-columns: minmax(0, 1fr) 5.3rem; }
.scene--text .srow__ref { font-size: 0.8125rem; }
.srow__mark { justify-self: end; font-size: 0.72rem; font-weight: 650; line-height: 1.2; padding: 0.24em 0.55em; border-radius: 3px; white-space: nowrap; border: 1.5px solid var(--line); color: var(--ink-soft); }
.scene__rows li[data-state="review"] .srow__mark { background: var(--mark); border-color: var(--mark); color: var(--ink); }
.scene__rows li[data-state="ok"] .srow__mark { background: var(--ok-wash); border-color: var(--ok-wash); color: var(--ok); }
.scene__rows li[data-state="missing"] .srow__mark { border-style: dashed; border-color: var(--ink-soft); }
.scene__rows li[data-state="change"] .srow__mark { border-color: var(--mark-deep); color: var(--ink); }
.scene__reader { display: none; position: absolute; left: 0; right: 0; top: 0; height: 2.5rem; background: var(--violet-wash); border-left: 4px solid var(--violet); pointer-events: none; }
.scene__focus, .scene__calc { display: grid; list-style: none; margin: 0; padding: 0; min-width: 0; }
.scene__calc { margin-top: 0.3rem; }
.scene__step, .scene__eq { grid-area: 1 / 1; display: none; min-width: 0; }
.scene__step { gap: 0.55rem; align-content: start; }
.scene__step--end { display: grid; align-content: center; gap: 0.7rem; border: 1px solid var(--stage-line); border-radius: 6px; padding: 0.9rem 1rem; }
.scene__step--end p { margin: 0; font-size: var(--step-0); line-height: 1.4; color: var(--on-stage); }
.scene__step--end a { color: var(--mark); font-weight: 600; text-underline-offset: 0.2em; }
.sdoc { display: grid; gap: 0.1rem; align-content: start; min-width: 0; background: var(--sheet); color: var(--ink); border-radius: 6px; padding: 0.75rem 0.95rem 0.85rem; }
.sdoc__kind { font-size: 0.75rem; font-weight: 650; color: var(--violet); margin-bottom: 0.15rem; }
.sdoc__ref { font-size: var(--step--1); font-weight: 600; overflow-wrap: anywhere; }
.sdoc__what { font-size: var(--step--1); line-height: 1.35; color: var(--ink-soft); }
.sdoc__val { justify-self: start; margin-top: 0.4rem; font-size: var(--step-3); font-stretch: 80%; font-weight: 640; line-height: 1.05; font-variant-numeric: tabular-nums; }
.sdoc.is-unknown { background: transparent; color: var(--on-stage); outline: 1.5px dashed var(--on-stage-soft); outline-offset: -1.5px; }
.sdoc.is-unknown .sdoc__kind, .sdoc.is-unknown .sdoc__what { color: var(--on-stage-soft); }
.scene--text .sdoc { padding-block: 0.6rem 0.7rem; }
.scene--text .sdoc__val { margin-top: 0.15rem; font-size: var(--step-0); font-stretch: 100%; font-weight: 650; line-height: 1.3; }
.scene__eq { flex-wrap: wrap; align-items: center; gap: 0.3rem 0.7rem; min-height: 3.4rem; font-variant-numeric: tabular-nums; }
.scene__eq--end { display: flex; }
.eq__a, .eq__b, .eq__op { font-size: var(--step-2); font-stretch: 80%; font-weight: 560; line-height: 1.1; color: var(--on-stage); white-space: nowrap; }
.eq__op { color: var(--on-stage-soft); font-weight: 400; }
.eq__r { font-size: var(--step-4); font-stretch: 78%; font-weight: 680; line-height: 1.05; color: #fff; }
.eq__r span { display: inline-block; padding: 0.04em 0.22em; margin: 0 -0.06em; background: linear-gradient(var(--mark), var(--mark)) left center / 0 100% no-repeat; }
.scene__eq[data-state="review"] .eq__r span, .scene__eq--end .eq__r span { background-size: 100% 100%; color: var(--ink); }
.scene__eq[data-state="missing"] .eq__r, .scene__eq[data-state="missing"] .eq__b { color: var(--on-stage-soft); }
.scene__eq--text .eq__r, .scene--text .scene__eq--end .eq__r { font-size: var(--step-2); font-stretch: 86%; line-height: 1.25; }
.scene__eq--text .eq__r span { display: inline; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.eq__tail { font-size: var(--step-0); color: var(--on-stage); }
.scene .state--missing, .scene .state--none, .scene .state--change { color: var(--on-stage); }
.scene .state--none { border-color: var(--on-stage-soft); }
.scene__totals { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin: 0; padding-top: 0.85rem; border-top: 1px solid var(--stage-line); }
.scene__totals dt { font-size: var(--step--1); color: var(--on-stage-soft); }
.scene__totals dd { margin: 0.1rem 0 0; font-size: var(--step-2); font-stretch: 80%; font-weight: 640; line-height: 1.1; color: #fff; font-variant-numeric: tabular-nums; }
.scene__note { margin: 0; font-size: 0.75rem; color: var(--on-stage-soft); }

/* pendant la lecture */
.scene.is-live .scene__step, .scene.is-live .scene__eq { visibility: hidden; opacity: 0; }
.scene.is-live .scene__step { display: grid; }
.scene.is-live .scene__eq { display: flex; }
.scene.is-live .scene__step.is-on, .scene.is-live .scene__eq.is-on { visibility: visible; opacity: 1; }
.scene.is-live .srow__mark { opacity: 0; transform: translateX(8px); }
.scene.is-live li.is-done .srow__mark { opacity: 1; transform: none; }
.scene.is-live .scene__rows li { color: var(--ink-soft); }
.scene.is-live .scene__rows li.is-reading, .scene.is-live .scene__rows li.is-done { color: var(--ink); }
.scene.is-live[data-phase="run"] .scene__reader { display: block; }
.scene__totals dd.is-bump { color: var(--mark); }

.teaser__art { padding: 0; background: none; box-shadow: none; }
.hero__scene { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 34rem) {
  .scene__body { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: stretch; }
  .scene--text .scene__body { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
  .scene__calc { grid-column: 1 / -1; }
  .scene__focus { align-content: center; }
  .scene__step { align-content: center; }
}
@media (min-width: 62rem) {
  .hero__head--scene { align-items: start; }
  .hero__head--scene > h1 { font-size: var(--step-4); font-stretch: 80%; line-height: 1; max-width: 17ch; }
  .hero__head--scene > h1, .hero__head--scene > .kicker, .hero__head--scene > .hero__lead, .hero__head--scene > .hero__actions { grid-column: 1 / span 6; }
  .hero__head--scene > .hero__actions { justify-content: flex-start; }
  .hero__head--scene > .hero__scene { grid-column: 7 / -1; grid-row: 1 / span 3; align-self: center; }
  .hero__head--k > .hero__scene { grid-row: 1 / span 4; }
}
@media (max-width: 33.99rem) {
  .scene { padding: 1rem 0.9rem 0.95rem; }
  .scene__step:not(.scene__step--end) { grid-template-columns: minmax(0, 1fr); }
  .scene--text .scene__step:not(.scene__step--end) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sdoc { grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.75rem; align-items: end; }
  .sdoc__kind, .sdoc__ref, .sdoc__what { grid-column: 1; }
  .sdoc__val { grid-column: 2; grid-row: 1 / span 3; align-self: center; margin: 0; font-size: var(--step-2); }
  .scene--text .sdoc { grid-template-columns: minmax(0, 1fr); }
  .scene--text .sdoc__val { grid-column: 1; grid-row: auto; font-size: 0.9375rem; }
  .eq__a, .eq__b, .eq__op { font-size: var(--step-1); }
  .eq__r { font-size: var(--step-3); }
  .scene__eq--text .eq__r, .scene--text .scene__eq--end .eq__r { font-size: var(--step-1); }
  .scene__eq { min-height: 4.6rem; align-content: center; }
}
@media (prefers-reduced-motion: no-preference) {
  .scene__reader { transition: transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1), height 0.4s ease; }
  .scene.is-live .scene__rows li { transition: color 0.5s ease; }
  .scene.is-live .srow__mark { transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); }
  .scene__totals dd { transition: color 1.1s ease; }
  .scene__totals dd.is-bump { transition: color 0.15s ease; }
  .scene__step.is-on .sdoc { animation: scene-rise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.55s both; }
  .scene__step.is-on .sdoc + .sdoc { animation-delay: 1.05s; }
  .scene__eq.is-on .eq__a { animation: scene-from-left 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) 1.45s both; }
  .scene__eq.is-on .eq__op { animation: scene-fade 0.4s ease 1.75s both; }
  .scene__eq.is-on .eq__b { animation: scene-from-right 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) 1.85s both; }
  .scene__eq.is-on .eq__op--is { animation-delay: 2.3s; }
  .scene__eq.is-on .eq__r { animation: scene-stamp 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) 2.5s both; }
  .scene__eq.is-on[data-state="review"] .eq__r span { animation: scene-mark 0.6s cubic-bezier(0.3, 0.7, 0.2, 1) 2.75s both; }
  .scene__eq.is-on .state { animation: scene-fade 0.4s ease 3.2s both; }
  .scene__eq--text.is-on .eq__r { animation-delay: 1.75s; }
  .scene__eq--text.is-on[data-state="review"] .eq__r span { animation-delay: 2s; }
  .scene__eq--text.is-on .state { animation-delay: 2.5s; }
  .scene__step--end.is-on { animation: scene-rise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s both; }
  .scene__eq--end.is-on .eq__r { animation: scene-stamp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s both; }
  .scene__eq--end.is-on .eq__r span { animation: scene-mark 0.7s cubic-bezier(0.3, 0.7, 0.2, 1) 0.8s both; }
  .scene__eq--end.is-on .eq__tail { animation: scene-fade 0.5s ease 1.4s both; }
}
@keyframes scene-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes scene-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes scene-from-left { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes scene-from-right { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes scene-stamp { from { opacity: 0; transform: scale(1.35); } to { opacity: 1; transform: none; } }
@keyframes scene-mark { from { background-size: 0 100%; color: #fff; } to { background-size: 100% 100%; color: var(--ink); } }
@media print { .scene__ctl { display: none; } }