/**
 * Visiora Core — Composant : Button
 *
 * Bouton d’action principal, secondaire, discret ou destructif.
 *
 * Dépendances :
 * - colors.css
 * - spacing.css
 * - typography.css
 * - radius.css
 * - shadows.css
 * - opacity.css
 * - animation.css
 * - containers.css
 * - primitives/icon.css
 * - feedback/spinner.css
 *
 * @package Visiora_Core
 */

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

.v-button {
	--v-button-background: var(--v-color-surface);
	--v-button-background-hover: var(--v-color-background-subtle);
	--v-button-background-active: var(--v-color-surface-muted);

	--v-button-border: var(--v-color-border-strong);
	--v-button-border-hover: var(--v-color-primary-border);
	--v-button-border-active: var(--v-color-primary-border);

	--v-button-text: var(--v-color-heading);
	--v-button-text-hover: var(--v-color-primary-text);
	--v-button-text-active: var(--v-color-primary-text);

	--v-button-shadow: var(--v-shadow-xs);

	--v-button-min-block-size: 2.75rem;
	--v-button-padding-block: var(--v-space-3);
	--v-button-padding-inline: var(--v-space-5);
	--v-button-font-size: var(--v-font-size-sm);
	--v-button-icon-size: var(--v-size-icon-sm);

	position: relative;
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	gap: var(--v-space-component-sm);
	min-inline-size: 0;
	min-block-size: var(--v-button-min-block-size);
	padding:
		var(--v-button-padding-block)
		var(--v-button-padding-inline);
	appearance: none;
	-webkit-appearance: none;
	background-color: var(--v-button-background);
	border:
		var(--v-size-border-thin)
		solid
		var(--v-button-border);
	border-radius: var(--v-radius-button);
	box-shadow: var(--v-button-shadow);
	color: var(--v-button-text);
	font-family: var(--v-font-family-body);
	font-size: var(--v-button-font-size);
	font-weight: var(--v-font-weight-semibold);
	line-height: var(--v-line-height-none);
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
	white-space: nowrap;
	cursor: pointer;
	touch-action: manipulation;
	user-select: none;
	transition:
		background-color var(--v-transition-interactive),
		border-color var(--v-transition-interactive),
		color var(--v-transition-interactive),
		box-shadow var(--v-transition-interactive);
}

.v-button:hover {
	background-color: var(--v-button-background-hover);
	border-color: var(--v-button-border-hover);
	color: var(--v-button-text-hover);
	text-decoration: none;
}

.v-button:active {
	background-color: var(--v-button-background-active);
	border-color: var(--v-button-border-active);
	color: var(--v-button-text-active);
}

/* ======================================================
   2. CONTENU INTERNE
   ====================================================== */

.v-button__label {
	display: inline-block;
	min-inline-size: 0;
	color: inherit;
}

/*
 * .v-button__icon est un crochet contextuel.
 *
 * Usage recommandé :
 *
 * <svg class="v-icon v-button__icon">...</svg>
 *
 * UI-009 Icon conserve la responsabilité du dessin SVG.
 * Button ne définit que la dimension attendue dans ce contexte.
 */

.v-button__icon {
	flex: 0 0 auto;
	inline-size: var(--v-button-icon-size);
	block-size: var(--v-button-icon-size);
	color: inherit;
}

/*
 * Un wrapper autour de UI-009 Icon reste autorisé :
 *
 * <span class="v-button__icon">
 *     <svg class="v-icon">...</svg>
 * </span>
 */

.v-button__icon > .v-icon {
	display: block;
	inline-size: 100%;
	block-size: 100%;
}

/* ======================================================
   3. SPINNER
   ====================================================== */

/*
 * Le chargement réutilise exclusivement UI-011 Spinner.
 *
 * Exemple :
 *
 * <span
 *     class="v-spinner v-spinner--sm v-button__spinner"
 *     role="status"
 *     aria-label="Chargement"
 * >
 *     ...
 * </span>
 */

