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
2026-09-30 15:38:26 +02:00
parent f66e39ab09
commit bb1393e9ef
44 changed files with 1366 additions and 140 deletions
--- a/assets/app.js
+++ b/assets/app.js
@ -1,11 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
-
-import Header from './components/Header.jsx';
-import Home from './components/Home.jsx';
-import ConstruireTrajectoire from './components/ConstruireTrajectoire.jsx';
+import Header from './components/home/Header.jsx';
+import Home from './components/home/Home.jsx';
+import ConstruireTrajectoire from './components/trajectoire/ConstruireTrajectoire.jsx';
 import './styles/app.css';
+import Parcours from './components/parcours/Parcours.jsx';

 function App() {
    return (
@ -14,6 +14,7 @@ function App() {
            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/trajectoire" element={<ConstruireTrajectoire />} />
+                <Route path="/parcours" element={<Parcours />} />
            </Routes>
        </BrowserRouter>
    );
--- a/assets/components/home/ActualitySection.jsx
+++ b/assets/components/home/ActualitySection.jsx
@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import bannerBg from '../img/homepageactuality.png';
+import bannerBg from '../../img/homepageactuality.png';

 const CATEGORIES = ['Tout', 'Actualités', 'Publications', 'Évènements', 'Projets'];

--- a/assets/components/home/CareersSection.jsx
+++ b/assets/components/home/CareersSection.jsx
@ -1,5 +1,5 @@
 import React from 'react';
-import carreerBg from '../img/carreer.png';
+import carreerBg from '../../img/carreer.png';

 export default function CareersSection() {
    const parcours = [
--- a/assets/components/home/Header.jsx
+++ b/assets/components/home/Header.jsx
@ -1,9 +1,17 @@
 import React, { useState } from 'react';
-import { Link } from 'react-router-dom';
-import logo from '../img/logo_gaea21.png';
+import { Link, useLocation } from 'react-router-dom';
+import logo from '../../img/logo_gaea21.png';
+import '../../styles/header.css';

-export default function Header() {
+export default function Header({ onNavigate }) {
    const [isOpen, setIsOpen] = useState(false);
+    const location = useLocation();
+
+    // Active la couleur blanche (nav-light) pour trajectoire, projet et parcours
+    const isDark =
+        location.pathname === '/trajectoire' ||
+        location.pathname === '/projet' ||
+        location.pathname === '/parcours';

    const closeMenu = () => {
        setIsOpen(false);
@ -12,7 +20,7 @@ export default function Header() {
    return (
        <header className="navbar-container">
            <div className="navbar-content">
-                {/* Logo gaea21 ramenant à l'accueil */}
+                {/* Logo gaea21 */}
                <Link
                    to="/"
                    className="navbar-logo"
@ -37,9 +45,10 @@ export default function Header() {

                {/* Navigation principale */}
                <nav className={`navbar-nav ${isOpen ? 'open' : ''}`}>
-                    <ul className="nav-links">
+                    {/* Applique la classe nav-light si la page a un fond sombre */}
+                    <ul className={`nav-links ${isDark ? 'nav-light' : ''}`}>
                        <li>
-                            <Link to="/#parcours" onClick={closeMenu}>
+                            <Link to="/parcours" onClick={closeMenu}>
                                Parcours
                            </Link>
                        </li>
@ -68,7 +77,7 @@ export default function Header() {
                        </li>
                    </ul>

-                    {/* Bouton d'action */}
+                    {/* Bouton Participer */}
                    <div className="navbar-action">
                        <Link
                            to="/#participer"
--- a/assets/components/home/Hero.jsx
+++ b/assets/components/home/Hero.jsx
@ -3,7 +3,7 @@ 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';
+import heroBg from '../../img/hero-banner.png';

 /**
 * 2. COMPOSANT PRINCIPAL : Hero
--- a/assets/components/home/Home.jsx
+++ b/assets/components/home/Home.jsx
@ -5,7 +5,8 @@ import Methodology from './Methodology';
 import Impact from './Impact';
 import ActualitySection from './ActualitySection';
 import CareersSection from './CareersSection';
-import Footer from './Footer';
+import Footer from '../Footer';
+// import Hero from './Hero';

 export default function Home() {
    return (
--- a/assets/components/home/Impact.jsx
+++ b/assets/components/home/Impact.jsx
@ -2,7 +2,7 @@
 import React, { useState } from 'react';

 // Webpack Encore gère l'empreinte de hachage (hash) et le chemin public de l'image de fond
-import impactBg from '../img/impact.png';
+import impactBg from '../../img/impact.png';

 /**
 * 2. STRUCTURE DE DONNÉES STATIQUE : DIAPOSITIVES DU CARROUSEL
--- a/assets/components/home/Methodology.jsx
+++ b/assets/components/home/Methodology.jsx
--- a/assets/components/home/ProfileCards.jsx
+++ b/assets/components/home/ProfileCards.jsx
@ -2,10 +2,10 @@
 import React from 'react';

 // Webpack Encore gère l'empreinte de hachage (hashing) et le chemin public des images
-import individusImg from '../img/individus.png';
-import entrepriseImg from '../img/entreprise.png';
-import institutionsImg from '../img/institutions.png';
-import coachImg from '../img/coach.png';
+import individusImg from '../../img/individus.png';
+import institutionsImg from '../../img/institutions.png';
+import coachImg from '../../img/coach.png';
+import entrepriseImg from '../../img/entreprise.png';

 /**
 * 2. STRUCTURE DE DONNÉES STATIQUE : LISTE DES PROFILS CIBLES
--- a/assets/components/parcours/LearningByDoing.jsx
+++ b/assets/components/parcours/LearningByDoing.jsx
@ -0,0 +1,66 @@
+import React from 'react';
+import learningImg from '../../img/image-learning.png'; // Adapte avec le nom de l'image fournie
+
+export default function LearningByDoing() {
+    return (
+        <section className="relative w-full min-h-[460px] lg:h-[500px] flex items-center overflow-hidden bg-neutral-950 font-sans">
+            {/* 1. Image de fond positionnée sur la droite */}
+            <img
+                src={learningImg}
+                alt="Learning by Doing gaea21"
+                className="absolute inset-0 w-full h-full object-cover object-[75%_center] md:object-right z-0 pointer-events-none select-none"
+            />
+
+            {/* 2. Dégradé sombre pour la lisibilité du texte à gauche */}
+            <div className="absolute inset-0 bg-gradient-to-r from-black via-black/85 to-transparent z-10 pointer-events-none" />
+
+            {/* 3. Contenu textuel aligné sur la même grille que le reste de la page */}
+            <div className="relative z-20 max-w-[1240px] w-full mx-auto px-6 md:px-12 py-14 lg:py-20">
+                <div className="max-w-xl text-left">
+                    {/* Surtitre doré / olive */}
+                    <span className="text-[11px] sm:text-xs font-semibold uppercase tracking-widest text-[#a8ad48] block mb-3">
+                        APPRENDRE EN FAISANT
+                    </span>
+
+                    {/* Titre principal */}
+                    <h2 className="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-white tracking-tight leading-tight mb-4">
+                        Le Learning by Doing au cœur du modèle.
+                    </h2>
+
+                    {/* Paragraphe d'introduction */}
+                    <p className="text-xs sm:text-[13px] text-gray-300 leading-relaxed mb-4">
+                        Chez gaea21, nous considérons que les compétences se développent avant tout dans l’action.
+                        Les participants contribuent à :
+                    </p>
+
+                    {/* Liste à puces */}
+                    <ul className="space-y-1.5 text-xs sm:text-[13px] text-gray-200 leading-relaxed mb-5 pl-1">
+                        <li className="flex items-center gap-2">
+                            <span className="w-1.5 h-1.5 rounded-full bg-[#a8ad48]" />
+                            <span>des projets réels ;</span>
+                        </li>
+                        <li className="flex items-center gap-2">
+                            <span className="w-1.5 h-1.5 rounded-full bg-[#a8ad48]" />
+                            <span>des équipes réelles ;</span>
+                        </li>
+                        <li className="flex items-center gap-2">
+                            <span className="w-1.5 h-1.5 rounded-full bg-[#a8ad48]" />
+                            <span>des outils réels ;</span>
+                        </li>
+                        <li className="flex items-center gap-2">
+                            <span className="w-1.5 h-1.5 rounded-full bg-[#a8ad48]" />
+                            <span>des problématiques réelles.</span>
+                        </li>
+                    </ul>
+
+                    {/* Conclusion */}
+                    <div className="space-y-1 text-xs sm:text-[13px] text-gray-300 leading-relaxed border-t border-white/10 pt-4">
+                        <p>Ils apprennent en expérimentant.</p>
+                        <p>Ils développent leur autonomie en contribuant.</p>
+                        <p>Ils acquièrent de l’expérience en produisant des résultats concrets.</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+}
--- a/assets/components/parcours/Parcours.jsx
+++ b/assets/components/parcours/Parcours.jsx
@ -0,0 +1,18 @@
+import React from 'react';
+import ParcoursHero from './ParcoursHero';
+import ParcoursPresentation from './ParcoursPresentation';
+import QuiPeutRejoindre from './QuiPeutRejoindre';
+import ParcoursIntegration from './ParcoursIntegration';
+import LearningByDoing from './LearningByDoing';
+
+export default function Parcours() {
+    return (
+        <main className="w-full">
+            <ParcoursHero />
+            <ParcoursPresentation />
+            <QuiPeutRejoindre />
+            <ParcoursIntegration />
+            <LearningByDoing />
+        </main>
+    );
+}
--- a/assets/components/parcours/ParcoursHero.jsx
+++ b/assets/components/parcours/ParcoursHero.jsx
@ -0,0 +1,33 @@
+import React from 'react';
+import heroImg from '../../img/rejoindre-hero.png';
+
+export default function ParcoursHero() {
+    return (
+        <section className="relative w-full min-h-[90vh] flex items-center overflow-hidden bg-[#0b1320]">
+            {/* 1. Image de fond Figma */}
+            <img
+                src={heroImg}
+                alt="Rejoindre gaea21"
+                className="absolute inset-0 w-full h-full object-cover object-[70%_center] md:object-right z-0 pointer-events-none select-none"
+            />
+
+            {/* 2. Overlay sombre latéral */}
+            <div className="absolute inset-0 bg-gradient-to-r from-black/90 via-black/60 to-transparent z-10 pointer-events-none" />
+
+            {/* 3. Textes Figma (REJOINDRE gaea21 + accroche) */}
+            <div className="relative z-20 max-w-[1440px] w-full mx-auto px-6 md:px-12 lg:px-16 pt-24 pb-12">
+                <div className="max-w-xl">
+                    <h1 className="text-white text-5xl sm:text-6xl font-extrabold tracking-tight leading-none mb-6">
+                        <span className="block uppercase">REJOINDRE</span>
+                        <span className="block lowercase font-extrabold">gaea21</span>
+                    </h1>
+
+                    <p className="text-white/95 text-sm sm:text-base font-normal leading-relaxed drop-shadow-sm">
+                        Développer des compétences.<br />
+                        Acquérir de l'expérience. Construire une trajectoire.
+                    </p>
+                </div>
+            </div>
+        </section>
+    );
+}
--- a/assets/components/parcours/ParcoursIntegration.jsx
+++ b/assets/components/parcours/ParcoursIntegration.jsx
@ -0,0 +1,189 @@
+import React from 'react';
+
+// Imports des 7 images (vérifie bien tes extensions .png ou .png)
+import decouvertImg from '../../img/decouvert.png';
+import preProfilImg from '../../img/pre-profil.png';
+import entretienImg from '../../img/entretien.png';
+import constructionImg from '../../img/construction.png';
+import integrationImg from '../../img/intergation.png';
+import developpementImg from '../../img/developpement.png';
+import evolutionImg from '../../img/evolution.png';
+
+const STEPS = [
+    {
+        step: 1,
+        title: 'Étape 1 — Découverte',
+        intro:
+            'Vous découvrez les projets, les équipes, les trajectoires et les opportunités proposées par gaea21.',
+        image: decouvertImg,
+    },
+    {
+        step: 2,
+        title: 'Étape 2 — Pré-profil',
+        intro:
+            'Vous complétez un questionnaire permettant de mieux comprendre :',
+        bullets: [
+            'votre situation ;',
+            'votre parcours ;',
+            'vos compétences ;',
+            'vos objectifs ;',
+            'vos disponibilités ;',
+            'vos centres d’intérêt ;',
+            'vos attentes.',
+        ],
+        conclusion:
+            'Cette étape constitue la base de votre future trajectoire.',
+        image: preProfilImg,
+    },
+    {
+        step: 3,
+        title: 'Étape 3 — Entretien',
+        intro:
+            'Un entretien permet d’approfondir votre démarche et d’identifier les opportunités les plus adaptées :',
+        bullets: [
+            'vos compétences à mobiliser ;',
+            'les projets correspondant à votre profil ;',
+            'ce que vous souhaitez développer.',
+        ],
+        image: entretienImg,
+    },
+    {
+        step: 4,
+        title: 'Étape 4 — Construction de la trajectoire',
+        intro:
+            'À partir des informations recueillies, nous définissons :',
+        bullets: [
+            'vos objectifs d’apprentissage ;',
+            'les compétences à développer ;',
+            'votre rôle dans les projets gaea21 ;',
+            'la durée et le rythme de votre parcours.',
+        ],
+        conclusion:
+            'Cette étape permet de construire une feuille de route sur mesure.',
+        image: constructionImg,
+    },
+    {
+        step: 5,
+        title: 'Étape 5 — Intégration dans les projets',
+        intro:
+            'Vous intégrez un ou plusieurs projets réels :',
+        bullets: [
+            'accompagné(e) par des tuteurs et experts ;',
+            'au sein d’une équipe pluridisciplinaire ;',
+            'avec des livrables concrets à réaliser.',
+        ],
+        image: integrationImg,
+    },
+    {
+        step: 6,
+        title: 'Étape 6 — Développement des compétences',
+        intro:
+            'Vous montez en compétences à travers la pratique :',
+        bullets: [
+            'ateliers, méthodologies et outils gaea21 ;',
+            'développement de compétences transversales et techniques ;',
+            'suivi personnalisé et feedback régulier.',
+        ],
+        image: developpementImg,
+    },
+    {
+        step: 7,
+        title: 'Étape 7 — Évolution et opportunités',
+        intro:
+            'À la fin de votre parcours :',
+        bullets: [
+            'bilan des compétences acquises ;',
+            'attestation de parcours gaea21 ;',
+            'recommandation professionnelle ;',
+            'opportunités de mandats internes ou externes ;',
+            'accès au réseau Alumni gaea21.',
+        ],
+        image: evolutionImg,
+    },
+];
+
+export default function ParcoursIntegration() {
+    return (
+        <section className="w-full bg-[#fbfbf9] text-[#1e293b] py-14 lg:py-20 px-6 md:px-12 font-sans">
+            <div className="max-w-[1240px] mx-auto">
+
+                {/* 1. Le trait vert horizontal au-dessus du titre (identique à Figma) */}
+                <div className="w-12 h-1 bg-[#475734] rounded-full mb-6" />
+
+                {/* 2. Titre de section */}
+                <h2 className="text-base sm:text-lg lg:text-xl font-extrabold uppercase tracking-tight text-[#111827] mb-14 text-left">
+                    COMMENT FONCTIONNE LE{' '}
+                    <span className="text-[#8c8f3e]">PARCOURS D'INTÉGRATION</span> ?
+                </h2>
+
+                {/* 3. Timeline */}
+                <div className="max-w-[940px] mx-auto lg:ml-0 flex flex-col">
+                    {STEPS.map((item, index) => {
+                        const isLast = index === STEPS.length - 1;
+
+                        return (
+                            <div key={item.step} className="flex items-start">
+
+                                {/* Colonne GAUCHE : Illustration */}
+                                <div className="w-[42%] flex justify-end pr-6 sm:pr-10 shrink-0">
+                                    <div className="w-40 h-28 sm:w-52 sm:h-36 flex items-center justify-end">
+                                        <img
+                                            src={item.image}
+                                            alt={item.title}
+                                            className="max-h-full max-w-full object-contain"
+                                        />
+                                    </div>
+                                </div>
+
+                                {/* Colonne CENTRALE : Cercle numéroté + Ligne verticale */}
+                                <div className="relative flex flex-col items-center shrink-0 self-stretch">
+                                    {/* Rond vert olive avec chiffre blanc (Figma) */}
+                                    <div className="w-8 h-8 rounded-full bg-[#8c8f3e] text-white text-xs sm:text-sm font-bold flex items-center justify-center shadow-xs z-10">
+                                        {item.step}
+                                    </div>
+
+                                    {/* Ligne verticale verte reliant chaque pastille */}
+                                    {!isLast && (
+                                        <div className="w-[2px] bg-[#8c8f3e] flex-1 my-1" />
+                                    )}
+                                </div>
+
+                                {/* Colonne DROITE : Textes fidèles à Figma */}
+                                <div className="flex-1 pl-6 sm:pl-10 pb-12 sm:pb-16 text-left">
+                                    <h3 className="text-xs sm:text-sm font-bold text-[#111827] leading-none mb-2">
+                                        {item.title}
+                                    </h3>
+
+                                    {item.intro && (
+                                        <p className="text-[11px] sm:text-xs text-[#52525b] leading-relaxed mb-2 max-w-md">
+                                            {item.intro}
+                                        </p>
+                                    )}
+
+                                    {item.bullets && item.bullets.length > 0 && (
+                                        <ul className="space-y-1 text-[11px] text-[#71717a] leading-tight max-w-md">
+                                            {item.bullets.map((bullet, idx) => (
+                                                <li key={idx} className="flex items-start gap-1.5">
+                                                    <span className="text-[#8c8f3e] text-xs leading-none mt-0.5">•</span>
+                                                    <span>{bullet}</span>
+                                                </li>
+                                            ))}
+                                        </ul>
+                                    )}
+
+                                    {item.conclusion && (
+                                        <p className="text-[11px] text-[#52525b] leading-relaxed mt-2 max-w-md">
+                                            {item.conclusion}
+                                        </p>
+                                    )}
+                                </div>
+
+                            </div>
+                        );
+                    })}
+                </div>
+
+            </div>
+        </section>
+    );
+}
--- a/assets/components/parcours/ParcoursPresentation.jsx
+++ b/assets/components/parcours/ParcoursPresentation.jsx
@ -0,0 +1,182 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import teamImg from '../../img/team-discussion.png'; // Vérifie le chemin de ton image
+
+export default function ParcoursPresentation() {
+  return (
+    <section className="w-full bg-[#fbfbf9] text-[#1e293b] py-14 lg:py-20 px-6 md:px-12 lg:px-20">
+      <div className="max-w-[1320px] mx-auto space-y-20">
+
+        {/* ========================================================
+            PARTIE 1 : INTRODUCTION & STATS BANNER
+        ======================================================== */}
+        <div className="space-y-10">
+          {/* Header 2 colonnes : Titre à gauche / Paragraphes à droite */}
+          <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-16 items-start">
+            <div className="lg:col-span-5">
+              <span className="text-xs uppercase tracking-wider text-[#7a8035] font-semibold block mb-3">
+                REJOINDRE gaea21
+              </span>
+              <h2 className="text-2xl sm:text-3xl lg:text-[32px] font-extrabold text-[#111827] leading-[1.25]">
+                Développer des compétences.<br />
+                Acquérir de l'expérience.<br />
+                Construire une trajectoire.
+              </h2>
+            </div>
+
+            <div className="lg:col-span-7 space-y-3.5 text-xs sm:text-[13px] leading-relaxed text-[#4b5563]">
+              <p>
+                Chaque année, des étudiants, jeunes diplômés, professionnels, entrepreneurs, chercheurs, personnes en transition et experts rejoignent gaea21. Certains recherchent un stage. D'autres souhaitent acquérir une première expérience. Certains cherchent à développer leurs compétences.
+              </p>
+              <p>
+                D'autres souhaitent retrouver une activité professionnelle, lancer un projet ou contribuer à une initiative porteuse de sens. Ce qui les rassemble n'est pas leur parcours. C'est leur volonté d'évoluer.
+              </p>
+              <p>
+                Depuis plus de vingt ans, gaea21 accompagne des milliers de personnes dans le développement de leurs compétences, de leur expérience et de leur trajectoire professionnelle à travers des projets réels, des accompagnements structurés et un modèle unique d'apprentissage par l'action.
+              </p>
+              <p className="font-medium text-[#1f2937]">
+                Rejoindre gaea21 ne consiste pas simplement à intégrer un projet.<br />
+                C'est rejoindre un écosystème conçu pour apprendre, expérimenter, contribuer et grandir.
+              </p>
+            </div>
+          </div>
+
+          {/* Bandeau beige + Bouton pilule Figma */}
+          <div className="flex flex-col lg:flex-row items-center justify-between gap-5">
+            {/* Boîte beige claire avec bordure discrète */}
+            <div className="w-full lg:flex-1 bg-[#edeade]/80 rounded-2xl px-8 py-5 flex flex-col md:flex-row items-center justify-between gap-6 border border-[#e2dec9]">
+
+              {/* Approche systémique */}
+              <div className="text-center md:text-left">
+                <span className="text-xs sm:text-[13px] font-semibold text-[#1e293b] block">
+                  Une approche systémique et humaine
+                </span>
+                <span className="text-[11px] text-[#6b7280]">
+                  pour des résultats concrets et durables
+                </span>
+              </div>
+
+              {/* Ligne séparatrice */}
+              <div className="hidden md:block w-px h-10 bg-[#d8d3c5]" />
+
+              {/* Stat 1 : 20 + ans (Icône Cible au trait noir/anthracite sans cercle) */}
+              <div className="flex items-center gap-3">
+                <svg
+                  className="w-7 h-7 text-[#1e293b] shrink-0"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="1.8"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <circle cx="12" cy="12" r="10" />
+                  <circle cx="12" cy="12" r="6" />
+                  <circle cx="12" cy="12" r="2" />
+                </svg>
+                <div>
+                  <span className="text-base sm:text-lg font-bold text-[#1e293b] block leading-tight">
+                    20 + ans
+                  </span>
+                  <span className="text-[10px] text-[#6b7280]">
+                    d'accompagnement
+                  </span>
+                </div>
+              </div>
+
+              {/* Ligne séparatrice */}
+              <div className="hidden md:block w-px h-10 bg-[#d8d3c5]" />
+
+              {/* Stat 2 : 3 000 + (Icône 3 personnes au trait noir/anthracite sans cercle) */}
+              <div className="flex items-center gap-3">
+                <svg
+                  className="w-7 h-7 text-[#1e293b] shrink-0"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="1.8"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
+                  <circle cx="9" cy="7" r="4" />
+                  <path d="M22 21v-2a4 4 0 0 0-3-3.87" />
+                  <path d="M16 3.13a4 4 0 0 1 0 7.75" />
+                </svg>
+                <div>
+                  <span className="text-base sm:text-lg font-bold text-[#1e293b] block leading-tight">
+                    3 000 +
+                  </span>
+                  <span className="text-[10px] text-[#6b7280]">
+                    personnes accompagnées
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            {/* Bouton style PILULE arrondi (rounded-full) fidèle à Figma */}
+            <Link
+              to="/#participer"
+              className="w-full lg:w-auto text-center shrink-0 bg-[#7a8035] hover:bg-[#686d2b] text-white px-7 py-3.5 rounded-full text-xs sm:text-[13px] font-semibold tracking-wide transition-all shadow-sm hover:shadow whitespace-nowrap"
+            >
+              Découvrir les opportunités &rarr;
+            </Link>
+          </div>
+        </div>
+
+        {/* ========================================================
+            PARTIE 2 : QUI SOMMES-NOUS ? / QU'EST-CE QUE GAEA21 ?
+        ======================================================== */}
+        <div className="pt-6">
+          {/* Petite barre de soulignement verte */}
+          <div className="w-12 h-1 bg-[#7a8035] rounded-full mb-6" />
+
+          <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-center">
+            {/* Texte de gauche */}
+            <div className="lg:col-span-7 space-y-5">
+              <div>
+                <span className="text-xs uppercase tracking-wider text-[#7a8035] font-bold block mb-2">
+                  Qui sommes-nous ?
+                </span>
+                <h3 className="text-2xl sm:text-3xl font-extrabold text-[#111827] tracking-tight uppercase">
+                  QU'EST-CE QUE GAEA21 ?
+                </h3>
+              </div>
+
+              <div className="space-y-3.5 text-xs sm:text-[13px] leading-relaxed text-[#4b5563]">
+                <p>
+                  gaea21 est un centre de recherche appliquée, d'innovation, de développement durable et d'insertion professionnelle.
+                </p>
+                <p>
+                  Notre mission est de créer des ponts entre :
+                </p>
+                <ul className="list-disc pl-5 space-y-1 text-[#374151]">
+                  <li>la formation et l'emploi ;</li>
+                  <li>les compétences et les opportunités ;</li>
+                  <li>les individus et les organisations ;</li>
+                  <li>les projets et les territoires ;</li>
+                  <li>le développement humain et le développement durable.</li>
+                </ul>
+                <p>
+                  Depuis plus de vingt ans, nous développons des projets réels permettant aux participants d'acquérir une expérience concrète tout en contribuant à des enjeux réels.
+                </p>
+              </div>
+            </div>
+
+            {/* Cercle avec l'équipe de travail */}
+            <div className="lg:col-span-5 flex justify-center lg:justify-end">
+              <div className="relative w-64 h-64 sm:w-80 sm:h-80 md:w-96 md:h-96 rounded-full overflow-hidden shadow-md border-4 border-white">
+                <img
+                  src={teamImg}
+                  alt="Équipe gaea21 en réunion de travail"
+                  className="w-full h-full object-cover"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </section>
+  );
+}
--- a/assets/components/parcours/QuiPeutRejoindre.jsx
+++ b/assets/components/parcours/QuiPeutRejoindre.jsx
@ -0,0 +1,143 @@
+import React from 'react';
+
+// Imports des icônes fournies (ajuste le chemin vers ton dossier d'images)
+import etudiantIcon from '../../img/etudiant.png';
+import expertIcon from '../../img/expert.png';
+import entrepreneurIcon from '../../img/entrepreneur.png';
+import personneIcon from '../../img/personne.png';
+import professionnelsIcon from '../../img/professionnels.png';
+import retraiteIcon from '../../img/retraite.png';
+
+// Données organisées par colonnes pour respecter la hauteur et l'agencement Figma
+const COLUMNS_DATA = [
+    {
+        colId: 'col-1',
+        cards: [
+            {
+                id: 'etudiants',
+                title: 'Étudiants',
+                description:
+                    'Pour réaliser un stage, développer une première expérience professionnelle ou compléter leur formation.',
+                icon: etudiantIcon,
+            },
+            {
+                id: 'personnes-transition',
+                title: 'Personnes en transition',
+                isList: true,
+                listItems: [
+                    'Retour à l’emploi.',
+                    'Reconversion.',
+                    'Réorientation.',
+                    'Évolution professionnelle.',
+                ],
+                icon: personneIcon,
+                isTall: true, // Carte plus haute
+            },
+        ],
+    },
+    {
+        colId: 'col-2',
+        cards: [
+            {
+                id: 'jeunes-diplomes',
+                title: 'Jeunes diplômés',
+                description:
+                    'Pour renforcer leur employabilité et préparer leur entrée sur le marché du travail.',
+                icon: etudiantIcon, // Ou l'icône jeune diplômé si distincte
+            },
+            {
+                id: 'entrepreneurs',
+                title: 'Entrepreneurs',
+                description:
+                    'Pour développer un projet, une activité ou une initiative à impact.',
+                icon: entrepreneurIcon,
+            },
+            {
+                id: 'retraites',
+                title: 'Retraités',
+                description:
+                    'Pour mettre leur expérience au service de projets utiles et porteurs de sens.',
+                icon: retraiteIcon,
+            },
+        ],
+    },
+    {
+        colId: 'col-3',
+        cards: [
+            {
+                id: 'professionnels',
+                title: 'Professionnels',
+                description:
+                    'Pour développer de nouvelles compétences, élargir leur expérience ou préparer une évolution de carrière.',
+                icon: professionnelsIcon,
+            },
+            {
+                id: 'experts-specialistes',
+                title: 'Experts et spécialistes',
+                description:
+                    'Pour transmettre leurs compétences, accompagner des projets, bénéficier de mandats ou contribuer à l’écosystème.',
+                icon: expertIcon,
+                isTall: true,
+            },
+        ],
+    },
+];
+
+export default function QuiPeutRejoindre() {
+    return (
+        <section className="w-full bg-[#fbfbf9] text-[#1e293b] py-14 lg:py-20 px-6 md:px-12 lg:px-20 font-sans">
+            <div className="max-w-[1320px] mx-auto">
+                {/* Trait de repère vert olive */}
+                <div className="w-12 h-1 bg-[#475734] rounded-full mb-6" />
+
+                {/* Titre de section */}
+                <h2 className="text-2xl sm:text-3xl font-extrabold text-[#111827] uppercase tracking-tight mb-10">
+                    QUI PEUT <span className="text-[#7a8035]">REJOINDRE</span> GAEA21 ?
+                </h2>
+
+                {/* Grille 3 colonnes responsive */}
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 items-start">
+                    {COLUMNS_DATA.map((column) => (
+                        <div key={column.colId} className="flex flex-col gap-6">
+                            {column.cards.map((card) => (
+                                <div
+                                    key={card.id}
+                                    className={`rounded-2xl border border-[#e5e2d6] bg-white p-6 flex items-start gap-4 transition-all duration-200 shadow-sm hover:shadow-md ${card.isTall ? 'min-h-[190px]' : ''
+                                        }`}
+                                >
+                                    {/* Icône PNG dédiée */}
+                                    <img
+                                        src={card.icon}
+                                        alt={card.title}
+                                        className="w-12 h-12 object-contain shrink-0"
+                                    />
+
+                                    {/* Contenu textuel */}
+                                    <div className="flex-1">
+                                        <h3 className="text-base sm:text-lg font-bold text-[#111827] mb-2 leading-snug">
+                                            {card.title}
+                                        </h3>
+
+                                        {card.isList ? (
+                                            <ul className="space-y-1.5 text-xs sm:text-[13px] text-[#4b5563] leading-relaxed">
+                                                {card.listItems.map((item, idx) => (
+                                                    <li key={idx} className="list-none">
+                                                        {item}
+                                                    </li>
+                                                ))}
+                                            </ul>
+                                        ) : (
+                                            <p className="text-xs sm:text-[13px] text-[#6b7280] leading-relaxed">
+                                                {card.description}
+                                            </p>
+                                        )}
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
+}
--- a/assets/components/trajectoire/AlumniCommunaute.jsx
+++ b/assets/components/trajectoire/AlumniCommunaute.jsx
@ -1,6 +1,6 @@
 import React from 'react';
-import alumniImg from '../img/alumni-meeting.png'; // Place l'image exportée de Figma dans assets/img/
-import '../styles/alumniCommunaute.css';
+import alumniImg from '../../img/alumni-meeting.png'; // Place l'image exportée de Figma dans assets/img/
+import '../../styles/alumniCommunaute.css';

 const COLONNE_GAUCHE = [
    'Développez votre réseau.',
--- a/assets/components/trajectoire/CompetencesEvoluer.jsx
+++ b/assets/components/trajectoire/CompetencesEvoluer.jsx
@ -1,5 +1,5 @@
 import React from 'react';
-import '../styles/competences-evoluer.css';
+import '../../styles/competences-evoluer.css';

 const COMPETENCES_DATA = [
    {
--- a/assets/components/trajectoire/ConstruireTrajectoire.jsx
+++ b/assets/components/trajectoire/ConstruireTrajectoire.jsx
@ -1,15 +1,15 @@
 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 '../styles/trajectoire.css';
-import ExemplesProjets from './ExemplesProjets';
-import CompetencesEvoluer from './CompetencesEvoluer';
-import TrajectoireJamaisFigee from './TrajectoireJamaisFigee';
-import AlumniCommunaute from './AlumniCommunaute';
-import Footer from './Footer';
+import heroTrajectoireImg from'../../img/img-traject-banner.png';
+import HuitTrajectoires from '../trajectoire/HuitTrajectoires';
+import HumanEmploymentModel from '../trajectoire/HumanEmploymentModel';
+import MethodologieEtapes from '../trajectoire/MethodologieEtapes';
+import LearningByDoing from '../trajectoire/LearningByDoing';
+import '../../styles/trajectoire.css';
+import ExemplesProjets from '../trajectoire/ExemplesProjets';
+import CompetencesEvoluer from '../trajectoire/CompetencesEvoluer';
+import TrajectoireJamaisFigee from '../trajectoire/TrajectoireJamaisFigee';
+import AlumniCommunaute from '../trajectoire/AlumniCommunaute';
+import Footer from '../Footer';

 export default function ConstruireTrajectoire() {
    return (
--- a/assets/components/trajectoire/ExemplesProjets.jsx
+++ b/assets/components/trajectoire/ExemplesProjets.jsx
@ -1,5 +1,5 @@
 import React from 'react';
-import '../styles/exemples-projets.css';
+import '../../styles/exemples-projets.css';

 const PROJETS_DATA = [
    {
--- a/assets/components/trajectoire/HuitTrajectoires.jsx
+++ b/assets/components/trajectoire/HuitTrajectoires.jsx
@ -1,5 +1,5 @@
 import React from 'react';
-import '../styles/huitTrajectoires.css';
+import '../../styles/huitTrajectoires.css';

 const TRAJECTOIRES = [
    {
--- a/assets/components/trajectoire/HumanEmploymentModel.jsx
+++ b/assets/components/trajectoire/HumanEmploymentModel.jsx
@ -1,6 +1,6 @@
 import React from 'react';
-import hemBannerImg from '../img/human-model-banner.png'; // Place ton export Figma dans assets/img/
-import '../styles/human-employment.css';
+import hemBannerImg from '../../img/human-model-banner.png'; // Place ton export Figma dans assets/img/
+import '../../styles/human-employment.css';

 const DIMENSIONS_DATA = [
    {
--- a/assets/components/trajectoire/LearningByDoing.jsx
+++ b/assets/components/trajectoire/LearningByDoing.jsx
@ -1,6 +1,6 @@
 import React from 'react';
-import '../styles/learning-by-doing.css';
-import plantBannerImg from '../img/learning-by-doing.png'; // ou learning-by-doing.png
+import '../../styles/learning-by-doing.css';
+import plantBannerImg from '../../img/learning-by-doing.png'; // ou learning-by-doing.png

 export default function LearningByDoing() {
    return (
--- a/assets/components/trajectoire/MethodologieEtapes.jsx
+++ b/assets/components/trajectoire/MethodologieEtapes.jsx
@ -1,13 +1,13 @@
 import React from 'react';
-import '../styles/methodologie-etapes.css';
+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';
+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 = [
    {
--- a/assets/components/trajectoire/TrajectoireJamaisFigee.jsx
+++ b/assets/components/trajectoire/TrajectoireJamaisFigee.jsx
@ -1,6 +1,6 @@
 import React from 'react';
-import routeImg from '../img/trajectoire-route.png'; // Place ton image exportée de Figma dans assets/img/
-import '../styles/trajectoireJamaisFigee.css';
+import routeImg from '../../img/trajectoire-route.png'; // Place ton image exportée de Figma dans assets/img/
+import '../../styles/trajectoireJamaisFigee.css';

 const TEXTES_TRANSITIONS = [
    'Un étudiant peut devenir coordinateur.',
--- a/assets/img/construction.png
+++ b/assets/img/construction.png
--- a/assets/img/decouvert.png
+++ b/assets/img/decouvert.png
--- a/assets/img/developpement.png
+++ b/assets/img/developpement.png
--- a/assets/img/diplome.png
+++ b/assets/img/diplome.png
--- a/assets/img/entrepreneur.png
+++ b/assets/img/entrepreneur.png
--- a/assets/img/entretien.png
+++ b/assets/img/entretien.png
--- a/assets/img/etudiant.png
+++ b/assets/img/etudiant.png
--- a/assets/img/evolution.png
+++ b/assets/img/evolution.png
--- a/assets/img/expert.png
+++ b/assets/img/expert.png
--- a/assets/img/image-learning.png
+++ b/assets/img/image-learning.png
--- a/assets/img/intergation.png
+++ b/assets/img/intergation.png
--- a/assets/img/personne.png
+++ b/assets/img/personne.png
--- a/assets/img/pre-profil.png
+++ b/assets/img/pre-profil.png
--- a/assets/img/professionnels.png
+++ b/assets/img/professionnels.png
--- a/assets/img/rejoindre-hero.png
+++ b/assets/img/rejoindre-hero.png
--- a/assets/img/retraite.png
+++ b/assets/img/retraite.png
--- a/assets/img/team-discussion.png
+++ b/assets/img/team-discussion.png
--- a/assets/styles/app.css
+++ b/assets/styles/app.css
@ -9,99 +9,8 @@
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 }

-/* NAVBAR */
-.navbar-container {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    z-index: 50;
-    padding: 1.5rem 3rem;
-    box-sizing: border-box;
-}

-.navbar-content {
-    max-width: 1440px;
-    margin: 0 auto;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}

-.navbar-logo img {
-    height: 46px;
-    width: auto;
-    display: block;
-    object-fit: contain;
-}
-
-.navbar-nav {
-    display: flex;
-    align-items: center;
-    gap: 4rem;
-}
-
-.nav-links {
-    display: flex;
-    list-style: none;
-    gap: 3rem;
-    margin: 0;
-    padding: 0;
-}
-
-.nav-links li a {
-    text-decoration: none;
-    color: #1e293b;
-    font-size: 0.95rem;
-    font-weight: 500;
-    /* Contour lumineux pour détacher les liens du feuillage */
-    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8), 0 0 12px rgba(255, 255, 255, 0.6);
-    transition: color 0.2s ease;
-}
-
-.nav-links li a:hover {
-    color: #8c8f3e;
-}
-
-.btn-participer {
-    background-color: #8c8f3e;
-    color: #ffffff;
-    padding: 0.65rem 1.75rem;
-    border-radius: 9999px;
-    font-size: 0.95rem;
-    font-weight: 500;
-    text-decoration: none;
-    display: inline-block;
-    transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
-}
-
-.btn-participer:hover {
-    background-color: #737630;
-    transform: translateY(-1px);
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
-}
-
-.hamburger {
-    display: none;
-    flex-direction: column;
-    justify-content: space-around;
-    width: 28px;
-    height: 22px;
-    background: transparent;
-    border: none;
-    cursor: pointer;
-    z-index: 60;
-    padding: 0;
-}
-
-.hamburger span {
-    width: 100%;
-    height: 2.5px;
-    background-color: #1e293b;
-    border-radius: 2px;
-    transition: all 0.3s ease;
-}

 /* HERO BANNER */
 .hero-section {
--- a/assets/styles/header.css
+++ b/assets/styles/header.css
@ -0,0 +1,303 @@
+/* ========================================================
+   1. CONTENEUR GLOBAL & LOGO
+======================================================== */
+.navbar-container {
+    position: absolute !important;
+    top: 0 !important;
+    left: 0 !important;
+    width: 100% !important;
+    z-index: 1000 !important;
+    padding: 1.25rem 2.5rem !important;
+    box-sizing: border-box !important;
+}
+
+.navbar-content {
+    max-width: 1440px !important;
+    margin: 0 auto !important;
+    width: 100% !important;
+    box-sizing: border-box !important;
+}
+
+.navbar-logo {
+    display: flex !important;
+    align-items: center !important;
+    text-decoration: none !important;
+    z-index: 1001 !important;
+}
+
+.navbar-logo img {
+    height: 42px !important;
+    width: auto !important;
+    display: block !important;
+    object-fit: contain !important;
+}
+
+/* ========================================================
+   2. DESKTOP & TABLETTES (Dès 768px : iPad Mini, Air, Pro, PC)
+======================================================== */
+@media (min-width: 768px) {
+
+    /* Grille en 3 zones distinctes : Gauche / Centre / Droite */
+    .navbar-content {
+        display: grid !important;
+        grid-template-columns: auto 1fr auto !important;
+        align-items: center !important;
+    }
+
+    /* Le hamburger reste toujours masqué sur iPad et PC */
+    .hamburger {
+        display: none !important;
+    }
+
+    .navbar-logo {
+        grid-column: 1 !important;
+        justify-self: start !important;
+    }
+
+    /* Le conteneur nav couvre le centre et la droite */
+    .navbar-nav {
+        grid-column: 2 / 4 !important;
+        display: grid !important;
+        grid-template-columns: 1fr auto !important;
+        align-items: center !important;
+        width: 100% !important;
+        position: static !important;
+        background: transparent !important;
+        box-shadow: none !important;
+        height: auto !important;
+        padding: 0 !important;
+        margin: 0 !important;
+    }
+
+    /* Liens centrés au milieu de l'écran */
+    .nav-links {
+        display: flex !important;
+        flex-direction: row !important;
+        flex-wrap: nowrap !important;
+        justify-content: center !important;
+        align-items: center !important;
+        list-style: none !important;
+        gap: 2rem !important;
+        margin: 0 !important;
+        padding: 0 !important;
+    }
+
+    .nav-links li {
+        display: inline-block !important;
+        margin: 0 !important;
+    }
+
+    .nav-links li a {
+        text-decoration: none !important;
+        color: #1e293b;
+        font-size: 0.92rem !important;
+        font-weight: 500 !important;
+        white-space: nowrap !important;
+        transition: color 0.2s ease;
+        text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8), 0 0 12px rgba(255, 255, 255, 0.6);
+    }
+
+    .nav-links li a:hover {
+        color: #8c8f3e !important;
+    }
+
+    /* Liens blancs pour la page Projet / Trajectoire (fond sombre) */
+    .nav-links.nav-light li a {
+        color: #ffffff !important;
+        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important;
+    }
+
+    .nav-links.nav-light li a:hover {
+        color: #d1d58b !important;
+    }
+
+    /* Bouton Participer calé à droite */
+    .navbar-action {
+        display: flex !important;
+        justify-content: flex-end !important;
+        margin-left: 1.5rem !important;
+    }
+
+    .btn-participer {
+        background-color: #8c8f3e !important;
+        color: #ffffff !important;
+        padding: 0.55rem 1.4rem !important;
+        border-radius: 9999px !important;
+        font-size: 0.88rem !important;
+        font-weight: 600 !important;
+        text-decoration: none !important;
+        display: inline-block !important;
+        white-space: nowrap !important;
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
+        transition: background-color 0.2s ease, transform 0.15s ease;
+    }
+
+    .btn-participer:hover {
+        background-color: #737630 !important;
+        transform: translateY(-1px);
+    }
+}
+
+/* Ajustements proportionnels spécifiques aux écrans tablettes (768px à 900px) */
+@media (min-width: 768px) and (max-width: 900px) {
+    .navbar-container {
+        padding: 1rem 1.25rem !important;
+    }
+
+    .navbar-logo img {
+        height: 36px !important;
+    }
+
+    .nav-links {
+        gap: 1.25rem !important;
+    }
+
+    .nav-links li a {
+        font-size: 0.82rem !important;
+    }
+
+    .btn-participer {
+        padding: 0.45rem 1rem !important;
+        font-size: 0.8rem !important;
+    }
+}
+
+/* ========================================================
+   3. SMARTPHONES UNIQUEMENT (< 768px)
+======================================================== */
+@media (max-width: 767px) {
+    .navbar-container {
+        padding: 1rem 1.25rem !important;
+    }
+
+    .navbar-content {
+        display: flex !important;
+        align-items: center !important;
+        justify-content: space-between !important;
+    }
+
+    .navbar-logo img {
+        height: 34px !important;
+    }
+
+    /* Bouton Hamburger / Croix */
+    .hamburger {
+        position: relative !important;
+        display: flex !important;
+        flex-direction: column !important;
+        justify-content: space-around !important;
+        width: 28px !important;
+        height: 22px !important;
+        background: transparent !important;
+        border: none !important;
+        cursor: pointer !important;
+        z-index: 1005 !important;
+        /* Reste toujours au-dessus du tiroir */
+        padding: 0 !important;
+    }
+
+    .hamburger span {
+        width: 100% !important;
+        height: 2.5px !important;
+        background-color: #1e293b !important;
+        border-radius: 2px !important;
+        transition: all 0.3s ease !important;
+    }
+
+    /* Barres blanches quand le fond est sombre et que le menu est fermé */
+    .navbar-container:has(.nav-light) .hamburger:not(.active) span {
+        background-color: #ffffff !important;
+    }
+
+    /* Croix bien visible sur le volet blanc */
+    .hamburger.active span:nth-child(1) {
+        transform: rotate(45deg) translate(5px, 5px) !important;
+        background-color: #1e293b !important;
+    }
+
+    .hamburger.active span:nth-child(2) {
+        opacity: 0 !important;
+    }
+
+    .hamburger.active span:nth-child(3) {
+        transform: rotate(-45deg) translate(6px, -6px) !important;
+        background-color: #1e293b !important;
+    }
+
+    /* Tiroir latéral blanc */
+    .navbar-nav {
+        position: fixed !important;
+        top: 0 !important;
+        right: -100% !important;
+        width: min(85vw, 320px) !important;
+        height: 100vh !important;
+        background-color: #ffffff !important;
+        box-shadow: -6px 0 25px rgba(0, 0, 0, 0.15) !important;
+        display: flex !important;
+        flex-direction: column !important;
+        align-items: center !important;
+        justify-content: flex-start !important;
+        padding: 6rem 1.5rem 3rem 1.5rem !important;
+        /* Dégage le haut pour ne pas coller à la croix */
+        box-sizing: border-box !important;
+        transition: right 0.35s ease-in-out !important;
+        z-index: 1001 !important;
+        overflow-y: auto !important;
+    }
+
+    .navbar-nav.open {
+        right: 0 !important;
+    }
+
+    /* Liste des liens verticaux */
+    .nav-links {
+        display: flex !important;
+        flex-direction: column !important;
+        align-items: center !important;
+        list-style: none !important;
+        gap: 1.75rem !important;
+        margin: 0 0 2.5rem 0 !important;
+        padding: 0 !important;
+        width: 100% !important;
+        text-align: center !important;
+    }
+
+    .nav-links li {
+        width: 100% !important;
+        display: block !important;
+    }
+
+    .nav-links li a {
+        text-decoration: none !important;
+        color: #1e293b !important;
+        font-size: 1.15rem !important;
+        font-weight: 500 !important;
+        display: block !important;
+        text-shadow: none !important;
+    }
+
+    .nav-links.nav-light li a {
+        color: #1e293b !important;
+        text-shadow: none !important;
+    }
+
+    /* Bouton Participer bien centré dans le volet */
+    .navbar-action {
+        width: 100% !important;
+        display: flex !important;
+        justify-content: center !important;
+        margin: 0 !important;
+    }
+
+    .btn-participer {
+        background-color: #8c8f3e !important;
+        color: #ffffff !important;
+        padding: 0.75rem 2rem !important;
+        border-radius: 9999px !important;
+        font-size: 1rem !important;
+        font-weight: 600 !important;
+        text-decoration: none !important;
+        display: inline-block !important;
+        box-shadow: 0 3px 10px rgba(140, 143, 62, 0.25) !important;
+    }
+}
--- a/assets/styles/parcoursHero.css
+++ b/assets/styles/parcoursHero.css
@ -0,0 +1,372 @@
+/* ========================================================
+   1. SECTION HERO & BANNIÈRE (REJOINDRE gaea21)
+======================================================== */
+.parcours-hero-section {
+    position: relative;
+    width: 100%;
+    min-height: 80vh;
+    background-image: url('../img/rejoindre-hero.jpg');
+    /* Chemin de la photo Figma */
+    background-size: cover;
+    background-position: center right;
+    background-repeat: no-repeat;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    overflow: hidden;
+}
+
+/* Dégradé sombre pour garantir la lisibilité du texte blanc */
+.parcours-hero-overlay {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg,
+            rgba(10, 15, 25, 0.82) 0%,
+            rgba(10, 15, 25, 0.6) 45%,
+            rgba(10, 15, 25, 0.2) 100%);
+    z-index: 1;
+}
+
+/* Contenu textuel de la bannière */
+.parcours-hero-content {
+    position: relative;
+    z-index: 10;
+    max-width: 1440px;
+    width: 100%;
+    margin: 0 auto;
+    padding: 7rem 3rem 4rem 3rem;
+    box-sizing: border-box;
+}
+
+.parcours-hero-text-block {
+    max-width: 620px;
+}
+
+/* Titre principal REJOINDRE gaea21 */
+.parcours-hero-title {
+    font-size: 3.5rem;
+    font-weight: 800;
+    line-height: 1.12;
+    color: #ffffff;
+    text-transform: uppercase;
+    letter-spacing: -0.02em;
+    margin: 0 0 1.25rem 0;
+}
+
+.parcours-hero-title .brand-name {
+    text-transform: lowercase;
+    font-weight: 800;
+    display: inline-block;
+}
+
+/* Accroche sous le titre */
+.parcours-hero-subtitle {
+    font-size: 1.15rem;
+    line-height: 1.6;
+    color: #ffffff;
+    opacity: 0.95;
+    font-weight: 400;
+    margin: 0;
+    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
+}
+
+/* ========================================================
+   2. HEADER & NAVIGATION INTÉGRÉE
+======================================================== */
+.navbar-container {
+    position: absolute !important;
+    top: 0 !important;
+    left: 0 !important;
+    width: 100% !important;
+    z-index: 1000 !important;
+    padding: 1.25rem 3rem !important;
+    box-sizing: border-box !important;
+}
+
+.navbar-content {
+    max-width: 1440px !important;
+    margin: 0 auto !important;
+    width: 100% !important;
+    box-sizing: border-box !important;
+}
+
+/* Logo à gauche */
+.navbar-logo {
+    display: flex !important;
+    align-items: center !important;
+    text-decoration: none !important;
+    z-index: 1001 !important;
+}
+
+.navbar-logo img {
+    height: 42px !important;
+    width: auto !important;
+    display: block !important;
+    object-fit: contain !important;
+}
+
+/* ========================================================
+   3. DESKTOP & TABLETTES (Dès 768px : iPad Mini, Air, PC)
+======================================================== */
+@media (min-width: 768px) {
+    .navbar-content {
+        display: grid !important;
+        grid-template-columns: auto 1fr auto !important;
+        align-items: center !important;
+    }
+
+    .hamburger {
+        display: none !important;
+    }
+
+    .navbar-logo {
+        grid-column: 1 !important;
+        justify-self: start !important;
+    }
+
+    .navbar-nav {
+        grid-column: 2 / 4 !important;
+        display: grid !important;
+        grid-template-columns: 1fr auto !important;
+        align-items: center !important;
+        width: 100% !important;
+        position: static !important;
+        background: transparent !important;
+        box-shadow: none !important;
+        height: auto !important;
+        padding: 0 !important;
+        margin: 0 !important;
+    }
+
+    /* Liens blancs centrés au milieu de l'écran */
+    .nav-links {
+        display: flex !important;
+        flex-direction: row !important;
+        flex-wrap: nowrap !important;
+        justify-content: center !important;
+        align-items: center !important;
+        list-style: none !important;
+        gap: 2.25rem !important;
+        margin: 0 !important;
+        padding: 0 !important;
+    }
+
+    .nav-links li {
+        display: inline-block !important;
+        margin: 0 !important;
+    }
+
+    .nav-links li a {
+        text-decoration: none !important;
+        color: #ffffff !important;
+        font-size: 0.95rem !important;
+        font-weight: 500 !important;
+        white-space: nowrap !important;
+        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important;
+        transition: color 0.2s ease;
+    }
+
+    .nav-links li a:hover {
+        color: #d1d58b !important;
+    }
+
+    /* Bouton Participer à droite */
+    .navbar-action {
+        display: flex !important;
+        justify-content: flex-end !important;
+        margin-left: 1.5rem !important;
+    }
+
+    .btn-participer {
+        background-color: #8c8f3e !important;
+        color: #ffffff !important;
+        padding: 0.6rem 1.6rem !important;
+        border-radius: 9999px !important;
+        font-size: 0.9rem !important;
+        font-weight: 600 !important;
+        text-decoration: none !important;
+        display: inline-block !important;
+        white-space: nowrap !important;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
+        transition: background-color 0.2s ease, transform 0.15s ease;
+    }
+
+    .btn-participer:hover {
+        background-color: #737630 !important;
+        transform: translateY(-1px);
+    }
+}
+
+/* Spécifique iPad (768px à 960px) */
+@media (min-width: 768px) and (max-width: 960px) {
+    .navbar-container {
+        padding: 1rem 1.5rem !important;
+    }
+
+    .parcours-hero-content {
+        padding: 6.5rem 1.5rem 3.5rem 1.5rem;
+    }
+
+    .parcours-hero-title {
+        font-size: 2.75rem;
+    }
+
+    .nav-links {
+        gap: 1.35rem !important;
+    }
+
+    .nav-links li a {
+        font-size: 0.85rem !important;
+    }
+
+    .btn-participer {
+        padding: 0.45rem 1.15rem !important;
+        font-size: 0.82rem !important;
+    }
+}
+
+/* ========================================================
+   4. SMARTPHONES UNIQUEMENT (< 768px)
+======================================================== */
+@media (max-width: 767px) {
+    .parcours-hero-section {
+        min-height: 60vh;
+        background-position: 70% center;
+    }
+
+    .parcours-hero-content {
+        padding: 5.5rem 1.25rem 3rem 1.25rem;
+    }
+
+    .parcours-hero-title {
+        font-size: 2.25rem;
+        margin-bottom: 0.85rem;
+    }
+
+    .parcours-hero-subtitle {
+        font-size: 0.95rem;
+        line-height: 1.5;
+    }
+
+    .navbar-container {
+        padding: 1rem 1.25rem !important;
+    }
+
+    .navbar-content {
+        display: flex !important;
+        align-items: center !important;
+        justify-content: space-between !important;
+    }
+
+    /* Bouton hamburger mobile */
+    .hamburger {
+        position: relative !important;
+        display: flex !important;
+        flex-direction: column !important;
+        justify-content: space-around !important;
+        width: 28px !important;
+        height: 22px !important;
+        background: transparent !important;
+        border: none !important;
+        cursor: pointer !important;
+        z-index: 1005 !important;
+        padding: 0 !important;
+    }
+
+    .hamburger span {
+        width: 100% !important;
+        height: 2.5px !important;
+        background-color: #ffffff !important;
+        /* Barres blanches par défaut sur le hero */
+        border-radius: 2px !important;
+        transition: all 0.3s ease !important;
+    }
+
+    /* Croix active */
+    .hamburger.active span:nth-child(1) {
+        transform: rotate(45deg) translate(5px, 5px) !important;
+        background-color: #1e293b !important;
+    }
+
+    .hamburger.active span:nth-child(2) {
+        opacity: 0 !important;
+    }
+
+    .hamburger.active span:nth-child(3) {
+        transform: rotate(-45deg) translate(6px, -6px) !important;
+        background-color: #1e293b !important;
+    }
+
+    /* Volet tiroir mobile blanc */
+    .navbar-nav {
+        position: fixed !important;
+        top: 0 !important;
+        right: -100% !important;
+        width: min(85vw, 320px) !important;
+        height: 100vh !important;
+        background-color: #ffffff !important;
+        box-shadow: -6px 0 25px rgba(0, 0, 0, 0.15) !important;
+        display: flex !important;
+        flex-direction: column !important;
+        align-items: center !important;
+        justify-content: flex-start !important;
+        padding: 6rem 1.5rem 3rem 1.5rem !important;
+        box-sizing: border-box !important;
+        transition: right 0.35s ease-in-out !important;
+        z-index: 1001 !important;
+        overflow-y: auto !important;
+    }
+
+    .navbar-nav.open {
+        right: 0 !important;
+    }
+
+    /* Liens verticaux dans le tiroir */
+    .nav-links {
+        display: flex !important;
+        flex-direction: column !important;
+        align-items: center !important;
+        list-style: none !important;
+        gap: 1.75rem !important;
+        margin: 0 0 2.5rem 0 !important;
+        padding: 0 !important;
+        width: 100% !important;
+        text-align: center !important;
+    }
+
+    .nav-links li {
+        width: 100% !important;
+        display: block !important;
+    }
+
+    .nav-links li a {
+        text-decoration: none !important;
+        color: #1e293b !important;
+        /* Liens sombres sur fond blanc */
+        font-size: 1.15rem !important;
+        font-weight: 500 !important;
+        display: block !important;
+        text-shadow: none !important;
+    }
+
+    .navbar-action {
+        width: 100% !important;
+        display: flex !important;
+        justify-content: center !important;
+        margin: 0 !important;
+    }
+
+    .btn-participer {
+        background-color: #8c8f3e !important;
+        color: #ffffff !important;
+        padding: 0.75rem 2rem !important;
+        border-radius: 9999px !important;
+        font-size: 1rem !important;
+        font-weight: 600 !important;
+        text-decoration: none !important;
+        display: inline-block !important;
+        box-shadow: 0 3px 10px rgba(140, 143, 62, 0.25) !important;
+    }
+}