blabla

src/components/About.astro

@@ -1,13 +1,13 @@
 ---
 import { Waves, Sprout, Bed, WifiOff, HousePlus } from 'lucide-astro';
 import { Image } from 'astro:assets';
-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';
+import facade from '../assets/images/façade.jpg';
+import vue_arriere from '../assets/images/vue_arriere.jpg';
+import terrasse from '../assets/images/terrasse.jpg';
+import hamac from '../assets/images/hamac.jpg';
 ---
 
-<section id="about" class="py-32 scroll-mt-20">
+<section id="about" class="py-32 scroll-mt-20 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="grid md:grid-cols-2 gap-16 items-center">
 
@@ -16,7 +16,7 @@ import about_4 from '../assets/images/about_4.jpg';
           La maison
         </span>
         <h2 class="font-serif text-5xl md:text-6xl font-light leading-tight mb-8">
-          Une maison vivante,<br/>entre rivière et forêt
+          Entre rivière, prairies et forêts verdoyantes...
         </h2>
         <p class="text-dark/70 leading-relaxed mb-4">
           Charmante maison de village surplombant l'Allier, Cécile l'a faite à son image :
@@ -30,23 +30,23 @@ import about_4 from '../assets/images/about_4.jpg';
           dans une maison qui a une âme.
         </p>
         <ul class="space-y-3 list-none">
-          <li class="flex items-center gap-3 text-dark/70">
+          <li class="flex items-center gap-3 text-dark/70 font-semibold">
             <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">
+          <li class="flex items-center gap-3 text-dark/70 font-semibold">
             <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">
+          <li class="flex items-center gap-3 text-dark/70 font-semibold">
             <Bed class="w-8 h-8 text-red-500 flex-shrink-0" />
             3 chambres · 1 dortoir · Jusqu'à 9 personnes
           </li>          
-          <li class="flex items-center gap-3 text-dark/70">
+          <li class="flex items-center gap-3 text-dark/70 font-semibold">
             <HousePlus class="w-8 h-8 text-yellow-500 flex-shrink-0" />
             Au format Gite ou chambre d'hôtes, selon vos envies 
           </li>
-          <li class="flex items-center gap-3 text-dark/70">
+          <li class="flex items-center gap-3 text-dark/70 font-semibold">
             <WifiOff class="w-8 h-8 text-gray-500 flex-shrink-0" />
             Sans wifi, pour mieux décrocher
           </li>
@@ -54,24 +54,24 @@ import about_4 from '../assets/images/about_4.jpg';
       </div>
       
       <div class="relative flex items-center justify-center">
-        <div class="grid grid-cols-2 md:grid-cols-2 gap-1 bg-white p-1">
+        <div class="grid grid-cols-2 md:grid-cols-2 gap-1 bg-white p-1 rounded-md shadow-lg">
             <Image
-              src={about_1}
+              src={facade}
               alt="La Maison de Cécile"
               class="w-full h-64 object-cover rounded-sm"
             />
             <Image
-                src={about_2}
+                src={vue_arriere}
                 alt="Jardin et terrasse de la maison de Cécile"
                 class="w-full h-64 object-cover rounded-sm"
             />
             <Image
-                src={about_3}
+                src={terrasse}
                 alt="Vue sur l'Allier depuis la maison de Cécile"
                 class="w-full h-64 object-cover rounded-sm"
             />
             <Image
-                src={about_4}
+                src={hamac}
                 alt="Vue sur la terrasse et le jardin de la maison de Cécile"
                 class="w-full h-64 object-cover rounded-sm"
             />

src/components/Activities.astro

@@ -2,7 +2,7 @@
 import { Car, Clock, Clock2, Train } from 'lucide-astro';
 ---
 
-<section id="activities" class="py-32 bg-secondary/20 scroll-mt-20">
+<section id="activities" class="py-32 scroll-mt-20 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="mb-14 text-center">

src/components/Contact.astro

@@ -1,4 +1,4 @@
-<section id="contact" class="py-32 scroll-mt-20">
+<section id="contact" class="py-32 scroll-mt-20 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="grid md:grid-cols-2 gap-16" >
 

src/components/Features.astro

@@ -1,33 +0,0 @@
----
-import { Mountain, Waves, Bike, Fish } from 'lucide-astro';
-
-const features = [
-  { icon: Mountain, label: 'GR470 · Étape officielle' },
-  { icon: Waves,    label: 'Canoë & kayak' },
-  { icon: Bike,     label: 'VTT & VTTAE' },
-  { icon: Fish,     label: 'Pêche à la mouche' },
-];
----
-
-<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="absolute -left-16 top-6 h-40 w-40 rounded-full bg-[#9db38b]/20 blur-3xl"></div>
-  <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="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="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="h-5 w-5" />
-          </div>
-          <span class="text-[0.72rem] md:text-xs font-medium tracking-[0.22em] uppercase text-dark/75">{label}</span>
-        </div>
-      ))}
-    </div>
-  </div>
-</section>