.v-button__spinner {
	position: absolute;
	display: none;
	flex: 0 0 auto;
}

/* ======================================================
   4. VARIANTES
   ====================================================== */

.v-button--primary {
	--v-button-background: var(--v-color-primary);
	--v-button-background-hover: var(--v-color-primary-hover);
	--v-button-background-active: var(--v-color-primary-active);

	--v-button-border: var(--v-color-primary);
	--v-button-border-hover: var(--v-color-primary-hover);
	--v-button-border-active: var(--v-color-primary-active);

	--v-button-text: var(--v-color-text-inverse);
	--v-button-text-hover: var(--v-color-text-inverse);
	--v-button-text-active: var(--v-color-text-inverse);

	--v-button-shadow: var(--v-shadow-xs);
}

.v-button--secondary {
	--v-button-background: var(--v-color-surface);
	--v-button-background-hover: var(--v-color-background-subtle);
	--v-button-background-active: var(--v-color-surface-muted);

	--v-button-border: var(--v-color-border-strong);
	--v-button-border-hover: var(--v-color-primary-border);
	--v-button-border-active: var(--v-color-primary-border);

	--v-button-text: var(--v-color-heading);
	--v-button-text-hover: var(--v-color-primary-text);
	--v-button-text-active: var(--v-color-primary-text);

	--v-button-shadow: var(--v-shadow-xs);
}

.v-button--ghost {
	--v-button-background: transparent;
	--v-button-background-hover: var(--v-color-primary-soft);
	--v-button-background-active: var(--v-color-primary-muted);

	--v-button-border: transparent;
	--v-button-border-hover: transparent;
	--v-button-border-active: transparent;

	--v-button-text: var(--v-color-primary);
	--v-button-text-hover: var(--v-color-primary-hover);
	--v-button-text-active: var(--v-color-primary-active);

	--v-button-shadow: none;
}

.v-button--danger {
	--v-button-background: var(--v-color-danger);
	--v-button-background-hover: var(--v-color-danger-hover);
	--v-button-background-active: var(--v-color-danger-active);

	--v-button-border: var(--v-color-danger);
	--v-button-border-hover: var(--v-color-danger-hover);
	--v-button-border-active: var(--v-color-danger-active);

	--v-button-text: var(--v-color-text-inverse);
	--v-button-text-hover: var(--v-color-text-inverse);
	--v-button-text-active: var(--v-color-text-inverse);

	--v-button-shadow: var(--v-shadow-xs);
}

/* ======================================================
   5. TAILLES
   ====================================================== */

.v-button--sm {
	--v-button-min-block-size: 2.25rem;
	--v-button-padding-block: var(--v-space-2);
	--v-button-padding-inline: var(--v-space-4);
	--v-button-font-size: var(--v-font-size-sm);
	--v-button-icon-size: var(--v-size-icon-sm);
}

.v-button--lg {
	--v-button-min-block-size: 3.25rem;
	--v-button-padding-block: var(--v-space-4);
	--v-button-padding-inline: var(--v-space-6);
	--v-button-font-size: var(--v-font-size-md);
	--v-button-icon-size: var(--v-size-icon-md);
}

/*
 * Les hauteurs 2.25rem, 2.75rem et 3.25rem constituent
 * actuellement les dimensions structurelles historiques
 * du composant.
 *
 * Elles seront vérifiées lors de l’audit global des tokens
 * de contrôle, sans créer prématurément de nouveaux tokens.
 */

/* ======================================================
   6. FORMATS
   ====================================================== */

.v-button--icon-only {
	inline-size: var(--v-button-min-block-size);
	padding-inline: 0;
}

.v-button--full {
	inline-size: 100%;
}

/* ======================================================
   7. FOCUS
   ====================================================== */

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

.v-button:focus-visible {
	border-color: var(--v-color-border-focus);
	box-shadow: var(--v-shadow-focus);
	outline: none;
}

