From dbada333d574f2029832d48df5153b0a7424ca60 Mon Sep 17 00:00:00 2001
From: william <you@example.com>
Date: Sun, 30 Aug 2026 13:59:11 +0200
Subject: [PATCH] =?UTF-8?q?Phase=20-1=20:=20d=C3=A9coupe=20le=20moteur=20d?=
 =?UTF-8?q?e=20play.html=20en=20modules=20JS=20+=20premiers=20tests=20JS?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

templates/play.html était un unique fichier HTML+CSS+JS de 1069 lignes,
tout le moteur de jeu vivant dans UN SEUL <script>, sans aucune
couverture de test sur cette logique (seuls le rendu HTML et la syntaxe
JS étaient vérifiés). La feuille de route à venir (état par joueur,
hasard, clavier/minuteur, position/collision, son — voir le plan) va
justement faire grossir ce moteur : "un fichier = une fonction, un
dossier = une responsabilité" s'applique aussi au JS, pas seulement au
Python — le moment de découper est avant d'ajouter encore plus de code,
pas après.

Découpage en 6 fichiers sous static/js/play/, calqués sur les sections
déjà présentes dans le code (aucune réorganisation de logique, une pure
extraction) : screens.js (affichage d'écran, timeline d'animation),
conditions.js (évaluation des conditions — la partie 100% PURE, sans
DOM, la plus testable), actions.js (exécution des actions), triggers.js
(recherche des nœuds déclencheurs, attache des écouteurs), bindings.js
(résolution des {{champ}}, rafraîchissement des données), flow-engine.js
(parcours du graphe, événements personnalisés).

Zéro nouvel outillage : plusieurs <script src> dans l'ordre, partageant
le même espace global qu'avant (aucun bundler, aucune étape de build).
Les 2 URLs de route dont ces fichiers ont besoin (flow_node_run_data/
run_variable, runtime_payload) ne peuvent plus être injectées par Jinja
directement dans le code (un fichier statique n'est jamais passé par le
moteur de templates) — elles sont maintenant posées une fois dans
window.FORGE_PLAY_URLS par le petit <script> inline restant dans
play.html, qui ne porte plus que les données Jinja (gameData) et
l'amorçage (bindClicks() etc. au chargement).

publish/build_package.py : ajoute static/js/play à la liste des fichiers
copiés dans l'exécutable exporté (le mode jouable en dépend désormais).

Premiers tests JS (static/js/play/__tests__/conditions.test.js, lancés
via `node --test`, zéro nouvelle dépendance npm — decision prise avec
l'utilisateur de commencer par la logique PURE seulement, pas par une
couverture DOM via jsdom) : compareValues, resolveVariablePath,
evaluateConditionClause/Node, exactement la logique que les phases à
venir (opérations mathématiques, condition de collision) vont étendre.

