/* Formulaires — Figma « Champ texte », « Option », « Case à cocher », « Interrupteur », « Alerte »
   Champ (relevé Figma 21/10) : label Body, gap 8, saisie 54 px desktop / 52 mobile, padding 0/16, rayon 12, fond light, sans bordure ;
   focus : fond blanc + contour carbone 2 px ; erreur : contour rouge 2 px + message Legend rouge relié par aria-describedby ; désactivé : champ entier à 40 %.
   Option : pilule 46 px desktop / 44 mobile, padding 0/20, fond light, sans bordure ; hover contour carbone 1,5 ;
   sélectionnée fond blanc + contour rouge 1,5 + texte rouge ; focus anneau ; désactivée 40 %.
   Fluent Forms : désactiver son CSS, appliquer ces classes via les paramètres de classe des champs. */

.field { display: flex; flex-direction: column; gap: var(--space-8); }
fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.field > legend { padding: 0; margin-bottom: var(--space-8); }
.field__label { font-size: var(--text-body-size); line-height: var(--text-body-lh); font-weight: var(--text-body-weight); }
.field__label .req { color: var(--brandt-red); }
.field__help { font-size: var(--text-legend-size); line-height: var(--text-legend-lh); color: var(--brandt-carbon-muted); }
.field__error { font-size: var(--text-legend-size); line-height: var(--text-legend-lh); color: var(--brandt-red); display: flex; gap: var(--space-4); align-items: center; }

.input, .select, .textarea {
  width: 100%; min-height: var(--size-input); padding: 0 var(--space-16);
  border-radius: var(--radius-12); border: 0;
  background: var(--brandt-light); color: var(--brandt-carbon);
  font-size: var(--text-body-size); line-height: var(--text-body-lh);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.textarea { min-height: var(--size-textarea); padding-block: var(--space-12); resize: vertical; }
@media (min-width: 1024px) { .textarea--compact { min-height: var(--size-input); height: var(--size-input); } } /* message facultatif (candidature, desktop) : une ligne au repos, extensible */
.input::placeholder, .textarea::placeholder { color: var(--brandt-carbon-muted); }
.input:hover, .select:hover, .textarea:hover { box-shadow: 0 0 0 var(--border-1-5) var(--brandt-line); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { background: var(--brandt-white); box-shadow: 0 0 0 var(--border-2) var(--brandt-carbon); }
.field.is-error .input, .field.is-error .select, .field.is-error .textarea, .input[aria-invalid="true"] { box-shadow: 0 0 0 var(--border-2) var(--brandt-red); }
.field.is-disabled, .field:has(> .input[disabled]), .field:has(> .select[disabled]), .field:has(> .textarea[disabled]) { opacity: var(--disabled-opacity); }
.card--white .input, .card--white .select, .card--white .textarea, .section--light .card .input, .section--light .card .select, .section--light .card .textarea { background: var(--brandt-light); }

.form-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-16); }
@media (min-width: 1024px) { .form-grid--2 { grid-template-columns: 1fr 1fr; } }
.form-grid .field--full { grid-column: 1 / -1; }

/* Options (choix unique ou multiple) */
.options { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.option { position: relative; }
.option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.option__label {
  display: inline-flex; align-items: center; gap: var(--space-8);
  min-height: var(--size-target-44); padding: 0 var(--space-20);
  border-radius: var(--radius-pill); border: 0;
  background: var(--brandt-light); color: var(--brandt-carbon);
  font-size: var(--text-body-size); line-height: var(--text-body-lh); font-weight: var(--text-body-weight);
  cursor: pointer; transition: border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
@media (min-width: 1024px) { .option__label { min-height: var(--size-option-min); } }
.option__label:hover { box-shadow: inset 0 0 0 var(--border-1-5) var(--brandt-carbon); }
.option input:checked + .option__label { background: var(--brandt-white); box-shadow: inset 0 0 0 var(--border-1-5) var(--brandt-red); color: var(--brandt-red); }
.option input:focus-visible + .option__label { box-shadow: var(--focus-ring); }
.option input:checked:focus-visible + .option__label { box-shadow: inset 0 0 0 var(--border-1-5) var(--brandt-red), var(--focus-ring); }
.option input[disabled] + .option__label { opacity: var(--disabled-opacity); cursor: not-allowed; }

/* Cartes de choix (devis : Une maison / Un appartement) : icône + libellé, rayon 20 */
.option--card .option__label { flex-direction: column; align-items: flex-start; gap: var(--space-12); padding: var(--space-20); border-radius: var(--radius-20); min-height: 0; }
.option--card .option__label svg { width: var(--size-icon-24); height: var(--size-icon-24); }

/* Case à cocher 24 px, libellé cliquable (cible 44 px par le padding du label) */
.checkbox { display: flex; gap: var(--space-12); align-items: flex-start; cursor: pointer; padding-block: var(--space-8); }
.checkbox input { appearance: none; flex: 0 0 auto; width: var(--size-icon-24); height: var(--size-icon-24); margin: 0; border-radius: var(--radius-checkbox); border: var(--border-2) solid var(--brandt-carbon); background: var(--brandt-white); display: grid; place-content: center; transition: background-color var(--transition), border-color var(--transition); }
.checkbox input::before { content: ""; width: calc(var(--size-icon-24) / 2); height: calc(var(--size-icon-24) / 2); transform: scale(0); transition: transform var(--transition); background: var(--brandt-white); clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
.checkbox input:checked { background: var(--brandt-red); border-color: var(--brandt-red); }
.checkbox input:checked::before { transform: scale(1); }
.checkbox input:focus-visible { box-shadow: var(--focus-ring); }
.checkbox.is-error input { border-color: var(--brandt-red); }
.checkbox input[disabled] { opacity: var(--disabled-opacity); }
.checkbox__label { font-size: var(--text-body-size); line-height: var(--text-body-lh); }

/* Interrupteur (préférences cookies) */
.switch { position: relative; display: inline-block; width: var(--size-switch-w); height: var(--size-switch-h); }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch__track { position: absolute; inset: 0; border-radius: var(--radius-pill); background: var(--brandt-line); transition: background-color var(--transition); cursor: pointer; }
.switch__track::after { content: ""; position: absolute; top: var(--space-4); left: var(--space-4); width: var(--size-icon-24); height: var(--size-icon-24); border-radius: 50%; background: var(--brandt-white); transition: transform var(--transition); }
.switch input:checked + .switch__track { background: var(--brandt-red); }
.switch input:checked + .switch__track::after { transform: translateX(var(--space-20)); }
.switch input:focus-visible + .switch__track { box-shadow: var(--focus-ring); }
.switch input[disabled] + .switch__track { opacity: var(--disabled-opacity); cursor: not-allowed; }

/* Alerte (succès / erreur) */
.alert { display: flex; gap: var(--space-12); align-items: flex-start; padding: var(--space-16) var(--space-20); border-radius: var(--radius-12); background: var(--brandt-light); box-shadow: inset 0 0 0 var(--border-1) var(--brandt-carbon); }
.alert__text { display: flex; flex-direction: column; gap: var(--space-4); }
.alert svg { flex: 0 0 auto; width: var(--size-icon-24); height: var(--size-icon-24); }
.alert--success svg { color: var(--brandt-red); }
.alert--error { box-shadow: inset 0 0 0 var(--border-1) var(--brandt-red); }
.alert--error svg, .alert--error .alert__title { color: var(--brandt-red); }
.alert__title { font-weight: var(--font-weight-bold); }