.glossaire-tooltip-link {
	color: inherit;
	cursor: help;
	text-decoration-line: underline;
	text-decoration-style: dotted;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.16em;
}

.glossaire-tooltip-link::after {
	display: inline-grid;
	width: 1.5em;
	height: 1.5em;
	margin-left: 0.22em;
	border: 1px solid currentColor;
	border-radius: 50%;
	box-sizing: border-box;
	content: "i";
	font-size: 0.68em;
	font-weight: 700;
	line-height: 1;
	opacity: 0.7;
	place-items: center;
	text-decoration: none;
	transform: translateY(-0.08em);
	vertical-align: text-top;
}

.glossaire-tooltip-link:hover,
.glossaire-tooltip-link:focus {
	color: inherit;
	text-decoration-style: solid;
}

.glossaire-tooltip-link:hover::after,
.glossaire-tooltip-link:focus::after {
	opacity: 1;
}

.glossaire-tooltip {
	--glossaire-arrow-left: 50%;
	position: absolute;
	z-index: 100000;
	box-sizing: border-box;
	width: max-content;
	max-width: min(22rem, calc(100vw - 24px));
	padding: 0.7rem 0.8rem;
	border-radius: 6px;
	background: #111827;
	box-shadow: 0 16px 35px rgba(17, 24, 39, 0.22);
	color: #fff;
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.45;
	opacity: 0;
	pointer-events: none;
	text-align: left;
	transform: translateY(3px);
	transition: opacity 120ms ease, transform 120ms ease;
	white-space: normal;
}

.glossaire-tooltip.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.glossaire-tooltip::after {
	position: absolute;
	bottom: -5px;
	left: var(--glossaire-arrow-left);
	width: 10px;
	height: 10px;
	background: #111827;
	content: "";
	transform: translateX(-50%) rotate(45deg);
}

.glossaire-tooltip[data-placement="bottom"]::after {
	top: -5px;
	bottom: auto;
}
