/* =========================================================
   COMPONENT — Alert (inline)
   Remplaçant des `.alert .alert-warning/danger/...` BS3 (60 occ.).
   Structure :
     <div class="ds-alert ds-alert--warning" role="alert">
       <i class="fa fa-exclamation-triangle ds-alert__icon"></i>
       <div class="ds-alert__body">
         <strong>Attention</strong> — texte du message.
       </div>
     </div>

   Variantes : --success, --warning, --danger, --info.

   Testabilité (cf. 06-testability-guidelines.md) :
   - role="alert" sur les messages bloquants / d'erreur (interruption SR).
   - role="status" pour les feedbacks neutres non-bloquants.
   - Côté Playwright : `getByRole('alert', { name: /texte/i })`.
   ========================================================= */

.ds-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-3);
  padding: var(--ds-space-3) var(--ds-space-4);
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-color-bg-muted);
  color: var(--ds-color-text);
  font-size: var(--ds-font-size-sm);
  line-height: var(--ds-line-height-normal);
}

.ds-alert__icon {
  flex: 0 0 auto;
  font-size: var(--ds-font-size-md);
  line-height: var(--ds-line-height-normal);
}

.ds-alert__body {
  flex: 1 1 auto;
  min-width: 0;
}

.ds-alert__close {
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  padding: 0 var(--ds-space-1);
  font-size: var(--ds-font-size-lg);
  opacity: 0.6;
  transition: opacity var(--ds-transition-fast);
}
.ds-alert__close:hover { opacity: 1; }

.ds-alert--success {
  background: var(--ds-color-success-soft);
  border-color: var(--ds-color-success);
  color: var(--ds-color-success-strong);
}
.ds-alert--warning {
  background: var(--ds-color-warning-soft);
  border-color: var(--ds-color-warning);
  color: var(--ds-color-warning-strong);
}
.ds-alert--danger {
  background: var(--ds-color-danger-soft);
  border-color: var(--ds-color-danger);
  color: var(--ds-color-danger-strong);
}
.ds-alert--info {
  background: var(--ds-color-info-soft);
  border-color: var(--ds-color-info);
  color: var(--ds-color-info-strong);
}