/* ═══════════════════════════════════════════════════════════════════════════
   LA VITRINE — LA CHROME PARTAGÉE DES PAGES PUBLIQUES.

   POURQUOI CE FICHIER EXISTE (2026-09-08). La barre de navigation et le pied de
   page étaient RECOPIÉS dans chacune des pages publiques : landing, tarifs,
   marchés, fonctionnalités, blog, contact. Six copies du même balisage, six
   copies des mêmes règles, et déjà six états différents — la barre du hero
   était plate et collée en haut, celle des tarifs était une pilule flottante
   avec sa propre ombre ; le pied de la vitrine avait quatre colonnes, celui des
   tarifs deux lignes.

   C'est le même défaut que les vingt `:root` : ce n'est pas un système mal
   appliqué, ce sont six systèmes. Le balisage part dans deux fragments
   (`_vitrine_barre.html`, `_vitrine_pied.html`), les règles ici.

   ⚠ IL SE CHARGE APRÈS systeme.css ET AVANT le <style> de la page. Il ne
   déclare AUCUN jeton — il n'en lit que.

   ⚠ ET IL NE PORTE QUE LA CHROME, plus la mesure et les deux boutons. Ce qui
   est propre à une page reste dans sa page : le hero de la vitrine, la grille
   tarifaire, la FAQ. Une règle qui n'est lue que par un écran n'a rien à faire
   dans un fichier que six écrans chargent — c'est ce qui avait fait de
   pecunnia-premium.css une couche qu'on consultait pour comprendre ce qu'une
   autre couche venait de dire.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── LA MESURE ────────────────────────────────────────────────────────────
   Une seule largeur pour toute la vitrine, et des gouttières qui ne se
   négocient pas section par section. */
.v-mesure {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--esp-5);
}
.v-sec { padding-block: clamp(var(--esp-8), 9vw, var(--esp-9)); }
.v-sec + .v-sec { border-top: 1px solid var(--border); }

/* Le fond alterné. UNE seule variante, et c'est une SURFACE du système, pas une
   teinte inventée pour une page. */
.v-gris { background: var(--surface-2); }

/* ─── LA TÊTE DE SECTION ───────────────────────────────────────────────────
   Titre + chapô, alignés à gauche, mesure de lecture bornée. Il n'y a pas
   d'étiquette au-dessus : « Fonctionnalités » posé sur « Le cours, et ce qui se
   dit autour » ne disait rien que le titre ne disait mieux. */
.v-tete { max-width: 46rem; margin-bottom: var(--esp-7); }

/* ─── LE RYTHME DE LA VITRINE, ET SA HIÉRARCHIE ────────────────────────────

   ⚠ CES RÈGLES ÉTAIENT DANS LE BLOC `<style>` DE `landing.html`, ET ELLES Y
   ÉTAIENT SEULES. Elles sont montées ici le 2026-09-10 (lot 8), quand
   `/abonnement` est devenue la deuxième page à s'en servir, et six pages
   publiques suivent au lot 11 (`/marches`, `/fonctionnalites`, le glossaire,
   les personas, `/blog`, `/contact`). C'est la règle du § 4.2.3 de
   docs/refonte/DESIGN.md : un composant employé par ≥ 2 pages publiques
   descend dans la feuille partagée, et la page ne le redéclare pas.

   ⚠ CE QUI N'EST PAS MONTÉ, ET C'EST LA MOITIÉ DE LA RÈGLE : l'affiche à
   76 px, le compte du catalogue, les étapes et la grille tarifaire restent
   dans `landing.html`. Ce sont les moments PROPRES de cette page-là ; les
   imposer aux autres depuis ici referait, en plus discret, l'erreur des vingt
   `:root` de l'audit.

   TROIS REGISTRES DE VIDE, et le rapport du plus large au plus serré est de
   4 pour 1. C'est ce RAPPORT qui se voit, pas les valeurs.
   ⚠ `.v-fin` ne se pose que sur une section suivie d'un CHANGEMENT DE FOND.
   Sur deux sections du même blanc, le vide du haut de la suivante fait déjà
   tout le travail : poser les deux les additionne — 128 + 128 = 256 px
   partout, c'est-à-dire le pas unique qu'on venait de casser, en plus large.
   Un espacement ne se décide pas par bloc, il se décide par JOINTURE. */

