/* ==========================================================================
   Input (.input) — Champ de formulaire de base

   Structure BEM :
   - .input                    → Bloc racine (champ de saisie)
   - .input--text              → Modificateur type texte
   - .input--email             → Modificateur type email
   - .input--password          → Modificateur type mot de passe
   - .input--textarea          → Modificateur zone de texte
   - .input--select            → Modificateur select
   - .input--error             → Modificateur état erreur
   - .input--success           → Modificateur état succès
   - [disabled]                → État désactivé

   Copie de la bibliothèque dev-project-suite, adaptée au style « Encre,
   signature vermillon » (projet/design/) : 48 px de haut, filet line
   1,5 px, rayon 10, texte 16 px ; focus et erreur à l'encre (pas de rouge).

   Usage :
   <input type="text" class="input input--text" placeholder="Nom">
   <textarea class="input input--textarea"></textarea>
   ========================================================================== */

/* --------------------------------------------------------------------------
   BASE — Champ de saisie fondamental
   -------------------------------------------------------------------------- */

.input {
  /* Layout */
  display: block;
  width: 100%;

  /* Box model */
  box-sizing: border-box;
  height: var(--control-height);
  padding: 0 14px;
  border: var(--border-control) solid var(--color-border);
  border-radius: var(--radius-md);

  /* Typography */
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--leading-normal);
  color: var(--color-text);

  /* Visual */
  background-color: var(--color-surface);
  transition: border-color var(--transition-fast);

  /* Defensive */
  min-width: 0;
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   VARIANTES — Types de champs
   -------------------------------------------------------------------------- */

.input--text,
.input--email,
.input--password {
  height: auto;
}

.input--textarea {
  height: auto;
  padding-block: var(--space-sm);
  min-height: 120px;
  resize: vertical;
}

.input--select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23475653' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-sm) center;
  padding-inline-end: var(--space-xl);
}

/* --------------------------------------------------------------------------
   ÉTATS — Focus, Hover, Disabled
   -------------------------------------------------------------------------- */

/* Focus visible (accessibilité WCAG) */
.input:focus {
  outline: none;
}

.input:focus-visible {
  border-color: var(--color-border-focus);
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: 1px;
}

/* Hover (subtil) */
.input:hover:not(:focus):not([disabled]) {
  border-color: var(--color-border-hover);
}

/* Disabled (désactivé) */
.input[disabled],
.input--disabled {
  background-color: var(--color-bg);
  color: var(--color-text-muted);
  cursor: not-allowed;
  opacity: 0.6;
}

/* --------------------------------------------------------------------------
   ÉTATS SPÉCIAUX — Error, Success
   -------------------------------------------------------------------------- */

.input--error {
  border: var(--border-strong) solid var(--color-error);
}

.input--success {
  border-color: var(--color-success);
}

/* --------------------------------------------------------------------------
   PLACEHOLDER — Style du placeholder
   -------------------------------------------------------------------------- */

.input::placeholder {
  color: var(--color-text-muted);
  opacity: 1; /* Firefox override */
}

/* --------------------------------------------------------------------------
   ACCESSIBILITÉ — ARIA et rôles
   -------------------------------------------------------------------------- */

/* Input avec aria-describedby pour error messages */
.input[aria-invalid="true"] {
  border: var(--border-strong) solid var(--color-error);
}