/*
 * Article de blog — mise en page et habillage des blocs Gutenberg.
 *
 * Cette feuille vit dans le thème, et c'est la seule place possible : le
 * balisage vient de l'éditeur de WordPress (`wp-block-*`) et du script du
 * sommaire. Aucun de ces éléments n'existe dans le builder, donc aucun panneau
 * ne peut les viser. C'est l'exception que la §5 prévoit, la même que
 * `form.css` et `rendez-vous.css`.
 *
 * Tout est exprimé avec les alias du site — `--panel`, `--line`, `--text`,
 * `--sp-*`, `--r-*`, `--fs-*` — qui basculent seuls entre le thème sombre et le
 * thème clair.
 */

/* ------------------------------------------------------------------ */
/* Sommaire                                                            */
/* ------------------------------------------------------------------ */

.c-toc {
  position: sticky;
  /* L'en-tête du site est collant : le sommaire se pose dessous, pas dessus. */
  top: calc(var(--header-h, 69px) + var(--sp-5));
  max-height: calc(100vh - var(--header-h, 69px) - var(--sp-7));
  overflow-y: auto;
  padding-right: var(--sp-2);
}

/*
 * Au large, le sommaire est toujours ouvert : son intitulé n'est plus un bouton,
 * il redevient un titre. On retire donc le marqueur et le curseur, sans retirer
 * l'élément — le replier reste possible au clavier si quelqu'un le souhaite.
 */
.c-toc__pliant > summary {
  list-style: none;
  cursor: pointer;
}

.c-toc__pliant > summary::-webkit-details-marker {
  display: none;
}

@media (min-width: 1101px) {
  .c-toc__pliant > summary {
    cursor: default;
  }
}

.c-toc__title {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
}

.c-toc__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Le filet qui matérialise la colonne, et sur lequel court l'état actif. */
  border-left: 1px solid var(--line);
}

.c-toc__link {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--text-2);
  text-decoration: none;
  transition: color var(--motion-duration-fast, 160ms) var(--ease),
    border-color var(--motion-duration-fast, 160ms) var(--ease);
}

.c-toc__link--sous {
  padding-left: var(--sp-5);
  font-size: var(--fs-2xs);
}

.c-toc__link:hover {
  color: var(--text);
  border-left-color: var(--line-strong);
}

.c-toc__link:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
  border-radius: var(--r-2xs, 4px);
}

/*
 * L'état courant se dit par `aria-current`, pas par une classe.
 *
 * L'attribut porte le sens pour un lecteur d'écran ; le style s'y accroche.
 * Une classe seule aurait laissé l'information invisible à qui n'y voit pas.
 */
.c-toc__link[aria-current='true'] {
  color: var(--text);
  font-weight: 600;
  border-left-color: var(--brand);
}

/* ------------------------------------------------------------------ */
/* Corps de l'article                                                  */
/* ------------------------------------------------------------------ */

.c-article-body > *:first-child {
  margin-top: 0;
}

.c-article-body > *:last-child {
  margin-bottom: 0;
}

/*
 * Le premier paragraphe porte le regard : un cran plus grand, un ton plus clair.
 *
 * Un cran, pas deux. Le corps du site est à 15 px partout ; un chapô à 21 px
 * faisait lire l'article comme un autre site — mesuré le 06/08/2026, corps de
 * l'article à 18 px contre 15 px sur toutes les autres pages. Ce qui distingue
 * un article, c'est sa colonne étroite et son interligne, jamais une police
 * plus grosse que le reste de la marque.
 */
.c-article-body > p:first-of-type {
  font-size: var(--fs-m);
  line-height: 1.55;
  color: var(--text);
}

.c-article-body p {
  margin: 0 0 var(--sp-4);
}

