<html>
  <head>
    <link href="https://fonts.cdnfonts.com/css/sf-pro-display" rel="stylesheet">
    <title>Institut Mixte de l'Avenir</title>
    <link rel="icon" type="image/x-icon" href="data:image/x-icon;base64," />
    <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
    <script src="components/navbar.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/ScrollTrigger.min.js"></script>
    <script src="https://unpkg.com/scrollreveal"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <style>
      .navbar-fixed {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 50;
        background-color: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(8px);
        border-bottom: 1px solid rgba(238, 238, 238, 0.5);
        box-shadow: 0 2px 20px rgba(0,0,0,0.04);
      }
      .content-wrapper {
        padding-top: 0;
        background: linear-gradient(180deg, #ffffff 0%, #f0f4ff 100%);
      }
      * {
        font-family: 'SF Pro Display', sans-serif;
      }
      .nav-link {
        position: relative;
        transition: color 0.3s ease;
      }
      .nav-link:after {
        content: '';
        position: absolute;
        width: 0;
        height: 2px;
        bottom: -4px;
        left: 50%;
        background: linear-gradient(90deg, #EA2831 0%, #ff6b6b 100%);
        transition: all 0.3s ease;
        transform: translateX(-50%);
      }
      .nav-link:hover:after {
        width: 100%;
      }
      .gradient-card {
        background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
        border: 1px solid rgba(234, 40, 49, 0.1);
      }
      .gradient-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
        border-color: rgba(234, 40, 49, 0.2);
      }
      .hero-section {
        position: relative;
        overflow: hidden;
        background-color: #1a1a1a;
      }
      .hero-content {
        animation: fadeIn 1s ease-out;
      }
      @keyframes fadeIn {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
      }
      .stat-number {
        background: linear-gradient(135deg, #EA2831 0%, #ff6b6b 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 800;
      }
      .footer-gradient {
        background: linear-gradient(180deg, #f0f4ff 0%, #ffffff 100%);
      }
      .floating-animation {
        animation: floating 3s ease-in-out infinite;
      }
      @keyframes floating {
        0% { transform: translateY(0px); }
        50% { transform: translateY(-10px); }
        100% { transform: translateY(0px); }
      }
      .shine-effect {
        position: relative;
        overflow: hidden;
      }
      .shine-effect::after {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(
          45deg,
          transparent 45%,
          rgba(255, 255, 255, 0.1) 47%,
          rgba(255, 255, 255, 0.2) 50%,
          rgba(255, 255, 255, 0.1) 53%,
          transparent 55%
        );
        transform: rotate(45deg);
        animation: shine 3s infinite;
      }
      @keyframes shine {
        0% { transform: translateX(-100%) rotate(45deg); }
        100% { transform: translateX(100%) rotate(45deg); }
      }
      .footer-link {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        transition: transform 0.2s ease;
      }
      .footer-link:hover {
        transform: translateX(4px);
      }
      .footer-link svg {
        width: 16px;
        height: 16px;
        color: #EA2831;
      }
      .social-icons {
        display: flex;
        gap: 1rem;
        margin-top: 1rem;
      }
      .social-icon {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background-color: #f0f4ff;
  
      }
      .social-icon:hover {
        background-color: #EA2831;
        transform: translateY(-2px);
      }
      .social-icon:hover svg {
        color: white;
      }
      .social-icon svg {
        width: 20px;
        height: 20px;
        color: #64748b;
        transition: color 0.3s ease;
      }
      .feature-card svg,
      .social-icon svg,
      .gradient-card svg {
        width: 24px;
        height: 24px;
        min-width: 24px;
        min-height: 24px;
        flex-shrink: 0;
        object-fit: contain;
      }
      .icon-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        border-radius: 8px;
        background: rgba(234, 40, 49, 0.1);
      }
      .icon-wrapper svg {
        color: #EA2831;
      }
      .feature-card {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
      }
      .icon-wrapper i {
        font-size: 24px;
        color: #EA2831;
      }
      
      .feature-card .icon-wrapper {
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(234, 40, 49, 0.1);
        border-radius: 12px;
        margin-right: 16px;
        transition: all 0.3s ease;
      }
      
      .feature-card:hover .icon-wrapper {
        transform: scale(1.1);
        background: rgba(234, 40, 49, 0.15);
      }
    </style>
  </head>
  <body class="overflow-x-hidden">
    <ima-navbar></ima-navbar>
    <header class="navbar-fixed">
      <div class="hidden lg:block">
        <header class="flex items-center justify-between whitespace-nowrap border-b border-solid border-b-[#EEEEEE] px-10 py-3 bg-white">
          <div class="flex items-center gap-4 text-black">
            <div class="flex items-center">
              <a href="index.html" class="flex items-center">
                <img
                  class="h-16 w-auto object-contain"
                  src="img/logo.svg"
                  alt="IMA Logo"
                />
              </a>
            </div>
            <h2 class="text-black text-lg font-bold leading-tight tracking-[-0.015em]">Institut Mixte de l'Avenir</h2>
          </div>
          <div class="flex flex-1 justify-end gap-8">
            <div class="flex items-center gap-9">
              <a class="nav-link text-black text-sm font-medium leading-normal" href="index.html">Accueil</a>
              <a class="nav-link text-black text-sm font-medium leading-normal" href="presentation.html">Présentation</a>
              <a class="nav-link text-black text-sm font-medium leading-normal" href="planifications.html">Planifications</a>
              <a class="nav-link text-black text-sm font-medium leading-normal" href="adminision.html">Admission</a>
              <a class="nav-link text-black text-sm font-medium leading-normal" href="coordonnes.html">Contact</a>
            </div>
            <a href="affichagelogin.html"><button
              class="bg-blue-900 text-white border border-blue-400 border-b-4 font-medium overflow-hidden relative px-4 py-2 rounded-md hover:brightness-150 active:opacity-75 outline-none duration-300 group"
            >
              <span class="bg-blue-400 shadow-blue-400 absolute -top-[150%] left-0 inline-flex w-80 h-[5px] rounded-md opacity-50 group-hover:top-[150%] duration-500 shadow-[0_0_10px_10px_rgba(0,0,0,0.3)]"></span>
              <span class="truncate">Se Connecter</span>
            </button></a>
          </div>
        </header>
      </div>
    </header>
    



    <section class="admission" style="margin-top: 120px;">
      <div class="container mx-auto px-4" style="display: flex; align-items: center; justify-content: center; flex-direction: column; max-width: 1200px;">
          <div style="width: 100%; max-width: 800px; text-align: center;">
              <h1 class="admission-title" style="margin-bottom: 40px; font-weight: bold; font-size: 2.5rem;">Rejoignez l'IMA - Inscriptions & Admissions</h1>
              <p class="admission-text" style="margin-bottom: 30px; line-height: 1.8;">L'IMA ouvre ses portes aux élèves et enseignants dévoués pour l'année scolaire 2024-2025. Rejoignez une institution de référence en matière d'excellence académique et contribuez à façonner l'avenir.</p>
              <hr class="admission-hr" style="border: 1px solid #800020; width: 100px; margin: 40px auto;">
        
              <div class="admission-buttons" style="margin-top: 40px; margin-bottom: 80px;">
                <a href="inscription.html"><button
                  class="bg-black text-white border border-blue-400 border-b-4 font-medium overflow-hidden relative px-4 py-2 rounded-md hover:brightness-150 active:opacity-75 outline-none duration-300 group"
                >
                  <span class="bg-blue-400 shadow-blue-400 absolute -top-[150%] left-0 inline-flex w-80 h-[5px] rounded-md opacity-50 group-hover:top-[150%] duration-500 shadow-[0_0_10px_10px_rgba(0,0,0,0.3)]"></span>
                  <span class="truncate">Inscription</span>
                </button></a>
                <a href="resultatsadmission.html"><button
                  class="bg-red-900 text-white border border-blue-400 border-b-4 font-medium overflow-hidden relative px-4 py-2 rounded-md hover:brightness-150 active:opacity-75 outline-none duration-300 group"
                >
                  <span class="bg-red-400 shadow-blue-400 absolute -top-[150%] left-0 inline-flex w-80 h-[5px] rounded-md opacity-50 group-hover:top-[150%] duration-500 shadow-[0_0_10px_10px_rgba(0,0,0,0.3)]"></span>
                  <span class="truncate">Admission</span>
                </button></a>
          </div>
      </div>
    </section>
    
    <script>
      // Wait for DOM to be fully loaded
      document.addEventListener('DOMContentLoaded', function() {
        // Initialize ScrollReveal
        const sr = ScrollReveal({
          origin: 'bottom',
          distance: '50px',
          duration: 1500,
          delay: 200,
          easing: 'cubic-bezier(0.4, 0, 0, 1)',
          reset: false,
          mobile: true,
          viewFactor: 0.2
        });

        // Apply reveal animations
        sr.reveal('.admission-title', { 
          origin: 'top',
          delay: 100,
          distance: '100px',
          opacity: 0
        });
        
        sr.reveal('.admission-text', { 
          origin: 'bottom',
          delay: 300,
          distance: '50px',
          opacity: 0,
          duration: 1000
        });
        
        sr.reveal('.admission-hr', { 
          delay: 400,
          scale: 0.5,
          distance: '0px'
        });
        
        sr.reveal('.admission-buttons', { 
          delay: 500,
          scale: 0.8,
          origin: 'bottom'
        });

        // GSAP Animations
        gsap.registerPlugin(ScrollTrigger);
        
        // Text reveal animation
        gsap.from(".admission-text", {
          opacity: 0,
          y: 30,
          duration: 1,
          scrollTrigger: {
            trigger: ".admission-text",
            start: "top bottom",
            end: "top center",
            toggleActions: "play none none reverse"
          }
        });

        // Hover animations for buttons
        document.querySelectorAll('.btn-download').forEach(button => {
          button.addEventListener('mouseenter', () => {
            gsap.to(button, {
              scale: 1.05,
              duration: 0.3,
              ease: "power2.out"
            });
          });
          
          button.addEventListener('mouseleave', () => {
            gsap.to(button, {
              scale: 1,
              duration: 0.3,
              ease: "power2.in"
            });
          });
        });
      });
    </script>
    
        <footer class="footer-gradient border-t border-gray-100">
          <div class="mx-auto max-w-7xl px-8 py-12">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
              <!-- About IMA -->
              <div class="col-span-1">
                <h3 class="text-lg font-semibold mb-4 flex items-center gap-2">
                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/></svg>
                  À Propos de l'IMA
                </h3>
                <p class="text-gray-600 text-sm leading-relaxed">
                  Fondée en 2013, l'Institution Mixte de l'Avenir (IMA) est une école qui s'est construite sur des bases solides de persévérance et d'excellence académique. Guidée par la devise "IMA, la voie de l'excellence", notre mission est d'offrir une éducation de qualité, du préscolaire au secondaire, pour former les citoyens de demain.
                </p>
                <div class="social-icons">
                  <a href="https://www.facebook.com/profile.php?id=61568523980274&mibextid=ZbWKwL" class="social-icon" target="_blank">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>
                  </a>
                  <a href="https://www.youtube.com/@institutionmixtedelavenir-ima" class="social-icon" target="_blank">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"></path><polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"></polygon></svg>
                  </a>
                  <a href="https://www.instagram.com/imaht_509/" class="social-icon" target="_blank">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="16" x="2" y="4" rx="2" ry="2"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>
                  </a>
                  <a href="https://www.linkedin.com/in/institution-mixte-de-l-avenir-ima-509/" class="social-icon" target="_blank">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
                  </a>
                </div>
              </div>

              <!-- Resources -->
              <div class="col-span-1">
                <h3 class="text-lg font-semibold mb-4 flex items-center gap-2">
                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/></svg>
                  Ressources
                </h3>
                <ul class="space-y-2">
                  <li>
                    <a href="biblio.html" class="footer-link text-gray-600 hover:text-gray-900 text-sm">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"></path></svg>
                      <span>Bibliothèque en ligne</span>
                    </a>
                  </li>
                  <li>
                    <a href="newsletter.html" class="footer-link text-gray-600 hover:text-gray-900 text-sm">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"></rect><path d="M22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></svg>
                      <span>Newsletter</span>
                    </a>
                  </li>
                  <li>
                    <a href="historique IMA.pdf" class="footer-link text-gray-600 hover:text-gray-900 text-sm">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path><polyline points="14 2 14 8 20 8"></polyline></svg>
                      <span>Notre histoire</span>
                    </a>
                  </li>
                  <li>
                    <a href="activites.html" class="footer-link text-gray-600 hover:text-gray-900 text-sm">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
                      <span>Activités</span>
                    </a>
                  </li>
                </ul>
              </div>

              <!-- Useful Links -->
              <div class="col-span-1">
                <h3 class="text-lg font-semibold mb-4 flex items-center gap-2">
                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
                  Liens Utiles
                </h3>
                <ul class="space-y-2">
                  <li>
                    <a href="index.html" class="footer-link text-gray-600 hover:text-gray-900 text-sm">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 011-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 01-1 1m-6 0h6"></path></svg>
                      <span>Accueil</span>
                    </a>
                  </li>
                  <li>
                    <a href="presentation.html" class="footer-link text-gray-600 hover:text-gray-900 text-sm">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 20v-6a3 3 0 0 1 3-3h5a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3h-5a3 3 0 0 1-3-3zm-8 0v-6a3 3 0 0 1 3-3h5a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3h-5a3 3 0 0 1-3-3z"></path></svg>
                      <span>Présentation</span>
                    </a>
                  </li>
                  <li>
                    <a href="planifications.html" class="footer-link text-gray-600 hover:text-gray-900 text-sm">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
                      <span>Planifications</span>
                    </a>
                  </li>
                  <li>
                    <a href="adminision.html" class="footer-link text-gray-600 hover:text-gray-900 text-sm">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><line x1="23" y1="11" x2="17" y2="11"></line></svg>
                      <span>Admission</span>
                    </a>
                  </li>
                  <li>
                    <a href="coordonnes.html" class="footer-link text-gray-600 hover:text-gray-900 text-sm">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
                      <span>Contact</span>
                    </a>
                  </li>
                </ul>
              </div>

              <!-- Contact -->
              <div class="col-span-1">
                <h3 class="text-lg font-semibold mb-4 flex items-center gap-2">
                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
                  Nous Contacter
                </h3>
                <address class="not-italic">
                  <p class="text-gray-600 text-sm mb-2 flex items-center gap-2">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg>
                    Centre-ville de L'Asile, Haïti
                  </p>
                  <div class="space-y-1 text-sm text-gray-600">
                    <p class="flex items-center gap-2">
                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
                      +509 36 27 48 89
                    </p>
                    <p class="flex items-center gap-2">
                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
                      +509 32 28 4615
                    </p>
                    <p class="flex items-center gap-2">
                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
                      +509 37 95 2561
                    </p>
                  </div>
                  <p class="text-gray-600 text-sm mt-2 flex items-center gap-2">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="16" x="2" y="4" rx="2" ry="2"/><path d="M4 12h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v2c0 1.1.9 2 2 2z"/></path></svg>
                    <a href="mailto:support@ima.ht" class="hover:text-gray-900">support@ima.ht</a>
                  </p>
                </address>
              </div>
            </div>

            <!-- Bottom Bar -->
            <div class="mt-12 pt-8 border-t border-gray-200">
              <div class="flex flex-col md:flex-row justify-between items-center">
                <nav class="flex gap-4 mb-4 md:mb-0">
                  <a href="index.html" class="text-gray-600 hover:text-gray-900 text-sm">Accueil</a>
                  <a href="presentation.html" class="text-gray-600 hover:text-gray-900 text-sm">Présentation</a>
                  <a href="planifications.html" class="text-gray-600 hover:text-gray-900 text-sm">Planifications</a>
                  <a href="adminision.html" class="text-gray-600 hover:text-gray-900 text-sm">Admission</a>
                  <a href="coordonnes.html" class="text-gray-600 hover:text-gray-900 text-sm">Contact</a>
                </nav>
                <p class="text-gray-600 text-sm">2024 IMA. Tous droits réservés | Conçu par NexGen Spark</p>
              </div>
            </div>
          </div>
        </footer>
      </div>
      <div><div class="h-5 bg-[#FFFFFF]"></div></div>
    </div>
  </body>
  <script>
    // Initialize ScrollReveal
    const sr = ScrollReveal({
      origin: 'bottom',
      distance: '20px',
      duration: 1000,
      delay: 200,
      easing: 'ease',
      reset: false
    });

    // Apply reveal animations
    sr.reveal('.gradient-card', { interval: 100 });
    sr.reveal('.feature-card', { interval: 100 });
    sr.reveal('h2', { origin: 'left' });
    sr.reveal('p', { delay: 300 });

    gsap.registerPlugin(ScrollTrigger);
    
    // Hero section entrance animation
    gsap.from(".hero-content h1", {
      duration: 1,
      y: 100,
      opacity: 0,
      ease: "power4.out",
      delay: 0.5
    });
    
    gsap.from(".hero-content p", {
      duration: 1,
      y: 50,
      opacity: 0,
      ease: "power4.out",
      delay: 0.7
    });
    
    gsap.from(".hero-content button", {
      duration: 0.8,
      scale: 0,
      opacity: 0,
      ease: "back.out(1.7)",
      stagger: 0.2,
      delay: 1
    });

    // Number counter animation
    const numberElements = document.querySelectorAll('.stat-number');
    numberElements.forEach(element => {
      let text = element.textContent;
      let endValue = parseFloat(text.replace(/[^0-9.]/g, ''));
      let hasPlusSign = text.includes('+');
      let hasPercentSign = text.includes('%');
      
      let obj = { value: 0 };
      
      gsap.to(obj, {
        value: endValue,
        duration: 2,
        ease: "power2.out",
        scrollTrigger: {
          trigger: element,
          start: "top bottom",
          toggleActions: "restart none none reverse"
        },
        onUpdate: function() {
          let currentValue = Math.round(obj.value);
          element.textContent = currentValue + 
            (hasPlusSign ? '+' : '') + 
            (hasPercentSign ? '%' : '');
        }
      });
    });

    // Navbar animations
    const navbar = document.querySelector('header');
    const navLinks = document.querySelectorAll('.nav-link');
    const logo = document.querySelector('.logo');

    // Initial navbar animation
    gsap.from(navbar, {
      y: -100,
      opacity: 0,
      duration: 1,
      ease: "power3.out"
    });

    // Staggered nav links animation
    gsap.from(navLinks, {
      opacity: 0,
      y: -20,
      duration: 0.5,
      stagger: 0.1,
      ease: "power2.out",
      delay: 0.5
    });

    // Logo animation
    gsap.from(logo, {
      scale: 0.8,
      opacity: 0,
      duration: 1,
      ease: "elastic.out(1, 0.5)",
      delay: 0.2
    });

    // Navbar scroll effect
    ScrollTrigger.create({
      start: "top -100",
      end: 99999,
      toggleClass: {
        className: 'navbar-scrolled',
        targets: navbar
      }
    });

    // Add smooth hover effect to nav links
    navLinks.forEach(link => {
      link.addEventListener('mouseenter', () => {
        gsap.to(link, {
          scale: 1.1,
          duration: 0.3,
          ease: "power2.out"
        });
      });
      
      link.addEventListener('mouseleave', () => {
        gsap.to(link, {
          scale: 1,
          duration: 0.3,
          ease: "power2.in"
        });
      });
    });
  </script>
</html>
