/**
 * Formulaire de contact (bas de la page Contact).
 *
 * Mesures relevées sur la référence : champs de 47,25px de haut cerclés
 * d'un trait d'1px à 55 % de noir, deux colonnes de 339,15px séparées de
 * 21px sur la première ligne, 21px entre chaque champ, 42px avant le
 * bouton. Le bouton reprend .baba-btn, déjà calé sur la référence.
 */

/* Classe doublée : le formulaire ferme le contenu de la page, or Astra
   annule la marge basse du dernier enfant (« .entry-content > :last-child »,
   plus spécifique qu'une classe seule). Sans cela, le bouton « Envoyer »
   vient toucher le bandeau doré du pied de page — c'est d'ailleurs ce que
   fait la référence, écart voulu ici pour que les deux ne se confondent
   plus. */
.baba-contact-form.baba-contact-form {
	margin-top: var(--baba-space-lg);
	margin-bottom: 42px;
}

.baba-contact-form__form {
	margin: 0;
}

/* Champ-piège anti-robot : hors écran plutôt que display:none, que
   certains robots savent détecter. */
.baba-contact-form__pot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.baba-contact-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 21px;
}

.baba-contact-form__field {
	position: relative;
	margin-bottom: 21px;
}

.baba-contact-form__row .baba-contact-form__field {
	margin-bottom: 21px;
}

/* Le cadre du champ est posé par-dessus, en ombre portée : la référence
   n'utilise pas de bordure (qui décalerait le texte d'un pixel selon
   l'état) mais un calque de 1px tout autour de la zone de saisie. */
.baba-contact-form__field::after {
	content: '';
	position: absolute;
	top: 1px;
	right: 1px;
	bottom: 1px;
	left: 1px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55);
	pointer-events: none;
	z-index: 1;
}

.baba-contact-form__input.baba-contact-form__input {
	display: block;
	width: 100%;
	height: 47.25px;
	margin: 1px;
	padding: 15.75px;
	background-color: var(--baba-color-bg);
	border: 0;
	border-radius: var(--baba-radius-none);
	box-shadow: none;
	font-family: var(--baba-font-body);
	font-size: var(--baba-text-base);
	line-height: 24.8px;
	letter-spacing: 0.42px;
	color: var(--baba-color-text-solid);
}

.baba-contact-form__input.baba-contact-form__input:focus {
	outline: 0;
	box-shadow: none;
}

.baba-contact-form__textarea.baba-contact-form__textarea {
	height: 105px;
	resize: vertical;
}

/* Le placeholder ne sert qu'à activer :not(:placeholder-shown) — c'est le
   <label> qui est visible à sa place, comme sur la référence. */
.baba-contact-form__input::placeholder {
	color: transparent;
}

.baba-contact-form__label {
	position: absolute;
	top: 11.5px;
	left: 22px;
	font-family: var(--baba-font-body);
	font-size: var(--baba-text-base);
	line-height: 25.2px;
	letter-spacing: var(--baba-button-letter-spacing);
	color: var(--baba-color-text);
	pointer-events: none;
	transition: top 0.1s ease, font-size 0.1s ease;
	z-index: 2;
}

/* Champ actif ou rempli : l'intitulé rapetisse et monte, la saisie
   descend pour lui laisser la place (mêmes valeurs que la référence). */
.baba-contact-form__input:focus ~ .baba-contact-form__label,
.baba-contact-form__input:not(:placeholder-shown) ~ .baba-contact-form__label {
	top: 6.25px;
	font-size: 10.5px;
	letter-spacing: 0.42px;
}

.baba-contact-form__input:focus,
.baba-contact-form__input:not(:placeholder-shown) {
	padding: 23.1px 15.75px 8.4px 21px;
}

.baba-contact-form__textarea:focus,
.baba-contact-form__textarea:not(:placeholder-shown) {
	padding-bottom: 15.75px;
}

.baba-contact-form__actions {
	margin-top: 42px;
}

/* Message de retour après envoi : pas d'équivalent mesurable sur la
   référence (Shopify affiche sa propre bannière), on reste sur les
   couleurs et la typographie du thème. */
.baba-contact-form__message {
	margin: 0 0 var(--baba-space-md);
	padding: 15.75px;
	font-family: var(--baba-font-body);
	font-size: var(--baba-text-md);
	line-height: 24.8px;
}

.baba-contact-form__message--succes {
	background-color: var(--baba-color-bg-alt);
	box-shadow: 0 0 0 1px var(--baba-color-accent);
	color: var(--baba-color-text-solid);
}

.baba-contact-form__message--erreur {
	background-color: var(--baba-color-bg-alt);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55);
	color: var(--baba-color-text-solid);
}

@media screen and (max-width: 749px) {
	.baba-contact-form__row {
		grid-template-columns: 1fr;
		column-gap: 0;
	}
}