# Révision UX : portrait stable, compte de points, menu, paysage « plateau = écran »

- **Date** : 2026-11-03
- **Étape** : 0e.3 (feuille de route)
- **Statut** : prévu (après la fusion de 0e.1, qui touche les mêmes fichiers)
- **Exécutant** : sous-agent general-purpose, dans un worktree

## Objectif

Appliquer la revue UX (0e.2) telle qu'arbitrée par la session « identité » sur
délégation de Pierre le 2026-11-03, et l'amendement de l'ADR 0012.

## Références

- Maquettes : https://claude.ai/artifact/CQw6vbDpi6XQqVWQa4sANe, rangées
  « Révision UX » en bas du canevas.
- Règles : section « Interaction » du design system, copiée dans
  `docs/identite/charte/interaction.md` (durées, courbes, motifs de vibration,
  touches) et composant Icons (10 pictogrammes).
- Rapport du designer UI : conservé dans la description de la MR qui clôt ce
  plan.

## Décisions à appliquer

1. **Portrait stable** (maquette « Portrait révisé ») :
   - une barre haute avec le symbole et trois pictogrammes, libellés de 13 px dessous : Aide, Plein écran, Menu ;
   - le bandeau de l'ordinateur, puis le plateau, puis le bandeau du joueur ;
   - une ligne réservée de 44 px : le dernier coup de l'ordinateur avec ↻, ou la ligne du maître ;
   - la consigne ;
   - une barre d'actions collée en bas, l'action secondaire à gauche et la principale à droite (« Jouer ce coup »). Toucher les dés valide aussi ;
   - la durée de calcul affichée disparaît.
2. **Compte de points** :
   - en portrait, des bandeaux. Les chiffres sont en 20 px gras, alignés. Le bandeau de celui qui a la main est en accent-soft (« Vous · à vous de jouer »). L'écart s'écrit « mène de 8 », en muted, du côté de celui qui mène. Toucher le chiffre ouvre une bulle avec le texte de la fiche du glossaire (source unique, ADR 0008) ;
   - en paysage, des pastilles aux bouts de la barre.
3. **Menu en feuille** qui monte du bas :
   - il contient Nouvelle partie, Plein écran, Aide et glossaire, Thème, et les interrupteurs Vibrations et « Écran allumé pendant la partie » ;
   - « Nouvelle partie » agit sans confirmation. Un bandeau « Nouvelle partie commencée. Reprendre l'ancienne » reste 10 s avec une barre de temps, et l'ancienne partie se restaure depuis son journal ;
   - plus de `window.confirm`.
4. **Pas de passage automatique du tour** quand aucun coup n'est possible : les dés sont barrés avec le message, et le joueur passe en touchant les dés (ou Espace). Ajouter `overscroll-behavior: none` et `user-select: none`. L'écran reste allumé pendant une partie (Wake Lock), activé par défaut, avec un interrupteur.
5. **Paysage, « le plateau est l'écran »** (ADR 0012 amendé) :
   - la vue s'applique dès la rotation, sur `100dvh` ;
   - la géométrie suit l'écran, par une fonction pure testée unitairement, d'après les formules du composant Board des maquettes ;
   - une colonne de commandes à gauche dans le cadre : menu en haut, videau au milieu, ↶ en bas, remplacé par ↻ quand le coup de l'ordinateur est montré ;
   - les sorties restent libres ;
   - numéros des flèches à 12 px au moins ;
   - la fin de partie s'affiche dans un panneau centré sur un voile ;
   - le plein écran s'ouvre sur un geste (pictogramme ou menu), avec `requestFullscreen` puis `screen.orientation.lock` et un repli par rotation CSS. Ce n'est pas le réglage par défaut de l'app installée.
6. **Vibrations** (`navigator.vibrate`, si disponible) aux quatre moments, avec les motifs d'`interaction.md` : pion posé, pion frappé, double proposé par l'ordinateur, fin de partie. Elles sont activées par défaut, rien au lancer des dés, et elles doublent toujours un signal visible.
7. **Pictogrammes** du composant Icons, en SVG dans le site (CSP : pas de style en ligne).
8. **Consigne** : forme longue pendant les trois premières parties, puis forme courte.
9. **Mouvement** :
   - durées de 90, 160 et 240 ms, avec la courbe cubic-bezier(0.2, 0, 0, 1) ;
   - l'ordinateur joue pion par pion : 160 ms par pion, 120 ms de pause ;
   - `prefers-reduced-motion` est respecté.
10. **Clavier** (priorité basse) : prévoir dans l'architecture une table d'actions commune au toucher et au clavier. Les touches d'`interaction.md` peuvent venir dans une MR ultérieure.

## Consignes

ADR 0007 : ni le domaine ni le moteur ne changent pour la mise en page. ADR 0008 : scénarios Gherkin pour les comportements visibles nouveaux (nouvelle partie annulable, menu). Aucune nouvelle dépendance. `tests/browser/play.mjs` étendu aux deux orientations, avec des captures Playwright en 412×915, 915×412 et 844×320, en thème clair et sombre, rangées dans un dossier indiqué par la session principale pour la revue design. `make lint`, `make test` et `make test-browser` passent.

## Résultat

À remplir à la clôture.