feat: rebuild 3 demo pages with interactive features + local SEO pages

- Rebuild /macon with cert badge popups, before/after slider, intelligent
  form with urgency detection
- Rebuild /paysagiste with filterable gallery, seasonal banner, WhatsApp
  floating button, devis form
- Rebuild /plombier with sticky call bar, 3-step diagnostic wizard,
  transparent tariffs, zone map
- Add MagicReveal component (interactive before/after slider)
- Update Navbar with real phone number (06 04 40 81 57)
- Update DemosLive cards with new titles and subtitles
- Create sitemap.ts targeting local SEO zones (Douai, Orchies,
  Valenciennes, Saint-Amand, Arleux, Denain)
- Create LocalSeoPage template + 6 city-specific landing pages

https://claude.ai/code/session_01H2aRGDaKgarPvhay2HxN6Y

app/macon/MaconClient.tsx

@@ -0,0 +1,197 @@
+"use client";
+
+import { useState } from "react";
+import MagicReveal from "@/components/ui/MagicReveal";
+import Button from "@/components/ui/Button";
+
+interface MaconClientProps {
+  type?: "slider" | "form" | "cert";
+  certName?: string;
+  avantLabel?: string;
+  apresLabel?: string;
+}
+
+export default function MaconClient({ type, certName, avantLabel, apresLabel }: MaconClientProps) {
+  // Cert badge with popup
+  if (!type || type === "cert") {
+    return <CertBadge name={certName || ""} />;
+  }
+
+  if (type === "slider") {
+    return (
+      <MagicReveal
+        avantLabel={avantLabel || ""}
+        apresLabel={apresLabel || ""}
+        avantColor="bg-red-50"
+        apresColor="bg-green-50"
+        height="h-64"
+      />
+    );
+  }
+
+  if (type === "form") {
+    return <DevisForm />;
+  }
+
+  return null;
+}
+
+function CertBadge({ name }: { name: string }) {
+  const [open, setOpen] = useState(false);
+
+  const infos: Record<string, string> = {
+    "D\u00e9cennale": "La garantie d\u00e9cennale couvre tous les dommages compromettant la solidit\u00e9 de l\u2019ouvrage pendant 10 ans apr\u00e8s la r\u00e9ception des travaux.",
+    "Qualibat": "Qualibat est l\u2019organisme de r\u00e9f\u00e9rence pour la qualification des entreprises du b\u00e2timent. Gage de comp\u00e9tence et de s\u00e9rieux.",
+    "RGE": "Le label RGE (Reconnu Garant de l\u2019Environnement) vous permet de b\u00e9n\u00e9ficier des aides de l\u2019\u00c9tat : MaPrimeR\u00e9nov\u2019, CEE, \u00e9co-PTZ.",
+  };
+
+  return (
+    <>
+      <button
+        onClick={() => setOpen(true)}
+        className="flex items-center gap-2 bg-white/10 hover:bg-white/20 border border-white/20 rounded-full px-4 py-1.5 transition-colors cursor-pointer"
+      >
+        <svg className="w-4 h-4 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+        </svg>
+        <span className="text-white text-xs font-semibold">{name}</span>
+      </button>
+
+      {/* Popup */}
+      {open && (
+        <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 p-4" onClick={() => setOpen(false)}>
+          <div className="bg-white rounded-2xl p-6 max-w-sm w-full shadow-2xl" onClick={(e) => e.stopPropagation()}>
+            <div className="flex items-center gap-3 mb-4">
+              <div className="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
+                <svg className="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+                </svg>
+              </div>
+              <h3 className="text-[#1b2a4a] font-bold text-lg">{name}</h3>
+            </div>
+            <p className="text-gray-600 text-sm leading-relaxed mb-5">
+              {infos[name] || "Certification professionnelle v\u00e9rifi\u00e9e."}
+            </p>
+            <button
+              onClick={() => setOpen(false)}
+              className="w-full bg-[#1b2a4a] text-white font-semibold text-sm py-2.5 rounded-xl hover:bg-[#1b2a4a]/90 transition-colors cursor-pointer"
+            >
+              Compris
+            </button>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
+
+function DevisForm() {
+  const [step, setStep] = useState<"type" | "details" | "urgence">("type");
+  const [projectType, setProjectType] = useState("");
+
+  if (step === "urgence") {
+    return (
+      <div className="bg-white rounded-2xl p-6 sm:p-8 text-center">
+        <div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
+          <svg className="w-8 h-8 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <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>
+        <p className="text-gray-500 text-sm mb-6">Pour une intervention rapide, appelez directement le patron :</p>
+        <a
+          href="tel:+33604408157"
+          className="inline-flex items-center justify-center gap-3 bg-red-600 hover:bg-red-700 text-white font-bold text-lg px-8 py-4 rounded-xl transition-colors w-full"
+        >
+          <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
+          </svg>
+          APPELER LE PATRON
+        </a>
+        <p className="text-gray-400 text-xs mt-3">Disponible 7j/7 pour les urgences</p>
+        <button onClick={() => setStep("type")} className="text-gray-400 hover:text-gray-600 text-sm mt-4 underline cursor-pointer">
+          &larr; Retour au formulaire
+        </button>
+      </div>
+    );
+  }
+
+  if (step === "details") {
+    return (
+      <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>
+        </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>
+            </select>
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1.5">Votre nom</label>
+            <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>
+            <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>
+            <label className="block text-sm font-medium text-gray-700 mb-1.5">Ville</label>
+            <input type="text" placeholder="Douai, Orchies, Valenciennes..." 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>
+          <Button size="lg" className="w-full">Envoyer ma demande de devis</Button>
+          <button onClick={() => setStep("type")} className="w-full text-gray-400 hover:text-gray-600 text-sm underline cursor-pointer">
+            &larr; Retour
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <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">1/2</span>
+        <h3 className="text-[#1b2a4a] font-bold text-lg">Quel type de projet ?</h3>
+      </div>
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+        {[
+          { label: "Urgence fuite / d\u00e9g\u00e2t", urgent: true },
+          { label: "R\u00e9novation toiture", urgent: false },
+          { label: "Ravalement fa\u00e7ade", urgent: false },
+          { label: "Ma\u00e7onnerie neuve", urgent: false },
+          { label: "Charpente / Isolation", urgent: false },
+          { label: "Autre projet", urgent: false },
+        ].map((item) => (
+          <button
+            key={item.label}
+            onClick={() => {
+              setProjectType(item.label);
+              if (item.urgent) {
+                setStep("urgence");
+              } else {
+                setStep("details");
+              }
+            }}
+            className={`p-4 rounded-xl border-2 text-left transition-all cursor-pointer hover:shadow-md ${
+              item.urgent
+                ? "border-red-300 bg-red-50 hover:border-red-500"
+                : "border-gray-200 bg-[#f8f6f3] hover:border-orange"
+            }`}
+          >
+            <p className={`font-semibold text-sm ${item.urgent ? "text-red-600" : "text-[#1b2a4a]"}`}>
+              {item.urgent && "\u26a0\ufe0f "}{item.label}
+            </p>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}

app/macon/page.tsx

@@ -1,148 +1,208 @@
 import type { Metadata } from "next";
 import Link from "next/link";
 import Button from "@/components/ui/Button";
+import MaconClient from "./MaconClient";
 
 export const metadata: Metadata = {
-  title: "D\u00e9mo Site Ma\u00e7on / Couvreur - Pack Gros \u0152uvre",
+  title: "D\u00e9mo Site Ma\u00e7on / Couvreur - L'Expertise Solide | HookLab",
   description:
-    "D\u00e9couvrez le mod\u00e8le de site HookLab pour ma\u00e7ons et couvreurs. Galerie Avant/Apr\u00e8s, bouton Urgence Fuite, optimis\u00e9 SEO local.",
+    "Mod\u00e8le de site HookLab pour ma\u00e7ons, couvreurs et charpentiers. Slider Avant/Apr\u00e8s interactif, badges garanties, formulaire intelligent, bouton urgence.",
 };
 
-const avantApres = [
-  { avant: "Toiture v\u00e9tuste - Tuiles cass\u00e9es", apres: "R\u00e9fection compl\u00e8te en tuiles m\u00e9caniques" },
-  { avant: "Fa\u00e7ade fissur\u00e9e - Enduit d\u00e9grad\u00e9", apres: "Ravalement complet + isolation" },
-  { avant: "Chemin\u00e9e en ruine", apres: "Reconstruction + \u00e9tanch\u00e9it\u00e9" },
-];
-
 export default function MaconDemo() {
   return (
-    <main className="min-h-screen bg-bg">
-      {/* Nav simplifi\u00e9e */}
-      <nav className="sticky top-0 z-50 bg-navy border-b border-white/10">
+    <main className="min-h-screen bg-[#f8f6f3]">
+      {/* Nav avec badge dispo */}
+      <nav className="sticky top-0 z-50 bg-[#1b2a4a] border-b border-white/10">
         <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between h-16">
           <div className="flex items-center gap-3">
             <Link href="/" className="text-white/60 hover:text-white text-sm transition-colors">
-              &larr; Retour HookLab
+              &larr; HookLab
             </Link>
             <span className="text-white/30">|</span>
             <span className="text-white font-bold text-sm">
-              D\u00e9mo : <span className="text-orange">Pack Gros \u0152uvre</span>
+              [Votre Entreprise] &mdash; <span className="text-orange">Ma\u00e7onnerie & Couverture</span>
             </span>
           </div>
-          <a
-            href="tel:+33600000000"
-            className="bg-red-600 hover:bg-red-700 text-white font-bold text-sm px-4 py-2 rounded-lg transition-colors flex items-center gap-2"
-          >
-            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
-            </svg>
-            Urgence Fuite
-          </a>
+          <div className="flex items-center gap-3">
+            {/* Badge dispo */}
+            <div className="hidden sm:flex items-center gap-2 bg-green-500/20 border border-green-500/30 rounded-full px-3 py-1">
+              <span className="w-2 h-2 bg-green-400 rounded-full animate-pulse" />
+              <span className="text-green-400 text-xs font-semibold">Dispo imm\u00e9diate</span>
+            </div>
+            <a
+              href="tel:+33604408157"
+              className="bg-red-600 hover:bg-red-700 text-white font-bold text-sm px-4 py-2 rounded-lg transition-colors flex items-center gap-2"
+            >
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
+              </svg>
+              <span className="hidden sm:inline">Urgence Fuite</span>
+              <span className="sm:hidden">Appeler</span>
+            </a>
+          </div>
         </div>
       </nav>
 
+      {/* Certifications en haut - immanquables */}
+      <div className="bg-[#1b2a4a] border-b border-white/5">
+        <div className="max-w-6xl mx-auto px-4 py-3 flex flex-wrap items-center justify-center gap-4 sm:gap-8">
+          {["D\u00e9cennale", "Qualibat", "RGE"].map((cert) => (
+            <MaconClient key={cert} certName={cert} />
+          ))}
+        </div>
+      </div>
+
       {/* Hero */}
-      <section className="py-20 md:py-28 bg-navy text-center">
+      <section className="py-20 md:py-28 bg-[#1b2a4a] text-center">
         <div className="max-w-4xl mx-auto px-4">
           <span className="inline-block px-3 py-1.5 bg-orange/20 border border-orange/30 rounded-full text-orange text-xs font-semibold mb-6">
-            Ma\u00e7onnerie & Couverture
+            Ma\u00e7onnerie &middot; Couverture &middot; Charpente
           </span>
-          <h1 className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-white leading-tight mb-6">
-            [Votre Entreprise] &mdash; Ma\u00e7on Couvreur <span className="text-orange">dans le Nord</span>
+          <h1 className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-white leading-tight mb-4">
+            Vos chantiers parlent pour vous.{" "}
+            <span className="text-orange">Votre site aussi.</span>
           </h1>
-          <p className="text-white/60 text-lg max-w-2xl mx-auto mb-8">
-            Plus de 15 ans d&rsquo;exp\u00e9rience en ma\u00e7onnerie et couverture. Devis gratuit sous 24h.
-            Intervention rapide sur Douai, Orchies et Valenciennes.
+          <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.
+          </p>
+          <p className="text-white/40 text-sm mb-8">
+            Intervention rapide sur Douai, Orchies, Valenciennes et environs.
           </p>
           <div className="flex flex-col sm:flex-row gap-4 justify-center">
-            <Button size="lg" className="pulse-glow">
-              Demander un Devis Gratuit
-            </Button>
+            <a href="#devis">
+              <Button size="lg" className="w-full sm:w-auto pulse-glow">
+                Demander un Devis Toiture
+              </Button>
+            </a>
             <a
-              href="tel:+33600000000"
+              href="tel:+33604408157"
               className="inline-flex items-center justify-center gap-2 bg-red-600 hover:bg-red-700 text-white font-bold px-6 py-3 rounded-xl transition-colors"
             >
               <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
               </svg>
-              Urgence Fuite : Appeler Maintenant
+              APPELER LE PATRON
             </a>
           </div>
         </div>
       </section>
 
-      {/* Avant / Apr\u00e8s */}
-      <section className="py-16 md:py-24 bg-bg-white">
+      {/* Slider Magic Reveal - Avant/Apr\u00e8s */}
+      <section className="py-16 md:py-24 bg-white">
         <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="text-center mb-12">
-            <h2 className="text-2xl md:text-3xl font-bold text-navy mb-3">
-              Galerie <span className="text-orange">Avant / Apr\u00e8s</span>
+            <h2 className="text-2xl md:text-3xl font-bold text-[#1b2a4a] mb-3">
+              La preuve par l&rsquo;image &mdash; <span className="text-orange">Avant / Apr\u00e8s</span>
             </h2>
-            <p className="text-text-light">La preuve par l&rsquo;image. Nos chantiers parlent d&rsquo;eux-m\u00eames.</p>
+            <p className="text-gray-500">Glissez la barre pour voir la transformation. Impact visuel imm\u00e9diat.</p>
+          </div>
+
+          <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" },
+            ].map((item, i) => (
+              <MaconClient key={i} type="slider" avantLabel={item.avant} apresLabel={item.apres} />
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Garanties */}
+      <section className="py-16 md:py-24 bg-[#f8f6f3]">
+        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-12">
+            <h2 className="text-2xl md:text-3xl font-bold text-[#1b2a4a] mb-3">
+              Vos <span className="text-orange">garanties</span>
+            </h2>
+            <p className="text-gray-500">Des certifications qui prot\u00e8gent votre investissement.</p>
           </div>
 
           <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-            {avantApres.map((item, i) => (
-              <div key={i} className="bg-bg border border-border rounded-2xl overflow-hidden">
-                <div className="grid grid-cols-2">
-                  <div className="h-40 bg-red-50 flex items-center justify-center border-r border-border">
-                    <div className="text-center p-3">
-                      <p className="text-red-500 text-xs font-bold uppercase mb-1">Avant</p>
-                      <p className="text-text-muted text-xs">{item.avant}</p>
-                    </div>
-                  </div>
-                  <div className="h-40 bg-green-50 flex items-center justify-center">
-                    <div className="text-center p-3">
-                      <p className="text-green-600 text-xs font-bold uppercase mb-1">Apr\u00e8s</p>
-                      <p className="text-text-muted text-xs">{item.apres}</p>
-                    </div>
-                  </div>
-                </div>
+            {[
+              {
+                name: "Garantie D\u00e9cennale",
+                desc: "Votre ouvrage est couvert pendant 10 ans. En cas de d\u00e9faut structurel, les r\u00e9parations sont prises en charge int\u00e9gralement.",
+                icon: "\ud83d\udee1\ufe0f",
+              },
+              {
+                name: "Qualibat RGE",
+                desc: "Cette certification vous garantit des aides de l\u2019\u00c9tat (MaPrimeR\u00e9nov\u2019, CEE). Jusqu\u2019\u00e0 90% de vos travaux financ\u00e9s.",
+                icon: "\u2705",
+              },
+              {
+                name: "Assurance Responsabilit\u00e9",
+                desc: "Chaque chantier est assur\u00e9. Vous ne prenez aucun risque financier, m\u00eame en cas d\u2019impr\u00e9vu.",
+                icon: "\ud83d\udcbc",
+              },
+            ].map((g, i) => (
+              <div key={i} className="bg-white border border-gray-200 rounded-2xl p-6 text-center hover:shadow-md transition-shadow">
+                <div className="text-4xl mb-4">{g.icon}</div>
+                <h3 className="text-[#1b2a4a] font-bold text-lg mb-2">{g.name}</h3>
+                <p className="text-gray-500 text-sm leading-relaxed">{g.desc}</p>
               </div>
             ))}
           </div>
         </div>
       </section>
 
-      {/* Avis */}
-      <section className="py-16 md:py-24 bg-bg">
+      {/* Avis clients */}
+      <section className="py-16 md:py-24 bg-white">
         <div className="max-w-4xl mx-auto px-4 text-center">
-          <h2 className="text-2xl md:text-3xl font-bold text-navy mb-10">
+          <h2 className="text-2xl md:text-3xl font-bold text-[#1b2a4a] mb-10">
             Ce que disent <span className="text-orange">nos clients</span>
           </h2>
           <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
             {[
-              { name: "Marc D.", ville: "Douai", text: "Toiture refaite en 3 jours. Propre, ponctuel, prix respect\u00e9. Je recommande \u00e0 100%." },
-              { name: "Sophie L.", ville: "Orchies", text: "Fuite d\u2019urgence un dimanche. Ils sont venus en 2h. Travail impeccable." },
+              { name: "Marc D.", ville: "Douai", text: "Toiture refaite en 3 jours. Propre, ponctuel, prix respect\u00e9. Je recommande \u00e0 100%.", note: 5 },
+              { name: "Sophie L.", ville: "Orchies", text: "Fuite d\u2019urgence un dimanche. Ils sont venus en 2h. Travail impeccable et prix honn\u00eate.", note: 5 },
+              { name: "Patrick M.", ville: "Valenciennes", text: "Ravalement fa\u00e7ade complet. R\u00e9sultat magnifique, les voisins nous demandent le contact !", note: 5 },
+              { name: "Isabelle R.", ville: "Arleux", text: "Charpente trait\u00e9e et renforc\u00e9e. \u00c9quipe s\u00e9rieuse, devis respect\u00e9 au centime pr\u00e8s.", note: 5 },
             ].map((avis, i) => (
-              <div key={i} className="bg-bg-white border border-border rounded-xl p-6 text-left">
+              <div key={i} className="bg-[#f8f6f3] border border-gray-200 rounded-xl p-6 text-left">
                 <div className="flex gap-1 mb-3">
-                  {[...Array(5)].map((_, j) => (
+                  {[...Array(avis.note)].map((_, j) => (
                     <svg key={j} className="w-4 h-4 text-orange" fill="currentColor" viewBox="0 0 24 24">
                       <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
                     </svg>
                   ))}
                 </div>
-                <p className="text-text-light text-sm leading-relaxed mb-3">&ldquo;{avis.text}&rdquo;</p>
-                <p className="text-navy font-semibold text-sm">{avis.name} &mdash; <span className="text-text-muted font-normal">{avis.ville}</span></p>
+                <p className="text-gray-600 text-sm leading-relaxed mb-3">&ldquo;{avis.text}&rdquo;</p>
+                <p className="text-[#1b2a4a] font-semibold text-sm">{avis.name} &mdash; <span className="text-gray-400 font-normal">{avis.ville}</span></p>
               </div>
             ))}
           </div>
         </div>
       </section>
 
-      {/* CTA */}
-      <section className="py-16 bg-navy text-center">
+      {/* Formulaire intelligent */}
+      <section id="devis" className="py-16 md:py-24 bg-[#1b2a4a]">
         <div className="max-w-2xl mx-auto px-4">
-          <p className="text-orange text-xs font-semibold uppercase tracking-wider mb-3">Ceci est une d\u00e9mo HookLab</p>
+          <div className="text-center mb-10">
+            <h2 className="text-2xl md:text-3xl font-bold text-white mb-3">
+              Demander un <span className="text-orange">devis gratuit</span>
+            </h2>
+            <p className="text-white/60">Formulaire intelligent : on filtre pour ne recevoir que les vrais projets.</p>
+          </div>
+          <MaconClient type="form" />
+        </div>
+      </section>
+
+      {/* CTA HookLab */}
+      <section className="py-16 bg-orange text-center">
+        <div className="max-w-2xl mx-auto px-4">
+          <p className="text-white/80 text-xs font-semibold uppercase tracking-wider mb-3">Ceci est une d\u00e9mo HookLab</p>
           <h2 className="text-2xl md:text-3xl font-bold text-white mb-4">
-            Vous voulez le m\u00eame site pour votre entreprise&nbsp;?
+            Vous voulez le m\u00eame site pour votre entreprise ?
           </h2>
-          <p className="text-white/60 mb-6">
-            Imaginez votre logo, vos photos et votre num\u00e9ro \u00e0 la place. C&rsquo;est exactement ce que je construis pour vous.
+          <p className="text-white/80 mb-6">
+            Imaginez votre logo, vos photos de chantier et votre num\u00e9ro \u00e0 la place. C&rsquo;est exactement ce que je construis pour vous.
           </p>
           <Link href="/#contact">
-            <Button size="lg" className="pulse-glow">
+            <Button size="lg" className="bg-[#1b2a4a] hover:bg-[#1b2a4a]/90 border-[#1b2a4a]">
               Demander Mon Audit Gratuit
             </Button>
           </Link>