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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES-ESSIG - École Supérieure d'Excellence</title>

    <!-- 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;
        }

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

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

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

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

        @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>
        <!-- =========================
             🎯 SECTION 1: HERO SECTION
        ========================== -->
        <section
            style="position: relative; background: linear-gradient(135deg, #f5f7fa 0%, #e8edf5 100%); padding: 80px 0; overflow: hidden;">
            <!-- Background decorative elements -->
            <div
                style="position: absolute; top: 0; right: 0; width: 50%; height: 100%; background: linear-gradient(135deg, rgba(32,83,151,0.05) 0%, rgba(32,83,151,0.1) 100%); clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);">
            </div>
            <div
                style="position: absolute; bottom: -50px; left: -50px; width: 200px; height: 200px; background: rgba(32,83,151,0.05); border-radius: 50%;">
            </div>
            <div
                style="position: absolute; top: 100px; right: 100px; width: 150px; height: 150px; background: rgba(233,7,7,0.03); border-radius: 50%;">
            </div>

            <div class="container" style="position: relative; z-index: 2;">
                <div class="row align-items-center">
                    <div class="col-lg-7 mb-5 mb-lg-0">
                        <!-- Badge -->
                        <!-- <div class="animate-slideInLeft" style="display: inline-block; background: linear-gradient(135deg, var(--color-primary), var(--color-light-blue)); color: white; padding: 8px 20px; border-radius: 50px; font-size: 0.85rem; font-weight: 600; margin-bottom: 25px; box-shadow: 0 4px 15px rgba(32,83,151,0.2);">
                            <i class="fas fa-graduation-cap" style="margin-right: 8px;"></i> Excellence Académique
                        </div>
                         -->
                        <!-- Title -->
                        <h1 class="animate-fadeInUp"
                            style="font-size: 2.5rem; font-weight: 800; margin-bottom: 20px; line-height: 1.2;">
                            BIENVENUE À <br>
                            <!-- <span style="color: var(--color-primary);">L'Institut Polytechnique</span><br> -->
                            <span style="color: var(--color-accent);">ES-ESSIG</span>
                        </h1>

                        <!-- Subtitle / Slogan -->
                        <div class="animate-fadeInUp delay-1" style="margin-bottom: 25px;">
                            <p
                                style="font-size: 1.3rem; font-weight: 600; color: var(--color-dark); margin-bottom: 10px;">
                                <i class="fas fa-fire" style="color: var(--color-accent); margin-right: 10px;"></i>
                                ES-ESSIG l'école des battants!
                            </p>
                            <p style="font-size: 1.1rem; color: #555; font-style: italic;">
                                "Un étudiant une micro-entreprise"
                            </p>
                        </div>

                        <!-- Description -->
                        <p class="animate-fadeInUp delay-2"
                            style="font-size: 1rem; color: #666; line-height: 1.7; margin-bottom: 30px;">
                            L'Institut Polytechnique ES-ESSIG forme les leaders et entrepreneurs de demain.
                            Avec une approche pédagogique unique axée sur l'innovation, l'excellence et l'esprit
                            d'entreprise,
                            nous préparons nos étudiants à relever les défis du monde professionnel.
                        </p>

                        <!-- CTA Buttons -->
                        <!-- <div class="animate-fadeInUp delay-3" style="display: flex; gap: 15px; flex-wrap: wrap;">
                            <a href="#" style="display: inline-block; background: linear-gradient(135deg, var(--color-primary), var(--color-light-blue)); color: white; padding: 14px 35px; border-radius: 50px; text-decoration: none; font-weight: 600; transition: all 0.3s ease; box-shadow: 0 5px 20px rgba(32,83,151,0.3);" 
                               onmouseover="this.style.transform='translateY(-3px)'; this.style.boxShadow='0 8px 25px rgba(32,83,151,0.4)'" 
                               onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 5px 20px rgba(32,83,151,0.3)'">
                                <i class="fas fa-arrow-right" style="margin-right: 8px;"></i> Nous rejoindre
                            </a>
                            <a href="#" style="display: inline-block; background: transparent; color: var(--color-primary); padding: 14px 35px; border-radius: 50px; text-decoration: none; font-weight: 600; border: 2px solid var(--color-primary); transition: all 0.3s ease;" 
                               onmouseover="this.style.background='var(--color-primary)'; this.style.color='white'" 
                               onmouseout="this.style.background='transparent'; this.style.color='var(--color-primary)'">
                                <i class="fas fa-play-circle" style="margin-right: 8px;"></i> Découvrir nos formations
                            </a>
                        </div> -->

                        <!-- Stats -->
                        <div class="animate-fadeInUp delay-3"
                            style="display: flex; gap: 40px; margin-top: 50px; flex-wrap: wrap;">
                            <div>
                                <h3
                                    style="font-size: 2rem; font-weight: 800; color: var(--color-primary); margin-bottom: 5px;">
                                    5000+</h3>
                                <p style="color: #666; margin: 0; font-size: 0.9rem;">Étudiants formés</p>
                            </div>
                            <div>
                                <h3
                                    style="font-size: 2rem; font-weight: 800; color: var(--color-primary); margin-bottom: 5px;">
                                    50+</h3>
                                <p style="color: #666; margin: 0; font-size: 0.9rem;">Programmes</p>
                            </div>
                            <div>
                                <h3
                                    style="font-size: 2rem; font-weight: 800; color: var(--color-primary); margin-bottom: 5px;">
                                    95%</h3>
                                <p style="color: #666; margin: 0; font-size: 0.9rem;">Insertion professionnelle</p>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-5">
                        <div class="animate-slideInRight" style="position: relative;">
                            <!-- Main image -->
                            <div
                                style="background: linear-gradient(135deg, var(--color-primary), var(--color-light-blue)); border-radius: 30px; padding: 15px; box-shadow: 0 20px 40px rgba(0,0,0,0.15);">
                                <img src="https://images.unsplash.com/photo-1523050854058-8df90110c9f1?w=600&h=500&fit=crop"
                                    alt="Étudiants ES-ESSIG"
                                    style="width: 100%; height: auto; border-radius: 20px; object-fit: cover;">
                            </div>

                            <!-- Floating card 1 -->
                            <div
                                style="position: absolute; bottom: -20px; left: -30px; background: white; border-radius: 15px; padding: 15px 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); display: flex; align-items: center; gap: 12px; animation: fadeInUp 1s ease;">
                                <div
                                    style="width: 45px; height: 45px; background: linear-gradient(135deg, var(--color-accent), #ff4444); border-radius: 12px; display: flex; align-items: center; justify-content: center;">
                                    <i class="fas fa-rocket" style="color: white; font-size: 1.3rem;"></i>
                                </div>
                                <div>
                                    <p style="margin: 0; font-weight: 700; font-size: 0.9rem;">Micro-entreprise</p>
                                    <p style="margin: 0; font-size: 0.8rem; color: #666;">100% des étudiants</p>
                                </div>
                            </div>

                            <!-- Floating card 2 -->
                            <div
                                style="position: absolute; top: -20px; right: -20px; background: white; border-radius: 15px; padding: 12px 18px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); animation: fadeInUp 1s ease 0.3s both;">
                                <div style="display: flex; align-items: center; gap: 8px;">
                                    <i class="fas fa-star" style="color: gold;"></i>
                                    <i class="fas fa-star" style="color: gold;"></i>
                                    <i class="fas fa-star" style="color: gold;"></i>
                                    <i class="fas fa-star" style="color: gold;"></i>
                                    <i class="fas fa-star" style="color: gold;"></i>
                                </div>
                                <p style="margin: 5px 0 0 0; font-size: 0.8rem; font-weight: 600;">Top école 2025</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- =========================
             🎯 SECTION 2: NOS VALEURS (À venir)
