/* mu-ui.css -- composants communs aux quatre produits web (A player, B
   catalogue, C-1 outil d'analyse, C-2 rapport publie).

   SOURCE : Docs/ui-kit.html -- base (lignes 165-193) et composants (223-597),
   copies VERBATIM. La mise en page de la demo du kit (topbar, .page, .g2/.g3)
   et son panneau de reglage ne sont PAS repris : ils appartiennent a la planche,
   pas au produit. Chaque page apporte sa propre coquille.

   Depend de tokens.css, a charger avant.
*/

/* ═══════════════════════════════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════════════════════════════ */
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  font-family: var(--font); font-size: var(--fs-base); font-weight: 400;
  background: var(--bg-page); color: var(--ink);
  -webkit-font-smoothing: antialiased;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
h1,h2,h3,h4 { margin:0; font-weight:600; letter-spacing:-.01em; }
p { margin:0; }
code { font-family: var(--font-mono); font-size: .92em; }

/* ── Barre de défilement : piste cachée, curseur au survol ────────── */
.scroll { overflow: auto; scrollbar-width: thin; scrollbar-color: transparent transparent;
          transition: scrollbar-color var(--dur) var(--ease); }
.scroll:hover, .scroll:focus-within { scrollbar-color: var(--scroll-thumb) transparent; }
.scroll::-webkit-scrollbar { width: 11px; height: 11px; }
.scroll::-webkit-scrollbar-track { background: transparent; }
.scroll::-webkit-scrollbar-thumb {
  background: transparent; border: 3px solid transparent;
  background-clip: content-box; border-radius: var(--r-pill);
  transition: background var(--dur) var(--ease);
}
.scroll:hover::-webkit-scrollbar-thumb { background: var(--scroll-thumb); background-clip: content-box; }
.scroll::-webkit-scrollbar-thumb:hover { background: var(--ink-muted); background-clip: content-box; }
.scroll::-webkit-scrollbar-corner { background: transparent; }
/* ═══════════════════════════════════════════════════════════════════
   COMPOSANTS
   ═══════════════════════════════════════════════════════════════════ */

/* ── Carte / panneau ─────────────────────────────────────────────── */
.card {
  background:var(--bg-surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:var(--s4); box-shadow:var(--shadow-sm);
}
.card--flat { box-shadow:none; }
.card-title { font-size:var(--fs-md); font-weight:600; margin-bottom:var(--s3); }

/* ── Boutons ─────────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  height:36px; padding:0 var(--s4); border-radius:var(--r-btn);
  font:inherit; font-size:var(--fs-md); font-weight:500; line-height:1;
  border:1px solid transparent; background:transparent; color:var(--ink);
  cursor:pointer; white-space:nowrap; user-select:none;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:active { transform:translateY(1px); }
.btn:focus-visible { outline:2px solid var(--info); outline-offset:2px; }
.btn[disabled] { opacity:.45; pointer-events:none; }

.btn--primary { background:var(--primary); color:var(--ink-invert); }
.btn--primary:hover { background:var(--primary-hi); }
.btn--info    { background:var(--info); color:#fff; }
.btn--info:hover { background:var(--info-hi); }
.btn--danger  { background:var(--danger); color:#fff; }
.btn--danger:hover { background:var(--danger-hi); }

.btn--outline { border-color:var(--border); background:var(--bg-surface); }
.btn--outline:hover { background:var(--bg-hover); border-color:var(--ink-muted); }
.btn--ghost:hover { background:var(--bg-hover); }
.btn--link { color:var(--info); padding:0; height:auto; }
.btn--link:hover { text-decoration:underline; }

.btn--sm { height:28px; padding:0 var(--s3); font-size:var(--fs-sm); border-radius:8px; }
.btn--lg { height:44px; padding:0 var(--s5); font-size:var(--fs-base); border-radius:12px; }
.btn--icon { width:36px; padding:0; }
.btn--icon.btn--sm { width:28px; }
.btn--pill { border-radius:var(--r-pill); }

.btn-group { display:inline-flex; border:1px solid var(--border); border-radius:var(--r-btn);
             overflow:hidden; background:var(--bg-surface); }
.btn-group .btn { border-radius:0; border:0; border-right:1px solid var(--border); height:34px; }
.btn-group .btn:last-child { border-right:0; }
.btn-group .btn[aria-pressed="true"] { background:var(--primary-soft); color:var(--primary-hi); font-weight:600; }

/* ── Champs ──────────────────────────────────────────────────────── */
.field { display:flex; flex-direction:column; gap:6px; }
.field > label { font-size:var(--fs-sm); font-weight:500; color:var(--ink-2); }
.input, .select, .textarea {
  height:36px; padding:0 var(--s3); font:inherit; font-size:var(--fs-md);
  color:var(--ink); background:var(--bg-surface);
  border:1px solid var(--border); border-radius:var(--r-field);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  width:100%;
}
.textarea { height:auto; padding:var(--s2) var(--s3); resize:vertical; min-height:80px; line-height:1.5; }
.input:hover, .select:hover, .textarea:hover { border-color:var(--ink-muted); }
.input:focus, .select:focus, .textarea:focus {
  outline:none; border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-soft);
}
.input::placeholder { color:var(--ink-muted); }
.input[readonly] { background:var(--bg-sunken); color:var(--ink-2); }
.field--error .input { border-color:var(--danger); }
.field--error .msg { font-size:var(--fs-xs); color:var(--danger); }
.hintmsg { font-size:var(--fs-xs); color:var(--ink-muted); }
.select { appearance:none; padding-right:30px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 16px) 16px, calc(100% - 11px) 16px;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat; }

