/* Formulaire de contact — champs 388×50 en deux colonnes, message 825×253,
   rangée basse à 30 sous le message (maquette node 518:1573). */

.contact-form__grid {
	display: grid;
	grid-template-columns: repeat(2, 46.97337%); /* 388 sur 826 */
	column-gap: 6.05327%;                         /* 50 */
	row-gap: clamp(0.75rem, 1.09954vw, 1.1875rem); /* 19 : 559 − 539 */
}

.contact-form__row--full {
	grid-column: 1 / -1;
}

/* Le libellé du message a un interligne de 34 dans la maquette (node 329:6194)
   et le champ suit 3 px plus bas. */
.contact-form__row--full .contact-form__label {
	line-height: 1.7;
	margin-bottom: 3px;
}

.contact-form__label {
	display: block;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--c-ink);
	opacity: var(--o-text);
}

.contact-form__field {
	display: block;
	width: 100%;
	min-height: 50px;
	padding: 0 16px;
	background: var(--c-field);
	border: var(--rule) solid var(--c-ink);
	border-radius: 0;
	color: var(--c-ink);
	font-family: var(--ff-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.contact-form__field:focus {
	outline: none;
	border-color: var(--c-accent);
	box-shadow: 0 0 0 1px var(--c-accent);
}

.contact-form__field--message {
	/* Hauteur imposée : l'attribut rows ne sert que si la feuille ne charge pas. */
	height: clamp(10rem, 14.63542vw, 15.8125rem); /* 253 */
	min-height: clamp(10rem, 14.63542vw, 15.8125rem);
	padding: 16px;
	resize: vertical;
}

/* La maquette pose le texte indicatif du message à 15 px. */
.contact-form__field--message::placeholder {
	font-size: 0.9375rem;
	line-height: 1.33333;
	color: var(--c-ink);
	opacity: 1;
}

/* Rangée basse — 3 colonnes de la maquette sur les 826 du formulaire :
   pièce jointe 0→341, RGPD 341→660, envoi collé à droite. */
.contact-form__actions {
	display: grid;
	grid-template-columns: 41.28329% 38.62%  20.09685%;
	align-items: start;
	margin-top: clamp(1.25rem, 1.73611vw, 1.875rem); /* 30 : 979 − 949 */
}

/* Pièce jointe : l'input natif reste focusable mais invisible — son bouton et
   son libellé ne sont ni traduisibles ni stylables de façon fiable selon les
   navigateurs (« Choose File » en anglais, libellé tronqué). */
.contact-form__file {
	display: flex;
	align-items: center;
	gap: 15px; /* 605 − 590 */
}

.contact-form__file-input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Bouton 138×35, libellé DIN Pro 12 centré (node 329:6202). */
.contact-form__file-button {
	flex: none;
	display: grid;
	place-items: center;
	width: 138px;
	height: 35px;
	border: var(--rule) solid var(--c-ink);
	color: var(--c-ink);
	font-size: var(--fs-micro);
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--t-fast), color var(--t-fast);
}

.contact-form__file-button:hover,
.contact-form__file-input:focus-visible + .contact-form__file-button {
	background: var(--c-ink);
	color: var(--c-light);
}

.contact-form__file-input:focus-visible + .contact-form__file-button {
	outline: 2px solid var(--c-accent);
	outline-offset: 3px;
}

.contact-form__file-name {
	font-size: var(--fs-micro);
	line-height: 1.25;
	color: var(--c-error);
	overflow-wrap: anywhere;
}

/* Un fichier valide est choisi : le nom n'est plus une alerte. */
.contact-form__file-name--set {
	color: var(--c-ink);
	opacity: var(--o-text);
}

.contact-form__error {
	display: block;
	margin-top: 4px;
	font-size: var(--fs-micro);
	line-height: 1.5;
	color: var(--c-error);
}

.contact-form__consent {
	display: flex;
	align-items: flex-start;
	gap: 18px;        /* 810 − 792 */
	margin-top: 2px;  /* 981 − 979 */
}

/* Case 10×10 bordée : on garde la case native pour l'accessibilité et on la
   redessine (la maquette ne dessine pas de coche). */
.contact-form__checkbox {
	flex: none;
	appearance: none;
	width: 10px;
	height: 10px;
	margin: 6px 0 0; /* 985,7 − 981 sur une ligne de 18 */
	background: transparent;
	border: var(--rule) solid var(--c-ink);
	border-radius: 0;
	cursor: pointer;
}

.contact-form__checkbox:checked {
	background: var(--c-ink);
}

.contact-form__checkbox[aria-invalid="true"] {
	border-color: var(--c-error);
}

.contact-form__consent-text {
	font-size: var(--fs-micro);
	line-height: 1.5; /* 18 */
	color: var(--c-ink);
	opacity: var(--o-text);
	cursor: pointer;
}

.contact-form__consent-text a {
	text-decoration: underline;
}

/* Bouton d'envoi : aplat encre, NORD 10, flèche 10×10 à 5 du libellé. */
.contact-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-height: 33px;
	padding: 10px;
	background: var(--c-ink);
	border: var(--rule) solid var(--c-ink);
	color: var(--c-light);
	font-family: var(--ff-display);
	font-weight: 500;
	font-size: var(--fs-eyebrow);
	line-height: 1.1;
	letter-spacing: var(--ls-eyebrow);
	cursor: pointer;
	justify-self: end;
	margin-top: 2px;  /* 981 − 979 */
	transition: background-color var(--t-fast), border-color var(--t-fast);
}

.contact-form__submit:hover,
.contact-form__submit:focus-visible {
	background: var(--c-accent);
	border-color: var(--c-accent);
}

.contact-form__submit svg {
	flex: none;
	width: 10px;
	height: 10px;
}

/* Champ leurre : masqué comme le texte réservé aux lecteurs d'écran, sans
   décalage hors canevas qui faussait les contrôles de débordement. */
.contact-form__hp {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.contact-form__notice {
	margin-bottom: clamp(1rem, 1.73611vw, 1.875rem);
	padding: 14px 18px;
	border: var(--rule) solid currentColor;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

.contact-form__notice--ok { color: var(--c-accent); }
.contact-form__notice--ko { color: var(--c-error); }

.contact-form__field[aria-invalid="true"] {
	border-color: var(--c-error);
}

@media (max-width: 767px) {
	.contact-form__grid {
		grid-template-columns: 1fr;
		column-gap: 0;
	}

	.contact-form__actions {
		grid-template-columns: 1fr;
		row-gap: clamp(1rem, 3vw, 1.5rem);
	}

	.contact-form__submit {
		justify-self: start;
	}
}