-->

        <section
            style="padding: 100px 0; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); position: relative; overflow: hidden;">
            <!-- Éléments décoratifs de fond -->
            <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 0;">
                <div
                    style="position: absolute; top: -100px; right: -100px; width: 300px; height: 300px; 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; bottom: -100px; left: -100px; width: 250px; height: 250px; background: radial-gradient(circle, rgba(233,7,7,0.03) 0%, rgba(233,7,7,0) 70%); border-radius: 50%;">
                </div>
                <div
                    style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 500px; height: 500px; background: radial-gradient(circle, rgba(74,144,226,0.02) 0%, rgba(74,144,226,0) 70%); border-radius: 50%;">
                </div>
            </div>

            <div class="container" style="position: relative; z-index: 2;">
                <!-- En-tête de section -->
                <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; letter-spacing: 1px;">
                        <i class="fas fa-chalkboard-user" style="margin-right: 8px;"></i> Mot du Directeur
                    </span>
                    <h2 style="font-size: 2.5rem; font-weight: 800; color: var(--color-dark); margin-bottom: 15px;">
                        Une vision, une mission, <span style="color: var(--color-primary);">une excellence</span>
                    </h2>
                    <div
                        style="width: 80px; height: 4px; background: linear-gradient(90deg, var(--color-accent), var(--color-primary)); margin: 0 auto; border-radius: 2px;">
                    </div>
                </div>

                <div class="row align-items-center g-5">
                    <!-- Colonne Gauche: Photo du Directeur -->
                    <div class="col-lg-5">
                        <div style="position: relative;" class="animate-slideInLeft">
                            <!-- Cadre photo principal -->
                            <div
                                style="background: linear-gradient(135deg, var(--color-primary), var(--color-light-blue)); border-radius: 30px; padding: 12px; box-shadow: 0 25px 45px rgba(0,0,0,0.15);">
                                <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?w=500&h=600&fit=crop"
                                    alt="Directeur ES-ESSIG"
                                    style="width: 100%; height: auto; border-radius: 22px; object-fit: cover;">
                            </div>

                            <!-- Badge flottant -->
                            <div
                                style="position: absolute; bottom: 30px; right: -20px; background: var(--color-accent); color: white; padding: 12px 20px; border-radius: 15px; box-shadow: 0 10px 25px rgba(233,7,7,0.3); text-align: center; backdrop-filter: blur(10px);">
                                <i class="fas fa-quote-right" style="font-size: 1.5rem; opacity: 0.5;"></i>
                                <p style="margin: 5px 0 0 0; font-weight: 700; font-size: 0.85rem;">+20 ans d'excellence
                                </p>
                            </div>

                            <!-- Signature décorative -->
                            <div
                                style="position: absolute; top: -20px; left: -20px; width: 80px; height: 80px; background: rgba(32,83,151,0.1); border-radius: 50%; z-index: -1;">
                            </div>
                            <div
                                style="position: absolute; bottom: -20px; left: 30px; width: 60px; height: 60px; background: rgba(233,7,7,0.1); border-radius: 50%; z-index: -1;">
                            </div>
                        </div>
                    </div>

                    <!-- Colonne Droite: Message du Directeur -->
                    <div class="col-lg-7">
                        <div style="padding: 0 10px;" class="animate-slideInRight">
                            <!-- Citation d'ouverture -->
                            <div style="margin-bottom: 25px;">
                                <i class="fas fa-quote-left"
                                    style="font-size: 2.5rem; color: var(--color-primary); opacity: 0.3;"></i>
                            </div>

                            <!-- Texte du message -->
                            <p style="font-size: 1.05rem; line-height: 1.8; color: #444; margin-bottom: 20px;">
                                <strong style="color: var(--color-primary);">Chers futurs étudiants, chers
                                    parents,</strong>
                            </p>

                            <p style="font-size: 1rem; line-height: 1.8; color: #555; margin-bottom: 20px;">
                                Bienvenue à <strong>l'Institut Polytechnique ES-ESSIG</strong>, une institution qui
                                incarne l'excellence, l'innovation et l'entrepreneuriat.
                                Notre conviction est simple mais puissante : <strong>"Un étudiant, une
                                    micro-entreprise"</strong>.
                                Nous ne formons pas seulement des diplômés, nous formons des battants prêts à conquérir
                                le monde professionnel.
                            </p>

                            <p style="font-size: 1rem; line-height: 1.8; color: #555; margin-bottom: 25px;">
                                Chez ES-ESSIG, chaque étudiant est accompagné pour développer son propre projet
                                entrepreneurial.
                                Notre pédagogie unique allie théorie de pointe et pratique terrain, avec des mentors
                                expérimentés
                                et un réseau de partenaires prestigieux. Ensemble, nous bâtissons l'Afrique de demain.
                            </p>

                            <!-- Mission de l'école -->
                            <div
                                style="background: linear-gradient(135deg, rgba(32,83,151,0.05), rgba(74,144,226,0.05)); border-radius: 20px; padding: 25px; margin: 25px 0;">
                                <div style="display: flex; gap: 15px; align-items: flex-start; flex-wrap: wrap;">
                                    <div
                                        style="width: 50px; height: 50px; background: linear-gradient(135deg, var(--color-primary), var(--color-light-blue)); border-radius: 15px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                                        <i class="fas fa-bullseye" style="color: white; font-size: 1.3rem;"></i>
                                    </div>
                                    <div>
                                        <h4
                                            style="font-size: 1.2rem; font-weight: 700; color: var(--color-primary); margin-bottom: 10px;">
                                            Notre Mission</h4>
                                        <p style="font-size: 0.95rem; line-height: 1.6; color: #555; margin: 0;">
                                            Former des professionnels compétents, innovants et entrepreneurs, capables
                                            de créer de la valeur ajoutée
                                            et de contribuer au développement économique et social de leur pays.
                                        </p>
                                    </div>
                                </div>
                            </div>

                            <!-- Signature et fonction -->
                            <div style="margin-top: 30px; padding-top: 20px; border-top: 2px solid rgba(0,0,0,0.05);">
                                <div style="display: flex; align-items: center; gap: 20px; flex-wrap: wrap;">
                                    <div>
                                        <p
                                            style="margin: 0; font-weight: 700; color: var(--color-dark); font-size: 1.1rem;">
                                            Pr. Mamadou Diallo</p>
                                        <p style="margin: 5px 0 0 0; color: var(--color-primary); font-weight: 500;">
                                            Directeur Général</p>
                                        <p style="margin: 5px 0 0 0; font-size: 0.8rem; color: #888;">Institut
                                            Polytechnique ES-ESSIG</p>
                                    </div>
                                    <!-- Signature image (optionnelle) -->
                                    <div style="margin-left: auto;">
                                        <svg width="120" height="50" viewBox="0 0 200 60" style="opacity: 0.6;">
                                            <path
                                                d="M10,40 Q30,20 50,35 Q70,50 90,30 Q110,10 130,25 Q150,40 170,20 L180,15"
                                                stroke="var(--color-primary)" stroke-width="1.5" fill="none"
                                                stroke-linecap="round" />
                                            <path d="M170,20 Q180,10 190,15" stroke="var(--color-primary)"
                                                stroke-width="1.5" fill="none" stroke-linecap="round" />
                                            <text x="10" y="55" font-size="10" fill="#999" font-style="italic">M.
                                                Diallo</text>
                                        </svg>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Styles spécifiques à cette section -->
            <style>
                @keyframes slideInLeft {
                    from {
                        opacity: 0;
                        transform: translateX(-50px);
                    }

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

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

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

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

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

                /* Effet de survol sur la photo */
                .col-lg-5 img {
                    transition: transform 0.5s ease;
                }

                .col-lg-5:hover img {
                    transform: scale(1.02);
                }
            </style>
        </section>


        <!-- =========================
             🎯 SECTION 3: FORMATIONS (À venir)
        ========================== -->

        <!-- =========================
     🎯 SECTION 3: NOS NIVEAUX / PROGRAMMES
========================== -->
      <section style="padding: 100px 0; background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); position: relative; overflow: hidden;">
    <!-- Éléments décoratifs de fond -->
    <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 de section -->
        <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; letter-spacing: 1px;">
                <i class="fas fa-graduation-cap" style="margin-right: 8px;"></i> Nos Formations
            </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; font-size: 1rem;">
                Découvrez nos formations adaptées à chaque profil et ambition
            </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>

        <!-- BLOC 1: LICENCE -->
        <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.05); transition: all 0.3s ease;">
            <div style="display: flex; flex-wrap: wrap;">
                <!-- Partie gauche : description -->
                <div style="flex: 1; padding: 40px; min-width: 280px;">
                    <div style="width: 60px; height: 60px; background: linear-gradient(135deg, rgba(32,83,151,0.1), rgba(74,144,226,0.1)); border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px;">
                        <i class="fas fa-user-graduate" style="font-size: 1.8rem; 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</p>
                    <p style="color: #555; line-height: 1.6; margin-bottom: 25px;">
                        Ce programme de formation de 3 ans comporte 180 crédits, répartis en 30 crédits par semestre.
                    </p>
                    <a href="#" 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; border: none; cursor: pointer;">
                        EN SAVOIR PLUS <i class="fas fa-arrow-right" style="transition: transform 0.3s ease;"></i>
                    </a>
                </div>
                
                <!-- Partie droite : liste des formations -->
                <div style="flex: 1.5; background: #f8f9fa; padding: 40px; border-left: 1px solid rgba(0,0,0,0.05);">
                    <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;">
                        <div style="display: flex; align-items: center; gap: 10px;"><i class="fas fa-check-circle" style="color: var(--color-accent); font-size: 1rem;"></i><span style="color: #444; font-size: 0.9rem;">Intelligence Artificielle et Big Data</span></div>
                        <div style="display: flex; align-items: center; gap: 10px;"><i class="fas fa-check-circle" style="color: var(--color-accent); font-size: 1rem;"></i><span style="color: #444; font-size: 0.9rem;">Comptabilité Finance</span></div>
                        <div style="display: flex; align-items: center; gap: 10px;"><i class="fas fa-check-circle" style="color: var(--color-accent); font-size: 1rem;"></i><span style="color: #444; font-size: 0.9rem;">Systèmes et Réseaux Informatiques</span></div>
                        <div style="display: flex; align-items: center; gap: 10px;"><i class="fas fa-check-circle" style="color: var(--color-accent); font-size: 1rem;"></i><span style="color: #444; font-size: 0.9rem;">Gestion Commerciale</span></div>
                        <div style="display: flex; align-items: center; gap: 10px;"><i class="fas fa-check-circle" style="color: var(--color-accent); font-size: 1rem;"></i><span style="color: #444; font-size: 0.9rem;">Logistique et Transport</span></div>
                        <div style="display: flex; align-items: center; gap: 10px;"><i class="fas fa-check-circle" style="color: var(--color-accent); font-size: 1rem;"></i><span style="color: #444; font-size: 0.9rem;">Communication des Organisations</span></div>
                        <div style="display: flex; align-items: center; gap: 10px;"><i class="fas fa-check-circle" style="color: var(--color-accent); font-size: 1rem;"></i><span style="color: #444; font-size: 0.9rem;">Génie Logiciel</span></div>
                        <div style="display: flex; align-items: center; gap: 10px;"><i class="fas fa-check-circle" style="color: var(--color-accent); font-size: 1rem;"></i><span style="color: #444; font-size: 0.9rem;">Publicité et Arts Graphiques</span></div>
                        <div style="display: flex; align-items: center; gap: 10px;"><i class="fas fa-check-circle" style="color: var(--color-accent); font-size: 1rem;"></i><span style="color: #444; font-size: 0.9rem;">Génie Civil</span></div>
                        <div style="display: flex; align-items: center; gap: 10px;"><i class="fas fa-check-circle" style="color: var(--color-accent); font-size: 1rem;"></i><span style="color: #444; font-size: 0.9rem;">Assistant Administratif</span></div>
                        <div style="display: flex; align-items: center; gap: 10px;"><i class="fas fa-check-circle" style="color: var(--color-accent); font-size: 1rem;"></i><span style="color: #444; font-size: 0.9rem;">Génie Électrique</span></div>
                        <div style="display: flex; align-items: center; gap: 10px;"><i class="fas fa-check-circle" style="color: var(--color-accent); font-size: 1rem;"></i><span style="color: #444; font-size: 0.9rem;">Communication Digitale</span></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- BLOC 2: LICENCE - COURS DU SOIR -->
        <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.05); transition: all 0.3s ease;">
            <div style="display: flex; flex-wrap: wrap;">
                <div style="flex: 1; padding: 40px; min-width: 280px;">
                    <div style="width: 60px; height: 60px; background: linear-gradient(135deg, rgba(32,83,151,0.1), rgba(74,144,226,0.1)); border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px;">
                        <i class="fas fa-moon" style="font-size: 1.8rem; color: var(--color-primary);"></i>
                    </div>
                    <h3 style="font-size: 1.8rem; font-weight: 700; color: var(--color-dark); margin-bottom: 10px;">Licence - cours du soir</h3>
                    <p style="color: var(--color-accent); font-weight: 600; margin-bottom: 15px;">Durée : 3 ans</p>
                    <p style="color: #555; line-height: 1.6; margin-bottom: 25px;">
                        Travaillez le jour, étudiez le soir, obtenez votre Licence Professionnelle en toute flexibilité !
                    </p>
                    <a href="#" 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;">
                        EN SAVOIR PLUS <i class="fas fa-arrow-right" style="transition: transform 0.3s ease;"></i>
                    </a>
                </div>
                
                <div style="flex: 1.5; background: #f8f9fa; padding: 40px; border-left: 1px solid rgba(0,0,0,0.05);">
                    <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;">
                        <div style="display: flex; align-items: center; gap: 10px;"><i class="fas fa-check-circle" style="color: var(--color-accent); font-size: 1rem;"></i><span style="color: #444; font-size: 0.9rem;">Transport, Logistique et Prestation (L3)</span></div>
                        <div style="display: flex; align-items: center; gap: 10px;"><i class="fas fa-check-circle" style="color: var(--color-accent); font-size: 1rem;"></i><span style="color: #444; font-size: 0.9rem;">Comptabilité-Fiscalité (L1, L2, L3)</span></div>
                        <div style="display: flex; align-items: center; gap: 10px;"><i class="fas fa-check-circle" style="color: var(--color-accent); font-size: 1rem;"></i><span style="color: #444; font-size: 0.9rem;">Génie Logiciel (L3)</span></div>
                        <div style="display: flex; align-items: center; gap: 10px;"><i class="fas fa-check-circle" style="color: var(--color-accent); font-size: 1rem;"></i><span style="color: #444; font-size: 0.9rem;">Assistant Administratif (L3)</span></div>
                        <div style="display: flex; align-items: center; gap: 10px;"><i class="fas fa-check-circle" style="color: var(--color-accent); font-size: 1rem;"></i><span style="color: #444; font-size: 0.9rem;">Systèmes et Réseaux Informatiques (L3)</span></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- BLOC 3: MASTER -->
        <div class="formation-block" style="background: white; border-radius: 24px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.05); transition: all 0.3s ease;">
            <div style="display: flex; flex-wrap: wrap;">
                <div style="flex: 1; padding: 40px; min-width: 280px;">
                    <div style="width: 60px; height: 60px; background: linear-gradient(135deg, rgba(32,83,151,0.1), rgba(74,144,226,0.1)); border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px;">
                        <i class="fas fa-microscope" style="font-size: 1.8rem; 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</p>
                    <p style="color: #555; line-height: 1.6; margin-bottom: 25px;">
                        Ce programme de formation de 2 ans est subdivisé en 4 semestres.
                    </p>
                    <a href="#" 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;">
                        EN SAVOIR PLUS <i class="fas fa-arrow-right" style="transition: transform 0.3s ease;"></i>
                    </a>
                </div>
                
                <div style="flex: 1.5; background: #f8f9fa; padding: 40px; border-left: 1px solid rgba(0,0,0,0.05);">
                    <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;">
                        <div style="display: flex; align-items: center; gap: 10px;"><i class="fas fa-check-circle" style="color: var(--color-accent); font-size: 1rem;"></i><span style="color: #444; font-size: 0.9rem;">Génie Logiciel</span></div>
                        <div style="display: flex; align-items: center; gap: 10px;"><i class="fas fa-check-circle" style="color: var(--color-accent); font-size: 1rem;"></i><span style="color: #444; font-size: 0.9rem;">Systèmes et Réseaux Informatiques</span></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Bouton Voir toutes les formations -->
        <div style="text-align: center; margin-top: 50px;">
            <a href="#" style="display: inline-block; background: linear-gradient(135deg, var(--color-primary), var(--color-light-blue)); color: white; padding: 14px 40px; border-radius: 50px; text-decoration: none; font-weight: 600; transition: all 0.3s ease; box-shadow: 0 5px 20px rgba(32,83,151,0.3);"
               onmouseover="this.style.transform='translateY(-3px)'; this.style.boxShadow='0 8px 30px rgba(32,83,151,0.4)'"
               onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 5px 20px rgba(32,83,151,0.3)'">
                <i class="fas fa-eye" style="margin-right: 8px;"></i> Voir toutes nos formations
            </a>
        </div>
    </div>

    <style>
        /* Effet hover sur les blocs */
        .formation-block {
            transition: all 0.3s ease;
        }
        
        .formation-block:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }
        
        /* Effet hover sur le bouton rouge */
        .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);
        }
        
        /* Animation d'apparition */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .formation-block {
            animation: fadeInUp 0.6s 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; }
        
        /* Responsive */
        @media (max-width: 768px) {
            .formation-block > div {
                flex-direction: column;
            }
            
            .formation-block > div > div:last-child {
                border-left: none;
                border-top: 1px solid rgba(0,0,0,0.05);
            }
            
            .formation-block > div > div:last-child {
                grid-template-columns: 1fr;
            }
        }
    </style>
