/* ==========================================================================
   Contact : formulaire « lettre ».
   Panneau sable arrondi, titre fantôme blanc qui mord dessus (comme les fiches œuvres),
   phrase en FreightBig italique dont les champs sont des soulignés, message sur papier ligné,
   coordonnées et tampon à droite. À l'envoi, le tampon se pose sur le formulaire.
   ========================================================================== */

.contact {
	padding-top: var(--hero-pad-top);
	padding-bottom: var(--contact-marge-bas); /* espace avant le bandeau store, comme sur les autres pages */
}

.contact__panneau {
	border-radius: var(--radius-panel);
	background: var(--c-sand);
	padding-block: var(--contact-pad-top) var(--contact-pad-bas);
}

.contact__inner {
	row-gap: var(--contact-ecart);
}

.contact__titre {
	grid-column: 1 / -1;
	margin-left: var(--hero-titre-decalage);
	color: var(--c-white);
}

.contact__zone {
	grid-column: 1 / 9;
}

.contact__infos {
	grid-column: 10 / -1;
	align-self: start;
}

/* ---------- La phrase ---------- */
.contact__phrase {
	font-family: var(--ff-serif);
	font-style: italic;
	font-weight: var(--fw-medium);
	font-size: var(--fs-accroche);
	line-height: var(--lh-phrase);
}

.contact__salutation {
	display: block;
}

.contact__champ {
	white-space: nowrap;
}

/* Champ dans le fil du texte : un simple souligné, qui s'épaissit en bleu au focus. */
.contact__input {
	width: auto;
	min-width: var(--contact-champ-min);
	max-width: 100%;
	padding: 0 var(--space-3xs);
	border: 0;
	border-radius: 0;
	background:
		linear-gradient(var(--c-blue), var(--c-blue)) left bottom / 0 var(--contact-trait-focus) no-repeat,
		linear-gradient(var(--c-line), var(--c-line)) left bottom / 100% var(--line-width) no-repeat;
	color: var(--c-black);
	font: inherit;
	transition: background-size var(--t-hover);
	field-sizing: content; /* S'adapte au texte saisi (sinon : largeur calculée par contact.js). */

	&::placeholder {
		color: var(--c-placeholder);
		opacity: 1;
	}

	&:focus {
		outline: none;
		background-size: 100% var(--contact-trait-focus), 100% var(--line-width);
	}

	&[aria-invalid="true"] {
		background-image:
			linear-gradient(var(--c-erreur), var(--c-erreur)),
			linear-gradient(var(--c-erreur), var(--c-erreur));
	}
}

/* ---------- Le message : papier ligné ---------- */
.contact__message {
	margin-top: var(--contact-ecart);
}

.contact__message-label {
	display: block;
	font-family: var(--ff-serif);
	font-style: italic;
	font-weight: var(--fw-medium);
	font-size: var(--fs-accroche);
	line-height: var(--lh-phrase);
}

.contact__textarea {
	display: block;
	width: 100%;
	min-height: calc(3lh + var(--space-3xs));
	padding: 0;
	border: 0;
	resize: none;
	overflow: hidden;
	background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(1lh - var(--line-width)), var(--c-trait-doux) calc(1lh - var(--line-width)), var(--c-trait-doux) 1lh);
	color: var(--c-black);
	font-family: var(--ff-serif);
	font-style: italic;
	font-weight: var(--fw-medium);
	font-size: var(--fs-contact-message);
	line-height: var(--lh-contact-message);
	field-sizing: content;

	&::placeholder {
		color: var(--c-placeholder);
		opacity: 1;
	}

	&:focus {
		outline: none;
		background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(1lh - var(--line-width)), var(--c-blue) calc(1lh - var(--line-width)), var(--c-blue) 1lh);
	}

	&[aria-invalid="true"] {
		background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(1lh - var(--line-width)), var(--c-erreur) calc(1lh - var(--line-width)), var(--c-erreur) 1lh);
	}
}

/* ---------- Erreurs, pied, statut ---------- */
.contact__erreurs {
	margin-top: var(--space-s);
	color: var(--c-erreur);
	font-size: var(--fs-cta);
	line-height: var(--lh-legende);

	& li + li {
		margin-top: var(--space-3xs);
	}
}

.contact__pied {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-l);
	margin-top: var(--contact-ecart);
}

.contact__mention {
	max-width: var(--contact-mention-w);
	font-size: var(--fs-legende);
	line-height: var(--lh-legende);
	color: var(--c-grey);
}

