/**
 * Visiora Core — Composant : Avatar
 *
 * Avatar capable d’afficher :
 * - une image ;
 * - des initiales ;
 * - une icône de remplacement ;
 * - un indicateur de statut externe ;
 * - un groupe d’avatars superposés.
 *
 * La sélection Image → Initiales → Icône est effectuée
 * avant le rendu par la couche PHP.
 *
 * Le chargement est assuré exclusivement par UI-012 Skeleton.
 *
 * Dépendances :
 * - colors.css
 * - typography.css
 * - radius.css
 * - opacity.css
 * - animation.css
 * - containers.css
 * - shadows.css
 * - z-index.css
 * - primitives/icon.css
 * - primitives/status-dot.css
 * - primitives/stack.css
 * - feedback/skeleton.css
 *
 * @package Visiora_Core
 */

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

.v-avatar {
	position: relative;
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	inline-size: var(--v-size-avatar-md);
	block-size: var(--v-size-avatar-md);
	overflow: hidden;
	background-color: var(--v-color-surface-muted);
	border-radius: var(--v-radius-avatar);
	color: var(--v-color-text-soft);
	font-family: var(--v-font-family-body);
	font-size: var(--v-font-size-sm);
	font-weight: var(--v-font-weight-semibold);
	line-height: var(--v-line-height-none);
	letter-spacing: var(--v-letter-spacing-normal);
	vertical-align: middle;
	isolation: isolate;
	transition:
		opacity var(--v-transition-component),
		box-shadow var(--v-transition-component);
}

/*
 * isolation: isolate est conservé sur l’Avatar lui-même.
 *
 * Il garantit que ses contenus internes restent confinés
 * dans son propre contexte visuel, notamment lorsqu’une image
 * ou une intégration future utilise une couche interne.
 *
 * Il ne modifie pas la hiérarchie globale du Status Dot,
 * celui-ci étant placé à l’extérieur dans .v-avatar-wrapper.
 */

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

.v-avatar__image,
.v-avatar__initials,
.v-avatar__icon {
	display: block;
	flex: 0 0 auto;
}

/* Image */

.v-avatar__image {
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: none;
	border-radius: inherit;
	object-fit: cover;
	object-position: center;
}

/* Initiales */

.v-avatar__initials {
	max-inline-size: 100%;
	overflow: hidden;
	color: inherit;
	line-height: inherit;
	text-align: center;
	text-overflow: clip;
	white-space: nowrap;
	user-select: none;
}

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

/*
 * .v-avatar__icon constitue uniquement un crochet contextuel.
 *
 * Usage recommandé :
 *
 * <svg class="v-icon v-avatar__icon">...</svg>
 *
 * UI-009 Icon reste responsable du dessin SVG.
 * Avatar définit uniquement la taille contextuelle.
 */

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

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

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

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

.v-avatar--xs {
	inline-size: var(--v-size-avatar-xs);
	block-size: var(--v-size-avatar-xs);
	font-size: var(--v-font-size-2xs);
}

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

.v-avatar--sm {
	inline-size: var(--v-size-avatar-sm);
	block-size: var(--v-size-avatar-sm);
	font-size: var(--v-font-size-xs);
}

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

.v-avatar--md {
	inline-size: var(--v-size-avatar-md);
	block-size: var(--v-size-avatar-md);
	font-size: var(--v-font-size-sm);
}

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

.v-avatar--lg {
	inline-size: var(--v-size-avatar-lg);
	block-size: var(--v-size-avatar-lg);
	font-size: var(--v-font-size-md);
}

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

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

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

/* ======================================================
   5. FORMES
   ====================================================== */

/*
 * Circle constitue la forme par défaut.
 *
 * Le modificateur explicite reste disponible lorsque
 * l’intégration doit déclarer clairement son intention.
 */

.v-avatar--circle {
	border-radius: var(--v-radius-avatar);
}

.v-avatar--rounded {
	border-radius: var(--v-radius-avatar-rounded);
}

.v-avatar--square {
	border-radius: var(--v-radius-avatar-square);
}

/* ======================================================
   6. ANNEAU ET ÉLÉVATION
   ====================================================== */

.v-avatar--ring {
	box-shadow:
		0 0 0 var(--v-size-avatar-ring-width)
		var(--v-color-background);
}

.v-avatar--elevated {
	box-shadow: var(--v-shadow-avatar);
}

.v-avatar--ring.v-avatar--elevated {
	box-shadow:
		0 0 0 var(--v-size-avatar-ring-width)
		var(--v-color-background),
		var(--v-shadow-avatar);
}

/*
 * Les zéros utilisés dans la géométrie de l’anneau sont
 * structurels et ne constituent pas des valeurs de thème.
 *
 * L’épaisseur et la couleur utilisent des tokens officiels.
 */

/* ======================================================
   7. WRAPPER ET INDICATEUR DE STATUT
   ====================================================== */

/*
 * UI-007 Status Dot reste extérieur à .v-avatar afin
 * de ne pas être masqué par overflow: hidden.
 */

.v-avatar-wrapper {
	position: relative;
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	min-inline-size: 0;
	vertical-align: middle;
}

.v-avatar-wrapper > .v-status-dot {
	position: absolute;
	z-index: var(--v-z-card-raised);
	inset-inline-end:
		calc(var(--v-size-avatar-status-offset) * -1);
	inset-block-end:
		calc(var(--v-size-avatar-status-offset) * -1);
}

/*
 * Le décalage négatif du Status Dot est calculé à partir
 * du token officiel --v-size-avatar-status-offset.
 *
 * Aucun positionnement physique left/right n’est utilisé,
 * ce qui conserve la compatibilité RTL.
 */

