/**
 * Visiora Core — Composant : Progress
 *
 * Indicateur natif de progression déterminée
 * ou indéterminée.
 *
 * Dépendances :
 * - colors.css
 * - spacing.css
 * - typography.css
 * - radius.css
 * - containers.css
 * - opacity.css
 * - animation.css
 *
 * @package Visiora_Core
 */

/* ======================================================
   1. CONTENEUR
   ====================================================== */

.v-progress {
	--v-progress-color: var(--v-color-primary);

	display: flex;
	flex-direction: column;
	gap: var(--v-space-component-sm);
	inline-size: 100%;
	min-inline-size: 0;
	color: var(--v-color-text);
	font-family: var(--v-font-family-body);
}

/* ======================================================
   2. EN-TÊTE
   ====================================================== */

.v-progress__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--v-space-component-sm);
	min-inline-size: 0;
}

.v-progress__label {
	min-inline-size: 0;
	margin: 0;
	overflow-wrap: anywhere;
	color: var(--v-color-heading);
	font-size: var(--v-text-small-size);
	font-weight: var(--v-font-weight-semibold);
	line-height: var(--v-text-small-line-height);
}

.v-progress__value {
	flex: 0 0 auto;
	margin: 0;
	color: var(--v-color-text-soft);
	font-size: var(--v-text-caption-size);
	font-weight: var(--v-text-caption-weight);
	line-height: var(--v-text-caption-line-height);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* ======================================================
   3. BARRE NATIVE
   ====================================================== */

.v-progress__bar {
	display: block;
	inline-size: 100%;
	block-size: var(--v-size-progress-md);
	margin: 0;
	overflow: hidden;
	appearance: none;
	-webkit-appearance: none;
	accent-color: var(--v-progress-color);
	background-color: var(--v-color-surface-muted);
	border: 0;
	border-radius: var(--v-radius-full);
	color: var(--v-progress-color);
}

/* Piste — Chromium et Safari. */

.v-progress__bar::-webkit-progress-bar {
	background-color: var(--v-color-surface-muted);
	border-radius: var(--v-radius-full);
}

/* Valeur — Chromium et Safari. */

.v-progress__bar::-webkit-progress-value {
	background-color: currentColor;
	border-radius: var(--v-radius-full);
}

/* Valeur — Firefox. */

.v-progress__bar::-moz-progress-bar {
	background-color: currentColor;
	border-radius: var(--v-radius-full);
}

/*
 * La largeur de la valeur est calculée par l’élément HTML
 * natif <progress>.
 *
 * Aucune transition n’est appliquée aux pseudo-éléments natifs :
 * leur animation n’est pas suffisamment homogène entre les
 * moteurs de rendu pour constituer un contrat stable.
 */

/* ======================================================
   4. TAILLES
   ====================================================== */

.v-progress--sm .v-progress__bar {
	block-size: var(--v-size-progress-sm);
}

.v-progress--md .v-progress__bar {
	block-size: var(--v-size-progress-md);
}

.v-progress--lg .v-progress__bar {
	block-size: var(--v-size-progress-lg);
}

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

.v-progress--primary {
	--v-progress-color: var(--v-color-primary);
}

.v-progress--success {
	--v-progress-color: var(--v-color-success);
}

.v-progress--warning {
	--v-progress-color: var(--v-color-warning);
}

.v-progress--danger {
	--v-progress-color: var(--v-color-danger);
}

.v-progress--info {
	--v-progress-color: var(--v-color-info);
}

/* ======================================================
   6. PROGRESSION INDÉTERMINÉE
   ====================================================== */

/*
 * Une barre est indéterminée lorsque l’attribut value
 * est absent de l’élément <progress>.
 *
 * Les valeurs suivantes constituent la géométrie structurelle
 * de l’animation indéterminée :
 *
 * - orientation : 90deg ;
 * - largeur du segment : 40 % ;
 * - départ : -100 % ;
 * - arrivée : 200 %.
 *
 * Elles ne représentent pas des valeurs de thème et ne
 * nécessitent donc aucun Design Token supplémentaire.
 */

.v-progress__bar:indeterminate {
	background-color: var(--v-color-surface-muted);
	background-image:
		linear-gradient(
			90deg,
			transparent,
			currentColor,
			transparent
		);
	background-repeat: no-repeat;
	background-position: -100% 0;
	background-size: 40% 100%;
	animation:
		v-progress-indeterminate
		var(--v-duration-slower)
		var(--v-easing-linear)
		infinite;
}

/* Neutralisation de la piste native WebKit. */

.v-progress__bar:indeterminate::-webkit-progress-bar {
	background-color: transparent;
}

/* Neutralisation de la valeur native WebKit. */

.v-progress__bar:indeterminate::-webkit-progress-value {
	background-color: transparent;
}

/* Neutralisation de la valeur native Firefox. */

.v-progress__bar:indeterminate::-moz-progress-bar {
	background-color: transparent;
}

/* ======================================================
   7. DESCRIPTION
   ====================================================== */

.v-progress__description {
	margin: 0;
	overflow-wrap: anywhere;
	color: var(--v-color-text-soft);
	font-size: var(--v-text-caption-size);
	font-weight: var(--v-text-caption-weight);
	line-height: var(--v-text-caption-line-height);
}

/* ======================================================
   8. ÉTATS
   ====================================================== */

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

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

/* ======================================================
   9. ACCESSIBILITÉ
   ====================================================== */

/*
 * Progression déterminée :
 *
 * <progress
 *     class="v-progress__bar"
 *     value="65"
 *     max="100"
 * >
 *     65 %
 * </progress>
 *
 * Progression indéterminée :
 *
 * <progress
 *     class="v-progress__bar"
 *     max="100"
 * >
 *     Analyse en cours
 * </progress>
 *
 * L’élément <progress> doit posséder un nom accessible
 * obtenu avec :
 *
 * - un élément <label> associé par for/id ;
 * - aria-label ;
 * - ou aria-labelledby.
 *
 * La valeur visuelle affichée dans .v-progress__value
 * ne remplace pas le nom accessible de la barre.
 *
 * Lorsqu’elle répète la valeur native du Progress,
 * elle utilise aria-hidden="true".
 */

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

	.v-progress__bar::-webkit-progress-bar {
		background-color: Canvas;
	}

	.v-progress__bar::-webkit-progress-value,
	.v-progress__bar::-moz-progress-bar {
		background-color: Highlight;
	}

	.v-progress__bar:indeterminate {
		background-color: Canvas;
		background-image:
			linear-gradient(
				90deg,
				transparent,
				Highlight,
				transparent
			);
	}
}

