/*
  alert.css — messages d'état : succès (opt-in envoyé), info, erreur.
*/
.alert {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  font-size: var(--text-sm);
}

.alert svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.alert strong {
  display: block;
  font-family: var(--font-display);
  margin-bottom: 2px;
}

.alert--success {
  background: var(--color-success-bg);
  border-color: var(--color-success-border);
  color: var(--color-success-ink);
}

.alert--info {
  background: var(--color-info-bg);
  border-color: var(--color-info-border);
  color: var(--color-info-ink);
}

.alert--error {
  background: var(--color-error-bg);
  border-color: var(--color-error-border);
  color: var(--color-error-ink);
}

.alert[hidden] {
  display: none;
}