feat(parcours): intégration des sections équipe d'accompagnement, télétravail et compétences

- Création du composant EquipeAccompagnement avec les 5 intervenants et leurs badges respectifs
- Intégration de la section TeletravailCompetence avec visuel et liste des compétences clés
- Implémentation du composant CeQueVousDeveloppez (grille responsive de 16 compétences sur 8 colonnes)
- Correction de l'alignement et centrage des badges icônes via positionnement absolu
- Intégration des assets graphiques finaux (coach-job-icon.png, icone-user.png)

assets/components/parcours/CeQueVousDeveloppez.jsx

@@ -0,0 +1,89 @@
+import React from 'react';
+
+// Icône de groupe déjà utilisée dans les acteurs
+import iconeGroup from '../../img/x1.png';
+
+// SVG de la mallette avec le contour vert identique à la maquette
+const BriefcaseIcon = () => (
+    <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="#8c8f3e"
+        strokeWidth="1.8"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="w-7 h-7 sm:w-8 sm:h-8"
+    >
+        <rect width="20" height="14" x="2" y="7" rx="2" />
+        <path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2" />
+        <line x1="2" x2="22" y1="12" y2="12" />
+        <circle cx="12" cy="12" r="1.5" fill="#8c8f3e" />
+    </svg>
+);
+
+const SKILLS = [
+    // Ligne 1
+    { title: 'Expérience professionnelle', isGroup: false },
+    { title: 'Employabilité', isGroup: true },
+    { title: 'Gestion de projet', isGroup: false },
+    { title: 'Communication', isGroup: false },
+    { title: 'Intelligence émotionnelle', isGroup: false },
+    { title: 'Leadership', isGroup: false },
+    { title: 'Développement durable', isGroup: false },
+    { title: 'Gestion durable', isGroup: false },
+    // Ligne 2
+    { title: 'Recherche appliquée', isGroup: false },
+    { title: 'Pensée systémique', isGroup: false },
+    { title: 'Collaboration', isGroup: false },
+    { title: 'Résolution de problèmes', isGroup: false },
+    { title: 'Développement commercial', isGroup: false },
+    { title: 'Autonomie', isGroup: false },
+    { title: 'Confiance', isGroup: false },
+    { title: 'Réseau professionnel', isGroup: false },
+];
+
+export default function CeQueVousDeveloppez() {
+    return (
+        <section className="w-full bg-[#ffffff] 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">
+
+                {/* En-tête */}
+                <div className="text-left mb-12 sm:mb-16">
+                    <div className="w-12 h-1 bg-[#475734] rounded-full mb-5" />
+                    <h2 className="text-xl sm:text-2xl lg:text-[28px] font-extrabold uppercase tracking-tight text-[#111827]">
+                        CE QUE VOUS DÉVELOPPEZ
+                    </h2>
+                </div>
+
+                {/* Grille des compétences : 2 sur mobile, 4 sur tablette, 8 sur desktop */}
+                <div className="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-8 gap-y-10 sm:gap-y-12 gap-x-4 sm:gap-x-6 justify-items-center">
+                    {SKILLS.map((skill, index) => (
+                        <div
+                            key={index}
+                            className="flex flex-col items-center text-center w-full max-w-[125px]"
+                        >
+                            {/* Cercle avec bordure verte olive fine */}
+                            <div className="w-16 h-16 sm:w-[72px] sm:h-[72px] rounded-full border-2 border-[#8c8f3e] bg-white flex items-center justify-center p-2 mb-3 shadow-xs">
+                                {skill.isGroup ? (
+                                    <img
+                                        src={iconeGroup}
+                                        alt={skill.title}
+                                        className="w-7 h-7 sm:w-8 sm:h-8 object-contain"
+                                    />
+                                ) : (
+                                    <BriefcaseIcon />
+                                )}
+                            </div>
+
+                            {/* Libellé de la compétence */}
+                            <p className="text-[11px] sm:text-xs font-bold text-[#111827] leading-tight select-none">
+                                {skill.title}
+                            </p>
+                        </div>
+                    ))}
+                </div>
+
+            </div>
+        </section>
+    );
+}

assets/components/parcours/EquipeAccompagnement.jsx

