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

@@ -2,7 +2,7 @@
 
 - **Date** : 2026-11-03
 - **Étape** : 0d (finition demandée par Pierre)
-- **Statut** : en cours
+- **Statut** : terminé
 - **Exécutant** : sous-agent general-purpose dans le rôle d'un designer UI, dans un worktree isolé
 
 ## Objectif
@@ -69,4 +69,37 @@ plateau, les écarts à la charte, le résultat des tests.
 
 ## Résultat
 
-À remplir à la clôture.
+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`.