# 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`