/* This file is intentionally left blank. */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom Components */
@layer components {
  /* Buttons */
  .btn {
    @apply px-6 py-2 rounded-lg transition-all duration-200 font-medium;
  }

  .btn-primary {
    @apply btn bg-blue-600 text-white hover:bg-blue-700 hover:shadow-lg;
  }

  .btn-outline {
    @apply btn border-2 border-blue-600 text-blue-600 hover:bg-blue-50;
  }

  /* Navigation */
  .nav-link {
    @apply text-gray-600 hover:text-blue-600 transition-colors duration-200;
  }

  .nav-link.active {
    @apply text-blue-600 font-medium;
  }

  /* Typography */
  .section-title {
    @apply text-3xl md:text-4xl font-bold text-gray-900 mb-6;
  }

  .section-subtitle {
    @apply text-lg text-gray-600 mb-12 max-w-2xl mx-auto;
  }

  /* Cards */
  .feature-card {
    @apply bg-white p-6 rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300;
  }

  .pricing-card {
    @apply bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300;
  }

  /* Animations */
  .animate-float {
    animation: float 6s ease-in-out infinite;
  }

  @keyframes float {
    0% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-20px);
    }
    100% {
      transform: translateY(0px);
    }
  }

  /* Layout */
  .container-custom {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }

  /* Forms */
  .form-input {
    @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent;
  }

  .form-label {
    @apply block text-sm font-medium text-gray-700 mb-1;
  }

  /* Preloader */
  .loader {
    @apply w-12 h-12 border-4 border-blue-200 border-t-blue-600 rounded-full animate-spin;
  }
}

/* Custom Utilities */
@layer utilities {
  .text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .bg-gradient-primary {
    @apply bg-gradient-to-r from-blue-600 to-indigo-600;
  }
}
.bg-grid-slate-200 {
  background-image: linear-gradient(to right, rgb(226 232 240 / 0.1) 1px, transparent 1px),
                    linear-gradient(to bottom, rgb(226 232 240 / 0.1) 1px, transparent 1px);
}
.bg-grid-slate-200 {
  background-image: linear-gradient(to right, rgb(226 232 240 / 0.1) 1px, transparent 1px),
                    linear-gradient(to bottom, rgb(226 232 240 / 0.1) 1px, transparent 1px);
}
/* Dans votre fichier CSS */
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}
/* Add to your CSS file */
@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.gradient-animate {
  background-size: 200% 200%;
  animation: gradient 3s ease infinite;
}