/* ===========================================================================
   Recette Farès — cahier de tests rempli le 21/09/2026.
   Ce fichier ne contient que les écarts relevés en recette. Il se charge après
   styles/v3-niveau.css pour surcharger sans rien y réécrire, afin que chaque
   correction reste lisible et réversible.
   =========================================================================== */

/* --- Dépliants supprimés (items 23, 39, 41, 43, 45, 47, 53, 55, 57, 59, 67,
       69, 73, 79, 85, 93) -----------------------------------------------------
   Les 76 <details class="v3-details"> sont devenus des <div class="v3-details
   v3-static">. Les règles de .v3-details continuent de s'appliquer ; seules les
   règles [open] tombent, et elles ne portaient que la rotation du « + ». */
.v3-static {
  display: block;
}

/* Le corps était révélé par le dépliage ; il est désormais toujours lisible. */
.v3-static > div {
  padding-top: 10px;
}

/* --- Nom de la page (items 37, 51, 65, 77, 89) ----------------------------
   « Le titre est très petit ; on ne comprend pas que c'est le nom de la page. »
   Le libellé passe de 12 px à une échelle fluide, gagne du poids et perd le
   voile d'opacité qui l'effaçait. L'interlettrage est resserré à mesure que le
   corps grandit, sinon le mot se disloque. */
.v3-label-page {
  font-size: clamp(17px, 1.45vw, 22px);
  letter-spacing: .1em;
  font-weight: 600;
  opacity: 1;
  margin-bottom: 22px;
}

/* --- Titres des quatre familles d'offres (item 43.1) ----------------------
   « Le titre des 4 offres Marque, campagne, contenus, vidéos sont très petits. »
   Ne concerne que le rail des familles de Visual IA (#c2), pas les autres
   surtitres du site, qui eux ont été validés. */
#c2 .v3-kicker {
  font-size: clamp(15px, 1.15vw, 18px);
  letter-spacing: .06em;
  font-weight: 600;
  opacity: 1;
}

/* --- Accroche de la page Références (item 89.2) ---------------------------
   « Réduire la taille du texte : Des entreprises aux enjeux différents. »
   Elle rivalisait avec le titre de la page ; elle redevient une accroche. */
#h2conf {
  font-size: clamp(28px, 2.9vw, 44px);
  line-height: 1.12;
  max-width: 24ch;
}

/* --- Confort de lecture ---------------------------------------------------
   Avec tous les contenus dépliés, certaines cartes gagnent en hauteur. On
   retire le calage bas hérité du dépliant, qui creusait un vide entre le titre
   et un corps désormais toujours présent. */
.v3-static {
  margin-top: 14px;
}

@media (max-width: 720px) {
  .v3-label-page {
    font-size: 16px;
    margin-bottom: 16px;
  }
  #c2 .v3-kicker {
    font-size: 15px;
  }
}

/* --- Redondance des tailles client (Références) ---------------------------
   « VISUAL IA · GRAND GROUPE » répétait la taille sur la même ligne
   typographique que l'offre : sur six cas, « GRAND GROUPE » sortait trois
   fois en capitales, et la taille pesait autant que l'offre elle-même.
   Le cahier des charges impose de mentionner la taille (point 93) : elle est
   donc conservée, mais redescendue au rang de métadonnée, dans la pastille
   déjà utilisée par « Cas illustratif ». L'offre redevient l'information
   principale ; la répétition ne crie plus. */
.v3-cas-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.v3-taille {
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: none;
  font-weight: 500;
  padding: 4px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  opacity: .68;
}

/* ===========================================================================
   Accessibilité — écarts RGAA AA relevés au rendu (Chromium, 390 / 768 / 1440).
   Tous préexistaient à la recette : le build intact présente exactement les
   mêmes. Le README pose RGAA AA comme non négociable, et le point 11 du cahier
   porte sur les contrastes et les zones cliquables : ils sont donc corrigés.
   =========================================================================== */

/* --- Contraste du texte (WCAG 1.4.3, seuil 4.5:1 sous 24 px) --------------
   Valeurs mesurées sur le fond réellement calculé, pas estimées. */
