# 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.