feat(trajectoire): intégration complète de la page et des sous-composants Figma

assets/app.js

@@ -1,16 +1,16 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
-// Au lieu de './components/Home'
+
+import Header from './components/Header.jsx';
 import Home from './components/Home.jsx';
 import ConstruireTrajectoire from './components/ConstruireTrajectoire.jsx';
 import './styles/app.css';
 
-const rootElement = document.getElementById('root'); // ou l'ID de ton conteneur Twig
+function App() {
-if (rootElement) {
+    return (
-    const root = ReactDOM.createRoot(rootElement);
-    root.render(
         <BrowserRouter>
+            <Header />
             <Routes>
                 <Route path="/" element={<Home />} />
                 <Route path="/trajectoire" element={<ConstruireTrajectoire />} />
@@ -18,3 +18,9 @@ if (rootElement) {
         </BrowserRouter>
     );
 }
+
+const rootElement = document.getElementById('root');
+if (rootElement) {
+    const root = ReactDOM.createRoot(rootElement);
+    root.render(<App />);
+}

assets/components/AlumniCommunaute.jsx

@@ -0,0 +1,55 @@
+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';
+
+const COLONNE_GAUCHE = [
+    'Développez votre réseau.',
+    'Partagez votre expérience.',
+    'Contribuez à des projets.'
+];
+
+const COLONNE_DROITE = [
+    'Participez à des communautés de pratique.',
+    'Découvrez de nouvelles opportunités.',
+    'Créez de nouvelles opportunités.'
+];
+
+export default function AlumniCommunaute() {
+    return (
+        <section className="alumni-section" id="communaute">
+            <div className="alumni-container">
+
+                {/* 1. Grande photo arrondie */}
+                <div className="alumni-media">
+                    <img
+                        src={alumniImg}
+                        alt="Membres de la communauté gaea21 en réunion de travail"
+                        className="alumni-image"
+                    />
+                </div>
+
+                {/* 2. Bloc textuel sous l'image */}
+                <div className="alumni-content">
+                    <p className="alumni-intro-title">
+                        La fin d’une trajectoire ne marque pas la fin de l’aventure.
+                    </p>
+
+                    <div className="alumni-columns-grid">
+                        <ul className="alumni-list">
+                            {COLONNE_GAUCHE.map((item, index) => (
+                                <li key={index}>{item}</li>
+                            ))}
+                        </ul>
+
+                        <ul className="alumni-list">
+                            {COLONNE_DROITE.map((item, index) => (
+                                <li key={index}>{item}</li>
+                            ))}
+                        </ul>
+                    </div>
+                </div>
+
+            </div>
+        </section>
+    );
+}

assets/components/ConstruireTrajectoire.jsx

@@ -1,11 +1,15 @@
 import React from 'react';
-import heroTrajectoireImg from '../img/img-traject-banner.jpg';
+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 ExemplesProjets from './ExemplesProjets';
 import '../styles/trajectoire.css';
+import ExemplesProjets from './ExemplesProjets';
+import CompetencesEvoluer from './CompetencesEvoluer';
+import TrajectoireJamaisFigee from './TrajectoireJamaisFigee';
+import AlumniCommunaute from './AlumniCommunaute';
+import Footer from './Footer';
 
 export default function ConstruireTrajectoire() {
     return (
@@ -59,18 +63,23 @@ export default function ConstruireTrajectoire() {
 
             {/* 3. Les 8 Trajectoires */}
             <HuitTrajectoires />
-
             {/* 4. Approche Human Employment Model */}
             <HumanEmploymentModel />
-
             {/* 5. Méthodologie en 6 Étapes */}
             <MethodologieEtapes />
-
             {/* 6. Learning by Doing */}
             <LearningByDoing />
-
             {/* 7. Exemples de projets */}
             <ExemplesProjets />
+            {/* 8. Des compétences pour évoluer */}
+            <CompetencesEvoluer />
+            {/* 9. Une trajectoire n'est jamais figée */}
+            <TrajectoireJamaisFigee />
+            {/* 10. Communauté & fin de parcours */}
+            <AlumniCommunaute />
+
+            {/* 11. Footer global du site */}
+            <Footer />
         </div>
     );
 }

assets/components/ExemplesProjets.jsx

@@ -4,33 +4,33 @@ import '../styles/exemples-projets.css';
 const PROJETS_DATA = [
     {
         id: 1,
-        title: "Répertoire Vert",
+        title: 'Répertoire Vert',
-        description: "Développer l'économie locale durable."
+        description: 'Développer l’économie locale durable.'
     },
     {
         id: 2,
-        title: "Green Index",
+        title: 'Green Index',
-        description: "Construire des outils d'évaluation et de transition."
+        description: 'Construire des outils d’évaluation et de transition.'
     },
     {
         id: 3,
-        title: "Recherche appliquée",
+        title: 'Recherche appliquée',
-        description: "Transformer les connaissances en solutions concrètes."
+        description: 'Transformer les connaissances en solutions concrètes.'
     },
     {
         id: 4,
-        title: "Développement commercial",
+        title: 'Développement commercial',
-        description: "Créer des liens entre projets, entreprises et opportunités."
+        description: 'Créer des liens entre projets, entreprises et opportunités.'
     },
     {
         id: 5,
-        title: "Innovation territoriale",
+        title: 'Innovation territoriale',
-        description: "Contribuer à la transformation des territoires."
+        description: 'Contribuer à la transformation des territoires.'
     },
     {
         id: 6,
-        title: "Programmes de développement international",
+        title: 'Programmes de développement international',
-        description: "Participer à des initiatives liées à l'agriculture durable, à la création d'emplois, à la recherche et au développement territorial."
+        description: 'Participer à des initiatives liées à l’agriculture durable, à la création d’emplois, à la recherche et au développement territorial.'
     }
 ];
 
@@ -39,11 +39,11 @@ export default function ExemplesProjets() {
         <section className="projets-section" id="exemples-projets">
             <div className="projets-container">
 
-                {/* Surtitre */}
+                {/* Surtitre vert */}
-                <span className="projets-tag-top">Quelques exemples de projets</span>
+                <span className="projets-uptitle">Quelques exemples de projets</span>
 
-                {/* Grille des 6 projets avec .map() */}
+                {/* Grille des 6 cartes via .map() */}
-                <div className="projets-grid">
+                <div className="projets-cards-grid">
                     {PROJETS_DATA.map((projet) => (
                         <article key={projet.id} className="projet-card">
                             <h3 className="projet-card-title">{projet.title}</h3>
@@ -52,9 +52,9 @@ export default function ExemplesProjets() {
                     ))}
                 </div>
 
-                {/* Bouton d'action CTA */}
+                {/* Bouton CTA */}
-                <div className="projets-action">
+                <div className="projets-action-wrap">
-                    <a href="#tous-les-projets" className="btn-decouvrir-projets">
+                    <a href="#projets" className="btn-projets-decouvrir">
                         Découvrez les projets
                     </a>
                 </div>

assets/components/Footer.jsx

@@ -133,7 +133,7 @@ export default function Footer() {
                                 onChange={(e) => setEmail(e.target.value)}
                                 className="newsletter-input"
                             />
-                            <button type="submit" className="newsletter-btn">
+                            <button type="submit" id="newsletter-btn">
                                 S'abonner
                             </button>
                         </div>

assets/components/Header.jsx

@@ -44,7 +44,15 @@ export default function Header() {
                             </Link>
                         </li>
                         <li>
-                            <Link to="/trajectoire" onClick={closeMenu}>
+                            <Link
+                                to="/trajectoire"
+                                onClick={() => {
+                                    closeMenu();
+                                    if (typeof onNavigate === 'function') {
+                                        onNavigate('trajectoire');
+                                    }
+                                }}
+                            >
                                 Projet
                             </Link>
                         </li>

assets/components/Home.jsx

@@ -1,5 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
-import Header from './Header';
 import Hero from './Hero';
 import ProfileCards from './ProfileCards';
 import Methodology from './Methodology';
@@ -7,19 +6,10 @@ import Impact from './Impact';
 import ActualitySection from './ActualitySection';
 import CareersSection from './CareersSection';
 import Footer from './Footer';
-import ConstruireTrajectoire from './ConstruireTrajectoire';
 
 export default function Home() {
-    const [view, setView] = useState('home');
-
     return (
         <div className="relative min-h-screen bg-white overflow-x-hidden">
-            <Header onNavigate={setView} />
-            <main>
-                {view === 'trajectoire' ? (
-                    <ConstruireTrajectoire />
-                ) : (
-                    <>
             <Hero />
             <ProfileCards />
             <Methodology />
@@ -27,9 +17,6 @@ export default function Home() {
             <ActualitySection />
             <CareersSection />
             <Footer />
-                    </>
-                )}
-            </main>
         </div>
     );
 }

assets/components/HuitTrajectoires.jsx

@@ -1,80 +1,144 @@
 import React from 'react';
-import heroTrajectoireImg from '../img/img-traject-banner.png';
+import '../styles/huitTrajectoires.css';
-import HuitTrajectoires from './HuitTrajectoires';
-import HumanEmploymentModel from './HumanEmploymentModel';
-import MethodologieEtapes from './MethodologieEtapes';
-import LearningByDoing from './LearningByDoing';
-import ExemplesProjets from './ExemplesProjets';
-import CompetencesEvoluer from './CompetencesEvoluer';
-import '../styles/trajectoire.css';
 
-export default function ConstruireTrajectoire() {
+const TRAJECTOIRES = [
+    {
+        id: 1,
+        color: '#436034', // Vert foncé
+        tag: 'Trouver un emploi',
+        title: 'Insertion Professionnelle',
+        points: [
+            'Transformer ses compétences, son savoir-faire et ses opportunités professionnelles.',
+            'Développer son employabilité.',
+            'Construire son positionnement.',
+            'Accéder au marché du travail.'
+        ]
+    },
+    {
+        id: 2,
+        color: '#3B82F6', // Bleu
+        tag: 'Réaliser un stage ou acquérir une première expérience',
+        title: 'Étudiants, Stages & Première Expérience Professionnelle',
+        points: [
+            'Transformer des études en expérience professionnelle.',
+            'Développer des compétences concrètes.',
+            'Construire un premier réseau.',
+            'Découvrir des métiers.',
+            'Préparer son entrée dans la vie professionnelle.'
+        ]
+    },
+    {
+        id: 3,
+        color: '#F59E0B', // Jaune ambré
+        tag: 'Revenir après une interruption',
+        title: 'Retour à l’Emploi',
+        points: [
+            'Retrouver progressivement le rythme après une maladie, un burn-out, un congé parental, un accident de vie ou un changement de situation personnelle.',
+            'Retrouver la confiance.',
+            'Réactiver son réseau.',
+            'Réactiver ses projets.'
+        ]
+    },
+    {
+        id: 4,
+        color: '#EA580C', // Orange
+        tag: 'Me reconvertir',
+        title: 'Reconversion Professionnelle',
+        points: [
+            'Réinventer un nouveau chapitre professionnel sans repartir de zéro.',
+            'Explorer de nouvelles possibilités.',
+            'Transformer ses acquis.',
+            'Développer les compétences nécessaires à son nouveau métier.'
+        ]
+    },
+    {
+        id: 5,
+        color: '#8B5CF6', // Violet
+        tag: 'Développer mes compétences',
+        title: 'Compétences, Expérience & Évolution Professionnelle',
+        points: [
+            'Développer ses compétences.',
+            'Développer des compétences recherchées.',
+            'Apprendre en faisant.',
+            'S’entraîner à la prise de responsabilité.'
+        ]
+    },
+    {
+        id: 6,
+        color: '#D97706', // Ocre / Caramel
+        tag: 'Construire mon projet',
+        title: 'Orientation, Coaching & Construction de Trajectoire',
+        points: [
+            'Définir ses objectifs.',
+            'Clarifier sa vision professionnelle.',
+            'Identifier une direction.',
+            'Structurer son évolution à court, moyen et long terme.'
+        ]
+    },
+    {
+        id: 7,
+        color: '#1F2937', // Noir / Gris foncé
+        tag: 'Développer mon leadership',
+        title: 'Leadership, Coordination & Management Durable',
+        points: [
+            'Apprendre à coordonner.',
+            'Transmettre.',
+            'Développer des équipes, des projets et des visions stratégiques.'
+        ]
+    },
+    {
+        id: 8,
+        color: '#92400E', // Brun
+        tag: 'Lancer un projet ou une activité',
+        title: 'Entrepreneuriat & Création d’Activité',
+        points: [
+            'Tester une idée, un projet, une expertise.',
+            'Développer son autonomie.',
+            'Créer de la valeur.',
+            'Construire son activité.'
+        ]
+    }
+];
+
+export default function HuitTrajectoires() {
     return (
-        <div className="trajectoire-page">
+        <section className="trajectoires-section" id="trajectoires">
-            {/* 1. Hero */}
+            <div className="trajectoires-wrapper">
-            <section
+                <header className="trajectoires-header">
-                className="trajectoire-hero"
+                    <span className="trajectoires-line" aria-hidden="true"></span>
-                style={{ backgroundImage: `url("${heroTrajectoireImg}")` }}
+                    <span className="trajectoires-uptitle">Les trajectoires</span>
-            >
+                    <h2 className="trajectoires-main-title">Huit trajectoires pour huit réalités.</h2>
-                <div className="trajectoire-overlay" />
+                </header>
-                <div className="trajectoire-hero-content">
+
-                    <div className="trajectoire-text-wrapper">
+                <div className="trajectoires-cards-grid">
-                        <h1 className="trajectoire-title">
+                    {TRAJECTOIRES.map((item) => (
-                            Construire sa <br />
+                        <article key={item.id} className="trajectoire-block-card">
-                            trajectoire.
+                            <div className="trajectoire-card-top">
-                        </h1>
+                                <span
-                        <div className="trajectoire-paragraphs">
+                                    className="trajectoire-indicator-badge"
-                            <p>Parfois, nous savons exactement où nous voulons aller.</p>
+                                    style={{ backgroundColor: item.color }}
-                            <p>Parfois, nous savons simplement que nous ne pouvons plus rester là où nous sommes.</p>
+                                    aria-hidden="true"
-                            <p>Depuis plus de vingt ans, gaea21 accompagne les personnes dans ces moments de transition, d'évolution et de construction.</p>
+                                />
-                            <p>Non pas en leur proposant une solution unique.</p>
+                                <p className="trajectoire-tagline">{item.tag}</p>
                             </div>
-                        <div className="trajectoire-cta-group">
+
-                            <a href="#questionnaire" className="btn-trajectoire-primary">
+                            <h3 className="trajectoire-item-title">{item.title}</h3>
-                                Trouver ma trajectoire
+
-                            </a>
+                            <ul className="trajectoire-points-list">
-                            <a href="#approche" className="btn-trajectoire-secondary">
+                                {item.points.map((point, index) => (
-                                Découvrir notre approche
+                                    <li key={index}>{point}</li>
+                                ))}
+                            </ul>
+
+                            <div className="trajectoire-card-footer">
+                                <a href="#decouvrir" className="btn-trajectoire-decouvrir">
+                                    Découvrir
                                 </a>
                             </div>
+                        </article>
+                    ))}
                 </div>
             </div>
         </section>
-
-            {/* 2. Questionnaire Intro */}
-            <section className="trajectoire-intro-questions" id="questionnaire">
-                <div className="trajectoire-questions-container">
-                    <span className="trajectoire-subtitle-green">
-                        Trouvons ensemble la trajectoire qui vous correspond
-                    </span>
-                    <h2 className="trajectoire-heading-black">
-                        Répondez à quelques questions.
-                    </h2>
-                    <div className="trajectoire-action-wrapper">
-                        <a href="#demarrer" className="btn-trajectoire-commencer">
-                            Commencer
-                        </a>
-                    </div>
-                </div>
-            </section>
-
-            {/* 3. Les 8 Trajectoires */}
-            <HuitTrajectoires />
-
-            {/* 4. Approche Human Employment Model */}
-            <HumanEmploymentModel />
-
-            {/* 5. Méthodologie en 6 Étapes */}
-            <MethodologieEtapes />
-
-            {/* 6. Learning by Doing */}
-            <LearningByDoing />
-
-            {/* 7. Exemples de projets */}
-            <ExemplesProjets />
-
-            {/* 8. Des compétences pour évoluer */}
-            <CompetencesEvoluer />
-        </div>
     );
 }

assets/components/HumanEmploymentModel.jsx

@@ -1,66 +1,73 @@
 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 hemImg from '../img/human-model-banner.png'; // Adapte le nom de ton image
 
-const PILLIERS_DATA = [
+const DIMENSIONS_DATA = [
     {
         id: 1,
-        title: "La personne",
+        title: 'La personne',
-        items: ["Ses aspirations.", "Ses motivations.", "Ses besoins.", "Ses valeurs."]
+        items: ['Ses aspirations.', 'Ses motivations.', 'Ses besoins.', 'Ses valeurs.']
     },
     {
         id: 2,
-        title: "Les compétences",
+        title: 'Les compétences',
-        items: ["Celles qu'elle possède déjà.", "Celles qu'elle doit développer."]
+        items: ['Celles qu’elle possède déjà.', 'Celles qu’elle doit développer.']
     },
     {
         id: 3,
-        title: "L'expérience",
+        title: 'L’expérience',
-        items: ["Les projets.", "Les réalisations.", "Les responsabilités."]
+        items: ['Les projets.', 'Les réalisations.', 'Les responsabilités.']
     },
     {
         id: 4,
-        title: "Le réseau",
+        title: 'Le réseau',
-        items: ["Ses aspirations.", "Ses motivations.", "Ses besoins.", "Ses valeurs."]
+        items: ['Ses aspirations.', 'Ses motivations.', 'Ses besoins.', 'Ses valeurs.']
     }
 ];
 
 export default function HumanEmploymentModel() {
     return (
-        <section className="hem-wrapper">
+        <section className="hem-section" id="approche">
-            <div className="hem-inner">
+            <div className="hem-container">
 
-                {/* Paragraphe descriptif */}
+                {/* Trait vert olive + Titre de section */}
-                <p className="hem-description">
+                <header className="hem-header">
-                    Chaque parcours est unique et ne peut pas se réduire à un simple intitulé de poste.
+                    <span className="hem-line" aria-hidden="true" />
-                    Nous considérons que les trajectoires durables se construisent lorsque quatre dimensions essentielles s'articulent.
+                    <span className="hem-uptitle">Les trajectoires</span>
+                    <h2 className="hem-main-title">Huit trajectoires pour huit réalités.</h2>
+                    <p className="hem-intro-text">
+                        Chez gaea21, nous ne considérons pas l’insertion, l’emploi ou l’entrepreneuriat comme des objectifs isolés.<br />
+                        Nous considérons que les trajectoires durables se construisent lorsque plusieurs dimensions évoluent ensemble.
                     </p>
+                </header>
 
-                {/* Grille forcée sur 4 colonnes */}
+                {/* 4 Cartes de dimensions */}
                 <div className="hem-cards-grid">
-                    {PILLIERS_DATA.map((p) => (
+                    {DIMENSIONS_DATA.map((card) => (
-                        <div key={p.id} className="hem-card">
+                        <article key={card.id} className="hem-card">
-                            <h3 className="hem-card-title">{p.title}</h3>
+                            <h3 className="hem-card-title">{card.title}</h3>
-                            <ul className="hem-card-list">
+                            <div className="hem-card-content">
-                                {p.items.map((it, idx) => (
+                                {card.items.map((line, idx) => (
-                                    <li key={idx}>{it}</li>
+                                    <p key={idx}>{line}</p>
                                 ))}
-                            </ul>
                             </div>
+                        </article>
                     ))}
                 </div>
 
-                {/* Phrase d'accroche */}
+                {/* Conclusion / Phrase clé */}
-                <p className="hem-phrase">
+                <footer className="hem-footer">
+                    <p className="hem-footer-text">
                         C’est cette approche que nous appelons le <strong>Human Employment Model</strong>.
                     </p>
+                </footer>
 
-                {/* Cadre de l'image */}
+                {/* Grande Image Bannière (Mains et cubes en bois) */}
-                <div className="hem-banner-container">
+                <div className="hem-banner-wrapper">
                     <img 
-                        src={hemImg}
+                        src={hemBannerImg} 
-                        alt="Human Employment Model Table"
+                        alt="Construction et modélisation humaine gaea21" 
-                        className="hem-banner-img"
+                        className="hem-banner-image" 
                     />
                 </div>
 

assets/components/TrajectoireJamaisFigee.jsx

@@ -0,0 +1,54 @@
+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';
+
+const TEXTES_TRANSITIONS = [
+    'Un étudiant peut devenir coordinateur.',
+    'Un coordinateur peut devenir référent.',
+    'Un référent peut devenir entrepreneur.',
+    'Un entrepreneur peut devenir mentor.',
+    'Une personne en reconversion peut découvrir une vocation inattendue.',
+    'Une première expérience peut ouvrir une carrière entière.'
+];
+
+export default function TrajectoireJamaisFigee() {
+    return (
+        <section className="trajectoire-figee-section" id="trajectoire-evolutive">
+            <div className="trajectoire-figee-container">
+
+                {/* Colonne gauche : Contenu textuel */}
+                <div className="trajectoire-figee-content">
+                    <header className="trajectoire-figee-header">
+                        <span className="trajectoire-figee-line" aria-hidden="true" />
+                        <span className="trajectoire-figee-uptitle">Les trajectoires</span>
+                        <h2 className="trajectoire-figee-title">Une trajectoire n'est jamais figée.</h2>
+                    </header>
+
+                    <div className="trajectoire-figee-list">
+                        {TEXTES_TRANSITIONS.map((texte, idx) => (
+                            <p key={idx} className="trajectoire-figee-step">{texte}</p>
+                        ))}
+                    </div>
+
+                    <div className="trajectoire-figee-conclusion">
+                        <p>
+                            C'est pourquoi les trajectoires gaea21<br />
+                            ne sont pas conçues comme des programmes isolés. Elles sont conçues comme des étapes<br />
+                            d'un parcours d'évolution.
+                        </p>
+                    </div>
+                </div>
+
+                {/* Colonne droite : Image route */}
+                <div className="trajectoire-figee-media">
+                    <img
+                        src={routeImg}
+                        alt="Route sinueuse traversant la nature"
+                        className="trajectoire-figee-image"
+                    />
+                </div>
+
+            </div>
+        </section>
+    );
+}

assets/styles/alumniCommunaute.css

@@ -0,0 +1,83 @@
+/* =========================================
+   SECTION : Communauté / Alumni (Fin de trajectoire)
+========================================= */
+.alumni-section {
+    width: 100%;
+    background-color: #f7f5f0;
+    padding: 2rem 2rem 5rem 2rem;
+    box-sizing: border-box;
+}
+
+.alumni-container {
+    max-width: 1080px;
+    margin: 0 auto;
+}
+
+/* Image principale */
+.alumni-media {
+    width: 100%;
+    margin-bottom: 2.5rem;
+}
+
+.alumni-image {
+    width: 100%;
+    height: 420px;
+    object-fit: cover;
+    border-radius: 20px;
+    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.07);
+    display: block;
+}
+
+/* Contenu texte et listes */
+.alumni-content {
+    max-width: 900px;
+}
+
+.alumni-intro-title {
+    font-size: 0.95rem;
+    font-weight: 700;
+    color: #111827;
+    margin: 0 0 1.5rem 0;
+}
+
+.alumni-columns-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 3rem;
+}
+
+.alumni-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.alumni-list li {
+    font-size: 0.85rem;
+    color: #4b5563;
+    line-height: 1.5;
+    margin-bottom: 0.75rem;
+    position: relative;
+    padding-left: 1.25rem;
+}
+
+.alumni-list li::before {
+    content: '•';
+    position: absolute;
+    left: 0;
+    color: #111827;
+    font-size: 1rem;
+    line-height: 1;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .alumni-image {
+        height: 260px;
+    }
+
+    .alumni-columns-grid {
+        grid-template-columns: 1fr;
+        gap: 0.5rem;
+    }
+}

assets/styles/exemples-projets.css

@@ -1,107 +1,161 @@
-/* ==========================================================================
+/* =========================================
-   SECTION EXEMPLES DE PROJETS (FIGMA)
+   SECTION : Quelques exemples de projets
-   ========================================================================== */
+========================================= */
-
 .projets-section {
     width: 100%;
-    background-color: #ffffff;
+    background-color: #f7f5f0;
-    padding: 1rem 2rem 5rem 2rem;
+    padding: 4.5rem 2rem 3.5rem 2rem;
     box-sizing: border-box;
 }
 
 .projets-container {
-    max-width: 1140px;
+    max-width: 1180px;
     margin: 0 auto;
 }
 
-/* Surtitre vert olive */
+.projets-uptitle {
-.projets-tag-top {
     display: block;
-    font-size: 0.95rem;
+    font-size: 0.85rem;
     font-weight: 600;
     color: #7b8337;
     margin-bottom: 2rem;
 }
 
-/* Grille 3 colonnes x 2 lignes */
+.projets-cards-grid {
-.projets-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 1.5rem;
-    margin-bottom: 2.5rem;
+    margin-bottom: 2rem;
 }
 
-/* Carte blanche avec bordure grise douce */
 .projet-card {
     background-color: #ffffff;
-    border: 1px solid #d1d5db;
+    border: 1px solid #e5e2da;
-    border-radius: 14px;
+    border-radius: 10px;
     padding: 1.75rem 1.5rem;
-    min-height: 125px;
     display: flex;
     flex-direction: column;
-    justify-content: flex-start;
+    min-height: 140px;
-    box-sizing: border-box;
-    transition: transform 0.2s ease, border-color 0.2s ease;
-}
-
-.projet-card:hover {
-    transform: translateY(-2px);
-    border-color: #8c8f3e;
 }
 
 .projet-card-title {
     font-size: 1rem;
     font-weight: 700;
-    color: #0f172a;
+    color: #111827;
     margin: 0 0 0.75rem 0;
-    line-height: 1.3;
 }
 
 .projet-card-desc {
     font-size: 0.82rem;
-    line-height: 1.5;
     color: #4b5563;
+    line-height: 1.5;
     margin: 0;
 }
 
-/* Alignement du bouton à gauche comme sur la maquette */
+.projets-action-wrap {
-.projets-action {
+    margin-top: 1rem;
-    display: flex;
-    justify-content: flex-start;
 }
 
-.btn-decouvrir-projets {
+.btn-projets-decouvrir {
+    display: inline-block;
     background-color: #7b8337;
     color: #ffffff;
-    font-size: 0.85rem;
+    font-size: 0.8rem;
     font-weight: 600;
-    padding: 0.55rem 1.6rem;
+    padding: 0.55rem 1.4rem;
     border-radius: 9999px;
     text-decoration: none;
-    display: inline-block;
+    transition: background-color 0.2s ease;
-    transition: background-color 0.2s ease, transform 0.15s ease;
 }
 
-.btn-decouvrir-projets:hover {
+.btn-projets-decouvrir:hover {
-    background-color: #6a712f;
+    background-color: #636b2b;
-    transform: translateY(-1px);
+}
+
+/* =========================================
+   SECTION : Des compétences pour évoluer
+========================================= */
+.competences-section {
+    width: 100%;
+    background-color: #ede9e1;
+    padding: 5rem 2rem;
+    box-sizing: border-box;
+}
+
+.competences-container {
+    max-width: 1180px;
+    margin: 0 auto;
+}
+
+.competences-header {
+    margin-bottom: 2.5rem;
+}
+
+.competences-line {
+    display: block;
+    width: 44px;
+    height: 4px;
+    background-color: #436034;
+    margin-bottom: 1.25rem;
+}
+
+.competences-uptitle {
+    display: block;
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: #6b7280;
+    margin-bottom: 0.4rem;
+}
+
+.competences-main-title {
+    font-size: 2rem;
+    font-weight: 700;
+    color: #111827;
+    margin: 0;
+}
+
+.competences-cards-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1.5rem;
+}
+
+.competence-card {
+    background-color: #ffffff;
+    border-radius: 12px;
+    padding: 2rem 1.75rem;
+    min-height: 220px;
+    display: flex;
+    flex-direction: column;
+}
+
+.competence-card-title {
+    font-size: 1.05rem;
+    font-weight: 700;
+    color: #111827;
+    margin: 0 0 1rem 0;
+}
+
+.competence-card-desc {
+    font-size: 0.82rem;
+    color: #4b5563;
+    line-height: 1.55;
+    margin: 0;
 }
 
 /* Responsive */
-@media (max-width: 900px) {
+@media (max-width: 992px) {
-    .projets-grid {
+
+    .projets-cards-grid,
+    .competences-cards-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }
 
-@media (max-width: 600px) {
+@media (max-width: 640px) {
-    .projets-grid {
-        grid-template-columns: 1fr;
-        gap: 1rem;
-    }
 
-    .projets-section {
+    .projets-cards-grid,
-        padding: 1rem 1.25rem 3.5rem 1.25rem;
+    .competences-cards-grid {
+        grid-template-columns: 1fr;
     }
 }

assets/styles/footer.css

@@ -159,7 +159,7 @@
    ========================================================================== */
 .footer-newsletter-fullwidth {
     width: 100%;
-    background-color: #D8DCAB;
+    background-color: #e0dfb6;
     /* Teinte officielle verte amande/kaki clair du Figma */
     padding: 28px 0;
     box-sizing: border-box;
@@ -253,10 +253,10 @@
 }
 
 /* Bouton vert olive (#A4AC56 / #98984B) */
-.newsletter-btn {
+#newsletter-btn {
     height: 44px;
     padding: 0 28px;
-    background-color: #A4AC56;
+    background-color: #b9b664;
     color: #ffffff;
     font-size: 13px;
     font-weight: 600;

assets/styles/huitTrajectoires.css

@@ -0,0 +1,148 @@
+/* --- Section 8 Trajectoires --- */
+.trajectoires-section {
+    width: 100%;
+    background-color: white;
+    padding: 5rem 2rem;
+    box-sizing: border-box;
+}
+
+.trajectoires-wrapper {
+    max-width: 1180px;
+    margin: 0 auto;
+}
+
+.trajectoires-header {
+    margin-bottom: 3rem;
+}
+
+.trajectoires-line {
+    display: block;
+     width: 48px;
+    height: 4px;
+    background-color: #111827;
+    border-radius: 2px;
+    margin-bottom: 0.75rem;
+    
+    /* margin-bottom: 1.25rem; */
+}
+
+.trajectoires-uptitle {
+    display: block;
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: #1f2937;
+    margin-bottom: 0.5rem;
+}
+
+.trajectoires-main-title {
+    font-size: 2rem;
+    font-weight: 700;
+    color: #111827;
+    margin: 0;
+}
+
+/* Grille 3 colonnes Figma */
+.trajectoires-cards-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1.5rem;
+}
+
+/* Carte individuelle */
+.trajectoire-block-card {
+    background-color: #ede9e1;
+    border-radius: 12px;
+    padding: 2rem 1.75rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    min-height: 380px;
+}
+
+.trajectoire-card-top {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-bottom: 1rem;
+}
+
+.trajectoire-indicator-badge {
+    width: 16px;
+    height: 16px;
+    border-radius: 3px;
+    flex-shrink: 0;
+}
+
+.trajectoire-tagline {
+    font-size: 0.75rem;
+    color: #6b7280;
+    margin: 0;
+    line-height: 1.3;
+}
+
+.trajectoire-item-title {
+    font-size: 1.05rem;
+    font-weight: 700;
+    color: #111827;
+    margin: 0 0 1.25rem 0;
+    min-height: 2.6rem;
+    line-height: 1.35;
+}
+
+/* Liste des points */
+.trajectoire-points-list {
+    list-style: none;
+    padding: 0;
+    margin: 0 0 2rem 0;
+    flex-grow: 1;
+}
+
+.trajectoire-points-list li {
+    font-size: 0.8rem;
+    color: #4b5563;
+    line-height: 1.45;
+    margin-bottom: 0.75rem;
+    position: relative;
+    padding-left: 1rem;
+}
+
+.trajectoire-points-list li::before {
+    content: '•';
+    position: absolute;
+    left: 0;
+    color: #4b5563;
+}
+
+/* Bouton Découvrir */
+.trajectoire-card-footer {
+    margin-top: auto;
+}
+
+.btn-trajectoire-decouvrir {
+    display: inline-block;
+    background-color: #7b8337;
+    color: #ffffff;
+    font-size: 0.8rem;
+    font-weight: 600;
+    padding: 0.45rem 1.25rem;
+    border-radius: 9999px;
+    text-decoration: none;
+    transition: background-color 0.2s ease;
+}
+
+.btn-trajectoire-decouvrir:hover {
+    background-color: #636b2b;
+}
+
+/* Responsive */
+@media (max-width: 1024px) {
+    .trajectoires-cards-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (max-width: 640px) {
+    .trajectoires-cards-grid {
+        grid-template-columns: 1fr;
+    }
+}

assets/styles/human-employment.css

@@ -1,113 +1,130 @@
-/* ==========================================================================
+/* --- Human Employment Model --- */
-   SECTION HUMAN EMPLOYMENT MODEL (FIGMA)
+.hem-section {
-   ========================================================================== */
-
-.hem-wrapper {
     width: 100%;
-    background-color: #ffffff;
+    background-color: white;
-    padding: 1rem 2rem 5rem 2rem;
+    padding: 5rem 2rem;
     box-sizing: border-box;
 }
 
-.hem-inner {
+.hem-container {
-    max-width: 1240px;
+    max-width: 1180px;
     margin: 0 auto;
+}
+
+.hem-header {
+    margin-bottom: 2.5rem;
+}
+
+.hem-line {
+    display: block;
+    width: 48px;
+    height: 4px;
+    background-color: #436034;
+    margin-bottom: 1.5rem;
+}
+
+.hem-uptitle {
+    display: block;
+    font-size: 0.95rem;
+    font-weight: 600;
+    color: #111827;
+    margin-bottom: 0.5rem;
+}
+
+.hem-banner-wrapper {
+    width: 100%;
+    margin-top: 3.5rem;
     display: flex;
-    flex-direction: column;
+    justify-content: center;
 }
 
-/* Texte d'intro gris */
+.hem-banner-image {
-.hem-description {
+    width: 100%;
+    max-width: 1080px;
+    height: 380px;
+    object-fit: cover;
+    border-radius: 20px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
+    display: block;
+}
+
+@media (max-width: 768px) {
+    .hem-banner-image {
+        height: 220px;
+        border-radius: 12px;
+    }
+}
+
+.hem-main-title {
+    font-size: 2rem;
+    font-weight: 700;
+    color: #111827;
+    margin: 0 0 1rem 0;
+}
+
+.hem-intro-text {
     font-size: 0.85rem;
-    line-height: 1.55;
+    line-height: 1.6;
-    color: #6b7280;
+    color: #4b5563;
-    max-width: 780px;
+    margin: 0;
-    margin: 0 0 2.5rem 0;
+    max-width: 800px;
 }
 
-/* Grille 4 colonnes alignées */
+/* Grille 4 colonnes */
 .hem-cards-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 1.5rem;
-    width: 100%;
+    margin-bottom: 3rem;
-    margin-bottom: 3.5rem;
-    box-sizing: border-box;
 }
 
-/* Chaque carte beige */
 .hem-card {
-    background-color: #F4F1EA;
+    background-color: #ede9e1;
     border-radius: 12px;
-    padding: 1.75rem 1.4rem;
+    padding: 2rem 1.5rem;
-    box-sizing: border-box;
+    min-height: 220px;
-    min-height: 160px;
+    display: flex;
+    flex-direction: column;
 }
 
 .hem-card-title {
-    font-size: 0.95rem;
+    font-size: 1.05rem;
-    font-weight: 700;
+    font-weight: 600;
-    color: #4B6A4A;
+    color: #436034;
-    margin: 0 0 1rem 0;
+    margin: 0 0 1.25rem 0;
 }
 
-.hem-card-list {
+.hem-card-content p {
-    list-style: none;
+    font-size: 0.85rem;
-    padding: 0;
+    line-height: 1.5;
-    margin: 0;
+    color: #6b7280;
-    display: flex;
+    margin: 0 0 0.35rem 0;
-    flex-direction: column;
-    gap: 0.35rem;
 }
 
-.hem-card-list li {
+/* Phrase finale */
-    font-size: 0.8rem;
+.hem-footer {
-    color: #9A9595;
-    line-height: 1.45;
-}
-
-/* Phrase centrale */
-.hem-phrase {
     text-align: center;
-    font-size: 0.95rem;
+}
+
+.hem-footer-text {
+    font-size: 1rem;
     color: #111827;
-    margin: 0 0 2rem 0;
+    margin: 0;
 }
 
-.hem-phrase strong {
+.hem-footer-text strong {
-    font-weight: 700;
+    color: #436034;
+    font-weight: 600;
 }
 
-/* Image arrondie */
+/* Responsive */
-.hem-banner-container {
+@media (max-width: 992px) {
-    width: 100%;
-    max-width: 1000px;
-    margin: 0 auto;
-    border-radius: 20px;
-    overflow: hidden;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
-}
-
-.hem-banner-img {
-    width: 100%;
-    height: 480px;
-    object-fit: cover;
-    display: block;
-}
-
-/* Responsive : passage en 2 colonnes uniquement sur smartphone / écran très étroit */
-@media (max-width: 720px) {
     .hem-cards-grid {
         grid-template-columns: repeat(2, 1fr);
-        gap: 1rem;
-    }
-
-    .hem-banner-img {
-        height: 280px;
     }
 }
 
-@media (max-width: 480px) {
+@media (max-width: 600px) {
     .hem-cards-grid {
         grid-template-columns: 1fr;
     }

assets/styles/trajectoireJamaisFigee.css

@@ -0,0 +1,110 @@
+/* =========================================
+   SECTION : Une trajectoire n'est jamais figée
+========================================= */
+.trajectoire-figee-section {
+    width: 100%;
+    background-color: white;
+    padding: 5rem 2rem;
+    box-sizing: border-box;
+}
+
+.trajectoire-figee-container {
+    max-width: 1180px;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 4rem;
+}
+
+/* Colonne Gauche : Textes */
+.trajectoire-figee-content {
+    flex: 1;
+    max-width: 600px;
+}
+
+.trajectoire-figee-header {
+    margin-bottom: 2rem;
+}
+
+.trajectoire-figee-line {
+    display: block;
+    width: 44px;
+    height: 4px;
+    background-color: #436034;
+    margin-bottom: 1.25rem;
+}
+
+.trajectoire-figee-uptitle {
+    display: block;
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: #7b8337;
+    margin-bottom: 0.4rem;
+}
+
+.trajectoire-figee-title {
+    font-size: 2rem;
+    font-weight: 700;
+    color: #111827;
+    margin: 0;
+    line-height: 1.25;
+}
+
+/* Liste des transitions */
+.trajectoire-figee-list {
+    margin-bottom: 2rem;
+}
+
+.trajectoire-figee-step {
+    font-size: 0.85rem;
+    color: #374151;
+    margin: 0 0 0.6rem 0;
+    line-height: 1.5;
+}
+
+/* Bloc conclusion */
+.trajectoire-figee-conclusion p {
+    font-size: 0.85rem;
+    color: #6b7280;
+    line-height: 1.6;
+    margin: 0;
+}
+
+/* Colonne Droite : Image */
+.trajectoire-figee-media {
+    flex: 1;
+    display: flex;
+    justify-content: flex-end;
+}
+
+.trajectoire-figee-image {
+    width: 100%;
+    max-width: 500px;
+    height: 340px;
+    object-fit: cover;
+    border-radius: 16px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
+}
+
+/* Responsive */
+@media (max-width: 960px) {
+    .trajectoire-figee-container {
+        flex-direction: column;
+        gap: 2.5rem;
+    }
+
+    .trajectoire-figee-content {
+        max-width: 100%;
+    }
+
+    .trajectoire-figee-media {
+        justify-content: center;
+        width: 100%;
+    }
+
+    .trajectoire-figee-image {
+        max-width: 100%;
+        height: auto;
+    }
+}

templates/base.html.twig

@@ -5,12 +5,12 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>{% block title %}gaea21 - Accueil{% endblock %}</title>
 
-        {# Fichiers CSS compilés par Webpack Encore #}
+        {# Laisse Symfony charger automatiquement TOUS les CSS nécessaires #}
         {% block stylesheets %}
             {{ encore_entry_link_tags('app') }}
         {% endblock %}
 
-        {# Fichiers JS compilés par Webpack Encore #}
+        {# Laisse Symfony charger automatiquement runtime.js + vendors + app.js #}
         {% block javascripts %}
             {{ encore_entry_script_tags('app') }}
         {% endblock %}

webpack.config.cjs

@@ -6,9 +6,9 @@ if (!Encore.isRuntimeEnvironmentConfigured()) {
 }
 
 Encore
-    // Répertoire où les fichiers compilés seront stockés
+    // Le chemin sur le disque où les fichiers compilés sont stockés
     .setOutputPath('public/build/')
-    // Chemin public utilisé par le serveur web
+    // Le chemin public utilisé par le serveur web pour y accéder
     .setPublicPath('/build')
 
     /*