fix: professional tone + real photos on demo pages

- Hero: replace aggressive "Arrêtez de perdre des chantiers" with
  professional "Un site à la hauteur de votre savoir-faire"
- Macon: rewrite hero as client-facing (artisan's real site),
  add Unsplash before/after photos to MagicReveal sliders
- Paysagiste: rewrite hero "Transformez votre extérieur" instead of
  "Ne vendez pas des travaux", add real photos to gallery
- Plombier: rewrite hero "Votre plombier réactif et transparent"
  instead of "Convaincre en 3 secondes chrono"
- MagicReveal: now accepts avantImage/apresImage URLs and renders
  real photos with the interactive slider

https://claude.ai/code/session_01H2aRGDaKgarPvhay2HxN6Y

app/macon/MaconClient.tsx

@@ -9,9 +9,11 @@ interface MaconClientProps {
   certName?: string;
   avantLabel?: string;
   apresLabel?: string;
+  avantImage?: string;
+  apresImage?: string;
 }
 
-export default function MaconClient({ type, certName, avantLabel, apresLabel }: MaconClientProps) {
+export default function MaconClient({ type, certName, avantLabel, apresLabel, avantImage, apresImage }: MaconClientProps) {
   // Cert badge with popup
   if (!type || type === "cert") {
     return <CertBadge name={certName || ""} />;
@@ -22,8 +24,8 @@ export default function MaconClient({ type, certName, avantLabel, apresLabel }:
       <MagicReveal
         avantLabel={avantLabel || ""}
         apresLabel={apresLabel || ""}
-        avantColor="bg-red-50"
-        apresColor="bg-green-50"
+        avantImage={avantImage || ""}
+        apresImage={apresImage || ""}
         height="h-64"
       />
     );
@@ -97,7 +99,7 @@ function DevisForm() {
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
           </svg>
         </div>
-        <h3 className="text-[#1b2a4a] font-bold text-xl mb-2">Urgence d\u00e9tect\u00e9e !</h3>
+        <h3 className="text-[#1b2a4a] font-bold text-xl mb-2">Urgence d&eacute;tect&eacute;e !</h3>
         <p className="text-gray-500 text-sm mb-6">Pour une intervention rapide, appelez directement le patron :</p>
         <a
           href="tel:+33604408157"
@@ -121,17 +123,17 @@ function DevisForm() {
       <div className="bg-white rounded-2xl p-6 sm:p-8">
         <div className="flex items-center gap-2 mb-6">
           <span className="bg-orange text-white text-xs font-bold px-2.5 py-1 rounded-full">2/2</span>
-          <h3 className="text-[#1b2a4a] font-bold text-lg">D\u00e9tails du projet</h3>
+          <h3 className="text-[#1b2a4a] font-bold text-lg">D&eacute;tails du projet</h3>
         </div>
         <p className="text-gray-400 text-sm mb-5">Type : <strong className="text-[#1b2a4a]">{projectType}</strong></p>
         <div className="space-y-4">
           <div>
             <label className="block text-sm font-medium text-gray-700 mb-1.5">Surface approximative</label>
             <select className="w-full px-4 py-3 bg-[#f8f6f3] border border-gray-200 rounded-xl text-gray-800 text-sm focus:border-orange focus:ring-1 focus:ring-orange outline-none">
-              <option>Moins de 50m\u00b2</option>
-              <option>50 \u00e0 100m\u00b2</option>
-              <option>100 \u00e0 200m\u00b2</option>
-              <option>Plus de 200m\u00b2</option>
+              <option>Moins de 50m&sup2;</option>
+              <option>50 &agrave; 100m&sup2;</option>
+              <option>100 &agrave; 200m&sup2;</option>
+              <option>Plus de 200m&sup2;</option>
             </select>
           </div>
           <div>
@@ -139,7 +141,7 @@ function DevisForm() {
             <input type="text" placeholder="Marc Dupont" className="w-full px-4 py-3 bg-[#f8f6f3] border border-gray-200 rounded-xl text-gray-800 text-sm placeholder:text-gray-400 focus:border-orange focus:ring-1 focus:ring-orange outline-none" />
           </div>
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1.5">T\u00e9l\u00e9phone</label>
+            <label className="block text-sm font-medium text-gray-700 mb-1.5">T&eacute;l&eacute;phone</label>
             <input type="tel" placeholder="06 12 34 56 78" className="w-full px-4 py-3 bg-[#f8f6f3] border border-gray-200 rounded-xl text-gray-800 text-sm placeholder:text-gray-400 focus:border-orange focus:ring-1 focus:ring-orange outline-none" />
           </div>
           <div>

app/macon/page.tsx

@@ -64,8 +64,9 @@ export default function MaconDemo() {
             <span className="text-orange">Votre site aussi.</span>
           </h1>
           <p className="text-white/60 text-lg max-w-2xl mx-auto mb-4">
-            Dans le gros \u0153uvre, le client a peur. Peur que \u00e7a s&rsquo;\u00e9croule, peur des fuites,
-            peur que vous partiez avec l&rsquo;acompte. Ce site est une machine \u00e0 tuer les objections.
+            Plus de 15 ans d&rsquo;exp&eacute;rience en ma&ccedil;onnerie, couverture et charpente.
+            Chaque chantier est r&eacute;alis&eacute; dans les r&egrave;gles de l&rsquo;art, avec des garanties solides
+            pour votre tranquillit&eacute;.
           </p>
           <p className="text-white/40 text-sm mb-8">
             Intervention rapide sur Douai, Orchies, Valenciennes et environs.
@@ -101,11 +102,26 @@ export default function MaconDemo() {
 
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
             {[
-              { avant: "Toiture v\u00e9tuste \u2014 Tuiles cass\u00e9es, infiltrations", apres: "R\u00e9fection compl\u00e8te en tuiles m\u00e9caniques" },
-              { avant: "Fa\u00e7ade fissur\u00e9e \u2014 Enduit d\u00e9grad\u00e9", apres: "Ravalement complet + isolation thermique" },
-              { avant: "Chemin\u00e9e en ruine \u2014 Danger effondrement", apres: "Reconstruction + \u00e9tanch\u00e9it\u00e9 garantie" },
+              {
+                avant: "Toiture v\u00e9tuste \u2014 Tuiles cass\u00e9es",
+                apres: "R\u00e9fection compl\u00e8te en tuiles m\u00e9caniques",
+                avantImg: "https://images.unsplash.com/photo-1632823469850-2f77dd9c7f93?auto=format&fit=crop&w=800&q=80",
+                apresImg: "https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=800&q=80",
+              },
+              {
+                avant: "Fa\u00e7ade fissur\u00e9e \u2014 Enduit d\u00e9grad\u00e9",
+                apres: "Ravalement complet + isolation",
+                avantImg: "https://images.unsplash.com/photo-1590274853856-f22d5ee3d228?auto=format&fit=crop&w=800&q=80",
+                apresImg: "https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=800&q=80",
+              },
+              {
+                avant: "Mur porteur ab\u00eem\u00e9 \u2014 Fissures",
+                apres: "Reconstruction + renforcement",
+                avantImg: "https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=800&q=80",
+                apresImg: "https://images.unsplash.com/photo-1600566753190-17f0baa2a6c0?auto=format&fit=crop&w=800&q=80",
+              },
             ].map((item, i) => (
-              <MaconClient key={i} type="slider" avantLabel={item.avant} apresLabel={item.apres} />
+              <MaconClient key={i} type="slider" avantLabel={item.avant} apresLabel={item.apres} avantImage={item.avantImg} apresImage={item.apresImg} />
             ))}
           </div>
         </div>

app/paysagiste/PaysagisteClient.tsx

@@ -7,6 +7,7 @@ interface Realisation {
   type: string;
   lieu: string;
   saison: string;
+  image: string;
 }
 
 interface PaysagisteClientProps {
@@ -74,15 +75,14 @@ function GalerieFiltrable({ realisations }: { realisations: Realisation[] }) {
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5">
         {filtered.map((r, i) => (
           <div key={i} className="bg-[#f0f5ed] border border-gray-100 rounded-2xl overflow-hidden group hover:shadow-lg transition-shadow">
-            <div className="h-48 bg-gradient-to-br from-green-100 to-green-50 flex items-center justify-center relative overflow-hidden">
-              <div className="text-center">
-                <svg className="w-12 h-12 text-green-300 mx-auto mb-2 group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
-                </svg>
-                <p className="text-gray-400 text-xs">Photo HD du projet</p>
-              </div>
+            <div className="h-48 relative overflow-hidden">
+              <img
+                src={r.image}
+                alt={r.titre}
+                className="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
+              />
               {/* Tag type */}
-              <span className={`absolute top-3 left-3 text-[10px] font-bold px-2 py-0.5 rounded-full ${
+              <span className={`absolute top-3 left-3 text-[10px] font-bold px-2 py-0.5 rounded-full z-10 ${
                 r.type === "Entretien" ? "bg-amber-100 text-amber-700" : "bg-green-100 text-green-700"
               }`}>
                 {r.type}

app/paysagiste/page.tsx

@@ -10,14 +10,14 @@ export const metadata: Metadata = {
 };
 
 const realisations = [
-  { titre: "Jardin contemporain avec terrasse composite", type: "Terrasses", lieu: "Orchies", saison: "printemps" },
-  { titre: "Am\u00e9nagement complet piscine + cl\u00f4ture", type: "Terrasses", lieu: "Douai", saison: "printemps" },
-  { titre: "Cr\u00e9ation massif fleuri 4 saisons", type: "Plantations", lieu: "Valenciennes", saison: "printemps" },
-  { titre: "Haie brise-vue naturelle en bambou", type: "Plantations", lieu: "Arleux", saison: "automne" },
-  { titre: "All\u00e9e carrossable en pav\u00e9s anciens", type: "All\u00e9es", lieu: "Saint-Amand", saison: "automne" },
-  { titre: "Jardin japonais zen avec bassin", type: "Plantations", lieu: "Flines-lez-Raches", saison: "printemps" },
-  { titre: "Taille architecturale haies buis", type: "Entretien", lieu: "Denain", saison: "automne" },
-  { titre: "Entretien annuel parc 3000m\u00b2", type: "Entretien", lieu: "Douai", saison: "automne" },
+  { titre: "Jardin contemporain avec terrasse composite", type: "Terrasses", lieu: "Orchies", saison: "printemps", image: "https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?auto=format&fit=crop&w=600&q=80" },
+  { titre: "Am\u00e9nagement complet piscine + cl\u00f4ture", type: "Terrasses", lieu: "Douai", saison: "printemps", image: "https://images.unsplash.com/photo-1572120360610-d971b9d7767c?auto=format&fit=crop&w=600&q=80" },
+  { titre: "Cr\u00e9ation massif fleuri 4 saisons", type: "Plantations", lieu: "Valenciennes", saison: "printemps", image: "https://images.unsplash.com/photo-1585320806297-9794b3e4eeae?auto=format&fit=crop&w=600&q=80" },
+  { titre: "Haie brise-vue naturelle en bambou", type: "Plantations", lieu: "Arleux", saison: "automne", image: "https://images.unsplash.com/photo-1558171813-4c088753af8f?auto=format&fit=crop&w=600&q=80" },
+  { titre: "All\u00e9e carrossable en pav\u00e9s anciens", type: "All\u00e9es", lieu: "Saint-Amand", saison: "automne", image: "https://images.unsplash.com/photo-1598902108854-d1446c81e20e?auto=format&fit=crop&w=600&q=80" },
+  { titre: "Jardin japonais zen avec bassin", type: "Plantations", lieu: "Flines-lez-Raches", saison: "printemps", image: "https://images.unsplash.com/photo-1582547403609-4244e80be657?auto=format&fit=crop&w=600&q=80" },
+  { titre: "Taille architecturale haies buis", type: "Entretien", lieu: "Denain", saison: "automne", image: "https://images.unsplash.com/photo-1416879595882-3373a0480b5b?auto=format&fit=crop&w=600&q=80" },
+  { titre: "Entretien annuel parc 3000m\u00b2", type: "Entretien", lieu: "Douai", saison: "automne", image: "https://images.unsplash.com/photo-1557429287-b2e26467fc2b?auto=format&fit=crop&w=600&q=80" },
 ];
 
 export default function PaysagisteDemo() {
@@ -63,12 +63,12 @@ export default function PaysagisteDemo() {
             Paysagisme · Espaces Verts · D\u00e9coration
           </span>
           <h1 className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-gray-900 leading-tight mb-4">
-            Ne vendez pas des travaux,{" "}
-            <span className="text-green-600">vendez du r\u00eave.</span>
+            Transformez votre ext&eacute;rieur en un{" "}
+            <span className="text-green-600">espace de vie unique.</span>
           </h1>
           <p className="text-gray-500 text-lg max-w-2xl mx-auto mb-4">
-            Pour un jardin ou un int\u00e9rieur, votre client n&rsquo;ach\u00e8te pas de la technique,
-            il ach\u00e8te une &laquo;&nbsp;ambiance&nbsp;&raquo;. Ce site est votre galerie d&rsquo;art.
+            Cr&eacute;ation de jardins, terrasses et am&eacute;nagements paysagers sur-mesure.
+            Chaque projet est con&ccedil;u pour sublimer votre environnement et valoriser votre bien.
           </p>
           <p className="text-gray-400 text-sm mb-8">
             Cr\u00e9ations &agrave; Douai, Orchies, Valenciennes, Saint-Amand et environs.

app/plombier/page.tsx

@@ -72,12 +72,12 @@ export default function PlombierDemo() {
             <span className="text-red-400 text-xs font-semibold">Disponible 7j/7 &mdash; Intervention rapide</span>
           </div>
           <h1 className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-white leading-tight mb-4">
-            Convaincre en{" "}
-            <span className="text-[#facc15]">3 secondes chrono.</span>
+            Votre plombier{" "}
+            <span className="text-[#facc15]">r&eacute;actif et transparent.</span>
           </h1>
           <p className="text-white/50 text-lg max-w-2xl mx-auto mb-4">
-            Quand un client a une fuite d&rsquo;eau ou une panne de courant, il ne veut pas lire
-            votre histoire. Il veut un num\u00e9ro, un prix, et une arriv\u00e9e rapide.
+            Fuite d&rsquo;eau, panne de chauffe-eau, canalisation bouch&eacute;e ?
+            Intervention rapide avec devis gratuit. Disponible 7j/7 dans le Douaisis.
           </p>
           <p className="text-white/30 text-sm mb-8">
             D\u00e9pannage Douai &middot; Orchies &middot; Valenciennes &middot; Denain &middot; Saint-Amand &middot; Arleux

components/marketing/Hero.tsx

@@ -21,10 +21,10 @@ export default function Hero() {
 
           {/* Subtitle */}
           <p className="text-white/70 text-base sm:text-lg md:text-xl leading-relaxed mb-8 max-w-2xl">
-            Couvreurs, Ma&ccedil;ons, Paysagistes : Arr&ecirc;tez de perdre des chantiers
-            &agrave; cause d&rsquo;une image &laquo;&nbsp;bricol&eacute;e&nbsp;&raquo;. Depuis Flines-lez-Raches, je vous
-            construis une forteresse num&eacute;rique inviolable qui filtre les curieux
-            et attire les vrais projets &agrave; Douai, Orchies et Valenciennes.
+            Un site professionnel &agrave; la hauteur de votre savoir-faire.
+            Depuis Flines-lez-Raches, je con&ccedil;ois des vitrines num&eacute;riques
+            performantes qui inspirent confiance et g&eacute;n&egrave;rent des demandes
+            qualifi&eacute;es &agrave; Douai, Orchies et Valenciennes.
           </p>
 
           {/* CTA */}

components/ui/MagicReveal.tsx

@@ -5,16 +5,16 @@ import { useState, useRef, useCallback } from "react";
 interface MagicRevealProps {
   avantLabel: string;
   apresLabel: string;
-  avantColor?: string;
-  apresColor?: string;
+  avantImage: string;
+  apresImage: string;
   height?: string;
 }
 
 export default function MagicReveal({
   avantLabel,
   apresLabel,
-  avantColor = "bg-red-50",
-  apresColor = "bg-green-50",
+  avantImage,
+  apresImage,
   height = "h-64",
 }: MagicRevealProps) {
   const [position, setPosition] = useState(50);
@@ -45,47 +45,57 @@ export default function MagicReveal({
   }, []);
 
   return (
-    <div
-      ref={containerRef}
-      className={`relative ${height} rounded-xl overflow-hidden cursor-col-resize select-none border border-border`}
-      onPointerDown={handlePointerDown}
-      onPointerMove={handlePointerMove}
-      onPointerUp={handlePointerUp}
-    >
-      {/* Apr\u00e8s (fond complet) */}
-      <div className={`absolute inset-0 ${apresColor} flex items-center justify-center`}>
-        <div className="text-center">
-          <p className="text-green-600 font-bold text-sm uppercase tracking-wider mb-1">Apr\u00e8s</p>
-          <p className="text-green-800 text-sm font-medium px-4">{apresLabel}</p>
-        </div>
-      </div>
-
-      {/* Avant (clip\u00e9 \u00e0 gauche) */}
+    <div className="rounded-xl overflow-hidden border border-border">
       <div
-        className={`absolute inset-0 ${avantColor} flex items-center justify-center`}
-        style={{ clipPath: `inset(0 ${100 - position}% 0 0)` }}
+        ref={containerRef}
+        className={`relative ${height} cursor-col-resize select-none`}
+        onPointerDown={handlePointerDown}
+        onPointerMove={handlePointerMove}
+        onPointerUp={handlePointerUp}
       >
-        <div className="text-center">
-          <p className="text-red-600 font-bold text-sm uppercase tracking-wider mb-1">Avant</p>
-          <p className="text-red-800 text-sm font-medium px-4">{avantLabel}</p>
+        {/* Après (fond complet) */}
+        <img
+          src={apresImage}
+          alt={apresLabel}
+          className="absolute inset-0 w-full h-full object-cover"
+          draggable={false}
+        />
+
+        {/* Avant (clipé à gauche) */}
+        <div
+          className="absolute inset-0"
+          style={{ clipPath: `inset(0 ${100 - position}% 0 0)` }}
+        >
+          <img
+            src={avantImage}
+            alt={avantLabel}
+            className="absolute inset-0 w-full h-full object-cover"
+            draggable={false}
+          />
         </div>
+
+        {/* Barre de séparation */}
+        <div
+          className="absolute top-0 bottom-0 w-1 bg-white shadow-lg z-10"
+          style={{ left: `${position}%`, transform: "translateX(-50%)" }}
+        >
+          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-10 h-10 bg-white rounded-full shadow-lg flex items-center justify-center border-2 border-orange">
+            <svg className="w-5 h-5 text-orange" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 9l4-4 4 4m0 6l-4 4-4-4" />
+            </svg>
+          </div>
+        </div>
+
+        {/* Labels gauche/droite */}
+        <div className="absolute top-2 left-3 bg-red-600 text-white text-[10px] font-bold px-2 py-0.5 rounded-full z-20">AVANT</div>
+        <div className="absolute top-2 right-3 bg-green-600 text-white text-[10px] font-bold px-2 py-0.5 rounded-full z-20">APR&Egrave;S</div>
       </div>
 
-      {/* Barre de s\u00e9paration */}
-      <div
-        className="absolute top-0 bottom-0 w-1 bg-white shadow-lg z-10"
-        style={{ left: `${position}%`, transform: "translateX(-50%)" }}
-      >
-        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-10 h-10 bg-white rounded-full shadow-lg flex items-center justify-center border-2 border-orange">
-          <svg className="w-5 h-5 text-orange" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 9l4-4 4 4m0 6l-4 4-4-4" />
-          </svg>
-        </div>
+      {/* Légendes sous l'image */}
+      <div className="flex justify-between bg-white px-4 py-2 text-xs">
+        <span className="text-red-600 font-semibold">{avantLabel}</span>
+        <span className="text-green-600 font-semibold">{apresLabel}</span>
       </div>
-
-      {/* Labels gauche/droite */}
-      <div className="absolute top-2 left-3 bg-red-600 text-white text-[10px] font-bold px-2 py-0.5 rounded-full z-20">AVANT</div>
-      <div className="absolute top-2 right-3 bg-green-600 text-white text-[10px] font-bold px-2 py-0.5 rounded-full z-20">APR\u00c8S</div>
     </div>
   );
 }