/* Améliorations responsive pour mobile */

/* Fix spécifique pour le bouton "Commencer" qui déborde */
@media (max-width: 768px) {
  /* Cibler spécifiquement la navigation en haut */
  header .flex,
  nav .flex,
  .navbar .flex {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }
  
  /* Réduire légèrement les boutons de navigation */
  header button,
  nav button,
  .navbar button {
    font-size: 0.875rem !important;
    padding: 0.5rem 1rem !important;
    min-width: auto !important;
  }
  
  /* Si le bouton "Commencer" est trop long, le raccourcir */
  button:contains("Commencer"),
  [data-testid*="start"],
  [aria-label*="start"] {
    font-size: 0.8rem !important;
    padding: 0.4rem 0.8rem !important;
  }
}

/* Améliorations générales pour mobile */
@media (max-width: 768px) {
  /* Ajuster la taille des textes */
  .text-6xl {
    font-size: 2.5rem !important;
    line-height: 1.1 !important;
  }
  
  .text-4xl {
    font-size: 2rem !important;
    line-height: 1.2 !important;
  }
  
  .text-3xl {
    font-size: 1.75rem !important;
    line-height: 1.3 !important;
  }
  
  .text-2xl {
    font-size: 1.5rem !important;
    line-height: 1.4 !important;
  }
  
  /* Réduire les paddings sur mobile */
  .p-12 {
    padding: 1.5rem !important;
  }
  
  .px-12 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
  
  .py-20 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  
  /* Ajuster les marges */
  .mt-24 {
    margin-top: 2rem !important;
  }
  
  .mb-16 {
    margin-bottom: 2rem !important;
  }
  
  /* Améliorer les boutons sur mobile */
  .h-12 {
    height: 3rem !important;
    min-height: 48px !important;
  }
  
  .px-6 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  .py-3 {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }
  
  /* Ajuster les largeurs maximales */
  .max-w-6xl {
    max-width: 95vw !important;
  }
  
  .max-w-4xl {
    max-width: 95vw !important;
  }
  
  .max-w-7xl {
    max-width: 95vw !important;
  }
  
  /* Améliorer les grilles sur mobile */
  .grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  .grid-cols-3 {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  /* Améliorer les flexbox */
  .flex-col {
    flex-direction: column !important;
  }
  
  .gap-8 {
    gap: 1rem !important;
  }
  
  .gap-12 {
    gap: 1.5rem !important;
  }
  
  /* Améliorer les espacements */
  .space-y-8 > * + * {
    margin-top: 1rem !important;
  }
  
  .space-y-6 > * + * {
    margin-top: 0.75rem !important;
  }
  
  /* Ajuster les hauteurs */
  .h-40 {
    height: 12rem !important;
  }
  
  .h-56 {
    height: 16rem !important;
  }
  
  /* Améliorer les bordures arrondies */
  .rounded-2xl {
    border-radius: 0.75rem !important;
  }
  
  .rounded-xl {
    border-radius: 0.5rem !important;
  }
  
  /* Ajuster les ombres */
  .shadow-lg {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
  }
  
  .shadow-xl {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;
  }
}

/* Améliorations pour très petits écrans */
@media (max-width: 480px) {
  /* Navigation plus compacte sur très petits écrans */
  header button,
  nav button,
  .navbar button {
    font-size: 0.8rem !important;
    padding: 0.4rem 0.8rem !important;
  }
  
  /* Boutons encore plus petits */
  .h-10 {
    height: 2rem !important;
  }
  
  .h-11 {
    height: 2.25rem !important;
  }
  
  /* Textes encore plus petits */
  .text-6xl {
    font-size: 2rem !important;
  }
  
  .text-4xl {
    font-size: 1.75rem !important;
  }
  
  .text-3xl {
    font-size: 1.5rem !important;
  }
  
  /* Paddings encore plus petits */
  .p-12 {
    padding: 1rem !important;
  }
  
  .px-12 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  .py-20 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  
  /* Boutons plus petits mais toujours touchables */
  .h-12 {
    height: 2.75rem !important;
    min-height: 44px !important;
  }
  
  /* Marges réduites */
  .mt-24 {
    margin-top: 1.5rem !important;
  }
  
  .mb-16 {
    margin-bottom: 1.5rem !important;
  }
  
  /* Largeurs maximales */
  .max-w-6xl,
  .max-w-4xl,
  .max-w-7xl {
    max-width: 98vw !important;
  }
}

/* Améliorations pour les éléments spécifiques */
@media (max-width: 768px) {
  /* Améliorer la navigation en haut */
  header,
  nav,
  .navbar,
  .header {
    padding: 0.5rem 1rem !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }
  
  /* Ajuster les boutons de navigation */
  .justify-between {
    justify-content: flex-start !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
  }
  
  /* Réduire la taille des boutons de navigation */
  .h-10 {
    height: 2.25rem !important;
  }
  
  .h-11 {
    height: 2.5rem !important;
  }
  
  /* Ajuster les textes des boutons */
  .text-sm {
    font-size: 0.8rem !important;
  }
  
  /* Ajuster les paddings des boutons */
  .px-4 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  
  .px-6 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  
  /* Améliorer les cartes */
  .bg-card {
    padding: 1rem !important;
  }
  
  /* Améliorer les inputs */
  input, textarea, select {
    font-size: 16px !important; /* Évite le zoom sur iOS */
    padding: 0.75rem !important;
  }
  
  /* Améliorer les boutons */
  button {
    min-height: 44px !important; /* Taille minimum recommandée pour le touch */
    font-size: 1rem !important;
  }
  
  /* Améliorer la navigation */
  nav {
    padding: 0.5rem !important;
  }
  
  /* Améliorer les modales */
  .modal {
    margin: 1rem !important;
    max-height: calc(100vh - 2rem) !important;
  }
}

/* Améliorations pour le mode paysage sur mobile */
@media (max-width: 768px) and (orientation: landscape) {
  .py-20 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  
  .mt-24 {
    margin-top: 1rem !important;
  }
  
  .h-40 {
    height: 8rem !important;
  }
}

/* Améliorations pour l'accessibilité tactile */
@media (max-width: 768px) {
  /* Augmenter les zones de clic */
  a, button, [role="button"] {
    min-height: 44px !important;
    min-width: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Améliorer les liens */
  a {
    padding: 0.5rem !important;
  }
  
  /* Améliorer les éléments interactifs */
  [tabindex]:not([tabindex="-1"]) {
    min-height: 44px !important;
    min-width: 44px !important;
  }
}

/* Améliorations pour les performances sur mobile */
@media (max-width: 768px) {
  /* Réduire les animations coûteuses */
  .animate-float,
  .animate-pulse,
  .animate-pulse-glow {
    animation: none !important;
  }
  
  /* Réduire les effets de flou */
  .blur-xl,
  .blur-2xl {
    filter: blur(8px) !important;
  }
  
  .backdrop-blur-md {
    backdrop-filter: blur(8px) !important;
  }
}