/**
 * Visiora Core — Composant : Icon
 *
 * Primitive officielle pour les icônes SVG internes.
 *
 * Utilisations :
 * - Button
 * - Alert
 * - Badge
 * - Tooltip
 * - Avatar
 * - Navigation
 * - Pagination
 * - Modal
 * - Dashboard
 * - VEOS
 *
 * Dépendances :
 * - containers.css
 * - opacity.css
 * - animation.css
 *
 * Convention :
 * - SVG-001
 *
 * @package Visiora_Core
 */

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

.v-icon {
	display: inline-block;
	flex: 0 0 auto;
	inline-size: var(--v-size-icon-md);
	block-size: var(--v-size-icon-md);
	color: currentColor;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	vertical-align: middle;
	pointer-events: none;
	transition:
		color var(--v-transition-component),
		transform var(--v-transition-component),
		opacity var(--v-transition-component);
}

/*
 * La valeur stroke-width: 2 appartient à SVG-001.
 *
 * Elle est exprimée dans le système de coordonnées du SVG
 * normalisé avec viewBox="0 0 24 24".
 *
 * Elle constitue une constante structurelle du système
 * d’icônes et non une valeur arbitraire du thème.
 */

/* ======================================================
   2. SUPPORT D’UN WRAPPER
   ====================================================== */

/*
 * Usage principal :
 *
 * <svg class="v-icon">...</svg>
 *
 * Un wrapper reste également autorisé :
 *
 * <span class="v-icon">
 *     <svg>...</svg>
 * </span>
 */

.v-icon > svg {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	fill: inherit;
	stroke: inherit;
	stroke-width: inherit;
	stroke-linecap: inherit;
	stroke-linejoin: inherit;
}

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

.v-icon--xs {
	inline-size: var(--v-size-icon-xs);
	block-size: var(--v-size-icon-xs);
}

.v-icon--sm {
	inline-size: var(--v-size-icon-sm);
	block-size: var(--v-size-icon-sm);
}

.v-icon--md {
	inline-size: var(--v-size-icon-md);
	block-size: var(--v-size-icon-md);
}

.v-icon--lg {
	inline-size: var(--v-size-icon-lg);
	block-size: var(--v-size-icon-lg);
}

.v-icon--xl {
	inline-size: var(--v-size-icon-xl);
	block-size: var(--v-size-icon-xl);
}

/* ======================================================
   4. ROTATIONS EXPLICITES
   ====================================================== */

/*
 * Les rotations sont structurelles et restent explicites.
 *
 * Aucune rotation RTL globale n’est appliquée ici :
 * toutes les icônes ne sont pas directionnelles.
 *
 * Les composants utilisant une flèche, un chevron ou une
 * autre icône directionnelle gèrent eux-mêmes leur adaptation
 * au sens de lecture.
 */

.v-icon--rotate-90,
.v-icon--rotate-180,
.v-icon--rotate-270 {
	transform-origin: center;
}

.v-icon--rotate-90 {
	transform: rotate(90deg);
}

.v-icon--rotate-180 {
	transform: rotate(180deg);
}

.v-icon--rotate-270 {
	transform: rotate(270deg);
}

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

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

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

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

/*
 * Icône décorative :
 *
 * <svg
 *     class="v-icon"
 *     aria-hidden="true"
 *     focusable="false"
 * >
 *
 * Icône informative autonome :
 *
 * <svg
 *     class="v-icon"
 *     role="img"
 *     aria-label="Information"
 *     focusable="false"
 * >
 *
 * Lorsqu’une icône accompagne un libellé visible,
 * elle reste décorative avec aria-hidden="true".
 *
 * Une icône ne doit jamais être l’unique moyen de
 * transmettre une information essentielle sans fournir
 * un nom accessible équivalent.
 *
 * La primitive Icon n’est jamais interactive directement.
 * L’interaction appartient au lien ou au bouton parent.
 */

@media (forced-colors: active) {
	.v-icon {
		color: currentColor;
		fill: none;
		stroke: currentColor;
		forced-color-adjust: auto;
	}
}

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

/*
 * Aucun redimensionnement automatique n’est appliqué.
 *
 * Les tailles xs, sm, md, lg et xl restent explicites afin
 * d’éviter une modification imprévisible de la hiérarchie
 * visuelle selon la largeur de l’écran.
 */

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

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

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

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

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

.wp-block .v-icon {
	flex-shrink: 0;
}

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

.uagb-container__content .v-icon,
.uagb-infobox .v-icon,
.uagb-buttons__outer-wrap .v-icon {
	flex-shrink: 0;
}

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

/*
 * - SVG inline uniquement.
 * - Aucun JavaScript.
 * - Aucun gestionnaire inline.
 * - Aucun fichier d’icône externe.
 * - Aucun SVG utilisateur non nettoyé.
 * - Aucune dépendance externe.
 * - Compatible CSP.
 * - Hérite automatiquement de currentColor.
 * - Aucun filtre graphique.
 * - Aucun positionnement.
 * - Aucun contexte d’empilement.
 * - pointer-events: none empêche l’icône de capturer
 *   les interactions du lien ou du bouton parent.
 */