/* Édition en place — double-clic ou clic droit (convention Stature) */
.editable { display:inline-flex; align-items:center; gap:6px; padding:2px 6px;
            border-radius:6px; border:1px dashed transparent; cursor:text; }
.editable:hover { background:var(--bg-hover); border-color:var(--border); }

/* ── Interrupteur / cases ────────────────────────────────────────── */
.switch { display:inline-flex; align-items:center; gap:var(--s2); cursor:pointer; user-select:none; font-size:var(--fs-md); }
.switch input { position:absolute; opacity:0; width:0; height:0; }
.switch .track { width:38px; height:22px; border-radius:var(--r-pill);
                 background:var(--gray-200); position:relative;
                 transition:background var(--dur) var(--ease); flex:none; }
:root[data-theme="dark"] .switch .track { background:rgba(255,255,255,.16); }
.switch .track::after { content:""; position:absolute; top:3px; left:3px; width:16px; height:16px;
                        border-radius:var(--r-pill); background:#fff; box-shadow:var(--shadow-sm);
                        transition:transform var(--dur) var(--ease); }
.switch input:checked + .track { background:var(--primary); }
.switch input:checked + .track::after { transform:translateX(16px); }
.switch input:focus-visible + .track { outline:2px solid var(--info); outline-offset:2px; }

.check { display:inline-flex; align-items:center; gap:var(--s2); cursor:pointer; font-size:var(--fs-md); }
.check input { width:16px; height:16px; accent-color:var(--primary); margin:0; }

/* ── Onglets ─────────────────────────────────────────────────────── */
.tabs { display:flex; gap:var(--s1); border-bottom:1px solid var(--border); }
.tab { padding:var(--s2) var(--s4); font-size:var(--fs-md); font-weight:500; color:var(--ink-2);
       background:none; border:0; border-bottom:2px solid transparent; cursor:pointer;
       border-radius:var(--r-sm) var(--r-sm) 0 0; transition:all var(--dur) var(--ease); }
.tab:hover { background:var(--bg-hover); color:var(--ink); }
.tab[aria-selected="true"] { color:var(--primary-hi); border-bottom-color:var(--primary); font-weight:600; }

/* ── Étiquettes d'état ───────────────────────────────────────────── */
.badge { display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 10px;
         border-radius:var(--r-pill); font-size:var(--fs-xs); font-weight:600; letter-spacing:.02em; }
.badge::before { content:""; width:6px; height:6px; border-radius:var(--r-pill); background:currentColor; }
.badge--ok    { background:var(--primary-soft); color:var(--primary-hi); }
.badge--info  { background:var(--info-soft);    color:var(--info-hi); }
.badge--warn  { background:var(--warn-soft);    color:var(--warn-hi); }
.badge--error { background:var(--danger-soft);  color:var(--danger-hi); }
.badge--muted { background:var(--bg-sunken);    color:var(--ink-muted); }

/* ── Journal / notifications ─────────────────────────────────────── */
.log { font-family:var(--font-mono); font-size:var(--fs-sm); border-radius:var(--r); overflow:hidden;
       border:1px solid var(--border); }
.log-line { display:flex; gap:var(--s3); align-items:flex-start; padding:7px var(--s3);
            border-bottom:1px solid var(--border-soft); background:var(--bg-surface); }
