diff --git a/static/js/screen_edit/animation-timeline.js b/static/js/screen_edit/animation-timeline.js
new file mode 100644
index 00000000..0d383370
--- /dev/null
+++ b/static/js/screen_edit/animation-timeline.js
@@ -0,0 +1,316 @@
+// ---------- Timeline d'animation : piste par élément, clips Animate.css ou
+// personnalisés (images-clés), glissés/redimensionnés à la souris sur un
+// axe du temps en secondes depuis l'affichage de l'écran. Même principe de
+// panneau rétractable/redimensionnable que "Logique de la scène"
+// ci-dessus, positionné juste en dessous. ----------
+
+// ANIM_CLIPS/ANIMATE_CSS_LABELS/GAME_SLUG : voir le petit <script> inline
+// en tête de screen_edit.html (données Jinja).
+var ANIM_SCREEN_ID = SCREEN_ID;
+var ANIM_PX_PER_SEC = 60;
+var animCurrentClipId = null;
+
+function animUrl(path) { return "/game/" + GAME_SLUG + path; }
+
+function animClipLabel(clip) {
+  if (clip.kind === 'custom') return '🎨 Personnalisée';
+  return '🎞️ ' + (ANIMATE_CSS_LABELS[clip.animate_name] || clip.animate_name);
+}
+
+function renderAnimTimeline() {
+  var lanesWrap = document.getElementById('animTracks');
+  var ticksWrap = document.getElementById('animRuler');
+  if (!lanesWrap || !ticksWrap) return;
+  lanesWrap.innerHTML = '';
+  ticksWrap.innerHTML = '';
+
+  var maxTime = ANIM_CLIPS.reduce(function(m, c) { return Math.max(m, (c.start_time || 0) + (c.duration || 1)); }, 5);
+  var totalSeconds = Math.ceil(maxTime) + 2;
+  var totalWidth = totalSeconds * ANIM_PX_PER_SEC;
+
+  var spacer = document.createElement('div');
+  spacer.className = 'animRulerSpacer';
+  ticksWrap.appendChild(spacer);
+  var ticksLane = document.createElement('div');
+  ticksLane.className = 'animRulerTicksWrap';
+  ticksLane.style.width = totalWidth + 'px';
+  for (var s = 0; s <= totalSeconds; s++) {
+    var tick = document.createElement('div');
+    tick.className = 'animRulerTick';
+    tick.style.left = (s * ANIM_PX_PER_SEC) + 'px';
+    tick.textContent = s + 's';
+    ticksLane.appendChild(tick);
+  }
+  ticksWrap.appendChild(ticksLane);
+
+  var elementIds = [];
+  ANIM_CLIPS.forEach(function(c) { if (elementIds.indexOf(c.element_id) === -1) elementIds.push(c.element_id); });
+
+  if (!elementIds.length) {
+    var empty = document.createElement('p');
+    empty.className = 'hint';
+    empty.style.padding = '10px 0';
+    empty.textContent = "Aucun clip pour l'instant — choisis un élément ci-dessus et clique « Ajouter un clip ».";
+    lanesWrap.appendChild(empty);
+    return;
+  }
+
+  elementIds.forEach(function(elId) {
+    var track = document.createElement('div');
+    track.className = 'animTrack';
+
+    var label = document.createElement('div');
+    label.className = 'animTrackLabel';
+    label.textContent = ELEMENTS_LABELS[elId] || ('elt-' + elId);
+    track.appendChild(label);
+
+    var lane = document.createElement('div');
+    lane.className = 'animTrackLane';
+    lane.style.width = totalWidth + 'px';
+
+    ANIM_CLIPS.filter(function(c) { return c.element_id === elId; }).forEach(function(clip) {
+      var block = document.createElement('div');
+      block.className = 'animClip';
+      block.style.left = ((clip.start_time || 0) * ANIM_PX_PER_SEC) + 'px';
+      block.style.width = Math.max(24, (clip.duration || 1) * ANIM_PX_PER_SEC) + 'px';
+      block.textContent = animClipLabel(clip);
+      block.dataset.clipId = clip.id;
+      block.addEventListener('mousedown', function(e) { onAnimClipMouseDown(e, clip.id); });
+      var handle = document.createElement('div');
+      handle.className = 'animClipResizeHandle';
+      handle.addEventListener('mousedown', function(e) { onAnimClipResizeMouseDown(e, clip.id); });
+      block.appendChild(handle);
+      lane.appendChild(block);
+    });
+
+    track.appendChild(lane);
+    lanesWrap.appendChild(track);
+  });
+}
+
+function onAnimClipMouseDown(e, clipId) {
+  if (e.target.classList.contains('animClipResizeHandle')) return;
+  e.preventDefault();
+  e.stopPropagation();
+  var clip = ANIM_CLIPS.find(function(c) { return c.id === clipId; });
+  var block = document.querySelector('.animClip[data-clip-id="' + clipId + '"]');
+  var startX = e.clientX;
+  var startLeft = parseFloat(block.style.left);
+  var moved = false;
+  function onMove(ev) {
+    var dx = ev.clientX - startX;
+    if (Math.abs(dx) > 3) moved = true;
+    block.style.left = Math.max(0, startLeft + dx) + 'px';
+  }
+  function onUp() {
+    document.removeEventListener('mousemove', onMove);
+    document.removeEventListener('mouseup', onUp);
+    if (moved) {
+      var newStart = Math.round((parseFloat(block.style.left) / ANIM_PX_PER_SEC) * 10) / 10;
+      clip.start_time = newStart;
+      updateAnimClip(clipId, { start_time: newStart });
+    } else {
+      openAnimClipForm(clip);
+    }
+  }
+  document.addEventListener('mousemove', onMove);
+  document.addEventListener('mouseup', onUp);
+}
+
+function onAnimClipResizeMouseDown(e, clipId) {
+  e.preventDefault();
+  e.stopPropagation();
+  var clip = ANIM_CLIPS.find(function(c) { return c.id === clipId; });
+  var block = document.querySelector('.animClip[data-clip-id="' + clipId + '"]');
+  var startX = e.clientX;
+  var startWidth = parseFloat(block.style.width);
+  function onMove(ev) {
+    var dx = ev.clientX - startX;
+    block.style.width = Math.max(10, startWidth + dx) + 'px';
+  }
+  function onUp() {
+    document.removeEventListener('mousemove', onMove);
+    document.removeEventListener('mouseup', onUp);
+    var newDuration = Math.round((parseFloat(block.style.width) / ANIM_PX_PER_SEC) * 10) / 10;
+    clip.duration = newDuration;
+    updateAnimClip(clipId, { duration: newDuration });
+  }
+  document.addEventListener('mousemove', onMove);
+  document.addEventListener('mouseup', onUp);
+}
+
+function updateAnimClip(clipId, fields) {
+  return fetch(animUrl('/animations/clips/' + clipId + '/update'), {
+    method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(fields)
+  }).then(function(r) { return r.json(); }).then(function(updated) {
+    var idx = ANIM_CLIPS.findIndex(function(c) { return c.id === updated.id; });
+    if (idx > -1) ANIM_CLIPS[idx] = updated;
+    return updated;
+  });
+}
+
+function addAnimTrack() {
+  var elId = parseInt(document.getElementById('anim-new-track-element').value, 10);
+  fetch(animUrl('/screens/' + ANIM_SCREEN_ID + '/animations/clips/add'), {
+    method: 'POST', headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ element_id: elId, kind: 'animate_css', animate_name: 'fadeIn', start_time: 0, duration: 1 }),
+  }).then(function(r) { return r.json(); }).then(function(clip) {
+    ANIM_CLIPS.push(clip);
+    renderAnimTimeline();
+    openAnimClipForm(clip);
+  });
+}
+
+function toggleAnimClipKind() {
+  var kind = document.getElementById('anim-clip-kind').value;
+  document.getElementById('anim-clip-animate-css-fields').style.display = kind === 'animate_css' ? 'block' : 'none';
+  document.getElementById('anim-clip-custom-fields').style.display = kind === 'custom' ? 'block' : 'none';
+}
+
+function addAnimKeyframeRow(percent, cssText) {
+  var wrap = document.getElementById('anim-clip-keyframes');
+  var row = document.createElement('div');
+  row.className = 'fieldRow animKeyframeRow';
+  var percentInput = document.createElement('input');
+  percentInput.type = 'number'; percentInput.min = '0'; percentInput.max = '100'; percentInput.step = '1';
+  percentInput.className = 'anim-kf-percent'; percentInput.style.flex = '0 0 70px';
+  percentInput.value = percent != null ? percent : 0;
+  var cssInput = document.createElement('textarea');
+  cssInput.className = 'anim-kf-css'; cssInput.style.flex = '1'; cssInput.rows = 2;
+  cssInput.placeholder = 'ex. opacity: 0; transform: scale(0.5);';
+  cssInput.value = cssText || '';
+  var removeBtn = document.createElement('button');
+  removeBtn.type = 'button'; removeBtn.className = 'smallBtn danger';
+  removeBtn.textContent = '✕';
+  removeBtn.onclick = function() { row.remove(); };
+  row.appendChild(percentInput);
+  row.appendChild(cssInput);
+  row.appendChild(removeBtn);
+  wrap.appendChild(row);
+}
+
+function collectAnimKeyframes() {
+  var rows = document.querySelectorAll('#anim-clip-keyframes .animKeyframeRow');
+  var keyframes = [];
+  rows.forEach(function(row) {
+    var percent = parseFloat(row.querySelector('.anim-kf-percent').value) || 0;
+    var cssText = row.querySelector('.anim-kf-css').value;
+    var props = {};
+    cssText.split(';').forEach(function(decl) {
+      var parts = decl.split(':');
+      if (parts.length === 2) {
+        var prop = parts[0].trim(), val = parts[1].trim();
+        if (prop && val) props[prop] = val;
+      }
+    });
+    keyframes.push({ percent: percent, props: props });
+  });
+  return keyframes;
+}
+
+function openAnimClipForm(clip) {
+  animCurrentClipId = clip.id;
+  document.getElementById('animClipForm').style.display = 'block';
+  document.getElementById('animClipFormTitle').textContent = 'Clip — ' + (ELEMENTS_LABELS[clip.element_id] || ('elt-' + clip.element_id));
+  document.getElementById('anim-clip-kind').value = clip.kind || 'animate_css';
+  document.getElementById('anim-clip-animate-name').value = clip.animate_name || 'fadeIn';
+  document.getElementById('anim-clip-start').value = clip.start_time || 0;
+  document.getElementById('anim-clip-duration').value = clip.duration || 1;
+  document.getElementById('anim-clip-delay').value = clip.delay || 0;
+  document.getElementById('anim-clip-easing').value = clip.easing || 'ease';
+  document.getElementById('anim-clip-iteration').value = clip.iteration_count || '1';
+  document.getElementById('anim-clip-keyframes').innerHTML = '';
+  var keyframes = [];
+  if (clip.custom_keyframes) {
+    try { keyframes = JSON.parse(clip.custom_keyframes); } catch (e) { /* ignore */ }
+  }
+  if (!keyframes.length) keyframes = [{ percent: 0, props: { opacity: '0' } }, { percent: 100, props: { opacity: '1' } }];
+  keyframes.forEach(function(k) {
+    var cssText = Object.keys(k.props || {}).map(function(p) { return p + ': ' + k.props[p] + ';'; }).join(' ');
+    addAnimKeyframeRow(k.percent, cssText);
+  });
+  toggleAnimClipKind();
+  document.querySelectorAll('.animClip').forEach(function(b) {
+    b.classList.toggle('selected', parseInt(b.dataset.clipId, 10) === clip.id);
+  });
+}
+
+function closeAnimClipForm() {
+  animCurrentClipId = null;
+  document.getElementById('animClipForm').style.display = 'none';
+  document.querySelectorAll('.animClip').forEach(function(b) { b.classList.remove('selected'); });
+}
+
+function saveAnimClipForm() {
+  if (!animCurrentClipId) return Promise.resolve();
+  var kind = document.getElementById('anim-clip-kind').value;
+  var fields = {
+    kind: kind,
+    animate_name: document.getElementById('anim-clip-animate-name').value,
+    start_time: parseFloat(document.getElementById('anim-clip-start').value) || 0,
+    duration: parseFloat(document.getElementById('anim-clip-duration').value) || 1,
+    delay: parseFloat(document.getElementById('anim-clip-delay').value) || 0,
+    easing: document.getElementById('anim-clip-easing').value,
+    iteration_count: document.getElementById('anim-clip-iteration').value,
+  };
+  if (kind === 'custom') fields.custom_keyframes = collectAnimKeyframes();
+  return updateAnimClip(animCurrentClipId, fields).then(function() { renderAnimTimeline(); });
+}
+
+function deleteAnimClipForm() {
+  if (!animCurrentClipId) return;
+  if (!confirm('Supprimer ce clip ?')) return;
+  var id = animCurrentClipId;
+  fetch(animUrl('/animations/clips/' + id + '/delete'), { method: 'POST' }).then(function() {
+    ANIM_CLIPS = ANIM_CLIPS.filter(function(c) { return c.id !== id; });
+    closeAnimClipForm();
+    renderAnimTimeline();
+  });
+}
+
+function previewAnimClip() {
+  if (!animCurrentClipId) return;
+  saveAnimClipForm().then(function() {
+    var clip = ANIM_CLIPS.find(function(c) { return c.id === animCurrentClipId; });
+    if (!clip) return;
+    var target = document.querySelector('#canvas [data-anim-target="' + clip.element_id + '"]');
+    if (!target) return;
+    var duration = clip.duration || 1, delay = clip.delay || 0;
+    var iterationCount = clip.iteration_count || '1';
+    if (clip.kind === 'custom') {
+      var keyframes = [];
+      try { keyframes = JSON.parse(clip.custom_keyframes || '[]'); } catch (e) { /* ignore */ }
+      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(' ');
+      var styleTag = document.getElementById('animEditorPreviewStyle');
+      if (!styleTag) {
+        styleTag = document.createElement('style');
+        styleTag.id = 'animEditorPreviewStyle';
+        document.head.appendChild(styleTag);
+      }
+      styleTag.textContent = '@keyframes animEditorPreview { ' + steps + ' }';
+      target.style.animation = 'animEditorPreview ' + duration + 's ' + (clip.easing || 'ease') + ' ' + delay + 's ' + iterationCount;
+      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);
+      target.addEventListener('animationend', function handler() {
+        target.classList.remove('animate__animated', animClass);
+        target.removeEventListener('animationend', handler);
+      });
+    }
+  });
+}
+
+// Panneau timeline absent sur un écran-modèle (élément de jeu), comme le
+// panneau de logique — voir le commentaire Jinja au-dessus de .builderTabs.
+var HAS_ANIM_PANEL = !!document.getElementById('animTabPanel');
+if (HAS_ANIM_PANEL) { renderAnimTimeline(); }
diff --git a/static/js/screen_edit/flow-editor.js b/static/js/screen_edit/flow-editor.js
new file mode 100644
index 00000000..245f64a8
--- /dev/null
+++ b/static/js/screen_edit/flow-editor.js
@@ -0,0 +1,616 @@
+// ---------- Logique de la scène : éditeur de flow à nœuds ----------
+//
+// FLOW_NODES_INITIAL/FLOW_EDGES_INITIAL/FLOW_BLOCKS/ELEMENTS_LABELS/
+// SCREENS_MAP/*_LABELS_MAP/CUSTOM_EVENTS_MAP/GAME_SLUG/SCREEN_ID sont
+// posés par le petit <script> inline en tête de screen_edit.html (données
+// Jinja) — voir static/js/play/ pour le même patron déjà en place côté
+// moteur de jeu.
+var FLOW_SCREEN_ID = SCREEN_ID;
+// Blocs de logique (voir screens/flow/blocks/) : ALL_FLOW porte TOUS les
+// nœuds/arêtes de cet écran, tous blocs confondus (chargement inchangé) ;
+// un seul bloc est ouvert à la fois (modale unique, à la Unity) — pas
+// besoin d'une seconde copie filtrée à tenir synchronisée, currentBlockNodes()/
+// currentBlockEdges() recalculent la vue du bloc ouvert à chaque rendu.
+var ALL_FLOW = {
+  nodes: FLOW_NODES_INITIAL,
+  edges: FLOW_EDGES_INITIAL,
+};
+var CURRENT_BLOCK_ID = null;
+
+function currentBlockNodes() {
+  return ALL_FLOW.nodes.filter(function(n) { return n.block_id === CURRENT_BLOCK_ID; });
+}
+function currentBlockEdges() {
+  var ids = {};
+  currentBlockNodes().forEach(function(n) { ids[n.id] = true; });
+  return ALL_FLOW.edges.filter(function(e) { return ids[e.from_node_id] && ids[e.to_node_id]; });
+}
+
+var flowPendingPort = null; // {nodeId, port} en attente de connexion
+
+function flowUrl(path) { return "/game/" + GAME_SLUG + path; }
+
+function nodeLabel(node) {
+  if (node.node_type === 'trigger') {
+    if (node.trigger_event === 'affichage') return '🖥️ ' + TRIGGER_LABELS_MAP['affichage'];
+    if (node.trigger_event === 'evenement') {
+      var listenedEvent = CUSTOM_EVENTS_MAP[node.trigger_custom_event_id];
+      return '📣 Sur « ' + (listenedEvent ? listenedEvent.name : '?') + ' »';
+    }
+    return '🖱️ ' + (TRIGGER_LABELS_MAP[node.trigger_event] || 'Au clic') + ' sur ' +
+      (ELEMENTS_LABELS[node.trigger_element_id] || '?');
+  }
+  if (node.node_type === 'condition') {
+    var clauseSubject = function(c, field, variable) {
+      return (c.source ?? c.cond_source) === 'variable' ? ('🔧 ' + (variable || c.cond_variable || '?')) : (field || c.cond_field || '?');
+    };
+    var mainSubject = clauseSubject(node, node.cond_field, node.cond_variable);
+    var mainClause = '❓ SI ' + mainSubject + ' ' + (CONDITION_OPERATOR_LABELS_MAP[node.cond_operator] || node.cond_operator) + ' ' + (node.cond_value || '');
+    if (node.cond_clauses) {
+      // 2.4 — plusieurs clauses combinées : on affiche chaque champ/variable
+      // testé, relié par le connecteur ET/OU choisi, plutôt qu'une seule clause.
+      try {
+        var clauses = JSON.parse(node.cond_clauses);
+        var combLabel = node.cond_combinator === 'ou' ? ' OU ' : ' ET ';
+        return '❓ SI ' + clauses.map(function(c) {
+          return clauseSubject(c, c.field, c.variable) + ' ' + (CONDITION_OPERATOR_LABELS_MAP[c.operator] || c.operator) + ' ' + (c.value || '');
+        }).join(combLabel);
+      } catch (e) { /* JSON invalide : on retombe sur la clause historique */ }
+    }
+    return mainClause;
+  }
+  // action
+  var base = '⚡ ' + (ACTION_TYPE_LABELS_MAP[node.action_type] || node.action_type);
+  if (node.action_type === 'aller_a') {
+    base += ' → ' + (SCREENS_MAP[node.target_screen_id] || '?');
+  } else if (node.action_type === 'ouvrir_ligne') {
+    base += ' → ' + (SCREENS_MAP[node.target_screen_id] || '?') + ' (ligne cliquée)';
+  } else if (node.action_type === 'activer_onglet') {
+    base += ' → ' + (ELEMENTS_LABELS[node.target_element_id] || '?') + ' (masque ses frères)';
+  } else if (node.action_type === 'modifier_element') {
+    base += ' → ' + (ELEMENTS_LABELS[node.target_element_id] || '?') + ' : ' + (ELEMENT_PROPERTY_LABELS_MAP[node.element_property] || node.element_property);
+    if (node.element_property === 'visibilite') {
+      base += ' = ' + (ELEMENT_VISIBILITY_LABELS_MAP[node.element_value] || node.element_value);
+    } else if (node.element_property === 'surbrillance') {
+      base += ' = ' + (ELEMENT_SURBRILLANCE_LABELS_MAP[node.element_value] || node.element_value);
+    } else if (node.element_property === 'desactive') {
+      base += ' = ' + (ELEMENT_DESACTIVE_LABELS_MAP[node.element_value] || node.element_value);
+    } else if (node.element_value && node.element_value.indexOf('||') !== -1) {
+      var vparts = node.element_value.split('||');
+      base += ' = ' + vparts[0] + ' ↔ ' + vparts[1] + ' (va-et-vient)';
+    } else {
+      base += ' = ' + node.element_value;
+    }
+  } else if (node.action_type === 'modifier_donnee') {
+    base += ' → ' + (node.target_field || '?') + ' : ' + (DATA_OPERATION_LABELS_MAP[node.data_operation] || node.data_operation);
+    if (node.data_value) base += ' ' + node.data_value;
+  } else if (node.action_type === 'modifier_variable') {
+    base += ' → ' + (node.target_variable || '?') + ' : ' + (DATA_OPERATION_LABELS_MAP[node.data_operation] || node.data_operation);
+    if (node.data_value) base += ' ' + node.data_value;
+  } else if (node.action_type === 'attendre') {
+    base += ' (' + (node.data_value || '0') + ' s)';
+  } else if (node.action_type === 'declencher_evenement') {
+    // Notification pure : rien d'autre à afficher que le nom de
+    // l'événement (voir screens/custom_events/) — aucun élément/ligne
+    // n'est jamais transmis au déclenchement.
+    var dispatchedEvent = CUSTOM_EVENTS_MAP[node.target_custom_event_id];
+    base += ' « ' + (dispatchedEvent ? dispatchedEvent.name : '?') + ' »';
+  }
+  return base;
+}
+
+function renderFlow() {
+  var canvas = document.getElementById('flowCanvas');
+  var svg = document.getElementById('flowEdges');
+  canvas.innerHTML = '';
+  svg.innerHTML = '';
+
+  currentBlockNodes().forEach(function(node) {
+    var div = document.createElement('div');
+    div.className = 'flowNode flowNode-' + node.node_type;
+    div.style.left = node.x + 'px';
+    div.style.top = node.y + 'px';
+    div.dataset.nodeId = node.id;
+
+    var del = document.createElement('button');
+    del.className = 'flowNodeDelete';
+    del.type = 'button';
+    del.textContent = '✕';
+    del.onclick = function(ev) { ev.stopPropagation(); deleteFlowNode(node.id); };
+    div.appendChild(del);
+
+    var body = document.createElement('div');
+    body.className = 'flowNodeBody';
+    body.textContent = nodeLabel(node);
+    div.appendChild(body);
+
+    if (node.node_type !== 'trigger') {
+      var inPort = document.createElement('div');
+      inPort.className = 'flowPort flowPortIn';
+      inPort.onclick = function(ev) { ev.stopPropagation(); onPortClick(node.id, 'in', null); };
+      div.appendChild(inPort);
+    }
+    if (node.node_type === 'condition') {
+      var outTrue = document.createElement('div');
+      outTrue.className = 'flowPort flowPortOut flowPortTrue';
+      outTrue.title = 'Vrai';
+      outTrue.onclick = function(ev) { ev.stopPropagation(); onPortClick(node.id, 'out', 'vrai'); };
+      div.appendChild(outTrue);
+      var outFalse = document.createElement('div');
+      outFalse.className = 'flowPort flowPortOut flowPortFalse';
+      outFalse.title = 'Faux';
+      outFalse.onclick = function(ev) { ev.stopPropagation(); onPortClick(node.id, 'out', 'faux'); };
+      div.appendChild(outFalse);
+    } else {
+      var outPort = document.createElement('div');
+      outPort.className = 'flowPort flowPortOut';
+      outPort.onclick = function(ev) { ev.stopPropagation(); onPortClick(node.id, 'out', 'out'); };
+      div.appendChild(outPort);
+    }
+
+    div.addEventListener('mousedown', function(e) { onFlowNodeMouseDown(e, node.id); });
+    canvas.appendChild(div);
+  });
+
+  // Redessine les fils après que les nœuds soient dans le DOM (pour lire leur position réelle).
+  requestAnimationFrame(drawFlowEdges);
+}
+
+function portPosition(nodeId, side, sub) {
+  var div = document.querySelector('.flowNode[data-node-id="' + nodeId + '"]');
+  if (!div) return null;
+  var wrap = document.querySelector('.flowCanvasWrap');
+  var wrapRect = wrap.getBoundingClientRect();
+  var selector = side === 'in' ? '.flowPortIn' : (sub === 'vrai' ? '.flowPortTrue' : (sub === 'faux' ? '.flowPortFalse' : '.flowPortOut'));
+  var port = div.querySelector(selector);
+  if (!port) return null;
+  var r = port.getBoundingClientRect();
+  return { x: r.left + r.width / 2 - wrapRect.left + wrap.scrollLeft, y: r.top + r.height / 2 - wrapRect.top + wrap.scrollTop };
+}
+
+function drawFlowEdges() {
+  var svg = document.getElementById('flowEdges');
+  svg.innerHTML = '';
+  currentBlockEdges().forEach(function(edge) {
+    var from = portPosition(edge.from_node_id, 'out', edge.from_port);
+    var to = portPosition(edge.to_node_id, 'in', null);
+    if (!from || !to) return;
+    var line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+    line.setAttribute('x1', from.x); line.setAttribute('y1', from.y);
+    line.setAttribute('x2', to.x); line.setAttribute('y2', to.y);
+    line.setAttribute('class', 'flowEdgeLine' + (edge.from_port === 'faux' ? ' flowEdgeFalse' : (edge.from_port === 'vrai' ? ' flowEdgeTrue' : '')));
+    line.style.pointerEvents = 'stroke';
+    line.addEventListener('click', function() { deleteFlowEdge(edge.id); });
+    svg.appendChild(line);
+  });
+}
+
+function onPortClick(nodeId, side, port) {
+  if (side === 'out') {
+    flowPendingPort = { nodeId: nodeId, port: port };
+    return;
+  }
+  // side === 'in'
+  if (!flowPendingPort) return;
+  if (flowPendingPort.nodeId === nodeId) { flowPendingPort = null; return; }
+  fetch(flowUrl('/screens/' + FLOW_SCREEN_ID + '/flow/edges/add'), {
+    method: 'POST', headers: {'Content-Type': 'application/json'},
+    body: JSON.stringify({ from_node_id: flowPendingPort.nodeId, from_port: flowPendingPort.port, to_node_id: nodeId })
+  }).then(function(r){ return r.json(); }).then(function(edge){
+    ALL_FLOW.edges.push({ id: edge.id, screen_id: FLOW_SCREEN_ID, from_node_id: flowPendingPort.nodeId, from_port: flowPendingPort.port, to_node_id: nodeId });
+    flowPendingPort = null;
+    drawFlowEdges();
+  });
+}
+
+function deleteFlowEdge(edgeId) {
+  fetch(flowUrl('/flow/edges/' + edgeId + '/delete'), { method: 'POST' }).then(function(){
+    ALL_FLOW.edges = ALL_FLOW.edges.filter(function(e){ return e.id !== edgeId; });
+    drawFlowEdges();
+  });
+}
+
+function deleteFlowNode(nodeId) {
+  fetch(flowUrl('/flow/nodes/' + nodeId + '/delete'), { method: 'POST' }).then(function(){
+    ALL_FLOW.nodes = ALL_FLOW.nodes.filter(function(n){ return n.id !== nodeId; });
+    ALL_FLOW.edges = ALL_FLOW.edges.filter(function(e){ return e.from_node_id !== nodeId && e.to_node_id !== nodeId; });
+    renderFlow();
+  });
+}
+
+function onFlowNodeMouseDown(e, nodeId) {
+  if (e.target.classList.contains('flowPort') || e.target.classList.contains('flowNodeDelete')) return;
+  e.preventDefault();
+  var node = ALL_FLOW.nodes.find(function(n){ return n.id === nodeId; });
+  var div = document.querySelector('.flowNode[data-node-id="' + nodeId + '"]');
+  var startX = e.clientX, startY = e.clientY;
+  var startLeft = node.x, startTop = node.y;
+  function onMove(ev) {
+    var dx = ev.clientX - startX, dy = ev.clientY - startY;
+    node.x = Math.max(0, startLeft + dx);
+    node.y = Math.max(0, startTop + dy);
+    div.style.left = node.x + 'px';
+    div.style.top = node.y + 'px';
+    drawFlowEdges();
+  }
+  function onUp() {
+    document.removeEventListener('mousemove', onMove);
+    document.removeEventListener('mouseup', onUp);
+    fetch(flowUrl('/flow/nodes/' + nodeId + '/move'), {
+      method: 'POST', headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify({ x: node.x, y: node.y })
+    });
+  }
+  document.addEventListener('mousemove', onMove);
+  document.addEventListener('mouseup', onUp);
+}
+
+// ---------- Formulaire d'ajout de nœud ----------
+
+var currentNodeFormType = null;
+
+function openNodeForm(type) {
+  currentNodeFormType = type;
+  document.getElementById('nodeForm').style.display = 'block';
+  document.getElementById('nodeFormTitle').textContent =
+    type === 'trigger' ? 'Nouveau déclencheur' : (type === 'condition' ? 'Nouvelle condition' : 'Nouvelle action');
+  document.getElementById('nodeFormTrigger').style.display = type === 'trigger' ? 'block' : 'none';
+  document.getElementById('nodeFormCondition').style.display = type === 'condition' ? 'block' : 'none';
+  document.getElementById('nodeFormAction').style.display = type === 'action' ? 'block' : 'none';
+  if (type === 'trigger') toggleFlowTriggerFields();
+  if (type === 'condition') {
+    document.getElementById('nf-cond-source').value = 'objet';
+    onFlowConditionSourceChange();
+    onFlowDefinitionChange('cond');
+    flowConditionExtraClauses = [];
+    renderFlowConditionClauses();
+  }
+  if (type === 'action') {
+    document.getElementById('nf-action-element-toggle').checked = false;
+    toggleFlowActionFields();
+  }
+}
+
+function toggleFlowTriggerFields() {
+  var eventVal = document.getElementById('nf-trigger-event').value;
+  var isAffichage = eventVal === 'affichage';
+  // "Sur un événement personnalisé" ne concerne ni un élément précis ni
+  // l'écran entier : c'est un scan global (voir dispatchGameEvent() dans
+  // play.html), le seul réglage propre à ce nœud est QUEL événement.
+  var isCustomEvent = eventVal === 'evenement';
+  document.getElementById('nf-trigger-element-row').style.display = (isAffichage || isCustomEvent) ? 'none' : 'block';
+  document.getElementById('nf-trigger-repeater-hint').style.display = (isAffichage || isCustomEvent) ? 'none' : 'block';
+  document.getElementById('nf-trigger-affichage-hint').style.display = isAffichage ? 'block' : 'none';
+  document.getElementById('nf-trigger-event-row').style.display = isCustomEvent ? 'block' : 'none';
+}
+
+function closeNodeForm() {
+  document.getElementById('nodeForm').style.display = 'none';
+  currentNodeFormType = null;
+}
+
+// CLICKED_ROW_ID (-1, voir screens/flow/constants.py) : "la ligne de
+// Répéteur sur laquelle on vient de cliquer" — pour un déclencheur "Au
+// clic" posé sur un Répéteur, chaque ligne exécute le MÊME graphe et la
+// ligne cliquée n'est jamais connue à l'avance ; choisir une ligne fixe
+// dans l'éditeur n'a donc pas de sens pour ce cas. Résolue au moment de
+// l'exécution (window.lastClickedRowId, voir play.html), pas à la
+// création du nœud — proposée en tête de TOUTE liste "Ligne concernée",
+// avant les lignes réelles de l'objet.
+var FLOW_CLICKED_ROW_ID = -1;
+
+function _flowRowOptionsHtml(info) {
+  var options = '<option value="' + FLOW_CLICKED_ROW_ID + '">🖱️ Ligne cliquée (Répéteur)</option>';
+  options += info.rows.length
+    ? info.rows.map(function(r){ return '<option value="' + r.id + '">' + r.label + '</option>'; }).join('')
+    : '<option value="" disabled>Aucune donnée dans cet objet</option>';
+  return options;
+}
+
+function onFlowDefinitionChange(prefix) {
+  var defSel = document.getElementById(prefix === 'cond' ? 'nf-cond-definition' : 'nf-action-data-definition');
+  if (!defSel) return;
+  var info = DEFINITIONS_DATA[defSel.value] || { rows: [], fields: [] };
+  var rowSel = document.getElementById(prefix === 'cond' ? 'nf-cond-row' : 'nf-action-data-row');
+  var fieldSel = document.getElementById(prefix === 'cond' ? 'nf-cond-field' : 'nf-action-data-field');
+  rowSel.innerHTML = _flowRowOptionsHtml(info);
+  fieldSel.innerHTML = info.fields.length
+    ? info.fields.map(function(f){ return '<option value="' + f.name + '" data-type="' + f.type + '">' + f.name + ' (' + f.type + ')</option>'; }).join('')
+    : '<option value="">Aucun champ simple</option>';
+}
+
+function onFlowFieldChange() {
+  // Pas d'action nécessaire ici pour l'instant : le type du champ est relu
+  // directement sur l'option sélectionnée au moment de la création du nœud.
+}
+
+// Bascule la clause PRINCIPALE d'un nœud Condition entre "Champ d'un
+// objet" (historique) et "Variable globale" — voir ensure_flow_schema.py
+// (cond_source) et evaluateConditionClause() dans play.html. Même bascule
+// pour une clause SUPPLÉMENTAIRE : voir onFlowClauseSourceChange() plus
+// bas, sur le même principe mais scopée par index.
+function onFlowConditionSourceChange() {
+  var isVariable = document.getElementById('nf-cond-source').value === 'variable';
+  document.getElementById('nf-cond-objet-fields').style.display = isVariable ? 'none' : 'block';
+  document.getElementById('nf-cond-variable-fields').style.display = isVariable ? 'block' : 'none';
+  var hint = document.getElementById('nf-cond-no-objet-hint');
+  if (hint) hint.style.display = isVariable ? 'none' : 'block';
+}
+
+// ---------- 2.4 — clauses supplémentaires (ET/OU) d'un nœud Condition ----------
+// Chaque clause supplémentaire réutilise EXACTEMENT le même modèle que la
+// clause principale (nf-cond-definition/row/field/operator/value) mais dans
+// une ligne indépendante, numérotée par index dans flowConditionExtraClauses.
+var flowConditionExtraClauses = [];
+
+function addFlowConditionClause() {
+  var firstDefSel = document.getElementById('nf-cond-definition');
+  var defaultDefId = firstDefSel && firstDefSel.value ? firstDefSel.value : '';
+  flowConditionExtraClauses.push({
+    source: 'objet', definition_id: defaultDefId, row_id: '', field: '', field_type: '',
+    variable: '', variable_chemin: '', operator: 'egal', value: '',
+  });
+  renderFlowConditionClauses();
+}
+
+function removeFlowConditionClause(idx) {
+  flowConditionExtraClauses.splice(idx, 1);
+  renderFlowConditionClauses();
+}
+
+// Bascule une clause SUPPLÉMENTAIRE (indexée) entre "Champ d'un objet" et
+// "Variable globale" — même principe que onFlowConditionSourceChange() pour
+// la clause principale, scopé par index plutôt que par id fixe.
+function onFlowClauseSourceChange(idx) {
+  var sel = document.getElementById('nf-cond-extra-source-' + idx);
+  if (!sel) return;
+  flowConditionExtraClauses[idx].source = sel.value;
+  var isVariable = sel.value === 'variable';
+  var objetFields = document.getElementById('nf-cond-extra-objet-fields-' + idx);
+  var varFields = document.getElementById('nf-cond-extra-variable-fields-' + idx);
+  if (objetFields) objetFields.style.display = isVariable ? 'none' : 'block';
+  if (varFields) varFields.style.display = isVariable ? 'block' : 'none';
+}
+
+function renderFlowConditionClauses() {
+  var wrap = document.getElementById('nf-cond-extra-clauses');
+  var combinatorRow = document.getElementById('nf-cond-combinator-row');
+  if (!wrap || !combinatorRow) return;
+  combinatorRow.style.display = flowConditionExtraClauses.length ? 'block' : 'none';
+  var defOptionsHtml = document.getElementById('nf-cond-definition') ? document.getElementById('nf-cond-definition').innerHTML : '';
+  wrap.innerHTML = flowConditionExtraClauses.map(function(clause, idx) {
+    var isVariable = clause.source === 'variable';
+    return '' +
+      '<div class="flowConditionClauseRow" style="border-top:1px dashed var(--border); margin-top:8px; padding-top:8px;">' +
+        '<label>Source<select id="nf-cond-extra-source-' + idx + '" onchange="onFlowClauseSourceChange(' + idx + ')">' +
+          '<option value="objet"' + (isVariable ? '' : ' selected') + '>Champ d\'un objet</option>' +
+          '<option value="variable"' + (isVariable ? ' selected' : '') + '>Variable globale</option>' +
+        '</select></label>' +
+        '<div id="nf-cond-extra-objet-fields-' + idx + '" style="display:' + (isVariable ? 'none' : 'block') + ';">' +
+          '<label>Objet<select id="nf-cond-extra-definition-' + idx + '" onchange="onFlowClauseDefinitionChange(' + idx + ')">' + defOptionsHtml + '</select></label>' +
+          '<label>Ligne concernée<select id="nf-cond-extra-row-' + idx + '" onchange="flowConditionExtraClauses[' + idx + '].row_id = this.value"></select></label>' +
+          '<label>Champ<select id="nf-cond-extra-field-' + idx + '" onchange="onFlowClauseFieldChange(' + idx + ')"></select></label>' +
+        '</div>' +
+        '<div id="nf-cond-extra-variable-fields-' + idx + '" style="display:' + (isVariable ? 'block' : 'none') + ';">' +
+          '<label>Variable<select id="nf-cond-extra-variable-' + idx + '" onchange="flowConditionExtraClauses[' + idx + '].variable = this.value">' +
+            '<option value="">(sélectionner une variable)</option>' + GLOBAL_VARIABLES_OPTIONS_HTML +
+          '</select></label>' +
+          '<label>Chemin (optionnel)<input type="text" id="nf-cond-extra-variable-chemin-' + idx + '" placeholder="ex. .nom ou [0].valeur" value="' + (clause.variable_chemin || '').replace(/"/g, '&quot;') + '" onchange="flowConditionExtraClauses[' + idx + '].variable_chemin = this.value"></label>' +
+        '</div>' +
+        '<label>Condition<select id="nf-cond-extra-operator-' + idx + '" onchange="flowConditionExtraClauses[' + idx + '].operator = this.value">' +
+          CONDITION_OPERATORS_HTML +
+        '</select></label>' +
+        '<label>Valeur de comparaison<input type="text" id="nf-cond-extra-value-' + idx + '" placeholder="ex. 1, vrai, 10..." value="' + (clause.value || '').replace(/"/g, '&quot;') + '" onchange="flowConditionExtraClauses[' + idx + '].value = this.value"></label>' +
+        '<button type="button" class="smallBtn button is-small" onclick="removeFlowConditionClause(' + idx + ')">Retirer cette condition</button>' +
+      '</div>';
+  }).join('');
+  flowConditionExtraClauses.forEach(function(clause, idx) {
+    var defSel = document.getElementById('nf-cond-extra-definition-' + idx);
+    if (defSel && clause.definition_id) defSel.value = clause.definition_id;
+    onFlowClauseDefinitionChange(idx);
+    var opSel = document.getElementById('nf-cond-extra-operator-' + idx);
+    if (opSel) opSel.value = clause.operator || 'egal';
+    var varSel = document.getElementById('nf-cond-extra-variable-' + idx);
+    if (varSel && clause.variable) varSel.value = clause.variable;
+  });
+}
+
+function onFlowClauseDefinitionChange(idx) {
+  var defSel = document.getElementById('nf-cond-extra-definition-' + idx);
+  var rowSel = document.getElementById('nf-cond-extra-row-' + idx);
+  var fieldSel = document.getElementById('nf-cond-extra-field-' + idx);
+  if (!defSel || !rowSel || !fieldSel) return;
+  flowConditionExtraClauses[idx].definition_id = defSel.value;
+  var info = DEFINITIONS_DATA[defSel.value] || { rows: [], fields: [] };
+  rowSel.innerHTML = _flowRowOptionsHtml(info);
+  fieldSel.innerHTML = info.fields.length
+    ? info.fields.map(function(f){ return '<option value="' + f.name + '" data-type="' + f.type + '">' + f.name + ' (' + f.type + ')</option>'; }).join('')
+    : '<option value="">Aucun champ simple</option>';
+  flowConditionExtraClauses[idx].row_id = rowSel.value;
+  onFlowClauseFieldChange(idx);
+}
+
+function onFlowClauseFieldChange(idx) {
+  var fieldSel = document.getElementById('nf-cond-extra-field-' + idx);
+  if (!fieldSel) return;
+  var opt = fieldSel.options[fieldSel.selectedIndex];
+  flowConditionExtraClauses[idx].field = fieldSel.value;
+  flowConditionExtraClauses[idx].field_type = opt ? opt.dataset.type : '';
+}
+
+function toggleFlowActionFields() {
+  var typeSel = document.getElementById('nf-action-type');
+  var screenSel = document.getElementById('nf-action-target-screen');
+  var elementFields = document.getElementById('nf-action-element-fields');
+  var dataFields = document.getElementById('nf-action-data-fields');
+  var variableFields = document.getElementById('nf-action-variable-fields');
+  var waitFields = document.getElementById('nf-action-wait-fields');
+  var eventFields = document.getElementById('nf-action-event-fields');
+  var isOnglet = typeSel.value === 'activer_onglet';
+  screenSel.style.display = (typeSel.value === 'aller_a' || typeSel.value === 'ouvrir_ligne') ? 'block' : 'none';
+  elementFields.style.display = (typeSel.value === 'modifier_element' || isOnglet) ? 'block' : 'none';
+  dataFields.style.display = typeSel.value === 'modifier_donnee' ? 'block' : 'none';
+  variableFields.style.display = typeSel.value === 'modifier_variable' ? 'block' : 'none';
+  waitFields.style.display = typeSel.value === 'attendre' ? 'block' : 'none';
+  if (eventFields) eventFields.style.display = typeSel.value === 'declencher_evenement' ? 'block' : 'none';
+  document.getElementById('nf-action-onglet-hint').style.display = isOnglet ? 'block' : 'none';
+  document.getElementById('nf-action-element-property-wrap').style.display = isOnglet ? 'none' : 'block';
+  if (typeSel.value === 'modifier_element') toggleFlowElementPropertyValue();
+  if (typeSel.value === 'modifier_donnee') onFlowDefinitionChange('action');
+}
+
+function toggleFlowElementPropertyValue() {
+  var propSel = document.getElementById('nf-action-element-property');
+  var visSel = document.getElementById('nf-action-element-value-visibility');
+  var surbrillanceSel = document.getElementById('nf-action-element-value-surbrillance');
+  var desactiveSel = document.getElementById('nf-action-element-value-desactive');
+  var colorInp = document.getElementById('nf-action-element-value-color');
+  var numInp = document.getElementById('nf-action-element-value-number');
+  var textInp = document.getElementById('nf-action-element-value-text');
+  var toggleRow = document.getElementById('nf-action-element-toggle-row');
+  [visSel, surbrillanceSel, desactiveSel, colorInp, numInp, textInp].forEach(function(el){ el.style.display = 'none'; });
+  if (propSel.value === 'visibilite') {
+    visSel.style.display = 'block';
+    toggleRow.style.display = 'none';
+    document.getElementById('nf-action-element-toggle').checked = false;
+  } else if (propSel.value === 'surbrillance') {
+    surbrillanceSel.style.display = 'block';
+    toggleRow.style.display = 'none';
+    document.getElementById('nf-action-element-toggle').checked = false;
+  } else if (propSel.value === 'desactive') {
+    desactiveSel.style.display = 'block';
+    toggleRow.style.display = 'none';
+    document.getElementById('nf-action-element-toggle').checked = false;
+  } else if (propSel.value === 'contenu') {
+    textInp.style.display = 'block';
+    toggleRow.style.display = 'none';
+    document.getElementById('nf-action-element-toggle').checked = false;
+  } else if (propSel.value === 'bg_color' || propSel.value === 'border_color') {
+    colorInp.style.display = 'block';
+    toggleRow.style.display = 'flex';
+  } else {
+    numInp.style.display = 'block';
+    toggleRow.style.display = 'flex';
+  }
+  toggleFlowElementToggleMode();
+}
+
+function toggleFlowElementToggleMode() {
+  var propSel = document.getElementById('nf-action-element-property');
+  var checked = document.getElementById('nf-action-element-toggle').checked;
+  var wrap = document.getElementById('nf-action-element-value2-wrap');
+  var colorInp2 = document.getElementById('nf-action-element-value2-color');
+  var numInp2 = document.getElementById('nf-action-element-value2-number');
+  var isColor = propSel.value === 'bg_color' || propSel.value === 'border_color';
+  wrap.style.display = checked ? 'block' : 'none';
+  colorInp2.style.display = (checked && isColor) ? 'block' : 'none';
+  numInp2.style.display = (checked && !isColor) ? 'block' : 'none';
+}
+
+function submitNodeForm() {
+  var payload = { node_type: currentNodeFormType, x: 20, y: 20 + currentBlockNodes().length * 10, block_id: CURRENT_BLOCK_ID };
+
+  if (currentNodeFormType === 'trigger') {
+    payload.trigger_event = document.getElementById('nf-trigger-event').value;
+    if (payload.trigger_event === 'evenement') {
+      payload.trigger_custom_event_id = parseInt(document.getElementById('nf-trigger-custom-event').value, 10);
+    } else if (payload.trigger_event !== 'affichage') {
+      payload.trigger_element_id = parseInt(document.getElementById('nf-trigger-element').value, 10);
+    }
+  } else if (currentNodeFormType === 'condition') {
+    var condSource = document.getElementById('nf-cond-source').value;
+    payload.cond_source = condSource;
+    payload.cond_operator = document.getElementById('nf-cond-operator').value;
+    payload.cond_value = document.getElementById('nf-cond-value').value;
+    if (condSource === 'variable') {
+      payload.cond_variable = document.getElementById('nf-cond-variable').value;
+      payload.cond_variable_chemin = document.getElementById('nf-cond-variable-chemin').value;
+    } else {
+      var fieldSel = document.getElementById('nf-cond-field');
+      var fieldOpt = fieldSel.options[fieldSel.selectedIndex];
+      payload.cond_definition_id = parseInt(document.getElementById('nf-cond-definition').value, 10);
+      payload.cond_row_id = parseInt(document.getElementById('nf-cond-row').value, 10) || null;
+      payload.cond_field = fieldSel.value;
+      payload.cond_field_type = fieldOpt ? fieldOpt.dataset.type : '';
+    }
+    if (flowConditionExtraClauses.length) {
+      // 2.4 — clauses combinées : la clause "historique" ci-dessus devient
+      // la première clause de la liste, suivie des clauses supplémentaires.
+      var mainClause = condSource === 'variable'
+        ? { source: 'variable', variable: payload.cond_variable, variable_chemin: payload.cond_variable_chemin,
+            operator: payload.cond_operator, value: payload.cond_value }
+        : { source: 'objet', definition_id: payload.cond_definition_id, row_id: payload.cond_row_id,
+            field: payload.cond_field, field_type: payload.cond_field_type,
+            operator: payload.cond_operator, value: payload.cond_value };
+      var allClauses = [mainClause].concat(flowConditionExtraClauses.map(function(c) {
+        return c.source === 'variable'
+          ? { source: 'variable', variable: c.variable, variable_chemin: c.variable_chemin, operator: c.operator, value: c.value }
+          : { source: 'objet', definition_id: parseInt(c.definition_id, 10), row_id: parseInt(c.row_id, 10) || null,
+              field: c.field, field_type: c.field_type, operator: c.operator, value: c.value };
+      }));
+      payload.cond_clauses = JSON.stringify(allClauses);
+      payload.cond_combinator = document.getElementById('nf-cond-combinator').value;
+    }
+  } else if (currentNodeFormType === 'action') {
+    var actionType = document.getElementById('nf-action-type').value;
+    payload.action_type = actionType;
+    if (actionType === 'aller_a' || actionType === 'ouvrir_ligne') {
+      payload.target_screen_id = parseInt(document.getElementById('nf-action-target-screen').value, 10);
+    } else if (actionType === 'activer_onglet') {
+      payload.target_element_id = parseInt(document.getElementById('nf-action-target-element').value, 10);
+    } else if (actionType === 'modifier_element') {
+      payload.target_element_id = parseInt(document.getElementById('nf-action-target-element').value, 10);
+      var prop = document.getElementById('nf-action-element-property').value;
+      payload.element_property = prop;
+      var isColorProp = prop === 'bg_color' || prop === 'border_color';
+      var toggleOn = prop !== 'visibilite' && prop !== 'surbrillance' && prop !== 'desactive' && document.getElementById('nf-action-element-toggle').checked;
+      if (prop === 'visibilite') {
+        payload.element_value = document.getElementById('nf-action-element-value-visibility').value;
+      } else if (prop === 'surbrillance') {
+        payload.element_value = document.getElementById('nf-action-element-value-surbrillance').value;
+      } else if (prop === 'desactive') {
+        payload.element_value = document.getElementById('nf-action-element-value-desactive').value;
+      } else if (prop === 'contenu') {
+        payload.element_value = document.getElementById('nf-action-element-value-text').value;
+      } else {
+        var v1 = isColorProp
+          ? document.getElementById('nf-action-element-value-color').value
+          : document.getElementById('nf-action-element-value-number').value;
+        if (toggleOn) {
+          var v2 = isColorProp
+            ? document.getElementById('nf-action-element-value2-color').value
+            : document.getElementById('nf-action-element-value2-number').value;
+          payload.element_value = v1 + '||' + v2;
+        } else {
+          payload.element_value = v1;
+        }
+      }
+    } else if (actionType === 'modifier_donnee') {
+      payload.target_definition_id = parseInt(document.getElementById('nf-action-data-definition').value, 10);
+      payload.target_row_id = parseInt(document.getElementById('nf-action-data-row').value, 10) || null;
+      payload.target_field = document.getElementById('nf-action-data-field').value;
+      payload.data_operation = document.getElementById('nf-action-data-operation').value;
+      payload.data_value = document.getElementById('nf-action-data-value').value;
+    } else if (actionType === 'modifier_variable') {
+      payload.target_variable = document.getElementById('nf-action-variable-name').value;
+      payload.data_operation = document.getElementById('nf-action-variable-operation').value;
+      payload.data_value = document.getElementById('nf-action-variable-value').value;
+    } else if (actionType === 'attendre') {
+      payload.data_value = document.getElementById('nf-action-wait-seconds').value;
+    } else if (actionType === 'declencher_evenement') {
+      // Notification pure : aucun élément/ligne à transmettre (voir
+      // screens/custom_events/) — c'est à l'écouteur de décider quoi
+      // faire, avec ses propres réglages habituels.
+      payload.target_custom_event_id = parseInt(document.getElementById('nf-action-custom-event').value, 10);
+    }
+  }
+
+  fetch(flowUrl('/screens/' + FLOW_SCREEN_ID + '/flow/nodes/add'), {
+    method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(payload)
+  }).then(function(r){ return r.json(); }).then(function(node){
+    ALL_FLOW.nodes.push(node);
+    closeNodeForm();
+    renderFlow();
+  });
+}
+
diff --git a/static/js/screen_edit/panel-init.js b/static/js/screen_edit/panel-init.js
new file mode 100644
index 00000000..1e37de36
--- /dev/null
+++ b/static/js/screen_edit/panel-init.js
@@ -0,0 +1,436 @@
+function initBuilderPanel() {
+  (function () {
+    var xEl = document.getElementById('pos-x'), yEl = document.getElementById('pos-y');
+    var wEl = document.getElementById('pos-w'), hEl = document.getElementById('pos-h');
+    // pos-w/pos-h n'existent pas pour un élément posé dans un conteneur (sa
+    // taille se règle via les champs "Largeur/Hauteur (%)"/"fixe (px)" du
+    // formulaire général à la place, voir size_ctrls plus haut) — X/Y non
+    // plus, mais ils restent dans le DOM (juste désactivés) pour cet élément.
+    if (!xEl || !wEl) return;
+    function apply() {
+      var canvasEl = document.getElementById('el-' + CURRENT_SELECTED_ID);
+      var x = parseFloat(xEl.value) || 0, y = parseFloat(yEl.value) || 0;
+      var w = parseFloat(wEl.value) || 1, h = parseFloat(hEl.value) || 1;
+      if (canvasEl) {
+        canvasEl.style.left = x + '%'; canvasEl.style.top = y + '%';
+        canvasEl.style.width = w + '%'; canvasEl.style.height = h + '%';
+      }
+      saveGeometry(CURRENT_SELECTED_ID, x, y, w, h);
+    }
+    [xEl, yEl, wEl, hEl].forEach(function (el) { el.addEventListener('change', apply); });
+  })();
+
+  bindAspectButtons();
+
+  document.querySelectorAll('.uploadInput').forEach(function (input) {
+    input.addEventListener('change', function () {
+      if (!input.files.length) return;
+      var status = input.parentElement.querySelector('.uploadStatus');
+      var targetField = document.getElementById(input.dataset.target);
+      status.textContent = 'Envoi en cours...';
+      var data = new FormData();
+      data.append('file', input.files[0]);
+      fetch("/game/" + GAME_SLUG + "/upload", { method: 'POST', body: data })
+        .then(function (r) { return r.json(); })
+        .then(function (json) {
+          if (json.url) {
+            targetField.value = json.url;
+            status.textContent = 'Fichier envoyé ✓ Enregistrement...';
+            // Enregistre tout de suite, comme n'importe quel autre réglage —
+            // un fichier envoyé ne doit jamais rester "en attente".
+            submitPropsForm().then(function () { status.textContent = 'Fichier envoyé ✓ Enregistré.'; });
+          }
+          else { status.textContent = "Échec de l'envoi."; }
+        })
+        .catch(function () { status.textContent = "Échec de l'envoi."; });
+    });
+  });
+
+  bindPropsAutosave();
+  bindJaugeDefinitionSelect();
+  bindDefinitionFieldSelects('field-definition_id', ['field-filtre_champ', 'field-filtre2_champ']);
+  bindDefinitionFieldSelects('field-visibilite_cond_definition_id', ['field-visibilite_cond_champ']);
+  bindClauseListDefinitionSelect('field-data_definition_id');
+  bindClauseListRows();
+  initFilterValuePickers();
+  var visCondModeSel = document.getElementById('field-visibilite_cond_mode');
+  if (visCondModeSel) toggleVisCondFields(visCondModeSel);
+  restoreTreeCollapsedState();
+  applySelectionHighlight(CURRENT_SELECTED_ID);
+  restoreFloatPanelState('props', 'propsPanelFloat', 'propsPanelReopenBtn');
+  restoreFloatPanelState('left', 'panelLeftFloat', 'panelLeftReopenBtn');
+}
+
+// Jauge : quand on change l'objet de données à suivre SANS quitter le
+// panneau (donc sans le rechargement serveur qui repeuplerait row_id/champ/
+// champ_nom via controls_with_values.py), on reconstruit ces trois menus à
+// la volée à partir de DEFINITIONS_DATA (même source que les formulaires de
+// la Logique de la scène, voir onFlowDefinitionChange). DEFINITIONS_DATA
+// est déclaré plus bas dans ce script (donc encore "undefined" au moment où
+// initBuilderPanel() tourne en tout premier) — sans conséquence ici,
+// puisqu'on ne le lit que dans le gestionnaire, jamais au moment du bind.
+// Libellé d'un champ dans une liste déroulante — précise l'objet visé pour
+// un champ "relation" (ex. "parcour (→ parcours)"), même règle que
+// _field_label() côté Python (controls_with_values.py).
+function fieldOptionLabel(f) {
+  return (f.type === 'relation' && f.relation_definition_name) ? (f.name + ' (→ ' + f.relation_definition_name + ')') : f.name;
+}
+
+function bindJaugeDefinitionSelect() {
+  var defSel = document.getElementById('field-definition_id');
+  var rowSel = document.getElementById('field-row_id');
+  var champSel = document.getElementById('field-champ');
+  var champNomSel = document.getElementById('field-champ_nom');
+  if (!defSel || !rowSel || !champSel || !champNomSel) return; // pas la Jauge
+  defSel.addEventListener('change', function () {
+    var info = (DEFINITIONS_DATA || {})[defSel.value] || { rows: [], fields: [] };
+    rowSel.innerHTML = info.rows.length
+      ? info.rows.map(function (r) { return '<option value="' + r.id + '">' + r.label + '</option>'; }).join('')
+      : '<option value="">Aucune donnée dans cet objet</option>';
+    // La Jauge affiche une valeur/un nom tel quel — un champ "relation" (un
+    // id, pas une valeur) n'a pas sa place ici, même exclusion que côté
+    // serveur (voir controls_with_values.py).
+    var simpleFields = info.fields.filter(function (f) { return f.type !== 'relation'; });
+    var fieldOptions = simpleFields.map(function (f) { return '<option value="' + f.name + '">' + f.name + '</option>'; }).join('');
+    champSel.innerHTML = fieldOptions || '<option value="">Aucun champ simple</option>';
+    champNomSel.innerHTML = '<option value="">— aucun —</option>' + fieldOptions;
+  });
+}
+
+// ---------- Réglages "champ" d'un filtre (Répéteur/Donnée liée) : listes
+// déroulantes peuplées avec les VRAIS champs de l'objet choisi, jamais
+// tapées à la main — même principe que bindJaugeDefinitionSelect() ci-dessus,
+// généralisé pour s'appliquer à un nombre quelconque de listes "champ"
+// rattachées à un même sélecteur d'objet (ici : filtre_champ + filtre2_champ,
+// ou data_filtre_champ + data_filtre2_champ). ----------
+// ---------- Condition de visibilité (voir VISIBILITY_CONDITION_CONTROLS) :
+// n'affiche que les réglages pertinents pour le mode choisi (variable
+// globale, ou champ d'un objet) — les deux autres restent en base (peu
+// importe, seul le mode courant est lu par is_element_visible()) mais sont
+// masqués pour ne pas embrouiller. ----------
+function toggleVisCondFields(sel) {
+  var mode = sel.value;
+  document.querySelectorAll('.visCondRow').forEach(function (row) {
+    var scope = row.dataset.visCondScope;
+    var show = scope === 'any' ? !!mode : scope === mode;
+    row.style.display = show ? '' : 'none';
+  });
+}
+
+function bindDefinitionFieldSelects(defSelId, fieldSelIds) {
+  var defSel = document.getElementById(defSelId);
+  if (!defSel) return;
+  var fieldSels = fieldSelIds.map(function (id) { return document.getElementById(id); }).filter(Boolean);
+  if (!fieldSels.length) return;
+  defSel.addEventListener('change', function () {
+    var info = (DEFINITIONS_DATA || {})[defSel.value] || { fields: [] };
+    var opts = '<option value="">(sélectionner un objet d\'abord)</option>' +
+      info.fields.map(function (f) { return '<option value="' + f.name + '">' + fieldOptionLabel(f) + '</option>'; }).join('');
+    fieldSels.forEach(function (sel) { sel.innerHTML = opts; });
+  });
+}
+
+// ---------- "Donnée liée" : liste de conditions ILLIMITÉE (champ/opérateur/
+// valeur), combinées entre elles par ET/OU (voir c_clause_list.py,
+// save_element_controls.py, resolve_bound_row.py). Chaque ligne existante
+// est rendue côté serveur (au chargement du panneau) ; "+ Ajouter une
+// condition" clone un <template> pour en ajouter de nouvelles à la volée,
+// sans aller-retour serveur — même principe que "fieldsList"/"varValueRows"
+// ailleurs dans l'outil. ----------
+function wireClauseRow(row, key) {
+  row.querySelectorAll('input, select').forEach(function (field) {
+    var debounced = field.tagName === 'INPUT';
+    field.addEventListener(debounced ? 'input' : 'change', function () {
+      if (debounced) debouncedSubmitPropsForm(); else submitPropsForm();
+    });
+  });
+  var removeBtn = row.querySelector('.clauseRemoveBtn');
+  if (removeBtn) {
+    removeBtn.addEventListener('click', function () {
+      row.remove();
+      updateClauseCombinatorVisibility(key);
+      submitPropsForm();
+    });
+  }
+}
+
+function updateClauseCombinatorVisibility(key) {
+  var wrap = document.getElementById('clauseListWrap-' + key);
+  var combRow = document.getElementById('clauseCombinatorRow-' + key);
+  if (!wrap || !combRow) return;
+  combRow.style.display = wrap.querySelectorAll('.clauseRow').length > 1 ? '' : 'none';
+}
+
+function addClauseRow(key) {
+  var tmpl = document.getElementById('clauseRowTemplate-' + key);
+  var wrap = document.getElementById('clauseListWrap-' + key);
+  if (!tmpl || !wrap) return;
+  var clone = tmpl.content.cloneNode(true);
+  var row = clone.querySelector('.clauseRow');
+  wireClauseRow(row, key);
+  wrap.appendChild(clone);
+  // Repeuple tout de suite son sélecteur "Champ" avec les VRAIS champs de
+  // l'objet déjà choisi (sans ça, une ligne ajoutée après coup resterait
+  // bloquée sur "(sélectionner un objet d'abord)" même si un objet est
+  // déjà réglé plus haut dans le panneau).
+  var defSel = document.getElementById('field-data_definition_id');
+  if (defSel && defSel.value) defSel.dispatchEvent(new Event('change'));
+  // Initialise le sélecteur de valeur (fixe/dynamique/variable) de cette
+  // nouvelle ligne — sans effet sur les lignes déjà initialisées.
+  initFilterValuePickers();
+  updateClauseCombinatorVisibility(key);
+  submitPropsForm();
+}
+
+// Rebranche les lignes déjà rendues par le serveur (rechargement du
+// panneau, ex. sélection d'un autre élément) — les lignes ajoutées EN
+// COURS de session par addClauseRow() se branchent déjà elles-mêmes.
+function bindClauseListRows() {
+  document.querySelectorAll('.clauseListControl').forEach(function (control) {
+    var key = control.dataset.clauseKey;
+    control.querySelectorAll('.clauseRow').forEach(function (row) { wireClauseRow(row, key); });
+  });
+}
+
+// Repeuple le sélecteur "champ" de TOUTES les lignes de condition actuelles
+// (interrogées à chaque changement, donc couvre aussi les lignes ajoutées
+// après coup) quand on change l'objet lié — même principe que
+// bindDefinitionFieldSelects ci-dessus, généralisé pour un nombre de lignes
+// variable plutôt qu'une liste fixe d'ids capturée une fois pour toutes.
+function bindClauseListDefinitionSelect(defSelId) {
+  var defSel = document.getElementById(defSelId);
+  if (!defSel) return;
+  defSel.addEventListener('change', function () {
+    var info = (DEFINITIONS_DATA || {})[defSel.value] || { fields: [] };
+    var opts = '<option value="">(sélectionner un objet d\'abord)</option>' +
+      info.fields.map(function (f) { return '<option value="' + f.name + '">' + fieldOptionLabel(f) + '</option>'; }).join('');
+    document.querySelectorAll('.clauseChampSelect').forEach(function (sel) {
+      var current = sel.value;
+      sel.innerHTML = opts;
+      sel.value = current; // reste sélectionné si ce champ existe encore dans le nouvel objet
+    });
+  });
+}
+
+// ---------- Valeur de comparaison d'un filtre : fixe, ou donnée d'un autre
+// objet ----------
+//
+// La valeur envoyée au serveur reste une simple chaîne "texte" (voir
+// _resolve_filter_value côté Python) — soit une valeur fixe, soit une
+// référence à un champ d'un autre objet dans un format interne précis. Le
+// mode "dynamique" ci-dessous se contente de reconstruire cette chaîne à
+// partir de deux listes déroulantes (objet, champ) plutôt que de la faire
+// taper à la main. OPEN/CLOSE évitent d'écrire les deux accolades l'une
+// contre l'autre dans le source (Jinja les interpréterait comme le DÉBUT
+// d'une expression s'il les rencontrait telles quelles).
+var _FILTER_REF_OPEN = '{' + '{';
+var _FILTER_REF_CLOSE = '}' + '}';
+var _FILTER_REF_RE = new RegExp('^\\{\\{\\s*([^.{}]+)\\.([^.{}]+)\\s*\\}\\}$');
+// Une paire d'accolades doublées entourant "$nom_variable" (voir
+// _VAR_REF_PATTERN côté Python, filter_repeater_rows.py) référence une
+// variable globale — le "$" la distingue sans ambiguïté de _FILTER_REF_RE
+// ci-dessus, qui attend toujours un point ("Objet.champ"). Groupe 2 : un
+// chemin optionnel ".champ"/"[index]" (chaînable) à l'intérieur de la
+// variable, utile pour une variable "objet"/"tableau".
+var _VAR_REF_RE = new RegExp('^\\{\\{\\s*\\$([^.{}\\[\\]]+)((?:\\.[^.{}\\[\\]]+|\\[\\d+\\])*)\\s*\\}\\}$');
+
+function _filterValueDefinitionId(objName) {
+  var opt = document.querySelector('.filterValueObjSel option[value="' + CSS.escape(objName) + '"]');
+  return opt ? opt.dataset.definitionId : null;
+}
+
+function populateFilterValueFields(fieldSel, defId, selectedName) {
+  var info = (DEFINITIONS_DATA || {})[defId] || { fields: [] };
+  fieldSel.innerHTML = '<option value="">— champ —</option>' + info.fields.map(function (f) {
+    return '<option value="' + f.name + '"' + (f.name === selectedName ? ' selected' : '') + '>' + fieldOptionLabel(f) + '</option>';
+  }).join('');
+}
+
+function updateFilterValueFromDynamic(wrap) {
+  var objSel = wrap.querySelector('.filterValueObjSel');
+  var fieldSel = wrap.querySelector('.filterValueFieldSel');
+  var input = wrap.querySelector('.filterValueFixe input');
+  input.value = (objSel.value && fieldSel.value) ? (_FILTER_REF_OPEN + objSel.value + '.' + fieldSel.value + _FILTER_REF_CLOSE) : '';
+  input.dispatchEvent(new Event('input', { bubbles: true }));
+}
+
+function updateFilterValueFromVariable(wrap) {
+  var varSel = wrap.querySelector('.filterValueVarSel');
+  var pathInput = wrap.querySelector('.filterValueVarPath');
+  var input = wrap.querySelector('.filterValueFixe input');
+  var path = pathInput ? pathInput.value.trim() : '';
+  input.value = varSel.value ? (_FILTER_REF_OPEN + '$' + varSel.value + path + _FILTER_REF_CLOSE) : '';
+  input.dispatchEvent(new Event('input', { bubbles: true }));
+}
+
+function onFilterValueModeChange(sel) {
+  var wrap = sel.closest('.filterValueControl');
+  var fixe = wrap.querySelector('.filterValueFixe');
+  var dyn = wrap.querySelector('.filterValueDynamique');
+  var varWrap = wrap.querySelector('.filterValueVariable');
+  fixe.style.display = sel.value === 'fixe' ? 'block' : 'none';
+  dyn.style.display = sel.value === 'dynamique' ? 'block' : 'none';
+  varWrap.style.display = sel.value === 'variable' ? 'block' : 'none';
+  if (sel.value === 'dynamique') updateFilterValueFromDynamic(wrap);
+  else if (sel.value === 'variable') updateFilterValueFromVariable(wrap);
+}
+
+function onFilterValueObjChange(sel) {
+  var wrap = sel.closest('.filterValueControl');
+  populateFilterValueFields(wrap.querySelector('.filterValueFieldSel'), _filterValueDefinitionId(sel.value), '');
+  updateFilterValueFromDynamic(wrap);
+}
+
+function onFilterValueFieldChange(sel) {
+  updateFilterValueFromDynamic(sel.closest('.filterValueControl'));
+}
+
+function onFilterValueVarChange(sel) {
+  updateFilterValueFromVariable(sel.closest('.filterValueControl'));
+}
+
+function initFilterValuePickers() {
+  document.querySelectorAll('.filterValueControl').forEach(function (wrap) {
+    var modeSel = wrap.querySelector('.filterValueMode');
+    var objSel = wrap.querySelector('.filterValueObjSel');
+    var fieldSel = wrap.querySelector('.filterValueFieldSel');
+    var varSel = wrap.querySelector('.filterValueVarSel');
+    var varPathInput = wrap.querySelector('.filterValueVarPath');
+    var current = (wrap.dataset.currentValue || '').trim();
+    var varMatch = _VAR_REF_RE.exec(current);
+    var objMatch = _FILTER_REF_RE.exec(current);
+    if (varMatch) {
+      modeSel.value = 'variable';
+      wrap.querySelector('.filterValueFixe').style.display = 'none';
+      wrap.querySelector('.filterValueVariable').style.display = 'block';
+      varSel.value = varMatch[1].trim();
+      if (varPathInput) varPathInput.value = (varMatch[2] || '').trim();
+    } else if (objMatch) {
+      modeSel.value = 'dynamique';
+      wrap.querySelector('.filterValueFixe').style.display = 'none';
+      wrap.querySelector('.filterValueDynamique').style.display = 'block';
+      objSel.value = objMatch[1].trim();
+      populateFilterValueFields(fieldSel, _filterValueDefinitionId(objSel.value), objMatch[2].trim());
+    } else {
+      modeSel.value = 'fixe';
+    }
+  });
+}
+
+// Le retour/avance du navigateur (bouton "précédent") est déjà pris en
+// charge par pjax.js (navigation globale sans rechargement, voir
+// static/pjax.js) : il refait un rendu complet de <main> et rejoue ce
+// script (voir runScriptsIn dans pjax.js), ce qui rappelle initBuilderPanel()
+// ci-dessous — donc le canevas et le panneau de propriétés se retrouvent à
+// jour automatiquement, sans qu'on ait besoin d'un second écouteur ici.
+initBuilderPanel();
+
+var CONDITION_OPERATORS_HTML = document.getElementById('nf-cond-operator') ? document.getElementById('nf-cond-operator').innerHTML : '';
+var GLOBAL_VARIABLES_OPTIONS_HTML = document.getElementById('nf-cond-variable') ? document.getElementById('nf-cond-variable').innerHTML : '';
+
+function toggleActionFields(sel) {
+  var form = sel.closest('.actionAddForm');
+  var screenSel = form.querySelector('.targetScreenSelect');
+  var elementFields = form.querySelector('.targetElementFields');
+  var dataFields = form.querySelector('.targetDataFields');
+  screenSel.style.display = sel.value === 'aller_a' ? 'block' : 'none';
+  elementFields.style.display = sel.value === 'modifier_element' ? 'block' : 'none';
+  dataFields.style.display = sel.value === 'modifier_donnee' ? 'block' : 'none';
+  if (sel.value === 'modifier_element') {
+    var propSel = elementFields.querySelector('.elementPropertySelect');
+    toggleElementPropertyValue(propSel);
+  }
+  if (sel.value === 'modifier_donnee') {
+    var defSel = dataFields.querySelector('.targetDefinitionSelect');
+    if (defSel) onDataDefinitionChange(defSel);
+  }
+}
+document.querySelectorAll('.actionTypeSelect').forEach(toggleActionFields);
+
+function toggleElementPropertyValue(sel) {
+  var wrap = sel.closest('.targetElementFields');
+  var visSel = wrap.querySelector('.elementValueVisibility');
+  var colorInp = wrap.querySelector('.elementValueColor');
+  var numInp = wrap.querySelector('.elementValueNumber');
+  [visSel, colorInp, numInp].forEach(function(el){ el.style.display = 'none'; el.removeAttribute('name'); });
+  if (sel.value === 'visibilite') {
+    visSel.style.display = 'block'; visSel.setAttribute('name', 'element_value');
+  } else if (sel.value === 'bg_color' || sel.value === 'border_color') {
+    colorInp.style.display = 'block'; colorInp.setAttribute('name', 'element_value');
+  } else {
+    numInp.style.display = 'block'; numInp.setAttribute('name', 'element_value');
+  }
+}
+document.querySelectorAll('.elementPropertySelect').forEach(toggleElementPropertyValue);
+
+function onDataDefinitionChange(sel) {
+  var wrap = sel.closest('.targetDataFields');
+  var info = DEFINITIONS_DATA[sel.value] || {rows: [], fields: []};
+  var rowSel = wrap.querySelector('.targetRowSelect');
+  var fieldSel = wrap.querySelector('.targetFieldSelect');
+  if (!rowSel || !fieldSel) return;
+  rowSel.innerHTML = info.rows.length
+    ? info.rows.map(function(r){ return '<option value="' + r.id + '">' + r.label + '</option>'; }).join('')
+    : '<option value="">Aucune donnée dans cet objet</option>';
+  fieldSel.innerHTML = info.fields.length
+    ? info.fields.map(function(f){ return '<option value="' + f.name + '">' + f.name + ' (' + f.type + ')</option>'; }).join('')
+    : '<option value="">Aucun champ simple</option>';
+}
+document.querySelectorAll('.targetDefinitionSelect').forEach(onDataDefinitionChange);
+
+function syncAlign(radio) {
+  radio.closest('.alignGroup').querySelectorAll('.alignOption').forEach(function(o){ o.classList.remove('active', 'is-primary'); });
+  radio.closest('.alignOption').classList.add('active', 'is-primary');
+}
+
+// Choix du format d'aperçu (Portrait/Paysage/Carré) : mémorisé côté serveur
+// (voir screen_set_aspect.py) pour ne pas repartir sur Portrait à chaque
+// ajout/suppression d'élément ou changement de sélection — ces actions
+// redemandent ce panneau au serveur, qui doit donc connaître le choix déjà
+// fait. Appelé depuis initBuilderPanel() (voir plus haut), une seule fois
+// par (re)rendu de ce panneau.
+function bindAspectButtons() {
+  document.querySelectorAll('.aspectBtn').forEach(function (btn) {
+    btn.addEventListener('click', function () {
+      document.querySelectorAll('.aspectBtn').forEach(function (b) { b.classList.remove('active'); });
+      btn.classList.add('active');
+      // Dans l'éditeur (≥1300px), le canevas remplit tout .canvasFrame
+      // (voir .canvas dans style.css) — cet aspect-ratio ne sert donc plus
+      // qu'au repli en page empilée (<1300px, voir le media query) et à
+      // l'aperçu jouable ("Jouer"), pas à la mise en page ici.
+      document.getElementById('canvas').style.aspectRatio = btn.dataset.aspect;
+      fetch("/game/" + GAME_SLUG + "/screens/" + SCREEN_ID + "/aspect", {
+        method: 'POST', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ aspect: btn.dataset.aspect }),
+      });
+    });
+  });
+}
+
+document.querySelectorAll('.uploadInput').forEach(function(input){
+  input.addEventListener('change', function(){
+    if (!input.files.length) return;
+    var status = input.parentElement.querySelector('.uploadStatus');
+    var targetField = document.getElementById(input.dataset.target);
+    status.textContent = 'Envoi en cours...';
+    var data = new FormData();
+    data.append('file', input.files[0]);
+    fetch("/game/" + GAME_SLUG + "/upload", {method: 'POST', body: data})
+      .then(function(r){ return r.json(); })
+      .then(function(json){
+        if (json.url) {
+          targetField.value = json.url;
+          status.textContent = 'Fichier envoyé ✓ Enregistrement...';
+          // Enregistre tout de suite (comme un clic sur "Enregistrer") pour
+          // qu'un fichier envoyé ne reste jamais "en attente" si on oublie
+          // de cliquer sur le bouton ensuite — l'image doit apparaître dès
+          // l'envoi, sans étape supplémentaire à retenir.
+          var form = document.getElementById('propsForm');
+          if (form) { form.requestSubmit ? form.requestSubmit() : form.submit(); }
+        }
+        else { status.textContent = "Échec de l'envoi."; }
+      })
+      .catch(function(){ status.textContent = "Échec de l'envoi."; });
+  });
+});
+
diff --git a/static/js/screen_edit/tabs-and-blocks.js b/static/js/screen_edit/tabs-and-blocks.js
new file mode 100644
index 00000000..0e6ed5d0
--- /dev/null
+++ b/static/js/screen_edit/tabs-and-blocks.js
@@ -0,0 +1,137 @@
+// ---------- Onglets du centre : Écran / Logique de la scène / Timeline
+// d'animation — un seul visible à la fois, chacun occupant tout l'espace
+// disponible (remplace l'ancien panneau du bas rétractable/redimensionnable
+// à la souris : un onglet "prend toute la place" par nature, et en changer
+// équivaut à "fermer" celui qu'on quitte). ----------
+function switchBuilderTab(tab) {
+  document.querySelectorAll('.builderTabBtn').forEach(function (btn) {
+    btn.classList.toggle('active', btn.dataset.tab === tab);
+  });
+  document.querySelectorAll('.builderTabPanel').forEach(function (panel) {
+    panel.classList.toggle('active', panel.dataset.tabPanel === tab);
+  });
+}
+
+function toggleDashCreate(tab) {
+  var bar = document.getElementById('dashCreate-' + tab);
+  bar.style.display = bar.style.display === 'none' ? 'flex' : 'none';
+  if (bar.style.display === 'flex') {
+    var firstInput = bar.querySelector('input, select');
+    if (firstInput) firstInput.focus();
+  }
+}
+
+function toggleBlockEditRow(blockId) {
+  document.getElementById('blockEditRow' + blockId).classList.toggle('hidden');
+}
+
+// ---------- Panneaux flottants : glisser-déposer + redimensionnement +
+// plein écran ---------- Générique, porté tel quel depuis game_dashboard.html
+// (mêmes gestes partout dans l'outil plutôt qu'une variante par panneau).
+function makeFloatPanelDraggable(panel, header) {
+  var dragging = false, offsetX = 0, offsetY = 0;
+  header.addEventListener('mousedown', function (e) {
+    if (e.target.closest('button')) return;
+    dragging = true;
+    if (panel.classList.contains('floatPanel--fullscreen')) panel._fsToggle.exit();
+    var rect = panel.getBoundingClientRect();
+    panel.style.left = rect.left + 'px';
+    panel.style.top = rect.top + 'px';
+    panel.style.right = 'auto';
+    panel.style.bottom = 'auto';
+    panel.style.transform = 'none';
+    offsetX = e.clientX - rect.left;
+    offsetY = e.clientY - rect.top;
+    document.body.style.userSelect = 'none';
+  });
+  document.addEventListener('mousemove', function (e) {
+    if (!dragging) return;
+    panel.style.left = (e.clientX - offsetX) + 'px';
+    panel.style.top = (e.clientY - offsetY) + 'px';
+  });
+  document.addEventListener('mouseup', function () {
+    dragging = false;
+    document.body.style.userSelect = '';
+  });
+}
+function makeFloatPanelResizable(panel, handle) {
+  var resizing = false, startX = 0, startY = 0, startW = 0, startH = 0;
+  handle.addEventListener('mousedown', function (e) {
+    resizing = true;
+    if (panel.classList.contains('floatPanel--fullscreen')) panel._fsToggle.exit();
+    var rect = panel.getBoundingClientRect();
+    startX = e.clientX; startY = e.clientY;
+    startW = rect.width; startH = rect.height;
+    panel.style.width = startW + 'px';
+    panel.style.maxWidth = 'none';
+    document.body.style.userSelect = 'none';
+    e.preventDefault();
+  });
+  document.addEventListener('mousemove', function (e) {
+    if (!resizing) return;
+    panel.style.width = Math.max(320, startW + (e.clientX - startX)) + 'px';
+    panel.style.height = Math.max(200, startH + (e.clientY - startY)) + 'px';
+  });
+  document.addEventListener('mouseup', function () {
+    resizing = false;
+    document.body.style.userSelect = '';
+  });
+}
+function makeFloatPanelFullscreenable(panel, toggleBtn) {
+  var saved = null;
+  function enter() {
+    saved = {
+      left: panel.style.left, top: panel.style.top, right: panel.style.right,
+      width: panel.style.width, height: panel.style.height,
+      maxWidth: panel.style.maxWidth, transform: panel.style.transform,
+    };
+    panel.classList.add('floatPanel--fullscreen');
+    panel.style.left = '12px'; panel.style.top = '12px'; panel.style.right = '12px'; panel.style.bottom = '12px';
+    panel.style.width = 'auto'; panel.style.height = 'auto'; panel.style.maxWidth = 'none'; panel.style.transform = 'none';
+    toggleBtn.title = 'Quitter le plein écran';
+  }
+  function exit() {
+    panel.classList.remove('floatPanel--fullscreen');
+    panel.style.bottom = '';
+    if (saved) {
+      panel.style.left = saved.left; panel.style.top = saved.top; panel.style.right = saved.right;
+      panel.style.width = saved.width; panel.style.height = saved.height;
+      panel.style.maxWidth = saved.maxWidth; panel.style.transform = saved.transform;
+    }
+    toggleBtn.title = 'Plein écran';
+  }
+  toggleBtn.addEventListener('click', function () {
+    if (panel.classList.contains('floatPanel--fullscreen')) exit(); else enter();
+  });
+  panel._fsToggle = { enter: enter, exit: exit };
+  return panel._fsToggle;
+}
+
+// ---------- Modale d'un bloc de logique (voir screens/flow/blocks/) : un
+// seul bloc ouvert à la fois, réutilise le même #nodeForm/#flowCanvas pour
+// n'importe quel bloc — voir currentBlockNodes()/currentBlockEdges(). ----------
+(function () {
+  var panel = document.getElementById('logicBlockPanel');
+  makeFloatPanelDraggable(panel, document.getElementById('logicBlockPanelHeader'));
+  makeFloatPanelResizable(panel, document.getElementById('logicBlockPanelResizeHandle'));
+  makeFloatPanelFullscreenable(panel, panel.querySelector('.floatPanelFullscreenBtn'));
+  window.openLogicBlockPanel = function (blockId) {
+    CURRENT_BLOCK_ID = blockId;
+    closeNodeForm();
+    var block = FLOW_BLOCKS.find(function (b) { return b.id === blockId; });
+    document.getElementById('logicBlockPanelTitle').textContent = (block && block.name) || '?';
+    panel.classList.remove('hidden');
+    panel._fsToggle.enter();
+    renderFlow();
+    requestAnimationFrame(drawFlowEdges);
+  };
+  window.closeLogicBlockPanel = function () {
+    panel.classList.add('hidden');
+    CURRENT_BLOCK_ID = null;
+  };
+})();
+
+// L'ouverture initiale ?tab=/?block=... (données Jinja : request.args)
+// reste dans le petit <script> inline en fin de screen_edit.html, après
+// ce fichier — voir le commentaire là-bas.
+
diff --git a/static/js/screen_edit/tree-panels.js b/static/js/screen_edit/tree-panels.js
new file mode 100644
index 00000000..bd3d72dd
--- /dev/null
+++ b/static/js/screen_edit/tree-panels.js
@@ -0,0 +1,731 @@
+// Données injectées par Jinja (GAME_SLUG, SCREEN_ID, SCREEN_EDIT_URL,
+// CURRENT_SELECTED_ID, ELEMENT_ADD_URL...) : voir le petit <script> inline
+// resté dans screen_edit.html, en tête de page — ce fichier statique ne
+// passe jamais par le moteur de templates, voir static/js/play/ pour le
+// même patron déjà en place côté moteur de jeu.
+function saveGeometry(id, x, y, width, height) {
+  return fetch("/game/" + GAME_SLUG + "/elements/" + id + "/geometry", {
+    method: 'POST',
+    headers: {'Content-Type': 'application/json'},
+    body: JSON.stringify({x: x, y: y, width: width, height: height})
+  });
+}
+
+// ---------- Menu contextuel (clic droit) de l'arborescence des éléments ----------
+//
+// Une seule action pour l'instant : dupliquer l'élément dans son conteneur
+// actuel (même parent, ou même écran si posé directement dessus) — voir
+// screens/elements/duplicate_element.py. La duplication passe par un vrai
+// <form method="post"> soumis dynamiquement : pjax.js intercepte tous les
+// formulaires internes, donc pas besoin de gérer le fetch/la redirection
+// nous-mêmes ici.
+var contextMenuElementId = null;
+
+function showElementContextMenu(event, elementId) {
+  event.preventDefault();
+  contextMenuElementId = elementId;
+  var menu = document.getElementById('elementContextMenu');
+  menu.style.left = event.pageX + 'px';
+  menu.style.top = event.pageY + 'px';
+  menu.style.display = 'block';
+  return false;
+}
+
+function hideElementContextMenu() {
+  var menu = document.getElementById('elementContextMenu');
+  if (menu) menu.style.display = 'none';
+  contextMenuElementId = null;
+}
+
+function contextMenuDuplicate() {
+  var id = contextMenuElementId;
+  hideElementContextMenu();
+  if (!id) return;
+  var form = document.createElement('form');
+  form.method = 'post';
+  form.action = '/game/' + GAME_SLUG + '/elements/' + id + '/duplicate';
+  document.body.appendChild(form);
+  form.requestSubmit();
+}
+
+if (!window.__forgeContextMenuBound) {
+  window.__forgeContextMenuBound = true;
+  document.addEventListener('click', function (e) {
+    var menu = document.getElementById('elementContextMenu');
+    if (menu && menu.style.display === 'block' && !menu.contains(e.target)) hideElementContextMenu();
+  });
+  document.addEventListener('scroll', hideElementContextMenu, true);
+}
+
+// ---------- Arborescence : replier/déplier un conteneur ----------
+//
+// Le triangle (.treeToggle) replie/déplie SANS toucher à la sélection : le
+// nom de l'élément reste un lien à part (.treeRowLink) qui, lui, sélectionne
+// toujours l'élément et affiche ses réglages — cliquer sur un conteneur
+// replié donne donc bien accès à ses propriétés, comme demandé. L'état
+// replié/déplié est mémorisé par élément dans localStorage pour survivre à
+// un changement de sélection ou un rechargement de l'éditeur.
+function treeCollapseKey(nodeId) {
+  return 'forgeTreeCollapsed:' + GAME_SLUG + ':' + SCREEN_ID + ':' + nodeId;
+}
+
+function restoreTreeCollapsedState() {
+  document.querySelectorAll('.elementTree .treeNode').forEach(function (node) {
+    var id = node.dataset.elementId;
+    var collapsed = false;
+    try { collapsed = localStorage.getItem(treeCollapseKey(id)) === '1'; } catch (e) {}
+    node.classList.toggle('collapsed', collapsed);
+  });
+}
+
+// ---------- Panneaux gauche/droite : flottants, déplaçables, fermables ----------
+//
+// Sortis du flux (position:fixed en CSS) pour ne jamais rétrécir le canevas
+// selon où on les pose — les fermer libère cette largeur pour une
+// prévisualisation plus fidèle à ce que "Jouer" affiche réellement (voir
+// bug remonté : des panneaux trop larges réduisaient le canevas au point de
+// casser la mise en page des onglets). Un seul jeu de fonctions génériques
+// (key = identifiant court mémorisé dans localStorage, distinct par
+// panneau) plutôt qu'une copie par panneau. Position et état ouvert/fermé
+// survivent à un changement de sélection (qui remplace tout #builder3, voir
+// refreshBuilderPanel) ou un rechargement — voir les appels à
+// restoreFloatPanelState() dans initBuilderPanel().
+function floatPanelStateKey(key) {
+  return 'forgeFloatPanel:' + GAME_SLUG + ':' + SCREEN_ID + ':' + key;
+}
+
+function saveFloatPanelState(key, state) {
+  try {
+    var current = JSON.parse(localStorage.getItem(floatPanelStateKey(key)) || '{}');
+    localStorage.setItem(floatPanelStateKey(key), JSON.stringify(Object.assign(current, state)));
+  } catch (e) {}
+}
+
+function loadFloatPanelState(key) {
+  try { return JSON.parse(localStorage.getItem(floatPanelStateKey(key)) || '{}'); } catch (e) { return {}; }
+}
+
+function restoreFloatPanelState(key, panelId, reopenBtnId) {
+  var panel = document.getElementById(panelId);
+  var reopenBtn = document.getElementById(reopenBtnId);
+  if (!panel) return;
+  var state = loadFloatPanelState(key);
+  if (state.left != null && state.top != null) {
+    panel.style.left = state.left + 'px';
+    panel.style.top = state.top + 'px';
+    panel.style.right = 'auto';
+  }
+  var open = state.open !== false; // ouvert par défaut tant que rien n'a été fermé
+  panel.classList.toggle('hidden', !open);
+  if (reopenBtn) reopenBtn.classList.toggle('visible', !open);
+}
+
+function closeFloatPanel(key, panelId, reopenBtnId) {
+  var panel = document.getElementById(panelId);
+  var reopenBtn = document.getElementById(reopenBtnId);
+  if (panel) panel.classList.add('hidden');
+  if (reopenBtn) reopenBtn.classList.add('visible');
+  saveFloatPanelState(key, { open: false });
+}
+
+function openFloatPanel(key, panelId, reopenBtnId) {
+  var panel = document.getElementById(panelId);
+  var reopenBtn = document.getElementById(reopenBtnId);
+  if (panel) panel.classList.remove('hidden');
+  if (reopenBtn) reopenBtn.classList.remove('visible');
+  saveFloatPanelState(key, { open: true });
+}
+
+// Raccourcis utilisés directement par les attributs onclick du gabarit.
+function closePropsPanel() { closeFloatPanel('props', 'propsPanelFloat', 'propsPanelReopenBtn'); }
+function openPropsPanel() { openFloatPanel('props', 'propsPanelFloat', 'propsPanelReopenBtn'); }
+function closeLeftPanel() { closeFloatPanel('left', 'panelLeftFloat', 'panelLeftReopenBtn'); }
+function openLeftPanel() { openFloatPanel('left', 'panelLeftFloat', 'panelLeftReopenBtn'); }
+
+if (!window.__forgeFloatPanelDragBound) {
+  window.__forgeFloatPanelDragBound = true;
+  document.addEventListener('mousedown', function (e) {
+    var handle = e.target.closest('.floatPanelHeader');
+    if (!handle || e.target.closest('button')) return;
+    var panel = document.getElementById(handle.dataset.dragPanel);
+    var key = handle.dataset.dragKey;
+    if (!panel) return;
+    var rect = panel.getBoundingClientRect();
+    var startX = e.clientX, startY = e.clientY;
+    var startLeft = rect.left, startTop = rect.top;
+    panel.style.right = 'auto';
+    function onMove(ev) {
+      var maxLeft = window.innerWidth - panel.offsetWidth - 4;
+      var maxTop = window.innerHeight - 40;
+      var left = Math.max(4, Math.min(maxLeft, startLeft + (ev.clientX - startX)));
+      var top = Math.max(4, Math.min(maxTop, startTop + (ev.clientY - startY)));
+      panel.style.left = left + 'px';
+      panel.style.top = top + 'px';
+    }
+    function onUp() {
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onUp);
+      saveFloatPanelState(key, { left: parseFloat(panel.style.left), top: parseFloat(panel.style.top) });
+    }
+    document.addEventListener('mousemove', onMove);
+    document.addEventListener('mouseup', onUp);
+  });
+}
+
+// ---------- Galerie d'icônes Font Awesome (panneau de propriétés) ----------
+//
+// Cliquer une tuile l'ajoute directement (comme n'importe quelle tuile de
+// "Ajouter un élément sur l'écran") ; la glisser jusque sur le canevas fait
+// la même chose au relâchement — le drag HTML5 natif ne permet pas de créer
+// un vrai élément positionné exactement sous le curseur sans aller-retour
+// serveur supplémentaire, donc on se contente ici de déclencher le même
+// ajout "à la position par défaut" que le clic, l'utilisateur repositionne
+// ensuite comme pour tout nouvel élément.
+function addIconElement(iconClass) {
+  var form = document.createElement('form');
+  form.method = 'post';
+  form.action = ELEMENT_ADD_URL;
+  form.innerHTML =
+    '<input type="hidden" name="widget" value="icone">' +
+    '<input type="hidden" name="icon_class" value="' + iconClass.replace(/"/g, '&quot;') + '">';
+  document.body.appendChild(form);
+  form.requestSubmit();
+}
+
+function filterIconGallery(query) {
+  var q = query.trim().toLowerCase();
+  document.querySelectorAll('#iconGallery .iconGalleryTile').forEach(function (tile) {
+    var match = !q || tile.dataset.iconSearch.indexOf(q) !== -1;
+    tile.classList.toggle('iconHidden', !match);
+  });
+}
+
+// ---------- Sélecteur visuel d'icône (réglage "Icône" d'un élément déjà
+// posé) — même liste que la galerie d'ajout ci-dessus, mais choisir une
+// icône ici remplace celle de l'élément SÉLECTIONNÉ (champ caché
+// "field-icon_class") au lieu d'en créer un nouveau. ----------
+// ---------- Confirmation de suppression d'un élément (modale custom, pas
+// le confirm() natif du navigateur) — voir deleteConfirmModal plus haut.
+// Interroge element_delete_impact.py pour savoir si des nœuds de la
+// Logique de la scène seraient aussi supprimés, et l'affiche si oui,
+// avant que l'utilisateur confirme quoi que ce soit. ----------
+var _pendingDeleteForm = null;
+
+function handleDeleteElementSubmit(event, form) {
+  if (form.dataset.confirmed === '1') {
+    // Deuxième passage, après clic sur "Supprimer" dans la modale (voir
+    // confirmDeleteElement()) : laisse cette fois la soumission suivre son
+    // cours normalement (pjax.js l'intercepte comme n'importe quel autre
+    // formulaire, voir static/pjax.js).
+    form.dataset.confirmed = '';
+    return true;
+  }
+  event.preventDefault();
+  _pendingDeleteForm = form;
+  document.getElementById('deleteConfirmMessage').textContent = form.dataset.confirmMessage || 'Supprimer cet élément ?';
+  var warnEl = document.getElementById('deleteConfirmFlowWarning');
+  warnEl.style.display = 'none';
+  warnEl.textContent = '';
+  document.getElementById('deleteConfirmModal').classList.add('is-active');
+  var m = form.getAttribute('action').match(/\/elements\/(\d+)\/delete$/);
+  if (m) {
+    fetch("/game/" + GAME_SLUG + "/elements/" + m[1] + "/delete-impact")
+      .then(function (r) { return r.json(); })
+      .then(function (data) {
+        if (!data.flow_node_count) return;
+        var n = data.flow_node_count;
+        var plural = n > 1 ? 's' : '';
+        warnEl.textContent = '⚠️ ' + n + ' connexion' + plural + ' de la Logique de la scène (déclencheur/action) utilise' +
+          (n > 1 ? 'nt' : '') + ' cet élément et sera' + (n > 1 ? 'ont' : '') + ' aussi supprimée' + plural + '.';
+        warnEl.style.display = 'block';
+      })
+      .catch(function () {});
+  }
+  return false;
+}
+
+function closeDeleteConfirmModal() {
+  var modal = document.getElementById('deleteConfirmModal');
+  if (modal) modal.classList.remove('is-active');
+  _pendingDeleteForm = null;
+}
+
+function confirmDeleteElement() {
+  if (!_pendingDeleteForm) return;
+  var form = _pendingDeleteForm;
+  _pendingDeleteForm = null;
+  closeDeleteConfirmModal();
+  form.dataset.confirmed = '1';
+  if (form.requestSubmit) form.requestSubmit(); else form.submit();
+}
+
+function openIconPicker() {
+  var modal = document.getElementById('iconPickerModal');
+  if (modal) modal.classList.add('is-active');
+}
+
+function closeIconPicker() {
+  var modal = document.getElementById('iconPickerModal');
+  if (modal) modal.classList.remove('is-active');
+}
+
+function chooseIcon(iconSlug) {
+  var input = document.getElementById('field-icon_class');
+  var preview = document.getElementById('iconPickerPreview');
+  if (input) input.value = iconSlug;
+  if (preview) preview.style.setProperty('--icon-url', "url('/static/icons/" + iconSlug + ".svg')");
+  closeIconPicker();
+  submitPropsForm();
+}
+
+function filterIconPickerModal(query) {
+  var q = query.trim().toLowerCase();
+  document.querySelectorAll('#iconPickerGrid .iconGalleryTile').forEach(function (tile) {
+    var match = !q || tile.dataset.iconSearch.indexOf(q) !== -1;
+    tile.classList.toggle('iconHidden', !match);
+  });
+}
+
+if (!window.__forgeIconPickerEscBound) {
+  window.__forgeIconPickerEscBound = true;
+  document.addEventListener('keydown', function (e) {
+    if (e.key === 'Escape') closeIconPicker();
+  });
+}
+
+if (!window.__forgeIconGalleryDragBound) {
+  window.__forgeIconGalleryDragBound = true;
+  var draggedIconClass = null;
+
+  document.addEventListener('dragstart', function (e) {
+    var tile = e.target.closest('.iconGalleryTile');
+    if (!tile) return;
+    draggedIconClass = tile.dataset.iconClass;
+    tile.classList.add('dragging');
+    e.dataTransfer.effectAllowed = 'copy';
+    try { e.dataTransfer.setData('text/plain', draggedIconClass); } catch (err) {}
+  });
+
+  document.addEventListener('dragend', function (e) {
+    var tile = e.target.closest('.iconGalleryTile');
+    if (tile) tile.classList.remove('dragging');
+    draggedIconClass = null;
+  });
+
+  document.addEventListener('dragover', function (e) {
+    if (!draggedIconClass || !e.target.closest('#canvas')) return;
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'copy';
+  });
+
+  document.addEventListener('drop', function (e) {
+    if (!draggedIconClass || !e.target.closest('#canvas')) return;
+    e.preventDefault();
+    addIconElement(draggedIconClass);
+    draggedIconClass = null;
+  });
+}
+
+// ---------- Surbrillance sur le canevas de l'élément sélectionné ----------
+//
+// Un élément posé DIRECTEMENT sur l'écran a déjà son cadre de sélection via
+// la classe "canvasElement.selected" (posée côté serveur). Un élément
+// imbriqué dans un conteneur/répéteur/groupe de champs n'a pas ce cadre
+// séparé — sa propre balise porte "data-element-id" (voir visible_attrs.py)
+// mais rien ne la mettait en valeur, donc sélectionner un enfant dans
+// l'arborescence ne se voyait pas du tout sur le canevas. Ce contour
+// générique cible directement cette balise, quelle que soit sa profondeur.
+function applySelectionHighlight(id) {
+  var canvas = document.getElementById('canvas');
+  if (!canvas) return;
+  canvas.querySelectorAll('.elementHighlighted').forEach(function (n) {
+    n.classList.remove('elementHighlighted');
+  });
+  if (!id) return;
+  var node = canvas.querySelector('[data-element-id="' + id + '"]');
+  if (node) node.classList.add('elementHighlighted');
+}
+
+// ---------- Élément à onglets : bascule d'onglet côté client ----------
+//
+// Un seul panneau visible à la fois (voir render_onglets.py) — basculé ici
+// plutôt que par un aller-retour serveur, pour un rendu instantané aussi
+// bien dans l'éditeur qu'en jeu (voir la même fonction dans play.html).
+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';
+  });
+}
+
+if (!window.__forgeTreeToggleBound) {
+  window.__forgeTreeToggleBound = true;
+  document.addEventListener('click', function (e) {
+    var btn = e.target.closest('.treeToggle');
+    if (!btn) return;
+    e.preventDefault();
+    e.stopPropagation();
+    var node = btn.closest('.treeNode');
+    var collapsed = node.classList.toggle('collapsed');
+    try { localStorage.setItem(treeCollapseKey(node.dataset.elementId), collapsed ? '1' : '0'); } catch (err) {}
+  });
+}
+
+restoreTreeCollapsedState();
+
+// ---------- Arborescence : réordonner ou déplacer dans un conteneur par
+// glisser-déposer ----------
+//
+// Deux gestes distincts, selon où on relâche sur une ligne cible :
+// - au-dessus/en dessous d'une ligne DU MÊME CONTENEUR (même parent, ou
+//   toutes deux à la racine) : change leur ordre (voir reorder_element.py).
+// - sur le MILIEU d'une ligne dont le widget est un conteneur (n'importe où
+//   dans l'arborescence, même un autre parent) : pose l'élément DEDANS, en
+//   dernier enfant (voir move_element_to_container.py) — c'est désormais LA
+//   façon de ranger un élément dans un conteneur (l'ancien menu dédié
+//   "Ajouter DANS ce conteneur" du panneau de propriétés a été retiré,
+//   devenu redondant avec ce geste).
+// Écouteurs posés une seule fois sur document (délégation) : ils survivent
+// au remplacement de #builder3 par refreshBuilderPanel/refreshCanvasOnly,
+// pas besoin de les rebrancher.
+var treeDragElementId = null;
+var treeDragParentId = null;
+
+function treeRowDropInfo(row) {
+  var node = row.closest('.treeNode');
+  return {
+    elementId: node ? node.dataset.elementId : null,
+    parentId: row.dataset.parentId || '',
+    isContainer: row.dataset.isContainer === '1',
+  };
+}
+
+function clearTreeDropIndicators() {
+  document.querySelectorAll('.treeRow.dropBefore, .treeRow.dropAfter, .treeRow.dropInside').forEach(function (r) {
+    r.classList.remove('dropBefore', 'dropAfter', 'dropInside');
+  });
+}
+
+// Zone touchée par le curseur dans la ligne cible : avec les frères et
+// sœurs, avant/après seulement (moitié haute/basse) ; sur un conteneur,
+// une bande centrale "dedans" s'ajoute (tiers haut/milieu/bas) — sauf si ce
+// conteneur n'est PAS un frère/sœur du même parent, où seul "dedans" a un
+// sens (il n'y a pas d'ordre à changer avec un élément d'un autre parent).
+function treeDropZone(row, clientY, sameParent, isContainer) {
+  var rect = row.getBoundingClientRect();
+  var ratio = (clientY - rect.top) / rect.height;
+  if (!sameParent) return isContainer ? 'inside' : null;
+  if (!isContainer) return ratio < 0.5 ? 'before' : 'after';
+  if (ratio < 1 / 3) return 'before';
+  if (ratio > 2 / 3) return 'after';
+  return 'inside';
+}
+
+if (!window.__forgeTreeDragBound) {
+  window.__forgeTreeDragBound = true;
+
+  document.addEventListener('dragstart', function (e) {
+    var row = e.target.closest('.elementTree .treeRow');
+    if (!row) return;
+    var info = treeRowDropInfo(row);
+    treeDragElementId = info.elementId;
+    treeDragParentId = info.parentId;
+    row.classList.add('dragging');
+    e.dataTransfer.effectAllowed = 'move';
+    try { e.dataTransfer.setData('text/plain', String(info.elementId)); } catch (err) {}
+  });
+
+  document.addEventListener('dragend', function (e) {
+    var row = e.target.closest('.elementTree .treeRow');
+    if (row) row.classList.remove('dragging');
+    clearTreeDropIndicators();
+    treeDragElementId = null;
+    treeDragParentId = null;
+  });
+
+  document.addEventListener('dragover', function (e) {
+    var row = e.target.closest('.elementTree .treeRow');
+    if (!row || treeDragElementId == null) return;
+    var info = treeRowDropInfo(row);
+    if (info.elementId == null || String(info.elementId) === String(treeDragElementId)) return;
+    var sameParent = info.parentId === treeDragParentId;
+    var zone = treeDropZone(row, e.clientY, sameParent, info.isContainer);
+    if (!zone) return;
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'move';
+    clearTreeDropIndicators();
+    row.classList.add(zone === 'before' ? 'dropBefore' : zone === 'after' ? 'dropAfter' : 'dropInside');
+  });
+
+  document.addEventListener('drop', function (e) {
+    var row = e.target.closest('.elementTree .treeRow');
+    clearTreeDropIndicators();
+    if (!row || treeDragElementId == null) return;
+    var info = treeRowDropInfo(row);
+    if (info.elementId == null || String(info.elementId) === String(treeDragElementId)) return;
+    var sameParent = info.parentId === treeDragParentId;
+    var zone = treeDropZone(row, e.clientY, sameParent, info.isContainer);
+    if (!zone) return;
+    e.preventDefault();
+    var draggedId = treeDragElementId;
+    if (zone === 'inside') {
+      fetch('/game/' + GAME_SLUG + '/elements/' + draggedId + '/move-to-container', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ parent_id: info.elementId })
+      }).then(refreshAfterReorder);
+    } else {
+      fetch('/game/' + GAME_SLUG + '/elements/' + draggedId + '/reorder', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ target_id: info.elementId, position: zone })
+      }).then(refreshAfterReorder);
+    }
+  });
+}
+
+function refreshAfterReorder() {
+  var url = SCREEN_EDIT_URL + (CURRENT_SELECTED_ID ? ('?selected=' + CURRENT_SELECTED_ID) : '');
+  return fetch(url, { headers: { 'X-Requested-With': 'pjax' } })
+    .then(function (r) { return r.text(); })
+    .then(function (html) {
+      var doc = new DOMParser().parseFromString(html, 'text/html');
+      var newCanvas = doc.getElementById('canvas');
+      var curCanvas = document.getElementById('canvas');
+      if (newCanvas && curCanvas) {
+        curCanvas.innerHTML = newCanvas.innerHTML;
+        applySelectionHighlight(CURRENT_SELECTED_ID);
+      }
+      var newTree = doc.querySelector('#panelLeftFloat .elementTree');
+      var curTree = document.querySelector('#panelLeftFloat .elementTree');
+      if (newTree && curTree) { curTree.innerHTML = newTree.innerHTML; }
+      restoreTreeCollapsedState();
+    });
+}
+
+// ---------- Navigation dans l'éditeur sans AUCUN rechargement de page ----------
+//
+// Se déplacer dans le canevas (glisser, redimensionner, cliquer un autre
+// élément) et modifier les réglages d'un élément ne doivent jamais recharger
+// la page : on va chercher en arrière-plan (fetch) uniquement le fragment
+// HTML dont on a besoin (le bloc #builder3 en entier pour changer de
+// sélection, ou juste #canvas pour refléter un changement visuel après une
+// sauvegarde automatique) et on le remplace dans le DOM courant. L'URL
+// (?selected=...) reste mise à jour via l'historique (pushState), pour que
+// le bouton "précédent" du navigateur continue à fonctionner normalement.
+
+function refreshBuilderPanel(selectedId) {
+  var url = SCREEN_EDIT_URL + "?selected=" + selectedId;
+  return fetch(url, { headers: { "X-Requested-With": "pjax" } })
+    .then(function (r) { return r.text().then(function (html) { return { html: html, url: r.url || url }; }); })
+    .then(function (result) {
+      var doc = new DOMParser().parseFromString(result.html, "text/html");
+      var newBuilder = doc.getElementById("builder3");
+      var curBuilder = document.getElementById("builder3");
+      if (newBuilder && curBuilder) {
+        curBuilder.innerHTML = newBuilder.innerHTML;
+      }
+      CURRENT_SELECTED_ID = selectedId;
+      history.pushState({ pjax: true }, "", result.url);
+      initBuilderPanel();
+    })
+    .catch(function () {
+      // Échec réseau : on retombe sur une vraie navigation plutôt que de
+      // laisser l'éditeur dans un état incohérent.
+      window.location.href = url;
+    });
+}
+
+function refreshCanvasOnly() {
+  if (!CURRENT_SELECTED_ID) return Promise.resolve();
+  var url = SCREEN_EDIT_URL + "?selected=" + CURRENT_SELECTED_ID;
+  return fetch(url, { headers: { "X-Requested-With": "pjax" } })
+    .then(function (r) { return r.text(); })
+    .then(function (html) {
+      var doc = new DOMParser().parseFromString(html, "text/html");
+      var newCanvas = doc.getElementById("canvas");
+      var curCanvas = document.getElementById("canvas");
+      if (newCanvas && curCanvas) {
+        curCanvas.innerHTML = newCanvas.innerHTML;
+        applySelectionHighlight(CURRENT_SELECTED_ID);
+      }
+      // Aperçu du contenu dans l'arborescence de gauche (ex: texte tronqué) —
+      // sans toucher au panneau de droite, pour ne jamais faire perdre le
+      // focus/curseur pendant qu'on modifie un réglage.
+      var newTree = doc.querySelector('#panelLeftFloat .elementTree');
+      var curTree = document.querySelector('#panelLeftFloat .elementTree');
+      if (newTree && curTree) { curTree.innerHTML = newTree.innerHTML; restoreTreeCollapsedState(); }
+    });
+}
+
+function goToSelected(id) {
+  return refreshBuilderPanel(id);
+}
+
+// ---------- Glisser-déposer / redimensionner sur le canevas ----------
+//
+// Un mousedown qui bouge de plus de quelques pixels déplace l'élément
+// (position sauvegardée en arrière-plan à la fin, sans recharger la page —
+// comme l'élément déplacé reste celui déjà sélectionné, on se contente de
+// mettre à jour les champs X/Y/Largeur/Hauteur en local, rien d'autre à
+// rafraîchir) ; un mousedown qui ne bouge pas est traité comme un simple
+// clic de sélection (qui, lui, doit rafraîchir le panneau de droite pour
+// afficher les réglages du nouvel élément choisi).
+function onElementMouseDown(e, id) {
+  if (e.target.classList.contains('resizeHandle')) return;
+  e.preventDefault();
+  var el = document.getElementById('el-' + id);
+  var canvas = document.getElementById('canvas');
+  var rect = canvas.getBoundingClientRect();
+  var startX = e.clientX, startY = e.clientY;
+  var startLeft = parseFloat(el.style.left), startTop = parseFloat(el.style.top);
+  var width = parseFloat(el.style.width), height = parseFloat(el.style.height);
+  var moved = false;
+  // Un clic (sans glisser) sélectionne l'élément précis qu'on a touché —
+  // même s'il est physiquement imbriqué dans ce conteneur — pour éviter de
+  // devoir repasser par l'arborescence à chaque fois. Le glisser-déposer,
+  // lui, reste toujours celui de la boîte de plus haut niveau (id).
+  var clickedTarget = e.target.closest('[data-element-id]');
+  var clickedId = clickedTarget ? clickedTarget.dataset.elementId : id;
+
+  function onMove(ev) {
+    var dx = ev.clientX - startX, dy = ev.clientY - startY;
+    if (Math.abs(dx) > 3 || Math.abs(dy) > 3) moved = true;
+    var newLeft = Math.max(0, Math.min(100 - width, startLeft + (dx / rect.width) * 100));
+    var newTop = Math.max(0, Math.min(100 - height, startTop + (dy / rect.height) * 100));
+    el.style.left = newLeft + '%';
+    el.style.top = newTop + '%';
+  }
+  function onUp() {
+    document.removeEventListener('mousemove', onMove);
+    document.removeEventListener('mouseup', onUp);
+    if (moved) {
+      var newLeft = parseFloat(el.style.left), newTop = parseFloat(el.style.top);
+      updatePosFields(newLeft, newTop, width, height);
+      saveGeometry(id, newLeft, newTop, width, height);
+    } else if (String(clickedId) !== String(CURRENT_SELECTED_ID)) {
+      goToSelected(clickedId);
+    }
+  }
+  document.addEventListener('mousemove', onMove);
+  document.addEventListener('mouseup', onUp);
+}
+
+function onResizeMouseDown(e, id) {
+  e.stopPropagation();
+  e.preventDefault();
+  var el = document.getElementById('el-' + id);
+  var canvas = document.getElementById('canvas');
+  var rect = canvas.getBoundingClientRect();
+  var startX = e.clientX, startY = e.clientY;
+  var startWidth = parseFloat(el.style.width), startHeight = parseFloat(el.style.height);
+  var left = parseFloat(el.style.left), top = parseFloat(el.style.top);
+
+  function onMove(ev) {
+    var dx = ev.clientX - startX, dy = ev.clientY - startY;
+    var newWidth = Math.max(5, Math.min(100 - left, startWidth + (dx / rect.width) * 100));
+    var newHeight = Math.max(5, Math.min(100 - top, startHeight + (dy / rect.height) * 100));
+    el.style.width = newWidth + '%';
+    el.style.height = newHeight + '%';
+  }
+  function onUp() {
+    document.removeEventListener('mousemove', onMove);
+    document.removeEventListener('mouseup', onUp);
+    var newWidth = parseFloat(el.style.width), newHeight = parseFloat(el.style.height);
+    updatePosFields(left, top, newWidth, newHeight);
+    saveGeometry(id, left, top, newWidth, newHeight);
+  }
+  document.addEventListener('mousemove', onMove);
+  document.addEventListener('mouseup', onUp);
+}
+
+function updatePosFields(x, y, w, h) {
+  var xEl = document.getElementById('pos-x'), yEl = document.getElementById('pos-y');
+  var wEl = document.getElementById('pos-w'), hEl = document.getElementById('pos-h');
+  if (xEl) xEl.value = Math.round(x * 10) / 10;
+  if (yEl) yEl.value = Math.round(y * 10) / 10;
+  if (wEl) wEl.value = Math.round(w * 10) / 10;
+  if (hEl) hEl.value = Math.round(h * 10) / 10;
+}
+
+// ---------- Panneau de propriétés : tout est enregistré automatiquement ----------
+//
+// Il n'y a plus de bouton "Enregistrer" : chaque réglage se sauvegarde tout
+// seul dès qu'on le change (immédiatement pour une case à cocher/couleur/
+// liste déroulante, après une courte pause pour un champ texte ou un
+// slider qu'on est en train de glisser, pour éviter d'envoyer une requête à
+// chaque caractère tapé ou à chaque pixel de glissement).
+var autosaveTimer = null;
+var autosaveIndicator = null;
+
+function flashAutosave(state) {
+  if (!autosaveIndicator) return;
+  autosaveIndicator.classList.remove('saving', 'saved');
+  if (state === 'saving') {
+    autosaveIndicator.textContent = 'Enregistrement...';
+    autosaveIndicator.classList.add('saving');
+  } else {
+    autosaveIndicator.textContent = 'Enregistré automatiquement ✓';
+    autosaveIndicator.classList.add('saved');
+  }
+}
+
+function submitPropsForm() {
+  var form = document.getElementById('propsForm');
+  if (!form) return Promise.resolve();
+  flashAutosave('saving');
+  var data = new FormData(form);
+  return fetch(form.getAttribute('action'), {
+    method: 'POST', body: data, headers: { "X-Requested-With": "pjax" }
+  }).then(function () {
+    flashAutosave('saved');
+    return refreshCanvasOnly();
+  });
+}
+
+function debouncedSubmitPropsForm() {
+  clearTimeout(autosaveTimer);
+  autosaveTimer = setTimeout(submitPropsForm, 500);
+}
+
+// Insère "{{champ}}" à l'emplacement du curseur dans le champ "Contenu"
+// (voir controls_with_values.py, control["field_options"] posé une fois
+// "Lier à un objet de données" réglé) — évite d'avoir à taper la syntaxe
+// à la main sans savoir quels noms de champs existent. OPEN/CLOSE en deux
+// morceaux : Jinja interpréterait "{{"/"}}" littéralement adjacents dans
+// le SOURCE de ce template comme le début d'une expression s'il les
+// rencontrait tels quels (même à l'intérieur d'un <script>), voir la même
+// astuce pour _FILTER_REF_OPEN/_FILTER_REF_CLOSE plus bas.
+function insertFieldAtCursor(fieldId, pickerId) {
+  var field = document.getElementById(fieldId);
+  var picker = document.getElementById(pickerId);
+  if (!field || !picker || !picker.value) return;
+  var open = '{' + '{', close = '}' + '}';
+  var text = open + picker.value + close;
+  var start = field.selectionStart || 0, end = field.selectionEnd || 0;
+  field.value = field.value.substring(0, start) + text + field.value.substring(end);
+  var newPos = start + text.length;
+  field.focus();
+  field.setSelectionRange(newPos, newPos);
+  field.dispatchEvent(new Event('input', { bubbles: true }));
+  picker.value = '';
+}
+
+function bindPropsAutosave() {
+  var form = document.getElementById('propsForm');
+  autosaveIndicator = document.getElementById('autosaveStatus');
+  if (!form) return;
+  form.querySelectorAll('input, textarea, select').forEach(function (field) {
+    if (field.classList.contains('uploadInput')) return; // géré séparément (upload de fichier)
+    var debounced = field.type === 'text' || field.type === 'range' || field.tagName === 'TEXTAREA';
+    field.addEventListener(debounced ? 'input' : 'change', function () {
+      // Le bascule visuelle de l'alignement (case active) est déjà gérée
+      // par l'attribut onchange="syncAlign(this)" posé sur chaque radio.
+      if (debounced) debouncedSubmitPropsForm(); else submitPropsForm();
+    });
+  });
+}
diff --git a/templates/screen_edit.html b/templates/screen_edit.html
index 14e27d9f..c5a15e26 100644
--- a/templates/screen_edit.html
+++ b/templates/screen_edit.html
@@ -1049,2264 +1049,55 @@
 
 
 <script>