/* ======================================================
   8. GROUPES D’AVATARS
   ====================================================== */

/*
 * Les groupes composent avec UI-008 Stack :
 *
 * <div
 *     class="
 *         v-avatar-group
 *         v-stack
 *         v-stack--row
 *         v-stack--overlap
 *     "
 * >
 *     ...
 * </div>
 *
 * Le token spécialisé Avatar redéfinit localement
 * le chevauchement générique de Stack.
 */

.v-avatar-group {
	--v-size-stack-overlap:
		var(--v-size-avatar-group-overlap);

	min-inline-size: 0;
}

/*
 * Chaque élément reçoit un contexte de positionnement afin
 * de pouvoir passer temporairement au-dessus des autres
 * lors du survol ou du focus clavier.
 */

.v-avatar-group > * {
	position: relative;
}

/*
 * :focus-within prend en charge les Avatars contenus dans
 * un lien ou un bouton focalisable.
 *
 * Le survol améliore uniquement la lisibilité visuelle
 * d’un groupe superposé.
 */

.v-avatar-group > *:hover,
.v-avatar-group > *:focus-within {
	z-index: var(--v-z-card-raised);
}

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

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

.v-avatar.is-hidden,
.v-avatar[hidden],
.v-avatar-wrapper[hidden],
.v-avatar-group[hidden] {
	display: none;
}

/*
 * Avatar n’est pas interactif par défaut.
 *
 * aria-disabled ne doit être utilisé que lorsque l’Avatar
 * participe à un composant plus large dont l’état désactivé
 * doit être représenté visuellement.
 *
 * L’état interactif réel appartient au lien ou au bouton parent.
 */

/* ======================================================
   10. CHARGEMENT AVEC UI-012 SKELETON
   ====================================================== */

/*
 * Avatar ne possède aucun état de chargement interne.
 *
 * Pendant le chargement, utiliser UI-012 Skeleton
 * à la place de l’Avatar :
 *
 * <div
 *     class="
 *         v-skeleton
 *         v-skeleton--circle
 *         v-skeleton--lg
 *         is-animated
 *     "
 *     aria-hidden="true"
 * ></div>
 *
 * La région concernée porte aria-busy="true".
 *
 * Ne pas réintroduire :
 *
 * - .v-avatar.is-loading ;
 * - une pseudo-couche de chargement ;
 * - un @keyframes propre à Avatar.
 */

/* ======================================================
   11. ACCESSIBILITÉ
   ====================================================== */

/*
 * Avatar avec image informative :
 *
 * <span class="v-avatar">
 *     <img
 *         class="v-avatar__image"
 *         src="..."
 *         alt="Nom de la personne"
 *     >
 * </span>
 *
 * Avatar décoratif :
 *
 * <span class="v-avatar" aria-hidden="true">
 *     <img
 *         class="v-avatar__image"
 *         src="..."
 *         alt=""
 *     >
 * </span>
 *
 * Avatar avec initiales :
 *
 * <span
 *     class="v-avatar"
 *     role="img"
 *     aria-label="Nom de la personne"
 * >
 *     <span
 *         class="v-avatar__initials"
 *         aria-hidden="true"
 *     >
 *         NV
 *     </span>
 * </span>
 *
 * Avatar avec icône :
 *
 * <span
 *     class="v-avatar"
 *     role="img"
 *     aria-label="Utilisateur sans photo"
 * >
 *     <svg
 *         class="v-icon v-avatar__icon"
 *         aria-hidden="true"
 *         focusable="false"
 *     >
 *         ...
 *     </svg>
 * </span>
 *
 * Avatar n’est jamais interactif directement.
 *
 * Les comportements hover, focus, activation et disabled
 * appartiennent au lien ou au bouton parent.
 */

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

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

	.v-avatar--ring,
	.v-avatar--ring.v-avatar--elevated {
		box-shadow: none;
	}
}

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

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

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

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

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

/*
 * Aucune règle WordPress ne redéfinit :
 *
 * - color ;
 * - font ;
 * - border-radius ;
 * - box-shadow ;
 * - dimensions.
 *
 * L’API visuelle du composant reste exclusivement pilotée
 * par ses classes et ses Design Tokens.
 */

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

.wp-block .v-avatar,
.wp-block .v-avatar-wrapper {
	flex-shrink: 0;
}

.wp-block .v-avatar-group {
	min-inline-size: 0;
}

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

.uagb-container__content .v-avatar,
.uagb-container__content .v-avatar-wrapper,
.uagb-infobox .v-avatar,
.uagb-infobox .v-avatar-wrapper {
	flex-shrink: 0;
}

.uagb-container__content .v-avatar-group,
.uagb-infobox .v-avatar-group {
	min-inline-size: 0;
}

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

/*
 * - Aucun JavaScript requis pour la présentation.
 * - Aucun gestionnaire inline.
 * - Aucun système de chargement dupliqué.
 * - Aucun @keyframes propre à Avatar.
 * - UI-012 Skeleton gère le chargement.
 * - UI-009 Icon gère les icônes.
 * - UI-007 Status Dot gère les statuts.
 * - UI-008 Stack gère les groupes et chevauchements.
 * - Aucune dépendance externe.
 * - Compatible CSP.
 * - Compatible RTL grâce aux propriétés logiques.
 * - Aucun filtre graphique.
 * - Aucun z-index direct arbitraire.
 * - Les niveaux utilisent --v-z-card-raised.
 * - Les données dynamiques sont validées puis échappées
 *   côté PHP avant le rendu.
 * - Les URL d’images sont validées avec les fonctions
 *   WordPress adaptées avant leur affichage.
 * - Les SVG proviennent exclusivement de la bibliothèque
 *   interne approuvée.
 */