États des champs

<style>
.bn-field-states {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;

  max-width: 380px;
  padding: 2rem;
  font-family: 'Inter', sans-serif;
  background: #0B0F10;
}

.bn-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.bn-field label {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #979793;
}

.bn-field input,
.bn-field textarea {
  padding: 0.7rem 0.9rem;

  font-family: inherit;
  font-size: 0.9rem;
  color: #E6E4DD;

  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(230, 228, 221, 0.2);
  border-radius: 6px;
  resize: vertical;

  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bn-field input:focus-visible,
.bn-field textarea:focus-visible,
.bn-field input:focus,
.bn-field textarea:focus {
  outline: none;
  border-color: #E6E4DD;
  box-shadow: 0 0 0 3px rgba(230, 228, 221, 0.15);
}

.bn-field__message {
  font-size: 0.78rem;
}

/* --- Erreur --- */
.bn-field--error input {
  border-color: #E5484D;
}

.bn-field--error .bn-field__message {
  color: #E5484D;
}

/* --- Succès --- */
.bn-field--success textarea {
  border-color: #3FB950;
}

.bn-field--success .bn-field__message {
  color: #3FB950;
}

</style>

<div class="bn-field-states">

  <div class="bn-field">
    <label for="bn-field-default">Votre nom</label>
    <input id="bn-field-default" type="text" placeholder="Entrez votre nom" />
  </div>

  <div class="bn-field">
    <label for="bn-field-focus">Focus (cliquez dedans)</label>
    <input id="bn-field-focus" type="email" value="votre@email.com" />
  </div>

  <div class="bn-field bn-field--error">
    <label for="bn-field-error">Votre email</label>
    <input id="bn-field-error" type="email" value="votreemail.com" />
    <span class="bn-field__message">Veuillez entrer une adresse email valide.</span>
  </div>

  <div class="bn-field bn-field--success">
    <label for="bn-field-success">Votre message</label>
    <textarea id="bn-field-success" rows="2">Merci pour votre message.</textarea>
    <span class="bn-field__message">Message envoyé avec succès.</span>
  </div>

</div>