/* La feuille de la vitrine, dans la grammaire de l'application.
 *
 * ── Ce qui a changé le 6 septembre 2026, et pourquoi ─────────────────────
 * Joffrey, sur la vitrine du 20 août : « c'est trop différent » du reste. Elle
 * tournait sur le système « Industry » — Barlow Condensed en capitales, coins
 * carrés, filets d'un pixel, croix de repère aux angles, planche de
 * spécification — quand l'application est en Outfit, sur des surfaces
 * `#171825` arrondies à 13 et 18 px, des bordures à 7 % de blanc, des
 * pastilles et des barres de jalons colorées par statut. Les cinq couleurs
 * avaient été rapprochées le 21 août ; **tout le reste de la grammaire
 * divergeait**, et c'est ce qui se voyait.
 *
 * Cette feuille reprend donc la grammaire de `theme/tokens.css` et des modules
 * de l'application : mêmes couleurs, mêmes rayons, même police, mêmes
 * bordures douces, mêmes pastilles. Les maquettes animées de l'accueil sont
 * dessinées avec ces mêmes briques — une barre de jalon y est celle de
 * `roadmap.module.css`, une tuile celle de `dora.module.css`.
 *
 * ── Pourquoi des jetons sont déclarés ici, alors que `tokens.css` existe ──
 * **Cette feuille est servie seule** : `fichiersVitrine` ne prend qu'un
 * argument, et `tokens.css` ne la précède pas. Elle a donc besoin de sa propre
 * source, qui est ce fichier, et c'est aussi pourquoi elle déclare elle-même
 * le schéma des contrôles natifs sur sa racine.
 *
 * Les jetons portent le préfixe `--color-` / `--space-` / `--radius-`, et la
 * règle, tenue en relecture, est : **aucune couleur hors de `:root`, aucun
 * rayon ni rythme en pixels nus**. Les mélanges
 * que l'application écrit en `color-mix()` sont ici **précalculés en
 * hexadécimal** — la garde de contraste ne sait lire que ça, et un mélange
 * qu'elle ne lit pas est un contraste qu'elle ne prouve pas.
 *
 * ── Deux préfixes dans les maquettes, et ce qu'ils promettent ─────────────
 * `.mq-…` est un bloc **muet** — barre, pastille, squelette, filet — qui ne
 * porte jamais de texte : il peut peindre un fond sans déclarer d'encre.
 * `.mt-…` écrit un mot ; il déclare son encre, et elle est mesurée. Voir
 * `maquettes.ts`.
 *
 * ── Tout mouvement est du CSS, et il s'arrête sur demande ─────────────────
 * La CSP est `default-src 'self'`, sans script ni style en ligne : les
 * animations sont des `@keyframes`, l'apparition au défilement passe par
 * `animation-timeline: view()` là où le navigateur le sait, et
 * `prefers-reduced-motion: reduce` coupe tout. **Le style de base de chaque
 * élément animé est son état FINAL** : sans animation, la page montre les
 * écrans finis, pas des barres à zéro.
 *
 * ── Aucune origine externe ────────────────────────────────────────────────
 * Outfit est vendue avec le dépôt (OFL) sous `web/public/polices/`, que Vite
 * copie vers `api/static/`, d'où l'adresse `/polices/…`. Une police servie par
 * Google serait bloquée **en silence**, avec un repli typographique que rien
 * ne signalerait — aucune garde ne refuse plus une origine externe, c'est à la
 * relecture de le faire.
 */

/* ══════════════════════════════════════════════════════════════════════════
 * La police de l'application, vendue et servie depuis notre origine
 * ══════════════════════════════════════════════════════════════════════════
 * Sous-ensemble **latin** seul, `unicode-range` recopié de `@fontsource/outfit`.
 * Trois graisses, celles que l'application compose : 400, 600, 700. La flèche
 * « → » des touches n'y est pas ; elle vient de la pile système, et c'est le
 * seul glyphe qui en vienne. */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/polices/outfit-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/polices/outfit-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/polices/outfit-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ══════════════════════════════════════════════════════════════════════════
 * Les jetons — ceux de l'application, sous les noms que les gardes lisent
 * ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Les contrôles natifs et la barre de défilement se rendent dans le schéma
     CLAIR par défaut du navigateur tant qu'on ne lui dit pas le contraire.
     `dark` seul et non `light dark` : la vitrine n'a qu'un thème. */
  color-scheme: dark;

  /* ── Les couleurs de `theme/tokens.css`, recopiées sans retouche ── */
  --color-bg: #0f1017;
  --color-surface: #171825;
  --color-surface-2: #1a1b26;
  --color-text: #e8e9f1;
  --color-text-soft: #c6c8da;
  --color-muted: #8f92ab;
  --color-border: rgba(255, 255, 255, 0.07);
  --color-border-strong: rgba(255, 255, 255, 0.22);
  --color-accent: #8b8cf8;
  --color-accent-2: #c58bf2;
  --color-accent-soft: rgba(139, 140, 248, 0.25);
  --color-st-done: #7fdcc3;
  --color-st-active: #8b8cf8;
  --color-st-upcoming: #6b6e8a;
  --color-st-risk: #ffb98a;
  --color-sur-teinte: #0b0d12;

  /* ── La rampe de violet, en OKLCH sur neuf crans (H 281,1). Le 500 EST
   * `--color-accent`, au bit près ; 600 et 700 sont les états de survol et
   * de pression du bouton plein, comme depuis le 21 août. ── */
  --color-accent-100: #0e003d;
  --color-accent-200: #291479;
  --color-accent-300: #453ea2;
  --color-accent-400: #6764cc;
  --color-accent-500: #8b8cf8; /* 6,51 sur fond — tient le texte courant */
  --color-accent-600: #9fa3ff; /* 8,27 — survol */
  --color-accent-700: #b6baff; /* 10,35 — pressé */
  --color-accent-800: #cdd1ff;
  --color-accent-900: #e5e8ff;

  /* ── La rampe d'encre (H 280,5, chroma 0,011). Le 900 EST `--color-text`. ── */
  --color-ink-100: #101015;
  --color-ink-200: #2d2e34;
  --color-ink-300: #4f5056;
  --color-ink-400: #73747b; /* 4,08 — le trait d'un contrôle */
  --color-ink-500: #999aa1;
  --color-ink-600: #acadb5;
  --color-ink-700: #c0c1c8;
  --color-ink-800: #d4d5dd;
  --color-ink-900: #e8e9f1;

  /* ── Rôles ── */
  --color-accent-text: var(--color-accent-500);
  /* Du blanc sur l'aplat d'accent ne ferait que 2,91:1. Le fond de la page
     posé dessus en fait 6,51, et le contraste ne fait que monter dans les
     états du bouton (8,27 au survol, 10,35 pressé). */
  --color-on-accent: var(--color-bg);
  /* Le trait d'un CONTRÔLE — bouton fantôme, champ. 4,08:1 sur le fond : un
     contrôle doit se distinguer à 3:1 (WCAG 1.4.11), et `--color-border`, à
     7 % de blanc, ne le peut pas. Les bordures des cartes et des maquettes,
     elles, sont décoratives : la surface qu'elles cernent se voit sans elles,
     et elles gardent la douceur de l'application. */
  --color-trait: var(--color-ink-400);

  /* ── Les mélanges que l'application écrit en `color-mix()`, précalculés ──
   * Chaque valeur est le résultat exact du mélange nommé, en sRGB, sur la
   * couleur que l'application donne. Ils sont hexadécimaux pour que la garde
   * de contraste les lise : `#a8a9fa` est `accent 75 %, blanc`, etc. */
  --color-accent-blanc-75: #a8a9fa; /* la pastille « bêta » */
  --color-accent-blanc-55: #bfc0fb; /* le segment actif, l'entrée de nav allumée */
  --color-accent-14: rgba(139, 140, 248, 0.14); /* le fond de la pastille */
  --color-accent-12: rgba(139, 140, 248, 0.12); /* le dégradé de la page */
  --color-accent-28: rgba(139, 140, 248, 0.28); /* la barre « en cours », premier arrêt */
  --color-accent-30: rgba(139, 140, 248, 0.3); /* l'ombre d'une barre survolée */
  --color-accent-35: rgba(139, 140, 248, 0.35); /* la sélection */
  --color-accent-65: rgba(139, 140, 248, 0.65); /* la bordure de la barre « en cours » */
  --color-accent-2-22: rgba(197, 139, 242, 0.22); /* la barre « en cours », second arrêt */
  --color-done-14: rgba(127, 220, 195, 0.14);
  --color-done-40: rgba(127, 220, 195, 0.4);
  --color-done-texte: #96dfcd; /* done 78 %, texte */
  --color-active-texte: #bebff4; /* accent 45 %, texte */
  --color-risk-14: rgba(255, 185, 138, 0.14);
  --color-risk-50: rgba(255, 185, 138, 0.5);
  --color-risk-texte: #fac39f; /* risk 80 %, texte */
  --color-blanc-02: rgba(255, 255, 255, 0.02);
  --color-blanc-04: rgba(255, 255, 255, 0.04);
  --color-blanc-05: rgba(255, 255, 255, 0.05);
  --color-blanc-08: rgba(255, 255, 255, 0.08);
  --color-blanc-12: rgba(255, 255, 255, 0.12);
  --color-ombre: rgba(0, 0, 0, 0.45);
  --color-ombre-forte: rgba(0, 0, 0, 0.5);
  /* Les teintes engendrées par `couleurDe` pour les avatars, les lanes et les
     étiquettes — quatre échantillons de la palette de `palette.ts`, pour que
     les maquettes aient les couleurs que l'écran aurait. */
  --color-teinte-1: #7cc4fa;
  --color-teinte-2: #f5a3c7;
  --color-teinte-3: #b8e986;
  --color-teinte-4: #ffd27a;
  --color-teinte-5: #c58bf2;

  /* ── Typographie : Outfit, comme `theme/global.css` ── */
  --font-sans: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* ── Espacement, sur la grille de 4 px de l'application ── */
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-3-5: 14px;
  --space-4: 16px;
  --space-4-5: 18px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ── Rayons : ceux de l'application. 13 est `--radius`, 18 `--radius-lg`,
   * 11 le segment et la pastille d'organisation, 8 la bascule, 3 le point de
   * lane, 999 la pastille « bêta ». ── */
  --radius-xs: 3px;
  --radius-sm: 8px;
  --radius-md: 11px;
  --radius-lg: 13px;
  --radius-xl: 18px;
  --radius-full: 999px;

  /* ── Ombres : celle de la carte de connexion, celle d'une barre saisie ── */
  --shadow-carte: 0 18px 50px var(--color-ombre);
  --shadow-saisie: 0 10px 28px var(--color-ombre-forte);
  --shadow-survol: 0 8px 22px var(--color-accent-30);

  --gouttiere: var(--space-5);
  --largeur-max: 72rem;
  /* La mesure de la prose : 68 signes, en `ch` pour suivre la police. */
  --mesure: 68ch;
}

