/* Formulaire de contact — natif, page Contact uniquement (2026-08-31).
   Charte déjà en place : fond blanc franc sur carte, bordure fine nette,
   indigo pour l'accent, zéro glow/flou (cf. skill median-events-design). */

.md-contact-form-wrap {
	margin-top: 32px;
}

.md-contact-notice {
	border-radius: var(--md-radius-card);
	padding: 16px 18px;
	margin-bottom: 20px;
	font-size: 15px;
	line-height: 1.5;
}

/* Fond plein + bordure plutôt qu'une transparence pâle — contraste franc
   même dans les messages d'état, cf. règle de charte explicite. */
.md-contact-notice--success {
	background: #ECF6EE;
	border: 1px solid #2F7D45;
	color: #1E5C30;
}

.md-contact-notice--success strong {
	display: block;
	margin-bottom: 4px;
}

.md-contact-notice--error {
	background: #FBEAEA;
	border: 1px solid #B3261E;
	color: #7A1A15;
}

.md-contact-form {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.md-contact-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

@media (max-width: 560px) {
	.md-contact-form__row {
		grid-template-columns: 1fr;
	}
}

.md-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.md-field label {
	font-size: 14px;
	font-weight: 600;
	color: var(--md-ink);
}

.md-field__required {
	color: #B3261E;
}

.md-field input,
.md-field select,
.md-field textarea {
	font-family: var(--md-font);
	font-size: 16px;
	color: var(--md-ink);
	background: var(--md-white);
	border: 1px solid var(--md-line);
	border-radius: var(--md-radius-btn);
	padding: 12px 14px;
	width: 100%;
	box-sizing: border-box;
}

.md-field textarea {
	resize: vertical;
	min-height: 120px;
	font-family: var(--md-font);
}

.md-field input:focus,
.md-field select:focus,
.md-field textarea:focus {
	outline: none;
	border-color: var(--md-indigo);
	box-shadow: 0 0 0 3px rgba(47, 42, 118, 0.15);
}

/* Piège à robots — hors écran plutôt que display:none/visibility:hidden,
   pour que les scripts d'auto-remplissage grossiers le voient (et le
   remplissent) tout en restant silencieux pour un lecteur d'écran (un
   display:none serait ignoré par certains bots basiques qui ne lisent que
   la présence du champ dans le DOM, pas son rendu visuel). */
.md-contact-form__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.md-contact-form__consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--md-ink);
	cursor: pointer;
}

.md-contact-form__consent input {
	margin-top: 3px;
	flex: none;
	width: 18px;
	height: 18px;
	accent-color: var(--md-indigo);
}

.md-contact-form__submit {
	align-self: flex-start;
}

@media (max-width: 700px) {
	.md-contact-form__submit {
		align-self: stretch;
		text-align: center;
	}
}

/* ── Erreur sous chaque champ (audit 19 points, point 12, 2026-10-11) ───────
   Même rouge que l'astérisque des champs obligatoires (#B3261E, 6,5:1 sur blanc et sur la
   crème du site). Règle [hidden] explicite : une classe qui pose un display l'emporterait sur
   celui du navigateur (piège déjà rencontré deux fois, CLAUDE.md de custom-median). Sélecteur à
   deux classes : le formulaire est dans .md-page__content, dont la règle des paragraphes
   (.md-page__content p) imposait sa couleur d'encre (vu sur le sandbox le 2026-10-11). */
.md-contact-form .md-field__error {
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
	font-weight: 600;
	color: #B3261E;
}

.md-contact-form .md-field__error[hidden] {
	display: none;
}

.md-field [aria-invalid="true"] {
	border-color: #B3261E;
}

.md-field [aria-invalid="true"]:focus {
	border-color: #B3261E;
	box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.18);
}

.md-contact-form .md-contact-form__consent + .md-field__error {
	margin-top: -4px;
}

/* Envoi en cours : le bouton reste lisible, seulement atténué. */
.md-contact-form__submit[aria-busy="true"] {
	opacity: 0.75;
	cursor: progress;
}