/* ---boutons du header ---*/
.nav-buttons {
  position: sticky;
  top: 0;
  z-index: 20;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;

  gap: 12px;
  max-width: 100%;
  padding: 10px;
}

.nav-buttons a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 0;
}

.nav-buttons .logout-form {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 0;
}

.nav-buttons img {
  display: block;
  width: auto;
  height: clamp(70px, 6vw, 95px);
  object-fit: contain;
}

.logout-form {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
}

.logout-submit {
  all: unset;
  cursor: pointer;
  display: block;
}

.logout-submit img {
  display: block;
}

/* Bouton vers page L'association */
#btn-association {
  position: relative; /* Permet de positionner le message par rapport au bouton */
}

#btn-association::before {
  content: "Présentation de Ze Gaïlde";
  position: absolute;
  background-color: rgba(0, 0, 0, 0.8); /* Couleur de fond de l'infobulle */
  color: #fff; /* Couleur du texte de l'infobulle */
  font-size: 16px; /* Taille de la police */
  font-weight: bold; /* texte en gras */
  text-align: center; /* Alignement du texte au centre */
  padding: 5px 10px; /* Espacement interne de l'infobulle */
  border-radius: 10px;
  border: 2px solid white;
  bottom: 90%; /* Positionne le message au-dessus du bouton */
  left: 50%; /* Centre le message par rapport au bouton */
  transform: translateX(
    -50%
  ); /* Décale le message horizontalement de moitié de sa largeur pour le centrer */
  z-index: 1; /* Assure que le message est au-dessus du bouton */

  visibility: hidden; /* Cache le message par défaut */
  opacity: 0; /* Rend le message transparent */
  transition:
    visibility 0s,
    opacity 0.5s; /* Ajoute une transition pour une apparence fluide */
}

#btn-association:hover::before {
  visibility: visible; /* Affiche le message au survol */
  opacity: 1; /* Rend le message opaque */
}

/* Bouton vers page Univers */
#btn-univers {
  position: relative; /* Permet de positionner le message par rapport au bouton */
}

#btn-univers::before {
  content: "Aperçu du contenu et des projets Gaïranthia";
  position: absolute;
  background-color: rgba(0, 0, 0, 0.8); /* Couleur de fond de l'infobulle */
  color: #fff; /* Couleur du texte de l'infobulle */
  font-size: 16px; /* Taille de la police */
  font-weight: bold; /* texte en gras */
  text-align: center; /* Alignement du texte au centre */
  padding: 5px 10px; /* Espacement interne de l'infobulle */
  border-radius: 10px;
  border: 2px solid white;
  bottom: 90%; /* Positionne le message au-dessus du bouton */
  left: 50%; /* Centre le message par rapport au bouton */
  transform: translateX(
    -50%
  ); /* Décale le message horizontalement de moitié de sa largeur pour le centrer */
  z-index: 1; /* Assure que le message est au-dessus du bouton */

  visibility: hidden; /* Cache le message par défaut */
  opacity: 0; /* Rend le message transparent */
  transition:
    visibility 0s,
    opacity 0.5s; /* Ajoute une transition pour une apparence fluide */
}

#btn-univers:hover::before {
  visibility: visible; /* Affiche le message au survol */
  opacity: 1; /* Rend le message opaque */
}

/* Bouton vers Hall de Guilde */
#btn-Guilde {
  position: relative; /* Permet de positionner le message par rapport au bouton */
}

#btn-Guilde::before {
  content: "Collaborateurs et partenaires";
  position: absolute;
  background-color: rgba(0, 0, 0, 0.8); /* Couleur de fond de l'infobulle */
  color: #fff; /* Couleur du texte de l'infobulle */
  font-size: 16px; /* Taille de la police */
  font-weight: bold; /* texte en gras */
  text-align: center; /* Alignement du texte au centre */
  padding: 5px 10px; /* Espacement interne de l'infobulle */
  border-radius: 10px;
  border: 2px solid white;
  bottom: 90%; /* Positionne le message au-dessus du bouton */
  left: 50%; /* Centre le message par rapport au bouton */
  transform: translateX(
    -50%
  ); /* Décale le message horizontalement de moitié de sa largeur pour le centrer */
  z-index: 1; /* Assure que le message est au-dessus du bouton */

  visibility: hidden; /* Cache le message par défaut */
  opacity: 0; /* Rend le message transparent */
  transition:
    visibility 0s,
    opacity 0.5s; /* Ajoute une transition pour une apparence fluide */
}

