/**
 * Formulaire de contact.
 *
 * Le vocabulaire des cartes d'atelier : papier, encre, céladon, un seul rouge
 * cinabre, et les mêmes rayons. Les champs sont des lignes d'encre sur un
 * lavis de céladon, comme une feuille réglée : arrondis en haut, la ligne
 * d'encre droite en bas.
 *
 * Un seul moment appuyé : à l'envoi, le cachet cinabre se pose sur la
 * confirmation comme un sceau (印章). Tout le reste reste calme.
 *
 * Couleurs : variables de theme.json, avec repli codé en dur pour que le
 * module tienne seul.
 */

.cdz-contact {
	--cdz-papier: var( --wp--preset--color--papier, #fbfaf7 );
	--cdz-papier-creux: var( --wp--preset--color--papier-creux, #f2efe9 );
	--cdz-encre: var( --wp--preset--color--encre, #23211e );
	--cdz-encre-doux: var( --wp--preset--color--encre-doux, #6c6660 );
	--cdz-celadon: var( --wp--preset--color--celadon, #e4ebe4 );
	--cdz-celadon-trait: var( --wp--preset--color--celadon-trait, #b9c9bc );
	--cdz-cinabre: var( --wp--preset--color--cinabre, #a6332a );
	--cdz-lavis: var( --cdz-celadon );
	--cdz-rayon: var( --wp--custom--rayon, 6px );
	--cdz-rayon-bouton: var( --wp--custom--rayon-bouton, 4px );

	position: relative;
	scroll-margin-top: calc( var( --hauteur-entete, 4.75rem ) + 1.25rem );
	color: var( --cdz-encre );
}

/* Lavis plus léger là où color-mix() existe ; sinon, le céladon plein. */
@supports ( background: color-mix( in srgb, red, blue ) ) {
	.cdz-contact {
		--cdz-lavis: color-mix( in srgb, var( --cdz-celadon ) 55%, var( --cdz-papier ) );
	}
}

/* --- Mise en page -------------------------------------------------------- */

.cdz-contact__formulaire {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	margin: 0;
}

.cdz-contact__duo {
	display: grid;
	gap: 1.25rem 1.5rem;
}

@media ( min-width: 40em ) {
	.cdz-contact__duo {
		grid-template-columns: 1fr 1fr;
	}
}

/* --- Champs -------------------------------------------------------------- */

.cdz-contact__champ {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	/* Le thème borne les paragraphes à 68 caractères ; un champ est un <p>,
	   et se serait arrêté avant le bord des champs côte à côte. */
	max-width: none;
	margin: 0;
}

.cdz-contact__champ label {
	font-size: var( --wp--preset--font-size--petit, 0.875rem );
	font-weight: 600;
	line-height: 1.3;
}

.cdz-contact__champ input,
.cdz-contact__champ textarea {
	box-sizing: border-box;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0.75rem 0.85rem;
	font: inherit;
	line-height: 1.5;
	color: var( --cdz-encre );
	background: var( --cdz-lavis );
	border: 0;
	border-bottom: 1px solid var( --cdz-encre );
	border-radius: var( --cdz-rayon ) var( --cdz-rayon ) 0 0;
	box-shadow: none;
	appearance: none;
}

.cdz-contact__champ textarea {
	min-height: 10rem;
	line-height: 1.6;
	resize: vertical;
}

.cdz-contact__champ input:focus-visible,
.cdz-contact__champ textarea:focus-visible {
	outline: 2px solid var( --cdz-cinabre );
	outline-offset: 2px;
}

/* Le remplissage automatique de Chrome impose son propre fond : on le
   recouvre du lavis, par un aplat intérieur (ce n'est pas une ombre). */
.cdz-contact__champ input:-webkit-autofill {
	-webkit-text-fill-color: var( --cdz-encre );
	box-shadow: inset 0 0 0 100rem var( --cdz-lavis );
}

/* --- Erreurs ------------------------------------------------------------- */

.cdz-contact__champ [aria-invalid="true"] {
	padding-bottom: calc( 0.75rem - 1px );
	border-bottom: 2px solid var( --cdz-cinabre );
}

.cdz-contact__erreur {
	display: flex;
	gap: 0.5rem;
	align-items: baseline;
	font-size: var( --wp--preset--font-size--petit, 0.875rem );
	line-height: 1.4;
	color: var( --cdz-cinabre );
}

/* Un petit cachet devant chaque erreur, rappel du sceau des titres. */
.cdz-contact__erreur::before {
	content: "";
	flex: none;
	width: 0.5rem;
	height: 0.5rem;
	background: currentColor;
	transform: translateY( -0.05em );
}

.cdz-contact__bilan {
	padding: 1rem 1.25rem 1.1rem;
	background: var( --cdz-papier-creux );
	border-left: 3px solid var( --cdz-cinabre );
	border-radius: 0 var( --cdz-rayon ) var( --cdz-rayon ) 0;
}

/* Le bilan reçoit le focus par programme, pas au clavier : le filet cinabre
   le signale déjà. */
.cdz-contact__bilan:focus {
	outline: none;
}

.cdz-contact__bilan-titre {
	margin: 0 0 0.4rem;
	font-family: var( --wp--preset--font-family--titre, serif );
	font-size: var( --wp--preset--font-size--moyen, 1.25rem );
	line-height: 1.3;
}

.cdz-contact__bilan ul {
	margin: 0;
	padding-left: 1.1rem;
}

.cdz-contact__bilan li + li {
	margin-top: 0.25rem;
}

.cdz-contact__bilan a,
.cdz-contact__mention a,
.cdz-contact__merci a {
	color: inherit;
	text-underline-offset: 0.2em;
}

/* --- Pied : mention et bouton -------------------------------------------- */

.cdz-contact__pied {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	align-items: center;
	justify-content: space-between;
	padding-top: 0.25rem;
}

.cdz-contact__mention {
	flex: 1 1 20rem;
	max-width: 46ch;
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var( --cdz-encre-doux );
}

/* Même bouton que « Réserver » sur les cartes. */
.cdz-contact__envoyer {
	flex: none;
	padding: 0.8rem 1.6rem;
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	color: var( --cdz-papier );
	cursor: pointer;
	background: var( --cdz-encre );
	border: 1px solid var( --cdz-encre );
	border-radius: var( --cdz-rayon-bouton );
	transition: background-color 120ms ease, color 120ms ease;
}

.cdz-contact__envoyer:hover {
	color: var( --cdz-encre );
	background: transparent;
}

.cdz-contact__envoyer:focus-visible {
	outline: 2px solid var( --cdz-cinabre );
	outline-offset: 2px;
}

@media ( max-width: 39.99em ) {
	.cdz-contact__envoyer {
		width: 100%;
	}
}

/* --- Pot de miel : hors de l'écran, sans effet sur la mise en page -------- */

.cdz-contact__piege {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	white-space: nowrap !important;
	border: 0 !important;
	clip-path: inset( 50% ) !important;
}

/* --- Confirmation -------------------------------------------------------- */

.cdz-contact__merci {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.4rem 1.25rem;
	align-items: start;
	padding-block: 1.5rem;
	border-top: 1px solid var( --cdz-celadon-trait );
	border-bottom: 1px solid var( --cdz-celadon-trait );
}

.cdz-contact__merci:focus {
	outline: none;
}

/* Le sceau : le sinogramme de la marque si le thème le fournit, sinon un
   cachet plein. Le « / "" » le masque aux lecteurs d'écran. */
.cdz-contact__merci::before {
	content: var( --cdz-marque, "" ) / "";
	display: grid;
	grid-row: 1 / span 3;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	font-family: var( --police-cjk, serif );
	font-size: 1.75rem;
	line-height: 1;
	color: var( --cdz-papier );
	background: var( --cdz-cinabre );
	border-radius: 2px;
	animation: cdz-contact-sceau 520ms cubic-bezier( 0.2, 0.9, 0.25, 1.15 ) both;
}

.cdz-contact__merci > * {
	grid-column: 2;
	margin: 0;
}

.cdz-contact__merci-titre {
	font-family: var( --wp--preset--font-family--titre, serif );
	font-size: var( --wp--preset--font-size--grand, 1.75rem );
	line-height: 1.2;
}

@keyframes cdz-contact-sceau {
	0% {
		opacity: 0;
		transform: scale( 1.6 ) rotate( -8deg );
	}

	60% {
		opacity: 1;
	}

	100% {
		opacity: 1;
		transform: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.cdz-contact__merci::before {
		animation: none;
	}

	.cdz-contact__envoyer {
		transition: none;
	}
}