/* ===========================================================================
   VHU — Formulaire des pages villes
   Portée : le seul conteneur .vhu-form. Aucun sélecteur ne sort de ce bloc.

   Jetons repris de ce qui est DÉJÀ servi sur le site (mesuré au navigateur sur
   /epaviste-73/chambery/, 2026-08-06), et non d'une charte non déployée :
     police    Verdana, Helvetica, Arial, Lucida, sans-serif
     action    #ffce11, bord #ffce12, rayon 8px, bord 2px, texte noir, gras 700
     accent    #109ec2 (bordures et boutons secondaires du site)
     titres    noir, 700
   =========================================================================== */

.vhu-form {
	--vhu-encre:       #16181a;
	--vhu-texte:       #4a4d50;
	--vhu-trait:       #cdd2d6;
	--vhu-trait-fort:  #9aa2a8;
	--vhu-papier:      #ffffff;
	--vhu-papier-2:    #f4f5f7;
	--vhu-accent:      #109ec2;
	--vhu-accent-voile:rgba(16, 158, 194, 0.18);
	--vhu-alerte:      #b3261e;
	--vhu-alerte-voile:#fdf3f2;
	--vhu-succes:      #0f7a4a;
	--vhu-succes-voile:#f1f9f4;
	--vhu-rayon:       8px;
}

/* --- 1. Grille ---------------------------------------------------------- */

/* Grille de six colonnes, pour ranger les champs par groupe de sens :
   ligne 1, le contact sur trois colonnes (prénom, nom, téléphone) ;
   ligne 2, le véhicule par paire (marque, modèle) ;
   ligne 3, le lieu par paire (ville, département) ;
   ligne 4, les précisions sur toute la largeur. */
