/*
 * Formulaires WPForms aux couleurs du thème.
 *
 * Chargée seulement sur les pages qui affichent un formulaire (et dans l'éditeur, pour l'aperçu).
 * WPForms règle son apparence par des variables CSS : on les redéfinit ici pour tous les
 * formulaires du site, au lieu de passer par les réglages de style de chaque bloc. Tant que ces
 * réglages restent aux valeurs par défaut, c'est cette feuille qui décide.
 */

.wpforms-container {
	--wpforms-field-border-radius: 0.5rem;
	--wpforms-field-border-color: rgb(0 0 0 / 25%);
	--wpforms-field-background-color: var(--wp--preset--color--base);
	--wpforms-field-text-color: var(--wp--preset--color--secondary);
	--wpforms-field-menu-color: var(--wp--preset--color--base);
	--wpforms-label-color: var(--wp--preset--color--secondary);
	--wpforms-label-sublabel-color: rgb(0 0 0 / 62%);
	--wpforms-label-error-color: #b3261e;
	--wpforms-button-border-radius: 999px;
	--wpforms-button-background-color: var(--wp--preset--color--secondary);
	--wpforms-button-border-color: var(--wp--preset--color--secondary);
	--wpforms-button-text-color: var(--wp--preset--color--base);
	--wpforms-page-break-color: var(--wp--preset--color--secondary);

	font-family: var(--wp--preset--font-family--body);
}

/*
 * Champs en deux colonnes (classe wpforms-one-half dans le constructeur) : côte à côte sur un
 * écran large, l'un sous l'autre sur téléphone, où chaque moitié serait trop étroite.
 */
@media (max-width: 599px) {
	.wpforms-container .wpforms-field.wpforms-one-half {
		float: none;
		width: 100%;
		margin-left: 0;
	}
}

/* Libellés : la police du texte, un peu plus appuyée. L'étoile des champs obligatoires en terracotta. */
.wpforms-container .wpforms-field-label {
	font-weight: 600;
}

.wpforms-container .wpforms-required-label {
	color: var(--wp--preset--color--accent);
}

.wpforms-container .wpforms-field-description {
	margin-top: 0.35rem;
}

/*
 * Choix (Votre demande concerne…, Pour quelle activité ?) : chaque choix devient une petite
 * carte cliquable, bordée comme les champs. Le choix coché prend une bordure vert forêt.
 */
.wpforms-container .wpforms-field-radio ul,
.wpforms-container .wpforms-field-checkbox ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.wpforms-container .wpforms-field-radio li,
.wpforms-container .wpforms-field-checkbox li {
	display: flex !important;
	align-items: center;
	margin: 0 !important;
	padding: 0.6rem 1rem !important;
	border-radius: var(--wpforms-field-border-radius);
	box-shadow: inset 0 0 0 1px var(--wpforms-field-border-color);
	transition: box-shadow 0.2s ease;
}

.wpforms-container .wpforms-field-radio li:has(input:checked),
.wpforms-container .wpforms-field-checkbox li:has(input:checked) {
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--secondary);
}

.wpforms-container .wpforms-field-radio li label,
.wpforms-container .wpforms-field-checkbox li label {
	cursor: pointer;
}

/* Bouton d'envoi : celui de theme.json (forêt, olive au survol), et non le bleu de WPForms. */
.wpforms-container .wpforms-submit-container {
	margin-top: var(--wp--preset--spacing--40);
}

.wpforms-container.wpforms-container-full button.wpforms-submit {
	height: auto;
	padding: 0.9rem 2rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.02em;
	transition: background-color 0.3s ease;
}

.wpforms-container.wpforms-container-full button.wpforms-submit:hover,
.wpforms-container.wpforms-container-full button.wpforms-submit:active {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
}

.wpforms-container.wpforms-container-full button.wpforms-submit:focus-visible {
	outline: 2px solid var(--wp--preset--color--secondary);
	outline-offset: 2px;
}

/* Mention sur les données personnelles, sous le message. */
.wpforms-container .formulaire__mention {
	margin: 0;
	color: var(--wpforms-label-sublabel-color);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

.wpforms-container .formulaire__mention a {
	color: inherit;
}

/*
 * Message de remerciement, à la place du formulaire une fois envoyé. Mêmes sélecteurs que
 * WPForms (son fond vert pâle) : imprimée après la sienne, notre règle l'emporte.
 */
div.wpforms-container-full .wpforms-confirmation-container-full,
div[submit-success] > .wpforms-confirmation-container-full:not(.wpforms-redirection-message) {
	padding: var(--wp--preset--spacing--50);
	border: 0;
	border-radius: 0.75rem;
	background: var(--wp--preset--color--base);
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--secondary);
}

.wpforms-confirmation-container-full p:last-child {
	margin-bottom: 0;
}

/*
 * Calendrier du champ Date (flatpickr). Il s'ouvre en dehors du formulaire, au bout de la page :
 * d'où des sélecteurs qui ne passent pas par .wpforms-container.
 */
.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.selected:hover,
.flatpickr-calendar .flatpickr-day.selected:focus {
	border-color: var(--wp--preset--color--secondary);
	background: var(--wp--preset--color--secondary);
}

.flatpickr-calendar .flatpickr-day.today {
	border-color: var(--wp--preset--color--accent);
}

@media (prefers-reduced-motion: reduce) {
	.wpforms-container .wpforms-field-radio li,
	.wpforms-container .wpforms-field-checkbox li,
	.wpforms-container.wpforms-container-full button.wpforms-submit {
		transition: none;
	}
}