update

src/components/Gallery.astro

@@ -1,21 +1,19 @@
 ---
 import { Image } from 'astro:assets';
-import g1 from '../assets/images/gallery_1.jpg';
-import g2 from '../assets/images/gallery_2.jpg';
-import g3 from '../assets/images/gallery_3.jpg';
-import g4 from '../assets/images/gallery_4.jpg';
-import g5 from '../assets/images/gallery_5.jpg';
-import g6 from '../assets/images/gallery_6.jpg';
-import g7 from '../assets/images/gallery_7.jpg';
+import salon1 from '../assets/images/salon_1.jpg';
+import salon2 from '../assets/images/salon_2.jpg';
+import chambreRiviere1 from '../assets/images/chambre_riviere_1.jpg';
+import chambreTilleul from '../assets/images/chambre_tilleul.jpg';
+import petiteChambre from '../assets/images/petite_chambre.jpg';
+import jardin from '../assets/images/jardin.jpg';
 
 const photos = [
-  { src: g1, alt: 'Le gîte' },
-  { src: g2, alt: 'Chambre' },
-  { src: g3, alt: 'Cuisine' },
-  { src: g4, alt: 'Salon' },
-  { src: g5, alt: 'Extérieur' },
-  { src: g6, alt: 'Rivière' },
-  { src: g7, alt: 'Vue panoramique' },
+  { src: salon1, alt: 'Le salon', caption: 'Le salon' },
+  { src: salon2, alt: 'Le salon', caption: 'Le salon' },
+  { src: chambreRiviere1, alt: 'Chambre Rivière', caption: 'Chambre Rivière · 1 lit 140×190' },
+  { src: chambreTilleul, alt: 'Chambre Tilleul', caption: 'Chambre Tilleul · 1 lit 140×190' },
+  { src: petiteChambre, alt: 'La petite chambre', caption: 'La petite chambre · 1 lit 90×190' },
+  { src: jardin, alt: "Le jardin", caption: "Le jardin" },
 ];
 ---
 
@@ -29,15 +27,109 @@ const photos = [
 
     <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
       {photos.map((photo, i) => (
-        <div class:list={["overflow-hidden rounded-sm", i === 6 ? "col-span-2 md:col-span-1" : ""]}>
+        <div
+          class:list={["overflow-hidden rounded-sm cursor-pointer", i === 6 ? "col-span-2 md:col-span-1" : ""]}
+          data-lightbox={i}
+          data-caption={photo.caption}
+          role="button"
+          tabindex="0"
+          aria-label={`Voir en grand : ${photo.alt}`}
+        >
           <Image
             src={photo.src}
             alt={photo.alt}
-            class="w-full h-64 object-cover hover:scale-105 transition-transform duration-500"
+            class="w-full h-64 object-cover hover:scale-105 transition-transform duration-500 pointer-events-none"
           />
         </div>
       ))}
     </div>
 
   </div>
-</section>
+</section>
+
+<!-- Lightbox -->
+<div
+  id="lightbox"
+  class="fixed inset-0 z-50 bg-black/90 items-center justify-center"
+  style="display:none"
+  aria-hidden="true"
+  role="dialog"
+  aria-modal="true"
+  aria-label="Visionneuse de photos"
+>
+  <button
+    id="lb-close"
+    class="absolute top-5 right-6 text-white/60 hover:text-white text-4xl font-light leading-none transition-colors"
+    aria-label="Fermer"
+  >×</button>
+
+  <button
+    id="lb-prev"
+    class="absolute left-4 md:left-8 top-1/2 -translate-y-1/2 text-white/60 hover:text-white text-6xl font-light leading-none transition-colors px-2"
+    aria-label="Photo précédente"
+  >‹</button>
+
+  <div class="flex flex-col items-center max-w-5xl w-full mx-auto px-20">
+    <img id="lb-img" src="" alt="" class="max-h-[80vh] max-w-full object-contain" />
+    <p id="lb-caption" class="mt-5 text-white/50 text-xs tracking-[0.25em] uppercase"></p>
+  </div>
+
+  <button
+    id="lb-next"
+    class="absolute right-4 md:right-8 top-1/2 -translate-y-1/2 text-white/60 hover:text-white text-6xl font-light leading-none transition-colors px-2"
+    aria-label="Photo suivante"
+  >›</button>
+</div>
+
+<script>
+  var lightbox = document.getElementById('lightbox');
+  var lbImg    = document.getElementById('lb-img');
+  var lbCap    = document.getElementById('lb-caption');
+  var lbClose  = document.getElementById('lb-close');
+  var lbPrev   = document.getElementById('lb-prev');
+  var lbNext   = document.getElementById('lb-next');
+  var items    = Array.from(document.querySelectorAll('[data-lightbox]'));
+  var current  = 0;
+
+  function showAt(i) {
+    current = ((i % items.length) + items.length) % items.length;
+    var wrapper = items[current];
+    var img = wrapper.querySelector('img');
+    lbImg.src = img.currentSrc || img.src;
+    lbImg.alt = img.alt;
+    lbCap.textContent = wrapper.dataset.caption || '';
+  }
+
+  function openAt(i) {
+    showAt(i);
+    lightbox.style.display = 'flex';
+    lightbox.setAttribute('aria-hidden', 'false');
+    document.body.style.overflow = 'hidden';
+    lbClose.focus();
+  }
+
+  function closeLightbox() {
+    lightbox.style.display = 'none';
+    lightbox.setAttribute('aria-hidden', 'true');
+    document.body.style.overflow = '';
+  }
+
+  items.forEach(function(el, i) {
+    el.addEventListener('click', function() { openAt(i); });
+    el.addEventListener('keydown', function(e) {
+      if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openAt(i); }
+    });
+  });
+
+  lbClose.addEventListener('click', closeLightbox);
+  lbPrev.addEventListener('click', function() { showAt(current - 1); });
+  lbNext.addEventListener('click', function() { showAt(current + 1); });
+  lightbox.addEventListener('click', function(e) { if (e.target === lightbox) closeLightbox(); });
+
+  document.addEventListener('keydown', function(e) {
+    if (lightbox.style.display === 'none') return;
+    if (e.key === 'Escape')      closeLightbox();
+    if (e.key === 'ArrowLeft')   showAt(current - 1);
+    if (e.key === 'ArrowRight')  showAt(current + 1);
+  });
+</script>