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/index.html

@@ -305,6 +305,19 @@
     <!-- Conteneur de notifications -->
     <div class="notifications-container" id="notificationsContainer"></div>
 
+    <!-- Modal pour agrandir les images -->
+    <div class="image-modal" id="imageModal">
+        <div class="image-modal-content">
+            <img src="" alt="" class="image-modal-img" id="imageModalImg">
+        </div>
+        <button class="image-modal-close" id="imageModalClose">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <line x1="18" y1="6" x2="6" y2="18"></line>
+                <line x1="6" y1="6" x2="18" y2="18"></line>
+            </svg>
+        </button>
+    </div>
+
     <!-- JavaScript -->
     <script src="/js/complete-app.js"></script>
 </body>