{% load static %}
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Classes Préparatoires - ESSIG | Excellence & Concours</title>
    
    <!-- SEO & Meta -->
    <meta name="description" content="Intégrez les classes préparatoires de l'ESSIG et préparez-vous aux concours des Grandes Écoles d'ingénieurs et de commerce. Formation d'excellence en 2 ans.">
    <meta name="keywords" content="classe préparatoire, essig, concours, grandes écoles, ingénieur, commerce, prépa">
    
    <!-- Open Graph -->
    <meta property="og:type" content="website">
    <meta property="og:title" content="Classes Préparatoires - ESSIG | Excellence Académique">
    <meta property="og:description" content="Préparez-vous aux concours des Grandes Écoles avec un encadrement d'excellence">
    <meta property="og:image" content="{% static 'img/logo.jpeg' %}">
    <meta property="og:url" content="{{ request.build_absolute_uri }}">
    
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Swiper CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
    
    <!-- Favicon -->
    <link rel="shortcut icon" type="image/jpeg" href="{% static 'img/logo-removebg-preview.png' %}">
    
    <style>
        :root {
            --color-primary: #205397;
            --color-accent: #e90707;
            --color-dark: #1E1E1E;
            --color-light-blue: #4A90E2;
            --color-white: #FFFFFF;
            --font-main: "Roboto", sans-serif;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: var(--font-main);
            background-color: #f8f9fa;
            color: var(--color-dark);
            line-height: 1.5;
            overflow-x: hidden;
        }
        
        /* Animations */
        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        @keyframes fadeLeft {
            from { opacity: 0; transform: translateX(-40px); }
            to { opacity: 1; transform: translateX(0); }
        }
        
        @keyframes fadeRight {
            from { opacity: 0; transform: translateX(40px); }
            to { opacity: 1; transform: translateX(0); }
        }
        
        @keyframes scaleIn {
            from { opacity: 0; transform: scale(0.95); }
            to { opacity: 1; transform: scale(1); }
        }
        
        .fade-up { animation: fadeUp 0.7s ease forwards; }
        .fade-left { animation: fadeLeft 0.7s ease forwards; }
        .fade-right { animation: fadeRight 0.7s ease forwards; }
        .scale-in { animation: scaleIn 0.5s ease forwards; }
        
        .delay-1 { animation-delay: 0.1s; opacity: 0; }
        .delay-2 { animation-delay: 0.2s; opacity: 0; }
        .delay-3 { animation-delay: 0.3s; opacity: 0; }
        .delay-4 { animation-delay: 0.4s; opacity: 0; }
        
        /* Custom Buttons */
        .btn-primary-custom {
            background: var(--color-primary);
            color: var(--color-white);
            padding: 12px 32px;
            border-radius: 40px;
            font-weight: 600;
            font-size: 0.95rem;
            border: none;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
        }
        
        .btn-primary-custom:hover {
            background: #0d3d6e;
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(32,83,151,0.3);
            color: var(--color-white);
        }
        
        .btn-accent-custom {
            background: var(--color-accent);
            color: var(--color-white);
            padding: 12px 32px;
            border-radius: 40px;
            font-weight: 600;
            font-size: 0.95rem;
            border: none;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
        }
        
        .btn-accent-custom:hover {
            background: #c00505;
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(233,7,7,0.3);
            color: var(--color-white);
        }
        
        .btn-outline-custom {
            background: transparent;
            border: 2px solid var(--color-primary);
            color: var(--color-primary);
            padding: 10px 24px;
            border-radius: 40px;
            font-weight: 600;
            font-size: 0.9rem;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            text-decoration: none;
        }
        
        .btn-outline-custom:hover {
            background: var(--color-primary);
            color: var(--color-white);
            transform: translateY(-2px);
        }
        
        /* Section Styles */
        .section-badge {
            display: inline-block;
            background: linear-gradient(135deg, var(--color-primary), var(--color-light-blue));
            color: var(--color-white);
            padding: 6px 18px;
            border-radius: 50px;
            font-size: 0.8rem;
            font-weight: 600;
            margin-bottom: 1rem;
            letter-spacing: 0.5px;
        }
        
        .section-title {
            font-size: 2.5rem;
            font-weight: 800;
            margin-bottom: 1rem;
            color: var(--color-dark);
        }
        
        .section-subtitle {
            font-size: 1.1rem;
            color: #6c757d;
            max-width: 700px;
            margin: 0 auto;
        }
        
        /* Hero Section */
        .hero {
            position: relative;
            min-height: 550px;
            display: flex;
            align-items: center;
            background: linear-gradient(110deg, var(--color-primary) 0%, var(--color-dark) 100%);
            overflow: hidden;
        }
        
        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 55%;
            height: 100%;
            background: url('https://images.unsplash.com/photo-1523580494863-6f3031224c94?q=80&w=2070&auto=format&fit=crop');
            background-size: cover;
            background-position: center;
            opacity: 0.12;
        }
        
        .hero::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 20% 50%, rgba(32,83,151,0.3) 0%, rgba(30,30,30,0.7) 100%);
        }
        
        .hero-content {
            position: relative;
            z-index: 2;
            background: rgba(255,255,255,0.97);
            border-radius: 20px;
            padding: 45px 50px;
            max-width: 580px;
            box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
        }
        
        /* Option Cards */
        .option-card {
            background: var(--color-white);
            border-radius: 20px;
            padding: 35px 25px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid transparent;
            height: 100%;
            box-shadow: 0 4px 15px rgba(0,0,0,0.08);
        }
        
        .option-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 35px -10px rgba(0,0,0,0.15);
        }
        
        .option-card.selected {
            border-color: var(--color-accent);
            background: linear-gradient(135deg, var(--color-white), #fff5f5);
        }
        
        .option-icon {
            width: 85px;
            height: 85px;
            background: linear-gradient(135deg, var(--color-primary), var(--color-light-blue));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            transition: transform 0.3s ease;
        }
        
        .option-card:hover .option-icon {
            transform: scale(1.05);
        }
        
        .option-icon i {
            font-size: 2.5rem;
            color: var(--color-white);
        }
        
        .option-card h3 {
            font-size: 1.6rem;
            font-weight: 700;
            margin-bottom: 10px;
            color: var(--color-dark);
        }
        
        .tag-group {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            justify-content: center;
            margin-top: 15px;
        }
        
        .tag {
            background: #f0f2f5;
            padding: 5px 14px;
            border-radius: 30px;
            font-size: 0.75rem;
            font-weight: 500;
            color: var(--color-primary);
        }
        
        /* Cycle Cards (Swiper) */
        .cycle-card {
            background: var(--color-white);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 15px 35px -10px rgba(0,0,0,0.12);
            transition: all 0.3s ease;
            margin: 20px 10px;
        }
        
        .cycle-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 25px 45px -12px rgba(0,0,0,0.2);
        }
        
        .cycle-header {
            background: linear-gradient(135deg, var(--color-primary), var(--color-dark));
            padding: 30px;
            text-align: center;
            color: var(--color-white);
        }
        
        .cycle-header.eco {
            background: linear-gradient(135deg, var(--color-accent), #a00505);
        }
        
        .cycle-header h3 {
            font-size: 1.6rem;
            font-weight: 700;
            margin: 15px 0 5px;
        }
        
        .cycle-body {
            padding: 25px;
        }
        
        .speciality-list {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin: 20px 0;
        }
        
        .speciality {
            background: #f0f2f5;
            padding: 6px 15px;
            border-radius: 30px;
            font-size: 0.8rem;
            font-weight: 500;
            color: var(--color-primary);
        }
        
        /* Feature Cards */
        .feature-card {
            background: var(--color-white);
            border-radius: 16px;
            padding: 25px;
            height: 100%;
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px rgba(0,0,0,0.06);
            border-left: 4px solid var(--color-accent);
        }
        
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px -12px rgba(0,0,0,0.12);
        }
        
        .feature-icon {
            width: 55px;
            height: 55px;
            background: rgba(32,83,151,0.1);
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
        }
        
        .feature-icon i {
            font-size: 1.8rem;
            color: var(--color-primary);
        }
        
        /* Accordion */
        .accordion-custom {
            background: var(--color-white);
            border-radius: 16px;
            margin-bottom: 15px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        
        .accordion-header-custom {
            background: var(--color-white);
            padding: 18px 22px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 600;
            transition: background 0.2s;
            color: var(--color-dark);
        }
        
        .accordion-header-custom:hover {
            background: #f8f9fa;
        }
        
        .accordion-icon {
            transition: transform 0.3s;
            font-size: 1.2rem;
            color: var(--color-accent);
            font-weight: bold;
        }
        
        .accordion-body-custom {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
            padding: 0 22px;
        }
        
        .accordion-body-custom.open {
            max-height: 300px;
            padding: 0 22px 20px 22px;
        }
        
        /* CTA Section */
        .cta-section {
            background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-dark) 100%);
            padding: 70px 0;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        .cta-section::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -20%;
            width: 70%;
            height: 200%;
            background: radial-gradient(circle, rgba(233,7,7,0.08) 0%, transparent 70%);
        }
        
        /* Swiper */
        .swiper-button-next, .swiper-button-prev {
            background: var(--color-white);
            width: 45px;
            height: 45px;
            border-radius: 50%;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .swiper-button-next:after, .swiper-button-prev:after {
            font-size: 1.2rem;
            color: var(--color-primary);
            font-weight: bold;
        }
        
        .swiper-pagination-bullet-active {
            background: var(--color-accent);
        }
        
        /* Validation Section */
        .validation-box {
            background: var(--color-white);
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            display: inline-block;
            width: auto;
            min-width: 350px;
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            .section-title {
                font-size: 1.8rem;
            }
            
            .hero-content {
                padding: 30px 25px;
                margin: 0 15px;
            }
            
            .hero-content h1 {
                font-size: 1.6rem !important;
            }
            
            .option-card {
                padding: 25px 20px;
            }
            
            .option-card h3 {
                font-size: 1.3rem;
            }
            
            .validation-box {
                min-width: auto;
                width: 100%;
            }
        }
        
        @media (max-width: 576px) {
            .hero {
                min-height: 480px;
            }
            
            .btn-primary-custom, .btn-accent-custom {
                padding: 10px 20px;
                font-size: 0.85rem;
            }
        }
    </style>
</head>
<body>

<!-- Navigation -->
{% include 'includes/navbar.html' %}

<main>

    <!-- ==================== HERO SECTION ==================== -->
    <section class="hero">
        <div class="container position-relative">
            <div class="row justify-content-start">
                <div class="col-lg-6 col-md-8">
                    <div class="hero-content fade-left">
                        <div class="section-badge" style="background: linear-gradient(135deg, var(--color-accent), #a00505);">
                            <i class="fas fa-graduation-cap me-2"></i> Parcours d'Excellence
                        </div>
                        <h1 style="font-size: 2.5rem; font-weight: 800; color: var(--color-dark); margin-bottom: 15px;">
                            Classes <span style="color: var(--color-primary);">Préparatoires</span>
                        </h1>
                        <div style="width: 70px; height: 4px; background: var(--color-accent); margin-bottom: 20px;"></div>
                        <p style="color: #6c757d; font-size: 1rem; line-height: 1.7; margin-bottom: 20px;">
                            Une formation complète de haut niveau permettant aux étudiants d'acquérir des bases solides 
                            et de réussir les concours d'entrée aux Grandes Écoles d'ingénieurs et de commerce.
                        </p>
                        <p style="color: #6c757d; font-size: 0.95rem; margin-bottom: 30px;">
                            La classe préparatoire à l'ESSIG prépare les étudiants aux concours des grandes écoles en <strong>2 ans</strong>.
                        </p>
                        <div class="d-flex gap-3 flex-wrap">
                            <a href="#choix" class="btn-accent-custom">
                                <i class="fas fa-arrow-right"></i> Découvrir les filières
                            </a>
                            <a href="#inscriptions" class="btn-outline-custom">
                                <i class="fas fa-file-alt"></i> Postuler
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ==================== CHOIX DE LA PRÉPA ==================== -->
    <section id="choix" style="padding: 80px 0; background: #ffffff;">
        <div class="container">
            <div class="text-center mb-5">
                <span class="section-badge">
                    <i class="fas fa-compass me-1"></i> Votre voie
                </span>
                <h2 class="section-title">Quelle classe préparatoire<br><span style="color: var(--color-primary);">souhaitez-vous intégrer ?</span></h2>
                <p class="section-subtitle">Choisissez votre parcours d'excellence pour accéder aux cycles supérieurs de demain</p>
            </div>
            
            <div class="row g-4 justify-content-center" id="prepaOptions">
                <!-- Option Ingénieur -->
                <div class="col-md-6">
                    <div class="option-card" data-cycle="ingenieur" onclick="selectPrepaOption('ingenieur')">
                        <div class="option-icon">
                            <i class="fas fa-microchip"></i>
                        </div>
                        <h3>Cycle Ingénieur</h3>
                        <p class="text-muted">Préparation aux Grandes Écoles d'ingénieurs</p>
                        <div class="tag-group">
                            <span class="tag">Data & IA</span>
                            <span class="tag">Cybersécurité</span>
                            <span class="tag">Énergie</span>
                            <span class="tag">Génie Civil</span>
                            <span class="tag">Mécatronique</span>
                            <span class="tag">Télécoms</span>
                        </div>
                    </div>
                </div>
                
                <!-- Option Éco-Gestion -->
                <div class="col-md-6">
                    <div class="option-card" data-cycle="eco-gestion" onclick="selectPrepaOption('eco-gestion')">
                        <div class="option-icon">
                            <i class="fas fa-chart-line"></i>
                        </div>
                        <h3>Cycle Éco-Gestion</h3>
                        <p class="text-muted">Préparation aux Écoles de Commerce & Management</p>
                        <div class="tag-group">
                            <span class="tag">Management</span>
                            <span class="tag">Finance</span>
                            <span class="tag">Marketing</span>
                            <span class="tag">RH</span>
                            <span class="tag">Logistique</span>
                            <span class="tag">Commerce</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Validation Section -->
            <div id="validationSection" class="text-center mt-5 pt-4" style="display: none;">
                <div class="validation-box p-4">
                    <i class="fas fa-check-circle" style="color: var(--color-accent); font-size: 1.8rem;"></i>
                    <p class="mt-2 mb-2 fw-semibold">Vous avez sélectionné :</p>
                    <strong id="selectedCycleName" style="color: var(--color-primary); font-size: 1.2rem;"></strong>
                    <div class="mt-3">
                        <a href="#" id="validateBtn" class="btn-primary-custom">
                            <i class="fas fa-eye"></i> Voir les programmes détaillés
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ==================== SLIDER DES CYCLES ==================== -->
    <section style="padding: 80px 0; background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);">
        <div class="container">
            <div class="text-center mb-5">
                <span class="section-badge">
                    <i class="fas fa-layer-group me-1"></i> Formations
                </span>
                <h2 class="section-title">Nos cycles de <span style="color: var(--color-primary);">spécialisation</span></h2>
                <p class="section-subtitle">Après la classe préparatoire, choisissez parmi nos programmes d'excellence</p>
            </div>
            
            <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                    <!-- Slide 1 - Data & IA -->
                    <div class="swiper-slide">
                        <div class="cycle-card">
                            <div class="cycle-header">
                                <i class="fas fa-database" style="font-size: 2.5rem;"></i>
                                <h3>Data & IA</h3>
                                <p class="mb-0 opacity-75">Cycle Ingénieur</p>
                            </div>
                            <div class="cycle-body">
                                <p class="text-muted">Maîtrisez les technologies de pointe en intelligence artificielle et big data.</p>
                                <div class="speciality-list">
                                    <span class="speciality">Machine Learning</span>
                                    <span class="speciality">Deep Learning</span>
                                    <span class="speciality">Big Data</span>
                                    <span class="speciality">Cloud Computing</span>
                                </div>
                                <a href="#" class="btn-outline-custom w-100 justify-content-center mt-3">
                                    <i class="fas fa-info-circle"></i> En savoir plus
                                </a>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Slide 2 - Cybersécurité -->
                    <div class="swiper-slide">
                        <div class="cycle-card">
                            <div class="cycle-header">
                                <i class="fas fa-shield-alt" style="font-size: 2.5rem;"></i>
                                <h3>Cybersécurité</h3>
                                <p class="mb-0 opacity-75">Cycle Ingénieur</p>
                            </div>
                            <div class="cycle-body">
                                <p class="text-muted">Protégez les infrastructures critiques et maîtrisez la sécurité informatique.</p>
                                <div class="speciality-list">
                                    <span class="speciality">Réseaux</span>
                                    <span class="speciality">Cryptographie</span>
                                    <span class="speciality">Forensic</span>
                                    <span class="speciality">Pentesting</span>
                                </div>
                                <a href="#" class="btn-outline-custom w-100 justify-content-center mt-3">
                                    <i class="fas fa-info-circle"></i> En savoir plus
                                </a>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Slide 3 - Énergie -->
                    <div class="swiper-slide">
                        <div class="cycle-card">
                            <div class="cycle-header">
                                <i class="fas fa-bolt" style="font-size: 2.5rem;"></i>
                                <h3>Énergie</h3>
                                <p class="mb-0 opacity-75">Cycle Ingénieur</p>
                            </div>
                            <div class="cycle-body">
                                <p class="text-muted">Spécialisez-vous dans les énergies renouvelables et la gestion énergétique.</p>
                                <div class="speciality-list">
                                    <span class="speciality">Énergie Solaire</span>
                                    <span class="speciality">Smart Grid</span>
                                    <span class="speciality">Efficacité Énergétique</span>
                                    <span class="speciality">Hydrogène</span>
                                </div>
                                <a href="#" class="btn-outline-custom w-100 justify-content-center mt-3">
                                    <i class="fas fa-info-circle"></i> En savoir plus
                                </a>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Slide 4 - Finance -->
                    <div class="swiper-slide">
                        <div class="cycle-card">
                            <div class="cycle-header eco">
                                <i class="fas fa-chart-simple" style="font-size: 2.5rem;"></i>
                                <h3>Finance & Banque</h3>
                                <p class="mb-0 opacity-75">Cycle Éco-Gestion</p>
                            </div>
                            <div class="cycle-body">
                                <p class="text-muted">Devenez expert en marchés financiers, gestion de portefeuille et analyse économique.</p>
                                <div class="speciality-list">
                                    <span class="speciality">Marchés Financiers</span>
                                    <span class="speciality">Gestion de Risque</span>
                                    <span class="speciality">Audit</span>
                                    <span class="speciality">Conformité</span>
                                </div>
                                <a href="#" class="btn-outline-custom w-100 justify-content-center mt-3">
                                    <i class="fas fa-info-circle"></i> En savoir plus
                                </a>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Slide 5 - Marketing -->
                    <div class="swiper-slide">
                        <div class="cycle-card">
                            <div class="cycle-header eco">
                                <i class="fas fa-bullhorn" style="font-size: 2.5rem;"></i>
                                <h3>Marketing Digital</h3>
                                <p class="mb-0 opacity-75">Cycle Éco-Gestion</p>
                            </div>
                            <div class="cycle-body">
                                <p class="text-muted">Maîtrisez les stratégies digitales et le marketing moderne.</p>
                                <div class="speciality-list">
                                    <span class="speciality">Social Media</span>
                                    <span class="speciality">SEO/SEA</span>
                                    <span class="speciality">E-commerce</span>
                                    <span class="speciality">CRM</span>
                                </div>
                                <a href="#" class="btn-outline-custom w-100 justify-content-center mt-3">
                                    <i class="fas fa-info-circle"></i> En savoir plus
                                </a>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Slide 6 - Management -->
                    <div class="swiper-slide">
                        <div class="cycle-card">
                            <div class="cycle-header eco">
                                <i class="fas fa-users" style="font-size: 2.5rem;"></i>
                                <h3>Management</h3>
                                <p class="mb-0 opacity-75">Cycle Éco-Gestion</p>
                            </div>
                            <div class="cycle-body">
                                <p class="text-muted">Développez vos compétences en leadership et gestion d'entreprise.</p>
                                <div class="speciality-list">
                                    <span class="speciality">RH</span>
                                    <span class="speciality">Logistique</span>
                                    <span class="speciality">Stratégie</span>
                                    <span class="speciality">Entrepreneuriat</span>
                                </div>
                                <a href="#" class="btn-outline-custom w-100 justify-content-center mt-3">
                                    <i class="fas fa-info-circle"></i> En savoir plus
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-pagination"></div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div>
        </div>
    </section>

    <!-- ==================== POURQUOI CHOISIR ==================== -->
    <section style="padding: 80px 0; background: #ffffff;">
        <div class="container">
            <div class="row g-5 align-items-center">
                <div class="col-lg-6">
                    <div class="fade-up">
                        <span class="section-badge" style="background: linear-gradient(135deg, var(--color-accent), #a00505);">
                            <i class="fas fa-star me-1"></i> Notre Excellence
                        </span>
                        <h2 class="section-title">Pourquoi choisir<br><span style="color: var(--color-primary);">la Prépa à l'ESSIG ?</span></h2>
                        <div style="width: 60px; height: 3px; background: var(--color-accent); margin-bottom: 25px;"></div>
                        <p style="color: #6c757d; line-height: 1.7; margin-bottom: 20px;">
                            Nos classes préparatoires offrent un encadrement d'exception pour maximiser vos chances 
                            de réussite aux concours des Grandes Écoles. Un programme rigoureux, des professeurs 
                            expérimentés et un suivi personnalisé.
                        </p>
                        <p style="color: #6c757d; line-height: 1.7; margin-bottom: 30px;">
                            Nous mettons à disposition de nos étudiants des ressources pédagogiques exceptionnelles, 
                            un corps professoral dédié et des conditions de travail optimales.
                        </p>
                    </div>
                    
                    <div class="row g-4 mt-2">
                        <div class="col-sm-6">
                            <div class="feature-card fade-up delay-1">
                                <div class="feature-icon">
                                    <i class="fas fa-brain"></i>
                                </div>
                                <h5 class="fw-bold mb-2">Rigueur Scientifique</h5>
                                <p class="small text-muted">Développez une méthode de travail infaillible et des compétences analytiques pointues.</p>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="feature-card fade-up delay-2">
                                <div class="feature-icon">
                                    <i class="fas fa-trophy"></i>
                                </div>
                                <h5 class="fw-bold mb-2">Réussite aux Concours</h5>
                                <p class="small text-muted">Un accompagnement intensif pour intégrer les meilleures écoles nationales.</p>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="feature-card fade-up delay-3">
                                <div class="feature-icon">
                                    <i class="fas fa-chalkboard-user"></i>
                                </div>
                                <h5 class="fw-bold mb-2">Professeurs Experts</h5>
                                <p class="small text-muted">Une équipe pédagogique dédiée et expérimentée dans la préparation aux concours.</p>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="feature-card fade-up delay-4">
                                <div class="feature-icon">
                                    <i class="fas fa-users"></i>
                                </div>
                                <h5 class="fw-bold mb-2">Suivi Personnalisé</h5>
                                <p class="small text-muted">Des classes à taille humaine pour un accompagnement individualisé.</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-6">
                    <div class="bg-white rounded-4 p-4 p-lg-5 shadow-lg fade-right">
                        <h3 class="fw-bold mb-4" style="color: var(--color-dark);">
                            <i class="fas fa-info-circle me-2" style="color: var(--color-accent);"></i> 
                            Informations Pratiques
                        </h3>
                        
                        <!-- Accordion 1 - Frais -->
                        <div class="accordion-custom">
                            <div class="accordion-header-custom" onclick="toggleAccordion(this)">
                                <span><i class="fas fa-euro-sign me-2" style="color: var(--color-accent);"></i> Frais de scolarité</span>
                                <span class="accordion-icon">+</span>
                            </div>
                            <div class="accordion-body-custom">
                                <div class="pt-2 pb-3">
                                    <h6 class="fw-bold mb-3" style="color: var(--color-dark);">Frais de Scolarité</h6>
                                    <table class="table table-bordered table-sm mb-3" style="font-size: 0.95rem;">
                                        <thead style="background-color: #f8f9fa;">
                                            <tr>
                                                <th style="color: var(--color-dark); font-weight: 600;">Désignation</th>
                                                <th style="color: var(--color-dark); font-weight: 600;">Montant (FCFA)</th>
                                                <th style="color: var(--color-dark); font-weight: 600;">Équivalent (€)</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>Frais d'inscription</td>
                                                <td>268 000 FCFA</td>
                                                <td>408,56 €</td>
                                            </tr>
                                            <tr>
                                                <td>Scolarité annuelle</td>
                                                <td>860 000 FCFA</td>
                                                <td>1 311,06 €</td>
                                            </tr>
                                            <tr>
                                                <td>Frais de gestion</td>
                                                <td>35 000 FCFA</td>
                                                <td>53,36 €</td>
                                            </tr>
                                            <tr style="background-color: #f8f9fa;">
                                                <td><strong>TOTAL ANNUEL</strong></td>
                                                <td><strong>1 163 000 FCFA</strong></td>
                                                <td><strong>1 772,98 €</strong></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    
                                    <h6 class="fw-bold mt-4 mb-2" style="color: var(--color-dark);">Frais additionnels</h6>
                                    <ul class="list-unstyled mb-0">
                                        <li><i class="fas fa-check-circle me-2" style="color: var(--color-accent); font-size: 0.8rem;"></i> <strong>Frais d'étude de dossier et de test :</strong> 10 000 FCFA</li>
                                    </ul>
                                    
                                    <p class="small text-muted mt-3 mb-0">* Paiement possible en plusieurs fois</p>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Accordion 2 - Pièces -->
                        <div class="accordion-custom">
                            <div class="accordion-header-custom" onclick="toggleAccordion(this)">
                                <span><i class="fas fa-file-alt me-2" style="color: var(--color-accent);"></i> Pièces à fournir</span>
                                <span class="accordion-icon">+</span>
                            </div>
                            <div class="accordion-body-custom">
                                <div class="pt-2 pb-3">
                                    <ul class="list-unstyled mb-0">
                                        <li class="mb-2"><i class="fas fa-check-circle me-2" style="color: var(--color-accent); font-size: 0.8rem;"></i> Copie légalisée du BAC (ou équivalent)</li>
                                        <li class="mb-2"><i class="fas fa-check-circle me-2" style="color: var(--color-accent); font-size: 0.8rem;"></i> Copie de l'acte de naissance</li>
                                        <li class="mb-2"><i class="fas fa-check-circle me-2" style="color: var(--color-accent); font-size: 0.8rem;"></i> 4 photos d'identité</li>
                                        <li class="mb-2"><i class="fas fa-check-circle me-2" style="color: var(--color-accent); font-size: 0.8rem;"></i> Certificat médical</li>
                                        <li><i class="fas fa-check-circle me-2" style="color: var(--color-accent); font-size: 0.8rem;"></i> Lettre de motivation</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Accordion 3 - Dates -->
                        <div class="accordion-custom">
                            <div class="accordion-header-custom" onclick="toggleAccordion(this)">
                                <span><i class="fas fa-calendar-alt me-2" style="color: var(--color-accent);"></i> Dates clés</span>
                                <span class="accordion-icon">+</span>
                            </div>
                            <div class="accordion-body-custom">
                                <div class="pt-2 pb-3">
                                    <p><strong>Pré-inscriptions :</strong> Mai - Juillet</p>
                                    <p><strong>Concours d'entrée :</strong> Septembre</p>
                                    <p><strong>Rentrée académique :</strong> Octobre</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ==================== CTA FINAL ==================== -->
    <section id="inscriptions" class="cta-section">
        <div class="container position-relative" style="z-index: 2;">
            <h2 class="display-5 fw-bold mb-4 text-white">Visez l'excellence académique !</h2>
            <p class="fs-5 mb-4 text-white opacity-90" style="max-width: 650px; margin: 0 auto;">
                Rejoignez nos classes préparatoires et ouvrez-vous les portes des meilleures Grandes Écoles.
            </p>
            <div class="d-flex gap-3 justify-content-center flex-wrap">
                <a href="#" class="btn-outline-custom" style="background: transparent; border-color: var(--color-white); color: var(--color-white);">
                    <i class="fas fa-user-plus"></i> S'inscrire maintenant
                </a>
            </div>
        </div>
    </section>

</main>

<!-- Footer -->
{% include 'includes/footer.html' %}

<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<script>
    // Initialisation Swiper
    const swiper = new Swiper('.mySwiper', {
        slidesPerView: 1,
        spaceBetween: 20,
        loop: true,
        pagination: { 
            el: '.swiper-pagination', 
            clickable: true 
        },
        navigation: { 
            nextEl: '.swiper-button-next', 
            prevEl: '.swiper-button-prev' 
        },
        breakpoints: {
            640: { slidesPerView: 1.2, centeredSlides: true },
            768: { slidesPerView: 1.3, centeredSlides: true },
            992: { slidesPerView: 2, centeredSlides: false, spaceBetween: 25 },
            1200: { slidesPerView: 2.3, centeredSlides: false, spaceBetween: 30 }
        }
    });
    
    // Fonction Accordéon
    function toggleAccordion(header) {
        const body = header.nextElementSibling;
        const icon = header.querySelector('.accordion-icon');
        const isOpen = body.classList.contains('open');
        
        // Fermer tous les autres accordéons
        document.querySelectorAll('.accordion-body-custom').forEach(item => {
            if (item !== body) {
                item.classList.remove('open');
                const otherIcon = item.previousElementSibling.querySelector('.accordion-icon');
                if (otherIcon) otherIcon.textContent = '+';
            }
        });
        
        // Ouvrir/Fermer celui cliqué
        if (!isOpen) {
            body.classList.add('open');
            icon.textContent = '−';
        } else {
            body.classList.remove('open');
            icon.textContent = '+';
        }
    }
    
    // Sélection classe préparatoire
    let selectedCycle = null;
    
    function selectPrepaOption(cycle) {
        selectedCycle = cycle;
        
        // Mise à jour des cartes
        document.querySelectorAll('.option-card').forEach(card => {
            card.classList.remove('selected');
        });
        
        const selectedCard = document.querySelector(`.option-card[data-cycle="${cycle}"]`);
        selectedCard.classList.add('selected');
        
        // Affichage section validation
        const validationSection = document.getElementById('validationSection');
        validationSection.style.display = 'block';
        
        // Mise à jour texte
        const cycleName = cycle === 'ingenieur' ? 'Cycle Ingénieur' : 'Cycle Éco-Gestion';
        document.getElementById('selectedCycleName').textContent = cycleName;
        
        // Mise à jour lien
        const validateBtn = document.getElementById('validateBtn');
        if (cycle === 'ingenieur') {
            validateBtn.href = '{% url "cycle_ingenieurs" %}';
        } else {
            validateBtn.href = '{% url "cycle_gestion" %}';
        }
        
        // Scroll smooth vers la validation
        validationSection.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
    
    // Intersection Observer pour animations
    const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -50px 0px' };
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.opacity = '1';
                entry.target.style.transform = 'translateY(0)';
                observer.unobserve(entry.target);
            }
        });
    }, observerOptions);
    
    // Appliquer l'observer aux éléments animés
    document.querySelectorAll('.fade-up, .fade-left, .fade-right, .scale-in').forEach(el => {
        if (!el.classList.contains('delay-1') && !el.classList.contains('delay-2') && 
            !el.classList.contains('delay-3') && !el.classList.contains('delay-4')) {
            el.style.opacity = '0';
            el.style.transform = 'translateY(30px)';
            observer.observe(el);
        }
    });
    
    // Pour les éléments avec délai
    document.querySelectorAll('.delay-1, .delay-2, .delay-3, .delay-4').forEach(el => {
        el.style.opacity = '0';
        el.style.transform = 'translateY(30px)';
        observer.observe(el);
    });
</script>

</body>
</html>