#agents .ai-process-steps li {
  color: #68747b;                 /* était #728087 — 3,86:1 sur #fff8ea */
}                                 /* désormais 4,54:1. La règle d'origine est
                                     portée par #agents : la surcharge doit
                                     reprendre la même spécificité. */

#agents .ai-desk dt {
  color: #5b7179;                 /* était #5C727A — 4,44:1 sur #edf1eb */
}                                 /* désormais 4,50:1 */

/* --- Zones cliquables (WCAG 2.5.8, minimum 24 x 24 px) --------------------
   Les liens en pleine phrase restent exemptés ; seules les commandes
   autonomes sont reprises. Le champ anti-spam .honey est déjà neutralisé
   (aria-hidden + tabindex="-1") : il n'est pas concerné. */
.v3-card > h3 > a,
.locations-grid article button.text-link,
address a,
.map-consent-note a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

.consent-label input[type="checkbox"],
#agents .ai-check input[type="checkbox"] {   /* la règle d'origine est portée
                                                par #agents : même spécificité */
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}

/* ===========================================================================
   Défilement et hauteurs — retour d'Adam sur Pixel 10 Pro et sur ordinateur,
   21/09 : « tout buggé niveau scroll » et « plein d'espace vide ».

   La conception d'origine est assumée et documentée dans v3-niveau.css : chaque
   chapitre occupe un écran, et le suivant glisse par-dessus le précédent. Sur
   un navigateur piloté, cela ne se voit pas. Sur un appareil réel, deux choses
   se produisent.

   L'accroche au défilement reprend la main sur le geste : la page décide où
   s'arrêter à la place du lecteur. C'est ce qui donne la sensation de bug, et
   c'est aussi ce que vise le point 13 du cahier, « réduction des animations
   sans gêner la lecture ».

   La hauteur plancher d'un écran par chapitre produit, elle, de 22 % à 37 % de
   vide selon les pages : une section de 900 px pour 320 px de contenu laisse
   580 px de rien. Mesuré sur les quatre pages, en 412 x 915 et en 1440 x 900.

   Les chapitres qui ont besoin de la pleine hauteur la gardent : le film
   d'ouverture, la démonstration Agents IA, et le premier écran de chaque page.
   C'est une décision de présentation : Isabelle et Farès peuvent la revoir,
   et il suffit de retirer ce bloc pour revenir à l'état d'avant.
   =========================================================================== */

/* --- L'accroche rend la main ---------------------------------------------- */
html:has(.v3-page):not(#_) {
  scroll-snap-type: none;
}

