/* Barre de navigation principale */
.nav_mini_bar {
    position: relative;
    margin: 2.5% auto 0;  /* Réduit la marge du haut */
    width: auto;  /* Ajuste la largeur en fonction du contenu */
    height: 40px;  /* Hauteur ajustée */
    background: #c5c6c7;
    border-radius: 8px;
    
    font-size: 0;
    box-shadow: 0 2px 3px 0 rgba(0,0,0,.1);
    display: flex;  /* Utilisation de flexbox pour que les éléments soient sur une ligne */
    align-items: center;  /* Centrer verticalement les éléments */
    justify-content: flex-start;
}

/* Liens de la barre de navigation */
.nav_mini_bar a {
    font-size: 13px;  /* Taille de la police ajustée */
    text-transform: uppercase;
    color: white;
    text-decoration: none;
    line-height: 40px;  /* Ajuste le line-height pour correspondre à la hauteur */
    display: inline-block;
    text-align: center;
    padding: 0 15px;  /* Réduit l'espace entre les liens */
    position: relative;
    z-index: 1;  /* Assure que le lien soit au-dessus de l'animation */
}

/* Animation du fond */
.nav_mini_bar .animation {
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
    
    background: #136d0b;
    border-radius: 8px;
    width: 0;  /* La largeur commence à 0 */
    transition: left 0.3s ease-in-out, width 0.3s ease-in-out; /* Transition fluide */
}

/* Animation du fond quand un lien est survolé */
.nav_mini_bar a:hover ~ .animation, .nav_mini_bar a.active ~ .animation {
    width: 60px;  /* Largeur réduite pour les liens */
}

/* L'animation et la largeur doivent être ajustées quand le lien est actif */
.nav_mini_bar a:nth-child(1):hover ~ .animation,
.nav_mini_bar a.active:nth-child(1) ~ .animation {
    width: 60px;  /* Largeur ajustée pour le premier lien */
    left: 0;  /* Positionne l'animation au début */
}

.nav_mini_bar a:nth-child(2):hover ~ .animation,
.nav_mini_bar a.active:nth-child(2) ~ .animation {
    width: 70px;  /* Largeur ajustée pour le deuxième lien */
    left: 50px;  /* Décale l'animation après le premier lien */
}

.nav_mini_bar a:nth-child(3):hover ~ .animation,
.nav_mini_bar a.active:nth-child(3) ~ .animation {
    width: 60px;  /* Largeur ajustée pour le troisième lien */
    left: 122px;  /* Décale l'animation après le premier et deuxième lien */
}

/* Styles pour le lien actif */
.nav_mini_bar a.active {
    font-weight: bold;
    color: #e5e9e5;  /* Change la couleur du lien actif */
}