feat(trajectoire): intégration complète de la page Construire sa trajectoire

- Implémentation des composants React (8 trajectoires, Human Employment Model, méthodologie 6 étapes, Learning by Doing, exemples de projets, compétences)
- Rendu dynamique des cartes via .map()
- Configuration du routage SPA dans Symfony (route catch-all) et React Router (Header Link)
- Ajustements graphiques et CSS conformes au Figma (#F4F1EA, vert olive)

assets/components/CompetencesEvoluer.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import '../styles/competences-evoluer.css';
+
+const COMPETENCES_DATA = [
+    {
+        id: 1,
+        title: "Compétences professionnelles",
+        content: "Gestion de projet. Communication. Coordination. Recherche appliquée. Organisation. Développement commercial. Leadership. Gestion durable. Développement durable. Pensée stratégique."
+    },
+    {
+        id: 2,
+        title: "Compétences humaines",
+        content: "Confiance. Autonomie. Résilience. Adaptabilité. Intelligence émotionnelle. Leadership. Collaboration. Prise de décision. Gestion du changement."
+    },
+    {
+        id: 3,
+        title: "Vision systémique",
+        intro: "Comprendre les liens entre :",
+        content: "les individus, les organisations, l'économie, les territoires, les communautés, les projets, et les enjeux de transition."
+    }
+];
+
+export default function CompetencesEvoluer() {
+    return (
+        <section className="competences-section" id="competences-evoluer">
+            <div className="competences-container">
+
+                {/* Trait vert au-dessus */}
+                <div className="competences-green-line" aria-hidden="true" />
+
+                {/* En-tête */}
+                <span className="competences-tag-top">Les trajectoires</span>
+                <h2 className="competences-main-title">
+                    Des compétences pour évoluer.
+                </h2>
+
+                {/* Grille des 3 cartes blanches avec .map() */}
+                <div className="competences-grid">
+                    {COMPETENCES_DATA.map((item) => (
+                        <article key={item.id} className="competence-card">
+                            <h3 className="competence-card-title">{item.title}</h3>
+                            {item.intro && (
+                                <p className="competence-card-intro">{item.intro}</p>
+                            )}
+                            <p className="competence-card-text">{item.content}</p>
+                        </article>
+                    ))}
+                </div>
+
+            </div>
+        </section>
+    );
+}

assets/components/ConstruireTrajectoire.jsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import heroTrajectoireImg from '../img/img-traject-banner.jpg';
+import HuitTrajectoires from './HuitTrajectoires';
+import HumanEmploymentModel from './HumanEmploymentModel';
+import MethodologieEtapes from './MethodologieEtapes';
+import LearningByDoing from './LearningByDoing';
+import ExemplesProjets from './ExemplesProjets';
+import '../styles/trajectoire.css';
+
+export default function ConstruireTrajectoire() {
+    return (
+        <div className="trajectoire-page">
+            {/* 1. Hero */}
+            <section
+                className="trajectoire-hero"
+                style={{ backgroundImage: `url("${heroTrajectoireImg}")` }}
+            >
+                <div className="trajectoire-overlay" />
+                <div className="trajectoire-hero-content">
+                    <div className="trajectoire-text-wrapper">
+                        <h1 className="trajectoire-title">
+                            Construire sa <br />
+                            trajectoire.
+                        </h1>
+                        <div className="trajectoire-paragraphs">
+                            <p>Parfois, nous savons exactement où nous voulons aller.</p>
+                            <p>Parfois, nous savons simplement que nous ne pouvons plus rester là où nous sommes.</p>
+                            <p>Depuis plus de vingt ans, gaea21 accompagne les personnes dans ces moments de transition, d'évolution et de construction.</p>
+                            <p>Non pas en leur proposant une solution unique.</p>
+                        </div>
+                        <div className="trajectoire-cta-group">
+                            <a href="#questionnaire" className="btn-trajectoire-primary">
+                                Trouver ma trajectoire
+                            </a>
+                            <a href="#approche" className="btn-trajectoire-secondary">
+                                Découvrir notre approche
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            {/* 2. Questionnaire Intro */}
+            <section className="trajectoire-intro-questions" id="questionnaire">
+                <div className="trajectoire-questions-container">
+                    <span className="trajectoire-subtitle-green">
+                        Trouvons ensemble la trajectoire qui vous correspond
+                    </span>
+                    <h2 className="trajectoire-heading-black">
+                        Répondez à quelques questions.
+                    </h2>
+                    <div className="trajectoire-action-wrapper">
+                        <a href="#demarrer" className="btn-trajectoire-commencer">
+                            Commencer
+                        </a>
+                    </div>
+                </div>
+            </section>
+
+            {/* 3. Les 8 Trajectoires */}
+            <HuitTrajectoires />
+
+            {/* 4. Approche Human Employment Model */}
+            <HumanEmploymentModel />
+
+            {/* 5. Méthodologie en 6 Étapes */}
+            <MethodologieEtapes />
+
+            {/* 6. Learning by Doing */}
+            <LearningByDoing />
+
+            {/* 7. Exemples de projets */}
+            <ExemplesProjets />
+        </div>
+    );
+}

assets/components/ExemplesProjets.jsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import '../styles/exemples-projets.css';
+
+const PROJETS_DATA = [
+    {
+        id: 1,
+        title: "Répertoire Vert",
+        description: "Développer l'économie locale durable."
+    },
+    {
+        id: 2,
+        title: "Green Index",
+        description: "Construire des outils d'évaluation et de transition."
+    },
+    {
+        id: 3,
+        title: "Recherche appliquée",
+        description: "Transformer les connaissances en solutions concrètes."
+    },
+    {
+        id: 4,
+        title: "Développement commercial",
+        description: "Créer des liens entre projets, entreprises et opportunités."
+    },
+    {
+        id: 5,
+        title: "Innovation territoriale",
+        description: "Contribuer à la transformation des territoires."
+    },
+    {
+        id: 6,
+        title: "Programmes de développement international",
+        description: "Participer à des initiatives liées à l'agriculture durable, à la création d'emplois, à la recherche et au développement territorial."
+    }
+];
+
+export default function ExemplesProjets() {
+    return (
+        <section className="projets-section" id="exemples-projets">
+            <div className="projets-container">
+
+                {/* Surtitre */}
+                <span className="projets-tag-top">Quelques exemples de projets</span>
+
+                {/* Grille des 6 projets avec .map() */}
+                <div className="projets-grid">
+                    {PROJETS_DATA.map((projet) => (
+                        <article key={projet.id} className="projet-card">
+                            <h3 className="projet-card-title">{projet.title}</h3>
+                            <p className="projet-card-desc">{projet.description}</p>
+                        </article>
+                    ))}
+                </div>
+
+                {/* Bouton d'action CTA */}
+                <div className="projets-action">
+                    <a href="#tous-les-projets" className="btn-decouvrir-projets">
+                        Découvrez les projets
+                    </a>
+                </div>
+
+            </div>
+        </section>
+    );
+}

assets/components/Header.jsx

@@ -1,117 +1,75 @@
-// 1. IMPORTATION DES MODULES ET ASSETS
 import React, { useState } from 'react';
-
-// Import du logo gaea21 via Webpack Encore (gestion du hashing et du chemin public)
+import { Link } from 'react-router-dom';
 import logo from '../img/logo_gaea21.png';
 
-/**
- * 2. COMPOSANT PRINCIPAL : Header
- * 
- * Rôle fonctionnel :
- * - Fournit la barre de navigation principale (Navbar) fixée ou relative en haut de page.
- * - Gère l'affichage responsive : menu étendu sur desktop, tiroir repliable (drawer) sur mobile.
- * - Propose un bouton d'action principal (« Participer ») pour convertir le visiteur.
- */
 export default function Header() {
-    /**
-     * ÉTAT LOCAL (State) : isOpen
-     * - false : le menu mobile est fermé
-     * - true  : le menu mobile est ouvert (déroulé/visible)
-     */
     const [isOpen, setIsOpen] = useState(false);
 
+    const closeMenu = () => {
+        setIsOpen(false);
+    };
+
     return (
-        /* 
-          Balise sémantique HTML5 <header> :
-          - navbar-container : gère le fond, la bordure inférieure éventuelle, 
-            la hauteur fixe et le z-index pour rester au-dessus du contenu de la page.
-        */
         <header className="navbar-container">
-
-            {/* 
-        Conteneur interne centré :
-        - navbar-content : applique un flexbox (justify-content: space-between, align-items: center)
-          et borne la largeur maximale avec un padding latéral propre.
-      */}
             <div className="navbar-content">
-
-                {/* =========================================================
-            A. LOGO DE LA MARQUE
-            ========================================================= */}
-                <a href="/" className="navbar-logo" aria-label="Retour à l'accueil gaea21">
+                {/* Logo gaea21 ramenant à l'accueil */}
+                <Link
+                    to="/"
+                    className="navbar-logo"
+                    onClick={closeMenu}
+                    aria-label="Retour à l'accueil gaea21"
+                >
                     <img src={logo} alt="Logo gaea21" />
-                </a>
+                </Link>
 
-                {/* =========================================================
-            B. BOUTON BURGER (Affiché uniquement sur écrans mobiles)
-            ========================================================= */}
+                {/* Bouton burger mobile */}
                 <button
                     type="button"
-                    /* 
-                      Basculement dynamique de la classe 'active' :
-                      Permet en CSS d'animer les 3 barres pour former une croix 'X' quand isOpen vaut true.
-                    */
                     className={`hamburger ${isOpen ? 'active' : ''}`}
-                    /* Inverse la valeur booléenne au clic (ouvre ou ferme le menu) */
                     onClick={() => setIsOpen(!isOpen)}
-                    /* Attributs d'accessibilité ARIA pour les lecteurs d'écran */
-                    aria-label={isOpen ? 'Fermer le menu de navigation' : 'Ouvrir le menu de navigation'}
+                    aria-label={isOpen ? 'Fermer le menu' : 'Ouvrir le menu'}
                     aria-expanded={isOpen}
                 >
-                    {/* Les 3 barres horizontales du burger dessinées en CSS */}
                     <span></span>
                     <span></span>
                     <span></span>
                 </button>
 
-                {/* =========================================================
-            C. MENU DE NAVIGATION (DESKTOP & TIROIR MOBILE)
-            ========================================================= */}
-                {/* 
-          La classe 'open' est ajoutée conditionnellement pour déclencher 
-          l'apparition du tiroir de navigation en version mobile.
-        */}
+                {/* Navigation principale */}
                 <nav className={`navbar-nav ${isOpen ? 'open' : ''}`}>
-
-                    {/* Liste ordonnée des ancres de navigation */}
                     <ul className="nav-links">
                         <li>
-                            {/* Le onClick={() => setIsOpen(false)} referme automatiquement le menu mobile après le clic */}
-                            <a href="#parcours" onClick={() => setIsOpen(false)}>
+                            <Link to="/#parcours" onClick={closeMenu}>
                                 Parcours
-                            </a>
+                            </Link>
                         </li>
                         <li>
-                            <a href="#projet" onClick={() => setIsOpen(false)}>
+                            <Link to="/trajectoire" onClick={closeMenu}>
                                 Projet
-                            </a>
+                            </Link>
                         </li>
                         <li>
-                            <a href="#ecosysteme" onClick={() => setIsOpen(false)}>
+                            <Link to="/#ecosysteme" onClick={closeMenu}>
                                 Écosystème
-                            </a>
+                            </Link>
                         </li>
                         <li>
-                            <a href="#contact" onClick={() => setIsOpen(false)}>
+                            <Link to="/#contact" onClick={closeMenu}>
                                 Contact
-                            </a>
+                            </Link>
                         </li>
                     </ul>
 
-                    {/* =========================================================
-              D. BOUTON D'ACTION PRINCIPAL (CALL-TO-ACTION)
-              ========================================================= */}
+                    {/* Bouton d'action */}
                     <div className="navbar-action">
-                        <a
-                            href="#participer"
+                        <Link
+                            to="/#participer"
                             className="btn-participer"
-                            // Ferme le menu mobile si cliqué
-                            onClick={() => setIsOpen(false)}
+                            onClick={closeMenu}
                         >
                             Participer
-                        </a>
+                        </Link>
                     </div>
-
                 </nav>
             </div>
         </header>

assets/components/Home.jsx

@@ -1,82 +1,35 @@
-// 1. IMPORTATION DES DÉPENDANCES ET COMPOSANTS ENFANTS
-import React from 'react';
-
-// Barre de navigation supérieure (Logo, Liens, Boutons d'action)
+import React, { useState } from 'react';
 import Header from './Header';
-
-// Section d'accroche principale (Titre fort, boutons d'appel à l'action, visuel héroïque)
 import Hero from './Hero';
-
-// Cartes des profils cibles ("Qui êtes-vous ?") : Individus, Entreprises, Institutions, etc.
 import ProfileCards from './ProfileCards';
-
-// Section explicative de la méthodologie ("Comment ça fonctionne ?") en 6 étapes + chiffres clés
 import Methodology from './Methodology';
-
-// Section de preuve d'impact chiffrée avec fond immersif et carrousel
 import Impact from './Impact';
-
-// Section actualités : événements, articles, publications et formulaire de newsletter intermédiaire
 import ActualitySection from './ActualitySection';
-
-// Section opportunités et carrières ("Construire des trajectoires, pas seulement des emplois")
 import CareersSection from './CareersSection';
-
-// Pied de page complet (Navigation secondaire, réseaux sociaux, newsletter pleine largeur, mentions légales)
 import Footer from './Footer';
+import ConstruireTrajectoire from './ConstruireTrajectoire';
 
-/**
- * 2. COMPOSANT RACINE DE LA PAGE D'ACCUEIL : Home
- * 
- * Rôle architectural :
- * - Sert de page principale (Page Component / Container) orchestrant la disposition verticale
- *   de toutes les sections de la page d'accueil de gaea21.
- * - Assure une hiérarchie sémantique HTML5 claire pour le référencement (SEO) et l'accessibilité.
- */
 export default function Home() {
+    const [view, setView] = useState('home');
+
     return (
-        /* 
-          CONTENEUR GLOBAL DE PAGE :
-          - relative : sert de référentiel de positionnement pour d'éventuels éléments absolus.
-          - min-h-screen : garantit que la page couvre au minimum 100% de la hauteur de la fenêtre (évite les fonds blancs coupés).
-          - bg-white : couleur de fond par défaut pour l'ensemble du site.
-          - overflow-x-hidden : masque tout débordement horizontal causé par des animations, des bannières pleine largeur ou des marges négatives.
-        */
         <div className="relative min-h-screen bg-white overflow-x-hidden">
-
-            {/* 
-        A. EN-TÊTE DU SITE
-        Balise <Header /> contenant la navigation principale fixée ou relative en haut de page.
-      */}
-            <Header />
-
-            {/* 
-        B. CONTENU PRINCIPAL DE LA PAGE
-        La balise sémantique HTML5 <main> délimite le cœur informationnel unique de la page d'accueil.
-      */}
+            <Header onNavigate={setView} />
             <main>
-                {/* Bannière d'introduction */}
-                <Hero />
-
-                {/* Sélection des parcours utilisateurs */}
-                <ProfileCards />
-
-                {/* Présentation du modèle "Learning by Doing" */}
-                <Methodology />
-
-                {/* Statistiques d'impact et résultats sur 20 ans */}
-                <Impact />
-
-                {/* Actualités, publications et veille */}
-                <ActualitySection />
-
-                {/* Opportunités professionnelles et développement de compétences */}
-                <CareersSection />
-
-                {/* Pied de page et liens institutionnels */}
-                <Footer />
+                {view === 'trajectoire' ? (
+                    <ConstruireTrajectoire />
+                ) : (
+                    <>
+                        <Hero />
+                        <ProfileCards />
+                        <Methodology />
+                        <Impact />
+                        <ActualitySection />
+                        <CareersSection />
+                        <Footer />
+                    </>
+                )}
             </main>
-
         </div>
     );
 }

assets/components/HuitTrajectoires.jsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import heroTrajectoireImg from '../img/img-traject-banner.png';
+import HuitTrajectoires from './HuitTrajectoires';
+import HumanEmploymentModel from './HumanEmploymentModel';
+import MethodologieEtapes from './MethodologieEtapes';
+import LearningByDoing from './LearningByDoing';
+import ExemplesProjets from './ExemplesProjets';
+import CompetencesEvoluer from './CompetencesEvoluer';
+import '../styles/trajectoire.css';
+
+export default function ConstruireTrajectoire() {
+    return (
+        <div className="trajectoire-page">
+            {/* 1. Hero */}
+            <section
+                className="trajectoire-hero"
+                style={{ backgroundImage: `url("${heroTrajectoireImg}")` }}
+            >
+                <div className="trajectoire-overlay" />
+                <div className="trajectoire-hero-content">
+                    <div className="trajectoire-text-wrapper">
+                        <h1 className="trajectoire-title">
+                            Construire sa <br />
+                            trajectoire.
+                        </h1>
+                        <div className="trajectoire-paragraphs">
+                            <p>Parfois, nous savons exactement où nous voulons aller.</p>
+                            <p>Parfois, nous savons simplement que nous ne pouvons plus rester là où nous sommes.</p>
+                            <p>Depuis plus de vingt ans, gaea21 accompagne les personnes dans ces moments de transition, d'évolution et de construction.</p>
+                            <p>Non pas en leur proposant une solution unique.</p>
+                        </div>
+                        <div className="trajectoire-cta-group">
+                            <a href="#questionnaire" className="btn-trajectoire-primary">
+                                Trouver ma trajectoire
+                            </a>
+                            <a href="#approche" className="btn-trajectoire-secondary">
+                                Découvrir notre approche
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            {/* 2. Questionnaire Intro */}
+            <section className="trajectoire-intro-questions" id="questionnaire">
+                <div className="trajectoire-questions-container">
+                    <span className="trajectoire-subtitle-green">
+                        Trouvons ensemble la trajectoire qui vous correspond
+                    </span>
+                    <h2 className="trajectoire-heading-black">
+                        Répondez à quelques questions.
+                    </h2>
+                    <div className="trajectoire-action-wrapper">
+                        <a href="#demarrer" className="btn-trajectoire-commencer">
+                            Commencer
+                        </a>
+                    </div>
+                </div>
+            </section>
+
+            {/* 3. Les 8 Trajectoires */}
+            <HuitTrajectoires />
+
+            {/* 4. Approche Human Employment Model */}
+            <HumanEmploymentModel />
+
+            {/* 5. Méthodologie en 6 Étapes */}
+            <MethodologieEtapes />
+
+            {/* 6. Learning by Doing */}
+            <LearningByDoing />
+
+            {/* 7. Exemples de projets */}
+            <ExemplesProjets />
+
+            {/* 8. Des compétences pour évoluer */}
+            <CompetencesEvoluer />
+        </div>
+    );
+}

assets/components/HumanEmploymentModel.jsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import '../styles/human-employment.css';
+import hemImg from '../img/human-model-banner.png'; // Adapte le nom de ton image
+
+const PILLIERS_DATA = [
+    {
+        id: 1,
+        title: "La personne",
+        items: ["Ses aspirations.", "Ses motivations.", "Ses besoins.", "Ses valeurs."]
+    },
+    {
+        id: 2,
+        title: "Les compétences",
+        items: ["Celles qu'elle possède déjà.", "Celles qu'elle doit développer."]
+    },
+    {
+        id: 3,
+        title: "L'expérience",
+        items: ["Les projets.", "Les réalisations.", "Les responsabilités."]
+    },
+    {
+        id: 4,
+        title: "Le réseau",
+        items: ["Ses aspirations.", "Ses motivations.", "Ses besoins.", "Ses valeurs."]
+    }
+];
+
+export default function HumanEmploymentModel() {
+    return (
+        <section className="hem-wrapper">
+            <div className="hem-inner">
+
+                {/* Paragraphe descriptif */}
+                <p className="hem-description">
+                    Chaque parcours est unique et ne peut pas se réduire à un simple intitulé de poste.
+                    Nous considérons que les trajectoires durables se construisent lorsque quatre dimensions essentielles s'articulent.
+                </p>
+
+                {/* Grille forcée sur 4 colonnes */}
+                <div className="hem-cards-grid">
+                    {PILLIERS_DATA.map((p) => (
+                        <div key={p.id} className="hem-card">
+                            <h3 className="hem-card-title">{p.title}</h3>
+                            <ul className="hem-card-list">
+                                {p.items.map((it, idx) => (
+                                    <li key={idx}>{it}</li>
+                                ))}
+                            </ul>
+                        </div>
+                    ))}
+                </div>
+
+                {/* Phrase d'accroche */}
+                <p className="hem-phrase">
+                    C’est cette approche que nous appelons le <strong>Human Employment Model</strong>.
+                </p>
+
+                {/* Cadre de l'image */}
+                <div className="hem-banner-container">
+                    <img
+                        src={hemImg}
+                        alt="Human Employment Model Table"
+                        className="hem-banner-img"
+                    />
+                </div>
+
+            </div>
+        </section>
+    );
+}

assets/components/LearningByDoing.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import '../styles/learning-by-doing.css';
+import plantBannerImg from '../img/learning-by-doing.png'; // ou learning-by-doing.png
+
+export default function LearningByDoing() {
+    return (
+        <section className="lbd-section" id="learning-by-doing">
+            <div className="lbd-container">
+
+                {/* Trait vert au-dessus */}
+                <div className="lbd-green-line" aria-hidden="true" />
+
+                {/* Surtitre */}
+                <span className="lbd-tag-top">Les trajectoires</span>
+
+                {/* Titre principal */}
+                <h2 className="lbd-main-title">
+                    Le Learning by Doing au cœur de l'expérience.
+                </h2>
+
+                {/* Paragraphe descriptif conforme au Figma */}
+                <p className="lbd-description">
+                    Depuis plus de vingt ans, gaea21 accompagne les personnes dans ces moments de transition, d'évolution et de construction.
+                    Non pas en leur proposant une solution unique, mais en les aidant à comprendre leur situation, identifier leurs forces,
+                    développer leurs compétences, acquérir de l'expérience et construire une trajectoire cohérente avec leurs aspirations et la réalité du monde qui les entoure.
+                </p>
+
+                {/* Image bannière arrondie */}
+                <div className="lbd-image-wrapper">
+                    <img
+                        src={plantBannerImg}
+                        alt="Le Learning by Doing au cœur de l'expérience - gaea21"
+                        className="lbd-banner-img"
+                    />
+                </div>
+
+            </div>
+        </section>
+    );
+}

assets/components/MethodologieEtapes.jsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import '../styles/methodologie-etapes.css';
+
+// Import des 6 icônes
+import iconSearch from '../img/Search.png';
+import iconUser from '../img/User Account.png';
+import iconWrench from '../img/Frame 715.png';
+import iconPlant from '../img/Tree Planting.png';
+import iconElectrical from '../img/Electrical.png';
+import iconCycle from '../img/Frame 719.png';
+
+const ETAPES_DATA = [
+    {
+        step: "01",
+        title: "Comprendre",
+        description: "Identifier votre situation, vos aspirations, vos compétences et vos besoins.",
+        icon: iconSearch,
+        hasCircleBg: false // L'icône est brute, on lui applique le cercle CSS
+    },
+    {
+        step: "02",
+        title: "Structurer",
+        description: "Construire une trajectoire réaliste, progressive et durable.",
+        icon: iconUser,
+        hasCircleBg: false
+    },
+    {
+        step: "03",
+        title: "Expérimenter",
+        description: "Développer des compétences à travers des projets réels.",
+        icon: iconWrench,
+        hasCircleBg: true // Frame 715 contient déjà son cercle de fond
+    },
+    {
+        step: "04",
+        title: "Développer",
+        description: "Renforcer son autonomie, ses capacités d'action et son leadership.",
+        icon: iconPlant,
+        hasCircleBg: false
+    },
+    {
+        step: "05",
+        title: "Connecter",
+        description: "S'inscrire dans un écosystème bienveillant et activer son réseau.",
+        icon: iconElectrical,
+        hasCircleBg: false
+    },
+    {
+        step: "06",
+        title: "Évoluer",
+        description: "Mesurer l'impact de sa transition et pérenniser son parcours.",
+        icon: iconCycle,
+        hasCircleBg: true // Frame 719 contient déjà son cercle de fond
+    }
+];
+
+export default function MethodologieEtapes() {
+    return (
+        <section className="etapes-section">
+            <div className="etapes-container">
+                <div className="etapes-grid">
+                    {ETAPES_DATA.map((item) => (
+                        <div key={item.step} className="etape-item">
+
+                            {/* Conteneur cercle + badge numéro */}
+                            <div className="etape-circle-wrapper">
+                                <div className={`etape-circle ${item.hasCircleBg ? 'transparent-bg' : ''}`}>
+                                    <img
+                                        src={item.icon}
+                                        alt={item.title}
+                                        className="etape-icon-img"
+                                    />
+                                </div>
+                                <span className="etape-badge">{item.step}</span>
+                            </div>
+
+                            {/* Titre et description */}
+                            <h3 className="etape-title">{item.title}</h3>
+                            <p className="etape-desc">{item.description}</p>
+
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
+}