/******************
CONFIG DES THÈMES
******************/

/* 1. Liaison pour Tippy : il récupère la couleur définie par le thème */
.tippy-box[data-theme~='bulle_information'], .mon_infobulle[data-tippy-theme~='bulle_information']		{ --theme-color: #2179B4; }
.tippy-box[data-theme~='bulle_modification'], .mon_infobulle[data-tippy-theme~='bulle_modification']	{ --theme-color: #448C39; }
.tippy-box[data-theme~='bulle_attention'], .mon_infobulle[data-tippy-theme~='bulle_attention']			{ --theme-color: #249E02; }
.tippy-box[data-theme~='bulle_suppression'], .mon_infobulle[data-tippy-theme~='bulle_suppression']		{ --theme-color: #FF0000; }
.tippy-box[data-theme~='bulle_important'], .mon_infobulle[data-tippy-theme~='bulle_important']			{ --theme-color: #FF0000; }
.tippy-box[data-theme~='bulle_permissions'], .mon_infobulle[data-tippy-theme~='bulle_permissions']		{ --theme-color: #F58A00; }
.tippy-box[data-theme~='bulle_mail'], .mon_infobulle[data-tippy-theme~='bulle_mail']					{ --theme-color: #1582A0; }
.tippy-box[data-theme~='bulle_pdf'], .mon_infobulle[data-tippy-theme~='bulle_pdf']						{ --theme-color: #AD3A34; }
/* Pour ajouter un thème, une seule ligne suffit ici désormais */

/******************
MOTEUR UNIQUE (Automatique)
******************/

/* On cible toutes les box qui ont un attribut data-theme */
.tippy-box[data-theme] {
	--tippy-border: var(--theme-color);
	--tippy-bg: color-mix(in srgb, var(--theme-color), #FFFFFF 92%);

	background-color: var(--tippy-bg);
	color: var(--theme-color);
	border: 1px solid var(--tippy-border);
	border-radius: 15px;
}

.tippy-content {
	padding: 10px;
	font-size: 90%;
	border-radius: 15px; /* Pour correspondre à la box */
}

/******************
FLÈCHES (Générique)
******************/

/* Plus besoin de répéter par thème, var(--tippy-bg) s'adapte seule */
.tippy-box[data-placement^='top'] > .tippy-arrow::before {
	border-top-color: var(--tippy-bg);
	filter: drop-shadow(0 1px 0 var(--tippy-border));
}

.tippy-box[data-placement^='bottom'] > .tippy-arrow::before {
	border-bottom-color: var(--tippy-bg);
	filter: drop-shadow(0 -1px 0 var(--tippy-border));
}

.tippy-box[data-placement^='left'] > .tippy-arrow::before {
	border-left-color: var(--tippy-bg);
	filter: drop-shadow(1px 0 0 var(--tippy-border));
}

.tippy-box[data-placement^='right'] > .tippy-arrow::before {
	border-right-color: var(--tippy-bg);
	filter: drop-shadow(-1px 0 0 var(--tippy-border));
}

/* Style de base pour chaque bouton d'action */
.mon_infobulle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	text-decoration: none;
	position: relative;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

	/* --- COULEURS DYNAMIQUES VIA LA VARIABLE --- */
	--theme-color-fallback: #1582A0; /* Couleur par défaut si pas de thème */
	background-color: #F8FAFC;
	border: 1px solid #E2E8F0;

	/* L'icône prend la couleur du thème */
	color: var(--theme-color, var(--theme-color-fallback));

	vertical-align: middle;
}

/* Au survol du bouton */
.mon_infobulle:hover {
	/* Le fond devient une version très claire de la couleur du thème */
	background-color: color-mix(in srgb, var(--theme-color, var(--theme-color-fallback)), #FFFFFF 92%);
	/* La bordure prend la couleur du thème */
	border-color: var(--theme-color, var(--theme-color-fallback));
	/* L'ombre s'adapte aussi à la couleur */
	box-shadow: 0 0 10px color-mix(in srgb, var(--theme-color, var(--theme-color-fallback)) 15%, transparent);

	/* L'icône prend la couleur du thème */
	color: var(--theme-color, var(--theme-color-fallback)); 
}

.mon_infobulle iconify-icon {
	font-size: 150%;
}

.mon_infobulle[data-tippy-theme~="desactive_element"] {
	opacity: 0.3;
	cursor: not-allowed;
}

/* Pour l'infobulle sous forme de texte à la place d'une icone */
	.mon_infobulle.mon_infobulle_texte {
		width: auto;
		padding: 0 5px;
		gap: 5px;
	}
/* ********** */

/* Pour l'infobulle sous forme de texte à la place d'une icone, mais sur toute la largeur */
	.mon_infobulle.mon_infobulle_toute_largeur {
		width: 99%;
		border: 0;
	}

	.mon_infobulle.mon_infobulle_toute_largeur,
	.mon_infobulle.mon_infobulle_toute_largeur:hover {
		width: 99%;
		border: 0;
		box-shadow: none;
		background: transparent;
	}
/* ********** */

/* Icône pure sans fond ni padding (Texte + Icône) */
	.mon_infobulle.infobulle_pure {
		display: inline-block;
		width: auto;
		height: auto;
		border: none;
		vertical-align: middle;
	}

	.mon_infobulle.infobulle_pure iconify-icon {
		vertical-align: middle;
		margin-top: -7px;
	}

	.mon_infobulle.infobulle_pure:hover iconify-icon {
		transform: scale(1.1);
	}

	/* Annulation des effets de fond/bordure de votre CSS de base au survol */
	.mon_infobulle.infobulle_pure:hover {
		box-shadow: 0 0 5px var(--theme-color);
	}
/* ********** */