/* ==========================================================================
   Textarea (.textarea) — Zone de texte multi-lignes accessible

   Structure BEM :
   - .textarea               → Bloc racine (zone de saisie)
   - .textarea--sm           → Modificateur petit (3 lignes)
   - .textarea--md           → Modificateur moyen (5 lignes, défaut)
   - .textarea--lg           → Modificateur grand (8 lignes)
   - .textarea--error        → Modificateur état erreur
   - .textarea--success      → Modificateur état succès
   - .textarea--autogrow     → Hauteur ajustée au contenu (JS)
   - [disabled]              → État désactivé

   Usage :
   <div class="form-group">
     <label for="note" class="label">Note</label>
     <textarea id="note" class="textarea textarea--md" rows="5"></textarea>
     <p class="form-group__hint">Visible par les deux parents.</p>
   </div>

   Accessibilité :
   - Label associé via for/id
   - Focus visible avec outline
   - Messages d'erreur liés via aria-describedby
   - Contraste WCAG AAA validé

   Copie de la bibliothèque dev-project-suite, adaptée au style « Encre,
   signature vermillon » (projet/design/) : mêmes filet, rayon et focus que
   .input. Réécrite sans imbrication CSS (cible iOS 16.4, qui ne la lit pas) et
   sans bloc sombre propre : le thème vient de tokens.css seul.
   ========================================================================== */

/* --------------------------------------------------------------------------
   BASE
   -------------------------------------------------------------------------- */
.textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;

  padding: var(--space-sm) 14px;
  font-family: var(--font-body);
  font-size: var(--text-base); /* 16 px : pas de zoom automatique sur iOS */
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: var(--color-surface);

  border: var(--border-control) solid var(--color-border);
  border-radius: var(--radius-md);

  resize: vertical;
  overflow-y: auto;

  transition: border-color var(--duration-fast) var(--ease-default);
}

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

.textarea:focus {
  outline: none;
}

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

.textarea:hover:not(:disabled):not(.textarea--error) {
  border-color: var(--color-border-hover);
}

.textarea:disabled,
.textarea.is-disabled {
  background-color: var(--color-bg);
  color: var(--color-text-disabled);
  cursor: not-allowed;
  opacity: 0.7;
}

.textarea:disabled::placeholder,
.textarea.is-disabled::placeholder {
  color: var(--color-text-disabled);
}

.textarea[readonly] {
  background-color: var(--color-bg);
  resize: none;
}

/* --------------------------------------------------------------------------
   SIZES
   -------------------------------------------------------------------------- */
.textarea--sm {
  min-height: 3.5rem; /* ~3 lignes */
}

.textarea--md {
  min-height: 7.5rem; /* ~5 lignes (défaut) */
}

.textarea--lg {
  min-height: 12rem; /* ~8 lignes */
}

/* --------------------------------------------------------------------------
   ERROR / SUCCESS — à l'encre, filet 2 px (pas de rouge dans le style)
   -------------------------------------------------------------------------- */
.textarea--error,
.textarea.is-error,
.textarea[aria-invalid="true"] {
  border: var(--border-strong) solid var(--color-error);
}

.textarea--success,
.textarea.is-success {
  border-color: var(--color-success);
}

.textarea--fullwidth {
  display: block;
  width: 100%;
}

/* --------------------------------------------------------------------------
   AUTOGROW (JS requis)
   -------------------------------------------------------------------------- */
.textarea--autogrow {
  overflow-y: hidden;
  resize: none;
}

.textarea--autogrow.is-autogrow {
  overflow-y: auto;
}

/* --------------------------------------------------------------------------
   CHAR-COUNTER (optionnel)
   -------------------------------------------------------------------------- */
.textarea-wrapper {
  position: relative;
}

.textarea-wrapper .textarea {
  padding-right: var(--space-2xl); /* place du compteur */
}

.textarea-wrapper .char-counter {
  position: absolute;
  bottom: var(--space-xs);
  right: var(--space-sm);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-secondary);
  pointer-events: none;
}

.textarea-wrapper .char-counter.is-warning {
  color: var(--color-warning);
}

.textarea-wrapper .char-counter.is-error {
  color: var(--color-error);
  font-weight: var(--font-weight-bold);
}