/* ═══════════════════════════════════════════════════════════════════════════ EasyPDF — reflow v1 · ce qui doit tenir à 320 px, remplissage +40 % compris --------------------------------------------------------------------------- POURQUOI CE FICHIER EXISTE PLUTÔT QUE TROIS LIGNES DANS `easypdf-v3.css` `landing/_headers` sert `/assets/*` en `immutable, max-age=31536000`, et la règle installée par M25 (tranchée par laurent le 2026-08-03) est explicite : « dans `landing/assets/`, UN CONTENU QUI CHANGE CHANGE DE NOM ». Le premier déploiement réel a eu lieu le 2026-08-02 et il a servi `easypdf-v3.css` : des visiteurs portent donc ce nom en cache pour un an. Modifier son contenu les y laisserait. Renommer `easypdf-v3.css` en `-v4` propagerait dans onze HTML, deux harnais et une dizaine de références documentaires pour trois règles. Le dépôt a déjà tranché ce compromis deux fois dans le même sens — `carousel-v4.css` puis `langtop-v4.css` (« ses ajouts vivant dans langtop-v4.css, fichier neuf », ASSET-FINGERPRINTS.json, sceau du 2026-08-02) : un NOM NEUF n'a jamais été servi, donc il ne peut périmer aucun cache. Ce fichier suit ce précédent. ⚠️ ORDRE DES RÈGLES. Trois des règles ci-dessous BATTENT une déclaration de `easypdf-v3.css` ou de `carousel-v4.css` à spécificité ÉGALE. Le `` de ce fichier doit donc rester le DERNIER de chaque ``. Le déplacer plus haut le rendrait silencieusement inopérant — c'est le défaut exact que l'en-tête d'`easypdf-v3.css` documente déjà deux fois. --------------------------------------------------------------------------- CE QUE CE FICHIER FERME — AC-4 de la story 1.7, MESURÉ, PAS SUPPOSÉ --------------------------------------------------------------------------- `node tools/ux/largeur-pseudo.mjs` rend la landing en pseudo-locale +40 % aux largeurs déclarées et lit la géométrie du DOM. Le 2026-08-03 il sortait en exit 1, et la trouvaille la plus grave était un DÉFILEMENT HORIZONTAL DE LA PAGE à 320 px sur `mentions-legales/` — A11Y-18, WCAG 1.4.10 Reflow AA, sur une page légale, en français ET en espagnol. Le décompte n'est pas recopié ici : il change à la première retouche, et c'est la commande qui fait foi. Les trois mécanismes, eux, sont stables. ⚠️ CE QUI EST REFUSÉ ICI, ET POURQUOI C'EST ÉCRIT. `overflow-x:hidden` sur le corps de page aurait rendu le harnais vert en une ligne. Il ne corrige rien : il MASQUE le débordement et rend le contenu débordé inatteignable, ce qui échange une violation de 1.4.10 contre une perte de contenu. Aucune des règles ci-dessous ne cache quoi que ce soit — toutes rendent une boîte capable de contenir son texte. ═══════════════════════════════════════════════════════════════════════════ */ /* ── 1. LES TITRES — un mot plus long que sa colonne se COUPE, il ne déborde pas MESURÉ : `legal.representant.h2` et `legal.confidentialite.journaux.h2` en espagnol, à 320 px, rendaient 283 px de contenu dans une boîte de 280. La cause n'est pas la phrase mais UN MOT : `PSEUDO_PAD_CHUNK` est plafonné au plus long mot réel du corpus entier (une vingtaine de graphèmes), ce qui est conservateur à 15 px et AGRESSIF sur un titre — le même mot mesure plus de 290 px à la taille d'un h2. C'est le mécanisme du §6 point 4 de `docs/ux/BUDGET_DE_LARGEUR.fr.md`, et il n'est pas un défaut du générateur : une traduction allemande produit ce genre de mot. La réponse est donc la RÈGLE I18N 10, déjà en production sur `.wz-block__label` et `.cas__tab` : « un libellé plus long passe sur deux lignes ; il ne se tronque jamais et ne rétrécit jamais la police. » Elle n'était simplement pas appliquée aux titres. `overflow-wrap:break-word` ne coupe QUE lorsque le mot ne tient pas sur une ligne à lui seul : sur tout le corpus réel, aucun titre ne change. */ h1,h2,h3{overflow-wrap:break-word; hyphens:auto} /* ── 2. LES LIBELLÉS DE BOUTON — deux lignes plutôt qu'une page qui défile MESURÉ, et c'est la trouvaille qui portait A11Y-18 : · `home.pied.lien_confidentialite` (`a.btn.btn--ghost` de `mentions-legales/`) rendait une boîte de 380,7 px dans un `p.cta-row` qui n'en offre que 280 à 320 px de large. Le bouton dépassant du `.wrap`, la PAGE défilait — `scrollWidth` 401 pour un `clientWidth` de 320. Le même bouton en espagnol donnait 329 pour 320 ; · `home.demo.cta_repli` (`button.btn--xl` de l'accueil) rendait 252,2 px dans un `p.js-only` qui n'en offre que 228. POURQUOI LE REMBOURRAGE NE SUFFIT PAS, ET C'EST UNE MESURE, PAS UN AVIS. `easypdf-v3.css` l. 227-231 pose la doctrine : « c'est le REMBOURRAGE qui cède sur les petits écrans, jamais le texte ». Elle a été essayée en premier et elle est INSUFFISANTE ICI : l'ENCRE SEULE du libellé fautif mesure 327,1 px pour 280 px offerts. Le remboursement total (2 × 1,55 rem + 2 × 2 px de bordure = 53,6 px) ne comble pas un écart de 100,7 px. Même à remplissage nul, ce bouton déborde de 47 px. Aucun réglage de `padding` ne ferme A11Y-18. CE QUE CETTE RÈGLE CHANGE, ET CE QU'ELLE NE CHANGE PAS. `.btn` est `inline-flex` : sa largeur est un `shrink-to-fit`, c'est-à-dire `min(max-content, place disponible)`. Tant que la place existe, `max-content` gagne et le libellé reste SUR UNE LIGNE — exactement le rendu d'aujourd'hui. Vérifiable sur le cas le pire : « Politique de confidentialité » sans pseudo-locale mesure environ 272 px de boîte pour 280 px offerts, donc une ligne. La règle ne mord QUE là où l'alternative est un débordement. ⚠️ ÉCART ASSUMÉ AVEC `IDENTITE_VISUELLE.fr.md` §5, qui écrit « un libellé de bouton ne se coupe jamais (`white-space:nowrap`) ». L'INTENTION — « ne se coupe jamais » — est tenue : rien n'est tronqué, rien n'est rétréci, le libellé reste intégralement lisible. C'est le MÉCANISME cité entre parenthèses qui cède, parce qu'il est la cause directe et mesurée d'une violation WCAG 1.4.10, et que le contrat du dépôt est WCAG 2.2 AA. La formulation de §5 relève de laurent : elle n'est pas réécrite ici. Le dépôt a déjà arbitré ce même conflit dans ce sens pour `.wz-block__label` et `.cas__tab` (règle i18n 10), tous deux postérieurs à §5. */ .btn{white-space:normal; overflow-wrap:break-word; hyphens:auto; text-align:center} /* ── 3. LE CARTOUCHE DU SÉLECTEUR DE CAS — faire AGIR une règle déjà écrite MESURÉ : `home.cas.acces.onglet` en espagnol, à 320 px, rendait un `span` de 80 px dans un `label.cas__tab` qui n'en offre que 72,8. `carousel-v4.css` l. 152-154 déclare DÉJÀ `overflow-wrap:break-word` et `hyphens:auto` sur `.cas__tab`, avec la règle i18n 10 en commentaire. Cette déclaration était INOPÉRANTE, et la raison est une subtilité de flexbox qui ne se voit pas à la relecture : `.cas__tab` est `display:flex`. Son `` est donc un ITEM FLEX, dont le `min-width` vaut `auto`, c'est-à-dire sa largeur MIN-CONTENT. Or `overflow-wrap:break-word` autorise la coupure au RENDU mais ne réduit PAS la largeur min-content — contrairement à `overflow-wrap:anywhere` ou à `word-break:break-all`. L'item ne pouvait donc pas descendre sous la largeur de son plus long mot, et il débordait de son propre label. `min-width:0` retire ce plancher. La coupure déjà déclarée s'applique alors, et c'est le motif que la feuille utilise partout ailleurs pour la même raison (`easypdf-v3.css` l. 344 : « Un enfant en grille ne descend pas sous sa largeur min-content »). Aucune règle nouvelle n'est inventée ; celle qui existait devient atteignable. Hors `html.js`, `.cas__tab` n'est pas un conteneur flex et le `span` est en ligne : `min-width` n'y a aucun effet. La règle est donc inerte dans la variante sans script, ce qui est voulu. */ html.js .cas__tab > span{min-width:0}