/**
 * Styles du formulaire d'estimation multi-étapes.
 * Utilise les variables CSS du thème ventigo-paris (avec valeurs de repli).
 */
.vl-form-wrapper {
	--vl-navy: var(--ventigo-navy, #0B1F3A);
	--vl-navy-light: var(--ventigo-navy-light, #14315C);
	--vl-white: #FFFFFF;
	--vl-grey: var(--ventigo-grey, #F4F5F7);
	--vl-border: #E2E5EA;
	--vl-text: var(--ventigo-text, #1A1D29);
	--vl-error: #B3261E;
	--vl-radius: 10px;
	max-width: 760px;
	margin: 0 auto;
	background: var(--vl-white);
	border-radius: var(--vl-radius);
	box-shadow: 0 4px 24px rgba(11, 31, 58, 0.08);
	padding: 28px;
	font-family: inherit;
	color: var(--vl-text);
}
.vl-form-wrapper--compact { box-shadow: none; padding: 0; }

.vl-progress { margin-bottom: 28px; }
.vl-progress__bar-track { display: none; }
.vl-progress { position: relative; }
.vl-progress::before {
	content: "";
	position: absolute;
	top: 13px; left: 0; right: 0;
	height: 3px;
	background: var(--vl-border);
	z-index: 0;
}
.vl-progress__bar {
	position: absolute;
	top: 13px; left: 0;
	height: 3px;
	background: var(--vl-navy);
	width: 0%;
	transition: width .3s ease;
	z-index: 1;
}
.vl-progress__steps {
	display: flex;
	justify-content: space-between;
	list-style: none;
	margin: 0; padding: 0;
	position: relative;
	z-index: 2;
}
.vl-progress__steps li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	color: #8A8F9C;
	flex: 1;
}
.vl-progress__steps li span {
	width: 28px; height: 28px;
	border-radius: 50%;
	background: var(--vl-white);
	border: 2px solid var(--vl-border);
	display: flex; align-items: center; justify-content: center;
	font-weight: 600; font-size: 13px; color: #8A8F9C;
}
.vl-progress__steps li.is-active span { border-color: var(--vl-navy); color: var(--vl-navy); }
.vl-progress__steps li.is-done span { background: var(--vl-navy); border-color: var(--vl-navy); color: var(--vl-white); }
.vl-progress__steps li.is-active,
.vl-progress__steps li.is-done { color: var(--vl-navy); }

.vl-step { display: none; }
.vl-step.is-active { display: block; animation: vl-fade .25s ease; }
@keyframes vl-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.vl-step h2 { font-size: 20px; margin: 0 0 6px; color: var(--vl-navy); }
.vl-step-intro { font-size: 14px; color: #5B6070; margin: 0 0 20px; }

.vl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 20px; }
.vl-grid--photos { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 620px) { .vl-grid { grid-template-columns: 1fr; } }

.vl-field label,
.vl-field legend { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; padding: 0; }
.vl-required { color: var(--vl-error); }

.vl-field input[type="text"],
.vl-field input[type="tel"],
.vl-field input[type="email"],
.vl-field input[type="number"],
.vl-field input[type="date"],
.vl-field select,
.vl-field textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--vl-border);
	border-radius: 6px;
	font-size: 14px;
	background: var(--vl-white);
	color: var(--vl-text);
	box-sizing: border-box;
}
.vl-field input:focus,
.vl-field select:focus,
.vl-field textarea:focus {
	outline: 2px solid var(--vl-navy);
	outline-offset: 1px;
}

.vl-field fieldset { border: none; padding: 0; margin: 0; }
.vl-radio, .vl-checkbox {
	display: flex; align-items: center; gap: 8px;
	font-size: 14px; font-weight: 400;
	margin-bottom: 8px; cursor: pointer;
}
.vl-checkbox input, .vl-radio input { width: 16px; height: 16px; flex-shrink: 0; }

.vl-file-drop {
	border: 1px dashed var(--vl-border);
	border-radius: 6px;
	padding: 14px;
	text-align: center;
}
.vl-file-hint { display: block; font-size: 11px; color: #8A8F9C; margin-top: 6px; }

.vl-field--has-error input,
.vl-field--has-error select,
.vl-field--has-error textarea { border-color: var(--vl-error); }
.vl-field-note { grid-column: 1 / -1; margin: 0; padding: 10px 14px; border-left: 3px solid var(--vl-navy); background: var(--vl-grey); font-size: 14px; line-height: 1.5; color: var(--vl-text); }
.vl-field-note[hidden] { display: none; }
.vl-error { display: block; font-size: 12px; color: var(--vl-error); margin-top: 4px; min-height: 14px; }

.vl-consents { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--vl-border); }
.vl-consents .vl-checkbox span { font-size: 14px; line-height: 1.5; }
.vl-privacy-link { font-size: 12px; margin-top: 8px; }
.vl-notice { margin-top: 16px; font-size: 14px; line-height: 1.55; color: #3d4352; }
.vl-notice p { margin: 0 0 8px; }
.vl-notice p:last-child { margin-bottom: 0; }
.vl-notice a { color: var(--vl-navy); text-decoration: underline; }
.vl-privacy-link a { color: var(--vl-navy); }

.vl-honeypot { position: absolute; left: -9999px; top: -9999px; }

.vl-form-nav {
	display: flex;
	justify-content: space-between;
	margin-top: 28px;
	gap: 12px;
}
.vl-btn {
	appearance: none;
	border: none;
	border-radius: 6px;
	padding: 13px 24px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
	transition: opacity .15s ease;
}
.vl-btn:hover { opacity: .9; }
.vl-btn--primary { background: var(--vl-navy); color: var(--vl-white); margin-left: auto; }
.vl-btn--ghost { background: transparent; color: var(--vl-navy); border: 1px solid var(--vl-border); }
.vl-btn--whatsapp { background: #25D366; color: #fff; }
.vl-form-nav .vl-btn[hidden] { display: none; }
.vl-btn[disabled] { opacity: .6; cursor: not-allowed; }

.vl-form-result { margin-top: 20px; }
.vl-result-card { padding: 24px; border-radius: 8px; text-align: center; }
.vl-result-card--success { background: #EAF7EE; border: 1px solid #B7E4C7; }
.vl-result-card--success h2 { color: #1E7A3D; margin: 0 0 10px; font-size: 18px; }
.vl-result-card--error { background: #FBEAEA; border: 1px solid #F0BABA; color: var(--vl-error); }

.vl-whatsapp-float {
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: 56px; height: 56px;
	border-radius: 50%;
	background: #25D366;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 4px 14px rgba(0,0,0,.2);
	z-index: 999;
	text-decoration: none;
}
.vl-whatsapp-float__icon {
	width: 28px; height: 28px;
	background: #fff;
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15L2 22l5.2-1.4A10 10 0 1 0 12 2Zm0 18.2a8.2 8.2 0 0 1-4.2-1.1l-.3-.2-3.1.8.8-3-.2-.3A8.2 8.2 0 1 1 12 20.2Zm4.5-6.1c-.2-.1-1.4-.7-1.6-.8s-.4-.1-.5.1-.5.7-.7.9-.3.2-.5.1a6.7 6.7 0 0 1-2-1.2 7.4 7.4 0 0 1-1.4-1.7c-.1-.2 0-.4.1-.5s.2-.3.4-.4a1.7 1.7 0 0 0 .2-.4.4.4 0 0 0 0-.4c-.1-.1-.5-1.2-.7-1.7s-.4-.4-.5-.4h-.4a.9.9 0 0 0-.6.3 2.6 2.6 0 0 0-.8 1.9 4.5 4.5 0 0 0 1 2.4 10.2 10.2 0 0 0 4 3.6c.6.2 1 .4 1.4.5a3.3 3.3 0 0 0 1.5.1 2.5 2.5 0 0 0 1.6-1.1 1.9 1.9 0 0 0 .1-1.1c0-.1-.2-.2-.4-.3Z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15L2 22l5.2-1.4A10 10 0 1 0 12 2Zm0 18.2a8.2 8.2 0 0 1-4.2-1.1l-.3-.2-3.1.8.8-3-.2-.3A8.2 8.2 0 1 1 12 20.2Zm4.5-6.1c-.2-.1-1.4-.7-1.6-.8s-.4-.1-.5.1-.5.7-.7.9-.3.2-.5.1a6.7 6.7 0 0 1-2-1.2 7.4 7.4 0 0 1-1.4-1.7c-.1-.2 0-.4.1-.5s.2-.3.4-.4a1.7 1.7 0 0 0 .2-.4.4.4 0 0 0 0-.4c-.1-.1-.5-1.2-.7-1.7s-.4-.4-.5-.4h-.4a.9.9 0 0 0-.6.3 2.6 2.6 0 0 0-.8 1.9 4.5 4.5 0 0 0 1 2.4 10.2 10.2 0 0 0 4 3.6c.6.2 1 .4 1.4.5a3.3 3.3 0 0 0 1.5.1 2.5 2.5 0 0 0 1.6-1.1 1.9 1.9 0 0 0 .1-1.1c0-.1-.2-.2-.4-.3Z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.vl-whatsapp-inline {
	display: inline-flex; align-items: center; gap: 8px;
	background: #25D366; color: #fff; padding: 12px 20px; border-radius: 6px;
	text-decoration: none; font-weight: 600; font-size: 14px;
}

@media (max-width: 480px) {
	.vl-form-wrapper { padding: 18px; border-radius: 0; box-shadow: none; }
	.vl-progress__steps li { font-size: 0; }
	.vl-progress__steps li span { width: 24px; height: 24px; font-size: 12px; }
}