/* ══════════════════════════════════════════════════════════════════════════
 * Socle
 * ══════════════════════════════════════════════════════════════════════════ */

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

html {
  background: var(--color-bg);
  font-size: 100%;
}

body {
  margin: 0;
  /* Le même dégradé que `theme/tokens.css` (`--degrade-page`) : un halo
     d'accent à 12 % en haut à droite, sur le fond. */
  background: radial-gradient(1200px 600px at 70% -10%, var(--color-accent-12), transparent), var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}

::selection {
  background: var(--color-accent-35);
  color: var(--color-text);
}

img,
svg {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--color-accent-text);
  text-decoration-color: var(--color-accent-400);
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--color-accent-600);
  text-decoration-color: currentcolor;
}

a:active {
  color: var(--color-accent-700);
}

/* Le même anneau de focus que `theme/global.css`. */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

section {
  margin-block: var(--space-9) 0;
}

section:first-of-type {
  margin-block-start: var(--space-7);
}

h1,
h2,
h3 {
  margin: 0 0 var(--space-3);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

h1 {
  font-size: clamp(2.125rem, 1.4rem + 2.8vw, 3.25rem);
}

h2 {
  font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.125rem);
}

h3 {
  font-size: 1.125rem;
  font-weight: 600;
}

p + h3 {
  margin-block-start: var(--space-5);
}

p {
  margin: 0 0 var(--space-3);
  color: var(--color-text-soft);
}

p:last-child {
  margin-bottom: 0;
}

ul,
ol {
  margin: 0 0 var(--space-3);
  padding-inline-start: var(--space-5);
  color: var(--color-text-soft);
}

li {
  margin-block: var(--space-1);
}

li::marker {
  color: var(--color-accent-text);
}

/* ══════════════════════════════════════════════════════════════════════════
 * La largeur utile
 * ══════════════════════════════════════════════════════════════════════════ */

.wrap {
  width: min(var(--largeur-max), 100% - 2 * var(--gouttiere));
  margin-inline: auto;
}

/* ══════════════════════════════════════════════════════════════════════════
 * La barre du haut — celle de `shell.module.css`
 * ══════════════════════════════════════════════════════════════════════════ */

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  width: min(var(--largeur-max), 100% - 2 * var(--gouttiere));
  margin-inline: auto;
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.nav nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-inline-start: auto;
}

/* La marque, avec le logo de l'application devant — celui de la barre
   latérale (`favicon.svg`), posé en pseudo-élément pour que le balisage
   n'ait pas à changer. */
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2-5);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--color-text);
  text-decoration: none;
}

.nav-brand::before {
  content: '';
  display: block;
  width: 28px;
  height: 28px;
  background: url(/favicon.svg) center / contain no-repeat;
  color: inherit;
}

.nav-brand:hover {
  color: var(--color-accent-600);
}

.nav-brand:active {
  color: var(--color-accent-700);
}

.nav a:not(.nav-brand):not(.btn) {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-muted);
  text-decoration: none;
}

.nav a:not(.nav-brand):not(.btn):hover {
  color: var(--color-text);
}

.nav a:not(.nav-brand):not(.btn):active {
  color: var(--color-accent-700);
}

/* Le sélecteur de langue : un segment, comme `.segment` de l'en-tête. */
.langue {
  padding: var(--space-1-5) var(--space-3);
  border: 1px solid var(--color-trait);
  border-radius: var(--radius-sm);
}

/* ══════════════════════════════════════════════════════════════════════════
 * Les boutons — ceux de l'application
 * ══════════════════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--space-2-5) var(--space-4-5);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s;
}

/* Le plein, unique par vue. `color` est redéclaré dans les deux états : la
   garde de contraste mesure chaque règle à part. */
.btn-primary {
  background: var(--color-accent-500);
  border-color: var(--color-accent-500);
  color: var(--color-on-accent);
}

.btn-primary:hover {
  background: var(--color-accent-600);
  border-color: var(--color-accent-600);
  color: var(--color-on-accent);
  box-shadow: var(--shadow-survol);
}

.btn-primary:active {
  background: var(--color-accent-700);
  border-color: var(--color-accent-700);
  color: var(--color-on-accent);
  transform: translateY(1px);
}

.btn-ghost {
  background: var(--color-blanc-05);
  border-color: var(--color-trait);
  color: var(--color-text);
}

.btn-ghost:hover {
  background: var(--color-accent-soft);
  color: var(--color-text);
}

.btn-ghost:active {
  background: var(--color-accent-soft);
  color: var(--color-accent-700);
}

/* ══════════════════════════════════════════════════════════════════════════
 * L'accroche
 * ══════════════════════════════════════════════════════════════════════════ */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: var(--space-7) var(--space-8);
}

.hero-copy {
  min-width: 0;
}

.display {
  margin: 0;
  max-width: 18ch;
  line-height: 1.05;
}

.line {
  display: block;
}

.sub {
  max-width: 48ch;
  margin-block: var(--space-5) 0;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--color-text-soft);
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-6);
}

.hero-figure {
  min-width: 0;
  /* Le conteneur de requête, c'est le CADRE et non la fenêtre : les unités
     `cqi` d'un élément se résolvent contre son plus proche ANCÊTRE conteneur,
     jamais contre lui-même. Posé sur `.fenetre`, `grid-template-columns:
     24cqi` se mesurait contre la fenêtre du navigateur — une barre latérale
     de 307 px dans une maquette de 590, mesuré au navigateur le 6 septembre. */
  container-type: inline-size;
}

/* ══════════════════════════════════════════════════════════════════════════
 * Les étiquettes de section
 * ══════════════════════════════════════════════════════════════════════════ */