.log-line:last-child { border-bottom:0; }
.log-line .t { color:var(--ink-muted); flex:none; }
.log-line .ic { flex:none; width:14px; text-align:center; font-family:var(--font); }
.log-line--ok    { background:var(--primary-soft); } .log-line--ok .ic    { color:var(--primary-hi); }
.log-line--info  { background:var(--info-soft);    } .log-line--info .ic  { color:var(--info-hi); }
.log-line--warn  { background:var(--warn-soft);    } .log-line--warn .ic  { color:var(--warn-hi); }
.log-line--error { background:var(--danger-soft);  } .log-line--error .ic { color:var(--danger-hi); }

.toast { display:flex; align-items:center; gap:var(--s3); padding:var(--s3) var(--s4);
         background:var(--bg-raised); border:1px solid var(--border); border-left:3px solid var(--ink-muted);
         border-radius:var(--r); box-shadow:var(--shadow); font-size:var(--fs-md); }
.toast--ok    { border-left-color:var(--primary); }
.toast--error { border-left-color:var(--danger); }
.toast--warn  { border-left-color:var(--warn); }

/* ── Popup ───────────────────────────────────────────────────────── */
.popup-demo { position:relative; background:var(--bg-sunken); border-radius:var(--r-lg);
              padding:var(--s5); border:1px solid var(--border-soft); }
.popup { width:min(460px,100%); margin:0 auto; background:var(--bg-surface);
         border-radius:var(--r-lg); box-shadow:var(--shadow-lg-t); border:1px solid var(--border);
         overflow:hidden; }
.popup-head { display:flex; align-items:flex-start; gap:var(--s3); padding:var(--s4) var(--s4) var(--s3); }
.popup-head h3 { font-size:var(--fs-lg); }
.popup-head .sub2 { font-size:var(--fs-sm); color:var(--ink-muted); margin-top:2px; }
.popup-body { padding:0 var(--s4) var(--s4); display:flex; flex-direction:column; gap:var(--s3); }
.popup-foot { display:flex; justify-content:flex-end; gap:var(--s2);
              padding:var(--s3) var(--s4); background:var(--bg-sunken); border-top:1px solid var(--border-soft); }

/* ── Carte mouvement (270px, convention Stature) ─────────────────── */
.movecard { width:270px; background:var(--bg-surface); border:1px solid var(--border);
            border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm);
            transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); cursor:pointer; }
.movecard:hover { box-shadow:var(--shadow); transform:translateY(-2px); }
.movecard .thumb { height:150px; background:var(--viewport-bg); position:relative;
                   display:flex; align-items:center; justify-content:center; color:var(--ink-muted); font-size:var(--fs-xs); }
.movecard .thumb .fav { position:absolute; top:8px; right:8px; }
.movecard .meta { padding:var(--s3); }
.movecard .meta h4 { font-size:var(--fs-md); font-weight:600; }
.movecard .meta .tags { display:flex; gap:6px; margin-top:var(--s2); flex-wrap:wrap; }

/* ── Tableau ─────────────────────────────────────────────────────── */
table.tbl { width:100%; border-collapse:separate; border-spacing:0; font-size:var(--fs-md); }
.tbl th { text-align:left; font-weight:600; font-size:var(--fs-xs); text-transform:uppercase;
          letter-spacing:.06em; color:var(--ink-muted); padding:var(--s2) var(--s3);
          border-bottom:1px solid var(--border); white-space:nowrap; }
/* Hauteur de ligne inchangée : les 3 px de bordure transparente remplacent
   3 px de padding. Seul le fond recule — la zone cliquable reste pleine. */
.tbl td { padding:5px var(--s3);
          border-top:var(--sel-inset) solid transparent;
          border-bottom:var(--sel-inset) solid transparent;
          background-clip:padding-box;
          box-shadow:inset 0 -1px 0 var(--border-soft); }
/* background-color et non la propriété raccourcie `background`, qui
   réinitialiserait background-clip à border-box et annulerait le retrait. */
.tbl tbody tr:hover td                 { background-color:var(--bg-hover); }
.tbl tbody tr[aria-selected="true"] td { background-color:var(--primary-soft); }
.tbl tbody td:first-child { border-radius:var(--sel-radius) 0 0 var(--sel-radius); }
.tbl tbody td:last-child  { border-radius:0 var(--sel-radius) var(--sel-radius) 0; }
.num { font-family:var(--font-mono); text-align:right; }

