update

src/components/About.astro

@@ -1,6 +1,10 @@
 ---
+import { Waves, Sprout, Bed, WifiOff, HousePlus } from 'lucide-astro';
 import { Image } from 'astro:assets';
-import gallery1 from '../assets/images/gallery_1.jpg';
+import about_1 from '../assets/images/about_1.jpg';
+import about_2 from '../assets/images/about_2.jpg';
+import about_3 from '../assets/images/about_3.jpg';
+import about_4 from '../assets/images/about_4.jpg';
 ---
 
 <section id="about" class="py-32 scroll-mt-20">
@@ -27,41 +31,51 @@ import gallery1 from '../assets/images/gallery_1.jpg';
         </p>
         <ul class="space-y-3 list-none">
           <li class="flex items-center gap-3 text-dark/70">
-            <span class="w-1.5 h-1.5 rounded-full bg-primary flex-shrink-0"></span>
+            <Waves class="w-8 h-8 text-blue-500 flex-shrink-0" />
             À 500m de la plage
           </li>
           <li class="flex items-center gap-3 text-dark/70">
-            <span class="w-1.5 h-1.5 rounded-full bg-primary flex-shrink-0"></span>
+            <Sprout class="w-8 h-8 text-green-500 flex-shrink-0" />
             Jardin, terrasse et coins de verdure
           </li>
           <li class="flex items-center gap-3 text-dark/70">
-            <span class="w-1.5 h-1.5 rounded-full bg-primary flex-shrink-0"></span>
+            <Bed class="w-8 h-8 text-red-500 flex-shrink-0" />
-            3 chambres · 1 dortoir 
+            3 chambres · 1 dortoir · Jusqu'à 9 personnes
           </li>          
           <li class="flex items-center gap-3 text-dark/70">
-            <span class="w-1.5 h-1.5 rounded-full bg-primary flex-shrink-0"></span>
+            <HousePlus class="w-8 h-8 text-yellow-500 flex-shrink-0" />
-            Jusqu'à 9 personnes
-          </li>
-          <li class="flex items-center gap-3 text-dark/70">
-            <span class="w-1.5 h-1.5 rounded-full bg-primary flex-shrink-0"></span>
             Au format Gite ou chambre d'hôtes, selon vos envies 
           </li>
           <li class="flex items-center gap-3 text-dark/70">
-            <span class="w-1.5 h-1.5 rounded-full bg-primary flex-shrink-0"></span>
+            <WifiOff class="w-8 h-8 text-gray-500 flex-shrink-0" />
-            Sans wifi — pour mieux décrocher
+            Sans wifi, pour mieux décrocher
           </li>
         </ul>
       </div>
       
-      <div class="relative">
+      <div class="relative flex items-center justify-center">
-        <Image
+        <div class="grid grid-cols-2 md:grid-cols-2 gap-1 bg-white p-1">
-          src={gallery1}
+            <Image
-          alt="Intérieur du gîte"
+              src={about_1}
-          class="w-full h-[500px] object-cover rounded-sm object-center"
+              alt="La Maison de Cécile"
-        />
+              class="w-full h-64 object-cover rounded-sm"
-        <div class="absolute -bottom-5 -left-5 w-40 h-40 border border-primary/25 -z-10"></div>
+            />
-      </div>
+            <Image
-
+                src={about_2}
+                alt="Jardin et terrasse de la maison de Cécile"
+                class="w-full h-64 object-cover rounded-sm"
+            />
+            <Image
+                src={about_3}
+                alt="Vue sur l'Allier depuis la maison de Cécile"
+                class="w-full h-64 object-cover rounded-sm"
+            />
+            <Image
+                src={about_4}
+                alt="Vue sur la terrasse et le jardin de la maison de Cécile"
+                class="w-full h-64 object-cover rounded-sm"
+            />
+        </div>
     </div>
   </div>
 </section>

src/components/Activities.astro

@@ -1,27 +1,49 @@
+---
+import { Car, Clock, Clock2, Train } from 'lucide-astro';
+---
+
 <section id="activities" class="py-32 bg-secondary/20 scroll-mt-20">
   <div class="max-w-6xl mx-auto px-6">
 
     <div class="mb-14 text-center">
