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


<!-- =========================
     🦶 FOOTER PROFESSIONNEL
========================== -->
<footer style="background: linear-gradient(135deg, var(--color-dark) 0%, #2a2a2a 100%); color: var(--color-white); margin-top: auto;">
    <!-- Section principale du footer -->
    <div class="container" style="padding: 60px 0 40px 0;">
        <div class="row g-4">
            <!-- Colonne 1: Logo et description -->
            <div class="col-lg-4 col-md-6">
                <div class="d-flex align-items-center mb-3" style="gap: 12px;">
                    <!-- <div style="width: 50px; height: 50px; background: linear-gradient(135deg, var(--color-primary), var(--color-light-blue)); border-radius: 12px; display: flex; align-items: center; justify-content: center;">
                        <svg width="30" height="30" 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 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>
                        <h3 style="font-weight: 800; font-size: 1.8rem; margin: 0; color: var(--color-white);">ES-ESSIG</h3>
                        <p style="color: var(--color-accent); margin: 0; font-size: 0.8rem; font-weight: 500;">École Supérieure</p>
                    </div>
                </div>
                <p style="color: #b0b0b0; line-height: 1.6; margin-top: 15px;">
                    ES-ESSIG forme les leaders de demain avec des programmes d'excellence et un environnement d'apprentissage innovant.
                </p>
                <!-- Réseaux sociaux -->
                <div class="d-flex gap-3 mt-4">
                    <a href="#" style="width: 38px; height: 38px; background: rgba(255,255,255,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease;" onmouseover="this.style.background='var(--color-primary)'; this.style.transform='translateY(-3px)'" onmouseout="this.style.background='rgba(255,255,255,0.1)'; this.style.transform='translateY(0)'">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="white">
                            <path d="M22 12.07C22 6.5 17.52 2 12 2S2 6.5 2 12.07c0 5.02 3.66 9.18 8.44 9.93v-7.02H7.9v-2.91h2.54V9.67c0-2.52 1.49-3.91 3.77-3.91 1.09 0 2.23.2 2.23.2v2.47h-1.26c-1.24 0-1.63.78-1.63 1.57v1.88h2.78l-.45 2.91h-2.33V22c4.78-.75 8.44-4.91 8.44-9.93z"/>
                        </svg>
                    </a>
                    <a href="#" style="width: 38px; height: 38px; background: rgba(255,255,255,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease;" onmouseover="this.style.background='var(--color-primary)'; this.style.transform='translateY(-3px)'" onmouseout="this.style.background='rgba(255,255,255,0.1)'; this.style.transform='translateY(0)'">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="white">
                            <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 0021.638-12.08c0-.213 0-.425-.015-.637A10.025 10.025 0 0024 4.557z"/>
                        </svg>
                    </a>
                    <a href="#" style="width: 38px; height: 38px; background: rgba(255,255,255,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease;" onmouseover="this.style.background='var(--color-primary)'; this.style.transform='translateY(-3px)'" onmouseout="this.style.background='rgba(255,255,255,0.1)'; this.style.transform='translateY(0)'">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="white">
                            <path d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"/>
                        </svg>
                    </a>
                    <a href="#" style="width: 38px; height: 38px; background: rgba(255,255,255,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease;" onmouseover="this.style.background='var(--color-primary)'; this.style.transform='translateY(-3px)'" onmouseout="this.style.background='rgba(255,255,255,0.1)'; this.style.transform='translateY(0)'">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="white">
                            <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451c.979 0 1.771-.773 1.771-1.729V1.729C24 .774 23.204 0 22.225 0z"/>
                        </svg>
                    </a>
                </div>
            </div>

            <!-- Colonne 2: Liens rapides -->
            <div class="col-lg-2 col-md-6">
                <h4 style="color: var(--color-white); font-weight: 700; margin-bottom: 25px; position: relative;">
                    Liens Rapides
                    <span style="position: absolute; bottom: -8px; left: 0; width: 40px; height: 3px; background: var(--color-accent);"></span>
                </h4>
                <ul style="list-style: none; padding: 0;">
                    <li style="margin-bottom: 12px;"><a href="#" style="color: #b0b0b0; text-decoration: none; transition: all 0.3s ease;" onmouseover="this.style.color='var(--color-primary)'; this.style.paddingLeft='5px'" onmouseout="this.style.color='#b0b0b0'; this.style.paddingLeft='0'">Accueil</a></li>
                    <li style="margin-bottom: 12px;"><a href="#" style="color: #b0b0b0; text-decoration: none; transition: all 0.3s ease;" onmouseover="this.style.color='var(--color-primary)'; this.style.paddingLeft='5px'" onmouseout="this.style.color='#b0b0b0'; this.style.paddingLeft='0'">À propos</a></li>
                    <li style="margin-bottom: 12px;"><a href="#" style="color: #b0b0b0; text-decoration: none; transition: all 0.3s ease;" onmouseover="this.style.color='var(--color-primary)'; this.style.paddingLeft='5px'" onmouseout="this.style.color='#b0b0b0'; this.style.paddingLeft='0'">Formations</a></li>
                    <li style="margin-bottom: 12px;"><a href="#" style="color: #b0b0b0; text-decoration: none; transition: all 0.3s ease;" onmouseover="this.style.color='var(--color-primary)'; this.style.paddingLeft='5px'" onmouseout="this.style.color='#b0b0b0'; this.style.paddingLeft='0'">Blog</a></li>
                    <li style="margin-bottom: 12px;"><a href="#" style="color: #b0b0b0; text-decoration: none; transition: all 0.3s ease;" onmouseover="this.style.color='var(--color-primary)'; this.style.paddingLeft='5px'" onmouseout="this.style.color='#b0b0b0'; this.style.paddingLeft='0'">Vie estudiantine</a></li>
                    <li style="margin-bottom: 12px;"><a href="#" style="color: #b0b0b0; text-decoration: none; transition: all 0.3s ease;" onmouseover="this.style.color='var(--color-primary)'; this.style.paddingLeft='5px'" onmouseout="this.style.color='#b0b0b0'; this.style.paddingLeft='0'">Contact</a></li>
                </ul>
            </div>

            <!-- Colonne 3: Formations -->
            <div class="col-lg-3 col-md-6">
                <h4 style="color: var(--color-white); font-weight: 700; margin-bottom: 25px; position: relative;">
                    Nos Formations
                    <span style="position: absolute; bottom: -8px; left: 0; width: 40px; height: 3px; background: var(--color-accent);"></span>
                </h4>
                <ul style="list-style: none; padding: 0;">
                    <li style="margin-bottom: 12px;"><a href="#" style="color: #b0b0b0; text-decoration: none; transition: all 0.3s ease;" onmouseover="this.style.color='var(--color-primary)'; this.style.paddingLeft='5px'" onmouseout="this.style.color='#b0b0b0'; this.style.paddingLeft='0'">Licence Professionnelle</a></li>
                    <li style="margin-bottom: 12px;"><a href="#" style="color: #b0b0b0; text-decoration: none; transition: all 0.3s ease;" onmouseover="this.style.color='var(--color-primary)'; this.style.paddingLeft='5px'" onmouseout="this.style.color='#b0b0b0'; this.style.paddingLeft='0'">Master Spécialisé</a></li>
                    <li style="margin-bottom: 12px;"><a href="#" style="color: #b0b0b0; text-decoration: none; transition: all 0.3s ease;" onmouseover="this.style.color='var(--color-primary)'; this.style.paddingLeft='5px'" onmouseout="this.style.color='#b0b0b0'; this.style.paddingLeft='0'">Doctorat</a></li>
                    <li style="margin-bottom: 12px;"><a href="#" style="color: #b0b0b0; text-decoration: none; transition: all 0.3s ease;" onmouseover="this.style.color='var(--color-primary)'; this.style.paddingLeft='5px'" onmouseout="this.style.color='#b0b0b0'; this.style.paddingLeft='0'">Formation Continue</a></li>
                    <li style="margin-bottom: 12px;"><a href="#" style="color: #b0b0b0; text-decoration: none; transition: all 0.3s ease;" onmouseover="this.style.color='var(--color-primary)'; this.style.paddingLeft='5px'" onmouseout="this.style.color='#b0b0b0'; this.style.paddingLeft='0'">Études à Distance</a></li>
                </ul>
            </div>

            <!-- Colonne 4: Contact et horaires -->
            <div class="col-lg-3 col-md-6">
                <h4 style="color: var(--color-white); font-weight: 700; margin-bottom: 25px; position: relative;">
                    Contact
                    <span style="position: absolute; bottom: -8px; left: 0; width: 40px; height: 3px; background: var(--color-accent);"></span>
                </h4>
                <div style="margin-bottom: 20px;">
                    <div class="d-flex gap-3 mb-3">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="var(--color-primary)">
                            <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
                        </svg>
                        <span style="color: #b0b0b0;">123 Avenue de l'École, Dakar, Sénégal</span>
                    </div>
                    <div class="d-flex gap-3 mb-3">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="var(--color-primary)">
                            <path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/>
                        </svg>
                        <span style="color: #b0b0b0;">+221 33 123 45 67</span>
                    </div>
                    <div class="d-flex gap-3 mb-3">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="var(--color-primary)">
                            <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
                        </svg>
                        <span style="color: #b0b0b0;">contact@es-essig.edu</span>
                    </div>
                </div>
                <!-- Horaires -->
                <div style="background: rgba(255,255,255,0.05); padding: 15px; border-radius: 10px;">
                    <p style="margin: 0; color: var(--color-white); font-weight: 600;">Horaires d'ouverture</p>
                    <p style="margin: 5px 0 0 0; color: #b0b0b0; font-size: 0.85rem;">Lun - Ven: 8h00 - 18h00</p>
                    <p style="margin: 0; color: #b0b0b0; font-size: 0.85rem;">Sam: 9h00 - 13h00</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Copyright -->
    <div style="border-top: 1px solid rgba(255,255,255,0.1); padding: 20px 0;">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6 text-center text-md-start">
                    <p style="margin: 0; color: #b0b0b0; font-size: 0.9rem;">
                        &copy; 2024 ES-ESSIG - Tous droits réservés
                    </p>
                </div>
                <div class="col-md-6 text-center text-md-end">
                    <p style="margin: 0; color: #b0b0b0; font-size: 0.85rem;">
                        Conçu avec <span style="color: var(--color-accent);">❤</span> pour l'excellence académique
                    </p>
                </div>
            </div>
        </div>
    </div>
