add url changer, fix base model perf, add mermaid zoom

app/src/components/HtmlEmbed.astro

@@ -172,7 +172,7 @@ const htmlWithId =
   }
   .html-embed__card.is-frameless {
     background: transparent;
-    border-color: transparent;
+    border: none;
     padding: 0;
   }
   .html-embed__desc {

app/src/components/TableOfContents.astro

@@ -221,6 +221,7 @@ const { tableOfContentAutoCollapse = false } = Astro.props as Props;
 
     let prevActiveIdx = -1;
     let prevActiveElements = new Set();
+    let prevActiveHeadingId = null;
 
     const setCollapsedState = (activeIdx) => {
       if (!autoCollapse) return;
@@ -502,9 +503,40 @@ const { tableOfContentAutoCollapse = false } = Astro.props as Props;
     let lastRequestedIdx = -1;
     let isProcessing = false;
 
+    // Fonction pour mettre à jour l'URL avec l'ancre actuelle
+    const updateURL = (headingId) => {
+      if (!headingId) return;
+
+      const newUrl = `${window.location.pathname}${window.location.search}#${headingId}`;
+
+      // Mettre à jour l'URL sans recharger la page
+      if (window.location.href !== newUrl) {
+        history.pushState(null, null, newUrl);
+
+        // Communiquer avec l'iframe parent (pour les Spaces HF)
+        if (window.parent !== window) {
+          try {
+            window.parent.postMessage(
+              {
+                type: "urlChange",
+                url: newUrl,
+                hash: headingId,
+              },
+              "*",
+            );
+          } catch (e) {
+            // Ignorer les erreurs de communication avec le parent
+            console.debug("Could not communicate with parent window:", e);
+          }
+        }
+      }
+    };
+
     const onScroll = () => {
       // active link highlight
       let activeIdx = -1;
+      let activeHeadingId = null;
+
       for (let i = headingsArr.length - 1; i >= 0; i--) {
         const top = headingsArr[i].getBoundingClientRect().top;
         if (top - 60 <= 0) {
@@ -516,10 +548,17 @@ const { tableOfContentAutoCollapse = false } = Astro.props as Props;
           actives.forEach((a) => a.classList.add("active"));
           // Utiliser l'index du heading actif (n'importe quel niveau)
           activeIdx = i;
+          activeHeadingId = headingsArr[i].id;
           break;
         }
       }
 
+      // Mettre à jour l'URL si la section active a changé
+      if (activeHeadingId && activeHeadingId !== prevActiveHeadingId) {
+        updateURL(activeHeadingId);
+        prevActiveHeadingId = activeHeadingId;
+      }
+
       if (activeIdx === prevActiveIdx) return;
 
       // Sauvegarder la dernière demande
@@ -551,9 +590,53 @@ const { tableOfContentAutoCollapse = false } = Astro.props as Props;
     if (autoCollapse) setCollapsedState(0);
 
     window.addEventListener("scroll", onScroll);
+
+    // Gérer la navigation par ancres au chargement de la page
+    const handleInitialNavigation = () => {
+      const hash = window.location.hash;
+      if (hash) {
+        const targetElement = document.querySelector(hash);
+        if (targetElement) {
+          // Attendre que le DOM soit prêt puis faire défiler vers l'élément
+          setTimeout(() => {
+            targetElement.scrollIntoView({
+              behavior: "smooth",
+              block: "start",
+            });
+            // Mettre à jour l'URL après le scroll
+            setTimeout(() => {
+              updateURL(hash.substring(1)); // Enlever le # du hash
+            }, 100);
+          }, 100);
+        }
+      } else {
+        // Si pas d'ancre, initialiser avec la première section
+        if (headingsArr.length > 0) {
+          updateURL(headingsArr[0].id);
+        }
+      }
+    };
+
     // Initialize state
     onScroll();
 
+    // Gérer la navigation initiale
+    handleInitialNavigation();
+
+    // Gérer les événements de navigation du navigateur (boutons précédent/suivant)
+    window.addEventListener("popstate", (event) => {
+      const hash = window.location.hash;
+      if (hash) {
+        const targetElement = document.querySelector(hash);
+        if (targetElement) {
+          targetElement.scrollIntoView({ behavior: "smooth", block: "start" });
+        }
+      } else {
+        // Si pas d'ancre, aller au début de la page
+        window.scrollTo({ top: 0, behavior: "smooth" });
+      }
+    });
+
     // Close mobile accordion when a link inside it is clicked
     if (holderMobile) {
       const details = holderMobile.closest("details");

app/src/content/embeds/base-model-performance.html

@@ -78,8 +78,7 @@
     }
 
     .base-model-performance .model-circle {
-        stroke: white;
-        stroke-width: 3;
+        /* stroke is set dynamically in JavaScript */
     }
 
     .base-model-performance .model-icon {
@@ -326,39 +325,22 @@
             // X-axis label
             const xLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
             xLabel.setAttribute('x', margin.left + width / 2);
-            xLabel.setAttribute('y', height + margin.top + 60);
+            xLabel.setAttribute('y', height + margin.top + 65);
             xLabel.setAttribute('text-anchor', 'middle');
             xLabel.setAttribute('class', 'axis-label');
-            xLabel.textContent = 'Model Size';
+            xLabel.innerHTML = '<tspan font-weight="700">Model Size</tspan><tspan font-weight="400"> (Billion parameters)</tspan>';
             svg.appendChild(xLabel);
 
-            const xSubLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-            xSubLabel.setAttribute('x', margin.left + width / 2);
-            xSubLabel.setAttribute('y', height + margin.top + 75);
-            xSubLabel.setAttribute('text-anchor', 'middle');
-            xSubLabel.setAttribute('class', 'axis-sublabel');
-            xSubLabel.textContent = 'Billion parameters';
-            svg.appendChild(xSubLabel);
-
             // Y-axis label
             const yLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
             yLabel.setAttribute('x', -(height / 2 + margin.top));
-            yLabel.setAttribute('y', 50);
+            yLabel.setAttribute('y', 55);
             yLabel.setAttribute('text-anchor', 'middle');
             yLabel.setAttribute('transform', 'rotate(-90)');
             yLabel.setAttribute('class', 'axis-label');
-            yLabel.textContent = 'Win rate (%)';
+            yLabel.innerHTML = '<tspan font-weight="700">Win Rate (%)</tspan><tspan font-weight="400"> - 12 popular LLM Benchmarks</tspan>';
             svg.appendChild(yLabel);
 
-            const ySubLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-            ySubLabel.setAttribute('x', -(height / 2 + margin.top));
-            ySubLabel.setAttribute('y', 65);
-            ySubLabel.setAttribute('text-anchor', 'middle');
-            ySubLabel.setAttribute('transform', 'rotate(-90)');
-            ySubLabel.setAttribute('class', 'axis-sublabel');
-            ySubLabel.textContent = 'Measured on 12 popular LLM Benchmarks';
-            svg.appendChild(ySubLabel);
-
             // Draw arrows
             // "faster/cheaper" arrow (shorter, aligned to left)
             const arrow1StartX = margin.left + 80;
@@ -419,6 +401,9 @@
                 if (isHighlight) {
                     circle.setAttribute('stroke', model.color);
                     circle.setAttribute('stroke-width', '4');
+                } else {
+                    circle.setAttribute('stroke', 'rgba(0, 0, 0, 0.25)');
+                    circle.setAttribute('stroke-width', '2');
                 }
                 g.appendChild(circle);
 
@@ -438,7 +423,7 @@
                 } else {
                     logoSize = 36;
                 }
-                foreignObject.innerHTML = `<div xmlns="http://www.w3.org/1999/xhtml" style="width: ${isSmolLM3 ? 54 : 44}px; height: ${isSmolLM3 ? 54 : 44}px; display: flex; align-items: center; justify-content: center;"><img src="/data/${model.logo}-logo.svg" style="width: ${logoSize}px; height: ${logoSize}px;" /></div>`;
+                foreignObject.innerHTML = `<div xmlns="http://www.w3.org/1999/xhtml" style="width: ${isSmolLM3 ? 54 : 44}px; height: ${isSmolLM3 ? 54 : 44}px; display: flex; align-items: center; justify-content: center;"><img src="/data/${model.logo}-logo.svg" style="width: ${logoSize}px; height: auto; max-height: ${logoSize}px;" /></div>`;
                 g.appendChild(foreignObject);
 
                 // Label below
@@ -483,11 +468,14 @@
             </div>
           `;
                     tooltip.classList.add('visible');
+                });
 
-                    const rect = container.getBoundingClientRect();
-                    const svgRect = svg.getBoundingClientRect();
-                    tooltip.style.left = `${x * svgRect.width / 900 + 20}px`;
-                    tooltip.style.top = `${y * svgRect.height / 600 - 50}px`;
+                g.addEventListener('mousemove', (e) => {
+                    if (tooltip.classList.contains('visible')) {
+                        const rect = container.getBoundingClientRect();
+                        tooltip.style.left = `${e.clientX - rect.left + 10}px`;
+                        tooltip.style.top = `${e.clientY - rect.top - 10}px`;
+                    }
                 });
 
                 g.addEventListener('mouseleave', () => {

app/src/pages/index.astro

@@ -206,6 +206,7 @@ const licence =
     <script
       src="https://cdn.jsdelivr.net/npm/medium-zoom@1.1.0/dist/medium-zoom.min.js"
     ></script>
+    <script src="/src/scripts/mermaid-zoom.js"></script>
     <script>
       // Debug and global zoom initialization
 

app/src/scripts/README.md

@@ -0,0 +1,65 @@
+# Mermaid Zoom Integration
+
+Ce module fournit une intégration du zoom medium-zoom pour les diagrammes Mermaid dans le projet Astro.
+
+## Fonctionnalités
+
+- ✅ **Zoom medium-zoom identique aux images** : Utilise la vraie bibliothèque medium-zoom
+- ✅ **Conversion SVG → Image** : Convertit les diagrammes Mermaid en images pour le zoom
+- ✅ **Adaptation au thème** : Reconversion automatique lors des changements de thème
+- ✅ **Fallback robuste** : Zoom custom si la conversion échoue
+- ✅ **Auto-initialisation** : Détection automatique des nouveaux diagrammes
+
+## Architecture
+
+### Fichiers
+
+- `src/scripts/mermaid-zoom.js` : Module principal avec toute la logique
+- `src/pages/index.astro` : Import du module (ligne 209)
+- `src/styles/components/_mermaid.css` : Styles CSS pour les wrappers
+
+### Fonctions principales
+
+- `convertSvgToImageForMediumZoom()` : Convertit SVG en image pour medium-zoom
+- `setupMermaidZoom()` : Wrappe les diagrammes et initialise le zoom
+- `initMermaidZoom()` : Fonction principale d'initialisation
+- `openMermaidZoom()` / `closeMermaidZoom()` : Zoom custom de fallback
+
+### API globale
+
+```javascript
+window.MermaidZoom = {
+  init: initMermaidZoom,           // Initialiser le zoom
+  setup: setupMermaidZoom,         // Wrapper et conversion
+  cleanup: cleanupMermaidObservers, // Nettoyer les observers
+  convertSvgToImage: convertSvgToImageForMediumZoom,
+  openZoom: openMermaidZoom,       // Ouvrir zoom custom
+  closeZoom: closeMermaidZoom      // Fermer zoom custom
+};
+```
+
+## Comment ça marche
+
+1. **Détection** : Le script détecte tous les éléments `.mermaid`
+2. **Wrapper** : Crée un `div.mermaid-zoom-wrapper` autour de chaque diagramme
+3. **Conversion** : Convertit le SVG en image `<img>` avec `data-zoomable="1"`
+4. **Medium-zoom** : Initialise `window.mediumZoom()` sur l'image générée
+5. **Thème** : Observer pour reconvertir lors des changements de thème
+
+## Avantages de cette approche
+
+- **Vrai medium-zoom** : Comportement identique aux images existantes
+- **Pas d'erreur canvas** : Évite l'erreur "Tainted canvases" en utilisant des URLs blob
+- **Réactivité au thème** : Les diagrammes s'adaptent automatiquement
+- **Code modulaire** : Facile à maintenir et déboguer
+- **Performance** : Une seule conversion par diagramme
+
+## Debug
+
+Le module inclut des logs détaillés :
+- `🚀 Mermaid Zoom Script loaded`
+- `🔍 Found X Mermaid elements`
+- `📦 Wrapping Mermaid element X`
+- `🖼️ SVG converted to img element`
+- `🎉 REAL medium-zoom initialized on Mermaid!`
+- `🎨 Theme changed, reconverting Mermaid image`

app/src/scripts/mermaid-zoom.js

@@ -0,0 +1,789 @@
+/**
+ * Mermaid Zoom Integration
+ * Provides medium-zoom functionality for Mermaid diagrams
+ */
+
+// 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
+        const colors = isDark ? {
+            nodeFill: '#1a1a1a',
+            nodeStroke: '#ffffff',
+            nodeStrokeWidth: '1',
+            clusterFill: '#2a2a2a',
+            clusterStroke: '#ffffff',
+            clusterStrokeWidth: '1',
+            pathStroke: '#ffffff',
+            pathStrokeWidth: '1',
+            textColor: '#ffffff'
+        } : {
+            nodeFill: '#ffffff',
+            nodeStroke: '#333333',
+            nodeStrokeWidth: '1',
+            clusterFill: '#f9f9f9',
+            clusterStroke: '#333333',
+            clusterStrokeWidth: '1',
+            pathStroke: '#333333',
+            pathStrokeWidth: '1',
+            textColor: '#333333'
+        };
+
+        // 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 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 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 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 aux chemins
+        const paths = svgElement.querySelectorAll('.edgePath');
+        paths.forEach(path => {
+            path.setAttribute('stroke', colors.pathStroke);
+            path.setAttribute('stroke-width', colors.pathStrokeWidth);
+        });
+
+        // Appliquer les couleurs au texte
+        const textElements = svgElement.querySelectorAll('text, .nodeLabel text, .edgeLabel text');
+        textElements.forEach(text => {
+            text.setAttribute('fill', colors.textColor);
+        });
+
+        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 = `
+      .mermaid rect:not(.flowchart-link), 
+      .mermaid .node rect, 
+      .mermaid .nodeLabel rect {
+        rx: 8px !important;
+        ry: 8px !important;
+      }
+      
+      .mermaid .cluster rect {
+        rx: 8px !important;
+        ry: 8px !important;
+      }
+      
+      .mermaid .nodeLabel p {
+        color: black !important;
+      }
+      
+      .mermaid .edgeLabel {
+        color: black !important;
+      }
+      
+      .mermaid .edgePath {
+        stroke: #333 !important;
+      }
+      
+      .mermaid .node {
+        fill: #fff !important;
+        stroke: #333 !important;
+      }
+      
+      .mermaid .cluster {
+        fill: #f9f9f9 !important;
+        stroke: #333 !important;
+      }
+    `;
+
+        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;
+        }
+
+        // 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
+            };
+
+            console.log(`🔄 Re-rendering Mermaid with config:`, config);
+
+            // 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;
+    }
+}
+
+// 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);
+
+        console.log(`📏 Wrapper dimensions:`, { width: wrapperWidth, height: wrapperHeight });
+
+        // Cloner le SVG
+        const clonedSvg = svgElement.cloneNode(true);
+
+        // Appliquer les styles Mermaid
+        applyMermaidStylesToSvg(clonedSvg);
+
+        // Forcer les dimensions exactes du wrapper sur le SVG
+        clonedSvg.setAttribute('width', wrapperWidth);
+        clonedSvg.setAttribute('height', wrapperHeight);
+        clonedSvg.style.width = `${wrapperWidth}px`;
+        clonedSvg.style.height = `${wrapperHeight}px`;
+
+        // 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 MÊMES dimensions que le wrapper
+        const imgElement = document.createElement('img');
+        imgElement.src = svgUrl;
+        imgElement.style.width = `${wrapperWidth}px`;
+        imgElement.style.height = `${wrapperHeight}px`;
+        imgElement.style.display = 'block';
+        imgElement.setAttribute('data-zoomable', '1');
+        imgElement.classList.add('mermaid-zoom-image'); // Classe spécifique pour Mermaid
+
+        console.log(`🖼️ Image created with exact dimensions:`, { width: wrapperWidth, height: wrapperHeight });
+
+        // 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");
+
+        // 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`);
+
+                // 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 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"],
+        });
+
+        // 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);
+        });
+    }
+}
+
+// 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`);
+
+    try {
+        // Cloner le SVG
+        const clonedSvg = svgElement.cloneNode(true);
+
+        // 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;
+
+        console.log(`📏 SVG dimensions:`, { width, height });
+
+        // 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);
+
+        // 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");
+
+        // 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");
+
+        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`);
+
+            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,
+            });
+
+            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);
+            });
+
+            themeObserver.observe(document.documentElement, {
+                attributes: true,
+                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);
+            // 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 = `
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.85);
+    z-index: 9999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: zoom-out;
+    opacity: 0;
+    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 = `
+    max-width: 90%;
+    max-height: 90%;
+    background: white;
+    border-radius: 8px;
+    padding: 20px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+    transform: scale(0.8);
+    transition: transform 0.3s ease;
+    overflow: auto;
+  `;
+
+    // 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);
+
+    // 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)";
+    });
+
+    // 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") {
+            closeMermaidZoom(overlay);
+            document.removeEventListener("keydown", handleEscape);
+        }
+    };
+    document.addEventListener("keydown", handleEscape);
+
+    // 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)";
+    }
+
+    // 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);
+    }
+
+    // Supprimer l'overlay après l'animation
+    setTimeout(() => {
+        if (document.body.contains(overlay)) {
+            document.body.removeChild(overlay);
+        }
+    }, 300);
+}
+
+// Fonction pour nettoyer les observers
+function cleanupMermaidObservers(wrapper) {
+    if (wrapper._themeObserver) {
+        wrapper._themeObserver.disconnect();
+        wrapper._themeObserver = null;
+    }
+}
+
+// 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`);
+
+    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`);
+            return;
+        }
+
+        console.log(`📦 Wrapping Mermaid element ${index}`);
+
+        // Créer le wrapper
+        const wrapper = document.createElement("div");
+        wrapper.className = "mermaid-zoom-wrapper";
+        wrapper.setAttribute("data-zoomable", "1");
+
+        // Insérer le wrapper avant l'élément Mermaid
+        mermaidEl.parentNode.insertBefore(wrapper, mermaidEl);
+
+        // Déplacer l'élément Mermaid dans le wrapper
+        wrapper.appendChild(mermaidEl);
+
+        // S'assurer que le wrapper a des dimensions
+        wrapper.style.display = "block";
+        wrapper.style.width = "100%";
+        wrapper.style.maxWidth = "100%";
+
+        // Ajouter la classe "converting" pour masquer le flicker
+        wrapper.classList.add("converting");
+
+        // Convertir SVG en image pour utiliser VRAI medium-zoom
+        console.log(`✅ Converting Mermaid to image for REAL medium-zoom`);
+
+        // Utiliser le VRAI medium-zoom avec conversion SVG → image SANS flicker
+        console.log(`✅ Setting up REAL medium-zoom for Mermaid ${index}`);
+
+        // 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}`);
+            }
+        }, 2000);
+    });
+}
+
+// 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
+    });
+
+    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);
+        }
+    };
+
+    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();
+}
+
+// Aussi après le chargement complet
+window.addEventListener("load", () => {
+    setTimeout(() => {
+        initMermaidZoom();
+        setupGlobalMermaidColorFix();
+    }, 1000);
+});
+
+// Observer simple pour les nouveaux diagrammes Mermaid
+const observer = new MutationObserver(() => {
+    setTimeout(initMermaidZoom, 500);
+});
+
+observer.observe(document.body, {
+    childList: true,
+    subtree: true,
+});
+
+console.log("🚀 Mermaid Zoom Script v14.0 loaded - REAL medium-zoom with JavaScript z-index fix");

