/*
 * Formulaire de mise en relation, et fiches prestataires.
 *
 * Chargé uniquement sur les pages « à domicile ». Dépend des variables
 * déclarées par lavage.css, qui est toujours mis en file avant lui.
 */

/* ---------- bandeau plein écran ---------- */
/*
 * Il occupe le premier écran entier, avec une photo de la commune en fond.
 * Le texte est calé à gauche sur une colonne étroite : sur une photo, une
 * pleine largeur de texte devient illisible dès que le fond s'anime.
 *
 * `min-height: 100svh` et non `100vh` : sur mobile, la barre d'adresse de
 * Safari mange une centaine de pixels et le bouton passait sous la ligne de
 * flottaison au chargement.
 */
.lav-contenu .lav-hero--plein {
	position: relative;
	min-height: 100svh;
	display: flex;
	align-items: center;
	border-radius: 0;
	margin: 0 0 3rem;
	padding: 64px 0;
	overflow: hidden;
	/* Marge négative : le bandeau déborde la colonne de Divi pour occuper
	   toute la largeur de la fenêtre. `--lav-barre` est la largeur de la barre
	   de défilement, mesurée par formulaire.js : sans elle le bandeau dépasse
	   à droite et la page se dote d'une barre horizontale. */
	margin-left: calc(50% - 50vw + var(--lav-barre, 0px) / 2);
	margin-right: calc(50% - 50vw + var(--lav-barre, 0px) / 2);
	width: auto;
}
.lav-hero--photo::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--lav-photo);
	background-size: cover;
	background-position: center;
	z-index: 0;
}
/* Voile dégradé : opaque à gauche pour porter le texte, transparent à droite
   pour laisser voir la ville. */
.lav-hero--photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg,
		rgba(11, 43, 71, .95) 0%,
		rgba(11, 43, 71, .88) 38%,
		rgba(11, 43, 71, .55) 70%,
		rgba(11, 43, 71, .35) 100%);
	z-index: 1;
}
.lav-hero--plein .lav-hero__in {
	position: relative;
	z-index: 2;
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 24px;
	width: 100%;
}
.lav-hero__texte { max-width: 620px; }
.lav-contenu .lav-hero--plein h1 {
	font-size: clamp(2rem, 5vw, 3.1rem);
	line-height: 1.08;
	letter-spacing: -.02em;
	margin: 0 0 16px;
}
.lav-hero__credit {
	position: absolute;
	right: 16px;
	bottom: 12px;
	z-index: 2;
	margin: 0;
	font-size: .72rem;
	color: rgba(255, 255, 255, .6);
}
.lav-hero__credit a { color: rgba(255, 255, 255, .75); }

@media (max-width: 720px) {
	.lav-contenu .lav-hero--plein { min-height: auto; padding: 56px 0 48px; }
	.lav-hero--photo::after {
		background: linear-gradient(180deg, rgba(11, 43, 71, .92) 0%, rgba(11, 43, 71, .82) 100%);
	}
}

/* ---------- surtitre et arguments ---------- */
/*
 * Le bandeau ouvre sur la marque, comme le font les trois concurrents en
 * tête : la requête « nettoyage voiture Rouen » cherche un interlocuteur, pas
 * un catalogue. Le nom de marque en surtitre, le mot-clé dans le H1.
 */
.lav-hero__marque {
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #a8c8e4;
	margin: 0 0 10px;
}
.lav-hero__expert {
	font-size: 1.1rem;
	font-weight: 600;
	color: #fff;
	margin: 0 0 12px;
	max-width: 60ch;
}
.lav-contenu .lav-hero--plein .lav-chapo {
	font-size: 1.02rem;
	color: #cfe1f0;
}

.lav-atouts {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 14px;
	margin: 20px 0 0;
	padding: 0;
}
.lav-atouts li {
	border-left: 2px solid rgba(255, 255, 255, .35);
	padding-left: 14px;
}
.lav-atouts strong {
	display: block;
	color: #fff;
	font-size: 1.05rem;
	line-height: 1.25;
}
.lav-atouts span {
	display: block;
	color: #cfe1f0;
	font-size: .85rem;
	margin-top: 2px;
}

.lav-tarifs__apres {
	color: var(--lav-doux);
	max-width: 72ch;
	margin: 4px 0 0;
}

