{% extends "base.html" %}

{% load static %}

{% block content %}
<link rel="shortcut icon" type="image/jpeg" href="{% static 'img/logo-removebg-preview.png' %}">
<style>
    :root {
        --color-primary: #205397;
        --color-accent: #e90707;
        --color-dark: #1E1E1E;
        --color-light-blue: #4A90E2;
        --color-white: #FFFFFF;
        --font-main: "Roboto", sans-serif;
    }

    /* --- HERO SECTION --- */
    .hero-custom {
        height: 700px;
        width: 100%;
        position: relative;
        display: flex;
        align-items: center;
        background-color: #000;
        overflow: hidden;
    }

    .hero-bg-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=1600&h=900&fit=crop');
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        z-index: 1;
    }

    /* Le bloc blanc avec forme zig-zag */
    .hero-white-block {
        position: relative;
        z-index: 10;
        background: #ffffff;
        width: 55%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: 60px;
        clip-path: polygon(
            0% 0%, 
            60% 0%, 
            60% 18%, 
            70% 20%, 
            100% 20%, 
            100% 80%, 
            70% 82%, 
            60% 84%, 
            60% 100%, 
            0% 100%
        );
        box-shadow: 20px 0 50px rgba(0,0,0,0.2);
    }

    /* Barre rouge décorative */
    .hero-white-block::after {
        content: "";
        position: absolute;
        right: 0;
        top: 20%;
        height: 60%;
        width: 12px;
        background: var(--color-accent);
    }

    .hero-text-container {
        max-width: 550px;
        padding-right: 40px;
        z-index: 15;
    }

    .title-master {
        font-size: 3rem;
        font-weight: 900;
        color: var(--color-dark);
        line-height: 1.2;
        margin-bottom: 25px;
    }

    .badge-domaine {
        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;
    }

    .badge-niveau {
        display: inline-block;
        background: var(--color-accent);
        color: white;
        padding: 5px 15px;
        border-radius: 50px;
        font-size: 0.75rem;
        font-weight: 600;
        margin-left: 10px;
    }

    .red-bar-hero {
        width: 80px;
        height: 6px;
        background: var(--color-accent);
    }

    @media (max-width: 1200px) {
        .title-master { font-size: 2.5rem; }
        .hero-white-block { width: 70%; }
    }

    @media (max-width: 992px) {
        .hero-custom { height: auto; padding: 50px 0; }
        .hero-bg-image { 
            background-attachment: scroll;
            opacity: 0.3;
        }
        .hero-white-block { 
            width: 95%; 
            height: auto; 
            margin: 0 auto; 
            padding: 60px 20px; 
            justify-content: center; 
            clip-path: none;
            border-bottom: 10px solid var(--color-accent);
            background: rgba(255,255,255,0.95);
        }
        .hero-white-block::after { display: none; }
        .hero-text-container { 
            text-align: center; 
            padding-left: 0; 
            padding-right: 0; 
        }
        .red-bar-hero { margin: 0 auto; }
        .title-master { font-size: 2rem; }
    }

    @media (max-width: 576px) {
        .title-master { font-size: 1.6rem; }
        .badge-domaine { font-size: 0.7rem; }
    }

    /* --- SECTIONS CONTENU --- */
    .section-padding { padding: 90px 0; }
    .bg-light { background-color: #f8f9fa; }

    .section-title {
        font-size: 2.2rem;
        font-weight: 800;
        color: var(--color-primary);
        margin-bottom: 30px;
    }

    .section-subtitle {
        font-size: 1rem;
        color: #666;
        margin-bottom: 40px;
    }

    .card-info {
        background: white;
        padding: 40px;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        height: 100%;
        border-left: 5px solid var(--color-accent);
    }

    .info-icon {
        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;
    }

    .info-icon i {
        font-size: 1.5rem;
        color: var(--color-primary);
    }

    .table-program thead {
        background-color: var(--color-primary);
        color: white;
    }

    .table-program thead th {
        padding: 12px 15px;
        font-weight: 600;
    }

    .table-program tbody td {
        padding: 10px 15px;
        border-bottom: 1px solid #e0e0e0;
    }

    .list-custom {
        list-style: none;
        padding-left: 0;
    }
    .list-custom li {
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .list-custom i {
        color: var(--color-accent);
        width: 20px;
    }

    .skill-tag {
        display: inline-block;
        background: rgba(32,83,151,0.1);
        color: var(--color-primary);
        padding: 8px 16px;
        border-radius: 30px;
        font-size: 0.85rem;
        font-weight: 500;
        margin: 5px;
    }

    @media (max-width: 768px) {
        .section-padding { padding: 50px 0; }
        .section-title { font-size: 1.8rem; }
        .table-program thead th,
        .table-program tbody td {
            padding: 8px 10px;
            font-size: 0.85rem;
        }
    }

    .btn-custom:hover {
        background: #cc0000 !important;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(233,7,7,0.3);
    }
    .text-accent {
        color: var(--color-accent);
    }
    .nav-tabs .nav-link {
        color: var(--color-dark);
    }
    .nav-tabs .nav-link.active {
        color: var(--color-accent);
        font-weight: 700;
        border-bottom-color: var(--color-accent);
    }

    .stat-number {
        font-size: 3.5rem;
        font-weight: 900;
        color: var(--color-accent);
    }
    .stat-box {
        text-align: center;
        padding: 30px;
    }
</style>

<!-- HERO SECTION -->
<section class="hero-custom">
    <div class="hero-white-block">
        <div class="hero-text-container">
            <div class="badge-domaine">
                <i class="fas fa-chart-line" style="margin-right: 8px;"></i> Sciences économiques et de gestion
                <span class="badge-niveau">BAC+5</span>
            </div>
            <h1 class="title-master">Master Professionnel<br>en Banque<br>et Finance</h1>
            <div class="red-bar-hero"></div>
            <p class="mt-3 text-muted" style="font-size: 0.9rem;">Mention : Sciences de gestion</p>
        </div>
    </div>
    <div class="hero-bg-image"></div>
</section>

<!-- INFOS FORMATION -->
<section class="section-padding">
    <div class="container">
        <div class="row g-5">
            <div class="col-lg-7">
                <h2 class="section-title">Présentation du Diplôme</h2>
                <p class="lead fw-bold text-primary">Master Professionnel en Banque et Finance</p>
                <p>Ce master forme des professionnels capables de maîtriser les opérations bancaires, les marchés financiers et la gestion des investissements. La formation allie solides connaissances théoriques et cas pratiques inspirés de situations réelles.</p>
                
                <div class="mt-5">
                    <h4 class="fw-bold mb-3"><i class="fas fa-bullseye text-primary me-2"></i> Objectifs de la formation</h4>
                    <p>Former des experts en banque et finance capables de :</p>
                    <ul class="list-custom">
                        <li><i class="fas fa-check-circle"></i> Maîtriser les opérations bancaires et financières</li>
                        <li><i class="fas fa-check-circle"></i> Analyser et gérer les risques financiers</li>
                        <li><i class="fas fa-check-circle"></i> Évaluer les performances des entreprises</li>
                        <li><i class="fas fa-check-circle"></i> Conseiller les clients en investissement</li>
                        <li><i class="fas fa-check-circle"></i> Manager des portefeuilles financiers</li>
                    </ul>
                </div>

                <div class="mt-4">
                    <h4 class="fw-bold mb-3"><i class="fas fa-chart-pie text-primary me-2"></i> Compétences acquises</h4>
                    <div>
                        <span class="skill-tag">Analyse financière avancée</span>
                        <span class="skill-tag">Gestion de portefeuille</span>
                        <span class="skill-tag">Produits dérivés</span>
                        <span class="skill-tag">Marchés financiers</span>
                        <span class="skill-tag">Gestion des risques</span>
                        <span class="skill-tag">Finance d'entreprise</span>
                        <span class="skill-tag">Ingénierie financière</span>
                        <span class="skill-tag">Conformité bancaire</span>
                    </div>
                </div>

                <div class="mt-4">
                    <h4 class="fw-bold mb-3"><i class="fas fa-university text-primary me-2"></i> Partenariats</h4>
                    <div>
                        <span class="skill-tag">Bloomberg Certification</span>
                        <span class="skill-tag">AMF (Autorité des Marchés Financiers)</span>
                        <span class="skill-tag">Banque de France</span>
                        <span class="skill-tag">Société Générale</span>
                        <span class="skill-tag">BNP Paribas</span>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-5">
                <div class="card-info">
                    <div class="info-icon">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <h4 class="fw-bold mb-4">Détails Pratiques</h4>
                    <p><strong><i class="fas fa-clock me-2 text-accent"></i> Durée :</strong> 2 ans (4 semestres)</p>
                    <p><strong><i class="fas fa-graduation-cap me-2 text-accent"></i> Crédits :</strong> 120 crédits (30 crédits/semestre)</p>
                    <p><strong><i class="fas fa-calendar me-2 text-accent"></i> Rentrée :</strong> Octobre 2026</p>
                    <p><strong><i class="fas fa-language me-2 text-accent"></i> Langue :</strong> Français / Anglais financier</p>
                    <hr>
                    <h5 class="fw-bold text-primary">Coûts de la formation</h5>
                    <div class="d-flex justify-content-between mb-2">
                        <span>Droit d'inscription :</span>
                        <span class="fw-bold">35 000 F CFA / an</span>
                    </div>
                    <div class="d-flex justify-content-between mb-3">
                        <span>Frais de scolarité :</span>
                        <span class="fw-bold">585 000 F CFA / an</span>
                    </div>
                    <p class="small text-muted">Plusieurs modalités de paiement disponibles (3 tranches ou 7 mensualités).</p>
                    <hr>
                    <a href="#" class="btn-custom" style="display: inline-flex; align-items: center; gap: 10px; background: var(--color-accent); color: white; padding: 12px 25px; border-radius: 40px; text-decoration: none; font-weight: 600; margin-top: 15px;">
                        <i class="fas fa-file-signature"></i> S'inscrire
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- PROGRAMME DE FORMATION -->
<section class="section-padding bg-light">
    <div class="container">
        <h2 class="section-title text-center">Programme de la formation</h2>
        <p class="text-center section-subtitle">Découvrez les matières enseignées durant les 2 années du Master</p>
        
        <div class="row mt-4">
            <div class="col-12">
                <ul class="nav nav-tabs mb-4 justify-content-center" id="myTab" role="tablist">
                    <li class="nav-item">
                        <button class="nav-link active fw-bold" data-bs-toggle="tab" data-bs-target="#year1">Master 1 (M1)</button>
                    </li>
                    <li class="nav-item">
                        <button class="nav-link fw-bold" data-bs-toggle="tab" data-bs-target="#year2">Master 2 (M2)</button>
                    </li>
                </ul>
                
                <div class="tab-content bg-white p-4 rounded shadow-sm">
                    <!-- Master 1 -->
                    <div class="tab-pane fade show active" id="year1">
                        <div class="table-responsive">
                            <table class="table table-program">
                                <thead>
                                    <tr>
                                        <th>Code</th>
                                        <th>Intitulé</th>
                                        <th>Type UE</th>
                                        <th>Crédit</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr><td>BAN101</td><td>Comptabilité approfondie et analyse financière</td><td>F</td><td>6</td>
                                    <tr>
                                    <tr><td>BAN102</td><td>Techniques bancaires et produits financiers</td><td>F</td><td>6</td>
                                    </tr>
                                    <tr><td>BAN103</td><td>Marchés financiers et instruments de bourse</td><td>F</td><td>4</td>
                                    </tr>
                                    <tr><td>BAN104</td><td>Gestion des risques financiers</td><td>F</td><td>4</td>
                                    </tr>
                                    <tr><td>BAN105</td><td>Anglais financier</td><td>F</td><td>3</td>
                                    </tr>
                                    <tr><td>BAN106</td><td>Droit bancaire et conformité</td><td>C</td><td>4</td>
                                    </tr>
                                    <tr><td>BAN107</td><td>Économie monétaire et financière</td><td>C</td><td>3</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                    <!-- Master 2 -->
                    <div class="tab-pane fade" id="year2">
                        <div class="table-responsive">
                            <table class="table table-program">
                                <thead>
                                    <tr>
                                        <th>Code</th>
                                        <th>Intitulé</th>
                                        <th>Type UE</th>
                                        <th>Crédit</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr><td>BAN201</td><td>Gestion de portefeuille et asset management</td><td>F</td><td>6</td>
                                    </tr>
                                    <tr><td>BAN202</td><td>Finance d'entreprise et ingénierie financière</td><td>F</td><td>6</td>
                                    </tr>
                                    <tr><td>BAN203</td><td>Produits dérivés et marchés à terme</td><td>F</td><td>4</td>
                                    </tr>
                                    <tr><td>BAN204</td><td>Fintech et digital banking</td><td>F</td><td>4</td>
                                    </tr>
                                    <tr><td>BAN205</td><td>Éthique et gouvernance financière</td><td>C</td><td>3</td>
                                    </tr>
                                    <tr><td>BAN206</td><td>Stage professionnel (4-6 mois)</td><td>S</td><td>7</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- CERTIFICATIONS -->
<section class="section-padding">
    <div class="container">
        <div class="row g-5 align-items-center">
            <div class="col-lg-6">
                <h2 class="section-title">Certifications préparées</h2>
                <p>En plus de votre diplôme, vous aurez l'opportunité de préparer des certifications reconnues internationalement :</p>
                <ul class="list-custom mt-4">
                    <li><i class="fas fa-certificate text-accent"></i> Bloomberg Market Concepts (BMC)</li>
                    <li><i class="fas fa-certificate text-accent"></i> AMF (certification des professionnels de la finance)</li>
                    <li><i class="fas fa-certificate text-accent"></i> Certification EFF (Économie Financière et FinTech)</li>
                    <li><i class="fas fa-certificate text-accent"></i> CFA Level 1 (préparation)</li>
                </ul>
            </div>
            <div class="col-lg-6">
                <div class="card-info text-center" style="border-left: none; background: linear-gradient(135deg, rgba(32,83,151,0.05), rgba(74,144,226,0.05));">
                    <i class="fas fa-chart-line" style="font-size: 3rem; color: var(--color-accent); margin-bottom: 20px;"></i>
                    <h4 class="fw-bold">Salle de trading virtuelle</h4>
                    <p class="text-muted">Accès à une plateforme de simulation financière et aux données Bloomberg</p>
                    <div style="margin-top: 20px;">
                        <span class="skill-tag">Bloomberg Terminal</span>
                        <span class="skill-tag">Reuters Eikon</span>
                        <span class="skill-tag">MetaTrader</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- DÉBOUCHÉS -->
<section class="section-padding bg-light">
    <div class="container">
        <h2 class="section-title text-center">Débouchés professionnels</h2>
        <p class="text-center section-subtitle">À l'issue de cette formation, de nombreuses opportunités s'offrent à vous</p>
        
        <div class="row g-4 mt-4">
            <div class="col-md-4">
                <div class="card-info text-center" style="border-left: none; border-top: 5px solid var(--color-accent);">
                    <div class="info-icon mx-auto">
                        <i class="fas fa-user-tie"></i>
                    </div>
                    <h4 class="fw-bold mt-3">Chargé de clientèle bancaire</h4>
                    <p class="text-muted">Conseil et gestion de portefeuille clients particuliers/professionnels</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card-info text-center" style="border-left: none; border-top: 5px solid var(--color-accent);">
                    <div class="info-icon mx-auto">
                        <i class="fas fa-chart-bar"></i>
                    </div>
                    <h4 class="fw-bold mt-3">Analyste financier</h4>
                    <p class="text-muted">Évaluation d'entreprises, recommandations d'investissement</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card-info text-center" style="border-left: none; border-top: 5px solid var(--color-accent);">
                    <div class="info-icon mx-auto">
                        <i class="fas fa-briefcase"></i>
                    </div>
                    <h4 class="fw-bold mt-3">Gestionnaire de portefeuille</h4>
                    <p class="text-muted">Optimisation et gestion d'actifs financiers</p>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card-info text-center" style="border-left: none; border-top: 5px solid var(--color-accent);">
                    <div class="info-icon mx-auto">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <h4 class="fw-bold mt-3">Risk Manager</h4>
                    <p class="text-muted">Gestion et couverture des risques financiers</p>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card-info text-center" style="border-left: none; border-top: 5px solid var(--color-accent);">
                    <div class="info-icon mx-auto">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <h4 class="fw-bold mt-3">Responsable financier</h4>
                    <p class="text-muted">Direction administrative et financière d'entreprise</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- SECTEURS D'ACTIVITÉ -->
<section class="section-padding">
    <div class="container">
        <div class="row g-5 align-items-center">
            <div class="col-lg-7">
                <h2 class="section-title">Secteurs d'activité</h2>
                <p>Les diplômés de ce master sont recherchés dans de nombreux secteurs :</p>
                <ul class="list-custom mt-4">
                    <li><i class="fas fa-check-circle"></i> Banques commerciales et d'investissement</li>
                    <li><i class="fas fa-check-circle"></i> Sociétés de gestion d'actifs</li>
                    <li><i class="fas fa-check-circle"></i> Compagnies d'assurance</li>
                    <li><i class="fas fa-check-circle"></i> Cabinets de conseil financier</li>
                    <li><i class="fas fa-check-circle"></i> Fintech et néobanques</li>
                    <li><i class="fas fa-check-circle"></i> Services financiers des entreprises</li>
                </ul>
            </div>
            <div class="col-lg-5">
                <div class="card-info text-center" style="border-left: none; background: white;">
                    <i class="fas fa-globe-africa" style="font-size: 3rem; color: var(--color-accent); margin-bottom: 20px;"></i>
                    <h4 class="fw-bold">Débouchés internationaux</h4>
                    <p class="text-muted">Opportunités dans les centres financiers africains (Douala, Abidjan, Dakar) et européens (Paris, Londres, Genève)</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- PIÈCES À FOURNIR + CONDITIONS -->
<section class="section-padding bg-light">
    <div class="container">
        <div class="row g-5">
            <div class="col-lg-6">
                <h2 class="section-title">Conditions d'admission</h2>
                <div class="card-info" style="background: white;">
                    <ul class="list-custom">
                        <li><i class="fas fa-check-circle"></i> Être titulaire d'une Licence (BAC+3) en Gestion, Économie, Finance ou équivalent</li>
                        <li><i class="fas fa-check-circle"></i> Avoir de bonnes bases en comptabilité et mathématiques financières</li>
                        <li><i class="fas fa-check-circle"></i> Admission sur dossier (relevés de notes, CV, lettre de motivation)</li>
                        <li><i class="fas fa-check-circle"></i> Entretien de motivation avec le jury</li>
                    </ul>
                </div>
            </div>
            
            <div class="col-lg-6">
                <h2 class="section-title">Pièces à fournir</h2>
                <div class="card-info" style="background: white;">
                    <ul class="list-custom">
                        <li><i class="fas fa-file-signature"></i> Fiche d'inscription à retirer au secrétariat</li>
                        <li><i class="fas fa-certificate"></i> Copie de l'attestation de Licence ou diplôme équivalent</li>
                        <li><i class="fas fa-scroll"></i> Relevés de notes des années de Licence</li>
                        <li><i class="fas fa-heartbeat"></i> Certificat médical de moins de 3 mois</li>
                        <li><i class="fas fa-baby"></i> Copie de l'acte de naissance</li>
                        <li><i class="fas fa-portrait"></i> Deux photos d'identité récentes</li>
                        <li><i class="fas fa-id-card"></i> Copie de la carte d'identité ou passeport</li>
                        <li><i class="fas fa-envelope"></i> Lettre de motivation et CV</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>


<!-- CTA FINAL -->
<section 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 à réussir dans le monde de la finance ?</h2>
        <p style="font-size: 1.1rem; max-width: 700px; margin: 0 auto 35px; opacity: 0.9;">Rejoignez notre programme de Master et construisez votre carrière dans la banque et la finance</p>
        <div style="display: flex; gap: 20px; justify-content: center; flex-wrap: wrap;">
            <a href="#" style="display: inline-flex; align-items: center; gap: 10px; background: transparent; border: 2px solid white; color: white; padding: 15px 40px; border-radius: 50px; text-decoration: none; font-weight: 600; transition: all 0.3s ease;">
                <i class="fas fa-calendar-alt"></i> S'inscrire maintenant
            </a>
        </div>
    </div>
</section>

{% endblock %}