.myfw-zones {
	--myfw-zones-accent: var(--color-accent, #b05a38);
	--myfw-zones-gap: 14px;

	--myfw-zones-card-bg: #fffdf9;
	--myfw-zones-card-border: #e5e0d6;
	--myfw-zones-card-bw: 1px;
	--myfw-zones-card-radius: 22px;
	--myfw-zones-card-pad: 22px 28px;
	--myfw-zones-active-border: var(--myfw-zones-accent);
	--myfw-zones-active-bw: 3px;
	--myfw-zones-active-bg: var(--myfw-zones-card-bg);

	--myfw-zones-bubble: 48px;
	--myfw-zones-bubble-bw: 3px;
	--myfw-zones-title-color: var(--color-text, #1f1f1f);
	--myfw-zones-subtitle-color: var(--color-secondary, #5b5b5b);
	--myfw-zones-price-color: #3f4a35;

	--myfw-zones-info-mt: 32px;
	--myfw-zones-info-title-color: var(--color-text, #1f1f1f);
	--myfw-zones-info-text-color: var(--color-secondary, #5b5b5b);
	--myfw-zones-info-strong-color: var(--color-text, #1f1f1f);

	--myfw-zones-panel-mt: 32px;
	--myfw-zones-panel-bg: #e9e1d0;
	--myfw-zones-panel-border: #d9cfb8;
	--myfw-zones-panel-bw: 1px;
	--myfw-zones-panel-radius: 24px;
	--myfw-zones-panel-pad: 32px;
	--myfw-zones-panel-title-color: var(--color-text, #1f1f1f);
	--myfw-zones-icon-color: var(--color-text, #1f1f1f);
	--myfw-zones-icon-size: 28px;

	--myfw-zones-field-h: 52px;
	--myfw-zones-input-color: #1f1f1f;
	--myfw-zones-input-placeholder: #8a8a8a;
	--myfw-zones-input-bg: #ffffff;
	--myfw-zones-input-border: #b9b09b;
	--myfw-zones-input-border-focus: var(--myfw-zones-accent);
	--myfw-zones-input-bw: 2px;
	--myfw-zones-input-radius: 18px;

	--myfw-zones-btn-color: #ffffff;
	--myfw-zones-btn-bg: var(--myfw-zones-accent);
	--myfw-zones-btn-border: var(--myfw-zones-btn-bg);
	--myfw-zones-btn-color-hover: var(--myfw-zones-btn-color);
	--myfw-zones-btn-bg-hover: color-mix( in srgb, var(--myfw-zones-btn-bg) 85%, #000 );
	--myfw-zones-btn-radius: 999px;
	--myfw-zones-btn-pad: 0 28px;

	--myfw-zones-cta-color: #ffffff;
	--myfw-zones-cta-bg: var(--myfw-zones-accent);
	--myfw-zones-cta-border: var(--myfw-zones-cta-bg);
	--myfw-zones-cta-color-hover: var(--myfw-zones-cta-color);
	--myfw-zones-cta-bg-hover: color-mix( in srgb, var(--myfw-zones-cta-bg) 85%, #000 );
	--myfw-zones-cta-radius: 999px;
	--myfw-zones-cta-pad: 16px 28px;

	--myfw-zones-result-found: #3f4a35;
	--myfw-zones-result-fallback: #7b5e3e;
	--myfw-zones-result-notfound: #9b2c2c;
	--myfw-zones-hint-color: var(--color-secondary, #6b6b6b);

	width: 100%;
}

/* ---- Cartes de zones ---- */
.myfw-zones__cards {
	display: flex;
	flex-direction: column;
	gap: var(--myfw-zones-gap);
}
.myfw-zones__card {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: var(--myfw-zones-card-pad);
	background-color: var(--myfw-zones-card-bg);
	border: var(--myfw-zones-card-bw) solid var(--myfw-zones-card-border);
	border-radius: var(--myfw-zones-card-radius);
	box-sizing: border-box;
	transition: border-color 0.2s ease, outline-color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}
.myfw-zones__card.is-active {
	background-color: var(--myfw-zones-active-bg);
	border-color: var(--myfw-zones-active-border);
	/* Le contour s'épaissit vers l'extérieur : aucun décalage de mise en page. */
	outline: max( 0px, calc( var(--myfw-zones-active-bw) - var(--myfw-zones-card-bw) ) ) solid var(--myfw-zones-active-border);
}

.myfw-zones__bubble {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--myfw-zones-bubble);
	height: var(--myfw-zones-bubble);
	border-radius: 50%;
	border: var(--myfw-zones-bubble-bw) solid rgba( 0, 0, 0, 0.18 );
	background-color: var(--myfw-zones-accent);
	color: #ffffff;
	font-family: var(--font-heading, inherit);
	font-size: calc( var(--myfw-zones-bubble) * 0.42 );
	font-weight: 700;
	line-height: 1;
	box-sizing: border-box;
}
.myfw-zones__body {
	flex: 1 1 auto;
	min-width: 0;
}
.myfw-zones__title {
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--myfw-zones-title-color);
}
.myfw-zones__subtitle {
	margin-top: 0.35em;
	font-size: 1rem;
	color: var(--myfw-zones-subtitle-color);
}
.myfw-zones__price {
	flex: 0 0 auto;
	margin-left: auto;
	font-family: var(--font-heading, inherit);
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.1;
	text-align: right;
	color: var(--myfw-zones-price-color);
}

/* ---- Texte d'information ---- */
.myfw-zones__info {
	margin-top: var(--myfw-zones-info-mt);
}
.myfw-zones__info-title {
	margin: 0 0 0.5em;
	font-family: var(--font-heading, inherit);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--myfw-zones-info-title-color);
}
.myfw-zones__info-text {
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--myfw-zones-info-text-color);
}
.myfw-zones__info-text p {
	margin: 0 0 0.6em;
}
.myfw-zones__info-text p:last-child {
	margin-bottom: 0;
}
.myfw-zones__info-text strong,
.myfw-zones__info-text b {
	color: var(--myfw-zones-info-strong-color);
}

/* ---- Vérificateur ---- */
.myfw-zones__panel {
	margin-top: var(--myfw-zones-panel-mt);
	padding: var(--myfw-zones-panel-pad);
	background-color: var(--myfw-zones-panel-bg);
	border: var(--myfw-zones-panel-bw) solid var(--myfw-zones-panel-border);
	border-radius: var(--myfw-zones-panel-radius);
	box-sizing: border-box;
}
.myfw-zones__panel-title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 18px;
	font-family: var(--font-heading, inherit);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--myfw-zones-panel-title-color);
}
.myfw-zones__icon {
	flex: 0 0 auto;
	width: var(--myfw-zones-icon-size);
	height: var(--myfw-zones-icon-size);
	color: var(--myfw-zones-icon-color);
}
.myfw-zones__form {
	display: flex;
	gap: 12px;
	align-items: stretch;
	margin: 0;
}
.myfw-zones__input {
	flex: 1 1 auto;
	min-width: 0;
	height: var(--myfw-zones-field-h);
	margin: 0;
	padding: 0 20px;
	box-sizing: border-box;
	font-family: inherit;
	font-size: 1.15rem;
	color: var(--myfw-zones-input-color);
	background-color: var(--myfw-zones-input-bg);
	border: var(--myfw-zones-input-bw) solid var(--myfw-zones-input-border);
	border-radius: var(--myfw-zones-input-radius);
	box-shadow: none;
	outline: none;
	transition: border-color 0.15s ease;
}
.myfw-zones__input::placeholder {
	color: var(--myfw-zones-input-placeholder);
	opacity: 1;
}
.myfw-zones__input:focus {
	border-color: var(--myfw-zones-input-border-focus);
}

/* Le bouton est un <button> : beaucoup de thèmes imposent leur style de
   bouton en !important. On le reprend ici (variables réglables dans
   Elementor). Les propriétés typographiques restent en sélecteur simple
   pour que les réglages de typographie d'Elementor passent. */
.myfw-zones__btn {
	font-family: inherit;
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}
.myfw-zones .myfw-zones__btn {
	flex: 0 0 auto;
	height: var(--myfw-zones-field-h);
	margin: 0;
	padding: var(--myfw-zones-btn-pad) !important;
	color: var(--myfw-zones-btn-color) !important;
	background: var(--myfw-zones-btn-bg) !important;
	border: 2px solid var(--myfw-zones-btn-border) !important;
	border-radius: var(--myfw-zones-btn-radius) !important;
	box-shadow: none;
	box-sizing: border-box;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.myfw-zones .myfw-zones__btn:hover,
.myfw-zones .myfw-zones__btn:focus-visible {
	color: var(--myfw-zones-btn-color-hover) !important;
	background: var(--myfw-zones-btn-bg-hover) !important;
}

.myfw-zones__result {
	margin-top: 16px;
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1.5;
	color: var(--myfw-zones-result-found);
}
.myfw-zones__result:empty {
	display: none;
}
.myfw-zones.is-fallback .myfw-zones__result {
	color: var(--myfw-zones-result-fallback);
}
.myfw-zones.is-notfound .myfw-zones__result,
.myfw-zones.is-empty .myfw-zones__result {
	color: var(--myfw-zones-result-notfound);
}
.myfw-zones__hint {
	margin-top: 6px;
	font-size: 0.95rem;
	color: var(--myfw-zones-hint-color);
}
.myfw-zones__hint:empty {
	display: none;
}

.myfw-zones__cta {
	display: none;
	width: fit-content;
	margin-top: 16px;
	text-decoration: none;
	font-family: inherit;
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.2;
}
.myfw-zones.has-result .myfw-zones__cta,
.myfw-zones.cta-always .myfw-zones__cta {
	display: inline-block;
}
.myfw-zones .myfw-zones__cta,
.myfw-zones .myfw-zones__cta:visited {
	padding: var(--myfw-zones-cta-pad);
	color: var(--myfw-zones-cta-color);
	background: var(--myfw-zones-cta-bg);
	border: 2px solid var(--myfw-zones-cta-border);
	border-radius: var(--myfw-zones-cta-radius);
	box-sizing: border-box;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.myfw-zones .myfw-zones__cta:hover,
.myfw-zones .myfw-zones__cta:focus-visible {
	color: var(--myfw-zones-cta-color-hover);
	background: var(--myfw-zones-cta-bg-hover);
}

@media ( max-width: 600px ) {
	.myfw-zones__card {
		gap: 14px;
	}
	.myfw-zones__title {
		font-size: 1.1rem;
	}
	.myfw-zones__price {
		font-size: 1.5rem;
	}
	.myfw-zones__form {
		flex-direction: column;
	}
	.myfw-zones .myfw-zones__btn {
		width: 100%;
	}
}
@media ( prefers-reduced-motion: reduce ) {
	.myfw-zones__card,
	.myfw-zones__input,
	.myfw-zones .myfw-zones__btn,
	.myfw-zones .myfw-zones__cta {
		transition: none;
	}
}