/* ── Arbre d'articulations ───────────────────────────────────────── */
/* Interligne serré : 24 px de hauteur de ligne au lieu de 32 (−25 %), sans
   toucher aux 6 px de retrait de sélection. C'est le rembourrage et
   l'interlignage qui se resserrent, pas les bordures transparentes. */
.tree { font-size:var(--fs-md); line-height:16px; max-height:260px; }
.tree ul { list-style:none; margin:0; padding-left:14px; }
.tree > ul { padding-left:0; }
/* Même règle que le tableau : bordures verticales transparentes + clip,
   pour que deux lignes sélectionnées d'affilée ne forment pas un pavé. */
.tree li > .node { display:flex; align-items:center; gap:var(--s2);
                   padding:1px var(--s2);
                   border-top:var(--sel-inset) solid transparent;
                   border-bottom:var(--sel-inset) solid transparent;
                   background-clip:padding-box;
                   border-radius:var(--sel-radius); cursor:pointer; }
.tree li > .node:hover { background-color:var(--bg-hover); }
.tree li > .node[aria-selected="true"] { background-color:var(--primary-soft);
                                         color:var(--primary-hi); font-weight:600; }
.tree .swatch { width:9px; height:9px; border-radius:2px; flex:none; }
.tree .caret { width:12px; color:var(--ink-muted); font-size:10px; flex:none; }

/* ── Curseurs ────────────────────────────────────────────────────── */
input[type=range] { -webkit-appearance:none; appearance:none; width:100%; height:20px; background:transparent; }
input[type=range]::-webkit-slider-runnable-track { height:4px; border-radius:var(--r-pill); background:var(--border); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:16px; margin-top:-6px;
  border-radius:var(--r-pill); background:var(--info); border:2px solid var(--bg-surface); box-shadow:var(--shadow-sm); cursor:grab; }
input[type=range]::-moz-range-track { height:4px; border-radius:var(--r-pill); background:var(--border); }
input[type=range]::-moz-range-thumb { width:16px; height:16px; border-radius:var(--r-pill);
  background:var(--info); border:2px solid var(--bg-surface); cursor:grab; }

/* Curseur d'intervalle (min/max) */
.minmax { position:relative; height:26px; }
.minmax .bar { position:absolute; top:11px; left:0; right:0; height:4px;
               background:var(--border); border-radius:var(--r-pill); }
.minmax .sel { position:absolute; top:11px; height:4px; background:var(--info);
               border-radius:var(--r-pill); left:22%; right:28%; }
.minmax .h { position:absolute; top:5px; width:16px; height:16px; border-radius:var(--r-pill);
             background:var(--info); border:2px solid var(--bg-surface); box-shadow:var(--shadow-sm); cursor:ew-resize; }
.minmax .h.a { left:calc(22% - 8px); } .minmax .h.b { left:calc(72% - 8px); }
.minmax .play { position:absolute; top:2px; left:calc(46% - 10px); width:20px; height:20px;
                border-radius:var(--r-pill); background:var(--primary); border:3px solid var(--bg-surface);
                box-shadow:var(--shadow-sm); cursor:grab; }

/* ── Vue 3D + transport ──────────────────────────────────────────── */
.viewport { position:relative; aspect-ratio:16/9; border-radius:var(--r-lg); overflow:hidden;
            background:var(--viewport-bg); border:1px solid var(--border);
            background-image:
              linear-gradient(var(--chart-grid) 1px, transparent 1px),
              linear-gradient(90deg, var(--chart-grid) 1px, transparent 1px);
            background-size:40px 40px; }
.viewport .center { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
                    color:var(--ink-muted); font-size:var(--fs-sm); }
.vp-overlay { position:absolute; display:flex; gap:var(--s2); }
.vp-overlay.tl { top:var(--s3); left:var(--s3); }
.vp-overlay.tr { top:var(--s3); right:var(--s3); }
.vp-chip { height:30px; display:inline-flex; align-items:center; gap:6px; padding:0 10px;
           border-radius:var(--r-pill); font-size:var(--fs-xs); font-weight:500;
           background:color-mix(in srgb, var(--bg-surface) 82%, transparent);
           backdrop-filter:blur(8px); border:1px solid var(--border); color:var(--ink); }
.transport { display:flex; align-items:center; gap:var(--s3); padding:var(--s3);
             background:var(--bg-surface); border:1px solid var(--border); border-top:0;
             border-radius:0 0 var(--r-lg) var(--r-lg); }
