header {
    display: flex;
    align-items: center; /* Ajustement pour aligner verticalement */
    justify-content: space-between;
    background-color: #2A5877; /* Couleur de fond plus moderne */
    padding: 0 20px;
    color: #ffffff; /* Texte blanc pour contraste */
}

nav {
    display: flex;
}

.tab {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    margin: 5px 15px 0 15px;
    //margin: 0 15px;
    transition: all 0.3s ease; /* Transition douce */
    cursor: pointer;
    border: 2px solid transparent; /* Préparer la bordure pour l'effet hover */
    padding: 10px; /* Padding pour un meilleur look */
}

.tab:hover {
    background-color: #495057; /* Changement de couleur au survol */
    border-color: #f8f9fa; /* Bordure visible au survol */
    transform: scale(1.1); /* Légère augmentation de taille */
}

.tab img {
    height: 30px;
    width: 30px;
}

.tab.active, .tab:hover {
    background-color: #ffffff;
    color: #343a40; /* Texte plus foncé pour l'onglet actif */
    border-radius: 10px 10px 0 0;
    border: none;
}

.stats, .points {
    display: flex;
    align-items: center;
    font-size: 16px;
}
/* Média queries pour les petits écrans */
@media (max-width: 768px) {
    header {
        flex-direction: column; /* Empilement vertical des éléments */
        align-items: center;
    }

    nav {
        width: 100%; /* Assure que la barre de navigation prend toute la largeur */
        margin: 0; /* Élimine les marges pour que nav s'étende correctement */
    }

    .tab {
        height: auto; /* Assure que les onglets prennent toute la hauteur */
        margin: 5px 0 0 0; /* Ajustement de l'espacement vertical */
        padding: 10px 15px; /* Réduction du padding */
        flex-grow: 1; /* Permet à chaque onglet de grandir uniformément */
    }

    .tab img {
        height: 20px; /* Réduction de la taille des images */
        width: 20px;
    }

    .stats, .points {
        display: none; /* Masquage des éléments stats et points sur les petits écrans */
    }
    
    .stats .streak-icon {
        width: 16px;
        height: 16px;
    }
    
    .points .streak-icon {
        width: 16px;
        height: 16px;
    }

}