/* ── CHART : watchlist, en-tête, barre d'outils de dessin, graphique (KLineChart), réglages du dessin, menus ─────────────
   Tout vient des jetons du thème (--ht-*) : aucune couleur en dur, aucun texte blanc. */
.ht-chartpage { display: grid; grid-template-columns: 14.5rem minmax(0, 1fr); gap: .9rem; height: max(36rem, calc(100vh - var(--ht-top-h) - 4.6rem)); }
.ht-chartpage > .card { min-height: 0; }

/* watchlist */
.ht-cwl { display: flex; flex-direction: column; overflow: hidden; }
.ht-cwl-body { flex: 1; overflow-y: auto; padding: .25rem .3rem .5rem; scrollbar-width: thin; }
.ht-cwr { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: grid; grid-template-columns: 1fr auto 4.2rem; align-items: center; gap: .4rem;
  padding: .36rem .5rem; border-radius: .45rem; font-size: .76rem; color: var(--ht-body-color); }
.ht-cwr:hover { background: rgba(var(--ht-primary-rgb), .06); }
.ht-cwr.on { background: rgba(var(--ht-primary-rgb), .12); box-shadow: inset 2px 0 0 var(--ht-primary); }
.ht-cwr .sym { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ht-cwr .sym small { font-weight: 600; font-size: .58rem; color: var(--ht-gray-600); margin-left: .3rem; text-transform: uppercase; }
.ht-cwr .px { font-size: .74rem; text-align: right; border-radius: .25rem; padding: 0 .2rem; }
.ht-cwr .chg { font-size: .7rem; text-align: right; }
.ht-cwr .px.up { animation: ht-flash-up .9s ease-out; } .ht-cwr .px.down { animation: ht-flash-dn .9s ease-out; }
@keyframes ht-flash-up { from { background: rgba(var(--ht-success-rgb), .28); color: var(--ht-success); } to { background: transparent; } }
@keyframes ht-flash-dn { from { background: rgba(var(--ht-danger-rgb), .25); color: var(--ht-danger); } to { background: transparent; } }

/* colonne principale */
.ht-cmain { display: flex; flex-direction: column; overflow: hidden; position: relative; }
.ht-cmain:fullscreen { background: var(--ht-card-bg); border-radius: 0; }
.ht-chead { display: flex; align-items: center; gap: .9rem; padding: .5rem .7rem; border-bottom: 1px solid var(--ht-border-color); min-height: 3.1rem; }
.ht-csym { display: flex; align-items: baseline; gap: .45rem; white-space: nowrap; }
.ht-csym b { font-size: 1.15rem; color: var(--ht-heading-color); letter-spacing: -.01em; }
.ht-star { all: unset; cursor: pointer; color: var(--ht-gray-400); font-size: 1rem; line-height: 1; align-self: center; }
.ht-star:hover { color: var(--ht-warning); } .ht-star.on { color: var(--ht-warning); }
.ht-cpx { font-size: 1.05rem; font-weight: 700; color: var(--ht-heading-color); transition: color .3s; }
.ht-cpx.up { color: var(--ht-success); } .ht-cpx.down { color: var(--ht-danger); }
.ht-cchg { font-size: .78rem; font-weight: 600; }
.ht-cstats { display: flex; gap: .9rem; min-width: 0; overflow: hidden; }
.ht-cstats span { display: flex; flex-direction: column; line-height: 1.15; }
.ht-cstats small { font-size: .6rem; color: var(--ht-gray-600); text-transform: uppercase; letter-spacing: .03em; }
.ht-cstats b { font-size: .76rem; font-family: var(--ht-font-monospace); color: var(--ht-body-color); }
.ht-ctfs { display: flex; gap: 2px; margin-left: auto; background: var(--ht-gray-100); padding: 2px; border-radius: .5rem; }
.ht-ctfs button { all: unset; cursor: pointer; padding: .22rem .5rem; border-radius: .38rem; font-size: .72rem; font-weight: 600; color: var(--ht-gray-700); }
.ht-ctfs button:hover { color: var(--ht-primary); }
.ht-ctfs button.active { background: var(--ht-card-bg); color: var(--ht-primary); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.ht-cacts { display: flex; align-items: center; gap: .3rem; }
.ht-cbtn { all: unset; cursor: pointer; padding: .28rem .6rem; border-radius: .45rem; font-size: .72rem; font-weight: 600; color: var(--ht-gray-700); border: 1px solid var(--ht-border-color); }
.ht-cbtn:hover { color: var(--ht-primary); border-color: rgba(var(--ht-primary-rgb), .45); }
.ht-cbtn .ht-count { margin-left: .2rem; }
.ht-csplit { display: inline-flex; align-items: stretch; flex-shrink: 0; }
.ht-csplit > .ht-cbtn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ht-csplit > .ht-cbtn:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; padding-left: .35rem; padding-right: .35rem; }
.ht-cicon { all: unset; cursor: pointer; width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border-radius: .45rem; color: var(--ht-gray-700); }
.ht-cicon:hover { background: rgba(var(--ht-primary-rgb), .1); color: var(--ht-primary); }

.ht-cbody { flex: 1; min-height: 0; display: flex; }
.ht-cwrap { flex: 1; min-width: 0; position: relative; }
.ht-ccanvas { position: absolute; inset: 0; }
.ht-cstatus { display: flex; gap: 1rem; align-items: center; padding: .3rem .8rem; border-top: 1px solid var(--ht-border-color); font-size: .68rem; min-height: 1.7rem; }
.ht-cstatus .hint { color: var(--ht-primary); font-weight: 600; }
.ht-csource { flex-shrink: 0; white-space: nowrap; }
.ht-cshortcuts { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ht-cnav { position: absolute; right: 4.5rem; bottom: 2.2rem; z-index: 8; display: flex; align-items: flex-end; gap: .3rem; }
.ht-cnav button, .ht-cspace summary { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; padding: 0; border: 1px solid var(--ht-border-color); border-radius: .35rem; background: var(--ht-card-bg, var(--ht-emphasis-bg)); color: var(--ht-gray-700); cursor: pointer; font-size: 1rem; }
.ht-cnav button[hidden] { display: none; }
.ht-cnav button:hover, .ht-cspace summary:hover { color: var(--ht-primary); border-color: var(--ht-primary); }
.ht-cspace { position: relative; }
.ht-cspace summary { list-style: none; font-size: .8rem; }
.ht-cspace summary::-webkit-details-marker { display: none; }
.ht-cspace label { position: absolute; right: 0; bottom: 2.1rem; display: flex; align-items: center; gap: .45rem; width: max-content; max-width: 20rem; padding: .6rem; border: 1px solid var(--ht-border-color); border-radius: .4rem; background: var(--ht-card-bg, var(--ht-emphasis-bg)); color: var(--ht-gray-700); font-size: .7rem; box-shadow: 0 .2rem .8rem #0003; }
.ht-cspace input { width: 3.8rem; padding: .15rem .3rem; border: 1px solid var(--ht-border-color); border-radius: .2rem; background: var(--ht-emphasis-bg); color: inherit; }

/* barre d'outils de dessin */
.ht-ctools { width: 2.9rem; flex: none; border-right: 1px solid var(--ht-border-color); display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: .45rem 0; overflow-y: auto; scrollbar-width: none; }
.ht-ctools .sep { width: 1.6rem; height: 1px; background: var(--ht-border-color); margin: .3rem 0; flex: none; }
.ht-tgrp { position: relative; }
.ht-tbtn { all: unset; cursor: pointer; position: relative; width: 2.15rem; height: 2.15rem; display: grid; place-items: center; border-radius: .5rem; color: var(--ht-gray-700);
  transition: background .12s, color .12s; }
.ht-tbtn:hover { background: rgba(var(--ht-primary-rgb), .08); color: var(--ht-primary); }
.ht-tbtn.on { background: rgba(var(--ht-primary-rgb), .14); color: var(--ht-primary); }
.ht-tbtn:focus-visible { outline: 2px solid var(--ht-primary); }
.ht-tbtn .badge-s { position: absolute; right: 3px; bottom: 2px; font-size: .52rem; font-style: normal; font-weight: 800; color: var(--ht-primary); }
.ht-tmore { all: unset; cursor: pointer; position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; }
.ht-tmore::after { content: ''; position: absolute; right: 2px; bottom: 2px; border-left: 5px solid transparent; border-bottom: 5px solid var(--ht-gray-500); }
.ht-tmore:hover::after { border-bottom-color: var(--ht-primary); }

/* panneaux flottants : sous-outils, menu du clic droit, menus de l'en-tête */
.ht-cfly, .ht-cmenu, .ht-cdrop { position: absolute; z-index: 20; background: var(--ht-card-bg); border: 1px solid var(--ht-border-color); border-radius: .6rem;
  box-shadow: 0 .6rem 1.6rem rgba(0, 0, 0, .14); padding: .3rem; min-width: 11rem; animation: ht-pop .12s ease-out; }
@keyframes ht-pop { from { opacity: 0; transform: translateY(-3px) scale(.98); } to { opacity: 1; transform: none; } }
.ht-cfly .ttl, .ht-cdrop .ttl { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ht-gray-500); padding: .3rem .55rem .2rem; }
.ht-cfly button, .ht-cmenu button, .ht-cdrop button { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: flex; align-items: center; gap: .55rem;
  padding: .38rem .55rem; border-radius: .4rem; font-size: .76rem; color: var(--ht-body-color); }
.ht-cfly button:hover, .ht-cmenu button:hover, .ht-cdrop button:hover { background: rgba(var(--ht-primary-rgb), .09); color: var(--ht-primary); }
.ht-cfly button.on, .ht-cdrop button.on { color: var(--ht-primary); font-weight: 700; }
.ht-cfly .ic { display: grid; place-items: center; color: inherit; }
.ht-cfly kbd { margin-left: auto; font-size: .6rem; background: var(--ht-gray-100); color: var(--ht-gray-600); border: 1px solid var(--ht-border-color); border-radius: .25rem;
  padding: .05rem .3rem; box-shadow: none; }
.ht-cmenu button.danger, .ht-cprops .danger { color: var(--ht-danger); }
.ht-cmenu button.danger:hover { background: rgba(var(--ht-danger-rgb), .1); color: var(--ht-danger); }
.ht-cdrop { min-width: 7rem; }
.ht-cdrop.wide { min-width: 15rem; }
.ht-cdrop button b { font-family: var(--ht-font-monospace); font-size: .7rem; min-width: 2.6rem; color: var(--ht-gray-700); }
.ht-cdrop button.on b { color: var(--ht-primary); }
.ht-cdrop button.on::after { content: '✓'; margin-left: auto; }

/* réglages du dessin sélectionné */
.ht-cprops { position: absolute; z-index: 15; top: .55rem; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: .25rem;
  background: var(--ht-card-bg); border: 1px solid var(--ht-border-color); border-radius: .65rem; padding: .3rem .4rem; box-shadow: 0 .4rem 1.2rem rgba(0, 0, 0, .12);
  animation: ht-pop .12s ease-out; }
.ht-cprops .sep { width: 1px; height: 1.2rem; background: var(--ht-border-color); margin: 0 .2rem; }
.ht-cprops button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; height: 1.6rem; border-radius: .4rem; color: var(--ht-gray-700); font-size: .72rem; }
.ht-cprops button:hover { background: rgba(var(--ht-primary-rgb), .09); color: var(--ht-primary); }
.ht-cprops .sw { width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 2px var(--ht-card-bg); border: 1px solid var(--sw); }
.ht-cprops .sw.on { outline: 2px solid var(--sw); outline-offset: 1px; }
.ht-cprops .wd { width: 1.6rem; justify-content: center; }
.ht-cprops .wd i { display: block; width: .9rem; background: currentColor; border-radius: 1px; }
.ht-cprops .wd.on, .ht-cprops .ls.on, .ht-cprops .ic.on { background: rgba(var(--ht-primary-rgb), .14); color: var(--ht-primary); }
.ht-cprops .ls { width: 1.6rem; justify-content: center; font-weight: 700; }
.ht-cprops .ic { width: 1.6rem; justify-content: center; }
.ht-cprops .ic svg, .ht-cprops .tx svg { width: 15px; height: 15px; }
.ht-cprops .tx { padding: 0 .5rem; font-weight: 600; }

.ht-cbtn { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.ht-cbtn svg { width: 14px; height: 14px; }
.ht-cstats b, .ht-cstats small { white-space: nowrap; }
@media (max-width: 1999.98px) { .ht-cstats span:nth-child(3) { display: none; } }
@media (max-width: 1849.98px) { .ht-cstats { display: none; } }
@media (max-width: 1399.98px) { .ht-chartpage { grid-template-columns: 12rem minmax(0, 1fr); } .ht-cstats { display: none; } }

/* ── v0.37 : réglages, liste et versions, menus enrichis ───────────────────────────────────────────────────────────── */
.ht-cprops .nm { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 700; color: var(--ht-heading-color); padding: 0 .3rem; white-space: nowrap; }
.ht-cprops .nm svg { width: 15px; height: 15px; color: var(--ht-primary); }
.ht-cprops .swc { position: relative; width: 1.05rem; height: 1.05rem; border-radius: 50%; cursor: pointer; overflow: hidden;
  background: conic-gradient(var(--ht-danger), var(--ht-warning), var(--ht-success), var(--ht-info), var(--ht-primary), var(--ht-danger)); }
.ht-cprops .swc input { position: absolute; inset: -4px; opacity: 0; cursor: pointer; }
.ht-cprops .ls i { display: block; width: .95rem; border-top: 2px solid currentColor; }
.ht-cprops .ls i.dashed { border-top-style: dashed; } .ht-cprops .ls i.dotted { border-top-style: dotted; }
.ht-tbtn:disabled { opacity: .35; cursor: default; background: none; color: var(--ht-gray-700); }
.ht-tbtn .badge-n { position: absolute; right: 1px; top: 1px; font-size: .5rem; font-style: normal; font-weight: 800; min-width: .85rem; height: .85rem; line-height: .85rem;
  border-radius: .45rem; text-align: center; background: rgba(var(--ht-primary-rgb), .15); color: var(--ht-primary); }

.ht-cmenu { min-width: 14rem; }
.ht-cmenu .ttl { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ht-gray-500); padding: .3rem .55rem .2rem; }
.ht-cmenu hr { margin: .25rem .3rem; border-color: var(--ht-border-color); opacity: 1; }
.ht-cmenu button svg { width: 15px; height: 15px; flex: none; }
.ht-cmenu kbd { margin-left: auto; font-size: .6rem; background: var(--ht-gray-100); color: var(--ht-gray-600); border: 1px solid var(--ht-border-color); border-radius: .25rem; padding: .05rem .3rem; box-shadow: none; }
.ht-cmenu button:disabled { opacity: .4; cursor: default; background: none; color: var(--ht-body-color); }

/* panneau de droite : réglages d'un dessin, liste des dessins et versions */
.ht-cpanel { position: absolute; z-index: 16; top: .55rem; right: 4.6rem; width: 17.5rem; max-height: calc(100% - 1.1rem); display: flex; flex-direction: column;
  background: var(--ht-card-bg); border: 1px solid var(--ht-border-color); border-radius: .7rem; box-shadow: 0 .6rem 1.6rem rgba(0, 0, 0, .16); animation: ht-pop .12s ease-out; }
.ht-cpanel .ph { display: flex; align-items: center; justify-content: space-between; padding: .55rem .7rem; border-bottom: 1px solid var(--ht-border-color); }
.ht-cpanel .ph span { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--ht-heading-color); }
.ht-cpanel .ph svg { color: var(--ht-primary); width: 16px; height: 16px; }
.ht-cpanel .x { all: unset; cursor: pointer; color: var(--ht-gray-500); font-size: .8rem; padding: .1rem .3rem; border-radius: .3rem; }
.ht-cpanel .x:hover { color: var(--ht-danger); background: rgba(var(--ht-danger-rgb), .1); }
.ht-cpanel .pb { padding: .45rem .7rem .7rem; overflow-y: auto; scrollbar-width: thin; display: flex; flex-direction: column; gap: .4rem; }
.ht-cpanel .grp { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ht-gray-500); margin-top: .35rem; }
.ht-cpanel .ck { display: flex; align-items: center; gap: .45rem; font-size: .75rem; color: var(--ht-body-color); cursor: pointer; margin: 0; }
.ht-cpanel .ck input { accent-color: var(--ht-primary); width: .9rem; height: .9rem; }
.ht-cpanel .lvls { display: grid; grid-template-columns: repeat(4, 1fr); gap: .2rem .4rem; }
.ht-cpanel .ck.sm { font-size: .7rem; font-family: var(--ht-font-monospace); }
.ht-cpanel .fl { display: flex; flex-direction: column; gap: .2rem; font-size: .7rem; color: var(--ht-gray-700); margin: 0; }
.ht-cpanel .fl b { color: var(--ht-primary); font-family: var(--ht-font-monospace); }
.ht-cpanel .fl input[type="text"], .ht-cpanel .fl input[type="number"], .ht-cpanel .fl select { border: 1px solid var(--ht-border-color); border-radius: .4rem; padding: .3rem .45rem;
  font-size: .76rem; background: var(--ht-body-bg); color: var(--ht-body-color); }
