.bulle-aide .assistance 	{
	font-family: -apple-system, system-ui, system-ui, "Segoe UI", Roboto, "Helvetica Neue", "Fira Sans", Ubuntu, Oxygen, "Oxygen Sans", Cantarell, "Droid Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Lucida Grande", Helvetica, Arial, sans-serif;
}

.bulle-aide 
	{
	width: 27px;
	height: 27px;
	font-size: 20px;
	font-weight: 600;
	display: inline;
	align-items: center;
	text-align: center;
	vertical-align: middle;
	background-color: #ECFCCA ;
	color: black;
	border: 1px solid black;
	border-radius: 50%;
	display: inline-flex;	
	padding: 2px;
	padding-left: 8px;
	padding-right: 8px;
	margin:0;
	margin-left: 5px;
	margin-right: 5px;
}

.assistance
	{
	z-index: 5000;
  font-size: 22px;
  font-weight: 700;
  align-items: center;
  vertical-align: middle;
 -webkit-text-stroke: 0.5px black; 
  color: #ECFCCA ;
}

/* conteneur de la bulle d'aide */
.bulle-conteneur {
  position: relative; /* Indispensable pour positionner la bulle */
  display: inline-block;
  /* border-bottom: 1px dotted black; Pour indiquer qu'il y a quelque chose à voir */
  cursor: help; /* Change le curseur en point d'interrogation */
}

/* La bulle d'aide elle-même */
.bulle-conteneur::after {
	z-index: 6000;
  content: attr(texte-aide); /* Récupère le texte de l'attribut data-tooltip */
  white-space: pre-wrap;
  position: absolute;
  min-width: 300px;
  margin: 10px;
  transform: translateY(-50%); /*  Centre la bulle horizontalement */
  
  /* Style de la bulle */
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  background-color: #ECFCCA;
  border: 1px solid grey;
  box-shadow: 4px 5px 5px grey;
  color: black;
  padding: 8px 12px;
  border-radius: 20px;
  text-align: left;
  
  /* Masque la bulle par défaut */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease; /* Ajoute une transition douce */
}

.dessus::after {
	z-index: 6000;
  bottom: 50%; /* Positionne la bulle  */
  transform: translateX(-50%);
}

.dessous::after {
	z-index: 6000;
  transform: translateY(0%);
  top: 50%; /* Positionne la bulle  */
  transform: translateX(-50%);
}

.droite::after {
 	z-index: 6000;
  left: 100%;
  height: auto;
}

.gauche::after {
	z-index: 6000;
  transform: translateX(-110%) translateY(-50%);
  height: auto;
}

.milieu::after {
	z-index: 6000;
  transform: translateX(-50%) translateY(-50%);
  height: auto;
}

/* Affichage de la bulle au survol */
.bulle-conteneur:hover::after {
	z-index: 6000;
  opacity: 1;
  visibility: visible;
}