/**
 * Visiora Core — Composant : Card
 *
 * Conteneur de contenu réutilisable pour les logiciels,
 * articles, catégories, comparatifs et contenus éditoriaux.
 *
 * Dépendances :
 * - colors.css
 * - spacing.css
 * - typography.css
 * - radius.css
 * - shadows.css
 * - opacity.css
 * - animation.css
 * - containers.css
 * - z-index.css
 * - primitives/divider.css
 *
 * @package Visiora_Core
 */

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

.v-card {
	--v-card-media-inline-size: 38%;

	position: relative;
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
	max-inline-size: 100%;
	overflow-wrap: anywhere;
	background-color: var(--v-color-surface);
	border:
		var(--v-size-border-thin)
		solid
		var(--v-color-border);
	border-radius: var(--v-radius-card);
	box-shadow: var(--v-shadow-card);
	color: var(--v-color-text);
	font-family: var(--v-font-family-body);
}

/*
 * Réinitialisation d’une Card rendue avec un élément button.
 *
 * Ne pas utiliser font: inherit ici : cela écraserait
 * la typographie interne définie par les éléments de Card.
 */

button.v-card {
	inline-size: 100%;
	padding: 0;
	appearance: none;
	-webkit-appearance: none;
	background: none;
	color: inherit;
	text-align: start;
}

/* ======================================================
   2. ZONES INTERNES
   ====================================================== */

.v-card__header,
.v-card__body,
.v-card__footer,
.v-card__content {
	min-inline-size: 0;
}

.v-card__header {
	display: flex;
	flex-direction: column;
	gap: var(--v-space-component-sm);
	padding:
		var(--v-space-5)
		var(--v-space-5)
		0;
}

.v-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--v-space-component-md);
	padding: var(--v-space-5);
}

.v-card__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--v-space-component-sm);
	padding:
		0
		var(--v-space-5)
		var(--v-space-5);
}

.v-card__content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

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

.v-card__title {
	margin: 0;
	color: var(--v-color-heading);
	font-family: var(--v-font-family-heading);
	font-size: var(--v-heading-h6-size);
	font-weight: var(--v-heading-h6-weight);
	line-height: var(--v-heading-h6-line-height);
	letter-spacing: var(--v-heading-h6-letter-spacing);
}

.v-card__title a {
	color: inherit;
	text-decoration: none;
}

.v-card__title a:hover {
	color: var(--v-color-link-hover);
	text-decoration: none;
}

.v-card__description {
	margin: 0;
	color: var(--v-color-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);
}

.v-card__eyebrow {
	margin: 0;
	color: var(--v-color-text-muted);
	font-family: var(--v-font-family-body);
	font-size: var(--v-text-caption-size);
	font-weight: var(--v-text-caption-weight);
	line-height: var(--v-text-caption-line-height);
	letter-spacing: var(--v-text-caption-letter-spacing);
	text-transform: uppercase;
}

/* ======================================================
   4. MÉDIA
   ====================================================== */

.v-card__media {
	position: relative;
	display: block;
	inline-size: 100%;
	min-inline-size: 0;
	overflow: hidden;
	background-color: var(--v-color-surface-muted);
	border-radius:
		var(--v-radius-card)
		var(--v-radius-card)
		0
		0;
}

.v-card__media img,
.v-card__media video,
.v-card__media iframe {
	display: block;
	inline-size: 100%;
	max-inline-size: 100%;
	border: 0;
}

.v-card__media img,
.v-card__media video {
	block-size: auto;
}

.v-card__media img {
	object-fit: cover;
}

/* ======================================================
   5. ACTIONS ET MÉTADONNÉES
   ====================================================== */

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

.v-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--v-space-component-sm);
	min-inline-size: 0;
	color: var(--v-color-text-muted);
	font-family: var(--v-font-family-body);
	font-size: var(--v-text-caption-size);
	font-weight: var(--v-text-caption-weight);
	line-height: var(--v-text-caption-line-height);
}

/* ======================================================
   6. SÉPARATEUR — COMPATIBILITÉ
   ====================================================== */

