Retours du test sur téléphone : feuille de route, plans, Playwright validé

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

CREDITS.md

@@ -27,8 +27,15 @@ Les contenus pédagogiques (leçons, textes) sont sous licence CC BY-SA 4.0.
   (Juan Pablo del Peral, Huerta Tipográfica), licence
   SIL Open Font License 1.1 — https://github.com/google/fonts/tree/main/ofl/alegreyasans
   Ses tracés (graisse Bold) composent le logotype, dans `docs/identite/logo/`.
+  Cinq graisses (Regular, Italic, Medium, Bold, ExtraBold) sont embarquées
+  dans l'application (`web/fonts/`, avec la licence `OFL.txt`), réduites aux
+  caractères latins et converties en woff2 par fontTools (143 Ko en tout).
+- **Logo et icônes d'Ustagammon** (`docs/identite/logo/`), licence
+  CC BY-SA 4.0 ; publiés dans `icons/` du site (favicon, icônes de la PWA,
+  logo de la barre haute).
 - **fontTools** (MIT), utilisé par `docs/identite/generer-logo.py` pour
-  convertir le texte du logotype en tracés.
+  convertir le texte du logotype en tracés, et pour produire les fichiers
+  woff2 de la police ; avec **Brotli** (MIT), qui les compresse.
 
 ## Outils de développement
 

Makefile

@@ -115,9 +115,17 @@ deploy: site ## Sert l'application sur le réseau local (Ctrl+C pour arrêter)
 
 deploy-web: deploy ## Comme make deploy (ancien nom, étape 0b)
 
+# Fichiers de docs/identite/logo/ publiés dans icons/ (manifeste, favicon,
+# barre haute).
+SITE_ICONS := icone.svg icone-192.png icone-512.png icone-maskable-192.png icone-maskable-512.png \
+	apple-touch-icon-180.png favicon.svg favicon-32.png \
+	logo-horizontal-couleur.svg logo-horizontal-sombre.svg symbole-couleur.svg symbole-sombre.svg
+
 # Le site tel qu'il sera publié, reconstruit entièrement à chaque appel :
-# - web/ à la racine : la page de l'application, son style, le manifeste, les
-#   icônes, le Web Worker du moteur, et les pages de test sous moteur/ ;
+# - 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/ ;
+# - sous icons/, le logo et les icônes de la charte, copiés depuis
+#   docs/identite/logo/ (une seule source, ADR 0010) ;
 # - l'application compilée (build/web/src/) sous app/ ;
 # - le moteur sous wasm/ ;
 # - les copies du glossaire et des scénarios sous docs/, lues par l'aide de
@@ -128,6 +136,8 @@ site: engine-wasm web ## Assemble le site publié dans build/site/
 	rm -rf $(BUILD_DIR)/site
 	mkdir -p $(BUILD_DIR)/site/wasm $(BUILD_DIR)/site/docs
 	cp -r web/. $(BUILD_DIR)/site/
+	mkdir -p $(BUILD_DIR)/site/icons
+	cp $(addprefix docs/identite/logo/,$(SITE_ICONS)) $(BUILD_DIR)/site/icons/
 	cp -r $(BUILD_DIR)/web/src $(BUILD_DIR)/site/app
 	cp $(BUILD_DIR)/wasm/engine.mjs $(BUILD_DIR)/wasm/engine.wasm $(BUILD_DIR)/wasm/engine.data \
 		$(BUILD_DIR)/wasm/positions.json $(BUILD_DIR)/site/wasm/

app/src/domain/game/game.ts

@@ -47,6 +47,20 @@ export interface SideBoards {
     readonly computer: BoardSide;
 }
 
