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 : en cours
• 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

À remplir à la clôture.