.vhu-form .et_pb_contact_form {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 22px 24px;
	align-items: start;
	/* Divi pose margin-left:-3% sur ce formulaire pour compenser les goutieres
	   de ses colonnes flottantes. En grille, cette compensation n'a plus d'objet :
	   elle sortait le bloc de 36 px a gauche du reste de la page (mesure le
	   16/08/2026 sur /epaviste-92/montrouge/ : rangee x=120 l=1200, formulaire
	   x=84 l=1236). Le formulaire reprend ici la largeur de son conteneur. */
	margin-left: 0;
	margin-right: 0;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.vhu-form .et_pb_contact_form .et_pb_contact_field {
	grid-column: span 2;
}

.vhu-form .et_pb_contact_field[data-id="marque"],
.vhu-form .et_pb_contact_field[data-id="modele"],
.vhu-form .et_pb_contact_field[data-id="ville"],
.vhu-form .et_pb_contact_field[data-id="departement"] {
	grid-column: span 3;
}

/* Divi positionne ses champs en flottants : on les neutralise, la grille place. */
.vhu-form .et_pb_contact_form .et_pb_contact_field {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

/* La zone de précisions, les champs cachés et le pied occupent toute la largeur. */
.vhu-form .et_pb_contact_form .et_pb_contact_field[data-type="text"],
.vhu-form .et_contact_bottom_container,
.vhu-form .vhu-form__piege {
	grid-column: 1 / -1;
}

.vhu-form .et_pb_contact_form > input[type="hidden"] {
	display: none;
}

/* --- 2. Libellés -------------------------------------------------------- */

/* Divi masque les libellés et ne laisse que le placeholder : on les rétablit. */
.vhu-form .et_pb_contact_form .et_pb_contact_form_label {
	display: block;
	margin-bottom: 8px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--vhu-encre);
	letter-spacing: 0;
}

/* Le champ obligatoire se signale, au lieu de ne se découvrir qu'à l'envoi. */
.vhu-form .et_pb_contact_field:has(.input[data-required_mark="required"]) .et_pb_contact_form_label::after {
	content: " *";
	color: var(--vhu-alerte);
	font-weight: 700;
}

/* Le placeholder répétait mot pour mot le libellé désormais visible : il doublait
   l'information et brouillait la lecture. Divi le colore avec une spécificité
   d'identifiant, d'où le !important. */
.vhu-form .et_pb_contact_form .input::placeholder,
.vhu-form .et_pb_contact_form .input::-webkit-input-placeholder {
	color: transparent !important;
	opacity: 0 !important;
}

/* --- 3. Champs ---------------------------------------------------------- */

.vhu-form .et_pb_contact_form .input,
.vhu-form .et_pb_contact_form .input[type="text"],
.vhu-form .et_pb_contact_form textarea.input {
	width: 100%;
	box-sizing: border-box;
	padding: 13px 16px;
	font-family: Verdana, Helvetica, Arial, Lucida, sans-serif;
	font-size: 17px;
	line-height: 1.45;
	color: var(--vhu-encre);
	background-color: var(--vhu-papier);
	border: 2px solid var(--vhu-trait);
	border-radius: var(--vhu-rayon);
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vhu-form .et_pb_contact_form textarea.input {
	min-height: 132px;
	resize: vertical;
}

.vhu-form .et_pb_contact_form .input:hover {
	border-color: var(--vhu-trait-fort);
}

/* État de focus visible : il n'en existait aucun. */
.vhu-form .et_pb_contact_form .input:focus {
	outline: none;
	border-color: var(--vhu-accent);
	box-shadow: 0 0 0 3px var(--vhu-accent-voile);
}

/* Champ requis laissé vide APRÈS une tentative d'envoi (classe posée par Divi). */
.vhu-form .et_pb_contact_form .input.et_contact_error {
	border-color: var(--vhu-alerte);
	background-color: var(--vhu-alerte-voile);
}

/* --- 3 bis. Champ signalé par le contrôle de saisie ---------------------- */

.vhu-form .vhu-form__champ--fautif .input {
	border-color: var(--vhu-alerte);
	background-color: var(--vhu-alerte-voile);
}

/* Un champ fautif reste rouge même sous le curseur : le focus ne doit pas effacer
   le signal d'erreur. */
.vhu-form .vhu-form__champ--fautif .input:focus {
	border-color: var(--vhu-alerte);
	box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.16);
}

.vhu-form .vhu-form__champ--fautif .et_pb_contact_form_label {
	color: var(--vhu-alerte);
}

/* Le message dit lequel et pourquoi, sous le champ concerné — pas en tête de page. */
.vhu-form .vhu-form__message-champ {
	display: flex;
	gap: 7px;
	margin: 7px 0 0;
	padding: 0;
	font-size: 14px;
	line-height: 1.45;
	font-weight: 700;
	color: var(--vhu-alerte);
}

.vhu-form .vhu-form__message-champ::before {
	content: "!";
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	margin-top: 2px;
	border-radius: 50%;
	background-color: var(--vhu-alerte);
	color: #fff;
	font-size: 12px;
	line-height: 17px;
	text-align: center;
}

.vhu-form .vhu-form__securite .vhu-form__message-champ {
	margin-top: 10px;
}

/* --- 4. Pied du formulaire : sécurité + envoi --------------------------- */

.vhu-form .et_contact_bottom_container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	margin: 0;
	padding-top: 8px;
	border-top: 1px solid var(--vhu-trait);
	float: none;
}

.vhu-form .vhu-form__securite {
	flex: 1 1 320px;
	min-width: 0;
	/* Divi aligne à droite le contenu du pied de formulaire, avec un sélecteur
	   d'identifiant : sans !important, le widget de sécurité partait se coller
	   au bouton, à l'autre bout de la ligne. */
	text-align: left !important;
}

.vhu-form .cf-turnstile {
	margin-bottom: 10px;
}

.vhu-form .vhu-form__mention {
	margin: 0;
	max-width: 62ch;
	font-size: 14px;
	line-height: 1.5;
	color: var(--vhu-texte);
}

.vhu-form .et_pb_contact_submit {
	flex: 0 0 auto;
	/* Divi pose une marge gauche de 18 px qui désalignait le bouton des champs. */
	margin: 0;
	min-height: 52px;
	padding: 14px 34px;
	cursor: pointer;
}

