/**
 * Crafty Forms — styles publics
 * Toutes les couleurs et tailles proviennent de variables CSS injectées
 * par le rendu (voir Crafty_Forms_Renderer::inline_css).
 */

.crafty-form-wrap {
	--cf-accent: #c98b7a;
	--cf-accent-text: #ffffff;
	--cf-text: #2f2a28;
	--cf-label-weight: 600;
	--cf-field-bg: #ffffff;
	--cf-field-border: #e3d9d4;
	--cf-field-focus: var(--cf-accent);
	--cf-radius: 10px;
	--cf-field-height: 48px;
	--cf-gap: 18px;
	--cf-font-size: 16px;
	--cf-button-radius: 999px;
	--cf-error: #c0392b;
	--cf-success: #1f7a4d;
	--cf-muted: #8a807b;

	color: var(--cf-text);
	font-size: var(--cf-font-size);
	line-height: 1.5;
	box-sizing: border-box;
	width: 100%;
}

.crafty-form-wrap *,
.crafty-form-wrap *::before,
.crafty-form-wrap *::after {
	box-sizing: inherit;
}

.crafty-form-title {
	margin: 0 0 var(--cf-gap);
	font-size: calc(var(--cf-font-size) * 1.4);
	line-height: 1.25;
}

/* -------------------------------------------------------------------------
 * Grille des champs
 * ---------------------------------------------------------------------- */

.cf-fields {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cf-gap);
	margin: 0;
}

.cf-field {
	flex: 1 1 100%;
	min-width: 0;
	margin: 0;
}

.cf-w-half {
	flex: 1 1 calc(50% - (var(--cf-gap) / 2));
	max-width: calc(50% - (var(--cf-gap) / 2));
}

.cf-w-third {
	flex: 1 1 calc(33.333% - (var(--cf-gap) * 2 / 3));
	max-width: calc(33.333% - (var(--cf-gap) * 2 / 3));
}

@media (max-width: 600px) {
	.cf-w-half,
	.cf-w-third {
		flex: 1 1 100%;
		max-width: 100%;
	}
}

/* -------------------------------------------------------------------------
 * Libellés et aides
 * ---------------------------------------------------------------------- */

.cf-label {
	display: block;
	margin: 0 0 6px;
	font-weight: var(--cf-label-weight);
	font-size: calc(var(--cf-font-size) * 0.94);
	line-height: 1.35;
}

/*
 * Libellé masqué : il reste dans le flux d'accessibilité (lecteurs d'écran,
 * relation label/for, aria-labelledby) mais disparaît visuellement.
 */
.cf-label--hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	white-space: nowrap;
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
}

.cf-required {
	color: var(--cf-error);
	margin-left: 2px;
}

/*
 * Champ masqué par la logique conditionnelle. L'attribut « hidden » ne suffit
 * pas : les dispositions en grille (libellé à gauche) rétabliraient un display.
 */
.crafty-form .cf-field[hidden] {
	display: none !important;
}

.cf-desc {
	margin: 0 0 8px;
	font-size: calc(var(--cf-font-size) * 0.85);
	color: var(--cf-muted);
	line-height: 1.45;
}

.cf-desc p {
	margin: 0;
}

.cf-error {
	display: block;
	min-height: 0;
	margin-top: 5px;
	font-size: calc(var(--cf-font-size) * 0.82);
	color: var(--cf-error);
	font-weight: 500;
}

.cf-error:empty {
	display: none;
}

/* Libellés à gauche */
.crafty-form--left .cf-field:not(.cf-field--heading):not(.cf-field--html):not(.cf-field--divider) {
	display: grid;
	grid-template-columns: minmax(120px, 28%) 1fr;
	gap: 4px 14px;
	align-items: start;
}

.crafty-form--left .cf-label {
	grid-column: 1;
	padding-top: 12px;
	margin-bottom: 0;
}

.crafty-form--left .cf-control,
.crafty-form--left .cf-desc,
.crafty-form--left .cf-error {
	grid-column: 2;
}

@media (max-width: 782px) {
	.crafty-form--left .cf-field {
		display: block;
	}

	.crafty-form--left .cf-label {
		padding-top: 0;
		margin-bottom: 6px;
	}
}

/* -------------------------------------------------------------------------
 * Contrôles de saisie
 * ---------------------------------------------------------------------- */

