Plan 0e.5 : accueil, installation, tutoriel, aide

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

CLAUDE.md

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

Makefile

@@ -107,8 +107,6 @@ lint: ## Vérifie le style et les erreurs courantes
 deploy: site ## Sert l'application sur le réseau local (Ctrl+C pour arrêter)
 	@ip="$$(ip -4 route get 1.1.1.1 2>/dev/null | awk '{ for (i = 1; i < NF; i++) if ($$i == "src") print $$(i + 1) }')"; \
 	echo "Application : http://$${ip:-ADRESSE-DU-PC}:$(WEB_PORT)/"; \
-	echo "Test du moteur : http://$${ip:-ADRESSE-DU-PC}:$(WEB_PORT)/moteur/"; \
-	echo "Page de mesure : http://$${ip:-ADRESSE-DU-PC}:$(WEB_PORT)/moteur/bench.html"; \
 	echo "À ouvrir depuis le téléphone, sur le même Wi-Fi. Ctrl+C pour arrêter."
 	@docker run --rm --init -p $(WEB_PORT):8080 -v "$(CURDIR)/$(BUILD_DIR)/site:/site:ro" \
 		$(BUILD_C_IMAGE) python3 -m http.server 8080 --directory /site
@@ -123,7 +121,7 @@ SITE_ICONS := icone.svg icone-192.png icone-512.png icone-maskable-192.png icone
 
 # Le site tel qu'il sera publié, reconstruit entièrement à chaque appel :
 # - web/ à la racine : la page de l'application, son style, sa police, le
-#   manifeste, le Web Worker du moteur, et les pages de test sous moteur/ ;
+#   manifeste et le Web Worker du moteur ;
 # - sous icons/, le logo et les icônes de la charte, copiés depuis
 #   docs/identite/logo/ (une seule source, ADR 0010) ;
 # - l'application compilée (build/web/src/) sous app/ ;

app/src/domain/game/game.ts

@@ -47,6 +47,20 @@ export interface SideBoards {
     readonly computer: BoardSide;
 }
 