.ht-cpanel .fl input:focus, .ht-cpanel .fl select:focus { outline: 2px solid rgba(var(--ht-primary-rgb), .35); border-color: var(--ht-primary); }
.ht-cpanel .fl input[type="range"] { accent-color: var(--ht-primary); }
.ht-cpanel .hint { font-size: .68rem; color: var(--ht-gray-600); line-height: 1.35; }
.ht-cpanel .hint.warn { color: var(--ht-warning); }
.ht-cpanel .lnk { all: unset; cursor: pointer; color: var(--ht-primary); font-weight: 700; text-decoration: underline; }
.ht-cpanel .it { display: flex; align-items: center; gap: .3rem; padding: .25rem .3rem; border-radius: .4rem; font-size: .73rem; color: var(--ht-body-color); }
.ht-cpanel .it:hover { background: rgba(var(--ht-primary-rgb), .06); }
.ht-cpanel .it.off { opacity: .5; }
.ht-cpanel .it .ic { display: grid; place-items: center; color: var(--ht-gray-600); }
.ht-cpanel .it .ic svg { width: 15px; height: 15px; }
.ht-cpanel .it .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ht-cpanel .it button { all: unset; cursor: pointer; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: .35rem; color: var(--ht-gray-500); }
.ht-cpanel .it button svg { width: 14px; height: 14px; }
.ht-cpanel .it button:hover, .ht-cpanel .it button.on { color: var(--ht-primary); background: rgba(var(--ht-primary-rgb), .1); }
.ht-cpanel .it button.danger:hover { color: var(--ht-danger); background: rgba(var(--ht-danger-rgb), .1); }
.ht-cpanel .it button.tx { width: auto; padding: 0 .45rem; font-size: .68rem; font-weight: 700; color: var(--ht-primary); }

