Plan 0e.5 : mise à jour de l'application en un toucher

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

CLAUDE.md

@@ -1,7 +1,7 @@
 # CLAUDE.md — Règles du projet
 
 Ce fichier est lu par Claude Code au début de chaque session. Il fixe le cadre du projet.
-Le cadrage complet est dans `docs/cadrage.md`, l'étape en cours dans `docs/etape-0.md`.
+Le cadrage complet est dans `docs/cadrage.md`, le travail en cours dans `docs/feuille-de-route.md`.
 
 **En début de session**, lire `docs/organisation.md`, `docs/feuille-de-route.md`, la fin
 de `docs/journal.md`, l'index des ADR (`docs/adr/README.md`) et les plans en cours dans `docs/plans/`, puis reprendre là où en

CREDITS.md

@@ -21,6 +21,22 @@ Les contenus pédagogiques (leçons, textes) sont sous licence CC BY-SA 4.0.
   https://github.com/clavierhaus/gnubg-android ; son fichier
   `jni-bridge/src/stubs.c` a servi de repère pour isoler le cœur de gnubg.
 
+## Identité visuelle
+
+- **Alegreya Sans**, Copyright 2013 The Alegreya Sans Project Authors
+  (Juan Pablo del Peral, Huerta Tipográfica), licence
+  SIL Open Font License 1.1 — https://github.com/google/fonts/tree/main/ofl/alegreyasans
+  Ses tracés (graisse Bold) composent le logotype, dans `docs/identite/logo/`.
+  Cinq graisses (Regular, Italic, Medium, Bold, ExtraBold) sont embarquées
+  dans l'application (`web/fonts/`, avec la licence `OFL.txt`), réduites aux
+  caractères latins et converties en woff2 par fontTools (143 Ko en tout).
+- **Logo et icônes d'Ustagammon** (`docs/identite/logo/`), licence
+  CC BY-SA 4.0 ; publiés dans `icons/` du site (favicon, icônes de la PWA,
+  logo de la barre haute).
+- **fontTools** (MIT), utilisé par `docs/identite/generer-logo.py` pour
+  convertir le texte du logotype en tracés, et pour produire les fichiers
+  woff2 de la police ; avec **Brotli** (MIT), qui les compresse.
+
 ## Outils de développement
 
 - **ShellCheck** (GPLv3), analyse des scripts shell, utilisé via Docker.
@@ -41,6 +57,32 @@ Les contenus pédagogiques (leçons, textes) sont sous licence CC BY-SA 4.0.
   **Python 3** (licence PSF, compatible GPL), qui exécute le comparateur
   `tests/reference/compare.py`, et **jq** (licence MIT), qui lit les JSON
   dans `tests/test_reference.sh`. Aucun des deux n'est utilisé sur le PC.
+  Le serveur HTTP de Python sert aussi le site sur le réseau local (`make deploy`).
+- **Emscripten** (licence MIT et University of Illinois/NCSA), image Docker
+  `emscripten/emsdk:3.1.64`, compile le moteur en WebAssembly
+  (`make engine-wasm`). Le code JavaScript qu'il génère
+  (`build/wasm/engine.mjs`) et sa bibliothèque C (musl, licence MIT) sont
+  inclus dans le moteur WebAssembly, licences compatibles GPLv3. L'image
+  fournit aussi **Node.js** (MIT), qui rejoue la suite de contrat sur le
+  moteur WebAssembly et lance `make bench`.
+- **Image `ustagammon/web`** (`docker/web/Dockerfile`), construite sur
+  `node:22.11.0-alpine3.20` : **TypeScript** 6.0.3 (Apache-2.0), qui compile
+  `app/` ; **@types/node** 22.20.5 (MIT), types de Node pour les tests ;
+  **Biome** 2.5.15 (MIT ou Apache-2.0), lint et formatage ;
+  **@cucumber/cucumber** 12.9.0 (MIT), qui exécute les scénarios de
+  `docs/scenarios/` ; **dependency-cruiser** 18.6.0 (MIT), qui vérifie les
+  règles d'architecture. Ces outils et leurs dépendances servent seulement à
+  compiler et tester : rien n'est embarqué dans l'application.
+- **Playwright** 1.48.2 (Apache-2.0), image Docker
+  `mcr.microsoft.com/playwright:v1.48.2-noble` (Chromium, Firefox, WebKit,
+  sous leurs licences libres) et paquet npm `playwright`, installé dans
+  `build/browser-tools/` : joue une partie dans des navigateurs sans écran
+  (`make test-browser`). Outil de test seulement, hors de `make test`.
+
+## Serveur de production
+
+- **Caddy** (Apache-2.0), image `caddy:2.8.4-alpine`, serveur statique du
+  site publié sur CapRover (`deploy/`).
 
 ## Remerciements
 

Makefile

@@ -18,14 +18,28 @@ REFERENCE_IMAGE := ustagammon/gnubg-reference:14b6798
 # Chaîne de compilation C (docker/build-c/Dockerfile) : changer l'étiquette
 # à chaque modification du Dockerfile, pour que make setup la reconstruise.
 BUILD_C_IMAGE := ustagammon/build-c:2
+# Emscripten (compilation WebAssembly ; contient aussi Node et Python 3).
+WASM_IMAGE := emscripten/emsdk:3.1.64
+# Outils de l'application web (docker/web/) : TypeScript, Biome, Cucumber,
+# dependency-cruiser. Changer l'étiquette à chaque modification du Dockerfile.
+WEB_IMAGE := ustagammon/web:1
+# Port du site servi sur le réseau local (make deploy).
+WEB_PORT := 8080
+# Serveur statique de production (deploy/Dockerfile) : même version ici.
+CADDY_IMAGE := caddy:2.8.4-alpine
+# Navigateurs sans écran pour make test-browser (Playwright, Apache-2.0).
+PLAYWRIGHT_IMAGE := mcr.microsoft.com/playwright:v1.48.2-noble
 
-export SHELLCHECK_IMAGE GHERKIN_IMAGE BUILD_C_IMAGE
+export SHELLCHECK_IMAGE GHERKIN_IMAGE BUILD_C_IMAGE WASM_IMAGE CADDY_IMAGE WEB_IMAGE PLAYWRIGHT_IMAGE \
+	REFERENCE_IMAGE
 
 # Lance une commande dans la chaîne C, sous l'utilisateur courant pour que
 # build/ lui appartienne.
 DOCKER_C := docker run --rm --user "$$(id -u):$$(id -g)" -v "$(CURDIR):/src" -w /src $(BUILD_C_IMAGE)
+DOCKER_WASM := docker run --rm --user "$$(id -u):$$(id -g)" -e HOME=/tmp -v "$(CURDIR):/src" -w /src $(WASM_IMAGE)
+DOCKER_WEB := docker run --rm --user "$$(id -u):$$(id -g)" -v "$(CURDIR):/src" -w /src $(WEB_IMAGE)
 
-.PHONY: help setup build engine test lint deploy clean reference-image reference
+.PHONY: help setup build engine engine-wasm web bench test test-browser lint deploy deploy-web site package deploy-prod clean reference-image reference
 
 help: ## Liste les commandes disponibles
 	@echo "Ustagammon : commandes disponibles"
@@ -41,24 +55,107 @@ setup: ## Installe la chaîne d'outils (images Docker) ; sans effet si déjà fa
 	@$(MAKE) reference-image
 	@docker image inspect $(BUILD_C_IMAGE) >/dev/null 2>&1 \
 		|| docker build -t $(BUILD_C_IMAGE) docker/build-c
+	@docker image inspect $(WASM_IMAGE) >/dev/null 2>&1 \
+		|| docker pull $(WASM_IMAGE)
+	@docker image inspect $(CADDY_IMAGE) >/dev/null 2>&1 \
+		|| docker pull $(CADDY_IMAGE)
+	@docker image inspect $(WEB_IMAGE) >/dev/null 2>&1 \
+		|| docker build -t $(WEB_IMAGE) docker/web
 	@echo "Chaîne d'outils prête."
 
-build: engine ## Compile le moteur (si nécessaire) puis l'application
+build: engine-wasm web ## Compile le moteur (si nécessaire) puis l'application
 
 engine: ## Compile le moteur, ses données et build/engine-cli (dans Docker)
 	@docker image inspect $(BUILD_C_IMAGE) >/dev/null 2>&1 \
 		|| { echo "Chaîne C absente : lancer d'abord make setup"; exit 1; }
 	@$(DOCKER_C) make -f engine/engine.mk -j2 --no-print-directory
 
+engine-wasm: engine ## Compile le moteur en WebAssembly dans build/wasm/ (dans Docker)
+	@docker image inspect $(WASM_IMAGE) >/dev/null 2>&1 \
+		|| { echo "Emscripten absent : lancer d'abord make setup"; exit 1; }
+	@$(DOCKER_WASM) make -f engine-wasm/wasm.mk -j2 --no-print-directory
+
+# L'application est recompilée entièrement (quelques secondes) : build/web/
+# ne garde ainsi aucun fichier dont la source a disparu. Le package.json
+# indique à Node que les .js produits sont des modules ES.
+web: ## Compile l'application TypeScript (app/) dans build/web/ (dans Docker)
+	@docker image inspect $(WEB_IMAGE) >/dev/null 2>&1 \
+		|| { echo "Outils web absents : lancer d'abord make setup"; exit 1; }
+	@rm -rf $(BUILD_DIR)/web
+	@$(DOCKER_WEB) tsc -p app/tsconfig.json
+	@cp app/package.json $(BUILD_DIR)/web/package.json
+
+bench: engine-wasm ## Mesure le moteur WebAssembly sous Node, sur ce PC (rapport texte)
+	@$(DOCKER_WASM) node engine-wasm/bench.mjs
+
 test: ## Lance tous les tests
 	@tests/run.sh
 
+# Hors de make test : plusieurs minutes, et une image de 3 Go, récupérée ici
+# à la première utilisation plutôt que par make setup.
+test-browser: ## Joue une partie dans Chromium et Firefox sans écran (lent)
+	@docker image inspect $(PLAYWRIGHT_IMAGE) >/dev/null 2>&1 || docker pull $(PLAYWRIGHT_IMAGE)
+	@tests/browser.sh
+
 lint: ## Vérifie le style et les erreurs courantes
 	@tests/lint.sh
 
-deploy: ## Installe l'application sur le téléphone (pas encore disponible)
-	@echo "Pas encore disponible : le socle (PWA ou Android) sera choisi à la fin de l'étape 0."
-	@exit 1
+# Sert le site assemblé (build/site/, voir make site) avec le serveur HTTP de
+# Python. L'adresse affichée est celle du PC sur l'interface de sa route par
+# défaut, c'est-à-dire sur le réseau local (Wi-Fi ou câble). En http sur le
+# réseau local, le navigateur refuse le service worker : l'application
+# fonctionne, mais pas hors ligne (il faut https, comme en production).
+deploy: site ## Sert l'application sur le réseau local (Ctrl+C pour arrêter)
+	@ip="$$(ip -4 route get 1.1.1.1 2>/dev/null | awk '{ for (i = 1; i < NF; i++) if ($$i == "src") print $$(i + 1) }')"; \
+	echo "Application : http://$${ip:-ADRESSE-DU-PC}:$(WEB_PORT)/"; \
+	echo "À ouvrir depuis le téléphone, sur le même Wi-Fi. Ctrl+C pour arrêter."
+	@docker run --rm --init -p $(WEB_PORT):8080 -v "$(CURDIR)/$(BUILD_DIR)/site:/site:ro" \
+		$(BUILD_C_IMAGE) python3 -m http.server 8080 --directory /site
+
+deploy-web: deploy ## Comme make deploy (ancien nom, étape 0b)
+
+# Fichiers de docs/identite/logo/ publiés dans icons/ (manifeste, favicon,
+# barre haute).
+SITE_ICONS := icone.svg icone-192.png icone-512.png icone-maskable-192.png icone-maskable-512.png \
+	apple-touch-icon-180.png favicon.svg favicon-32.png \
+	logo-horizontal-couleur.svg logo-horizontal-sombre.svg symbole-couleur.svg symbole-sombre.svg
+
+# Le site tel qu'il sera publié, reconstruit entièrement à chaque appel :
+# - web/ à la racine : la page de l'application, son style, sa police, le
+#   manifeste et le Web Worker du moteur ;
+# - sous icons/, le logo et les icônes de la charte, copiés depuis
+#   docs/identite/logo/ (une seule source, ADR 0010) ;
+# - l'application compilée (build/web/src/) sous app/ ;
+# - le moteur sous wasm/ ;
+# - les copies du glossaire et des scénarios sous docs/, lues par l'aide de
+#   l'application (ADR 0008 : jamais commitées ailleurs) ;
+# - version.json (commit publié) ;
+# - sw.js, complété par la liste de tous ces fichiers (scripts/service-worker.sh).
+site: engine-wasm web ## Assemble le site publié dans build/site/
+	rm -rf $(BUILD_DIR)/site
+	mkdir -p $(BUILD_DIR)/site/wasm $(BUILD_DIR)/site/docs
+	cp -r web/. $(BUILD_DIR)/site/
+	mkdir -p $(BUILD_DIR)/site/icons
+	cp $(addprefix docs/identite/logo/,$(SITE_ICONS)) $(BUILD_DIR)/site/icons/
+	cp -r $(BUILD_DIR)/web/src $(BUILD_DIR)/site/app
+	cp $(BUILD_DIR)/wasm/engine.mjs $(BUILD_DIR)/wasm/engine.wasm $(BUILD_DIR)/wasm/engine.data \
+		$(BUILD_DIR)/wasm/positions.json $(BUILD_DIR)/site/wasm/
+	cp -r docs/glossaire docs/scenarios $(BUILD_DIR)/site/docs/
+	printf '{"commit": "%s", "dirty": %s}\n' "$$(git rev-parse HEAD)" \
+		"$$(git diff --quiet HEAD && echo false || echo true)" > $(BUILD_DIR)/site/version.json
+	scripts/service-worker.sh $(BUILD_DIR)/site
+
+# L'archive envoyée à CapRover : captain-definition, Dockerfile, Caddyfile et
+# le site. CapRover construit l'image (une simple copie) sur le serveur.
+package: site ## Prépare l'archive de déploiement build/ustagammon.tar
+	rm -rf $(BUILD_DIR)/deploy
+	cp -r deploy $(BUILD_DIR)/deploy
+	cp -r $(BUILD_DIR)/site $(BUILD_DIR)/deploy/site
+	tar -cf $(BUILD_DIR)/ustagammon.tar -C $(BUILD_DIR)/deploy .
+	@echo "Archive prête : $(BUILD_DIR)/ustagammon.tar"
+
+deploy-prod: ## Publie main sur CapRover (voir docs/deploiement.md)
+	@scripts/deploy.sh
 
 clean: ## Supprime les artefacts de build (garde les images Docker)
 	rm -rf $(BUILD_DIR)
@@ -67,8 +164,8 @@ reference-image: ## Construit l'image Docker du gnubg de référence (cache Dock
 	docker build -t $(REFERENCE_IMAGE) docker/gnubg-reference
 	@echo "Image $(REFERENCE_IMAGE) prête."
 
-reference: reference-image ## Régénère tests/reference/results/ avec le gnubg de référence
-	rm -rf tests/reference/results
+reference: reference-image ## Régénère tests/reference/results/ et analysis/ avec le gnubg de référence
+	rm -rf tests/reference/results tests/reference/analysis
 	docker run --rm --user "$$(id -u):$$(id -g)" -e HOME=/tmp \
 		-v "$(CURDIR)/tests/reference:/reference" $(REFERENCE_IMAGE) \
 		gnubg --tty --quiet --no-rc --python=/reference/generate.py

app/.dependency-cruiser.cjs

@@ -0,0 +1,61 @@
+// Règles d'architecture de l'application (ADR 0007, point 2 ; ADR 0009),
+// vérifiées par dependency-cruiser dans make test (tests/test_web.sh).
+// Les chemins sont relatifs au dossier app/.
+
+/** @type {import('dependency-cruiser').IConfiguration} */
+module.exports = {
+    forbidden: [
+        {
+            name: "domain-is-pure",
+            comment:
+                "Le domaine n'importe que le domaine : ni le moteur (src/engine), ni " +
+                "l'interface (src/ui), ni Node, ni bibliothèque, ni code du navigateur. " +
+                "Il décrit ce dont il a besoin (interface Engine) ; les adaptateurs " +
+                "l'implémentent.",
+            severity: "error",
+            from: { path: "^src/domain/" },
+            to: { pathNot: "^src/domain/" },
+        },
+        {
+            name: "ui-does-not-call-engine",
+            comment:
+                "Aucun écran n'appelle le moteur directement : l'interface passe par le domaine.",
+            severity: "error",
+            from: { path: "^src/ui/" },
+            to: { path: "^src/engine/" },
+        },
+        {
+            name: "only-main-assembles",
+            comment:
+                "Seul le point d'entrée (src/main.ts) assemble l'application : hors de " +
+                "leur propre dossier, le moteur (src/engine), le stockage (src/storage) " +
+                "et l'interface (src/ui) ne sont importés que par lui, et par les tests.",
+            severity: "error",
+            // $1 : le dossier de l'importateur (correspondance de groupe).
+            from: { path: "^src/([^/]+)/" },
+            to: { path: "^src/(engine|storage|ui)/", pathNot: "^src/$1/" },
+        },
+        {
+            name: "nothing-imports-main",
+            comment: "Le point d'entrée n'est importé par personne.",
+            severity: "error",
+            from: {},
+            to: { path: "^src/main\\.ts$" },
+        },
+        {
+            name: "no-circular",
+            comment: "Pas de dépendance circulaire.",
+            severity: "error",
+            from: {},
+            to: { circular: true },
+        },
+    ],
+    options: {
+        // Les imports de types comptent aussi : ils disparaissent à la
+        // compilation, mais créent bien une dépendance dans le code source.
+        tsPreCompilationDeps: true,
+        // Résolution des imports comme TypeScript : « ./events.js » désigne
+        // le fichier events.ts. Le tsconfig.json est celui du dossier courant.
+        tsConfig: { fileName: "tsconfig.json" },
+    },
+};

app/biome.json

@@ -0,0 +1,20 @@
+{
+    "files": {
+        "includes": ["**", "!**/node_modules"]
+    },
+    "formatter": {
+        "indentStyle": "space",
+        "indentWidth": 4,
+        "lineWidth": 100
+    },
+    "linter": {
+        "rules": {
+            "preset": "recommended"
+        }
+    },
+    "javascript": {
+        "formatter": {
+            "quoteStyle": "double"
+        }
+    }
+}

app/package.json

@@ -0,0 +1,6 @@
+{
+    "name": "ustagammon-app",
+    "private": true,
+    "license": "GPL-3.0-or-later",
+    "type": "module"
+}

app/src/domain/game/branches.ts

@@ -0,0 +1,91 @@
+// Les branches d'une partie : les lignes de jeu de son journal.
+//
+// Copyright (C) 2026 les auteurs d'Ustagammon.
+// Licence : GPLv3 ou ultérieure (voir LICENSE).
+//
+// Le journal est un arbre (events.ts) : chaque événement pointe vers son
+// parent, et « Rejouer d'ici » accroche un nouvel événement à un ancien. Une
+// branche est le chemin du premier événement jusqu'à une feuille de l'arbre.
+// Les identifiants des événements sont attribués dans l'ordre d'ajout : de
+// deux enfants d'un même événement, le plus ancien a le plus petit indice
+// dans le journal, et c'est lui qui continue la ligne d'origine.
+
+import { currentLine, type GameEvent, type GameJournal, goBackTo } from "./events.js";
+import { replay } from "./state.js";
+
+/**
+ * Une branche de la partie : la suite d'événements du début jusqu'à head.
+ *
+ * Glossaire : docs/glossaire/branche.md
+ */
+export interface Branch {
+    /** Le dernier événement de la branche (une feuille de l'arbre). */
+    readonly head: string;
+    /** L'événement à partir duquel elle a été rejouée (« Rejouer d'ici ») ;
+     * null pour la ligne d'origine de la partie. */
+    readonly forkedFrom: string | null;
+    /** Les coups joués avant de rejouer (0 : depuis le début) ; 0 aussi pour
+     * la ligne d'origine. */
+    readonly forkMoveCount: number;
+    /** Les coups joués sur toute la branche, depuis le début. */
+    readonly moveCount: number;
+    /** La partie est finie au bout de cette branche. */
+    readonly over: boolean;
+    /** L'événement courant de la partie est sur cette branche. */
+    readonly containsHead: boolean;
+}
+
+/**
+ * Les branches de la partie, dans l'ordre de leur création (celui de leur
+ * premier événement propre) : la ligne d'origine d'abord. Liste vide pour un
+ * journal vide.
+ */
+export function branches(journal: GameJournal): Branch[] {
+    const order = new Map(journal.events.map((event, index) => [event.id, index]));
+    const children = new Map<string, GameEvent[]>();
+    for (const event of journal.events) {
+        if (event.parent !== null) {
+            children.set(event.parent, [...(children.get(event.parent) ?? []), event]);
+        }
+    }
+    const leaves = journal.events.filter((event) => !children.has(event.id));
+    return leaves
+        .map((leaf) => {
+            const line = currentLine({ events: journal.events, head: leaf.id });
+            // Le point de départ de la branche : le parent de l'événement le
+            // plus récent du chemin qui n'est pas le premier enfant de son
+            // parent (la ligne d'origine n'en a aucun).
+            let forkIndex = -1;
+            for (let i = line.length - 1; i > 0; i--) {
+                const event = line[i] as GameEvent;
+                const first = children.get(event.parent as string)?.[0];
+                if (first !== undefined && first.id !== event.id) {
+                    forkIndex = i - 1;
+                    break;
+                }
+            }
+            const moves = (events: readonly GameEvent[]) =>
+                events.filter((event) => event.type === "MovePlayed").length;
+            const fork = forkIndex >= 0 ? (line[forkIndex] as GameEvent) : null;
+            const start = line[forkIndex + 1] as GameEvent;
+            return {
+                created: order.get(start.id) ?? 0,
+                head: leaf.id,
+                forkedFrom: fork?.id ?? null,
+                forkMoveCount: fork === null ? 0 : moves(line.slice(0, forkIndex + 1)),
+                moveCount: moves(line),
+                over: replay(line).phase === "over",
+                containsHead: line.some((event) => event.id === journal.head),
+            };
+        })
+        .sort((a, b) => a.created - b.created)
+        .map(({ created: _, ...branch }) => branch);
+}
+
+/** Passe à une autre branche : la partie reprend au bout de celle-ci. */
+export function switchToBranch(journal: GameJournal, head: string): GameJournal {
+    if (!branches(journal).some((branch) => branch.head === head)) {
+        throw new Error(`branche introuvable : ${head}`);
+    }
+    return goBackTo(journal, head);
+}

app/src/domain/game/cube.ts

@@ -0,0 +1,19 @@
+// Le videau.
+//
+// Copyright (C) 2026 les auteurs d'Ustagammon.
+// Licence : GPLv3 ou ultérieure (voir LICENSE).
+
+import type { Side } from "./side.js";
+
+/**
+ * Le videau : sa valeur (1, 2, 4…) et le camp qui le possède, seul à pouvoir
+ * redoubler (null : au centre, les deux peuvent doubler).
+ *
+ * Glossaire : docs/glossaire/videau.md
+ */
+export interface Cube {
+    readonly value: number;
+    readonly owner: Side | null;
+}
+
+export const CENTERED_CUBE: Cube = { value: 1, owner: null };

app/src/domain/game/engine.ts

@@ -0,0 +1,254 @@
+// Ce que le domaine demande au moteur (ADR 0007, point 2).
+//
+// Copyright (C) 2026 les auteurs d'Ustagammon.
+// Licence : GPLv3 ou ultérieure (voir LICENSE).
+//
+// Le domaine définit cette interface ; un adaptateur par plateforme
+// l'implémente (src/engine/ pour le moteur WebAssembly). Toutes les règles du
+// jeu viennent d'ici : le domaine n'en réimplémente aucune.
+//
+// Les positions sont toujours vues du joueur au trait, celui qui joue ou
+// double. Les méthodes sont asynchrones : dans le navigateur, le moteur
+// calcule dans un Web Worker.
+
+import type { HalfMove, PositionId } from "./position.js";
+import type { Roll } from "./roll.js";
+
+/**
+ * Le moteur de jeu : GNU Backgammon.
+ *
+ * Glossaire : docs/glossaire/moteur.md
+ */
+export interface Engine {
+    /** Les coups légaux d'un jet (liste vide : le joueur ne peut pas jouer). */
+    legalMoves(position: PositionId, roll: Roll): Promise<Move[]>;
+
+    /** Le meilleur coup au niveau ply, ou null si aucun coup n'est possible. */
+    bestMove(position: PositionId, cube: EngineCube, roll: Roll, ply: Ply): Promise<Move | null>;
+
+    /** La décision de videau du joueur au trait, avant de lancer les dés. */
+    cubeDecision(position: PositionId, cube: EngineCube, ply: Ply): Promise<CubeDecision>;
+
+    /** Où en est un coup saisi demi-coup par demi-coup. */
+    checkHalfMoves(
+        position: PositionId,
+        roll: Roll,
+        halfMoves: readonly HalfMove[],
+    ): Promise<HalfMovesCheck>;
+
+    /** Le plateau d'une position, et le résultat si la partie y est finie. */
+    board(position: PositionId, cube: EngineCube): Promise<Board>;
+
+    /** Le coup que joue l'ordinateur de gnubg à ce niveau (bruit compris,
+     * reproductible), ou null si aucun coup n'est possible. */
+    levelMove(
+        position: PositionId,
+        cube: EngineCube,
+        roll: Roll,
+        level: Level,
+    ): Promise<Move | null>;
+
+    /** La décision de videau de l'ordinateur à ce niveau, bruit compris. */
+    levelCubeDecision(position: PositionId, cube: EngineCube, level: Level): Promise<CubeDecision>;
+
+    /** L'analyse du coup joué (played : position après le coup, vue du joueur
+     * qui l'a joué, comme Move.position), au niveau d'analyse ply ; null si
+     * aucun coup n'était possible. */
+    analyseMove(
+        position: PositionId,
+        cube: EngineCube,
+        roll: Roll,
+        played: PositionId,
+        ply: Ply,
+    ): Promise<MoveAnalysis | null>;
+
+    /** L'analyse d'une décision de videau, position vue du joueur au trait
+     * (celui qui double ou non ; take et pass sont la réponse de son
+     * adversaire). */
+    analyseCube(
+        position: PositionId,
+        cube: EngineCube,
+        action: CubeAction,
+        ply: Ply,
+    ): Promise<CubeAnalysis>;
+
+    /** La chance d'un jet pour le joueur au trait. */
+    luck(position: PositionId, cube: EngineCube, roll: Roll): Promise<Luck>;
+}
+
+/**
+ * Niveau de jeu de l'ordinateur : un réglage prédéfini de GNU Backgammon
+ * (aecSettings dans eval.c ; voir engine/include/engine.h). Les quatre
+ * premiers jouent à 0 pli avec un bruit qui leur fait commettre des erreurs ;
+ * les suivants sont sans bruit, de 0 à 4 plis.
+ *
+ * Glossaire : docs/glossaire/niveau-de-jeu.md
+ */
+export type Level =
+    | "beginner"
+    | "casual"
+    | "intermediate"
+    | "advanced"
+    | "0ply"
+    | "1ply"
+    | "2ply"
+    | "3ply"
+    | "4ply";
+
+/**
+ * Appréciation d'un coup ou d'une décision de videau par le moteur, selon
+ * l'équité perdue : rien à signaler, douteux, mauvais, très mauvais.
+ *
+ * Glossaire : docs/glossaire/appreciation.md
+ */
+export type Skill = "none" | "doubtful" | "bad" | "veryBad";
+
+/**
+ * Seuils de GNU Backgammon (arSkillLevel dans gnubg.c) : une perte
+ * d'équité strictement plus grande fait passer à l'appréciation. Le moteur
+ * classe lui-même ; ces valeurs servent à l'expliquer.
+ */
+export const SKILL_THRESHOLDS = { doubtful: 0.03, bad: 0.06, veryBad: 0.12 } as const;
+
+/** Catégorie de chance d'un jet, de très malchanceux à très chanceux. */
+export type LuckRating = "veryUnlucky" | "unlucky" | "none" | "lucky" | "veryLucky";
+
+/**
+ * Seuils de GNU Backgammon (arLuckLevel dans gnubg.c) sur la chance d'un
+ * jet, dans un sens ou dans l'autre.
+ */
+export const LUCK_THRESHOLDS = { lucky: 0.3, veryLucky: 0.6 } as const;
+
+/**
+ * La chance d'un jet : l'équité qu'il fait gagner (positive) ou perdre au
+ * joueur par rapport à la moyenne des jets.
+ *
+ * Glossaire : docs/glossaire/chance.md
+ */
+export interface Luck {
+    readonly value: number;
+    readonly rating: LuckRating;
+}
+
+/** Un coup avec son équité (avec videau), du point de vue de celui qui le joue. */
+export interface EvaluatedMove extends Move {
+    readonly equity: number;
+    /** Niveau auquel le coup a réellement été évalué. */
+    readonly ply: Ply;
+}
+
+/** Ce que le moteur dit d'un coup joué, comme l'analyse de partie de gnubg. */
+export interface MoveAnalysis {
+    /** Nombre de coups légaux. */
+    readonly moveCount: number;
+    /** Place du coup joué dans le classement, à partir de 1. */
+    readonly rank: number;
+    readonly played: EvaluatedMove;
+    readonly best: EvaluatedMove;
+    /** Équité du coup joué moins celle du meilleur : 0 ou négative. */
+    readonly equityLoss: number;
+    readonly skill: Skill;
+}
+
+/** Décision de videau : doubler ou non (joueur au trait), prendre ou passer
+ * (son adversaire). */
+export type CubeAction = "noDouble" | "double" | "take" | "pass";
+
+/** Ce que le moteur dit d'une décision de videau. */
+export interface CubeAnalysis {
+    /** gnubg analyse-t-il cette décision ? Pas quand le joueur au trait ne
+     * peut pas doubler, ni à la position de départ. */
+    readonly analysed: boolean;
+    /** Équités du joueur au trait, normalisées pour un videau de 1 (null si
+     * non analysée). */
+    readonly equities: CubeEquities | null;
+    /** Équité perdue par celui qui décide : 0 ou négative. */
+    readonly equityLoss: number;
+    readonly skill: Skill;
+}
+
+export interface CubeEquities {
+    readonly noDouble: number;
+    readonly doubleTake: number;
+    readonly doublePass: number;
+    /** Après les meilleures décisions des deux joueurs. */
+    readonly optimal: number;
+}
+
+/**
+ * Niveau de réflexion du moteur, en plis : 0 (évaluation directe) à 4.
+ *
+ * Glossaire : docs/glossaire/pli.md
+ */
+export type Ply = number;
+
+/** Le videau vu du joueur au trait. */
+export interface EngineCube {
+    readonly value: number;
+    readonly owner: "centered" | "onRoll" | "opponent";
+}
+
+/**
+ * Un coup légal complet.
+ *
+ * Glossaire : docs/glossaire/coup.md
+ */
+export interface Move {
+    /** Notation de gnubg, par exemple « 8/5 6/5 ». */
+    readonly notation: string;
+    /** Ses demi-coups, dans un ordre jouable. */
+    readonly halfMoves: readonly HalfMove[];
+    /** La position après le coup, vue du joueur qui vient de jouer. */
+    readonly position: PositionId;
+}
+
+export interface CubeDecision {
+    /** Le joueur au trait a le droit de doubler. */
+    readonly available: boolean;
+    /** Le moteur lui recommande de doubler. */
+    readonly double: boolean;
+    /** S'il double, le moteur recommande à l'adversaire de prendre. */
+    readonly take: boolean;
+}
+
+export interface HalfMovesCheck {
+    /** Les demi-coups commencent un coup légal. */
+    readonly valid: boolean;
+    /** Ils forment un coup légal complet. */
+    readonly complete: boolean;
+    /** La position après eux, vue du joueur qui joue (null si refusés). */
+    readonly position: PositionId | null;
+}
+
+/**
+ * Un plateau décodé, pour l'affichage et pour savoir si la partie est finie.
+ *
+ * Glossaire : docs/glossaire/plateau.md
+ */
+export interface Board {
+    readonly onRoll: BoardSide;
+    readonly opponent: BoardSide;
+    /** La même position vue de l'adversaire. */
+    readonly swappedPosition: PositionId;
+    /** null tant que la partie n'est pas finie. */
+    readonly result: BoardResult | null;
+}
+
+/** Un camp, vu de lui-même : sa case 1 est la plus proche de sa sortie. */
+export interface BoardSide {
+    /** Nombre de pions sur les cases 1 à 24 (indices 0 à 23). */
+    readonly points: readonly number[];
+    readonly bar: number;
+    readonly off: number;
+    readonly pipCount: number;
+}
+
+/** Simple, gammon ou backgammon. */
+export type ResultKind = "single" | "gammon" | "backgammon";
+
+export interface BoardResult {
+    readonly winner: "onRoll" | "opponent";
+    readonly kind: ResultKind;
+    /** Points gagnés, videau et règle Jacoby compris. */
+    readonly points: number;
+}

app/src/domain/game/events.ts

@@ -0,0 +1,148 @@
+// Les événements d'une partie et leur journal (ADR 0007, point 3).
+//
+// Copyright (C) 2026 les auteurs d'Ustagammon.
+// Licence : GPLv3 ou ultérieure (voir LICENSE).
+//
+// Une partie est la suite de ce qui s'est passé. Un événement n'est jamais
+// modifié ; chacun pointe vers le précédent (parent). Les événements forment
+// donc un arbre : une branche est un nouvel événement accroché à un ancien,
+// et annuler revient à repartir du parent. Le format des événements est un
+// contrat durable : le changer demande une migration et un ADR.
+//
+// Chaque événement contient tout ce qu'il faut pour rejouer la partie sans
+// le moteur : l'état se recalcule par une simple boucle (state.ts).
+
+import type { Cube } from "./cube.js";
+import type { ResultKind } from "./engine.js";
+import type { HalfMove, PositionId } from "./position.js";
+import type { Roll } from "./roll.js";
+import type { Side } from "./side.js";
+
+/** Version du format des événements. */
+export const EVENT_VERSION = 1;
+
+interface EventBase {
+    /** Identifiant, unique dans la partie. */
+    readonly id: string;
+    /** L'événement précédent ; null pour le premier. */
+    readonly parent: string | null;
+    readonly version: number;
+}
+
+/** Début de partie : la position, le videau, et qui commence (null : le jet
+ * d'ouverture le dira). La position est vue de celui qui commence ; celle de
+ * départ est la même pour les deux. */
+export interface GameStarted extends EventBase {
+    readonly type: "GameStarted";
+    readonly position: PositionId;
+    readonly cube: Cube;
+    readonly firstTurn: Side | null;
+}
+
+/** Des dés tirés. Pour le jet d'ouverture, side vaut null et chacun lance un
+ * dé : roll[0] est celui du joueur, roll[1] celui de l'ordinateur. */
+export interface DiceRolled extends EventBase {
+    readonly type: "DiceRolled";
+    readonly side: Side | null;
+    readonly roll: Roll;
+}
+
+/** Un coup joué (aucun demi-coup si le jet ne permettait pas de jouer). La
+ * position est celle d'après le coup, vue de l'adversaire, qui a la main. */
+export interface MovePlayed extends EventBase {
+    readonly type: "MovePlayed";
+    readonly side: Side;
+    readonly halfMoves: readonly HalfMove[];
+    readonly position: PositionId;
+}
+
+/** side propose de doubler. */
+export interface CubeOffered extends EventBase {
+    readonly type: "CubeOffered";
+    readonly side: Side;
+}
+
+/** side prend le double : le videau double de valeur et passe chez lui. */
+export interface CubeTaken extends EventBase {
+    readonly type: "CubeTaken";
+    readonly side: Side;
+}
+
+/** side passe le double : il perd la partie (GameEnded suit). */
+export interface CubeDropped extends EventBase {
+    readonly type: "CubeDropped";
+    readonly side: Side;
+}
+
+/** Fin de partie. */
+export interface GameEnded extends EventBase {
+    readonly type: "GameEnded";
+    readonly winner: Side;
+    readonly kind: ResultKind;
+    readonly points: number;
+}
+
+/**
+ * Ce qui s'est passé à un moment de la partie.
+ *
+ * Glossaire : docs/glossaire/evenement-de-partie.md
+ */
+export type GameEvent =
+    | GameStarted
+    | DiceRolled
+    | MovePlayed
+    | CubeOffered
+    | CubeTaken
+    | CubeDropped
+    | GameEnded;
+
+/** Un événement avant son ajout au journal (sans id, parent ni version). */
+export type NewGameEvent = WithoutBase<GameEvent>;
+
+// Omit appliqué à chaque sorte d'événement séparément (et non à leur union,
+// qui ne garderait que les champs communs).
+type WithoutBase<E> = E extends unknown ? Omit<E, keyof EventBase> : never;
+
+/** Tous les événements d'une partie, branches comprises, et l'événement
+ * courant (head) : la partie en est là. */
+export interface GameJournal {
+    readonly events: readonly GameEvent[];
+    readonly head: string | null;
+}
+
+export const EMPTY_JOURNAL: GameJournal = { events: [], head: null };
+
+/** Ajoute un événement après l'événement courant, qui devient le nouveau. */
+export function appendEvent(journal: GameJournal, event: NewGameEvent): GameJournal {
+    const added = Object.freeze({
+        ...event,
+        id: String(journal.events.length + 1),
+        parent: journal.head,
+        version: EVENT_VERSION,
+    }) as GameEvent;
+    return { events: [...journal.events, added], head: added.id };
+}
+
+/** Les événements du début jusqu'à l'événement courant, dans l'ordre. */
+export function currentLine(journal: GameJournal): GameEvent[] {
+    const byId = new Map(journal.events.map((event) => [event.id, event]));
+    const line: GameEvent[] = [];
+    let id = journal.head;
+    while (id !== null) {
+        const event = byId.get(id);
+        if (event === undefined) {
+            throw new Error(`événement introuvable : ${id}`);
+        }
+        line.push(event);
+        id = event.parent;
+    }
+    return line.reverse();
+}
+
+/** Revient à un événement passé ; le prochain ajout ouvrira une branche. */
+export function goBackTo(journal: GameJournal, id: string): GameJournal {
+    if (!journal.events.some((event) => event.id === id)) {
+        throw new Error(`événement introuvable : ${id}`);
+    }
+    return { events: journal.events, head: id };
+}

app/src/domain/game/game.ts

@@ -0,0 +1,585 @@
+// Une partie libre contre l'ordinateur.
+//
+// Copyright (C) 2026 les auteurs d'Ustagammon.
+// Licence : GPLv3 ou ultérieure (voir LICENSE).
+//
+// Le joueur et l'ordinateur agissent chacun leur tour ; chaque action ajoute
+// des événements au journal (events.ts), d'où l'état est recalculé
+// (state.ts). Les règles viennent toutes du moteur : coups légaux, coup de
+// l'ordinateur, videau, fin de partie et points.
+
+import { type Branch, branches, switchToBranch } from "./branches.js";
+import { CENTERED_CUBE, type Cube } from "./cube.js";
+import type { BoardSide, Engine, EngineCube, Ply } from "./engine.js";
+import {
+    appendEvent,
+    currentLine,
+    EMPTY_JOURNAL,
+    EVENT_VERSION,
+    type GameEvent,
+    type GameJournal,
+    goBackTo,
+    type NewGameEvent,
+} from "./events.js";
+import { BAR, type HalfMove, OFF, type PositionId, START_POSITION } from "./position.js";
+import { type DiceSource, type Roll, randomDice, rollDice } from "./roll.js";
+import { otherSide, type Side } from "./side.js";
+import { type GameState, replay } from "./state.js";
+
+/**
+ * Niveau « standard » de l'ordinateur : 2 plis. Sur le Fairphone 4 (Chrome),
+ * le meilleur coup à ce niveau prend au plus 348 ms (ADR 0009).
+ */
+export const STANDARD_PLY: Ply = 2;
+
+/** Une partie qui ne commence pas à la position de départ. */
+export interface GameSetup {
+    /** La position, vue de firstTurn. */
+    readonly position: PositionId;
+    /** Le camp qui a la main ; il n'y a pas de jet d'ouverture. */
+    readonly firstTurn: Side;
+    readonly cube?: Cube;
+}
+
+/** Le plateau vu de chaque camp, chacun avec sa propre numérotation des
+ * cases (sa case 1 est la plus proche de sa sortie). */
+export interface SideBoards {
+    readonly player: BoardSide;
+    readonly computer: BoardSide;
+}
+
+/**
+ * Un coup joué, demi-coup par demi-coup, pour le montrer : les plateaux
+ * successifs, tels que le moteur les donne.
+ */
+export interface MoveSteps {
+    readonly side: Side;
+    readonly halfMoves: readonly HalfMove[];
+    /** boards[0] : avant le coup ; boards[i + 1] : après le demi-coup i. */
+    readonly boards: readonly SideBoards[];
+    /** hits[i] : le demi-coup i a frappé un pion adverse, envoyé sur la barre
+     * (lu sur les plateaux du moteur, pas déduit des règles). */
+    readonly hits: readonly boolean[];
+}
+
+export interface GameOptions {
+    /** Source des dés ; le hasard ordinaire par défaut. */
+    readonly dice?: DiceSource;
+    /** Niveau de l'ordinateur ; STANDARD_PLY par défaut. */
+    readonly ply?: Ply;
+    readonly setup?: GameSetup;
+}
+
+/**
+ * Une partie contre l'ordinateur.
+ *
+ * Glossaire : docs/glossaire/partie.md
+ */
+export class Game {
+    readonly #engine: Engine;
+    readonly #dice: DiceSource;
+    readonly #ply: Ply;
+    #journal: GameJournal = EMPTY_JOURNAL;
+    // Coup du joueur en cours de saisie : pas encore dans le journal (il n'y
+    // entre qu'à sa validation, confirmMove). Pour chaque demi-coup saisi, la
+    // position après lui, et si le coup est alors complet, selon le moteur.
+    #pending: PendingHalfMove[] = [];
+
+    private constructor(engine: Engine, options: GameOptions) {
+        this.#engine = engine;
+        this.#dice = options.dice ?? randomDice;
+        this.#ply = options.ply ?? STANDARD_PLY;
+    }
+
+    /** Commence une partie : à la position de départ avec le jet d'ouverture,
+     * ou à la position de options.setup. */
+    static start(engine: Engine, options: GameOptions = {}): Game {
+        const game = new Game(engine, options);
+        const setup = options.setup;
+        game.#append({
+            type: "GameStarted",
+            position: setup?.position ?? START_POSITION,
+            cube: setup?.cube ?? CENTERED_CUBE,
+            firstTurn: setup?.firstTurn ?? null,
+        });
+        while (game.state.phase === "opening") {
+            game.#append({ type: "DiceRolled", side: null, roll: rollDice(game.#dice) });
+        }
+        return game;
+    }
+
+    /**
+     * Reprend une partie enregistrée, à partir de son journal. Erreur si le
+     * journal est d'un autre format ou incohérent.
+     */
+    static resume(engine: Engine, journal: GameJournal, options: GameOptions = {}): Game {
+        const first = journal.events[0];
+        if (first?.type !== "GameStarted" || journal.head === null) {
+            throw new Error("journal de partie vide ou mal formé");
+        }
+        if (journal.events.some((event) => event.version !== EVENT_VERSION)) {
+            throw new Error("journal de partie d'une autre version");
+        }
+        const game = new Game(engine, options);
+        game.#journal = journal;
+        // Vérifie que chaque événement de la ligne courante existe.
+        currentLine(journal);
+        return game;
+    }
+
+    /** Tous les événements, branches comprises, et l'événement courant. */
+    get journal(): GameJournal {
+        return this.#journal;
+    }
+
+    /** Les événements du début jusqu'à maintenant. */
+    get events(): GameEvent[] {
+        return currentLine(this.#journal);
+    }
+
+    get state(): GameState {
+        return replay(this.events);
+    }
+
+    /** Les demi-coups déjà saisis du coup en cours. */
+    get pendingHalfMoves(): readonly HalfMove[] {
+        return this.#pending.map((p) => p.halfMove);
+    }
+
+    /** Les demi-coups saisis forment un coup complet (le moteur le dit) : il
+     * n'attend plus que d'être validé (confirmMove) ou défait
+     * (undoLastHalfMove). */
+    get moveComplete(): boolean {
+        return this.#pending.at(-1)?.complete === true;
+    }
+
+    /** La position à afficher : après les demi-coups déjà saisis. */
+    get displayedPosition(): PositionId {
+        return this.#pending.at(-1)?.position ?? this.state.position;
+    }
+
+    /**
+     * Les dés du jet à jouer (quatre pour un double), et pour chacun s'il est
+     * déjà utilisé par un demi-coup saisi ; liste vide hors de la saisie d'un
+     * coup du joueur. Un demi-coup utilise le dé qui l'a produit dans
+     * nextHalfMoves (de from vers from - dé, ou vers la sortie) : aucune
+     * règle n'est jugée ici, la légalité vient du moteur.
+     */
+    get diceToPlay(): DieToPlay[] {
+        const state = this.state;
+        if (state.turn !== "player" || state.phase !== "moving" || state.roll === null) {
+            return [];
+        }
+        const [a, b] = state.roll;
+        const dice = a === b ? [a, a, a, a] : [a, b];
+        const used = assignDice(dice, this.pendingHalfMoves);
+        return dice.map((value, i) => ({ value, used: used[i] === true }));
+    }
+
+    /** Le plateau affiché (après les demi-coups déjà saisis), décodé par le
+     * moteur. */
+    async displayedBoard(): Promise<SideBoards> {
+        const state = this.state;
+        // La position est vue du camp qui a la main (le joueur pendant le jet
+        // d'ouverture : la position de départ est la même pour les deux).
+        return this.#sideBoards(this.displayedPosition, state.turn ?? "player", state.cube);
+    }
+
+    /**
+     * Le dernier coup joué de la partie, demi-coup par demi-coup (null s'il
+     * n'y en a pas). Les plateaux intermédiaires viennent du moteur
+     * (checkHalfMoves, puis board) : aucune règle n'est rejouée ici.
+     */
+    async lastMoveSteps(): Promise<MoveSteps | null> {
+        const events = this.events;
+        const index = events.findLastIndex((e) => e.type === "MovePlayed");
+        const played = events[index];
+        if (played?.type !== "MovePlayed") {
+            return null;
+        }
+        // L'état juste avant le coup : la position vue de celui qui joue, et
+        // son jet.
+        const before = replay(events.slice(0, index));
+        const roll = rollToPlay(before);
+        const positions = [before.position];
+        for (let i = 1; i <= played.halfMoves.length; i++) {
+            const check = await this.#engine.checkHalfMoves(
+                before.position,
+                roll,
+                played.halfMoves.slice(0, i),
+            );
+            if (check.position === null) {
+                throw new Error("coup enregistré refusé par le moteur");
+            }
+            positions.push(check.position);
+        }
+        const boards = await Promise.all(
+            positions.map((p) => this.#sideBoards(p, played.side, before.cube)),
+        );
+        const opponent = otherSide(played.side);
+        const hits = played.halfMoves.map(
+            (_, i) => (boards[i + 1]?.[opponent].bar ?? 0) > (boards[i]?.[opponent].bar ?? 0),
+        );
+        return { side: played.side, halfMoves: played.halfMoves, boards, hits };
+    }
+
+    /**
+     * Les demi-coups que le joueur peut saisir maintenant, à la suite de ceux
+     * déjà saisis (liste vide hors de son tour de jeu). Chaque candidat
+     * déplace un de ses pions de la valeur d'un dé (vers la sortie si le dé
+     * dépasse la case 1) ; seuls restent ceux que le moteur déclare menant à
+     * un coup légal. Aucune règle n'est jugée ici.
+     */
+    async nextHalfMoves(): Promise<HalfMove[]> {
+        const state = this.state;
+        if (state.turn !== "player" || state.phase !== "moving" || this.moveComplete) {
+            return [];
+        }
+        const roll = rollToPlay(state);
+        const { player } = await this.displayedBoard();
+        const candidates = new Map<string, HalfMove>();
+        for (const from of occupiedPoints(player)) {
+            for (const die of roll) {
+                const to = Math.max(from - die, OFF);
+                candidates.set(`${from}/${to}`, { from, to });
+            }
+        }
+        const moves = [...candidates.values()];
+        const checks = await Promise.all(
+            moves.map((h) =>
+                this.#engine.checkHalfMoves(state.position, roll, [...this.pendingHalfMoves, h]),
+            ),
+        );
+        return moves.filter((_, i) => checks[i]?.valid === true);
+    }
+
+    /** Le joueur peut-il doubler maintenant ? (Le moteur dit si le videau le
+     * permet.) */
+    async canDouble(): Promise<boolean> {
+        const state = this.state;
+        if (state.turn !== "player" || state.phase !== "rolling") {
+            return false;
+        }
+        // Le droit de doubler ne dépend pas du niveau : 0 pli suffit.
+        const decision = await this.#engine.cubeDecision(
+            state.position,
+            engineCube(state.cube, "player"),
+            0,
+        );
+        return decision.available;
+    }
+
+    // ------------------------------------------------------------- Joueur
+
+    /** Le joueur lance les dés. S'il ne peut pas jouer (cannotMove), son
+     * tour ne passe qu'une fois qu'il l'a constaté (skipTurn). */
+    async roll(): Promise<void> {
+        this.#expect("player", "rolling");
+        this.#append({ type: "DiceRolled", side: "player", roll: rollDice(this.#dice) });
+    }
+
+    /** Le joueur a lancé les dés, mais le moteur ne lui donne aucun coup
+     * légal : il ne peut que laisser passer son tour. */
+    async cannotMove(): Promise<boolean> {
+        const state = this.state;
+        if (state.turn !== "player" || state.phase !== "moving") {
+            return false;
+        }
+        const moves = await this.#engine.legalMoves(state.position, rollToPlay(state));
+        return moves.length === 0;
+    }
+
+    /** Le joueur, qui ne peut pas jouer son jet, laisse passer son tour.
+     * Erreur s'il a un coup possible. */
+    async skipTurn(): Promise<void> {
+        this.#expect("player", "moving");
+        if (!(await this.cannotMove())) {
+            throw new Error("vous avez un coup possible : jouez-le");
+        }
+        await this.#playMove("player", [], null);
+    }
+
+    /**
+     * Le joueur déplace un pion (un dé). Renvoie false si ce demi-coup ne
+     * mène à aucun coup légal (ou si le coup est déjà complet) : il est
+     * refusé et rien ne change. Le coup n'est pas joué pour autant : une fois
+     * complet (moveComplete), il attend d'être validé (confirmMove).
+     */
+    async playHalfMove(halfMove: HalfMove): Promise<boolean> {
+        const state = this.#expect("player", "moving");
+        if (this.moveComplete) {
+            return false;
+        }
+        const check = await this.#engine.checkHalfMoves(state.position, rollToPlay(state), [
+            ...this.pendingHalfMoves,
+            halfMove,
+        ]);
+        if (!check.valid || check.position === null) {
+            return false;
+        }
+        this.#pending = [
+            ...this.#pending,
+            { halfMove, position: check.position, complete: check.complete },
+        ];
+        return true;
+    }
+
+    /** Défait le dernier demi-coup saisi du coup en cours (rien s'il n'y en a
+     * pas) : il n'a jamais été dans le journal. */
+    undoLastHalfMove(): void {
+        this.#pending = this.#pending.slice(0, -1);
+    }
+
+    /** Oublie tous les demi-coups saisis du coup en cours. */
+    cancelHalfMoves(): void {
+        this.#pending = [];
+    }
+
+    /** Le joueur valide son coup complet : il entre dans le journal
+     * (MovePlayed) et le tour passe. Erreur si le coup n'est pas complet. */
+    async confirmMove(): Promise<void> {
+        this.#expect("player", "moving");
+        const last = this.#pending.at(-1);
+        if (last?.complete !== true) {
+            throw new Error("le coup n'est pas complet : jouez encore");
+        }
+        const halfMoves = this.pendingHalfMoves;
+        this.cancelHalfMoves();
+        await this.#playMove("player", halfMoves, last.position);
+    }
+
+    /** Le joueur double, avant de lancer les dés ; l'ordinateur prend ou passe
+     * selon le moteur. */
+    async double(): Promise<void> {
+        const state = this.#expect("player", "rolling");
+        const decision = await this.#engine.cubeDecision(
+            state.position,
+            engineCube(state.cube, "player"),
+            this.#ply,
+        );
+        if (!decision.available) {
+            throw new Error("vous ne pouvez pas doubler : le videau est chez l'ordinateur");
+        }
+        this.#append({ type: "CubeOffered", side: "player" });
+        this.#answerDouble("computer", decision.take);
+    }
+
+    /** Le joueur prend le double de l'ordinateur. */
+    take(): void {
+        this.#expect("computer", "doubled");
+        this.#answerDouble("player", true);
+    }
+
+    /** Le joueur passe le double de l'ordinateur : il perd la partie. */
+    drop(): void {
+        this.#expect("computer", "doubled");
+        this.#answerDouble("player", false);
+    }
+
+    // --------------------------------------------------------- Ordinateur
+
+    /**
+     * Le tour de l'ordinateur : il double si le moteur le recommande (le
+     * tour s'arrête alors, en attendant la réponse du joueur), sinon il lance
+     * les dés et joue le meilleur coup du moteur.
+     */
+    async playComputerTurn(): Promise<void> {
+        let state = this.#expect("computer", "rolling", "moving");
+        if (state.phase === "rolling") {
+            const decision = await this.#engine.cubeDecision(
+                state.position,
+                engineCube(state.cube, "computer"),
+                this.#ply,
+            );
+            if (decision.double) {
+                this.#append({ type: "CubeOffered", side: "computer" });
+                return;
+            }
+            this.#append({ type: "DiceRolled", side: "computer", roll: rollDice(this.#dice) });
+            state = this.state;
+        }
+        const best = await this.#engine.bestMove(
+            state.position,
+            engineCube(state.cube, "computer"),
+            rollToPlay(state),
+            this.#ply,
+        );
+        await this.#playMove("computer", best?.halfMoves ?? [], best?.position ?? null);
+    }
+
+    // ------------------------------------------------------------ Retour
+
+    /** Revient à un événement passé (« Rejouer d'ici ») : la suite reste dans
+     * le journal, et la prochaine action ouvre une nouvelle branche. */
+    goBackTo(eventId: string): void {
+        this.cancelHalfMoves();
+        this.#journal = goBackTo(this.#journal, eventId);
+    }
+
+    /** Les branches de la partie (voir branches.ts), la ligne d'origine
+     * d'abord. */
+    get branches(): Branch[] {
+        return branches(this.#journal);
+    }
+
+    /** Passe à une autre branche, désignée par son dernier événement : la
+     * partie reprend au bout de celle-ci ; les autres restent intactes. */
+    switchBranch(head: string): void {
+        this.cancelHalfMoves();
+        this.#journal = switchToBranch(this.#journal, head);
+    }
+
+    /** Annule le dernier événement : la partie repart de son parent. */
+    undo(): void {
+        const last = this.events.at(-1);
+        if (last?.parent == null) {
+            throw new Error("rien à annuler");
+        }
+        this.goBackTo(last.parent);
+    }
+
+    // ------------------------------------------------------------ Interne
+
+    #append(event: NewGameEvent): void {
+        this.#journal = appendEvent(this.#journal, event);
+    }
+
+    /** Le plateau d'une position vue de onRoll, décodé par le moteur. */
+    async #sideBoards(position: PositionId, onRoll: Side, cube: Cube): Promise<SideBoards> {
+        const board = await this.#engine.board(position, engineCube(cube, onRoll));
+        return onRoll === "player"
+            ? { player: board.onRoll, computer: board.opponent }
+            : { player: board.opponent, computer: board.onRoll };
+    }
+
+    /** Vérifie que c'est bien à side d'agir, dans l'une des phases. */
+    #expect(side: Side, ...phases: GameState["phase"][]): GameState {
+        const state = this.state;
+        if (state.turn !== side || !phases.includes(state.phase)) {
+            throw new Error(
+                `action impossible : la main est à ${state.turn ?? "personne"}, phase ${state.phase}`,
+            );
+        }
+        return state;
+    }
+
+    /**
+     * Enregistre un coup. after est la position après le coup, vue de celui
+     * qui joue (null s'il ne pouvait pas jouer). Le moteur dit si la partie
+     * est finie et donne la position vue de l'adversaire.
+     */
+    async #playMove(
+        side: Side,
+        halfMoves: readonly HalfMove[],
+        after: PositionId | null,
+    ): Promise<void> {
+        const state = this.state;
+        const board = await this.#engine.board(
+            after ?? state.position,
+            engineCube(state.cube, side),
+        );
+        this.#append({
+            type: "MovePlayed",
+            side,
+            halfMoves: halfMoves.map((h) => ({ from: h.from, to: h.to })),
+            position: board.swappedPosition,
+        });
+        if (board.result !== null) {
+            this.#append({
+                type: "GameEnded",
+                winner: board.result.winner === "onRoll" ? side : otherSide(side),
+                kind: board.result.kind,
+                points: board.result.points,
+            });
+        }
+    }
+
+    /** taker prend ou passe le double proposé par l'autre camp. */
+    #answerDouble(taker: Side, take: boolean): void {
+        if (take) {
+            this.#append({ type: "CubeTaken", side: taker });
+            return;
+        }
+        // Passer : on perd la partie à la valeur du videau d'avant le double.
+        this.#append({ type: "CubeDropped", side: taker });
+        this.#append({
+            type: "GameEnded",
+            winner: otherSide(taker),
+            kind: "single",
+            points: this.state.cube.value,
+        });
+    }
+}
+
+/** Un dé du jet à jouer, et s'il est déjà utilisé par un demi-coup saisi. */
+export interface DieToPlay {
+    readonly value: number;
+    readonly used: boolean;
+}
+
+/** Un demi-coup saisi, pas encore validé. */
+interface PendingHalfMove {
+    readonly halfMove: HalfMove;
+    /** La position après lui, vue du joueur. */
+    readonly position: PositionId;
+    /** Les demi-coups saisis jusqu'à lui forment un coup complet. */
+    readonly complete: boolean;
+}
+
+/**
+ * Quels dés les demi-coups ont utilisés : chaque demi-coup reçoit un dé
+ * différent qui le produit (de from vers from - dé, ou vers la sortie si le
+ * dé dépasse), comme les candidats de nextHalfMoves. Les dés sont essayés du
+ * plus petit au plus grand : un pion sorti l'est avec le plus petit dé
+ * suffisant. Si aucune répartition ne convient, les premiers dés sont
+ * marqués, un par demi-coup.
+ */
+function assignDice(dice: readonly number[], halfMoves: readonly HalfMove[]): boolean[] {
+    const order = dice.map((_, i) => i).sort((i, j) => (dice[i] ?? 0) - (dice[j] ?? 0));
+    const used = dice.map(() => false);
+    const fits = (h: HalfMove, die: number) => Math.max(h.from - die, OFF) === h.to;
+    const place = (k: number): boolean => {
+        const h = halfMoves[k];
+        if (h === undefined) {
+            return true;
+        }
+        for (const i of order) {
+            if (!used[i] && fits(h, dice[i] ?? 0)) {
+                used[i] = true;
+                if (place(k + 1)) {
+                    return true;
+                }
+                used[i] = false;
+            }
+        }
+        return false;
+    };
+    return place(0) ? used : dice.map((_, i) => i < halfMoves.length);
+}
+
+/** Le jet à jouer, en phase moving. */
+function rollToPlay(state: GameState): Roll {
+    if (state.roll === null) {
+        throw new Error("aucun jet à jouer");
+    }
+    return state.roll;
+}
+
+/** Les cases d'où un camp a des pions à jouer : la barre, puis 24 à 1. */
+function occupiedPoints(side: BoardSide): number[] {
+    const points = side.bar > 0 ? [BAR] : [];
+    for (let point = 24; point >= 1; point--) {
+        if ((side.points[point - 1] ?? 0) > 0) {
+            points.push(point);
+        }
+    }
+    return points;
+}
+
+/** Le videau vu du camp au trait, pour le moteur. */
+function engineCube(cube: Cube, onRoll: Side): EngineCube {
+    if (cube.owner === null) {
+        return { value: cube.value, owner: "centered" };
+    }
+    return { value: cube.value, owner: cube.owner === onRoll ? "onRoll" : "opponent" };
+}

app/src/domain/game/position.ts

@@ -0,0 +1,73 @@
+// Positions et demi-coups.
+//
+// Copyright (C) 2026 les auteurs d'Ustagammon.
+// Licence : GPLv3 ou ultérieure (voir LICENSE).
+
+/**
+ * Identifiant d'une position (Position ID de gnubg, 14 caractères). Il code le
+ * plateau vu du joueur au trait. Le domaine ne le décode jamais lui-même : il
+ * le passe au moteur.
+ *
+ * Glossaire : docs/glossaire/identifiant-de-position.md
+ */
+export type PositionId = string;
+
+/** La position de départ, identique pour les deux joueurs. */
+export const START_POSITION: PositionId = "4HPwATDgc/ABMA";
+
+/** Case de la barre et de la sortie dans un demi-coup. */
+export const BAR = 25;
+export const OFF = 0;
+
+/**
+ * Un pion déplacé avec un seul dé, d'une case à une autre. Les cases sont
+ * vues du joueur qui joue : 1 à 24, BAR (25) pour la barre, OFF (0) pour la
+ * sortie.
+ *
+ * Glossaire : docs/glossaire/demi-coup.md
+ */
+export interface HalfMove {
+    readonly from: number;
+    readonly to: number;
+}
+
+/** Lit un coup noté « 8/5 6/5 », « bar/22 » ou « 6/off » (un dé par demi-coup). */
+export function parseHalfMoves(text: string): HalfMove[] {
+    return text
+        .trim()
+        .split(/\s+/)
+        .filter((part) => part !== "")
+        .map((part) => {
+            const [from, to, ...rest] = part.split("/");
+            if (from === undefined || to === undefined || rest.length > 0) {
+                throw new Error(`demi-coup mal formé : ${part}`);
+            }
+            return { from: parsePoint(from), to: parsePoint(to) };
+        });
+}
+
+/** Écrit des demi-coups sous la forme « 8/5 6/5 ». */
+export function formatHalfMoves(halfMoves: readonly HalfMove[]): string {
+    return halfMoves.map((h) => `${formatPoint(h.from)}/${formatPoint(h.to)}`).join(" ");
+}
+
+function parsePoint(text: string): number {
+    if (text === "bar") {
+        return BAR;
+    }
+    if (text === "off") {
+        return OFF;
+    }
+    const point = Number(text);
+    if (!Number.isInteger(point) || point < 1 || point > 24) {
+        throw new Error(`case invalide : ${text}`);
+    }
+    return point;
+}
+
+function formatPoint(point: number): string {
+    if (point === BAR) {
+        return "bar";
+    }
+    return point === OFF ? "off" : String(point);
+}

app/src/domain/game/roll.ts

@@ -0,0 +1,46 @@
+// Jets de dés et source du hasard.
+//
+// Copyright (C) 2026 les auteurs d'Ustagammon.
+// Licence : GPLv3 ou ultérieure (voir LICENSE).
+
+/**
+ * Un jet : les deux dés, chacun de 1 à 6.
+ *
+ * Glossaire : docs/glossaire/jet.md
+ */
+export type Roll = readonly [number, number];
+
+/**
+ * Source de dés : chaque appel renvoie un dé, de 1 à 6. Elle est passée au
+ * domaine (ADR 0007, point 4) : hasard véritable dans l'application, dés
+ * imposés dans les tests.
+ */
+export type DiceSource = () => number;
+
+/** Le hasard ordinaire. */
+export const randomDice: DiceSource = () => 1 + Math.floor(Math.random() * 6);
+
+/** Des dés imposés, dans l'ordre ; erreur s'il n'en reste plus. */
+export function fixedDice(values: readonly number[]): DiceSource {
+    let next = 0;
+    return () => {
+        const value = values[next];
+        if (value === undefined) {
+            throw new Error("plus de dés imposés");
+        }
+        next++;
+        return value;
+    };
+}
+
+/** Tire un jet de deux dés. */
+export function rollDice(dice: DiceSource): Roll {
+    return [checkDie(dice()), checkDie(dice())];
+}
+
+function checkDie(value: number): number {
+    if (!Number.isInteger(value) || value < 1 || value > 6) {
+        throw new Error(`dé invalide : ${value}`);
+    }
+    return value;
+}

app/src/domain/game/saved-game.ts

@@ -0,0 +1,64 @@
+// Une partie enregistrée, telle que la liste « Mes parties » la présente.
+//
+// Copyright (C) 2026 les auteurs d'Ustagammon.
+// Licence : GPLv3 ou ultérieure (voir LICENSE).
+//
+// Le journal reste la source (ADR 0007, point 3) : le résumé n'en est qu'une
+// lecture, recalculée à chaque enregistrement, pour afficher la liste sans
+// relire tous les journaux.
+
+import { branches } from "./branches.js";
+import type { Level } from "./engine.js";
+import { currentLine, type GameJournal } from "./events.js";
+import { type GameResult, replay } from "./state.js";
+
+/**
+ * Le résumé d'une partie enregistrée.
+ *
+ * Glossaire : docs/glossaire/partie-enregistree.md
+ */
+export interface SavedGameSummary {
+    /** Identifiant de la partie, unique sur l'appareil. */
+    readonly id: string;
+    /** Début de la partie et dernière action, en millisecondes depuis 1970. */
+    readonly startedAt: number;
+    readonly updatedAt: number;
+    /** Niveau de l'ordinateur, l'adversaire. */
+    readonly level: Level;
+    /** En cours ou finie, sur la branche courante. */
+    readonly status: "playing" | "over";
+    /** Le résultat sur la branche courante (null si elle n'est pas finie). */
+    readonly result: GameResult | null;
+    /** Coups joués sur la branche courante. */
+    readonly moveCount: number;
+    /** Nombre de branches (1 : jamais rejouée). */
+    readonly branchCount: number;
+}
+
+/** Ce qu'il faut savoir d'une partie pour l'enregistrer, en plus de son
+ * journal. */
+export interface SavedGameDetails {
+    readonly level: Level;
+}
+
+/** Le résumé d'un journal ; startedAt et updatedAt viennent de l'appelant
+ * (le domaine ne lit pas l'horloge). */
+export function summarizeGame(
+    id: string,
+    journal: GameJournal,
+    details: SavedGameDetails,
+    times: { readonly startedAt: number; readonly updatedAt: number },
+): SavedGameSummary {
+    const line = currentLine(journal);
+    const state = replay(line);
+    return {
+        id,
+        startedAt: times.startedAt,
+        updatedAt: times.updatedAt,
+        level: details.level,
+        status: state.phase === "over" ? "over" : "playing",
+        result: state.result,
+        moveCount: line.filter((event) => event.type === "MovePlayed").length,
+        branchCount: branches(journal).length,
+    };
+}

app/src/domain/game/sgf.ts

@@ -0,0 +1,226 @@
+// Export d'une partie au format SGF de GNU Backgammon.
+//
+// Copyright (C) 2026 les auteurs d'Ustagammon.
+// Licence : GPLv3 ou ultérieure (voir LICENSE).
+//
+// Le SGF (Smart Game Format, FF[4], GM[6] pour le backgammon) est le format
+// de fichier de GNU Backgammon : une suite de nœuds, un par coup ou décision
+// de videau, et des variantes entre parenthèses. Le journal étant un arbre,
+// l'export en est un simple parcours (ADR 0007, point 3) : chaque branche
+// devient une variante. GNU Backgammon ne lit que la première variante de
+// chaque embranchement ; la branche courante de la partie vient donc en
+// premier, pour que gnubg ouvre la partie telle que le joueur la voit.
+//
+// Conventions de gnubg (sgf.c, au commit figé par l'ADR 0005) :
+// - le joueur est « B » (le joueur 1 de gnubg, l'humain), l'ordinateur « W » ;
+// - un coup s'écrit [dés][départ arrivée]… ; une case c (1 à 24, vue de celui
+//   qui joue) s'écrit 'x' - (c - 1) pour B et 'a' + (c - 1) pour W ; la barre
+//   s'écrit 'y', la sortie 'z' ; un coup impossible n'a que ses dés ;
+// - [double], [take], [drop] pour le videau ;
+// - une position de départ autre que l'habituelle se pose par AE, AW, AB et
+//   PL, le videau par CV et CP.
+// Aucune règle n'est jugée ici : les coups et positions viennent du journal,
+// et une position de départ particulière est décodée par le moteur.
+
+import type { Engine } from "./engine.js";
+import { currentLine, type GameEvent, type GameJournal } from "./events.js";
+import { BAR, type HalfMove, OFF, START_POSITION } from "./position.js";
+import type { Side } from "./side.js";
+import { replay } from "./state.js";
+
+export interface SgfOptions {
+    /** Nom du joueur (PB). */
+    readonly playerName: string;
+    /** Nom de l'ordinateur (PW). */
+    readonly computerName: string;
+    /** Date de la partie, AAAA-MM-JJ (DT) ; absente si non fournie. */
+    readonly date?: string;
+}
+
+/** Un nœud SGF et les variantes qui le suivent. */
+interface SgfNode {
+    readonly properties: string;
+    readonly children: SgfNode[];
+}
+
+/**
+ * La partie au format SGF de GNU Backgammon, branches comprises (en
+ * variantes, la branche courante d'abord). Le moteur ne sert qu'à décoder
+ * une position de départ particulière. (Le format : docs/glossaire/sgf.md.)
+ */
+export async function exportSgf(
+    engine: Engine,
+    journal: GameJournal,
+    options: SgfOptions,
+): Promise<string> {
+    const start = journal.events[0];
+    if (start?.type !== "GameStarted") {
+        throw new Error("journal de partie vide ou mal formé");
+    }
+    const byId = new Map(journal.events.map((event) => [event.id, event]));
+    const onHeadLine = new Set(currentLine(journal).map((event) => event.id));
+    const children = new Map<string, GameEvent[]>();
+    for (const event of journal.events) {
+        if (event.parent !== null) {
+            children.set(event.parent, [...(children.get(event.parent) ?? []), event]);
+        }
+    }
+    // La branche courante d'abord, puis les autres dans l'ordre du journal.
+    for (const list of children.values()) {
+        list.sort((a, b) => Number(onHeadLine.has(b.id)) - Number(onHeadLine.has(a.id)));
+    }
+
+    /** Les variantes qui suivent un événement. */
+    const variations = (id: string): SgfNode[] =>
+        (children.get(id) ?? []).flatMap((child) => {
+            const properties = nodeProperties(child, byId, children.has(child.id));
+            const below = variations(child.id);
+            return properties === null ? below : [{ properties, children: below }];
+        });
+
+    // La partie telle que la voit gnubg : la ligne courante.
+    const result = replay(currentLine(journal)).result;
+    const root = [
+        "FF[4]GM[6]CA[UTF-8]AP[Ustagammon]",
+        "MI[length:0][game:0][ws:0][bs:0]",
+        `PW[${escapeText(options.computerName)}]PB[${escapeText(options.playerName)}]`,
+        options.date === undefined ? "" : `DT[${escapeText(options.date)}]`,
+        result === null ? "" : `RE[${letter(result.winner)}+${result.points}]`,
+    ].join("");
+    // Les nœuds d'installation, à la suite l'un de l'autre, puis la partie.
+    const setup = await setupProperties(engine, start);
+    const tree = setup.reduceRight<SgfNode[]>(
+        (below, properties) => [{ properties, children: below }],
+        variations(start.id),
+    );
+    return `(;${root}${sequence(tree)})\n`;
+}
+
+/** Écrit des nœuds : une suite tant qu'il n'y a qu'une variante, puis
+ * chaque variante entre parenthèses. */
+function sequence(nodes: readonly SgfNode[]): string {
+    if (nodes.length === 1) {
+        const [node] = nodes as [SgfNode];
+        return `\n;${node.properties}${sequence(node.children)}`;
+    }
+    return nodes.map((node) => `(\n;${node.properties}${sequence(node.children)})`).join("");
+}
+
+/** Les propriétés du nœud d'un événement, ou null s'il n'en fait pas
+ * (début, dés suivis d'un coup, fin de partie). */
+function nodeProperties(
+    event: GameEvent,
+    byId: ReadonlyMap<string, GameEvent>,
+    hasChildren: boolean,
+): string | null {
+    switch (event.type) {
+        case "MovePlayed": {
+            const rolled = event.parent === null ? undefined : byId.get(event.parent);
+            if (rolled?.type !== "DiceRolled") {
+                throw new Error(`coup sans jet de dés : ${event.id}`);
+            }
+            const moves = event.halfMoves.map((h) => halfMove(h, event.side)).join("");
+            return `${letter(event.side)}[${rolled.roll[0]}${rolled.roll[1]}${moves}]`;
+        }
+        case "CubeOffered":
+            return `${letter(event.side)}[double]`;
+        case "CubeTaken":
+            return `${letter(event.side)}[take]`;
+        case "CubeDropped":
+            return `${letter(event.side)}[drop]`;
+        case "DiceRolled": {
+            // Des dés pas encore joués, au bout d'une branche.
+            if (hasChildren) {
+                return null;
+            }
+            const [a, b] = event.roll;
+            const side = event.side ?? (a > b ? "player" : a < b ? "computer" : null);
+            return side === null ? null : `PL[${letter(side)}]DI[${a}${b}]`;
+        }
+        case "GameStarted":
+        case "GameEnded":
+            return null;
+    }
+}
+
+/** Les propriétés des nœuds qui posent une position de départ particulière
+ * (aucun pour la position habituelle, videau au centre, jet d'ouverture à
+ * faire). */
+async function setupProperties(
+    engine: Engine,
+    start: Extract<GameEvent, { type: "GameStarted" }>,
+): Promise<string[]> {
+    const usual =
+        start.position === START_POSITION &&
+        start.firstTurn === null &&
+        start.cube.value === 1 &&
+        start.cube.owner === null;
+    if (usual) {
+        return [];
+    }
+    const onRoll: Side = start.firstTurn ?? "player";
+    const owner =
+        start.cube.owner === null
+            ? "centered"
+            : start.cube.owner === onRoll
+              ? "onRoll"
+              : "opponent";
+    const board = await engine.board(start.position, { value: start.cube.value, owner });
+    // Chaque camp avec sa propre numérotation : W en 'a' + (c - 1), B en
+    // 'x' - (c - 1), la barre en 'y' (comme les coups).
+    const stones = (side: Side, points: readonly number[], bar: number) => {
+        const out: string[] = [];
+        points.forEach((count, i) => {
+            for (let k = 0; k < count; k++) {
+                out.push(`[${pointLetter(i + 1, side)}]`);
+            }
+        });
+        for (let k = 0; k < bar; k++) {
+            out.push("[y]");
+        }
+        return out.join("");
+    };
+    const other: Side = onRoll === "player" ? "computer" : "player";
+    const sides = { [onRoll]: board.onRoll, [other]: board.opponent } as Record<
+        Side,
+        typeof board.onRoll
+    >;
+    const white = stones("computer", sides.computer.points, sides.computer.bar);
+    const black = stones("player", sides.player.points, sides.player.bar);
+    const nodes = [
+        `PL[${letter(onRoll)}]AE[a:y]${white === "" ? "" : `AW${white}`}${black === "" ? "" : `AB${black}`}`,
+    ];
+    if (start.cube.value !== 1) {
+        nodes.push(`CV[${start.cube.value}]`);
+    }
+    if (start.cube.owner !== null) {
+        nodes.push(`CP[${start.cube.owner === "player" ? "b" : "w"}]`);
+    }
+    return nodes;
+}
+
+function letter(side: Side): "B" | "W" {
+    return side === "player" ? "B" : "W";
+}
+
+function halfMove(h: HalfMove, side: Side): string {
+    return pointLetter(h.from, side) + pointLetter(h.to, side);
+}
+
+/** Une case vue du camp side : 1 à 24, BAR ou OFF. */
+function pointLetter(point: number, side: Side): string {
+    if (point === BAR) {
+        return "y";
+    }
+    if (point === OFF) {
+        return "z";
+    }
+    const code =
+        side === "player" ? "x".charCodeAt(0) - (point - 1) : "a".charCodeAt(0) + point - 1;
+    return String.fromCharCode(code);
+}
+
+/** Échappe un texte libre dans une valeur SGF. */
+function escapeText(text: string): string {
+    return text.replace(/[\\\]]/g, (c) => `\\${c}`);
+}

app/src/domain/game/side.ts

@@ -0,0 +1,11 @@
+// Les deux camps d'une partie contre l'ordinateur.
+//
+// Copyright (C) 2026 les auteurs d'Ustagammon.
+// Licence : GPLv3 ou ultérieure (voir LICENSE).
+
+/** Le joueur humain (« vous ») ou l'ordinateur. */
+export type Side = "player" | "computer";
+
+export function otherSide(side: Side): Side {
+    return side === "player" ? "computer" : "player";
+}

app/src/domain/game/state.ts

@@ -0,0 +1,108 @@
+// L'état d'une partie, recalculé en rejouant ses événements.
+//
+// Copyright (C) 2026 les auteurs d'Ustagammon.
+// Licence : GPLv3 ou ultérieure (voir LICENSE).
+
+import { CENTERED_CUBE, type Cube } from "./cube.js";
+import type { ResultKind } from "./engine.js";
+import type { GameEvent } from "./events.js";
+import { type PositionId, START_POSITION } from "./position.js";
+import type { Roll } from "./roll.js";
+import { otherSide, type Side } from "./side.js";
+
+/**
+ * Où en est la partie :
+ * - opening : jet d'ouverture, chacun lance un dé ;
+ * - rolling : turn peut doubler, puis lance les dés ;
+ * - moving : turn joue le jet roll ;
+ * - doubled : turn a proposé de doubler, l'adversaire doit prendre ou passer ;
+ * - over : partie finie, voir result.
+ */
+export type Phase = "opening" | "rolling" | "moving" | "doubled" | "over";
+
+export interface GameResult {
+    readonly winner: Side;
+    readonly kind: ResultKind;
+    readonly points: number;
+}
+
+export interface GameState {
+    readonly phase: Phase;
+    /** Le camp qui a la main (null pendant le jet d'ouverture). */
+    readonly turn: Side | null;
+    /** La position, vue du camp qui a la main. */
+    readonly position: PositionId;
+    /** Le jet à jouer (phase moving). */
+    readonly roll: Roll | null;
+    readonly cube: Cube;
+    readonly result: GameResult | null;
+}
+
+/** Avant le premier événement. */
+const NOT_STARTED: GameState = {
+    phase: "opening",
+    turn: null,
+    position: START_POSITION,
+    roll: null,
+    cube: CENTERED_CUBE,
+    result: null,
+};
+
+/** Rejoue des événements, du premier au dernier. */
+export function replay(events: readonly GameEvent[]): GameState {
+    return events.reduce(applyEvent, NOT_STARTED);
+}
+
+/** L'état après un événement. */
+export function applyEvent(state: GameState, event: GameEvent): GameState {
+    switch (event.type) {
+        case "GameStarted":
+            return {
+                ...NOT_STARTED,
+                position: event.position,
+                cube: event.cube,
+                turn: event.firstTurn,
+                phase: event.firstTurn === null ? "opening" : "rolling",
+            };
+        case "DiceRolled":
+            if (event.side !== null) {
+                return { ...state, phase: "moving", roll: event.roll };
+            }
+            // Jet d'ouverture : le plus fort dé commence et joue les deux
+            // dés ; en cas d'égalité, on relance.
+            if (event.roll[0] === event.roll[1]) {
+                return state;
+            }
+            return {
+                ...state,
+                phase: "moving",
+                turn: event.roll[0] > event.roll[1] ? "player" : "computer",
+                roll: event.roll,
+            };
+        case "MovePlayed":
+            return {
+                ...state,
+                phase: "rolling",
+                turn: otherSide(event.side),
+                position: event.position,
+                roll: null,
+            };
+        case "CubeOffered":
+            return { ...state, phase: "doubled" };
+        case "CubeTaken":
+            return {
+                ...state,
+                phase: "rolling",
+                cube: { value: state.cube.value * 2, owner: event.side },
+            };
+        case "CubeDropped":
+            return state;
+        case "GameEnded":
+            return {
+                ...state,
+                phase: "over",
+                roll: null,
+                result: { winner: event.winner, kind: event.kind, points: event.points },
+            };
+    }
+}

app/src/domain/tsconfig.json

@@ -0,0 +1,9 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "lib": ["ES2023"],
+        "types": [],
+        "noEmit": true
+    },
+    "include": ["."]
+}

app/src/engine/wasm-engine.ts

@@ -0,0 +1,274 @@
+// L'interface Engine du domaine, implémentée avec le moteur WebAssembly.
+//
+// Copyright (C) 2026 les auteurs d'Ustagammon.
+// Licence : GPLv3 ou ultérieure (voir LICENSE).
+//
+// Le moteur WebAssembly répond aux mêmes commandes qu'engine-cli, en JSON
+// (web/engine-wasm.mjs). Cet adaptateur traduit chaque méthode en commande et
+// chaque réponse en types du domaine. Il ne sait pas comment la commande est
+// exécutée : directement sous Node, dans un Web Worker dans le navigateur.
+
+import type {
+    Board,
+    BoardResult,
+    BoardSide,
+    CubeAction,
+    CubeAnalysis,
+    CubeDecision,
+    Engine,
+    EngineCube,
+    EvaluatedMove,
+    HalfMovesCheck,
+    Level,
+    Luck,
+    LuckRating,
+    Move,
+    MoveAnalysis,
+    Ply,
+    Skill,
+} from "../domain/game/engine.js";
+import { formatHalfMoves, type HalfMove, type PositionId } from "../domain/game/position.js";
+import type { Roll } from "../domain/game/roll.js";
+
+/** Exécute une commande d'engine-cli et renvoie son JSON décodé ; la
+ * promesse est rejetée si le moteur signale une erreur. */
+export type RunCommand = (args: string[]) => Promise<unknown>;
+
+// Les réponses d'engine-cli utilisées ici (voir engine-cli/main.c).
+interface CliMove {
+    move: string;
+    position_id: string;
+    half_moves: [number, number][];
+}
+interface CliEvaluatedMove extends CliMove {
+    ply: number;
+    equity: number;
+}
+type CliSkill = "none" | "doubtful" | "bad" | "very_bad";
+interface CliCubeDecision {
+    available: boolean;
+    double: boolean;
+    take: boolean;
+}
+interface CliSide {
+    points: number[];
+    bar: number;
+    off: number;
+    pip_count: number;
+}
+interface CliBoard {
+    on_roll: CliSide;
+    opponent: CliSide;
+    swapped_position_id: string;
+    result: { winner: "on_roll" | "opponent"; kind: BoardResult["kind"]; points: number } | null;
+}
+
+export function createWasmEngine(run: RunCommand): Engine {
+    // Un Match ID par état du videau : le moteur les code une fois.
+    const matchIds = new Map<string, string>();
+
+    async function matchId(cube: EngineCube): Promise<string> {
+        // Partie libre, joueur 0 au trait : le propriétaire 0 est le joueur au
+        // trait, 1 son adversaire, -1 le centre.
+        const owner = { centered: -1, onRoll: 0, opponent: 1 }[cube.owner];
+        const key = `${cube.value} ${owner}`;
+        let id = matchIds.get(key);
+        if (id === undefined) {
+            const answer = (await run(["matchid", String(cube.value), String(owner)])) as {
+                match_id: string;
+            };
+            id = answer.match_id;
+            matchIds.set(key, id);
+        }
+        return id;
+    }
+
+    return {
+        async legalMoves(position: PositionId, roll: Roll): Promise<Move[]> {
+            // Le Match ID n'a pas d'effet sur les coups légaux.
+            const answer = (await run(["legal", position, "MAEAAAAAAAAA", diceText(roll)])) as {
+                moves: CliMove[];
+            };
+            return answer.moves.map(toMove);
+        },
+
+        async bestMove(position: PositionId, cube: EngineCube, roll: Roll, ply: Ply) {
+            const args = ["--ply", String(ply), "bestmove", position, await matchId(cube)];
+            const answer = (await run([...args, diceText(roll)])) as { best_move: CliMove | null };
+            return answer.best_move === null ? null : toMove(answer.best_move);
+        },
+
+        async cubeDecision(
+            position: PositionId,
+            cube: EngineCube,
+            ply: Ply,
+        ): Promise<CubeDecision> {
+            const args = ["--ply", String(ply), "cube", position, await matchId(cube)];
+            return toCubeDecision((await run(args)) as CliCubeDecision);
+        },
+
+        async levelMove(position: PositionId, cube: EngineCube, roll: Roll, level: Level) {
+            const args = ["--level", level, "bestmove", position, await matchId(cube)];
+            const answer = (await run([...args, diceText(roll)])) as { best_move: CliMove | null };
+            return answer.best_move === null ? null : toMove(answer.best_move);
+        },
+
+        async levelCubeDecision(
+            position: PositionId,
+            cube: EngineCube,
+            level: Level,
+        ): Promise<CubeDecision> {
+            const args = ["--level", level, "cube", position, await matchId(cube)];
+            return toCubeDecision((await run(args)) as CliCubeDecision);
+        },
+
+        async analyseMove(
+            position: PositionId,
+            cube: EngineCube,
+            roll: Roll,
+            played: PositionId,
+            ply: Ply,
+        ): Promise<MoveAnalysis | null> {
+            const args = ["--ply", String(ply), "analysemove", position, await matchId(cube)];
+            const answer = (await run([...args, diceText(roll), played])) as {
+                move_count: number;
+                rank: number | null;
+                played: CliEvaluatedMove | null;
+                best: CliEvaluatedMove | null;
+                equity_loss: number;
+                skill: CliSkill;
+            };
+            if (answer.rank === null || answer.played === null || answer.best === null) {
+                return null;
+            }
+            return {
+                moveCount: answer.move_count,
+                rank: answer.rank,
+                played: toEvaluatedMove(answer.played),
+                best: toEvaluatedMove(answer.best),
+                equityLoss: answer.equity_loss,
+                skill: toSkill(answer.skill),
+            };
+        },
+
+        async analyseCube(
+            position: PositionId,
+            cube: EngineCube,
+            action: CubeAction,
+            ply: Ply,
+        ): Promise<CubeAnalysis> {
+            const cliAction = {
+                noDouble: "no_double",
+                double: "double",
+                take: "take",
+                pass: "pass",
+            }[action];
+            const args = ["--ply", String(ply), "analysecube", position, await matchId(cube)];
+            const answer = (await run([...args, cliAction])) as {
+                analysed: boolean;
+                cube: {
+                    no_double: number;
+                    double_take: number;
+                    double_pass: number;
+                    optimal: number;
+                } | null;
+                equity_loss: number;
+                skill: CliSkill;
+            };
+            return {
+                analysed: answer.analysed,
+                equities:
+                    answer.cube === null
+                        ? null
+                        : {
+                              noDouble: answer.cube.no_double,
+                              doubleTake: answer.cube.double_take,
+                              doublePass: answer.cube.double_pass,
+                              optimal: answer.cube.optimal,
+                          },
+                equityLoss: answer.equity_loss,
+                skill: toSkill(answer.skill),
+            };
+        },
+
+        async luck(position: PositionId, cube: EngineCube, roll: Roll): Promise<Luck> {
+            const args = ["luck", position, await matchId(cube), diceText(roll)];
+            const answer = (await run(args)) as { luck: number; rating: string };
+            const ratings: Record<string, LuckRating> = {
+                very_unlucky: "veryUnlucky",
+                unlucky: "unlucky",
+                none: "none",
+                lucky: "lucky",
+                very_lucky: "veryLucky",
+            };
+            const rating = ratings[answer.rating];
+            if (rating === undefined) {
+                throw new Error(`chance inconnue : ${answer.rating}`);
+            }
+            return { value: answer.luck, rating };
+        },
+
+        async checkHalfMoves(
+            position: PositionId,
+            roll: Roll,
+            halfMoves: readonly HalfMove[],
+        ): Promise<HalfMovesCheck> {
+            const args = ["halfmoves", position, diceText(roll), formatHalfMoves(halfMoves)];
+            const answer = (await run(args)) as {
+                valid: boolean;
+                complete: boolean;
+                result_position_id: string | null;
+            };
+            return {
+                valid: answer.valid,
+                complete: answer.complete,
+                position: answer.result_position_id,
+            };
+        },
+
+        async board(position: PositionId, cube: EngineCube): Promise<Board> {
+            const answer = (await run(["position", position, await matchId(cube)])) as CliBoard;
+            return {
+                onRoll: toSide(answer.on_roll),
+                opponent: toSide(answer.opponent),
+                swappedPosition: answer.swapped_position_id,
+                result:
+                    answer.result === null
+                        ? null
+                        : {
+                              winner: answer.result.winner === "on_roll" ? "onRoll" : "opponent",
+                              kind: answer.result.kind,
+                              points: answer.result.points,
+                          },
+            };
+        },
+    };
+}
+
+function diceText(roll: Roll): string {
+    return `${roll[0]}${roll[1]}`;
+}
+
+function toMove(move: CliMove): Move {
+    return {
+        notation: move.move,
+        halfMoves: move.half_moves.map(([from, to]) => ({ from, to })),
+        position: move.position_id,
+    };
+}
+
+function toEvaluatedMove(move: CliEvaluatedMove): EvaluatedMove {
+    return { ...toMove(move), equity: move.equity, ply: move.ply };
+}
+
+function toCubeDecision(answer: CliCubeDecision): CubeDecision {
+    return { available: answer.available, double: answer.double, take: answer.take };
+}
+
+function toSkill(skill: CliSkill): Skill {
+    return skill === "very_bad" ? "veryBad" : skill;
+}
+
+function toSide(side: CliSide): BoardSide {
+    return { points: side.points, bar: side.bar, off: side.off, pipCount: side.pip_count };
+}

app/src/engine/worker-run.ts

@@ -0,0 +1,81 @@
+// Les commandes du moteur exécutées dans un Web Worker (web/engine-worker.mjs),
+// pour que le calcul ne bloque jamais l'affichage.
+//
+// Copyright (C) 2026 les auteurs d'Ustagammon.
+// Licence : GPLv3 ou ultérieure (voir LICENSE).
+//
+// Messages du Worker (voir engine-worker.mjs) : une fois au chargement
+// { type: "ready" } ou { type: "failed", message } ; puis, pour chaque
+// commande { id, args } envoyée, { id, result } ou { id, error }. Le Worker
+// traite les commandes une à une, dans l'ordre d'arrivée.
+
+import type { RunCommand } from "./wasm-engine.js";
+
+export interface EngineWorker {
+    /** Résolue quand le moteur est chargé ; rejetée s'il ne peut pas l'être. */
+    readonly ready: Promise<void>;
+    readonly run: RunCommand;
+}
+
+interface Pending {
+    resolve(result: unknown): void;
+    reject(error: Error): void;
+}
+
+export function startEngineWorker(url: URL): EngineWorker {
+    const worker = new Worker(url, { type: "module" });
+    const pending = new Map<number, Pending>();
+    let nextId = 1;
+    let failure: Error | null = null;
+    let markReady: () => void = () => {};
+    let markFailed: (error: Error) => void = () => {};
+    const ready = new Promise<void>((resolve, reject) => {
+        markReady = resolve;
+        markFailed = reject;
+    });
+
+    // Le moteur est inutilisable : toutes les commandes échouent.
+    function fail(error: Error): void {
+        failure = error;
+        markFailed(error);
+        for (const { reject } of pending.values()) {
+            reject(error);
+        }
+        pending.clear();
+    }
+
+    worker.onmessage = (event: MessageEvent) => {
+        const message = event.data;
+        if (message.type === "ready") {
+            markReady();
+        } else if (message.type === "failed") {
+            fail(new Error(message.message));
+        } else {
+            const request = pending.get(message.id);
+            pending.delete(message.id);
+            if (message.error !== undefined) {
+                request?.reject(new Error(message.error));
+            } else {
+                request?.resolve(message.result);
+            }
+        }
+    };
+    // Le Worker lui-même n'a pas démarré (fichier absent, navigateur trop
+    // ancien pour les Workers en module ES…).
+    worker.onerror = (event: ErrorEvent) => {
+        fail(new Error(event.message || "le Web Worker du moteur n'a pas démarré"));
+    };
+
+    function run(args: string[]): Promise<unknown> {
+        if (failure !== null) {
+            return Promise.reject(failure);
+        }
+        const id = nextId++;
+        return new Promise((resolve, reject) => {
+            pending.set(id, { resolve, reject });
+            worker.postMessage({ id, args });
+        });
+    }
+
+    return { ready, run };
+}

app/src/main.ts

@@ -0,0 +1,112 @@
+// Point d'entrée de l'application dans le navigateur (index.html) : le seul
+// endroit qui assemble le domaine, le moteur, le stockage et l'interface
+// (ADR 0007, vérifié par dependency-cruiser).
+//
+// Copyright (C) 2026 les auteurs d'Ustagammon.
+// Licence : GPLv3 ou ultérieure (voir LICENSE).
+
+import { Game } from "./domain/game/game.js";
+import { exportSgf } from "./domain/game/sgf.js";
+import { createWasmEngine } from "./engine/wasm-engine.js";
+import { startEngineWorker } from "./engine/worker-run.js";
+import { createGameSession } from "./storage/game-session.js";
+import { memoryStorage, openGameLibrary } from "./storage/open-library.js";
+import { createSettingsStore } from "./storage/settings-store.js";
+import { startApp } from "./ui/app.js";
+
+// Ce fichier est servi sous app/ ; le Worker et le service worker sont à la
+// racine du site.
+const worker = startEngineWorker(new URL("../engine-worker.mjs", import.meta.url));
+const engine = createWasmEngine(worker.run);
+
+// Chaque accès au stockage du navigateur peut lever une exception (stockage
+// interdit) : on fait alors sans.
+const localStorage = attempt(() => window.localStorage);
+const settings = createSettingsStore(localStorage ?? memoryStorage());
+
+// Les parties enregistrées (IndexedDB, ou localStorage en repli), ouvertes
+// pendant que le moteur se charge : le plateau est dessiné sans les
+// attendre. L'écran de jeu ne s'en sert qu'une fois engineReady résolue.
+const opening = (async () => {
+    const { library } = await openGameLibrary({
+        indexedDB: attempt(() => window.indexedDB),
+        localStorage,
+    });
+    // Le niveau de l'ordinateur : celui de Game.start (STANDARD_PLY).
+    const session = createGameSession(
+        library,
+        { start: () => Game.start(engine), resume: (journal) => Game.resume(engine, journal) },
+        "2ply",
+    );
+    const saved = await session.restore();
+    return { library, session, saved };
+})();
+let stored: Awaited<typeof opening> | null = null;
+/** Le stockage, ouvert (toujours le cas une fois engineReady résolue). */
+function storage(): Awaited<typeof opening> {
+    if (stored === null) {
+        throw new Error("stockage pas encore ouvert");
+    }
+    return stored;
+}
+
+startApp({
+    engineReady: Promise.all([
+        worker.ready,
+        opening.then((opened) => {
+            stored = opened;
+        }),
+    ]),
+    newGame: () => storage().session.newGame(),
+    savedGame: () => storage().saved,
+    resumePrevious: () => storage().session.resumePrevious(),
+    saveGame: (journal) => storage().session.save(journal),
+    games: {
+        list: () => storage().library.list(),
+        journal: async (id) => (await storage().library.load(id))?.journal ?? null,
+        shownId: () => storage().session.shownId,
+        open: (id, branchHead) => storage().session.open(id, branchHead),
+        remove: (id) => storage().library.remove(id),
+        exportSgf: async (id) => {
+            const game = await storage().library.load(id);
+            if (game === null) {
+                throw new Error("partie introuvable");
+            }
+            const started = new Date(game.summary.startedAt);
+            const two = (n: number) => String(n).padStart(2, "0");
+            const date = `${started.getFullYear()}-${two(started.getMonth() + 1)}-${two(started.getDate())}`;
+            const text = await exportSgf(engine, game.journal, {
+                playerName: "Vous",
+                computerName: "Ustagammon",
+                date,
+            });
+            const time = `${two(started.getHours())}${two(started.getMinutes())}`;
+            return { fileName: `ustagammon-${date}-${time}.sgf`, text };
+        },
+    },
+    cachedBoard: () => settings.loadBoard(),
+    saveBoard: (board) => settings.saveBoard(board),
+    loadSettings: () => settings.loadSettings(),
+    saveSettings: (json) => settings.saveSettings(json),
+});
+
+// Hors ligne : le service worker met tout le site en cache. Le navigateur le
+// refuse hors https (sauf localhost) : l'application marche alors sans.
+// Il est enregistré une fois le moteur chargé : si le Worker et le service
+// worker téléchargent les données du moteur (8,7 Mo) en même temps, Chromium
+// fait échouer l'installation (« Cache.add() encountered a network error »),
+// et l'application n'est pas disponible hors ligne. Cela évite aussi de
+// télécharger deux fois ces données à la première visite.
+if ("serviceWorker" in navigator) {
+    const sw = new URL("../sw.js", import.meta.url);
+    worker.ready.then(() => navigator.serviceWorker.register(sw)).catch(() => {});
+}
+
+/** La valeur, ou undefined si l'obtenir lève une exception. */
+function attempt<T>(get: () => T): T | undefined {
+    try {
+        return get();
+    } catch {
+        return undefined;
+    }
+}

app/src/storage/game-library.ts

@@ -0,0 +1,140 @@
+// Les parties enregistrées sur l'appareil : leur résumé, leur journal
+// d'événements, et laquelle est la partie en cours.
+//
+// Copyright (C) 2026 les auteurs d'Ustagammon.
+// Licence : GPLv3 ou ultérieure (voir LICENSE).
+//
+// Deux stockages derrière la même interface (GameLibrary) :
+// - IndexedDB, le stockage normal du navigateur (indexeddb-backend.ts) ;
+// - un stockage clé-valeur (localStorage), en repli quand IndexedDB est
+//   indisponible, par exemple en navigation privée de certains navigateurs.
+// Les opérations sont exécutées l'une après l'autre, dans l'ordre des
+// appels : un enregistrement lancé sans être attendu est donc toujours fait
+// avant la lecture qui suit.
+
+import type { GameJournal } from "../domain/game/events.js";
+import {
+    type SavedGameDetails,
+    type SavedGameSummary,
+    summarizeGame,
+} from "../domain/game/saved-game.js";
+
+/** Une partie enregistrée : son résumé et son journal. */
+export interface SavedGame {
+    readonly summary: SavedGameSummary;
+    readonly journal: GameJournal;
+}
+
+export interface GameLibrary {
+    /** Les parties, la dernière jouée d'abord. */
+    list(): Promise<SavedGameSummary[]>;
+    /** Une partie, ou null si elle n'existe pas ou est illisible. */
+    load(id: string): Promise<SavedGame | null>;
+    /** Enregistre la partie id (nouvelle ou non), qui devient la partie en
+     * cours. Renvoie son résumé. */
+    save(id: string, journal: GameJournal, details: SavedGameDetails): Promise<SavedGameSummary>;
+    /** Supprime une partie (rien si elle n'existe pas). */
+    remove(id: string): Promise<void>;
+    /** La partie en cours : la dernière enregistrée ou choisie (setCurrent),
+     * si elle existe encore ; sinon la dernière jouée ; null s'il n'y en a
+     * aucune. */
+    current(): Promise<SavedGame | null>;
+    /** Fait d'une partie enregistrée la partie en cours, sans la modifier
+     * (pour la reprendre). */
+    setCurrent(id: string): Promise<void>;
+}
+
+/** Ce que chaque stockage sait faire ; GameLibrary ajoute l'ordre des
+ * opérations, les dates et la validation. */
+export interface LibraryBackend {
+    summaries(): Promise<SavedGameSummary[]>;
+    summary(id: string): Promise<SavedGameSummary | undefined>;
+    journal(id: string): Promise<unknown>;
+    /** Écrit le résumé et le journal ensemble. */
+    write(summary: SavedGameSummary, journal: GameJournal): Promise<void>;
+    remove(id: string): Promise<void>;
+    currentId(): Promise<string | undefined>;
+    setCurrentId(id: string): Promise<void>;
+}
+
+export interface LibraryOptions {
+    /** L'horloge, en millisecondes ; Date.now par défaut. */
+    readonly now?: () => number;
+}
+
+/** Un identifiant de partie : la date et du hasard, sans dépendre de
+ * crypto.randomUUID, absent hors https. */
+export function newGameId(now: number = Date.now()): string {
+    const random = Math.floor(Math.random() * 36 ** 6)
+        .toString(36)
+        .padStart(6, "0");
+    return `${now.toString(36)}-${random}`;
+}
+
+/** Un journal lisible : la forme attendue, sans juger de son contenu (le
+ * domaine le vérifie en reprenant la partie). */
+export function isJournal(value: unknown): value is GameJournal {
+    if (typeof value !== "object" || value === null) {
+        return false;
+    }
+    const journal = value as { events?: unknown; head?: unknown };
+    return (
+        Array.isArray(journal.events) && (journal.head === null || typeof journal.head === "string")
+    );
+}
+
+export function createGameLibrary(
+    backend: LibraryBackend,
+    options: LibraryOptions = {},
+): GameLibrary {
+    const now = options.now ?? Date.now;
+    let queue: Promise<unknown> = Promise.resolve();
+    /** Exécute op après toutes les opérations déjà demandées. */
+    const enqueue = <T>(op: () => Promise<T>): Promise<T> => {
+        const result = queue.then(op, op);
+        queue = result.catch(() => {});
+        return result;
+    };
+
+    const load = async (id: string): Promise<SavedGame | null> => {
+        const summary = await backend.summary(id);
+        const journal = await backend.journal(id);
+        return summary === undefined || !isJournal(journal) ? null : { summary, journal };
+    };
+    const list = async () => (await backend.summaries()).sort((a, b) => b.updatedAt - a.updatedAt);
+
+    return {
+        list: () => enqueue(list),
+        load: (id) => enqueue(() => load(id)),
+        save: (id, journal, details) =>
+            enqueue(async () => {
+                const time = now();
+                const startedAt = (await backend.summary(id))?.startedAt ?? time;
+                const summary = summarizeGame(id, journal, details, {
+                    startedAt,
+                    updatedAt: Math.max(time, startedAt),
+                });
+                await backend.write(summary, journal);
+                await backend.setCurrentId(id);
+                return summary;
+            }),
+        remove: (id) => enqueue(() => backend.remove(id)),
+        current: () =>
+            enqueue(async () => {
+                const id = await backend.currentId();
+                const chosen = id === undefined ? null : await load(id);
+                if (chosen !== null) {
+                    return chosen;
+                }
+                const latest = (await list())[0];
+                return latest === undefined ? null : load(latest.id);
+            }),
+        setCurrent: (id) =>
+            enqueue(async () => {
+                if ((await backend.summary(id)) === undefined) {
+                    throw new Error(`partie introuvable : ${id}`);
+                }
+                await backend.setCurrentId(id);
+            }),
+    };
+}

app/src/storage/game-session.ts

@@ -0,0 +1,130 @@
+// La partie à l'écran et son enregistrement : quel identifiant elle porte,
+// la nouvelle partie qu'on peut annuler (« Reprendre l'ancienne »), la
+// reprise d'une partie enregistrée ou de l'une de ses branches.
+//
+// Copyright (C) 2026 les auteurs d'Ustagammon.
+// Licence : GPLv3 ou ultérieure (voir LICENSE).
+//
+// main.ts la branche sur l'écran de jeu ; les scénarios l'utilisent telle
+// quelle, sur un stockage en mémoire.
+
+import { switchToBranch } from "../domain/game/branches.js";
+import type { Level } from "../domain/game/engine.js";
+import type { GameJournal } from "../domain/game/events.js";
+import type { Game } from "../domain/game/game.js";
+import { type GameLibrary, newGameId } from "./game-library.js";
+
+/** Comment créer une partie : commencée, ou reprise d'un journal (erreur si
+ * le journal est illisible). */
+export interface GameFactory {
+    readonly start: () => Game;
+    readonly resume: (journal: GameJournal) => Game;
+}
+
+export interface GameSession {
+    /** L'identifiant de la partie à l'écran (null avant la première). */
+    readonly shownId: string | null;
+    /** La partie en cours enregistrée, reprise ; null s'il n'y en a pas ou
+     * si elle est illisible. */
+    restore(): Promise<Game | null>;
+    /** Une nouvelle partie ; celle qu'elle remplace reste reprenable par
+     * resumePrevious, jusqu'au prochain changement de partie. */
+    newGame(): Game;
+    /** Enregistre la partie à l'écran (sans attendre la fin de l'écriture ;
+     * un échec est ignoré : la partie continue). */
+    save(journal: GameJournal): void;
+    /** « Reprendre l'ancienne » : la partie quittée par newGame, relue dans
+     * le stockage ; la nouvelle est supprimée. null s'il n'y en a pas. */
+    resumePrevious(): Promise<Game | null>;
+    /** Reprend une partie enregistrée, au bout de la branche branchHead si
+     * elle est donnée. Erreur si elle n'existe pas ou est illisible. */
+    open(id: string, branchHead?: string): Promise<Game>;
+}
+
+export function createGameSession(
+    library: GameLibrary,
+    games: GameFactory,
+    level: Level,
+): GameSession {
+    let shownId: string | null = null;
+    let previousId: string | null = null;
+
+    /** Une partie enregistrée, reprise ; null si absente ou illisible. */
+    const resume = async (id: string): Promise<Game | null> => {
+        const saved = await library.load(id);
+        if (saved === null) {
+            return null;
+        }
+        try {
+            return games.resume(saved.journal);
+        } catch {
+            return null;
+        }
+    };
+
+    return {
+        get shownId() {
+            return shownId;
+        },
+        async restore() {
+            const saved = await library.current().catch(() => null);
+            if (saved === null) {
+                return null;
+            }
+            try {
+                const game = games.resume(saved.journal);
+                shownId = saved.summary.id;
+                return game;
+            } catch {
+                return null; // partie illisible : on en commencera une nouvelle
+            }
+        },
+        newGame() {
+            previousId = shownId;
+            shownId = newGameId();
+            return games.start();
+        },
+        save(journal) {
+            if (shownId !== null) {
+                library.save(shownId, journal, { level }).catch(() => {});
+            }
+        },
+        async resumePrevious() {
+            const id = previousId;
+            if (id === null) {
+                return null;
+            }
+            const resumed = await resume(id);
+            if (resumed === null) {
+                return null;
+            }
+            const abandoned = shownId;
+            previousId = null;
+            shownId = id;
+            await library.setCurrent(id);
+            if (abandoned !== null) {
+                await library.remove(abandoned);
+            }
+            return resumed;
+        },
+        async open(id, branchHead) {
+            const saved = await library.load(id);
+            if (saved === null) {
+                throw new Error("partie introuvable");
+            }
+            const journal =
+                branchHead === undefined
+                    ? saved.journal
+                    : switchToBranch(saved.journal, branchHead);
+            const game = games.resume(journal);
+            previousId = null;
+            shownId = id;
+            if (branchHead === undefined) {
+                await library.setCurrent(id);
+            } else {
+                await library.save(id, journal, { level: saved.summary.level });
+            }
+            return game;
+        },
+    };
+}

app/src/storage/indexeddb-backend.ts

@@ -0,0 +1,81 @@
+// Les parties dans IndexedDB, le stockage de données du navigateur.
+//
+// Copyright (C) 2026 les auteurs d'Ustagammon.
+// Licence : GPLv3 ou ultérieure (voir LICENSE).
+//
+// Base « ustagammon », trois magasins d'objets :
+// - games : les résumés des parties (SavedGameSummary), clé id ;
+// - journals : leurs journaux, { id, journal }, clé id ;
+// - settings : { key, value }, dont la partie en cours (key « current »).
+// Le résumé et le journal d'une partie sont écrits dans la même transaction.
+// L'API IndexedDB est utilisée directement, sans bibliothèque.
+
+import type { GameJournal } from "../domain/game/events.js";
+import type { SavedGameSummary } from "../domain/game/saved-game.js";
+import type { LibraryBackend } from "./game-library.js";
+
+const DATABASE = "ustagammon";
+const VERSION = 1;
+const GAMES = "games";
+const JOURNALS = "journals";
+const SETTINGS = "settings";
+
+/** Le résultat d'une requête IndexedDB, en promesse. */
+function done<T>(request: IDBRequest<T>): Promise<T> {
+    return new Promise((resolve, reject) => {
+        request.onsuccess = () => resolve(request.result);
+        request.onerror = () => reject(request.error);
+    });
+}
+
+/** La fin d'une transaction (toutes ses écritures faites), en promesse. */
+function committed(transaction: IDBTransaction): Promise<void> {
+    return new Promise((resolve, reject) => {
+        transaction.oncomplete = () => resolve();
+        transaction.onerror = () => reject(transaction.error);
+        transaction.onabort = () => reject(transaction.error ?? new Error("transaction annulée"));
+    });
+}
+
+/** Ouvre la base, en la créant au besoin. Rejetée si IndexedDB est
+ * indisponible ou refusé. */
+export async function openIndexedDbBackend(factory: IDBFactory): Promise<LibraryBackend> {
+    const request = factory.open(DATABASE, VERSION);
+    request.onupgradeneeded = () => {
+        const db = request.result;
+        db.createObjectStore(GAMES, { keyPath: "id" });
+        db.createObjectStore(JOURNALS, { keyPath: "id" });
+        db.createObjectStore(SETTINGS, { keyPath: "key" });
+    };
+    const db = await done(request);
+
+    const get = async <T>(store: string, key: string): Promise<T | undefined> =>
+        done(db.transaction(store).objectStore(store).get(key));
+
+    return {
+        summaries: async () => done(db.transaction(GAMES).objectStore(GAMES).getAll()),
+        summary: (id) => get<SavedGameSummary>(GAMES, id),
+        journal: async (id) => (await get<{ journal: unknown }>(JOURNALS, id))?.journal,
+        write: async (summary: SavedGameSummary, journal: GameJournal) => {
+            const transaction = db.transaction([GAMES, JOURNALS], "readwrite");
+            transaction.objectStore(JOURNALS).put({ id: summary.id, journal });
+            transaction.objectStore(GAMES).put(summary);
+            await committed(transaction);
+        },
+        remove: async (id) => {
+            const transaction = db.transaction([GAMES, JOURNALS], "readwrite");
+            transaction.objectStore(GAMES).delete(id);
+            transaction.objectStore(JOURNALS).delete(id);
+            await committed(transaction);
+        },
+        currentId: async () => {
+            const setting = await get<{ value: unknown }>(SETTINGS, "current");
+            return typeof setting?.value === "string" ? setting.value : undefined;
+        },
+        setCurrentId: async (id) => {
+            const transaction = db.transaction(SETTINGS, "readwrite");
+            transaction.objectStore(SETTINGS).put({ key: "current", value: id });
+            await committed(transaction);
+        },
+    };
+}

app/src/storage/key-value-backend.ts

@@ -0,0 +1,99 @@
+// Les parties dans un stockage clé-valeur (localStorage), en JSON : le
+// repli quand IndexedDB est indisponible, et la lecture de la partie
+// enregistrée par les versions précédentes, pour la migrer.
+//
+// Copyright (C) 2026 les auteurs d'Ustagammon.
+// Licence : GPLv3 ou ultérieure (voir LICENSE).
+
+import type { GameJournal } from "../domain/game/events.js";
+import type { SavedGameSummary } from "../domain/game/saved-game.js";
+import { type GameLibrary, isJournal, type LibraryBackend, newGameId } from "./game-library.js";
+
+/** Ce qu'il faut d'un stockage clé-valeur (localStorage en a davantage). */
+export interface KeyValueStorage {
+    getItem(key: string): string | null;
+    setItem(key: string, value: string): void;
+    removeItem(key: string): void;
+}
+
+const SUMMARIES = "ustagammon.games";
+const CURRENT = "ustagammon.current-game-id";
+const journalKey = (id: string) => `ustagammon.game.${id}`;
+
+/** La partie unique des versions précédentes (étape 0), à migrer. */
+const LEGACY_GAME = "ustagammon.current-game";
+
+/** Lit une clé en JSON ; undefined si elle est absente, illisible, ou si le
+ * stockage est interdit. */
+function read(storage: KeyValueStorage, key: string): unknown {
+    try {
+        const text = storage.getItem(key);
+        return text === null ? undefined : JSON.parse(text);
+    } catch {
+        return undefined;
+    }
+}
+
+export function createKeyValueBackend(storage: KeyValueStorage): LibraryBackend {
+    const summaries = (): SavedGameSummary[] => {
+        const value = read(storage, SUMMARIES);
+        return Array.isArray(value) ? value : [];
+    };
+    const writeSummaries = (list: readonly SavedGameSummary[]) =>
+        storage.setItem(SUMMARIES, JSON.stringify(list));
+    return {
+        summaries: async () => summaries(),
+        summary: async (id) => summaries().find((s) => s.id === id),
+        journal: async (id) => read(storage, journalKey(id)),
+        write: async (summary, journal) => {
+            // Le journal d'abord : un résumé ne désigne jamais un journal
+            // absent.
+            storage.setItem(journalKey(summary.id), JSON.stringify(journal));
+            writeSummaries([...summaries().filter((s) => s.id !== summary.id), summary]);
+        },
+        remove: async (id) => {
+            writeSummaries(summaries().filter((s) => s.id !== id));
+            storage.removeItem(journalKey(id));
+        },
+        currentId: async () => {
+            const id = read(storage, CURRENT);
+            return typeof id === "string" ? id : undefined;
+        },
+        setCurrentId: async (id) => storage.setItem(CURRENT, JSON.stringify(id)),
+    };
+}
+
+/**
+ * Reprend dans library la partie enregistrée par les versions précédentes
+ * (une seule partie, sous une clé de localStorage), qui devient la partie
+ * en cours ; puis efface l'ancienne clé. Sans effet s'il n'y en a pas. Un
+ * journal illisible est effacé. Renvoie l'identifiant de la partie migrée.
+ */
+export async function migrateLegacyGame(
+    storage: KeyValueStorage,
+    library: GameLibrary,
+    now: number = Date.now(),
+): Promise<string | null> {
+    let present: boolean;
+    try {
+        present = storage.getItem(LEGACY_GAME) !== null;
+    } catch {
+        return null;
+    }
+    if (!present) {
+        return null;
+    }
+    const journal: unknown = read(storage, LEGACY_GAME);
+    let id: string | null = null;
+    if (isJournal(journal) && journal.events.length > 0) {
+        id = newGameId(now);
+        // Les parties de l'étape 0 se jouaient toutes au niveau standard.
+        await library.save(id, journal as GameJournal, { level: "2ply" });
+    }
+    try {
+        storage.removeItem(LEGACY_GAME);
+    } catch {
+        // Stockage interdit : la migration sera refaite, sans dommage.
+    }
+    return id;
+}

app/src/storage/open-library.ts

@@ -0,0 +1,96 @@
+// Ouverture des parties enregistrées au démarrage : IndexedDB si possible,
+// sinon localStorage, puis migration de la partie des versions précédentes.
+//
+// Copyright (C) 2026 les auteurs d'Ustagammon.
+// Licence : GPLv3 ou ultérieure (voir LICENSE).
+
+import { createGameLibrary, type GameLibrary, type LibraryOptions } from "./game-library.js";
+import { openIndexedDbBackend } from "./indexeddb-backend.js";
+import {
+    createKeyValueBackend,
+    type KeyValueStorage,
+    migrateLegacyGame,
+} from "./key-value-backend.js";
+
+/** Les stockages du navigateur ; chacun peut manquer ou être refusé. */
+export interface BrowserStorage {
+    readonly indexedDB?: IDBFactory;
+    readonly localStorage?: KeyValueStorage;
+}
+
+export interface OpenedLibrary {
+    readonly library: GameLibrary;
+    /** Le stockage retenu : IndexedDB, son repli localStorage, ou la seule
+     * mémoire de la page (rien n'est gardé après sa fermeture). */
+    readonly kind: "indexeddb" | "localStorage" | "memory";
+}
+
+/** Au-delà, IndexedDB est tenu pour indisponible (une ouverture bloquée ne
+ * doit pas empêcher de jouer). */
+const OPEN_TIMEOUT_MS = 5000;
+
+export async function openGameLibrary(
+    storage: BrowserStorage,
+    options: LibraryOptions = {},
+): Promise<OpenedLibrary> {
+    const opened = await open(storage, options);
+    if (storage.localStorage !== undefined) {
+        try {
+            await migrateLegacyGame(storage.localStorage, opened.library);
+        } catch {
+            // Migration impossible (stockage plein ou refusé) : l'ancienne
+            // partie reste où elle est, on la retentera au prochain démarrage.
+        }
+    }
+    return opened;
+}
+
+async function open(storage: BrowserStorage, options: LibraryOptions): Promise<OpenedLibrary> {
+    if (storage.indexedDB !== undefined) {
+        let timer: ReturnType<typeof setTimeout> | undefined;
+        try {
+            const backend = await Promise.race([
+                openIndexedDbBackend(storage.indexedDB),
+                new Promise<never>((_, reject) => {
+                    timer = setTimeout(() => reject(new Error("IndexedDB muet")), OPEN_TIMEOUT_MS);
+                }),
+            ]);
+            return { library: createGameLibrary(backend, options), kind: "indexeddb" };
+        } catch {
+            // Indisponible (navigation privée de certains navigateurs) : repli.
+        } finally {
+            clearTimeout(timer);
+        }
+    }
+    if (storage.localStorage !== undefined && usable(storage.localStorage)) {
+        return {
+            library: createGameLibrary(createKeyValueBackend(storage.localStorage), options),
+            kind: "localStorage",
+        };
+    }
+    return {
+        library: createGameLibrary(createKeyValueBackend(memoryStorage()), options),
+        kind: "memory",
+    };
+}
+
+/** localStorage peut exister et refuser toute écriture. */
+function usable(storage: KeyValueStorage): boolean {
+    try {
+        storage.setItem("ustagammon.probe", "1");
+        storage.removeItem("ustagammon.probe");
+        return true;
+    } catch {
+        return false;
+    }
+}
+
+/** Un stockage clé-valeur en mémoire. */
+export function memoryStorage(): KeyValueStorage {
+    const items = new Map<string, string>();
+    return {
+        getItem: (key) => items.get(key) ?? null,
+        setItem: (key, value) => void items.set(key, value),
+        removeItem: (key) => void items.delete(key),
+    };
+}

app/src/storage/settings-store.ts

@@ -0,0 +1,83 @@
+// Ce que l'application garde en plus de la partie, dans le même stockage
+// clé-valeur (localStorage) : les réglages du menu, en JSON, et le dernier
+// plateau affiché, pour le redessiner dès l'ouverture de la page, avant que
+// le moteur soit chargé (il est déjà décodé : aucune règle n'est rejouée).
+//
+// Copyright (C) 2026 les auteurs d'Ustagammon.
+// Licence : GPLv3 ou ultérieure (voir LICENSE).
+
+import type { Cube } from "../domain/game/cube.js";
+import type { SideBoards } from "../domain/game/game.js";
+import type { KeyValueStorage } from "./key-value-backend.js";
+
+const SETTINGS_KEY = "ustagammon.settings";
+const BOARD_KEY = "ustagammon.last-board";
+
+/** Le dernier plateau affiché, tel que le moteur l'a décodé. */
+export interface CachedBoard {
+    readonly sides: SideBoards;
+    readonly cube: Cube;
+}
+
+export interface SettingsStore {
+    /** Le texte JSON des réglages (null : jamais enregistrés). */
+    loadSettings(): string | null;
+    saveSettings(json: string): void;
+    loadBoard(): CachedBoard | null;
+    saveBoard(board: CachedBoard): void;
+}
+
+function isSide(value: unknown): boolean {
+    const side = value as Record<string, unknown> | null;
+    return (
+        side !== null &&
+        typeof side === "object" &&
+        Array.isArray(side.points) &&
+        side.points.length === 24 &&
+        side.points.every((n) => Number.isInteger(n) && n >= 0) &&
+        Number.isInteger(side.bar) &&
+        Number.isInteger(side.off) &&
+        Number.isInteger(side.pipCount)
+    );
+}
+
+export function createSettingsStore(
+    storage: Pick<KeyValueStorage, "getItem" | "setItem">,
+): SettingsStore {
+    const write = (key: string, value: string) => {
+        try {
+            storage.setItem(key, value);
+        } catch {
+            // Stockage plein ou interdit : l'application marche sans.
+        }
+    };
+    return {
+        loadSettings() {
+            try {
+                return storage.getItem(SETTINGS_KEY);
+            } catch {
+                return null;
+            }
+        },
+        saveSettings(json) {
+            write(SETTINGS_KEY, json);
+        },
+        loadBoard() {
+            try {
+                const board = JSON.parse(storage.getItem(BOARD_KEY) ?? "null");
+                const valid =
+                    board !== null &&
+                    isSide(board.sides?.player) &&
+                    isSide(board.sides?.computer) &&
+                    Number.isInteger(board.cube?.value) &&
+                    [null, "player", "computer"].includes(board.cube?.owner);
+                return valid ? board : null;
+            } catch {
+                return null;
+            }
+        },
+        saveBoard(board) {
+            write(BOARD_KEY, JSON.stringify(board));
+        },
+    };
+}

app/src/ui/board-model.ts

@@ -0,0 +1,180 @@
+// Ce que dessine le plateau, calculé sans le navigateur (testé sous Node).
+//
+// Copyright (C) 2026 les auteurs d'Ustagammon.
+// Licence : GPLv3 ou ultérieure (voir LICENSE).
+//
+// Le plateau est toujours dessiné du point de vue du joueur : ses cases 1 à 6
+// en bas à droite, 7 à 12 en bas à gauche, 13 à 18 en haut à gauche, 19 à 24
+// en haut à droite ; ses pions vont de 24 vers 1, puis sortent à droite, en
+// bas. La case 1 de l'ordinateur est la case 24 du joueur.
+
+import type { SideBoards } from "../domain/game/game.js";
+import { BAR, type HalfMove, OFF } from "../domain/game/position.js";
+import type { Side } from "../domain/game/side.js";
+
+/**
+ * Un endroit du plateau où l'on peut toucher : une case (« p1 » à « p24 »,
+ * numérotée du point de vue du joueur), la barre ou la sortie d'un camp.
+ */
+export type Place = `p${number}` | `bar-${Side}` | `off-${Side}`;
+
+/** L'endroit désigné par une case d'un demi-coup de side, dans sa propre
+ * numérotation (BAR, OFF ou 1 à 24). */
+export function placeOf(side: Side, point: number): Place {
+    if (point === BAR) {
+        return `bar-${side}`;
+    }
+    if (point === OFF) {
+        return `off-${side}`;
+    }
+    return side === "player" ? `p${point}` : `p${25 - point}`;
+}
+
+/** Une case du plateau, et les pions de chaque camp qui s'y trouvent. */
+export interface PointModel {
+    readonly place: Place;
+    /** Numéro de la case pour le joueur, 1 à 24. */
+    readonly number: number;
+    /** Le camp qui l'occupe (null : vide) et son nombre de pions. */
+    readonly owner: Side | null;
+    readonly count: number;
+}
+
+export interface BoardModel {
+    /** Les cases 1 à 24 du joueur, dans l'ordre. */
+    readonly points: readonly PointModel[];
+    readonly bar: Readonly<Record<Side, number>>;
+    readonly off: Readonly<Record<Side, number>>;
+    readonly pipCount: Readonly<Record<Side, number>>;
+}
+
+/** Le plateau à dessiner, à partir du plateau vu de chaque camp. */
+export function boardModel(sides: SideBoards): BoardModel {
+    const points: PointModel[] = [];
+    for (let number = 1; number <= 24; number++) {
+        const player = sides.player.points[number - 1] ?? 0;
+        const computer = sides.computer.points[24 - number] ?? 0;
+        // Une case n'a jamais de pions des deux camps à la fois.
+        const owner = player > 0 ? "player" : computer > 0 ? "computer" : null;
+        points.push({ place: `p${number}`, number, owner, count: player || computer });
+    }
+    return {
+        points,
+        bar: { player: sides.player.bar, computer: sides.computer.bar },
+        off: { player: sides.player.off, computer: sides.computer.off },
+        pipCount: { player: sides.player.pipCount, computer: sides.computer.pipCount },
+    };
+}
+
+/** Les cases de départ des demi-coups possibles, et pour chacune ses cases
+ * d'arrivée : ce que l'interface met en évidence. */
+export function moveTargets(halfMoves: readonly HalfMove[]): Map<Place, Map<Place, HalfMove>> {
+    const targets = new Map<Place, Map<Place, HalfMove>>();
+    for (const halfMove of halfMoves) {
+        const from = placeOf("player", halfMove.from);
+        let tos = targets.get(from);
+        if (tos === undefined) {
+            tos = new Map();
+            targets.set(from, tos);
+        }
+        tos.set(placeOf("player", halfMove.to), halfMove);
+    }
+    return targets;
+}
+
+/** Le seul demi-coup possible depuis place, s'il n'a qu'une case d'arrivée
+ * (le pion y va dès qu'on le touche) ; null sinon. */
+export function onlyHalfMove(
+    targets: ReadonlyMap<Place, ReadonlyMap<Place, HalfMove>>,
+    place: Place,
+): HalfMove | null {
+    const tos = targets.get(place);
+    if (tos === undefined || tos.size !== 1) {
+        return null;
+    }
+    return [...tos.values()][0] ?? null;
+}
+
+/** Ce qui reste dessiné d'un coup une fois joué. */
+export interface MoveTrace {
+    /** Le camp qui a joué. */
+    readonly side: Side;
+    /** Une flèche par demi-coup, de sa case de départ à sa case d'arrivée. */
+    readonly arrows: readonly { readonly from: Place; readonly to: Place }[];
+    /** Par endroit, le nombre de pions arrivés et restés là (entourés). */
+    readonly landed: ReadonlyMap<Place, number>;
+    /** Par endroit, le nombre de pions partis (un pion fantôme chacun). */
+    readonly left: ReadonlyMap<Place, number>;
+    /** Le nombre de pions adverses frappés, envoyés sur la barre. */
+    readonly hits: number;
+}
+
+/**
+ * Les traces d'un coup de side : ses demi-coups, et pour chacun s'il a frappé.
+ * Un pion qui fait étape sur une case (13/7 7/4) n'y laisse ni fantôme ni
+ * cercle : seuls comptent le départ et l'arrivée de chaque pion.
+ */
+export function moveTrace(
+    side: Side,
+    halfMoves: readonly HalfMove[],
+    hits: readonly boolean[],
+): MoveTrace {
+    const balance = new Map<Place, number>();
+    const arrows = halfMoves.map((h) => {
+        const from = placeOf(side, h.from);
+        const to = placeOf(side, h.to);
+        balance.set(from, (balance.get(from) ?? 0) - 1);
+        balance.set(to, (balance.get(to) ?? 0) + 1);
+        return { from, to };
+    });
+    const landed = new Map<Place, number>();
+    const left = new Map<Place, number>();
+    for (const [place, n] of balance) {
+        if (n > 0) {
+            landed.set(place, n);
+        } else if (n < 0) {
+            left.set(place, -n);
+        }
+    }
+    return { side, arrows, landed, left, hits: hits.filter(Boolean).length };
+}
+
+/** La couleur d'une flèche (case), d'après son numéro affiché (1 à 24,
+ * pour le joueur) : impaire en point-a, paire en point-b (charte). Jamais
+ * d'après sa colonne : les cases 12 et 13, l'une au-dessus de l'autre,
+ * n'ont pas la même couleur. */
+export function pointColor(number: number): "point-a" | "point-b" {
+    return number % 2 === 1 ? "point-a" : "point-b";
+}
+
+/** Où se trouve une case sur le dessin : rangée du haut ou du bas, et
+ * colonne de 0 (à gauche) à 11 (à droite), sans compter la barre. */
+export function pointSlot(number: number): { top: boolean; column: number } {
+    if (number <= 12) {
+        return { top: false, column: 12 - number };
+    }
+    return { top: true, column: number - 13 };
+}
+
+/** Le plateau de la position de départ, pour le dessiner avant que le
+ * moteur soit chargé (première ouverture) : chaque camp a 2 pions sur sa case
+ * 24, 5 sur la 13, 3 sur la 8 et 5 sur la 6 ; 167 points chacun. Une donnée,
+ * comme dans le dessin de référence de la charte (board.js), pas une règle. */
+export const OPENING_BOARDS: SideBoards = (() => {
+    const points = Array.from({ length: 24 }, (_, i) => ({ 5: 5, 7: 3, 12: 5, 23: 2 })[i] ?? 0);
+    const side = { points, bar: 0, off: 0, pipCount: 167 };
+    return { player: side, computer: side };
+})();
+
+/** Qui mène la course, et de combien : le plus petit compte de points
+ * (leader null : égalité). */
+export function pipLead(pipCount: Readonly<Record<Side, number>>): {
+    leader: Side | null;
+    by: number;
+} {
+    const by = Math.abs(pipCount.player - pipCount.computer);
+    if (by === 0) {
+        return { leader: null, by };
+    }
+    return { leader: pipCount.player < pipCount.computer ? "player" : "computer", by };
+}

app/src/ui/board-view.ts

@@ -0,0 +1,866 @@
+// Le dessin du plateau, en SVG.
+//
+// Copyright (C) 2026 les auteurs d'Ustagammon.
+// Licence : GPLv3 ou ultérieure (voir LICENSE).
+//
+// Le plateau est redessiné en entier à chaque changement : c'est rapide, et
+// il n'y a aucun état caché dans le dessin. Les couleurs viennent des
+// variables CSS (app.css), par des classes : aucun style dans le SVG. Chaque
+// endroit qu'on peut toucher est un rectangle transparent, posé par-dessus
+// le reste, qui porte son nom dans data-place (une case, la barre, la
+// sortie) ou data-action (dés, videau, commandes).
+//
+// Les mesures viennent de la géométrie (geometry.ts), calculée d'après la
+// forme de l'écran. En paysage, le plateau porte aussi les commandes : la
+// colonne de gauche (menu, videau, annuler ou revoir), les comptes de
+// points en pastilles aux bouts de la barre et la consigne dans la bande
+// centrale.
+
+import type { Cube } from "../domain/game/cube.js";
+import type { Side } from "../domain/game/side.js";
+import {
+    type BoardModel,
+    type MoveTrace,
+    type Place,
+    pointColor,
+    pointSlot,
+} from "./board-model.js";
+import { columnLeft, type Geometry, MAX_STACK, stackY } from "./geometry.js";
+import { ICON_PATHS, type IconName } from "./icons.js";
+import { TEXTS } from "./texts.js";
+
+/** Un dé affiché, de la couleur du camp qui l'a lancé. */
+export interface ShownDie {
+    readonly value: number;
+    readonly side: Side;
+    /** Le jet ne permet aucun coup : le dé est estompé et barré. */
+    readonly blocked: boolean;
+    /** Le dé est déjà utilisé par un demi-coup saisi : il est estompé. */
+    readonly used: boolean;
+}
+
+/** Ce que fait un toucher sur les dés : lancer, jouer le coup saisi, ou
+ * passer son tour quand aucun coup n'est possible. */
+export type DiceAction = "roll" | "confirm" | "skip";
+
+/** Les commandes de la colonne de gauche, en paysage. */
+export interface BoardControls {
+    /** En bas : annuler le demi-coup, ou revoir le coup de l'ordinateur. */
+    readonly back: "undo" | "replay";
+    readonly backEnabled: boolean;
+    readonly menuEnabled: boolean;
+}
+
+/** Ce qui s'ajoute aux pions : dés, videau, mises en évidence. */
+export interface BoardDecor {
+    readonly dice: readonly ShownDie[];
+    readonly cube: Cube;
+    /** Les pions que le joueur peut déplacer. */
+    readonly movable: ReadonlySet<Place>;
+    /** Le pion touché, dont on montre les cases d'arrivée. */
+    readonly selected: Place | null;
+    readonly targets: ReadonlySet<Place>;
+    /** Les traces du dernier coup de l'ordinateur, tant qu'on les montre. */
+    readonly trace: MoveTrace | null;
+    /** Ce que fait un toucher sur la bande centrale, d'un côté ou de
+     * l'autre du plateau (null : rien). En portrait, pour « roll », les dés
+     * du joueur en attente sont dessinés. */
+    readonly diceAction: DiceAction | null;
+    /** Le joueur peut doubler : le videau se touche. */
+    readonly canDouble: boolean;
+    /** Paysage : la consigne courte, dans la bande centrale. */
+    readonly band: string | null;
+    /** Paysage : la colonne de commandes (null : pas de colonne). */
+    readonly controls: BoardControls | null;
+}
+
+/** Ce qui ne s'ajoute pas aux pions pendant l'animation d'un coup. */
+export const NO_MARKS = {
+    movable: new Set<Place>(),
+    selected: null,
+    targets: new Set<Place>(),
+    trace: null,
+    diceAction: null,
+    canDouble: false,
+} as const;
+
+const OFF_SLAB = 12; // épaisseur d'un pion sorti
+
+const SVG_NS = "http://www.w3.org/2000/svg";
+
+type Attributes = Record<string, string | number>;
+
+function add(parent: Element, name: string, attributes: Attributes, text?: string): SVGElement {
+    const element = document.createElementNS(SVG_NS, name);
+    for (const [key, value] of Object.entries(attributes)) {
+        element.setAttribute(key, String(value));
+    }
+    if (text !== undefined) {
+        element.textContent = text;
+    }
+    parent.append(element);
+    return element;
+}
+
+/** Un point du dessin. */
+export interface Spot {
+    readonly x: number;
+    readonly y: number;
+}
+
+/**
+ * Centre du pion numéro index (0 : le premier posé) d'un endroit : sur une
+ * case, depuis le bord du plateau ; sur la barre, depuis le milieu (le
+ * joueur dans la moitié haute, où il rentre, l'ordinateur en bas) ; dans la
+ * sortie, une tranche de pion vu de profil (l'ordinateur en haut).
+ */
+function slotCenter(g: Geometry, place: Place, index: number): Spot {
+    const middle = g.height / 2;
+    if (place === "bar-player" || place === "bar-computer") {
+        const offset = g.radius + 4 + Math.min(index, g.barStack - 1) * g.step;
+        return {
+            x: g.barLeft + g.bar / 2,
+            y: place === "bar-player" ? middle - offset : middle + offset,
+        };
+    }
+    if (place === "off-player" || place === "off-computer") {
+        const y =
+            place === "off-computer"
+                ? g.edge + index * OFF_SLAB
+                : g.height - g.edge - (index + 1) * OFF_SLAB;
+        return { x: g.trayLeft + g.tray / 2, y: y + OFF_SLAB / 2 };
+    }
+    const { top, column } = pointSlot(Number(place.slice(1)));
+    return { x: columnLeft(g, column) + g.pointWidth / 2, y: stackY(g, top, index) };
+}
+
+/** Le nombre de pions de side à un endroit. */
+function countAt(board: BoardModel, side: Side, place: Place): number {
+    if (place === `bar-${side}`) {
+        return board.bar[side];
+    }
+    if (place === `off-${side}`) {
+        return board.off[side];
+    }
+    const point = board.points.find((p) => p.place === place);
+    return point?.owner === side ? point.count : 0;
+}
+
+/** Le nombre de pions dessinés au plus à un endroit. */
+function stackLimit(g: Geometry, place: Place): number {
+    return place.startsWith("bar-") ? g.barStack : MAX_STACK;
+}
+
+/** Redessine tout le plateau dans svg. */
+export function renderBoard(
+    svg: SVGSVGElement,
+    g: Geometry,
+    board: BoardModel,
+    decor: BoardDecor,
+): void {
+    svg.replaceChildren();
+    svg.setAttribute("viewBox", `0 0 ${g.width} ${g.height}`);
+    svg.dataset.layout = g.layout;
+    drawFrame(svg, g);
+    const hits = add(svg, "g", {});
+    // Les pions, dessinés à part puis posés par-dessus les flèches du coup
+    // de l'ordinateur : une flèche ne cache jamais un pion.
+    const pieces = document.createElementNS(SVG_NS, "g");
+    for (const point of board.points) {
+        drawPoint(svg, pieces, g, hits, board, point.number, decor);
+    }
+    drawBar(svg, pieces, g, hits, board, decor);
+    drawTray(svg, pieces, g, hits, board, decor);
+    if (decor.trace !== null) {
+        drawTraceArrows(svg, g, board, decor.trace);
+    }
+    svg.append(pieces);
+    drawLandings(svg, g, board, decor.targets);
+    if (decor.band !== null) {
+        drawBand(svg, g, decor.band);
+    }
+    drawDice(svg, g, decor.dice);
+    const cube = drawCube(svg, g, decor.cube);
+    if (decor.trace !== null) {
+        drawTraceRings(svg, g, board, decor.trace);
+    }
+    if (decor.diceAction !== null) {
+        if (decor.diceAction === "roll" && g.layout === "portrait") {
+            waitingDice(svg, g);
+        }
+        // Une zone sur chaque moitié de la bande centrale : les dés en
+        // attente (à gauche) comme le dernier jet (à droite) se touchent.
+        const label = TEXTS.diceActions[decor.diceAction];
+        const width = 6 * g.pointWidth - 2 * g.frame;
+        for (const x of [g.x0 + 3 * g.pointWidth, g.rightHalf + 3 * g.pointWidth]) {
+            addAction(g, hits, decor.diceAction, label, { x, y: g.height / 2 }, width);
+        }
+    }
+    if (decor.canDouble) {
+        cube.classList.add("can-double");
+        addAction(g, hits, "double", TEXTS.double, cubeCenter(g, decor.cube), g.target);
+    }
+    if (decor.controls !== null) {
+        drawControls(svg, g, hits, decor.controls);
+    }
+    // Les zones à toucher passent devant tout le reste.
+    svg.append(hits);
+}
+
+function drawFrame(svg: SVGSVGElement, g: Geometry): void {
+    const landscape = g.layout === "landscape";
+    add(svg, "rect", {
+        class: "board-frame",
+        x: 0,
+        y: 0,
+        width: g.width,
+        height: g.height,
+        rx: landscape ? 0 : 6,
+    });
+    for (const left of [g.x0, g.rightHalf]) {
+        add(svg, "rect", {
+            class: "board-bed",
+            x: left,
+            y: g.edge,
+            width: 6 * g.pointWidth,
+            height: g.height - 2 * g.edge,
+        });
+    }
+    add(svg, "rect", {
+        class: "board-tray",
+        x: g.trayLeft,
+        y: g.edge,
+        width: g.tray,
+        height: g.height - 2 * g.edge,
+        rx: landscape ? 4 : 0,
+    });
+    if (g.left > 0) {
+        add(svg, "rect", {
+            class: "board-tray",
+            x: g.frame,
+            y: g.edge,
+            width: g.left - 4,
+            height: g.height - 2 * g.edge,
+            rx: 4,
+        });
+    }
+}
+
+function drawPoint(
+    svg: SVGSVGElement,
+    pieces: Element,
+    g: Geometry,
+    hits: Element,
+    board: BoardModel,
+    number: number,
+    decor: BoardDecor,
+): void {
+    const point = board.points[number - 1];
+    if (point === undefined) {
+        return;
+    }
+    const { top, column } = pointSlot(number);
+    const left = columnLeft(g, column);
+    const center = left + g.pointWidth / 2;
+    const middle = g.height / 2;
+    const base = top ? g.edge : g.height - g.edge;
+    const length = middle - g.edge - g.band / 2 + 6;
+    const tip = top ? base + length : base - length;
+    add(svg, "polygon", {
+        class: pointColor(number),
+        "data-point": number,
+        points: `${left},${base} ${left + g.pointWidth},${base} ${center},${tip}`,
+    });
+    // Numéros : sur le cadre en paysage, dans la bande centrale en
+    // portrait. Leur taille (12 px au moins à l'écran) dépend de l'échelle
+    // du dessin : c'est une mesure du dessin, comme x et y.
+    const size = g.numberSize;
+    let y: number;
+    if (g.layout === "landscape") {
+        y = top ? g.edge / 2 + size * 0.36 : g.height - g.edge / 2 + size * 0.36;
+    } else {
+        y = top ? middle - g.die / 2 - 4 : middle + g.die / 2 + 4 + size * 0.72;
+    }
+    add(
+        svg,
+        "text",
+        {
+            class: g.layout === "landscape" ? "point-number on-frame" : "point-number",
+            x: center,
+            y,
+            "font-size": size,
+        },
+        String(number),
+    );
+    // Case d'arrivée possible : la flèche seule est voilée (son triangle) ;
+    // l'endroit où le pion se posera est marqué plus loin (drawLandings).
+    if (decor.targets.has(point.place)) {
+        add(svg, "polygon", {
+            class: "target-zone",
+            points: `${left},${base} ${left + g.pointWidth},${base} ${center},${tip}`,
+        });
+    }
+    if (point.owner !== null) {
+        drawStack(pieces, g, point.owner, point.count, point.place, decor);
+    }
+    addHit(hits, point.place, decor, {
+        x: left,
+        y: top ? 0 : middle,
+        width: g.pointWidth,
+        height: middle,
+    });
+}
+
+/** Une pile de pions ; le dernier porte le nombre total s'il y en a trop
+ * pour les montrer tous. Le pion du dessus porte son endroit dans
+ * data-checker : c'est lui qu'on fait glisser quand un pion arrive. */
+function drawStack(
+    svg: Element,
+    g: Geometry,
+    side: Side,
+    count: number,
+    place: Place,
+    decor: BoardDecor,
+): void {
+    const limit = stackLimit(g, place);
+    const shown = Math.min(count, limit);
+    for (let i = 0; i < shown; i++) {
+        const last = i === shown - 1;
+        const classes = [`checker checker-${side}`];
+        if (last && decor.selected === place) {
+            classes.push("selected");
+        } else if (last && decor.movable.has(place)) {
+            classes.push("movable");
+        }
+        const { x, y } = slotCenter(g, place, i);
+        const checker = add(svg, "circle", {
+            class: classes.join(" "),
+            cx: x,
+            cy: y,
+            r: g.radius,
+        });
+        if (last) {
+            checker.setAttribute("data-checker", place);
+        }
+        if (last && count > limit) {
+            add(
+                svg,
+                "text",
+                {
+                    class: `checker-count count-${side}`,
+                    x,
+                    y: y + g.countFont * 0.35,
+                    "font-size": g.countFont,
+                },
+                String(count),
+            );
+        }
+    }
+}
+
+function drawBar(
+    svg: SVGSVGElement,
+    pieces: Element,
+    g: Geometry,
+    hits: Element,
+    board: BoardModel,
+    decor: BoardDecor,
+): void {
+    add(svg, "rect", { class: "board-bar", x: g.barLeft, y: 0, width: g.bar, height: g.height });
+    // Les pions du joueur sur la barre entrent en haut à droite : on les met
+    // dans la moitié haute, en partant du milieu ; ceux de l'ordinateur en bas.
+    for (const side of ["player", "computer"] as const) {
+        drawStack(pieces, g, side, board.bar[side], `bar-${side}`, decor);
+    }
+    if (g.layout === "landscape") {
+        drawChips(svg, g, board);
+    }
+    addHit(hits, "bar-player", decor, {
+        x: g.barLeft,
+        y: 0,
+        width: g.bar,
+        height: g.height / 2,
+    });
+}
+
+/** Paysage : les comptes de points en pastilles aux deux bouts de la barre,
+ * aux couleurs du camp (l'ordinateur en haut, vous en bas). */
+function drawChips(svg: SVGSVGElement, g: Geometry, board: BoardModel): void {
+    const width = g.bar - 6;
+    const h = g.chipHeight;
+    for (const side of ["computer", "player"] as const) {
+        const y = side === "computer" ? g.edge + 4 : g.height - g.edge - 4 - h;
+        add(svg, "rect", {
+            class: `pip-chip chip-${side}`,
+            x: g.barLeft + 3,
+            y,
+            width,
+            height: h,
+            rx: h / 2,
+        });
+        add(
+            svg,
+            "text",
+            {
+                class: `pip-chip-text chip-text-${side}`,
+                "data-pips": side,
+                x: g.barLeft + g.bar / 2,
+                y: y + h / 2 + g.chipFont * 0.35,
+                "font-size": g.chipFont,
+            },
+            String(board.pipCount[side]),
+        );
+    }
+}
+
+function drawTray(
+    svg: SVGSVGElement,
+    pieces: Element,
+    g: Geometry,
+    hits: Element,
+    board: BoardModel,
+    decor: BoardDecor,
+): void {
+    // Pions sortis, vus de profil : l'ordinateur en haut, le joueur en bas.
+    for (const side of ["player", "computer"] as const) {
+        const count = board.off[side];
+        for (let i = 0; i < count; i++) {
+            const slab = addSlab(
+                pieces,
+                g,
+                `checker checker-${side}`,
+                slotCenter(g, `off-${side}`, i),
+            );
+            if (i === count - 1) {
+                slab.setAttribute("data-checker", `off-${side}`);
+            }
+        }
+    }
+    const middle = g.height / 2;
+    if (decor.targets.has("off-player")) {
+        add(svg, "rect", {
+            class: "target-zone",
+            x: g.trayLeft + 2,
+            y: middle,
+            width: g.tray - 4,
+            height: middle - g.edge,
+            rx: 4,
+        });
+    }
+    addHit(hits, "off-player", decor, {
+        x: g.trayLeft,
+        y: middle,
+        width: g.width - g.trayLeft,
+        height: middle,
+    });
+}
+
+/** Une tranche de pion sorti, centrée en spot. */
+function addSlab(svg: Element, g: Geometry, cssClass: string, spot: Spot): SVGElement {
+    return add(svg, "rect", {
+        class: cssClass,
+        x: g.trayLeft + 4,
+        y: spot.y - OFF_SLAB / 2 + 1,
+        width: g.tray - 8,
+        height: OFF_SLAB - 2,
+        rx: 3,
+    });
+}
+
+/** Un cercle de rayon r autour d'un pion (un cadre pour un pion sorti). */
+function addRing(
+    svg: Element,
+    g: Geometry,
+    cssClass: string,
+    place: Place,
+    spot: Spot,
+    r: number,
+): void {
+    if (place.startsWith("off-")) {
+        addSlab(svg, g, cssClass, spot);
+    } else {
+        add(svg, "circle", { class: cssClass, cx: spot.x, cy: spot.y, r });
+    }
+}
+
+/** Paysage : la consigne courte, dans la moitié gauche de la bande
+ * centrale, sur une pastille accent-soft. */
+function drawBand(svg: SVGSVGElement, g: Geometry, text: string): void {
+    const middle = g.height / 2;
+    const width = 6 * g.pointWidth - 24;
+    const height = Math.max(44, g.bandFont + 20);
+    const x = g.x0 + 12;
+    add(svg, "rect", {
+        class: "band-pill",
+        x,
+        y: middle - height / 2,
+        width,
+        height,
+        rx: height / 2,
+    });
+    add(
+        svg,
+        "text",
+        {
+            class: "band-text",
+            id: "band-text",
+            x: x + width / 2,
+            y: middle + g.bandFont * 0.35,
+            "font-size": g.bandFont,
+        },
+        text,
+    );
+}
+
+/** Paysage : la colonne de commandes à gauche, dans le cadre. */
+function drawControls(
+    svg: SVGSVGElement,
+    g: Geometry,
+    hits: Element,
+    controls: BoardControls,
+): void {
+    const x = g.frame + (g.left - 4) / 2;
+    const r = (g.left - 4) / 2 - 6;
+    const top = g.edge + g.target / 2 + 2;
+    const bottom = g.height - g.edge - g.target / 2 - 2;
+    const control = (name: IconName, action: string, label: string, y: number, on: boolean) => {
+        const group = add(svg, "g", { class: on ? "control" : "control disabled" });
+        add(group, "circle", { class: "control-circle", cx: x, cy: y, r });
+        const size = r * 1.1;
+        const scale = size / 24;
+        const icon = add(group, "g", {
+            transform: `translate(${x - size / 2},${y - size / 2}) scale(${scale})`,
+        });
+        add(icon, "path", { class: "control-icon", d: ICON_PATHS[name] });
+        if (on) {
+            addAction(g, hits, action, label, { x, y }, g.target);
+        }
+    };
+    control("menu", "menu", TEXTS.menu, top, controls.menuEnabled);
+    if (controls.back === "replay") {
+        control("replay", "replay", TEXTS.replayTitle, bottom, controls.backEnabled);
+    } else {
+        control("undo", "undo", TEXTS.undoTitle, bottom, controls.backEnabled);
+    }
+}
+
+// ------------------------------------------------------ Coup de l'ordinateur
+
+/**
+ * Les traces d'un coup (sauf ses flèches, dessinées sous les pions) : un pion fantôme (contour seul) là où chaque pion
+ * est parti, un cercle autour de chaque pion arrivé et de chaque pion frappé
+ * (sur la barre), et une flèche par demi-coup.
+ */
+function drawTraceRings(
+    svg: SVGSVGElement,
+    g: Geometry,
+    board: BoardModel,
+    trace: MoveTrace,
+): void {
+    const side = trace.side;
+    const R = g.radius;
+    for (const [place, n] of trace.left) {
+        // Au-dessus des pions restés sur la case.
+        const remaining = countAt(board, side, place);
+        for (let k = 0; k < n; k++) {
+            addRing(svg, g, "trace-ghost", place, slotCenter(g, place, remaining + k), R - 1);
+        }
+    }
+    for (const [place, n] of trace.landed) {
+        const top = topIndex(g, board, side, place);
+        for (let k = 0; k < n && top - k >= 0; k++) {
+            addRing(svg, g, "trace-landed", place, slotCenter(g, place, top - k), R + 3);
+        }
+    }
+    const opponent: Side = side === "player" ? "computer" : "player";
+    const bar: Place = `bar-${opponent}`;
+    const top = topIndex(g, board, opponent, bar);
+    for (let k = 0; k < trace.hits && top - k >= 0; k++) {
+        addRing(svg, g, "trace-hit", bar, slotCenter(g, bar, top - k), R + 3);
+    }
+}
+
+/** Les flèches d'un coup, une par demi-coup : sous les pions. */
+function drawTraceArrows(
+    svg: SVGSVGElement,
+    g: Geometry,
+    board: BoardModel,
+    trace: MoveTrace,
+): void {
+    const side = trace.side;
+    const defs = add(svg, "defs", {});
+    const marker = add(defs, "marker", {
+        id: "trace-head",
+        viewBox: "0 0 10 10",
+        refX: 8,
+        refY: 5,
+        markerWidth: 3,
+        markerHeight: 3,
+        orient: "auto",
+    });
+    add(marker, "path", { class: "trace-head", d: "M0,0 L10,5 L0,10 z" });
+    const departures = new Map<Place, number>();
+    for (const { from, to } of trace.arrows) {
+        // De la place libre laissée par le pion (son fantôme) à son pion
+        // d'arrivée.
+        const k = departures.get(from) ?? 0;
+        departures.set(from, k + 1);
+        const start = slotCenter(g, from, countAt(board, side, from) + k);
+        const end = slotCenter(g, to, Math.max(topIndex(g, board, side, to), 0));
+        drawArrow(svg, g, start, end, to.startsWith("off-") ? OFF_SLAB : g.radius + 4);
+    }
+}
+
+/** Les cases d'arrivée du pion touché : un anneau pointillé là où il se
+ * posera (sur la pile du joueur, ou au pied de la flèche). */
+function drawLandings(
+    svg: SVGSVGElement,
+    g: Geometry,
+    board: BoardModel,
+    targets: ReadonlySet<Place>,
+): void {
+    for (const place of targets) {
+        const count = countAt(board, "player", place);
+        const index = place.startsWith("off-") ? count : Math.min(count, MAX_STACK - 1);
+        addRing(svg, g, "landing", place, slotCenter(g, place, index), g.radius);
+    }
+}
+
+/** L'indice du pion du dessus dessiné à un endroit (-1 s'il n'y en a pas). */
+function topIndex(g: Geometry, board: BoardModel, side: Side, place: Place): number {
+    const count = countAt(board, side, place);
+    return place.startsWith("off-") ? count - 1 : Math.min(count, stackLimit(g, place)) - 1;
+}
+
+/** Une flèche de start vers end, arrêtée à gap du centre d'arrivée. */
+function drawArrow(svg: SVGSVGElement, g: Geometry, start: Spot, end: Spot, gap: number): void {
+    const dx = end.x - start.x;
+    const dy = end.y - start.y;
+    const length = Math.hypot(dx, dy);
+    const keep = length > 2 * gap ? (length - gap) / length : 0.5;
+    add(svg, "line", {
+        class: "trace-arrow",
+        x1: start.x,
+        y1: start.y,
+        x2: start.x + dx * keep,
+        y2: start.y + dy * keep,
+        "stroke-width": g.arrowWidth,
+        "marker-end": "url(#trace-head)",
+    });
+}
+
+/** Le centre du pion du dessus d'un endroit, sur le plateau tel qu'il est
+ * dessiné (null s'il n'y a pas de pion). */
+export function checkerSpot(svg: SVGSVGElement, place: Place): Spot | null {
+    const checker = svg.querySelector(`[data-checker="${place}"]`);
+    if (checker === null) {
+        return null;
+    }
+    const number = (name: string) => Number(checker.getAttribute(name));
+    if (checker.tagName === "circle") {
+        return { x: number("cx"), y: number("cy") };
+    }
+    return { x: number("x") + number("width") / 2, y: number("y") + number("height") / 2 };
+}
+
+/** Courbe de tout ce qui se déplace (interaction.md, easing-standard). */
+export const EASING_STANDARD = "cubic-bezier(0.2, 0, 0, 1)";
+
+/**
+ * Fait glisser le pion du dessus de place depuis from jusqu'à sa position
+ * dessinée, en ms millisecondes (animation du navigateur, sans bibliothèque).
+ * Résolue à la fin du glissement.
+ */
+export async function slideChecker(
+    svg: SVGSVGElement,
+    place: Place,
+    from: Spot,
+    ms: number,
+): Promise<void> {
+    const checker = svg.querySelector(`[data-checker="${place}"]`);
+    const to = checkerSpot(svg, place);
+    if (checker === null || to === null || typeof checker.animate !== "function") {
+        return;
+    }
+    // Devant les autres pions pendant le trajet, mais derrière les zones à
+    // toucher, toujours dessinées en dernier.
+    svg.insertBefore(checker, svg.lastChild);
+    const animation = checker.animate(
+        [
+            { transform: `translate(${from.x - to.x}px, ${from.y - to.y}px)` },
+            { transform: "translate(0px, 0px)" },
+        ],
+        { duration: ms, easing: EASING_STANDARD },
+    );
+    await animation.finished.catch(() => undefined);
+}
+
+// Position des points d'un dé, en fractions de son côté.
+const PIPS: Record<number, [number, number][]> = {
+    1: [[0.5, 0.5]],
+    2: [
+        [0.25, 0.25],
+        [0.75, 0.75],
+    ],
+    3: [
+        [0.25, 0.25],
+        [0.5, 0.5],
+        [0.75, 0.75],
+    ],
+    4: [
+        [0.25, 0.25],
+        [0.75, 0.25],
+        [0.25, 0.75],
+        [0.75, 0.75],
+    ],
+    5: [
+        [0.25, 0.25],
+        [0.75, 0.25],
+        [0.5, 0.5],
+        [0.25, 0.75],
+        [0.75, 0.75],
+    ],
+    6: [
+        [0.25, 0.25],
+        [0.75, 0.25],
+        [0.25, 0.5],
+        [0.75, 0.5],
+        [0.25, 0.75],
+        [0.75, 0.75],
+    ],
+};
+
+/** Les dés, au milieu de la moitié droite. */
+function drawDice(svg: SVGSVGElement, g: Geometry, dice: readonly ShownDie[]): void {
+    const center = g.rightHalf + 3 * g.pointWidth;
+    const size = g.die;
+    const gap = 8;
+    const total = dice.length * size + (dice.length - 1) * gap;
+    dice.forEach((die, i) => {
+        const x = center - total / 2 + i * (size + gap);
+        const y = g.height / 2 - size / 2;
+        const group = add(svg, "g", {
+            class: ["die", die.blocked ? "die-blocked" : "", die.used ? "die-used" : ""]
+                .filter(Boolean)
+                .join(" "),
+            "data-value": die.value,
+        });
+        add(group, "rect", { class: `die-${die.side}`, x, y, width: size, height: size, rx: 6 });
+        for (const [px, py] of PIPS[die.value] ?? []) {
+            add(group, "circle", {
+                class: `pip-${die.side}`,
+                cx: x + px * size,
+                cy: y + py * size,
+                r: size / 10,
+            });
+        }
+        if (die.blocked) {
+            add(group, "line", { class: "die-strike", x1: x, y1: y + size, x2: x + size, y2: y });
+        }
+    });
+}
+
+/** Le videau : dans la colonne des sorties en portrait, dans la colonne de
+ * commandes en paysage ; au milieu s'il est au centre (il montre alors 64),
+ * sinon du côté de son propriétaire. */
+function drawCube(svg: SVGSVGElement, g: Geometry, cube: Cube): SVGElement {
+    const center = cubeCenter(g, cube);
+    const size = g.cube;
+    const x = center.x - size / 2;
+    const y = center.y - size / 2;
+    const group = add(svg, "g", { class: "cube", "data-owner": cube.owner ?? "center" });
+    add(group, "rect", { class: "cube-face", x, y, width: size, height: size, rx: 4 });
+    add(
+        group,
+        "text",
+        {
+            class: "cube-value",
+            x: center.x,
+            y: center.y + g.cubeFont * 0.35,
+            "font-size": g.cubeFont,
+        },
+        String(cube.owner === null ? 64 : cube.value),
+    );
+    return group;
+}
+
+/** Le centre du videau. */
+function cubeCenter(g: Geometry, cube: Cube): Spot {
+    const middle = g.height / 2;
+    if (g.layout === "landscape") {
+        const shift = g.target + 6;
+        const y =
+            cube.owner === "computer"
+                ? middle - shift
+                : cube.owner === "player"
+                  ? middle + shift
+                  : middle;
+        return { x: g.frame + (g.left - 4) / 2, y };
+    }
+    const shift = cube.owner === "computer" ? -48 : cube.owner === "player" ? 48 : 0;
+    return { x: g.trayLeft + g.tray / 2, y: middle + shift };
+}
+
+/** Portrait : les dés du joueur en attente d'être lancés, faces vides, au
+ * milieu de la moitié gauche (la droite garde le dernier jet de
+ * l'ordinateur). */
+function waitingDice(svg: SVGSVGElement, g: Geometry): void {
+    const center = g.x0 + 3 * g.pointWidth;
+    const gap = 8;
+    const group = add(svg, "g", { class: "die die-waiting" });
+    for (const x of [center - gap / 2 - g.die, center + gap / 2]) {
+        add(group, "rect", {
+            class: "die-player",
+            x,
+            y: g.height / 2 - g.die / 2,
+            width: g.die,
+            height: g.die,
+            rx: 6,
+        });
+    }
+}
+
+/**
+ * Une zone à toucher qui fait la même chose qu'un bouton (lancer les dés,
+ * jouer le coup, doubler, menu…) : au moins g.target de côté (44 px à
+ * l'écran), centrée sur ce qu'on touche, avec un rôle et un nom accessibles.
+ */
+function addAction(
+    g: Geometry,
+    hits: Element,
+    action: string,
+    label: string,
+    center: Spot,
+    width: number,
+): void {
+    const w = Math.max(width, g.target);
+    add(hits, "rect", {
+        class: "hit action",
+        "data-action": action,
+        role: "button",
+        "aria-label": label,
+        // Sans déborder du dessin (le videau est contre le bord).
+        x: Math.max(0, Math.min(center.x - w / 2, g.width - w)),
+        y: center.y - g.target / 2,
+        width: w,
+        height: g.target,
+    });
+}
+
+/** Une zone à toucher. Elle porte son état (can-move, can-land) pour les
+ * tests dans un navigateur. */
+function addHit(
+    hits: Element,
+    place: Place,
+    decor: BoardDecor,
+    box: { x: number; y: number; width: number; height: number },
+): void {
+    const classes = ["hit"];
+    if (decor.movable.has(place)) {
+        classes.push("can-move");
+    }
+    if (decor.targets.has(place)) {
+        classes.push("can-land");
+    }
+    add(hits, "rect", { class: classes.join(" "), "data-place": place, ...box });
+}

app/src/ui/games-texts.ts

@@ -0,0 +1,66 @@
+// Les textes de « Mes parties » (ADR 0007, point 5), à part de texts.ts le
+// temps que l'écran rejoigne le menu de l'application.
+//
+// Copyright (C) 2026 les auteurs d'Ustagammon.
+// Licence : GPLv3 ou ultérieure (voir LICENSE).
+
+import type { ResultKind } from "../domain/game/engine.js";
+import type { Side } from "../domain/game/side.js";
+
+const RESULT_KIND: Record<ResultKind, string> = {
+    single: "partie simple",
+    gammon: "gammon",
+    backgammon: "backgammon",
+};
+
+function moves(n: number): string {
+    return n > 1 ? `${n} coups` : `${n} coup`;
+}
+
+function points(n: number): string {
+    return n > 1 ? `${n} points` : `${n} point`;
+}
+
+export const GAMES_TEXTS = {
+    button: "Mes parties",
+    title: "Mes parties",
+    empty: "Aucune partie enregistrée.",
+    close: "Fermer",
+    resume: "Reprendre",
+    showBranches: "Branches",
+    resumeBranch: "Reprendre cette branche",
+    exportSgf: "Exporter (SGF)",
+    remove: "Supprimer",
+    confirmRemove: "Supprimer pour de bon (branches comprises)",
+    shown: "partie affichée",
+    busy: "Attendez la fin du coup en cours.",
+    failed: (message: string) => `Erreur : ${message}`,
+
+    /** « 3 nov. 2026, 14:05 ». */
+    date: (ms: number) =>
+        new Date(ms).toLocaleString("fr-FR", { dateStyle: "medium", timeStyle: "short" }),
+
+    status: (
+        result: { winner: Side; kind: ResultKind; points: number } | null,
+        moveCount: number,
+    ) => {
+        if (result === null) {
+            return `En cours, ${moves(moveCount)}`;
+        }
+        const who = result.winner === "player" ? "Gagnée" : "Perdue";
+        return `${who} (${RESULT_KIND[result.kind]}, ${points(result.points)}), ${moves(moveCount)}`;
+    },
+    branchCount: (n: number) => (n > 1 ? `${n} branches` : ""),
+
+    /** Une branche : d'où elle part et où elle en est. */
+    branch: (forkMoveCount: number | null, moveCount: number, over: boolean) => {
+        const start =
+            forkMoveCount === null
+                ? "Partie d'origine"
+                : forkMoveCount === 0
+                  ? "Rejouée depuis le début"
+                  : `Rejouée après le coup ${forkMoveCount}`;
+        return `${start} : ${moves(moveCount)}${over ? ", finie" : ""}`;
+    },
+    currentBranch: " (branche courante)",
+};

app/src/ui/games-view.ts

@@ -0,0 +1,249 @@
+// « Mes parties » : la liste des parties enregistrées, pour en reprendre une
+// (ou l'une de ses branches), l'exporter en SGF ou la supprimer.
+//
+// Copyright (C) 2026 les auteurs d'Ustagammon.
+// Licence : GPLv3 ou ultérieure (voir LICENSE).
+//
+// Une feuille qui monte du bas, comme le menu, créée ici même : elle ne
+// dépend pas de index.html. Comme tout l'écran, elle ne connaît ni le
+// stockage ni le moteur : l'écran de jeu (app.ts) lui passe les opérations
+// (GamesViewOptions), et change lui-même de partie quand on en reprend une.
+
+import { branches } from "../domain/game/branches.js";
+import type { GameJournal } from "../domain/game/events.js";
+import type { SavedGameSummary } from "../domain/game/saved-game.js";
+import { GAMES_TEXTS } from "./games-texts.js";
+import { icon } from "./icons.js";
+
+export interface GamesViewOptions {
+    /** Les parties, la dernière jouée d'abord. */
+    readonly list: () => Promise<SavedGameSummary[]>;
+    /** Le journal d'une partie (null si elle a disparu). */
+    readonly journal: (id: string) => Promise<GameJournal | null>;
+    /** L'identifiant de la partie affichée à l'écran. */
+    readonly shownId: () => string | null;
+    /** Reprend une partie, au bout de la branche branchHead si elle est
+     * donnée (sinon là où elle en était). */
+    readonly resume: (id: string, branchHead?: string) => Promise<void>;
+    readonly remove: (id: string) => Promise<void>;
+    /** Le fichier SGF d'une partie : son nom et son contenu. */
+    readonly exportSgf: (id: string) => Promise<{ fileName: string; text: string }>;
+}
+
+export interface GamesView {
+    /** Ouvre la liste, à jour. */
+    open(): Promise<void>;
+    close(): void;
+    readonly isOpen: boolean;
+}
+
+/** Crée la feuille « Mes parties » (fermée) dans la page. */
+export function createGamesView(options: GamesViewOptions): GamesView {
+    const veil = element("div", "veil sheet-veil");
+    veil.id = "games-veil";
+    veil.hidden = true;
+    const sheet = element("div", "sheet games");
+    sheet.id = "games";
+    sheet.setAttribute("role", "dialog");
+    sheet.setAttribute("aria-modal", "true");
+    sheet.setAttribute("aria-labelledby", "games-title");
+    const head = element("div", "sheet-head");
+    const title = element("h2", "sheet-title");
+    title.id = "games-title";
+    title.textContent = GAMES_TEXTS.title;
+    const close = button("", () => hide(), "icon-button");
+    close.id = "games-close";
+    close.setAttribute("aria-label", GAMES_TEXTS.close);
+    close.append(icon("close"));
+    head.append(title, close);
+    const list = element("ul", "games-list");
+    const message = element("p", "games-message");
+    message.setAttribute("aria-live", "polite");
+    sheet.append(head, message, list);
+    veil.append(sheet);
+    document.body.append(veil);
+    veil.addEventListener("click", (event) => {
+        if (event.target === veil) {
+            hide();
+        }
+    });
+
+    function hide(): void {
+        veil.hidden = true;
+    }
+
+    /** Lance une action ; une erreur s'affiche dans la fenêtre. */
+    const run = (action: () => Promise<void>) => async () => {
+        message.textContent = "";
+        try {
+            await action();
+        } catch (error) {
+            message.textContent = GAMES_TEXTS.failed(
+                error instanceof Error ? error.message : String(error),
+            );
+        }
+    };
+
+    async function render(): Promise<void> {
+        const games = await options.list();
+        list.replaceChildren(...games.map((game) => gameItem(game, game.id === options.shownId())));
+        if (games.length === 0) {
+            message.textContent = GAMES_TEXTS.empty;
+        }
+    }
+
+    function gameItem(game: SavedGameSummary, shown: boolean): HTMLElement {
+        const item = element("li", "games-item");
+        item.dataset.id = game.id;
+        const heading = element("p");
+        heading.textContent = [
+            GAMES_TEXTS.date(game.startedAt),
+            GAMES_TEXTS.status(game.result, game.moveCount),
+            GAMES_TEXTS.branchCount(game.branchCount),
+            shown ? GAMES_TEXTS.shown : "",
+        ]
+            .filter((part) => part !== "")
+            .join(" · ");
+        const branchList = element("ul", "games-branches");
+        branchList.hidden = true;
+        const actions = element("div", "games-actions");
+        actions.append(
+            button(
+                GAMES_TEXTS.resume,
+                run(async () => {
+                    await options.resume(game.id);
+                    hide();
+                }),
+                "",
+                "resume",
+            ),
+            button(
+                GAMES_TEXTS.showBranches,
+                run(async () => {
+                    if (branchList.hidden) {
+                        await renderBranches(game.id, branchList);
+                    }
+                    branchList.hidden = !branchList.hidden;
+                }),
+                "secondary",
+                "branches",
+            ),
+            button(
+                GAMES_TEXTS.exportSgf,
+                run(async () => download(await options.exportSgf(game.id))),
+                "secondary",
+                "export",
+            ),
+            // Supprimer se fait en deux touchers, sans boîte du navigateur :
+            // le premier change le bouton en demande de confirmation.
+            button(
+                GAMES_TEXTS.remove,
+                run(async () => {
+                    const remove = item.querySelector<HTMLElement>('[data-action="remove"]');
+                    if (remove?.dataset.armed !== "true") {
+                        if (remove !== null) {
+                            remove.dataset.armed = "true";
+                            remove.textContent = GAMES_TEXTS.confirmRemove;
+                        }
+                        return;
+                    }
+                    await options.remove(game.id);
+                    await render();
+                }),
+                "secondary",
+                "remove",
+            ),
+        );
+        // La partie à l'écran ne se supprime pas : elle continue d'être
+        // enregistrée.
+        const remove = actions.querySelector<HTMLElement>('[data-action="remove"]');
+        if (remove !== null) {
+            remove.hidden = shown;
+        }
+        item.append(heading, actions, branchList);
+        return item;
+    }
+
+    async function renderBranches(id: string, target: HTMLElement): Promise<void> {
+        const journal = await options.journal(id);
+        const all = journal === null ? [] : branches(journal);
+        target.replaceChildren(
+            ...all.map((branch) => {
+                const item = element("li", "games-branch");
+                item.dataset.head = branch.head;
+                const text = element("span");
+                text.textContent =
+                    GAMES_TEXTS.branch(
+                        branch.forkedFrom === null ? null : branch.forkMoveCount,
+                        branch.moveCount,
+                        branch.over,
+                    ) + (branch.containsHead ? GAMES_TEXTS.currentBranch : "");
+                item.append(
+                    text,
+                    button(
+                        GAMES_TEXTS.resumeBranch,
+                        run(async () => {
+                            await options.resume(id, branch.head);
+                            hide();
+                        }),
+                        "secondary",
+                        "resume-branch",
+                    ),
+                );
+                return item;
+            }),
+        );
+    }
+
+    return {
+        async open() {
+            message.textContent = "";
+            await render();
+            veil.hidden = false;
+            close.focus();
+        },
+        close: hide,
+        get isOpen() {
+            return !veil.hidden;
+        },
+    };
+}
+
+function element<K extends keyof HTMLElementTagNameMap>(
+    tag: K,
+    className = "",
+): HTMLElementTagNameMap[K] {
+    const created = document.createElement(tag);
+    if (className !== "") {
+        created.className = className;
+    }
+    return created;
+}
+
+function button(
+    text: string,
+    onClick: () => unknown,
+    className = "",
+    action = "",
+): HTMLButtonElement {
+    const created = element("button", className);
+    created.type = "button";
+    created.textContent = text;
+    if (action !== "") {
+        created.dataset.action = action;
+    }
+    created.onclick = () => void onClick();
+    return created;
+}
+
+/** Fait télécharger un fichier texte au navigateur. */
+function download(file: { fileName: string; text: string }): void {
+    const url = URL.createObjectURL(new Blob([file.text], { type: "application/x-go-sgf" }));
+    const link = element("a");
+    link.href = url;
+    link.download = file.fileName;
+    document.body.append(link);
+    link.click();
+    link.remove();
+    setTimeout(() => URL.revokeObjectURL(url), 10_000);
+}

app/src/ui/geometry.ts

@@ -0,0 +1,191 @@
+// La géométrie du plateau, calculée d'après la forme de l'écran (fonction
+// pure, testée sous Node).
+//
+// Copyright (C) 2026 les auteurs d'Ustagammon.
+// Licence : GPLv3 ou ultérieure (voir LICENSE).
+//
+// Le dessin est en unités du viewBox, de hauteur fixe (520). En portrait, le
+// plateau garde ses proportions habituelles (640 × 520) et suit la largeur de
+// l'écran. En paysage, « le plateau est l'écran » (ADR 0012, amendements du
+// 2026-11-03) : sa largeur suit le rapport largeur/hauteur de l'écran, et les
+// flèches s'élargissent d'autant. Formules du composant Board des maquettes
+// « Révision UX » : largeur d'une flèche = ce qui reste une fois ôtés le
+// cadre, les colonnes et la barre, divisé par 12 ; rayon d'un pion = le plus
+// petit de la demi-largeur d'une flèche (moins 2) et du dixième de la
+// hauteur d'une demi-table (hors bande des numéros et bande centrale).
+
+/** Portrait : barre haute, bandeaux et barre d'actions autour du plateau ;
+ * paysage : le plateau seul, commandes comprises. */
+export type Layout = "portrait" | "landscape";
+
+export interface Geometry {
+    readonly layout: Layout;
+    /** Taille du dessin, en unités du viewBox. */
+    readonly width: number;
+    readonly height: number;
+    /** Épaisseur du cadre sur les côtés. */
+    readonly frame: number;
+    /** Hauteur du cadre en haut et en bas : la bande des numéros en paysage. */
+    readonly edge: number;
+    /** Colonne de commandes à gauche (0 en portrait). */
+    readonly left: number;
+    /** Colonne des sorties, à droite. */
+    readonly tray: number;
+    readonly bar: number;
+    /** Bande centrale, entre les pointes des flèches (dés, consigne). */
+    readonly band: number;
+    readonly pointWidth: number;
+    readonly radius: number;
+    /** D'un pion au suivant dans une pile. */
+    readonly step: number;
+    /** Bord gauche de la première colonne de flèches. */
+    readonly x0: number;
+    readonly barLeft: number;
+    /** Bord gauche de la moitié droite. */
+    readonly rightHalf: number;
+    readonly trayLeft: number;
+    /** Côté minimal d'une zone à toucher : 44 px à l'écran. */
+    readonly target: number;
+    /** Tailles de texte, en unités : numéros des flèches (12 px au moins à
+     * l'écran), consigne de la bande et pastilles des comptes (13 px). */
+    readonly numberSize: number;
+    readonly bandFont: number;
+    readonly chipFont: number;
+    /** Videau : côté et taille du chiffre ; nombre posé sur une pile trop
+     * haute (13 px au moins à l'écran). */
+    readonly cube: number;
+    readonly cubeFont: number;
+    readonly countFont: number;
+    /** Épaisseur des flèches du coup de l'ordinateur : 2,5 px à l'écran. */
+    readonly arrowWidth: number;
+    readonly die: number;
+    /** Nombre de pions dessinés au plus sur la barre, par camp (au-delà, un
+     * nombre sur le dernier) : en paysage, ils s'arrêtent avant les
+     * pastilles des comptes. */
+    readonly barStack: number;
+    /** Hauteur d'une pastille de compte, au bout de la barre (paysage). */
+    readonly chipHeight: number;
+}
+
+export const BOARD_HEIGHT = 520;
+/** Rapport largeur / hauteur du plateau en portrait. */
+export const PORTRAIT_ASPECT = 640 / 520;
+/** Pions dessinés au plus sur une flèche ; au-delà, un nombre sur le dernier. */
+export const MAX_STACK = 5;
+
+/** Une taille en unités qui fait au moins px pixels à l'écran. */
+function atLeast(px: number, pxPerUnit: number, min: number): number {
+    return Math.max(min, Math.ceil(px / pxPerUnit));
+}
+
+/**
+ * La géométrie du plateau pour une mise en page. aspect : rapport largeur /
+ * hauteur de la place offerte (ignoré en portrait) ; pxPerUnit : pixels à
+ * l'écran par unité du dessin, pour les tailles minimales (textes, cibles).
+ */
+export function boardGeometry(layout: Layout, aspect: number, pxPerUnit: number): Geometry {
+    const height = BOARD_HEIGHT;
+    const target = atLeast(46, pxPerUnit, 40);
+    const numberSize = atLeast(12.5, pxPerUnit, 13);
+    const text = atLeast(13.5, pxPerUnit, 17);
+    const sizes = {
+        cubeFont: text,
+        cube: Math.max(36, text + 20),
+        countFont: Math.max(18, text),
+        arrowWidth: 2.5 / pxPerUnit,
+    };
+    if (layout === "portrait") {
+        // Les mesures du plateau d'origine : flèches de 44, pions de 20.
+        const frame = 8;
+        const tray = 48;
+        const bar = 40;
+        const width = 640;
+        const pointWidth = (width - 3 * frame - tray - bar) / 12;
+        const band = 84;
+        const radius = Math.min(pointWidth / 2 - 2, (height / 2 - frame - band / 2) / 10);
+        const x0 = frame;
+        const barLeft = x0 + 6 * pointWidth;
+        return {
+            layout,
+            width,
+            height,
+            frame,
+            edge: frame,
+            left: 0,
+            tray,
+            bar,
+            band,
+            pointWidth,
+            radius,
+            step: 2 * radius + 2,
+            x0,
+            barLeft,
+            rightHalf: barLeft + bar,
+            trayLeft: barLeft + bar + 6 * pointWidth + frame,
+            target,
+            numberSize,
+            bandFont: atLeast(13.5, pxPerUnit, 17),
+            chipFont: atLeast(13.5, pxPerUnit, 17),
+            ...sizes,
+            die: 36,
+            barStack: MAX_STACK,
+            chipHeight: 0,
+        };
+    }
+    const width = Math.round(height * aspect);
+    const frame = 6;
+    const edge = Math.max(24, numberSize + 8);
+    const left = target + 4;
+    const tray = 56;
+    const bar = 64;
+    const band = 80;
+    const pointWidth = (width - 2 * frame - left - tray - bar) / 12;
+    const radius = Math.min(pointWidth / 2 - 2, (height / 2 - edge - band / 2 - 4) / 10);
+    const step = 2 * radius + 1;
+    const chipFont = atLeast(13.5, pxPerUnit, 18);
+    const chipHeight = chipFont + 12;
+    // Pions de la barre, depuis le milieu (voir board-view) : le dernier
+    // s'arrête à 2 unités de la pastille.
+    const room = height / 2 - edge - 4 - chipHeight - 2 - (radius + 4) - radius;
+    const barStack = Math.max(1, Math.min(MAX_STACK, Math.floor(room / step) + 1));
+    const x0 = frame + left;
+    const barLeft = x0 + 6 * pointWidth;
+    return {
+        layout,
+        width,
+        height,
+        frame,
+        edge,
+        left,
+        tray,
+        bar,
+        band,
+        pointWidth,
+        radius,
+        step,
+        x0,
+        barLeft,
+        rightHalf: barLeft + bar,
+        trayLeft: barLeft + bar + 6 * pointWidth,
+        target,
+        numberSize,
+        bandFont: atLeast(13.5, pxPerUnit, 22),
+        chipFont,
+        ...sizes,
+        die: Math.min(40, band - 12),
+        barStack,
+        chipHeight,
+    };
+}
+
+/** Abscisse du bord gauche d'une colonne de flèches (0 à 11). */
+export function columnLeft(g: Geometry, column: number): number {
+    return column < 6 ? g.x0 + column * g.pointWidth : g.rightHalf + (column - 6) * g.pointWidth;
+}
+
+/** Ordonnée du centre du pion numéro index (0 : contre le bord) d'une pile
+ * de la rangée du haut ou du bas. */
+export function stackY(g: Geometry, top: boolean, index: number): number {
+    const offset = g.radius + 1 + Math.min(index, MAX_STACK) * g.step;
+    return top ? g.edge + offset : g.height - g.edge - offset;
+}

app/src/ui/haptics.ts

@@ -0,0 +1,47 @@
+// Les vibrations (docs/identite/charte/interaction.md) : elles doublent un
+// événement visible, jamais seules, et se coupent dans le menu. Rien ne vibre
+// pour un toucher de bouton ni pour le lancer des dés.
+//
+// Copyright (C) 2026 les auteurs d'Ustagammon.
+// Licence : GPLv3 ou ultérieure (voir LICENSE).
+
+export type HapticEvent =
+    | "checkerPlaced"
+    | "checkerHit"
+    | "computerDoubles"
+    | "gameWon"
+    | "gameLost";
+
+/** Motifs en millisecondes (vibration, pause, vibration…). */
+export const HAPTIC_PATTERNS: Readonly<Record<HapticEvent, readonly number[]>> = {
+    checkerPlaced: [12],
+    checkerHit: [25, 40, 25],
+    computerDoubles: [40, 60, 40],
+    gameWon: [30, 50, 30, 50, 60],
+    gameLost: [60],
+};
+
+/** navigator.vibrate, s'il existe. */
+export type Vibrate = (pattern: number[]) => boolean;
+
+/**
+ * La fonction qui fait vibrer pour un événement : rien si le navigateur ne
+ * sait pas vibrer ou si le joueur a coupé les vibrations. Une seule vibration
+ * à la fois : chaque appel remplace le précédent (comportement de
+ * navigator.vibrate).
+ */
+export function createHaptics(
+    vibrate: Vibrate | undefined,
+    enabled: () => boolean,
+): (event: HapticEvent) => void {
+    return (event) => {
+        if (vibrate !== undefined && enabled()) {
+            try {
+                vibrate([...HAPTIC_PATTERNS[event]]);
+            } catch {
+                // Navigateur qui refuse (pas encore de geste du joueur) : la
+                // marque visible suffit.
+            }
+        }
+    };
+}

app/src/ui/help-text.ts

@@ -0,0 +1,91 @@
+// Lecture des textes de l'aide : les scénarios (docs/scenarios/) et les
+// fiches du glossaire (docs/glossaire/), copiés tels quels dans le site par
+// make site (ADR 0008 : une seule source). Fonctions pures, testées sous Node.
+//
+// Copyright (C) 2026 les auteurs d'Ustagammon.
+// Licence : GPLv3 ou ultérieure (voir LICENSE).
+
+/** Un scénario, mis en forme comme une page d'aide. */
+export interface HelpFeature {
+    readonly title: string;
+    /** Paragraphes d'introduction. */
+    readonly description: readonly string[];
+    readonly scenarios: readonly HelpScenario[];
+}
+
+export interface HelpScenario {
+    readonly title: string;
+    readonly description: readonly string[];
+    /** Les étapes, mot-clé compris : « Quand vous prenez ». */
+    readonly steps: readonly string[];
+}
+
+const STEP = /^(Étant donnée?s?|Etant donnée?s?|Soit|Quand|Lorsque|Alors|Donc|Et|Mais)\s/;
+const SCENARIO = /^(Scénario|Exemple|Contexte)\s*:\s*(.*)$/;
+const FEATURE = /^Fonctionnalité\s*:\s*(.*)$/;
+
+/**
+ * Lit un fichier Gherkin en français (fichiers .feature). Les lignes de texte
+ * libre consécutives forment un paragraphe ; les commentaires (#) sont
+ * ignorés.
+ */
+export function parseFeature(text: string): HelpFeature {
+    let title = "";
+    const description: string[] = [];
+    const scenarios: { title: string; description: string[]; steps: string[] }[] = [];
+    let paragraph: string[] = [];
+
+    // Le paragraphe en cours rejoint la description de la fonctionnalité ou
+    // du dernier scénario.
+    const endParagraph = () => {
+        if (paragraph.length > 0) {
+            (scenarios.at(-1)?.description ?? description).push(paragraph.join(" "));
+            paragraph = [];
+        }
+    };
+
+    for (const raw of text.split("\n")) {
+        const line = raw.trim();
+        const feature = FEATURE.exec(line);
+        const scenario = SCENARIO.exec(line);
+        if (line === "" || line.startsWith("#")) {
+            endParagraph();
+        } else if (feature) {
+            endParagraph();
+            title = feature[1] ?? "";
+        } else if (scenario) {
+            endParagraph();
+            scenarios.push({ title: scenario[2] ?? "", description: [], steps: [] });
+        } else if (STEP.test(line) && scenarios.length > 0) {
+            endParagraph();
+            scenarios.at(-1)?.steps.push(line);
+        } else {
+            paragraph.push(line);
+        }
+    }
+    endParagraph();
+    return { title, description, scenarios };
+}
+
+/** Les fiches citées par l'index du glossaire (README.md), dans l'ordre :
+ * les liens « [Terme](fichier.md) » de la section « Termes ». */
+export function parseGlossaryIndex(readme: string): string[] {
+    const section = readme.split(/^## Termes$/m)[1] ?? "";
+    return [...section.matchAll(/\]\(([a-z0-9-]+\.md)\)/g)].map((match) => match[1] ?? "");
+}
+
+/** Une fiche du glossaire : le terme et sa phrase « En bref ». */
+export interface GlossaryEntry {
+    readonly term: string;
+    readonly brief: string;
+}
+
+/** Lit une fiche du glossaire ; null si elle n'a pas la forme attendue. */
+export function parseGlossaryEntry(text: string): GlossaryEntry | null {
+    const term = /^term: (.+)$/m.exec(text)?.[1]?.trim();
+    const brief = /^\*\*En bref\*\* : (.+)$/m.exec(text)?.[1]?.trim();
+    if (term === undefined || brief === undefined) {
+        return null;
+    }
+    return { term, brief: brief.replaceAll("**", "") };
+}

app/src/ui/help.ts

@@ -0,0 +1,110 @@
+// La page d'aide : le scénario « Jouer une partie contre l'ordinateur » et le
+// glossaire, lus à l'exécution dans les copies de docs/ faites par make site
+// (ADR 0008). Rien n'est recopié dans le code.
+//
+// Copyright (C) 2026 les auteurs d'Ustagammon.
+// Licence : GPLv3 ou ultérieure (voir LICENSE).
+
+import {
+    type GlossaryEntry,
+    type HelpFeature,
+    parseFeature,
+    parseGlossaryEntry,
+    parseGlossaryIndex,
+} from "./help-text.js";
+import { TEXTS } from "./texts.js";
+
+/** Les scénarios montrés dans l'aide, dans l'ordre. */
+const FEATURES = [
+    "docs/scenarios/jouer-une-partie.feature",
+    "docs/scenarios/mes-parties.feature",
+    "docs/scenarios/regler-l-application.feature",
+];
+const GLOSSARY = "docs/glossaire/";
+
+async function fetchText(url: string): Promise<string> {
+    const response = await fetch(url);
+    if (!response.ok) {
+        throw new Error(`${url} : ${response.status}`);
+    }
+    return response.text();
+}
+
+async function loadGlossary(): Promise<GlossaryEntry[]> {
+    const files = parseGlossaryIndex(await fetchText(`${GLOSSARY}README.md`));
+    const texts = await Promise.all(files.map((file) => fetchText(GLOSSARY + file)));
+    return texts.map(parseGlossaryEntry).filter((entry) => entry !== null);
+}
+
+/** Une fiche du glossaire (nom de fichier dans docs/glossaire/), lue dans la
+ * copie du site : la bulle du compte de points en affiche le texte. */
+export async function loadGlossaryEntry(file: string): Promise<GlossaryEntry | null> {
+    return parseGlossaryEntry(await fetchText(GLOSSARY + file));
+}
+
+function element<K extends keyof HTMLElementTagNameMap>(
+    parent: HTMLElement,
+    tag: K,
+    text?: string,
+): HTMLElementTagNameMap[K] {
+    const child = document.createElement(tag);
+    if (text !== undefined) {
+        child.textContent = text;
+    }
+    parent.append(child);
+    return child;
+}
+
+function renderFeature(parent: HTMLElement, feature: HelpFeature): void {
+    element(parent, "h2", feature.title);
+    for (const paragraph of feature.description) {
+        element(parent, "p", paragraph);
+    }
+    for (const scenario of feature.scenarios) {
+        element(parent, "h3", scenario.title);
+        for (const paragraph of scenario.description) {
+            element(parent, "p", paragraph);
+        }
+        const steps = element(parent, "ul");
+        steps.className = "steps";
+        for (const step of scenario.steps) {
+            element(steps, "li", step);
+        }
+    }
+}
+
+function renderGlossary(parent: HTMLElement, entries: readonly GlossaryEntry[]): void {
+    element(parent, "h2", TEXTS.glossaryTitle);
+    const list = element(parent, "dl");
+    list.className = "glossary";
+    for (const entry of entries) {
+        element(list, "dt", entry.term);
+        element(list, "dd", entry.brief);
+    }
+}
+
+/** Remplit container avec l'aide (une seule fois ; les appels suivants ne
+ * font rien). */
+export async function showHelp(container: HTMLElement): Promise<void> {
+    if (container.dataset.loaded === "true") {
+        return;
+    }
+    container.replaceChildren();
+    const status = element(container, "p", TEXTS.helpLoading);
+    try {
+        const [features, glossary] = await Promise.all([
+            Promise.all(FEATURES.map(async (url) => parseFeature(await fetchText(url)))),
+            loadGlossary(),
+        ]);
+        status.remove();
+        for (const feature of features) {
+            renderFeature(container, feature);
+        }
+        renderGlossary(container, glossary);
+        const about = element(container, "p", TEXTS.about);
+        about.className = "about";
+        container.dataset.loaded = "true";
+    } catch {
+        status.textContent = TEXTS.helpFailed;
+    }
+}

app/src/ui/icons.ts

@@ -0,0 +1,45 @@
+// Les pictogrammes de l'interface (composant Icons de la charte,
+// docs/identite/charte/interaction.md) : traits de 2 px à bouts ronds, en
+// currentColor, dessinés en SVG. Les tracés viennent des maquettes
+// « Révision UX » (repère 24 × 24). Couleur et épaisseur passent par la
+// classe « icon » (app.css) : aucun style dans le SVG (CSP).
+//
+// Copyright (C) 2026 les auteurs d'Ustagammon.
+// Licence : GPLv3 ou ultérieure (voir LICENSE).
+
+export const ICON_PATHS = {
+    menu: "M4 7h16M4 12h16M4 17h16",
+    help: "M12 21a9 9 0 1 0 0-18a9 9 0 0 0 0 18zM9.5 9.3a2.6 2.6 0 1 1 3.6 2.4c-.7.3-1.1.9-1.1 1.6v.6M12 17.2v.1",
+    fullscreen: "M4 9V4h5M15 4h5v5M20 15v5h-5M9 20H4v-5",
+    exitFullscreen: "M9 4v5H4M20 9h-5V4M15 20v-5h5M4 15h5v5",
+    undo: "M9 14L4 9l5-5M4 9h10a6 6 0 0 1 0 12h-3",
+    replay: "M20 12a8 8 0 1 1-2.34-5.66M20 4v5h-5",
+    close: "M6 6l12 12M18 6L6 18",
+    chevron: "M9 6l6 6-6 6",
+    copy: "M9 9h11v11H9zM5 15H4V4h11v1",
+    newGame: "M12 5v14M5 12h14",
+    games: "M9 6h11M9 12h11M9 18h11M4 6h.01M4 12h.01M4 18h.01",
+    vibrate: "M9 5h6v14H9zM5 8v8M19 8v8M2 10v4M22 10v4",
+    theme: "M12 21a9 9 0 1 0 0-18zM12 3a9 9 0 0 1 0 18",
+    screenOn: "M7 3h10v18H7zM11 18h2",
+    verdictGood: "M12 21a9 9 0 1 0 0-18a9 9 0 0 0 0 18zM8 12.5l3 3 5-6",
+    verdictDoubtful:
+        "M12 21a9 9 0 1 0 0-18a9 9 0 0 0 0 18zM9.5 9.3a2.6 2.6 0 1 1 3.6 2.4c-.7.3-1.1.9-1.1 1.6v.6M12 17.2v.1",
+    verdictBad: "M12 21a9 9 0 1 0 0-18a9 9 0 0 0 0 18zM9 9l6 6M15 9l-6 6",
+} as const;
+
+export type IconName = keyof typeof ICON_PATHS;
+
+const SVG_NS = "http://www.w3.org/2000/svg";
+
+/** Un pictogramme, décoratif (le nom est porté par son bouton). */
+export function icon(name: IconName): SVGSVGElement {
+    const svg = document.createElementNS(SVG_NS, "svg");
+    svg.setAttribute("class", `icon icon-${name}`);
+    svg.setAttribute("viewBox", "0 0 24 24");
+    svg.setAttribute("aria-hidden", "true");
+    const path = document.createElementNS(SVG_NS, "path");
+    path.setAttribute("d", ICON_PATHS[name]);
+    svg.append(path);
+    return svg;
+}

app/src/ui/settings.ts

@@ -0,0 +1,63 @@
+// Les réglages de l'application (menu) et ce qui en dépend, sans navigateur
+// (testé sous Node). Ils sont enregistrés à part de la partie, en JSON.
+//
+// Copyright (C) 2026 les auteurs d'Ustagammon.
+// Licence : GPLv3 ou ultérieure (voir LICENSE).
+
+export type Theme = "auto" | "light" | "dark";
+
+export interface Settings {
+    /** Vibrations aux moments forts (activées par défaut). */
+    readonly vibrations: boolean;
+    /** Écran maintenu allumé pendant une partie (activé par défaut). */
+    readonly keepScreenOn: boolean;
+    readonly theme: Theme;
+    /** Parties commencées : la consigne est longue pendant les trois
+     * premières, courte ensuite. */
+    readonly gamesStarted: number;
+}
+
+export const DEFAULT_SETTINGS: Settings = {
+    vibrations: true,
+    keepScreenOn: true,
+    theme: "auto",
+    gamesStarted: 0,
+};
+
+/** Nombre de parties pendant lesquelles la consigne garde sa forme longue. */
+export const LONG_PROMPT_GAMES = 3;
+
+/** Les réglages lus (JSON), complétés par les valeurs par défaut ; une
+ * valeur illisible garde sa valeur par défaut. */
+export function parseSettings(text: string | null): Settings {
+    let raw: Record<string, unknown> = {};
+    try {
+        const parsed: unknown = JSON.parse(text ?? "{}");
+        if (parsed !== null && typeof parsed === "object") {
+            raw = parsed as Record<string, unknown>;
+        }
+    } catch {
+        // Réglages illisibles : valeurs par défaut.
+    }
+    const bool = (key: "vibrations" | "keepScreenOn") =>
+        typeof raw[key] === "boolean" ? (raw[key] as boolean) : DEFAULT_SETTINGS[key];
+    const theme = raw.theme === "light" || raw.theme === "dark" ? raw.theme : "auto";
+    const games = raw.gamesStarted;
+    return {
+        vibrations: bool("vibrations"),
+        keepScreenOn: bool("keepScreenOn"),
+        theme,
+        gamesStarted:
+            typeof games === "number" && Number.isInteger(games) && games >= 0 ? games : 0,
+    };
+}
+
+/** Le thème suivant, dans l'ordre du menu : automatique, clair, sombre. */
+export function nextTheme(theme: Theme): Theme {
+    return theme === "auto" ? "light" : theme === "light" ? "dark" : "auto";
+}
+
+/** La consigne doit-elle encore être longue ? (La partie en cours compte.) */
+export function longPrompts(settings: Settings): boolean {
+    return settings.gamesStarted <= LONG_PROMPT_GAMES;
+}

app/src/ui/texts.ts

@@ -0,0 +1,160 @@
+// Les textes de l'interface (ADR 0007, point 5), en français, avec les mots
+// du glossaire (docs/glossaire/). Le code n'écrit aucun texte lui-même : il
+// prend tout ici.
+//
+// Copyright (C) 2026 les auteurs d'Ustagammon.
+// Licence : GPLv3 ou ultérieure (voir LICENSE).
+
+import type { ResultKind } from "../domain/game/engine.js";
+
+/** Un jet écrit « 6-4 ». */
+function roll(dice: readonly number[]): string {
+    return dice.join("-");
+}
+
+const RESULT_KIND: Record<ResultKind, string> = {
+    single: "la partie simple",
+    gammon: "un gammon",
+    backgammon: "un backgammon",
+};
+
+function points(n: number): string {
+    return n > 1 ? `${n} points` : `${n} point`;
+}
+
+/** Une consigne : sa forme longue (les trois premières parties) et sa forme
+ * courte (ensuite, et toujours en paysage, dans la bande du plateau). */
+export interface PromptText {
+    readonly long: string;
+    readonly short: string;
+}
+
+export const TEXTS = {
+    title: "Ustagammon",
+    boardLabel: "Plateau de backgammon",
+
+    // Boutons
+    roll: "Lancer les dés",
+    double: "Doubler",
+    take: "Prendre",
+    drop: "Passer",
+    confirm: "Jouer ce coup",
+    cancel: "Annuler",
+    skip: "Continuer",
+    replayTitle: "Revoir le dernier coup de l'ordinateur",
+    undoTitle: "Annuler le demi-coup",
+    newGame: "Nouvelle partie",
+    reviewGame: "Revoir la partie",
+    help: "Aide",
+    menu: "Menu",
+    fullscreen: "Plein écran",
+    exitFullscreen: "Quitter le plein écran",
+    back: "Retour à la partie",
+    close: "Fermer",
+    /** Ce que fait un toucher sur les dés (nom accessible de la zone). */
+    diceActions: {
+        roll: "Lancer les dés",
+        confirm: "Jouer ce coup",
+        skip: "Passer votre tour",
+    },
+    moveHint: "Le coup fini, touchez les dés pour le jouer.",
+
+    // Menu
+    helpAndGlossary: "Aide et glossaire",
+    theme: "Thème",
+    themes: { auto: "Automatique", light: "Clair", dark: "Sombre" },
+    vibrations: "Vibrations",
+    keepScreenOn: "Écran allumé pendant la partie",
+    newGameStarted: "Nouvelle partie commencée.",
+    resumeOld: "Reprendre l'ancienne",
+
+    // Bandeaux des joueurs et compte de points
+    you: "Vous",
+    computer: "Ordinateur",
+    yourTurn: "à vous de jouer",
+    computerTurn: "joue",
+    lead: (n: number) => `mène de ${n}`,
+    pipCountButton: (who: string, n: number) => `Compte de points de ${who} : ${n}`,
+    pipCountFile: "compte-de-points.md",
+    seeGlossary: "Voir le glossaire",
+
+    // Chargement
+    loading: "Chargement du moteur…",
+    engineFailed: (message: string) => `Le moteur n'a pas pu se charger : ${message}`,
+    actionFailed: (message: string) => `Erreur : ${message}`,
+
+    // Déroulement (ligne d'information)
+    opening: (player: number, computer: number) =>
+        `Jet d'ouverture : vous ${player}, l'ordinateur ${computer}. ${
+            player > computer ? "Vous commencez." : "L'ordinateur commence."
+        }`,
+    youCannotMove: (dice: readonly number[]) => `Aucun coup possible avec ${roll(dice)}.`,
+    computerMoved: (dice: readonly number[], move: string) =>
+        `L'ordinateur a joué ${roll(dice)} : ${move}.`,
+    computerCannotMove: (dice: readonly number[]) =>
+        `L'ordinateur ne peut pas jouer ${roll(dice)}.`,
+    computerTakes: (value: number) =>
+        `L'ordinateur prend : la partie vaut maintenant ${points(value)}.`,
+    youTook: (value: number) =>
+        `Vous prenez : la partie vaut maintenant ${points(value)}, et le videau est chez vous.`,
+    confirmDouble: (value: number) => `Doubler à ${value} ? L'ordinateur pourra prendre ou passer.`,
+
+    // Consignes
+    prompts: {
+        loading: { long: "", short: "Chargement…" },
+        yourRoll: {
+            long: "À vous : touchez les dés pour les lancer, ou le videau pour doubler.",
+            short: "À vous : lancez les dés.",
+        },
+        yourRollNoDouble: {
+            long: "À vous : touchez les dés pour les lancer.",
+            short: "À vous : lancez les dés.",
+        },
+        yourMove: (dice: readonly number[]): PromptText => ({
+            long: `Jouez ${roll(dice)} : touchez un pion, puis sa case d'arrivée.`,
+            short: `Jouez ${roll(dice)}.`,
+        }),
+        pickTarget: {
+            long: "Touchez une case d'arrivée en surbrillance, ou un autre pion.",
+            short: "Choisissez la case.",
+        },
+        confirmOrUndo: {
+            long: "Touchez vos dés pour jouer ce coup, ou « Annuler » pour reprendre un pion.",
+            short: "Touchez les dés pour jouer.",
+        },
+        stuck: {
+            long: "Aucun coup possible : touchez vos dés pour passer votre tour.",
+            short: "Aucun coup : touchez les dés.",
+        },
+        thinking: { long: "L'ordinateur réfléchit", short: "L'ordinateur réfléchit" },
+        computerDoubles: {
+            long: "L'ordinateur vous propose de doubler : prenez ou passez.",
+            short: "L'ordinateur double.",
+        },
+    } satisfies Record<string, PromptText | ((dice: readonly number[]) => PromptText)>,
+
+    // Fin de partie
+    gameOver: "Partie finie",
+    endOverline: "Fin de partie",
+    /** Titre du panneau de fin : qui gagne, et comment. */
+    endTitle: (winner: "player" | "computer", kind: ResultKind, dropped: boolean) => {
+        if (dropped) {
+            return winner === "player" ? "L'ordinateur passe" : "Vous passez";
+        }
+        return winner === "player"
+            ? `Vous gagnez ${RESULT_KIND[kind]}`
+            : `L'ordinateur gagne ${RESULT_KIND[kind]}`;
+    },
+    /** « 8 points pour lui, videau à 4. » */
+    endDetail: (winner: "player" | "computer", n: number, cube: number) =>
+        `${points(n)} pour ${winner === "player" ? "vous" : "lui"}${
+            cube > 1 ? `, videau à ${cube}` : ""
+        }.`,
+
+    // Aide
+    helpTitle: "Aide",
+    glossaryTitle: "Glossaire",
+    helpLoading: "Chargement de l'aide…",
+    helpFailed: "L'aide n'a pas pu se charger.",
+    about: "Ustagammon est un logiciel libre (GPLv3). L'ordinateur joue avec GNU Backgammon.",
+} as const;

app/tests/branches-sgf.test.ts

@@ -0,0 +1,172 @@
+// Tests du domaine : les branches d'une partie et son export SGF, sur des
+// journaux écrits à la main (sans moteur, sauf un faux pour une position de
+// départ particulière). La relecture des SGF par le vrai GNU Backgammon est
+// faite par tests/test_web.sh (tests/sgf/check.py).
+//
+// Copyright (C) 2026 les auteurs d'Ustagammon.
+// Licence : GPLv3 ou ultérieure (voir LICENSE).
+
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import { branches, switchToBranch } from "../src/domain/game/branches.js";
+import type { Board, Engine } from "../src/domain/game/engine.js";
+import {
+    appendEvent,
+    currentLine,
+    EMPTY_JOURNAL,
+    type GameJournal,
+    goBackTo,
+    type NewGameEvent,
+} from "../src/domain/game/events.js";
+import { parseHalfMoves, START_POSITION } from "../src/domain/game/position.js";
+import { exportSgf } from "../src/domain/game/sgf.js";
+
+function add(journal: GameJournal, ...events: NewGameEvent[]): GameJournal {
+    return events.reduce(appendEvent, journal);
+}
+
+const start: NewGameEvent = {
+    type: "GameStarted",
+    position: START_POSITION,
+    cube: { value: 1, owner: null },
+    firstTurn: null,
+};
+const move = (side: "player" | "computer", text: string, position = "P"): NewGameEvent => ({
+    type: "MovePlayed",
+    side,
+    halfMoves: parseHalfMoves(text),
+    position,
+});
+const roll = (side: "player" | "computer" | null, a: number, b: number): NewGameEvent => ({
+    type: "DiceRolled",
+    side,
+    roll: [a, b],
+});
+
+/**
+ * Une partie et ses branches :
+ *   1 début, 2 ouverture 3-1 (joueur), 3 coup 8/5 6/5, 4 dés ordinateur 6-4,
+ *   5 coup 24/18 13/9, 6 dés joueur 2-1 ;
+ * rejouée après 3 : 7 dés ordinateur 5-5 ; puis rejouée après 2 (même
+ * ouverture, autre coup) : 8 coup 24/23 13/10.
+ */
+function branchedGame(): GameJournal {
+    let j = add(
+        EMPTY_JOURNAL,
+        start,
+        roll(null, 3, 1),
+        move("player", "8/5 6/5"),
+        roll("computer", 6, 4),
+        move("computer", "24/18 13/9"),
+        roll("player", 2, 1),
+    );
+    j = add(goBackTo(j, "3"), roll("computer", 5, 5));
+    j = add(goBackTo(j, "2"), move("player", "24/23 13/10"));
+    return j;
+}
+
+test("les branches : feuilles de l'arbre, avec leur point de départ", () => {
+    const j = branchedGame();
+    const all = branches(j);
+    assert.deepEqual(
+        all.map((b) => [b.head, b.forkedFrom, b.forkMoveCount, b.moveCount, b.containsHead]),
+        [
+            ["6", null, 0, 2, false],
+            ["7", "3", 1, 1, false],
+            ["8", "2", 0, 1, true],
+        ],
+    );
+    assert.deepEqual(branches(EMPTY_JOURNAL), []);
+
+    // Passer d'une branche à l'autre ne perd rien.
+    const back = switchToBranch(j, "6");
+    assert.equal(back.events, j.events);
+    assert.deepEqual(
+        currentLine(back).map((e) => e.id),
+        ["1", "2", "3", "4", "5", "6"],
+    );
+    assert.throws(() => switchToBranch(j, "4"), /branche introuvable/);
+});
+
+test("une branche rejouée puis continuée garde son ordre de création", () => {
+    // La ligne d'origine continue après la création d'une branche : elle
+    // reste la première.
+    let j = add(EMPTY_JOURNAL, start, roll(null, 3, 1), move("player", "8/5 6/5"));
+    j = add(goBackTo(j, "2"), move("player", "24/23 13/10"));
+    j = add(goBackTo(j, "3"), roll("computer", 6, 4));
+    assert.deepEqual(
+        branches(j).map((b) => [b.head, b.forkedFrom]),
+        [
+            ["5", null],
+            ["4", "2"],
+        ],
+    );
+});
+
+/** Un faux moteur qui ne sait que décoder un plateau. */
+function boardEngine(board: Board): Engine {
+    return { board: async () => board } as unknown as Engine;
+}
+const noEngine = boardEngine({} as Board);
+const names = { playerName: "Vous", computerName: "Ordi]nateur", date: "2026-11-03" };
+
+test("SGF : les coups, les variantes, la branche courante d'abord", async () => {
+    const sgf = await exportSgf(noEngine, branchedGame(), names);
+    assert.equal(
+        sgf,
+        "(;FF[4]GM[6]CA[UTF-8]AP[Ustagammon]MI[length:0][game:0][ws:0][bs:0]" +
+            "PW[Ordi\\]nateur]PB[Vous]DT[2026-11-03](" +
+            // Branche courante : même ouverture, autre coup.
+            "\n;B[31ablo])(" +
+            // Ligne d'origine : 8/5 6/5 (B : 'x' - (case - 1)).
+            "\n;B[31qtst](" +
+            // Puis 24/18 13/9 de l'ordinateur (W : 'a' + (case - 1)), et
+            // des dés lancés, pas joués.
+            "\n;W[64xrmi]\n;PL[B]DI[21])(" +
+            "\n;PL[W]DI[55])))\n",
+    );
+});
+
+test("SGF : barre, sortie, coup impossible, videau et résultat", async () => {
+    const j = add(
+        EMPTY_JOURNAL,
+        start,
+        roll(null, 1, 6),
+        move("computer", "bar/19 6/off"),
+        { type: "CubeOffered", side: "player" },
+        { type: "CubeTaken", side: "computer" },
+        roll("player", 6, 6),
+        move("player", ""),
+        { type: "CubeOffered", side: "computer" },
+        { type: "CubeDropped", side: "player" },
+        { type: "GameEnded", winner: "computer", kind: "single", points: 2 },
+    );
+    const sgf = await exportSgf(noEngine, j, names);
+    assert.ok(sgf.includes("RE[W+2]"));
+    assert.ok(
+        sgf.endsWith("\n;W[16ysfz]\n;B[double]\n;W[take]\n;B[66]\n;W[double]\n;B[drop])\n"),
+        sgf,
+    );
+});
+
+test("SGF : une position de départ particulière est posée", async () => {
+    // Le joueur a la main : 2 pions sur sa case 1, 1 sur la barre ;
+    // l'ordinateur : 3 pions sur sa case 24. Videau à 4 chez l'ordinateur.
+    const points = (entries: Record<number, number>) =>
+        Array.from({ length: 24 }, (_, i) => entries[i + 1] ?? 0);
+    const engine = boardEngine({
+        onRoll: { points: points({ 1: 2 }), bar: 1, off: 12, pipCount: 27 },
+        opponent: { points: points({ 24: 3 }), bar: 0, off: 12, pipCount: 72 },
+        swappedPosition: "X",
+        result: null,
+    });
+    const j = add(EMPTY_JOURNAL, {
+        type: "GameStarted",
+        position: "ABC",
+        cube: { value: 4, owner: "computer" },
+        firstTurn: "player",
+    });
+    const sgf = await exportSgf(engine, j, names);
+    assert.ok(sgf.endsWith("\n;PL[B]AE[a:y]AW[x][x][x]AB[x][x][y]\n;CV[4]\n;CP[w])\n"), sgf);
+    await assert.rejects(exportSgf(noEngine, EMPTY_JOURNAL, names), /vide/);
+});

app/tests/engine-analysis.test.ts

@@ -0,0 +1,126 @@
+// L'adaptateur du moteur WebAssembly pour les niveaux, l'analyse et la
+// chance (étape 1a), sur le vrai moteur. La concordance des nombres avec
+// gnubg de bureau est vérifiée par tests/test_wasm_reference.sh ; ici, la
+// traduction des réponses en types du domaine.
+//
+// Copyright (C) 2026 les auteurs d'Ustagammon.
+// Licence : GPLv3 ou ultérieure (voir LICENSE).
+
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import { fileURLToPath } from "node:url";
+import { type EngineCube, LUCK_THRESHOLDS, SKILL_THRESHOLDS } from "../src/domain/game/engine.js";
+import { START_POSITION } from "../src/domain/game/position.js";
+import { loadNodeEngine } from "./support/node-engine.js";
+
+const centered: EngineCube = { value: 1, owner: "centered" };
+const middlegame = "mM/gATCw5+ABMA";
+
+test("ouverture 3-1 : 24/23 13/10 est une erreur très mauvaise, 8/5 6/5 le meilleur coup", async () => {
+    const engine = await loadNodeEngine();
+    const analysis = await engine.analyseMove(
+        START_POSITION,
+        centered,
+        [3, 1],
+        "4HPwATDgc+IBKA",
+        2,
+    );
+    assert.ok(analysis !== null);
+    assert.equal(analysis.moveCount, 16);
+    assert.equal(analysis.rank, 2);
+    assert.equal(analysis.played.notation, "24/23 13/10");
+    assert.equal(analysis.best.notation, "8/5 6/5");
+    assert.equal(analysis.skill, "veryBad");
+    assert.ok(
+        Math.abs(analysis.equityLoss - (analysis.played.equity - analysis.best.equity)) < 1e-6,
+    );
+    assert.ok(analysis.equityLoss < -SKILL_THRESHOLDS.veryBad);
+});
+
+test("sans coup possible, il n'y a rien à analyser", async () => {
+    const engine = await loadNodeEngine();
+    const position = "27YBBwAcz8EDQA";
+    assert.equal(await engine.analyseMove(position, centered, [5, 5], position, 0), null);
+});
+
+test("double/prend : passer est une erreur de l'adversaire, prendre n'en est pas une", async () => {
+    const engine = await loadNodeEngine();
+    const position = "6O5uAAC4uzsAAA";
+    const pass = await engine.analyseCube(position, centered, "pass", 2);
+    assert.equal(pass.analysed, true);
+    assert.equal(pass.skill, "bad");
+    assert.ok(pass.equities !== null && pass.equities.doubleTake < pass.equities.doublePass);
+    const take = await engine.analyseCube(position, centered, "take", 2);
+    assert.deepEqual([take.skill, take.equityLoss], ["none", 0]);
+    const opponentOwns = await engine.analyseCube(
+        position,
+        { value: 2, owner: "opponent" },
+        "noDouble",
+        2,
+    );
+    assert.deepEqual(opponentOwns, {
+        analysed: false,
+        equities: null,
+        equityLoss: 0,
+        skill: "none",
+    });
+});
+
+test("la chance d'un jet et sa catégorie", async () => {
+    const engine = await loadNodeEngine();
+    const opening = await engine.luck(START_POSITION, centered, [3, 1]);
+    assert.ok(Math.abs(opening.value - 0.2126) < 2e-3);
+    assert.equal(opening.rating, "none");
+    const doubleSix = await engine.luck(START_POSITION, centered, [6, 6]);
+    assert.ok(doubleSix.value > LUCK_THRESHOLDS.lucky);
+    assert.equal(doubleSix.rating, "lucky");
+});
+
+// Régression : sans cache vidé à chaque appel (engine.c, start_evaluation),
+// une analyse à 2 plis changeait la chance calculée ensuite (évaluations à
+// 0 pli des réseaux d'élagage restées dans le cache de gnubg).
+test("un résultat ne dépend pas des calculs faits avant", async () => {
+    const engine = await loadNodeEngine();
+    const before = await engine.luck(middlegame, centered, [6, 4]);
+    await engine.analyseCube(middlegame, centered, "noDouble", 2);
+    await engine.analyseMove(middlegame, centered, [6, 4], "mM/gATDGzuABMA", 2);
+    assert.deepEqual(await engine.luck(middlegame, centered, [6, 4]), before);
+});
+
+test("le niveau débutant joue toujours le même coup, différent du meilleur", async () => {
+    const engine = await loadNodeEngine();
+    for (let i = 0; i < 3; i++) {
+        const move = await engine.levelMove(middlegame, centered, [6, 4], "beginner");
+        assert.equal(move?.notation, "24/20 24/18");
+    }
+    assert.equal((await engine.levelMove(middlegame, centered, [6, 4], "2ply"))?.notation, "24/14");
+    const cube = await engine.levelCubeDecision("6O5uAAC4uzsAAA", centered, "beginner");
+    assert.equal(cube.double, false);
+});
+
+test("les seuils du domaine sont ceux du moteur", async () => {
+    const root = new URL("../../../", import.meta.url);
+    const module = await import(new URL("build/wasm/engine.mjs", root).href);
+    const wrapper = await import(new URL("web/engine-wasm.mjs", root).href);
+    const raw = await wrapper.loadEngine(
+        module.default,
+        fileURLToPath(new URL("build/wasm/", root)),
+    );
+    const { result } = raw.run(["levels"]) as {
+        result: {
+            levels: { name: string }[];
+            skill_thresholds: { doubtful: number; bad: number; very_bad: number };
+            luck_thresholds: { lucky: number; very_lucky: number };
+        };
+    };
+    const close = (a: number, b: number) => Math.abs(a - b) < 1e-6;
+    assert.ok(close(result.skill_thresholds.doubtful, SKILL_THRESHOLDS.doubtful));
+    assert.ok(close(result.skill_thresholds.bad, SKILL_THRESHOLDS.bad));
+    assert.ok(close(result.skill_thresholds.very_bad, SKILL_THRESHOLDS.veryBad));
+    assert.ok(close(result.luck_thresholds.lucky, LUCK_THRESHOLDS.lucky));
+    assert.ok(close(result.luck_thresholds.very_lucky, LUCK_THRESHOLDS.veryLucky));
+    assert.deepEqual(
+        result.levels.map((l) => l.name),
+        ["beginner", "casual", "intermediate", "advanced", "0ply", "1ply", "2ply", "3ply", "4ply"],
+    );
+});

app/tests/engine-stack.test.ts

@@ -0,0 +1,37 @@
+// Le moteur WebAssembly répond indéfiniment : une partie en navigateur
+// envoie des centaines de commandes au même moteur chargé une fois.
+//
+// Copyright (C) 2026 les auteurs d'Ustagammon.
+// Licence : GPLv3 ou ultérieure (voir LICENSE).
+//
+// Régression : callMain (Emscripten) laisse ses arguments sur la pile du
+// WebAssembly (64 Ko). Sans remise en place après chaque commande
+// (web/engine-wasm.mjs), la pile débordait vers la 500e commande : erreur
+// « memory access out of bounds » sous Node, moteur muet dans Firefox,
+// onglet planté dans Chromium.
+
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import { fileURLToPath } from "node:url";
+
+// Compilé dans build/web/tests/ : la racine du dépôt est trois dossiers plus
+// haut.
+const root = new URL("../../../", import.meta.url);
+
+interface RawEngine {
+    runText(args: string[]): { text: string; exitCode: number };
+}
+
+test("le moteur répond à 3000 commandes à la suite", async () => {
+    const module = await import(new URL("build/wasm/engine.mjs", root).href);
+    const wrapper = await import(new URL("web/engine-wasm.mjs", root).href);
+    const engine: RawEngine = await wrapper.loadEngine(
+        module.default,
+        fileURLToPath(new URL("build/wasm/", root)),
+    );
+    for (let i = 0; i < 3000; i++) {
+        const { text, exitCode } = engine.runText(["position", "4HPwATDgc/ABMA", "AQEAAAAAAAAA"]);
+        assert.equal(exitCode, 0, `commande ${i}`);
+        assert.match(text, /"pip_count": 167/, `commande ${i}`);
+    }
+});

app/tests/full-game.test.ts

@@ -0,0 +1,75 @@
+// Une partie complète sur le vrai moteur WebAssembly, avec des dés imposés :
+// l'ordinateur contre une stratégie simple du joueur (toujours le premier
+// coup légal, saisi demi-coup par demi-coup, et toujours prendre).
+//
+// Copyright (C) 2026 les auteurs d'Ustagammon.
+// Licence : GPLv3 ou ultérieure (voir LICENSE).
+
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import { Game } from "../src/domain/game/game.js";
+import type { DiceSource } from "../src/domain/game/roll.js";
+import { replay } from "../src/domain/game/state.js";
+import { loadNodeEngine } from "./support/node-engine.js";
+
+/** Des dés pseudo-aléatoires reproductibles (générateur congruentiel). */
+function seededDice(seed: number): DiceSource {
+    let state = seed;
+    return () => {
+        state = (state * 1103515245 + 12345) % 2147483648;
+        return 1 + (Math.floor(state / 65536) % 6);
+    };
+}
+
+/** Joue jusqu'à la fin ; renvoie le nombre d'actions. */
+async function playToTheEnd(game: Game, engine: Awaited<ReturnType<typeof loadNodeEngine>>) {
+    let actions = 0;
+    while (game.state.phase !== "over") {
+        assert.ok(++actions < 2000, "la partie ne finit pas");
+        const state = game.state;
+        if (state.turn === "computer" && state.phase === "doubled") {
+            game.take();
+        } else if (state.turn === "computer") {
+            await game.playComputerTurn();
+        } else if (state.phase === "rolling") {
+            await game.roll();
+        } else {
+            assert.ok(state.roll !== null);
+            const [first] = await engine.legalMoves(state.position, state.roll);
+            if (first === undefined) {
+                // Aucun coup possible : le joueur laisse passer son tour.
+                assert.equal(await game.cannotMove(), true);
+                await game.skipTurn();
+                continue;
+            }
+            for (const halfMove of first.halfMoves) {
+                assert.equal(await game.playHalfMove(halfMove), true);
+            }
+            assert.equal(game.moveComplete, true);
+            await game.confirmMove();
+        }
+    }
+    return actions;
+}
+
+for (const [seed, ply] of [
+    [1, 0],
+    [7, 2],
+] as const) {
+    test(`partie complète, dés ${seed}, ordinateur à ${ply} pli(s)`, async () => {
+        const engine = await loadNodeEngine();
+        const game = Game.start(engine, { dice: seededDice(seed), ply });
+        await playToTheEnd(game, engine);
+
+        const events = game.events;
+        const last = events.at(-1);
+        assert.equal(last?.type, "GameEnded");
+        const result = game.state.result;
+        assert.ok(result !== null);
+        assert.ok(result.points >= 1);
+        assert.ok(events.some((e) => e.type === "MovePlayed" && e.side === "player"));
+        assert.ok(events.some((e) => e.type === "MovePlayed" && e.side === "computer"));
+        // Rejouer le journal redonne le même état.
+        assert.deepEqual(replay(events), game.state);
+    });
+}

app/tests/game.test.ts

@@ -0,0 +1,405 @@
+// Tests unitaires du domaine « partie », avec un faux moteur (ADR 0007,
+// point 7) : journal, rejeu, branches, déroulement des tours et du videau.
+//
+// Copyright (C) 2026 les auteurs d'Ustagammon.
+// Licence : GPLv3 ou ultérieure (voir LICENSE).
+
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import type {
+    Board,
+    CubeDecision,
+    Engine,
+    HalfMovesCheck,
+    Move,
+} from "../src/domain/game/engine.js";
+import { appendEvent, currentLine, EMPTY_JOURNAL, goBackTo } from "../src/domain/game/events.js";
+import { Game } from "../src/domain/game/game.js";
+import { formatHalfMoves, parseHalfMoves, START_POSITION } from "../src/domain/game/position.js";
+import { fixedDice } from "../src/domain/game/roll.js";
+import { replay } from "../src/domain/game/state.js";
+
+/** Un faux moteur : chaque réponse est réglable, et les positions sont des
+ * textes sans signification. */
+function fakeEngine(overrides: Partial<Engine> = {}): Engine {
+    const move: Move = {
+        notation: "8/5 6/5",
+        halfMoves: parseHalfMoves("8/5 6/5"),
+        position: "AFTER",
+    };
+    const notOver: Board = {
+        onRoll: { points: [], bar: 0, off: 0, pipCount: 0 },
+        opponent: { points: [], bar: 0, off: 0, pipCount: 0 },
+        swappedPosition: "SWAPPED",
+        result: null,
+    };
+    const noDouble: CubeDecision = { available: true, double: false, take: true };
+    return {
+        legalMoves: async () => [move],
+        bestMove: async () => move,
+        cubeDecision: async () => noDouble,
+        checkHalfMoves: async (_position, _roll, halfMoves): Promise<HalfMovesCheck> => {
+            const text = formatHalfMoves(halfMoves);
+            if (text === "8/5") {
+                return { valid: true, complete: false, position: "HALF" };
+            }
+            if (text === "8/5 6/5") {
+                return { valid: true, complete: true, position: "AFTER" };
+            }
+            return { valid: false, complete: false, position: null };
+        },
+        board: async () => notOver,
+        levelMove: async () => move,
+        levelCubeDecision: async () => noDouble,
+        analyseMove: async () => null,
+        analyseCube: async () => ({
+            analysed: false,
+            equities: null,
+            equityLoss: 0,
+            skill: "none",
+        }),
+        luck: async () => ({ value: 0, rating: "none" }),
+        ...overrides,
+    };
+}
+
+test("le jet d'ouverture se relance en cas d'égalité, puis le plus fort dé commence", () => {
+    const game = Game.start(fakeEngine(), { dice: fixedDice([4, 4, 2, 5]) });
+    const rolls = game.events.filter((e) => e.type === "DiceRolled");
+    assert.deepEqual(
+        rolls.map((e) => e.roll),
+        [
+            [4, 4],
+            [2, 5],
+        ],
+    );
+    assert.equal(game.state.turn, "computer");
+    assert.equal(game.state.phase, "moving");
+    assert.deepEqual(game.state.roll, [2, 5]);
+    assert.equal(game.state.position, START_POSITION);
+});
+
+test("un coup se saisit demi-coup par demi-coup ; un demi-coup refusé ne change rien", async () => {
+    const game = Game.start(fakeEngine(), { dice: fixedDice([3, 1]) });
+    assert.equal(await game.playHalfMove({ from: 13, to: 12 }), false);
+    assert.equal(game.events.length, 2);
+    assert.equal(await game.playHalfMove({ from: 8, to: 5 }), true);
+    assert.equal(game.displayedPosition, "HALF");
+    assert.deepEqual(game.pendingHalfMoves, [{ from: 8, to: 5 }]);
+    assert.equal(await game.playHalfMove({ from: 6, to: 5 }), true);
+
+    // Coup complet : il attend la validation, hors du journal.
+    assert.equal(game.moveComplete, true);
+    assert.equal(game.displayedPosition, "AFTER");
+    assert.equal(game.events.length, 2);
+    assert.equal(game.state.turn, "player");
+    assert.deepEqual(await game.nextHalfMoves(), []);
+    assert.equal(await game.playHalfMove({ from: 8, to: 7 }), false);
+
+    await game.confirmMove();
+    const last = game.events.at(-1);
+    assert.equal(last?.type, "MovePlayed");
+    assert.deepEqual(game.pendingHalfMoves, []);
+    assert.equal(game.moveComplete, false);
+    assert.equal(game.state.turn, "computer");
+    assert.equal(game.state.phase, "rolling");
+    assert.equal(game.state.position, "SWAPPED");
+});
+
+test("un coup incomplet ne se valide pas", async () => {
+    const game = Game.start(fakeEngine(), { dice: fixedDice([3, 1]) });
+    await assert.rejects(game.confirmMove(), /pas complet/);
+    await game.playHalfMove({ from: 8, to: 5 });
+    await assert.rejects(game.confirmMove(), /pas complet/);
+    assert.equal(game.events.length, 2);
+});
+
+test("Annuler défait les demi-coups un par un, sans toucher au journal", async () => {
+    const game = Game.start(fakeEngine(), { dice: fixedDice([3, 1]) });
+    await game.playHalfMove({ from: 8, to: 5 });
+    await game.playHalfMove({ from: 6, to: 5 });
+    const journal = game.journal;
+
+    game.undoLastHalfMove();
+    assert.deepEqual(game.pendingHalfMoves, [{ from: 8, to: 5 }]);
+    assert.equal(game.moveComplete, false);
+    assert.equal(game.displayedPosition, "HALF");
+
+    game.undoLastHalfMove();
+    assert.deepEqual(game.pendingHalfMoves, []);
+    assert.equal(game.displayedPosition, START_POSITION);
+    game.undoLastHalfMove(); // rien à défaire : sans effet
+    assert.equal(game.journal, journal);
+
+    // Le coup se ressaisit ensuite normalement.
+    assert.equal(await game.playHalfMove({ from: 8, to: 5 }), true);
+    assert.equal(await game.playHalfMove({ from: 6, to: 5 }), true);
+    assert.equal(game.moveComplete, true);
+});
+
+test("les dés utilisés par les demi-coups saisis sont marqués", async () => {
+    const game = Game.start(fakeEngine(), { dice: fixedDice([3, 1]) });
+    assert.deepEqual(game.diceToPlay, [
+        { value: 3, used: false },
+        { value: 1, used: false },
+    ]);
+    await game.playHalfMove({ from: 8, to: 5 });
+    assert.deepEqual(game.diceToPlay, [
+        { value: 3, used: true },
+        { value: 1, used: false },
+    ]);
+    await game.playHalfMove({ from: 6, to: 5 });
+    assert.deepEqual(
+        game.diceToPlay.map((d) => d.used),
+        [true, true],
+    );
+    await game.confirmMove();
+    assert.deepEqual(game.diceToPlay, []);
+});
+
+test("un double donne quatre dés, marqués un par un ; une sortie prend le plus petit dé suffisant", async () => {
+    const engine = fakeEngine({
+        checkHalfMoves: async () => ({ valid: true, complete: false, position: "P" }),
+    });
+    const double = Game.start(engine, {
+        dice: fixedDice([2, 2]),
+        setup: { position: "X", firstTurn: "player" },
+    });
+    await double.roll();
+    assert.equal(double.diceToPlay.length, 4);
+    await double.playHalfMove({ from: 13, to: 11 });
+    await double.playHalfMove({ from: 11, to: 9 });
+    assert.deepEqual(
+        double.diceToPlay.map((d) => d.used),
+        [true, true, false, false],
+    );
+
+    const bearOff = Game.start(engine, {
+        dice: fixedDice([6, 4]),
+        setup: { position: "X", firstTurn: "player" },
+    });
+    await bearOff.roll();
+    // 3/off : le 4 suffit, le 6 reste.
+    await bearOff.playHalfMove({ from: 3, to: 0 });
+    assert.deepEqual(bearOff.diceToPlay, [
+        { value: 6, used: false },
+        { value: 4, used: true },
+    ]);
+    // 6/2 demande le 4 : la sortie a donc pris le 6.
+    await bearOff.playHalfMove({ from: 6, to: 2 });
+    assert.deepEqual(
+        bearOff.diceToPlay.map((d) => d.used),
+        [true, true],
+    );
+});
+
+test("sans coup possible, le tour passe quand le joueur le laisse passer", async () => {
+    const engine = fakeEngine({ legalMoves: async () => [] });
+    const game = Game.start(engine, {
+        dice: fixedDice([6, 6]),
+        setup: { position: "BLOCKED", firstTurn: "player" },
+    });
+    await game.roll();
+    // Le tour ne passe pas tout seul : le jet reste à « jouer ».
+    assert.equal(game.state.phase, "moving");
+    assert.equal(game.state.turn, "player");
+    assert.equal(await game.cannotMove(), true);
+    await game.skipTurn();
+    const last = game.events.at(-1);
+    assert.ok(last?.type === "MovePlayed");
+    assert.deepEqual(last.halfMoves, []);
+    assert.equal(game.state.turn, "computer");
+});
+
+test("le joueur ne peut pas laisser passer son tour s'il a un coup", async () => {
+    const engine = fakeEngine({
+        legalMoves: async () => [
+            { notation: "8/5", halfMoves: [{ from: 8, to: 5 }], position: "P" },
+        ],
+    });
+    const game = Game.start(engine, {
+        dice: fixedDice([3, 1]),
+        setup: { position: "X", firstTurn: "player" },
+    });
+    await game.roll();
+    assert.equal(await game.cannotMove(), false);
+    await assert.rejects(game.skipTurn(), /coup possible/);
+    assert.equal(game.state.phase, "moving");
+});
+
+test("l'ordinateur double si le moteur le recommande ; le joueur prend", async () => {
+    const engine = fakeEngine({
+        cubeDecision: async () => ({ available: true, double: true, take: true }),
+    });
+    const game = Game.start(engine, { setup: { position: "X", firstTurn: "computer" } });
+    await game.playComputerTurn();
+    assert.equal(game.state.phase, "doubled");
+    game.take();
+    assert.deepEqual(game.state.cube, { value: 2, owner: "player" });
+    assert.equal(game.state.phase, "rolling");
+    assert.equal(game.state.turn, "computer");
+});
+
+test("le joueur passe : il perd la partie à la valeur d'avant le double", async () => {
+    const engine = fakeEngine({
+        cubeDecision: async () => ({ available: true, double: true, take: true }),
+    });
+    const game = Game.start(engine, {
+        setup: { position: "X", firstTurn: "computer", cube: { value: 2, owner: "computer" } },
+    });
+    await game.playComputerTurn();
+    game.drop();
+    assert.equal(game.state.phase, "over");
+    assert.deepEqual(game.state.result, { winner: "computer", kind: "single", points: 2 });
+});
+
+test("le joueur double : l'ordinateur passe si le moteur le dit", async () => {
+    const engine = fakeEngine({
+        cubeDecision: async () => ({ available: true, double: true, take: false }),
+    });
+    const game = Game.start(engine, { setup: { position: "X", firstTurn: "player" } });
+    await game.double();
+    assert.deepEqual(
+        game.events.slice(-3).map((e) => e.type),
+        ["CubeOffered", "CubeDropped", "GameEnded"],
+    );
+    assert.deepEqual(game.state.result, { winner: "player", kind: "single", points: 1 });
+});
+
+test("le joueur ne peut pas doubler si le videau est chez l'ordinateur", async () => {
+    const engine = fakeEngine({
+        cubeDecision: async () => ({ available: false, double: false, take: true }),
+    });
+    const game = Game.start(engine, {
+        setup: { position: "X", firstTurn: "player", cube: { value: 2, owner: "computer" } },
+    });
+    await assert.rejects(game.double(), /videau/);
+    assert.equal(game.events.length, 1);
+});
+
+test("la fin de partie vient du moteur : gagnant, sorte et points", async () => {
+    const engine = fakeEngine({
+        board: async () => ({
+            onRoll: { points: [], bar: 0, off: 15, pipCount: 0 },
+            opponent: { points: [], bar: 0, off: 0, pipCount: 100 },
+            swappedPosition: "SWAPPED",
+            result: { winner: "onRoll", kind: "gammon", points: 2 },
+        }),
+    });
+    const game = Game.start(engine, {
+        setup: { position: "X", firstTurn: "computer" },
+        dice: fixedDice([2, 1]),
+    });
+    await game.playComputerTurn();
+    assert.deepEqual(game.state.result, { winner: "computer", kind: "gammon", points: 2 });
+    assert.throws(() => game.take(), /action impossible/);
+});
+
+test("annuler repart du parent ; l'action suivante ouvre une branche", async () => {
+    const game = Game.start(fakeEngine(), { dice: fixedDice([3, 1, 6, 5, 4, 2]) });
+    await game.playHalfMove({ from: 8, to: 5 });
+    await game.playHalfMove({ from: 6, to: 5 });
+    await game.confirmMove();
+    const played = game.events.at(-1);
+    assert.equal(played?.type, "MovePlayed");
+
+    game.undo();
+    assert.equal(game.state.phase, "moving");
+    assert.equal(game.state.turn, "player");
+    await game.playHalfMove({ from: 8, to: 5 });
+    await game.playHalfMove({ from: 6, to: 5 });
+    await game.confirmMove();
+
+    // Deux coups accrochés au même jet : l'ancien reste dans le journal.
+    const moves = game.journal.events.filter((e) => e.type === "MovePlayed");
+    assert.equal(moves.length, 2);
+    assert.equal(moves[0]?.parent, moves[1]?.parent);
+    assert.notEqual(game.events.at(-1)?.id, played?.id);
+
+    game.goBackTo(played?.id ?? "");
+    assert.equal(game.events.at(-1)?.id, played?.id);
+});
+
+test("les événements sont immuables et versionnés ; le rejeu est déterministe", () => {
+    let journal = appendEvent(EMPTY_JOURNAL, {
+        type: "GameStarted",
+        position: START_POSITION,
+        cube: { value: 1, owner: null },
+        firstTurn: null,
+    });
+    journal = appendEvent(journal, { type: "DiceRolled", side: null, roll: [5, 2] });
+    const [started, rolled] = currentLine(journal);
+    assert.equal(started?.version, 1);
+    assert.equal(started?.parent, null);
+    assert.equal(rolled?.parent, started?.id);
+    assert.throws(() => {
+        (rolled as { parent: string | null }).parent = null;
+    }, TypeError);
+    assert.deepEqual(replay(currentLine(journal)), replay(currentLine(journal)));
+    assert.equal(replay(currentLine(goBackTo(journal, "1"))).phase, "opening");
+});
+
+test("lecture et écriture des demi-coups", () => {
+    assert.deepEqual(parseHalfMoves("bar/22 6/off"), [
+        { from: 25, to: 22 },
+        { from: 6, to: 0 },
+    ]);
+    assert.equal(formatHalfMoves(parseHalfMoves(" 8/5  6/5 ")), "8/5 6/5");
+    assert.throws(() => parseHalfMoves("8-5"), /mal formé/);
+    assert.throws(() => parseHalfMoves("30/5"), /case invalide/);
+});
+
+test("une partie se reprend depuis son journal ; un journal d'une autre version est refusé", async () => {
+    const game = Game.start(fakeEngine(), { dice: fixedDice([3, 1]) });
+    await game.playHalfMove({ from: 8, to: 5 });
+    await game.playHalfMove({ from: 6, to: 5 });
+    await game.confirmMove();
+    const saved = JSON.parse(JSON.stringify(game.journal));
+
+    const resumed = Game.resume(fakeEngine(), saved);
+    assert.deepEqual(resumed.state, game.state);
+    assert.deepEqual(resumed.events, game.events);
+
+    const other = { ...saved, events: saved.events.map((e: object) => ({ ...e, version: 99 })) };
+    assert.throws(() => Game.resume(fakeEngine(), other), /version/);
+    assert.throws(() => Game.resume(fakeEngine(), EMPTY_JOURNAL), /mal formé/);
+    assert.throws(() => Game.resume(fakeEngine(), { ...saved, head: "inconnu" }), /introuvable/);
+});
+
+test("le droit de doubler vient du moteur, seulement avant de lancer les dés", async () => {
+    let available = true;
+    const engine = fakeEngine({
+        cubeDecision: async () => ({ available, double: false, take: true }),
+    });
+    const game = Game.start(engine, {
+        dice: fixedDice([3, 1]),
+        setup: { position: "X", firstTurn: "player" },
+    });
+    assert.equal(await game.canDouble(), true);
+    available = false;
+    assert.equal(await game.canDouble(), false);
+    available = true;
+    await game.roll();
+    assert.equal(game.state.phase, "moving");
+    assert.equal(await game.canDouble(), false);
+});
+
+test("le plateau affiché est donné du point de vue de chaque camp", async () => {
+    const side = (pipCount: number) => ({ points: [], bar: 0, off: 0, pipCount });
+    const engine = fakeEngine({
+        board: async () => ({
+            onRoll: side(1),
+            opponent: side(2),
+            swappedPosition: "SWAPPED",
+            result: null,
+        }),
+    });
+    const playerTurn = Game.start(engine, { setup: { position: "X", firstTurn: "player" } });
+    const sides = await playerTurn.displayedBoard();
+    assert.equal(sides.player.pipCount, 1);
+    assert.equal(sides.computer.pipCount, 2);
+    const computerTurn = Game.start(engine, { setup: { position: "X", firstTurn: "computer" } });
+    const swapped = await computerTurn.displayedBoard();
+    assert.equal(swapped.player.pipCount, 2);
+    assert.equal(swapped.computer.pipCount, 1);
+});

app/tests/layout.test.ts

@@ -0,0 +1,271 @@
+// Tests de la révision UX qui se vérifient sans navigateur : géométrie du
+// plateau selon l'écran, vibrations, réglages, compte de points, plateau
+// gardé pour le chargement, et règles de la charte vérifiables dans le code.
+//
+// Copyright (C) 2026 les auteurs d'Ustagammon.
+// Licence : GPLv3 ou ultérieure (voir LICENSE).
+
+import assert from "node:assert/strict";
+import { readdirSync, readFileSync, statSync } from "node:fs";
+import { test } from "node:test";
+import { createSettingsStore } from "../src/storage/settings-store.js";
+import { OPENING_BOARDS, pipLead } from "../src/ui/board-model.js";
+import { BOARD_HEIGHT, boardGeometry, MAX_STACK, stackY } from "../src/ui/geometry.js";
+import { createHaptics, HAPTIC_PATTERNS } from "../src/ui/haptics.js";
+import { ICON_PATHS } from "../src/ui/icons.js";
+import {
+    DEFAULT_SETTINGS,
+    LONG_PROMPT_GAMES,
+    longPrompts,
+    nextTheme,
+    parseSettings,
+} from "../src/ui/settings.js";
+
+const root = new URL("../../../", import.meta.url);
+const read = (path: string) => readFileSync(new URL(path, root), "utf8");
+
+// --------------------------------------------------------------- Géométrie
+
+/** Les écrans en paysage de la recette : largeur et hauteur en pixels,
+ * dont 844 × 320 (Chrome garde sa barre d'adresse) et un rapport plus large
+ * encore. */
+const LANDSCAPES: [number, number][] = [
+    [915, 412],
+    [844, 390],
+    [844, 320],
+    [740, 360],
+    [800, 308],
+];
+
+test("géométrie en portrait : les mesures du plateau d'origine", () => {
+    const g = boardGeometry("portrait", 640 / 520, 396 / 640);
+    assert.equal(g.width, 640);
+    assert.equal(g.pointWidth, 44);
+    assert.equal(g.radius, 20);
+    assert.equal(g.step, 42);
+    assert.equal(g.trayLeft + g.tray + g.frame, 640);
+    // Numéros d'au moins 12 px à l'écran, à 412 px de large.
+    assert.ok(g.numberSize * (396 / 640) >= 12, `numéros de ${g.numberSize} unités`);
+});
+
+test("géométrie en paysage : le plateau remplit l'écran, flèches de 44 px et pions de 22 px au moins", () => {
+    for (const [width, height] of LANDSCAPES) {
+        const px = height / BOARD_HEIGHT;
+        const g = boardGeometry("landscape", width / height, px);
+        const where = `${width}x${height}`;
+        assert.ok(Math.abs(g.width / g.height - width / height) < 0.01, `${where} : proportions`);
+        // Les colonnes, la barre et les flèches occupent toute la largeur.
+        assert.ok(Math.abs(g.trayLeft + g.tray + g.frame - g.width) < 1e-9, `${where} : largeur`);
+        assert.ok(g.pointWidth * px >= 44, `${where} : flèches de ${g.pointWidth * px} px`);
+        assert.ok(2 * g.radius * px >= 22, `${where} : pions de ${2 * g.radius * px} px`);
+        assert.ok(g.numberSize * px >= 12, `${where} : numéros de ${g.numberSize * px} px`);
+        assert.ok(g.bandFont * px >= 13, `${where} : consigne de ${g.bandFont * px} px`);
+        assert.ok(g.chipFont * px >= 13, `${where} : comptes de ${g.chipFont * px} px`);
+        assert.ok(g.target * px >= 44, `${where} : cibles de ${g.target * px} px`);
+        assert.ok(g.cubeFont * px >= 13, `${where} : videau en ${g.cubeFont * px} px`);
+        assert.ok(g.countFont * px >= 13, `${where} : nombres des piles en ${g.countFont * px} px`);
+        assert.ok(g.cube <= g.left - 8, `${where} : videau plus large que sa colonne`);
+        assert.ok(g.left - 4 >= g.target - 4, `${where} : colonne de commandes trop étroite`);
+        // Les numéros tiennent dans le cadre.
+        assert.ok(g.numberSize < g.edge, `${where} : numéros hors du cadre`);
+    }
+});
+
+test("une pile de cinq pions ne déborde pas dans la bande centrale (dés, consigne)", () => {
+    const cases = [
+        boardGeometry("portrait", 640 / 520, 0.62),
+        ...[1.9, 2.16, 2.6].map((aspect) => boardGeometry("landscape", aspect, 0.615)),
+    ];
+    for (const g of cases) {
+        const band = g.height / 2 - g.die / 2;
+        const last = stackY(g, true, MAX_STACK - 1) + g.radius;
+        assert.ok(last <= band, `${g.layout} ${g.width} : pion jusqu'à ${last}, dés dès ${band}`);
+    }
+});
+
+test("en paysage, les pions de la barre s'arrêtent avant les pastilles des comptes", () => {
+    for (const [width, height] of LANDSCAPES) {
+        const g = boardGeometry("landscape", width / height, height / BOARD_HEIGHT);
+        const lastOffset = g.radius + 4 + (g.barStack - 1) * g.step + g.radius;
+        const chipEdge = g.height / 2 - (g.edge + 4 + g.chipHeight);
+        assert.ok(g.barStack >= 1);
+        assert.ok(lastOffset <= chipEdge, `${width}x${height} : ${lastOffset} > ${chipEdge}`);
+    }
+});
+
+// -------------------------------------------------------------- Vibrations
+
+test("vibrations : les motifs de la charte, et rien quand elles sont coupées", () => {
+    const calls: number[][] = [];
+    let on = true;
+    const haptic = createHaptics(
+        (pattern) => {
+            calls.push(pattern);
+            return true;
+        },
+        () => on,
+    );
+    haptic("checkerPlaced");
+    haptic("checkerHit");
+    haptic("computerDoubles");
+    haptic("gameWon");
+    haptic("gameLost");
+    assert.deepEqual(calls, [[12], [25, 40, 25], [40, 60, 40], [30, 50, 30, 50, 60], [60]]);
+    on = false;
+    haptic("checkerHit");
+    assert.equal(calls.length, 5);
+    // Sans navigator.vibrate, ou si le navigateur refuse : aucune erreur.
+    assert.doesNotThrow(() => createHaptics(undefined, () => true)("gameWon"));
+    const refusing = createHaptics(
+        () => {
+            throw new Error("refusé");
+        },
+        () => true,
+    );
+    assert.doesNotThrow(() => refusing("gameWon"));
+    // Aucun motif ne dépasse 60 ms par impulsion (interaction.md).
+    for (const pattern of Object.values(HAPTIC_PATTERNS)) {
+        assert.ok(pattern.every((ms) => ms > 0 && ms <= 60));
+    }
+});
+
+// ---------------------------------------------------------------- Réglages
+
+test("réglages : valeurs par défaut, lecture tolérante, thème en boucle", () => {
+    assert.deepEqual(parseSettings(null), DEFAULT_SETTINGS);
+    assert.equal(DEFAULT_SETTINGS.vibrations, true);
+    assert.equal(DEFAULT_SETTINGS.keepScreenOn, true);
+    assert.deepEqual(parseSettings("pas du JSON"), DEFAULT_SETTINGS);
+    assert.deepEqual(parseSettings('{"vibrations": false, "theme": "dark", "gamesStarted": 4}'), {
+        ...DEFAULT_SETTINGS,
+        vibrations: false,
+        theme: "dark",
+        gamesStarted: 4,
+    });
+    assert.deepEqual(parseSettings('{"vibrations": "non", "theme": "rose", "gamesStarted": -1}'), {
+        ...DEFAULT_SETTINGS,
+    });
+    assert.equal(nextTheme("auto"), "light");
+    assert.equal(nextTheme("light"), "dark");
+    assert.equal(nextTheme("dark"), "auto");
+});
+
+test("consigne longue pendant les trois premières parties, courte ensuite", () => {
+    assert.equal(LONG_PROMPT_GAMES, 3);
+    for (const games of [0, 1, 2, 3]) {
+        assert.equal(longPrompts({ ...DEFAULT_SETTINGS, gamesStarted: games }), true);
+    }
+    assert.equal(longPrompts({ ...DEFAULT_SETTINGS, gamesStarted: 4 }), false);
+});
+
+test("stockage des réglages et du dernier plateau affiché", () => {
+    const data = new Map<string, string>();
+    const store = createSettingsStore({
+        getItem: (key) => data.get(key) ?? null,
+        setItem: (key, value) => void data.set(key, value),
+    });
+    assert.equal(store.loadSettings(), null);
+    store.saveSettings('{"vibrations":false}');
+    assert.equal(store.loadSettings(), '{"vibrations":false}');
+    assert.equal(store.loadBoard(), null);
+    const board = { sides: OPENING_BOARDS, cube: { value: 2, owner: "player" as const } };
+    store.saveBoard(board);
+    assert.deepEqual(store.loadBoard(), board);
+    // Un plateau abîmé est ignoré : la position de départ sera dessinée.
+    data.set("ustagammon.last-board", '{"sides": {"player": {"points": [1]}}}');
+    assert.equal(store.loadBoard(), null);
+    const full = createSettingsStore({
+        getItem: () => {
+            throw new Error("interdit");
+        },
+        setItem: () => {
+            throw new Error("plein");
+        },
+    });
+    assert.doesNotThrow(() => full.saveBoard(board));
+    assert.equal(full.loadBoard(), null);
+    assert.equal(full.loadSettings(), null);
+});
+
+// ------------------------------------------------------- Compte de points
+
+test("compte de points : le plus petit mène, de l'écart", () => {
+    assert.deepEqual(pipLead({ player: 136, computer: 128 }), { leader: "computer", by: 8 });
+    assert.deepEqual(pipLead({ player: 100, computer: 128 }), { leader: "player", by: 28 });
+    assert.deepEqual(pipLead({ player: 167, computer: 167 }), { leader: null, by: 0 });
+    // La position de départ : 15 pions, 167 points chacun.
+    for (const side of [OPENING_BOARDS.player, OPENING_BOARDS.computer]) {
+        assert.equal(
+            side.points.reduce((a, b) => a + b, 0),
+            15,
+        );
+        assert.equal(
+            side.points.reduce((sum, n, i) => sum + n * (i + 1), 0),
+            side.pipCount,
+        );
+    }
+});
+
+// ------------------------------------------------------------------ Charte
+
+/** Les fichiers .ts d'un dossier, récursivement. */
+function sources(dir: string): string[] {
+    const url = new URL(dir, root);
+    return readdirSync(url).flatMap((name) => {
+        const path = `${dir}${name}`;
+        return statSync(new URL(path, root)).isDirectory() ? sources(`${path}/`) : [path];
+    });
+}
+
+test("aucune boîte native du navigateur (confirm, alert, prompt) dans l'application", () => {
+    for (const path of sources("app/src/")) {
+        const text = read(path);
+        assert.doesNotMatch(
+            text,
+            /\b(window\.)?(confirm|alert|prompt)\s*\(/,
+            `${path} appelle une boîte native`,
+        );
+    }
+});
+
+test("les deux blocs du thème sombre de app.css sont identiques", () => {
+    const css = read("web/app.css");
+    const block = (start: string) => {
+        const from = css.indexOf(start);
+        assert.ok(from >= 0, `bloc ${start} absent`);
+        const body = css.slice(css.indexOf("{", from + start.length - 1) + 1);
+        return body
+            .slice(0, body.indexOf("}"))
+            .split("\n")
+            .map((line) => line.trim())
+            .filter(Boolean);
+    };
+    assert.deepEqual(
+        block(':root:not([data-theme="light"]) {'),
+        block(':root[data-theme="dark"] {'),
+    );
+});
+
+test("aucun style en ligne ni attribut style dans la page et le code (CSP)", () => {
+    assert.doesNotMatch(read("web/index.html"), /\sstyle=|<style/);
+    for (const path of sources("app/src/")) {
+        assert.doesNotMatch(read(path), /setAttribute\(\s*"style"|\.style\./, path);
+    }
+});
+
+test("pictogrammes : le jeu de la charte, en tracés SVG", () => {
+    for (const name of [
+        "menu",
+        "help",
+        "fullscreen",
+        "exitFullscreen",
+        "undo",
+        "replay",
+        "close",
+    ]) {
+        assert.ok(name in ICON_PATHS, `pictogramme ${name} absent`);
+    }
+    for (const d of Object.values(ICON_PATHS)) {
+        assert.match(d, /^M[\d.\s,a-zA-Z-]+$/);
+    }
+});

app/tests/move-steps.test.ts

@@ -0,0 +1,146 @@
+// Un coup demi-coup par demi-coup (Game.lastMoveSteps), sur le vrai moteur
+// WebAssembly : les plateaux intermédiaires que l'interface anime, et les
+// pions frappés qu'elle signale.
+//
+// Copyright (C) 2026 les auteurs d'Ustagammon.
+// Licence : GPLv3 ou ultérieure (voir LICENSE).
+
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import type { BoardSide } from "../src/domain/game/engine.js";
+import { Game } from "../src/domain/game/game.js";
+import {
+    BAR,
+    formatHalfMoves,
+    type PositionId,
+    parseHalfMoves,
+} from "../src/domain/game/position.js";
+import { fixedDice } from "../src/domain/game/roll.js";
+import { loadNodeEngine } from "./support/node-engine.js";
+
+// Le joueur, au trait : un pion sur sa case 13, quatorze sur sa case 6.
+// L'ordinateur : un blot sur la case 10 du joueur (sa case 15), quatorze sur
+// sa case 6.
+const PLAYER_CAN_HIT = "4P8HEADg/wcEAA";
+
+// Le joueur, au trait : un pion sur la barre, quatorze sur sa case 6.
+// L'ordinateur : un blot sur la case 21 du joueur (sa case 4), quatorze sur
+// sa case 6.
+const PLAYER_ON_BAR = "yP8PAADg/wcAQA";
+
+// Le joueur, au trait, n'a plus que deux pions, sur ses cases 6 et 5.
+const PLAYER_ALMOST_DONE = "/38AAABQAAAAAA";
+
+/** Une partie où le joueur, au trait, joue le jet dice à la position. */
+async function playerMove(position: PositionId, dice: [number, number], move: string) {
+    const engine = await loadNodeEngine();
+    const game = Game.start(engine, {
+        dice: fixedDice(dice),
+        setup: { position, firstTurn: "player" },
+    });
+    await game.roll();
+    for (const halfMove of parseHalfMoves(move)) {
+        assert.equal(await game.playHalfMove(halfMove), true, formatHalfMoves([halfMove]));
+    }
+    await game.confirmMove();
+    return game;
+}
+
+/** Le nombre de pions d'un camp sur une case (1 à 24), sur la barre ou sortis. */
+function at(side: BoardSide, point: number | "bar" | "off"): number {
+    if (point === "bar") {
+        return side.bar;
+    }
+    return point === "off" ? side.off : (side.points[point - 1] ?? 0);
+}
+
+test("un coup simple : un plateau par demi-coup, sans pion frappé", async () => {
+    const engine = await loadNodeEngine();
+    const game = Game.start(engine, { dice: fixedDice([3, 1]) });
+    for (const halfMove of parseHalfMoves("8/5 6/5")) {
+        await game.playHalfMove(halfMove);
+    }
+    await game.confirmMove();
+    const steps = await game.lastMoveSteps();
+    assert.ok(steps !== null);
+    assert.equal(steps.side, "player");
+    assert.equal(formatHalfMoves(steps.halfMoves), "8/5 6/5");
+    assert.deepEqual(steps.hits, [false, false]);
+    const counts = steps.boards.map((b) => [at(b.player, 8), at(b.player, 6), at(b.player, 5)]);
+    assert.deepEqual(counts, [
+        [3, 5, 0],
+        [2, 5, 1],
+        [2, 4, 2],
+    ]);
+    // Le dernier plateau est celui de la partie après le coup.
+    assert.deepEqual(steps.boards[2], await game.displayedBoard());
+});
+
+test("un pion frappé part sur la barre au demi-coup qui le frappe", async () => {
+    const game = await playerMove(PLAYER_CAN_HIT, [3, 1], "13/10 10/9");
+    const steps = await game.lastMoveSteps();
+    assert.ok(steps !== null);
+    assert.deepEqual(steps.hits, [true, false]);
+    const bar = steps.boards.map((b) => at(b.computer, "bar"));
+    assert.deepEqual(bar, [0, 1, 1]);
+    // Le blot était sur la case 10 du joueur, la case 15 de l'ordinateur.
+    assert.equal(at(steps.boards[0]?.computer as BoardSide, 15), 1);
+    assert.equal(at(steps.boards[1]?.computer as BoardSide, 15), 0);
+    assert.equal(at(steps.boards[2]?.player as BoardSide, 9), 1);
+});
+
+test("un coup depuis la barre, qui frappe en rentrant", async () => {
+    const game = await playerMove(PLAYER_ON_BAR, [4, 2], "bar/21 6/4");
+    const steps = await game.lastMoveSteps();
+    assert.ok(steps !== null);
+    assert.deepEqual(steps.hits, [true, false]);
+    assert.deepEqual(
+        steps.boards.map((b) => [at(b.player, "bar"), at(b.player, 21), at(b.computer, "bar")]),
+        [
+            [1, 0, 0],
+            [0, 1, 1],
+            [0, 1, 1],
+        ],
+    );
+});
+
+test("une sortie de pions, jusqu'à la fin de la partie", async () => {
+    const game = await playerMove(PLAYER_ALMOST_DONE, [6, 5], "6/off 5/off");
+    assert.equal(game.state.phase, "over");
+    const steps = await game.lastMoveSteps();
+    assert.ok(steps !== null);
+    assert.deepEqual(steps.hits, [false, false]);
+    assert.deepEqual(
+        steps.boards.map((b) => at(b.player, "off")),
+        [13, 14, 15],
+    );
+});
+
+test("le coup de l'ordinateur, vu dans sa propre numérotation", async () => {
+    const engine = await loadNodeEngine();
+    // Vous commencez avec 3-1, puis l'ordinateur tire 6-4.
+    const game = Game.start(engine, { dice: fixedDice([3, 1, 6, 4]) });
+    for (const halfMove of parseHalfMoves("8/5 6/5")) {
+        await game.playHalfMove(halfMove);
+    }
+    await game.confirmMove();
+    await game.playComputerTurn();
+    const steps = await game.lastMoveSteps();
+    assert.ok(steps !== null);
+    assert.equal(steps.side, "computer");
+    assert.equal(steps.boards.length, steps.halfMoves.length + 1);
+    // Chaque demi-coup déplace un pion de l'ordinateur de sa case de départ.
+    for (const [i, h] of steps.halfMoves.entries()) {
+        const from = h.from === BAR ? "bar" : h.from;
+        const before = steps.boards[i]?.computer as BoardSide;
+        const after = steps.boards[i + 1]?.computer as BoardSide;
+        assert.equal(at(after, from), at(before, from) - 1);
+    }
+    assert.deepEqual(steps.boards.at(-1), await game.displayedBoard());
+});
+
+test("avant le premier coup, il n'y a rien à montrer", async () => {
+    const engine = await loadNodeEngine();
+    const game = Game.start(engine, { dice: fixedDice([3, 1]) });
+    assert.equal(await game.lastMoveSteps(), null);
+});

app/tests/next-half-moves.test.ts

@@ -0,0 +1,65 @@
+// Ce que l'interface propose au joueur, sur le vrai moteur WebAssembly : les
+// demi-coups possibles (mis en évidence quand il touche un pion) et le
+// plateau affiché pendant la saisie d'un coup.
+//
+// Copyright (C) 2026 les auteurs d'Ustagammon.
+// Licence : GPLv3 ou ultérieure (voir LICENSE).
+
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import { Game } from "../src/domain/game/game.js";
+import { formatHalfMoves, type HalfMove } from "../src/domain/game/position.js";
+import { fixedDice } from "../src/domain/game/roll.js";
+import { loadNodeEngine } from "./support/node-engine.js";
+
+// Le joueur, au trait, n'a plus que deux pions, sur ses cases 6 et 5
+// (même position que dans les étapes du scénario).
+const PLAYER_ALMOST_DONE = "/38AAABQAAAAAA";
+
+/** Les demi-coups en notation, triés : « 13/10 13/12… ». */
+function text(halfMoves: readonly HalfMove[]): string {
+    return halfMoves
+        .map((h) => formatHalfMoves([h]))
+        .sort()
+        .join(" ");
+}
+
+test("au départ avec 3-1 : chaque pion jouable, avec chaque dé", async () => {
+    const engine = await loadNodeEngine();
+    const game = Game.start(engine, { dice: fixedDice([3, 1]) });
+    assert.equal(text(await game.nextHalfMoves()), "13/10 24/21 24/23 6/3 6/5 8/5 8/7");
+    // 13/12 manque : votre case 12 est tenue par l'ordinateur. Après 8/5,
+    // il ne reste que le 1.
+    assert.equal(await game.playHalfMove({ from: 8, to: 5 }), true);
+    assert.equal(text(await game.nextHalfMoves()), "24/23 5/4 6/5 8/7");
+});
+
+test("en fin de partie, les demi-coups vers la sortie viennent du moteur", async () => {
+    const engine = await loadNodeEngine();
+    const game = Game.start(engine, {
+        dice: fixedDice([6, 5]),
+        setup: { position: PLAYER_ALMOST_DONE, firstTurn: "player" },
+    });
+    await game.roll();
+    assert.equal(text(await game.nextHalfMoves()), "5/off 6/1 6/off");
+});
+
+test("hors du tour de jeu du joueur, rien n'est proposé", async () => {
+    const engine = await loadNodeEngine();
+    const game = Game.start(engine, { dice: fixedDice([1, 3]) });
+    assert.equal(game.state.turn, "computer");
+    assert.deepEqual(await game.nextHalfMoves(), []);
+});
+
+test("le plateau affiché suit les demi-coups saisis", async () => {
+    const engine = await loadNodeEngine();
+    const game = Game.start(engine, { dice: fixedDice([3, 1]) });
+    const before = await game.displayedBoard();
+    assert.equal(before.player.points[7], 3);
+    assert.equal(before.computer.points[23], 2);
+    await game.playHalfMove({ from: 8, to: 5 });
+    const after = await game.displayedBoard();
+    assert.equal(after.player.points[7], 2);
+    assert.equal(after.player.points[4], 1);
+    assert.equal(after.player.pipCount, before.player.pipCount - 3);
+});

app/tests/steps/jouer-une-partie.steps.ts

@@ -0,0 +1,483 @@
+// Étapes du scénario docs/scenarios/jouer-une-partie.feature (ADR 0008) :
+// elles pilotent le domaine, branché sur le vrai moteur WebAssembly, avec des
+// dés imposés pour que chaque exécution soit identique.
+//
+// Copyright (C) 2026 les auteurs d'Ustagammon.
+// Licence : GPLv3 ou ultérieure (voir LICENSE).
+
+import assert from "node:assert/strict";
+import { Before, BeforeAll, Given, setDefaultTimeout, Then, When } from "@cucumber/cucumber";
+import type { BoardSide, Engine, Move } from "../../src/domain/game/engine.js";
+import type { GameEvent } from "../../src/domain/game/events.js";
+import { Game, type MoveSteps, STANDARD_PLY } from "../../src/domain/game/game.js";
+import {
+    BAR,
+    OFF,
+    type PositionId,
+    parseHalfMoves,
+    START_POSITION,
+} from "../../src/domain/game/position.js";
+import { fixedDice } from "../../src/domain/game/roll.js";
+import type { GameState } from "../../src/domain/game/state.js";
+import { boardModel, pipLead } from "../../src/ui/board-model.js";
+import { loadNodeEngine } from "../support/node-engine.js";
+
+// Le chargement du moteur prend une à deux secondes sur le PC de 2011.
+setDefaultTimeout(30_000);
+
+// Course où l'ordinateur, au trait, mène nettement : le moteur lui recommande
+// de doubler, et au joueur de prendre (position de référence
+// « cube-double-take », tests/reference/positions.json).
+const COMPUTER_DOUBLES = "6O5uAAC4uzsAAA";
+
+// Le joueur, au trait, n'a plus que deux pions, sur ses cases 6 et 5 ;
+// l'ordinateur n'en a sorti aucun.
+const PLAYER_ALMOST_DONE = "/38AAABQAAAAAA";
+
+// Le joueur, au trait : un pion sur la barre, quatorze sur sa case 6.
+// L'ordinateur tient ses six premières cases (vos cases 19 à 24), où votre
+// pion devrait rentrer.
+const PLAYER_SHUT_OUT = "t+0OAADg/wcAQA";
+
+// L'ordinateur, au trait : un pion sur sa case 13, quatorze sur sa case 1.
+// Vous : un blot sur votre case 15 (sa case 10), deux pions sur votre case
+// 13 (sa case 12), douze sur votre case 6. Avec 3-1, son seul coup permis
+// est 13/10* 10/9 : il frappe votre blot.
+const COMPUTER_MUST_HIT = "4P8BEwD/PwAEAA";
+
+let engine: Engine;
+let game: Game;
+let accepted: boolean;
+let positionBefore: PositionId;
+let computerTurn: { before: GameState; ms: number };
+let computerMove: MoveSteps;
+
+/** Le nombre de pions d'un camp à une case d'un demi-coup (barre, sortie ou
+ * 1 à 24, dans sa numérotation). */
+function checkersAt(side: BoardSide, point: number): number {
+    if (point === BAR) {
+        return side.bar;
+    }
+    return point === OFF ? side.off : (side.points[point - 1] ?? 0);
+}
+
+BeforeAll(async () => {
+    engine = await loadNodeEngine();
+});
+
+Before(() => {
+    accepted = false;
+});
+
+/** Joue les demi-coups un par un ; au premier refus, le coup est abandonné. */
+async function play(text: string): Promise<boolean> {
+    positionBefore = game.displayedPosition;
+    for (const halfMove of parseHalfMoves(text)) {
+        if (!(await game.playHalfMove(halfMove))) {
+            game.cancelHalfMoves();
+            return false;
+        }
+    }
+    return true;
+}
+
+/** Joue les demi-coups puis valide le coup, complet. */
+async function playAndConfirm(text: string): Promise<boolean> {
+    if (!(await play(text))) {
+        return false;
+    }
+    await game.confirmMove();
+    return true;
+}
+
+function lastEvent(): GameEvent {
+    const event = game.events.at(-1);
+    assert.ok(event !== undefined, "aucun événement");
+    return event;
+}
+
+// ------------------------------------------------------- Commencer une partie
+
+When("vous commencez une nouvelle partie", () => {
+    // Égalité au premier jet d'ouverture, puis 5 contre 2.
+    game = Game.start(engine, { dice: fixedDice([4, 4, 5, 2]) });
+});
+
+Then("les pions sont en position de départ", async () => {
+    assert.equal(game.state.position, START_POSITION);
+    const board = await engine.board(game.state.position, { value: 1, owner: "centered" });
+    const start = Array.from({ length: 24 }, (_, i) => ({ 5: 5, 7: 3, 12: 5, 23: 2 })[i] ?? 0);
+    for (const side of [board.onRoll, board.opponent]) {
+        assert.deepEqual(side.points, start);
+        assert.equal(side.bar, 0);
+        assert.equal(side.off, 0);
+    }
+});
+
+Then("le premier jet de dés désigne qui commence", () => {
+    const opening = game.events.filter((e) => e.type === "DiceRolled" && e.side === null);
+    const last = opening.at(-1);
+    assert.ok(last?.type === "DiceRolled");
+    // Les jets d'ouverture égaux ont été relancés.
+    for (const tie of opening.slice(0, -1)) {
+        assert.ok(tie.type === "DiceRolled" && tie.roll[0] === tie.roll[1]);
+    }
+    const [playerDie, computerDie] = last.roll;
+    assert.notEqual(playerDie, computerDie);
+    assert.equal(game.state.turn, playerDie > computerDie ? "player" : "computer");
+    assert.equal(game.state.phase, "moving");
+    assert.deepEqual(game.state.roll, last.roll);
+});
+
+// ------------------------------------------------------------ Jouer un coup
+
+Given("c'est à vous de jouer avec le jet {int}-{int}", (first: number, second: number) => {
+    // Le jet d'ouverture : votre dé, puis celui de l'ordinateur.
+    game = Game.start(engine, { dice: fixedDice([first, second]) });
+    assert.equal(game.state.turn, "player");
+    assert.deepEqual(game.state.roll, [first, second]);
+});
+
+When(/^vous jouez (.+)$/, async (text: string) => {
+    accepted = await play(text);
+});
+
+When(/^vous essayez de jouer (.+)$/, async (text: string) => {
+    accepted = await play(text);
+});
+
+Then("votre coup est accepté", () => {
+    assert.equal(accepted, true);
+    const event = lastEvent();
+    assert.ok(event.type === "MovePlayed");
+    assert.equal(event.side, "player");
+});
+
+Then("c'est ensuite au tour de l'ordinateur", () => {
+    assert.equal(game.state.turn, "computer");
+    assert.equal(game.state.phase, "rolling");
+});
+
+Then("votre coup est refusé", () => {
+    assert.equal(accepted, false);
+});
+
+Then("la position n'a pas changé", () => {
+    assert.equal(game.displayedPosition, positionBefore);
+    assert.equal(game.state.position, positionBefore);
+    assert.equal(game.state.turn, "player");
+    assert.equal(game.state.phase, "moving");
+    assert.equal(lastEvent().type, "DiceRolled");
+});
+
+// ------------------------------------------ Valider ou reprendre son coup
+
+Then("votre coup attend votre validation", async () => {
+    assert.equal(accepted, true);
+    assert.equal(game.moveComplete, true);
+    // Rien n'est encore dans le journal, et plus aucun pion ne bouge.
+    assert.equal(lastEvent().type, "DiceRolled");
+    assert.equal(game.state.turn, "player");
+    assert.deepEqual(await game.nextHalfMoves(), []);
+});
+
+Then("vos dés sont tous marqués comme joués", () => {
+    assert.ok(game.diceToPlay.length > 0);
+    assert.ok(game.diceToPlay.every((die) => die.used));
+});
+
+When("vous validez votre coup", async () => {
+    await game.confirmMove();
+});
+
+Then("seul votre {int} est marqué comme joué", (value: number) => {
+    const used = game.diceToPlay.filter((die) => die.used);
+    assert.deepEqual(
+        used.map((die) => die.value),
+        [value],
+    );
+});
+
+Then("chacun de vos pions jouables n'a plus qu'une case d'arrivée", async () => {
+    const halfMoves = await game.nextHalfMoves();
+    assert.ok(halfMoves.length > 0);
+    const starts = halfMoves.map((h) => h.from);
+    assert.equal(new Set(starts).size, starts.length);
+});
+
+When("vous annulez le dernier demi-coup", () => {
+    game.undoLastHalfMove();
+});
+
+Then("il ne reste de joué que {word}", (text: string) => {
+    assert.deepEqual(game.pendingHalfMoves, parseHalfMoves(text));
+    assert.equal(game.moveComplete, false);
+    assert.equal(lastEvent().type, "DiceRolled");
+});
+
+Then("aucun de vos dés n'est marqué comme joué", () => {
+    assert.ok(game.diceToPlay.length > 0);
+    assert.ok(game.diceToPlay.every((die) => !die.used));
+});
+
+// ------------------------------------------------------- L'ordinateur joue
+
+Given("c'est au tour de l'ordinateur", async () => {
+    // Vous commencez avec 3-1, puis l'ordinateur tirera 6-4.
+    game = Game.start(engine, { dice: fixedDice([3, 1, 6, 4]) });
+    assert.equal(await playAndConfirm("8/5 6/5"), true);
+    assert.equal(game.state.turn, "computer");
+});
+
+When("ses dés sont tirés", async () => {
+    const before = game.state;
+    const start = performance.now();
+    await game.playComputerTurn();
+    computerTurn = { before, ms: performance.now() - start };
+});
+
+Then(
+    "il joue le coup recommandé par le moteur en moins de {int} secondes",
+    async (seconds: number) => {
+        const rolled = game.events.findLast((e) => e.type === "DiceRolled");
+        const played = lastEvent();
+        assert.ok(rolled?.type === "DiceRolled" && rolled.side === "computer");
+        assert.ok(played.type === "MovePlayed" && played.side === "computer");
+        const best: Move | null = await engine.bestMove(
+            computerTurn.before.position,
+            { value: 1, owner: "centered" },
+            rolled.roll,
+            STANDARD_PLY,
+        );
+        assert.ok(best !== null);
+        assert.deepEqual(played.halfMoves, best.halfMoves);
+        assert.ok(
+            computerTurn.ms < seconds * 1000,
+            `tour de l'ordinateur en ${Math.round(computerTurn.ms)} ms`,
+        );
+    },
+);
+
+// ------------------------------------------------- Aucun coup possible
+
+Given("votre pion sur la barre ne peut pas rentrer", () => {
+    // Les six cases où il pourrait rentrer sont tenues par l'ordinateur.
+    game = Game.start(engine, {
+        setup: { position: PLAYER_SHUT_OUT, firstTurn: "player" },
+        dice: fixedDice([6, 5]),
+    });
+});
+
+When("vous lancez les dés", async () => {
+    await game.roll();
+});
+
+Then("aucun coup n'est possible avec votre jet", async () => {
+    assert.deepEqual(game.state.roll, [6, 5]);
+    assert.equal(await game.cannotMove(), true);
+    assert.deepEqual(await game.nextHalfMoves(), []);
+});
+
+Then("c'est toujours à vous", () => {
+    assert.equal(game.state.turn, "player");
+    assert.equal(game.state.phase, "moving");
+    assert.equal(lastEvent().type, "DiceRolled");
+});
+
+When("vous laissez passer votre tour", async () => {
+    await game.skipTurn();
+    const event = lastEvent();
+    assert.ok(event.type === "MovePlayed" && event.side === "player");
+    assert.deepEqual(event.halfMoves, []);
+});
+
+// ---------------------------------------------- Voir le coup de l'ordinateur
+
+Given("un de vos pions est seul à portée de l'ordinateur", () => {
+    // L'ordinateur tirera 3-1. Le videau est chez vous : il ne peut pas
+    // doubler, il joue.
+    game = Game.start(engine, {
+        setup: {
+            position: COMPUTER_MUST_HIT,
+            firstTurn: "computer",
+            cube: { value: 2, owner: "player" },
+        },
+        dice: fixedDice([3, 1]),
+    });
+});
+
+When("l'ordinateur a joué", async () => {
+    await game.playComputerTurn();
+    const played = lastEvent();
+    assert.ok(played.type === "MovePlayed" && played.side === "computer");
+    const steps = await game.lastMoveSteps();
+    assert.ok(steps !== null);
+    computerMove = steps;
+});
+
+Then("son coup vous est montré case par case", async () => {
+    const { side, halfMoves, boards } = computerMove;
+    assert.equal(side, "computer");
+    assert.ok(halfMoves.length > 0);
+    assert.equal(boards.length, halfMoves.length + 1);
+    // Chaque plateau ne diffère du précédent que d'un pion de l'ordinateur,
+    // parti de la case de départ du demi-coup pour sa case d'arrivée.
+    for (const [i, h] of halfMoves.entries()) {
+        const before = boards[i]?.computer;
+        const after = boards[i + 1]?.computer;
+        assert.ok(before !== undefined && after !== undefined);
+        assert.equal(checkersAt(after, h.from), checkersAt(before, h.from) - 1);
+        assert.equal(checkersAt(after, h.to), checkersAt(before, h.to) + 1);
+    }
+    // Le dernier est le plateau de la partie.
+    assert.deepEqual(boards.at(-1), await game.displayedBoard());
+});
+
+Then("votre pion frappé part sur la barre", () => {
+    const { boards, hits } = computerMove;
+    const hit = hits.indexOf(true);
+    assert.ok(hit >= 0, "aucun pion frappé");
+    assert.equal(boards[hit]?.player.bar, 0);
+    assert.equal(boards[hit + 1]?.player.bar, 1);
+});
+
+Then("vous pouvez revoir son coup", async () => {
+    assert.deepEqual(await game.lastMoveSteps(), computerMove);
+});
+
+// ------------------------------------------------------- Compte de points
+
+// Les bandeaux lisent le compte de points du plateau donné par le moteur ;
+// qui mène se calcule dans l'interface (board-model.ts).
+
+async function pips() {
+    return boardModel(await game.displayedBoard()).pipCount;
+}
+
+Then("chaque camp a un compte de points de {int}", async (n: number) => {
+    assert.deepEqual(await pips(), { player: n, computer: n });
+});
+
+Then("personne ne mène la course", async () => {
+    assert.equal(pipLead(await pips()).leader, null);
+});
+
+Then("vous menez la course de {int}", async (n: number) => {
+    assert.deepEqual(pipLead(await pips()), { leader: "player", by: n });
+});
+
+// ------------------------------------------------------------------ Videau
+
+// La confirmation elle-même est une question de l'interface (une fenêtre
+// « Doubler à 2 ? ») : ces étapes vérifient que rien n'est proposé tant que
+// vous n'avez pas confirmé, et ce qui suit votre confirmation.
+
+Given("vous pouvez doubler", async () => {
+    game = Game.start(engine, { setup: { position: START_POSITION, firstTurn: "player" } });
+    assert.equal(game.state.phase, "rolling");
+});
+
+When("vous demandez à doubler", async () => {
+    assert.equal(await game.canDouble(), true);
+});
+
+When("vous changez d'avis", () => {
+    // Vous refermez la question : la partie n'est pas touchée.
+});
+
+Then("rien n'est proposé à l'ordinateur", () => {
+    assert.ok(!game.events.some((e) => e.type === "CubeOffered"));
+    assert.equal(game.state.phase, "rolling");
+    assert.equal(game.state.turn, "player");
+    assert.deepEqual(game.state.cube, { value: 1, owner: null });
+});
+
+When("vous confirmez", async () => {
+    await game.double();
+});
+
+Then("l'ordinateur prend ou passe, comme le recommande le moteur", async () => {
+    const decision = await engine.cubeDecision(
+        START_POSITION,
+        { value: 1, owner: "centered" },
+        STANDARD_PLY,
+    );
+    const offered = game.events.findIndex((e) => e.type === "CubeOffered");
+    const answer = game.events[offered + 1];
+    assert.ok(offered >= 0 && answer !== undefined);
+    if (decision.take) {
+        assert.equal(answer.type, "CubeTaken");
+        assert.deepEqual(game.state.cube, { value: 2, owner: "computer" });
+    } else {
+        assert.equal(answer.type, "CubeDropped");
+        assert.deepEqual(game.state.result, { winner: "player", kind: "single", points: 1 });
+    }
+});
+
+Given("l'ordinateur vous propose de doubler", async () => {
+    game = Game.start(engine, { setup: { position: COMPUTER_DOUBLES, firstTurn: "computer" } });
+    await game.playComputerTurn();
+    const event = lastEvent();
+    assert.ok(event.type === "CubeOffered" && event.side === "computer");
+    assert.equal(game.state.phase, "doubled");
+});
+
+When("vous prenez", () => {
+    game.take();
+});
+
+When("vous passez", () => {
+    game.drop();
+});
+
+Then("la partie continue à valeur doublée", () => {
+    assert.equal(game.state.cube.value, 2);
+    assert.equal(game.state.result, null);
+    assert.equal(game.state.phase, "rolling");
+});
+
+Then("le videau est de votre côté : vous seul pourrez redoubler", async () => {
+    const { cube, position } = game.state;
+    assert.equal(cube.owner, "player");
+    // Le moteur le confirme : l'ordinateur, au trait, ne peut plus doubler…
+    const computer = await engine.cubeDecision(
+        position,
+        { value: 2, owner: "opponent" },
+        STANDARD_PLY,
+    );
+    assert.equal(computer.available, false);
+    // … alors que vous, à votre tour, le pourrez.
+    const board = await engine.board(position, { value: 2, owner: "opponent" });
+    const player = await engine.cubeDecision(
+        board.swappedPosition,
+        { value: 2, owner: "onRoll" },
+        STANDARD_PLY,
+    );
+    assert.equal(player.available, true);
+});
+
+Then("la partie s'arrête", () => {
+    assert.equal(game.state.phase, "over");
+    assert.equal(lastEvent().type, "GameEnded");
+});
+
+Then("vous perdez la partie à sa valeur d'avant le double", () => {
+    assert.deepEqual(game.state.result, { winner: "computer", kind: "single", points: 1 });
+});
+
+// --------------------------------------------------------- Fin de partie
+
+Given("un joueur a sorti tous ses pions", async () => {
+    game = Game.start(engine, {
+        setup: { position: PLAYER_ALMOST_DONE, firstTurn: "player" },
+        dice: fixedDice([6, 5]),
+    });
+    await game.roll();
+    assert.equal(await playAndConfirm("6/off 5/off"), true);
+});
+
+Then("le résultat indique le gagnant et les points gagnés", () => {
+    // Gammon (l'ordinateur n'a sorti aucun pion), mais 1 point seulement :
+    // règle Jacoby, le videau n'a pas bougé.
+    assert.deepEqual(game.state.result, { winner: "player", kind: "gammon", points: 1 });
+});

app/tests/steps/mes-parties.steps.ts

@@ -0,0 +1,203 @@
+// Étapes du scénario docs/scenarios/mes-parties.feature (ADR 0008) : elles
+// pilotent le domaine, branché sur le vrai moteur WebAssembly, et le
+// stockage des parties sur un localStorage simulé en mémoire. Fermer puis
+// rouvrir l'application revient à rouvrir ce stockage et à reprendre la
+// partie en cours, comme main.ts au démarrage.
+//
+// Copyright (C) 2026 les auteurs d'Ustagammon.
+// Licence : GPLv3 ou ultérieure (voir LICENSE).
+
+import assert from "node:assert/strict";
+import { Before, Given, Then, When } from "@cucumber/cucumber";
+import type { Engine } from "../../src/domain/game/engine.js";
+import type { GameJournal, MovePlayed } from "../../src/domain/game/events.js";
+import { Game } from "../../src/domain/game/game.js";
+import { exportSgf } from "../../src/domain/game/sgf.js";
+import type { GameLibrary } from "../../src/storage/game-library.js";
+import type { KeyValueStorage } from "../../src/storage/key-value-backend.js";
+import { memoryStorage, openGameLibrary } from "../../src/storage/open-library.js";
+import { loadNodeEngine } from "../support/node-engine.js";
+import { playMoves, seededDice } from "../support/play.js";
+
+let engine: Engine;
+let storage: KeyValueStorage;
+let library: GameLibrary;
+let game: Game;
+let shownId: string;
+/** Les parties jouées, dans l'ordre : identifiant et journal laissé. */
+let played: { id: string; journal: GameJournal }[];
+/** La partie d'origine, avant « Rejouer d'ici ». */
+let original: { head: string; ids: string[] };
+/** Le coup du joueur d'où l'on rejoue. */
+let replayed: MovePlayed;
+let sgf: string;
+let nextSeed = 1;
+
+Before(async () => {
+    engine = await loadNodeEngine();
+    storage = memoryStorage();
+    library = (await openGameLibrary({ localStorage: storage })).library;
+    played = [];
+});
+
+/** Commence une partie, comme l'application : un nouvel identifiant. */
+function startGame(): void {
+    game = Game.start(engine, { dice: seededDice(nextSeed), ply: 0 });
+    shownId = `partie-${nextSeed++}`;
+}
+
+/** Joue des coups, en enregistrant après chacun comme l'application. */
+async function play(moves: number): Promise<void> {
+    for (let i = 0; i < moves; i++) {
+        await playMoves(game, engine, 1);
+        await library.save(shownId, game.journal, { level: "0ply" });
+    }
+}
+
+async function reopen(): Promise<void> {
+    library = (await openGameLibrary({ localStorage: storage })).library;
+    const saved = await library.current();
+    assert.ok(saved !== null, "aucune partie en cours");
+    game = Game.resume(engine, saved.journal, { ply: 0 });
+    shownId = saved.summary.id;
+}
+
+/** « Rejouer d'ici » : revient juste avant le deuxième coup du joueur (ses
+ * dés déjà lancés). Renvoie ce coup. */
+function goBackToSecondMove(): MovePlayed {
+    original = { head: game.journal.head as string, ids: game.events.map((e) => e.id) };
+    const second = game.events.filter(
+        (e): e is MovePlayed => e.type === "MovePlayed" && e.side === "player",
+    )[1];
+    assert.ok(second?.parent != null, "moins de deux coups du joueur");
+    game.goBackTo(second.parent);
+    return second;
+}
+
+/** Joue, avec les mêmes dés, un coup légal qui mène ailleurs que first. */
+async function playAnotherMove(first: MovePlayed): Promise<void> {
+    const state = game.state;
+    assert.ok(state.roll !== null);
+    const moves = await engine.legalMoves(state.position, state.roll);
+    // Move.position est vue de celui qui joue, MovePlayed.position de son
+    // adversaire : on compare les demi-coups.
+    const same = (m: (typeof moves)[number]) =>
+        m.halfMoves.length === first.halfMoves.length &&
+        m.halfMoves.every((h, i) => h.from === first.halfMoves[i]?.from);
+    const move = moves.find((m) => !same(m));
+    assert.ok(move !== undefined, "un seul coup possible");
+    for (const halfMove of move.halfMoves) {
+        assert.ok(await game.playHalfMove(halfMove));
+    }
+    await game.confirmMove();
+    await library.save(shownId, game.journal, { level: "0ply" });
+    const last = game.events.at(-1);
+    assert.ok(last?.type === "MovePlayed" && last.position !== first.position);
+}
+
+// ------------------------------------------- Reprendre une partie parmi plusieurs
+
+Given("vous avez joué deux parties, l'une après l'autre", async () => {
+    for (const moves of [5, 3]) {
+        startGame();
+        await play(moves);
+        played.push({ id: shownId, journal: game.journal });
+    }
+});
+
+When("vous fermez l'application puis la rouvrez", reopen);
+
+Then("la dernière partie jouée est à l'écran", () => {
+    const last = played.at(-1);
+    assert.equal(shownId, last?.id);
+    assert.deepEqual(game.journal, last?.journal);
+});
+
+Then("« Mes parties » montre vos deux parties, la dernière jouée en premier", async () => {
+    const ids = (await library.list()).map((s) => s.id);
+    assert.deepEqual(ids, played.map((p) => p.id).reverse());
+});
+
+When("vous reprenez la première partie", async () => {
+    await library.setCurrent(played[0]?.id as string);
+    await reopen();
+});
+
+Then("elle est à l'écran, telle que vous l'aviez laissée", () => {
+    assert.equal(shownId, played[0]?.id);
+    assert.deepEqual(game.journal, played[0]?.journal);
+});
+
+// ------------------------------------------- Rejouer d'ici sans perdre l'original
+
+Given("vous avez joué plusieurs coups", async () => {
+    startGame();
+    await play(8);
+});
+
+When("vous rejouez d'ici à partir de votre deuxième coup", () => {
+    // Le retour seul : le coup suivant ouvrira la branche.
+    replayed = goBackToSecondMove();
+});
+
+When("vous choisissez un autre coup", async () => {
+    await playAnotherMove(replayed);
+});
+
+Then("la partie a deux branches", () => {
+    assert.equal(game.branches.length, 2);
+});
+
+Then("la partie d'origine est intacte", () => {
+    const origin = game.branches.find((b) => b.forkedFrom === null);
+    assert.equal(origin?.head, original.head);
+    const copy = Game.resume(engine, game.journal);
+    copy.switchBranch(original.head);
+    assert.deepEqual(
+        copy.events.map((e) => e.id),
+        original.ids,
+    );
+});
+
+Then("vous êtes sur la nouvelle branche", () => {
+    const current = game.branches.find((b) => b.containsHead);
+    assert.ok(current !== undefined && current.forkedFrom !== null);
+    assert.equal(current.head, game.journal.head);
+});
+
+Then("vous pouvez revenir à la partie d'origine, au coup près", () => {
+    const branch = game.branches.find((b) => b.forkedFrom === null);
+    assert.ok(branch !== undefined);
+    game.switchBranch(branch.head);
+    assert.deepEqual(
+        game.events.map((e) => e.id),
+        original.ids,
+    );
+});
+
+// ------------------------------------------------------------ Exporter une partie
+
+Given("vous avez rejoué d'ici une autre suite", async () => {
+    await playAnotherMove(goBackToSecondMove());
+    await play(2);
+});
+
+When("vous exportez la partie", async () => {
+    sgf = await exportSgf(engine, game.journal, {
+        playerName: "Vous",
+        computerName: "Ustagammon",
+    });
+});
+
+Then("vous obtenez un fichier SGF de GNU Backgammon", () => {
+    assert.ok(sgf.startsWith("(;FF[4]GM[6]"), sgf.slice(0, 40));
+    assert.ok(sgf.trimEnd().endsWith(")"));
+});
+
+Then("il contient vos coups, et l'autre branche en variante", () => {
+    // Un nœud par coup joué, toutes branches comprises (B ou W, puis les
+    // dés), et deux variantes à l'embranchement.
+    const moves = game.journal.events.filter((e) => e.type === "MovePlayed").length;
+    assert.equal(sgf.match(/;[BW]\[\d\d/g)?.length, moves);
+    assert.equal(sgf.match(/\(\n;/g)?.length, 2);
+});

app/tests/steps/regler-l-application.steps.ts

@@ -0,0 +1,165 @@
+// Étapes du scénario docs/scenarios/regler-l-application.feature (ADR 0008) :
+// la partie reprise passe par le domaine et le vrai moteur, et par le même
+// enregistrement que l'application ; les réglages et les vibrations par les
+// modules de l'interface qui les portent (settings.ts, haptics.ts).
+//
+// Copyright (C) 2026 les auteurs d'Ustagammon.
+// Licence : GPLv3 ou ultérieure (voir LICENSE).
+
+import assert from "node:assert/strict";
+import { BeforeAll, Given, setDefaultTimeout, Then, When } from "@cucumber/cucumber";
+import type { Engine } from "../../src/domain/game/engine.js";
+import type { GameJournal } from "../../src/domain/game/events.js";
+import { Game } from "../../src/domain/game/game.js";
+import { parseHalfMoves, START_POSITION } from "../../src/domain/game/position.js";
+import { fixedDice } from "../../src/domain/game/roll.js";
+import { createGameLibrary, type GameLibrary } from "../../src/storage/game-library.js";
+import { createGameSession, type GameSession } from "../../src/storage/game-session.js";
+import { createKeyValueBackend } from "../../src/storage/key-value-backend.js";
+import { memoryStorage } from "../../src/storage/open-library.js";
+import { BANNER_MS } from "../../src/ui/app.js";
+import { createHaptics } from "../../src/ui/haptics.js";
+import { nextTheme, parseSettings, type Settings } from "../../src/ui/settings.js";
+import { loadNodeEngine } from "../support/node-engine.js";
+
+setDefaultTimeout(30_000);
+
+let engine: Engine;
+let game: Game;
+let oldJournal: GameJournal;
+let oldBoard: unknown;
+let settings: Settings;
+let vibrations: number[][] = [];
+
+BeforeAll(async () => {
+    engine = await loadNodeEngine();
+});
+
+// -------------------------------------------------- Nouvelle partie annulable
+
+// Comme dans l'application : chaque partie est enregistrée par la session
+// (ici sur un stockage en mémoire), et l'ancienne est relue dans le
+// stockage par son identifiant.
+let library: GameLibrary;
+let session: GameSession;
+let oldId: string | null;
+
+Given("une partie est en cours depuis quelques coups", async () => {
+    library = createGameLibrary(createKeyValueBackend(memoryStorage()));
+    let dice = fixedDice([3, 1, 6, 4, 5, 2]);
+    session = createGameSession(
+        library,
+        {
+            start: () => Game.start(engine, { dice }),
+            resume: (journal) => Game.resume(engine, journal, { dice }),
+        },
+        "2ply",
+    );
+    game = session.newGame();
+    dice = () => 1 + Math.floor(Math.random() * 6);
+    for (const halfMove of parseHalfMoves("8/5 6/5")) {
+        assert.ok(await game.playHalfMove(halfMove));
+    }
+    await game.confirmMove();
+    await game.playComputerTurn();
+    session.save(game.journal);
+    oldId = session.shownId;
+    assert.equal(game.state.turn, "player");
+});
+
+When("vous commencez une nouvelle partie depuis le menu", async () => {
+    oldJournal = game.journal;
+    oldBoard = await game.displayedBoard();
+    game = session.newGame();
+    session.save(game.journal);
+});
+
+Then("une nouvelle partie commence aussitôt", () => {
+    assert.equal(game.state.position, START_POSITION);
+    assert.ok(game.events.every((e) => e.type === "GameStarted" || e.type === "DiceRolled"));
+});
+
+Then("l'ancienne partie peut être reprise pendant {int} secondes", (seconds: number) => {
+    assert.equal(BANNER_MS, seconds * 1000);
+});
+
+When("vous reprenez l'ancienne partie", async () => {
+    const old = await session.resumePrevious();
+    assert.ok(old !== null);
+    game = old;
+    session.save(game.journal);
+});
+
+Then("vous retrouvez exactement la partie quittée", async () => {
+    assert.equal(session.shownId, oldId);
+    assert.deepEqual((await library.current())?.journal, oldJournal);
+    // La nouvelle partie, abandonnée, est supprimée.
+    assert.deepEqual(
+        (await library.list()).map((s) => s.id),
+        [oldId],
+    );
+    assert.deepEqual(game.journal, oldJournal);
+    assert.deepEqual(await game.displayedBoard(), oldBoard);
+    assert.equal(game.state.turn, "player");
+    assert.equal(game.state.phase, "rolling");
+});
+
+// --------------------------------------------------------------- Réglages
+
+Given("vous ouvrez l'application pour la première fois", () => {
+    settings = parseSettings(null);
+    vibrations = [];
+});
+
+const haptic = createHaptics(
+    (pattern) => {
+        vibrations.push(pattern);
+        return true;
+    },
+    () => settings.vibrations,
+);
+
+When("un pion est frappé", () => {
+    vibrations = [];
+    haptic("checkerHit");
+});
+
+Then("le téléphone vibre deux fois, brièvement", () => {
+    assert.deepEqual(vibrations, [[25, 40, 25]]);
+});
+
+When("vous coupez les vibrations dans le menu", () => {
+    settings = { ...settings, vibrations: false };
+});
+
+Then("le téléphone ne vibre pas", () => {
+    assert.deepEqual(vibrations, []);
+});
+
+Then("l'écran reste allumé pendant une partie", () => {
+    assert.equal(settings.keepScreenOn, true);
+});
+
+When("vous coupez « Écran allumé pendant la partie » dans le menu", () => {
+    settings = parseSettings(JSON.stringify({ ...settings, keepScreenOn: false }));
+});
+
+Then("l'écran peut se mettre en veille comme d'habitude", () => {
+    assert.equal(settings.keepScreenOn, false);
+});
+
+Then("le thème suit celui du téléphone", () => {
+    assert.equal(settings.theme, "auto");
+});
+
+When("vous changez de thème dans le menu", () => {
+    // Rien : l'étape suivante fait le tour des thèmes.
+});
+
+Then("il passe à clair, puis à sombre, puis revient à automatique", () => {
+    const seen = [settings.theme];
+    for (let i = 0; i < 3; i++) {
+        seen.push(nextTheme(seen.at(-1) ?? "auto"));
+    }
+    assert.deepEqual(seen, ["auto", "light", "dark", "auto"]);
+});

app/tests/storage.test.ts

@@ -0,0 +1,267 @@
+// Tests du stockage des parties (src/storage/), sans navigateur : la
+// bibliothèque de parties sur un stockage clé-valeur en mémoire (le repli
+// de localStorage), la migration de la partie des versions précédentes et
+// le choix du stockage. IndexedDB, absent de Node, est essayé dans un vrai
+// navigateur (tests/browser/play.mjs).
+//
+// Copyright (C) 2026 les auteurs d'Ustagammon.
+// Licence : GPLv3 ou ultérieure (voir LICENSE).
+
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import { branches } from "../src/domain/game/branches.js";
+import type { Engine } from "../src/domain/game/engine.js";
+import {
+    appendEvent,
+    EMPTY_JOURNAL,
+    type GameJournal,
+    goBackTo,
+} from "../src/domain/game/events.js";
+import { Game } from "../src/domain/game/game.js";
+import { START_POSITION } from "../src/domain/game/position.js";
+import { fixedDice } from "../src/domain/game/roll.js";
+import { createGameLibrary, isJournal, newGameId } from "../src/storage/game-library.js";
+import { createGameSession } from "../src/storage/game-session.js";
+import {
+    createKeyValueBackend,
+    type KeyValueStorage,
+    migrateLegacyGame,
+} from "../src/storage/key-value-backend.js";
+import { memoryStorage, openGameLibrary } from "../src/storage/open-library.js";
+
+/** Une partie commencée, et éventuellement quelques événements de plus. */
+function journal(extraRolls = 0): GameJournal {
+    let j = appendEvent(EMPTY_JOURNAL, {
+        type: "GameStarted",
+        position: START_POSITION,
+        cube: { value: 1, owner: null },
+        firstTurn: null,
+    });
+    for (let i = 0; i < extraRolls; i++) {
+        j = appendEvent(j, { type: "DiceRolled", side: null, roll: [3, 3] });
+    }
+    return j;
+}
+
+/** Une horloge qui avance d'une seconde à chaque lecture. */
+function clock(start = 1_000_000): () => number {
+    let t = start;
+    return () => {
+        t += 1000;
+        return t;
+    };
+}
+
+function library(storage: KeyValueStorage = memoryStorage()) {
+    return createGameLibrary(createKeyValueBackend(storage), { now: clock() });
+}
+
+test("plusieurs parties : liste, chargement, dernière jouée d'abord", async () => {
+    const games = library();
+    assert.deepEqual(await games.list(), []);
+    assert.equal(await games.current(), null);
+
+    const a = await games.save("a", journal(), { level: "2ply" });
+    await games.save("b", journal(1), { level: "beginner" });
+    assert.deepEqual(
+        (await games.list()).map((s) => s.id),
+        ["b", "a"],
+    );
+    assert.equal(a.status, "playing");
+    assert.equal(a.result, null);
+    assert.equal(a.moveCount, 0);
+    assert.equal(a.branchCount, 1);
+
+    // Rejouer « a » la remet en tête ; sa date de début ne change pas.
+    const again = await games.save("a", journal(2), { level: "2ply" });
+    assert.equal(again.startedAt, a.startedAt);
+    assert.ok(again.updatedAt > a.updatedAt);
+    assert.deepEqual(
+        (await games.list()).map((s) => s.id),
+        ["a", "b"],
+    );
+    assert.deepEqual((await games.load("a"))?.journal, journal(2));
+    assert.equal((await games.load("b"))?.summary.level, "beginner");
+    assert.equal(await games.load("inconnue"), null);
+});
+
+test("partie en cours : la dernière enregistrée, ou celle qu'on reprend", async () => {
+    const games = library();
+    await games.save("ancienne", journal(), { level: "2ply" });
+    await games.save("nouvelle", journal(1), { level: "2ply" });
+    assert.equal((await games.current())?.summary.id, "nouvelle");
+
+    // « Reprendre l'ancienne » : elle redevient la partie en cours, sans
+    // être modifiée ; la nouvelle peut être supprimée.
+    const before = await games.load("ancienne");
+    await games.setCurrent("ancienne");
+    await games.remove("nouvelle");
+    assert.deepEqual(await games.current(), before);
+    assert.deepEqual(
+        (await games.list()).map((s) => s.id),
+        ["ancienne"],
+    );
+    await assert.rejects(games.setCurrent("nouvelle"), /introuvable/);
+
+    // La partie en cours supprimée : la dernière jouée la remplace.
+    await games.save("autre", journal(), { level: "2ply" });
+    await games.setCurrent("ancienne");
+    await games.remove("ancienne");
+    assert.equal((await games.current())?.summary.id, "autre");
+});
+
+test("les opérations sont faites dans l'ordre des appels", async () => {
+    const games = library();
+    // Lancées sans attendre, comme l'enregistrement après chaque action.
+    void games.save("a", journal(), { level: "2ply" });
+    void games.save("a", journal(3), { level: "2ply" });
+    void games.remove("a");
+    void games.save("b", journal(), { level: "2ply" });
+    assert.deepEqual(
+        (await games.list()).map((s) => s.id),
+        ["b"],
+    );
+});
+
+test("les branches et le résultat sont résumés", async () => {
+    const games = library();
+    let j = journal(2);
+    j = goBackTo(j, "2");
+    j = appendEvent(j, { type: "DiceRolled", side: null, roll: [5, 2] });
+    j = appendEvent(j, {
+        type: "MovePlayed",
+        side: "player",
+        halfMoves: [],
+        position: START_POSITION,
+    });
+    j = appendEvent(j, { type: "GameEnded", winner: "player", kind: "gammon", points: 2 });
+    const summary = await games.save("x", j, { level: "2ply" });
+    assert.equal(summary.branchCount, 2);
+    assert.equal(summary.moveCount, 1);
+    assert.equal(summary.status, "over");
+    assert.deepEqual(summary.result, { winner: "player", kind: "gammon", points: 2 });
+});
+
+test("un journal illisible n'est pas chargé ; un stockage plein ne casse rien", async () => {
+    const storage = memoryStorage();
+    const games = library(storage);
+    await games.save("a", journal(), { level: "2ply" });
+    storage.setItem("ustagammon.game.a", "{pas du JSON");
+    assert.equal(await games.load("a"), null);
+    assert.equal(isJournal({ events: [], head: 3 }), false);
+    assert.equal(isJournal(null), false);
+
+    const full = library({
+        getItem: () => null,
+        setItem: () => {
+            throw new Error("plein");
+        },
+        removeItem: () => {},
+    });
+    await assert.rejects(full.save("a", journal(), { level: "2ply" }), /plein/);
+    // La bibliothèque reste utilisable après un échec.
+    assert.deepEqual(await full.list(), []);
+});
+
+test("la partie des versions précédentes est migrée, une seule fois", async () => {
+    const storage = memoryStorage();
+    const old = journal(1);
+    storage.setItem("ustagammon.current-game", JSON.stringify(old));
+    const games = library(storage);
+    const id = await migrateLegacyGame(storage, games, 42);
+    assert.ok(id !== null);
+    assert.equal(storage.getItem("ustagammon.current-game"), null);
+    const current = await games.current();
+    assert.equal(current?.summary.id, id);
+    assert.deepEqual(current?.journal, old);
+    assert.equal(await migrateLegacyGame(storage, games), null);
+    assert.equal((await games.list()).length, 1);
+
+    // Un ancien enregistrement illisible est seulement effacé.
+    storage.setItem("ustagammon.current-game", "{pas du JSON");
+    assert.equal(await migrateLegacyGame(storage, games), null);
+    assert.equal(storage.getItem("ustagammon.current-game"), null);
+    assert.equal((await games.list()).length, 1);
+});
+
+test("sans IndexedDB : localStorage, ou à défaut la mémoire", async () => {
+    const storage = memoryStorage();
+    storage.setItem("ustagammon.current-game", JSON.stringify(journal()));
+    const opened = await openGameLibrary({ localStorage: storage });
+    assert.equal(opened.kind, "localStorage");
+    assert.equal((await opened.library.list()).length, 1);
+
+    const refused: KeyValueStorage = {
+        getItem: () => {
+            throw new Error("interdit");
+        },
+        setItem: () => {
+            throw new Error("interdit");
+        },
+        removeItem: () => {
+            throw new Error("interdit");
+        },
+    };
+    const memory = await openGameLibrary({ localStorage: refused });
+    assert.equal(memory.kind, "memory");
+    await memory.library.save("a", journal(), { level: "2ply" });
+    assert.equal((await memory.library.current())?.summary.id, "a");
+
+    // IndexedDB qui échoue à l'ouverture : repli.
+    const broken = {
+        open: () => {
+            throw new Error("indisponible");
+        },
+    } as unknown as IDBFactory;
+    assert.equal((await openGameLibrary({ indexedDB: broken })).kind, "memory");
+});
+
+test("les identifiants de partie sont distincts", () => {
+    const ids = new Set(Array.from({ length: 100 }, () => newGameId(1)));
+    assert.ok(ids.size > 95);
+    assert.match(newGameId(), /^[0-9a-z]+-[0-9a-z]{6}$/);
+});
+
+test("session : « Reprendre l'ancienne » par l'identifiant, et reprise d'une branche", async () => {
+    const games = library();
+    // Game.start et Game.resume n'interrogent pas le moteur.
+    const engine = {} as Engine;
+    const session = createGameSession(
+        games,
+        {
+            start: () => Game.start(engine, { dice: fixedDice([5, 2]) }),
+            resume: (j) => Game.resume(engine, j),
+        },
+        "2ply",
+    );
+    assert.equal(await session.restore(), null);
+    assert.equal(await session.resumePrevious(), null);
+
+    const first = session.newGame();
+    const firstId = session.shownId as string;
+    session.save(first.journal);
+    const second = session.newGame();
+    session.save(second.journal);
+    assert.notEqual(session.shownId, firstId);
+
+    // L'ancienne revient, relue dans le stockage ; la nouvelle disparaît.
+    const back = await session.resumePrevious();
+    assert.deepEqual(back?.journal, first.journal);
+    assert.equal(session.shownId, firstId);
+    assert.deepEqual(
+        (await games.list()).map((s) => s.id),
+        [firstId],
+    );
+    assert.equal(await session.resumePrevious(), null);
+
+    // Une branche reprise devient la ligne courante enregistrée.
+    let j = goBackTo(first.journal, "1");
+    j = appendEvent(j, { type: "DiceRolled", side: null, roll: [6, 1] });
+    await games.save(firstId, j, { level: "2ply" });
+    const original = branches(j).find((b) => b.forkedFrom === null);
+    assert.ok(original !== undefined);
+    const opened = await session.open(firstId, original.head);
+    assert.equal(opened.journal.head, original.head);
+    assert.equal((await games.current())?.journal.head, original.head);
+    await assert.rejects(session.open("inconnue"), /introuvable/);
+});

app/tests/support/node-engine.ts

@@ -0,0 +1,37 @@
+// Le vrai moteur WebAssembly sous Node, pour les tests et les scénarios.
+//
+// Copyright (C) 2026 les auteurs d'Ustagammon.
+// Licence : GPLv3 ou ultérieure (voir LICENSE).
+//
+// Charge build/wasm/ (make engine-wasm) avec web/engine-wasm.mjs, comme la
+// page de test du moteur, et le branche sur l'adaptateur du domaine. Le moteur
+// n'est chargé qu'une fois par processus.
+
+import { fileURLToPath } from "node:url";
+import type { Engine } from "../../src/domain/game/engine.js";
+import { createWasmEngine } from "../../src/engine/wasm-engine.js";
+
+// Ce fichier est compilé dans build/web/tests/support/ : la racine du dépôt
+// est quatre dossiers plus haut.
+const root = new URL("../../../../", import.meta.url);
+
+interface WasmEngine {
+    run(args: string[]): { result: unknown; ms: number };
+}
+
+let loading: Promise<Engine> | undefined;
+
+export function loadNodeEngine(): Promise<Engine> {
+    loading ??= load();
+    return loading;
+}
+
+async function load(): Promise<Engine> {
+    const module = await import(new URL("build/wasm/engine.mjs", root).href);
+    const wrapper = await import(new URL("web/engine-wasm.mjs", root).href);
+    const wasm: WasmEngine = await wrapper.loadEngine(
+        module.default,
+        fileURLToPath(new URL("build/wasm/", root)),
+    );
+    return createWasmEngine(async (args) => wasm.run(args).result);
+}

app/tests/support/play.ts

@@ -0,0 +1,86 @@
+// Jouer une partie du domaine sans interface, pour les tests, les
+// scénarios et les parties d'exemple : les deux camps, avec des dés
+// reproductibles.
+//
+// Copyright (C) 2026 les auteurs d'Ustagammon.
+// Licence : GPLv3 ou ultérieure (voir LICENSE).
+
+import type { Engine } from "../../src/domain/game/engine.js";
+import type { Game } from "../../src/domain/game/game.js";
+import type { DiceSource } from "../../src/domain/game/roll.js";
+
+/** Des dés pseudo-aléatoires reproductibles (générateur congruentiel). */
+export function seededDice(seed: number): DiceSource {
+    let state = seed;
+    return () => {
+        state = (state * 1103515245 + 12345) % 2147483648;
+        return 1 + (Math.floor(state / 65536) % 6);
+    };
+}
+
+/**
+ * Une action de la partie, quel que soit le camp qui a la main. Le joueur
+ * joue le choice-ième coup légal (le dernier s'il y en a moins), prend les
+ * doubles si take, et double quand il le peut si double.
+ */
+export async function step(
+    game: Game,
+    engine: Engine,
+    strategy: { choice?: number; take?: boolean; double?: boolean } = {},
+): Promise<void> {
+    const state = game.state;
+    if (state.turn === "computer" && state.phase === "doubled") {
+        if (strategy.take ?? true) {
+            game.take();
+        } else {
+            game.drop();
+        }
+    } else if (state.turn === "computer") {
+        await game.playComputerTurn();
+    } else if (state.phase === "rolling") {
+        if (strategy.double === true && (await game.canDouble())) {
+            await game.double();
+        } else {
+            await game.roll();
+        }
+    } else if (state.phase === "moving" && state.roll !== null) {
+        const moves = await engine.legalMoves(state.position, state.roll);
+        const move = moves[Math.min(strategy.choice ?? 0, moves.length - 1)];
+        if (move === undefined) {
+            await game.skipTurn();
+            return;
+        }
+        for (const halfMove of move.halfMoves) {
+            if (!(await game.playHalfMove(halfMove))) {
+                throw new Error("coup légal refusé");
+            }
+        }
+        await game.confirmMove();
+    } else {
+        throw new Error(`phase inattendue : ${state.phase}`);
+    }
+}
+
+/** Joue jusqu'à count coups (des deux camps), ou jusqu'à la fin. */
+export async function playMoves(
+    game: Game,
+    engine: Engine,
+    count: number,
+    choice = 0,
+): Promise<void> {
+    let played = 0;
+    while (played < count && game.state.phase !== "over") {
+        const before = game.events.length;
+        await step(game, engine, { choice });
+        played += game.events.slice(before).filter((event) => event.type === "MovePlayed").length;
+    }
+}
+
+export async function playToTheEnd(game: Game, engine: Engine, choice = 0): Promise<void> {
+    for (let i = 0; game.state.phase !== "over"; i++) {
+        if (i > 2000) {
+            throw new Error("la partie ne finit pas");
+        }
+        await step(game, engine, { choice });
+    }
+}

app/tests/tools/sgf-samples.ts

@@ -0,0 +1,139 @@
+// Parties d'exemple exportées en SGF, pour les faire relire par le GNU
+// Backgammon de référence (tests/test_sgf_reference.sh).
+//
+// Copyright (C) 2026 les auteurs d'Ustagammon.
+// Licence : GPLv3 ou ultérieure (voir LICENSE).
+//
+// Usage : node build/web/tests/tools/sgf-samples.js <dossier>
+//
+// Joue sur le vrai moteur WebAssembly, avec des dés reproductibles, des
+// parties variées : complètes, avec branches, avec videau, depuis une
+// position particulière. Pour chaque branche de chaque partie, écrit
+// <nom>.sgf (la partie exportée, cette branche en premier : c'est celle que
+// gnubg lit) et <nom>.json : les positions successives du journal sur cette
+// branche, celles que gnubg doit retrouver (tests/sgf/check.py).
+
+import { mkdirSync, writeFileSync } from "node:fs";
+import { join } from "node:path";
+import { Game } from "../../src/domain/game/game.js";
+import { exportSgf } from "../../src/domain/game/sgf.js";
+import { loadNodeEngine } from "../support/node-engine.js";
+import { playMoves, playToTheEnd, seededDice, step } from "../support/play.js";
+
+/** Le dernier événement « coup joué » de la ligne courante. */
+function lastMoveId(game: Game, skip = 0): string {
+    const moves = game.events.filter((event) => event.type === "MovePlayed");
+    const move = moves.at(-1 - skip);
+    if (move === undefined) {
+        throw new Error("aucun coup joué");
+    }
+    return move.id;
+}
+
+async function main(): Promise<void> {
+    const out = process.argv[2];
+    if (out === undefined) {
+        throw new Error("usage : sgf-samples.js <dossier>");
+    }
+    mkdirSync(out, { recursive: true });
+    const engine = await loadNodeEngine();
+    const games: [string, Game][] = [];
+
+    // Une partie complète, puis une autre où le joueur joue autrement.
+    for (const [seed, choice] of [
+        [3, 0],
+        [11, 2],
+    ] as const) {
+        const game = Game.start(engine, { dice: seededDice(seed), ply: 0 });
+        await playToTheEnd(game, engine, choice);
+        games.push([`complete-${seed}`, game]);
+    }
+
+    // Des branches : rejouée d'un coup de l'ordinateur (nouveaux dés), d'un
+    // jet du joueur (même jet, autre coup), et une branche d'une branche.
+    {
+        const game = Game.start(engine, { dice: seededDice(5), ply: 0 });
+        await playMoves(game, engine, 14);
+        const original = game.events.at(-1)?.id as string;
+        game.goBackTo(lastMoveId(game, 6));
+        await playMoves(game, engine, 8);
+        const rolled = game.events.findLast((e) => e.type === "DiceRolled" && e.side === "player");
+        if (rolled === undefined) {
+            throw new Error("aucun jet du joueur");
+        }
+        game.goBackTo(rolled.id);
+        await playMoves(game, engine, 5, 1);
+        game.switchBranch(original);
+        await playToTheEnd(game, engine);
+        games.push(["branches", game]);
+    }
+
+    // Le joueur double d'entrée ; l'ordinateur prend ou passe selon le moteur.
+    {
+        const game = Game.start(engine, { dice: seededDice(9), ply: 0 });
+        for (let i = 0; i < 400 && game.state.phase !== "over"; i++) {
+            await step(game, engine, { double: true });
+        }
+        games.push(["player-doubles", game]);
+    }
+
+    // Depuis une position particulière : l'ordinateur, au trait, double
+    // (position de référence « cube-double-take ») ; le joueur prend dans
+    // une branche, passe dans une autre.
+    {
+        const game = Game.start(engine, {
+            dice: seededDice(13),
+            ply: 0,
+            setup: { position: "6O5uAAC4uzsAAA", firstTurn: "computer" },
+        });
+        await step(game, engine);
+        const offered = game.events.at(-1)?.id as string;
+        await playMoves(game, engine, 6);
+        game.goBackTo(offered);
+        await step(game, engine, { take: false });
+        games.push(["setup-cube", game]);
+    }
+
+    // Depuis une position particulière, videau déjà doublé chez le joueur,
+    // qui a la main ; partie laissée en cours, dés lancés et pas joués.
+    {
+        const game = Game.start(engine, {
+            dice: seededDice(17),
+            ply: 0,
+            setup: {
+                position: "t+0OAADg/wcAQA",
+                firstTurn: "player",
+                cube: { value: 2, owner: "player" },
+            },
+        });
+        await playMoves(game, engine, 4);
+        await game.roll();
+        games.push(["setup-unfinished", game]);
+    }
+
+    let files = 0;
+    for (const [name, game] of games) {
+        const original = game.journal;
+        for (const [i, branch] of game.branches.entries()) {
+            game.switchBranch(branch.head);
+            const sgf = await exportSgf(engine, game.journal, {
+                playerName: "Vous",
+                computerName: "Ordinateur",
+                date: "2026-11-03",
+            });
+            // Après chaque coup, la position vue de celui qui a alors la main,
+            // et le résultat.
+            const expected = {
+                after: game.events.flatMap((e) => (e.type === "MovePlayed" ? [e.position] : [])),
+                result: game.state.result,
+            };
+            writeFileSync(join(out, `${name}-${i}.sgf`), sgf);
+            writeFileSync(join(out, `${name}-${i}.json`), `${JSON.stringify(expected)}\n`);
+            files++;
+        }
+        game.goBackTo(original.head as string);
+    }
+    console.log(`${files} parties exportées dans ${out}`);
+}
+
+await main();

app/tests/ui.test.ts

@@ -0,0 +1,187 @@
+// Tests de ce qui, dans l'interface et le stockage, se vérifie sans
+// navigateur : le plateau à dessiner, les mises en évidence, la lecture de
+// l'aide. Le stockage des parties a ses tests (storage.test.ts).
+//
+// Copyright (C) 2026 les auteurs d'Ustagammon.
+// Licence : GPLv3 ou ultérieure (voir LICENSE).
+
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import { test } from "node:test";
+import type { BoardSide } from "../src/domain/game/engine.js";
+import { parseHalfMoves } from "../src/domain/game/position.js";
+import {
+    boardModel,
+    moveTargets,
+    moveTrace,
+    onlyHalfMove,
+    placeOf,
+    pointColor,
+    pointSlot,
+} from "../src/ui/board-model.js";
+import { parseFeature, parseGlossaryEntry, parseGlossaryIndex } from "../src/ui/help-text.js";
+import { TEXTS } from "../src/ui/texts.js";
+
+// Compilé dans build/web/tests/ : la racine du dépôt est trois dossiers plus haut.
+const root = new URL("../../../", import.meta.url);
+const read = (path: string) => readFileSync(new URL(path, root), "utf8");
+
+function side(points: Record<number, number>, extra: Partial<BoardSide> = {}): BoardSide {
+    const all = Array.from({ length: 24 }, (_, i) => points[i + 1] ?? 0);
+    return { points: all, bar: 0, off: 0, pipCount: 0, ...extra };
+}
+
+test("le plateau est vu du joueur : la case q de l'ordinateur est sa case 25 - q", () => {
+    const model = boardModel({
+        player: side({ 6: 5, 8: 3 }, { bar: 1, pipCount: 100 }),
+        computer: side({ 6: 5, 24: 2 }, { off: 3, pipCount: 90 }),
+    });
+    assert.equal(model.points.length, 24);
+    assert.deepEqual(model.points[5], { place: "p6", number: 6, owner: "player", count: 5 });
+    assert.deepEqual(model.points[18], { place: "p19", number: 19, owner: "computer", count: 5 });
+    assert.deepEqual(model.points[0], { place: "p1", number: 1, owner: "computer", count: 2 });
+    assert.deepEqual(model.points[1], { place: "p2", number: 2, owner: null, count: 0 });
+    assert.deepEqual(model.bar, { player: 1, computer: 0 });
+    assert.deepEqual(model.off, { player: 0, computer: 3 });
+    assert.deepEqual(model.pipCount, { player: 100, computer: 90 });
+});
+
+test("cases, barre et sortie de chaque camp", () => {
+    assert.equal(placeOf("player", 8), "p8");
+    assert.equal(placeOf("computer", 8), "p17");
+    assert.equal(placeOf("player", 25), "bar-player");
+    assert.equal(placeOf("computer", 0), "off-computer");
+});
+
+test("couleur des flèches : impaires en point-a, paires en point-b, quelle que soit la colonne", () => {
+    for (const number of [1, 13, 23]) {
+        assert.equal(pointColor(number), "point-a", `flèche ${number}`);
+    }
+    for (const number of [2, 12, 24]) {
+        assert.equal(pointColor(number), "point-b", `flèche ${number}`);
+    }
+    // 12 et 13 partagent la colonne 0, mais pas la couleur.
+    assert.equal(pointSlot(12).column, pointSlot(13).column);
+    assert.notEqual(pointColor(12), pointColor(13));
+});
+
+test("disposition : 1 à 12 en bas de droite à gauche, 13 à 24 en haut de gauche à droite", () => {
+    assert.deepEqual(pointSlot(1), { top: false, column: 11 });
+    assert.deepEqual(pointSlot(7), { top: false, column: 5 });
+    assert.deepEqual(pointSlot(12), { top: false, column: 0 });
+    assert.deepEqual(pointSlot(13), { top: true, column: 0 });
+    assert.deepEqual(pointSlot(24), { top: true, column: 11 });
+});
+
+test("les demi-coups possibles donnent les pions jouables et leurs cases d'arrivée", () => {
+    const targets = moveTargets([
+        { from: 8, to: 5 },
+        { from: 8, to: 7 },
+        { from: 25, to: 22 },
+        { from: 3, to: 0 },
+    ]);
+    assert.deepEqual([...targets.keys()], ["p8", "bar-player", "p3"]);
+    assert.deepEqual([...(targets.get("p8")?.keys() ?? [])], ["p5", "p7"]);
+    assert.deepEqual(targets.get("p3")?.get("off-player"), { from: 3, to: 0 });
+    // Un seul toucher suffit pour un pion à destination unique.
+    assert.deepEqual(onlyHalfMove(targets, "p3"), { from: 3, to: 0 });
+    assert.deepEqual(onlyHalfMove(targets, "bar-player"), { from: 25, to: 22 });
+    assert.equal(onlyHalfMove(targets, "p8"), null);
+    assert.equal(onlyHalfMove(targets, "p13"), null);
+});
+
+test("traces d'un coup simple : une flèche par demi-coup, départs et arrivées", () => {
+    // L'ordinateur joue 13/9 13/7 dans sa numérotation : ses cases 13, 9 et
+    // 7 sont les cases 12, 16 et 18 du joueur.
+    const trace = moveTrace("computer", parseHalfMoves("13/9 13/7"), [false, false]);
+    assert.deepEqual(trace.arrows, [
+        { from: "p12", to: "p16" },
+        { from: "p12", to: "p18" },
+    ]);
+    assert.deepEqual([...trace.left], [["p12", 2]]);
+    assert.deepEqual(
+        [...trace.landed],
+        [
+            ["p16", 1],
+            ["p18", 1],
+        ],
+    );
+    assert.equal(trace.hits, 0);
+});
+
+test("traces : un pion qui fait étape ne laisse ni fantôme ni cercle à l'étape", () => {
+    const trace = moveTrace("computer", parseHalfMoves("24/18 18/14"), [false, true]);
+    assert.equal(trace.arrows.length, 2);
+    assert.deepEqual([...trace.left], [["p1", 1]]);
+    assert.deepEqual([...trace.landed], [["p11", 1]]);
+    assert.equal(trace.hits, 1);
+});
+
+test("traces : rentrée depuis la barre avec un pion frappé, sortie de pions", () => {
+    const entering = moveTrace("computer", parseHalfMoves("bar/22 6/4"), [true, false]);
+    assert.deepEqual(entering.arrows[0], { from: "bar-computer", to: "p3" });
+    assert.deepEqual(
+        [...entering.left],
+        [
+            ["bar-computer", 1],
+            ["p19", 1],
+        ],
+    );
+    assert.equal(entering.hits, 1);
+    const bearingOff = moveTrace("computer", parseHalfMoves("6/off 5/off"), [false, false]);
+    assert.deepEqual([...bearingOff.landed], [["off-computer", 2]]);
+    assert.deepEqual(
+        [...bearingOff.left],
+        [
+            ["p19", 1],
+            ["p20", 1],
+        ],
+    );
+});
+
+test("l'aide lit le scénario tel qu'il est écrit dans docs/scenarios/", () => {
+    const feature = parseFeature(read("docs/scenarios/jouer-une-partie.feature"));
+    assert.equal(feature.title, "Jouer une partie contre l'ordinateur");
+    assert.match(feature.description[0] ?? "", /^Vous jouez une partie complète/);
+    assert.equal(feature.scenarios[0]?.title, "Commencer une partie");
+    assert.deepEqual(feature.scenarios[0]?.steps, [
+        "Quand vous commencez une nouvelle partie",
+        "Alors les pions sont en position de départ",
+        "Et le premier jet de dés désigne qui commence",
+    ]);
+    const refused = feature.scenarios.find((s) => s.title === "Un coup interdit est refusé");
+    assert.match(refused?.description[0] ?? "", /^La case 12 est tenue/);
+    assert.equal(refused?.steps[0], "Étant donné que c'est à vous de jouer avec le jet 3-1");
+    // Chaque scénario a des étapes : aucune n'a été prise pour du texte libre.
+    for (const scenario of feature.scenarios) {
+        assert.ok(scenario.steps.length >= 2, scenario.title);
+    }
+});
+
+test("l'aide lit chaque fiche de l'index du glossaire", () => {
+    const files = parseGlossaryIndex(read("docs/glossaire/README.md"));
+    assert.ok(files.includes("videau.md"));
+    assert.ok(!files.includes("README.md"));
+    for (const file of files) {
+        const entry = parseGlossaryEntry(read(`docs/glossaire/${file}`));
+        assert.ok(entry !== null, file);
+        assert.ok(entry.brief.length > 10, file);
+    }
+    assert.deepEqual(parseGlossaryEntry(read("docs/glossaire/videau.md")), {
+        term: "Videau",
+        brief: "le dé à doubler, marqué 2, 4, 8, 16, 32 et 64 : il indique la valeur actuelle de la partie.",
+    });
+    assert.equal(parseGlossaryEntry("pas une fiche"), null);
+});
+
+test("les textes de fin de partie emploient les mots du glossaire", () => {
+    assert.equal(TEXTS.endTitle("computer", "gammon", false), "L'ordinateur gagne un gammon");
+    assert.equal(TEXTS.endDetail("computer", 8, 4), "8 points pour lui, videau à 4.");
+    assert.equal(TEXTS.endTitle("player", "single", false), "Vous gagnez la partie simple");
+    assert.equal(TEXTS.endDetail("player", 1, 1), "1 point pour vous.");
+    assert.equal(TEXTS.endTitle("player", "single", true), "L'ordinateur passe");
+    assert.equal(
+        TEXTS.computerMoved([6, 4], "24/18 13/9"),
+        "L'ordinateur a joué 6-4 : 24/18 13/9.",
+    );
+});

app/tsconfig.json

@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+        "target": "ES2023",
+        "lib": ["ES2023", "DOM", "DOM.Iterable"],
+        "module": "NodeNext",
+        "moduleResolution": "NodeNext",
+        "types": ["node"],
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "noFallthroughCasesInSwitch": true,
+        "verbatimModuleSyntax": true,
+        "skipLibCheck": true,
+        "rootDir": ".",
+        "outDir": "../build/web"
+    },
+    "include": ["src", "tests"]
+}

deploy/Caddyfile

@@ -0,0 +1,51 @@
+# Serveur statique d'Ustagammon. CapRover fournit le HTTPS devant ; ici on
+# écoute en HTTP sur le port 80 du conteneur.
+{
+	admin off
+	auto_https off
+}
+
+:80 {
+	root * /srv
+	# Types compressés : ceux de Caddy par défaut, plus les données du moteur
+	# (application/octet-stream, 8,7 Mo, 7,2 Mo compressés).
+	encode {
+		zstd
+		gzip
+		match {
+			header Content-Type text/*
+			header Content-Type application/json*
+			header Content-Type application/javascript*
+			header Content-Type application/wasm*
+			header Content-Type application/octet-stream*
+			header Content-Type application/manifest+json*
+			header Content-Type image/svg+xml*
+		}
+	}
+
+	# Les noms de fichiers ne changent pas d'une version à l'autre : le
+	# navigateur revalide chaque fichier (ETag) au lieu de garder une copie
+	# périmée.
+	header Cache-Control "no-cache"
+	header X-Content-Type-Options "nosniff"
+	header Referrer-Policy "no-referrer"
+
+	# Politique de sécurité du contenu : tout vient du site lui-même, sans
+	# script ni style en ligne. 'wasm-unsafe-eval' autorise la compilation du
+	# moteur WebAssembly (et rien d'autre : ni eval ni new Function). L'en-tête
+	# s'applique aussi au Web Worker du moteur et au service worker.
+	header Content-Security-Policy "default-src 'self'; script-src 'self' 'wasm-unsafe-eval'; style-src 'self'; img-src 'self'; connect-src 'self'; worker-src 'self'; manifest-src 'self'; object-src 'none'; base-uri 'none'; form-action 'none'; frame-ancestors 'none'"
+
+	# Données du moteur (Emscripten) : extension inconnue de Caddy, qui
+	# devinerait text/xml d'après le début du fichier.
+	@engine_data path *.data
+	header @engine_data Content-Type "application/octet-stream"
+
+	# Textes de l'aide (copies de docs/), lus par l'application.
+	@markdown path *.md
+	header @markdown Content-Type "text/markdown; charset=utf-8"
+	@gherkin path *.feature
+	header @gherkin Content-Type "text/plain; charset=utf-8"
+
+	file_server
+}

deploy/Dockerfile

@@ -0,0 +1,9 @@
+# Image de production d'Ustagammon : un serveur statique (Caddy) et le site
+# déjà construit et testé sur le PC (make site). Rien n'est compilé sur le
+# serveur : voir docs/deploiement.md.
+FROM caddy:2.8.4-alpine
+
+COPY Caddyfile /etc/caddy/Caddyfile
+COPY site/ /srv/
+
+EXPOSE 80

deploy/captain-definition

@@ -0,0 +1 @@
+{"schemaVersion": 2, "dockerfilePath": "./Dockerfile"}

docker/web/Dockerfile

@@ -0,0 +1,25 @@
+# Outils de l'application web (ADR 0009) : TypeScript, Biome, Cucumber et
+# dependency-cruiser, sous Node. Rien de tout cela n'est embarqué dans
+# l'application : ces outils compilent, vérifient et testent.
+#
+# Les modules sont installés dans /opt/tools, puis rendus visibles sous
+# /node_modules, à la racine du conteneur : Node et TypeScript les trouvent en
+# remontant depuis le dépôt monté sous /src, sans node_modules dans le dépôt.
+# (npm refuse d'installer directement à la racine.)
+#
+# Versions figées, publiées depuis plus de deux semaines au 2026-11-02.
+# Cucumber reste en 12.x : la 13 charge des modules ES avec require(), ce que
+# Node 22.11 ne fait pas sans option (il faut Node 22.12).
+FROM node:22.11.0-alpine3.20
+
+WORKDIR /opt/tools
+RUN npm install --no-audit --no-fund --save-exact \
+	typescript@6.0.3 \
+	@types/node@22.20.5 \
+	@biomejs/biome@2.5.15 \
+	@cucumber/cucumber@12.9.0 \
+	dependency-cruiser@18.6.0 \
+	&& npm cache clean --force \
+	&& ln -s /opt/tools/node_modules /node_modules
+
+ENV PATH="/opt/tools/node_modules/.bin:${PATH}"

docs/adr/0004-outils-de-developpement-dans-docker.md

@@ -46,3 +46,15 @@ construire ou tester ; rien n'est embarqué dans l'application.
 | Python 3 | PSF | `ustagammon/build-c` | Comparateur des références |
 | jq | MIT | `ustagammon/build-c` | Lecture du JSON dans les tests |
 | Emscripten | MIT / NCSA | `emscripten/emsdk:3.1.64` | Compilation du moteur en WebAssembly (étape 0b) |
+
+### 2026-11-02 — Outils de l'application web (étape 0d)
+
+Validés par Pierre avec l'ADR 0009, dans Docker, jamais embarqués :
+TypeScript (`tsc`, Apache-2.0), Biome (MIT ou Apache-2.0),
+`@cucumber/cucumber` (MIT), `dependency-cruiser` (MIT).
+
+### 2026-11-03 — Playwright pour les tests dans le navigateur
+
+Validé par Pierre : Playwright 1.48.2 (Apache-2.0), image
+`mcr.microsoft.com/playwright:v1.48.2-noble`, utilisé seulement par
+`make test-browser` (Chromium et Firefox sans écran). Rien n'est embarqué.

docs/adr/0007-architecture-et-conventions-de-code.md

@@ -94,3 +94,15 @@ les justifie pas.
   dépendances seront fixés avec le socle, à la fin de l'étape 0.
 - Les sous-agents reçoivent ces règles dans leurs consignes ; `CLAUDE.md` y
   renvoie.
+
+## Amendements
+
+### 2026-11-03 — Le stockage des parties est un format durable
+
+Avec les parties enregistrées (étape 1b), le schéma IndexedDB (base
+« ustagammon », version 1 : magasins `games`, `journals`, `settings`) et les
+clés `localStorage` de l'application (`ustagammon.settings`,
+`ustagammon.last-board`, et le repli des parties) rejoignent le journal
+d'événements parmi les formats durables : toute modification passe par une
+montée de version avec migration testée, jamais par une réécriture qui
+perdrait les parties des joueurs.

docs/adr/0009-socle-pwa-typescript.md

@@ -0,0 +1,91 @@
+# 0009. Socle : PWA en TypeScript, moteur en WebAssembly
+
+- **Statut** : accepté
+- **Date** : 2026-11-02
+- **Décideurs** : Pierre, sur proposition de Claude Code, après les mesures
+  sur le Fairphone 4
+
+## Contexte
+
+L'étape 0 doit trancher entre une PWA (moteur en WebAssembly) et une
+application Android native (`docs/etape-0.md`). L'étape 0b a produit le moteur
+en WebAssembly (MR !9) : même suite de contrat qu'en natif (écart maximal
+9,5e-4 pour une tolérance de 0,002), 7,3 Mo compressés à télécharger (seuil
+40 Mo). Sur le PC de développement (i5-2450M, 2011), le meilleur coup à 2 plis
+prend au plus 0,3 s sous Chromium et 2,3 s sous Firefox (seuil sur le
+téléphone : 3 s).
+
+Mesures sur le Fairphone 4 (Chrome 156, page `bench.html`, servie par
+`make deploy-web`), trois essais le 2026-11-02, maximum sur les positions de
+référence :
+
+| Mesure | Fairphone 4 (pire des 3 essais) | Seuil | Marge |
+| --- | --- | --- | --- |
+| Meilleur coup, 0 pli | 21 ms | 300 ms | ×14 |
+| Meilleur coup, 2 plis (médiane 94 à 98 ms) | 348 ms (`race-2`) | 3 000 ms | ×8,6 |
+| Décision de videau, 2 plis | 148 ms | 3 000 ms | ×20 |
+| Chargement du moteur | 239 à 276 ms | – | – |
+| Téléchargement, gzip | 7,3 Mo | 40 Mo | ×5 |
+| Mémoire WebAssembly | 51,9 Mo | – | – |
+
+Les trois essais diffèrent de moins de 10 %. Firefox n'a pas été mesuré sur le
+téléphone.
+
+L'ADR 0007 renvoyait au choix du socle le langage de l'interface et l'outil de
+vérification des dépendances.
+
+## Décision
+
+- **Socle : PWA**, installable et utilisable hors ligne, moteur en WebAssembly
+  dans un Web Worker. L'étape 0c (Android natif) n'est pas faite.
+- **Langage : TypeScript**, compilé par `tsc` en modules JavaScript standard,
+  sans framework d'interface ni empaqueteur.
+- **Lint et formatage : Biome.**
+- **Scénarios exécutés** (ADR 0008) par `@cucumber/cucumber`, sous Node, sur le
+  domaine branché au vrai moteur WebAssembly.
+- **Règles d'architecture vérifiées** (ADR 0007) par `dependency-cruiser` :
+  le domaine n'importe ni l'interface, ni le stockage, ni le moteur ; aucun
+  écran n'importe le moteur.
+- Tous ces outils tournent dans Docker et ne sont jamais embarqués dans
+  l'application.
+
+## Alternatives écartées
+
+- **Android natif (Kotlin, NDK)** : un seul système, une chaîne de build lourde
+  (Gradle, NDK) sur une machine de 2011, et aucun gain mesuré à ce stade sur
+  les temps de calcul. Reste le plan B si les mesures du téléphone échouent.
+- **JavaScript annoté (JSDoc) vérifié par TypeScript** : pas d'étape de build,
+  mais des types moins lisibles ; Pierre a choisi TypeScript.
+- **Un framework d'interface** (React, Vue…) : inutile pour un plateau et
+  quelques écrans, et contraire à la règle de simplicité (ADR 0007).
+
+## Conséquences
+
+- La distribution sur F-Droid et le Play Store demandera plus tard une
+  enveloppe Android minimale autour de la PWA (à décider à l'étape 1).
+- L'étape 0c (Android natif) est abandonnée.
+- Le critère de fin de l'étape 0 (« moins de 2 s par coup de l'IA en niveau
+  standard ») est tenu même au niveau fort (2 plis) : c'est le niveau standard
+  de l'ordinateur à l'étape 0d.
+- Firefox sur le téléphone reste à vérifier, sans bloquer.
+
+## Amendements
+
+### 2026-11-03 — Pages de test du moteur retirées du site
+
+Décidé par Pierre après son premier test sur le téléphone : « supprimer la
+partie test du moteur totalement ».
+
+- Les pages de test et de mesure de l'étape 0b (`web/moteur/` : `index.html`,
+  `bench.html` et leurs scripts) sont supprimées. Le site publié n'a plus rien
+  sous `/moteur/`, ni dans le cache du service worker ; `make deploy`
+  n'annonce plus que l'application, et l'aide ne renvoie plus vers le test du
+  moteur.
+- Les mesures du Fairphone 4 ci-dessus, faites avec `bench.html`, restent la
+  référence. Pour les refaire, la mesure se lance sous Node sur le PC
+  (`make bench`) : son code partagé est déplacé de `web/moteur/benchmark.mjs`
+  vers `engine-wasm/benchmark.mjs`. Une mesure sur le téléphone demanderait de
+  remettre une page de mesure, à décider le moment venu.
+- Le moteur reste vérifié par la suite de contrat sur WebAssembly
+  (`make test`) et, dans l'application, par la partie jouée dans un navigateur
+  (`make test-browser`).

docs/adr/0010-identite-visuelle.md

@@ -0,0 +1,62 @@
+# 0010. Identité visuelle : symbole, logotype, palette
+
+- **Statut** : accepté
+- **Date** : 2026-11-03
+- **Décideurs** : Pierre
+
+## Contexte
+
+Le brief créatif (https://claude.ai/artifact/36WMwZWqvMxXvSSVBJTgwd) fixe la
+personnalité d'Ustagammon (transmission, chaleur, maîtrise), une palette de
+départ (bois sombre, ivoire, un accent unique à choisir entre rouge brique et
+turquoise) et quatre pistes de symbole, avec une contrainte : un 8 caché, clin
+d'œil à l'Atelier du Huit, qui se découvre au second regard.
+
+Les propositions ont été faites en trois tours sur une planche de travail
+(https://claude.ai/artifact/Cck1SZCrKeYWbqJLhbwWNp), chacune testée en
+couleur, en monochrome et en taille réelle d'icône (48 et 24 px).
+
+## Décision
+
+- **Accent** : rouge brique, `#A8432B` en thème clair, `#D0694B` en thème
+  sombre. La turquoise est écartée.
+- **Symbole** (variante « P3d ») : deux pions vus de trois quarts, avec leur
+  tranche, posés sur une flèche du plateau en brique. Le maître (noyer) est
+  devant, l'apprenti (ivoire, filet brique) derrière ; leurs silhouettes
+  dessinent le 8.
+- **Logotype** (variante « L3 ») : « Ustagammon » en Alegreya Sans Bold, dont
+  les deux « m » sont redessinés en quatre flèches au trait qui alternent
+  noyer et brique, comme les flèches d'un plateau. En monochrome, les quatre
+  flèches prennent la couleur du texte.
+- **Icône d'application** : symbole sur fond ivoire `#F3EAD8`.
+- **Police** : Alegreya Sans (SIL Open Font License 1.1), pour le logotype et
+  pour l'interface. Pierre a validé cette dépendance, ainsi que fontTools
+  (MIT), outil de développement qui sert à régénérer le logotype, le
+  2026-11-03.
+- Les fichiers de référence sont dans `docs/identite/logo/`, produits par
+  `docs/identite/generer-logo.py` ; ils sont sous licence CC BY-SA 4.0.
+
+## Alternatives écartées
+
+- **Accent turquoise** : plus froid ; la brique s'accorde mieux au bois et au
+  café.
+- **Piste B (le videau)** : écartée au premier tour, au profit des pions.
+- **Pions vus de face (A1) ou en léger relief sans flèche (P1)** : appréciés,
+  mais la flèche rattache le symbole au plateau et fait écho au logotype.
+- **Filets brique sur les deux pions (P3c)** : trop de brique dans un petit
+  symbole.
+- **Logotype aux flèches pleines (L2)** : les « mm » s'y lisaient moins vite ;
+  le trait (L1) garde la lisibilité, et l'alternance de couleur (L3) apporte
+  le rappel du plateau.
+- **Fond d'icône noyer** : moins lumineux sur un écran d'accueil.
+
+## Conséquences
+
+- Le design system (couleurs des deux thèmes, typographie, composants) part de
+  cette palette et de cette police.
+- La police Alegreya Sans devra être embarquée dans la PWA (fonctionnement hors
+  ligne) ; sa licence OFL le permet, avec sa notice.
+- Le favicon utilise un dessin simplifié du symbole, sans filets, illisibles
+  en dessous de 32 px.
+- Les icônes Android (premier plan, arrière-plan, monochrome) sont fournies en
+  SVG ; leur conversion en `VectorDrawable` se fera avec l'application Android.

docs/adr/0011-lecons-conseil-et-bilan.md

@@ -0,0 +1,59 @@
+# 0011. Leçons numérotées, conseil du maître après le coup, bilan de fin de partie
+
+- **Statut** : accepté
+- **Date** : 2026-11-03
+- **Décideurs** : Pierre
+
+## Contexte
+
+Le cadrage (`docs/cadrage.md`) prévoit pour la V1 un coach en direct, un écran
+de fin de partie et des leçons par concept, sans en fixer la forme. Les
+maquettes des écrans (https://claude.ai/artifact/CQw6vbDpi6XQqVWQa4sANe),
+faites avec la charte graphique (ADR 0010), en ont proposé une. Pierre en a
+retenu trois éléments le 2026-11-03.
+
+Un point des maquettes contredisait le cadrage : le conseil apparaissait avant
+que le joueur ne joue, en donnant la réponse. Pierre a tranché pour un
+commentaire après le coup.
+
+## Décision
+
+- **Leçons numérotées** : un parcours de leçons dans un ordre fixe
+  (« Leçon 1 », « Leçon 2 »…). Chaque leçon affiche son état (à commencer,
+  « 3 exercices sur 5 », terminée) et sa progression. L'accueil propose de
+  continuer la leçon en cours.
+- **Conseil du maître** : c'est la forme du coach en direct du cadrage. Il
+  commente le coup **après** que le joueur l'a joué, jamais avant. Il donne
+  l'appréciation du moteur avec un mot et une icône (bon coup, imprécision,
+  erreur), puis une phrase du maître qui dit quel coup il aurait joué et
+  pourquoi, avec un lien pour en savoir plus. L'écart d'équité n'apparaît que
+  sur demande. Il reste désactivable, comme le prévoit le cadrage.
+- **Bilan de fin de partie** : le résultat, le décompte des coups par
+  appréciation (bons coups, imprécisions, erreurs), « le coup à revoir »
+  (la plus grosse erreur, avec sa position, le coup joué et le meilleur coup)
+  et le prompt prêt à copier pour une IA.
+
+Les maquettes de référence sont les écrans « Plateau de jeu », « Leçon et
+aide » et « Fin de partie » du canevas ci-dessus.
+
+## Alternatives écartées
+
+- **Conseil avant le coup, avec la réponse** : le joueur n'essaie plus par
+  lui-même, et on n'apprend pas en recopiant.
+- **Indice avant le coup, sans la réponse, en plus du commentaire après** :
+  écarté pour l'instant au profit d'un seul mécanisme simple. L'« indice » de
+  la liste des fonctions du cadrage reste à concevoir séparément.
+
+## Conséquences
+
+- Le commentaire après le coup demande une analyse du coup joué par le moteur
+  (classement des coups et écart avec le meilleur). Elle doit tenir dans le
+  budget de temps du téléphone, en arrière-plan, sans retarder le tour
+  suivant.
+- Les seuils entre « bon coup », « imprécision » et « erreur » sont à fixer,
+  en s'appuyant sur ceux de GNU Backgammon (doubtful, bad, very bad).
+- Les phrases du maître doivent rester exactes : elles s'appuient sur les
+  coups et les chiffres du moteur, jamais sur une explication inventée.
+- Les leçons sont des contenus sous CC BY-SA 4.0, à écrire et à faire relire
+  par un joueur fort (cadrage, risque « contenus longs à produire ») ; leur
+  progression est stockée localement.

docs/adr/0012-mode-immersif.md

@@ -0,0 +1,99 @@
+# 0012. Mode immersif : le plateau en paysage, sur demande
+
+- **Statut** : accepté
+- **Date** : 2026-11-03
+- **Décideurs** : Pierre
+
+## Contexte
+
+Sur l'écran de jeu en portrait, le plateau n'occupe qu'environ 35 % de l'écran
+d'un téléphone (pions de 24 px sur un écran de 390 px de large). Pierre le
+trouve peu immersif et a demandé un mode où le plateau prend le maximum de
+l'écran.
+
+Deux pistes ont été maquettées
+(https://claude.ai/artifact/CQw6vbDpi6XQqVWQa4sANe, rangée « Mode immersif ») :
+le téléphone en paysage, plateau sur toute la hauteur ; ou le portrait avec le
+plateau tourné d'un quart de tour. Toutes deux donnent environ 57 % de l'écran
+au plateau et des pions de 30 px : le petit côté de l'écran limite la taille
+des pions dans les deux cas.
+
+## Décision
+
+- Un **mode immersif en paysage** : le plateau occupe toute la hauteur, dans
+  son orientation habituelle. À gauche : le menu, les comptes de points et la
+  consigne. À droite : l'aide et les actions. Le fond est en noyer jusqu'aux
+  bords de l'écran.
+- On y entre **par un geste explicite** : un bouton « Plein écran » sur l'écran
+  de jeu en portrait. On en sort par le menu ou par le retour du téléphone.
+- Le bouton force la vue paysage même si le téléphone est tenu droit ou si sa
+  rotation automatique est verrouillée : passage en plein écran
+  (`requestFullscreen`), puis verrouillage de l'orientation
+  (`screen.orientation.lock("landscape")`).
+- Si le verrouillage est refusé (navigateur ou système qui ne le permet pas,
+  iPhone), l'app affiche la vue paysage tournée d'un quart de tour dans l'écran
+  portrait. Le résultat est le même en main.
+- L'écran de jeu en portrait reste la vue par défaut, pour jouer d'une main.
+
+## Alternatives écartées
+
+- **Plateau tourné en portrait** : il change la lecture du plateau (numéros de
+  côté, camps à gauche et à droite) et risque de dérouter les débutants habitués
+  à une vraie table.
+- **Bascule automatique quand on tourne le téléphone** : elle ne marche pas si
+  la rotation est verrouillée, et elle surprend en cours de partie. Elle reste
+  possible en plus du bouton, plus tard.
+
+## Conséquences
+
+- Le rendu du plateau doit s'adapter à deux mises en page (portrait et paysage)
+  sans changer le domaine ni le moteur : seule la vue change (ADR 0007).
+- `screen.orientation.lock` n'est accepté qu'en plein écran, et pas partout :
+  la solution de repli par rotation CSS est obligatoire, et elle doit être
+  testée (`make test-browser`).
+- Le plein écran masque la barre d'état du téléphone, ce qui libère encore un
+  peu de place.
+
+## Amendements
+
+### 2026-11-03 — Vue paysage dès la rotation, plateau = écran
+
+Décidé par Pierre après son premier essai sur le téléphone, où la vue paysage
+à deux colonnes (plateau limité à 70 % de la largeur, texte à droite) lui a
+paru « vraiment pas optimale ».
+
+- Dès que le téléphone est en paysage, même sans plein écran, l'app applique
+  la mise en page « plateau = écran » sur la hauteur réelle (`100dvh`, barre
+  d'adresse comprise). La mise en page à deux colonnes disparaît.
+- Dans cette vue, les contrôles sont dans le plateau : comptes de points sur la
+  barre, videau au milieu de la barre, dés et consigne dans la bande centrale,
+  pictogrammes (menu, annuler, plein écran) dans la colonne des sorties
+  (maquette « Immersif : plein écran, contrôles dans le plateau » du canevas
+  ci-dessus). La géométrie du plateau suit les proportions de l'écran ; les
+  numéros des flèches font au moins 12 px.
+- Le bouton « Plein écran » garde son rôle : plein écran, verrouillage en
+  paysage, repli par rotation CSS.
+
+La bascule automatique écartée plus haut était celle qui forçait
+l'orientation ; ici, seule la mise en page suit l'orientation choisie par le
+joueur.
+
+### 2026-11-03 — Placement des contrôles en paysage, après la revue UX
+
+La revue UX de l'étape 0e.2 a montré deux conflits dans le placement décrit
+par l'amendement précédent : la moitié basse de la colonne des sorties est une
+cible de jeu (toucher fait sortir un pion), et les pions frappés s'empilent
+depuis le milieu de la barre. Arbitrage de la session design, sur délégation
+de Pierre :
+
+- une colonne de commandes à gauche, dans le cadre : menu en haut, videau au
+  milieu (il monte ou descend selon son propriétaire), « Annuler le
+  demi-coup » en bas, remplacé par « Revoir » quand le coup de l'ordinateur
+  est montré ; « Quitter le plein écran » passe dans le menu ;
+- la colonne des sorties reste réservée aux pions sortis ;
+- les comptes de points sont des pastilles aux deux bouts de la barre, aux
+  couleurs du camp, en 13 px.
+
+Maquettes : rangée « Révision UX (étape 0e) : paysage » du canevas
+(variantes thème sombre, barre d'adresse visible et fin de partie). Règles de
+comportement : `docs/identite/charte/interaction.md`.

docs/adr/0013-position-dans-l-adresse.md

@@ -0,0 +1,87 @@
+# 0013. Une position du plateau dans l'adresse de la page
+
+- **Statut** : accepté
+- **Date** : 2026-11-03
+- **Décideurs** : Pierre (besoin), Claude Code (format)
+
+## Contexte
+
+Pierre a demandé, au premier test sur le téléphone (2026-11-03), qu'avec la
+seule adresse on arrive à une position du plateau : chaque position devient un
+lien direct, à partager, à mettre dans une leçon ou dans un prompt pour une IA.
+GNU Backgammon décrit déjà toute position par deux identifiants publics et
+documentés : le Position ID (14 caractères, les pions) et le Match ID
+(12 caractères : videau, score, longueur du match, joueur au trait, dés). Le
+moteur sait les lire et les écrire (`engine.h`).
+
+## Décision
+
+- L'adresse porte la position dans le fragment (après `#`) :
+  `https://ustagammon.sans.pub/#position=<Position ID>&match=<Match ID>`,
+  chaque identifiant encodé avec `encodeURIComponent` (le base64 de gnubg
+  contient `+` et `/`). `match` est facultatif : sans lui, partie libre, videau
+  au centre, joueur du bas au trait, sans dés.
+- Ouvrir un tel lien affiche la position, non jouable, avec deux actions :
+  « Jouer à partir d'ici » (nouvelle partie contre l'ordinateur depuis cette
+  position, sans toucher à la partie en cours) et « Retour à ma partie ».
+- Toute position affichée (partie, coup de l'ordinateur, analyse, leçon) peut
+  être copiée en lien (« Copier le lien de la position »).
+- Un identifiant illisible pour le moteur donne un message clair et le retour
+  à la partie, jamais une page cassée.
+
+## Alternatives écartées
+
+- **Paramètres de requête (`?position=`)** : ils changent l'adresse demandée
+  au serveur et au service worker ; hors ligne, la page en cache ne
+  correspondrait plus. Le fragment ne quitte jamais le navigateur.
+- **XGID (format d'eXtreme Gammon)** : répandu, mais un seul identifiant de
+  plus à décoder ; gnubg l'importe, son import pourra s'ajouter plus tard
+  (outil « import d'un identifiant GNU ou XGID » du cadrage).
+- **Format maison plus lisible** : il faudrait le décoder sans le moteur, donc
+  réimplémenter une règle de représentation (ADR 0007).
+
+## Conséquences
+
+- Le fragment est lu au chargement et à chaque changement (`hashchange`) ; le
+  domaine reçoit une position et un Match ID, le moteur les valide.
+- Les liens restent valables tant que GNU Backgammon garde ces formats, stables
+  depuis des années.
+- Les liens contiennent la position, rien d'autre : pas de donnée personnelle.
+
+## Amendements
+
+### 2026-11-03 — Une adresse pour chaque écran, des liens plutôt que des états
+
+Demandé par Pierre : « il faudra vraiment que chaque page (l'aide, etc.) ait
+une URL. Utilise des liens accessibles, pas des états. » Aucun lien de
+position n'a encore circulé : le format ci-dessus est remplacé par un schéma
+unique pour tous les écrans, avant sa première mise en œuvre.
+
+- Chaque écran a son adresse, dans le fragment (pour les mêmes raisons
+  qu'au-dessus : hors ligne, service worker, aucune configuration serveur) :
+
+  | Écran | Adresse |
+  | --- | --- |
+  | Partie en cours | `#/` |
+  | Accueil | `#/accueil` |
+  | Aide (onglet Jouer) | `#/aide`, une question : `#/aide/<identifiant>` |
+  | Les mots du jeu | `#/glossaire`, un terme : `#/glossaire/<fichier sans .md>` |
+  | À propos | `#/a-propos` |
+  | Tutoriel | `#/tutoriel`, une étape : `#/tutoriel/<n>` |
+  | Mes parties | `#/parties`, une partie : `#/parties/<id>` |
+  | Réglages / menu | `#/menu` |
+  | Une position | `#/position/<Position ID>/<Match ID>` (Match ID facultatif) |
+
+  Les identifiants de gnubg sont encodés avec `encodeURIComponent`. Les
+  écrans à venir (analyse, leçons, progression) suivront le même schéma.
+- On change d'écran par de vrais liens (`<a href="#/aide">`), pas par des
+  boutons qui modifient un état caché : le lien se partage, s'ouvre dans un
+  nouvel onglet, se lit aux lecteurs d'écran comme un lien, et le bouton
+  « retour » du téléphone ramène à l'écran précédent. Les actions de jeu
+  (lancer, jouer, doubler) restent des boutons : elles ne sont pas des écrans.
+- Les feuilles (menu, explication) et panneaux qui sont des écrans à part
+  entière ont aussi leur adresse ; une confirmation ou un bandeau éphémère
+  n'en a pas.
+- Une adresse inconnue mène à la partie en cours avec un message clair.
+- L'adresse de l'écran courant est la source de vérité de la navigation :
+  l'application l'écoute (`hashchange`) et dessine l'écran correspondant.

docs/adr/README.md

@@ -15,3 +15,8 @@ l'ancien passe au statut « remplacé par NNNN ». Voir l'ADR 0001.
 | [0006](0006-merge-requests-systematiques.md) | Merge requests systématiques, fusionnées par Claude Code | accepté |
 | [0007](0007-architecture-et-conventions-de-code.md) | Architecture et conventions de code | accepté |
 | [0008](0008-glossaire-et-scenarios-source-unique.md) | Glossaire et scénarios : une source unique pour le code, l'aide et les tests | accepté |
+| [0009](0009-socle-pwa-typescript.md) | Socle : PWA en TypeScript, moteur en WebAssembly | accepté |
+| [0010](0010-identite-visuelle.md) | Identité visuelle : symbole, logotype, palette | accepté |
+| [0011](0011-lecons-conseil-et-bilan.md) | Leçons numérotées, conseil du maître après le coup, bilan de fin de partie | accepté |
+| [0012](0012-mode-immersif.md) | Mode immersif : le plateau en paysage, sur demande | accepté |
+| [0013](0013-position-dans-l-adresse.md) | Une position du plateau dans l'adresse de la page | accepté |

docs/deploiement.md

@@ -0,0 +1,127 @@
+# Déploiement
+
+Ustagammon est un site statique (PWA, ADR 0009) : des fichiers HTML,
+JavaScript, le moteur en WebAssembly et ses données. L'application est à la
+racine ; les pages de test du moteur de l'étape 0b ont été retirées (ADR
+0009, amendement du 2026-11-03). Il est publié sur
+CapRover, machine `sans-pub` (https://captain.cloud.sans.pub), app
+`ustagammon`, sur https://ustagammon.sans.pub.
+
+**Le site est construit et testé sur le PC, pas sur le serveur.** La
+construction est lourde (Emscripten, génération des données du moteur) et déjà
+outillée en local. `make deploy-prod` envoie à CapRover une archive qui
+contient le site prêt, un `Dockerfile` et un `Caddyfile` (`deploy/`). Le serveur
+ne fait que copier les fichiers dans une image Caddy (`caddy:2.8.4-alpine`),
+qui les sert en HTTP derrière le HTTPS de CapRover.
+
+## Prérequis
+
+- La chaîne d'outils du projet : `make setup`.
+- **CLI CapRover**, installée avec Node par `fnm` (le script la trouve seul) :
+  ```bash
+  eval "$(fnm env)"; fnm use lts-latest
+  ```
+- **Session CapRover valide.** Le jeton expire ; pour vérifier :
+  ```bash
+  caprover api -n sans-pub -t /user/system/info -m GET -d '{}' -o false
+  ```
+  En cas de `not valid anymore` : `caprover login` dans un vrai terminal.
+- **L'app `ustagammon` existe dans CapRover** (créée le 2026-11-02) : sans
+  volume (rien n'est stocké côté serveur), port du conteneur 80, domaine
+  `ustagammon.sans.pub` avec HTTPS forcé.
+
+## Publier
+
+Depuis `main`, à jour avec `origin/main` (après fusion de la MR) :
+
+```
+make deploy-prod
+```
+
+Le script refuse de publier si l'arbre n'est pas propre, si l'on n'est pas sur
+`main`, si `main` diffère d'`origin/main`, ou si la session CapRover a expiré.
+Il lance `make lint` et `make test`, assemble le site (`make package`), puis
+`caprover deploy -t build/ustagammon.tar`.
+
+Pour une autre machine ou une autre app : `CAPROVER_MACHINE=… CAPROVER_APP=…
+make deploy-prod`.
+
+## Ce qui est publié
+
+- `make site` assemble `build/site/` (9 Mo) :
+  - le contenu de `web/` à la racine : la page de l'application
+    (`index.html`, `app.css`), le manifeste (`manifest.webmanifest`), les
+    icônes (`icons/`), le service worker (`sw.js`), le Web Worker du moteur
+    (`engine-worker.mjs`, `engine-wasm.mjs`) et les pages de test sous
+    `moteur/` ;
+  - l'application TypeScript compilée (`build/web/src/`) sous `app/` ;
+  - le moteur (`engine.mjs`, `engine.wasm`, `engine.data`, `positions.json`)
+    sous `wasm/` ;
+  - des copies de `docs/glossaire/` et `docs/scenarios/` sous `docs/`, lues
+    par l'aide de l'application (ADR 0008) ;
+  - `version.json` avec le commit publié ;
+  - enfin, `scripts/service-worker.sh` écrit en tête de `sw.js` la liste de
+    tous ces fichiers et une empreinte de leur contenu.
+- `make package` ajoute `deploy/` et produit `build/ustagammon.tar` (environ
+  9 Mo, 7,3 Mo transférés grâce à la compression).
+- `tests/test_site.sh` (dans `make test`) construit l'image de production en
+  local, la lance et vérifie ce que reçoit un navigateur : application, pages
+  de test, aide, manifeste et icônes, liste du service worker, types MIME
+  (`application/wasm` pour le moteur), compression gzip des données,
+  en-têtes dont la politique de sécurité, et commit de `version.json`.
+- `make test-browser` (hors de `make test`, plusieurs minutes) joue une
+  partie complète par l'interface dans Chromium et Firefox sans écran, sur
+  la même image, puis vérifie la reprise, l'aide, le hors ligne (Chromium
+  seulement : Firefox sous Playwright refuse toute navigation « hors
+  ligne », on y vérifie que le cache est complet et que la page rechargée
+  est servie par le service worker) et la politique de sécurité. Captures
+  d'écran dans `build/browser-shots/`.
+
+**Hors ligne et mises à jour.** Le service worker met tous les fichiers du
+site en cache à la première visite (environ 9 Mo), puis sert tout depuis ce
+cache, avec ou sans réseau. À chaque publication, l'empreinte écrite dans
+`sw.js` change dès qu'un fichier a changé : le navigateur, qui revérifie
+`sw.js` à chaque ouverture, installe la nouvelle version (tout le site est
+retéléchargé), qui prend la main et efface l'ancien cache. La page déjà
+ouverte continue sur l'ancienne version ; le lancement suivant utilise la
+nouvelle. Une publication sans changement de fichier garde le même `sw.js` :
+rien n'est retéléchargé. Le service worker exige https (ou `localhost`) :
+avec `make deploy`, en http sur le réseau local, l'application fonctionne,
+mais pas hors ligne.
+
+Réglages du serveur (`deploy/Caddyfile`) : compression zstd ou gzip, y compris
+pour les données du moteur ; `Cache-Control: no-cache` (les noms de fichiers ne
+changent pas d'une version à l'autre, le navigateur revalide chaque fichier) ;
+`X-Content-Type-Options: nosniff` ; `Referrer-Policy: no-referrer` ; et une
+politique de sécurité du contenu (`Content-Security-Policy`) : tout vient du
+site lui-même, aucun script ni style en ligne, aucun `eval`, seule la
+compilation du WebAssembly est permise (`'wasm-unsafe-eval'`). Elle est
+vérifiée par `tests/test_site.sh` (en-tête présent) et par
+`make test-browser` : aucune violation signalée par Chromium ni Firefox
+pendant toute une partie (moteur, Web Worker, service worker, aide), et un
+script en ligne ajouté exprès à la page est bien bloqué.
+
+## Vérifier
+
+```bash
+curl -s https://ustagammon.sans.pub/version.json      # commit publié
+curl -sI https://ustagammon.sans.pub/wasm/engine.wasm  # application/wasm
+curl -sI https://ustagammon.sans.pub/ | grep -i content-security  # CSP
+curl -s https://ustagammon.sans.pub/sw.js | head -2             # version du cache
+ssh sans.pub 'sudo docker service ps srv-captain--ustagammon --format "{{.Image}} {{.CurrentState}}" | head -2'
+```
+
+Puis ouvrir le site sur le téléphone : le plateau s'affiche et une consigne
+remplace « Chargement du moteur… ».
+
+## Retour arrière
+
+Dans CapRover, onglet *Deployment* de l'app `ustagammon` : redéployer une image
+précédente (`img-captain-ustagammon:N`). Rien n'est stocké côté serveur : aucun
+risque pour des données.
+
+## Incidents connus
+
+Voir `la-main-libre` (`docs/technique/deploiement.md`) pour le registre Docker
+de CapRover dont le certificat expire : le build réussit, l'envoi échoue, la
+production n'est pas touchée ; redémarrer `captain-registry` puis relancer.

docs/etape-0.md

@@ -1,73 +0,0 @@
-# Étape 0 — Prototype technique
-
-**But** : prouver que la chaîne technique fonctionne avant d'investir dans le design, et trancher entre deux socles : PWA (moteur en WebAssembly) ou Android natif.
-
-**Règle** : chaque sous-étape se termine par une démonstration que le développeur peut lancer lui-même avec une commande `make`.
-
----
-
-## 0a. Le moteur en ligne de commande
-
-**Objectif** : interroger le moteur GNU Backgammon sur une position, depuis le PC.
-
-À faire :
-1. Récupérer les sources du moteur (choisir entre gnubg, gnubg-nn ou le moteur extrait par CBG ; justifier le choix dans un ADR, `docs/adr/`).
-2. Définir une **interface C minimale** du moteur (`engine/include/engine.h`, identifiants en anglais : ADR 0007), indépendante de toute interface graphique :
-   - initialiser le moteur (charger réseaux, base de fin de partie, table d'équité de match) ;
-   - lister les coups légaux pour une position et des dés ;
-   - donner le meilleur coup et le classement des coups avec leur équité, pour un niveau d'évaluation donné ;
-   - donner la décision de videau (pas de double, double/prend, double/passe, avec équités) ;
-   - évaluer une position (probabilités de gain, gammon, backgammon).
-   Les positions entrent et sortent au format **GNU Position ID + Match ID**.
-3. Écrire `engine-cli`, un petit programme qui expose ces fonctions en ligne de commande, avec une sortie JSON.
-4. Générer un jeu de **positions de référence** (au moins 30 : ouvertures, contact, course, sortie, décisions de videau) avec le GNU Backgammon de bureau dans Docker, et stocker les résultats attendus dans `tests/reference/`.
-5. `make test` compare `engine-cli` aux références (même meilleur coup, équités à une tolérance près, à fixer).
-
-**Démo** : `make engine && ./build/engine-cli bestmove <position_id> <match_id> 31` affiche le meilleur coup en JSON ; `make test` passe.
-
----
-
-## 0b. Le test WebAssembly (décisif)
-
-**Objectif** : savoir si le moteur tourne assez vite et léger dans le navigateur du téléphone.
-
-À faire :
-1. Compiler le même moteur et la même interface C en WebAssembly avec Emscripten (dans Docker).
-2. Charger le moteur dans un **Web Worker** (jamais sur le fil d'affichage).
-3. Page HTML minimale : un champ Position ID, des dés, un bouton « meilleur coup », l'affichage du résultat et du temps de calcul.
-4. Rejouer les positions de référence dans le navigateur : les résultats doivent concorder avec 0a.
-5. `make deploy-web` sert la page sur le réseau local pour l'ouvrir depuis le Fairphone 4.
-6. `make bench` (ou une page de mesure) produit un petit rapport : temps par coup selon le niveau d'évaluation, taille téléchargée, mémoire utilisée.
-
-**Critères de réussite (à ajuster après mesure)** :
-
-| Mesure sur le Fairphone 4 | Seuil |
-| --- | --- |
-| Meilleur coup, niveau rapide (0-ply GNU) | moins de 0,3 s |
-| Meilleur coup, niveau fort (2-ply GNU) | moins de 3 s |
-| Décision de videau, niveau fort | moins de 3 s |
-| Taille totale à télécharger (wasm + données, compressé) | moins de 40 Mo |
-| Résultats identiques aux références de 0a | 100 % |
-
-**Démo** : la page ouverte sur le Fairphone donne le meilleur coup d'une position de référence, avec le temps de calcul affiché.
-
----
-
-## 0c. Android natif (seulement si 0b échoue)
-
-**Objectif** : la même démonstration en application Android.
-
-À faire :
-1. Compiler le moteur pour arm64 avec le NDK (dans Docker), en s'appuyant sur la configuration de CBG.
-2. Application Android minimale, construite en ligne de commande (Gradle sans Android Studio, `-j2`, démon Gradle limité en mémoire).
-3. Même écran de test et mêmes mesures qu'en 0b.
-4. `make deploy` installe l'APK sur le Fairphone via adb.
-
----
-
-## 0d. Plateau minimal et décision
-
-1. Sur le socle retenu, un **plateau minimal** : une partie complète jouable contre le moteur, coups et videau décidés par le moteur, dés tirés par l'app.
-2. Rédiger un ADR (`docs/adr/`) : socle retenu (PWA ou Android natif), mesures obtenues, raisons, risques restants.
-
-**Critère de fin de l'étape 0** : une partie complète jouée sur le Fairphone 4, moins de 2 s par coup de l'IA en niveau standard, tous les tests au vert.

docs/etape-1.md

@@ -0,0 +1,56 @@
+# Étape 1 — V1 « Jouer et comprendre »
+
+Document temporaire : il décrit l'étape en cours et sera supprimé à sa clôture,
+après report de ce qui est durable dans les ADR et le journal.
+
+**Critère de fin** (cadrage) : un débutant apprend et joue seul ; un joueur de
+club comprend ses erreurs. Livré avec un plan de test (`docs/guide-test-etape-1.md`)
+que Pierre déroule sur le Fairphone 4.
+
+**Préalable** : les sous-étapes 0e (retours du premier test) de la feuille de
+route, dont la revue UX validée par Pierre.
+
+## Périmètre
+
+Repris du cadrage (modules, écrans clés, IA générative en V1) et des ADR 0010,
+0011 et 0012. Ce qui n'y figure pas est hors de l'étape 1.
+
+| Sous-étape | Contenu | Dépend de |
+| --- | --- | --- |
+| 1a. Moteur pour l'analyse (fait) | Niveaux de jeu (plis et bruit de GNU Backgammon : débutant à expert), classement des coups d'un jet avec équités, analyse d'un coup joué et d'une décision de videau, chance d'un jet ; exposés par `engine.h`, `engine-cli` et le Worker, avec positions de référence comparées à gnubg de bureau | — |
+| 1b. Parties enregistrées (fait) | Stockage IndexedDB derrière l'interface de stockage existante : plusieurs parties, reprise automatique, branches (« Rejouer d'ici » crée une branche, l'originale reste intacte et rechargeable), export SGF avec variantes | — |
+| 1c. Match et réglages | Partie libre ou match en N points, règle Crawford, règle Jacoby, choix du niveau de l'ordinateur, conseil du maître activable ou non ; écran de nouvelle partie | 1a, 1b |
+| 1d. Conseil du maître | Après chaque coup du joueur, jamais avant (ADR 0011) : appréciation du moteur (bon coup, imprécision, erreur, gaffe) avec mot, icône et couleur, phrase du maître fondée sur les chiffres du moteur, coup recommandé montré sur demande ; aussi pour les décisions de videau ; calcul en arrière-plan sans retarder le jeu | 1a |
+| 1e. Fin de partie et analyse | Bilan (ADR 0011) : résultat, coups par appréciation, taux d'erreur comparé à la chance, « le coup à revoir » ; écran d'analyse : graphe d'équité (toucher un point ouvre la position), liste des erreurs filtrable, visualiseur pas à pas coup joué contre meilleur coup, « Rejouer d'ici » | 1a, 1b, 1d |
+| 1f. Prompts à copier | Gabarits versionnés et testés (`docs/prompts/` ou équivalent, source unique), bouton « Demander à une IA » sur le plateau, le conseil du maître, l'analyse et la fin de partie ; le moteur décide, l'IA explique | 1d, 1e |
+| 1g. Accueil, tutoriel et leçons | Accueil (reprendre, nouvelle partie, prochaine leçon, progression résumée), tutoriel des règles interactif et illustré (0e.5), cinq premières leçons numérotées (ADR 0011) avec positions et « à vous de jouer », progression locale ; contenus CC BY-SA 4.0 en brouillon, à relire par un joueur fort | 0e.5, 1a |
+| 1h. Progression | Historique des parties et courbe du taux d'erreur | 1b, 1e |
+| 1i. Plateau soigné | Dessin du plateau aligné sur la charte (`docs/identite/charte/board.js`), animations des pions, glisser-déposer en plus du toucher, double toucher pour le seul coup évident | 0e.3 |
+| 1j. Plan de test | `docs/guide-test-etape-1.md` : parcours du débutant et du joueur de club sur le téléphone, avec ce qu'il faut rapporter | toutes |
+
+## Orientation donnée par Pierre
+
+- **Un coach bienveillant, mis en avant mais discret** (2026-11-03) : le
+  conseil du maître et les conseils sont une signature de l'app, présents à
+  chaque partie, sans jamais interrompre le jeu ni culpabiliser le joueur. Le
+  ton des phrases du maître est encourageant ; l'espace qu'il occupe est
+  réservé dans la mise en page (revue UX 0e.2), pas en fenêtre surgissante.
+
+## Questions pour Pierre (ne bloquent pas le démarrage)
+
+- **Indice** : le cadrage le liste dans le module Jeu, l'ADR 0011 l'a laissé
+  « à concevoir séparément ». Il n'est pas dans l'étape 1 sans décision.
+- **Questionnaire de premier lancement** (choix du parcours) : le parcours 1
+  seul existe en V1 ; proposé : un simple choix « Je découvre » / « Je connais
+  les règles » qui oriente vers le tutoriel ou la partie.
+- **Seuils des appréciations** : ceux de GNU Backgammon (douteux 0,03,
+  mauvais 0,06, très mauvais 0,12 d'équité, `arSkillLevel`), exposés par le
+  moteur depuis 1a ; à calibrer sur de vraies parties.
+- **Relecture des leçons** par un joueur fort de l'Atelier du Huit.
+
+## Ordre de réalisation
+
+1a et 1b d'abord (fondations, sans conflit avec l'interface), en parallèle des
+sous-étapes 0e. Puis 1c, 1d, 1e, 1f dans cet ordre ; 1g après la validation des
+maquettes d'accueil et de tutoriel par Pierre ; 1h et 1i ; 1j en dernier. Chaque
+sous-étape a son plan dans `docs/plans/` et sa merge request.

docs/feuille-de-route.md

@@ -3,33 +3,34 @@
 Le travail restant, dans l'ordre. Une ligne réalisée est retirée : ce qui a été
 fait se lit dans les merge requests et le journal, ce qui a été décidé dans les
 ADR (`docs/adr/`). Les versions et leur contenu sont définis dans
-`docs/cadrage.md` ; le détail de l'étape en cours est dans `docs/etape-0.md`.
+`docs/cadrage.md`.
 
 Légende : 🔄 en cours · ⏳ à venir · ⏸ conditionnel
 
-## Étape 0 — Prototype technique
+## Étape 0 — Prototype technique : terminée
 
-Acquis : socle du dépôt, organisation (ADR 0001, 0003, 0006), source du moteur
-(ADR 0005 : gnubg officiel, commit 14b6798), gnubg de référence et 32 positions
-de référence (0a.2), moteur embarqué et `engine-cli` (0a.3), comparaison
-automatique aux références, tolérance 0,002 (0a.4).
+Close le 2026-11-03 : partie complète jouée par Pierre sur le Fairphone 4, coups
+de l'ordinateur rapides, tous les tests au vert. Acquis : moteur gnubg officiel
+(ADR 0005) comparé à 32 positions de référence, moteur en WebAssembly, socle
+PWA en TypeScript (ADR 0009 ; Android natif abandonné), domaine « partie » en
+journal d'événements, plateau jouable hors ligne avec la charte graphique,
+publié sur https://ustagammon.sans.pub. Le détail est dans le journal et les
+merge requests.
+
+## Retours du premier test sur téléphone (avant l'étape 1)
+
+Demandes de Pierre du 2026-11-03, traitées avant d'ouvrir l'étape 1.
 
 | Sous-étape | Contenu | État | Plan |
 | --- | --- | --- | --- |
-| 0b | Moteur en WebAssembly, page de test dans un Web Worker, `make deploy-web`, `make bench` | ⏳ | |
-| Mesures | Pierre relève les mesures sur le Fairphone 4 | ⏳ | |
-| Décision | Socle PWA ou Android natif, consigné dans un ADR — validation de Pierre | ⏳ | |
-| 0c | Android natif (NDK, Gradle en ligne de commande, `make deploy` via adb) | ⏸ si 0b échoue | |
-| 0d | Plateau minimal jouable sur le socle retenu ; vérifié avec Pierre en suivant `docs/scenarios/jouer-une-partie.feature` | ⏳ | |
-
-**Critère de fin** : une partie complète jouée sur le Fairphone 4, moins de 2 s
-par coup de l'IA en niveau standard, tous les tests au vert.
+| 0e.4 | Une adresse par écran (aide, glossaire, menu, mes parties…) et par position, par de vrais liens (ADR 0013 amendé) | ⏳ | `plans/2026-11-03-position-dans-l-adresse.md` |
+| 0e.5 | Page d'accueil, mise à jour de l'app en un toucher, installation en un toucher (« Ajouter à l'écran d'accueil », proposée par l'app), tutoriel des règles très didactique avec plateaux illustrés, aide réécrite sur un ton plus humain ; textes à valider par Pierre | ⏳ | `plans/2026-11-03-accueil-tutoriel-aide.md` |
 
 ## Étapes suivantes
 
 | Étape | Contenu | État |
 | --- | --- | --- |
-| 1. V1 Jouer et comprendre | Plateau soigné, niveaux, coach, analyse, branches, tutoriel, prompts, sauvegarde | ⏳ |
+| 1. V1 Jouer et comprendre | Détail et ordre dans `docs/etape-1.md` : moteur pour l'analyse, parties enregistrées et branches, match et réglages, conseil du maître, fin de partie et analyse, prompts, accueil, tutoriel et leçons, progression, plateau soigné, plan de test | 🔄 |
 | 2. V1.5 Apprendre | Parcours 2, exercices, progression | ⏳ |
 | 3. V2 Perfectionnement et IA | Parcours 3 et 4, rollouts, révision espacée | ⏳ |
 

docs/glossaire/README.md

@@ -26,18 +26,24 @@ Voir aussi : [Doubler](doubler.md)
 
 `code` est facultatif : il désigne le type du domaine qui implémente le terme,
 dès qu'il existe. Dans le code, ce type porte en commentaire le chemin de sa
-fiche (`Glossaire : docs/glossaire/videau.md`).
+fiche (`Glossaire : docs/glossaire/videau.md`), juste avant sa déclaration
+exportée. `make test` vérifie le lien dans les deux sens : chaque fiche avec
+`code` est reliée à ce type, chaque référence du code mène à une fiche dont le
+`code` est le type qui la porte.
 
 ## Termes
 
 | Terme | Anglais (code) |
 | --- | --- |
+| [Appréciation](appreciation.md) | Skill |
 | [Backgammon](backgammon.md) | Backgammon |
 | [Barre](barre.md) | Bar |
 | [Blot](blot.md) | Blot |
 | [Branche](branche.md) | Branch |
+| [Chance](chance.md) | Luck |
 | [Compte de points](compte-de-points.md) | Pip count |
 | [Coup](coup.md) | Move |
+| [Demi-coup](demi-coup.md) | Half-move |
 | [Course](course.md) | Race |
 | [Doubler](doubler.md) | Double |
 | [Équité](equite.md) | Equity |
@@ -48,13 +54,17 @@ fiche (`Glossaire : docs/glossaire/videau.md`).
 | [Jet](jet.md) | Roll |
 | [Match](match.md) | Match |
 | [Moteur](moteur.md) | Engine |
+| [Niveau de jeu](niveau-de-jeu.md) | Level |
 | [Partie](partie.md) | Game |
+| [Partie enregistrée](partie-enregistree.md) | Saved game |
 | [Passer](passer.md) | Drop |
 | [Pion](pion.md) | Checker |
+| [Plateau](plateau.md) | Board |
 | [Pli](pli.md) | Ply |
 | [Point](point.md) | Point |
 | [Prendre](prendre.md) | Take |
 | [Règle de Crawford](regle-de-crawford.md) | Crawford rule |
 | [Règle de Jacoby](regle-de-jacoby.md) | Jacoby rule |
+| [SGF](sgf.md) | SGF |
 | [Sortie](sortie.md) | Bear-off |
 | [Videau](videau.md) | Cube |

docs/glossaire/appreciation.md

@@ -0,0 +1,14 @@
+---
+term: Appréciation
+english: Skill
+code: Skill
+---
+# Appréciation
+
+**En bref** : le jugement du moteur sur un coup ou une décision de videau, d'après l'équité perdue par rapport au meilleur choix.
+
+GNU Backgammon distingue trois degrés, selon l'équité perdue : douteux (plus
+de 0,03), mauvais (plus de 0,06) et très mauvais (plus de 0,12). En dessous,
+il n'y a rien à signaler.
+
+Voir aussi : [Équité](equite.md), [Coup](coup.md), [Videau](videau.md)

docs/glossaire/branche.md

@@ -1,9 +1,14 @@
 ---
 term: Branche
 english: Branch
+code: Branch
 ---
 # Branche
 
 **En bref** : suite de coups rejouée à partir d'un moment d'une partie (« Rejouer d'ici ») ; la partie d'origine reste intacte.
 
-Voir aussi : [Événement de partie](evenement-de-partie.md)
+Une partie garde toutes ses branches : vous pouvez revenir à l'une ou à
+l'autre depuis « Mes parties », et l'export SGF les contient toutes, en
+variantes.
+
+Voir aussi : [Événement de partie](evenement-de-partie.md), [Partie enregistrée](partie-enregistree.md)

docs/glossaire/chance.md

@@ -0,0 +1,15 @@
+---
+term: Chance
+english: Luck
+code: Luck
+---
+# Chance
+
+**En bref** : ce qu'un jet de dés fait gagner ou perdre, en équité, par rapport à la moyenne de tous les jets possibles.
+
+Un jet est dit chanceux s'il fait gagner plus de 0,3 d'équité par rapport à la
+moyenne, très chanceux au-delà de 0,6 ; malchanceux ou très malchanceux dans
+l'autre sens. Comparer la chance d'une partie à ses erreurs aide à savoir si
+on a perdu à cause des dés ou de son jeu.
+
+Voir aussi : [Équité](equite.md), [Jet](jet.md)

docs/glossaire/coup.md

@@ -1,6 +1,7 @@
 ---
 term: Coup
 english: Move
+code: Move
 ---
 # Coup
 

docs/glossaire/demi-coup.md

@@ -0,0 +1,15 @@
+---
+term: Demi-coup
+english: Half-move
+code: HalfMove
+---
+# Demi-coup
+
+**En bref** : le déplacement d'un pion avec un seul dé, par exemple 8/5 avec un 3 ; un coup en compte deux, ou quatre avec un double.
+
+On saisit son coup demi-coup par demi-coup : l'application n'accepte que ceux
+qui mènent à un coup permis. Pour un pion qui sort, la case d'arrivée se note
+« off » (6/off) ; pour un pion qui rentre depuis la barre, la case de départ se
+note « bar » (bar/22).
+
+Voir aussi : [Coup](coup.md), [Jet](jet.md), [Barre](barre.md), [Sortie](sortie.md)

docs/glossaire/evenement-de-partie.md

@@ -1,6 +1,7 @@
 ---
 term: Événement de partie
 english: Game event
+code: GameEvent
 ---
 # Événement de partie
 

docs/glossaire/identifiant-de-position.md

@@ -1,6 +1,7 @@
 ---
 term: Identifiant de position
 english: Position ID
+code: PositionId
 ---
 # Identifiant de position
 

docs/glossaire/jet.md

@@ -1,6 +1,7 @@
 ---
 term: Jet
 english: Roll
+code: Roll
 ---
 # Jet
 

docs/glossaire/moteur.md

@@ -1,6 +1,7 @@
 ---
 term: Moteur
 english: Engine
+code: Engine
 ---
 # Moteur
 

docs/glossaire/niveau-de-jeu.md

@@ -0,0 +1,18 @@
+---
+term: Niveau de jeu
+english: Level
+code: Level
+---
+# Niveau de jeu
+
+**En bref** : la force de l'ordinateur, du débutant, qui commet volontairement des erreurs, au plus fort, qui réfléchit plusieurs plis à l'avance.
+
+Les niveaux sont ceux de GNU Backgammon. Les quatre premiers (débutant,
+amateur, intermédiaire, avancé) jugent la position sans regarder les jets
+suivants et ajoutent un « bruit » à leur jugement, de plus en plus faible :
+c'est ce qui leur fait choisir parfois un moins bon coup. Ce bruit dépend de
+la position seule : dans la même position, avec le même jet, l'ordinateur
+joue toujours le même coup. Les niveaux suivants, sans bruit, réfléchissent
+de 0 à 4 plis.
+
+Voir aussi : [Pli](pli.md), [Moteur](moteur.md)

docs/glossaire/partie-enregistree.md

@@ -0,0 +1,14 @@
+---
+term: Partie enregistrée
+english: Saved game
+code: SavedGameSummary
+---
+# Partie enregistrée
+
+**En bref** : une partie gardée sur votre téléphone, finie ou en cours, avec toutes ses branches ; vous la retrouvez dans « Mes parties ».
+
+Chaque partie est enregistrée après chacune de vos actions : fermer
+l'application ne perd rien. Rien ne quitte le téléphone, sauf si vous
+exportez une partie.
+
+Voir aussi : [Partie](partie.md), [Branche](branche.md), [SGF](sgf.md)

docs/glossaire/partie.md

@@ -1,6 +1,7 @@
 ---
 term: Partie
 english: Game
+code: Game
 ---
 # Partie
 

docs/glossaire/plateau.md

@@ -0,0 +1,14 @@
+---
+term: Plateau
+english: Board
+code: Board
+---
+# Plateau
+
+**En bref** : la surface de jeu, avec ses 24 cases (les points), la barre au milieu, et les pions de chaque joueur.
+
+Chaque joueur numérote les cases de son point de vue : sa case 1 est la plus
+proche de sa sortie, sa case 24 la plus éloignée, qui est la case 1 de
+l'adversaire.
+
+Voir aussi : [Point](point.md), [Pion](pion.md), [Barre](barre.md), [Identifiant de position](identifiant-de-position.md)

docs/glossaire/pli.md

@@ -1,6 +1,7 @@
 ---
 term: Pli
 english: Ply
+code: Ply
 ---
 # Pli
 

docs/glossaire/sgf.md

@@ -0,0 +1,13 @@
+---
+term: SGF
+english: SGF
+---
+# SGF
+
+**En bref** : format de fichier des parties de GNU Backgammon ; une partie exportée en SGF s'ouvre dans GNU Backgammon pour l'analyser.
+
+SGF (Smart Game Format) est un format commun à plusieurs jeux. Les branches
+d'une partie y deviennent des variantes ; GNU Backgammon ouvre la branche
+courante.
+
+Voir aussi : [Partie enregistrée](partie-enregistree.md), [Moteur](moteur.md)

docs/glossaire/videau.md

@@ -1,6 +1,7 @@
 ---
 term: Videau
 english: Cube
+code: Cube
 ---
 # Videau
 

docs/identite/README.md

@@ -0,0 +1,71 @@
+# Identité visuelle d'Ustagammon
+
+Décision et historique des choix : ADR 0010 (`docs/adr/0010-identite-visuelle.md`).
+Brief créatif : https://claude.ai/artifact/36WMwZWqvMxXvSSVBJTgwd
+
+Les dessins de ce dossier sont sous licence **CC BY-SA 4.0**. Le logotype
+utilise des tracés de la police **Alegreya Sans Bold** (Juan Pablo del Peral,
+Huerta Tipográfica), sous licence SIL Open Font License 1.1.
+
+## Fichiers (`logo/`)
+
+| Fichier | Usage |
+| --- | --- |
+| `symbole-couleur.svg` | Symbole seul, sur fond clair |
+| `symbole-sombre.svg` | Symbole seul, sur fond sombre |
+| `symbole-noir.svg`, `symbole-blanc.svg` | Monochromes, fond transparent |
+| `logotype-*.svg` | Le nom seul, mêmes quatre déclinaisons |
+| `logo-horizontal-*.svg` | Symbole et nom côte à côte, mêmes déclinaisons |
+| `icone.svg`, `icone-192.png`, `icone-512.png` | Icône de la PWA (`purpose: any`) |
+| `icone-maskable.svg`, `icone-maskable-192.png`, `icone-maskable-512.png` | Icône de la PWA (`purpose: maskable`), symbole dans la zone de sécurité |
+| `apple-touch-icon-180.png` | Ajout à l'écran d'accueil sur iPhone (via le navigateur) |
+| `favicon.svg`, `favicon-16.png`, `favicon-32.png`, `favicon-48.png` | Onglet du navigateur ; dessin simplifié, sans filets |
+| `android-premier-plan.svg`, `android-arriere-plan.svg`, `android-monochrome.svg` | Couches de l'icône adaptative Android (canevas 108 dp), pour plus tard |
+
+## Couleurs du logo
+
+| Rôle | Clair | Sombre |
+| --- | --- | --- |
+| Noyer (pion maître) | `#4A2E1F` | idem |
+| Ivoire (pion apprenti, fond d'icône) | `#F3EAD8` | idem |
+| Brique (flèche, filet, « mm ») | `#A8432B` | `#D0694B` (flèches du logotype), `#C9583C` (flèche du symbole) |
+| Texte du logotype | `#2B1D15` | `#F3EAD8` |
+
+## Régénérer
+
+Les fichiers sont versionnés ; il n'est utile de les régénérer qu'en cas de
+retouche du dessin. Il faut Python 3 avec fontTools (licence MIT) et la police
+Alegreya Sans Bold :
+
+```sh
+mkdir -p build/police
+curl -sSLf -o build/police/AlegreyaSans-Bold.ttf \
+  https://github.com/google/fonts/raw/main/ofl/alegreyasans/AlegreyaSans-Bold.ttf
+python3 -I docs/identite/generer-logo.py build/police/AlegreyaSans-Bold.ttf docs/identite/logo
+```
+
+Les PNG sont des rendus des SVG par Chrome sans interface
+(`google-chrome --headless --screenshot`), à la taille indiquée dans leur nom.
+
+## Police de l'application
+
+`web/fonts/` contient Alegreya Sans en cinq graisses, réduite aux caractères
+latins (français compris) et convertie en woff2, soit 143 Ko au lieu de
+1,3 Mo en TTF. Pour la refaire, depuis les TTF de
+https://github.com/google/fonts/tree/main/ofl/alegreyasans (Python 3,
+fontTools et brotli, par exemple dans l'image `emscripten/emsdk`) :
+
+```sh
+pip install fonttools brotli
+for f in Regular Italic Medium Bold ExtraBold; do
+  python3 -m fontTools.subset AlegreyaSans-$f.ttf \
+    --output-file=web/fonts/AlegreyaSans-$f.woff2 --flavor=woff2 \
+    --unicodes="U+0020-007E,U+00A0-00FF,U+0152-0153,U+0178,U+02BC,U+02C6,U+02DC,U+2009,U+2011,U+2013-2014,U+2018-201E,U+2022,U+2026,U+202F,U+2039-203A,U+20AC,U+2192,U+2212" \
+    --layout-features='*' --name-IDs='*' --name-languages='*'
+done
+```
+
+## Charte graphique
+
+La charte complète (couleurs des deux thèmes, typographie, composants) est dans
+`charte/`, avec les liens vers le design system et les maquettes d'écrans.

docs/identite/charte/README.md

@@ -0,0 +1,44 @@
+# Charte graphique d'Ustagammon
+
+Copie de travail du design system, pour l'appliquer à la PWA sans dépendre
+d'un accès à claude.ai. La référence vivante, avec aperçus dans les deux thèmes :
+
+- Design system : https://claude.ai/artifact/K2Z7MPE58XXJzv19n5r11M
+- Maquettes des écrans (accueil, plateau, leçon, fin de partie, thème sombre) :
+  https://claude.ai/artifact/CQw6vbDpi6XQqVWQa4sANe
+
+Décisions : ADR 0010. Fichiers du logo et des icônes : `../logo/`.
+
+## Fichiers
+
+| Fichier | Contenu |
+| --- | --- |
+| `guide-de-marque.md` | Règles d'usage : ton, couleurs, typographie, formes, mouvement, icônes, composants |
+| `accueil-tutoriel-aide.md` | Accueil, installation sans intrusion, tutoriel des règles (forme et première version du texte), aide en questions |
+| `recette-ux.md` | Critères de recette design de l'écran de jeu, à cocher sur les captures et sur le téléphone |
+| `interaction.md` | Comportement : réponse immédiate, annuler plutôt que confirmer, mouvement, vibrations, clavier, mises en page de l'écran de jeu (portrait, paysage, ordinateur), pictogrammes |
+| `tokens.json` | Toutes les valeurs, thèmes clair et sombre, avec une note d'usage par couleur |
+| `bundle.css` | Styles des composants ; mêmes noms de classes que `web/app.css` |
+| `board.js` | Dessin de référence du plateau (repère 640 × 520), pour comparaison |
+
+## Appliquer la charte à `web/`
+
+1. **Couleurs** : les variables du plateau de `web/app.css` (`--frame`, `--bed`,
+   `--point-a`, `--checker-player`…) ont les mêmes noms dans `tokens.json` ;
+   reprendre leurs valeurs, thème clair dans `:root`, thème sombre dans le bloc
+   `prefers-color-scheme: dark`. Remplacer l'accent vert provisoire par la
+   brique (`--accent`, `--highlight`, `--target`) et ajouter les couleurs
+   nouvelles (`surface`, `accent-soft`, `verdict-*`, `focus`, `last-move` en laiton).
+2. **Police** : embarquer Alegreya Sans (Regular, Italic, Medium, Bold,
+   ExtraBold) dans `web/`, avec sa licence OFL, en `@font-face`, et l'ajouter
+   au cache du service worker (hors ligne).
+3. **Composants** : reprendre de `bundle.css` les boutons ronds
+   (`radius-pill`), le filet intérieur des pions, l'anneau de focus et la zone
+   de consigne.
+4. **Icônes et logo** : remplacer `web/icons/` par les fichiers de
+   `../logo/` (icônes any et maskable, favicon), mettre le logo horizontal
+   dans la barre haute, et la couleur `theme-color` du manifeste à `#4A2E1F`.
+
+Les contrastes de tous les textes ont été vérifiés par calcul (4,5:1 au moins
+dans les deux thèmes) ; les marques du plateau, à 3:1 contre au moins un de
+leurs voisins.

docs/identite/charte/accueil-tutoriel-aide.md

@@ -0,0 +1,174 @@
+# Accueil, installation, tutoriel et aide
+
+Règles de l'étape 0e.5 (et 1g pour le tutoriel). Maquettes : rangée « Étape
+0e.5 » du canevas https://claude.ai/artifact/CQw6vbDpi6XQqVWQa4sANe et
+l'artboard « Accueil ». Les textes sont une **première version, à valider par
+Pierre**. Comportement général : `interaction.md`.
+
+## Accueil
+
+**Premier lancement** (aucune partie ni leçon enregistrée) : le logo, le
+plateau en position de départ, « Bienvenue à la table », une phrase, puis deux
+grands choix :
+
+- **« Je découvre »** (action principale) → le tutoriel, étape 1 ;
+- **« Je connais les règles »** → une partie tout de suite.
+
+Le choix ne revient plus. Le tutoriel reste dans le menu.
+
+**Ensuite**, de haut en bas :
+
+1. **La partie en cours** : miniature du plateau, comptes de points,
+   « Reprendre la partie » (seule action principale de l'écran) et
+   « Nouvelle partie ». Sans partie en cours : « Nouvelle partie » devient
+   l'action principale.
+2. **L'invitation à installer**, si elle doit apparaître (voir plus bas).
+3. **La prochaine leçon** : une seule carte (titre, état, progression,
+   « Continuer » en secondaire), avec le lien « Toutes les leçons ».
+4. **La progression résumée**, en une ligne `caption` : « 1 leçon terminée
+   sur 8 · 12 parties jouées · 4 gagnées ».
+5. En pied de page, la phrase de l'Atelier du Huit.
+
+Pas de chiffres d'erreur ou d'équité sur l'accueil : ils viennent avec
+l'analyse.
+
+## Installation
+
+Le but : proposer l'installation au bon moment, une fois, sans jamais
+interrompre.
+
+- **Jamais** au premier lancement, jamais pendant une partie, jamais en
+  fenêtre qui s'impose.
+- **Quand** : à partir de la fin de la **première partie terminée**, quand le
+  joueur a vu ce que vaut l'app.
+- **Où** : une carte compacte sur l'accueil (symbole, « Installer
+  Ustagammon », « Sur l'écran d'accueil, en plein écran, sans réseau. »,
+  bouton « Installer » et croix « Plus tard »), et une ligne « Installer
+  l'application » dans le menu, toujours présente tant que l'app n'est pas
+  installée.
+- **« Plus tard »** masque la carte ; elle revient une seule fois, après
+  trois parties de plus. Ensuite, seul le menu la propose.
+- **Chrome Android** : le bouton déclenche l'invite du système, gardée depuis
+  l'événement `beforeinstallprompt`. Sans cet événement (navigateur qui ne
+  propose pas l'installation), le même bouton ouvre la marche à suivre.
+- **Firefox Android** : une feuille en trois étapes numérotées (menu ⋮,
+  « Installer » ou « Ajouter à l'écran d'accueil », confirmer), qui se ferme
+  par « J'ai compris ».
+- **iPhone (Safari)** : même feuille, avec ces étapes : bouton de partage,
+  « Sur l'écran d'accueil », « Ajouter ».
+- **Une fois installée** (`display-mode: standalone`, ou événement
+  `appinstalled`) : plus aucune proposition, la ligne du menu disparaît.
+
+## Tutoriel des règles
+
+### Forme
+
+- Huit étapes, chacune en **écrans courts** : un titre, un plateau illustré,
+  deux ou trois phrases. Une étape sur deux finit par un écran **« à vous »**
+  où le joueur fait le geste sur le vrai plateau, contrôlé par le moteur.
+- En haut : une barre de progression en huit segments (`accent` pour les
+  étapes faites) et « Passer » à droite. En bas : « Retour » et
+  « Continuer ».
+- Les positions sont données par leurs identifiants gnubg (ADR 0013) ; le
+  plateau est le composant de l'app, non jouable sauf sur les écrans
+  « à vous ». Aucune règle n'est codée hors du moteur : un écran « à vous »
+  demande au moteur si le coup du joueur fait partie des coups permis attendus.
+- **Les pions bougent** : sur un écran d'explication, le coup illustré se joue
+  tout seul après une seconde, pion par pion (`duration-fast`), puis reste
+  affiché ; « Revoir » le rejoue. Sur les écrans à flèches (sens du jeu), un
+  tracé en pointillés `text` sur un liseré ivoire, jamais en brique (la brique
+  veut dire « à faire »).
+- Un geste juste : coche `verdict-good`, vibration « pion posé », phrase
+  courte, « Continuer » devient l'action principale. Un geste faux : le pion
+  revient, et une phrase dit pourquoi, sans le mot « erreur ».
+- Chaque terme nouveau est un lien vers sa fiche du glossaire, à sa première
+  apparition.
+
+### Texte, première version
+
+1. **Le but du jeu.** « Vous avez quinze pions ivoire, l'ordinateur quinze
+   pions noyer. Chacun fait faire le tour du plateau à ses pions, puis les
+   sort. Le premier qui a sorti tous les siens gagne la partie. »
+2. **Dans quel sens avancer.** « Vos pions ivoire font le tour du plateau dans
+   le sens des pointillés : ils partent d'en haut à droite, passent à gauche,
+   puis reviennent en bas jusqu'aux six dernières flèches, en bas à droite.
+   C'est là que vous les rassemblerez avant de les sortir. Les pions noyer de
+   l'ordinateur font le même chemin, en sens inverse. »
+3. **Les dés et les doubles.** « Chaque dé déplace un pion d'autant de
+   flèches. Avec 5 et 2, vous jouez un pion de 5 et un pion de 2, ou le même
+   pion de 5 puis de 2. Un double se joue quatre fois : avec 4-4, vous avancez
+   quatre fois de 4. » *À vous* : jouer 3-1 en faisant le point 5 (8/5 6/5).
+4. **Frapper un pion seul.** « Un pion seul sur une flèche s'appelle un blot.
+   Si vous vous posez dessus, vous le frappez : il part sur la barre et devra
+   refaire tout le chemin. Une flèche où l'adversaire a deux pions ou plus est
+   fermée : vous ne pouvez pas vous y poser. » *À vous* : frapper le blot du
+   point 7 avec 6-1.
+5. **Rentrer depuis la barre.** « Votre pion frappé attend sur la barre, au
+   milieu. Avant de jouer quoi que ce soit d'autre, il doit rentrer dans le
+   camp adverse, en haut à droite. Chaque dé indique une flèche d'entrée :
+   avec 3 et 4, la 22 ou la 21. Si les deux flèches sont fermées, votre tour
+   passe. »
+6. **Sortir ses pions.** « Quand vos quinze pions sont dans les six dernières
+   flèches, vous pouvez commencer à les sortir : un 6 sort un pion de la
+   flèche 6, un 1 un pion de la flèche 1. Touchez le pion, puis la sortie à
+   droite. » *À vous* : sortir deux pions avec 6-3.
+7. **Gammon et backgammon.** « Une partie gagnée vaut 1 point. Si
+   l'adversaire n'a sorti aucun pion quand vous finissez, c'est un gammon :
+   2 points. S'il lui reste en plus un pion sur la barre ou dans votre camp,
+   c'est un backgammon : 3 points. »
+8. **Le videau.** « Le cube aux faces 2, 4, 8, 16, 32 et 64 sert à miser.
+   Avant de lancer vos dés, vous pouvez proposer de doubler la valeur de la
+   partie. L'ordinateur prend, et la partie continue en valant le double, ou il
+   passe, et vous gagnez tout de suite. Celui qui a pris garde le cube : lui
+   seul pourra redoubler. » *À vous* : décider de prendre ou passer, avec une
+   phrase du maître ensuite.
+
+Fin du tutoriel : « Vous connaissez les règles. Le reste s'apprend en jouant,
+et le maître vous accompagne. » → « Jouer ma première partie ».
+
+## Aide
+
+L'aide n'est plus une copie brute des fichiers : c'est une page organisée en
+questions, avec un ton. **La source reste unique** (ADR 0008) : les mêmes
+fichiers servent d'aide et de tests.
+
+- **Trois onglets** : « Jouer » (les scénarios), « Les mots du jeu » (le
+  glossaire), « À propos ». Le tutoriel est proposé en tête de page.
+- **« Jouer »** : un scénario = une question repliable (`details`), fermée par
+  défaut sauf celle qui correspond à l'écran d'où l'on vient.
+  - Le **titre du scénario** est la question, formulée comme le joueur se la
+    pose : « Comment jouer un coup ? », « Je me suis trompé de pion », « Je ne
+    peux rien jouer avec mes dés ». C'est un changement de titre dans les
+    `.feature` : les tests n'en dépendent pas.
+  - La **description du scénario** (le paragraphe sous le titre) est la
+    réponse affichée. Elle se lit seule, au présent, au « vous ».
+  - Les **étapes Gherkin** ne s'affichent pas dans l'aide : elles restent la
+    preuve que l'app fait ce que dit la réponse. « Voir sur le plateau » ouvre
+    la position de l'exemple quand le scénario en donne une (lien ADR 0013).
+  - La **description de la fonctionnalité** sert d'introduction à l'onglet.
+- **« Les mots du jeu »** : une fiche du glossaire = une carte (le mot, son nom
+  anglais en `caption` italique, « En bref », les renvois), triées par ordre
+  alphabétique, avec un champ de recherche en tête.
+- **Ton** : celui du maître de café, patient et concret. Pas de « Étant
+  donné que », pas de vocabulaire technique (moteur, scénario, événement).
+
+## Liens (ADR 0013, amendement : une adresse par écran)
+
+Chaque élément qui mène ailleurs est un vrai lien (`<a href>`), qu'on peut
+ouvrir, partager et retrouver avec le bouton « retour » du téléphone.
+
+| Élément | Adresse |
+| --- | --- |
+| « Je découvre », « Toutes les leçons » | `#/tutoriel/1` |
+| Étape *n* du tutoriel (« Continuer », « Retour », segments de la barre de progression) | `#/tutoriel/<n>` |
+| « Je connais les règles », « Reprendre la partie » | l'écran de jeu |
+| Un terme du jeu dans un texte (blot, barre, camp…) | `#/glossaire/<terme>` |
+| Une position illustrée, « Voir sur le plateau » | `#/position/<Position ID>/<Match ID>` |
+| Aide, onglet « Jouer » | `#/aide` ; une question ouverte : `#/aide/<scénario>` |
+| Menu | `#/menu` |
+
+- Les segments de la barre de progression du tutoriel sont des liens vers les
+  étapes déjà vues, pas vers les suivantes.
+- Le bouton « retour » du téléphone ferme d'abord la feuille ou la question
+  ouverte, puis revient à l'écran précédent ; il ne quitte jamais une partie
+  sans retour possible.

docs/identite/charte/board.js

@@ -0,0 +1,74 @@
+/* Dessin de référence du plateau Ustagammon, en SVG, avec les classes de bundle.css.
+ * Repère : 640 × 520, comme web/app.css (.board, aspect-ratio 640 / 520).
+ * Numérotation du point de vue du joueur : 1 à 12 en bas (de droite à gauche),
+ * 13 à 24 en haut (de gauche à droite). Le joueur a les pions ivoire. */
+window.UstaBoard = (function () {
+  var W = 640, H = 520, SIDE = 16, TB = 28, PW = 43, BAR = 40, PH = 190, R = 20;
+  var TRAY_X = 580, TRAY_W = 44;
+
+  function colX(col) { return SIDE + col * PW + (col >= 6 ? BAR : 0); }
+  function place(point) { // point 1..24 → {col, top}
+    return point <= 12 ? { col: 12 - point, top: false } : { col: point - 13, top: true };
+  }
+  function checker(cx, cy, side, extra) {
+    var c = side === "player" ? "player" : "computer";
+    return '<circle class="checker checker-' + c + (extra ? " " + extra : "") + '" cx="' + cx + '" cy="' + cy + '" r="' + R + '"/>' +
+      '<circle class="checker-ring ring-' + c + '" cx="' + cx + '" cy="' + cy + '" r="12"/>';
+  }
+  function die(x, y, n, side) {
+    var s = 36, p = { 1: [[.5, .5]], 2: [[.27, .27], [.73, .73]], 3: [[.27, .27], [.5, .5], [.73, .73]],
+      4: [[.27, .27], [.73, .27], [.27, .73], [.73, .73]], 5: [[.27, .27], [.73, .27], [.5, .5], [.27, .73], [.73, .73]],
+      6: [[.27, .25], [.73, .25], [.27, .5], [.73, .5], [.27, .75], [.73, .75]] }[n];
+    var out = '<rect class="die-' + side + '" x="' + x + '" y="' + y + '" width="' + s + '" height="' + s + '" rx="6"/>';
+    p.forEach(function (q) { out += '<circle class="pip-' + side + '" cx="' + (x + q[0] * s) + '" cy="' + (y + q[1] * s) + '" r="3.6"/>'; });
+    return out;
+  }
+
+  /* state = { checkers: {point: [side, n]}, selected: point, movable: [points],
+   *           targets: [points], lastMove: [points], dice: [a, b], diceSide, cube } */
+  function svg(state) {
+    var o = '<svg class="board" viewBox="0 0 ' + W + ' ' + H + '" role="img" aria-label="Plateau de backgammon" xmlns="http://www.w3.org/2000/svg">';
+    o += '<rect class="board-frame" x="0" y="0" width="' + W + '" height="' + H + '" rx="10"/>';
+    o += '<rect class="board-bed" x="' + SIDE + '" y="' + TB + '" width="' + (TRAY_X - 8 - SIDE) + '" height="' + (H - 2 * TB) + '"/>';
+    o += '<rect class="board-bar" x="' + (SIDE + 6 * PW) + '" y="' + TB + '" width="' + BAR + '" height="' + (H - 2 * TB) + '"/>';
+    o += '<rect class="board-tray" x="' + TRAY_X + '" y="' + TB + '" width="' + TRAY_W + '" height="' + (H / 2 - TB - 4) + '" rx="4"/>';
+    o += '<rect class="board-tray" x="' + TRAY_X + '" y="' + (H / 2 + 4) + '" width="' + TRAY_W + '" height="' + (H / 2 - TB - 4) + '" rx="4"/>';
+    for (var point = 1; point <= 24; point++) {
+      var pl = place(point), x = colX(pl.col), cls = point % 2 === 1 ? "point-a" : "point-b"; // impairs en noyer, pairs en chêne
+      var base = pl.top ? TB : H - TB, apex = pl.top ? TB + PH : H - TB - PH;
+      o += '<polygon class="' + cls + '" points="' + x + ',' + base + ' ' + (x + PW) + ',' + base + ' ' + (x + PW / 2) + ',' + apex + '"/>';
+      if ((state.targets || []).indexOf(point) >= 0)
+        o += '<polygon class="target-zone" points="' + x + ',' + base + ' ' + (x + PW) + ',' + base + ' ' + (x + PW / 2) + ',' + apex + '"/>';
+      if ((state.lastMove || []).indexOf(point) >= 0)
+        o += '<rect class="last-move" x="' + (x + 6) + '" y="' + (pl.top ? TB : H - TB - 5) + '" width="' + (PW - 12) + '" height="5" rx="2.5"/>';
+      o += '<text class="point-number" x="' + (x + PW / 2) + '" y="' + (pl.top ? 19 : H - 9) + '">' + point + '</text>';
+      var c = (state.checkers || {})[point];
+      if (c) {
+        var shown = Math.min(c[1], 5);
+        for (var i = 0; i < shown; i++) {
+          var cy = pl.top ? TB + R + 1 + i * (2 * R + 1) : H - TB - R - 1 - i * (2 * R + 1);
+          var extra = "";
+          if (i === shown - 1 && state.selected === point) extra = "selected";
+          else if (i === shown - 1 && (state.movable || []).indexOf(point) >= 0) extra = "movable";
+          o += checker(x + PW / 2, cy, c[0], extra);
+          if (i === shown - 1 && c[1] > 5)
+            o += '<text class="checker-count count-' + c[0] + '" x="' + (x + PW / 2) + '" y="' + (cy + 6) + '">' + c[1] + '</text>';
+        }
+      }
+    }
+    if (state.dice) {
+      var dx = colX(8) + 6, dy = H / 2 - 18, side = state.diceSide || "player";
+      o += die(dx, dy, state.dice[0], side) + die(dx + 46, dy, state.dice[1], side);
+    }
+    if (state.cube) {
+      var bx = SIDE + 6 * PW + 2;
+      o += '<rect class="cube-face" x="' + bx + '" y="' + (H / 2 - 18) + '" width="36" height="36" rx="6"/>';
+      o += '<text class="cube-value" x="' + (bx + 18) + '" y="' + (H / 2 + 6) + '">' + state.cube + '</text>';
+    }
+    return o + '</svg>';
+  }
+
+  var OPENING = { 24: ["player", 2], 13: ["player", 5], 8: ["player", 3], 6: ["player", 5],
+    1: ["computer", 2], 12: ["computer", 5], 17: ["computer", 3], 19: ["computer", 5] };
+  return { svg: svg, OPENING: OPENING };
+})();

docs/identite/charte/bundle.css

@@ -0,0 +1,165 @@
+/* Ustagammon — styles des composants.
+ * Toutes les valeurs viennent de tokens.json (variables CSS du même nom).
+ * Les noms de classes reprennent ceux de web/app.css : ce fichier peut être
+ * recopié dans l'application presque tel quel. */
+
+body {
+  margin: 0;
+  font-family: var(--font-sans);
+  font-size: 17px;
+  line-height: 25px;
+  color: var(--text);
+  background: var(--background);
+}
+
+a { color: var(--accent); text-underline-offset: 3px; }
+
+:focus-visible {
+  outline: 3px solid var(--focus);
+  outline-offset: 2px;
+}
+
+/* ------------------------------------------------------------ Barre haute */
+
+.topbar {
+  display: flex;
+  gap: var(--space-2);
+  align-items: center;
+  padding-block: var(--space-2);
+}
+.topbar .brand { flex: 1; display: flex; align-items: center; min-width: 0; }
+.topbar .brand img { height: 32px; width: auto; display: block; }
+.topbar h1 { flex: 1; margin: 0; font-size: 20px; line-height: 26px; font-weight: 700; }
+
+/* ---------------------------------------------------------------- Boutons */
+
+button, .button {
+  min-height: var(--button-height);
+  padding: 0 20px;
+  font: inherit;
+  font-weight: 700;
+  color: var(--on-accent);
+  background: var(--accent);
+  border: 2px solid var(--accent);
+  border-radius: var(--radius-pill);
+  cursor: pointer;
+}
+button.secondary, .button.secondary {
+  color: var(--text);
+  background: transparent;
+  border-color: var(--border-strong);
+}
+button.quiet, .button.quiet {
+  min-height: 44px;
+  padding: 0 12px;
+  color: var(--text);
+  background: transparent;
+  border-color: transparent;
+  font-weight: 500;
+}
+.topbar button { min-height: 44px; padding: 0 14px; font-size: 15px; }
+button:disabled { opacity: 0.45; cursor: default; }
+
+.actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
+.actions button { flex: 1; }
+
+/* ------------------------------------------------------- Zone de consigne */
+
+.pips { margin: var(--space-1) 0 0; font-size: 15px; line-height: 20px; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
+.info, .prompt { min-height: 25px; margin: 6px 0; }
+.info { color: var(--muted); }
+.prompt { font-weight: 700; }
+.prompt.thinking::after { content: ""; animation: thinking 1.2s steps(4, end) infinite; }
+@keyframes thinking { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
+@media (prefers-reduced-motion: reduce) { .prompt.thinking::after { animation: none; content: "…"; } }
+
+/* ---------------------------------------------------------------- Plateau */
+
+.board { display: block; width: 100%; height: auto; user-select: none; -webkit-tap-highlight-color: transparent; }
+.board-frame { fill: var(--frame); }
+.board-bed { fill: var(--bed); }
+.board-bar { fill: var(--bar); }
+.board-tray { fill: var(--tray); }
+.point-a { fill: var(--point-a); }
+.point-b { fill: var(--point-b); }
+.point-number { fill: var(--point-number); font-size: 13px; font-weight: 500; text-anchor: middle; font-family: var(--font-sans); }
+.checker { stroke-width: 2; }
+.checker-player { fill: var(--checker-player); stroke: var(--checker-player-edge); }
+.checker-computer { fill: var(--checker-computer); stroke: var(--checker-computer-edge); }
+.checker-ring { fill: none; stroke-width: 1.5; }
+.checker-player + .checker-ring, .ring-player { stroke: var(--checker-player-edge); }
+.ring-computer { stroke: var(--checker-computer-edge); }
+.checker.movable { stroke: var(--highlight); stroke-width: 3; }
+.checker.selected { stroke: var(--highlight); stroke-width: 6; }
+.checker-count { font-size: 18px; font-weight: 700; text-anchor: middle; font-family: var(--font-sans); }
+.count-player { fill: var(--count-player); }
+.count-computer { fill: var(--count-computer); }
+.target-zone { fill: var(--target); }
+.last-move { fill: var(--last-move); }
+.die-player { fill: var(--die-player); stroke: var(--checker-player-edge); stroke-width: 1.5; }
+.die-computer { fill: var(--die-computer); stroke: var(--checker-computer-edge); stroke-width: 1.5; }
+.pip-player { fill: var(--pip-player); }
+.pip-computer { fill: var(--pip-computer); }
+.cube-face { fill: var(--cube); stroke: var(--checker-player-edge); stroke-width: 2; }
+.cube-value { fill: var(--cube-text); font-size: 17px; font-weight: 800; text-anchor: middle; font-family: var(--font-sans); }
+
+/* ------------------------------------------------------------------ Cartes */
+
+.card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-raised);
+  padding: var(--space-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+.overline { font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
+
+/* --------------------------------------------------- Appréciation d'un coup */
+
+.verdict {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  font-weight: 700;
+  font-size: 15px;
+  line-height: 20px;
+}
+.verdict svg { width: 18px; height: 18px; flex: none; }
+.verdict-good { color: var(--verdict-good); }
+.verdict-doubtful { color: var(--verdict-doubtful); }
+.verdict-bad { color: var(--verdict-bad); }
+
+/* -------------------------------------------------------- Fiche de glossaire */
+
+.glossary-card h3 { margin: 0; font-size: 20px; line-height: 26px; font-weight: 700; }
+.glossary-card .en { color: var(--muted); font-size: 15px; line-height: 20px; font-style: italic; }
+.glossary-card p { margin: 0; }
+.glossary-card .see { font-size: 15px; line-height: 20px; color: var(--muted); }
+
+/* ------------------------------------------------ Demander à une IA (prompt) */
+
+.ask-ai { display: flex; flex-direction: column; gap: var(--space-2); }
+.ask-ai pre {
+  margin: 0;
+  max-height: 7.5em;
+  overflow: auto;
+  padding: var(--space-3);
+  background: var(--surface-sunken);
+  border-radius: var(--radius-md);
+  font: 15px/20px var(--font-sans);
+  white-space: pre-wrap;
+  color: var(--text);
+}
+.ask-ai .done { color: var(--verdict-good); font-weight: 700; font-size: 15px; }
+
+/* ---------------------------------------------------------- Carte de leçon */
+
+.lesson-card { flex-direction: row; align-items: center; gap: var(--space-3); }
+.lesson-card .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+.lesson-card h3 { margin: 0; font-size: 17px; line-height: 25px; font-weight: 700; }
+.lesson-card .state { font-size: 15px; line-height: 20px; color: var(--muted); }
+.progress { height: 6px; border-radius: var(--radius-pill); background: var(--surface-sunken); overflow: hidden; }
+.progress > span { display: block; height: 100%; background: var(--accent); border-radius: inherit; }

docs/identite/charte/guide-de-marque.md

@@ -0,0 +1,65 @@
+Ustagammon apprend le backgammon comme on l'apprend à une table de café : quelqu'un qui sait montre à quelqu'un qui découvre. L'interface est **chaleureuse, artisanale, claire et intemporelle**, discrètement turque par la matière (le bois, l'ivoire, la brique), jamais par le folklore. Elle doit donner envie à un débutant sans paraître naïve à un joueur confirmé : un maître bienveillant, pas un logiciel d'analyse, pas un casino.
+
+Ce système s'applique à la PWA (`web/`). Les noms des couleurs du plateau sont exactement ceux des variables de `web/app.css` ; `components/bundle.css` reprend ses noms de classes et peut y être recopié.
+
+## Contenus et ton
+
+- **Vouvoiement**, phrases courtes, verbes d'action. Le joueur est « vous », l'adversaire est « l'ordinateur » (ou le nom d'un joueur réel).
+- **Les mots du jeu**, toujours les mêmes, ceux du glossaire (`docs/glossaire/`) : flèche, pion, barre, videau, compte de points, sortir. Un terme technique s'explique la première fois qu'il apparaît, avec un lien vers sa fiche.
+- **Les boutons disent ce qu'ils font** : « Lancer les dés », « Annuler », « Doubler », « Prendre », « Passer », « Nouvelle partie ». Pas de « OK », pas de « Valider ». Les textes de l'app vivent dans `app/src/ui/texts.ts`.
+- **Le maître encourage, il ne juge pas.** « Bien joué : ce coup protège votre point 8. » plutôt que « Coup correct (−0,012) ». Les chiffres d'équité ne viennent que sur demande.
+- **Les erreurs disent quoi faire** : « Ce pion ne peut pas aller là : la flèche est tenue par deux pions adverses. »
+- **Ni émoji, ni point d'exclamation en série, ni majuscules de réclame.** Les capitales sont réservées au style `overline`.
+- Le nom s'écrit **Ustagammon**, en un mot, majuscule initiale.
+
+## Couleurs
+
+La palette, c'est le bois, les pions et le café, avec **un seul accent : le rouge brique** (`accent`).
+
+- Fond de page `background`, cartes et panneaux `surface`, zones en retrait `surface-sunken`.
+- Texte `text` ; texte secondaire `muted`, jamais pour une consigne.
+- `accent` est rare et a toujours un sens : le bouton principal de l'écran (un seul), un lien, le pion sélectionné (`highlight`), la case où il peut aller (`target`), le focus clavier (`focus`). Ce n'est jamais une couleur de décoration ni une couleur d'erreur.
+- `accent-soft` : fond léger pour signaler « c'est à vous », avec du texte `text` dessus.
+- Les appréciations de coups ont leurs propres couleurs, distinctes de la brique : `verdict-good` (vert), `verdict-doubtful` (ocre), `verdict-bad` (lie-de-vin). **Toujours avec le mot et l'icône**, jamais la couleur seule.
+- `brand-laiton` (via `last-move`) marque le dernier coup joué, comme les charnières en laiton d'un plateau de tavla. Rien d'autre.
+- Le plateau : cadre `frame` en noyer, fond `bed`, flèches impaires en `point-a` (noyer clair) et paires en `point-b` (chêne), barre `bar`, sorties `tray`. Le joueur a les pions ivoire (`checker-player`, l'apprenti), l'ordinateur les pions noyer (`checker-computer`, le maître), comme dans le logo.
+- **À éviter** : le vert feutre de casino, le noir et or, les dégradés, les néons.
+
+Les deux thèmes, clair et sombre, sont complets. Tous les textes atteignent 4,5:1 sur leurs fonds dans les deux thèmes ; les contours et marques porteuses de sens, 3:1.
+
+## Typographie
+
+Une seule famille, **Alegreya Sans** (licence SIL OFL, fichiers dans `fonts/`), sans empattement humaniste, chaleureuse et lisible en petit. À embarquer dans l'app : elle doit fonctionner hors ligne.
+
+- `display` (32px, 800) : un seul par écran, accueil et fin de partie.
+- `title` (24px) : titre d'écran ; `heading` (20px) : titre de section ou de carte.
+- `body` (17px) : tout le texte à lire, jamais plus petit. `body-strong` pour la consigne du moment et les boutons. `body-italic` pour la parole du maître ou un exemple.
+- `caption` (15px) : compte de points, légendes. `overline` (13px, capitales espacées) : étiquette au-dessus d'un titre, avec parcimonie.
+- Chiffres alignés (`font-variant-numeric: tabular-nums`) dès que des nombres se comparent (compte de points, scores).
+
+## Formes, espace et profondeur
+
+- **Boutons ronds comme des pions** : `radius-pill`, hauteur `button-height` (48px). Aucune cible tactile sous 44px.
+- Cartes et fiches : `radius-md`, contour `border`, ombre `shadow-raised` et rien de plus profond. Dés et videau : `radius-sm`.
+- Espacements : `space-1` à `space-8`. Gouttière de page `space-4` sur téléphone ; écart entre blocs `space-6`. Contenu limité à `page-width` sur grand écran.
+- Le plateau occupe toute la largeur sur téléphone ; c'est lui le héros de l'écran de jeu, pas les panneaux autour.
+- Focus clavier : anneau `focus` plein de 3px, décalé de 2px, sur tous les éléments interactifs.
+
+## Mouvement
+
+Sobre et utile : un pion glisse vers sa flèche (150 à 250 ms, sans rebond), les dés roulent brièvement. Les trois points de « l'ordinateur réfléchit » sont la seule animation en boucle. Tout s'arrête avec `prefers-reduced-motion`.
+
+## Iconographie
+
+- Le **symbole** (deux pions sur une flèche, le 8 caché) et le **logotype** (les « mm » en flèches) sont dans le groupe Logos ; versions couleur, sombre, noire et blanche. Ne jamais les redessiner, déformer ou recolorer.
+- Barre haute : `logo-horizontal-couleur.svg` en thème clair, `logo-horizontal-sombre.svg` en thème sombre, 32px de haut.
+- Icônes d'interface : traits simples de 2px à bouts ronds, dessinés en SVG dans le code (pas de police d'icônes, pas d'émoji). Les seules icônes du système pour l'instant : les trois appréciations de coups (coche, point d'interrogation, croix) et la copie (deux feuillets).
+- Dés, pions et videau sont dessinés en SVG avec les couleurs du plateau, jamais en images.
+
+## Interaction
+
+Règles de comportement (réponse immédiate, annuler plutôt que confirmer, mouvement, vibrations, clavier, mises en page de l’écran de jeu) : section « Interaction ».
+
+## Composants
+
+Plateau (`Board`) et ses pièces (`Checker`, `Die`, `DoublingCube`), boutons (`Button`), barre haute (`TopBar`), zone de consigne (`GamePrompt`), appréciation d’un coup (`MoveVerdict`), pictogrammes (`Icons`), fiche de glossaire (`GlossaryCard`), carte de leçon (`LessonCard`) et « Demander à une IA » (`AskAI`). Chacun a sa fiche avec ses règles d'usage et un aperçu dans les deux thèmes.

docs/identite/charte/interaction.md

@@ -0,0 +1,72 @@
+# Interaction
+
+Ustagammon doit se sentir **net et rapide**, comme un outil bien réglé : chaque toucher répond tout de suite, rien ne saute, rien n'interrompt la partie sans raison. La chaleur vient de la matière et du ton ; la précision vient du comportement.
+
+## Principes
+
+1. **Réponse immédiate.** Un toucher produit un effet visible en moins de 100 ms : le pion part, le bouton s'enfonce. Le moteur calcule ensuite, en arrière-plan ; l'interface ne l'attend jamais pour réagir.
+2. **Rien ne bouge sous le doigt.** Les zones de l'écran de jeu ont une hauteur fixe : seuls leurs contenus changent. Une ligne vide garde sa place.
+3. **Annuler plutôt que confirmer.** Une action se fait tout de suite et se rattrape pendant 10 s par un bandeau « Reprendre » (nouvelle partie, abandon). Une boîte de confirmation n'est permise que pour une décision de jeu irréversible qui engage la partie : prendre ou passer un double, doubler.
+4. **Une seule action principale par moment**, en brique, à droite, sous le pouce.
+5. **Le joueur garde la main.** L'app ne joue jamais à sa place : quand aucun coup n'est possible, les dés se barrent et le joueur passe en les touchant (demande explicite de Pierre).
+6. **Le maître parle après le coup, discrètement** (ADR 0011) : une ligne réservée sous le plateau, qui s'ouvre sur l'explication si on la touche. Jamais de fenêtre qui s'impose.
+7. **Le sens passe toujours par deux canaux** : couleur et mot, vibration et marque visible, raccourci et bouton.
+
+## Mouvement
+
+| Jeton | Valeur | Usage |
+| --- | --- | --- |
+| `duration-instant` | 90ms | Retour d'appui d'un bouton, apparition du contour d'un pion jouable. |
+| `duration-fast` | 160ms | Pion qui glisse d'une flèche à l'autre, dés qui se posent, bandeaux. |
+| `duration-moderate` | 240ms | Feuille du menu qui monte, panneau de fin de partie, bascule de mise en page. |
+| `easing-standard` | cubic-bezier(0.2, 0, 0, 1) | Tout ce qui se déplace : départ franc, arrivée douce. |
+| `easing-exit` | cubic-bezier(0.4, 0, 1, 1) | Ce qui disparaît. |
+
+- Pas de rebond, pas d'élastique, pas de fondu de plus de 240 ms.
+- Les coups de l'ordinateur se jouent demi-coup par demi-coup, 160 ms par pion, 120 ms de pause entre deux : on suit le coup sans l'attendre.
+- Le bouton enfoncé descend de 1 px et s'assombrit de 6 %, sans ombre.
+- `prefers-reduced-motion` : les déplacements deviennent des apparitions instantanées ; les dés ne roulent pas.
+
+## Vibrations
+
+Activées par défaut, désactivables dans le menu (« Vibrations »). Elles doublent un événement visible, jamais seules. Rien ne vibre pour un toucher de bouton ni pour le lancer des dés.
+
+| Moment | Motif (ms) |
+| --- | --- |
+| Votre pion se pose | `12` |
+| Un pion est frappé | `25, 40, 25` |
+| L'ordinateur propose de doubler | `40, 60, 40` |
+| Fin de partie gagnée | `30, 50, 30, 50, 60` |
+| Fin de partie perdue | `60` |
+
+Les durées se règlent en main sur le Fairphone 4. Une seule vibration à la fois : la dernière annule la précédente.
+
+## Clavier (ordinateur)
+
+Chaque action a son raccourci, affiché sur le bouton en petite touche (`kbd`) quand un clavier est détecté. `?` ouvre la liste.
+
+| Touche | Action |
+| --- | --- |
+| `Espace` | Lancer les dés ; jouer le coup quand il est complet ; passer quand aucun coup n'est possible |
+| `←` `→` | Choisir un pion jouable (le focus se voit : anneau `focus`) |
+| `↑` `↓` | Choisir sa case d'arrivée |
+| `Entrée` | Poser le pion |
+| `Z` | Annuler le demi-coup (aussi `Ctrl+Z`) |
+| `D` | Doubler |
+| `P` / `N` | Prendre / passer, quand l'ordinateur double |
+| `F` | Plein écran |
+| `M` | Menu |
+| `?` | Aide et raccourcis |
+| `Échap` | Fermer le menu, l'aide ou la bulle ouverte ; ne touche jamais à la partie |
+
+Le plateau entier se joue au clavier : c'est aussi ce qui le rend accessible aux lecteurs d'écran.
+
+## Pictogrammes
+
+Trait de 2 px à bouts ronds, sur une grille de 20 × 20, `currentColor`, dessinés en SVG dans le code. Le jeu complet : menu, aide, plein écran, quitter le plein écran, annuler (flèche de retour), revoir (flèche circulaire), fermer, chevron, copier, et les trois appréciations (coche, point d'interrogation, croix dans un cercle). En portrait, la barre haute affiche un libellé de 13 px sous chaque pictogramme ; en paysage et sur ordinateur, le pictogramme seul avec son `aria-label`.
+
+## Mises en page de l'écran de jeu
+
+- **Portrait** : barre haute, bandeau de l'ordinateur, plateau, bandeau du joueur (teinté `accent-soft` quand c'est à lui), ligne du maître ou du dernier coup, consigne, et barre d'actions collée en bas. Hauteurs fixes.
+- **Paysage** (dès que le téléphone est tourné ; ADR 0012) : le plateau est l'écran. Colonne de commandes à gauche dans le cadre (menu, videau, annuler ou revoir), sorties à droite, comptes de points en pastilles aux deux bouts de la barre, consigne et dés dans la bande centrale. Numéros des flèches à 12 px au moins.
+- **Ordinateur** : plateau à gauche, colonne à droite avec les bandeaux des joueurs, la liste des coups, la consigne, les actions et leurs raccourcis.

docs/identite/charte/recette-ux.md

@@ -0,0 +1,45 @@
+# Recette design de l'écran de jeu
+
+Critères vérifiables sur les captures de `make test-browser` (412×915,
+915×412, 844×320, thèmes clair et sombre) et à la main sur le Fairphone 4.
+Chaque ligne se coche ou se refuse ; une ligne refusée dit pourquoi.
+Référence : `interaction.md`, maquettes « Révision UX » du canevas.
+
+## Toutes tailles
+
+- [ ] Flèches impaires en `point-a`, paires en `point-b` ; 12 et 13 de couleurs différentes.
+- [ ] Une seule action principale (brique) visible à la fois.
+- [ ] Aucun `window.confirm` ni `alert` dans le code de l'app (`grep -rn "confirm(\|alert(" app/src` vide).
+- [ ] Aucune cible tactile sous 44 × 44 px (boutons, pictogrammes, dés, videau).
+- [ ] Textes à lire : 13 px au moins ; numéros des flèches : 12 px au moins.
+- [ ] Thème sombre : aucune couleur codée en dur hors `tokens` ; le cadre se distingue du fond.
+- [ ] Anneau de focus `focus` visible au clavier sur chaque élément interactif.
+- [ ] `overscroll-behavior: none` : tirer vers le bas ne recharge pas la page.
+
+## Portrait (412 × 915)
+
+- [ ] Ordre de haut en bas : barre haute, bandeau ordinateur, plateau, bandeau joueur, ligne du maître ou du dernier coup, consigne, barre d'actions collée en bas.
+- [ ] Stabilité : sur une partie complète, la position verticale du plateau et de la barre d'actions ne varie pas d'un pixel (comparer les boîtes entre deux captures successives).
+- [ ] Barre haute : pictogrammes avec libellé de 13 px (Aide, Plein écran, Menu) ; pas de bouton « Nouvelle partie ».
+- [ ] Comptes de points en 20 px gras, chiffres alignés ; le bandeau du joueur qui a la main est teinté `accent-soft` ; l'écart s'écrit « mène de N ».
+- [ ] Plus de durée de calcul « (0,5 s) » dans les messages.
+- [ ] Aucun coup possible : dés barrés et message ; le tour ne passe qu'au toucher des dés.
+- [ ] Conseil du maître : une ligne, après le coup du joueur seulement ; toucher l'ouvre.
+
+## Paysage (915 × 412 et 844 × 320)
+
+- [ ] Le cadre noyer touche les quatre bords ; aucune marge de page, aucune colonne de texte.
+- [ ] Flèches d'au moins 44 px de large ; pions d'au moins 22 px de diamètre à 844 × 320.
+- [ ] Colonne de commandes à gauche : menu en haut, videau au milieu, annuler (ou revoir) en bas ; colonne des sorties libre.
+- [ ] Comptes en pastilles aux deux bouts de la barre, 13 px, couleur du camp ; ils ne chevauchent pas les pions sur la barre.
+- [ ] Consigne et dés dans la bande centrale, sans chevaucher un pion.
+- [ ] Rotation portrait ↔ paysage en cours de partie : la position, la sélection et les dés sont conservés.
+- [ ] Fin de partie : panneau centré sur un voile, « Revoir la partie » et « Nouvelle partie ».
+
+## Comportement
+
+- [ ] Un toucher sur un pion produit un effet visible en moins de 100 ms (trace de performance de Playwright).
+- [ ] Déplacements à 160 ms en `easing-standard`, sans rebond ; coups de l'ordinateur pion par pion ; tout est instantané avec `prefers-reduced-motion`.
+- [ ] « Nouvelle partie » depuis le menu : effet immédiat, bandeau « Reprendre l'ancienne » 10 s, et la reprise restaure la partie exacte.
+- [ ] Vibrations aux quatre moments, coupées par l'interrupteur du menu (test unitaire sur `haptic()` ; ressenti à la main).
+- [ ] Écran maintenu allumé pendant une partie, interrupteur dans le menu.

docs/identite/charte/tokens.json

@@ -0,0 +1,563 @@
+{
+ "name": "Ustagammon",
+ "version": 1,
+ "color": {
+  "themes": [
+   {
+    "id": "light",
+    "name": "Clair"
+   },
+   {
+    "id": "dark",
+    "name": "Sombre"
+   }
+  ],
+  "tokens": [
+   {
+    "name": "background",
+    "value": {
+     "light": "#F5EFE5",
+     "dark": "#17110D"
+    },
+    "usage": "Fond de page (papier ivoire / café torréfié)."
+   },
+   {
+    "name": "surface",
+    "value": {
+     "light": "#FFFCF6",
+     "dark": "#221913"
+    },
+    "usage": "Fond des cartes, fiches de glossaire, panneaux posés sur `background`."
+   },
+   {
+    "name": "surface-sunken",
+    "value": {
+     "light": "#ECE3D4",
+     "dark": "#2C211A"
+    },
+    "usage": "Zones en retrait : bloc de prompt à copier, piste de progression."
+   },
+   {
+    "name": "text",
+    "value": {
+     "light": "#2B1D15",
+     "dark": "#EFE5D5"
+    },
+    "usage": "Texte courant et titres, sur `background`, `surface` et `surface-sunken`."
+   },
+   {
+    "name": "muted",
+    "value": {
+     "light": "#6B5C50",
+     "dark": "#A99886"
+    },
+    "usage": "Texte secondaire (compte de points, légendes, aide), sur `background` et `surface`."
+   },
+   {
+    "name": "border",
+    "value": {
+     "light": "#DED2C0",
+     "dark": "#3A2D24"
+    },
+    "usage": "Séparateurs et contours décoratifs de cartes (ne porte aucun sens)."
+   },
+   {
+    "name": "border-strong",
+    "value": {
+     "light": "#8E7D6A",
+     "dark": "#7D6B5B"
+    },
+    "usage": "Contour des boutons secondaires et des champs : 3:1 sur `background` et `surface`."
+   },
+   {
+    "name": "accent",
+    "value": {
+     "light": "#A8432B",
+     "dark": "#D0694B"
+    },
+    "usage": "Rouge brique, l'accent unique : bouton principal, liens, case où le pion peut aller, focus. Texte en brique sur `background` et `surface`."
+   },
+   {
+    "name": "on-accent",
+    "value": {
+     "light": "#FFFFFF",
+     "dark": "#1A110C"
+    },
+    "usage": "Texte et icônes posés sur un aplat `accent`."
+   },
+   {
+    "name": "accent-soft",
+    "value": {
+     "light": "#F1D9CF",
+     "dark": "#4A2519"
+    },
+    "usage": "Fond léger d'accent : puce « à toi de jouer », sélection dans une liste. Texte `text` dessus."
+   },
+   {
+    "name": "focus",
+    "value": {
+     "light": "#A8432B",
+     "dark": "#E58A6E"
+    },
+    "usage": "Anneau de focus clavier, 3 px plein, décalé de 2 px : 3:1 sur tous les fonds."
+   },
+   {
+    "name": "error",
+    "value": {
+     "light": "#8C1C3A",
+     "dark": "#F08FA6"
+    },
+    "usage": "Message d'erreur technique (texte), toujours accompagné d'un mot. Lie-de-vin, distinct de la brique."
+   },
+   {
+    "name": "verdict-good",
+    "value": {
+     "light": "#2F6B4F",
+     "dark": "#7CCBA4"
+    },
+    "usage": "« Bon coup » : texte et icône, toujours avec le mot. Sur `background` et `surface`."
+   },
+   {
+    "name": "verdict-doubtful",
+    "value": {
+     "light": "#7E5A0F",
+     "dark": "#E0B04F"
+    },
+    "usage": "« Imprécision » (doubtful) : texte et icône, toujours avec le mot."
+   },
+   {
+    "name": "verdict-bad",
+    "value": {
+     "light": "#8C1C3A",
+     "dark": "#F08FA6"
+    },
+    "usage": "« Erreur » et « grosse erreur » (bad, very bad) : texte et icône, toujours avec le mot."
+   },
+   {
+    "name": "brand-noyer",
+    "value": {
+     "light": "#4A2E1F",
+     "dark": "#4A2E1F"
+    },
+    "usage": "Noyer du logo : pion maître. Ne sert pas au texte de l'interface."
+   },
+   {
+    "name": "brand-ivoire",
+    "value": {
+     "light": "#F3EAD8",
+     "dark": "#F3EAD8"
+    },
+    "usage": "Ivoire du logo : pion apprenti, fond de l'icône d'application."
+   },
+   {
+    "name": "brand-laiton",
+    "value": {
+     "light": "#8F6A1C",
+     "dark": "#D6A64A"
+    },
+    "usage": "Laiton, comme les charnières d'un plateau de tavla : marque du dernier coup joué, rien d'autre."
+   },
+   {
+    "name": "frame",
+    "value": {
+     "light": "#4A2E1F",
+     "dark": "#2A1A10"
+    },
+    "usage": "Cadre du plateau (noyer)."
+   },
+   {
+    "name": "bed",
+    "value": {
+     "light": "#E9DCC4",
+     "dark": "#4A3626"
+    },
+    "usage": "Fond du plateau, entre les flèches."
+   },
+   {
+    "name": "bar",
+    "value": {
+     "light": "#3F2619",
+     "dark": "#24170E"
+    },
+    "usage": "Barre centrale."
+   },
+   {
+    "name": "tray",
+    "value": {
+     "light": "#3A2418",
+     "dark": "#22150D"
+    },
+    "usage": "Plateaux de sortie, à droite."
+   },
+   {
+    "name": "point-a",
+    "value": {
+     "light": "#6B4430",
+     "dark": "#3A2519"
+    },
+    "usage": "Flèches impaires (1, 3, 5…), noyer clair."
+   },
+   {
+    "name": "point-b",
+    "value": {
+     "light": "#C9AE88",
+     "dark": "#7E6142"
+    },
+    "usage": "Flèches paires (2, 4, 6…), chêne."
+   },
+   {
+    "name": "point-number",
+    "value": {
+     "light": "#F3EAD8",
+     "dark": "#CDBFA8"
+    },
+    "usage": "Numéros des flèches, posés sur `frame`."
+   },
+   {
+    "name": "checker-player",
+    "value": {
+     "light": "#F7F0E2",
+     "dark": "#EDE3CF"
+    },
+    "usage": "Pions du joueur : ivoire, l'apprenti."
+   },
+   {
+    "name": "checker-player-edge",
+    "value": {
+     "light": "#8C7A62",
+     "dark": "#8E7C64"
+    },
+    "usage": "Contour et filet des pions du joueur."
+   },
+   {
+    "name": "checker-computer",
+    "value": {
+     "light": "#2E1C12",
+     "dark": "#140D09"
+    },
+    "usage": "Pions de l'ordinateur : noyer sombre, le maître."
+   },
+   {
+    "name": "checker-computer-edge",
+    "value": {
+     "light": "#120A05",
+     "dark": "#A8957D"
+    },
+    "usage": "Contour et filet des pions de l'ordinateur ; clair en thème sombre pour rester visible."
+   },
+   {
+    "name": "count-player",
+    "value": {
+     "light": "#2B1D15",
+     "dark": "#2B1D15"
+    },
+    "usage": "Nombre écrit sur une pile de pions du joueur."
+   },
+   {
+    "name": "count-computer",
+    "value": {
+     "light": "#F3EAD8",
+     "dark": "#F3EAD8"
+    },
+    "usage": "Nombre écrit sur une pile de pions de l'ordinateur."
+   },
+   {
+    "name": "die-player",
+    "value": {
+     "light": "#F7F0E2",
+     "dark": "#EDE3CF"
+    },
+    "usage": "Dés du joueur."
+   },
+   {
+    "name": "pip-player",
+    "value": {
+     "light": "#2B1D15",
+     "dark": "#2B1D15"
+    },
+    "usage": "Points des dés du joueur."
+   },
+   {
+    "name": "die-computer",
+    "value": {
+     "light": "#2E1C12",
+     "dark": "#140D09"
+    },
+    "usage": "Dés de l'ordinateur."
+   },
+   {
+    "name": "pip-computer",
+    "value": {
+     "light": "#F3EAD8",
+     "dark": "#EDE3CF"
+    },
+    "usage": "Points des dés de l'ordinateur."
+   },
+   {
+    "name": "cube",
+    "value": {
+     "light": "#F7F0E2",
+     "dark": "#EDE3CF"
+    },
+    "usage": "Face du videau."
+   },
+   {
+    "name": "cube-text",
+    "value": {
+     "light": "#2B1D15",
+     "dark": "#2B1D15"
+    },
+    "usage": "Valeur du videau (2, 4, 8…)."
+   },
+   {
+    "name": "highlight",
+    "value": {
+     "light": "#A8432B",
+     "dark": "#E07A5A"
+    },
+    "usage": "Contour d'un pion jouable ou sélectionné du joueur : la brique. Il contraste à 3:1 au moins avec le pion ivoire (clair) ou avec le fond du plateau (sombre)."
+   },
+   {
+    "name": "target",
+    "value": {
+     "light": "rgba(168,67,43,0.32)",
+     "dark": "rgba(224,122,90,0.38)"
+    },
+    "usage": "Voile sur la flèche où le pion sélectionné peut aller."
+   },
+   {
+    "name": "last-move",
+    "value": {
+     "light": "{brand-laiton}",
+     "dark": "{brand-laiton}"
+    },
+    "usage": "Marque du dernier coup joué (laiton)."
+   }
+  ]
+ },
+ "type": {
+  "fonts": [
+   {
+    "family": "Alegreya Sans",
+    "file": "fonts/AlegreyaSans-Regular.ttf",
+    "weight": "400"
+   },
+   {
+    "family": "Alegreya Sans",
+    "file": "fonts/AlegreyaSans-Italic.ttf",
+    "weight": "400",
+    "style": "italic"
+   },
+   {
+    "family": "Alegreya Sans",
+    "file": "fonts/AlegreyaSans-Medium.ttf",
+    "weight": "500"
+   },
+   {
+    "family": "Alegreya Sans",
+    "file": "fonts/AlegreyaSans-Bold.ttf",
+    "weight": "700"
+   },
+   {
+    "family": "Alegreya Sans",
+    "file": "fonts/AlegreyaSans-ExtraBold.ttf",
+    "weight": "800"
+   }
+  ],
+  "families": {
+   "sans": "\"Alegreya Sans\", \"Gill Sans\", \"Segoe UI\", system-ui, sans-serif"
+  },
+  "groups": [
+   {
+    "name": "Titres",
+    "family": "sans",
+    "styles": [
+     {
+      "name": "display",
+      "fontSize": "32px",
+      "lineHeight": "36px",
+      "fontWeight": 800,
+      "letterSpacing": "-0.01em",
+      "sample": "Une partie contre le maître",
+      "usage": "Titre d'accueil et de fin de partie, une fois par écran."
+     },
+     {
+      "name": "title",
+      "fontSize": "24px",
+      "lineHeight": "30px",
+      "fontWeight": 700,
+      "sample": "Le point 8",
+      "usage": "Titre d'écran (leçon, aide)."
+     },
+     {
+      "name": "heading",
+      "fontSize": "20px",
+      "lineHeight": "26px",
+      "fontWeight": 700,
+      "sample": "Les ouvertures",
+      "usage": "Sous-titre de section, titre de carte."
+     }
+    ]
+   },
+   {
+    "name": "Texte",
+    "family": "sans",
+    "styles": [
+     {
+      "name": "body",
+      "fontSize": "17px",
+      "lineHeight": "25px",
+      "fontWeight": 400,
+      "sample": "Ce pion peut rejoindre votre point 8.",
+      "usage": "Texte courant ; jamais en dessous de 17px pour le contenu à lire."
+     },
+     {
+      "name": "body-strong",
+      "fontSize": "17px",
+      "lineHeight": "25px",
+      "fontWeight": 700,
+      "sample": "À vous de jouer : 6 et 1.",
+      "usage": "Consigne du moment (zone prompt), boutons."
+     },
+     {
+      "name": "body-italic",
+      "fontSize": "17px",
+      "lineHeight": "25px",
+      "fontWeight": 400,
+      "fontStyle": "italic",
+      "sample": "Philippe aurait joué 13/7 8/7.",
+      "usage": "Parole du maître, citation, exemple."
+     },
+     {
+      "name": "caption",
+      "fontSize": "15px",
+      "lineHeight": "20px",
+      "fontWeight": 400,
+      "sample": "Vous : 167 · Ordinateur : 152",
+      "usage": "Compte de points, légendes, mentions."
+     },
+     {
+      "name": "overline",
+      "fontSize": "13px",
+      "lineHeight": "16px",
+      "fontWeight": 700,
+      "letterSpacing": "0.08em",
+      "sample": "LEÇON 3 SUR 12",
+      "usage": "Étiquette en capitales au-dessus d'un titre ; avec parcimonie."
+     }
+    ]
+   }
+  ]
+ },
+ "spacing": {
+  "tokens": [
+   {
+    "name": "space-1",
+    "value": "4px",
+    "usage": "Écart entre une icône et son texte."
+   },
+   {
+    "name": "space-2",
+    "value": "8px",
+    "usage": "Écart entre boutons voisins, marges internes serrées."
+   },
+   {
+    "name": "space-3",
+    "value": "12px",
+    "usage": "Marge interne des puces et du bloc prompt."
+   },
+   {
+    "name": "space-4",
+    "value": "16px",
+    "usage": "Gouttière latérale de page sur téléphone, marge interne des cartes."
+   },
+   {
+    "name": "space-6",
+    "value": "24px",
+    "usage": "Écart entre blocs d'un écran."
+   },
+   {
+    "name": "space-8",
+    "value": "32px",
+    "usage": "Écart entre sections."
+   },
+   {
+    "name": "button-height",
+    "value": "48px",
+    "usage": "Hauteur des boutons ; aucune cible tactile sous 44px."
+   },
+   {
+    "name": "page-width",
+    "value": "40rem",
+    "usage": "Largeur maximale du contenu sur grand écran."
+   }
+  ]
+ },
+ "radius": {
+  "tokens": [
+   {
+    "name": "radius-sm",
+    "value": "6px",
+    "usage": "Dés, videau, puces de verdict."
+   },
+   {
+    "name": "radius-md",
+    "value": "12px",
+    "usage": "Cartes, fiches, bloc prompt."
+   },
+   {
+    "name": "radius-pill",
+    "value": "999px",
+    "usage": "Boutons : ronds comme des pions."
+   }
+  ]
+ },
+ "shadow": {
+  "tokens": [
+   {
+    "name": "shadow-raised",
+    "value": {
+     "light": "0 1px 2px rgba(43,29,21,0.10)",
+     "dark": "0 1px 2px rgba(0,0,0,0.40)"
+    },
+    "usage": "Seule ombre permise : cartes posées sur le fond. Rien de plus profond."
+   }
+  ]
+ },
+ "meta": {
+  "source": "Brief créatif + ADR 0010 + web/app.css (noms des variables du plateau)"
+ },
+ "duration": {
+  "tokens": [
+   {
+    "name": "duration-instant",
+    "value": "90ms",
+    "usage": "Retour d'appui d'un bouton, contour d'un pion jouable."
+   },
+   {
+    "name": "duration-fast",
+    "value": "160ms",
+    "usage": "Pion qui glisse, dés qui se posent, bandeaux."
+   },
+   {
+    "name": "duration-moderate",
+    "value": "240ms",
+    "usage": "Feuille du menu, panneau de fin de partie, bascule de mise en page. Jamais plus long."
+   }
+  ]
+ },
+ "easing": {
+  "tokens": [
+   {
+    "name": "easing-standard",
+    "value": "cubic-bezier(0.2, 0, 0, 1)",
+    "usage": "Tout ce qui se déplace : départ franc, arrivée douce."
+   },
+   {
+    "name": "easing-exit",
+    "value": "cubic-bezier(0.4, 0, 1, 1)",
+    "usage": "Ce qui disparaît."
+   }
+  ]
+ }
+}

docs/identite/generer-logo.py

@@ -0,0 +1,192 @@
+"""Génère les fichiers SVG de l'identité Ustagammon : symbole P3d, logotype L3.
+
+Le symbole : deux pions vus de trois quarts (le maître en noyer devant,
+l'apprenti en ivoire derrière) posés sur une flèche brique ; leurs deux
+silhouettes dessinent un 8, clin d'œil à l'Atelier du Huit.
+Le logotype : « Ustagammon » en Alegreya Sans Bold (SIL OFL), dont les deux
+« m » sont redessinés en quatre flèches au trait, alternant noyer et brique.
+
+Usage : python3 -I generer-logo.py <AlegreyaSans-Bold.ttf> <dossier_sortie>
+Licence des dessins produits : CC BY-SA 4.0.
+"""
+import os
+import sys
+
+from fontTools.pens.svgPathPen import SVGPathPen
+from fontTools.ttLib import TTFont
+
+FONT, OUT = sys.argv[1], sys.argv[2]
+os.makedirs(OUT, exist_ok=True)
+
+# ---------- Palettes ----------
+# d/ds/de : face, tranche et filet du pion noyer ; l/ls : face et tranche du pion ivoire ;
+# o : contour du pion ivoire ; a : flèche et filet brique ; sep : liseré du pion noyer ;
+# txt / acc : texte du logotype et flèches brique des « mm ».
+COULEUR = dict(d="#4A2E1F", ds="#2B1A10", de="#7A5038", l="#F3EAD8", ls="#CDB898",
+               o="#2B1A10", a="#A8432B", sep="#F3EAD8", txt="#2B1D15", acc="#A8432B")
+SOMBRE = dict(COULEUR, a="#C9583C", txt="#F3EAD8", acc="#D0694B")
+# Monochromes : I = encre, H = trou (transparent)
+MONO = dict(d="I", ds="I", de="H", l="H", ls="I", o="I", a="I", sep="H", txt="I", acc="I")
+
+
+def symbol(p, simple=False):
+    """Symbole P3d dans une boîte de 64 × 64. `simple` : sans filets, pour le favicon."""
+    s = [f'<polygon points="6,62 58,62 32,1" fill="{p["a"]}"/>']
+    ow = 3 if simple else 2.2
+    s.append(f'<path d="M21.5,21 v4.5 a10.5,7 0 0 0 21,0 v-4.5 z" fill="{p["ls"]}" stroke="{p["o"]}" stroke-width="{ow}" stroke-linejoin="round"/>')
+    s.append(f'<ellipse cx="32" cy="21" rx="10.5" ry="7" fill="{p["l"]}" stroke="{p["o"]}" stroke-width="{ow}"/>')
+    if not simple:
+        s.append(f'<ellipse cx="32" cy="21" rx="5.5" ry="3.6" fill="none" stroke="{p["a"]}" stroke-width="2"/>')
+    sw = 2.6 if simple else 2
+    s.append(f'<path d="M17.5,43 v6.5 a14.5,9.5 0 0 0 29,0 v-6.5 z" fill="{p["ds"]}" stroke="{p["sep"]}" stroke-width="{sw}" stroke-linejoin="round"/>')
+    s.append(f'<ellipse cx="32" cy="43" rx="14.5" ry="9.5" fill="{p["d"]}" stroke="{p["sep"]}" stroke-width="{sw}"/>')
+    if not simple:
+        s.append(f'<ellipse cx="32" cy="43" rx="8.3" ry="5.4" fill="none" stroke="{p["de"]}" stroke-width="1.6"/>')
+    return "".join(s)
+
+
+# ---------- Logotype ----------
+font = TTFont(FONT)
+gs = font.getGlyphSet()
+cmap = font.getBestCmap()
+hmtx = font["hmtx"]
+XH = font["OS/2"].sxHeight  # hauteur d'x (465 pour Alegreya Sans Bold)
+STROKE = 0.21 * XH          # épaisseur du trait des flèches, proche du fût des lettres
+MM_W = 3.0 * XH             # largeur du bloc « mm »
+GAP = 20
+
+
+def glyph(ch, x, fill):
+    g = cmap[ord(ch)]
+    pen = SVGPathPen(gs)
+    gs[g].draw(pen)
+    return f'<path transform="translate({x:.1f},0) scale(1,-1)" d="{pen.getCommands()}" fill="{fill}"/>', hmtx[g][0]
+
+
+def inter(p1, d1, p2, d2):
+    """Intersection de deux droites données par un point et une direction."""
+    (x1, y1), (dx1, dy1), (x2, y2), (dx2, dy2) = p1, d1, p2, d2
+    det = dx1 * -dy2 - dy1 * -dx2
+    t = ((x2 - x1) * -dy2 - (y2 - y1) * -dx2) / det
+    return (x1 + t * dx1, y1 + t * dy1)
+
+
+def chevron(x0, x1, top):
+    """Flèche « ^ » au trait : pieds coupés sur la ligne de base (y = 0), sommet en onglet."""
+    peak = ((x0 + x1) / 2, -top)
+    h = STROKE / 2
+    lines = []
+    for a, b in (((x0, 0), peak), (peak, (x1, 0))):
+        dx, dy = b[0] - a[0], b[1] - a[1]
+        n = (dx * dx + dy * dy) ** 0.5
+        nx, ny = -dy / n, dx / n
+        lines.append(((a[0] + nx * h, a[1] + ny * h), (dx, dy), (a[0] - nx * h, a[1] - ny * h)))
+    (lo, ld, li), (ro, rd, ri) = lines
+    base = ((0, 0), (1, 0))
+    l_ext, l_int = (li, lo) if li[1] < lo[1] else (lo, li)
+    r_ext, r_int = (ri, ro) if ri[1] < ro[1] else (ro, ri)
+    pts = [inter(l_ext, ld, *base), inter(l_ext, ld, r_ext, rd), inter(r_ext, rd, *base),
+           inter(r_int, rd, *base), inter(l_int, ld, r_int, rd), inter(l_int, ld, *base)]
+    return " ".join(f"{x:.1f},{y:.1f}" for x, y in pts)
+
+
+def logotype(p, x=0.0):
+    parts = []
+    for ch in "Ustaga":
+        s, adv = glyph(ch, x, p["txt"])
+        parts.append(s)
+        x += adv
+    x += GAP
+    unit = MM_W / 300  # coordonnées de la maquette : boîte de 300 × 100
+    top = XH * 1.06    # léger dépassement de la hauteur d'x, comme une lettre pointue
+    for i, (a, b) in enumerate(((8, 74), (74, 140), (160, 226), (226, 292))):
+        fill = p["txt"] if i % 2 == 0 else p["acc"]
+        parts.append(f'<polygon points="{chevron(x + a * unit, x + b * unit, top)}" fill="{fill}"/>')
+    x += MM_W + GAP
+    for ch in "on":
+        s, adv = glyph(ch, x, p["txt"])
+        parts.append(s)
+        x += adv
+    return "".join(parts), x
+
+
+ASC, DESC = 680, 240  # marges verticales autour de la ligne de base
+
+
+def mono_wrap(body, vb, ink, mid):
+    """Transforme un dessin encre/trou en dessin d'une seule couleur, trous transparents."""
+    body = body.replace('"I"', '"#fff"').replace('"H"', '"#000"')
+    x, y, w, h = vb
+    return (f'<mask id="{mid}" maskUnits="userSpaceOnUse" x="{x}" y="{y}" width="{w}" height="{h}">'
+            f'<rect x="{x}" y="{y}" width="{w}" height="{h}" fill="#000"/>{body}</mask>'
+            f'<rect x="{x}" y="{y}" width="{w}" height="{h}" fill="{ink}" mask="url(#{mid})"/>')
+
+
+def svg(vb, body, title):
+    return (f'<svg xmlns="http://www.w3.org/2000/svg" viewBox="{" ".join(f"{v:g}" for v in vb)}" '
+            f'width="{vb[2]:g}" height="{vb[3]:g}" role="img" aria-label="{title}"><title>{title}</title>{body}</svg>\n')
+
+
+def write(name, content):
+    with open(os.path.join(OUT, name), "w", encoding="utf-8") as f:
+        f.write(content)
+
+
+VARIANTS = {"couleur": COULEUR, "sombre": SOMBRE, "noir": "#000000", "blanc": "#FFFFFF"}
+
+
+def palette(v):
+    return VARIANTS[v] if isinstance(VARIANTS[v], dict) else MONO
+
+
+def ink(body, v):
+    return body if isinstance(VARIANTS[v], dict) else body.replace('"I"', f'"{VARIANTS[v]}"')
+
+
+# ---------- Symbole ----------
+for v in VARIANTS:
+    vb = (0, 0, 64, 64)
+    body = symbol(palette(v))
+    if not isinstance(VARIANTS[v], dict):
+        body = mono_wrap(body, vb, VARIANTS[v], "m")
+    write(f"symbole-{v}.svg", svg(vb, body, "Ustagammon"))
+
+# ---------- Logotype seul ----------
+for v in VARIANTS:
+    body, w = logotype(palette(v))
+    write(f"logotype-{v}.svg", svg((-10, -ASC, round(w + 20), ASC + DESC), ink(body, v), "Ustagammon"))
+
+# ---------- Logo horizontal ----------
+SYM = 1450     # hauteur du symbole, pour un corps de 1000
+CENTER = -322  # centre optique : mi-hauteur des capitales
+for v in VARIANTS:
+    p = palette(v)
+    sym = f'<g transform="translate(0,{CENTER - SYM / 2}) scale({SYM / 64:.4f})">{symbol(p)}</g>'
+    text, w = logotype(p, x=SYM + 280)
+    vb = (-20, CENTER - SYM / 2 - 20, round(w + 40), SYM + 40)
+    if not isinstance(VARIANTS[v], dict):
+        sym = mono_wrap(sym, vb, VARIANTS[v], "m")
+    write(f"logo-horizontal-{v}.svg", svg(vb, sym + ink(text, v), "Ustagammon"))
+
+# ---------- Icônes ----------
+IVOIRE = "#F3EAD8"
+
+
+def placed(frac, size, pal=COULEUR, simple=False):
+    """Symbole centré dans un carré de `size`, occupant la fraction `frac` du côté."""
+    s = size * frac / 64
+    off = (size - 64 * s) / 2
+    return f'<g transform="translate({off:.2f},{off:.2f}) scale({s:.4f})">{symbol(pal, simple)}</g>'
+
+
+# Icône « any » : tuile ivoire aux coins arrondis, transparente autour
+write("icone.svg", svg((0, 0, 512, 512), f'<rect width="512" height="512" rx="112" fill="{IVOIRE}"/>' + placed(0.70, 512), "Ustagammon"))
+# Icône « maskable » : fond plein, symbole dans la zone de sécurité (cercle de 80 %)
+write("icone-maskable.svg", svg((0, 0, 512, 512), f'<rect width="512" height="512" fill="{IVOIRE}"/>' + placed(0.56, 512), "Ustagammon"))
+# Favicon : dessin simplifié (sans filets), traits épaissis, fond transparent
+write("favicon.svg", svg((0, 0, 64, 64), symbol(COULEUR, simple=True), "Ustagammon"))
+# Android, icône adaptative : canevas de 108 × 108 dp, zone sûre de 66 dp au centre
+write("android-premier-plan.svg", svg((0, 0, 108, 108), placed(0.58, 108), "Ustagammon, premier plan"))
+write("android-arriere-plan.svg", svg((0, 0, 108, 108), f'<rect width="108" height="108" fill="{IVOIRE}"/>', "Ustagammon, arrière-plan"))
+write("android-monochrome.svg", svg((0, 0, 108, 108), mono_wrap(placed(0.58, 108, MONO), (0, 0, 108, 108), "#000000", "m"), "Ustagammon, monochrome"))
+print("\n".join(sorted(os.listdir(OUT))))