/* Hallmark · macrostructure: multi-page system (Narrative Workflow · Map-Diagram · Long Document · Workbench · Stat-Led)
 * theme: custom "carnet d'observations" · paper: grille millimétrée · accent: bleu encre + soleil
 * fonts: système uniquement — sans moderne unifié (system-ui) titres+corps + mono données
 * nav: N6 masthead compact · footer: Ft4 colophon · pre-emit critique: P5 H4 E4 S5 R4 V4
 */

/* ---------------------------------------------------------------- tokens */
:root {
  /* papier & encres — thème clair par défaut */
  --paper: #f9fafb;
  --grid: rgba(46, 111, 163, .06);
  --grid-strong: rgba(46, 111, 163, .12);
  --panel: #ffffff;
  --panel-2: #f0f3f6;
  --ink: #1b2530;
  --ink-2: #45586a;
  --ink-3: #5d7080;
  --line: #d7dfe6;

  --bleu: #1f608e;
  --bleu-vif: #2e6fa3;
  --bleu-soft: #e7f0f7;
  --soleil: #8f5a10;
  --soleil-soft: #f7eeda;

  /* états du panneau de chantier — teintes texte réglées pour AA sur leur fond soft */
  --ok: #276f47;       --ok-soft: #e1f0e7;
  --run: #895c10;      --run-soft: #f6ecd6;
  --todo: #556676;     --todo-soft: #e9edf1;

  /* couches de l'entrepôt */
  --bronze: #8c5426;
  --silver: #5b6b7c;
  --gold: #82670f;
  --serve: #2c6f5c;

  /* blocs de code */
  --code-bg: #16222e;
  --code-ink: #d5e3ef;
  --code-key: #8fc1e8;
  --code-str: #a8d5a2;
  --code-num: #e8c98f;
  --code-com: #7d93a8;

  /* typographie */
  /* une seule famille sans moderne — titres ET corps, native de l'OS ; mono pour code+données */
  --font-display: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

  --text-sm: .8125rem;
  --text-base: 1rem;
  --text-md: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: clamp(1.35rem, 2.6vw, 1.7rem);
  --text-display: clamp(1.9rem, 4.6vw, 3rem);
  --text-stat: clamp(1.6rem, 3.4vw, 2.2rem);

  /* échelle 4 pt */
  --space-2xs: .25rem;
  --space-xs: .5rem;
  --space-sm: .75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.25rem;
  --space-2xl: 3.5rem;
  --space-3xl: 5rem;

  --radius-sm: 2px;
  --radius-md: 2px;
  --radius-pill: 99px;

  --shadow-card: none;
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --dur-short: 140ms;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #10161d;
    --grid: rgba(120, 170, 215, .05);
    --grid-strong: rgba(120, 170, 215, .09);
    --panel: #17212c;
    --panel-2: #1d2936;
    --ink: #e5ecf2;
    --ink-2: #adbbc9;
    --ink-3: #8496a6;
    --line: #2b3846;
    --bleu: #7fb3dd;
    --bleu-vif: #6aa5d4;
    --bleu-soft: #1b2b3b;
    --soleil: #dda756;
    --soleil-soft: #32270f;
    --ok: #63b78c;       --ok-soft: #1d3226;
    --run: #d7a44e;      --run-soft: #362c17;
    --todo: #8496a6;     --todo-soft: #222c37;
    --bronze: #cb905c;
    --silver: #9aa9b7;
    --gold: #d2ac4c;
    --serve: #66ad95;
    --code-bg: #0c141c;
    --code-ink: #cfdeeb;
    --shadow-card: none;
    color-scheme: dark;
  }
}

/* bascule manuelle : data-theme prime sur la préférence système */
:root[data-theme="light"] {
  --paper: #f9fafb; --grid: rgba(46,111,163,.06); --grid-strong: rgba(46,111,163,.12);
  --panel: #ffffff; --panel-2: #f0f3f6; --ink: #1b2530; --ink-2: #45586a; --ink-3: #5d7080;
  --line: #d7dfe6; --bleu: #1f608e; --bleu-vif: #2e6fa3; --bleu-soft: #e7f0f7;
  --soleil: #8f5a10; --soleil-soft: #f7eeda;
  --ok: #276f47; --ok-soft: #e1f0e7; --run: #895c10; --run-soft: #f6ecd6;
  --todo: #556676; --todo-soft: #e9edf1;
  --bronze: #8c5426; --silver: #5b6b7c; --gold: #82670f; --serve: #2c6f5c;
  --code-bg: #16222e; --code-ink: #d5e3ef;
  --shadow-card: none;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --paper: #10161d; --grid: rgba(120,170,215,.05); --grid-strong: rgba(120,170,215,.09);
  --panel: #17212c; --panel-2: #1d2936; --ink: #e5ecf2; --ink-2: #adbbc9; --ink-3: #8496a6;
  --line: #2b3846; --bleu: #7fb3dd; --bleu-vif: #6aa5d4; --bleu-soft: #1b2b3b;
  --soleil: #dda756; --soleil-soft: #32270f;
  --ok: #63b78c; --ok-soft: #1d3226; --run: #d7a44e; --run-soft: #362c17;
  --todo: #8496a6; --todo-soft: #222c37;
  --bronze: #cb905c; --silver: #9aa9b7; --gold: #d2ac4c; --serve: #66ad95;
  --code-bg: #0c141c; --code-ink: #cfdeeb;
  --shadow-card: none;
  color-scheme: dark;
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }

html { overflow-x: clip; }

body {
  margin: 0;
  overflow-x: clip;
  color: var(--ink);
  font: var(--text-base)/1.62 var(--font-body);
  background:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    linear-gradient(var(--grid-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-strong) 1px, transparent 1px),
    var(--paper);
  background-size: 8px 8px, 8px 8px, 80px 80px, 80px 80px;
}

main {
  max-width: 56.25rem;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg) var(--space-2xl);
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.022em;
  color: var(--ink);
  overflow-wrap: anywhere;
  min-width: 0;
}
h1 { font-size: var(--text-display); margin: 0 0 var(--space-md); text-wrap: balance; }
h2 { font-size: var(--text-xl); margin: var(--space-2xl) 0 var(--space-sm); }
h3 { font-size: var(--text-lg); margin: var(--space-lg) 0 var(--space-xs); }

p { margin: 0 0 var(--space-md); max-width: 68ch; }
p.lede { font-size: var(--text-md); color: var(--ink-2); max-width: 60ch; }

ul, ol { padding-left: 1.4em; }
li { margin-bottom: var(--space-2xs); }

a { color: var(--bleu); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

strong { color: var(--ink); }
small, .fine { font-size: var(--text-sm); color: var(--ink-3); }

code {
  font-family: var(--font-mono);
  font-size: .88em;
  background: var(--bleu-soft);
  padding: 1px 5px;
  border-radius: 4px;
  overflow-wrap: anywhere;
}

:focus-visible {
  outline: 2px solid var(--bleu-vif);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--panel);
  color: var(--bleu);
  padding: var(--space-xs) var(--space-md);
  z-index: 10;
}
.skip:focus-visible { left: var(--space-md); top: var(--space-xs); }

/* ---------------------------------------------------------------- masthead */
.masthead {
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 72%, transparent);
}
.masthead-inner {
  max-width: 56.25rem;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-lg) var(--space-sm);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.wordmark {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.wordmark .mark {
  display: inline-block;
  width: .62em; height: .62em;
  margin-right: .4em;
  border-radius: 50%;
  background: var(--bleu-vif);
  box-shadow: inset -0.18em -0.12em 0 0 var(--soleil-soft);
  vertical-align: baseline;
  transform: translateY(.04em);
}
.tagline {
  margin: 2px 0 0;
  font-size: var(--text-sm);
  color: var(--ink-3);
}

.theme-toggle {
  font: 600 var(--text-sm)/1 var(--font-body);
  color: var(--ink-2);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: var(--space-xs) var(--space-md);
  cursor: pointer;
  white-space: nowrap;
  min-height: 2.25rem;
  transition: border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.theme-toggle:hover { border-color: var(--bleu-vif); color: var(--bleu); }

.site-nav {
  max-width: 56.25rem;
  margin: 0 auto;
  padding: 0 var(--space-lg);
  border-top: 3px double var(--line);
}
.site-nav ul {
  list-style: none;
  margin: 0;
  padding: var(--space-xs) 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-lg);
}
.site-nav a {
  display: inline-block;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--ink-2);
  text-decoration: none;
  padding: var(--space-2xs) 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.site-nav a:hover { color: var(--bleu); }
.site-nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--soleil);
}

/* ---------------------------------------------------------------- hero */
.hero { padding-top: var(--space-xl); margin-bottom: var(--space-xl); }
.hero .badges { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-md); }

.badge {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: 650;
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-sm);
  background: var(--soleil-soft);
  color: var(--soleil);
  white-space: nowrap;
}
.badge.bleu { background: var(--bleu-soft); color: var(--bleu); }

/* ---------------------------------------------------------------- statuts */
.etat {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  vertical-align: middle;
  white-space: nowrap;
}
.etat.ok   { background: var(--ok-soft);   color: var(--ok); }
.etat.run  { background: var(--run-soft);  color: var(--run); }
.etat.todo { background: var(--todo-soft); color: var(--todo); }

.legende {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  align-items: center;
  font-size: var(--text-sm);
  color: var(--ink-2);
  margin: var(--space-md) 0 var(--space-lg);
}

