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