.v-air-l { padding-top: clamp(var(--esp-8), 11vw, var(--esp-10)); }
.v-air-m { padding-top: clamp(var(--esp-7), 7vw, var(--esp-9)); }
.v-air-s { padding-top: var(--esp-6); }
.v-fin   { padding-bottom: clamp(var(--esp-8), 9vw, var(--esp-9)); }

/* La tête de section en DEUX colonnes : le titre court à gauche, la phrase qui
   le précise à droite. Elle remplace l'étiquette en capitales dorées posée
   au-dessus d'un titre centré — l'« eyebrow » nommé au R7-(5). */
.v-titre {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  gap: var(--esp-5) var(--esp-8);
  align-items: baseline;
  margin-bottom: var(--esp-7);
}
.v-titre h2 {
  font-size: clamp(var(--txt-2xl), 3vw, var(--txt-3xl));
  line-height: var(--inter-titre); letter-spacing: var(--appr-affiche);
  max-width: 16ch;
}
.v-titre-note {
  font-size: var(--txt-md); line-height: var(--inter-texte);
  color: var(--text-ter); max-width: 46ch;
}

/* UN MAJEUR, DEUX MINEURS — à la place de la grille de trois blocs identiques
   icône + titre + paragraphe (INTERDIT I-8). Le filet de 2 px contre le
   cheveu : c'est là que se lit la hiérarchie, et elle se lit sans qu'aucun des
   trois ne devienne une carte. */
.v-duo {
  display: grid; grid-template-columns: 1.45fr 1fr;
  gap: var(--esp-7) var(--esp-8); align-items: start;
}
.v-majeur { border-top: 2px solid var(--text); padding-top: var(--esp-5); }
.v-majeur h3 { font-size: var(--txt-2xl); font-weight: 600; letter-spacing: var(--appr-titre); }
.v-majeur p {
  margin-top: var(--esp-4); font-size: var(--txt-lg);
  line-height: var(--inter-texte); color: var(--text-sec); max-width: 42ch;
}
.v-mineurs { display: grid; gap: var(--esp-6); }
.v-mineur { border-top: 1px solid var(--border); padding-top: var(--esp-4); }
.v-mineur h3 { font-size: var(--txt-md); font-weight: 600; }
.v-mineur p {
  margin-top: var(--esp-2); font-size: var(--txt-sm);
  line-height: var(--inter-texte); color: var(--text-sec);
}
/* Les étiquettes d'un bloc majeur. ⚠ TOUTES DE LA MÊME ENCRE : « une étiquette
   sur quatre en doré » n'est aucun des quatre emplois de l'or (§ 3.4), et le
   doré y disait « celle-ci compte plus », ce qu'aucune ligne n'affirme. */