</footer>

<!-- Scroll to top button -->
<button onclick="window.scrollTo({top: 0, behavior: 'smooth'})" style="position: fixed; bottom: 30px; right: 30px; width: 45px; height: 45px; background: var(--color-primary); border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; opacity: 0; visibility: hidden; z-index: 1000;" id="scrollTopBtn" onmouseover="this.style.background='var(--color-accent)'; this.style.transform='translateY(-5px)'" onmouseout="this.style.background='var(--color-primary)'; this.style.transform='translateY(0)'">
    <svg width="24" height="24" viewBox="0 0 24 24" fill="white">
        <path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"/>
    </svg>
</button>

<style>
    /* Animation pour le bouton scroll to top */
    #scrollTopBtn.show {
        opacity: 1;
        visibility: visible;
    }
    
    /* Effet de transition sur les liens */
    footer a {
        transition: all 0.3s ease;
        display: inline-block;
    }
    
    /* Responsive adjustments */
    @media (max-width: 768px) {
        footer .container > .row {
            text-align: center;
        }
        
        footer .d-flex {
            justify-content: center;
        }
        
        h4 span {
            left: 50%;
            transform: translateX(-50%);
        }
        
        h4 {
            text-align: center;
        }
    }
</style>

<script>
    // Scroll to top button visibility
    window.addEventListener('scroll', function() {
        const scrollBtn = document.getElementById('scrollTopBtn');
        if (window.scrollY > 300) {
            scrollBtn.classList.add('show');
        } else {
            scrollBtn.classList.remove('show');
        }
    });
</script>