{% load static %}

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
  <title>ESSIG - École Supérieure des Sciences de l'Ingénierie et de la Gestion à Lomé</title>

  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=Playfair+Display:wght@700;900&display=swap" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">

  <style>
  /* ─── VARIABLES ─────────────────────────────── */
  :root {
    --primary:    #205397;
    --accent:     #e90707;
    --dark:       #0f1923;
    --light-blue: #4A90E2;
    --white:      #ffffff;
    --gray:       #6c757d;
    --bg-nav:     #ffffff;
    --font-b: 'DM Sans', sans-serif;
    --font-d: 'Playfair Display', serif;
    --nav-h: 76px;
    --easing: cubic-bezier(.4,0,.2,1);
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: var(--font-b); background: #f0f4f9; }

  /* ─── BARRE SUPÉRIEURE ───────────────────────── */
  .topbar {
    background: var(--primary);
    color: rgba(255,255,255,.75);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .03em;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .topbar-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }
  .topbar-left { display: flex; gap: 1.6rem; align-items: center; }
  .topbar-left span { display: flex; align-items: center; gap: 5px; }
  .topbar-left span i { font-size: 11px; color: rgba(255,255,255,.45); }
  .topbar-right { display: flex; gap: 1rem; align-items: center; }
  .topbar-social {
    display: flex; gap: .5rem;
  }
  .topbar-social a {
    width: 24px; height: 24px;
    background: rgba(255,255,255,.1);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.7); font-size: 11px;
    text-decoration: none;
    transition: background .2s, color .2s;
  }
  .topbar-social a:hover { background: var(--accent); color: #fff; }

  /* ─── HEADER PRINCIPAL ───────────────────────── */
  .header {
    background: var(--bg-nav);
    position: sticky;
    top: 0;
    z-index: 1000;
    /* Ligne déco rouge en bas */
    border-bottom: 3px solid transparent;
    transition: border-color .3s, box-shadow .3s;
  }
  .header.scrolled {
    box-shadow: 0 6px 32px rgba(15,25,35,.12);
    border-bottom-color: var(--accent);
  }

  /* Trait accentué gauche du header — touche signature */
  .header::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(to bottom, var(--accent), var(--primary));
    border-radius: 0 2px 2px 0;
  }

  .nav-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem 0 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    height: var(--nav-h);
  }

  /* ─── LOGO ───────────────────────────────────── */
  .logo-area {
    display: flex;
    align-items: center;
    gap: .75rem;
    text-decoration: none;
    flex-shrink: 0;
    padding: 6px 10px;
    border-radius: 10px;
    transition: background .25s;
    position: relative;
  }
  .logo-area:hover { background: rgba(32,83,151,.06); }
  .logo-area img {
    height: 52px;
    width: auto;
    object-fit: contain;
    display: block;
    transition: transform .3s var(--easing);
  }
  .logo-area:hover img { transform: scale(1.05); }

  /* ─── NAV MENU ───────────────────────────────── */
  .nav-menu {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    height: 100%;
  }

  .nav-links {
    display: flex;
    gap: 0;
    list-style: none;
    align-items: center;
    margin: 0; padding: 0;
    height: 100%;
  }

  .nav-links li {
    display: flex;
    align-items: center;
    height: 100%;
    position: relative;
  }

  /* Lien nav de base */
  .nav-links li > a {
    color: var(--dark);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .01em;
    padding: 0 1rem;
    height: 100%;
    display: flex;
    align-items: center;
    gap: .3rem;
    white-space: nowrap;
    position: relative;
    transition: color .25s;
  }

  /* Indicateur soulignement bas — trait rouge animé */
  .nav-links li > a::after {
    content: '';
    position: absolute;
    bottom: -3px; /* sous la bordure du header */
    left: 50%; right: 50%;
    height: 3px;
    background: var(--accent);
    border-radius: 2px 2px 0 0;
    transition: left .3s var(--easing), right .3s var(--easing);
  }

  .nav-links li > a:hover,
  .nav-links li > a.active {
    color: var(--primary);
  }

  .nav-links li > a:hover::after,
  .nav-links li > a.active::after {
    left: .75rem;
    right: .75rem;
  }

  /* Flèche formations */
  .mega-toggle-arrow {
    font-size: .65rem;
    transition: transform .3s var(--easing);
    color: var(--gray);
    display: inline-block;
  }
  .mega-menu-item:hover .mega-toggle-arrow { transform: rotate(180deg); color: var(--accent); }

  /* ─── MEGA MENU ── Desktop ───────────────────── */
  @media (min-width: 969px) {
    .mega-menu-item { position: static !important; }

    .mega-menu-dropdown {
      position: absolute;
      top: 100%;
      left: 0; right: 0;
      width: 100%;
      background: var(--white);
      border-top: 3px solid var(--accent);
      border-radius: 0 0 16px 16px;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-8px);
      transition: opacity .28s var(--easing), transform .28s var(--easing), visibility .28s;
      z-index: 999;
      box-shadow: 0 24px 56px rgba(15,25,35,.13);
    }

    .mega-menu-item:hover .mega-menu-dropdown {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
  }

  .mega-menu-shell {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2.5rem 2rem;
  }

  .mega-menu-content {
    display: flex;
    gap: 3rem;
  }

  .mega-menu-left { flex: 1.6; }
  .mega-menu-right { flex: 1; }

  .mega-kicker {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 700;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: .75rem;
  }
  .mega-kicker::before {
    content: '';
    width: 20px; height: 2px;
    background: var(--accent);
    border-radius: 2px;
  }

  .mega-menu-left h3 {
    font-family: var(--font-d);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1.2;
    margin-bottom: .6rem;
  }

  .mega-menu-left > p {
    color: var(--gray);
    font-size: .9rem;
    line-height: 1.65;
    margin-bottom: 1.5rem;
  }

  .mega-programs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
  }

  .mega-card {
    display: block;
    padding: 1rem 1.1rem;
    background: #f8fafd;
    border-radius: 10px;
    text-decoration: none;
    border: 1px solid #e8edf5;
    border-left: 3px solid transparent;
    transition: all .25s var(--easing);
    position: relative;
    overflow: hidden;
  }
  .mega-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(32,83,151,.04), transparent);
    opacity: 0;
    transition: opacity .25s;
  }
  .mega-card:hover {
    background: #fff;
    border-left-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(32,83,151,.1);
  }
  .mega-card:hover::before { opacity: 1; }

  .mega-card-icon {
    width: 34px; height: 34px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--primary), var(--light-blue));
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 15px;
    margin-bottom: .6rem;
    flex-shrink: 0;
  }

  .mega-card-title {
    display: block;
    font-size: .95rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: .25rem;
  }

  .mega-card-text {
    display: block;
    font-size: .8rem;
    color: var(--gray);
    line-height: 1.45;
  }

  /* Panneau droit du mega menu */
  .mega-visual {
    border-radius: 14px;
    overflow: hidden;
    height: 100%;
    min-height: 260px;
    position: relative;
    background: linear-gradient(135deg, var(--primary), #1a3d75);
  }
  .mega-visual img {
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: .45;
    display: block;
  }
  .mega-visual-overlay {
    position: absolute;
    inset: 0;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  .mega-visual-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--accent);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .3rem .8rem;
    border-radius: 20px;
    width: fit-content;
    margin-bottom: .75rem;
  }
  .mega-visual-overlay h4 {
    font-family: var(--font-d);
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    margin-bottom: .5rem;
  }
  .mega-visual-overlay p {
    font-size: .82rem;
    color: rgba(255,255,255,.7);
    line-height: 1.5;
    margin-bottom: 1rem;
  }
  .mega-cta-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.25);
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
    padding: .5rem 1rem;
    border-radius: 30px;
    text-decoration: none;
    width: fit-content;
    transition: background .25s;
  }
  .mega-cta-link:hover { background: rgba(255,255,255,.28); color: #fff; }

  /* ─── BOUTON POSTULER ────────────────────────── */
  .btn-postuler {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--accent);
    color: #fff;
    padding: .6rem 1.4rem;
    border-radius: 50px;
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-decoration: none;
    white-space: nowrap;
    transition: background .25s, transform .25s, box-shadow .25s;
    box-shadow: 0 4px 18px rgba(233,7,7,.28);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
  }
  .btn-postuler::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.15), transparent);
    opacity: 0;
    transition: opacity .25s;
  }
  .btn-postuler:hover {
    background: #c70505;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(233,7,7,.38);
  }
  .btn-postuler:hover::before { opacity: 1; }
  .btn-postuler i { font-size: .85rem; }

  /* ─── BURGER ─────────────────────────────────── */
  .burger-menu {
    display: none;
    cursor: pointer;
    background: none;
    border: 2px solid rgba(32,83,151,.15);
    border-radius: 8px;
    padding: .45rem .6rem;
    z-index: 1001;
    align-items: center;
    justify-content: center;
    transition: border-color .25s, background .25s;
  }
  .burger-menu:hover {
    border-color: var(--primary);
    background: rgba(32,83,151,.05);
  }
  .burger-icon { font-size: 1.4rem; color: var(--primary); display: inline-block; }
  .close-icon  { font-size: 1.4rem; color: var(--white);   display: none; }

  /* ─── OVERLAY MOBILE ─────────────────────────── */
  .overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10,20,35,.55);
    backdrop-filter: blur(3px);
    z-index: 999;
  }
  .overlay.active { display: block; }

  /* ─── MOBILE ─────────────────────────────────── */
  @media (max-width: 968px) {
    .topbar { display: none; }

    .header::before { width: 3px; }

    .nav-container { padding: 0 1.25rem 0 1.5rem; }

    .burger-menu { display: flex; }

    .nav-menu {
      position: fixed;
      top: 0; right: -100%;
      width: min(85%, 400px);
      height: 100vh;
      background: var(--primary);
      flex-direction: column;
      justify-content: flex-start;
      align-items: stretch;
      padding: 5rem 1.75rem 2rem;
      transition: right .4s cubic-bezier(.68,-.55,.265,1.55);
      box-shadow: -8px 0 40px rgba(10,20,35,.35);
      z-index: 1000;
      overflow-y: auto;
      gap: 0;
    }

    /* Trait déco dans le sidebar mobile */
    .nav-menu::before {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 3px; height: 100%;
      background: linear-gradient(to bottom, var(--accent), transparent);
    }

    .nav-menu.active { right: 0; }

    .nav-links {
      flex-direction: column;
      width: 100%;
      gap: 0;
      height: auto;
      margin-bottom: 2rem;
    }

    .nav-links li {
      width: 100%;
      height: auto;
      border-bottom: 1px solid rgba(255,255,255,.1);
      flex-direction: column;
      align-items: flex-start;
    }

    .nav-links li > a {
      display: flex;
      align-items: center;
      gap: .5rem;
      padding: .9rem 0;
      font-size: 1rem;
      color: rgba(255,255,255,.85);
      height: auto;
      width: 100%;
      transition: color .2s, padding-left .2s;
    }

    .nav-links li > a::after { display: none; }

    .nav-links li > a:hover,
    .nav-links li > a.active {
      color: #fff;
      padding-left: .4rem;
    }

    /* Indicateur actif mobile : petite puce rouge à gauche */
    .nav-links li > a.active::before {
      content: '';
      position: absolute;
      left: -1.75rem;
      width: 3px; height: 60%;
      background: var(--accent);
      border-radius: 2px;
    }

    .mega-menu-dropdown { display: none !important; }
    .mega-toggle-arrow  { display: none; }

    .btn-postuler {
      margin-top: .5rem;
      width: 100%;
      justify-content: center;
      background: #fff;
      color: var(--accent) !important;
      padding: .9rem 1rem;
      font-size: 1rem;
      box-shadow: none;
    }
    .btn-postuler::before { display: none; }
    .btn-postuler:hover { background: #fff; box-shadow: 0 4px 18px rgba(255,255,255,.2); transform: none; }
  }

  @media (max-width: 600px) {
    .nav-container { height: 64px; }
    .logo-area img { height: 44px; }
  }
  </style>
</head>

<body>

  <!-- ─── TOPBAR ─────────────────────────────────── -->
  <div class="topbar">
    <div class="topbar-inner">
      <div class="topbar-left">
        <span><i class="bi bi-telephone-fill"></i>+228 71 19 05 05</span>
        <span><i class="bi bi-envelope-fill"></i>info@essig.tg</span>
        <span><i class="bi bi-geo-alt-fill"></i>Lomé, Togo</span>
      </div>
      <div class="topbar-right">
        <div class="topbar-social">
          <a href="#" aria-label="Facebook"><i class="bi bi-facebook"></i></a>
          <a href="#" aria-label="Instagram"><i class="bi bi-instagram"></i></a>
          <a href="#" aria-label="LinkedIn"><i class="bi bi-linkedin"></i></a>
          <a href="#" aria-label="YouTube"><i class="bi bi-youtube"></i></a>
        </div>
      </div>
    </div>
  </div>

  <!-- ─── HEADER ──────────────────────────────────── -->
  <header class="header" id="mainHeader">
    <div class="nav-container">

      <!-- LOGO -->
      <a href="{% url 'home' %}" class="logo-area">
        <img src="{% static 'img/logo.jpeg' %}" alt="Logo ESSIG">
      </a>

      <!-- NAV MENU -->
      <div class="nav-menu" id="navMenu">
        <ul class="nav-links">

          <li>
            <a href="{% url 'home' %}"
               class="{% if request.resolver_match.url_name == 'home' %}active{% endif %}">
              <i class="bi bi-house-fill" style="font-size:.8rem;opacity:.6"></i>
              Accueil
            </a>
          </li>

          <li>
            <a href="{% url 'a_propos' %}"
               class="{% if request.resolver_match.url_name == 'a_propos' %}active{% endif %}">
              À propos
            </a>
          </li>

          <!-- MEGA MENU FORMATIONS -->
          <li class="mega-menu-item">
            <a href="{% url 'formations' %}"
               class="mega-menu-toggle {% if request.resolver_match.url_name in 'formations,bts,licence,master,classe_preparatoire' %}active{% endif %}">
              Formations
              <span class="mega-toggle-arrow"><i class="bi bi-chevron-down"></i></span>
            </a>

            <div class="mega-menu-dropdown">
              <div class="mega-menu-shell">
                <div class="mega-menu-content">

                  <!-- GAUCHE -->
                  <div class="mega-menu-left">
                    <span class="mega-kicker">Parcours académiques</span>
                    <h3>Choisissez la formation<br>faite pour vous.</h3>
                    <p>Des cursus professionnalisants pensés pour accompagner chaque profil, du BTS au Master.</p>

                    <div class="mega-programs">

                      <a class="mega-card" href="{% url 'bts' %}">
                        <div class="mega-card-icon"><i class="bi bi-patch-check-fill"></i></div>
                        <span class="mega-card-title">BTS</span>
                        <span class="mega-card-text">Formation professionnalisante, opérationnelle dès la sortie.</span>
                      </a>

                      <a class="mega-card" href="{% url 'licence' %}">
                        <div class="mega-card-icon"><i class="bi bi-mortarboard-fill"></i></div>
                        <span class="mega-card-title">Licence</span>
                        <span class="mega-card-text">Construisez des bases académiques et professionnelles solides.</span>
                      </a>

                      <a class="mega-card" href="{% url 'master' %}">
                        <div class="mega-card-icon"><i class="bi bi-award-fill"></i></div>
                        <span class="mega-card-title">Master</span>
                        <span class="mega-card-text">Spécialisation haut niveau pour accélérer votre leadership.</span>
                      </a>

                      <a class="mega-card" href="{% url 'classe_preparatoire' %}">
                        <div class="mega-card-icon"><i class="bi bi-stars"></i></div>
                        <span class="mega-card-title">Classe Préparatoire</span>
                        <span class="mega-card-text">Mise à niveau solide pour réussir votre entrée en cycle sup.</span>
                      </a>

                    </div>
                  </div>

                  <!-- DROITE visuel -->
                  <div class="mega-menu-right">
                    <div class="mega-visual">
                      <img src="{% static 'img/img1.png' %}" alt="Étudiants ESSIG">
                      <div class="mega-visual-overlay">
                        <span class="mega-visual-tag"><i class="bi bi-geo-alt-fill"></i> Campus ESSIG</span>
                        <h4>Façonnez votre avenir avec ESSIG.</h4>
                        <p>Des formations pensées pour le marché africain et les défis de demain.</p>
                        <a href="{% url 'formations' %}" class="mega-cta-link">
                          Voir toutes les formations <i class="bi bi-arrow-right"></i>
                        </a>
                      </div>
                    </div>
                  </div>

                </div>
              </div>
            </div>
          </li>

          <li>
            <a href="{% url 'blog' %}"
               class="{% if request.resolver_match.url_name == 'blog' %}active{% endif %}">
              Blog
            </a>
          </li>

          <li>
            <a href="{% url 'vie_etudiante' %}"
               class="{% if request.resolver_match.url_name == 'vie_etudiante' %}active{% endif %}">
              Vie estudiantine
            </a>
          </li>

          <li>
            <a href="{% url 'contact' %}"
               class="{% if request.resolver_match.url_name == 'contact' %}active{% endif %}">
              Contact
            </a>
          </li>

        </ul>

        <a href="{% url 'postuler' %}" class="btn-postuler">
          <i class="bi bi-send-fill"></i> Postuler
        </a>
      </div>

      <!-- BURGER -->
      <button class="burger-menu" id="burgerBtn" aria-label="Menu">
        <span class="burger-icon"><i class="bi bi-list"></i></span>
        <span class="close-icon"><i class="bi bi-x-lg"></i></span>
      </button>
    </div>
  </header>

  <!-- OVERLAY MOBILE -->
  <div class="overlay" id="overlay"></div>

  <script>
    /* ── SCROLL : ajoute classe au header ── */
    const header = document.getElementById('mainHeader');
    window.addEventListener('scroll', () => {
      header.classList.toggle('scrolled', window.scrollY > 20);
    }, { passive: true });

    /* ── BURGER MOBILE ── */
    const burgerBtn  = document.getElementById('burgerBtn');
    const navMenu    = document.getElementById('navMenu');
    const overlay    = document.getElementById('overlay');
    const burgerIcon = document.querySelector('.burger-icon');
    const closeIcon  = document.querySelector('.close-icon');
    let isOpen = false;

    function openMenu() {
      navMenu.classList.add('active');
      overlay.classList.add('active');
      burgerIcon.style.display = 'none';
      closeIcon.style.display  = 'inline-flex';
      document.body.style.overflow = 'hidden';
      isOpen = true;
    }

    function closeMenu() {
      navMenu.classList.remove('active');
      overlay.classList.remove('active');
      burgerIcon.style.display = 'inline-flex';
      closeIcon.style.display  = 'none';
      document.body.style.overflow = '';
      isOpen = false;
    }

    burgerBtn.addEventListener('click', () => isOpen ? closeMenu() : openMenu());
    overlay.addEventListener('click', closeMenu);
    document.addEventListener('keydown', e => { if (e.key === 'Escape' && isOpen) closeMenu(); });

    /* Fermer après clic sur un lien (mobile) */
    document.querySelectorAll('.nav-links a, .btn-postuler').forEach(link => {
      link.addEventListener('click', () => {
        if (window.innerWidth <= 968) setTimeout(closeMenu, 120);
      });
    });

    /* Reset si fenêtre agrandie */
    window.addEventListener('resize', () => {
      if (window.innerWidth > 968 && isOpen) {
        closeMenu();
        burgerIcon.style.display = 'inline-flex';
        closeIcon.style.display  = 'none';
      }
    });
  </script>

</body>
</html>