/*
 * Sigles explicités dans les contenus : lien vers la fiche du glossaire + infobulle.
 * Chargé uniquement sur les pages où au moins un sigle a été injecté.
 *
 * Couleurs : uniquement la charte (variables --ipdc-* existantes, valeur de la charte en repli).
 *
 * Infobulle : carte navy sur texte crème, flèche, largeur bornée. Elle est POSITIONNÉE FIXE par
 * termes.js (variables --ipg-x / --ipg-y / --ipg-arrow) et déplacée dans <body> le temps de
 * l’ouverture : un conteneur parent à overflow masqué, un transform ou un z-index de carte ne
 * peuvent plus la rogner. Elle apparaît au survol ET au focus, se ferme à Échap sans déplacer le
 * focus, et le pointeur peut y entrer (WCAG 1.4.13 : dismissible, hoverable, persistent).
 */
.ipg-term {
	display: inline;
}

/* Mot du glossaire (2.6.0) : lien seul, sans infobulle, même repère visuel que les sigles. */
.ipg-term__link,
.ipg-word {
	color: inherit;
	text-decoration: underline;
	text-decoration-style: dotted;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
	text-decoration-color: var(--ipdc-navy, #04162F);
	border-radius: 3px;
}

.ipg-term__link:hover,
.ipg-term__link:focus-visible,
.ipg-term.is-open .ipg-term__link,
.ipg-word:hover,
.ipg-word:focus-visible {
	background: transparent;
	text-decoration: underline;
}

.ipg-term__link:focus-visible,
.ipg-word:focus-visible {
	outline: 2px solid var(--ipdc-navy, #04162F);
	outline-offset: 2px;
}

/*
 * Sigle dans un bouton (titre d’accordéon, 2.5.1) : pas de lien, même repère visuel que les sigles liés
 * (soulignement pointillé), dans la couleur du texte du bouton.
 */
.ipg-term--control {
	text-decoration: underline;
	text-decoration-style: dotted;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
	text-decoration-color: currentColor;
}

/*
 * Sigle dans une diapositive de carrousel (2.7.2) : sans lien, rendu IDENTIQUE au sigle lié (même soulignement
 * pointillé navy). Posé au-dessus du lien étiré de la carte (z-index) : son infobulle s'ouvre au survol ; le clic
 * est renvoyé au lien de la carte (termes.js), d'où le curseur de lien quand la carte en a un.
 */
.ipg-term--card {
	position: relative;
	z-index: 1;
	text-decoration: underline;
	text-decoration-style: dotted;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
	text-decoration-color: var(--ipdc-navy, #04162F);
}

.ipdc-slider__slide:has(a[href]) .ipg-term--card {
	cursor: pointer;
}

/* Masquée par défaut (attribut hidden) ; ouverte et positionnée par termes.js. */
.ipg-term__bulle {
	position: fixed;
	left: var(--ipg-x, 0px);
	top: var(--ipg-y, 0px);
	z-index: 9990;
	width: max-content;
	max-width: min(320px, calc(100vw - 16px));
	padding: 10px 14px;
	border-radius: 8px;
	background: var(--ipdc-navy, #04162F);
	color: var(--ipdc-cream, #FFFDED);
	font-family: inherit;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 1.45;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	pointer-events: auto;
}

.ipg-term__bulle[hidden] {
	display: none;
}

/* Flèche vers le terme (abscisse posée par termes.js pour rester sous le sigle). */
.ipg-term__bulle::after {
	content: "";
	position: absolute;
	top: 100%;
	left: var(--ipg-arrow, 50%);
	border: 7px solid transparent;
	border-top-color: var(--ipdc-navy, #04162F);
	transform: translateX(-50%);
}

/* Bascule sous le terme quand la place manque au-dessus (classe posée par termes.js). */
.ipg-term__bulle.is-below::after {
	top: auto;
	bottom: 100%;
	border-top-color: transparent;
	border-bottom-color: var(--ipdc-navy, #04162F);
}