affichage des images en grand lors des clics

assets/main.js

@@ -149,6 +149,50 @@ async function chargerDepeches() {
     }
 }
 
+/* === LIGHTBOX (images dans les entrées) === */
+function initLightbox() {
+    const contenu = document.querySelector('.fenetre-contenu');
+    if (!contenu) return;
+
+    contenu.addEventListener('click', e => {
+        const img = e.target.closest('img:not(.thanks)');
+        if (!img) return;
+
+        const overlay = document.createElement('div');
+        overlay.className = 'lightbox';
+
+        const fond = document.createElement('div');
+        fond.className = 'lightbox-fond';
+        overlay.appendChild(fond);
+
+        const clone = document.createElement('img');
+        clone.className = 'lightbox-image';
+        clone.src = img.src;
+        clone.alt = img.alt;
+        overlay.appendChild(clone);
+
+        const fermer = document.createElement('button');
+        fermer.className = 'lightbox-fermer';
+        fermer.innerHTML = '×';
+        overlay.appendChild(fermer);
+
+        document.body.appendChild(overlay);
+
+        overlay.addEventListener('click', e => {
+            if (e.target === fond || e.target === fermer || e.target === overlay) {
+                overlay.remove();
+            }
+        });
+
+        document.addEventListener('keydown', function onKey(e) {
+            if (e.key === 'Escape') {
+                overlay.remove();
+                document.removeEventListener('keydown', onKey);
+            }
+        });
+    });
+}
+
 /* === INIT === */
 document.addEventListener('DOMContentLoaded', () => {
     animerTitreNav();
@@ -164,4 +208,6 @@ document.addEventListener('DOMContentLoaded', () => {
     if (document.getElementById('feed')) {
         chargerDepeches();
     }
+
+    initLightbox();
 });

assets/styles.css

@@ -346,6 +346,53 @@ body {
     }
 }
 
+/* === LIGHTBOX === */
+.lightbox {
+    position: fixed;
+    inset: 0;
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.lightbox-fond {
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.8);
+    cursor: zoom-out;
+}
+
+.lightbox-image {
+    position: relative;
+    max-width: 90vw;
+    max-height: 90vh;
+    object-fit: contain;
+    z-index: 1;
+    border: 2px solid white;
+    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
+}
+
+.lightbox-fermer {
+    position: fixed;
+    top: 1rem;
+    right: 1.5rem;
+    z-index: 2;
+    background: none;
+    border: none;
+    color: #fff;
+    font-size: 2.5rem;
+    cursor: pointer;
+    font-family: 'IM Fell English', serif;
+    line-height: 1;
+    opacity: 0.7;
+    transition: opacity 0.2s;
+}
+
+.lightbox-fermer:hover {
+    opacity: 1;
+}
+
 /* === DETAILS / SUMMARY === */
 summary {
     cursor: pointer;