.alert {
  width: 100%;
  padding: var(--spacing-md);
  border-left: 8px solid;
  position: relative;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-sm-bottom); /* ou ta valeur */
  font-size: var(--font-size-body-sm);
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.alert * {
  color: inherit;
}

/* Bouton de fermeture */
.alert__close {
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  cursor: pointer;
  background: transparent;
  border: none;
  color: inherit;
}

.alert__title {
  font-size: var(--font-size-body-md);
  font-weight: 600;
  margin: 0;
}

.alert__message {
  font-size: var(--font-size-body-md);
  margin-top: var(--spacing-xs);
}

.alert__close {
stroke-width: 3;
}

/* État masqué (animation possible) */
.alert--hide {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}

/* Variantes */
.alert--neutral {
  background-color: var(--colors-surface-white);
  border-color: var(--colors-border-primary);
  color: var(--colors-text-body);
}

.alert--info {
  background-color: var(--colors-surface-information);
  border-color: var(--colors-border-information);
  color: var(--colors-text-on-information);
}

.alert--success {
  background-color: var(--colors-surface-success);
  border-color: var(--colors-border-success);
  color: var(--colors-text-on-success);
}

.alert--warning {
  background-color: var(--colors-surface-warning);
  border-color: var(--colors-border-warning);
  color: var(--colors-text-on-warning);
}

.alert--danger {
  background-color: var(--colors-surface-danger);
  border-color: var(--colors-border-danger);
  color: var(--colors-text-on-danger);
}