/* ------------------------------------------------------------------
   clavicle-fracture.css — ajustements de style propres à la maquette
   « fractures de la clavicule ». La charte générale (coquille UI, scène
   3D, panneau, responsive) vient de /core/css/ui.css.
------------------------------------------------------------------ */

/* titre de sous-groupe dans le volet des lésions */
.field-label { display: block; margin: 4px 0 6px; font-size: 13px; font-weight: 500; }

/* la petite clavicule vue de dessus (siège de la fracture) : os clair par
   zone ; la zone choisie se teinte, le trait est une ligne brisée rouge */
.site { display: flex; justify-content: center; margin: 0 0 6px; }
.site svg { width: 100%; max-width: 260px; height: auto; overflow: visible; font-family: "IBM Plex Sans", sans-serif; }
.site .bone { fill: #ecdfc6; stroke: #c9b896; stroke-width: 1; transition: fill .15s; }
.site .zone { cursor: pointer; }
.site .zone:hover .bone, .site .zone:focus-visible .bone { fill: #dfd0b1; }
.site .zone:focus-visible { outline: none; }
.site .zone:focus-visible .bone { stroke: var(--accent); stroke-width: 2; }
.site .zone.is-on .bone { fill: color-mix(in srgb, var(--accent) 26%, #ecdfc6); stroke: var(--accent); }
.site .zone.is-off, .site .zone.is-soon { cursor: default; }
.site .zone.is-off .bone { fill: #f1ebdf; stroke: #ddd1bb; stroke-dasharray: 3 2; }
.site .zone.is-soon .bone { fill: #f1ebdf; stroke: #d6c9b0; }
.site .zone.is-off:hover .bone, .site .zone.is-soon:hover .bone { fill: #f1ebdf; }
.site .zone-label { fill: var(--ink-2); font-size: 10.5px; font-weight: 600; letter-spacing: .02em; pointer-events: none; paint-order: stroke; stroke: #f6efe2; stroke-width: 2.5px; stroke-linejoin: round; }
.site .zone.is-on .zone-label { fill: var(--accent); }
.site .mark { fill: none; stroke: #c0392b; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; pointer-events: none; }
.site .compass { fill: var(--ink-3); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; pointer-events: none; }

/* les types de fracture : pictogrammes en grille, comme les planches AO */
.types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 4px; }
.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: 64px; height: auto; }
.type svg .b { fill: #ecdfc6; stroke: #c9b896; 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 svg .dash { stroke-dasharray: 2 2; opacity: .7; }
.type svg .l { fill: none; stroke: #8fb89b; stroke-width: 2.2; stroke-linecap: round; }
.type svg .l.torn { stroke: #c0392b; }
.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; }
#disp-box .slider:first-child { margin-top: 10px; }