/* ---------------------------------------------------------------- étapes (index) */
.flow { display: flex; flex-direction: column; }
.etape {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-lg);
  box-shadow: var(--shadow-card);
}
.etape .head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.etape h2, .etape h3 { margin: 0; font-size: var(--text-lg); }
.etape .num {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--bleu);
  background: var(--bleu-soft);
  border-radius: 50%;
  width: 1.7rem; height: 1.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.etape p { margin: var(--space-xs) 0 0; color: var(--ink-2); }

.lien-flow {
  width: 2px;
  height: 2rem;
  background: var(--line);
  margin: 0 auto;
  position: relative;
}
.lien-flow::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  width: .5rem; height: .5rem;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: translateX(-50%) rotate(45deg);
}
.lien-flow .verbe {
  position: absolute;
  left: calc(50% + 1rem);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--bleu);
}

/* ---------------------------------------------------------------- panneaux, duos, cartes */
.panneau {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-card);
  margin: var(--space-lg) 0;
}
.panneau > :first-child { margin-top: 0; }
.panneau > :last-child { margin-bottom: 0; }

.panneau.accent { border-color: var(--soleil); background: var(--soleil-soft); }
.panneau.accent, .panneau.accent p { color: var(--ink); }

.duo, .trio {
  display: grid;
  gap: var(--space-lg) var(--space-xl);
  margin: var(--space-lg) 0;
}
.duo { grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
.trio { grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }
/* rupture volontaire : split biaisé au lieu de deux colonnes égales */
.duo.biais { grid-template-columns: 3fr 2fr; align-items: start; }

/* entrée de catalogue réglée — filet en tête, posée à même le papier (pas une carte) */
.tuile {
  border-top: 1.5px solid var(--ink-3);
  padding: var(--space-sm) 0 0;
  font-size: .92rem;
  color: var(--ink-2);
  min-width: 0;
}
.tuile b, .tuile strong { display: block; color: var(--ink); margin-bottom: var(--space-2xs); }
/* variante encart : bloc teinté imbriqué dans une carte, garde sa boîte */
.tuile.soft {
  border-top: none;
  background: var(--bleu-soft);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
}
.tuile .t-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-xs); }
.tuile .t-head b { margin-bottom: 0; }
.tuile .mono { font-family: var(--font-mono); font-size: .9em; }

/* ---------------------------------------------------------------- ticket mesure (kv) */
.ticket {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  box-shadow: var(--shadow-card);
  margin: var(--space-md) 0 var(--space-lg);
}
.ticket .cap {
  font-size: var(--text-sm);
  color: var(--ink-3);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: var(--space-sm);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
.ticket .cap::before {
  content: "";
  width: .55rem; height: .55rem;
  background: var(--soleil);
  flex: none;
}
.kv {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(9.5rem, 100%), 1fr));
  gap: var(--space-xs) var(--space-lg);
}
.kv .k { font-family: var(--font-mono); font-size: .72rem; color: var(--ink-3); }
.kv .v { font-family: var(--font-mono); font-size: .85rem; color: var(--ink); overflow-wrap: anywhere; }
.kv .v em { color: var(--soleil); font-style: normal; font-weight: 600; }

/* ---------------------------------------------------------------- couches (architecture) */
.couche {
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 3px solid var(--lc, var(--line));
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-card);
}
.couche.bronze { --lc: var(--bronze); }
.couche.silver { --lc: var(--silver); }
.couche.gold   { --lc: var(--gold); }
.couche.serve  { --lc: var(--serve); }
.couche .head { display: flex; align-items: baseline; gap: var(--space-sm); flex-wrap: wrap; }
.couche .head .tag {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--lc);
  border: 1.5px solid var(--lc);
  border-radius: var(--radius-sm);
  padding: 1px 9px;
  flex: none;
}
.couche h2 { margin: 0; font-size: var(--text-lg); }
.couche > p { color: var(--ink-2); margin: var(--space-xs) 0 var(--space-sm); }
.couche ul { margin: 0; font-size: .95rem; color: var(--ink-2); }

/* ---------------------------------------------------------------- code */
.code-frame { margin: var(--space-md) 0 var(--space-lg); }
.code-frame .code-label {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-top: 1px solid var(--line);
  padding: var(--space-xs) 2px var(--space-2xs);
  display: block;
}
pre {
  background: var(--code-bg);
  color: var(--code-ink);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  overflow-x: auto;
  margin: 0;
  font-family: var(--font-mono);
  font-size: .8rem;
  line-height: 1.6;
}
pre .c { color: var(--code-com); }
pre .k { color: var(--code-key); }
pre .s { color: var(--code-str); }
pre .n { color: var(--code-num); }

