<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>
    <!--Navbar end-->

    <section class="plan-grid" style="background-color: #ffffff; padding: 40px 0; display: flex; align-items: center; justify-content: center; margin-top: 80px;">
      <div class="container" style="max-width: 700px; margin: auto;">
          <h1 style="font-size: 2rem; color: #000000; text-align: center; margin-bottom: 20px;" class="font-bold presentation-title">L'Engagement de l'IMA pour l'Éducation de Demain</h1>
          
          <div class="plan-section" style="display: flex; flex-direction: column; align-items: center; color: #333333; text-align: center; padding: 20px;">
              <p style="font-size: 1.1rem; line-height: 1.6; color: #333333; margin-bottom: 20px;" class="italic presentation-text">
                  À l'IMA, nous croyons que chaque élève mérite une éducation complète et avancée qui prépare à un avenir prometteur. Depuis sa création, notre école a toujours œuvré pour offrir à nos étudiants les outils nécessaires à leur réussite. Nous nous engageons à surmonter les défis et à fournir un enseignement de qualité, adapté aux besoins de chaque génération.
              </p>
              
              <div style="width: 100%; height: 2px; background-color: #931a25; margin: 20px 0;" class="presentation-hr"></div>
    
              <div style="display: flex; gap: 20px; justify-content: center; margin-top: 20px;" class="presentation-buttons">
                  <a href="historiqueima.html">
                    <button
                    class="bg-red-900 text-white border border-red-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-red-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="newsletter.html">
                    <button
                    class="bg-red-900 text-white border border-red-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-red-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">Nous suivre</span>
                  </button>
                  </a>
              </div>
          </div>
      </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>
    // 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('.presentation-title', { 
        origin: 'top',
        delay: 100,
        distance: '100px',
        opacity: 0
      });
      
      sr.reveal('.presentation-text', { 
        origin: 'bottom',
        delay: 300,
        distance: '50px',
        opacity: 0,
        duration: 1000
      });
      
      sr.reveal('.presentation-hr', { 
        delay: 400,
        scale: 0.5,
        distance: '0px'
      });
      
      sr.reveal('.presentation-buttons', { 
        delay: 500,
        scale: 0.8,
        origin: 'bottom'
      });

      // Reveal cards
      sr.reveal('.gradient-card', {
        distance: '50px',
        origin: 'bottom',
        interval: 200,
        scale: 0.9,
        opacity: 0
      });

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

      // Animate cards
      gsap.from(".gradient-card", {
        y: 100,
        opacity: 0,
        duration: 1,
        stagger: 0.2,
        ease: "power2.out",
        scrollTrigger: {
          trigger: ".gradient-card",
          start: "top bottom",
          end: "center 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"
          });
        });
      });

      // Card hover animations
      document.querySelectorAll('.gradient-card').forEach(card => {
        card.addEventListener('mouseenter', () => {
          gsap.to(card, {
            y: -5,
            duration: 0.3,
            ease: "power2.out",
            boxShadow: '0 10px 30px rgba(0, 0, 0, 0.1)'
          });
        });
        
        card.addEventListener('mouseleave', () => {
          gsap.to(card, {
            y: 0,
            duration: 0.3,
            ease: "power2.in",
            boxShadow: '0 4px 20px rgba(0, 0, 0, 0.05)'
          });
        });
      });

      // 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>