-      <span class="block text-xs tracking-[0.3em] uppercase text-primary mb-4">Dans les environs</span>
+      <span class="block text-xs tracking-[0.3em] uppercase text-primary mb-4">Une étape idéale</span>
-      <h2 class="font-serif text-5xl font-light">Une étape idéale</h2>
+      <h2 class="font-serif text-5xl font-normal">Bienvenue a Pont d'Alleyras</h2>
-      <p class="text-dark/60 mt-4 max-w-xl mx-auto">
+      <p class="text-dark/80 mt-4 max-w-4xl mx-auto ">
-        Alleyras est posée au cœur des Gorges du Haut-Allier, sur plusieurs grands itinéraires nature.
+        Niché dans les gorges sauvages du Haut-Allier, au sud de la Haute-Loire et a deux pas de la Lozére,<br/> le village du Pont d'Alleyras est un point de départ idéal pour les randonneurs, cyclistes et amateurs de nature.
-        Vous pouvez arriver à pied, en train, ou en voiture.
       </p>
     </div>
 
     <div class="grid md:grid-cols-2 gap-16 items-start mb-16">
 
       <!-- Accordéons activités -->
-      <div class="space-y-2">
+      <div class="space-y-1">
 
-        <details class="group border-b border-secondary/60">
+        <details class="group border-b border-secondary/100">
-          <summary class="flex items-center justify-between py-5 cursor-pointer list-none">
+          <summary class="flex items-center justify-between py-2 cursor-pointer list-none">
             <div class="flex items-center gap-4">
-              <span class="text-xl">🥾</span>
+              <span class="text-5xl">🏘️</span>
+              <span class="font-serif text-xl font-light">Le village de Pont d'Alleyras</span>
+            </div>
+            <span class="text-primary text-2xl transition-transform duration-300 group-open:rotate-45">+</span>
+          </summary>
+          <div class="pb-6 text-dark/70 leading-relaxed space-y-3 text-sm">
+            <p>Pont d'Alleyras est un village vivant, bien plus animé qu'il n'y paraît :</p>
+            <ul class="space-y-1 pl-4 border-l border-primary/30">
+              <li>Un restaurant gastronomique étoilé</li>
+              <li>Un marché le jeudi soir</li>
+              <li>Un théâtre</li>
+              <li>Des vendeurs ambulants qui s'annoncent à coups de klaxon</li>
+            </ul>
+          </div>
+        </details>
+
+        <details class="group border-b border-secondary/100">
+          <summary class="flex items-center justify-between py-2 cursor-pointer list-none">
+            <div class="flex items-center gap-4">
+              <span class="text-5xl">🥾</span>
               <span class="font-serif text-xl font-light">GR470 · Gorges de l'Allier</span>
             </div>
-            <span class="text-primary text-lg transition-transform duration-300 group-open:rotate-45">+</span>
+            <span class="text-primary text-2xl transition-transform duration-300 group-open:rotate-45">+</span>
           </summary>
           <div class="pb-6 text-dark/70 leading-relaxed space-y-3 text-sm">
             <p>
@@ -43,13 +65,13 @@
           </div>
         </details>
 
-        <details class="group border-b border-secondary/60">
+        <details class="group border-b border-secondary/100">
-          <summary class="flex items-center justify-between py-5 cursor-pointer list-none">
+          <summary class="flex items-center justify-between py-2 cursor-pointer list-none">
             <div class="flex items-center gap-4">
-              <span class="text-xl">🚴</span>
+              <span class="text-5xl">🚴</span>
-              <span class="font-serif text-xl font-light">Via Allier · Vélo itinérant</span>
+              <span class="font-serif text-xl font-light">Via Allier · Nevers/Langogne à vélo</span>
             </div>
-            <span class="text-primary text-lg transition-transform duration-300 group-open:rotate-45">+</span>
+            <span class="text-primary text-2xl transition-transform duration-300 group-open:rotate-45">+</span>
           </summary>
           <div class="pb-6 text-dark/70 leading-relaxed space-y-3 text-sm">
             <p>
@@ -72,19 +94,19 @@
           </div>
         </details>
 
-        <details class="group border-b border-secondary/60">
+        <details class="group border-b border-secondary/100">
-          <summary class="flex items-center justify-between py-5 cursor-pointer list-none">
+          <summary class="flex items-center justify-between py-2 cursor-pointer list-none">
             <div class="flex items-center gap-4">
