feat: refonte UI éditoriale — toutes les pages secondaires

Contact :
- Redesign complet split dark/light identique à la homepage
- Infos gauche (dark navy) : téléphone animé, email, adresse, zones, stats
- Formulaire droit (stone-bg) avec labels uppercase et champs squarés

Services :
- Liste éditoriale sur dark navy — layout grid 12 cols numéroté
- Keywords en pills squared, arrow animée, border-top orange

Réalisations :
- Filtres squared (suppression rounded-full)
- Cards avec overlay slide-from-bottom rouge brique
- Badge catégorie orange + CTA bottom dark navy

Partenaires :
- Hero dark + diagonal panel
- Bloc stats 2-col avec border-l orange
- Grid 4-col squared, grayscale → couleur au hover
- CTA dark avec texture

ServicePageLayout (composant partagé) :
- Composant réutilisable pour toutes les pages de service
- Hero dark + diagonal + back link
- Stats border-l-2 orange
- Items grid dark avec service-card-dark
- SEO text 2-col
- Contact split dark/light

Pages mises à jour avec ServicePageLayout :
- renovation/page.tsx
- assainissement/page.tsx
- creation-acces/page.tsx
- demolition/page.tsx

construction-maison/page.tsx :
- Redesign complet en standalone avec le même pattern éditorial

https://claude.ai/code/session_01Uec4iHjcPwB1pU41idWEdF

app/assainissement/page.tsx

@@ -1,31 +1,19 @@
 import type { Metadata } from "next";
-import Link from "next/link";
+import ServicePageLayout from "@/components/marketing/ServicePageLayout";
-import Navbar from "@/components/marketing/Navbar";
-import Footer from "@/components/marketing/Footer";
-import ScrollReveal from "@/components/animations/ScrollReveal";
-import ContactForm from "@/components/marketing/ContactForm";
 import { getSiteConfig } from "@/lib/content";
 
 export async function generateMetadata(): Promise<Metadata> {
   const config = await getSiteConfig();
   return {
-
     title: "Assainissement Maison Nord 59 | OBC Maçonnerie",
     description:
       "Création et mise aux normes de systèmes d'assainissement dans le Nord (59). OBC Maçonnerie intervient à Orchies, Douai, Valenciennes et alentours. Devis gratuit.",
-  keywords: [
+    keywords: ["assainissement maison Nord", "assainissement individuel Nord 59", "fosse septique Nord", "mise aux normes assainissement"],
-    "assainissement maison Nord",
-    "assainissement individuel Nord 59",
-    "fosse septique Nord",
-    "mise aux normes assainissement",
-    "assainissement Orchies",
-    "assainissement Douai",
-  ],
     alternates: { canonical: `${config.url}/assainissement` },
   };
 }
 
