/**
 * Visiora Core — Composant : Tooltip
 *
 * Aide contextuelle courte affichée au survol,
 * au focus clavier ou par état contrôlé.
 *
 * Dépendances :
 * - colors.css
 * - spacing.css
 * - typography.css
 * - radius.css
 * - shadows.css
 * - animation.css
 * - opacity.css
 * - containers.css
 * - z-index.css
 *
 * @package Visiora_Core
 */

/* ======================================================
   1. BASE
   ====================================================== */

.v-tooltip {
	--v-tooltip-background: var(--v-color-surface-inverse);
	--v-tooltip-text: var(--v-color-text-inverse);

	position: relative;
	display: inline-flex;
	max-inline-size: 100%;
	vertical-align: middle;
}

/* ======================================================
   2. DÉCLENCHEUR
   ====================================================== */

.v-tooltip__trigger {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 0;
	max-inline-size: 100%;
	color: inherit;
}

/*
 * Réinitialisation complète lorsque le déclencheur
 * est un élément button natif.
 */

button.v-tooltip__trigger {
	padding: 0;
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: 0;
	color: inherit;
	font: inherit;
	text-align: inherit;
	cursor: pointer;
}

/* ======================================================
   3. CONTENU
   ====================================================== */

.v-tooltip__content {
	position: absolute;
	z-index: var(--v-z-help-tooltip);
	display: block;
	inline-size: max-content;
	max-inline-size: min(
		var(--v-size-tooltip-max-width),
		calc(100vw - (var(--v-space-inline-page-mobile) * 2))
	);
	padding: var(--v-space-2) var(--v-space-3);
	overflow-wrap: anywhere;
	background-color: var(--v-tooltip-background);
	border-radius: var(--v-radius-tooltip);
	box-shadow: var(--v-shadow-tooltip);
	color: var(--v-tooltip-text);
	font-family: var(--v-font-family-body);
	font-size: var(--v-text-caption-size);
	font-weight: var(--v-text-caption-weight);
	line-height: var(--v-text-caption-line-height);
	text-align: start;
	white-space: normal;
	visibility: hidden;
	opacity: var(--v-opacity-0);
	pointer-events: none;
	transition:
		opacity var(--v-transition-component),
		transform var(--v-transition-component),
		visibility var(--v-transition-component);
}

/* ======================================================
   4. FLÈCHE
   ====================================================== */

.v-tooltip__content::after {
	position: absolute;
	inline-size: 0;
	block-size: 0;
	border: var(--v-space-2) solid transparent;
	content: "";
}

/*
 * La flèche repose sur la technique CSS des bordures.
 *
 * Les dimensions nulles, les positions à 50 % et les
 * transformations de centrage constituent sa géométrie
 * structurelle. Elles ne nécessitent pas de nouveaux tokens.
 */

/* ======================================================
   5. AFFICHAGE
   ====================================================== */

/*
 * Modes d’affichage officiels :
 *
 * - survol ;
 * - focus clavier avec :focus-within ;
 * - état contrôlé avec .is-visible.
 *
 * aria-expanded, lorsqu’il est utilisé par une couche
 * JavaScript, appartient au déclencheur interactif.
 *
 * Le wrapper Tooltip ne dépend pas de cet attribut
 * pour son affichage CSS.
 */

.v-tooltip:hover .v-tooltip__content,
.v-tooltip:focus-within .v-tooltip__content,
.v-tooltip.is-visible .v-tooltip__content {
	visibility: visible;
	opacity: var(--v-opacity-100);
}

/* ======================================================
   6. POSITION SUPÉRIEURE
   ====================================================== */

/*
 * Top constitue la position par défaut.
 */

.v-tooltip__content,
.v-tooltip--top .v-tooltip__content {
	inset-block-end: calc(100% + var(--v-space-3));
	inset-inline-start: 50%;
	transform: translate(-50%, var(--v-space-1));
}

.v-tooltip:hover .v-tooltip__content,
.v-tooltip:focus-within .v-tooltip__content,
.v-tooltip.is-visible .v-tooltip__content,
.v-tooltip--top:hover .v-tooltip__content,
.v-tooltip--top:focus-within .v-tooltip__content,
.v-tooltip--top.is-visible .v-tooltip__content {
	transform: translate(-50%, 0);
}

.v-tooltip__content::after,
.v-tooltip--top .v-tooltip__content::after {
	inset-block-start: 100%;
	inset-inline-start: 50%;
	border-block-start-color: var(--v-tooltip-background);
	transform: translateX(-50%);
}

/* ======================================================
   7. POSITION INFÉRIEURE
   ====================================================== */

.v-tooltip--bottom .v-tooltip__content {
	inset-block-start: calc(100% + var(--v-space-3));
	inset-block-end: auto;
	inset-inline-start: 50%;
	transform:
		translate(
			-50%,
			calc(var(--v-space-1) * -1)
		);
}

