feat: refonte UI éditoriale — style Messager + animations boutons

Navbar :
- Style éditorial : liens uppercase tracking-wide, underline slide au hover
- Bouton "Devis gratuit" avec animation slide-fill
- Active state par pathname

Page d'accueil :
- Hero split : texte gauche (clamp typography) + panneau diagonal brique droit
- Services : fond navy-light, cards avec bordure top orange, emoji + arrow animée
- Bande CTA : bg-orange full-width, btn-fill-white + btn-outline-light
- Réalisations : grid avec overlay slide-from-bottom au hover (rouge brique)
- Témoignages : dark navy, cards avec border-top
- Zone intervention : split 2 cols, pills uppercase
- Partenaires : grid 8 cols, grayscale → couleur au hover
- FAQ : split 2 cols, accordion avec icône + rotation
- Contact : split dark/light — infos gauche + formulaire droit

Globals.css :
- Classes .btn, .btn-fill, .btn-outline-dark/light, .btn-fill-white, .btn-arrow
- Animation slide-from-left via ::before pseudo-element
- .realisation-overlay (slide-up), .hero-diagonal-panel (clip-path)
- .nav-link (underline grow), .service-card-dark, .faq-icon

ContactForm + Footer : style éditorial squares, uppercase labels

https://claude.ai/code/session_01Uec4iHjcPwB1pU41idWEdF

components/marketing/ContactForm.tsx