-const prestations = [
+const items = [
   { icon: "🔍", title: "Diagnostic", desc: "Analyse de votre installation existante et vérification de sa conformité aux normes en vigueur." },
   { icon: "🏗️", title: "Création de fosse", desc: "Installation d'une fosse toutes eaux ou d'une micro-station d'épuration adaptée à votre terrain." },
   { icon: "🌱", title: "Épandage", desc: "Création ou réhabilitation du dispositif d'épandage pour un traitement optimal des eaux usées." },
@@ -38,85 +26,26 @@ export default async function AssainissementPage() {
   const config = await getSiteConfig();
   const { phone, phoneRaw } = config;
   return (
-    <main id="main-content" className="min-h-screen">
+    <ServicePageLayout
-      <Navbar />
+      label="Assainissement"
-
+      title="Assainissement dans le Nord"
-      <section className="bg-navy py-16 md:py-24">
+      subtitle="Mise aux normes, création ou réhabilitation de votre système d'assainissement — OBC Maçonnerie intervient dans les règles de l'art."
-        <div className="max-w-5xl mx-auto px-4 sm:px-6">
+      phone={phone}
-          <div className="max-w-2xl">
+      phoneRaw={phoneRaw}
-            <ScrollReveal direction="up">
+      items={items}
-              <Link href="/services" className="inline-flex items-center gap-1.5 text-white/50 hover:text-white text-sm mb-6 transition-colors">
+      itemsSectionTitle="Nos prestations assainissement"
-                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      seoTitle="Assainissement dans le Nord (59)"
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+      seoText={
-                </svg>
+        <>
-                Tous les services
-              </Link>
-              <span className="text-orange text-sm font-semibold uppercase tracking-widest">Assainissement</span>
-              <h1 className="text-3xl md:text-5xl font-bold text-white mt-2 mb-4">
-                Assainissement dans le Nord
-              </h1>
-              <p className="text-white/70 text-lg mb-8">
-                Mise aux normes, création ou réhabilitation de votre système d&apos;assainissement — OBC Maçonnerie intervient dans les règles de l&apos;art.
-              </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>
-              </div>
-            </ScrollReveal>
-          </div>
-        </div>
-      </section>
-
-      <section className="py-16 md:py-20 bg-bg">
-        <div className="max-w-5xl mx-auto px-4 sm:px-6">
-          <ScrollReveal direction="up">
-            <h2 className="text-2xl md:text-3xl font-bold text-navy mb-10 text-center">Nos prestations assainissement</h2>
-          </ScrollReveal>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {prestations.map((p, i) => (
-              <ScrollReveal key={p.title} direction="up" delay={i * 80}>
-                <div className="bg-bg-white border border-border rounded-2xl p-6 h-full">
-                  <div className="text-3xl mb-3">{p.icon}</div>
-                  <h3 className="text-navy font-bold text-base mb-2">{p.title}</h3>
-                  <p className="text-text-light text-sm leading-relaxed">{p.desc}</p>
-                </div>
-              </ScrollReveal>
-            ))}
-          </div>
-        </div>
-      </section>
-
-      <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-4">Assainissement dans le Nord (59)</h2>
-            <div className="space-y-4 text-text-light text-sm leading-relaxed">
           <p>
             OBC Maçonnerie réalise vos travaux d&apos;<strong className="text-text">assainissement non collectif dans le Nord</strong> — fosse toutes eaux, micro-station, épandage, réhabilitation. Benoît Colin vous accompagne de l&apos;étude de votre terrain jusqu&apos;à la réception des travaux.
           </p>
           <p>
             Que vous ayez besoin d&apos;une <strong className="text-text">mise aux normes suite à un contrôle SPANC</strong>, d&apos;une nouvelle installation pour une construction neuve ou d&apos;une réhabilitation de l&apos;existant, OBC Maçonnerie intervient à Orchies, Douai, Valenciennes, Mouchin et dans toutes les communes avoisinantes.
           </p>
-            </div>
+        </>
-          </ScrollReveal>
+      }
-        </div>
+      contactTitle="Votre projet d'assainissement"
-      </section>
+    />
-
-      <section className="py-16 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 assainissement</h2>
-            <p className="text-text-light text-sm text-center mb-8">Devis gratuit — Réponse sous 24h</p>
-          </ScrollReveal>
-          <ScrollReveal direction="up" delay={100}>
-            <ContactForm />
-          </ScrollReveal>
-        </div>
-      </section>
-
-      <Footer />
-    </main>
   );
 }

app/construction-maison/page.tsx

@@ -9,7 +9,6 @@ import { getSiteConfig } from "@/lib/content";
 export async function generateMetadata(): Promise<Metadata> {
   const config = await getSiteConfig();
   return {
-
     title: "Construction de Maison dans le Nord | OBC Maçonnerie Orchies",
     description:
       "Construction neuve, fondations, ossature bois dans le Nord (59). OBC Maçonnerie vous accompagne de A à Z. Devis gratuit.",
@@ -37,52 +36,64 @@ const etapes = [
 export default async function ConstructionMaisonPage() {
   const config = await getSiteConfig();
   const { phone, phoneRaw } = config;
+
   return (
     <main id="main-content" className="min-h-screen">
       <Navbar />
 
       {/* Hero */}
-      <section className="bg-navy py-16 md:py-24">
+      <section className="bg-navy texture-dark py-16 md:py-24 relative overflow-hidden">
-        <div className="max-w-5xl mx-auto px-4 sm:px-6">
+        <div className="hero-diagonal-panel" />
-          <div className="max-w-2xl">
+        <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-1.5 text-white/50 hover:text-white text-sm mb-6 transition-colors">
+            <Link
-                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              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>
               Tous les services
             </Link>
-              <span className="text-orange text-sm font-semibold uppercase tracking-widest">Gros œuvre</span>
+            <span className="text-orange text-xs font-bold uppercase tracking-[0.25em] block mb-4">
-              <h1 className="text-3xl md:text-5xl font-bold text-white mt-2 mb-4 leading-tight">
+              Gros œuvre
+            </span>
+            <h1 className="text-4xl md:text-6xl font-black text-white uppercase leading-none tracking-tight mb-5 max-w-3xl">
               Construction de maison dans le Nord
             </h1>
-              <p className="text-white/70 text-lg mb-8">
+            <p className="text-white/55 text-base md:text-lg max-w-xl mb-10">
               Benoît Colin, maçon expert à Mouchin, vous accompagne dans la construction de votre maison individuelle — de la première fondation à la remise des clés.
             </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">
+              <Link href="/contact" className="btn btn-fill px-8 py-4 text-xs uppercase tracking-[0.2em]">
-                  Demander un devis gratuit
+                <span>Devis gratuit</span>
+                <span>
+                  <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>
+                </span>
               </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>
+              <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>
-        </div>
       </section>
 
-      {/* Points clés */}
+      {/* Stats */}
-      <section className="py-14 bg-stone-bg">
+      <section className="bg-stone-bg border-b border-border py-10">
-        <div className="max-w-5xl mx-auto px-4 sm:px-6">
+        <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-4">
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
             {[
               { val: "15+", label: "ans d'expérience" },
               { val: "100+", label: "maisons construites" },
               { val: "30km", label: "rayon d'action" },
               { val: "A→Z", label: "accompagnement complet" },
             ].map((s) => (
-              <div key={s.label} className="bg-bg-white border border-border rounded-xl p-5 text-center">
+              <div key={s.label} className="border-l-2 border-orange pl-4">
-                <div className="text-2xl font-bold text-orange">{s.val}</div>
+                <div className="text-2xl font-black text-orange">{s.val}</div>
-                <div className="text-text-light text-sm mt-1">{s.label}</div>
+                <div className="text-text-muted text-xs uppercase tracking-wider mt-0.5">{s.label}</div>
               </div>
             ))}
           </div>
@@ -90,20 +101,23 @@ export default async function ConstructionMaisonPage() {
       </section>
 
       {/* Étapes */}
-      <section className="py-16 md:py-20 bg-bg">
+      <section className="py-16 md:py-20 bg-navy-light">
-        <div className="max-w-5xl mx-auto px-4 sm:px-6">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <ScrollReveal direction="up">
-            <h2 className="text-2xl md:text-3xl font-bold text-navy mb-10 text-center">
+            <span className="text-orange text-xs font-bold uppercase tracking-[0.25em] block mb-4">
-              Comment se déroule votre construction ?
+              Notre méthode
+            </span>
+            <h2 className="text-white font-black text-2xl md:text-4xl uppercase leading-tight tracking-tight mb-12">
+              Comment se déroule<br />votre construction ?
             </h2>
           </ScrollReveal>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-px bg-white/5">
             {etapes.map((e, i) => (
               <ScrollReveal key={e.num} direction="up" delay={i * 80}>
-                <div className="bg-bg-white border border-border rounded-2xl p-6">
+                <div className="service-card-dark bg-white/[0.03] p-7 h-full">
-                  <span className="text-orange font-black text-2xl">{e.num}</span>
+                  <span className="text-orange font-black text-4xl leading-none block mb-4">{e.num}</span>
-                  <h3 className="text-navy font-bold text-base mt-2 mb-2">{e.title}</h3>
+                  <h3 className="text-white font-black text-base uppercase tracking-wide mb-3">{e.title}</h3>
-                  <p className="text-text-light text-sm leading-relaxed">{e.desc}</p>
+                  <p className="text-white/50 text-sm leading-relaxed">{e.desc}</p>
                 </div>
               </ScrollReveal>
             ))}
@@ -112,35 +126,66 @@ export default async function ConstructionMaisonPage() {
       </section>
 
       {/* SEO text */}
-      <section className="py-14 bg-stone-bg">
+      <section className="py-14 bg-stone-bg border-t border-border">
-        <div className="max-w-3xl mx-auto px-4 sm:px-6">
+        <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-4">
+            <div className="grid md:grid-cols-2 gap-12 items-start">
-              Votre maçon constructeur dans le Nord (59)
+              <div>
+                <span className="text-orange text-xs font-bold uppercase tracking-[0.25em] block mb-4">
+                  Notre expertise
+                </span>
+                <h2 className="text-navy font-black text-2xl md:text-3xl uppercase leading-tight tracking-tight mb-6">
+                  Votre maçon constructeur<br />dans le Nord (59)
                 </h2>
+              </div>
               <div className="space-y-4 text-text-light text-sm leading-relaxed">
                 <p>
                   OBC Maçonnerie, dirigé par Benoît Colin, est une entreprise de maçonnerie spécialisée dans la <strong className="text-text">construction de maison individuelle dans le Nord</strong>. Basés à Mouchin (59310), nous intervenons sur Orchies, Douai, Valenciennes, Flines-lès-Raches, Saint-Amand-les-Eaux et toutes les communes dans un rayon de 30 km.
                 </p>
                 <p>
-                Que vous souhaitiez construire une maison en <strong className="text-text">parpaing</strong>, en <strong className="text-text">béton banché</strong> ou en <strong className="text-text">ossature bois</strong>, Benoît vous conseille et adapte chaque solution à votre terrain, votre budget et vos envies. Il ne fait jamais deux fois la même maison.
+                  Que vous souhaitiez construire une maison en <strong className="text-text">parpaing</strong>, en <strong className="text-text">béton banché</strong> ou en <strong className="text-text">ossature bois</strong>, Benoît vous conseille et adapte chaque solution à votre terrain, votre budget et vos envies.
                 </p>
                 <p>
                   Grâce à son réseau de partenaires (électricien, plombier, charpentier, couvreur, menuisier, carreleur, peintre), OBC Maçonnerie coordonne l&apos;ensemble des corps de métier pour vous livrer une maison complète, dans les délais.
                 </p>
               </div>
+            </div>
           </ScrollReveal>
         </div>
       </section>
 
-      {/* Contact form */}
+      {/* Contact split */}
-      <section className="py-16 md:py-20 bg-bg">
+      <section className="grid lg:grid-cols-2">
-        <div className="max-w-xl mx-auto px-4 sm:px-6">
+        <div className="bg-navy texture-dark py-16 md:py-20 px-8 md:px-12 lg:px-16 relative overflow-hidden">
-          <ScrollReveal direction="up">
+          <div className="hero-diagonal-panel" />
-            <h2 className="text-2xl font-bold text-navy mb-2 text-center">Votre projet de construction</h2>
+          <ScrollReveal direction="left">
-            <p className="text-text-light text-sm text-center mb-8">Devis gratuit — Réponse sous 24h</p>
+            <span className="text-orange text-xs font-bold uppercase tracking-[0.25em] block mb-4">
+              Votre projet de construction
+            </span>
+            <h2 className="text-white font-black text-2xl uppercase tracking-tight mb-6">
+              Parlons de votre<br />future maison
+            </h2>
+            <p className="text-white/50 text-sm leading-relaxed mb-8 max-w-sm">
+              Benoît se déplace gratuitement pour évaluer votre terrain et vous remettre un devis détaillé sous 24h.
+            </p>
+            <div className="space-y-4">
+              <div 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">Devis gratuit &amp; déplacement offert</span>
+              </div>
+              <div 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">Réponse sous 24h</span>
+              </div>
+              <div 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">Sans engagement</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>

app/contact/page.tsx

@@ -19,104 +19,124 @@ export default async function ContactPage() {
   const config = await getSiteConfig();
   const { phone, phoneRaw, email, address, zones, zoneDescription } = config;
 
-  const infos = [
-    {
-      icon: "📞",
-      titre: "Téléphone",
-      val: phone,
-      href: `tel:${phoneRaw}`,
-      desc: "Lun–Ven 7h–19h",
-    },
-    {
-      icon: "📍",
-      titre: "Adresse",
-      val: address,
-      href: undefined as string | undefined,
-      desc: "Rayon d'intervention : 30km",
-    },
-    {
-      icon: "📧",
-      titre: "Email",
-      val: email,
-      href: `mailto:${email}`,
-      desc: "Réponse sous 24h",
-    },
-  ];
-
   return (
     <main id="main-content" className="min-h-screen">
       <Navbar />
 
-      <section className="bg-navy py-16 md:py-20">
+      {/* Page hero */}
-        <div className="max-w-4xl mx-auto px-4 sm:px-6 text-center">
+      <section className="bg-navy texture-dark py-16 md:py-20 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">
-            <span className="text-orange text-sm font-semibold uppercase tracking-widest">Devis gratuit</span>
+            <span className="text-orange text-xs font-bold uppercase tracking-[0.25em] block mb-4">
-            <h1 className="text-3xl md:text-5xl font-bold text-white mt-2 mb-4">
+              Devis gratuit — Réponse sous 24h
-              Contactez OBC Maçonnerie
+            </span>
+            <h1 className="text-4xl md:text-6xl font-black text-white uppercase leading-none tracking-tight">
+              Parlons de<br />votre projet
             </h1>
-            <p className="text-white/70 text-lg max-w-xl mx-auto">
-              Benoît se déplace gratuitement pour évaluer votre projet et vous remettre un devis détaillé sous 24h.
-            </p>
           </ScrollReveal>
         </div>
       </section>
 
-      <section className="py-16 md:py-20 bg-bg">
+      {/* Split content */}
-        <div className="max-w-5xl mx-auto px-4 sm:px-6">
+      <section className="grid lg:grid-cols-2">
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-10">
+        {/* Gauche — infos */}
-            {/* Infos + zones */}
+        <div className="bg-navy-light py-16 md:py-20 px-8 md:px-12 lg:px-16">
-            <div>
           <ScrollReveal direction="left">
-                <h2 className="text-xl font-bold text-navy mb-6">Nos coordonnées</h2>
+            <h2 className="text-white font-black text-2xl uppercase tracking-tight mb-8">
-                <div className="space-y-4 mb-8">
+              Nos coordonnées
-                  {infos.map((info) => (
+            </h2>
-                    <div key={info.titre} className="flex items-start gap-4 bg-bg-white border border-border rounded-xl p-4">
+
-                      <span className="text-2xl shrink-0">{info.icon}</span>
+            <div className="space-y-6 mb-10">
+              {/* Téléphone */}
+              <a href={`tel:${phoneRaw}`} className="flex items-center gap-4 group">
+                <div className="w-11 h-11 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-5 h-5 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>
                 <div>
-                        <p className="text-navy font-semibold text-sm">{info.titre}</p>
+                  <p className="text-white/40 text-xs uppercase tracking-widest mb-0.5">Téléphone</p>
-                        {info.href ? (
+                  <p className="text-white font-bold text-xl group-hover:text-orange transition-colors">{phone}</p>
-                          <a href={info.href} className="text-orange font-bold hover:underline text-sm">
+                  <p className="text-white/30 text-xs mt-0.5">Lun–Sam 7h–19h</p>
-                            {info.val}
+                </div>
               </a>
-                        ) : (
+
-                          <p className="text-text-light text-sm">{info.val}</p>
+              {/* Email */}
-                        )}
+              <a href={`mailto:${email}`} className="flex items-center gap-4 group">
-                        <p className="text-text-muted text-xs mt-0.5">{info.desc}</p>
+                <div className="w-11 h-11 border border-white/15 flex items-center justify-center shrink-0 group-hover:border-orange group-hover:bg-orange/10 transition-all">
+                  <svg className="w-5 h-5 text-white/40 group-hover:text-orange transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                  </svg>
+                </div>
+                <div>
+                  <p className="text-white/40 text-xs uppercase tracking-widest mb-0.5">Email</p>
+                  <p className="text-white/80 font-bold text-sm group-hover:text-orange transition-colors">{email}</p>
+                  <p className="text-white/30 text-xs mt-0.5">Réponse sous 24h</p>
+                </div>
+              </a>
+
+              {/* Adresse */}
+              <div className="flex items-start gap-4">
+                <div className="w-11 h-11 border border-white/15 flex items-center justify-center shrink-0">
+                  <svg className="w-5 h-5 text-white/40" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 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={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+                  </svg>
+                </div>
+                <div>
+                  <p className="text-white/40 text-xs uppercase tracking-widest mb-0.5">Siège</p>
+                  <p className="text-white/70 text-sm">{address}</p>
+                  <p className="text-white/30 text-xs mt-0.5">Rayon d&apos;intervention : {zoneDescription}</p>
                 </div>
               </div>
-                  ))}
             </div>
 
-                <h3 className="text-base font-bold text-navy mb-3">Zone d&apos;intervention</h3>
+            {/* Zones */}
-                <div className="flex flex-wrap gap-2 mb-6">
+            <div className="border-t border-white/10 pt-8">
+              <p className="text-white/40 text-xs uppercase tracking-widest mb-4">Zone d&apos;intervention</p>
+              <div className="flex flex-wrap gap-2">
                 {zones.map((z) => (
-                    <span key={z} className="inline-flex items-center gap-1 bg-bg-white border border-border text-navy text-xs font-medium px-3 py-1.5 rounded-full">
+                  <span
-                      <span className="text-orange">📍</span> {z}
+                    key={z}
+                    className="inline-flex items-center gap-1.5 border border-white/15 text-white/60 text-xs font-bold px-3 py-1.5 uppercase tracking-wide"
+                  >
+                    <span className="w-1 h-1 rounded-full bg-orange shrink-0" />
+                    {z}
                   </span>
                 ))}
               </div>
-                <p className="text-text-muted text-xs italic">
+            </div>
-                  Et toutes les communes dans un rayon de {zoneDescription}.
-                </p>
 
-                <div className="mt-8 bg-navy rounded-2xl p-6">
+            {/* Garanties */}
-                  <h3 className="text-white font-bold mb-2">Devis gratuit &amp; sans engagement</h3>
+            <div className="mt-10 grid grid-cols-2 gap-5 border-t border-white/10 pt-8">
-                  <p className="text-white/60 text-sm">
+              {[
-                    Benoît se déplace sur votre chantier pour évaluer votre projet, vous conseiller et vous remettre un devis clair et détaillé. Gratuit et sans engagement.
+                { val: "Gratuit", label: "Devis + déplacement" },
-                  </p>
+                { val: "24h", label: "Délai de réponse" },
+                { val: "15+", label: "Ans d'expérience" },
+                { val: "Sans engagement", label: "Aucune obligation" },
+              ].map((s) => (
+                <div key={s.label}>
+                  <div className="text-xl font-black text-orange">{s.val}</div>
+                  <div className="text-white/35 text-xs uppercase tracking-wider mt-0.5 leading-tight">{s.label}</div>
+                </div>
+              ))}
             </div>
           </ScrollReveal>
         </div>
 
-            {/* Formulaire */}
+        {/* Droite — formulaire */}
-            <div>
+        <div className="bg-stone-bg py-16 md:py-20 px-8 md:px-12 lg:px-16">
           <ScrollReveal direction="right">
-                <h2 className="text-xl font-bold text-navy mb-6">Votre demande de devis</h2>
+            <span className="text-orange text-xs font-bold uppercase tracking-[0.25em] block mb-4">
+              Demande de devis
+            </span>
+            <h2 className="text-navy font-black text-2xl uppercase tracking-tight mb-8">
+              Votre projet
+            </h2>
             <ContactForm />
           </ScrollReveal>
         </div>
-          </div>
-        </div>
       </section>
 
       <Footer />

app/creation-acces/page.tsx

@@ -1,31 +1,19 @@
 import type { Metadata } from "next";
-import Link from "next/link";
+import ServicePageLayout from "@/components/marketing/ServicePageLayout";
-import Navbar from "@/components/marketing/Navbar";
-import Footer from "@/components/marketing/Footer";
-import ScrollReveal from "@/components/animations/ScrollReveal";
-import ContactForm from "@/components/marketing/ContactForm";
 import { getSiteConfig } from "@/lib/content";
 
 export async function generateMetadata(): Promise<Metadata> {
   const config = await getSiteConfig();
   return {
-
     title: "Création d'Accès, Voiries & Entrées | OBC Maçonnerie Nord",
     description:
       "Création d'accès, voiries privées, entrées de propriété et chemins dans le Nord (59). OBC Maçonnerie à Orchies. Devis gratuit.",
-  keywords: [
+    keywords: ["création accès maison Nord", "voirie privée Nord 59", "entrée propriété Nord", "chemin béton Nord"],
-    "création accès maison Nord",
-    "voirie privée Nord 59",
-    "entrée propriété Nord",
-    "chemin béton Nord",
-    "béton imprimé Nord",
-    "création accès Orchies",
-  ],
     alternates: { canonical: `${config.url}/creation-acces` },
   };
 }
 
-const types = [
+const items = [
   { icon: "🚗", title: "Entrées de propriété", desc: "Création d'une entrée soignée en béton, béton imprimé, pavés ou gravier stabilisé — adaptée à votre maison." },
   { icon: "🛤️", title: "Voiries privées", desc: "Aménagement de voiries sur propriété privée, chemin d'accès à un bâtiment agricole ou industriel." },
   { icon: "🌾", title: "Chemins ruraux", desc: "Création ou réfection de chemins en gravier compacté, grave non traitée ou béton désactivé." },
@@ -38,69 +26,26 @@ export default async function CreationAccesPage() {
   const config = await getSiteConfig();
   const { phone, phoneRaw } = config;
   return (
-    <main id="main-content" className="min-h-screen">
+    <ServicePageLayout
-      <Navbar />
+      label="Voiries & accès"
-
+      title="Création d'accès dans le Nord"
-      <section className="bg-navy py-16 md:py-24">
+      subtitle="Voiries, entrées de propriété, chemins — OBC Maçonnerie crée vos accès sur mesure avec les matériaux adaptés à vos besoins."
-        <div className="max-w-5xl mx-auto px-4 sm:px-6">
+      phone={phone}
-          <div className="max-w-2xl">
+      phoneRaw={phoneRaw}
-            <ScrollReveal direction="up">
+      items={items}
-              <Link href="/services" className="inline-flex items-center gap-1.5 text-white/50 hover:text-white text-sm mb-6 transition-colors">
+      itemsSectionTitle="Nos réalisations d'accès"
-                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      seoTitle="Voirie & accès dans le Nord (59)"
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+      seoText={
-                </svg>
+        <>
-                Tous les services
+          <p>
-              </Link>
+            OBC Maçonnerie réalise vos <strong className="text-text">travaux de voirie et création d&apos;accès dans le Nord</strong>. Entrées de propriété en béton imprimé, chemins ruraux en gravier compacté ou voiries privées — Benoît Colin s&apos;adapte à votre terrain et vos envies.
-              <span className="text-orange text-sm font-semibold uppercase tracking-widest">Voiries & accès</span>
-              <h1 className="text-3xl md:text-5xl font-bold text-white mt-2 mb-4">
-                Création d&apos;accès dans le Nord
-              </h1>
-              <p className="text-white/70 text-lg mb-8">
-                Voiries, entrées de propriété, chemins — OBC Maçonnerie crée vos accès sur mesure avec les matériaux adaptés à vos besoins.
           </p>
-              <div className="flex flex-col sm:flex-row gap-4">
+          <p>
-                <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">
+            Chaque projet commence par une étude du terrain pour choisir les matériaux et la technique les mieux adaptés : béton, pavés, gravier, béton désactivé. L&apos;objectif : un accès durable, esthétique et parfaitement drainé.
-                  Demander un devis gratuit
+          </p>
-                </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>
+      }
-              </div>
+      contactTitle="Votre projet d'accès"
-            </ScrollReveal>
+    />
-          </div>
-        </div>
-      </section>
-
-      <section className="py-16 md:py-20 bg-bg">
-        <div className="max-w-5xl mx-auto px-4 sm:px-6">
-          <ScrollReveal direction="up">
-            <h2 className="text-2xl md:text-3xl font-bold text-navy mb-10 text-center">Nos réalisations d&apos;accès</h2>
-          </ScrollReveal>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {types.map((t, i) => (
-              <ScrollReveal key={t.title} direction="up" delay={i * 80}>
-                <div className="bg-bg-white border border-border rounded-2xl p-6 h-full">
-                  <div className="text-3xl mb-3">{t.icon}</div>
-                  <h3 className="text-navy font-bold text-base mb-2">{t.title}</h3>
-                  <p className="text-text-light text-sm leading-relaxed">{t.desc}</p>
-                </div>
-              </ScrollReveal>
-            ))}
-          </div>
-        </div>
-      </section>
-
-      <section className="py-16 bg-stone-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 d&apos;accès</h2>
-            <p className="text-text-light text-sm text-center mb-8">Devis gratuit — Réponse sous 24h</p>
-          </ScrollReveal>
-          <ScrollReveal direction="up" delay={100}>
-            <ContactForm />
-          </ScrollReveal>
-        </div>
-      </section>
-
-      <Footer />
-    </main>
   );
 }

app/demolition/page.tsx

@@ -1,31 +1,19 @@
 import type { Metadata } from "next";
-import Link from "next/link";
+import ServicePageLayout from "@/components/marketing/ServicePageLayout";
-import Navbar from "@/components/marketing/Navbar";
-import Footer from "@/components/marketing/Footer";
-import ScrollReveal from "@/components/animations/ScrollReveal";
-import ContactForm from "@/components/marketing/ContactForm";
 import { getSiteConfig } from "@/lib/content";
 
 export async function generateMetadata(): Promise<Metadata> {
   const config = await getSiteConfig();
   return {
-
     title: "Démolition Maison Nord 59 | OBC Maçonnerie",
     description:
       "Démolition totale ou partielle de maison, murs porteurs, bâtiments dans le Nord (59). OBC Maçonnerie à Orchies. Toutes garanties de sécurité. Devis gratuit.",
-  keywords: [
+    keywords: ["démolition maison Nord 59", "démolition bâtiment Nord", "démolition mur porteur Nord", "démolition partielle Nord"],
-    "démolition maison Nord 59",
-    "démolition bâtiment Nord",
-    "démolition mur porteur Nord",
-    "démolition partielle Nord",
-    "démolition Orchies",
-    "démolition Douai",
-  ],
     alternates: { canonical: `${config.url}/demolition` },
   };
 }
 
-const types = [
+const items = [
   { icon: "🏚️", title: "Démolition totale", desc: "Destruction complète d'un bâtiment résidentiel ou annexe, avec évacuation des gravats et remise en état du terrain." },
   { icon: "🧱", title: "Démolition partielle", desc: "Démolition ciblée d'une partie du bâtiment pour permettre une extension ou une restructuration." },
   { icon: "🏗️", title: "Suppression murs porteurs", desc: "Ouverture de murs porteurs avec pose de poutres et reprises en sous-œuvre pour sécuriser la structure." },
@@ -38,85 +26,26 @@ export default async function DemolitionPage() {
   const config = await getSiteConfig();
   const { phone, phoneRaw } = config;
   return (
-    <main id="main-content" className="min-h-screen">
+    <ServicePageLayout
-      <Navbar />
+      label="Démolition"
-
+      title="Démolition dans le Nord"
-      <section className="bg-navy py-16 md:py-24">
+      subtitle="Démolition totale ou partielle, avec tout le matériel et les garanties de sécurité. OBC Maçonnerie gère votre chantier du début à la fin."
-        <div className="max-w-5xl mx-auto px-4 sm:px-6">
+      phone={phone}
-          <div className="max-w-2xl">
+      phoneRaw={phoneRaw}
-            <ScrollReveal direction="up">
+      items={items}
-              <Link href="/services" className="inline-flex items-center gap-1.5 text-white/50 hover:text-white text-sm mb-6 transition-colors">
+      itemsSectionTitle="Nos prestations de démolition"
-                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      seoTitle="Démolition dans le Nord (59)"
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+      seoText={
-                </svg>
+        <>
-                Tous les services
+          <p>
-              </Link>
+            OBC Maçonnerie intervient pour toutes vos <strong className="text-text">opérations de démolition dans le Nord</strong>. Qu&apos;il s&apos;agisse de détruire un bâtiment entier, d&apos;ouvrir un mur porteur ou de curer l&apos;intérieur avant rénovation, Benoît Colin prend en charge votre chantier avec rigueur.
-              <span className="text-orange text-sm font-semibold uppercase tracking-widest">Démolition</span>
-              <h1 className="text-3xl md:text-5xl font-bold text-white mt-2 mb-4">
-                Démolition dans le Nord
-              </h1>
-              <p className="text-white/70 text-lg mb-8">
-                Démolition totale ou partielle, avec tout le matériel et les garanties de sécurité. OBC Maçonnerie gère votre chantier du début à la fin.
           </p>
-              <div className="flex flex-col sm:flex-row gap-4">
+          <p>
-                <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">
+            Avant toute démolition, OBC Maçonnerie vérifie la présence éventuelle d&apos;amiante, de plomb ou d&apos;autres matériaux dangereux, et fait appel aux spécialistes agréés si nécessaire. <strong className="text-text">La sécurité du chantier et de ses riverains est une priorité absolue.</strong>
-                  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>
-              </div>
-            </ScrollReveal>
-          </div>
-        </div>
-      </section>
-
-      <section className="py-16 md:py-20 bg-bg">
-        <div className="max-w-5xl mx-auto px-4 sm:px-6">
-          <ScrollReveal direction="up">
-            <h2 className="text-2xl md:text-3xl font-bold text-navy mb-10 text-center">Nos prestations de démolition</h2>
-          </ScrollReveal>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {types.map((t, i) => (
-              <ScrollReveal key={t.title} direction="up" delay={i * 80}>
-                <div className="bg-bg-white border border-border rounded-2xl p-6 h-full">
-                  <div className="text-3xl mb-3">{t.icon}</div>
-                  <h3 className="text-navy font-bold text-base mb-2">{t.title}</h3>
-                  <p className="text-text-light text-sm leading-relaxed">{t.desc}</p>
-                </div>
-              </ScrollReveal>
-            ))}
-          </div>
-        </div>
-      </section>
-
-      <section className="py-14 bg-stone-bg">
-        <div className="max-w-3xl mx-auto px-4 sm:px-6">
-          <ScrollReveal direction="up">
-            <div className="bg-bg-white border border-border rounded-2xl p-6 flex items-start gap-4">
-              <span className="text-3xl">⚠️</span>
-              <div>
-                <h3 className="text-navy font-bold mb-1">Démolition en toute sécurité</h3>
-                <p className="text-text-light text-sm leading-relaxed">
-                  Avant toute démolition, OBC Maçonnerie vérifie la présence éventuelle d&apos;amiante, de plomb ou d&apos;autres matériaux dangereux, et fait appel aux spécialistes agréés si nécessaire. La sécurité du chantier et de ses riverains est une priorité absolue.
           </p>
-              </div>
+        </>
-            </div>
+      }
-          </ScrollReveal>
+      contactTitle="Votre projet de démolition"
-        </div>
+    />
-      </section>
-
-      <section className="py-16 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 de démolition</h2>
-            <p className="text-text-light text-sm text-center mb-8">Devis gratuit — Réponse sous 24h</p>
-          </ScrollReveal>
-          <ScrollReveal direction="up" delay={100}>
-            <ContactForm />
-          </ScrollReveal>
-        </div>
-      </section>
-
-      <Footer />
-    </main>
   );
 }

app/partenaires/page.tsx

@@ -22,39 +22,78 @@ export default async function PartenairesPage() {
     <main id="main-content" className="min-h-screen">
       <Navbar />
 
-      <section className="bg-navy py-16 md:py-20">
+      {/* Hero */}
-        <div className="max-w-4xl mx-auto px-4 sm:px-6 text-center">
+      <section className="bg-navy texture-dark py-16 md:py-20 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">
-            <span className="text-orange text-sm font-semibold uppercase tracking-widest">Notre force collective</span>
+            <span className="text-orange text-xs font-bold uppercase tracking-[0.25em] block mb-4">
-            <h1 className="text-3xl md:text-5xl font-bold text-white mt-2 mb-4">
+              Un réseau de confiance
-              Notre réseau de partenaires
+            </span>
+            <h1 className="text-4xl md:text-6xl font-black text-white uppercase leading-none tracking-tight">
+              Nos<br />partenaires
             </h1>
-            <p className="text-white/70 text-lg max-w-2xl mx-auto">
+            <p className="text-white/50 text-base mt-5 max-w-2xl">
-              Seul on va vite, ensemble on va plus loin. Grâce à notre réseau d&apos;artisans de confiance, OBC Maçonnerie coordonne l&apos;ensemble des corps de métier pour que votre maison prenne forme de A à Z.
+              Seul on va vite, ensemble on va plus loin. Benoît coordonne un réseau d&apos;artisans sélectionnés pour que votre maison prenne forme de A à Z.
             </p>
           </ScrollReveal>
         </div>
       </section>
 
-      <section className="py-16 md:py-20 bg-bg">
+      {/* Message interlocuteur unique */}
-        <div className="max-w-5xl mx-auto px-4 sm:px-6">
+      <section className="bg-stone-bg border-b border-border py-12 md:py-16">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <ScrollReveal direction="up">
-            <div className="bg-stone-bg border border-border rounded-2xl p-6 md:p-8 mb-12 text-center">
+            <div className="grid md:grid-cols-2 gap-8 md:gap-16 items-center">
-              <h2 className="text-xl md:text-2xl font-bold text-navy mb-3">
+              <div>
-                Un seul interlocuteur pour tout votre projet
+                <span className="text-orange text-xs font-bold uppercase tracking-[0.25em] block mb-4">
+                  Notre approche
+                </span>
+                <h2 className="text-navy font-black text-2xl md:text-3xl uppercase leading-tight tracking-tight mb-4">
+                  Un seul interlocuteur<br />pour tout votre projet
                 </h2>
-              <p className="text-text-light text-sm leading-relaxed max-w-xl mx-auto">
+                <p className="text-text-light text-sm leading-relaxed">
-                Benoît Colin sélectionne et coordonne des artisans partenaires avec lesquels il travaille depuis des années. Vous n&apos;avez qu&apos;un seul contact — lui — pour piloter l&apos;intégralité de votre chantier.
+                  Benoît Colin sélectionne et coordonne des artisans avec lesquels il travaille depuis des années. Vous n&apos;avez qu&apos;un seul contact pour piloter l&apos;intégralité de votre chantier — dans les délais et le budget convenus.
                 </p>
               </div>
+              <div className="grid grid-cols-2 gap-4">
+                {[
+                  { val: "10+", label: "Corps de métier" },
+                  { val: "15+", label: "Ans de partenariat" },
+                  { val: "100%", label: "Artisans qualifiés" },
+                  { val: "1 seul", label: "Interlocuteur" },
+                ].map((s) => (
+                  <div key={s.label} className="border-l-2 border-orange pl-4">
+                    <div className="text-2xl font-black text-orange">{s.val}</div>
+                    <div className="text-text-muted text-xs uppercase tracking-wider mt-0.5">{s.label}</div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </ScrollReveal>
+        </div>
+      </section>
+
+      {/* Grille partenaires */}
+      <section className="py-16 md:py-20 bg-bg">
+        <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-3">
+              Corps de métier
+            </span>
+            <h2 className="text-navy font-black text-2xl md:text-3xl uppercase tracking-tight mb-10">
+              Nos domaines d&apos;expertise
+            </h2>
           </ScrollReveal>
 
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
             {partenaires.map((p, i) => (
-              <ScrollReveal key={p.label} direction="up" delay={i * 70}>
+              <ScrollReveal key={p.label} direction="up" delay={i * 60}>
-                <div className="bg-bg-white border border-border rounded-2xl p-5 text-center h-full hover:border-orange hover:shadow-md transition-all">
+                <div className="group bg-bg-white border border-border hover:border-orange p-6 h-full transition-all duration-200 cursor-default">
-                  <div className="text-4xl mb-3">{p.icon}</div>
+                  <div className="text-3xl mb-4 grayscale group-hover:grayscale-0 transition-all">{p.icon}</div>
-                  <h3 className="text-navy font-bold text-base mb-2">{p.label}</h3>
+                  <h3 className="text-navy font-black text-base uppercase tracking-wide mb-2 group-hover:text-orange transition-colors">
+                    {p.label}
+                  </h3>
                   <p className="text-text-light text-xs leading-relaxed">{p.desc}</p>
                 </div>
               </ScrollReveal>
@@ -63,20 +102,25 @@ export default async function PartenairesPage() {
         </div>
       </section>
 
-      <section className="py-14 bg-navy">
+      {/* CTA dark */}
-        <div className="max-w-3xl mx-auto px-4 sm:px-6 text-center">
+      <section className="bg-navy texture-dark py-16 md:py-20 relative overflow-hidden">
+        <div className="hero-diagonal-panel" />
+        <div className="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
           <ScrollReveal direction="up">
-            <h2 className="text-2xl md:text-3xl font-bold text-white mb-4">
+            <span className="text-orange text-xs font-bold uppercase tracking-[0.25em] block mb-4">
-              Un projet de A à Z
+              Projet de A à Z
+            </span>
+            <h2 className="text-white font-black text-3xl md:text-4xl uppercase leading-tight tracking-tight mb-8">
+              Que vous construisiez ou rénowiez,<br />
+              OBC orchestre chaque corps de métier
             </h2>
-            <p className="text-white/70 mb-8 max-w-xl mx-auto">
+            <Link href="/contact" className="btn btn-fill px-8 py-4 text-xs uppercase tracking-[0.2em]">
-              Que vous construisiez une maison neuve ou rénoviez l&apos;existant, OBC Maçonnerie orchestre chaque corps de métier dans le bon ordre, au bon moment.
+              <span>Parler de mon projet à Benoît</span>
-            </p>
+              <span>
-            <Link
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              href="/contact"
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
-              className="inline-flex items-center gap-2 bg-orange hover:bg-orange-hover text-white font-bold px-8 py-4 rounded-xl transition-colors"
+                </svg>
-            >
+              </span>
-              Parler de mon projet à Benoît
             </Link>
           </ScrollReveal>
         </div>

app/realisations/page.tsx

@@ -25,29 +25,35 @@ export default async function RealisationsPage() {
     <main id="main-content" className="min-h-screen">
       <Navbar />
 
-      <section className="bg-navy py-16 md:py-20">
+      {/* Hero */}
-        <div className="max-w-4xl mx-auto px-4 sm:px-6 text-center">
+      <section className="bg-navy texture-dark py-16 md:py-20 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">
-            <span className="text-orange text-sm font-semibold uppercase tracking-widest">Portfolio</span>
+            <span className="text-orange text-xs font-bold uppercase tracking-[0.25em] block mb-4">
-            <h1 className="text-3xl md:text-5xl font-bold text-white mt-2 mb-4">Nos réalisations</h1>
+              Portfolio — Chantiers Nord (59)
-            <p className="text-white/70 text-lg max-w-xl mx-auto">
+            </span>
+            <h1 className="text-4xl md:text-6xl font-black text-white uppercase leading-none tracking-tight">
+              Nos<br />réalisations
+            </h1>
+            <p className="text-white/50 text-base mt-5 max-w-xl">
               Chaque chantier est unique. Découvrez quelques-unes de nos réalisations dans le Nord.
             </p>
           </ScrollReveal>
         </div>
       </section>
 
-      {/* Filtres catégories */}
+      {/* Filtres */}
-      <section className="py-8 bg-bg border-b border-border">
+      <section className="bg-bg border-b border-border py-6">
-        <div className="max-w-6xl mx-auto px-4 sm:px-6">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex flex-wrap gap-2 justify-center">
+          <div className="flex flex-wrap gap-2">
             {cats.map((cat) => (
               <span
                 key={cat}
-                className={`px-4 py-2 rounded-full text-sm font-medium cursor-default ${
+                className={`text-xs font-bold uppercase tracking-wider px-4 py-2 cursor-default transition-colors ${
                   cat === "Tous"
                     ? "bg-navy text-white"
-                    : "bg-bg-white border border-border text-text-light"
+                    : "bg-bg-white border border-border text-text-light hover:border-orange hover:text-orange"
                 }`}
               >
                 {cat}
@@ -59,54 +65,58 @@ export default async function RealisationsPage() {
 
       {/* Galerie */}
       <section className="py-16 md:py-20 bg-bg">
-        <div className="max-w-6xl mx-auto px-4 sm:px-6">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            {realisations.map((r, i) => (
+            {realisations.map((r, i) => {
+              const bgColors = ["bg-navy", "bg-stone", "bg-navy-light", "bg-stone", "bg-navy", "bg-navy-light"];
+              return (
                 <ScrollReveal key={r.title} direction="up" delay={i * 80}>
-                <div className="bg-bg-white border border-border rounded-2xl overflow-hidden hover:shadow-lg transition-all group card-hover">
+                  <div className="realisation-card relative overflow-hidden aspect-[4/3] group cursor-pointer">
-                  <div className={`${r.color} h-48 flex items-center justify-center relative`}>
+                    {/* Fond */}
-                    <span className="text-white/10 text-8xl font-black">{i + 1}</span>
+                    <div className={`${bgColors[i % bgColors.length]} w-full h-full flex items-center justify-center`}>
-                    <div className="absolute top-3 left-3">
+                      <span className="text-white/8 font-black text-9xl select-none">0{i + 1}</span>
-                      <span className="bg-white/20 text-white text-xs font-semibold px-2.5 py-1 rounded-full">
+                    </div>
+
+                    {/* Badge catégorie */}
+                    <div className="absolute top-4 left-4 z-10">
+                      <span className="bg-orange text-white text-xs font-bold px-3 py-1 uppercase tracking-wider">
                         {r.categorie}
                       </span>
                     </div>
+
+                    {/* Infos au repos */}
+                    <div className="absolute bottom-0 left-0 right-0 p-5 bg-gradient-to-t from-black/70 to-transparent group-hover:opacity-0 transition-opacity duration-300">
+                      <span className="text-white/50 text-xs uppercase tracking-widest block mb-1">{r.ville}</span>
+                      <h3 className="text-white font-black text-sm uppercase tracking-wide">{r.title}</h3>
                     </div>
-                  <div className="p-5">
+
-                    <h3 className="text-navy font-bold text-base mb-2 group-hover:text-orange transition-colors">
+                    {/* Overlay hover */}
-                      {r.title}
+                    <div className="realisation-overlay absolute inset-0 bg-orange flex flex-col justify-end p-6">
-                    </h3>
+                      <span className="text-white/60 text-xs uppercase tracking-[0.2em] mb-2">{r.ville}</span>
-                    <p className="text-text-light text-sm leading-relaxed mb-3">{r.description}</p>
+                      <h3 className="text-white font-black text-lg uppercase tracking-tight mb-2">{r.title}</h3>
-                    <div className="flex items-center gap-1 text-text-muted text-xs">
+                      <p className="text-white/75 text-sm leading-relaxed">{r.description}</p>
-                      <span>📍</span>
-                      <span>{r.ville}</span>
-                    </div>
                     </div>
                   </div>
                 </ScrollReveal>
-            ))}
+              );
+            })}
           </div>
 
+          {/* CTA bottom */}
           <ScrollReveal direction="up" delay={200}>
-            <div className="mt-14 bg-stone-bg border border-border rounded-2xl p-8 text-center">
+            <div className="mt-16 bg-navy py-12 px-8 md:px-12 text-center">
-              <h2 className="text-xl font-bold text-navy mb-2">
+              <span className="text-orange text-xs font-bold uppercase tracking-[0.25em] block mb-3">
-                Vous avez un projet similaire ?
+                Un projet similaire ?
+              </span>
+              <h2 className="text-white font-black text-2xl md:text-3xl uppercase tracking-tight mb-6">
+                Benoît se déplace gratuitement<br />pour évaluer votre chantier
               </h2>
-              <p className="text-text-light text-sm mb-6">
-                Benoît se déplace gratuitement pour évaluer votre chantier et vous remettre un devis.
-              </p>
               <div className="flex flex-col sm:flex-row gap-4 justify-center">
-                <Link
+                <Link href="/contact" className="btn btn-fill px-8 py-4 text-xs uppercase tracking-[0.2em]">
-                  href="/contact"
+                  <span>Demander un devis gratuit</span>
-                  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"
-                >
-                  Demander un devis gratuit
                 </Link>
-                <a
+                <a href={`tel:${phoneRaw}`} className="btn btn-outline-light px-8 py-4 text-xs uppercase tracking-[0.2em]">
-                  href={`tel:${phoneRaw}`}
+                  <span>{phone}</span>
-                  className="inline-flex items-center justify-center gap-2 border-2 border-navy text-navy hover:bg-navy hover:text-white font-bold px-7 py-3.5 rounded-xl transition-colors"
-                >
-                  {phone}
                 </a>
               </div>
             </div>

app/renovation/page.tsx

@@ -1,31 +1,19 @@
 import type { Metadata } from "next";
-import Link from "next/link";
+import ServicePageLayout from "@/components/marketing/ServicePageLayout";
-import Navbar from "@/components/marketing/Navbar";
-import Footer from "@/components/marketing/Footer";
-import ScrollReveal from "@/components/animations/ScrollReveal";
-import ContactForm from "@/components/marketing/ContactForm";
 import { getSiteConfig } from "@/lib/content";
 
 export async function generateMetadata(): Promise<Metadata> {
   const config = await getSiteConfig();
   return {
-
     title: "Rénovation Maison & Appartement Nord 59 | OBC Maçonnerie",
     description:
       "Rénovation complète ou partielle de maison et appartement dans le Nord. Benoît Colin vous conseille et adapte chaque projet. Devis gratuit.",
-  keywords: [
+    keywords: ["rénovation maison Nord 59", "rénovation appartement Nord", "maçon rénovation Douai", "maçon rénovation Valenciennes"],
-    "rénovation maison Nord 59",
-    "rénovation appartement Nord",
-    "maçon rénovation Douai",
-    "maçon rénovation Valenciennes",
-    "rénovation maison Orchies",
-    "travaux rénovation Nord",
-  ],
     alternates: { canonical: `${config.url}/renovation` },
   };
 }
 
-const typesTravaux = [
+const items = [
   { icon: "🏚️", title: "Rénovation complète", desc: "Restructuration totale d'une maison ancienne, de la démolition des cloisons existantes à la pose des revêtements." },
   { icon: "🧱", title: "Maçonnerie intérieure", desc: "Création ou suppression de cloisons, doublages, cages d'escalier, adaptation de plans d'architecte." },
   { icon: "🏗️", title: "Extension", desc: "Agrandissement de votre maison par extension latérale ou surélévation, en parfaite continuité avec l'existant." },
@@ -38,92 +26,29 @@ export default async function RenovationPage() {
   const config = await getSiteConfig();
   const { phone, phoneRaw } = config;
   return (
-    <main id="main-content" className="min-h-screen">
+    <ServicePageLayout
-      <Navbar />
+      label="Rénovation"
-
+      title="Rénovation maison & appartement dans le Nord"
-      <section className="bg-navy py-16 md:py-24">
+      subtitle="Chaque rénovation est unique. Benoît Colin s'adapte à votre projet, votre budget et vos envies pour transformer votre logement."
-        <div className="max-w-5xl mx-auto px-4 sm:px-6">
+      phone={phone}
-          <div className="max-w-2xl">
+      phoneRaw={phoneRaw}
-            <ScrollReveal direction="up">
+      items={items}
-              <Link href="/services" className="inline-flex items-center gap-1.5 text-white/50 hover:text-white text-sm mb-6 transition-colors">
+      itemsSectionTitle="Nos spécialités en rénovation"
-                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      seoTitle="Maçon rénovation dans le Nord (59)"
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+      seoText={
-                </svg>
+        <>
-                Tous les services
-              </Link>
-              <span className="text-orange text-sm font-semibold uppercase tracking-widest">Rénovation</span>
-              <h1 className="text-3xl md:text-5xl font-bold text-white mt-2 mb-4">
-                Rénovation maison & appartement dans le Nord
-              </h1>
-              <p className="text-white/70 text-lg mb-8">
-                Chaque rénovation est unique. Benoît Colin s&apos;adapte à votre projet, votre budget et vos envies pour transformer votre logement.
-              </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>
-              </div>
-            </ScrollReveal>
-          </div>
-        </div>
-      </section>
-
-      <section className="py-16 md:py-20 bg-bg">
-        <div className="max-w-5xl mx-auto px-4 sm:px-6">
-          <ScrollReveal direction="up">
-            <h2 className="text-2xl md:text-3xl font-bold text-navy mb-10 text-center">
-              Nos spécialités en rénovation
-            </h2>
-          </ScrollReveal>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {typesTravaux.map((t, i) => (
-              <ScrollReveal key={t.title} direction="up" delay={i * 80}>
-                <div className="bg-bg-white border border-border rounded-2xl p-6 h-full">
-                  <div className="text-3xl mb-3">{t.icon}</div>
-                  <h3 className="text-navy font-bold text-base mb-2">{t.title}</h3>
-                  <p className="text-text-light text-sm leading-relaxed">{t.desc}</p>
-                </div>
-              </ScrollReveal>
-            ))}
-          </div>
-        </div>
-      </section>
-
-      <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-4">
-              Maçon rénovation dans le Nord (59)
-            </h2>
-            <div className="space-y-4 text-text-light text-sm leading-relaxed">
           <p>
-                OBC Maçonnerie intervient pour tous vos travaux de <strong className="text-text">rénovation dans le Nord</strong>. Que vous soyez à Orchies, Douai, Valenciennes ou dans les communes environnantes, Benoît Colin se déplace pour évaluer votre projet et vous proposer les meilleures solutions.
+            OBC Maçonnerie intervient pour tous vos travaux de <strong className="text-text">rénovation dans le Nord</strong>. Que vous soyez à Orchies, Douai, Valenciennes ou dans les communes environnantes, Benoît Colin se déplace pour évaluer votre projet.
           </p>
           <p>
-                Sa passion : adapter les espaces. Modifier une cage d&apos;escalier pour créer un hall plus lumineux, abattre une cloison pour ouvrir un salon, adapter un plan pour coller à votre mode de vie — Benoît réfléchit avec vous et vous éclaire dans vos décisions.
+            Sa passion : adapter les espaces. Modifier une cage d&apos;escalier, abattre une cloison, adapter un plan pour coller à votre mode de vie — Benoît réfléchit avec vous et vous éclaire dans vos décisions.
           </p>
           <p>
             Grâce à son réseau de partenaires, il coordonne aussi les corps de métier complémentaires (électricité, plomberie, carrelage, peinture) pour une rénovation complète avec un seul interlocuteur.
           </p>
-            </div>
+        </>
-          </ScrollReveal>
+      }
-        </div>
+      contactTitle="Votre projet de rénovation"
-      </section>
+    />
-
-      <section className="py-16 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 de rénovation</h2>
-            <p className="text-text-light text-sm text-center mb-8">Devis gratuit — Réponse sous 24h</p>
-          </ScrollReveal>
-          <ScrollReveal direction="up" delay={100}>
-            <ContactForm />
-          </ScrollReveal>
-        </div>
-      </section>
-
-      <Footer />
-    </main>
   );
 }

app/services/page.tsx

@@ -12,6 +12,14 @@ export const metadata: Metadata = {
   alternates: { canonical: "https://obc-maconnerie.fr/services" },
 };
 
+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>
+  );
+}
+
 export default async function ServicesPage() {
   const [services, config] = await Promise.all([getServices(), getSiteConfig()]);
   const { phone, phoneRaw } = config;
@@ -20,66 +28,105 @@ export default async function ServicesPage() {
     <main id="main-content" className="min-h-screen">
       <Navbar />
 
-      <section className="bg-navy py-16 md:py-20">
+      {/* Hero */}
-        <div className="max-w-4xl mx-auto px-4 sm:px-6 text-center">
+      <section className="bg-navy texture-dark py-16 md:py-20 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">
-            <span className="text-orange text-sm font-semibold uppercase tracking-widest">OBC Maçonnerie</span>
+            <span className="text-orange text-xs font-bold uppercase tracking-[0.25em] block mb-4">
-            <h1 className="text-3xl md:text-5xl font-bold text-white mt-2 mb-4">Nos services de maçonnerie</h1>
+              OBC Maçonnerie — Nord (59)
-            <p className="text-white/70 text-lg max-w-xl mx-auto">
+            </span>
-              Construction, rénovation, assainissement et gros œuvre dans le Nord — Benoît Colin vous accompagne de A à Z.
+            <h1 className="text-4xl md:text-6xl font-black text-white uppercase leading-none tracking-tight">
+              Nos services<br />de maçonnerie
+            </h1>
+            <p className="text-white/50 text-base mt-5 max-w-xl">
+              Construction, rénovation, assainissement et gros œuvre — Benoît Colin vous accompagne de A à Z.
             </p>
           </ScrollReveal>
         </div>
       </section>
 
-      <section className="py-16 md:py-20 bg-bg">
+      {/* Services list — dark editorial */}
-        <div className="max-w-5xl mx-auto px-4 sm:px-6 space-y-8">
+      <section className="bg-navy-light py-16 md:py-20">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="space-y-px">
             {services.map((s, i) => {
               const href = s.slug === "conseil" ? "/contact" : `/${s.slug}`;
               return (
                 <ScrollReveal key={s.slug} direction="up" delay={i * 60}>
-                <div className="bg-bg-white border border-border rounded-2xl p-6 md:p-8 flex flex-col md:flex-row gap-6">
+                  <div className="group bg-white/[0.02] border-t border-white/8 hover:bg-white/[0.05] transition-all duration-300">
-                  <div className="text-5xl shrink-0">{s.icon}</div>
+                    <div className="max-w-7xl mx-auto px-0 py-8 grid md:grid-cols-12 gap-6 items-start">
-                  <div className="flex-1">
+
-                    <h2 className="text-xl font-bold text-navy mb-2">{s.title}</h2>
+                      {/* Numéro + icône */}
-                    <p className="text-text-light text-sm leading-relaxed mb-4">{s.longDescription}</p>
+                      <div className="md:col-span-2 flex items-center gap-4 md:flex-col md:items-start md:gap-2">
-                    <div className="flex flex-wrap gap-2 mb-5">
+                        <span className="text-white/15 font-black text-3xl md:text-4xl leading-none">
+                          0{i + 1}
+                        </span>
+                        <span className="text-2xl">{s.icon}</span>
+                      </div>
+
+                      {/* Titre + description */}
+                      <div className="md:col-span-7">
+                        <h2 className="text-white font-black text-xl md:text-2xl uppercase tracking-tight mb-3 group-hover:text-orange transition-colors">
+                          {s.title}
+                        </h2>
+                        <p className="text-white/50 text-sm leading-relaxed mb-4">
+                          {s.longDescription}
+                        </p>
+                        <div className="flex flex-wrap gap-2">
                           {s.keywords.map((k) => (
-                        <span key={k} className="bg-bg-muted text-text-light text-xs font-medium px-3 py-1 rounded-full">
+                            <span
+                              key={k}
+                              className="border border-white/10 text-white/35 text-xs font-bold px-3 py-1 uppercase tracking-wide"
+                            >
                               {k}
                             </span>
                           ))}
                         </div>
+                      </div>
+
+                      {/* CTA */}
+                      <div className="md:col-span-3 flex md:justify-end md:pt-1">
                         <Link
                           href={href}
-                      className="inline-flex items-center gap-1.5 text-orange font-semibold text-sm hover:underline"
+                          className="btn-arrow text-orange text-xs uppercase tracking-widest"
                         >
                           En savoir plus
-                      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <span className="arrow-icon"><Arrow /></span>
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
-                      </svg>
                         </Link>
                       </div>
                     </div>
+                  </div>
                 </ScrollReveal>
               );
             })}
           </div>
+        </div>
       </section>
 
-      <section className="py-16 bg-stone-bg">
+      {/* CTA band */}
-        <div className="max-w-2xl mx-auto px-4 text-center">
+      <section className="bg-orange py-16 md:py-20 relative overflow-hidden">
+        <div className="absolute inset-0 opacity-5" style={{
+          backgroundImage: "repeating-linear-gradient(45deg, #fff 0px, #fff 1px, transparent 1px, transparent 50%)",
+          backgroundSize: "20px 20px"
+        }} />
+        <div className="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
           <ScrollReveal direction="up">
-            <h2 className="text-2xl md:text-3xl font-bold text-navy mb-4">Vous avez un projet ? Parlons-en.</h2>
+            <h2 className="text-white font-black text-3xl md:text-4xl uppercase leading-tight tracking-tight mb-8">
-            <p className="text-text-light mb-6">
+              Vous avez un projet ?<br />
-              Benoît se déplace gratuitement pour évaluer votre projet et vous remettre un devis détaillé.
+              Parlons-en.
-            </p>
+            </h2>
             <div className="flex flex-col sm:flex-row gap-4 justify-center">
-              <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">
+              <Link href="/contact" className="btn btn-fill-white px-8 py-4 text-xs uppercase tracking-[0.2em]">
-                Demander un devis gratuit
+                <span>Devis gratuit</span>
+                <span>
+                  <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>
+                </span>
               </Link>
-              <a href={`tel:${phoneRaw}`} className="inline-flex items-center justify-center gap-2 border-2 border-navy text-navy hover:bg-navy hover:text-white font-bold px-7 py-3.5 rounded-xl transition-colors">
+              <a href={`tel:${phoneRaw}`} className="btn btn-outline-light px-8 py-4 text-xs uppercase tracking-[0.2em]">
-                {phone}
+                <span>{phone}</span>
               </a>
             </div>
           </ScrollReveal>

components/marketing/ServicePageLayout.tsx

@@ -0,0 +1,191 @@
+import Link from "next/link";
+import Navbar from "@/components/marketing/Navbar";
+import Footer from "@/components/marketing/Footer";
+import ScrollReveal from "@/components/animations/ScrollReveal";
+import ContactForm from "@/components/marketing/ContactForm";
+
+interface ServiceItem {
+  icon: string;
+  title: string;
+  desc: string;
+}
+
+interface Stat {
+  val: string;
+  label: string;
+}
+
+interface Props {
+  label: string;
+  title: string;
+  subtitle: string;
+  phone: string;
+  phoneRaw: string;
+  items: ServiceItem[];
+  itemsSectionTitle: string;
+  stats?: Stat[];
+  seoTitle: string;
+  seoText: React.ReactNode;
+  contactTitle?: string;
+}
+
+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>
+  );
+}
+
+export default function ServicePageLayout({
+  label,
+  title,
+  subtitle,
+  phone,
+  phoneRaw,
+  items,
+  itemsSectionTitle,
+  stats,
+  seoTitle,
+  seoText,
+  contactTitle,
+}: Props) {
+  return (
+    <main id="main-content" className="min-h-screen">
+      <Navbar />
+
+      {/* Hero */}
+      <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>
+              Tous les services
+            </Link>
+            <span className="text-orange text-xs font-bold uppercase tracking-[0.25em] block mb-4">
+              {label}
+            </span>
+            <h1 className="text-4xl md:text-6xl font-black text-white uppercase leading-none tracking-tight mb-5 max-w-3xl">
+              {title}
+            </h1>
+            <p className="text-white/55 text-base md:text-lg max-w-xl mb-10">{subtitle}</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 */}
+      {stats && stats.length > 0 && (
+        <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">
+              {stats.map((s) => (
+                <div key={s.label} className="border-l-2 border-orange pl-4">
+                  <div className="text-2xl font-black text-orange">{s.val}</div>
+                  <div className="text-text-muted text-xs uppercase tracking-wider mt-0.5">{s.label}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+      )}
+
+      {/* Items grid */}
+      <section className="py-16 md:py-20 bg-navy-light">
+        <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
+            </span>
+            <h2 className="text-white font-black text-2xl md:text-4xl uppercase leading-tight tracking-tight mb-12">
+              {itemsSectionTitle}
+            </h2>
+          </ScrollReveal>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-px bg-white/5">
+            {items.map((item, i) => (
+              <ScrollReveal key={item.title} direction="up" delay={i * 80}>
+                <div className="service-card-dark bg-white/[0.03] p-7 h-full">
+                  <div className="text-3xl mb-4 grayscale">{item.icon}</div>
+                  <h3 className="text-white font-black text-base uppercase tracking-wide mb-3">{item.title}</h3>
+                  <p className="text-white/50 text-sm leading-relaxed">{item.desc}</p>
+                </div>
+              </ScrollReveal>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* SEO text */}
+      <section className="py-14 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">
+            <div className="grid md:grid-cols-2 gap-12 items-start">
+              <div>
+                <span className="text-orange text-xs font-bold uppercase tracking-[0.25em] block mb-4">
+                  Notre expertise
+                </span>
+                <h2 className="text-navy font-black text-2xl md:text-3xl uppercase leading-tight tracking-tight">
+                  {seoTitle}
+                </h2>
+              </div>
+              <div className="space-y-4 text-text-light text-sm leading-relaxed">
+                {seoText}
+              </div>
+            </div>
+          </ScrollReveal>
+        </div>
+      </section>
+
+      {/* 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
+            </span>
+            <h2 className="text-white font-black text-2xl uppercase tracking-tight mb-6">
+              {contactTitle ?? "Parlons de votre projet"}
+            </h2>
+            <p className="text-white/50 text-sm leading-relaxed mb-8 max-w-sm">
+              Benoît se déplace gratuitement pour évaluer votre chantier et vous remettre un devis détaillé sous 24h.
+            </p>
+            <div className="space-y-4">
+              {[
+                "Devis gratuit & déplacement offert",
+                "Réponse sous 24h",
+                "Sans engagement",
+              ].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>
+        </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>
+      </section>
+
+      <Footer />
+    </main>
+  );
+}