/* MOBILE HEADER FIX - Langues, Monnaies et Partenaires */

/* ========== MOBILE (≤768px) ========== */
@media (max-width: 768px) {
  
  /* ===== STRUCTURE DU HEADER MOBILE ===== */
  
  /* Header mobile : Stack vertical avec logo puis contrôles */
  .geek-o-rama-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 0.5rem !important;
    gap: 5px !important; /* 5px entre logo et contrôles */
  }
  
  /* Ligne 1 : Logo centré */
  .geek-o-rama-header > div:first-child {
    position: relative !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 0 !important;
  }
  
  /* Ligne 2 : Chat + Drapeaux + Monnaie (5px sous le logo) */
  .mobile-controls-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 0.5rem 0 !important;
    margin-top: 0 !important;
  }
  
  /* ===== ÉLÉMENTS INDIVIDUELS ===== */
  
  /* Bouton chat : à gauche */
  .geek-o-rama-header #sf-msg-btn {
    position: relative !important;
    order: 1 !important;
    margin: 0 !important;
  }
  
  /* Language Switcher : au centre */
  .geek-o-rama-header .absolute.left-4.bottom-1,
  .geek-o-rama-header [class*="LanguageSwitcher"] {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    order: 2 !important;
    margin: 0 auto !important;
    display: flex !important;
  }
  
  /* Sélecteur de monnaie : à droite */
  .geek-o-rama-header #sf-i18n {
    position: relative !important;
    order: 3 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
  }
  
  #sf-lang {
    display: none !important;
  }
  
  #sf-cur {
    display: block !important;
    padding: 0.25rem 0.5rem;
    border: 2px solid #3b82f6;
    border-radius: 0.5rem;
    background: white;
    color: #1f2937;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
  }
  
  /* ===== PARTENAIRES / SPONSORS ===== */
  
  /* Sur mobile : afficher 1 SEUL sponsor à la fois (pas empilé) */
  .sponsors-container,
  .partners-container,
  [class*="sponsor"],
  [class*="partner"] {
    position: relative;
    overflow: hidden;
    height: auto;
    max-height: 150px; /* Hauteur fixe pour 1 seule annonce */
  }
  
  /* Slider pour sponsors sur mobile - horizontal uniquement */
  .sponsors-grid,
  .partners-grid,
  .sponsors-list {
    display: flex !important;
    overflow-x: hidden !important; /* Pas de scroll visible */
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0;
    height: 100%;
  }
  
  .sponsors-grid::-webkit-scrollbar,
  .partners-grid::-webkit-scrollbar {
    display: none !important;
  }
  
  /* Chaque sponsor prend toute la largeur et TOUTE la hauteur visible */
  .sponsor-card,
  .partner-card,
  .sponsors-grid > *,
  .partners-grid > * {
    flex: 0 0 100% !important;
    scroll-snap-align: center;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
  }
  
  /* Masquer les sponsors non-actifs */
  .sponsors-grid > *:not(:first-child),
  .partners-grid > *:not(:first-child) {
    display: none;
  }
  
  /* Animation auto-scroll pour les sponsors */
  @keyframes sponsorScroll {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-100%); }
    50% { transform: translateX(-200%); }
    75% { transform: translateX(-300%); }
  }
  
  /* Appliquer l'animation si plusieurs sponsors */
  .sponsors-grid[data-count="4"],
  .partners-grid[data-count="4"] {
    animation: sponsorScroll 20s ease-in-out infinite;
  }
  
  /* Indicateurs de pagination pour sponsors */
  .sponsors-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
  }
  
  .sponsors-dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cbd5e1;
    cursor: pointer;
  }
  
  .sponsors-dots .dot.active {
    background: #3b82f6;
    width: 24px;
    border-radius: 4px;
  }
}

/* ========== DESKTOP (≥769px) ========== */
@media (min-width: 769px) {
  
  /* ===== DISPOSITION HORIZONTALE : Chat + Drapeaux + Monnaie ===== */
  
  /* Forcer tous les éléments à être sur la même ligne au bas du header */
  
  /* Bouton chat : en bas à gauche */
  .geek-o-rama-header #sf-msg-btn {
    position: absolute !important;
    left: 1rem !important;
    bottom: 0.5rem !important;
    z-index: 100 !important;
    margin: 0 !important;
  }
  
  /* Drapeaux : juste à côté du chat, sur la MÊME ligne */
  .geek-o-rama-header .absolute.left-4.bottom-1,
  .geek-o-rama-header [class*="LanguageSwitcher"] {
    position: absolute !important;
    left: 4rem !important; /* Juste après le chat (chat width ~3rem) */
    bottom: 0.5rem !important; /* MÊME bottom que le chat */
    z-index: 100 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
  }
  
  /* Sélecteur de monnaie : TOUT À DROITE de l'en-tête, sur la MÊME ligne */
  .geek-o-rama-header #sf-i18n {
    position: absolute !important;
    right: 16px !important; /* Force à droite */
    bottom: 8px !important; /* MÊME bottom que le chat et drapeaux */
    left: auto !important;
    z-index: 100 !important;
    margin: 0 !important;
    margin-left: 0 !important;
    display: flex !important;
    align-items: center !important;
    transform: none !important;
  }
  
  /* Override any conflicting styles */
  #sf-i18n {
    position: absolute !important;
    right: 16px !important;
    left: auto !important;
  }
  
  /* ===== LANGUES ===== */
  
  /* Masquer le menu déroulant de langue (garder seulement drapeaux) */
  .language-dropdown-menu,
  [class*="language-menu"],
  .lang-dropdown {
    display: none !important;
  }
  
  /* S'assurer que les drapeaux sont visibles */
  .language-switcher,
  .lang-flags,
  [class*="lang"][class*="switch"] {
    display: flex !important;
  }
  
  /* Masquer le select de langue créé par i18n.currency.js */
  #sf-lang {
    display: none !important;
  }
  
  /* Style du sélecteur de devise sur desktop */
  #sf-cur {
    padding: 0.25rem 0.5rem;
    border: 2px solid #3b82f6;
    border-radius: 0.5rem;
    background: white;
    color: #1f2937;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
  }
  
  /* ===== PARTENAIRES ===== */
  
  /* Sur desktop : afficher tous les sponsors normalement */
  .sponsors-grid,
  .partners-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
  }
}

/* ========== STYLES COMMUNS ========== */

/* Container des drapeaux + devise */
.lang-currency-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* S'assurer que le LanguageSwitcher React est toujours visible */
.geek-o-rama-header [class*="LanguageSwitcher"],
.geek-o-rama-header .language-switcher-component {
  display: flex !important;
}

/* Style amélioré pour le sélecteur de devise */
#sf-cur:hover {
  background: #eff6ff;
  border-color: #2563eb;
}

#sf-cur:focus {
  outline: none;
  ring: 2px;
  ring-color: #3b82f6;
  ring-offset: 2px;
}

/* Animation douce pour le carousel sponsors */
.sponsors-grid,
.partners-grid {
  transition: transform 0.5s ease-in-out;
}