/* ---------- bouton flottant ---------- */
/*
 * Présent sur toute la page, sauf aux deux endroits où il n'a rien à faire :
 * dans le bandeau, où « Prendre contact » dit déjà la même chose, et devant un
 * formulaire déjà à l'écran. `formulaire.js` pose et retire `.est-la`.
 *
 * `--lav-bas` existe pour se décaler du bouton « haut de page » de Divi, qui
 * occupe le même coin quand il est activé dans les options du thème.
 */
.lav-flottant {
	position: fixed;
	right: 20px;
	bottom: var(--lav-bas, 20px);
	z-index: 9000;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 14px 20px;
	border-radius: 999px;
	background: var(--lav-marine);
	color: #fff;
	font-weight: 700;
	font-size: .95rem;
	line-height: 1;
	text-decoration: none;
	box-shadow: 0 8px 26px rgba(11, 43, 71, .35);
	/* Caché par défaut : sans JavaScript il ne clignote pas au chargement,
	   il n'apparaît simplement jamais, et les trois formulaires suffisent. */
	opacity: 0;
	visibility: hidden;
	transform: translateY(14px);
	transition: opacity .22s, transform .22s, visibility .22s;
}
.lav-flottant.est-la {
	opacity: 1;
	visibility: visible;
	transform: none;
}
.lav-flottant:hover,
.lav-flottant:focus-visible {
	color: #fff;
	background: #0c4471;
	box-shadow: 0 12px 30px rgba(11, 43, 71, .45);
}
.lav-flottant svg { flex: none; }
@media (max-width: 480px) {
	.lav-flottant { right: 14px; bottom: var(--lav-bas, 14px); padding: 13px 17px; font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
	.lav-flottant { transition: none; }
}

/* ---------- comparateur avant / après ---------- */
/*
 * Le curseur est un vrai `<input type="range">` étendu sur toute l'image et
 * rendu transparent. C'est ce qui donne gratuitement le clavier, le tactile et
 * l'étiquette lue par les lecteurs d'écran ; une poignée bricolée en JS aurait
 * fallu réécrire les trois.
 *
 * L'image « après » est en position absolue dans un volet à débordement caché.
 * `height: 100%; width: auto` la garde exactement à la taille de l'image
 * « avant » : à `width: 100%` elle se comprimerait avec le volet et la voiture
 * s'écraserait à mesure qu'on tire la poignée.
 */
/* Deux colonnes au plus : à trois, chaque comparateur tombe sous 350 px et on
   ne distingue plus ce qui a changé, ce qui lui retire tout intérêt.
   `min(100%, 420px)` et non `420px` : sinon la grille déborde sous 420 px. */
.lav-aps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	gap: 22px;
	margin-top: 20px;
}
.lav-ap { margin: 0; }
.lav-ap__cadre {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
	border: 1px solid var(--lav-trait);
	line-height: 0;
	touch-action: pan-y; /* le doigt tire la poignée, la page défile encore */
}
.lav-ap__img {
	display: block;
	width: 100%;
	height: auto;
}
.lav-ap__volet {
	position: absolute;
	inset: 0;
	width: var(--lav-x, 50%);
	overflow: hidden;
}
.lav-ap__volet .lav-ap__img {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: auto;
	max-width: none;
}
.lav-ap__poignee {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--lav-x, 50%);
	width: 2px;
	margin-left: -1px;
	background: #fff;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
	pointer-events: none;
}
/* La pastille, pour qu'on comprenne que ça se tire. */
.lav-ap__poignee::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 38px;
	height: 38px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23105891' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6 4 12l5 6M15 6l5 6-5 6'/%3E%3C/svg%3E") center / 20px no-repeat;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
}
.lav-ap__etiq {
	position: absolute;
	top: 10px;
	z-index: 2;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1;
	color: #fff;
	background: rgba(11, 43, 71, .78);
	padding: 6px 10px;
	border-radius: 6px;
}
.lav-ap__etiq--avant { left: 10px; }
.lav-ap__etiq--apres { right: 10px; }

/* Le curseur : invisible, mais c'est lui qu'on manipule. */
.lav-ap__curseur {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	z-index: 3;
}
.lav-ap__curseur::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 44px;
	height: 100vh; /* toute la hauteur du cadre : on l'attrape n'importe où */
	cursor: ew-resize;
}
.lav-ap__curseur::-moz-range-thumb {
	width: 44px;
	height: 100vh;
	border: 0;
	border-radius: 0;
	background: transparent;
	cursor: ew-resize;
}
.lav-ap__cadre:focus-within .lav-ap__poignee::after {
	box-shadow: 0 0 0 3px var(--lav-marine), 0 2px 10px rgba(0, 0, 0, .3);
}
.lav-ap__legende {
	margin: 10px 0 0;
	font-weight: 600;
	font-size: .95rem;
	line-height: 1.4;
}
.lav-ap__mention {
	margin: 20px 0 0;
	font-size: .84rem;
	color: var(--lav-doux);
	max-width: 78ch;
}

