Refonte design system — Phase D : éditeur de scène et aperçu jouable

L'essentiel du re-skin de l'éditeur de scène (onglets, panneaux flottants,
groupes de propriétés, boutons, galerie d'icônes, menu contextuel, modales)
était déjà obtenu automatiquement par le passage global des tokens en
Phase A — tout ce CSS custom consommait déjà les mêmes variables
(--panel/--border/--accent...) que le reste de l'app. Reste ce sweep
ciblé des dernières couleurs codées en dur qui échappaient aux tokens :

- screen_edit.html : bandeau "élément de jeu réutilisable" (fond/bordure
  panneau en dur), avertissement de suppression de nœud de logique
  (fallback --danger périmé), séparateur de clause de condition (gris
  clair #ccc, incohérent sur un thème exclusivement sombre) — tous
  reliés à var(--panel)/var(--border)/var(--danger). Les couleurs de
  swatch par défaut des actions "changer la couleur d'un élément"
  (#5b8cff, #ff0000) sont volontairement laissées telles quelles : ce
  sont des valeurs de CONTENU (le jeu du client), pas du chrome Forge.
- play.html : #emptyState (message "aucun écran" généré par le moteur,
  pas du contenu du jeu) relié à var(--forge-text-muted). Le rendu du
  jeu lui-même (fond du cadre, bordure des champs de saisie posés par le
  client sur ses écrans) reste strictement inchangé, conformément à la
  distinction actée avec l'utilisateur entre chrome de l'outil et
  contenu du jeu créé.
- Aucun changement à la disposition (canvas, floatPanel, builder3) —
  conforme à l'exemption du §5/§9 du document de règles.

197 tests toujours verts ; JS de screen_edit.html (très long) revérifié
via une extraction jetable + node --check, comme pour les phases
précédentes.

Termine la refonte design system en 4 phases (voir
regles/FORGE_ENGINE_TEMPLATE_BULMA.md) : Bulma auto-hébergé compilé via
Sass avec la palette Forge, chrome global et pages d'authentification,
en-têtes de page des écrans de gestion, éditeur de scène et aperçu
jouable.

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

templates/play.html

@@ -40,7 +40,7 @@
     display:flex; align-items:center; justify-content:center;
   }
   .playElement input{ width:90%; height:70%; box-sizing:border-box; border:1px solid #2b3140; border-radius:4px; padding:0 8px; }
-  #emptyState{ color:#8b93a7; font-family:system-ui,sans-serif; text-align:center; padding-top:40vh; }
+  #emptyState{ color:var(--forge-text-muted, #8b95a7); font-family:system-ui,sans-serif; text-align:center; padding-top:40vh; }
   /* 3.3 (Confort) — surbrillance générique dynamique : liseré clignotant,
      posé/enlevé par une action "Modifier un élément → Surbrillance",
      applicable à n'importe quel élément (pas seulement les boutons). */

templates/screen_edit.html

@@ -8,7 +8,7 @@
 {% endblock %}
 {% block content %}
 {% if screen.is_template %}
-<p class="hint" style="background:#1c2130; border:1px solid #2b3140; border-radius:8px; padding:10px 14px; margin:10px 0;">
+<p class="hint" style="background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:10px 14px; margin:10px 0;">
   🧩 Contenu d'un élément de jeu réutilisable.
 </p>
 {% endif %}
@@ -522,7 +522,7 @@
         </header>
         <section class="modal-card-body">
           <p class="hint">Cette action est irréversible.</p>
-          <p class="hint" id="deleteConfirmFlowWarning" style="display:none; margin-top:10px; color:var(--danger, #e2685f);"></p>
+          <p class="hint" id="deleteConfirmFlowWarning" style="display:none; margin-top:10px; color:var(--danger, #f04438);"></p>
         </section>
         <footer class="modal-card-foot" style="justify-content:flex-end; gap:8px;">
           <button type="button" class="button is-small" onclick="closeDeleteConfirmModal()">Annuler</button>
@@ -2427,7 +2427,7 @@ function renderFlowConditionClauses() {
   wrap.innerHTML = flowConditionExtraClauses.map(function(clause, idx) {
     var isVariable = clause.source === 'variable';
     return '' +
-      '<div class="flowConditionClauseRow" style="border-top:1px dashed #ccc; margin-top:8px; padding-top:8px;">' +
+      '<div class="flowConditionClauseRow" style="border-top:1px dashed var(--border); margin-top:8px; padding-top:8px;">' +
         '<label>Source<select id="nf-cond-extra-source-' + idx + '" onchange="onFlowClauseSourceChange(' + idx + ')">' +
           '<option value="objet"' + (isVariable ? '' : ' selected') + '>Champ d\'un objet</option>' +
           '<option value="variable"' + (isVariable ? ' selected' : '') + '>Variable globale</option>' +