Reskin the whole admin UI (not just game widgets) with Bulma

Loads Bulma 1.0.2 in base.html (data-theme="dark" for its native dark palette) for every page that extends it, plus play.html directly. Converts every admin template — index, game dashboard, screens list, element types, object new/edit, data form/list — to real Bulma markup: navbar, breadcrumb component, box/card, field/control/input/select, table, notification, buttons, and a native Bulma modal for the data-row detail popup. Forge's own style.css keeps only what Bulma doesn't cover (the fixed-viewport builder/object-edit layouts, the element tree, canvas, flow-graph editor) and now acts as a secondary/override layer rather than a competing design system, matching how per-element inline customization already overrides widget defaults.

screen_edit.html (the 3-panel screen builder) gets the same navbar/breadcrumb/button treatment plus its top rename form, but its flow-graph node editor, canvas and element tree keep their existing custom styling — several of their inputs have JS relying on exact DOM sibling structure (e.g. slider oninput reading nextElementSibling) or Bulma's own select/wrapper requirement, and reskinning them without a browser to verify against risked silently breaking the app's most complex feature. Buttons and headings there are still fully converted (safe, purely additive class changes).

Verified: full test suite green, every route smoke-rendered 200 OK via the test client after the change.

static/style.css

@@ -14,10 +14,12 @@ input[type=text], input[type=number], input[type=date], textarea, select{
 }
 input[type=checkbox]{ width:auto; margin-top:6px; }
 
-.topbar{ display:flex; align-items:center; gap:10px; padding:12px 20px; background:var(--panel); border-bottom:1px solid var(--border); }
-.brand{ color:var(--text); font-weight:700; text-decoration:none; }
-.crumb{ color:var(--text-dim); text-decoration:none; font-size:13px; }
-.crumb-sep{ color:var(--text-dim); }
+/* .topbar/.breadcrumbBar : Bulma fournit déjà la mise en page (navbar,
+   breadcrumb) — ces classes ne servent plus qu'à les repérer dans les
+   layouts plein-écran (body.builderBody/objectEditBody, voir plus bas) et à
+   les rattacher au thème sombre. */
+.topbar{ border-bottom:1px solid var(--border); }
+.breadcrumbBar{ padding:10px 20px; background:transparent; border-bottom:1px solid var(--border); margin-bottom:0; }
 .content{ max-width:760px; margin:0 auto; padding:28px 20px; }
 
 .card{ border:1px solid var(--border); border-radius:10px; padding:16px; background:var(--panel); margin:12px 0; }
@@ -59,28 +61,16 @@ button.danger{ color:var(--danger); border-color:rgba(226,104,95,.4); }
 .fieldRowCard{ margin-bottom:10px; }
 .relationTarget{ margin-top:6px; }
 
-.dataTableWrap{ overflow-x:auto; max-width:100%; }
-.dataTable{ width:100%; border-collapse:collapse; font-size:12.5px; }
-.dataTable th, .dataTable td{ border:1px solid var(--border); padding:6px 8px; text-align:left; }
-.dataTable th{ background:var(--panel2); color:var(--text-dim); white-space:nowrap; }
+/* .dataTable : Bulma fournit déjà la mise en page du tableau (classes
+   "table is-fullwidth is-hoverable", voir data_list.html) — ceci ne fait
+   plus que tronquer les cellules trop longues avec "...", pour garder une
+   vue d'ensemble compacte (le détail complet s'ouvre dans la modale Bulma
+   ci-dessous via le bouton 👁️). */
 .dataTable td{ max-width:220px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
 
 /* ---------- Détail d'une entrée (bouton 👁️) ---------- */
-/* Popup plein écran assombri, pour lire une ligne dont les colonnes sont
-   tronquées dans le tableau (voir .dataTable td ci-dessus) sans avoir à
-   ouvrir le formulaire de modification. */
-.rowDetailModal{
-  display:none; position:fixed; inset:0; background:rgba(0,0,0,.6);
-  align-items:center; justify-content:center; z-index:100; padding:20px;
-}
-.rowDetailModal.open{ display:flex; }
-.rowDetailCard{
-  background:var(--panel); border:1px solid var(--border); border-radius:10px;
-  max-width:640px; width:100%; max-height:80vh; display:flex; flex-direction:column;
-}
-.rowDetailHeader{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border); flex:0 0 auto; }
-.rowDetailHeader h3{ margin:0; color:var(--text); font-size:15px; }
-.rowDetailBody{ padding:6px 16px 16px; overflow-y:auto; }
+/* Contenu de la modale Bulma (.modal/.modal-card, voir data_list.html) —
+   affiche chaque champ en entier, sans troncature. */
 .rowDetailField{ padding:10px 0; border-bottom:1px solid var(--border); }
 .rowDetailField:last-child{ border-bottom:none; }
 .rowDetailLabel{ font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px; }
@@ -110,7 +100,7 @@ button.danger{ color:var(--danger); border-color:rgba(226,104,95,.4); }
    a beaucoup de champs, pour garder une vue d'ensemble sans perdre le
    formulaire "Ajouter un champ" hors de l'écran. */
 body.objectEditBody{ display:flex; flex-direction:column; height:100vh; margin:0; overflow:hidden; }
-body.objectEditBody > .topbar{ flex:0 0 auto; }
+body.objectEditBody > .topbar, body.objectEditBody > .breadcrumbBar{ flex:0 0 auto; }
 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; }
@@ -136,7 +126,7 @@ body.objectEditBody > main.content{ flex:1 1 auto; min-height:0; overflow:hidden
    ce sont les zones internes (panneaux, écran, panneau de logique) qui
    défilent chacune de leur côté si besoin. */
 body.builderBody{ display:flex; flex-direction:column; height:100vh; margin:0; overflow:hidden; }
-body.builderBody > .topbar{ flex:0 0 auto; }
+body.builderBody > .topbar, body.builderBody > .breadcrumbBar{ flex:0 0 auto; }
 body.builderBody > main.content{ flex:1 1 auto; min-height:0; overflow:hidden; display:flex; flex-direction:column; }
 
 .content-builder{