Recette 1g : textes corrigés, boutons en bas, barre haute en paysage

Leçon 1 §2 (flèche 7 vide, 5 déjà bloqué), leçon 2 « Faire des points »,
flèches 7 à 12, reformulations des leçons 3 et 4. Écran des leçons et du
tutoriel : « Retour » et « Continuer » en bas en portrait, « Revoir » sur
la ligne du titre, ligne « Leçon n · … » gardée en paysage. Barre haute
visible hors de l'écran de jeu en paysage (défaut antérieur à 1g), avec
un contrôle dans la recette automatique. Rappel des règles haut de
44 px ; « Aucune leçon terminée sur 5 · … » sur l'accueil.

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

web/app.css

@@ -1201,6 +1201,13 @@ html.landscape.page-open body {
   background: var(--background);
 }
 
+/* Hors de l'écran de jeu, la barre haute (Aide, Plein écran, Menu) reste
+ * en paysage : seul le plateau en paysage s'en passe. Les écrans qui ont
+ * leur propre en-tête (bare) la masquent toujours. */
+html.landscape.page-open:not(.bare) .topbar {
+  display: flex;
+}
+
 /* Repli du plein écran : le paysage ne peut pas être verrouillé, l'écran
  * entier tourne d'un quart de tour dans le portrait. Les touchers suivent
  * la rotation ; le plateau et les fenêtres sont posés dans #screen. */
@@ -1876,17 +1883,20 @@ html.bare .topbar {
 .lessons-rules {
   display: flex;
   align-items: center;
+  width: fit-content;
   min-height: 44px;
   margin-top: var(--space-2);
+  font-size: 15px;
+  line-height: 20px;
+  color: var(--muted);
+  text-decoration: none;
 }
 
-.lessons-rules a {
-  display: inline-flex;
-  align-items: center;
-  min-height: 44px;
+.lessons-rules span {
   margin-left: var(--space-1);
   font-weight: 700;
   color: var(--accent);
+  text-decoration: underline;
 }
 
 #lessons-status:empty {
@@ -2136,8 +2146,28 @@ html.bare .topbar {
   color: var(--muted);
 }
 
-.tutorial-title {
+/* En portrait, l'écran tient au moins la hauteur de l'écran : « Retour »
+ * et « Continuer » restent en bas, sous le pouce. */
+.tutorial {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  min-height: 100vh;
+  min-height: 100dvh;
+}
+
+/* Le titre, et « Revoir » sur sa ligne, à droite. */
+.tutorial-title-row {
+  display: flex;
+  gap: var(--space-2);
+  align-items: center;
   margin: var(--space-1) 0 var(--space-3);
+}
+
+.tutorial-title {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
   font-size: 24px;
   line-height: 30px;
 }
@@ -2152,16 +2182,13 @@ html.bare .topbar {
   }
 }
 
-.tutorial-board-box .tutorial-replay {
-  position: absolute;
-  right: var(--space-1);
-  bottom: calc(-44px - var(--space-1));
+.tutorial-replay {
+  flex: none;
   color: var(--accent);
 }
 
 .tutorial-text {
   margin-top: var(--space-3);
-  padding-right: 52px;
 }
 
 .tutorial-text p {
@@ -2214,7 +2241,8 @@ html.bare .topbar {
   display: grid;
   grid-template-columns: 1fr 1.4fr;
   gap: var(--space-2);
-  margin-top: var(--space-6);
+  margin-top: auto;
+  padding-top: var(--space-6);
 }
 
 .tutorial-nav .button {
@@ -2281,16 +2309,46 @@ html.landscape .tutorial-head {
   padding-top: 0;
 }
 
-html.landscape .tutorial-title {
+html.landscape .tutorial-title-row {
   grid-row: 2;
   margin: 0 0 var(--space-1);
-  padding-right: calc(44px + var(--space-4));
+  padding-right: calc(var(--space-2) + env(safe-area-inset-right));
+}
+
+html.landscape .tutorial-title {
   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. */
+/* Une leçon garde en paysage sa ligne « Leçon 1 · 1 sur 4 · à vous »
+ * au-dessus du titre (recette 1g) : une rangée de plus dans la grille. */
+html.landscape #lesson {
+  grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
+}
+
+html.landscape #lesson .overline {
+  display: block;
+  grid-row: 2;
+}
+
+html.landscape #lesson .tutorial-title-row {
+  grid-row: 3;
+}
+
+html.landscape #lesson .tutorial-body {
+  grid-row: 4;
+}
+
+html.landscape #lesson .tutorial-cube {
+  grid-row: 5;
+}
+
+html.landscape #lesson .tutorial-nav {
+  grid-row: 6;
+}
+
+/* La boîte du plateau s'efface : le plateau se place lui-même dans la
+ * grille. */
 html.landscape .tutorial-board-box {
   display: contents;
 }
@@ -2305,16 +2363,6 @@ html.landscape .tutorial-board {
   background: var(--frame);
 }
 
-html.landscape .tutorial-board-box .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;