/* =============================================================
   Socle · État vide (.sc-empty)
   Zone centrée : pastille d'icône, titre, explication, actions.
   Variantes : --danger (l'affichage a échoué), --bordered
   (emplacement à remplir), --compact.
   ============================================================= */

.sc-empty {
  /* Tokens de composant : les variantes ne font que réassigner ceci. */
  --_empty-padding: var(--padding-4xl);
  --_empty-gap: var(--gap-m);
  --_empty-media-size: var(--space-48);
  --_empty-icon-size: var(--space-24);
  --_empty-media-bg: var(--color-bg-subtle);
  --_empty-media-icon: var(--color-text-muted);
  --_empty-title-size: var(--text-h4-size);
  --_empty-border: transparent;
  --_empty-border-width: var(--border-hairline);
  /* Largeur de lecture : l'explication ne s'étale pas. */
  --_empty-measure: 26rem;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--_empty-gap);
  padding: var(--_empty-padding);
  border: var(--_empty-border-width) dashed var(--_empty-border);
  border-radius: var(--radius-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  text-align: center;
}

/* ---- Pastille d'icône ----
   Taille structurelle, sur le modèle de l'avatar : c'est une
   dimension intrinsèque, pas un rôle du système. */

.sc-empty__media {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--_empty-media-size);
  height: var(--_empty-media-size);
  border-radius: var(--radius-pill);
  background: var(--_empty-media-bg);
  color: var(--_empty-media-icon);
}

/* L'icône se cale sur la pastille : le balisage reste le même
   d'une taille à l'autre. */
.sc-empty__media svg {
  width: var(--_empty-icon-size);
  height: var(--_empty-icon-size);
}

/* ---- Texte ---- */

.sc-empty__content {
  display: flex;
  flex-direction: column;
  gap: var(--gap-2xs);
  max-width: var(--_empty-measure);
}

.sc-empty__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--_empty-title-size);
  font-weight: var(--text-h4-weight);
  line-height: var(--leading-snug);
  color: var(--color-text);
}

.sc-empty__description {
  margin: 0;
  font-size: var(--text-body-s-size);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

/* ---- Actions ----
   Les boutons portent leurs propres états : la zone, elle, ne
   fait que les aligner. */

.sc-empty__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--gap-s);
}

/* ---- L'affichage a échoué ----
   Seule la pastille bascule : le titre reste du texte de titre,
   sinon la zone se lit comme une alerte. */

.sc-empty--danger {
  --_empty-media-bg: var(--color-danger-subtle);
  --_empty-media-icon: var(--color-danger-text);
}

/* ---- Emplacement à remplir ----
   Le trait tireté dit que la place existe et attend son contenu. */

.sc-empty--bordered {
  --_empty-border: var(--color-border);
}

/* ---- Compact ----
   Pour tenir dans une carte, un panneau ou une colonne de
   tableau de bord. */

.sc-empty--compact {
  --_empty-padding: var(--padding-2xl);
  --_empty-gap: var(--gap-s);
  --_empty-media-size: var(--space-32);
  --_empty-icon-size: var(--space-16);
  --_empty-title-size: var(--text-label-size);
}