/*
 * KMM Consulting — contact.css
 * Page Contact (formulaire complet au LOT 10). Chargée aussi par la planche du design system.
 */
@layer components {
	/* ---------- Champs de formulaire (base ; formulaire complet au LOT 10) ---------- */
	.c-field {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
	}

	.c-field__label {
		color: var(--color-heading);
		font-weight: 600;
	}

	.c-field__required {
		color: var(--color-text-muted);
		font-weight: 400;
	}

	.c-input {
		inline-size: 100%;
		min-block-size: var(--target-min);
		padding: var(--space-3) var(--space-4);
		border: 1.5px solid var(--color-border-input);
		border-radius: var(--radius-md);
		background-color: var(--color-surface);
		color: var(--color-text);
		font-size: max(1rem, 16px); /* 16 px minimum : évite le zoom automatique sur iOS. */
		line-height: 1.4;
	}

	textarea.c-input {
		min-block-size: 9rem;
		resize: vertical;
	}

	.c-input:focus-visible {
		border-color: var(--color-focus);
		outline-offset: 0;
	}

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

	.c-field__hint {
		color: var(--color-text-muted);
		font-size: var(--fs-small);
	}

	.c-field__error {
		display: flex;
		align-items: flex-start;
		gap: var(--space-2);
		color: var(--color-error);
		font-size: var(--fs-small);
		font-weight: 600;
	}

	/* ---------- Messages ---------- */
	.c-notice {
		display: flex;
		align-items: flex-start;
		gap: var(--space-3);
		padding: var(--space-4) var(--space-5);
		border-inline-start: 4px solid currentColor;
		border-radius: var(--radius-md);
		background-color: var(--kmm-white);
	}

	.c-notice > .c-icon {
		--icon-size: 1.5rem;
	}

	.c-notice--success {
		background-color: #e6f4ec;
		color: var(--color-success);
	}

	.c-notice--error {
		background-color: #fcebeb;
		color: var(--color-error);
	}

	.c-notice__body {
		color: var(--kmm-gray-800);
	}
}

/* =========================================================================
 * Page Contact et formulaire (LOT 10)
 * ====================================================================== */
@layer sections {
	.c-contact {
		display: grid;
		gap: var(--space-7);
	}

	@media (min-width: 64em) {
		.c-contact {
			grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
			align-items: start;
			gap: var(--space-9);
		}

		.c-contact__quick {
			display: none; /* Grand écran : les canaux directs sont visibles à côté du formulaire. */
		}

		.c-contact__direct {
			position: sticky;
			inset-block-start: calc(var(--header-h) + var(--admin-bar, 0px) + var(--space-5));
		}

		.c-contact--direct-only {
			grid-template-columns: minmax(0, 36rem);
		}
	}

	.c-contact__quick .c-button {
		flex: 1 1 10rem;
	}

	.c-contact__title {
		margin-block-end: var(--space-5);
		font-size: var(--fs-h3);
		font-weight: 700;
	}

	.c-contact__direct {
		padding: var(--space-6);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-lg);
		background-color: var(--kmm-gray-100);
	}

	.c-contact__direct .u-text-muted {
		margin-block-end: var(--space-5);
	}

	/* ---------- Formulaire ---------- */
	.c-form {
		display: flex;
		flex-direction: column;
		gap: var(--space-5);
	}

	.c-form__row {
		display: grid;
		gap: var(--space-5);
	}

	@media (min-width: 40em) {
		.c-form__row {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	/* Champ piège : hors écran (pas display:none, que certains robots détectent). */
	.c-form__trap {
		position: absolute;
		inset-inline-start: -9999px;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
	}

	.c-checkbox {
		display: grid;
		grid-template-columns: 1.5rem 1fr;
		gap: var(--space-3);
		align-items: start;
		line-height: 1.5;
	}

	.c-checkbox input {
		inline-size: 1.25rem;
		block-size: 1.25rem;
		margin: 0.15rem 0 0;
		accent-color: var(--kmm-navy);
	}

	.c-form__submit .c-button {
		min-inline-size: 14rem;
	}

	.c-form__submit .c-button:disabled {
		cursor: progress;
		opacity: 0.75;
	}

	.c-form__again {
		margin-block-start: var(--space-4);
	}

	/* ---------- Messages ---------- */
	.c-notice {
		margin-block-end: var(--space-5);
	}

	.c-notice:focus {
		outline: var(--focus-width) solid var(--color-focus);
		outline-offset: var(--focus-offset);
	}

	.c-notice__body p {
		margin: 0;
	}

	.c-notice__list,
	.c-notice__channels {
		display: grid;
		gap: var(--space-2);
		margin: var(--space-3) 0 0;
		padding-inline-start: var(--space-5);
	}

	.c-notice__list a,
	.c-notice__channels a {
		color: var(--kmm-gray-800);
		font-weight: 600;
	}
}