diff --git a/src/components/Gallery.astro b/src/components/Gallery.astro
index ba5f644..d1c8164 100644
--- a/src/components/Gallery.astro
+++ b/src/components/Gallery.astro
@@ -3,26 +3,29 @@ import { Image } from 'astro:assets';
 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 chambreTilleul  from '../assets/images/chambre_tilleul.jpg';
 import petiteChambre from '../assets/images/petite_chambre.jpg';
 import grenier from '../assets/images/grenier.jpg';
 import cecile from '../assets/images/cecile.jpg';
 import hamac from '../assets/images/hamac.jpg';
 import terrasse from '../assets/images/terrasse.jpg';
 import jardin from '../assets/images/jardin.jpg';
+import riviere from '../assets/images/riviere.jpg';
+import prairie from '../assets/images/prairie.jpg';
 
-// Chaque photo a ses classes de span écrites en dur (Tailwind ne détecte pas les classes dynamiques)
+// Pour ajouter une photo : importer l'image et ajouter une ligne ici. C'est tout.
 const photos = [
-  { src: salon1,          alt: 'Le salon',            caption: 'Le salon',                                      cls: 'col-span-1 h-44 md:col-span-2 md:row-span-2 md:h-auto' },
-  { src: salon2,          alt: 'Le salon',            caption: 'Le salon',                                      cls: 'col-span-1 h-44 md:col-span-1 md:row-span-1 md:h-auto' },
-  { src: chambreRiviere1, alt: 'Chambre Rivière',     caption: 'Chambre Rivière · 1 lit 140×190',              cls: 'col-span-1 h-44 md:col-span-1 md:row-span-1 md:h-auto' },
-  { src: chambreTilleul,  alt: 'Chambre Tilleul',     caption: 'Chambre Tilleul · 1 lit 140×190',              cls: 'col-span-1 h-44 md:col-span-1 md:row-span-1 md:h-auto' },
-  { src: petiteChambre,   alt: 'La petite chambre',   caption: 'La petite chambre · 1 lit 90×190',             cls: 'col-span-2 h-44 md:col-span-2 md:row-span-1 md:h-auto' },
-  { src: grenier,         alt: 'Le grenier',           caption: 'Le grenier',                                    cls: 'col-span-1 h-44 md:col-span-1 md:row-span-2 md:h-auto' },
-  { src: terrasse,        alt: 'La terrasse',          caption: 'La terrasse',                                   cls: 'col-span-1 h-44 md:col-span-1 md:row-span-1 md:h-auto' },
-  { src: jardin,          alt: 'Le jardin',             caption: 'Le jardin',                                    cls: 'col-span-1 h-44 md:col-span-1 md:row-span-1 md:h-auto' },
-  { src: hamac,           alt: 'Espace détente',        caption: 'Espace détente · Hamac',                      cls: 'col-span-2 h-44 md:col-span-2 md:row-span-1 md:h-auto' },
-  { src: cecile,          alt: 'Cécile',               caption: 'Cécile sur son fauteuil, scrutant la nature…', cls: 'col-span-2 h-48 md:col-span-3 md:row-span-1 md:h-auto' },
+  { src: salon1, alt: 'Le salon', caption: 'Le salon' },
+  { src: chambreRiviere1, alt: 'Chambre Rivière', caption: 'Chambre Rivière · 1 lit 140×190' },
+  { src: terrasse, alt: 'La terrasse', caption: 'La terrasse' },
+  { src: salon2, alt: 'Le salon', caption: 'Le salon' },
+  { src: grenier, alt: 'Le grenier', caption: 'Le grenier' },
+  { src: jardin, alt: 'Le jardin', caption: 'Le jardin' },
+  { src: chambreTilleul, alt: 'Chambre Tilleul',   caption: 'Chambre Tilleul · 1 lit 140×190' },
+  { src: riviere, alt: "L'Allier", caption: "L'Allier, à 100m" },
+  { src: petiteChambre, alt: 'La petite chambre', caption: 'La petite chambre · 1 lit 90×190' },
+  { src: hamac, alt: 'Espace détente', caption: 'Espace détente · Hamac' },
+  { src: cecile, alt: 'Cécile', caption: 'Cécile sur son fauteuil, scrutant la nature…' },
 ];
 ---
 
@@ -34,13 +37,12 @@ const photos = [
       <h2 class="font-serif text-5xl font-light">Découvrez le lieu</h2>
     </div>
 
-    <div class="grid grid-cols-2 md:grid-cols-3 gap-3 md:auto-rows-[200px] grid-flow-dense">
+    <!-- CSS columns : les photos gardent leurs proportions naturelles,
+         s'empilent automatiquement, aucun calcul de span nécessaire. -->
+    <div class="columns-2 md:columns-3 gap-3">
       {photos.map((photo, i) => (
         <div
-          class:list={[
-            "overflow-hidden cursor-pointer group relative",
-            photo.cls,
-          ]}
+          class="break-inside-avoid mb-3 cursor-pointer group relative overflow-hidden"
           data-lightbox={i}
           data-caption={photo.caption}
           role="button"
@@ -50,10 +52,10 @@ const photos = [
           <Image
             src={photo.src}
             alt={photo.alt}
-            class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 pointer-events-none"
+            class="w-full h-auto block group-hover:scale-105 transition-transform duration-700 pointer-events-none"
           />
           <div class="absolute inset-0 bg-dark/0 group-hover:bg-dark/30 transition-colors duration-300 flex items-end">
-            <span class="text-white/0 group-hover:text-white/90 transition-colors duration-300 text-xs tracking-[0.15em] uppercase px-4 pb-4">
+            <span class="translate-y-2 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300 text-white text-xs tracking-[0.15em] uppercase px-4 pb-4">
               {photo.caption}
             </span>
           </div>