/* =============================================================
   Socle · Alerte (.sc-alert)
   Bannière de statut qui reste en place dans le flux.
   L'éphémère, c'est le toast ; l'alerte, elle, persiste.
   Variantes : --info, --success, --warning, --danger
   (défaut : neutre)
   ============================================================= */

.sc-alert {
  /* Tokens de composant : les variantes ne font que réassigner ceci. */
  --_alert-bg: var(--color-bg-subtle);
  /* Le filet est tracé SUR le fond adouci, pas sur la surface : en
     thème sombre --color-border et --color-bg-subtle tombent tous deux
     sur --neutral-800, et l'alerte neutre perdait son arête, seule de
     sa famille à ne plus rien avoir autour d'elle. Le cran au-dessus
     rend le filet visible dans les deux thèmes, ce que demande une
     charte qui a remplacé les ombres par des filets. */
  --_alert-border: var(--color-border-strong);
  --_alert-icon: var(--color-text-muted);
  --_alert-title: var(--color-text);

  display: flex;
  align-items: flex-start;
  gap: var(--gap-s);
  padding: var(--padding-l);
  background: var(--_alert-bg);
  border: var(--border-hairline) solid var(--_alert-border);
  border-radius: var(--radius-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: var(--leading-snug);
}

.sc-alert__icon {
  flex-shrink: 0;
  display: inline-flex;
  /* Décalage optique : aligne le centre de l'icône sur la première ligne. */
  margin-block-start: var(--space-2);
  color: var(--_alert-icon);
}

.sc-alert__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-2xs);
}

.sc-alert__title {
  font-weight: var(--text-label-weight);
  color: var(--_alert-title);
}

.sc-alert__description {
  font-size: var(--text-body-s-size);
  color: var(--color-text-secondary);
}

.sc-alert__actions {
  display: flex;
  align-items: center;
  gap: var(--gap-s);
  margin-block-start: var(--padding-2xs);
  font-size: var(--text-body-s-size);
}

/* ---- Croix de fermeture (même anatomie que le toast) ---- */

.sc-alert__close {
  /* Plancher de 24px, règle 2.5.8 de WCAG 2.2. La croix n'en fait que 22 :
     le manque se complète en ::after hors flux, donc la pastille visible et
     la boîte de la bannière ne bougent pas. */
  --_alert-close-hit: var(--space-24);

  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-2xs);
  margin: calc(var(--padding-2xs) * -1);
  border: none;
  background: transparent;
  border-radius: var(--radius-control);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--motion-fast), background-color var(--motion-fast);
}

/* La croix est posée sur --_alert-bg, qui vaut --color-bg-subtle : le
   survol neutre y serait invisible, les deux rôles pointant sur la même
   primitive. Elle prend donc les deux crans du dessus, comme la croix de
   l'étiquette qui est dans le même cas. */
.sc-alert__close:hover,
.sc-alert__close[data-state="hover"] {
  background: var(--color-bg-active);
  color: var(--color-text);
}

.sc-alert__close:active,
.sc-alert__close[data-state="active"] {
  background: var(--color-bg-subtle-active);
  color: var(--color-text);
}

/* Le débordement d'un pixel reste dans la bannière : la croix est seule à
   droite, séparée du contenu par --gap-s, donc la cible n'atteint aucun
   autre élément interactif. */
.sc-alert__close::after {
  content: '';
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  translate: -50% -50%;
  inline-size: var(--_alert-close-hit);
  block-size: var(--_alert-close-hit);
}

/* Simulation du focus clavier pour la doc (le vrai focus passe
   par :focus-visible dans base.css). */
.sc-alert__close[data-state="focus"] {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.sc-alert__close:disabled,
.sc-alert__close[data-disabled] {
  opacity: var(--opacity-disabled);
  pointer-events: none;
}

/* ---- Variantes ---- */

.sc-alert--info {
  --_alert-bg: var(--color-info-subtle);
  --_alert-border: var(--color-info-border);
  --_alert-icon: var(--color-info-text);
  --_alert-title: var(--color-info-text);
}

.sc-alert--success {
  --_alert-bg: var(--color-success-subtle);
  --_alert-border: var(--color-success-border);
  --_alert-icon: var(--color-success-text);
  --_alert-title: var(--color-success-text);
}

.sc-alert--warning {
  --_alert-bg: var(--color-warning-subtle);
  --_alert-border: var(--color-warning-border);
  --_alert-icon: var(--color-warning-text);
  --_alert-title: var(--color-warning-text);
}

.sc-alert--danger {
  --_alert-bg: var(--color-danger-subtle);
  --_alert-border: var(--color-danger-border);
  --_alert-icon: var(--color-danger-text);
  --_alert-title: var(--color-danger-text);
}