.c-article-body h2 {
  margin: var(--sp-7) 0 var(--sp-3);
  /*
   * 21 px, graisse 700 — et non le `--fs-h2` de la maquette en graisse 800.
   *
   * Les tokens de titre du site sont calibrés pour des titres de section pleine
   * largeur, sur 1366 px. Dans une colonne de 736 px, au-dessus d'un corps à
   * 15 px, ils écrasent le texte : 26 px en 800 avec un interlettrage serré, ça
   * se lit comme une accroche publicitaire, pas comme une section d'article.
   * Le rapport 21/15 suffit à hiérarchiser sans crier.
   */
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text);
  /* Une ancre visée depuis le sommaire ne doit pas passer sous l'en-tête. */
  scroll-margin-top: calc(var(--header-h, 69px) + var(--sp-5));
}

.c-article-body h3 {
  margin: var(--sp-5) 0 var(--sp-2);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text);
  scroll-margin-top: calc(var(--header-h, 69px) + var(--sp-5));
}

.c-article-body a {
  color: var(--brand-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.c-article-body a:hover {
  text-decoration-thickness: 2px;
}

.c-article-body a:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 2px;
}

.c-article-body strong {
  color: var(--text);
  font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* Listes — avec de vraies puces                                       */
/* ------------------------------------------------------------------ */

/*
 * Les puces avaient disparu : le reset de cohabitation retire les marqueurs, et
 * rien ne les rétablissait pour le balisage venu de Gutenberg. Un texte indenté
 * sans marqueur ne se lit pas comme une liste — il se lit comme un paragraphe
 * mal aligné.
 */
.c-article-body ul,
.c-article-body ol {
  margin: 0 0 var(--sp-4);
  padding-left: var(--sp-5);
}

.c-article-body ul {
  list-style: disc;
}

.c-article-body ol {
  list-style: decimal;
}

.c-article-body li {
  display: list-item;
  margin-bottom: var(--sp-2);
  padding-left: var(--sp-2);
}

.c-article-body li::marker {
  color: var(--brand-ink);
}

/* ------------------------------------------------------------------ */
/* Citation                                                            */
/* ------------------------------------------------------------------ */

/*
 * Bricks impose Georgia 1.3em à tout `blockquote` (`frontend.min.css`). La
 * fonte est donc réaffirmée ici, sans quoi la citation sort en serif au milieu
 * d'un article en Inter.
 */
.c-article-body blockquote,
.c-article-body .wp-block-quote {
  margin: var(--sp-7) 0;
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: var(--r-m);
  background: var(--panel);
  font-family: var(--font);
  font-size: var(--fs-m);
  font-style: normal;
  line-height: 1.55;
  color: var(--text);
}

.c-article-body blockquote p {
  margin: 0;
  font-size: inherit;
  color: inherit;
}

.c-article-body blockquote cite,
.c-article-body .wp-block-quote__citation {
  display: block;
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  font-style: normal;
  color: var(--text-2);
}

/* ------------------------------------------------------------------ */
/* FAQ — questions repliées                                            */
/* ------------------------------------------------------------------ */

/*
 * `<details>` natif, et non un pliage maison : le clavier, l'annonce de l'état
 * et la recherche dans la page fonctionnent sans une ligne de JavaScript. La
 * réponse reste dans le DOM même repliée, donc indexable — c'est la raison pour
 * laquelle une FAQ en accordéon maison est une mauvaise idée en SEO.
 */
.c-article-body .wp-block-details {
  margin: 0 0 var(--sp-2);
  padding: 0 var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--panel);
  transition: border-color var(--motion-duration-fast, 0.18s) var(--ease);
}

.c-article-body .wp-block-details:hover {
  border-color: var(--line-strong);
}

.c-article-body .wp-block-details[open] {
  border-color: var(--brand-t2);
  background: var(--brand-t);
}

.c-article-body .wp-block-details > summary {
  position: relative;
  padding: var(--sp-4) var(--sp-6) var(--sp-4) 0;
  font-size: var(--fs-s);
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}

/* Le triangle par défaut de Safari, qu'aucune autre règle ne retire. */
.c-article-body .wp-block-details > summary::-webkit-details-marker {
  display: none;
}

.c-article-body .wp-block-details > summary:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
  border-radius: var(--r-s);
}

/*
 * Le chevron est tracé en CSS plutôt qu'importé : deux bordures et une rotation,
 * aucun fichier à servir, et il suit la couleur du texte dans les deux thèmes.
 */
