From 359cdcbb389a3c0aeccc65e272426c146d93b340 Mon Sep 17 00:00:00 2001
From: Pierre MARTIN <contact@pierre-martin.fr>
Date: Tue, 3 Nov 2026 01:22:54 +0100
Subject: [PATCH] =?UTF-8?q?Mode=20paysage=20:=20plateau=20ajust=C3=A9=20?=
 =?UTF-8?q?=C3=A0=20la=20hauteur=20de=20l'=C3=A9cran,=20boutons=20=C3=A0?=
 =?UTF-8?q?=20droite?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 tests/browser/play.mjs   | 14 ++++++++++++++
 web/app.css              | 35 +++++++++++++++++++++++++++++++++++
 web/manifest.webmanifest |  2 +-
 3 files changed, 50 insertions(+), 1 deletion(-)

diff --git a/tests/browser/play.mjs b/tests/browser/play.mjs
index 75a6b78..f417a34 100644
--- a/tests/browser/play.mjs
+++ b/tests/browser/play.mjs
@@ -248,6 +248,20 @@ await waitForPlayer();
 await shot("6-sombre");
 await page.emulateMedia({ colorScheme: "light" });
 
+step("paysage");
+// Téléphone tourné : le plateau et les boutons tiennent dans l'écran.
+for (const [width, height] of [[915, 412], [740, 360]]) {
+    await page.setViewportSize({ width, height });
+    const board = await page.locator("#board").boundingBox();
+    const actions = await page.locator(".actions").boundingBox();
+    check(board.y + board.height <= height && board.x + board.width <= width,
+        `paysage ${width}x${height} : plateau hors de l'écran`);
+    check(actions.y + actions.height <= height, `paysage ${width}x${height} : boutons hors de l'écran`);
+}
+log("paysage : plateau et boutons visibles en entier");
+await shot("6-paysage");
+await page.setViewportSize({ width: 360, height: 740 });
+
 step("mise en cache");
 // Hors ligne : une fois le cache du service worker rempli, la page se
 // recharge sans réseau, et le moteur répond.
diff --git a/web/app.css b/web/app.css
index da3f52d..0ed68b4 100644
--- a/web/app.css
+++ b/web/app.css
@@ -281,3 +281,38 @@ button:disabled {
 .about a {
   color: var(--accent);
 }
+
+/* ------------------------------------------------------- Mode paysage */
+
+/* Téléphone tourné : le plateau prend toute la hauteur disponible, et les
+ * messages et boutons passent dans une colonne à sa droite. */
+@media (orientation: landscape) and (max-height: 40rem) {
+  body {
+    max-width: none;
+  }
+
+  .topbar {
+    padding: 0.25rem 0;
+  }
+
+  #game {
+    display: grid;
+    grid-template-columns: auto minmax(12rem, 1fr);
+    grid-template-rows: auto auto auto 1fr;
+    column-gap: 1rem;
+    align-items: start;
+  }
+
+  .board {
+    grid-row: 1 / 5;
+    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);
+    max-width: 70vw;
+  }
+
+  .pips {
+    text-align: left;
+  }
+}
diff --git a/web/manifest.webmanifest b/web/manifest.webmanifest
index 3c45106..18eb96d 100644
--- a/web/manifest.webmanifest
+++ b/web/manifest.webmanifest
@@ -6,7 +6,7 @@
   "start_url": "./",
   "scope": "./",
   "display": "standalone",
-  "orientation": "portrait",
+  "orientation": "any",
   "background_color": "#f7f2e8",
   "theme_color": "#6b4426",
   "icons": [
-- 
2.54.0