.v-etiq { margin-top: var(--esp-5); display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.v-etiq span {
  font-size: var(--txt-3xs); color: var(--text-ter);
  padding: var(--esp-1) var(--esp-2);
  border: 1px solid var(--border); border-radius: var(--rayon-xs);
}

/* ⚠ LA BASCULE EST A 1024 ET NON A 768 : c'est la largeur mesuree sur la
   vitrine ou 16ch a gauche et 46ch a droite cessent de cohabiter sans se
   couper. Elle vient de `landing.html`, ou elle etait deja reglee ; elle monte
   avec les regles qu'elle regle, sinon la page qui les employait garderait
   seule le reglage qui les rend utilisables. */
@media (max-width: 1024px) {
  .v-titre, .v-duo { grid-template-columns: minmax(0, 1fr); }
  .v-duo { gap: var(--esp-6); }
  .v-titre h2 { max-width: none; }
  .v-majeur p { max-width: none; }
}
.v-tete h2 {
  font-size: clamp(var(--txt-3xl), 3.6vw, var(--txt-4xl));
  letter-spacing: var(--appr-affiche);
}
.v-chapo {
  margin-top: var(--esp-3);
  font-size: var(--txt-lg);
  line-height: var(--inter-texte);
  color: var(--text-sec);
  max-width: var(--lisible);
}

/* ─── LES BOUTONS ──────────────────────────────────────────────────────────
   Deux, et pas un troisième. L'or est l'action primaire — c'est l'un des quatre
   seuls endroits où il paraît (avec le « P », l'état suivi et le filet de la
   section courante). */
.v-btn, .v-btn-2 {
  display: inline-flex; align-items: center; gap: var(--esp-2);
  padding: var(--esp-3) var(--esp-5);
  border-radius: var(--rayon-sm);
  font-size: var(--txt-sm); font-weight: 600;
  letter-spacing: var(--appr-normal);
  text-decoration: none; white-space: nowrap;
  transition: background var(--vite) var(--ease), border-color var(--vite) var(--ease);
}
.v-btn { background: var(--or); color: var(--on-or); border: 1px solid transparent; }
.v-btn:hover { background: var(--or-dark); }
.v-btn-2 { background: transparent; color: var(--text); border: 1px solid var(--border-2); }
.v-btn-2:hover { background: var(--surface-2); border-color: var(--text-ter); }

/* La seule ombre dorée de la vitrine : l'action primaire d'un hero. */
.v-btn-hero { padding: var(--esp-4) var(--esp-6); font-size: var(--txt-md); box-shadow: var(--ombre-or); }
.v-btn-hero + .v-btn-2 { padding: var(--esp-4) var(--esp-6); font-size: var(--txt-md); }

/* La ligne de réassurance sous une action.

   ⚠ LES COCHES SONT PARTIES (2026-09-10, lot 1). Chaque item portait un ✓ doré,
   et la même page en comptait DIX-SEPT — trois ici, douze dans les deux cartes
   tarifaires, deux sous les tarifs. Le test est celui de la structure : si je le
   retire, quelle information disparaît ? Aucune. Une coche ne dit quelque chose
   que si une ligne voisine est DÉCOCHÉE ; aucune ne l'est nulle part sur cette
   page. Elle ne marquait donc pas un contenu, elle marquait un gabarit.

   Ce qui reste pour séparer les items est un FILET, et lui encode bien quelque
   chose : la frontière entre deux réassurances qui, à cette taille et sans
   marqueur, se lisaient comme une seule phrase hachée. Le point médian aurait
   fait le même travail — c'est le motif « A · B · C », et il paraît quel que
   soit le sujet. */
.v-friction {
  margin-top: var(--esp-5); padding: 0; list-style: none;
  display: flex; flex-wrap: wrap;
  font-size: var(--txt-2xs); color: var(--text-ter);
}
.v-friction li { padding-inline: var(--esp-4); }
.v-friction li:first-child { padding-left: 0; }
.v-friction li + li { border-left: 1px solid var(--border); }

/* ═══ LA BARRE ═════════════════════════════════════════════════════════════ */

.v-barre {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color var(--vite) var(--ease);
}
.v-barre.defile { border-bottom-color: var(--border); }
.v-barre-in {
  max-width: var(--maxw); margin-inline: auto;
  padding: var(--esp-3) var(--esp-5);
  display: flex; align-items: center; gap: var(--esp-6);
}

.v-logo { display: flex; align-items: center; gap: var(--esp-2); text-decoration: none; }
.v-logo-p { width: 22px; height: auto; display: block; }
/* ⚠ LE « P » EST UN APLAT, PAS UN DÉGRADÉ. Le dégradé à trois arrêts
   (#ecd08a → #dcb968 → #b8963e) était la rampe du thème SOMBRE, et il claquait
   sur du blanc. La marque se lit mieux d'un seul or, et elle suit maintenant le
   thème : sur le pied de page sombre, ce même balisage rend l'or clair sans
   qu'une seconde version du logo existe. */
.v-logo-p .corps { fill: var(--or); }
.v-logo-p .trou  { fill: var(--bg); }
.v-logo-txt {
  font-size: var(--txt-lg); font-weight: 600;
  letter-spacing: var(--appr-titre); color: var(--text);
}

.v-liens { display: flex; gap: var(--esp-5); list-style: none; margin-inline: auto; }
.v-lien {
  font-size: var(--txt-sm); color: var(--text-sec); text-decoration: none;
  padding-block: var(--esp-2);
  border-bottom: 2px solid transparent;
  transition: color var(--vite) var(--ease);
}
.v-lien:hover { color: var(--text); }
/* Le filet doré de la section courante — le quatrième et dernier emploi de
   l'or sur la vitrine. */
.v-lien.actif { color: var(--text); border-bottom-color: var(--or); }

.v-barre-actions { display: flex; align-items: center; gap: var(--esp-3); }
.v-barre-actions .v-btn { padding: var(--esp-2) var(--esp-4); }
.v-connexion {
  font-size: var(--txt-sm); font-weight: 500; color: var(--text-sec);
  text-decoration: none; padding: var(--esp-2);
}
.v-connexion:hover { color: var(--text); }

.v-burger {
  display: none; flex-direction: column; gap: 4px;
  background: none; border: 0; cursor: pointer; padding: var(--esp-2);
}
.v-burger span { display: block; width: 20px; height: 2px; background: var(--text); border-radius: 2px; }

.v-menu { display: none; flex-direction: column; padding: var(--esp-3) var(--esp-5) var(--esp-5); border-top: 1px solid var(--border); }
.v-menu.ouvert { display: flex; }
.v-menu a {
  padding: var(--esp-3) 0; font-size: var(--txt-md); color: var(--text-sec);
  text-decoration: none; border-bottom: 1px solid var(--border);
}
.v-menu a:last-child { border-bottom: 0; }
.v-menu .v-menu-cta { color: var(--or-texte); font-weight: 600; }

/* ═══ LE SEUIL ET LE PIED ══════════════════════════════════════════════════
   `data-theme="dark"` posé sur le conteneur, et rien d'autre : mêmes classes,
   mêmes jetons, aucune couleur réécrite. La vitrine est le dehors (blanc), le
   produit est le dedans (charbon), et le bas de page est la porte. C'est aussi
   la vérification la moins coûteuse qu'un seul système sert bien les deux
   thèmes. */
.v-bas { background: var(--bg); color: var(--text); }

.v-pied { border-top: 1px solid var(--border); padding-block: var(--esp-8) var(--esp-6); }
.v-pied-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--esp-7) var(--esp-6); }
.v-pied-desc { margin-top: var(--esp-4); font-size: var(--txt-sm); line-height: var(--inter-texte); color: var(--text-sec); max-width: 34ch; }
.v-pied-amf { margin-top: var(--esp-4); font-size: var(--txt-3xs); line-height: var(--inter-ui); color: var(--text-ter); max-width: 42ch; }
.v-pied-titre { font-size: var(--txt-2xs); font-weight: 600; color: var(--text); margin-bottom: var(--esp-4); }
.v-pied-liens { list-style: none; display: grid; gap: var(--esp-3); }
.v-pied-liens a { font-size: var(--txt-sm); color: var(--text-ter); text-decoration: none; }
.v-pied-liens a:hover { color: var(--text); }
.v-pied-sep { margin-top: var(--esp-7); border: 0; border-top: 1px solid var(--border); }
.v-pied-bas {
  padding-top: var(--esp-5);
  display: grid; grid-template-columns: auto 1fr; gap: var(--esp-5);
  align-items: start;
}
.v-pied-copy { font-size: var(--txt-2xs); color: var(--text-ter); margin-bottom: var(--esp-3); }
.v-pied-disc { font-size: var(--txt-3xs); line-height: var(--inter-ui); color: var(--text-ter); text-align: right; max-width: 62ch; justify-self: end; }