.c-article-body .wp-block-details > summary::after {
  content: '';
  position: absolute;
  top: calc(50% - 4px);
  right: 2px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--brand-ink);
  border-bottom: 2px solid var(--brand-ink);
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform var(--motion-duration-fast, 0.18s) var(--ease);
}

.c-article-body .wp-block-details[open] > summary::after {
  transform: rotate(-135deg);
}

.c-article-body .wp-block-details > *:not(summary) {
  margin-bottom: var(--sp-4);
  color: var(--text-2);
}

.c-article-body .wp-block-details > summary + * {
  padding-top: var(--sp-1);
}

/* ------------------------------------------------------------------ */
/* Appel à l'action au fil du texte                                    */
/* ------------------------------------------------------------------ */

/*
 * Il se pose n'importe où dans l'article, **à la largeur du texte** : c'est tout
 * l'intérêt par rapport à la section de conversion du bas de page. Un lecteur
 * convaincu au tiers de l'article n'a pas à faire défiler six sections pour
 * trouver comment vous joindre.
 *
 * Le halo est en `radial-gradient` et non en image : il suit la largeur réelle
 * du bloc, et ne coûte aucune requête.
 */
.c-article-body .wp-block-group.is-style-cta {
  position: relative;
  margin: var(--sp-7) 0;
  padding: var(--sp-6);
  border: 1px solid var(--brand-t2);
  border-radius: var(--r-l);
  background:
    radial-gradient(120% 140% at 100% 0%, var(--brand-t2) 0%, transparent 60%),
    var(--panel);
  overflow: hidden;
}

/* Un filet de marque à gauche : le bloc se repère du coin de l'œil au défilement. */
.c-article-body .wp-block-group.is-style-cta::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--brand);
}

/*
 * Sélecteurs **descendants**, et non enfants directs.
 *
 * `core/group` enveloppe son contenu dans un `.wp-block-group__inner-container`
 * dès que la disposition est en flux. Une règle `.is-style-cta > p` ne visait
 * donc rien : l'intitulé restait collé à son texte sur la même ligne, et le
 * paragraphe gardait le style du corps. Mesuré sur le rendu servi, pas déduit du
 * balisage envoyé — Gutenberg ajoute aussi `is-layout-flow` aux classes.
 */
.c-article-body .wp-block-group.is-style-cta p {
  margin-bottom: var(--sp-5);
  font-size: var(--fs-s);
  line-height: var(--lh-body);
  color: var(--text-2);
}

/*
 * L'intitulé est un `<strong>` en début de paragraphe — c'est ce que la
 * composition Gutenberg dépose, et ce qu'un rédacteur reproduira sans y penser.
 * Le passer en bloc lui donne sa ligne sans exiger de balisage supplémentaire.
 */
.c-article-body .wp-block-group.is-style-cta p > strong:first-child {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-m);
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
}

/* ------------------------------------------------------------------ */
/* Boutons                                                             */
/* ------------------------------------------------------------------ */

.c-article-body .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin: var(--sp-5) 0;
}

.c-article-body .wp-block-button {
  margin: 0;
}

.c-article-body .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* cible tactile — WCAG 2.5.8 */
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid var(--brand);
  border-radius: var(--r-pill);
  background: var(--brand);
  font-size: var(--fs-s);
  font-weight: 600;
  line-height: 1.2;
  color: var(--on-primary);
  text-decoration: none;
  transition:
    transform var(--motion-duration-fast, 0.18s) var(--ease),
    background-color var(--motion-duration-fast, 0.18s) var(--ease);
}

.c-article-body .wp-block-button__link:hover {
  transform: translateY(-2px);
  background: var(--brand-ink);
  border-color: var(--brand-ink);
  text-decoration: none;
}

.c-article-body .wp-block-button__link:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

/*
 * Le second bouton est secondaire : deux boutons pleins côte à côte se
 * neutralisent, et le lecteur ne sait plus lequel est l'action attendue.
 */
.c-article-body .wp-block-button:not(:first-child) .wp-block-button__link {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--text);
}