/* Le numéro de section, dans la pastille de la barre latérale (`.badge`). */
.kicker {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: var(--space-0-5) var(--space-2-5);
  border-radius: var(--radius-full);
  background: var(--color-accent-14);
  color: var(--color-accent-blanc-75);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

/* Le nom de l'écran où la fonction vit, à côté du numéro. */
.ecran-tag {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: var(--space-0-5) var(--space-2-5);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  color: var(--color-text-soft);
  font-size: 0.75rem;
  font-weight: 600;
}

.chap-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-block-end: var(--space-4);
}

.texte .kicker,
.chiffres .kicker {
  margin-block-end: var(--space-4);
}

/* ══════════════════════════════════════════════════════════════════════════
 * Les chapitres
 * ══════════════════════════════════════════════════════════════════════════ */

.chapitre {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-6) var(--space-8);
}

/* Un chapitre sur deux pose sa fenêtre à gauche : l'œil alterne, et la page
   ne se lit pas comme un tableau. */
.chapitre:nth-of-type(even) .chap-figure {
  order: -1;
}

.chap-copy {
  min-width: 0;
  max-width: var(--mesure);
}

.chap-figure {
  min-width: 0;
  container-type: inline-size;
}

.accroche {
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--color-text-soft);
}

.liste-titre {
  margin-block: var(--space-5) var(--space-2);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* Les étapes : numérotées dans une pastille, comme les compteurs du board. */
.etapes {
  list-style: none;
  counter-reset: etape;
  margin: 0;
  padding: 0;
}

.etapes li {
  position: relative;
  counter-increment: etape;
  margin: 0 0 var(--space-2);
  padding-inline-start: var(--space-7);
  min-height: 28px;
  color: var(--color-text-soft);
}

.etapes li::before {
  content: counter(etape);
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-accent-soft);
  color: var(--color-text);
  font-size: 0.8125rem;
  font-weight: 700;
}

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

.gains li {
  position: relative;
  margin: 0 0 var(--space-2);
  padding-inline-start: var(--space-5);
  color: var(--color-text-soft);
}

/* Le point de statut « terminé » devant chaque gain. */
.gains li::before {
  content: '';
  position: absolute;
  inset-inline-start: var(--space-1);
  top: 0.55em;
  width: 9px;
  height: 9px;
  border-radius: var(--radius-xs);
  background: var(--color-st-done);
  color: inherit;
}

/* ══════════════════════════════════════════════════════════════════════════
 * Les chiffres prouvés — les tuiles de l'écran Métriques
 * ══════════════════════════════════════════════════════════════════════════ */

.tuiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
}

.tuile {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
  min-width: 0;
  padding: var(--space-4) var(--space-4-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text);
}

.tuile-num {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-accent-text);
}

.tuile-val {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text);
}

.tuile-prop {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-soft);
}

.tuile-rem {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-muted);
}

.chiffres-note {
  margin-block-start: var(--space-4);
  font-size: 0.875rem;
  color: var(--color-muted);
}

/* ══════════════════════════════════════════════════════════════════════════
 * Les sections de texte — la clôture, les tarifs, les pages légales
 * ══════════════════════════════════════════════════════════════════════════ */

.texte {
  display: block;
}

.texte > * {
  max-width: var(--mesure);
}

.texte > .cartes {
  max-width: none;
}

.cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3);
  margin-block: var(--space-4);
}

/* Une carte, sur la surface de l'application. */
.carte {
  padding: var(--space-4-5) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  color: var(--color-text);
}

.carte h3 {
  margin-block-end: var(--space-2);
}

/* ══════════════════════════════════════════════════════════════════════════
 * Le pied de page — celui de `shell.module.css`
 * ══════════════════════════════════════════════════════════════════════════ */

footer {
  margin-block-start: var(--space-9);
  padding-block-end: var(--space-8);
}

footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  padding-block-start: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: 0.8125rem;
}

footer a {
  color: var(--color-muted);
  text-decoration: none;
}

footer a:hover {
  color: var(--color-text);
}

/* ══════════════════════════════════════════════════════════════════════════
 * La fenêtre : l'application dessinée avec ses propres briques
 * ══════════════════════════════════════════════════════════════════════════
 * Toutes les dimensions intérieures sont en `cqi` — un pour cent de la
 * largeur de la fenêtre — pour que le dessin se réduise avec elle, de la
 * colonne d'un chapitre au téléphone, sans jamais déborder. Les paddings, eux,
 * restent des jetons : c'est la règle de cette feuille, et 4 px restent 4 px. */

.fenetre {
  position: relative;
  display: grid;
  grid-template-columns: 24cqi 1fr;
  aspect-ratio: 16 / 10;
  width: 100%;
  overflow: hidden;
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-carte);
  color: var(--color-text);
  font-size: 0.75rem;
  line-height: 1.3;
}

/* ── La barre latérale de `sidebar.module.css` ── */
.mq-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-2-5) var(--space-2);
  border-right: 1px solid var(--color-border);
  background: var(--color-surface);
}

.mt-marque {
  display: flex;
  align-items: center;
  gap: 1.2cqi;
  min-width: 0;
  font-weight: 700;
  font-size: 2.4cqi;
  color: var(--color-text);
  white-space: nowrap;
}

.mq-logo {
  width: 3.6cqi;
  height: 3.6cqi;
  flex: none;
  background: url(/favicon.svg) center / contain no-repeat;
}

