/* =============================================================================
   SIGNALNEST — FORMULAIRES
   .sn-form-field · .sn-slider
   ============================================================================= */

/* ---- sn-form-field ------------------------------------------------------------
   Champ labellisé générique + variante "intervalle" (deux champs liés).
   Écran source : "Fourchette de prix", "Montant de l'investissement",
   "Mode de grille et quantité".                                       */
.sn-form-field__label {
  display: flex; align-items: center; gap: 4px;
  font-weight: var(--sn-weight-bold);
  margin-bottom: var(--sn-space-2);
}
.sn-form-field__hint { font-size: var(--sn-text-xs); color: var(--sn-color-text-tertiary); font-weight: var(--sn-weight-regular); }
.sn-form-field__control {
  display: flex; align-items: center; justify-content: space-between;
  height: 52px;
  padding: 0 var(--sn-space-4);
  border-radius: var(--sn-radius-md);
  background: var(--sn-color-bg-surface);
  border: 1.5px solid transparent;
  transition: border-color var(--sn-duration-fast) var(--sn-ease-standard);
}
.sn-form-field__control:focus-within { border-color: var(--sn-color-text-primary); }
.sn-form-field__input { border: 0; background: none; outline: none; flex: 1; min-width: 0; font-family: var(--sn-font-mono); font-size: var(--sn-text-md); }
.sn-form-field__input::placeholder { color: var(--sn-color-text-tertiary); font-family: var(--sn-font-base); }

/* Reset all native inputs/selects/textareas inside the control wrapper so
   Django-rendered widgets never produce a double border. */
.sn-form-field__control input,
.sn-form-field__control select,
.sn-form-field__control textarea {
  border: 0;
  background: none;
  outline: none;
  flex: 1;
  min-width: 0;
  font-family: var(--sn-font-base);
  font-size: var(--sn-text-base);
  line-height: var(--sn-leading-normal);
  color: var(--sn-color-text-primary);
  padding: 0;
  margin: 0;
  height: auto;
  -webkit-appearance: none;
  appearance: none;
}
.sn-form-field__control input::placeholder,
.sn-form-field__control textarea::placeholder { color: var(--sn-color-text-tertiary); }
.sn-form-field__control input:focus,
.sn-form-field__control select:focus,
.sn-form-field__control textarea:focus { outline: none; box-shadow: none; }
.sn-form-field__control select { cursor: pointer; }
.sn-form-field__control textarea { resize: vertical; min-height: 80px; }
.sn-form-field__suffix { font-family: var(--sn-font-mono); font-weight: var(--sn-weight-semibold); color: var(--sn-color-text-secondary); flex-shrink: 0; }

.sn-form-field--range { display: flex; align-items: center; gap: var(--sn-space-2); }
.sn-form-field--range .sn-form-field__control { flex: 1; }
.sn-form-field--range .sn-form-field__divider { color: var(--sn-color-text-tertiary); }

/* ---- sn-slider ------------------------------------------------------------------
   Curseur de montant avec paliers visibles.
   Écran source : "Montant de l'investissement" (5 arrêts).            */
.sn-slider { padding-block: var(--sn-space-3); }
.sn-slider__track { position: relative; height: 2px; background: var(--sn-color-border-strong); border-radius: var(--sn-radius-xs); }
.sn-slider__fill { position: absolute; inset: 0; width: var(--sn-slider-fill, 0%); background: var(--sn-color-text-primary); border-radius: var(--sn-radius-xs); }
.sn-slider__stops { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; }
.sn-slider__stop { width: 8px; height: 8px; border-radius: var(--sn-radius-circle); background: var(--sn-color-bg-canvas); box-shadow: inset 0 0 0 1.5px var(--sn-color-border-strong); }
.sn-slider__stop--filled { background: var(--sn-color-text-primary); box-shadow: none; }
.sn-slider__thumb {
  position: absolute; top: 50%; left: var(--sn-slider-fill, 0%);
  width: 18px; height: 18px; margin-left: -9px; margin-top: -9px;
  border-radius: var(--sn-radius-circle);
  background: var(--sn-color-bg-canvas);
  box-shadow: var(--sn-shadow-sm), inset 0 0 0 1.5px var(--sn-color-text-primary);
}