fix: améliorer le z-index des MultiImage lors du zoom

- Masquer temporairement les autres images lors du zoom avec medium-zoom
- Ajouter transitions fluides pour opacity et z-index
- Fallback JavaScript pour navigateurs sans support CSS :has()
- Gestion clavier (Escape) et clic overlay pour fermer le zoom
- Résout le problème des autres images visibles par-dessus le zoom

app/src/components/MultiImage.astro

@@ -162,6 +162,28 @@ const gridColumns = getGridColumns();
         display: flex;
         flex-direction: column;
         text-align: center;
+        position: relative;
+        z-index: var(--z-content);
+        transition: z-index 0.3s ease;
+    }
+
+    /* Quand medium-zoom est actif, masquer temporairement les autres images du multi-image */
+    :global(.medium-zoom--opened) .multi-image-item {
+        opacity: 0;
+        z-index: calc(var(--z-base) - 1);
+        transition: opacity 0.3s ease, z-index 0.3s ease;
+    }
+
+    /* L'image actuellement zoomée reste visible */
+    :global(.medium-zoom--opened) .multi-image-item:has(:global(.medium-zoom--opened)) {
+        opacity: 1;
+        z-index: var(--z-overlay);
+    }
+
+    /* Fallback pour navigateurs sans support :has() */
+    :global(.medium-zoom--opened) .multi-image-item.zoom-active {
+        opacity: 1 !important;
+        z-index: var(--z-overlay) !important;
     }
 
     .multi-image-item :global(.ri-root) {
@@ -231,3 +253,46 @@ const gridColumns = getGridColumns();
         margin: 0 auto;
     }
 </style>
+
+<script>
+// Enhanced medium-zoom integration for MultiImage
+document.addEventListener('DOMContentLoaded', () => {
+    // Amélioration du comportement des MultiImage avec medium-zoom
+    const multiImages = document.querySelectorAll('.multi-image');
+    
+    multiImages.forEach(multiImage => {
+        const items = multiImage.querySelectorAll('.multi-image-item');
+        const zoomableImages = multiImage.querySelectorAll('img[data-zoomable="1"]');
+        
+        zoomableImages.forEach(img => {
+            img.addEventListener('click', () => {
+                // Trouver l'item parent de l'image cliquée
+                const activeItem = img.closest('.multi-image-item');
+                
+                // Ajouter la classe pour le fallback :has()
+                items.forEach(item => item.classList.remove('zoom-active'));
+                if (activeItem) {
+                    activeItem.classList.add('zoom-active');
+                }
+            });
+        });
+    });
+    
+    // Nettoyer les classes lors de la fermeture du zoom
+    document.addEventListener('click', (e) => {
+        if (e.target.classList.contains('medium-zoom-overlay')) {
+            // Zoom fermé, nettoyer les classes
+            document.querySelectorAll('.multi-image-item.zoom-active')
+                .forEach(item => item.classList.remove('zoom-active'));
+        }
+    });
+    
+    // Écouter les événements clavier pour fermer le zoom
+    document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape') {
+            document.querySelectorAll('.multi-image-item.zoom-active')
+                .forEach(item => item.classList.remove('zoom-active'));
+        }
+    });
+});
+</script>