header {
  nav {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; // Aligne les éléments verticalement

    .nav-logo {
      margin-top: 1rem;
      margin-bottom: 1rem; // Espace entre le logo et les liens
      display: flex;
      justify-content: center;
    }

    .nav-liens-container {
      display: flex;
      flex-direction: column; // Aligne les liens verticalement
      width: 100%;
    }

    .nav-liens {
      text-align: center; // Centre le texte des liens

      .nav-item {
        margin: 1.5rem 0; // Espace vertical entre les liens
      }

      a {
        color: #D1D0CB;
        border-top: 1px solid #DDAC17;
        border-bottom: 1px solid #DDAC17;
        text-decoration: none; 
        display: inline-block; // Permet d'ajuster les bordures sans affecter la mise en page
        padding: .5rem 1rem; // Espace autour du texte pour allonger les bordures

        &:hover {
          color: #ad8a21;
          border-top: 1px solid #753612;
          border-bottom: 1px solid #753612;
        }
      }
    }
  }
}

// Breakpoint pour les écrans d'au moins 1200px de large
@media screen and (min-width: 1200px) {
  header {
    position: fixed;
    top: 0; // Positionne le header en haut
    left: 0; // Aligne le header à gauche
    width: 100%;
    z-index: 1000; // Assure que le header est au-dessus des autres éléments
    background-color: #325131;
    padding: 0 2.5rem; // Ajoute un padding horizontal pour éviter que le contenu touche les bords
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

    nav {
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      .nav-liens-container {
        display: flex;
        margin-right: 4rem; // Espace à droite des liens correction 
        width: auto; // Ajuste la largeur du conteneur en fonction de son contenu correction
      }

      .nav-liens {
        display: flex;
        flex-direction: row;

        .nav-item {
          margin: 0 1.5rem; // Espace horizontal entre les liens
        }

        a {
          font-size: 1.3rem;
          color: #D1D0CB;
          text-decoration: none; // Enlève la décoration du texte
          border-top: 1px solid #DDAC17;
          border-bottom: 1px solid #DDAC17;
          padding: .5rem 1rem; // Espace autour du texte pour allonger les bordures

          &:hover {
            color: #ad8a21;
            border-top: 1px solid #753612;
            border-bottom: 1px solid #753612;
          }
        }
      }
    }
  }
}

