/*image backgroud*/

.bg-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-size: cover; /* L'image couvre tout l'espace */
    background-position: center; /* L'image est centrée */
    background-repeat: no-repeat;
}

 /* Overlay pour améliorer la lisibilité */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: rgba(0, 0, 0, 0.1); /* Overlay semi-transparent */
}

/* menu mobile*/
.menu-toggle {
  display: none;
  font-size: 2rem;
  background: none;
  border: none;
  color: #333;
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 1000;
  cursor: pointer;
}

/* Barre de navigation */
.main-nav {
  padding: 1rem;
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.nav-links a {
  text-decoration: none;
  color: #333;
  padding: 0.5rem 1rem;
  background-color: #e0e0e0;
  border-radius: 5px;
}

.nav-links a:hover,
.nav-links a.active {
  background-color: #b0c4de;
}

header h1 {
    font-size: 2.5em;
    text-align: center;
    justify-content: center;
    color: rgb(253, 253, 253);
}




/* 📄 Titre section */
h2 {
  text-align: center;
  margin: 2rem 0 1rem;
  color: #fff;
  padding: 1rem;
}

/* 📦 Conteneur des blocs de liens */
.link-sections {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 4rem;
  flex-wrap: wrap;
  margin: 2rem auto;
  padding: 1rem;
}

.button-container,
.button-container2 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* 🎯 Boutons de lien */
.link-button {
  display: inline-block;
  text-decoration: none;
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 5px;
  font-weight: bold;
  text-align: center;
  transition: background-color 0.3s ease;
}

/* 🎨 Couleurs personnalisées */
.button1 { background-color: #2980b9 !important; } /* Bleu rivière */
.button2 { background-color: #27ae60 !important; } /* Vert nénuphar */
.button3 { background-color: #f1c40f !important; color: #2c3e50 !important; } /* Sable clair */
.button4 { background-color: #2c3e50 !important; }
.button5 { background-color: #16a085 !important; }
.button6 { background-color: #7f8c8d !important; }
.button7 { background-color: #3498db !important; }
.button8 { background-color: #1abc9c !important; }

.button-container2 a:nth-child(1) { background-color: #34495e !important; }
.button-container2 a:nth-child(2) { background-color: #8e44ad !important; }

/* 🖱 Effet au survol */
.link-button:hover {
  filter: brightness(1.1);
}