.v3-chapter:not(#_),
.v3-rail:not(#_),
.v3-rail-stage:not(#_) {
  scroll-snap-align: none;
  scroll-snap-stop: normal;
}

/* --- Les hauteurs pleine page sont conservées ------------------------------
   Premier réflexe, le 21/09 : j'avais aplati les chapitres pour supprimer le
   vide. C'était une erreur. Ce vide n'en est pas un : c'est la course dont la
   chorégraphie a besoin pour que chaque chapitre glisse par-dessus le
   précédent. Adam veut cet effet, et il a raison — il fait le caractère du
   site. Seule l'accroche au défilement, ci-dessus, est retirée : elle prenait
   la main sur le geste sans rien apporter à l'effet.
   -------------------------------------------------------------------------- */

/* --- Le vide en haut d'un chapitre : la répartition, pas la hauteur --------
   Adam, 21/09 : « sans scroll, par exemple Agent IA, le 1er des deux, trop de
   zone vide en haut ». Il a raison, et la cause n'est pas la hauteur d'écran.

   v3-niveau.css mesure la part d'écran qu'un chapitre remplit. En dessous de
   52 %, il le marque « ampleur grande » et étire son contenu du haut vers le
   bas, avec justify-content:space-between. Le commentaire d'origine dit à quoi
   cette règle est destinée : « réservé aux chapitres qui portent un en-tête à
   deux colonnes ». Le sélecteur, lui, ne vérifie jamais la présence de cet
   en-tête. Sur un chapitre qui n'en a pas, l'étirement ne place plus deux
   blocs : il écarte les paragraphes un par un.

   Mesuré au rendu, à 412 x 915, écart maximal entre deux éléments voisins :

     Agents IA, premier écran      107 / 115 / 106 / 91 px
     Références, « Des entreprises aux enjeux différents »      566 px
     Marque blanche, la promesse                                614 px
     À propos, « Notre approche »                               304 px

   Sur l'écran d'Agents IA, le libellé AGENTS IA se détache du titre qu'il
   annonce : 210 px séparent l'en-tête du titre. C'est exactement le vide dont
   parle Adam, et il est là sans avoir défilé d'un pixel.

   La correction ne touche ni à la hauteur des chapitres, ni au glissement,
   ni à la typographie agrandie par l'ampleur — tout cela reste. Elle rend
   simplement à la règle le périmètre que son auteur avait écrit : un chapitre
   se déploie s'il a un en-tête à deux colonnes pour tenir le bas ; sinon, son
   contenu reste un bloc, centré dans son écran comme partout ailleurs sur le
   site. L'espace libre redevient une marge autour d'un bloc lisible, au lieu
   d'une déchirure entre ses lignes.
   -------------------------------------------------------------------------- */
.v3-chapter[data-ampleur=grande]:not(.v3-cta):not(.v3-chiffres)
  > .v3-inner:not(:has(> .v3-head)):not(#_) {
  justify-content: center;
}


/* ===========================================================================
   Le premier écran — Adam, 21/09 : « si ennuyeux, si plat, si boring et peu
   crédible », capture du Pixel 10 Pro à l'appui.

   Le jugement est juste et il dépasse le vide. Recentrer le bloc supprime la
   déchirure, mais un titre au tiers de sa place, une énumération grise en
   pleine ligne et rien qui dise que la page continue : cela reste un écran
   qui n'affirme rien. Ce qui suit lui rend de la tenue, sans sortir de la
   direction artistique — encre, crème, cyan, menthe, rose, et la typographie
   déjà en place. Rien n'est inventé côté palette ni côté fonte.
   =========================================================================== */

/* --- Le titre tient son écran sur téléphone -------------------------------
   v3-niveau.css plafonne le titre d'un chapitre ample à 36 px sous 860 px de
   large, pour éviter qu'un très grand corps ne déborde au milieu d'une page.
   Le premier écran n'a pas ce risque : il ne porte qu'un titre, et il a tout
   l'écran. Mesuré sur Pixel (412 px) : 36 px occupaient deux lignes sur onze
   possibles. Le corps devient fluide, borné par la largeur ET par la hauteur,
   donc il ne peut pas déborder, même sur un écran court. */
@media (max-width: 860px) {
  main > :first-child.v3-chapter[data-ampleur] .v3-display:not(#_),
  main > :first-child.v3-chapter[data-ampleur=moyenne] .v3-display:not(#_) {
    font-size: min(11.6vw, 6.2svh, 58px);
    line-height: .98;
    letter-spacing: -.035em;
  }
}

/* --- Le nom de la page devient un repère ----------------------------------
   « AGENTS IA » flottait seul, sans rien qui le rattache au titre. Un filet
   cyan le précède : on lit un repère de chapitre, plus un mot égaré. Le point
   respire lentement — c'est le seul mouvement de l'écran, et il suffit à ce
   qu'il ne paraisse pas figé. */
main > :first-child.v3-chapter .v3-label-page:not(#_) {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(18px, 2.4svh, 28px);
}

main > :first-child.v3-chapter .v3-label-page::before {
  content: '';
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--n-cyan);
  box-shadow: 0 0 0 0 rgba(72, 185, 206, .55);
  animation: r-souffle 3.2s var(--n-ease) infinite;
}

main > :first-child.v3-chapter .v3-label-page::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  max-width: clamp(56px, 12vw, 160px);
  background: linear-gradient(to right, var(--n-cyan), transparent);
  opacity: .8;
}

@keyframes r-souffle {
  0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(72, 185, 206, .5); }
  35%           { box-shadow: 0 0 0 7px rgba(72, 185, 206, 0); }
}

