feat(parcours): intégration des sections parcours, compétences et référents

- Intégration de la timeline en 7 étapes conforme à la maquette Figma
- Ajout du composant modèle de développement des compétences (paliers 01 à 03)
- Ajout de la section d'accompagnement des référents avec visuel d'équipe
- Ajustements responsive mobiles et desktop

assets/components/parcours/ModeleDeveloppementCompetences.jsx

@@ -0,0 +1,115 @@
+import React from 'react';
+
+// Imports des 3 icônes exportées
+import baseIcon from '../../img/base.png';
+import maitriseIcon from '../../img/maitrise.png';
+import expertiseIcon from '../../img/expertise.png';
+
+const NIVEAUX = [
+    {
+        number: '01',
+        title: 'Bases',
+        icon: baseIcon,
+        description:
+            'Compréhension des concepts. Premières applications avec accompagnement.',
+    },
+    {
+        number: '02',
+        title: 'Maîtrise opérationnelle',
+        icon: maitriseIcon,
+        description:
+            'Capacité à réaliser de manière autonome. Contribution active aux projets.',
+    },
+    {
+        number: '03',
+        title: 'Expertise',
+        icon: expertiseIcon,
+        description:
+            'Capacité à transmettre, accompagner et structurer les pratiques.',
+    },
+];
+
+export default function ModeleDeveloppementCompetences() {
+    return (
+        <section className="w-full bg-[#ffffff] text-[#1e293b] py-10 sm:py-14 lg:py-20 px-4 sm:px-8 md:px-12 font-sans">
+            <div className="max-w-[1240px] mx-auto">
+
+                {/* Grille adaptative : 1 col sur mobile/tablette portrait, 12 cols sur grand écran */}
+                <div className="grid grid-cols-1 lg:grid-cols-12 gap-10 sm:gap-12 lg:gap-14 items-center">
+
+                    {/* ================================================================= */}
+                    {/* 1. Bloc TEXTES GAUCHE (Prend 5 colonnes sur desktop)              */}
+                    {/* ================================================================= */}
+                    <div className="lg:col-span-5 text-left">
+                        {/* Sur-titre vert olive */}
+                        <p className="text-[11px] sm:text-xs md:text-sm font-extrabold uppercase tracking-wider text-[#7a8335] mb-2 sm:mb-3">
+                            LE MODÈLE DE DÉVELOPPEMENT DES COMPÉTENCES
+                        </p>
+
+                        {/* Grand titre */}
+                        <h2 className="text-xl sm:text-2xl lg:text-[28px] font-extrabold text-[#111827] leading-tight mb-4 sm:mb-6">
+                            Des compétences observables, mesurables et transférables.
+                        </h2>
+
+                        {/* Paragraphes explicatifs */}
+                        <div className="space-y-1.5 sm:space-y-2 text-xs sm:text-[13px] sm:-ml-2 text-[#4b5563] leading-relaxed mb-4 sm:mb-6">
+                            <p>Chaque métier est composé de compétences.</p>
+                            <p>Chaque compétence est composée de sous-compétences.</p>
+                            <p>
+                                Le développement professionnel consiste à faire évoluer progressivement ces compétences.
+                            </p>
+                            <p>
+                                Chez gaea21, nous utilisons un système d’évaluation permettant d’identifier le niveau de maîtrise de chaque compétence.
+                            </p>
+                        </div>
+
+                        {/* Conclusion en gras */}
+                        <p className="text-xs sm:text-[13px] font-bold text-[#111827] leading-relaxed">
+                            Cette approche permet de visualiser les progrès, construire des plans de développement et valoriser l’expérience acquise.
+                        </p>
+                    </div>
+
+                    {/* ================================================================= */}
+                    {/* 2. Bloc NIVEAUX DROITE (Prend 7 colonnes sur desktop)             */}
+                    {/* ================================================================= */}
+                    <div className="lg:col-span-7 w-full">
+                        <div className="grid grid-cols-1 sm:grid-cols-3 gap-8 sm:gap-4 md:gap-6 lg:gap-8">
+                            {NIVEAUX.map((item) => (
+                                <div
+                                    key={item.number}
+                                    className="flex flex-col items-center text-center px-2"
+                                >
+                                    {/* Numéro gris clair 01 / 02 / 03 */}
+                                    <span className="text-xl sm:text-2xl lg:text-3xl font-bold text-gray-300 tracking-wider mb-2 sm:mb-3 lg:mb-4 select-none">
+                                        {item.number}
+                                    </span>
+
+                                    {/* Rond avec l'icône verte */}
+                                    <div className="w-20 h-20 sm:w-24 sm:h-24 md:w-28 md:h-28 rounded-full overflow-hidden flex items-center justify-center mb-3 sm:mb-4 shrink-0 shadow-xs">
+                                        <img
+                                            src={item.icon}
+                                            alt={item.title}
+                                            className="w-full h-full object-contain select-none pointer-events-none"
+                                        />
+                                    </div>
+
+                                    {/* Titre du niveau */}
+                                    <h3 className="text-sm sm:text-[15px] lg:text-base font-extrabold text-[#111827] mb-1.5 sm:mb-2">
+                                        {item.title}
+                                    </h3>
+
+                                    {/* Courte description */}
+                                    <p className="text-[11px] sm:text-xs text-[#52525b] leading-relaxed max-w-[220px]">
+                                        {item.description}
+                                    </p>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+
+                </div>
+
+            </div>
+        </section>
+    );
+}

assets/components/parcours/Parcours.jsx

@@ -4,6 +4,8 @@ import ParcoursPresentation from './ParcoursPresentation';
 import QuiPeutRejoindre from './QuiPeutRejoindre';
 import ParcoursIntegration from './ParcoursIntegration';
 import LearningByDoing from './LearningByDoing';
+import ModeleDeveloppementCompetences from './ModeleDeveloppementCompetences';
+import SystemeReferents from './SystemeReferents';
 
 export default function Parcours() {
     return (
@@ -13,6 +15,9 @@ export default function Parcours() {
             <QuiPeutRejoindre />
             <ParcoursIntegration />
             <LearningByDoing />
+            <ModeleDeveloppementCompetences />
+            <SystemeReferents />
+
         </main>
     );
 }

assets/components/parcours/ParcoursIntegration.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-// Imports des 7 images (vérifie bien tes extensions .png ou .png)
-import decouvertImg from '../../img/decouvert.png';
+// Imports exacts des images exportées de Figma
+import decouverteImg from '../../img/decouverte.png';
 import preProfilImg from '../../img/pre-profil.png';
 import entretienImg from '../../img/entretien.png';
 import constructionImg from '../../img/construction.png';
@@ -15,7 +15,7 @@ const STEPS = [
         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,
+        image: decouverteImg,
     },
     {
         step: 2,
@@ -39,11 +39,13 @@ const STEPS = [
         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 :',
+            'Un entretien permet d’approfondir votre profil et d’identifier les opportunités les plus pertinentes.',
+        subIntro: 'Nous cherchons à comprendre :',
         bullets: [
-            'vos compétences à mobiliser ;',
-            'les projets correspondant à votre profil ;',
-            'ce que vous souhaitez développer.',
+            'où vous en êtes ;',
+            'où vous souhaitez aller ;',
+            'ce que vous souhaitez développer ;',
+            'ce qui pourrait accélérer votre évolution.',
         ],
         image: entretienImg,
     },
@@ -51,52 +53,49 @@ const STEPS = [
         step: 4,
         title: 'Étape 4 — Construction de la trajectoire',
         intro:
-            'À partir des informations recueillies, nous définissons :',
+            'À partir des informations recueillies, nous identifions :',
         bullets: [
-            'vos objectifs d’apprentissage ;',
+            'la trajectoire la plus adaptée ;',
+            'les projets pertinents ;',
             'les compétences à développer ;',
-            'votre rôle dans les projets gaea21 ;',
-            'la durée et le rythme de votre parcours.',
+            'les ressources à mobiliser ;',
+            'les accompagnements nécessaires.',
         ],
         conclusion:
-            'Cette étape permet de construire une feuille de route sur mesure.',
+            'Chaque personne suit un parcours unique.',
         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.',
+        paragraphs: [
+            'Vous rejoignez une ou plusieurs équipes projet.',
+            'Vous participez progressivement à des réunions et des livrables.',
+            'Vous développez des compétences en contribuant à des projets concrets.',
         ],
         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.',
+        paragraphs: [
+            'Les projets deviennent des espaces d’apprentissage continu.',
+            'L’expérience devient un outil de progression.',
+            'Les responsabilités évoluent progressivement selon votre développement.',
         ],
         image: developpementImg,
     },
     {
         step: 7,
-        title: 'Étape 7 — Évolution et opportunités',
+        title: 'Étape 7 — Évolution',
         intro:
-            'À la fin de votre parcours :',
+            'L’objectif n’est pas simplement de participer à un projet.',
+        subIntro: 'L’objectif est de développer :',
         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.',
+            'une expérience démontrable ;',
+            'des compétences transférables ;',
+            'un réseau actif et engagé ;',
+            'des perspectives professionnelles claires.',
         ],
         image: evolutionImg,
     },
@@ -104,75 +103,172 @@ const STEPS = [
 
 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">
+        <section className="w-full bg-[#fbfbf9] text-[#1e293b] py-10 md:py-20 px-4 sm: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" />
+                {/* Trait de repère vert horizontal */}
+                <div className="w-12 h-1 bg-[#475734] rounded-full mb-4 md: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">
+                {/* Titre de section */}
+                <h2 className="text-lg sm:text-xl md:text-2xl font-extrabold uppercase tracking-tight text-[#111827] mb-8 md:mb-16 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">
+                {/* ========================================================================= */}
+                {/* 1. VERSION MOBILE (< md) : Vue empilée et lisible                         */}
+                {/* ========================================================================= */}
+                <div className="flex md:hidden flex-col gap-10">
                     {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">
+                            <div key={item.step} className="flex flex-col">
+                                {/* Image mobile */}
+                                <div className="w-full max-w-[340px] mx-auto mb-4">
                                     <img
                                         src={item.image}
                                         alt={item.title}
-                                            className="max-h-full max-w-full object-contain"
+                                        className="w-full h-auto object-contain block"
                                     />
                                 </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">
+                                {/* Bloc pastille + ligne à gauche & texte à droite */}
+                                <div className="flex items-start">
+                                    <div className="relative flex flex-col items-center shrink-0 mr-4 self-stretch">
+                                        <div className="w-9 h-9 rounded-full bg-[#8c8f3e] text-white text-sm font-bold flex items-center justify-center shadow-xs z-10 shrink-0">
                                             {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">
+                                    <div className="flex-1 pb-6 text-left">
+                                        <h3 className="text-sm font-extrabold text-[#111827] mb-1.5 pt-1.5">
                                             {item.title}
                                         </h3>
 
                                         {item.intro && (
-                                        <p className="text-[11px] sm:text-xs text-[#52525b] leading-relaxed mb-2 max-w-md">
+                                            <p className="text-xs text-[#4b5563] leading-relaxed mb-2">
                                                 {item.intro}
                                             </p>
                                         )}
 
+                                        {item.subIntro && (
+                                            <p className="text-xs text-[#4b5563] font-medium leading-relaxed mb-1">
+                                                {item.subIntro}
+                                            </p>
+                                        )}
+
                                         {item.bullets && item.bullets.length > 0 && (
-                                        <ul className="space-y-1 text-[11px] text-[#71717a] leading-tight max-w-md">
+                                            <ul className="space-y-1 text-xs text-[#4b5563] leading-tight mb-2">
                                                 {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 className="text-[#111827] text-xs leading-none mt-0.5">•</span>
                                                         <span>{bullet}</span>
                                                     </li>
                                                 ))}
                                             </ul>
                                         )}
 
+                                        {item.paragraphs && item.paragraphs.length > 0 && (
+                                            <div className="space-y-1 text-xs text-[#4b5563] leading-relaxed">
+                                                {item.paragraphs.map((p, idx) => (
+                                                    <p key={idx}>{p}</p>
+                                                ))}
+                                            </div>
+                                        )}
+
                                         {item.conclusion && (
-                                        <p className="text-[11px] text-[#52525b] leading-relaxed mt-2 max-w-md">
+                                            <p className="text-xs text-[#4b5563] italic leading-relaxed mt-1">
+                                                {item.conclusion}
+                                            </p>
+                                        )}
+                                    </div>
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+
+                {/* ========================================================================= */}
+                {/* 2. VERSION DESKTOP (md et plus) : Ton affichage exact qui fonctionne     */}
+                {/* ========================================================================= */}
+                <div className="hidden md:flex max-w-[1100px] mx-auto lg:ml-0 flex-col">
+                    {STEPS.map((item, index) => {
+                        const isLast = index === STEPS.length - 1;
+
+                        return (
+                            <div key={item.step} className="flex items-center">
+
+                                {/* 1. Colonne GAUCHE */}
+                                <div className="w-[48%] flex justify-end shrink-0">
+                                    <div className="w-full max-w-[420px] -ml-1 -mr-1 z-0">
+                                        <img
+                                            src={item.image}
+                                            alt={item.title}
+                                            className="w-full h-auto object-contain block select-none"
+                                        />
+                                    </div>
+                                </div>
+
+                                {/* 2. Colonne CENTRALE */}
+                                <div className="relative flex flex-col items-center shrink-0 self-stretch justify-center z-10">
+                                    <div
+                                        className={`w-[2px] bg-[#8c8f3e] flex-1 ${index === 0 ? 'opacity-0' : ''
+                                            }`}
+                                    />
+
+                                    <div className="w-10 h-10 sm:w-11 sm:h-11 rounded-full bg-[#8c8f3e] text-white text-base sm:text-lg font-bold flex items-center justify-center shadow-xs select-none shrink-0 my-1">
+                                        {item.step}
+                                    </div>
+
+                                    <div
+                                        className={`w-[2px] bg-[#8c8f3e] flex-1 ${isLast ? 'opacity-0' : ''
+                                            }`}
+                                    />
+                                </div>
+
+                                {/* 3. Colonne DROITE */}
+                                <div className="flex-1 pl-6 sm:pl-8 py-6 sm:py-8 text-left">
+                                    <h3 className="text-base sm:text-lg font-extrabold text-[#111827] leading-none mb-2">
+                                        {item.title}
+                                    </h3>
+
+                                    {item.intro && (
+                                        <p className="text-xs sm:text-[13px] text-[#4b5563] leading-relaxed mb-2 max-w-md">
+                                            {item.intro}
+                                        </p>
+                                    )}
+
+                                    {item.subIntro && (
+                                        <p className="text-xs sm:text-[13px] text-[#4b5563] font-medium leading-relaxed mb-1 max-w-md">
+                                            {item.subIntro}
+                                        </p>
+                                    )}
+
+                                    {item.bullets && item.bullets.length > 0 && (
+                                        <ul className="space-y-0.5 text-xs sm:text-[13px] text-[#4b5563] leading-tight max-w-md mb-2">
+                                            {item.bullets.map((bullet, idx) => (
+                                                <li key={idx} className="flex items-start gap-1.5">
+                                                    <span className="text-[#111827] text-xs leading-none mt-1">•</span>
+                                                    <span>{bullet}</span>
+                                                </li>
+                                            ))}
+                                        </ul>
+                                    )}
+
+                                    {item.paragraphs && item.paragraphs.length > 0 && (
+                                        <div className="space-y-1 text-xs sm:text-[13px] text-[#4b5563] leading-relaxed max-w-md">
+                                            {item.paragraphs.map((p, idx) => (
+                                                <p key={idx}>{p}</p>
+                                            ))}
+                                        </div>
+                                    )}
+
+                                    {item.conclusion && (
+                                        <p className="text-xs sm:text-[13px] text-[#4b5563] italic leading-relaxed max-w-md mt-1">
                                             {item.conclusion}
                                         </p>
                                     )}

assets/components/parcours/SystemeReferents.jsx

@@ -0,0 +1,78 @@
+import React from 'react';
+
+// Import de l'image (renomme-la ou adapte le chemin vers ton dossier assets/img/)
+import referentsImg from '../../img/accompagner.png';
+
+export default function SystemeReferents() {
+    return (
+        <section className="w-full bg-[#f9f9f9] text-[#1e293b] py-12 sm:py-16 lg:py-20 px-4 sm:px-8 md:px-12 font-sans">
+            <div className="max-w-[1240px] mx-auto">
+
+                <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-14 items-center">
+
+                    {/* ========================================================= */}
+                    {/* 1. Colonne GAUCHE : Textes et rôle du référent (5 cols)   */}
+                    {/* ========================================================= */}
+                    <div className="lg:col-span-5 text-left">
+                        {/* Trait vert horizontal */}
+                        <div className="w-12 h-1 bg-[#475734] rounded-full mb-6" />
+
+                        {/* Sur-titre vert olive */}
+                        <p className="text-[11px] sm:text-xs md:text-sm font-extrabold uppercase tracking-wider text-[#8c8f3e] mb-2 sm:mb-3">
+                            LE SYSTÈME DES RÉFÉRENTS
+                        </p>
+
+                        {/* Titre */}
+                        <h2 className="text-2xl sm:text-3xl lg:text-[32px] font-extrabold text-[#111827] leading-tight mb-5">
+                            Accompagner la progression.
+                        </h2>
+
+                        {/* Présentation */}
+                        <p className="text-xs sm:text-[13px] text-[#4b5563] leading-relaxed mb-1">
+                            Chaque participant est accompagné par un référent.
+                        </p>
+                        <p className="text-xs sm:text-[13px] text-[#4b5563] leading-relaxed mb-2.5">
+                            Son rôle est de :
+                        </p>
+
+                        {/* Liste à puces */}
+                        <ul className="space-y-1 text-xs sm:text-[13px] text-[#4b5563] leading-tight max-w-md mb-6">
+                            {[
+                                'suivre l’évolution des compétences ;',
+                                'identifier les axes de développement ;',
+                                'accompagner la progression ;',
+                                'contribuer à l’évaluation ;',
+                                'aider à construire la trajectoire.',
+                            ].map((point, idx) => (
+                                <li key={idx} className="flex items-start gap-2">
+                                    <span className="text-[#111827] text-xs leading-none mt-1">•</span>
+                                    <span>{point}</span>
+                                </li>
+                            ))}
+                        </ul>
+
+                        {/* Phrase de conclusion en gras */}
+                        <p className="text-xs sm:text-[13px] font-bold text-[#111827] leading-relaxed">
+                            Le référent constitue un point d'appui tout au long du parcours.
+                        </p>
+                    </div>
+
+                    {/* ========================================================= */}
+                    {/* 2. Colonne DROITE : Grande photo d'équipe (7 cols)        */}
+                    {/* ========================================================= */}
+                    <div className="lg:col-span-7 flex justify-center lg:justify-end">
+                        <div className="w-full max-w-[620px] rounded-2xl overflow-hidden shadow-xs">
+                            <img
+                                src={referentsImg}
+                                alt="Accompagnement par un référent gaea21"
+                                className="w-full h-auto object-cover block select-none"
+                            />
+                        </div>
+                    </div>
+
+                </div>
+
+            </div>
+        </section>
+    );
+}