/* ============================================================================
   Le glossaire — un mot de métier, sa définition sur place.

   Trois entrées, un seul élément : le mot est un vrai <button>.
   · souris   → :hover, mais seulement là où le survol existe vraiment
   · doigt    → un tap pose la classe `est-ouvert`, un autre tap la retire
   · clavier  → la tabulation ouvre au :focus-visible, Entrée bascule l'état.

   ⚠️ La règle de survol est enfermée dans `@media (hover:hover)`. Sans cela,
   iOS applique un faux survol au premier tap et la bulle reste ouverte jusqu'à
   ce qu'on touche ailleurs — le défaut classique des infobulles CSS.

   ⚠️ **L'ouverture ne repose pas sur `:focus`.** Safari ne donne pas le focus à
   un <button> cliqué et le rend au corps de page au relâcher : la bulle
   n'apparaissait alors que **pendant l'appui**. C'est `lupeo-glossaire.js` qui
   pose et retire `est-ouvert` — un état, pas un focus.

   ⚠️ `.lupeo-bulle` est déjà pris (choix des variantes, positionné en JS).
   Ici, tout s'appelle `lupeo-mot`.
   ========================================================================== */

.lupeo-mot{
	/* Remise à zéro : un bouton ne doit pas se voir comme un bouton. */
	display:inline;position:relative;
	margin:0;padding:0;border:0;background:none;
	font:inherit;color:inherit;text-align:inherit;
	/* L'affordance : un pointillé, comme une note de bas de page. */
	text-decoration:underline dotted currentColor;
	text-decoration-thickness:1px;
	text-underline-offset:.22em;
	cursor:help;
	-webkit-appearance:none;appearance:none;
}
.lupeo-mot:hover,
.lupeo-mot.est-ouvert,
.lupeo-mot:focus-visible{
	text-decoration-style:solid;
	color:var(--theme-palette-color-1,#0f766e);
}
.lupeo-mot:focus-visible{
	outline:2px solid var(--theme-palette-color-1,#0f766e);
	outline-offset:3px;border-radius:3px;
}

/* ---------- la bulle ---------- */
.lupeo-mot__def{
	position:absolute;z-index:60;
	left:50%;bottom:calc(100% + 11px);
	width:max-content;max-width:min(320px,calc(100vw - 32px));
	padding:11px 13px;border-radius:13px;
	background:rgba(26,26,26,.97);color:#fff;
	font-size:13.5px;line-height:1.45;font-weight:400;
	text-align:left;text-decoration:none;letter-spacing:normal;
	box-shadow:0 12px 32px -12px rgba(0,0,0,.6);
	opacity:0;visibility:hidden;
	transform:translateX(-50%) translateY(5px);
	transition:opacity .16s ease,transform .16s cubic-bezier(.2,.9,.3,1),visibility 0s .16s;
	pointer-events:none;
}
/* La flèche, dessinée sur le même fond. */
.lupeo-mot__def::after{
	content:"";position:absolute;bottom:-5px;left:50%;margin-left:-6px;
	width:12px;height:12px;border-radius:2px;
	background:inherit;transform:rotate(45deg);
}

/* ---------- ouverture ---------- */
.lupeo-mot.est-ouvert .lupeo-mot__def,
.lupeo-mot:focus-visible .lupeo-mot__def{
	opacity:1;visibility:visible;
	transform:translateX(-50%);
	transition-delay:0s;
}
/* Le survol, seulement là où il existe pour de vrai. */
@media (hover:hover) and (pointer:fine){
	.lupeo-mot:hover .lupeo-mot__def{
		opacity:1;visibility:visible;
		transform:translateX(-50%);
		transition-delay:0s;
	}
}

/* ---------- téléphone : une bande en bas d'écran ----------
   Une bulle ancrée au mot se fait couper dès que le mot tombe en bord de ligne,
   et 320 px ne tiennent pas toujours au-dessus d'un mot sur 375 px de large.
   Sur petit écran, la définition devient donc une bande fixée en bas de la
   fenêtre : jamais coupée, toujours à la même place, lisible d'un coup d'œil. */
@media (max-width:700px){
	.lupeo-mot__def{
		position:fixed;left:12px;right:12px;bottom:12px;top:auto;
		width:auto;max-width:none;
		transform:translateY(8px);
		font-size:14.5px;padding:14px 16px;border-radius:14px;
		box-shadow:0 -6px 30px -10px rgba(0,0,0,.55);
	}
	.lupeo-mot__def::after{display:none}
	.lupeo-mot.est-ouvert .lupeo-mot__def,
	.lupeo-mot:focus-visible .lupeo-mot__def{transform:translateY(0)}
}

@media (prefers-reduced-motion:reduce){
	.lupeo-mot__def{transition:opacity .01s;transform:none}
	.lupeo-mot.est-ouvert .lupeo-mot__def,
	.lupeo-mot:focus-visible .lupeo-mot__def{transform:none}
	@media (max-width:700px){
		.lupeo-mot__def,
		.lupeo-mot.est-ouvert .lupeo-mot__def{transform:none}
	}
}

/* À l'impression, la définition se lit entre parenthèses plutôt que de flotter. */
@media print{
	.lupeo-mot{text-decoration:none}
	.lupeo-mot__def{
		position:static;opacity:1;visibility:visible;transform:none;
		display:inline;background:none;color:inherit;box-shadow:none;
		padding:0;font-size:inherit;
	}
	.lupeo-mot__def::before{content:" ("}
	.lupeo-mot__def::after{content:")";position:static;display:inline;
		width:auto;height:auto;background:none;transform:none;margin:0}
}