{% load static %} <!-- N'oublie pas cette ligne tout en haut du fichier -->

<!-- =========================
     🧭 BARRE DE NAVIGATION PROFESSIONNELLE
========================== -->
<nav class="navbar navbar-expand-lg sticky-top"
    style="background-color: var(--color-white); box-shadow: 0 2px 15px rgba(0,0,0,0.1);">
    <div class="container">
        <!-- Logo et nom de l'école -->
        <!-- <a class="navbar-brand d-flex align-items-center" href="#" style="gap: 12px;">
            <div class="logo-container" style="width: 45px; height: 45px; background: linear-gradient(135deg, var(--color-primary), var(--color-light-blue)); border-radius: 12px; display: flex; align-items: center; justify-content: center;">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M2 17L12 22L22 17" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M2 12L12 17L22 12" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </div>
            <div>
                <span style="font-family: var(--font-main); font-weight: 800; font-size: 1.5rem; color: var(--color-primary);">ES-ESSIG</span>
                <small style="display: block; font-size: 0.7rem; color: var(--color-accent); font-weight: 500;">École Supérieure</small>
            </div>
        </a> -->

        <a class="navbar-brand d-flex align-items-center" href="{% url 'home' %}" style="gap: 12px;">
            <div class="logo-container"
                style="width: 45px; height: 45px; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center;">
                <!-- Remplacement du SVG par l'image -->
                <img src="{% static 'img/logo.png' %}" alt="Logo ES-ESSIG"
                    style="width: 100%; height: 100%; object-fit: contain;">
            </div>
            <div>
                <span
                    style="font-family: var(--font-main); font-weight: 800; font-size: 1.5rem; color: var(--color-primary);">ES-ESSIG</span>
                <small style="display: block; font-size: 0.7rem; color: var(--color-accent); font-weight: 500;">École
                    Supérieure</small>
            </div>
        </a>

        <!-- Bouton mobile -->
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMain"
            aria-controls="navbarMain" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <!-- Liens de navigation -->
        <div class="collapse navbar-collapse" id="navbarMain">
            <ul class="navbar-nav ms-auto mb-2 mb-lg-0" style="gap: 0.5rem;">
                <li class="nav-item">
                    <a class="nav-link active" href="{% url 'home' %}"
                        style="font-family: var(--font-main); font-weight: 500; color: var(--color-primary); transition: all 0.3s ease; position: relative;">
                        Accueil
                        <span
                            style="position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0%; height: 3px; background: var(--color-accent); transition: width 0.3s ease;"></span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#"
                        style="font-family: var(--font-main); font-weight: 500; color: var(--color-dark); transition: all 0.3s ease;"
                        onmouseover="this.style.color='var(--color-primary)'"
                        onmouseout="this.style.color='var(--color-dark)'">
                        À propos
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'formations' %}"
                        style="font-family: var(--font-main); font-weight: 500; color: var(--color-dark); transition: all 0.3s ease;"
                        onmouseover="this.style.color='var(--color-primary)'"
                        onmouseout="this.style.color='var(--color-dark)'">
                        Formations
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#"
                        style="font-family: var(--font-main); font-weight: 500; color: var(--color-dark); transition: all 0.3s ease;"
                        onmouseover="this.style.color='var(--color-primary)'"
                        onmouseout="this.style.color='var(--color-dark)'">
                        Blog
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#"
                        style="font-family: var(--font-main); font-weight: 500; color: var(--color-dark); transition: all 0.3s ease;"
                        onmouseover="this.style.color='var(--color-primary)'"
                        onmouseout="this.style.color='var(--color-dark)'">
                        Vie étudiante
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#"
                        style="font-family: var(--font-main); font-weight: 500; color: var(--color-dark); transition: all 0.3s ease;"
                        onmouseover="this.style.color='var(--color-primary)'"
                        onmouseout="this.style.color='var(--color-dark)'">
                        Contact
                    </a>
                </li>
            </ul>

            <!-- Bouton CTA -->
            <div class="ms-lg-3 mt-3 mt-lg-0">
                <button class="btn"
                    style="background: linear-gradient(135deg, var(--color-primary), var(--color-light-blue)); color: white; font-family: var(--font-main); font-weight: 600; padding: 8px 24px; border-radius: 50px; transition: transform 0.3s ease;"
                    onmouseover="this.style.transform='translateY(-2px)'"
                    onmouseout="this.style.transform='translateY(0)'">
                    Postuler
                </button>
            </div>
        </div>
    </div>
</nav>

<!-- Style CSS additionnel pour les effets de hover -->
<style>
    /* Animation pour le lien actif */
    .nav-link.active span {
        width: 70% !important;
    }

    /* Effet de hover sur les liens */
    .nav-link {
        position: relative;
        transition: all 0.3s ease !important;
    }

    .nav-link:not(.active):hover {
        transform: translateY(-2px);
    }

    /* Effet de soulignement au hover */
    .nav-link:not(.active)::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 0%;
        height: 3px;
        background: var(--color-accent);
        transition: width 0.3s ease;
    }

    .nav-link:not(.active):hover::after {
        width: 70%;
    }

    /* Responsive adjustments */
    @media (max-width: 991px) {
        .navbar-nav {
            gap: 0.25rem !important;
        }

        .nav-link {
            padding: 10px 0 !important;
        }
    }
</style>

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