-              <span class="text-xl">🚣</span>
+              <span class="text-5xl">🚣</span>
               <span class="font-serif text-xl font-light">Canoë & kayak sur l'Allier</span>
             </div>
-            <span class="text-primary text-lg transition-transform duration-300 group-open:rotate-45">+</span>
+            <span class="text-primary text-2xl transition-transform duration-300 group-open:rotate-45">+</span>
           </summary>
           <div class="pb-6 text-dark/70 leading-relaxed space-y-3 text-sm">
             <p>
-              L'Allier est l'une des dernières rivières sauvages d'Europe.
+              L'Allier est l'une des dernières rivières sauvages d'Europe et offre des paysages préservés.
-              Le secteur Monistrol–Alleyras–Chapeauroux est très apprécié pour le kayak itinérant,
+              Le secteur Monistrol–Alleyras–Chapeauroux-Langeac est très apprécié pour le kayak et
-              le canoë et le packraft. La maison est à 100m de la berge.
+              le canoë.
             </p>
             <a
               href="https://www.ffck.org/"
@@ -97,18 +119,17 @@
           </div>
         </details>
 
-        <details class="group border-b border-secondary/60">
+        <details class="group border-b border-secondary/100">
-          <summary class="flex items-center justify-between py-5 cursor-pointer list-none">
+          <summary class="flex items-center justify-between py-2 cursor-pointer list-none">
             <div class="flex items-center gap-4">
-              <span class="text-xl">🚵</span>
+              <span class="text-5xl">🚵</span>
               <span class="font-serif text-xl font-light">VTT & VTTAE</span>
             </div>
-            <span class="text-primary text-lg transition-transform duration-300 group-open:rotate-45">+</span>
+            <span class="text-primary text-2xl transition-transform duration-300 group-open:rotate-45">+</span>
           </summary>
           <div class="pb-6 text-dark/70 leading-relaxed space-y-3 text-sm">
             <p>
-              Plusieurs circuits balisés autour d'Alleyras, Monistrol-d'Allier et Saugues,
+              Plusieurs circuits balisés autour d'Alleyras, Monistrol-d'Allier et Saugues, accessibles à tous les niveaux, permettent de découvrir la vallée de l'Allier et ses gorges.
-              tous niveaux. Parking sécurisé et espace de lavage pour les vélos disponibles.
             </p>
             <a
               href="https://www.hautligonauvergne.fr/activites/vtt/"
@@ -121,13 +142,13 @@
           </div>
         </details>
 
-        <details class="group border-b border-secondary/60">
+        <details class="group border-b border-secondary/100">
-          <summary class="flex items-center justify-between py-5 cursor-pointer list-none">
+          <summary class="flex items-center justify-between py-2 cursor-pointer list-none">
             <div class="flex items-center gap-4">
-              <span class="text-xl">🎣</span>
+              <span class="text-5xl">🎣</span>
               <span class="font-serif text-xl font-light">Pêche à la mouche</span>
             </div>
-            <span class="text-primary text-lg transition-transform duration-300 group-open:rotate-45">+</span>
+            <span class="text-primary text-2xl transition-transform duration-300 group-open:rotate-45">+</span>
           </summary>
           <div class="pb-6 text-dark/70 leading-relaxed text-sm">
             <p>
@@ -137,19 +158,20 @@
           </div>
         </details>
 
-        <details class="group border-b border-secondary/60">
+        <details class="group border-b border-secondary/100">
-          <summary class="flex items-center justify-between py-5 cursor-pointer list-none">
+          <summary class="flex items-center justify-between py-2 cursor-pointer list-none">
             <div class="flex items-center gap-4">
-              <span class="text-xl">🚂</span>
+              <span class="text-5xl">🚂</span>
-              <span class="font-serif text-xl font-light">Train des Gorges</span>
+              <span class="font-serif text-xl font-light">Le Cévenol</span>
             </div>
-            <span class="text-primary text-lg transition-transform duration-300 group-open:rotate-45">+</span>
+            <span class="text-primary text-2xl transition-transform duration-300 group-open:rotate-45">+</span>
           </summary>
           <div class="pb-6 text-dark/70 leading-relaxed space-y-3 text-sm">
             <p>