.contact__bouton {
	flex: none;
	font-size: var(--fs-cta);

	&:disabled {
		cursor: wait;
		opacity: 0.5;
	}
}

.contact__statut:not(:empty) {
	margin-top: var(--space-s);
	color: var(--c-erreur);
	font-size: var(--fs-cta);
}

/* Champ piège : hors de l'écran (pas display:none, que certains robots détectent). */
.contact__piege {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- Confirmation ---------- */
.contact__succes {
	outline: none;
}

.contact__succes-titre {
	font-weight: var(--fw-bold);
	font-size: var(--fs-display);
	line-height: var(--lh-display);
	letter-spacing: var(--ls-display);
}

.contact__succes-texte {
	margin-top: var(--space-m);
	font-family: var(--ff-serif);
	font-style: italic;
	font-weight: var(--fw-medium);
	font-size: var(--fs-accroche);
	line-height: var(--lh-accroche);
}

.contact--envoye .contact__succes {
	animation: contact-succes var(--t-apparition) var(--courbe-apparition) both;
}

@keyframes contact-succes {
	from {
		opacity: 0;
		translate: 0 var(--apparition-decalage);
	}
}

/* ---------- Coordonnées ---------- */
.contact__coordonnee + .contact__coordonnee {
	margin-top: var(--space-m);
}

.contact__coordonnees dt {
	font-weight: var(--fw-medium);
	font-size: var(--fs-legende);
	line-height: var(--lh-legende);
	text-transform: uppercase;
	color: var(--c-grey);
}

.contact__coordonnees dd {
	margin: var(--space-3xs) 0 0;

	& a {
		display: inline-block;
		padding-block: var(--space-3xs); /* zone de clic d'au moins 24 px de haut */
		background: linear-gradient(currentColor, currentColor) left bottom / 0 var(--line-width) no-repeat;
		transition: background-size var(--t-hover);

		&:hover {
			background-size: 100% var(--line-width);
		}
	}
}

/* ---------- Tampon : droit au repos ; une copie se pose sur la confirmation à l'envoi ---------- */
.contact__tampon {
	width: var(--hero-tampon-w);
	height: auto;
	margin-top: var(--contact-ecart);
}

/* Le tampon d'origine « quitte » la colonne quand il est posé sur la confirmation. */
.contact--tamponne .contact__tampon {
	opacity: 0;
	transition: opacity var(--t-hover);
}

/* Copie du tampon posée sur la confirmation (créée par contact.js), à droite du texte. */
.contact__tampon-pose {
	position: absolute;
	top: 50%;
	right: 0;
	translate: 0 -50%;
	z-index: var(--z-base);
	width: var(--contact-tampon-pose-w);
	height: auto;
	pointer-events: none;
	animation: contact-tampon var(--t-tampon) var(--courbe-tampon) both;
}

@keyframes contact-tampon {
	0% {
		opacity: 0;
		scale: var(--tampon-depart-echelle);
		rotate: var(--tampon-depart-rotation);
	}

	60% {
		opacity: 1;
		scale: var(--tampon-rebond);
	}

	100% {
		opacity: 1;
		scale: 1;
		rotate: 0deg;
	}
}

.contact__zone {
	position: relative;
}

/* ---------- Tablette et mobile ---------- */
@media (max-width: 1023.98px) {
	.contact__zone,
	.contact__infos {
		grid-column: 1 / -1;
	}

	.contact__infos {
		display: flex;
		flex-wrap: wrap; /* sur les écrans étroits, le tampon passe sous les coordonnées */
		align-items: flex-end;
		justify-content: space-between;
		gap: var(--space-l);
	}

	.contact__tampon {
		flex: none;
		width: var(--contact-tampon-mobile);
		margin-top: 0;
	}
}

@media (max-width: 767.98px) {
	.contact {
		padding-bottom: var(--space-xl);
	}

	.contact__panneau {
		padding-block: var(--space-l) var(--space-xl);
	}

	.contact__titre {
		margin-left: 0;
	}

	.contact__phrase,
	.contact__message-label,
	.contact__succes-texte {
		font-size: var(--hero-mobile-accroche);
	}

	/* Chaque champ sur sa propre ligne, pleine largeur, suivi de sa ponctuation. */
	.contact__champ {
		display: flex;
		align-items: baseline;
	}

	.contact__input {
		flex: 1;
		min-width: 0;
	}

	.contact__pied {
		flex-direction: column-reverse;
		align-items: flex-start;
	}
}