/* ============================================================
   LE CODEX — feuille autonome des pages `projets/`.
   ============================================================

   Ces pages ne sont pas le film. Le film est une descente peinte, sans marge et sans
   papier ; ici on sort de la toile et on ouvre un carnet : parchemin, filets à la
   sanguine, marginalia dans la marge de gauche, planches numérotées à droite. Aucune
   dépendance à style.css — une page projet doit s'ouvrir juste, seule, depuis un moteur
   de recherche, sans JavaScript et sans le reste du site.

   Le grain du papier est un feTurbulence SVG en data-URI (une seule déclaration, pas de
   fichier à charger, pas de requête) posé à 6 % au-dessus du fond et sous le texte, en
   pointer-events: none : c'est une texture, pas une surface.

   Grille au-delà de 1100 px : `9rem | 62ch | 1fr` — la marge des notes, la colonne de
   lecture (62 caractères, pas plus : au-delà l'œil perd la ligne), les planches. En
   dessous, une seule colonne, et les notes passent au-dessus de ce qu'elles annotent. */

:root {
  --paper: #efe8d8;
  --paper-deep: #e6dcc6;
  --sepia: #3b2a1a;
  --sanguine: #c68052;
  --rule: rgba(59, 42, 26, 0.28);
  --sepia-soft: rgba(59, 42, 26, 0.62);
  --sepia-faint: rgba(59, 42, 26, 0.4);

  /* MÊME SYSTÈME QUE LE FILM (Lucas, 2026-09-04, le soir) : Space Mono en capitales pour
     tout ce qui titre ou étiquette, Inter pour ce qui se lit. Les trois tokens sont
     redéclarés ici et non importés — c'est la discipline de cette feuille, une page projet
     doit s'ouvrir juste, seule, sans style.css —, mais leurs VALEURS doivent rester les
     mêmes des deux côtés : une page projet qui garderait la Fraunces se lirait comme un
     autre site, ce qui est exactement le contraire de ce qu'un lien depuis le film promet.
     `--display` et `--mono` pointent la même police pour la raison dite dans style.css :
     deux rangs, un seul fichier. */
  --display: 'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--sepia);
  font-family: var(--body);
  /* 400 comme dans le film : l'Inter en 300 sur un parchemin clair vire au gris. */
  font-weight: 400;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height: 1.62;
  letter-spacing: 0.02em;
  /* Le papier n'est pas plat : une teinte plus profonde monte des bords. */
  background-image:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, 0.5), transparent 60%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-deep) 100%);
  background-attachment: fixed;
  position: relative;
}

/* Le grain. Une seule couche, fixe, jamais cliquable. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
}

body > * {
  position: relative;
  z-index: 1;
}

a {
  color: inherit;
}

img,
video {
  max-width: 100%;
  display: block;
}

:focus-visible {
  outline: 2px solid var(--sepia);
  outline-offset: 3px;
}

/* ---------- En-tête ---------- */

.codex-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.4rem var(--gutter) 1.1rem;
  border-bottom: 1px solid var(--rule);
}

/* LES TROIS PIÈCES DE LA BARRE SONT DES CIBLES DE DOIGT (2026-09-05). « ← Le film » et
   « Alt Tab Studio » faisaient 19 px de haut : c'est la hauteur de leur texte, et personne
   ne vise 19 px sur un écran tenu à bout de bras. Le rembourrage vertical les porte à 44 px
   sans rien changer à la ligne de base — la barre est en `align-items: center`, elle absorbe
   la hauteur. */
.codex-back,
.codex-brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* SUR TÉLÉPHONE, LA BARRE TIENT SUR UNE LIGNE, ET C'EST LA MARQUE QUI CÈDE. À 390 px, les
   trois pièces demandaient ~420 px : le `flex-wrap` renvoyait donc le bouton à la ligne, où
   il s'étalait à gauche sur un deuxième rang — 230 px de barre avant le premier mot de la
   page. On retire « Alt Tab Studio » du rang, et lui seul : le retour au film est la sortie
   de secours, le bouton est l'action, la marque n'est ni l'un ni l'autre et elle est répétée
   au pied de page. */
@media (max-width: 560px) {
  .codex-topbar {
    flex-wrap: nowrap;
    gap: 0.75rem;
    padding-top: 0.9rem;
    padding-bottom: 0.7rem;
  }

  .codex-brand {
    display: none;
  }

  .codex-topbar .btn-solid {
    padding: 0 0.7rem;
    gap: 0.45rem;
  }

  .codex-back,
  .codex-topbar .btn-solid {
    font-size: 0.68rem;
    letter-spacing: 0.12em;
  }
}

.codex-back,
.codex-brand,
.codex-topbar .btn-solid {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
}