.vhu-form .et_pb_contact_submit:focus-visible {
	outline: 3px solid var(--vhu-accent);
	outline-offset: 3px;
}

/* Le captcha mathématique de Divi est désactivé côté PHP ; garde-fou si un
   cache servait encore l'ancien balisage. */
.vhu-form .et_pb_contact_right {
	display: none;
}

/* --- 5. Pot de miel ----------------------------------------------------- */

/* Hors de l'écran plutôt que display:none : reste soumis, invisible et hors
   parcours clavier, mais toujours rempli par un robot qui remplit tout. */
.vhu-form .vhu-form__piege {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- 6. Messages -------------------------------------------------------- */

.vhu-form .et-pb-contact-message {
	margin-bottom: 20px;
}

.vhu-form .et-pb-contact-message:empty {
	display: none;
	margin: 0;
}

.vhu-form .vhu-form__erreur,
.vhu-form .et-pb-contact-message > p.et_pb_contact_error_text {
	margin: 0 0 12px;
	padding: 14px 18px;
	background-color: var(--vhu-alerte-voile);
	border: 1px solid var(--vhu-alerte);
	border-left-width: 5px;
	border-radius: var(--vhu-rayon);
	color: var(--vhu-encre);
	font-size: 16px;
	line-height: 1.5;
}

.vhu-form .vhu-form__erreur p {
	margin: 0;
	padding: 0;
	font-size: 16px;
	line-height: 1.5;
	color: var(--vhu-encre);
}

/* Le message de succès de Divi arrive seul dans le conteneur. */
.vhu-form .et-pb-contact-message > p:not(.et_pb_contact_error_text) {
	margin: 0;
	padding: 16px 18px 16px 20px;
	background-color: var(--vhu-succes-voile);
	border: 1px solid var(--vhu-succes);
	border-left-width: 5px;
	border-radius: var(--vhu-rayon);
	color: var(--vhu-encre);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.5;
}

/* --- 7. Mobile ---------------------------------------------------------- */

/* Palier intermédiaire : trois champs par ligne deviennent illisibles sous 1100 px,
   on passe à deux partout. */
@media (max-width: 1100px) and (min-width: 781px) {
	.vhu-form .et_pb_contact_form .et_pb_contact_field,
	.vhu-form .et_pb_contact_field[data-id="marque"],
	.vhu-form .et_pb_contact_field[data-id="modele"],
	.vhu-form .et_pb_contact_field[data-id="ville"],
	.vhu-form .et_pb_contact_field[data-id="departement"] {
		grid-column: span 3;
	}
}

@media (max-width: 780px) {
	.vhu-form .et_pb_contact_form .et_pb_contact_field,
	.vhu-form .et_pb_contact_field[data-id="marque"],
	.vhu-form .et_pb_contact_field[data-id="modele"],
	.vhu-form .et_pb_contact_field[data-id="ville"],
	.vhu-form .et_pb_contact_field[data-id="departement"] {
		grid-column: span 6;
	}

	.vhu-form .et_pb_contact_form {
		gap: 18px;
	}

	.vhu-form .et_contact_bottom_container {
		align-items: stretch;
		justify-content: flex-start;
	}

	.vhu-form .et_pb_contact_submit {
		width: 100%;
		min-height: 56px;
		text-align: center;
	}

	/* 16px minimum : en dessous, iOS zoome tout seul à la mise au point. */
	.vhu-form .et_pb_contact_form .input {
		font-size: 16px;
	}
}

/* --- 9. La page Contact -------------------------------------------------- *
   Ajoutee le 16/08/2026. Ce formulaire n'a pas les memes champs que ceux des
   pages ville et departement : il n'y a ni marque ni modele, mais un e-mail et
   un message. Sans regle propre, il heritait de la grille des gabarits et se
   rangeait de travers — telephone et departement sur une ligne, ville seule sur
   la suivante.

   Trois lignes franches, sur les six colonnes :
       nom | prenom | email
       telephone | departement | ville
       message
   -------------------------------------------------------------------------- */

.page-id-71747 .vhu-form .et_pb_contact_field[data-id="name"],
.page-id-71747 .vhu-form .et_pb_contact_field[data-id="surname"],
.page-id-71747 .vhu-form .et_pb_contact_field[data-id="email"],
.page-id-71747 .vhu-form .et_pb_contact_field[data-id="phone"],
.page-id-71747 .vhu-form .et_pb_contact_field[data-id="departement"],
.page-id-71747 .vhu-form .et_pb_contact_field[data-id="ville"] {
	grid-column: span 2;
}

.page-id-71747 .vhu-form .et_pb_contact_field[data-id="message"] {
	grid-column: 1 / -1;
}

/* Le champ technique reste hors de la grille : il ne doit pas creuser de trou. */
.page-id-71747 .vhu-form .et_pb_contact_field[data-id="type"] {
	display: none;
}

/* --- 10. Sur telephone, le formulaire passe devant le texte --------------- *
   La page Contact range son texte de presentation a gauche et le formulaire a
   droite. Empilees sur telephone, ces deux colonnes obligeaient le visiteur a
   faire defiler toute la presentation avant d'atteindre le premier champ.
   L'ordre est inverse en dessous de 980 px : on vient sur cette page pour
   ecrire, pas pour lire.
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
	.page-id-71747 .et_pb_row:has(.vhu-form) {
		display: flex;
		flex-direction: column;
	}

	.page-id-71747 .et_pb_row:has(.vhu-form) > .et_pb_column:has(.vhu-form) {
		order: 1;
	}

	.page-id-71747 .et_pb_row:has(.vhu-form) > .et_pb_column:not(:has(.vhu-form)) {
		order: 2;
	}
}

/* --- 11. La page Contact sur petit ecran ---------------------------------- *
   Les regles de la section 9 sont plus specifiques que la regle mobile
   generale (section 5) : sans ce bloc, les six champs restaient sur deux
   lignes de trois, soit 92 px de large a 390 px d'ecran. Un champ par ligne.
   -------------------------------------------------------------------------- */

@media (max-width: 780px) {
	.page-id-71747 .vhu-form .et_pb_contact_field[data-id="name"],
	.page-id-71747 .vhu-form .et_pb_contact_field[data-id="surname"],
	.page-id-71747 .vhu-form .et_pb_contact_field[data-id="email"],
	.page-id-71747 .vhu-form .et_pb_contact_field[data-id="phone"],
	.page-id-71747 .vhu-form .et_pb_contact_field[data-id="departement"],
	.page-id-71747 .vhu-form .et_pb_contact_field[data-id="ville"] {
		grid-column: 1 / -1;
	}
}

/* --- 12. Le formulaire de la page d'accueil ------------------------------ *
   Deux lignes de deux champs, puis le message (Akim, 16/08/2026) :
       nom | prenom
       adresse e-mail | telephone
       message
   Sans cette regle, les quatre champs heritaient du `span 2` general et se
   rangeaient trois par ligne, le telephone tombant seul a la ligne suivante.
   -------------------------------------------------------------------------- */

.home .vhu-form .et_pb_contact_field[data-id="name"],
.home .vhu-form .et_pb_contact_field[data-id="prenom"],
.home .vhu-form .et_pb_contact_field[data-id="email"],
.home .vhu-form .et_pb_contact_field[data-id="telephone"] {
	grid-column: span 3;
}

.home .vhu-form .et_pb_contact_field[data-id="message"] {
	grid-column: 1 / -1;
}

@media (max-width: 780px) {
	.home .vhu-form .et_pb_contact_field[data-id="name"],
	.home .vhu-form .et_pb_contact_field[data-id="prenom"],
	.home .vhu-form .et_pb_contact_field[data-id="email"],
	.home .vhu-form .et_pb_contact_field[data-id="telephone"] {
		grid-column: 1 / -1;
	}
}