.eaf-form {
	--eaf-primary-color: #1a7efb;
	--eaf-text-color: #1a1a1a;
	--eaf-border-radius: 6px;
	max-width: 640px;
}

.eaf-fields {
	display: flex;
	flex-wrap: wrap;
	gap: 18px 20px;
}

.eaf-field {
	width: 100%;
	color: var( --eaf-text-color );
}
/* Deux champs "demi-largeur" consécutifs se posent côte à côte (réglage "Style"
   > "Largeur du champ" de chaque bloc) - jamais forcé, purement additif : un
   champ sans ce réglage garde sa pleine largeur comme avant. */
.eaf-field-w50 {
	width: calc( 50% - 10px );
}

.eaf-label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
	/* Onglet "Style" du champ (voir class-eaf-fields.php field_style_vars()) : sans
	   réglage, ces variables sont absentes et le libellé garde le style hérité du
	   formulaire (couleur/police) exactement comme avant l'ajout de cet onglet. */
	color: var( --eaf-field-label-color, inherit );
	font-family: var( --eaf-field-font-family, inherit );
	font-size: var( --eaf-field-font-size, inherit );
}

.eaf-required {
	color: #b32d2e;
}

.eaf-help {
	font-size: var( --eaf-field-help-size, 13px );
	opacity: .75;
	margin: 4px 0 0;
	color: var( --eaf-field-help-color, inherit );
	font-family: var( --eaf-field-font-family, inherit );
}

.eaf-form input[type="text"],
.eaf-form input[type="email"],
.eaf-form input[type="tel"],
.eaf-form input[type="password"],
.eaf-form textarea,
.eaf-form select {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid var( --eaf-field-input-border, #ccc );
	border-radius: var( --eaf-border-radius );
	background: var( --eaf-field-input-bg, #fff );
	color: var( --eaf-field-input-color, inherit );
	font-size: var( --eaf-field-font-size, 15px );
	font-family: var( --eaf-field-font-family, inherit );
}

.eaf-form input:focus,
.eaf-form textarea:focus,
.eaf-form select:focus {
	outline: none;
	border-color: var( --eaf-primary-color );
	box-shadow: 0 0 0 2px color-mix( in srgb, var( --eaf-primary-color ) 25%, transparent );
}

.eaf-name-group {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.eaf-name-group input {
	flex: 1;
	min-width: 140px;
}

.eaf-address-group,
.eaf-city-group {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.eaf-address-group input,
.eaf-city-group input {
	flex: 1;
	min-width: 140px;
}
.eaf-address-num {
	flex: 0 0 100px;
	min-width: 70px;
}
.eaf-address-rue {
	flex-basis: 60%;
}
.eaf-address-complement {
	flex-basis: 100%;
}
.eaf-city-cp {
	flex: 0 0 140px;
}
.eaf-city-ville {
	flex-basis: 60%;
}

.eaf-choice-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.eaf-choice {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-weight: 400;
	cursor: pointer;
	font-family: var( --eaf-field-font-family, inherit );
	font-size: var( --eaf-field-font-size, inherit );
	color: var( --eaf-field-choice-text-color, inherit );
}
.eaf-choice input {
	margin-top: 3px;
	accent-color: var( --eaf-field-choice-color, var( --eaf-primary-color ) );
}

.eaf-gdpr {
	font-size: 13px;
}

.eaf-heading {
	margin-bottom: 18px;
	color: var( --eaf-field-label-color, inherit );
	font-family: var( --eaf-field-font-family, inherit );
	font-size: var( --eaf-field-font-size, inherit );
}

.eaf-hp-wrap {
	position: absolute;
	left: -9999px;
	top: -9999px;
}

.eaf-field.has-error input,
.eaf-field.has-error textarea,
.eaf-field.has-error select {
	border-color: #b32d2e;
}
.eaf-field-error {
	color: #b32d2e;
	font-size: 13px;
	margin: 4px 0 0;
}

.eaf-submit-wrap {
	width: 100%;
}

.eaf-submit-btn {
	background: var( --eaf-primary-color );
	color: #fff;
	border: none;
	border-radius: var( --eaf-border-radius );
	padding: 12px 28px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: opacity .15s ease;
}
.eaf-submit-btn:hover {
	opacity: .9;
}
.eaf-submit-btn:disabled {
	opacity: .6;
	cursor: default;
}

.eaf-message:empty {
	display: none;
}
.eaf-message,
.eaf-notice {
	margin-top: 14px;
	padding: 12px 16px;
	border-radius: var( --eaf-border-radius, 6px );
}
.eaf-notice-success {
	background: #edf7ed;
	color: #1e4620;
}
.eaf-notice-error {
	background: #fdeded;
	color: #5f2120;
}

/* Confirmation "Message pop-up puis redirection" (voir assets/frontend.js showPopupThenRedirect()).
   Ajoutée comme enfant du <form> (pas document.body) pour hériter --eaf-primary-color/--eaf-text-color/
   --eaf-border-radius, définies en style inline sur le <form> lui-même (voir EAF_Fields::style_vars()). */
.eaf-popup-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba( 0, 0, 0, 0.55 );
}
.eaf-popup-box {
	max-width: 420px;
	width: 90%;
	background: #fff;
	/* Couleur fixe (pas var(--eaf-text-color)) : cette fenêtre a toujours un fond
	   blanc, quelle que soit la couleur de texte choisie pour le formulaire
	   lui-même (ex. blanc, pour un formulaire posé sur un fond sombre) — hériter
	   cette variable rendait le texte illisible (blanc sur blanc). */
	color: #1a1a1a;
	border-radius: var( --eaf-border-radius, 6px );
	padding: 28px;
	text-align: center;
	box-shadow: 0 15px 45px rgba( 0, 0, 0, 0.25 );
	animation: eaf-popup-in 0.2s ease;
}
.eaf-popup-message {
	margin: 0 0 20px;
	font-size: 16px;
	line-height: 1.5;
}
.eaf-popup-continue {
	padding: 10px 24px;
	background: var( --eaf-primary-color, #1a7efb );
	color: #fff;
	border: none;
	border-radius: var( --eaf-border-radius, 6px );
	cursor: pointer;
	font-weight: 600;
}
.eaf-popup-continue:hover {
	opacity: 0.9;
}
@keyframes eaf-popup-in {
	from { opacity: 0; transform: scale( 0.96 ); }
	to { opacity: 1; transform: scale( 1 ); }
}

.eaf-forgot-toggle {
	margin-top: 10px;
	font-size: 14px;
}

.eaf-form-forgot,
.eaf-form-reset {
	margin-top: 16px;
}