/*
 * UI-013 Divider constitue le séparateur officiel :
 *
 * <div class="v-divider" aria-hidden="true"></div>
 *
 * .v-card__separator reste uniquement disponible comme
 * couche de compatibilité pour les intégrations historiques.
 *
 * Ne plus l’utiliser dans les nouveaux composants.
 */

.v-card__separator {
	display: block;
	flex: 0 0 auto;
	inline-size: 100%;
	block-size: 0;
	margin: 0;
	border: 0;
	border-block-start:
		var(--v-size-border-thin)
		solid
		var(--v-color-border);
}

/* ======================================================
   7. VARIANTES VISUELLES
   ====================================================== */

.v-card--flat {
	box-shadow: none;
}

.v-card--outlined {
	border-color: var(--v-color-border-strong);
	box-shadow: none;
}

.v-card--elevated {
	border-color: transparent;
	box-shadow: var(--v-shadow-card);
}

.v-card--subtle {
	background-color: var(--v-color-background-subtle);
	box-shadow: none;
}

.v-card--primary {
	background-color: var(--v-color-primary-soft);
	border-color: var(--v-color-primary-border);
	box-shadow: none;
}

.v-card--primary .v-card__title {
	color: var(--v-color-primary-text);
}

/* ======================================================
   8. VARIANTE HORIZONTALE
   ====================================================== */

/*
 * 38 % constitue une proportion structurelle historique
 * propre à la composition horizontale.
 *
 * Elle est exposée sous forme de variable locale afin
 * de pouvoir évoluer sans modifier l’API publique.
 */

.v-card--horizontal {
	flex-direction: row;
	align-items: stretch;
}

.v-card--horizontal .v-card__media {
	flex:
		0
		0
		var(--v-card-media-inline-size);
	inline-size: var(--v-card-media-inline-size);
	border-radius:
		var(--v-radius-card)
		0
		0
		var(--v-radius-card);
}

.v-card--horizontal .v-card__media img {
	block-size: 100%;
	object-fit: cover;
}

/*
 * Adaptation des rayons au sens RTL.
 */

.v-card--horizontal:dir(rtl) .v-card__media {
	border-radius:
		0
		var(--v-radius-card)
		var(--v-radius-card)
		0;
}

/* ======================================================
   9. DENSITÉS
   ====================================================== */

.v-card--compact .v-card__header {
	padding:
		var(--v-space-4)
		var(--v-space-4)
		0;
}

.v-card--compact .v-card__body {
	gap: var(--v-space-component-sm);
	padding: var(--v-space-4);
}

.v-card--compact .v-card__footer {
	padding:
		0
		var(--v-space-4)
		var(--v-space-4);
}

.v-card--spacious .v-card__header {
	padding:
		var(--v-space-7)
		var(--v-space-7)
		0;
}

.v-card--spacious .v-card__body {
	gap: var(--v-space-component-lg);
	padding: var(--v-space-7);
}

.v-card--spacious .v-card__footer {
	padding:
		0
		var(--v-space-7)
		var(--v-space-7);
}

/* ======================================================
   10. ÉTATS
   ====================================================== */

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

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

.v-card.is-selected {
	border-color: var(--v-color-primary);
	box-shadow: var(--v-shadow-focus);
}

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

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

/* ======================================================
   11. CARD INTERACTIVE
   ====================================================== */

a.v-card,
button.v-card {
	color: var(--v-color-text);
	text-decoration: none;
	cursor: pointer;
	touch-action: manipulation;
	user-select: none;
	transition:
		background-color var(--v-transition-component),
		border-color var(--v-transition-component),
		box-shadow var(--v-transition-component),
		transform var(--v-transition-component);
}

a.v-card:hover,
button.v-card:hover {
	border-color: var(--v-color-primary-border);
	box-shadow: var(--v-shadow-card-hover);
	text-decoration: none;
	transform: translateY(-2px);
}

a.v-card:focus,
button.v-card:focus {
	outline: none;
}

a.v-card:focus-visible,
button.v-card:focus-visible {
	border-color: var(--v-color-border-focus);
	box-shadow: var(--v-shadow-focus);
	outline: none;
}

/*
 * translateY(-2px) constitue l’élévation interactive
 * historique de la Card.
 *
 * Cette valeur reste provisoirement conservée jusqu’à
 * l’audit global des tokens de mouvement et d’élévation.
 */

