Recette design : tutoriel en paysage, sens du jeu, bandeau de mise à jour

- Sens du jeu (étape 2) : le tracé passe sous les pions et sous les
  numéros des flèches ; liseré ivoire de 8 px, points de 4 px à l'écran.
- Tutoriel en paysage : plateau à gauche sur toute la hauteur (géométrie
  du jeu en paysage, colonne gauche du cadre), colonne à droite avec la
  barre de progression, le titre, le texte, la consigne et les boutons ;
  seul le texte peut défiler. Tient en 915x412 et 844x320.
- Recette automatique étendue au tutoriel : numéros d'au moins 12 px,
  page sans défilement et boutons en vue en paysage, captures en 844x320.
- Boutons du videau « Prendre » et « Passer », lien « Quitter ».
- Bandeau « Nouvelle version prête. » en bas, au-dessus de la barre
  d'actions, seulement entre deux tours (betweenTurns, testé).
- Test des adresses : le lien Aide est lu au moment du toucher, la carte
  du terme ouvert est mesurée sous la barre de l'aide.

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

web/app.css

@@ -1875,13 +1875,6 @@ html.bare .topbar {
   width: 100%;
 }
 
-/* Bandeau de mise à jour : en haut, discret, jamais sur la barre
- * d'actions ni sur « Reprendre l'ancienne ». */
-.update-banner {
-  top: var(--space-2);
-  bottom: auto;
-}
-
 /* Tutoriel. */
 .tutorial-head {
   display: flex;
@@ -2039,8 +2032,132 @@ html.bare .topbar {
   stroke: var(--brand-noyer);
 }
 
-/* En paysage, le plateau du tutoriel tient dans la hauteur de l'écran. */
-html.landscape .tutorial-board,
+/* En paysage, comme la position partagée : le plateau à gauche sur toute
+ * la hauteur (avec la colonne gauche du cadre), et à droite une colonne
+ * avec la barre de progression, le titre, le texte, la consigne « à vous »
+ * et les boutons, le tout sans défilement de la page. Si le texte est trop
+ * long pour l'écran, lui seul défile : les boutons restent en vue. */
+html.landscape .tutorial {
+  position: fixed;
+  inset: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) clamp(288px, 44vw, 400px);
+  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
+  max-width: none;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  background: var(--background);
+}
+
+html.landscape .tutorial > * {
+  grid-column: 2;
+  margin-inline: 0;
+  padding-inline: var(--space-4) calc(var(--space-4) + env(safe-area-inset-right));
+}
+
+html.landscape .tutorial .overline {
+  display: none;
+}
+
+html.landscape .tutorial-head {
+  grid-row: 1;
+  min-height: 44px;
+  padding-top: 0;
+}
+
+html.landscape .tutorial-title {
+  grid-row: 2;
+  margin: 0 0 var(--space-1);
+  padding-right: calc(44px + var(--space-4));
+  font-size: 20px;
+  line-height: 26px;
+}
+
+/* La boîte du plateau s'efface : le plateau et « Revoir » se placent
+ * eux-mêmes dans la grille. */
+html.landscape .tutorial-board-box {
+  display: contents;
+}
+
+html.landscape .tutorial-board {
+  grid-row: 1 / -1;
+  grid-column: 1;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  aspect-ratio: auto;
+  background: var(--frame);
+}
+
+html.landscape #tutorial-replay {
+  position: static;
+  grid-row: 2;
+  grid-column: 2;
+  justify-self: end;
+  align-self: start;
+  margin: -9px calc(var(--space-2) + env(safe-area-inset-right)) 0 0;
+  padding: 0;
+}
+
+html.landscape .tutorial-body {
+  grid-row: 3;
+  min-height: 0;
+  overflow-y: auto;
+  font-size: 15px;
+  line-height: 20px;
+}
+
+html.landscape .tutorial-text {
+  margin: 0;
+  padding-right: 0;
+}
+
+html.landscape .tutorial-text p {
+  margin-bottom: var(--space-2);
+}
+
+html.landscape .tutorial-task {
+  margin: 0;
+  padding: var(--space-2) 12px;
+}
+
+html.landscape .tutorial-feedback {
+  min-height: 0;
+  margin: var(--space-2) 0 0;
+}
+
+html.landscape .tutorial-cube {
+  grid-row: 4;
+  margin-top: var(--space-2);
+}
+
+/* La réponse au double donnée et saluée, les deux boutons n'ont plus
+ * d'usage : en paysage, leur place revient au texte. */
+html.landscape .tutorial[data-solved] .tutorial-cube {
+  display: none;
+}
+
+/* Écran très bas (844 × 320) : texte un cran plus petit. */
+@media (max-height: 360px) {
+  html.landscape .tutorial-body {
+    font-size: 14px;
+    line-height: 18px;
+  }
+
+  html.landscape .tutorial-title {
+    font-size: 18px;
+    line-height: 24px;
+  }
+}
+
+html.landscape .tutorial-nav {
+  grid-row: 5;
+  margin: 0;
+  padding-block: var(--space-2) calc(var(--space-2) + env(safe-area-inset-bottom));
+}
+
+/* Le premier lancement, en paysage : le plateau tient dans la hauteur. */
 html.landscape .welcome-board {
   width: min(100%, calc(70vh * 640 / 520));
   height: auto;

web/index.html

@@ -188,7 +188,8 @@
   <span class="banner-timer" aria-hidden="true"></span>
 </div>
 
-<!-- « Nouvelle version disponible » : jamais pendant un coup en cours. -->
+<!-- « Nouvelle version prête. » : en bas, comme « Reprendre l'ancienne »,
+     seulement entre deux tours. -->
 <div id="update-banner" class="banner update-banner" role="status" hidden>
   <span id="update-text"></span>
   <button id="update-apply" type="button" class="secondary"></button>