/**
 * Formulaire de devis.
 *
 * Les champs natifs arrivent avec un fond blanc et une bordure système : sur
 * fond sombre, ils cassent la page. On les rehabille avec les tokens, sans
 * masquer l’anneau de focus, qui reste la seule indication de position au
 * clavier.
 */

.form-devis {
	display: grid;
	gap: var(--space-lg);
	max-inline-size: 42rem;
	margin-block-start: var(--space-xl);
	margin-inline: auto;
}

.form-devis__field {
	display: grid;
	gap: var(--space-2xs);
}

.form-devis label {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
}

.form-devis :is(input, textarea) {
	padding: var(--space-sm) var(--space-md);
	background-color: var(--color-surface);
	border: var(--line-width) solid var(--color-line);
	border-radius: 0;
	color: var(--color-text);
	font: inherit;
	inline-size: 100%;
	min-block-size: var(--tap-target);
	transition: border-color var(--duration-fast) var(--ease);
}

.form-devis :is(input, textarea):hover {
	border-color: var(--color-cool);
}

.form-devis textarea {
	min-block-size: 9rem;
	resize: vertical;
}

/* Case a cocher : le libelle est cliquable, la case garde sa taille native. */
.form-devis__field--check label {
	display: flex;
	align-items: flex-start;
	gap: var(--space-sm);
	font-weight: var(--font-weight-regular, 400);
}

.form-devis__field--check input {
	inline-size: auto;
	min-block-size: 0;
	margin-block-start: 0.15em;
	flex: none;
}

.form-devis__hint {
	margin: 0;
	font-size: var(--font-size-sm);
	opacity: 0.7;
}

.form-devis__required {
	color: var(--color-accent);
}

.form-devis__error {
	margin: 0;
	font-size: var(--font-size-sm);
	color: var(--color-accent);
}

/* Leurre anti-robot : sorti du cadre sans display:none, que certains
   automates savent detecter. aria-hidden et tabindex le retirent deja des
   technologies d’assistance et du parcours clavier. */
.form-devis__decoy {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.form-notice {
	margin-block-start: var(--space-lg);
	padding: var(--space-md) var(--space-lg);
	background-color: var(--color-surface);
	border-inline-start: 3px solid var(--color-accent);
}

.form-notice--ok {
	border-inline-start-color: var(--color-cool);
	max-inline-size: 42rem;
	margin-inline: auto;
	text-align: center;
}

#coordonnees {
	text-align: center;
}

#coordonnees > :is(h2, h3, p) {
	margin-inline: auto;
	text-align: center;
}