/* Transition pour changer la largeur des éléments p de #bonton-bar */
#bonton-bar * {
  transition: width 0.3s; /* Transition de largeur sur les éléments p */
  position: relative; /* Position relative pour les éléments p */
  margin: auto 0;
}

#bonton-bar div{
  margin: auto;
}

/* Pseudo-élément ::after pour créer une barre de progression */
#bonton-bar p::after {
  background-color: #8B1A1A; /* Couleur de fond de la barre de progression */
  transition: width 0.3s; /* Transition de largeur sur la barre de progression */
  position: absolute; /* Position absolue pour le pseudo-élément */
  margin: 5px auto; /* Marge horizontale automatique pour centrer */
  bottom: -8px; /* Décaler vers le bas de 8 pixels */
  content: ""; /* Contenu vide pour le pseudo-élément */
  height: 4px; /* Hauteur de la barre de progression */
  width: 0px; /* Largeur initiale à 0% */
  right: 0; /* Aligner sur la droite */
  left: 0; /* Aligner sur la gauche */
  border-radius: 4px; /* Bordures arrondies */
}

/* Au survol de #bonton-bar, la barre de progression devient pleine */
#bonton-bar:hover p::after {
  width: 100%; /* Largeur de la barre de progression à 100% au survol */
}

/* Styles pour les boutons dans .button_activate */
.button_activate a {
  display: inline-block; /* Afficher en tant que bloc en ligne */
  text-decoration: none; /* Supprimer la décoration de texte */
  transition: 0.3s ease; /* Transition de 0.3s avec une courbe de transition facile */
  position: relative; /* Position relative pour les boutons */
  overflow: hidden; /* Masquer tout contenu débordant */
  padding: 5px; /* Espacement interne de 5 pixels */
  margin: 5px; /* Marge de 5 pixels autour du bouton */
  width: 61%; /* Largeur de 61% */
  z-index: 1; /* Index de z pour le positionnement */
}

/* Au survol, le texte devient en gras et le fond apparaît */
.button_activate a:hover {
  font-weight: bold; /* Texte en gras au survol */
}

/* Pseudo-élément ::before pour créer un fond lors du survol */
.button_activate a::before {
  animation: slideUp 0.3s forwards; /* Animation de glissement vers le haut */
  transform: translateY(0); /* Aucune transformation en Y au début */
  position: absolute; /* Position absolue pour le pseudo-élément */
  height: 100%; /* Hauteur à 100% */
  width: 100%; /* Largeur à 100% */
  z-index: -1; /* Index de z pour se situer en dessous du bouton */
  content: ""; /* Contenu vide pour le pseudo-élément */
  bottom: 0; /* Aligner en bas */
  left: 0; /* Aligner à gauche */
}

/* Animation pour faire monter le fond lors du survol */
.button_activate a:hover::before {
  animation: slideDown 0.3s forwards; /* Animation de glissement vers le bas au survol */
}

/* Animation pour faire monter le fond */
@keyframes slideUp {
  from {
    transform: translateY(0); /* Début de la transformation à la position Y 0 */
  }
  to {
    transform: translateY(-100%); /* Fin de la transformation à la position Y -100% */
  }
}

/* Animation pour faire descendre le fond */
@keyframes slideDown {
  from {
    transform: translateY(100%); /* Début de la transformation à la position Y 100% */
  }
  to {
    transform: translateY(0); /* Fin de la transformation à la position Y 0 */
  }
}