/* ==========================================================================
   CAP JS Front-End Integration Stylesheet
   ========================================================================== */

a4i-capjs-container {
	display: block;
	margin: 1.5em 0;
	clear: both;
}

/*
   Masquage parfait et accessible de l'input de validation HTML5.
   Il reste actif pour les validateurs de formulaires natifs du navigateur,
   mais n'interfère aucunement avec le design.
*/
a4i-capjs-container .cap-token-input {
	position: absolute !important;
	opacity: 0 !important;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	z-index: -1 !important;
	pointer-events: none !important;
}

/*
   Style optionnel du composant pour lui donner un effet de micro-animation
   premium lors du survol de la souris.
*/
a4i-capjs-container cap-widget {
	display: inline-block;
	max-width: 100%;
	transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

a4i-capjs-container cap-widget:hover {
	transform: translateY(-1px);
}

/*
   Effet de vibration et bordure rouge lorsque la validation échoue.
   Gère la validation HTML5 (.cap-error) et la validation serveur CF7 (.wpcf7-not-valid-tip).
*/
a4i-capjs-container.cap-error cap-widget,
a4i-capjs-container:has(.wpcf7-not-valid-tip) cap-widget {
	--cap-border-color: rgba(229, 62, 62, 0.8) !important;
	animation: capjs-shake 0.4s ease-in-out;
}

/* Affiche correctement le message d'erreur sous le composant */
a4i-capjs-container .wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.25em;
}

@keyframes capjs-shake {

	0%,
	100% {
		transform: translateX(0);
	}

	25% {
		transform: translateX(-4px);
	}

	75% {
		transform: translateX(4px);
	}
}

/* Cache le texte pour les voyants, mais le garde lisible pour les lecteurs d'écran */
.capjs-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}