/* =============================================================
   Socle · Avatar (.sc-avatar)
   Initiales ou image, rond par défaut.
   Tailles : --xs, --s, --l, --xl (défaut : m, 40px)
   Variante : --square · Groupe : .sc-avatar-group
   ============================================================= */

.sc-avatar {
  /* Tokens de composant : tailles et variantes ne font que réassigner ceci. */
  --_avatar-size: var(--space-40);
  --_avatar-bg: var(--color-accent-subtle);
  --_avatar-text: var(--color-accent-text);
  --_avatar-font-size: var(--text-label-size);
  --_avatar-radius: var(--radius-pill);
  --_avatar-overlap: var(--space-8);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--_avatar-size);
  height: var(--_avatar-size);
  border-radius: var(--_avatar-radius);
  overflow: hidden;
  background: var(--_avatar-bg);
  color: var(--_avatar-text);
  font-family: var(--font-body);
  font-size: var(--_avatar-font-size);
  font-weight: var(--text-label-weight);
  line-height: 1;
  user-select: none;
}

/* Image : couvre toute la pastille, rayon hérité. */
.sc-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* ---- Tailles ---- */

.sc-avatar--xs {
  --_avatar-size: var(--space-24);
  --_avatar-font-size: var(--text-caption-size);
  --_avatar-overlap: var(--space-6);
}

.sc-avatar--s {
  --_avatar-size: var(--space-32);
  --_avatar-font-size: var(--text-caption-size);
  --_avatar-overlap: var(--space-6);
}

.sc-avatar--l {
  --_avatar-size: var(--space-48);
  --_avatar-font-size: var(--text-body-size);
  --_avatar-overlap: var(--space-10);
}

.sc-avatar--xl {
  --_avatar-size: var(--space-64);
  --_avatar-font-size: var(--text-h3-size);
  --_avatar-overlap: var(--space-12);
}

/* ---- Variante carrée (projets, équipes, espaces) ---- */

.sc-avatar--square {
  --_avatar-radius: var(--radius-control);
}

/* ---- Groupe à chevauchement ---- */

.sc-avatar-group {
  display: inline-flex;
  align-items: center;
}

/* Anneau de séparation, couleur de la surface porteuse. */
.sc-avatar-group .sc-avatar {
  border: var(--border-emphasis) solid var(--color-bg-surface);
}

/* Le décalage suit la taille : c'est la pastille qui porte sa
   propre valeur de chevauchement. */
.sc-avatar-group .sc-avatar + .sc-avatar {
  margin-inline-start: calc(var(--_avatar-overlap) * -1);
}

/* Pastille de débordement (« +3 ») : neutre, elle ferme la série.
   Son fond prend le cran au-dessus du fond adouci, et non le fond
   adouci lui-même : un groupe d'avatars se pose souvent dans un pied de
   carte, qui est justement peint en --color-bg-subtle, et la pastille y
   devenait exactement de la couleur de son support. Il ne restait qu'un
   « +1 » flottant sans disque, dans les deux thèmes. Ce cran-là garde
   un disque visible sur la surface comme sur la bande adoucie. */
.sc-avatar-group__overflow {
  --_avatar-bg: var(--color-bg-active);
  /* Le texte courant, pas le secondaire : sur ce fond relevé, le
     secondaire ne tenait plus que 4,07. */
  --_avatar-text: var(--color-text);
}