#btn-Guilde:hover::before {
  visibility: visible; /* Affiche le message au survol */
  opacity: 1; /* Rend le message opaque */
}

/* Bouton vers collaboration */
#btn-Collaboration {
  position: relative; /* Permet de positionner le message par rapport au bouton */
}

#btn-Collaboration::before {
  content: "Devenir membre actif de Ze Gaïlde";
  position: absolute;
  background-color: rgba(0, 0, 0, 0.8); /* Couleur de fond de l'infobulle */
  color: #fff; /* Couleur du texte de l'infobulle */
  font-size: 16px; /* Taille de la police */
  font-weight: bold; /* texte en gras */
  text-align: center; /* Alignement du texte au centre */
  padding: 5px 10px; /* Espacement interne de l'infobulle */
  border-radius: 10px;
  border: 2px solid white;
  bottom: 90%; /* Positionne le message au-dessus du bouton */
  left: 50%; /* Centre le message par rapport au bouton */
  transform: translateX(
    -50%
  ); /* Décale le message horizontalement de moitié de sa largeur pour le centrer */
  z-index: 1; /* Assure que le message est au-dessus du bouton */

  visibility: hidden; /* Cache le message par défaut */
  opacity: 0; /* Rend le message transparent */
  transition:
    visibility 0s,
    opacity 0.5s; /* Ajoute une transition pour une apparence fluide */
}

#btn-Collaboration:hover::before {
  visibility: visible; /* Affiche le message au survol */
  opacity: 1; /* Rend le message opaque */
}

/* Bouton vers Gaïzette */
#btn-Gaïzette {
  position: relative; /* Permet de positionner le message par rapport au bouton */
}

#btn-Gaïzette::before {
  content: "Les dernières nouvelles";
  position: absolute;
  background-color: rgba(0, 0, 0, 0.8); /* Couleur de fond de l'infobulle */
  color: #fff; /* Couleur du texte de l'infobulle */
  font-size: 16px; /* Taille de la police */
  font-weight: bold; /* texte en gras */
  text-align: center; /* Alignement du texte au centre */
  padding: 5px 10px; /* Espacement interne de l'infobulle */
  border-radius: 10px;
  border: 2px solid white;
  bottom: 90%; /* Positionne le message au-dessus du bouton */
  left: 50%; /* Centre le message par rapport au bouton */
  transform: translateX(
    -50%
  ); /* Décale le message horizontalement de moitié de sa largeur pour le centrer */
  z-index: 1; /* Assure que le message est au-dessus du bouton */

  visibility: hidden; /* Cache le message par défaut */
  opacity: 0; /* Rend le message transparent */
  transition:
    visibility 0s,
    opacity 0.5s; /* Ajoute une transition pour une apparence fluide */
}

#btn-Gaïzette:hover::before {
  visibility: visible; /* Affiche le message au survol */
  opacity: 1; /* Rend le message opaque */
}

/* Bouton dons*/
#btn-dons {
  position: relative; /* Permet de positionner le message par rapport au bouton */
}

#btn-dons::before {
  content: "Contribuez financièrement au développement de l'univers Gaïranthia® !";
  position: absolute;
  background-color: rgba(0, 0, 0, 0.8); /* Couleur de fond de l'infobulle */
  color: #fff; /* Couleur du texte de l'infobulle */
  font-size: 16px; /* Taille de la police */
  font-weight: bold; /* texte en gras */
  text-align: center; /* Alignement du texte au centre */
  padding: 5px 10px; /* Espacement interne de l'infobulle */
  border-radius: 10px;
  border: 2px solid white;
  bottom: 90%; /* Positionne le message au-dessus du bouton */
  left: 50%; /* Centre le message par rapport au bouton */
  transform: translateX(
    -50%
  ); /* Décale le message horizontalement de moitié de sa largeur pour le centrer */
  z-index: 1; /* Assure que le message est au-dessus du bouton */

  visibility: hidden; /* Cache le message par défaut */
  opacity: 0; /* Rend le message transparent */
  transition:
    visibility 0s,
    opacity 0.5s; /* Ajoute une transition pour une apparence fluide */
}

