html {
    background-image: url("../images/background.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}

body {
    background: rgba(0, 0, 0, 0);
}

.logo {
    max-width: 723px;
    width: 100%;
    height: auto;
}

.nav-link {
  position: relative;
  cursor: pointer; /* Montre que l'élément est interactif */
}

.nav-link::after {
  content: "Réinitialisez votre mot de passe par mail";
  position: absolute;
  bottom: 100%; /* Positionne l'info-bulle au-dessus */
  left: 50%;
  transform: translateX(-50%);
  background-color: #333; /* Couleur de fond */
  color: #fff; /* Couleur du texte */
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 12px;
  white-space: nowrap; /* Empêche le retour à la ligne */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 10; /* S'assure que l'info-bulle est au-dessus */
}

.nav-link:hover::after {
  opacity: 1;
  visibility: visible;
}

.navbar-brand {
  position: relative;
  cursor: pointer; /* Montre que l'élément est interactif */
}

.navbar-brand::after {
  content: "Choisir un nouveau mot de passe";
  position: absolute;
  bottom: 100%; /* Positionne l'info-bulle au-dessus */
  left: 50%;
  transform: translateX(-50%);
  background-color: #333; /* Couleur de fond */
  color: #fff; /* Couleur du texte */
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 12px;
  white-space: nowrap; /* Empêche le retour à la ligne */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 10; /* S'assure que l'info-bulle est au-dessus */
}

.navbar-brand:hover::after {
  opacity: 1;
  visibility: visible;
}