app/src/styles/components/_mermaid.css

@@ -2,6 +2,53 @@
     color: black !important;
 }
 
+/* Masquer le flicker pendant la conversion */
+.mermaid-zoom-wrapper.converting {
+    opacity: 0.7;
+    transition: opacity 0.2s ease;
+}
+
+.mermaid-zoom-wrapper.converting .mermaid {
+    opacity: 0.7;
+    transition: opacity 0.2s ease;
+}
+
+/* Assurer que les diagrammes Mermaid prennent toute la largeur */
+.mermaid {
+    width: 100% !important;
+    max-width: 100% !important;
+    display: block !important;
+}
+
+/* Styles pour les SVG Mermaid */
+.mermaid svg {
+    width: 100% !important;
+    max-width: 100% !important;
+    height: auto !important;
+}
+
+/* Styles pour les wrappers de zoom Mermaid */
+.mermaid-zoom-wrapper {
+    display: block !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    cursor: zoom-in;
+    position: relative;
+}
+
+.mermaid-zoom-wrapper .mermaid {
+    width: 100% !important;
+    max-width: 100% !important;
+    display: block !important;
+}
+
+.mermaid-zoom-wrapper .mermaid svg {
+    width: 100% !important;
+    max-width: 100% !important;
+    height: auto !important;
+    display: block !important;
+}
+
 /* Styles pour les nœuds avec bords arrondis */
 .mermaid rect:not(.flowchart-link),
 .mermaid .node rect,
