{% 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-1555066931-4365d14bab8c?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);
    }
</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-microchip" style="margin-right: 8px;"></i> Sciences et Technologies
                <span class="badge-niveau">BAC+5</span>
            </div>
            <h1 class="title-master">Master Professionnel<br>en Système<br>Informatique et Logiciel</h1>
            <div class="red-bar-hero"></div>
            <p class="mt-3 text-muted" style="font-size: 0.9rem;">Mention : Sciences de l'ingénieur</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 Système Informatique et Logiciel</p>
                <p>Ce master forme des ingénieurs capables de concevoir, développer et maintenir des systèmes informatiques complexes ainsi que des logiciels performants et sécurisés. La formation allie théorie approfondie et pratique intensive sur des projets concrets.</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 systèmes informatiques capables de :</p>
                    <ul class="list-custom">
                        <li><i class="fas fa-check-circle"></i> Concevoir des architectures logicielles robustes</li>
                        <li><i class="fas fa-check-circle"></i> Développer des applications complexes et sécurisées</li>
                        <li><i class="fas fa-check-circle"></i> Maîtriser les méthodologies de génie logiciel</li>
                        <li><i class="fas fa-check-circle"></i> Déployer des solutions cloud et DevOps</li>
                        <li><i class="fas fa-check-circle"></i> Manager des projets de développement</li>
                    </ul>
                </div>

                <div class="mt-4">
                    <h4 class="fw-bold mb-3"><i class="fas fa-code text-primary me-2"></i> Compétences acquises</h4>
                    <div>
                        <span class="skill-tag">Architecture logicielle</span>
                        <span class="skill-tag">Développement full-stack</span>
                        <span class="skill-tag">Génie logiciel (UML, Design Patterns)</span>
                        <span class="skill-tag">Cloud computing (AWS, Azure)</span>
                        <span class="skill-tag">DevOps et CI/CD</span>
                        <span class="skill-tag">Bases de données avancées</span>
                        <span class="skill-tag">Sécurité des systèmes</span>
                        <span class="skill-tag">Virtualisation et conteneurs</span>
                    </div>
                </div>

                <div class="mt-4">
                    <h4 class="fw-bold mb-3"><i class="fas fa-tools text-primary me-2"></i> Technologies utilisées</h4>
                    <div>
                        <span class="skill-tag">Python / Django</span>
                        <span class="skill-tag">Java / Spring Boot</span>
                        <span class="skill-tag">Docker / Kubernetes</span>
                        <span class="skill-tag">Git / GitLab CI-CD</span>
                        <span class="skill-tag">React / Angular</span>
                        <span class="skill-tag">MongoDB / PostgreSQL</span>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-5">
                <div class="card-info">
                    <div class="info-icon">
                        <i class="fas fa-laptop-code"></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 technique</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>SIL101</td><td>Architecture logicielle avancée</td><td>F</td><td>6</td></tr>
                                    <tr><td>SIL102</td><td>Programmation orientée objet avancée (Java)</td><td>F</td><td>6</td></tr>
                                    <tr><td>SIL103</td><td>Bases de données avancées (NoSQL, optimisation)</td><td>F</td><td>4</td></tr>
                                    <tr><td>SIL104</td><td>Génie logiciel (UML, Design Patterns)</td><td>F</td><td>4</td></tr>
                                    <tr><td>SIL105</td><td>Développement web full-stack (Django/React)</td><td>F</td><td>3</td></tr>
                                    <tr><td>SIL106</td><td>Anglais technique</td><td>F</td><td>3</td></tr>
                                    <tr><td>SIL107</td><td>Gestion de projet informatique</td><td>C</td><td>2</td></tr>
                                    <tr><td>SIL108</td><td>Projet de développement</td><td>S</td><td>2</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>SIL201</td><td>Cloud computing et Virtualisation (Docker/K8s)</td><td>F</td><td>6</td></tr>
                                    <tr><td>SIL202</td><td>DevOps et CI/CD</td><td>F</td><td>6</td></tr>
                                    <tr><td>SIL203</td><td>Sécurité des systèmes informatiques</td><td>F</td><td>4</td></tr>
                                    <tr><td>SIL204</td><td>Architectures microservices</td><td>F</td><td>4</td></tr>
                                    <tr><td>SIL205</td><td>Intelligence artificielle et大数据</td><td>F</td><td>3</td></tr>
                                    <tr><td>SIL206</td><td>Stage professionnel (4 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> AWS Certified Developer</li>
                    <li><i class="fas fa-certificate text-accent"></i> Certified Kubernetes Administrator (CKA)</li>
                    <li><i class="fas fa-certificate text-accent"></i> Oracle Certified Professional (Java)</li>
                    <li><i class="fas fa-certificate text-accent"></i> Scrum Master Certification</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-cloud" style="font-size: 3rem; color: var(--color-accent); margin-bottom: 20px;"></i>
                    <h4 class="fw-bold">Labo DevOps & Cloud</h4>
                    <p class="text-muted">Accès à des infrastructures cloud et environnements de conteneurisation</p>
                    <div style="margin-top: 20px;">
                        <span class="skill-tag">AWS Academy</span>
                        <span class="skill-tag">Docker Playground</span>
                        <span class="skill-tag">GitHub Actions</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-code"></i>
                    </div>
                    <h4 class="fw-bold mt-3">Ingénieur logiciel</h4>
                    <p class="text-muted">Conception et développement d'applications complexes</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-project-diagram"></i>
                    </div>
                    <h4 class="fw-bold mt-3">Architecte systèmes</h4>
                    <p class="text-muted">Design d'architectures logicielles scalables</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-cloud-upload-alt"></i>
                    </div>
                    <h4 class="fw-bold mt-3">DevOps Engineer</h4>
                    <p class="text-muted">Automatisation et déploiement continu</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">Expert en sécurité logicielle</h4>
                    <p class="text-muted">Sécurisation des applications et des systèmes</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-chalkboard-teacher"></i>
                    </div>
                    <h4 class="fw-bold mt-3">Chef de projet technique</h4>
                    <p class="text-muted">Management d'équipes de développement</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> SSII et ESN (entreprises de services numériques)</li>
                    <li><i class="fas fa-check-circle"></i> Éditeurs de logiciels</li>
                    <li><i class="fas fa-check-circle"></i> Banques et assurances</li>
                    <li><i class="fas fa-check-circle"></i> Télécommunications</li>
                    <li><i class="fas fa-check-circle"></i> Startups et scaleups tech</li>
                    <li><i class="fas fa-check-circle"></i> Administrations publiques</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 en Europe, Amérique du Nord et Afrique dans le secteur du développement logiciel</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 Informatique, MIAGE ou équivalent</li>
                        <li><i class="fas fa-check-circle"></i> Avoir de solides bases en programmation et algorithmique</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 à devenir un expert en systèmes informatiques ?</h2>
        <p style="font-size: 1.1rem; max-width: 700px; margin: 0 auto 35px; opacity: 0.9;">Rejoignez notre programme de Master et maîtrisez les technologies du futur</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>

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

{% endblock %}