/* Style général du corps */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  /* Chemin vers ton fond.png dans le dossier images */
  background-image: url('./images/fond2.png');
  background-size: auto;
  background-position: center;
  background-repeat: no-repeat;
}

/* La navbar avec effet glass, positionnée en haut */
.navbar {
  position: relative; 
  top: 20px; /* espace depuis le haut */
  left: 50%;
  transform: translateX(-50%);
  width: 80%; /* ou une valeur fixe comme 600px */
  max-width: 600px; /* limite la largeur maximale */
  height: auto;
  background: rgba(188, 188, 188, 0.2); /* semi-transparent */
  border-radius: 32px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10; /* au-dessus du fond */
  padding: 10px 20px; /* 10px en haut/bas, 20px à gauche/droite */
}

.nav-links a {
  color: white;              /* texte blanc */
  text-decoration: none;     /* supprime le soulignement */
  font-size: 18px;
  font-family: Roboto, sans-serif;
  font-weight: 400;
  cursor: pointer;
  padding: 5px 10px;         /* un peu d'espace autour */
  transition: color 0.3s;
}

.nav-links a:hover {
  color: white;              /* garde le text blanc au survol */
  text-decoration: none;     /* pas de soulignement au survol */
}

.hero-section {
  width: 100%;
  display: flex;
  justify-content: center; /* centre horizontalement */
  margin-top: 50px; /* ajuste cette valeur pour remonter ou descendre */
  /* si tu veux une hauteur spécifique, tu peux aussi ajouter height */
}


.logo-image {
  max-width: 300px; /* ajuste la taille maximale de l’image */
  width: 100%; /* pour qu’elle s’adapte à la taille max */
  height: auto; /* garde les proportions */
  margin-bottom: 50px;
  filter: drop-shadow(0 0 100px rgba(0, 255, 255, 0.9)); /* couleur cyan lumineuse */
}

/* La suite de la page */
.content {
  background-color: white;
  min-height: 2000px; /* pour voir le scroll */
  padding: 20px;
}