
                     /* Style général des images de drapeaux */
                        .lang-switch img {
                            width: 28px; /* Taille du drapeau */
                            height: auto;
                            vertical-align: middle;
                            border: 1px solid #ddd; /* Une fine bordure grise par défaut */
                            box-shadow: 0 0 2px rgba(0,0,0,0.2); /* Une légère ombre */
                            transition: transform 0.3s ease, border-color 0.3s ease; /* Ajout de la transition pour la couleur de la bordure */
                        }
                        
                        /* Le texte de la langue est masqué par défaut */
                        .lang-switch .lang-text {
                            /* Nous allons utiliser opacity et max-width pour une animation plus fluide que display: none/inline */
                            opacity: 0; /* Totalement transparent par défaut */
                            max-width: 0; /* Largeur nulle pour le cacher et ne pas prendre de place */
                            overflow: hidden; /* Cache le texte qui dépasse */
                            margin-left: 0; /* Pas d'espace au début */
                            transition: opacity 0.4s ease, max-width 0.4s ease, margin-left 0.4s ease; /* Animation fluide pour l'apparition */
                        
                            font-weight: bold;
                            color: #FFF; /* Couleur du texte de la langue (vous aviez deux déclarations, j'ai gardé #FFFFFF) */
                            white-space: nowrap; /* Empêche le texte de se casser sur plusieurs lignes */
                        }
                        
                        /* Quand on survole le lien (qui contient le drapeau et le texte) */
                        .lang-switch:hover .lang-text {
                            opacity: 1; /* Rendre le texte entièrement visible */
                            max-width: 100px; /* Une largeur suffisante pour afficher le texte (ajustez si besoin) */
                            margin-left: 8px; /* L'espace désiré entre le drapeau et le texte */
                        }
                        
                        /* Drapeau de la langue active */
                        .lang-switch.active img {
                            border: 2px solid #28a745; /* Bordure verte plus épaisse (couleur bootstrap success) */
                            box-shadow: 0 0 5px rgba(40, 167, 69, 0.5); /* Ombre verte pour accentuer */
                            transform: scale(1.1); /* Agrandit légèrement le drapeau actif */
                        }
                        
                        /* Animation du drapeau au survol (non actif) */
                        .lang-switch:hover img {
                            transform: scale(1.05); /* Légèrement plus grand au survol */
                        }
                        
                        /* Pour le drapeau actif au survol, s'il a déjà une bordure verte, nous ne voulons pas qu'il la change */
                        .lang-switch.active:hover img {
                            transform: scale(1.15); /* Optionnel: l'agrandir un peu plus au survol s'il est actif */
                            /* On ne change pas la bordure ici, elle reste verte */
                        }




