/* ============================================================ PROSE — LE PANNEAU DE DOCUMENT (bloc 5a vague B, 13/08) NAISSANCE : les cinq pages légales du site (mentions, confidentialité, CGV, droit de rétractation, politique de retour). Cinq documents de texte long, un seul geste — et un composant qui n'existait nulle part, pour une raison de fabrication : `_base.css` porte bien le socle d'ÉLÉMENTS (p, ul, a, strong) mais il n'est VOLONTAIREMENT PAS transporté dans le child theme (il repeindrait les pages encore rendues par le parent, refus du gate du bloc 1). Un paragraphe posé dans une de nos sections hérite donc aujourd'hui du rendu Kadence. Sur une bande de contenu, ça ne se voyait pas : trois phrases dans `.lcdi-band__texte`. Sur 30 paragraphes, 18 titres et 5 listes, si. RELEVÉ (live 1440 × 900 et 390 × 844, sondes `probe-5b-live-legales.js` et `probe-5b-panneau.js` du 13/08). Le live rend ces cinq pages sous DEUX formes, et la seconde est la plus récente : Mentions légales (2024) ....... bandeau de titre + colonne nue de 852 px Les 4 pages boutique (06/2026) pas de bandeau, H1 dans le contenu, et le texte dans un PANNEAU BLANC bordé : fond ......... #ffffff filet ........ 1 px #68a1b0 rayon ........ 8 px padding ...... 49,67 px (13,59 en 390) sur un fond .. #f5f8f9 largeur de texte 1141 px CE QUI EST REPRIS, ET CE QUI NE L'EST PAS : · le panneau EST repris — c'est la forme la plus récente, 4 pages sur 5, et ses quatre valeurs tombent EXACTEMENT sur des tokens du système (`--surface-raised`, `--border-accent`, `--radius-m`, `--space-7`) ; · la largeur de 1141 px NE l'est PAS : à 18 px de corps elle fait des lignes de plus de cent signes. Des deux mesures du live, on garde celle qui tient une mesure de lecture — Mentions légales, **852 px de texte**. ------------------------------------------------------------------ RETOUCHE R5 DU GATE (13/08, verdict de Julien) — LA COLONNE ÉTAIT TROP ÉTROITE Verdict : « 698 px de texte, c'est trop serré ; il faut que ça reste resserré mais là c'est trop. Cible : entre les deux, ordre de grandeur 850-950 px de texte à 1440. » CE QUI N'ALLAIT PAS, ET CE N'ÉTAIT PAS UN CHOIX : le paragraphe ci-dessus annonçait 852 px en visant `--container-narrow` (842). Il comparait une largeur de CONTENEUR à une largeur de TEXTE. Entre les deux il y a la marge de page du conteneur (2 × 24) et la marge intérieure du panneau (2 × 48) plus son filet (2 × 1) : 842 − 48 − 96 − 2 = **696 px de texte** — les 698 relevés par Julien. L'intention était juste, l'arithmétique fausse de 156 px. LE VÉHICULE EST LE PANNEAU, PAS LE CONTENEUR, et c'est ce qui répare la cause : la mesure de lecture est une propriété du DOCUMENT, pas de la grille de page. `--prose-max` porte donc la largeur du panneau ; le conteneur redevient le conteneur ordinaire. Modèle de boîte PROUVÉ avant d'écrire la valeur (sonde `probe-boxsizing.js`, 13/08) : `box-sizing: border-box`, un panneau de 950 px rend **exactement 852 px de texte**. La marge intérieure et le filet peuvent changer, la mesure de lecture suivra — c'est le prix de ce choix, et il est assumé : ces deux valeurs sont des relevés, elles ne bougeront pas. MESURE DE LECTURE CONSTATÉE, jamais estimée (sonde `probe-mesure-lecture.js`, 13/08 — avance moyenne du glyphe dans la fonte réellement servie, 7,79 px à 18 px de corps ; les trois pages mesurées donnent le même chiffre) : texte 696 px (avant) .... 89 signes/ligne texte 852 px (après) .... 109 signes/ligne ← le bas de la fourchette texte 1144 px (le live) .. 147 signes/ligne 109 signes reste au-dessus de la fourchette typographique classique (66-75) : c'est le verdict qui commande, et le bas de sa fourchette a été choisi pour cette raison. Signalé au rapport. ------------------------------------------------------------------ PAS D'INITIALE COLORÉE SUR CES TITRES, et c'est un relevé : le live ne pose aucun `` dans ces pages (sonde du 13/08, `markInitiale: aucune`). C'est une exception à l'écart A9 de la vague A2 (« tous les H2 portent la signature typographique »), et elle se tient toute seule : ces titres commencent par un NUMÉRO DE CHAPITRE (« 1. Principe », « 2. Échange de taille »). Une signature typographique qui colorise un chiffre n'est pas une signature. LES LIENS SONT SOULIGNÉS EN PERMANENCE, comme dans `.lcdi-table__actions` et pour la même raison : dans un pavé de texte légal, la seule couleur ne suffit pas à identifier un lien (WCAG 1.4.1). ============================================================ */ .lcdi-prose { /* 950 px de panneau = 852 px de texte (950 − 2 × 48 de marge intérieure − 2 × 1 de filet), la mesure que le live donne lui-même à Mentions légales. Sous cette largeur le panneau suit son conteneur : le téléphone ne voit jamais cette borne. */ --prose-max: 950px; max-width: var(--prose-max); margin-inline: auto; background: var(--surface-raised); border: 1px solid var(--border-accent); border-radius: var(--radius-m); padding: var(--space-7); font-family: var(--font-body); font-size: var(--type-body); line-height: var(--lh-body); color: var(--text-body); } /* --- Les titres de chapitre ------------------------------------------- Relevé : 39,04 px / 600 / #111 / Roboto Slab, marge haute 58,56 px, marge basse 19,52 px. Les trois premières valeurs SONT déjà celles du système (`--type-display`, `--weight-strong`, `--text-strong`, `--font-display`) : rien à convertir. Les deux marges reviennent sur les crans voisins de l'échelle (48 et 16). */ .lcdi-prose h2 { margin: var(--space-7) 0 var(--space-4); font-family: var(--font-display); font-size: var(--type-display); font-weight: var(--weight-strong); line-height: var(--lh-title); color: var(--text-strong); } .lcdi-prose h3 { margin: var(--space-6) 0 var(--space-4); font-family: var(--font-display); font-size: var(--type-title); font-weight: var(--weight-strong); line-height: var(--lh-snug); color: var(--text-strong); } /* Le premier bloc du document ne pousse pas contre le haut du panneau. */ .lcdi-prose > :first-child { margin-top: 0; } .lcdi-prose > :last-child { margin-bottom: 0; } /* --- Le corps ---------------------------------------------------------- Relevé 16 px ; le système rend 18 (`--type-body`, amélioration gravée au gate 1 de la DA, écart E4 du rapport A1). Marge basse 32 px = `--space-6`, valeur du relevé au pixel près. */ .lcdi-prose p { margin: 0 0 var(--space-6); color: var(--text-body); } .lcdi-prose ul, .lcdi-prose ol { margin: 0 0 var(--space-6); padding-left: var(--space-6); /* 32 px, relevé */ } .lcdi-prose ul { list-style: disc outside; } .lcdi-prose ol { list-style: decimal outside; } /* Marge NULLE entre deux entrées : c'est le relevé (`li0.marginBottom: 0px`). L'interligne du corps suffit à les séparer, et un cran d'écart ici ferait respirer les listes autrement que les paragraphes voisins. */ .lcdi-prose li { margin: 0; } .lcdi-prose li > ul, .lcdi-prose li > ol { margin-top: 0; margin-bottom: 0; } .lcdi-prose strong, .lcdi-prose b { font-weight: var(--weight-strong); color: var(--text-strong); } .lcdi-prose a { color: var(--link); text-decoration: underline; text-underline-offset: .2em; transition: color var(--t-quick) var(--ease-brand); } .lcdi-prose a:hover { color: var(--link-hover); } .lcdi-prose hr { border: 0; border-top: 1px solid var(--border-soft); margin: var(--space-6) 0; } /* --- La mention de mise à jour ---------------------------------------- Relevé sur les 4 pages récentes : un paragraphe en italique, centré, juste sous le titre du document. Il ne porte aucune autre différence — même corps, même encre. */ .lcdi-prose__maj { text-align: center; color: var(--text-body); /* le relevé : #444444, la MÊME encre que le corps */ } /* --- Le tableau ------------------------------------------------------- Un seul dans le lot (les durées de conservation, Politique de confidentialité, 9 lignes). Il ne réécrit rien : il porte `.lcdi-table` et `.lcdi-table-wrap`, le composant `doc-table.css` du registre, né au relevé de l'espace adhérent. Ce fichier ne fait que le remettre dans le rythme du document. */ .lcdi-prose .lcdi-table-wrap { margin: 0 0 var(--space-6); } /* --- Le formulaire embarqué ------------------------------------------- « Droit de rétractation » porte le formulaire Fluent Forms du site après sa prose (relevé). Il arrive dans `.lcdi-form`, le pont du registre, et n'a besoin ici que de sa respiration. */ .lcdi-prose .lcdi-form { margin-top: var(--space-7); } @media (max-width: 767px) { /* Relevé : 13,59 px de padding en 390 — le cran de l'échelle est 16. */ .lcdi-prose { padding: var(--space-4); } .lcdi-prose h2 { margin-top: var(--space-6); } }