.c-article-body .wp-block-button:not(:first-child) .wp-block-button__link:hover {
  background: var(--brand-t);
  border-color: var(--brand);
  color: var(--text);
}

/* ------------------------------------------------------------------ */
/* Encadré — à retenir                                                 */
/* ------------------------------------------------------------------ */

.c-article-body .wp-block-group.is-style-encadre {
  margin: var(--sp-6) 0;
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand-ink);
  border-radius: var(--r-m);
  background: var(--panel-2);
}

/* Même enveloppe que le bloc d'appel à l'action : on vise le contenu, pas l'enfant. */
.c-article-body .wp-block-group.is-style-encadre p:last-child,
.c-article-body .wp-block-group.is-style-encadre ul:last-child,
.c-article-body .wp-block-group.is-style-encadre ol:last-child {
  margin-bottom: 0;
}

.c-article-body .wp-block-group.is-style-encadre p {
  font-size: var(--fs-s);
  color: var(--text-2);
}

.c-article-body .wp-block-group.is-style-encadre strong {
  color: var(--brand-ink);
}

/* ------------------------------------------------------------------ */
/* Images au fil du texte                                              */
/* ------------------------------------------------------------------ */

.c-article-body .wp-block-image {
  margin: var(--sp-7) 0;
}

.c-article-body .wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
}

/* ------------------------------------------------------------------ */
/* Tableau                                                             */
/* ------------------------------------------------------------------ */

/*
 * Un tableau d'article n'est pas une grille de données : c'est un argument mis
 * en colonnes.
 *
 * ## Ce qui a été retiré, et pourquoi
 *
 * Première version : bande d'en-tête teintée, zébrures une ligne sur deux,
 * filets appuyés. Verdict de Theo, et il est juste — ça dessine un tableur.
 * Chacun de ces trois éléments **découpe** le tableau en cases, alors que le
 * lecteur doit y suivre des lignes.
 *
 * Le registre visé est celui des tableaux de documentation technique (Linear,
 * Stripe, Vercel), et il tient en quatre décisions :
 *
 *   1. **L'en-tête ne porte aucun fond.** Elle se distingue par sa taille, ses
 *      capitales et sa couleur atténuée, pas par une bande de couleur.
 *   2. **Aucune zébrure.** Ce qui guide l'œil, c'est le survol de la ligne —
 *      actif, précis, et qui ne laisse aucune trace quand on ne s'en sert pas.
 *   3. **Des filets ténus**, à la couleur des bordures du site, jamais renforcés.
 *   4. **Des chiffres alignés** (`tabular-nums`) : dans une colonne de prix,
 *      des chiffres de largeurs différentes se lisent comme un désordre.
 */
.c-article-body .wp-block-table {
  /*
   * Le conteneur défile, pas la page. Un tableau de quatre colonnes déborde
   * d'une colonne de 736 px sur mobile ; sans `overflow-x`, c'est le document
   * entier qui part de travers — le défaut le plus visible sur un téléphone.
   */
  position: relative;
  margin: var(--sp-7) 0;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--panel);
  /* La rampe de défilement reste discrète tant qu'on ne la survole pas. */
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

.c-article-body .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  /* 13 px : sous le corps du texte, au-dessus des mentions. Le registre des
     tableaux de documentation technique — lisible en diagonale, sans peser. */
  font-size: 0.8125rem;
  line-height: 1.55;
  /* Les chiffres d'une colonne s'alignent en colonne, pas en escalier. */
  font-variant-numeric: tabular-nums;
}

/*
 * La feuille de blocs de WordPress pose `border: 1px solid` sur **chaque**
 * cellule (`wp-includes/blocks/table/style.css`). On obtient un quadrillage de
 * tableur, qui découpe l'argument au lieu de le porter.
 *
 * Le sélecteur est en 0-2-1 pour battre le sien (0-1-1) sans dépendre de l'ordre
 * de chargement des feuilles — celui de WordPress passe après le thème.
 */
