Lot U : note de conception du lecteur (sur place ou à droite, consoles, natures des modules, page courte)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

docs/chantiers/acte-certification/UX-lecteur.md

@@ -0,0 +1,143 @@
+# Le lecteur d'un document — note de conception (lot U)
+
+> Demande d'Yvv du 2026-11-02 : « la page est trop longue, trop fournie et on ne comprend pas tout
+> de suite » ; l'ordonnancement répété est « nul » ; distinguer les natures des modules (les
+> textes, l'inertie, l'ordonnancement) ; pas de redondance entre les consoles sous l'article et
+> celles du panneau ; le choix entre déplier sur place et ouvrir à droite doit être logique.
+> Écrite avant le code. Elle tranche ; ce qu'Yvv devrait regarder est en fin de note.
+
+## Ce que montraient les captures d'avant
+
+`/tmp/ld-u-shots/avant/` (base neuve, Monnaie libre et groupe d'essai, bureau et téléphone) :
+
+- **6 300 px de haut sur bureau.** Trois articles en vigueur, puis **sept blocs « Ordre des
+  articles · … »** dans le texte en vigueur, dont cinq pour des sections qui n'y ont aucun article :
+  chaque bloc redit la liste des articles de sa section. Puis trente lignes de propositions.
+- **Sur téléphone, le premier écran ne montre aucun article** : fil d'Ariane, titre, barre du
+  module titre, résumé, faits, aperçus sur deux lignes, langues.
+- **Les mêmes mots pour des choses différentes** : « Propositions » est un geste sous l'article
+  (qui ouvre le panneau), un onglet du panneau, et le titre de la liste du bas. « Proposer » est un
+  onglet, « Proposer une modification » un geste, « Proposer un autre ordre » un troisième.
+- **Le panneau a des onglets qui ne sont pas frères** : le panier (tout le document), les versions
+  d'un article, un formulaire, les détails d'une version, les réglages du groupe.
+- Les trois natures ne se distinguaient que par le fond du bloc d'ordre (le lavis d'eau) et par
+  la ligne « inertie 3 / 5 · moyenne » écrite partout en toutes lettres.
+
+## La règle : sur place, ou à droite
+
+**Sur place** (on déplie, sous ce qu'on regarde) : **ce qui se lit et se décide sur ce qu'on a
+sous les yeux**. Le vote d'une version, ses autres versions, son inertie, et l'ordre d'une section
+(les poignées apparaissent sur les articles mêmes).
+
+**À droite** (un panneau, une feuille sur téléphone) : **ce qui s'écrit, ou travaille sur
+plusieurs modules, ou se consulte à côté du texte**. Proposer (un article, un titre), le panier,
+les détails d'une version (coquilles, traductions, objections, historique), les réglages de la
+formule.
+
+Pourquoi : déplier garde l'œil sur le texte qu'on juge et ne cache rien du reste ; le panneau
+donne la place d'écrire et de comparer sans perdre la page. Un geste qui agit sur un seul module
+et tient en quelques lignes ne mérite pas une fenêtre ; un formulaire ou une vue d'ensemble ne
+tient pas dans un accordéon.
+
+**Le vote d'une version se déplie là où la version se lit** : un texte en vigueur sous lui ; une
+proposition d'article dans « Propositions en cours » ; une version du titre sous le titre ; un
+ordre à la fin de sa section. Un seul vote déplié à la fois, toujours dans l'URL (`?vote=`).
+
+## Les consoles : avant, après
+
+| Fonction | Avant | Après (un nom, un endroit) |
+|---|---|---|
+| Voter une version | « Le vote » sous l'article (déplié) | **« Le vote »**, déplié sous la version |
+| Les autres versions d'un article | « Propositions » sous l'article → onglet « Propositions » du panneau | **dans « Le vote »**, « Autres versions » : chacune ouvre son propre vote, là où elle se lit |
+| Proposer un autre texte | « Proposer une modification » → onglet « Proposer » | **« Proposer une modification »** → panneau « Proposer » |
+| Proposer un nouvel article | bouton en bas → onglet « Proposer » | inchangé |
+| Proposer un autre titre | « Proposer un autre titre » → onglet « Proposer » | inchangé (panneau : on écrit) |
+| Proposer un autre ordre | bloc d'ordre → « Proposer un autre ordre » → onglet « Proposer » (une liste répétée) | **« Réordonner »**, à la fin de la section : les poignées sur les articles mêmes, puis on vote |
+| Voir les ordres proposés | une ligne parmi les articles, dans la liste du bas | **dans « Le vote » de l'ordre**, à la fin de la section |
+| Changer l'inertie | dans « Le vote » | inchangé |
+| Voter en lot | « Voter en lot » (en-tête), « Voter cette section » (liste) → onglet « Panier » | inchangé : deux portes, un seul panier |
+| Coquilles, traductions, objections, historique | lien dans « Le vote » → onglet « Détails » | inchangé → panneau « Détails » |
+| Réglages de la formule | lien en-tête et lien dans « Le vote » → onglet « Réglages » | inchangé → panneau « Réglages » |
+| La liste du bas | « Propositions en cours » | inchangé, le seul endroit qui porte ce nom |
+
+Le panneau perd ses onglets : il montre **une chose à la fois**, nommée en tête (« Panier »,
+« Proposer », « Détails », « Réglages »), avec sa croix. Une ancienne adresse
+`?onglet=propositions` déplie le vote de l'article, sans panneau.
+
+## Les natures des modules
+
+Un document se lit en **sections** ; une section contient des **articles** ; chaque module porte
+une **inertie** ; chaque section a un **ordre** ; le document a un **titre**. Chaque nature a sa
+voix, discrète, prise dans le design existant (sans bordure, arrondis, quatre ambiances) :
+
+- **Texte** (l'article, son titre et son corps) : la lecture. Titre en petites capitales d'eau,
+  corps en Literata. C'est le seul gros caractère de la page.
+- **Section** : son nom en Literata italique, couleur d'encre douce. On sait où l'on est, sans
+  numéro.
+- **Inertie** : **cinq crans** dessinés, à l'horizontale (▮▮▮▯▯), à côté de « inertie 3 / 5 ·
+  moyenne ». Le niveau d'eau (le vote) est vertical ; les crans (le poids du texte) horizontaux :
+  deux formes qu'on ne confond pas. Les crans suivent l'inertie partout : sous l'article, sous le
+  titre, sur la ligne d'ordre, dans le vote, dans la liste.
+- **Ordonnancement** : la **poignée** (six points). Elle marque la ligne d'ordre qui ferme une
+  section, puis apparaît sur chaque article quand on réordonne. Le mot est « Ordre de la
+  section » là où la section est sous les yeux ; « Ordre des articles · <section> » ailleurs
+  (panier, messages), où il faut la nommer.
+- **Titre du document** : une ligne sous le titre, de la même voix que la ligne d'ordre (petite,
+  Nunito, crans, état), avec « Le vote » et « Proposer un autre titre ».
+- **Proposition seed** (lot S, `seedProposal`) : proposée au départ pour amorcer le vote, pas en
+  vigueur. Marque « proposition seed » en lavis d'eau, niveau d'eau visible, jamais le corps nu
+  d'un texte en vigueur. **Quand aucun article n'est en vigueur**, le texte en vigueur, vide, laisse
+  sa place aux Propositions seed, en entier, chacune avec son vote : on sait par où commencer. Elles
+  ne sont pas répétées dans la liste du bas.
+- **Vote simulé** (lot V, `vote.simulated`) : les boutons de vote apparaissent partout comme si le
+  vote était ouvert, avec la marque « vote simulé » à côté. Ton vote s'affiche aussitôt, avec son
+  état (`myVoteState` : enregistré, en attente, simulé), et les voix en attente à côté des totaux
+  (`tallyPending`).
+
+## Une page courte, lisible d'un coup d'œil
+
+Ce qu'on voit d'abord, dans l'ordre : le titre du document et sa ligne de module ; le résumé ; une
+ligne de faits et d'outils (articles en vigueur, propositions en cours, « Voter en lot »,
+« Réglages de la formule ») ; la lecture (en vigueur, aperçus, langue). Puis le texte.
+
+Ce qui est replié par défaut :
+
+- **Le vote** de chaque version, et dedans la formule et le changement d'inertie (comme avant).
+- **L'ordre d'une section** : une seule ligne à sa fin, jamais la liste. Il n'apparaît que pour une
+  section d'au moins deux articles, **à la fin de la section là où elle se lit** : dans le texte en
+  vigueur si elle y a un article, sinon à la fin de sa section dans « Propositions en cours ». La
+  liste des articles ne se lit qu'en réordonnant, ou dans le vote d'un ordre proposé (ses
+  déplacements marqués).
+- **Les sections de « Propositions en cours »** : une ligne par section, son nom, le nombre
+  d'articles proposés et, en petit, le niveau d'eau de chacun (on voit où le soutien monte sans
+  rien ouvrir). On déplie une section d'un geste ; « Tout déplier » les ouvre toutes ; un filtre
+  (bien cotées, les miennes) ou un vote déplié par l'URL ouvre la section qui le contient.
+
+## Réordonner une section
+
+À la fin de la section, « Réordonner » : les articles de la section (ceux en vigueur et ceux
+seulement proposés, marqués « proposé ») se replient sur leur titre, une poignée devant chacun.
+
+- **Au glisser** : on prend la poignée, on dépose à la nouvelle place.
+- **Au clavier** : chaque article est un bouton ; les flèches haut et bas le déplacent, le focus
+  le suit, la nouvelle place est annoncée (« « … » en place 2 sur 3 »).
+- **Sans glisser** : un clic sur un article le choisit, un clic sur un autre le met à sa place ; ou
+  ses flèches monter / descendre (cibles de 44 px sur téléphone).
+
+Puis **« Proposer cet ordre »** : l'ordre part au vote et son vote se déplie aussitôt, au même
+endroit, avec « Pour » et « Contre ». Si l'ordre formé est l'ordre en vigueur, le bouton reste
+éteint et le dit ; s'il est déjà proposé, on vote celui-là au lieu d'en créer un double.
+« Annuler » rend la section telle qu'elle se lisait.
+
+Routes inchangées (ADR 0009) : `POST /api/units/{id}/order` pour proposer, le vote d'une version
+pour voter.
+
+## Ce qu'Yvv devrait regarder
+
+- Les sections de « Propositions en cours » **repliées par défaut** : la page tient en un écran
+  et demi, mais une proposition demande un geste de plus pour être vue.
+- Le panneau **sans onglets** : on ne passe plus des détails au panier d'un clic dans le panneau ;
+  on ferme, puis on ouvre l'autre.
+- Les ordres et les titres proposés **ne sont plus des lignes** de « Propositions en cours » : ils
+  se lisent et se votent à leur module (le panier les garde).
+- Quand rien n'est en vigueur, les Propositions seed **en tête, en entier**.