/* --- Les six capacités deviennent un objet, pas une phrase ----------------
   « ÉCRIRE · RECHERCHER · ANALYSER · SYNTHÉTISER · CRÉER · ÉCOUTER » était
   posé en note grise, à 72 % d'opacité, replié sur deux lignes molles. C'est
   pourtant la seule preuve de substance de l'écran : ce que les agents font.
   Il devient une grille numérotée, chaque capacité sur son filet. Le balisage
   est produit par scripts/recette-20260921.js ; sans JavaScript, la phrase
   d'origine reste en place et reste lisible. */
.r-capacites {
  list-style: none;
  margin: clamp(18px, 2.6svh, 30px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 248, 234, .14);   /* les filets sont le fond qui perce */
  border-top: 1px solid rgba(255, 248, 234, .14);
  max-width: 46ch;
}

.r-capacites li {
  background: var(--n-ink);
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 11px 12px 12px 0;
}

.r-capacites li i {
  font-style: normal;
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--n-cyan);
  font-variant-numeric: tabular-nums;
}

.r-capacites li span {
  font-size: clamp(13px, 1.55svh, 15px);
  letter-spacing: .07em;
  text-transform: uppercase;
  line-height: 1.2;
}

@media (min-width: 861px) {
  .r-capacites { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .r-capacites li { padding-right: 20px; }
}

/* --- Dire que la page continue -------------------------------------------
   Rien, en bas du premier écran, n'annonçait la suite : le lecteur pouvait
   croire la page terminée. Un filet descend lentement dans la marge droite,
   là où l'écran est libre. Il est décoratif et ne prend ni le clavier ni le
   lecteur d'écran. Réservé aux écrans larges : sur téléphone, la marge droite
   est occupée par le bouton d'appel. */
@media (min-width: 861px) {
  main > :first-child.v3-chapter::before {
    content: '';
    position: absolute;
    right: calc(var(--n-gutter) - 1px);
    bottom: clamp(40px, 7svh, 88px);
    width: 1px;
    height: clamp(56px, 9svh, 92px);
    background: linear-gradient(to bottom, transparent, currentColor 45%, transparent);
    opacity: .3;
    z-index: 1;
    pointer-events: none;
    mask-image: linear-gradient(to bottom, #000 0 100%);
    animation: r-descente 2.6s var(--n-ease) infinite;
  }
}

@keyframes r-descente {
  0%        { transform: translateY(-38%); opacity: 0; }
  30%, 62%  { opacity: .42; }
  100%      { transform: translateY(38%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  main > :first-child.v3-chapter .v3-label-page::before,
  main > :first-child.v3-chapter::before { animation: none; }
}

/* --- Reprises après rendu -------------------------------------------------
   Trois écarts relevés à la capture, pas devinés. */

/* La grille des capacités touchait le bouton : zéro pixel entre les deux,
   mesuré à 412 et à 1440. Et elle n'avait de filet qu'en haut, ce qui la
   laissait ouverte par le bas. */
.r-capacites {
  border-bottom: 1px solid rgba(255, 248, 234, .14);
}

.r-capacites + .v3-button:not(#_) {
  margin-top: clamp(22px, 3.2svh, 34px);
}

/* Le premier écran portait, sur téléphone, 100 px de marge haute contre 46 en
   bas : le bloc centré retombait 58 px trop bas. Les deux marges se rejoignent,
   la hauteur d'écran du chapitre ne bouge pas. */
@media (max-width: 860px) {
  main > :first-child.v3-chapter:not(#_) {
    padding-top: clamp(44px, 6svh, 76px);
  }
}

/* --- Le système travaille -------------------------------------------------
   Un écran qui présente des agents et ne bouge pas d'un pixel se dément
   lui-même. Un trait cyan balaie le filet haut de la grille, une fois toutes
   les six secondes, puis s'efface. C'est le seul mouvement de la page avec la
   respiration du repère : assez pour qu'elle soit vivante, assez peu pour
   qu'on puisse lire. Arrêté net en mouvement réduit. */
.r-capacites {
  position: relative;
}

.r-capacites::before {
  content: '';
  position: absolute;
  inset: -1px auto auto 0;
  height: 1px;
  width: 34%;
  background: linear-gradient(to right, transparent, var(--n-cyan), transparent);
  animation: r-balayage 6s linear infinite;
  pointer-events: none;
}

@keyframes r-balayage {
  0%          { transform: translateX(-100%); opacity: 0; }
  8%          { opacity: .9; }
  34%         { opacity: .9; }
  42%, 100%   { transform: translateX(294%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .r-capacites::before { animation: none; opacity: 0; }
}

/* La deuxième colonne collait au filet vertical : son numéro le touchait.
   Les cellules reçoivent une gouttière interne, sauf celles de la première
   colonne, qui doivent rester alignées sur le titre. */
.r-capacites li { padding-left: 14px; }
.r-capacites li:nth-child(odd) { padding-left: 0; }

@media (min-width: 861px) {
  .r-capacites li:nth-child(odd) { padding-left: 14px; }
  .r-capacites li:nth-child(3n+1) { padding-left: 0; }
}

/* Colonnes égales en fractions : « RECHERCHER » débordait sous le filet de la
   colonne suivante, à 1440 comme à 1366. Chaque colonne part désormais de la
   largeur de son mot le plus long ; aucune ne peut plus rogner. */
.r-capacites:not(#_) {
  grid-template-columns: repeat(2, minmax(max-content, 1fr));
  width: fit-content;
  max-width: 100%;
}

@media (min-width: 861px) {
  .r-capacites:not(#_) {
    grid-template-columns: repeat(3, minmax(max-content, 1fr));
  }
}

/* --- Le repère devient un système ------------------------------------------
   Un seul écran tenu ne fait pas un site tenu. Le même repère — pastille cyan,
   filet qui s'efface — passe sur l'intitulé de chaque chapitre : « NOTRE
   APPROCHE », « NOS IMPLANTATIONS », « CE QUE NOUS FAISONS ». Ces mots étaient
   des mentions grises de 12 px posées au-dessus d'un titre ; ils deviennent le
   repère de lecture d'un chapitre, identique d'une page à l'autre.

   La respiration, elle, reste au seul premier écran : six pastilles qui
   palpitent dans une même page, ce n'est plus un signal, c'est un clignotant.
   Les intitulés de la clôture rose, centrés par nature, gardent leur axe. */
.v3-chapter > .v3-inner > .v3-label:not(.v3-label-page):not(#_),
.v3-chapter .v3-head .v3-label:not(#_),
.v3-rail-head .v3-label:not(#_) {
  display: flex;
  align-items: center;
  gap: 12px;
}

.v3-chapter > .v3-inner > .v3-label:not(.v3-label-page)::before,
.v3-chapter .v3-head .v3-label::before,
.v3-rail-head .v3-label::before {
  content: '';
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--n-cyan);
}

.v3-chapter > .v3-inner > .v3-label:not(.v3-label-page)::after,
.v3-chapter .v3-head .v3-label::after,
.v3-rail-head .v3-label::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  max-width: clamp(44px, 9vw, 120px);
  background: linear-gradient(to right, var(--n-cyan), transparent);
  opacity: .75;
}

/* Le cyan de marque n'est lisible que sur l'encre. Sur les quatre fonds clairs
   du site — cyan, menthe, crème, rose — il disparaît, littéralement : sur le
   parcours « Ce que nous produisons » de Visual IA, la pastille cyan posée sur
   un fond cyan ne se voyait pas du tout. Le repère y passe en encre, comme le
   reste du texte de ces chapitres. */
.v3-chapter:not([data-theme=ink]) .v3-label::before,
.v3-rail:not([data-theme=ink]) .v3-label::before {
  background: var(--n-ink);
  opacity: .55;
}

.v3-chapter:not([data-theme=ink]) .v3-label::after,
.v3-rail:not([data-theme=ink]) .v3-label::after {
  background: linear-gradient(to right, var(--n-ink), transparent);
  opacity: .32;
}

/* La clôture est centrée : le filet la décentrerait. */
.v3-cta > .v3-inner > .v3-label:not(#_) {
  justify-content: center;
}

.v3-cta > .v3-inner > .v3-label::after {
  display: none;
}

/* ===========================================================================
   Trois corrections qui ne s'appliquaient pas — contrôle du 21/09 au soir.

   J'ai relu chaque déclaration de ce fichier en demandant au navigateur, page
   par page, si elle gagnait réellement la cascade. Trois ne la gagnaient pas.
   Elles étaient écrites, elles étaient commentées, elles ne changeaient rien à
   l'écran. Les voici réparées, et la cause de chacune est notée : c'est la même
   erreur qui pourrait se reproduire.

   La cause commune : v3-niveau.css écrit ses règles avec « :not(#_) ». Ce
   sélecteur ne sélectionne rien de plus, mais il compte comme un identifiant
   dans le calcul de priorité. Une règle de classe ordinaire ne peut donc pas
   le surcharger, quel que soit l'ordre des fichiers.
   =========================================================================== */

/* --- Points 37, 51, 65, 77, 89 : le nom de la page ------------------------
   « Le titre est très petit ; on ne comprend pas que c'est le nom de la page. »
   Ma règle « .v3-label-page » perdait contre « .v3-label:not(#_) », qui fixe
   12 px. Mesuré : 12 px affichés sur les cinq pages, à 1440 comme à 412. */
.v3-label-page:not(#_):not(#_) {
  font-size: clamp(17px, 1.45vw, 22px);
  letter-spacing: .1em;
  font-weight: 600;
  opacity: 1;
}

@media (max-width: 720px) {
  .v3-label-page:not(#_):not(#_) {
    font-size: 16px;
  }
}

/* --- Point 43.1 : le titre des quatre familles ----------------------------
   « Le titre des 4 offres Marque, campagne, contenus, vidéos sont très
   petits. » Ma règle visait « #c2 .v3-kicker ». Or c2 n'est pas le parcours :
   c'est l'identifiant du titre h2 à l'intérieur. Le sélecteur ne désignait
   donc aucun élément de la page. On vise le parcours par ce qu'il annonce. */
[aria-labelledby="c2"] .v3-rail-item .v3-kicker:not(#_) {
  font-size: clamp(20px, 1.7vw, 25px);
  line-height: 1.15;
  letter-spacing: -.012em;
  font-weight: 600;
  opacity: 1;
  margin-bottom: clamp(8px, 1.3svh, 14px);
}

/* Premier essai, à 18,7 px : la famille et la promesse tombaient au même corps,
   à un cran de graisse près — 600 contre 700. Deux lignes grasses côte à côte
   ne font pas une hiérarchie, elles font une bouillie. Farès appelle « Marque,
   Campagnes, Contenus, Vidéo » le titre des quatre offres : c'est donc la
   famille qui porte le titre, et la promesse qui l'explique. La graisse de la
   promesse redescend, et seulement dans ce parcours-là. */
[aria-labelledby="c2"] .v3-rail-item h3:not(#_) {
  font-weight: 500;
}

/* --- Point 89.2 : l'accroche de Références --------------------------------
   « Réduire la taille du texte : Des entreprises aux enjeux différents. »
   Ma règle « #h2conf » perdait contre « .v3-chapter[data-ampleur] .v3-display
   :not(#_) », plus prioritaire malgré l'identifiant. Mesuré : 108 px affichés
   à 1440, là où la correction en demandait 44 au plus. */
#h2conf:not(#_):not(#_) {
  font-size: clamp(30px, 4.2vw, 60px);
  line-height: 1.08;
  letter-spacing: -.028em;
  max-width: 22ch;
}

/* Le palier retenu n'est pas arbitraire. Le titre de la page, sur cette même
   page, fait 95 px à 1440 : à 108 px, l'accroche passait devant lui, et c'est
   très exactement ce que dit le point 89.2 — elle rivalisait avec le nom de la
   page. À 60 px elle lui est clairement subordonnée, sans devenir une légende
   perdue au milieu d'un écran plein. Rapport mesuré : 0,63. */

/* La mention de bas de bloc traversait les 1313 px de la page, d'un bord à
   l'autre, en 13 px. Une ligne de texte ne se lit plus au-delà d'environ
   90 signes ; celle-ci en fait 137. */
.v3-chapter > .v3-inner > .v3-note:not(#_) {
  max-width: 64ch;
}