/* Container principal responsive */
.app-container {
  @apply antialiased;
  min-height: 100vh;
  min-height: 100dvh; /* Support pour les navigateurs modernes */
}

/* Wrapper de contenu avec contraintes responsive */
.content-wrapper {
  @apply w-full mx-auto;
  max-width: 100%;
}

/* Styles responsive pour les différents breakpoints */
@media (min-width: 640px) {
  .content-wrapper {
    max-width: 100%;
  }
}

@media (min-width: 768px) {
  .content-wrapper {
    max-width: 100%;
  }
}

@media (min-width: 1024px) {
  .content-wrapper {
    max-width: 1280px; /* max-w-7xl */
  }
}

@media (min-width: 1280px) {
  .content-wrapper {
    max-width: 1536px; /* max-w-screen-2xl */
  }
}

/* Assure que le router-outlet s'affiche correctement */
router-outlet + * {
  @apply w-full;
}

/* Espacement responsive pour éviter le chevauchement avec la navbar fixe */
main {
  padding-top: 4rem; /* 64px - hauteur navbar mobile */
}

@media (min-width: 640px) {
  main {
    padding-top: 5rem; /* 80px - hauteur navbar desktop */
  }
}

/* Smooth scroll pour toute l'application */
html {
  scroll-behavior: smooth;
}

/* Amélioration de la lisibilité du texte */
body {
  @apply text-gray-900 dark:text-gray-100;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Container générique pour le contenu des pages */
.page-container {
  @apply w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8 lg:py-12;
}

/* Section générique */
.page-section {
  @apply w-full mb-8 sm:mb-12 lg:mb-16;
}

/* Titre de page responsive */
.page-title {
  @apply text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900 dark:text-white mb-4 sm:mb-6;
}

/* Sous-titre de page */
.page-subtitle {
  @apply text-lg sm:text-xl text-gray-600 dark:text-gray-400 mb-6 sm:mb-8;
}

/* Card responsive */
.card {
  @apply bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 sm:p-6 lg:p-8;
}

/* Transition pour le changement de thème */
* {
  @apply transition-colors duration-200;
}
