/* ============================================================ LA SUITE D'UNE PROSE — le texte qui continue, replié NOUVEAU COMPOSANT (bloc 5c, 15/08). Il naît d'un constat de gate, au verbatim : « l'encart "lire la suite", je le trouve bizarre. Si je l'avais fait moi-même avec un page builder, le texte serait affiché de la même manière que le texte qu'il y a en haut. Là c'est plus petit et encadré. » CE QU'IL N'EST PAS, ET POURQUOI IL N'EST PAS L'ACCORDÉON. Un ACCORDÉON (`accordion.css`) range des contenus DISTINCTS derrière des titres : les questions de la FAQ Contact, les trois volets de « Partenaires », le guide des tailles de la fiche produit. Chacun est une boîte parce qu'il est un objet à part, et son corps est en petit texte parce que c'est un complément. Ici, rien de tout ça : les quatre paragraphes repliés sont la FIN DU MÊME TEXTE que les trois paragraphes du dessus. Les encadrer, c'est dire au lecteur qu'ils sont autre chose — et c'est exactement ce que le constat a vu. MESURE DE L'ÉCART, avant correction (sonde `probe-5c.js`, 1440) : prose d'intro ..... 16 px / 25,6 px de ligne · x = 347 · largeur 746 prose repliée ..... 15,2 px / 24,3 px de ligne · x = 365 · largeur 710 + fond blanc, filet 2 px teinté, rayon 8 px Trois écarts (taille, retrait, cadre) pour un texte qui devrait être le même. LA RÈGLE DU COMPOSANT, et il n'en a qu'une : LE CORPS NE DÉCLARE RIEN. Pas de famille, pas de taille, pas de couleur, pas de fond, pas de filet, pas de retrait. Il hérite de la colonne de contenu, exactement comme `.lcdi-band__texte` qui le précède — c'est la seule façon d'être identique sans recopier des valeurs qui divergeraient au premier correctif. Le composant ne peint que son DÉCLENCHEUR. ZÉRO JAVASCRIPT, comme l'accordéon : `
`/`` portent l'état, le clavier et l'annonce vocale. Le passage de « Lire la suite » à « Réduire » se fait en CSS pur, sur `[open]` — deux mots dans le HTML, un seul visible à la fois. Un script pour changer un mot serait une dépendance pour rien. ============================================================ */ /* ============================================================ LA COMMANDE PASSE SOUS LE TEXTE QUAND IL EST DÉPLIÉ (bloc 5c, R3bis, 15/08) VERDICT DE GATE, au verbatim : « le fonctionnement normal et la bonne pratique c'est que le réduire se retrouve sous le texte et non au-dessus. » Référence citée : motif « Afficher + de possibilités », repli sous le texte. IL Y A UNE RAISON, et elle est de lecture : replié, la commande est une PROMESSE — elle annonce ce qui vient, sa place est en fin de texte visible. Dépliée, la promesse est tenue ; ce qui reste est une commande de RETOUR, et une commande de retour posée au-dessus du texte qu'elle referme demande au lecteur de remonter pour annuler ce qu'il vient de lire. ZÉRO SCRIPT, ET L'ORDRE DU DOM NE BOUGE PAS. `` doit rester le premier enfant de `
` — c'est la condition du mécanisme natif. Le `
` devient donc une colonne `flex`, et l'état ouvert donne à la commande un `order` qui la place après la prose. C'est un déplacement VISUEL : la structure lue par une synthèse vocale reste « commande, puis contenu révélé », qui est la structure correcte d'un dévoilement. L'ORDRE DE TABULATION NE SE DÉSACCORDE PAS DE L'ŒIL, et c'est vérifiable : la prose révélée ne contient aucun élément focusable, donc la seule cible du clavier dans ce bloc est la commande elle-même. Après elle, la tabulation part vers ce qui suit le `
` — c'est-à-dire vers le bas, comme l'œil. ============================================================ */ .lcdi-suite { /* Aucun fond, aucun filet, aucun rayon : ce n'est pas une boîte. */ display: flex; flex-direction: column; /* La commande garde sa largeur de contenu : sans ça, l'étirement du conteneur lui donnerait toute la colonne et sa zone cliquable déborderait de son libellé. */ align-items: flex-start; } /* L'ÉTAT OUVERT, ET LUI SEUL. Replié, l'ordre naturel s'applique : la commande est le seul enfant rendu, elle reste exactement là où elle était. */ .lcdi-suite[open] .lcdi-suite__corps { order: 1; } .lcdi-suite[open] .lcdi-suite__declencheur { order: 2; } /* --- Le déclencheur : une ligne de commande dans la prose ---------------- */ .lcdi-suite__declencheur { display: inline-flex; align-items: center; gap: var(--space-2); width: fit-content; /* `font: inherit` et non une taille de composant : le déclencheur vit DANS la prose, il en prend la voix. Seule la graisse et l'encre de lien le distinguent — c'est ce qui en fait une commande sans en faire un bouton. */ font-family: inherit; font-size: inherit; line-height: inherit; font-weight: var(--weight-strong); color: var(--link); cursor: pointer; /* Le marqueur natif (triangle du navigateur) sort : il n'appartient à aucune palette. Deux écritures, parce que WebKit garde son pseudo-élément. */ list-style: none; } .lcdi-suite__declencheur::-webkit-details-marker { display: none; } .lcdi-suite__declencheur:hover { color: var(--link-hover); text-decoration: underline; } .lcdi-suite__declencheur:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius-s); } /* LE MOT CHANGE AVEC L'ÉTAT, SANS SCRIPT. Les deux mots sont dans le HTML ; `[open]` décide lequel se voit. `display: none` et non `visibility` : le mot caché ne doit pas non plus être lu par une synthèse vocale. */ .lcdi-suite:not([open]) .lcdi-suite__mot--fermer { display: none; } .lcdi-suite[open] .lcdi-suite__mot--ouvrir { display: none; } .lcdi-suite__chevron { flex: none; width: 1.15em; height: 1.15em; color: currentColor; fill: currentColor; transition: transform var(--t-quick) var(--ease-brand); } .lcdi-suite__chevron svg { width: 100%; height: 100%; fill: currentColor; display: block; } .lcdi-suite[open] .lcdi-suite__chevron { transform: rotate(180deg); } /* --- Le corps : la prose qui continue ------------------------------------ Les deux seules règles admises ici sont celles de `.lcdi-band__texte` : elles ne peignent rien, elles empêchent les marges du premier et du dernier paragraphe de déborder du bloc. Tout le reste est hérité. L'écart à la commande est celui du rythme serré (16 px). Il est passé EN BAS au R3bis, avec la commande : la prose commence désormais là où la commande commençait, et c'est ce qui rend le dépliage silencieux — la première ligne révélée prend la place exacte de « Lire la suite ». */ .lcdi-suite__corps { margin-block: 0 var(--rythme-titre); } .lcdi-suite__corps > *:first-child { margin-top: 0; } .lcdi-suite__corps > *:last-child { margin-bottom: 0; } /* --- Sur nuit ------------------------------------------------------------ Rien à repeindre : le corps hérite, et `--link` / `--link-hover` sont déjà redéfinis par le contexte nuit dans `tokens.css`. Servi pour mémoire. */