ADR 0007 : section Amendements

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

Makefile

@@ -30,7 +30,8 @@ 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 WASM_IMAGE CADDY_IMAGE WEB_IMAGE PLAYWRIGHT_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.

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/game.ts

@@ -8,6 +8,7 @@
 // (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 {
@@ -415,6 +416,19 @@ export class Game {
         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);

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/main.ts

@@ -6,33 +6,88 @@
 // 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 { createGameStore } from "./storage/game-store.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);
-const store = createGameStore(window.localStorage);
+
+// 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: worker.ready,
-    newGame: () => Game.start(engine),
-    savedGame: () => {
-        const journal = store.load();
-        if (journal === null) {
-            return null;
-        }
-        try {
-            return Game.resume(engine, journal);
-        } catch {
-            return null; // partie illisible : on en commence une nouvelle
-        }
+    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 };
+        },
     },
-    saveGame: (journal) => store.save(journal),
-    confirm: (question) => window.confirm(question),
+    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
@@ -46,3 +101,12 @@ 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/game-store.ts

@@ -1,47 +0,0 @@
-// L'enregistrement de la partie en cours, pour la reprendre après fermeture
-// de la page : son journal d'événements, en JSON, dans un stockage clé-valeur
-// (localStorage dans le navigateur).
-//
-// Copyright (C) 2026 les auteurs d'Ustagammon.
-// Licence : GPLv3 ou ultérieure (voir LICENSE).
-
-import type { GameJournal } from "../domain/game/events.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;
-}
-
-export interface GameStore {
-    /** Le journal enregistré, ou null s'il n'y en a pas de lisible. */
-    load(): GameJournal | null;
-    save(journal: GameJournal): void;
-}
-
-const KEY = "ustagammon.current-game";
-
-export function createGameStore(storage: KeyValueStorage): GameStore {
-    return {
-        load() {
-            try {
-                const journal = JSON.parse(storage.getItem(KEY) ?? "null");
-                const valid =
-                    journal !== null &&
-                    Array.isArray(journal.events) &&
-                    (journal.head === null || typeof journal.head === "string");
-                return valid ? journal : null;
-            } catch {
-                return null;
-            }
-        },
-        save(journal) {
-            try {
-                storage.setItem(KEY, JSON.stringify(journal));
-            } catch {
-                // Stockage plein ou interdit (navigation privée) : la partie
-                // continue, elle ne pourra seulement pas être reprise.
-            }
-        },
-    };
-}

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

