/* En-tête */
.header {
    position: fixed; /* Fixe le header en haut lors du scroll */
    top: 0; /* S'assure que le header est en haut */
    width: 100%; /* Prend toute la largeur de la fenêtre */
    background: linear-gradient(to right, #131312, #363f47, #131312); /* Dégradé horizontal */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1vw;
    transition: all 0.3s ease; /* Transition pour le shrink et l'opacité */
    z-index: 1000; /* Pour s'assurer qu'il est au-dessus des autres éléments */
    opacity:1;
}

.header:hover {
    opacity: 0.9; /* Change l'opacité au survol */
}

.header img {
    width: 6vw; /* 10% de la largeur de la fenêtre */
    margin-right: 8vw;
    height: auto; /* Maintient les proportions */
    transition: height 0.3s ease; /* Transition pour la taille du logo */
}

nav {
    margin-left: 3vw;
}

nav ul {
    display: flex; /* Utiliser le flexbox pour aligner les éléments en ligne */
    list-style: none; /* Supprime les puces */
    padding: 0; /* Enlève le padding par défaut */
    margin: 0; /* Enlève la marge par défaut */
}

nav ul li {
    margin-right: 3vw; /* Espacement entre les éléments de menu */
}

nav ul li a {
    text-decoration: none;
    color: white;
    position: relative; /* Positionnement relatif pour le pseudo-élément */
    font-family: 'QualyBold', sans-serif; /* Applique la police uniquement ici */
    font-size: 1.5vw;
}

nav ul li a::after {
    content: ''; /* Pseudo-élément pour la barre horizontale */
    display: block;
    height: 2px; /* Épaisseur de la barre */
    background: #a46df2; /* Couleur de la barre */
    width: 100%; /* Largeur de la barre */
    position: absolute;
    bottom: -5px; /* Positionnement sous le texte */
    left: 0;
    opacity: 0; /* Commence avec une opacité de 0 */
    transition: opacity 0.8s ease; /* Transition sur l'opacité */
}

nav ul li a:hover::after {
    opacity: 1; /* Devient visible au survol */
}


/* ------  RESPONSIVE  -----  */ 



@media (max-width: 1000px) { /* Ajuste la largeur maximale si besoin */

nav ul li a {
    font-size: 4vw;
}

.header img{
    width:8vw;
}

}