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