@@ -0,0 +1,120 @@
+import React from 'react';
+
+// Photos exportées
+import referentImg from '../../img/referent.png';
+import cordonateurImg from '../../img/cordonateur.png';
+import rhImg from '../../img/rh.png';
+import coachImg from '../../img/coach-img.png';
+import coachePersonnelImg from '../../img/coache-personnel.png';
+
+// Icônes exportées
+import iconeReferent from '../../img/icone-referent.png';
+import iconeCordonateur from '../../img/icone-cordonateur.png';
+import iconeRh from '../../img/icone-rh.png';
+import iconeJobCoach from '../../img/coach-job-icon.png';
+import iconeCoachPersonnel from '../../img/icone-coach-personnel.png';
+
+const ACTEURS = [
+    {
+        role: 'Référent',
+        description: 'Développement des compétences.',
+        photo: referentImg,
+        icon: iconeReferent,
+    },
+    {
+        role: 'Coordinateur Projet',
+        description: 'Suivi opérationnel et intégration dans les équipes.',
+        photo: cordonateurImg,
+        icon: iconeCordonateur,
+    },
+    {
+        role: 'RH Projet',
+        description: 'Accompagnement administratif et suivi du parcours.',
+        photo: rhImg,
+        icon: iconeRh,
+    },
+    {
+        role: 'Job Coach',
+        description:
+            'Construction du projet professionnel et développement de l’employabilité.',
+        photo: coachImg,
+        icon: iconeJobCoach,
+    },
+    {
+        role: 'Coach Personnel',
+        description:
+            'Accompagnement des dimensions personnelles influençant la trajectoire.',
+        photo: coachePersonnelImg,
+        icon: iconeCoachPersonnel,
+    },
+];
+
+export default function EquipeAccompagnement() {
+    return (
+        <section className="w-full bg-[#ffffff] 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">
+
+                {/* ========================================================= */}
+                {/* En-tête de la section                                     */}
+                {/* ========================================================= */}
+                <div className="text-left mb-12 sm:mb-16">
+                    {/* Trait vert horizontal */}
+                    <div className="w-12 h-1 bg-[#475734] rounded-full mb-5" />
+
+                    {/* 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">
+                        UNE ÉQUIPE AUTOUR DE CHAQUE PARTICIPANT
+                    </p>
+
+                    {/* Titre principal */}
+                    <h2 className="text-xl sm:text-2xl lg:text-[28px] font-extrabold text-[#111827] leading-tight">
+                        Selon les besoins,
+                        <br />
+                        plusieurs acteurs peuvent intervenir :
+                    </h2>
+                </div>
+
+                {/* ========================================================= */}
+                {/* Grille des 5 acteurs                                      */}
+                {/* ========================================================= */}
+                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-8 sm:gap-6 lg:gap-5 justify-items-center">
+                    {ACTEURS.map((item, index) => (
+                        <div
+                            key={index}
+                            className="flex flex-col items-center text-center w-full max-w-[210px]"
+                        >
+                            {/* Conteneur photo avec découpe Figma */}
+                            <div className="relative w-[155px] sm:w-[165px] h-[155px] sm:h-[165px] flex items-center justify-center">
+                                <img
+                                    src={item.photo}
+                                    alt={item.role}
+                                    className="w-full h-full object-contain select-none pointer-events-none"
+                                />
+                            </div>
+
+                            {/* Pastille icône insérée dans l'échancrure basse */}
+                            <div className="relative -mt-6 z-10 w-11 h-11 rounded-full bg-[#8c8f3e] flex items-center justify-center shadow-xs ring-4 ring-[#fbfbf9] overflow-hidden">
+                                <img
+                                    src={item.icon}
+                                    alt={item.role}
+                                    className="w-full h-full object-contain p-2"
+                                />
+                            </div>
+
+                            {/* Rôle / Titre */}
+                            <h3 className="text-sm sm:text-[15px] text-[#98984B] mt-3.5 mb-1.5 leading-tight">
+                                {item.role}
+                            </h3>
+
+                            {/* Description */}
+                            <p className="text-[11px] sm:text-xs font-extrabold text-[#050505] leading-relaxed">
+                                {item.description}
+                            </p>
+                        </div>
+                    ))}
+                </div>
+
+            </div>
+        </section>
+    );
+}

