/* ════════ COCKPIT (v1.08) — le tableau de bord v2 ════════
   Les couleurs viennent du thème (--ht-*) ; le mode Papier (bleu clair) / Réel (orange) teinte le bandeau. */
/* v1.94 : la racine du Cockpit seulement (.ck.ov) — avant « .ck » tout court, qui empilait aussi les cases à cocher (label.ck) des
   panneaux du graphique : la case centrée sur sa ligne, son nom dessous */
.ck.ov { --ck-mode: var(--ht-info); --ck-mode-rgb: var(--ht-info-rgb); display: flex; flex-direction: column; gap: 1rem; }
.ck.ck-real { --ck-mode: var(--ht-warning); --ck-mode-rgb: var(--ht-warning-rgb); }

/* ── le bandeau ── */
.ck-hero { position: relative; overflow: hidden; border-radius: 1rem; min-height: 9.5rem; padding: 1.2rem 1.5rem;
  background: linear-gradient(135deg, rgba(var(--ck-mode-rgb), .14), rgba(var(--ht-primary-rgb), .06) 55%, var(--ht-card-bg));
  border: 1px solid rgba(var(--ck-mode-rgb), .35); box-shadow: 0 .8rem 2.2rem rgba(var(--ck-mode-rgb), .12); }
.ck-curve { position: absolute; inset: auto 0 0 0; width: 100%; height: 70%; pointer-events: none; }
.ck-curve .ln { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.ck-curve.up .ln { stroke: rgba(var(--ht-success-rgb), .8); } .ck-curve.dn .ln { stroke: rgba(var(--ht-danger-rgb), .8); }
.ck-curve.up .s0 { stop-color: rgba(var(--ht-success-rgb), .22); } .ck-curve.dn .s0 { stop-color: rgba(var(--ht-danger-rgb), .22); }
.ck-curve .s1 { stop-color: rgba(var(--ht-success-rgb), 0); }
.ck-hero-in { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.ck-lbl { display: flex; align-items: center; gap: .45rem; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ht-gray-600); }
.ck-mode { color: var(--ck-mode); background: rgba(var(--ck-mode-rgb), .16); border: 1px solid rgba(var(--ck-mode-rgb), .5); border-radius: .35rem; padding: .05rem .4rem; }
.ck-live { width: .5rem; height: .5rem; border-radius: 50%; background: var(--ht-success); box-shadow: 0 0 0 0 rgba(var(--ht-success-rgb), .6); animation: ck-pulse 1.8s infinite; }
.ck-livetxt { color: var(--ht-success); letter-spacing: .06em; }
@keyframes ck-pulse { 0% { box-shadow: 0 0 0 0 rgba(var(--ht-success-rgb), .55); } 70% { box-shadow: 0 0 0 .55rem rgba(var(--ht-success-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--ht-success-rgb), 0); } }
.ck-big { font-size: clamp(2.2rem, 4.4vw, 3.6rem); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; color: var(--ht-gray-900); margin: .25rem 0 .35rem;
  font-variant-numeric: tabular-nums; border-radius: .5rem; padding: 0 .2rem; margin-left: -.2rem; transition: color .25s; }
.ck-big.flash-up { animation: ck-up .9s ease-out; } .ck-big.flash-dn { animation: ck-dn .9s ease-out; }
@keyframes ck-up { 0% { color: var(--ht-success); text-shadow: 0 0 1.2rem rgba(var(--ht-success-rgb), .6); } 100% { text-shadow: none; } }
@keyframes ck-dn { 0% { color: var(--ht-danger); text-shadow: 0 0 1.2rem rgba(var(--ht-danger-rgb), .6); } 100% { text-shadow: none; } }
.ck-sub { font-size: .82rem; color: var(--ht-gray-700); } .ck-sub .sep { color: var(--ht-gray-400); margin: 0 .3rem; }
.ck-sub b { font-family: var(--ht-font-monospace); font-variant-numeric: tabular-nums; }
.ck-chips { display: flex; gap: .6rem; flex-wrap: wrap; }
.ck-chip { min-width: 7.5rem; padding: .55rem .8rem; border-radius: .75rem; background: rgba(var(--ht-primary-rgb), .06); border: 1px solid var(--ht-border-color);
  backdrop-filter: blur(6px); }
.ck-chip span { display: block; font-size: .6rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ht-gray-600); }
.ck-chip b { font-family: var(--ht-font-monospace); font-variant-numeric: tabular-nums; font-size: 1.05rem; }

/* ── la grille des widgets ── */
.ck-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; grid-auto-flow: dense; }
.ck-card { grid-column: span 8; background: var(--ht-card-bg); border: 1px solid var(--ht-border-color); border-radius: 1rem; padding: .9rem 1rem 1rem; min-width: 0; }
.ck-h { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .6rem; }
.ck-h h2 { font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin: 0; color: var(--ht-gray-800); }
.ck-hint { font-size: .66rem; color: var(--ht-gray-500); }
.ck-empty { color: var(--ht-gray-500); text-align: center; padding: 2.5rem 0; font-size: .85rem; }
@media (max-width: 1199.98px) { .ck-card { grid-column: span 12 !important; } }

