refactor: rewrite all homepage text content for clearer artisan messaging

- Hero: new H1 "Votre savoir-faire mérite d'être vu", updated subtitle and CTA to "Diagnostic Gratuit"
- Navbar: rename menu items to "Notre Méthode" and "Exemples"
- Problematique: rewrite pain points (temps perdu, invisibilité, complexité) + engagement block
- System: replace tech features with 3-step method (Trouve, Choisit, Contacte)
- DemosLive: simplify demo cards with concise descriptions per trade model
- AboutMe: replace stats with bullet points (interlocuteur unique, 100% géré, pas de surprise)
- FAQ: reduce to 3 focused questions (informatique, Facebook, coût)
- Contact: update CTA title to "sécuriser votre carnet de commandes"
- Footer: update tagline, remove plan du site link, trim intervention zone

https://claude.ai/code/session_01V8YAjpqRQ3bfBYsABYsEgo

components/marketing/AboutMe.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import ScrollReveal from "@/components/animations/ScrollReveal";
-import AnimatedCounter from "@/components/animations/AnimatedCounter";
 
 interface AboutMeProps {
   images?: Record<string, string>;
@@ -19,25 +18,6 @@ export default function AboutMe({ images }: AboutMeProps) {
       </div>
 
       <div className="relative max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
-        {/* Stats top row */}
-        <ScrollReveal direction="up">
-          <div className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-14">
-            {[
-              { value: 100, suffix: "%", label: "Local Nord" },
-              { value: 24, suffix: "h", label: "Délai de réponse" },
-              { value: 0, suffix: "€", label: "L'audit" },
-              { value: 3, suffix: "", label: "Piliers du système" },
-            ].map((stat, i) => (
-              <div key={i} className="text-center">
-                <p className="text-3xl md:text-4xl font-extrabold text-white">
-                  <AnimatedCounter end={stat.value} suffix={stat.suffix} />
-                </p>
-                <p className="text-white/70 text-sm font-medium mt-1">{stat.label}</p>
-              </div>
-            ))}
-          </div>
-        </ScrollReveal>
-
         {/* Content */}
         <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
           {/* Photo */}
@@ -63,7 +43,7 @@ export default function AboutMe({ images }: AboutMeProps) {
                   )}
                 </div>
                 <div className="absolute -bottom-3 left-1/2 -translate-x-1/2 bg-navy text-white text-xs font-bold px-4 py-2 rounded-full shadow-lg whitespace-nowrap">
-                  Basé à Flines-lez-Raches
+                  Bas&eacute; &agrave; Flines-lez-Raches
                 </div>
               </div>
             </div>
@@ -76,27 +56,34 @@ export default function AboutMe({ images }: AboutMeProps) {
                 Votre expert local
               </span>
               <h2 className="text-2xl md:text-3xl lg:text-4xl font-bold text-white tracking-[-0.02em] mb-4">
-                Pas une plateforme anonyme.{" "}
-                <span className="text-navy">Un voisin.</span>
+                Enguerrand Ozano.{" "}
+                <span className="text-navy">Votre voisin &agrave; Flines-lez-Raches.</span>
               </h2>
-              <p className="text-white/90 text-base leading-relaxed mb-4">
-                Je suis <strong className="text-white">Enguerrand</strong>, spécialisé dans la
-                visibilité locale et la construction de{" "}
-                <strong className="text-white">systèmes de confiance en ligne</strong>{" "}
-                pour les artisans du Nord.
-              </p>
-              <p className="text-white/80 text-base leading-relaxed mb-4">
-                Je ne suis pas un call center parisien. Je connais la réalité de vos
-                chantiers à Douai, Orchies ou Valenciennes. Je sais que vous n&rsquo;avez pas
-                le temps de gérer &ldquo;un truc internet&rdquo; et que vous voulez des résultats
-                concrets : des appels de <strong className="text-white">vrais</strong> clients.
-              </p>
-              <p className="text-white/80 text-base leading-relaxed mb-6">
-                Mon approche : je vous construis un <strong className="text-white">système complet</strong>{" "}
-                (Google + Facebook + Site) qui transforme votre bouche-à-oreille en système
-                permanent. Pas de jargon, pas de blabla &mdash; du concret.
+              <p className="text-white/90 text-base leading-relaxed mb-6">
+                Oubliez les plateformes t&eacute;l&eacute;phoniques &agrave; l&rsquo;autre bout du monde.
+                Je suis ici, dans le Nord (59). Je connais la r&eacute;alit&eacute; de vos m&eacute;tiers
+                et vos contraintes g&eacute;ographiques.
               </p>
 
+              <ul className="space-y-4 mb-6">
+                {[
+                  { strong: "Un interlocuteur unique", text: "C\u2019est moi qui g\u00e8re votre dossier du d\u00e9but \u00e0 la fin." },
+                  { strong: "100% G\u00e9r\u00e9 pour vous", text: "Une fois le site lanc\u00e9, vous n\u2019avez rien \u00e0 faire. Si vous avez une nouvelle photo de chantier, vous me l\u2019envoyez, je la mets en ligne." },
+                  { strong: "Pas de mauvaise surprise", text: "Tout est clair d\u00e8s le d\u00e9part." },
+                ].map((item, i) => (
+                  <li key={i} className="flex items-start gap-3">
+                    <div className="w-5 h-5 bg-white/20 rounded-full flex items-center justify-center shrink-0 mt-0.5">
+                      <svg className="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
+                      </svg>
+                    </div>
+                    <p className="text-white/80 text-base leading-relaxed">
+                      <strong className="text-white">{item.strong}&nbsp;:</strong> {item.text}
+                    </p>
+                  </li>
+                ))}
+              </ul>
+
               <a
                 href="#contact"
                 className="inline-flex items-center gap-2 bg-navy hover:bg-navy-light text-white font-bold text-sm px-6 py-3 rounded-xl transition-colors"

components/marketing/Contact.tsx

@@ -23,12 +23,11 @@ export default function Contact() {
                 Audit gratuit
               </span>
               <h2 className="text-2xl md:text-3xl lg:text-4xl font-bold text-white tracking-[-0.02em] mb-4">
-                Prêt à arrêter de courir après les chantiers ?
+                Pr&ecirc;t &agrave; s&eacute;curiser votre carnet de commandes&nbsp;?
               </h2>
               <p className="text-white/70 text-base leading-relaxed mb-6">
-                Réservez votre audit gratuit. Je regarde votre situation Google,
-                votre visibilité actuelle, et je vous dis concrètement ce
-                qu&rsquo;on peut améliorer. Sans engagement, sans jargon.
+                Je regarde votre situation actuelle sur internet (gratuitement)
+                et je vous dis honn&ecirc;tement ce qu&rsquo;on peut am&eacute;liorer.
               </p>
 
               <ul className="space-y-3">
@@ -124,7 +123,7 @@ export default function Contact() {
                       />
                     </div>
                     <Button type="submit" size="lg" className="w-full">
-                      Réserver mon Audit Gratuit
+                      R&Eacute;SERVER MON AUDIT GRATUIT
                     </Button>
                     <p className="text-text-muted text-xs text-center">
                       Gratuit &middot; Sans engagement &middot; Réponse sous 24h

components/marketing/DemosLive.tsx

@@ -6,12 +6,10 @@ import ScrollReveal from "@/components/animations/ScrollReveal";
 
 const demos = [
   {
-    title: "L\u2019Expertise Solide",
-    subtitle: "Pour ceux dont le travail doit durer 100 ans.",
-    pourQui: "Maçons, Couvreurs, Charpentiers.",
-    pointFort: "Slider «\u00a0Avant / Après\u00a0» interactif + badges garanties (Décennale, Qualibat, RGE) immanquables.",
-    fonctionnalite: "Formulaire intelligent : si Urgence Fuite \u2192 bouton rouge «\u00a0APPELER LE PATRON\u00a0».",
-    cta: "Voir la Démo Maçonnerie",
+    title: "Le Mod\u00e8le \u00ab\u00a0Gros \u0152uvre\u00a0\u00bb",
+    subtitle: "Ma\u00e7ons, Couvreurs",
+    description: "Id\u00e9al pour montrer la technique. Un site qui met en avant vos photos \u00ab\u00a0Avant / Apr\u00e8s\u00a0\u00bb pour prouver la qualit\u00e9 de vos finitions.",
+    cta: "Voir un exemple Ma\u00e7onnerie",
     href: "/macon",
     icon: (
       <svg className="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -20,12 +18,10 @@ const demos = [
     ),
   },
   {
-    title: "L\u2019Artisan Créateur",
-    subtitle: "Pour ceux qui vendent du beau et du confort.",
-    pourQui: "Paysagistes, Peintres, Décorateurs.",
-    pointFort: "Galerie filtrable par type + saisonnalité intelligente (le site change selon la saison).",
-    fonctionnalite: "Bouton WhatsApp flottant «\u00a0Je veux le même jardin\u00a0» + immersion locale par ville.",
-    cta: "Voir la Démo Paysagiste",
+    title: "Le Mod\u00e8le \u00ab\u00a0Cr\u00e9ation\u00a0\u00bb",
+    subtitle: "Paysagistes, Peintres",
+    description: "Id\u00e9al pour vendre du r\u00eave. Un design \u00e9pur\u00e9 qui laisse toute la place \u00e0 la beaut\u00e9 de vos r\u00e9alisations.",
+    cta: "Voir un exemple Paysagiste",
     href: "/paysagiste",
     icon: (
       <svg className="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -34,12 +30,10 @@ const demos = [
     ),
   },
   {
-    title: "L\u2019Intervention Éclair",
-    subtitle: "Pour ceux qui sauvent la mise (et veulent être payés vite).",
-    pourQui: "Plombiers, Électriciens, Serruriers.",
-    pointFort: "Avis Google en haut + tarifs transparents + bouton d\u2019appel sticky sur mobile.",
-    fonctionnalite: "Diagnostic en 3 clics : qualifie la panne + détecte si hors zone.",
-    cta: "Voir la Démo Plombier",
+    title: "Le Mod\u00e8le \u00ab\u00a0Intervention\u00a0\u00bb",
+    subtitle: "Plombiers, \u00c9lectriciens",
+    description: "Id\u00e9al pour l\u2019urgence. Un site ultra-rapide avec votre num\u00e9ro de t\u00e9l\u00e9phone bien visible pour \u00eatre appel\u00e9 en un clic.",
+    cta: "Voir un exemple Plombier",
     href: "/plombier",
     icon: (
       <svg className="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -55,21 +49,20 @@ interface DemosLiveProps {
 
 export default function DemosLive(_props: DemosLiveProps) {
   return (
-    <section id="demos" className="py-16 md:py-24 bg-bg" aria-label="Démos live">
+    <section id="exemples" className="py-16 md:py-24 bg-bg" aria-label="Exemples">
       <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
         <ScrollReveal direction="up">
           <div className="text-center mb-14">
             <span className="inline-block px-3 py-1.5 bg-orange/10 border border-orange/20 rounded-full text-orange text-xs font-semibold mb-4">
-              Démos Live
+              Exemples
             </span>
             <h2 className="text-2xl md:text-3xl lg:text-4xl font-bold text-navy tracking-[-0.02em] mb-3">
-              Ne signez pas sans voir.{" "}
-              <span className="text-orange">Testez votre futur site maintenant.</span>
+              Ne signez pas les yeux ferm&eacute;s.{" "}
+              <span className="text-orange">Regardez ce que je peux faire pour vous.</span>
             </h2>
             <p className="text-text-light text-base md:text-lg max-w-2xl mx-auto">
-              Je ne vous demande pas de me croire sur parole. J&rsquo;ai construit 3 modèles
-              de «&nbsp;Dossiers de Confiance&nbsp;» optimisés pour vos métiers.
-              Cliquez, naviguez, et imaginez votre logo à la place.
+              Je ne vous demande pas de me croire sur parole. J&rsquo;ai pr&eacute;par&eacute; des mod&egrave;les
+              adapt&eacute;s &agrave; votre m&eacute;tier. Cliquez et imaginez votre logo &agrave; la place.
             </p>
           </div>
         </ScrollReveal>
@@ -89,19 +82,8 @@ export default function DemosLive(_props: DemosLiveProps) {
 
                 {/* Content */}
                 <div className="p-5 flex-1 flex flex-col">
-                  <div className="space-y-3 flex-1">
-                    <div>
-                      <p className="text-navy font-semibold text-xs uppercase tracking-wider mb-1">Pour qui ?</p>
-                      <p className="text-text-light text-sm">{demo.pourQui}</p>
-                    </div>
-                    <div>
-                      <p className="text-navy font-semibold text-xs uppercase tracking-wider mb-1">Le point fort</p>
-                      <p className="text-text-light text-sm">{demo.pointFort}</p>
-                    </div>
-                    <div>
-                      <p className="text-navy font-semibold text-xs uppercase tracking-wider mb-1">Fonctionnalité clé</p>
-                      <p className="text-text-light text-sm">{demo.fonctionnalite}</p>
-                    </div>
+                  <div className="flex-1">
+                    <p className="text-text-light text-sm leading-relaxed">{demo.description}</p>
                   </div>
 
                   {/* CTA */}

components/marketing/FAQ.tsx

@@ -5,28 +5,16 @@ import ScrollReveal from "@/components/animations/ScrollReveal";
 
 const faqs = [
   {
-    q: "J\u2019ai déjà une page Facebook, ça suffit non\u00a0?",
-    a: "Facebook, c\u2019est pour les amis. Google, c\u2019est pour les clients qui ont un carnet de chèques et une urgence. Un site professionnel inspire 56% plus de confiance qu\u2019une simple page sociale.",
+    q: "Je n\u2019y connais rien en informatique, est-ce un probl\u00e8me\u00a0?",
+    a: "Absolument pas. C\u2019est mon travail. Vous continuez \u00e0 g\u00e9rer vos chantiers, je m\u2019occupe de tout ce qui est technique (s\u00e9curit\u00e9, mise en ligne, affichage sur mobile).",
   },
   {
-    q: "Est-ce que je pourrai changer mes photos moi-même\u00a0?",
-    a: "Oui. Vous avez un panneau d'administration simple et intuitif. Collez un lien d'image, cliquez sur Sauver, et le site se met à jour tout seul. Aussi simple qu'envoyer un SMS.",
+    q: "J\u2019ai d\u00e9j\u00e0 une page Facebook, \u00e7a suffit non\u00a0?",
+    a: "Facebook est utile, mais ce n\u2019est pas \u00e0 vous. Un site internet est votre propri\u00e9t\u00e9 et inspire beaucoup plus confiance pour signer des devis importants. C\u2019est la diff\u00e9rence entre un bricoleur et une entreprise \u00e9tablie.",
   },
   {
-    q: "C\u2019est quoi la différence avec un site gratuit\u00a0?",
-    a: "Un site gratuit, c\u2019est comme construire une maison sans fondations. Ça ne tient pas, Google ne le voit pas, et ça fait fuir les gros chantiers. Je vous construis un actif numérique durable.",
-  },
-  {
-    q: "Combien coûte un site avec HookLab\u00a0?",
-    a: "Chaque projet est différent. Je propose un audit gratuit pour comprendre votre situation et vous faire une proposition adaptée à votre activité. Pas d\u2019abonnement caché, pas de surprise.",
-  },
-  {
-    q: "Combien de temps pour avoir des résultats\u00a0?",
-    a: "Le site est en ligne en 2-3 semaines. Les premiers résultats Google arrivent en 4 à 8 semaines selon votre zone et votre métier. Mais le site commence à travailler pour vous dès le jour 1.",
-  },
-  {
-    q: "J\u2019y connais rien en informatique, c\u2019est un problème\u00a0?",
-    a: "C\u2019est justement mon métier. Je m\u2019occupe de tout\u00a0: création, mise en ligne, référencement. Vous, vous continuez vos chantiers. Et si vous voulez modifier quelque chose, un simple message suffit.",
+    q: "Combien \u00e7a co\u00fbte\u00a0?",
+    a: "Chaque artisan a des besoins diff\u00e9rents. Je propose des forfaits clairs et adapt\u00e9s aux TPE. Pas de frais cach\u00e9s. Nous en parlerons de vive voix lors de l\u2019audit.",
   },
 ];
 

components/marketing/Footer.tsx

@@ -20,7 +20,7 @@ export default function Footer() {
                 </span>
               </Link>
               <p className="text-text-light text-sm leading-relaxed max-w-xs">
-                Création de sites pour le Bâtiment et l&rsquo;Artisanat.
+                Cr&eacute;ation de sites internet pour artisans.
               </p>
               <p className="text-text-muted text-xs mt-3">
                 59148 Flines-lez-Raches
@@ -54,11 +54,6 @@ export default function Footer() {
                     Politique de Confidentialité
                   </Link>
                 </li>
-                <li>
-                  <Link href="/plan-du-site" className="text-text-light hover:text-navy text-sm transition-colors">
-                    Plan du site
-                  </Link>
-                </li>
               </ul>
             </div>
           </div>
@@ -70,7 +65,7 @@ export default function Footer() {
             &copy; {new Date().getFullYear()} HookLab &mdash; Enguerrand Ozano &middot; SIREN 994 538 932
           </p>
           <p className="text-text-muted text-xs text-center md:text-right">
-            Intervention : Douai &middot; Orchies &middot; Arleux &middot; Valenciennes &middot; Saint-Amand-les-Eaux
+            Intervention : Douai &middot; Orchies &middot; Arleux &middot; Valenciennes
           </p>
         </div>
       </div>

components/marketing/Hero.tsx

@@ -45,40 +45,35 @@ export default function Hero({ images }: HeroProps) {
                 Artisans du Nord :
               </span>
               <span className="block animate-hero-text-2">
-                Transformez votre
-              </span>
-              <span className="block animate-hero-text-2">
-                bouche-à-oreille en{" "}
+                Votre savoir-faire
               </span>
               <span className="block text-orange animate-hero-text-3 relative">
-                machine à chantiers.
+                m&eacute;rite d&rsquo;&ecirc;tre vu.
                 <span className="absolute -bottom-2 left-0 h-1 bg-orange/40 rounded-full animate-underline-grow" />
               </span>
             </h1>
 
             <p className="text-white/65 text-lg sm:text-xl leading-relaxed mb-10 max-w-xl animate-fade-in-up animation-delay-600">
-              Avis Google + Facebook + Site pro : le triptyque qui fait que vos
-              futurs clients vous appellent <strong className="text-white/90">vous</strong>, et pas votre concurrent.
+              Vous construisez du solide sur vos chantiers. Je construis votre r&eacute;putation solide sur internet.
+              Bas&eacute; &agrave; Flines-lez-Raches, j&rsquo;aide les professionnels du b&acirc;timent de Douai, Orchies
+              et Valenciennes &agrave; &ecirc;tre trouv&eacute;s et choisis par les bons clients.
             </p>
 
             <div className="flex flex-col sm:flex-row gap-4 animate-fade-in-up animation-delay-800">
               <a href="#contact">
                 <Button size="lg" className="w-full sm:w-auto pulse-glow text-base group">
                   <span className="flex items-center gap-2">
-                    DÉMARRER MON AUDIT GRATUIT
+                    D&Eacute;MARRER MON DIAGNOSTIC GRATUIT
                     <svg className="w-5 h-5 transition-transform group-hover:translate-x-1" 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>
                 </Button>
               </a>
-              <a
-                href="#process"
-                className="inline-flex items-center justify-center gap-2 px-6 py-3.5 border border-white/20 text-white font-semibold text-sm rounded-xl hover:bg-white/10 hover:border-white/30 transition-all duration-300"
-              >
-                Comment ça marche ?
-              </a>
             </div>
+            <p className="text-white/40 text-xs mt-3 animate-fade-in-up animation-delay-800">
+              Sans engagement. R&eacute;ponse sous 24h.
+            </p>
 
             <div className="mt-8 flex flex-wrap items-center gap-6 animate-fade-in-up animation-delay-1000">
               {["Réponse sous 24h", "100% Géré pour vous", "Pas de jargon"].map((t) => (

components/marketing/Navbar.tsx

@@ -22,11 +22,11 @@ export default function Navbar() {
 
           {/* Desktop links */}
           <div className="hidden md:flex items-center gap-8">
-            <a href="#systeme" className="text-text-light hover:text-navy text-sm font-medium transition-colors">
-              Le Syst&egrave;me
+            <a href="#methode" className="text-text-light hover:text-navy text-sm font-medium transition-colors">
+              Notre M&eacute;thode
             </a>
-            <a href="#demos" className="text-text-light hover:text-navy text-sm font-medium transition-colors">
-              R&eacute;alisations
+            <a href="#exemples" className="text-text-light hover:text-navy text-sm font-medium transition-colors">
+              Exemples
             </a>
             <a href="#qui-suis-je" className="text-text-light hover:text-navy text-sm font-medium transition-colors">
               Qui suis-je
@@ -68,11 +68,11 @@ export default function Navbar() {
         {/* Mobile menu */}
         {open && (
           <div className="md:hidden border-t border-border py-4 space-y-3">
-            <a href="#systeme" onClick={() => setOpen(false)} className="block text-text-light hover:text-navy text-sm font-medium py-2 transition-colors">
-              Le Syst&egrave;me
+            <a href="#methode" onClick={() => setOpen(false)} className="block text-text-light hover:text-navy text-sm font-medium py-2 transition-colors">
+              Notre M&eacute;thode
             </a>
-            <a href="#demos" onClick={() => setOpen(false)} className="block text-text-light hover:text-navy text-sm font-medium py-2 transition-colors">
-              R&eacute;alisations
+            <a href="#exemples" onClick={() => setOpen(false)} className="block text-text-light hover:text-navy text-sm font-medium py-2 transition-colors">
+              Exemples
             </a>
             <a href="#qui-suis-je" onClick={() => setOpen(false)} className="block text-text-light hover:text-navy text-sm font-medium py-2 transition-colors">
               Qui suis-je

components/marketing/Problematique.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import ScrollReveal from "@/components/animations/ScrollReveal";
-import AnimatedCounter from "@/components/animations/AnimatedCounter";
 
 export default function Problematique() {
   return (
@@ -10,11 +9,11 @@ export default function Problematique() {
         <ScrollReveal direction="up">
           <div className="text-center mb-12">
             <h3 className="text-2xl md:text-3xl lg:text-4xl font-bold text-navy tracking-[-0.02em] mb-4">
-              Vous êtes un pro sur le chantier.{" "}
-              <span className="text-orange">Pourquoi votre présence en ligne dit-elle le contraire&nbsp;?</span>
+              Chacun son m&eacute;tier.{" "}
+              <span className="text-orange">Vous &ecirc;tes l&rsquo;expert du chantier, je suis l&rsquo;expert du num&eacute;rique.</span>
             </h3>
             <p className="text-text-light text-base md:text-lg">
-              Marc, je sais ce que vous vivez&nbsp;:
+              Marc, je sais ce que vous vivez au quotidien&nbsp;:
             </p>
           </div>
         </ScrollReveal>
@@ -23,15 +22,15 @@ export default function Problematique() {
           {[
             {
               title: "Le temps perdu",
-              text: "Vos soirées passent à faire des devis pour des gens qui cherchent «\u00a0le moins cher\u00a0» sur Leboncoin.",
+              text: "Vos soir\u00e9es passent \u00e0 faire des devis pour des curieux qui cherchent juste \u00ab\u00a0un prix\u00a0\u00bb et ne signent jamais.",
             },
             {
-              title: "L\u2019invisibilité",
-              text: "Des concurrents moins qualifiés que vous sortent avant vous sur Google Maps.",
+              title: "L\u2019invisibilit\u00e9",
+              text: "Vous voyez des concurrents, parfois moins qualifi\u00e9s que vous, appara\u00eetre avant vous sur Google.",
             },
             {
-              title: "La peur de la technique",
-              text: "On vous a parlé de WordPress, de mises à jour, de piratage\u2026 Vous voulez un outil, pas un deuxième travail.",
+              title: "La complexit\u00e9",
+              text: "On vous parle de \u00ab\u00a0r\u00e9f\u00e9rencement\u00a0\u00bb, de \u00ab\u00a0mises \u00e0 jour\u00a0\u00bb\u2026 Pour vous, c\u2019est du chinois. Vous voulez un outil qui marche, pas une charge mentale suppl\u00e9mentaire.",
             },
           ].map((item, i) => (
             <ScrollReveal key={i} direction="left" delay={i * 150}>
@@ -54,13 +53,10 @@ export default function Problematique() {
         <ScrollReveal direction="none">
           <div className="bg-navy rounded-2xl p-6 md:p-8 text-center">
             <p className="text-white text-base md:text-lg leading-relaxed">
-              <strong className="text-orange text-2xl md:text-3xl font-extrabold block mb-2 animate-stat-glow">
-                <AnimatedCounter end={93} suffix="%" />
-              </strong>
-              des acheteurs jugent votre crédibilité sur le design de votre site.{" "}
-              <span className="text-white/70">
-                Si votre site est lent ou «&nbsp;moche&nbsp;», le client pense que votre travail l&rsquo;est aussi.
-              </span>
+              <strong className="text-orange text-lg md:text-xl font-extrabold">Mon engagement&nbsp;:</strong>{" "}
+              Je ne vous vends pas de la technologie pour le plaisir. Je mets en place un{" "}
+              <strong className="text-orange">Dossier de Confiance</strong>{" "}
+              qui prouve votre s&eacute;rieux aux clients qui vous cherchent.
             </p>
           </div>
         </ScrollReveal>

components/marketing/System.tsx

@@ -3,17 +3,18 @@
 import Card from "@/components/ui/Card";
 import ScrollReveal from "@/components/animations/ScrollReveal";
 
-const features = [
+const steps = [
   {
     icon: (
       <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M13 10V3L4 14h7v7l9-11h-7z" />
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
       </svg>
     ),
-    title: "Vitesse Supersonique",
-    subtitle: "Google adore",
+    step: "1",
+    title: "ON VOUS TROUVE",
+    subtitle: "Votre pr\u00e9sence Google",
     description:
-      "Votre site se charge instantanément sur mobile. C\u2019est crucial pour le référencement et pour vos clients pressés. La technologie des géants (Netflix, Airbnb) adaptée aux artisans du Nord.",
+      "Quand un client tape \u00ab\u00a0Couvreur Douai\u00a0\u00bb ou \u00ab\u00a0Menuisier Orchies\u00a0\u00bb, il doit tomber sur vous. Je g\u00e8re votre fiche Google et je m\u2019assure que vous soyez visible localement, l\u00e0 o\u00f9 sont vos clients.",
   },
   {
     icon: (
@@ -21,27 +22,29 @@ const features = [
         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
       </svg>
     ),
-    title: "Sécurité Militaire",
-    subtitle: "HTTPS inclus",
+    step: "2",
+    title: "ON VOUS CHOISIT",
+    subtitle: "Votre Site & Vos Avis",
     description:
-      "Pas de base de données à pirater. Votre site est statique, blindé et sécurisé par défaut (cadenas vert HTTPS obligatoire). Vos clients sont rassurés.",
+      "Un client met moins de 10 secondes pour juger si vous \u00eates s\u00e9rieux. Je cr\u00e9e un site internet clair qui affiche vos labels (RGE, Qualibat), vos plus belles photos de r\u00e9alisations et les avis de vos clients satisfaits. C\u2019est votre classeur de chantier, mais en ligne.",
   },
   {
     icon: (
       <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} 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>
     ),
-    title: "100% Mobile First",
-    subtitle: "Conçu pour le pouce",
+    step: "3",
+    title: "ON VOUS CONTACTE",
+    subtitle: "Le Filtrage",
     description:
-      "Vos clients vous cherchent sur leur smartphone. Votre site est conçu pour le pouce, avec des boutons d\u2019appel énormes et accessibles.",
+      "Fini les appels inutiles. Votre site est con\u00e7u pour filtrer les demandes. En affichant votre professionnalisme, vous \u00e9cartez les \u00ab\u00a0touristes\u00a0\u00bb et attirez les clients qui ont un vrai projet et le budget qui va avec.",
   },
 ];
 
 export default function System() {
   return (
-    <section id="systeme" className="relative py-16 md:py-24 bg-navy" aria-label="Le système">
+    <section id="methode" className="relative py-16 md:py-24 bg-navy" aria-label="Notre méthode">
       {/* Subtle pattern */}
       <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_30%,rgba(255,255,255,0.03),transparent_60%)]" />
 
@@ -49,25 +52,24 @@ export default function System() {
         <ScrollReveal direction="up">
           <div className="text-center mb-14">
             <span className="inline-block px-3 py-1.5 bg-orange/20 border border-orange/30 rounded-full text-orange text-xs font-semibold mb-4">
-              La Solution HookLab
+              Notre M&eacute;thode
             </span>
             <h2 className="text-2xl md:text-3xl lg:text-4xl font-bold text-white tracking-[-0.02em] mb-3">
-              Le «&nbsp;Dossier de Confiance&nbsp;» :{" "}
-              <span className="text-orange">Plus qu&rsquo;un site, une infrastructure.</span>
+              3 &eacute;tapes pour transformer votre bouche-&agrave;-oreille en{" "}
+              <span className="text-orange">syst&egrave;me automatique.</span>
             </h2>
             <p className="text-white/60 text-base md:text-lg max-w-2xl mx-auto">
-              Je ne fais pas de sites «&nbsp;bricolés&nbsp;» sur WordPress qui plantent si on ne les
-              met pas à jour. J&rsquo;utilise la technologie des géants adaptée aux artisans du Nord.
+              Pas de jargon. Voici ce que je mets en place pour vous&nbsp;:
             </p>
           </div>
         </ScrollReveal>
 
         <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-          {features.map((f, i) => (
+          {steps.map((f, i) => (
             <ScrollReveal key={i} direction="up" delay={i * 200}>
               <Card hover className="text-center bg-white/5 border-white/10 backdrop-blur-sm h-full">
-                <div className="w-16 h-16 bg-orange/20 rounded-2xl flex items-center justify-center mx-auto mb-5 text-orange">
-                  {f.icon}
+                <div className="w-12 h-12 bg-orange rounded-full flex items-center justify-center mx-auto mb-4 text-white font-extrabold text-xl">
+                  {f.step}
                 </div>
                 <h3 className="text-white font-bold text-lg mb-1">{f.title}</h3>
                 <p className="text-orange text-sm font-semibold mb-3">{f.subtitle}</p>