diff --git a/app/macon/MaconClient.tsx b/app/macon/MaconClient.tsx
index d7a2846..02dcb0c 100644
--- a/app/macon/MaconClient.tsx
+++ b/app/macon/MaconClient.tsx
@@ -5,20 +5,22 @@ import MagicReveal from "@/components/ui/MagicReveal";
 import Button from "@/components/ui/Button";
 
 interface MaconClientProps {
-  type?: "slider" | "form" | "cert";
-  certName?: string;
+  type?: "slider" | "form" | "faq" | "floating";
   avantLabel?: string;
   apresLabel?: string;
   avantImage?: string;
   apresImage?: string;
+  faqs?: { q: string; a: string }[];
 }
 
-export default function MaconClient({ type, certName, avantLabel, apresLabel, avantImage, apresImage }: MaconClientProps) {
-  // Cert badge with popup
-  if (!type || type === "cert") {
-    return <CertBadge name={certName || ""} />;
-  }
-
+export default function MaconClient({
+  type,
+  avantLabel,
+  apresLabel,
+  avantImage,
+  apresImage,
+  faqs,
+}: MaconClientProps) {
   if (type === "slider") {
     return (
       <MagicReveal
@@ -35,121 +37,112 @@ export default function MaconClient({ type, certName, avantLabel, apresLabel, av
     return <DevisForm />;
   }
 
+  if (type === "faq") {
+    return <FaqAccordion faqs={faqs || []} />;
+  }
+
+  if (type === "floating") {
+    return <FloatingCTA />;
+  }
+
   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.",
-  };
+/* ============================================================
+   FAQ ACCORDION
+   ============================================================ */
+function FaqAccordion({ faqs }: { faqs: { q: string; a: string }[] }) {
+  const [openIdx, setOpenIdx] = useState<number | null>(null);
 
   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>
+    <div className="space-y-3">
+      {faqs.map((faq, i) => {
+        const isOpen = openIdx === i;
+        return (
+          <div key={i} className="bg-[#f8f6f3] border border-gray-200 rounded-xl overflow-hidden">
             <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"
+              onClick={() => setOpenIdx(isOpen ? null : i)}
+              className="w-full flex items-center justify-between p-5 text-left cursor-pointer"
             >
-              Compris
+              <span className="text-navy font-semibold text-sm pr-4">{faq.q}</span>
+              <svg
+                className={`w-5 h-5 text-orange shrink-0 transition-transform ${isOpen ? "rotate-180" : ""}`}
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+              </svg>
             </button>
+            {isOpen && (
+              <div className="px-5 pb-5 -mt-1">
+                <p className="text-text-light text-sm leading-relaxed">{faq.a}</p>
+              </div>
+            )}
           </div>
-        </div>
-      )}
-    </>
+        );
+      })}
+    </div>
   );
 }
 
+/* ============================================================
+   SMART DEVIS FORM
+   ============================================================ */
 function DevisForm() {
-  const [step, setStep] = useState<"type" | "details" | "urgence">("type");
+  const [step, setStep] = useState<"type" | "details">("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&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"
-          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&eacute;tails du projet</h3>
+          <h3 className="text-navy font-bold text-lg">Vos coordonn&eacute;es</h3>
         </div>
-        <p className="text-gray-400 text-sm mb-5">Type : <strong className="text-[#1b2a4a]">{projectType}</strong></p>
+        <p className="text-text-muted text-sm mb-5">
+          Projet : <strong className="text-navy">{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&sup2;</option>
-              <option>50 &agrave; 100m&sup2;</option>
-              <option>100 &agrave; 200m&sup2;</option>
-              <option>Plus de 200m&sup2;</option>
-            </select>
+            <label className="block text-sm font-medium text-text 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-text text-sm placeholder:text-text-muted 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">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" />
+            <label className="block text-sm font-medium text-text 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-text text-sm placeholder:text-text-muted 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&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" />
+            <label className="block text-sm font-medium text-text mb-1.5">Ville</label>
+            <input
+              type="text"
+              placeholder="Orchies, Cysoing, Sam&eacute;on..."
+              className="w-full px-4 py-3 bg-[#f8f6f3] border border-gray-200 rounded-xl text-text text-sm placeholder:text-text-muted 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" />
+            <label className="block text-sm font-medium text-text mb-1.5">D&eacute;crivez votre projet (optionnel)</label>
+            <textarea
+              placeholder="Surface, type de travaux, d&eacute;lais souhait&eacute;s..."
+              rows={3}
+              className="w-full px-4 py-3 bg-[#f8f6f3] border border-gray-200 rounded-xl text-text text-sm placeholder:text-text-muted focus:border-orange focus:ring-1 focus:ring-orange outline-none resize-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">
+          <Button size="lg" className="w-full">
+            Envoyer ma demande de devis
+          </Button>
+          <button
+            onClick={() => setStep("type")}
+            className="w-full text-text-muted hover:text-text text-sm underline cursor-pointer"
+          >
             &larr; Retour
           </button>
         </div>
@@ -161,39 +154,78 @@ 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">1/2</span>
-        <h3 className="text-[#1b2a4a] font-bold text-lg">Quel type de projet ?</h3>
+        <h3 className="text-navy font-bold text-lg">Quel type de projet&nbsp;?</h3>
       </div>
-      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+      <div className="grid grid-cols-1 sm:grid-cols-3 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 },
+          {
+            label: "Projet Extension",
+            desc: "Agrandissement, garage, sur\u00e9l\u00e9vation",
+            icon: (
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
+              </svg>
+            ),
+          },
+          {
+            label: "R\u00e9novation",
+            desc: "Fa\u00e7ade, rejointoiement, murs",
+            icon: (
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
+              </svg>
+            ),
+          },
+          {
+            label: "Petits Travaux",
+            desc: "Terrasse, muret, dalle",
+            icon: (
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} 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>
+            ),
+          },
         ].map((item) => (
           <button
             key={item.label}
             onClick={() => {
               setProjectType(item.label);
-              if (item.urgent) {
-                setStep("urgence");
-              } else {
-                setStep("details");
-              }
+              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"
-            }`}
+            className="p-5 rounded-xl border-2 border-gray-200 bg-[#f8f6f3] hover:border-orange hover:shadow-md text-center transition-all cursor-pointer group"
           >
-            <p className={`font-semibold text-sm ${item.urgent ? "text-red-600" : "text-[#1b2a4a]"}`}>
-              {item.urgent && "\u26a0\ufe0f "}{item.label}
-            </p>
+            <div className="w-10 h-10 bg-orange/10 rounded-lg flex items-center justify-center mx-auto mb-3 text-orange group-hover:bg-orange group-hover:text-white transition-colors">
+              {item.icon}
+            </div>
+            <p className="font-semibold text-navy text-sm mb-1">{item.label}</p>
+            <p className="text-text-muted text-xs">{item.desc}</p>
           </button>
         ))}
       </div>
     </div>
   );
 }
+
+/* ============================================================
+   FLOATING MOBILE CTA
+   ============================================================ */
+function FloatingCTA() {
+  return (
+    <div className="fixed bottom-4 left-4 right-4 z-50 md:hidden">
+      <a
+        href="tel:+33600000000"
+        className="flex items-center justify-center gap-2 bg-orange hover:bg-orange-hover text-white font-bold text-sm py-3.5 rounded-xl shadow-lg transition-colors w-full"
+      >
+        <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>
+        Appeler maintenant
+      </a>
+    </div>
+  );
+}
diff --git a/app/macon/page.tsx b/app/macon/page.tsx
index be1009f..883632c 100644
--- a/app/macon/page.tsx
+++ b/app/macon/page.tsx
@@ -1,232 +1,552 @@
 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émo Site Maçon / Couvreur - L'Expertise Solide",
+  title:
+    "Ma\u00e7onnerie & Extension de Maison \u00e0 Orchies, Cysoing, Saint-Amand-les-Eaux | Artisan Ma\u00e7on Nord (59)",
   description:
-    "Modèle de site HookLab pour maçons, couvreurs et charpentiers. Slider Avant/Après interactif, badges garanties, formulaire intelligent, bouton urgence.",
+    "Artisan ma\u00e7on depuis 10 ans. Extension de maison, gros \u0153uvre, r\u00e9novation, rejointoiement de briques, terrasse. Devis gratuit sous 24h. Orchies, Cysoing, Saint-Amand-les-Eaux, Sam\u00e9on et P\u00e9v\u00e8le.",
+  keywords: [
+    "ma\u00e7on Orchies",
+    "ma\u00e7onnerie Cysoing",
+    "extension maison Nord",
+    "agrandissement maison 59",
+    "ma\u00e7on Saint-Amand-les-Eaux",
+    "artisan ma\u00e7on P\u00e9v\u00e8le",
+    "gros \u0153uvre Nord",
+    "r\u00e9novation fa\u00e7ade",
+    "rejointoiement briques",
+    "terrasse carrel\u00e9e",
+    "dalle b\u00e9ton",
+    "ouverture mur porteur IPN",
+    "ma\u00e7on Sam\u00e9on",
+    "ma\u00e7on Landas",
+    "ma\u00e7on Nomain",
+  ],
   alternates: {
     canonical: "https://hooklab.eu/macon",
   },
 };
 
-export default function MaconDemo() {
+const services = [
+  {
+    icon: (
+      <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
+      </svg>
+    ),
+    title: "Extension de maison & Garage",
+    desc: "Agrandissez votre surface habitable : extension en parpaing ou brique, garage, toit plat ou traditionnel. Nous g\u00e9rons le gros \u0153uvre de A \u00e0 Z.",
+  },
+  {
+    icon: (
+      <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
+      </svg>
+    ),
+    title: "Ma\u00e7onnerie G\u00e9n\u00e9rale",
+    desc: "Murs de cl\u00f4ture, fondations, ouverture de murs porteurs avec pose d\u2019IPN. Construction neuve ou reprise de ma\u00e7onnerie ancienne.",
+  },
+  {
+    icon: (
+      <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
+      </svg>
+    ),
+    title: "R\u00e9novation & Fa\u00e7ade",
+    desc: "Rejointoiement de briques, ravalement de fa\u00e7ade, dalle b\u00e9ton, reprise d\u2019enduit. Redonner vie \u00e0 votre b\u00e2ti sans compromis.",
+  },
+  {
+    icon: (
+      <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} 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>
+    ),
+    title: "Am\u00e9nagement Ext\u00e9rieur",
+    desc: "Terrasse carrel\u00e9e, all\u00e9es, pavage, muret. Cr\u00e9ez un ext\u00e9rieur qui met en valeur votre maison et votre terrain.",
+  },
+];
+
+const faqs = [
+  {
+    q: "Combien de temps pour un devis\u00a0?",
+    a: "Nous nous d\u00e9pla\u00e7ons pour une visite technique sous 48h, et le devis d\u00e9taill\u00e9 vous est remis dans la foul\u00e9e. Gratuit et sans engagement.",
+  },
+  {
+    q: "Vous avez la d\u00e9cennale\u00a0?",
+    a: "Oui, bien s\u00fbr. L\u2019attestation de garantie d\u00e9cennale est syst\u00e9matiquement fournie avec chaque devis. Votre ouvrage est couvert pendant 10 ans.",
+  },
+  {
+    q: "Vous faites l\u2019\u00e9vacuation des gravats\u00a0?",
+    a: "Oui. Chantier propre garanti. Nous g\u00e9rons l\u2019\u00e9vacuation des gravats et le nettoyage en fin de chantier. Vous n\u2019avez rien \u00e0 faire.",
+  },
+];
+
+export default function MaconPage() {
   return (
     <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; HookLab
-            </Link>
-            <span className="text-white/30">|</span>
-            <span className="text-white font-bold text-sm">
-              [Votre Entreprise] &mdash; <span className="text-orange-500">Maçonnerie & Couverture</span>
-            </span>
-          </div>
-          <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édiate</span>
+      {/* ============================================================
+          SECTION 1 : HERO
+          ============================================================ */}
+      <section className="relative min-h-[85vh] flex items-center bg-navy overflow-hidden">
+        {/* Background image overlay */}
+        <div
+          className="absolute inset-0 bg-cover bg-center"
+          style={{
+            backgroundImage:
+              "url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=1920&q=80')",
+          }}
+        />
+        <div className="absolute inset-0 bg-gradient-to-r from-[#1b2a4a]/95 via-[#1b2a4a]/85 to-[#1b2a4a]/70" />
+
+        {/* Nav bar */}
+        <nav className="absolute top-0 left-0 right-0 z-30">
+          <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; HookLab
+              </Link>
+              <span className="text-white/30">|</span>
+              <span className="text-white font-bold text-sm">
+                [Votre Entreprise] &mdash; <span className="text-orange">Ma&ccedil;onnerie</span>
+              </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"
+              href="tel:+33600000000"
+              className="bg-orange hover:bg-orange-hover 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="hidden sm:inline">06 XX XX XX XX</span>
               <span className="sm:hidden">Appeler</span>
             </a>
           </div>
-        </div>
-      </nav>
+        </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écennale", "Qualibat", "RGE"].map((cert) => (
-            <MaconClient key={cert} certName={cert} />
-          ))}
-        </div>
-      </div>
+        <div className="relative z-20 max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-24 md:py-32">
+          {/* Google badge */}
+          <div className="inline-flex items-center gap-2 bg-white/10 border border-white/20 rounded-full px-4 py-2 mb-8 backdrop-blur-sm">
+            <div className="flex gap-0.5">
+              {[...Array(5)].map((_, i) => (
+                <svg key={i} className="w-4 h-4 text-yellow-400" 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>
+            <span className="text-white text-sm font-semibold">4.9/5 sur Google</span>
+          </div>
 
-      {/* Hero */}
-      <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-500/20 border border-orange-500/30 rounded-full text-orange-500 text-xs font-semibold mb-6">
-            Maçonnerie &middot; Couverture &middot; Charpente
-          </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-500">Votre site aussi.</span>
+          <h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold text-white leading-[1.1] tracking-[-0.03em] mb-6 max-w-3xl">
+            Ma&ccedil;onnerie &amp; Extension de Maison &agrave;{" "}
+            <span className="text-orange">Orchies, Cysoing et Saint-Amand-les-Eaux.</span>
           </h1>
-          <p className="text-white/60 text-lg max-w-2xl mx-auto mb-4">
-            Plus de 15 ans d’expérience en maçonnerie, couverture et charpente.
-            Chaque chantier est réalisé dans les règles de l’art, avec des garanties solides
-            pour votre tranquillité.
+
+          <p className="text-white/70 text-lg sm:text-xl max-w-2xl mb-4 leading-relaxed">
+            Artisan ma&ccedil;on depuis 10 ans. Sp&eacute;cialiste agrandissement, gros &oelig;uvre
+            et r&eacute;novation dans le P&eacute;v&egrave;le.
           </p>
+
           <p className="text-white/40 text-sm mb-8">
-            Intervention rapide sur Douai, Orchies, Valenciennes et environs.
+            Garantie d&eacute;cennale &middot; Devis gratuit &middot; Intervention sur tout le secteur Nord (59)
           </p>
-          <div className="flex flex-col sm:flex-row gap-4 justify-center">
-            <a href="#devis">
-              <Button size="lg" className="w-full sm:w-auto pulse-glow bg-orange-500 hover:bg-orange-600 text-white border-orange-500">
-                Demander un Devis Toiture
-              </Button>
+
+          <div className="flex flex-col sm:flex-row gap-4">
+            <a
+              href="#devis"
+              className="inline-flex items-center justify-center gap-2 bg-orange hover:bg-orange-hover text-white font-bold text-base px-8 py-4 rounded-xl transition-colors pulse-glow"
+            >
+              Obtenir mon devis sous 24h
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
+              </svg>
             </a>
             <a
-              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"
+              href="tel:+33600000000"
+              className="inline-flex items-center justify-center gap-2 border-2 border-white/20 text-white font-semibold text-sm px-6 py-4 rounded-xl hover:bg-white/10 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>
-              APPELER LE PATRON
+              Appeler directement
             </a>
           </div>
         </div>
       </section>
 
-      {/* Slider Magic Reveal - Avant/Après */}
+      {/* ============================================================
+          SECTION 2 : REASSURANCE
+          ============================================================ */}
+      <section className="py-14 md:py-20 bg-white border-b border-gray-100">
+        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-6">
+            {[
+              {
+                icon: (
+                  <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} 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>
+                ),
+                title: "Garantie D\u00e9cennale incluse",
+                desc: "Votre ouvrage est couvert 10 ans. Attestation fournie avec le devis.",
+              },
+              {
+                icon: (
+                  <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
+                  </svg>
+                ),
+                title: "Devis gratuit & d\u00e9taill\u00e9",
+                desc: "Pas de mauvaise surprise. Chaque poste est d\u00e9taill\u00e9 et expliqu\u00e9 clairement.",
+              },
+              {
+                icon: (
+                  <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+                  </svg>
+                ),
+                title: "Intervention rapide",
+                desc: "Sur Orchies, Cysoing, Saint-Amand-les-Eaux et dans un rayon de 25\u00a0km.",
+              },
+            ].map((item, i) => (
+              <div key={i} className="text-center md:text-left flex flex-col items-center md:items-start gap-3">
+                <div className="w-14 h-14 bg-orange/10 rounded-2xl flex items-center justify-center text-orange">
+                  {item.icon}
+                </div>
+                <div>
+                  <h3 className="text-navy font-bold text-base mb-1">{item.title}</h3>
+                  <p className="text-text-light text-sm leading-relaxed">{item.desc}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ============================================================
+          SECTION 3 : SERVICES (SEO + EXPERTISE)
+          ============================================================ */}
+      <section className="py-16 md:py-24 bg-[#f8f6f3]">
+        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-14">
+            <span className="inline-block px-3 py-1.5 bg-orange/10 border border-orange/20 rounded-full text-orange text-xs font-semibold mb-4">
+              Nos Prestations
+            </span>
+            <h2 className="text-2xl md:text-3xl lg:text-4xl font-bold text-navy tracking-[-0.02em] mb-3">
+              Tous vos travaux de <span className="text-orange">ma&ccedil;onnerie</span> dans le Nord
+            </h2>
+            <p className="text-text-light text-base md:text-lg max-w-2xl mx-auto">
+              Du gros &oelig;uvre &agrave; la finition, nous intervenons sur tous types de projets
+              pour les particuliers et professionnels du P&eacute;v&egrave;le.
+            </p>
+          </div>
+
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
+            {services.map((s, i) => (
+              <div
+                key={i}
+                className="bg-white border border-gray-200 rounded-2xl p-6 hover:shadow-lg hover:-translate-y-1 transition-all"
+              >
+                <div className="w-12 h-12 bg-orange/10 rounded-xl flex items-center justify-center text-orange mb-4">
+                  {s.icon}
+                </div>
+                <h3 className="text-navy font-bold text-lg mb-2">{s.title}</h3>
+                <p className="text-text-light text-sm leading-relaxed">{s.desc}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ============================================================
+          SECTION 4 : AVANT / APRES
+          ============================================================ */}
       <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-[#1b2a4a] mb-3">
-              La preuve par l’image &mdash; <span className="text-orange-500">Avant / Après</span>
+            <span className="inline-block px-3 py-1.5 bg-orange/10 border border-orange/20 rounded-full text-orange text-xs font-semibold mb-4">
+              R&eacute;alisations
+            </span>
+            <h2 className="text-2xl md:text-3xl lg:text-4xl font-bold text-navy mb-3">
+              Vos voisins nous font <span className="text-orange">confiance</span>
             </h2>
-            <p className="text-gray-500">Glissez la barre pour voir la transformation. Impact visuel immédiat.</p>
+            <p className="text-text-light text-base md:text-lg max-w-2xl mx-auto">
+              Glissez la barre pour voir la transformation. Ce sont de vrais chantiers r&eacute;alis&eacute;s dans le secteur.
+            </p>
           </div>
 
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
             {[
               {
-                avant: "Toiture vétuste — Tuiles cassées",
-                apres: "Réfection complète en tuiles mécaniques",
+                avant: "Maison dans son jus",
+                apres: "Extension moderne 30m\u00b2 + terrasse",
                 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",
+                legend: "Extension 30m\u00b2 \u00e0 Cysoing \u2014 R\u00e9alis\u00e9 en 4 semaines.",
               },
               {
-                avant: "Façade fissurée — Enduit dégradé",
-                apres: "Ravalement complet + isolation",
+                avant: "Fa\u00e7ade fissur\u00e9e",
+                apres: "Ravalement complet",
                 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",
+                legend: "Rejointoiement briques \u00e0 Orchies.",
               },
               {
-                avant: "Mur porteur abîmé — Fissures",
-                apres: "Reconstruction + renforcement",
+                avant: "Terrain nu",
+                apres: "Terrasse carrel\u00e9e + muret",
                 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",
+                legend: "Am\u00e9nagement ext\u00e9rieur \u00e0 Sam\u00e9on.",
               },
             ].map((item, i) => (
-              <MaconClient key={i} type="slider" avantLabel={item.avant} apresLabel={item.apres} avantImage={item.avantImg} apresImage={item.apresImg} />
+              <div key={i}>
+                <MaconClient
+                  type="slider"
+                  avantLabel={item.avant}
+                  apresLabel={item.apres}
+                  avantImage={item.avantImg}
+                  apresImage={item.apresImg}
+                />
+                <p className="text-text-light text-xs mt-2 text-center italic">{item.legend}</p>
+              </div>
             ))}
           </div>
         </div>
       </section>
 
-      {/* Garanties */}
+      {/* ============================================================
+          SECTION 5 : ZONE D'INTERVENTION (SEO LOCAL)
+          ============================================================ */}
       <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-500">garanties</span>
-            </h2>
-            <p className="text-gray-500">Des certifications qui protègent votre investissement.</p>
-          </div>
+        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-10 items-center">
+            {/* Map */}
+            <div className="rounded-2xl overflow-hidden shadow-lg border border-gray-200 h-[350px] md:h-[420px]">
+              <iframe
+                src="https://www.openstreetmap.org/export/embed.html?bbox=3.05%2C50.38%2C3.45%2C50.52&layer=mapnik&marker=50.4567%2C3.2300"
+                className="w-full h-full border-0"
+                title="Zone d'intervention ma\u00e7onnerie Nord"
+                loading="lazy"
+              />
+            </div>
 
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-            {[
-              {
-                name: "Garantie Décennale",
-                desc: "Votre ouvrage est couvert pendant 10 ans. En cas de défaut structurel, les réparations sont prises en charge intégralement.",
-                icon: "🛡️",
-              },
-              {
-                name: "Qualibat RGE",
-                desc: "Cette certification vous garantit des aides de l’État (MaPrimeRénov’, CEE). Jusqu’à 90% de vos travaux financés.",
-                icon: "✅",
-              },
-              {
-                name: "Assurance Responsabilité",
-                desc: "Chaque chantier est assuré. Vous ne prenez aucun risque financier, même en cas d’imprévu.",
-                icon: "💼",
-              },
-            ].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>
-            ))}
+            {/* Text */}
+            <div>
+              <span className="inline-block px-3 py-1.5 bg-orange/10 border border-orange/20 rounded-full text-orange text-xs font-semibold mb-4">
+                Proximit&eacute;
+              </span>
+              <h2 className="text-2xl md:text-3xl font-bold text-navy mb-4">
+                Votre ma&ccedil;on de proximit&eacute; dans le <span className="text-orange">Nord (59)</span>
+              </h2>
+              <p className="text-text-light text-base leading-relaxed mb-4">
+                Bas&eacute;s &agrave; <strong className="text-navy">Sam&eacute;on</strong>, nous sommes rapidement
+                sur vos chantiers &agrave; <strong className="text-navy">Orchies</strong>,{" "}
+                <strong className="text-navy">Cysoing</strong> ou{" "}
+                <strong className="text-navy">Saint-Amand-les-Eaux</strong>.
+              </p>
+              <p className="text-text-light text-sm leading-relaxed mb-6">
+                Nous intervenons pour tous vos travaux de ma&ccedil;onnerie &agrave;{" "}
+                <strong>Orchies</strong>, <strong>Cysoing</strong>, <strong>Saint-Amand-les-Eaux</strong>,{" "}
+                <strong>Sam&eacute;on</strong>, <strong>Landas</strong>, <strong>Beuvry-la-For&ecirc;t</strong>,{" "}
+                <strong>Nomain</strong>, <strong>Genech</strong>, <strong>Templeuve</strong> et dans
+                tout le secteur du P&eacute;v&egrave;le et du Douaisis.
+              </p>
+              <a
+                href="#devis"
+                className="inline-flex items-center gap-2 bg-orange hover:bg-orange-hover text-white font-bold text-sm px-6 py-3 rounded-xl transition-colors"
+              >
+                Demander un devis
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
+                </svg>
+              </a>
+            </div>
           </div>
         </div>
       </section>
 
-      {/* 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-[#1b2a4a] mb-10">
-            Ce que disent <span className="text-orange-500">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é. Je recommande à 100%.", note: 5 },
-              { name: "Sophie L.", ville: "Orchies", text: "Fuite d’urgence un dimanche. Ils sont venus en 2h. Travail impeccable et prix honnête.", note: 5 },
-              { name: "Patrick M.", ville: "Valenciennes", text: "Ravalement façade complet. Résultat magnifique, les voisins nous demandent le contact !", note: 5 },
-              { name: "Isabelle R.", ville: "Arleux", text: "Charpente traitée et renforcée. Équipe sérieuse, devis respecté au centime près.", note: 5 },
-            ].map((avis, i) => (
-              <div key={i} className="bg-[#f8f6f3] border border-gray-200 rounded-xl p-6 text-left">
-                <div className="flex gap-1 mb-3">
-                  {[...Array(avis.note)].map((_, j) => (
-                    <svg key={j} className="w-4 h-4 text-orange-500" 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>
-                  ))}
+      {/* ============================================================
+          SECTION 6 : QUI SUIS-JE ?
+          ============================================================ */}
+      <section className="py-16 md:py-24 bg-navy">
+        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
+            {/* Photo placeholder */}
+            <div className="flex justify-center">
+              <div className="relative">
+                <div className="absolute -inset-3 bg-orange/20 rounded-3xl blur-xl" />
+                <div className="relative w-72 h-80 sm:w-80 sm:h-96 rounded-2xl overflow-hidden border-2 border-white/10">
+                  <div className="w-full h-full bg-navy-light flex items-center justify-center">
+                    <div className="text-center">
+                      <div className="w-20 h-20 bg-orange/20 rounded-full flex items-center justify-center mx-auto mb-3">
+                        <svg className="w-10 h-10 text-orange/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+                        </svg>
+                      </div>
+                      <p className="text-white/30 text-sm">Photo de Cyprien</p>
+                      <p className="text-white/20 text-xs mt-1">(sur le chantier)</p>
+                    </div>
+                  </div>
+                </div>
+                <div className="absolute -bottom-3 -right-3 bg-orange text-white text-xs font-bold px-4 py-2 rounded-xl shadow-lg">
+                  Artisan depuis 10 ans
                 </div>
-                <p className="text-gray-600 text-sm leading-relaxed mb-3">“{avis.text}”</p>
-                <p className="text-[#1b2a4a] font-semibold text-sm">{avis.name} — <span className="text-gray-400 font-normal">{avis.ville}</span></p>
               </div>
-            ))}
+            </div>
+
+            {/* Bio */}
+            <div>
+              <span className="inline-block px-3 py-1.5 bg-white/10 rounded-full text-orange text-xs font-semibold mb-4">
+                L&rsquo;artisan derri&egrave;re les chantiers
+              </span>
+              <h2 className="text-2xl md:text-3xl lg:text-4xl font-bold text-white tracking-[-0.02em] mb-4">
+                Je suis Cyprien,{" "}
+                <span className="text-orange">artisan ma&ccedil;on passionn&eacute;.</span>
+              </h2>
+              <p className="text-white/80 text-base leading-relaxed mb-4">
+                Pas de commerciaux, pas de sous-traitance. Je suis votre interlocuteur unique
+                du devis &agrave; la fin du chantier. Quand vous m&rsquo;appelez, c&rsquo;est moi qui r&eacute;ponds.
+              </p>
+              <p className="text-white/60 text-base leading-relaxed mb-6">
+                Apr&egrave;s 10 ans &agrave; b&acirc;tir dans le P&eacute;v&egrave;le, je connais chaque type de terrain,
+                chaque contrainte locale. Mon engagement : un travail propre, dans les d&eacute;lais,
+                au prix annonc&eacute;. Sans mauvaise surprise.
+              </p>
+              <div className="flex flex-wrap gap-4">
+                {[
+                  "Interlocuteur unique",
+                  "Z\u00e9ro sous-traitance",
+                  "Chantier propre garanti",
+                ].map((item) => (
+                  <div key={item} className="flex items-center gap-2">
+                    <div className="w-5 h-5 bg-orange/20 rounded-full flex items-center justify-center">
+                      <svg className="w-3 h-3 text-orange" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
+                      </svg>
+                    </div>
+                    <span className="text-white/70 text-sm">{item}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
           </div>
         </div>
       </section>
 
-      {/* Formulaire intelligent */}
-      <section id="devis" className="py-16 md:py-24 bg-[#1b2a4a]">
+      {/* ============================================================
+          SECTION 7 : FAQ
+          ============================================================ */}
+      <section className="py-16 md:py-24 bg-white">
+        <div className="max-w-3xl 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">
+              Questions <span className="text-orange">fr&eacute;quentes</span>
+            </h2>
+          </div>
+          <MaconClient type="faq" faqs={faqs} />
+        </div>
+      </section>
+
+      {/* ============================================================
+          SECTION 8 : FORMULAIRE INTELLIGENT (DEVIS)
+          ============================================================ */}
+      <section id="devis" className="py-16 md:py-24 bg-navy">
         <div className="max-w-2xl mx-auto px-4">
           <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-500">devis gratuit</span>
+              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>
+            <p className="text-white/60">
+              S&eacute;lectionnez votre type de projet. Devis d&eacute;taill&eacute; sous 48h.
+            </p>
           </div>
           <MaconClient type="form" />
         </div>
       </section>
 
-      {/* CTA HookLab */}
-      <section className="py-16 bg-orange-500 text-center">
+      {/* ============================================================
+          CTA HookLab
+          ============================================================ */}
+      <section className="py-12 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émo HookLab</p>
-          <h2 className="text-2xl md:text-3xl font-bold text-white mb-4">
-            Vous voulez le même site pour votre entreprise ?
-          </h2>
-          <p className="text-white/80 mb-6">
-            Imaginez votre logo, vos photos de chantier et votre numéro à la place. C’est exactement ce que je construis pour vous.
+          <p className="text-white/80 text-xs font-semibold uppercase tracking-wider mb-3">
+            Ceci est un mod&egrave;le HookLab
           </p>
-          <Link href="/#contact">
-            <Button size="lg" className="bg-[#1b2a4a] hover:bg-[#1b2a4a]/90 border-[#1b2a4a]">
-              Demander Mon Audit Gratuit
-            </Button>
+          <h2 className="text-xl md:text-2xl font-bold text-white mb-4">
+            Vous voulez le m&ecirc;me site pour votre entreprise&nbsp;?
+          </h2>
+          <p className="text-white/80 text-sm mb-6">
+            Imaginez votre logo, vos photos de chantier et votre num&eacute;ro &agrave; la place.
+          </p>
+          <Link
+            href="/#contact"
+            className="inline-flex items-center gap-2 bg-navy hover:bg-navy-light text-white font-bold text-sm px-6 py-3 rounded-xl transition-colors"
+          >
+            Demander Mon Diagnostic Gratuit
           </Link>
         </div>
       </section>
+
+      {/* ============================================================
+          FOOTER SEO
+          ============================================================ */}
+      <footer className="bg-navy-dark border-t border-white/10 py-10">
+        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 text-sm">
+            {/* NAP */}
+            <div>
+              <h4 className="text-white font-semibold mb-3">Coordonn&eacute;es</h4>
+              <ul className="space-y-1 text-white/50">
+                <li className="font-semibold text-white">[Votre Entreprise]</li>
+                <li>Sam&eacute;on, 59310</li>
+                <li>T&eacute;l : 06 XX XX XX XX</li>
+                <li>SIRET : XXX XXX XXX XXXXX</li>
+              </ul>
+            </div>
+
+            {/* Expertises SEO */}
+            <div>
+              <h4 className="text-white font-semibold mb-3">Expertises</h4>
+              <ul className="space-y-1 text-white/50">
+                <li>Ma&ccedil;on Orchies</li>
+                <li>Ma&ccedil;on Cysoing</li>
+                <li>Ma&ccedil;on Saint-Amand-les-Eaux</li>
+                <li>Extension maison P&eacute;v&egrave;le</li>
+              </ul>
+            </div>
+
+            {/* Legal */}
+            <div>
+              <h4 className="text-white font-semibold mb-3">L&eacute;gal</h4>
+              <ul className="space-y-1">
+                <li>
+                  <Link href="/mentions-legales" className="text-white/50 hover:text-white text-sm transition-colors">
+                    Mentions l&eacute;gales
+                  </Link>
+                </li>
+                <li>
+                  <Link href="/confidentialite" className="text-white/50 hover:text-white text-sm transition-colors">
+                    Politique de confidentialit&eacute;
+                  </Link>
+                </li>
+              </ul>
+            </div>
+          </div>
+
+          <div className="border-t border-white/10 mt-8 pt-6 text-center">
+            <p className="text-white/30 text-xs">
+              Site cr&eacute;&eacute; par{" "}
+              <Link href="/" className="text-orange hover:underline">HookLab</Link>{" "}
+              &mdash; Cr&eacute;ation de sites internet pour artisans du b&acirc;timent.
+            </p>
+          </div>
+        </div>
+      </footer>
+
+      {/* Floating mobile CTA */}
+      <MaconClient type="floating" />
     </main>
   );
 }