/* ── v0.38 : réglages des indicateurs ──────────────────────────────────────────────────────────────────────────────── */
/* v3.29 : le menu Indicateurs — sa recherche en tête, sa liste qui défile (sa hauteur : jusqu'au bas de l'écran, openDrop) */
.ht-cdrop.ind { display: flex; flex-direction: column; width: 19rem; }
.ht-cdrop.ind .ilist { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: .2rem 0; }
.ht-isearch { flex: none; width: 100%; box-sizing: border-box; margin: .1rem 0 .15rem; padding: .32rem .55rem; font-size: .78rem; border-radius: .4rem;
  border: 1px solid var(--ht-border-color); background: var(--ht-body-bg); color: var(--ht-body-color); outline: none; }
.ht-isearch:focus { border-color: var(--ht-primary); }
.ht-cdrop .irow { display: flex; align-items: center; gap: .2rem; }
.ht-cdrop .irow > button[data-ind] { flex: 1; }
.ht-cdrop .irow.masked > button[data-ind] { opacity: .55; white-space: nowrap; }     /* v1.73 : un indicateur masqué */
.ht-cdrop .irow .ht-masked { flex: none; color: var(--ht-warning); font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.ht-cdrop .iset { width: 1.8rem !important; flex: none; justify-content: center; padding: .38rem 0 !important; color: var(--ht-gray-600) !important; }
.ht-cdrop .iset::after { content: none !important; }
.ht-cdrop .iset svg { width: 15px; height: 15px; }
.ht-cdrop .iset:hover { color: var(--ht-primary) !important; }
.ht-cpanel .prm { display: flex; align-items: flex-end; gap: .3rem; }
.ht-cpanel .prm .fl { flex: 1; }
.ht-cpanel .prm .x { margin-bottom: .35rem; }
.ht-cpanel .clr { display: flex; align-items: center; gap: .5rem; font-size: .74rem; color: var(--ht-body-color); margin: 0; cursor: pointer; }
.ht-cpanel .clr input { width: 1.6rem; height: 1.25rem; padding: 0; border: 1px solid var(--ht-border-color); border-radius: .3rem; background: none; cursor: pointer; }
.ht-cpanel .lnk { align-self: flex-start; font-size: .72rem; }

/* ── v1.94 : le panneau des réglages d'un indicateur — plus large, sa description, des sections repliables, les champs en grille ou
   « nom à gauche, valeur à droite », des interrupteurs, et en bas, toujours visibles, « Réinitialiser » et « Retirer » ── */
.ht-cpanel:has(> .pb.ind) { width: 20.5rem; }
.ht-cpanel .pb.ind { gap: 0; padding-top: .15rem; padding-bottom: .2rem; }
.ht-cpanel .pb.ind .desc { font-size: .68rem; color: var(--ht-gray-600); line-height: 1.4; padding: .2rem 0 .55rem; }
.ht-cpanel .sec { border-top: 1px solid var(--ht-border-color); }
.ht-cpanel .sec > .sh { all: unset; box-sizing: border-box; display: flex; align-items: center; width: 100%; cursor: pointer; padding: .55rem 0 .45rem;
  font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ht-gray-500); }
