Images: Miniatures avec modal d'agrandissement

Les images dans les notes sont maintenant des miniatures qui s'agrandissent
dans un modal en plein écran au clic.

CSS - Miniatures:
- .note-card-image: 140px hauteur (cartes pliées)
- .note-image: 200px max-height (notes expandues, réduit de 300px)
- Cursor pointer + hover effect (scale 1.02, opacity 0.9)
- Indication visuelle qu'on peut cliquer

Modal Image:
- Fond noir semi-transparent (rgba(0,0,0,0.9))
- Image centrée, max 90vw x 90vh
- Bouton fermeture (top-right, backdrop-filter)
- z-index 400 (au-dessus de tout)
- Animation fadeIn 0.2s

Interactions:
- Clic sur miniature → Modal avec image en taille réelle
- Clic sur fond noir → Ferme le modal
- Bouton X → Ferme le modal
- Touche Escape → Ferme le modal
- Délégation d'événements pour gérer les images après re-render
- Désactive scroll pendant que modal ouvert

JavaScript:
- openImageModal(src): Ouvre modal + désactive scroll
- closeImageModal(): Ferme modal + réactive scroll
- Event listeners: click, escape, backdrop

Bénéfices utilisateur:
✓ Notes plus compactes (images miniatures)
✓ Images consultables en haute qualité (modal)
✓ Navigation intuitive (clic pour agrandir)
✓ Fermeture rapide (X, Escape, backdrop)
✓ Pas de scroll accidentel pendant consultation

Files:
- public/css/components.css: Miniatures + hover effects
- public/css/skeleton.css: Styles modal image
- public/index.html: HTML modal image
- public/js/complete-app.js: Gestion modal + event listeners

public/js/complete-app.js

@@ -534,6 +534,27 @@ function closeNotification(notification) {
   }, 300);
 }
 
+// ==================== MODAL IMAGE ====================
+function openImageModal(imageSrc) {
+  const modal = document.getElementById('imageModal');
+  const img = document.getElementById('imageModalImg');
+
+  if (modal && img) {
+    img.src = imageSrc;
+    modal.classList.add('active');
+    document.body.style.overflow = 'hidden'; // Désactiver le scroll
+  }
+}
+
+function closeImageModal() {
+  const modal = document.getElementById('imageModal');
+
+  if (modal) {
+    modal.classList.remove('active');
+    document.body.style.overflow = ''; // Réactiver le scroll
+  }
+}
+
 // ==================== INLINE NOTE EXPANSION ====================
 function expandNote(noteId) {
   state.expandedNoteId = noteId;
@@ -2263,6 +2284,43 @@ async function init() {
   if (saveOpenRouterBtn) {
     saveOpenRouterBtn.addEventListener('click', saveOpenRouterSettings);
   }
+
+  // ==================== MODAL IMAGE ====================
+  // Fermer le modal avec le bouton X
+  const imageModalClose = document.getElementById('imageModalClose');
+  if (imageModalClose) {
+    imageModalClose.addEventListener('click', closeImageModal);
+  }
+
+  // Fermer le modal en cliquant sur le fond
+  const imageModal = document.getElementById('imageModal');
+  if (imageModal) {
+    imageModal.addEventListener('click', (e) => {
+      if (e.target === imageModal) {
+        closeImageModal();
+      }
+    });
+  }
+
+  // Fermer le modal avec la touche Escape
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') {
+      closeImageModal();
+    }
+  });
+
+  // Délégation d'événements pour les clics sur les images
+  // Cela permettra de gérer les images même après un re-render
+  document.addEventListener('click', (e) => {
+    const target = e.target;
+
+    // Si on clique sur une image de note (miniature)
+    if (target.classList.contains('note-card-image') || target.classList.contains('note-image')) {
+      e.preventDefault();
+      e.stopPropagation();
+      openImageModal(target.src);
+    }
+  });
 }
 
 // Démarrer l'application