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/styles/methodologie-etapes.css

@@ -0,0 +1,106 @@
+/* ==========================================================================
+   SECTION MÉTHODOLOGIE EN 6 ÉTAPES (FIGMA)
+   ========================================================================== */
+
+.etapes-section {
+    width: 100%;
+    background-color: #ffffff;
+    padding: 4rem 2rem 6rem 2rem;
+    box-sizing: border-box;
+}
+
+.etapes-container {
+    max-width: 1140px;
+    margin: 0 auto;
+}
+
+/* Grille 3 colonnes x 2 lignes */
+.etapes-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    row-gap: 4rem;
+    column-gap: 3rem;
+    justify-items: center;
+}
+
+/* Bloc d'une étape */
+.etape-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    max-width: 280px;
+}
+
+/* Cercle beige avec liseré */
+.etape-circle-wrapper {
+    position: relative;
+    width: 104px;
+    height: 104px;
+    margin-bottom: 1.5rem;
+}
+
+.etape-circle {
+    width: 100%;
+    height: 100%;
+    background-color: #F4F1EA;
+    border: 1.5px solid #d5dec3;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
+}
+
+/* Badge vert foncé avec numéro */
+.etape-badge {
+    position: absolute;
+    top: -2px;
+    right: -2px;
+    background-color: #435227;
+    color: #ffffff;
+    font-size: 0.72rem;
+    font-weight: 700;
+    width: 26px;
+    height: 26px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 2px solid #ffffff;
+}
+
+/* Textes */
+.etape-title {
+    font-size: 1.15rem;
+    font-weight: 700;
+    color: #111827;
+    margin: 0 0 0.6rem 0;
+}
+
+.etape-desc {
+    font-size: 0.82rem;
+    line-height: 1.5;
+    color: #6b7280;
+    margin: 0;
+}
+
+/* Responsive */
+@media (max-width: 900px) {
+    .etapes-grid {
+        grid-template-columns: repeat(2, 1fr);
+        row-gap: 3rem;
+        column-gap: 2rem;
+    }
+}
+
+@media (max-width: 580px) {
+    .etapes-grid {
+        grid-template-columns: 1fr;
+        row-gap: 2.5rem;
+    }
+
+    .etapes-section {
+        padding: 3rem 1.5rem 4rem 1.5rem;
+    }
+}