/* ======================================================
   8. ÉTAT DE CHARGEMENT
   ====================================================== */

.v-button.is-loading,
.v-button[aria-busy="true"] {
	cursor: progress;
	pointer-events: none;
}

.v-button.is-loading .v-button__label,
.v-button.is-loading .v-button__icon,
.v-button[aria-busy="true"] .v-button__label,
.v-button[aria-busy="true"] .v-button__icon {
	visibility: hidden;
}

.v-button.is-loading .v-button__spinner,
.v-button[aria-busy="true"] .v-button__spinner {
	display: inline-flex;
}

/*
 * Sur un élément button natif, utiliser également disabled
 * pendant une action qui ne doit pas être déclenchée à nouveau.
 *
 * aria-busy indique l’état de chargement, mais ne désactive
 * pas à lui seul le contrôle dans le modèle d’accessibilité.
 */

/* ======================================================
   9. ÉTATS DISABLED ET HIDDEN
   ====================================================== */

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

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

/* ======================================================
   10. ACCESSIBILITÉ ICON-ONLY
   ====================================================== */

/*
 * Le label reste présent dans le DOM afin de fournir
 * un nom accessible au bouton.
 */

.v-button--icon-only .v-button__label {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/*
 * Un bouton icon-only doit toujours conserver :
 *
 * - un .v-button__label visuellement masqué ;
 * - ou un aria-label équivalent.
 *
 * L’icône interne reste décorative avec aria-hidden="true".
 */

/* ======================================================
   11. RESPONSIVE
   ====================================================== */

/*
 * Correspond au breakpoint historique sm : 40rem.
 *
 * Sa centralisation sera traitée pendant l’audit global
 * des breakpoints.
 */

@media (max-width: 40rem) {
	.v-button--mobile-full {
		inline-size: 100%;
	}
}

/* ======================================================
   12. FORCED COLORS
   ====================================================== */

@media (forced-colors: active) {
	.v-button {
		background-color: ButtonFace;
		border-color: ButtonText;
		color: ButtonText;
		forced-color-adjust: auto;
	}

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

	.v-button:disabled,
	.v-button[aria-disabled="true"],
	.v-button.is-disabled {
		color: GrayText;
	}
}

/* ======================================================
   13. REDUCED MOTION
   ====================================================== */

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

/* ======================================================
   14. COMPATIBILITÉ WORDPRESS
   ====================================================== */

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

/*
 * Ne pas redéfinir color dans ces règles de compatibilité.
 *
 * Une déclaration tardive et plus spécifique telle que :
 *
 * .v-root a.v-button {
 *     color: var(--v-button-text);
 * }
 *
 * neutraliserait les couleurs hover et active du composant.
 */

.v-root a.v-button,
.editor-styles-wrapper a.v-button {
	text-decoration: none;
}

/*
 * Ne pas utiliser font: inherit sur button.v-button.
 *
 * Ce raccourci écraserait la famille, la taille, la graisse
 * et la hauteur de ligne définies par le composant.
 */

/* ======================================================
   15. COMPATIBILITÉ GUTENBERG
   ====================================================== */

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

/* ======================================================
   16. COMPATIBILITÉ SPECTRA
   ====================================================== */

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

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

/*
 * - Aucun loader CSS interne.
 * - Aucun keyframe propre au Button.
 * - Le chargement réutilise UI-011 Spinner.
 * - Les icônes réutilisent UI-009 Icon.
 * - Aucun JavaScript requis pour la présentation.
 * - Aucun gestionnaire inline.
 * - Aucune dépendance externe.
 * - Compatible CSP.
 * - Compatible RTL grâce aux propriétés logiques.
 * - Aucun filtre graphique.
 * - Aucun transform arbitraire.
 * - Aucun z-index.
 * - Aucun contexte d’empilement supplémentaire.
 * - Les règles WordPress ne neutralisent ni les variantes,
 *   ni les états hover, active ou focus.
 */