#btn-dons:hover::before {
  visibility: visible; /* Affiche le message au survol */
  opacity: 1; /* Rend le message opaque */
}

#btn-entrée {
  position: relative; /* Permet de positionner le message par rapport au bouton */
}

#btn-entrée::before {
  content: "Accès membres";
  position: absolute;
  background-color: rgba(0, 0, 0, 0.8); /* Couleur de fond de l'infobulle */
  color: #fff; /* Couleur du texte de l'infobulle */
  font-size: 16px; /* Taille de la police */
  font-weight: bold; /* texte en gras */
  text-align: center; /* Alignement du texte au centre */
  padding: 5px 10px; /* Espacement interne de l'infobulle */
  border-radius: 10px;
  border: 2px solid white;
  bottom: 90%; /* Positionne le message au-dessus du bouton */
  left: 50%; /* Centre le message par rapport au bouton */
  transform: translateX(
    -50%
  ); /* Décale le message horizontalement de moitié de sa largeur pour le centrer */
  z-index: 1; /* Assure que le message est au-dessus du bouton */

  visibility: hidden; /* Cache le message par défaut */
  opacity: 0; /* Rend le message transparent */
  transition:
    visibility 0s,
    opacity 0.5s; /* Ajoute une transition pour une apparence fluide */
}

#btn-entrée:hover::before {
  visibility: visible; /* Affiche le message au survol */
  opacity: 1; /* Rend le message opaque */
}

/* Infobulle bouton paramètres */
#btn-Paramètres {
  position: relative; /* Permet de positionner l'infobulle par rapport à ce bouton */
  transition: transform 1s ease-in-out;
}

#btn-Paramètres:hover {
  transform: rotate(-360deg);
}

#btn-Paramètres::before {
  content: "Paramètres de votre profil";
  position: absolute;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  bottom: 90%;
  padding: 5px 10px;
  border-radius: 10px;
  border: 2px solid white;
  font-size: 16px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 3s ease;
  z-index: 1;
}

#btn-Paramètres:hover::before {
  visibility: visible;
  opacity: 1;
}

#btn-privatif {
  position: relative; /* Permet de positionner l'infobulle par rapport à ce bouton */
}

#btn-privatif::before {
  content: "Accès au contenu privatif";
  position: absolute;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  bottom: 90%;
  padding: 5px 10px;
  border-radius: 10px;
  border: 2px solid white;
  font-size: 16px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

#btn-privatif:hover::before {
  visibility: visible;
  opacity: 1;
}

/* Bouton déconnexion */
#btn-Deco {
  position: relative; /* Permet de positionner l'infobulle par rapport à ce bouton */
  z-index: 20;
  transition: transform 1s ease-in-out;
}

#btn-Deco:hover {
  transform: rotate(360deg);
}

#btn-Deco::before {
  content: "Déconnexion";
  position: absolute;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fd0202;
  bottom: 90%;
  padding: 5px 5px;
  border-radius: 10px;
  border: 2px solid white;
  font-size: 16px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 3s ease;
  z-index: 1;
  left: 50%;
  transform: translateX(-50%);
}

#btn-Deco:hover::before {
  visibility: visible;
  opacity: 1;
}

/* Bouton discord */
#btn-discord {
  position: relative;
}

#btn-discord::before {
  content: "Rejoignez le serveur Discord pour voter, commenter, suggérer!";
  position: absolute;
  background-color: rgba(0, 0, 0, 0.8); /* Couleur de fond de l'infobulle */
  color: #fff; /* Couleur du texte de l'infobulle */
  font-size: 16px; /* Taille de la police */
  font-weight: bold; /* texte en gras */
  text-align: center; /* Alignement du texte au centre */
  padding: 5px 10px; /* Espacement interne de l'infobulle */
  border-radius: 10px;
  border: 2px solid white;
  bottom: 90%; /* Positionne le message au-dessus du bouton */
  left: 50%; /* Centre le message par rapport au bouton */
  transform: translateX(
    -50%
  ); /* Décale le message horizontalement de moitié de sa largeur pour le centrer */
  z-index: 1; /* Assure que le message est au-dessus du bouton */

  visibility: hidden; /* Cache le message par défaut */
  opacity: 0; /* Rend le message transparent */
  transition:
    visibility 0s,
    opacity 0.5s; /* Ajoute une transition pour une apparence fluide */
}

