@tailwind base;
@tailwind components;
@tailwind utilities;

/* Styles personnalisés simples */
@layer base {
  html {
    scroll-behavior: smooth;
  }
  
  body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
  }
}

@layer components {
  /* Boutons */
  .btn-primary {
    @apply bg-asu-600 hover:bg-asu-700 text-white font-semibold px-6 py-3 rounded-lg transition-colors duration-300;
  }
  
  .btn-secondary {
    @apply border-2 border-asu-600 text-asu-600 hover:bg-asu-600 hover:text-white font-semibold px-6 py-3 rounded-lg transition-all duration-300;
  }
  
  /* Cards */
  .card {
    @apply bg-white rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300;
  }
  
  /* Sections */
  .section-padding {
    @apply py-16 md:py-20;
  }
  
  /* Typographie */
  .title-main {
    @apply text-3xl md:text-4xl font-bold text-gray-900;
  }
  
  .title-large {
    @apply text-4xl md:text-6xl font-bold;
  }
  
  .subtitle {
    @apply text-lg text-gray-600;
  }
  
  /* Conteneurs */
  .container-custom {
    @apply max-w-6xl mx-auto px-4;
  }
  
  /* Animations fluides */
  .animate-fade-in {
    opacity: 0;
    animation: fadeIn 0.8s ease-out forwards;
  }
  
  .animate-slide-up {
    transform: translateY(30px);
    opacity: 0;
    animation: slideUp 0.6s ease-out forwards;
  }
  
  .animate-scale-in {
    transform: scale(0.9);
    opacity: 0;
    animation: scaleIn 0.5s ease-out forwards;
  }
  
  .animate-float {
    animation: float 3s ease-in-out infinite;
  }
  
  /* Hover effects */
  .hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  }
  
  .hover-glow {
    transition: box-shadow 0.3s ease;
  }
  
  .hover-glow:hover {
    box-shadow: 0 0 20px rgba(2, 132, 199, 0.3);
  }
  
  /* Background animations */
  .bg-gradient-animated {
    background: linear-gradient(270deg, theme('colors.asu.600'), theme('colors.asu.800'), theme('colors.asu.600'));
    background-size: 400% 400%;
    animation: gradientShift 8s ease infinite;
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes slideUp {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes scaleIn {
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  
  @keyframes float {
    0%, 100% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-10px);
    }
  }
  
  @keyframes gradientShift {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
  
  /* Pulse animation pour les éléments importants */
  .pulse-gentle {
    animation: pulseGentle 2s infinite;
  }
  
  @keyframes pulseGentle {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.8;
    }
  }
  
  /* Loading states */
  .loading-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
  }
  
  @keyframes loading {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }
  
  /* Espacement cohérent */
  .section-gap {
    @apply mb-12 md:mb-16;
  }
  
  /* Grid responsive */
  .grid-responsive {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8;
  }
  
  /* Focus states */
  .focus-ring {
    @apply focus:outline-none focus:ring-2 focus:ring-asu-500 focus:ring-offset-2;
  }
  
  /* Barre de navigation moderne */
  .navbar-asu {
    @apply bg-white shadow-lg rounded-b-xl border-b border-asu-100;
    position: relative;
    z-index: 50;
  }
  
  /* Lien de navigation principal */
  .nav-link {
    @apply relative px-4 py-2 text-gray-700 font-semibold rounded-md transition-all duration-200;
    background: none;
  }
  
  .nav-link::after {
    content: '';
    display: block;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%) scaleX(0);
    width: 70%;
    height: 3px;
    background: linear-gradient(90deg, #0284c7, #38bdf8);
    border-radius: 2px;
    transition: transform 0.3s cubic-bezier(.4,0,.2,1);
  }
  
  .nav-link:hover,
  .nav-link:focus {
    color: #0284c7;
    background: linear-gradient(90deg, #e0f2fe 0%, #f0f9ff 100%);
  }
  
  .nav-link:hover::after,
  .nav-link:focus::after {
    transform: translateX(-50%) scaleX(1);
  }
  
  .nav-link.active {
    color: #0284c7;
    background: linear-gradient(90deg, #e0f2fe 0%, #f0f9ff 100%);
  }
  
  .nav-link.active::after {
    transform: translateX(-50%) scaleX(1);
  }
  
  /* Mobile nav links */
  .mobile-nav-link {
    @apply relative block px-4 py-2 text-gray-700 font-semibold rounded-md transition-all duration-200;
    background: none;
  }
  
  .mobile-nav-link::after {
    content: '';
    display: block;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%) scaleX(0);
    width: 60%;
    height: 2px;
    background: linear-gradient(90deg, #0284c7, #38bdf8);
    border-radius: 2px;
    transition: transform 0.3s cubic-bezier(.4,0,.2,1);
  }
  
  .mobile-nav-link:hover,
  .mobile-nav-link:focus {
    color: #0284c7;
    background: linear-gradient(90deg, #e0f2fe 0%, #f0f9ff 100%);
  }
  
  .mobile-nav-link:hover::after,
  .mobile-nav-link:focus::after {
    transform: translateX(-50%) scaleX(1);
  }
}

/* Utilitaires personnalisés */
@layer utilities {
  .text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .text-shadow-lg {
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  
  .bg-gradient-asu {
    background: linear-gradient(135deg, theme('colors.asu.600'), theme('colors.asu.800'));
  }
  
  .bg-gradient-asu-light {
    background: linear-gradient(135deg, theme('colors.asu.100'), theme('colors.asu.200'));
  }
  
  /* Responsive text sizes */
  .text-responsive {
    @apply text-sm md:text-base lg:text-lg;
  }
  
  .text-responsive-lg {
    @apply text-lg md:text-xl lg:text-2xl;
  }
  
  /* Glassmorphism effect */
  .glass {
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }
  
  /* Custom scrollbar */
  .custom-scrollbar::-webkit-scrollbar {
    width: 8px;
  }
  
  .custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
  }
  
  .custom-scrollbar::-webkit-scrollbar-thumb {
    background: theme('colors.asu.600');
    border-radius: 4px;
  }
  
  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: theme('colors.asu.700');
  }
}