/* ------------------------------------------------------------------
   olecranon-fracture.css — ajustements de style propres à la maquette
   « fracture de l'olécrane ». La charte générale (coquille UI, scène 3D,
   panneau, responsive) vient de /core/css/ui.css. Les pictogrammes et la
   classification reprennent ceux de la clavicule.
------------------------------------------------------------------ */

/* les types de fracture : pictogrammes en grille, comme les planches de classification */
.types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 4px; }
.types.two { grid-template-columns: repeat(2, 1fr); }
.type {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 4px 5px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface); color: var(--ink-2); cursor: pointer;
  font: 500 11.5px/1.15 "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif; text-align: center;
  transition: border-color .15s, background .15s;
}
.type svg { width: 100%; max-width: 74px; height: auto; overflow: visible; }
.type svg .b { fill: #ecdfc6; stroke: #c9b896; stroke-width: 1; stroke-linejoin: round; }
.type svg .h { fill: #f4eee2; stroke: #d6c9b0; stroke-width: 1; }
.type svg .w { fill: #f2c9c2; stroke: none; }
.type svg .f { fill: none; stroke: #c0392b; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.type:hover { border-color: var(--accent); background: var(--surface-3); }
.type:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.type.is-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--ink); }

/* la classification, lue en direct */
.classif {
  margin: 10px 0 4px; padding: 6px 9px; border-radius: 8px;
  background: var(--surface-3); color: var(--ink-2);
  font: 500 12.5px/1.3 "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif;
}
.classif strong { color: var(--ink); font-weight: 600; }
#gap-box .slider:first-child { margin-top: 10px; }

/* « Plier le coude » : la pastille passe de play à pause pendant le mouvement */
#btn-flex-play { margin-top: 10px; }
#btn-flex-play .ico-pause { display: none; }
#btn-flex-play.is-playing .ico-play { display: none; }
#btn-flex-play.is-playing .ico-pause { display: block; }