.bille-deco {
  position: absolute;
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  opacity: 0.7;
  top: 50%;
  margin-top: -9px;
  pointer-events: none;
  box-shadow: inset 2px -2px 4px rgba(0, 0, 0, 0.5), inset -3px 3px 5px rgba(255, 255, 255, 0.3);
}

.bille-rouge { right: 62px; background: radial-gradient(circle at 34% 30%, #ff8a8a 0%, #e23b3b 45%, #8c1f1f 100%); }
.bille-jaune { right: 38px; background: radial-gradient(circle at 34% 30%, #ffe9a3 0%, #f2c53d 45%, #9c7c12 100%); }
.bille-noire { right: 14px; background: radial-gradient(circle at 34% 30%, #6e6e80 0%, #26262f 45%, #0a0a0f 100%); }

@media (max-width: 760px) {
  .bille-deco { display: none; }
}