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/screens_list.html

@@ -1,47 +1,60 @@
 {% extends "base.html" %}
 {% block title %}Écrans — {{ game.name }}{% endblock %}
 {% block breadcrumb %}
-<a class="crumb" href="{{ url_for('game_dashboard', slug=game.slug) }}">{{ game.name }}</a>
-<span class="crumb-sep">/</span><span class="crumb">Écrans</span>
+<li><a href="{{ url_for('game_dashboard', slug=game.slug) }}">{{ game.name }}</a></li>
+<li class="is-active"><a>Écrans</a></li>
 {% endblock %}
 {% block content %}
-<h1>Écrans du jeu</h1>
+<h1 class="title">Écrans du jeu</h1>
 
-<form method="post" action="{{ url_for('screens_new', slug=game.slug) }}" class="card inline-form">
-  <label for="name">Nom du nouvel écran</label>
-  <div class="fieldRow">
-    <input type="text" id="name" name="name" placeholder="ex. Accueil, Formulaire d'inscription, Scène 1..." required>
-    <button type="submit" class="primary">+ Créer l'écran</button>
+<form method="post" action="{{ url_for('screens_new', slug=game.slug) }}" class="box">
+  <div class="field">
+    <label class="label" for="name">Nom du nouvel écran</label>
+    <div class="field has-addons">
+      <div class="control is-expanded">
+        <input class="input" type="text" id="name" name="name" placeholder="ex. Accueil, Formulaire d'inscription, Scène 1..." required>
+      </div>
+      <div class="control">
+        <button type="submit" class="button is-primary">+ Créer l'écran</button>
+      </div>
+    </div>
   </div>
 </form>
 
 {% if request.args.get('blocked_screen') %}
-<div class="warningBanner">
+<div class="notification is-warning is-light">
   ⚠️ Suppression impossible : au moins un autre écran a un bouton qui cible précisément celui-ci. Retire d'abord cette action.
 </div>
 {% endif %}
 
-<h2>Enchaînement des écrans</h2>
+<h2 class="subtitle">Enchaînement des écrans</h2>
 {% if screen_list %}
-<div class="list">
+<div class="table-container">
+<table class="table is-fullwidth is-hoverable">
+  <tbody>
   {% for s in screen_list %}
-  <div class="listRow listRowFlex">
-    <a class="rowLink" href="{{ url_for('screen_edit', slug=game.slug, screen_id=s.id) }}">
-      <div class="rowTitle">{{ loop.index }}. {{ s.name }}{% if loop.first %} <span class="hint">★ Écran de départ</span>{% endif %}</div>
-    </a>
-    <div class="rowActions">
-      <form method="post" action="{{ url_for('screen_move', slug=game.slug, screen_id=s.id) }}"><input type="hidden" name="direction" value="up"><button type="submit" class="smallBtn" {{ 'disabled' if loop.first else '' }}>↑</button></form>
-      <form method="post" action="{{ url_for('screen_move', slug=game.slug, screen_id=s.id) }}"><input type="hidden" name="direction" value="down"><button type="submit" class="smallBtn" {{ 'disabled' if loop.last else '' }}>↓</button></form>
-      <a class="smallBtn" href="{{ url_for('screen_edit', slug=game.slug, screen_id=s.id) }}">✏️</a>
-      <form method="post" action="{{ url_for('screen_delete', slug=game.slug, screen_id=s.id) }}"
-            onsubmit="return confirm('Supprimer l\'écran « {{ s.name }} » et tous ses éléments ?');">
-        <button type="submit" class="smallBtn danger">🗑️</button>
-      </form>
-    </div>
-  </div>
+  <tr>
+    <td class="is-vcentered">
+      <a href="{{ url_for('screen_edit', slug=game.slug, screen_id=s.id) }}">{{ loop.index }}. {{ s.name }}</a>
+      {% if loop.first %} <span class="tag is-info is-light">★ Écran de départ</span>{% endif %}
+    </td>
+    <td class="is-vcentered has-text-right">
+      <div class="buttons is-inline-flex are-small">
+        <form method="post" action="{{ url_for('screen_move', slug=game.slug, screen_id=s.id) }}"><input type="hidden" name="direction" value="up"><button type="submit" class="button is-small" {{ 'disabled' if loop.first else '' }}>↑</button></form>
+        <form method="post" action="{{ url_for('screen_move', slug=game.slug, screen_id=s.id) }}"><input type="hidden" name="direction" value="down"><button type="submit" class="button is-small" {{ 'disabled' if loop.last else '' }}>↓</button></form>
+        <a class="button is-small" href="{{ url_for('screen_edit', slug=game.slug, screen_id=s.id) }}">✏️</a>
+        <form method="post" action="{{ url_for('screen_delete', slug=game.slug, screen_id=s.id) }}"
+              onsubmit="return confirm('Supprimer l\'écran « {{ s.name }} » et tous ses éléments ?');">
+          <button type="submit" class="button is-small is-danger">🗑️</button>
+        </form>
+      </div>
+    </td>
+  </tr>
   {% endfor %}
+  </tbody>
+</table>
 </div>
 {% else %}
-<p class="hint">Aucun écran pour l'instant — crée le premier ci-dessus.</p>
+<p class="help">Aucun écran pour l'instant — crée le premier ci-dessus.</p>
 {% endif %}
 {% endblock %}