Tutoriel : même largeur à chaque étape ; règle ajoutée à la recette

Les pages sont des éléments de la colonne flexible #screen ; leurs marges
automatiques annulaient l'étirement, et une page au contenu court se
réduisait à la largeur de ce contenu : l'étape 6 « à vous » (consigne
courte, pas d'explication) avait un plateau de 300 px au lieu de 396 en
412 × 915. Les pages prennent toute la largeur, bornée par max-width.
La recette mesure le plateau et le texte à chaque écran du tutoriel, dans
les trois tailles, et refuse un plateau de largeur différente ou une page
plus large que l'écran (mesures dans tutoriel-largeurs.txt).

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

tests/browser/accueil.mjs

@@ -16,7 +16,7 @@
 
 import { readFileSync, writeFileSync, mkdirSync } from "node:fs";
 import { chromium, firefox } from "playwright";
-import { hiddenUnderActionBar } from "./recette.mjs";
+import { hiddenUnderActionBar, tutorialWidthProblems, tutorialWidths } from "./recette.mjs";
 
 const [base, browserName, shots, updateBase, updateDir] = process.argv.slice(2);
 const browserType = { chromium, firefox }[browserName];
@@ -171,6 +171,7 @@ async function checkTutorialView(page, name) {
                 return b.scrollHeight - b.clientHeight;
             })(),
             height: innerHeight,
+            width: innerWidth,
             buttons,
         };
     });
@@ -189,8 +190,13 @@ async function checkTutorialView(page, name) {
     }
     tutorialViews++;
     tutorialMinNumber = Math.min(tutorialMinNumber, view.minNumber);
+    // Largeurs du plateau et du texte, comparées d'une étape à l'autre à la
+    // fin du tutoriel (tutorialWidthProblems).
+    const widths = await tutorialWidths(page);
+    tutorialWidthViews.push({ name, size: `${view.width}x${view.height}`, ...widths });
 }
 let tutorialViews = 0;
+const tutorialWidthViews = [];
 let tutorialBodyScroll = { px: 0, where: "" };
 let tutorialMinNumber = Infinity;
 
@@ -331,6 +337,18 @@ async function playTouches(page, touches) {
     await until(page, "fin", () => location.hash === "#/tutoriel/fin");
     await page.click("#tutorial-next");
     await until(page, "première partie", () => location.hash === "#/" && window.__shown("game"));
+    if (full) {
+        // Les mesures, écran par écran, à côté des captures.
+        writeFileSync(`${dir}/tutoriel-largeurs.txt`, tutorialWidthViews.map((v) =>
+            `${v.size}\t${v.name}\tplateau ${v.board.toFixed(1)}\ttexte ${v.text.toFixed(1)}\tpage ${v.page}`)
+            .join("\n") + "\n");
+        const widthProblems = tutorialWidthProblems(tutorialWidthViews);
+        check(widthProblems.length === 0, `largeurs du tutoriel :\n  ${widthProblems.join("\n  ")}`);
+        const sizes = [...new Set(tutorialWidthViews.map((v) => v.size))];
+        log(`tutoriel : plateau de même largeur à chaque étape (${sizes.map((s) =>
+            `${s} : ${tutorialWidthViews.find((v) => v.size === s).board.toFixed(1)} px`).join(", ")}), ` +
+            "aucune page plus large que l'écran");
+    }
     log(`tutoriel : ${screens} écrans, gestes refusés puis justes sur les 4 écrans « à vous », fin` +
         (full ? ` ; recette sur ${tutorialViews} vues, numéros de ${tutorialMinNumber.toFixed(1)} px au moins, ` +
             `texte défilant au plus de ${tutorialBodyScroll.px} px${tutorialBodyScroll.px > 0 ? ` (${tutorialBodyScroll.where})` : ""}` : ""));