tests/conftest.py : nouveau helper play_js_bundle() (concatène tout
static/js/play/*.js) — 13 tests existants qui vérifiaient la présence de
telle fonction/chaîne dans le HTML de /game/<slug>/play (tout le JS y
était inline avant ce découpage) sont mis à jour pour chercher dans ce
bundle à la place ; les tests qui vérifient un CSS/HTML réellement resté
dans play.html (forgeHighlight, forgeDisabled, #playFrame...) continuent
de chercher dans le HTML.

Vérifié : 215 tests pytest passent (aucune régression comportementale,
juste une réorganisation), 13 tests node:test passent, node --check sur
chacun des 6 nouveaux fichiers. Test manuel recommandé (jeu joué de bout
en bout : navigation, clic, survol, répéteur, condition, animation)
avant de considérer le découpage définitivement sans risque.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 publish/build_package.py                    |   2 +-
 static/js/play/__tests__/conditions.test.js | 119 +++
 static/js/play/actions.js                   | 193 ++++
 static/js/play/bindings.js                  | 309 ++++++
 static/js/play/conditions.js                | 133 +++
 static/js/play/flow-engine.js               |  65 ++
 static/js/play/screens.js                   | 178 ++++
 static/js/play/triggers.js                  | 132 +++
 templates/play.html                         | 992 +-------------------
 tests/conftest.py                           |  20 +
 tests/test_animations.py                    |   7 +-
 tests/test_conditions_combinees.py          |  16 +-
 tests/test_confort.py                       |  26 +-
 tests/test_flow.py                          |  18 +-
 tests/test_jauge.py                         |   9 +-
 tests/test_onglets.py                       |   9 +-
 tests/test_screen_layout_fixes.py           |   4 +-
 17 files changed, 1216 insertions(+), 1016 deletions(-)
 create mode 100644 static/js/play/__tests__/conditions.test.js
 create mode 100644 static/js/play/actions.js
 create mode 100644 static/js/play/bindings.js
 create mode 100644 static/js/play/conditions.js
 create mode 100644 static/js/play/flow-engine.js
 create mode 100644 static/js/play/screens.js
 create mode 100644 static/js/play/triggers.js

diff --git a/publish/build_package.py b/publish/build_package.py
index 7ed1ffd0..a0c2e164 100644
--- a/publish/build_package.py
+++ b/publish/build_package.py
@@ -23,7 +23,7 @@ _BASE_DIR = os.path.dirname(_PUBLISH_DIR)
 # Sous-ensemble de static/ réellement nécessaire au mode jouable (voir
 # templates/play.html) — jamais les assets propres à l'éditeur seul
 # (icônes de l'interface de l'éditeur mises à part, déjà dans icons/).
-_STATIC_ITEMS = ["style.css", "csrf_fetch.js", "icons", "branding", "vendor/fonts", "vendor/animate.min.css"]
+_STATIC_ITEMS = ["style.css", "csrf_fetch.js", "icons", "branding", "vendor/fonts", "vendor/animate.min.css", "js/play"]
 
 _SLUG_PLACEHOLDER = "_SLUG_PLACEHOLDER"
 
diff --git a/static/js/play/__tests__/conditions.test.js b/static/js/play/__tests__/conditions.test.js
new file mode 100644
index 00000000..f2d32384
--- /dev/null
+++ b/static/js/play/__tests__/conditions.test.js
@@ -0,0 +1,119 @@
+// Tests de la logique PURE du moteur (aucun accès DOM) — voir le plan de
+// modularisation JS. Lancé via `node --test static/js/play/__tests__/`.
+// Ces fonctions lisent des globals `gameData`/`window` (posés par
+// play.html en navigateur) — on les simule ici avant chaque test.
+const test = require('node:test');
+const assert = require('node:assert/strict');
+
+global.window = global.window || {};
+const {
+  compareValues,
+  resolveVariablePath,
+  readFieldValue,
+  readVariableValue,
+  evaluateConditionClause,
+  evaluateConditionNode,
+} = require('../conditions.js');
+
+function withGameData(data, fn) {
+  const previous = global.gameData;
+  global.gameData = data;
+  try {
+    fn();
+  } finally {
+    global.gameData = previous;
+  }
+}
+
+test('compareValues — comparaison numérique', () => {
+  assert.equal(compareValues('10', 'superieur', '5'), true);
+  assert.equal(compareValues('3', 'inferieur', '5'), true);
+  assert.equal(compareValues('5', 'egal', '5'), true);
+  assert.equal(compareValues('5', 'different', '5'), false);
+});
+
+test('compareValues — repli sur comparaison de chaînes si non numérique', () => {
+  assert.equal(compareValues('abc', 'egal', 'abc'), true);
+  assert.equal(compareValues('abc', 'different', 'xyz'), true);
+});
+
+test('compareValues — champ booléen, vocabulaire oui/non insensible à la casse', () => {
+  assert.equal(compareValues(true, 'egal', 'Oui', 'booleen'), true);
+  assert.equal(compareValues(false, 'egal', 'non', 'booleen'), true);
+  assert.equal(compareValues(true, 'different', 'non', 'booleen'), true);
+});
+
+test('resolveVariablePath — chemin vide renvoie la valeur brute', () => {
+  assert.equal(resolveVariablePath('42', ''), '42');
+});
+
+test('resolveVariablePath — chemin .champ / [index] chaînable', () => {
+  const raw = JSON.stringify({ inventaire: [{ nom: 'clé' }, { nom: 'épée' }] });
+  assert.equal(resolveVariablePath(raw, '.inventaire[1].nom'), 'épée');
+});
+
+test('resolveVariablePath — JSON invalide ou chemin absent renvoie null', () => {
+  assert.equal(resolveVariablePath('{pas du json', '.x'), null);
+  assert.equal(resolveVariablePath('{"a":1}', '.b.c'), null);
+});
+
+test('readFieldValue — résout CLICKED_ROW_ID (-1) via window.lastClickedRowId', () => {
+  withGameData({ data: { '1': [{ id: 7, score: 42 }] } }, () => {
+    window.lastClickedRowId = 7;
+    assert.equal(readFieldValue(1, -1, 'score'), 42);
+  });
+});
+
+test('readVariableValue — lit gameData.variables par nom', () => {
+  withGameData({ variables: { points: { type: 'nombre_entier', value: '10' } } }, () => {
+    assert.equal(readVariableValue('points'), '10');
+    assert.equal(readVariableValue('inconnue'), undefined);
+  });
+});
+
+test('evaluateConditionClause — source "objet" (comportement historique)', () => {
+  withGameData({ data: { '1': [{ id: 5, pv: '3' }] } }, () => {
+    const clause = { cond_definition_id: 1, cond_row_id: 5, cond_field: 'pv', cond_operator: 'inferieur', cond_value: '10' };
+    assert.equal(evaluateConditionClause(clause), true);
+  });
+});
+
+test('evaluateConditionClause — source "variable"', () => {
+  withGameData({ variables: { pv: { type: 'nombre_entier', value: '3' } } }, () => {
+    const clause = { cond_source: 'variable', cond_variable: 'pv', cond_operator: 'inferieur', cond_value: '10' };
+    assert.equal(evaluateConditionClause(clause), true);
+  });
+});
+
+test('evaluateConditionNode — clause unique (pas de cond_clauses)', () => {
+  withGameData({ variables: { pv: { type: 'nombre_entier', value: '3' } } }, () => {
+    const node = { cond_source: 'variable', cond_variable: 'pv', cond_operator: 'egal', cond_value: '3' };
+    assert.equal(evaluateConditionNode(node), true);
+  });
+});
+
+test('evaluateConditionNode — clauses combinées ET (toutes vraies requises)', () => {
+  withGameData({ variables: { pv: { type: 'nombre_entier', value: '3' }, or: { type: 'nombre_entier', value: '0' } } }, () => {
+    const node = {
+      cond_combinator: 'et',
+      cond_clauses: JSON.stringify([
+        { source: 'variable', variable: 'pv', operator: 'egal', value: '3' },
+        { source: 'variable', variable: 'or', operator: 'egal', value: '0' },
+      ]),
+    };
+    assert.equal(evaluateConditionNode(node), true);
+  });
+});
+
+test('evaluateConditionNode — clauses combinées OU (une seule vraie suffit)', () => {
+  withGameData({ variables: { pv: { type: 'nombre_entier', value: '3' }, or: { type: 'nombre_entier', value: '0' } } }, () => {
+    const node = {
+      cond_combinator: 'ou',
+      cond_clauses: JSON.stringify([
+        { source: 'variable', variable: 'pv', operator: 'egal', value: '999' },
+        { source: 'variable', variable: 'or', operator: 'egal', value: '0' },
+      ]),
+    };
+    assert.equal(evaluateConditionNode(node), true);
+  });
+});
diff --git a/static/js/play/actions.js b/static/js/play/actions.js
new file mode 100644
index 00000000..220f8a8c
--- /dev/null
+++ b/static/js/play/actions.js
@@ -0,0 +1,193 @@
+// ---------- Exécution des actions ----------
+// Extrait de templates/play.html (voir plan de modularisation) :
+// application d'une propriété d'élément ("Modifier un élément") et
+// exécution de chaque type de nœud Action. Les URLs de routes serveur
+// (flow_node_run_data/run_variable) sont injectées par play.html dans
+// window.FORGE_PLAY_URLS (données Jinja, jamais codées en dur ici).
+
+// Propriété CSS réelle + éventuel suffixe (unité) pour chaque propriété
+// pilotable par une action "Modifier un élément".
+var ELEMENT_PROPERTY_CSS = {
+  bg_color: { css: 'backgroundColor', suffix: '' },
+  border_color: { css: 'borderColor', suffix: '' },
+  width: { css: 'width', suffix: '%' },
+  height: { css: 'height', suffix: '%' },
+};
+
+function applyElementProperty(targetEl, property, value) {
+  if (property === 'contenu') {
+    // Voir ELEMENT_ACTION_PROPERTIES ("contenu") : texte littéral, pas de
+    // binding vers un champ d'objet ici (contrairement à
+    // applyOpenRowBindings, propre à "Ouvrir la ligne cliquée"). Comme
+    // pour les autres réglages ci-dessous, cible n'importe quel élément —
+    // pointer ceci vers un conteneur remplacerait tout son contenu
+    // imbriqué, à éviter.
+    targetEl.textContent = value == null ? '' : value;
+    return;
+  }
+  if (property === 'surbrillance') {
+    // 3.3 (Confort) — surbrillance générique dynamique : un liseré qui
+    // clignote (voir la classe .forgeHighlight et son animation dans le
+    // <style> de play.html), applicable à N'IMPORTE QUEL élément sans
+    // poser de bordure colorée togglée à la main — utile pour un mentor
+    // qui attire l'attention du joueur vers l'élément à toucher ensuite.
+    if (value === 'toggle') {
+      targetEl.classList.toggle('forgeHighlight');
+    } else if (value === 'off') {
+      targetEl.classList.remove('forgeHighlight');
+    } else {
+      targetEl.classList.add('forgeHighlight');
+    }
+    return;
+  }
+  if (property === 'desactive') {
+    // 3.5 (Confort) — verrouillage d'un élément après décision : DISTINCT
+    // de "invisible" (l'élément reste visible, mais grisé et inerte —
+    // pointer-events:none bloque aussi le clic, donc le déclencheur "Au
+    // clic" éventuellement posé sur cet élément ne se redéclenche plus).
+    if (value === 'toggle') {
+      targetEl.classList.toggle('forgeDisabled');
+    } else if (value === 'off') {
+      targetEl.classList.remove('forgeDisabled');
+    } else {
+      targetEl.classList.add('forgeDisabled');
+    }
+    return;
+  }
+  if (property === 'visibilite') {
+    if (value === 'toggle') {
+      const hidden = targetEl.style.display === 'none';
+      targetEl.style.display = hidden ? '' : 'none';
+      targetEl.style.visibility = '';
+    } else if (value === 'masque') {
+      targetEl.style.display = 'none';
+    } else if (value === 'invisible') {
+      targetEl.style.display = '';
+      targetEl.style.visibility = 'hidden';
+    } else {
+      targetEl.style.display = '';
+      targetEl.style.visibility = '';
+    }
+    return;
+  }
+
+  const spec = ELEMENT_PROPERTY_CSS[property];
+  if (!spec || value === undefined || value === null) return;
+
+  // "valeur1||valeur2" : effet va-et-vient — un état par élément et par
+  // propriété, mémorisé directement sur le nœud DOM (data-toggle-<prop>) :
+  // un clic passe à la 2e valeur, le clic suivant revient à la 1re, et
+  // ainsi de suite. Ce n'est PAS enregistré en base : l'état repart de la
+  // 1re valeur si l'écran est rechargé.
+  if (typeof value === 'string' && value.indexOf('||') !== -1) {
+    const parts = value.split('||');
+    const key = 'toggle' + property;
+    const atSecond = targetEl.dataset[key] === '1';
+    const next = atSecond ? parts[0] : parts[1];
+    targetEl.style[spec.css] = next + spec.suffix;
+    targetEl.dataset[key] = atSecond ? '0' : '1';
+    return;
+  }
+
+  targetEl.style[spec.css] = value + spec.suffix;
+}
+
+function runActionNode(node) {
+  if (node.action_type === 'ecran_suivant') {
+    const idx = screenIndexById(window.currentScreenId);
+    if (idx > -1 && idx < screensData.length - 1) showScreen(screensData[idx + 1].id);
+    return Promise.resolve();
+  } else if (node.action_type === 'ecran_precedent') {
+    const idx = screenIndexById(window.currentScreenId);
+    if (idx > 0) showScreen(screensData[idx - 1].id);
+    return Promise.resolve();
+  } else if (node.action_type === 'aller_a' && node.target_screen_id) {
+    showScreen(node.target_screen_id);
+    return Promise.resolve();
+  } else if (node.action_type === 'ouvrir_ligne' && node.target_screen_id) {
+    // Mémorise QUELLE ligne a été cliquée juste avant d'exécuter cette
+    // action (voir bindClicks dans triggers.js) puis affiche l'écran de
+    // détail avec ses placeholders "champ" résolus contre cette ligne
+    // précise.
+    if (window.lastClickedRowId != null && window.lastClickedDefinitionId != null) {
+      window.currentOpenRow = { definitionId: window.lastClickedDefinitionId, rowId: window.lastClickedRowId };
+    }
+    showScreen(node.target_screen_id);
+    applyOpenRowBindings();
+    // Si l'élément "ouvert" (ou un ancêtre commun avec lui) contient AUSSI
+    // un Répéteur — ex. un panneau de détail posé à côté d'une liste dans
+    // le même conteneur — applyOpenRowBindings() vient de régénérer son
+    // sous-arbre, lignes du Répéteur comprises, avec des nœuds tout neufs
+    // SANS AUCUN écouteur de clic (voir bindClicks : le garde-fou anti-
+    // doublon repose sur elDiv.dataset.clickBound, absent sur un nœud
+    // fraîchement créé). Sans ce rappel, un clic sur "ouvrir la ligne
+    // cliquée" combiné à un Répéteur sur le même écran rendait TOUTES les
+    // lignes muettes dès le clic suivant, sans la moindre erreur.
+    bindClicks();
+    bindHoverTexts();
+    bindHoverTriggers();
+    return Promise.resolve();
+  } else if (node.action_type === 'modifier_element' && node.target_element_id) {
+    const targetEl = document.querySelector('[data-element-id="' + node.target_element_id + '"]');
+    if (targetEl) applyElementProperty(targetEl, node.element_property, node.element_value);
+    return Promise.resolve();
+  } else if (node.action_type === 'declencher_evenement' && node.target_custom_event_id) {
+    // Notification pure (voir screens/custom_events/) : ne fait que
+    // signaler l'événement, jamais choisir un élément — c'est à
+    // l'écouteur (déclencheur → condition → action) de décider quoi
+    // faire, avec ses propres réglages habituels.
+    window.dispatchGameEvent(node.target_custom_event_id);
+    return Promise.resolve();
+  } else if (node.action_type === 'activer_onglet' && node.target_element_id) {
+    // 2.3 — panneau à onglets / visibilité mutuellement exclusive : montre
+    // l'élément visé et masque tous ses FRÈRES DIRECTS (même parent_id,
+    // y compris "aucun parent" = les autres éléments de premier niveau de
+    // l'écran) en une seule action, plutôt qu'une action "Masquer" par
+    // frère. screenData.elements contient TOUS les éléments de l'écran
+    // (imbriqués compris, voir list_elements côté serveur), donc ça
+    // fonctionne aussi bien pour des onglets imbriqués dans un même
+    // conteneur que pour des "vues" posées directement sur l'écran.
+    const screenData = screensData.find(function(s){ return s.id === window.currentScreenId; });
+    const allElements = screenData ? screenData.elements : [];
+    const target = allElements.find(function(e){ return e.id === node.target_element_id; });
+    if (target) {
+      const parentKey = target.parent_id || null;
+      allElements
+        .filter(function(e){ return (e.parent_id || null) === parentKey; })
+        .forEach(function(e) {
+          const el = document.querySelector('[data-element-id="' + e.id + '"]');
+          if (!el) return;
+          if (e.id === target.id) { el.style.display = ''; el.style.visibility = ''; }
+          else { el.style.display = 'none'; }
+        });
+    }
+    return Promise.resolve();
+  } else if (node.action_type === 'attendre') {
+    // 3.2 (Confort) — séquences temporisées : suspend la suite du graphe
+    // pendant N secondes (node.data_value) avant de continuer sur le(s)
+    // fil(s) de sortie — permet par ex. un mail qui "arrive" tout seul
+    // quelques secondes après l'affichage de l'écran, sans action du
+    // joueur (à combiner avec le déclencheur "À l'affichage de l'écran").
+    const seconds = parseFloat(node.data_value);
+    const ms = isNaN(seconds) ? 0 : Math.max(0, seconds) * 1000;
+    return new Promise(function(resolve) { setTimeout(resolve, ms); });
+  } else if (node.action_type === 'modifier_donnee') {
+    const runDataUrl = FORGE_PLAY_URLS.flowNodeRunData.replace('999999', node.id);
+    // clicked_row_id : utilisé côté serveur SEULEMENT si ce nœud vise la
+    // ligne cliquée (CLICKED_ROW_ID, voir flow_node_run_data.py) — sans
+    // effet sinon, donc toujours transmis sans condition ici.
+    return fetch(runDataUrl, {
+      method: 'POST', headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ clicked_row_id: window.lastClickedRowId })
+    })
+      .then(r => r.json())
+      .then(() => refreshRuntimeData());
+  } else if (node.action_type === 'modifier_variable') {
+    const runVarUrl = FORGE_PLAY_URLS.flowNodeRunVariable.replace('999999', node.id);
+    return fetch(runVarUrl, {method: 'POST'})
+      .then(r => r.json())
+      .then(() => refreshRuntimeData());
+  }
+  // 'rien' : aucune action volontairement.
+  return Promise.resolve();
+}
diff --git a/static/js/play/bindings.js b/static/js/play/bindings.js
new file mode 100644
index 00000000..0358c39b
--- /dev/null
+++ b/static/js/play/bindings.js
@@ -0,0 +1,309 @@
+// ---------- Données liées : résolution des placeholders, rafraîchissement ----------
+// Extrait de templates/play.html (voir plan de modularisation).
+
+// Résout, sur l'écran couramment affiché, les placeholders "champ entre
+// doubles accolades" restés tels quels dans le HTML statique (hors
+// Répéteur, donc jamais résolus au moment du rendu serveur) avec les
+// valeurs de la DERNIÈRE ligne ouverte via l'action "Ouvrir la ligne
+// cliquée" (window.currentOpenRow). On part à chaque fois du HTML
+// D'ORIGINE (el.rendered_html, jamais modifié) et pas du DOM déjà
+// affiché, sinon rouvrir un mail différent laisserait les valeurs du mail
+// précédent là où le nouveau mail n'a pas ce champ.
+//
+// Note : on construit les accolades doubles caractère par caractère
+// (PLACEHOLDER_OPEN/CLOSE) plutôt que de les écrire en dur — {{ et }}
+// adjacents dans templates/play.html seraient interprétés par Jinja (le
+// moteur de templates serveur) comme DU JINJA ; ici, dans un fichier
+// statique jamais passé par Jinja, ce n'est plus nécessaire, mais la
+// construction est conservée pour rester visuellement cohérente avec le
+// reste du moteur et éviter toute confusion en relisant le code.
+var PLACEHOLDER_OPEN = '{' + '{';
+var PLACEHOLDER_CLOSE = '}' + '}';
+
+function applyOpenRowBindings() {
+  if (!window.currentOpenRow) return;
+  const rows = gameData.data[String(window.currentOpenRow.definitionId)] || [];
+  const row = rows.find(r => r.id === window.currentOpenRow.rowId);
+  const screenData = screensData.find(s => s.id === window.currentScreenId);
+  const screenDiv = document.querySelector('.playScreen[data-screen-id="' + window.currentScreenId + '"]');
+  if (!row || !screenData || !screenDiv) return;
+
+  // Cible directement, à N'IMPORTE QUEL niveau d'imbrication, le ou les
+  // éléments qui portent vraiment un {{champ}} non résolu — et non plus
+  // seulement les éléments de PREMIER NIVEAU de l'écran. Avant ce
+  // correctif, un panneau de détail niché à 2-3 niveaux (ex. "mail
+  // content" posé dans un conteneur, lui-même dans un autre) forçait à
+  // regénérer TOUT son ancêtre de premier niveau — potentiellement
+  // l'écran entier (jauges, onglets, Répéteur compris) s'il n'y avait
+  // qu'un seul gros conteneur racine — d'où l'impression trompeuse d'un
+  // rechargement de page (flash à vide) à chaque clic sur une ligne.
+  //
+  // Parmi les éléments qui ont un {{champ}} non résolu, on ne garde que
+  // les plus SPÉCIFIQUES (les plus profonds) : si un élément ET l'un de
+  // ses DESCENDANTS sont tous deux candidats, seul le descendant est
+  // régénéré (rendered_html d'un conteneur inclut TOUJOURS celui de ses
+  // descendants, donc un conteneur "candidat" ne l'est souvent que parce
+  // qu'un descendant à lui l'est — le garder en plus regénérerait
+  // inutilement tout son sous-arbre, à l'exact opposé du but recherché).
+  // ATTENTION : la version précédente de ce filtre vérifiait l'inverse
+  // (exclure un élément si un ANCÊTRE est candidat) — comme un ancêtre
+  // est presque toujours "candidat" dès qu'un descendant l'est (son HTML
+  // le contient), ce filtre ne gardait en pratique QUE l'ancêtre racine
+  // de l'écran, annulant complètement l'effet recherché par ce correctif.
+  const byId = {};
+  screenData.elements.forEach(function(e){ byId[e.id] = e; });
+  function hasUnresolvedPlaceholder(e) {
+    return !!(e.rendered_html && e.rendered_html.indexOf(PLACEHOLDER_OPEN) !== -1);
+  }
+  function isDescendantOf(e, ancestorId) {
+    let p = e.parent_id ? byId[e.parent_id] : null;
+    while (p) {
+      if (p.id === ancestorId) return true;
+      p = p.parent_id ? byId[p.parent_id] : null;
+    }
+    return false;
+  }
+  const candidates = screenData.elements.filter(hasUnresolvedPlaceholder);
+  const targets = candidates.filter(function(e) {
+    return !candidates.some(function(other) { return other.id !== e.id && isDescendantOf(other, e.id); });
+  });
+
+  // Résout {{champ}} EN PLACE dans le DOM déjà affiché, sans jamais
+  // détruire/recréer le moindre nœud — un peu comme un diff React ciblé,
+  // mais posé à la main puisqu'il n'y a pas de vrai DOM virtuel ici :
+  //   - dans un nœud TEXTE : {{champ}} est coupé en 3 (texte avant, un
+  //     <span data-bind-field="champ"> qui portera la valeur, texte
+  //     après) LA PREMIÈRE FOIS SEULEMENT ; les ouvertures suivantes se
+  //     contentent de changer le textContent de ce span.
+  //   - dans un ATTRIBUT (ex. href d'un lien "{{link_real_url}}") : le
+  //     gabarit d'origine est mémorisé sur un data-bind-attr-<nom> lors du
+  //     premier passage, pour pouvoir recalculer et réécrire l'attribut à
+  //     chaque fois sans jamais avoir besoin de reconstruire le nœud.
+  // Avant ce correctif, tout le sous-arbre ciblé était détruit et recréé
+  // depuis zéro à chaque clic sur une ligne — ce qui causait un flash
+  // visuel (perte de tout état transitoire posé par "Modifier un
+  // élément", donnant l'impression trompeuse d'un rechargement de page).
+  // Avec la résolution en place, plus aucun nœud du sous-arbre ne bouge :
+  // rien à sauvegarder ni à restaurer.
+  const placeholderRe = new RegExp(PLACEHOLDER_OPEN + '([^{}]+)' + PLACEHOLDER_CLOSE, 'g');
+
+  function resolveTextNodes(root) {
+    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+    const toSplit = [];
+    let node;
+    while ((node = walker.nextNode())) {
+      if (node.nodeValue.indexOf(PLACEHOLDER_OPEN) !== -1) toSplit.push(node);
+    }
+    toSplit.forEach(function(textNode) {
+      const raw = textNode.nodeValue;
+      placeholderRe.lastIndex = 0;
+      const frag = document.createDocumentFragment();
+      let lastIndex = 0, match;
+      while ((match = placeholderRe.exec(raw))) {
+        if (match.index > lastIndex) frag.appendChild(document.createTextNode(raw.slice(lastIndex, match.index)));
+        const span = document.createElement('span');
+        span.dataset.bindField = match[1];
+        span.textContent = row[match[1]] == null ? '' : String(row[match[1]]);
+        frag.appendChild(span);
+        lastIndex = match.index + match[0].length;
+      }
+      if (lastIndex < raw.length) frag.appendChild(document.createTextNode(raw.slice(lastIndex)));
+      textNode.replaceWith(frag);
+    });
+  }
+
+  function updateTextSlots(root) {
+    root.querySelectorAll('[data-bind-field]').forEach(function(slot) {
+      const value = row[slot.dataset.bindField] == null ? '' : String(row[slot.dataset.bindField]);
+      if (slot.textContent !== value) slot.textContent = value;
+    });
+  }
+
+  function resolveAttributes(root) {
+    [root].concat(Array.from(root.querySelectorAll('*'))).forEach(function(node) {
+      Array.from(node.attributes).forEach(function(attr) {
+        if (attr.name.indexOf('data-bind-attr-') === 0) return; // gabarit déjà mémorisé, pas un attribut à lire
+        const bindKey = 'data-bind-attr-' + attr.name;
+        const template = node.hasAttribute(bindKey) ? node.getAttribute(bindKey) : (attr.value.indexOf(PLACEHOLDER_OPEN) !== -1 ? attr.value : null);
+        if (template === null) return;
+        if (!node.hasAttribute(bindKey)) node.setAttribute(bindKey, template);
+        placeholderRe.lastIndex = 0;
+        const resolved = template.replace(placeholderRe, function(_, fieldName) {
+          return row[fieldName] == null ? '' : String(row[fieldName]);
+        });
+        if (attr.value !== resolved) node.setAttribute(attr.name, resolved);
+      });
+    });
+  }
+
+  targets.forEach(function(el) {
+    const target = screenDiv.querySelector('[data-element-id="' + el.id + '"]');
+    if (!target) return;
+    if (target.querySelector('[data-bind-field]')) {
+      updateTextSlots(target);
+    } else {
+      resolveTextNodes(target);
+    }
+    resolveAttributes(target);
+  });
+}
+
+// Recharge l'état du jeu depuis le serveur (après une action qui a
+// modifié une donnée d'objet) pour refléter la nouvelle valeur — utile
+// pour un Répéteur de données, qui doit réafficher ses lignes à jour.
+// Important : on ne touche QU'AUX éléments qui contiennent réellement un
+// répéteur (repérable par la classe "repeaterItem" dans leur HTML rendu).
+// Reconstruire TOUT l'écran à chaque rafraîchissement effacerait les
+// changements purement visuels faits en même temps par une action
+// "Modifier un élément" (ex: masquer une boîte) déclenchée par le même
+// clic, puisque ces changements ne sont jamais enregistrés côté serveur.
+function refreshRuntimeData() {
+  return fetch(FORGE_PLAY_URLS.runtimePayload)
+    .then(r => r.json())
+    .then(newData => {
+      gameData = newData;
+      screensData = gameData.screens;
+      const screenData = screensData.find(s => s.id === window.currentScreenId);
+      const screenDiv = document.querySelector('.playScreen[data-screen-id="' + window.currentScreenId + '"]');
+      // Le bloc ci-dessous (régénération du contenu de l'écran courant)
+      // est sauté si l'écran n'est pas trouvé, mais bindClicks() et les
+      // autres réattachements juste après ne doivent JAMAIS dépendre de
+      // cette condition : un retour anticipé ici a déjà laissé, dans la
+      // pratique, un Répéteur fraîchement régénéré sans AUCUN gestionnaire
+      // de clic pour le reste de la partie (plus aucune ligne ne
+      // répondait, silencieusement, sans erreur) — ces fonctions sont sans
+      // risque à rappeler même quand rien n'a changé.
+      if (screenData && screenDiv) {
+        // try/catch : une erreur inattendue pendant la régénération (ex.
+        // structure de données imprévue) ne doit jamais empêcher les
+        // réattachements ci-dessous de s'exécuter — sinon le Répéteur (ou
+        // tout autre élément cliquable) reste silencieusement inerte pour
+        // le reste de la partie, sans le moindre message d'erreur visible.
+        try {
+          // "repeaterItem" (liste de données), "jaugeBar" (2.1 — jauge liée
+          // à une donnée), "visibilityGated" (condition de visibilité) et
+          // "dataBound" ("Donnée liée" d'un Texte/Titre — voir
+          // render_element_html.py) sont les types d'éléments dont le
+          // contenu/l'affichage dépend de la donnée elle-même plutôt que
+          // d'une action "Modifier un élément" posée à la main dans le
+          // graphe — eux seuls doivent être régénérés après un changement
+          // de donnée ou de variable.
+          //
+          // On cible ces éléments à N'IMPORTE QUEL niveau d'imbrication
+          // (pas seulement le premier niveau de l'écran), via leur
+          // data-element-id — disponible sur chaque élément rendu, pas
+          // seulement les éléments de premier niveau. Avant ce correctif,
+          // un Répéteur niché dans un conteneur (comme ici) n'était JAMAIS
+          // du premier niveau, donc c'est son ANCÊTRE de premier niveau
+          // qui portait le marqueur (le Répéteur imbriqué à l'intérieur)
+          // et se retrouvait régénéré en entier à sa place — potentiellement
+          // l'écran entier (jauges, onglets... compris) s'il n'y avait
+          // qu'un seul gros conteneur racine.
+          //
+          // Parmi les éléments marqués, on ne garde que les plus
+          // SPÉCIFIQUES (les plus profonds) : un ancêtre est presque
+          // toujours "marqué" lui aussi dès qu'un descendant l'est, puisque
+          // son rendered_html contient celui de ses descendants — le
+          // garder EN PLUS régénérerait tout son sous-arbre pour rien.
+          // (Une version antérieure de ce filtre vérifiait l'inverse —
+          // exclure un élément si un ANCÊTRE est marqué — ce qui ne
+          // gardait en pratique que l'ancêtre racine de l'écran et
+          // annulait complètement l'effet recherché.)
+          const byId = {};
+          screenData.elements.forEach(function(e){ byId[e.id] = e; });
+          function hasMarker(e) {
+            return !!(e.rendered_html && (
+              e.rendered_html.indexOf('repeaterItem') !== -1 ||
+              e.rendered_html.indexOf('jaugeBar') !== -1 ||
+              e.rendered_html.indexOf('visibilityGated') !== -1 ||
+              e.rendered_html.indexOf('dataBound') !== -1
+            ));
+          }
+          function isDescendantOf(e, ancestorId) {
+            let p = e.parent_id ? byId[e.parent_id] : null;
+            while (p) {
+              if (p.id === ancestorId) return true;
+              p = p.parent_id ? byId[p.parent_id] : null;
+            }
+            return false;
+          }
+          // "visibilityGated"/"dataBound" sont posés comme un COMMENTAIRE
+          // HTML juste après la balise concernée (voir _mark() dans
+          // render_element_html.py) — jamais comme une classe CSS, à la
+          // différence de "repeaterItem"/"jaugeBar" (qui, eux, désignent
+          // un widget à régénérer EN BLOC, lignes/valeur comprises, un
+          // comportement déjà correct pour ces deux-là). Repérer ce
+          // commentaire permet de retrouver, à l'intérieur d'un fragment
+          // fraîchement rendu, l'élément PRÉCIS qui a changé — même s'il
+          // est niché dans un exemplaire d'élément de jeu réutilisable
+          // (ex. un Texte "Donnée liée" à l'intérieur d'une boîte de
+          // dialogue), où lui seul porte l'attribut data-element-id qui
+          // l'identifie, son marqueur ne remontant jusqu'au SEUL élément
+          // de premier niveau existant (l'exemplaire) que parce que son
+          // HTML est imbriqué dans le sien.
+          const COMMENT_MARKERS = ['visibilityGated', 'dataBound'];
+          function findCommentMarkedDescendants(root) {
+            const found = [];
+            root.querySelectorAll('[data-element-id]').forEach(function(node) {
+              const sib = node.nextSibling;
+              const hasCommentMarker = !!(sib && sib.nodeType === Node.COMMENT_NODE && COMMENT_MARKERS.indexOf(sib.data) !== -1);
+              // Un élément actuellement CACHÉ par une condition de
+              // visibilité (voir render_element_html.py) n'a pas de
+              // commentaire marqueur à sa suite — sa balise porte
+              // directement la classe "visibilityGated" à la place. Sans
+              // ce second cas, un élément qui passe de VISIBLE à CACHÉ
+              // n'était jamais retrouvé ici (seul le sens caché->visible
+              // l'était, via le commentaire) : son ancien nœud visible
+              // restait donc affiché indéfiniment à côté du nouveau,
+              // maintenant visible, qui le remplace normalement (ex. une
+              // icône "enveloppe fermée" jamais masquée en même temps que
+              // "enveloppe ouverte" qui apparaît après avoir cliqué).
+              const isHiddenPlaceholder = node.classList.contains('visibilityGated');
+              if (hasCommentMarker || isHiddenPlaceholder) {
+                found.push(node);
+              }
+            });
+            return found;
+          }
+          const markedCandidates = screenData.elements.filter(hasMarker);
+          markedCandidates.filter(function(e) {
+            return !markedCandidates.some(function(other) { return other.id !== e.id && isDescendantOf(other, e.id); });
+          }).forEach(function(el) {
+            const target = screenDiv.querySelector('[data-element-id="' + el.id + '"]');
+            if (!target) return;
+            const container = document.createElement('div');
+            container.innerHTML = el.rendered_html;
+            const newNode = container.firstElementChild;
+            if (!newNode) return;
+            const innerMarked = findCommentMarkedDescendants(newNode);
+            if (innerMarked.length) {
+              // Des éléments plus précis existent À L'INTÉRIEUR (ex. un
+              // Texte "Donnée liée" posé dans un élément de jeu
+              // réutilisable) : on ne patche QUE ceux-là, en préservant
+              // tout le reste — une boîte de dialogue ne doit ni
+              // disparaître ni réapparaître juste parce qu'un texte à
+              // l'intérieur a changé.
+              innerMarked.forEach(function(innerNode) {
+                const innerId = innerNode.getAttribute('data-element-id');
+                const liveInner = target.querySelector('[data-element-id="' + innerId + '"]');
+                if (liveInner) liveInner.replaceWith(innerNode);
+              });
+            } else {
+              target.replaceWith(newNode);
+            }
+          });
+          applyOpenRowBindings();
+        } catch (err) {
+          console.error('refreshRuntimeData: erreur pendant la régénération de l\'écran', err);
+        }
+      }
+      bindClicks();
+      bindHoverTexts();
+      bindHoverTriggers();
+      // Réévalue aussi les nœuds "À l'affichage de l'écran" de l'écran où
+      // l'on se trouve déjà : une donnée vient de changer (ex: un outil
+      // qu'on vient de débloquer), donc l'affichage doit se mettre à jour
+      // tout de suite, sans attendre un aller-retour d'écran.
+      runScreenShowTriggers(window.currentScreenId);
+    });
+}
diff --git a/static/js/play/conditions.js b/static/js/play/conditions.js
new file mode 100644
index 00000000..6205fe41
--- /dev/null
+++ b/static/js/play/conditions.js
@@ -0,0 +1,133 @@
+// ---------- Évaluation des conditions ----------
+// Extrait de templates/play.html (voir plan de modularisation) : partie
+// PURE du moteur (aucun accès DOM) — lecture de champs/variables et
+// comparaison, c'est la logique la plus amenée à grossir (nouvelles
+// opérations, condition de collision...), donc la plus utile à tester
+// (voir static/js/play/__tests__/conditions.test.js).
+
+// Lit la valeur actuelle d'un champ d'objet dans l'instantané de données
+// du jeu (gameData.data), pour l'évaluation d'une condition.
+function readFieldValue(definitionId, rowId, fieldName) {
+  // CLICKED_ROW_ID (-1, voir flow_node_run_data.py) : "la ligne de
+  // Répéteur sur laquelle on vient de cliqué" — jamais connue à l'avance
+  // dans l'éditeur (choisie ici via "🖱️ Ligne cliquée (Répéteur)"),
+  // résolue seulement au moment de l'évaluation via le dernier clic
+  // capturé (voir bindClicks() dans triggers.js).
+  if (rowId === -1) rowId = window.lastClickedRowId;
+  const rows = gameData.data[String(definitionId)] || [];
+  const row = rows.find(r => r.id === rowId);
+  return row ? row[fieldName] : undefined;
+}
+
+function compareValues(actual, operator, expected, fieldType) {
+  if (fieldType === 'booleen') {
+    const a = actual ? 1 : 0;
+    // "oui"/"non" (voir data_list.html) est le vocabulaire affiché
+    // partout ailleurs pour un champ booléen — une valeur de comparaison
+    // fixe tapée "Oui" doit donc être reconnue vraie ici aussi, pas
+    // seulement "1"/"true" (et insensible à la casse, aligné avec
+    // _compare() côté Python, voir filter_repeater_rows.py).
+    const expectedStr = String(expected).trim().toLowerCase();
+    const e = (expected === true || ['1', 'true', 'vrai', 'oui'].includes(expectedStr)) ? 1 : 0;
+    return operator === 'different' ? a !== e : a === e;
+  }
+  const an = parseFloat(actual), en = parseFloat(expected);
+  const numeric = !isNaN(an) && !isNaN(en);
+  if (numeric) {
+    switch (operator) {
+      case 'egal': return an === en;
+      case 'different': return an !== en;
+      case 'superieur': return an > en;
+      case 'inferieur': return an < en;
+      case 'superieur_egal': return an >= en;
+      case 'inferieur_egal': return an <= en;
+    }
+  }
+  const as = (actual === undefined || actual === null) ? '' : String(actual);
+  const es = (expected === undefined || expected === null) ? '' : String(expected);
+  switch (operator) {
+    case 'egal': return as === es;
+    case 'different': return as !== es;
+    case 'superieur': return as > es;
+    case 'inferieur': return as < es;
+    case 'superieur_egal': return as >= es;
+    case 'inferieur_egal': return as <= es;
+    default: return false;
+  }
+}
+
+// Lit la valeur ACTUELLE d'une variable globale (gameData.variables,
+// exposé par full_game_payload.py, tenu à jour par refreshRuntimeData()
+// après toute action qui en modifie une), pour l'évaluation d'une
+// condition — équivalent, côté client, de _resolve_filter_value côté
+// serveur (screens/rendering/filter_repeater_rows.py), mais SANS la
+// syntaxe utilisée par le Répéteur/la Condition de visibilité (jamais
+// nécessaire ici : le nom de la variable est choisi dans un menu
+// déroulant, voir screen_edit.html).
+function readVariableValue(name) {
+  const v = (gameData.variables || {})[name];
+  return v ? v.value : undefined;
+}
+
+// Navigue dans une valeur JSON (variable de type "objet"/"tableau")
+// selon un chemin ".champ"/"[index]" chaînable — équivalent JS de
+// _resolve_variable_path (même fichier Python que ci-dessus). Chemin
+// vide -> valeur brute inchangée (le cas normal pour une variable
+// scalaire). Ne lève jamais : JSON invalide ou chemin qui ne correspond
+// à rien -> null, comme côté serveur.
+function resolveVariablePath(rawValue, path) {
+  if (!path) return rawValue;
+  let current;
+  try { current = rawValue ? JSON.parse(rawValue) : null; } catch (e) { return null; }
+  const segmentRe = /\.([^.\[\]]+)|\[(\d+)\]/g;
+  let m;
+  while ((m = segmentRe.exec(path)) !== null) {
+    if (current === null || current === undefined) return null;
+    current = m[1] !== undefined ? current[m[1]] : current[parseInt(m[2], 10)];
+  }
+  return current === undefined ? null : current;
+}
+
+// 2.4 — conditions combinées (ET/OU) : un nœud Condition peut porter une
+// liste cond_clauses (JSON) en plus de sa clause historique. Un nœud sans
+// cond_clauses (tous les nœuds créés avant 2.4, ou un nœud à une seule
+// clause) garde EXACTEMENT son ancien comportement — une seule comparaison.
+//
+// Chaque clause peut tester soit un champ d'objet (source absente/"objet",
+// comportement historique), soit une VARIABLE GLOBALE (source
+// "variable" — voir ensure_flow_schema.py pour cond_source/cond_variable/
+// cond_variable_chemin).
+function evaluateConditionClause(clause) {
+  const source = clause.source ?? clause.cond_source ?? 'objet';
+  const operator = clause.operator ?? clause.cond_operator;
+  const expected = clause.value ?? clause.cond_value;
+  if (source === 'variable') {
+    const varName = clause.variable ?? clause.cond_variable;
+    const path = clause.variable_chemin ?? clause.cond_variable_chemin;
+    const varInfo = (gameData.variables || {})[varName];
+    const actual = resolveVariablePath(readVariableValue(varName), path);
+    const fieldType = varInfo && varInfo.type === 'booleen' ? 'booleen' : '';
+    return compareValues(actual, operator, expected, fieldType);
+  }
+  const actual = readFieldValue(clause.definition_id ?? clause.cond_definition_id, clause.row_id ?? clause.cond_row_id, clause.field ?? clause.cond_field);
+  return compareValues(actual, operator, expected, clause.field_type ?? clause.cond_field_type);
+}
+
+function evaluateConditionNode(node) {
+  if (node.cond_clauses) {
+    let clauses;
+    try { clauses = JSON.parse(node.cond_clauses); } catch (e) { clauses = null; }
+    if (Array.isArray(clauses) && clauses.length) {
+      const results = clauses.map(evaluateConditionClause);
+      return node.cond_combinator === 'ou' ? results.some(Boolean) : results.every(Boolean);
+    }
+  }
+  return evaluateConditionClause(node);
+}
+
+// static/js/play/__tests__/ (node:test) importe ces fonctions via
+// require() — pas de risque en navigateur : `module` n'existe pas là-bas,
+// cette branche ne s'exécute jamais côté client.
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = { readFieldValue, compareValues, readVariableValue, resolveVariablePath, evaluateConditionClause, evaluateConditionNode };
+}
diff --git a/static/js/play/flow-engine.js b/static/js/play/flow-engine.js
new file mode 100644
index 00000000..3ab8b3f8
--- /dev/null
+++ b/static/js/play/flow-engine.js
@@ -0,0 +1,65 @@
+// ---------- Moteur du graphe de logique ----------
+// Extrait de templates/play.html (voir plan de modularisation) :
+// parcours du graphe (déclencheur → condition → action) et déclenchement
+// d'un événement personnalisé.
+
+// Exécute le graphe de logique de l'écran courant à partir d'un nœud
+// (typiquement un Déclencheur touché par le joueur). Un même point de
+// sortie peut être relié à PLUSIEURS nœuds suivants (plusieurs actions
+// pour un même déclencheur, ou plusieurs suites pour une même branche
+// Vrai/Faux) — tous les fils sortants d'un port sont donc suivis, pas
+// seulement le premier. Chaque nœud Action produit son effet puis
+// continue sur son (ou ses) fil de sortie ; chaque nœud Condition évalue
+// une donnée du jeu et suit le(s) fil(s) "Vrai" ou "Faux" en conséquence.
+// flowScreenId : l'écran PROPRIÉTAIRE du graphe à exécuter — par défaut
+// l'écran affiché, mais peut être un écran-MODÈLE (voir findTriggerNodess
+// dans triggers.js) quand le nœud de départ vient d'un déclencheur posé
+// dans l'éditeur d'un élément de jeu réutilisable, sur un de ses propres
+// enfants. Sans ce paramètre, un tel déclencheur était bien retrouvé
+// (findTriggerNodess cherche dans tous les écrans) mais son graphe
+// n'existait jamais dans l'écran réellement affiché : rien ne se
+// déclenchait, silencieusement.
+function runFlowFrom(nodeId, flowScreenId) {
+  const flow = gameData.flows[String(flowScreenId != null ? flowScreenId : window.currentScreenId)];
+  if (!flow) return;
+  const nodesById = {};
+  flow.nodes.forEach(n => { nodesById[n.id] = n; });
+
+  function nextEdges(fromId, port) {
+    return flow.edges.filter(e => e.from_node_id === fromId && e.from_port === port);
+  }
+
+  function step(currentId) {
+    const node = nodesById[currentId];
+    if (!node) return;
+    if (node.node_type === 'trigger') {
+      nextEdges(node.id, 'out').forEach(edge => step(edge.to_node_id));
+    } else if (node.node_type === 'condition') {
+      const port = evaluateConditionNode(node) ? 'vrai' : 'faux';
+      nextEdges(node.id, port).forEach(edge => step(edge.to_node_id));
+    } else if (node.node_type === 'action') {
+      runActionNode(node).then(() => {
+        nextEdges(node.id, 'out').forEach(edge => step(edge.to_node_id));
+      });
+    }
+  }
+  step(nodeId);
+}
+
+// Déclenche un événement personnalisé (voir screens/custom_events/,
+// action "declencher_evenement") : une pure NOTIFICATION, sans aucun
+// paramètre — scan GLOBAL de gameData.flows, même principe que
+// findTriggerNodess()/runScreenShowTriggers() (triggers.js), puisqu'un
+// écouteur (nœud Déclencheur trigger_event="evenement") peut vivre sur
+// N'IMPORTE QUELLE autre scène ou modèle, pas seulement l'écran affiché.
+// C'est à CHAQUE écouteur de décider quoi faire ensuite (via sa propre
+// suite condition/action, avec ses réglages habituels — cible fixe,
+// "Ligne cliquée"...), jamais à l'événement lui-même de le dicter.
+window.dispatchGameEvent = function(eventId) {
+  for (const screenIdKey in gameData.flows) {
+    const flow = gameData.flows[screenIdKey];
+    flow.nodes
+      .filter(function(n){ return n.node_type === 'trigger' && n.trigger_event === 'evenement' && n.trigger_custom_event_id === eventId; })
+      .forEach(function(n) { runFlowFrom(n.id, screenIdKey); });
+  }
+};
diff --git a/static/js/play/screens.js b/static/js/play/screens.js
new file mode 100644
index 00000000..864c076b
--- /dev/null
+++ b/static/js/play/screens.js
@@ -0,0 +1,178 @@
+// ---------- Affichage des écrans, timeline d'animation ----------
+// Extrait de templates/play.html (voir plan de modularisation — un
+// fichier = une responsabilité, aussi pour le JS) : navigation entre
+// écrans, proportion de la zone de jeu, lecture des clips d'animation
+// posés dans l'éditeur ("Timeline d'animation").
+
+// Élément à onglets (voir render_onglets.py) : bascule le panneau visible
+// sans aller-retour serveur — même fonction que dans screen_edit.html,
+// pour un comportement identique éditeur/jeu.
+function forgeShowTab(btn) {
+  var groupId = btn.dataset.tabBtn;
+  var targetId = btn.dataset.tabTarget;
+  document.querySelectorAll('[data-tab-btn="' + groupId + '"]').forEach(function (b) {
+    b.classList.toggle('is-active', b === btn);
+  });
+  document.querySelectorAll('[data-tab-group="' + groupId + '"]').forEach(function (p) {
+    p.style.display = (p.id === targetId) ? '' : 'none';
+  });
+}
+
+function showScreen(id) {
+  // Déjà l'écran affiché : rien à refaire. Sans ce garde-fou, l'action
+  // "Ouvrir la ligne cliquée" (voir plus bas) — pensée pour révéler un
+  // détail SUR LE MÊME écran qu'un Répéteur, en la combinant avec une
+  // action "Modifier un élément → Visibilité" sur le même clic — rejouait
+  // à chaque clic sur une ligne les déclencheurs "À l'affichage de
+  // l'écran" et relançait la timeline d'animation depuis le début, ce qui
+  // donnait l'impression trompeuse d'un rechargement de page (éléments
+  // qui rejouent leur animation d'entrée, visibilité qu'un déclencheur
+  // "affichage" repasse à son état initial en écrasant l'action "Rendre
+  // visible" du même clic...). Aller vers un écran DIFFÉRENT continue de
+  // tout rejouer normalement, comme un vrai premier affichage.
+  if (id === window.currentScreenId) return;
+  document.querySelectorAll('.playScreen').forEach(s => s.style.display = 'none');
+  const el = document.querySelector('.playScreen[data-screen-id="' + id + '"]');
+  if (el) {
+    el.style.display = 'block';
+    window.currentScreenId = id;
+    applyScreenAspect(el.dataset.aspect || '9/16');
+  }
+  runScreenShowTriggers(id);
+  runAnimationTimeline(id);
+}
+
+// Voir le commentaire sur #playFrame dans le <style> de play.html : la
+// zone de jeu garde toujours la proportion de l'écran affiché, quelle
+// que soit la forme réelle de la fenêtre du joueur.
+function applyScreenAspect(aspect) {
+  var parts = String(aspect).split('/');
+  var w = parseFloat(parts[0]) || 9, h = parseFloat(parts[1]) || 16;
+  var frame = document.getElementById('playFrame');
+  if (frame) {
+    frame.style.setProperty('--ratio-w', w);
+    frame.style.setProperty('--ratio-h', h);
+  }
+}
+
+function screenIndexById(id) {
+  return screensData.findIndex(s => s.id === id);
+}
+
+// ---------- Timeline d'animation (menu "Ajouter un élément" → panneau
+// rétractable sous la Logique de la scène) : chaque clip démarre à un
+// instant précis (start_time, en secondes) après l'affichage de l'écran —
+// exactement comme une timeline Unity jouée au chargement d'une scène.
+// Deux types de clip : "animate_css" pose une classe de la bibliothèque
+// Animate.css (voir animate_css_catalog.py), "custom" joue des
+// images-clés propres au jeu (voir injectCustomKeyframes ci-dessous). ----------
+var pendingAnimationTimers = [];
+
+function injectCustomKeyframes() {
+  // Construit UNE FOIS toutes les @keyframes "personnalisées" de tous les
+  // écrans (les données sont déjà toutes chargées dans gameData) et les
+  // pose dans une unique balise <style>, plutôt que d'en injecter une par
+  // clip à chaque lecture — un nom de règle unique par clip (customAnim_id)
+  // évite toute collision entre deux clips personnalisés différents.
+  var rules = [];
+  Object.keys(gameData.animations || {}).forEach(function(screenId) {
+    (gameData.animations[screenId] || []).forEach(function(clip) {
+      if (clip.kind !== 'custom' || !clip.custom_keyframes) return;
+      var keyframes;
+      try { keyframes = JSON.parse(clip.custom_keyframes); } catch (e) { return; }
+      var steps = keyframes.map(function(k) {
+        var props = Object.keys(k.props || {}).map(function(p) { return p + ':' + k.props[p] + ';'; }).join(' ');
+        return k.percent + '% { ' + props + ' }';
+      }).join(' ');
+      rules.push('@keyframes customAnim_' + clip.id + ' { ' + steps + ' }');
+    });
+  });
+  var styleTag = document.getElementById('customAnimStyles');
+  if (!styleTag) {
+    styleTag = document.createElement('style');
+    styleTag.id = 'customAnimStyles';
+    document.head.appendChild(styleTag);
+  }
+  styleTag.textContent = rules.join('\n');
+}
+
+function applyAnimationClip(clip) {
+  // querySelectorAll (pas querySelector) : un clip posé dans l'éditeur d'un
+  // écran-MODÈLE (élément de jeu réutilisable) vise l'un de ses propres
+  // enfants — un id qui se répète à l'IDENTIQUE à chaque exemplaire de ce
+  // modèle (rechargé en direct depuis le même écran-modèle, voir
+  // collectAnimationClips ci-dessous), y compris pour chaque ligne d'un
+  // Répéteur utilisant ce modèle comme gabarit. Un seul querySelector
+  // n'aurait animé que le tout premier exemplaire trouvé dans le DOM.
+  var targets = document.querySelectorAll('[data-anim-target="' + clip.element_id + '"]');
+  if (!targets.length) return;
+  var duration = clip.duration || 1, delay = clip.delay || 0;
+  var iterationCount = clip.iteration_count || '1';
+  var infinite = iterationCount === 'infinite';
+  targets.forEach(function(target) {
+    if (clip.kind === 'custom') {
+      target.style.animation = 'customAnim_' + clip.id + ' ' + duration + 's ' + (clip.easing || 'ease') +
+        ' ' + delay + 's ' + iterationCount;
+      if (!infinite) {
+        target.addEventListener('animationend', function handler() {
+          target.style.animation = '';
+          target.removeEventListener('animationend', handler);
+        });
+      }
+    } else {
+      var animClass = 'animate__' + clip.animate_name;
+      target.style.setProperty('--animate-duration', duration + 's');
+      target.style.setProperty('--animate-delay', delay + 's');
+      target.style.animationIterationCount = iterationCount;
+      target.classList.add('animate__animated', animClass);
+      if (!infinite) {
+        target.addEventListener('animationend', function handler() {
+          target.classList.remove('animate__animated', animClass);
+          target.removeEventListener('animationend', handler);
+        });
+      }
+    }
+  });
+}
+
+// Rassemble les clips propres à cet écran ET ceux de tout écran-MODÈLE
+// utilisé par un de ses éléments (élément de jeu réutilisable posé sur cet
+// écran, ex. "mail content") — récursif (un modèle peut lui-même utiliser
+// un autre modèle), avec une garde anti-boucle et un dédoublonnage par
+// écran (un même modèle posé plusieurs fois ne doit pas répéter ses
+// clips). Sans ça, une animation posée directement dans l'éditeur d'un
+// modèle ne se jouait jamais quand le modèle est utilisé ailleurs — seul
+// l'écran-modèle affiché EN TANT QU'ÉCRAN pouvait la jouer.
+function collectAnimationClips(screenId) {
+  var visited = {};
+  var clips = [];
+  function visit(sid) {
+    if (visited[sid]) return;
+    visited[sid] = true;
+    clips = clips.concat((gameData.animations || {})[String(sid)] || []);
+    var screenData = screensData.find(function(s){ return String(s.id) === String(sid); });
+    if (!screenData) return;
+    screenData.elements.forEach(function(el) {
+      if (!el.element_type_id) return;
+      var templateScreenId = (gameData.element_types || {})[String(el.element_type_id)];
+      if (templateScreenId != null) visit(templateScreenId);
+    });
+  }
+  visit(screenId);
+  return clips;
+}
+
+function runAnimationTimeline(screenId) {
+  // Repart de zéro à chaque affichage de cet écran (comme
+  // runScreenShowTriggers) : on annule d'abord tout clip encore en
+  // attente d'un affichage précédent, pour ne jamais empiler des
+  // déclenchements en double si le joueur revient plusieurs fois de
+  // suite sur le même écran avant la fin de sa timeline.
+  pendingAnimationTimers.forEach(function(t) { clearTimeout(t); });
+  pendingAnimationTimers = [];
+  var clips = collectAnimationClips(screenId);
+  clips.forEach(function(clip) {
+    var t = setTimeout(function() { applyAnimationClip(clip); }, (clip.start_time || 0) * 1000);
+    pendingAnimationTimers.push(t);
+  });
+}
diff --git a/static/js/play/triggers.js b/static/js/play/triggers.js
new file mode 100644
index 00000000..63a452a8
--- /dev/null
+++ b/static/js/play/triggers.js
@@ -0,0 +1,132 @@
+// ---------- Déclencheurs : recherche des nœuds + attache des écouteurs ----------
+// Extrait de templates/play.html (voir plan de modularisation).
+
+// Déclenche tous les nœuds "À l'affichage de l'écran" de CET écran — pas
+// besoin d'avoir cliqué sur quoi que ce soit : ça couvre le premier
+// affichage, un retour en arrière, un changement d'écran (ecran_suivant/
+// ecran_precedent/aller_a/ouvrir_ligne appellent tous showScreen). C'est
+// ce qui permet à une condition ("SI outil débloqué = faux") + une action
+// "Modifier un élément → Visibilité" de refléter l'état de la partie sans
+// attendre un clic (voir 1.2 dans la doc de cadrage Forge Engine).
+function runScreenShowTriggers(screenId) {
+  const flow = gameData.flows[String(screenId)];
+  if (!flow) return;
+  flow.nodes
+    .filter(function(n){ return n.node_type === 'trigger' && n.trigger_event === 'affichage'; })
+    .forEach(function(n){ runFlowFrom(n.id); });
+}
+
+// Trouve, pour un élément et un type de déclencheur ("clic"/"soumission"),
+// TOUS les nœuds Déclencheur qui lui sont rattachés — ce sont les points
+// d'entrée des graphes à exécuter. Renvoie un TABLEAU (jamais un seul
+// nœud) : rien n'empêche de poser plusieurs déclencheurs indépendants
+// "Au clic" sur le MÊME élément (ex. l'un ouvre une ligne de Répéteur,
+// l'autre éteint une surbrillance) — un seul clic doit alors exécuter
+// CHACUN de ces graphes, pas seulement le premier trouvé (régression
+// vécue : un second déclencheur posé sur un élément qui en avait déjà un
+// restait silencieusement inerte, aucune erreur, juste jamais exécuté).
+//
+// On cherche dans TOUS les écrans (pas seulement l'écran courant) :
+// bindClicks() attache les gestionnaires une seule fois, sur tous les
+// éléments de tous les écrans (déjà tous présents dans le DOM, seuls les
+// écrans non actifs sont masqués) — chaque identifiant d'élément est
+// unique dans tout le jeu, donc pas d'ambiguïté possible. Cette recherche
+// globale couvre aussi les écrans-MODÈLES (un élément de jeu réutilisable,
+// ex. "mail content", posé sur une scène) : un déclencheur "Au clic"/"Au
+// survol" posé dans l'éditeur du modèle, sur un de SES PROPRES enfants,
+// est donc retrouvé même quand ce modèle est utilisé ailleurs — d'où le
+// besoin de renvoyer aussi l'écran d'origine de CHAQUE nœud (screenIdKey),
+// pas seulement le nœud : runFlowFrom() doit exécuter le graphe dans CET
+// écran-là (celui du modèle), jamais dans celui réellement affiché, sans
+// quoi le nœud trouvé n'existerait pas dans le graphe utilisé et l'action
+// ne se déclencherait jamais.
+function findTriggerNodess(elementId, event) {
+  const found = [];
+  for (const screenIdKey in gameData.flows) {
+    gameData.flows[screenIdKey].nodes.forEach(function(n) {
+      if (n.node_type === 'trigger' && n.trigger_element_id === elementId && (n.trigger_event || 'clic') === event) {
+        found.push({ node: n, screenId: screenIdKey });
+      }
+    });
+  }
+  return found;
+}
+
+// Ré-attache les gestionnaires de clic sur chaque élément — appelé au
+// chargement, puis à nouveau après un rafraîchissement des données (le
+// DOM d'un écran est reconstruit après une action "Modifier une donnée",
+// les nœuds précédents et leurs écouteurs disparaissent avec).
+// 3.1 (Confort) — interactions au survol : échange le texte affiché
+// contre data-hover-text pendant que la souris survole l'élément, puis le
+// restaure au départ de la souris. On ignore volontairement les éléments
+// qui ont des enfants (ex. un conteneur) pour ne jamais écraser une mise
+// en page imbriquée avec du texte brut — cette fonctionnalité vise les
+// éléments de texte simples (nom, lien...), pas les conteneurs.
+function bindHoverTexts() {
+  document.querySelectorAll('[data-hover-text]').forEach(function(el) {
+    if (el.dataset.hoverBound) return;
+    if (el.children.length > 0) return;
+    el.dataset.hoverBound = '1';
+    var original = el.textContent;
+    el.addEventListener('mouseenter', function(){ el.textContent = el.dataset.hoverText; });
+    el.addEventListener('mouseleave', function(){ el.textContent = original; });
+  });
+}
+
+function bindClicks() {
+  document.querySelectorAll('[data-element-id]').forEach(elDiv => {
+    const elementId = parseInt(elDiv.dataset.elementId, 10);
+    const triggers = findTriggerNodess(elementId, 'clic');
+    if (triggers.length) {
+      // Garde-fou anti-doublon : refreshRuntimeData() rappelle bindClicks()
+      // après chaque changement de donnée, mais un élément qui n'est ni un
+      // Répéteur ni une Jauge garde le MÊME nœud DOM d'un rafraîchissement
+      // à l'autre (seul son innerHTML change pour ceux-là, voir
+      // refreshRuntimeData()) — sans ce garde-fou, addEventListener('click')
+      // s'empilerait à chaque rafraîchissement et un seul clic sur un
+      // bouton "+10 points" finirait par déclencher l'action 2, 3, 10 fois
+      // d'affilée (d'où les sauts de +100/-20/0 constatés au lieu de ±10).
+      if (elDiv.dataset.clickBound) return;
+      elDiv.dataset.clickBound = '1';
+      elDiv.style.cursor = 'pointer';
+      elDiv.addEventListener('click', (ev) => {
+        ev.stopPropagation();
+        // Si l'élément cliqué (ou un de ses parents, jusqu'au Répéteur
+        // qui reçoit le gestionnaire) est en fait une LIGNE de Répéteur,
+        // on retrouve son vrai id de donnée (data-row-id, posé par
+        // render_repeater.py) — c'est ce qui permet à l'action "Ouvrir la
+        // ligne cliquée" de savoir sur quel mail précis on a cliqué,
+        // alors même que le déclencheur, lui, vise le Répéteur entier.
+        const rowEl = ev.target.closest('.repeaterItem');
+        window.lastClickedRowId = rowEl ? parseInt(rowEl.dataset.rowId, 10) : null;
+        window.lastClickedDefinitionId = elDiv.dataset.definitionId ? parseInt(elDiv.dataset.definitionId, 10) : null;
+        // Exécute CHAQUE déclencheur "Au clic" posé sur cet élément, pas
+        // seulement le premier (voir le commentaire de findTriggerNodess).
+        triggers.forEach(trigger => runFlowFrom(trigger.node.id, trigger.screenId));
+      });
+    }
+  });
+}
+
+// Déclencheurs "Au survol" / "Fin du survol" — même principe que
+// bindClicks() (garde-fou anti-doublon compris), mais sur mouseenter/
+// mouseleave plutôt que click, et les deux événements cherchés
+// séparément puisque ce sont deux déclencheurs distincts et indépendants
+// (voir le commentaire sur TRIGGER_EVENTS dans screens/flow/constants.py
+// — pas de retour automatique à l'état d'avant survol, un créateur qui en
+// veut un doit poser l'action inverse sur "Fin du survol" lui-même).
+function bindHoverTriggers() {
+  document.querySelectorAll('[data-element-id]').forEach(elDiv => {
+    if (elDiv.dataset.hoverTriggerBound) return;
+    const elementId = parseInt(elDiv.dataset.elementId, 10);
+    const enterTriggers = findTriggerNodess(elementId, 'survol');
+    const leaveTriggers = findTriggerNodess(elementId, 'fin_survol');
+    if (!enterTriggers.length && !leaveTriggers.length) return;
+    elDiv.dataset.hoverTriggerBound = '1';
+    // Exécute CHAQUE déclencheur trouvé, pas seulement le premier — voir
+    // le commentaire de findTriggerNodess (plusieurs déclencheurs
+    // indépendants sur le même élément/événement doivent tous s'exécuter).
+    if (enterTriggers.length) elDiv.addEventListener('mouseenter', () => enterTriggers.forEach(t => runFlowFrom(t.node.id, t.screenId)));
+    if (leaveTriggers.length) elDiv.addEventListener('mouseleave', () => leaveTriggers.forEach(t => runFlowFrom(t.node.id, t.screenId)));
+  });
+}
diff --git a/templates/play.html b/templates/play.html
index 4a97faf8..f1c2427a 100644
--- a/templates/play.html
+++ b/templates/play.html
@@ -73,982 +73,28 @@
 </div>
 
 <script>
+  // Données injectées par Jinja (côté serveur) — tout le reste du moteur
+  // vit maintenant dans des fichiers statiques sous static/js/play/ (voir
+  // plan de modularisation : un fichier = une responsabilité, aussi pour
+  // le JS), qui ne peuvent pas contenir de code Jinja puisqu'ils ne
+  // passent jamais par le moteur de templates. FORGE_PLAY_URLS porte donc
+  // les URLs de routes dont ces fichiers ont besoin (actions.js,
+  // bindings.js), construites ici une seule fois.
   let gameData = {{ payload_json|safe }};
   let screensData = gameData.screens;
-
-  // Élément à onglets (voir render_onglets.py) : bascule le panneau visible
-  // sans aller-retour serveur — même fonction que dans screen_edit.html,
-  // pour un comportement identique éditeur/jeu.
-  function forgeShowTab(btn) {
-    var groupId = btn.dataset.tabBtn;
-    var targetId = btn.dataset.tabTarget;
-    document.querySelectorAll('[data-tab-btn="' + groupId + '"]').forEach(function (b) {
-      b.classList.toggle('is-active', b === btn);
-    });
-    document.querySelectorAll('[data-tab-group="' + groupId + '"]').forEach(function (p) {
-      p.style.display = (p.id === targetId) ? '' : 'none';
-    });
-  }
-
-  function showScreen(id) {
-    // Déjà l'écran affiché : rien à refaire. Sans ce garde-fou, l'action
-    // "Ouvrir la ligne cliquée" (voir plus bas) — pensée pour révéler un
-    // détail SUR LE MÊME écran qu'un Répéteur, en la combinant avec une
-    // action "Modifier un élément → Visibilité" sur le même clic — rejouait
-    // à chaque clic sur une ligne les déclencheurs "À l'affichage de
-    // l'écran" et relançait la timeline d'animation depuis le début, ce qui
-    // donnait l'impression trompeuse d'un rechargement de page (éléments
-    // qui rejouent leur animation d'entrée, visibilité qu'un déclencheur
-    // "affichage" repasse à son état initial en écrasant l'action "Rendre
-    // visible" du même clic...). Aller vers un écran DIFFÉRENT continue de
-    // tout rejouer normalement, comme un vrai premier affichage.
-    if (id === window.currentScreenId) return;
-    document.querySelectorAll('.playScreen').forEach(s => s.style.display = 'none');
-    const el = document.querySelector('.playScreen[data-screen-id="' + id + '"]');
-    if (el) {
-      el.style.display = 'block';
-      window.currentScreenId = id;
-      applyScreenAspect(el.dataset.aspect || '9/16');
-    }
-    runScreenShowTriggers(id);
-    runAnimationTimeline(id);
-  }
-
-  // Voir le commentaire sur #playFrame dans le <style> ci-dessus : la zone
-  // de jeu garde toujours la proportion de l'écran affiché, quelle que soit
-  // la forme réelle de la fenêtre du joueur.
-  function applyScreenAspect(aspect) {
-    var parts = String(aspect).split('/');
-    var w = parseFloat(parts[0]) || 9, h = parseFloat(parts[1]) || 16;
-    var frame = document.getElementById('playFrame');
-    if (frame) {
-      frame.style.setProperty('--ratio-w', w);
-      frame.style.setProperty('--ratio-h', h);
-    }
-  }
-
-  // ---------- Timeline d'animation (menu "Ajouter un élément" → panneau
-  // rétractable sous la Logique de la scène) : chaque clip démarre à un
-  // instant précis (start_time, en secondes) après l'affichage de l'écran —
-  // exactement comme une timeline Unity jouée au chargement d'une scène.
-  // Deux types de clip : "animate_css" pose une classe de la bibliothèque
-  // Animate.css (voir animate_css_catalog.py), "custom" joue des
-  // images-clés propres au jeu (voir injectCustomKeyframes ci-dessous). ----------
-  var pendingAnimationTimers = [];
-
-  function injectCustomKeyframes() {
-    // Construit UNE FOIS toutes les @keyframes "personnalisées" de tous les
-    // écrans (les données sont déjà toutes chargées dans gameData) et les
-    // pose dans une unique balise <style>, plutôt que d'en injecter une par
-    // clip à chaque lecture — un nom de règle unique par clip (customAnim_id)
-    // évite toute collision entre deux clips personnalisés différents.
-    var rules = [];
-    Object.keys(gameData.animations || {}).forEach(function(screenId) {
-      (gameData.animations[screenId] || []).forEach(function(clip) {
-        if (clip.kind !== 'custom' || !clip.custom_keyframes) return;
-        var keyframes;
-        try { keyframes = JSON.parse(clip.custom_keyframes); } catch (e) { return; }
-        var steps = keyframes.map(function(k) {
-          var props = Object.keys(k.props || {}).map(function(p) { return p + ':' + k.props[p] + ';'; }).join(' ');
-          return k.percent + '% { ' + props + ' }';
-        }).join(' ');
-        rules.push('@keyframes customAnim_' + clip.id + ' { ' + steps + ' }');
-      });
-    });
-    var styleTag = document.getElementById('customAnimStyles');
-    if (!styleTag) {
-      styleTag = document.createElement('style');
-      styleTag.id = 'customAnimStyles';
-      document.head.appendChild(styleTag);
-    }
-    styleTag.textContent = rules.join('\n');
-  }
-
-  function applyAnimationClip(clip) {
-    // querySelectorAll (pas querySelector) : un clip posé dans l'éditeur d'un
-    // écran-MODÈLE (élément de jeu réutilisable) vise l'un de ses propres
-    // enfants — un id qui se répète à l'IDENTIQUE à chaque exemplaire de ce
-    // modèle (rechargé en direct depuis le même écran-modèle, voir
-    // collectAnimationClips ci-dessous), y compris pour chaque ligne d'un
-    // Répéteur utilisant ce modèle comme gabarit. Un seul querySelector
-    // n'aurait animé que le tout premier exemplaire trouvé dans le DOM.
-    var targets = document.querySelectorAll('[data-anim-target="' + clip.element_id + '"]');
-    if (!targets.length) return;
-    var duration = clip.duration || 1, delay = clip.delay || 0;
-    var iterationCount = clip.iteration_count || '1';
-    var infinite = iterationCount === 'infinite';
-    targets.forEach(function(target) {
-      if (clip.kind === 'custom') {
-        target.style.animation = 'customAnim_' + clip.id + ' ' + duration + 's ' + (clip.easing || 'ease') +
-          ' ' + delay + 's ' + iterationCount;
-        if (!infinite) {
-          target.addEventListener('animationend', function handler() {
-            target.style.animation = '';
-            target.removeEventListener('animationend', handler);
-          });
-        }
-      } else {
-        var animClass = 'animate__' + clip.animate_name;
-        target.style.setProperty('--animate-duration', duration + 's');
-        target.style.setProperty('--animate-delay', delay + 's');
-        target.style.animationIterationCount = iterationCount;
-        target.classList.add('animate__animated', animClass);
-        if (!infinite) {
-          target.addEventListener('animationend', function handler() {
-            target.classList.remove('animate__animated', animClass);
-            target.removeEventListener('animationend', handler);
-          });
-        }
-      }
-    });
-  }
-
-  // Rassemble les clips propres à cet écran ET ceux de tout écran-MODÈLE
-  // utilisé par un de ses éléments (élément de jeu réutilisable posé sur cet
-  // écran, ex. "mail content") — récursif (un modèle peut lui-même utiliser
-  // un autre modèle), avec une garde anti-boucle et un dédoublonnage par
-  // écran (un même modèle posé plusieurs fois ne doit pas répéter ses
-  // clips). Sans ça, une animation posée directement dans l'éditeur d'un
-  // modèle ne se jouait jamais quand le modèle est utilisé ailleurs — seul
-  // l'écran-modèle affiché EN TANT QU'ÉCRAN pouvait la jouer.
-  function collectAnimationClips(screenId) {
-    var visited = {};
-    var clips = [];
-    function visit(sid) {
-      if (visited[sid]) return;
-      visited[sid] = true;
-      clips = clips.concat((gameData.animations || {})[String(sid)] || []);
-      var screenData = screensData.find(function(s){ return String(s.id) === String(sid); });
-      if (!screenData) return;
-      screenData.elements.forEach(function(el) {
-        if (!el.element_type_id) return;
-        var templateScreenId = (gameData.element_types || {})[String(el.element_type_id)];
-        if (templateScreenId != null) visit(templateScreenId);
-      });
-    }
-    visit(screenId);
-    return clips;
-  }
-
-  function runAnimationTimeline(screenId) {
-    // Repart de zéro à chaque affichage de cet écran (comme
-    // runScreenShowTriggers) : on annule d'abord tout clip encore en
-    // attente d'un affichage précédent, pour ne jamais empiler des
-    // déclenchements en double si le joueur revient plusieurs fois de
-    // suite sur le même écran avant la fin de sa timeline.
-    pendingAnimationTimers.forEach(function(t) { clearTimeout(t); });
-    pendingAnimationTimers = [];
-    var clips = collectAnimationClips(screenId);
-    clips.forEach(function(clip) {
-      var t = setTimeout(function() { applyAnimationClip(clip); }, (clip.start_time || 0) * 1000);
-      pendingAnimationTimers.push(t);
-    });
-  }
-
-  // Déclenche tous les nœuds "À l'affichage de l'écran" de CET écran — pas
-  // besoin d'avoir cliqué sur quoi que ce soit : ça couvre le premier
-  // affichage, un retour en arrière, un changement d'écran (ecran_suivant/
-  // ecran_precedent/aller_a/ouvrir_ligne appellent tous showScreen). C'est
-  // ce qui permet à une condition ("SI outil débloqué = faux") + une action
-  // "Modifier un élément → Visibilité" de refléter l'état de la partie sans
-  // attendre un clic (voir 1.2 dans la doc de cadrage Forge Engine).
-  function runScreenShowTriggers(screenId) {
-    const flow = gameData.flows[String(screenId)];
-    if (!flow) return;
-    flow.nodes
-      .filter(function(n){ return n.node_type === 'trigger' && n.trigger_event === 'affichage'; })
-      .forEach(function(n){ runFlowFrom(n.id); });
-  }
-
-  function screenIndexById(id) {
-    return screensData.findIndex(s => s.id === id);
-  }
-
-  // Trouve, pour un élément et un type de déclencheur ("clic"/"soumission"),
-  // TOUS les nœuds Déclencheur qui lui sont rattachés — ce sont les points
-  // d'entrée des graphes à exécuter. Renvoie un TABLEAU (jamais un seul
-  // nœud) : rien n'empêche de poser plusieurs déclencheurs indépendants
-  // "Au clic" sur le MÊME élément (ex. l'un ouvre une ligne de Répéteur,
-  // l'autre éteint une surbrillance) — un seul clic doit alors exécuter
-  // CHACUN de ces graphes, pas seulement le premier trouvé (régression
-  // vécue : un second déclencheur posé sur un élément qui en avait déjà un
-  // restait silencieusement inerte, aucune erreur, juste jamais exécuté).
-  //
-  // On cherche dans TOUS les écrans (pas seulement l'écran courant) :
-  // bindClicks() attache les gestionnaires une seule fois, sur tous les
-  // éléments de tous les écrans (déjà tous présents dans le DOM, seuls les
-  // écrans non actifs sont masqués) — chaque identifiant d'élément est
-  // unique dans tout le jeu, donc pas d'ambiguïté possible. Cette recherche
-  // globale couvre aussi les écrans-MODÈLES (un élément de jeu réutilisable,
-  // ex. "mail content", posé sur une scène) : un déclencheur "Au clic"/"Au
-  // survol" posé dans l'éditeur du modèle, sur un de SES PROPRES enfants,
-  // est donc retrouvé même quand ce modèle est utilisé ailleurs — d'où le
-  // besoin de renvoyer aussi l'écran d'origine de CHAQUE nœud (screenIdKey),
-  // pas seulement le nœud : runFlowFrom() doit exécuter le graphe dans CET
-  // écran-là (celui du modèle), jamais dans celui réellement affiché, sans
-  // quoi le nœud trouvé n'existerait pas dans le graphe utilisé et l'action
-  // ne se déclencherait jamais.
-  function findTriggerNodess(elementId, event) {
-    const found = [];
-    for (const screenIdKey in gameData.flows) {
-      gameData.flows[screenIdKey].nodes.forEach(function(n) {
-        if (n.node_type === 'trigger' && n.trigger_element_id === elementId && (n.trigger_event || 'clic') === event) {
-          found.push({ node: n, screenId: screenIdKey });
-        }
-      });
-    }
-    return found;
-  }
-
-  // Ré-attache les gestionnaires de clic sur chaque élément — appelé au
-  // chargement, puis à nouveau après un rafraîchissement des données (le
-  // DOM d'un écran est reconstruit après une action "Modifier une donnée",
-  // les nœuds précédents et leurs écouteurs disparaissent avec).
-  // 3.1 (Confort) — interactions au survol : échange le texte affiché
-  // contre data-hover-text pendant que la souris survole l'élément, puis le
-  // restaure au départ de la souris. On ignore volontairement les éléments
-  // qui ont des enfants (ex. un conteneur) pour ne jamais écraser une mise
-  // en page imbriquée avec du texte brut — cette fonctionnalité vise les
-  // éléments de texte simples (nom, lien...), pas les conteneurs.
-  function bindHoverTexts() {
-    document.querySelectorAll('[data-hover-text]').forEach(function(el) {
-      if (el.dataset.hoverBound) return;
-      if (el.children.length > 0) return;
-      el.dataset.hoverBound = '1';
-      var original = el.textContent;
-      el.addEventListener('mouseenter', function(){ el.textContent = el.dataset.hoverText; });
-      el.addEventListener('mouseleave', function(){ el.textContent = original; });
-    });
-  }
-
-  function bindClicks() {
-    document.querySelectorAll('[data-element-id]').forEach(elDiv => {
-      const elementId = parseInt(elDiv.dataset.elementId, 10);
-      const triggers = findTriggerNodess(elementId, 'clic');
-      if (triggers.length) {
-        // Garde-fou anti-doublon : refreshRuntimeData() rappelle bindClicks()
-        // après chaque changement de donnée, mais un élément qui n'est ni un
-        // Répéteur ni une Jauge garde le MÊME nœud DOM d'un rafraîchissement
-        // à l'autre (seul son innerHTML change pour ceux-là, voir
-        // refreshRuntimeData()) — sans ce garde-fou, addEventListener('click')
-        // s'empilerait à chaque rafraîchissement et un seul clic sur un
-        // bouton "+10 points" finirait par déclencher l'action 2, 3, 10 fois
-        // d'affilée (d'où les sauts de +100/-20/0 constatés au lieu de ±10).
-        if (elDiv.dataset.clickBound) return;
-        elDiv.dataset.clickBound = '1';
-        elDiv.style.cursor = 'pointer';
-        elDiv.addEventListener('click', (ev) => {
-          ev.stopPropagation();
-          // Si l'élément cliqué (ou un de ses parents, jusqu'au Répéteur
-          // qui reçoit le gestionnaire) est en fait une LIGNE de Répéteur,
-          // on retrouve son vrai id de donnée (data-row-id, posé par
-          // render_repeater.py) — c'est ce qui permet à l'action "Ouvrir la
-          // ligne cliquée" de savoir sur quel mail précis on a cliqué,
-          // alors même que le déclencheur, lui, vise le Répéteur entier.
-          const rowEl = ev.target.closest('.repeaterItem');
-          window.lastClickedRowId = rowEl ? parseInt(rowEl.dataset.rowId, 10) : null;
-          window.lastClickedDefinitionId = elDiv.dataset.definitionId ? parseInt(elDiv.dataset.definitionId, 10) : null;
-          // Exécute CHAQUE déclencheur "Au clic" posé sur cet élément, pas
-          // seulement le premier (voir le commentaire de findTriggerNodess).
-          triggers.forEach(trigger => runFlowFrom(trigger.node.id, trigger.screenId));
-        });
-      }
-    });
-  }
-
-  // Déclencheurs "Au survol" / "Fin du survol" — même principe que
-  // bindClicks() (garde-fou anti-doublon compris), mais sur mouseenter/
-  // mouseleave plutôt que click, et les deux événements cherchés
-  // séparément puisque ce sont deux déclencheurs distincts et indépendants
-  // (voir le commentaire sur TRIGGER_EVENTS dans screens/flow/constants.py
-  // — pas de retour automatique à l'état d'avant survol, un créateur qui en
-  // veut un doit poser l'action inverse sur "Fin du survol" lui-même).
-  function bindHoverTriggers() {
-    document.querySelectorAll('[data-element-id]').forEach(elDiv => {
-      if (elDiv.dataset.hoverTriggerBound) return;
-      const elementId = parseInt(elDiv.dataset.elementId, 10);
-      const enterTriggers = findTriggerNodess(elementId, 'survol');
-      const leaveTriggers = findTriggerNodess(elementId, 'fin_survol');
-      if (!enterTriggers.length && !leaveTriggers.length) return;
-      elDiv.dataset.hoverTriggerBound = '1';
-      // Exécute CHAQUE déclencheur trouvé, pas seulement le premier — voir
-      // le commentaire de findTriggerNodess (plusieurs déclencheurs
-      // indépendants sur le même élément/événement doivent tous s'exécuter).
-      if (enterTriggers.length) elDiv.addEventListener('mouseenter', () => enterTriggers.forEach(t => runFlowFrom(t.node.id, t.screenId)));
-      if (leaveTriggers.length) elDiv.addEventListener('mouseleave', () => leaveTriggers.forEach(t => runFlowFrom(t.node.id, t.screenId)));
-    });
-  }
-
-  // Résout, sur l'écran couramment affiché, les placeholders "champ entre
-  // doubles accolades" restés tels quels dans le HTML statique (hors
-  // Répéteur, donc jamais résolus au moment du rendu serveur) avec les
-  // valeurs de la DERNIÈRE ligne ouverte via l'action "Ouvrir la ligne
-  // cliquée" (window.currentOpenRow). On part à chaque fois du HTML
-  // D'ORIGINE (el.rendered_html, jamais modifié) et pas du DOM déjà
-  // affiché, sinon rouvrir un mail différent laisserait les valeurs du mail
-  // précédent là où le nouveau mail n'a pas ce champ.
-  //
-  // Note : on construit les accolades doubles caractère par caractère
-  // (PLACEHOLDER_OPEN/CLOSE) plutôt que de les écrire en dur dans ce
-  // fichier — {{ et }} adjacents seraient interprétés par Jinja (le moteur
-  // de templates serveur) comme DU JINJA, pas comme du JavaScript littéral.
-  var PLACEHOLDER_OPEN = '{' + '{';
-  var PLACEHOLDER_CLOSE = '}' + '}';
-
-  function applyOpenRowBindings() {
-    if (!window.currentOpenRow) return;
-    const rows = gameData.data[String(window.currentOpenRow.definitionId)] || [];
-    const row = rows.find(r => r.id === window.currentOpenRow.rowId);
-    const screenData = screensData.find(s => s.id === window.currentScreenId);
-    const screenDiv = document.querySelector('.playScreen[data-screen-id="' + window.currentScreenId + '"]');
-    if (!row || !screenData || !screenDiv) return;
-
-    // Cible directement, à N'IMPORTE QUEL niveau d'imbrication, le ou les
-    // éléments qui portent vraiment un {{champ}} non résolu — et non plus
-    // seulement les éléments de PREMIER NIVEAU de l'écran. Avant ce
-    // correctif, un panneau de détail niché à 2-3 niveaux (ex. "mail
-    // content" posé dans un conteneur, lui-même dans un autre) forçait à
-    // regénérer TOUT son ancêtre de premier niveau — potentiellement
-    // l'écran entier (jauges, onglets, Répéteur compris) s'il n'y avait
-    // qu'un seul gros conteneur racine — d'où l'impression trompeuse d'un
-    // rechargement de page (flash à vide) à chaque clic sur une ligne.
-    //
-    // Parmi les éléments qui ont un {{champ}} non résolu, on ne garde que
-    // les plus SPÉCIFIQUES (les plus profonds) : si un élément ET l'un de
-    // ses DESCENDANTS sont tous deux candidats, seul le descendant est
-    // régénéré (rendered_html d'un conteneur inclut TOUJOURS celui de ses
-    // descendants, donc un conteneur "candidat" ne l'est souvent que parce
-    // qu'un descendant à lui l'est — le garder en plus regénérerait
-    // inutilement tout son sous-arbre, à l'exact opposé du but recherché).
-    // ATTENTION : la version précédente de ce filtre vérifiait l'inverse
-    // (exclure un élément si un ANCÊTRE est candidat) — comme un ancêtre
-    // est presque toujours "candidat" dès qu'un descendant l'est (son HTML
-    // le contient), ce filtre ne gardait en pratique QUE l'ancêtre racine
-    // de l'écran, annulant complètement l'effet recherché par ce correctif.
-    const byId = {};
-    screenData.elements.forEach(function(e){ byId[e.id] = e; });
-    function hasUnresolvedPlaceholder(e) {
-      return !!(e.rendered_html && e.rendered_html.indexOf(PLACEHOLDER_OPEN) !== -1);
-    }
-    function isDescendantOf(e, ancestorId) {
-      let p = e.parent_id ? byId[e.parent_id] : null;
-      while (p) {
-        if (p.id === ancestorId) return true;
-        p = p.parent_id ? byId[p.parent_id] : null;
-      }
-      return false;
-    }
-    const candidates = screenData.elements.filter(hasUnresolvedPlaceholder);
-    const targets = candidates.filter(function(e) {
-      return !candidates.some(function(other) { return other.id !== e.id && isDescendantOf(other, e.id); });
-    });
-
-    // Résout {{champ}} EN PLACE dans le DOM déjà affiché, sans jamais
-    // détruire/recréer le moindre nœud — un peu comme un diff React ciblé,
-    // mais posé à la main puisqu'il n'y a pas de vrai DOM virtuel ici :
-    //   - dans un nœud TEXTE : {{champ}} est coupé en 3 (texte avant, un
-    //     <span data-bind-field="champ"> qui portera la valeur, texte
-    //     après) LA PREMIÈRE FOIS SEULEMENT ; les ouvertures suivantes se
-    //     contentent de changer le textContent de ce span.
-    //   - dans un ATTRIBUT (ex. href d'un lien "{{link_real_url}}") : le
-    //     gabarit d'origine est mémorisé sur un data-bind-attr-<nom> lors du
-    //     premier passage, pour pouvoir recalculer et réécrire l'attribut à
-    //     chaque fois sans jamais avoir besoin de reconstruire le nœud.
-    // Avant ce correctif, tout le sous-arbre ciblé était détruit et recréé
-    // depuis zéro à chaque clic sur une ligne — ce qui causait un flash
-    // visuel (perte de tout état transitoire posé par "Modifier un
-    // élément", donnant l'impression trompeuse d'un rechargement de page).
-    // Avec la résolution en place, plus aucun nœud du sous-arbre ne bouge :
-    // rien à sauvegarder ni à restaurer.
-    const placeholderRe = new RegExp(PLACEHOLDER_OPEN + '([^{}]+)' + PLACEHOLDER_CLOSE, 'g');
-
-    function resolveTextNodes(root) {
-      const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
-      const toSplit = [];
-      let node;
-      while ((node = walker.nextNode())) {
-        if (node.nodeValue.indexOf(PLACEHOLDER_OPEN) !== -1) toSplit.push(node);
-      }
-      toSplit.forEach(function(textNode) {
-        const raw = textNode.nodeValue;
-        placeholderRe.lastIndex = 0;
-        const frag = document.createDocumentFragment();
-        let lastIndex = 0, match;
-        while ((match = placeholderRe.exec(raw))) {
-          if (match.index > lastIndex) frag.appendChild(document.createTextNode(raw.slice(lastIndex, match.index)));
-          const span = document.createElement('span');
-          span.dataset.bindField = match[1];
-          span.textContent = row[match[1]] == null ? '' : String(row[match[1]]);
-          frag.appendChild(span);
-          lastIndex = match.index + match[0].length;
-        }
-        if (lastIndex < raw.length) frag.appendChild(document.createTextNode(raw.slice(lastIndex)));
-        textNode.replaceWith(frag);
-      });
-    }
-
-    function updateTextSlots(root) {
-      root.querySelectorAll('[data-bind-field]').forEach(function(slot) {
-        const value = row[slot.dataset.bindField] == null ? '' : String(row[slot.dataset.bindField]);
-        if (slot.textContent !== value) slot.textContent = value;
-      });
-    }
-
-    function resolveAttributes(root) {
-      [root].concat(Array.from(root.querySelectorAll('*'))).forEach(function(node) {
-        Array.from(node.attributes).forEach(function(attr) {
-          if (attr.name.indexOf('data-bind-attr-') === 0) return; // gabarit déjà mémorisé, pas un attribut à lire
-          const bindKey = 'data-bind-attr-' + attr.name;
-          const template = node.hasAttribute(bindKey) ? node.getAttribute(bindKey) : (attr.value.indexOf(PLACEHOLDER_OPEN) !== -1 ? attr.value : null);
-          if (template === null) return;
-          if (!node.hasAttribute(bindKey)) node.setAttribute(bindKey, template);
-          placeholderRe.lastIndex = 0;
-          const resolved = template.replace(placeholderRe, function(_, fieldName) {
-            return row[fieldName] == null ? '' : String(row[fieldName]);
-          });
-          if (attr.value !== resolved) node.setAttribute(attr.name, resolved);
-        });
-      });
-    }
-
-    targets.forEach(function(el) {
-      const target = screenDiv.querySelector('[data-element-id="' + el.id + '"]');
-      if (!target) return;
-      if (target.querySelector('[data-bind-field]')) {
-        updateTextSlots(target);
-      } else {
-        resolveTextNodes(target);
-      }
-      resolveAttributes(target);
-    });
-  }
-
-  // Recharge l'état du jeu depuis le serveur (après une action qui a
-  // modifié une donnée d'objet) pour refléter la nouvelle valeur — utile
-  // pour un Répéteur de données, qui doit réafficher ses lignes à jour.
-  // Important : on ne touche QU'AUX éléments qui contiennent réellement un
-  // répéteur (repérable par la classe "repeaterItem" dans leur HTML rendu).
-  // Reconstruire TOUT l'écran à chaque rafraîchissement effacerait les
-  // changements purement visuels faits en même temps par une action
-  // "Modifier un élément" (ex: masquer une boîte) déclenchée par le même
-  // clic, puisque ces changements ne sont jamais enregistrés côté serveur.
-  function refreshRuntimeData() {
-    return fetch("{{ url_for('runtime_payload', slug=game.slug) }}")
-      .then(r => r.json())
-      .then(newData => {
-        gameData = newData;
-        screensData = gameData.screens;
-        const screenData = screensData.find(s => s.id === window.currentScreenId);
-        const screenDiv = document.querySelector('.playScreen[data-screen-id="' + window.currentScreenId + '"]');
-        // Le bloc ci-dessous (régénération du contenu de l'écran courant)
-        // est sauté si l'écran n'est pas trouvé, mais bindClicks() et les
-        // autres réattachements juste après ne doivent JAMAIS dépendre de
-        // cette condition : un retour anticipé ici a déjà laissé, dans la
-        // pratique, un Répéteur fraîchement régénéré sans AUCUN gestionnaire
-        // de clic pour le reste de la partie (plus aucune ligne ne
-        // répondait, silencieusement, sans erreur) — ces fonctions sont sans
-        // risque à rappeler même quand rien n'a changé.
-        if (screenData && screenDiv) {
-          // try/catch : une erreur inattendue pendant la régénération (ex.
-          // structure de données imprévue) ne doit jamais empêcher les
-          // réattachements ci-dessous de s'exécuter — sinon le Répéteur (ou
-          // tout autre élément cliquable) reste silencieusement inerte pour
-          // le reste de la partie, sans le moindre message d'erreur visible.
-          try {
-            // "repeaterItem" (liste de données), "jaugeBar" (2.1 — jauge liée
-            // à une donnée), "visibilityGated" (condition de visibilité) et
-            // "dataBound" ("Donnée liée" d'un Texte/Titre — voir
-            // render_element_html.py) sont les types d'éléments dont le
-            // contenu/l'affichage dépend de la donnée elle-même plutôt que
-            // d'une action "Modifier un élément" posée à la main dans le
-            // graphe — eux seuls doivent être régénérés après un changement
-            // de donnée ou de variable.
-            //
-            // On cible ces éléments à N'IMPORTE QUEL niveau d'imbrication
-            // (pas seulement le premier niveau de l'écran), via leur
-            // data-element-id — disponible sur chaque élément rendu, pas
-            // seulement les éléments de premier niveau. Avant ce correctif,
-            // un Répéteur niché dans un conteneur (comme ici) n'était JAMAIS
-            // du premier niveau, donc c'est son ANCÊTRE de premier niveau
-            // qui portait le marqueur (le Répéteur imbriqué à l'intérieur)
-            // et se retrouvait régénéré en entier à sa place — potentiellement
-            // l'écran entier (jauges, onglets... compris) s'il n'y avait
-            // qu'un seul gros conteneur racine.
-            //
-            // Parmi les éléments marqués, on ne garde que les plus
-            // SPÉCIFIQUES (les plus profonds) : un ancêtre est presque
-            // toujours "marqué" lui aussi dès qu'un descendant l'est, puisque
-            // son rendered_html contient celui de ses descendants — le
-            // garder EN PLUS régénérerait tout son sous-arbre pour rien.
-            // (Une version antérieure de ce filtre vérifiait l'inverse —
-            // exclure un élément si un ANCÊTRE est marqué — ce qui ne
-            // gardait en pratique que l'ancêtre racine de l'écran et
-            // annulait complètement l'effet recherché.)
-            const byId = {};
-            screenData.elements.forEach(function(e){ byId[e.id] = e; });
-            function hasMarker(e) {
-              return !!(e.rendered_html && (
-                e.rendered_html.indexOf('repeaterItem') !== -1 ||
-                e.rendered_html.indexOf('jaugeBar') !== -1 ||
-                e.rendered_html.indexOf('visibilityGated') !== -1 ||
-                e.rendered_html.indexOf('dataBound') !== -1
-              ));
-            }
-            function isDescendantOf(e, ancestorId) {
-              let p = e.parent_id ? byId[e.parent_id] : null;
-              while (p) {
-                if (p.id === ancestorId) return true;
-                p = p.parent_id ? byId[p.parent_id] : null;
-              }
-              return false;
-            }
-            // "visibilityGated"/"dataBound" sont posés comme un COMMENTAIRE
-            // HTML juste après la balise concernée (voir _mark() dans
-            // render_element_html.py) — jamais comme une classe CSS, à la
-            // différence de "repeaterItem"/"jaugeBar" (qui, eux, désignent
-            // un widget à régénérer EN BLOC, lignes/valeur comprises, un
-            // comportement déjà correct pour ces deux-là). Repérer ce
-            // commentaire permet de retrouver, à l'intérieur d'un fragment
-            // fraîchement rendu, l'élément PRÉCIS qui a changé — même s'il
-            // est niché dans un exemplaire d'élément de jeu réutilisable
-            // (ex. un Texte "Donnée liée" à l'intérieur d'une boîte de
-            // dialogue), où lui seul porte l'attribut data-element-id qui
-            // l'identifie, son marqueur ne remontant jusqu'au SEUL élément
-            // de premier niveau existant (l'exemplaire) que parce que son
-            // HTML est imbriqué dans le sien.
-            const COMMENT_MARKERS = ['visibilityGated', 'dataBound'];
-            function findCommentMarkedDescendants(root) {
-              const found = [];
-              root.querySelectorAll('[data-element-id]').forEach(function(node) {
-                const sib = node.nextSibling;
-                const hasCommentMarker = !!(sib && sib.nodeType === Node.COMMENT_NODE && COMMENT_MARKERS.indexOf(sib.data) !== -1);
-                // Un élément actuellement CACHÉ par une condition de
-                // visibilité (voir render_element_html.py) n'a pas de
-                // commentaire marqueur à sa suite — sa balise porte
-                // directement la classe "visibilityGated" à la place. Sans
-                // ce second cas, un élément qui passe de VISIBLE à CACHÉ
-                // n'était jamais retrouvé ici (seul le sens caché->visible
-                // l'était, via le commentaire) : son ancien nœud visible
-                // restait donc affiché indéfiniment à côté du nouveau,
-                // maintenant visible, qui le remplace normalement (ex. une
-                // icône "enveloppe fermée" jamais masquée en même temps que
-                // "enveloppe ouverte" qui apparaît après avoir cliqué).
-                const isHiddenPlaceholder = node.classList.contains('visibilityGated');
-                if (hasCommentMarker || isHiddenPlaceholder) {
-                  found.push(node);
-                }
-              });
-              return found;
-            }
-            const markedCandidates = screenData.elements.filter(hasMarker);
-            markedCandidates.filter(function(e) {
-              return !markedCandidates.some(function(other) { return other.id !== e.id && isDescendantOf(other, e.id); });
-            }).forEach(function(el) {
-              const target = screenDiv.querySelector('[data-element-id="' + el.id + '"]');
-              if (!target) return;
-              const container = document.createElement('div');
-              container.innerHTML = el.rendered_html;
-              const newNode = container.firstElementChild;
-              if (!newNode) return;
-              const innerMarked = findCommentMarkedDescendants(newNode);
-              if (innerMarked.length) {
-                // Des éléments plus précis existent À L'INTÉRIEUR (ex. un
-                // Texte "Donnée liée" posé dans un élément de jeu
-                // réutilisable) : on ne patche QUE ceux-là, en préservant
-                // tout le reste — une boîte de dialogue ne doit ni
-                // disparaître ni réapparaître juste parce qu'un texte à
-                // l'intérieur a changé.
-                innerMarked.forEach(function(innerNode) {
-                  const innerId = innerNode.getAttribute('data-element-id');
-                  const liveInner = target.querySelector('[data-element-id="' + innerId + '"]');
-                  if (liveInner) liveInner.replaceWith(innerNode);
-                });
-              } else {
-                target.replaceWith(newNode);
-              }
-            });
-            applyOpenRowBindings();
-          } catch (err) {
-            console.error('refreshRuntimeData: erreur pendant la régénération de l\'écran', err);
-          }
-        }
-        bindClicks();
-        bindHoverTexts();
-        bindHoverTriggers();
-        // Réévalue aussi les nœuds "À l'affichage de l'écran" de l'écran où
-        // l'on se trouve déjà : une donnée vient de changer (ex: un outil
-        // qu'on vient de débloquer), donc l'affichage doit se mettre à jour
-        // tout de suite, sans attendre un aller-retour d'écran.
-        runScreenShowTriggers(window.currentScreenId);
-      });
-  }
-
-  // Propriété CSS réelle + éventuel suffixe (unité) pour chaque propriété
-  // pilotable par une action "Modifier un élément".
-  var ELEMENT_PROPERTY_CSS = {
-    bg_color: { css: 'backgroundColor', suffix: '' },
-    border_color: { css: 'borderColor', suffix: '' },
-    width: { css: 'width', suffix: '%' },
-    height: { css: 'height', suffix: '%' },
+  var FORGE_PLAY_URLS = {
+    runtimePayload: {{ url_for('runtime_payload', slug=game.slug)|tojson }},
+    flowNodeRunData: {{ url_for('flow_node_run_data', slug=game.slug, node_id=999999)|tojson }},
+    flowNodeRunVariable: {{ url_for('flow_node_run_variable', slug=game.slug, node_id=999999)|tojson }},
   };
-
-  function applyElementProperty(targetEl, property, value) {
-    if (property === 'contenu') {
-      // Voir ELEMENT_ACTION_PROPERTIES ("contenu") : texte littéral, pas de
-      // binding vers un champ d'objet ici (contrairement à
-      // applyOpenRowBindings, propre à "Ouvrir la ligne cliquée"). Comme
-      // pour les autres réglages ci-dessous, cible n'importe quel élément —
-      // pointer ceci vers un conteneur remplacerait tout son contenu
-      // imbriqué, à éviter.
-      targetEl.textContent = value == null ? '' : value;
-      return;
-    }
-    if (property === 'surbrillance') {
-      // 3.3 (Confort) — surbrillance générique dynamique : un liseré qui
-      // clignote (voir la classe .forgeHighlight et son animation dans le
-      // <style> ci-dessus), applicable à N'IMPORTE QUEL élément sans poser
-      // de bordure colorée togglée à la main — utile pour un mentor qui
-      // attire l'attention du joueur vers l'élément à toucher ensuite.
-      if (value === 'toggle') {
-        targetEl.classList.toggle('forgeHighlight');
-      } else if (value === 'off') {
-        targetEl.classList.remove('forgeHighlight');
-      } else {
-        targetEl.classList.add('forgeHighlight');
-      }
-      return;
-    }
-    if (property === 'desactive') {
-      // 3.5 (Confort) — verrouillage d'un élément après décision : DISTINCT
-      // de "invisible" (l'élément reste visible, mais grisé et inerte —
-      // pointer-events:none bloque aussi le clic, donc le déclencheur "Au
-      // clic" éventuellement posé sur cet élément ne se redéclenche plus).
-      if (value === 'toggle') {
-        targetEl.classList.toggle('forgeDisabled');
-      } else if (value === 'off') {
-        targetEl.classList.remove('forgeDisabled');
-      } else {
-        targetEl.classList.add('forgeDisabled');
-      }
-      return;
-    }
-    if (property === 'visibilite') {
-      if (value === 'toggle') {
-        const hidden = targetEl.style.display === 'none';
-        targetEl.style.display = hidden ? '' : 'none';
-        targetEl.style.visibility = '';
-      } else if (value === 'masque') {
-        targetEl.style.display = 'none';
-      } else if (value === 'invisible') {
-        targetEl.style.display = '';
-        targetEl.style.visibility = 'hidden';
-      } else {
-        targetEl.style.display = '';
-        targetEl.style.visibility = '';
-      }
-      return;
-    }
-
-    const spec = ELEMENT_PROPERTY_CSS[property];
-    if (!spec || value === undefined || value === null) return;
-
-    // "valeur1||valeur2" : effet va-et-vient — un état par élément et par
-    // propriété, mémorisé directement sur le nœud DOM (data-toggle-<prop>) :
-    // un clic passe à la 2e valeur, le clic suivant revient à la 1re, et
-    // ainsi de suite. Ce n'est PAS enregistré en base : l'état repart de la
-    // 1re valeur si l'écran est rechargé.
-    if (typeof value === 'string' && value.indexOf('||') !== -1) {
-      const parts = value.split('||');
-      const key = 'toggle' + property;
-      const atSecond = targetEl.dataset[key] === '1';
-      const next = atSecond ? parts[0] : parts[1];
-      targetEl.style[spec.css] = next + spec.suffix;
-      targetEl.dataset[key] = atSecond ? '0' : '1';
-      return;
-    }
-
-    targetEl.style[spec.css] = value + spec.suffix;
-  }
-
-  function runActionNode(node) {
-    if (node.action_type === 'ecran_suivant') {
-      const idx = screenIndexById(window.currentScreenId);
-      if (idx > -1 && idx < screensData.length - 1) showScreen(screensData[idx + 1].id);
-      return Promise.resolve();
-    } else if (node.action_type === 'ecran_precedent') {
-      const idx = screenIndexById(window.currentScreenId);
-      if (idx > 0) showScreen(screensData[idx - 1].id);
-      return Promise.resolve();
-    } else if (node.action_type === 'aller_a' && node.target_screen_id) {
-      showScreen(node.target_screen_id);
-      return Promise.resolve();
-    } else if (node.action_type === 'ouvrir_ligne' && node.target_screen_id) {
-      // Mémorise QUELLE ligne a été cliquée juste avant d'exécuter cette
-      // action (voir bindClicks) puis affiche l'écran de détail avec ses
-      // placeholders "champ" résolus contre cette ligne précise.
-      if (window.lastClickedRowId != null && window.lastClickedDefinitionId != null) {
-        window.currentOpenRow = { definitionId: window.lastClickedDefinitionId, rowId: window.lastClickedRowId };
-      }
-      showScreen(node.target_screen_id);
-      applyOpenRowBindings();
-      // Si l'élément "ouvert" (ou un ancêtre commun avec lui) contient AUSSI
-      // un Répéteur — ex. un panneau de détail posé à côté d'une liste dans
-      // le même conteneur — applyOpenRowBindings() vient de régénérer son
-      // sous-arbre, lignes du Répéteur comprises, avec des nœuds tout neufs
-      // SANS AUCUN écouteur de clic (voir bindClicks : le garde-fou anti-
-      // doublon repose sur elDiv.dataset.clickBound, absent sur un nœud
-      // fraîchement créé). Sans ce rappel, un clic sur "ouvrir la ligne
-      // cliquée" combiné à un Répéteur sur le même écran rendait TOUTES les
-      // lignes muettes dès le clic suivant, sans la moindre erreur.
-      bindClicks();
-      bindHoverTexts();
-      bindHoverTriggers();
-      return Promise.resolve();
-    } else if (node.action_type === 'modifier_element' && node.target_element_id) {
-      const targetEl = document.querySelector('[data-element-id="' + node.target_element_id + '"]');
-      if (targetEl) applyElementProperty(targetEl, node.element_property, node.element_value);
-      return Promise.resolve();
-    } else if (node.action_type === 'declencher_evenement' && node.target_custom_event_id) {
-      // Notification pure (voir screens/custom_events/) : ne fait que
-      // signaler l'événement, jamais choisir un élément — c'est à
-      // l'écouteur (déclencheur → condition → action) de décider quoi
-      // faire, avec ses propres réglages habituels.
-      window.dispatchGameEvent(node.target_custom_event_id);
-      return Promise.resolve();
-    } else if (node.action_type === 'activer_onglet' && node.target_element_id) {
-      // 2.3 — panneau à onglets / visibilité mutuellement exclusive : montre
-      // l'élément visé et masque tous ses FRÈRES DIRECTS (même parent_id,
-      // y compris "aucun parent" = les autres éléments de premier niveau de
-      // l'écran) en une seule action, plutôt qu'une action "Masquer" par
-      // frère. screenData.elements contient TOUS les éléments de l'écran
-      // (imbriqués compris, voir list_elements côté serveur), donc ça
-      // fonctionne aussi bien pour des onglets imbriqués dans un même
-      // conteneur que pour des "vues" posées directement sur l'écran.
-      const screenData = screensData.find(function(s){ return s.id === window.currentScreenId; });
-      const allElements = screenData ? screenData.elements : [];
-      const target = allElements.find(function(e){ return e.id === node.target_element_id; });
-      if (target) {
-        const parentKey = target.parent_id || null;
-        allElements
-          .filter(function(e){ return (e.parent_id || null) === parentKey; })
-          .forEach(function(e) {
-            const el = document.querySelector('[data-element-id="' + e.id + '"]');
-            if (!el) return;
-            if (e.id === target.id) { el.style.display = ''; el.style.visibility = ''; }
-            else { el.style.display = 'none'; }
-          });
-      }
-      return Promise.resolve();
-    } else if (node.action_type === 'attendre') {
-      // 3.2 (Confort) — séquences temporisées : suspend la suite du graphe
-      // pendant N secondes (node.data_value) avant de continuer sur le(s)
-      // fil(s) de sortie — permet par ex. un mail qui "arrive" tout seul
-      // quelques secondes après l'affichage de l'écran, sans action du
-      // joueur (à combiner avec le déclencheur "À l'affichage de l'écran").
-      const seconds = parseFloat(node.data_value);
-      const ms = isNaN(seconds) ? 0 : Math.max(0, seconds) * 1000;
-      return new Promise(function(resolve) { setTimeout(resolve, ms); });
-    } else if (node.action_type === 'modifier_donnee') {
-      const runDataUrl = "{{ url_for('flow_node_run_data', slug=game.slug, node_id=999999) }}".replace('999999', node.id);
-      // clicked_row_id : utilisé côté serveur SEULEMENT si ce nœud vise la
-      // ligne cliquée (CLICKED_ROW_ID, voir flow_node_run_data.py) — sans
-      // effet sinon, donc toujours transmis sans condition ici.
-      return fetch(runDataUrl, {
-        method: 'POST', headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ clicked_row_id: window.lastClickedRowId })
-      })
-        .then(r => r.json())
-        .then(() => refreshRuntimeData());
-    } else if (node.action_type === 'modifier_variable') {
-      const runVarUrl = "{{ url_for('flow_node_run_variable', slug=game.slug, node_id=999999) }}".replace('999999', node.id);
-      return fetch(runVarUrl, {method: 'POST'})
-        .then(r => r.json())
-        .then(() => refreshRuntimeData());
-    }
-    // 'rien' : aucune action volontairement.
-    return Promise.resolve();
-  }
-
-  // Lit la valeur actuelle d'un champ d'objet dans l'instantané de données
-  // du jeu (gameData.data), pour l'évaluation d'une condition.
-  function readFieldValue(definitionId, rowId, fieldName) {
-    // CLICKED_ROW_ID (-1, voir flow_node_run_data.py) : "la ligne de
-    // Répéteur sur laquelle on vient de cliqué" — jamais connue à l'avance
-    // dans l'éditeur (choisie ici via "🖱️ Ligne cliquée (Répéteur)"),
-    // résolue seulement au moment de l'évaluation via le dernier clic
-    // capturé (voir bindClicks() plus haut).
-    if (rowId === -1) rowId = window.lastClickedRowId;
-    const rows = gameData.data[String(definitionId)] || [];
-    const row = rows.find(r => r.id === rowId);
-    return row ? row[fieldName] : undefined;
-  }
-
-  function compareValues(actual, operator, expected, fieldType) {
-    if (fieldType === 'booleen') {
-      const a = actual ? 1 : 0;
-      // "oui"/"non" (voir data_list.html) est le vocabulaire affiché
-      // partout ailleurs pour un champ booléen — une valeur de comparaison
-      // fixe tapée "Oui" doit donc être reconnue vraie ici aussi, pas
-      // seulement "1"/"true" (et insensible à la casse, aligné avec
-      // _compare() côté Python, voir filter_repeater_rows.py).
-      const expectedStr = String(expected).trim().toLowerCase();
-      const e = (expected === true || ['1', 'true', 'vrai', 'oui'].includes(expectedStr)) ? 1 : 0;
-      return operator === 'different' ? a !== e : a === e;
-    }
-    const an = parseFloat(actual), en = parseFloat(expected);
-    const numeric = !isNaN(an) && !isNaN(en);
-    if (numeric) {
-      switch (operator) {
-        case 'egal': return an === en;
-        case 'different': return an !== en;
-        case 'superieur': return an > en;
-        case 'inferieur': return an < en;
-        case 'superieur_egal': return an >= en;
-        case 'inferieur_egal': return an <= en;
-      }
-    }
-    const as = (actual === undefined || actual === null) ? '' : String(actual);
-    const es = (expected === undefined || expected === null) ? '' : String(expected);
-    switch (operator) {
-      case 'egal': return as === es;
-      case 'different': return as !== es;
-      case 'superieur': return as > es;
-      case 'inferieur': return as < es;
-      case 'superieur_egal': return as >= es;
-      case 'inferieur_egal': return as <= es;
-      default: return false;
-    }
-  }
-
-  // Lit la valeur ACTUELLE d'une variable globale (gameData.variables,
-  // exposé par full_game_payload.py, tenu à jour par refreshRuntimeData()
-  // après toute action qui en modifie une), pour l'évaluation d'une
-  // condition — équivalent, côté client, de _resolve_filter_value côté
-  // serveur (screens/rendering/filter_repeater_rows.py), mais SANS la
-  // syntaxe utilisée par le Répéteur/la Condition de visibilité (jamais
-  // nécessaire ici : le nom de la variable est choisi dans un menu
-  // déroulant, voir screen_edit.html).
-  function readVariableValue(name) {
-    const v = (gameData.variables || {})[name];
-    return v ? v.value : undefined;
-  }
-
-  // Navigue dans une valeur JSON (variable de type "objet"/"tableau")
-  // selon un chemin ".champ"/"[index]" chaînable — équivalent JS de
-  // _resolve_variable_path (même fichier Python que ci-dessus). Chemin
-  // vide -> valeur brute inchangée (le cas normal pour une variable
-  // scalaire). Ne lève jamais : JSON invalide ou chemin qui ne correspond
-  // à rien -> null, comme côté serveur.
-  function resolveVariablePath(rawValue, path) {
-    if (!path) return rawValue;
-    let current;
-    try { current = rawValue ? JSON.parse(rawValue) : null; } catch (e) { return null; }
-    const segmentRe = /\.([^.\[\]]+)|\[(\d+)\]/g;
-    let m;
-    while ((m = segmentRe.exec(path)) !== null) {
-      if (current === null || current === undefined) return null;
-      current = m[1] !== undefined ? current[m[1]] : current[parseInt(m[2], 10)];
-    }
-    return current === undefined ? null : current;
-  }
-
-  // 2.4 — conditions combinées (ET/OU) : un nœud Condition peut porter une
-  // liste cond_clauses (JSON) en plus de sa clause historique. Un nœud sans
-  // cond_clauses (tous les nœuds créés avant 2.4, ou un nœud à une seule
-  // clause) garde EXACTEMENT son ancien comportement — une seule comparaison.
-  //
-  // Chaque clause peut tester soit un champ d'objet (source absente/"objet",
-  // comportement historique), soit une VARIABLE GLOBALE (source
-  // "variable" — voir ensure_flow_schema.py pour cond_source/cond_variable/
-  // cond_variable_chemin).
-  function evaluateConditionClause(clause) {
-    const source = clause.source ?? clause.cond_source ?? 'objet';
-    const operator = clause.operator ?? clause.cond_operator;
-    const expected = clause.value ?? clause.cond_value;
-    if (source === 'variable') {
-      const varName = clause.variable ?? clause.cond_variable;
-      const path = clause.variable_chemin ?? clause.cond_variable_chemin;
-      const varInfo = (gameData.variables || {})[varName];
-      const actual = resolveVariablePath(readVariableValue(varName), path);
-      const fieldType = varInfo && varInfo.type === 'booleen' ? 'booleen' : '';
-      return compareValues(actual, operator, expected, fieldType);
-    }
-    const actual = readFieldValue(clause.definition_id ?? clause.cond_definition_id, clause.row_id ?? clause.cond_row_id, clause.field ?? clause.cond_field);
-    return compareValues(actual, operator, expected, clause.field_type ?? clause.cond_field_type);
-  }
-
-  function evaluateConditionNode(node) {
-    if (node.cond_clauses) {
-      let clauses;
-      try { clauses = JSON.parse(node.cond_clauses); } catch (e) { clauses = null; }
-      if (Array.isArray(clauses) && clauses.length) {
-        const results = clauses.map(evaluateConditionClause);
-        return node.cond_combinator === 'ou' ? results.some(Boolean) : results.every(Boolean);
-      }
-    }
-    return evaluateConditionClause(node);
-  }
-
-  // Exécute le graphe de logique de l'écran courant à partir d'un nœud
-  // (typiquement un Déclencheur touché par le joueur). Un même point de
-  // sortie peut être relié à PLUSIEURS nœuds suivants (plusieurs actions
-  // pour un même déclencheur, ou plusieurs suites pour une même branche
-  // Vrai/Faux) — tous les fils sortants d'un port sont donc suivis, pas
-  // seulement le premier. Chaque nœud Action produit son effet puis
-  // continue sur son (ou ses) fil de sortie ; chaque nœud Condition évalue
-  // une donnée du jeu et suit le(s) fil(s) "Vrai" ou "Faux" en conséquence.
-  // flowScreenId : l'écran PROPRIÉTAIRE du graphe à exécuter — par défaut
-  // l'écran affiché, mais peut être un écran-MODÈLE (voir findTriggerNodes)
-  // quand le nœud de départ vient d'un déclencheur posé dans l'éditeur d'un
-  // élément de jeu réutilisable, sur un de ses propres enfants. Sans ce
-  // paramètre, un tel déclencheur était bien retrouvé (findTriggerNodes
-  // cherche dans tous les écrans) mais son graphe n'existait jamais dans
-  // l'écran réellement affiché : rien ne se déclenchait, silencieusement.
-  function runFlowFrom(nodeId, flowScreenId) {
-    const flow = gameData.flows[String(flowScreenId != null ? flowScreenId : window.currentScreenId)];
-    if (!flow) return;
-    const nodesById = {};
-    flow.nodes.forEach(n => { nodesById[n.id] = n; });
-
-    function nextEdges(fromId, port) {
-      return flow.edges.filter(e => e.from_node_id === fromId && e.from_port === port);
-    }
-
-    function step(currentId) {
-      const node = nodesById[currentId];
-      if (!node) return;
-      if (node.node_type === 'trigger') {
-        nextEdges(node.id, 'out').forEach(edge => step(edge.to_node_id));
-      } else if (node.node_type === 'condition') {
-        const port = evaluateConditionNode(node) ? 'vrai' : 'faux';
-        nextEdges(node.id, port).forEach(edge => step(edge.to_node_id));
-      } else if (node.node_type === 'action') {
-        runActionNode(node).then(() => {
-          nextEdges(node.id, 'out').forEach(edge => step(edge.to_node_id));
-        });
-      }
-    }
-    step(nodeId);
-  }
-
-  // Déclenche un événement personnalisé (voir screens/custom_events/,
-  // action "declencher_evenement") : une pure NOTIFICATION, sans aucun
-  // paramètre — scan GLOBAL de gameData.flows, même principe que
-  // findTriggerNodes()/runScreenShowTriggers() ci-dessus, puisqu'un
-  // écouteur (nœud Déclencheur trigger_event="evenement") peut vivre sur
-  // N'IMPORTE QUELLE autre scène ou modèle, pas seulement l'écran affiché.
-  // C'est à CHAQUE écouteur de décider quoi faire ensuite (via sa propre
-  // suite condition/action, avec ses réglages habituels — cible fixe,
-  // "Ligne cliquée"...), jamais à l'événement lui-même de le dicter.
-  window.dispatchGameEvent = function(eventId) {
-    for (const screenIdKey in gameData.flows) {
-      const flow = gameData.flows[screenIdKey];
-      flow.nodes
-        .filter(function(n){ return n.node_type === 'trigger' && n.trigger_event === 'evenement' && n.trigger_custom_event_id === eventId; })
-        .forEach(function(n) { runFlowFrom(n.id, screenIdKey); });
-    }
-  };
-
+</script>
+<script src="{{ url_for('static', filename='js/play/screens.js') }}"></script>
+<script src="{{ url_for('static', filename='js/play/conditions.js') }}"></script>
+<script src="{{ url_for('static', filename='js/play/actions.js') }}"></script>
+<script src="{{ url_for('static', filename='js/play/triggers.js') }}"></script>
+<script src="{{ url_for('static', filename='js/play/bindings.js') }}"></script>
+<script src="{{ url_for('static', filename='js/play/flow-engine.js') }}"></script>
+<script>
   // L'écran affiché au démarrage doit être choisi AVANT le premier
   // bindClicks() : la recherche du nœud Déclencheur associé à un élément se
   // fait sur l'écran courant (window.currentScreenId), qui doit donc déjà
diff --git a/tests/conftest.py b/tests/conftest.py
index a8d073b0..310c3cdc 100644
--- a/tests/conftest.py
+++ b/tests/conftest.py
@@ -87,6 +87,26 @@ def game(client):
         shutil.rmtree(game_dir)
 
 
+_PLAY_JS_DIR = os.path.join(os.path.dirname(os.path.dirname(os.path.abspath(__file__))), "static", "js", "play")
+
+
+def play_js_bundle():
+    """Concatène tout le JS du moteur jouable (voir le plan de
+    modularisation — static/js/play/, un fichier par responsabilité,
+    extrait de l'ancien <script> unique de templates/play.html). Plusieurs
+    tests vérifient que "le JS livré au joueur" contient telle fonction/
+    telle chaîne, sans dépendre d'un navigateur — avant le découpage, ça
+    revenait à chercher dans le HTML de /game/<slug>/play (tout était
+    inline) ; maintenant la logique vit dans ces fichiers statiques."""
+    parts = []
+    for name in sorted(os.listdir(_PLAY_JS_DIR)):
+        path = os.path.join(_PLAY_JS_DIR, name)
+        if os.path.isfile(path) and name.endswith(".js"):
+            with open(path, encoding="utf-8") as f:
+                parts.append(f.read())
+    return "\n".join(parts)
+
+
 @pytest.fixture
 def mail_object(client, game):
     """Un objet "Mail" avec deux champs texte (sujet, expediteur), pour les
diff --git a/tests/test_animations.py b/tests/test_animations.py
index d33f3b07..81cc3b8a 100644
--- a/tests/test_animations.py
+++ b/tests/test_animations.py
@@ -4,6 +4,8 @@ et une durée sur l'axe du temps (secondes depuis l'affichage de l'écran)."""
 import json
 import re
 
+from conftest import play_js_bundle
+
 
 def _create_screen(client, slug, name="Accueil"):
     resp = client.post(f"/game/{slug}/screens/new", data={"name": name}, follow_redirects=False)
@@ -98,8 +100,9 @@ def test_play_page_exposes_animation_runtime_and_animate_css(client, game):
     resp = client.get(f"/game/{game}/play")
     html = resp.data.decode()
     assert "animate.min.css" in html
-    assert "runAnimationTimeline" in html
-    assert "injectCustomKeyframes" in html
+    js = play_js_bundle()
+    assert "runAnimationTimeline" in js
+    assert "injectCustomKeyframes" in js
 
 
 def test_play_page_payload_includes_clip(client, game):
diff --git a/tests/test_conditions_combinees.py b/tests/test_conditions_combinees.py
index 633b2c10..c66b02c0 100644
--- a/tests/test_conditions_combinees.py
+++ b/tests/test_conditions_combinees.py
@@ -10,6 +10,8 @@ vérifient les tests de non-régression ci-dessous, en plus des tests dédiés
 import json
 import re
 
+from conftest import play_js_bundle
+
 
 def _create_screen(client, slug, name="Accueil"):
     resp = client.post(f"/game/{slug}/screens/new", data={"name": name}, follow_redirects=False)
@@ -49,10 +51,9 @@ def test_legacy_single_clause_condition_still_works_without_cond_clauses(client,
     )
     node = resp.get_json()
     assert node["cond_clauses"] is None
-    resp = client.get(f"/game/{game}/play")
-    html = resp.data.decode()
-    assert "evaluateConditionClause" in html
-    assert "cond_clauses" in html
+    js = play_js_bundle()
+    assert "evaluateConditionClause" in js
+    assert "cond_clauses" in js
 
 
 def test_condition_node_persists_clauses_and_combinator(client, game):
@@ -102,7 +103,6 @@ def test_condition_combinator_defaults_to_et_when_absent(client, game):
 
 
 def test_play_page_exposes_combinator_logic(client, game):
-    resp = client.get(f"/game/{game}/play")
-    html = resp.data.decode()
-    assert "cond_combinator" in html
-    assert "'ou'" in html
+    js = play_js_bundle()
+    assert "cond_combinator" in js
+    assert "'ou'" in js
diff --git a/tests/test_confort.py b/tests/test_confort.py
index 173a07ae..c8b424ef 100644
--- a/tests/test_confort.py
+++ b/tests/test_confort.py
@@ -5,6 +5,8 @@ d'un élément après décision."""
 import json
 import re
 
+from conftest import play_js_bundle
+
 
 def _create_screen(client, slug, name="Accueil"):
     resp = client.post(f"/game/{slug}/screens/new", data={"name": name}, follow_redirects=False)
@@ -72,11 +74,10 @@ def test_survol_trigger_node_persists(client, game):
 def test_play_page_exposes_hover_trigger_runtime(client, game):
     """bindHoverTriggers() (mouseenter/mouseleave -> runFlowFrom) doit être
     exposé et appelé, exactement comme bindClicks() pour "Au clic"."""
-    resp = client.get(f"/game/{game}/play")
-    html = resp.data.decode()
-    assert "bindHoverTriggers" in html
-    assert "'survol'" in html
-    assert "'fin_survol'" in html
+    js = play_js_bundle()
+    assert "bindHoverTriggers" in js
+    assert "'survol'" in js
+    assert "'fin_survol'" in js
 
 
 def test_modifier_element_contenu_action_persists(client, game):
@@ -107,9 +108,7 @@ def test_modifier_element_contenu_action_persists(client, game):
 
 
 def test_play_page_exposes_contenu_property_runtime(client, game):
-    resp = client.get(f"/game/{game}/play")
-    html = resp.data.decode()
-    assert "'contenu'" in html
+    assert "'contenu'" in play_js_bundle()
 
 
 # ---------- 3.2 — Séquences temporisées ----------
@@ -128,10 +127,9 @@ def test_attendre_action_node_persists_delay(client, game):
 
 
 def test_play_page_exposes_wait_action_runtime(client, game):
-    resp = client.get(f"/game/{game}/play")
-    html = resp.data.decode()
-    assert "'attendre'" in html
-    assert "setTimeout" in html
+    js = play_js_bundle()
+    assert "'attendre'" in js
+    assert "setTimeout" in js
 
 
 # ---------- 3.3 — Surbrillance générique dynamique ----------
@@ -157,7 +155,7 @@ def test_play_page_exposes_highlight_runtime_and_css(client, game):
     resp = client.get(f"/game/{game}/play")
     html = resp.data.decode()
     assert "forgeHighlight" in html
-    assert "'surbrillance'" in html
+    assert "'surbrillance'" in play_js_bundle()
 
 
 # ---------- 3.4 — Overlay / modale réutilisable ----------
@@ -473,4 +471,4 @@ def test_play_page_exposes_lock_runtime_and_css(client, game):
     html = resp.data.decode()
     assert "forgeDisabled" in html
     assert "pointer-events:none" in html
-    assert "'desactive'" in html
+    assert "'desactive'" in play_js_bundle()
diff --git a/tests/test_flow.py b/tests/test_flow.py
index c90243e5..502ee0cb 100644
--- a/tests/test_flow.py
+++ b/tests/test_flow.py
@@ -2,6 +2,8 @@
 import json
 import re
 
+from conftest import play_js_bundle
+
 
 def _create_screen(client, slug, name="Accueil"):
     resp = client.post(f"/game/{slug}/screens/new", data={"name": name}, follow_redirects=False)
@@ -143,11 +145,10 @@ def test_play_page_exposes_row_bindings_helpers(client, game):
     résoudre les {{champ}} de la ligne ouverte (voir README, section
     "Cliquer une ligne de Répéteur") — vérifie que le JS livré au joueur
     contient bien les briques attendues, sans dépendre d'un navigateur."""
-    resp = client.get(f"/game/{game}/play")
-    html = resp.data.decode()
-    assert "applyOpenRowBindings" in html
-    assert "lastClickedRowId" in html
-    assert "'ouvrir_ligne'" in html
+    js = play_js_bundle()
+    assert "applyOpenRowBindings" in js
+    assert "lastClickedRowId" in js
+    assert "'ouvrir_ligne'" in js
 
 
 def test_repeater_filter_literal_value(client, game, mail_object):
@@ -224,7 +225,6 @@ def test_play_page_exposes_screen_show_trigger_helper(client, game):
     """Le runtime jouable doit exécuter les nœuds "affichage" à chaque fois
     qu'un écran est montré (premier affichage, retour en arrière, données
     modifiées) — voir README, section correspondante."""
-    resp = client.get(f"/game/{game}/play")
-    html = resp.data.decode()
-    assert "runScreenShowTriggers" in html
-    assert "'affichage'" in html
+    js = play_js_bundle()
+    assert "runScreenShowTriggers" in js
+    assert "'affichage'" in js
diff --git a/tests/test_jauge.py b/tests/test_jauge.py
index 216286ef..6674066e 100644
--- a/tests/test_jauge.py
+++ b/tests/test_jauge.py
@@ -3,6 +3,8 @@ import re
 
 import db
 
+from conftest import play_js_bundle
+
 
 def _create_screen(client, slug, name="Accueil"):
     resp = client.post(f"/game/{slug}/screens/new", data={"name": name}, follow_redirects=False)
@@ -265,7 +267,6 @@ def test_play_page_click_binding_guards_against_duplicate_listeners(client, game
     ré-attachement — un vrai test de non-régression comportementale (clics
     répétés via un navigateur réel) a été exécuté manuellement pour valider
     le correctif : 5 clics sur +10 -> exactement +50, jamais plus."""
-    resp = client.get(f"/game/{game}/play")
-    html = resp.data.decode()
-    assert "clickBound" in html
-    assert "if (elDiv.dataset.clickBound) return;" in html
+    js = play_js_bundle()
+    assert "clickBound" in js
+    assert "if (elDiv.dataset.clickBound) return;" in js
diff --git a/tests/test_onglets.py b/tests/test_onglets.py
index 3091fd8c..56e60067 100644
--- a/tests/test_onglets.py
+++ b/tests/test_onglets.py
@@ -2,6 +2,8 @@
 import json
 import re
 
+from conftest import play_js_bundle
+
 
 def _create_screen(client, slug, name="Accueil"):
     resp = client.post(f"/game/{slug}/screens/new", data={"name": name}, follow_redirects=False)
@@ -36,7 +38,6 @@ def test_play_page_exposes_activer_onglet_runtime(client, game):
     """Le runtime jouable doit savoir exécuter "activer_onglet" (montrer un
     élément, masquer ses frères) — vérifie que le JS livré au joueur
     contient bien cette logique, sans dépendre d'un navigateur."""
-    resp = client.get(f"/game/{game}/play")
-    html = resp.data.decode()
-    assert "'activer_onglet'" in html
-    assert "parentKey" in html
+    js = play_js_bundle()
+    assert "'activer_onglet'" in js
+    assert "parentKey" in js
diff --git a/tests/test_screen_layout_fixes.py b/tests/test_screen_layout_fixes.py
index d9fda794..17c532f3 100644
--- a/tests/test_screen_layout_fixes.py
+++ b/tests/test_screen_layout_fixes.py
@@ -16,6 +16,8 @@
   ne se déforment pas selon la fenêtre du joueur."""
 import re
 
+from conftest import play_js_bundle
+
 
 def _create_screen(client, slug, name="Accueil"):
     resp = client.post(f"/game/{slug}/screens/new", data={"name": name}, follow_redirects=False)
@@ -137,4 +139,4 @@ def test_play_payload_includes_preview_aspect_per_screen(client, game):
 def test_play_page_has_letterboxing_frame(client, game):
     html = client.get(f"/game/{game}/play").data.decode()
     assert 'id="playFrame"' in html
-    assert "applyScreenAspect" in html
+    assert "applyScreenAspect" in play_js_bundle()