From 0babad501837e8ce7bc449d875d088f5a1bb5024 Mon Sep 17 00:00:00 2001
From: william <you@example.com>
Date: Mon, 21 Sep 2026 09:35:54 +0200
Subject: [PATCH] Corrige la modale d'arbre du Scenario transparente

Retour utilisateur : "la modale est transparente". Cause : les tokens
--doc-* (couleurs de fond/bordure/texte de l'editeur) sont definis
uniquement sur .docEditor3 ; #docScenarioTreeModal est volontairement
un FRERE de .docEditor3 dans le HTML (jamais un descendant, sinon
position:fixed serait rogne par le overflow:hidden de main.content --
meme bug deja trouve le 20/09/2026 pour le bandeau d'outils), donc ne
les heritait jamais -- var(--doc-bg-2) etc. retombaient sur transparent
partout dans la modale (fond du dialogue, mais aussi toutes les
couleurs d'accent/bordures/succes du graphe visuel).

Duplique la definition des tokens --doc-* sur #docScenarioTreeModal
(meme valeurs, meme variante [data-theme="light"]) plutot que de
deplacer la modale dans le DOM. forgeDocApplyTheme pose desormais le
meme data-theme sur les deux elements pour qu'ils restent synchronises.

Verifie via simulation DOM reelle (jsdom) : les deux elements recoivent
bien le meme data-theme apres un changement de theme.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 static/document/document-editor.css   | 25 ++++++++++++++++++++++---
 static/document/js/document-editor.js |  6 ++++++
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/static/document/document-editor.css b/static/document/document-editor.css
index d3a27549..3deb9148 100644
--- a/static/document/document-editor.css
+++ b/static/document/document-editor.css
@@ -21,7 +21,20 @@ body.objectEditBody > main.content {
   margin: 0;
 }
 
-.docEditor3 {
+/* La modale (#docScenarioTreeModal) partage ces tokens --doc-* MAIS
+   reste volontairement un FRÈRE de .docEditor3 dans le HTML (jamais un
+   descendant) : main.content (voir body.objectEditBody dans
+   static/style.css) a déjà `overflow:hidden`, qui ROGNE VISUELLEMENT
+   tout descendant `position:fixed` à sa propre boîte (même bug déjà
+   trouvé le 20/09/2026 pour le bandeau d'outils, voir plus bas) — un
+   `position:fixed` doit donc rester un frère de .docEditor3, jamais un
+   enfant, pour couvrir le VRAI viewport. D'où la duplication de ce
+   sélecteur ici plutôt qu'un simple héritage de variables CSS (qui ne
+   franchit pas la frontière DOM entre frères) — voir aussi
+   forgeDocApplyTheme (static/document/js/document-editor.js), qui pose
+   le même data-theme sur les deux éléments. */
+.docEditor3,
+#docScenarioTreeModal {
   --doc-bg: var(--forge-bg);
   --doc-bg-2: var(--forge-bg-secondary);
   --doc-card: var(--forge-card);
@@ -37,7 +50,9 @@ body.objectEditBody > main.content {
   --doc-quiz-danger-bg: rgb(255 95 46 / 12%);
   --doc-quiz-danger-border: #ff5f2e;
   --doc-quiz-danger-text: #ffb3a0;
+}
 
+.docEditor3 {
   /* Remplit main.content (voir body.objectEditBody dans static/style.css :
      `main.content` y est déjà `flex:1 1 auto; min-height:0; overflow:hidden;
      display:flex; flex-direction:column;`) — jamais `position:fixed` : cet
@@ -56,7 +71,8 @@ body.objectEditBody > main.content {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 }
 
-.docEditor3[data-theme="light"] {
+.docEditor3[data-theme="light"],
+#docScenarioTreeModal[data-theme="light"] {
   --doc-bg: #f6f5f2;
   --doc-bg-2: #fff;
   --doc-card: #fff;
@@ -72,7 +88,8 @@ body.objectEditBody > main.content {
   --doc-quiz-danger-text: #7a1418;
 }
 
-.docEditor3 * {
+.docEditor3 *,
+#docScenarioTreeModal * {
   box-sizing: border-box;
 }
 
@@ -1411,6 +1428,8 @@ img.docImage {
   align-items: center;
   justify-content: center;
   padding: 24px;
+  color: var(--doc-text);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 }
 
 .docModalBackdrop.is-open {
diff --git a/static/document/js/document-editor.js b/static/document/js/document-editor.js
index d6f61220..c8f987cc 100644
--- a/static/document/js/document-editor.js
+++ b/static/document/js/document-editor.js
@@ -2501,6 +2501,12 @@ function forgeDocBindPreviewToggle() {
 function forgeDocApplyTheme(theme) {
   const editor = document.getElementById('docEditor3');
   editor.dataset.theme = theme;
+  // #docScenarioTreeModal reste un FRÈRE de .docEditor3 dans le HTML
+  // (jamais un descendant — voir static/document/document-editor.css
+  // pour pourquoi), donc ne reçoit pas data-theme par simple héritage :
+  // posé ici explicitement pour que la modale suive le même thème.
+  const scenarioModal = document.getElementById('docScenarioTreeModal');
+  if (scenarioModal) scenarioModal.dataset.theme = theme;
   const toggle = document.getElementById('docThemeToggle');
   toggle.innerHTML = theme === 'light'
     ? '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20 14.5A8.5 8.5 0 1 1 9.5 4a7 7 0 0 0 10.5 10.5z"/></svg>'