/**
 * Visiora Core — Composant : Alert
 *
 * Message contextuel destiné aux informations,
 * confirmations, avertissements et erreurs.
 *
 * Dépendances :
 * - colors.css
 * - spacing.css
 * - typography.css
 * - radius.css
 * - shadows.css
 * - opacity.css
 * - animation.css
 * - containers.css
 * - primitives/icon.css
 * - primitives/button.css
 *
 * @package Visiora_Core
 */

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

.v-alert {
	--v-alert-background: var(--v-color-background-subtle);
	--v-alert-border: var(--v-color-border);
	--v-alert-accent: var(--v-color-border-strong);
	--v-alert-text: var(--v-color-text);
	--v-alert-title: var(--v-color-heading);

	display: flex;
	align-items: flex-start;
	gap: var(--v-space-component-sm);
	inline-size: 100%;
	min-inline-size: 0;
	max-inline-size: 100%;
	padding: var(--v-space-4);
	overflow-wrap: anywhere;
	background-color: var(--v-alert-background);
	border:
		var(--v-size-border-thin)
		solid
		var(--v-alert-border);
	border-radius: var(--v-radius-lg);
	color: var(--v-alert-text);
	font-family: var(--v-font-family-body);
	font-size: var(--v-text-small-size);
	font-weight: var(--v-text-small-weight);
	line-height: var(--v-text-small-line-height);
}

/* ======================================================
   2. ICÔNE PRINCIPALE
   ====================================================== */

/*
 * .v-alert__icon constitue uniquement un crochet contextuel.
 *
 * Usage recommandé :
 *
 * <svg class="v-icon v-alert__icon">...</svg>
 *
 * UI-009 Icon reste responsable du dessin SVG.
 * Alert définit uniquement la taille et l’alignement
 * attendus dans ce contexte.
 */

.v-alert__icon {
	flex: 0 0 auto;
	inline-size: var(--v-size-icon-md);
	block-size: var(--v-size-icon-md);
	margin-block-start: var(--v-space-1);
	color: inherit;
}

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

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

/* ======================================================
   3. CONTENU
   ====================================================== */

.v-alert__content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--v-space-component-xs);
	min-inline-size: 0;
}

.v-alert__title {
	margin: 0;
	color: var(--v-alert-title);
	font-family: var(--v-font-family-heading);
	font-size: var(--v-font-size-sm);
	font-weight: var(--v-font-weight-semibold);
	line-height: var(--v-line-height-normal);
	letter-spacing: var(--v-letter-spacing-normal);
}

.v-alert__message {
	margin: 0;
	color: inherit;
}

.v-alert__message > :first-child {
	margin-block-start: 0;
}

.v-alert__message > :last-child {
	margin-block-end: 0;
}

/* ======================================================
   4. ACTIONS
   ====================================================== */

/*
 * Les actions utilisent de préférence UI-002 Button.
 *
 * La disposition interne appartient à l’implémentation
 * privée d’Alert et peut donc utiliser Flexbox directement.
 */

.v-alert__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--v-space-component-sm);
	min-inline-size: 0;
	margin-block-start: var(--v-space-component-xs);
}

/* ======================================================
   5. BOUTON DE FERMETURE
   ====================================================== */

/*
 * Le bouton de fermeture reste un contrôle spécialisé
 * interne à Alert.
 *
 * Il ne compose pas directement avec .v-button afin d’éviter
 * d’hériter des dimensions, espacements et variantes d’un
 * bouton d’action standard.
 *
 * Son icône compose néanmoins avec UI-009 Icon.
 */

.v-alert__close {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	inline-size: var(--v-space-8);
	block-size: var(--v-space-8);
	margin: calc(var(--v-space-1) * -1);
	padding: 0;
	appearance: none;
	-webkit-appearance: none;
	background-color: transparent;
	border: 0;
	border-radius: var(--v-radius-md);
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: var(--v-line-height-none);
	cursor: pointer;
	touch-action: manipulation;
	user-select: none;
	transition:
		background-color var(--v-transition-interactive),
		box-shadow var(--v-transition-interactive),
		opacity var(--v-transition-interactive);
}

.v-alert__close:hover {
	background-color: var(--v-color-surface-subtle);
}

.v-alert__close:focus {
	outline: none;
}

.v-alert__close:focus-visible {
	box-shadow: var(--v-shadow-focus);
	outline: none;
}

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

/*
 * Usage recommandé :
 *
 * <svg class="v-icon v-icon--sm v-alert__close-icon">
 */

.v-alert__close-icon {
	flex: 0 0 auto;
	inline-size: var(--v-size-icon-sm);
	block-size: var(--v-size-icon-sm);
	color: inherit;
}

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

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

.v-alert--neutral {
	--v-alert-background: var(--v-color-background-subtle);
	--v-alert-border: var(--v-color-border);
	--v-alert-accent: var(--v-color-border-strong);
	--v-alert-text: var(--v-color-text);
	--v-alert-title: var(--v-color-heading);
}

.v-alert--primary {
	--v-alert-background: var(--v-color-primary-soft);
	--v-alert-border: var(--v-color-primary-border);
	--v-alert-accent: var(--v-color-primary);
	--v-alert-text: var(--v-color-primary-text);
	--v-alert-title: var(--v-color-primary-text);
}

.v-alert--success {
	--v-alert-background: var(--v-color-success-soft);
	--v-alert-border: var(--v-color-success-border);
	--v-alert-accent: var(--v-color-success);
	--v-alert-text: var(--v-color-success-text);
	--v-alert-title: var(--v-color-success-text);
}