.v-tooltip--bottom:hover .v-tooltip__content,
.v-tooltip--bottom:focus-within .v-tooltip__content,
.v-tooltip--bottom.is-visible .v-tooltip__content {
	transform: translate(-50%, 0);
}

.v-tooltip--bottom .v-tooltip__content::after {
	inset-block-start: auto;
	inset-block-end: 100%;
	inset-inline-start: 50%;
	border-color: transparent;
	border-block-end-color: var(--v-tooltip-background);
	transform: translateX(-50%);
}

/* ======================================================
   8. POSITION GAUCHE
   ====================================================== */

/*
 * Les variantes left et right représentent volontairement
 * des positions physiques.
 *
 * Elles ne sont pas inversées automatiquement en RTL :
 * une demande explicite de position gauche reste à gauche.
 */

.v-tooltip--left .v-tooltip__content {
	inset-block-start: 50%;
	inset-inline-start: auto;
	inset-inline-end: calc(100% + var(--v-space-3));
	transform: translate(var(--v-space-1), -50%);
}

.v-tooltip--left:hover .v-tooltip__content,
.v-tooltip--left:focus-within .v-tooltip__content,
.v-tooltip--left.is-visible .v-tooltip__content {
	transform: translate(0, -50%);
}

.v-tooltip--left .v-tooltip__content::after {
	inset-block-start: 50%;
	inset-inline-start: 100%;
	inset-inline-end: auto;
	border-color: transparent;
	border-inline-start-color: var(--v-tooltip-background);
	transform: translateY(-50%);
}

/* ======================================================
   9. POSITION DROITE
   ====================================================== */

.v-tooltip--right .v-tooltip__content {
	inset-block-start: 50%;
	inset-inline-start: calc(100% + var(--v-space-3));
	inset-inline-end: auto;
	transform:
		translate(
			calc(var(--v-space-1) * -1),
			-50%
		);
}

.v-tooltip--right:hover .v-tooltip__content,
.v-tooltip--right:focus-within .v-tooltip__content,
.v-tooltip--right.is-visible .v-tooltip__content {
	transform: translate(0, -50%);
}

.v-tooltip--right .v-tooltip__content::after {
	inset-block-start: 50%;
	inset-inline-start: auto;
	inset-inline-end: 100%;
	border-color: transparent;
	border-inline-end-color: var(--v-tooltip-background);
	transform: translateY(-50%);
}

/* ======================================================
   10. VARIANTES SÉMANTIQUES
   ====================================================== */

.v-tooltip--neutral {
	--v-tooltip-background: var(--v-color-surface-inverse);
	--v-tooltip-text: var(--v-color-text-inverse);
}

.v-tooltip--primary {
	--v-tooltip-background: var(--v-color-primary);
	--v-tooltip-text: var(--v-color-text-inverse);
}

.v-tooltip--success {
	--v-tooltip-background: var(--v-color-success);
	--v-tooltip-text: var(--v-color-text-inverse);
}

.v-tooltip--warning {
	--v-tooltip-background: var(--v-color-warning-soft);
	--v-tooltip-text: var(--v-color-warning-text);
}

.v-tooltip--danger {
	--v-tooltip-background: var(--v-color-danger);
	--v-tooltip-text: var(--v-color-text-inverse);
}

.v-tooltip--info {
	--v-tooltip-background: var(--v-color-info);
	--v-tooltip-text: var(--v-color-text-inverse);
}

/* ======================================================
   11. TAILLES
   ====================================================== */

.v-tooltip--sm .v-tooltip__content {
	padding: var(--v-space-1) var(--v-space-2);
	font-size: var(--v-font-size-2xs);
	line-height: var(--v-line-height-normal);
}

.v-tooltip--lg .v-tooltip__content {
	padding: var(--v-space-3) var(--v-space-4);
	font-size: var(--v-text-small-size);
	line-height: var(--v-text-small-line-height);
}

/* ======================================================
   12. ÉTATS
   ====================================================== */

.v-tooltip.is-hidden .v-tooltip__content,
.v-tooltip[hidden] {
	display: none;
}

.v-tooltip.is-disabled,
.v-tooltip[aria-disabled="true"] {
	cursor: not-allowed;
	opacity: var(--v-opacity-disabled);
}

.v-tooltip.is-disabled .v-tooltip__content,
.v-tooltip[aria-disabled="true"] .v-tooltip__content {
	display: none;
}

.v-tooltip.is-disabled .v-tooltip__trigger,
.v-tooltip[aria-disabled="true"] .v-tooltip__trigger {
	cursor: not-allowed;
	pointer-events: none;
}

/* ======================================================
   13. ACCESSIBILITÉ
   ====================================================== */

