{% load static %}
<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formations - ESSIG</title>
    <link rel="shortcut icon" type="image/jpeg" href="{% static 'img/logo-removebg-preview.png' %}">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap"
        rel="stylesheet">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

    <!-- Variables CSS Globales -->
    <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;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        main {
            flex: 1;
        }

        /* Animation fadeInUp */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Animation slideInLeft */
        @keyframes slideInLeft {
            from {
                opacity: 0;
                transform: translateX(-50px);
            }

            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        /* Animation slideInRight */
        @keyframes slideInRight {
            from {
                opacity: 0;
                transform: translateX(50px);
            }

            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .animate-fadeInUp {
            animation: fadeInUp 0.8s ease forwards;
        }

        .animate-slideInLeft {
            animation: slideInLeft 0.8s ease forwards;
        }

        .animate-slideInRight {
            animation: slideInRight 0.8s ease forwards;
        }

        .delay-1 {
            animation-delay: 0.2s;
            opacity: 0;
        }

        .delay-2 {
            animation-delay: 0.4s;
            opacity: 0;
        }

        .delay-3 {
            animation-delay: 0.6s;
            opacity: 0;
        }
    </style>
</head>

<body>

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

    <!-- Contenu principal -->
    <main>
        <!-- =========================
             🎯 HERO SECTION - PAGE FORMATIONS
        ========================== -->
        <section
            style="position: relative; background: linear-gradient(135deg, var(--color-primary) 0%, #0d2a4d 100%); padding: 100px 0; overflow: hidden; min-height: 550px;">

            <!-- Image statique à droite (fixe au scroll) -->
            <div style="position: absolute; top: 0; right: 0; width: 55%; height: 100%; overflow: hidden;">
               <div style="position: absolute; top: 0; right: 0; width: 100%; height: 100%; background-image: url('{% static "img/diplome-cta-static.jpg" %}'); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover;">
</div>

                <!-- Overlay léger -->
                <div
                    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(13,42,77,0.3) 0%, rgba(13,42,77,0.1) 100%);">
                </div>
            </div>
            <!-- Éléments décoratifs -->
            <div
                style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none;">
                <div
                    style="position: absolute; bottom: -50px; left: -50px; width: 300px; height: 300px; background: rgba(255,255,255,0.03); border-radius: 50%;">
                </div>
                <div
                    style="position: absolute; top: 50px; left: 20%; width: 150px; height: 150px; background: rgba(233,7,7,0.05); border-radius: 50%;">
                </div>
            </div>

            <div class="container" style="position: relative; z-index: 2;">
                <div class="row">
                    <div class="col-lg-6">
                        <!-- Carte en forme diagonale / zigzag -->
                        <div class="diagonal-card"
                            style="background: rgba(255,255,255,0.95); backdrop-filter: blur(5px); border-radius: 30px; padding: 45px 40px; position: relative; overflow: hidden; box-shadow: 0 25px 50px rgba(0,0,0,0.2);">

                            <!-- Effet de diagonale / zigzag sur le bord droit -->
                            <div
                                style="position: absolute; top: 0; right: -30px; width: 80px; height: 100%; background: var(--color-primary); transform: skewX(-10deg);">
                            </div>
                            <div
                                style="position: absolute; top: 0; right: -50px; width: 60px; height: 100%; background: var(--color-accent); transform: skewX(-15deg); opacity: 0.8;">
                            </div>

                            <!-- Contenu de la carte -->
                            <div style="position: relative; z-index: 2;">
                                <!-- Badge -->
                                <div
                                    style="display: inline-block; background: var(--color-accent); color: white; padding: 6px 18px; border-radius: 50px; font-size: 0.8rem; font-weight: 600; margin-bottom: 25px;">
                                    <i class="fas fa-graduation-cap" style="margin-right: 8px;"></i> Formation
                                    d'excellence
                                </div>

                                <!-- Titre -->
                                <h1
                                    style="font-size: 2.8rem; font-weight: 800; color: var(--color-dark); margin-bottom: 20px; line-height: 1.2;">
                                    Nos <span style="color: var(--color-primary);">Formations</span>
                                </h1>

                                <!-- Séparateur -->
                                <div
                                    style="width: 70px; height: 4px; background: var(--color-accent); margin-bottom: 25px; border-radius: 2px;">
                                </div>

                                <!-- Description -->
                                <p style="font-size: 1rem; color: #444; line-height: 1.7; margin-bottom: 20px;">
                                    Avec plus de <strong style="color: var(--color-primary);">20 ans d'excellence
                                        académique</strong>, ESSIG forme des cadres compétents et prêts à s'insérer
                                    efficacement dans le monde professionnel : salariés ou entrepreneurs.
                                </p>

                                <p style="font-size: 0.95rem; color: #555; line-height: 1.6; margin-bottom: 30px;">
                                    ESSIG accompagne chaque étudiant vers l'excellence dans une dynamique qui
                                    favorise le développement personnel et entrepreneurial.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <style>
                @keyframes slideInLeft {
                    from {
                        opacity: 0;
                        transform: translateX(-60px);
                    }

                    to {
                        opacity: 1;
                        transform: translateX(0);
                    }
                }

                .diagonal-card {
                    animation: slideInLeft 0.8s ease forwards;
                    opacity: 0;
                }

                /* Désactiver l'effet fixed sur mobile pour meilleure performance */
                @media (max-width: 992px) {
                    section>div:first-child div:first-child {
                        background-attachment: scroll !important;
                    }

                    section>div:first-child {
                        width: 100%;
                        opacity: 0.3;
                    }

                    .diagonal-card {
                        background: rgba(255, 255, 255, 0.98);
                    }
                }

                @media (max-width: 768px) {
                    .diagonal-card {
                        padding: 30px 25px !important;
                    }

                    h1 {
                        font-size: 2rem !important;
                    }
                }
            </style>
        </section>

        <!-- =========================
             🎯 SECTION NOS PARCOURS
        ========================== -->
        <section
            style="padding: 100px 0; background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); position: relative; overflow: hidden;">
            <!-- Éléments décoratifs -->
            <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 0;">
                <div
                    style="position: absolute; bottom: 0; right: 0; width: 400px; height: 400px; background: radial-gradient(circle, rgba(32,83,151,0.03) 0%, rgba(32,83,151,0) 70%); border-radius: 50%;">
                </div>
                <div
                    style="position: absolute; top: 200px; left: -150px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(233,7,7,0.02) 0%, rgba(233,7,7,0) 70%); border-radius: 50%;">
                </div>
            </div>

            <div class="container" style="position: relative; z-index: 2;">
                <!-- En-tête -->
                <div style="text-align: center; margin-bottom: 60px;">
                    <span
                        style="display: inline-block; background: linear-gradient(135deg, var(--color-primary), var(--color-light-blue)); color: white; padding: 6px 18px; border-radius: 50px; font-size: 0.8rem; font-weight: 600; margin-bottom: 15px;">
                        <i class="fas fa-graduation-cap" style="margin-right: 8px;"></i> Nos différents parcours
                    </span>
                    <h2 style="font-size: 2.5rem; font-weight: 800; color: var(--color-dark); margin-bottom: 15px;">
                        Des programmes d'excellence pour <span style="color: var(--color-primary);">tous les
                            niveaux</span>
                    </h2>
                    <p style="color: #666; max-width: 600px; margin: 0 auto;">Les différents parcours proposés par
                        ESSIG</p>
                    <div
                        style="width: 80px; height: 4px; background: linear-gradient(90deg, var(--color-accent), var(--color-primary)); margin: 20px auto 0; border-radius: 2px;">
                    </div>
                </div>

                <!-- PARCOURS 1: LICENCE (texte à gauche, image à droite) -->
                <div class="formation-block"
                    style="background: white; border-radius: 24px; margin-bottom: 40px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.08); transition: all 0.3s ease;">
                    <div style="display: flex; flex-wrap: wrap;">
                        <div style="flex: 1; padding: 40px; min-width: 280px;">
                            <div
                                style="width: 70px; height: 70px; background: linear-gradient(135deg, rgba(32,83,151,0.1), rgba(74,144,226,0.1)); border-radius: 18px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px;">
                                <i class="fas fa-user-graduate"
                                    style="font-size: 2rem; color: var(--color-primary);"></i>
                            </div>
                            <h3
                                style="font-size: 1.8rem; font-weight: 700; color: var(--color-dark); margin-bottom: 10px;">
                                Licence</h3>
                            <p style="color: var(--color-accent); font-weight: 600; margin-bottom: 15px;">Durée : 3 ans
                                | 180 crédits</p>
                            <p style="color: #555; line-height: 1.6; margin-bottom: 25px;">
                                Obtenez en 3 ans une licence professionnelle dans les domaines de la technologie, de la
                                Gestion, de l'administration et de la communication. Programme de formation comporte 180
                                crédits, répartis en 30 crédits par semestre.
                            </p>
                            <a href="{% url 'licence' %}" class="btn-red"
                                style="display: inline-flex; align-items: center; gap: 10px; background: var(--color-accent); color: white; padding: 12px 28px; border-radius: 40px; text-decoration: none; font-weight: 600; transition: all 0.3s ease;">
                                Voir les filières <i class="fas fa-arrow-right"
                                    style="transition: transform 0.3s ease;"></i>
                            </a>
                        </div>
                        <div
                            style="flex: 1; background: linear-gradient(135deg, #f0f4f9, #e8edf5); padding: 0; min-width: 280px; position: relative; overflow: hidden;">
                            <img src="https://images.unsplash.com/photo-1523240795612-9a054b0db644?w=600&h=450&fit=crop"
                                alt="Licence"
                                style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;">
                            <div
                                style="position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(32,83,151,0.8), transparent); padding: 20px;">
                                <p style="color: white; margin: 0; font-weight: 600;">Licence professionnelle</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- PARCOURS 2: MASTER (image à gauche, texte à droite) -->
                <div class="formation-block"
                    style="background: white; border-radius: 24px; margin-bottom: 40px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.08); transition: all 0.3s ease;">
                    <div style="display: flex; flex-wrap: wrap; flex-direction: row-reverse;">
                        <div style="flex: 1; padding: 40px; min-width: 280px;">
                            <div
                                style="width: 70px; height: 70px; background: linear-gradient(135deg, rgba(32,83,151,0.1), rgba(74,144,226,0.1)); border-radius: 18px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px;">
                                <i class="fas fa-microscope" style="font-size: 2rem; color: var(--color-primary);"></i>
                            </div>
                            <h3
                                style="font-size: 1.8rem; font-weight: 700; color: var(--color-dark); margin-bottom: 10px;">
                                Master</h3>
                            <p style="color: var(--color-accent); font-weight: 600; margin-bottom: 15px;">Durée : 2 ans
                                | 4 semestres</p>
                            <p style="color: #555; line-height: 1.6; margin-bottom: 25px;">
                                Obtenez en 2 ans un master professionnel dans les domaines de la technologie, de la
                                Gestion, de l'administration et de la communication. Programme subdivisé en 4 semestres.
                            </p>
                            <a href="{% url 'master' %}" class="btn-red"
                                style="display: inline-flex; align-items: center; gap: 10px; background: var(--color-accent); color: white; padding: 12px 28px; border-radius: 40px; text-decoration: none; font-weight: 600; transition: all 0.3s ease;">
                                Voir les filières <i class="fas fa-arrow-right"
                                    style="transition: transform 0.3s ease;"></i>
                            </a>
                        </div>
                        <div
                            style="flex: 1; background: linear-gradient(135deg, #f0f4f9, #e8edf5); padding: 0; min-width: 280px; position: relative; overflow: hidden;">
                            <img src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?w=600&h=450&fit=crop"
                                alt="Master"
                                style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;">
                            <div
                                style="position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(32,83,151,0.8), transparent); padding: 20px;">
                                <p style="color: white; margin: 0; font-weight: 600;">Master spécialisé</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- PARCOURS 3: LICENCE - COURS DU SOIR (texte à gauche, image à droite) -->
                <div class="formation-block"
                    style="background: white; border-radius: 24px; margin-bottom: 40px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.08); transition: all 0.3s ease;">
                    <div style="display: flex; flex-wrap: wrap;">
                        <div style="flex: 1; padding: 40px; min-width: 280px;">
                            <div
                                style="width: 70px; height: 70px; background: linear-gradient(135deg, rgba(32,83,151,0.1), rgba(74,144,226,0.1)); border-radius: 18px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px;">
                                <i class="fas fa-moon" style="font-size: 2rem; color: var(--color-primary);"></i>
                            </div>
                            <h3
                                style="font-size: 1.8rem; font-weight: 700; color: var(--color-dark); margin-bottom: 10px;">
                                BTS</h3>
                            <p style="color: var(--color-accent); font-weight: 600; margin-bottom: 15px;">Durée : 2 ans
                                | Insertion rapide</p>
                            <p style="color: #555; line-height: 1.6; margin-bottom: 25px;">
                                Formation technique et professionnelle de haut niveau pour une insertion rapide dans le
                                monde du travail. Programme alliant théorie et pratique professionnelle.
                            </p>
                            <a href="{% url 'bts' %}" class="btn-red"
                                style="display: inline-flex; align-items: center; gap: 10px; background: var(--color-accent); color: white; padding: 12px 28px; border-radius: 40px; text-decoration: none; font-weight: 600; transition: all 0.3s ease;">
                                Voir les filières <i class="fas fa-arrow-right"
                                    style="transition: transform 0.3s ease;"></i>
                            </a>
                        </div>
                        <div
                            style="flex: 1; background: linear-gradient(135deg, #f0f4f9, #e8edf5); padding: 0; min-width: 280px; position: relative; overflow: hidden;">
                            <img src="https://images.unsplash.com/photo-1581091226033-d5c48150dbaa?w=600&h=450&fit=crop"
                                alt="BTS"
                                style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;">
                            <div
                                style="position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(32,83,151,0.8), transparent); padding: 20px;">
                                <p style="color: white; margin: 0; font-weight: 600;">Formation technique</p>
                            </div>
                        </div>
                    </div>
                </div>



                <!-- PARCOURS 5: CLASSES PRÉPARATOIRES (texte à gauche, image à droite) -->
               <div class="formation-block"
                    style="background: white; border-radius: 24px; margin-bottom: 40px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.08); transition: all 0.3s ease;">
                    <div style="display: flex; flex-wrap: wrap; flex-direction: row-reverse;">
                        <div style="flex: 1; padding: 40px; min-width: 280px;">
                            <div
                                style="width: 70px; height: 70px; background: linear-gradient(135deg, rgba(32,83,151,0.1), rgba(74,144,226,0.1)); border-radius: 18px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px;">
                                <i class="fas fa-chalkboard" style="font-size: 2rem; color: var(--color-primary);"></i>
                            </div>
                            <h3
                                style="font-size: 1.8rem; font-weight: 700; color: var(--color-dark); margin-bottom: 10px;">
                                Classes Préparatoires</h3>
                            <p style="color: var(--color-accent); font-weight: 600; margin-bottom: 15px;">Durée : 2 ans
                                | Grandes écoles</p>
                            <p style="color: #555; line-height: 1.6; margin-bottom: 25px;">
                                Préparation intensive aux grandes écoles d'ingénieurs et de commerce. Programme exigeant
                                pour exceller aux concours nationaux et internationaux.
                            </p>
                            <a href="{% url 'classe_prepa' %}" class="btn-red"
                                style="display: inline-flex; align-items: center; gap: 10px; background: var(--color-accent); color: white; padding: 12px 28px; border-radius: 40px; text-decoration: none; font-weight: 600; transition: all 0.3s ease;">
                                Voir les filières <i class="fas fa-arrow-right"
                                    style="transition: transform 0.3s ease;"></i>
                            </a>
                        </div>
                        <div
                            style="flex: 1; background: linear-gradient(135deg, #f0f4f9, #e8edf5); padding: 0; min-width: 280px; position: relative; overflow: hidden;">
                            <div style="width: 100%; height: 400px; overflow: hidden; border-radius: 8px;">
                                <img src="{% static 'img/class_prepa.jpg' %}" alt="Classes Préparatoires"
                                    style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;"
                                    onmouseover="this.style.transform='scale(1.1)'"
                                    onmouseout="this.style.transform='scale(1)'">
                            </div>
                            <div
                                style="position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(32,83,151,0.8), transparent); padding: 20px;">
                                <p style="color: white; margin: 0; font-weight: 600;">Préparation intensive</p>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            <style>
                .formation-block {
                    transition: all 0.3s ease;
                }

                .formation-block:hover {
                    transform: translateY(-5px);
                    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
                }

                .formation-block:hover img {
                    transform: scale(1.05);
                }

                .btn-red:hover {
                    background: #cc0000 !important;
                    transform: translateY(-2px);
                    box-shadow: 0 5px 15px rgba(233, 7, 7, 0.3);
                }

                .btn-red:hover i {
                    transform: translateX(5px);
                }

                @keyframes blockAppear {
                    from {
                        opacity: 0;
                        transform: translateY(30px);
                    }

                    to {
                        opacity: 1;
                        transform: translateY(0);
                    }
                }

                .formation-block {
                    animation: blockAppear 0.5s ease forwards;
                    opacity: 0;
                }

                .formation-block:nth-child(1) {
                    animation-delay: 0.1s;
                }

                .formation-block:nth-child(2) {
                    animation-delay: 0.2s;
                }

                .formation-block:nth-child(3) {
                    animation-delay: 0.3s;
                }

                .formation-block:nth-child(4) {
                    animation-delay: 0.4s;
                }

                .formation-block:nth-child(5) {
                    animation-delay: 0.5s;
                }

                @media (max-width: 768px) {
                    .formation-block>div>div:last-child {
                        min-height: 200px;
                    }
                }
            </style>
        </section>
        <!-- =========================
             🎯 SECTION CHIFFRES CLÉS
        ========================== -->
        <!-- =========================
     🎯 SECTION IMAGE STATIQUE (SANS TEXTE)
========================== -->
       <section style="height: 500px; background-image: url('{% static "img/images1.png" %}'); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; display: flex; align-items: center; justify-content: center;">
    
    <!-- Overlay -->
    <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 1;"></div>

    

</section>




        <!-- =========================
     🎯 SECTION STATISTIQUES (CTA) AVEC COMPTEUR JS
========================== -->
        <section style="padding: 70px 0; background: white; position: relative; overflow: hidden;">

            <!-- Éléments décoratifs légers -->
            <div
                style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none;">
                <div
                    style="position: absolute; top: -50px; right: -50px; width: 200px; height: 200px; background: radial-gradient(circle, rgba(32,83,151,0.02) 0%, rgba(32,83,151,0) 70%); border-radius: 50%;">
                </div>
                <div
                    style="position: absolute; bottom: -50px; left: -50px; width: 250px; height: 250px; background: radial-gradient(circle, rgba(233,7,7,0.02) 0%, rgba(233,7,7,0) 70%); border-radius: 50%;">
                </div>
            </div>

            <div class="container" style="position: relative; z-index: 2;">
                <div
                    style="display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; text-align: center;">

                    <!-- Statistique 1: Promotions complétées -->
                    <div style="flex: 1; min-width: 180px; padding: 20px;">
                        <i class="fas fa-calendar-alt"
                            style="font-size: 2.5rem; color: var(--color-accent); margin-bottom: 15px;"></i>
                        <h3
                            style="font-size: 2.5rem; font-weight: 800; color: var(--color-primary); margin: 0; line-height: 1.2;">
                            <span class="stat-number" data-target="21" data-suffix="">0</span>
                        </h3>
                        <p style="color: #555; margin: 10px 0 0 0; font-weight: 500;">Promotions complétées</p>
                    </div>

                    <!-- Séparateur horizontal -->
                    <div
                        style="width: 1px; height: 80px; background: linear-gradient(to bottom, transparent, #ddd, transparent);">
                    </div>

                    <!-- Statistique 2: Etudiants formés -->
                    <div style="flex: 1; min-width: 180px; padding: 20px;">
                        <i class="fas fa-users"
                            style="font-size: 2.5rem; color: var(--color-accent); margin-bottom: 15px;"></i>
                        <h3
                            style="font-size: 2.5rem; font-weight: 800; color: var(--color-primary); margin: 0; line-height: 1.2;">
                            <span class="stat-number" data-target="2327" data-suffix="" data-separator=" ">0</span>
                        </h3>
                        <p style="color: #555; margin: 10px 0 0 0; font-weight: 500;">Étudiants formés</p>
                    </div>

                    <!-- Séparateur horizontal -->
                    <div
                        style="width: 1px; height: 80px; background: linear-gradient(to bottom, transparent, #ddd, transparent);">
                    </div>

                    <!-- Statistique 3: Taux d'insertion professionnelle -->
                    <div style="flex: 1; min-width: 180px; padding: 20px;">
                        <i class="fas fa-briefcase"
                            style="font-size: 2.5rem; color: var(--color-accent); margin-bottom: 15px;"></i>
                        <h3
                            style="font-size: 2.5rem; font-weight: 800; color: var(--color-primary); margin: 0; line-height: 1.2;">
                            <span class="stat-number" data-target="82" data-suffix="%">0</span>
                        </h3>
                        <p style="color: #555; margin: 10px 0 0 0; font-weight: 500;">Taux d'insertion professionnelle
                        </p>
                    </div>

                    <!-- Séparateur horizontal -->
                    <div
                        style="width: 1px; height: 80px; background: linear-gradient(to bottom, transparent, #ddd, transparent);">
                    </div>

                    <!-- Statistique 4: Taux de réussite global -->
                    <div style="flex: 1; min-width: 180px; padding: 20px;">
                        <i class="fas fa-trophy"
                            style="font-size: 2.5rem; color: var(--color-accent); margin-bottom: 15px;"></i>
                        <h3
                            style="font-size: 2.5rem; font-weight: 800; color: var(--color-primary); margin: 0; line-height: 1.2;">
                            <span class="stat-number" data-target="89" data-suffix="%">0</span>
                        </h3>
                        <p style="color: #555; margin: 10px 0 0 0; font-weight: 500;">Taux de réussite global</p>
                    </div>
                </div>
            </div>

            <style>
                /* Animation d'apparition */
                @keyframes statsAppear {
                    from {
                        opacity: 0;
                        transform: translateY(30px);
                    }

                    to {
                        opacity: 1;
                        transform: translateY(0);
                    }
                }

                .container>div>div {
                    animation: statsAppear 0.5s ease forwards;
                    opacity: 0;
                }

                .container>div>div:nth-child(1) {
                    animation-delay: 0.1s;
                }

                .container>div>div:nth-child(2) {
                    animation-delay: 0.2s;
                }

                .container>div>div:nth-child(3) {
                    animation-delay: 0.3s;
                }

                .container>div>div:nth-child(4) {
                    animation-delay: 0.4s;
                }

                .container>div>div:nth-child(5) {
                    animation-delay: 0.5s;
                }

                .container>div>div:nth-child(6) {
                    animation-delay: 0.6s;
                }

                .container>div>div:nth-child(7) {
                    animation-delay: 0.7s;
                }

                @media (max-width: 768px) {
                    .container>div {
                        flex-direction: column;
                    }

                    .container>div>div {
                        width: 100%;
                        border-bottom: 1px solid #eee;
                    }

                    .container>div>div:last-child {
                        border-bottom: none;
                    }
                }
            </style>
        </section>

        <!-- Script pour le compteur animé -->
        <script>
            (function () {
                // Vérifier si l'élément est visible dans la viewport
                function isElementInViewport(el) {
                    const rect = el.getBoundingClientRect();
                    return (
                        rect.top >= 0 &&
                        rect.left >= 0 &&
                        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
                        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
                    );
                }

                // Fonction pour formater un nombre avec séparateur
                function formatNumber(num, separator) {
                    if (separator === ' ') {
                        return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
                    }
                    return num.toString();
                }

                // Fonction d'animation du compteur
                function animateCounter(element, target, duration, suffix, separator) {
                    let start = 0;
                    const increment = target / (duration / 16); // 60fps environ
                    let current = start;

                    const updateCounter = () => {
                        current += increment;
                        if (current >= target) {
                            element.textContent = formatNumber(target, separator) + (suffix || '');
                            return;
                        }
                        element.textContent = Math.floor(current) + (suffix || '');
                        requestAnimationFrame(updateCounter);
                    };

                    requestAnimationFrame(updateCounter);
                }

                // Démarrer les compteurs
                function startCounters() {
                    const counters = document.querySelectorAll('.stat-number');
                    counters.forEach(counter => {
                        // Vérifier si le compteur est déjà animé
                        if (counter.getAttribute('data-animated') === 'true') return;

                        if (isElementInViewport(counter)) {
                            counter.setAttribute('data-animated', 'true');
                            const target = parseInt(counter.getAttribute('data-target'), 10);
                            const suffix = counter.getAttribute('data-suffix') || '';
                            const separator = counter.getAttribute('data-separator') || '';
                            animateCounter(counter, target, 2000, suffix, separator);
                        }
                    });
                }

                // Écouter le scroll et le chargement
                window.addEventListener('scroll', startCounters);
                window.addEventListener('load', startCounters);

                // Démarrer immédiatement si visible
                setTimeout(startCounters, 100);
            })();
        </script>


    </main>

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

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>