Contour des pions blancs plus sombre en thème clair ; recette des pions du joueur

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

docs/adr/0010-identite-visuelle.md

@@ -71,7 +71,8 @@ au noyer. Après comparaison sur le canevas (rangée « Retours des premiers
 joueurs »), Pierre retient le blanc et le noir, avec un contour.
 
 - Pions du joueur blancs (`#FAFAF7`), contour et filet gris foncé
-  (`#6E6E69`) ; pions de l'ordinateur noirs (`#1C1C1C`), contour et filet gris
+  (`#55554F` en thème clair, pour 3:1 sur les flèches en chêne ; `#6E6E69` en
+  sombre) ; pions de l'ordinateur noirs (`#1C1C1C`), contour et filet gris
   clair (`#B5B5B0`), dans les deux thèmes. Dés et videau suivent les pions.
 - Le contour assure la lisibilité partout : pions noirs sur la barre (6,8:1
   en thème clair, 8,5:1 en sombre), pions blancs sur le fond clair (3,8:1).

docs/identite/charte/recette-ux.md

@@ -9,6 +9,7 @@ Référence : `interaction.md`, maquettes « Révision UX » du canevas.
 
 - [ ] Flèches impaires en `point-a`, paires en `point-b` ; 12 et 13 de couleurs différentes.
 - [ ] Numéros des flèches à l'extérieur du plateau, sur le cadre (bande haute et bande basse), en portrait comme en paysage ; jamais dans le fond du plateau entre les deux rangées. (Vérifié par `tests/browser/retours-joueurs.mjs`.)
+- [ ] Pions du joueur lisibles partout : en thème clair, contour `checker-player-edge` à 3:1 au moins sur les flèches en chêne et sur le fond. Règle automatique : `checkerContrastProblems` de `tests/browser/recette.mjs`.
 - [ ] Pions de l'ordinateur lisibles partout : contour et filet `checker-computer-edge` (gris clair) visibles sur la barre, sur les flèches sombres et en thème sombre. Règle automatique : là où sa couleur ne se détache pas de son fond (moins de 3:1), son contour s'en détache à 3:1 au moins (`checkerContrasts` de `tests/browser/recette.mjs`).
 - [ ] Une seule action principale (brique) visible à la fois.
 - [ ] Aucun `window.confirm` ni `alert` dans le code de l'app (`grep -rn "confirm(\|alert(" app/src` vide).

docs/identite/charte/tokens.json

@@ -224,10 +224,10 @@
    {
     "name": "checker-player-edge",
     "value": {
-     "light": "#6E6E69",
+     "light": "#55554F",
      "dark": "#6E6E69"
     },
-    "usage": "Contour et filet des pions blancs : gris foncé, pour qu'ils se détachent du fond clair du plateau."
+    "usage": "Contour des pions blancs. Thème clair : #55554F, pour 3:1 au moins sur les flèches en chêne (3,5:1) et le fond (5,5:1). Thème sombre : le pion blanc se détache déjà par sa couleur (plus de 5:1)."
    },
    {
     "name": "checker-computer",

tests/browser/recette.mjs

@@ -236,16 +236,26 @@ export async function checkerContrasts(target) {
  * partout ») : là où un pion de l'ordinateur ne se détache pas de son fond
  * par sa couleur (moins de 3:1 : sur la barre, les flèches sombres, le fond
  * sombre), son contour s'en détache à 3:1 au moins (guide de marque :
- * contours porteurs de sens à 3:1). contrasts : le résultat de
- * checkerContrasts. Renvoie la liste des écarts, décrits (vide si tout va
- * bien).
+ * contours porteurs de sens à 3:1). Et (« Pions du joueur lisibles
+ * partout ») : en thème clair, le contour d'un pion du joueur atteint 3:1 sur
+ * les flèches en chêne et sur le fond. contrasts : le résultat de
+ * checkerContrasts ; theme : « light » ou « dark ». Renvoie la liste des
+ * écarts, décrits (vide si tout va bien).
  */
-export function checkerContrastProblems(contrasts) {
+export function checkerContrastProblems(contrasts, theme) {
     const problems = new Set();
     for (const c of contrasts) {
         if (c.side === "computer" && c.fill < 3 && c.edge < 3) {
             problems.add(`pion de l'ordinateur sur ${c.on} (${c.board}) : contour à ${c.edge.toFixed(2)}:1`);
         }
+        if (
+            c.side === "player" &&
+            theme === "light" &&
+            (c.on === "flèche paire" || c.on === "fond") &&
+            c.edge < 3
+        ) {
+            problems.add(`pion du joueur sur ${c.on} (${c.board}) : contour à ${c.edge.toFixed(2)}:1`);
+        }
     }
     return [...problems];
 }

tests/browser/retours-joueurs.mjs

@@ -163,7 +163,7 @@ async function checkScreen(page, theme, name, selector, settle = async () => {})
         check(numbers.length === 0, `${where} : numéros : ${numbers.join(", ")}`);
         const measured = await checkerContrasts(page);
         check(measured.length > 0, `${where} : aucun pion mesuré`);
-        const low = checkerContrastProblems(measured);
+        const low = checkerContrastProblems(measured, theme);
         check(low.length === 0, `${where} : ${low.join(", ")}`);
         contrasts[theme].push(...measured);
         if (full) {

web/app.css

@@ -82,7 +82,7 @@
   --point-b: #c9ae88;
   --point-number: #f3ead8;
   --checker-player: #fafaf7;
-  --checker-player-edge: #6e6e69;
+  --checker-player-edge: #55554f;
   --checker-computer: #1c1c1c;
   --checker-computer-edge: #b5b5b0;
   --count-player: #1c1c1c;