/* ═══ LES LARGEURS ═════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .v-pied-cols { grid-template-columns: 1fr 1fr 1fr; }
  .v-pied-cols > :first-child { grid-column: 1 / -1; }
}

/* ⚠ UN SEUL POINT DE BASCULE POUR LA BARRE, ET IL EST À 940 px. Les liens
   disparaissaient à 1024 et le bouton du menu n'apparaissait qu'à 768 : entre
   les deux, la navigation n'était joignable NULLE PART. Une largeur où l'on
   masque un menu est une largeur où l'on en montre un autre. */
@media (max-width: 940px) {
  .v-liens, .v-barre-actions { display: none; }
  .v-burger { display: flex; }
  .v-barre-in { justify-content: space-between; gap: var(--esp-3); }
}

@media (max-width: 768px) {
  /* ⚠ CETTE RÈGLE NEUTRALISE mobile.css, ET C'EST DÉLIBÉRÉ. Cette feuille est
     chargée après et pose `html, body { overflow-x: hidden !important }` puis
     `body { overflow: auto !important }`. L'un comme l'autre font de <body> un
     conteneur de défilement, ce qui tue tout `position: sticky` — la barre du
     haut décrochait au premier défilement, sur mobile uniquement. `clip` borne
     le débordement sans créer ce conteneur ; `html body` (0,0,2) bat `body`
     (0,0,1). */
  html body { overflow: visible !important; overflow-x: clip !important; }

  .v-pied-cols { grid-template-columns: 1fr 1fr; }
  .v-pied-bas { grid-template-columns: 1fr; }
  .v-pied-disc { text-align: left; justify-self: start; }
}

