/* Alerte — un message à ton : posé dans la page, il reste ; en toast (`alert--toast`,
   posé par static/js/toast.js dans `alert-stack`), il passe. Référence : docs/design-system.md. */

.alert {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  font-size: var(--text-13);
  line-height: var(--leading-snug);
  text-decoration: none; /* une alerte peut être un lien (une échéance du tableau de bord) */
}

:is(.alert--success, .alert--warning, .alert--danger, .alert--info) {
  border-color: var(--tone-border);
  background: var(--tone-bg);
  color: var(--tone-text);
}

.alert__icon {
  flex-shrink: 0;
  margin-top: 2px;
  font-size: var(--text-18);
  line-height: var(--leading-none);
}

.alert__body {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.alert__title {
  display: block;
  margin-bottom: var(--space-1);
  font-weight: var(--weight-semibold);
}

.alert__close {
  flex-shrink: 0;
  margin-left: auto;
  padding: var(--space-0-5);
  border: 0;
  border-radius: var(--radius-xs);
  background: none;
  color: inherit;
  font-size: var(--text-18);
  line-height: var(--leading-none);
  cursor: pointer;
}

.alert__close:hover {
  background: color-mix(in srgb, currentcolor 10%, transparent);
}

/* --- Le toast : une alerte éphémère, fixée au coin de l'écran (ex-famille toast, lot S-4).
   Elle entre par la droite quand le script pose `alert--visible` ; `alert__progress` se vide
   pendant `--alert-duration` et sa fin la ferme ; le survol la fige. --- */
.alert--toast {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-2-5);
  box-shadow: var(--shadow-lg), var(--shadow-ring);
  opacity: 0;
  overflow: hidden;
  pointer-events: auto;
  transform: translateX(110%);
  transition:
    transform var(--transition-slow),
    opacity var(--transition-slow);
  will-change: transform, opacity;
}

.alert--visible {
  opacity: 1;
  transform: translateX(0);
}

.alert__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentcolor;
  opacity: 0.3;
  transform-origin: left;
  animation: alert-progress var(--alert-duration, 5s) linear forwards;
}

.alert--toast:hover .alert__progress {
  animation-play-state: paused;
}

@keyframes alert-progress {
  to {
    transform: scaleX(0);
  }
}

/* --- Tons (sortis de tone.css au passage au harness 0.13) : chaque ton pose les seules
   propriétés `--tone-*` que ce composant lit, d'après les tokens du ton. --- */

.alert--success {
  --tone-bg: var(--badge-success-bg);
  --tone-text: var(--badge-success-text);
  --tone-border: var(--color-success-border);
}

.alert--warning {
  --tone-bg: var(--badge-warning-bg);
  --tone-text: var(--badge-warning-text);
  --tone-border: var(--color-warning-border);
}

.alert--danger {
  --tone-bg: var(--badge-danger-bg);
  --tone-text: var(--badge-danger-text);
  --tone-border: var(--color-danger-border);
}

.alert--info {
  --tone-bg: var(--badge-info-bg);
  --tone-text: var(--badge-info-text);
  --tone-border: var(--color-info-border);
}