/* ==========================================================================
   Formulaire — public/css/components/form.css
   Champ, date en 3 champs, segments (radios), case à cocher, note, erreur,
   liste de la recherche de ville. Portés de design/maquettes/site/site.css.
   Cibles ≥ 48 px, texte 16 px (pas de zoom iOS), jetons uniquement.
   ========================================================================== */

.field { display: block; }
.field + .field { margin-top: 22px; }
.field__label { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font: 600 15px/1.3 var(--font-ui); color: var(--ink); margin-bottom: 8px; }
.field__label .opt { font-weight: 400; font-size: 14px; color: var(--ink-3); }
.field__help { margin-top: 8px; font-size: 14px; line-height: 1.45; color: var(--ink-3); }

/* Champ : le conteneur porte la bordure, le vrai <input> est nu. */
.input {
  display: flex; align-items: center; gap: 10px; width: 100%; height: var(--h-field); padding: 0 16px;
  background: var(--surface-2); border: 1.5px solid var(--field-border); border-radius: var(--r-sm);
  font: 400 16px/1 var(--font-ui); color: var(--ink);
}
.input input, .input select { all: unset; box-sizing: border-box; flex: 1; width: 100%; min-width: 0; height: 100%; font: 400 16px/1 var(--font-ui); color: var(--ink); }
.input input::placeholder { color: var(--ink-3); opacity: 1; }
.input .i { width: 20px; height: 20px; color: var(--ink-3); }
.input.is-focus, .input:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 22%, transparent); }
.input.is-error { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input.is-disabled { background: transparent; border-style: dashed; color: var(--ink-3); }

/* Date en 3 champs numériques (jour, mois, année) */
.date3 { display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: 8px; }
.date3 > div { min-width: 0; }
.date3 .input { justify-content: center; text-align: center; }
.date3 .input input { text-align: center; }
.date3 small { display: block; text-align: center; font-size: 12px; color: var(--ink-3); margin-top: 6px; }

/* Erreur : icône + texte, jamais la couleur seule */
.err { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; font: 500 14px/1.4 var(--font-ui); color: var(--accent-ink); }
.err .i { width: 18px; height: 18px; margin-top: 1px; }

/* Segments (vraies radios, aucune valeur par défaut) */
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seg label {
  display: flex; align-items: center; justify-content: center; gap: 10px; height: var(--h-field);
  border: 1.5px solid var(--field-border); border-radius: var(--r-sm); background: var(--surface-2);
  font: 500 16px/1 var(--font-ui); color: var(--ink); cursor: pointer;
}
.seg .radio { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--field-border); display: inline-grid; place-items: center; }
.seg label.is-on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.seg label.is-on .radio { border-color: var(--ink); }
.seg label.is-on .radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }
.seg label:focus-within { outline: 2px solid var(--focus); outline-offset: 3px; }
.seg.is-error label { border-color: var(--accent); }

/* Case à cocher */
.check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 15px; line-height: 1.45; color: var(--ink); }
.box {
  flex: none; width: 24px; height: 24px; border-radius: 6px; border: 1.5px solid var(--field-border); background: var(--surface-2);
  display: inline-grid; place-items: center; margin-top: -1px;
}
.box.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.box .i { width: 16px; height: 16px; }

/* Note d'information */
.note {
  display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--r-sm);
  background: var(--water-soft); color: var(--ink); font-size: 15px; line-height: 1.5;
}
.note .i { width: 20px; height: 20px; color: var(--water-ink); margin-top: 1px; flex: none; }
.note b { font-weight: 600; }

/* Recherche de ville (combobox) : liste locale, sans appel externe */
.combo { position: relative; }
.combo__list {
  position: absolute; z-index: 10; left: 0; right: 0; top: calc(100% + 6px); max-height: 18rem; overflow: auto;
  margin: 0; padding: 6px; list-style: none; background: var(--surface-2);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); box-shadow: var(--shadow-2);
}
.combo__opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 8px 12px; border-radius: 6px; font: 500 16px/1.25 var(--font-ui); color: var(--ink); cursor: pointer; }
.combo__opt small { font-size: 13px; color: var(--ink-3); white-space: nowrap; }
.combo__opt[aria-selected="true"], .combo__opt:hover { background: var(--paper-2); }
.combo__empty { padding: 12px; font-size: 14px; color: var(--ink-3); }