Make the left element-tree panel floating/draggable/closable too, same as the right one

Generalized the floating-panel mechanism from the properties panel (props/propsPanelFloat/propsPanelReopenBtn) into reusable functions keyed by a short id, and applied it to the left "Éléments de cet écran" panel (key "left", panelLeftFloat, panelLeftReopenBtn). Both panels can now be closed independently, letting the canvas take the screen's full width for the most faithful possible preview against the actual /play rendering. Shared CSS (.floatPanel/.floatPanelHeader/.floatPanelBody/.floatPanelReopenBtn with --left/--right position variants) replaces the props-panel-only rules from the previous commit.

Fixed the two querySelector('.builderPanel .elementTree') call sites (used to patch the tree preview into the DOM after an unrelated canvas-only refresh) that would have silently stopped finding the tree once its wrapper's class changed.

static/style.css

@@ -150,33 +150,37 @@ body.builderBody > main.content{ flex:1 1 auto; min-height:0; overflow:hidden; d
    toutes les trois occupent exactement la même hauteur (celle qui reste
    disponible), avec leur propre défilement interne si leur contenu dépasse. */
 .builder3{ display:flex; gap:20px; align-items:stretch; margin-top:14px; flex:1 1 auto; min-height:0; }
-.builderPanel{ flex:0 0 260px; min-width:0; height:100%; overflow-y:auto; }
 .builderCanvasArea{ flex:1 1 auto; min-width:0; height:100%; overflow-y:auto; display:flex; flex-direction:column; }
 
-/* ---------- Panneau de propriétés flottant ---------- */
-/* Sorti du flux flex de .builder3 (position:fixed) : .builderCanvasArea
-   (flex:1 1 auto) récupère automatiquement l'espace libéré, sans réglage
-   supplémentaire — un panneau flottant repositionné par l'utilisateur
-   n'agrandit/ne rétrécit donc jamais le canevas de travers. Position et
-   état ouvert/fermé mémorisés par écran (voir restorePropsPanelState dans
-   screen_edit.html) pour survivre à un changement de sélection ou un
-   rechargement. */
-.builderPanelRight{
-  position:fixed; top:90px; right:24px; width:340px; max-height:calc(100vh - 120px);
+/* ---------- Panneaux gauche/droite flottants ---------- */
+/* Les deux panneaux (éléments de l'écran / propriétés) sont sortis du flux
+   flex de .builder3 (position:fixed) : .builderCanvasArea (flex:1 1 auto)
+   récupère automatiquement tout l'espace libéré, sans réglage
+   supplémentaire — les fermer donne donc une prévisualisation aussi large
+   que possible, aussi fidèle que possible à ce que "Jouer" affiche
+   réellement. Position et état ouvert/fermé mémorisés par écran (voir
+   floatPanel*() dans screen_edit.html) pour survivre à un changement de
+   sélection (qui remplace tout #builder3) ou un rechargement. */
+.floatPanel{
+  position:fixed; top:90px; max-height:calc(100vh - 120px);
   min-width:0; display:flex; flex-direction:column; z-index:60;
   background:var(--panel); border:1px solid var(--border); border-radius:10px;
   box-shadow:0 12px 40px rgba(0,0,0,.55);
 }
-.builderPanelRight.hidden{ display:none; }
-.propsPanelHeader{
+.floatPanel.hidden{ display:none; }
+.floatPanel--left{ left:24px; width:280px; }
+.floatPanel--right{ right:24px; width:340px; }
+.floatPanelHeader{
   display:flex; align-items:center; justify-content:space-between; gap:8px;
   padding:8px 10px; border-bottom:1px solid var(--border); background:var(--panel2);
   border-radius:10px 10px 0 0; cursor:move; flex:0 0 auto; user-select:none;
 }
-.propsPanelHeader .propsPanelTitle{ font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em; }
-.propsPanelBody{ padding:12px; overflow-y:auto; min-height:0; flex:1 1 auto; }
-#propsPanelReopenBtn{ position:fixed; top:90px; right:24px; z-index:60; display:none; }
-#propsPanelReopenBtn.visible{ display:inline-flex; }
+.floatPanelHeader .floatPanelTitle{ font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em; }
+.floatPanelBody{ padding:12px; overflow-y:auto; min-height:0; flex:1 1 auto; }
+.floatPanelReopenBtn{ position:fixed; top:90px; z-index:60; display:none; }
+.floatPanelReopenBtn.visible{ display:inline-flex; }
+#panelLeftReopenBtn{ left:24px; }
+#propsPanelReopenBtn{ right:24px; }
 
 .widgetGrid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
 .widgetBtnForm{ margin:0; }
@@ -314,7 +318,7 @@ body.builderBody > main.content{ flex:1 1 auto; min-height:0; overflow:hidden; d
 .sliderValue{ min-width:44px; text-align:right; }
 input[type=color]{ width:52px; height:34px; padding:2px; }
 
-.propsPanel .sectionDivider, .builderPanelRight .sectionDivider{ border:none; border-top:1px solid var(--border); margin:14px 0; }
+.propsPanel .sectionDivider, .floatPanel .sectionDivider{ border:none; border-top:1px solid var(--border); margin:14px 0; }
 .actionAddForm{ margin-top:10px; }
 
 .uploadRow{ margin-top:6px; }
@@ -330,13 +334,13 @@ code{ background:var(--panel2); border:1px solid var(--border); border-radius:4p
   body.builderBody{ height:auto; overflow:visible; }
   body.builderBody > main.content{ overflow:visible; }
   .builder3{ flex-direction:column; flex:none; }
-  .builderPanel, .builderCanvasArea{ flex:none; width:100%; height:auto; max-height:none; overflow:visible; }
+  .builderCanvasArea{ flex:none; width:100%; height:auto; max-height:none; overflow:visible; }
   /* Trop peu de largeur pour qu'un panneau flottant ait un sens (il
-     couvrirait tout l'écran) : il rejoint la pile normale comme les deux
-     autres colonnes, redimensionnement/déplacement désactivés (voir le
-     garde useFloatingPanel() dans screen_edit.html). */
-  .builderPanelRight{ position:static; flex:none; width:100%; height:auto; max-height:none; box-shadow:none; top:auto; right:auto; }
-  #propsPanelReopenBtn{ display:none !important; }
+     couvrirait tout l'écran) : les deux rejoignent la pile normale et
+     restent toujours ouverts/visibles, quel que soit l'état mémorisé —
+     .hidden est ignoré grâce au "!important" sur "display" ci-dessous. */
+  .floatPanel{ position:static; flex:none; width:100%; height:auto; max-height:none; box-shadow:none; top:auto; left:auto; right:auto; display:flex !important; }
+  .floatPanelReopenBtn{ display:none !important; }
 }
 
 /* ---------- Logique de la scène : éditeur de flow à nœuds ---------- */