@charset "utf-8";

/* Conteneur principal de la navigation */
.main-navigation {
  width: 100%;
  padding: 15px 0;
  background-color: transparent; /* Vous pouvez mettre une couleur de fond ici */
}

/* La liste alignée */
.nav-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap; /* Permet de passer à la ligne sur mobile si besoin */
  justify-content: center; /* Centre les éléments sur la ligne */
  gap: 25px; /* Espace entre les rubriques */
}

/* Style des liens */
.nav-list li a {
  text-decoration: none;
  color: #333333; /* Couleur du texte */
  font-family: sans-serif;
  font-size: 16px;
  font-weight: 500;
  transition: color 0.3s ease;
}

/* Effet au survol des liens */
.nav-list li a:hover {
  color: #0056b3; /* Change de couleur au passage de la souris */
  text-decoration: underline;
  
  .hero-header {
  width: 100%;
  
  /* Vous définissez une hauteur fixe pour cette zone sur grand écran */
  height: 800px;
  
  /* Vous injectez votre image */
  background-image: url('banniere-le-gardien-des-souvenirs.webp');
  
  /* -- LES DEUX RÈGLES MAGIQUES -- */
  /* L'image remplit tout l'espace sans se déformer, quitte à être rognée sur les bords */
  background-size: cover;
  
  /* L'image reste centrée sur le logo, même si les côtés sont coupés sur mobile */
  background-position: center center;
  
  /* Optionnel : pour le texte que vous mettrez par-dessus */
  display: flex;
  justify-content: center;
  align-items: center;
  color: white; /* Si vous écrivez en blanc */
}

/* Sur mobile, vous pouvez réduire la hauteur de la zone pour qu'elle prenne moins de place */
@media (max-width: 768px) {
  .hero-header {
    height: 400px; /* Moins haute sur téléphone */
  }
}
}