/* Style pour le menu */
.menu {
  background-color: #ffffff;  /* Couleur de fond douce pour le menu */
  padding: 10px 0;  /* Espace vertical dans le menu */
  text-align: center;  /* Centrer le menu horizontalement */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Légère ombre pour séparer le banner */
  width: 100%;
  z-index: 1000;
  position: fixed;
  top: 70px;
}

/* Style pour les liens du menu */
.menu ul {
  list-style-type: none;  /* Retire les puces */
  margin: 0;
  padding: 0;
  display: flex;  /* Affiche les éléments sur une ligne */
  justify-content: center;  /* Centre les éléments horizontalement */
}

.menu ul li {
  margin: 0 15px;  /* Espacement entre les éléments du menu */
}

.menu ul li a {
  text-decoration: none;  /* Retire le soulignement des liens */
  font-family: 'Quicksand', sans-serif;  /* Utilise une police douce */
  font-size: 1.2rem;  /* Ajuste la taille de la police */
  color: #333;  /* Couleur de texte */
  padding: 10px 20px;  /* Ajoute de l'espace autour des liens */
  border-radius: 5px;  /* Coins arrondis */
  transition: background-color 0.3s ease;  /* Transition douce lors du hover */
}

/* Effet au survol du lien */
.menu ul li a:hover {
  background-color: #d7e7ec;  /* Change la couleur au survol (le bleu pastel) */
  color: #000;  /* Change la couleur du texte au survol */
}

/* Style pour le lien actif (celui qui est actuellement sélectionné) */
.menu ul li a.active {
  color: #000;  /* Couleur du texte pour le bouton actif */
  font-weight: bold;  /* Optionnel : rendre le texte du lien plus visible */
}

  /* Pour les écrans de petite taille */
  @media (max-width: 600px) {
    .menu {
      top: 55px;
      padding : 0;
    }

    .menu ul li a {
      font-size: 65%;
      padding: 2px 4px;
    }
    
  }