/* WEB PREMIERE - Formulaire de qualification des prospects (webp-leads)
   Couleurs de la charte (variables surchargeables par le thème) */
.webp-leads {
	--wl-accent: #1c77b5;
	--wl-texte: #000;
	--wl-gris: #656565;
	--wl-filet: #d9d9d9;
	--wl-fond-choix: #f5f8fb;
	font-size: 16px;
	color: var(--wl-texte);
	text-align: left;
}
.webp-leads [hidden] {
	display: none !important;
}
.webp-leads .wl-progression {
	margin: 0 0 6px;
	font-size: 13px;
	color: var(--wl-gris);
}
.webp-leads .wl-barre {
	height: 4px;
	background: var(--wl-filet);
	border-radius: 2px;
	margin-bottom: 22px;
	overflow: hidden;
}
.webp-leads .wl-barre span {
	display: block;
	height: 100%;
	width: 25%;
	background: var(--wl-accent);
	transition: width .3s;
}
.webp-leads fieldset {
	border: 0;
	padding: 0;
	margin: 0;
	min-width: 0;
}
.webp-leads legend {
	font-family: Raleway, sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.3;
	margin: 0 0 16px;
	padding: 0;
	float: none;
	width: auto;
}
.webp-leads .wl-choix-liste {
	display: grid;
	gap: 10px;
}
.webp-leads .wl-choix {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 14px 16px;
	border: 2px solid var(--wl-filet);
	border-radius: 2px;
	background: var(--wl-fond-choix);
	cursor: pointer;
	font-weight: 600;
	transition: border-color .2s, background .2s;
}
.webp-leads .wl-choix:hover {
	border-color: var(--wl-accent);
}
.webp-leads .wl-choix input {
	accent-color: var(--wl-accent);
	width: 18px;
	height: 18px;
	margin: 0;
	flex: 0 0 auto;
}
.webp-leads .wl-choix:has(input:checked) {
	border-color: var(--wl-accent);
	background: #fff;
}
.webp-leads .wl-grille {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 18px;
}
@media (max-width: 575px) {
	.webp-leads .wl-grille {
		grid-template-columns: 1fr;
	}
}
.webp-leads .wl-champ {
	display: block;
	margin: 0 0 16px;
}
.webp-leads .wl-champ span {
	display: block;
	font-weight: 600;
	font-size: 15px;
	margin-bottom: 4px;
}
.webp-leads .wl-champ em {
	font-weight: 400;
	font-style: normal;
	color: var(--wl-gris);
}
.webp-leads .wl-champ input,
.webp-leads .wl-champ textarea {
	width: 100%;
	border: none;
	border-bottom: 2px solid var(--wl-accent);
	border-radius: 0;
	background: none;
	padding: 6px 0;
	font-size: 16px; /* 16px : pas de zoom automatique sur iPhone */
	font-family: inherit;
}
.webp-leads .wl-champ input:focus,
.webp-leads .wl-champ textarea:focus {
	outline: 0;
	border-bottom-color: var(--wl-texte);
}
.webp-leads .wl-aide {
	margin: 12px 0 0;
	font-size: 14px;
	color: var(--wl-gris);
}
.webp-leads .wl-consentement {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 14px;
	color: var(--wl-gris);
	margin: 4px 0 14px;
	cursor: pointer;
}
.webp-leads .wl-consentement input {
	accent-color: var(--wl-accent);
	margin-top: 3px;
	flex: 0 0 auto;
}
.webp-leads .wl-piege {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.webp-leads .wl-erreur {
	color: #b3261e;
	font-weight: 600;
	margin: 14px 0 0;
}
.webp-leads .wl-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-top: 22px;
}
.webp-leads .wl-suivant,
.webp-leads .wl-envoyer {
	margin-left: auto;
	background: var(--wl-accent);
	color: #fff;
	border: 2px solid var(--wl-accent);
	border-radius: 2px;
	padding: 13px 24px;
	font-weight: 700;
	font-size: 16px;
	cursor: pointer;
	transition: background .2s, color .2s;
}
.webp-leads .wl-suivant:hover,
.webp-leads .wl-envoyer:hover {
	background: #fff;
	color: var(--wl-accent);
}
.webp-leads .wl-envoyer:disabled {
	opacity: .6;
	cursor: wait;
}
.webp-leads .wl-precedent {
	background: none;
	border: none;
	color: var(--wl-gris);
	text-decoration: underline;
	cursor: pointer;
	padding: 8px 0;
	font-size: 15px;
}
@media (max-width: 575px) {
	.webp-leads .wl-suivant,
	.webp-leads .wl-envoyer {
		flex: 1;
	}
}
.webp-leads .wl-merci {
	padding: 10px 0;
	outline: none;
}
.webp-leads .wl-merci-titre {
	font-family: Raleway, sans-serif;
	font-weight: 700;
	font-size: 22px;
	margin: 0 0 8px;
}
.webp-leads .wl-merci p {
	margin: 0 0 10px;
}
.webp-leads .wl-merci-rdv a {
	font-weight: 700;
	color: var(--wl-accent);
}

/* Questions conditionnelles (création sans boutique, budget, délai) : une partie masquée ne s'affiche jamais */
.webp-leads [hidden] {
	display: none !important;
}
.webp-leads .wl-groupe + .wl-groupe {
	margin-top: 24px;
}
.webp-leads .wl-groupe-titre {
	font-family: Raleway, sans-serif;
	font-weight: 700;
	font-size: 16px;
	margin: 0 0 10px;
}