#btn-discord:hover::before {
  visibility: visible;
  opacity: 1;
}

/* Bouton retour tbPub */
#btn-AccueilTB,
#btn-AccueilTBj {
  position: relative;
  z-index: 30;
}

#btn-AccueilTB::before,
#btn-AccueilTBj::before {
  content: "Accueil des membres";
  position: absolute;
  background-color: rgba(0, 0, 0, 0.8); /* Couleur de fond de l'infobulle */
  color: #fff; /* Couleur du texte de l'infobulle */
  font-size: 16px; /* Taille de la police */
  font-weight: bold; /* texte en gras */
  text-align: center; /* Alignement du texte au centre */
  padding: 5px 10px; /* Espacement interne de l'infobulle */
  border-radius: 10px;
  border: 2px solid white;
  bottom: 90%; /* Positionne le message au-dessus du bouton */
  left: 50%; /* Centre le message par rapport au bouton */
  transform: translateX(
    -50%
  ); /* Décale le message horizontalement de moitié de sa largeur pour le centrer */
  z-index: 21; /* Assure que le message est au-dessus du bouton */

  visibility: hidden; /* Cache le message par défaut */
  opacity: 0; /* Rend le message transparent */
  transition:
    visibility 0s,
    opacity 0.5s; /* Ajoute une transition pour une apparence fluide */
}

#btn-AccueilTB:hover::before,
#btn-AccueilTBj:hover::before {
  visibility: visible;
  opacity: 1;
}

#btn-retourJardin {
  position: relative;
  z-index: 20;
}

#btn-retourJardin::before {
  content: "Retour au Jardin";
  position: absolute;
  background-color: rgba(0, 0, 0, 0.8); /* Couleur de fond de l'infobulle */
  color: #fff; /* Couleur du texte de l'infobulle */
  font-size: 16px; /* Taille de la police */
  font-weight: bold; /* texte en gras */
  text-align: center; /* Alignement du texte au centre */
  padding: 5px 10px; /* Espacement interne de l'infobulle */
  border-radius: 10px;
  border: 2px solid white;
  bottom: 90%; /* Positionne le message au-dessus du bouton */
  left: 50%; /* Centre le message par rapport au bouton */
  transform: translateX(
    -50%
  ); /* Décale le message horizontalement de moitié de sa largeur pour le centrer */
  z-index: 1; /* Assure que le message est au-dessus du bouton */

  visibility: hidden; /* Cache le message par défaut */
  opacity: 0; /* Rend le message transparent */
  transition:
    visibility 0s,
    opacity 0.5s; /* Ajoute une transition pour une apparence fluide */
}

#btn-retourJardin:hover::before {
  visibility: visible;
  opacity: 1;
}

#btn-retourBibli {
  position: relative;
  z-index: 20;
}

#btn-retourBibli::before {
  content: "Retour à la bibliothèque";
  position: absolute;
  background-color: rgba(0, 0, 0, 0.8); /* Couleur de fond de l'infobulle */
  color: #fff; /* Couleur du texte de l'infobulle */
  font-size: 16px; /* Taille de la police */
  font-weight: bold; /* texte en gras */
  text-align: center; /* Alignement du texte au centre */
  padding: 5px 10px; /* Espacement interne de l'infobulle */
  border-radius: 10px;
  border: 2px solid white;
  bottom: 90%; /* Positionne le message au-dessus du bouton */
  left: 50%; /* Centre le message par rapport au bouton */
  transform: translateX(
    -50%
  ); /* Décale le message horizontalement de moitié de sa largeur pour le centrer */
  z-index: 1; /* Assure que le message est au-dessus du bouton */

  visibility: hidden; /* Cache le message par défaut */
  opacity: 0; /* Rend le message transparent */
  transition:
    visibility 0s,
    opacity 0.5s; /* Ajoute une transition pour une apparence fluide */
}

