/* Géométrie du boulier, sans couleur : chaque page donne ses couleurs par variables
   (--sb-tige, --sb-barre, --sb-point) et par les classes .bd-* des boules. */
/* --g : la course d'une boule (le vide qu'elle traverse). Une boule entière par défaut ;
   une page peut la raccourcir quand l'écran manque de hauteur, sans toucher à la taille des boules. */
.sb { --w: 60px; --b: 44px; --bar: 14px; --g: var(--b); width: 100%; display: flex; justify-content: center; }
.sb-frame { position: relative; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.sb-rods { display: flex; position: relative; }
.sb-rod { position: relative; width: var(--w); height: calc(var(--b) * 5 + var(--g) * 2 + var(--bar)); }
.sb-rod::before { content: ""; position: absolute; left: 50%; top: 3px; bottom: 3px; width: var(--sb-tige-l, 5px); transform: translateX(-50%); border-radius: 3px; background: var(--sb-tige); }
.sb-bar { position: absolute; left: 0; right: 0; top: calc(var(--b) + var(--g)); height: var(--bar); background: var(--sb-barre); z-index: 0; }
.sb-rod:first-child .sb-bar { border-radius: 7px 0 0 7px; }
.sb-rod:last-child .sb-bar { border-radius: 0 7px 7px 0; }
/* La barre est faite d'un morceau par tige : chaque morceau mord d'un pixel sur le précédent,
   sinon une couture claire apparaît entre deux tiges quand le boulier tombe sur un demi-pixel. */
.sb-rod + .sb-rod .sb-bar { left: -1px; }
.sb-dot { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--sb-point); }
.sb-bead { position: absolute; left: 50%; width: calc(var(--w) * .96); height: var(--b); margin-left: calc(var(--w) * -.48); padding: 0; border: 0; background: none; cursor: pointer; z-index: 1; transition: top .28s var(--pop, ease); -webkit-tap-highlight-color: transparent; }
.sb-bead svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sb-bead path { vector-effect: non-scaling-stroke; }
.sb-bead .bd-arete, .sb-bead .bd-reflet, .sb-bead .bd-trait { fill: none; }
.sb-bead .bd-reflet { stroke-linecap: round; }
.sb-bead:focus-visible { outline: 3px solid var(--focus); outline-offset: 0; border-radius: 40%; }
@media (prefers-reduced-motion: reduce) { .sb-bead { transition: none; } }