@media (max-width: 600px) {
  .v-btn-hero, .v-btn-hero + .v-btn-2 { width: 100%; justify-content: center; }
  /* ⚠ LE FILET SÉPARATEUR NE SURVIT PAS AU RETOUR À LA LIGNE. Une rangée qui se
     replie pose le premier item de la seconde ligne contre un filet qui ne
     sépare plus rien — il ouvre la ligne au lieu de la couper. En colonne, c'est
     le retour à la ligne lui-même qui sépare, et le filet n'a plus d'emploi. */
  .v-friction { flex-direction: column; gap: var(--esp-2); }
  .v-friction li { padding-inline: 0; }
  .v-friction li + li { border-left: 0; }
}

@media (max-width: 440px) {
  .v-mesure { padding-inline: var(--esp-4); }
  .v-barre-in { padding-inline: var(--esp-4); }
  .v-pied-cols { grid-template-columns: 1fr; }
}


/* ─── LA GRILLE TARIFAIRE ──────────────────────────────────────────────────

   ⚠ MONTÉE DE `landing.html` LE 2026-09-10 (lot 8), quand `/abonnement` est
   devenue la deuxième page à vendre les deux mêmes offres. Elle les rendait
   jusque-là en deux CARTES arrondies dont l'une teintée, avec une pastille
   dorée qui chevauchait le bord supérieur, un survol qui soulève de 3 px et
   six coches par colonne dont aucune n'a jamais de jumelle décochée
   (INTERDIT I-4, I-10, I-11, I-15).

   ⚠ ET LES DEUX COLONNES GARDENT DES LARGEURS ÉGALES. C'est l'exception
   nommée de l'INTERDIT I-13 : quand le contenu est réellement ÉGAL — deux
   offres qu'on compare — une largeur inégale fausse la comparaison avant
   qu'elle soit lue. */

.v-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-8); }
.v-plan {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--border-2);
  padding-top: var(--esp-5);
}
/* Le filet de 2 px, et il est le seul or de la section. Même geste que
   `.v-majeur` et `.v-cat-tete` : l'épaisseur DIT le rang. */
.v-plan.reco { border-top: 2px solid var(--or); }

/* ⚠ LE BADGE REJOINT LE NOM SUR LA MÊME LIGNE, et ce n'est pas cosmétique :
   posé au-dessus, il décalait toute la colonne de gauche d'une hauteur de
   ligne, et les deux prix ne s'alignaient plus. Deux offres qu'on compare se
   comparent à la même hauteur. La pastille — aplat, bordure, rayon pilule —
   part : `--or-texte` (#8A6A00) donne 4,62:1 sur `--surface-2`, il se lit
   sans avoir besoin d'un fond à lui. */