.transport .time { font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--ink-2); flex:none; }
.transport .grow { flex:1; }

/* ── Spécimen de squelette ───────────────────────────────────────── */
.spec { border:1px solid var(--border); border-radius:var(--r); overflow:hidden;
        background:var(--dark-bg); }
.spec svg { display:block; }
.spec .cap { display:flex; align-items:center; gap:6px; padding:6px var(--s3);
             font-size:var(--fs-xs); color:#9fb0a8; border-top:1px solid rgba(255,255,255,.06); }
.spec .cap b { color:#e8efe4; font-weight:500; }
.spec .cap .k { margin-left:auto; font-family:var(--font-mono); font-size:10px; opacity:.7; }

/* ── Barre d'outils ──────────────────────────────────────────────── */
.toolbar { display:flex; align-items:center; gap:var(--s2); padding:var(--s2);
           background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--r); }
.toolbar .sep { width:1px; height:22px; background:var(--border); margin:0 var(--s1); }

/* ── Touches ─────────────────────────────────────────────────────── */
kbd { font-family:var(--font-mono); font-size:11px; line-height:1; padding:3px 6px;
      border-radius:5px; background:var(--bg-sunken); border:1px solid var(--border);
      box-shadow:0 1px 0 var(--border); color:var(--ink-2); white-space:nowrap; }

/* ── Info-bulle ──────────────────────────────────────────────────── */
.tip { display:inline-block; max-width:260px; padding:6px 10px; border-radius:var(--r-sm);
       background:var(--gray-900); color:#fff; font-size:var(--fs-xs); line-height:1.5;
       box-shadow:var(--shadow); }
:root[data-theme="dark"] .tip { background:#3b4455; }
.tip--rich { padding:8px 10px; }
.tip--rich .t { font-weight:600; font-size:var(--fs-sm); display:flex; align-items:center; gap:var(--s3); }
.tip--rich .t kbd { margin-left:auto; background:rgba(255,255,255,.12);
                    border-color:rgba(255,255,255,.18); color:#fff; box-shadow:none; }
.tip--rich .d { opacity:.78; margin-top:3px; }
#htip { position:fixed; z-index:90; pointer-events:none; opacity:0;
        transition:opacity 100ms linear; }

/* ── Menu contextuel ─────────────────────────────────────────────── */
.menu { min-width:216px; padding:5px; font-size:var(--fs-md);
        background:var(--bg-raised); border:1px solid var(--border);
        border-radius:var(--r); box-shadow:var(--shadow-lg-t); }
.menu-label { padding:5px var(--s2) 3px; font-size:10px; text-transform:uppercase;
              letter-spacing:.06em; color:var(--ink-muted); }
.menu-item { display:flex; align-items:center; gap:var(--s2); height:30px;
             padding:0 var(--s2); border-radius:var(--sel-radius);
             cursor:pointer; color:var(--ink); user-select:none; }
.menu-item:hover { background:var(--bg-hover); }
.menu-item .ic  { width:16px; text-align:center; color:var(--ink-muted); flex:none; }
.menu-item .kb  { margin-left:auto; font-family:var(--font-mono); font-size:var(--fs-xs);
                  color:var(--ink-muted); }
.menu-item .arw { margin-left:auto; color:var(--ink-muted); font-size:10px; }
.menu-item--danger { color:var(--danger); }
.menu-item--danger .ic { color:var(--danger); }
.menu-item--danger:hover { background:var(--danger-soft); }
.menu-item[aria-disabled="true"] { opacity:.38; pointer-events:none; }
.menu-sep { height:1px; background:var(--border-soft); margin:5px 6px; }
#ctx { position:fixed; z-index:95; display:none; }

/* ── Tuiles de statistique ───────────────────────────────────────── */
.stat { padding:var(--s4); border:1px solid var(--border); border-radius:var(--r);
        background:var(--bg-surface); }
.stat .lbl { font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted); }
.stat .val { font-size:var(--fs-2xl); font-weight:600; margin-top:2px; letter-spacing:-.02em; }
.stat .val small { font-size:var(--fs-md); font-weight:500; color:var(--ink-muted); }
.stat .delta { font-size:var(--fs-sm); margin-top:2px; }
.up { color:var(--primary-hi); } .down { color:var(--danger-hi); }

/* ── Nuanciers ───────────────────────────────────────────────────── */
.swatches { display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:var(--s2); }
.sw { border-radius:var(--r-sm); overflow:hidden; border:1px solid var(--border); }
.sw .chip { height:44px; }
.sw .nm { padding:5px 7px; font-size:10px; font-family:var(--font-mono); background:var(--bg-surface); color:var(--ink-2); }

/* ── Graphiques ──────────────────────────────────────────────────── */
.chart-card { background:var(--bg-surface); border:1px solid var(--border);
              border-radius:var(--r-lg); padding:var(--s4); }
.chart-head { display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3); margin-bottom:var(--s3); }
.chart-head h4 { font-size:var(--fs-md); font-weight:600; }
.chart-head .unit { font-size:var(--fs-xs); color:var(--ink-muted); }
.legend { display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s3); font-size:var(--fs-sm); color:var(--ink-2); }
.legend span { display:inline-flex; align-items:center; gap:6px; }
.legend i { width:11px; height:11px; border-radius:3px; display:inline-block;
            border:1px solid var(--chart-stroke); }
