/* css/components/form.css */
@layer components {
  input[type="text"] {
    inline-size: 100%;
    max-inline-size: var(--largeur-texte);
    padding: var(--space-xs) var(--space-s);
    border: var(--bordure);
    border-radius: var(--radius-m);
    background: var(--couleur-surface);
    color: var(--couleur-texte);
    line-height: var(--lh-titre);
    transition: border-color var(--duree-rapide) var(--easing);

    &::placeholder {
      color: var(--couleur-texte-doux);
      opacity: 1; /* Firefox l'atténue par défaut */
    }

    &:hover {
      border-color: var(--couleur-texte-doux);
    }

    &:focus-visible {
      border-color: var(--couleur-mundi);
      outline: 2px solid var(--couleur-focus);
      outline-offset: 2px;
    }

    &:disabled {
      background: var(--couleur-fond);
      color: var(--couleur-texte-doux);
      cursor: not-allowed;
    }

    &.error {
      border-color: var(--couleur-accent);
    }
  }
}