.v-alert--warning {
	--v-alert-background: var(--v-color-warning-soft);
	--v-alert-border: var(--v-color-warning-border);
	--v-alert-accent: var(--v-color-warning);
	--v-alert-text: var(--v-color-warning-text);
	--v-alert-title: var(--v-color-warning-text);
}

.v-alert--danger {
	--v-alert-background: var(--v-color-danger-soft);
	--v-alert-border: var(--v-color-danger-border);
	--v-alert-accent: var(--v-color-danger);
	--v-alert-text: var(--v-color-danger-text);
	--v-alert-title: var(--v-color-danger-text);
}

.v-alert--info {
	--v-alert-background: var(--v-color-info-soft);
	--v-alert-border: var(--v-color-info-border);
	--v-alert-accent: var(--v-color-info);
	--v-alert-text: var(--v-color-info-text);
	--v-alert-title: var(--v-color-info-text);
}

/* ======================================================
   7. ACCENT LATÉRAL
   ====================================================== */

.v-alert--accent {
	border-inline-start-width: var(--v-size-border-medium);
	border-inline-start-color: var(--v-alert-accent);
}

/*
 * border-inline-start garantit l’adaptation automatique
 * de l’accent au sens LTR ou RTL.
 */

/* ======================================================
   8. TAILLES
   ====================================================== */

.v-alert--sm {
	gap: var(--v-space-component-xs);
	padding: var(--v-space-3);
	font-size: var(--v-text-caption-size);
	line-height: var(--v-text-caption-line-height);
}

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

.v-alert--sm .v-alert__close {
	inline-size: var(--v-space-7);
	block-size: var(--v-space-7);
}

.v-alert--lg {
	gap: var(--v-space-component-md);
	padding: var(--v-space-5);
	font-size: var(--v-text-body-size);
	line-height: var(--v-text-body-line-height);
}

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

.v-alert--lg .v-alert__title {
	font-size: var(--v-font-size-md);
}

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

.v-alert.is-muted {
	opacity: var(--v-opacity-muted);
}

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

.v-alert[aria-busy="true"] {
	cursor: progress;
}

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

/*
 * aria-busy indique qu’une mise à jour est en cours.
 *
 * Il ne désactive pas à lui seul les actions contenues
 * dans l’Alert. Les contrôles concernés doivent recevoir
 * leur propre état disabled si nécessaire.
 */

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

/*
 * Utiliser role="alert" uniquement pour un message urgent
 * injecté ou mis à jour dynamiquement.
 *
 * Utiliser role="status" pour une confirmation ou une
 * information dynamique non urgente.
 *
 * Une Alert statique déjà présente au chargement de la page
 * ne nécessite généralement aucun rôle ARIA.
 *
 * L’icône décorative utilise :
 *
 * aria-hidden="true"
 * focusable="false"
 *
 * Le bouton de fermeture possède un nom accessible :
 *
 * aria-label="Fermer l’alerte"
 *
 * La couleur et l’icône ne constituent jamais le seul moyen
 * de transmettre la nature du message.
 *
 * Le titre doit respecter la hiérarchie réelle de la page :
 *
 * h2, h3, h4 ou autre niveau approprié.
 */

/* ======================================================
   11. RESPONSIVE
   ====================================================== */

/*
 * Correspond au breakpoint historique sm : 40rem.
 *
 * Sa centralisation sera vérifiée lors de l’audit global
 * des breakpoints.
 */

@media (max-width: 40rem) {
	.v-alert {
		padding: var(--v-space-3);
	}

	.v-alert--lg {
		padding: var(--v-space-4);
	}

	.v-alert__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.v-alert__actions > * {
		inline-size: 100%;
	}
}

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

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

	.v-alert__title,
	.v-alert__message {
		color: CanvasText;
	}

	.v-alert--accent {
		border-inline-start-color: Highlight;
	}

	.v-alert__close {
		color: ButtonText;
	}

	.v-alert__close:focus-visible {
		outline:
			var(--v-size-border-medium)
			solid
			Highlight;
		outline-offset: var(--v-size-border-medium);
		box-shadow: none;
	}

	.v-alert__close:disabled,
	.v-alert__close[aria-disabled="true"],
	.v-alert__close.is-disabled {
		color: GrayText;
	}
}

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

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

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

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

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

.v-root .v-alert p,
.editor-styles-wrapper .v-alert p {
	margin-block-start: 0;
}

/*
 * Ne pas appliquer font: inherit de façon globale
 * aux boutons contenus dans Alert.
 *
 * Une telle règle pourrait écraser la typographie de
 * UI-002 Button ou d’un autre contrôle spécialisé.
 *
 * .v-alert__close définit explicitement les propriétés
 * typographiques dont il a réellement besoin.
 */

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

.wp-block .v-alert {
	max-inline-size: 100%;
	min-inline-size: 0;
}

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

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

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

/*
 * - Aucun SVG réimplémenté localement.
 * - UI-009 Icon gère les icônes.
 * - UI-002 Button gère les actions standard.
 * - Le bouton Close reste un contrôle interne spécialisé.
 * - Aucun JavaScript requis pour la présentation.
 * - La fermeture fonctionnelle nécessite une couche
 *   d’intégration contrôlée lorsqu’elle est activée.
 * - Aucun gestionnaire inline.
 * - Aucune dépendance externe.
 * - Compatible CSP.
 * - Compatible RTL grâce aux propriétés logiques.
 * - Aucun filtre graphique.
 * - Aucun positionnement absolu.
 * - Aucun z-index.
 * - Aucun contexte d’empilement.
 * - Les bordures utilisent les tokens officiels.
 * - Les règles WordPress ne neutralisent pas les composants
 *   Button éventuellement placés dans .v-alert__actions.
 * - Les contenus dynamiques sont validés puis échappés
 *   côté PHP avant le rendu.
 */