/*
 * Le déclencheur doit être naturellement focalisable :
 *
 * - button ;
 * - a ;
 * - input ;
 * - ou élément possédant tabindex="0".
 *
 * Le contenu utilise :
 *
 * role="tooltip"
 *
 * Le déclencheur référence le contenu avec :
 *
 * aria-describedby="id-du-tooltip"
 *
 * Un Tooltip ne doit contenir aucun lien, bouton, champ
 * ou autre élément interactif.
 *
 * Une information essentielle ne doit jamais être
 * disponible uniquement dans un Tooltip.
 */

.v-tooltip__trigger:focus {
	outline: none;
}

.v-tooltip__trigger:focus-visible {
	border-radius: var(--v-radius-sm);
	box-shadow: var(--v-shadow-focus);
	outline: none;
}

/* ======================================================
   14. FORCED COLORS
   ====================================================== */

@media (forced-colors: active) {
	.v-tooltip {
		--v-tooltip-background: Canvas;
		--v-tooltip-text: CanvasText;
	}

	.v-tooltip__content {
		background-color: Canvas;
		border:
			var(--v-size-border-thin)
			solid
			CanvasText;
		box-shadow: none;
		color: CanvasText;
		forced-color-adjust: none;
	}

	.v-tooltip__content::after {
		forced-color-adjust: none;
	}

	.v-tooltip__trigger:focus-visible {
		outline:
			var(--v-size-border-medium)
			solid
			Highlight;
		outline-offset: var(--v-size-border-medium);
		box-shadow: none;
	}
}

/* ======================================================
   15. RESPONSIVE
   ====================================================== */

/*
 * Correspond à --v-breakpoint-sm: 40rem.
 *
 * Les positions latérales passent sous le déclencheur
 * sur les petits écrans afin de limiter les risques
 * de débordement horizontal.
 */

@media (max-width: 40rem) {
	.v-tooltip--left .v-tooltip__content,
	.v-tooltip--right .v-tooltip__content {
		inset-block-start: calc(100% + var(--v-space-3));
		inset-block-end: auto;
		inset-inline-start: 50%;
		inset-inline-end: auto;
		transform:
			translate(
				-50%,
				calc(var(--v-space-1) * -1)
			);
	}

	.v-tooltip--left:hover .v-tooltip__content,
	.v-tooltip--left:focus-within .v-tooltip__content,
	.v-tooltip--left.is-visible .v-tooltip__content,
	.v-tooltip--right:hover .v-tooltip__content,
	.v-tooltip--right:focus-within .v-tooltip__content,
	.v-tooltip--right.is-visible .v-tooltip__content {
		transform: translate(-50%, 0);
	}

	.v-tooltip--left .v-tooltip__content::after,
	.v-tooltip--right .v-tooltip__content::after {
		inset-block-start: auto;
		inset-block-end: 100%;
		inset-inline-start: 50%;
		inset-inline-end: auto;
		border-color: transparent;
		border-block-end-color: var(--v-tooltip-background);
		transform: translateX(-50%);
	}
}

/* ======================================================
   16. REDUCED MOTION
   ====================================================== */

@media (prefers-reduced-motion: reduce) {
	.v-tooltip__content {
		transition: none;
	}
}

/* ======================================================
   17. COMPATIBILITÉ WORDPRESS
   ====================================================== */

.v-root .v-tooltip,
.editor-styles-wrapper .v-tooltip {
	box-sizing: border-box;
}

.v-root .v-tooltip *,
.v-root .v-tooltip *::before,
.v-root .v-tooltip *::after,
.editor-styles-wrapper .v-tooltip *,
.editor-styles-wrapper .v-tooltip *::before,
.editor-styles-wrapper .v-tooltip *::after {
	box-sizing: border-box;
}

.v-root .v-tooltip button,
.editor-styles-wrapper .v-tooltip button {
	font: inherit;
}

/* ======================================================
   18. COMPATIBILITÉ GUTENBERG
   ====================================================== */

.wp-block .v-tooltip {
	max-inline-size: 100%;
}

/* ======================================================
   19. COMPATIBILITÉ SPECTRA
   ====================================================== */

.uagb-container__content .v-tooltip,
.uagb-infobox .v-tooltip,
.uagb-buttons__outer-wrap .v-tooltip {
	max-inline-size: 100%;
}

/* ======================================================
   20. PERFORMANCE ET SÉCURITÉ
   ====================================================== */

/*
 * - Aucun JavaScript requis pour les modes hover et focus.
 * - L’état contrôlé utilise exclusivement .is-visible.
 * - Aucun JavaScript inline.
 * - Aucun contenu interactif dans le Tooltip.
 * - Aucun SVG utilisateur.
 * - Aucune dépendance externe.
 * - Compatible CSP.
 * - Propriétés de positionnement logiques.
 * - Aucun filtre graphique.
 * - Aucun contexte d’empilement supplémentaire.
 * - Les valeurs géométriques de la flèche constituent
 *   des constantes structurelles documentées.
 * - Les contenus dynamiques doivent être échappés
 *   côté PHP avant le rendu.
 */