/* ---------- le formulaire du bandeau ---------- */
/*
 * Replié, il n'est qu'un bouton. Déplié, il prend la place d'un panneau blanc
 * posé sur la photo : le contraste du texte doit redevenir celui du reste du
 * site, sinon les champs deviennent illisibles sur l'image.
 */
.lav-form.lav-form--hero {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 26px 0 0;
	overflow: visible;
}
.lav-form__declencheur {
	font: 700 1.05rem/1 inherit;
	color: var(--lav-marine);
	background: #fff;
	border: 0;
	border-radius: 10px;
	padding: 17px 34px;
	cursor: pointer;
	transition: transform .12s, box-shadow .12s;
}
.lav-form__declencheur:hover,
.lav-form__declencheur:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
}
.lav-form__amorce {
	margin: 10px 0 0;
	font-size: .86rem;
	color: #cfe1f0;
}
.lav-form__panneau {
	background: var(--lav-fond);
	border-radius: 14px;
	padding: 26px 28px 28px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
	color: var(--lav-encre);
}
/* Le titre du bandeau est un <p>, pour ne pas ouvrir le plan de page sur
   « Nous contacter » : il reprend donc à la main l'allure du <h2>. */
.lav-form__tete .lav-form__titre {
	margin: 0 0 8px;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.25;
}
.lav-form--hero .lav-form__tete p:not(.lav-form__titre) { font-size: .9rem; }
.lav-form--hero .lav-form__opts { grid-template-columns: 1fr; }

/* ---------- le formulaire ---------- */
.lav-form {
	background: var(--lav-surface);
	border: 1px solid var(--lav-trait);
	border-radius: 14px;
	padding: 30px 32px 32px;
	margin: 2.6rem 0;
	overflow: hidden;
}
.lav-form__tete h2 {
	margin: 0 0 8px;
	font-size: clamp(1.25rem, 2.6vw, 1.6rem);
	line-height: 1.25;
}
.lav-form__tete p {
	margin: 0 0 22px;
	color: var(--lav-doux);
	max-width: 62ch;
	font-size: .96rem;
}

/* Avancement : une barre fine, sans chiffre, pour ne pas donner
   l'impression d'un questionnaire interminable. */
.lav-form__barre {
	height: 3px;
	background: var(--lav-trait);
	border-radius: 999px;
	overflow: hidden;
	margin-bottom: 26px;
}
.lav-form__barre i {
	display: block;
	height: 100%;
	width: 0;
	background: var(--lav-marine);
	border-radius: 999px;
	transition: width .3s ease-out;
}
@media (prefers-reduced-motion: reduce) {
	.lav-form__barre i { transition: none; }
}

.lav-form__etape {
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--lav-doux);
	margin: 0 0 10px;
}
.lav-form__q {
	font-size: clamp(1.1rem, 2.4vw, 1.35rem);
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 4px;
}
.lav-form__aide {
	color: var(--lav-doux);
	font-size: .94rem;
	margin: 0 0 18px;
}

.lav-form__opts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 10px;
}
.lav-form__opt {
	display: block;
	width: 100%;
	text-align: left;
	font: inherit;
	background: var(--lav-fond);
	color: var(--lav-encre);
	border: 1.5px solid var(--lav-trait);
	border-radius: 10px;
	padding: 14px 16px;
	cursor: pointer;
	transition: border-color .12s, background .12s, transform .12s;
}
.lav-form__opt span { display: block; font-weight: 600; }
.lav-form__opt em {
	display: block;
	font-style: normal;
	font-size: .84rem;
	color: var(--lav-doux);
	margin-top: 2px;
}
.lav-form__opt:hover,
.lav-form__opt:focus-visible {
	border-color: var(--lav-marine);
	background: var(--lav-surface);
	transform: translateY(-1px);
}
.lav-form__opt.actif {
	border-color: var(--lav-marine);
	box-shadow: inset 0 0 0 1px var(--lav-marine);
}

