/**
 * Visiora Core — Composant : Field
 *
 * Structure commune des champs de formulaire.
 *
 * Field organise :
 * - le label ;
 * - l’indication obligatoire ou facultative ;
 * - le contrôle ;
 * - la description ;
 * - le message de validation.
 *
 * Field ne dessine pas le contrôle lui-même.
 * Input, Textarea, Select et les autres contrôles restent
 * responsables de leur propre apparence et interaction.
 *
 * Dépendances :
 * - colors.css
 * - spacing.css
 * - typography.css
 * - opacity.css
 * - animation.css
 *
 * @package Visiora_Core
 */

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

.v-field {
	display: flex;
	flex-direction: column;
	gap: var(--v-space-component-sm);
	inline-size: 100%;
	min-inline-size: 0;
	color: var(--v-color-text);
	font-family: var(--v-font-family-body);
}

/* ======================================================
   2. EN-TÊTE
   ====================================================== */

.v-field__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--v-space-component-sm);
	min-inline-size: 0;
}

/* ======================================================
   3. LABEL
   ====================================================== */

.v-field__label {
	min-inline-size: 0;
	margin: 0;
	overflow-wrap: anywhere;
	color: var(--v-color-heading);
	font-size: var(--v-text-small-size);
	font-weight: var(--v-font-weight-semibold);
	line-height: var(--v-text-small-line-height);
}

/*
 * Lorsque <label> est utilisé, son comportement natif est
 * conservé : cliquer sur le label active le contrôle associé.
 */

label.v-field__label {
	cursor: pointer;
}

/* ======================================================
   4. INDICATION OBLIGATOIRE
   ====================================================== */

.v-field__required {
	flex: 0 0 auto;
	color: var(--v-color-danger);
	font-size: var(--v-text-small-size);
	font-weight: var(--v-font-weight-semibold);
	line-height: var(--v-line-height-none);
}

/*
 * L’astérisque est uniquement une indication visuelle.
 *
 * Le contrôle réel doit également déclarer son caractère
 * obligatoire avec l’attribut HTML required ou, lorsque
 * nécessaire, aria-required="true".
 */

/* ======================================================
   5. INDICATION FACULTATIVE
   ====================================================== */

.v-field__optional {
	flex: 0 0 auto;
	color: var(--v-color-text-soft);
	font-size: var(--v-text-caption-size);
	font-weight: var(--v-text-caption-weight);
	line-height: var(--v-text-caption-line-height);
	white-space: nowrap;
}

/* ======================================================
   6. CONTRÔLE
   ====================================================== */

.v-field__control {
	display: block;
	inline-size: 100%;
	min-inline-size: 0;
}

/*
 * Field ne définit volontairement aucune propriété visuelle
 * du contrôle enfant :
 *
 * - background ;
 * - border ;
 * - border-radius ;
 * - box-shadow ;
 * - height ;
 * - padding.
 *
 * Ces responsabilités appartiennent au composant de contrôle
 * concerné : Input, Textarea, Select, etc.
 */

/* ======================================================
   7. DESCRIPTION
   ====================================================== */

.v-field__description {
	margin: 0;
	overflow-wrap: anywhere;
	color: var(--v-color-text-soft);
	font-size: var(--v-text-caption-size);
	font-weight: var(--v-text-caption-weight);
	line-height: var(--v-text-caption-line-height);
}

/* ======================================================
   8. MESSAGE D’ERREUR
   ====================================================== */

.v-field__error {
	margin: 0;
	overflow-wrap: anywhere;
	color: var(--v-color-danger-text);
	font-size: var(--v-text-caption-size);
	font-weight: var(--v-font-weight-semibold);
	line-height: var(--v-text-caption-line-height);
}

/* ======================================================
   9. MESSAGE DE SUCCÈS
   ====================================================== */

.v-field__success {
	margin: 0;
	overflow-wrap: anywhere;
	color: var(--v-color-success-text);
	font-size: var(--v-text-caption-size);
	font-weight: var(--v-font-weight-semibold);
	line-height: var(--v-text-caption-line-height);
}

/* ======================================================
   10. TAILLES
   ====================================================== */

/*
 * Les variantes de taille modifient uniquement la densité
 * structurelle du Field.
 *
 * Elles ne modifient jamais directement les dimensions
 * du contrôle enfant.
 */

.v-field--sm {
	gap: var(--v-space-component-xs);
}

.v-field--md {
	gap: var(--v-space-component-sm);
}

.v-field--lg {
	gap: var(--v-space-component-md);
}

/* ======================================================
   11. ÉTAT INVALIDE
   ====================================================== */

.v-field.is-invalid .v-field__label {
	color: var(--v-color-danger-text);
}

/*
 * L’état visuel du contrôle invalide appartient au contrôle.
 *
 * Exemple futur :
 *
 * <input
 *     class="v-input"
 *     aria-invalid="true"
 * >
 *
 * Field ne doit donc pas imposer ici une bordure rouge
 * à tous ses descendants.
 */

