/**
 * SDC FormFieldText — styles scoped.
 *
 * Pas d @layer, pas de !important, pas de Tailwind dans le Twig.
 *
 * Cibles RGAA :
 *  - Input min-height 2.75rem (~44px) cible tap.
 *  - Largeur 100% sur mobile, max 24rem (384px) sur desktop pour eviter
 *    les inputs trop larges.
 *  - Focus ring contrasté 3:1 (utilise --previensmoi-focus-ring-color).
 *  - Etat erreur visuellement distinct (bordure + couleur + icone optionnel).
 *  - Label en gras pour lisibilite.
 */

.previensmoi-form-field-text {
  display: flex;
  flex-direction: column;
  gap: var(--previensmoi-space-2);
  margin-bottom: var(--previensmoi-space-4);
  font-family: var(--previensmoi-font-sans);
  color: var(--previensmoi-color-ink-700);
}

.previensmoi-form-field-text__label {
  display: inline-flex;
  align-items: baseline;
  gap: var(--previensmoi-space-1);
  font-size: var(--previensmoi-fontsize-base);
  font-weight: var(--previensmoi-fontweight-semibold);
  color: var(--previensmoi-color-ink-800);
  cursor: pointer;
}

.previensmoi-form-field-text__required-marker {
  color: var(--previensmoi-color-error-500);
  font-weight: var(--previensmoi-fontweight-bold);
}

.previensmoi-form-field-text__input {
  width: 100%;
  max-width: 24rem;
  min-height: 2.75rem;
  padding: var(--previensmoi-space-2) var(--previensmoi-space-3);
  background-color: var(--previensmoi-color-paper-0);
  border: 2px solid var(--previensmoi-color-ink-300);
  border-radius: var(--previensmoi-radius-md);
  font-family: inherit;
  font-size: var(--previensmoi-fontsize-base);
  color: var(--previensmoi-color-ink-800);
  transition:
    border-color var(--previensmoi-motion-fast) var(--previensmoi-motion-easing),
    box-shadow   var(--previensmoi-motion-fast) var(--previensmoi-motion-easing);
}

.previensmoi-form-field-text__input::placeholder {
  color: var(--previensmoi-color-ink-400);
  opacity: 1;
}

.previensmoi-form-field-text__input:hover {
  border-color: var(--previensmoi-color-ink-500);
}

.previensmoi-form-field-text__input:focus-visible {
  outline: var(--previensmoi-focus-ring-width) solid var(--previensmoi-focus-ring-color);
  outline-offset: var(--previensmoi-focus-ring-offset);
  border-color: var(--previensmoi-color-primary-600);
}

.previensmoi-form-field-text__input:disabled {
  background-color: var(--previensmoi-color-paper-100);
  color: var(--previensmoi-color-ink-500);
  cursor: not-allowed;
}

.previensmoi-form-field-text__help {
  margin: 0;
  font-size: var(--previensmoi-fontsize-sm);
  color: var(--previensmoi-color-ink-600);
}

.previensmoi-form-field-text__error {
  margin: 0;
  font-size: var(--previensmoi-fontsize-sm);
  font-weight: var(--previensmoi-fontweight-semibold);
  color: var(--previensmoi-color-error-500);
}

/* Etat error — bordure + leger fond rouge pour visibilite. */
.previensmoi-form-field-text--error .previensmoi-form-field-text__input {
  border-color: var(--previensmoi-color-error-500);
}

.previensmoi-form-field-text--error .previensmoi-form-field-text__input:focus-visible {
  outline-color: var(--previensmoi-color-error-500);
  border-color: var(--previensmoi-color-error-500);
}

/* Helper a11y — texte visuellement cache mais lu par les lecteurs d ecran. */
.previensmoi-form-field-text .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}