/* ---------- champs ---------- */
.lav-form__duo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
@media (max-width: 520px) {
	.lav-form__duo { grid-template-columns: 1fr; }
}
.lav-form__champ {
	display: block;
	margin-bottom: 14px;
	font-size: .88rem;
	font-weight: 600;
	color: var(--lav-encre);
}
.lav-form__champ span {
	font-weight: 400;
	color: var(--lav-doux);
	text-transform: none;
	letter-spacing: 0;
}
.lav-form__champ input,
.lav-form__champ textarea {
	display: block;
	width: 100%;
	margin-top: 5px;
	font: 400 16px/1.4 inherit;
	color: var(--lav-encre);
	background: var(--lav-fond);
	border: 1.5px solid var(--lav-trait);
	border-radius: 9px;
	padding: 11px 13px;
	resize: vertical;
}
.lav-form__champ input:focus,
.lav-form__champ textarea:focus {
	outline: none;
	border-color: var(--lav-marine);
	box-shadow: 0 0 0 3px rgba(16, 88, 145, .15);
}
/* Le champ manquant se signale par sa bordure, pas par un message d'alerte
   qui ferait sauter la mise en page. */
.lav-form__champ input.erreur {
	border-color: #b3402f;
	background: rgba(179, 64, 47, .05);
}

.lav-form__envoi {
	font: 600 1rem/1 inherit;
	color: #fff;
	background: var(--lav-marine);
	border: 0;
	border-radius: 9px;
	padding: 15px 28px;
	cursor: pointer;
	margin-top: 6px;
}
.lav-form__envoi:hover:not(:disabled),
.lav-form__envoi:focus-visible { background: #0c4471; }
.lav-form__envoi:disabled { opacity: .6; cursor: progress; }

.lav-form__retour {
	display: inline-block;
	margin-top: 16px;
	font: 400 .9rem/1 inherit;
	color: var(--lav-doux);
	background: none;
	border: 0;
	padding: 6px 0;
	cursor: pointer;
	text-decoration: underline;
}
.lav-form__retour:hover { color: var(--lav-encre); }

.lav-form__avis {
	margin: 12px 0 0;
	padding: 12px 14px;
	border-radius: 8px;
	background: rgba(179, 64, 47, .08);
	color: #8f3325;
	font-size: .92rem;
}
.lav-form__mention {
	margin: 18px 0 0;
	font-size: .8rem;
	color: var(--lav-doux);
	max-width: 62ch;
}
.lav-form__piege {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.lav-form__fini .lav-form__q { color: var(--lav-marine); }
.lav-form__fini p:not(.lav-form__q) { color: var(--lav-doux); max-width: 60ch; }

/* ---------- fiches prestataires ---------- */
.lav-grille--prest {
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.lav-prest {
	position: relative;
	border: 1px solid var(--lav-trait);
	border-radius: 10px;
	padding: 18px 20px 16px 46px;
	background: var(--lav-fond);
}
/* Le numéro relie la fiche à son repère sur la carte. */
.lav-prest__n {
	position: absolute;
	left: 14px;
	top: 18px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--lav-marine);
	color: #fff;
	font: 700 12px/22px system-ui, sans-serif;
	text-align: center;
}
.lav-prest__nom {
	margin: 0 0 3px;
	font-size: 1rem;
	line-height: 1.3;
}
.lav-prest__lieu {
	margin: 0 0 6px;
	font-size: .88rem;
	font-weight: 600;
	color: var(--lav-marine);
}
.lav-prest__km {
	font-weight: 400;
	color: var(--lav-doux);
}
.lav-prest__adr {
	margin: 0 0 6px;
	font-size: .86rem;
	color: var(--lav-doux);
}
.lav-prest__meta {
	margin: 0;
	font-size: .74rem;
	color: var(--lav-doux);
	font-variant-numeric: tabular-nums;
}
.lav-prest__note {
	margin: 24px 0 0;
	padding: 14px 16px;
	background: var(--lav-surface);
	border: 1px solid var(--lav-trait);
	border-radius: 9px;
	font-size: .88rem;
	color: var(--lav-doux);
	max-width: 70ch;
}

/* ---------- tarifs ---------- */
.lav-tarifs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 12px;
	margin: 18px 0;
}
.lav-tarif {
	border: 1px solid var(--lav-trait);
	border-radius: 10px;
	padding: 16px 18px;
	background: var(--lav-fond);
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.lav-tarif__nom { font-weight: 700; font-size: .98rem; }
.lav-tarif__prix {
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--lav-marine);
	font-variant-numeric: tabular-nums;
	letter-spacing: -.01em;
}
.lav-tarif__d { font-size: .84rem; color: var(--lav-doux); }

/* ---------- passerelle vers l'autre brique ---------- */