/**
 * Visiora Core — Composant : Empty State
 *
 * Présentation d’une interface sans contenu, sans résultat
 * ou sans configuration initiale.
 *
 * Dépendances :
 * - colors.css
 * - spacing.css
 * - typography.css
 * - radius.css
 * - containers.css
 * - opacity.css
 * - primitives/icon.css
 * - primitives/stack.css
 * - primitives/button.css
 *
 * @package Visiora_Core
 */

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

.v-empty-state {
	--v-empty-state-accent: var(--v-color-text-soft);
	--v-empty-state-visual-background: var(--v-color-surface-muted);
	--v-empty-state-visual-border: var(--v-color-border);

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--v-space-component-md);
	inline-size: 100%;
	max-inline-size: var(--v-size-empty-state-max-width);
	min-inline-size: 0;
	margin-inline: auto;
	padding: var(--v-space-6);
	overflow-wrap: anywhere;
	color: var(--v-color-text);
	font-family: var(--v-font-family-body);
	text-align: center;
}

/* ======================================================
   2. VISUEL
   ====================================================== */

.v-empty-state__visual {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	padding: var(--v-space-4);
	background-color: var(--v-empty-state-visual-background);
	border:
		var(--v-size-border-thin)
		solid
		var(--v-empty-state-visual-border);
	border-radius: var(--v-radius-full);
	color: var(--v-empty-state-accent);
}

/*
 * Le visuel doit rester décoratif lorsque le titre
 * et la description transmettent déjà l’information.
 *
 * Il utilise alors :
 *
 * aria-hidden="true"
 */

/* ======================================================
   3. ICÔNE
   ====================================================== */

/*
 * .v-empty-state__icon constitue uniquement
 * un crochet contextuel.
 *
 * Le SVG utilise également UI-009 Icon :
 *
 * <svg class="v-icon v-icon--xl v-empty-state__icon">
 */

.v-empty-state__icon {
	flex: 0 0 auto;
	color: inherit;
}

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

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

/* ======================================================
   4. TITRE
   ====================================================== */

.v-empty-state__title {
	margin: 0;
	color: var(--v-color-heading);
	font-family: var(--v-font-family-heading);
	font-size: var(--v-heading-h5-size);
	font-weight: var(--v-heading-h5-weight);
	line-height: var(--v-heading-h5-line-height);
	letter-spacing: var(--v-heading-h5-letter-spacing);
}

/* ======================================================
   5. DESCRIPTION
   ====================================================== */

.v-empty-state__description {
	max-inline-size: var(--v-measure-lead);
	margin: 0;
	color: var(--v-color-text-soft);
	font-size: var(--v-text-body-size);
	font-weight: var(--v-text-body-weight);
	line-height: var(--v-text-body-line-height);
}

/* ======================================================
   6. ACTIONS
   ====================================================== */

/*
 * La mise en page des actions est confiée à UI-008 Stack.
 *
 * Structure recommandée :
 *
 * <div
 *     class="
 *         v-empty-state__actions
 *         v-stack
 *         v-stack--row
 *         v-stack--wrap
 *         v-stack--justify-center
 *         v-stack--gap-sm
 *         v-stack--responsive-column
 *     "
 * >
 *
 * Les actions interactives utilisent UI-002 Button.
 *
 * Empty State ne redéfinit pas justify-content afin
 * de laisser les modificateurs publics de Stack fonctionner
 * sans conflit de spécificité.
 */

.v-empty-state__actions {
	inline-size: 100%;
	min-inline-size: 0;
	margin-block-start: var(--v-space-component-xs);
}

/* ======================================================
   7. TAILLES
   ====================================================== */

.v-empty-state--sm {
	gap: var(--v-space-component-sm);
	padding: var(--v-space-4);
}

.v-empty-state--sm .v-empty-state__visual {
	padding: var(--v-space-3);
}

.v-empty-state--sm .v-empty-state__title {
	font-size: var(--v-heading-h6-size);
	font-weight: var(--v-heading-h6-weight);
	line-height: var(--v-heading-h6-line-height);
	letter-spacing: var(--v-heading-h6-letter-spacing);
}

.v-empty-state--sm .v-empty-state__description {
	font-size: var(--v-text-small-size);
	font-weight: var(--v-text-small-weight);
	line-height: var(--v-text-small-line-height);
}

.v-empty-state--md {
	gap: var(--v-space-component-md);
	padding: var(--v-space-6);
}

.v-empty-state--lg {
	gap: var(--v-space-component-lg);
	padding: var(--v-space-8);
}

.v-empty-state--lg .v-empty-state__visual {
	padding: var(--v-space-5);
}

