/**
 * Styles pour le pattern a_tooltip, basé sur la maquette Figma.
 */

.a-tooltip {
  position: relative; /* Nécessaire pour positionner l'infobulle */
  display: inline-flex;
  cursor: help;
}

/* La bulle de l'infobulle */

.a-tooltip::before {
  position: absolute;
  z-index: 10;
  bottom: calc(100% + 0.625rem);
  left: 50%;
  visibility: hidden;
  width: 15.625rem;
  margin-left: -7.8125rem; /* Moitié de la largeur pour centrer */
  padding: 0.9375rem;
  content: attr(data-tooltip);
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
  transform: translateY(0.625rem);
  white-space: normal;
  opacity: 0;
  color: #313243;
  border-radius: 1.25rem;
  background-color: #deddfd;
  font-family: Inter, sans-serif;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1rem;
}

/* La flèche de la bulle */

.a-tooltip::after {
  position: absolute;
  z-index: 10;
  bottom: 100%;
  left: 50%;
  visibility: hidden;
  margin-left: -0.625rem;
  content: "";
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
  transform: translateY(0.625rem);
  opacity: 0;
  border-width: 0.625rem 0.625rem 0 0.625rem;
  border-style: solid;
  border-color: #deddfd transparent transparent transparent;
}

/* Affichage au survol */

.a-tooltip:hover::before,
.a-tooltip:hover::after {
  visibility: visible;
  transform: translateY(0);
  opacity: 1;
}