/* ================================================= */
/* 1. NETTOYAGE GOOGLE TRANSLATE (Essentiel) */
/* ================================================= */

/* Masquer la bannière de traduction, l'icône et l'élément d'initialisation Google */
.goog-te-banner-frame.skiptranslate,
.goog-te-removable,
#top_translate_element,
#top_translate_element_head_top {
    display: none !important;
}

/* Masquage non destructif du widget d'initialisation (Doit rester dans le DOM pour fonctionner) */
#google_translate_element_unique {
    position: absolute !important;
    left: -9999px !important;
    top: 0;
    opacity: 0 !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden !important;
}

/* Masquage de la barre flottante de confirmation qui couvre le menu (CRITIQUE) */
body > .skiptranslate,
body > .skiptranslate > iframe {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
}

/* Correction du body pour annuler l'espace blanc de Google */
body {
    top: 0px !important; 
    margin-top: 0px !important;
    position: static !important;
}

/* ================================================= */
/* 2. MENU DÉROULANT DE LANGUE (Esthétique & Stabilité) */
/* ================================================= */

/* Conteneur principal */
.language-dropdown-container {
    position: relative;
    display: inline-block; /* Garde le div sur la même ligne que les icônes */
    width: fit-content;    /* <--- AJOUTEZ CECI : La largeur s'adapte aux lettres */
    font-size: 16px;
    z-index: 99999 !important;
    vertical-align: middle;
}

/* Affichage de la langue active */
.current-lang-display {
    cursor: pointer;
    padding: 6px 10px;      /* Réduit un peu pour coller aux lettres */
    background-color: #f1f1f1;
    border: 1px solid #ccc;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 4px;               /* Réduit l'espace entre "FR" et la flèche */
    width: fit-content;     /* <--- AJOUTEZ CECI */
    user-select: none;
    font-weight: bold;
}

/* La liste déroulante elle-même */
.dropdown-list {
    display: none !important; 
    position: absolute;
    top: 100%;
    right: 0; 
    
    /* --- NOUVEAUTÉS : SCROLL & FLUIDITÉ --- */
    min-width: 180px;
    max-height: 250px;           /* Limite la hauteur de la div */
    overflow-y: auto;            /* Active le scroll vertical */
    -webkit-overflow-scrolling: touch; /* Scroll fluide sur iPhone/iOS */
    
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 0 0 8px 8px;  /* Arrondi léger en bas */
    box-shadow: 0px 8px 24px rgba(0,0,0,0.15);
    list-style: none;
    padding: 5px 0;
    margin: 0;
    z-index: 100000;
}

/* Personnalisation de la barre de défilement (Scrollbar) pour Chrome/Safari/Edge */
.dropdown-list::-webkit-scrollbar {
    width: 6px;
}
.dropdown-list::-webkit-scrollbar-track {
    background: #f1f1f1;
}
.dropdown-list::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}
.dropdown-list::-webkit-scrollbar-thumb:hover {
    background: #999;
}

/* Affichage de la liste lorsqu'elle est active */
.dropdown-list.active {
    display: block !important;
}

/* Éléments de la liste */
.dropdown-list li {
    padding: 12px 20px; /* Plus grand pour faciliter le clic sur mobile (Fat Finger friendly) */
    cursor: pointer;
    color: #333;
    white-space: nowrap;
    transition: background-color 0.2s;
    font-size: 15px;
}

/* ================================================= */
/* 3. ADAPTATION SPÉCIFIQUE AU MOBILE */
/* ================================================= */

/* Revenir aux alignements de gauche pour le mobile (si la liste est trop grande) */
@media (max-width: 768px) {
    .dropdown-list {
        right: 0 !important;  /* Gardez-le à droite si vos icônes sont à droite */
        left: auto !important;
        max-height: 300px; 
        width: fit-content;   /* <--- MODIFIEZ CECI : Ne pas forcer 200px */
        min-width: 120px;     /* Optionnel : une largeur mini pour la liste qui tombe */
    }

    /* Option pour réduire l'encombrement du bouton sur mobile */
    .current-lang-display {
        padding: 4px 8px;     /* Encore plus compact sur petit écran */
    }
    /* Augmenter la zone de clic pour mobile */
    .dropdown-list li {
        padding: 15px 20px;
        border-bottom: 1px solid #f9f9f9; /* Séparateur léger sur mobile */
    }
}