/* ==========================================================================
   Avatar (.avatar) — Pastille d'un parent (initiale sur sa couleur)

   Structure BEM :
   - .avatar                 → Bloc racine (cercle, 26 px, initiale en gras)
   - .avatar__initials       → Élément initiale (texte)
   - .avatar--p1 / --p2      → Couleur du parent 1 / 2 (--parent-N, --parent-N-ink)
   - .avatar--none           → Aucun parent : hachure « À attribuer »
   - .avatar--xs             → 22 px (rayon 6 en carré)
   - .avatar--sm             → 24 px
   - .avatar--md             → 26 px (défaut : pastille du compte dans l'en-tête)
   - .avatar--lg             → 36 px (en-tête du menu du compte)
   - .avatar--square         → Carré arrondi (rayon 8) : compteur, légende, choix du parent
   - .avatar--ring           → Anneau surface de 2 px (pastille posée sur une couleur)

   Usage :
   <span class="avatar avatar--p1" aria-hidden="true">C</span>
   <span class="avatar avatar--p2 avatar--square avatar--sm" aria-hidden="true">T</span>

   Accessibilité :
   - La pastille double toujours un nom écrit à côté : aria-hidden="true".
     Seule, elle porte role="img" et un aria-label (« Camille »).
   - Le contraste de l'initiale est garanti par ColorCore.ink (≥ 4,5:1).

   Copie de la bibliothèque dev-project-suite, réduite à l'usage de la
   maquette (projet/design/ : chip() et meSw()) : pas d'image ni d'indicateur
   de statut, deux formes (cercle pour le compte et l'auteur d'une
   modification, carré arrondi pour la garde), couleurs des parents posées à
   l'exécution. Réécrite sans imbrication CSS (cible iOS 16.4) et sans bloc
   sombre propre.
   ========================================================================== */

.avatar {
  --avatar-size: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  box-sizing: border-box;
  width: var(--avatar-size);
  height: var(--avatar-size);

  background-color: var(--color-bg);
  border-radius: var(--radius-full);
  color: var(--color-text-primary);

  font-family: var(--font-body);
  font-size: calc(var(--avatar-size) / 2);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  vertical-align: middle;
  user-select: none;
}

.avatar__initials {
  line-height: 1;
}

/* --------------------------------------------------------------------------
   COULEURS DES PARENTS
   -------------------------------------------------------------------------- */
.avatar--p1 {
  background-color: var(--parent-1);
  color: var(--parent-1-ink);
}

.avatar--p2 {
  background-color: var(--parent-2);
  color: var(--parent-2-ink);
}

/* Aucun parent : même hachure que les jours « À attribuer » */
.avatar--none {
  background: repeating-linear-gradient(135deg, transparent 0 3px, var(--cal-hole-hatch) 3px 4.5px);
  box-shadow: inset 0 0 0 1.5px var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   TAILLES
   -------------------------------------------------------------------------- */
.avatar--xs { --avatar-size: 22px; }
.avatar--sm { --avatar-size: 24px; }
.avatar--md { --avatar-size: 26px; }
.avatar--lg { --avatar-size: 36px; }

/* --------------------------------------------------------------------------
   FORMES
   -------------------------------------------------------------------------- */
.avatar--square {
  border-radius: 8px;
}

.avatar--square.avatar--xs {
  border-radius: var(--radius-sm);
  font-size: 11px;
}

.avatar--ring {
  box-shadow: 0 0 0 2px var(--color-surface);
}