{% 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;
    }

    body {
        font-family: var(--font-main);
        background-color: #ffffff;
        overflow-x: hidden;
    }

    /* --- 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.pexels.com/photos/5428846/pexels-photo-5428846.jpeg?auto=compress&cs=tinysrgb&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-bts {
        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-bts { 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-bts { font-size: 2rem; }
    }

    @media (max-width: 576px) {
        .title-bts { 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 {
        width: 100%;
        margin-bottom: 1rem;
        border-collapse: collapse;
    }

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

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

    .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; }
        .stat-number { font-size: 2.5rem; }
        .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-desktop" style="margin-right: 8px;"></i> Sciences et Technologies
                <span class="badge-niveau">BAC+2</span>
            </div>
            <h1 class="title-bts">BTS<br>Maintenance Informatique</h1>
            <div class="red-bar-hero"></div>
            <p class="mt-3 text-muted" style="font-size: 0.9rem;">Brevet de Technicien Supérieur</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">BTS Maintenance Informatique</p>
                <p>Cette formation prépare les étudiants à assurer l'installation, la maintenance et le dépannage des équipements et systèmes informatiques. Le programme allie théorie et pratique pour former des techniciens polyvalents et opérationnels.</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 techniciens supérieurs capables de :</p>
                    <ul class="list-custom">
                        <li><i class="fas fa-check-circle"></i> Diagnostiquer et réparer les pannes informatiques</li>
                        <li><i class="fas fa-check-circle"></i> Assurer la maintenance des ordinateurs et serveurs</li>
                        <li><i class="fas fa-check-circle"></i> Installer et configurer les systèmes d'exploitation</li>
                        <li><i class="fas fa-check-circle"></i> Gérer les réseaux locaux d'entreprise</li>
                        <li><i class="fas fa-check-circle"></i> Fournir un support technique aux utilisateurs</li>
                    </ul>
                </div>

                <div class="mt-4">
                    <h4 class="fw-bold mb-3"><i class="fas fa-shield-alt text-primary me-2"></i> Compétences acquises</h4>
                    <div>
                        <span class="skill-tag">Diagnostic des pannes informatiques</span>
                        <span class="skill-tag">Maintenance des ordinateurs et serveurs</span>
                        <span class="skill-tag">Installation des systèmes d'exploitation</span>
                        <span class="skill-tag">Configuration réseau de base</span>
                        <span class="skill-tag">Support technique utilisateurs</span>
                        <span class="skill-tag">Virtualisation</span>
                        <span class="skill-tag">Sécurité informatique</span>
                    </div>
                </div>

                <div class="mt-4">
                    <h4 class="fw-bold mb-3"><i class="fas fa-microchip text-primary me-2"></i> Technologies utilisées</h4>
                    <div>
                        <span class="skill-tag">Windows / Linux</span>
                        <span class="skill-tag">Outils de diagnostic matériel</span>
                        <span class="skill-tag">Maintenance des réseaux locaux</span>
                        <span class="skill-tag">Virtualisation (VMware/VirtualBox)</span>
                        <span class="skill-tag">Active Directory</span>
                        <span class="skill-tag">Outils de sauvegarde</span>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-5">
                <div class="card-info">
                    <div class="info-icon">
                        <i class="fas fa-desktop"></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>
                    <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">385 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 BTS</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">1ère Année</button>
                    </li>
                    <li class="nav-item">
                        <button class="nav-link fw-bold" data-bs-toggle="tab" data-bs-target="#year2">2ème Année</button>
                    </li>
                </ul>
                
                <div class="tab-content bg-white p-4 rounded shadow-sm">
                    <!-- 1ère Année -->
                    <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>MTI101</td><td>Architecture des ordinateurs</td><td>F</td><td>6</td></tr>
                                    <tr><td>MTI102</td><td>Systèmes d'exploitation (Windows/Linux)</td><td>F</td><td>6</td></tr>
                                    <tr><td>MTI103</td><td>Réseaux informatiques (TCP/IP)</td><td>F</td><td>4</td></tr>
                                    <tr><td>MTI104</td><td>Maintenance matérielle et diagnostic</td><td>F</td><td>4</td></tr>
                                    <tr><td>MTI105</td><td>Anglais technique</td><td>F</td><td>3</td></tr>
                                    <tr><td>MTI106</td><td>Bureautique avancée</td><td>T</td><td>4</td></tr>
                                    <tr><td>MTI107</td><td>Électronique fondamentale</td><td>T</td><td>3</td></tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                    <!-- 2ème Année -->
                    <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>MTI201</td><td>Maintenance des serveurs et virtualisation</td><td>F</td><td>6</td></tr>
                                    <tr><td>MTI202</td><td>Administration réseau (Cisco)</td><td>F</td><td>6</td></tr>
                                    <tr><td>MTI203</td><td>Sécurité des systèmes</td><td>F</td><td>4</td></tr>
                                    <tr><td>MTI204</td><td>Base de données et sauvegarde</td><td>F</td><td>4</td></tr>
                                    <tr><td>MTI205</td><td>Projet technique</td><td>S</td><td>4</td></tr>
                                    <tr><td>MTI206</td><td>Stage professionnel (8-10 semaines)</td><td>S</td><td>6</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 dans le domaine de la maintenance informatique :</p>
                <ul class="list-custom mt-4">
                    <li><i class="fas fa-certificate text-accent"></i> CompTIA A+ (Maintenance PC)</li>
                    <li><i class="fas fa-certificate text-accent"></i> CompTIA Network+</li>
                    <li><i class="fas fa-certificate text-accent"></i> Microsoft Certified: Windows Server</li>
                    <li><i class="fas fa-certificate text-accent"></i> Linux Essentials</li>
                    <li><i class="fas fa-certificate text-accent"></i> Certification Cisco CCNA</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-tools" style="font-size: 3rem; color: var(--color-accent); margin-bottom: 20px;"></i>
                    <h4 class="fw-bold">Labo de maintenance</h4>
                    <p class="text-muted">Accès à un atelier équipé pour la formation pratique</p>
                    <div style="margin-top: 20px;">
                        <span class="skill-tag">Postes de démontage</span>
                        <span class="skill-tag">Outils de diagnostic</span>
                        <span class="skill-tag">Matériel de test</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-screwdriver-wrench"></i>
                    </div>
                    <h4 class="fw-bold mt-3">Technicien maintenance informatique</h4>
                    <p class="text-muted">Dépannage et réparation de matériels</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-headset"></i>
                    </div>
                    <h4 class="fw-bold mt-3">Support technique</h4>
                    <p class="text-muted">Assistance et hotline utilisateurs</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-server"></i>
                    </div>
                    <h4 class="fw-bold mt-3">Assistant administrateur réseau</h4>
                    <p class="text-muted">Gestion des infrastructures réseau</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-user"></i>
                    </div>
                    <h4 class="fw-bold mt-3">Technicien systèmes</h4>
                    <p class="text-muted">Installation et maintenance de 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-building"></i>
                    </div>
                    <h4 class="fw-bold mt-3">Technicien SAV</h4>
                    <p class="text-muted">Service après-vente en 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 BTS sont recherchés dans de nombreux secteurs :</p>
                <ul class="list-custom mt-4">
                    <li><i class="fas fa-check-circle"></i> SSII et sociétés de services informatiques</li>
                    <li><i class="fas fa-check-circle"></i> Services informatiques des entreprises</li>
                    <li><i class="fas fa-check-circle"></i> Magasins de vente et réparation informatique</li>
                    <li><i class="fas fa-check-circle"></i> Administrations publiques</li>
                    <li><i class="fas fa-check-circle"></i> Centres d'appels et helpdesk</li>
                    <li><i class="fas fa-check-circle"></i> Indépendant / Auto-entrepreneur</li>
                </ul>
            </div>
            <div class="col-lg-5">
                <div class="card-info text-center" style="border-left: none; background: white;">
                    <i class="fas fa-graduation-cap" style="font-size: 3rem; color: var(--color-accent); margin-bottom: 20px;"></i>
                    <h4 class="fw-bold">Poursuites d'études</h4>
                    <p class="text-muted">Licence Systèmes et Réseaux Informatiques<br>
                    Bachelor Développement d'Applications<br>
                    Certification CompTIA A+ / Network+ avancée</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'un BAC (série C, D, E, F2, F3, F4) ou équivalent</li>
                        <li><i class="fas fa-check-circle"></i> Avoir de bonnes bases en mathématiques et physique</li>
                        <li><i class="fas fa-check-circle"></i> Intérêt pour l'informatique et les technologies</li>
                        <li><i class="fas fa-check-circle"></i> Admission sur dossier et entretien</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 du BAC ou diplôme équivalent</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>
                    </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 à rejoindre la formation ?</h2>
        <p style="font-size: 1.1rem; max-width: 700px; margin: 0 auto 35px; opacity: 0.9;">Inscrivez-vous dès maintenant pour devenir un expert en maintenance informatique</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>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

{% endblock %}