galerie fini

css/styles.css

@@ -303,6 +303,7 @@ body:has(.nav-toggle:checked) .nav-burger::after {
     overflow: hidden;
     width: 100vw;
     margin-left: calc(50% - 50vw);
+    padding-bottom: 3.5rem;
 }
 
 .hero #photo,
@@ -553,9 +554,60 @@ section {
     height: 240px;
     object-fit: cover;
     display: block;
+    cursor: zoom-in;
     transition: transform 0.5s ease;
 }
 
+/* ==========================================================================
+   Lightbox
+   ========================================================================== */
+.lightbox {
+    position: fixed;
+    inset: 0;
+    z-index: 200;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+    background: rgba(0, 0, 0, 0.9);
+    cursor: zoom-out;
+}
+
+.lightbox.is-open {
+    display: flex;
+}
+
+.lightbox img {
+    max-width: 100%;
+    max-height: 100%;
+    border-radius: var(--rayon);
+    box-shadow: var(--ombre-forte);
+    cursor: default;
+}
+
+.lightbox-close {
+    position: absolute;
+    top: 1.2rem;
+    right: 1.5rem;
+    width: 44px;
+    height: 44px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.1);
+    color: var(--blanc);
+    font-size: 1.3rem;
+    cursor: pointer;
+    transition: background var(--transition), transform var(--transition);
+}
+
+.lightbox-close:hover {
+    background: rgba(255, 255, 255, 0.2);
+    transform: scale(1.05);
+}
+
 /* ==========================================================================
    Bande CTA
    ========================================================================== */

index.html

@@ -258,6 +258,11 @@
     </div>
 </footer>
 
+<div class="lightbox" id="lightbox">
+    <button type="button" class="lightbox-close" id="lightbox-close" aria-label="Fermer"><i class="fa-solid fa-xmark"></i></button>
+    <img src="" alt="" id="lightbox-img">
+</div>
+
 <script>
     const navToggle = document.getElementById('nav-toggle');
     document.querySelectorAll('.nav-mobile a').forEach(function (link) {
@@ -265,6 +270,43 @@
             navToggle.checked = false;
         });
     });
+
+    const lightbox = document.getElementById('lightbox');
+    const lightboxImg = document.getElementById('lightbox-img');
+    const lightboxClose = document.getElementById('lightbox-close');
+
+    function openLightbox(img) {
+        lightboxImg.src = img.src;
+        lightboxImg.alt = img.alt;
+        lightbox.classList.add('is-open');
+        document.body.style.overflow = 'hidden';
+    }
+
+    function closeLightbox() {
+        lightbox.classList.remove('is-open');
+        lightboxImg.src = '';
+        document.body.style.overflow = '';
+    }
+
+    document.querySelectorAll('.gallery img').forEach(function (img) {
+        img.addEventListener('click', function () {
+            openLightbox(img);
+        });
+    });
+
+    lightboxClose.addEventListener('click', closeLightbox);
+
+    lightbox.addEventListener('click', function (e) {
+        if (e.target === lightbox) {
+            closeLightbox();
+        }
+    });
+
+    document.addEventListener('keydown', function (e) {
+        if (e.key === 'Escape') {
+            closeLightbox();
+        }
+    });
 </script>
 
 </body>