Mode paysage : plateau ajusté à la hauteur de l'écran, boutons à droite

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

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;
+  }
+}