/*
 * Formulaire de contact — [mqc_contact_form].
 * Réutilise les variables de couleur du thème (--mqc-navy, --mqc-red,
 * --mqc-anthracite, --mqc-border), définies globalement sur :root par
 * editorial.css, avec une valeur de repli au cas où elles seraient
 * absentes (le plugin doit rester fonctionnel indépendamment du thème).
 */

.mqc-contact-form-wrap {
	box-sizing: border-box;
	max-width: 720px;
	margin: 0 auto;
	padding: 0 20px;
}

.mqc-contact-form-wrap *,
.mqc-contact-form-wrap *::before,
.mqc-contact-form-wrap *::after {
	box-sizing: border-box;
}

.mqc-contact-status {
	margin: 0 0 24px;
	padding: 14px 16px;
	border-radius: 4px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.mqc-contact-status--success {
	background: rgba(20, 43, 59, 0.06);
	border: 1px solid var(--mqc-navy, #142B3B);
	color: var(--mqc-navy, #142B3B);
}

.mqc-contact-status--error {
	background: rgba(200, 59, 50, 0.06);
	border: 1px solid var(--mqc-red, #C83B32);
	color: var(--mqc-red, #C83B32);
}

.mqc-contact-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Honeypot : invisible pour les visiteurs et les lecteurs d'écran, mais
   présent dans le DOM pour les robots qui remplissent tous les champs. */
.mqc-contact-honeypot {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

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

.mqc-contact-field label {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--mqc-navy, #142B3B);
}

.mqc-contact-required {
	color: var(--mqc-red, #C83B32);
}

.mqc-contact-field input[type='text'],
.mqc-contact-field input[type='email'],
.mqc-contact-field select,
.mqc-contact-field textarea {
	width: 100%;
	min-height: 44px;
	padding: 10px 14px;
	border: 1px solid var(--mqc-border, #DFE3E6);
	border-radius: 4px;
	background: #fff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--mqc-anthracite, #202428);
}

.mqc-contact-field textarea {
	min-height: 160px;
	resize: vertical;
}

.mqc-contact-field input:focus,
.mqc-contact-field select:focus,
.mqc-contact-field textarea:focus {
	outline: none;
	border-color: var(--mqc-red, #C83B32);
	box-shadow: 0 0 0 3px rgba(200, 59, 50, 0.15);
}

.mqc-contact-field input[aria-invalid='true'],
.mqc-contact-field select[aria-invalid='true'],
.mqc-contact-field textarea[aria-invalid='true'] {
	border-color: var(--mqc-red, #C83B32);
}

.mqc-contact-field-error {
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8125rem;
	color: var(--mqc-red, #C83B32);
}

.mqc-contact-field--checkbox label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-weight: 400;
	cursor: pointer;
}

.mqc-contact-field--checkbox input[type='checkbox'] {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	accent-color: var(--mqc-navy, #142B3B);
}

.mqc-contact-submit {
	align-self: flex-start;
	min-height: 44px;
	padding: 0 28px;
	background: var(--mqc-navy, #142B3B);
	border: 1px solid var(--mqc-navy, #142B3B);
	border-radius: 4px;
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
}

.mqc-contact-submit:hover,
.mqc-contact-submit:focus-visible {
	background: var(--mqc-red, #C83B32);
	border-color: var(--mqc-red, #C83B32);
}

.mqc-contact-submit:focus-visible {
	outline: 2px solid var(--mqc-red, #C83B32);
	outline-offset: 2px;
}

@media (max-width: 480px) {
	.mqc-contact-submit {
		align-self: stretch;
	}
}