Applique le gabarit sobre/compact/sans défilement à toutes les pages hors éditeur

Généralise le principe déjà en place pour l'édition d'objet (la page
n'occupe jamais plus que la hauteur de la fenêtre, seules ses zones
internes défilent) à toutes les pages restantes : liste des jeux, tableau
de bord d'un jeu, écrans, éléments de jeu, variables, nouvel objet,
formulaire de données, tableau des données d'un objet. Seuls l'éditeur
d'écran/d'élément et l'aperçu jouable restent en dehors (déjà exclus par
leur propre gabarit plein écran, ou pas concernés).

Nouveau gabarit générique à une colonne (body.pageBody + .content-page +
.scrollArea) sur le même principe que .content-objectEdit, plus une
variante .formScroll pour un formulaire long à défilement interne (liste
de champs d'un nouvel objet, formulaire de données) tout en gardant les
boutons d'action toujours visibles. Les listes/tableaux remplacés par le
format dense .fieldsTable (déjà utilisé pour le tableau de bord) pour
rester cohérent et afficher plus de lignes à l'écran.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

static/style.css

@@ -128,6 +128,40 @@ body.objectEditBody > main.content{ flex:1 1 auto; min-height:0; overflow:hidden
 .fieldsTable td input, .fieldsTable td select{ min-width:120px; width:auto; }
 .fieldsTableActions{ display:flex; gap:6px; }
 
+/* ---------- Gabarit générique "page classique" (toutes les pages sauf
+   l'éditeur d'écran/d'élément et l'aperçu jouable) : même principe que
+   body.objectEditBody ci-dessus, mais à UNE colonne — un en-tête fixe
+   (titre, formulaire de création...) suivi d'UNE zone qui défile pour son
+   propre compte (.scrollArea), jamais la page elle-même. Permet d'afficher
+   beaucoup de lignes (jeux, écrans, objets, variables, données...) sans
+   perdre le formulaire de création ou le fil d'Ariane hors de l'écran. */
+body.pageBody{ display:flex; flex-direction:column; height:100vh; margin:0; overflow:hidden; }
+body.pageBody > .topbar, body.pageBody > .breadcrumbBar{ flex:0 0 auto; }
+body.pageBody > main.content{ flex:1 1 auto; min-height:0; overflow:hidden; display:flex; flex-direction:column; }
+
+.content-page{ width:100%; display:flex; flex-direction:column; min-height:0; flex:1 1 auto; }
+.content-page > *{ flex:0 0 auto; }
+.content-page > .scrollArea{ flex:1 1 auto; min-height:0; overflow-y:auto; }
+
+/* Cas d'un formulaire long à champs dynamiques (ex. object_form.html) : le
+   FORMULAIRE lui-même doit grandir pour occuper l'espace restant, et
+   seule sa liste de champs (.scrollArea, à l'intérieur) défile — le champ
+   "nom" et les boutons "+ Ajouter"/"Créer" restent toujours visibles. */
+.content-page > form.formScroll{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
+.formScroll > *{ flex:0 0 auto; }
+.formScroll > .scrollArea{ flex:1 1 auto; min-height:0; overflow-y:auto; }
+
+@media (max-width: 820px){
+  /* Même logique de repli que .content-objectEdit : sous cette largeur,
+     mieux vaut une page qui défile normalement qu'une zone interne trop
+     comprimée. */
+  body.pageBody{ height:auto; overflow:visible; }
+  body.pageBody > main.content{ overflow:visible; }
+  .content-page > .scrollArea{ overflow:visible; }
+  .content-page > form.formScroll{ flex:none; }
+  .formScroll > .scrollArea{ overflow:visible; }
+}
+
 /* ---------- Éditeur d'écrans (façon Elementor/Bricks) ---------- */
 /* La page de l'éditeur d'écran ne doit jamais défiler elle-même : elle
    occupe exactement la hauteur de la fenêtre (topbar + zone de travail), et