svg { display:block; width:100%; height:auto; overflow:visible; }
.panel  { fill:var(--chart-panel); }
.gridln { stroke:var(--chart-grid); stroke-width:1; }
.axtxt  { fill:var(--chart-axis); font-size:10px; font-family:var(--font); }
.axttl  { fill:var(--ink-2); font-size:11px; font-family:var(--font); font-weight:500; }
.strip  { fill:var(--border-soft); }
.striptxt { fill:var(--ink-2); font-size:10px; font-family:var(--font); font-weight:500; }
.mark   { stroke:var(--chart-stroke); stroke-width:1; }
.serie  { fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ── Variante « logiciel » : dense, tout à l'intérieur ───────────── */
.chart-card--sw { padding:0; overflow:hidden; }
.sw-head { display:flex; align-items:center; gap:var(--s3); height:27px;
           padding:0 var(--s2) 0 var(--s3); font-size:var(--fs-xs);
           border-bottom:1px solid var(--border-soft); background:var(--bg-sunken); }
.sw-title { font-weight:600; white-space:nowrap; }
.sw-title span { font-weight:400; color:var(--ink-muted); }
.sw-legend { display:flex; gap:1px; }
.sw-chip { display:inline-flex; align-items:center; gap:5px; height:19px; padding:0 6px;
           border:0; background:transparent; border-radius:5px; cursor:pointer;
           font:inherit; font-size:var(--fs-xs); color:var(--ink-2); white-space:nowrap; }
.sw-chip:hover { background:var(--bg-hover); color:var(--ink); }
.sw-chip[aria-pressed="false"] { opacity:.38; }
.sw-chip[aria-pressed="false"] .k { text-decoration:line-through; }
.sw-chip i { width:8px; height:8px; border-radius:2px; flex:none; }
/* Le relevé vit dans une bande fixe, pas dans une bulle flottante :
   l'œil ne le poursuit pas et rien n'occulte la courbe. */
.sw-read { margin-left:auto; display:flex; align-items:center; gap:var(--s3);
           font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--ink-muted); }
.sw-read .v { display:inline-flex; align-items:center; gap:4px; color:var(--ink); }
.sw-read .v i { width:7px; height:7px; border-radius:2px; }
.sw-read .x { color:var(--ink-2); }
.sw-foot { display:flex; justify-content:space-between; padding:3px var(--s3) 5px;
           font-size:10px; color:var(--ink-muted); }

#xhair, #xhairSw { pointer-events:none; }
#tt { position:fixed; z-index:80; pointer-events:none; opacity:0;
      transition:opacity 90ms linear; background:var(--bg-raised);
      border:1px solid var(--border); border-radius:var(--r-sm);
      box-shadow:var(--shadow); padding:8px 10px; font-size:var(--fs-sm); min-width:140px; }
#tt .tt-t { font-weight:600; margin-bottom:4px; font-size:var(--fs-xs); color:var(--ink-muted); }
#tt .tt-r { display:flex; align-items:center; gap:7px; line-height:1.6; }
#tt .tt-r i { width:9px; height:9px; border-radius:2px; }
#tt .tt-r b { margin-left:auto; font-family:var(--font-mono); font-weight:500; }

.note { font-size:var(--fs-sm); color:var(--ink-2); background:var(--info-soft);
        border-left:3px solid var(--info); border-radius:0 var(--r-sm) var(--r-sm) 0;
        padding:var(--s3) var(--s4); line-height:1.6; }
.note b { color:var(--ink); }