.codex-back {
  color: var(--sepia-soft);
  transition: color 0.2s ease;
}

.codex-back:hover,
.codex-back:focus-visible {
  color: var(--sepia);
}

.codex-brand {
  color: var(--sepia);
  font-weight: 500;
}

.codex-topbar .btn-solid {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0 0.85rem;
  background: var(--sepia);
  color: var(--paper);
}

.btn-arrow {
  display: inline-grid;
  place-items: center;
  width: 1.55em;
  height: 1.55em;
  background: color-mix(in srgb, currentColor 14%, transparent);
  transition: background 0.2s ease, transform 0.2s ease;
}

.btn-solid:hover .btn-arrow,
.btn-solid:focus-visible .btn-arrow {
  background: color-mix(in srgb, currentColor 26%, transparent);
  transform: translateX(2px);
}

/* ---------- Grille du codex ---------- */

.codex {
  max-width: 1500px;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 5rem) var(--gutter) 5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.4rem);
}

@media (min-width: 1100px) {
  .codex {
    grid-template-columns: 9rem minmax(0, 62ch) minmax(0, 1fr);
    align-items: start;
    column-gap: clamp(2rem, 3.5vw, 3.6rem);
  }

  .codex-marge {
    grid-column: 1;
  }

  .codex-corps {
    grid-column: 2;
  }

  .codex-planches {
    grid-column: 3;
    position: sticky;
    top: 2rem;
  }

  .codex-pied {
    grid-column: 1 / -1;
  }
}

/* ---------- Marge (folio, faits) ---------- */

.codex-marge {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sepia-faint);
  line-height: 1.9;
}

.codex-folio {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  color: var(--sanguine);
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 1.1rem;
}

.codex-facts {
  margin: 0;
}

/* TOUS LES CORPS MONO DE CETTE FEUILLE ONT MONTÉ D'UN CRAN le 2026-09-04 (le soir), et
   c'est une conséquence mécanique du changement de police : la Martian Mono était large et
   pleine, la Space Mono est étroite et fine, donc à corps égal une étiquette y perd un
   tiers de sa masse d'encre. Les interlettrages descendent d'autant — le couple corps /
   interlettrage se règle ensemble ou pas du tout (voir --label-size dans style.css). */
.codex-facts dt {
  color: var(--sepia-faint);
  font-size: 0.66rem;
}

.codex-facts dd {
  margin: 0 0 0.9rem;
  color: var(--sepia);
  text-transform: none;
  letter-spacing: 0.04em;
  font-size: 0.7rem;
  line-height: 1.5;
}

/* ---------- Corps ---------- */

.codex-kicker {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sanguine);
  margin: 0 0 0.9rem;
}

/* Le titre du codex, à la métrique de la mono : une capitale de Space Mono avance de
   0,6 em, presque deux fois la chasse d'un bas-de-casse de Fraunces — les 6 rem d'avant
   sortaient de la colonne dès le deuxième mot. 3,2 rem tient « CARTE DES INCENDIES » sur
   deux lignes dans les 62ch de la colonne de lecture. */
.codex h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.4vw, 3.2rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  max-width: 20ch;
  margin: 0 0 1.2rem;
}

/* L'accroche sous le titre : Inter, pas d'italique, comme le sous-titre du film — c'est le
   paragraphe de 20 px de la référence. L'italique de Fraunces est partie avec elle. */
.codex-pour {
  font-family: var(--body);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--sepia-soft);
  margin: 0 0 1.6rem;
  max-width: 46ch;
}

.codex-lien {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-decoration: none;
  color: var(--sepia);
  border-bottom: 1px solid var(--sanguine);
  padding-bottom: 0.2rem;
  transition: color 0.2s ease, border-color 0.2s ease;
  overflow-wrap: anywhere;
}

.codex-lien:hover,
.codex-lien:focus-visible {
  color: var(--sanguine);
}

.codex-corps h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 3rem 0 1rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule);
}

.codex-corps p {
  margin: 0 0 1.15rem;
  max-width: 62ch;
}

/* La lettrine, à la sanguine, sur le premier paragraphe du récit seulement. */
.codex-detail > p:first-of-type::first-letter {
  float: left;
  font-family: var(--display);
  /* La lettrine passe au 700, et c'est le seul endroit du site qui charge la graisse
     forte : une capitale de mono isolée en 400 dans un pavé d'Inter n'a pas assez de masse
     pour ouvrir un paragraphe — elle se lit comme une coquille. Le corps baisse (3,6 → 2,8)
     parce que la mono est plus haute d'œil et que la lettrine dépassait la deuxième ligne. */
  font-weight: 700;
  font-size: 2.8em;
  line-height: 0.82;
  color: var(--sanguine);
  padding: 0.06em 0.12em 0 0;
}