-              La ligne des Cévennes dessert Alleyras. On peut venir sans voiture, partir randonner
+              La ligne Paris – Clermont-Ferrand – Nîmes – Marseille, dite « le Cévenol »,
-              plusieurs jours et rentrer en train — une combinaison rare et précieuse pour les
+              est un chemin de fer emblématique et historique qui traverse les gorges.
-              randonneurs itinérants.
+              Elle dessert Alleyras : venez sans voiture, partez randonner plusieurs jours
+              et rentrez en train — une combinaison rare et précieuse.
             </p>
             <a
               href="https://www.sncf-connect.com/"
@@ -177,17 +199,17 @@
             referrerpolicy="no-referrer-when-downgrade"
           ></iframe>
         </div>
-        <div class="text-sm text-dark/60 space-y-2">
+        <div class="text-base text-dark/80 space-y-2">
           <div class="flex items-center gap-3">
-            <span class="text-primary">—</span>
+            <Car color="green"/>
             <span>3 impasse du Moulin, 43580 Alleyras</span>
           </div>
           <div class="flex items-center gap-3">
-            <span class="text-primary">—</span>
+            <Clock color="green"/>
             <span>À 30 min du Puy-en-Velay · 40 min de Langeac</span>
           </div>
           <div class="flex items-center gap-3">
-            <span class="text-primary">—</span>
+            <Train color="green"/>
             <span>Gare d'Alleyras · Ligne des Cévennes</span>
           </div>
         </div>

src/components/Contact.astro

@@ -1,6 +1,6 @@
 <section id="contact" class="py-32 scroll-mt-20">
   <div class="max-w-6xl mx-auto px-6">
-    <div class="grid md:grid-cols-2 gap-16">
+    <div class="grid md:grid-cols-2 gap-16" >
 
       <!-- Infos -->
       <div>
@@ -10,49 +10,56 @@
         <h2 class="font-serif text-5xl md:text-6xl font-light leading-tight mb-8">
           Réservez<br/>votre séjour
         </h2>
-        <p class="text-dark/70 leading-relaxed mb-10">
+        <p class="text-dark/70 leading-relaxed mb-5">
           Une question ou une demande de réservation ?
           N'hésitez pas à nous contacter, nous répondons sous 24h.
         </p>
+        <p class="text-dark/50 text-sm leading-relaxed mb-10">
+          Si vous souhaitez partager ou découvrir des activités particulières :
+          cueillette de champignons, randonnée, baignade, yoga… <br/>
+          Précisez-le dans votre message, je me ferai un plaisir d'en discuter avec vous.
+        </p>
         <div class="space-y-4 text-dark/70">
           <div class="flex items-center gap-4">
             <span class="text-primary font-serif text-xl">→</span>
-            <span>06 00 00 00 00</span>
+            <span>07.85.31.59.28</span>
           </div>
           <div class="flex items-center gap-4">
             <span class="text-primary font-serif text-xl">→</span>
-            <span>contact@moulindesrives.fr</span>
+            <span>contact@lamaisondececile.fr</span>
           </div>
         </div>
       </div>
 
       <!-- Formulaire -->
-      <form class="space-y-4">
+      <div class="flex items-center justify-center">
-        <input
+        <form class="space-y-4 ">
-          type="text"
+          <input
-          name="nom"
+            type="text"
-          placeholder="Votre nom"
+            name="nom"
-          class="w-full bg-white border border-secondary px-4 py-3 text-dark placeholder:text-dark/40 focus:outline-none focus:border-primary transition-colors"
+            placeholder="Votre nom"
-        />
+            class="w-full bg-white border border-secondary px-4 py-3 text-dark placeholder:text-dark/40 focus:outline-none focus:border-primary transition-colors"
-        <input
+          />
-          type="email"
+          <input
-          name="email"
+            type="email"
-          placeholder="Votre adresse email"
+            name="email"
-          class="w-full bg-white border border-secondary px-4 py-3 text-dark placeholder:text-dark/40 focus:outline-none focus:border-primary transition-colors"
+            placeholder="Votre adresse email"
-        />
+            class="w-full bg-white border border-secondary px-4 py-3 text-dark placeholder:text-dark/40 focus:outline-none focus:border-primary transition-colors"
-        <textarea
+          />
-          name="message"
+          <textarea
-          rows="5"
+            name="message"
-          placeholder="Votre message (dates souhaitées, nombre de personnes...)"
+            rows="5"
-          class="w-full bg-white border border-secondary px-4 py-3 text-dark placeholder:text-dark/40 focus:outline-none focus:border-primary transition-colors resize-none"
+            placeholder="Votre message (dates souhaitées, nombre de personnes, activités souhaitées...)"
-        ></textarea>
+            class="w-full bg-white border border-secondary px-4 py-3 text-dark placeholder:text-dark/40 focus:outline-none focus:border-primary transition-colors resize-none"
-        <button
+          ></textarea>
-          type="submit"
+          <button
-          class="w-full bg-primary text-white py-4 text-xs tracking-[0.25em] uppercase hover:bg-primary/80 transition-colors"
+            type="submit"
-        >
+            class="w-full bg-primary text-white py-4 text-xs tracking-[0.25em] uppercase hover:bg-primary/80 transition-colors"
-          Envoyer le message
+          >
-        </button>
+            Envoyer le message
-      </form>
+          </button>
+        </form>
+      </div>
 
     </div>
   </div>

