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/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">
-        <div className="max-w-4xl mx-auto px-4 sm:px-6 text-center">
+      {/* Hero */}
+      <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>
-            <h1 className="text-3xl md:text-5xl font-bold text-white mt-2 mb-4">Nos services de maçonnerie</h1>
-            <p className="text-white/70 text-lg max-w-xl mx-auto">
-              Construction, rénovation, assainissement et gros œuvre dans le Nord — Benoît Colin vous accompagne de A à Z.
+            <span className="text-orange text-xs font-bold uppercase tracking-[0.25em] block mb-4">
+              OBC Maçonnerie — Nord (59)
+            </span>
+            <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">
-        <div className="max-w-5xl mx-auto px-4 sm:px-6 space-y-8">
-          {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="text-5xl shrink-0">{s.icon}</div>
-                  <div className="flex-1">
-                    <h2 className="text-xl font-bold text-navy mb-2">{s.title}</h2>
-                    <p className="text-text-light text-sm leading-relaxed mb-4">{s.longDescription}</p>
-                    <div className="flex flex-wrap gap-2 mb-5">
-                      {s.keywords.map((k) => (
-                        <span key={k} className="bg-bg-muted text-text-light text-xs font-medium px-3 py-1 rounded-full">
-                          {k}
+      {/* Services list — dark editorial */}
+      <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="group bg-white/[0.02] border-t border-white/8 hover:bg-white/[0.05] transition-all duration-300">
+                    <div className="max-w-7xl mx-auto px-0 py-8 grid md:grid-cols-12 gap-6 items-start">
+
+                      {/* Numéro + icône */}
+                      <div className="md:col-span-2 flex items-center gap-4 md:flex-col md:items-start md:gap-2">
+                        <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="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="btn-arrow text-orange text-xs uppercase tracking-widest"
+                        >
+                          En savoir plus
+                          <span className="arrow-icon"><Arrow /></span>
+                        </Link>
+                      </div>
                     </div>
-                    <Link
-                      href={href}
-                      className="inline-flex items-center gap-1.5 text-orange font-semibold text-sm hover:underline"
-                    >
-                      En savoir plus
-                      <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>
-                    </Link>
                   </div>
-                </div>
-              </ScrollReveal>
-            );
-          })}
+                </ScrollReveal>
+              );
+            })}
+          </div>
         </div>
       </section>
 
-      <section className="py-16 bg-stone-bg">
-        <div className="max-w-2xl mx-auto px-4 text-center">
+      {/* CTA band */}
+      <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>
-            <p className="text-text-light mb-6">
-              Benoît se déplace gratuitement pour évaluer votre projet et vous remettre un devis détaillé.
-            </p>
+            <h2 className="text-white font-black text-3xl md:text-4xl uppercase leading-tight tracking-tight mb-8">
+              Vous avez un projet ?<br />
+              Parlons-en.
+            </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">
-                Demander un devis gratuit
+              <Link href="/contact" className="btn btn-fill-white px-8 py-4 text-xs uppercase tracking-[0.2em]">
+                <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">
-                {phone}
+              <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>