/* CSS pour le système de langue simple */

/* Amélioration du dropdown langue */
#langueDropdown {
    transition: all 0.2s ease !important;
    font-weight: 500 !important;
}

.dropdown-item[onclick*="setLanguage"] {
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.dropdown-item[onclick*="setLanguage"]:hover {
    background-color: var(--primary-color) !important;
    color: white !important;
    transform: translateX(3px) !important;
}

.dropdown-item[onclick*="setLanguage"]:active {
    transform: translateX(1px) scale(0.98) !important;
}

/* Animation des drapeaux */
.flag-icon {
    transition: all 0.2s ease !important;
}

.dropdown-item:hover .flag-icon {
    transform: scale(1.1) !important;
}

/* Indicateur de langue active dans le bouton */
#langueDropdown.language-active {
    background-color: rgba(var(--primary-color), 0.1);
    border-color: var(--primary-color);
}



/* Animation pour le changement de langue */
.language-changing {
    position: relative;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.language-changing::before {
    content: '🔄';
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: translateY(-50%) rotate(0deg); }
    to { transform: translateY(-50%) rotate(360deg); }
}

/* Style pour les futurs éléments traduits */
[data-lang] {
    transition: opacity 0.3s ease;
}

/* Préparation pour le système JSON */
.json-translate-ready {
    position: relative;
}