/* Recrée l'agencement du formulaire de démo Indivisible (champs courts
   côte à côte, message pleine largeur) avec le vrai HTML généré par le
   plugin Form de Grav (structure .form-field > .form-label + .form-data). */

#contact-form-wrapper form {
	display: flex;
	flex-wrap: wrap;
	column-gap: 1.5em;
	margin-top: 2em;
}

#contact-form-wrapper .form-field {
	flex: 1 1 100%;
	margin-bottom: 1.5em;
}

/* Champs courts (texte, courriel, téléphone) : deux par ligne, comme la démo */
#contact-form-wrapper .form-field:has([data-grav-field="text"]),
#contact-form-wrapper .form-field:has([data-grav-field="email"]),
#contact-form-wrapper .form-field:has([data-grav-field="tel"]) {
	flex: 1 1 calc(50% - 0.75em);
}

#contact-form-wrapper .form-label label {
	display: block;
	font-size: 0.8em;
	font-weight: 500;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: #555;
	margin-bottom: 1em;
}

#contact-form-wrapper .form-label .required {
	color: var(--mikinakw-accent);
}

#contact-form-wrapper input[type="text"],
#contact-form-wrapper input[type="email"],
#contact-form-wrapper input[type="tel"],
#contact-form-wrapper textarea {
	width: 100%;
}

#contact-form-wrapper .buttons {
	flex: 1 1 100%;
	margin-top: 0.5em;
}

#contact .notices {
	flex: 1 1 100%;
	padding: 1em 1.5em;
	margin-bottom: 1.5em;
	border-radius: 8px;
	font-weight: 600;
}

#contact .notices.green,
#contact .notices.success {
	background: rgba(23, 61, 34, 0.1);
	border: solid 1px var(--mikinakw-accent);
	color: var(--mikinakw-accent);
}

#contact .notices.red,
#contact .notices.error {
	background: rgba(200, 50, 50, 0.1);
	border: solid 1px #c83232;
	color: #c83232;
}

#contact .notices p {
	margin: 0;
}

#contact-form-wrapper .form-data[data-grav-field="checkbox"] .form-input-wrapper {
	display: flex;
	align-items: flex-start;
	gap: 0.75em;
}

#contact-form-wrapper .form-data[data-grav-field="checkbox"] input[type="checkbox"] {
	position: static !important;
	opacity: 1 !important;
	float: none !important;
	appearance: auto !important;
	-webkit-appearance: checkbox !important;
	width: 1.2em !important;
	height: 1.2em !important;
	margin: 0.2em 0 0 0 !important;
	flex-shrink: 0;
	z-index: auto !important;
}

#contact-form-wrapper .form-data[data-grav-field="checkbox"] label:before {
	display: none !important;
	content: none !important;
}

#contact-form-wrapper .form-data[data-grav-field="checkbox"] label {
	display: inline !important;
	padding-left: 0 !important;
	text-transform: none;
	letter-spacing: normal;
	font-size: 0.85em;
	line-height: 1.5;
	font-weight: 400;
	color: #444;
}