+/**
+ * Un coup joué, demi-coup par demi-coup, pour le montrer : les plateaux
+ * successifs, tels que le moteur les donne.
+ */
+export interface MoveSteps {
+    readonly side: Side;
+    readonly halfMoves: readonly HalfMove[];
+    /** boards[0] : avant le coup ; boards[i + 1] : après le demi-coup i. */
+    readonly boards: readonly SideBoards[];
+    /** hits[i] : le demi-coup i a frappé un pion adverse, envoyé sur la barre
+     * (lu sur les plateaux du moteur, pas déduit des règles). */
+    readonly hits: readonly boolean[];
+}
+
 export interface GameOptions {
     /** Source des dés ; le hasard ordinaire par défaut. */
     readonly dice?: DiceSource;
@@ -65,9 +79,10 @@ export class Game {
     readonly #dice: DiceSource;
     readonly #ply: Ply;
     #journal: GameJournal = EMPTY_JOURNAL;
-    // Coup du joueur en cours de saisie : pas encore dans le journal.
-    #pending: HalfMove[] = [];
-    #pendingPosition: PositionId | null = null;
+    // Coup du joueur en cours de saisie : pas encore dans le journal (il n'y
+    // entre qu'à sa validation, confirmMove). Pour chaque demi-coup saisi, la
+    // position après lui, et si le coup est alors complet, selon le moteur.
+    #pending: PendingHalfMove[] = [];
 
     private constructor(engine: Engine, options: GameOptions) {
         this.#engine = engine;
@@ -127,12 +142,37 @@ export class Game {
 
     /** Les demi-coups déjà saisis du coup en cours. */
     get pendingHalfMoves(): readonly HalfMove[] {
-        return this.#pending;
+        return this.#pending.map((p) => p.halfMove);
+    }
+
+    /** Les demi-coups saisis forment un coup complet (le moteur le dit) : il
+     * n'attend plus que d'être validé (confirmMove) ou défait
+     * (undoLastHalfMove). */
+    get moveComplete(): boolean {
+        return this.#pending.at(-1)?.complete === true;
     }
 
     /** La position à afficher : après les demi-coups déjà saisis. */
     get displayedPosition(): PositionId {
-        return this.#pendingPosition ?? this.state.position;
+        return this.#pending.at(-1)?.position ?? this.state.position;
+    }
+
+    /**
+     * Les dés du jet à jouer (quatre pour un double), et pour chacun s'il est
+     * déjà utilisé par un demi-coup saisi ; liste vide hors de la saisie d'un
+     * coup du joueur. Un demi-coup utilise le dé qui l'a produit dans
+     * nextHalfMoves (de from vers from - dé, ou vers la sortie) : aucune
+     * règle n'est jugée ici, la légalité vient du moteur.
+     */
+    get diceToPlay(): DieToPlay[] {
+        const state = this.state;
+        if (state.turn !== "player" || state.phase !== "moving" || state.roll === null) {
+            return [];
+        }
+        const [a, b] = state.roll;
+        const dice = a === b ? [a, a, a, a] : [a, b];
+        const used = assignDice(dice, this.pendingHalfMoves);
+        return dice.map((value, i) => ({ value, used: used[i] === true }));
     }
 
     /** Le plateau affiché (après les demi-coups déjà saisis), décodé par le
@@ -141,14 +181,45 @@ export class Game {
         const state = this.state;
         // La position est vue du camp qui a la main (le joueur pendant le jet
         // d'ouverture : la position de départ est la même pour les deux).
-        const onRoll = state.turn ?? "player";
-        const board = await this.#engine.board(
-            this.displayedPosition,
-            engineCube(state.cube, onRoll),
+        return this.#sideBoards(this.displayedPosition, state.turn ?? "player", state.cube);
+    }
+
+    /**
+     * Le dernier coup joué de la partie, demi-coup par demi-coup (null s'il
+     * n'y en a pas). Les plateaux intermédiaires viennent du moteur
+     * (checkHalfMoves, puis board) : aucune règle n'est rejouée ici.
+     */
+    async lastMoveSteps(): Promise<MoveSteps | null> {
+        const events = this.events;
+        const index = events.findLastIndex((e) => e.type === "MovePlayed");
+        const played = events[index];
+        if (played?.type !== "MovePlayed") {
+            return null;
+        }
+        // L'état juste avant le coup : la position vue de celui qui joue, et
+        // son jet.
+        const before = replay(events.slice(0, index));
+        const roll = rollToPlay(before);
+        const positions = [before.position];
+        for (let i = 1; i <= played.halfMoves.length; i++) {
+            const check = await this.#engine.checkHalfMoves(
+                before.position,
+                roll,
+                played.halfMoves.slice(0, i),
+            );
+            if (check.position === null) {
+                throw new Error("coup enregistré refusé par le moteur");
+            }
+            positions.push(check.position);
+        }
+        const boards = await Promise.all(
+            positions.map((p) => this.#sideBoards(p, played.side, before.cube)),
         );
-        return onRoll === "player"
-            ? { player: board.onRoll, computer: board.opponent }
-            : { player: board.opponent, computer: board.onRoll };
+        const opponent = otherSide(played.side);
+        const hits = played.halfMoves.map(
+            (_, i) => (boards[i + 1]?.[opponent].bar ?? 0) > (boards[i]?.[opponent].bar ?? 0),
+        );
+        return { side: played.side, halfMoves: played.halfMoves, boards, hits };
     }
 
     /**
@@ -160,7 +231,7 @@ export class Game {
      */
     async nextHalfMoves(): Promise<HalfMove[]> {
         const state = this.state;
-        if (state.turn !== "player" || state.phase !== "moving") {
+        if (state.turn !== "player" || state.phase !== "moving" || this.moveComplete) {
             return [];
         }
         const roll = rollToPlay(state);
@@ -175,7 +246,7 @@ export class Game {
         const moves = [...candidates.values()];
         const checks = await Promise.all(
             moves.map((h) =>
-                this.#engine.checkHalfMoves(state.position, roll, [...this.#pending, h]),
+                this.#engine.checkHalfMoves(state.position, roll, [...this.pendingHalfMoves, h]),
             ),
         );
         return moves.filter((_, i) => checks[i]?.valid === true);
@@ -199,47 +270,81 @@ export class Game {
 
     // ------------------------------------------------------------- Joueur
 
-    /** Le joueur lance les dés. S'il ne peut pas jouer, son tour passe. */
+    /** Le joueur lance les dés. S'il ne peut pas jouer (cannotMove), son
+     * tour ne passe qu'une fois qu'il l'a constaté (skipTurn). */
     async roll(): Promise<void> {
-        const state = this.#expect("player", "rolling");
-        const roll = rollDice(this.#dice);
-        this.#append({ type: "DiceRolled", side: "player", roll });
-        const moves = await this.#engine.legalMoves(state.position, roll);
-        if (moves.length === 0) {
-            await this.#playMove("player", [], null);
+        this.#expect("player", "rolling");
+        this.#append({ type: "DiceRolled", side: "player", roll: rollDice(this.#dice) });
+    }
+
+    /** Le joueur a lancé les dés, mais le moteur ne lui donne aucun coup
+     * légal : il ne peut que laisser passer son tour. */
+    async cannotMove(): Promise<boolean> {
+        const state = this.state;
+        if (state.turn !== "player" || state.phase !== "moving") {
+            return false;
         }
+        const moves = await this.#engine.legalMoves(state.position, rollToPlay(state));
+        return moves.length === 0;
+    }
+
+    /** Le joueur, qui ne peut pas jouer son jet, laisse passer son tour.
+     * Erreur s'il a un coup possible. */
+    async skipTurn(): Promise<void> {
+        this.#expect("player", "moving");
+        if (!(await this.cannotMove())) {
+            throw new Error("vous avez un coup possible : jouez-le");
+        }
+        await this.#playMove("player", [], null);
     }
 
     /**
      * Le joueur déplace un pion (un dé). Renvoie false si ce demi-coup ne
-     * mène à aucun coup légal : il est refusé et rien ne change. Quand les
-     * demi-coups forment un coup complet, le coup est joué.
+     * mène à aucun coup légal (ou si le coup est déjà complet) : il est
+     * refusé et rien ne change. Le coup n'est pas joué pour autant : une fois
+     * complet (moveComplete), il attend d'être validé (confirmMove).
      */
     async playHalfMove(halfMove: HalfMove): Promise<boolean> {
         const state = this.#expect("player", "moving");
-        const halfMoves = [...this.#pending, halfMove];
-        const check = await this.#engine.checkHalfMoves(
-            state.position,
-            rollToPlay(state),
-            halfMoves,
-        );
+        if (this.moveComplete) {
+            return false;
+        }
+        const check = await this.#engine.checkHalfMoves(state.position, rollToPlay(state), [
+            ...this.pendingHalfMoves,
+            halfMove,
+        ]);
         if (!check.valid || check.position === null) {
             return false;
         }
-        if (check.complete) {
-            this.cancelHalfMoves();
-            await this.#playMove("player", halfMoves, check.position);
-        } else {
-            this.#pending = halfMoves;
-            this.#pendingPosition = check.position;
-        }
+        this.#pending = [
+            ...this.#pending,
+            { halfMove, position: check.position, complete: check.complete },
+        ];
         return true;
     }
 
-    /** Oublie les demi-coups saisis du coup en cours. */
+    /** Défait le dernier demi-coup saisi du coup en cours (rien s'il n'y en a
+     * pas) : il n'a jamais été dans le journal. */
+    undoLastHalfMove(): void {
+        this.#pending = this.#pending.slice(0, -1);
+    }
+
+    /** Oublie tous les demi-coups saisis du coup en cours. */
     cancelHalfMoves(): void {
         this.#pending = [];
-        this.#pendingPosition = null;
+    }
+
+    /** Le joueur valide son coup complet : il entre dans le journal
+     * (MovePlayed) et le tour passe. Erreur si le coup n'est pas complet. */
+    async confirmMove(): Promise<void> {
+        this.#expect("player", "moving");
+        const last = this.#pending.at(-1);
+        if (last?.complete !== true) {
+            throw new Error("le coup n'est pas complet : jouez encore");
+        }
+        const halfMoves = this.pendingHalfMoves;
+        this.cancelHalfMoves();
+        await this.#playMove("player", halfMoves, last.position);
     }
 
     /** Le joueur double, avant de lancer les dés ; l'ordinateur prend ou passe
@@ -325,6 +430,14 @@ export class Game {
         this.#journal = appendEvent(this.#journal, event);
     }
 
+    /** Le plateau d'une position vue de onRoll, décodé par le moteur. */
+    async #sideBoards(position: PositionId, onRoll: Side, cube: Cube): Promise<SideBoards> {
+        const board = await this.#engine.board(position, engineCube(cube, onRoll));
+        return onRoll === "player"
+            ? { player: board.onRoll, computer: board.opponent }
+            : { player: board.opponent, computer: board.onRoll };
+    }
+
     /** Vérifie que c'est bien à side d'agir, dans l'une des phases. */
     #expect(side: Side, ...phases: GameState["phase"][]): GameState {
         const state = this.state;
@@ -384,6 +497,52 @@ export class Game {
     }
 }
 
+/** Un dé du jet à jouer, et s'il est déjà utilisé par un demi-coup saisi. */
+export interface DieToPlay {
+    readonly value: number;
+    readonly used: boolean;
+}
+
+/** Un demi-coup saisi, pas encore validé. */
+interface PendingHalfMove {
+    readonly halfMove: HalfMove;
+    /** La position après lui, vue du joueur. */
+    readonly position: PositionId;
+    /** Les demi-coups saisis jusqu'à lui forment un coup complet. */
+    readonly complete: boolean;
+}
+
+/**
+ * Quels dés les demi-coups ont utilisés : chaque demi-coup reçoit un dé
+ * différent qui le produit (de from vers from - dé, ou vers la sortie si le
+ * dé dépasse), comme les candidats de nextHalfMoves. Les dés sont essayés du
+ * plus petit au plus grand : un pion sorti l'est avec le plus petit dé
+ * suffisant. Si aucune répartition ne convient, les premiers dés sont
+ * marqués, un par demi-coup.
+ */
+function assignDice(dice: readonly number[], halfMoves: readonly HalfMove[]): boolean[] {
+    const order = dice.map((_, i) => i).sort((i, j) => (dice[i] ?? 0) - (dice[j] ?? 0));
+    const used = dice.map(() => false);
+    const fits = (h: HalfMove, die: number) => Math.max(h.from - die, OFF) === h.to;
+    const place = (k: number): boolean => {
+        const h = halfMoves[k];
+        if (h === undefined) {
+            return true;
+        }
+        for (const i of order) {
+            if (!used[i] && fits(h, dice[i] ?? 0)) {
+                used[i] = true;
+                if (place(k + 1)) {
+                    return true;
+                }
+                used[i] = false;
+            }
+        }
+        return false;
+    };
+    return place(0) ? used : dice.map((_, i) => i < halfMoves.length);
+}
+
 /** Le jet à jouer, en phase moving. */
 function rollToPlay(state: GameState): Roll {
     if (state.roll === null) {

app/src/ui/app.ts

@@ -10,14 +10,31 @@
 // son tour ; le plateau est ensuite redessiné à partir de l'état de la partie.
 
 import type { GameJournal } from "../domain/game/events.js";
-import type { Game, SideBoards } from "../domain/game/game.js";
+import type { Game, MoveSteps, SideBoards } from "../domain/game/game.js";
 import { formatHalfMoves, type HalfMove } from "../domain/game/position.js";
-import type { Side } from "../domain/game/side.js";
-import { boardModel, moveTargets, type Place, placeOf } from "./board-model.js";
-import { renderBoard, type ShownDie } from "./board-view.js";
+import { otherSide, type Side } from "../domain/game/side.js";
+import {
+    boardModel,
+    moveTargets,
+    moveTrace,
+    onlyHalfMove,
+    type Place,
+    placeOf,
+} from "./board-model.js";
+import {
+    checkerSpot,
+    type DiceAction,
+    NO_MARKS,
+    renderBoard,
+    type ShownDie,
+    slideChecker,
+} from "./board-view.js";
 import { showHelp } from "./help.js";
 import { TEXTS } from "./texts.js";
 
+/** Durée du glissement d'un pion, pour chaque demi-coup de l'ordinateur. */
+const SLIDE_MS = 400;
+
 export interface AppOptions {
     /** Résolue quand le moteur est chargé, rejetée s'il ne peut pas l'être. */
     readonly engineReady: Promise<unknown>;
@@ -48,7 +65,10 @@ export function startApp(options: AppOptions): void {
         double: byId<HTMLButtonElement>("double"),
         take: byId<HTMLButtonElement>("take"),
         drop: byId<HTMLButtonElement>("drop"),
+        confirm: byId<HTMLButtonElement>("confirm"),
         cancel: byId<HTMLButtonElement>("cancel"),
+        skip: byId<HTMLButtonElement>("skip"),
+        replay: byId<HTMLButtonElement>("replay"),
         again: byId<HTMLButtonElement>("again"),
         newGame: byId<HTMLButtonElement>("new-game"),
         helpButton: byId<HTMLButtonElement>("help-button"),
@@ -56,13 +76,23 @@ export function startApp(options: AppOptions): void {
         game: byId("game"),
         help: byId("help"),
         helpContent: byId("help-content"),
+        doubleDialog: byId<HTMLDialogElement>("double-dialog"),
+        doubleQuestion: byId("double-question"),
+        doubleConfirm: byId<HTMLButtonElement>("double-confirm"),
+        doubleCancel: byId<HTMLButtonElement>("double-cancel"),
     };
     ui.board.setAttribute("aria-label", TEXTS.boardLabel);
     ui.roll.textContent = TEXTS.roll;
     ui.double.textContent = TEXTS.double;
     ui.take.textContent = TEXTS.take;
     ui.drop.textContent = TEXTS.drop;
+    ui.confirm.textContent = TEXTS.confirm;
+    ui.doubleConfirm.textContent = TEXTS.double;
+    ui.doubleCancel.textContent = TEXTS.cancel;
     ui.cancel.textContent = TEXTS.cancel;
+    ui.skip.textContent = TEXTS.skip;
+    ui.replay.textContent = TEXTS.replay;
+    ui.replay.title = TEXTS.replayTitle;
     ui.again.textContent = TEXTS.newGame;
     ui.newGame.textContent = TEXTS.newGame;
     ui.helpButton.textContent = TEXTS.help;
@@ -74,22 +104,35 @@ export function startApp(options: AppOptions): void {
     let targets = new Map<Place, Map<Place, HalfMove>>();
     let selected: Place | null = null;
     let canDouble = false;
+    // Le joueur a lancé les dés mais ne peut pas jouer : il doit continuer.
+    let stuck = false;
     let busy = true;
     let info = "";
+    // Le dernier coup de l'ordinateur, montré (traces, bouton « Revoir »)
+    // jusqu'à la prochaine action du joueur ; null : rien à montrer.
+    let shownMove: MoveSteps | null = null;
+    // Pendant l'animation d'un coup, render() laisse le plateau à l'animation.
+    let animating = false;
 
     // ------------------------------------------------------------ Dessin
 
-    /** Recalcule ce qui demande le moteur, puis redessine. */
-    async function refresh(): Promise<void> {
+    /** Recalcule ce qui demande le moteur, sans redessiner. */
+    async function update(): Promise<void> {
         if (game === null) {
             return;
         }
         sides = await game.displayedBoard();
         targets = moveTargets(await game.nextHalfMoves());
         canDouble = await game.canDouble();
+        stuck = await game.cannotMove();
         if (selected !== null && !targets.has(selected)) {
             selected = null;
         }
+    }
+
+    /** Recalcule ce qui demande le moteur, puis redessine. */
+    async function refresh(): Promise<void> {
+        await update();
         render();
     }
 
@@ -99,30 +142,61 @@ export function startApp(options: AppOptions): void {
         }
         const state = game.state;
         const model = boardModel(sides);
-        renderBoard(ui.board, model, {
-            dice: shownDice(game),
-            cube: state.cube,
-            movable: new Set(targets.keys()),
-            selected,
-            targets: new Set(selected === null ? [] : (targets.get(selected)?.keys() ?? [])),
-            lastMove: lastComputerMove(game),
-        });
+        if (!animating) {
+            renderBoard(ui.board, model, {
+                dice: shownDice(game, stuck),
+                cube: state.cube,
+                movable: new Set(targets.keys()),
+                selected,
+                targets: new Set(selected === null ? [] : (targets.get(selected)?.keys() ?? [])),
+                trace:
+                    shownMove === null
+                        ? null
+                        : moveTrace(shownMove.side, shownMove.halfMoves, shownMove.hits),
+                // Mêmes conditions que les boutons « Lancer les dés »,
+                // « Valider » et « Doubler ».
+                diceAction: busy ? null : diceAction(game),
+                canDouble: !busy && canDouble,
+            });
+        }
         ui.pips.textContent = TEXTS.pipCounts(model.pipCount.player, model.pipCount.computer);
-        ui.info.textContent = info;
-        ui.prompt.textContent = prompt(game, selected !== null, canDouble);
+        // Un jet sans coup possible reste annoncé jusqu'à l'action suivante,
+        // même après un rechargement de la page.
+        if (stuck && state.roll !== null) {
+            ui.info.textContent = TEXTS.youCannotMove(state.roll);
+        } else if (computerCouldNotMove(game)) {
+            ui.info.textContent = TEXTS.computerCannotMove(rollBefore(game));
+        } else {
+            ui.info.textContent = info;
+        }
+        ui.prompt.textContent = stuck
+            ? TEXTS.pressContinue
+            : prompt(game, selected !== null, canDouble);
         ui.prompt.classList.toggle("thinking", state.turn === "computer" && isPlaying(game));
 
         const player = state.turn === "player";
         show(ui.roll, player && state.phase === "rolling");
         show(ui.double, player && state.phase === "rolling");
         ui.double.disabled = busy || !canDouble;
-        show(ui.cancel, player && state.phase === "moving");
+        show(ui.confirm, player && state.phase === "moving" && game.moveComplete);
+        show(ui.cancel, player && state.phase === "moving" && !stuck);
+        show(ui.skip, stuck);
         ui.cancel.disabled = busy || game.pendingHalfMoves.length === 0;
         const doubled = state.turn === "computer" && state.phase === "doubled";
         show(ui.take, doubled);
         show(ui.drop, doubled);
         show(ui.again, state.phase === "over");
-        for (const button of [ui.roll, ui.take, ui.drop, ui.again, ui.newGame]) {
+        show(ui.replay, shownMove !== null);
+        for (const button of [
+            ui.roll,
+            ui.take,
+            ui.drop,
+            ui.confirm,
+            ui.skip,
+            ui.replay,
+            ui.again,
+            ui.newGame,
+        ]) {
             button.disabled = busy;
         }
         // Pour le style et pour les tests dans un navigateur : l'écran
@@ -142,14 +216,73 @@ export function startApp(options: AppOptions): void {
         }
     }
 
-    /** L'ordinateur joue tant que c'est son tour (il s'arrête s'il double). */
-    async function computerTurns(): Promise<void> {
+    /** L'ordinateur joue tant que c'est son tour (il s'arrête s'il double).
+     * Son dernier coup, s'il est la dernière chose jouée, devient le coup à
+     * montrer. Renvoie vrai si l'ordinateur a joué. */
+    async function computerTurns(): Promise<boolean> {
+        let played = false;
         while (game !== null && game.state.turn === "computer" && isPlaying(game)) {
             await refresh();
             const start = performance.now();
             await game.playComputerTurn();
             info = describeComputerTurn(game, performance.now() - start);
             save();
+            played = true;
+        }
+        if (game !== null) {
+            shownMove = await computerMoveToShow(game);
+        }
+        return played;
+    }
+
+    /**
+     * Fait glisser les pions du coup de l'ordinateur, un demi-coup après
+     * l'autre, à partir des plateaux intermédiaires donnés par le domaine. Rien
+     * si le système demande moins d'animations : les traces suffisent.
+     */
+    async function animateMove(steps: MoveSteps): Promise<void> {
+        if (game === null || window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+            return;
+        }
+        const decor = { dice: shownDice(game, false), cube: game.state.cube, ...NO_MARKS };
+        const draw = (i: number) => {
+            const boards = steps.boards[i];
+            if (boards !== undefined) {
+                renderBoard(ui.board, boardModel(boards), decor);
+            }
+        };
+        animating = true;
+        render(); // messages et boutons ; le plateau est à l'animation
+        try {
+            for (const [i, halfMove] of steps.halfMoves.entries()) {
+                const from = placeOf(steps.side, halfMove.from);
+                const to = placeOf(steps.side, halfMove.to);
+                draw(i);
+                const start = checkerSpot(ui.board, from);
+                const victim = steps.hits[i] === true ? checkerSpot(ui.board, to) : null;
+                draw(i + 1);
+                await Promise.all([
+                    start && slideChecker(ui.board, to, start, SLIDE_MS),
+                    victim &&
+                        slideChecker(ui.board, `bar-${otherSide(steps.side)}`, victim, SLIDE_MS),
+                ]);
+            }
+        } finally {
+            animating = false;
+        }
+    }
+
+    /** Rend la main au joueur : recalcule, anime le coup à montrer (si
+     * animate), puis redessine avec ses traces. */
+    async function settle(animate: boolean): Promise<void> {
+        try {
+            await update();
+            if (animate && shownMove !== null) {
+                await animateMove(shownMove);
+            }
+        } finally {
+            busy = false;
+            render();
         }
     }
 
@@ -162,6 +295,7 @@ export function startApp(options: AppOptions): void {
         busy = true;
         selected = null;
         targets = new Map();
+        shownMove = null;
         render();
         try {
             await action(game);
@@ -170,8 +304,7 @@ export function startApp(options: AppOptions): void {
         } catch (error) {
             info = TEXTS.actionFailed(error instanceof Error ? error.message : String(error));
         } finally {
-            busy = false;
-            await refresh();
+            await settle(true);
         }
     }
 
@@ -186,17 +319,31 @@ export function startApp(options: AppOptions): void {
         act(async (g) => {
             info = "";
             await g.roll();
-            const last = g.events.at(-1);
-            if (last?.type === "MovePlayed" && last.halfMoves.length === 0) {
-                info = TEXTS.youCannotMove(rollBefore(g));
-            }
         });
 
-    ui.double.onclick = () =>
+    // Aucun coup possible : le joueur laisse passer son tour.
+    ui.skip.onclick = () =>
         act(async (g) => {
+            info = "";
+            await g.skipTurn();
+        });
+
+    // Doubler demande confirmation : un double proposé ne se reprend pas.
+    ui.double.onclick = () => {
+        if (busy || game === null || !canDouble) {
+            return;
+        }
+        ui.doubleQuestion.textContent = TEXTS.confirmDouble(2 * game.state.cube.value);
+        ui.doubleDialog.showModal();
+    };
+    ui.doubleCancel.onclick = () => ui.doubleDialog.close();
+    ui.doubleConfirm.onclick = () => {
+        ui.doubleDialog.close();
+        void act(async (g) => {
             await g.double();
             info = g.state.phase === "over" ? "" : TEXTS.computerTakes(g.state.cube.value);
         });
+    };
 
     ui.take.onclick = () =>
         act((g) => {
@@ -210,11 +357,23 @@ export function startApp(options: AppOptions): void {
             info = "";
         });
 
+    // Le coup saisi, complet, entre dans la partie : le tour passe.
+    ui.confirm.onclick = () =>
+        act(async (g) => {
+            info = "";
+            await g.confirmMove();
+        });
+
+    // Annuler défait le dernier demi-coup saisi, un par un. L'écran est
+    // occupé le temps que le moteur recalcule les coups possibles.
     ui.cancel.onclick = () => {
         if (!busy && game !== null) {
-            game.cancelHalfMoves();
+            game.undoLastHalfMove();
             selected = null;
-            void refresh();
+            shownMove = null;
+            busy = true;
+            render();
+            void settle(false);
         }
     };
 
@@ -231,25 +390,65 @@ export function startApp(options: AppOptions): void {
     ui.newGame.onclick = newGame;
     ui.again.onclick = newGame;
 
-    // Toucher le plateau : un pion jouable, puis une de ses cases d'arrivée.
+    /** Joue un demi-coup du joueur ; le coup attend ensuite sa suite ou sa
+     * validation. */
+    function playHalfMove(halfMove: HalfMove): void {
+        void act(async (g) => {
+            info = "";
+            await g.playHalfMove(halfMove);
+        });
+    }
+
+    // Toucher le plateau : un pion jouable, puis une de ses cases d'arrivée
+    // (ou aucune, s'il n'en a qu'une : il y va tout de suite).
     ui.board.addEventListener("click", (event) => {
         const target = event.target as Element | null;
+        // Toucher les dés (d'un côté ou de l'autre du plateau) ou le videau :
+        // comme leurs boutons.
+        const action = target?.closest("[data-action]")?.getAttribute("data-action");
+        if (action === "roll" && !ui.roll.hidden && !ui.roll.disabled) {
+            ui.roll.click();
+            return;
+        }
+        if (action === "confirm" && !ui.confirm.hidden && !ui.confirm.disabled) {
+            ui.confirm.click();
+            return;
+        }
+        if (action === "double" && !ui.double.hidden && !ui.double.disabled) {
+            ui.double.click();
+            return;
+        }
         const place = target?.closest("[data-place]")?.getAttribute("data-place") as Place | null;
         if (busy || place == null) {
             return;
         }
         const halfMove = selected === null ? undefined : targets.get(selected)?.get(place);
         if (halfMove !== undefined) {
-            void act(async (g) => {
-                info = "";
-                await g.playHalfMove(halfMove);
-            });
+            playHalfMove(halfMove);
+            return;
+        }
+        const only = place === selected ? null : onlyHalfMove(targets, place);
+        if (only !== null) {
+            playHalfMove(only);
             return;
         }
         selected = targets.has(place) && place !== selected ? place : null;
+        if (selected !== null) {
+            shownMove = null; // toucher un pion : le coup de l'ordinateur s'efface
+        }
         render();
     });
 
+    // Revoir le dernier coup de l'ordinateur, puis ses traces.
+    ui.replay.onclick = async () => {
+        if (busy || shownMove === null) {
+            return;
+        }
+        busy = true;
+        selected = null;
+        await settle(true);
+    };
+
     ui.helpButton.onclick = () => {
         ui.game.hidden = true;
         ui.help.hidden = false;
@@ -264,7 +463,17 @@ export function startApp(options: AppOptions): void {
     // ---------------------------------------------------------- Démarrage
 
     ui.prompt.textContent = TEXTS.loading;
-    for (const button of [ui.roll, ui.double, ui.take, ui.drop, ui.cancel, ui.again]) {
+    for (const button of [
+        ui.roll,
+        ui.double,
+        ui.take,
+        ui.drop,
+        ui.confirm,
+        ui.cancel,
+        ui.skip,
+        ui.replay,
+        ui.again,
+    ]) {
         button.hidden = true;
     }
     ui.newGame.disabled = true;
@@ -276,12 +485,13 @@ export function startApp(options: AppOptions): void {
                 save();
             }
             // Comme après une action du joueur : l'ordinateur joue si c'est
-            // à lui (partie nouvelle ou reprise pendant son tour).
+            // à lui (partie nouvelle ou reprise pendant son tour). Une partie
+            // reprise juste après son coup le montre, sans l'animer.
+            let played = false;
             try {
-                await computerTurns();
+                played = await computerTurns();
             } finally {
-                busy = false;
-                await refresh();
+                await settle(played);
             }
         },
         (error: unknown) => {
@@ -306,30 +516,62 @@ function rollBefore(game: Game): readonly number[] {
     return rolled?.type === "DiceRolled" ? rolled.roll : [];
 }
 
-/** Les dés à montrer : le dernier jet, de la couleur de qui l'a lancé
- * (au jet d'ouverture, un dé chacun). */
-function shownDice(game: Game): ShownDie[] {
+/** Ce que fait un toucher sur les dés : lancer quand le joueur peut lancer,
+ * valider quand son coup est complet. */
+function diceAction(game: Game): DiceAction | null {
+    const state = game.state;
+    if (state.turn !== "player") {
+        return null;
+    }
+    if (state.phase === "rolling") {
+        return "roll";
+    }
+    return state.phase === "moving" && game.moveComplete ? "confirm" : null;
+}
+
+/** Les dés à montrer : le dernier jet, de la couleur de qui l'a lancé (au
+ * jet d'ouverture, un dé chacun ; quatre pour un double). Pendant que le
+ * joueur saisit son coup, chaque dé déjà utilisé est estompé. Ils sont
+ * barrés si le jet ne permet aucun coup : le joueur est bloqué (stuck), ou
+ * l'ordinateur vient de passer son tour sans bouger. */
+function shownDice(game: Game, stuck: boolean): ShownDie[] {
+    const toPlay = game.diceToPlay;
     const rolled = game.events.findLast((e) => e.type === "DiceRolled");
     if (rolled?.type !== "DiceRolled") {
         return [];
     }
-    const sides: Side[] =
-        rolled.side === null ? ["player", "computer"] : [rolled.side, rolled.side];
-    return rolled.roll.map((value, i) => ({ value, side: sides[i] ?? "player" }));
+    // Au jet d'ouverture, un dé chacun.
+    const sideOf = (i: number): Side => rolled.side ?? (i === 0 ? "player" : "computer");
+    if (toPlay.length > 0) {
+        return toPlay.map((die, i) => ({
+            value: die.value,
+            side: sideOf(i),
+            blocked: stuck,
+            used: die.used,
+        }));
+    }
+    const blocked = computerCouldNotMove(game);
+    const [a, b] = rolled.roll;
+    const values = a === b ? [a, a, a, a] : [a, b];
+    return values.map((value, i) => ({ value, side: sideOf(i), blocked, used: false }));
 }
 
-/** Les cases de départ et d'arrivée du dernier coup, s'il est de
- * l'ordinateur. */
-function lastComputerMove(game: Game): Set<Place> {
-    const played = game.events.findLast((e) => e.type === "MovePlayed");
-    const places = new Set<Place>();
-    if (played?.type === "MovePlayed" && played.side === "computer") {
-        for (const h of played.halfMoves) {
-            places.add(placeOf("computer", h.from));
-            places.add(placeOf("computer", h.to));
-        }
+/** La dernière chose jouée (fin de partie mise à part) est un tour de
+ * l'ordinateur qui n'a pas pu jouer son jet. */
+function computerCouldNotMove(game: Game): boolean {
+    const last = game.events.findLast((e) => e.type !== "GameEnded");
+    return last?.type === "MovePlayed" && last.side === "computer" && last.halfMoves.length === 0;
+}
+
+/** Le dernier coup de l'ordinateur, demi-coup par demi-coup, s'il est la
+ * dernière chose jouée (fin de partie mise à part) et qu'il a déplacé des
+ * pions ; sinon null. */
+async function computerMoveToShow(game: Game): Promise<MoveSteps | null> {
+    const last = game.events.findLast((e) => e.type !== "GameEnded");
+    if (last?.type !== "MovePlayed" || last.side !== "computer" || last.halfMoves.length === 0) {
+        return null;
     }
-    return places;
+    return game.lastMoveSteps();
 }
 
 /** Ce qu'a fait l'ordinateur pendant son tour. */
@@ -366,6 +608,9 @@ function prompt(game: Game, selecting: boolean, canDouble: boolean): string {
     if (state.phase === "rolling") {
         return canDouble ? TEXTS.yourRoll : TEXTS.yourRollNoDouble;
     }
+    if (state.phase === "moving" && game.moveComplete) {
+        return TEXTS.confirmOrUndo;
+    }
     if (state.phase === "moving" && state.roll !== null) {
         return selecting ? TEXTS.pickTarget : TEXTS.yourMove(state.roll);
     }

app/src/ui/board-model.ts

@@ -82,6 +82,71 @@ export function moveTargets(halfMoves: readonly HalfMove[]): Map<Place, Map<Plac
     return targets;
 }
 
+/** Le seul demi-coup possible depuis place, s'il n'a qu'une case d'arrivée
+ * (le pion y va dès qu'on le touche) ; null sinon. */
+export function onlyHalfMove(
+    targets: ReadonlyMap<Place, ReadonlyMap<Place, HalfMove>>,
+    place: Place,
+): HalfMove | null {
+    const tos = targets.get(place);
+    if (tos === undefined || tos.size !== 1) {
+        return null;
+    }
+    return [...tos.values()][0] ?? null;
+}
+
+/** Ce qui reste dessiné d'un coup une fois joué. */
+export interface MoveTrace {
+    /** Le camp qui a joué. */
+    readonly side: Side;
+    /** Une flèche par demi-coup, de sa case de départ à sa case d'arrivée. */
+    readonly arrows: readonly { readonly from: Place; readonly to: Place }[];
+    /** Par endroit, le nombre de pions arrivés et restés là (entourés). */
+    readonly landed: ReadonlyMap<Place, number>;
+    /** Par endroit, le nombre de pions partis (un pion fantôme chacun). */
+    readonly left: ReadonlyMap<Place, number>;
+    /** Le nombre de pions adverses frappés, envoyés sur la barre. */
+    readonly hits: number;
+}
+
+/**
+ * Les traces d'un coup de side : ses demi-coups, et pour chacun s'il a frappé.
+ * Un pion qui fait étape sur une case (13/7 7/4) n'y laisse ni fantôme ni
+ * cercle : seuls comptent le départ et l'arrivée de chaque pion.
+ */
+export function moveTrace(
+    side: Side,
+    halfMoves: readonly HalfMove[],
+    hits: readonly boolean[],
+): MoveTrace {
+    const balance = new Map<Place, number>();
+    const arrows = halfMoves.map((h) => {
+        const from = placeOf(side, h.from);
+        const to = placeOf(side, h.to);
+        balance.set(from, (balance.get(from) ?? 0) - 1);
+        balance.set(to, (balance.get(to) ?? 0) + 1);
+        return { from, to };
+    });
+    const landed = new Map<Place, number>();
+    const left = new Map<Place, number>();
+    for (const [place, n] of balance) {
+        if (n > 0) {
+            landed.set(place, n);
+        } else if (n < 0) {
+            left.set(place, -n);
+        }
+    }
+    return { side, arrows, landed, left, hits: hits.filter(Boolean).length };
+}
+
+/** La couleur d'une flèche (case), d'après son numéro affiché (1 à 24,
+ * pour le joueur) : impaire en point-a, paire en point-b (charte). Jamais
+ * d'après sa colonne : les cases 12 et 13, l'une au-dessus de l'autre,
+ * n'ont pas la même couleur. */
+export function pointColor(number: number): "point-a" | "point-b" {
+    return number % 2 === 1 ? "point-a" : "point-b";
+}
+
 /** Où se trouve une case sur le dessin : rangée du haut ou du bas, et
  * colonne de 0 (à gauche) à 11 (à droite), sans compter la barre. */
 export function pointSlot(number: number): { top: boolean; column: number } {

app/src/ui/board-view.ts

@@ -11,14 +11,28 @@
 
 import type { Cube } from "../domain/game/cube.js";
 import type { Side } from "../domain/game/side.js";
-import { type BoardModel, type Place, pointSlot } from "./board-model.js";
+import {
+    type BoardModel,
+    type MoveTrace,
+    type Place,
+    pointColor,
+    pointSlot,
+} from "./board-model.js";
+import { TEXTS } from "./texts.js";
 
 /** Un dé affiché, de la couleur du camp qui l'a lancé. */
 export interface ShownDie {
     readonly value: number;
     readonly side: Side;
+    /** Le jet ne permet aucun coup : le dé est estompé et barré. */
+    readonly blocked: boolean;
+    /** Le dé est déjà utilisé par un demi-coup saisi : il est estompé. */
+    readonly used: boolean;
 }
 
+/** Ce que fait un toucher sur les dés : lancer, ou valider le coup saisi. */
+export type DiceAction = "roll" | "confirm";
+
 /** Ce qui s'ajoute aux pions : dés, videau, mises en évidence. */
 export interface BoardDecor {
     readonly dice: readonly ShownDie[];
@@ -28,10 +42,31 @@ export interface BoardDecor {
     /** Le pion touché, dont on montre les cases d'arrivée. */
     readonly selected: Place | null;
     readonly targets: ReadonlySet<Place>;
-    /** Les cases de départ et d'arrivée du dernier coup de l'ordinateur. */
-    readonly lastMove: 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. */
+    readonly diceAction: DiceAction | null;
+    /** Le joueur peut doubler : le videau se touche. */
+    readonly canDouble: boolean;
 }
 
+/** Ce qui ne s'ajoute pas aux pions pendant l'animation d'un coup. */
+export const NO_MARKS = {
+    movable: new Set<Place>(),
+    selected: null,
+    targets: new Set<Place>(),
+    trace: null,
+    diceAction: null,
+    canDouble: false,
+} as const;
+
+/** 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;
@@ -73,10 +108,51 @@ function columnLeft(column: number): number {
     return column < 6 ? FRAME + column * POINT_WIDTH : RIGHT_HALF + (column - 6) * POINT_WIDTH;
 }
 
-/** Centre du i-ième pion d'une pile, depuis le bord du plateau. */
-function stackY(top: boolean, index: number): number {
-    const offset = RADIUS + 1 + index * STEP;
-    return top ? FRAME + offset : HEIGHT - FRAME - offset;
+/** Un point du dessin. */
+export interface Spot {
+    readonly x: number;
+    readonly y: number;
+}
+
+/**
+ * Centre du pion numéro index (0 : le premier posé) d'un endroit : sur une
+ * case, depuis le bord du plateau ; sur la barre, depuis le milieu (le
+ * joueur dans la moitié haute, où il rentre, l'ordinateur en bas) ; dans la
+ * sortie, une tranche de pion vu de profil (l'ordinateur en haut).
+ */
+function slotCenter(place: Place, index: number): Spot {
+    if (place === "bar-player" || place === "bar-computer") {
+        const offset = RADIUS + 4 + Math.min(index, MAX_STACK) * STEP;
+        return {
+            x: BAR_LEFT + BAR_WIDTH / 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 };
+    }
+    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,
+    };
+}
+
+/** Le nombre de pions de side à un endroit. */
+function countAt(board: BoardModel, side: Side, place: Place): number {
+    if (place === `bar-${side}`) {
+        return board.bar[side];
+    }
+    if (place === `off-${side}`) {
+        return board.off[side];
+    }
+    const point = board.points.find((p) => p.place === place);
+    return point?.owner === side ? point.count : 0;
 }
 
 /** Redessine tout le plateau dans svg. */
@@ -91,7 +167,25 @@ export function renderBoard(svg: SVGSVGElement, board: BoardModel, decor: BoardD
     drawBar(svg, hits, board, decor);
     drawTray(svg, hits, board, decor);
     drawDice(svg, decor.dice);
-    drawCube(svg, decor.cube);
+    const cube = drawCube(svg, decor.cube);
+    if (decor.trace !== null) {
+        drawTrace(svg, board, decor.trace);
+    }
+    if (decor.diceAction !== null) {
+        if (decor.diceAction === "roll") {
+            waitingDice(svg);
+        }
+        // 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);
+        }
+    }
+    if (decor.canDouble) {
+        cube.classList.add("can-double");
+        addAction(hits, "double", TEXTS.double, cubeCenter(decor.cube), MIN_TARGET);
+    }
     // Les zones à toucher passent devant tout le reste.
     svg.append(hits);
 }
@@ -133,7 +227,7 @@ function drawPoint(
     const base = top ? FRAME : HEIGHT - FRAME;
     const tip = top ? FRAME + POINT_HEIGHT : HEIGHT - FRAME - POINT_HEIGHT;
     add(svg, "polygon", {
-        class: column % 2 === 0 ? "point-a" : "point-b",
+        class: pointColor(number),
         points: `${left},${base} ${left + POINT_WIDTH},${base} ${center},${tip}`,
     });
     add(
@@ -153,16 +247,7 @@ function drawPoint(
         });
     }
     if (point.owner !== null) {
-        const y = (i: number) => stackY(top, i);
-        drawStack(svg, point.owner, point.count, center, y, point.place, decor);
-    }
-    if (decor.lastMove.has(point.place)) {
-        add(svg, "circle", {
-            class: "last-move",
-            cx: center,
-            cy: top ? MIDDLE - 12 : MIDDLE + 12,
-            r: 5,
-        });
+        drawStack(svg, point.owner, point.count, point.place, decor);
     }
     addHit(hits, point.place, decor, {
         x: left,
@@ -172,14 +257,13 @@ function drawPoint(
     });
 }
 
-/** Une pile de pions, le i-ième centré en (cx, y(i)) ; le dernier porte le
- * nombre total s'il y en a trop pour les montrer tous. */
+/** Une pile de pions ; le dernier porte le nombre total s'il y en a trop
+ * pour les montrer tous. Le pion du dessus porte son endroit dans
+ * data-checker : c'est lui qu'on fait glisser quand un pion arrive. */
 function drawStack(
     svg: SVGSVGElement,
     side: Side,
     count: number,
-    cx: number,
-    y: (index: number) => number,
     place: Place,
     decor: BoardDecor,
 ): void {
@@ -192,15 +276,13 @@ function drawStack(
         } else if (last && decor.movable.has(place)) {
             classes.push("movable");
         }
-        const cy = y(i);
-        add(svg, "circle", { class: classes.join(" "), cx, cy, r: RADIUS });
+        const { x, y } = slotCenter(place, i);
+        const checker = add(svg, "circle", { class: classes.join(" "), cx: x, cy: y, r: RADIUS });
+        if (last) {
+            checker.setAttribute("data-checker", place);
+        }
         if (last && count > MAX_STACK) {
-            add(
-                svg,
-                "text",
-                { class: `checker-count count-${side}`, x: cx, y: cy + 6 },
-                String(count),
-            );
+            add(svg, "text", { class: `checker-count count-${side}`, x, y: y + 6 }, String(count));
         }
     }
 }
@@ -213,14 +295,10 @@ function drawBar(svg: SVGSVGElement, hits: Element, board: BoardModel, decor: Bo
         width: BAR_WIDTH,
         height: HEIGHT,
     });
-    const cx = BAR_LEFT + BAR_WIDTH / 2;
     // 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) {
-        const up = side === "player";
-        const y = (i: number) =>
-            up ? MIDDLE - RADIUS - 4 - i * STEP : MIDDLE + RADIUS + 4 + i * STEP;
-        drawStack(svg, side, board.bar[side], cx, y, `bar-${side}`, decor);
+        drawStack(svg, side, board.bar[side], `bar-${side}`, decor);
     }
     addHit(hits, "bar-player", decor, { x: BAR_LEFT, y: 0, width: BAR_WIDTH, height: MIDDLE });
 }
@@ -228,17 +306,12 @@ function drawBar(svg: SVGSVGElement, hits: Element, board: BoardModel, decor: Bo
 function drawTray(svg: SVGSVGElement, 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) {
-        for (let i = 0; i < board.off[side]; i++) {
-            const y =
-                side === "computer" ? FRAME + i * OFF_SLAB : HEIGHT - FRAME - (i + 1) * OFF_SLAB;
-            add(svg, "rect", {
-                class: `checker checker-${side}`,
-                x: TRAY_LEFT + 4,
-                y: y + 1,
-                width: TRAY_WIDTH - 8,
-                height: OFF_SLAB - 2,
-                rx: 3,
-            });
+        const count = board.off[side];
+        for (let i = 0; i < count; i++) {
+            const slab = addSlab(svg, `checker checker-${side}`, slotCenter(`off-${side}`, i));
+            if (i === count - 1) {
+                slab.setAttribute("data-checker", `off-${side}`);
+            }
         }
     }
     if (decor.targets.has("off-player")) {
@@ -251,14 +324,6 @@ function drawTray(svg: SVGSVGElement, hits: Element, board: BoardModel, decor: B
             rx: 4,
         });
     }
-    if (decor.lastMove.has("off-computer")) {
-        add(svg, "circle", {
-            class: "last-move",
-            cx: TRAY_LEFT + TRAY_WIDTH / 2,
-            cy: MIDDLE - 70,
-            r: 5,
-        });
-    }
     addHit(hits, "off-player", decor, {
         x: TRAY_LEFT,
         y: MIDDLE,
@@ -267,6 +332,143 @@ function drawTray(svg: SVGSVGElement, hits: Element, board: BoardModel, decor: B
     });
 }
 
+/** Une tranche de pion sorti, centrée en spot. */
+function addSlab(svg: Element, cssClass: string, spot: Spot): SVGElement {
+    return add(svg, "rect", {
+        class: cssClass,
+        x: TRAY_LEFT + 4,
+        y: spot.y - OFF_SLAB / 2 + 1,
+        width: TRAY_WIDTH - 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 {
+    if (place.startsWith("off-")) {
+        addSlab(svg, cssClass, spot);
+    } else {
+        add(svg, "circle", { class: cssClass, cx: spot.x, cy: spot.y, r });
+    }
+}
+
+// ------------------------------------------------------ Coup de l'ordinateur
+
+/**
+ * Les traces d'un coup : 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 {
+    const side = trace.side;
+    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);
+        }
+    }
+    for (const [place, n] of trace.landed) {
+        const top = topIndex(board, side, place);
+        for (let k = 0; k < n && top - k >= 0; k++) {
+            addRing(svg, "trace-landed", place, slotCenter(place, top - k), RADIUS + 3);
+        }
+    }
+    const opponent: Side = side === "player" ? "computer" : "player";
+    const bar: Place = `bar-${opponent}`;
+    const top = topIndex(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);
+    }
+    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,
+        orient: "auto",
+    });
+    add(marker, "path", { class: "trace-head", d: "M0,0 L10,5 L0,10 z" });
+    const departures = new Map<Place, number>();
+    for (const { from, to } of trace.arrows) {
+        // De la place libre laissée par le pion (son fantôme) à son pion
+        // d'arrivée.
+        const k = departures.get(from) ?? 0;
+        departures.set(from, k + 1);
+        const start = slotCenter(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);
+    }
+}
+
+/** 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 {
+    const count = countAt(board, side, place);
+    return place.startsWith("off-") ? count - 1 : Math.min(count, MAX_STACK) - 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 {
+    const dx = end.x - start.x;
+    const dy = end.y - start.y;
+    const length = Math.hypot(dx, dy);
+    const keep = length > 2 * gap ? (length - gap) / length : 0.5;
+    add(svg, "line", {
+        class: "trace-arrow",
+        x1: start.x,
+        y1: start.y,
+        x2: start.x + dx * keep,
+        y2: start.y + dy * keep,
+        "marker-end": "url(#trace-head)",
+    });
+}
+
+/** Le centre du pion du dessus d'un endroit, sur le plateau tel qu'il est
+ * dessiné (null s'il n'y a pas de pion). */
+export function checkerSpot(svg: SVGSVGElement, place: Place): Spot | null {
+    const checker = svg.querySelector(`[data-checker="${place}"]`);
+    if (checker === null) {
+        return null;
+    }
+    const number = (name: string) => Number(checker.getAttribute(name));
+    if (checker.tagName === "circle") {
+        return { x: number("cx"), y: number("cy") };
+    }
+    return { x: number("x") + number("width") / 2, y: number("y") + number("height") / 2 };
+}
+
+/**
+ * Fait glisser le pion du dessus de place depuis from jusqu'à sa position
+ * dessinée, en ms millisecondes (animation du navigateur, sans bibliothèque).
+ * Résolue à la fin du glissement.
+ */
+export async function slideChecker(
+    svg: SVGSVGElement,
+    place: Place,
+    from: Spot,
+    ms: number,
+): Promise<void> {
+    const checker = svg.querySelector(`[data-checker="${place}"]`);
+    const to = checkerSpot(svg, place);
+    if (checker === null || to === null || typeof checker.animate !== "function") {
+        return;
+    }
+    // Devant les autres pions pendant le trajet, mais derrière les zones à
+    // toucher, toujours dessinées en dernier.
+    svg.insertBefore(checker, svg.lastChild);
+    const animation = checker.animate(
+        [
+            { transform: `translate(${from.x - to.x}px, ${from.y - to.y}px)` },
+            { transform: "translate(0px, 0px)" },
+        ],
+        { duration: ms, easing: "ease-in-out" },
+    );
+    await animation.finished.catch(() => undefined);
+}
+
 // Position des points d'un dé, en fractions de son côté.
 const PIPS: Record<number, [number, number][]> = {
     1: [[0.5, 0.5]],
@@ -310,7 +512,12 @@ function drawDice(svg: SVGSVGElement, dice: readonly ShownDie[]): void {
     dice.forEach((die, i) => {
         const x = center - total / 2 + i * (DIE + gap);
         const y = MIDDLE - DIE / 2;
-        const group = add(svg, "g", { class: "die", "data-value": die.value });
+        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 });
         for (const [px, py] of PIPS[die.value] ?? []) {
             add(group, "circle", {
@@ -320,23 +527,77 @@ function drawDice(svg: SVGSVGElement, dice: readonly ShownDie[]): void {
                 r: 3.5,
             });
         }
+        if (die.blocked) {
+            add(group, "line", { class: "die-strike", x1: x, y1: y + DIE, x2: x + DIE, 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): void {
-    const shift = cube.owner === "computer" ? -48 : cube.owner === "player" ? 48 : 0;
-    const x = TRAY_LEFT + (TRAY_WIDTH - CUBE) / 2;
-    const y = MIDDLE + shift - CUBE / 2;
+function drawCube(svg: SVGSVGElement, cube: Cube): SVGElement {
+    const center = cubeCenter(cube);
+    const x = center.x - CUBE / 2;
+    const y = center.y - CUBE / 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,
         "text",
-        { class: "cube-value", x: x + CUBE / 2, y: y + CUBE / 2 + 6 },
+        { class: "cube-value", x: center.x, y: center.y + 6 },
         String(cube.owner === null ? 64 : cube.value),
     );
+    return group;
+}
+
+/** Le centre du videau dans le plateau de sortie. */
+function cubeCenter(cube: Cube): Spot {
+    const shift = cube.owner === "computer" ? -48 : cube.owner === "player" ? 48 : 0;
+    return { x: TRAY_LEFT + TRAY_WIDTH / 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 };
+    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]) {
+        add(group, "rect", {
+            class: "die-player",
+            x,
+            y: MIDDLE - DIE / 2,
+            width: DIE,
+            height: DIE,
+            rx: 6,
+        });
+    }
+}
+
+/**
+ * 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.
+ */
+function addAction(
+    hits: Element,
+    action: string,
+    label: string,
+    center: Spot,
+    width: number,
+): void {
+    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,
+    });
 }
 
 /** Une zone à toucher. Elle porte son état (can-move, can-land) pour les

app/src/ui/help.ts

@@ -91,10 +91,8 @@ export async function showHelp(container: HTMLElement): Promise<void> {
             renderFeature(container, feature);
         }
         renderGlossary(container, glossary);
-        const about = element(container, "p", `${TEXTS.about} `);
+        const about = element(container, "p", TEXTS.about);
         about.className = "about";
-        const link = element(about, "a", TEXTS.engineTestLink);
-        link.href = "moteur/";
         container.dataset.loaded = "true";
     } catch {
         status.textContent = TEXTS.helpFailed;

app/src/ui/texts.ts

@@ -36,7 +36,11 @@ export const TEXTS = {
     double: "Doubler",
     take: "Prendre",
     drop: "Passer",
+    confirm: "Valider",
     cancel: "Annuler",
+    skip: "Continuer",
+    replay: "Revoir",
+    replayTitle: "Revoir le dernier coup de l'ordinateur",
     newGame: "Nouvelle partie",
     help: "Aide",
     back: "Retour à la partie",
@@ -57,13 +61,16 @@ export const TEXTS = {
     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.",
-    youCannotMove: (dice: readonly number[]) =>
-        `Vous ne pouvez pas jouer ${roll(dice)} : votre tour passe.`,
+    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)}).`,
     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)}.`,
@@ -87,5 +94,4 @@ export const TEXTS = {
     helpLoading: "Chargement de l'aide…",
     helpFailed: "L'aide n'a pas pu se charger.",
     about: "Ustagammon est un logiciel libre (GPLv3). L'ordinateur joue avec GNU Backgammon.",
-    engineTestLink: "Test du moteur",
 } as const;

app/tests/full-game.test.ts

@@ -36,10 +36,17 @@ async function playToTheEnd(game: Game, engine: Awaited<ReturnType<typeof loadNo
         } else {
             assert.ok(state.roll !== null);
             const [first] = await engine.legalMoves(state.position, state.roll);
-            assert.ok(first !== undefined, "le joueur devrait avoir un coup");
+            if (first === undefined) {
+                // Aucun coup possible : le joueur laisse passer son tour.
+                assert.equal(await game.cannotMove(), true);
+                await game.skipTurn();
+                continue;
+            }
             for (const halfMove of first.halfMoves) {
                 assert.equal(await game.playHalfMove(halfMove), true);
             }
+            assert.equal(game.moveComplete, true);
+            await game.confirmMove();
         }
     }
     return actions;

app/tests/game.test.ts

@@ -78,27 +78,145 @@ test("un coup se saisit demi-coup par demi-coup ; un demi-coup refusé ne change
     assert.deepEqual(game.pendingHalfMoves, [{ from: 8, to: 5 }]);
     assert.equal(await game.playHalfMove({ from: 6, to: 5 }), true);
 
+    // Coup complet : il attend la validation, hors du journal.
+    assert.equal(game.moveComplete, true);
+    assert.equal(game.displayedPosition, "AFTER");
+    assert.equal(game.events.length, 2);
+    assert.equal(game.state.turn, "player");
+    assert.deepEqual(await game.nextHalfMoves(), []);
+    assert.equal(await game.playHalfMove({ from: 8, to: 7 }), false);
+
+    await game.confirmMove();
     const last = game.events.at(-1);
     assert.equal(last?.type, "MovePlayed");
     assert.deepEqual(game.pendingHalfMoves, []);
+    assert.equal(game.moveComplete, false);
     assert.equal(game.state.turn, "computer");
     assert.equal(game.state.phase, "rolling");
     assert.equal(game.state.position, "SWAPPED");
 });
 
-test("sans coup possible, le tour passe", async () => {
+test("un coup incomplet ne se valide pas", async () => {
+    const game = Game.start(fakeEngine(), { dice: fixedDice([3, 1]) });
+    await assert.rejects(game.confirmMove(), /pas complet/);
+    await game.playHalfMove({ from: 8, to: 5 });
+    await assert.rejects(game.confirmMove(), /pas complet/);
+    assert.equal(game.events.length, 2);
+});
+
+test("Annuler défait les demi-coups un par un, sans toucher au journal", async () => {
+    const game = Game.start(fakeEngine(), { dice: fixedDice([3, 1]) });
+    await game.playHalfMove({ from: 8, to: 5 });
+    await game.playHalfMove({ from: 6, to: 5 });
+    const journal = game.journal;
+
+    game.undoLastHalfMove();
+    assert.deepEqual(game.pendingHalfMoves, [{ from: 8, to: 5 }]);
+    assert.equal(game.moveComplete, false);
+    assert.equal(game.displayedPosition, "HALF");
+
+    game.undoLastHalfMove();
+    assert.deepEqual(game.pendingHalfMoves, []);
+    assert.equal(game.displayedPosition, START_POSITION);
+    game.undoLastHalfMove(); // rien à défaire : sans effet
+    assert.equal(game.journal, journal);
+
+    // Le coup se ressaisit ensuite normalement.
+    assert.equal(await game.playHalfMove({ from: 8, to: 5 }), true);
+    assert.equal(await game.playHalfMove({ from: 6, to: 5 }), true);
+    assert.equal(game.moveComplete, true);
+});
+
+test("les dés utilisés par les demi-coups saisis sont marqués", async () => {
+    const game = Game.start(fakeEngine(), { dice: fixedDice([3, 1]) });
+    assert.deepEqual(game.diceToPlay, [
+        { value: 3, used: false },
+        { value: 1, used: false },
+    ]);
+    await game.playHalfMove({ from: 8, to: 5 });
+    assert.deepEqual(game.diceToPlay, [
+        { value: 3, used: true },
+        { value: 1, used: false },
+    ]);
+    await game.playHalfMove({ from: 6, to: 5 });
+    assert.deepEqual(
+        game.diceToPlay.map((d) => d.used),
+        [true, true],
+    );
+    await game.confirmMove();
+    assert.deepEqual(game.diceToPlay, []);
+});
+
+test("un double donne quatre dés, marqués un par un ; une sortie prend le plus petit dé suffisant", async () => {
+    const engine = fakeEngine({
+        checkHalfMoves: async () => ({ valid: true, complete: false, position: "P" }),
+    });
+    const double = Game.start(engine, {
+        dice: fixedDice([2, 2]),
+        setup: { position: "X", firstTurn: "player" },
+    });
+    await double.roll();
+    assert.equal(double.diceToPlay.length, 4);
+    await double.playHalfMove({ from: 13, to: 11 });
+    await double.playHalfMove({ from: 11, to: 9 });
+    assert.deepEqual(
+        double.diceToPlay.map((d) => d.used),
+        [true, true, false, false],
+    );
+
+    const bearOff = Game.start(engine, {
+        dice: fixedDice([6, 4]),
+        setup: { position: "X", firstTurn: "player" },
+    });
+    await bearOff.roll();
+    // 3/off : le 4 suffit, le 6 reste.
+    await bearOff.playHalfMove({ from: 3, to: 0 });
+    assert.deepEqual(bearOff.diceToPlay, [
+        { value: 6, used: false },
+        { value: 4, used: true },
+    ]);
+    // 6/2 demande le 4 : la sortie a donc pris le 6.
+    await bearOff.playHalfMove({ from: 6, to: 2 });
+    assert.deepEqual(
+        bearOff.diceToPlay.map((d) => d.used),
+        [true, true],
+    );
+});
+
+test("sans coup possible, le tour passe quand le joueur le laisse passer", async () => {
     const engine = fakeEngine({ legalMoves: async () => [] });
     const game = Game.start(engine, {
         dice: fixedDice([6, 6]),
         setup: { position: "BLOCKED", firstTurn: "player" },
     });
     await game.roll();
+    // Le tour ne passe pas tout seul : le jet reste à « jouer ».
+    assert.equal(game.state.phase, "moving");
+    assert.equal(game.state.turn, "player");
+    assert.equal(await game.cannotMove(), true);
+    await game.skipTurn();
     const last = game.events.at(-1);
     assert.ok(last?.type === "MovePlayed");
     assert.deepEqual(last.halfMoves, []);
     assert.equal(game.state.turn, "computer");
 });
 
+test("le joueur ne peut pas laisser passer son tour s'il a un coup", async () => {
+    const engine = fakeEngine({
+        legalMoves: async () => [
+            { notation: "8/5", halfMoves: [{ from: 8, to: 5 }], position: "P" },
+        ],
+    });
+    const game = Game.start(engine, {
+        dice: fixedDice([3, 1]),
+        setup: { position: "X", firstTurn: "player" },
+    });
+    await game.roll();
+    assert.equal(await game.cannotMove(), false);
+    await assert.rejects(game.skipTurn(), /coup possible/);
+    assert.equal(game.state.phase, "moving");
+});
+
 test("l'ordinateur double si le moteur le recommande ; le joueur prend", async () => {
     const engine = fakeEngine({
         cubeDecision: async () => ({ available: true, double: true, take: true }),
@@ -171,6 +289,7 @@ test("annuler repart du parent ; l'action suivante ouvre une branche", async ()
     const game = Game.start(fakeEngine(), { dice: fixedDice([3, 1, 6, 5, 4, 2]) });
     await game.playHalfMove({ from: 8, to: 5 });
     await game.playHalfMove({ from: 6, to: 5 });
+    await game.confirmMove();
     const played = game.events.at(-1);
     assert.equal(played?.type, "MovePlayed");
 
@@ -179,6 +298,7 @@ test("annuler repart du parent ; l'action suivante ouvre une branche", async ()
     assert.equal(game.state.turn, "player");
     await game.playHalfMove({ from: 8, to: 5 });
     await game.playHalfMove({ from: 6, to: 5 });
+    await game.confirmMove();
 
     // Deux coups accrochés au même jet : l'ancien reste dans le journal.
     const moves = game.journal.events.filter((e) => e.type === "MovePlayed");
@@ -223,6 +343,7 @@ test("une partie se reprend depuis son journal ; un journal d'une autre version
     const game = Game.start(fakeEngine(), { dice: fixedDice([3, 1]) });
     await game.playHalfMove({ from: 8, to: 5 });
     await game.playHalfMove({ from: 6, to: 5 });
+    await game.confirmMove();
     const saved = JSON.parse(JSON.stringify(game.journal));
 
     const resumed = Game.resume(fakeEngine(), saved);

app/tests/move-steps.test.ts

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

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

@@ -7,10 +7,16 @@
 
 import assert from "node:assert/strict";
 import { Before, BeforeAll, Given, setDefaultTimeout, Then, When } from "@cucumber/cucumber";
-import type { Engine, Move } from "../../src/domain/game/engine.js";
+import type { BoardSide, Engine, Move } from "../../src/domain/game/engine.js";
 import type { GameEvent } from "../../src/domain/game/events.js";
-import { Game, STANDARD_PLY } from "../../src/domain/game/game.js";
-import { type PositionId, parseHalfMoves, START_POSITION } from "../../src/domain/game/position.js";
+import { Game, type MoveSteps, STANDARD_PLY } from "../../src/domain/game/game.js";
+import {
+    BAR,
+    OFF,
+    type PositionId,
+    parseHalfMoves,
+    START_POSITION,
+} from "../../src/domain/game/position.js";
 import { fixedDice } from "../../src/domain/game/roll.js";
 import type { GameState } from "../../src/domain/game/state.js";
 import { loadNodeEngine } from "../support/node-engine.js";
@@ -27,11 +33,32 @@ const COMPUTER_DOUBLES = "6O5uAAC4uzsAAA";
 // l'ordinateur n'en a sorti aucun.
 const PLAYER_ALMOST_DONE = "/38AAABQAAAAAA";
 
+// Le joueur, au trait : un pion sur la barre, quatorze sur sa case 6.
+// L'ordinateur tient ses six premières cases (vos cases 19 à 24), où votre
+// pion devrait rentrer.
+const PLAYER_SHUT_OUT = "t+0OAADg/wcAQA";
+
+// L'ordinateur, au trait : un pion sur sa case 13, quatorze sur sa case 1.
+// Vous : un blot sur votre case 15 (sa case 10), deux pions sur votre case
+// 13 (sa case 12), douze sur votre case 6. Avec 3-1, son seul coup permis
+// est 13/10* 10/9 : il frappe votre blot.
+const COMPUTER_MUST_HIT = "4P8BEwD/PwAEAA";
+
 let engine: Engine;
 let game: Game;
 let accepted: boolean;
 let positionBefore: PositionId;
 let computerTurn: { before: GameState; ms: number };
+let computerMove: MoveSteps;
+
+/** Le nombre de pions d'un camp à une case d'un demi-coup (barre, sortie ou
+ * 1 à 24, dans sa numérotation). */
+function checkersAt(side: BoardSide, point: number): number {
+    if (point === BAR) {
+        return side.bar;
+    }
+    return point === OFF ? side.off : (side.points[point - 1] ?? 0);
+}
 
 BeforeAll(async () => {
     engine = await loadNodeEngine();
@@ -53,6 +80,15 @@ async function play(text: string): Promise<boolean> {
     return true;
 }
 
+/** Joue les demi-coups puis valide le coup, complet. */
+async function playAndConfirm(text: string): Promise<boolean> {
+    if (!(await play(text))) {
+        return false;
+    }
+    await game.confirmMove();
+    return true;
+}
+
 function lastEvent(): GameEvent {
     const event = game.events.at(-1);
     assert.ok(event !== undefined, "aucun événement");
@@ -133,12 +169,62 @@ Then("la position n'a pas changé", () => {
     assert.equal(lastEvent().type, "DiceRolled");
 });
 
+// ------------------------------------------ Valider ou reprendre son coup
+
+Then("votre coup attend votre validation", async () => {
+    assert.equal(accepted, true);
+    assert.equal(game.moveComplete, true);
+    // Rien n'est encore dans le journal, et plus aucun pion ne bouge.
+    assert.equal(lastEvent().type, "DiceRolled");
+    assert.equal(game.state.turn, "player");
+    assert.deepEqual(await game.nextHalfMoves(), []);
+});
+
+Then("vos dés sont tous marqués comme joués", () => {
+    assert.ok(game.diceToPlay.length > 0);
+    assert.ok(game.diceToPlay.every((die) => die.used));
+});
+
+When("vous validez votre coup", async () => {
+    await game.confirmMove();
+});
+
+Then("seul votre {int} est marqué comme joué", (value: number) => {
+    const used = game.diceToPlay.filter((die) => die.used);
+    assert.deepEqual(
+        used.map((die) => die.value),
+        [value],
+    );
+});
+
+Then("chacun de vos pions jouables n'a plus qu'une case d'arrivée", async () => {
+    const halfMoves = await game.nextHalfMoves();
+    assert.ok(halfMoves.length > 0);
+    const starts = halfMoves.map((h) => h.from);
+    assert.equal(new Set(starts).size, starts.length);
+});
+
+When("vous annulez le dernier demi-coup", () => {
+    game.undoLastHalfMove();
+});
+
+Then("il ne reste de joué que {word}", (text: string) => {
+    assert.deepEqual(game.pendingHalfMoves, parseHalfMoves(text));
+    assert.equal(game.moveComplete, false);
+    assert.equal(lastEvent().type, "DiceRolled");
+});
+
+Then("aucun de vos dés n'est marqué comme joué", () => {
+    assert.ok(game.diceToPlay.length > 0);
+    assert.ok(game.diceToPlay.every((die) => !die.used));
+});
+
 // ------------------------------------------------------- L'ordinateur joue
 
 Given("c'est au tour de l'ordinateur", async () => {
     // Vous commencez avec 3-1, puis l'ordinateur tirera 6-4.
     game = Game.start(engine, { dice: fixedDice([3, 1, 6, 4]) });
-    assert.equal(await play("8/5 6/5"), true);
+    assert.equal(await playAndConfirm("8/5 6/5"), true);
     assert.equal(game.state.turn, "computer");
 });
 
@@ -171,8 +257,141 @@ Then(
     },
 );
 
+// ------------------------------------------------- Aucun coup possible
+
+Given("votre pion sur la barre ne peut pas rentrer", () => {
+    // Les six cases où il pourrait rentrer sont tenues par l'ordinateur.
+    game = Game.start(engine, {
+        setup: { position: PLAYER_SHUT_OUT, firstTurn: "player" },
+        dice: fixedDice([6, 5]),
+    });
+});
+
+When("vous lancez les dés", async () => {
+    await game.roll();
+});
+
+Then("aucun coup n'est possible avec votre jet", async () => {
+    assert.deepEqual(game.state.roll, [6, 5]);
+    assert.equal(await game.cannotMove(), true);
+    assert.deepEqual(await game.nextHalfMoves(), []);
+});
+
+Then("c'est toujours à vous", () => {
+    assert.equal(game.state.turn, "player");
+    assert.equal(game.state.phase, "moving");
+    assert.equal(lastEvent().type, "DiceRolled");
+});
+
+When("vous continuez", async () => {
+    await game.skipTurn();
+    const event = lastEvent();
+    assert.ok(event.type === "MovePlayed" && event.side === "player");
+    assert.deepEqual(event.halfMoves, []);
+});
+
+// ---------------------------------------------- Voir le coup de l'ordinateur
+
+Given("un de vos pions est seul à portée de l'ordinateur", () => {
+    // L'ordinateur tirera 3-1. Le videau est chez vous : il ne peut pas
+    // doubler, il joue.
+    game = Game.start(engine, {
+        setup: {
+            position: COMPUTER_MUST_HIT,
+            firstTurn: "computer",
+            cube: { value: 2, owner: "player" },
+        },
+        dice: fixedDice([3, 1]),
+    });
+});
+
+When("l'ordinateur a joué", async () => {
+    await game.playComputerTurn();
+    const played = lastEvent();
+    assert.ok(played.type === "MovePlayed" && played.side === "computer");
+    const steps = await game.lastMoveSteps();
+    assert.ok(steps !== null);
+    computerMove = steps;
+});
+
+Then("son coup vous est montré case par case", async () => {
+    const { side, halfMoves, boards } = computerMove;
+    assert.equal(side, "computer");
+    assert.ok(halfMoves.length > 0);
+    assert.equal(boards.length, halfMoves.length + 1);
+    // Chaque plateau ne diffère du précédent que d'un pion de l'ordinateur,
+    // parti de la case de départ du demi-coup pour sa case d'arrivée.
+    for (const [i, h] of halfMoves.entries()) {
+        const before = boards[i]?.computer;
+        const after = boards[i + 1]?.computer;
+        assert.ok(before !== undefined && after !== undefined);
+        assert.equal(checkersAt(after, h.from), checkersAt(before, h.from) - 1);
+        assert.equal(checkersAt(after, h.to), checkersAt(before, h.to) + 1);
+    }
+    // Le dernier est le plateau de la partie.
+    assert.deepEqual(boards.at(-1), await game.displayedBoard());
+});
+
+Then("votre pion frappé part sur la barre", () => {
+    const { boards, hits } = computerMove;
+    const hit = hits.indexOf(true);
+    assert.ok(hit >= 0, "aucun pion frappé");
+    assert.equal(boards[hit]?.player.bar, 0);
+    assert.equal(boards[hit + 1]?.player.bar, 1);
+});
+
+Then("vous pouvez revoir son coup", async () => {
+    assert.deepEqual(await game.lastMoveSteps(), computerMove);
+});
+
 // ------------------------------------------------------------------ Videau
 
+// La confirmation elle-même est une question de l'interface (une fenêtre
+// « Doubler à 2 ? ») : ces étapes vérifient que rien n'est proposé tant que
+// vous n'avez pas confirmé, et ce qui suit votre confirmation.
+
+Given("vous pouvez doubler", async () => {
+    game = Game.start(engine, { setup: { position: START_POSITION, firstTurn: "player" } });
+    assert.equal(game.state.phase, "rolling");
+});
+
+When("vous demandez à doubler", async () => {
+    assert.equal(await game.canDouble(), true);
+});
+
+When("vous changez d'avis", () => {
+    // Vous refermez la question : la partie n'est pas touchée.
+});
+
+Then("rien n'est proposé à l'ordinateur", () => {
+    assert.ok(!game.events.some((e) => e.type === "CubeOffered"));
+    assert.equal(game.state.phase, "rolling");
+    assert.equal(game.state.turn, "player");
+    assert.deepEqual(game.state.cube, { value: 1, owner: null });
+});
+
+When("vous confirmez", async () => {
+    await game.double();
+});
+
+Then("l'ordinateur prend ou passe, comme le recommande le moteur", async () => {
+    const decision = await engine.cubeDecision(
+        START_POSITION,
+        { value: 1, owner: "centered" },
+        STANDARD_PLY,
+    );
+    const offered = game.events.findIndex((e) => e.type === "CubeOffered");
+    const answer = game.events[offered + 1];
+    assert.ok(offered >= 0 && answer !== undefined);
+    if (decision.take) {
+        assert.equal(answer.type, "CubeTaken");
+        assert.deepEqual(game.state.cube, { value: 2, owner: "computer" });
+    } else {
+        assert.equal(answer.type, "CubeDropped");
+        assert.deepEqual(game.state.result, { winner: "player", kind: "single", points: 1 });
+    }
+});
+
 Given("l'ordinateur vous propose de doubler", async () => {
     game = Game.start(engine, { setup: { position: COMPUTER_DOUBLES, firstTurn: "computer" } });
     await game.playComputerTurn();
@@ -232,7 +451,7 @@ Given("un joueur a sorti tous ses pions", async () => {
         dice: fixedDice([6, 5]),
     });
     await game.roll();
-    assert.equal(await play("6/off 5/off"), true);
+    assert.equal(await playAndConfirm("6/off 5/off"), true);
 });
 
 Then("le résultat indique le gagnant et les points gagnés", () => {

app/tests/ui.test.ts

@@ -10,9 +10,17 @@ 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 { START_POSITION } from "../src/domain/game/position.js";
+import { parseHalfMoves, START_POSITION } from "../src/domain/game/position.js";
 import { createGameStore } from "../src/storage/game-store.js";
-import { boardModel, moveTargets, placeOf, pointSlot } from "../src/ui/board-model.js";
+import {
+    boardModel,
+    moveTargets,
+    moveTrace,
+    onlyHalfMove,
+    placeOf,
+    pointColor,
+    pointSlot,
+} from "../src/ui/board-model.js";
 import { parseFeature, parseGlossaryEntry, parseGlossaryIndex } from "../src/ui/help-text.js";
 import { TEXTS } from "../src/ui/texts.js";
 
@@ -47,6 +55,18 @@ test("cases, barre et sortie de chaque camp", () => {
     assert.equal(placeOf("computer", 0), "off-computer");
 });
 
+test("couleur des flèches : impaires en point-a, paires en point-b, quelle que soit la colonne", () => {
+    for (const number of [1, 13, 23]) {
+        assert.equal(pointColor(number), "point-a", `flèche ${number}`);
+    }
+    for (const number of [2, 12, 24]) {
+        assert.equal(pointColor(number), "point-b", `flèche ${number}`);
+    }
+    // 12 et 13 partagent la colonne 0, mais pas la couleur.
+    assert.equal(pointSlot(12).column, pointSlot(13).column);
+    assert.notEqual(pointColor(12), pointColor(13));
+});
+
 test("disposition : 1 à 12 en bas de droite à gauche, 13 à 24 en haut de gauche à droite", () => {
     assert.deepEqual(pointSlot(1), { top: false, column: 11 });
     assert.deepEqual(pointSlot(7), { top: false, column: 5 });
@@ -65,6 +85,60 @@ test("les demi-coups possibles donnent les pions jouables et leurs cases d'arriv
     assert.deepEqual([...targets.keys()], ["p8", "bar-player", "p3"]);
     assert.deepEqual([...(targets.get("p8")?.keys() ?? [])], ["p5", "p7"]);
     assert.deepEqual(targets.get("p3")?.get("off-player"), { from: 3, to: 0 });
+    // Un seul toucher suffit pour un pion à destination unique.
+    assert.deepEqual(onlyHalfMove(targets, "p3"), { from: 3, to: 0 });
+    assert.deepEqual(onlyHalfMove(targets, "bar-player"), { from: 25, to: 22 });
+    assert.equal(onlyHalfMove(targets, "p8"), null);
+    assert.equal(onlyHalfMove(targets, "p13"), null);
+});
+
+test("traces d'un coup simple : une flèche par demi-coup, départs et arrivées", () => {
+    // L'ordinateur joue 13/9 13/7 dans sa numérotation : ses cases 13, 9 et
+    // 7 sont les cases 12, 16 et 18 du joueur.
+    const trace = moveTrace("computer", parseHalfMoves("13/9 13/7"), [false, false]);
+    assert.deepEqual(trace.arrows, [
+        { from: "p12", to: "p16" },
+        { from: "p12", to: "p18" },
+    ]);
+    assert.deepEqual([...trace.left], [["p12", 2]]);
+    assert.deepEqual(
+        [...trace.landed],
+        [
+            ["p16", 1],
+            ["p18", 1],
+        ],
+    );
+    assert.equal(trace.hits, 0);
+});
+
+test("traces : un pion qui fait étape ne laisse ni fantôme ni cercle à l'étape", () => {
+    const trace = moveTrace("computer", parseHalfMoves("24/18 18/14"), [false, true]);
+    assert.equal(trace.arrows.length, 2);
+    assert.deepEqual([...trace.left], [["p1", 1]]);
+    assert.deepEqual([...trace.landed], [["p11", 1]]);
+    assert.equal(trace.hits, 1);
+});
+
+test("traces : rentrée depuis la barre avec un pion frappé, sortie de pions", () => {
+    const entering = moveTrace("computer", parseHalfMoves("bar/22 6/4"), [true, false]);
+    assert.deepEqual(entering.arrows[0], { from: "bar-computer", to: "p3" });
+    assert.deepEqual(
+        [...entering.left],
+        [
+            ["bar-computer", 1],
+            ["p19", 1],
+        ],
+    );
+    assert.equal(entering.hits, 1);
+    const bearingOff = moveTrace("computer", parseHalfMoves("6/off 5/off"), [false, false]);
+    assert.deepEqual([...bearingOff.landed], [["off-computer", 2]]);
+    assert.deepEqual(
+        [...bearingOff.left],
+        [
+            ["p19", 1],
+            ["p20", 1],
+        ],
+    );
 });
 
 test("l'aide lit le scénario tel qu'il est écrit dans docs/scenarios/", () => {

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

@@ -52,3 +52,9 @@ construire ou tester ; rien n'est embarqué dans l'application.
 Validés par Pierre avec l'ADR 0009, dans Docker, jamais embarqués :
 TypeScript (`tsc`, Apache-2.0), Biome (MIT ou Apache-2.0),
 `@cucumber/cucumber` (MIT), `dependency-cruiser` (MIT).
+
+### 2026-11-03 — Playwright pour les tests dans le navigateur
+
+Validé par Pierre : Playwright 1.48.2 (Apache-2.0), image
+`mcr.microsoft.com/playwright:v1.48.2-noble`, utilisé seulement par
+`make test-browser` (Chromium et Firefox sans écran). Rien n'est embarqué.

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

@@ -68,3 +68,24 @@ vérification des dépendances.
   standard ») est tenu même au niveau fort (2 plis) : c'est le niveau standard
   de l'ordinateur à l'étape 0d.
 - Firefox sur le téléphone reste à vérifier, sans bloquer.
+
+## Amendements
+
+### 2026-11-03 — Pages de test du moteur retirées du site
+
+Décidé par Pierre après son premier test sur le téléphone : « supprimer la
+partie test du moteur totalement ».
+
+- Les pages de test et de mesure de l'étape 0b (`web/moteur/` : `index.html`,
+  `bench.html` et leurs scripts) sont supprimées. Le site publié n'a plus rien
+  sous `/moteur/`, ni dans le cache du service worker ; `make deploy`
+  n'annonce plus que l'application, et l'aide ne renvoie plus vers le test du
+  moteur.
+- Les mesures du Fairphone 4 ci-dessus, faites avec `bench.html`, restent la
+  référence. Pour les refaire, la mesure se lance sous Node sur le PC
+  (`make bench`) : son code partagé est déplacé de `web/moteur/benchmark.mjs`
+  vers `engine-wasm/benchmark.mjs`. Une mesure sur le téléphone demanderait de
+  remettre une page de mesure, à décider le moment venu.
+- Le moteur reste vérifié par la suite de contrat sur WebAssembly
+  (`make test`) et, dans l'application, par la partie jouée dans un navigateur
+  (`make test-browser`).

docs/adr/0012-mode-immersif.md

@@ -53,3 +53,47 @@ des pions dans les deux cas.
   testée (`make test-browser`).
 - Le plein écran masque la barre d'état du téléphone, ce qui libère encore un
   peu de place.
+
+## Amendements
+
+### 2026-11-03 — Vue paysage dès la rotation, plateau = écran
+
+Décidé par Pierre après son premier essai sur le téléphone, où la vue paysage
+à deux colonnes (plateau limité à 70 % de la largeur, texte à droite) lui a
+paru « vraiment pas optimale ».
+
+- Dès que le téléphone est en paysage, même sans plein écran, l'app applique
+  la mise en page « plateau = écran » sur la hauteur réelle (`100dvh`, barre
+  d'adresse comprise). La mise en page à deux colonnes disparaît.
+- Dans cette vue, les contrôles sont dans le plateau : comptes de points sur la
+  barre, videau au milieu de la barre, dés et consigne dans la bande centrale,
+  pictogrammes (menu, annuler, plein écran) dans la colonne des sorties
+  (maquette « Immersif : plein écran, contrôles dans le plateau » du canevas
+  ci-dessus). La géométrie du plateau suit les proportions de l'écran ; les
+  numéros des flèches font au moins 12 px.
+- Le bouton « Plein écran » garde son rôle : plein écran, verrouillage en
+  paysage, repli par rotation CSS.
+
+La bascule automatique écartée plus haut était celle qui forçait
+l'orientation ; ici, seule la mise en page suit l'orientation choisie par le
+joueur.
+
+### 2026-11-03 — Placement des contrôles en paysage, après la revue UX
+
+La revue UX de l'étape 0e.2 a montré deux conflits dans le placement décrit
+par l'amendement précédent : la moitié basse de la colonne des sorties est une
+cible de jeu (toucher fait sortir un pion), et les pions frappés s'empilent
+depuis le milieu de la barre. Arbitrage de la session design, sur délégation
+de Pierre :
+
+- une colonne de commandes à gauche, dans le cadre : menu en haut, videau au
+  milieu (il monte ou descend selon son propriétaire), « Annuler le
+  demi-coup » en bas, remplacé par « Revoir » quand le coup de l'ordinateur
+  est montré ; « Quitter le plein écran » passe dans le menu ;
+- la colonne des sorties reste réservée aux pions sortis ;
+- les comptes de points sont des pastilles aux deux bouts de la barre, aux
+  couleurs du camp, en 13 px.
+
+Maquettes : rangée « Révision UX (étape 0e) : paysage » du canevas
+(variantes thème sombre, barre d'adresse visible et fin de partie). Règles de
+comportement : `docs/identite/charte/interaction.md`.

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

@@ -0,0 +1,49 @@
+# 0013. Une position du plateau dans l'adresse de la page
+
+- **Statut** : accepté
+- **Date** : 2026-11-03
+- **Décideurs** : Pierre (besoin), Claude Code (format)
+
+## Contexte
+
+Pierre a demandé, au premier test sur le téléphone (2026-11-03), qu'avec la
+seule adresse on arrive à une position du plateau : chaque position devient un
+lien direct, à partager, à mettre dans une leçon ou dans un prompt pour une IA.
+GNU Backgammon décrit déjà toute position par deux identifiants publics et
+documentés : le Position ID (14 caractères, les pions) et le Match ID
+(12 caractères : videau, score, longueur du match, joueur au trait, dés). Le
+moteur sait les lire et les écrire (`engine.h`).
+
+## Décision
+
+- L'adresse porte la position dans le fragment (après `#`) :
+  `https://ustagammon.sans.pub/#position=<Position ID>&match=<Match ID>`,
+  chaque identifiant encodé avec `encodeURIComponent` (le base64 de gnubg
+  contient `+` et `/`). `match` est facultatif : sans lui, partie libre, videau
+  au centre, joueur du bas au trait, sans dés.
+- Ouvrir un tel lien affiche la position, non jouable, avec deux actions :
+  « Jouer à partir d'ici » (nouvelle partie contre l'ordinateur depuis cette
+  position, sans toucher à la partie en cours) et « Retour à ma partie ».
+- Toute position affichée (partie, coup de l'ordinateur, analyse, leçon) peut
+  être copiée en lien (« Copier le lien de la position »).
+- Un identifiant illisible pour le moteur donne un message clair et le retour
+  à la partie, jamais une page cassée.
+
+## Alternatives écartées
+
+- **Paramètres de requête (`?position=`)** : ils changent l'adresse demandée
+  au serveur et au service worker ; hors ligne, la page en cache ne
+  correspondrait plus. Le fragment ne quitte jamais le navigateur.
+- **XGID (format d'eXtreme Gammon)** : répandu, mais un seul identifiant de
+  plus à décoder ; gnubg l'importe, son import pourra s'ajouter plus tard
+  (outil « import d'un identifiant GNU ou XGID » du cadrage).
+- **Format maison plus lisible** : il faudrait le décoder sans le moteur, donc
+  réimplémenter une règle de représentation (ADR 0007).
+
+## Conséquences
+
+- Le fragment est lu au chargement et à chaque changement (`hashchange`) ; le
+  domaine reçoit une position et un Match ID, le moteur les valide.
+- Les liens restent valables tant que GNU Backgammon garde ces formats, stables
+  depuis des années.
+- Les liens contiennent la position, rien d'autre : pas de donnée personnelle.

docs/adr/README.md

@@ -19,3 +19,4 @@ l'ancien passe au statut « remplacé par NNNN ». Voir l'ADR 0001.
 | [0010](0010-identite-visuelle.md) | Identité visuelle : symbole, logotype, palette | accepté |
 | [0011](0011-lecons-conseil-et-bilan.md) | Leçons numérotées, conseil du maître après le coup, bilan de fin de partie | accepté |
 | [0012](0012-mode-immersif.md) | Mode immersif : le plateau en paysage, sur demande | accepté |
+| [0013](0013-position-dans-l-adresse.md) | Une position du plateau dans l'adresse de la page | accepté |

docs/deploiement.md

@@ -2,8 +2,8 @@
 
 Ustagammon est un site statique (PWA, ADR 0009) : des fichiers HTML,
 JavaScript, le moteur en WebAssembly et ses données. L'application est à la
-racine ; les pages de test du moteur de l'étape 0b restent publiées sous
-`/moteur/` (test du moteur) et `/moteur/bench.html` (mesure). Il est publié sur
+racine ; les pages de test du moteur de l'étape 0b ont été retirées (ADR
+0009, amendement du 2026-11-03). Il est publié sur
 CapRover, machine `sans-pub` (https://captain.cloud.sans.pub), app
 `ustagammon`, sur https://ustagammon.sans.pub.
 
@@ -112,8 +112,7 @@ ssh sans.pub 'sudo docker service ps srv-captain--ustagammon --format "{{.Image}
 ```
 
 Puis ouvrir le site sur le téléphone : le plateau s'affiche et une consigne
-remplace « Chargement du moteur… ». La page de test du moteur
-(https://ustagammon.sans.pub/moteur/) doit afficher « Moteur prêt ».
+remplace « Chargement du moteur… ».
 
 ## Retour arrière
 

docs/etape-0.md

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

docs/etape-1.md

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

docs/feuille-de-route.md

@@ -3,34 +3,35 @@
 Le travail restant, dans l'ordre. Une ligne réalisée est retirée : ce qui a été
 fait se lit dans les merge requests et le journal, ce qui a été décidé dans les
 ADR (`docs/adr/`). Les versions et leur contenu sont définis dans
-`docs/cadrage.md` ; le détail de l'étape en cours est dans `docs/etape-0.md`.
+`docs/cadrage.md`.
 
 Légende : 🔄 en cours · ⏳ à venir · ⏸ conditionnel
 
-## Étape 0 — Prototype technique
+## Étape 0 — Prototype technique : terminée
 
-Acquis : socle du dépôt, organisation (ADR 0001, 0003, 0006), source du moteur
-(ADR 0005 : gnubg officiel, commit 14b6798), gnubg de référence et 32 positions
-de référence (0a.2), moteur embarqué et `engine-cli` (0a.3), comparaison
-automatique aux références, tolérance 0,002 (0a.4), moteur en WebAssembly avec
-page de test, page de mesure et guide de test (0b), mesures sur le Fairphone 4 et
-socle PWA en TypeScript (ADR 0009 ; 0c Android natif abandonnée), domaine
-« partie » en journal d'événements avec scénario exécuté sur le vrai moteur et
-garde-fous d'architecture (0d.1), déploiement sur https://ustagammon.sans.pub.
+Close le 2026-11-03 : partie complète jouée par Pierre sur le Fairphone 4, coups
+de l'ordinateur rapides, tous les tests au vert. Acquis : moteur gnubg officiel
+(ADR 0005) comparé à 32 positions de référence, moteur en WebAssembly, socle
+PWA en TypeScript (ADR 0009 ; Android natif abandonné), domaine « partie » en
+journal d'événements, plateau jouable hors ligne avec la charte graphique,
+publié sur https://ustagammon.sans.pub. Le détail est dans le journal et les
+merge requests.
+
+## Retours du premier test sur téléphone (avant l'étape 1)
+
+Demandes de Pierre du 2026-11-03, traitées avant d'ouvrir l'étape 1.
 
 | Sous-étape | Contenu | État | Plan |
 | --- | --- | --- | --- |
-| 0d.2 | Plateau minimal jouable (PWA hors ligne), publié ; reste la vérification avec Pierre sur le Fairphone 4 (`docs/guide-test-etape-0.md`, section « Étape 0d ») | 🔄 | |
-| 0d.2+ | Fluidité de la partie : supprimer ce qui interrompt le jeu sans nécessité (bouton « Nouvelle partie » toujours visible, confirmations, étapes inutiles) : demande de Pierre | ⏳ | |
-
-**Critère de fin** : une partie complète jouée sur le Fairphone 4, moins de 2 s
-par coup de l'IA en niveau standard, tous les tests au vert.
+| 0e.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.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
 
 | Étape | Contenu | État |
 | --- | --- | --- |
-| 1. V1 Jouer et comprendre | Charte graphique appliquée à la PWA (ADR 0010, `docs/identite/charte/`), plateau soigné, niveaux, conseil du maître après le coup, bilan de fin de partie, premières leçons numérotées (ADR 0011), mode immersif en paysage (ADR 0012), analyse, branches, tutoriel, prompts, sauvegarde | ⏳ |
+| 1. V1 Jouer et comprendre | Détail et ordre dans `docs/etape-1.md` : moteur pour l'analyse, parties enregistrées et branches, match et réglages, conseil du maître, fin de partie et analyse, prompts, accueil, tutoriel et leçons, progression, plateau soigné, plan de test | 🔄 |
 | 2. V1.5 Apprendre | Parcours 2, exercices, progression | ⏳ |
 | 3. V2 Perfectionnement et IA | Parcours 3 et 4, rollouts, révision espacée | ⏳ |
 

docs/guide-test-etape-0.md

@@ -1,171 +0,0 @@
-# Guide de test : Ustagammon sur le Fairphone 4 (étape 0)
-
-Document temporaire de l'étape 0 : il sera supprimé avec `docs/etape-0.md`.
-
-Deux tests sur le téléphone :
-
-- **Étape 0d : jouer une partie** (section suivante), sur le site publié ;
-- **Étape 0b : mesurer le moteur** (fait le 2026-11-02), sur une page
-  servie par le PC.
-
-## Étape 0d : jouer une partie sur le téléphone
-
-Le but : installer l'application sur le Fairphone 4, jouer une partie
-complète contre l'ordinateur, vérifier qu'elle marche sans réseau, et
-rapporter ce que vous avez constaté. Comptez une demi-heure.
-
-### Ouvrir et installer l'application
-
-1. Sur le Fairphone, ouvrez Chrome et allez sur https://ustagammon.sans.pub.
-2. Attendez que le plateau s'affiche et que le message « Chargement du
-   moteur… » laisse place à une consigne (par exemple « À vous : lancez les
-   dés. » ou « L'ordinateur réfléchit… »). La première fois, le moteur se
-   télécharge (environ 7 Mo) : quelques secondes en Wi-Fi.
-3. Installez l'application : menu de Chrome (les trois points), puis
-   « Installer l'application » ou « Ajouter à l'écran d'accueil ». Une icône
-   (deux pions sur du bois) apparaît sur l'écran d'accueil.
-4. Fermez Chrome et ouvrez Ustagammon depuis cette icône : l'application
-   s'ouvre en plein écran, sans barre d'adresse.
-
-### Jouer une partie complète
-
-Suivez le scénario « Jouer une partie contre l'ordinateur »
-(`docs/scenarios/jouer-une-partie.feature`), qui est aussi l'aide de
-l'application : bouton « Aide », en haut.
-
-1. Une partie commence d'elle-même au premier lancement, par le jet
-   d'ouverture (un dé chacun) : le message dit qui commence. « Nouvelle
-   partie », en haut, en recommence une.
-2. Quand c'est à vous : touchez « Lancer les dés » (ou « Doubler », pour
-   proposer de doubler avant de lancer).
-3. Pour jouer : touchez un pion entouré de vert, puis l'une des cases
-   d'arrivée en surbrillance ; recommencez pour chaque dé. Pour sortir un
-   pion, touchez le bac à droite, en bas. « Annuler » remet les pions du coup
-   en cours à leur place.
-4. Le coup est envoyé dès qu'il est complet ; l'ordinateur joue ensuite, et
-   le message dit son coup et son temps de calcul, par exemple
-   « L'ordinateur a joué 6-4 : 24/18 13/9 (0,3 s) ». Les petits points
-   orange marquent ses cases de départ et d'arrivée (dans sa numérotation :
-   sa case 24 est votre case 1).
-5. Si l'ordinateur vous propose de doubler : « Prendre » ou « Passer ».
-   Essayez au moins une fois de doubler vous-même.
-6. En fin de partie, le message donne le gagnant, la sorte de victoire
-   (simple, gammon ou backgammon) et les points.
-
-En cours de partie, fermez l'application (balayez-la dans la liste des
-applications ouvertes), puis rouvrez-la : la partie doit reprendre là où vous
-en étiez.
-
-### Vérifier le hors ligne
-
-1. Après avoir ouvert l'application au moins une fois (attendez une
-   vingtaine de secondes après le premier chargement, le temps que tout soit
-   mis de côté), fermez-la.
-2. Passez le téléphone en mode avion.
-3. Rouvrez Ustagammon depuis son icône : le plateau, l'ordinateur et l'aide
-   doivent fonctionner comme avant.
-4. Repassez en mode normal.
-
-### Ce qu'il faut rapporter
-
-Dans la conversation avec Claude Code :
-
-- les **temps des coups de l'ordinateur** : ceux affichés dans les messages
-  (le plus long que vous avez vu), et votre ressenti (attente gênante ou
-  non) ;
-- si la partie est allée **jusqu'au bout**, et son résultat ;
-- si la **reprise** après fermeture et le **mode avion** ont marché ;
-- tout ce qui gêne : plateau trop petit, case difficile à toucher, texte
-  incompréhensible, bouton qui ne répond pas, couleurs peu lisibles (thème
-  clair ou sombre du téléphone) ;
-- une **capture d'écran** (bouton marche + volume bas) de tout problème.
-
-Si vous le pouvez, refaites l'essai dans Firefox sur le téléphone (sans
-l'installer) et dites si les temps de l'ordinateur sont nettement plus longs.
-
-## Étape 0b : mesurer le moteur
-
-Le but : ouvrir sur le téléphone une page web où le moteur de backgammon
-calcule, puis lancer une mesure et coller son rapport dans la conversation.
-Comptez un quart d'heure.
-
-### 1. Préparer le PC
-
-1. Ouvrez un terminal dans le dossier du projet (`~/Code/ustagammon`).
-2. Si ce n'est pas déjà fait, tapez `make setup` puis Entrée. Cela prépare les
-   outils. La première fois, c'est long ; ensuite, c'est immédiat.
-3. Le PC et le téléphone doivent être sur **le même Wi-Fi** (la même box).
-
-### 2. Lancer la page
-
-1. Tapez `make deploy` puis Entrée.
-2. La première fois, le moteur se compile : quelques minutes.
-3. Le terminal affiche deux adresses, par exemple :
-
-   ```
-   Application : http://192.168.1.21:8080/
-   Test du moteur : http://192.168.1.21:8080/moteur/
-   Page de mesure : http://192.168.1.21:8080/moteur/bench.html
-   ```
-
-   Vos chiffres peuvent être différents : notez ceux de votre écran.
-4. Laissez ce terminal ouvert pendant tout le test. Pour arrêter la page à la
-   fin : Ctrl+C dans le terminal.
-
-### 3. Essayer un meilleur coup
-
-1. Sur le Fairphone, ouvrez le navigateur (Chrome ou Firefox).
-2. Tapez l'adresse du **test du moteur** dans la barre d'adresse, exactement
-   comme affichée (avec `http://` et `:8080`). Les pages de test sont aussi
-   publiées : https://ustagammon.sans.pub/moteur/ et
-   https://ustagammon.sans.pub/moteur/bench.html.
-3. Attendez le message « Moteur prêt, chargé en … ms ».
-4. Dans « Exemple », choisissez une position, par exemple « middlegame-1 ».
-5. Dans « Niveau », choisissez « fort (2 plis) ».
-6. Touchez « Meilleur coup ».
-7. La page affiche le coup conseillé et le **temps de calcul**. Notez ce temps
-   si vous voulez, il sera aussi dans le rapport.
-
-### 4. Lancer la mesure
-
-1. En bas de la page, touchez « Page de mesure » (ou tapez l'adresse de la
-   page de mesure).
-2. Touchez « Lancer la mesure ».
-3. Attendez « Mesure terminée » : de une à quelques minutes. Pendant ce temps,
-   gardez l'écran allumé et la page ouverte, sans changer d'application.
-4. Un tableau résume les résultats : « OK » si le seuil est respecté,
-   « dépassé » sinon.
-
-### 5. Envoyer le rapport
-
-1. Touchez « Copier les résultats ».
-2. Si la page dit « Rapport copié », c'est bon.
-3. Sinon, le texte du rapport est sélectionné : faites un appui long dessus,
-   puis « Copier ».
-4. Collez le rapport dans la conversation avec Claude Code (sur le téléphone,
-   ou envoyez-le vous sur le PC).
-
-Si vous en avez le temps, refaites la mesure une deuxième fois (rechargez la
-page de mesure) et collez aussi ce second rapport : cela montre si les temps
-sont stables. Si les deux navigateurs sont installés, faites la mesure dans
-Chrome **et** dans Firefox : sur le PC, Firefox s'est montré nettement plus
-lent, et le rapport indique le navigateur utilisé.
-
-### Si la page ne s'ouvre pas
-
-- **Vérifiez l'adresse** : `http://` (et non `https://`), les chiffres exacts,
-  et `:8080` à la fin.
-- **Vérifiez le Wi-Fi** : le téléphone doit être sur le même réseau que le PC,
-  pas sur la 4G ni sur un Wi-Fi invité.
-- **Vérifiez que la page tourne** : sur le PC, ouvrez
-  `http://localhost:8080/` dans un navigateur. Si elle ne s'ouvre pas non
-  plus, relancez `make deploy` et lisez le message d'erreur.
-- **Le pare-feu du PC** peut bloquer le téléphone. S'il est actif
-  (`sudo ufw status` affiche « Status: active »), autorisez le port le temps
-  du test : `sudo ufw allow 8080/tcp`, puis à la fin `sudo ufw delete allow
-  8080/tcp`.
-- **« Le moteur n'a pas pu se charger »** : notez le message exact et
-  collez-le dans la conversation. Essayez aussi l'autre navigateur (Chrome ou
-  Firefox), à jour.
-- **Le port 8080 est déjà pris** : un autre programme l'utilise. Lancez
-  `make deploy WEB_PORT=8081` et utilisez `:8081` dans l'adresse.

docs/identite/charte/README.md

@@ -14,6 +14,9 @@ Décisions : ADR 0010. Fichiers du logo et des icônes : `../logo/`.
 | Fichier | Contenu |
 | --- | --- |
 | `guide-de-marque.md` | Règles d'usage : ton, couleurs, typographie, formes, mouvement, icônes, composants |
+| `accueil-tutoriel-aide.md` | Accueil, installation sans intrusion, tutoriel des règles (forme et première version du texte), aide en questions |
+| `recette-ux.md` | Critères de recette design de l'écran de jeu, à cocher sur les captures et sur le téléphone |
+| `interaction.md` | Comportement : réponse immédiate, annuler plutôt que confirmer, mouvement, vibrations, clavier, mises en page de l'écran de jeu (portrait, paysage, ordinateur), pictogrammes |
 | `tokens.json` | Toutes les valeurs, thèmes clair et sombre, avec une note d'usage par couleur |
 | `bundle.css` | Styles des composants ; mêmes noms de classes que `web/app.css` |
 | `board.js` | Dessin de référence du plateau (repère 640 × 520), pour comparaison |

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

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

docs/identite/charte/board.js

@@ -34,7 +34,7 @@ window.UstaBoard = (function () {
     o += '<rect class="board-tray" x="' + TRAY_X + '" y="' + TB + '" width="' + TRAY_W + '" height="' + (H / 2 - TB - 4) + '" rx="4"/>';
     o += '<rect class="board-tray" x="' + TRAY_X + '" y="' + (H / 2 + 4) + '" width="' + TRAY_W + '" height="' + (H / 2 - TB - 4) + '" rx="4"/>';
     for (var point = 1; point <= 24; point++) {
-      var pl = place(point), x = colX(pl.col), cls = (pl.col % 2 === 0) === pl.top ? "point-a" : "point-b";
+      var pl = place(point), x = colX(pl.col), cls = point % 2 === 1 ? "point-a" : "point-b"; // impairs en noyer, pairs en chêne
       var base = pl.top ? TB : H - TB, apex = pl.top ? TB + PH : H - TB - PH;
       o += '<polygon class="' + cls + '" points="' + x + ',' + base + ' ' + (x + PW) + ',' + base + ' ' + (x + PW / 2) + ',' + apex + '"/>';
       if ((state.targets || []).indexOf(point) >= 0)

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

@@ -22,7 +22,7 @@ La palette, c'est le bois, les pions et le café, avec **un seul accent : le rou
 - `accent-soft` : fond léger pour signaler « c'est à vous », avec du texte `text` dessus.
 - Les appréciations de coups ont leurs propres couleurs, distinctes de la brique : `verdict-good` (vert), `verdict-doubtful` (ocre), `verdict-bad` (lie-de-vin). **Toujours avec le mot et l'icône**, jamais la couleur seule.
 - `brand-laiton` (via `last-move`) marque le dernier coup joué, comme les charnières en laiton d'un plateau de tavla. Rien d'autre.
-- Le plateau : cadre `frame` en noyer, fond `bed`, flèches alternées `point-a` (noyer clair) et `point-b` (chêne), barre `bar`, sorties `tray`. Le joueur a les pions ivoire (`checker-player`, l'apprenti), l'ordinateur les pions noyer (`checker-computer`, le maître), comme dans le logo.
+- Le plateau : cadre `frame` en noyer, fond `bed`, flèches impaires en `point-a` (noyer clair) et paires en `point-b` (chêne), barre `bar`, sorties `tray`. Le joueur a les pions ivoire (`checker-player`, l'apprenti), l'ordinateur les pions noyer (`checker-computer`, le maître), comme dans le logo.
 - **À éviter** : le vert feutre de casino, le noir et or, les dégradés, les néons.
 
 Les deux thèmes, clair et sombre, sont complets. Tous les textes atteignent 4,5:1 sur leurs fonds dans les deux thèmes ; les contours et marques porteuses de sens, 3:1.
@@ -56,6 +56,10 @@ Sobre et utile : un pion glisse vers sa flèche (150 à 250 ms, sans rebond), le
 - Icônes d'interface : traits simples de 2px à bouts ronds, dessinés en SVG dans le code (pas de police d'icônes, pas d'émoji). Les seules icônes du système pour l'instant : les trois appréciations de coups (coche, point d'interrogation, croix) et la copie (deux feuillets).
 - Dés, pions et videau sont dessinés en SVG avec les couleurs du plateau, jamais en images.
 
+## Interaction
+
+Règles de comportement (réponse immédiate, annuler plutôt que confirmer, mouvement, vibrations, clavier, mises en page de l’écran de jeu) : section « Interaction ».
+
 ## Composants
 
-Plateau (`Board`) et ses pièces (`Checker`, `Die`, `DoublingCube`), boutons (`Button`), barre haute (`TopBar`), zone de consigne (`GamePrompt`), appréciation d'un coup (`MoveVerdict`), fiche de glossaire (`GlossaryCard`), carte de leçon (`LessonCard`) et « Demander à une IA » (`AskAI`). Chacun a sa fiche avec ses règles d'usage et un aperçu dans les deux thèmes.
+Plateau (`Board`) et ses pièces (`Checker`, `Die`, `DoublingCube`), boutons (`Button`), barre haute (`TopBar`), zone de consigne (`GamePrompt`), appréciation d’un coup (`MoveVerdict`), pictogrammes (`Icons`), fiche de glossaire (`GlossaryCard`), carte de leçon (`LessonCard`) et « Demander à une IA » (`AskAI`). Chacun a sa fiche avec ses règles d'usage et un aperçu dans les deux thèmes.

docs/identite/charte/interaction.md

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

docs/identite/charte/recette-ux.md

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

docs/identite/charte/tokens.json

@@ -195,7 +195,7 @@
      "light": "#6B4430",
      "dark": "#3A2519"
     },
-    "usage": "Flèches sombres (noyer clair), une sur deux."
+    "usage": "Flèches impaires (1, 3, 5…), noyer clair."
    },
    {
     "name": "point-b",
@@ -203,7 +203,7 @@
      "light": "#C9AE88",
      "dark": "#7E6142"
     },
-    "usage": "Flèches claires (chêne), une sur deux."
+    "usage": "Flèches paires (2, 4, 6…), chêne."
    },
    {
     "name": "point-number",
@@ -526,5 +526,38 @@
  },
  "meta": {
   "source": "Brief créatif + ADR 0010 + web/app.css (noms des variables du plateau)"
+ },
+ "duration": {
+  "tokens": [
+   {
+    "name": "duration-instant",
+    "value": "90ms",
+    "usage": "Retour d'appui d'un bouton, contour d'un pion jouable."
+   },
+   {
+    "name": "duration-fast",
+    "value": "160ms",
+    "usage": "Pion qui glisse, dés qui se posent, bandeaux."
+   },
+   {
+    "name": "duration-moderate",
+    "value": "240ms",
+    "usage": "Feuille du menu, panneau de fin de partie, bascule de mise en page. Jamais plus long."
+   }
+  ]
+ },
+ "easing": {
+  "tokens": [
+   {
+    "name": "easing-standard",
+    "value": "cubic-bezier(0.2, 0, 0, 1)",
+    "usage": "Tout ce qui se déplace : départ franc, arrivée douce."
+   },
+   {
+    "name": "easing-exit",
+    "value": "cubic-bezier(0.4, 0, 1, 1)",
+    "usage": "Ce qui disparaît."
+   }
+  ]
  }
 }

docs/journal.md

@@ -110,3 +110,56 @@ Une entrée datée par session : ce qui a été fait, décidé, et la suite.
 - Les maquettes proposent des éléments de produit qui ne sont pas encore
   décidés (leçons, « Conseil du maître », bilan de fin de partie) : à valider
   par Pierre avant toute mise en œuvre.
+
+## 2026-11-03 (matin) : fin de l'étape 0, retours du test sur téléphone
+
+**Fait**
+- Pierre a joué une partie complète sur le Fairphone 4 : « très rapide de la
+  part de l'ordinateur ». Avec les tests au vert, le critère de fin de l'étape 0
+  est atteint. Le guide de test et `docs/etape-0.md`, temporaires, sont
+  supprimés ; leurs décisions sont dans les ADR 0005 et 0009.
+- Playwright validé par Pierre (amendement de l'ADR 0004, MR !20).
+- Douze retours de Pierre après l'essai, plus l'installation en un toucher et
+  les retours haptiques, rangés en sous-étapes 0e dans la feuille de route
+  (MR !20). Lancés : la saisie du coup (0e.1) et une revue UX par un designer
+  UI (0e.2).
+- Coordination avec la session « identité » : elle propose et maquette le
+  design (mode immersif, compte de points, accueil, tutoriel), Pierre tranche,
+  la session technique implémente. Numéros des flèches à 12 px minimum.
+- Décision de Pierre : la vue paysage « plateau = écran » s'applique dès la
+  rotation du téléphone, sans plein écran (amendement de l'ADR 0012).
+- Mode avion vérifié par Pierre sur le téléphone : l'application fonctionne
+  hors ligne.
+- Étape 1 découpée dans `docs/etape-1.md` (sous-étapes 1a à 1j).
+- Nouvel objectif fixé par Pierre : traiter les retours 0e (les siens et ceux
+  du designer), puis réaliser l'étape 1, livrée avec un plan de test.
+
+**Reste à faire**
+- Firefox sur le téléphone reste à mesurer.
+
+## 2026-11-03 (jour) : coordination design et développement
+
+**Fait**
+- Leçons numérotées, conseil du maître après le coup et bilan de fin de partie
+  retenus par Pierre (ADR 0011) ; mode immersif en paysage (ADR 0012), puis
+  vue paysage dès la rotation, avec le plateau qui occupe tout l'écran.
+- Revue UX du designer de la session de développement (étape 0e.2), arbitrée
+  par la session design sur délégation de Pierre : portrait à zones fixes,
+  compte de points en bandeaux (pastilles en paysage), menu en feuille,
+  « annuler plutôt que confirmer », pas de passage automatique du tour,
+  vibrations, pictogrammes, clavier sur ordinateur. Règles dans
+  `docs/identite/charte/interaction.md` (MR !23), second amendement de
+  l'ADR 0012 (placement des contrôles en paysage).
+- Maquettes des variantes sur le canevas (paysage clair, sombre, avec barre
+  d'adresse, fin de partie ; portrait révisé, conseil, nouvelle partie
+  annulable ; menu ; ordinateur avec raccourcis).
+- Couleur des flèches corrigée dans la charte (impaires en noyer clair, paires
+  en chêne ; MR !25). La correction dans l'app est faite par la session de
+  développement, dans la MR de saisie du coup.
+
+**Reste à faire**
+- Implémentation par la session de développement (plan
+  `docs/plans/2026-11-03-revision-ux.md`), puis revue design sur ses captures
+  Playwright (412×915, 915×412, 844×320, clair et sombre) avant l'essai de
+  Pierre sur le téléphone.
+- Réglage en main des vibrations sur le Fairphone 4.

docs/plans/2026-11-03-accueil-tutoriel-aide.md

@@ -0,0 +1,59 @@
+# Accueil, installation, tutoriel des règles, aide (0e.5)
+
+- **Date** : 2026-11-03
+- **Étape** : 0e.5 (feuille de route), qui couvre aussi le tutoriel de 1g
+- **Statut** : prévu (après la fusion de 0e.4)
+- **Exécutant** : sous-agent general-purpose, dans un worktree
+
+## Objectif
+
+Traiter les points 2 et 3 du message de Pierre du 2026-11-03 et sa demande d'installation en un toucher :
+- une page d'accueil ;
+- l'installation proposée par l'app ;
+- un tutoriel des règles très didactique, illustré par le plateau ;
+- une aide plus humaine.
+
+## Références
+
+- Règles : `docs/identite/charte/accueil-tutoriel-aide.md`. Le texte du tutoriel y figure en première version, à faire valider par Pierre.
+- Maquettes : https://claude.ai/artifact/CQw6vbDpi6XQqVWQa4sANe, rangée « Étape 0e.5 » et artboard « Accueil ».
+- ADR 0008 (source unique), ADR 0013 (positions par identifiants gnubg).
+
+## Consignes
+
+1. **Accueil**, selon la charte :
+   - au premier lancement, et une seule fois, le choix entre « Je découvre » et « Je connais les règles » ;
+   - ensuite : la partie en cours, la carte d'installation, la prochaine leçon et la progression résumée. La leçon et la progression restent en attente tant que 1g et 1h n'existent pas : n'afficher que ce qui existe.
+2. **Installation** :
+   - sous Chrome, garder l'invite reçue avec `beforeinstallprompt` ;
+   - sous Firefox et sur iPhone, une feuille en 3 étapes ;
+   - la carte n'apparaît qu'à partir de la première partie terminée. « Plus tard » la masque, et elle ne revient qu'une fois, après 3 parties. Le menu garde une ligne tant que l'app n'est pas installée ;
+   - plus rien en `display-mode: standalone` ni après l'événement `appinstalled`.
+3. **Tutoriel**, en 8 étapes :
+   - le texte vit dans un fichier source unique sous `docs/` (par exemple `docs/tutoriel/`), copié dans le site par `make site` comme le glossaire, sous licence CC BY-SA 4.0 ;
+   - positions données par leurs identifiants gnubg ;
+   - sur les écrans « à vous », le moteur vérifie le coup joué en le comparant aux coups attendus de l'étape ;
+   - le coup illustré se joue seul après 1 s, avec « Revoir » ;
+   - un test vérifie que chaque position du tutoriel est valide pour le moteur et que chaque coup attendu est légal ;
+   - ajouter la fiche du glossaire « camp ».
+4. **Aide**, en trois onglets :
+   - « Jouer » : les scénarios deviennent des questions repliables. Le titre est la question et la description la réponse ; les étapes Gherkin sont cachées. Reformuler les titres des `.feature` sans casser les tests ;
+   - « Les mots du jeu » : les cartes du glossaire, avec une recherche ;
+   - « À propos » : licence, crédits, version ;
+   - le tutoriel est proposé en tête de l'aide.
+5. **Scénarios Gherkin** : premier lancement, installation, suivre le tutoriel.
+6. **`make test-browser`** :
+   - premier lancement, tutoriel complet avec ses écrans « à vous », aide ;
+   - `beforeinstallprompt` simulé dans Chromium ;
+   - captures dans `build/browser-shots/accueil-tutoriel/` pour la recette design.
+
+`make lint`, `make test` et `make test-browser` doivent passer. Aucune nouvelle dépendance.
+
+## Critères de réussite
+
+- Un débutant suit le tutoriel jusqu'au bout sur le téléphone, et chaque écran « à vous » accepte le bon coup et refuse les autres.
+- Les trois commandes passent, et les captures sont livrées pour la recette.
+
+## Résultat
+
+À remplir à la clôture.

docs/plans/2026-11-03-moteur-analyse.md

@@ -0,0 +1,60 @@
+# Moteur pour l'analyse et les niveaux (1a)
+
+- **Date** : 2026-11-03
+- **Étape** : 1a (`docs/etape-1.md`)
+- **Statut** : en cours
+- **Exécutant** : sous-agent general-purpose, dans un worktree
+
+## Objectif
+
+Donner au domaine tout ce dont l'étape 1 a besoin du moteur : niveaux de jeu de
+l'ordinateur, analyse d'un coup joué et d'une décision de videau, chance d'un
+jet. Tout vient de GNU Backgammon, comparé à gnubg de bureau.
+
+## Consignes
+
+ADR 0005, 0007 et la méthode de comparaison de `tests/reference/` (README).
+Ne pas modifier `engine/gnubg/` (copie fidèle). Pas de nouvelle dépendance.
+
+1. **Niveaux de jeu** : les niveaux de GNU Backgammon (débutant, amateur,
+   intermédiaire, avancé, expert, champion du monde…), avec leurs plis, filtres
+   et bruit, repris des réglages prédéfinis de gnubg (pas inventés). Le bruit
+   doit être déterministe (option « deterministic » de gnubg) pour que les
+   tests soient reproductibles. API C (`engine.h`), `engine-cli`, adaptateur
+   WebAssembly et interface `Engine` du domaine (ajout seulement : ne pas
+   toucher au reste de `app/src/domain/game/`, qu'un autre agent modifie).
+2. **Analyse d'un coup joué** : pour une position, un jet et un coup joué,
+   l'équité du coup joué, celle du meilleur coup, l'écart, et le rang du coup
+   joué, au niveau d'analyse demandé (comme l'analyse de partie de gnubg).
+3. **Analyse d'une décision de videau** : équités sans double, double/prend,
+   double/passe, et l'écart de la décision prise (double, pas de double,
+   prendre, passer), comme gnubg.
+4. **Chance d'un jet** : la chance (luck) d'un jet au sens de gnubg, et son
+   classement (très chanceux… très malchanceux) avec les seuils de gnubg.
+5. **Seuils d'appréciation** : exposer les seuils de gnubg (douteux, mauvais,
+   très mauvais) comme constantes documentées ; l'interface les traduira.
+6. **Références** : ajouter des positions de référence évaluées par gnubg de
+   bureau (Docker existant, `make reference`) pour l'analyse d'un coup, d'une
+   décision de videau et la chance, comparées par `make test` (natif et
+   WebAssembly) avec la tolérance existante. Les niveaux avec bruit : vérifier
+   au moins que le coup choisi est reproductible et identique à celui de gnubg
+   de bureau sur quelques positions.
+7. Glossaire : fiches pour les nouveaux termes (niveau, chance, appréciation,
+   équité si absente…), reliées au code.
+8. Mesurer sous Node (`make bench` ou équivalent) le temps d'une analyse de
+   coup au niveau prévu pour le conseil du maître (2 plis), pour vérifier
+   qu'elle tient en arrière-plan sur le téléphone (repère : ADR 0009).
+
+Machine ancienne : `-j2`, ne recompiler le moteur que si nécessaire.
+`make lint` et `make test` doivent passer. Commits fréquents ; `git add` avec
+chemins explicites ; ne pas pousser, pas de MR.
+
+## Critères de réussite
+
+- `engine-cli` répond aux nouvelles commandes en JSON.
+- Les nouvelles références concordent avec gnubg de bureau, natif et WebAssembly.
+- `make lint` et `make test` passent.
+
+## Résultat
+
+À remplir à la clôture.

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

@@ -0,0 +1,57 @@
+# 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

@@ -0,0 +1,39 @@
+# Position dans l'adresse (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)
+- **Exécutant** : sous-agent general-purpose, dans un worktree
+
+## Objectif
+
+Appliquer l'ADR 0013 : 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.
+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 ».
+3. Domaine : démarrer une partie depuis une position et un Match ID donnés
+   (événement GameStarted étendu de façon rétrocompatible, ou équivalent
+   justifié), sans règle réimplémentée.
+4. « Copier le lien de la position » depuis le menu de la partie et depuis la
+   vue du coup de l'ordinateur ; le lien copié rouvre exactement la même
+   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).
+
+## Critères de réussite
+
+Un lien copié depuis l'app, ouvert dans un nouvel onglet, montre la même
+position ; les trois commandes passent.
+
+## Résultat
+
+À remplir à la clôture.

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

@@ -0,0 +1,63 @@
+# 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/jouer-une-partie.feature

@@ -11,11 +11,40 @@ Fonctionnalité: Jouer une partie contre l'ordinateur
     Et le premier jet de dés désigne qui commence
 
   Scénario: Jouer un coup permis
+    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 ».
+
     Étant donné que c'est à vous de jouer avec le jet 3-1
     Quand vous jouez 8/5 6/5
+    Alors votre coup attend votre validation
+    Et vos dés sont tous marqués comme joués
+    Quand vous validez votre coup
     Alors votre coup est accepté
     Et c'est ensuite au tour de l'ordinateur
 
+  Scénario: Un pion qui n'a qu'une case d'arrivée
+    Après 8/5, il ne vous reste que le 1 : chaque pion jouable n'a plus
+    qu'une case d'arrivée, et il y va dès que vous le touchez.
+
+    Étant donné que c'est à vous de jouer avec le jet 3-1
+    Quand vous jouez 8/5
+    Alors seul votre 3 est marqué comme joué
+    Et chacun de vos pions jouables n'a plus qu'une case d'arrivée
+
+  Scénario: Reprendre un pion avant de valider
+    Tant que vous n'avez pas validé votre coup, « Annuler » reprend le
+    dernier pion déplacé ; touchez-le encore pour reprendre le précédent.
+
+    Étant donné que c'est à vous de jouer avec le jet 3-1
+    Quand vous jouez 8/5 6/5
+    Et que vous annulez le dernier demi-coup
+    Alors il ne reste de joué que 8/5
+    Quand vous annulez le dernier demi-coup
+    Alors la position n'a pas changé
+    Et aucun de vos dés n'est marqué comme joué
+
   Scénario: Un coup interdit est refusé
     La case 12 est tenue par l'ordinateur, qui y a cinq pions : vous ne
     pouvez pas vous y poser.
@@ -30,6 +59,43 @@ Fonctionnalité: Jouer une partie contre l'ordinateur
     Quand ses dés sont tirés
     Alors il joue le coup recommandé par le moteur en moins de 2 secondes
 
+  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 ».
+
+    É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
+    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.
+
+    Étant donné qu'un de vos pions est seul à portée de l'ordinateur
+    Quand l'ordinateur a joué
+    Alors son coup vous est montré case par case
+    Et votre pion frappé part sur la barre
+    Et vous pouvez revoir son coup
+
+  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é,
+    un double ne se reprend pas.
+
+    Étant donné que vous pouvez doubler
+    Quand vous demandez à doubler
+    Mais que vous changez d'avis
+    Alors rien n'est proposé à l'ordinateur
+    Quand vous demandez à doubler
+    Et que vous confirmez
+    Alors l'ordinateur prend ou passe, comme le recommande le moteur
+
   Scénario: Prendre le double de l'ordinateur
     Étant donné que l'ordinateur vous propose de doubler
     Quand vous prenez

engine-wasm/bench.mjs

@@ -1,4 +1,4 @@
-// bench.mjs -- la mesure de la page bench.html, sous Node, sur le PC
+// bench.mjs -- mesure du moteur WebAssembly sous Node, sur le PC
 // (`make bench`). Premier ordre de grandeur seulement : le chiffre qui compte
 // est celui du téléphone.
 //
@@ -10,7 +10,7 @@ import os from "node:os";
 import { fileURLToPath } from "node:url";
 import { gzipSync } from "node:zlib";
 import createEngineModule from "../build/wasm/engine.mjs";
-import { DOWNLOADED_FILES, formatReport, measureTimes } from "../web/moteur/benchmark.mjs";
+import { DOWNLOADED_FILES, formatReport, measureTimes } from "./benchmark.mjs";
 import { commands, loadEngine } from "../web/engine-wasm.mjs";
 
 const root = new URL("../", import.meta.url);

engine-wasm/benchmark.mjs

@@ -1,5 +1,7 @@
-// benchmark.mjs -- mesure du moteur WebAssembly, partagée par la page de
-// mesure (bench.html, dans le navigateur) et `make bench` (sous Node).
+// benchmark.mjs -- mesure du moteur WebAssembly sous Node, pour `make bench`
+// (engine-wasm/bench.mjs). Elle servait aussi à la page de mesure du site,
+// retirée avec les pages de test du moteur (ADR 0009, amendement du
+// 2026-11-03).
 //
 // Copyright (C) 2026 les auteurs d'Ustagammon.
 // Licence : GPLv3 ou ultérieure (voir LICENSE).
@@ -7,7 +9,7 @@
 // Sur les positions de référence (tests/reference/positions.json) : temps du
 // meilleur coup à 0 et 2 plis pour les positions avec dés, temps de la
 // décision de videau à 2 plis pour les autres. Le rapport compare aux seuils
-// de l'étape 0b (docs/etape-0.md).
+// de l'étape 0b (ADR 0009).
 
 // Seuils de l'étape 0b. Un temps respecte son seuil si son maximum, sur
 // toutes les positions, est en dessous (la médiane est donnée en plus).
@@ -20,13 +22,12 @@ export const TIME_THRESHOLDS = [
 // Taille totale à télécharger, compressée : moins de 40 Mo.
 export const DOWNLOAD_LIMIT_BYTES = 40e6;
 
-// Fichiers téléchargés pour faire tourner le moteur dans la page de test,
-// chemins relatifs à la racine du site (web/ ; wasm/ est build/wasm/).
+// Fichiers téléchargés pour faire tourner le moteur dans l'application
+// (hors code de l'application elle-même, quelques dizaines de Ko), chemins
+// relatifs à la racine du site (web/ ; wasm/ est build/wasm/).
 export const DOWNLOADED_FILES = [
-    "moteur/index.html",
-    "moteur/style.css",
-    "moteur/page.mjs",
-    "moteur/engine-client.mjs",
+    "index.html",
+    "app.css",
     "engine-worker.mjs",
     "engine-wasm.mjs",
     "wasm/engine.mjs",

tests/browser/play.mjs

@@ -1,6 +1,7 @@
 // play.mjs -- joue une partie complète par l'interface, dans un vrai
 // navigateur sans écran (Playwright), sur le site servi par l'image de
-// production : dés, coups au toucher, coups de l'ordinateur, videau, reprise
+// production : dés, coups au toucher (validés, annulés), coups de
+// l'ordinateur, videau (avec sa confirmation), reprise
 // après rechargement, aide, puis hors ligne (service worker).
 //
 // Copyright (C) 2026 les auteurs d'Ustagammon.
@@ -101,7 +102,7 @@ async function waitForPlayer() {
                 const b = document.getElementById(id);
                 return !b.hidden && !b.disabled;
             };
-            for (const id of ["again", "take", "roll"]) {
+            for (const id of ["again", "take", "skip", "confirm", "roll"]) {
                 if (usable(id)) {
                     return id;
                 }
@@ -130,6 +131,119 @@ async function waitForPlayer() {
     throw new Error(`rien à faire pour le joueur depuis 60 s : ${screen}`);
 }
 
+/** Le dernier coup de l'ordinateur, s'il est la dernière chose jouée (fin de
+ * partie mise à part) et qu'il a déplacé des pions ; sinon null. */
+function computerMoveToShow(journal) {
+    const last = journal.events.filter((e) => e.type !== "GameEnded").at(-1);
+    return last?.type === "MovePlayed" && last.side === "computer" && last.halfMoves.length > 0
+        ? last
+        : null;
+}
+
+/** Ce que montre le plateau du coup de l'ordinateur. */
+async function shownTraces() {
+    return page.evaluate(() => ({
+        arrows: document.querySelectorAll(".trace-arrow").length,
+        landed: document.querySelectorAll(".trace-landed").length,
+        ghosts: document.querySelectorAll(".trace-ghost").length,
+        hits: document.querySelectorAll(".trace-hit").length,
+        replay: !document.getElementById("replay").hidden,
+    }));
+}
+
+/** Après un tour de l'ordinateur : ses traces sont là si son coup est la
+ * dernière chose jouée, et rien sinon. */
+async function checkTraces() {
+    const journal = await savedJournal();
+    const move = computerMoveToShow(journal);
+    const traces = await shownTraces();
+    const last = journal.events.filter((e) => e.type !== "GameEnded").at(-1);
+    if (last?.type === "MovePlayed" && last.side === "computer" && last.halfMoves.length === 0) {
+        // L'ordinateur n'a pas pu jouer : son jet reste barré, avec un message.
+        const info = await page.textContent("#info");
+        const blocked = await page.locator(".die-blocked").count();
+        check(/^L'ordinateur ne peut pas jouer \d-\d\.$/.test(info ?? "") && blocked >= 2 &&
+            blocked === (await shownDice()).dice,
+            `jet de l'ordinateur sans coup mal montré : « ${info} », ${blocked} dés barrés`);
+        log(`l'ordinateur ne peut pas jouer : « ${info} »`);
+    }
+    if (move === null) {
+        check(traces.arrows + traces.landed + traces.ghosts === 0 && !traces.replay,
+            `traces sans coup de l'ordinateur à montrer : ${JSON.stringify(traces)}`);
+        return null;
+    }
+    check(traces.arrows === move.halfMoves.length && traces.landed > 0 && traces.ghosts > 0 &&
+        traces.replay, `coup de l'ordinateur mal montré : ${JSON.stringify(traces)}`);
+    return traces;
+}
+
+/** Une zone à toucher d'une action du plateau (dés ou videau) : count zones
+ * (les dés en ont une de chaque côté du plateau), chacune un bouton
+ * accessible d'au moins 44 px de côté. Renvoie le locator de la zone index. */
+async function touchTarget(action, label, count = 1, index = 0) {
+    const zones = page.locator(`[data-action="${action}"]`);
+    check((await zones.count()) === count,
+        `zone ${action} : ${await zones.count()} sur le plateau, ${count} attendues`);
+    for (const zone of await zones.all()) {
+        check((await zone.getAttribute("role")) === "button" &&
+            (await zone.getAttribute("aria-label")) === label, `zone ${action} sans rôle accessible`);
+        const box = await zone.boundingBox();
+        check(box.width >= 44 && box.height >= 44,
+            `zone ${action} trop petite : ${Math.round(box.width)} x ${Math.round(box.height)} px`);
+    }
+    return zones.nth(index);
+}
+
+/** Le nombre de dés montrés, et de dés estompés (déjà joués). */
+async function shownDice() {
+    return {
+        dice: await page.locator("g.die[data-value]").count(),
+        used: await page.locator("g.die-used").count(),
+    };
+}
+
+/** Le dernier jet du joueur, d'après le journal. */
+function lastPlayerRoll(journal) {
+    const rolled = journal.events.filter((e) => e.type === "DiceRolled").at(-1);
+    return rolled?.roll ?? [];
+}
+
+/** Observe la page pendant ms millisecondes : le plus grand nombre
+ * d'animations en cours à la fois, et le plus petit nombre de flèches. */
+async function watchReplay(ms) {
+    let animations = 0;
+    let arrows = Infinity;
+    for (const end = Date.now() + ms; Date.now() < end; ) {
+        const seen = await page.evaluate(() => ({
+            animations: document.getAnimations().length,
+            arrows: document.querySelectorAll(".trace-arrow").length,
+        }));
+        animations = Math.max(animations, seen.animations);
+        arrows = Math.min(arrows, seen.arrows);
+        await new Promise((resolve) => setTimeout(resolve, 40));
+    }
+    return { animations, arrows };
+}
+
+/** « Revoir » : rejoue le coup (sans animation en mouvement réduit), puis
+ * remet les mêmes traces. */
+async function checkReplay(traces, reducedMotion) {
+    await page.emulateMedia({ reducedMotion: reducedMotion ? "reduce" : "no-preference" });
+    await page.click("#replay");
+    const seen = await watchReplay(300);
+    if (reducedMotion) {
+        check(seen.animations === 0, "Revoir en mouvement réduit : des pions glissent quand même");
+    } else {
+        check(seen.animations > 0 && seen.arrows === 0,
+            `Revoir : pas d'animation sans traces (${JSON.stringify(seen)})`);
+    }
+    await waitForPlayer();
+    const after = await shownTraces();
+    check(JSON.stringify(after) === JSON.stringify(traces),
+        `traces différentes après Revoir : ${JSON.stringify(after)}`);
+    await page.emulateMedia({ reducedMotion: "no-preference" });
+}
+
 // Garde-fou : une étape bloquée plus de deux minutes arrête tout, avec une
 // capture et l'état de l'écran.
 let lastStep = Date.now();
@@ -157,10 +271,41 @@ let doubled = false;
 let selectionShot = false;
 let reloaded = false;
 let computerMs = [];
+let tracesSeen = 0;
+let replays = 0;
+let skips = 0;
+let rolls = 0;
+// Saisie du coup : demi-coups du coup en cours, pions avancés d'un seul
+// toucher ou en deux (pion, puis case), coups validés et annulations.
+let halfMoves = 0;
+let singleTouch = 0;
+let twoTouches = 0;
+let confirms = 0;
+let undone = 0;
+let doubles = 0;
+// Vrai dès que le joueur a touché un pion ou « Annuler » pendant son coup :
+// le coup de l'ordinateur n'est plus montré.
+let touched = false;
 for (let actions = 0; ; actions++) {
-    check(actions < 800, "la partie ne finit pas");
+    check(actions < 1500, "la partie ne finit pas");
     const todo = await waitForPlayer();
     step(`partie, action ${actions}`);
+    // Le coup de l'ordinateur est montré jusqu'à l'action suivante du
+    // joueur ; deux fois, on le revoit (la seconde en mouvement réduit).
+    const traces = touched ? null : await checkTraces();
+    if (traces !== null) {
+        tracesSeen++;
+        if (replays < 2) {
+            replays++;
+            await checkReplay(traces, replays === 2);
+            if (replays === 1) {
+                await shot("coup-adverse");
+            }
+            log(`coup de l'ordinateur revu${replays === 2 ? " en mouvement réduit" : ""} : ` +
+                `${traces.arrows} flèches, ${traces.landed} pions entourés, ` +
+                `${traces.ghosts} fantômes, ${traces.hits} pions frappés signalés`);
+        }
+    }
     if (process.env.TRACE) {
         log(`${todo} : ${await page.textContent("#info")} / ${await page.textContent("#prompt")}`);
     }
@@ -172,32 +317,133 @@ for (let actions = 0; ; actions++) {
     if (todo === "again") {
         break;
     }
-    if (todo === "take") {
+    if (todo === "skip") {
+        // Aucun coup possible : le jet reste affiché, barré, avec un
+        // message, et le tour ne passe qu'en touchant « Continuer ».
+        const info = await page.textContent("#info");
+        const blocked = await page.locator(".die-blocked").count();
+        check(/^Aucun coup possible avec \d-\d\.$/.test(info ?? "") && blocked >= 2 &&
+            blocked === (await shownDice()).dice,
+            `aucun coup possible mal montré : « ${info} », ${blocked} dés barrés`);
+        skips++;
+        log(`aucun coup possible : « ${info} », vous continuez`);
+        await page.click("#skip");
+    } else if (todo === "take") {
         log("l'ordinateur double : vous prenez");
         await shot("videau-propose");
         await page.click("#take");
     } else if (todo === "roll") {
         if (!doubled && (await page.isEnabled("#double"))) {
             doubled = true;
-            log("vous doublez");
+            // Toucher le videau demande confirmation ; « Annuler » ne
+            // propose rien, puis « Doubler » (le bouton) et confirmer.
+            const dialog = page.locator("#double-dialog");
+            const question = "Doubler à 2 ? L'ordinateur pourra prendre ou passer.";
+            await (await touchTarget("double", "Doubler")).click();
+            check(await dialog.isVisible(), "videau touché : pas de confirmation");
+            check((await page.textContent("#double-question")) === question,
+                `confirmation du videau : « ${await page.textContent("#double-question")} »`);
+            await shot("videau-confirmation");
+            await page.click("#double-cancel");
+            check(!(await dialog.isVisible()), "Annuler ne ferme pas la confirmation");
+            const offered = (await savedJournal()).events.some((e) => e.type === "CubeOffered");
+            check(!offered && (await page.isVisible("#roll")), "double proposé malgré Annuler");
             await page.click("#double");
+            check(await dialog.isVisible(), "« Doubler » : pas de confirmation");
+            await page.click("#double-confirm");
             await waitForPlayer();
             const answer = (await page.textContent("#info")) || (await page.textContent("#prompt"));
-            log(`réponse : ${answer}`);
+            log(`videau touché : confirmation demandée, annulée, puis double confirmé ; réponse : ${answer}`);
             continue;
         }
-        await page.click("#roll");
-    } else {
-        await page.click(".hit.can-move");
-        await page.waitForSelector(".hit.can-land");
-        if (!selectionShot) {
-            selectionShot = true;
-            await shot("2-pion-touche");
+        // Une fois sur deux, en touchant les dés plutôt que le bouton, d'un
+        // côté puis de l'autre du plateau.
+        rolls++;
+        if (rolls % 2 === 0) {
+            await (await touchTarget("roll", "Lancer les dés", 2, (rolls / 2) % 2)).click();
+        } else {
+            await page.click("#roll");
         }
-        await page.click(".hit.can-land");
+    } else if (todo === "confirm") {
+        // Coup complet : rien n'est joué tant qu'il n'est pas validé.
+        const journal = await savedJournal();
+        const last = journal.events.at(-1);
+        check(last?.type === "DiceRolled" && (await page.isEnabled("#cancel")),
+            `coup complet déjà joué ou non annulable (dernier événement ${last?.type})`);
+        check(/Valider/.test((await page.textContent("#prompt")) ?? ""),
+            `consigne de validation absente : « ${await page.textContent("#prompt")} »`);
+        const dice = await shownDice();
+        check(dice.used === halfMoves && dice.used > 0,
+            `dés estompés : ${dice.used} pour ${halfMoves} demi-coups`);
+        if (undone === 0 && halfMoves >= 2) {
+            // Une fois : « Annuler » défait les demi-coups un par un.
+            if (confirms === 0) {
+                await shot("2b-coup-a-valider");
+            }
+            for (let left = halfMoves - 1; left >= 0; left--) {
+                await page.click("#cancel");
+                await waitForPlayer();
+                const after = await shownDice();
+                check(after.used === left && (await page.isHidden("#confirm")),
+                    `Annuler : ${after.used} dés estompés, ${left} attendus`);
+                undone++;
+            }
+            check(await page.isDisabled("#cancel"), "Annuler reste actif sans demi-coup à défaire");
+            check((await savedJournal()).head === journal.head, "Annuler a touché au journal");
+            log(`Annuler : ${undone} demi-coups défaits un par un, journal intact`);
+            halfMoves = 0;
+            continue;
+        }
+        confirms++;
+        // Une fois sur trois avec le bouton, sinon en touchant les dés
+        // (d'un côté ou de l'autre).
+        if (confirms % 3 === 0) {
+            await page.click("#confirm");
+        } else {
+            await (await touchTarget("confirm", "Valider", 2, confirms % 2)).click();
+        }
+        await waitForPlayer();
+        const played = await savedJournal();
+        check(countMoves(played, "player") === countMoves(journal, "player") + 1,
+            "le coup validé n'est pas dans le journal");
+        halfMoves = 0;
+        touched = false;
+    } else {
+        check((await page.locator("[data-action]").count()) === 0,
+            "dés ou videau touchables pendant que vous jouez votre coup");
+        if (halfMoves === 0) {
+            // Quatre dés pour un double, deux sinon.
+            const [a, b] = lastPlayerRoll(await savedJournal());
+            const dice = await shownDice();
+            check(dice.dice === (a === b ? 4 : 2) && dice.used === 0,
+                `jet ${a}-${b} : ${dice.dice} dés montrés, ${dice.used} estompés`);
+            if (a === b) {
+                doubles++;
+            }
+        }
+        touched = true;
+        // Un pion à destination unique avance dès qu'on le touche ; sinon,
+        // ses cases d'arrivée s'allument.
+        await page.click(".hit.can-move");
+        if ((await page.locator(".hit.can-land").count()) > 0) {
+            twoTouches++;
+            if (!selectionShot) {
+                selectionShot = true;
+                await shot("2-pion-touche");
+            }
+            await page.click(".hit.can-land");
+        } else {
+            singleTouch++;
+        }
+        halfMoves++;
+        await waitForPlayer();
+        const dice = await shownDice();
+        check(dice.used === halfMoves, `${dice.used} dés estompés après ${halfMoves} demi-coups`);
+        continue;
     }
 
-    // Une fois, au milieu de la partie : fermer et rouvrir la page.
+    // Une fois, au milieu de la partie, entre deux coups : fermer et rouvrir
+    // la page.
     const journal = await savedJournal();
     if (!reloaded && countMoves(journal, "computer") >= 3 && countMoves(journal, "player") >= 3) {
         reloaded = true;
@@ -223,6 +469,18 @@ log(
 );
 check(countMoves(journal, "player") >= 3 && countMoves(journal, "computer") >= 3, "trop peu de coups");
 check(reloaded, "la reprise après rechargement n'a pas été essayée");
+check(replays === 2, "le coup de l'ordinateur n'a pas été revu");
+check(doubled && rolls >= 2, "dés ou videau jamais touchés sur le plateau");
+check(singleTouch > 0 && twoTouches > 0,
+    `saisie : ${singleTouch} pions avancés d'un toucher, ${twoTouches} en deux touchers`);
+check(undone >= 2, "Annuler n'a pas été essayé sur un coup complet");
+check(confirms >= 3, "trop peu de coups validés pour essayer dés et bouton");
+log(`dés lancés ${Math.floor(rolls / 2)} fois en les touchant, des deux côtés du plateau`);
+log(`demi-coups : ${singleTouch} d'un seul toucher (destination unique), ${twoTouches} en deux ` +
+    `touchers ; ${confirms} coups validés (${Math.floor(confirms / 3)} par le bouton, les autres ` +
+    `en touchant les dés) ; ${doubles} doubles montrés en quatre dés`);
+log(`coup de l'ordinateur montré ${tracesSeen} fois, et effacé à chaque action suivante`);
+log(skips > 0 ? `« Continuer » demandé ${skips} fois` : "aucun jet sans coup possible dans cette partie");
 if (computerMs.length > 0) {
     log(`temps affichés des tours de l'ordinateur : max ${Math.max(...computerMs)} ms, ` +
         `${computerMs.length} tours`);

tests/test_site.sh

@@ -1,8 +1,9 @@
 #!/usr/bin/env bash
 # Vérifie l'image de production (deploy/) avec le site assemblé (make package) :
 # construit l'image en local, la lance, et contrôle ce que reçoit un
-# navigateur (application, pages de test du moteur, aide, manifeste, service
-# worker, types MIME, compression, politique de sécurité, version).
+# navigateur (application, aide, manifeste, service worker, types MIME,
+# compression, politique de sécurité, version), et l'absence des anciennes
+# pages de test du moteur.
 
 set -euo pipefail
 cd "$(dirname "$0")/.."
@@ -71,10 +72,12 @@ check "wasm/engine.mjs" "text/javascript"
 check "wasm/engine.wasm" "application/wasm"
 check "wasm/engine.data" "application/octet-stream"
 check "version.json" "application/json"
-# Pages de test du moteur (étape 0b).
-check "moteur/" "text/html"
-check "moteur/bench.html" "text/html"
-check "moteur/engine-client.mjs" "text/javascript"
+# Les pages de test du moteur (étape 0b) sont retirées (ADR 0009,
+# amendement du 2026-11-03) : plus rien sous /moteur/.
+[ ! -e build/site/moteur ] || report "build/site/moteur/ existe encore"
+for gone in moteur/ moteur/bench.html; do
+	curl -s -o /dev/null -w "%{http_code}" "$base/$gone" | grep -qx 404 || report "/$gone : 404 attendu"
+done
 # Aide : copies du glossaire et des scénarios (ADR 0008).
 check "docs/scenarios/jouer-une-partie.feature" "text/plain"
 check "docs/glossaire/README.md" "text/markdown"
@@ -94,15 +97,16 @@ done < <(grep -o '"src": "[^"]*"' <<<"$manifest" | sed 's/"src": "\(.*\)"/\1/')
 # Le service worker met en cache chaque fichier du site, avec une version.
 sw="$(curl -s "$base/sw.js")"
 grep -qE '^const VERSION = "[0-9a-f]{16}";' <<<"$sw" || report "sw.js : version absente"
-for file in ./ index.html app/main.js wasm/engine.data wasm/engine.wasm moteur/ \
+for file in ./ index.html app/main.js wasm/engine.data wasm/engine.wasm \
 	docs/glossaire/videau.md version.json fonts/AlegreyaSans-Bold.woff2 icons/favicon.svg; do
 	grep -qF "    \"$file\"," <<<"$sw" || report "sw.js : $file absent de la liste à mettre en cache"
 done
 listed="$(grep -c '^    "' <<<"$sw")"
 present="$(find build/site -type f ! -name sw.js | wc -l)"
-# Chaque fichier, plus « ./ » et « moteur/ » pour les deux index.html.
-[ "$listed" -eq "$((present + 2))" ] \
-	|| report "sw.js liste $listed adresses pour $present fichiers (plus 2 dossiers)"
+# Chaque fichier, plus « ./ » pour index.html.
+[ "$listed" -eq "$((present + 1))" ] \
+	|| report "sw.js liste $listed adresses pour $present fichiers (plus « ./ »)"
+grep -q '"moteur/' <<<"$sw" && report "sw.js met encore en cache des pages de test du moteur"
 grep -o '^    "[^"]*"' <<<"$sw" | tr -d ' "' | while read -r file; do
 	curl -sf -o /dev/null "$base/$file" || echo "sw.js : $file introuvable sur le site"
 done | grep . && report "sw.js liste des fichiers introuvables"

web/app.css

@@ -444,13 +444,65 @@ body.busy .prompt {
 .count-computer { fill: var(--count-computer); }
 
 .target-zone { fill: var(--target); }
-.last-move { fill: var(--last-move); }
+/* Le dernier coup de l'ordinateur (couleur laiton, charte) : une flèche par
+ * demi-coup, les pions arrivés et frappés entourés, un pion fantôme là où
+ * un pion est parti. */
+.trace-arrow {
+  stroke: var(--last-move);
+  stroke-width: 5;
+  stroke-linecap: round;
+  opacity: 0.85;
+}
+
+.trace-head { fill: var(--last-move); }
+
+.trace-landed,
+.trace-hit {
+  fill: none;
+  stroke: var(--last-move);
+  stroke-width: 4;
+}
+
+.trace-hit { stroke-dasharray: 6 4; }
+
+.trace-ghost {
+  fill: none;
+  stroke: var(--last-move);
+  stroke-width: 2.5;
+  stroke-dasharray: 5 4;
+}
 
 .die-player { fill: var(--die-player); stroke: var(--checker-player-edge); stroke-width: 1.5; }
 .die-computer { fill: var(--die-computer); stroke: var(--checker-computer-edge); stroke-width: 1.5; }
 .pip-player { fill: var(--pip-player); }
 .pip-computer { fill: var(--pip-computer); }
 
+/* Dés du joueur en attente d'être lancés, et videau quand il peut doubler :
+ * ils se touchent comme les boutons. */
+.die-waiting rect {
+  stroke: var(--highlight);
+  stroke-width: 2.5;
+  stroke-dasharray: 5 4;
+}
+
+.cube.can-double .cube-face {
+  stroke: var(--highlight);
+  stroke-width: 3;
+}
+
+/* Jet sans coup possible : dés estompés et barrés. */
+.die-blocked { opacity: 0.5; }
+
+.die-strike {
+  stroke: var(--text);
+  stroke-width: 3;
+  stroke-linecap: round;
+}
+
+/* Dé déjà utilisé par un demi-coup du coup en cours : estompé, sans être
+ * barré (il n'est pas perdu : « Annuler » le rend). */
+.die-used { opacity: 0.35; }
+
 .cube-face { fill: var(--cube); stroke: var(--checker-player-edge); stroke-width: 2; }
 
 .cube-value {
@@ -465,6 +517,39 @@ body.busy .prompt {
   cursor: pointer;
 }
 
+/* ------------------------------------------------ Confirmation (videau) */
+
+/* Une carte au milieu de l'écran, comme le glossaire ; le fond de la page
+ * s'assombrit derrière. */
+.confirm {
+  width: min(22rem, calc(100vw - 2 * var(--space-4)));
+  padding: var(--space-4);
+  color: var(--text);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-raised);
+}
+
+.confirm::backdrop {
+  background: rgba(43, 29, 21, 0.5);
+}
+
+.confirm p {
+  margin: 0 0 var(--space-4);
+  font-weight: 700;
+}
+
+.confirm-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+
+.confirm-actions button {
+  flex: 1 1 auto;
+}
+
 /* --------------------------------------------------------------- Aide */
 
 .help {
@@ -534,12 +619,6 @@ body.busy .prompt {
   color: var(--muted);
 }
 
-/* Une cible tactile confortable pour le lien. */
-.about a {
-  display: inline-block;
-  padding-block: 12px;
-}
-
 /* ------------------------------------------------------- Mode paysage */
 
 /* Téléphone tourné : le plateau prend toute la hauteur de l'écran, à

web/index.html

@@ -43,9 +43,20 @@
     <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>
   </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>
+  </dialog>
   <noscript><p>Ustagammon a besoin de JavaScript.</p></noscript>
 </main>
 

web/moteur/bench-page.mjs

@@ -1,98 +0,0 @@
-// bench-page.mjs -- page de mesure (bench.html) : chronomètre le moteur
-// dans un Web Worker et produit le rapport à copier.
-//
-// Copyright (C) 2026 les auteurs d'Ustagammon.
-// Licence : GPLv3 ou ultérieure (voir LICENSE).
-
-import { DOWNLOADED_FILES, DOWNLOAD_LIMIT_BYTES, formatReport, measureTimes, summarize }
-    from "./benchmark.mjs";
-import { startEngine } from "./engine-client.mjs";
-
-const $ = (id) => document.getElementById(id);
-
-// Taille d'un fichier du site, brute et compressée gzip (comme le ferait un
-// serveur qui compresse ses réponses).
-// name est relatif à la racine du site, un dossier au-dessus de cette page.
-async function fileSize(name) {
-    const blob = await (await fetch("../" + name, { cache: "no-store" })).blob();
-    const gzipped = blob.stream().pipeThrough(new CompressionStream("gzip"));
-    const gzipBytes = (await new Response(gzipped).arrayBuffer()).byteLength;
-    return { name, bytes: blob.size, gzipBytes };
-}
-
-function addRow(cells) {
-    const row = $("table").insertRow();
-    for (const text of cells) {
-        row.insertCell().textContent = text;
-    }
-}
-
-async function measure() {
-    $("start").disabled = true;
-    $("results").hidden = true;
-    $("table").replaceChildren();
-
-    $("status").textContent = "Chargement du moteur…";
-    const start = performance.now();
-    const engine = startEngine();
-    await engine.ready;
-    const loadMs = performance.now() - start;
-
-    const { positions } = await (await fetch("../wasm/positions.json")).json();
-    let memoryBytes = 0;
-    const times = await measureTimes({
-        bestMove: (...args) => engine.bestMove(...args).then(keepMemory),
-        cubeDecision: (...args) => engine.cubeDecision(...args).then(keepMemory),
-    }, positions, (done, total) => {
-        $("status").textContent = "Calcul " + done + " sur " + total + "…";
-    });
-    function keepMemory(answer) {
-        memoryBytes = answer.memoryBytes;
-        return answer;
-    }
-
-    $("status").textContent = "Mesure de la taille à télécharger…";
-    const files = await Promise.all(DOWNLOADED_FILES.map(fileSize));
-
-    for (const s of summarize(times)) {
-        addRow([s.label, Math.round(s.medianMs) + " ms", Math.round(s.maxMs) + " ms",
-            s.limitMs + " ms", s.ok ? "OK" : "dépassé"]);
-    }
-    const gzipTotal = files.reduce((sum, f) => sum + f.gzipBytes, 0);
-    addRow(["Taille compressée", "", (gzipTotal / 1e6).toFixed(1).replace(".", ",") + " Mo",
-        DOWNLOAD_LIMIT_BYTES / 1e6 + " Mo", gzipTotal < DOWNLOAD_LIMIT_BYTES ? "OK" : "dépassé"]);
-
-    $("report").value = formatReport({
-        environment: navigator.userAgent, files, loadMs, memoryBytes, times,
-    });
-    $("results").hidden = false;
-    $("status").textContent = "Mesure terminée.";
-}
-
-// Copie dans le presse-papiers. L'API moderne n'existe que sur les pages
-// sécurisées (https ou localhost) : sur le réseau local en http, on
-// sélectionne le texte et on utilise l'ancienne commande de copie.
-async function copyReport() {
-    try {
-        if (navigator.clipboard) {
-            await navigator.clipboard.writeText($("report").value);
-        } else {
-            $("report").select();
-            if (!document.execCommand("copy")) {
-                throw new Error();
-            }
-        }
-        $("copy-status").textContent = "Rapport copié : collez-le dans la conversation.";
-    } catch {
-        $("report").select();
-        $("copy-status").textContent = "Copie impossible : le texte est sélectionné, "
-            + "copiez-le à la main (appui long, puis Copier).";
-    }
-}
-
-$("start").onclick = () => measure().catch((error) => {
-    $("status").textContent = "La mesure a échoué : " + error.message;
-    $("status").classList.add("error");
-    $("start").disabled = false;
-});
-$("copy").onclick = copyReport;

web/moteur/bench.html

@@ -1,35 +0,0 @@
-<!doctype html>
-<html lang="fr">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<title>Ustagammon : mesure du moteur</title>
-<link rel="stylesheet" href="style.css">
-<script type="module" src="bench-page.mjs"></script>
-</head>
-<body>
-<main>
-  <h1>Mesure du moteur</h1>
-  <p>Cette page chronomètre le moteur sur les positions de référence : meilleur coup
-    aux niveaux rapide et fort, décision de videau au niveau fort. Elle mesure aussi
-    la taille à télécharger et la mémoire utilisée. Comptez une à quelques minutes ;
-    gardez l'écran allumé et la page au premier plan.</p>
-  <button id="start" type="button">Lancer la mesure</button>
-  <p id="status" class="status"></p>
-
-  <section id="results" hidden>
-    <h2>Résultats</h2>
-    <table>
-      <thead><tr><th>Mesure</th><th>Médiane</th><th>Maximum</th><th>Seuil</th><th></th></tr></thead>
-      <tbody id="table"></tbody>
-    </table>
-    <h2>Rapport</h2>
-    <button id="copy" type="button">Copier les résultats</button>
-    <p id="copy-status" class="status"></p>
-    <textarea id="report" readonly></textarea>
-  </section>
-
-  <p><a href="./">Page de test</a></p>
-</main>
-</body>
-</html>

web/moteur/engine-client.mjs

@@ -1,66 +0,0 @@
-// engine-client.mjs -- le moteur vu depuis les pages de test : démarre le
-// Web Worker (../engine-worker.mjs, partagé avec l'application) et lui envoie
-// les commandes.
-//
-// Copyright (C) 2026 les auteurs d'Ustagammon.
-// Licence : GPLv3 ou ultérieure (voir LICENSE).
-//
-// Toutes les fonctions renvoient une promesse de { result, ms, memoryBytes } :
-// result est l'objet JSON d'engine-cli, ms le temps de calcul mesuré dans le
-// Worker. La promesse est rejetée si le moteur signale une erreur.
-
-import { commands } from "../engine-wasm.mjs";
-
-export function startEngine() {
-    const worker = new Worker(new URL("../engine-worker.mjs", import.meta.url), { type: "module" });
-    const pending = new Map();
-    let nextId = 1;
-    let resolveReady, rejectReady;
-    const ready = new Promise((resolve, reject) => {
-        resolveReady = resolve;
-        rejectReady = reject;
-    });
-
-    worker.onmessage = (event) => {
-        const message = event.data;
-        if (message.type === "ready") {
-            resolveReady(message);
-        } else if (message.type === "failed") {
-            rejectReady(new Error(message.message));
-        } else {
-            const { resolve, reject } = pending.get(message.id);
-            pending.delete(message.id);
-            if (message.error) {
-                reject(new Error(message.error));
-            } else {
-                resolve(message);
-            }
-        }
-    };
-    // Erreur au chargement du Worker lui-même (fichier absent, navigateur
-    // trop ancien pour les Workers en module ES…).
-    worker.onerror = (event) => {
-        rejectReady(new Error(event.message || "le Web Worker du moteur n'a pas démarré"));
-    };
-
-    function run(args) {
-        const id = nextId++;
-        return new Promise((resolve, reject) => {
-            pending.set(id, { resolve, reject });
-            worker.postMessage({ id, args: args.map(String) });
-        });
-    }
-
-    return {
-        // Promesse de { loadMs, memoryBytes } une fois le moteur chargé.
-        ready,
-        bestMove: (positionId, matchId, dice, ply) =>
-            run(commands.bestMove(positionId, matchId, dice, ply)),
-        cubeDecision: (positionId, matchId, ply) =>
-            run(commands.cubeDecision(positionId, matchId, ply)),
-        evaluate: (positionId, matchId, ply) =>
-            run(commands.evaluate(positionId, matchId, ply)),
-        reference: (positionId, matchId, dice, ply) =>
-            run(commands.reference(positionId, matchId, dice, ply)),
-    };
-}

web/moteur/index.html

@@ -1,48 +0,0 @@
-<!doctype html>
-<html lang="fr">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<title>Ustagammon : test du moteur</title>
-<link rel="stylesheet" href="style.css">
-<script type="module" src="page.mjs"></script>
-</head>
-<body>
-<main>
-  <h1>Test du moteur</h1>
-  <p>Le moteur GNU Backgammon, compilé en WebAssembly, calcule dans le navigateur.</p>
-  <p id="status" class="status">Chargement du moteur…</p>
-
-  <form id="form">
-    <label>Exemple
-      <select id="example"><option value="">(choisir une position de référence)</option></select>
-    </label>
-    <label>Position ID
-      <input id="position-id" required autocomplete="off" spellcheck="false" value="4HPwATDgc/ABMA">
-    </label>
-    <label>Match ID
-      <input id="match-id" required autocomplete="off" spellcheck="false" value="cIkFAAAAAAAA">
-    </label>
-    <div class="row">
-      <label>Dé 1 <input id="die1" type="number" min="1" max="6" required value="3"></label>
-      <label>Dé 2 <input id="die2" type="number" min="1" max="6" required value="1"></label>
-      <label>Niveau
-        <select id="ply">
-          <option value="0">rapide (0 pli)</option>
-          <option value="2">fort (2 plis)</option>
-        </select>
-      </label>
-    </div>
-    <button id="best-move" type="submit" disabled>Meilleur coup</button>
-  </form>
-
-  <section id="result" class="result" hidden>
-    <p>Meilleur coup : <strong id="move"></strong></p>
-    <p id="details"></p>
-    <p>Temps de calcul : <strong id="time"></strong></p>
-  </section>
-
-  <p><a href="bench.html">Page de mesure</a> · <a href="../">L'application</a></p>
-</main>
-</body>
-</html>

web/moteur/page.mjs

@@ -1,71 +0,0 @@
-// page.mjs -- page de test du moteur (index.html) : meilleur coup d'une
-// position, avec son temps de calcul.
-//
-// Copyright (C) 2026 les auteurs d'Ustagammon.
-// Licence : GPLv3 ou ultérieure (voir LICENSE).
-
-import { startEngine } from "./engine-client.mjs";
-
-const $ = (id) => document.getElementById(id);
-const engine = startEngine();
-
-engine.ready.then(
-    ({ loadMs }) => {
-        $("status").textContent = "Moteur prêt, chargé en " + Math.round(loadMs) + " ms.";
-        $("best-move").disabled = false;
-    },
-    (error) => {
-        $("status").textContent = "Le moteur n'a pas pu se charger : " + error.message;
-        $("status").classList.add("error");
-    },
-);
-
-// Exemples : les positions de référence avec des dés.
-fetch("../wasm/positions.json")
-    .then((response) => response.json())
-    .then(({ positions }) => {
-        for (const p of positions.filter((p) => p.type === "move")) {
-            const option = new Option(p.id + " : " + p.description, p.id);
-            option.position = p;
-            $("example").add(option);
-        }
-    })
-    .catch(() => {}); // la page reste utilisable sans les exemples
-
-$("example").onchange = () => {
-    const p = $("example").selectedOptions[0].position;
-    if (p) {
-        $("position-id").value = p.position_id;
-        $("match-id").value = p.match_id;
-        [$("die1").value, $("die2").value] = p.dice;
-    }
-};
-
-function showResult(move, details, time) {
-    $("move").textContent = move;
-    $("details").textContent = details;
-    $("time").textContent = time;
-    $("result").hidden = false;
-}
-
-$("form").onsubmit = async (event) => {
-    event.preventDefault();
-    $("best-move").disabled = true;
-    $("result").hidden = true;
-    try {
-        const { result, ms } = await engine.bestMove($("position-id").value.trim(),
-            $("match-id").value.trim(), [$("die1").value, $("die2").value], $("ply").value);
-        const best = result.best_move;
-        if (best) {
-            showResult(best.move, "Équité " + best.equity.toFixed(3).replace(".", ",")
-                + ", chances de gain " + (100 * best.probabilities.win).toFixed(1).replace(".", ",")
-                + " %, évalué à " + best.ply + " pli(s).", Math.round(ms) + " ms");
-        } else {
-            showResult("aucun coup possible", "", Math.round(ms) + " ms");
-        }
-    } catch (error) {
-        showResult("erreur", error.message, "");
-    } finally {
-        $("best-move").disabled = false;
-    }
-};

web/moteur/style.css

@@ -1,113 +0,0 @@
-/* Pages de test du moteur : mise en forme minimale, lisible sur téléphone. */
-
-:root {
-  --text: #1d1d1b;
-  --background: #fbfaf7;
-  --muted: #5f5e5a;
-  --accent: #1f5c4a;
-  --error: #a3261b;
-  --border: #cfccc4;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --text: #ecebe6;
-    --background: #1b1c1a;
-    --muted: #a9a8a2;
-    --accent: #7cc4a8;
-    --error: #f08a7e;
-    --border: #4a4a46;
-  }
-}
-
-* {
-  box-sizing: border-box;
-}
-
-body {
-  margin: 0;
-  font: 17px/1.5 system-ui, sans-serif;
-  color: var(--text);
-  background: var(--background);
-}
-
-main {
-  max-width: 40rem;
-  margin: 0 auto;
-  padding: 1rem;
-}
-
-h1 {
-  font-size: 1.5rem;
-}
-
-label {
-  display: block;
-  margin-bottom: 0.75rem;
-}
-
-input,
-select,
-button,
-textarea {
-  display: block;
-  width: 100%;
-  margin-top: 0.25rem;
-  padding: 0.5rem;
-  font: inherit;
-  color: inherit;
-  background: transparent;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-}
-
-.row {
-  display: flex;
-  gap: 0.75rem;
-}
-
-.row label {
-  flex: 1;
-}
-
-button {
-  margin: 0.5rem 0 1rem;
-  font-weight: 600;
-  color: var(--background);
-  background: var(--accent);
-  border-color: var(--accent);
-}
-
-button:disabled {
-  opacity: 0.5;
-}
-
-textarea {
-  height: 16rem;
-  font: 13px/1.4 monospace;
-}
-
-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-th,
-td {
-  padding: 0.25rem;
-  text-align: left;
-  border-bottom: 1px solid var(--border);
-}
-
-.status {
-  color: var(--muted);
-}
-
-.error {
-  color: var(--error);
-}
-
-.result {
-  padding: 0.5rem 1rem;
-  border-left: 4px solid var(--accent);
-}