.ht-cpanel .sec > .sh:hover, .ht-cpanel .sec > .sh:focus-visible { color: var(--ht-primary); }
.ht-cpanel .sec > .sh::after { content: ''; margin-left: auto; width: .36rem; height: .36rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.ht-cpanel .sec.closed > .sh::after { transform: rotate(-45deg); }
.ht-cpanel .sec > .sb { display: flex; flex-direction: column; gap: .45rem; padding: .05rem 0 .7rem; }
.ht-cpanel .sec.closed > .sb { display: none; }
.ht-cpanel .sb .sub { font-size: .64rem; color: var(--ht-gray-600); margin: .15rem 0 -.15rem; }
.ht-cpanel .sb .hint { margin-top: -.2rem; }
.ht-cpanel .g2, .ht-cpanel .g3, .ht-cpanel .g4 { display: grid; gap: .45rem .6rem; align-items: center; }
.ht-cpanel .g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ht-cpanel .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ht-cpanel .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ht-cpanel .wrap { display: flex; flex-wrap: wrap; gap: .45rem 1.1rem; }
.ht-cpanel .pb.ind .ht-switch { font-size: .72rem; color: var(--ht-body-color); min-width: 0; }
/* un réglage : son nom à gauche, sa valeur à droite */
.ht-cpanel .fr { display: flex; align-items: center; justify-content: space-between; gap: .6rem; font-size: .72rem; color: var(--ht-gray-700); margin: 0; }
.ht-cpanel .fr > span:first-child { min-width: 0; }
/* un petit champ nommé au-dessus (les paramètres courts, en grille) */
.ht-cpanel .fs { display: flex; flex-direction: column; gap: .15rem; font-size: .62rem; color: var(--ht-gray-600); margin: 0; min-width: 0; }
.ht-cpanel .fs > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ht-cpanel .pb.ind input[type="number"], .ht-cpanel .pb.ind input[type="text"], .ht-cpanel .pb.ind input[type="datetime-local"], .ht-cpanel .pb.ind select {
  border: 1px solid var(--ht-border-color); border-radius: .4rem; padding: .22rem .4rem; font-size: .74rem; background: var(--ht-body-bg); color: var(--ht-body-color); min-width: 0; }
.ht-cpanel .pb.ind input:focus, .ht-cpanel .pb.ind select:focus { outline: 2px solid rgba(var(--ht-primary-rgb), .35); border-color: var(--ht-primary); }
.ht-cpanel .fr input[type="number"], .ht-cpanel .fr input[type="text"], .ht-cpanel .cmb input[type="number"], .ht-cpanel .cmb input[type="text"] { width: 5.4rem; text-align: right; flex: none; }
.ht-cpanel .fr select { width: auto; min-width: 5.4rem; max-width: 10.5rem; flex: none; }
.ht-cpanel .fs input { width: 100%; text-align: center; font-family: var(--ht-font-monospace); }
.ht-cpanel .pb.ind input[type="color"] { width: 1.6rem; height: 1.2rem; padding: 0; border: 1px solid var(--ht-border-color); border-radius: .3rem; background: none; cursor: pointer; flex: none; }
.ht-cpanel .pb.ind .clr { font-size: .72rem; min-width: 0; }
.ht-cpanel .pb.ind .clr span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* une rangée : un interrupteur, puis ses réglages à droite (pâlis quand il est coupé) */
.ht-cpanel .cmb { display: flex; align-items: center; gap: .5rem; }
.ht-cpanel .cmb > .ht-switch { flex: 1; }
.ht-cpanel .cmb .cmb-r { display: inline-flex; align-items: center; gap: .35rem; flex: none; transition: opacity .15s; }
.ht-cpanel .cmb .cmb-r i { font-style: normal; font-size: .7rem; color: var(--ht-gray-600); }
.ht-cpanel .cmb:has(> .ht-switch input:not(:checked)) .cmb-r { opacity: .45; }
/* une ligne par période (MA, EMA, RSI, moyennes du volume) : sa couleur, son nom, sa période, ✕ */
.ht-cpanel .ln { display: grid; grid-template-columns: auto minmax(0, 1fr) 4.6rem auto; align-items: center; gap: .5rem; font-size: .74rem; color: var(--ht-body-color); }
.ht-cpanel .ln .nm { font-family: var(--ht-font-monospace); font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ht-cpanel .ln input[type="number"] { width: 100%; text-align: right; }
.ht-cpanel .ln .x:disabled { visibility: hidden; }
/* l'épaisseur des lignes : des boutons */
.ht-cpanel .seg { display: inline-flex; border: 1px solid var(--ht-border-color); border-radius: .4rem; overflow: hidden; flex: none; }
.ht-cpanel .seg button { all: unset; cursor: pointer; padding: .14rem .55rem; font-size: .7rem; color: var(--ht-gray-600); font-family: var(--ht-font-monospace); }
.ht-cpanel .seg button + button { border-left: 1px solid var(--ht-border-color); }
.ht-cpanel .seg button:hover { color: var(--ht-primary); }
.ht-cpanel .seg button.on { background: rgba(var(--ht-primary-rgb), .15); color: var(--ht-primary); font-weight: 700; }
/* en bas, toujours visibles */
.ht-cpanel .pf { display: flex; align-items: center; gap: .4rem; padding: .5rem .7rem; border-top: 1px solid var(--ht-border-color); }
/* v1.96 : un script Pine — son erreur, ses avertissements, ses entrées en rangée (inline), ses tracés (un interrupteur chacun) */
.ht-cpanel .ht-perr { font-size: .72rem; color: var(--ht-danger); background: rgba(var(--ht-danger-rgb), .08); border-radius: .4rem; padding: .4rem .5rem; margin: 0 0 .5rem; }
.ht-cpanel .ht-pwarn { font-size: .68rem; color: var(--ht-warning); margin: 0 0 .35rem; line-height: 1.35; }
.ht-cpanel .cmb .il { font-size: .64rem; color: var(--ht-gray-600); white-space: nowrap; }
.ht-cpanel .cmb > .nm { flex: 1; min-width: 0; font-size: .72rem; color: var(--ht-gray-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ht-cpanel .cmb select { max-width: 8rem; }
.ht-cpanel .cmb .cmb-r { flex-wrap: wrap; justify-content: flex-end; }
.ht-cpanel .pb.ind textarea { border: 1px solid var(--ht-border-color); border-radius: .4rem; padding: .3rem .4rem; font-size: .74rem; background: var(--ht-body-bg); color: var(--ht-body-color);
  width: 100%; resize: vertical; font-family: var(--ht-font-monospace); }
.ht-cpanel .fr input[type="datetime-local"] { width: 11.5rem; flex: none; }
.ht-pine-tip { display: inline-flex; position: static; flex: none; align-items: center; justify-content: center; font-style: normal; font-size: .72rem; color: var(--ht-gray-500); margin-left: .3rem; cursor: help; }
.ht-pouts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem .6rem; }
.ht-pvers { display: flex; flex-direction: column; gap: .1rem; margin-top: .4rem; font-size: .72rem; color: var(--ht-gray-600); }
.ht-pvers .on { color: var(--ht-body-color); font-weight: 600; }
.ht-pout { min-width: 0; white-space: nowrap; overflow: hidden; }
.ht-pout .dot { width: .55rem; height: .55rem; border-radius: 50%; flex: none; font-style: normal; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }

/* ── le moteur intégré (page Trading) ──────────────────────────────────────────────────────────────────────────────── */
.ht-kc { cursor: default; }
.ht-cemb { position: absolute; inset: 0; display: flex; flex-direction: column; min-height: 0; }
.ht-cemb .ht-ctools { width: 2.6rem; }
.ht-cemb .ht-tbtn { width: 1.95rem; height: 1.95rem; }
.ht-cemb .ht-cstatus { font-size: .64rem; padding: .25rem .5rem; min-height: 1.5rem; }
/* v2.79 : le solde du compte affiché, en haut à gauche : une ligne de légende de plus (même police, mêmes couleurs que la légende
   des prix, qui descend d'autant : chart.js BAL_H) ; les clics passent au graphique, sauf sur le nom (son infobulle) */
.ht-cbal { position: absolute; z-index: 6; top: 8px; left: 10px; max-width: calc(100% - 6rem); height: 19px; display: flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 500; line-height: 19px; color: var(--ht-body-color); white-space: nowrap; overflow: hidden; pointer-events: none;
  font-variant-numeric: tabular-nums; }
.ht-cbal .nm { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; color: var(--ht-heading-color); pointer-events: auto; cursor: default; }
.ht-cbal .nm.rp { color: var(--ht-warning); }
.ht-cbal .nm .acct-dot { margin: 0; }
.ht-cbal i { font-style: normal; color: var(--ht-gray-600); margin-right: 3px; }
.ht-cbal b { font-weight: 600; }
.ht-cbal .ht-cbal-w { pointer-events: auto; cursor: default; }

/* ── le replay : la barre de commande et de trading simulé ─────────────────────────────────────────────────────────── */
.ht-cbtn.active { color: var(--ht-warning); border-color: rgba(var(--ht-warning-rgb), .6); background: rgba(var(--ht-warning-rgb), .12); }
/* v1.66 : le stop suiveur d'Ichimoku System (Achat) — choisir sa bougie de départ sur le graphique (en haut à droite) */
.ht-ctrail { position: absolute; z-index: 13; top: .45rem; right: 4.6rem; display: flex; align-items: center; gap: .3rem; font-size: .68rem; }
.ht-ctrail button, .ht-ctrail .hint { border: 1px solid var(--ht-border-color); background: var(--ht-card-bg); color: var(--ht-gray-700); border-radius: .4rem;
  padding: .12rem .45rem; font-weight: 700; line-height: 1.4; }
.ht-ctrail button:hover { color: #e040e0; border-color: #e040e0; }
.ht-ctrail .grp { display: inline-flex; gap: .2rem; }
.ht-ctrail button.on { color: var(--ht-success); border-color: var(--ht-success); }
.ht-ctrail .hint { border-color: #e040e0; color: var(--ht-gray-900); font-weight: 600; }
.ht-cwrap.ht-picking, .ht-cwrap.ht-picking canvas { cursor: crosshair !important; }
.ht-creplay { position: absolute; z-index: 14; left: .6rem; right: 4.6rem; bottom: .6rem; display: flex; align-items: center; gap: .35rem; flex-wrap: wrap;
  background: var(--ht-card-bg); border: 1px solid rgba(var(--ht-warning-rgb), .55); border-radius: .7rem; padding: .35rem .5rem; box-shadow: 0 .5rem 1.4rem rgba(0, 0, 0, .18);
  font-size: .72rem; animation: ht-pop .12s ease-out; }
.ht-creplay .rp-badge { font-size: .58rem; font-weight: 800; letter-spacing: .08em; color: var(--ht-warning); background: rgba(var(--ht-warning-rgb), .14);
  border: 1px solid rgba(var(--ht-warning-rgb), .45); border-radius: .3rem; padding: .1rem .35rem; }
.ht-creplay .hint { color: var(--ht-gray-700); }
.ht-creplay .sep { width: 1px; height: 1.3rem; background: var(--ht-border-color); margin: 0 .15rem; }
.ht-creplay .rbtn { all: unset; cursor: pointer; padding: .22rem .55rem; border-radius: .4rem; font-weight: 700; color: var(--ht-gray-700); border: 1px solid var(--ht-border-color); white-space: nowrap; }
.ht-creplay .rbtn:hover { color: var(--ht-primary); border-color: rgba(var(--ht-primary-rgb), .5); }
.ht-creplay .rbtn:disabled { opacity: .4; cursor: default; }
.ht-creplay .rbtn.ic { padding: .18rem .45rem; font-size: .8rem; }
.ht-creplay .rbtn.main { color: var(--ht-warning); border-color: rgba(var(--ht-warning-rgb), .6); background: rgba(var(--ht-warning-rgb), .12); }
.ht-creplay .rbtn.buy { color: var(--ht-success); border-color: rgba(var(--ht-success-rgb), .55); background: rgba(var(--ht-success-rgb), .12); }
.ht-creplay .rbtn.sell { color: var(--ht-danger); border-color: rgba(var(--ht-danger-rgb), .55); background: rgba(var(--ht-danger-rgb), .12); }
.ht-creplay .rsel { border: 1px solid var(--ht-border-color); border-radius: .4rem; background: var(--ht-body-bg); color: var(--ht-body-color); font-size: .72rem; padding: .15rem .25rem; }
.ht-creplay .rdate { color: var(--ht-heading-color); font-weight: 700; padding: 0 .2rem; }
.ht-creplay .rfld { display: inline-flex; align-items: center; gap: .25rem; margin: 0; color: var(--ht-gray-600); }
.ht-creplay .rfld input { width: 4.2rem; border: 1px solid var(--ht-border-color); border-radius: .35rem; background: var(--ht-body-bg); color: var(--ht-body-color); font-size: .72rem; padding: .12rem .3rem; text-align: right; }
.ht-creplay .rfld i { font-style: normal; }
.ht-creplay .rkv { display: inline-flex; flex-direction: column; line-height: 1.1; padding: 0 .2rem; }
.ht-creplay .rkv small { font-size: .55rem; text-transform: uppercase; color: var(--ht-gray-600); }
.ht-cpanel .rp-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem .7rem; }
.ht-cpanel .rp-kpis span { display: flex; flex-direction: column; line-height: 1.2; }
.ht-cpanel .rp-kpis small { font-size: .6rem; text-transform: uppercase; color: var(--ht-gray-600); }
.ht-cpanel .rp-kpis b { font-family: var(--ht-font-monospace); font-size: .82rem; color: var(--ht-body-color); }
.ht-cpanel .it .ht-dir { font-size: .6rem; padding: .05rem .3rem; }
.ht-cpanel .it b { font-family: var(--ht-font-monospace); font-size: .74rem; }
.ht-creplay .rbtn.ic { display: inline-grid; place-items: center; width: 1.9rem; height: 1.55rem; padding: 0; }

/* le menu « Trades » : cases à cocher et période */
.ht-cbtn.active-soft { color: var(--ht-primary); border-color: rgba(var(--ht-primary-rgb), .45); }
.ht-cdrop button.ck { gap: .5rem; }
.ht-cdrop button.ck i { width: .85rem; height: .85rem; border-radius: .25rem; border: 1.5px solid var(--ht-gray-500); flex: none; display: grid; place-items: center; }
.ht-cdrop button.ck.on i { background: var(--ht-primary); border-color: var(--ht-primary); }
.ht-cdrop button.ck.on i::after { content: ''; width: .35rem; height: .2rem; border-left: 2px solid var(--ht-card-bg); border-bottom: 2px solid var(--ht-card-bg); transform: rotate(-45deg) translate(1px, -1px); }
.ht-cdrop button.ck.on::after { content: none !important; }
.ht-cdrop .seg { display: flex; gap: .2rem; padding: 0 .3rem .3rem; }
.ht-cdrop .seg button { justify-content: center; padding: .25rem .2rem; border: 1px solid var(--ht-border-color); }
.ht-cdrop .seg button.on { border-color: var(--ht-primary); }
.ht-cdrop .seg button.on::after { content: none !important; }

/* la source des prix du graphique (Hyperliquid / Coinbase) */
.ht-src { display: inline-flex; gap: 1px; margin-left: .4rem; background: var(--ht-gray-100); padding: 2px; border-radius: .4rem; align-self: center; }
.ht-src button { all: unset; cursor: pointer; font-size: .6rem; font-weight: 700; padding: .12rem .4rem; border-radius: .3rem; color: var(--ht-gray-600); }
.ht-src button.on { background: var(--ht-card-bg); color: var(--ht-primary); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }

/* l'info-bulle des boutons et lignes du graphique (v0.57) */
.ht-ctip { position: absolute; z-index: 25; pointer-events: none; max-width: 18rem; padding: .25rem .5rem; border-radius: .4rem;
  background: var(--ht-card-bg); border: 1px solid var(--ht-border-color); box-shadow: 0 .3rem .8rem rgba(0, 0, 0, .25);
  font-size: .7rem; color: var(--ht-gray-900); line-height: 1.3; }

/* le compte affiché sur le graphique (v0.57) */
.ht-acctsel { width: auto; max-width: 11rem; height: 1.7rem; padding: .1rem 1.6rem .1rem .5rem; font-size: .7rem; font-weight: 600; align-self: center; margin-left: .4rem; }
/* v1.60 : la flèche du menu des comptes ne mord plus sur le texte (plus de place à droite, flèche plus petite, menu plus large) */
.ht-acctsel { max-width: 13.5rem; padding-right: 1.8rem; background-position: right .45rem center; background-size: 11px 8px; text-overflow: ellipsis; }

/* les puces A…M / TP1…TP5 des options de l'indicateur [SD] Ichimoku (v0.88) */
.ht-cpanel .ht-ochips { display: flex; flex-wrap: wrap; gap: .25rem; }
.ht-cpanel .ht-ochips label { display: inline-flex; align-items: center; justify-content: center; min-width: 1.7rem; padding: .1rem .35rem; border-radius: .3rem; font-size: .7rem; font-weight: 700;
  cursor: pointer; color: var(--ht-gray-600); border: 1px solid var(--ht-border-color); margin: 0; }
.ht-cpanel .ht-ochips label.on { color: var(--ht-primary); border-color: var(--ht-primary); background: rgba(var(--ht-primary-rgb), .12); }
.ht-cpanel .ht-ochips input { display: none; }

/* watchlist de la page Chart plus serrée (v1.04) */
.ht-cwr { padding: .17rem .45rem; font-size: .72rem; border-radius: .4rem; }
.ht-cwr .px { font-size: .7rem; }
.ht-cwr .chg { font-size: .64rem; }

/* v1.45 : la liste des alertes (bouton « 🔔 Alertes ») */
.ht-cdrop .al-row { display: flex; align-items: stretch; gap: 2px; }
.ht-cdrop .al-row > button:first-child { flex: 1; flex-wrap: wrap; row-gap: 0; }
.ht-cdrop .al-row > button small, .ht-cdrop button small { flex-basis: 100%; font-size: .62rem; color: var(--ht-gray-600); padding-left: 1.4rem; }
.ht-cdrop .al-row .ic { width: auto; flex: none; padding: .3rem .45rem; color: var(--ht-gray-500); }
.ht-cdrop .al-row .ic:hover { color: var(--ht-danger); }
.ht-cdrop .al-row.off { opacity: .55; }
.ht-cdrop .al-row .pos { color: var(--ht-success); font-size: .68rem; } .ht-cdrop .al-row .neg { color: var(--ht-danger); font-size: .68rem; }
.ht-cdrop .hint { font-size: .64rem; color: var(--ht-gray-500); line-height: 1.35; }

/* v3.06 : le temps restant de la bougie en cours, sous l'étiquette du dernier prix (sur l'axe des prix) */
.ht-ccd { position: absolute; z-index: 6; pointer-events: none; text-align: center; font: 500 10.5px/1 var(--bs-font-monospace, ui-monospace, monospace);
  padding: 3px 0; border-radius: 2px; color: #fff; background: var(--ht-gray-600);
  font-variant-numeric: tabular-nums; }

/* v3.30 : le panneau des indicateurs, comme TradingView — au centre, l'écran assombri autour (un clic dehors le ferme) ; les catégories
   à gauche, la recherche en tête, la liste qui défile ; sur un téléphone : les catégories en bande au-dessus */
.ht-cdrop.ind.ipanel { position: fixed; z-index: 1060; top: 9vh; left: 50%; transform: translateX(-50%); width: min(46rem, calc(100vw - 32px));
  height: min(36rem, 82vh); max-height: none; padding: 0; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, .35), 0 0 0 100vmax rgba(0, 0, 0, .32); animation: ht-ipop .14s ease-out; }
@keyframes ht-ipop { from { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(.985); } to { opacity: 1; transform: translateX(-50%); } }
.ipanel .ip-h { flex: none; display: flex; align-items: center; gap: .7rem; padding: .6rem .7rem .6rem 1rem; border-bottom: 1px solid var(--ht-border-color); }
.ipanel .ip-h > b { font-size: .92rem; font-weight: 700; color: var(--ht-heading-color); }
.ipanel .ip-h .ht-isearch { flex: 1; margin: 0; padding: .4rem .65rem; font-size: .82rem; }
.ipanel .ip-x { width: auto !important; flex: none; padding: .3rem .5rem !important; color: var(--ht-gray-600) !important; }
.ipanel .ip-x::after, .ipanel .ip-cats button::after, .ipanel .istar::after { content: none !important; }
.ipanel .ip-b { flex: 1; min-height: 0; display: flex; }
.ipanel .ip-cats { flex: none; width: 12rem; display: flex; flex-direction: column; gap: 1px; padding: .45rem; overflow-y: auto; border-right: 1px solid var(--ht-border-color);
  background: rgba(var(--ht-primary-rgb), .025); }
.ipanel .ip-cats button { padding: .42rem .6rem; border-radius: .4rem; font-size: .78rem; font-weight: 600; color: var(--ht-gray-700); }
.ipanel .ip-cats button.on { background: rgba(var(--ht-primary-rgb), .13); color: var(--ht-primary); }
.ipanel .ip-cats button i { margin-left: auto; font-style: normal; font-size: .64rem; font-weight: 700; color: var(--ht-gray-500); }
.ipanel .ilist { flex: 1; min-width: 0; margin: 0; padding: .35rem .45rem; }
.ipanel .ilist .isec + .isec { margin-top: .25rem; }
.ipanel .istar { width: 1.7rem !important; flex: none; justify-content: center; padding: .38rem 0 !important; color: var(--ht-gray-400) !important; font-size: .9rem; }
.ipanel .istar:hover { color: var(--ht-warning) !important; }
.ipanel .istar.on { color: var(--ht-warning) !important; }
.ipanel .ip-f { flex: none; display: flex; align-items: center; gap: .8rem; padding: .3rem .5rem; border-top: 1px solid var(--ht-border-color); }
.ipanel .ip-f > button { width: auto; }
.ipanel .ip-f .hint { margin-left: auto; font-size: .66rem; color: var(--ht-gray-500); padding-right: .4rem; }
@media (max-width: 599.98px) {
  .ht-cdrop.ind.ipanel { top: 8px; height: calc(100vh - 16px); }
  .ipanel .ip-b { flex-direction: column; }
  .ipanel .ip-cats { width: auto; flex-direction: row; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid var(--ht-border-color); scrollbar-width: none; }
  .ipanel .ip-cats button { width: auto; flex: none; white-space: nowrap; }
  .ipanel .ip-f .hint { display: none; }
}
/* v3.31 : ce que fait un clic, dit sur la ligne — actif : « ✓ Actif » (au survol : « ✕ Retirer ») ; sinon, au survol : « ＋ Ajouter » */
.ipanel .irow > button[data-ind].on { background: rgba(var(--ht-success-rgb), .08); }
.ipanel .irow > button[data-ind].on::after, .ipanel .irow > button[data-ind]::after { content: none !important; }
.ipanel .iact { margin-left: auto; flex: none; font-size: .66rem; font-weight: 700; }
.ipanel .iact em { font-style: normal; padding: .08rem .4rem; border-radius: .3rem; }
.ipanel .iact .o { color: var(--ht-success); background: rgba(var(--ht-success-rgb), .12); }
.ipanel .iact .r { display: none; color: var(--ht-danger); background: rgba(var(--ht-danger-rgb), .12); }
.ipanel .iact .a { visibility: hidden; color: var(--ht-primary); background: rgba(var(--ht-primary-rgb), .12); }
.ipanel .irow > button[data-ind]:hover .iact .o { display: none; }
.ipanel .irow > button[data-ind]:hover .iact .r { display: inline; }
.ipanel .irow > button[data-ind]:hover .iact .a, .ipanel .irow > button[data-ind]:focus-visible .iact .a { visibility: visible; }
.ipanel .irow > button[data-ind].on:hover { background: rgba(var(--ht-danger-rgb), .07); color: var(--ht-danger); }