/* ============================================
   TRANSLATOR CSS — AVDA
   Style du sélecteur de langue FR/EN
   Compatible tous navigateurs modernes
   Dernière mise à jour : Juillet 2026
   ============================================ */

/* ==========================================
   CONTENEUR DU SÉLECTEUR DE LANGUE
   ========================================== */

/* Conteneur principal des boutons de langue */
.nav-lang {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: var(--spacing-sm, 12px);
  flex-shrink: 0;
}

/* ==========================================
   BOUTONS DE LANGUE — Style général
   ========================================== */

/* Style de base des boutons FR / EN */
.lang-btn {
  /* Dimensions et espacement */
  padding: 5px 10px;
  margin: 0;
  
  /* Apparence */
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  color: var(--text-white, #FFFFFF);
  border-radius: var(--radius-sm, 4px);
  
  /* Typographie */
  font-family: var(--font-primary, 'Poppins', sans-serif);
  font-size: 0.75rem;
  font-weight: var(--fw-semibold, 600);
  letter-spacing: 0.5px;
  line-height: 1.2;
  
  /* Interaction */
  cursor: pointer;
  user-select: none;
  
  /* Transitions */
  transition: all 0.25s ease;
  transition-property: background-color, border-color, color, transform, box-shadow;
  
  /* Accessibilité */
  outline: none;
}

/* Focus visible pour l'accessibilité clavier */
.lang-btn:focus-visible {
  outline: 2px solid var(--brand-primary, #DFA21A);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(223, 162, 26, 0.3);
}

/* ==========================================
   BOUTONS DE LANGUE — État hover
   ========================================== */

/* Survol des boutons */
.lang-btn:hover {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.6);
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* ==========================================
   BOUTONS DE LANGUE — État actif (langue courante)
   ========================================== */

/* Bouton de la langue actuellement active */
.lang-btn.active {
  background-color: var(--brand-primary, #DFA21A);
  border-color: var(--brand-primary, #DFA21A);
  color: #13441E;
  font-weight: var(--fw-bold, 700);
  cursor: default;
  box-shadow: 0 2px 10px rgba(223, 162, 26, 0.3);
}

/* Empêcher l'effet hover sur le bouton actif */
.lang-btn.active:hover {
  background-color: var(--brand-primary, #DFA21A);
  border-color: var(--brand-primary, #DFA21A);
  color: #13441E;
  transform: none;
  box-shadow: 0 2px 10px rgba(223, 162, 26, 0.3);
}

/* ==========================================
   SÉPARATEUR ENTRE LES BOUTONS
   ========================================== */

/* Barre verticale entre FR et EN */
.lang-separator {
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.75rem;
  font-weight: var(--fw-light, 300);
  user-select: none;
  pointer-events: none;
  line-height: 1;
}

/* ==========================================
   ANIMATION DE TRANSITION DE LANGUE
   ========================================== */

/* Classe ajoutée au body pendant le changement de langue */
body.translating {
  opacity: 0.97;
  transition: opacity 0.2s ease-in-out;
}

/* ==========================================
   MESSAGE D'ERREUR DE TRADUCTION
   ========================================== */

/* Style du message d'erreur temporaire */
.translator-error-message {
  position: fixed;
  top: 20px;
  right: 20px;
  background-color: #E53E3E;
  color: #FFFFFF;
  padding: 15px 20px;
  border-radius: 8px;
  z-index: 99999;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 500;
  max-width: 350px;
  animation: translator-slide-in 0.3s ease-out;
}

/* Animation d'entrée du message d'erreur */
@keyframes translator-slide-in {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Animation de sortie (appliquée via JS avant suppression) */
.translator-error-message.removing {
  opacity: 0;
  transform: translateX(50px);
  transition: all 0.3s ease-in;
}

/* ==========================================
   RESPONSIVE — Tablette et mobile (≤ 1023px)
   ========================================== */

@media (max-width: 1023px) {

  /* Repositionnement dans le menu mobile */
  .nav-lang {
    margin-left: 0;
    margin-top: var(--spacing-md, 16px);
    padding-top: var(--spacing-md, 16px);
    border-top: 1px solid #E8DFC0;
    justify-content: center;
    gap: 10px;
    width: 100%;
  }

  /* Adaptation des boutons pour le menu mobile */
  .lang-btn {
    /* Couleurs adaptées au fond blanc du menu mobile */
    color: var(--text-dark, #1A202C);
    border-color: rgba(0, 0, 0, 0.2);
    padding: 7px 14px;
    font-size: 0.85rem;
    letter-spacing: 0.8px;
  }

  /* Hover adapté au menu mobile */
  .lang-btn:hover {
    background-color: #FFF8E7;
    border-color: var(--brand-accent, #13441E);
    color: var(--brand-accent, #13441E);
    transform: none;
    box-shadow: none;
  }

  /* Bouton actif dans le menu mobile */
  .lang-btn.active {
    background-color: var(--brand-accent, #13441E);
    border-color: var(--brand-accent, #13441E);
    color: #FFFFFF;
    font-weight: var(--fw-bold, 700);
    box-shadow: 0 2px 8px rgba(19, 68, 30, 0.3);
  }

  /* Hover sur le bouton actif dans le menu mobile */
  .lang-btn.active:hover {
    background-color: var(--brand-accent, #13441E);
    border-color: var(--brand-accent, #13441E);
    color: #FFFFFF;
    box-shadow: 0 2px 8px rgba(19, 68, 30, 0.3);
  }

  /* Séparateur dans le menu mobile */
  .lang-separator {
    color: rgba(0, 0, 0, 0.3);
    font-size: 0.85rem;
  }

  /* Focus adapté au menu mobile */
  .lang-btn:focus-visible {
    outline-color: var(--brand-accent, #13441E);
    box-shadow: 0 0 0 3px rgba(19, 68, 30, 0.2);
  }
}

/* ==========================================
   RESPONSIVE — Petit mobile (≤ 480px)
   ========================================== */

@media (max-width: 480px) {

  /* Boutons plus grands pour une meilleure accessibilité tactile */
  .lang-btn {
    padding: 8px 16px;
    font-size: 0.9rem;
    letter-spacing: 1px;
  }

  /* Séparateur adapté */
  .lang-separator {
    font-size: 0.9rem;
  }

  /* Conteneur avec espacement réduit */
  .nav-lang {
    gap: 8px;
  }
}

/* ==========================================
   RESPONSIVE — Grand desktop (≥ 1400px)
   ========================================== */

@media (min-width: 1400px) {

  /* Boutons légèrement plus grands sur grand écran */
  .lang-btn {
    padding: 6px 12px;
    font-size: 0.8rem;
  }

  /* Conteneur avec espacement accru */
  .nav-lang {
    gap: 8px;
    margin-left: var(--spacing-md, 16px);
  }
}

/* ==========================================
   SUPPORT DU MODE SOMBRE (optionnel, futur)
   ========================================== */

/* Si le site implémente un mode sombre plus tard */
@media (prefers-color-scheme: dark) {
  /* Ces styles ne s'appliquent que si le site n'a pas déjà un thème sombre défini */
  
  /* Ajustements pour le menu mobile en mode sombre */
  @media (max-width: 1023px) {
    .lang-btn {
      color: #E2E8F0;
      border-color: rgba(255, 255, 255, 0.25);
    }

    .lang-btn:hover {
      background-color: rgba(255, 255, 255, 0.08);
      border-color: var(--brand-primary, #DFA21A);
      color: var(--brand-primary, #DFA21A);
    }

    .lang-btn.active {
      background-color: var(--brand-primary, #DFA21A);
      border-color: var(--brand-primary, #DFA21A);
      color: #13441E;
    }
  }
}

/* ==========================================
   IMPRESSION
   ========================================== */

/* Masquer le sélecteur de langue lors de l'impression */
@media print {
  .nav-lang {
    display: none;
  }
}

/* ==========================================
   FIN DU FICHIER
   ========================================== */