/*
Copie de https://believemy.com/r/creer-une-barre-de-navigation-avec-un-indicateur-anime
 */


/* On fait en sorte que chaque élément contienne sa marge interne avec box-sizing et on retire les traits qui sont par défaut sur les liens */
* {
    box-sizing: border-box;
    text-decoration: none;
}

header {
    display: flex; /* Utiliser flexbox pour le conteneur */
    justify-content: center; /* Centrer horizontalement */
}

/* On modernise notre balise de navigation avec une petite ombre. On mets tous les éléments du menu les uns bien à côté des autres avec flexbox (display: flex) */
nav {
    background-color: rgb(28, 28, 28);
    padding: 0 20px;
    border-radius: 40px;
    box-shadow: 0 10px 40px rgba(159, 162, 177, .8);
    display: inline-flex; /* Permet à la nav de s'ajuster à la taille de son contenu */
    overflow: hidden;
    overflow-x: auto;
    position: relative;
}

/* On stylise chaque élément */
.nav-item-css {
    color: #f2f0eb;
    font-family: arial, sans-serif;
    padding: 20px;
    margin: 0 6px;
    position: relative;
}

/* Ici on met juste un petit élément avant chaque élément pour le rendre plus beau visuellement */
.nav-item-css:before {
    content: "";
    position: absolute;
    bottom: -6px;
    background-color: #f2f0eb;
    height: 5px;
    width: 100%;
    border-radius: 8px 8px 0 0;
    left: 0;
    transition: .3s;
}

/* Avec les dernières nouveautés de CSS, on peut changer les propriétés des éléments selon des conditions avec not */
.nav-item-css:not(.is-active):hover:before {
    bottom: 0;
}
.nav-item-css:not(.is-active):hover {
    color: #b32322;
}

/* Stylisons notre indicateur */
.nav-indicator {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 5px;
    transition: .4s;
    border-radius: 8px 8px 0 0;
}