-function saveGeometry(id, x, y, width, height) {
-  return fetch("/game/{{ game.slug }}/elements/" + id + "/geometry", {
-    method: 'POST',
-    headers: {'Content-Type': 'application/json'},
-    body: JSON.stringify({x: x, y: y, width: width, height: height})
-  });
-}
-
-var SCREEN_EDIT_URL = "{{ url_for('screen_edit', slug=game.slug, screen_id=screen.id) }}";
-var CURRENT_SELECTED_ID = {{ selected_id or 'null' }};
-var GAME_SLUG = "{{ game.slug }}";
-var SCREEN_ID = {{ screen.id }};
-
-// ---------- Menu contextuel (clic droit) de l'arborescence des éléments ----------
-//
-// Une seule action pour l'instant : dupliquer l'élément dans son conteneur
-// actuel (même parent, ou même écran si posé directement dessus) — voir
-// screens/elements/duplicate_element.py. La duplication passe par un vrai
-// <form method="post"> soumis dynamiquement : pjax.js intercepte tous les
-// formulaires internes, donc pas besoin de gérer le fetch/la redirection
-// nous-mêmes ici.
-var contextMenuElementId = null;
-
-function showElementContextMenu(event, elementId) {
-  event.preventDefault();
-  contextMenuElementId = elementId;
-  var menu = document.getElementById('elementContextMenu');
-  menu.style.left = event.pageX + 'px';
-  menu.style.top = event.pageY + 'px';
-  menu.style.display = 'block';
-  return false;
-}
-
-function hideElementContextMenu() {
-  var menu = document.getElementById('elementContextMenu');
-  if (menu) menu.style.display = 'none';
-  contextMenuElementId = null;
-}
-
-function contextMenuDuplicate() {
-  var id = contextMenuElementId;
-  hideElementContextMenu();
-  if (!id) return;
-  var form = document.createElement('form');
-  form.method = 'post';
-  form.action = '/game/' + GAME_SLUG + '/elements/' + id + '/duplicate';
-  document.body.appendChild(form);
-  form.requestSubmit();
-}
-
-if (!window.__forgeContextMenuBound) {
-  window.__forgeContextMenuBound = true;
-  document.addEventListener('click', function (e) {
-    var menu = document.getElementById('elementContextMenu');
-    if (menu && menu.style.display === 'block' && !menu.contains(e.target)) hideElementContextMenu();
-  });
-  document.addEventListener('scroll', hideElementContextMenu, true);
-}
-
-// ---------- Arborescence : replier/déplier un conteneur ----------
-//
-// Le triangle (.treeToggle) replie/déplie SANS toucher à la sélection : le
-// nom de l'élément reste un lien à part (.treeRowLink) qui, lui, sélectionne
-// toujours l'élément et affiche ses réglages — cliquer sur un conteneur
-// replié donne donc bien accès à ses propriétés, comme demandé. L'état
-// replié/déplié est mémorisé par élément dans localStorage pour survivre à
-// un changement de sélection ou un rechargement de l'éditeur.
-function treeCollapseKey(nodeId) {
-  return 'forgeTreeCollapsed:' + GAME_SLUG + ':' + SCREEN_ID + ':' + nodeId;
-}
-
-function restoreTreeCollapsedState() {
-  document.querySelectorAll('.elementTree .treeNode').forEach(function (node) {
-    var id = node.dataset.elementId;
-    var collapsed = false;
-    try { collapsed = localStorage.getItem(treeCollapseKey(id)) === '1'; } catch (e) {}
-    node.classList.toggle('collapsed', collapsed);
-  });
-}
-
-// ---------- Panneaux gauche/droite : flottants, déplaçables, fermables ----------
-//
-// Sortis du flux (position:fixed en CSS) pour ne jamais rétrécir le canevas
-// selon où on les pose — les fermer libère cette largeur pour une
-// prévisualisation plus fidèle à ce que "Jouer" affiche réellement (voir
-// bug remonté : des panneaux trop larges réduisaient le canevas au point de
-// casser la mise en page des onglets). Un seul jeu de fonctions génériques
-// (key = identifiant court mémorisé dans localStorage, distinct par
-// panneau) plutôt qu'une copie par panneau. Position et état ouvert/fermé
-// survivent à un changement de sélection (qui remplace tout #builder3, voir
-// refreshBuilderPanel) ou un rechargement — voir les appels à
-// restoreFloatPanelState() dans initBuilderPanel().
-function floatPanelStateKey(key) {
-  return 'forgeFloatPanel:' + GAME_SLUG + ':' + SCREEN_ID + ':' + key;
-}
-
-function saveFloatPanelState(key, state) {
-  try {
-    var current = JSON.parse(localStorage.getItem(floatPanelStateKey(key)) || '{}');
-    localStorage.setItem(floatPanelStateKey(key), JSON.stringify(Object.assign(current, state)));
-  } catch (e) {}
-}
-
-function loadFloatPanelState(key) {
-  try { return JSON.parse(localStorage.getItem(floatPanelStateKey(key)) || '{}'); } catch (e) { return {}; }
-}
-
-function restoreFloatPanelState(key, panelId, reopenBtnId) {
-  var panel = document.getElementById(panelId);
-  var reopenBtn = document.getElementById(reopenBtnId);
-  if (!panel) return;
-  var state = loadFloatPanelState(key);
-  if (state.left != null && state.top != null) {
-    panel.style.left = state.left + 'px';
-    panel.style.top = state.top + 'px';
-    panel.style.right = 'auto';
-  }
-  var open = state.open !== false; // ouvert par défaut tant que rien n'a été fermé
-  panel.classList.toggle('hidden', !open);
-  if (reopenBtn) reopenBtn.classList.toggle('visible', !open);
-}
-
-function closeFloatPanel(key, panelId, reopenBtnId) {
-  var panel = document.getElementById(panelId);
-  var reopenBtn = document.getElementById(reopenBtnId);
-  if (panel) panel.classList.add('hidden');
-  if (reopenBtn) reopenBtn.classList.add('visible');
-  saveFloatPanelState(key, { open: false });
-}
-
-function openFloatPanel(key, panelId, reopenBtnId) {
-  var panel = document.getElementById(panelId);
-  var reopenBtn = document.getElementById(reopenBtnId);
-  if (panel) panel.classList.remove('hidden');
-  if (reopenBtn) reopenBtn.classList.remove('visible');
-  saveFloatPanelState(key, { open: true });
-}
-
-// Raccourcis utilisés directement par les attributs onclick du gabarit.
-function closePropsPanel() { closeFloatPanel('props', 'propsPanelFloat', 'propsPanelReopenBtn'); }
-function openPropsPanel() { openFloatPanel('props', 'propsPanelFloat', 'propsPanelReopenBtn'); }
-function closeLeftPanel() { closeFloatPanel('left', 'panelLeftFloat', 'panelLeftReopenBtn'); }
-function openLeftPanel() { openFloatPanel('left', 'panelLeftFloat', 'panelLeftReopenBtn'); }
-
-if (!window.__forgeFloatPanelDragBound) {
-  window.__forgeFloatPanelDragBound = true;
-  document.addEventListener('mousedown', function (e) {
-    var handle = e.target.closest('.floatPanelHeader');
-    if (!handle || e.target.closest('button')) return;
-    var panel = document.getElementById(handle.dataset.dragPanel);
-    var key = handle.dataset.dragKey;
-    if (!panel) return;
-    var rect = panel.getBoundingClientRect();
-    var startX = e.clientX, startY = e.clientY;
-    var startLeft = rect.left, startTop = rect.top;
-    panel.style.right = 'auto';
-    function onMove(ev) {
-      var maxLeft = window.innerWidth - panel.offsetWidth - 4;
-      var maxTop = window.innerHeight - 40;
-      var left = Math.max(4, Math.min(maxLeft, startLeft + (ev.clientX - startX)));
-      var top = Math.max(4, Math.min(maxTop, startTop + (ev.clientY - startY)));
-      panel.style.left = left + 'px';
-      panel.style.top = top + 'px';
-    }
-    function onUp() {
-      document.removeEventListener('mousemove', onMove);
-      document.removeEventListener('mouseup', onUp);
-      saveFloatPanelState(key, { left: parseFloat(panel.style.left), top: parseFloat(panel.style.top) });
-    }
-    document.addEventListener('mousemove', onMove);
-    document.addEventListener('mouseup', onUp);
-  });
-}
-
-// ---------- Galerie d'icônes Font Awesome (panneau de propriétés) ----------
-//
-// Cliquer une tuile l'ajoute directement (comme n'importe quelle tuile de
-// "Ajouter un élément sur l'écran") ; la glisser jusque sur le canevas fait
-// la même chose au relâchement — le drag HTML5 natif ne permet pas de créer
-// un vrai élément positionné exactement sous le curseur sans aller-retour
-// serveur supplémentaire, donc on se contente ici de déclencher le même
-// ajout "à la position par défaut" que le clic, l'utilisateur repositionne
-// ensuite comme pour tout nouvel élément.
-function addIconElement(iconClass) {
-  var form = document.createElement('form');
-  form.method = 'post';
-  form.action = "{{ url_for('element_add', slug=game.slug, screen_id=screen.id) }}";
-  form.innerHTML =
-    '<input type="hidden" name="widget" value="icone">' +
-    '<input type="hidden" name="icon_class" value="' + iconClass.replace(/"/g, '&quot;') + '">';
-  document.body.appendChild(form);
-  form.requestSubmit();
-}
-
-function filterIconGallery(query) {
-  var q = query.trim().toLowerCase();
-  document.querySelectorAll('#iconGallery .iconGalleryTile').forEach(function (tile) {
-    var match = !q || tile.dataset.iconSearch.indexOf(q) !== -1;
-    tile.classList.toggle('iconHidden', !match);
-  });
-}
-
-// ---------- Sélecteur visuel d'icône (réglage "Icône" d'un élément déjà
-// posé) — même liste que la galerie d'ajout ci-dessus, mais choisir une
-// icône ici remplace celle de l'élément SÉLECTIONNÉ (champ caché
-// "field-icon_class") au lieu d'en créer un nouveau. ----------
-// ---------- Confirmation de suppression d'un élément (modale custom, pas
-// le confirm() natif du navigateur) — voir deleteConfirmModal plus haut.
-// Interroge element_delete_impact.py pour savoir si des nœuds de la
-// Logique de la scène seraient aussi supprimés, et l'affiche si oui,
-// avant que l'utilisateur confirme quoi que ce soit. ----------
-var _pendingDeleteForm = null;
-
-function handleDeleteElementSubmit(event, form) {
-  if (form.dataset.confirmed === '1') {
-    // Deuxième passage, après clic sur "Supprimer" dans la modale (voir
-    // confirmDeleteElement()) : laisse cette fois la soumission suivre son
-    // cours normalement (pjax.js l'intercepte comme n'importe quel autre
-    // formulaire, voir static/pjax.js).
-    form.dataset.confirmed = '';
-    return true;
-  }
-  event.preventDefault();
-  _pendingDeleteForm = form;
-  document.getElementById('deleteConfirmMessage').textContent = form.dataset.confirmMessage || 'Supprimer cet élément ?';
-  var warnEl = document.getElementById('deleteConfirmFlowWarning');
-  warnEl.style.display = 'none';
-  warnEl.textContent = '';
-  document.getElementById('deleteConfirmModal').classList.add('is-active');
-  var m = form.getAttribute('action').match(/\/elements\/(\d+)\/delete$/);
-  if (m) {
-    fetch("/game/{{ game.slug }}/elements/" + m[1] + "/delete-impact")
-      .then(function (r) { return r.json(); })
-      .then(function (data) {
-        if (!data.flow_node_count) return;
-        var n = data.flow_node_count;
-        var plural = n > 1 ? 's' : '';
-        warnEl.textContent = '⚠️ ' + n + ' connexion' + plural + ' de la Logique de la scène (déclencheur/action) utilise' +
-          (n > 1 ? 'nt' : '') + ' cet élément et sera' + (n > 1 ? 'ont' : '') + ' aussi supprimée' + plural + '.';
-        warnEl.style.display = 'block';
-      })
-      .catch(function () {});
-  }
-  return false;
-}
-
-function closeDeleteConfirmModal() {
-  var modal = document.getElementById('deleteConfirmModal');
-  if (modal) modal.classList.remove('is-active');
-  _pendingDeleteForm = null;
-}
-
-function confirmDeleteElement() {
-  if (!_pendingDeleteForm) return;
-  var form = _pendingDeleteForm;
-  _pendingDeleteForm = null;
-  closeDeleteConfirmModal();
-  form.dataset.confirmed = '1';
-  if (form.requestSubmit) form.requestSubmit(); else form.submit();
-}
-
-function openIconPicker() {
-  var modal = document.getElementById('iconPickerModal');
-  if (modal) modal.classList.add('is-active');
-}
-
-function closeIconPicker() {
-  var modal = document.getElementById('iconPickerModal');
-  if (modal) modal.classList.remove('is-active');
-}
-
-function chooseIcon(iconSlug) {
-  var input = document.getElementById('field-icon_class');
-  var preview = document.getElementById('iconPickerPreview');
-  if (input) input.value = iconSlug;
-  if (preview) preview.style.setProperty('--icon-url', "url('/static/icons/" + iconSlug + ".svg')");
-  closeIconPicker();
-  submitPropsForm();
-}
-
-function filterIconPickerModal(query) {
-  var q = query.trim().toLowerCase();
-  document.querySelectorAll('#iconPickerGrid .iconGalleryTile').forEach(function (tile) {
-    var match = !q || tile.dataset.iconSearch.indexOf(q) !== -1;
-    tile.classList.toggle('iconHidden', !match);
-  });
-}
-
-if (!window.__forgeIconPickerEscBound) {
-  window.__forgeIconPickerEscBound = true;
-  document.addEventListener('keydown', function (e) {
-    if (e.key === 'Escape') closeIconPicker();
-  });
-}
-
-if (!window.__forgeIconGalleryDragBound) {
-  window.__forgeIconGalleryDragBound = true;
-  var draggedIconClass = null;
-
-  document.addEventListener('dragstart', function (e) {
-    var tile = e.target.closest('.iconGalleryTile');
-    if (!tile) return;
-    draggedIconClass = tile.dataset.iconClass;
-    tile.classList.add('dragging');
-    e.dataTransfer.effectAllowed = 'copy';
-    try { e.dataTransfer.setData('text/plain', draggedIconClass); } catch (err) {}
-  });
-
-  document.addEventListener('dragend', function (e) {
-    var tile = e.target.closest('.iconGalleryTile');
-    if (tile) tile.classList.remove('dragging');
-    draggedIconClass = null;
-  });
-
-  document.addEventListener('dragover', function (e) {
-    if (!draggedIconClass || !e.target.closest('#canvas')) return;
-    e.preventDefault();
-    e.dataTransfer.dropEffect = 'copy';
-  });
-
-  document.addEventListener('drop', function (e) {
-    if (!draggedIconClass || !e.target.closest('#canvas')) return;
-    e.preventDefault();
-    addIconElement(draggedIconClass);
-    draggedIconClass = null;
-  });
-}
-
-// ---------- Surbrillance sur le canevas de l'élément sélectionné ----------
-//
-// Un élément posé DIRECTEMENT sur l'écran a déjà son cadre de sélection via
-// la classe "canvasElement.selected" (posée côté serveur). Un élément
-// imbriqué dans un conteneur/répéteur/groupe de champs n'a pas ce cadre
-// séparé — sa propre balise porte "data-element-id" (voir visible_attrs.py)
-// mais rien ne la mettait en valeur, donc sélectionner un enfant dans
-// l'arborescence ne se voyait pas du tout sur le canevas. Ce contour
-// générique cible directement cette balise, quelle que soit sa profondeur.
-function applySelectionHighlight(id) {
-  var canvas = document.getElementById('canvas');
-  if (!canvas) return;
-  canvas.querySelectorAll('.elementHighlighted').forEach(function (n) {
-    n.classList.remove('elementHighlighted');
-  });
-  if (!id) return;
-  var node = canvas.querySelector('[data-element-id="' + id + '"]');
-  if (node) node.classList.add('elementHighlighted');
-}
-
-// ---------- Élément à onglets : bascule d'onglet côté client ----------
-//
-// Un seul panneau visible à la fois (voir render_onglets.py) — basculé ici
-// plutôt que par un aller-retour serveur, pour un rendu instantané aussi
-// bien dans l'éditeur qu'en jeu (voir la même fonction dans play.html).
-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';
-  });
-}
-
-if (!window.__forgeTreeToggleBound) {
-  window.__forgeTreeToggleBound = true;
-  document.addEventListener('click', function (e) {
-    var btn = e.target.closest('.treeToggle');
-    if (!btn) return;
-    e.preventDefault();
-    e.stopPropagation();
-    var node = btn.closest('.treeNode');
-    var collapsed = node.classList.toggle('collapsed');
-    try { localStorage.setItem(treeCollapseKey(node.dataset.elementId), collapsed ? '1' : '0'); } catch (err) {}
-  });
-}
-
-restoreTreeCollapsedState();
-
-// ---------- Arborescence : réordonner ou déplacer dans un conteneur par
-// glisser-déposer ----------
-//
-// Deux gestes distincts, selon où on relâche sur une ligne cible :
-// - au-dessus/en dessous d'une ligne DU MÊME CONTENEUR (même parent, ou
-//   toutes deux à la racine) : change leur ordre (voir reorder_element.py).
-// - sur le MILIEU d'une ligne dont le widget est un conteneur (n'importe où
-//   dans l'arborescence, même un autre parent) : pose l'élément DEDANS, en
-//   dernier enfant (voir move_element_to_container.py) — c'est désormais LA
-//   façon de ranger un élément dans un conteneur (l'ancien menu dédié
-//   "Ajouter DANS ce conteneur" du panneau de propriétés a été retiré,
-//   devenu redondant avec ce geste).
-// Écouteurs posés une seule fois sur document (délégation) : ils survivent
-// au remplacement de #builder3 par refreshBuilderPanel/refreshCanvasOnly,
-// pas besoin de les rebrancher.
-var treeDragElementId = null;
-var treeDragParentId = null;
-
-function treeRowDropInfo(row) {
-  var node = row.closest('.treeNode');
-  return {
-    elementId: node ? node.dataset.elementId : null,
-    parentId: row.dataset.parentId || '',
-    isContainer: row.dataset.isContainer === '1',
-  };
-}
-
-function clearTreeDropIndicators() {
-  document.querySelectorAll('.treeRow.dropBefore, .treeRow.dropAfter, .treeRow.dropInside').forEach(function (r) {
-    r.classList.remove('dropBefore', 'dropAfter', 'dropInside');
-  });
-}
-
-// Zone touchée par le curseur dans la ligne cible : avec les frères et
-// sœurs, avant/après seulement (moitié haute/basse) ; sur un conteneur,
-// une bande centrale "dedans" s'ajoute (tiers haut/milieu/bas) — sauf si ce
-// conteneur n'est PAS un frère/sœur du même parent, où seul "dedans" a un
-// sens (il n'y a pas d'ordre à changer avec un élément d'un autre parent).
-function treeDropZone(row, clientY, sameParent, isContainer) {
-  var rect = row.getBoundingClientRect();
-  var ratio = (clientY - rect.top) / rect.height;
-  if (!sameParent) return isContainer ? 'inside' : null;
-  if (!isContainer) return ratio < 0.5 ? 'before' : 'after';
-  if (ratio < 1 / 3) return 'before';
-  if (ratio > 2 / 3) return 'after';
-  return 'inside';
-}
-
-if (!window.__forgeTreeDragBound) {
-  window.__forgeTreeDragBound = true;
-
-  document.addEventListener('dragstart', function (e) {
-    var row = e.target.closest('.elementTree .treeRow');
-    if (!row) return;
-    var info = treeRowDropInfo(row);
-    treeDragElementId = info.elementId;
-    treeDragParentId = info.parentId;
-    row.classList.add('dragging');
-    e.dataTransfer.effectAllowed = 'move';
-    try { e.dataTransfer.setData('text/plain', String(info.elementId)); } catch (err) {}
-  });
-
-  document.addEventListener('dragend', function (e) {
-    var row = e.target.closest('.elementTree .treeRow');
-    if (row) row.classList.remove('dragging');
-    clearTreeDropIndicators();
-    treeDragElementId = null;
-    treeDragParentId = null;
-  });
-
-  document.addEventListener('dragover', function (e) {
-    var row = e.target.closest('.elementTree .treeRow');
-    if (!row || treeDragElementId == null) return;
-    var info = treeRowDropInfo(row);
-    if (info.elementId == null || String(info.elementId) === String(treeDragElementId)) return;
-    var sameParent = info.parentId === treeDragParentId;
-    var zone = treeDropZone(row, e.clientY, sameParent, info.isContainer);
-    if (!zone) return;
-    e.preventDefault();
-    e.dataTransfer.dropEffect = 'move';
-    clearTreeDropIndicators();
-    row.classList.add(zone === 'before' ? 'dropBefore' : zone === 'after' ? 'dropAfter' : 'dropInside');
-  });
-
-  document.addEventListener('drop', function (e) {
-    var row = e.target.closest('.elementTree .treeRow');
-    clearTreeDropIndicators();
-    if (!row || treeDragElementId == null) return;
-    var info = treeRowDropInfo(row);
-    if (info.elementId == null || String(info.elementId) === String(treeDragElementId)) return;
-    var sameParent = info.parentId === treeDragParentId;
-    var zone = treeDropZone(row, e.clientY, sameParent, info.isContainer);
-    if (!zone) return;
-    e.preventDefault();
-    var draggedId = treeDragElementId;
-    if (zone === 'inside') {
-      fetch('/game/{{ game.slug }}/elements/' + draggedId + '/move-to-container', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ parent_id: info.elementId })
-      }).then(refreshAfterReorder);
-    } else {
-      fetch('/game/{{ game.slug }}/elements/' + draggedId + '/reorder', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ target_id: info.elementId, position: zone })
-      }).then(refreshAfterReorder);
-    }
-  });
-}
-
-function refreshAfterReorder() {
-  var url = SCREEN_EDIT_URL + (CURRENT_SELECTED_ID ? ('?selected=' + CURRENT_SELECTED_ID) : '');
-  return fetch(url, { headers: { 'X-Requested-With': 'pjax' } })
-    .then(function (r) { return r.text(); })
-    .then(function (html) {
-      var doc = new DOMParser().parseFromString(html, 'text/html');
-      var newCanvas = doc.getElementById('canvas');
-      var curCanvas = document.getElementById('canvas');
-      if (newCanvas && curCanvas) {
-        curCanvas.innerHTML = newCanvas.innerHTML;
-        applySelectionHighlight(CURRENT_SELECTED_ID);
-      }
-      var newTree = doc.querySelector('#panelLeftFloat .elementTree');
-      var curTree = document.querySelector('#panelLeftFloat .elementTree');
-      if (newTree && curTree) { curTree.innerHTML = newTree.innerHTML; }
-      restoreTreeCollapsedState();
-    });
-}
-
-// ---------- Navigation dans l'éditeur sans AUCUN rechargement de page ----------
-//
-// Se déplacer dans le canevas (glisser, redimensionner, cliquer un autre
-// élément) et modifier les réglages d'un élément ne doivent jamais recharger
-// la page : on va chercher en arrière-plan (fetch) uniquement le fragment
-// HTML dont on a besoin (le bloc #builder3 en entier pour changer de
-// sélection, ou juste #canvas pour refléter un changement visuel après une
-// sauvegarde automatique) et on le remplace dans le DOM courant. L'URL
-// (?selected=...) reste mise à jour via l'historique (pushState), pour que
-// le bouton "précédent" du navigateur continue à fonctionner normalement.
-
-function refreshBuilderPanel(selectedId) {
-  var url = SCREEN_EDIT_URL + "?selected=" + selectedId;
-  return fetch(url, { headers: { "X-Requested-With": "pjax" } })
-    .then(function (r) { return r.text().then(function (html) { return { html: html, url: r.url || url }; }); })
-    .then(function (result) {
-      var doc = new DOMParser().parseFromString(result.html, "text/html");
-      var newBuilder = doc.getElementById("builder3");
-      var curBuilder = document.getElementById("builder3");
-      if (newBuilder && curBuilder) {
-        curBuilder.innerHTML = newBuilder.innerHTML;
-      }
-      CURRENT_SELECTED_ID = selectedId;
-      history.pushState({ pjax: true }, "", result.url);
-      initBuilderPanel();
-    })
-    .catch(function () {
-      // Échec réseau : on retombe sur une vraie navigation plutôt que de
-      // laisser l'éditeur dans un état incohérent.
-      window.location.href = url;
-    });
-}
-
-function refreshCanvasOnly() {
-  if (!CURRENT_SELECTED_ID) return Promise.resolve();
-  var url = SCREEN_EDIT_URL + "?selected=" + CURRENT_SELECTED_ID;
-  return fetch(url, { headers: { "X-Requested-With": "pjax" } })
-    .then(function (r) { return r.text(); })
-    .then(function (html) {
-      var doc = new DOMParser().parseFromString(html, "text/html");
-      var newCanvas = doc.getElementById("canvas");
-      var curCanvas = document.getElementById("canvas");
-      if (newCanvas && curCanvas) {
-        curCanvas.innerHTML = newCanvas.innerHTML;
-        applySelectionHighlight(CURRENT_SELECTED_ID);
-      }
-      // Aperçu du contenu dans l'arborescence de gauche (ex: texte tronqué) —
-      // sans toucher au panneau de droite, pour ne jamais faire perdre le
-      // focus/curseur pendant qu'on modifie un réglage.
-      var newTree = doc.querySelector('#panelLeftFloat .elementTree');
-      var curTree = document.querySelector('#panelLeftFloat .elementTree');
-      if (newTree && curTree) { curTree.innerHTML = newTree.innerHTML; restoreTreeCollapsedState(); }
-    });
-}
-
-function goToSelected(id) {
-  return refreshBuilderPanel(id);
-}
-
-// ---------- Glisser-déposer / redimensionner sur le canevas ----------
-//
-// Un mousedown qui bouge de plus de quelques pixels déplace l'élément
-// (position sauvegardée en arrière-plan à la fin, sans recharger la page —
-// comme l'élément déplacé reste celui déjà sélectionné, on se contente de
-// mettre à jour les champs X/Y/Largeur/Hauteur en local, rien d'autre à
-// rafraîchir) ; un mousedown qui ne bouge pas est traité comme un simple
-// clic de sélection (qui, lui, doit rafraîchir le panneau de droite pour
-// afficher les réglages du nouvel élément choisi).
-function onElementMouseDown(e, id) {
-  if (e.target.classList.contains('resizeHandle')) return;
-  e.preventDefault();
-  var el = document.getElementById('el-' + id);
-  var canvas = document.getElementById('canvas');
-  var rect = canvas.getBoundingClientRect();
-  var startX = e.clientX, startY = e.clientY;
-  var startLeft = parseFloat(el.style.left), startTop = parseFloat(el.style.top);
-  var width = parseFloat(el.style.width), height = parseFloat(el.style.height);
-  var moved = false;
-  // Un clic (sans glisser) sélectionne l'élément précis qu'on a touché —
-  // même s'il est physiquement imbriqué dans ce conteneur — pour éviter de
-  // devoir repasser par l'arborescence à chaque fois. Le glisser-déposer,
-  // lui, reste toujours celui de la boîte de plus haut niveau (id).
-  var clickedTarget = e.target.closest('[data-element-id]');
-  var clickedId = clickedTarget ? clickedTarget.dataset.elementId : id;
-
-  function onMove(ev) {
-    var dx = ev.clientX - startX, dy = ev.clientY - startY;
-    if (Math.abs(dx) > 3 || Math.abs(dy) > 3) moved = true;
-    var newLeft = Math.max(0, Math.min(100 - width, startLeft + (dx / rect.width) * 100));
-    var newTop = Math.max(0, Math.min(100 - height, startTop + (dy / rect.height) * 100));
-    el.style.left = newLeft + '%';
-    el.style.top = newTop + '%';
-  }
-  function onUp() {
-    document.removeEventListener('mousemove', onMove);
-    document.removeEventListener('mouseup', onUp);
-    if (moved) {
-      var newLeft = parseFloat(el.style.left), newTop = parseFloat(el.style.top);
-      updatePosFields(newLeft, newTop, width, height);
-      saveGeometry(id, newLeft, newTop, width, height);
-    } else if (String(clickedId) !== String(CURRENT_SELECTED_ID)) {
-      goToSelected(clickedId);
-    }
-  }
-  document.addEventListener('mousemove', onMove);
-  document.addEventListener('mouseup', onUp);
-}
-
-function onResizeMouseDown(e, id) {
-  e.stopPropagation();
-  e.preventDefault();
-  var el = document.getElementById('el-' + id);
-  var canvas = document.getElementById('canvas');
-  var rect = canvas.getBoundingClientRect();
-  var startX = e.clientX, startY = e.clientY;
-  var startWidth = parseFloat(el.style.width), startHeight = parseFloat(el.style.height);
-  var left = parseFloat(el.style.left), top = parseFloat(el.style.top);
-
-  function onMove(ev) {
-    var dx = ev.clientX - startX, dy = ev.clientY - startY;
-    var newWidth = Math.max(5, Math.min(100 - left, startWidth + (dx / rect.width) * 100));
-    var newHeight = Math.max(5, Math.min(100 - top, startHeight + (dy / rect.height) * 100));
-    el.style.width = newWidth + '%';
-    el.style.height = newHeight + '%';
-  }
-  function onUp() {
-    document.removeEventListener('mousemove', onMove);
-    document.removeEventListener('mouseup', onUp);
-    var newWidth = parseFloat(el.style.width), newHeight = parseFloat(el.style.height);
-    updatePosFields(left, top, newWidth, newHeight);
-    saveGeometry(id, left, top, newWidth, newHeight);
-  }
-  document.addEventListener('mousemove', onMove);
-  document.addEventListener('mouseup', onUp);
-}
-
-function updatePosFields(x, y, w, h) {
-  var xEl = document.getElementById('pos-x'), yEl = document.getElementById('pos-y');
-  var wEl = document.getElementById('pos-w'), hEl = document.getElementById('pos-h');
-  if (xEl) xEl.value = Math.round(x * 10) / 10;
-  if (yEl) yEl.value = Math.round(y * 10) / 10;
-  if (wEl) wEl.value = Math.round(w * 10) / 10;
-  if (hEl) hEl.value = Math.round(h * 10) / 10;
-}
-
-// ---------- Panneau de propriétés : tout est enregistré automatiquement ----------
-//
-// Il n'y a plus de bouton "Enregistrer" : chaque réglage se sauvegarde tout
-// seul dès qu'on le change (immédiatement pour une case à cocher/couleur/
-// liste déroulante, après une courte pause pour un champ texte ou un
-// slider qu'on est en train de glisser, pour éviter d'envoyer une requête à
-// chaque caractère tapé ou à chaque pixel de glissement).
-var autosaveTimer = null;
-var autosaveIndicator = null;
-
-function flashAutosave(state) {
-  if (!autosaveIndicator) return;
-  autosaveIndicator.classList.remove('saving', 'saved');
-  if (state === 'saving') {
-    autosaveIndicator.textContent = 'Enregistrement...';
-    autosaveIndicator.classList.add('saving');
-  } else {
-    autosaveIndicator.textContent = 'Enregistré automatiquement ✓';
-    autosaveIndicator.classList.add('saved');
-  }
-}
-
-function submitPropsForm() {
-  var form = document.getElementById('propsForm');
-  if (!form) return Promise.resolve();
-  flashAutosave('saving');
-  var data = new FormData(form);
-  return fetch(form.getAttribute('action'), {
-    method: 'POST', body: data, headers: { "X-Requested-With": "pjax" }
-  }).then(function () {
-    flashAutosave('saved');
-    return refreshCanvasOnly();
-  });
-}
-
-function debouncedSubmitPropsForm() {
-  clearTimeout(autosaveTimer);
-  autosaveTimer = setTimeout(submitPropsForm, 500);
-}
-
-// Insère "{{champ}}" à l'emplacement du curseur dans le champ "Contenu"
-// (voir controls_with_values.py, control["field_options"] posé une fois
-// "Lier à un objet de données" réglé) — évite d'avoir à taper la syntaxe
-// à la main sans savoir quels noms de champs existent. OPEN/CLOSE en deux
-// morceaux : Jinja interpréterait "{{"/"}}" littéralement adjacents dans
-// le SOURCE de ce template comme le début d'une expression s'il les
-// rencontrait tels quels (même à l'intérieur d'un <script>), voir la même
-// astuce pour _FILTER_REF_OPEN/_FILTER_REF_CLOSE plus bas.
-function insertFieldAtCursor(fieldId, pickerId) {
-  var field = document.getElementById(fieldId);
-  var picker = document.getElementById(pickerId);
-  if (!field || !picker || !picker.value) return;
-  var open = '{' + '{', close = '}' + '}';
-  var text = open + picker.value + close;
-  var start = field.selectionStart || 0, end = field.selectionEnd || 0;
-  field.value = field.value.substring(0, start) + text + field.value.substring(end);
-  var newPos = start + text.length;
-  field.focus();
-  field.setSelectionRange(newPos, newPos);
-  field.dispatchEvent(new Event('input', { bubbles: true }));
-  picker.value = '';
-}
-
-function bindPropsAutosave() {
-  var form = document.getElementById('propsForm');
-  autosaveIndicator = document.getElementById('autosaveStatus');
-  if (!form) return;
-  form.querySelectorAll('input, textarea, select').forEach(function (field) {
-    if (field.classList.contains('uploadInput')) return; // géré séparément (upload de fichier)
-    var debounced = field.type === 'text' || field.type === 'range' || field.tagName === 'TEXTAREA';
-    field.addEventListener(debounced ? 'input' : 'change', function () {
-      // Le bascule visuelle de l'alignement (case active) est déjà gérée
-      // par l'attribut onchange="syncAlign(this)" posé sur chaque radio.
-      if (debounced) debouncedSubmitPropsForm(); else submitPropsForm();
-    });
-  });
-}
-
-// ---------- (Ré)initialisation du panneau central après chaque changement
-// de sélection — nécessaire car #builder3 est entièrement remplacé, donc
-// tout ce qui y était lié par addEventListener doit être rebranché (les
-// attributs onclick/onmousedown inline, eux, fonctionnent automatiquement
-// dès que le HTML est injecté, sans rien à refaire). ----------
-function initBuilderPanel() {
+  // Données injectées par Jinja (côté serveur) — tout le reste de l'éditeur
+  // vit maintenant dans des fichiers statiques sous static/js/screen_edit/
+  // (voir plan de modularisation : un fichier = une responsabilité, aussi
+  // pour le JS — même patron déjà en place côté moteur de jeu, voir
+  // static/js/play/), qui ne peuvent pas contenir de code Jinja puisqu'ils
+  // ne passent jamais par le moteur de templates.
+  var GAME_SLUG = "{{ game.slug }}";
+  var SCREEN_ID = {{ screen.id }};
+  var SCREEN_EDIT_URL = "{{ url_for('screen_edit', slug=game.slug, screen_id=screen.id) }}";
+  var ELEMENT_ADD_URL = "{{ url_for('element_add', slug=game.slug, screen_id=screen.id) }}";
+  var CURRENT_SELECTED_ID = {{ selected_id or 'null' }};
+  var DEFINITIONS_DATA = {{ definitions_json|safe }};
+  var FLOW_NODES_INITIAL = {{ flow_nodes_json|safe }};
+  var FLOW_EDGES_INITIAL = {{ flow_edges_json|safe }};
+  var FLOW_BLOCKS = {{ flow_blocks_json|safe }};
+  var ELEMENTS_LABELS = {{ elements_labels_json|safe }};
+  var SCREENS_MAP = {{ screens_map_json|safe }};
+  var ACTION_TYPE_LABELS_MAP = {{ action_type_labels_json|safe }};
+  var ELEMENT_PROPERTY_LABELS_MAP = {{ element_action_property_labels_json|safe }};
+  var ELEMENT_VISIBILITY_LABELS_MAP = {{ element_visibility_labels_json|safe }};
+  var ELEMENT_SURBRILLANCE_LABELS_MAP = {{ element_surbrillance_labels_json|safe }};
+  var ELEMENT_DESACTIVE_LABELS_MAP = {{ element_desactive_labels_json|safe }};
+  var DATA_OPERATION_LABELS_MAP = {{ data_operation_labels_json|safe }};
+  var CONDITION_OPERATOR_LABELS_MAP = {{ condition_operator_labels_json|safe }};
+  var TRIGGER_LABELS_MAP = {{ trigger_labels_json|safe }};
+  var CUSTOM_EVENTS_MAP = {{ custom_events_map_json|safe }};
+  var ANIM_CLIPS = {{ animation_clips_json|safe }};
+  var ANIMATE_CSS_LABELS = {{ animate_css_labels_json|safe }};
+</script>
+<script src="{{ url_for('static', filename='js/screen_edit/tree-panels.js') }}"></script>
+<script src="{{ url_for('static', filename='js/screen_edit/panel-init.js') }}"></script>
+<script src="{{ url_for('static', filename='js/screen_edit/flow-editor.js') }}"></script>
+<script src="{{ url_for('static', filename='js/screen_edit/tabs-and-blocks.js') }}"></script>
+<script src="{{ url_for('static', filename='js/screen_edit/animation-timeline.js') }}"></script>
+<script>
+  // Onglet initial : ?tab=... (utilisé par les routes de CRUD des
+  // événements/blocs, pour revenir directement sur le bon onglet après
+  // création/modification/suppression plutôt que de laisser deviner où
+  // cliquer — même patron que game_dashboard.html). ?block=<id> ouvre en
+  // plus directement le bloc concerné (même idiome que ?edit=&subtab= dans
+  // game_dashboard.html). Reste inline (pas dans un fichier statique) :
+  // dépend directement de request.args, données Jinja propres à cette
+  // requête, et doit s'exécuter APRÈS les fichiers ci-dessus (switchBuilderTab/
+  // openLogicBlockPanel doivent déjà être définis).
   (function () {
-    var xEl = document.getElementById('pos-x'), yEl = document.getElementById('pos-y');
-    var wEl = document.getElementById('pos-w'), hEl = document.getElementById('pos-h');
-    // pos-w/pos-h n'existent pas pour un élément posé dans un conteneur (sa
-    // taille se règle via les champs "Largeur/Hauteur (%)"/"fixe (px)" du
-    // formulaire général à la place, voir size_ctrls plus haut) — X/Y non
-    // plus, mais ils restent dans le DOM (juste désactivés) pour cet élément.
-    if (!xEl || !wEl) return;
-    function apply() {
-      var canvasEl = document.getElementById('el-' + CURRENT_SELECTED_ID);
-      var x = parseFloat(xEl.value) || 0, y = parseFloat(yEl.value) || 0;
-      var w = parseFloat(wEl.value) || 1, h = parseFloat(hEl.value) || 1;
-      if (canvasEl) {
-        canvasEl.style.left = x + '%'; canvasEl.style.top = y + '%';
-        canvasEl.style.width = w + '%'; canvasEl.style.height = h + '%';
-      }
-      saveGeometry(CURRENT_SELECTED_ID, x, y, w, h);
-    }
-    [xEl, yEl, wEl, hEl].forEach(function (el) { el.addEventListener('change', apply); });
+    var requestedTab = {{ (request.args.get('tab') or '')|tojson }};
+    if (requestedTab) switchBuilderTab(requestedTab);
+    var requestedBlock = {{ request.args.get('block', type=int)|tojson }};
+    if (requestedBlock) openLogicBlockPanel(requestedBlock);
   })();
-
-  bindAspectButtons();
-
-  document.querySelectorAll('.uploadInput').forEach(function (input) {
-    input.addEventListener('change', function () {
-      if (!input.files.length) return;
-      var status = input.parentElement.querySelector('.uploadStatus');
-      var targetField = document.getElementById(input.dataset.target);
-      status.textContent = 'Envoi en cours...';
-      var data = new FormData();
-      data.append('file', input.files[0]);
-      fetch("/game/{{ game.slug }}/upload", { method: 'POST', body: data })
-        .then(function (r) { return r.json(); })
-        .then(function (json) {
-          if (json.url) {
-            targetField.value = json.url;
-            status.textContent = 'Fichier envoyé ✓ Enregistrement...';
-            // Enregistre tout de suite, comme n'importe quel autre réglage —
-            // un fichier envoyé ne doit jamais rester "en attente".
-            submitPropsForm().then(function () { status.textContent = 'Fichier envoyé ✓ Enregistré.'; });
-          }
-          else { status.textContent = "Échec de l'envoi."; }
-        })
-        .catch(function () { status.textContent = "Échec de l'envoi."; });
-    });
-  });
-
-  bindPropsAutosave();
-  bindJaugeDefinitionSelect();
-  bindDefinitionFieldSelects('field-definition_id', ['field-filtre_champ', 'field-filtre2_champ']);
-  bindDefinitionFieldSelects('field-visibilite_cond_definition_id', ['field-visibilite_cond_champ']);
-  bindClauseListDefinitionSelect('field-data_definition_id');
-  bindClauseListRows();
-  initFilterValuePickers();
-  var visCondModeSel = document.getElementById('field-visibilite_cond_mode');
-  if (visCondModeSel) toggleVisCondFields(visCondModeSel);
-  restoreTreeCollapsedState();
-  applySelectionHighlight(CURRENT_SELECTED_ID);
-  restoreFloatPanelState('props', 'propsPanelFloat', 'propsPanelReopenBtn');
-  restoreFloatPanelState('left', 'panelLeftFloat', 'panelLeftReopenBtn');
-}
-
-// Jauge : quand on change l'objet de données à suivre SANS quitter le
-// panneau (donc sans le rechargement serveur qui repeuplerait row_id/champ/
-// champ_nom via controls_with_values.py), on reconstruit ces trois menus à
-// la volée à partir de DEFINITIONS_DATA (même source que les formulaires de
-// la Logique de la scène, voir onFlowDefinitionChange). DEFINITIONS_DATA
-// est déclaré plus bas dans ce script (donc encore "undefined" au moment où
-// initBuilderPanel() tourne en tout premier) — sans conséquence ici,
-// puisqu'on ne le lit que dans le gestionnaire, jamais au moment du bind.
-// Libellé d'un champ dans une liste déroulante — précise l'objet visé pour
-// un champ "relation" (ex. "parcour (→ parcours)"), même règle que
-// _field_label() côté Python (controls_with_values.py).
-function fieldOptionLabel(f) {
-  return (f.type === 'relation' && f.relation_definition_name) ? (f.name + ' (→ ' + f.relation_definition_name + ')') : f.name;
-}
-
-function bindJaugeDefinitionSelect() {
-  var defSel = document.getElementById('field-definition_id');
-  var rowSel = document.getElementById('field-row_id');
-  var champSel = document.getElementById('field-champ');
-  var champNomSel = document.getElementById('field-champ_nom');
-  if (!defSel || !rowSel || !champSel || !champNomSel) return; // pas la Jauge
-  defSel.addEventListener('change', function () {
-    var info = (DEFINITIONS_DATA || {})[defSel.value] || { rows: [], fields: [] };
-    rowSel.innerHTML = info.rows.length
-      ? info.rows.map(function (r) { return '<option value="' + r.id + '">' + r.label + '</option>'; }).join('')
-      : '<option value="">Aucune donnée dans cet objet</option>';
-    // La Jauge affiche une valeur/un nom tel quel — un champ "relation" (un
-    // id, pas une valeur) n'a pas sa place ici, même exclusion que côté
-    // serveur (voir controls_with_values.py).
-    var simpleFields = info.fields.filter(function (f) { return f.type !== 'relation'; });
-    var fieldOptions = simpleFields.map(function (f) { return '<option value="' + f.name + '">' + f.name + '</option>'; }).join('');
-    champSel.innerHTML = fieldOptions || '<option value="">Aucun champ simple</option>';
-    champNomSel.innerHTML = '<option value="">— aucun —</option>' + fieldOptions;
-  });
-}
-
-// ---------- Réglages "champ" d'un filtre (Répéteur/Donnée liée) : listes
-// déroulantes peuplées avec les VRAIS champs de l'objet choisi, jamais
-// tapées à la main — même principe que bindJaugeDefinitionSelect() ci-dessus,
-// généralisé pour s'appliquer à un nombre quelconque de listes "champ"
-// rattachées à un même sélecteur d'objet (ici : filtre_champ + filtre2_champ,
-// ou data_filtre_champ + data_filtre2_champ). ----------
-// ---------- Condition de visibilité (voir VISIBILITY_CONDITION_CONTROLS) :
-// n'affiche que les réglages pertinents pour le mode choisi (variable
-// globale, ou champ d'un objet) — les deux autres restent en base (peu
-// importe, seul le mode courant est lu par is_element_visible()) mais sont
-// masqués pour ne pas embrouiller. ----------
-function toggleVisCondFields(sel) {
-  var mode = sel.value;
-  document.querySelectorAll('.visCondRow').forEach(function (row) {
-    var scope = row.dataset.visCondScope;
-    var show = scope === 'any' ? !!mode : scope === mode;
-    row.style.display = show ? '' : 'none';
-  });
-}
-
-function bindDefinitionFieldSelects(defSelId, fieldSelIds) {
-  var defSel = document.getElementById(defSelId);
-  if (!defSel) return;
-  var fieldSels = fieldSelIds.map(function (id) { return document.getElementById(id); }).filter(Boolean);
-  if (!fieldSels.length) return;
-  defSel.addEventListener('change', function () {
-    var info = (DEFINITIONS_DATA || {})[defSel.value] || { fields: [] };
-    var opts = '<option value="">(sélectionner un objet d\'abord)</option>' +
-      info.fields.map(function (f) { return '<option value="' + f.name + '">' + fieldOptionLabel(f) + '</option>'; }).join('');
-    fieldSels.forEach(function (sel) { sel.innerHTML = opts; });
-  });
-}
-
-// ---------- "Donnée liée" : liste de conditions ILLIMITÉE (champ/opérateur/
-// valeur), combinées entre elles par ET/OU (voir c_clause_list.py,
-// save_element_controls.py, resolve_bound_row.py). Chaque ligne existante
-// est rendue côté serveur (au chargement du panneau) ; "+ Ajouter une
-// condition" clone un <template> pour en ajouter de nouvelles à la volée,
-// sans aller-retour serveur — même principe que "fieldsList"/"varValueRows"
-// ailleurs dans l'outil. ----------
-function wireClauseRow(row, key) {
-  row.querySelectorAll('input, select').forEach(function (field) {
-    var debounced = field.tagName === 'INPUT';
-    field.addEventListener(debounced ? 'input' : 'change', function () {
-      if (debounced) debouncedSubmitPropsForm(); else submitPropsForm();
-    });
-  });
-  var removeBtn = row.querySelector('.clauseRemoveBtn');
-  if (removeBtn) {
-    removeBtn.addEventListener('click', function () {
-      row.remove();
-      updateClauseCombinatorVisibility(key);
-      submitPropsForm();
-    });
-  }
-}
-
-function updateClauseCombinatorVisibility(key) {
-  var wrap = document.getElementById('clauseListWrap-' + key);
-  var combRow = document.getElementById('clauseCombinatorRow-' + key);
-  if (!wrap || !combRow) return;
-  combRow.style.display = wrap.querySelectorAll('.clauseRow').length > 1 ? '' : 'none';
-}
-
-function addClauseRow(key) {
-  var tmpl = document.getElementById('clauseRowTemplate-' + key);
-  var wrap = document.getElementById('clauseListWrap-' + key);
-  if (!tmpl || !wrap) return;
-  var clone = tmpl.content.cloneNode(true);
-  var row = clone.querySelector('.clauseRow');
-  wireClauseRow(row, key);
-  wrap.appendChild(clone);
-  // Repeuple tout de suite son sélecteur "Champ" avec les VRAIS champs de
-  // l'objet déjà choisi (sans ça, une ligne ajoutée après coup resterait
-  // bloquée sur "(sélectionner un objet d'abord)" même si un objet est
-  // déjà réglé plus haut dans le panneau).
-  var defSel = document.getElementById('field-data_definition_id');
-  if (defSel && defSel.value) defSel.dispatchEvent(new Event('change'));
-  // Initialise le sélecteur de valeur (fixe/dynamique/variable) de cette
-  // nouvelle ligne — sans effet sur les lignes déjà initialisées.
-  initFilterValuePickers();
-  updateClauseCombinatorVisibility(key);
-  submitPropsForm();
-}
-
-// Rebranche les lignes déjà rendues par le serveur (rechargement du
-// panneau, ex. sélection d'un autre élément) — les lignes ajoutées EN
-// COURS de session par addClauseRow() se branchent déjà elles-mêmes.
-function bindClauseListRows() {
-  document.querySelectorAll('.clauseListControl').forEach(function (control) {
-    var key = control.dataset.clauseKey;
-    control.querySelectorAll('.clauseRow').forEach(function (row) { wireClauseRow(row, key); });
-  });
-}
-
-// Repeuple le sélecteur "champ" de TOUTES les lignes de condition actuelles
-// (interrogées à chaque changement, donc couvre aussi les lignes ajoutées
-// après coup) quand on change l'objet lié — même principe que
-// bindDefinitionFieldSelects ci-dessus, généralisé pour un nombre de lignes
-// variable plutôt qu'une liste fixe d'ids capturée une fois pour toutes.
-function bindClauseListDefinitionSelect(defSelId) {
-  var defSel = document.getElementById(defSelId);
-  if (!defSel) return;
-  defSel.addEventListener('change', function () {
-    var info = (DEFINITIONS_DATA || {})[defSel.value] || { fields: [] };
-    var opts = '<option value="">(sélectionner un objet d\'abord)</option>' +
-      info.fields.map(function (f) { return '<option value="' + f.name + '">' + fieldOptionLabel(f) + '</option>'; }).join('');
-    document.querySelectorAll('.clauseChampSelect').forEach(function (sel) {
-      var current = sel.value;
-      sel.innerHTML = opts;
-      sel.value = current; // reste sélectionné si ce champ existe encore dans le nouvel objet
-    });
-  });
-}
-
-// ---------- Valeur de comparaison d'un filtre : fixe, ou donnée d'un autre
-// objet ----------
-//
-// La valeur envoyée au serveur reste une simple chaîne "texte" (voir
-// _resolve_filter_value côté Python) — soit une valeur fixe, soit une
-// référence à un champ d'un autre objet dans un format interne précis. Le
-// mode "dynamique" ci-dessous se contente de reconstruire cette chaîne à
-// partir de deux listes déroulantes (objet, champ) plutôt que de la faire
-// taper à la main. OPEN/CLOSE évitent d'écrire les deux accolades l'une
-// contre l'autre dans le source (Jinja les interpréterait comme le DÉBUT
-// d'une expression s'il les rencontrait telles quelles).
-var _FILTER_REF_OPEN = '{' + '{';
-var _FILTER_REF_CLOSE = '}' + '}';
-var _FILTER_REF_RE = new RegExp('^\\{\\{\\s*([^.{}]+)\\.([^.{}]+)\\s*\\}\\}$');
-// Une paire d'accolades doublées entourant "$nom_variable" (voir
-// _VAR_REF_PATTERN côté Python, filter_repeater_rows.py) référence une
-// variable globale — le "$" la distingue sans ambiguïté de _FILTER_REF_RE
-// ci-dessus, qui attend toujours un point ("Objet.champ"). Groupe 2 : un
-// chemin optionnel ".champ"/"[index]" (chaînable) à l'intérieur de la
-// variable, utile pour une variable "objet"/"tableau".
-var _VAR_REF_RE = new RegExp('^\\{\\{\\s*\\$([^.{}\\[\\]]+)((?:\\.[^.{}\\[\\]]+|\\[\\d+\\])*)\\s*\\}\\}$');
-
-function _filterValueDefinitionId(objName) {
-  var opt = document.querySelector('.filterValueObjSel option[value="' + CSS.escape(objName) + '"]');
-  return opt ? opt.dataset.definitionId : null;
-}
-
-function populateFilterValueFields(fieldSel, defId, selectedName) {
-  var info = (DEFINITIONS_DATA || {})[defId] || { fields: [] };
-  fieldSel.innerHTML = '<option value="">— champ —</option>' + info.fields.map(function (f) {
-    return '<option value="' + f.name + '"' + (f.name === selectedName ? ' selected' : '') + '>' + fieldOptionLabel(f) + '</option>';
-  }).join('');
-}
-
-function updateFilterValueFromDynamic(wrap) {
-  var objSel = wrap.querySelector('.filterValueObjSel');
-  var fieldSel = wrap.querySelector('.filterValueFieldSel');
-  var input = wrap.querySelector('.filterValueFixe input');
-  input.value = (objSel.value && fieldSel.value) ? (_FILTER_REF_OPEN + objSel.value + '.' + fieldSel.value + _FILTER_REF_CLOSE) : '';
-  input.dispatchEvent(new Event('input', { bubbles: true }));
-}
-
-function updateFilterValueFromVariable(wrap) {
-  var varSel = wrap.querySelector('.filterValueVarSel');
-  var pathInput = wrap.querySelector('.filterValueVarPath');
-  var input = wrap.querySelector('.filterValueFixe input');
-  var path = pathInput ? pathInput.value.trim() : '';
-  input.value = varSel.value ? (_FILTER_REF_OPEN + '$' + varSel.value + path + _FILTER_REF_CLOSE) : '';
-  input.dispatchEvent(new Event('input', { bubbles: true }));
-}
-
-function onFilterValueModeChange(sel) {
-  var wrap = sel.closest('.filterValueControl');
-  var fixe = wrap.querySelector('.filterValueFixe');
-  var dyn = wrap.querySelector('.filterValueDynamique');
-  var varWrap = wrap.querySelector('.filterValueVariable');
-  fixe.style.display = sel.value === 'fixe' ? 'block' : 'none';
-  dyn.style.display = sel.value === 'dynamique' ? 'block' : 'none';
-  varWrap.style.display = sel.value === 'variable' ? 'block' : 'none';
-  if (sel.value === 'dynamique') updateFilterValueFromDynamic(wrap);
-  else if (sel.value === 'variable') updateFilterValueFromVariable(wrap);
-}
-
-function onFilterValueObjChange(sel) {
-  var wrap = sel.closest('.filterValueControl');
-  populateFilterValueFields(wrap.querySelector('.filterValueFieldSel'), _filterValueDefinitionId(sel.value), '');
-  updateFilterValueFromDynamic(wrap);
-}
-
-function onFilterValueFieldChange(sel) {
-  updateFilterValueFromDynamic(sel.closest('.filterValueControl'));
-}
-
-function onFilterValueVarChange(sel) {
-  updateFilterValueFromVariable(sel.closest('.filterValueControl'));
-}
-
-function initFilterValuePickers() {
-  document.querySelectorAll('.filterValueControl').forEach(function (wrap) {
-    var modeSel = wrap.querySelector('.filterValueMode');
-    var objSel = wrap.querySelector('.filterValueObjSel');
-    var fieldSel = wrap.querySelector('.filterValueFieldSel');
-    var varSel = wrap.querySelector('.filterValueVarSel');
-    var varPathInput = wrap.querySelector('.filterValueVarPath');
-    var current = (wrap.dataset.currentValue || '').trim();
-    var varMatch = _VAR_REF_RE.exec(current);
-    var objMatch = _FILTER_REF_RE.exec(current);
-    if (varMatch) {
-      modeSel.value = 'variable';
-      wrap.querySelector('.filterValueFixe').style.display = 'none';
-      wrap.querySelector('.filterValueVariable').style.display = 'block';
-      varSel.value = varMatch[1].trim();
-      if (varPathInput) varPathInput.value = (varMatch[2] || '').trim();
-    } else if (objMatch) {
-      modeSel.value = 'dynamique';
-      wrap.querySelector('.filterValueFixe').style.display = 'none';
-      wrap.querySelector('.filterValueDynamique').style.display = 'block';
-      objSel.value = objMatch[1].trim();
-      populateFilterValueFields(fieldSel, _filterValueDefinitionId(objSel.value), objMatch[2].trim());
-    } else {
-      modeSel.value = 'fixe';
-    }
-  });
-}
-
-// Le retour/avance du navigateur (bouton "précédent") est déjà pris en
-// charge par pjax.js (navigation globale sans rechargement, voir
-// static/pjax.js) : il refait un rendu complet de <main> et rejoue ce
-// script (voir runScriptsIn dans pjax.js), ce qui rappelle initBuilderPanel()
-// ci-dessous — donc le canevas et le panneau de propriétés se retrouvent à
-// jour automatiquement, sans qu'on ait besoin d'un second écouteur ici.
-initBuilderPanel();
-
-var DEFINITIONS_DATA = {{ definitions_json|safe }};
-var CONDITION_OPERATORS_HTML = document.getElementById('nf-cond-operator') ? document.getElementById('nf-cond-operator').innerHTML : '';
-var GLOBAL_VARIABLES_OPTIONS_HTML = document.getElementById('nf-cond-variable') ? document.getElementById('nf-cond-variable').innerHTML : '';
-
-function toggleActionFields(sel) {
-  var form = sel.closest('.actionAddForm');
-  var screenSel = form.querySelector('.targetScreenSelect');
-  var elementFields = form.querySelector('.targetElementFields');
-  var dataFields = form.querySelector('.targetDataFields');
-  screenSel.style.display = sel.value === 'aller_a' ? 'block' : 'none';
-  elementFields.style.display = sel.value === 'modifier_element' ? 'block' : 'none';
-  dataFields.style.display = sel.value === 'modifier_donnee' ? 'block' : 'none';
-  if (sel.value === 'modifier_element') {
-    var propSel = elementFields.querySelector('.elementPropertySelect');
-    toggleElementPropertyValue(propSel);
-  }
-  if (sel.value === 'modifier_donnee') {
-    var defSel = dataFields.querySelector('.targetDefinitionSelect');
-    if (defSel) onDataDefinitionChange(defSel);
-  }
-}
-document.querySelectorAll('.actionTypeSelect').forEach(toggleActionFields);
-
-function toggleElementPropertyValue(sel) {
-  var wrap = sel.closest('.targetElementFields');
-  var visSel = wrap.querySelector('.elementValueVisibility');
-  var colorInp = wrap.querySelector('.elementValueColor');
-  var numInp = wrap.querySelector('.elementValueNumber');
-  [visSel, colorInp, numInp].forEach(function(el){ el.style.display = 'none'; el.removeAttribute('name'); });
-  if (sel.value === 'visibilite') {
-    visSel.style.display = 'block'; visSel.setAttribute('name', 'element_value');
-  } else if (sel.value === 'bg_color' || sel.value === 'border_color') {
-    colorInp.style.display = 'block'; colorInp.setAttribute('name', 'element_value');
-  } else {
-    numInp.style.display = 'block'; numInp.setAttribute('name', 'element_value');
-  }
-}
-document.querySelectorAll('.elementPropertySelect').forEach(toggleElementPropertyValue);
-
-function onDataDefinitionChange(sel) {
-  var wrap = sel.closest('.targetDataFields');
-  var info = DEFINITIONS_DATA[sel.value] || {rows: [], fields: []};
-  var rowSel = wrap.querySelector('.targetRowSelect');
-  var fieldSel = wrap.querySelector('.targetFieldSelect');
-  if (!rowSel || !fieldSel) return;
-  rowSel.innerHTML = info.rows.length
-    ? info.rows.map(function(r){ return '<option value="' + r.id + '">' + r.label + '</option>'; }).join('')
-    : '<option value="">Aucune donnée dans cet objet</option>';
-  fieldSel.innerHTML = info.fields.length
-    ? info.fields.map(function(f){ return '<option value="' + f.name + '">' + f.name + ' (' + f.type + ')</option>'; }).join('')
-    : '<option value="">Aucun champ simple</option>';
-}
-document.querySelectorAll('.targetDefinitionSelect').forEach(onDataDefinitionChange);
-
-function syncAlign(radio) {
-  radio.closest('.alignGroup').querySelectorAll('.alignOption').forEach(function(o){ o.classList.remove('active', 'is-primary'); });
-  radio.closest('.alignOption').classList.add('active', 'is-primary');
-}
-
-// Choix du format d'aperçu (Portrait/Paysage/Carré) : mémorisé côté serveur
-// (voir screen_set_aspect.py) pour ne pas repartir sur Portrait à chaque
-// ajout/suppression d'élément ou changement de sélection — ces actions
-// redemandent ce panneau au serveur, qui doit donc connaître le choix déjà
-// fait. Appelé depuis initBuilderPanel() (voir plus haut), une seule fois
-// par (re)rendu de ce panneau.
-function bindAspectButtons() {
-  document.querySelectorAll('.aspectBtn').forEach(function (btn) {
-    btn.addEventListener('click', function () {
-      document.querySelectorAll('.aspectBtn').forEach(function (b) { b.classList.remove('active'); });
-      btn.classList.add('active');
-      // Dans l'éditeur (≥1300px), le canevas remplit tout .canvasFrame
-      // (voir .canvas dans style.css) — cet aspect-ratio ne sert donc plus
-      // qu'au repli en page empilée (<1300px, voir le media query) et à
-      // l'aperçu jouable ("Jouer"), pas à la mise en page ici.
-      document.getElementById('canvas').style.aspectRatio = btn.dataset.aspect;
-      fetch("/game/{{ game.slug }}/screens/{{ screen.id }}/aspect", {
-        method: 'POST', headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ aspect: btn.dataset.aspect }),
-      });
-    });
-  });
-}
-
-document.querySelectorAll('.uploadInput').forEach(function(input){
-  input.addEventListener('change', function(){
-    if (!input.files.length) return;
-    var status = input.parentElement.querySelector('.uploadStatus');
-    var targetField = document.getElementById(input.dataset.target);
-    status.textContent = 'Envoi en cours...';
-    var data = new FormData();
-    data.append('file', input.files[0]);
-    fetch("/game/{{ game.slug }}/upload", {method: 'POST', body: data})
-      .then(function(r){ return r.json(); })
-      .then(function(json){
-        if (json.url) {
-          targetField.value = json.url;
-          status.textContent = 'Fichier envoyé ✓ Enregistrement...';
-          // Enregistre tout de suite (comme un clic sur "Enregistrer") pour
-          // qu'un fichier envoyé ne reste jamais "en attente" si on oublie
-          // de cliquer sur le bouton ensuite — l'image doit apparaître dès
-          // l'envoi, sans étape supplémentaire à retenir.
-          var form = document.getElementById('propsForm');
-          if (form) { form.requestSubmit ? form.requestSubmit() : form.submit(); }
-        }
-        else { status.textContent = "Échec de l'envoi."; }
-      })
-      .catch(function(){ status.textContent = "Échec de l'envoi."; });
-  });
-});
-
-// ---------- Logique de la scène : éditeur de flow à nœuds ----------
-
-var FLOW_SCREEN_ID = {{ screen.id }};
-// Blocs de logique (voir screens/flow/blocks/) : ALL_FLOW porte TOUS les
-// nœuds/arêtes de cet écran, tous blocs confondus (chargement inchangé) ;
-// un seul bloc est ouvert à la fois (modale unique, à la Unity) — pas
-// besoin d'une seconde copie filtrée à tenir synchronisée, currentBlockNodes()/
-// currentBlockEdges() recalculent la vue du bloc ouvert à chaque rendu.
-var ALL_FLOW = {
-  nodes: {{ flow_nodes_json|safe }},
-  edges: {{ flow_edges_json|safe }},
-};
-var FLOW_BLOCKS = {{ flow_blocks_json|safe }};
-var CURRENT_BLOCK_ID = null;
-
-function currentBlockNodes() {
-  return ALL_FLOW.nodes.filter(function(n) { return n.block_id === CURRENT_BLOCK_ID; });
-}
-function currentBlockEdges() {
-  var ids = {};
-  currentBlockNodes().forEach(function(n) { ids[n.id] = true; });
-  return ALL_FLOW.edges.filter(function(e) { return ids[e.from_node_id] && ids[e.to_node_id]; });
-}
-var ELEMENTS_LABELS = {{ elements_labels_json|safe }};
-var SCREENS_MAP = {{ screens_map_json|safe }};
-var ACTION_TYPE_LABELS_MAP = {{ action_type_labels_json|safe }};
-var ELEMENT_PROPERTY_LABELS_MAP = {{ element_action_property_labels_json|safe }};
-var ELEMENT_VISIBILITY_LABELS_MAP = {{ element_visibility_labels_json|safe }};
-var ELEMENT_SURBRILLANCE_LABELS_MAP = {{ element_surbrillance_labels_json|safe }};
-var ELEMENT_DESACTIVE_LABELS_MAP = {{ element_desactive_labels_json|safe }};
-var DATA_OPERATION_LABELS_MAP = {{ data_operation_labels_json|safe }};
-var CONDITION_OPERATOR_LABELS_MAP = {{ condition_operator_labels_json|safe }};
-var TRIGGER_LABELS_MAP = {{ trigger_labels_json|safe }};
-var CUSTOM_EVENTS_MAP = {{ custom_events_map_json|safe }};
-
-var flowPendingPort = null; // {nodeId, port} en attente de connexion
-
-function flowUrl(path) { return "/game/{{ game.slug }}" + path; }
-
-function nodeLabel(node) {
-  if (node.node_type === 'trigger') {
-    if (node.trigger_event === 'affichage') return '🖥️ ' + TRIGGER_LABELS_MAP['affichage'];
-    if (node.trigger_event === 'evenement') {
-      var listenedEvent = CUSTOM_EVENTS_MAP[node.trigger_custom_event_id];
-      return '📣 Sur « ' + (listenedEvent ? listenedEvent.name : '?') + ' »';
-    }
-    return '🖱️ ' + (TRIGGER_LABELS_MAP[node.trigger_event] || 'Au clic') + ' sur ' +
-      (ELEMENTS_LABELS[node.trigger_element_id] || '?');
-  }
-  if (node.node_type === 'condition') {
-    var clauseSubject = function(c, field, variable) {
-      return (c.source ?? c.cond_source) === 'variable' ? ('🔧 ' + (variable || c.cond_variable || '?')) : (field || c.cond_field || '?');
-    };
-    var mainSubject = clauseSubject(node, node.cond_field, node.cond_variable);
-    var mainClause = '❓ SI ' + mainSubject + ' ' + (CONDITION_OPERATOR_LABELS_MAP[node.cond_operator] || node.cond_operator) + ' ' + (node.cond_value || '');
-    if (node.cond_clauses) {
-      // 2.4 — plusieurs clauses combinées : on affiche chaque champ/variable
-      // testé, relié par le connecteur ET/OU choisi, plutôt qu'une seule clause.
-      try {
-        var clauses = JSON.parse(node.cond_clauses);
-        var combLabel = node.cond_combinator === 'ou' ? ' OU ' : ' ET ';
-        return '❓ SI ' + clauses.map(function(c) {
-          return clauseSubject(c, c.field, c.variable) + ' ' + (CONDITION_OPERATOR_LABELS_MAP[c.operator] || c.operator) + ' ' + (c.value || '');
-        }).join(combLabel);
-      } catch (e) { /* JSON invalide : on retombe sur la clause historique */ }
-    }
-    return mainClause;
-  }
-  // action
-  var base = '⚡ ' + (ACTION_TYPE_LABELS_MAP[node.action_type] || node.action_type);
-  if (node.action_type === 'aller_a') {
-    base += ' → ' + (SCREENS_MAP[node.target_screen_id] || '?');
-  } else if (node.action_type === 'ouvrir_ligne') {
-    base += ' → ' + (SCREENS_MAP[node.target_screen_id] || '?') + ' (ligne cliquée)';
-  } else if (node.action_type === 'activer_onglet') {
-    base += ' → ' + (ELEMENTS_LABELS[node.target_element_id] || '?') + ' (masque ses frères)';
-  } else if (node.action_type === 'modifier_element') {
-    base += ' → ' + (ELEMENTS_LABELS[node.target_element_id] || '?') + ' : ' + (ELEMENT_PROPERTY_LABELS_MAP[node.element_property] || node.element_property);
-    if (node.element_property === 'visibilite') {
-      base += ' = ' + (ELEMENT_VISIBILITY_LABELS_MAP[node.element_value] || node.element_value);
-    } else if (node.element_property === 'surbrillance') {
-      base += ' = ' + (ELEMENT_SURBRILLANCE_LABELS_MAP[node.element_value] || node.element_value);
-    } else if (node.element_property === 'desactive') {
-      base += ' = ' + (ELEMENT_DESACTIVE_LABELS_MAP[node.element_value] || node.element_value);
-    } else if (node.element_value && node.element_value.indexOf('||') !== -1) {
-      var vparts = node.element_value.split('||');
-      base += ' = ' + vparts[0] + ' ↔ ' + vparts[1] + ' (va-et-vient)';
-    } else {
-      base += ' = ' + node.element_value;
-    }
-  } else if (node.action_type === 'modifier_donnee') {
-    base += ' → ' + (node.target_field || '?') + ' : ' + (DATA_OPERATION_LABELS_MAP[node.data_operation] || node.data_operation);
-    if (node.data_value) base += ' ' + node.data_value;
-  } else if (node.action_type === 'modifier_variable') {
-    base += ' → ' + (node.target_variable || '?') + ' : ' + (DATA_OPERATION_LABELS_MAP[node.data_operation] || node.data_operation);
-    if (node.data_value) base += ' ' + node.data_value;
-  } else if (node.action_type === 'attendre') {
-    base += ' (' + (node.data_value || '0') + ' s)';
-  } else if (node.action_type === 'declencher_evenement') {
-    // Notification pure : rien d'autre à afficher que le nom de
-    // l'événement (voir screens/custom_events/) — aucun élément/ligne
-    // n'est jamais transmis au déclenchement.
-    var dispatchedEvent = CUSTOM_EVENTS_MAP[node.target_custom_event_id];
-    base += ' « ' + (dispatchedEvent ? dispatchedEvent.name : '?') + ' »';
-  }
-  return base;
-}
-
-function renderFlow() {
-  var canvas = document.getElementById('flowCanvas');
-  var svg = document.getElementById('flowEdges');
-  canvas.innerHTML = '';
-  svg.innerHTML = '';
-
-  currentBlockNodes().forEach(function(node) {
-    var div = document.createElement('div');
-    div.className = 'flowNode flowNode-' + node.node_type;
-    div.style.left = node.x + 'px';
-    div.style.top = node.y + 'px';
-    div.dataset.nodeId = node.id;
-
-    var del = document.createElement('button');
-    del.className = 'flowNodeDelete';
-    del.type = 'button';
-    del.textContent = '✕';
-    del.onclick = function(ev) { ev.stopPropagation(); deleteFlowNode(node.id); };
-    div.appendChild(del);
-
-    var body = document.createElement('div');
-    body.className = 'flowNodeBody';
-    body.textContent = nodeLabel(node);
-    div.appendChild(body);
-
-    if (node.node_type !== 'trigger') {
-      var inPort = document.createElement('div');
-      inPort.className = 'flowPort flowPortIn';
-      inPort.onclick = function(ev) { ev.stopPropagation(); onPortClick(node.id, 'in', null); };
-      div.appendChild(inPort);
-    }
-    if (node.node_type === 'condition') {
-      var outTrue = document.createElement('div');
-      outTrue.className = 'flowPort flowPortOut flowPortTrue';
-      outTrue.title = 'Vrai';
-      outTrue.onclick = function(ev) { ev.stopPropagation(); onPortClick(node.id, 'out', 'vrai'); };
-      div.appendChild(outTrue);
-      var outFalse = document.createElement('div');
-      outFalse.className = 'flowPort flowPortOut flowPortFalse';
-      outFalse.title = 'Faux';
-      outFalse.onclick = function(ev) { ev.stopPropagation(); onPortClick(node.id, 'out', 'faux'); };
-      div.appendChild(outFalse);
-    } else {
-      var outPort = document.createElement('div');
-      outPort.className = 'flowPort flowPortOut';
-      outPort.onclick = function(ev) { ev.stopPropagation(); onPortClick(node.id, 'out', 'out'); };
-      div.appendChild(outPort);
-    }
-
-    div.addEventListener('mousedown', function(e) { onFlowNodeMouseDown(e, node.id); });
-    canvas.appendChild(div);
-  });
-
-  // Redessine les fils après que les nœuds soient dans le DOM (pour lire leur position réelle).
-  requestAnimationFrame(drawFlowEdges);
-}
-
-function portPosition(nodeId, side, sub) {
-  var div = document.querySelector('.flowNode[data-node-id="' + nodeId + '"]');
-  if (!div) return null;
-  var wrap = document.querySelector('.flowCanvasWrap');
-  var wrapRect = wrap.getBoundingClientRect();
-  var selector = side === 'in' ? '.flowPortIn' : (sub === 'vrai' ? '.flowPortTrue' : (sub === 'faux' ? '.flowPortFalse' : '.flowPortOut'));
-  var port = div.querySelector(selector);
-  if (!port) return null;
-  var r = port.getBoundingClientRect();
-  return { x: r.left + r.width / 2 - wrapRect.left + wrap.scrollLeft, y: r.top + r.height / 2 - wrapRect.top + wrap.scrollTop };
-}
-
-function drawFlowEdges() {
-  var svg = document.getElementById('flowEdges');
-  svg.innerHTML = '';
-  currentBlockEdges().forEach(function(edge) {
-    var from = portPosition(edge.from_node_id, 'out', edge.from_port);
-    var to = portPosition(edge.to_node_id, 'in', null);
-    if (!from || !to) return;
-    var line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
-    line.setAttribute('x1', from.x); line.setAttribute('y1', from.y);
-    line.setAttribute('x2', to.x); line.setAttribute('y2', to.y);
-    line.setAttribute('class', 'flowEdgeLine' + (edge.from_port === 'faux' ? ' flowEdgeFalse' : (edge.from_port === 'vrai' ? ' flowEdgeTrue' : '')));
-    line.style.pointerEvents = 'stroke';
-    line.addEventListener('click', function() { deleteFlowEdge(edge.id); });
-    svg.appendChild(line);
-  });
-}
-
-function onPortClick(nodeId, side, port) {
-  if (side === 'out') {
-    flowPendingPort = { nodeId: nodeId, port: port };
-    return;
-  }
-  // side === 'in'
-  if (!flowPendingPort) return;
-  if (flowPendingPort.nodeId === nodeId) { flowPendingPort = null; return; }
-  fetch(flowUrl('/screens/' + FLOW_SCREEN_ID + '/flow/edges/add'), {
-    method: 'POST', headers: {'Content-Type': 'application/json'},
-    body: JSON.stringify({ from_node_id: flowPendingPort.nodeId, from_port: flowPendingPort.port, to_node_id: nodeId })
-  }).then(function(r){ return r.json(); }).then(function(edge){
-    ALL_FLOW.edges.push({ id: edge.id, screen_id: FLOW_SCREEN_ID, from_node_id: flowPendingPort.nodeId, from_port: flowPendingPort.port, to_node_id: nodeId });
-    flowPendingPort = null;
-    drawFlowEdges();
-  });
-}
-
-function deleteFlowEdge(edgeId) {
-  fetch(flowUrl('/flow/edges/' + edgeId + '/delete'), { method: 'POST' }).then(function(){
-    ALL_FLOW.edges = ALL_FLOW.edges.filter(function(e){ return e.id !== edgeId; });
-    drawFlowEdges();
-  });
-}
-
-function deleteFlowNode(nodeId) {
-  fetch(flowUrl('/flow/nodes/' + nodeId + '/delete'), { method: 'POST' }).then(function(){
-    ALL_FLOW.nodes = ALL_FLOW.nodes.filter(function(n){ return n.id !== nodeId; });
-    ALL_FLOW.edges = ALL_FLOW.edges.filter(function(e){ return e.from_node_id !== nodeId && e.to_node_id !== nodeId; });
-    renderFlow();
-  });
-}
-
-function onFlowNodeMouseDown(e, nodeId) {
-  if (e.target.classList.contains('flowPort') || e.target.classList.contains('flowNodeDelete')) return;
-  e.preventDefault();
-  var node = ALL_FLOW.nodes.find(function(n){ return n.id === nodeId; });
-  var div = document.querySelector('.flowNode[data-node-id="' + nodeId + '"]');
-  var startX = e.clientX, startY = e.clientY;
-  var startLeft = node.x, startTop = node.y;
-  function onMove(ev) {
-    var dx = ev.clientX - startX, dy = ev.clientY - startY;
-    node.x = Math.max(0, startLeft + dx);
-    node.y = Math.max(0, startTop + dy);
-    div.style.left = node.x + 'px';
-    div.style.top = node.y + 'px';
-    drawFlowEdges();
-  }
-  function onUp() {
-    document.removeEventListener('mousemove', onMove);
-    document.removeEventListener('mouseup', onUp);
-    fetch(flowUrl('/flow/nodes/' + nodeId + '/move'), {
-      method: 'POST', headers: {'Content-Type': 'application/json'},
-      body: JSON.stringify({ x: node.x, y: node.y })
-    });
-  }
-  document.addEventListener('mousemove', onMove);
-  document.addEventListener('mouseup', onUp);
-}
-
-// ---------- Formulaire d'ajout de nœud ----------
-
-var currentNodeFormType = null;
-
-function openNodeForm(type) {
-  currentNodeFormType = type;
-  document.getElementById('nodeForm').style.display = 'block';
-  document.getElementById('nodeFormTitle').textContent =
-    type === 'trigger' ? 'Nouveau déclencheur' : (type === 'condition' ? 'Nouvelle condition' : 'Nouvelle action');
-  document.getElementById('nodeFormTrigger').style.display = type === 'trigger' ? 'block' : 'none';
-  document.getElementById('nodeFormCondition').style.display = type === 'condition' ? 'block' : 'none';
-  document.getElementById('nodeFormAction').style.display = type === 'action' ? 'block' : 'none';
-  if (type === 'trigger') toggleFlowTriggerFields();
-  if (type === 'condition') {
-    document.getElementById('nf-cond-source').value = 'objet';
-    onFlowConditionSourceChange();
-    onFlowDefinitionChange('cond');
-    flowConditionExtraClauses = [];
-    renderFlowConditionClauses();
-  }
-  if (type === 'action') {
-    document.getElementById('nf-action-element-toggle').checked = false;
-    toggleFlowActionFields();
-  }
-}
-
-function toggleFlowTriggerFields() {
-  var eventVal = document.getElementById('nf-trigger-event').value;
-  var isAffichage = eventVal === 'affichage';
-  // "Sur un événement personnalisé" ne concerne ni un élément précis ni
-  // l'écran entier : c'est un scan global (voir dispatchGameEvent() dans
-  // play.html), le seul réglage propre à ce nœud est QUEL événement.
-  var isCustomEvent = eventVal === 'evenement';
-  document.getElementById('nf-trigger-element-row').style.display = (isAffichage || isCustomEvent) ? 'none' : 'block';
-  document.getElementById('nf-trigger-repeater-hint').style.display = (isAffichage || isCustomEvent) ? 'none' : 'block';
-  document.getElementById('nf-trigger-affichage-hint').style.display = isAffichage ? 'block' : 'none';
-  document.getElementById('nf-trigger-event-row').style.display = isCustomEvent ? 'block' : 'none';
-}
-
-function closeNodeForm() {
-  document.getElementById('nodeForm').style.display = 'none';
-  currentNodeFormType = null;
-}
-
-// CLICKED_ROW_ID (-1, voir screens/flow/constants.py) : "la ligne de
-// Répéteur sur laquelle on vient de cliquer" — pour un déclencheur "Au
-// clic" posé sur un Répéteur, chaque ligne exécute le MÊME graphe et la
-// ligne cliquée n'est jamais connue à l'avance ; choisir une ligne fixe
-// dans l'éditeur n'a donc pas de sens pour ce cas. Résolue au moment de
-// l'exécution (window.lastClickedRowId, voir play.html), pas à la
-// création du nœud — proposée en tête de TOUTE liste "Ligne concernée",
-// avant les lignes réelles de l'objet.
-var FLOW_CLICKED_ROW_ID = -1;
-
-function _flowRowOptionsHtml(info) {
-  var options = '<option value="' + FLOW_CLICKED_ROW_ID + '">🖱️ Ligne cliquée (Répéteur)</option>';
-  options += info.rows.length
-    ? info.rows.map(function(r){ return '<option value="' + r.id + '">' + r.label + '</option>'; }).join('')
-    : '<option value="" disabled>Aucune donnée dans cet objet</option>';
-  return options;
-}
-
-function onFlowDefinitionChange(prefix) {
-  var defSel = document.getElementById(prefix === 'cond' ? 'nf-cond-definition' : 'nf-action-data-definition');
-  if (!defSel) return;
-  var info = DEFINITIONS_DATA[defSel.value] || { rows: [], fields: [] };
-  var rowSel = document.getElementById(prefix === 'cond' ? 'nf-cond-row' : 'nf-action-data-row');
-  var fieldSel = document.getElementById(prefix === 'cond' ? 'nf-cond-field' : 'nf-action-data-field');
-  rowSel.innerHTML = _flowRowOptionsHtml(info);
-  fieldSel.innerHTML = info.fields.length
-    ? info.fields.map(function(f){ return '<option value="' + f.name + '" data-type="' + f.type + '">' + f.name + ' (' + f.type + ')</option>'; }).join('')
-    : '<option value="">Aucun champ simple</option>';
-}
-
-function onFlowFieldChange() {
-  // Pas d'action nécessaire ici pour l'instant : le type du champ est relu
-  // directement sur l'option sélectionnée au moment de la création du nœud.
-}
-
-// Bascule la clause PRINCIPALE d'un nœud Condition entre "Champ d'un
-// objet" (historique) et "Variable globale" — voir ensure_flow_schema.py
-// (cond_source) et evaluateConditionClause() dans play.html. Même bascule
-// pour une clause SUPPLÉMENTAIRE : voir onFlowClauseSourceChange() plus
-// bas, sur le même principe mais scopée par index.
-function onFlowConditionSourceChange() {
-  var isVariable = document.getElementById('nf-cond-source').value === 'variable';
-  document.getElementById('nf-cond-objet-fields').style.display = isVariable ? 'none' : 'block';
-  document.getElementById('nf-cond-variable-fields').style.display = isVariable ? 'block' : 'none';
-  var hint = document.getElementById('nf-cond-no-objet-hint');
-  if (hint) hint.style.display = isVariable ? 'none' : 'block';
-}
-
-// ---------- 2.4 — clauses supplémentaires (ET/OU) d'un nœud Condition ----------
-// Chaque clause supplémentaire réutilise EXACTEMENT le même modèle que la
-// clause principale (nf-cond-definition/row/field/operator/value) mais dans
-// une ligne indépendante, numérotée par index dans flowConditionExtraClauses.
-var flowConditionExtraClauses = [];
-
-function addFlowConditionClause() {
-  var firstDefSel = document.getElementById('nf-cond-definition');
-  var defaultDefId = firstDefSel && firstDefSel.value ? firstDefSel.value : '';
-  flowConditionExtraClauses.push({
-    source: 'objet', definition_id: defaultDefId, row_id: '', field: '', field_type: '',
-    variable: '', variable_chemin: '', operator: 'egal', value: '',
-  });
-  renderFlowConditionClauses();
-}
-
-function removeFlowConditionClause(idx) {
-  flowConditionExtraClauses.splice(idx, 1);
-  renderFlowConditionClauses();
-}
-
-// Bascule une clause SUPPLÉMENTAIRE (indexée) entre "Champ d'un objet" et
-// "Variable globale" — même principe que onFlowConditionSourceChange() pour
-// la clause principale, scopé par index plutôt que par id fixe.
-function onFlowClauseSourceChange(idx) {
-  var sel = document.getElementById('nf-cond-extra-source-' + idx);
-  if (!sel) return;
-  flowConditionExtraClauses[idx].source = sel.value;
-  var isVariable = sel.value === 'variable';
-  var objetFields = document.getElementById('nf-cond-extra-objet-fields-' + idx);
-  var varFields = document.getElementById('nf-cond-extra-variable-fields-' + idx);
-  if (objetFields) objetFields.style.display = isVariable ? 'none' : 'block';
-  if (varFields) varFields.style.display = isVariable ? 'block' : 'none';
-}
-
-function renderFlowConditionClauses() {
-  var wrap = document.getElementById('nf-cond-extra-clauses');
-  var combinatorRow = document.getElementById('nf-cond-combinator-row');
-  if (!wrap || !combinatorRow) return;
-  combinatorRow.style.display = flowConditionExtraClauses.length ? 'block' : 'none';
-  var defOptionsHtml = document.getElementById('nf-cond-definition') ? document.getElementById('nf-cond-definition').innerHTML : '';
-  wrap.innerHTML = flowConditionExtraClauses.map(function(clause, idx) {
-    var isVariable = clause.source === 'variable';
-    return '' +
-      '<div class="flowConditionClauseRow" style="border-top:1px dashed var(--border); margin-top:8px; padding-top:8px;">' +
-        '<label>Source<select id="nf-cond-extra-source-' + idx + '" onchange="onFlowClauseSourceChange(' + idx + ')">' +
-          '<option value="objet"' + (isVariable ? '' : ' selected') + '>Champ d\'un objet</option>' +
-          '<option value="variable"' + (isVariable ? ' selected' : '') + '>Variable globale</option>' +
-        '</select></label>' +
-        '<div id="nf-cond-extra-objet-fields-' + idx + '" style="display:' + (isVariable ? 'none' : 'block') + ';">' +
-          '<label>Objet<select id="nf-cond-extra-definition-' + idx + '" onchange="onFlowClauseDefinitionChange(' + idx + ')">' + defOptionsHtml + '</select></label>' +
-          '<label>Ligne concernée<select id="nf-cond-extra-row-' + idx + '" onchange="flowConditionExtraClauses[' + idx + '].row_id = this.value"></select></label>' +
-          '<label>Champ<select id="nf-cond-extra-field-' + idx + '" onchange="onFlowClauseFieldChange(' + idx + ')"></select></label>' +
-        '</div>' +
-        '<div id="nf-cond-extra-variable-fields-' + idx + '" style="display:' + (isVariable ? 'block' : 'none') + ';">' +
-          '<label>Variable<select id="nf-cond-extra-variable-' + idx + '" onchange="flowConditionExtraClauses[' + idx + '].variable = this.value">' +
-            '<option value="">(sélectionner une variable)</option>' + GLOBAL_VARIABLES_OPTIONS_HTML +
-          '</select></label>' +
-          '<label>Chemin (optionnel)<input type="text" id="nf-cond-extra-variable-chemin-' + idx + '" placeholder="ex. .nom ou [0].valeur" value="' + (clause.variable_chemin || '').replace(/"/g, '&quot;') + '" onchange="flowConditionExtraClauses[' + idx + '].variable_chemin = this.value"></label>' +
-        '</div>' +
-        '<label>Condition<select id="nf-cond-extra-operator-' + idx + '" onchange="flowConditionExtraClauses[' + idx + '].operator = this.value">' +
-          CONDITION_OPERATORS_HTML +
-        '</select></label>' +
-        '<label>Valeur de comparaison<input type="text" id="nf-cond-extra-value-' + idx + '" placeholder="ex. 1, vrai, 10..." value="' + (clause.value || '').replace(/"/g, '&quot;') + '" onchange="flowConditionExtraClauses[' + idx + '].value = this.value"></label>' +
-        '<button type="button" class="smallBtn button is-small" onclick="removeFlowConditionClause(' + idx + ')">Retirer cette condition</button>' +
-      '</div>';
-  }).join('');
-  flowConditionExtraClauses.forEach(function(clause, idx) {
-    var defSel = document.getElementById('nf-cond-extra-definition-' + idx);
-    if (defSel && clause.definition_id) defSel.value = clause.definition_id;
-    onFlowClauseDefinitionChange(idx);
-    var opSel = document.getElementById('nf-cond-extra-operator-' + idx);
-    if (opSel) opSel.value = clause.operator || 'egal';
-    var varSel = document.getElementById('nf-cond-extra-variable-' + idx);
-    if (varSel && clause.variable) varSel.value = clause.variable;
-  });
-}
-
-function onFlowClauseDefinitionChange(idx) {
-  var defSel = document.getElementById('nf-cond-extra-definition-' + idx);
-  var rowSel = document.getElementById('nf-cond-extra-row-' + idx);
-  var fieldSel = document.getElementById('nf-cond-extra-field-' + idx);
-  if (!defSel || !rowSel || !fieldSel) return;
-  flowConditionExtraClauses[idx].definition_id = defSel.value;
-  var info = DEFINITIONS_DATA[defSel.value] || { rows: [], fields: [] };
-  rowSel.innerHTML = _flowRowOptionsHtml(info);
-  fieldSel.innerHTML = info.fields.length
-    ? info.fields.map(function(f){ return '<option value="' + f.name + '" data-type="' + f.type + '">' + f.name + ' (' + f.type + ')</option>'; }).join('')
-    : '<option value="">Aucun champ simple</option>';
-  flowConditionExtraClauses[idx].row_id = rowSel.value;
-  onFlowClauseFieldChange(idx);
-}
-
-function onFlowClauseFieldChange(idx) {
-  var fieldSel = document.getElementById('nf-cond-extra-field-' + idx);
-  if (!fieldSel) return;
-  var opt = fieldSel.options[fieldSel.selectedIndex];
-  flowConditionExtraClauses[idx].field = fieldSel.value;
-  flowConditionExtraClauses[idx].field_type = opt ? opt.dataset.type : '';
-}
-
-function toggleFlowActionFields() {
-  var typeSel = document.getElementById('nf-action-type');
-  var screenSel = document.getElementById('nf-action-target-screen');
-  var elementFields = document.getElementById('nf-action-element-fields');
-  var dataFields = document.getElementById('nf-action-data-fields');
-  var variableFields = document.getElementById('nf-action-variable-fields');
-  var waitFields = document.getElementById('nf-action-wait-fields');
-  var eventFields = document.getElementById('nf-action-event-fields');
-  var isOnglet = typeSel.value === 'activer_onglet';
-  screenSel.style.display = (typeSel.value === 'aller_a' || typeSel.value === 'ouvrir_ligne') ? 'block' : 'none';
-  elementFields.style.display = (typeSel.value === 'modifier_element' || isOnglet) ? 'block' : 'none';
-  dataFields.style.display = typeSel.value === 'modifier_donnee' ? 'block' : 'none';
-  variableFields.style.display = typeSel.value === 'modifier_variable' ? 'block' : 'none';
-  waitFields.style.display = typeSel.value === 'attendre' ? 'block' : 'none';
-  if (eventFields) eventFields.style.display = typeSel.value === 'declencher_evenement' ? 'block' : 'none';
-  document.getElementById('nf-action-onglet-hint').style.display = isOnglet ? 'block' : 'none';
-  document.getElementById('nf-action-element-property-wrap').style.display = isOnglet ? 'none' : 'block';
-  if (typeSel.value === 'modifier_element') toggleFlowElementPropertyValue();
-  if (typeSel.value === 'modifier_donnee') onFlowDefinitionChange('action');
-}
-
-function toggleFlowElementPropertyValue() {
-  var propSel = document.getElementById('nf-action-element-property');
-  var visSel = document.getElementById('nf-action-element-value-visibility');
-  var surbrillanceSel = document.getElementById('nf-action-element-value-surbrillance');
-  var desactiveSel = document.getElementById('nf-action-element-value-desactive');
-  var colorInp = document.getElementById('nf-action-element-value-color');
-  var numInp = document.getElementById('nf-action-element-value-number');
-  var textInp = document.getElementById('nf-action-element-value-text');
-  var toggleRow = document.getElementById('nf-action-element-toggle-row');
-  [visSel, surbrillanceSel, desactiveSel, colorInp, numInp, textInp].forEach(function(el){ el.style.display = 'none'; });
-  if (propSel.value === 'visibilite') {
-    visSel.style.display = 'block';
-    toggleRow.style.display = 'none';
-    document.getElementById('nf-action-element-toggle').checked = false;
-  } else if (propSel.value === 'surbrillance') {
-    surbrillanceSel.style.display = 'block';
-    toggleRow.style.display = 'none';
-    document.getElementById('nf-action-element-toggle').checked = false;
-  } else if (propSel.value === 'desactive') {
-    desactiveSel.style.display = 'block';
-    toggleRow.style.display = 'none';
-    document.getElementById('nf-action-element-toggle').checked = false;
-  } else if (propSel.value === 'contenu') {
-    textInp.style.display = 'block';
-    toggleRow.style.display = 'none';
-    document.getElementById('nf-action-element-toggle').checked = false;
-  } else if (propSel.value === 'bg_color' || propSel.value === 'border_color') {
-    colorInp.style.display = 'block';
-    toggleRow.style.display = 'flex';
-  } else {
-    numInp.style.display = 'block';
-    toggleRow.style.display = 'flex';
-  }
-  toggleFlowElementToggleMode();
-}
-
-function toggleFlowElementToggleMode() {
-  var propSel = document.getElementById('nf-action-element-property');
-  var checked = document.getElementById('nf-action-element-toggle').checked;
-  var wrap = document.getElementById('nf-action-element-value2-wrap');
-  var colorInp2 = document.getElementById('nf-action-element-value2-color');
-  var numInp2 = document.getElementById('nf-action-element-value2-number');
-  var isColor = propSel.value === 'bg_color' || propSel.value === 'border_color';
-  wrap.style.display = checked ? 'block' : 'none';
-  colorInp2.style.display = (checked && isColor) ? 'block' : 'none';
-  numInp2.style.display = (checked && !isColor) ? 'block' : 'none';
-}
-
-function submitNodeForm() {
-  var payload = { node_type: currentNodeFormType, x: 20, y: 20 + currentBlockNodes().length * 10, block_id: CURRENT_BLOCK_ID };
-
-  if (currentNodeFormType === 'trigger') {
-    payload.trigger_event = document.getElementById('nf-trigger-event').value;
-    if (payload.trigger_event === 'evenement') {
-      payload.trigger_custom_event_id = parseInt(document.getElementById('nf-trigger-custom-event').value, 10);
-    } else if (payload.trigger_event !== 'affichage') {
-      payload.trigger_element_id = parseInt(document.getElementById('nf-trigger-element').value, 10);
-    }
-  } else if (currentNodeFormType === 'condition') {
-    var condSource = document.getElementById('nf-cond-source').value;
-    payload.cond_source = condSource;
-    payload.cond_operator = document.getElementById('nf-cond-operator').value;
-    payload.cond_value = document.getElementById('nf-cond-value').value;
-    if (condSource === 'variable') {
-      payload.cond_variable = document.getElementById('nf-cond-variable').value;
-      payload.cond_variable_chemin = document.getElementById('nf-cond-variable-chemin').value;
-    } else {
-      var fieldSel = document.getElementById('nf-cond-field');
-      var fieldOpt = fieldSel.options[fieldSel.selectedIndex];
-      payload.cond_definition_id = parseInt(document.getElementById('nf-cond-definition').value, 10);
-      payload.cond_row_id = parseInt(document.getElementById('nf-cond-row').value, 10) || null;
-      payload.cond_field = fieldSel.value;
-      payload.cond_field_type = fieldOpt ? fieldOpt.dataset.type : '';
-    }
-    if (flowConditionExtraClauses.length) {
-      // 2.4 — clauses combinées : la clause "historique" ci-dessus devient
-      // la première clause de la liste, suivie des clauses supplémentaires.
-      var mainClause = condSource === 'variable'
-        ? { source: 'variable', variable: payload.cond_variable, variable_chemin: payload.cond_variable_chemin,
-            operator: payload.cond_operator, value: payload.cond_value }
-        : { source: 'objet', definition_id: payload.cond_definition_id, row_id: payload.cond_row_id,
-            field: payload.cond_field, field_type: payload.cond_field_type,
-            operator: payload.cond_operator, value: payload.cond_value };
-      var allClauses = [mainClause].concat(flowConditionExtraClauses.map(function(c) {
-        return c.source === 'variable'
-          ? { source: 'variable', variable: c.variable, variable_chemin: c.variable_chemin, operator: c.operator, value: c.value }
-          : { source: 'objet', definition_id: parseInt(c.definition_id, 10), row_id: parseInt(c.row_id, 10) || null,
-              field: c.field, field_type: c.field_type, operator: c.operator, value: c.value };
-      }));
-      payload.cond_clauses = JSON.stringify(allClauses);
-      payload.cond_combinator = document.getElementById('nf-cond-combinator').value;
-    }
-  } else if (currentNodeFormType === 'action') {
-    var actionType = document.getElementById('nf-action-type').value;
-    payload.action_type = actionType;
-    if (actionType === 'aller_a' || actionType === 'ouvrir_ligne') {
-      payload.target_screen_id = parseInt(document.getElementById('nf-action-target-screen').value, 10);
-    } else if (actionType === 'activer_onglet') {
-      payload.target_element_id = parseInt(document.getElementById('nf-action-target-element').value, 10);
-    } else if (actionType === 'modifier_element') {
-      payload.target_element_id = parseInt(document.getElementById('nf-action-target-element').value, 10);
-      var prop = document.getElementById('nf-action-element-property').value;
-      payload.element_property = prop;
-      var isColorProp = prop === 'bg_color' || prop === 'border_color';
-      var toggleOn = prop !== 'visibilite' && prop !== 'surbrillance' && prop !== 'desactive' && document.getElementById('nf-action-element-toggle').checked;
-      if (prop === 'visibilite') {
-        payload.element_value = document.getElementById('nf-action-element-value-visibility').value;
-      } else if (prop === 'surbrillance') {
-        payload.element_value = document.getElementById('nf-action-element-value-surbrillance').value;
-      } else if (prop === 'desactive') {
-        payload.element_value = document.getElementById('nf-action-element-value-desactive').value;
-      } else if (prop === 'contenu') {
-        payload.element_value = document.getElementById('nf-action-element-value-text').value;
-      } else {
-        var v1 = isColorProp
-          ? document.getElementById('nf-action-element-value-color').value
-          : document.getElementById('nf-action-element-value-number').value;
-        if (toggleOn) {
-          var v2 = isColorProp
-            ? document.getElementById('nf-action-element-value2-color').value
-            : document.getElementById('nf-action-element-value2-number').value;
-          payload.element_value = v1 + '||' + v2;
-        } else {
-          payload.element_value = v1;
-        }
-      }
-    } else if (actionType === 'modifier_donnee') {
-      payload.target_definition_id = parseInt(document.getElementById('nf-action-data-definition').value, 10);
-      payload.target_row_id = parseInt(document.getElementById('nf-action-data-row').value, 10) || null;
-      payload.target_field = document.getElementById('nf-action-data-field').value;
-      payload.data_operation = document.getElementById('nf-action-data-operation').value;
-      payload.data_value = document.getElementById('nf-action-data-value').value;
-    } else if (actionType === 'modifier_variable') {
-      payload.target_variable = document.getElementById('nf-action-variable-name').value;
-      payload.data_operation = document.getElementById('nf-action-variable-operation').value;
-      payload.data_value = document.getElementById('nf-action-variable-value').value;
-    } else if (actionType === 'attendre') {
-      payload.data_value = document.getElementById('nf-action-wait-seconds').value;
-    } else if (actionType === 'declencher_evenement') {
-      // Notification pure : aucun élément/ligne à transmettre (voir
-      // screens/custom_events/) — c'est à l'écouteur de décider quoi
-      // faire, avec ses propres réglages habituels.
-      payload.target_custom_event_id = parseInt(document.getElementById('nf-action-custom-event').value, 10);
-    }
-  }
-
-  fetch(flowUrl('/screens/' + FLOW_SCREEN_ID + '/flow/nodes/add'), {
-    method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(payload)
-  }).then(function(r){ return r.json(); }).then(function(node){
-    ALL_FLOW.nodes.push(node);
-    closeNodeForm();
-    renderFlow();
-  });
-}
-
-// ---------- Onglets du centre : Écran / Logique de la scène / Timeline
-// d'animation — un seul visible à la fois, chacun occupant tout l'espace
-// disponible (remplace l'ancien panneau du bas rétractable/redimensionnable
-// à la souris : un onglet "prend toute la place" par nature, et en changer
-// équivaut à "fermer" celui qu'on quitte). ----------
-function switchBuilderTab(tab) {
-  document.querySelectorAll('.builderTabBtn').forEach(function (btn) {
-    btn.classList.toggle('active', btn.dataset.tab === tab);
-  });
-  document.querySelectorAll('.builderTabPanel').forEach(function (panel) {
-    panel.classList.toggle('active', panel.dataset.tabPanel === tab);
-  });
-}
-
-function toggleDashCreate(tab) {
-  var bar = document.getElementById('dashCreate-' + tab);
-  bar.style.display = bar.style.display === 'none' ? 'flex' : 'none';
-  if (bar.style.display === 'flex') {
-    var firstInput = bar.querySelector('input, select');
-    if (firstInput) firstInput.focus();
-  }
-}
-
-function toggleBlockEditRow(blockId) {
-  document.getElementById('blockEditRow' + blockId).classList.toggle('hidden');
-}
-
-// ---------- Panneaux flottants : glisser-déposer + redimensionnement +
-// plein écran ---------- Générique, porté tel quel depuis game_dashboard.html
-// (mêmes gestes partout dans l'outil plutôt qu'une variante par panneau).
-function makeFloatPanelDraggable(panel, header) {
-  var dragging = false, offsetX = 0, offsetY = 0;
-  header.addEventListener('mousedown', function (e) {
-    if (e.target.closest('button')) return;
-    dragging = true;
-    if (panel.classList.contains('floatPanel--fullscreen')) panel._fsToggle.exit();
-    var rect = panel.getBoundingClientRect();
-    panel.style.left = rect.left + 'px';
-    panel.style.top = rect.top + 'px';
-    panel.style.right = 'auto';
-    panel.style.bottom = 'auto';
-    panel.style.transform = 'none';
-    offsetX = e.clientX - rect.left;
-    offsetY = e.clientY - rect.top;
-    document.body.style.userSelect = 'none';
-  });
-  document.addEventListener('mousemove', function (e) {
-    if (!dragging) return;
-    panel.style.left = (e.clientX - offsetX) + 'px';
-    panel.style.top = (e.clientY - offsetY) + 'px';
-  });
-  document.addEventListener('mouseup', function () {
-    dragging = false;
-    document.body.style.userSelect = '';
-  });
-}
-function makeFloatPanelResizable(panel, handle) {
-  var resizing = false, startX = 0, startY = 0, startW = 0, startH = 0;
-  handle.addEventListener('mousedown', function (e) {
-    resizing = true;
-    if (panel.classList.contains('floatPanel--fullscreen')) panel._fsToggle.exit();
-    var rect = panel.getBoundingClientRect();
-    startX = e.clientX; startY = e.clientY;
-    startW = rect.width; startH = rect.height;
-    panel.style.width = startW + 'px';
-    panel.style.maxWidth = 'none';
-    document.body.style.userSelect = 'none';
-    e.preventDefault();
-  });
-  document.addEventListener('mousemove', function (e) {
-    if (!resizing) return;
-    panel.style.width = Math.max(320, startW + (e.clientX - startX)) + 'px';
-    panel.style.height = Math.max(200, startH + (e.clientY - startY)) + 'px';
-  });
-  document.addEventListener('mouseup', function () {
-    resizing = false;
-    document.body.style.userSelect = '';
-  });
-}
-function makeFloatPanelFullscreenable(panel, toggleBtn) {
-  var saved = null;
-  function enter() {
-    saved = {
-      left: panel.style.left, top: panel.style.top, right: panel.style.right,
-      width: panel.style.width, height: panel.style.height,
-      maxWidth: panel.style.maxWidth, transform: panel.style.transform,
-    };
-    panel.classList.add('floatPanel--fullscreen');
-    panel.style.left = '12px'; panel.style.top = '12px'; panel.style.right = '12px'; panel.style.bottom = '12px';
-    panel.style.width = 'auto'; panel.style.height = 'auto'; panel.style.maxWidth = 'none'; panel.style.transform = 'none';
-    toggleBtn.title = 'Quitter le plein écran';
-  }
-  function exit() {
-    panel.classList.remove('floatPanel--fullscreen');
-    panel.style.bottom = '';
-    if (saved) {
-      panel.style.left = saved.left; panel.style.top = saved.top; panel.style.right = saved.right;
-      panel.style.width = saved.width; panel.style.height = saved.height;
-      panel.style.maxWidth = saved.maxWidth; panel.style.transform = saved.transform;
-    }
-    toggleBtn.title = 'Plein écran';
-  }
-  toggleBtn.addEventListener('click', function () {
-    if (panel.classList.contains('floatPanel--fullscreen')) exit(); else enter();
-  });
-  panel._fsToggle = { enter: enter, exit: exit };
-  return panel._fsToggle;
-}
-
-// ---------- Modale d'un bloc de logique (voir screens/flow/blocks/) : un
-// seul bloc ouvert à la fois, réutilise le même #nodeForm/#flowCanvas pour
-// n'importe quel bloc — voir currentBlockNodes()/currentBlockEdges(). ----------
-(function () {
-  var panel = document.getElementById('logicBlockPanel');
-  makeFloatPanelDraggable(panel, document.getElementById('logicBlockPanelHeader'));
-  makeFloatPanelResizable(panel, document.getElementById('logicBlockPanelResizeHandle'));
-  makeFloatPanelFullscreenable(panel, panel.querySelector('.floatPanelFullscreenBtn'));
-  window.openLogicBlockPanel = function (blockId) {
-    CURRENT_BLOCK_ID = blockId;
-    closeNodeForm();
-    var block = FLOW_BLOCKS.find(function (b) { return b.id === blockId; });
-    document.getElementById('logicBlockPanelTitle').textContent = (block && block.name) || '?';
-    panel.classList.remove('hidden');
-    panel._fsToggle.enter();
-    renderFlow();
-    requestAnimationFrame(drawFlowEdges);
-  };
-  window.closeLogicBlockPanel = function () {
-    panel.classList.add('hidden');
-    CURRENT_BLOCK_ID = null;
-  };
-})();
-
-// Onglet initial : ?tab=... (utilisé par les routes de CRUD des
-// événements/blocs, pour revenir directement sur le bon onglet après
-// création/modification/suppression plutôt que de laisser deviner où
-// cliquer — même patron que game_dashboard.html). ?block=<id> ouvre en
-// plus directement le bloc concerné (même idiome que ?edit=&subtab= dans
-// game_dashboard.html).
-(function () {
-  var requestedTab = {{ (request.args.get('tab') or '')|tojson }};
-  if (requestedTab) switchBuilderTab(requestedTab);
-  var requestedBlock = {{ request.args.get('block', type=int)|tojson }};
-  if (requestedBlock) openLogicBlockPanel(requestedBlock);
-})();
-
-// ---------- Timeline d'animation : piste par élément, clips Animate.css ou
-// personnalisés (images-clés), glissés/redimensionnés à la souris sur un
-// axe du temps en secondes depuis l'affichage de l'écran. Même principe de
-// panneau rétractable/redimensionnable que "Logique de la scène"
-// ci-dessus, positionné juste en dessous. ----------
-
-var ANIM_SCREEN_ID = {{ screen.id }};
-var ANIM_CLIPS = {{ animation_clips_json|safe }};
-var ANIMATE_CSS_LABELS = {{ animate_css_labels_json|safe }};
-var ANIM_PX_PER_SEC = 60;
-var animCurrentClipId = null;
-
-function animUrl(path) { return "/game/{{ game.slug }}" + path; }
-
-function animClipLabel(clip) {
-  if (clip.kind === 'custom') return '🎨 Personnalisée';
-  return '🎞️ ' + (ANIMATE_CSS_LABELS[clip.animate_name] || clip.animate_name);
-}
-
-function renderAnimTimeline() {
-  var lanesWrap = document.getElementById('animTracks');
-  var ticksWrap = document.getElementById('animRuler');
-  if (!lanesWrap || !ticksWrap) return;
-  lanesWrap.innerHTML = '';
-  ticksWrap.innerHTML = '';
-
-  var maxTime = ANIM_CLIPS.reduce(function(m, c) { return Math.max(m, (c.start_time || 0) + (c.duration || 1)); }, 5);
-  var totalSeconds = Math.ceil(maxTime) + 2;
-  var totalWidth = totalSeconds * ANIM_PX_PER_SEC;
-
-  var spacer = document.createElement('div');
-  spacer.className = 'animRulerSpacer';
-  ticksWrap.appendChild(spacer);
-  var ticksLane = document.createElement('div');
-  ticksLane.className = 'animRulerTicksWrap';
-  ticksLane.style.width = totalWidth + 'px';
-  for (var s = 0; s <= totalSeconds; s++) {
-    var tick = document.createElement('div');
-    tick.className = 'animRulerTick';
-    tick.style.left = (s * ANIM_PX_PER_SEC) + 'px';
-    tick.textContent = s + 's';
-    ticksLane.appendChild(tick);
-  }
-  ticksWrap.appendChild(ticksLane);
-
-  var elementIds = [];
-  ANIM_CLIPS.forEach(function(c) { if (elementIds.indexOf(c.element_id) === -1) elementIds.push(c.element_id); });
-
-  if (!elementIds.length) {
-    var empty = document.createElement('p');
-    empty.className = 'hint';
-    empty.style.padding = '10px 0';
-    empty.textContent = "Aucun clip pour l'instant — choisis un élément ci-dessus et clique « Ajouter un clip ».";
-    lanesWrap.appendChild(empty);
-    return;
-  }
-
-  elementIds.forEach(function(elId) {
-    var track = document.createElement('div');
-    track.className = 'animTrack';
-
-    var label = document.createElement('div');
-    label.className = 'animTrackLabel';
-    label.textContent = ELEMENTS_LABELS[elId] || ('elt-' + elId);
-    track.appendChild(label);
-
-    var lane = document.createElement('div');
-    lane.className = 'animTrackLane';
-    lane.style.width = totalWidth + 'px';
-
-    ANIM_CLIPS.filter(function(c) { return c.element_id === elId; }).forEach(function(clip) {
-      var block = document.createElement('div');
-      block.className = 'animClip';
-      block.style.left = ((clip.start_time || 0) * ANIM_PX_PER_SEC) + 'px';
-      block.style.width = Math.max(24, (clip.duration || 1) * ANIM_PX_PER_SEC) + 'px';
-      block.textContent = animClipLabel(clip);
-      block.dataset.clipId = clip.id;
-      block.addEventListener('mousedown', function(e) { onAnimClipMouseDown(e, clip.id); });
-      var handle = document.createElement('div');
-      handle.className = 'animClipResizeHandle';
-      handle.addEventListener('mousedown', function(e) { onAnimClipResizeMouseDown(e, clip.id); });
-      block.appendChild(handle);
-      lane.appendChild(block);
-    });
-
-    track.appendChild(lane);
-    lanesWrap.appendChild(track);
-  });
-}
-
-function onAnimClipMouseDown(e, clipId) {
-  if (e.target.classList.contains('animClipResizeHandle')) return;
-  e.preventDefault();
-  e.stopPropagation();
-  var clip = ANIM_CLIPS.find(function(c) { return c.id === clipId; });
-  var block = document.querySelector('.animClip[data-clip-id="' + clipId + '"]');
-  var startX = e.clientX;
-  var startLeft = parseFloat(block.style.left);
-  var moved = false;
-  function onMove(ev) {
-    var dx = ev.clientX - startX;
-    if (Math.abs(dx) > 3) moved = true;
-    block.style.left = Math.max(0, startLeft + dx) + 'px';
-  }
-  function onUp() {
-    document.removeEventListener('mousemove', onMove);
-    document.removeEventListener('mouseup', onUp);
-    if (moved) {
-      var newStart = Math.round((parseFloat(block.style.left) / ANIM_PX_PER_SEC) * 10) / 10;
-      clip.start_time = newStart;
-      updateAnimClip(clipId, { start_time: newStart });
-    } else {
-      openAnimClipForm(clip);
-    }
-  }
-  document.addEventListener('mousemove', onMove);
-  document.addEventListener('mouseup', onUp);
-}
-
-function onAnimClipResizeMouseDown(e, clipId) {
-  e.preventDefault();
-  e.stopPropagation();
-  var clip = ANIM_CLIPS.find(function(c) { return c.id === clipId; });
-  var block = document.querySelector('.animClip[data-clip-id="' + clipId + '"]');
-  var startX = e.clientX;
-  var startWidth = parseFloat(block.style.width);
-  function onMove(ev) {
-    var dx = ev.clientX - startX;
-    block.style.width = Math.max(10, startWidth + dx) + 'px';
-  }
-  function onUp() {
-    document.removeEventListener('mousemove', onMove);
-    document.removeEventListener('mouseup', onUp);
-    var newDuration = Math.round((parseFloat(block.style.width) / ANIM_PX_PER_SEC) * 10) / 10;
-    clip.duration = newDuration;
-    updateAnimClip(clipId, { duration: newDuration });
-  }
-  document.addEventListener('mousemove', onMove);
-  document.addEventListener('mouseup', onUp);
-}
-
-function updateAnimClip(clipId, fields) {
-  return fetch(animUrl('/animations/clips/' + clipId + '/update'), {
-    method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(fields)
-  }).then(function(r) { return r.json(); }).then(function(updated) {
-    var idx = ANIM_CLIPS.findIndex(function(c) { return c.id === updated.id; });
-    if (idx > -1) ANIM_CLIPS[idx] = updated;
-    return updated;
-  });
-}
-
-function addAnimTrack() {
-  var elId = parseInt(document.getElementById('anim-new-track-element').value, 10);
-  fetch(animUrl('/screens/' + ANIM_SCREEN_ID + '/animations/clips/add'), {
-    method: 'POST', headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ element_id: elId, kind: 'animate_css', animate_name: 'fadeIn', start_time: 0, duration: 1 }),
-  }).then(function(r) { return r.json(); }).then(function(clip) {
-    ANIM_CLIPS.push(clip);
-    renderAnimTimeline();
-    openAnimClipForm(clip);
-  });
-}
-
-function toggleAnimClipKind() {
-  var kind = document.getElementById('anim-clip-kind').value;
-  document.getElementById('anim-clip-animate-css-fields').style.display = kind === 'animate_css' ? 'block' : 'none';
-  document.getElementById('anim-clip-custom-fields').style.display = kind === 'custom' ? 'block' : 'none';
-}
-
-function addAnimKeyframeRow(percent, cssText) {
-  var wrap = document.getElementById('anim-clip-keyframes');
-  var row = document.createElement('div');
-  row.className = 'fieldRow animKeyframeRow';
-  var percentInput = document.createElement('input');
-  percentInput.type = 'number'; percentInput.min = '0'; percentInput.max = '100'; percentInput.step = '1';
-  percentInput.className = 'anim-kf-percent'; percentInput.style.flex = '0 0 70px';
-  percentInput.value = percent != null ? percent : 0;
-  var cssInput = document.createElement('textarea');
-  cssInput.className = 'anim-kf-css'; cssInput.style.flex = '1'; cssInput.rows = 2;
-  cssInput.placeholder = 'ex. opacity: 0; transform: scale(0.5);';
-  cssInput.value = cssText || '';
-  var removeBtn = document.createElement('button');
-  removeBtn.type = 'button'; removeBtn.className = 'smallBtn danger';
-  removeBtn.textContent = '✕';
-  removeBtn.onclick = function() { row.remove(); };
-  row.appendChild(percentInput);
-  row.appendChild(cssInput);
-  row.appendChild(removeBtn);
-  wrap.appendChild(row);
-}
-
-function collectAnimKeyframes() {
-  var rows = document.querySelectorAll('#anim-clip-keyframes .animKeyframeRow');
-  var keyframes = [];
-  rows.forEach(function(row) {
-    var percent = parseFloat(row.querySelector('.anim-kf-percent').value) || 0;
-    var cssText = row.querySelector('.anim-kf-css').value;
-    var props = {};
-    cssText.split(';').forEach(function(decl) {
-      var parts = decl.split(':');
-      if (parts.length === 2) {
-        var prop = parts[0].trim(), val = parts[1].trim();
-        if (prop && val) props[prop] = val;
-      }
-    });
-    keyframes.push({ percent: percent, props: props });
-  });
-  return keyframes;
-}
-
-function openAnimClipForm(clip) {
-  animCurrentClipId = clip.id;
-  document.getElementById('animClipForm').style.display = 'block';
-  document.getElementById('animClipFormTitle').textContent = 'Clip — ' + (ELEMENTS_LABELS[clip.element_id] || ('elt-' + clip.element_id));
-  document.getElementById('anim-clip-kind').value = clip.kind || 'animate_css';
-  document.getElementById('anim-clip-animate-name').value = clip.animate_name || 'fadeIn';
-  document.getElementById('anim-clip-start').value = clip.start_time || 0;
-  document.getElementById('anim-clip-duration').value = clip.duration || 1;
-  document.getElementById('anim-clip-delay').value = clip.delay || 0;
-  document.getElementById('anim-clip-easing').value = clip.easing || 'ease';
-  document.getElementById('anim-clip-iteration').value = clip.iteration_count || '1';
-  document.getElementById('anim-clip-keyframes').innerHTML = '';
-  var keyframes = [];
-  if (clip.custom_keyframes) {
-    try { keyframes = JSON.parse(clip.custom_keyframes); } catch (e) { /* ignore */ }
-  }
-  if (!keyframes.length) keyframes = [{ percent: 0, props: { opacity: '0' } }, { percent: 100, props: { opacity: '1' } }];
-  keyframes.forEach(function(k) {
-    var cssText = Object.keys(k.props || {}).map(function(p) { return p + ': ' + k.props[p] + ';'; }).join(' ');
-    addAnimKeyframeRow(k.percent, cssText);
-  });
-  toggleAnimClipKind();
-  document.querySelectorAll('.animClip').forEach(function(b) {
-    b.classList.toggle('selected', parseInt(b.dataset.clipId, 10) === clip.id);
-  });
-}
-
-function closeAnimClipForm() {
-  animCurrentClipId = null;
-  document.getElementById('animClipForm').style.display = 'none';
-  document.querySelectorAll('.animClip').forEach(function(b) { b.classList.remove('selected'); });
-}
-
-function saveAnimClipForm() {
-  if (!animCurrentClipId) return Promise.resolve();
-  var kind = document.getElementById('anim-clip-kind').value;
-  var fields = {
-    kind: kind,
-    animate_name: document.getElementById('anim-clip-animate-name').value,
-    start_time: parseFloat(document.getElementById('anim-clip-start').value) || 0,
-    duration: parseFloat(document.getElementById('anim-clip-duration').value) || 1,
-    delay: parseFloat(document.getElementById('anim-clip-delay').value) || 0,
-    easing: document.getElementById('anim-clip-easing').value,
-    iteration_count: document.getElementById('anim-clip-iteration').value,
-  };
-  if (kind === 'custom') fields.custom_keyframes = collectAnimKeyframes();
-  return updateAnimClip(animCurrentClipId, fields).then(function() { renderAnimTimeline(); });
-}
-
-function deleteAnimClipForm() {
-  if (!animCurrentClipId) return;
-  if (!confirm('Supprimer ce clip ?')) return;
-  var id = animCurrentClipId;
-  fetch(animUrl('/animations/clips/' + id + '/delete'), { method: 'POST' }).then(function() {
-    ANIM_CLIPS = ANIM_CLIPS.filter(function(c) { return c.id !== id; });
-    closeAnimClipForm();
-    renderAnimTimeline();
-  });
-}
-
-function previewAnimClip() {
-  if (!animCurrentClipId) return;
-  saveAnimClipForm().then(function() {
-    var clip = ANIM_CLIPS.find(function(c) { return c.id === animCurrentClipId; });
-    if (!clip) return;
-    var target = document.querySelector('#canvas [data-anim-target="' + clip.element_id + '"]');
-    if (!target) return;
-    var duration = clip.duration || 1, delay = clip.delay || 0;
-    var iterationCount = clip.iteration_count || '1';
-    if (clip.kind === 'custom') {
-      var keyframes = [];
-      try { keyframes = JSON.parse(clip.custom_keyframes || '[]'); } catch (e) { /* ignore */ }
-      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(' ');
-      var styleTag = document.getElementById('animEditorPreviewStyle');
-      if (!styleTag) {
-        styleTag = document.createElement('style');
-        styleTag.id = 'animEditorPreviewStyle';
-        document.head.appendChild(styleTag);
-      }
-      styleTag.textContent = '@keyframes animEditorPreview { ' + steps + ' }';
-      target.style.animation = 'animEditorPreview ' + duration + 's ' + (clip.easing || 'ease') + ' ' + delay + 's ' + iterationCount;
-      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);
-      target.addEventListener('animationend', function handler() {
-        target.classList.remove('animate__animated', animClass);
-        target.removeEventListener('animationend', handler);
-      });
-    }
-  });
-}
-
-// Panneau timeline absent sur un écran-modèle (élément de jeu), comme le
-// panneau de logique — voir le commentaire Jinja au-dessus de .builderTabs.
-var HAS_ANIM_PANEL = !!document.getElementById('animTabPanel');
-if (HAS_ANIM_PANEL) { renderAnimTimeline(); }
 </script>
 {% endblock %}