.crafty-form .cf-input {
	width: 100%;
	min-height: var(--cf-field-height);
	/* Beaucoup de thèmes (Astra compris) posent une marge sur les champs. */
	margin: 0;
	padding: 10px 14px;
	font-size: var(--cf-font-size);
	font-family: inherit;
	line-height: 1.4;
	color: var(--cf-text);
	background: var(--cf-field-bg);
	border: 1px solid var(--cf-field-border);
	border-radius: var(--cf-radius);
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.crafty-form .cf-input:focus {
	outline: none;
	border-color: var(--cf-field-focus);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cf-field-focus) 22%, transparent);
}

/*
 * Texte indicatif. Firefox applique une opacité par défaut au placeholder :
 * on la fixe explicitement pour que les deux moteurs rendent la même chose.
 */
.crafty-form .cf-input::placeholder {
	color: var(--cf-placeholder, var(--cf-muted));
	opacity: var(--cf-placeholder-opacity, 0.75);
}

.crafty-form .cf-input::-webkit-input-placeholder {
	color: var(--cf-placeholder, var(--cf-muted));
	opacity: var(--cf-placeholder-opacity, 0.75);
}

.crafty-form .cf-input::-moz-placeholder {
	color: var(--cf-placeholder, var(--cf-muted));
	opacity: var(--cf-placeholder-opacity, 0.75);
}

/*
 * Une liste déroulante n'a pas de placeholder : c'est son option vide qui en
 * tient lieu. On lui donne la même couleur tant qu'aucun choix n'est fait,
 * pour que la ligne des champs reste homogène.
 */
.crafty-form .cf-select:has(option[value=""]:checked) {
	color: var(--cf-placeholder, var(--cf-muted));
	opacity: var(--cf-placeholder-opacity, 0.75);
}

.crafty-form .cf-select:has(option[value=""]:checked) option {
	color: var(--cf-text);
	opacity: 1;
}

.crafty-form .cf-textarea {
	min-height: 120px;
	resize: vertical;
	padding-top: 12px;
}

.crafty-form .cf-select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='%238a807b' d='M1.4 0 7 5.6 12.6 0 14 1.4 7 8.4 0 1.4z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 40px;
}

.crafty-form .cf-select[multiple] {
	background-image: none;
	padding-right: 14px;
	min-height: 120px;
}

.cf-field--error .cf-input {
	border-color: var(--cf-error);
}

.cf-field--error .cf-input:focus {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cf-error) 18%, transparent);
}

/* Sous-champs (prénom / nom) */
.cf-subfields {
	display: flex;
	gap: 10px;
}

.cf-subfield {
	flex: 1 1 50%;
	min-width: 0;
	display: block;
}

.cf-sublabel {
	display: block;
	margin-top: 4px;
	font-size: calc(var(--cf-font-size) * 0.78);
	color: var(--cf-muted);
}

/* -------------------------------------------------------------------------
 * Cases à cocher et boutons radio
 * ---------------------------------------------------------------------- */

.cf-choices {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cf-choices--inline {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px 22px;
}

.cf-choice {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
	font-size: calc(var(--cf-font-size) * 0.95);
	line-height: 1.45;
}

.cf-choice input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}

/*
 * Les cases à cocher et les boutons radio ont leurs propres variables, toutes
 * émises par Crafty_Forms_Renderer::choice_vars(). Le second argument de
 * chaque var() reproduit le comportement d'avant leur arrivée : une page déjà
 * servie par un cache, sans les nouvelles variables, rend donc à l'identique.
 */

