/**
 * Visiora Core — Composant : Skeleton
 *
 * Représentation visuelle temporaire d’un contenu
 * en cours de chargement.
 *
 * Le Skeleton est strictement décoratif.
 * La région réellement concernée doit porter
 * aria-busy="true".
 *
 * Dépendances :
 * - colors.css
 * - spacing.css
 * - radius.css
 * - opacity.css
 * - animation.css
 * - containers.css
 *
 * @package Visiora_Core
 */

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

.v-skeleton {
	display: block;
	inline-size: 100%;
	min-inline-size: 0;
	block-size: var(--v-space-4);
	overflow: hidden;
	background-color: var(--v-color-surface-muted);
	border-radius: var(--v-radius-md);
	opacity: var(--v-opacity-skeleton);
	pointer-events: none;
	user-select: none;
}

/* ======================================================
   2. VARIANTES DE CONTENU
   ====================================================== */

/*
 * Ligne de texte standard.
 */

.v-skeleton--text {
	block-size: var(--v-space-3);
	border-radius: var(--v-radius-full);
}

/*
 * Ligne représentant un titre.
 */

.v-skeleton--heading {
	block-size: var(--v-space-5);
	border-radius: var(--v-radius-md);
}

/*
 * Bloc de contenu générique.
 */

.v-skeleton--block {
	min-block-size: var(--v-space-24);
}

/*
 * Élément circulaire.
 *
 * Utilisations :
 * - avatar temporaire ;
 * - icône temporaire ;
 * - élément graphique circulaire.
 */

.v-skeleton--circle {
	inline-size: var(--v-space-10);
	block-size: var(--v-space-10);
	border-radius: var(--v-radius-full);
}

/*
 * Média responsive.
 *
 * aspect-ratio: 16 / 9 constitue une constante
 * structurelle documentée du format média.
 *
 * Cette valeur ne dépend pas du thème et ne nécessite
 * donc pas de Design Token supplémentaire.
 */

.v-skeleton--media {
	block-size: auto;
	aspect-ratio: 16 / 9;
	border-radius: var(--v-radius-lg);
}

/* ======================================================
   3. TAILLES
   ====================================================== */

/* Texte */

.v-skeleton--sm.v-skeleton--text {
	block-size: var(--v-space-2);
}

.v-skeleton--lg.v-skeleton--text {
	block-size: var(--v-space-4);
}

/* Titre */

.v-skeleton--sm.v-skeleton--heading {
	block-size: var(--v-space-4);
}

.v-skeleton--lg.v-skeleton--heading {
	block-size: var(--v-space-6);
}

/* Cercle */

.v-skeleton--sm.v-skeleton--circle {
	inline-size: var(--v-space-8);
	block-size: var(--v-space-8);
}

.v-skeleton--lg.v-skeleton--circle {
	inline-size: var(--v-space-14);
	block-size: var(--v-space-14);
}

/* ======================================================
   4. ANIMATION
   ====================================================== */

/*
 * L’animation officielle utilise exclusivement opacity.
 *
 * Aucun shimmer, dégradé mobile ou déplacement de fond
 * n’est utilisé afin de limiter :
 *
 * - les coûts de rendu ;
 * - les distractions visuelles ;
 * - les risques d’inconfort liés au mouvement.
 */

.v-skeleton.is-animated {
	animation:
		v-skeleton-pulse
		var(--v-duration-slower)
		var(--v-easing-standard)
		infinite
		alternate;
}

.v-skeleton.is-static {
	animation: none;
}

/* ======================================================
   5. ÉTATS
   ====================================================== */

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

/* ======================================================
   6. ACCESSIBILITÉ
   ====================================================== */

/*
 * Structure recommandée :
 *
 * <section aria-busy="true">
 *     <div
 *         class="
 *             v-skeleton
 *             v-skeleton--text
 *             is-animated
 *         "
 *         aria-hidden="true"
 *     ></div>
 * </section>
 *
 * Le Skeleton :
 *
 * - utilise aria-hidden="true" ;
 * - ne reçoit pas role="status" ;
 * - ne reçoit pas aria-label ;
 * - ne remplace jamais le nom accessible du contenu réel.
 *
 * Une annonce explicite de chargement utilise
 * UI-011 Spinner.
 *
 * Le chargement temporaire d’un Avatar utilise
 * UI-012 Skeleton à la place de .v-avatar.
 */

@media (forced-colors: active) {
	.v-skeleton {
		background-color: CanvasText;
		border:
			var(--v-size-border-thin)
			solid
			CanvasText;
		opacity: var(--v-opacity-40);
		forced-color-adjust: auto;
	}
}

/* ======================================================
   7. RESPONSIVE
   ====================================================== */

/*
 * Skeleton suit naturellement la largeur de son parent.
 *
 * Aucun breakpoint spécifique n’est nécessaire.
 *
 * Les compositions complexes utilisent UI-008 Stack
 * ou les futurs systèmes Grid et Layout de Visiora Core.
 */

/* ======================================================
   8. REDUCED MOTION
   ====================================================== */

@media (prefers-reduced-motion: reduce) {
	.v-skeleton,
	.v-skeleton.is-animated {
		animation: none;
		opacity: var(--v-opacity-skeleton);
	}
}

/* ======================================================
   9. COMPATIBILITÉ WORDPRESS
   ====================================================== */

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

/* ======================================================
   10. COMPATIBILITÉ GUTENBERG
   ====================================================== */

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

/* ======================================================
   11. COMPATIBILITÉ SPECTRA
   ====================================================== */

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

/* ======================================================
   12. ANIMATION
   ====================================================== */

@keyframes v-skeleton-pulse {
	from {
		opacity: var(--v-opacity-40);
	}

	to {
		opacity: var(--v-opacity-skeleton);
	}
}

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

/*
 * - Animation limitée à opacity.
 * - Aucun dégradé animé.
 * - Aucun déplacement de background.
 * - Aucun JavaScript.
 * - Aucun gestionnaire inline.
 * - Aucun contenu dynamique injecté.
 * - Aucune dépendance externe.
 * - Compatible CSP.
 * - Aucun positionnement absolu.
 * - Aucun z-index.
 * - Aucun contexte d’empilement.
 * - Compatible RTL.
 * - La bordure Forced Colors utilise le token officiel.
 */