/*==============================================================
	FORMULAIRE DE CONTACT

	Mise en page inchangée : un champ par ligne, case à cocher,
	captcha, bouton centré. Seule la présentation est reprise.

	Tokens hérités de app-common.css :
	  --brand #E756C8 · --brand-ink #B8329D · --brand-tint #FBF1F7
	  --rule · --muted · --prose · --second-color

	Tous les sélecteurs sont préfixés par #contact-form : cette
	feuille est chargée en ligne, après app-common.css, et ne doit
	rien déborder sur le reste du site.
==============================================================*/

/*--------------------------------------------------------------
	CHAMPS APPARIÉS
	Prénom/Nom et Téléphone/Société partagent une ligne : six boîtes
	identiques empilées, c'était la marque la plus datée du formulaire.
	Chaque cellule garde son message d'erreur sous son propre champ.
--------------------------------------------------------------*/
#contact-form .contact-form-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

/* Sous 576px les deux champs seraient trop étroits : on rempile. */
@media (max-width: 575.98px) {
	#contact-form .contact-form-row {
		grid-template-columns: 1fr;
	}
}


/*--------------------------------------------------------------
	CHAMPS
--------------------------------------------------------------*/
#contact-form .form-control {
	border: 1px solid var(--rule);
	border-radius: 12px;
	background-color: var(--white-color);
	color: var(--second-color);
	font-size: 1rem;
	font-weight: 300;
	box-shadow: none;
	transition: border-color .25s ease, box-shadow .25s ease;
}

#contact-form .form-control:hover {
	border-color: rgba(184, 50, 157, .34);
}

/* Anneau de focus aux couleurs de la marque plutôt que le bleu Bootstrap */
#contact-form .form-control:focus {
	border-color: var(--brand);
	background-color: var(--white-color);
	box-shadow: 0 0 0 4px rgba(231, 86, 200, .16);
}


/*--------------------------------------------------------------
	ÉTIQUETTES FLOTTANTES

	Le libellé remonte et rapetisse dès que le champ est rempli :
	il reste lisible pendant la saisie, ce qu'un placeholder seul
	ne permet pas. La hauteur d'une ligne de formulaire ne change
	pas pour autant.
--------------------------------------------------------------*/
#contact-form .form-floating > .form-control {
	height: calc(3.4rem + 2px);
	padding: 1rem;
}

#contact-form .form-floating > .form-control:focus,
#contact-form .form-floating > .form-control:not(:placeholder-shown) {
	padding-top: 1.5rem;
	padding-bottom: .5rem;
}

#contact-form .form-floating > label {
	padding: 1rem;
	color: var(--muted);
	font-weight: 300;
}

#contact-form .form-floating > .form-control:focus ~ label {
	color: var(--brand-ink);
	opacity: 1;
}

/*
	Le champ message garde sa hauteur propre, l'étiquette flotte au-dessus.
	Sélecteur aligné sur celui de .form-floating ci-dessus, sinon la hauteur
	d'une ligne de saisie l'emporterait sur les 170px voulus.
*/
#contact-form .form-floating > textarea.contact-form-message {
	height: 170px;
	min-height: 170px;
	resize: vertical;
}


/*--------------------------------------------------------------
	ÉTAT INVALIDE
	Posé par contact-form.js au submit, et par Bootstrap côté serveur.
--------------------------------------------------------------*/
#contact-form .form-control.is-invalid {
	border-color: var(--red-color);
	/* Pas de pictogramme de fond : il chevaucherait l'étiquette flottante. */
	background-image: none;
	padding-right: 1rem;
}

#contact-form .form-control.is-invalid:focus {
	border-color: var(--red-color);
	box-shadow: 0 0 0 4px rgba(255, 0, 0, .12);
}

#contact-form .invalid-input {
	color: var(--red-color);
	font-size: .85rem;
}

/* form_errors() sort une <ul> : on la remet à plat. */
#contact-form .invalid-input ul {
	list-style: none;
	padding: 0;
	margin: .4rem 0 0;
}


/*--------------------------------------------------------------
	CASE À COCHER
--------------------------------------------------------------*/
#contact-form .contact-form-check {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	padding-left: 0;
	margin-bottom: 0;
}

#contact-form .contact-form-check .form-check-input {
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	margin: .2rem 0 0;
	border-color: rgba(184, 50, 157, .34);
	cursor: pointer;
}

#contact-form .contact-form-check .form-check-input:checked {
	background-color: var(--brand-ink);
	border-color: var(--brand-ink);
}

#contact-form .contact-form-check .form-check-input:focus {
	border-color: var(--brand);
	box-shadow: 0 0 0 4px rgba(231, 86, 200, .16);
}

#contact-form .contact-form-check .form-check-input.is-invalid {
	border-color: var(--red-color);
}

#contact-form .contact-form-check .form-check-label {
	font-size: .95rem;
	font-weight: 300;
	line-height: 1.5;
	color: var(--prose);
	cursor: pointer;
}

#contact-form .contact-form-check a {
	color: var(--brand-ink);
	text-underline-offset: 3px;
}


/*--------------------------------------------------------------
	CAPTCHA
	Isolé dans un encart : c'est une question, pas un champ du
	message, et le distinguer évite qu'on la saute.
--------------------------------------------------------------*/
#contact-form .contact-form-captcha {
	padding: 1.15rem 1.25rem;
	border: 1px solid var(--rule);
	border-radius: 12px;
	background-color: var(--brand-tint);
}

#contact-form .contact-form-captcha-question {
	display: flex;
	align-items: center;
	gap: .65rem;
	margin-bottom: .75rem;
	font-size: .95rem;
	font-weight: 500;
	color: var(--second-color);
	cursor: pointer;
}

#contact-form .contact-form-captcha-question i {
	font-size: 1.35rem;
	color: var(--brand);
}

#contact-form .contact-form-captcha .form-control {
	height: 3rem;
	max-width: 18rem;
	padding: 0 1rem;
}


/*--------------------------------------------------------------
	ENVOI
--------------------------------------------------------------*/
#contact-form .contact-form-actions {
	display: flex;
	justify-content: center;
}


@media (max-width: 575.98px) {
	#contact-form .contact-form-captcha .form-control {
		max-width: none;
	}
}