.mt-beta {
  padding: 0 var(--space-1);
  border-radius: var(--radius-full);
  background: var(--color-accent-14);
  color: var(--color-accent-blanc-75);
  font-size: 1.5cqi;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mq-org {
  display: flex;
  align-items: center;
  gap: 1.2cqi;
  min-width: 0;
}

.mq-org-pastille {
  width: 4cqi;
  height: 4cqi;
  flex: none;
  border-radius: var(--radius-xs);
  background: var(--color-teinte-1);
}

.mq-org-nom {
  height: 1.6cqi;
  width: 60%;
  border-radius: var(--radius-full);
  background: var(--color-blanc-12);
}

.mq-nav {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  margin: 0;
  padding: 0;
}

.mt-nav {
  display: flex;
  align-items: center;
  gap: 1.2cqi;
  margin: 0;
  padding: var(--space-1) var(--space-1-5);
  border-radius: var(--radius-sm);
  color: var(--color-muted);
  font-size: 1.9cqi;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* L'écran courant, allumé comme `.segOn`. */
.mt-nav.on {
  background: var(--color-accent-soft);
  color: var(--color-accent-blanc-55);
}

.mq-icone {
  width: 2.2cqi;
  height: 2.2cqi;
  flex: none;
  border-radius: var(--radius-xs);
  background: var(--color-blanc-12);
}

.mt-nav.on .mq-icone {
  background: var(--color-accent-blanc-55);
}

/* ── L'écran ── */
.mq-ecran {
  position: relative;
  min-width: 0;
  padding: var(--space-2-5) var(--space-3);
  overflow: hidden;
}

/* ── Les briques communes ── */

/* La barre d'outils : le segment de vues et un bouton. */
.mq-outils {
  display: flex;
  align-items: center;
  gap: var(--space-0-5);
  margin-block-end: var(--space-2);
}

.mq-seg {
  height: 3.2cqi;
  width: 8cqi;
  border-radius: var(--radius-xs);
  background: var(--color-blanc-05);
}

.mq-seg.on {
  background: var(--color-accent-soft);
}

.mq-bouton {
  height: 3.2cqi;
  width: 12cqi;
  margin-inline-start: auto;
  border-radius: var(--radius-xs);
  background: var(--color-accent-500);
}

.mq-filtre {
  height: 3.2cqi;
  width: 14cqi;
  margin-inline-start: auto;
  border-radius: var(--radius-xs);
  border: 1px solid var(--color-border-strong);
}

/* L'axe de temps : quatre mois. */
.mq-axe {
  display: flex;
  gap: 0;
  margin-block-end: var(--space-1);
  padding-inline-start: 18cqi;
}

.mq-mois {
  flex: 1;
  height: 1.4cqi;
  border-inline-start: 1px solid var(--color-border-strong);
}

.mq-mois::before {
  content: '';
  display: block;
  width: 35%;
  height: 100%;
  margin-inline-start: var(--space-1);
  border-radius: var(--radius-full);
  background: var(--color-blanc-12);
  color: inherit;
}

/* Le point de lane (`.laneDot`) et le point de colonne (`.dot`). */
.mq-dot {
  width: 1.6cqi;
  height: 1.6cqi;
  flex: none;
  border-radius: var(--radius-xs);
  background: var(--color-st-upcoming);
}

.mq-dot.t1 {
  background: var(--color-teinte-1);
}

.mq-dot.t2 {
  background: var(--color-teinte-2);
}

.mq-dot.t3 {
  background: var(--color-teinte-3);
}

.mq-dot.todo {
  background: var(--color-st-upcoming);
}

.mq-dot.doing {
  background: var(--color-accent);
}

.mq-dot.review {
  background: var(--color-accent-2);
}

.mq-dot.done {
  background: var(--color-st-done);
}

/* Une ligne de texte muette. */
.mq-ligne {
  display: block;
  height: 1.6cqi;
  width: 70%;
  border-radius: var(--radius-full);
  background: var(--color-blanc-12);
}

.mq-ligne.courte {
  width: 45%;
}

.mq-titre {
  display: block;
  height: 2.2cqi;
  width: 34%;
  margin-block-end: var(--space-1-5);
  border-radius: var(--radius-full);
  background: var(--color-blanc-12);
}

.mq-periode {
  display: block;
  height: 1.4cqi;
  width: 22%;
  margin-block-end: var(--space-1-5);
  border-radius: var(--radius-full);
  background: var(--color-blanc-08);
}

/* Une étiquette (`TagChip`). */
.mq-chip {
  display: inline-block;
  height: 2cqi;
  width: 7cqi;
  border-radius: var(--radius-full);
  background: var(--color-teinte-1);
}

.mq-chip.t1 {
  background: var(--color-teinte-1);
}

.mq-chip.t2 {
  background: var(--color-teinte-2);
}

.mq-chip.t3 {
  background: var(--color-teinte-3);
}

.mq-chip.t4 {
  background: var(--color-teinte-4);
}

.mq-chip.t5 {
  background: var(--color-teinte-5);
}

/* Un avatar (`AvatarBadge`). */
.mq-avatar {
  width: 3.4cqi;
  height: 3.4cqi;
  flex: none;
  border-radius: var(--radius-full);
  background: var(--color-teinte-1);
}

.mq-avatar.a1 {
  background: var(--color-teinte-1);
}

.mq-avatar.a2 {
  background: var(--color-teinte-2);
}

.mq-avatar.a3 {
  background: var(--color-teinte-3);
}

.mq-avatar.a4 {
  background: var(--color-teinte-4);
}

/* La ligne du jour (`.today`) — accent-2, comme dans l'application. */
.mq-today {
  position: absolute;
  top: 10.2cqi;
  bottom: 3cqi;
  left: calc(18cqi + 33% - 6cqi);
  width: 0;
  border-left: 1.5px solid var(--color-accent-2);
  transform-origin: top;
}

.mt-today {
  position: absolute;
  top: -0.4cqi;
  left: 1cqi;
  font-size: 1.5cqi;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-2);
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════
 * La roadmap — `roadmap.module.css`
 * ══════════════════════════════════════════════════════════════════════════ */

.mq-lanes {
  display: flex;
  flex-direction: column;
  /* La place du mot « Aujourd'hui », entre l'axe et la première lane — comme
     dans l'application, où la ligne du jour commence au-dessus des lanes. */
  padding-block-start: var(--space-3);
}

.mq-lane {
  display: grid;
  grid-template-columns: 18cqi 1fr;
  min-height: 12cqi;
  border-top: 1px solid var(--color-border);
}

.mt-lane {
  display: flex;
  align-items: flex-start;
  gap: 1.2cqi;
  padding-block: var(--space-2);
  font-size: 2cqi;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mt-lane .mq-dot {
  margin-block-start: 0.5cqi;
}

.mq-piste {
  position: relative;
  min-width: 0;
}

/* La barre de jalon (`.bar`) : nom, puis progression. */
.mq-bar {
  position: absolute;
  top: 2.2cqi;
  height: 7.4cqi;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.8cqi;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  overflow: hidden;
  white-space: nowrap;
}

.mt-nom {
  font-size: 1.9cqi;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--color-text);
}

.mq-prog {
  display: block;
  height: 0.8cqi;
  width: 100%;
  border-radius: var(--radius-full);
  background: var(--color-blanc-12);
  overflow: hidden;
}

.mq-prog::after {
  content: '';
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--radius-full);
  background: currentcolor;
  color: inherit;
}

.mq-prog.p0::after {
  width: 0;
}

.mq-prog.p35::after {
  width: 35%;
}

.mq-prog.p67::after {
  width: 67%;
}

.mq-prog.p100::after {
  width: 100%;
}

/* Les quatre statuts, aux couleurs exactes de `roadmap.module.css`. */
.mq-bar.st-active {
  background: linear-gradient(135deg, var(--color-accent-28), var(--color-accent-2-22));
  border: 1px solid var(--color-accent-65);
  color: var(--color-active-texte);
}

.mq-bar.st-done {
  background: var(--color-done-14);
  border: 1px solid var(--color-done-40);
  color: var(--color-done-texte);
}

.mq-bar.st-upcoming {
  background: var(--color-blanc-02);
  border: 1.5px dashed var(--color-border-strong);
  color: var(--color-text-soft);
}

.mq-bar.st-risk {
  background: var(--color-risk-14);
  border: 1px solid var(--color-risk-50);
  color: var(--color-risk-texte);
}

.st-active .mt-nom {
  color: var(--color-active-texte);
}

.st-done .mt-nom {
  color: var(--color-done-texte);
}

.st-upcoming .mt-nom {
  color: var(--color-text-soft);
}

.st-risk .mt-nom {
  color: var(--color-risk-texte);
}

/* Les places des quatre jalons, en pour cent de la piste. */
.mq-bar.b1 {
  left: 6%;
  width: 44%;
}

.mq-bar.b2 {
  left: 2%;
  width: 40%;
}

.mq-bar.b3 {
  left: 30%;
  width: 34%;
}

.mq-bar.b4 {
  left: 66%;
  width: 30%;
}

/* La barre fantôme (`.fantome`) : sous la barre, tiretée, pointeur inerte. */
.mq-fantome {
  position: absolute;
  bottom: 0.4cqi;
  height: 1.6cqi;
  border: 1px dashed var(--color-muted);
  border-radius: var(--radius-xs);
  background: var(--color-blanc-05);
}

.mq-fantome.f1 {
  left: 6%;
  width: 40%;
}

.mq-fantome.f2 {
  left: 2%;
  width: 40%;
}

.mq-fantome.f3 {
  left: 22%;
  width: 34%;
}

.mq-fantome.f4 {
  left: 60%;
  width: 30%;
}

/* ══════════════════════════════════════════════════════════════════════════
 * Le board — `board.module.css`
 * ══════════════════════════════════════════════════════════════════════════ */

.mq-colonnes {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-1-5);
}