.codex-note {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  line-height: 1.75;
  color: var(--sepia-faint);
  border-left: 2px solid var(--rule);
  padding-left: 0.9rem;
  margin: 2rem 0 0;
  max-width: 52ch;
}

/* Les faits, repris dans le corps sous 1100 px (la marge n'existe plus). */
/* SOUS LE BUREAU, LA MARGE REMONTE EN TÊTE — mais seulement tant qu'elle tient en bandeau.
   Le `order: -1` ci-dessous transforme la colonne de faits en un en-tête large de deux ou
   trois colonnes : c'est un résumé qu'on lit avant le récit, et c'est bien ce qu'on veut sur
   une tablette. */
@media (max-width: 1099px) {
  .codex-marge {
    order: -1;
  }

  .codex-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.4rem 1.2rem;
  }
}

/* ...ET REDESCEND SUR TÉLÉPHONE (2026-09-05, Lucas : « le rendu du mobile n'est pas
   optimisé »). Sous 640 px, `minmax(11rem, 1fr)` ne tient plus qu'UNE colonne : le bandeau
   redevient une liste, et cinq paires terme/définition s'empilent AVANT qu'on ait lu le nom
   du projet. Le premier écran d'un téléphone disait donc « PLANCHE V · EN LIGNE · NATURE ·
   DOMAINE · ENTRÉES » à quelqu'un qui ne savait pas encore de quoi on parlait.
   On rend l'ordre du document : le kicker, le nom, la phrase « pour qui », l'adresse — puis
   les faits, qui sont une vérification et non une introduction. */
/* L'ADRESSE DU VRAI SITE EST LE LIEN LE PLUS IMPORTANT DE LA PAGE — c'est la pièce à
   conviction — et c'est un lien EN LIGNE, donc haut comme sa ligne : 23 px. Au doigt on lui
   donne sa zone, et à lui seul : les autres liens en ligne du récit n'ont pas ce statut, et
   rembourrer tout le corps de texte ferait se chevaucher les lignes. */
@media (pointer: coarse) {
  /* La zone se prend en HAUT, pas en bas : le filet sanguine est le `border-bottom` du lien,
     donc tout rembourrage sous le texte l'écarterait du mot qu'il souligne. On monte le
     rembourrage au-dessus — le doigt gagne ses 44 px, le trait reste collé à l'adresse. */
  .codex-lien {
    padding-top: 20px;
    min-height: 44px;
    box-sizing: border-box;
  }
}

@media (max-width: 639px) {
  .codex-marge {
    order: 1;
    padding-top: 0.4rem;
    border-top: 1px solid var(--rule);
  }

  .codex-facts {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Le folio (« Planche V ») ne s'annonce plus en tête d'écran : il numérote une page dans
     une collection, ce qui n'intéresse qu'une fois qu'on est dedans. */
  .codex-marge .codex-folio {
    order: 2;
  }
}

/* ---------- Planches ---------- */

.codex-planches {
  display: grid;
  gap: clamp(1.6rem, 3vw, 2.4rem);
  margin: 0;
}

figure.media {
  margin: 0;
  padding: 0.55rem;
  border: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper) 70%, #fff);
  cursor: pointer;
}

figure.media:focus-visible {
  outline: 2px solid var(--sanguine);
  outline-offset: 3px;
}

figure.media video {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--paper-deep);
  /* Au repos la planche est une gravure ; au survol elle reprend ses couleurs. */
  filter: sepia(0.25) contrast(1.02);
  transition: filter 0.45s ease;
}

figure.media:hover video,
figure.media:focus-visible video,
figure.media.is-playing video {
  filter: sepia(0) contrast(1);
}

/* LA PLANCHE FIXE (sans captation vidéo, depuis le 2026-09-04). Même gravure au repos, mêmes
   couleurs au survol : le visiteur ne doit pas avoir à se demander pourquoi celle-ci ne bouge
   pas — elle se comporte pareil, elle est simplement immobile. `cursor: default` le dit sans
   texte : il n'y a rien à lancer ici. */
figure.media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
  background: var(--paper-deep);
  filter: sepia(0.25) contrast(1.02);
  transition: filter 0.45s ease;
}

figure.media:hover img,
figure.media:focus-visible img {
  filter: sepia(0) contrast(1);
}

figure.media-fixe {
  cursor: default;
}

figure.media figcaption {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  line-height: 1.7;
  color: var(--sepia-faint);
  padding-top: 0.7rem;
}

figure.media figcaption b {
  color: var(--sanguine);
  font-weight: 500;
}

/* ---------- Pied : autres projets, retour ---------- */

.codex-pied {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule);
}

.codex-pied h2 {
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sepia-faint);
  margin: 0 0 1.2rem;
}

