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.

templates/data_form.html

@@ -1,57 +1,60 @@
 {% extends "base.html" %}
 {% block title %}{{ 'Modifier' if row else 'Ajouter' }} — {{ definition.name }}{% endblock %}
 {% block breadcrumb %}
-<a class="crumb" href="{{ url_for('game_dashboard', slug=game.slug) }}">{{ game.name }}</a>
-<span class="crumb-sep">/</span>
-<a class="crumb" href="{{ url_for('object_view', slug=game.slug, definition_id=definition.id) }}">{{ definition.name }}</a>
-<span class="crumb-sep">/</span><span class="crumb">{{ 'Modifier #' ~ row.id if row else 'Nouvelle entrée' }}</span>
+<li><a href="{{ url_for('game_dashboard', slug=game.slug) }}">{{ game.name }}</a></li>
+<li><a href="{{ url_for('object_view', slug=game.slug, definition_id=definition.id) }}">{{ definition.name }}</a></li>
+<li class="is-active"><a>{{ 'Modifier #' ~ row.id if row else 'Nouvelle entrée' }}</a></li>
 {% endblock %}
 {% block content %}
-<h1>{{ 'Modifier l\'entrée #' ~ row.id if row else 'Ajouter une entrée' }} — {{ definition.name }}</h1>
-<p class="hint">Formulaire généré automatiquement à partir de la définition de cet objet — aucun champ n'est codé en dur ici.</p>
+<h1 class="title">{{ 'Modifier l\'entrée #' ~ row.id if row else 'Ajouter une entrée' }} — {{ definition.name }}</h1>
+<p class="help mb-4">Formulaire généré automatiquement à partir de la définition de cet objet — aucun champ n'est codé en dur ici.</p>
 
-<form method="post" class="card">
+<form method="post" class="box">
   {% for f in definition.fields %}
   {% set col = f.name|colname %}
   {% set current = row[col] if row else none %}
-  <div class="formField">
-    <label for="field_{{ f.id }}">{{ f.name }}{% if f.required %} *{% endif %}</label>
+  <div class="field">
+    <label class="label" for="field_{{ f.id }}">{{ f.name }}{% if f.required %} *{% endif %}</label>
+    <div class="control">
 
     {% if f.type == 'texte' %}
-    <input type="text" id="field_{{ f.id }}" name="{{ col }}" value="{{ current or '' }}" {{ 'required' if f.required else '' }}>
+    <input class="input" type="text" id="field_{{ f.id }}" name="{{ col }}" value="{{ current or '' }}" {{ 'required' if f.required else '' }}>
 
     {% elif f.type == 'texte_long' %}
-    <textarea id="field_{{ f.id }}" name="{{ col }}" rows="4" {{ 'required' if f.required else '' }}>{{ current or '' }}</textarea>
+    <textarea class="textarea" id="field_{{ f.id }}" name="{{ col }}" rows="4" {{ 'required' if f.required else '' }}>{{ current or '' }}</textarea>
 
     {% elif f.type == 'nombre_entier' %}
-    <input type="number" step="1" id="field_{{ f.id }}" name="{{ col }}" value="{{ current if current is not none else '' }}" {{ 'required' if f.required else '' }}>
+    <input class="input" type="number" step="1" id="field_{{ f.id }}" name="{{ col }}" value="{{ current if current is not none else '' }}" {{ 'required' if f.required else '' }}>
 
     {% elif f.type == 'nombre_decimal' %}
-    <input type="number" step="any" id="field_{{ f.id }}" name="{{ col }}" value="{{ current if current is not none else '' }}" {{ 'required' if f.required else '' }}>
+    <input class="input" type="number" step="any" id="field_{{ f.id }}" name="{{ col }}" value="{{ current if current is not none else '' }}" {{ 'required' if f.required else '' }}>
 
     {% elif f.type == 'booleen' %}
-    <input type="checkbox" id="field_{{ f.id }}" name="{{ col }}" {{ 'checked' if current else '' }}>
+    <label class="checkbox"><input type="checkbox" id="field_{{ f.id }}" name="{{ col }}" {{ 'checked' if current else '' }}> Oui</label>
 
     {% elif f.type == 'date' %}
-    <input type="date" id="field_{{ f.id }}" name="{{ col }}" value="{{ current or '' }}" {{ 'required' if f.required else '' }}>
+    <input class="input" type="date" id="field_{{ f.id }}" name="{{ col }}" value="{{ current or '' }}" {{ 'required' if f.required else '' }}>
 
     {% elif f.type == 'relation' %}
     {% set current_rel = row[col ~ '_id'] if row else none %}
-    <select id="field_{{ f.id }}" name="{{ col }}_id" {{ 'required' if f.required else '' }}>
-      <option value="">—</option>
-      {% for opt in relation_options.get(f.id, []) %}
-      <option value="{{ opt.id }}" {{ 'selected' if current_rel == opt.id else '' }}>{{ opt.label }}</option>
-      {% endfor %}
-    </select>
+    <div class="select is-fullwidth">
+      <select id="field_{{ f.id }}" name="{{ col }}_id" {{ 'required' if f.required else '' }}>
+        <option value="">—</option>
+        {% for opt in relation_options.get(f.id, []) %}
+        <option value="{{ opt.id }}" {{ 'selected' if current_rel == opt.id else '' }}>{{ opt.label }}</option>
+        {% endfor %}
+      </select>
+    </div>
     {% if not relation_options.get(f.id) %}
-    <p class="hint">Aucune entrée n'existe encore pour l'objet lié — crée-en une d'abord si tu veux pouvoir la sélectionner ici.</p>
+    <p class="help">Aucune entrée n'existe encore pour l'objet lié — crée-en une d'abord si tu veux pouvoir la sélectionner ici.</p>
     {% endif %}
     {% endif %}
+    </div>
   </div>
   {% endfor %}
 
-  <div class="actionsRow">
-    <button type="submit" class="primary">{{ 'Enregistrer les modifications' if row else 'Enregistrer en base' }}</button>
+  <div class="field">
+    <button type="submit" class="button is-primary">{{ 'Enregistrer les modifications' if row else 'Enregistrer en base' }}</button>
   </div>
 </form>
 {% endblock %}