Recette design du match : Crawford en paysage, « Nouvelle partie » en deux colonnes, « Rejouer »

- Paysage : pendant la partie Crawford, la consigne de la bande centrale
  commence par « Partie Crawford · » ; la police se resserre si besoin.
- Écran « Nouvelle partie » en paysage : deux colonnes au-dessus de la
  barre d'action (type de partie et longueur à gauche, niveau et conseil
  du maître à droite), tout tient en 915x412 et en 844x320.
- Fin de partie : « Rejouer » relance tout de suite une partie aux mêmes
  réglages (un match de même longueur après un match), « Partie suivante »
  dans un match qui continue, lien « Changer les réglages ».
- Recette automatique : aucun élément interactif visible sous une barre
  d'action collée, vérifié sur chaque écran capturé (tests/browser/recette.mjs).
- Scénario « Comment rejouer avec les mêmes réglages ? ».

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

web/app.css

@@ -835,6 +835,17 @@ button:disabled {
   padding: 0 12px;
 }
 
+/* Fin de partie : « Changer les réglages », lien secondaire sous les
+ * boutons. */
+.panel-link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 44px;
+  margin-top: var(--space-2);
+  font-weight: 700;
+}
+
 /* « Nouvelle partie commencée. Reprendre l'ancienne », 10 s, avec sa
  * barre de temps. */
 .banner {
@@ -2339,6 +2350,14 @@ html.landscape .welcome {
   padding-bottom: var(--space-6);
 }
 
+/* Portrait : les deux colonnes l'une sous l'autre, comme une seule. */
+.new-game-column {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  min-width: 0;
+}
+
 .new-game-body .overline {
   margin-top: var(--space-4);
 }
@@ -2505,6 +2524,109 @@ html.landscape .welcome {
   color: var(--muted);
 }
 
+/* En paysage (915 × 412, et jusqu'à 844 × 320), tout tient sans défiler :
+ * deux colonnes au-dessus de la barre d'action, le type de partie à
+ * gauche, le niveau et le conseil du maître à droite ; tout est resserré,
+ * et la barre d'action tient sur une ligne, le bouton à droite sous le
+ * pouce. */
+html.landscape .new-game {
+  max-width: 60rem;
+}
+
+html.landscape .new-game-head {
+  min-height: 44px;
+}
+
+html.landscape .new-game-head h2 {
+  font-size: 20px;
+  line-height: 24px;
+}
+
+html.landscape .new-game-body {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: var(--space-6);
+  align-content: start;
+  padding-bottom: var(--space-2);
+}
+
+html.landscape .new-game-column {
+  gap: var(--space-2);
+}
+
+html.landscape .new-game-body .overline {
+  margin-top: 0;
+}
+
+html.landscape .new-game-body .during-game {
+  display: none;
+}
+
+html.landscape .level-bars .level {
+  height: 48px;
+  padding: 3px;
+}
+
+html.landscape .level-1 .level-bar { height: 10px; }
+html.landscape .level-2 .level-bar { height: 17px; }
+html.landscape .level-3 .level-bar { height: 24px; }
+html.landscape .level-4 .level-bar { height: 30px; }
+html.landscape .level-5 .level-bar { height: 36px; }
+html.landscape .level-6 .level-bar { height: 42px; }
+
+html.landscape .level-name {
+  font-size: 18px;
+  line-height: 22px;
+}
+
+html.landscape .level-text {
+  font-size: 15px;
+  line-height: 20px;
+}
+
+html.landscape .new-game-body .item {
+  min-height: 44px;
+}
+
+html.landscape .new-game-body .item-label {
+  line-height: 22px;
+}
+
+html.landscape .new-game-body .item small {
+  line-height: 18px;
+}
+
+html.landscape .new-game-actions {
+  flex-direction: row;
+  gap: var(--space-4);
+  align-items: center;
+  justify-content: flex-end;
+  padding: var(--space-2) 0;
+}
+
+html.landscape .new-game-kept {
+  order: -1;
+  text-align: right;
+}
+
+/* Un peu plus d'air quand la hauteur le permet (915 × 412). */
+@media (min-height: 380px) {
+  html.landscape .new-game-column {
+    gap: var(--space-3);
+  }
+
+  html.landscape .level-bars .level {
+    height: 64px;
+  }
+
+  html.landscape .level-1 .level-bar { height: 14px; }
+  html.landscape .level-2 .level-bar { height: 22px; }
+  html.landscape .level-3 .level-bar { height: 30px; }
+  html.landscape .level-4 .level-bar { height: 39px; }
+  html.landscape .level-5 .level-bar { height: 48px; }
+  html.landscape .level-6 .level-bar { height: 58px; }
+}
+
 /* En paysage, comme l'écran de jeu : le plateau à gauche sur toute la
  * hauteur (colonne gauche du cadre avec le videau seul), le titre, le contexte et les actions
  * dans une colonne à droite. */

web/index.html

@@ -186,6 +186,7 @@
       <button id="panel-secondary" type="button" class="secondary"></button>
       <button id="panel-primary" type="button"></button>
     </div>
+    <a id="panel-settings" class="panel-link" href="#/nouvelle-partie" hidden></a>
   </div>
 </div>