/* --------------------------------------------------------------------------
   [soform_contact] — formulaire de préinscription.

   Les champs reprennent le dessin des combos de la barre de filtres : libellé
   en capitales au-dessus, valeur sur un filet, chevron maison. Pas de boîtes
   grises — le formulaire doit se lire comme le reste du site, pas comme un
   greffon.

   Les valeurs sont des jetons Blocksy : changer la palette dans le Customizer
   restyle le formulaire comme le reste.
   -------------------------------------------------------------------------- */

/* La zone porte la section : pleine largeur imposée (le shortcode atterrit
   dans le flux contraint de WordPress, qui le recentrerait), fond crème et
   respiration verticale. La carte blanche vit dedans, dans le conteneur du
   thème. */
.soform-demande-zone.soform-demande-zone {
	/* Pas de `z-index` ici, volontairement : la zone ne doit PAS créer de
	   contexte d'empilement, sinon la carte reste prisonnière de son étage. Son
	   fond crème passe donc sous les nuages de la section suivante, qui
	   débordent de 330 px vers le haut — c'est ce qu'on veut, ils se fondent
	   dans le fond comme partout ailleurs. */
	position: relative;
	/* Même raison que sur le rail : l'écart de bloc du thème laissait 24 px de
	   fond de page NU entre la section précédente et celle-ci — donc une bande
	   sans grain, mesurée à 241,0 contre 236 de part et d'autre. */
	margin-block: 0;
	width: 100vw;
	max-width: 100vw;
	margin-right: calc(50% - 50vw);
	margin-left: calc(50% - 50vw);
	padding: clamp(64px, 7vw, 100px) 0;
	background-color: var(--theme-palette-color-8, #f6f0ea);
}

/* Étage 4, celui du contenu de hero et de CTA (voir la règle globale du
   thème) : au-dessus des nuages (2) et du calque de grain plein cadre (3) de
   la section suivante, qui remontaient tous deux sur le bas de la carte et
   marbraient le bouton d'envoi. */
.soform-demande {
	position: relative;
	z-index: 4;
	--soform-encre: var(--theme-palette-color-1, #17120f);
	--soform-accent: var(--theme-palette-color-2, #6b5a4c);
	--soform-texte: var(--theme-palette-color-3, #3d342e);
	--soform-texte-2: var(--theme-palette-color-4, #8c7f74);
	--soform-page: var(--theme-palette-color-8, #f6f0ea);
	--soform-carte: #ffffff;
	--soform-filet: rgba(23, 18, 15, 0.16);
	--soform-alerte: #9a3412;

	padding: clamp(32px, 4vw, 48px);
	border-radius: 16px;
	background-color: var(--soform-carte);
	box-shadow: 0 18px 44px rgba(23, 18, 15, 0.1);
	text-align: left;
}

.soform-demande__entete {
	margin-bottom: clamp(28px, 3vw, 40px);
}

.soform-demande__entete h2 {
	margin: 0;
	font-size: clamp(24px, 2.4vw, 32px);
	line-height: 1.18;
}

.soform-demande__entete p {
	margin: 14px 0 0;
	max-width: 56ch;
	font-size: var(--soform-corps, 16px);
	line-height: 1.62;
	color: var(--soform-texte);
}

/* Grille ----------------------------------------------------------------- */

.soform-demande__grille {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px 32px;
}

.soform-champ--large {
	grid-column: 1 / -1;
}

/* Alerte globale --------------------------------------------------------- */

.soform-demande__alerte {
	margin: 0 0 28px;
	padding: 14px 18px;
	border-left: 2px solid var(--soform-alerte);
	background-color: rgba(154, 52, 18, 0.06);
	font-size: 15px;
	line-height: 1.55;
	color: var(--soform-alerte);
}

/* Consentement ----------------------------------------------------------- */

.soform-consentement {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 4px 14px;
	margin: 28px 0 0;
}

.soform-consentement input {
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: var(--soform-encre);
	cursor: pointer;
}

.soform-consentement label {
	font-size: 13px;
	line-height: 1.55;
	color: var(--soform-texte-2);
	cursor: pointer;
}

.soform-consentement a {
	color: var(--soform-texte);
	text-underline-offset: 3px;
}

.soform-consentement .soform-champ__erreur {
	grid-column: 2;
}

/* Le champ appât doit être invisible à l'écran SANS `display: none` ni
   `hidden` : les robots ignorent souvent ce qui est franchement masqué. */
.soform-appat {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Pied ------------------------------------------------------------------- */

.soform-demande__pied {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
	margin-top: 32px;
	padding-top: 28px;
	border-top: 1px solid var(--soform-filet);
}

.soform-demande__submit {
	flex: 0 0 auto;
	min-width: 200px;
	min-height: 56px;
	margin: 0;
	padding: 0 32px;
	border: 0;
	border-radius: 999px;
	background-color: var(--soform-encre);
	color: var(--soform-page);
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 0.6px;
	cursor: pointer;
	transition: background-color 0.25s ease, transform 0.25s ease;
}

.soform-demande__submit:hover,
.soform-demande__submit:focus-visible {
	background-color: var(--soform-accent);
	color: var(--soform-page);
}

.soform-demande__submit:active {
	transform: translateY(1px);
}

.soform-demande__note {
	flex: 1 1 240px;
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--soform-texte-2);
}

/* Accusé de réception ---------------------------------------------------- */

.soform-demande__recu h2 {
	margin: 12px 0 0;
	font-size: clamp(24px, 2.4vw, 32px);
	line-height: 1.18;
}

.soform-demande__recu > p {
	margin: 16px 0 0;
	max-width: 56ch;
	font-size: 17px;
	line-height: 1.62;
	color: var(--soform-texte);
}

.soform-demande__recu .soform-demande__note {
	margin-top: 20px;
}

.soform-demande-zone:focus {
	outline: 0;
}

/* Adaptatif -------------------------------------------------------------- */

@media (max-width: 689.98px) {
	.soform-demande {
		padding: 28px 22px 32px;
	}

	.soform-demande__grille {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.soform-demande__submit {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.soform-champ input,
	.soform-champ textarea,
	.soform-champ select,
	.soform-demande__submit {
		transition: none;
	}

	.soform-demande__submit:active {
		transform: none;
	}
}