/* ==========================================================================
   Formulaires Contact et Location — compléments à components.css (.form, .field…)
   Maquettes : Contact.dc.html, Location.dc.html (#demande), Composants.dc.html
   Chargé sur les vues contact et location.
   ========================================================================== */

.form--contact { gap: 22px; }
.form--location { gap: 24px; }

/* Grille 2 colonnes → 1 colonne à 900 px (r-g de la maquette). */
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.form__grid .field--full { grid-column: 1 / -1; }
@media (max-width: 900px) {
	.form__grid { grid-template-columns: minmax(0, 1fr); }
}

.form .field__input { color: var(--ink); }
.form input[type="date"].field__input { min-width: 0; line-height: 50px; }
.form .field__error svg { flex: none; }

/* Consentement : la case porte l'erreur. */
.field--check { gap: 8px; }
.field--check .check input[aria-invalid="true"] { outline: 2px solid var(--error); outline-offset: 2px; }

/* Bouton d'envoi (maquette : 56 px, 0 40 px, aligné à gauche). */
.form__submit { align-self: flex-start; min-height: 56px; padding: 0 40px; border: 0; }
.form__submit:disabled { background: var(--line); color: var(--ink-soft); cursor: progress; }
@media (max-width: 600px) { .form__submit { align-self: stretch; } }
.form__note { font-size: 11px; color: var(--ink-soft); }

/* Message global (role=alert) : focus programmatique sans contour imposant. */
.form-message:focus { outline: none; }
.form-message:focus-visible { outline: 2px solid var(--error); outline-offset: 2px; }

/* ------------------------------------------------- Choix du matériel (Location) */
.form__choices { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.form__choices legend { padding: 0 0 12px; }
.form__choices-list { display: flex; gap: 12px; }
@media (max-width: 900px) { .form__choices-list { flex-direction: column; align-items: stretch; } }
.choice {
	flex: 1; display: flex; align-items: center; gap: 12px;
	min-height: 56px; padding: 0 18px;
	border: 1px solid var(--line); background: var(--bg);
	font-size: 14px; color: var(--ink); cursor: pointer;
	transition: border-color var(--t-hover) ease;
}
.choice input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--ink); }
.choice:hover, .choice:has(input:checked) { border-color: var(--ink); }
.choice:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.form__choices[aria-invalid="true"] .choice { border: 2px solid var(--error); }
.form__choices[aria-invalid="true"] .choice:has(input:checked) { border-color: var(--ink); }