/**
 * Compteur d'articles du panier.
 *
 * Feuille autonome, chargée sur toutes les pages puisque le compteur vit
 * dans l'en-tête. Tout se règle dans le bloc de variables ci-dessous.
 */

.cyl-compte-hote {
  --cyl-c-fond: #008b91;
  --cyl-c-texte: #ffffff;
  --cyl-c-diametre: 18px;
  --cyl-c-taille-texte: 10px;

  /* Décalage de la pastille flottante par rapport au coin de l'icône. */
  --cyl-c-haut: -6px;
  --cyl-c-droite: -10px;

  display: inline-flex;
  line-height: 1;
}

.cyl-compte {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--cyl-c-diametre);
  height: var(--cyl-c-diametre);
  padding: 0 5px;
  background: var(--cyl-c-fond);
  border-radius: 999px;
  font-size: var(--cyl-c-taille-texte);
  font-weight: 700;
  line-height: 1;
  color: var(--cyl-c-texte);
  font-variant-numeric: tabular-nums;
}

/* Panier vide : rien à annoncer, la pastille disparaît. */
.cyl-compte:not(.est-rempli) {
  display: none;
}

.cyl-compte-hote--toujours .cyl-compte {
  display: inline-flex;
}

/*
 * En exposant sur l'icône. Le parent qui contient l'icône doit être en
 * position: relative, sinon la pastille se cale sur un ancêtre plus haut.
 */
.cyl-compte-hote--flottant {
  position: absolute;
  top: var(--cyl-c-haut);
  right: var(--cyl-c-droite);
  z-index: 2;
  pointer-events: none;
}

.cyl-compte__nombre {
  display: block;
  line-height: 1;
}

/* Le chiffre seul ne dit rien à un lecteur d'écran. */
.cyl-compte__lecture {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}