/* ======================================================
   12. ÉTAT VALIDE
   ====================================================== */

.v-field.is-valid .v-field__label {
	color: var(--v-color-success-text);
}

/* ======================================================
   13. ÉTAT DISABLED
   ====================================================== */

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

/*
 * pointer-events n’est volontairement pas désactivé ici.
 *
 * Le contrôle HTML réel doit porter son propre attribut
 * disabled lorsque l’interaction doit être bloquée.
 *
 * Cela évite que Field remplace incorrectement la sémantique
 * native du contrôle.
 */

/* ======================================================
   14. ÉTAT BUSY
   ====================================================== */

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

/*
 * aria-busy indique que la région est temporairement en cours
 * de mise à jour.
 *
 * Il ne rend pas automatiquement le contrôle disabled.
 */

/* ======================================================
   15. ÉTATS MASQUÉS
   ====================================================== */

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

/* ======================================================
   16. ACCESSIBILITÉ
   ====================================================== */

/*
 * Structure recommandée :
 *
 * <div class="v-field">
 *
 *     <div class="v-field__header">
 *         <label
 *             class="v-field__label"
 *             for="email"
 *         >
 *             Adresse e-mail
 *         </label>
 *
 *         <span
 *             class="v-field__required"
 *             aria-hidden="true"
 *         >
 *             *
 *         </span>
 *     </div>
 *
 *     <div class="v-field__control">
 *         <input
 *             id="email"
 *             required
 *             aria-describedby="
 *                 email-description
 *                 email-error
 *             "
 *             aria-invalid="true"
 *         >
 *     </div>
 *
 *     <p
 *         class="v-field__description"
 *         id="email-description"
 *     >
 *         Utilisez votre adresse professionnelle.
 *     </p>
 *
 *     <p
 *         class="v-field__error"
 *         id="email-error"
 *     >
 *         Saisissez une adresse e-mail valide.
 *     </p>
 *
 * </div>
 *
 * Règles :
 *
 * - le label utilise for/id lorsque possible ;
 * - required appartient au contrôle ;
 * - aria-invalid appartient au contrôle ;
 * - aria-describedby appartient au contrôle ;
 * - Field ne reçoit pas tabindex ;
 * - Field n’utilise pas role="group" par défaut ;
 * - une erreur statique n’utilise pas automatiquement
 *   role="alert" ;
 * - la couleur n’est jamais la seule indication d’état.
 */

/* ======================================================
   17. FORCED COLORS
   ====================================================== */

@media (forced-colors: active) {
	.v-field,
	.v-field__label,
	.v-field__description,
	.v-field__optional {
		color: CanvasText;
		forced-color-adjust: auto;
	}

	.v-field__required,
	.v-field__error {
		color: Mark;
		forced-color-adjust: auto;
	}

	.v-field__success {
		color: CanvasText;
		forced-color-adjust: auto;
	}

	.v-field.is-invalid .v-field__label {
		color: Mark;
	}

	.v-field.is-valid .v-field__label {
		color: CanvasText;
	}
}

/* ======================================================
   18. RESPONSIVE
   ====================================================== */

/*
 * Field utilise naturellement la largeur de son parent.
 *
 * Les textes peuvent revenir à la ligne grâce à
 * overflow-wrap: anywhere.
 *
 * Aucun breakpoint spécifique n’est nécessaire.
 */

/* ======================================================
   19. REDUCED MOTION
   ====================================================== */

/*
 * Field ne possède aucune animation ou transition propre.
 *
 * Aucun traitement prefers-reduced-motion n’est donc
 * nécessaire.
 */

/* ======================================================
   20. COMPATIBILITÉ WORDPRESS
   ====================================================== */

.v-root .v-field,
.v-root .v-field__header,
.v-root .v-field__control,
.editor-styles-wrapper .v-field,
.editor-styles-wrapper .v-field__header,
.editor-styles-wrapper .v-field__control {
	box-sizing: border-box;
}

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

/* ======================================================
   21. COMPATIBILITÉ GUTENBERG
   ====================================================== */

.wp-block .v-field {
	max-inline-size: 100%;
}

/* ======================================================
   22. COMPATIBILITÉ SPECTRA
   ====================================================== */

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

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

/*
 * - Aucun JavaScript requis.
 * - Aucun gestionnaire inline.
 * - Aucun positionnement absolu.
 * - Aucun z-index.
 * - Aucun contexte d’empilement.
 * - Aucune dépendance externe.
 * - Compatible CSP.
 * - Compatible RTL grâce aux propriétés logiques.
 * - Aucun style visuel imposé aux contrôles enfants.
 * - Les valeurs dynamiques doivent être échappées côté PHP.
 * - Les attributs id, for et aria-describedby générés
 *   dynamiquement doivent être validés et échappés.
 */