@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 simples */
  .fade-in {
    opacity: 0;
    animation: fadeIn 0.6s ease-out forwards;
  }
  
  @keyframes fadeIn {
    to {
      opacity: 1;
    }
  }
  
  /* 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;
  }
}

/* Utilitaires personnalisés */
@layer utilities {
  .text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .bg-gradient-asu {
    background: linear-gradient(135deg, theme('colors.asu.600'), theme('colors.asu.800'));
  }
}