update sidenote, properly remove mermaid zoom

app/src/components/Sidenote.astro

@@ -86,11 +86,43 @@
     });
   };
 
+  // Vérifier que les styles sont bien appliqués
+  const verifyStylesApplied = () => {
+    const wrappers = document.querySelectorAll(".sidenote-wrapper");
+    let allApplied = true;
+
+    wrappers.forEach((wrapper) => {
+      const sidenote = wrapper.querySelector(
+        ".sidenote-container",
+      ) as HTMLElement;
+      if (sidenote) {
+        const computed = window.getComputedStyle(sidenote);
+        // Vérifier que position absolute est bien appliquée
+        if (computed.position !== "absolute" && window.innerWidth > 768) {
+          allApplied = false;
+          // Réappliquer les styles si nécessaire
+          sidenote.style.position = "absolute";
+          sidenote.style.top = "0";
+          sidenote.style.right = "-292px";
+          sidenote.style.width = "260px";
+          sidenote.style.display = "block";
+        }
+      }
+    });
+
+    return allApplied;
+  };
+
   // Fonction pour démarrer l'initialisation avec observer si nécessaire
   const startInit = () => {
     // Essayer immédiatement
     initSidenotes();
 
+    // Vérifier et réappliquer les styles si nécessaire
+    setTimeout(() => {
+      verifyStylesApplied();
+    }, 50);
+
     // Si on ne trouve pas de sidenotes, utiliser MutationObserver pour attendre
     // que le contenu MDX soit rendu (important pour les Spaces Hugging Face)
     const containers = document.querySelectorAll(".sidenote-container");
@@ -102,10 +134,14 @@
         if (newContainers.length > 0) {
           // Des sidenotes sont apparus, initialiser
           initSidenotes();
+          // Vérifier les styles après initialisation
+          setTimeout(() => {
+            verifyStylesApplied();
+          }, 50);
           // Arrêter l'observation après un délai pour éviter les boucles infinies
           setTimeout(() => {
             obs.disconnect();
-          }, 5000); // 5 secondes max
+          }, 5000);
         }
       });
 
@@ -125,16 +161,66 @@
     }
   };
 
-  // Exécuter immédiatement si le DOM est déjà chargé, sinon attendre DOMContentLoaded
-  if (document.readyState === "loading") {
-    document.addEventListener("DOMContentLoaded", startInit, {
-      once: true,
-    });
-  } else {
-    // Le DOM est déjà chargé, exécuter immédiatement
-    // Mais utiliser un petit délai pour s'assurer que tous les composants sont rendus
-    setTimeout(startInit, 100);
-  }
+  // Attendre que toutes les ressources soient chargées (images, etc.)
+  const waitForFullLoad = () => {
+    // Helper pour utiliser requestIdleCallback si disponible
+    const idleOrTimeout = (callback: () => void, timeout: number) => {
+      if (typeof (window as any).requestIdleCallback === "function") {
+        (window as any).requestIdleCallback(callback, { timeout });
+      } else {
+        setTimeout(callback, timeout);
+      }
+    };
+
+    if (document.readyState === "loading") {
+      // Attendre DOMContentLoaded puis window.load
+      document.addEventListener(
+        "DOMContentLoaded",
+        () => {
+          idleOrTimeout(startInit, 300);
+        },
+        { once: true },
+      );
+
+      // Aussi attendre window.load pour les ressources
+      window.addEventListener(
+        "load",
+        () => {
+          setTimeout(() => {
+            initSidenotes();
+            verifyStylesApplied();
+          }, 100);
+        },
+        { once: true },
+      );
+    } else if (document.readyState === "interactive") {
+      // DOM est chargé mais pas toutes les ressources
+      idleOrTimeout(startInit, 300);
+
+      // Aussi attendre window.load
+      window.addEventListener(
+        "load",
+        () => {
+          setTimeout(() => {
+            initSidenotes();
+            verifyStylesApplied();
+          }, 100);
+        },
+        { once: true },
+      );
+    } else {
+      // Tout est déjà chargé
+      idleOrTimeout(startInit, 300);
+
+      // Vérifier une dernière fois après un délai pour s'assurer que tout est bien rendu
+      setTimeout(() => {
+        initSidenotes();
+        verifyStylesApplied();
+      }, 500);
+    }
+  };
+
+  waitForFullLoad();
 </script>
 
 <style is:global>

app/src/scripts/mermaid-zoom.js

@@ -19,122 +19,122 @@ if (!MERMAID_ZOOM_ENABLED) {
         openZoom: () => { },
         closeZoom: () => { }
     };
