/* infobulle.css : pilule « i » et explication écrite d'une tuile.
   Aucune valeur en dur : tout vient de tokens.css. */
.tuile { position: relative; }
.tuile.info-ouverte { z-index: var(--plan-infobulle); }
.tuile-pilules {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-1);
}
.pilule-info {
  justify-content: center;
  width: var(--pilule-hauteur);
  padding: 0;
  font-family: var(--police-texte);
  font-size: var(--taille-intertitre);
  font-weight: var(--graisse-forte);
}
.pilule-info.ouverte {
  background: var(--bleu-marque);
  border-color: var(--bleu-marque);
  color: var(--texte-sur-marque);
}
.pilule-info-lettre { font-style: italic; }

/* La bulle prend la largeur intérieure de la tuile, juste sous la rangée
   d'actions : elle ne peut pas déborder de l'écran, quelle que soit sa largeur. */
.infobulle {
  position: absolute;
  left: var(--tuile-marge-interieure);
  right: var(--tuile-marge-interieure);
  top: calc(100% - var(--tuile-marge-interieure));
  z-index: var(--plan-infobulle);
  padding: var(--espace-2);
  border: var(--trait) solid var(--bleu-marque);
  border-radius: var(--rayon);
  background: var(--fond-bloc);
  box-shadow: var(--ombre-tuile-survol);
  color: var(--texte-principal);
  font-size: var(--taille-texte);
  line-height: var(--interligne);
  overflow-wrap: anywhere;
}
.infobulle[hidden] { display: none; }