feat(parcours): intégration des sections de la page Parcours conforme à Figma

- Prise en charge du thème sombre du Header sur la route /parcours
- Ajout de la section Hero et présentation des chiffres clés
- Grille des profils 'Qui peut rejoindre' avec méthode map() et icônes
- Intégration de la timeline verticale des étapes d'intégration
- Ajout du bandeau 'Learning by Doing'
- Restructuration des composants par dossier

assets/components/home/Hero.jsx

@@ -0,0 +1,104 @@
+// 1. IMPORTATIONS DES MODULES ET DES ASSETS
+import React from 'react';
+
+// Import de l'image de bannière principale via Webpack Encore
+// Webpack génère automatiquement le bon chemin d'accès avec hachage pour le cache
+import heroBg from '../../img/hero-banner.png';
+
+/**
+ * 2. COMPOSANT PRINCIPAL : Hero
+ * 
+ * Rôle fonctionnel et visuel :
+ * - Première section visible sous le Header (zone "Above the Fold").
+ * - Transmet la proposition de valeur principale de gaea21 via un titre H1 percutant.
+ * - Propose un bouton d'action (Call-to-Action) guidant l'utilisateur vers la découverte de l'écosystème.
+ */
+export default function Hero() {
+    return (
+        /* 
+          SECTION ENGOBANTE DU HERO :
+          - className="hero-section" : applique les dimensions (hauteur minimale/100vh), 
+            le positionnement d'arrière-plan (background-size: cover, background-position: center)
+            et le positionnement relatif pour caler les calques enfants.
+          - style={{ backgroundImage: ... }} : injection dynamique de l'URL de l'image 
+            traitée par le bundler Webpack.
+        */
+        <section
+            className="hero-section"
+            style={{ backgroundImage: `url("${heroBg}")` }}
+        >
+            {/* 
+        CALQUE D'OVERLAY SOMBRE :
+        - Élément positionné en absolu couvrant toute la surface de la section.
+        - Applique un gradient ou un filtre semi-transparent sombre afin d'assurer
+          un contraste suffisant (normes d'accessibilité WCAG) entre le texte blanc
+          et les zones claires de l'image d'arrière-plan.
+      */}
+            <div className="hero-overlay"></div>
+
+            {/* 
+        CONTENEUR DE CONTENU CENTRÉ :
+        - Assure le centrage horizontal du bloc de texte sur la largeur maximale de la page.
+        - z-index supérieur à l'overlay pour que les textes et boutons restent cliquables et visibles.
+      */}
+            <div className="hero-content">
+
+                {/* 
+          BLOC TEXTUEL :
+          - Limite la largeur maximale du texte pour éviter qu'il ne s'étale trop sur grands écrans,
+            ce qui garantit un confort de lecture optimal.
+        */}
+                <div className="hero-text-block">
+
+                    {/* 
+            TITRE PRINCIPAL H1 :
+            - Balise unique et essentielle pour le référencement naturel (SEO).
+            - Les balises <br /> forcent des retours à la ligne précis pour sculpter 
+              la silhouette du texte exactement comme sur la maquette Figma.
+          */}
+                    <h1 className="hero-title">
+                        Construire <br />
+                        les infrastructures <br />
+                        humaines, économiques <br />
+                        et territoriales de demain
+                    </h1>
+
+                    {/* 
+            PARAGRAPHE D'INTRODUCTION :
+            - Résume succinctement les axes d'impact et la légitimité historique (20 ans) de gaea21.
+          */}
+                    <p className="hero-description">
+                        Depuis plus de 20 ans, gaea21 relie insertion professionnelle, santé mentale,
+                        économie locale, transition durable, recherche appliquée et innovation systémique.
+                    </p>
+
+                    {/* 
+            BOUTON D'APPEL À L'ACTION (CTA) :
+            - Lien d'ancrage vers la section "#ecosysteme".
+            - Composé d'un label textuel et d'une flèche SVG vectorielle indiquant l'action/la direction.
+          */}
+                    <a href="#ecosysteme" className="btn-hero">
+                        <span>Explorer l'écosystème</span>
+                        {/* Flèche droite indicative (alignée horizontalement avec le texte) */}
+                        <svg
+                            width="18"
+                            height="18"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            strokeWidth="2.5"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            // Masque l'icône purement décorative des lecteurs d'écran
+                            aria-hidden="true"
+                        >
+                            <line x1="5" y1="12" x2="19" y2="12"></line>
+                            <polyline points="12 5 19 12 12 19"></polyline>
+                        </svg>
+                    </a>
+
+                </div>
+            </div>
+        </section>
+    );
+}