-    // Arrêter l'exécution ici
-    throw new Error("Mermaid zoom disabled");
-}
-
-// Fonction pour appliquer les styles Mermaid au SVG selon le thème
-function applyMermaidStylesToSvg(svgElement) {
-    try {
-        const isDark = document.documentElement.getAttribute("data-theme") === "dark";
-        console.log(`🎨 Applying Mermaid styles for theme: ${isDark ? 'dark' : 'light'}`);
-
-        // Couleurs selon le thème - avec plus de contraste pour le zoom
-        const colors = isDark ? {
-            nodeFill: '#1a1a1a',
-            nodeStroke: '#ffffff',
-            nodeStrokeWidth: '2', // Plus épais pour plus de visibilité
-            clusterFill: '#2a2a2a',
-            clusterStroke: '#ffffff',
-            clusterStrokeWidth: '2',
-            pathStroke: '#ffffff',
-            pathStrokeWidth: '2', // Plus épais pour les flèches
-            textColor: '#ffffff',
-            linkColor: '#ffffff' // Couleur spécifique pour les liens
-        } : {
-            nodeFill: '#ffffff',
-            nodeStroke: '#000000', // Noir pur pour plus de contraste
-            nodeStrokeWidth: '2',
-            clusterFill: '#f9f9f9',
-            clusterStroke: '#000000', // Noir pur
-            clusterStrokeWidth: '2',
-            pathStroke: '#000000', // Noir pur pour les flèches
-            pathStrokeWidth: '2',
-            textColor: '#000000', // Noir pur
-            linkColor: '#000000' // Noir pur pour les liens
-        };
-
-        // Appliquer border-radius aux rectangles
-        const rects = svgElement.querySelectorAll('rect:not(.flowchart-link), .node rect, .nodeLabel rect');
-        rects.forEach(rect => {
-            rect.setAttribute('rx', '8');
-            rect.setAttribute('ry', '8');
-            rect.setAttribute('fill', colors.nodeFill);
-            rect.setAttribute('stroke', colors.nodeStroke);
-            rect.setAttribute('stroke-width', colors.nodeStrokeWidth);
-        });
+    // Arrêter l'exécution ici sans lancer d'erreur
+    // Le reste du code ne s'exécutera pas car tout est dans le bloc if ci-dessous
+} else {
 
-        // Appliquer border-radius et couleurs aux clusters
-        const clusterRects = svgElement.querySelectorAll('.cluster rect');
-        clusterRects.forEach(rect => {
-            rect.setAttribute('rx', '8');
-            rect.setAttribute('ry', '8');
-            rect.setAttribute('fill', colors.clusterFill);
-            rect.setAttribute('stroke', colors.clusterStroke);
-            rect.setAttribute('stroke-width', colors.clusterStrokeWidth);
-        });
+    // Fonction pour appliquer les styles Mermaid au SVG selon le thème
+    function applyMermaidStylesToSvg(svgElement) {
+        try {
+            const isDark = document.documentElement.getAttribute("data-theme") === "dark";
+            console.log(`🎨 Applying Mermaid styles for theme: ${isDark ? 'dark' : 'light'}`);
+
+            // Couleurs selon le thème - avec plus de contraste pour le zoom
+            const colors = isDark ? {
+                nodeFill: '#1a1a1a',
+                nodeStroke: '#ffffff',
+                nodeStrokeWidth: '2', // Plus épais pour plus de visibilité
+                clusterFill: '#2a2a2a',
+                clusterStroke: '#ffffff',
+                clusterStrokeWidth: '2',
+                pathStroke: '#ffffff',
+                pathStrokeWidth: '2', // Plus épais pour les flèches
+                textColor: '#ffffff',
+                linkColor: '#ffffff' // Couleur spécifique pour les liens
+            } : {
+                nodeFill: '#ffffff',
+                nodeStroke: '#000000', // Noir pur pour plus de contraste
+                nodeStrokeWidth: '2',
+                clusterFill: '#f9f9f9',
+                clusterStroke: '#000000', // Noir pur
+                clusterStrokeWidth: '2',
+                pathStroke: '#000000', // Noir pur pour les flèches
+                pathStrokeWidth: '2',
+                textColor: '#000000', // Noir pur
+                linkColor: '#000000' // Noir pur pour les liens
+            };
 
-        // Appliquer les couleurs aux nœuds
-        const nodes = svgElement.querySelectorAll('.node');
-        nodes.forEach(node => {
-            const rect = node.querySelector('rect');
-            if (rect) {
+            // Appliquer border-radius aux rectangles
+            const rects = svgElement.querySelectorAll('rect:not(.flowchart-link), .node rect, .nodeLabel rect');
+            rects.forEach(rect => {
+                rect.setAttribute('rx', '8');
+                rect.setAttribute('ry', '8');
                 rect.setAttribute('fill', colors.nodeFill);
                 rect.setAttribute('stroke', colors.nodeStroke);
                 rect.setAttribute('stroke-width', colors.nodeStrokeWidth);
-            }
-        });
+            });
 
-        // Appliquer les couleurs aux clusters
-        const clusters = svgElement.querySelectorAll('.cluster');
-        clusters.forEach(cluster => {
-            const rect = cluster.querySelector('rect');
-            if (rect) {
+            // Appliquer border-radius et couleurs aux clusters
+            const clusterRects = svgElement.querySelectorAll('.cluster rect');
+            clusterRects.forEach(rect => {
+                rect.setAttribute('rx', '8');
+                rect.setAttribute('ry', '8');
                 rect.setAttribute('fill', colors.clusterFill);
                 rect.setAttribute('stroke', colors.clusterStroke);
                 rect.setAttribute('stroke-width', colors.clusterStrokeWidth);
-            }
-        });
+            });
 
-        // Appliquer les couleurs aux chemins et flèches
-        const paths = svgElement.querySelectorAll('.edgePath, path, .flowchart-link');
-        paths.forEach(path => {
-            path.setAttribute('stroke', colors.pathStroke);
-            path.setAttribute('stroke-width', colors.pathStrokeWidth);
-        });
+            // Appliquer les couleurs aux nœuds
+            const nodes = svgElement.querySelectorAll('.node');
+            nodes.forEach(node => {
+                const rect = node.querySelector('rect');
+                if (rect) {
+                    rect.setAttribute('fill', colors.nodeFill);
+                    rect.setAttribute('stroke', colors.nodeStroke);
+                    rect.setAttribute('stroke-width', colors.nodeStrokeWidth);
+                }
+            });
 
-        // Appliquer les couleurs aux liens spécifiquement
-        const links = svgElement.querySelectorAll('.flowchart-link, .edgeLabel');
-        links.forEach(link => {
-            link.setAttribute('stroke', colors.linkColor);
-            link.setAttribute('fill', colors.linkColor);
-        });
+            // Appliquer les couleurs aux clusters
+            const clusters = svgElement.querySelectorAll('.cluster');
+            clusters.forEach(cluster => {
+                const rect = cluster.querySelector('rect');
+                if (rect) {
+                    rect.setAttribute('fill', colors.clusterFill);
+                    rect.setAttribute('stroke', colors.clusterStroke);
+                    rect.setAttribute('stroke-width', colors.clusterStrokeWidth);
+                }
+            });
 
-        // Appliquer les couleurs au texte
-        const textElements = svgElement.querySelectorAll('text, .nodeLabel text, .edgeLabel text');
-        textElements.forEach(text => {
-            text.setAttribute('fill', colors.textColor);
-        });
+            // Appliquer les couleurs aux chemins et flèches
+            const paths = svgElement.querySelectorAll('.edgePath, path, .flowchart-link');
+            paths.forEach(path => {
+                path.setAttribute('stroke', colors.pathStroke);
+                path.setAttribute('stroke-width', colors.pathStrokeWidth);
+            });
 
-        // Appliquer les couleurs aux marqueurs de flèches
-        const markers = svgElement.querySelectorAll('marker, marker path');
-        markers.forEach(marker => {
-            marker.setAttribute('fill', colors.pathStroke);
-            marker.setAttribute('stroke', colors.pathStroke);
-        });
+            // Appliquer les couleurs aux liens spécifiquement
+            const links = svgElement.querySelectorAll('.flowchart-link, .edgeLabel');
+            links.forEach(link => {
+                link.setAttribute('stroke', colors.linkColor);
+                link.setAttribute('fill', colors.linkColor);
+            });
 
-        console.log(`🎨 Applied Mermaid styles: ${rects.length} rects, ${clusters.length} clusters, ${paths.length} paths, ${textElements.length} text elements`);
+            // Appliquer les couleurs au texte
+            const textElements = svgElement.querySelectorAll('text, .nodeLabel text, .edgeLabel text');
+            textElements.forEach(text => {
+                text.setAttribute('fill', colors.textColor);
+            });
+
+            // Appliquer les couleurs aux marqueurs de flèches
+            const markers = svgElement.querySelectorAll('marker, marker path');
+            markers.forEach(marker => {
+                marker.setAttribute('fill', colors.pathStroke);
+                marker.setAttribute('stroke', colors.pathStroke);
+            });
 
-    } catch (error) {
-        console.error('❌ Error applying styles to SVG:', error);
+            console.log(`🎨 Applied Mermaid styles: ${rects.length} rects, ${clusters.length} clusters, ${paths.length} paths, ${textElements.length} text elements`);
+
+        } catch (error) {
+            console.error('❌ Error applying styles to SVG:', error);
+        }
     }
-}
 
-// Fonction pour extraire les styles CSS appliqués au diagramme Mermaid
-function getComputedStylesForMermaid(mermaidElement) {
-    try {
-        // Styles CSS essentiels pour Mermaid (hardcodés pour éviter les problèmes CORS)
-        const essentialStyles = `
+    // Fonction pour extraire les styles CSS appliqués au diagramme Mermaid
+    function getComputedStylesForMermaid(mermaidElement) {
+        try {
+            // Styles CSS essentiels pour Mermaid (hardcodés pour éviter les problèmes CORS)
+            const essentialStyles = `
       .mermaid rect:not(.flowchart-link), 
       .mermaid .node rect, 
       .mermaid .nodeLabel rect {
@@ -170,194 +170,267 @@ function getComputedStylesForMermaid(mermaidElement) {
       }
     `;
 
-        console.log(`🎨 Using essential CSS styles for Mermaid`);
-        return essentialStyles;
+            console.log(`🎨 Using essential CSS styles for Mermaid`);
+            return essentialStyles;
 
-    } catch (error) {
-        console.error('❌ Error getting CSS styles:', error);
-        return null;
-    }
-}
-
-// Fonction pour forcer Mermaid à se re-rendre avec le bon thème
-function forceMermaidThemeUpdate(mermaidElement) {
-    try {
-        // Obtenir le thème actuel
-        const currentTheme = document.documentElement.getAttribute("data-theme");
-        console.log(`🎨 Forcing Mermaid theme update to: ${currentTheme}`);
-
-        // Trouver le diagramme Mermaid original
-        const mermaidCode = mermaidElement.textContent || mermaidElement.innerText;
-        if (!mermaidCode) {
-            console.log(`❌ No Mermaid code found to re-render`);
-            return false;
+        } catch (error) {
+            console.error('❌ Error getting CSS styles:', error);
+            return null;
         }
+    }
 
-        // Forcer le re-rendu de Mermaid avec le nouveau thème
-        if (window.mermaid) {
-            // Utiliser l'API Mermaid pour re-rendre avec le bon thème
-            const config = {
-                theme: currentTheme === 'dark' ? 'dark' : 'neutral',
-                autoTheme: true
-            };
+    // Fonction pour forcer Mermaid à se re-rendre avec le bon thème
+    function forceMermaidThemeUpdate(mermaidElement) {
+        try {
+            // Obtenir le thème actuel
+            const currentTheme = document.documentElement.getAttribute("data-theme");
+            console.log(`🎨 Forcing Mermaid theme update to: ${currentTheme}`);
+
+            // Trouver le diagramme Mermaid original
+            const mermaidCode = mermaidElement.textContent || mermaidElement.innerText;
+            if (!mermaidCode) {
+                console.log(`❌ No Mermaid code found to re-render`);
+                return false;
+            }
 
-            console.log(`🔄 Re-rendering Mermaid with config:`, config);
+            // Forcer le re-rendu de Mermaid avec le nouveau thème
+            if (window.mermaid) {
+                // Utiliser l'API Mermaid pour re-rendre avec le bon thème
+                const config = {
+                    theme: currentTheme === 'dark' ? 'dark' : 'neutral',
+                    autoTheme: true
+                };
 
-            // Re-rendre le diagramme
-            mermaid.init(undefined, mermaidElement);
+                console.log(`🔄 Re-rendering Mermaid with config:`, config);
 
-            return true;
-        } else {
-            console.log(`❌ Mermaid API not available`);
+                // Re-rendre le diagramme
+                mermaid.init(undefined, mermaidElement);
+
+                return true;
+            } else {
+                console.log(`❌ Mermaid API not available`);
+                return false;
+            }
+        } catch (error) {
+            console.error(`❌ Error forcing Mermaid theme update:`, error);
             return false;
         }
-    } catch (error) {
-        console.error(`❌ Error forcing Mermaid theme update:`, error);
-        return false;
     }
-}
 
-// Fonction pour convertir SVG en image en préservant EXACTEMENT les dimensions
-function convertSvgToImagePreservingDimensions(svgElement, wrapper, originalMermaid) {
-    console.log(`🔄 Converting SVG to image with EXACT dimension preservation`);
+    // Fonction pour convertir SVG en image en préservant EXACTEMENT les dimensions
+    function convertSvgToImagePreservingDimensions(svgElement, wrapper, originalMermaid) {
+        console.log(`🔄 Converting SVG to image with EXACT dimension preservation`);
 
-    try {
-        // Obtenir les dimensions EXACTES du wrapper actuel
-        const wrapperRect = wrapper.getBoundingClientRect();
-        const wrapperWidth = Math.round(wrapperRect.width);
-        const wrapperHeight = Math.round(wrapperRect.height);
+        try {
+            // Obtenir les dimensions EXACTES du wrapper actuel
+            const wrapperRect = wrapper.getBoundingClientRect();
+            const wrapperWidth = Math.round(wrapperRect.width);
+            const wrapperHeight = Math.round(wrapperRect.height);
 
-        console.log(`📏 Wrapper dimensions:`, { width: wrapperWidth, height: wrapperHeight });
+            console.log(`📏 Wrapper dimensions:`, { width: wrapperWidth, height: wrapperHeight });
 
-        // Cloner le SVG
-        const clonedSvg = svgElement.cloneNode(true);
+            // Cloner le SVG
+            const clonedSvg = svgElement.cloneNode(true);
 
-        // Appliquer les styles Mermaid
-        applyMermaidStylesToSvg(clonedSvg);
+            // Appliquer les styles Mermaid
+            applyMermaidStylesToSvg(clonedSvg);
 
-        // Créer une image PLUS GRANDE pour permettre un vrai zoom (2x la taille)
-        const zoomFactor = 2;
-        const imageWidth = wrapperWidth * zoomFactor;
-        const imageHeight = wrapperHeight * zoomFactor;
+            // Créer une image PLUS GRANDE pour permettre un vrai zoom (2x la taille)
+            const zoomFactor = 2;
+            const imageWidth = wrapperWidth * zoomFactor;
+            const imageHeight = wrapperHeight * zoomFactor;
 
-        // Forcer les dimensions plus grandes sur le SVG
-        clonedSvg.setAttribute('width', imageWidth);
-        clonedSvg.setAttribute('height', imageHeight);
-        clonedSvg.style.width = `${imageWidth}px`;
-        clonedSvg.style.height = `${imageHeight}px`;
+            // Forcer les dimensions plus grandes sur le SVG
+            clonedSvg.setAttribute('width', imageWidth);
+            clonedSvg.setAttribute('height', imageHeight);
+            clonedSvg.style.width = `${imageWidth}px`;
+            clonedSvg.style.height = `${imageHeight}px`;
 
-        console.log(`🔍 Creating zoomable image:`, {
-            original: { width: wrapperWidth, height: wrapperHeight },
-            zoomed: { width: imageWidth, height: imageHeight },
-            factor: zoomFactor
-        });
+            console.log(`🔍 Creating zoomable image:`, {
+                original: { width: wrapperWidth, height: wrapperHeight },
+                zoomed: { width: imageWidth, height: imageHeight },
+                factor: zoomFactor
+            });
 
-        // Créer une URL data pour le SVG
-        const svgData = new XMLSerializer().serializeToString(clonedSvg);
-        const svgBlob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
-        const svgUrl = URL.createObjectURL(svgBlob);
+            // Créer une URL data pour le SVG
+            const svgData = new XMLSerializer().serializeToString(clonedSvg);
+            const svgBlob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
+            const svgUrl = URL.createObjectURL(svgBlob);
 
-        // Créer un élément img avec les dimensions du wrapper (affichage normal)
-        const imgElement = document.createElement('img');
-        imgElement.src = svgUrl;
-        imgElement.style.width = `${wrapperWidth}px`;  // Affichage normal
-        imgElement.style.height = `${wrapperHeight}px`; // Affichage normal
-        imgElement.style.display = 'block';
-        imgElement.setAttribute('data-zoomable', '1');
-        imgElement.classList.add('mermaid-zoom-image'); // Classe spécifique pour Mermaid
+            // Créer un élément img avec les dimensions du wrapper (affichage normal)
+            const imgElement = document.createElement('img');
+            imgElement.src = svgUrl;
+            imgElement.style.width = `${wrapperWidth}px`;  // Affichage normal
+            imgElement.style.height = `${wrapperHeight}px`; // Affichage normal
+            imgElement.style.display = 'block';
+            imgElement.setAttribute('data-zoomable', '1');
+            imgElement.classList.add('mermaid-zoom-image'); // Classe spécifique pour Mermaid
 
-        // Ajouter les attributs pour medium-zoom (dimensions réelles de l'image)
-        imgElement.setAttribute('data-zoom-width', imageWidth);
-        imgElement.setAttribute('data-zoom-height', imageHeight);
+            // Ajouter les attributs pour medium-zoom (dimensions réelles de l'image)
+            imgElement.setAttribute('data-zoom-width', imageWidth);
+            imgElement.setAttribute('data-zoom-height', imageHeight);
 
-        console.log(`🖼️ Image created with exact dimensions:`, { width: wrapperWidth, height: wrapperHeight });
+            console.log(`🖼️ Image created with exact dimensions:`, { width: wrapperWidth, height: wrapperHeight });
 
-        // Remplacer le contenu du wrapper par l'image
-        wrapper.innerHTML = '';
-        wrapper.appendChild(imgElement);
+            // Remplacer le contenu du wrapper par l'image
+            wrapper.innerHTML = '';
+            wrapper.appendChild(imgElement);
 
-        // Retirer la classe "converting" pour restaurer l'opacité normale
-        wrapper.classList.remove("converting");
+            // Retirer la classe "converting" pour restaurer l'opacité normale
+            wrapper.classList.remove("converting");
+
+            // Attendre que l'image soit chargée puis initialiser medium-zoom
+            imgElement.onload = () => {
+                console.log(`✅ Image loaded, initializing REAL medium-zoom`);
+
+                const isDark = document.documentElement.getAttribute("data-theme") === "dark";
+                const background = isDark ? "rgba(0,0,0,.9)" : "rgba(0,0,0,.85)";
+
+                // Utiliser VRAI medium-zoom
+                const zoomInstance = window.mediumZoom(imgElement, {
+                    background,
+                    margin: 24,
+                    scrollOffset: 0,
+                });
+
+                console.log(`🎉 REAL medium-zoom initialized with exact dimensions!`);
+
+                // Forcer les bonnes couleurs en JavaScript (contournement du CSS global)
+                const forceCorrectColors = () => {
+                    // Trouver l'image zoomée dans le DOM
+                    const zoomedImage = document.querySelector('.medium-zoom-image--opened');
+                    if (zoomedImage && zoomedImage.classList.contains('mermaid-zoom-image')) {
+                        console.log(`🎨 Forcing correct colors for Mermaid zoom image`);
+                        zoomedImage.style.filter = 'none';
+                        zoomedImage.style.setProperty('filter', 'none', 'important');
+                    }
+
+                    // Forcer les z-index élevés
+                    const overlay = document.querySelector('.medium-zoom-overlay');
+                    if (overlay) {
+                        console.log(`🔝 Forcing high z-index for overlay`);
+                        overlay.style.zIndex = '9999999';
+                        overlay.style.setProperty('z-index', '9999999', 'important');
+                    }
+
+                    if (zoomedImage) {
+                        console.log(`🔝 Forcing high z-index for zoomed image`);
+                        zoomedImage.style.zIndex = '10000000';
+                        zoomedImage.style.setProperty('z-index', '10000000', 'important');
+                    }
+                };
+
+                // Écouter les événements de zoom pour appliquer les bonnes couleurs
+                imgElement.addEventListener('zoom:open', forceCorrectColors);
+                imgElement.addEventListener('zoom:opened', forceCorrectColors);
+
+                // Observer pour les changements de thème
+                const themeObserver = new MutationObserver(() => {
+                    console.log(`🎨 Theme changed, forcing Mermaid re-render with new theme`);
 
-        // Attendre que l'image soit chargée puis initialiser medium-zoom
-        imgElement.onload = () => {
-            console.log(`✅ Image loaded, initializing REAL medium-zoom`);
+                    // Forcer Mermaid à se re-rendre avec le nouveau thème
+                    const currentTheme = document.documentElement.getAttribute("data-theme");
+                    console.log(`🎨 Current theme: ${currentTheme}`);
+
+                    // Attendre un peu pour que Mermaid détecte le changement de thème
+                    setTimeout(() => {
+                        // Forcer Mermaid à se re-rendre avec le nouveau thème
+                        const themeUpdated = forceMermaidThemeUpdate(originalMermaid);
+
+                        if (themeUpdated) {
+                            // Attendre que le re-rendu soit terminé
+                            setTimeout(() => {
+                                // Re-obtenir le SVG mis à jour
+                                const updatedSvgElement = originalMermaid.querySelector("svg");
+                                if (updatedSvgElement) {
+                                    console.log(`🔄 Re-converting with updated SVG for theme: ${currentTheme}`);
+                                    convertSvgToImagePreservingDimensions(updatedSvgElement, wrapper, originalMermaid);
+                                } else {
+                                    console.log(`❌ No updated SVG found after theme change`);
+                                }
+                            }, 200); // Délai pour laisser Mermaid finir le re-rendu
+                        } else {
+                            console.log(`❌ Failed to update Mermaid theme, using current SVG`);
+                            // Fallback: utiliser le SVG actuel même s'il n'est pas mis à jour
+                            const currentSvgElement = originalMermaid.querySelector("svg");
+                            if (currentSvgElement) {
+                                convertSvgToImagePreservingDimensions(currentSvgElement, wrapper, originalMermaid);
+                            }
+                        }
+                    }, 100); // Petit délai pour laisser Mermaid se mettre à jour
+                });
 
+                themeObserver.observe(document.documentElement, {
+                    attributes: true,
+                    attributeFilter: ["data-theme"],
+                });
+
+                wrapper._themeObserver = themeObserver;
+            };
+
+            imgElement.onerror = (error) => {
+                console.error(`❌ Error loading SVG as image:`, error);
+                // Fallback: utiliser le zoom custom
+                wrapper.innerHTML = '';
+                wrapper.appendChild(originalMermaid);
+                wrapper.classList.remove("converting");
+                wrapper.addEventListener("click", (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    openMermaidZoom(wrapper, originalMermaid);
+                });
+            };
+
+        } catch (error) {
+            console.error("❌ Error converting SVG to image:", error);
+            // Fallback: utiliser le zoom custom
+            wrapper.classList.remove("converting");
+            wrapper.addEventListener("click", (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                openMermaidZoom(wrapper, originalMermaid);
+            });
+        }
+    }
+
+    // Fonction pour initialiser medium-zoom directement sur le SVG
+    function initializeMediumZoomOnSvg(svgElement, wrapper, originalMermaid) {
+        try {
+            // S'assurer que le SVG a des dimensions fixes pour éviter le flicker
+            const bbox = svgElement.getBBox();
+            const width = bbox.width || svgElement.clientWidth || 800;
+            const height = bbox.height || svgElement.clientHeight || 600;
+
+            // Fixer les dimensions du SVG pour éviter les changements
+            svgElement.setAttribute('width', width);
+            svgElement.setAttribute('height', height);
+            svgElement.style.width = '100%';
+            svgElement.style.height = 'auto';
+            svgElement.style.display = 'block';
+
+            // Retirer la classe "converting" pour restaurer l'opacité normale
+            wrapper.classList.remove("converting");
+
+            console.log(`📏 SVG dimensions fixed:`, { width, height });
+
+            // Initialiser medium-zoom directement sur le wrapper SVG
             const isDark = document.documentElement.getAttribute("data-theme") === "dark";
             const background = isDark ? "rgba(0,0,0,.9)" : "rgba(0,0,0,.85)";
 
-            // Utiliser VRAI medium-zoom
-            const zoomInstance = window.mediumZoom(imgElement, {
+            // Utiliser medium-zoom sur le wrapper qui contient le SVG
+            window.mediumZoom(wrapper, {
                 background,
                 margin: 24,
                 scrollOffset: 0,
             });
 
-            console.log(`🎉 REAL medium-zoom initialized with exact dimensions!`);
-
-            // Forcer les bonnes couleurs en JavaScript (contournement du CSS global)
-            const forceCorrectColors = () => {
-                // Trouver l'image zoomée dans le DOM
-                const zoomedImage = document.querySelector('.medium-zoom-image--opened');
-                if (zoomedImage && zoomedImage.classList.contains('mermaid-zoom-image')) {
-                    console.log(`🎨 Forcing correct colors for Mermaid zoom image`);
-                    zoomedImage.style.filter = 'none';
-                    zoomedImage.style.setProperty('filter', 'none', 'important');
-                }
-
-                // Forcer les z-index élevés
-                const overlay = document.querySelector('.medium-zoom-overlay');
-                if (overlay) {
-                    console.log(`🔝 Forcing high z-index for overlay`);
-                    overlay.style.zIndex = '9999999';
-                    overlay.style.setProperty('z-index', '9999999', 'important');
-                }
-
-                if (zoomedImage) {
-                    console.log(`🔝 Forcing high z-index for zoomed image`);
-                    zoomedImage.style.zIndex = '10000000';
-                    zoomedImage.style.setProperty('z-index', '10000000', 'important');
-                }
-            };
-
-            // Écouter les événements de zoom pour appliquer les bonnes couleurs
-            imgElement.addEventListener('zoom:open', forceCorrectColors);
-            imgElement.addEventListener('zoom:opened', forceCorrectColors);
+            console.log(`🎉 Medium-zoom initialized directly on SVG wrapper!`);
 
             // Observer pour les changements de thème
             const themeObserver = new MutationObserver(() => {
-                console.log(`🎨 Theme changed, forcing Mermaid re-render with new theme`);
-
-                // Forcer Mermaid à se re-rendre avec le nouveau thème
-                const currentTheme = document.documentElement.getAttribute("data-theme");
-                console.log(`🎨 Current theme: ${currentTheme}`);
-
-                // Attendre un peu pour que Mermaid détecte le changement de thème
-                setTimeout(() => {
-                    // Forcer Mermaid à se re-rendre avec le nouveau thème
-                    const themeUpdated = forceMermaidThemeUpdate(originalMermaid);
-
-                    if (themeUpdated) {
-                        // Attendre que le re-rendu soit terminé
-                        setTimeout(() => {
-                            // Re-obtenir le SVG mis à jour
-                            const updatedSvgElement = originalMermaid.querySelector("svg");
-                            if (updatedSvgElement) {
-                                console.log(`🔄 Re-converting with updated SVG for theme: ${currentTheme}`);
-                                convertSvgToImagePreservingDimensions(updatedSvgElement, wrapper, originalMermaid);
-                            } else {
-                                console.log(`❌ No updated SVG found after theme change`);
-                            }
-                        }, 200); // Délai pour laisser Mermaid finir le re-rendu
-                    } else {
-                        console.log(`❌ Failed to update Mermaid theme, using current SVG`);
-                        // Fallback: utiliser le SVG actuel même s'il n'est pas mis à jour
-                        const currentSvgElement = originalMermaid.querySelector("svg");
-                        if (currentSvgElement) {
-                            convertSvgToImagePreservingDimensions(currentSvgElement, wrapper, originalMermaid);
-                        }
-                    }
-                }, 100); // Petit délai pour laisser Mermaid se mettre à jour
+                console.log(`🎨 Theme changed, updating medium-zoom background`);
+                // Re-initialiser medium-zoom avec le nouveau thème
+                initializeMediumZoomOnSvg(svgElement, wrapper, originalMermaid);
             });
 
             themeObserver.observe(document.documentElement, {
@@ -365,220 +438,147 @@ function convertSvgToImagePreservingDimensions(svgElement, wrapper, originalMerm
                 attributeFilter: ["data-theme"],
             });
 
+            // Stocker l'observer pour le nettoyer plus tard
             wrapper._themeObserver = themeObserver;
-        };
 
-        imgElement.onerror = (error) => {
-            console.error(`❌ Error loading SVG as image:`, error);
+        } catch (error) {
+            console.error("❌ Error initializing medium-zoom on SVG:", error);
             // Fallback: utiliser le zoom custom
-            wrapper.innerHTML = '';
-            wrapper.appendChild(originalMermaid);
             wrapper.classList.remove("converting");
             wrapper.addEventListener("click", (e) => {
                 e.preventDefault();
                 e.stopPropagation();
                 openMermaidZoom(wrapper, originalMermaid);
             });
-        };
-
-    } catch (error) {
-        console.error("❌ Error converting SVG to image:", error);
-        // Fallback: utiliser le zoom custom
-        wrapper.classList.remove("converting");
-        wrapper.addEventListener("click", (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            openMermaidZoom(wrapper, originalMermaid);
-        });
+        }
     }
-}
-
-// Fonction pour initialiser medium-zoom directement sur le SVG
-function initializeMediumZoomOnSvg(svgElement, wrapper, originalMermaid) {
-    try {
-        // S'assurer que le SVG a des dimensions fixes pour éviter le flicker
-        const bbox = svgElement.getBBox();
-        const width = bbox.width || svgElement.clientWidth || 800;
-        const height = bbox.height || svgElement.clientHeight || 600;
-
-        // Fixer les dimensions du SVG pour éviter les changements
-        svgElement.setAttribute('width', width);
-        svgElement.setAttribute('height', height);
-        svgElement.style.width = '100%';
-        svgElement.style.height = 'auto';
-        svgElement.style.display = 'block';
-
-        // Retirer la classe "converting" pour restaurer l'opacité normale
-        wrapper.classList.remove("converting");
-
-        console.log(`📏 SVG dimensions fixed:`, { width, height });
-
-        // Initialiser medium-zoom directement sur le wrapper SVG
-        const isDark = document.documentElement.getAttribute("data-theme") === "dark";
-        const background = isDark ? "rgba(0,0,0,.9)" : "rgba(0,0,0,.85)";
-
-        // Utiliser medium-zoom sur le wrapper qui contient le SVG
-        window.mediumZoom(wrapper, {
-            background,
-            margin: 24,
-            scrollOffset: 0,
-        });
-
-        console.log(`🎉 Medium-zoom initialized directly on SVG wrapper!`);
 
-        // Observer pour les changements de thème
-        const themeObserver = new MutationObserver(() => {
-            console.log(`🎨 Theme changed, updating medium-zoom background`);
-            // Re-initialiser medium-zoom avec le nouveau thème
-            initializeMediumZoomOnSvg(svgElement, wrapper, originalMermaid);
-        });
-
-        themeObserver.observe(document.documentElement, {
-            attributes: true,
-            attributeFilter: ["data-theme"],
-        });
+    // Fonction pour attendre que Mermaid soit stable (évite le flicker)
+    function waitForMermaidStable(mermaidEl, wrapper, index) {
+        // Approche simplifiée : attendre un délai fixe puis convertir
+        console.log(`⏳ Waiting for Mermaid ${index} to stabilize...`);
 
-        // Stocker l'observer pour le nettoyer plus tard
-        wrapper._themeObserver = themeObserver;
-
-    } catch (error) {
-        console.error("❌ Error initializing medium-zoom on SVG:", error);
-        // Fallback: utiliser le zoom custom
-        wrapper.classList.remove("converting");
-        wrapper.addEventListener("click", (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            openMermaidZoom(wrapper, originalMermaid);
-        });
+        setTimeout(() => {
+            const svgElement = mermaidEl.querySelector("svg");
+            if (svgElement) {
+                console.log(`🎯 Converting Mermaid ${index} to image`);
+                convertSvgToImageForMediumZoom(svgElement, wrapper, mermaidEl);
+            } else {
+                console.log(`❌ No SVG found in Mermaid element ${index}`);
+            }
+        }, 2000); // Attendre 2 secondes puis convertir
     }
-}
-
-// Fonction pour attendre que Mermaid soit stable (évite le flicker)
-function waitForMermaidStable(mermaidEl, wrapper, index) {
-    // Approche simplifiée : attendre un délai fixe puis convertir
-    console.log(`⏳ Waiting for Mermaid ${index} to stabilize...`);
-
-    setTimeout(() => {
-        const svgElement = mermaidEl.querySelector("svg");
-        if (svgElement) {
-            console.log(`🎯 Converting Mermaid ${index} to image`);
-            convertSvgToImageForMediumZoom(svgElement, wrapper, mermaidEl);
-        } else {
-            console.log(`❌ No SVG found in Mermaid element ${index}`);
-        }
-    }, 2000); // Attendre 2 secondes puis convertir
-}
 
-// Fonction pour convertir SVG en image SANS canvas (pour éviter l'erreur de sécurité)
-function convertSvgToImageForMediumZoom(svgElement, wrapper, originalMermaid) {
-    console.log(`🔄 Converting SVG to image for REAL medium-zoom`);
+    // Fonction pour convertir SVG en image SANS canvas (pour éviter l'erreur de sécurité)
+    function convertSvgToImageForMediumZoom(svgElement, wrapper, originalMermaid) {
+        console.log(`🔄 Converting SVG to image for REAL medium-zoom`);
 
-    try {
-        // Cloner le SVG
-        const clonedSvg = svgElement.cloneNode(true);
+        try {
+            // Cloner le SVG
+            const clonedSvg = svgElement.cloneNode(true);
 
-        // Appliquer directement les styles SVG pour préserver l'apparence
-        applyMermaidStylesToSvg(clonedSvg);
+            // Appliquer directement les styles SVG pour préserver l'apparence
+            applyMermaidStylesToSvg(clonedSvg);
 
-        // S'assurer que le SVG a des dimensions
-        const bbox = clonedSvg.getBBox();
-        const width = bbox.width || clonedSvg.clientWidth || 800;
-        const height = bbox.height || clonedSvg.clientHeight || 600;
+            // S'assurer que le SVG a des dimensions
+            const bbox = clonedSvg.getBBox();
+            const width = bbox.width || clonedSvg.clientWidth || 800;
+            const height = bbox.height || clonedSvg.clientHeight || 600;
 
-        console.log(`📏 SVG dimensions:`, { width, height });
+            console.log(`📏 SVG dimensions:`, { width, height });
 
-        // Créer une image directement à partir du SVG (sans canvas)
-        const svgData = new XMLSerializer().serializeToString(clonedSvg);
+            // Créer une image directement à partir du SVG (sans canvas)
+            const svgData = new XMLSerializer().serializeToString(clonedSvg);
 
-        // Ajouter les dimensions au SVG
-        clonedSvg.setAttribute("width", width);
-        clonedSvg.setAttribute("height", height);
-        const svgWithDimensions = new XMLSerializer().serializeToString(clonedSvg);
+            // Ajouter les dimensions au SVG
+            clonedSvg.setAttribute("width", width);
+            clonedSvg.setAttribute("height", height);
+            const svgWithDimensions = new XMLSerializer().serializeToString(clonedSvg);
 
-        // Créer une URL data pour le SVG
-        const svgBlob = new Blob([svgWithDimensions], {
-            type: "image/svg+xml;charset=utf-8",
-        });
-        const svgUrl = URL.createObjectURL(svgBlob);
+            // Créer une URL data pour le SVG
+            const svgBlob = new Blob([svgWithDimensions], {
+                type: "image/svg+xml;charset=utf-8",
+            });
+            const svgUrl = URL.createObjectURL(svgBlob);
 
-        // Créer un élément img avec le SVG
-        const imgElement = document.createElement("img");
-        imgElement.src = svgUrl;
-        imgElement.style.width = "100%";
-        imgElement.style.height = "auto";
-        imgElement.style.display = "block";
-        imgElement.setAttribute("data-zoomable", "1");
+            // Créer un élément img avec le SVG
+            const imgElement = document.createElement("img");
+            imgElement.src = svgUrl;
+            imgElement.style.width = "100%";
+            imgElement.style.height = "auto";
+            imgElement.style.display = "block";
+            imgElement.setAttribute("data-zoomable", "1");
 
-        // Remplacer le contenu du wrapper par l'image
-        wrapper.innerHTML = "";
-        wrapper.appendChild(imgElement);
+            // Remplacer le contenu du wrapper par l'image
+            wrapper.innerHTML = "";
+            wrapper.appendChild(imgElement);
 
-        // Retirer la classe "converting" pour restaurer l'opacité normale
-        wrapper.classList.remove("converting");
+            // Retirer la classe "converting" pour restaurer l'opacité normale
+            wrapper.classList.remove("converting");
 
-        console.log(`🖼️ SVG converted to img element`);
+            console.log(`🖼️ SVG converted to img element`);
 
-        // Attendre que l'image soit chargée puis initialiser medium-zoom
-        imgElement.onload = () => {
-            console.log(`✅ Image loaded, initializing REAL medium-zoom`);
+            // Attendre que l'image soit chargée puis initialiser medium-zoom
+            imgElement.onload = () => {
+                console.log(`✅ Image loaded, initializing REAL medium-zoom`);
 
-            const isDark = document.documentElement.getAttribute("data-theme") === "dark";
-            const background = isDark ? "rgba(0,0,0,.9)" : "rgba(0,0,0,.85)";
+                const isDark = document.documentElement.getAttribute("data-theme") === "dark";
+                const background = isDark ? "rgba(0,0,0,.9)" : "rgba(0,0,0,.85)";
 
-            // Utiliser VRAI medium-zoom
-            window.mediumZoom(imgElement, {
-                background,
-                margin: 24,
-                scrollOffset: 0,
-            });
+                // Utiliser VRAI medium-zoom
+                window.mediumZoom(imgElement, {
+                    background,
+                    margin: 24,
+                    scrollOffset: 0,
+                });
 
-            console.log(`🎉 REAL medium-zoom initialized on Mermaid!`);
+                console.log(`🎉 REAL medium-zoom initialized on Mermaid!`);
 
-            // Observer pour les changements de thème - reconvertir l'image
-            const themeObserver = new MutationObserver(() => {
-                console.log(`🎨 Theme changed, reconverting Mermaid image`);
-                // Reconverter l'image avec le nouveau thème
-                convertSvgToImageForMediumZoom(svgElement, wrapper, originalMermaid);
-            });
+                // Observer pour les changements de thème - reconvertir l'image
+                const themeObserver = new MutationObserver(() => {
+                    console.log(`🎨 Theme changed, reconverting Mermaid image`);
+                    // Reconverter l'image avec le nouveau thème
+                    convertSvgToImageForMediumZoom(svgElement, wrapper, originalMermaid);
+                });
 
-            themeObserver.observe(document.documentElement, {
-                attributes: true,
-                attributeFilter: ["data-theme"],
-            });
+                themeObserver.observe(document.documentElement, {
+                    attributes: true,
+                    attributeFilter: ["data-theme"],
+                });
 
-            // Stocker l'observer pour le nettoyer plus tard
-            wrapper._themeObserver = themeObserver;
-        };
+                // Stocker l'observer pour le nettoyer plus tard
+                wrapper._themeObserver = themeObserver;
+            };
+
+            imgElement.onerror = (error) => {
+                console.error(`❌ Error loading SVG as image:`, error);
+                // Fallback: utiliser le zoom custom
+                wrapper.innerHTML = "";
+                wrapper.appendChild(originalMermaid);
+                wrapper.addEventListener("click", (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    openMermaidZoom(wrapper, originalMermaid);
+                });
+            };
 
-        imgElement.onerror = (error) => {
-            console.error(`❌ Error loading SVG as image:`, error);
+        } catch (error) {
+            console.error("❌ Error converting SVG to image:", error);
             // Fallback: utiliser le zoom custom
-            wrapper.innerHTML = "";
-            wrapper.appendChild(originalMermaid);
             wrapper.addEventListener("click", (e) => {
                 e.preventDefault();
                 e.stopPropagation();
                 openMermaidZoom(wrapper, originalMermaid);
             });
-        };
-
-    } catch (error) {
-        console.error("❌ Error converting SVG to image:", error);
-        // Fallback: utiliser le zoom custom
-        wrapper.addEventListener("click", (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            openMermaidZoom(wrapper, originalMermaid);
-        });
+        }
     }
-}
-
-// Fonction pour ouvrir le zoom custom des diagrammes Mermaid (comme medium-zoom)
-function openMermaidZoom(wrapper, mermaidElement) {
-    // Créer l'overlay (comme medium-zoom)
-    const overlay = document.createElement("div");
-    overlay.className = "medium-zoom-overlay";
-    overlay.style.cssText = `
+
+    // Fonction pour ouvrir le zoom custom des diagrammes Mermaid (comme medium-zoom)
+    function openMermaidZoom(wrapper, mermaidElement) {
+        // Créer l'overlay (comme medium-zoom)
+        const overlay = document.createElement("div");
+        overlay.className = "medium-zoom-overlay";
+        overlay.style.cssText = `
     position: fixed;
     top: 0;
     left: 0;
@@ -594,10 +594,10 @@ function openMermaidZoom(wrapper, mermaidElement) {
     transition: opacity 0.3s ease;
   `;
 
-    // Créer l'image zoomée (comme medium-zoom)
-    const zoomImage = document.createElement("div");
-    zoomImage.className = "medium-zoom-image";
-    zoomImage.style.cssText = `
+        // Créer l'image zoomée (comme medium-zoom)
+        const zoomImage = document.createElement("div");
+        zoomImage.className = "medium-zoom-image";
+        zoomImage.style.cssText = `
     max-width: 90%;
     max-height: 90%;
     background: white;
@@ -609,249 +609,250 @@ function openMermaidZoom(wrapper, mermaidElement) {
     overflow: auto;
   `;
 
-    // Cloner le diagramme Mermaid
-    const clonedMermaid = mermaidElement.cloneNode(true);
-    clonedMermaid.style.cssText = `
+        // Cloner le diagramme Mermaid
+        const clonedMermaid = mermaidElement.cloneNode(true);
+        clonedMermaid.style.cssText = `
     width: 100%;
     height: auto;
     max-width: none;
     display: block;
   `;
 
-    zoomImage.appendChild(clonedMermaid);
-    overlay.appendChild(zoomImage);
+        zoomImage.appendChild(clonedMermaid);
+        overlay.appendChild(zoomImage);
 
-    // Ajouter l'overlay au body
-    document.body.appendChild(overlay);
+        // Ajouter l'overlay au body
+        document.body.appendChild(overlay);
 
-    // Animation d'ouverture (comme medium-zoom)
-    requestAnimationFrame(() => {
-        overlay.style.opacity = "1";
-        zoomImage.style.transform = "scale(1)";
-    });
+        // Animation d'ouverture (comme medium-zoom)
+        requestAnimationFrame(() => {
+            overlay.style.opacity = "1";
+            zoomImage.style.transform = "scale(1)";
+        });
 
-    // Fermer au clic sur l'overlay
-    overlay.addEventListener("click", (e) => {
-        if (e.target === overlay) {
-            closeMermaidZoom(overlay);
-        }
-    });
+        // Fermer au clic sur l'overlay
+        overlay.addEventListener("click", (e) => {
+            if (e.target === overlay) {
+                closeMermaidZoom(overlay);
+            }
+        });
 
-    // Fermer avec Escape
-    const handleEscape = (e) => {
-        if (e.key === "Escape") {
+        // Fermer avec Escape
+        const handleEscape = (e) => {
+            if (e.key === "Escape") {
+                closeMermaidZoom(overlay);
+                document.removeEventListener("keydown", handleEscape);
+            }
+        };
+        document.addEventListener("keydown", handleEscape);
+
+        // Fermer au scroll (comme medium-zoom)
+        const handleScroll = () => {
             closeMermaidZoom(overlay);
-            document.removeEventListener("keydown", handleEscape);
-        }
-    };
-    document.addEventListener("keydown", handleEscape);
+        };
+        window.addEventListener("wheel", handleScroll, { passive: true });
+        window.addEventListener("touchmove", handleScroll, { passive: true });
+        window.addEventListener("scroll", handleScroll, { passive: true });
 
-    // Fermer au scroll (comme medium-zoom)
-    const handleScroll = () => {
-        closeMermaidZoom(overlay);
-    };
-    window.addEventListener("wheel", handleScroll, { passive: true });
-    window.addEventListener("touchmove", handleScroll, { passive: true });
-    window.addEventListener("scroll", handleScroll, { passive: true });
-
-    // Stocker les handlers pour les nettoyer
-    overlay._handlers = { handleEscape, handleScroll };
-}
-
-function closeMermaidZoom(overlay) {
-    // Animation de fermeture
-    overlay.style.opacity = "0";
-    const zoomImage = overlay.querySelector(".medium-zoom-image");
-    if (zoomImage) {
-        zoomImage.style.transform = "scale(0.8)";
+        // Stocker les handlers pour les nettoyer
+        overlay._handlers = { handleEscape, handleScroll };
     }
 
-    // Nettoyer les event listeners
-    if (overlay._handlers) {
-        document.removeEventListener("keydown", overlay._handlers.handleEscape);
-        window.removeEventListener("wheel", overlay._handlers.handleScroll);
-        window.removeEventListener("touchmove", overlay._handlers.handleScroll);
-        window.removeEventListener("scroll", overlay._handlers.handleScroll);
-    }
+    function closeMermaidZoom(overlay) {
+        // Animation de fermeture
+        overlay.style.opacity = "0";
+        const zoomImage = overlay.querySelector(".medium-zoom-image");
+        if (zoomImage) {
+            zoomImage.style.transform = "scale(0.8)";
+        }
 
-    // Supprimer l'overlay après l'animation
-    setTimeout(() => {
-        if (document.body.contains(overlay)) {
-            document.body.removeChild(overlay);
+        // Nettoyer les event listeners
+        if (overlay._handlers) {
+            document.removeEventListener("keydown", overlay._handlers.handleEscape);
+            window.removeEventListener("wheel", overlay._handlers.handleScroll);
+            window.removeEventListener("touchmove", overlay._handlers.handleScroll);
+            window.removeEventListener("scroll", overlay._handlers.handleScroll);
         }
-    }, 300);
-}
-
-// Fonction pour nettoyer les observers
-function cleanupMermaidObservers(wrapper) {
-    if (wrapper._themeObserver) {
-        wrapper._themeObserver.disconnect();
-        wrapper._themeObserver = null;
+
+        // Supprimer l'overlay après l'animation
+        setTimeout(() => {
+            if (document.body.contains(overlay)) {
+                document.body.removeChild(overlay);
+            }
+        }, 300);
     }
-}
-
-// Fonction principale pour initialiser le zoom Mermaid
-function setupMermaidZoom() {
-    console.log(`🎯 setupMermaidZoom called`);
-    const mermaidElements = document.querySelectorAll(".mermaid");
-    console.log(`🔍 Found ${mermaidElements.length} Mermaid elements`);
-
-    let processedCount = 0;
-    mermaidElements.forEach((mermaidEl, index) => {
-        // Vérifier si déjà wrappé
-        if (
-            mermaidEl.parentElement &&
-            mermaidEl.parentElement.classList.contains("mermaid-zoom-wrapper")
-        ) {
-            console.log(`📦 Mermaid ${index} already wrapped`);
-            processedCount++;
-            return;
+
+    // Fonction pour nettoyer les observers
+    function cleanupMermaidObservers(wrapper) {
+        if (wrapper._themeObserver) {
+            wrapper._themeObserver.disconnect();
+            wrapper._themeObserver = null;
         }
+    }
 
-        console.log(`📦 Wrapping Mermaid element ${index}`);
+    // Fonction principale pour initialiser le zoom Mermaid
+    function setupMermaidZoom() {
+        console.log(`🎯 setupMermaidZoom called`);
+        const mermaidElements = document.querySelectorAll(".mermaid");
+        console.log(`🔍 Found ${mermaidElements.length} Mermaid elements`);
+
+        let processedCount = 0;
+        mermaidElements.forEach((mermaidEl, index) => {
+            // Vérifier si déjà wrappé
+            if (
+                mermaidEl.parentElement &&
+                mermaidEl.parentElement.classList.contains("mermaid-zoom-wrapper")
+            ) {
+                console.log(`📦 Mermaid ${index} already wrapped`);
+                processedCount++;
+                return;
+            }
 
-        // Créer le wrapper
-        const wrapper = document.createElement("div");
-        wrapper.className = "mermaid-zoom-wrapper";
-        wrapper.setAttribute("data-zoomable", "1");
+            console.log(`📦 Wrapping Mermaid element ${index}`);
 
-        // Insérer le wrapper avant l'élément Mermaid
-        mermaidEl.parentNode.insertBefore(wrapper, mermaidEl);
+            // Créer le wrapper
+            const wrapper = document.createElement("div");
+            wrapper.className = "mermaid-zoom-wrapper";
+            wrapper.setAttribute("data-zoomable", "1");
 
-        // Déplacer l'élément Mermaid dans le wrapper
-        wrapper.appendChild(mermaidEl);
+            // Insérer le wrapper avant l'élément Mermaid
+            mermaidEl.parentNode.insertBefore(wrapper, mermaidEl);
 
-        // S'assurer que le wrapper a des dimensions
-        wrapper.style.display = "block";
-        wrapper.style.width = "100%";
-        wrapper.style.maxWidth = "100%";
+            // Déplacer l'élément Mermaid dans le wrapper
+            wrapper.appendChild(mermaidEl);
 
-        // Ajouter la classe "converting" pour masquer le flicker
-        wrapper.classList.add("converting");
+            // S'assurer que le wrapper a des dimensions
+            wrapper.style.display = "block";
+            wrapper.style.width = "100%";
+            wrapper.style.maxWidth = "100%";
 
-        // Convertir SVG en image pour utiliser VRAI medium-zoom
-        console.log(`✅ Converting Mermaid to image for REAL medium-zoom`);
+            // Ajouter la classe "converting" pour masquer le flicker
+            wrapper.classList.add("converting");
 
-        // Utiliser le VRAI medium-zoom avec conversion SVG → image SANS flicker
-        console.log(`✅ Setting up REAL medium-zoom for Mermaid ${index}`);
+            // Convertir SVG en image pour utiliser VRAI medium-zoom
+            console.log(`✅ Converting Mermaid to image for REAL medium-zoom`);
 
-        // Attendre que Mermaid soit stable puis convertir avec préservation des dimensions
-        setTimeout(() => {
-            const svgElement = mermaidEl.querySelector("svg");
-            if (svgElement) {
-                console.log(`🎯 Converting SVG to image with dimension preservation`);
-                convertSvgToImagePreservingDimensions(svgElement, wrapper, mermaidEl);
-            } else {
-                console.log(`❌ No SVG found in Mermaid element ${index}`);
-            }
-        }, 1000); // Réduit de 2000ms à 1000ms pour être plus rapide
-    });
+            // Utiliser le VRAI medium-zoom avec conversion SVG → image SANS flicker
+            console.log(`✅ Setting up REAL medium-zoom for Mermaid ${index}`);
 
-    console.log(`✅ Processed ${processedCount} already wrapped, ${mermaidElements.length - processedCount} new diagrams`);
-}
-
-// Observer global pour forcer les bonnes couleurs et z-index sur les images Mermaid zoomées
-function setupGlobalMermaidColorFix() {
-    const observer = new MutationObserver((mutations) => {
-        mutations.forEach((mutation) => {
-            if (mutation.type === 'childList') {
-                // Vérifier si une image Mermaid est zoomée
-                const zoomedMermaidImage = document.querySelector('.medium-zoom-image--opened.mermaid-zoom-image');
-                if (zoomedMermaidImage) {
-                    console.log(`🎨 Global fix: Found zoomed Mermaid image, forcing correct colors and z-index`);
-                    zoomedMermaidImage.style.filter = 'none';
-                    zoomedMermaidImage.style.setProperty('filter', 'none', 'important');
-                    zoomedMermaidImage.style.zIndex = '10000000';
-                    zoomedMermaidImage.style.setProperty('z-index', '10000000', 'important');
+            // Attendre que Mermaid soit stable puis convertir avec préservation des dimensions
+            setTimeout(() => {
+                const svgElement = mermaidEl.querySelector("svg");
+                if (svgElement) {
+                    console.log(`🎯 Converting SVG to image with dimension preservation`);
+                    convertSvgToImagePreservingDimensions(svgElement, wrapper, mermaidEl);
+                } else {
+                    console.log(`❌ No SVG found in Mermaid element ${index}`);
                 }
+            }, 1000); // Réduit de 2000ms à 1000ms pour être plus rapide
+        });
 
-                // Vérifier si l'overlay medium-zoom existe
-                const overlay = document.querySelector('.medium-zoom-overlay');
-                if (overlay) {
-                    console.log(`🔝 Global fix: Found medium-zoom overlay, forcing high z-index`);
-                    overlay.style.zIndex = '9999999';
-                    overlay.style.setProperty('z-index', '9999999', 'important');
+        console.log(`✅ Processed ${processedCount} already wrapped, ${mermaidElements.length - processedCount} new diagrams`);
+    }
+
+    // Observer global pour forcer les bonnes couleurs et z-index sur les images Mermaid zoomées
+    function setupGlobalMermaidColorFix() {
+        const observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.type === 'childList') {
+                    // Vérifier si une image Mermaid est zoomée
+                    const zoomedMermaidImage = document.querySelector('.medium-zoom-image--opened.mermaid-zoom-image');
+                    if (zoomedMermaidImage) {
+                        console.log(`🎨 Global fix: Found zoomed Mermaid image, forcing correct colors and z-index`);
+                        zoomedMermaidImage.style.filter = 'none';
+                        zoomedMermaidImage.style.setProperty('filter', 'none', 'important');
+                        zoomedMermaidImage.style.zIndex = '10000000';
+                        zoomedMermaidImage.style.setProperty('z-index', '10000000', 'important');
+                    }
+
+                    // Vérifier si l'overlay medium-zoom existe
+                    const overlay = document.querySelector('.medium-zoom-overlay');
+                    if (overlay) {
+                        console.log(`🔝 Global fix: Found medium-zoom overlay, forcing high z-index`);
+                        overlay.style.zIndex = '9999999';
+                        overlay.style.setProperty('z-index', '9999999', 'important');
+                    }
                 }
-            }
+            });
         });
-    });
 
-    observer.observe(document.body, {
-        childList: true,
-        subtree: true
-    });
+        observer.observe(document.body, {
+            childList: true,
+            subtree: true
+        });
 
-    console.log(`🎨 Global Mermaid color and z-index fix observer started`);
-}
-
-// Fonction pour initialiser le zoom Mermaid avec retry
-function initMermaidZoom() {
-    console.log("🎯 initMermaidZoom called");
-
-    // Attendre que mediumZoom soit disponible
-    const checkMediumZoom = () => {
-        if (window.mediumZoom) {
-            console.log("✅ mediumZoom found, initializing Mermaid zoom");
-            setupMermaidZoom();
-        } else {
-            console.log("⏳ Waiting for mediumZoom...");
-            setTimeout(checkMediumZoom, 100);
-        }
-    };
+        console.log(`🎨 Global Mermaid color and z-index fix observer started`);
+    }
 
-    checkMediumZoom();
-}
-
-// Export des fonctions pour utilisation globale
-window.MermaidZoom = {
-    init: initMermaidZoom,
-    setup: setupMermaidZoom,
-    cleanup: cleanupMermaidObservers,
-    convertSvgToImage: convertSvgToImageForMediumZoom,
-    openZoom: openMermaidZoom,
-    closeZoom: closeMermaidZoom
-};
-
-// Auto-initialisation si le DOM est déjà chargé
-if (document.readyState === "loading") {
-    document.addEventListener("DOMContentLoaded", () => {
-        initMermaidZoom();
-        setupGlobalMermaidColorFix();
-    });
-} else {
-    initMermaidZoom();
-    setupGlobalMermaidColorFix();
-}
+    // Fonction pour initialiser le zoom Mermaid avec retry
+    function initMermaidZoom() {
+        console.log("🎯 initMermaidZoom called");
 
-// Aussi après le chargement complet
-window.addEventListener("load", () => {
-    setTimeout(() => {
+        // Attendre que mediumZoom soit disponible
+        const checkMediumZoom = () => {
+            if (window.mediumZoom) {
+                console.log("✅ mediumZoom found, initializing Mermaid zoom");
+                setupMermaidZoom();
+            } else {
+                console.log("⏳ Waiting for mediumZoom...");
+                setTimeout(checkMediumZoom, 100);
+            }
+        };
+
+        checkMediumZoom();
+    }
+
+    // Export des fonctions pour utilisation globale
+    window.MermaidZoom = {
+        init: initMermaidZoom,
+        setup: setupMermaidZoom,
+        cleanup: cleanupMermaidObservers,
+        convertSvgToImage: convertSvgToImageForMediumZoom,
+        openZoom: openMermaidZoom,
+        closeZoom: closeMermaidZoom
+    };
+
+    // Auto-initialisation si le DOM est déjà chargé
+    if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", () => {
+            initMermaidZoom();
+            setupGlobalMermaidColorFix();
+        });
+    } else {
         initMermaidZoom();
         setupGlobalMermaidColorFix();
-    }, 1000);
-});
-
-// Observer simple pour les nouveaux diagrammes Mermaid (avec debounce)
-let resizeTimeout;
-const observer = new MutationObserver(() => {
-    // Debounce pour éviter les appels multiples
-    clearTimeout(resizeTimeout);
-    resizeTimeout = setTimeout(() => {
-        // Vérifier s'il y a vraiment de nouveaux diagrammes
-        const mermaidElements = document.querySelectorAll(".mermaid");
-        const wrappedElements = document.querySelectorAll(".mermaid-zoom-wrapper");
+    }
 
-        // Seulement si il y a plus de diagrammes que de wrappers
-        if (mermaidElements.length > wrappedElements.length) {
-            console.log(`🔄 New Mermaid diagrams detected: ${mermaidElements.length} total, ${wrappedElements.length} wrapped`);
+    // Aussi après le chargement complet
+    window.addEventListener("load", () => {
+        setTimeout(() => {
             initMermaidZoom();
-        }
-    }, 500); // Délai plus long pour éviter les appels fréquents
-});
+            setupGlobalMermaidColorFix();
+        }, 1000);
+    });
 
-observer.observe(document.body, {
-    childList: true,
-    subtree: true,
-});
+    // Observer simple pour les nouveaux diagrammes Mermaid (avec debounce)
+    let resizeTimeout;
+    const observer = new MutationObserver(() => {
+        // Debounce pour éviter les appels multiples
+        clearTimeout(resizeTimeout);
+        resizeTimeout = setTimeout(() => {
+            // Vérifier s'il y a vraiment de nouveaux diagrammes
+            const mermaidElements = document.querySelectorAll(".mermaid");
+            const wrappedElements = document.querySelectorAll(".mermaid-zoom-wrapper");
+
+            // Seulement si il y a plus de diagrammes que de wrappers
+            if (mermaidElements.length > wrappedElements.length) {
+                console.log(`🔄 New Mermaid diagrams detected: ${mermaidElements.length} total, ${wrappedElements.length} wrapped`);
+                initMermaidZoom();
+            }
+        }, 500); // Délai plus long pour éviter les appels fréquents
+    });
+
+    observer.observe(document.body, {
+        childList: true,
+        subtree: true,
+    });
 
-console.log("🚀 Mermaid Zoom Script v19.0 loaded - DEBOUNCED observer to prevent resize loops");
+    console.log("🚀 Mermaid Zoom Script v19.0 loaded - DEBOUNCED observer to prevent resize loops");
+} // Fin du bloc else (MERMAID_ZOOM_ENABLED)