/* ======================================================
   10. REDUCED MOTION
   ====================================================== */

@media (prefers-reduced-motion: reduce) {
	.v-progress__bar:indeterminate {
		background-position: center;
		animation: none;
	}
}

/* ======================================================
   11. COMPATIBILITÉ WORDPRESS
   ====================================================== */

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

.v-root .v-progress progress,
.editor-styles-wrapper .v-progress progress {
	max-inline-size: 100%;
}

/* ======================================================
   12. COMPATIBILITÉ GUTENBERG
   ====================================================== */

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

/* ======================================================
   13. COMPATIBILITÉ SPECTRA
   ====================================================== */

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

/* ======================================================
   14. ANIMATION
   ====================================================== */

@keyframes v-progress-indeterminate {
	from {
		background-position: -100% 0;
	}

	to {
		background-position: 200% 0;
	}
}

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

/*
 * - Élément HTML <progress> natif.
 * - Aucun JavaScript requis pour la présentation.
 * - Aucun attribut style dynamique.
 * - Aucun contenu HTML utilisateur injecté.
 * - Aucune dépendance externe.
 * - Compatible CSP.
 * - Animation limitée au mode indéterminé.
 * - Reduced Motion désactive entièrement l’animation.
 * - Aucun positionnement absolu.
 * - Aucun z-index.
 * - Aucun contexte d’empilement.
 * - Propriétés dimensionnelles logiques.
 * - Bordure Forced Colors utilisant un token officiel.
 */