@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
        body { font-family: 'Inter', sans-serif; scroll-behavior: smooth; }

         :root {
    /* --- 1. Palette "Tech Pro" (Base dominante) --- */
    --color-tech-dark: #1E293B;      /* Bleu Nuit - Autorité */
    --color-tech-electric: #3B82F6;  /* Bleu Électrique - Dynamisme */
    --color-tech-off-white: #F8FAFC; /* Blanc Cassé - Fond */
    --color-tech-emerald: #10B981;   /* Émeraude - Boutons d'action */

    /* --- 2. Palette "Modern Academy" (Éducation) --- */
    --color-academy-indigo: #4F46E5; /* Indigo - Apprentissage */
    --color-academy-violet: #818CF8; /* Violet Soft - Startup */
    --color-academy-slate: #475569;  /* Gris Ardoise - Texte */
    --color-academy-amber: #F59E0B;  /* Ambre - Certifications */

    /* --- 3. Palette "Minimalist Dark" (Dev / Dark Mode) --- */
    --color-dark-carbon: #0F172A;    /* Noir Carbone - Fond Dark */
    --color-dark-cyan: #22D3EE;      /* Cyan Néon - Interaction */
    --color-dark-silver: #94A3B8;    /* Gris Argent - Hiérarchie */

    /* --- Couleurs de Surface & Texte par défaut --- */
    --bg-primary: var(--color-tech-off-white);
    --text-main: var(--color-tech-dark);
    --text-muted: var(--color-academy-slate);
    --accent: var(--color-tech-electric);

     --primary-color: #003366; /* Bleu profond selon vos captures */
            --accent-color: #00A3E0;  /* Bleu plus clair pour l'accentuation */
            --bg-light: #F8FAFC;
}
        
        .typewriter-cursor {
            display: inline-block;
            width: 3px;
            height: 1.1em;
            background-color: #3B82F6;
            margin-left: 4px;
            animation: blink 0.8s infinite;
            vertical-align: middle;
        }

        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
        }

        .gradient-text {
            background: linear-gradient(to right, #3B82F6, #10B981);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        #mobile-menu {
            transition: all 0.3s ease-in-out;
            max-height: 0;
            overflow: hidden;
        }
        #mobile-menu.open {
            max-height: 500px;
            padding: 1rem 0;
        }

        .service-card:hover .service-icon {
            transform: scale(1.1) rotate(5deg);
        }

         /* .gradient-text {
            background: linear-gradient(90deg, #2563eb, #7c3aed);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }*/
        .blob-shape {
            border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
        }

         .value-card {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .value-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .icon-container {
            transition: transform 0.3s ease;
        }
        .value-card:hover .icon-container {
            transform: scale(1.1) rotate(5deg);
        }


        /* CTA*/

        .stats-section {
            padding: 60px 20px;
            background: #fff;
        }

        .stat-card {
            text-align: center;
            padding: 20px;
        }

        .stat-value {
            font-size: 3.5rem;
            font-weight: 800;
            color: #0046FF; /* Bleu typique des jobboards premium */
            line-height: 1;
            margin-bottom: 10px;
        }

        .stat-label {
            font-size: 1.1rem;
            color: #1e293b;
            font-weight: 600;
            max-width: 250px;
            margin: 0 auto;
            line-height: 1.4;
        }

        .cta-container {
            margin-top: 50px;
            text-align: center;
        }

        .btn-primary {
            background-color: #0046FF;
            color: white;
            padding: 16px 40px;
            border-radius: 8px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: all 0.3s ease;
            display: inline-block;
            text-decoration: none;
            box-shadow: 0 4px 15px rgba(0, 70, 255, 0.3);
        }

        .btn-primary:hover {
            background-color: #0035c2;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 70, 255, 0.4);
        }

        @media (max-width: 768px) {
            .stat-value {
                font-size: 2.5rem;
            }
        }



       
        .tab-content { display: none; }
        .tab-content.active { display: block; animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
        
        @keyframes slideUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .browser-mockup {
            border-top: 30px solid #e2e8f0;
            border-radius: 12px;
            box-shadow: 0 25px 50px -12px rgba(30, 41, 59, 0.15);
            background: white;
            overflow: hidden;
            position: relative;
            transition: transform 0.3s ease;
        }

        .browser-mockup:hover {
            transform: translateY(-5px);
        }

        .browser-mockup::before {
            content: '';
            position: absolute;
            top: -20px;
            left: 15px;
            width: 10px;
            height: 10px;
            background: #cbd5e1;
            border-radius: 50%;
            box-shadow: 18px 0 0 #cbd5e1, 36px 0 0 #cbd5e1;
        }

        .tab-btn {
            color: var(--text-muted);
            transition: all 0.4s ease;
        }

        .tab-btn.active {
            background-color: white;
            color: var(--color-tech-electric);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }

        .step-tag {
            background-color: rgba(59, 130, 246, 0.1);
            color: var(--color-tech-electric);
        }
        
        .candidat-tag {
            background-color: rgba(79, 70, 229, 0.1);
            color: var(--color-academy-indigo);
        }




        .faq-container {
            max-width: 800px;
            margin: 0 auto;
        }

        .faq-item {
            background: white;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            margin-bottom: 16px;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .faq-item:hover {
            border-color: #0046FF;
            box-shadow: 0 4px 12px rgba(0, 70, 255, 0.05);
        }

        .faq-question {
            padding: 24px;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            background: none;
            border: none;
            text-align: left;
            font-size: 1.1rem;
            font-weight: 600;
            color: #1e293b;
        }

        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out, padding 0.3s ease;
            color: #64748b;
            line-height: 1.6;
            padding: 0 24px;
        }

        .faq-item.active .faq-answer {
            max-height: 300px;
            padding-bottom: 24px;
        }

        .faq-icon {
            width: 20px;
            height: 20px;
            transition: transform 0.3s ease;
            color: #0046FF;
        }

        .faq-item.active .faq-icon {
            transform: rotate(180deg);
        }

        .section-title {
            text-align: center;
            margin-bottom: 50px;
        }

        .section-title h2 {
            font-size: 2.2rem;
            font-weight: 800;
            color: #0f172a;
            margin-bottom: 10px;
        }

        .section-title p {
            color: #64748b;
            font-size: 1.1rem;
        }


         .testimonial-slider {
            display: flex;
            transition: transform 0.5s ease-in-out;
            cursor: grab;
        }

        .testimonial-slider:active {
            cursor: grabbing;
        }

        .slider-container {
            overflow: hidden;
            position: relative;
            padding: 20px 0;
        }

        .testimonial-card {
            flex: 0 0 100%;
            padding: 0 15px;
            transition: all 0.3s ease;
        }

        @media (min-width: 768px) {
            .testimonial-card {
                flex: 0 0 50%;
            }
        }

        @media (min-width: 1024px) {
            .testimonial-card {
                flex: 0 0 33.333%;
            }
        }

        .card-inner {
            background: white;
            border-radius: 24px;
            padding: 40px;
            height: 100%;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
            border: 1px solid #f1f5f9;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .dot {
            height: 8px;
            width: 8px;
            background-color: #cbd5e1;
            border-radius: 50%;
            display: inline-block;
            margin: 0 5px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .dot.active {
            width: 24px;
            background-color: #0046FF;
            border-radius: 10px;
        }

        .quote-icon {
            color: #0046FF;
            opacity: 0.15;
            position: absolute;
            top: 20px;
            right: 30px;
        }




         .job-card {
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            border: 1px solid rgba(0, 51, 102, 0.1);
        }

        .job-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            border-color: var(--accent-color);
        }

        .icon-box {
            background-color: rgba(0, 51, 102, 0.05);
            transition: background-color 0.3s ease;
        }

        .job-card:hover .icon-box {
            background-color: var(--primary-color);
            color: white !important;
        }
        
        .section-title::after {
            content: '';
            display: block;
            width: 60px;
            height: 4px;
            background: var(--accent-color);
            margin: 1rem auto;
            border-radius: 2px;
        }


       

         /* Animation du texte défilant */
        @keyframes scroll {
            0% { transform: translateX(100%); }
            100% { transform: translateX(-100%); }
        }

        .animate-scroll {
            display: inline-block;
            white-space: nowrap;
            animation: scroll 25s linear infinite;
        }

        /* Pause au survol pour faciliter la lecture */
        .ticker-container:hover .animate-scroll {
            animation-play-state: paused;
        }

        .typewriter-cursor {
            border-right: 3px solid #00A3E0;
            animation: blink 0.7s infinite;
            margin-left: 2px;
        }

        @keyframes blink {
            50% { border-color: transparent; }
        }


          /* Page formation */

         .illustration-container {
            background: rgba(0, 51, 102, 0.03);
            border-radius: 40px;
            position: relative;
        }

         .floating-element {
            animation: floating 3s ease-in-out infinite;
        }

        @keyframes floating {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-15px); }
        }

        .bg-soft {
            background: radial-gradient(circle at top right, #f0f7ff, #ffffff);
        }
        
        .mockup-ui {
            box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3);
        }
         


        /* Style esthétique amélioré pour les cartes */
       /* Style esthétique amélioré pour les cartes cliquables */
        .category-card {
            background: #ffffff;
            border: 1px solid #f1f5f9;
            border-radius: 24px;
            padding: 32px 24px;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
            text-decoration: none; /* Enlève le soulignement par défaut des liens */
            height: 100%;
        }

        .category-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 25px -5px rgba(0, 51, 102, 0.1);
            border-color: #3b82f6;
        }

        .icon-wrapper {
            width: 70px;
            height: 70px;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            margin-bottom: 20px;
            transition: all 0.3s ease;
        }

        .category-card:hover .icon-wrapper {
            transform: scale(1.1) rotate(5deg);
        }

        /* Variantes de couleurs pour les icônes */
        .bg-blue-light { background-color: #eff6ff; color: #1d4ed8; }
        .bg-green-light { background-color: #f0fdf4; color: #15803d; }
        .bg-purple-light { background-color: #faf5ff; color: #7e22ce; }
        .bg-orange-light { background-color: #fff7ed; color: #c2410c; }
        .bg-pink-light { background-color: #fdf2f8; color: #be185d; }
        .bg-cyan-light { background-color: #ecfeff; color: #0e7490; }
        .bg-indigo-light { background-color: #eef2ff; color: #4338ca; }
        .bg-yellow-light { background-color: #fefce8; color: #a16207; }


        /* Styles pour les nouveaux badges cliquables */
        .filter-badge {
            display: inline-flex;
            align-items: center;
            padding: 12px 24px;
            background: #ffffff;
            border: 2px solid #e2e8f0;
            border-radius: 100px;
            color: #475569;
            font-weight: 600;
            font-size: 0.95rem;
            transition: all 0.3s ease;
            cursor: pointer;
            text-decoration: none;
            white-space: nowrap;
        }

        .filter-badge:hover {
            border-color: #3b82f6;
            color: #3b82f6;
            background: #eff6ff;
            transform: scale(1.05);
        }

        .filter-badge i {
            margin-right: 10px;
            font-size: 1.1rem;
        }


        
         @keyframes blob {
            0% { transform: translate(0px, 0px) scale(1); }
            33% { transform: translate(30px, -50px) scale(1.1); }
            66% { transform: translate(-20px, 20px) scale(0.9); }
            100% { transform: translate(0px, 0px) scale(1); }
        }
        .animate-blob {
            animation: blob 7s infinite;
        }
        .animation-delay-2000 {
            animation-delay: 2s;
        }

         /* Animation de transition fluide pour le contenu des onglets */
    .animate-fade-in {
        animation: fadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }

     /* Optionnel : Ajout d'une ombre douce personnalisée */
    .shadow-2xl {
        box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.1);
    }

    <!-- Section : Nos Formations Disponibles -->
<section class="py-20 bg-slate-50">
    <div class="max-w-7xl mx-auto px-6 lg:px-8">
        
        <div class="flex flex-col md:flex-row md:items-end justify-between mb-12 gap-6">
            <div class="max-w-2xl">
                <h2 class="text-3xl lg:text-4xl font-black text-[#003366] mb-4">
                    Explorez nos programmes d'élite
                </h2>
                <p class="text-slate-500 font-medium">
                    Des cursus intensifs conçus avec des experts du terrain pour vous rendre opérationnel immédiatement sur le marché du travail au Bénin.
                </p>
            </div>
            <div class="flex gap-2">
                <span class="px-4 py-2 bg-white border border-slate-200 rounded-full text-xs font-bold text-slate-400">Filtres :</span>
                <button class="px-4 py-2 bg-[#008751] text-white rounded-full text-xs font-bold">Tous</button>
                <button class="px-4 py-2 bg-white text-slate-600 border border-slate-200 rounded-full text-xs font-bold hover:border-[#008751]">Tech</button>
                <button class="px-4 py-2 bg-white text-slate-600 border border-slate-200 rounded-full text-xs font-bold hover:border-[#008751]">Business</button>
            </div>
        </div>

        <!-- Grille de Cartes -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            
            <!-- Card 1 : Marketing Digital -->
            <div class="group bg-white rounded-[2rem] overflow-hidden border border-slate-100 shadow-sm hover:shadow-2xl hover:shadow-slate-200 transition-all duration-500 flex flex-col h-full">
                <!-- Header Image -->
                <div class="relative h-56 overflow-hidden">
                    <img src="https://images.unsplash.com/photo-1557838923-2985c318be48?auto=format&fit=crop&q=80&w=800" alt="[Image Formation Marketing Digital]" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
                    <div class="absolute top-4 left-4">
                        <span class="px-3 py-1 bg-[#008751] text-white text-[10px] font-black uppercase rounded-lg shadow-lg">Certifiant</span>
                    </div>
                </div>
                
                <!-- Content -->
                <div class="p-8 flex flex-col flex-grow">
                    <div class="flex items-center gap-4 mb-4">
                        <div class="flex items-center gap-1.5 text-slate-400 text-xs font-bold">
                            <i class="far fa-clock text-[#008751]"></i>
                            3 Mois
                        </div>
                        <div class="flex items-center gap-1.5 text-slate-400 text-xs font-bold">
                            <i class="fas fa-signal text-[#008751]"></i>
                            Débutant
                        </div>
                    </div>
                    
                    <h3 class="text-xl font-black text-[#003366] mb-3 group-hover:text-[#008751] transition-colors">
                        Expert en Marketing Digital & Social Media
                    </h3>
                    
                    <p class="text-slate-500 text-sm leading-relaxed mb-6 line-clamp-2">
                        Maîtrisez la publicité Facebook/Google et la stratégie de contenu pour les entreprises béninoises.
                    </p>
                    
                    <!-- Footer Card -->
                    <div class="mt-auto pt-6 border-t border-slate-50 flex items-center justify-between">
                        <div class="flex flex-col">
                            <span class="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Investissement</span>
                            <span class="text-lg font-black text-[#003366]">150.000 <small class="text-[10px]">FCFA</small></span>
                        </div>
                        <a href="/formation/marketing-digital" class="w-12 h-12 bg-slate-50 text-[#003366] group-hover:bg-[#008751] group-hover:text-white rounded-xl flex items-center justify-center transition-all duration-300">
                            <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                </div>
            </div>

            <!-- Card 2 : Développement Web -->
            <div class="group bg-white rounded-[2rem] overflow-hidden border border-slate-100 shadow-sm hover:shadow-2xl hover:shadow-slate-200 transition-all duration-500 flex flex-col h-full">
                <div class="relative h-56 overflow-hidden">
                    <img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&q=80&w=800" alt="[Image Formation Développement Web]" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
                    <div class="absolute top-4 left-4">
                        <span class="px-3 py-1 bg-blue-600 text-white text-[10px] font-black uppercase rounded-lg shadow-lg">Intensif</span>
                    </div>
                </div>
                
                <div class="p-8 flex flex-col flex-grow">
                    <div class="flex items-center gap-4 mb-4">
                        <div class="flex items-center gap-1.5 text-slate-400 text-xs font-bold">
                            <i class="far fa-clock text-blue-600"></i>
                            6 Mois
                        </div>
                        <div class="flex items-center gap-1.5 text-slate-400 text-xs font-bold">
                            <i class="fas fa-signal text-blue-600"></i>
                            Intermédiaire
                        </div>
                    </div>
                    
                    <h3 class="text-xl font-black text-[#003366] mb-3 group-hover:text-blue-600 transition-colors">
                        Développeur Full-Stack JavaScript
                    </h3>
                    
                    <p class="text-slate-500 text-sm leading-relaxed mb-6 line-clamp-2">
                        Devenez autonome sur React et Node.js. Créez des applications web robustes et évolutives.
                    </p>
                    
                    <div class="mt-auto pt-6 border-t border-slate-50 flex items-center justify-between">
                        <div class="flex flex-col">
                            <span class="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Investissement</span>
                            <span class="text-lg font-black text-[#003366]">250.000 <small class="text-[10px]">FCFA</small></span>
                        </div>
                        <a href="/formation/dev-web" class="w-12 h-12 bg-slate-50 text-[#003366] group-hover:bg-blue-600 group-hover:text-white rounded-xl flex items-center justify-center transition-all duration-300">
                            <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                </div>
            </div>

            <!-- Card 3 : Entrepreneuriat -->
            <div class="group bg-white rounded-[2rem] overflow-hidden border border-slate-100 shadow-sm hover:shadow-2xl hover:shadow-slate-200 transition-all duration-500 flex flex-col h-full">
                <div class="relative h-56 overflow-hidden">
                    <img src="https://images.unsplash.com/photo-1552664730-d307ca884978?auto=format&fit=crop&q=80&w=800" alt="[Image Formation Entrepreneuriat]" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
                    <div class="absolute top-4 left-4">
                        <span class="px-3 py-1 bg-orange-500 text-white text-[10px] font-black uppercase rounded-lg shadow-lg">Nouveau</span>
                    </div>
                </div>
                
                <div class="p-8 flex flex-col flex-grow">
                    <div class="flex items-center gap-4 mb-4">
                        <div class="flex items-center gap-1.5 text-slate-400 text-xs font-bold">
                            <i class="far fa-clock text-orange-500"></i>
                            2 Mois
                        </div>
                        <div class="flex items-center gap-1.5 text-slate-400 text-xs font-bold">
                            <i class="fas fa-signal text-orange-500"></i>
                            Tous niveaux
                        </div>
                    </div>
                    
                    <h3 class="text-xl font-black text-[#003366] mb-3 group-hover:text-orange-500 transition-colors">
                        Lancer & Gérer sa Startup au Bénin
                    </h3>
                    
                    <p class="text-slate-500 text-sm leading-relaxed mb-6 line-clamp-2">
                        Business plan, formalités APIE, fiscalité locale et recherche de financements (levée de fonds).
                    </p>
                    
                    <div class="mt-auto pt-6 border-t border-slate-50 flex items-center justify-between">
                        <div class="flex flex-col">
                            <span class="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Investissement</span>
                            <span class="text-lg font-black text-[#003366]">100.000 <small class="text-[10px]">FCFA</small></span>
                        </div>
                        <a href="/formation/startup" class="w-12 h-12 bg-slate-50 text-[#003366] group-hover:bg-orange-500 group-hover:text-white rounded-xl flex items-center justify-center transition-all duration-300">
                            <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                </div>
            </div>

        </div>

        <!-- Footer Grid -->
        <div class="mt-16 text-center">
            <button class="px-10 py-4 bg-white border-2 border-[#003366] text-[#003366] font-black rounded-2xl hover:bg-[#003366] hover:text-white transition-all">
                Voir toutes les formations
            </button>
        </div>
    </div>
</section>