/* ── la carte des positions ── */
.ck-map { position: relative; height: 22rem; border-radius: .7rem; overflow: hidden; background: rgba(var(--ht-primary-rgb), .03); }
.ck-tile { all: unset; box-sizing: border-box; position: absolute; cursor: pointer; padding: .45rem .55rem; display: flex; flex-direction: column; justify-content: space-between;
  border: 2px solid var(--ht-card-bg); border-radius: .55rem; overflow: hidden; transition: filter .15s, transform .15s, background .6s; color: var(--ht-gray-900); }
.ck-tile:hover { filter: brightness(1.18); z-index: 2; transform: scale(1.01); }
.ck-tile.grp { box-shadow: inset 0 0 0 2px var(--gc); }
.ck-tile .nm { font-weight: 800; font-size: .95rem; letter-spacing: .01em; white-space: nowrap; }
.ck-tile .nm .g { font-style: normal; font-size: .6rem; font-weight: 800; color: var(--gc); background: color-mix(in srgb, var(--gc) 22%, transparent); border-radius: .25rem; padding: 0 .25rem; vertical-align: middle; }
.ck-tile .sd { font-size: .62rem; font-weight: 700; letter-spacing: .05em; color: var(--ht-gray-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-tile .sd .acct-dot { width: .45rem; height: .45rem; margin: 0 .15rem 0 .1rem; }
.ck-tile .pl { font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ck-tile .ro { font-size: .7rem; font-weight: 700; color: var(--ht-gray-700); }

/* ── À faire maintenant (v1.09) ── */
.ck-card[data-w="todo"], .ck-card[data-w="clock"], .ck-card[data-w="perf"], .ck-card[data-w="pulse"] { grid-column: span 4; }
.ck-todo { display: flex; flex-direction: column; }
.ck-todos { display: flex; flex-direction: column; gap: .4rem; max-height: 22rem; overflow-y: auto; scrollbar-width: thin; }
.ck-td { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border-radius: .65rem; border: 1px solid var(--ht-border-color);
  background: rgba(var(--ht-primary-rgb), .03); }
.ck-td .ic { width: 1.9rem; height: 1.9rem; flex: none; display: grid; place-items: center; border-radius: .55rem; font-size: .95rem; }
.ck-td.l0 { border-color: rgba(var(--ht-danger-rgb), .55); background: rgba(var(--ht-danger-rgb), .08); }
.ck-td.l0 .ic { background: rgba(var(--ht-danger-rgb), .18); color: var(--ht-danger); animation: ck-alarm 1.4s ease-in-out infinite; }
.ck-td.l1 .ic { background: rgba(var(--ht-warning-rgb), .16); color: var(--ht-warning); }
.ck-td.l2 .ic { background: rgba(var(--ht-info-rgb), .14); color: var(--ht-info); }
@keyframes ck-alarm { 50% { box-shadow: 0 0 0 .3rem rgba(var(--ht-danger-rgb), .18); } }
.ck-td .tx { min-width: 0; flex: 1; line-height: 1.25; }
.ck-td .tx b { display: block; font-size: .8rem; color: var(--ht-gray-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-td .tx small { display: block; font-size: .66rem; color: var(--ht-gray-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-btn { flex: none; border: 1px solid rgba(var(--ht-primary-rgb), .45); background: rgba(var(--ht-primary-rgb), .1); color: var(--ht-primary);
  border-radius: .5rem; font-size: .7rem; font-weight: 700; padding: .25rem .6rem; white-space: nowrap; }
.ck-btn:hover { background: rgba(var(--ht-primary-rgb), .2); }
.ck-ok { display: flex; flex-direction: column; align-items: center; gap: .4rem; color: var(--ht-success); }
.ck-ok span { font-size: 2rem; line-height: 1; width: 3.2rem; height: 3.2rem; display: grid; place-items: center; border-radius: 50%; background: rgba(var(--ht-success-rgb), .14); }

/* ── l'horloge des sessions (v1.09) ── */
.ck-clockw { display: flex; align-items: center; gap: 1rem; }
.ck-clock { width: 11.5rem; height: 11.5rem; flex: none; }
.ck-clock .ring { fill: none; stroke: var(--ht-border-color); stroke-width: 10; }
.ck-clock .kz { fill: none; stroke-width: 10; stroke-linecap: butt; opacity: .55; }
.ck-clock .kz.on { opacity: 1; stroke-width: 14; filter: drop-shadow(0 0 4px currentColor); }
.ck-clock .tk { font-size: 9px; fill: var(--ht-gray-500); text-anchor: middle; dominant-baseline: middle; font-weight: 700; }
.ck-clock .hand { stroke: var(--ht-primary); stroke-width: 2.5; stroke-linecap: round; }
.ck-clock .hub { fill: var(--ht-primary); }
.ck-clock .now { font-size: 15px; font-weight: 800; fill: var(--ht-gray-900); text-anchor: middle; font-family: var(--ht-font-monospace); }
.ck-clock .nowl { font-size: 7px; fill: var(--ht-gray-500); text-anchor: middle; letter-spacing: .05em; }
.ck-sess { display: flex; flex-direction: column; gap: .55rem; min-width: 0; flex: 1; }
.ck-now, .ck-next { border-left: 3px solid var(--kc, var(--ht-gray-400)); padding-left: .55rem; }
.ck-now span, .ck-next span, .ck-line span { display: block; font-size: .58rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ht-gray-500); }
.ck-now b { font-size: 1.05rem; color: var(--kc); } .ck-now.off b { color: var(--ht-gray-600); font-size: .9rem; }
.ck-next b { font-size: .88rem; color: var(--ht-gray-900); }
.ck-now small, .ck-next small { display: block; font-size: .7rem; color: var(--ht-gray-600); }
.ck-line b { font-size: .76rem; color: var(--ht-gray-800); font-weight: 600; }
@media (max-width: 1599.98px) { .ck-clockw { flex-direction: column; align-items: stretch; } .ck-clock { align-self: center; } }

/* ── la performance (v1.10) ── */
.ck-more { margin-left: auto; font-size: .7rem; font-weight: 600; text-decoration: none; }
.ck-perf { display: flex; align-items: center; gap: 1.1rem; }
.ck-wr { position: relative; flex: none; width: 6.4rem; height: 6.4rem; display: grid; place-content: center; text-align: center; }
.ck-wr svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ck-wr .bg { fill: none; stroke: rgba(var(--ht-danger-rgb), .4); stroke-width: 9; }
.ck-wr .fg { fill: none; stroke: var(--ht-success); stroke-width: 9; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(var(--ht-success-rgb), .5)); }
.ck-wr b, .ck-wr span { position: relative; }
.ck-wr b { font-size: 1.35rem; font-weight: 800; font-family: var(--ht-font-monospace); color: var(--ht-gray-900); line-height: 1; }
.ck-wr span { font-size: .58rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ht-gray-500); }
.ck-pk { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem .9rem; flex: 1; min-width: 0; }
.ck-pk span { display: block; font-size: .58rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ht-gray-500); }
.ck-pk b { font-family: var(--ht-font-monospace); font-variant-numeric: tabular-nums; font-size: .95rem; color: var(--ht-gray-900); }
.ck-pk b.pos { color: var(--ht-success); } .ck-pk b.neg { color: var(--ht-danger); }
.ck-streak { margin: .8rem 0 .55rem; font-size: .78rem; color: var(--ht-gray-700); } .ck-streak .sep { color: var(--ht-gray-400); margin: 0 .3rem; }
.ck-days { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 3px; }
.ck-days i { aspect-ratio: 1; border-radius: 3px; background: rgba(var(--ht-primary-rgb), .07); }

/* ── la watchlist (v1.10) ── */
.ck-pulse { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; max-height: 22rem; overflow-y: auto; scrollbar-width: thin; }
.ck-psep { grid-column: 1 / -1; font-size: .6rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ht-primary);
  border-bottom: 1px solid rgba(var(--ht-primary-rgb), .25); padding: .25rem .1rem .15rem; margin-top: .2rem; }
.ck-pc { all: unset; box-sizing: border-box; cursor: pointer; position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto; row-gap: .05rem;
  padding: .45rem .55rem .2rem; border-radius: .6rem; border: 1px solid var(--ht-border-color); background: rgba(var(--ht-primary-rgb), .03); min-height: 4.1rem; }
.ck-pc:hover { border-color: rgba(var(--ht-primary-rgb), .45); background: rgba(var(--ht-primary-rgb), .07); }
.ck-pc .nm { font-weight: 800; font-size: .8rem; color: var(--ht-gray-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-pc .nm i { font-style: normal; }
.ck-pc .ch { font-size: .68rem; font-weight: 700; text-align: right; }
.ck-pc .px { grid-column: 1 / -1; font-size: .82rem; font-weight: 700; color: var(--ht-gray-800); font-variant-numeric: tabular-nums; position: relative; z-index: 1; }
.ck-spark { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 55%; pointer-events: none; }
.ck-spark .l { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.ck-spark.up .l { stroke: rgba(var(--ht-success-rgb), .9); } .ck-spark.dn .l { stroke: rgba(var(--ht-danger-rgb), .9); }
.ck-spark.up .a { fill: rgba(var(--ht-success-rgb), .1); } .ck-spark.dn .a { fill: rgba(var(--ht-danger-rgb), .1); }


/* ── la palette de commandes (v1.11) ── */
.ht-palbtn { display: inline-flex; align-items: center; gap: .45rem; height: 1.95rem; padding: 0 .55rem 0 .65rem; border-radius: .6rem; font-size: .76rem;
  border: 1px solid var(--ht-border-color); background: rgba(var(--ht-primary-rgb), .05); color: var(--ht-gray-600); }
.ht-palbtn:hover { border-color: rgba(var(--ht-primary-rgb), .5); color: var(--ht-gray-900); }
.ht-palbtn kbd, .ck-pal kbd { font-size: .6rem; padding: .05rem .3rem; border-radius: .25rem; background: rgba(var(--ht-primary-rgb), .12); color: var(--ht-primary); border: 0; }
@media (max-width: 1199.98px) { .ht-palbtn kbd, .ht-palbtn { font-size: 0; gap: 0; } .ht-palbtn span { font-size: .9rem; } }
.ck-pal { position: fixed; inset: 0; z-index: 2000; background: rgba(4, 10, 20, .55); backdrop-filter: blur(4px); display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; }
.ck-pal-box { width: min(42rem, 92vw); background: var(--ht-card-bg); border: 1px solid rgba(var(--ht-primary-rgb), .4); border-radius: 1rem;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .45), 0 0 0 4px rgba(var(--ht-primary-rgb), .08); overflow: hidden; animation: ck-pal-in .14s ease-out; }
@keyframes ck-pal-in { from { transform: translateY(-8px) scale(.98); opacity: 0; } }
.ck-pal-in { display: flex; align-items: center; gap: .6rem; padding: .85rem 1rem; border-bottom: 1px solid var(--ht-border-color); }
.ck-pal-in span { color: var(--ht-primary); font-size: 1.1rem; }
.ck-pal-in input { flex: 1; border: 0; outline: none; background: transparent; color: var(--ht-gray-900); font-size: 1rem; }
.ck-pal-list { max-height: 55vh; overflow-y: auto; padding: .35rem; }
.ck-pal-it { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: .7rem; padding: .5rem .65rem; border-radius: .6rem; cursor: pointer; }
.ck-pal-it.on, .ck-pal-it:hover { background: rgba(var(--ht-primary-rgb), .1); }
.ck-pal-it .ic { width: 1.8rem; height: 1.8rem; flex: none; display: grid; place-items: center; border-radius: .5rem; background: rgba(var(--ht-primary-rgb), .1); color: var(--ht-primary); font-size: .9rem; }
.ck-pal-it .tx { flex: 1; min-width: 0; }
.ck-pal-it .tx b { display: block; font-size: .85rem; color: var(--ht-gray-900); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-pal-it .tx small { display: block; font-size: .68rem; color: var(--ht-gray-600); }
.ck-pal-none { padding: 1.2rem; text-align: center; color: var(--ht-gray-600); font-size: .8rem; }
.ck-pal-none code { color: var(--ht-primary); }
.ck-pal-foot { padding: .45rem 1rem; border-top: 1px solid var(--ht-border-color); font-size: .66rem; color: var(--ht-gray-500); }

/* ── disposer les widgets (v1.13) ── */
.ck-bar { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; margin: -.4rem 0 -.3rem; min-height: 1.9rem; }
.ck-bar:empty { display: none; }                  /* hors disposition : rien (le ⚙ est dans la barre du haut, v1.89) */
.ht-arrange.active { color: var(--ht-warning); border-color: rgba(var(--ht-warning-rgb), .55); background: rgba(var(--ht-warning-rgb), .12); }
.ck-bar .ck-hint { margin-right: auto; }
.ck-btn.ghost { border-color: var(--ht-border-color); background: transparent; color: var(--ht-gray-600); }
.ck-btn.on { background: var(--ht-primary); color: var(--ht-body-bg); border-color: var(--ht-primary); }
.ck-editing .ck-grid > [data-w] { outline: 2px dashed rgba(var(--ht-primary-rgb), .35); outline-offset: 3px; cursor: grab; }
.ck-editing .ck-grid > [data-w] > :not(.ck-tools) { pointer-events: none; opacity: .75; }
.ck-grid > .ck-hidden { opacity: .4; }
.ck-dragging { opacity: .35 !important; }
.ck-dropto { outline: 2px solid var(--ht-primary) !important; box-shadow: 0 0 0 .4rem rgba(var(--ht-primary-rgb), .15); }
.ck-tools { display: flex; align-items: center; gap: .5rem; margin: -.3rem -.3rem .6rem; padding: .3rem .45rem; border-radius: .6rem;
  background: rgba(var(--ht-primary-rgb), .1); font-size: .7rem; }
.ck-tools .grip { font-weight: 800; color: var(--ht-primary); letter-spacing: .03em; cursor: grab; }
.ck-tools .sz { margin-left: auto; display: inline-flex; gap: 2px; }
.ck-tools button { border: 1px solid var(--ht-border-color); background: var(--ht-card-bg); color: var(--ht-gray-700); border-radius: .35rem; font-size: .66rem; padding: .05rem .4rem; }
.ck-tools button.on { background: var(--ht-primary); color: var(--ht-body-bg); border-color: var(--ht-primary); }
.ck-tools .hd { color: var(--ht-gray-600); }



/* la carte des positions, plus parlante (v1.15) : en-tête (coin, sens, groupe), compte, P&L au centre, exposition et prix en bas */
.ck-legend { font-size: .66rem; color: var(--ht-gray-600); display: inline-flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.ck-legend i { display: inline-block; vertical-align: middle; }
.ck-legend .sq { width: .8rem; height: .55rem; border: 1px solid var(--ht-gray-500); border-radius: 2px; margin-left: .2rem; }
.ck-legend .dot { width: .55rem; height: .55rem; border-radius: 2px; margin-left: .45rem; }
.ck-legend .dot.neg { background: rgba(var(--ht-danger-rgb), .7); } .ck-legend .dot.pos { background: rgba(var(--ht-success-rgb), .7); }
.ck-legend .fr { width: .7rem; height: .55rem; border: 2px solid var(--acct-1); border-radius: 2px; margin-left: .45rem; }
.ck-tile { justify-content: flex-start; gap: .15rem; }
.ck-tile .hd { display: flex; align-items: center; gap: .35rem; min-width: 0; }
.ck-tile .hd .ht-dir { font-size: .55rem; padding: .02rem .3rem; }
.ck-tile .hd .g { font-style: normal; font-size: .6rem; font-weight: 800; color: var(--gc); background: color-mix(in srgb, var(--gc) 22%, transparent); border-radius: .25rem; padding: 0 .3rem; }
.ck-tile .sd { letter-spacing: .02em; text-transform: none; font-size: .68rem; }
.ck-tile .mid { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-height: 0; }
.ck-tile .mid .pl { font-size: clamp(1rem, 2.2vw, 1.9rem); line-height: 1.05; }
.ck-tile .mid .ro { font-size: .8rem; font-weight: 700; color: var(--ht-gray-700); }
.ck-tile .ft { font-size: .66rem; color: var(--ht-gray-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-tile .ft b { color: var(--ht-gray-900); }

/* ════════ VUE D'ENSEMBLE (v1.27) — l'Aperçu, au style du Cockpit ════════ */
.ov-hero { min-height: 0; padding: .8rem 1.2rem .8rem; }
.ov-hero .ck-big { font-size: clamp(1.6rem, 2.8vw, 2.3rem); margin: .1rem 0 .2rem; }
.ov-hero .ck-chip { padding: .35rem .65rem; min-width: 6rem; } .ov-hero .ck-chip b { font-size: .9rem; }
.ov-hero-top { position: relative; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.ov-status { font-size: .72rem; color: var(--ht-gray-600); }
.ov-hero .ck-chip small { display: block; font-size: .66rem; color: var(--ht-gray-600); font-family: var(--ht-font-monospace); }
/* la répartition entre les comptes : voir v1.50 (en bas) */
/* les cartes des comptes : deux lignes */
.ov-accts { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .5rem; }
.ov-acct { display: flex; flex-direction: column; gap: .2rem; padding: .4rem .65rem; border-radius: .6rem; text-decoration: none; color: inherit; min-width: 0;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 8%, var(--ht-emphasis-bg)), var(--ht-emphasis-bg) 60%); border: 1px solid var(--ht-border-color); border-left: 3px solid var(--c);
  box-shadow: 0 .15rem .6rem rgba(0, 0, 0, .18);
  transition: box-shadow .15s, border-color .15s; }
a.ov-acct:hover { color: inherit; border-color: color-mix(in srgb, var(--c) 45%, var(--ht-border-color)); box-shadow: 0 .3rem 1rem color-mix(in srgb, var(--c) 16%, transparent); }
.ov-acct.is-off { opacity: .8; }
.ov-a-r1 { display: flex; align-items: center; gap: .35rem; min-width: 0; }
.ov-a-r1 .nm { color: var(--ht-heading-color); font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ov-a-r1 .ht-chip { flex: none; font-size: .54rem; padding: 0 .3rem; }
.ov-a-r1 .ov-a-spark { margin-left: auto; width: 60px; height: 16px; flex: none; display: flex; }
.ov-a-r1 .ov-a-spark .ht-spark { width: 60px; height: 16px; }
.ov-a-r1 .eq { flex: none; font-size: .9rem; font-weight: 800; color: var(--ht-gray-900); white-space: nowrap; }
.ov-a-r2 { display: flex; align-items: center; gap: .65rem; font-family: var(--ht-font-monospace); font-size: .64rem; color: var(--ht-gray-600); white-space: nowrap; overflow: hidden; }
.ov-a-r2 small { font-family: var(--ht-font-body, inherit); }
.ov-a-r2 .ht-bar { display: inline-block; width: 1.6rem; height: 4px; margin-right: .25rem; vertical-align: middle; }
.ov-a-r2 > span[title^="Positions"] { margin-left: auto; }
.ov-ping { color: var(--ht-success); } .ov-ping.mid { color: var(--ht-warning); } .ov-ping.slow { color: var(--ht-danger); }
/* la grille */
.ov-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.ov-grid > .ck-card { grid-column: span 12; }
.ov-grid > .ov-w8 { grid-column: span 8; } .ov-grid > .ov-w4 { grid-column: span 4; }
.ov-grid > .ov-w7 { grid-column: span 7; } .ov-grid > .ov-w5 { grid-column: span 5; }
@media (max-width: 1199.98px) { .ov-grid > .ck-card { grid-column: span 12 !important; } }
.ov-slim { padding: .65rem 1rem; }
.ov-slim .ck-h { align-items: center; flex-wrap: wrap; }
/* long / short */
.ov-ls-bar { display: flex; height: .55rem; border-radius: 1rem; overflow: hidden; background: var(--ht-gray-200); gap: 2px; }
.ov-ls-bar .l { background: var(--ht-long, var(--ht-success)); } .ov-ls-bar .s { background: var(--ht-short, var(--ht-danger)); }
/* les exécutions : le P&L à droite */
.ov-log li { display: flex; align-items: center; } .ov-log li .m { flex: 1; min-width: 0; }
.ov-log li .p { margin-left: auto; padding-left: .5rem; white-space: nowrap; font-weight: 700; }
/* les serveurs, en une ligne */
.ov-srv { display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: center; }
.ov-srv-i { display: inline-flex; align-items: center; gap: .4rem; font-size: .74rem; } .ov-srv-i small { color: var(--ht-gray-600); }

/* ════════ v1.30 : Cockpit et Vue d'ensemble plus compacts ════════ */
.ck.ov { gap: .7rem; }
.ck .ck-hero { min-height: 0; padding: .8rem 1.2rem; border-radius: .8rem; }
.ck .ck-big { font-size: clamp(1.6rem, 2.8vw, 2.3rem); margin: .1rem 0 .2rem; }
.ck .ck-sub { font-size: .76rem; }
.ck .ck-chip { min-width: 5.8rem; padding: .35rem .65rem; border-radius: .6rem; } .ck .ck-chip b { font-size: .9rem; }
.ck-grid { gap: .7rem; }
.ck .ck-card { padding: .65rem .8rem .75rem; border-radius: .8rem; }
.ck .ck-h { margin-bottom: .45rem; } .ck .ck-h h2 { font-size: .72rem; }
.ck .ck-empty { padding: 1.4rem 0; }
.ck .ck-map { height: 15rem; }
.ck .ck-tile .nm { font-size: .82rem; } .ck .ck-tile .pl { font-size: .9rem; }
.ck .ck-todos, .ck .ck-pulse { max-height: 15rem; }
.ck .ck-td { padding: .35rem .5rem; } .ck .ck-td .ic { width: 1.55rem; height: 1.55rem; font-size: .8rem; }
.ck .ck-clock { width: 8.5rem; height: 8.5rem; }
.ck .ck-sess { gap: .35rem; }
.ck .ck-wr { width: 5rem; height: 5rem; } .ck .ck-wr b { font-size: 1.1rem; }
.ck .ck-pk b { font-size: .85rem; }
.ck .ck-streak { margin: .5rem 0 .4rem; }
.ck .ck-pc { min-height: 3.3rem; padding: .3rem .5rem .15rem; }
/* Vue d'ensemble : la courbe d'equity moins haute, les cartes de compte serrées */
.ov .ht-chart { height: 150px; }
.ov-a-r2 { gap: .5rem; }
/* v1.31 : les cartes du Cockpit et de la Vue d'ensemble, pleines (fond et ombre des cartes de l'application), plus de transparence */
.ck .ck-card { background: var(--ht-emphasis-bg); box-shadow: var(--ht-box-shadow); }
.ck .ck-hero { background: linear-gradient(135deg, color-mix(in srgb, var(--ck-mode) 14%, var(--ht-emphasis-bg)), var(--ht-emphasis-bg) 60%); }
.ck .ck-chip { background: color-mix(in srgb, var(--ht-primary) 7%, var(--ht-emphasis-bg)); backdrop-filter: none; }
/* v1.32 : les cartes de compte de la Vue d'ensemble, 1,5× plus hautes */
.ov-acct { gap: .4rem; padding: .65rem .8rem; }
.ov-a-r1 .nm { font-size: .84rem; }
.ov-a-r1 .eq { font-size: 1.05rem; }
.ov-a-r1 .ov-a-spark, .ov-a-r1 .ov-a-spark .ht-spark { width: 80px; height: 22px; }
.ov-a-r2 { font-size: .7rem; }
.ov-accts { grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); }
/* v1.34 : les widgets de l'ancienne Vue d'ensemble dans le Cockpit : à leur hauteur (pas étirés à celle du voisin) */
.ck-grid > [data-w="orders"], .ck-grid > [data-w="expo"], .ck-grid > [data-w="fills"], .ck-grid > [data-w="accts"] { align-self: start; }
.ov-acctw { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.ov-acctw .ov-alloc { margin-top: 0; }
/* v1.38 : les cartes de compte du début (petites et détaillées), et un Cockpit plus serré */
.ck .ht-accts { grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr)); gap: .6rem; margin: 0; }
.ck .ht-acct { padding: .55rem .75rem .45rem; margin: 0; }
.ck .ht-acct .top { margin-bottom: .3rem; } .ck .ht-acct .nm { font-size: .82rem; }
.ck .ht-acct .eq { font-size: 1.05rem; } .ck .ht-acct .spark { height: 26px; }
.ck .ht-acct .ht-bar { height: 4px; margin-top: .35rem !important; }
.ck .ht-acct .stats { margin: .4rem 0 .35rem; } .ck .ht-acct .stats dt { font-size: .54rem; } .ck .ht-acct .stats dd { font-size: .74rem; }
.ck .ht-acct .foot { padding-top: .35rem; } .ck .ht-acct .ht-chip { font-size: .58rem; }
.ck .ck-hero { padding: .6rem 1rem; } .ck .ck-big { font-size: clamp(1.4rem, 2.4vw, 2rem); }
.ck .ck-map { height: 12rem; }
.ck .ck-todos, .ck .ck-pulse { max-height: 12rem; }
.ck .ck-card { padding: .55rem .75rem .6rem; }
.ck .ck-pc { min-height: 2.9rem; }
.ck .ov .ht-chart, .ck.ov .ht-chart { height: 130px; }
.ck .ht-acct .top { min-width: 0; } .ck .ht-acct .top > * { flex: none; }
.ck .ht-acct .nm { flex: 0 1 auto !important; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* v2.85 : l'étiquette « copie ×0,5 · maître », en bas de la carte : elle se raccourcit (…) si la place manque */
.ck .ht-acct .ck-chips { min-width: 0; }
.ck .ht-acct .ck-chips > .ht-cpy { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck .ht-acct .eq { white-space: nowrap; }
/* v1.39 : les tuiles de la carte des positions : fond sombre teinté, bordure franche à gauche, séparées par le fond de la carte */
.ck-map { background: transparent; }
.ck-tile { border: 2px solid var(--ht-emphasis-bg); border-left: 4px solid var(--edge, var(--ht-gray-500)); border-radius: .55rem; color: var(--ht-gray-900); }
.ck-tile:hover { filter: brightness(1.12); }
.ck-tile .sd, .ck-tile .ro, .ck-tile .mid .ro, .ck-tile .ft { color: var(--ht-gray-600); }
.ck-tile .nm { color: var(--ht-gray-900); }
.ck-tile .pl.pos { color: var(--ht-success); } .ck-tile .pl.neg { color: var(--ht-danger); }

/* v1.40 : le widget des alertes de prix */
.ck-alerts { display: flex; flex-direction: column; gap: .3rem; max-height: 12rem; overflow-y: auto; scrollbar-width: thin; }
.ck-al { display: grid; grid-template-columns: minmax(0, 1fr) auto 4.6rem auto; grid-template-rows: auto auto; align-items: center; column-gap: .5rem;
  padding: .3rem .45rem; border-radius: .5rem; border: 1px solid var(--ht-border-color); cursor: pointer; font-size: .76rem; }
.ck-al:hover { background: rgba(var(--ht-primary-rgb), .06); }
.ck-al .nm { font-weight: 800; color: var(--ht-gray-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-al .px { color: var(--ht-gray-900); } .ck-al .d { text-align: right; font-size: .7rem; }
.ck-al .tx { grid-column: 1 / 4; font-size: .66rem; color: var(--ht-gray-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-al .tx:empty { display: none; }
.ck-al .ck-x { grid-row: 1 / 3; grid-column: 4; border: 0; background: transparent; color: var(--ht-gray-500); padding: 0 .2rem; font-size: .75rem; }
.ck-al .ck-x:hover { color: var(--ht-danger); }
.ck-al.off { opacity: .55; } .ck-al.off .d { color: var(--ht-warning); }
/* v1.43 : plus de contours colorés sur les tuiles (le fond teinté et le P&L en couleur suffisent ; « ⧉ G1 » marque un groupe copié) */
.ck-tile { border: 2px solid var(--ht-emphasis-bg) !important; }
.ck-tile.grp { box-shadow: none !important; }
/* v1.44 : les cartes de compte et la répartition sans trait de couleur (le point coloré du nom suffit) */
.ck .ht-acct { border-top: 1px solid var(--ht-border-color); }

/* ════════ v1.50 : le bandeau du Cockpit en une bande compacte, la répartition en trait fin ════════ */
.ck .ck-hero { padding: .55rem 1rem; background: var(--ht-emphasis-bg); box-shadow: var(--ht-box-shadow);
  border: 1px solid var(--ht-border-color); }          /* v2.74 : sans la barre de couleur à gauche (à la demande) */
.ck .ck-hero-in { align-items: center; gap: 1.2rem; flex-wrap: nowrap; }
.ck .ck-eq { flex: none; }
.ck .ck-big { font-size: clamp(1.3rem, 2vw, 1.7rem); margin: .05rem 0 .1rem; }
.ck .ck-spk { display: block; position: relative; flex: 1 1 auto; min-width: 6rem; height: 3.2rem; border-radius: .4rem; overflow: hidden;
  background: color-mix(in srgb, var(--ht-gray-200) 35%, transparent); }
.ck .ck-spk .ck-curve { inset: 0; height: 100%; }
.ck .ck-chips { flex: none; gap: 0; flex-wrap: nowrap; }
.ck .ck-chip { min-width: 0; padding: .1rem .9rem; border: 0; border-left: 1px solid var(--ht-border-color); border-radius: 0; background: none; }
.ck .ck-chip:first-child { border-left: 0; }
.ck .ck-chip span { font-size: .56rem; } .ck .ck-chip b { font-size: .86rem; }
@media (max-width: 1199.98px) { .ck .ck-hero-in { flex-wrap: wrap; } .ck .ck-chips { flex-wrap: wrap; } }
@media (max-width: 767.98px) { .ck .ck-hero-in { flex-wrap: wrap; } .ck .ck-spk { flex-basis: 100%; order: 3; height: 2.6rem; } }
.ov-alloc { display: block; height: auto; margin-top: 0; border-radius: 0; overflow: visible; }
.ov-alloc .bar { display: flex; gap: 2px; height: 5px; border-radius: 3px; overflow: hidden; background: var(--ht-gray-200); }
.ov-alloc .bar a { display: block; min-width: 3px; padding: 0; opacity: .85; }
.ov-alloc .bar a:hover { opacity: 1; background: inherit; }
.ov-alloc .lg { display: flex; flex-wrap: wrap; gap: .2rem 1rem; margin-top: .35rem; font-size: .7rem; }
.ov-alloc .lg a { display: inline-flex; align-items: center; gap: .35rem; color: var(--ht-gray-700); text-decoration: none; }
.ov-alloc .lg a:hover { color: var(--ht-primary); }
.ov-alloc .lg i { width: .5rem; height: .5rem; border-radius: 50%; }
.ov-alloc .lg b { font-family: var(--ht-font-monospace); font-weight: 600; color: var(--ht-gray-600); }
/* v1.55 : la colonne « Comptes » des positions : la pastille ET le nom de chaque compte */
.ht-acctname { display: inline-flex; align-items: center; gap: .3rem; margin-right: .7rem; white-space: nowrap; font-size: .76rem; color: var(--ht-gray-700); }
.ht-acctname .acct-dot { margin: 0; }
/* v1.56 : les tuiles de la carte des positions s'adaptent à leur taille RÉELLE (cockpit.js, fitTiles) */
.ck-tile.fit-xs { padding: .2rem .4rem; justify-content: center; }
.ck-tile.fit-xs .mid, .ck-tile.fit-xs .sd, .ck-tile.fit-xs .ft, .ck-tile.fit-xs .hd .ht-dir, .ck-tile.fit-xs .hd .g { display: none; }
.ck-tile.fit-xs .nm { font-size: .72rem; overflow: hidden; text-overflow: ellipsis; }
.ck-tile.fit-s { flex-direction: row; align-items: center; gap: .5rem; padding: .2rem .5rem; }
.ck-tile.fit-s .sd, .ck-tile.fit-s .ft, .ck-tile.fit-s .mid .ro { display: none; }
.ck-tile.fit-s .mid { flex: 0 1 auto; min-width: 0; }
.ck-tile.fit-s .mid .pl { font-size: .86rem; white-space: nowrap; }
/* v1.58 : les façons de remplir une tuile, essayées dans l'ordre par fitTiles (cockpit.js) — b : sans la ligne du bas ;
   c : le compte dans l'en-tête ; d : …et le P&L et le % côte à côte ; g : sans le % ; f : le compte dans l'en-tête, sans le % ;
   i : sans le compte ; s + sa : une ligne avec le compte */
.ck-tile .hd .sdi { display: none; flex: none; font-size: .64rem; font-weight: 700; color: var(--ht-gray-600); white-space: nowrap; }
.ck-tile:is(.fit-b, .fit-c, .fit-d, .fit-g, .fit-f, .fit-i) .ft,
.ck-tile:is(.fit-c, .fit-d, .fit-f, .fit-i) .sd,
.ck-tile:is(.fit-g, .fit-f, .fit-i) .mid .ro { display: none; }
.ck-tile:is(.fit-c, .fit-d, .fit-f, .fit-sa) .hd .sdi { display: inline; }
.ck-tile.fit-d .mid { flex-direction: row; flex-wrap: wrap; align-content: center; align-items: baseline; column-gap: .45rem; }
/* v1.57 : le compte de chaque position (pastille devant le coin, nom dessous) et de chaque exécution récente */
.ck-tile .hd > .acct-dot { flex: none; width: .5rem; height: .5rem; margin: 0; }
.ck-tile .sd { font-size: .66rem; font-weight: 700; color: var(--ht-gray-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-log .ov-acn { font-size: .72rem; color: var(--ht-gray-600); margin-right: .35rem; }

/* v3.37 : choisir des comptes dans le Cockpit — la carte choisie cerclée de sa couleur, les autres estompées ; « Trade ↗ » mène au graphique */
.ck .ht-acct { cursor: pointer; transition: opacity .15s, box-shadow .15s; }
.ck .ht-accts.has-sel .ht-acct:not(.is-sel) { opacity: .5; }
.ck .ht-accts.has-sel .ht-acct:not(.is-sel):hover { opacity: .85; }
.ck .ht-acct.is-sel { box-shadow: 0 0 0 2px var(--c), 0 0 14px -4px var(--c); }
.ht-acct .go { display: none; }
.ck .ht-acct .go { display: inline-block; margin-left: .4rem; padding: .05rem .4rem; border-radius: .3rem; font-size: .62rem; font-weight: 700;
  color: var(--ht-primary); background: color-mix(in srgb, var(--ht-primary) 14%, transparent); white-space: nowrap; }
.ck .ht-acct .go:hover { background: var(--ht-primary); color: #fff; }
.ck-focus { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; font-size: .75rem; color: var(--ht-gray-700); margin-bottom: .5rem; }
.ck-focus b { color: var(--ht-gray-900); font-weight: 600; }
.ck-focus .acct-dot { margin-right: .25rem; }