src/components/Food.astro

@@ -3,7 +3,7 @@ import { Image } from 'astro:assets';
 import food from '../assets/images/food.png';
 ---
 
-<section id="food" class="py-32 bg-secondary/20 scroll-mt-20">
+<section id="food" class="py-32 scroll-mt-20 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="grid md:grid-cols-2 gap-16 items-center">
 
@@ -11,7 +11,7 @@ import food from '../assets/images/food.png';
       <div class="relative order-2 md:order-1">
         <Image
           src={food}
-          alt="La Maison de Cécile"
+          alt="Les petits plats de Cécile, une cuisine inspirée par de nombreux voyages, les saisons et les produits du marché."
           class="w-full h-[500px] object-cover rounded-sm"
         />
         <div class="absolute -top-5 -right-5 w-40 h-40 border border-primary/25 -z-10"></div>
@@ -26,16 +26,16 @@ import food from '../assets/images/food.png';
           Cuisine du marché<br/>et du jardin
         </h2>
         <p class="text-dark/70 leading-relaxed mb-6">
-          Le matin, le copieux petit-déjeuner est fait maison — pain, yaourt , confitures,
-          fruits de saison, infusion du jardin. Rien d'Instagram, tout de bon.
+          Le matin, le copieux petit-déjeuner est fait maison : pain, yaourt, confitures,
+          fruits de saison, infusion du jardin.
         </p>
         <p class="text-dark/70 leading-relaxed mb-8">
           Le soir, Cécile vous propose un repas partagé selon ce qu'elle
-          a trouvé au marché ou cueillit dans les bois alentour.
+          a trouvé au marché ou cueillit dans les bois alentour, inspirés par ses voyages.
           Simple, vivant, sincère.
         </p>
         <p class="text-dark/50 text-sm">
-          Sur réservation · Végétarien et sans gluten possibles
+          Sur réservation · Végétarien et sans gluten possibles · Cuisine ayurvedique sur demande
         </p>
       </div>
 

src/components/Gallery.astro

@@ -5,19 +5,28 @@ 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 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';
 
