Highlight the selected element on the canvas even when it's nested

A top-level element already got a selection border via its
.canvasElement wrapper, but a child posed inside a container/répéteur/
groupe de champs has no such separate frame, so selecting it from the
tree gave no visual feedback on the canvas at all.

applySelectionHighlight() now targets the element's own tag directly via
data-element-id (present on every rendered element, nested or not) and
outlines it, re-run after every canvas refresh path (initial load, full
pjax navigation, partial panel refresh, and the autosave-only canvas
refresh).

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

templates/screen_edit.html

@@ -655,6 +655,26 @@ function restoreTreeCollapsedState() {
   });
 }
 
+// ---------- 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');
+}
+
 if (!window.__forgeTreeToggleBound) {
   window.__forgeTreeToggleBound = true;
   document.addEventListener('click', function (e) {
@@ -714,6 +734,7 @@ function refreshCanvasOnly() {
       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
@@ -925,6 +946,7 @@ function initBuilderPanel() {
   bindPropsAutosave();
   bindJaugeDefinitionSelect();
   restoreTreeCollapsedState();
+  applySelectionHighlight(CURRENT_SELECTED_ID);
 }
 
 // Jauge : quand on change l'objet de données à suivre SANS quitter le