/*
 * Info-bulles (tooltips) — remplace les tooltips Bootstrap de l'ancien thème
 * (data-toggle="tooltip", data-original-title="..."). Implémenté en CSS pur
 * via l'attribut data-tooltip : contrairement à l'attribut title natif du
 * navigateur (délai d'apparition, style non maîtrisé), la bulle s'affiche
 * immédiatement au survol/focus et reprend les tokens du design system.
 *
 * Utilisation : ajouter data-tooltip="Texte" sur n'importe quel élément
 * (typiquement les boutons-icônes générés par lien_icon(), includes/pages.php).
 */

[data-tooltip] {
	position: relative;
}

[data-tooltip]::after,
[data-tooltip]::before {
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--ag-transition-fast), transform var(--ag-transition-fast);
	z-index: var(--ag-z-tooltip);
}

[data-tooltip]::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: calc(100% + 9px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	background: var(--ag-color-text);
	color: var(--ag-color-text-inverse);
	font-size: var(--ag-font-size-xs);
	font-weight: var(--ag-font-weight-medium);
	line-height: 1.4;
	white-space: nowrap;
	padding: 5px 9px;
	border-radius: var(--ag-radius-sm);
	box-shadow: var(--ag-shadow-md);
}

[data-tooltip]::before {
	content: "";
	position: absolute;
	bottom: calc(100% + 4px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	border: 5px solid transparent;
	border-top-color: var(--ag-color-text);
}

[data-tooltip]:hover::after,
[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::after,
[data-tooltip]:focus-visible::before {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/*
 * Correctif (retour utilisateur du 21/08/2026, "la tooltip du bouton 'Se
 * déconnecter' ne s'affiche pas") : par défaut la bulle s'ouvre AU-DESSUS de
 * l'élément déclencheur (bottom: calc(100% + 9px)). Pour un élément collé au
 * tout premier pixel du viewport comme la topbar (position: fixed; top: 0),
 * ça place la bulle hors écran, au-dessus de la fenêtre — invisible, sans la
 * moindre erreur pour le signaler. Corrigé en ouvrant la bulle vers le bas
 * pour tout élément à info-bulle situé dans la topbar (le seul endroit du
 * site où ce manque de place au-dessus se produit).
 */
.app-topbar [data-tooltip]::after {
	bottom: auto;
	top: calc(100% + 9px);
	transform: translateX(-50%) translateY(-4px);
}

.app-topbar [data-tooltip]::before {
	bottom: auto;
	top: calc(100% + 4px);
	transform: translateX(-50%) translateY(-4px);
	border-top-color: transparent;
	border-bottom-color: var(--ag-color-text);
}

.app-topbar [data-tooltip]:hover::after,
.app-topbar [data-tooltip]:hover::before,
.app-topbar [data-tooltip]:focus-visible::after,
.app-topbar [data-tooltip]:focus-visible::before {
	transform: translateX(-50%) translateY(0);
}

/*
 * Correctif (retour utilisateur du 27/08/2026, "Le tooltip 'Se déconnecter'
 * ne s'affiche pas bien", captures d'écran à l'appui) : la bulle est centrée
 * horizontalement sur son déclencheur (left: 50%; transform:
 * translateX(-50%)), hérité de la règle générique ci-dessus. Or le bouton
 * "Se déconnecter" est le tout dernier élément de .app-topbar__actions,
 * collé au bord droit de la topbar — donc de l'écran : la bulle centrée
 * déborde hors du viewport côté droit et son texte se retrouve tronqué
 * ("Se déconnect..."). Corrigé en alignant la bulle et sa flèche sur le
 * bord DROIT du bouton plutôt qu'en les centrant, uniquement pour ce
 * bouton (le seul de la topbar collé au bord de l'écran).
 */
.app-topbar a[href="logout.php"][data-tooltip]::after {
	left: auto;
	right: 0;
	transform: translateY(-4px);
}

.app-topbar a[href="logout.php"][data-tooltip]::before {
	left: auto;
	right: 10px;
	transform: translateY(-4px);
}

.app-topbar a[href="logout.php"][data-tooltip]:hover::after,
.app-topbar a[href="logout.php"][data-tooltip]:hover::before,
.app-topbar a[href="logout.php"][data-tooltip]:focus-visible::after,
.app-topbar a[href="logout.php"][data-tooltip]:focus-visible::before {
	transform: translateY(0);
}