/* ======================================================
   12. LIEN ÉTIRÉ
   ====================================================== */

.v-card__title a:focus {
	outline: none;
}

.v-card__title a:focus-visible {
	border-radius: var(--v-radius-sm);
	box-shadow: var(--v-shadow-focus);
	outline: none;
}

/*
 * Le lien étiré ne doit être utilisé que lorsque la Card
 * ne contient aucun autre lien, bouton ou contrôle interactif.
 */

.v-card.has-stretched-link .v-card__title a::after {
	position: absolute;
	inset: 0;
	content: "";
}

/*
 * Les actions restent au-dessus de la surface du lien étiré.
 */

.v-card.has-stretched-link .v-card__actions {
	position: relative;
	z-index: var(--v-z-card-raised);
}

/* ======================================================
   13. RESPONSIVE
   ====================================================== */

/*
 * Correspond au breakpoint historique md : 48rem.
 */

@media (max-width: 48rem) {
	.v-card--horizontal {
		flex-direction: column;
	}

	.v-card--horizontal .v-card__media,
	.v-card--horizontal:dir(rtl) .v-card__media {
		flex-basis: auto;
		inline-size: 100%;
		border-radius:
			var(--v-radius-card)
			var(--v-radius-card)
			0
			0;
	}

	.v-card--horizontal .v-card__media img {
		block-size: auto;
	}
}

/*
 * Correspond au breakpoint historique sm : 40rem.
 */

@media (max-width: 40rem) {
	.v-card__header {
		padding:
			var(--v-space-4)
			var(--v-space-4)
			0;
	}

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

	.v-card__footer {
		padding:
			0
			var(--v-space-4)
			var(--v-space-4);
	}

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

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

/* ======================================================
   14. FORCED COLORS
   ====================================================== */

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

	.v-card__title,
	.v-card__description,
	.v-card__meta,
	.v-card__eyebrow {
		color: CanvasText;
	}

	a.v-card:focus-visible,
	button.v-card:focus-visible,
	.v-card__title a:focus-visible {
		outline:
			var(--v-size-border-medium)
			solid
			Highlight;
		outline-offset: var(--v-size-border-medium);
		box-shadow: none;
	}
}

/* ======================================================
   15. REDUCED MOTION
   ====================================================== */

@media (prefers-reduced-motion: reduce) {
	a.v-card,
	button.v-card {
		transition: none;
	}

	a.v-card:hover,
	button.v-card:hover {
		transform: none;
	}
}

/* ======================================================
   16. COMPATIBILITÉ WORDPRESS
   ====================================================== */

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

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

/*
 * Ne pas redéfinir color sur a.v-card dans cette couche.
 *
 * Une déclaration tardive et plus spécifique pourrait
 * neutraliser les couleurs internes ou les états interactifs.
 */

.v-root a.v-card,
.editor-styles-wrapper a.v-card {
	text-decoration: none;
}

/*
 * Ne pas appliquer font: inherit à button.v-card.
 *
 * Cela pourrait écraser les propriétés typographiques
 * des éléments internes du composant.
 */

.v-root .v-card figure,
.editor-styles-wrapper .v-card figure {
	margin: 0;
}

/* ======================================================
   17. COMPATIBILITÉ GUTENBERG
   ====================================================== */

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

/* ======================================================
   18. COMPATIBILITÉ SPECTRA
   ====================================================== */

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

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

/*
 * - Aucun JavaScript requis pour la présentation.
 * - Aucun gestionnaire inline.
 * - Aucune dépendance externe.
 * - Compatible CSP.
 * - Compatible RTL.
 * - UI-013 Divider constitue le séparateur officiel.
 * - .v-card__separator reste une compatibilité temporaire.
 * - Aucun filtre graphique.
 * - Un seul transform est utilisé au survol interactif.
 * - Reduced Motion supprime ce transform.
 * - Le lien étiré reste limité aux Cards sans autres
 *   interactions concurrentes.
 * - Les règles WordPress ne neutralisent ni les couleurs,
 *   ni la typographie interne du composant.
 * - Les contenus dynamiques et URL doivent être validés
 *   puis échappés côté PHP avant le rendu.
 */