@@ -57,165 +57,95 @@ export default function ContactForm() {
 
   if (status === "success") {
     return (
-      <div className="bg-bg-white border border-success rounded-2xl p-8 text-center">
-        <div className="text-4xl mb-4">✅</div>
-        <h3 className="text-navy font-bold text-xl mb-2">Demande envoyée !</h3>
+      <div className="border-t-4 border-success bg-bg-white p-8 text-center">
+        <div className="w-12 h-12 bg-success/10 flex items-center justify-center mx-auto mb-4">
+          <svg className="w-6 h-6 text-success" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" />
+          </svg>
+        </div>
+        <h3 className="text-navy font-black text-lg uppercase tracking-wide mb-2">Demande envoyée !</h3>
         <p className="text-text-light text-sm">
-          Benoît vous rappellera dans les 24h. En cas d&apos;urgence, appelez directement le{" "}
-          <a href="tel:0674453089" className="text-orange font-bold">
+          Benoît vous rappelle sous 24h. En cas d&apos;urgence :{" "}
+          <a href="tel:0674453089" className="text-orange font-bold hover:underline">
             06 74 45 30 89
           </a>
-          .
         </p>
       </div>
     );
   }
 
+  const ic = "w-full border border-border bg-bg-white px-4 py-3 text-sm text-text focus:outline-none focus:border-orange transition-colors";
+  const lc = "block text-xs font-bold uppercase tracking-widest text-navy mb-2";
+
   return (
-    <form
-      onSubmit={handleSubmit}
-      className="bg-bg-white border border-border rounded-2xl p-6 md:p-8 space-y-4"
-    >
+    <form onSubmit={handleSubmit} className="space-y-5">
       <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
         <div>
-          <label htmlFor="nom" className="block text-sm font-semibold text-navy mb-1">
-            Nom <span className="text-orange">*</span>
-          </label>
-          <input
-            id="nom"
-            name="nom"
-            type="text"
-            value={form.nom}
-            onChange={handleChange}
-            placeholder="Votre nom"
-            className="w-full border border-border rounded-xl px-4 py-3 text-sm text-text focus:outline-none focus:border-orange transition-colors bg-bg"
-            required
-          />
+          <label htmlFor="nom" className={lc}>Nom <span className="text-orange">*</span></label>
+          <input id="nom" name="nom" type="text" value={form.nom} onChange={handleChange}
+            placeholder="Votre nom" className={ic} required />
         </div>
         <div>
-          <label htmlFor="telephone" className="block text-sm font-semibold text-navy mb-1">
-            Téléphone <span className="text-orange">*</span>
-          </label>
-          <input
-            id="telephone"
-            name="telephone"
-            type="tel"
-            value={form.telephone}
-            onChange={handleChange}
-            placeholder="06 XX XX XX XX"
-            className="w-full border border-border rounded-xl px-4 py-3 text-sm text-text focus:outline-none focus:border-orange transition-colors bg-bg"
-            required
-          />
+          <label htmlFor="telephone" className={lc}>Téléphone <span className="text-orange">*</span></label>
+          <input id="telephone" name="telephone" type="tel" value={form.telephone} onChange={handleChange}
+            placeholder="06 XX XX XX XX" className={ic} required />
         </div>
       </div>
 
       <div>
-        <label htmlFor="email" className="block text-sm font-semibold text-navy mb-1">
-          Email
-        </label>
-        <input
-          id="email"
-          name="email"
-          type="email"
-          value={form.email}
-          onChange={handleChange}
-          placeholder="votre@email.fr"
-          className="w-full border border-border rounded-xl px-4 py-3 text-sm text-text focus:outline-none focus:border-orange transition-colors bg-bg"
-        />
+        <label htmlFor="email" className={lc}>Email</label>
+        <input id="email" name="email" type="email" value={form.email} onChange={handleChange}
+          placeholder="votre@email.fr" className={ic} />
       </div>
 
       <div>
-        <label htmlFor="typeProjet" className="block text-sm font-semibold text-navy mb-1">
-          Type de projet <span className="text-orange">*</span>
-        </label>
-        <select
-          id="typeProjet"
-          name="typeProjet"
-          value={form.typeProjet}
-          onChange={handleChange}
-          className="w-full border border-border rounded-xl px-4 py-3 text-sm text-text focus:outline-none focus:border-orange transition-colors bg-bg"
-          required
-        >
+        <label htmlFor="typeProjet" className={lc}>Type de projet <span className="text-orange">*</span></label>
+        <select id="typeProjet" name="typeProjet" value={form.typeProjet} onChange={handleChange}
+          className={ic} required>
           <option value="">Choisissez un type de projet</option>
-          {typesProjets.map((t) => (
-            <option key={t} value={t}>
-              {t}
-            </option>
-          ))}
+          {typesProjets.map((t) => <option key={t} value={t}>{t}</option>)}
         </select>
       </div>
 
       <div>
-        <label htmlFor="description" className="block text-sm font-semibold text-navy mb-1">
-          Description du projet
-        </label>
-        <textarea
-          id="description"
-          name="description"
-          value={form.description}
-          onChange={handleChange}
-          rows={4}
-          placeholder="Décrivez votre projet : surface, localisation, contraintes particulières..."
-          className="w-full border border-border rounded-xl px-4 py-3 text-sm text-text focus:outline-none focus:border-orange transition-colors bg-bg resize-none"
-        />
+        <label htmlFor="description" className={lc}>Description du projet</label>
+        <textarea id="description" name="description" value={form.description} onChange={handleChange}
+          rows={4} placeholder="Surface, localisation, contraintes particulières..."
+          className={`${ic} resize-none`} />
       </div>
 
       <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
         <div>
-          <label htmlFor="budget" className="block text-sm font-semibold text-navy mb-1">
-            Budget approximatif
-          </label>
-          <input
-            id="budget"
-            name="budget"
-            type="text"
-            value={form.budget}
-            onChange={handleChange}
-            placeholder="ex : 80 000 €"
-            className="w-full border border-border rounded-xl px-4 py-3 text-sm text-text focus:outline-none focus:border-orange transition-colors bg-bg"
-          />
+          <label htmlFor="budget" className={lc}>Budget approximatif</label>
+          <input id="budget" name="budget" type="text" value={form.budget} onChange={handleChange}
+            placeholder="ex : 80 000 €" className={ic} />
         </div>
         <div>
-          <label htmlFor="zone" className="block text-sm font-semibold text-navy mb-1">
-            Commune / Zone
-          </label>
-          <input
-            id="zone"
-            name="zone"
-            type="text"
-            value={form.zone}
-            onChange={handleChange}
-            placeholder="ex : Orchies, Douai..."
-            className="w-full border border-border rounded-xl px-4 py-3 text-sm text-text focus:outline-none focus:border-orange transition-colors bg-bg"
-          />
+          <label htmlFor="zone" className={lc}>Commune / Zone</label>
+          <input id="zone" name="zone" type="text" value={form.zone} onChange={handleChange}
+            placeholder="ex : Orchies, Douai..." className={ic} />
         </div>
       </div>
 
       {error && (
-        <p className="text-error text-sm bg-stone-bg border border-error/30 rounded-xl px-4 py-3">
+        <p className="text-error text-xs bg-stone-bg border border-error/30 px-4 py-3 uppercase tracking-wide">
           {error}
         </p>
       )}
 
-      <button
-        type="submit"
-        disabled={status === "sending"}
-        className="w-full bg-orange hover:bg-orange-hover text-white font-bold py-4 rounded-xl transition-colors disabled:opacity-60 disabled:cursor-not-allowed text-base"
-      >
-        {status === "sending" ? "Envoi en cours..." : "Envoyer ma demande de devis"}
+      <button type="submit" disabled={status === "sending"}
+        className="btn btn-fill w-full py-4 text-xs uppercase tracking-[0.2em] disabled:opacity-60 disabled:cursor-not-allowed">
+        <span>{status === "sending" ? "Envoi en cours..." : "Envoyer ma demande"}</span>
       </button>
 
       {status === "error" && (
-        <p className="text-error text-sm text-center">
-          Une erreur est survenue. Appelez directement le{" "}
-          <a href="tel:0674453089" className="font-bold underline">
-            06 74 45 30 89
-          </a>
-          .
+        <p className="text-error text-xs text-center">
+          Erreur. Appelez le{" "}
+          <a href="tel:0674453089" className="font-bold underline">06 74 45 30 89</a>.
         </p>
       )}
 
-      <p className="text-text-muted text-xs text-center">
+      <p className="text-text-muted text-xs text-center uppercase tracking-widest">
         Devis gratuit &amp; sans engagement — Réponse sous 24h
       </p>
     </form>

components/marketing/Footer.tsx

@@ -15,100 +15,116 @@ export default function Footer() {
   } = siteConfig;
 
   return (
-    <footer className="bg-navy text-white pt-12 pb-6">
-      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="grid grid-cols-1 md:grid-cols-4 gap-8 pb-10 border-b border-white/10">
-          {/* Brand */}
-          <div className="md:col-span-2">
-            <div className="flex items-center gap-2.5 mb-4">
-              <div className="w-10 h-10 bg-orange rounded-lg flex items-center justify-center shrink-0">
-                <span className="text-white font-bold text-xs">OBC</span>
-              </div>
-              <div className="flex flex-col leading-tight">
-                <span className="text-white font-bold text-base leading-none">OBC</span>
-                <span className="text-orange-light font-bold text-base leading-none">Maçonnerie</span>
+    <footer className="bg-navy-dark text-white">
+      {/* Top band */}
+      <div className="border-b border-white/8">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-16">
+          <div className="grid grid-cols-1 md:grid-cols-12 gap-10 md:gap-8">
+
+            {/* Brand */}
+            <div className="md:col-span-4">
+              <div className="flex items-center gap-3 mb-6">
+                <div className="w-11 h-11 bg-orange flex items-center justify-center shrink-0">
+                  <span className="text-white font-black text-xs tracking-wider">OBC</span>
+                </div>
+                <div className="flex flex-col leading-none gap-0.5">
+                  <span className="text-white font-black text-sm tracking-[0.18em] uppercase">OBC</span>
+                  <span className="text-orange-light font-bold text-xs tracking-[0.18em] uppercase">Maçonnerie</span>
+                </div>
               </div>
+              <p className="text-white/50 text-sm leading-relaxed mb-6 max-w-xs">
+                {dirigeant}, maçon expert en construction de maison, rénovation et gros œuvre dans le Nord&nbsp;(59).
+              </p>
+              <a
+                href={`tel:${phoneRaw}`}
+                className="inline-flex items-center gap-2 text-orange font-bold text-base hover:text-white transition-colors group"
+              >
+                <svg className="w-4 h-4 shrink-0" 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>
+                {phone}
+              </a>
+              <p className="text-white/30 text-xs mt-2">{address}</p>
             </div>
-            <p className="text-white/70 text-sm leading-relaxed mb-4 max-w-xs">
-              {dirigeant}, maçon expert en construction de maison, rénovation et gros
-              œuvre dans le Nord. De la première pierre à la remise des clés.
-            </p>
-            <a
-              href={`tel:${phoneRaw}`}
-              className="inline-flex items-center gap-2 text-orange-light font-bold text-base hover:text-white transition-colors"
-            >
-              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
-              </svg>
-              {phone}
-            </a>
-            <p className="text-white/40 text-xs mt-2">{address}</p>
-          </div>
 
-          {/* Services */}
-          <div>
-            <h4 className="text-white font-semibold text-sm mb-4 uppercase tracking-wide">
-              Services
-            </h4>
-            <ul className="space-y-2">
-              {footerServicesNav.map((item) => (
-                <li key={item.href}>
-                  <Link
-                    href={item.href}
-                    className="text-white/60 hover:text-white text-sm transition-colors"
-                  >
-                    {item.label}
-                  </Link>
-                </li>
-              ))}
-            </ul>
-          </div>
+            {/* Services */}
+            <div className="md:col-span-3">
+              <h4 className="text-white font-black text-xs uppercase tracking-[0.2em] mb-5 flex items-center gap-3">
+                <span className="w-4 h-px bg-orange" />
+                Services
+              </h4>
+              <ul className="space-y-2.5">
+                {footerServicesNav.map((item) => (
+                  <li key={item.href}>
+                    <Link
+                      href={item.href}
+                      className="text-white/45 hover:text-white text-sm transition-colors hover:translate-x-1 inline-block duration-200"
+                    >
+                      {item.label}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </div>
 
-          {/* Navigation + Légal */}
-          <div>
-            <h4 className="text-white font-semibold text-sm mb-4 uppercase tracking-wide">
-              Navigation
-            </h4>
-            <ul className="space-y-2">
-              {footerMainNav.map((item) => (
-                <li key={item.href}>
-                  <Link
-                    href={item.href}
-                    className="text-white/60 hover:text-white text-sm transition-colors"
-                  >
-                    {item.label}
-                  </Link>
-                </li>
-              ))}
-            </ul>
-            <h4 className="text-white font-semibold text-sm mb-3 mt-5 uppercase tracking-wide">
-              Légal
-            </h4>
-            <ul className="space-y-2">
-              {footerLegalNav.map((item) => (
-                <li key={item.href}>
-                  <Link
-                    href={item.href}
-                    className="text-white/60 hover:text-white text-sm transition-colors"
-                  >
-                    {item.label}
-                  </Link>
-                </li>
-              ))}
-            </ul>
+            {/* Navigation */}
+            <div className="md:col-span-2">
+              <h4 className="text-white font-black text-xs uppercase tracking-[0.2em] mb-5 flex items-center gap-3">
+                <span className="w-4 h-px bg-orange" />
+                Navigation
+              </h4>
+              <ul className="space-y-2.5">
+                {footerMainNav.map((item) => (
+                  <li key={item.href}>
+                    <Link
+                      href={item.href}
+                      className="text-white/45 hover:text-white text-sm transition-colors hover:translate-x-1 inline-block duration-200"
+                    >
+                      {item.label}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </div>
+
+            {/* Légal + CTA */}
+            <div className="md:col-span-3">
+              <h4 className="text-white font-black text-xs uppercase tracking-[0.2em] mb-5 flex items-center gap-3">
+                <span className="w-4 h-px bg-orange" />
+                Légal
+              </h4>
+              <ul className="space-y-2.5 mb-8">
+                {footerLegalNav.map((item) => (
+                  <li key={item.href}>
+                    <Link
+                      href={item.href}
+                      className="text-white/45 hover:text-white text-sm transition-colors hover:translate-x-1 inline-block duration-200"
+                    >
+                      {item.label}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+              <Link
+                href="/contact"
+                className="btn btn-fill text-xs uppercase tracking-widest px-5 py-3 w-full justify-center"
+              >
+                <span>Devis gratuit</span>
+              </Link>
+            </div>
           </div>
         </div>
+      </div>
 
-        {/* Bottom */}
-        <div className="pt-6 flex flex-col md:flex-row items-center justify-between gap-3">
-          <p className="text-white/40 text-xs text-center md:text-left">
-            &copy; {new Date().getFullYear()} {name} &mdash; {dirigeant} &middot; SIREN{" "}
-            {siren.replace(/(\d{3})(\d{3})(\d{3})/, "$1 $2 $3")}
+      {/* Bottom bar */}
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-5">
+        <div className="flex flex-col md:flex-row items-center justify-between gap-3 text-white/25 text-xs">
+          <p>
+            &copy; {new Date().getFullYear()} {name} &mdash; {dirigeant}{" "}
+            &middot; SIREN {siren.replace(/(\d{3})(\d{3})(\d{3})/, "$1 $2 $3")}
           </p>
-          <p className="text-white/40 text-xs text-center md:text-right">
-            Orchies &middot; Mouchin &middot; Douai &middot; Valenciennes &middot;
-            Saint-Amand-les-Eaux &mdash;{" "}
-            <span className="text-white/30">Site réalisé par HookLab</span>
+          <p className="text-center">
+            Orchies &middot; Mouchin &middot; Douai &middot; Valenciennes &middot; Saint-Amand-les-Eaux
           </p>
         </div>
       </div>

components/marketing/Navbar.tsx

@@ -2,100 +2,130 @@
 
 import { useState } from "react";
 import Link from "next/link";
+import { usePathname } from "next/navigation";
 import { siteConfig } from "@/lib/site-config";
 
 export default function Navbar() {
   const [open, setOpen] = useState(false);
-  const { name, phone, phoneRaw, nav } = siteConfig;
+  const { phone, phoneRaw, nav } = siteConfig;
+  const pathname = usePathname();
 
   return (
     <nav
-      className="sticky top-0 z-50 bg-bg-white/95 backdrop-blur-md border-b border-border"
+      className="sticky top-0 z-50 bg-bg-white border-b border-border"
       role="navigation"
       aria-label="Navigation principale"
     >
-      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="flex items-center justify-between h-16">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex items-center justify-between h-16 md:h-[68px]">
+
           {/* Logo */}
-          <Link href="/" className="flex items-center gap-2.5" aria-label={`${name} - Accueil`}>
-            <div className="w-9 h-9 bg-navy rounded-lg flex items-center justify-center shrink-0">
-              <span className="text-white font-bold text-xs">OBC</span>
+          <Link href="/" className="flex items-center gap-3 shrink-0" aria-label="OBC Maçonnerie — Accueil">
+            <div className="w-10 h-10 bg-navy flex items-center justify-center shrink-0">
+              <span className="text-white font-black text-xs tracking-wider">OBC</span>
             </div>
-            <div className="flex flex-col leading-tight">
-              <span className="text-navy font-bold text-sm leading-none">OBC</span>
-              <span className="text-orange font-bold text-sm leading-none">Maçonnerie</span>
+            <div className="flex flex-col leading-none gap-0.5">
+              <span className="text-navy font-black text-sm tracking-[0.18em] uppercase">OBC</span>
+              <span className="text-orange font-bold text-xs tracking-[0.18em] uppercase">Maçonnerie</span>
             </div>
           </Link>
 
-          {/* Desktop links */}
-          <div className="hidden md:flex items-center gap-6">
-            {nav.map((link) => (
-              <Link
-                key={link.href}
-                href={link.href}
-                className="text-text-light hover:text-navy text-sm font-medium transition-colors"
-              >
-                {link.label}
-              </Link>
-            ))}
+          {/* Desktop nav links */}
+          <div className="hidden lg:flex items-center gap-7">
+            {nav.map((link) => {
+              const active = pathname === link.href || (link.href !== "/" && pathname.startsWith(link.href));
+              return (
+                <Link
+                  key={link.href}
+                  href={link.href}
+                  className={`nav-link text-xs font-bold uppercase tracking-[0.14em] transition-colors pb-0.5 ${
+                    active ? "text-orange active" : "text-text-light hover:text-navy"
+                  }`}
+                >
+                  {link.label}
+                </Link>
+              );
+            })}
           </div>
 
-          {/* CTA desktop */}
-          <div className="hidden md:block">
+          {/* Right — phone + CTA */}
+          <div className="hidden lg:flex items-center gap-5">
             <a
               href={`tel:${phoneRaw}`}
-              className="inline-flex items-center gap-2 bg-orange text-white font-bold text-sm px-5 py-2.5 rounded-xl hover:bg-orange-hover transition-colors"
+              className="flex items-center gap-2 text-navy font-bold text-sm hover:text-orange transition-colors"
             >
-              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <svg className="w-4 h-4 text-orange shrink-0" 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>
               {phone}
             </a>
+            <Link
+              href="/contact"
+              className="btn btn-fill text-xs uppercase tracking-widest px-5 py-2.5"
+            >
+              <span>Devis gratuit</span>
+            </Link>
           </div>
 
-          {/* Mobile menu button */}
+          {/* Mobile burger */}
           <button
-            className="md:hidden p-2 text-text-light hover:text-navy transition-colors cursor-pointer"
+            className="lg:hidden p-2 text-navy transition-colors"
             onClick={() => setOpen(!open)}
             aria-label={open ? "Fermer le menu" : "Ouvrir le menu"}
             aria-expanded={open}
           >
-            {open ? (
-              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-              </svg>
-            ) : (
-              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
-              </svg>
-            )}
+            <div className={`w-5 space-y-1.5 transition-all ${open ? "opacity-0 scale-75" : ""}`}>
+              {!open ? (
+                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+                </svg>
+              ) : (
+                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              )}
+            </div>
           </button>
         </div>
 
         {/* Mobile menu */}
         {open && (
-          <div className="md:hidden border-t border-border py-4 space-y-1">
-            {nav.map((link) => (
-              <Link
-                key={link.href}
-                href={link.href}
-                onClick={() => setOpen(false)}
-                className="block text-text-light hover:text-navy text-sm font-medium py-2.5 px-2 rounded-lg hover:bg-bg-muted transition-colors"
-              >
-                {link.label}
-              </Link>
-            ))}
+          <div className="lg:hidden border-t border-border pb-5">
             <div className="pt-2">
+              {nav.map((link) => {
+                const active = pathname === link.href || (link.href !== "/" && pathname.startsWith(link.href));
+                return (
+                  <Link
+                    key={link.href}
+                    href={link.href}
+                    onClick={() => setOpen(false)}
+                    className={`flex items-center justify-between text-xs font-bold uppercase tracking-widest py-3.5 px-1 border-b border-border-light transition-colors ${
+                      active ? "text-orange" : "text-text-light hover:text-navy"
+                    }`}
+                  >
+                    {link.label}
+                    {active && <span className="w-1.5 h-1.5 rounded-full bg-orange" />}
+                  </Link>
+                );
+              })}
+            </div>
+            <div className="mt-5 flex flex-col gap-3">
               <a
                 href={`tel:${phoneRaw}`}
-                onClick={() => setOpen(false)}
-                className="flex items-center justify-center gap-2 bg-orange text-white font-bold text-sm px-5 py-3 rounded-xl mt-2"
+                className="flex items-center gap-2 text-navy font-bold text-sm"
               >
-                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <svg className="w-4 h-4 text-orange" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                 </svg>
                 {phone}
               </a>
+              <Link
+                href="/contact"
+                onClick={() => setOpen(false)}
+                className="btn btn-fill text-xs uppercase tracking-widest px-5 py-3.5 w-full justify-center"
+              >
+                <span>Demander un devis gratuit</span>
+              </Link>
             </div>
           </div>
         )}