assets/components/parcours/Parcours.jsx

@@ -6,6 +6,9 @@ import ParcoursIntegration from './ParcoursIntegration';
 import LearningByDoing from './LearningByDoing';
 import ModeleDeveloppementCompetences from './ModeleDeveloppementCompetences';
 import SystemeReferents from './SystemeReferents';
+import EquipeAccompagnement from './EquipeAccompagnement';
+import TeletravailCompetence from './TeletravailCompetence';
+import CeQueVousDeveloppez from './CeQueVousDeveloppez';
 
 export default function Parcours() {
     return (
@@ -17,6 +20,12 @@ export default function Parcours() {
             <LearningByDoing />
             <ModeleDeveloppementCompetences />
             <SystemeReferents />
+            <EquipeAccompagnement />
+            <TeletravailCompetence />
+            <CeQueVousDeveloppez />
+
+
+
 
         </main>
     );

assets/components/parcours/ParcoursIntegration.jsx

@@ -103,7 +103,7 @@ const STEPS = [
 
 export default function ParcoursIntegration() {
     return (
-        <section className="w-full bg-[#fbfbf9] text-[#1e293b] py-10 md:py-20 px-4 sm:px-6 md:px-12 font-sans">
+        <section className="w-full bg-[#ffffff] text-[#1e293b] py-10 md:py-20 px-4 sm:px-6 md:px-12 font-sans">
             <div className="max-w-[1240px] mx-auto">
 
                 {/* Trait de repère vert horizontal */}

assets/components/parcours/ParcoursPresentation.jsx

@@ -4,7 +4,7 @@ import teamImg from '../../img/team-discussion.png'; // Vérifie le chemin de to
 
 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">
+    <section className="w-full bg-[#ffffff] 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">
 
         {/* ========================================================

assets/components/parcours/QuiPeutRejoindre.jsx

@@ -85,7 +85,7 @@ const COLUMNS_DATA = [
 
 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">
+        <section className="w-full bg-[#ffffff] 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" />

assets/components/parcours/TeletravailCompetence.jsx

@@ -0,0 +1,72 @@
+import React from 'react';
+
+// Import de l'image de la section télétravail exportée de Figma
+import teletravailImg from '../../img/teletravail.png';
+
+export default function TeletravailCompetence() {
+    return (
+        <section className="w-full bg-[#fbfbf9] 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 compétences (5 cols)        */}
+                    {/* ========================================================= */}
+                    <div className="lg:col-span-5 text-left">
+                        {/* Trait vert horizontal */}
+                        <div className="w-12 h-1 bg-[#4B6A4A] rounded-full mb-6" />
+
+                        {/* Titre principal en gras/majuscules */}
+                        <h2 className="text-2xl sm:text-3xl lg:text-[32px] font-extrabold uppercase text-[#111827] leading-tight mb-5">
+                            LE TÉLÉTRAVAIL COMME COMPÉTENCE
+                        </h2>
+
+                        {/* Paragraphe d'introduction */}
+                        <p className="text-xs sm:text-[13px] text-[#4b5563] leading-relaxed mb-1">
+                            Depuis plus de vingt ans, gaea21 développe des méthodes de collaboration à distance.
+                        </p>
+                        <p className="text-xs sm:text-[13px] text-[#4b5563] leading-relaxed mb-2.5">
+                            Les participants apprennent notamment à :
+                        </p>
+
+                        {/* Liste à puces */}
+                        <ul className="space-y-1 text-xs sm:text-[13px] text-[#4b5563] leading-tight max-w-md mb-6">
+                            {[
+                                'organiser leur travail ;',
+                                'gérer leur temps ;',
+                                'communiquer efficacement ;',
+                                'collaborer à distance ;',
+                                'développer leur autonomie ;',
+                                'maintenir leur efficacité dans un environnement distribué.',
+                            ].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">
+                            Ces compétences sont aujourd’hui recherchées dans de nombreux secteurs.
+                        </p>
+                    </div>
+
+                    {/* ========================================================= */}
+                    {/* 2. Colonne DROITE : Visuel télétravail / visio (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={teletravailImg}
+                                alt="Le télétravail comme compétence chez gaea21"
+                                className="w-full h-auto object-cover block select-none"
+                            />
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+        </section>
+    );
+}