@font-face {
    font-family: 'HostGrotesk';
    src: url('../media/ecriture/HOST/HostGrotesk-SemiBold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.navbar {
    font-family: 'HostGrotesk', sans-serif; /* Utiliser la police HostGrotesk pour la navbar */
    background-color: #0c162c; /* Couleur de fond de la navbar */
    width: 100%; /* Longueur de la navbar */
    position: fixed; /* Fixe la navbar en haut de la page */
    top: 0; /* Positionne la navbar en haut de la page */
    z-index: 10000; /* Positionne la navbar au-dessus des autres éléments */
    height: 70px; /* Ajuster la hauteur de la navbar */
    display: flex; /* Utilise Flexbox pour aligner les éléments */
    justify-content: space-between; /* Sépare les éléments à gauche et à droite */
    align-items: center; /* Centre les éléments verticalement */
    padding: 0 20px; /* Ajoute un padding pour espacer les éléments du bord */
}

.nav-logo {
    width: 70px;
    height: 70px;
    border-radius: 50%;
}

.navbar ul {
    list-style-type: none; /* Supprime les puces de la liste */
    overflow: hidden; /* Cache les éléments qui dépassent de la navbar */
    height: 100%; /* Assure que les éléments de la liste prennent toute la hauteur de la navbar */
    display: flex; /* Utilise Flexbox pour aligner les éléments */
    align-items: center; /* Centre les éléments verticalement */
    margin-right: 2%; /* Supprime le margin par défaut */
}

li {
    margin: 0 10px; /* Ajoute un espacement horizontal entre les éléments */
}

li a {
    display: block;
    color: #ffd230;
    text-decoration: none;
    line-height: 50px; /* Aligne le texte verticalement au centre de la navbar */
    padding: 0 10px; /* Réduit le padding des mots */
    transition: background-color 0.3s ease, color 0.3s ease; /* Animation fluide sur le survol */
    border-radius: 5px; /* Coins légèrement arrondis */
}

li a:hover {
    background-color: #ffd230; /* Couleur de fond au survol */
    color: #0c162c; /* Couleur du texte au survol */
    transition: background-color 0.3s ease, color 0.3s ease; /* Animation fluide sur le survol */
    border-radius: 5px; /* Coins légèrement arrondis */
}