src/components/Features.astro

@@ -9,15 +9,23 @@ const features = [
 ];
 ---
 
-<section class="py-20 bg-dark">
+<section class="relative overflow-hidden py-20 md:py-24 bg-gradient-to-b from-[#f7f3e8] via-[#f2efdf] to-[#e4ecd2] border-y border-[#d9d2c3]/70">
-  <div class="max-w-6xl mx-auto px-6">
+  <div class="absolute -left-16 top-6 h-40 w-40 rounded-full bg-[#9db38b]/20 blur-3xl"></div>
-    <div class="grid grid-cols-2 md:grid-cols-5 gap-8 text-center">
+  <div class="absolute -right-10 bottom-0 h-44 w-44 rounded-full bg-[#b8c89c]/25 blur-3xl"></div>
+
+  <div class="relative max-w-6xl mx-auto px-6">
+    <div class="max-w-2xl mx-auto text-center mb-10 md:mb-12">
+      <p class="text-xs uppercase tracking-[0.28em] text-primary/80 mb-3">Le territoire</p>
+      <h2 class="font-serif text-3xl md:text-4xl text-dark">Une maison tournée vers la rivière, les chemins et le grand air</h2>
+    </div>
+
+    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6 text-center">
       {features.map(({ icon: Icon, label }) => (
-        <div class="flex flex-col items-center gap-4 text-white/60 group">
+        <div class="group rounded-3xl border border-white/70 bg-white/45 backdrop-blur-sm px-4 py-6 md:px-5 md:py-8 shadow-[0_12px_30px_rgba(73,83,43,0.08)] transition-transform duration-300 hover:-translate-y-1 hover:bg-white/60">
-          <div class="w-14 h-14 flex items-center justify-center border border-white/20 group-hover:border-primary transition-colors">
+          <div class="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-primary/10 text-primary ring-1 ring-primary/15 transition-colors group-hover:bg-primary/15">
-            <Icon class="w-5 h-5" />
+            <Icon class="h-5 w-5" />
           </div>
-          <span class="text-xs tracking-[0.2em] uppercase">{label}</span>
+          <span class="text-[0.72rem] md:text-xs font-medium tracking-[0.22em] uppercase text-dark/75">{label}</span>
         </div>
       ))}
     </div>

src/components/Food.astro

@@ -1,6 +1,6 @@
 ---
 import { Image } from 'astro:assets';
-import facade from '../assets/images/facade.jpg';
+import food from '../assets/images/food.png';
 ---
 
 <section id="food" class="py-32 bg-secondary/20 scroll-mt-20">
@@ -10,7 +10,7 @@ import facade from '../assets/images/facade.jpg';
       <!-- Image -->
       <div class="relative order-2 md:order-1">
         <Image
-          src={facade}
+          src={food}
           alt="La Maison de Cécile"
           class="w-full h-[500px] object-cover rounded-sm"
         />

src/components/Gallery.astro

@@ -1,21 +1,19 @@
 ---
 import { Image } from 'astro:assets';
