Fusion de main dans revision-ux

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

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

@@ -79,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;
@@ -141,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
@@ -205,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);
@@ -220,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);
@@ -274,34 +300,51 @@ export class Game {
 
     /**
      * 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
@@ -454,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/main.ts

@@ -9,6 +9,7 @@ import { Game } from "./domain/game/game.js";
 import { createWasmEngine } from "./engine/wasm-engine.js";
 import { startEngineWorker } from "./engine/worker-run.js";
 import { createGameStore } from "./storage/game-store.js";
+import { createSettingsStore } from "./storage/settings-store.js";
 import { startApp } from "./ui/app.js";
 
 // Ce fichier est servi sous app/ ; le Worker et le service worker sont à la
@@ -16,6 +17,7 @@ import { startApp } from "./ui/app.js";
 const worker = startEngineWorker(new URL("../engine-worker.mjs", import.meta.url));
 const engine = createWasmEngine(worker.run);
 const store = createGameStore(window.localStorage);
+const settings = createSettingsStore(window.localStorage);
 
 startApp({
     engineReady: worker.ready,
@@ -31,8 +33,12 @@ startApp({
             return null; // partie illisible : on en commence une nouvelle
         }
     },
+    resumeGame: (journal) => Game.resume(engine, journal),
     saveGame: (journal) => store.save(journal),
-    confirm: (question) => window.confirm(question),
+    cachedBoard: () => settings.loadBoard(),
+    saveBoard: (board) => settings.saveBoard(board),
+    loadSettings: () => settings.loadSettings(),
+    saveSettings: (json) => settings.saveSettings(json),
 });
 
 // Hors ligne : le service worker met tout le site en cache. Le navigateur le

app/src/storage/settings-store.ts

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

app/src/ui/board-model.ts

@@ -82,6 +82,19 @@ 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é. */
@@ -126,6 +139,14 @@ export function moveTrace(
     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 } {
@@ -134,3 +155,26 @@ export function pointSlot(number: number): { top: boolean; column: number } {
     }
     return { top: true, column: number - 13 };
 }
+
+/** Le plateau de la position de départ, pour le dessiner avant que le
+ * moteur soit chargé (première ouverture) : chaque camp a 2 pions sur sa case
+ * 24, 5 sur la 13, 3 sur la 8 et 5 sur la 6 ; 167 points chacun. Une donnée,
+ * comme dans le dessin de référence de la charte (board.js), pas une règle. */
+export const OPENING_BOARDS: SideBoards = (() => {
+    const points = Array.from({ length: 24 }, (_, i) => ({ 5: 5, 7: 3, 12: 5, 23: 2 })[i] ?? 0);
+    const side = { points, bar: 0, off: 0, pipCount: 167 };
+    return { player: side, computer: side };
+})();
+
+/** Qui mène la course, et de combien : le plus petit compte de points
+ * (leader null : égalité). */
+export function pipLead(pipCount: Readonly<Record<Side, number>>): {
+    leader: Side | null;
+    by: number;
+} {
+    const by = Math.abs(pipCount.player - pipCount.computer);
+    if (by === 0) {
+        return { leader: null, by };
+    }
+    return { leader: pipCount.player < pipCount.computer ? "player" : "computer", by };
+}

app/src/ui/board-view.ts

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

app/src/ui/geometry.ts

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

app/src/ui/haptics.ts

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

app/src/ui/help.ts

@@ -15,7 +15,10 @@ import {
 import { TEXTS } from "./texts.js";
 
 /** Les scénarios montrés dans l'aide, dans l'ordre. */
-const FEATURES = ["docs/scenarios/jouer-une-partie.feature"];
+const FEATURES = [
+    "docs/scenarios/jouer-une-partie.feature",
+    "docs/scenarios/regler-l-application.feature",
+];
 const GLOSSARY = "docs/glossaire/";
 
 async function fetchText(url: string): Promise<string> {
@@ -32,6 +35,12 @@ async function loadGlossary(): Promise<GlossaryEntry[]> {
     return texts.map(parseGlossaryEntry).filter((entry) => entry !== null);
 }
 
+/** Une fiche du glossaire (nom de fichier dans docs/glossaire/), lue dans la
+ * copie du site : la bulle du compte de points en affiche le texte. */
+export async function loadGlossaryEntry(file: string): Promise<GlossaryEntry | null> {
+    return parseGlossaryEntry(await fetchText(GLOSSARY + file));
+}
+
 function element<K extends keyof HTMLElementTagNameMap>(
     parent: HTMLElement,
     tag: K,
@@ -91,10 +100,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/icons.ts

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

app/src/ui/settings.ts

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

app/src/ui/texts.ts

@@ -22,9 +22,11 @@ function points(n: number): string {
     return n > 1 ? `${n} points` : `${n} point`;
 }
 
-/** Une durée en secondes, avec une décimale : « 0,3 s ». */
-function seconds(ms: number): string {
-    return `${(ms / 1000).toFixed(1).replace(".", ",")} s`;
+/** Une consigne : sa forme longue (les trois premières parties) et sa forme
+ * courte (ensuite, et toujours en paysage, dans la bande du plateau). */
+export interface PromptText {
+    readonly long: string;
+    readonly short: string;
 }
 
 export const TEXTS = {
@@ -36,53 +38,118 @@ export const TEXTS = {
     double: "Doubler",
     take: "Prendre",
     drop: "Passer",
+    confirm: "Jouer ce coup",
     cancel: "Annuler",
     skip: "Continuer",
-    replay: "Revoir",
     replayTitle: "Revoir le dernier coup de l'ordinateur",
+    undoTitle: "Annuler le demi-coup",
     newGame: "Nouvelle partie",
+    reviewGame: "Revoir la partie",
     help: "Aide",
+    menu: "Menu",
+    fullscreen: "Plein écran",
+    exitFullscreen: "Quitter le plein écran",
     back: "Retour à la partie",
+    close: "Fermer",
+    /** Ce que fait un toucher sur les dés (nom accessible de la zone). */
+    diceActions: {
+        roll: "Lancer les dés",
+        confirm: "Jouer ce coup",
+        skip: "Passer votre tour",
+    },
+    moveHint: "Le coup fini, touchez les dés pour le jouer.",
+
+    // Menu
+    helpAndGlossary: "Aide et glossaire",
+    theme: "Thème",
+    themes: { auto: "Automatique", light: "Clair", dark: "Sombre" },
+    vibrations: "Vibrations",
+    keepScreenOn: "Écran allumé pendant la partie",
+    newGameStarted: "Nouvelle partie commencée.",
+    resumeOld: "Reprendre l'ancienne",
+
+    // Bandeaux des joueurs et compte de points
+    you: "Vous",
+    computer: "Ordinateur",
+    yourTurn: "à vous de jouer",
+    computerTurn: "joue",
+    lead: (n: number) => `mène de ${n}`,
+    pipCountButton: (who: string, n: number) => `Compte de points de ${who} : ${n}`,
+    pipCountFile: "compte-de-points.md",
+    seeGlossary: "Voir le glossaire",
 
     // Chargement
     loading: "Chargement du moteur…",
     engineFailed: (message: string) => `Le moteur n'a pas pu se charger : ${message}`,
     actionFailed: (message: string) => `Erreur : ${message}`,
-    confirmNewGame: "Abandonner la partie en cours et en commencer une nouvelle ?",
 
-    // Déroulement
+    // Déroulement (ligne d'information)
     opening: (player: number, computer: number) =>
         `Jet d'ouverture : vous ${player}, l'ordinateur ${computer}. ${
             player > computer ? "Vous commencez." : "L'ordinateur commence."
         }`,
-    yourRoll: "À vous : doublez ou lancez les dés.",
-    yourRollNoDouble: "À vous : lancez les dés.",
-    yourMove: (dice: readonly number[]) =>
-        `Jouez ${roll(dice)} : touchez un pion, puis sa case d'arrivée.`,
-    pickTarget: "Touchez une case d'arrivée en surbrillance, ou un autre pion.",
     youCannotMove: (dice: readonly number[]) => `Aucun coup possible avec ${roll(dice)}.`,
-    pressContinue: "Touchez « Continuer » : le tour passe à l'ordinateur.",
-    thinking: "L'ordinateur réfléchit…",
-    computerMoved: (dice: readonly number[], move: string, ms: number) =>
-        `L'ordinateur a joué ${roll(dice)} : ${move} (${seconds(ms)}).`,
+    computerMoved: (dice: readonly number[], move: string) =>
+        `L'ordinateur a joué ${roll(dice)} : ${move}.`,
     computerCannotMove: (dice: readonly number[]) =>
         `L'ordinateur ne peut pas jouer ${roll(dice)}.`,
-    computerDoubles: "L'ordinateur vous propose de doubler : prenez ou passez.",
     computerTakes: (value: number) =>
         `L'ordinateur prend : la partie vaut maintenant ${points(value)}.`,
     youTook: (value: number) =>
         `Vous prenez : la partie vaut maintenant ${points(value)}, et le videau est chez vous.`,
+    confirmDouble: (value: number) => `Doubler à ${value} ? L'ordinateur pourra prendre ou passer.`,
+
+    // Consignes
+    prompts: {
+        loading: { long: "", short: "Chargement…" },
+        yourRoll: {
+            long: "À vous : touchez les dés pour les lancer, ou le videau pour doubler.",
+            short: "À vous : lancez les dés.",
+        },
+        yourRollNoDouble: {
+            long: "À vous : touchez les dés pour les lancer.",
+            short: "À vous : lancez les dés.",
+        },
+        yourMove: (dice: readonly number[]): PromptText => ({
+            long: `Jouez ${roll(dice)} : touchez un pion, puis sa case d'arrivée.`,
+            short: `Jouez ${roll(dice)}.`,
+        }),
+        pickTarget: {
+            long: "Touchez une case d'arrivée en surbrillance, ou un autre pion.",
+            short: "Choisissez la case.",
+        },
+        confirmOrUndo: {
+            long: "Touchez vos dés pour jouer ce coup, ou « Annuler » pour reprendre un pion.",
+            short: "Touchez les dés pour jouer.",
+        },
+        stuck: {
+            long: "Aucun coup possible : touchez vos dés pour passer votre tour.",
+            short: "Aucun coup : touchez les dés.",
+        },
+        thinking: { long: "L'ordinateur réfléchit", short: "L'ordinateur réfléchit" },
+        computerDoubles: {
+            long: "L'ordinateur vous propose de doubler : prenez ou passez.",
+            short: "L'ordinateur double.",
+        },
+    } satisfies Record<string, PromptText | ((dice: readonly number[]) => PromptText)>,
 
     // Fin de partie
-    youWin: (kind: ResultKind, n: number) => `Vous gagnez ${RESULT_KIND[kind]} : ${points(n)}.`,
-    youLose: (kind: ResultKind, n: number) =>
-        `L'ordinateur gagne ${RESULT_KIND[kind]} : ${points(n)} pour lui.`,
-    computerDropped: (n: number) => `L'ordinateur passe : vous gagnez ${points(n)}.`,
-    youDropped: (n: number) => `Vous passez : l'ordinateur gagne ${points(n)}.`,
-
-    // Sous le plateau
-    pipCounts: (player: number, computer: number) =>
-        `Compte de points : vous ${player}, l'ordinateur ${computer}`,
+    gameOver: "Partie finie",
+    endOverline: "Fin de partie",
+    /** Titre du panneau de fin : qui gagne, et comment. */
+    endTitle: (winner: "player" | "computer", kind: ResultKind, dropped: boolean) => {
+        if (dropped) {
+            return winner === "player" ? "L'ordinateur passe" : "Vous passez";
+        }
+        return winner === "player"
+            ? `Vous gagnez ${RESULT_KIND[kind]}`
+            : `L'ordinateur gagne ${RESULT_KIND[kind]}`;
+    },
+    /** « 8 points pour lui, videau à 4. » */
+    endDetail: (winner: "player" | "computer", n: number, cube: number) =>
+        `${points(n)} pour ${winner === "player" ? "vous" : "lui"}${
+            cube > 1 ? `, videau à ${cube}` : ""
+        }.`,
 
     // Aide
     helpTitle: "Aide",
@@ -90,5 +157,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

@@ -45,6 +45,8 @@ async function playToTheEnd(game: Game, engine: Awaited<ReturnType<typeof loadNo
             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

@@ -88,14 +88,111 @@ 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("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, {
@@ -202,6 +299,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");
 
@@ -210,6 +308,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");
@@ -254,6 +353,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/layout.test.ts

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

app/tests/move-steps.test.ts

@@ -42,6 +42,7 @@ async function playerMove(position: PositionId, dice: [number, number], move: st
     for (const halfMove of parseHalfMoves(move)) {
         assert.equal(await game.playHalfMove(halfMove), true, formatHalfMoves([halfMove]));
     }
+    await game.confirmMove();
     return game;
 }
 
@@ -59,6 +60,7 @@ test("un coup simple : un plateau par demi-coup, sans pion frappé", async () =>
     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");
@@ -121,6 +123,7 @@ test("le coup de l'ordinateur, vu dans sa propre numérotation", async () => {
     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);

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

@@ -19,6 +19,7 @@ import {
 } from "../../src/domain/game/position.js";
 import { fixedDice } from "../../src/domain/game/roll.js";
 import type { GameState } from "../../src/domain/game/state.js";
+import { boardModel, pipLead } from "../../src/ui/board-model.js";
 import { loadNodeEngine } from "../support/node-engine.js";
 
 // Le chargement du moteur prend une à deux secondes sur le PC de 2011.
@@ -80,6 +81,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");
@@ -160,12 +170,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");
 });
 
@@ -224,7 +284,7 @@ Then("c'est toujours à vous", () => {
     assert.equal(lastEvent().type, "DiceRolled");
 });
 
-When("vous continuez", async () => {
+When("vous laissez passer votre tour", async () => {
     await game.skipTurn();
     const event = lastEvent();
     assert.ok(event.type === "MovePlayed" && event.side === "player");
@@ -285,8 +345,75 @@ Then("vous pouvez revoir son coup", async () => {
     assert.deepEqual(await game.lastMoveSteps(), computerMove);
 });
 
+// ------------------------------------------------------- Compte de points
+
+// Les bandeaux lisent le compte de points du plateau donné par le moteur ;
+// qui mène se calcule dans l'interface (board-model.ts).
+
+async function pips() {
+    return boardModel(await game.displayedBoard()).pipCount;
+}
+
+Then("chaque camp a un compte de points de {int}", async (n: number) => {
+    assert.deepEqual(await pips(), { player: n, computer: n });
+});
+
+Then("personne ne mène la course", async () => {
+    assert.equal(pipLead(await pips()).leader, null);
+});
+
+Then("vous menez la course de {int}", async (n: number) => {
+    assert.deepEqual(pipLead(await pips()), { leader: "player", by: n });
+});
+
 // ------------------------------------------------------------------ Videau
 
+// La confirmation elle-même est une question de l'interface (une fenêtre
+// « Doubler à 2 ? ») : ces étapes vérifient que rien n'est proposé tant que
+// vous n'avez pas confirmé, et ce qui suit votre confirmation.
+
+Given("vous pouvez doubler", async () => {
+    game = Game.start(engine, { setup: { position: START_POSITION, firstTurn: "player" } });
+    assert.equal(game.state.phase, "rolling");
+});
+
+When("vous demandez à doubler", async () => {
+    assert.equal(await game.canDouble(), true);
+});
+
+When("vous changez d'avis", () => {
+    // Vous refermez la question : la partie n'est pas touchée.
+});
+
+Then("rien n'est proposé à l'ordinateur", () => {
+    assert.ok(!game.events.some((e) => e.type === "CubeOffered"));
+    assert.equal(game.state.phase, "rolling");
+    assert.equal(game.state.turn, "player");
+    assert.deepEqual(game.state.cube, { value: 1, owner: null });
+});
+
+When("vous confirmez", async () => {
+    await game.double();
+});
+
+Then("l'ordinateur prend ou passe, comme le recommande le moteur", async () => {
+    const decision = await engine.cubeDecision(
+        START_POSITION,
+        { value: 1, owner: "centered" },
+        STANDARD_PLY,
+    );
+    const offered = game.events.findIndex((e) => e.type === "CubeOffered");
+    const answer = game.events[offered + 1];
+    assert.ok(offered >= 0 && answer !== undefined);
+    if (decision.take) {
+        assert.equal(answer.type, "CubeTaken");
+        assert.deepEqual(game.state.cube, { value: 2, owner: "computer" });
+    } else {
+        assert.equal(answer.type, "CubeDropped");
+        assert.deepEqual(game.state.result, { winner: "player", kind: "single", points: 1 });
+    }
+});
+
 Given("l'ordinateur vous propose de doubler", async () => {
     game = Game.start(engine, { setup: { position: COMPUTER_DOUBLES, firstTurn: "computer" } });
     await game.playComputerTurn();
@@ -346,7 +473,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/steps/regler-l-application.steps.ts

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

app/tests/ui.test.ts

@@ -12,7 +12,15 @@ import type { BoardSide } from "../src/domain/game/engine.js";
 import { appendEvent, EMPTY_JOURNAL } from "../src/domain/game/events.js";
 import { parseHalfMoves, START_POSITION } from "../src/domain/game/position.js";
 import { createGameStore } from "../src/storage/game-store.js";
-import { boardModel, moveTargets, moveTrace, 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,11 @@ 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", () => {
@@ -182,13 +207,13 @@ test("la partie enregistrée se relit ; un enregistrement illisible est ignoré"
 });
 
 test("les textes de fin de partie emploient les mots du glossaire", () => {
-    assert.equal(TEXTS.youWin("gammon", 2), "Vous gagnez un gammon : 2 points.");
+    assert.equal(TEXTS.endTitle("computer", "gammon", false), "L'ordinateur gagne un gammon");
+    assert.equal(TEXTS.endDetail("computer", 8, 4), "8 points pour lui, videau à 4.");
+    assert.equal(TEXTS.endTitle("player", "single", false), "Vous gagnez la partie simple");
+    assert.equal(TEXTS.endDetail("player", 1, 1), "1 point pour vous.");
+    assert.equal(TEXTS.endTitle("player", "single", true), "L'ordinateur passe");
     assert.equal(
-        TEXTS.youLose("single", 1),
-        "L'ordinateur gagne la partie simple : 1 point pour lui.",
-    );
-    assert.equal(
-        TEXTS.computerMoved([6, 4], "24/18 13/9", 312),
-        "L'ordinateur a joué 6-4 : 24/18 13/9 (0,3 s).",
+        TEXTS.computerMoved([6, 4], "24/18 13/9"),
+        "L'ordinateur a joué 6-4 : 24/18 13/9.",
     );
 });

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

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

docs/adr/README.md

@@ -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-1.md

@@ -17,7 +17,7 @@ Repris du cadrage (modules, écrans clés, IA générative en V1) et des ADR 001
 
 | Sous-étape | Contenu | Dépend de |
 | --- | --- | --- |
-| 1a. Moteur pour l'analyse | 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 | — |
+| 1a. Moteur pour l'analyse (fait) | Niveaux de jeu (plis et bruit de GNU Backgammon : débutant à expert), classement des coups d'un jet avec équités, analyse d'un coup joué et d'une décision de videau, chance d'un jet ; exposés par `engine.h`, `engine-cli` et le Worker, avec positions de référence comparées à gnubg de bureau | — |
 | 1b. Parties enregistrées | Stockage IndexedDB derrière l'interface de stockage existante : plusieurs parties, reprise automatique, branches (« Rejouer d'ici » crée une branche, l'originale reste intacte et rechargeable), export SGF avec variantes | — |
 | 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 |
@@ -43,8 +43,9 @@ Repris du cadrage (modules, écrans clés, IA générative en V1) et des ADR 001
 - **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.
+- **Seuils des appréciations** : ceux de GNU Backgammon (douteux 0,03,
+  mauvais 0,06, très mauvais 0,12 d'équité, `arSkillLevel`), exposés par le
+  moteur depuis 1a ; à calibrer sur de vraies parties.
 - **Relecture des leçons** par un joueur fort de l'Atelier du Huit.
 
 ## Ordre de réalisation

docs/feuille-de-route.md

@@ -23,10 +23,8 @@ Demandes de Pierre du 2026-11-03, traitées avant d'ouvrir l'étape 1.
 
 | Sous-étape | Contenu | État | Plan |
 | --- | --- | --- | --- |
-| 0e.1 | Saisie du coup : pion à destination unique joué en un toucher, coup à valider et annulable demi-coup par demi-coup, dés joués marqués, dés des deux côtés touchables, videau confirmé ; pages de test du moteur retirées | 🔄 | `plans/2026-11-03-saisie-du-coup.md` |
-| 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 (nouvel ADR pour le format) | ⏳ | |
-| 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 | ⏳ | |
+| 0e.4 | Une adresse par écran (aide, glossaire, menu, mes parties…) et par position, par de vrais liens (ADR 0013 amendé) | ⏳ | `plans/2026-11-03-position-dans-l-adresse.md` |
+| 0e.5 | Page d'accueil, installation en un toucher (« Ajouter à l'écran d'accueil », proposée par l'app), tutoriel des règles très didactique avec plateaux illustrés, aide réécrite sur un ton plus humain ; textes à valider par Pierre | ⏳ | `plans/2026-11-03-accueil-tutoriel-aide.md` |
 
 ## Étapes suivantes
 

docs/identite/charte/README.md

@@ -14,6 +14,8 @@ 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` |

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.

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",

docs/journal.md

@@ -136,3 +136,30 @@ Une entrée datée par session : ce qui a été fait, décidé, et la suite.
 
 **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,61 @@
+# 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.
+
+Chaque écran (accueil, étapes du tutoriel, onglets et questions de l'aide) a son adresse et s'ouvre par un vrai lien, selon l'amendement de l'ADR 0013 ; le routeur vient de 0e.4.
+
+`make lint`, `make test` et `make test-browser` doivent passer. Aucune nouvelle dépendance.
+
+## Critères de réussite
+
+- 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-conseil-du-maitre.md

@@ -0,0 +1,60 @@
+# Conseil du maître (1d)
+
+- **Date** : 2026-11-03
+- **Étape** : 1d (`docs/etape-1.md`)
+- **Statut** : prévu (après 1c)
+- **Exécutant** : sous-agent general-purpose, dans un worktree
+
+## Objectif
+
+Le coach bienveillant, « mis en avant mais discret » (Pierre, 2026-11-03) :
+après chaque coup et chaque décision de videau du joueur, jamais avant
+(ADR 0011), une appréciation et une phrase du maître fondées sur les chiffres
+du moteur.
+
+## Références
+
+- ADR 0011 ; maquette « conseil du maître après le coup » du canevas
+  https://claude.ai/artifact/CQw6vbDpi6XQqVWQa4sANe ; règles de la charte
+  (`docs/identite/charte/`, dont interaction.md) ; la ligne réservée de 44 px
+  de la révision UX.
+- Moteur : `analyseMove`, `analyseCube`, `luck`, seuils `SKILL_THRESHOLDS`
+  (gnubg : 0,03 / 0,06 / 0,12).
+
+## Consignes
+
+1. **Analyse en arrière-plan** : après la validation d'un coup (ou une
+   décision de videau), l'analyse à 2 plis part dans le Worker sans retarder le
+   tour de l'ordinateur ; son résultat est rattaché au coup dans le journal
+   (événement d'analyse rétrocompatible, ou cache séparé justifié) pour servir
+   au bilan (1e) sans recalcul.
+2. **Ligne du maître** : icône d'appréciation, mot en couleur (« Bon coup. »,
+   « Imprécision. », « Erreur. », « Gaffe. » : correspondance avec les seuils
+   de gnubg documentée), phrase courte en italique, chevron. Toucher ouvre la
+   feuille d'explication : coup joué et meilleur coup montrés sur le plateau
+   (pions animés, ADR 0011 « comparaison visuelle »), écart d'équité seulement
+   sur demande, lien vers la fiche du glossaire du concept en jeu si le moteur
+   permet de le déterminer, sinon rien.
+3. **Phrases du maître** : gabarits versionnés en français dans une source
+   unique sous `docs/` (CC BY-SA 4.0), ton encourageant, jamais culpabilisant ;
+   elles ne citent que des faits du moteur (coup recommandé, rang, pions
+   frappés, écart) : aucune explication inventée. Première version à faire
+   valider par Pierre (ton).
+4. **Discret** : rien n'apparaît pendant que le joueur réfléchit ; la ligne
+   s'efface à l'action suivante ; désactivable (réglage de 1c et menu).
+5. **Videau** : même traitement pour doubler, ne pas doubler, prendre, passer.
+6. Scénarios Gherkin (bon coup, erreur avec meilleur coup montré, conseil
+   désactivé, décision de videau commentée) avec positions et dés imposés ;
+   tests unitaires des gabarits (chaque gabarit rendu sur des analyses réelles
+   du moteur). `make lint`, `make test`, `make test-browser`, captures pour la
+   recette design.
+
+## Critères de réussite
+
+Après une erreur volontaire dans une position connue, la ligne du maître dit
+« Erreur. », nomme le coup recommandé par le moteur et le montre sur demande ;
+le tour de l'ordinateur n'est pas retardé ; les trois commandes passent.
+
+## Résultat
+
+À remplir à la clôture.

docs/plans/2026-11-03-match-et-reglages.md

@@ -0,0 +1,47 @@
+# Match, niveaux et réglages (1c)
+
+- **Date** : 2026-11-03
+- **Étape** : 1c (`docs/etape-1.md`)
+- **Statut** : prévu (après la révision UX et 1b)
+- **Exécutant** : sous-agent general-purpose, dans un worktree
+
+## Objectif
+
+Choisir sa partie : partie libre ou match en N points, avec les règles de
+Crawford et de Jacoby, contre l'ordinateur au niveau voulu.
+
+## Consignes
+
+ADR 0007, 0008. Le moteur expose depuis 1a les niveaux de gnubg
+(`levelMove`, `levelCubeDecision`) et accepte les matchs dans son API C.
+
+1. **Domaine** : longueur de match, score, règle de Crawford (partie Crawford
+   et suivantes, calculées par le moteur via le Match ID), règle de Jacoby en
+   partie libre ; enchaînement des manches d'un match jusqu'à sa fin ; le
+   journal d'événements reste rétrocompatible (les parties existantes se
+   rechargent).
+2. **Adaptateur** : `EngineCube` étendu au match (score, longueur, Crawford)
+   ou remplacé par le Match ID, sans casser les appels existants.
+3. **Niveau de l'ordinateur** : ses coups et ses décisions de videau au niveau
+   choisi. Reprendre de `ComputerTurn` (gnubg, `play.c`) les règles de
+   déroulement non reprises en 1a : pré-filtre « fenêtre de marché » et double
+   facultatif à 0 pli, avec citation des sources.
+4. **Écran de nouvelle partie** (maquettes de la session « identité » si
+   disponibles, sinon sobre et conforme à la charte) : type de partie, niveau
+   (noms montrés au joueur à proposer simplement : Débutant, Amateur,
+   Intermédiaire, Avancé, Expert, Champion — correspondance avec les niveaux
+   de gnubg documentée), conseil du maître activé ou non. Par défaut : partie
+   libre, Intermédiaire, conseil activé. Le réglage est mémorisé.
+5. Affichage du score de match et de la partie Crawford sur le plateau.
+6. Scénarios Gherkin (match en 3 points jusqu'au bout avec dés imposés,
+   Crawford, Jacoby) et fiches du glossaire (match, Crawford, Jacoby si
+   absentes). `make lint`, `make test`, `make test-browser` (un match court).
+
+## Critères de réussite
+
+Un match en 3 points se joue jusqu'au bout, au niveau choisi, avec Crawford
+appliqué ; les trois commandes passent.
+
+## Résultat
+
+À remplir à la clôture.

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

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

@@ -1,63 +0,0 @@
-# Révision UX : portrait stable, compte de points, menu, paysage « plateau = écran »
-
-- **Date** : 2026-11-03
-- **Étape** : 0e.3 (feuille de route)
-- **Statut** : prévu (après la fusion de 0e.1, qui touche les mêmes fichiers)
-- **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/plans/2026-11-03-saisie-du-coup.md

@@ -1,65 +0,0 @@
-# Saisie du coup, videau confirmé, pages de test du moteur retirées
-
-- **Date** : 2026-11-03
-- **Étape** : 0e (retours du premier test de Pierre sur le téléphone)
-- **Statut** : en cours
-- **Exécutant** : sous-agent general-purpose, dans un worktree
-
-## Objectif
-
-Rendre la saisie du coup aussi confortable que dans CBG, d'après les retours de
-Pierre du 2026-11-03 (points 1, 6, 7, 8, 9 et 11 de son message), et retirer du
-site les pages de test du moteur.
-
-## Consignes
-
-Règles de code : ADR 0007 (domaine pur, aucune règle de backgammon
-réimplémentée : tout vient du moteur via le domaine). Glossaire et scénarios :
-ADR 0008 (chaque comportement visible a son scénario Gherkin dans
-`docs/scenarios/`, chaque nouveau terme sa fiche). Aucune nouvelle dépendance.
-
-1. **Pages de test du moteur retirées** (« supprimer la partie test du moteur
-   totalement ») : plus de `/moteur/` sur le site ni dans `make deploy`.
-   `make bench` (mesure sous Node) reste : déplacer ce dont il a besoin hors de
-   `web/`. Mettre à jour `tests/test_site.sh`, le Makefile, `deploy/`, le
-   service worker, `docs/guide-test-etape-0.md` et ajouter un amendement daté à
-   l'ADR 0009.
-2. **Un seul coup possible, le pion avance** : quand le joueur touche un pion
-   (ou une case) et qu'une seule case d'arrivée est possible pour ce pion, le
-   demi-coup est joué aussitôt, sans second toucher. S'il y en a plusieurs, la
-   sélection actuelle reste.
-3. **Coup à valider, annulable** : quand tous les demi-coups sont joués (ou
-   qu'aucun autre n'est possible), le coup n'est pas envoyé tout de suite. Le
-   joueur le valide en touchant ses dés (ou un bouton « Valider »). Tant qu'il
-   ne l'a pas validé, « Annuler » défait le dernier demi-coup, un par un. Le
-   journal d'événements ne reçoit `MovePlayed` qu'à la validation.
-4. **Dés joués marqués** : chaque dé déjà utilisé par un demi-coup est
-   visiblement estompé. Pour un double, quatre dés, marqués un par un.
-5. **Dés de l'adversaire touchables** : toucher la zone des dés de l'un ou
-   l'autre côté du plateau lance les dés quand le joueur peut lancer (et valide
-   le coup en attente de validation).
-6. **Confirmation du videau** : toucher le videau ou « Doubler » ouvre une
-   confirmation courte (« Doubler à 2 ? L'ordinateur pourra prendre ou
-   passer. » : Doubler / Annuler) avant d'envoyer le double.
-
-Tests : scénarios Gherkin mis à jour ou ajoutés (validation du coup, annulation
-demi-coup par demi-coup, confirmation du videau), tests unitaires, et
-`tests/browser/play.mjs` adapté (Playwright est validé par Pierre). Lancer
-`make lint`, `make test` et `make test-browser`.
-
-Rapporter : ce qui a été fait, les écarts, les résultats des trois commandes,
-et un brouillon de description de MR (7 sections, voir `docs/organisation.md`).
-Commits fréquents sur la branche du worktree ; ne pas pousser, ne pas ouvrir de
-MR : la session principale s'en charge.
-
-## Critères de réussite
-
-- `make lint`, `make test` et `make test-browser` passent.
-- Dans le navigateur : un pion à destination unique avance en un toucher ; un
-  coup complet attend la validation ; « Annuler » défait un demi-coup à la
-  fois ; les dés joués sont estompés ; le videau demande confirmation.
-- `https://…/moteur/` n'existe plus dans le site construit (`make site`).
-
-## Résultat
-
-À remplir à la clôture.

docs/scenarios/README.md

@@ -47,3 +47,4 @@ Règles d'écriture :
 | Fichier | Tâche | Depuis |
 | --- | --- | --- |
 | [jouer-une-partie.feature](jouer-une-partie.feature) | Jouer une partie contre l'ordinateur | Étape 0d |
+| [regler-l-application.feature](regler-l-application.feature) | Régler l'application (menu) | Étape 0e |

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

docs/scenarios/regler-l-application.feature

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

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).
@@ -23,13 +25,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.sh

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

tests/site-image.sh

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

tests/test_site.sh

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

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

web/moteur/bench-page.mjs

@@ -1,99 +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),
-        analyseMove: (...args) => engine.analyseMove(...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,68 +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)),
-        analyseMove: (positionId, matchId, dice, playedPositionId, ply) =>
-            run(commands.analyseMove(positionId, matchId, dice, playedPositionId, 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);
-}