/**
 * Visiora Core — Fondations communes des composants
 *
 * Règles transversales minimales partagées par les composants.
 *
 * Ce fichier ne remplace pas les feuilles CSS propres
 * à chaque composant.
 *
 * Version : 0.2.0
 *
 * Dépendances :
 * - colors.css
 * - spacing.css
 * - radius.css
 * - shadows.css
 * - containers.css
 * - z-index.css
 *
 * @package Visiora_Core
 */

/* ======================================================
   1. SÉCURITÉ DE DIMENSIONNEMENT
   ====================================================== */

/*
 * Le box-sizing est limité aux éléments appartenant
 * explicitement à l’espace de nom Visiora.
 */

[class^="v-"],
[class*=" v-"],
[class^="v-"]::before,
[class^="v-"]::after,
[class*=" v-"]::before,
[class*=" v-"]::after {
	box-sizing: border-box;
}

/*
 * min-inline-size: 0 protège les composants placés dans
 * des conteneurs Flexbox ou Grid contre les débordements.
 *
 * Aucune règle max-inline-size globale n’est appliquée :
 * elle pourrait casser les composants possédant une largeur
 * intrinsèque, notamment Tooltip, Icon, Avatar ou Badge.
 */

[class^="v-"],
[class*=" v-"] {
	min-inline-size: 0;
}

/* ======================================================
   2. PROTECTION DES MÉDIAS
   ====================================================== */

/*
 * Les médias raster, vidéo et iframe restent contenus
 * dans les composants Visiora.
 *
 * Les SVG sont volontairement exclus :
 * leur dimension est pilotée par UI-009 Icon ou par
 * leur composant propriétaire.
 */

[class^="v-"] img,
[class*=" v-"] img,
[class^="v-"] video,
[class*=" v-"] video,
[class^="v-"] iframe,
[class*=" v-"] iframe {
	display: block;
	max-inline-size: 100%;
	block-size: auto;
}

/*
 * Les tableaux restent limités à la largeur disponible.
 *
 * Leur éventuel défilement horizontal doit être géré
 * par un conteneur dédié, et non par la table elle-même.
 */

[class^="v-"] table,
[class*=" v-"] table {
	max-inline-size: 100%;
}

/* ======================================================
   3. CONTENEUR PRINCIPAL
   ====================================================== */

.v-container {
	inline-size: 100%;
	max-inline-size:
		var(
			--v-container-width,
			var(--v-container-standard)
		);
	margin-inline: auto;
	padding-inline: var(--v-space-4);
}

/*
 * --v-container-width constitue une surcharge locale facultative.
 *
 * Exemple :
 *
 * <div
 *     class="v-container"
 *     style="--v-container-width: var(--v-container-wide);"
 * >
 *
 * Dans les intégrations CSP strictes, cette surcharge doit
 * être fournie par une classe dédiée plutôt que par style="".
 *
 * En son absence, --v-container-standard est utilisé.
 */

/* ======================================================
   4. SURFACE GÉNÉRIQUE
   ====================================================== */

.v-surface {
	inline-size: 100%;
	background-color: var(--v-color-surface);
	border:
		var(--v-size-border-thin)
		solid
		var(--v-color-border);
	border-radius: var(--v-radius-lg);
	box-shadow: var(--v-shadow-sm);
}

/* ======================================================
   5. TEXTE RÉSERVÉ AUX TECHNOLOGIES D’ASSISTANCE
   ====================================================== */

.v-screen-reader-text {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/*
 * Lorsqu’il reçoit le focus, notamment comme lien d’évitement,
 * l’élément redevient visible et accessible à l’écran.
 */

.v-screen-reader-text:focus {
	position: fixed;
	z-index: var(--v-z-skip-link);
	inset-block-start: var(--v-space-4);
	inset-inline-start: var(--v-space-4);
	inline-size: auto;
	block-size: auto;
	margin: 0;
	padding: var(--v-space-3) var(--v-space-4);
	overflow: visible;
	background-color: var(--v-color-surface);
	border:
		var(--v-size-border-thin)
		solid
		var(--v-color-border-strong);
	border-radius: var(--v-radius-sm);
	box-shadow: var(--v-shadow-md);
	color: var(--v-color-heading);
	clip: auto;
	clip-path: none;
	white-space: normal;
}

/* ======================================================
   6. ACCESSIBILITÉ — FORCED COLORS
   ====================================================== */

@media (forced-colors: active) {
	.v-screen-reader-text:focus {
		background-color: Canvas;
		border-color: CanvasText;
		box-shadow: none;
		color: CanvasText;
		outline:
			var(--v-size-border-medium)
			solid
			Highlight;
		outline-offset: var(--v-size-border-medium);
		forced-color-adjust: auto;
	}
}

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

/*
 * Breakpoint officiel historique sm : 40rem.
 *
 * L’ancienne valeur isolée de 600px est supprimée afin
 * d’éviter deux seuils mobiles presque identiques.
 */

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

/* ======================================================
   8. COMPATIBILITÉ WORDPRESS
   ====================================================== */

.v-root .v-container,
.v-root .v-surface,
.v-root .v-screen-reader-text,
.editor-styles-wrapper .v-container,
.editor-styles-wrapper .v-surface,
.editor-styles-wrapper .v-screen-reader-text {
	box-sizing: border-box;
}

/*
 * Cette couche ne redéfinit ni color, ni font, ni dimensions
 * des composants spécialisés.
 *
 * Elle reste volontairement non intrusive afin de ne pas
 * neutraliser les variantes ou états interactifs.
 */

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

/*
 * - Aucun JavaScript.
 * - Aucun gestionnaire inline.
 * - Aucune dépendance externe.
 * - Compatible CSP.
 * - Aucun z-index numérique direct.
 * - Bordures pilotées par les tokens officiels.
 * - Propriétés dimensionnelles logiques.
 * - Aucun style générique imposé aux SVG.
 * - Aucun max-inline-size global susceptible de casser
 *   les composants à largeur intrinsèque.
 * - Le composant temporaire .v-core-test est supprimé.
 */