Ustagammon/docs/plans/2026-11-03-charte-ui.md

Appliquer la charte graphique à l'application

• Date : 2026-11-03
• Étape : 0d (finition demandée par Pierre)
• Statut : terminé
• Exécutant : sous-agent general-purpose dans le rôle d'un designer UI, dans un worktree isolé

Objectif

L'application publiée (https://ustagammon.sans.pub) adopte l'identité d'Ustagammon (ADR 0010, docs/identite/) et gagne en qualité d'interface : lisible, chaleureuse, agréable au toucher, dans les deux thèmes et les deux orientations. Les choix d'identité sont déjà faits par Pierre : il s'agit de les appliquer fidèlement et de soigner l'ergonomie, pas de les réinventer.

Consignes

1. Appliquer la charte en suivant docs/identite/charte/README.md (section « Appliquer la charte à web/ ») : couleurs des deux thèmes depuis tokens.json, police Alegreya Sans embarquée (OFL, licence jointe, ajoutée au cache du service worker), composants de bundle.css (boutons, focus, zone de consigne, filet des pions), logo horizontal dans la barre haute, icônes et favicon de docs/identite/logo/, theme-color du manifeste. Lire aussi guide-de-marque.md (ton, formes, mouvement).
2. Passe de designer UI sur les écrans existants (plateau, consignes et boutons, fin de partie, aide, thème sombre, paysage) :
   • hiérarchie visuelle claire : la consigne du moment ressort, l'information secondaire (compte de points, dernier coup) reste discrète ;
   • cibles tactiles d'au moins 44 à 48 px, espacements réguliers, rien qui déborde en 360 px de large ni en paysage ;
   • contrastes conformes aux tokens (déjà vérifiés par la charte) ; anneau de focus visible au clavier ;
   • page d'aide agréable à lire (titres, glossaire en liste de définitions) ;
   • respecter prefers-reduced-motion. Lister dans le rapport chaque amélioration et sa raison.
3. Périmètre, pour éviter les conflits : un autre agent ajoute en parallèle l'animation et les traces du coup de l'ordinateur (board-view.ts, app.ts, nouvelles classes CSS de traces). Ne modifie pas la géométrie ni la logique de board-view.ts et app.ts ; agis par le CSS, les variables, index.html, texts.ts (sans changer le sens des textes) et les fichiers statiques. Si une amélioration demande de toucher au dessin du plateau, décris-la dans le rapport au lieu de la faire. Prévois les couleurs des traces dans les variables (--last-move en laiton selon les tokens).
4. Tests : make lint, make test (dont tests/test_site.sh, à mettre à jour pour la police, les icônes et le service worker) et make test-browser verts ; captures d'écran avant et après (portrait clair, portrait sombre, paysage, aide, fin de partie) dans le dossier de travail temporaire.
5. CREDITS.md : Alegreya Sans (OFL) et le logo (CC BY-SA 4.0).

Contraintes :

• CLAUDE.md, ADR 0007 à 0010 : simplicité, pas de framework CSS, identifiants en anglais, commentaires et textes en français ;
• aucune modification de l'identité elle-même (couleurs, logo, police) : en cas de doute ou de manque dans la charte, le signaler dans le rapport ;
• ne pas publier, ne pas pousser, ne pas créer de merge request ;
• commits petits, en français, avec la ligne Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>.

Rapport attendu : ce qui a été appliqué, les améliorations d'interface et leurs raisons, les captures avant et après (chemins), ce qui demande de toucher au plateau, les écarts à la charte, le résultat des tests.

Critères de réussite

• L'application suit la charte dans les deux thèmes (couleurs, police, logo, icônes, composants), hors ligne compris.
• Rien ne déborde en 360 × 740, 412 × 915, 915 × 412 et 740 × 360.
• make lint, make test et make test-browser passent.

Résultat

Branche charte-ui-travail. Tests : make lint, make test (10/10) et make test-browser (Chromium et Firefox, partie complète, paysage, hors ligne, CSP) au vert. Contrôle supplémentaire en 360 × 740, 412 × 915, 915 × 412 et 740 × 360, clair et sombre, dans les deux navigateurs : aucun défilement horizontal, rien hors de l'écran, aucun bouton sous 44 px.

Appliqué : couleurs des deux thèmes depuis tokens.json (brique en accent, laiton pour --last-move) ; Alegreya Sans en cinq graisses dans web/fonts/ (woff2, sous-ensemble latin, 143 Ko au lieu de 1,3 Mo en TTF, licence OFL.txt), mise en cache par le service worker comme tout le site ; boutons ronds, anneau de focus, zone de consigne ; logo dans la barre haute (version sombre en thème sombre) ; icônes, favicon et icône Apple copiés de docs/identite/logo/ par make site (une seule source ; anciennes icônes et scripts/make-icons.py supprimés) ; theme-color #4A2E1F.

Passe d'interface : consigne dans un cadre accent-soft (neutre pendant que l'ordinateur réfléchit, body.busy dès le chargement) ; résultat de fin de partie en taille titre ; compte de points et dernier coup en texte secondaire ; plateau à 8 px des bords en portrait ; en paysage, barre haute dans la colonne de droite, le plateau gagne toute la hauteur (344 px au lieu de 304 en 740 × 360) ; cibles de 44 à 48 px, touch-action: manipulation ; aide en colonne de lecture, titres de la charte, glossaire en carte ; chiffres alignés sur le plateau ; prefers-reduced-motion respecté.

Écarts à valider : symbole seul au lieu du logo horizontal sous 392 px de large et dans la colonne du paysage (le logo et les deux boutons ne tiennent pas en 360 px) ; numéros des flèches en muted (clair) et point-number (sombre), parce que notre plateau les pose sur le fond et non sur le cadre ; chiffres alignés (lining-nums) en plus de tabular-nums.

À faire dans board-view.ts (hors périmètre) : filet intérieur des pions (classe .checker-ring prête), numéros sur le cadre, voile de cible en triangle, marque du dernier coup en barrette laiton à la base de la flèche, videau sur la barre, comme docs/identite/charte/board.js.