</section>
        <!-- =========================
     🎯 SECTION 4: POURQUOI NOUS CHOISIR (VALEURS)
========================== -->

        <!-- Version alternative : 3 valeurs (design plus large) -->
        <!-- =========================
     🎯 SECTION 4: POURQUOI NOUS CHOISIR (VALEURS) AVEC BACKGROUND FIXE
========================== -->
        <section
            style="padding: 100px 0; background-image: linear-gradient(135deg, rgba(0,0,0,0.75), rgba(0,0,0,0.85)), url('https://images.unsplash.com/photo-1541339907198-e08756dedf3f?w=1600&h=900&fit=crop'); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; overflow: hidden;">

            <div class="container" style="position: relative; z-index: 2;">
                <!-- En-tête de section -->
                <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-heart" style="margin-right: 8px;"></i> Pourquoi ES-ESSIG ?
                    </span>
                    <h2 style="font-size: 2.5rem; font-weight: 800; color: white; margin-bottom: 15px;">
                        Pourquoi <span style="color: var(--color-accent);">nous choisir</span> ?
                    </h2>
                    <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>

                <div class="row justify-content-center g-4">
                    <!-- Valeur 1: Enseignement Bilingue -->
                    <div class="col-lg-4 col-md-6">
                        <div class="value-card"
                            style="background: rgba(255,255,255,0.95); backdrop-filter: blur(5px); border-radius: 20px; padding: 40px 30px; text-align: center; transition: all 0.3s ease; box-shadow: 0 10px 30px rgba(0,0,0,0.2); height: 100%; border: 1px solid rgba(255,255,255,0.2);">
                            <div
                                style="width: 90px; height: 90px; 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 25px; box-shadow: 0 5px 15px rgba(32,83,151,0.3);">
                                <i class="fas fa-language" style="font-size: 2.5rem; color: white;"></i>
                            </div>
                            <h3
                                style="font-size: 1.5rem; font-weight: 700; margin-bottom: 15px; color: var(--color-dark);">
                                Enseignement Bilingue</h3>
                            <p style="color: #555; line-height: 1.7;">Cours en français et anglais avec certification
                                internationale pour une meilleure employabilité à l'étranger.</p>
                        </div>
                    </div>

                    <!-- Valeur 2: Activités Sportives -->
                    <div class="col-lg-4 col-md-6">
                        <div class="value-card"
                            style="background: rgba(255,255,255,0.95); backdrop-filter: blur(5px); border-radius: 20px; padding: 40px 30px; text-align: center; transition: all 0.3s ease; box-shadow: 0 10px 30px rgba(0,0,0,0.2); height: 100%; border: 1px solid rgba(255,255,255,0.2);">
                            <div
                                style="width: 90px; height: 90px; 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 25px; box-shadow: 0 5px 15px rgba(32,83,151,0.3);">
                                <i class="fas fa-futbol" style="font-size: 2.5rem; color: white;"></i>
                            </div>
                            <h3
                                style="font-size: 1.5rem; font-weight: 700; margin-bottom: 15px; color: var(--color-dark);">
                                Activités Sportives</h3>
                            <p style="color: #555; line-height: 1.7;">Complexe sportif moderne, équipes compétitives et
                                activités extrascolaires pour un équilibre corps-esprit.</p>
                        </div>
                    </div>

                    <!-- Valeur 3: Outils Numériques -->
                    <div class="col-lg-4 col-md-6">
                        <div class="value-card"
                            style="background: rgba(255,255,255,0.95); backdrop-filter: blur(5px); border-radius: 20px; padding: 40px 30px; text-align: center; transition: all 0.3s ease; box-shadow: 0 10px 30px rgba(0,0,0,0.2); height: 100%; border: 1px solid rgba(255,255,255,0.2);">
                            <div
                                style="width: 90px; height: 90px; 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 25px; box-shadow: 0 5px 15px rgba(32,83,151,0.3);">
                                <i class="fas fa-laptop" style="font-size: 2.5rem; color: white;"></i>
                            </div>
                            <h3
                                style="font-size: 1.5rem; font-weight: 700; margin-bottom: 15px; color: var(--color-dark);">
                                Outils Numériques</h3>
                            <p style="color: #555; line-height: 1.7;">Plateforme E-learning, laboratoires informatiques
                                et bibliothèque numérique accessible 24h/24.</p>
                        </div>
                    </div>
                </div>

                <!-- Bannière d'appel à l'action -->
                <div style="margin-top: 60px; text-align: center;">
                    <div
                        style="background: rgba(255,255,255,0.15); backdrop-filter: blur(10px); border-radius: 30px; padding: 35px; border: 1px solid rgba(255,255,255,0.2);">
                        <div class="row align-items-center">
                            <div class="col-md-8 text-md-start text-center">
                                <h4 style="font-weight: 700; color: white; margin-bottom: 5px;">
                                    <i class="fas fa-graduation-cap"
                                        style="color: var(--color-accent); margin-right: 10px;"></i>
                                    Une école qui vous accompagne vers la réussite
                                </h4>
                                <p style="color: rgba(255,255,255,0.9); margin: 0;">Rejoignez une communauté dynamique
                                    et bienveillante</p>
                            </div>
                            <div class="col-md-4 text-md-end text-center mt-3 mt-md-0">
                                <a href="#"
                                    style="display: inline-block; background: var(--color-accent); color: white; padding: 12px 30px; border-radius: 50px; text-decoration: none; font-weight: 600; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(233,7,7,0.3);"
                                    onmouseover="this.style.background='var(--color-primary)'; this.style.transform='translateY(-2px)'; this.style.boxShadow='0 8px 20px rgba(233,7,7,0.4)'"
                                    onmouseout="this.style.background='var(--color-accent)'; this.style.transform='translateY(0)'; this.style.boxShadow='0 5px 15px rgba(233,7,7,0.3)'">
                                    <i class="fas fa-calendar-alt" style="margin-right: 8px;"></i> Visitez notre campus
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Styles spécifiques à cette section -->
            <style>
                /* Animation des cartes au survol */
                .value-card {
                    transition: all 0.3s ease;
                    cursor: pointer;
                }

                .value-card:hover {
                    transform: translateY(-10px);
                    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
                    background: rgba(255, 255, 255, 1) !important;
                }

                .value-card:hover div[style*="background: linear-gradient"] {
                    transform: scale(1.05);
                    transition: transform 0.3s ease;
                }

                /* Animation d'apparition des cartes */
                @keyframes valueAppear {
                    from {
                        opacity: 0;
                        transform: translateY(30px);
                    }

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

                .value-card {
                    animation: valueAppear 0.6s ease forwards;
                    opacity: 0;
                }

                .col-lg-4:nth-child(1) .value-card {
                    animation-delay: 0.1s;
                }

                .col-lg-4:nth-child(2) .value-card {
                    animation-delay: 0.2s;
                }

                .col-lg-4:nth-child(3) .value-card {
                    animation-delay: 0.3s;
                }

                @media (max-width: 768px) {
                    .value-card {
                        margin-bottom: 20px;
                    }
                }

                /* Effet parallax pour mobile (désactiver pour meilleure performance) */
                @media (max-width: 768px) {
                    section[style*="background-attachment: fixed"] {
                        background-attachment: scroll !important;
                    }
                }
            </style>
        </section>




        <!-- =========================
     🎯 SECTION 5: ACTUALITÉS ET ÉVÉNEMENTS
========================== -->
        <section
            style="padding: 100px 0; background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); position: relative; overflow: hidden;">
            <!-- Éléments décoratifs de fond -->
            <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 0;">
                <div
                    style="position: absolute; top: 100px; right: -50px; width: 200px; height: 200px; 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; bottom: 50px; left: -80px; 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;">
                <!-- En-tête de section -->
                <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; letter-spacing: 1px;">
                        <i class="fas fa-newspaper" style="margin-right: 8px;"></i> Actualités
                    </span>
                    <h2 style="font-size: 2.5rem; font-weight: 800; color: var(--color-dark); margin-bottom: 15px;">
                        Actualités & <span style="color: var(--color-primary);">Événements</span>
                    </h2>
                    <p style="color: #666; max-width: 600px; margin: 0 auto; font-size: 1rem;">
                        Restez connectés avec la vie dynamique de notre campus
                    </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>

                <div class="row g-4">
                    <!-- Carte 1: Événement à venir - Portes Ouvertes -->
                    <div class="col-lg-4 col-md-6">
                        <div class="news-card"
                            style="background: white; border-radius: 20px; overflow: hidden; transition: all 0.3s ease; box-shadow: 0 5px 20px rgba(0,0,0,0.05); height: 100%; position: relative;">
                            <!-- Badge date -->
                            <div style="position: absolute; top: 20px; left: 20px; z-index: 2;">
                                <div
                                    style="background: var(--color-accent); color: white; text-align: center; padding: 8px 15px; border-radius: 12px; box-shadow: 0 5px 15px rgba(233,7,7,0.3);">
                                    <span style="display: block; font-size: 1.2rem; font-weight: 800;">15</span>
                                    <span style="display: block; font-size: 0.7rem; font-weight: 500;">MAI</span>
                                </div>
                            </div>

                            <!-- Image -->
                            <div style="height: 200px; overflow: hidden;">
                                <img src="https://images.unsplash.com/photo-1524178232363-1fb2b075b655?w=600&h=400&fit=crop"
                                    alt="Portes Ouvertes"
                                    style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;">
                            </div>

                            <!-- Contenu -->
                            <div style="padding: 25px;">
                                <div style="display: flex; gap: 15px; margin-bottom: 12px;">
                                    <span style="font-size: 0.8rem; color: var(--color-primary);">
                                        <i class="far fa-calendar-alt" style="margin-right: 5px;"></i> 15 Mai 2024
                                    </span>
                                    <span style="font-size: 0.8rem; color: var(--color-primary);">
                                        <i class="far fa-clock" style="margin-right: 5px;"></i> 9h - 17h
                                    </span>
                                </div>
                                <h3
                                    style="font-size: 1.3rem; font-weight: 700; margin-bottom: 12px; color: var(--color-dark);">
                                    Journées Portes Ouvertes</h3>
                                <p style="color: #666; line-height: 1.6; margin-bottom: 20px; font-size: 0.95rem;">
                                    Venez découvrir notre campus, rencontrer nos professeurs et étudiants, et explorez
                                    nos formations.
                                </p>
                                <div style="display: flex; justify-content: space-between; align-items: center;">
                                    <span
                                        style="background: #f0f0f0; padding: 5px 12px; border-radius: 20px; font-size: 0.7rem; color: var(--color-primary); font-weight: 500;">
                                        <i class="fas fa-map-marker-alt" style="margin-right: 5px;"></i> Campus
                                        Principal
                                    </span>
                                    <a href="#"
                                        style="color: var(--color-primary); text-decoration: none; font-weight: 600; font-size: 0.9rem; transition: all 0.3s ease;">
                                        S'inscrire <i class="fas fa-arrow-right"
                                            style="margin-left: 5px; transition: transform 0.3s ease;"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Carte 2: Article Blog - Nouvelle formation -->
                    <div class="col-lg-4 col-md-6">
                        <div class="news-card"
                            style="background: white; border-radius: 20px; overflow: hidden; transition: all 0.3s ease; box-shadow: 0 5px 20px rgba(0,0,0,0.05); height: 100%;">
                            <!-- Badge article -->
                            <div style="position: absolute; top: 20px; left: 20px; z-index: 2;">
                                <div
                                    style="background: var(--color-primary); color: white; text-align: center; padding: 8px 15px; border-radius: 12px; box-shadow: 0 5px 15px rgba(32,83,151,0.3);">
                                    <i class="fas fa-graduation-cap" style="font-size: 1.2rem;"></i>
                                </div>
                            </div>

                            <!-- Image -->
                            <div style="height: 200px; overflow: hidden;">
                                <img src="https://images.unsplash.com/photo-1524178232363-1fb2b075b655?w=600&h=400&fit=crop"
                                    alt="Nouvelle formation"
                                    style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;">
                            </div>

                            <!-- Contenu -->
                            <div style="padding: 25px;">
                                <div style="display: flex; gap: 15px; margin-bottom: 12px;">
                                    <span style="font-size: 0.8rem; color: var(--color-primary);">
                                        <i class="far fa-calendar-alt" style="margin-right: 5px;"></i> 10 Avril 2024
                                    </span>
                                    <span style="font-size: 0.8rem; color: var(--color-primary);">
                                        <i class="far fa-user" style="margin-right: 5px;"></i> Administration
                                    </span>
                                </div>
                                <h3
                                    style="font-size: 1.3rem; font-weight: 700; margin-bottom: 12px; color: var(--color-dark);">
                                    Nouveau programme : Bachelor en Intelligence Artificielle</h3>
                                <p style="color: #666; line-height: 1.6; margin-bottom: 20px; font-size: 0.95rem;">
                                    ES-ESSIG lance une nouvelle formation innovante pour former les experts en IA de
                                    demain.
                                </p>
                                <div style="display: flex; justify-content: space-between; align-items: center;">
                                    <span
                                        style="background: #f0f0f0; padding: 5px 12px; border-radius: 20px; font-size: 0.7rem; color: var(--color-primary); font-weight: 500;">
                                        <i class="fas fa-tag" style="margin-right: 5px;"></i> Innovation
                                    </span>
                                    <a href="#"
                                        style="color: var(--color-primary); text-decoration: none; font-weight: 600; font-size: 0.9rem; transition: all 0.3s ease;">
                                        Lire plus <i class="fas fa-arrow-right"
                                            style="margin-left: 5px; transition: transform 0.3s ease;"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Carte 3: Événement - Fête de l'école -->
                    <div class="col-lg-4 col-md-6">
                        <div class="news-card"
                            style="background: white; border-radius: 20px; overflow: hidden; transition: all 0.3s ease; box-shadow: 0 5px 20px rgba(0,0,0,0.05); height: 100%;">
                            <!-- Badge date -->
                            <div style="position: absolute; top: 20px; left: 20px; z-index: 2;">
                                <div
                                    style="background: linear-gradient(135deg, var(--color-primary), var(--color-light-blue)); color: white; text-align: center; padding: 8px 15px; border-radius: 12px; box-shadow: 0 5px 15px rgba(32,83,151,0.3);">
                                    <span style="display: block; font-size: 1.2rem; font-weight: 800;">25</span>
                                    <span style="display: block; font-size: 0.7rem; font-weight: 500;">JUIN</span>
                                </div>
                            </div>

                            <!-- Image -->
                            <div style="height: 200px; overflow: hidden;">
                                <img src="https://images.unsplash.com/photo-1523580494863-6f3031224c94?w=600&h=400&fit=crop"
                                    alt="Fête de l'école"
                                    style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;">
                            </div>

                            <!-- Contenu -->
                            <div style="padding: 25px;">
                                <div style="display: flex; gap: 15px; margin-bottom: 12px;">
                                    <span style="font-size: 0.8rem; color: var(--color-primary);">
                                        <i class="far fa-calendar-alt" style="margin-right: 5px;"></i> 25 Juin 2024
                                    </span>
                                    <span style="font-size: 0.8rem; color: var(--color-primary);">
                                        <i class="far fa-clock" style="margin-right: 5px;"></i> 18h - 23h
                                    </span>
                                </div>
                                <h3
                                    style="font-size: 1.3rem; font-weight: 700; margin-bottom: 12px; color: var(--color-dark);">
                                    Grande Fête de Fin d'Année</h3>
                                <p style="color: #666; line-height: 1.6; margin-bottom: 20px; font-size: 0.95rem;">
                                    Soirée mémorable avec animations, concerts et remise des prix aux meilleurs
                                    étudiants.
                                </p>
                                <div style="display: flex; justify-content: space-between; align-items: center;">
                                    <span
                                        style="background: #f0f0f0; padding: 5px 12px; border-radius: 20px; font-size: 0.7rem; color: var(--color-primary); font-weight: 500;">
                                        <i class="fas fa-music" style="margin-right: 5px;"></i> Célébration
                                    </span>
                                    <a href="#"
                                        style="color: var(--color-primary); text-decoration: none; font-weight: 600; font-size: 0.9rem; transition: all 0.3s ease;">
                                        Participer <i class="fas fa-arrow-right"
                                            style="margin-left: 5px; transition: transform 0.3s ease;"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Bouton Voir toutes les actualités -->
                <div style="text-align: center; margin-top: 50px;">
                    <a href="#"
                        style="display: inline-block; background: transparent; color: var(--color-primary); padding: 12px 35px; border-radius: 50px; text-decoration: none; font-weight: 600; border: 2px solid var(--color-primary); transition: all 0.3s ease;"
                        onmouseover="this.style.background='var(--color-primary)'; this.style.color='white'"
                        onmouseout="this.style.background='transparent'; this.style.color='var(--color-primary)'">
                        <i class="fas fa-eye" style="margin-right: 8px;"></i> Voir toutes les actualités
                    </a>
                </div>
            </div>

            <!-- Styles spécifiques à cette section -->
            <style>
                /* Animation des cartes au survol */
                .news-card {
                    transition: all 0.3s ease;
                    cursor: pointer;
                }

                .news-card:hover {
                    transform: translateY(-10px);
                    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
                }

                .news-card:hover img {
                    transform: scale(1.05);
                }

                .news-card:hover i.fa-arrow-right {
                    transform: translateX(5px);
                }

                /* Animation d'apparition des cartes */
                @keyframes newsAppear {
                    from {
                        opacity: 0;
                        transform: translateY(30px);
                    }

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

                .news-card {
                    animation: newsAppear 0.6s ease forwards;
                    opacity: 0;
                }

                .col-lg-4:nth-child(1) .news-card {
                    animation-delay: 0.1s;
                }

                .col-lg-4:nth-child(2) .news-card {
                    animation-delay: 0.2s;
                }

                .col-lg-4:nth-child(3) .news-card {
                    animation-delay: 0.3s;
                }

                @media (max-width: 768px) {
                    .news-card {
                        margin-bottom: 20px;
                    }
                }
            </style>
        </section>


        <!-- =========================
     🎯 SECTION 6: TÉMOIGNAGES (DESIGN INCLINÉ / TRIGONOMÉTRIQUE)
========================== -->
<section style="padding: 100px 0; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); position: relative; overflow: hidden;">
    <!-- Éléments décoratifs -->
    <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;">
        <div style="position: absolute; top: -100px; right: -100px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(74,144,226,0.1) 0%, rgba(74,144,226,0) 70%); border-radius: 50%;"></div>
        <div style="position: absolute; bottom: -100px; left: -100px; width: 350px; height: 350px; background: radial-gradient(circle, rgba(233,7,7,0.08) 0%, rgba(233,7,7,0) 70%); border-radius: 50%;"></div>
    </div>
    
    <div class="container" style="position: relative; z-index: 2;">
        <!-- En-tête de section -->
        <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; letter-spacing: 1px;">
                <i class="fas fa-quote-left" style="margin-right: 8px;"></i> Témoignages
            </span>
            <h2 style="font-size: 2.5rem; font-weight: 800; color: white; margin-bottom: 15px;">
                Ce qu'ils disent de <span style="color: var(--color-accent);">ES-ESSIG</span>
            </h2>
            <p style="color: rgba(255,255,255,0.7); max-width: 600px; margin: 0 auto; font-size: 1rem;">
                Découvrez les expériences de nos étudiants et parents
            </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>
        
        <div class="row g-4" style="margin-top: 20px;">
            <!-- Témoignage 1: Ancien élève - INCLINÉ VERS LA GAUCHE -->
            <div class="col-lg-4 col-md-6">
                <div class="testimonial-card skew-left" style="background: rgba(255,255,255,0.95); border-radius: 20px; padding: 35px 25px; transition: all 0.4s ease; box-shadow: 0 15px 35px rgba(0,0,0,0.2); height: 100%; position: relative; transform: rotate(-2deg);">
                    <!-- Guillemets décoratifs -->
                    <div style="position: absolute; top: 20px; right: 25px; font-size: 4rem; color: rgba(32,83,151,0.1); font-family: serif;">"</div>
                    
                    <!-- Étoiles -->
                    <div style="margin-bottom: 20px;">
                        <i class="fas fa-star" style="color: gold;"></i>
                        <i class="fas fa-star" style="color: gold;"></i>
                        <i class="fas fa-star" style="color: gold;"></i>
                        <i class="fas fa-star" style="color: gold;"></i>
                        <i class="fas fa-star" style="color: gold;"></i>
                    </div>
                    
                    <!-- Citation -->
                    <p style="font-size: 1rem; line-height: 1.7; color: #444; margin-bottom: 25px; font-style: italic; position: relative; z-index: 2;">
                        "Grâce à ES-ESSIG, j'ai pu lancer ma micro-entreprise avant même d'obtenir mon diplôme. La formation de qualité et l'accompagnement personnalisé m'ont donné toutes les clés pour réussir."
                    </p>
                    
                    <!-- Informations du témoin -->
                    <div style="display: flex; align-items: center; gap: 15px;">
                        <div style="width: 55px; height: 55px; background: linear-gradient(135deg, var(--color-primary), var(--color-light-blue)); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 1.3rem;">
                            AM
                        </div>
                        <div>
                            <h4 style="font-size: 1.1rem; font-weight: 700; margin: 0; color: var(--color-dark);">Abdoulaye Mbaye</h4>
                            <p style="font-size: 0.8rem; color: var(--color-primary); margin: 5px 0 0 0;">Ancien étudiant, Promo 2023</p>
                            <p style="font-size: 0.7rem; color: #888; margin: 2px 0 0 0;">Fondateur de TechStart</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Témoignage 2: Parent d'élève - INCLINÉ VERS LA DROITE -->
            <div class="col-lg-4 col-md-6">
                <div class="testimonial-card skew-right" style="background: rgba(255,255,255,0.95); border-radius: 20px; padding: 35px 25px; transition: all 0.4s ease; box-shadow: 0 15px 35px rgba(0,0,0,0.2); height: 100%; position: relative; transform: rotate(2deg);">
                    <div style="position: absolute; top: 20px; right: 25px; font-size: 4rem; color: rgba(32,83,151,0.1); font-family: serif;">"</div>
                    
                    <div style="margin-bottom: 20px;">
                        <i class="fas fa-star" style="color: gold;"></i>
                        <i class="fas fa-star" style="color: gold;"></i>
                        <i class="fas fa-star" style="color: gold;"></i>
                        <i class="fas fa-star" style="color: gold;"></i>
                        <i class="fas fa-star" style="color: gold;"></i>
                    </div>
                    
                    <p style="font-size: 1rem; line-height: 1.7; color: #444; margin-bottom: 25px; font-style: italic; position: relative; z-index: 2;">
                        "En tant que parent, la sécurité et la qualité de l'enseignement étaient mes priorités. ES-ESSIG a su rassurer toute la famille. Mon fils s'y épanouit pleinement."
                    </p>
                    
                    <div style="display: flex; align-items: center; gap: 15px;">
                        <div style="width: 55px; height: 55px; background: linear-gradient(135deg, var(--color-primary), var(--color-light-blue)); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 1.3rem;">
                            MD
                        </div>
                        <div>
                            <h4 style="font-size: 1.1rem; font-weight: 700; margin: 0; color: var(--color-dark);">Mme Diallo</h4>
                            <p style="font-size: 0.8rem; color: var(--color-primary); margin: 5px 0 0 0;">Parent d'élève</p>
                            <p style="font-size: 0.7rem; color: #888; margin: 2px 0 0 0;">Fille en Licence 2</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Témoignage 3: Ancienne élève - INCLINÉ VERS LA GAUCHE -->
            <div class="col-lg-4 col-md-6">
                <div class="testimonial-card skew-left" style="background: rgba(255,255,255,0.95); border-radius: 20px; padding: 35px 25px; transition: all 0.4s ease; box-shadow: 0 15px 35px rgba(0,0,0,0.2); height: 100%; position: relative; transform: rotate(-1.5deg);">
                    <div style="position: absolute; top: 20px; right: 25px; font-size: 4rem; color: rgba(32,83,151,0.1); font-family: serif;">"</div>
                    
                    <div style="margin-bottom: 20px;">
                        <i class="fas fa-star" style="color: gold;"></i>
                        <i class="fas fa-star" style="color: gold;"></i>
                        <i class="fas fa-star" style="color: gold;"></i>
                        <i class="fas fa-star" style="color: gold;"></i>
                        <i class="fas fa-star" style="color: gold;"></i>
                    </div>
                    
                    <p style="font-size: 1rem; line-height: 1.7; color: #444; margin-bottom: 25px; font-style: italic; position: relative; z-index: 2;">
                        "L'environnement bilingue et les outils numériques m'ont permis de décrocher un stage à l'international. ES-ESSIG m'a ouvert les portes du monde professionnel."
                    </p>
                    
                    <div style="display: flex; align-items: center; gap: 15px;">
                        <div style="width: 55px; height: 55px; background: linear-gradient(135deg, var(--color-primary), var(--color-light-blue)); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 1.3rem;">
                            FS
                        </div>
                        <div>
                            <h4 style="font-size: 1.1rem; font-weight: 700; margin: 0; color: var(--color-dark);">Fatou Sow</h4>
                            <p style="font-size: 0.8rem; color: var(--color-primary); margin: 5px 0 0 0;">Ancienne étudiante, Promo 2024</p>
                            <p style="font-size: 0.7rem; color: #888; margin: 2px 0 0 0;">Consultante en marketing</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Statistiques de satisfaction -->
        <div style="margin-top: 70px;">
            <div class="row text-center g-4">
                <div class="col-md-4">
                    <div style="background: rgba(255,255,255,0.1); border-radius: 20px; padding: 25px; backdrop-filter: blur(10px);">
                        <i class="fas fa-smile" style="font-size: 2.5rem; color: var(--color-accent); margin-bottom: 10px;"></i>
                        <h3 style="font-size: 2rem; font-weight: 800; color: white; margin: 0;">98%</h3>
                        <p style="color: rgba(255,255,255,0.8); margin: 0;">de satisfaction</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div style="background: rgba(255,255,255,0.1); border-radius: 20px; padding: 25px; backdrop-filter: blur(10px);">
                        <i class="fas fa-briefcase" style="font-size: 2.5rem; color: var(--color-accent); margin-bottom: 10px;"></i>
                        <h3 style="font-size: 2rem; font-weight: 800; color: white; margin: 0;">95%</h3>
                        <p style="color: rgba(255,255,255,0.8); margin: 0;">d'insertion professionnelle</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div style="background: rgba(255,255,255,0.1); border-radius: 20px; padding: 25px; backdrop-filter: blur(10px);">
                        <i class="fas fa-users" style="font-size: 2.5rem; color: var(--color-accent); margin-bottom: 10px;"></i>
                        <h3 style="font-size: 2rem; font-weight: 800; color: white; margin: 0;">5000+</h3>
                        <p style="color: rgba(255,255,255,0.8); margin: 0;">étudiants formés</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Styles spécifiques à cette section -->
    <style>
        /* Animation des cartes */
        .testimonial-card {
            transition: all 0.4s ease;
        }
        
        .testimonial-card:hover {
            transform: rotate(0deg) translateY(-10px) !important;
            box-shadow: 0 25px 45px rgba(0,0,0,0.25);
            background: white !important;
        }
        
        /* Animation d'apparition */
        @keyframes testimonialAppear {
            from {
                opacity: 0;
                transform: translateY(40px) rotate(0deg);
            }
            to {
                opacity: 1;
                transform: translateY(0) rotate(var(--rotate, 0deg));
            }
        }
        
        .skew-left {
            animation: testimonialAppear 0.6s ease forwards;
            --rotate: -2deg;
            opacity: 0;
        }
        
        .skew-right {
            animation: testimonialAppear 0.6s ease forwards;
            --rotate: 2deg;
            opacity: 0;
        }
        
        .col-lg-4:nth-child(1) .testimonial-card { animation-delay: 0.1s; }
        .col-lg-4:nth-child(2) .testimonial-card { animation-delay: 0.2s; }
        .col-lg-4:nth-child(3) .testimonial-card { animation-delay: 0.3s; }
        
        @media (max-width: 768px) {
            .testimonial-card {
                transform: rotate(0deg) !important;
                margin-bottom: 20px;
            }
        }
    </style>
</section>      




<!-- =========================
     🎯 SECTION CTA : APPEL À L'ACTION FINAL
========================== -->
<section style="padding: 80px 0; background-image: linear-gradient(135deg, rgba(10, 17, 27, 0.92), rgba(9, 12, 16, 0.88)), url('{% static "img/cta.jpg" %}'); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative;">
    
    <!-- Éléments décoratifs -->
    <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;">
        <div style="position: absolute; top: -50px; right: -50px; width: 250px; height: 250px; background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 70%); border-radius: 50%;"></div>
        <div style="position: absolute; bottom: -50px; left: -50px; width: 200px; height: 200px; background: radial-gradient(circle, rgba(233,7,7,0.1) 0%, rgba(233,7,7,0) 70%); border-radius: 50%;"></div>
    </div>
    
    <div class="container" style="position: relative; z-index: 2;">
        <div class="row justify-content-center">
            <div class="col-lg-8 text-center">
 
                <!-- Titre principal -->
                <h2 style="font-size: 2.5rem; font-weight: 800; color: white; margin-bottom: 15px;">
                    Prêt à rejoindre <span style="color: var(--color-accent);">l'aventure ES-ESSIG</span> ?
                </h2>
                
                <!-- Sous-titre / Description -->
                <p style="font-size: 1.1rem; color: rgba(255,255,255,0.9); max-width: 550px; margin: 0 auto 35px; line-height: 1.6;">
                    Inscrivez votre enfant dès maintenant ou planifiez une visite de notre campus pour découvrir nos installations et rencontrer notre équipe pédagogique.
                </p>
                
                <!-- Boutons CTA -->
                <div style="display: flex; gap: 20px; justify-content: center; flex-wrap: wrap;">
                    <!-- Bouton 1 : Inscrire mon enfant -->
                    <a href="#" style="display: inline-flex; align-items: center; gap: 12px; background: var(--color-accent); color: white; padding: 14px 35px; border-radius: 50px; text-decoration: none; font-weight: 600; transition: all 0.3s ease; box-shadow: 0 8px 25px rgba(233,7,7,0.3);"
                       onmouseover="this.style.background='#cc0000'; this.style.transform='translateY(-3px)'; this.style.boxShadow='0 12px 30px rgba(233,7,7,0.4)'"
                       onmouseout="this.style.background='var(--color-accent)'; this.style.transform='translateY(0)'; this.style.boxShadow='0 8px 25px rgba(233,7,7,0.3)'">
                        <i class="fas fa-user-plus" style="font-size: 1.1rem;"></i> Inscrire mon enfant
                    </a>
                    
                    <!-- Bouton 2 : Prendre rendez-vous -->
                    <a href="#" style="display: inline-flex; align-items: center; gap: 12px; background: transparent; border: 2px solid white; color: white; padding: 14px 35px; border-radius: 50px; text-decoration: none; font-weight: 600; transition: all 0.3s ease;"
                       onmouseover="this.style.background='white'; this.style.color='var(--color-primary)'; this.style.transform='translateY(-3px)'"
                       onmouseout="this.style.background='transparent'; this.style.color='white'; this.style.transform='translateY(0)'">
                        <i class="fas fa-calendar-alt" style="font-size: 1.1rem;"></i> Prendre rendez-vous
                    </a>
                </div>
                
                <!-- Petite mention rassurante -->
                <p style="font-size: 0.8rem; color: rgba(255,255,255,0.7); margin-top: 30px;">
                    <i class="fas fa-phone-alt" style="margin-right: 5px;"></i> +221 33 123 45 67 | 
                    <i class="fas fa-envelope" style="margin-left: 10px; margin-right: 5px;"></i> contact@es-essig.edu
                </p>
            </div>
        </div>
    </div>
    
    <style>
        /* Animation d'apparition */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .col-lg-8 > div:first-child {
            animation: fadeInUp 0.6s ease forwards;
        }
        
        .col-lg-8 h2 {
            animation: fadeInUp 0.6s ease 0.1s forwards;
            opacity: 0;
        }
        
        .col-lg-8 p:first-of-type {
            animation: fadeInUp 0.6s ease 0.2s forwards;
            opacity: 0;
        }
        
        .col-lg-8 .d-flex {
            animation: fadeInUp 0.6s ease 0.3s forwards;
            opacity: 0;
        }
        
        .col-lg-8 p:last-of-type {
            animation: fadeInUp 0.6s ease 0.4s forwards;
            opacity: 0;
        }
    </style>
</section>


    </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>