<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;
        /* Removed transition for smoother GSAP animations */
      }
      .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);
      }
      /* Mobile navbar styles */
      .mobile-nav {
        position: fixed;
        top: 0;
        left: -100%;
        width: 80%;
        height: 100vh;
        background: white;
        z-index: 1000;
        transition: left 0.3s ease-in-out;
      }
      
      .mobile-nav.active {
        left: 0;
      }
      
      .mobile-nav-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease-in-out;
      }
      
      .mobile-nav-overlay.active {
        opacity: 1;
        pointer-events: auto;
      }
    </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>
    <div class="content-wrapper" style="margin-top: 80px;">
      <div
        class="relative flex size-full flex-col bg-[#FFFFFF] justify-between group/design-root"
        style='font-family: "SF Pro Display", sans-serif;'
      >
        <div>
          <div class="@container">
            <div class="flex flex-col justify-start items-center">
              <div
                class="hero-section flex min-h-[580px] flex-col gap-6 bg-cover bg-center bg-no-repeat w-full @[480px]:gap-8 items-center justify-center mb-8"
                style='background-image: linear-gradient(rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.6) 100%), url("img/home1.jpg");'
              >
                <div class="hero-content flex flex-col gap-2 text-center">
                  <h1
                    class="text-white text-4xl font-black leading-tight tracking-[-0.033em] @[480px]:text-5xl @[480px]:font-black @[480px]:leading-tight @[480px]:tracking-[-0.033em]"
                  >
                    Une Éducation pour les Leaders de Demain
                  </h1>
                  <h2 class="text-white text-sm font-normal leading-normal @[480px]:text-base @[480px]:font-normal @[480px]:leading-normal">
                    Découvrez comment nous façonnons l'avenir.
                  </h2>
                </div>
                <div class="flex-wrap gap-3 flex justify-center">
                  <a href="inscription.html"><button
                    class="shine-effect bg-emerald-900 text-white border border-emerald-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-emerald-400 shadow-emerald-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">Commencez ici</span>
                  </button></a>
                 <a href="presentation.html"> <button
                    class="shine-effect bg-purple-900 text-white border border-purple-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-purple-400 shadow-purple-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></a> 
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div class="flex flex-wrap gap-6 px-8 mb-16">
            <div class="gradient-card shine-effect flex min-w-[158px] flex-1 flex-col gap-2 rounded-xl p-6 border border-[#E0E0E0]">
              <p class="text-black text-base font-medium leading-normal">Année de création de l'IMA</p>
              <p class="stat-number text-2xl font-bold leading-tight">2013</p>
            </div>
            <div class="gradient-card shine-effect flex min-w-[158px] flex-1 flex-col gap-2 rounded-xl p-6 border border-[#E0E0E0]">
              <p class="text-black text-base font-medium leading-normal">Réussite au bac 2024</p>
              <p class="stat-number text-2xl font-bold leading-tight">98%</p>
            </div>
            <div class="gradient-card shine-effect flex min-w-[158px] flex-1 flex-col gap-2 rounded-xl p-6 border border-[#E0E0E0]">
              <p class="text-black text-base font-medium leading-normal">Élèves optimistes</p>
              <p class="stat-number text-2xl font-bold leading-tight">72+</p>
            </div>
            <div class="gradient-card shine-effect flex min-w-[158px] flex-1 flex-col gap-2 rounded-xl p-6 border border-[#E0E0E0]">
              <p class="text-black text-base font-medium leading-normal">Enseignants qualifiés</p>
              <p class="stat-number text-2xl font-bold leading-tight">32</p>
            </div>
          </div>
          <h2 class="text-black text-[22px] font-bold leading-tight tracking-[-0.015em] mx-auto max-w-[720px] text-center px-8 pb-3 pt-5">Ce que nous offrons</h2>
          <div class="flex flex-col gap-10 px-8 py-10 @container">
            <div class="flex flex-col gap-6">
              <div class="flex flex-col gap-4">
                <h1
                  class="text-black tracking-light text-[32px] font-bold leading-tight mx-auto max-w-[720px] text-center @[480px]:text-4xl @[480px]:font-black @[480px]:leading-tight @[480px]:tracking-[-0.033em]"
                >
                  IMA à la Voie de l'Excellence
                </h1>
                <p class="text-black text-base font-normal leading-normal mx-auto max-w-[720px] text-center">
                  Nous offrons une éducation de qualité, axée sur le développement personnel et professionnel.
                </p>
              </div>
              <a href="planifications.html"><button
                class="shine-effect 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 mx-auto"
              >
                <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">Découvrez nos programmes</span></a>
              </button>
            </div>
            <div class="grid grid-cols-[repeat(auto-fit,minmax(158px,1fr))] gap-3 p-0">
              <div class="flex flex-1 gap-3 rounded-lg border border-[#E0E0E0] bg-[#FFFFFF] p-4 flex-col">
                <div class="text-black" data-icon="Student" data-size="24px" data-weight="regular">
                  <i class="fas fa-book-open"></i>
                </div>
                <div class="flex flex-col gap-1">
                  <h2 class="text-black text-base font-bold leading-tight">Éducation Primaire et Secondaire</h2>
                  <p class="text-neutral-500 text-sm font-normal leading-normal">Accompagnement des élèves dans le développement académique et social.</p>
                </div>
              </div>
              <div class="flex flex-1 gap-3 rounded-lg border border-[#E0E0E0] bg-[#FFFFFF] p-4 flex-col">
                <div class="text-black" data-icon="ChalkboardTeacher" data-size="24px" data-weight="regular">
                  <i class="fas fa-edit"></i>
                </div>
                <div class="flex flex-col gap-1">
                  <h2 class="text-black text-base font-bold leading-tight">Formation d’Enseignants</h2>
                  <p class="text-neutral-500 text-sm font-normal leading-normal">Formation des enseignants avec des outils pédagogiques modernes.</p>
                </div>
              </div>
              <div class="flex flex-1 gap-3 rounded-lg border border-[#E0E0E0] bg-[#FFFFFF] p-4 flex-col">
                <div class="text-black" data-icon="Suitcase" data-size="24px" data-weight="regular">
                  <i class="fas fa-users"></i>
                </div>
                <div class="flex flex-col gap-1">
                  <h2 class="text-black text-base font-bold leading-tight">Orientation Professionnelle</h2>
                  <p class="text-neutral-500 text-sm font-normal leading-normal">Aide à l’orientation et au choix de carrière.</p>
                </div>
              </div>
              <div class="flex flex-1 gap-3 rounded-lg border border-[#E0E0E0] bg-[#FFFFFF] p-4 flex-col">
                <div class="text-black" data-icon="FileVideo" data-size="24px" data-weight="regular">
                  <i class="fas fa-file-video"></i>
                </div>
                <div class="flex flex-col gap-1">
                  <h2 class="text-black text-base font-bold leading-tight">Ateliers de Vidéo et Multimédia</h2>
                  <p class="text-neutral-500 text-sm font-normal leading-normal">Ateliers pratiques pour développer des compétences multimédias.</p>
                </div>
              </div>
              <div class="flex flex-1 gap-3 rounded-lg border border-[#E0E0E0] bg-[#FFFFFF] p-4 flex-col">
                <div class="text-black" data-icon="Users" data-size="24px" data-weight="regular">
                  <i class="fas fa-users"></i>
                </div>
                <div class="flex flex-col gap-1">
                  <h2 class="text-black text-base font-bold leading-tight">Activités Associatives</h2>
                  <p class="text-neutral-500 text-sm font-normal leading-normal">Activités extrascolaires pour renforcer les capacités sociales.</p>
                </div>
              </div>
              <div class="flex flex-1 gap-3 rounded-lg border border-[#E0E0E0] bg-[#FFFFFF] p-4 flex-col">
                <div class="text-black" data-icon="Handshake" data-size="24px" data-weight="regular">
                  <i class="fas fa-handshake"></i>
                </div>
                <div class="flex flex-col gap-1">
                  <h2 class="text-black text-base font-bold leading-tight">Expérience Professionnelle</h2>
                  <p class="text-neutral-500 text-sm font-normal leading-normal">Stages professionnels pour acquérir une expérience concrète.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="@container">
          <div class="flex flex-col justify-end gap-6 px-8 py-10 @[480px]:gap-8 @[480px]:px-10 @[480px]:py-20">
            <div class="flex flex-col gap-2 text-center">
              <h1
                class="text-black tracking-light text-[32px] font-bold leading-tight mx-auto max-w-[720px] text-center @[480px]:text-4xl @[480px]:font-black @[480px]:leading-tight @[480px]:tracking-[-0.033em]"
              >
                Excellence et Innovation Éducative
              </h1>
              <p class="text-black text-base font-normal leading-normal mx-auto max-w-[720px] text-center">
                Découvrez nos principes et programmes pour une éducation de qualité.
              </p>
            </div>
            <div class="flex flex-1 justify-center">
              <div class="flex justify-center">
                <div class="flex flex-1 gap-3 flex-wrap max-w-[480px] justify-center">
                 <a href="accesbiblio.html"> <button
                    class="shine-effect bg-amber-900 text-white border border-amber-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 grow"
                  >
                    <span class="bg-amber-400 shadow-amber-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">Bibliothèque en ligne</span>
                  </button></a>
                  <a href="newsletter.html"> <button
                    class="shine-effect bg-teal-900 text-white border border-teal-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 grow"
                  >
                    <span class="bg-teal-400 shadow-teal-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">Newsletter</span>
                  </button></a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <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="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>
                  <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 x="2" y="2" width="20" height="20" rx="3" ry="3"/>
                      <circle cx="12" cy="12" r="4"/>
                    </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="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>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 });
    // Removed social icon reveal since we're using GSAP for that

    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"
      }
    });
    
    // Mobile Navigation Menu
    const mobileMenuButton = document.getElementById('mobile-menu-button');
    const mobileCloseButton = document.getElementById('mobile-close-button');
    const mobileNav = document.querySelector('.mobile-nav');
    const mobileNavOverlay = document.querySelector('.mobile-nav-overlay');
    
    function openMobileMenu() {
      mobileNav.classList.add('active');
      mobileNavOverlay.classList.add('active');
      document.body.style.overflow = 'hidden';
    }
    
    function closeMobileMenu() {
      mobileNav.classList.remove('active');
      mobileNavOverlay.classList.remove('active');
      document.body.style.overflow = '';
    }
    
    mobileMenuButton.addEventListener('click', openMobileMenu);
    mobileCloseButton.addEventListener('click', closeMobileMenu);
    mobileNavOverlay.addEventListener('click', closeMobileMenu);
  </script>
  <script>
    // 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>