@@ -155,3 +155,26 @@ export function pointSlot(number: number): { top: boolean; column: 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

@@ -7,7 +7,14 @@
 // 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.
+// 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";
@@ -18,6 +25,8 @@ import {
     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é. */
@@ -30,8 +39,17 @@ export interface ShownDie {
     readonly used: boolean;
 }
 
-/** Ce que fait un toucher sur les dés : lancer, ou valider le coup saisi. */
-export type DiceAction = "roll" | "confirm";
+/** 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 {
@@ -44,12 +62,16 @@ export interface BoardDecor {
     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 zone des dés, d'un côté ou de l'autre
-     * du plateau (null : rien). Pour « roll », les dés du joueur en attente
-     * sont dessinés. */
+    /** 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. */
@@ -62,30 +84,7 @@ export const NO_MARKS = {
     canDouble: false,
 } as const;
 
-/** Taille minimale d'une cible à toucher, en unités du dessin : au moins
- * 44 px sur un téléphone de 360 px de large, où le plateau en fait 344
- * (640 unités). */
-const MIN_TARGET = 88;
-
-// Géométrie, en unités du viewBox (le SVG s'adapte à la largeur de l'écran).
-const WIDTH = 640;
-const HEIGHT = 520;
-const FRAME = 8;
-const POINT_WIDTH = 44;
-const HALF_WIDTH = 6 * POINT_WIDTH;
-const BAR_LEFT = FRAME + HALF_WIDTH;
-const BAR_WIDTH = 40;
-const RIGHT_HALF = BAR_LEFT + BAR_WIDTH;
-const TRAY_LEFT = RIGHT_HALF + HALF_WIDTH + FRAME;
-const TRAY_WIDTH = 48;
-const POINT_HEIGHT = 190;
-const MIDDLE = HEIGHT / 2;
-const RADIUS = 20;
-const STEP = 42; // d'un pion au suivant dans une pile
-const MAX_STACK = 5; // au-delà, un nombre sur le dernier pion
 const OFF_SLAB = 12; // épaisseur d'un pion sorti
-const DIE = 36;
-const CUBE = 34;
 
 const SVG_NS = "http://www.w3.org/2000/svg";
 
@@ -103,11 +102,6 @@ function add(parent: Element, name: string, attributes: Attributes, text?: strin
     return element;
 }
 
-/** Abscisse du bord gauche d'une colonne (0 à 11). */
-function columnLeft(column: number): number {
-    return column < 6 ? FRAME + column * POINT_WIDTH : RIGHT_HALF + (column - 6) * POINT_WIDTH;
-}
-
 /** Un point du dessin. */
 export interface Spot {
     readonly x: number;
@@ -120,27 +114,24 @@ export interface Spot {
  * 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(place: Place, index: number): Spot {
+function slotCenter(g: Geometry, place: Place, index: number): Spot {
+    const middle = g.height / 2;
     if (place === "bar-player" || place === "bar-computer") {
-        const offset = RADIUS + 4 + Math.min(index, MAX_STACK) * STEP;
+        const offset = g.radius + 4 + Math.min(index, g.barStack - 1) * g.step;
         return {
-            x: BAR_LEFT + BAR_WIDTH / 2,
-            y: place === "bar-player" ? MIDDLE - offset : MIDDLE + offset,
+            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"
-                ? FRAME + index * OFF_SLAB
-                : HEIGHT - FRAME - (index + 1) * OFF_SLAB;
-        return { x: TRAY_LEFT + TRAY_WIDTH / 2, y: y + OFF_SLAB / 2 };
+                ? 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)));
-    const offset = RADIUS + 1 + Math.min(index, MAX_STACK) * STEP;
-    return {
-        x: columnLeft(column) + POINT_WIDTH / 2,
-        y: top ? FRAME + offset : HEIGHT - FRAME - offset,
-    };
+    return { x: columnLeft(g, column) + g.pointWidth / 2, y: stackY(g, top, index) };
 }
 
 /** Le nombre de pions de side à un endroit. */
@@ -155,63 +146,110 @@ function countAt(board: BoardModel, side: Side, place: Place): number {
     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, board: BoardModel, decor: BoardDecor): void {
+export function renderBoard(
+    svg: SVGSVGElement,
+    g: Geometry,
+    board: BoardModel,
+    decor: BoardDecor,
+): void {
     svg.replaceChildren();
-    svg.setAttribute("viewBox", `0 0 ${WIDTH} ${HEIGHT}`);
-    drawFrame(svg);
+    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, hits, board, point.number, decor);
+        drawPoint(svg, pieces, g, hits, board, point.number, decor);
     }
-    drawBar(svg, hits, board, decor);
-    drawTray(svg, hits, board, decor);
-    drawDice(svg, decor.dice);
-    const cube = drawCube(svg, decor.cube);
+    drawBar(svg, pieces, g, hits, board, decor);
+    drawTray(svg, pieces, g, hits, board, decor);
     if (decor.trace !== null) {
-        drawTrace(svg, board, decor.trace);
+        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") {
-            waitingDice(svg);
+        if (decor.diceAction === "roll" && g.layout === "portrait") {
+            waitingDice(svg, g);
         }
-        // Une zone sur chaque moitié du plateau : les dés en attente (à
-        // gauche) comme le dernier jet (à droite) se touchent.
-        const label = decor.diceAction === "roll" ? TEXTS.roll : TEXTS.confirm;
-        for (const x of [FRAME + HALF_WIDTH / 2, RIGHT_HALF + HALF_WIDTH / 2]) {
-            addAction(hits, decor.diceAction, label, { x, y: MIDDLE }, HALF_WIDTH - 2 * FRAME);
+        // 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(hits, "double", TEXTS.double, cubeCenter(decor.cube), MIN_TARGET);
+        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): void {
-    add(svg, "rect", { class: "board-frame", x: 0, y: 0, width: WIDTH, height: HEIGHT, rx: 6 });
-    for (const left of [FRAME, RIGHT_HALF]) {
+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: FRAME,
-            width: HALF_WIDTH,
-            height: HEIGHT - 2 * FRAME,
+            y: g.edge,
+            width: 6 * g.pointWidth,
+            height: g.height - 2 * g.edge,
         });
     }
     add(svg, "rect", {
         class: "board-tray",
-        x: TRAY_LEFT,
-        y: FRAME,
-        width: TRAY_WIDTH,
-        height: HEIGHT - 2 * FRAME,
+        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,
@@ -222,38 +260,54 @@ function drawPoint(
         return;
     }
     const { top, column } = pointSlot(number);
-    const left = columnLeft(column);
-    const center = left + POINT_WIDTH / 2;
-    const base = top ? FRAME : HEIGHT - FRAME;
-    const tip = top ? FRAME + POINT_HEIGHT : HEIGHT - FRAME - POINT_HEIGHT;
+    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),
-        points: `${left},${base} ${left + POINT_WIDTH},${base} ${center},${tip}`,
+        "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: "point-number", x: center, y: top ? MIDDLE - 26 : MIDDLE + 34 },
+        {
+            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, "rect", {
+        add(svg, "polygon", {
             class: "target-zone",
-            x: left + 2,
-            y: top ? FRAME : MIDDLE,
-            width: POINT_WIDTH - 4,
-            height: HEIGHT / 2 - FRAME,
-            rx: 4,
+            points: `${left},${base} ${left + g.pointWidth},${base} ${center},${tip}`,
         });
     }
     if (point.owner !== null) {
-        drawStack(svg, point.owner, point.count, point.place, decor);
+        drawStack(pieces, g, point.owner, point.count, point.place, decor);
     }
     addHit(hits, point.place, decor, {
         x: left,
-        y: top ? 0 : MIDDLE,
-        width: POINT_WIDTH,
-        height: MIDDLE,
+        y: top ? 0 : middle,
+        width: g.pointWidth,
+        height: middle,
     });
 }
 
@@ -261,13 +315,15 @@ function drawPoint(
  * 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: SVGSVGElement,
+    svg: Element,
+    g: Geometry,
     side: Side,
     count: number,
     place: Place,
     decor: BoardDecor,
 ): void {
-    const shown = Math.min(count, MAX_STACK);
+    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}`];
@@ -276,119 +332,270 @@ function drawStack(
         } else if (last && decor.movable.has(place)) {
             classes.push("movable");
         }
-        const { x, y } = slotCenter(place, i);
-        const checker = add(svg, "circle", { class: classes.join(" "), cx: x, cy: y, r: RADIUS });
+        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 > MAX_STACK) {
-            add(svg, "text", { class: `checker-count count-${side}`, x, y: y + 6 }, String(count));
+        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, hits: Element, board: BoardModel, decor: BoardDecor): void {
-    add(svg, "rect", {
-        class: "board-bar",
-        x: BAR_LEFT,
-        y: 0,
-        width: BAR_WIDTH,
-        height: HEIGHT,
-    });
+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(svg, side, board.bar[side], `bar-${side}`, decor);
+        drawStack(pieces, g, side, board.bar[side], `bar-${side}`, decor);
     }
-    addHit(hits, "bar-player", decor, { x: BAR_LEFT, y: 0, width: BAR_WIDTH, height: MIDDLE });
+    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,
+    });
 }
 
-function drawTray(svg: SVGSVGElement, hits: Element, board: BoardModel, decor: BoardDecor): void {
+/** 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(svg, `checker checker-${side}`, slotCenter(`off-${side}`, 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: TRAY_LEFT + 2,
-            y: MIDDLE,
-            width: TRAY_WIDTH - 4,
-            height: MIDDLE - FRAME,
+            x: g.trayLeft + 2,
+            y: middle,
+            width: g.tray - 4,
+            height: middle - g.edge,
             rx: 4,
         });
     }
     addHit(hits, "off-player", decor, {
-        x: TRAY_LEFT,
-        y: MIDDLE,
-        width: TRAY_WIDTH,
-        height: MIDDLE,
+        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, cssClass: string, spot: Spot): SVGElement {
+function addSlab(svg: Element, g: Geometry, cssClass: string, spot: Spot): SVGElement {
     return add(svg, "rect", {
         class: cssClass,
-        x: TRAY_LEFT + 4,
+        x: g.trayLeft + 4,
         y: spot.y - OFF_SLAB / 2 + 1,
-        width: TRAY_WIDTH - 8,
+        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, cssClass: string, place: Place, spot: Spot, r: number): void {
+function addRing(
+    svg: Element,
+    g: Geometry,
+    cssClass: string,
+    place: Place,
+    spot: Spot,
+    r: number,
+): void {
     if (place.startsWith("off-")) {
-        addSlab(svg, cssClass, spot);
+        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 : un pion fantôme (contour seul) là où chaque pion
+ * 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 drawTrace(svg: SVGSVGElement, board: BoardModel, trace: MoveTrace): void {
+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, "trace-ghost", place, slotCenter(place, remaining + k), RADIUS - 1);
+            addRing(svg, g, "trace-ghost", place, slotCenter(g, place, remaining + k), R - 1);
         }
     }
     for (const [place, n] of trace.landed) {
-        const top = topIndex(board, side, place);
+        const top = topIndex(g, board, side, place);
         for (let k = 0; k < n && top - k >= 0; k++) {
-            addRing(svg, "trace-landed", place, slotCenter(place, top - k), RADIUS + 3);
+            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(board, opponent, bar);
+    const top = topIndex(g, board, opponent, bar);
     for (let k = 0; k < trace.hits && top - k >= 0; k++) {
-        addRing(svg, "trace-hit", bar, slotCenter(bar, top - k), RADIUS + 3);
+        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.5,
-        markerHeight: 3.5,
+        markerWidth: 3,
+        markerHeight: 3,
         orient: "auto",
     });
     add(marker, "path", { class: "trace-head", d: "M0,0 L10,5 L0,10 z" });
@@ -398,20 +605,35 @@ function drawTrace(svg: SVGSVGElement, board: BoardModel, trace: MoveTrace): voi
         // d'arrivée.
         const k = departures.get(from) ?? 0;
         departures.set(from, k + 1);
-        const start = slotCenter(from, countAt(board, side, from) + k);
-        const end = slotCenter(to, Math.max(topIndex(board, side, to), 0));
-        drawArrow(svg, start, end, to.startsWith("off-") ? OFF_SLAB : RADIUS + 4);
+        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(board: BoardModel, side: Side, place: Place): number {
+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, MAX_STACK) - 1;
+    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, start: Spot, end: Spot, gap: number): void {
+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);
@@ -422,6 +644,7 @@ function drawArrow(svg: SVGSVGElement, start: Spot, end: Spot, gap: number): voi
         y1: start.y,
         x2: start.x + dx * keep,
         y2: start.y + dy * keep,
+        "stroke-width": g.arrowWidth,
         "marker-end": "url(#trace-head)",
     });
 }
@@ -440,6 +663,9 @@ export function checkerSpot(svg: SVGSVGElement, place: Place): Spot | null {
     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).
@@ -464,7 +690,7 @@ export async function slideChecker(
             { transform: `translate(${from.x - to.x}px, ${from.y - to.y}px)` },
             { transform: "translate(0px, 0px)" },
         ],
-        { duration: ms, easing: "ease-in-out" },
+        { duration: ms, easing: EASING_STANDARD },
     );
     await animation.finished.catch(() => undefined);
 }
@@ -505,70 +731,90 @@ const PIPS: Record<number, [number, number][]> = {
 };
 
 /** Les dés, au milieu de la moitié droite. */
-function drawDice(svg: SVGSVGElement, dice: readonly ShownDie[]): void {
-    const center = RIGHT_HALF + HALF_WIDTH / 2;
+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 * DIE + (dice.length - 1) * gap;
+    const total = dice.length * size + (dice.length - 1) * gap;
     dice.forEach((die, i) => {
-        const x = center - total / 2 + i * (DIE + gap);
-        const y = MIDDLE - DIE / 2;
+        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: DIE, height: DIE, rx: 6 });
+        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 * DIE,
-                cy: y + py * DIE,
-                r: 3.5,
+                cx: x + px * size,
+                cy: y + py * size,
+                r: size / 10,
             });
         }
         if (die.blocked) {
-            add(group, "line", { class: "die-strike", x1: x, y1: y + DIE, x2: x + DIE, y2: y });
+            add(group, "line", { class: "die-strike", x1: x, y1: y + size, x2: x + size, y2: y });
         }
     });
 }
 
-/** Le videau, dans le plateau de sortie : au milieu s'il est au centre,
- * sinon du côté de son propriétaire. Au centre, il montre 64. */
-function drawCube(svg: SVGSVGElement, cube: Cube): SVGElement {
-    const center = cubeCenter(cube);
-    const x = center.x - CUBE / 2;
-    const y = center.y - CUBE / 2;
+/** 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: CUBE, height: CUBE, rx: 4 });
+    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 + 6 },
+        {
+            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 dans le plateau de sortie. */
-function cubeCenter(cube: Cube): Spot {
+/** 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: TRAY_LEFT + TRAY_WIDTH / 2, y: MIDDLE + shift };
+    return { x: g.trayLeft + g.tray / 2, y: middle + shift };
 }
 
-/** 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): void {
-    const center = { x: FRAME + HALF_WIDTH / 2, y: MIDDLE };
+/** 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.x - gap / 2 - DIE, center.x + gap / 2]) {
+    for (const x of [center - gap / 2 - g.die, center + gap / 2]) {
         add(group, "rect", {
             class: "die-player",
             x,
-            y: MIDDLE - DIE / 2,
-            width: DIE,
-            height: DIE,
+            y: g.height / 2 - g.die / 2,
+            width: g.die,
+            height: g.die,
             rx: 6,
         });
     }
@@ -576,27 +822,28 @@ function waitingDice(svg: SVGSVGElement): void {
 
 /**
  * Une zone à toucher qui fait la même chose qu'un bouton (lancer les dés,
- * valider le coup, doubler) : au moins MIN_TARGET de côté, centrée sur ce
- * qu'on touche, avec un rôle et un nom accessibles. Les boutons restent
- * pour le clavier.
+ * 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 à droite (le videau est contre le bord).
-        x: Math.min(center.x - width / 2, WIDTH - width),
-        y: center.y - MIN_TARGET / 2,
-        width,
-        height: MIN_TARGET,
+        // 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,
     });
 }
 

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

@@ -15,7 +15,11 @@ import {
 import { TEXTS } from "./texts.js";
 
 /** Les scénarios montrés dans l'aide, dans l'ordre. */
-const FEATURES = ["docs/scenarios/jouer-une-partie.feature"];
+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> {
@@ -32,6 +36,12 @@ async function loadGlossary(): Promise<GlossaryEntry[]> {
     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,

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

@@ -22,9 +22,11 @@ function points(n: number): string {
     return n > 1 ? `${n} points` : `${n} point`;
 }
 
-/** Une durée en secondes, avec une décimale : « 0,3 s ». */
-function seconds(ms: number): string {
-    return `${(ms / 1000).toFixed(1).replace(".", ",")} s`;
+/** 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 = {
@@ -36,57 +38,118 @@ export const TEXTS = {
     double: "Doubler",
     take: "Prendre",
     drop: "Passer",
-    confirm: "Valider",
+    confirm: "Jouer ce coup",
     cancel: "Annuler",
     skip: "Continuer",
-    replay: "Revoir",
     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}`,
-    confirmNewGame: "Abandonner la partie en cours et en commencer une nouvelle ?",
 
-    // Déroulement
+    // 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."
         }`,
-    yourRoll: "À vous : doublez ou lancez les dés.",
-    yourRollNoDouble: "À vous : lancez les dés.",
-    yourMove: (dice: readonly number[]) =>
-        `Jouez ${roll(dice)} : touchez un pion, puis sa case d'arrivée.`,
-    pickTarget: "Touchez une case d'arrivée en surbrillance, ou un autre pion.",
-    confirmOrUndo:
-        "Touchez vos dés ou « Valider » pour jouer ce coup, ou « Annuler » pour reprendre un pion.",
     youCannotMove: (dice: readonly number[]) => `Aucun coup possible avec ${roll(dice)}.`,
-    pressContinue: "Touchez « Continuer » : le tour passe à l'ordinateur.",
-    thinking: "L'ordinateur réfléchit…",
-    computerMoved: (dice: readonly number[], move: string, ms: number) =>
-        `L'ordinateur a joué ${roll(dice)} : ${move} (${seconds(ms)}).`,
+    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)}.`,
-    confirmDouble: (value: number) => `Doubler à ${value} ? L'ordinateur pourra prendre ou passer.`,
-    computerDoubles: "L'ordinateur vous propose de doubler : prenez ou passez.",
     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
-    youWin: (kind: ResultKind, n: number) => `Vous gagnez ${RESULT_KIND[kind]} : ${points(n)}.`,
-    youLose: (kind: ResultKind, n: number) =>
-        `L'ordinateur gagne ${RESULT_KIND[kind]} : ${points(n)} pour lui.`,
-    computerDropped: (n: number) => `L'ordinateur passe : vous gagnez ${points(n)}.`,
-    youDropped: (n: number) => `Vous passez : l'ordinateur gagne ${points(n)}.`,
-
-    // Sous le plateau
-    pipCounts: (player: number, computer: number) =>
-        `Compte de points : vous ${player}, l'ordinateur ${computer}`,
+    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",

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/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/steps/jouer-une-partie.steps.ts

@@ -19,6 +19,7 @@ import {
 } 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.
@@ -283,7 +284,7 @@ Then("c'est toujours à vous", () => {
     assert.equal(lastEvent().type, "DiceRolled");
 });
 
-When("vous continuez", async () => {
+When("vous laissez passer votre tour", async () => {
     await game.skipTurn();
     const event = lastEvent();
     assert.ok(event.type === "MovePlayed" && event.side === "player");
@@ -344,6 +345,27 @@ 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

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/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

@@ -1,6 +1,6 @@
 // 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, l'enregistrement de la partie.
+// 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).
@@ -9,9 +9,7 @@ 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 { appendEvent, EMPTY_JOURNAL } from "../src/domain/game/events.js";
-import { parseHalfMoves, START_POSITION } from "../src/domain/game/position.js";
-import { createGameStore } from "../src/storage/game-store.js";
+import { parseHalfMoves } from "../src/domain/game/position.js";
 import {
     boardModel,
     moveTargets,
@@ -176,44 +174,14 @@ test("l'aide lit chaque fiche de l'index du glossaire", () => {
     assert.equal(parseGlossaryEntry("pas une fiche"), null);
 });
 
-test("la partie enregistrée se relit ; un enregistrement illisible est ignoré", () => {
-    const data = new Map<string, string>();
-    const storage = {
-        getItem: (key: string) => data.get(key) ?? null,
-        setItem: (key: string, value: string) => void data.set(key, value),
-    };
-    const store = createGameStore(storage);
-    assert.equal(store.load(), null);
-    const journal = appendEvent(EMPTY_JOURNAL, {
-        type: "GameStarted",
-        position: START_POSITION,
-        cube: { value: 1, owner: null },
-        firstTurn: null,
-    });
-    store.save(journal);
-    assert.deepEqual(store.load(), journal);
-    for (const key of data.keys()) {
-        data.set(key, "{pas du JSON");
-    }
-    assert.equal(store.load(), null);
-    // Un stockage plein ou interdit ne casse pas la partie.
-    const full = createGameStore({
-        getItem: () => null,
-        setItem: () => {
-            throw new Error("plein");
-        },
-    });
-    assert.doesNotThrow(() => full.save(journal));
-});
-
 test("les textes de fin de partie emploient les mots du glossaire", () => {
-    assert.equal(TEXTS.youWin("gammon", 2), "Vous gagnez un gammon : 2 points.");
+    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.youLose("single", 1),
-        "L'ordinateur gagne la partie simple : 1 point pour lui.",
-    );
-    assert.equal(
-        TEXTS.computerMoved([6, 4], "24/18 13/9", 312),
-        "L'ordinateur a joué 6-4 : 24/18 13/9 (0,3 s).",
+        TEXTS.computerMoved([6, 4], "24/18 13/9"),
+        "L'ordinateur a joué 6-4 : 24/18 13/9.",
     );
 });

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/0013-position-dans-l-adresse.md

@@ -47,3 +47,41 @@ moteur sait les lire et les écrire (`engine.h`).
 - 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/etape-1.md

@@ -18,7 +18,7 @@ Repris du cadrage (modules, écrans clés, IA générative en V1) et des ADR 001
 | 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 | 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 | — |
+| 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 |

docs/feuille-de-route.md

@@ -23,8 +23,7 @@ Demandes de Pierre du 2026-11-03, traitées avant d'ouvrir l'étape 1.
 
 | Sous-étape | Contenu | État | Plan |
 | --- | --- | --- | --- |
-| 0e.3 | Révision UX arbitrée (session « identité », sur délégation de Pierre) : portrait stable, bandeaux de compte de points, menu en feuille et nouvelle partie annulable, vibrations, écran allumé, paysage « plateau = écran » dès la rotation (ADR 0012 amendé) | ⏳ | `plans/2026-11-03-revision-ux.md` |
-| 0e.4 | Position dans l'adresse : chaque position du plateau a un lien direct (ADR 0013) | ⏳ | `plans/2026-11-03-position-dans-l-adresse.md` |
+| 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, 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

docs/glossaire/README.md

@@ -56,6 +56,7 @@ exportée. `make test` vérifie le lien dans les deux sens : chaque fiche avec
 | [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 |
@@ -64,5 +65,6 @@ exportée. `make test` vérifie le lien dans les deux sens : chaque fiche avec
 | [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/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/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/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/plans/2026-11-03-accueil-tutoriel-aide.md

@@ -47,6 +47,8 @@ Traiter les points 2 et 3 du message de Pierre du 2026-11-03 et sa demande d'ins
    - `beforeinstallprompt` simulé dans Chromium ;
    - captures dans `build/browser-shots/accueil-tutoriel/` pour la recette design.
 
+Chaque écran (accueil, étapes du tutoriel, onglets et questions de l'aide) a son adresse et s'ouvre par un vrai lien, selon l'amendement de l'ADR 0013 ; le routeur vient de 0e.4.
+
 `make lint`, `make test` et `make test-browser` doivent passer. Aucune nouvelle dépendance.
 
 ## Critères de réussite

docs/plans/2026-11-03-parties-enregistrees.md

@@ -1,57 +0,0 @@
-# Parties enregistrées, branches et export SGF (1b)
-
-- **Date** : 2026-11-03
-- **Étape** : 1b (`docs/etape-1.md`)
-- **Statut** : prévu (lancé après la fusion de 0e.1)
-- **Exécutant** : sous-agent general-purpose, dans un worktree
-
-## Objectif
-
-Garder toutes les parties du joueur sur le téléphone, avec leurs branches, et
-les exporter au format SGF de GNU Backgammon.
-
-## Consignes
-
-ADR 0007 (domaine pur, stockage derrière une interface), ADR 0008 (scénarios
-et glossaire). Aucune nouvelle dépendance : l'API IndexedDB du navigateur
-directement.
-
-1. **Stockage IndexedDB** derrière l'interface de `app/src/storage/` : une
-   liste de parties (identifiant, date de début et de dernière action,
-   adversaire et niveau, score, état en cours ou finie, résultat) et le
-   journal d'événements de chacune. Migration transparente de la partie
-   en cours enregistrée aujourd'hui dans `localStorage`. Si IndexedDB est
-   indisponible (navigation privée), repli sur le comportement actuel.
-2. **Branches** : le journal est déjà un arbre (événements avec parent,
-   `goBackTo`). Exposer dans le domaine la liste des branches d'une partie
-   (feuilles de l'arbre, avec le coup d'origine) et le passage de l'une à
-   l'autre. « Rejouer d'ici » depuis un coup passé crée une branche ; la
-   branche d'origine reste intacte et rechargeable. Pas d'écran d'analyse ici
-   (1e) : un accès minimal suffit pour le test (menu « Mes parties » :
-   reprendre une partie, voir ses branches).
-3. **Nouvelle partie annulable** : l'arbitrage UX (plan
-   `2026-11-03-revision-ux.md`, point 3) prévoit « Reprendre l'ancienne »
-   pendant 10 s. Fournir l'API de stockage qui le permet (reprendre une partie
-   par son identifiant) ; l'interface viendra avec la révision UX.
-4. **Export SGF** : une partie (et ses branches en variantes) au format SGF
-   de GNU Backgammon, téléchargeable depuis « Mes parties ». Vérification par
-   le gnubg de bureau de référence (Docker existant) : le fichier exporté se
-   charge sans erreur et ses positions successives sont les mêmes que celles
-   du journal, sur des parties générées par les tests.
-5. Scénarios Gherkin : reprendre une partie parmi plusieurs, rejouer d'ici
-   sans perdre l'original, exporter une partie. Fiches du glossaire pour les
-   nouveaux termes (branche, SGF…).
-
-`make lint`, `make test` et `make test-browser` passent (ajouter au test
-navigateur : deux parties enregistrées, reprise de la première après
-rechargement). Commits fréquents ; pas de push ni de MR.
-
-## Critères de réussite
-
-- Après rechargement, la liste des parties et chaque branche sont intactes.
-- Un SGF exporté se charge dans gnubg de bureau avec les mêmes positions.
-- Les trois commandes de test passent.
-
-## Résultat
-
-À remplir à la clôture.

docs/plans/2026-11-03-position-dans-l-adresse.md

@@ -1,20 +1,29 @@
-# Position dans l'adresse (0e.4)
+# Une adresse pour chaque écran, et pour chaque position (0e.4)
 
 - **Date** : 2026-11-03
 - **Étape** : 0e.4 (feuille de route)
-- **Statut** : prévu (après la fusion de la révision UX, qui touche les mêmes fichiers)
+- **Statut** : prévu
 - **Exécutant** : sous-agent general-purpose, dans un worktree
 
 ## Objectif
 
-Appliquer l'ADR 0013 : chaque position du plateau a un lien direct.
+Appliquer l'ADR 0013 et son amendement du 2026-11-03 : chaque écran (aide,
+glossaire, menu, mes parties…) a son adresse et s'ouvre par un vrai lien ;
+chaque position du plateau a un lien direct.
 
 ## Consignes
 
 ADR 0007, 0008 et 0013. Aucune nouvelle dépendance.
 
-1. Lecture du fragment `#position=…&match=…` au chargement et sur
-   `hashchange` ; validation par le moteur ; message clair si illisible.
+0. **Routeur** : un petit module pur (sans dépendance) qui traduit le
+   fragment en écran et inversement, testé unitairement ; l'app dessine
+   l'écran demandé par l'adresse, sur `hashchange`. Tous les écrans existants
+   (aide et ses questions, glossaire et ses termes, à propos, menu, mes
+   parties de 1b) passent par lui, avec de vrais liens `<a href>` ; le bouton
+   retour du navigateur ramène à l'écran précédent. Les actions de jeu restent
+   des boutons.
+1. Lecture de `#/position/<Position ID>/<Match ID>` ; validation par le
+   moteur ; message clair si illisible.
 2. Vue de la position, non jouable, avec « Jouer à partir d'ici » (nouvelle
    partie depuis la position, la partie en cours restant reprenable) et
    « Retour à ma partie ».
@@ -26,8 +35,10 @@ ADR 0007, 0008 et 0013. Aucune nouvelle dépendance.
    position (test aller-retour).
 5. Scénarios Gherkin (« Ouvrir un lien vers une position », « Partager la
    position »), fiches du glossaire (Position ID, Match ID si absentes).
-6. `make lint`, `make test`, `make test-browser` (ouvrir un lien, jouer à
-   partir d'ici, revenir, lien invalide).
+6. `make lint`, `make test`, `make test-browser` : chaque adresse du tableau
+   de l'ADR ouverte directement dans un nouvel onglet montre le bon écran ;
+   « retour » du navigateur ; liens reconnus comme liens (rôle `link`) ;
+   position : ouvrir un lien, jouer à partir d'ici, revenir, lien invalide.
 
 ## Critères de réussite
 

docs/plans/2026-11-03-revision-ux.md

@@ -1,63 +0,0 @@
-# Révision UX : portrait stable, compte de points, menu, paysage « plateau = écran »
-
-- **Date** : 2026-11-03
-- **Étape** : 0e.3 (feuille de route)
-- **Statut** : prévu
-- **Exécutant** : sous-agent general-purpose, dans un worktree
-
-## Objectif
-
-Appliquer la revue UX (0e.2) telle qu'arbitrée par la session « identité » sur
-délégation de Pierre le 2026-11-03, et l'amendement de l'ADR 0012.
-
-## Références
-
-- Maquettes : https://claude.ai/artifact/CQw6vbDpi6XQqVWQa4sANe, rangées
-  « Révision UX » en bas du canevas.
-- Règles : section « Interaction » du design system, copiée dans
-  `docs/identite/charte/interaction.md` (durées, courbes, motifs de vibration,
-  touches) et composant Icons (10 pictogrammes).
-- Rapport du designer UI : conservé dans la description de la MR qui clôt ce
-  plan.
-
-## Décisions à appliquer
-
-1. **Portrait stable** (maquette « Portrait révisé ») :
-   - une barre haute avec le symbole et trois pictogrammes, libellés de 13 px dessous : Aide, Plein écran, Menu ;
-   - le bandeau de l'ordinateur, puis le plateau, puis le bandeau du joueur ;
-   - une ligne réservée de 44 px : le dernier coup de l'ordinateur avec ↻, ou la ligne du maître ;
-   - la consigne ;
-   - une barre d'actions collée en bas, l'action secondaire à gauche et la principale à droite (« Jouer ce coup »). Toucher les dés valide aussi ;
-   - la durée de calcul affichée disparaît.
-2. **Compte de points** :
-   - en portrait, des bandeaux. Les chiffres sont en 20 px gras, alignés. Le bandeau de celui qui a la main est en accent-soft (« Vous · à vous de jouer »). L'écart s'écrit « mène de 8 », en muted, du côté de celui qui mène. Toucher le chiffre ouvre une bulle avec le texte de la fiche du glossaire (source unique, ADR 0008) ;
-   - en paysage, des pastilles aux bouts de la barre.
-3. **Menu en feuille** qui monte du bas :
-   - il contient Nouvelle partie, Plein écran, Aide et glossaire, Thème, et les interrupteurs Vibrations et « Écran allumé pendant la partie » ;
-   - « Nouvelle partie » agit sans confirmation. Un bandeau « Nouvelle partie commencée. Reprendre l'ancienne » reste 10 s avec une barre de temps, et l'ancienne partie se restaure depuis son journal ;
-   - plus de `window.confirm`.
-4. **Pas de passage automatique du tour** quand aucun coup n'est possible : les dés sont barrés avec le message, et le joueur passe en touchant les dés (ou Espace). Ajouter `overscroll-behavior: none` et `user-select: none`. L'écran reste allumé pendant une partie (Wake Lock), activé par défaut, avec un interrupteur.
-5. **Paysage, « le plateau est l'écran »** (ADR 0012 amendé) :
-   - la vue s'applique dès la rotation, sur `100dvh` ;
-   - la géométrie suit l'écran, par une fonction pure testée unitairement, d'après les formules du composant Board des maquettes ;
-   - une colonne de commandes à gauche dans le cadre : menu en haut, videau au milieu, ↶ en bas, remplacé par ↻ quand le coup de l'ordinateur est montré ;
-   - les sorties restent libres ;
-   - numéros des flèches à 12 px au moins ;
-   - la fin de partie s'affiche dans un panneau centré sur un voile ;
-   - le plein écran s'ouvre sur un geste (pictogramme ou menu), avec `requestFullscreen` puis `screen.orientation.lock` et un repli par rotation CSS. Ce n'est pas le réglage par défaut de l'app installée.
-6. **Vibrations** (`navigator.vibrate`, si disponible) aux quatre moments, avec les motifs d'`interaction.md` : pion posé, pion frappé, double proposé par l'ordinateur, fin de partie. Elles sont activées par défaut, rien au lancer des dés, et elles doublent toujours un signal visible.
-7. **Pictogrammes** du composant Icons, en SVG dans le site (CSP : pas de style en ligne).
-8. **Consigne** : forme longue pendant les trois premières parties, puis forme courte.
-9. **Mouvement** :
-   - durées de 90, 160 et 240 ms, avec la courbe cubic-bezier(0.2, 0, 0, 1) ;
-   - l'ordinateur joue pion par pion : 160 ms par pion, 120 ms de pause ;
-   - `prefers-reduced-motion` est respecté.
-10. **Clavier** (priorité basse) : prévoir dans l'architecture une table d'actions commune au toucher et au clavier. Les touches d'`interaction.md` peuvent venir dans une MR ultérieure.
-
-## Consignes
-
-ADR 0007 : ni le domaine ni le moteur ne changent pour la mise en page. ADR 0008 : scénarios Gherkin pour les comportements visibles nouveaux (nouvelle partie annulable, menu). Aucune nouvelle dépendance. `tests/browser/play.mjs` étendu aux deux orientations, avec des captures Playwright en 412×915, 915×412 et 844×320, en thème clair et sombre, rangées dans un dossier indiqué par la session principale pour la revue design. `make lint`, `make test` et `make test-browser` passent.
-
-## Résultat
-
-À remplir à la clôture.

docs/scenarios/README.md

@@ -47,3 +47,5 @@ Règles d'écriture :
 | Fichier | Tâche | Depuis |
 | --- | --- | --- |
 | [jouer-une-partie.feature](jouer-une-partie.feature) | Jouer une partie contre l'ordinateur | Étape 0d |
+| [mes-parties.feature](mes-parties.feature) | Retrouver mes parties, leurs branches, les exporter en SGF | Étape 1b |
+| [regler-l-application.feature](regler-l-application.feature) | Régler l'application (menu) | Étape 0e |

docs/scenarios/jouer-une-partie.feature

@@ -14,7 +14,7 @@ Fonctionnalité: Jouer une partie contre l'ordinateur
     Touchez un pion, puis sa case d'arrivée ; s'il n'en a qu'une, il y va dès
     que vous le touchez. Chaque dé joué s'estompe. Une fois tous vos dés
     joués, votre coup attend que vous le validiez : touchez vos dés, d'un côté
-    ou de l'autre du plateau, ou « Valider ».
+    ou de l'autre du plateau, ou « Jouer ce coup ».
 
     Étant donné que c'est à vous de jouer avec le jet 3-1
     Quand vous jouez 8/5 6/5
@@ -61,21 +61,22 @@ Fonctionnalité: Jouer une partie contre l'ordinateur
 
   Scénario: Aucun coup possible avec votre jet
     Il arrive que les dés ne permettent de bouger aucun pion. Votre jet reste
-    affiché avec un message, et le tour ne passe à l'ordinateur qu'une fois
-    que vous avez touché « Continuer ».
+    affiché, barré, avec un message. L'application ne joue jamais à votre
+    place : le tour ne passe à l'ordinateur que quand vous touchez vos dés
+    (ou « Continuer »).
 
     Étant donné que votre pion sur la barre ne peut pas rentrer
     Quand vous lancez les dés
     Alors aucun coup n'est possible avec votre jet
     Et c'est toujours à vous
-    Quand vous continuez
+    Quand vous laissez passer votre tour
     Alors c'est ensuite au tour de l'ordinateur
 
   Scénario: Voir le coup de l'ordinateur
     Après chaque coup de l'ordinateur, ses pions glissent un par un sur le
     plateau. Restent ensuite, jusqu'à votre prochaine action, une flèche par
     pion déplacé, ses pions arrivés entourés et un pion fantôme là où ils
-    étaient. Le bouton « Revoir » rejoue son coup.
+    étaient. « Revoir » (la flèche circulaire) rejoue son coup.
 
     Étant donné qu'un de vos pions est seul à portée de l'ordinateur
     Quand l'ordinateur a joué
@@ -83,6 +84,18 @@ Fonctionnalité: Jouer une partie contre l'ordinateur
     Et votre pion frappé part sur la barre
     Et vous pouvez revoir son coup
 
+  Scénario: Voir le compte de points
+    Au-dessus et au-dessous du plateau, le bandeau de chaque camp donne son
+    compte de points, et « mène de 7 » s'affiche du côté de celui qui mène la
+    course. Touchez un compte pour lire ce qu'il veut dire. En paysage, les
+    comptes sont aux deux bouts de la barre.
+
+    Quand vous commencez une nouvelle partie
+    Alors chaque camp a un compte de points de 167
+    Et personne ne mène la course
+    Quand vous jouez 13/8 13/11
+    Alors vous menez la course de 7
+
   Scénario: Doubler, après confirmation
     Avant de lancer les dés, vous pouvez doubler en touchant le videau ou
     « Doubler ». L'application vous demande de confirmer : une fois proposé,

docs/scenarios/mes-parties.feature

@@ -0,0 +1,36 @@
+# language: fr
+Fonctionnalité: Retrouver mes parties
+
+  Toutes vos parties restent sur votre téléphone, finies ou en cours, avec
+  leurs branches : chacune est enregistrée après chacune de vos actions, et
+  fermer l'application ne perd rien. Dans « Mes parties », vous en reprenez
+  une, vous passez d'une branche à l'autre, ou vous l'exportez au format SGF
+  pour l'ouvrir dans GNU Backgammon.
+
+  Scénario: Reprendre une partie parmi plusieurs
+    Étant donné que vous avez joué deux parties, l'une après l'autre
+    Quand vous fermez l'application puis la rouvrez
+    Alors la dernière partie jouée est à l'écran
+    Et « Mes parties » montre vos deux parties, la dernière jouée en premier
+    Quand vous reprenez la première partie
+    Alors elle est à l'écran, telle que vous l'aviez laissée
+
+  Scénario: Rejouer d'ici sans perdre l'original
+    Revenez à un moment passé de la partie et jouez autre chose : une
+    nouvelle branche commence là, et la partie d'origine reste entière.
+
+    Étant donné que vous avez joué plusieurs coups
+    Quand vous rejouez d'ici à partir de votre deuxième coup
+    Et que vous choisissez un autre coup
+    Alors la partie a deux branches
+    Et la partie d'origine est intacte
+    Quand vous fermez l'application puis la rouvrez
+    Alors vous êtes sur la nouvelle branche
+    Et vous pouvez revenir à la partie d'origine, au coup près
+
+  Scénario: Exporter une partie
+    Étant donné que vous avez joué plusieurs coups
+    Et que vous avez rejoué d'ici une autre suite
+    Quand vous exportez la partie
+    Alors vous obtenez un fichier SGF de GNU Backgammon
+    Et il contient vos coups, et l'autre branche en variante

docs/scenarios/regler-l-application.feature

@@ -0,0 +1,48 @@
+# language: fr
+Fonctionnalité: Régler l'application
+
+  Le menu, qui monte du bas de l'écran, regroupe ce qui ne sert pas à chaque
+  coup : commencer une nouvelle partie, passer en plein écran, ouvrir l'aide
+  et le glossaire, choisir le thème, couper les vibrations, et laisser ou non
+  l'écran allumé pendant la partie. Rien de ce qu'il contient ne vous pose de
+  question : ce qui se fait se rattrape.
+
+  Scénario: Commencer une nouvelle partie, puis reprendre l'ancienne
+    Une nouvelle partie commence tout de suite, sans question. Pendant 10
+    secondes, le bandeau « Reprendre l'ancienne » vous rend la partie que
+    vous venez de quitter, exactement là où vous l'aviez laissée.
+
+    Étant donné qu'une partie est en cours depuis quelques coups
+    Quand vous commencez une nouvelle partie depuis le menu
+    Alors une nouvelle partie commence aussitôt
+    Et l'ancienne partie peut être reprise pendant 10 secondes
+    Quand vous reprenez l'ancienne partie
+    Alors vous retrouvez exactement la partie quittée
+
+  Scénario: Couper les vibrations
+    Le téléphone vibre brièvement quand votre pion se pose, quand un pion est
+    frappé, quand l'ordinateur vous propose de doubler et à la fin de la
+    partie. Ces vibrations accompagnent toujours ce que montre l'écran ; rien
+    ne vibre quand vous lancez les dés. Elles se coupent dans le menu.
+
+    Étant donné que vous ouvrez l'application pour la première fois
+    Quand un pion est frappé
+    Alors le téléphone vibre deux fois, brièvement
+    Quand vous coupez les vibrations dans le menu
+    Et qu'un pion est frappé
+    Alors le téléphone ne vibre pas
+
+  Scénario: Garder l'écran allumé pendant la partie
+    Pour que le téléphone ne se mette pas en veille pendant que vous
+    réfléchissez, l'écran reste allumé tant qu'une partie est en cours.
+
+    Étant donné que vous ouvrez l'application pour la première fois
+    Alors l'écran reste allumé pendant une partie
+    Quand vous coupez « Écran allumé pendant la partie » dans le menu
+    Alors l'écran peut se mettre en veille comme d'habitude
+
+  Scénario: Choisir le thème
+    Étant donné que vous ouvrez l'application pour la première fois
+    Alors le thème suit celui du téléphone
+    Quand vous changez de thème dans le menu
+    Alors il passe à clair, puis à sombre, puis revient à automatique

tests/browser.sh

@@ -18,11 +18,10 @@ browsers="${BROWSERS:-chromium firefox}"
 unset MAKEFLAGS MFLAGS MAKELEVEL
 make -s package >/dev/null
 
-site_image="ustagammon/site-test:local"
-docker build -q -t "$site_image" build/deploy >/dev/null
-container="$(docker run -d --rm -p 127.0.0.1::80 "$site_image")"
-trap 'docker stop "$container" >/dev/null' EXIT
-port="$(docker port "$container" 80/tcp | head -n1 | sed 's/.*://')"
+# Image de production lancée, étiquette propre à ce dépôt : site_image,
+# container, port.
+# shellcheck source=tests/site-image.sh
+. tests/site-image.sh
 
 # Le paquet playwright, à la version des navigateurs de l'image.
 tools=build/browser-tools

tests/sgf/check.py

@@ -0,0 +1,87 @@
+# Relit dans GNU Backgammon de référence les parties exportées en SGF par
+# Ustagammon (app/src/domain/game/sgf.ts) et vérifie qu'il y retrouve les
+# positions du journal.
+#
+# Ce script s'exécute DANS gnubg (scripting Python intégré), dans l'image
+# Docker ustagammon/gnubg-reference : voir tests/test_web.sh. Le dossier
+# SGF_DIR contient, pour chaque partie, <nom>.sgf et <nom>.json (écrits par
+# app/tests/tools/sgf-samples.ts) :
+#   after  : après chaque coup du journal, la position vue de celui qui a
+#            alors la main ;
+#   result : le résultat de la partie ({winner, points}) ou null.
+#
+# Pour chaque partie, gnubg charge le fichier (load game), puis avance
+# enregistrement par enregistrement (next) : après chaque coup, sa position
+# doit être celle du journal. Une position de départ mal posée, un coup mal
+# écrit ou refusé changent donc la suite des positions. Le résultat (RE)
+# doit aussi être celui du journal. Code de sortie : 0 si tout concorde.
+
+import glob
+import json
+import os
+import sys
+
+import gnubg
+
+FOLDER = os.environ.get("SGF_DIR", "/sgf")
+
+
+def check(path):
+    """Les écarts entre gnubg et le journal pour une partie (liste vide si
+    tout concorde)."""
+    with open(path[:-4] + ".json") as f:
+        expected = json.load(f)
+    gnubg.command("load game " + path)
+    games = gnubg.match(analysis=0, boards=0, statistics=0, verbose=0)["games"]
+    if len(games) != 1:
+        return ["gnubg n'a pas chargé la partie"]
+    game = games[0]
+    records = list(game["game"])
+
+    # Le premier « next » applique le premier enregistrement.
+    gnubg.command("first move")
+    after = []
+    for record in records:
+        gnubg.command("next")
+        if record["action"] == "move":
+            after.append(gnubg.positionid())
+
+    errors = []
+    if len(after) != len(expected["after"]):
+        errors.append("%d coups lus, %d attendus" % (len(after), len(expected["after"])))
+    for i, (got, want) in enumerate(zip(after, expected["after"])):
+        if got != want:
+            errors.append("après le coup %d : gnubg %s, journal %s" % (i + 1, got, want))
+            break
+
+    # Dans gnubg, X est le joueur 0 (W, l'ordinateur) et O le joueur 1 (B).
+    info = game["info"]
+    result = expected["result"]
+    if result is None:
+        if info.get("winner") is not None:
+            errors.append("gnubg voit une partie finie : %s" % info)
+    else:
+        winner = "O" if result["winner"] == "player" else "X"
+        if (info.get("winner"), info.get("points-won")) != (winner, result["points"]):
+            errors.append("résultat : gnubg %s, journal %s" % (info, result))
+    return errors
+
+
+failures = 0
+paths = sorted(glob.glob(os.path.join(FOLDER, "*.sgf")))
+for path in paths:
+    errors = check(path)
+    name = os.path.basename(path)
+    if errors:
+        failures += 1
+        print("ÉCHEC  %s : %s" % (name, " ; ".join(errors)))
+    else:
+        print("OK     %s" % name)
+
+if not paths:
+    print("aucun SGF dans %s" % FOLDER)
+    failures += 1
+sys.stdout.flush()
+# Un script --python de gnubg ne transmet pas son code de sortie : la
+# dernière ligne le donne au script shell.
+print("SGF-RESULTAT %s" % ("OK" if failures == 0 else "ECHEC"))

tests/site-image.sh

@@ -0,0 +1,22 @@
+#!/usr/bin/env bash
+# Construit l'image de production (build/deploy, voir make package) sous une
+# étiquette propre à ce dépôt, et la lance. À sourcer depuis la racine du
+# dépôt ; définit site_image, container et port, et arrête le conteneur puis
+# supprime l'image à la sortie du script.
+#
+# Plusieurs copies de travail (worktrees) peuvent lancer leurs tests en même
+# temps : avec une étiquette commune, docker échouait (« parent snapshot ...
+# does not exist »). Le suffixe est un hachage court du chemin du dépôt.
+
+site_image="ustagammon/site-test:$(pwd -P | sha1sum | cut -c1-12)"
+docker build -q -t "$site_image" build/deploy >/dev/null
+container="$(docker run -d --rm -p 127.0.0.1::80 "$site_image")"
+# docker rm -f, et non docker stop : avec --rm, stop rend la main avant que
+# le conteneur soit supprimé, et l'image serait encore utilisée.
+site_cleanup() {
+	docker rm -f "$container" >/dev/null 2>&1 || true
+	docker rmi "$site_image" >/dev/null 2>&1 || true
+}
+trap site_cleanup EXIT
+port="$(docker port "$container" 80/tcp | head -n1 | sed 's/.*://')"
+export site_image container port

tests/test_site.sh

@@ -11,11 +11,10 @@ cd "$(dirname "$0")/.."
 unset MAKEFLAGS MFLAGS MAKELEVEL
 make -s package >/dev/null
 
-image="ustagammon/site-test:local"
-docker build -q -t "$image" build/deploy >/dev/null
-container="$(docker run -d --rm -p 127.0.0.1::80 "$image")"
-trap 'docker stop "$container" >/dev/null' EXIT
-port="$(docker port "$container" 80/tcp | head -n1 | sed 's/.*://')"
+# Image de production lancée, étiquette propre à ce dépôt : site_image,
+# container, port.
+# shellcheck source=tests/site-image.sh
+. tests/site-image.sh
 base="http://127.0.0.1:$port"
 
 # Caddy démarre en une fraction de seconde : on attend qu'il réponde.

tests/test_web.sh

@@ -5,7 +5,10 @@
 # - scénarios de docs/scenarios/ exécutés par Cucumber sur le domaine branché
 #   au vrai moteur (ADR 0008) ;
 # - règles d'architecture (dependency-cruiser, ADR 0007), et preuve qu'une
-#   violation volontaire de chaque règle est bien détectée.
+#   violation volontaire de chaque règle est bien détectée ;
+# - export SGF : des parties jouées sur le vrai moteur, exportées, relues par
+#   le GNU Backgammon de référence, qui doit y retrouver les positions du
+#   journal (tests/sgf/check.py).
 #
 # Lance `make engine-wasm` et `make web` (sans effet si tout est à jour).
 
@@ -39,6 +42,24 @@ web . node --test --test-reporter=dot 'build/web/tests/**/*.test.js' \
 web . cucumber-js --format summary --import 'build/web/tests/steps/*.js' docs/scenarios/*.feature \
 	|| report "scénarios en échec (voir ci-dessus)"
 
+# Export SGF relu par gnubg de bureau. Le script Python de gnubg ne
+# transmet pas de code de sortie : sa dernière ligne donne le verdict.
+samples=build/sgf-samples
+rm -rf "$samples"
+if ! docker image inspect "${REFERENCE_IMAGE:?lancer via make test}" >/dev/null 2>&1; then
+	report "gnubg de référence absent : lancer d'abord make setup"
+elif ! web . node build/web/tests/tools/sgf-samples.js "$samples" >/dev/null; then
+	report "parties d'exemple SGF non produites (voir ci-dessus)"
+else
+	output="$(docker run --rm --user "$(id -u):$(id -g)" -e HOME=/tmp \
+		-v "$PWD/$samples:/sgf:ro" -v "$PWD/tests/sgf:/check:ro" "$REFERENCE_IMAGE" \
+		gnubg --tty --quiet --no-rc --python=/check/check.py 2>&1)" || true
+	if ! grep -q '^SGF-RESULTAT OK$' <<<"$output"; then
+		grep -E '^(ÉCHEC|aucun|Traceback|  File|[A-Za-z]*Error)' <<<"$output" || true
+		report "export SGF : gnubg ne retrouve pas les positions du journal"
+	fi
+fi
+
 web app depcruise --config .dependency-cruiser.cjs src tests \
 	|| report "règles d'architecture non respectées (voir ci-dessus)"
 

web/index.html

@@ -2,7 +2,7 @@
 <html lang="fr">
 <head>
 <meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
 <meta name="color-scheme" content="light dark">
 <meta name="theme-color" content="#4A2E1F">
 <title>Ustagammon</title>
@@ -16,47 +16,66 @@
 <script type="module" src="app/main.js"></script>
 </head>
 <body class="busy">
-<!-- Les textes des boutons et des messages viennent de app/src/ui/texts.ts. -->
+<!-- Les textes des boutons et des messages viennent de app/src/ui/texts.ts ;
+     les pictogrammes, de app/src/ui/icons.ts. Tout l'écran est dans #screen :
+     c'est lui qui tourne d'un quart de tour quand le plein écran ne peut pas
+     verrouiller le paysage (ADR 0012). -->
+<div id="screen" class="screen">
+
 <header class="topbar">
   <!-- Logo de la charte (docs/identite/logo/, copié dans icons/ par make
-       site) : horizontal, ou symbole seul quand la place manque (téléphone
-       étroit, colonne du mode paysage) ; version sombre en thème sombre. -->
+       site), version sombre en thème sombre (choix par app.css). -->
   <h1 class="brand">
-    <picture>
-      <source media="(prefers-color-scheme: dark) and (max-width: 24.5rem), (prefers-color-scheme: dark) and (orientation: landscape) and (max-height: 40rem)" srcset="icons/symbole-sombre.svg">
-      <source media="(max-width: 24.5rem), (orientation: landscape) and (max-height: 40rem)" srcset="icons/symbole-couleur.svg">
-      <source media="(prefers-color-scheme: dark)" srcset="icons/logo-horizontal-sombre.svg">
-      <img src="icons/logo-horizontal-couleur.svg" alt="Ustagammon">
-    </picture>
+    <img class="logo-light" src="icons/logo-horizontal-couleur.svg" alt="Ustagammon">
+    <img class="logo-dark" src="icons/logo-horizontal-sombre.svg" alt="Ustagammon">
   </h1>
-  <button id="help-button" type="button" class="secondary"></button>
-  <button id="new-game" type="button" class="secondary"></button>
+  <button id="help-button" type="button" class="icon-button labelled"></button>
+  <button id="fullscreen-button" type="button" class="icon-button labelled"></button>
+  <button id="menu-button" type="button" class="icon-button labelled"></button>
 </header>
 
-<main id="game">
-  <svg id="board" class="board" role="img" xmlns="http://www.w3.org/2000/svg"></svg>
-  <p id="pips" class="pips"></p>
-  <p id="info" class="info" aria-live="polite"></p>
-  <p id="prompt" class="prompt" aria-live="polite"></p>
-  <div class="actions">
-    <button id="roll" type="button" hidden></button>
-    <button id="double" type="button" class="secondary" hidden></button>
-    <button id="take" type="button" hidden></button>
-    <button id="drop" type="button" class="secondary" hidden></button>
-    <button id="confirm" type="button" hidden></button>
-    <button id="cancel" type="button" class="secondary" hidden></button>
-    <button id="skip" type="button" hidden></button>
-    <button id="replay" type="button" class="secondary" hidden></button>
-    <button id="again" type="button" hidden></button>
+<main id="game" class="game">
+  <div id="strip-computer" class="strip">
+    <span class="mini mini-computer"></span>
+    <span class="who"></span>
+    <span class="lead"></span>
+    <button type="button" class="count"></button>
   </div>
-  <!-- Confirmation avant de doubler (ouverte par app/ui/app.js). -->
-  <dialog id="double-dialog" class="confirm" aria-labelledby="double-question">
-    <p id="double-question"></p>
-    <div class="confirm-actions">
-      <button id="double-confirm" type="button"></button>
-      <button id="double-cancel" type="button" class="secondary"></button>
+  <div class="board-box">
+    <svg id="board" class="board" role="img" xmlns="http://www.w3.org/2000/svg"></svg>
+    <div id="pip-bubble" class="bubble" role="dialog" aria-labelledby="pip-bubble-term" hidden>
+      <p id="pip-bubble-term" class="bubble-term"></p>
+      <p class="bubble-text"></p>
+      <button type="button" class="link-button"></button>
     </div>
-  </dialog>
+  </div>
+  <div id="strip-player" class="strip">
+    <span class="mini mini-player"></span>
+    <span class="who"></span>
+    <span class="lead"></span>
+    <button type="button" class="count"></button>
+  </div>
+  <div class="infoline">
+    <p id="info" class="info" aria-live="polite"></p>
+    <button id="replay" type="button" class="icon-button replay" hidden></button>
+  </div>
+  <p id="prompt" class="prompt" aria-live="polite"></p>
+  <div class="spacer"></div>
+  <div id="actions" class="actions">
+    <div class="slot">
+      <button id="double" type="button" class="secondary" hidden></button>
+      <button id="cancel" type="button" class="secondary" hidden></button>
+      <button id="drop" type="button" class="secondary" hidden></button>
+    </div>
+    <div class="slot primary">
+      <button id="roll" type="button" hidden></button>
+      <button id="confirm" type="button" hidden></button>
+      <button id="skip" type="button" hidden></button>
+      <button id="take" type="button" hidden></button>
+      <button id="again" type="button" hidden></button>
+      <p id="move-hint" class="move-hint" hidden></p>
+    </div>
+  </div>
   <noscript><p>Ustagammon a besoin de JavaScript.</p></noscript>
 </main>
 
@@ -64,5 +83,57 @@
   <button id="help-back" type="button" class="secondary"></button>
   <div id="help-content"></div>
 </section>
+
+<!-- Menu : une feuille qui monte du bas. -->
+<div id="menu-veil" class="veil sheet-veil" hidden>
+  <div id="menu" class="sheet" role="dialog" aria-modal="true" aria-labelledby="menu-title">
+    <div class="sheet-head">
+      <span class="grip" aria-hidden="true"></span>
+      <h2 id="menu-title" class="sheet-title"></h2>
+      <button id="menu-close" type="button" class="icon-button"></button>
+    </div>
+    <button id="menu-new-game" type="button" class="item"></button>
+    <button id="menu-games" type="button" class="item"></button>
+    <button id="menu-fullscreen" type="button" class="item"></button>
+    <button id="menu-help" type="button" class="item"></button>
+    <button id="menu-theme" type="button" class="item"><span class="item-label"></span><span class="item-value"></span></button>
+    <button id="menu-vibrations" type="button" class="item" role="switch"><span class="item-label"></span><span class="switch" aria-hidden="true"></span></button>
+    <button id="menu-screen-on" type="button" class="item" role="switch"><span class="item-label"></span><span class="switch" aria-hidden="true"></span></button>
+  </div>
+</div>
+
+<!-- Confirmation avant de doubler : la seule question posée au joueur. -->
+<div id="double-veil" class="veil" hidden>
+  <div id="double-dialog" class="panel" role="dialog" aria-modal="true" aria-labelledby="double-question">
+    <p id="double-question"></p>
+    <div class="panel-actions">
+      <button id="double-cancel" type="button" class="secondary"></button>
+      <button id="double-confirm" type="button"></button>
+    </div>
+  </div>
+</div>
+
+<!-- Fin de partie, et double de l'ordinateur en paysage : un panneau centré
+     sur un voile. -->
+<div id="panel-veil" class="veil" hidden>
+  <div id="panel" class="panel" role="dialog" aria-modal="true" aria-labelledby="panel-text">
+    <p id="panel-overline" class="overline"></p>
+    <p id="panel-text" class="panel-title"></p>
+    <p id="panel-detail" class="panel-detail"></p>
+    <div class="panel-actions">
+      <button id="panel-secondary" type="button" class="secondary"></button>
+      <button id="panel-primary" type="button"></button>
+    </div>
+  </div>
+</div>
+
+<!-- « Nouvelle partie commencée. Reprendre l'ancienne », 10 s. -->
+<div id="banner" class="banner" role="status" hidden>
+  <span id="banner-text"></span>
+  <button id="resume-old" type="button" class="secondary"></button>
+  <span class="banner-timer" aria-hidden="true"></span>
+</div>
+
+</div>
 </body>
 </html>