//--------------------------------
/* Infobulle personnalisée */
[data-tooltip] {
  position: relative;
}

/* Ajouter une petite flèche sous la tooltip */
/*[data-tooltip]:hover::before {
	content: "";
	position: absolute;
	top: 80%;
	left: 50%;
	transform: translateX(-50%);
	border-width: 6px;
	border-style: solid;
	border-color: black transparent transparent transparent;
	border-color: #fff blue green red;
	opacity: 1;
	visibility: visible;
}*/

[data-tooltip]::after {
	content: attr(data-tooltip);
	position: absolute;
	background: #fcfee5;
	color: #333;
	padding: 8px 12px;
	border-radius: 4px;
	font-size: 1rem;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	white-space: wrap;
	word-break: break-word;
	max-width: 250px;
	min-width: 120px;
	text-align: left;
	z-index: 999;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease-in-out;
	pointer-events: none;
	/*bottom: 100%;*/
	/*left: 20px;*/
	transform: translateX(-50%);
	transform: translateY(100%);
	margin-bottom: 8px;
}

/* Affichage au survol */
[data-tooltip]:hover::after {
	opacity: 1;
	visibility: visible;
}

/* Position par défaut (tooltip en bas) */
.tooltip-bottom[data-tooltip]::after {
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 8px;
}

/* Position alternative (tooltip en haut) */
.tooltip-top[data-tooltip]::after {
	bottom: 100%;
	left: 20%;
	transform: translateX(20%);
	margin-bottom: 8px;
}

/* Position alternative (tooltip en left) */
.tooltip-left[data-tooltip]::after {
	right: 50%;
	transform: translateX(-50%);
	margin-bottom: 8px;
}

/*------------------------------------------------------*/
/*	popup title
/*------------------------------------------------------*/
/*
[title] {
	position: relative; /* Nécessaire pour positionner la tooltip */
	cursor: pointer;
}

/* Masquer par défaut */
[title]::after,
[title]::before,
{
	opacity: 0;
	visibility: hidden;
}

/* Affichage lors du survol */

/* Ajouter une petite flèche sous la tooltip */
[title]:hover::before {
	content: "";
	position: absolute;
	top: 80%;
	left: 50%;
	transform: translateX(-50%);
	border-width: 6px;
	border-style: solid;
	border-color: black transparent transparent transparent;
	/*border-color: #fff blue green red;*/
	opacity: 1;
	visibility: visible;
}

/* Création de la tooltip avec l'attribut title */
[title]:hover::after {
	content: attr(title); /* Récupère le texte du title */
	position: absolute;
	/*background: #fff;*/
	background: #FFFCE6;
	color: #444444;
	padding: 8px 12px;
	border-radius: 6px;
	font-size: 1rem;
	/*font-weight: bold;*/
	text-align:left;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	white-space: normal;
	top: 110%;
	left: 50%;
	max-width:100%;
	overflow: wrap;
	transform: translateX(-50%);
	opacity: 1;
	visibility: visible;
	transition: opacity 0.2s ease-in-out;
	z-index: 1000;
}*/