/* ============================================================================
   KIT — parts/pastille.css        Dépend de : tokens.css, motion.css

   Une pastille dit un ÉTAT, pas une catégorie. Toujours un point + un mot :
   la couleur seule ne suffit pas (daltonisme, impression, contraste).

     <span class="pastille ok"><span class="point"></span>En ligne</span>

   États : ok · repos · alerte · danger · accent
   ========================================================================= */

.pastille {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;

  font-family: var(--f-mono);
  font-size: var(--t-100);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
  white-space: nowrap;

  padding: 0.3rem 0.6rem;
  border: 1px solid var(--repos-trait);
  border-radius: var(--r-pilule);
  background: var(--repos-voile);
  color: var(--repos);
}

.point {
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* Le halo : un anneau qui s'élargit et s'efface. Réservé à `ok`, parce que
   c'est le seul état réellement vivant — un serveur qui répond en ce moment. */
.pastille.ok .point::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: currentColor;
  animation: halo 2.4s var(--doux) infinite;
}

.pastille.ok     { color: var(--succes); background: var(--succes-voile); border-color: var(--succes-trait); }
.pastille.alerte { color: var(--alerte); background: var(--alerte-voile); border-color: var(--alerte-trait); }
.pastille.danger { color: var(--danger); background: var(--danger-voile); border-color: var(--danger-trait); }
.pastille.accent { color: var(--laiton); background: var(--laiton-voile); border-color: var(--laiton-trait); }

/* Éteint ou verrouillé : creux, pas plein. Le point devient un cercle vide. */
.pastille.repos .point { background: none; border: 1px solid currentColor; }
.pastille.repos { border-style: dashed; }

/* ── Étiquette de rubrique : une information, pas un état ─────────────────
   Prend la couleur du pion de sa rubrique via --teinte.                     */
.etiquette-rubrique {
  --teinte: var(--pion-sapin);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--f-mono);
  font-size: var(--t-100);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--encre-2);
}
.etiquette-rubrique .pion {
  width: 9px;
  height: 9px;
  border-radius: 2.5px;
  background: var(--teinte);
  flex-shrink: 0;
}

/* ── Compteur : un nombre qu'on peut mettre en avant ─────────────────────── */
.compteur {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
}
.compteur .valeur {
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: var(--t-800);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.compteur .unite {
  font-size: var(--t-100);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--encre-3);
}
/* Le JS ajoute cette classe quand la valeur vient de changer. */
.compteur .valeur.change { animation: battre var(--ample) var(--rebond); }