/**
 * NAVBAR RESPONSIVE - FIX DÉFINITIF
 * GARDE LE DESIGN ORIGINAL, AJOUTE SEULEMENT LE RESPONSIVE
 * NE CHANGE RIEN SUR DESKTOP !
 */

/* ============================================
   RÈGLE 1 : NE RIEN CHANGER SUR DESKTOP
   Le design actuel est parfait, on le garde !
   ============================================ */

/* Sur desktop (>= 1024px), AUCUN changement */
@media (min-width: 1024px) {
  /* Tout reste exactement comme avant */
  header,
  header *,
  nav,
  nav * {
    /* Pas de modification sur desktop */
  }
}

/* ============================================
   RÈGLE 2 : RESPONSIVE SEULEMENT SUR TABLETTE/MOBILE
   ============================================ */

/* ===== TABLETTE (768px - 1023px) ===== */
@media (max-width: 1023px) and (min-width: 768px) {
  
  /* Réduire légèrement les espacements */
  header nav a {
    padding-left: 0.625rem !important;
    padding-right: 0.625rem !important;
    font-size: 0.875rem !important;
  }
  
  /* Réduire l'espacement entre les liens */
  header nav {
    gap: 0.5rem !important;
  }
  
  /* Logo un peu plus petit */
  header img.h-12 {
    height: 2.5rem !important;
  }
  
  /* Boutons plus compacts */
  header .px-6 {
    padding-left: 0.875rem !important;
    padding-right: 0.875rem !important;
  }
  
  /* Texte utilisateur plus petit */
  header .text-sm {
    font-size: 0.8rem !important;
  }
  
  /* Dropdowns plus étroits */
  header .absolute {
    min-width: 10rem !important;
  }
}

/* ===== TABLETTE PETITE (600px - 767px) ===== */
@media (max-width: 767px) and (min-width: 600px) {
  
  /* Cacher le menu desktop, afficher hamburger */
  header nav.hidden.lg\\:flex,
  header nav.lg\\:flex,
  header .nav-desktop {
    display: none !important;
  }
  
  header .hidden.lg\\:flex.items-center.gap-3 {
    display: none !important;
  }
  
  #mobile-menu-btn,
  button#mobile-menu-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    background: transparent !important;
    border: 2px solid #f7db61 !important;
    border-radius: 0.5rem !important;
    color: white !important;
    font-size: 1.25rem !important;
    cursor: pointer !important;
  }
  
  #mobile-menu-btn:hover {
    background: #f7db61 !important;
    color: #000 !important;
  }
  
  /* Menu mobile en grille 2 colonnes */
  #mobile-menu:not(.hidden) {
    display: block !important;
    position: fixed !important;
    top: 80px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: #141414 !important;
    z-index: 9998 !important;
    overflow-y: auto !important;
    padding: 1.5rem !important;
  }
  
  #mobile-menu nav {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }
  
  #mobile-menu nav a {
    padding: 1rem !important;
    min-height: 52px !important;
    font-size: 1rem !important;
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
    border: 1px solid #333 !important;
    border-radius: 0.5rem !important;
    color: white !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
  }
  
  #mobile-menu nav a:hover {
    background: rgba(247, 219, 97, 0.1) !important;
    border-color: #f7db61 !important;
    color: #f7db61 !important;
  }
  
  /* Logo réduit */
  header img.h-12 {
    height: 2.25rem !important;
  }
}

/* ===== MOBILE (< 600px) ===== */
@media (max-width: 599px) {
  
  /* Cacher complètement le menu desktop */
  header nav.hidden.lg\\:flex,
  header nav.lg\\:flex,
  header .nav-desktop,
  header nav {
    display: none !important;
    visibility: hidden !important;
  }
  
  header .hidden.lg\\:flex.items-center.gap-3 {
    display: none !important;
    visibility: hidden !important;
  }
  
  /* Afficher le hamburger */
  #mobile-menu-btn,
  button#mobile-menu-btn,
  header button.lg\\:hidden {
    display: flex !important;
    visibility: visible !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    background: transparent !important;
    border: 2px solid #f7db61 !important;
    border-radius: 0.5rem !important;
    color: white !important;
    font-size: 1.25rem !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
  }
  
  #mobile-menu-btn:hover {
    background: #f7db61 !important;
    color: #000 !important;
  }
  
  /* Menu mobile plein écran */
  #mobile-menu:not(.hidden) {
    display: block !important;
    position: fixed !important;
    top: 70px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: #141414 !important;
    z-index: 9998 !important;
    overflow-y: auto !important;
    padding: 1rem !important;
  }
  
  /* Menu en 1 colonne */
  #mobile-menu nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
  
  #mobile-menu nav a {
    padding: 1.25rem !important;
    min-height: 56px !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
    border: 1px solid #333 !important;
    border-radius: 0.5rem !important;
    color: white !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
  }
  
  #mobile-menu nav a:hover,
  #mobile-menu nav a:active {
    background: rgba(247, 219, 97, 0.1) !important;
    border-color: #f7db61 !important;
    color: #f7db61 !important;
    transform: translateX(5px) !important;
  }
  
  /* Logo très petit */
  header img.h-12 {
    height: 2rem !important;
  }
  
  /* Header compact */
  header .py-6 {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }
  
  header > div:first-child {
    padding-left: 3% !important;
    padding-right: 3% !important;
  }
  
  /* Espacement pour le contenu */
  body > div:first-of-type:not(#alert-messages),
  main {
    margin-top: 30px !important;
  }
}

/* ===== TRÈS PETIT MOBILE (< 400px) ===== */
@media (max-width: 399px) {
  
  /* Logo mini */
  header img.h-12 {
    height: 1.75rem !important;
  }
  
  /* Header ultra-compact */
  header .py-6 {
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
  }
  
  header > div:first-child {
    padding-left: 2% !important;
    padding-right: 2% !important;
  }
  
  /* Hamburger légèrement plus petit */
  #mobile-menu-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
  
  /* Menu mobile plus compact */
  #mobile-menu nav a {
    padding: 1rem !important;
    min-height: 52px !important;
    font-size: 1rem !important;
  }
}

/* ============================================
   ANIMATIONS ET TRANSITIONS
   ============================================ */

/* Animation ouverture menu */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#mobile-menu:not(.hidden) {
  animation: slideIn 0.3s ease-out;
}

/* ============================================
   CORRECTIONS SPÉCIFIQUES
   ============================================ */

/* Empêcher le scroll horizontal */
body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* Assurer que le header reste au-dessus */
header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  background: #141414 !important;
}

/* Menu mobile au-dessus du contenu */
#mobile-menu {
  z-index: 9998 !important;
}

/* Touch-friendly sur mobile */
@media (max-width: 1023px) {
  a,
  button {
    -webkit-tap-highlight-color: rgba(247, 219, 97, 0.2) !important;
  }
}

/* ============================================
   ACCESSIBILITÉ
   ============================================ */

/* Focus visible */
a:focus-visible,
button:focus-visible {
  outline: 2px solid #f7db61 !important;
  outline-offset: 2px !important;
}

/* Support touch */
@media (hover: none) and (pointer: coarse) {
  a,
  button {
    min-height: 44px !important;
    min-width: 44px !important;
  }
}