diff --git a/components/marketing/LocalSEOPage.tsx b/components/marketing/LocalSEOPage.tsx
index 16138b6..264c5bf 100644
--- a/components/marketing/LocalSEOPage.tsx
+++ b/components/marketing/LocalSEOPage.tsx
@@ -15,13 +15,22 @@ interface LocalSEOPageProps {
   distanceMouchin?: string;
 }
 
-// Services dérivés de siteConfig (sans "conseil" qui redirige vers /contact)
-const services = siteConfig.footerServicesNav.map((s) => {
-  const found = siteConfig.services.find(
-    (sc) => sc.title === s.label || `/${sc.slug}` === s.href
+// Liens services statiques (évite toute inférence TypeScript complexe au niveau module)
+const SERVICE_LINKS: { label: string; href: string }[] = [
+  { label: "Construction de maison", href: "/construction-maison" },
+  { label: "Rénovation", href: "/renovation" },
+  { label: "Assainissement", href: "/assainissement" },
+  { label: "Création d'accès", href: "/creation-acces" },
+  { label: "Démolition", href: "/demolition" },
+];
+
+function Arrow() {
+  return (
+    <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>
   );
-  return { icon: found?.icon ?? "🔧", label: s.label, href: s.href };
-});
+}
 
 export default function LocalSEOPage({
   ville,
@@ -32,114 +41,209 @@ export default function LocalSEOPage({
   texteLocal,
   distanceMouchin,
 }: LocalSEOPageProps) {
-  const { phone, phoneRaw, address } = siteConfig;
+  const { phone, phoneRaw, zones } = siteConfig;
+
+  // Paragraphes du texte local (séparés par double saut de ligne)
+  const paragraphes = texteLocal.split(/\n\n+/).filter(Boolean);
 
   return (
     <main id="main-content" className="min-h-screen">
       <Navbar />
 
       {/* Hero */}
-      <section className="bg-navy py-16 md:py-24">
-        <div className="max-w-5xl mx-auto px-4 sm:px-6">
-          <div className="max-w-2xl">
-            <ScrollReveal direction="up">
-              <div className="flex items-center gap-2 mb-4">
-                <span className="text-orange">📍</span>
-                <span className="text-white/60 text-sm">{ville} — {departement}</span>
+      <section className="bg-navy texture-dark py-16 md:py-24 relative overflow-hidden">
+        <div className="hero-diagonal-panel" />
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <ScrollReveal direction="up">
+            <Link
+              href="/services"
+              className="inline-flex items-center gap-2 text-white/40 hover:text-white text-xs font-bold uppercase tracking-widest mb-8 transition-colors"
+            >
+              <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+              </svg>
+              Nos services
+            </Link>
+            <span className="text-orange text-xs font-bold uppercase tracking-[0.25em] block mb-4">
+              {departement}
+            </span>
+            <h1 className="text-4xl md:text-6xl font-black text-white uppercase leading-none tracking-tight mb-5 max-w-3xl">
+              Maçon &amp;<br />
+              <span className="text-orange">{ville}</span>
+            </h1>
+            <p className="text-white/55 text-base md:text-lg max-w-xl mb-10">{description}</p>
+            <div className="flex flex-col sm:flex-row gap-4">
+              <Link href="/contact" className="btn btn-fill px-8 py-4 text-xs uppercase tracking-[0.2em]">
+                <span>Devis gratuit</span>
+                <span><Arrow /></span>
+              </Link>
+              <a href={`tel:${phoneRaw}`} className="btn btn-outline-light px-8 py-4 text-xs uppercase tracking-[0.2em]">
+                <span>{phone}</span>
+              </a>
+            </div>
+          </ScrollReveal>
+        </div>
+      </section>
+
+      {/* Stats */}
+      <section className="bg-stone-bg border-b border-border py-10">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+            {[
+              { val: "Gratuit", label: "Devis + déplacement" },
+              { val: "24h", label: "Délai de réponse" },
+              { val: distanceMouchin ?? "< 30km", label: "de notre siège" },
+              { val: "15+", label: "Ans d'expérience" },
+            ].map((s) => (
+              <div key={s.label} className="border-l-2 border-orange pl-4">
+                <div className="text-xl font-black text-orange">{s.val}</div>
+                <div className="text-text-muted text-xs uppercase tracking-wider mt-0.5 leading-tight">{s.label}</div>
               </div>
-              <h1 className="text-3xl md:text-5xl font-bold text-white mb-4 leading-tight">
-                Maçon {ville} — Construction & Rénovation
-              </h1>
-              <p className="text-white/70 text-lg mb-8">{texteIntro}</p>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Services à cette ville */}
+      <section className="bg-navy-light py-14 md:py-16">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <ScrollReveal direction="up">
+            <span className="text-orange text-xs font-bold uppercase tracking-[0.25em] block mb-4">
+              Nos prestations à {ville}
+            </span>
+            <h2 className="text-white font-black text-2xl md:text-3xl uppercase leading-tight tracking-tight mb-8">
+              Services disponibles
+            </h2>
+            <div className="flex flex-wrap gap-3">
+              {SERVICE_LINKS.map((s) => {
+                const isPrimary = servicesPrincipaux.includes(s.label);
+                return (
+                  <Link
+                    key={s.label}
+                    href={s.href}
+                    className={`group flex items-center gap-3 px-5 py-3 transition-all duration-200 border ${
+                      isPrimary
+                        ? "border-orange bg-orange/10"
+                        : "border-white/15 hover:border-orange"
+                    }`}
+                  >
+                    <span className="w-1.5 h-1.5 rounded-full bg-orange shrink-0" />
+                    <span className="text-white/70 group-hover:text-white text-sm font-bold uppercase tracking-wide transition-colors">
+                      {s.label}
+                    </span>
+                    <span className="text-orange group-hover:translate-x-1 transition-transform">
+                      <Arrow />
+                    </span>
+                  </Link>
+                );
+              })}
+            </div>
+          </ScrollReveal>
+        </div>
+      </section>
+
+      {/* Texte intro + local */}
+      <section className="py-16 md:py-20 bg-bg">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="grid lg:grid-cols-2 gap-12 md:gap-16">
+            <ScrollReveal direction="left">
+              <span className="text-orange text-xs font-bold uppercase tracking-[0.25em] block mb-4">
+                Maçonnerie à {ville}
+              </span>
+              <h2 className="text-navy font-black text-2xl md:text-3xl uppercase leading-tight tracking-tight mb-6">
+                Votre maçon local<br />dans le Nord
+              </h2>
+              <p className="text-text-light text-sm leading-relaxed mb-8">{texteIntro}</p>
               {distanceMouchin && (
-                <p className="text-white/40 text-sm mb-6 italic">
-                  {distanceMouchin} de Mouchin (siège OBC Maçonnerie)
+                <p className="text-text-muted text-xs uppercase tracking-widest mb-6">
+                  {distanceMouchin} de notre siège (Mouchin, 59310)
                 </p>
               )}
-              <div className="flex flex-col sm:flex-row gap-4">
-                <Link href="/contact" className="inline-flex items-center justify-center gap-2 bg-orange hover:bg-orange-hover text-white font-bold px-7 py-3.5 rounded-xl transition-colors pulse-glow">
-                  Demander un devis gratuit
-                </Link>
-                <a href={`tel:${phoneRaw}`} className="inline-flex items-center justify-center gap-2 bg-white/10 hover:bg-white/20 text-white font-semibold px-7 py-3.5 rounded-xl transition-colors border border-white/20">
-                  {phone}
-                </a>
+              <Link href="/contact" className="btn btn-outline-dark px-7 py-3.5 text-xs uppercase tracking-widest">
+                <span>Prendre contact</span>
+                <span><Arrow /></span>
+              </Link>
+            </ScrollReveal>
+
+            <ScrollReveal direction="right">
+              <div className="space-y-5">
+                {paragraphes.map((p, i) => (
+                  <p key={i} className="text-text-light text-sm leading-relaxed border-l-2 border-border pl-5">
+                    {p}
+                  </p>
+                ))}
               </div>
             </ScrollReveal>
           </div>
         </div>
       </section>
 
-      {/* Services */}
-      <section className="py-14 bg-bg">
-        <div className="max-w-5xl mx-auto px-4 sm:px-6">
+      {/* Zone communes voisines */}
+      <section className="py-12 bg-stone-bg border-t border-border">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <ScrollReveal direction="up">
-            <h2 className="text-2xl font-bold text-navy mb-6 text-center">
-              Nos services à {ville}
-            </h2>
-          </ScrollReveal>
-          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
-            {services.map((s, i) => (
-              <ScrollReveal key={s.label} direction="up" delay={i * 60}>
-                <Link
-                  href={s.href}
-                  className={`group block bg-bg-white border rounded-xl p-4 text-center transition-all hover:shadow-md ${
-                    servicesPrincipaux.includes(s.label)
-                      ? "border-orange"
-                      : "border-border hover:border-orange"
-                  }`}
-                >
-                  <div className="text-2xl mb-2">{s.icon}</div>
-                  <p className="text-navy font-semibold text-xs group-hover:text-orange transition-colors leading-snug">
-                    {s.label}
-                  </p>
-                </Link>
-              </ScrollReveal>
-            ))}
-          </div>
-        </div>
-      </section>
-
-      {/* Texte SEO local */}
-      <section className="py-14 bg-stone-bg">
-        <div className="max-w-3xl mx-auto px-4 sm:px-6">
-          <ScrollReveal direction="up">
-            <h2 className="text-2xl font-bold text-navy mb-5">
-              OBC Maçonnerie intervient à {ville}
-            </h2>
-            <div className="text-text-light text-sm leading-relaxed space-y-4">
-              {texteLocal.split("\n").map((para, i) => (
-                <p key={i}>{para}</p>
-              ))}
-            </div>
-
-            <div className="mt-8 bg-bg-white border border-border rounded-xl p-5">
-              <div className="flex items-center gap-3">
-                <div className="w-10 h-10 bg-navy rounded-lg flex items-center justify-center shrink-0">
-                  <span className="text-white font-bold text-xs">OBC</span>
-                </div>
-                <div>
-                  <p className="text-navy font-bold text-sm">Benoît Colin — OBC Maçonnerie</p>
-                  <p className="text-text-muted text-xs">{address}</p>
-                  <a href={`tel:${phoneRaw}`} className="text-orange font-bold text-sm hover:underline">
-                    {phone}
-                  </a>
-                </div>
+            <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-6">
+              <div>
+                <span className="text-orange text-xs font-bold uppercase tracking-[0.25em] block mb-2">
+                  Zone d&apos;intervention
+                </span>
+                <h3 className="text-navy font-black text-xl uppercase tracking-tight">
+                  On intervient aussi dans les communes voisines
+                </h3>
+              </div>
+              <div className="flex flex-wrap gap-2">
+                {zones
+                  .filter((z) => z !== ville)
+                  .slice(0, 6)
+                  .map((z) => (
+                    <span
+                      key={z}
+                      className="inline-flex items-center gap-1.5 border border-border text-navy text-xs font-bold px-3 py-1.5 uppercase tracking-wide hover:border-orange hover:text-orange transition-all cursor-default"
+                    >
+                      <span className="w-1 h-1 rounded-full bg-orange shrink-0" />
+                      {z}
+                    </span>
+                  ))}
               </div>
             </div>
           </ScrollReveal>
         </div>
       </section>
 
-      {/* Formulaire */}
-      <section className="py-14 bg-bg">
-        <div className="max-w-xl mx-auto px-4 sm:px-6">
-          <ScrollReveal direction="up">
-            <h2 className="text-2xl font-bold text-navy mb-2 text-center">
-              Votre projet à {ville}
+      {/* Contact split */}
+      <section className="grid lg:grid-cols-2">
+        <div className="bg-navy texture-dark py-16 md:py-20 px-8 md:px-12 lg:px-16 relative overflow-hidden">
+          <div className="hero-diagonal-panel" />
+          <ScrollReveal direction="left">
+            <span className="text-orange text-xs font-bold uppercase tracking-[0.25em] block mb-4">
+              Devis gratuit à {ville}
+            </span>
+            <h2 className="text-white font-black text-2xl uppercase tracking-tight mb-6">
+              Votre projet<br />mérite le meilleur
             </h2>
-            <p className="text-text-light text-sm text-center mb-8">Devis gratuit — Réponse sous 24h</p>
+            <p className="text-white/50 text-sm leading-relaxed mb-8 max-w-sm">
+              Benoît Colin se déplace gratuitement à {ville} pour évaluer votre chantier et vous remettre un devis sous 24h.
+            </p>
+            <a href={`tel:${phoneRaw}`} className="flex items-center gap-3 group mb-6">
+              <div className="w-10 h-10 border border-orange/40 flex items-center justify-center shrink-0 group-hover:border-orange group-hover:bg-orange/10 transition-all">
+                <svg className="w-4 h-4 text-orange" 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>
+              </div>
+              <span className="text-white font-bold text-lg group-hover:text-orange transition-colors">{phone}</span>
+            </a>
+            <div className="space-y-3">
+              {["Devis gratuit & sans engagement", "Déplacement offert", "Réponse sous 24h"].map((item) => (
+                <div key={item} className="flex items-center gap-3">
+                  <div className="w-1.5 h-1.5 rounded-full bg-orange" />
+                  <span className="text-white/60 text-sm">{item}</span>
+                </div>
+              ))}
+            </div>
           </ScrollReveal>
-          <ScrollReveal direction="up" delay={100}>
+        </div>
+        <div className="bg-stone-bg py-16 md:py-20 px-8 md:px-12 lg:px-16">
+          <ScrollReveal direction="right">
             <ContactForm />
           </ScrollReveal>
         </div>