/*
 * Le trait de 3 px sous l'en-tête ne vient pas des cellules : WordPress le pose
 * sur `thead` lui-même (`.wp-block-table thead { border-bottom: 3px solid }`),
 * et sur `tfoot` en miroir. Une remise à zéro qui ne visait que `td` et `th` le
 * laissait donc en place — visible en thème clair comme en sombre, et lu comme
 * un choix alors que c'était un reste.
 */
.c-article-body .wp-block-table thead,
.c-article-body .wp-block-table tfoot {
  border: 0;
}

.c-article-body .wp-block-table thead th {
  padding: var(--sp-3) var(--sp-4) var(--sp-2);
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  /* Atténuée : une en-tête annonce, elle ne dispute pas la lecture au contenu. */
  color: var(--text-3);
  white-space: nowrap;
}

.c-article-body .wp-block-table td {
  padding: var(--sp-3) var(--sp-4);
  border: 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  color: var(--text-2);
}

.c-article-body .wp-block-table tbody tr:last-child td {
  border-bottom: 0;
}

/*
 * Le survol remplace les zébrures.
 *
 * Une zébrure teinte la moitié des lignes en permanence, qu'on les lise ou non ;
 * le survol n'en teinte qu'une, celle qu'on suit. La transition est sur `td` et
 * non sur `tr` — Safari n'anime pas l'arrière-plan d'une rangée.
 */
.c-article-body .wp-block-table tbody td {
  transition: background-color var(--motion-duration-fast, 0.15s) var(--ease);
}

.c-article-body .wp-block-table tbody tr:hover td {
  background: var(--brand-t);
}