.v-empty-state--lg .v-empty-state__title {
	font-size: var(--v-heading-h4-size);
	font-weight: var(--v-heading-h4-weight);
	line-height: var(--v-heading-h4-line-height);
	letter-spacing: var(--v-heading-h4-letter-spacing);
}

.v-empty-state--lg .v-empty-state__description {
	font-size: var(--v-text-body-lg-size);
	font-weight: var(--v-text-body-lg-weight);
	line-height: var(--v-text-body-lg-line-height);
}

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

.v-empty-state--neutral {
	--v-empty-state-accent: var(--v-color-text-soft);
	--v-empty-state-visual-background: var(--v-color-surface-muted);
	--v-empty-state-visual-border: var(--v-color-border);
}

.v-empty-state--primary {
	--v-empty-state-accent: var(--v-color-primary-text);
	--v-empty-state-visual-background: var(--v-color-primary-soft);
	--v-empty-state-visual-border: var(--v-color-primary-border);
}

.v-empty-state--success {
	--v-empty-state-accent: var(--v-color-success-text);
	--v-empty-state-visual-background: var(--v-color-success-soft);
	--v-empty-state-visual-border: var(--v-color-success-border);
}

.v-empty-state--warning {
	--v-empty-state-accent: var(--v-color-warning-text);
	--v-empty-state-visual-background: var(--v-color-warning-soft);
	--v-empty-state-visual-border: var(--v-color-warning-border);
}

.v-empty-state--danger {
	--v-empty-state-accent: var(--v-color-danger-text);
	--v-empty-state-visual-background: var(--v-color-danger-soft);
	--v-empty-state-visual-border: var(--v-color-danger-border);
}

.v-empty-state--info {
	--v-empty-state-accent: var(--v-color-info-text);
	--v-empty-state-visual-background: var(--v-color-info-soft);
	--v-empty-state-visual-border: var(--v-color-info-border);
}

/* ======================================================
   9. ÉTATS
   ====================================================== */

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

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

/* ======================================================
   10. ACCESSIBILITÉ
   ====================================================== */

/*
 * Le conteneur Empty State reste non interactif.
 *
 * Il ne reçoit pas :
 *
 * - role="button" ;
 * - tabindex ;
 * - gestionnaire d’événement inline.
 *
 * Le titre utilise un véritable élément h2, h3 ou h4
 * correspondant à la hiérarchie de la page.
 *
 * L’icône décorative utilise :
 *
 * aria-hidden="true"
 * focusable="false"
 *
 * Les actions utilisent de vrais éléments :
 *
 * - button pour une action ;
 * - a pour une navigation.
 *
 * L’information essentielle doit être présente dans le titre
 * ou la description, jamais uniquement dans l’icône
 * ou dans la couleur de la variante.
 */

/* ======================================================
   11. FORCED COLORS
   ====================================================== */

@media (forced-colors: active) {
	.v-empty-state__visual {
		background-color: Canvas;
		border-color: CanvasText;
		color: CanvasText;
		forced-color-adjust: auto;
	}
}

/* ======================================================
   12. RESPONSIVE
   ====================================================== */

/*
 * Empty State suit naturellement la largeur de son parent.
 *
 * Les actions passent en colonne sur petit écran grâce à :
 *
 * .v-stack--responsive-column
 *
 * Aucun breakpoint propre au composant n’est nécessaire.
 */

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

/*
 * Empty State ne définit aucune transition ni animation.
 *
 * Aucun traitement prefers-reduced-motion n’est nécessaire.
 */

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

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

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

.v-root .v-empty-state figure,
.editor-styles-wrapper .v-empty-state figure {
	margin: 0;
}

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

.wp-block .v-empty-state {
	max-inline-size: var(--v-size-empty-state-max-width);
}

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

.uagb-container__content .v-empty-state,
.uagb-infobox .v-empty-state {
	max-inline-size: var(--v-size-empty-state-max-width);
}

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

/*
 * - Aucun JavaScript requis pour la présentation.
 * - Aucun comportement interactif sur le conteneur.
 * - Aucun gestionnaire inline.
 * - Aucun SVG utilisateur non nettoyé.
 * - Aucune dépendance externe.
 * - Compatible CSP.
 * - DOM volontairement plat.
 * - Aucun positionnement absolu.
 * - Aucun z-index.
 * - Aucun contexte d’empilement.
 * - Aucune animation.
 * - UI-009 Icon gère les icônes.
 * - UI-008 Stack gère la disposition des actions.
 * - UI-002 Button gère les actions.
 * - Les bordures utilisent les tokens officiels.
 * - Les dimensions utilisent les propriétés logiques.
 */