+/**
+ * Un coup joué, demi-coup par demi-coup, pour le montrer : les plateaux
+ * successifs, tels que le moteur les donne.
+ */
+export interface MoveSteps {
+    readonly side: Side;
+    readonly halfMoves: readonly HalfMove[];
+    /** boards[0] : avant le coup ; boards[i + 1] : après le demi-coup i. */
+    readonly boards: readonly SideBoards[];
+    /** hits[i] : le demi-coup i a frappé un pion adverse, envoyé sur la barre
+     * (lu sur les plateaux du moteur, pas déduit des règles). */
+    readonly hits: readonly boolean[];
+}
+
 export interface GameOptions {
     /** Source des dés ; le hasard ordinaire par défaut. */
     readonly dice?: DiceSource;
@@ -141,14 +155,45 @@ export class Game {
         const state = this.state;
         // La position est vue du camp qui a la main (le joueur pendant le jet
         // d'ouverture : la position de départ est la même pour les deux).
-        const onRoll = state.turn ?? "player";
-        const board = await this.#engine.board(
-            this.displayedPosition,
-            engineCube(state.cube, onRoll),
+        return this.#sideBoards(this.displayedPosition, state.turn ?? "player", state.cube);
+    }
+
+    /**
+     * Le dernier coup joué de la partie, demi-coup par demi-coup (null s'il
+     * n'y en a pas). Les plateaux intermédiaires viennent du moteur
+     * (checkHalfMoves, puis board) : aucune règle n'est rejouée ici.
+     */
+    async lastMoveSteps(): Promise<MoveSteps | null> {
+        const events = this.events;
+        const index = events.findLastIndex((e) => e.type === "MovePlayed");
+        const played = events[index];
+        if (played?.type !== "MovePlayed") {
+            return null;
+        }
+        // L'état juste avant le coup : la position vue de celui qui joue, et
+        // son jet.
+        const before = replay(events.slice(0, index));
+        const roll = rollToPlay(before);
+        const positions = [before.position];
+        for (let i = 1; i <= played.halfMoves.length; i++) {
+            const check = await this.#engine.checkHalfMoves(
+                before.position,
+                roll,
+                played.halfMoves.slice(0, i),
+            );
+            if (check.position === null) {
+                throw new Error("coup enregistré refusé par le moteur");
+            }
+            positions.push(check.position);
+        }
+        const boards = await Promise.all(
+            positions.map((p) => this.#sideBoards(p, played.side, before.cube)),
         );
-        return onRoll === "player"
-            ? { player: board.onRoll, computer: board.opponent }
-            : { player: board.opponent, computer: board.onRoll };
+        const opponent = otherSide(played.side);
+        const hits = played.halfMoves.map(
+            (_, i) => (boards[i + 1]?.[opponent].bar ?? 0) > (boards[i]?.[opponent].bar ?? 0),
+        );
+        return { side: played.side, halfMoves: played.halfMoves, boards, hits };
     }
 
     /**
@@ -199,15 +244,32 @@ export class Game {
 
     // ------------------------------------------------------------- Joueur
 
-    /** Le joueur lance les dés. S'il ne peut pas jouer, son tour passe. */
+    /** Le joueur lance les dés. S'il ne peut pas jouer (cannotMove), son
+     * tour ne passe qu'une fois qu'il l'a constaté (skipTurn). */
     async roll(): Promise<void> {
-        const state = this.#expect("player", "rolling");
-        const roll = rollDice(this.#dice);
-        this.#append({ type: "DiceRolled", side: "player", roll });
-        const moves = await this.#engine.legalMoves(state.position, roll);
-        if (moves.length === 0) {
-            await this.#playMove("player", [], null);
+        this.#expect("player", "rolling");
+        this.#append({ type: "DiceRolled", side: "player", roll: rollDice(this.#dice) });
+    }
+
+    /** Le joueur a lancé les dés, mais le moteur ne lui donne aucun coup
+     * légal : il ne peut que laisser passer son tour. */
+    async cannotMove(): Promise<boolean> {
+        const state = this.state;
+        if (state.turn !== "player" || state.phase !== "moving") {
+            return false;
         }
+        const moves = await this.#engine.legalMoves(state.position, rollToPlay(state));
+        return moves.length === 0;
+    }
+
+    /** Le joueur, qui ne peut pas jouer son jet, laisse passer son tour.
+     * Erreur s'il a un coup possible. */
+    async skipTurn(): Promise<void> {
+        this.#expect("player", "moving");
+        if (!(await this.cannotMove())) {
+            throw new Error("vous avez un coup possible : jouez-le");
+        }
+        await this.#playMove("player", [], null);
     }
 
     /**
@@ -325,6 +387,14 @@ export class Game {
         this.#journal = appendEvent(this.#journal, event);
     }
 
+    /** Le plateau d'une position vue de onRoll, décodé par le moteur. */
+    async #sideBoards(position: PositionId, onRoll: Side, cube: Cube): Promise<SideBoards> {
+        const board = await this.#engine.board(position, engineCube(cube, onRoll));
+        return onRoll === "player"
+            ? { player: board.onRoll, computer: board.opponent }
+            : { player: board.opponent, computer: board.onRoll };
+    }
+
     /** Vérifie que c'est bien à side d'agir, dans l'une des phases. */
     #expect(side: Side, ...phases: GameState["phase"][]): GameState {
         const state = this.state;

app/src/ui/app.ts

@@ -10,14 +10,17 @@
 // son tour ; le plateau est ensuite redessiné à partir de l'état de la partie.
 
 import type { GameJournal } from "../domain/game/events.js";
-import type { Game, SideBoards } from "../domain/game/game.js";
+import type { Game, MoveSteps, SideBoards } from "../domain/game/game.js";
 import { formatHalfMoves, type HalfMove } from "../domain/game/position.js";
-import type { Side } from "../domain/game/side.js";
-import { boardModel, moveTargets, type Place, placeOf } from "./board-model.js";
-import { renderBoard, type ShownDie } from "./board-view.js";
+import { otherSide, type Side } from "../domain/game/side.js";
+import { boardModel, moveTargets, moveTrace, type Place, placeOf } from "./board-model.js";
+import { checkerSpot, NO_MARKS, renderBoard, type ShownDie, slideChecker } from "./board-view.js";
 import { showHelp } from "./help.js";
 import { TEXTS } from "./texts.js";
 
+/** Durée du glissement d'un pion, pour chaque demi-coup de l'ordinateur. */
+const SLIDE_MS = 400;
+
 export interface AppOptions {
     /** Résolue quand le moteur est chargé, rejetée s'il ne peut pas l'être. */
     readonly engineReady: Promise<unknown>;
@@ -49,6 +52,8 @@ export function startApp(options: AppOptions): void {
         take: byId<HTMLButtonElement>("take"),
         drop: byId<HTMLButtonElement>("drop"),
         cancel: byId<HTMLButtonElement>("cancel"),
+        skip: byId<HTMLButtonElement>("skip"),
+        replay: byId<HTMLButtonElement>("replay"),
         again: byId<HTMLButtonElement>("again"),
         newGame: byId<HTMLButtonElement>("new-game"),
         helpButton: byId<HTMLButtonElement>("help-button"),
@@ -63,6 +68,9 @@ export function startApp(options: AppOptions): void {
     ui.take.textContent = TEXTS.take;
     ui.drop.textContent = TEXTS.drop;
     ui.cancel.textContent = TEXTS.cancel;
+    ui.skip.textContent = TEXTS.skip;
+    ui.replay.textContent = TEXTS.replay;
+    ui.replay.title = TEXTS.replayTitle;
     ui.again.textContent = TEXTS.newGame;
     ui.newGame.textContent = TEXTS.newGame;
     ui.helpButton.textContent = TEXTS.help;
@@ -74,22 +82,35 @@ export function startApp(options: AppOptions): void {
     let targets = new Map<Place, Map<Place, HalfMove>>();
     let selected: Place | null = null;
     let canDouble = false;
+    // Le joueur a lancé les dés mais ne peut pas jouer : il doit continuer.
+    let stuck = false;
     let busy = true;
     let info = "";
+    // Le dernier coup de l'ordinateur, montré (traces, bouton « Revoir »)
+    // jusqu'à la prochaine action du joueur ; null : rien à montrer.
+    let shownMove: MoveSteps | null = null;
+    // Pendant l'animation d'un coup, render() laisse le plateau à l'animation.
+    let animating = false;
 
     // ------------------------------------------------------------ Dessin
 
-    /** Recalcule ce qui demande le moteur, puis redessine. */
-    async function refresh(): Promise<void> {
+    /** Recalcule ce qui demande le moteur, sans redessiner. */
+    async function update(): Promise<void> {
         if (game === null) {
             return;
         }
         sides = await game.displayedBoard();
         targets = moveTargets(await game.nextHalfMoves());
         canDouble = await game.canDouble();
+        stuck = await game.cannotMove();
         if (selected !== null && !targets.has(selected)) {
             selected = null;
         }
+    }
+
+    /** Recalcule ce qui demande le moteur, puis redessine. */
+    async function refresh(): Promise<void> {
+        await update();
         render();
     }
 
@@ -99,30 +120,59 @@ export function startApp(options: AppOptions): void {
         }
         const state = game.state;
         const model = boardModel(sides);
-        renderBoard(ui.board, model, {
-            dice: shownDice(game),
-            cube: state.cube,
-            movable: new Set(targets.keys()),
-            selected,
-            targets: new Set(selected === null ? [] : (targets.get(selected)?.keys() ?? [])),
-            lastMove: lastComputerMove(game),
-        });
+        if (!animating) {
+            renderBoard(ui.board, model, {
+                dice: shownDice(game, stuck),
+                cube: state.cube,
+                movable: new Set(targets.keys()),
+                selected,
+                targets: new Set(selected === null ? [] : (targets.get(selected)?.keys() ?? [])),
+                trace:
+                    shownMove === null
+                        ? null
+                        : moveTrace(shownMove.side, shownMove.halfMoves, shownMove.hits),
+                // Mêmes conditions que les boutons « Lancer les dés » et
+                // « Doubler ».
+                canRoll: !busy && state.turn === "player" && state.phase === "rolling",
+                canDouble: !busy && canDouble,
+            });
+        }
         ui.pips.textContent = TEXTS.pipCounts(model.pipCount.player, model.pipCount.computer);
-        ui.info.textContent = info;
-        ui.prompt.textContent = prompt(game, selected !== null, canDouble);
+        // Un jet sans coup possible reste annoncé jusqu'à l'action suivante,
+        // même après un rechargement de la page.
+        if (stuck && state.roll !== null) {
+            ui.info.textContent = TEXTS.youCannotMove(state.roll);
+        } else if (computerCouldNotMove(game)) {
+            ui.info.textContent = TEXTS.computerCannotMove(rollBefore(game));
+        } else {
+            ui.info.textContent = info;
+        }
+        ui.prompt.textContent = stuck
+            ? TEXTS.pressContinue
+            : prompt(game, selected !== null, canDouble);
         ui.prompt.classList.toggle("thinking", state.turn === "computer" && isPlaying(game));
 
         const player = state.turn === "player";
         show(ui.roll, player && state.phase === "rolling");
         show(ui.double, player && state.phase === "rolling");
         ui.double.disabled = busy || !canDouble;
-        show(ui.cancel, player && state.phase === "moving");
+        show(ui.cancel, player && state.phase === "moving" && !stuck);
+        show(ui.skip, stuck);
         ui.cancel.disabled = busy || game.pendingHalfMoves.length === 0;
         const doubled = state.turn === "computer" && state.phase === "doubled";
         show(ui.take, doubled);
         show(ui.drop, doubled);
         show(ui.again, state.phase === "over");
-        for (const button of [ui.roll, ui.take, ui.drop, ui.again, ui.newGame]) {
+        show(ui.replay, shownMove !== null);
+        for (const button of [
+            ui.roll,
+            ui.take,
+            ui.drop,
+            ui.skip,
+            ui.replay,
+            ui.again,
+            ui.newGame,
+        ]) {
             button.disabled = busy;
         }
         // Pour le style et pour les tests dans un navigateur : l'écran
@@ -142,14 +192,73 @@ export function startApp(options: AppOptions): void {
         }
     }
 
-    /** L'ordinateur joue tant que c'est son tour (il s'arrête s'il double). */
-    async function computerTurns(): Promise<void> {
+    /** L'ordinateur joue tant que c'est son tour (il s'arrête s'il double).
+     * Son dernier coup, s'il est la dernière chose jouée, devient le coup à
+     * montrer. Renvoie vrai si l'ordinateur a joué. */
+    async function computerTurns(): Promise<boolean> {
+        let played = false;
         while (game !== null && game.state.turn === "computer" && isPlaying(game)) {
             await refresh();
             const start = performance.now();
             await game.playComputerTurn();
             info = describeComputerTurn(game, performance.now() - start);
             save();
+            played = true;
+        }
+        if (game !== null) {
+            shownMove = await computerMoveToShow(game);
+        }
+        return played;
+    }
+
+    /**
+     * Fait glisser les pions du coup de l'ordinateur, un demi-coup après
+     * l'autre, à partir des plateaux intermédiaires donnés par le domaine. Rien
+     * si le système demande moins d'animations : les traces suffisent.
+     */
+    async function animateMove(steps: MoveSteps): Promise<void> {
+        if (game === null || window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+            return;
+        }
+        const decor = { dice: shownDice(game, false), cube: game.state.cube, ...NO_MARKS };
+        const draw = (i: number) => {
+            const boards = steps.boards[i];
+            if (boards !== undefined) {
+                renderBoard(ui.board, boardModel(boards), decor);
+            }
+        };
+        animating = true;
+        render(); // messages et boutons ; le plateau est à l'animation
+        try {
+            for (const [i, halfMove] of steps.halfMoves.entries()) {
+                const from = placeOf(steps.side, halfMove.from);
+                const to = placeOf(steps.side, halfMove.to);
+                draw(i);
+                const start = checkerSpot(ui.board, from);
+                const victim = steps.hits[i] === true ? checkerSpot(ui.board, to) : null;
+                draw(i + 1);
+                await Promise.all([
+                    start && slideChecker(ui.board, to, start, SLIDE_MS),
+                    victim &&
+                        slideChecker(ui.board, `bar-${otherSide(steps.side)}`, victim, SLIDE_MS),
+                ]);
+            }
+        } finally {
+            animating = false;
+        }
+    }
+
+    /** Rend la main au joueur : recalcule, anime le coup à montrer (si
+     * animate), puis redessine avec ses traces. */
+    async function settle(animate: boolean): Promise<void> {
+        try {
+            await update();
+            if (animate && shownMove !== null) {
+                await animateMove(shownMove);
+            }
+        } finally {
+            busy = false;
+            render();
         }
     }
 
@@ -162,6 +271,7 @@ export function startApp(options: AppOptions): void {
         busy = true;
         selected = null;
         targets = new Map();
+        shownMove = null;
         render();
         try {
             await action(game);
@@ -170,8 +280,7 @@ export function startApp(options: AppOptions): void {
         } catch (error) {
             info = TEXTS.actionFailed(error instanceof Error ? error.message : String(error));
         } finally {
-            busy = false;
-            await refresh();
+            await settle(true);
         }
     }
 
@@ -186,10 +295,13 @@ export function startApp(options: AppOptions): void {
         act(async (g) => {
             info = "";
             await g.roll();
-            const last = g.events.at(-1);
-            if (last?.type === "MovePlayed" && last.halfMoves.length === 0) {
-                info = TEXTS.youCannotMove(rollBefore(g));
-            }
+        });
+
+    // Aucun coup possible : le joueur laisse passer son tour.
+    ui.skip.onclick = () =>
+        act(async (g) => {
+            info = "";
+            await g.skipTurn();
         });
 
     ui.double.onclick = () =>
@@ -214,6 +326,7 @@ export function startApp(options: AppOptions): void {
         if (!busy && game !== null) {
             game.cancelHalfMoves();
             selected = null;
+            shownMove = null;
             void refresh();
         }
     };
@@ -234,6 +347,16 @@ export function startApp(options: AppOptions): void {
     // Toucher le plateau : un pion jouable, puis une de ses cases d'arrivée.
     ui.board.addEventListener("click", (event) => {
         const target = event.target as Element | null;
+        // Toucher les dés en attente ou le videau : comme leurs boutons.
+        const action = target?.closest("[data-action]")?.getAttribute("data-action");
+        if (action === "roll" && !ui.roll.hidden && !ui.roll.disabled) {
+            ui.roll.click();
+            return;
+        }
+        if (action === "double" && !ui.double.hidden && !ui.double.disabled) {
+            ui.double.click();
+            return;
+        }
         const place = target?.closest("[data-place]")?.getAttribute("data-place") as Place | null;
         if (busy || place == null) {
             return;
@@ -247,9 +370,22 @@ export function startApp(options: AppOptions): void {
             return;
         }
         selected = targets.has(place) && place !== selected ? place : null;
+        if (selected !== null) {
+            shownMove = null; // toucher un pion : le coup de l'ordinateur s'efface
+        }
         render();
     });
 
+    // Revoir le dernier coup de l'ordinateur, puis ses traces.
+    ui.replay.onclick = async () => {
+        if (busy || shownMove === null) {
+            return;
+        }
+        busy = true;
+        selected = null;
+        await settle(true);
+    };
+
     ui.helpButton.onclick = () => {
         ui.game.hidden = true;
         ui.help.hidden = false;
@@ -264,7 +400,16 @@ export function startApp(options: AppOptions): void {
     // ---------------------------------------------------------- Démarrage
 
     ui.prompt.textContent = TEXTS.loading;
-    for (const button of [ui.roll, ui.double, ui.take, ui.drop, ui.cancel, ui.again]) {
+    for (const button of [
+        ui.roll,
+        ui.double,
+        ui.take,
+        ui.drop,
+        ui.cancel,
+        ui.skip,
+        ui.replay,
+        ui.again,
+    ]) {
         button.hidden = true;
     }
     ui.newGame.disabled = true;
@@ -276,12 +421,13 @@ export function startApp(options: AppOptions): void {
                 save();
             }
             // Comme après une action du joueur : l'ordinateur joue si c'est
-            // à lui (partie nouvelle ou reprise pendant son tour).
+            // à lui (partie nouvelle ou reprise pendant son tour). Une partie
+            // reprise juste après son coup le montre, sans l'animer.
+            let played = false;
             try {
-                await computerTurns();
+                played = await computerTurns();
             } finally {
-                busy = false;
-                await refresh();
+                await settle(played);
             }
         },
         (error: unknown) => {
@@ -307,29 +453,36 @@ function rollBefore(game: Game): readonly number[] {
 }
 
 /** Les dés à montrer : le dernier jet, de la couleur de qui l'a lancé
- * (au jet d'ouverture, un dé chacun). */
-function shownDice(game: Game): ShownDie[] {
+ * (au jet d'ouverture, un dé chacun). Ils sont barrés si le jet ne permet
+ * aucun coup : le joueur est bloqué (stuck), ou l'ordinateur vient de passer
+ * son tour sans bouger. */
+function shownDice(game: Game, stuck: boolean): ShownDie[] {
     const rolled = game.events.findLast((e) => e.type === "DiceRolled");
     if (rolled?.type !== "DiceRolled") {
         return [];
     }
+    const blocked = stuck || computerCouldNotMove(game);
     const sides: Side[] =
         rolled.side === null ? ["player", "computer"] : [rolled.side, rolled.side];
-    return rolled.roll.map((value, i) => ({ value, side: sides[i] ?? "player" }));
+    return rolled.roll.map((value, i) => ({ value, side: sides[i] ?? "player", blocked }));
 }
 
-/** Les cases de départ et d'arrivée du dernier coup, s'il est de
- * l'ordinateur. */
-function lastComputerMove(game: Game): Set<Place> {
-    const played = game.events.findLast((e) => e.type === "MovePlayed");
-    const places = new Set<Place>();
-    if (played?.type === "MovePlayed" && played.side === "computer") {
-        for (const h of played.halfMoves) {
-            places.add(placeOf("computer", h.from));
-            places.add(placeOf("computer", h.to));
-        }
+/** La dernière chose jouée (fin de partie mise à part) est un tour de
+ * l'ordinateur qui n'a pas pu jouer son jet. */
+function computerCouldNotMove(game: Game): boolean {
+    const last = game.events.findLast((e) => e.type !== "GameEnded");
+    return last?.type === "MovePlayed" && last.side === "computer" && last.halfMoves.length === 0;
+}
+
+/** Le dernier coup de l'ordinateur, demi-coup par demi-coup, s'il est la
+ * dernière chose jouée (fin de partie mise à part) et qu'il a déplacé des
+ * pions ; sinon null. */
+async function computerMoveToShow(game: Game): Promise<MoveSteps | null> {
+    const last = game.events.findLast((e) => e.type !== "GameEnded");
+    if (last?.type !== "MovePlayed" || last.side !== "computer" || last.halfMoves.length === 0) {
+        return null;
     }
-    return places;
+    return game.lastMoveSteps();
 }
 
 /** Ce qu'a fait l'ordinateur pendant son tour. */

app/src/ui/board-model.ts

@@ -82,6 +82,50 @@ export function moveTargets(halfMoves: readonly HalfMove[]): Map<Place, Map<Plac
     return targets;
 }
 
+/** Ce qui reste dessiné d'un coup une fois joué. */
+export interface MoveTrace {
+    /** Le camp qui a joué. */
+    readonly side: Side;
+    /** Une flèche par demi-coup, de sa case de départ à sa case d'arrivée. */
+    readonly arrows: readonly { readonly from: Place; readonly to: Place }[];
+    /** Par endroit, le nombre de pions arrivés et restés là (entourés). */
+    readonly landed: ReadonlyMap<Place, number>;
+    /** Par endroit, le nombre de pions partis (un pion fantôme chacun). */
+    readonly left: ReadonlyMap<Place, number>;
+    /** Le nombre de pions adverses frappés, envoyés sur la barre. */
+    readonly hits: number;
+}
+
+/**
+ * Les traces d'un coup de side : ses demi-coups, et pour chacun s'il a frappé.
+ * Un pion qui fait étape sur une case (13/7 7/4) n'y laisse ni fantôme ni
+ * cercle : seuls comptent le départ et l'arrivée de chaque pion.
+ */
+export function moveTrace(
+    side: Side,
+    halfMoves: readonly HalfMove[],
+    hits: readonly boolean[],
+): MoveTrace {
+    const balance = new Map<Place, number>();
+    const arrows = halfMoves.map((h) => {
+        const from = placeOf(side, h.from);
+        const to = placeOf(side, h.to);
+        balance.set(from, (balance.get(from) ?? 0) - 1);
+        balance.set(to, (balance.get(to) ?? 0) + 1);
+        return { from, to };
+    });
+    const landed = new Map<Place, number>();
+    const left = new Map<Place, number>();
+    for (const [place, n] of balance) {
+        if (n > 0) {
+            landed.set(place, n);
+        } else if (n < 0) {
+            left.set(place, -n);
+        }
+    }
+    return { side, arrows, landed, left, hits: hits.filter(Boolean).length };
+}
+
 /** Où se trouve une case sur le dessin : rangée du haut ou du bas, et
  * colonne de 0 (à gauche) à 11 (à droite), sans compter la barre. */
 export function pointSlot(number: number): { top: boolean; column: number } {

app/src/ui/board-view.ts

@@ -11,12 +11,15 @@
 
 import type { Cube } from "../domain/game/cube.js";
 import type { Side } from "../domain/game/side.js";
-import { type BoardModel, type Place, pointSlot } from "./board-model.js";
+import { type BoardModel, type MoveTrace, type Place, pointSlot } from "./board-model.js";
+import { TEXTS } from "./texts.js";
 
 /** Un dé affiché, de la couleur du camp qui l'a lancé. */
 export interface ShownDie {
     readonly value: number;
     readonly side: Side;
+    /** Le jet ne permet aucun coup : le dé est estompé et barré. */
+    readonly blocked: boolean;
 }
 
 /** Ce qui s'ajoute aux pions : dés, videau, mises en évidence. */
@@ -28,10 +31,29 @@ export interface BoardDecor {
     /** Le pion touché, dont on montre les cases d'arrivée. */
     readonly selected: Place | null;
     readonly targets: ReadonlySet<Place>;
-    /** Les cases de départ et d'arrivée du dernier coup de l'ordinateur. */
-    readonly lastMove: ReadonlySet<Place>;
+    /** Les traces du dernier coup de l'ordinateur, tant qu'on les montre. */
+    readonly trace: MoveTrace | null;
+    /** Le joueur peut lancer les dés : ses dés en attente se touchent. */
+    readonly canRoll: boolean;
+    /** Le joueur peut doubler : le videau se touche. */
+    readonly canDouble: boolean;
 }
 
+/** Ce qui ne s'ajoute pas aux pions pendant l'animation d'un coup. */
+export const NO_MARKS = {
+    movable: new Set<Place>(),
+    selected: null,
+    targets: new Set<Place>(),
+    trace: null,
+    canRoll: false,
+    canDouble: false,
+} as const;
+
+/** Taille minimale d'une cible à toucher, en unités du dessin : au moins
+ * 44 px sur un téléphone de 360 px de large, où le plateau en fait 344
+ * (640 unités). */
+const MIN_TARGET = 88;
+
 // Géométrie, en unités du viewBox (le SVG s'adapte à la largeur de l'écran).
 const WIDTH = 640;
 const HEIGHT = 520;
@@ -73,10 +95,51 @@ function columnLeft(column: number): number {
     return column < 6 ? FRAME + column * POINT_WIDTH : RIGHT_HALF + (column - 6) * POINT_WIDTH;
 }
 
-/** Centre du i-ième pion d'une pile, depuis le bord du plateau. */
-function stackY(top: boolean, index: number): number {
-    const offset = RADIUS + 1 + index * STEP;
-    return top ? FRAME + offset : HEIGHT - FRAME - offset;
+/** Un point du dessin. */
+export interface Spot {
+    readonly x: number;
+    readonly y: number;
+}
+
+/**
+ * Centre du pion numéro index (0 : le premier posé) d'un endroit : sur une
+ * case, depuis le bord du plateau ; sur la barre, depuis le milieu (le
+ * joueur dans la moitié haute, où il rentre, l'ordinateur en bas) ; dans la
+ * sortie, une tranche de pion vu de profil (l'ordinateur en haut).
+ */
+function slotCenter(place: Place, index: number): Spot {
+    if (place === "bar-player" || place === "bar-computer") {
+        const offset = RADIUS + 4 + Math.min(index, MAX_STACK) * STEP;
+        return {
+            x: BAR_LEFT + BAR_WIDTH / 2,
+            y: place === "bar-player" ? MIDDLE - offset : MIDDLE + offset,
+        };
+    }
+    if (place === "off-player" || place === "off-computer") {
+        const y =
+            place === "off-computer"
+                ? FRAME + index * OFF_SLAB
+                : HEIGHT - FRAME - (index + 1) * OFF_SLAB;
+        return { x: TRAY_LEFT + TRAY_WIDTH / 2, y: y + OFF_SLAB / 2 };
+    }
+    const { top, column } = pointSlot(Number(place.slice(1)));
+    const offset = RADIUS + 1 + Math.min(index, MAX_STACK) * STEP;
+    return {
+        x: columnLeft(column) + POINT_WIDTH / 2,
+        y: top ? FRAME + offset : HEIGHT - FRAME - offset,
+    };
+}
+
+/** Le nombre de pions de side à un endroit. */
+function countAt(board: BoardModel, side: Side, place: Place): number {
+    if (place === `bar-${side}`) {
+        return board.bar[side];
+    }
+    if (place === `off-${side}`) {
+        return board.off[side];
+    }
+    const point = board.points.find((p) => p.place === place);
+    return point?.owner === side ? point.count : 0;
 }
 
 /** Redessine tout le plateau dans svg. */
@@ -91,7 +154,18 @@ export function renderBoard(svg: SVGSVGElement, board: BoardModel, decor: BoardD
     drawBar(svg, hits, board, decor);
     drawTray(svg, hits, board, decor);
     drawDice(svg, decor.dice);
-    drawCube(svg, decor.cube);
+    const cube = drawCube(svg, decor.cube);
+    if (decor.trace !== null) {
+        drawTrace(svg, board, decor.trace);
+    }
+    if (decor.canRoll) {
+        const center = waitingDice(svg);
+        addAction(hits, "roll", TEXTS.roll, center, 2 * DIE + 8 + MIN_TARGET / 2);
+    }
+    if (decor.canDouble) {
+        cube.classList.add("can-double");
+        addAction(hits, "double", TEXTS.double, cubeCenter(decor.cube), MIN_TARGET);
+    }
     // Les zones à toucher passent devant tout le reste.
     svg.append(hits);
 }
@@ -153,16 +227,7 @@ function drawPoint(
         });
     }
     if (point.owner !== null) {
-        const y = (i: number) => stackY(top, i);
-        drawStack(svg, point.owner, point.count, center, y, point.place, decor);
-    }
-    if (decor.lastMove.has(point.place)) {
-        add(svg, "circle", {
-            class: "last-move",
-            cx: center,
-            cy: top ? MIDDLE - 12 : MIDDLE + 12,
-            r: 5,
-        });
+        drawStack(svg, point.owner, point.count, point.place, decor);
     }
     addHit(hits, point.place, decor, {
         x: left,
@@ -172,14 +237,13 @@ function drawPoint(
     });
 }
 
-/** Une pile de pions, le i-ième centré en (cx, y(i)) ; le dernier porte le
- * nombre total s'il y en a trop pour les montrer tous. */
+/** Une pile de pions ; le dernier porte le nombre total s'il y en a trop
+ * pour les montrer tous. Le pion du dessus porte son endroit dans
+ * data-checker : c'est lui qu'on fait glisser quand un pion arrive. */
 function drawStack(
     svg: SVGSVGElement,
     side: Side,
     count: number,
-    cx: number,
-    y: (index: number) => number,
     place: Place,
     decor: BoardDecor,
 ): void {
@@ -192,15 +256,13 @@ function drawStack(
         } else if (last && decor.movable.has(place)) {
             classes.push("movable");
         }
-        const cy = y(i);
-        add(svg, "circle", { class: classes.join(" "), cx, cy, r: RADIUS });
+        const { x, y } = slotCenter(place, i);
+        const checker = add(svg, "circle", { class: classes.join(" "), cx: x, cy: y, r: RADIUS });
+        if (last) {
+            checker.setAttribute("data-checker", place);
+        }
         if (last && count > MAX_STACK) {
-            add(
-                svg,
-                "text",
-                { class: `checker-count count-${side}`, x: cx, y: cy + 6 },
-                String(count),
-            );
+            add(svg, "text", { class: `checker-count count-${side}`, x, y: y + 6 }, String(count));
         }
     }
 }
@@ -213,14 +275,10 @@ function drawBar(svg: SVGSVGElement, hits: Element, board: BoardModel, decor: Bo
         width: BAR_WIDTH,
         height: HEIGHT,
     });
-    const cx = BAR_LEFT + BAR_WIDTH / 2;
     // Les pions du joueur sur la barre entrent en haut à droite : on les met
     // dans la moitié haute, en partant du milieu ; ceux de l'ordinateur en bas.
     for (const side of ["player", "computer"] as const) {
-        const up = side === "player";
-        const y = (i: number) =>
-            up ? MIDDLE - RADIUS - 4 - i * STEP : MIDDLE + RADIUS + 4 + i * STEP;
-        drawStack(svg, side, board.bar[side], cx, y, `bar-${side}`, decor);
+        drawStack(svg, side, board.bar[side], `bar-${side}`, decor);
     }
     addHit(hits, "bar-player", decor, { x: BAR_LEFT, y: 0, width: BAR_WIDTH, height: MIDDLE });
 }
@@ -228,17 +286,12 @@ function drawBar(svg: SVGSVGElement, hits: Element, board: BoardModel, decor: Bo
 function drawTray(svg: SVGSVGElement, hits: Element, board: BoardModel, decor: BoardDecor): void {
     // Pions sortis, vus de profil : l'ordinateur en haut, le joueur en bas.
     for (const side of ["player", "computer"] as const) {
-        for (let i = 0; i < board.off[side]; i++) {
-            const y =
-                side === "computer" ? FRAME + i * OFF_SLAB : HEIGHT - FRAME - (i + 1) * OFF_SLAB;
-            add(svg, "rect", {
-                class: `checker checker-${side}`,
-                x: TRAY_LEFT + 4,
-                y: y + 1,
-                width: TRAY_WIDTH - 8,
-                height: OFF_SLAB - 2,
-                rx: 3,
-            });
+        const count = board.off[side];
+        for (let i = 0; i < count; i++) {
+            const slab = addSlab(svg, `checker checker-${side}`, slotCenter(`off-${side}`, i));
+            if (i === count - 1) {
+                slab.setAttribute("data-checker", `off-${side}`);
+            }
         }
     }
     if (decor.targets.has("off-player")) {
@@ -251,14 +304,6 @@ function drawTray(svg: SVGSVGElement, hits: Element, board: BoardModel, decor: B
             rx: 4,
         });
     }
-    if (decor.lastMove.has("off-computer")) {
-        add(svg, "circle", {
-            class: "last-move",
-            cx: TRAY_LEFT + TRAY_WIDTH / 2,
-            cy: MIDDLE - 70,
-            r: 5,
-        });
-    }
     addHit(hits, "off-player", decor, {
         x: TRAY_LEFT,
         y: MIDDLE,
@@ -267,6 +312,143 @@ function drawTray(svg: SVGSVGElement, hits: Element, board: BoardModel, decor: B
     });
 }
 
+/** Une tranche de pion sorti, centrée en spot. */
+function addSlab(svg: Element, cssClass: string, spot: Spot): SVGElement {
+    return add(svg, "rect", {
+        class: cssClass,
+        x: TRAY_LEFT + 4,
+        y: spot.y - OFF_SLAB / 2 + 1,
+        width: TRAY_WIDTH - 8,
+        height: OFF_SLAB - 2,
+        rx: 3,
+    });
+}
+
+/** Un cercle de rayon r autour d'un pion (un cadre pour un pion sorti). */
+function addRing(svg: Element, cssClass: string, place: Place, spot: Spot, r: number): void {
+    if (place.startsWith("off-")) {
+        addSlab(svg, cssClass, spot);
+    } else {
+        add(svg, "circle", { class: cssClass, cx: spot.x, cy: spot.y, r });
+    }
+}
+
+// ------------------------------------------------------ Coup de l'ordinateur
+
+/**
+ * Les traces d'un coup : un pion fantôme (contour seul) là où chaque pion
+ * est parti, un cercle autour de chaque pion arrivé et de chaque pion frappé
+ * (sur la barre), et une flèche par demi-coup.
+ */
+function drawTrace(svg: SVGSVGElement, board: BoardModel, trace: MoveTrace): void {
+    const side = trace.side;
+    for (const [place, n] of trace.left) {
+        // Au-dessus des pions restés sur la case.
+        const remaining = countAt(board, side, place);
+        for (let k = 0; k < n; k++) {
+            addRing(svg, "trace-ghost", place, slotCenter(place, remaining + k), RADIUS - 1);
+        }
+    }
+    for (const [place, n] of trace.landed) {
+        const top = topIndex(board, side, place);
+        for (let k = 0; k < n && top - k >= 0; k++) {
+            addRing(svg, "trace-landed", place, slotCenter(place, top - k), RADIUS + 3);
+        }
+    }
+    const opponent: Side = side === "player" ? "computer" : "player";
+    const bar: Place = `bar-${opponent}`;
+    const top = topIndex(board, opponent, bar);
+    for (let k = 0; k < trace.hits && top - k >= 0; k++) {
+        addRing(svg, "trace-hit", bar, slotCenter(bar, top - k), RADIUS + 3);
+    }
+    const defs = add(svg, "defs", {});
+    const marker = add(defs, "marker", {
+        id: "trace-head",
+        viewBox: "0 0 10 10",
+        refX: 8,
+        refY: 5,
+        markerWidth: 3.5,
+        markerHeight: 3.5,
+        orient: "auto",
+    });
+    add(marker, "path", { class: "trace-head", d: "M0,0 L10,5 L0,10 z" });
+    const departures = new Map<Place, number>();
+    for (const { from, to } of trace.arrows) {
+        // De la place libre laissée par le pion (son fantôme) à son pion
+        // d'arrivée.
+        const k = departures.get(from) ?? 0;
+        departures.set(from, k + 1);
+        const start = slotCenter(from, countAt(board, side, from) + k);
+        const end = slotCenter(to, Math.max(topIndex(board, side, to), 0));
+        drawArrow(svg, start, end, to.startsWith("off-") ? OFF_SLAB : RADIUS + 4);
+    }
+}
+
+/** L'indice du pion du dessus dessiné à un endroit (-1 s'il n'y en a pas). */
+function topIndex(board: BoardModel, side: Side, place: Place): number {
+    const count = countAt(board, side, place);
+    return place.startsWith("off-") ? count - 1 : Math.min(count, MAX_STACK) - 1;
+}
+
+/** Une flèche de start vers end, arrêtée à gap du centre d'arrivée. */
+function drawArrow(svg: SVGSVGElement, start: Spot, end: Spot, gap: number): void {
+    const dx = end.x - start.x;
+    const dy = end.y - start.y;
+    const length = Math.hypot(dx, dy);
+    const keep = length > 2 * gap ? (length - gap) / length : 0.5;
+    add(svg, "line", {
+        class: "trace-arrow",
+        x1: start.x,
+        y1: start.y,
+        x2: start.x + dx * keep,
+        y2: start.y + dy * keep,
+        "marker-end": "url(#trace-head)",
+    });
+}
+
+/** Le centre du pion du dessus d'un endroit, sur le plateau tel qu'il est
+ * dessiné (null s'il n'y a pas de pion). */
+export function checkerSpot(svg: SVGSVGElement, place: Place): Spot | null {
+    const checker = svg.querySelector(`[data-checker="${place}"]`);
+    if (checker === null) {
+        return null;
+    }
+    const number = (name: string) => Number(checker.getAttribute(name));
+    if (checker.tagName === "circle") {
+        return { x: number("cx"), y: number("cy") };
+    }
+    return { x: number("x") + number("width") / 2, y: number("y") + number("height") / 2 };
+}
+
+/**
+ * Fait glisser le pion du dessus de place depuis from jusqu'à sa position
+ * dessinée, en ms millisecondes (animation du navigateur, sans bibliothèque).
+ * Résolue à la fin du glissement.
+ */
+export async function slideChecker(
+    svg: SVGSVGElement,
+    place: Place,
+    from: Spot,
+    ms: number,
+): Promise<void> {
+    const checker = svg.querySelector(`[data-checker="${place}"]`);
+    const to = checkerSpot(svg, place);
+    if (checker === null || to === null || typeof checker.animate !== "function") {
+        return;
+    }
+    // Devant les autres pions pendant le trajet, mais derrière les zones à
+    // toucher, toujours dessinées en dernier.
+    svg.insertBefore(checker, svg.lastChild);
+    const animation = checker.animate(
+        [
+            { transform: `translate(${from.x - to.x}px, ${from.y - to.y}px)` },
+            { transform: "translate(0px, 0px)" },
+        ],
+        { duration: ms, easing: "ease-in-out" },
+    );
+    await animation.finished.catch(() => undefined);
+}
+
 // Position des points d'un dé, en fractions de son côté.
 const PIPS: Record<number, [number, number][]> = {
     1: [[0.5, 0.5]],
@@ -310,7 +492,10 @@ function drawDice(svg: SVGSVGElement, dice: readonly ShownDie[]): void {
     dice.forEach((die, i) => {
         const x = center - total / 2 + i * (DIE + gap);
         const y = MIDDLE - DIE / 2;
-        const group = add(svg, "g", { class: "die", "data-value": die.value });
+        const group = add(svg, "g", {
+            class: die.blocked ? "die die-blocked" : "die",
+            "data-value": die.value,
+        });
         add(group, "rect", { class: `die-${die.side}`, x, y, width: DIE, height: DIE, rx: 6 });
         for (const [px, py] of PIPS[die.value] ?? []) {
             add(group, "circle", {
@@ -320,23 +505,78 @@ function drawDice(svg: SVGSVGElement, dice: readonly ShownDie[]): void {
                 r: 3.5,
             });
         }
+        if (die.blocked) {
+            add(group, "line", { class: "die-strike", x1: x, y1: y + DIE, x2: x + DIE, y2: y });
+        }
     });
 }
 
 /** Le videau, dans le plateau de sortie : au milieu s'il est au centre,
  * sinon du côté de son propriétaire. Au centre, il montre 64. */
-function drawCube(svg: SVGSVGElement, cube: Cube): void {
-    const shift = cube.owner === "computer" ? -48 : cube.owner === "player" ? 48 : 0;
-    const x = TRAY_LEFT + (TRAY_WIDTH - CUBE) / 2;
-    const y = MIDDLE + shift - CUBE / 2;
+function drawCube(svg: SVGSVGElement, cube: Cube): SVGElement {
+    const center = cubeCenter(cube);
+    const x = center.x - CUBE / 2;
+    const y = center.y - CUBE / 2;
     const group = add(svg, "g", { class: "cube", "data-owner": cube.owner ?? "center" });
     add(group, "rect", { class: "cube-face", x, y, width: CUBE, height: CUBE, rx: 4 });
     add(
         group,
         "text",
-        { class: "cube-value", x: x + CUBE / 2, y: y + CUBE / 2 + 6 },
+        { class: "cube-value", x: center.x, y: center.y + 6 },
         String(cube.owner === null ? 64 : cube.value),
     );
+    return group;
+}
+
+/** Le centre du videau dans le plateau de sortie. */
+function cubeCenter(cube: Cube): Spot {
+    const shift = cube.owner === "computer" ? -48 : cube.owner === "player" ? 48 : 0;
+    return { x: TRAY_LEFT + TRAY_WIDTH / 2, y: MIDDLE + shift };
+}
+
+/** Les dés du joueur en attente d'être lancés, faces vides, au milieu de la
+ * moitié gauche (la droite garde le dernier jet de l'ordinateur). Renvoie
+ * leur centre. */
+function waitingDice(svg: SVGSVGElement): Spot {
+    const center = { x: FRAME + HALF_WIDTH / 2, y: MIDDLE };
+    const gap = 8;
+    const group = add(svg, "g", { class: "die die-waiting" });
+    for (const x of [center.x - gap / 2 - DIE, center.x + gap / 2]) {
+        add(group, "rect", {
+            class: "die-player",
+            x,
+            y: MIDDLE - DIE / 2,
+            width: DIE,
+            height: DIE,
+            rx: 6,
+        });
+    }
+    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.
+ */
+function addAction(
+    hits: Element,
+    action: string,
+    label: string,
+    center: Spot,
+    width: number,
+): void {
+    add(hits, "rect", {
+        class: "hit action",
+        "data-action": action,
+        role: "button",
+        "aria-label": label,
+        // Sans déborder du dessin à droite (le videau est contre le bord).
+        x: Math.min(center.x - width / 2, WIDTH - width),
+        y: center.y - MIN_TARGET / 2,
+        width,
+        height: MIN_TARGET,
+    });
 }
 
 /** Une zone à toucher. Elle porte son état (can-move, can-land) pour les

app/src/ui/texts.ts

@@ -37,6 +37,9 @@ export const TEXTS = {
     take: "Prendre",
     drop: "Passer",
     cancel: "Annuler",
+    skip: "Continuer",
+    replay: "Revoir",
+    replayTitle: "Revoir le dernier coup de l'ordinateur",
     newGame: "Nouvelle partie",
     help: "Aide",
     back: "Retour à la partie",
@@ -57,8 +60,8 @@ export const TEXTS = {
     yourMove: (dice: readonly number[]) =>
         `Jouez ${roll(dice)} : touchez un pion, puis sa case d'arrivée.`,
     pickTarget: "Touchez une case d'arrivée en surbrillance, ou un autre pion.",
-    youCannotMove: (dice: readonly number[]) =>
-        `Vous ne pouvez pas jouer ${roll(dice)} : votre tour passe.`,
+    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)}).`,

app/tests/full-game.test.ts

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

app/tests/game.test.ts

@@ -86,19 +86,40 @@ test("un coup se saisit demi-coup par demi-coup ; un demi-coup refusé ne change
     assert.equal(game.state.position, "SWAPPED");
 });
 
-test("sans coup possible, le tour passe", async () => {
+test("sans coup possible, le tour passe quand le joueur le laisse passer", async () => {
     const engine = fakeEngine({ legalMoves: async () => [] });
     const game = Game.start(engine, {
         dice: fixedDice([6, 6]),
         setup: { position: "BLOCKED", firstTurn: "player" },
     });
     await game.roll();
+    // Le tour ne passe pas tout seul : le jet reste à « jouer ».
+    assert.equal(game.state.phase, "moving");
+    assert.equal(game.state.turn, "player");
+    assert.equal(await game.cannotMove(), true);
+    await game.skipTurn();
     const last = game.events.at(-1);
     assert.ok(last?.type === "MovePlayed");
     assert.deepEqual(last.halfMoves, []);
     assert.equal(game.state.turn, "computer");
 });
 
+test("le joueur ne peut pas laisser passer son tour s'il a un coup", async () => {
+    const engine = fakeEngine({
+        legalMoves: async () => [
+            { notation: "8/5", halfMoves: [{ from: 8, to: 5 }], position: "P" },
+        ],
+    });
+    const game = Game.start(engine, {
+        dice: fixedDice([3, 1]),
+        setup: { position: "X", firstTurn: "player" },
+    });
+    await game.roll();
+    assert.equal(await game.cannotMove(), false);
+    await assert.rejects(game.skipTurn(), /coup possible/);
+    assert.equal(game.state.phase, "moving");
+});
+
 test("l'ordinateur double si le moteur le recommande ; le joueur prend", async () => {
     const engine = fakeEngine({
         cubeDecision: async () => ({ available: true, double: true, take: true }),

app/tests/move-steps.test.ts

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

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

@@ -7,10 +7,16 @@
 
 import assert from "node:assert/strict";
 import { Before, BeforeAll, Given, setDefaultTimeout, Then, When } from "@cucumber/cucumber";
-import type { Engine, Move } from "../../src/domain/game/engine.js";
+import type { BoardSide, Engine, Move } from "../../src/domain/game/engine.js";
 import type { GameEvent } from "../../src/domain/game/events.js";
-import { Game, STANDARD_PLY } from "../../src/domain/game/game.js";
-import { type PositionId, parseHalfMoves, START_POSITION } from "../../src/domain/game/position.js";
+import { Game, type MoveSteps, STANDARD_PLY } from "../../src/domain/game/game.js";
+import {
+    BAR,
+    OFF,
+    type PositionId,
+    parseHalfMoves,
+    START_POSITION,
+} from "../../src/domain/game/position.js";
 import { fixedDice } from "../../src/domain/game/roll.js";
 import type { GameState } from "../../src/domain/game/state.js";
 import { loadNodeEngine } from "../support/node-engine.js";
@@ -27,11 +33,32 @@ const COMPUTER_DOUBLES = "6O5uAAC4uzsAAA";
 // l'ordinateur n'en a sorti aucun.
 const PLAYER_ALMOST_DONE = "/38AAABQAAAAAA";
 
+// Le joueur, au trait : un pion sur la barre, quatorze sur sa case 6.
+// L'ordinateur tient ses six premières cases (vos cases 19 à 24), où votre
+// pion devrait rentrer.
+const PLAYER_SHUT_OUT = "t+0OAADg/wcAQA";
+
+// L'ordinateur, au trait : un pion sur sa case 13, quatorze sur sa case 1.
+// Vous : un blot sur votre case 15 (sa case 10), deux pions sur votre case
+// 13 (sa case 12), douze sur votre case 6. Avec 3-1, son seul coup permis
+// est 13/10* 10/9 : il frappe votre blot.
+const COMPUTER_MUST_HIT = "4P8BEwD/PwAEAA";
+
 let engine: Engine;
 let game: Game;
 let accepted: boolean;
 let positionBefore: PositionId;
 let computerTurn: { before: GameState; ms: number };
+let computerMove: MoveSteps;
+
+/** Le nombre de pions d'un camp à une case d'un demi-coup (barre, sortie ou
+ * 1 à 24, dans sa numérotation). */
+function checkersAt(side: BoardSide, point: number): number {
+    if (point === BAR) {
+        return side.bar;
+    }
+    return point === OFF ? side.off : (side.points[point - 1] ?? 0);
+}
 
 BeforeAll(async () => {
     engine = await loadNodeEngine();
@@ -171,6 +198,93 @@ Then(
     },
 );
 
+// ------------------------------------------------- Aucun coup possible
+
+Given("votre pion sur la barre ne peut pas rentrer", () => {
+    // Les six cases où il pourrait rentrer sont tenues par l'ordinateur.
+    game = Game.start(engine, {
+        setup: { position: PLAYER_SHUT_OUT, firstTurn: "player" },
+        dice: fixedDice([6, 5]),
+    });
+});
+
+When("vous lancez les dés", async () => {
+    await game.roll();
+});
+
+Then("aucun coup n'est possible avec votre jet", async () => {
+    assert.deepEqual(game.state.roll, [6, 5]);
+    assert.equal(await game.cannotMove(), true);
+    assert.deepEqual(await game.nextHalfMoves(), []);
+});
+
+Then("c'est toujours à vous", () => {
+    assert.equal(game.state.turn, "player");
+    assert.equal(game.state.phase, "moving");
+    assert.equal(lastEvent().type, "DiceRolled");
+});
+
+When("vous continuez", async () => {
+    await game.skipTurn();
+    const event = lastEvent();
+    assert.ok(event.type === "MovePlayed" && event.side === "player");
+    assert.deepEqual(event.halfMoves, []);
+});
+
+// ---------------------------------------------- Voir le coup de l'ordinateur
+
+Given("un de vos pions est seul à portée de l'ordinateur", () => {
+    // L'ordinateur tirera 3-1. Le videau est chez vous : il ne peut pas
+    // doubler, il joue.
+    game = Game.start(engine, {
+        setup: {
+            position: COMPUTER_MUST_HIT,
+            firstTurn: "computer",
+            cube: { value: 2, owner: "player" },
+        },
+        dice: fixedDice([3, 1]),
+    });
+});
+
+When("l'ordinateur a joué", async () => {
+    await game.playComputerTurn();
+    const played = lastEvent();
+    assert.ok(played.type === "MovePlayed" && played.side === "computer");
+    const steps = await game.lastMoveSteps();
+    assert.ok(steps !== null);
+    computerMove = steps;
+});
+
+Then("son coup vous est montré case par case", async () => {
+    const { side, halfMoves, boards } = computerMove;
+    assert.equal(side, "computer");
+    assert.ok(halfMoves.length > 0);
+    assert.equal(boards.length, halfMoves.length + 1);
+    // Chaque plateau ne diffère du précédent que d'un pion de l'ordinateur,
+    // parti de la case de départ du demi-coup pour sa case d'arrivée.
+    for (const [i, h] of halfMoves.entries()) {
+        const before = boards[i]?.computer;
+        const after = boards[i + 1]?.computer;
+        assert.ok(before !== undefined && after !== undefined);
+        assert.equal(checkersAt(after, h.from), checkersAt(before, h.from) - 1);
+        assert.equal(checkersAt(after, h.to), checkersAt(before, h.to) + 1);
+    }
+    // Le dernier est le plateau de la partie.
+    assert.deepEqual(boards.at(-1), await game.displayedBoard());
+});
+
+Then("votre pion frappé part sur la barre", () => {
+    const { boards, hits } = computerMove;
+    const hit = hits.indexOf(true);
+    assert.ok(hit >= 0, "aucun pion frappé");
+    assert.equal(boards[hit]?.player.bar, 0);
+    assert.equal(boards[hit + 1]?.player.bar, 1);
+});
+
+Then("vous pouvez revoir son coup", async () => {
+    assert.deepEqual(await game.lastMoveSteps(), computerMove);
+});
+
 // ------------------------------------------------------------------ Videau
 
 Given("l'ordinateur vous propose de doubler", async () => {

app/tests/ui.test.ts

@@ -10,9 +10,9 @@ import { readFileSync } from "node:fs";
 import { test } from "node:test";
 import type { BoardSide } from "../src/domain/game/engine.js";
 import { appendEvent, EMPTY_JOURNAL } from "../src/domain/game/events.js";
-import { START_POSITION } from "../src/domain/game/position.js";
+import { parseHalfMoves, START_POSITION } from "../src/domain/game/position.js";
 import { createGameStore } from "../src/storage/game-store.js";
-import { boardModel, moveTargets, placeOf, pointSlot } from "../src/ui/board-model.js";
+import { boardModel, moveTargets, moveTrace, placeOf, pointSlot } from "../src/ui/board-model.js";
 import { parseFeature, parseGlossaryEntry, parseGlossaryIndex } from "../src/ui/help-text.js";
 import { TEXTS } from "../src/ui/texts.js";
 
@@ -67,6 +67,55 @@ test("les demi-coups possibles donnent les pions jouables et leurs cases d'arriv
     assert.deepEqual(targets.get("p3")?.get("off-player"), { from: 3, to: 0 });
 });
 
+test("traces d'un coup simple : une flèche par demi-coup, départs et arrivées", () => {
+    // L'ordinateur joue 13/9 13/7 dans sa numérotation : ses cases 13, 9 et
+    // 7 sont les cases 12, 16 et 18 du joueur.
+    const trace = moveTrace("computer", parseHalfMoves("13/9 13/7"), [false, false]);
+    assert.deepEqual(trace.arrows, [
+        { from: "p12", to: "p16" },
+        { from: "p12", to: "p18" },
+    ]);
+    assert.deepEqual([...trace.left], [["p12", 2]]);
+    assert.deepEqual(
+        [...trace.landed],
+        [
+            ["p16", 1],
+            ["p18", 1],
+        ],
+    );
+    assert.equal(trace.hits, 0);
+});
+
+test("traces : un pion qui fait étape ne laisse ni fantôme ni cercle à l'étape", () => {
+    const trace = moveTrace("computer", parseHalfMoves("24/18 18/14"), [false, true]);
+    assert.equal(trace.arrows.length, 2);
+    assert.deepEqual([...trace.left], [["p1", 1]]);
+    assert.deepEqual([...trace.landed], [["p11", 1]]);
+    assert.equal(trace.hits, 1);
+});
+
+test("traces : rentrée depuis la barre avec un pion frappé, sortie de pions", () => {
+    const entering = moveTrace("computer", parseHalfMoves("bar/22 6/4"), [true, false]);
+    assert.deepEqual(entering.arrows[0], { from: "bar-computer", to: "p3" });
+    assert.deepEqual(
+        [...entering.left],
+        [
+            ["bar-computer", 1],
+            ["p19", 1],
+        ],
+    );
+    assert.equal(entering.hits, 1);
+    const bearingOff = moveTrace("computer", parseHalfMoves("6/off 5/off"), [false, false]);
+    assert.deepEqual([...bearingOff.landed], [["off-computer", 2]]);
+    assert.deepEqual(
+        [...bearingOff.left],
+        [
+            ["p19", 1],
+            ["p20", 1],
+        ],
+    );
+});
+
 test("l'aide lit le scénario tel qu'il est écrit dans docs/scenarios/", () => {
     const feature = parseFeature(read("docs/scenarios/jouer-une-partie.feature"));
     assert.equal(feature.title, "Jouer une partie contre l'ordinateur");

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

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

docs/feuille-de-route.md

@@ -21,6 +21,11 @@ garde-fous d'architecture (0d.1), déploiement sur https://ustagammon.sans.pub.
 | Sous-étape | Contenu | État | Plan |
 | --- | --- | --- | --- |
 | 0d.2 | Plateau minimal jouable (PWA hors ligne), publié ; reste la vérification avec Pierre sur le Fairphone 4 (`docs/guide-test-etape-0.md`, section « Étape 0d ») | 🔄 | |
+| 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.2 | Revue UX par un designer UI : compte de points, fluidité (bouton « Nouvelle partie », interruptions), paysage ; propositions à valider par Pierre | 🔄 | `plans/2026-11-03-revue-ux.md` |
+| 0e.3 | Paysage sur téléphone : plateau sur presque tout l'écran, contrôles en pictogrammes (ADR 0012 à amender), selon la revue validée | ⏳ | |
+| 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 | ⏳ | |
 
 **Critère de fin** : une partie complète jouée sur le Fairphone 4, moins de 2 s
 par coup de l'IA en niveau standard, tous les tests au vert.

docs/identite/README.md

@@ -47,6 +47,24 @@ python3 -I docs/identite/generer-logo.py build/police/AlegreyaSans-Bold.ttf docs
 Les PNG sont des rendus des SVG par Chrome sans interface
 (`google-chrome --headless --screenshot`), à la taille indiquée dans leur nom.
 
+## Police de l'application
+
+`web/fonts/` contient Alegreya Sans en cinq graisses, réduite aux caractères
+latins (français compris) et convertie en woff2, soit 143 Ko au lieu de
+1,3 Mo en TTF. Pour la refaire, depuis les TTF de
+https://github.com/google/fonts/tree/main/ofl/alegreyasans (Python 3,
+fontTools et brotli, par exemple dans l'image `emscripten/emsdk`) :
+
+```sh
+pip install fonttools brotli
+for f in Regular Italic Medium Bold ExtraBold; do
+  python3 -m fontTools.subset AlegreyaSans-$f.ttf \
+    --output-file=web/fonts/AlegreyaSans-$f.woff2 --flavor=woff2 \
+    --unicodes="U+0020-007E,U+00A0-00FF,U+0152-0153,U+0178,U+02BC,U+02C6,U+02DC,U+2009,U+2011,U+2013-2014,U+2018-201E,U+2022,U+2026,U+202F,U+2039-203A,U+20AC,U+2192,U+2212" \
+    --layout-features='*' --name-IDs='*' --name-languages='*'
+done
+```
+
 ## Charte graphique
 
 La charte complète (couleurs des deux thèmes, typographie, composants) est dans

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

@@ -0,0 +1,37 @@
+# Revue UX : compte de points, fluidité, paysage
+
+- **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, rôle de designer UI, en lecture
+  seule sur le code
+
+## Objectif
+
+Proposer à Pierre, avec maquettes, une meilleure présentation du compte de
+points et une revue de toute l'expérience de jeu (point 10 de son message du
+2026-11-03), en couvrant la fluidité (ligne 0d.2+ de la feuille de route) et le
+paysage sur téléphone (point 5).
+
+## Consignes
+
+- Partir de la charte (`docs/identite/`, ADR 0010), des ADR 0011 et 0012, et de
+  l'application publiée (https://ustagammon.sans.pub, ou `make site` puis les
+  captures de `make test-browser`).
+- Ne pas modifier le dépôt. Livrer un rapport en Markdown (chemin indiqué par
+  la session principale) et, si utile, une page de maquettes.
+- Pour chaque proposition : le problème observé, la solution, sa maquette, son
+  coût technique estimé, et ce qui relève d'un choix de Pierre.
+- Sujets imposés : compte de points ; bouton « Nouvelle partie » et tout ce qui
+  interrompt la partie ; paysage sur téléphone, plateau sur presque tout
+  l'écran, contrôles en pictogrammes.
+- Les changements de saisie du coup en cours (plan
+  `2026-11-03-saisie-du-coup.md`) sont acquis : ne pas les reproposer.
+
+## Critères de réussite
+
+Un rapport priorisé que Pierre peut valider point par point.
+
+## Résultat
+
+À remplir à la clôture.

docs/plans/2026-11-03-saisie-du-coup.md

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

@@ -30,6 +30,30 @@ Fonctionnalité: Jouer une partie contre l'ordinateur
     Quand ses dés sont tirés
     Alors il joue le coup recommandé par le moteur en moins de 2 secondes
 
+  Scénario: Aucun coup possible avec votre jet
+    Il arrive que les dés ne permettent de bouger aucun pion. Votre jet reste
+    affiché avec un message, et le tour ne passe à l'ordinateur qu'une fois
+    que vous avez touché « Continuer ».
+
+    Étant donné que votre pion sur la barre ne peut pas rentrer
+    Quand vous lancez les dés
+    Alors aucun coup n'est possible avec votre jet
+    Et c'est toujours à vous
+    Quand vous continuez
+    Alors c'est ensuite au tour de l'ordinateur
+
+  Scénario: Voir le coup de l'ordinateur
+    Après chaque coup de l'ordinateur, ses pions glissent un par un sur le
+    plateau. Restent ensuite, jusqu'à votre prochaine action, une flèche par
+    pion déplacé, ses pions arrivés entourés et un pion fantôme là où ils
+    étaient. Le bouton « Revoir » rejoue son coup.
+
+    Étant donné qu'un de vos pions est seul à portée de l'ordinateur
+    Quand l'ordinateur a joué
+    Alors son coup vous est montré case par case
+    Et votre pion frappé part sur la barre
+    Et vous pouvez revoir son coup
+
   Scénario: Prendre le double de l'ordinateur
     Étant donné que l'ordinateur vous propose de doubler
     Quand vous prenez

scripts/make-icons.py

@@ -1,73 +0,0 @@
-#!/usr/bin/env python3
-# Produit les icônes PNG de l'application (web/icons/icon-192.png et
-# icon-512.png) à partir des formes de web/icons/icon.svg : un fond de bois
-# et deux pions. Icônes provisoires, en attendant l'identité définitive.
-#
-# Python seul, sans bibliothèque : chaque pixel est échantillonné 4 × 4 fois
-# pour adoucir les bords. À relancer seulement si les formes changent, dans
-# la chaîne C (Python 3) :
-#   docker run --rm --user "$(id -u):$(id -g)" -v "$PWD:/src" -w /src \
-#       ustagammon/build-c:2 python3 scripts/make-icons.py
-#
-# Copyright (C) 2026 les auteurs d'Ustagammon.
-# Licence : GPLv3 ou ultérieure (voir LICENSE).
-
-import struct
-import zlib
-
-BACKGROUND = (0x6B, 0x44, 0x26)
-# Pions dessinés dans l'ordre : (centre x, centre y, rayon, remplissage,
-# bord), en unités d'une icône de 512 pixels ; bord de 10 unités.
-CHECKERS = [
-    (300, 300, 120, (0x2B, 0x22, 0x1C), (0x0D, 0x0A, 0x08)),
-    (212, 212, 120, (0xFB, 0xF6, 0xEA), (0x7D, 0x6A, 0x52)),
-]
-EDGE = 10
-SAMPLES = 4
-
-
-def color_at(x, y):
-    """Couleur d'un point de l'icône, en unités de 512."""
-    color = BACKGROUND
-    for cx, cy, r, fill, edge in CHECKERS:
-        d2 = (x - cx) ** 2 + (y - cy) ** 2
-        if d2 <= (r + EDGE / 2) ** 2:
-            color = fill if d2 <= (r - EDGE / 2) ** 2 else edge
-    return color
-
-
-def render(size):
-    scale = 512 / size
-    rows = []
-    for py in range(size):
-        row = bytearray([0])  # filtre PNG « aucun »
-        for px in range(size):
-            total = [0, 0, 0]
-            for sy in range(SAMPLES):
-                for sx in range(SAMPLES):
-                    x = (px + (sx + 0.5) / SAMPLES) * scale
-                    y = (py + (sy + 0.5) / SAMPLES) * scale
-                    for i, c in enumerate(color_at(x, y)):
-                        total[i] += c
-            row += bytes(round(t / SAMPLES**2) for t in total)
-        rows.append(bytes(row))
-    return b"".join(rows)
-
-
-def png(size, pixels):
-    def chunk(kind, data):
-        body = kind + data
-        return struct.pack(">I", len(data)) + body + struct.pack(">I", zlib.crc32(body))
-
-    header = struct.pack(">IIBBBBB", size, size, 8, 2, 0, 0, 0)  # RVB, 8 bits
-    return (
-        b"\x89PNG\r\n\x1a\n"
-        + chunk(b"IHDR", header)
-        + chunk(b"IDAT", zlib.compress(pixels, 9))
-        + chunk(b"IEND", b"")
-    )
-
-
-for size in (192, 512):
-    with open(f"web/icons/icon-{size}.png", "wb") as f:
-        f.write(png(size, render(size)))

tests/browser/play.mjs

@@ -101,7 +101,7 @@ async function waitForPlayer() {
                 const b = document.getElementById(id);
                 return !b.hidden && !b.disabled;
             };
-            for (const id of ["again", "take", "roll"]) {
+            for (const id of ["again", "take", "skip", "roll"]) {
                 if (usable(id)) {
                     return id;
                 }
@@ -130,6 +130,101 @@ async function waitForPlayer() {
     throw new Error(`rien à faire pour le joueur depuis 60 s : ${screen}`);
 }
 
+/** Le dernier coup de l'ordinateur, s'il est la dernière chose jouée (fin de
+ * partie mise à part) et qu'il a déplacé des pions ; sinon null. */
+function computerMoveToShow(journal) {
+    const last = journal.events.filter((e) => e.type !== "GameEnded").at(-1);
+    return last?.type === "MovePlayed" && last.side === "computer" && last.halfMoves.length > 0
+        ? last
+        : null;
+}
+
+/** Ce que montre le plateau du coup de l'ordinateur. */
+async function shownTraces() {
+    return page.evaluate(() => ({
+        arrows: document.querySelectorAll(".trace-arrow").length,
+        landed: document.querySelectorAll(".trace-landed").length,
+        ghosts: document.querySelectorAll(".trace-ghost").length,
+        hits: document.querySelectorAll(".trace-hit").length,
+        replay: !document.getElementById("replay").hidden,
+    }));
+}
+
+/** Après un tour de l'ordinateur : ses traces sont là si son coup est la
+ * dernière chose jouée, et rien sinon. */
+async function checkTraces() {
+    const journal = await savedJournal();
+    const move = computerMoveToShow(journal);
+    const traces = await shownTraces();
+    const last = journal.events.filter((e) => e.type !== "GameEnded").at(-1);
+    if (last?.type === "MovePlayed" && last.side === "computer" && last.halfMoves.length === 0) {
+        // L'ordinateur n'a pas pu jouer : son jet reste barré, avec un message.
+        const info = await page.textContent("#info");
+        const blocked = await page.locator(".die-blocked").count();
+        check(/^L'ordinateur ne peut pas jouer \d-\d\.$/.test(info ?? "") && blocked === 2,
+            `jet de l'ordinateur sans coup mal montré : « ${info} », ${blocked} dés barrés`);
+        log(`l'ordinateur ne peut pas jouer : « ${info} »`);
+    }
+    if (move === null) {
+        check(traces.arrows + traces.landed + traces.ghosts === 0 && !traces.replay,
+            `traces sans coup de l'ordinateur à montrer : ${JSON.stringify(traces)}`);
+        return null;
+    }
+    check(traces.arrows === move.halfMoves.length && traces.landed > 0 && traces.ghosts > 0 &&
+        traces.replay, `coup de l'ordinateur mal montré : ${JSON.stringify(traces)}`);
+    return traces;
+}
+
+/** La zone à toucher d'une action du plateau (dés ou videau) : un bouton
+ * accessible, d'au moins 44 px de côté. Renvoie son sélecteur. */
+async function touchTarget(action, label) {
+    const selector = `[data-action="${action}"]`;
+    const zone = page.locator(selector);
+    check((await zone.count()) === 1, `zone ${action} absente du plateau`);
+    check((await zone.getAttribute("role")) === "button" &&
+        (await zone.getAttribute("aria-label")) === label, `zone ${action} sans rôle accessible`);
+    const box = await zone.boundingBox();
+    check(box.width >= 44 && box.height >= 44,
+        `zone ${action} trop petite : ${Math.round(box.width)} x ${Math.round(box.height)} px`);
+    return selector;
+}
+
+/** Observe la page pendant ms millisecondes : le plus grand nombre
+ * d'animations en cours à la fois, et le plus petit nombre de flèches. */
+async function watchReplay(ms) {
+    let animations = 0;
+    let arrows = Infinity;
+    for (const end = Date.now() + ms; Date.now() < end; ) {
+        const seen = await page.evaluate(() => ({
+            animations: document.getAnimations().length,
+            arrows: document.querySelectorAll(".trace-arrow").length,
+        }));
+        animations = Math.max(animations, seen.animations);
+        arrows = Math.min(arrows, seen.arrows);
+        await new Promise((resolve) => setTimeout(resolve, 40));
+    }
+    return { animations, arrows };
+}
+
+/** « Revoir » : rejoue le coup (sans animation en mouvement réduit), puis
+ * remet les mêmes traces. */
+async function checkReplay(traces, reducedMotion) {
+    await page.emulateMedia({ reducedMotion: reducedMotion ? "reduce" : "no-preference" });
+    await page.click("#replay");
+    const seen = await watchReplay(300);
+    if (reducedMotion) {
+        check(seen.animations === 0, "Revoir en mouvement réduit : des pions glissent quand même");
+    } else {
+        check(seen.animations > 0 && seen.arrows === 0,
+            `Revoir : pas d'animation sans traces (${JSON.stringify(seen)})`);
+    }
+    await waitForPlayer();
+    const after = await shownTraces();
+    check(JSON.stringify(after) === JSON.stringify(traces),
+        `traces différentes après Revoir : ${JSON.stringify(after)}`);
+    await page.emulateMedia({ reducedMotion: "no-preference" });
+}
+
 // Garde-fou : une étape bloquée plus de deux minutes arrête tout, avec une
 // capture et l'état de l'écran.
 let lastStep = Date.now();
@@ -157,10 +252,30 @@ let doubled = false;
 let selectionShot = false;
 let reloaded = false;
 let computerMs = [];
+let tracesSeen = 0;
+let replays = 0;
+let skips = 0;
+let rolls = 0;
 for (let actions = 0; ; actions++) {
     check(actions < 800, "la partie ne finit pas");
     const todo = await waitForPlayer();
     step(`partie, action ${actions}`);
+    // Le coup de l'ordinateur est montré jusqu'à l'action suivante du
+    // joueur ; deux fois, on le revoit (la seconde en mouvement réduit).
+    const traces = await checkTraces();
+    if (traces !== null) {
+        tracesSeen++;
+        if (replays < 2) {
+            replays++;
+            await checkReplay(traces, replays === 2);
+            if (replays === 1) {
+                await shot("coup-adverse");
+            }
+            log(`coup de l'ordinateur revu${replays === 2 ? " en mouvement réduit" : ""} : ` +
+                `${traces.arrows} flèches, ${traces.landed} pions entourés, ` +
+                `${traces.ghosts} fantômes, ${traces.hits} pions frappés signalés`);
+        }
+    }
     if (process.env.TRACE) {
         log(`${todo} : ${await page.textContent("#info")} / ${await page.textContent("#prompt")}`);
     }
@@ -172,22 +287,37 @@ for (let actions = 0; ; actions++) {
     if (todo === "again") {
         break;
     }
-    if (todo === "take") {
+    if (todo === "skip") {
+        // Aucun coup possible : le jet reste affiché, barré, avec un
+        // message, et le tour ne passe qu'en touchant « Continuer ».
+        const info = await page.textContent("#info");
+        const blocked = await page.locator(".die-blocked").count();
+        check(/^Aucun coup possible avec \d-\d\.$/.test(info ?? "") && blocked === 2,
+            `aucun coup possible mal montré : « ${info} », ${blocked} dés barrés`);
+        skips++;
+        log(`aucun coup possible : « ${info} », vous continuez`);
+        await page.click("#skip");
+    } else if (todo === "take") {
         log("l'ordinateur double : vous prenez");
         await shot("videau-propose");
         await page.click("#take");
     } else if (todo === "roll") {
         if (!doubled && (await page.isEnabled("#double"))) {
             doubled = true;
-            log("vous doublez");
-            await page.click("#double");
+            log("vous doublez en touchant le videau");
+            await page.click(await touchTarget("double", "Doubler"));
             await waitForPlayer();
             const answer = (await page.textContent("#info")) || (await page.textContent("#prompt"));
             log(`réponse : ${answer}`);
             continue;
         }
-        await page.click("#roll");
+        // Une fois sur deux, en touchant les dés en attente plutôt que le
+        // bouton.
+        rolls++;
+        await page.click(rolls % 2 === 0 ? await touchTarget("roll", "Lancer les dés") : "#roll");
     } else {
+        check((await page.locator("[data-action]").count()) === 0,
+            "dés ou videau touchables pendant que vous jouez votre coup");
         await page.click(".hit.can-move");
         await page.waitForSelector(".hit.can-land");
         if (!selectionShot) {
@@ -223,6 +353,11 @@ log(
 );
 check(countMoves(journal, "player") >= 3 && countMoves(journal, "computer") >= 3, "trop peu de coups");
 check(reloaded, "la reprise après rechargement n'a pas été essayée");
+check(replays === 2, "le coup de l'ordinateur n'a pas été revu");
+check(doubled && rolls >= 2, "dés ou videau jamais touchés sur le plateau");
+log(`dés lancés ${Math.floor(rolls / 2)} fois en les touchant, videau touché pour doubler`);
+log(`coup de l'ordinateur montré ${tracesSeen} fois, et effacé à chaque action suivante`);
+log(skips > 0 ? `« Continuer » demandé ${skips} fois` : "aucun jet sans coup possible dans cette partie");
 if (computerMs.length > 0) {
     log(`temps affichés des tours de l'ordinateur : max ${Math.max(...computerMs)} ms, ` +
         `${computerMs.length} tours`);

tests/lint.sh

@@ -29,10 +29,11 @@ for f in "${fichiers[@]}"; do
 	if grep -q $'\r' "$f"; then
 		signaler "$f : fins de ligne Windows (CRLF)"
 	fi
-	# Copies fidèles de GNU Backgammon (sources et données) : on ne
-	# reformate pas leurs espaces, pour rester identique à l'original.
+	# Copies fidèles de GNU Backgammon (sources et données) et de la licence
+	# de la police : on ne reformate pas leurs espaces, pour rester
+	# identique à l'original.
 	case "$f" in
-		engine/gnubg/* | engine/data/*) continue ;;
+		engine/gnubg/* | engine/data/* | web/fonts/OFL.txt) continue ;;
 	esac
 	if grep -nE '[[:blank:]]+$' "$f" >/dev/null; then
 		signaler "$f : espaces en fin de ligne (lignes $(grep -nE '[[:blank:]]+$' "$f" | cut -d: -f1 | paste -sd, -))"

tests/test_site.sh

@@ -43,8 +43,28 @@ check "app/main.js" "text/javascript"
 check "app/ui/app.js" "text/javascript"
 check "app/domain/game/game.js" "text/javascript"
 check "manifest.webmanifest" "application/manifest\+json"
-check "icons/icon-192.png" "image/png"
-check "icons/icon-512.png" "image/png"
+# Charte graphique (ADR 0010) : icônes et logo copiés de docs/identite/logo/,
+# police Alegreya Sans et sa licence.
+check "icons/favicon.svg" "image/svg\+xml"
+check "icons/favicon-32.png" "image/png"
+check "icons/apple-touch-icon-180.png" "image/png"
+check "icons/logo-horizontal-couleur.svg" "image/svg\+xml"
+check "icons/logo-horizontal-sombre.svg" "image/svg\+xml"
+check "icons/symbole-couleur.svg" "image/svg\+xml"
+check "icons/symbole-sombre.svg" "image/svg\+xml"
+cmp -s <(curl -s "$base/icons/icone-512.png") docs/identite/logo/icone-512.png \
+	|| report "/icons/icone-512.png diffère de docs/identite/logo/"
+for weight in Regular Italic Medium Bold ExtraBold; do
+	check "fonts/AlegreyaSans-$weight.woff2" "font/woff2"
+done
+check "fonts/OFL.txt" "text/plain"
+# Chaque fichier désigné par la page (icônes, police, style) est servi.
+page="$(curl -s "$base/")"
+while read -r ref; do
+	curl -sf -o /dev/null "$base/$ref" || report "index.html : $ref introuvable"
+done < <(grep -oE '(href|src|srcset)="[^"]*"' <<<"$page" | sed -E 's/^[a-z]+="(.*)"$/\1/')
+grep -qF "url(\"fonts/AlegreyaSans-Regular.woff2\")" <(curl -s "$base/app.css") \
+	|| report "app.css : police Alegreya Sans non déclarée"
 check "sw.js" "text/javascript"
 check "engine-worker.mjs" "text/javascript"
 check "wasm/engine.mjs" "text/javascript"
@@ -65,6 +85,8 @@ cmp -s <(curl -s "$base/docs/glossaire/videau.md") docs/glossaire/videau.md \
 # Le manifeste désigne des icônes servies, et l'application à la racine.
 manifest="$(curl -s "$base/manifest.webmanifest")"
 grep -q '"start_url": "./"' <<<"$manifest" || report "manifeste : start_url absent"
+grep -q '"theme_color": "#4A2E1F"' <<<"$manifest" || report "manifeste : theme_color autre que le noyer"
+grep -q '"purpose": "maskable"' <<<"$manifest" || report "manifeste : pas d'icône maskable"
 while read -r icon; do
 	curl -sf -o /dev/null "$base/$icon" || report "manifeste : icône $icon introuvable"
 done < <(grep -o '"src": "[^"]*"' <<<"$manifest" | sed 's/"src": "\(.*\)"/\1/')
@@ -73,7 +95,7 @@ done < <(grep -o '"src": "[^"]*"' <<<"$manifest" | sed 's/"src": "\(.*\)"/\1/')
 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/ \
-	docs/glossaire/videau.md version.json; do
+	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")"

web/app.css

@@ -1,81 +1,191 @@
-/* Style de l'application. Palette provisoire et sobre (bois, ivoire, un
- * accent vert), en attendant l'identité définitive : toutes les couleurs et
- * tailles sont des variables, redéfinies pour le thème sombre. */
+/* Style de l'application, selon la charte graphique (ADR 0010,
+ * docs/identite/charte/) : les couleurs, tailles et rayons sont les
+ * variables de tokens.json, sous le même nom, redéfinies pour le thème
+ * sombre ; les composants reprennent bundle.css. */
+
+/* ------------------------------------------------------------ Police */
+
+/* Alegreya Sans (SIL Open Font License 1.1, voir fonts/OFL.txt), réduite
+ * aux caractères latins et convertie en woff2 (voir docs/identite/README.md).
+ * Embarquée dans le site, donc dans le cache du service worker : elle
+ * fonctionne hors ligne. */
+@font-face {
+  font-family: "Alegreya Sans";
+  src: url("fonts/AlegreyaSans-Regular.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Alegreya Sans";
+  src: url("fonts/AlegreyaSans-Italic.woff2") format("woff2");
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Alegreya Sans";
+  src: url("fonts/AlegreyaSans-Medium.woff2") format("woff2");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Alegreya Sans";
+  src: url("fonts/AlegreyaSans-Bold.woff2") format("woff2");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Alegreya Sans";
+  src: url("fonts/AlegreyaSans-ExtraBold.woff2") format("woff2");
+  font-weight: 800;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* ------------------------------------------------------------ Couleurs */
 
 :root {
-  --text: #2b211a;
-  --muted: #6b5d50;
-  --background: #f7f2e8;
-  --accent: #2e6b4f;
+  --background: #f5efe5;
+  --surface: #fffcf6;
+  --surface-sunken: #ece3d4;
+  --text: #2b1d15;
+  --muted: #6b5c50;
+  --border: #ded2c0;
+  --border-strong: #8e7d6a;
+  --accent: #a8432b;
   --on-accent: #ffffff;
-  --border: #cbbfae;
-  --error: #a3261b;
+  --accent-soft: #f1d9cf;
+  --focus: #a8432b;
+  --error: #8c1c3a;
+  --verdict-good: #2f6b4f;
+  --verdict-doubtful: #7e5a0f;
+  --verdict-bad: #8c1c3a;
+  --brand-noyer: #4a2e1f;
+  --brand-ivoire: #f3ead8;
+  --brand-laiton: #8f6a1c;
 
-  --frame: #6b4426;
-  --bed: #e6cfa6;
-  --bar: #5c3a20;
-  --tray: #57371e;
-  --point-a: #9a6439;
-  --point-b: #c79b69;
-  --point-number: #f3e7d0;
-  --checker-player: #fbf6ea;
-  --checker-player-edge: #7d6a52;
-  --checker-computer: #2b221c;
-  --checker-computer-edge: #0d0a08;
-  --count-player: #2b211a;
-  --count-computer: #fbf6ea;
-  --die-player: #fbf6ea;
-  --pip-player: #2b211a;
-  --die-computer: #2b221c;
-  --pip-computer: #fbf6ea;
-  --cube: #fbf6ea;
-  --cube-text: #2b211a;
-  --highlight: #2e6b4f;
-  --target: rgba(46, 107, 79, 0.35);
-  --last-move: #d9822b;
+  --frame: #4a2e1f;
+  --bed: #e9dcc4;
+  --bar: #3f2619;
+  --tray: #3a2418;
+  --point-a: #6b4430;
+  --point-b: #c9ae88;
+  --point-number: #f3ead8;
+  --checker-player: #f7f0e2;
+  --checker-player-edge: #8c7a62;
+  --checker-computer: #2e1c12;
+  --checker-computer-edge: #120a05;
+  --count-player: #2b1d15;
+  --count-computer: #f3ead8;
+  --die-player: #f7f0e2;
+  --pip-player: #2b1d15;
+  --die-computer: #2e1c12;
+  --pip-computer: #f3ead8;
+  --cube: #f7f0e2;
+  --cube-text: #2b1d15;
+  --highlight: #a8432b;
+  --target: rgba(168, 67, 43, 0.32);
+  /* Dernier coup joué (marques et traces) : le laiton, rien d'autre. */
+  --last-move: var(--brand-laiton);
 
-  --font-size: 17px;
+  /* Numéros des flèches. La charte les pose sur le cadre (point-number,
+   * ivoire) ; notre plateau les pose sur le fond, où l'ivoire ne se lirait
+   * pas : texte secondaire en thème clair (4,7:1 sur bed), point-number en
+   * thème sombre (6,3:1). */
+  --point-label: var(--muted);
+
+  --shadow-raised: 0 1px 2px rgba(43, 29, 21, 0.1);
+
+  --font-sans: "Alegreya Sans", "Gill Sans", "Segoe UI", system-ui, sans-serif;
+
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-6: 24px;
+  --space-8: 32px;
   --button-height: 48px;
-  --radius: 8px;
   --page-width: 40rem;
+  --radius-sm: 6px;
+  --radius-md: 12px;
+  --radius-pill: 999px;
+
+  /* Hauteur de la barre haute : boutons de 44 px et marges. */
+  --topbar-height: 60px;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --text: #ece4d6;
-    --muted: #b3a796;
-    --background: #1b1714;
-    --accent: #6fc3a0;
-    --on-accent: #10221a;
-    --border: #4d443b;
-    --error: #f08a7e;
+    --background: #17110d;
+    --surface: #221913;
+    --surface-sunken: #2c211a;
+    --text: #efe5d5;
+    --muted: #a99886;
+    --border: #3a2d24;
+    --border-strong: #7d6b5b;
+    --accent: #d0694b;
+    --on-accent: #1a110c;
+    --accent-soft: #4a2519;
+    --focus: #e58a6e;
+    --error: #f08fa6;
+    --verdict-good: #7ccba4;
+    --verdict-doubtful: #e0b04f;
+    --verdict-bad: #f08fa6;
+    --brand-laiton: #d6a64a;
 
-    --frame: #3a2616;
-    --bed: #6d5136;
-    --bar: #2f1f12;
-    --tray: #2c1d11;
-    --point-a: #4a3120;
-    --point-b: #8b6943;
-    --point-number: #d9cbb4;
-    --checker-player: #efe6d2;
+    --frame: #2a1a10;
+    --bed: #4a3626;
+    --bar: #24170e;
+    --tray: #22150d;
+    --point-a: #3a2519;
+    --point-b: #7e6142;
+    --point-number: #cdbfa8;
+    --checker-player: #ede3cf;
     --checker-player-edge: #8e7c64;
-    --checker-computer: #17110d;
+    --checker-computer: #140d09;
     --checker-computer-edge: #a8957d;
-    --highlight: #7fd6b0;
-    --target: rgba(127, 214, 176, 0.35);
-    --last-move: #f0a050;
+    --count-player: #2b1d15;
+    --count-computer: #f3ead8;
+    --die-player: #ede3cf;
+    --pip-player: #2b1d15;
+    --die-computer: #140d09;
+    --pip-computer: #ede3cf;
+    --cube: #ede3cf;
+    --cube-text: #2b1d15;
+    --highlight: #e07a5a;
+    --target: rgba(224, 122, 90, 0.38);
+
+    --point-label: var(--point-number);
+
+    --shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.4);
   }
 }
 
+/* -------------------------------------------------------------- Page */
+
 * {
   box-sizing: border-box;
 }
 
+html {
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+}
+
 body {
   margin: 0 auto;
   max-width: var(--page-width);
-  padding: 0 0.5rem 1rem;
-  font: var(--font-size) / 1.45 system-ui, sans-serif;
+  padding: 0 var(--space-4) var(--space-6);
+  font-family: var(--font-sans);
+  font-size: 17px;
+  line-height: 25px;
   color: var(--text);
   background: var(--background);
 }
@@ -84,78 +194,148 @@ body {
   display: none !important;
 }
 
+a {
+  color: var(--accent);
+  text-underline-offset: 3px;
+}
+
+/* Anneau de focus clavier, sur tout élément interactif. */
+:focus-visible {
+  outline: 3px solid var(--focus);
+  outline-offset: 2px;
+}
+
+/* -------------------------------------------------------- Barre haute */
+
 .topbar {
   display: flex;
-  gap: 0.5rem;
+  gap: var(--space-2);
   align-items: center;
-  padding: 0.5rem 0;
+  min-height: var(--topbar-height);
+  padding-block: var(--space-2);
 }
 
-.topbar h1 {
+.topbar .brand {
   flex: 1;
+  display: flex;
+  align-items: center;
+  min-width: 0;
   margin: 0;
-  font-size: 1.25rem;
 }
 
+.topbar .brand img {
+  display: block;
+  width: auto;
+  height: 32px;
+}
+
+/* ------------------------------------------------------------ Boutons */
+
+/* Ronds comme des pions ; un seul bouton principal (brique) par écran,
+ * les autres en contour. */
 button {
   min-height: var(--button-height);
-  padding: 0 1rem;
+  padding: 0 20px;
   font: inherit;
-  font-weight: 600;
+  font-weight: 700;
   color: var(--on-accent);
   background: var(--accent);
-  border: 1px solid var(--accent);
-  border-radius: var(--radius);
+  border: 2px solid var(--accent);
+  border-radius: var(--radius-pill);
+  cursor: pointer;
+  /* Pas de délai ni de zoom sur un double toucher. */
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
 }
 
 button.secondary {
   color: var(--text);
   background: transparent;
-  border-color: var(--border);
+  border-color: var(--border-strong);
 }
 
-.topbar button {
-  min-height: 40px;
-  padding: 0 0.75rem;
-  font-size: 0.9rem;
+@media (hover: hover) {
+  button.secondary:hover:not(:disabled) {
+    background: var(--surface-sunken);
+  }
+}
+
+/* Retour visuel au toucher. */
+button:active:not(:disabled) {
+  transform: translateY(1px);
 }
 
 button:disabled {
   opacity: 0.45;
+  cursor: default;
+}
+
+.topbar button {
+  min-height: 44px;
+  padding: 0 14px;
+  font-size: 15px;
+  line-height: 20px;
 }
 
 .actions {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.5rem;
+  gap: var(--space-2);
 }
 
 .actions button {
-  flex: 1;
+  flex: 1 1 auto;
 }
 
+/* --------------------------------------------- Messages sous le plateau */
+
+/* Compte de points : information secondaire, discrète. */
 .pips {
-  margin: 0.25rem 0 0;
-  font-size: 0.85rem;
+  margin: var(--space-2) 0 0;
+  font-size: 15px;
+  line-height: 20px;
   color: var(--muted);
   text-align: center;
+  font-variant-numeric: tabular-nums lining-nums;
 }
 
-.info,
-.prompt {
-  min-height: 1.45em;
-  margin: 0.4rem 0;
-}
-
+/* Ce qui vient de se passer (coup de l'ordinateur, jet d'ouverture) :
+ * secondaire, mais lisible. */
 .info {
+  min-height: 25px;
+  margin: var(--space-3) 0 0;
   color: var(--muted);
 }
 
-.prompt {
-  font-weight: 600;
+.info:empty {
+  margin-top: 0;
 }
 
-/* L'ordinateur réfléchit : trois points qui apparaissent l'un après l'autre. */
+/* La consigne du moment : ce qui doit ressortir de l'écran. Fond d'accent
+ * léger quand c'est au joueur, neutre pendant que l'ordinateur réfléchit. */
+.prompt {
+  min-height: calc(25px + 2 * var(--space-3));
+  margin: var(--space-3) 0;
+  padding: var(--space-3) var(--space-4);
+  font-weight: 700;
+  background: var(--accent-soft);
+  border-radius: var(--radius-md);
+}
+
+.prompt.thinking,
+body.busy .prompt {
+  font-weight: 400;
+  background: var(--surface-sunken);
+}
+
+/* Fin de partie : le résultat en titre. */
+#game:has(#again:not([hidden])) .prompt {
+  font-size: 24px;
+  line-height: 30px;
+}
+
+/* L'ordinateur réfléchit : trois points qui apparaissent l'un après
+ * l'autre (la seule animation en boucle). */
 .prompt.thinking::after {
   content: "";
   animation: thinking 1.2s steps(4, end) infinite;
@@ -168,6 +348,17 @@ button:disabled {
   75% { content: "..."; }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .prompt.thinking::after {
+    animation: none;
+    content: "…";
+  }
+
+  button:active:not(:disabled) {
+    transform: none;
+  }
+}
+
 /* ------------------------------------------------------------ Plateau */
 
 .board {
@@ -176,7 +367,23 @@ button:disabled {
   height: auto;
   aspect-ratio: 640 / 520;
   user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
   -webkit-tap-highlight-color: transparent;
+  font-family: var(--font-sans);
+  /* Alegreya Sans dessine par défaut des chiffres elzéviriens (de hauteurs
+   * variables) : sur le plateau, des chiffres alignés se lisent mieux. */
+  font-variant-numeric: tabular-nums lining-nums;
+}
+
+/* Téléphone en portrait : le plateau, héros de l'écran, prend la largeur
+ * presque entière (8 px de marge au lieu de 16) ; chaque pixel compte pour
+ * toucher un pion. */
+@media (max-width: 40rem) and (orientation: portrait) {
+  .board {
+    width: calc(100% + 2 * (var(--space-4) - var(--space-2)));
+    margin-inline: calc(var(--space-2) - var(--space-4));
+  }
 }
 
 .board-frame { fill: var(--frame); }
@@ -187,8 +394,9 @@ button:disabled {
 .point-b { fill: var(--point-b); }
 
 .point-number {
-  fill: var(--muted);
+  fill: var(--point-label);
   font-size: 13px;
+  font-weight: 500;
   text-anchor: middle;
 }
 
@@ -206,14 +414,24 @@ button:disabled {
   stroke: var(--checker-computer-edge);
 }
 
+/* Filet intérieur des pions (bundle.css), prêt pour le jour où le plateau
+ * le dessine. */
+.checker-ring {
+  fill: none;
+  stroke-width: 1.5;
+}
+
+.ring-player { stroke: var(--checker-player-edge); }
+.ring-computer { stroke: var(--checker-computer-edge); }
+
 .checker.movable {
   stroke: var(--highlight);
-  stroke-width: 4;
+  stroke-width: 3;
 }
 
 .checker.selected {
   stroke: var(--highlight);
-  stroke-width: 7;
+  stroke-width: 6;
 }
 
 .checker-count {
@@ -226,19 +444,67 @@ button:disabled {
 .count-computer { fill: var(--count-computer); }
 
 .target-zone { fill: var(--target); }
-.last-move { fill: var(--last-move); }
+/* Le dernier coup de l'ordinateur (couleur laiton, charte) : une flèche par
+ * demi-coup, les pions arrivés et frappés entourés, un pion fantôme là où
+ * un pion est parti. */
+.trace-arrow {
+  stroke: var(--last-move);
+  stroke-width: 5;
+  stroke-linecap: round;
+  opacity: 0.85;
+}
 
-.die-player { fill: var(--die-player); stroke: var(--checker-player-edge); }
-.die-computer { fill: var(--die-computer); stroke: var(--checker-computer-edge); }
+.trace-head { fill: var(--last-move); }
+
+.trace-landed,
+.trace-hit {
+  fill: none;
+  stroke: var(--last-move);
+  stroke-width: 4;
+}
+
+.trace-hit { stroke-dasharray: 6 4; }
+
+.trace-ghost {
+  fill: none;
+  stroke: var(--last-move);
+  stroke-width: 2.5;
+  stroke-dasharray: 5 4;
+}
+
+.die-player { fill: var(--die-player); stroke: var(--checker-player-edge); stroke-width: 1.5; }
+.die-computer { fill: var(--die-computer); stroke: var(--checker-computer-edge); stroke-width: 1.5; }
 .pip-player { fill: var(--pip-player); }
 .pip-computer { fill: var(--pip-computer); }
 
+/* Dés du joueur en attente d'être lancés, et videau quand il peut doubler :
+ * ils se touchent comme les boutons. */
+.die-waiting rect {
+  stroke: var(--highlight);
+  stroke-width: 2.5;
+  stroke-dasharray: 5 4;
+}
+
+.cube.can-double .cube-face {
+  stroke: var(--highlight);
+  stroke-width: 3;
+}
+
+/* Jet sans coup possible : dés estompés et barrés. */
+.die-blocked { opacity: 0.5; }
+
+.die-strike {
+  stroke: var(--text);
+  stroke-width: 3;
+  stroke-linecap: round;
+}
+
 .cube-face { fill: var(--cube); stroke: var(--checker-player-edge); stroke-width: 2; }
 
 .cube-value {
   fill: var(--cube-text);
   font-size: 17px;
-  font-weight: 700;
+  font-weight: 800;
   text-anchor: middle;
 }
 
@@ -249,70 +515,138 @@ button:disabled {
 
 /* --------------------------------------------------------------- Aide */
 
+.help {
+  max-width: var(--page-width);
+  margin: 0 auto;
+}
+
 .help h2 {
-  margin-top: 1.5rem;
-  font-size: 1.2rem;
+  margin: var(--space-8) 0 var(--space-2);
+  font-size: 24px;
+  line-height: 30px;
+  font-weight: 700;
 }
 
 .help h3 {
-  margin-bottom: 0.25rem;
-  font-size: 1rem;
+  margin: var(--space-6) 0 var(--space-1);
+  font-size: 20px;
+  line-height: 26px;
+  font-weight: 700;
+}
+
+.help p {
+  margin: var(--space-2) 0;
 }
 
 .steps {
-  padding-left: 1.25rem;
+  margin: var(--space-2) 0;
+  padding-left: var(--space-6);
+}
+
+.steps li + li {
+  margin-top: var(--space-1);
+}
+
+.steps li::marker {
+  color: var(--muted);
+}
+
+/* Glossaire : une liste de définitions, sur une carte. */
+.glossary {
+  margin: var(--space-3) 0 0;
+  padding: var(--space-1) var(--space-4);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-raised);
 }
 
 .glossary dt {
-  margin-top: 0.6rem;
-  font-weight: 600;
+  padding-top: var(--space-3);
+  font-weight: 700;
 }
 
 .glossary dd {
   margin: 0;
+  padding-bottom: var(--space-3);
+}
+
+.glossary dd + dt {
+  border-top: 1px solid var(--border);
 }
 
 .about {
-  margin-top: 2rem;
-  font-size: 0.85rem;
+  margin-top: var(--space-8);
+  font-size: 15px;
+  line-height: 20px;
   color: var(--muted);
 }
 
+/* Une cible tactile confortable pour le lien. */
 .about a {
-  color: var(--accent);
+  display: inline-block;
+  padding-block: 12px;
 }
 
 /* ------------------------------------------------------- Mode paysage */
 
-/* Téléphone tourné : le plateau prend toute la hauteur disponible, et les
- * messages et boutons passent dans une colonne à sa droite. */
+/* Téléphone tourné : le plateau prend toute la hauteur de l'écran, à
+ * gauche ; la barre haute, les messages et les boutons passent dans une
+ * colonne à sa droite. */
 @media (orientation: landscape) and (max-height: 40rem) {
   body {
     max-width: none;
+    padding: 0 var(--space-4);
   }
 
-  .topbar {
-    padding: 0.25rem 0;
-  }
-
-  #game {
+  /* Le jeu en deux colonnes : #game laisse ses enfants dans la grille de
+   * la page. Quand l'aide est affichée, #game est caché, la première
+   * colonne n'a plus de largeur et l'aide prend toute la place. */
+  body {
     display: grid;
-    grid-template-columns: auto minmax(12rem, 1fr);
-    grid-template-rows: auto auto auto 1fr;
-    column-gap: 1rem;
+    grid-template-columns: auto minmax(13rem, 1fr);
+    grid-template-rows: auto auto auto auto auto 1fr;
+    column-gap: var(--space-4);
     align-items: start;
   }
 
+  #game {
+    display: contents;
+  }
+
+  .topbar {
+    grid-column: 2;
+    grid-row: 1;
+    min-height: 0;
+    padding-block: var(--space-2) 0;
+  }
+
   .board {
-    grid-row: 1 / 5;
+    grid-column: 1;
+    grid-row: 1 / -1;
     width: auto;
-    /* Hauteur de l'écran moins la barre du haut (boutons de 40 px). */
-    height: calc(100vh - 3.5rem);
-    height: calc(100dvh - 3.5rem);
+    height: calc(100vh - 2 * var(--space-2));
+    height: calc(100dvh - 2 * var(--space-2));
     max-width: 70vw;
+    margin-block: var(--space-2);
+  }
+
+  .pips,
+  .info,
+  .prompt,
+  .actions {
+    grid-column: 2;
   }
 
   .pips {
     text-align: left;
   }
+
+  .actions {
+    margin-bottom: var(--space-2);
+  }
+
+  .help {
+    grid-column: 1 / -1;
+  }
 }

web/fonts/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2013 The Alegreya Sans Project Authors (https://github.com/huertatipografica/Alegreya-Sans)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

web/icons/icon.svg

@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-  <!-- Icône provisoire (pas un logo) : deux pions sur du bois. Les PNG sont
-       produits à partir des mêmes formes par scripts/make-icons.py. -->
-  <rect width="512" height="512" fill="#6b4426"/>
-  <circle cx="300" cy="300" r="120" fill="#2b221c" stroke="#0d0a08" stroke-width="10"/>
-  <circle cx="212" cy="212" r="120" fill="#fbf6ea" stroke="#7d6a52" stroke-width="10"/>
-</svg>

web/index.html

@@ -4,17 +4,31 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="color-scheme" content="light dark">
-<meta name="theme-color" content="#6b4426">
+<meta name="theme-color" content="#4A2E1F">
 <title>Ustagammon</title>
 <link rel="manifest" href="manifest.webmanifest">
-<link rel="icon" href="icons/icon.svg" type="image/svg+xml">
+<link rel="icon" href="icons/favicon.svg" type="image/svg+xml">
+<link rel="icon" href="icons/favicon-32.png" sizes="32x32" type="image/png">
+<link rel="apple-touch-icon" href="icons/apple-touch-icon-180.png">
+<link rel="preload" href="fonts/AlegreyaSans-Regular.woff2" as="font" type="font/woff2" crossorigin>
+<link rel="preload" href="fonts/AlegreyaSans-Bold.woff2" as="font" type="font/woff2" crossorigin>
 <link rel="stylesheet" href="app.css">
 <script type="module" src="app/main.js"></script>
 </head>
-<body>
+<body class="busy">
 <!-- Les textes des boutons et des messages viennent de app/src/ui/texts.ts. -->
 <header class="topbar">
-  <h1>Ustagammon</h1>
+  <!-- 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. -->
+  <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>
+  </h1>
   <button id="help-button" type="button" class="secondary"></button>
   <button id="new-game" type="button" class="secondary"></button>
 </header>
@@ -30,6 +44,8 @@
     <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>
   <noscript><p>Ustagammon a besoin de JavaScript.</p></noscript>

web/manifest.webmanifest

@@ -7,12 +7,13 @@
   "scope": "./",
   "display": "standalone",
   "orientation": "any",
-  "background_color": "#f7f2e8",
-  "theme_color": "#6b4426",
+  "background_color": "#F5EFE5",
+  "theme_color": "#4A2E1F",
   "icons": [
-    { "src": "icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
-    { "src": "icons/icon-512.png", "sizes": "512x512", "type": "image/png" },
-    { "src": "icons/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" },
-    { "src": "icons/icon.svg", "sizes": "any", "type": "image/svg+xml" }
+    { "src": "icons/icone-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
+    { "src": "icons/icone-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" },
+    { "src": "icons/icone-maskable-192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" },
+    { "src": "icons/icone-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" },
+    { "src": "icons/icone.svg", "sizes": "any", "type": "image/svg+xml", "purpose": "any" }
   ]
 }