/* La première colonne porte le critère : c'est l'entrée de lecture. */
.c-article-body .wp-block-table tbody td:first-child {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

/*
 * Sur mobile, le critère cesse d'être insécable : forcer `nowrap` sur une
 * colonne de 40 caractères y fabrique un tableau six fois plus large que
 * l'écran, que personne ne fera glisser jusqu'au bout.
 */
@media (max-width: 640px) {
  .c-article-body .wp-block-table tbody td:first-child {
    white-space: normal;
  }

  .c-article-body .wp-block-table td,
  .c-article-body .wp-block-table thead th {
    padding: var(--sp-3);
  }
}

/*
 * `hover: hover` — sur un écran tactile, `:hover` reste collé à la dernière
 * ligne touchée, et le tableau garde une bande teintée que rien n'explique.
 */
@media (hover: none) {
  .c-article-body .wp-block-table tbody tr:hover td {
    background: none;
  }
}

.c-article-body figcaption,
.c-article-body .wp-element-caption {
  margin-top: var(--sp-3);
  padding-inline: var(--sp-1);
  font-size: var(--fs-xs);
  font-style: normal;
  line-height: var(--lh-body);
  color: var(--text-2);
}

/*
 * La légende sort du cadre du tableau.
 *
 * Gutenberg la place **dans** le `<figure>`, donc dans le conteneur qui défile :
 * sur un tableau large, elle partait à droite avec le reste et devenait
 * illisible. On la remet dans le flux de la page.
 */
.c-article-body .wp-block-table > figcaption {
  position: sticky;
  left: 0;
  padding: var(--sp-3) var(--sp-4);
  margin-top: 0;
  border-top: 1px solid var(--line);
  /*
   * Alignée à gauche, et non centrée : une légende centrée sous un tableau est
   * la signature d'un tableau de tableur. Ici c'est une note de bas de bloc, qui
   * commence là où commence la première colonne.
   */
  text-align: left;
  /*
   * `--fs-xs` (12,5 px) et non `--fs-2xs` (10,4) : cette légende est de la
   * PROSE, pas une étiquette.
   *
   * L'arbitrage, posé le 08/08/2026 après avoir relevé tout ce que le site
   * affiche sous 12 px : le palier `--fs-2xs` est celui des étiquettes — capitales,
   * interlettrage large, deux ou trois mots. À cette forme, 10,4 px se lit. Une
   * phrase qui explique le tableau — « Le prix suit le périmètre, pas le soin
   * apporté… », deux lignes pleines — n'est pas de cette famille, et 10,4 px lui
   * coûte des lecteurs.
   *
   * La règle qui en sort, et qui vaut pour la suite : de la prose ne descend
   * jamais sous `--fs-xs` ; une étiquette en capitales peut aller à `--fs-2xs`.
   */
  font-size: var(--fs-xs);
  color: var(--text-3);
}

/* ------------------------------------------------------------------ */
/* Image mise en avant                                                 */
/* ------------------------------------------------------------------ */

/*
 * Le conteneur est un élément Bricks : son style vit dans son panneau. Seule
 * reste ici la balise `img` qu'il contient, qu'aucun panneau ne peut viser.
 */
/*
 * L'élément `image` de Bricks émet **directement** la balise `<img>`, sans
 * conteneur : la classe est donc sur l'image elle-même, et tout son style tient
 * dans son panneau — largeur, ratio, bordure, `object-fit`.
 *
 * Une règle `.c-article-hero__media img` ne viserait rien. C'est la même méprise
 * que sur l'élément `html` (§47) : supposer une enveloppe que Bricks ne pose
 * pas. Ici elle n'a coûté qu'une mesure fausse — le sélecteur ne trouvait pas
 * l'image, et j'ai conclu qu'elle était absente alors qu'elle était servie.
 */
.c-article-hero__media {
  display: block;
}

/* =========================================================================
   LA MESURE DE LECTURE — et pourquoi elle ne vaut que pour la prose
   ========================================================================= */

/* Mesuré le 08/08/2026 : les paragraphes d'article couraient sur 736 px à
   15 px, soit **~98 caractères par ligne** — 90 paragraphes dans ce cas sur les
   articles du site. Au-delà de ~85, l'œil rate la ligne suivante en revenant à
   la marge, et la lecture décroche sans qu'on sache pourquoi.

   La borne est posée sur la PROSE seulement — paragraphes, listes, citations.
   Les tableaux, les figures et les blocs riches gardent toute la colonne : ce
   sont des objets qu'on regarde, pas qu'on lit ligne à ligne, et les rétrécir
   les rendrait illisibles pour de bon.

   En `ch` et non en pixels : l'unité vaut la largeur du « 0 » de la fonte, donc
   la borne suit la taille du texte au lieu de se décaler avec elle.

   **68ch et non 85ch, et c'est mesuré.** Le « 0 » est nettement plus large
   qu'une lettre française moyenne : ici 1ch vaut 9,45 px quand la colonne rend
   98 caractères sur 736 px, soit 7,5 px par caractère réel. Une borne à 84ch
   aurait valu 794 px — au-dessus de la largeur en place, donc sans aucun effet,
   et la porte serait restée rouge sur une règle qu'on croyait posée. */
.c-article-body > p,
.c-article-body > ul,
.c-article-body > ol,
.c-article-body > blockquote,
.c-prose > p,
.c-prose > ul,
.c-prose > ol,
/* Les pages légales sont de la prose longue, lue d'un bout à l'autre par qui
   cherche une clause précise — 108 caractères par ligne y sont mesurés. Elles
   n'ont pas la classe d'article, mais elles en ont l'usage. Les tableaux de
   `.c-legal` gardent la colonne entière : ils sont visés, pas lus en continu. */
.c-legal > p,
.c-legal > ul,
.c-legal > ol {
  max-width: 68ch;
}

/* La cible tactile du sommaire — mesurée à 33 px de haut à 375 px.
   WCAG 2.5.8 demande 24 px au niveau AA ; 44 est la valeur qu'Apple comme Google
   retiennent, et celle qui correspond à la surface réelle d'un pouce. Ce n'est
   pas un lien en ligne dans une phrase — l'exception du critère ne s'applique
   donc pas : c'est une liste de navigation, qu'on vise. */
@media (max-width: 900px) {
  .c-toc__link {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  /* Le titre du sommaire est le `<summary>` d'un `<details>` : sur mobile,
     c'est ce qu'on TAPE pour dérouler la liste. Mesuré à 327 × 17 px — le
     seul défaut de gravité 3 restant sur les 37 pages. Un repliable qu'on
     n'arrive pas à ouvrir est un repliable fermé. */
  .c-toc__title {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}