<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>
            <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>
          </div>
        </header>
      </div>
    </header>
    
    <section class="coming-soon" style="text-align: center; margin-top: 50px; margin-top: 70px; padding: 40px; background-color: #f8f9fa; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);">
      <h2 style="font-size: 30px; color: #800020; font-weight: bold; margin-bottom: 20px;">Restez Connectés</h2>
      <p style="font-size: 18px; color: #333; margin-bottom: 30px; line-height: 1.6;">
          Cette fonctionnalité sera très bientôt disponible. Nous travaillons dur pour vous offrir une expérience exceptionnelle. Merci de votre patience et de votre soutien continu.
      </p>
      <hr style="border: 0; border-top: 2px solid #800020; width: 50%; margin: 30px auto;">
      <div style="display: flex; justify-content: center; gap: 20px;">
          <a href="presentation.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">En savoir plus</span>
            </button>
          </a>
          <a href="coordonnes.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">Contactez-nous</span>
            </button>
          </a>
          </a>
      </div>
  </section>

        <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="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 4.5z"></path></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 scroll effect
    gsap.to(".navbar-fixed", {
      scrollTrigger: {
        trigger: "body",
        start: "top top",
        end: "+=200",
        scrub: true
      },
      backdropFilter: "blur(12px)",
      backgroundColor: "rgba(255, 255, 255, 0.9)",
      boxShadow: "0 4px 30px rgba(0, 0, 0, 0.1)",
    });

    // Footer links animation
    gsap.from(".footer-links a", {
      duration: 0.5,
      y: 20,
      opacity: 0,
      stagger: 0.1,
      ease: "power2.out",
      scrollTrigger: {
        trigger: ".footer-links",
        start: "top bottom",
        toggleActions: "play none none reverse"
      }
    });

    // Social icons entrance
    gsap.from(".social-icon", {
      duration: 0.5,
      scale: 0,
      rotation: -180,
      opacity: 0,
      stagger: 0.1,
      ease: "back.out(1.7)",
      scrollTrigger: {
        trigger: ".social-icons",
        start: "top bottom",
        toggleActions: "play none none reverse"
      }
    });

    // Parallax effect on hero image
    gsap.to(".hero-section", {
      backgroundPosition: "50% 100%",
      ease: "none",
      scrollTrigger: {
        trigger: ".hero-section",
        start: "top top",
        end: "bottom top",
        scrub: true
      }
    });

    // Simple heading animation
    gsap.from("h2", {
      duration: 0.8,
      y: 50,
      opacity: 0,
      ease: "power2.out",
      scrollTrigger: {
        trigger: "h2",
        start: "top bottom",
        toggleActions: "play none none reverse"
      }
    });
  </script>
</html>
