/**
 * Visiora Core — Composant : Divider
 *
 * Séparateur horizontal ou vertical destiné à structurer
 * visuellement les interfaces.
 *
 * Dépendances :
 * - colors.css
 * - spacing.css
 * - containers.css
 *
 * @package Visiora_Core
 */

/* ======================================================
   1. BASE
   ====================================================== */

.v-divider {
	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);
}

/* ======================================================
   2. ORIENTATION
   ====================================================== */

/*
 * Le Divider horizontal constitue le comportement par défaut.
 */

.v-divider--horizontal {
	inline-size: 100%;
	block-size: 0;
	border-block-start-width: var(--v-size-border-thin);
	border-inline-start: 0;
}

/*
 * Le Divider vertical dépend d’un parent possédant une hauteur
 * déterminable, notamment un conteneur Flex ou Grid étiré.
 *
 * Sans hauteur disponible sur le parent, block-size: 100 %
 * ne peut pas produire une séparation verticale visible.
 */

.v-divider--vertical {
	display: inline-block;
	inline-size: 0;
	block-size: 100%;
	border-block-start: 0;
	border-inline-start:
		var(--v-size-border-thin)
		solid
		var(--v-color-border);
}

/* ======================================================
   3. ÉPAISSEUR
   ====================================================== */

.v-divider--thin {
	border-block-start-width: var(--v-size-border-thin);
}

.v-divider--vertical.v-divider--thin {
	border-inline-start-width: var(--v-size-border-thin);
}

.v-divider--medium {
	border-block-start-width: var(--v-size-border-medium);
}

.v-divider--vertical.v-divider--medium {
	border-inline-start-width: var(--v-size-border-medium);
}

/* ======================================================
   4. ESPACEMENT
   ====================================================== */

.v-divider--flush {
	margin: 0;
}

.v-divider--spaced {
	margin-block: var(--v-space-component-md);
}

.v-divider--vertical.v-divider--spaced {
	margin-block: 0;
	margin-inline: var(--v-space-component-md);
}

/* ======================================================
   5. ÉTATS
   ====================================================== */

.v-divider.is-hidden,
.v-divider[hidden] {
	display: none;
}

/* ======================================================
   6. ACCESSIBILITÉ
   ====================================================== */

/*
 * Séparateur purement décoratif :
 *
 * <div
 *     class="v-divider"
 *     aria-hidden="true"
 * ></div>
 *
 * Séparateur sémantique :
 *
 * <hr class="v-divider">
 *
 * Lorsqu’un élément <hr> est utilisé, ne pas ajouter
 * aria-hidden="true", sauf si sa signification sémantique
 * doit volontairement être masquée.
 */

/* ======================================================
   7. FORCED COLORS
   ====================================================== */

@media (forced-colors: active) {
	.v-divider {
		border-color: CanvasText;
		forced-color-adjust: auto;
	}
}

/* ======================================================
   8. RESPONSIVE
   ====================================================== */

/*
 * Aucun comportement responsive automatique.
 *
 * L’orientation reste explicite afin d’éviter toute modification
 * imprévisible de la structure selon la largeur de l’écran.
 */

/* ======================================================
   9. REDUCED MOTION
   ====================================================== */

/*
 * Divider ne définit aucune transition ni animation.
 * Aucun traitement prefers-reduced-motion n’est nécessaire.
 */

/* ======================================================
   10. COMPATIBILITÉ WORDPRESS
   ====================================================== */

.v-root .v-divider,
.editor-styles-wrapper .v-divider {
	box-sizing: border-box;
}

/* ======================================================
   11. COMPATIBILITÉ GUTENBERG
   ====================================================== */

.wp-block .v-divider {
	max-inline-size: 100%;
}

/* ======================================================
   12. COMPATIBILITÉ SPECTRA
   ====================================================== */

.uagb-container__content .v-divider,
.uagb-infobox .v-divider {
	max-inline-size: 100%;
}

/* ======================================================
   13. PERFORMANCE ET SÉCURITÉ
   ====================================================== */

/*
 * - Aucun JavaScript.
 * - Aucune animation.
 * - Aucun filtre graphique.
 * - Aucun positionnement.
 * - Aucun z-index.
 * - Aucun contexte d’empilement.
 * - Aucune dépendance externe.
 * - Compatible CSP.
 * - Compatible RTL grâce aux propriétés logiques.
 * - Les épaisseurs utilisent exclusivement les tokens officiels.
 */