/* ---------------------------------------------------------------- aparté "curieux techniques" */
details.curieux {
  margin: var(--space-md) 0 var(--space-lg);
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  background: var(--panel-2);
  padding: 0;
}
details.curieux summary {
  cursor: pointer;
  font-weight: 650;
  font-size: var(--text-sm);
  color: var(--bleu);
  padding: var(--space-sm) var(--space-md);
  list-style-position: inside;
}
details.curieux summary:hover { text-decoration: underline; }
details.curieux .corps {
  padding: 0 var(--space-md) var(--space-md);
  font-size: .92rem;
  color: var(--ink-2);
}
details.curieux .corps > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- stats (avancement) */
/* chiffre-manifeste : le « 0 écart » sort de la grille, cadré de double-filets */
.stat-hero {
  display: flex;
  align-items: baseline;
  gap: var(--space-lg) var(--space-xl);
  flex-wrap: wrap;
  border-top: 3px double var(--line);
  border-bottom: 3px double var(--line);
  padding: var(--space-lg) 0;
  margin: var(--space-lg) 0;
}
.stat-hero .v {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 13vw, 6.5rem);
  font-weight: 700;
  line-height: .85;
  letter-spacing: -.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.stat-hero .l {
  flex: 1 1 18rem;
  min-width: 0;
  font-size: var(--text-md);
  color: var(--ink-2);
  max-width: 42ch;
}
.stat-hero .l em { color: var(--soleil); font-style: normal; font-weight: 600; }

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: var(--space-sm);
  margin: var(--space-lg) 0;
}
.stat {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow-card);
  min-width: 0;
}
.stat .v {
  font-family: var(--font-display);
  font-size: var(--text-stat);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.stat .l { font-size: var(--text-sm); color: var(--ink-3); margin-top: var(--space-2xs); }

/* ---------------------------------------------------------------- jalons */
.jalons { list-style: none; margin: var(--space-md) 0 0; padding: 0; }
.jalons li {
  display: flex;
  gap: var(--space-md);
  align-items: baseline;
  padding: var(--space-sm) 0;
  border-top: 1px dashed var(--line);
  color: var(--ink-2);
}
.jalons li:first-child { border-top: 0; }
.jalons li .etat { flex: none; min-width: 5.6rem; text-align: center; }
.jalons li b { color: var(--ink); }

/* ---------------------------------------------------------------- garanties */
.garanties {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: var(--space-lg) var(--space-xl);
  margin: var(--space-lg) 0;
  padding: 0;
  list-style: none;
}
.garanties li {
  border-top: 1.5px solid var(--ink-3);
  padding: var(--space-sm) 0 0;
  font-size: .92rem;
  color: var(--ink-2);
  margin: 0;
}
.garanties li b { display: block; color: var(--ink); margin-bottom: var(--space-2xs); }

/* ---------------------------------------------------------------- navigation de fin de page */
.suite {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: var(--space-2xl) 0 0;
  border-top: 1px solid var(--line);
  padding-top: var(--space-lg);
}
.suite a {
  font-weight: 650;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: var(--space-xs) var(--space-md);
  color: var(--bleu);
  background: var(--panel);
  min-height: 2.25rem;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  transition: border-color var(--dur-short) var(--ease-out);
}
.suite a:hover { border-color: var(--bleu-vif); }
.suite a.primaire { background: var(--bleu-soft); border-color: var(--bleu-vif); }

/* ---------------------------------------------------------------- colophon */
.colophon {
  border-top: 3px double var(--line);
  margin-top: var(--space-2xl);
}
.colophon .inner {
  max-width: 56.25rem;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-lg) var(--space-xl);
  font-size: var(--text-sm);
  color: var(--ink-3);
}
.colophon p { max-width: 76ch; margin: 0 0 var(--space-xs); }
.colophon strong { color: var(--ink-2); }
.colophon a { color: var(--bleu); }

/* ---------------------------------------------------------------- tableaux */
.table-wrap { overflow-x: auto; margin: var(--space-md) 0; }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { text-align: left; padding: var(--space-xs) var(--space-sm); border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: var(--text-sm); color: var(--ink-3); font-weight: 650; }
td { color: var(--ink-2); }
td:first-child { color: var(--ink); font-weight: 600; white-space: nowrap; }

/* ---------------------------------------------------------------- responsive & divers */
@media (max-width: 40rem) {
  main { padding-inline: var(--space-md); }
  .masthead-inner, .site-nav, .colophon .inner { padding-inline: var(--space-md); }
  .lien-flow .verbe { position: static; display: block; transform: none; text-align: center; padding-top: 2.1rem; }
  .lien-flow { height: 2.6rem; margin-bottom: var(--space-xs); }
  .jalons li { flex-direction: column; gap: var(--space-2xs); }
  .duo.biais { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}