<section class="min-h-screen flex justify-center items-center">
  <div class="w-full max-w-6xl animate-fade-in">
    <div
      class="flex flex-col md:flex-row bg-white dark:bg-gray-800 rounded-2xl shadow-2xl overflow-hidden"
    >
      <!-- Panneau gauche - Image de fond -->
      <section class="hidden md:flex md:w-1/2 bg-cover bg-center bg-auth relative">
        <!-- Overlay pour améliorer la lisibilité -->
        <div class="absolute inset-0 bg-gradient-to-br from-indigo-900/40 to-purple-900/40"></div>

        <div class="relative z-10 flex flex-col justify-between w-full h-full p-8">
          <!-- Contenu principal -->
          <div class="flex-1 flex items-center justify-center">
            <div class="text-center space-y-4 animate-slide-up">
              <h2 class="text-4xl font-bold text-white">Bon retour</h2>
              <p class="text-lg text-white/90 leading-relaxed max-w-sm mx-auto">
                Les solutions à vos besoins sont à portée de main.
              </p>
            </div>
          </div>

          <!-- Footer links -->
          <div class="flex justify-center gap-6 text-sm text-white/80 animate-fade-in-delay">
            <a href="#" class="hover:text-white transition-colors">Politiques</a>
            <span>•</span>
            <a href="#" class="hover:text-white transition-colors">Conditions</a>
            <span>•</span>
            <a href="#" class="hover:text-white transition-colors">Aide</a>
          </div>
        </div>
      </section>

      <!-- Panneau droit - Formulaire -->
      <section class="w-full md:w-1/2 bg-gray-50 dark:bg-gray-800">
        <div class="w-full max-w-md mx-auto p-8 md:p-12 animate-slide-up-delay">
          <!-- Titre -->
          <div class="text-center mb-8">
            <h2 class="text-3xl font-bold text-gray-900 dark:text-white">Identifiez-vous</h2>
            <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Accédez à votre espace</p>
          </div>

          <!-- Formulaire (login ou register) -->
          <router-outlet />
        </div>
      </section>
    </div>
  </div>
</section>
