/*Reset CSS*/
body {
	background-image: url('images/fond-fix-VL.jpg'); /* Remplacez par votre image */
    background-attachment: fixed; /* Le fond reste fixe lors du défilement */
    background-position: center; /* Centre l'image */
    background-repeat: no-repeat; /* Empêche la répétition de l'image */
    background-size: cover; /* Adapte l'image pour couvrir toute la zone */
    background-color: #000000;  /* Optionnel : couleur de secours */
    margin: 0; /* Enlève les marges par défaut */
    padding: 0; /* Enlève le padding par défaut */
    color: white;
    font-family: futura;
    
    .responsive-img {
        max-width: 100%; /* L'image ne dépasse pas la largeur du div */
        height: auto;    /* Garde le ratio hauteur/largeur original */
        display: block;  /* Supprime l'espace vide sous l'image */
    }
}

*{
    margin: 0px;
    padding: 0px;
    font-family: Futura, sans-serif;
}

nav{
    width: 100%;
    margin: 0px auto 40px auto;
    background-color: black;
    position: sticky;
    top: 0px;
}

nav ul{
    list-style-type: none;
}

nav li{
    float: left;
    width: 12%; /*100% divisé par le nombre d'éléments de menu*/
    text-align: center; /*Centre le texte dans les éléments de menu*/
}

/*Evite que le menu n'ait une hauteur nulle*/
nav ul::after{
    content: "";
    display: table;
    clear: both;
}

nav a{
    display: block; /*Toute la surface sera cliquable*/
    text-decoration: none;
    color: white;
    border-bottom: 2px solid transparent;/*Evite le décalage des éléments sous le menu à cause de la bordure en :hover*/
    padding: 10px 0px;/*Agrandit le menu et espace la bordure du texte*/
}

nav a:hover{
    color: orange;
    border-bottom: 2px solid gold;
}

.conteneur{
  margin-inline: auto;
  max-width: 3000px;
  padding-inline: 1rem;
  height: 1500px;
}

.header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    justify-content: space-between;
    margin-block: 1.5rem;
}

@media (min-width: 750px) {
    .header {
        flex-direction: row;
        align-item: center;
    }
}