.codex-autres {
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
  display: grid;
  gap: 0;
}

.codex-autres li {
  border-bottom: 1px solid var(--rule);
}

.codex-autres li:first-child {
  border-top: 1px solid var(--rule);
}

.codex-autres a {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 1rem;
  padding: 1rem 0.2rem;
  text-decoration: none;
  transition: background 0.2s ease, padding 0.2s ease;
}

.codex-autres a:hover,
.codex-autres a:focus-visible {
  background: color-mix(in srgb, var(--sanguine) 10%, transparent);
  padding-left: 0.7rem;
}

.codex-num {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: var(--sanguine);
}

.codex-nom {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.codex-mot {
  display: block;
  font-family: var(--body);
  font-size: 0.9rem;
  color: var(--sepia-soft);
  margin-top: 0.2rem;
  max-width: 60ch;
}

.codex-fleche {
  font-family: var(--mono);
  color: var(--sepia-faint);
}

.codex-retour {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--sepia-soft);
  min-height: 44px;
}

.codex-retour:hover,
.codex-retour:focus-visible {
  color: var(--sepia);
}

.codex-signature {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sepia-faint);
  margin: 2.2rem 0 0;
}

/* ---------- Sommaire (projets/index.html) ---------- */

.codex-sommaire .codex-autres {
  margin-bottom: 0;
}

.codex-sommaire .codex-intro {
  font-family: var(--body);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: var(--sepia-soft);
  max-width: 48ch;
  margin: 0 0 2.6rem;
}

/* ---------- Mouvement réduit ---------- */

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

/* ---------- La page « Offre » (2026-09-10) ---------- */

/* Le lien secondaire de la barre (Offre ⇄ Projets) prend le costume du retour au film, et
   se range avec le bouton dans un groupe à droite pour que les deux bougent ensemble. */
.codex-droite {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.8rem);
}

.codex-nav {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--sepia-soft);
  transition: color 0.2s ease;
}

.codex-nav:hover,
.codex-nav:focus-visible {
  color: var(--sepia);
}

@media (max-width: 560px) {
  .codex-nav { display: none; }
}

.codex-offres .codex-corps { max-width: none; }

/* Le numéro romain à la sanguine et la nature (forfait / abonnement) en petit à droite :
   la nature est une information, pas un ornement — c'est elle qui distingue le IV. */
.codex-offre h2 {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.codex-offre-num {
  color: var(--sanguine);
  letter-spacing: 0.08em;
}

.codex-offre-nature {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  color: var(--sepia-faint);
}

.codex-offre-pour {
  font-family: var(--body);
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  line-height: 1.45;
  color: var(--sepia-soft);
  max-width: 52ch;
}

/* Les faits chiffrés : trois cases mono sur une ligne, l'étiquette au-dessus de la valeur.
   La valeur garde des chiffres tabulaires pour que « 8 000 » et « 1 500 » s'alignent. */
.codex-tarif {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1rem 1.4rem;
  margin: 1.4rem 0 0;
  padding: 1.1rem 0 0;
  border-top: 1px solid var(--rule);
  max-width: 62ch;
}

.codex-tarif div { display: grid; gap: 0.25rem; }

.codex-tarif dt {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sepia-faint);
}

.codex-tarif dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.86rem;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: var(--sepia);
  font-variant-numeric: tabular-nums;
}

.codex-refus {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  max-width: 62ch;
}

.codex-refus li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
}

.codex-refus li:first-child { border-top: 1px solid var(--rule); }

.codex-refus-pourquoi {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--sepia-faint);
  text-align: right;
  flex-shrink: 0;
}

.codex-parcours { max-width: 62ch; }
.codex-parcours li { list-style: none; }

.codex-duree {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sanguine);
}

.codex-offre-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0 1rem;
  margin-top: 1rem;
  background: var(--sepia);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
}

/* Le parcours reprend la grille de la liste des projets (numéro, nom, texte) mais son texte
   est une PHRASE, pas un sous-titre : il redescend en Inter, bas-de-casse, à la chasse du
   corps. Les capitales mono restent au nom de l'étape et à la durée. */
.codex-parcours li {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr);
  gap: 0.2rem 0.8rem;
  align-items: baseline;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
}

.codex-parcours li:first-child { border-top: 1px solid var(--rule); }

.codex-parcours .codex-mot {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--body);
  font-size: 0.98rem;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sepia-soft);
  max-width: 56ch;
}

/* Sous 560 px la raison du refus passe SOUS le refus : côte à côte, elle sortait de l'écran
   (398 px de large pour 390) — un « nous vendons un résultat » ne se coupe pas. */
@media (max-width: 560px) {
  .codex-refus li { flex-direction: column; gap: 0.25rem; }
  .codex-refus-pourquoi { text-align: left; }
}