.v-plan-tete {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--esp-2) var(--esp-3);
}
.v-plan-badge { font-size: var(--txt-3xs); font-weight: 600; color: var(--or-texte); }
.v-plan-nom { font-size: var(--txt-sm); font-weight: 600; color: var(--text-ter); }
/* ⚠ LE PRIX N'EST PAS UNE COLONNE, IL EST UN TITRE. En --f-mono, la chassée
   écartait « 19,99 € / mois » sur toute la largeur de la carte et donnait à
   la seule ligne qu'on vient lire l'allure d'un relevé. La chassée sert ce
   que les chiffres tabulaires n'alignent pas — le signe, la lettre, le
   séparateur d'une colonne du Terminal. */
.v-plan-prix {
  margin-top: var(--esp-2);
  font-size: var(--txt-3xl); font-weight: 600;
  letter-spacing: var(--appr-titre); color: var(--text);
}
/* ⚠ L'ÉCONOMIE REJOINT LA FACTURATION SUR LA MÊME LIGNE, pour la raison qui
   a fait monter le badge : posée dessous, elle décalait la liste d'avantages
   de gauche d'une ligne entière, et les deux listes — qui sont mot pour mot
   les mêmes — ne se lisaient plus en vis-à-vis. La pastille verte part avec
   la dorée : `--green` (#0d6b46) donne 5,9:1 sur la bande grise. */
.v-plan-sous {
  margin-top: var(--esp-2);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--esp-1) var(--esp-4);
  font-size: var(--txt-sm); color: var(--text-sec);
}
.v-plan-eco { font-size: var(--txt-2xs); font-weight: 600; color: var(--green); }
/* ⚠ `0 auto` EN BAS, ET DANS CE RACCOURCI-CI. Une règle `margin-bottom: auto`
   posée plus haut était remise à zéro par ce `margin` raccourci — la
   collision de cascade classique, invisible à la lecture de l'une ou l'autre
   règle prise seule. C'est cet `auto` qui pousse le bouton au bas de la carte
   la moins remplie. */
.v-plan-feats { list-style: none; margin: var(--esp-6) 0 auto; padding: 0; display: grid; gap: var(--esp-3); }
/* ⚠ LA COLONNE DE 16 px A DISPARU AVEC LES COCHES. Elle n'existait que pour
   les tenir ; sans elles, une liste d'avantages est une liste de phrases. */
.v-plan-feats li {
  font-size: var(--txt-sm); line-height: var(--inter-ui); color: var(--text-sec);
}
/* ⚠ LE `margin-top` EST UN PLANCHER, PAS UNE MARGE DÉCORATIVE. Le `auto` de
   la liste pousse le bouton au bas de la carte LA MOINS remplie ; sur la plus
   remplie il ne reste rien, et la dernière ligne venait se coller au bouton.
   Un `auto` ne garantit jamais un minimum. */
/* ⚠ LE BOUTON NE TRAVERSE PLUS LA COLONNE. Il le faisait parce qu'il était
   posé DANS une carte : un bouton pleine largeur est le geste d'une boîte,
   pas d'une colonne ouverte. Aligné à gauche comme tout le reste de la page,
   il retrouve la même arête que les six lignes au-dessus de lui. */
.v-plan .v-btn, .v-plan .v-btn-2 { align-self: flex-start; margin-top: var(--esp-6); }
.v-plan-note { margin-top: var(--esp-3); font-size: var(--txt-2xs); color: var(--text-ter); }

/* La bande grise qui porte la section. Elle monte avec les règles qu'elle
   porte : un fond sans elles ne sert à rien. */
.v-gris-tarif { background: var(--surface-2); }

@media (max-width: 768px) {
  /* Empilées, les deux colonnes n'ont plus besoin de 64 px entre elles : le
     filet du haut de la seconde fait déjà la séparation. */
  .v-plans { grid-template-columns: 1fr; gap: var(--esp-7); }
}

@media (max-width: 600px) {
  /* Au doigt, un bouton qui traverse la mesure est plus facile à viser qu'un
     bouton aligné à gauche, et la colonne n'a plus de voisine à sa droite. */
  .v-plan .v-btn, .v-plan .v-btn-2 { align-self: stretch; justify-content: center; }
  .v-plan-note { text-align: center; }
}


