nav {
  position: fixed; /* pour bloquer la barre de nav */
  width: 100%; /* largeur de la barre de nav */
  order: 1;
  display: flex;
  padding: 5px 25px; /*marge au dessus et en dessous */
  background: var(--color1); /* couleur du fond */
  box-shadow: -2px 2px 4px 4px rgba(0,0,0,.2); /* ombre */
}
.main-navlinks {
  /* Centrage de la barre de menu */
    margin-left: auto;
    margin-right: auto;
  padding: 10px 10px; /*marge au dessus et en dessous */
}
/* Paramètres menu page sélectionnée */
.pageactive {
  font-weight: bold; /* Ecriture en gras */ 
  padding-bottom: 1px; /* superpose les sous lignages */
  border-bottom: 2px solid rgb(250, 250, 250); /* Trait de soulignage */
}
.hamburger {
  display: none; /* désactivation du menu hamburger */
}
.navlinks-container a {
  margin:0 20px 0 20px; /* marge entre chaque éléments du menu */
  font-size: 16px; /* taille de la police d'écriture */
  text-decoration: none; /* Désactive le surlignage des liens déjà séléctionnés */
  color: rgb(250, 250, 250); /* Couleur du texte des menus */
  display: inline-block; /* permet de bloquer le soulignage sous le texte survolé */
  position: relative; /* permet de bloquer le soulignage sous le texte survolé */
}
.navlinks-container a::after {
  content: ""; /* permet le soulignage sous le texte survolé */
  display: block; /* permet de bloquer le soulignage sous le texte survolé */
  height: 2px; /* permet le soulignage sous le texte survolé */
  transform: scaleX(0); /* permet le soulignage sous le texte survolé */
  transform-origin: center; /* choix du point de départ du soulignage */
  background: rgb(250, 250, 250); /* couleur du soulignage */
  transition: transform 0.3s ease-out; /* vitesse de soulignage */
}
/* Effet de soulignage en passant au dessus */
.navlinks-container a:hover::after {
  transform: scaleX(1);
}

@media (max-width: 1160px) {
  .main-navlinks {
    margin-left: -10px; /* position des traits du hamburger */
  }
  /* Hamburger */
    .hamburger {
      width: 20px; /* largeur */
      height: 20px; /* Hauteur */
      cursor: pointer; /* type de curseur souris */
      border: none; /* suppression des bordures sous le hamburger */
      display: flex;
      background: var(--color1); /* couleur du fond */
      align-items: center; /* centrer en hauteur */
      position: relative; 
    }
    .hamburger span {
      width: 100%;
      height: 2px; /* epaisseur trait */
      background: var(--color3); /* couleur trait */
      position: absolute;
    }
    .hamburger span:nth-child(1),
    .hamburger span:nth-child(3) {
      transition: transform 0.3s ease-out; /* temps de transition hamburger vers croix */
    }
    .hamburger span:nth-child(1) {
      transform: translateY(7px); 
    }
    .hamburger span:nth-child(3) {
      transform: translateY(-7px);
    }
    .hamburger.open span:nth-child(1) {
      transform: translate(0) rotate(135deg); /* rotation trait inférieur */
    }
    .hamburger.open span:nth-child(2) {
      opacity: 0;
      transition: opacity 0s ease-out; /* suppression trait du milieu */
    }
    .hamburger.open span:nth-child(3) {
      transform: translate(0) rotate(-135deg); /* rotation trait supérieur */
    }
  .navlinks-container {
    /* mise en forme du menu du container mobile */
      display: flex; 
      flex-direction: column;
      align-items: center;
      position: absolute;
    background: var(--color1); /* couleur menu mobile */
    width: 100%; /* largeur menu mobile */
    left: 0; /* positionnement menu mobile */
    height: 100vh; /* hauteur menu mobile */
    transform: translate(-100%); /* direction apparition menu mobile */
  }
  .open {
    transform: translate(0%); /* permet l'apparition du menu mobile */
    transition: transform 0.3s ease-out; /* vitesse apparition menu mobile */
  }
  .navlinks-container a {
    font-size: 18px; /* taille police menu mobile */
    margin: 10px 0; /* espace entre chaque titre du menu mobile */
  }
}

@media (max-height: 400px) {
  /* Menu mobile en mode paysage */
  .navlinks-container a {
    font-size: 18px; /* taille police menu mobile */
    margin: 7px 0; /* espace entre chaque titre du menu mobile */
  }
}