.mq-col {
  min-width: 0;
  background: var(--color-blanc-02);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.mt-col {
  display: flex;
  align-items: center;
  gap: 1cqi;
  padding: var(--space-1-5) var(--space-1-5);
  font-size: 1.8cqi;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
}

.mq-nombre {
  width: 2.6cqi;
  height: 2cqi;
  margin-inline-start: auto;
  flex: none;
  border-radius: var(--radius-full);
  background: var(--color-blanc-12);
}

.mq-cartes {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
  min-height: 30cqi;
  padding: 0 var(--space-1-5) var(--space-1-5);
}

/* La place réservée à la carte qui voyage : la première de chaque colonne. */
.mq-cartes::before {
  content: '';
  display: block;
  height: 10.4cqi;
  flex: none;
}

.mq-card {
  display: flex;
  flex-direction: column;
  gap: 0.9cqi;
  padding: var(--space-1-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.mq-ref {
  display: block;
  height: 1.3cqi;
  width: 28%;
  border-radius: var(--radius-full);
  background: var(--color-accent-soft);
}

.mq-tags {
  display: flex;
  gap: 0.6cqi;
}

.mq-card .mq-chip {
  height: 1.5cqi;
  width: 5cqi;
}

/* Les cinq cartes posées, et celle qui traverse le flux. */
.mq-card.c1,
.mq-card.c2,
.mq-card.c3,
.mq-card.c4,
.mq-card.c5 {
  flex: none;
}

.mq-card.mq-mobile {
  position: absolute;
  top: 7.4cqi;
  left: 1.2%;
  width: calc(25% - 1cqi);
  box-shadow: var(--shadow-saisie);
  border-color: var(--color-accent-65);
}

/* ══════════════════════════════════════════════════════════════════════════
 * L'arbre — `tree`
 * ══════════════════════════════════════════════════════════════════════════ */

.mq-arbre {
  display: flex;
  flex-direction: column;
}

.mq-rang {
  display: flex;
  align-items: center;
  gap: 1.2cqi;
  height: 5.2cqi;
  border-top: 1px solid var(--color-border);
}

.mq-rang.n0 {
  padding-inline-start: 0;
}

.mq-rang.n1 {
  padding-inline-start: var(--space-4);
}

.mq-rang.n2 {
  padding-inline-start: var(--space-6);
}

.mq-rang.n3 {
  padding-inline-start: var(--space-7);
}

.mq-rang.n0 .mq-ligne {
  width: 30%;
  background: var(--color-text-soft);
}

.mq-rang.n1 .mq-ligne {
  width: 42%;
}

.mq-rang.n2 .mq-ligne,
.mq-rang.n3 .mq-ligne {
  width: 36%;
  background: var(--color-blanc-08);
}

.mq-rang.n3 .mq-dot {
  width: 1.1cqi;
  height: 1.1cqi;
}

.mq-chevron {
  width: 1.4cqi;
  height: 1.4cqi;
  flex: none;
  border-right: 1.5px solid var(--color-muted);
  border-bottom: 1.5px solid var(--color-muted);
  transform: rotate(-45deg);
  transform-origin: center;
}

.mq-rang.ouvre {
  background: var(--color-blanc-02);
}

.mq-rang.ouvre .mq-chevron {
  transform: rotate(45deg);
}

.mq-rang.n3 .mq-chevron {
  visibility: hidden;
}

.mq-etat {
  width: 8cqi;
  height: 2.2cqi;
  margin-inline-start: auto;
  border-radius: var(--radius-full);
  background: var(--color-done-14);
  border: 1px solid var(--color-done-40);
}

.mq-enfants {
  height: 15.6cqi;
  overflow: hidden;
  transform-origin: top;
}

/* ══════════════════════════════════════════════════════════════════════════
 * Le Gantt — `gantt.module.css`
 * ══════════════════════════════════════════════════════════════════════════ */

.mq-gantt {
  position: relative;
  display: flex;
  flex-direction: column;
}

.mq-gantt .mq-today {
  top: 0;
  bottom: 0;
}

.mq-grow {
  display: grid;
  grid-template-columns: 18cqi 1fr;
  align-items: center;
  height: 9cqi;
  border-top: 1px solid var(--color-border);
}

.mq-etiquette {
  display: block;
  height: 1.8cqi;
  width: 70%;
  border-radius: var(--radius-full);
  background: var(--color-blanc-12);
}

.mq-track {
  position: relative;
  height: 100%;
  min-width: 0;
}

/* La barre du Gantt (`.barre`) et le losange (`.losange`). */
.mq-gbar {
  position: absolute;
  top: 2.4cqi;
  height: 4.2cqi;
  border-radius: var(--radius-xs);
  background: var(--color-accent-soft);
  border: 1px solid var(--color-accent-65);
  transform-origin: left;
}

.mq-gbar.g1 {
  left: 4%;
  width: 26%;
}

.mq-gbar.g2 {
  left: 30%;
  width: 32%;
}

.mq-gbar.g4 {
  left: 40%;
  width: 26%;
}

.mq-gbar.g5 {
  left: 48%;
  width: 34%;
}

.mq-losange {
  position: absolute;
  top: 3cqi;
  left: 62%;
  width: 3cqi;
  height: 3cqi;
  background: var(--color-accent-2);
  transform: rotate(45deg);
}

.mq-losange.g3 {
  left: 66%;
}

.mq-fleches {
  position: absolute;
  inset: 0 0 0 18cqi;
  width: calc(100% - 18cqi);
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.mq-fleche {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 200;
  stroke-dashoffset: 0;
}

.mq-fleche.tenue {
  stroke: var(--color-accent);
}

.mq-fleche.violee {
  stroke: var(--color-st-risk);
}

/* ══════════════════════════════════════════════════════════════════════════
 * L'activité — `activite.module.css`
 * ══════════════════════════════════════════════════════════════════════════ */

.mq-groupe {
  margin-block-end: var(--space-3);
}

.mq-liste {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.mq-item {
  display: flex;
  align-items: center;
  gap: 1.4cqi;
  padding: var(--space-1-5) var(--space-2);
  border-top: 1px solid var(--color-border);
}

.mq-item:first-child {
  border-top: 0;
}

.mq-heure {
  width: 6cqi;
  height: 1.5cqi;
  flex: none;
  border-radius: var(--radius-full);
  background: var(--color-blanc-08);
}

.mq-phrase {
  display: block;
  flex: 1;
  height: 1.7cqi;
  border-radius: var(--radius-full);
  background: var(--color-blanc-12);
}

.mq-item.i1 .mq-phrase {
  width: 80%;
  flex: none;
}

.mq-item.i2 .mq-phrase {
  width: 62%;
  flex: none;
}

.mq-item.i3 .mq-phrase {
  width: 70%;
  flex: none;
}

.mq-item.i4 .mq-phrase {
  width: 55%;
  flex: none;
}

.mq-item.i5 .mq-phrase {
  width: 74%;
  flex: none;
}

/* ══════════════════════════════════════════════════════════════════════════
 * Le suivi — `suivi.module.css`, `tendance.module.css`, `instantane`
 * ══════════════════════════════════════════════════════════════════════════ */

.mq-choix {
  margin-block-end: var(--space-2);
}

.mq-select {
  display: block;
  height: 3.6cqi;
  width: 50%;
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
}

.mq-jauge {
  position: relative;
  height: 2.2cqi;
  margin-block-end: var(--space-2);
}

.mq-jauge-fond {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
  background: var(--color-blanc-08);
}

.mq-jauge-plein {
  position: absolute;
  inset: 0 auto 0 0;
  width: 67%;
  border-radius: var(--radius-full);
  background: var(--color-accent-500);
  transform-origin: left;
}

.mq-chiffres {
  display: flex;
  gap: var(--space-2);
  margin-block-end: var(--space-2);
}

.mq-chiffre {
  flex: 1;
  height: 6cqi;
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.mq-tendance {
  height: 14cqi;
  margin-block-end: var(--space-2);
  padding: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
}

.mq-tendance svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.mq-courbe {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 400;
  stroke-dashoffset: 0;
}

/* La dérive : la barre du jour, la fantôme de la référence, et l'écart. */
.mq-derive {
  position: relative;
  height: 10cqi;
  margin-block-end: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.mq-derive .mq-bar.d1 {
  top: 1.2cqi;
  left: 26%;
  width: 40%;
  height: 4.6cqi;
}

.mq-derive .mq-fantome.d1 {
  left: 14%;
  width: 40%;
  bottom: 1cqi;
}

.mq-ecart {
  position: absolute;
  left: 54%;
  bottom: 1.2cqi;
  width: 12%;
  height: 1.2cqi;
  border-radius: var(--radius-full);
  background: var(--color-st-risk);
  transform-origin: left;
}

.mq-instantanes {
  display: flex;
  gap: var(--space-1-5);
}

.mq-instantane {
  flex: 1;
  height: 4.4cqi;
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.mq-instantane.ref {
  border-color: var(--color-accent-65);
  background: var(--color-accent-14);
}

/* ══════════════════════════════════════════════════════════════════════════
 * Les métriques — `dora.module.css`, `flux.module.css`
 * ══════════════════════════════════════════════════════════════════════════ */

.mq-onglets {
  display: flex;
  gap: var(--space-1);
  margin-block-end: var(--space-2);
}

.mq-onglet {
  height: 3cqi;
  width: 12cqi;
  border-radius: var(--radius-xs);
  background: var(--color-blanc-05);
}

.mq-onglet.on {
  background: var(--color-accent-soft);
}

.mq-tuiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-1-5);
  margin-block-end: var(--space-2);
}

.mq-tuile {
  display: flex;
  flex-direction: column;
  gap: 1cqi;
  min-width: 0;
  padding: var(--space-1-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
}

.mq-tuile-titre {
  display: block;
  height: 1.3cqi;
  width: 70%;
  border-radius: var(--radius-full);
  background: var(--color-blanc-08);
}

/* La valeur, en grand : une barre d'accent dont la largeur est la mesure. */
.mq-val {
  display: block;
  height: 3.2cqi;
  border-radius: var(--radius-xs);
  background: var(--color-accent-500);
  transform-origin: left;
}

.mq-val.v1 {
  width: 60%;
}

.mq-val.v2 {
  width: 80%;
}

.mq-val.v3 {
  width: 35%;
}

.mq-val.v4 {
  width: 50%;
}

.mq-tuile-unite {
  display: block;
  height: 1.1cqi;
  width: 40%;
  border-radius: var(--radius-full);
  background: var(--color-blanc-08);
}

/* Le flux cumulé : huit colonnes, trois couches — terminé, en cours, à faire. */
.mq-flux {
  display: flex;
  align-items: flex-end;
  gap: var(--space-1);
  height: 18cqi;
  padding: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
}

.mq-fcol.f1,
.mq-fcol.f2,
.mq-fcol.f3,
.mq-fcol.f4,
.mq-fcol.f5,
.mq-fcol.f6,
.mq-fcol.f7,
.mq-fcol.f8 {
  min-width: 0;
}

.mq-fcol {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  min-width: 0;
}

.mq-couche {
  display: block;
  width: 100%;
  transform-origin: bottom;
}

.mq-couche.c1 {
  background: var(--color-st-done);
  border-radius: 0;
}

.mq-couche.c2 {
  background: var(--color-accent-500);
}

.mq-couche.c3 {
  background: var(--color-blanc-12);
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
}

.mq-fcol.f1 .mq-couche.c1 { height: 10%; }
.mq-fcol.f1 .mq-couche.c2 { height: 12%; }
.mq-fcol.f1 .mq-couche.c3 { height: 18%; }
.mq-fcol.f2 .mq-couche.c1 { height: 16%; }
.mq-fcol.f2 .mq-couche.c2 { height: 14%; }
.mq-fcol.f2 .mq-couche.c3 { height: 18%; }
.mq-fcol.f3 .mq-couche.c1 { height: 22%; }
.mq-fcol.f3 .mq-couche.c2 { height: 14%; }
.mq-fcol.f3 .mq-couche.c3 { height: 20%; }
.mq-fcol.f4 .mq-couche.c1 { height: 30%; }
.mq-fcol.f4 .mq-couche.c2 { height: 16%; }
.mq-fcol.f4 .mq-couche.c3 { height: 18%; }
.mq-fcol.f5 .mq-couche.c1 { height: 38%; }
.mq-fcol.f5 .mq-couche.c2 { height: 14%; }
.mq-fcol.f5 .mq-couche.c3 { height: 20%; }
.mq-fcol.f6 .mq-couche.c1 { height: 46%; }
.mq-fcol.f6 .mq-couche.c2 { height: 16%; }
.mq-fcol.f6 .mq-couche.c3 { height: 16%; }
.mq-fcol.f7 .mq-couche.c1 { height: 56%; }
.mq-fcol.f7 .mq-couche.c2 { height: 14%; }
.mq-fcol.f7 .mq-couche.c3 { height: 14%; }
.mq-fcol.f8 .mq-couche.c1 { height: 66%; }
.mq-fcol.f8 .mq-couche.c2 { height: 12%; }
.mq-fcol.f8 .mq-couche.c3 { height: 12%; }

/* ══════════════════════════════════════════════════════════════════════════
 * L'organisation — `members`, `tag`, `charge`
 * ══════════════════════════════════════════════════════════════════════════ */

.mq-bloc {
  margin-block-end: var(--space-2-5);
}

.mq-membres {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.mq-membre {
  display: flex;
  align-items: center;
  gap: 1.4cqi;
  padding: var(--space-1-5) var(--space-2);
  border-top: 1px solid var(--color-border);
}

.mq-membre:first-child {
  border-top: 0;
}

.mq-membre .mq-ligne {
  flex: 1;
  width: auto;
  max-width: 40%;
}

.mq-membre.m1,
.mq-membre.m2,
.mq-membre.m3,
.mq-membre.m4 {
  min-height: 5cqi;
}

.mq-membre.m1 .mq-ligne { max-width: 34%; }
.mq-membre.m2 .mq-ligne { max-width: 44%; }
.mq-membre.m3 .mq-ligne { max-width: 30%; }
.mq-membre.m4 .mq-ligne { max-width: 38%; }

.mq-role {
  width: 9cqi;
  height: 2.2cqi;
  margin-inline-start: auto;
  border-radius: var(--radius-full);
  background: var(--color-accent-14);
  border: 1px solid var(--color-accent-65);
}

/* L'invitation qui arrive : tiretée, comme un jalon « à venir ». */
.mq-membre.invite {
  border-top: 1.5px dashed var(--color-border-strong);
}

.mq-membre.invite .mq-role {
  background: var(--color-blanc-05);
  border-color: var(--color-border-strong);
}

.mq-etiquettes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.mq-etiquettes .mq-chip {
  height: 2.6cqi;
  width: 10cqi;
}

.mq-charge {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.mq-charge-bar {
  display: block;
  height: 2.4cqi;
  border-radius: var(--radius-xs);
  background: var(--color-accent-soft);
  transform-origin: left;
}

.mq-charge-bar.h1 {
  width: 72%;
}

.mq-charge-bar.h2 {
  width: 46%;
}

.mq-charge-bar.h3 {
  width: 28%;
  background: var(--color-risk-50);
}

/* ══════════════════════════════════════════════════════════════════════════
 * Le compte — `account`
 * ══════════════════════════════════════════════════════════════════════════ */

.mq-champ {
  display: flex;
  flex-direction: column;
  gap: 0.8cqi;
  margin-block-end: var(--space-1-5);
}

.mq-label {
  display: block;
  height: 1.3cqi;
  width: 20%;
  border-radius: var(--radius-full);
  background: var(--color-blanc-08);
}

.mq-input {
  display: block;
  height: 4cqi;
  width: 70%;
  border-radius: var(--radius-xs);
  background: var(--color-blanc-04);
  border: 1px solid var(--color-border-strong);
}

.mq-langues {
  display: inline-flex;
  gap: var(--space-0-5);
  padding: var(--space-0-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-blanc-05);
}

.mq-seg.langue-fr,
.mq-seg.langue-en {
  position: relative;
  width: 12cqi;
  background: transparent;
}

/* L'état « allumé » du segment est un voile, pour que l'animation ne peigne
   pas un fond dans ses keyframes : elle n'en règle que l'opacité. */
.mq-seg.langue-fr::after,
.mq-seg.langue-en::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xs);
  background: var(--color-accent-soft);
  color: inherit;
}

.mq-seg.langue-en::after {
  opacity: 0;
}

.mq-envoi {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-1);
  border-top: 1px solid var(--color-border);
}

.mq-envoi .mq-ligne {
  flex: 1;
  width: auto;
  max-width: 55%;
}

.mq-toggle {
  position: relative;
  display: block;
  width: 6cqi;
  height: 3.2cqi;
  margin-inline-start: auto;
  border-radius: var(--radius-full);
  background: var(--color-accent-500);
}

.mq-bouton-toggle {
  position: absolute;
  top: 0.4cqi;
  left: 3.2cqi;
  width: 2.4cqi;
  height: 2.4cqi;
  border-radius: var(--radius-full);
  background: var(--color-sur-teinte);
}

.mq-toggle.e1,
.mq-toggle.e3 {
  background: var(--color-accent-500);
}

.mq-toggle.e2 {
  background: var(--color-blanc-12);
}

.mq-toggle.e2 .mq-bouton-toggle {
  left: 0.4cqi;
}

/* ══════════════════════════════════════════════════════════════════════════
 * Le clavier — `clavier`
 * ══════════════════════════════════════════════════════════════════════════ */

.mq-clavier .mq-lane {
  min-height: 14cqi;
}

/* L'étape saisie : l'anneau d'`--accent-2` de l'état `.saisie`, en ombre
   portée pour pouvoir s'animer sans peindre. */
.mq-bar.k1 {
  left: 8%;
  width: 40%;
  top: 3cqi;
  box-shadow: 0 0 0 3px var(--color-accent-2), var(--shadow-saisie);
}

.mq-touches {
  display: flex;
  gap: var(--space-2);
  margin-block: var(--space-3) var(--space-3);
}

.mt-touche {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 9cqi;
  height: 5.4cqi;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border-strong);
  border-bottom-width: 3px;
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  color: var(--color-text-soft);
  font-size: 2cqi;
  font-weight: 600;
}

.mt-touche.k-espace {
  min-width: 16cqi;
}

.mt-touche.k-fleche {
  font-size: 2.6cqi;
}

.mt-touche.k-entree {
  min-width: 12cqi;
}

.mq-url {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  background: var(--color-blanc-04);
}

.mq-url-seg {
  height: 1.5cqi;
  width: 10cqi;
  border-radius: var(--radius-full);
  background: var(--color-blanc-12);
}

.mq-url-seg.longue {
  width: 26cqi;
  background: var(--color-accent-soft);
}

.mq-copier {
  width: 3cqi;
  height: 3cqi;
  margin-inline-start: auto;
  border-radius: var(--radius-xs);
  border: 1px solid var(--color-accent-65);
  background: var(--color-accent-14);
}

/* Les fenêtres que la feuille ne règle pas autrement : une classe par
   dessin, pour que la couture reste fermée. */
.fenetre-accueil,
.fenetre-roadmap,
.fenetre-board,
.fenetre-arbre,
.fenetre-gantt,
.fenetre-activite,
.fenetre-suivi,
.fenetre-metriques,
.fenetre-organisation,
.fenetre-compte,
.fenetre-clavier {
  color: var(--color-text);
}

.mq-accueil,
.mq-roadmap,
.mq-board,
.mq-arbre,
.mq-gantt,
.mq-activite,
.mq-suivi,
.mq-metriques,
.mq-organisation,
.mq-compte,
.mq-clavier {
  display: block;
}

/* ══════════════════════════════════════════════════════════════════════════
 * Le mouvement
 * ══════════════════════════════════════════════════════════════════════════
 * Chaque animation ne touche que `opacity`, `transform`, `translate`,
 * `scale`, `box-shadow`, `left` ou `stroke-dashoffset` : jamais un fond, une
 * marge ou un rayon — le fond est ce que la garde de contraste mesure au repos,
 * et ce qui bouge doit rester ce qu'elle a mesuré. */

/* L'accroche : les barres se posent, la ligne du jour se trace, les fantômes
   apparaissent — puis le jalon à risque dérive, et revient. */
@keyframes mq-poser {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes mq-tracer {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

@keyframes mq-apparaitre {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes mq-deriver {
  0%,
  15% {
    translate: 0 0;
  }
  45%,
  70% {
    translate: 12% 0;
  }
  100% {
    translate: 0 0;
  }
}

.fenetre-accueil .mq-bar {
  animation: mq-poser 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.fenetre-accueil .mq-bar.b1 {
  animation-delay: 0.2s;
}

.fenetre-accueil .mq-bar.b2 {
  animation-delay: 0.35s;
}

.fenetre-accueil .mq-bar.b3 {
  animation: mq-poser 0.8s 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both, mq-deriver 8s 2.6s ease-in-out infinite;
}

.fenetre-accueil .mq-bar.b4 {
  animation-delay: 0.65s;
}

.fenetre-accueil .mq-today {
  animation: mq-tracer 0.7s 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.fenetre-accueil .mq-fantome {
  animation: mq-apparaitre 0.6s 1.7s both;
}

/* Le chapitre roadmap : un jalon saisi, glissé d'un mois, descendu d'une
   lane, déposé — puis ramené. */
@keyframes mq-glisser {
  0%,
  8% {
    translate: 0 0;
    box-shadow: none;
  }
  14% {
    translate: 0 0;
    box-shadow: var(--shadow-saisie);
  }
  36% {
    translate: 22% 0;
    box-shadow: var(--shadow-saisie);
  }
  52% {
    translate: 22% 12cqi;
    box-shadow: var(--shadow-saisie);
  }
  60%,
  78% {
    translate: 22% 12cqi;
    box-shadow: none;
  }
  100% {
    translate: 0 0;
    box-shadow: none;
  }
}

.fenetre-roadmap .mq-bar.b1 {
  animation: mq-glisser 9s ease-in-out infinite;
  z-index: 2;
}

/* Le board : une carte traverse les quatre colonnes. */
@keyframes mq-traverser {
  0%,
  14% {
    left: 1.2%;
    scale: 1;
  }
  20% {
    scale: 1.04;
  }
  30%,
  44% {
    left: 26.2%;
    scale: 1;
  }
  50% {
    scale: 1.04;
  }
  58%,
  70% {
    left: 51.2%;
    scale: 1;
  }
  76% {
    scale: 1.04;
  }
  84%,
  100% {
    left: 76.2%;
    scale: 1;
  }
}

.fenetre-board .mq-card.mq-mobile {
  animation: mq-traverser 10s ease-in-out infinite;
}

/* L'arbre : un jalon se déplie, et se replie. */
@keyframes mq-deplier {
  0%,
  10% {
    height: 0;
  }
  22%,
  80% {
    height: 15.6cqi;
  }
  92%,
  100% {
    height: 0;
  }
}

@keyframes mq-tourner {
  0%,
  10% {
    transform: rotate(-45deg);
  }
  22%,
  80% {
    transform: rotate(45deg);
  }
  92%,
  100% {
    transform: rotate(-45deg);
  }
}

.fenetre-arbre .mq-enfants {
  animation: mq-deplier 8s ease-in-out infinite;
}

.fenetre-arbre .mq-rang.ouvre .mq-chevron {
  animation: mq-tourner 8s ease-in-out infinite;
}

/* Le Gantt : les barres poussent, le losange surgit, les liens se tracent. */
@keyframes mq-croitre {
  0% {
    transform: scaleX(0);
  }
  18%,
  90% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}

@keyframes mq-surgir {
  0%,
  20% {
    transform: rotate(45deg) scale(0);
  }
  32%,
  90% {
    transform: rotate(45deg) scale(1);
  }
  100% {
    transform: rotate(45deg) scale(0);
  }
}

@keyframes mq-dessiner {
  0%,
  12% {
    stroke-dashoffset: 200;
  }
  32%,
  92% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 200;
  }
}

.fenetre-gantt .mq-gbar {
  animation: mq-croitre 9s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

.fenetre-gantt .mq-gbar.g2 {
  animation-delay: 0.3s;
}

.fenetre-gantt .mq-gbar.g4 {
  animation-delay: 0.6s;
}

.fenetre-gantt .mq-gbar.g5 {
  animation-delay: 0.9s;
}

.fenetre-gantt .mq-losange {
  animation: mq-surgir 9s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

.fenetre-gantt .mq-fleche {
  animation: mq-dessiner 9s ease-in-out infinite;
}

.fenetre-gantt .mq-fleche.violee {
  animation-delay: 0.6s;
}

/* L'activité : les phrases arrivent une à une. */
@keyframes mq-arriver {
  0% {
    opacity: 0;
    transform: translateX(-10px);
  }
  8%,
  88% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(0);
  }
}

.fenetre-activite .mq-item {
  animation: mq-arriver 9s ease-out infinite;
}

.fenetre-activite .mq-item.i1 {
  animation-delay: 0s;
}

.fenetre-activite .mq-item.i2 {
  animation-delay: 0.5s;
}

.fenetre-activite .mq-item.i3 {
  animation-delay: 1s;
}

.fenetre-activite .mq-item.i4 {
  animation-delay: 1.6s;
}

.fenetre-activite .mq-item.i5 {
  animation-delay: 2.1s;
}

/* Le suivi : la jauge se remplit, la courbe se trace, la barre dérive et
   l'écart grandit avec elle. */
@keyframes mq-remplir {
  0% {
    transform: scaleX(0);
  }
  25%,
  90% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}

@keyframes mq-dessiner-courbe {
  0%,
  6% {
    stroke-dashoffset: 400;
  }
  36%,
  92% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 400;
  }
}

@keyframes mq-deriver-suivi {
  0%,
  20% {
    translate: -30% 0;
  }
  55%,
  85% {
    translate: 0 0;
  }
  100% {
    translate: -30% 0;
  }
}

@keyframes mq-ecarter {
  0%,
  20% {
    transform: scaleX(0);
  }
  55%,
  85% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}

.fenetre-suivi .mq-jauge-plein {
  animation: mq-remplir 8s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

.fenetre-suivi .mq-courbe {
  animation: mq-dessiner-courbe 8s ease-in-out infinite;
}

.fenetre-suivi .mq-derive .mq-bar.d1 {
  animation: mq-deriver-suivi 8s ease-in-out infinite;
}

.fenetre-suivi .mq-ecart {
  animation: mq-ecarter 8s ease-in-out infinite;
}

/* Les métriques : les valeurs montent, le flux s'empile colonne par colonne. */
@keyframes mq-monter {
  0% {
    transform: scaleY(0);
  }
  20%,
  90% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(0);
  }
}

.fenetre-metriques .mq-val {
  animation: mq-croitre 8s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

.fenetre-metriques .mq-val.v2 {
  animation-delay: 0.2s;
}

.fenetre-metriques .mq-val.v3 {
  animation-delay: 0.4s;
}

.fenetre-metriques .mq-val.v4 {
  animation-delay: 0.6s;
}

.fenetre-metriques .mq-couche {
  animation: mq-monter 8s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

.fenetre-metriques .mq-fcol.f2 .mq-couche { animation-delay: 0.15s; }
.fenetre-metriques .mq-fcol.f3 .mq-couche { animation-delay: 0.3s; }
.fenetre-metriques .mq-fcol.f4 .mq-couche { animation-delay: 0.45s; }
.fenetre-metriques .mq-fcol.f5 .mq-couche { animation-delay: 0.6s; }
.fenetre-metriques .mq-fcol.f6 .mq-couche { animation-delay: 0.75s; }
.fenetre-metriques .mq-fcol.f7 .mq-couche { animation-delay: 0.9s; }
.fenetre-metriques .mq-fcol.f8 .mq-couche { animation-delay: 1.05s; }

/* L'organisation : l'invitation arrive, les étiquettes se posent, la charge
   se répartit. */
@keyframes mq-inviter {
  0%,
  20% {
    opacity: 0;
    transform: translateY(6px);
  }
  30%,
  90% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(0);
  }
}

@keyframes mq-eclore {
  0% {
    transform: scale(0.4);
    opacity: 0;
  }
  14%,
  90% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.4);
    opacity: 0;
  }
}

.fenetre-organisation .mq-membre.invite {
  animation: mq-inviter 8s ease-out infinite;
}

.fenetre-organisation .mq-etiquettes .mq-chip {
  animation: mq-eclore 8s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

.fenetre-organisation .mq-etiquettes .mq-chip.t2 { animation-delay: 0.15s; }
.fenetre-organisation .mq-etiquettes .mq-chip.t3 { animation-delay: 0.3s; }
.fenetre-organisation .mq-etiquettes .mq-chip.t4 { animation-delay: 0.45s; }
.fenetre-organisation .mq-etiquettes .mq-chip.t5 { animation-delay: 0.6s; }

.fenetre-organisation .mq-charge-bar {
  animation: mq-croitre 8s 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

.fenetre-organisation .mq-charge-bar.h2 {
  animation-delay: 1s;
}

.fenetre-organisation .mq-charge-bar.h3 {
  animation-delay: 1.2s;
}

/* Le compte : la langue bascule, un envoi se coupe puis se rallume. */
@keyframes mq-basculer-fr {
  0%,
  40% {
    opacity: 1;
  }
  50%,
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes mq-basculer-en {
  0%,
  40% {
    opacity: 0;
  }
  50%,
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes mq-couper {
  0%,
  30% {
    left: 0.4cqi;
  }
  40%,
  70% {
    left: 3.2cqi;
  }
  80%,
  100% {
    left: 0.4cqi;
  }
}

.fenetre-compte .mq-seg.langue-fr::after {
  animation: mq-basculer-fr 8s ease-in-out infinite;
}

.fenetre-compte .mq-seg.langue-en::after {
  animation: mq-basculer-en 8s ease-in-out infinite;
}

.fenetre-compte .mq-toggle.e2 .mq-bouton-toggle {
  animation: mq-couper 8s ease-in-out infinite;
}

/* Le clavier : Espace saisit, la flèche déplace deux fois, Entrée dépose. */
@keyframes mq-saisir-et-deplacer {
  0%,
  10% {
    translate: 0 0;
    box-shadow: none;
  }
  16%,
  30% {
    translate: 0 0;
    box-shadow: 0 0 0 3px var(--color-accent-2), var(--shadow-saisie);
  }
  38%,
  50% {
    translate: 25% 0;
    box-shadow: 0 0 0 3px var(--color-accent-2), var(--shadow-saisie);
  }
  58%,
  70% {
    translate: 50% 0;
    box-shadow: 0 0 0 3px var(--color-accent-2), var(--shadow-saisie);
  }
  76%,
  88% {
    translate: 50% 0;
    box-shadow: none;
  }
  100% {
    translate: 0 0;
    box-shadow: none;
  }
}

@keyframes mq-appuyer-espace {
  0%,
  10% {
    transform: translateY(0);
    color: var(--color-text-soft);
  }
  13%,
  17% {
    transform: translateY(2px);
    color: var(--color-accent-blanc-55);
  }
  22%,
  100% {
    transform: translateY(0);
    color: var(--color-text-soft);
  }
}

@keyframes mq-appuyer-fleche {
  0%,
  32% {
    transform: translateY(0);
    color: var(--color-text-soft);
  }
  35%,
  39% {
    transform: translateY(2px);
    color: var(--color-accent-blanc-55);
  }
  44%,
  52% {
    transform: translateY(0);
    color: var(--color-text-soft);
  }
  55%,
  59% {
    transform: translateY(2px);
    color: var(--color-accent-blanc-55);
  }
  64%,
  100% {
    transform: translateY(0);
    color: var(--color-text-soft);
  }
}

@keyframes mq-appuyer-entree {
  0%,
  70% {
    transform: translateY(0);
    color: var(--color-text-soft);
  }
  73%,
  77% {
    transform: translateY(2px);
    color: var(--color-accent-blanc-55);
  }
  82%,
  100% {
    transform: translateY(0);
    color: var(--color-text-soft);
  }
}

@keyframes mq-copier {
  0%,
  86% {
    transform: scale(1);
  }
  90% {
    transform: scale(1.3);
  }
  94%,
  100% {
    transform: scale(1);
  }
}

.fenetre-clavier .mq-bar.k1 {
  animation: mq-saisir-et-deplacer 10s ease-in-out infinite;
}

.fenetre-clavier .mt-touche.k-espace {
  animation: mq-appuyer-espace 10s ease-in-out infinite;
}

.fenetre-clavier .mt-touche.k-fleche {
  animation: mq-appuyer-fleche 10s ease-in-out infinite;
}

.fenetre-clavier .mt-touche.k-entree {
  animation: mq-appuyer-entree 10s ease-in-out infinite;
}

.fenetre-clavier .mq-copier {
  animation: mq-copier 10s ease-in-out infinite;
}

/* L'apparition au défilement : chaque chapitre monte de 24 px en s'éclaircissant
   quand il entre dans la fenêtre — là où le navigateur connaît
   `animation-timeline`, et nulle part ailleurs : sans lui, la page est
   simplement là. Le déplacement est VERTICAL seulement : un chapitre décalé
   sur le côté déborderait de la page, et `vitrine-mise-en-page.spec.ts` le
   compterait. */
@keyframes mq-reveler {
  from {
    opacity: 0.15;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@supports (animation-timeline: view()) {
  .chapitre,
  .chiffres {
    animation: mq-reveler linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 32%;
  }
}

/* Sur demande, tout s'arrête — et chaque dessin montre son état fini, parce
   que c'est son style de base.

   `!important`, et ce n'est pas une facilité : `.fenetre *` pèse (0,1,0),
   quand `.fenetre-accueil .mq-bar.b3` pèse (0,3,0). Sans lui, la règle
   existait et ne coupait RIEN — mesuré par `vitrine-mise-en-page.spec.ts`
   le 6 septembre : 72 éléments encore animés sous `reduce`, sur les deux
   moteurs. C'est le seul `!important` de la feuille, et il est là pour ça. */
@media (prefers-reduced-motion: reduce) {
  .fenetre *,
  .fenetre *::before,
  .fenetre *::after,
  .chapitre,
  .chiffres,
  .btn {
    animation: none !important;
    transition: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
 * Les largeurs étroites
 * ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 56rem) {
  .hero,
  .chapitre {
    grid-template-columns: minmax(0, 1fr);
  }

  .chapitre:nth-of-type(even) .chap-figure {
    order: 0;
  }

  .hero-figure {
    max-width: 40rem;
  }

  section {
    margin-block: var(--space-8) 0;
  }
}

@media (max-width: 30rem) {
  .nav {
    gap: var(--space-2) var(--space-3);
  }

  .nav nav {
    gap: var(--space-2) var(--space-3);
  }

  /* Les deux actions de l'accroche prennent la largeur ; PAS le bouton de la
     barre du haut, qui doit rester sur la ligne des liens
     (`vitrine-mise-en-page.spec.ts` compte les lignes de la barre). */
  .row .btn {
    width: 100%;
  }
}