Passe toutes les pages restantes en deux colonnes (créer à gauche, contenu à droite)

Généralise le principe déjà utilisé pour le tableau de bord et l'édition
d'objet à toutes les pages restantes : liste des jeux, écrans, éléments de
jeu, variables, nouvel objet, formulaire de données, tableau des données
d'un objet - colonne de gauche pour créer/agir, colonne de droite pour ce
qui existe déjà, chaque colonne défilant pour son propre compte.

Pour un formulaire qui doit rester UN SEUL <form> à cheval sur les deux
colonnes (nouvel objet : nom à gauche, champs à droite ; formulaire de
données : bouton Enregistrer à gauche, champs à droite), nouvelle classe
.formPassthrough ("display:contents") : le <form> ne devient pas lui-même
une boîte dans la mise en page flex, seul .twoCol à l'intérieur compte.

Supprime au passage .content-page/.formScroll/body.pageBody (le gabarit à
une colonne introduit au tour précédent, plus utilisé nulle part) et
.list/.listRow/.listRowFlex/.rowTitle/.rowSub/.rowActions/.addBtn (les
cartes à deux lignes remplacées par les tableaux denses et la nav
compacte) - du CSS mort plutôt que deux systèmes qui se chevauchent.

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

static/style.css

@@ -33,23 +33,11 @@ button{ background:var(--panel2); border:1px solid var(--border); color:var(--te
 button.primary{ background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }
 button.smallBtn{ padding:5px 10px; font-size:11.5px; }
 button.danger{ color:var(--danger); border-color:rgba(226,104,95,.4); }
-.addBtn{ display:inline-block; margin:10px 0; padding:9px 14px; border-radius:6px; border:1px dashed var(--border); color:var(--accent); text-decoration:none; font-size:13px; }
 .actionsRow{ margin-top:16px; }
 
-.list{ display:flex; flex-direction:column; gap:4px; }
-.listRow{ display:block; padding:7px 10px; border:1px solid var(--border); border-radius:6px; background:var(--panel); text-decoration:none; color:var(--text); }
-.listRow:hover{ background:var(--panel2); }
-.listRowFlex{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
-.listRowFlex .rowLink{ flex:1; text-decoration:none; color:var(--text); }
-.listRowFlex form{ margin:0; }
-.rowTitle{ font-size:13px; }
-.rowSub{ font-size:10.5px; color:var(--text-dim); margin-top:1px; }
-.rowActions{ display:flex; gap:6px; align-items:center; }
-
 /* Nav compacte à une seule ligne (icône + libellé) — pour une liste
-   d'actions fixe (ex. tableau de bord d'un jeu) où le sous-titre de
-   .listRow prendrait trop de place utile pour rien : sobre et dense plutôt
-   que "carte" explicative. */
+   d'actions fixe (ex. colonne "Créer" du tableau de bord d'un jeu) : sobre
+   et dense plutôt qu'une carte à deux lignes. */
 .navList{ display:flex; flex-direction:column; gap:3px; }
 .navRow{ display:flex; align-items:center; gap:8px; padding:7px 10px; border:1px solid var(--border); border-radius:6px; background:var(--panel); text-decoration:none; color:var(--text); font-size:12.5px; }
 .navRow:hover{ background:var(--panel2); border-color:var(--accent); }
@@ -112,7 +100,16 @@ body.objectEditBody > .topbar, body.objectEditBody > .breadcrumbBar{ flex:0 0 au
 body.objectEditBody > main.content{ flex:1 1 auto; min-height:0; overflow:hidden; display:flex; flex-direction:column; }
 
 .content-objectEdit{ width:100%; display:flex; flex-direction:column; min-height:0; }
-.content-objectEdit > h1, .content-objectEdit > .hint, .content-objectEdit > form{ flex:0 0 auto; }
+.content-objectEdit > h1, .content-objectEdit > .hint, .content-objectEdit > form, .content-objectEdit > .warningBanner{ flex:0 0 auto; }
+
+/* Un <form> qui doit envelopper les DEUX colonnes à la fois (un seul
+   formulaire soumis ensemble, ex. object_form.html : nom de l'objet à
+   gauche, liste de champs à droite) ne doit pas devenir lui-même une boîte
+   dans la mise en page flex — sinon .twoCol à l'intérieur perd la hauteur
+   disponible qu'il doit occuper. "display:contents" le rend transparent :
+   .twoCol se comporte comme s'il était directement enfant de
+   .content-objectEdit. */
+.formPassthrough{ display:contents; }
 .content-objectEdit .twoCol{ flex:1 1 auto; min-height:0; align-items:stretch; }
 .content-objectEdit .colLeft{ overflow-y:auto; height:100%; }
 .content-objectEdit .colRight{ display:flex; flex-direction:column; min-height:0; height:100%; }
@@ -128,40 +125,6 @@ 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