#btn-retourBibli:hover::before {
  visibility: visible;
  opacity: 1;
}

/* RESPONSIVE Tablettes*/
@media (max-width: 1100px) {
  .nav-buttons {
    flex-wrap: nowrap;
    gap: 8px;
  }

  .nav-buttons img {
    height: clamp(56px, 5.5vw, 72px);
  }
}

/* Correctif global infobulles nav */
.nav-buttons a::before,
.nav-buttons .logout-form::before {
  box-sizing: border-box;
  width: max-content;
  min-width: 140px;
  max-width: 320px;

  white-space: normal;
  line-height: 1.25;

  text-align: center;
  word-break: normal;
  overflow-wrap: normal;

  padding: 6px 10px;
}

/* RESPONSIVE mobiles*/
@media (max-width: 762px) {
  .nav-buttons {
    display: flex;
    flex-wrap: wrap; /* Permet aux boutons de passer sur plusieurs lignes */
    justify-content: center; /* Centre les boutons horizontalement */
    align-items: center; /* Centre les boutons verticalement */
    gap: 10px; /* Espace entre les boutons */
    max-width: 100%;
    padding: 10px; /* Espacement intérieur */
  }

  .nav-cont-buttons img {
    max-width: 80%; /* Ajustez la largeur maximale des boutons selon vos besoins */
    height: auto; /* Conserve le ratio d'aspect des boutons */
  }

  .nav-buttons a {
    display: flex;
    justify-content: center;
    align-items: center;

    margin: 0;
    padding: 0;
    line-height: 0;
  }

  .nav-buttons img {
    display: block;

    height: 50px;
    width: auto;

    object-fit: contain;

    margin: 0;
    padding: 0;
  }

  #btn-association,
  #btn-univers,
  #btn-Guilde,
  #btn-Gaïzette,
  #btn-dons,
  #btn-Paramètres,
  #btn-Deco,
  #btn-discord,
  #btn-entrée,
  #btn-privatif,
  #btn-AccueilTB,
  #btn-AccueilTBj,
  #btn-retourJardin,
  #btn-retourBibli,
  #btn-Collaboration {
    position: relative;
  }

  #btn-association::before,
  #btn-univers::before,
  #btn-Guilde::before,
  #btn-Gaïzette::before,
  #btn-dons::before,
  #btn-Paramètres::before,
  #btn-Deco::before,
  #btn-discord::before,
  #btn-entrée::before,
  #btn-privatif::before,
  #btn-AccueilTB::before,
  #btn-AccueilTBj::before,
  #btn-retourJardin::before,
  #btn-retourBibli::before,
  #btn-Collaboration::before {
    visibility: visible;
    opacity: 1;
    position: absolute;

    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);

    font-size: 11px;
    line-height: 1;
    white-space: nowrap;

    padding: 3px 5px;
    border-radius: 5px;
    border: 1px solid white;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
  }

  #btn-association::before {
    content: "Présentation";
  }

  #btn-univers::before {
    content: "Aperçu";
  }

  #btn-Guilde::before {
    content: "Collaborateurs";
  }

  #btn-Collaboration::before {
    content: "Collaborer";
  }

  #btn-Gaïzette::before {
    content: "News";
  }

  #btn-dons::before {
    content: "Aidez";
  }

  #btn-entrée::before {
    content: "Membres";
  }

  #btn-privatif::before {
    content: "Contenu privatif";
  }

  #btn-AccueilTB::before {
    content: "Accueil";
  }

  #btn-discord::before {
    content: "Discord";
  }

  #btn-Paramètres::before {
    content: "Paramètres";
  }

  #btn-retourBibli::before {
    content: "Bibliothèque";
  }

  #btn-retourJardin::before {
    content: "Jardin";
  }

  .nav-buttons a::before {
    box-sizing: border-box;

    width: max-content;
    min-width: 0;
    max-width: none;

    white-space: nowrap;
    line-height: 1;

    padding: 2px 4px;
    border: none;
    border-radius: 3px;

    background-color: rgba(0, 0, 0, 0.78);
    color: #fff;

    font-size: 10px;
  }
}