diff --git a/tests/conftest.py b/tests/conftest.py
index 310c3cdc..bb350fdc 100644
--- a/tests/conftest.py
+++ b/tests/conftest.py
@@ -87,7 +87,19 @@ 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")
+_STATIC_DIR = os.path.join(os.path.dirname(os.path.dirname(os.path.abspath(__file__))), "static", "js")
+_PLAY_JS_DIR = os.path.join(_STATIC_DIR, "play")
+_SCREEN_EDIT_JS_DIR = os.path.join(_STATIC_DIR, "screen_edit")
+
+
+def _js_bundle(directory):
+    parts = []
+    for name in sorted(os.listdir(directory)):
+        path = os.path.join(directory, 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)
 
 
 def play_js_bundle():
@@ -98,13 +110,13 @@ def play_js_bundle():
     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)
+    return _js_bundle(_PLAY_JS_DIR)
+
+
+def screen_edit_js_bundle():
+    """Même principe que play_js_bundle(), pour l'éditeur (static/js/
+    screen_edit/, extrait de templates/screen_edit.html)."""
+    return _js_bundle(_SCREEN_EDIT_JS_DIR)
 
 
 @pytest.fixture
diff --git a/tests/test_condition_variable.py b/tests/test_condition_variable.py
index 3705b1e4..3b2fff28 100644
--- a/tests/test_condition_variable.py
+++ b/tests/test_condition_variable.py
@@ -13,6 +13,8 @@ passent."""
 import json
 import re
 
+from conftest import screen_edit_js_bundle
+
 
 def _create_screen(client, slug, name="Accueil"):
     resp = client.post(f"/game/{slug}/screens/new", data={"name": name}, follow_redirects=False)
@@ -88,7 +90,7 @@ def test_screen_edit_panel_exposes_variable_source_condition_ui(client, game):
     assert 'id="nf-cond-source"' in html
     assert 'id="nf-cond-variable-fields"' in html
     assert "onFlowConditionSourceChange" in html
-    assert "onFlowClauseSourceChange" in html
+    assert "onFlowClauseSourceChange" in screen_edit_js_bundle()
 
 
 def test_condition_builder_still_available_without_any_object_defined(client, game):
diff --git a/tests/test_flow_clicked_row.py b/tests/test_flow_clicked_row.py
index 6c40c56b..c31ea1b9 100644
--- a/tests/test_flow_clicked_row.py
+++ b/tests/test_flow_clicked_row.py
@@ -10,6 +10,8 @@ import re
 import db
 import screens
 
+from conftest import screen_edit_js_bundle
+
 
 def _create_screen(client, slug, name="Accueil"):
     resp = client.post(f"/game/{slug}/screens/new", data={"name": name}, follow_redirects=False)
@@ -105,6 +107,8 @@ def test_ordinary_fixed_row_target_is_unaffected(client, game):
 def test_clicked_row_option_appears_in_the_flow_node_editor(client, game):
     _create_email_object(client, game)
     screen_id = _create_screen(client, game)
-    html = client.get(f"/game/{game}/screens/{screen_id}/edit").data.decode()
-    assert "FLOW_CLICKED_ROW_ID" in html
-    assert "Ligne cliquée" in html
+    resp = client.get(f"/game/{game}/screens/{screen_id}/edit")
+    assert resp.status_code == 200
+    js = screen_edit_js_bundle()
+    assert "FLOW_CLICKED_ROW_ID" in js
+    assert "Ligne cliquée" in js