-import g1 from '../assets/images/gallery_1.jpg';
+import salon1 from '../assets/images/salon_1.jpg';
-import g2 from '../assets/images/gallery_2.jpg';
+import salon2 from '../assets/images/salon_2.jpg';
-import g3 from '../assets/images/gallery_3.jpg';
+import chambreRiviere1 from '../assets/images/chambre_riviere_1.jpg';
-import g4 from '../assets/images/gallery_4.jpg';
+import chambreTilleul from '../assets/images/chambre_tilleul.jpg';
-import g5 from '../assets/images/gallery_5.jpg';
+import petiteChambre from '../assets/images/petite_chambre.jpg';
-import g6 from '../assets/images/gallery_6.jpg';
+import jardin from '../assets/images/jardin.jpg';
-import g7 from '../assets/images/gallery_7.jpg';
 
 const photos = [
-  { src: g1, alt: 'Le gîte' },
+  { src: salon1, alt: 'Le salon', caption: 'Le salon' },
-  { src: g2, alt: 'Chambre' },
+  { src: salon2, alt: 'Le salon', caption: 'Le salon' },
-  { src: g3, alt: 'Cuisine' },
+  { src: chambreRiviere1, alt: 'Chambre Rivière', caption: 'Chambre Rivière · 1 lit 140×190' },
-  { src: g4, alt: 'Salon' },
+  { src: chambreTilleul, alt: 'Chambre Tilleul', caption: 'Chambre Tilleul · 1 lit 140×190' },
-  { src: g5, alt: 'Extérieur' },
+  { src: petiteChambre, alt: 'La petite chambre', caption: 'La petite chambre · 1 lit 90×190' },
-  { src: g6, alt: 'Rivière' },
+  { src: jardin, alt: "Le jardin", caption: "Le jardin" },
-  { src: g7, alt: 'Vue panoramique' },
 ];
 ---
 
@@ -29,11 +27,18 @@ 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>
       ))}
@@ -41,3 +46,90 @@ const photos = [
 
   </div>
 </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>

src/components/Hero.astro

@@ -1,13 +1,13 @@
 ---
 import { Image } from 'astro:assets';
-import facade from '../assets/images/facade.jpg';
+import alleyras from '../assets/images/alleyras.png';
 ---
 
 <section class="relative h-screen flex items-center justify-center overflow-hidden">
   <!-- Image de fond -->
   <div class="absolute inset-0">
     <Image
-      src={facade}
+      src={alleyras}
       alt="La Maison de Cécile"
       class="w-full h-full object-cover"
       loading="eager"
@@ -22,11 +22,11 @@ import facade from '../assets/images/facade.jpg';
     </span>
 
     <h1 class="font-serif text-7xl md:text-9xl font-light leading-none mb-6">
-      La Maison de Cécile
+      La Maison <br/> de Cécile
     </h1>
 
     <p class="text-lg text-white/70 font-light mb-12 max-w-lg mx-auto">
-      Une halte authentique sur le GR470 & la Via Allier, à deux pas de l'Allier sauvage.
+      Une halte authentique sur la Via Allier & le GR470,<br/> à deux pas de l'Allier sauvage.
     </p>
 
     <div class="flex flex-col sm:flex-row gap-4 justify-center">

src/components/Pricing.astro

@@ -9,9 +9,9 @@
       <h2 class="font-serif text-5xl md:text-6xl font-light leading-tight mb-6">
         Nos formules
       </h2>
-      <p class="text-dark/60 max-w-xl mx-auto leading-relaxed">
+      <p class="text-dark/60 max-w-4xl mx-auto leading-relaxed">
-        La maison s'adapte à votre séjour — en gîte pour une privatisation complète,
+        Je vous accueille dans une maison joliement restaurée et chaleureuse, pour un séjour ressourçant en pleine nature. <br/>
-        ou en chambres d'hôtes pour une escale plus intime.
+        Je vous propose deux formules d'hébergement : la location complète du gîte, ou la réservation d'une chambre d'hôtes.
       </p>
     </div>
 

src/pages/index.astro

@@ -16,7 +16,6 @@ import Footer from '../components/Footer.astro';
 <MainLayout>
   <Navbar />
   <Hero />
-
   <main>
     <About />
     <Features />

src/styles/global.css

@@ -5,8 +5,8 @@
   --color-secondary: #d9d2c3;
   --color-cream: #f5f2eb;
   --color-dark: #1f1f1f;
-  --font-serif: 'Cormorant Garamond', serif;
+  --font-serif: 'Marcellus', serif;
-  --font-sans: 'Inter', sans-serif;
+  --font-sans: 'Source Sans 3', sans-serif;
 }
 
 html {