{% 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 - ESSIG | Formation de Haut Niveau</title>
    <link rel="shortcut icon" type="image/jpeg" href="{% static 'img/logo-removebg-preview.png' %}">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <!-- Variables CSS Globales -->
    <style>
        :root {
            --color-primary: #205397;
            --color-accent: #e90707;
            --color-dark: #1E1E1E;
            --color-light-blue: #4A90E2;
            --color-white: #FFFFFF;
            --font-main: "Roboto", sans-serif;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: var(--font-main);
            background-color: #f8f9fa;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        
        main {
            flex: 1;
        }
        
        /* 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);
        }
        
        /* Badge domaine */
        .domain-badge {
            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: 20px;
        }
        
        /* Section séparateur */
        .domain-section {
            margin-bottom: 60px;
        }
        
        .domain-title {
            font-size: 1.8rem;
            font-weight: 800;
            color: var(--color-dark);
            margin-bottom: 10px;
        }
        
        .mention-title {
            font-size: 1.2rem;
            color: var(--color-primary);
            font-weight: 600;
            margin-bottom: 30px;
            padding-bottom: 10px;
            border-bottom: 2px solid var(--color-accent);
            display: inline-block;
        }
    </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-1523240795612-9a054b0db644?w=1200&h=800&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;">
                                Masters <span style="color: var(--color-primary);">Professionnels</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 (BAC+5) dans les domaines des Sciences de l'ingénieur et des Sciences de gestion.
                            </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 à 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, énergétiques 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 ESSIG, vous intégrez une communauté dynamique de professionnels passionnés. "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-building" 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 ESSIG est de former des cadres capables de créer et gérer des 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écentes</span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- =========================
             🎯 SECTION PARCOURS MASTER - DOMAINE SCIENCES ET TECHNOLOGIES
        ========================== -->
        <section id="formations" style="padding: 80px 0; background: white; position: relative;">
            <div class="container">
                
                <!-- Domaine : Sciences et Technologies -->
                <div class="domain-section">
                    <div style="text-align: center; margin-bottom: 40px;">
                        <div class="domain-badge">
                            <i class="fas fa-microchip" style="margin-right: 8px;"></i> Domaine : Sciences et Technologies
                        </div>
                        <h2 class="domain-title">
                            Mention : <span style="color: var(--color-primary);">Sciences de l'ingénieur</span>
                        </h2>
                        <div style="width: 80px; height: 4px; background: linear-gradient(90deg, var(--color-accent), var(--color-primary)); margin: 15px auto 0; border-radius: 2px;"></div>
                    </div>

                    <div class="row g-4 justify-content-center">
                        <!-- Spécialité 1: Génie électrique, thermique et énergie renouvelable -->
                        <div class="col-lg-6 col-md-6">
                            <div class="master-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: 240px; overflow: hidden; position: relative;">
                                    <img src="https://images.unsplash.com/photo-1508514177221-188b1cf16e9d?w=800&h=500&fit=crop" alt="Génie électrique, thermique et énergie renouvelable" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;">
                                    <div style="position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, var(--color-primary), transparent); padding: 30px 25px 15px;">
                                        <h3 style="color: white; margin: 0; font-size: 1.3rem; font-weight: 700;">Génie électrique, thermique et énergie renouvelable</h3>
                                    </div>
                                </div>
                                <div style="padding: 30px;">
                                    <div style="display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap;">
                                        <span style="background: rgba(233,7,7,0.1); color: var(--color-accent); padding: 5px 14px; border-radius: 20px; font-size: 0.75rem; font-weight: 600;">Master Pro</span>
                                        <span style="background: #f0f0f0; color: #666; padding: 5px 14px; border-radius: 20px; font-size: 0.75rem;">BAC+5</span>
                                        <span style="background: rgba(32,83,151,0.1); color: var(--color-primary); padding: 5px 14px; border-radius: 20px; font-size: 0.75rem;">2 ans</span>
                                    </div>
                                    <p style="color: #555; font-size: 0.95rem; line-height: 1.6; margin-bottom: 25px;">
                                        Formation aux systèmes électriques avancés, thermique industrielle, et technologies des énergies renouvelables (solaire, éolien, biomasse, hydraulique).
                                    </p>
                                    <a href="{% url 'master_genie_energie' %}" class="btn-outline">En savoir plus <i class="fas fa-arrow-right"></i></a>
                                </div>
                            </div>
                        </div>

                        <!-- Spécialité 2: Système informatique et logiciel -->
                        <div class="col-lg-6 col-md-6">
                            <div class="master-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: 240px; overflow: hidden; position: relative;">
                                    <img src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=800&h=500&fit=crop" alt="Système informatique et logiciel" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;">
                                    <div style="position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, var(--color-primary), transparent); padding: 30px 25px 15px;">
                                        <h3 style="color: white; margin: 0; font-size: 1.3rem; font-weight: 700;">Système informatique et logiciel</h3>
                                    </div>
                                </div>
                                <div style="padding: 30px;">
                                    <div style="display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap;">
                                        <span style="background: rgba(233,7,7,0.1); color: var(--color-accent); padding: 5px 14px; border-radius: 20px; font-size: 0.75rem; font-weight: 600;">Master Pro</span>
                                        <span style="background: #f0f0f0; color: #666; padding: 5px 14px; border-radius: 20px; font-size: 0.75rem;">BAC+5</span>
                                        <span style="background: rgba(32,83,151,0.1); color: var(--color-primary); padding: 5px 14px; border-radius: 20px; font-size: 0.75rem;">2 ans</span>
                                    </div>
                                    <p style="color: #555; font-size: 0.95rem; line-height: 1.6; margin-bottom: 25px;">
                                        Architecture logicielle avancée, développement full-stack, DevOps, cloud computing, intelligence artificielle et gestion de projets informatiques.
                                    </p>
                                    <a href="{% url 'master_systeme_logiciel' %}" class="btn-outline">En savoir plus <i class="fas fa-arrow-right"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Séparateur visuel entre les domaines -->
                <div style="height: 60px;"></div>

                <!-- Domaine : Sciences économiques et de gestion -->
                <div class="domain-section">
                    <div style="text-align: center; margin-bottom: 40px;">
                        <div class="domain-badge">
                            <i class="fas fa-chart-line" style="margin-right: 8px;"></i> Domaine : Sciences économiques et de gestion
                        </div>
                        <h2 class="domain-title">
                            Mention : <span style="color: var(--color-primary);">Sciences de gestion</span>
                        </h2>
                        <div style="width: 80px; height: 4px; background: linear-gradient(90deg, var(--color-accent), var(--color-primary)); margin: 15px auto 0; border-radius: 2px;"></div>
                        <p style="color: #666; max-width: 700px; margin: 20px auto 0;">Formez-vous aux métiers d'excellence de la gestion et du management</p>
                    </div>

                    <div class="row g-4">
                        <!-- Spécialité 1: Banque finance -->
                        <div class="col-lg-4 col-md-6">
                            <div class="master-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: 200px; overflow: hidden; position: relative;">
                                    <img src="https://images.unsplash.com/photo-1554224155-8d04cb21cd6c?w=600&h=400&fit=crop" alt="Banque finance" 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: 20px 15px 10px;">
                                        <h3 style="color: white; margin: 0; font-size: 1.1rem; font-weight: 700;">Banque finance</h3>
                                    </div>
                                </div>
                                <div style="padding: 20px;">
                                    <p style="color: #555; font-size: 0.85rem; line-height: 1.5; margin-bottom: 15px;">
                                        Maîtrise des marchés financiers, gestion de portefeuille, analyse de risques et produits bancaires.
                                    </p>
                                    <a href="{% url 'master_banque_finance' %}" class="btn-outline" style="padding: 8px 20px; font-size: 0.8rem;">En savoir plus <i class="fas fa-arrow-right"></i></a>
                                </div>
                            </div>
                        </div>

                        <!-- Spécialité 2: Comptabilité contrôle audit -->
                        <div class="col-lg-4 col-md-6">
                            <div class="master-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: 200px; overflow: hidden; position: relative;">
                                    <img src="https://images.unsplash.com/photo-1554774853-719586f82d77?w=600&h=400&fit=crop" alt="Comptabilité contrôle audit" 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: 20px 15px 10px;">
                                        <h3 style="color: white; margin: 0; font-size: 1.1rem; font-weight: 700;">Comptabilité contrôle audit</h3>
                                    </div>
                                </div>
                                <div style="padding: 20px;">
                                    <p style="color: #555; font-size: 0.85rem; line-height: 1.5; margin-bottom: 15px;">
                                        Expertise comptable, audit financier, contrôle de gestion et normes IFRS.
                                    </p>
                                    <a href="{% url 'master_comptabilite_audit' %}" class="btn-outline" style="padding: 8px 20px; font-size: 0.8rem;">En savoir plus <i class="fas fa-arrow-right"></i></a>
                                </div>
                            </div>
                        </div>

                        <!-- Spécialité 3: Gestion des projets -->
                        <div class="col-lg-4 col-md-6">
                            <div class="master-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: 200px; overflow: hidden; position: relative;">
                                    <img src="https://images.unsplash.com/photo-1504868584819-f8e8b4b6d7e3?w=600&h=400&fit=crop" alt="Gestion des projets" 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: 20px 15px 10px;">
                                        <h3 style="color: white; margin: 0; font-size: 1.1rem; font-weight: 700;">Gestion des projets</h3>
                                    </div>
                                </div>
                                <div style="padding: 20px;">
                                    <p style="color: #555; font-size: 0.85rem; line-height: 1.5; margin-bottom: 15px;">
                                        Méthodologies Agile, PMP, gestion budgétaire, pilotage d'équipes et livraison de projets complexes.
                                    </p>
                                    <a href="{% url 'master_gestion_projets' %}" class="btn-outline" style="padding: 8px 20px; font-size: 0.8rem;">En savoir plus <i class="fas fa-arrow-right"></i></a>
                                </div>
                            </div>
                        </div>

                        <!-- Spécialité 4: Organisation et gestion des ressources humaines -->
                        <div class="col-lg-4 col-md-6">
                            <div class="master-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: 200px; overflow: hidden; position: relative;">
                                    <img src="https://images.unsplash.com/photo-1551836022-d5d88e9218df?w=600&h=400&fit=crop" alt="Organisation et GRH" 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: 20px 15px 10px;">
                                        <h3 style="color: white; margin: 0; font-size: 1.1rem; font-weight: 700;">Organisation et GRH</h3>
                                    </div>
                                </div>
                                <div style="padding: 20px;">
                                    <p style="color: #555; font-size: 0.85rem; line-height: 1.5; margin-bottom: 15px;">
                                        Stratégies RH, recrutement, gestion des talents, droit social et conduite du changement.
                                    </p>
                                    <a href="{% url 'master_ressources_humaines' %}" class="btn-outline" style="padding: 8px 20px; font-size: 0.8rem;">En savoir plus <i class="fas fa-arrow-right"></i></a>
                                </div>
                            </div>
                        </div>

                        <!-- Spécialité 5: Gestion des collectivités locales -->
                        <div class="col-lg-4 col-md-6">
                            <div class="master-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: 200px; overflow: hidden; position: relative;">
                                    <img src="https://images.unsplash.com/photo-1487958449943-2429e8be8625?w=600&h=400&fit=crop" alt="Gestion des collectivités locales" 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: 20px 15px 10px;">
                                        <h3 style="color: white; margin: 0; font-size: 1.1rem; font-weight: 700;">Gestion des collectivités locales</h3>
                                    </div>
                                </div>
                                <div style="padding: 20px;">
                                    <p style="color: #555; font-size: 0.85rem; line-height: 1.5; margin-bottom: 15px;">
                                        Administration territoriale, finances publiques locales, urbanisme et politiques publiques.
                                    </p>
                                    <a href="{% url 'master_collectivites_locales' %}" class="btn-outline" style="padding: 8px 20px; font-size: 0.8rem;">En savoir plus <i class="fas fa-arrow-right"></i></a>
                                </div>
                            </div>
                        </div>

                        <!-- Spécialité 6: Management international -->
                        <div class="col-lg-4 col-md-6">
                            <div class="master-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: 200px; overflow: hidden; position: relative;">
                                    <img src="https://images.unsplash.com/photo-1526481280693-3bfa7568e0f3?w=600&h=400&fit=crop" alt="Management international" 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: 20px 15px 10px;">
                                        <h3 style="color: white; margin: 0; font-size: 1.1rem; font-weight: 700;">Management international</h3>
                                    </div>
                                </div>
                                <div style="padding: 20px;">
                                    <p style="color: #555; font-size: 0.85rem; line-height: 1.5; margin-bottom: 15px;">
                                        Stratégie d'entreprise à l'international, négociation interculturelle, commerce mondial et supply chain.
                                    </p>
                                    <a href="{% url 'master_management_international' %}" class="btn-outline" style="padding: 8px 20px; font-size: 0.8rem;">En savoir plus <i class="fas fa-arrow-right"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <style>
                .master-card:hover {
                    transform: translateY(-8px);
                    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
                }
                .master-card:hover img {
                    transform: scale(1.05);
                }
                .master-card {
                    animation: fadeInUp 0.5s ease forwards;
                    opacity: 0;
                }
                .col-lg-4:nth-child(1) .master-card { animation-delay: 0.05s; }
                .col-lg-4:nth-child(2) .master-card { animation-delay: 0.1s; }
                .col-lg-4:nth-child(3) .master-card { animation-delay: 0.15s; }
                .col-lg-4:nth-child(4) .master-card { animation-delay: 0.2s; }
                .col-lg-4:nth-child(5) .master-card { animation-delay: 0.25s; }
                .col-lg-4:nth-child(6) .master-card { animation-delay: 0.3s; }
                .col-lg-6:nth-child(1) .master-card { animation-delay: 0.05s; }
                .col-lg-6:nth-child(2) .master-card { animation-delay: 0.1s; }
                
                @media (max-width: 768px) {
                    .master-card {
                        margin-bottom: 20px;
                    }
                }
            </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 à 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>