{% load static %}
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Master - ES-ESSIG | Formation de Haut Niveau</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); }
        }
        
        .animate-fadeInUp { animation: fadeInUp 0.8s ease forwards; }
        .animate-slideInLeft { animation: slideInLeft 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; }
        
        /* Bouton personnalisé */
        .btn-custom {
            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;
        }
        
        .btn-custom:hover {
            background: #cc0000;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(233,7,7,0.3);
        }
        
        .btn-outline {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: transparent;
            border: 2px solid var(--color-primary);
            color: var(--color-primary);
            padding: 10px 24px;
            border-radius: 40px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        
        .btn-outline:hover {
            background: var(--color-primary);
            color: white;
            transform: translateY(-2px);
        }
    </style>
</head>
<body>
    
    <!-- Navigation -->
    {% include 'includes/navbar.html' %}
    
    <!-- Contenu principal -->
    <main>
        <!-- =========================
             🎯 HERO SECTION - MASTER
        ========================== -->
        <section style="position: relative; background: linear-gradient(135deg, var(--color-primary) 0%, #0d2a4d 100%); padding: 80px 0; overflow: hidden; min-height: 450px;">
            
            <div style="position: absolute; top: 0; right: 0; width: 50%; height: 100%; overflow: hidden;">
                <div style="position: absolute; top: 0; right: 0; width: 100%; height: 100%; background-image: url('https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?w=800&h=600&fit=crop'); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover;">
                </div>
                <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>
            
            <div class="container" style="position: relative; z-index: 2;">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="animate-slideInLeft" style="background: rgba(255,255,255,0.95); backdrop-filter: blur(5px); border-radius: 30px; padding: 45px 40px; box-shadow: 0 25px 50px rgba(0,0,0,0.2);">
                            
                            <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: 20px;">
                                <i class="fas fa-graduation-cap" style="margin-right: 8px;"></i> Formation de haut niveau
                            </div>
                            
                            <h1 style="font-size: 2.8rem; font-weight: 800; color: var(--color-dark); margin-bottom: 15px;">
                                Master <span style="color: var(--color-primary);">Professionnel</span>
                            </h1>
                            
                            <div style="width: 70px; height: 4px; background: var(--color-accent); margin-bottom: 25px; border-radius: 2px;"></div>
                            
                            <p style="font-size: 1rem; color: #444; line-height: 1.7; margin-bottom: 20px;">
                                Obtenez en <strong>2 ans</strong> un master professionnel dans les domaines de la technologie, de la Gestion, de l'administration et de la communication à ES-ESSIG.
                            </p>
                            
                            <p style="font-size: 0.95rem; color: #555; line-height: 1.6; margin-bottom: 30px;">
                                Ce programme d'excellence est subdivisé en <strong>4 semestres</strong> pour une expertise approfondie.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- =========================
             🎯 SECTION POURQUOI CHOISIR CE PARCOURS
        ========================== -->
        <section style="padding: 80px 0; background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); position: relative; overflow: hidden;">
            <div class="container" style="position: relative; z-index: 2;">
                <div class="row g-5">
                    <div class="col-lg-6">
                        <div class="animate-fadeInUp">
                            <h2 style="font-size: 2rem; font-weight: 800; color: var(--color-dark); margin-bottom: 15px;">
                                Pourquoi choisir <span style="color: var(--color-primary);">ce parcours?</span>
                            </h2>
                            <div style="width: 60px; height: 3px; background: var(--color-accent); margin-bottom: 25px;"></div>
                            <p style="color: #555; line-height: 1.7; margin-bottom: 20px;">
                                Le Master à ES-ESSIG vous offre une expertise de pointe, alliant recherche appliquée et pratique professionnelle intense.
                            </p>
                            <p style="color: #555; line-height: 1.7; margin-bottom: 30px;">
                                Nous formons des leaders capables de relever les défis technologiques et managériaux de demain.
                            </p>
                        </div>
                        
                        <div class="row g-4">
                            <!-- Carte 1: Réseau et opportunités -->
                            <div class="col-md-6">
                                <div class="animate-fadeInUp delay-1" style="background: white; border-radius: 20px; padding: 25px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); transition: all 0.3s ease; height: 100%; border-left: 4px solid var(--color-accent);">
                                    <div style="width: 50px; height: 50px; background: linear-gradient(135deg, rgba(32,83,151,0.1), rgba(74,144,226,0.1)); border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 15px;">
                                        <i class="fas fa-users" style="font-size: 1.5rem; color: var(--color-primary);"></i>
                                    </div>
                                    <h4 style="font-size: 1.2rem; font-weight: 700; margin-bottom: 10px; color: var(--color-dark);">Réseau et opportunités</h4>
                                    <p style="color: #666; font-size: 0.85rem; line-height: 1.5;">
                                        En rejoignant ES-ESSIG, vous intégrez une communauté dynamique d'entrepreneurs passionnés. Notre réseau vous permettra de vous connecter. "Seul on va peut-être vite mais ensemble on va loin."
                                    </p>
                                </div>
                            </div>
                            
                            <!-- Carte 2: Entreprises durables -->
                            <div class="col-md-6">
                                <div class="animate-fadeInUp delay-2" style="background: white; border-radius: 20px; padding: 25px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); transition: all 0.3s ease; height: 100%; border-left: 4px solid var(--color-accent);">
                                    <div style="width: 50px; height: 50px; background: linear-gradient(135deg, rgba(32,83,151,0.1), rgba(74,144,226,0.1)); border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 15px;">
                                        <i class="fas fa-desktop" style="font-size: 1.5rem; color: var(--color-primary);"></i>
                                    </div>
                                    <h4 style="font-size: 1.2rem; font-weight: 700; margin-bottom: 10px; color: var(--color-dark);">Entreprises durables</h4>
                                    <p style="color: #666; font-size: 0.85rem; line-height: 1.5;">
                                        L'objectif ultime de ES-ESSIG est de former des entrepreneurs capables de créer des micro-entreprises viables et durables.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Colonne droite: Pièces à fournir -->
                    <div class="col-lg-6">
                        <div class="animate-fadeInUp delay-1" style="background: white; border-radius: 24px; padding: 35px; box-shadow: 0 15px 35px rgba(0,0,0,0.08);">
                            <h2 style="font-size: 1.8rem; font-weight: 800; color: var(--color-dark); margin-bottom: 10px;">
                                Admission et <span style="color: var(--color-primary);">Pièces</span>
                            </h2>
                            <div style="width: 60px; height: 3px; background: var(--color-accent); margin-bottom: 25px;"></div>
                            
                            <!-- Accordéon: Pièces à fournir -->
                            <div style="border: 1px solid #e0e0e0; border-radius: 16px; overflow: hidden;">
                                <div class="accordion-header" style="background: #f8f9fa; padding: 18px 20px; cursor: pointer; display: flex; justify-content: space-between; align-items: center;" onclick="toggleAccordion(this)">
                                    <span style="font-weight: 700; color: var(--color-dark);"><i class="fas fa-file-alt" style="color: var(--color-accent); margin-right: 10px;"></i> Pièces à fournir</span>
                                    <span class="accordion-icon" style="font-size: 1.2rem; color: var(--color-primary);">+</span>
                                </div>
                                <div class="accordion-content" style="padding: 0 20px; max-height: 0; overflow: hidden; transition: all 0.3s ease;">
                                    <div style="padding: 20px 0;">
                                        <ul style="list-style: none; padding: 0;">
                                            <li style="margin-bottom: 10px; display: flex; align-items: start; gap: 10px;">
                                                <i class="fas fa-check-circle" style="color: var(--color-accent); margin-top: 4px;"></i>
                                                <span style="color: #555;">Fiche d’inscription à retirer au secrétariat de l’institut</span>
                                            </li>
                                            <li style="margin-bottom: 10px; display: flex; align-items: start; gap: 10px;">
                                                <i class="fas fa-check-circle" style="color: var(--color-accent); margin-top: 4px;"></i>
                                                <span style="color: #555;">Une copie de l’attestation de Licence ou du diplôme équivalent</span>
                                            </li>
                                            <li style="margin-bottom: 10px; display: flex; align-items: start; gap: 10px;">
                                                <i class="fas fa-check-circle" style="color: var(--color-accent); margin-top: 4px;"></i>
                                                <span style="color: #555;">Un certificat médical de moins de 3 mois</span>
                                            </li>
                                            <li style="margin-bottom: 10px; display: flex; align-items: start; gap: 10px;">
                                                <i class="fas fa-check-circle" style="color: var(--color-accent); margin-top: 4px;"></i>
                                                <span style="color: #555;">Une copie de l’acte de naissance</span>
                                            </li>
                                            <li style="display: flex; align-items: start; gap: 10px;">
                                                <i class="fas fa-check-circle" style="color: var(--color-accent); margin-top: 4px;"></i>
                                                <span style="color: #555;">Deux photos d’identité récente</span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- =========================
             🎯 SECTION PARCOURS DISPONIBLES
        ========================== -->
        <section id="formations" style="padding: 80px 0; background: white; position: relative;">
            <div class="container">
                <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-list" style="margin-right: 8px;"></i> Nos Masters
                    </span>
                    <h2 style="font-size: 2.5rem; font-weight: 800; color: var(--color-dark); margin-bottom: 15px;">
                        Les différents <span style="color: var(--color-primary);">parcours disponibles</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 g-4 justify-content-center">
                    <!-- Master 1: Master en Génie Logiciel -->
                    <div class="col-lg-5 col-md-6">
                        <div class="filiere-card" style="background: white; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.08); transition: all 0.3s ease; height: 100%;">
                            <div style="height: 220px; overflow: hidden; position: relative;">
                                <img src="https://defitech.tg/wp-content/uploads/2025/09/Master-Intelligence-Artificielle-Big-Data-DEFITECH-768x512.jpg" alt="Master Génie Logiciel" style="width: 100%; height: 100%; object-fit: cover;">
                                <div style="position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, var(--color-primary), transparent); padding: 25px 20px 10px;">
                                    <h3 style="color: white; margin: 0; font-size: 1.3rem; font-weight: 700;">Master en Génie Logiciel</h3>
                                </div>
                            </div>
                            <div style="padding: 30px;">
                                <p style="color: #555; font-size: 0.95rem; line-height: 1.6; margin-bottom: 20px;">
                                    Conception, développement et optimisation d’algorithmes de Machine Learning et Deep Learning. Traitement, nettoyage, analyse et visualisation de données massives (Big Data).
                                </p>
                                <a href="#" class="btn-outline">En savoir plus <i class="fas fa-arrow-right"></i></a>
                            </div>
                        </div>
                    </div>

                    <!-- Master 2: Master en Informatique et Systèmes -->
                    <div class="col-lg-5 col-md-6">
                        <div class="filiere-card" style="background: white; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.08); transition: all 0.3s ease; height: 100%;">
                            <div style="height: 220px; overflow: hidden; position: relative;">
                                <img src="https://defitech.tg/wp-content/uploads/2023/07/Administration-de-Reseaux-Locaux-dEntreprise-BTS-DEFITECH-768x512.png" alt="Master Informatique et Systèmes" style="width: 100%; height: 100%; object-fit: cover;">
                                <div style="position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, var(--color-primary), transparent); padding: 25px 20px 10px;">
                                    <h3 style="color: white; margin: 0; font-size: 1.3rem; font-weight: 700;">Master en Informatique et Systèmes</h3>
                                </div>
                            </div>
                            <div style="padding: 30px;">
                                <p style="color: #555; font-size: 0.95rem; line-height: 1.6; margin-bottom: 20px;">
                                    Le Master en Informatique et Systèmes est une formation de deux ans qui forme des spécialistes capables de concevoir, développer et piloter des systèmes d'information complexes.
                                </p>
                                <a href="#" class="btn-outline">En savoir plus <i class="fas fa-arrow-right"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <style>
                .filiere-card:hover {
                    transform: translateY(-8px);
                    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
                }
                .filiere-card {
                    animation: fadeInUp 0.5s ease forwards;
                    opacity: 0;
                }
            </style>
        </section>

        <!-- =========================
             🎯 SECTION CTA FINAL
        ========================== -->
        <section id="inscriptions" style="padding: 80px 0; background: linear-gradient(135deg, var(--color-primary) 0%, #0d2a4d 100%); color: white; text-align: center;">
            <div class="container">
                <h2 style="font-size: 2.5rem; font-weight: 800; margin-bottom: 20px; color: white;">Prêt à devenir un expert ?</h2>
                <p style="font-size: 1.1rem; max-width: 700px; margin: 0 auto 35px; opacity: 0.9;">Rejoignez nos programmes de Master à ES-ESSIG et donnez une nouvelle dimension à votre carrière.</p>
                <div style="display: flex; gap: 20px; justify-content: center; flex-wrap: wrap;">
                    <a href="#" class="btn-custom" style="background: var(--color-accent); font-size: 1.1rem; padding: 15px 40px;">
                        <i class="fas fa-file-signature"></i> S'inscrire maintenant
                    </a>
                </div>
            </div>
        </section>
    </main>
    
    <!-- Footer -->
    {% include 'includes/footer.html' %}
    
    <script>
        function toggleAccordion(element) {
            const content = element.nextElementSibling;
            const icon = element.querySelector('.accordion-icon');
            const isOpen = content.style.maxHeight && content.style.maxHeight !== '0px';
            
            // Fermer tous les autres accordéons
            const allContents = document.querySelectorAll('.accordion-content');
            const allIcons = document.querySelectorAll('.accordion-icon');
            
            allContents.forEach(item => {
                if (item !== content) {
                    item.style.maxHeight = '0px';
                }
            });
            allIcons.forEach(item => {
                if (item !== icon) {
                    item.textContent = '+';
                }
            });
            
            // Ouvrir/fermer celui cliqué
            if (!isOpen) {
                content.style.maxHeight = content.scrollHeight + 'px';
                icon.textContent = '−';
            } else {
                content.style.maxHeight = '0px';
                icon.textContent = '+';
            }
        }
    </script>
    
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