+// Chaque photo a ses classes de span écrites en dur (Tailwind ne détecte pas les classes dynamiques)
 const photos = [
-  { 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" },
+  { 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' },
 ];
 ---
 
-<section id="gallery" class="py-32 scroll-mt-20">
+<section id="gallery" class="py-32 scroll-mt-20 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="mb-14 text-center">
@@ -25,10 +34,13 @@ 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-4">
+    <div class="grid grid-cols-2 md:grid-cols-3 gap-3 md:auto-rows-[200px] grid-flow-dense">
       {photos.map((photo, i) => (
         <div
-          class:list={["overflow-hidden rounded-sm cursor-pointer", i === 6 ? "col-span-2 md:col-span-1" : ""]}
+          class:list={[
+            "overflow-hidden cursor-pointer group relative",
+            photo.cls,
+          ]}
           data-lightbox={i}
           data-caption={photo.caption}
           role="button"
@@ -38,8 +50,13 @@ const photos = [
           <Image
             src={photo.src}
             alt={photo.alt}
-            class="w-full h-64 object-cover hover:scale-105 transition-transform duration-500 pointer-events-none"
+            class="w-full h-full object-cover 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">
+              {photo.caption}
+            </span>
+          </div>
         </div>
       ))}
     </div>

src/components/Hero.astro

@@ -17,28 +17,28 @@ import alleyras from '../assets/images/alleyras.png';
 
   <!-- Contenu centré -->
   <div class="relative z-10 text-center text-white px-6 max-w-4xl mx-auto">
-    <span class="block text-xs tracking-[0.4em] uppercase text-white/60 mb-6">
-      Gite et Chambres d'hôtes · Gorges du Haut-Allier · Alleyras, Haute-Loire
+    <span class="block text-sm font-medium text-white/80 tracking-[0.1em] uppercase mb-6">
+      Gite et Chambres d'hôtes · Gorges du Haut-Allier<br/>Pont d'Alleyras, Haute-Loire
     </span>
 
-    <h1 class="font-serif text-7xl md:text-9xl font-light leading-none mb-6">
+    <h1 class="font-display text-7xl md:text-9xl font-light leading-none mb-6">
       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 la Via Allier & le GR470,<br/> à deux pas de l'Allier sauvage.
+    <p class="text-xl font-medium text-white/80 mb-12 max-w-lg mx-auto">
+      Une halte authentique sur la Via Allier & le GR470,<br/> sur les rives de l'Allier sauvage.
     </p>
 
     <div class="flex flex-col sm:flex-row gap-4 justify-center">
       <a
         href="#about"
-        class="border border-white/60 text-white px-10 py-4 text-xs tracking-[0.25em] uppercase hover:bg-white/10 transition-colors"
+        class="border border-white/80 text-white px-10 py-4 text-xs tracking-[0.25em] uppercase hover:bg-white/10 transition-colors"
       >
         Découvrir la maison
       </a>
       <a
         href="#activities"
-        class="text-white/60 px-10 py-4 text-xs tracking-[0.25em] uppercase hover:text-white transition-colors"
+        class="border border-white/80 text-white/80 px-10 py-4 text-xs tracking-[0.25em] uppercase hover:text-white transition-colors"
       >
         Les activités
       </a>
@@ -46,8 +46,8 @@ import alleyras from '../assets/images/alleyras.png';
   </div>
 
   <!-- Indicateur de défilement -->
-  <div class="absolute bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 text-white/40">
-    <span class="text-[10px] tracking-widest uppercase">Défiler</span>
-    <div class="w-px h-8 bg-white/30"></div>
+  <div class="absolute bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 text-white/80">
+    <span class="text-[12px] tracking-widest uppercase">Défiler</span>
+    <div class="w-px h-8 bg-white/80"></div>
   </div>
 </section>

src/components/Navbar.astro

@@ -1,6 +1,6 @@
 <header class="fixed top-0 left-0 right-0 z-50 bg-cream/95 backdrop-blur-sm border-b border-secondary/60">
   <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
-    <a href="#" class="font-serif text-2xl text-dark tracking-wide">
+    <a href="#" class="font-display text-3xl text-dark">
       La Maison de Cécile
     </a>
 

src/components/Pricing.astro

@@ -1,4 +1,4 @@
-<section id="pricing" class="py-32 scroll-mt-20 bg-cream">
+<section id="pricing" class="py-32 scroll-mt-20 bg-gradient-to-b from-[#f7f3e8] via-[#f2efdf] to-[#e4ecd2] border-y border-[#d9d2c3]/70">
   <div class="max-w-6xl mx-auto px-6">
 
     <!-- En-tête -->
@@ -7,11 +7,11 @@
         Les tarifs
       </span>
       <h2 class="font-serif text-5xl md:text-6xl font-light leading-tight mb-6">
-        Nos formules
+        Mes formules
       </h2>
       <p class="text-dark/60 max-w-4xl mx-auto leading-relaxed">
         Je vous accueille dans une maison joliement restaurée et chaleureuse, pour un séjour ressourçant en pleine nature. <br/>
-        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.
+        Deux formules d'hébergement s'offrent à vous : la location complète du gîte, ou la réservation d'une chambre d'hôtes.
       </p>
     </div>
 
@@ -96,7 +96,7 @@
 
     <!-- Note de bas de section -->
     <p class="text-center text-dark/40 text-xs tracking-[0.2em] uppercase">
-      Tarifs indicatifs · nous contacter pour toute demande spécifique
+      Tarifs indicatifs · me contacter pour toute demande spécifique
     </p>
 
   </div>

src/layouts/MainLayout.astro

@@ -20,14 +20,15 @@ const {
 
     <meta
       name="description"
-      content="Gîte de charme dans la vallée de l’Allier avec restauration et hébergement au cœur de la nature."
+      content="Cécile vous accueille dans sa charmante maison située à Pont d'Alleyras, sur les rives de l'Allier sauvage au sud de la Haute-Loire.
+               Gîte et chambres d'hôtes, pour un séjour en pleine nature ou une escale d'une nuit sur la Via Allier & le GR470."
     />
 
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 
     <link
-      href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Parisienne&family=Marcellus&family=Source+Sans+3:wght@300;400;500;600&display=swap"
       rel="stylesheet"
     >
   </head>

src/pages/index.astro

@@ -4,7 +4,6 @@ import MainLayout from '../layouts/MainLayout.astro';
 import Navbar from '../components/Navbar.astro';
 import Hero from '../components/Hero.astro';
 import About from '../components/About.astro';
-import Features from '../components/Features.astro';
 import Gallery from '../components/Gallery.astro';
 import Food from '../components/Food.astro';
 import Pricing from '../components/Pricing.astro';
@@ -18,7 +17,6 @@ import Footer from '../components/Footer.astro';
   <Hero />
   <main>
     <About />
-    <Features />
     <Gallery />
     <Food />
     <Pricing />

src/styles/global.css

@@ -5,6 +5,7 @@
   --color-secondary: #d9d2c3;
   --color-cream: #f5f2eb;
   --color-dark: #1f1f1f;
+  --font-display: 'Parisienne', cursive;
   --font-serif: 'Marcellus', serif;
   --font-sans: 'Source Sans 3', sans-serif;
 }