.cf-choice__box {
	flex: 0 0 auto;
	width: var(--cf-choice-size, 20px);
	height: var(--cf-choice-size, 20px);
	margin-top: 1px;
	background-color: var(--cf-choice-bg, var(--cf-field-bg));
	border: 1px solid var(--cf-choice-border, var(--cf-field-border));
	border-radius: var(--cf-choice-radius, 5px);
	background-repeat: no-repeat;
	background-position: center;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* L'arrondi ne concerne que les cases : un radio reste toujours circulaire. */

.cf-choice input[type="radio"] + .cf-choice__box {
	border-radius: 50%;
}

.cf-choice:hover .cf-choice__box {
	border-color: var(--cf-choice-checked-border, var(--cf-accent));
}

.cf-choice input:checked + .cf-choice__box {
	background-color: var(--cf-choice-checked-bg, var(--cf-accent));
	border-color: var(--cf-choice-checked-border, var(--cf-accent));
	background-image: var(--cf-choice-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath fill='%23fff' d='M4.3 7.4 1.6 4.7.2 6.1l4.1 4.1L12 2.5 10.6 1.1z'/%3E%3C/svg%3E"));
}

/*
 * Point du radio coché : l'anneau intérieur porte une couleur EXPLICITE, et
 * non plus le fond des champs — celui-ci vaut `transparent` par défaut depuis
 * la 1.5.0, ce qui transformait le radio coché en disque plein.
 */

.cf-choice input[type="radio"]:checked + .cf-choice__box {
	background-image: none;
	box-shadow: inset 0 0 0 4px var(--cf-choice-check, #ffffff);
}

/* Vide côté réglages = `inherit`, donc la couleur de texte du formulaire. */

.cf-choice__label {
	color: var(--cf-choice-label, inherit);
}

.cf-choice input:focus-visible + .cf-choice__box {
	outline: 2px solid var(--cf-field-focus);
	outline-offset: 2px;
}

.cf-consent .cf-choice__label {
	font-size: calc(var(--cf-font-size) * 0.87);
	color: var(--cf-muted);
}

.cf-consent .cf-choice__label a {
	color: inherit;
}

/* -------------------------------------------------------------------------
 * Champ fichier
 * ---------------------------------------------------------------------- */

.cf-file__input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.cf-file__drop {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 26px 18px;
	text-align: center;
	border: 2px dashed var(--cf-field-border);
	border-radius: var(--cf-radius);
	background: var(--cf-field-bg);
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.cf-file__drop:hover,
.cf-file--over .cf-file__drop {
	border-color: var(--cf-accent);
	background: color-mix(in srgb, var(--cf-accent) 6%, var(--cf-field-bg));
}

.cf-file__icon {
	font-size: 22px;
	line-height: 1;
	color: var(--cf-accent);
}

.cf-file__text {
	font-weight: 600;
	font-size: calc(var(--cf-font-size) * 0.92);
}

.cf-file__hint {
	font-size: calc(var(--cf-font-size) * 0.78);
	color: var(--cf-muted);
}

.cf-file__input:focus-visible + .cf-file__drop {
	outline: 2px solid var(--cf-field-focus);
	outline-offset: 2px;
}

.cf-file__list {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.cf-file__item {
	padding: 8px 12px;
	background: color-mix(in srgb, var(--cf-accent) 8%, transparent);
	border-radius: calc(var(--cf-radius) - 3px);
	font-size: calc(var(--cf-font-size) * 0.85);
}

/* -------------------------------------------------------------------------
 * Mise en page
 * ---------------------------------------------------------------------- */

.cf-heading {
	margin: 6px 0 4px;
	font-size: calc(var(--cf-font-size) * 1.15);
	font-weight: 700;
}

.cf-heading__desc {
	font-size: calc(var(--cf-font-size) * 0.87);
	color: var(--cf-muted);
}

.cf-divider {
	border: 0;
	border-top: 1px solid var(--cf-field-border);
	margin: 4px 0;
}

.cf-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* -------------------------------------------------------------------------
 * Bouton d'envoi
 * ---------------------------------------------------------------------- */

.cf-submit {
	margin-top: var(--cf-gap);
	display: flex;
}

.cf-submit--center {
	justify-content: center;
}

.cf-submit--right {
	justify-content: flex-end;
}

/*
 * Bouton d'envoi.
 * Chaque variable porte un repli : une page mise en cache avant la mise à
 * jour ne contient pas encore les variables --cf-btn-*, le bouton doit
 * continuer à s'afficher comme avant.
 *
 * Ces replis restent volontairement ceux du bouton PLEIN historique
 * (fond = --cf-accent, texte = --cf-accent-text, aucune bordure), et non ceux
 * du nouveau bouton contour : sur une page en cache servie sans les variables
 * --cf-btn-*, un repli « transparent » afficherait un bouton sans fond ET sans
 * bordure, donc illisible. Le repli plein est toujours lisible.
 */
.crafty-form .cf-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: var(--cf-field-height);
	padding: var(--cf-btn-padding-y, 12px) var(--cf-btn-padding-x, 30px);
	font-family: inherit;
	font-size: var(--cf-btn-font-size, var(--cf-font-size));
	font-weight: var(--cf-btn-weight, 600);
	line-height: 1.2;
	color: var(--cf-btn-text, var(--cf-accent-text));
	background: var(--cf-btn-bg, var(--cf-accent));
	border: var(--cf-btn-border, 0);
	border-radius: var(--cf-button-radius);
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease,
		box-shadow 0.15s ease, transform 0.05s ease, opacity 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

/*
 * Survol : plus de filter: brightness(), qui écrasait toute couleur
 * personnalisée. Le fond du survol est résolu côté PHP (couleur choisie, ou
 * fond assombri automatiquement via color-mix).
 */
.crafty-form .cf-button:hover {
	color: var(--cf-btn-text-hover, var(--cf-btn-text, var(--cf-accent-text)));
	background: var(--cf-btn-bg-hover, var(--cf-btn-bg, var(--cf-accent)));
	border: var(--cf-btn-border-hover, var(--cf-btn-border, 0));
}

.crafty-form .cf-button:active {
	transform: translateY(1px);
}

/* Ombre portée douce (réglage « button_shadow ») */
.crafty-form--btn-shadow .cf-button {
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16);
}

.crafty-form--btn-shadow .cf-button:hover {
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
}

.crafty-form--btn-shadow .cf-button:active {
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
}

.crafty-form--btn-shadow .cf-button[disabled] {
	box-shadow: none;
}

/*
 * Focus et état désactivé ne dépendent d'aucune couleur de fond : l'anneau de
 * focus est tracé À L'EXTÉRIEUR du bouton (outline + offset) et l'état
 * désactivé joue sur l'opacité. Un bouton contour (fond transparent) reste
 * donc parfaitement identifiable dans les deux états.
 */
.crafty-form .cf-button:focus-visible {
	outline: 2px solid var(--cf-field-focus);
	outline-offset: 3px;
}

.crafty-form .cf-button[disabled] {
	opacity: 0.7;
	cursor: progress;
}

.crafty-form--btn-full .cf-submit,
.crafty-form--btn-full .cf-button {
	width: 100%;
}

.cf-spinner {
	display: none;
	width: 15px;
	height: 15px;
	border: 2px solid color-mix(in srgb, var(--cf-btn-text, var(--cf-accent-text)) 40%, transparent);
	border-top-color: var(--cf-btn-text, var(--cf-accent-text));
	border-radius: 50%;
	animation: cf-spin 0.7s linear infinite;
}

.cf-button--loading .cf-spinner {
	display: block;
}

@keyframes cf-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cf-spinner {
		animation-duration: 2s;
	}

	.crafty-form * {
		transition-duration: 0.01ms !important;
	}
}

/* -------------------------------------------------------------------------
 * Messages
 * ---------------------------------------------------------------------- */

.cf-message {
	margin-top: var(--cf-gap);
	padding: 0;
	border-radius: var(--cf-radius);
	font-size: calc(var(--cf-font-size) * 0.95);
}

.cf-message:empty {
	display: none;
}

.cf-message--success {
	padding: 14px 18px;
	color: var(--cf-success);
	background: color-mix(in srgb, var(--cf-success) 10%, transparent);
	border: 1px solid color-mix(in srgb, var(--cf-success) 30%, transparent);
}

.cf-message--error {
	padding: 14px 18px;
	color: var(--cf-error);
	background: color-mix(in srgb, var(--cf-error) 8%, transparent);
	border: 1px solid color-mix(in srgb, var(--cf-error) 28%, transparent);
}

.cf-message p {
	margin: 0 0 8px;
}

.cf-message p:last-child {
	margin-bottom: 0;
}

.crafty-form-notice {
	padding: 14px 18px;
	background: #f6f2f0;
	border-left: 3px solid #c98b7a;
	border-radius: 6px;
	color: #6b5f59;
}

/* -------------------------------------------------------------------------
 * Style de champ : souligné (border-bottom uniquement)
 * ---------------------------------------------------------------------- */

.crafty-form--underline .crafty-form .cf-input,
.crafty-form--underline .cf-input {
	padding-left: 0;
	padding-right: 0;
	background-color: transparent;
	background-image: none;
	border-width: 0 0 1px 0;
	border-style: solid;
	border-color: var(--cf-field-border);
	border-radius: 0;
	box-shadow: none;
}

.crafty-form--underline .cf-input:focus {
	border-bottom-color: var(--cf-field-focus);
	/* Un trait plus franc plutôt qu'un halo : cohérent avec un champ souligné. */
	box-shadow: inset 0 -1px 0 0 var(--cf-field-focus);
}

.crafty-form--underline .cf-select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='%23727b85' d='M1.4 0 7 5.6 12.6 0 14 1.4 7 8.4 0 1.4z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 2px center;
	padding-right: 26px;
}

.crafty-form--underline .cf-textarea {
	padding-top: 8px;
}

.crafty-form--underline .cf-field--error .cf-input {
	border-bottom-color: var(--cf-error);
}

.crafty-form--underline .cf-field--error .cf-input:focus {
	box-shadow: inset 0 -1px 0 0 var(--cf-error);
}

.crafty-form--underline .cf-file__drop {
	border-radius: 0;
}

/* Champ plein (variante d'appoint) */
.crafty-form--filled .cf-input {
	border-color: transparent;
	background-color: color-mix(in srgb, var(--cf-field-border) 14%, transparent);
}

.crafty-form--filled .cf-input:focus {
	border-color: var(--cf-field-focus);
}

/* -------------------------------------------------------------------------
 * Héritage du thème
 * ---------------------------------------------------------------------- */

.crafty-form--inherit-font,
.crafty-form--inherit-font .cf-input,
.crafty-form--inherit-font .cf-button,
.crafty-form--inherit-font .cf-label,
.crafty-form--inherit-font .cf-choice {
	font-family: inherit;
}

/* -------------------------------------------------------------------------
 * iOS : sous 16px, Safari zoome automatiquement à la mise au point d'un champ.
 * On impose donc un plancher de 16px sur petit écran, sans toucher au reste
 * de l'échelle typographique.
 * ---------------------------------------------------------------------- */

@media (max-width: 782px) {
	.crafty-form .cf-input,
	.crafty-form .cf-select,
	.crafty-form .cf-textarea,
	.crafty-form input[type="text"],
	.crafty-form input[type="email"],
	.crafty-form input[type="tel"],
	.crafty-form input[type="url"],
	.crafty-form input[type="number"],
	.crafty-form input[type="date"],
	.crafty-form select,
	.crafty-form textarea {
		font-size: max(16px, var(--cf-font-size));
	}
}

@supports not (font-size: max(16px, 1rem)) {
	@media (max-width: 782px) {
		.crafty-form .cf-input,
		.crafty-form select,
		.crafty-form textarea {
			font-size: 16px;
		}
	}
}

/* Repli pour les navigateurs sans color-mix() */
@supports not (color: color-mix(in srgb, red 10%, transparent)) {
	.cf-message--success {
		background: #eaf6f0;
		border-color: #bfe0ce;
	}

	.cf-message--error {
		background: #fdecea;
		border-color: #f3c3bd;
	}

	.crafty-form .cf-input:focus {
		box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
	}

	.cf-file__item {
		background: #f5f0ee;
	}

	/*
	 * Survol automatique du bouton : sans color-mix(), la variable
	 * --cf-btn-bg-hover est invalide. On revient donc au filtre de luminosité
	 * historique, appliqué au seul fond de repos.
	 */
	.crafty-form--btn-hover-auto .cf-button:hover {
		background: var(--cf-btn-bg, var(--cf-accent));
		filter: brightness(0.93);
	}

	/*
	 * Spinner sans color-mix() : la piste reste neutre, mais la portion
	 * animée suit --cf-btn-text. Un blanc en dur devenait invisible sur un
	 * bouton contour (fond transparent, texte à l'accent).
	 */
	.cf-spinner {
		border: 2px solid rgba(127, 127, 127, 0.35);
		border-top-color: var(--cf-btn-text, var(--cf-accent-text));
	}
}

/* ---------------------------------------------------------------------------
 * reCAPTCHA v3 invisible
 * ------------------------------------------------------------------------- */

/*
 * Badge masqué : Google l'autorise à condition d'afficher la mention légale,
 * ce que le rendu fait automatiquement sous le bouton d'envoi. Le badge est
 * injecté par Google en position fixe, directement sous <body> : la règle ne
 * peut donc pas être limitée au conteneur du formulaire.
 */
.grecaptcha-badge {
	visibility: hidden;
}

.cf-recaptcha-notice {
	margin: 8px 0 0;
	font-size: 0.75em;
	line-height: 1.5;
	opacity: 0.7;
}

.cf-recaptcha-notice a {
	color: inherit;
	text-decoration: underline;
}