/* ─── LES QUATRE PAGES LÉGALES ─────────────────────────────────────────────

   ⚠ ELLES PORTAIENT 115 ATTRIBUTS `style=` EN LIGNE ET AUCUN BLOC `<style>` —
   43 % de toute la dette du dépôt à elles quatre. Elles n'avaient pas de mise
   en page : elles avaient des styles écrits BALISE PAR BALISE, dix-huit
   variantes pour treize formes, et rien qui garantisse que la même chose
   s'écrive pareil d'une page à l'autre. Mesuré : le paragraphe existait en
   cinq écritures, l'interligne en 1.7 et en 1.8, le retour en deux.

   Elles sont ici, dans la feuille partagée, parce qu'elles sont QUATRE pages
   publiques à employer les mêmes formes (§ 4.2.3). ⚠ Et pas une clause n'a été
   ouverte : la conversion n'a remplacé que des attributs `style` par des
   attributs `class`.

   ⚠ VINGT-DEUX CARTES ARRONDIES POUR VINGT-DEUX ARTICLES. C'est le motif n° 4
   de la calibration posé sur un texte de loi — or un document juridique est un
   texte CONTINU, numéroté, qu'on lit d'un bout à l'autre ou qu'on parcourt
   pour trouver un article. Le cadre et le rayon n'encodaient rien ; le filet
   de tête, lui, dit où un article commence. */

/* ⚠ LA MESURE DE LECTURE, ET ELLE NE S'APPLIQUAIT PAS. Le `<main>` portait
   `class="container lg-page"` ; `.container` de `style.css` borne a 1 300 px
   et cette feuille-la se charge APRES `vitrine.css` — a specificite egale, la
   derniere declaree gagne. Mesure a 1 440 px : les clauses couraient sur
   1 750 px, environ 200 signes par ligne, deux fois et demie la borne du
   depot. `.container` est retiree du balisage et `.lg-page` porte les trois
   declarations qu'elle apportait. */
.lg-page {
  flex: 1;
  max-width: var(--lisible);
  margin: 0 auto;
  padding: var(--esp-6) var(--esp-5) var(--esp-9);
}
/* Le titre. 900 et 800 sont des graisses SYNTHÉTISÉES par le navigateur —
   Inter s'arrête à 700 dans ce dépôt (§ 2.1) — et -0.04em n'est aucune des
   trois approches du système. */
.lg-titre {
  font-size: var(--txt-3xl); font-weight: 600;
  letter-spacing: var(--appr-titre); color: var(--text);
  margin: 0 0 var(--esp-2);
}
.lg-date { color: var(--text-ter); font-size: var(--txt-sm); margin-bottom: var(--esp-7); }

.lg-retour {
  display: inline-flex; align-items: center; gap: var(--esp-2);
  font-size: var(--txt-xs); color: var(--text-sec);
  text-decoration: none; margin-bottom: var(--esp-6);
}
.lg-retour:hover { color: var(--text); }
.lg-retour-bas { margin-bottom: 0; margin-top: var(--esp-7); }

.lg-corps { display: flex; flex-direction: column; gap: var(--esp-6); }
.lg-corps-suite { margin-top: var(--esp-7); }

.lg-art { border-top: 1px solid var(--border); padding-top: var(--esp-4); }
.lg-art-t {
  font-size: var(--txt-md); font-weight: 600; color: var(--text);
  letter-spacing: var(--appr-titre); margin: 0 0 var(--esp-3);
}
.lg-p {
  font-size: var(--txt-sm); color: var(--text-sec);
  line-height: var(--inter-texte); margin: 0;
}
.lg-p-avant { margin-bottom: var(--esp-3); }
.lg-p-apres { margin-top: var(--esp-3); }
.lg-liste {
  font-size: var(--txt-sm); color: var(--text-sec);
  line-height: var(--inter-texte); margin: 0; padding-left: var(--esp-5);
}
.lg-fort { color: var(--text); }
.lg-lien { color: var(--or-texte); text-decoration: none; }
.lg-lien:hover { text-decoration: underline; text-underline-offset: 3px; }
.lg-or   { color: var(--or-texte); }