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/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>
+    );
+}