@@ -11,6 +58,88 @@
     ry: 8px !important;
 }
 
+/* Styles pour les diagrammes Mermaid zoomables */
+.mermaid-zoom-wrapper:hover {
+    opacity: 0.95;
+    transition: opacity 0.2s ease;
+}
+
+/* Appliquer le même style que les images zoomables */
+.mermaid-zoom-wrapper[data-zoomable="1"] {
+    cursor: zoom-in;
+}
+
+/* Styles pour le mode zoom ouvert */
+.medium-zoom--opened .mermaid-zoom-wrapper {
+    cursor: zoom-out;
+}
+
+/* Exclure les images Mermaid du filtre d'inversion en mode sombre */
+/* Le filtre global s'applique à .medium-zoom-image--opened */
+/* Nous devons être plus spécifique pour les images Mermaid */
+
+/* Exception pour les images Mermaid - pas de filtre d'inversion */
+:global([data-theme="dark"]) .mermaid-zoom-wrapper img:global(.medium-zoom-image--opened) {
+    filter: none !important;
+}
+
+/* Alternative: cibler directement l'image dans le wrapper Mermaid */
+:global([data-theme="dark"]) .mermaid-zoom-wrapper :global(.medium-zoom-image--opened) {
+    filter: none !important;
+}
+
+/* Encore plus spécifique: cibler l'image générée par notre script */
+:global([data-theme="dark"]) .mermaid-zoom-wrapper img[data-zoomable="1"]:global(.medium-zoom-image--opened) {
+    filter: none !important;
+}
+
+/* Forcer un z-index très élevé pour medium-zoom (au-dessus de tout) */
+:global(.medium-zoom-overlay) {
+    z-index: 9999999 !important;
+}
+
+:global(.medium-zoom-image--opened) {
+    z-index: 10000000 !important;
+}
+
+/* Cibler la classe spécifique mermaid-zoom-image */
+:global([data-theme="dark"]) .mermaid-zoom-image:global(.medium-zoom-image--opened) {
+    filter: none !important;
+}
+
+/* Overlay medium-zoom avec z-index très élevé pour Mermaid */
+:global(.medium-zoom-overlay):has(.mermaid-zoom-wrapper) {
+    z-index: 9999999 !important;
+}
+
+/* Z-index très élevé pour les images Mermaid */
+:global(.mermaid-zoom-image):global(.medium-zoom-image--opened) {
+    z-index: 10000000 !important;
+}
+
+:global(.mermaid-zoom-wrapper):has(:global(.medium-zoom-image--opened)) {
+    z-index: 10000000 !important;
+}
+
+/* Masquer les autres diagrammes quand un est zoomé */
+:global(.medium-zoom--opened) .mermaid-zoom-wrapper {
+    opacity: 0;
+    z-index: calc(var(--z-base) - 1);
+    transition: opacity 0.3s ease;
+}
+
+/* Le diagramme zoomé reste visible */
+:global(.medium-zoom--opened) .mermaid-zoom-wrapper:has(.medium-zoom--opened) {
+    opacity: 1;
+    z-index: var(--z-overlay);
+}
+
+/* Fallback pour les navigateurs sans support :has() */
+:global(.medium-zoom--opened) .mermaid-zoom-wrapper.zoom-active {
+    opacity: 1 !important;
+    z-index: var(--z-overlay) !important;
+}
+
 /* Styles spécifiques pour différents types de diagrammes */
 
 /* Flowchart/Graph - styles généraux */