@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════════
   PIPSTER GOLD CLASSIC MATRIX — panneau du dock et section de réglages
   ─────────────────────────────────────────────────────────────────────
   Aucune couleur en dur : tout passe par les jetons du design system, qui
   sont redéfinis par le thème clair, le thème sombre et chaque peau. C'est
   la seule façon pour ce panneau de suivre les trois sans être réécrit.

   Cette feuille est chargée APRÈS style.css et saas-terminal.css, mais
   AVANT la peau du terminal : elle décrit un composant neuf, elle n'a rien
   à surcharger, et la peau doit garder le dernier mot.
   ═══════════════════════════════════════════════════════════════════ */

#gcPanel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.gc-empty {
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--text-3);
  padding: 6px;
}

.gc-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

/* ─── Bandeau multi-unités ───────────────────────────────────────────────
   Cinq colonnes égales : la lecture se fait en balayant une ligne, pas en
   cherchant où commence chaque unité. `minmax(0, 1fr)` et non `1fr` — une
   piste `auto` affame sa voisine dès qu'un libellé s'allonge. */
.gc-mtf {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 3px;
}

.gc-tf {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 2px;
  border-radius: 5px;
  background: rgb(var(--veil) / .04);
  min-width: 0;
}

.gc-tf-k {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-3);
}

.gc-tf-v {
  font-size: 9.5px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 4px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ─── Faits ─────────────────────────────────────────────────────────── */

.gc-facts {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0;
}

.gc-facts > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 2.5px 6px;
  min-width: 0;
}

.gc-facts > div:nth-child(odd) { background: rgb(var(--veil) / .03); }

.gc-facts dt {
  font-size: 10px;
  color: var(--text-3);
  white-space: nowrap;
}

.gc-facts dd {
  margin: 0;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  text-align: end;          /* `end` et non `right` : suit le sens de lecture */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gc-facts dd.tv-bull,
.gc-facts dd.tv-bear,
.gc-facts dd.tv-neutral {
  /* Ces classes portent un fond de pastille ailleurs dans le terminal ;
     ici on ne garde que l'encre, sinon chaque ligne devient un bouton. */
  background: none;
  box-shadow: none;
  padding: 0;
}

/* ─── Setup ─────────────────────────────────────────────────────────── */

.gc-nosetup {
  margin: 0;
  padding: 4px 6px;
  font-size: 10px;
  line-height: 1.5;
  color: var(--text-3);
}

.gc-setup-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 5px;
  font-size: 10.5px;
}

.gc-setup-h b { font-size: 11px; letter-spacing: .06em; }

.gc-setup-h.is-long  { background: var(--up-soft);   color: var(--up); }
.gc-setup-h.is-short { background: var(--down-soft); color: var(--down); }

.gc-grade {
  font-size: 9.5px;
  font-weight: 600;
  opacity: .85;
  text-align: end;
}

.gc-plan {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 3px 6px;
  font-size: 10px;
  color: var(--text-3);
}

.gc-plan b {
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

.gc-tps {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 6px;
}

.gc-tp {
  font-size: 9.5px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgb(var(--veil) / .05);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

/* Un objectif encaissé se lit d'un coup d'œil : c'est la seule chose qui
   sépare un plan en cours d'un plan déjà servi. */
.gc-tp.is-hit {
  background: var(--up-soft);
  color: var(--up);
}

.gc-warns {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 6px;
}

.gc-warn {
  font-size: 9.5px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--warn-soft);
  color: var(--warn);
}

/* ─── Avertissement de responsabilité ────────────────────────────────────
   Discret mais toujours présent : il n'est pas décoratif, il dit ce que
   l'outil est et ce qu'il n'est pas. */
.gc-note {
  margin: 0;
  padding: 4px 6px 2px;
  font-size: 9px;
  line-height: 1.45;
  color: var(--text-3);
  opacity: .8;
}

/* ─── Section des réglages ──────────────────────────────────────────── */

.gc-preset-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sm-row.gc-sub label {
  /* Les bascules d'affichage sont des enfants du module : légèrement en
     retrait, elles se lisent comme une liste et non comme dix réglages
     indépendants de plus. */
  padding-inline-start: 12px;
  color: var(--text-2);
}

.gc-reset {
  font-size: 10.5px;
  padding: 4px 10px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text-2);
  cursor: pointer;
}

.gc-reset:hover {
  background: rgb(var(--veil) / .06);
  color: var(--text);
}

/* ─── Mobile ────────────────────────────────────────────────────────────
   Sous 420 px, cinq colonnes d'unités ne tiennent plus : elles passent en
   deux rangs plutôt qu'en colonnes écrasées de 40 px. */
@media (max-width: 420px) {
  .gc-mtf { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gc-facts > div { flex-wrap: wrap; gap: 2px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   RÉGLAGES D'OUVERTURE — bouton de capture (administration uniquement)
   ─────────────────────────────────────────────────────────────────────
   Il vit dans le pied du panneau de réglages, à côté d'« Annuler » et
   d'« Appliquer », mais il ne fait pas la même chose qu'eux : il n'applique
   rien à CE terminal, il fige son état pour les suivants. D'où une place à
   l'opposé (`margin-inline-end: auto`, qui suit le sens de lecture) et un
   dessin volontairement effacé — c'est un geste rare.

   Cette feuille est déjà chargée pour le terminal ; y ajouter ce bloc évite
   une septième requête pour trois règles.
   ═══════════════════════════════════════════════════════════════════ */

.sm-btn-default {
  margin-inline-end: auto;      /* pousse les deux autres à l'opposé */
  height: 34px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--r-md, 6px);
  color: var(--text-3);
  background: none;
  border: 1px dashed var(--border);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}

.sm-btn-default:hover {
  color: var(--text-2);
  border-style: solid;
  background: rgb(var(--veil) / .05);
}

/* Confirmation : verte le temps du message, puis retour à l'état sourd. */
.sm-btn-default.is-done {
  color: var(--up);
  border-color: var(--up);
  border-style: solid;
  background: var(--up-soft);
}

/* `hidden` doit rester `hidden` : la feuille du navigateur ne pose qu'un
   display:none à spécificité nulle, que la règle ci-dessus emporterait pour
   tout visiteur non administrateur. */
.sm-btn-default[hidden] { display: none; }

/* L'intitulé tient sur UN rang ou passe sur le sien ; il ne se replie
   jamais sur deux lignes à l'intérieur d'une pastille de 34 px, ce qui
   était le cas mesuré en production. */
.sm-btn-default { white-space: nowrap; }

/* ── CE REPLI REGARDE LA FENÊTRE, PAS LE NAVIGATEUR ─────────────────
   Il était écrit `@media (max-width: 520px)` « sur un panneau étroit ».
   Mais la fenêtre des réglages a une largeur FIXE : elle est étroite sur
   un écran de 1 920 px comme sur un téléphone, et la condition ne se
   déclenchait donc jamais là où elle servait. Un `@container` mesure la
   fenêtre elle-même — la seule chose dont la largeur décide ici. */
@container smwin (max-width: 470px) {
  .sm-footer { flex-wrap: wrap; }
  .sm-btn-default { margin-inline-end: 0; width: 100%; order: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ÉTAT STRATÉGIQUE — le bandeau du verdict
   ─────────────────────────────────────────────────────────────────────
   Il ouvre le panneau et il est le seul élément en gros caractères : c'est
   la conclusion, tout le reste la justifie. Le bloc de tendance qui suit
   porte son propre intitulé — « Tendance (filtre) » — parce que la faute
   qu'on cherche à empêcher est précisément de lire une tendance comme un
   ordre d'achat.

   Les tons suivent la doctrine du terminal : le vert et le rouge ne sortent
   que pour une direction ASSUMÉE, l'orange tempère, l'ardoise constate.
   ═══════════════════════════════════════════════════════════════════ */

.gc-verdict {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgb(var(--veil) / .05);
  border-inline-start: 3px solid var(--text-3);
}

.gc-verdict:empty { display: none; }

.gc-verdict-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.gc-verdict-k {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
}

.gc-verdict-score {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

/* La conclusion. Seul texte du panneau au-dessus de 11 px : si l'œil ne
   doit lire qu'une chose, c'est celle-là. */
.gc-verdict-v {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-2);
}

.gc-verdict-why {
  font-size: 9.5px;
  line-height: 1.4;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

/* ── Les cinq tons ────────────────────────────────────────────────────── */

.gc-verdict.is-up        { background: var(--up-soft);   border-inline-start-color: var(--up); }
.gc-verdict.is-up    .gc-verdict-v { color: var(--up); }

.gc-verdict.is-down      { background: var(--down-soft); border-inline-start-color: var(--down); }
.gc-verdict.is-down  .gc-verdict-v { color: var(--down); }

/* Un BIAIS n'est pas un ordre : même teinte, sans l'aplat, et le liseré
   seul porte la direction. C'est la nuance qui sépare « le marché penche »
   de « entre maintenant ». */
.gc-verdict.is-bias-up   { border-inline-start-color: var(--up); }
.gc-verdict.is-bias-up   .gc-verdict-v { color: var(--up); opacity: .82; }
.gc-verdict.is-bias-down { border-inline-start-color: var(--down); }
.gc-verdict.is-bias-down .gc-verdict-v { color: var(--down); opacity: .82; }

.gc-verdict.is-warn      { background: var(--warn-soft); border-inline-start-color: var(--warn); }
.gc-verdict.is-warn  .gc-verdict-v { color: var(--warn); }

/* MESURÉ EN THÈME CLAIR : l'orange sur son propre aplat tombait à 4,0:1, sous
   le seuil de 4,5:1 pour du texte de 13 px. C'est la SEULE ligne du module
   qui n'y arrivait pas. On assombrit ce texte-là — pas le jeton `--warn`,
   qui sert de bordure et d'aplat ailleurs et n'a aucun problème. */
:root[data-theme="light"] .gc-verdict.is-warn .gc-verdict-v,
:root:not([data-theme="dark"]) .gc-verdict.is-warn .gc-verdict-v { color: #8A5209; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .gc-verdict.is-warn .gc-verdict-v { color: var(--warn); }
}

.gc-verdict.is-info      { border-inline-start-color: var(--info); }
.gc-verdict.is-info  .gc-verdict-v { color: var(--text-2); }

/* ── Intitulé du bloc de tendance ─────────────────────────────────────── */

.gc-block-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 0 2px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-block-end: -4px;
}

.gc-block-note {
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  font-size: 9px;
  opacity: .8;
}

@media (max-width: 420px) {
  /* La mention perd sa place avant l'intitulé : c'est l'intitulé qui porte
     l'information, la mention ne fait que l'appuyer. */
  .gc-block-note { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   TABLEAU DE CONFLUENCE — le calque posé sur le graphique
   ─────────────────────────────────────────────────────────────────────
   Il doit se lire par-dessus des bougies, donc il lui faut un fond OPAQUE :
   un voile translucide laisse passer les mèches et le texte devient une
   énigme. Le flou d'arrière-plan n'est là que pour les navigateurs qui le
   savent faire, jamais comme seule opacité.

   Largeur bornée : un tableau qui grandit avec son contenu se déplace sous
   les doigts à chaque rafraîchissement.
   ═══════════════════════════════════════════════════════════════════ */

.gc-dash {
  position: absolute;
  /* ── L'ÉCHELLE D'EMPILEMENT DU GRAPHIQUE, RELEVÉE ET NON DEVINÉE ──────
       1, 2  canevas de la bibliothèque (bougies, échelles)
       5     overlayCanvas — zones d'offre et de demande
       8     markersCanvas — niveaux, fanions, libellés, pastille d'état
       9     drawCanvas    — tracés de l'utilisateur
      14     livePriceLine
      18     livePriceMarker (la boîte de cote)
    ──────────────────────────────────────────────────────────────────────
      20     ← CE TABLEAU
    ──────────────────────────────────────────────────────────────────────
      24     drawRail        — la barre d'outils de dessin
      30-42  palettes de dessin
      90-95  menus (unités, style de bougies)
     200+    calendrier, fenêtres modales, notifications

    Le premier jet était à 6, « au-dessus des deux canevas » — sauf que le
    second canevas est à 8, pas à 5 : les niveaux, les fanions et les
    libellés se peignaient PAR-DESSUS le tableau.

    La règle qui tranche : ce tableau est un PANNEAU que l'utilisateur a
    posé là, pas une donnée de plus. Tout ce qui est PEINT sur le graphique
    passe dessous ; tout ce qui est une COMMANDE reste dessus. S'il gêne, il
    se déplace — c'est ce à quoi sert sa poignée.

    Vérifié avant de choisir : aucun contexte d'empilement intermédiaire
    entre `#chartContainer`, `#chartStage` et la racine. Les valeurs des
    deux sous-arbres se comparent donc directement — sans quoi ce 20 ne
    voudrait rien dire face au 24 du rail, qui vit dans l'autre parent. */
  z-index: 20;
  inline-size: 192px;
  max-inline-size: calc(100% - 16px);
  border-radius: 7px;
  overflow: hidden;
  background: var(--surface-2, #172033);
  border: 1px solid var(--border);
  box-shadow: 0 6px 18px rgb(0 0 0 / .28);
  font-variant-numeric: tabular-nums;
  user-select: none;
}

.gc-dash[hidden] { display: none; }

/* ── En-tête : c'est la poignée ─────────────────────────────────────── */

.gc-dash-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px 5px 8px;
  background: rgb(var(--veil) / .06);
  border-block-end: 1px solid var(--border);
  cursor: grab;
  touch-action: none;          /* sans quoi le doigt fait défiler la page */
}

.gc-dash.is-dragging .gc-dash-head { cursor: grabbing; }

/* Trois traits : le seul signe qui dise « ça se déplace » sans un mot. */
.gc-dash-grip {
  inline-size: 8px;
  block-size: 9px;
  flex: none;
  background-image: repeating-linear-gradient(
    to bottom, var(--text-3) 0 1px, transparent 1px 3px);
  opacity: .6;
}

.gc-dash-title {
  flex: 1;
  min-inline-size: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gc-dash-close {
  flex: none;
  /* 20 px comme ses trois voisines. À 16 px la croix se rate au doigt — et
     sur un panneau qu'on peut glisser, rater la croix veut dire le
     déplacer. Mesuré, pas supposé. */
  inline-size: 20px;
  block-size: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--text-3);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.gc-dash-close:hover { background: rgb(var(--veil) / .1); color: var(--text-2); }

/* ── Réduire · épingler · ancrer ─────────────────────────────────────────
   Trois vrais `button`, donc atteignables au clavier sans rien de plus.
   La cible fait 20 px : en dessous, on vise mal au doigt, et sur un panneau
   qu'on peut glisser, viser mal veut dire déplacer par erreur. */
.gc-dash-btn {
  flex: none;
  inline-size: 20px;
  block-size: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--text-3);
  cursor: pointer;
}
.gc-dash-btn svg { inline-size: 13px; block-size: 13px; }
.gc-dash-btn:hover { background: rgb(var(--veil) / .1); color: var(--text-2); }

/* Le focus clavier doit se VOIR — c'est la seule façon de savoir où l'on
   est quand on ne tient pas la souris. */
.gc-dash-btn:focus-visible,
.gc-dash-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Développé : le chevron pointe vers le haut. Une icône, deux états — le
   jeu d'icônes reste intact. */
.gc-dash:not(.is-collapsed) .gc-dash-fold svg { transform: rotate(180deg); }

/* Épinglé : la punaise s'allume, et le panneau annonce qu'il ne bouge plus.
   L'état ne tient pas qu'à la couleur — le curseur change aussi, et
   `aria-pressed` le dit au lecteur d'écran. */
.gc-dash.is-pinned .gc-dash-pin { color: var(--accent-bright); }
.gc-dash.is-pinned .gc-dash-head,
.gc-dash:not([data-dock="free"]) .gc-dash-head { cursor: default; }
.gc-dash.is-pinned .gc-dash-grip,
.gc-dash:not([data-dock="free"]) .gc-dash-grip { opacity: .3; }

/* Réduit : il ne reste que l'en-tête, donc plus de bord inutile en bas. */
.gc-dash.is-collapsed { padding-block-end: 0; }
.gc-dash.is-collapsed .gc-dash-head { margin-block-end: 0; border-block-end: 0; }

/* ── Corps ──────────────────────────────────────────────────────────── */

.gc-dash-body { padding: 3px 0 4px; }

/* ══ LE COUP D'ŒIL ═══════════════════════════════════════════════════
   Quatre blocs, et rien d'autre : direction, setup, trois chiffres, et le
   chemin vers le détail. Le panneau du dock porte la Matrice entière — la
   recopier ici en faisait deux, dont une posée sur les bougies.
   Tout le corps est cliquable, mais c'est le bouton qui porte l'action et
   son nom : la souris gagne une commodité, le clavier ne perd rien. */

.gc-dash-body { cursor: pointer; }

.gc-dash-lead {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 10px 0;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.2;
}
.gc-dash-arrow { font-size: 12px; }
.gc-dash-dir { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* La couleur de la flèche vient du ton de la TENDANCE, celle du setup de
   son propre verdict : deux mesures, deux encres. Les fonds des pastilles
   du terminal sont neutralisés — ici la couleur est une encre, pas un
   aplat, sinon chaque ligne aurait l'air d'un bouton. */
.gc-dash-lead.tv-bull, .gc-dash-lead.tv-bear, .gc-dash-lead.tv-neutral {
  background: none;
  box-shadow: none;
  padding-block: 6px 0;
}

.gc-dash-setup {
  padding: 1px 10px 7px;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.3;
  /* Le setup peut passer à la ligne : « Attente · retest achat » tronqué
     ne dit plus ce qu'on attend, et c'est la ligne qu'on lit pour décider. */
  overflow-wrap: anywhere;
}

.gc-dash-figs {
  display: grid;
  gap: 1px;
  padding: 6px 0 4px;
  border-block-start: 1px solid var(--border);
}
.gc-dash-fig {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 10px;
  font-size: 10px;
  line-height: 1.4;
}
.gc-dash-fig > span { color: var(--text-3); white-space: nowrap; }
.gc-dash-fig > b {
  font-weight: 600;
  color: var(--text-2);
  text-align: end;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gc-dash-fig > b.tv-bull, .gc-dash-fig > b.tv-bear, .gc-dash-fig > b.tv-neutral {
  background: none;
  box-shadow: none;
  padding: 0;
}

.gc-dash-more {
  inline-size: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 10px;
  border: 0;
  border-block-start: 1px solid var(--border);
  background: none;
  color: var(--text-3);
  font: inherit;
  font-size: 10px;
  font-weight: 600;
  text-align: start;
  cursor: pointer;
}
.gc-dash-more:hover { background: rgb(var(--veil) / .06); color: var(--text-2); }
.gc-dash-more svg { inline-size: 12px; block-size: 12px; flex: none; }
/* Le chevron pointe vers le panneau, qui est du côté de la FIN de lecture :
   en arabe il doit donc pointer à gauche. */
[dir="rtl"] .gc-dash-more svg { transform: scaleX(-1); }
.gc-dash-more:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.gc-dash-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 8px;
  font-size: 9.5px;
  line-height: 1.35;
}

.gc-dash-row > span { color: var(--text-3); white-space: nowrap; }

.gc-dash-row > b {
  font-weight: 600;
  color: var(--text-2);
  text-align: end;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Les classes de pastille du terminal ne servent ici que d'ENCRE : leur
   fond ferait de chaque valeur un bouton. */
.gc-dash-row > b.tv-bull,
.gc-dash-row > b.tv-bear,
.gc-dash-row > b.tv-neutral {
  background: none;
  box-shadow: none;
  padding: 0;
}

.gc-dash-warn { color: var(--warn); }

/* Les tons du verdict, repris à l'identique du bandeau du panneau : le
   même état ne peut pas avoir deux couleurs à deux endroits. */
.gc-dash-up, .gc-dash-bias-up     { color: var(--up); }
.gc-dash-down, .gc-dash-bias-down { color: var(--down); }
.gc-dash-info                     { color: var(--text-2); }

/* ── La rangée des quatre tendances ─────────────────────────────────── */

.gc-dash-tfs {
  display: grid;
  /* Le nombre de colonnes suit le nombre de cellules RÉELLES : sur un
     graphique horaire l'unité courante et la référence 1H se confondent, il
     n'en reste que trois. Quatre colonnes figées laisseraient un quart de
     rangée vide à droite. */
  grid-template-columns: repeat(var(--gc-tfs, 4), minmax(0, 1fr));
  gap: 2px;
  margin: 3px 6px;
  padding: 4px 0;
  border-block: 1px solid var(--border);
}

.gc-dash-tf {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-inline-size: 0;
}

.gc-dash-tf > span {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-3);
  text-transform: uppercase;
}

.gc-dash-tf > b {
  font-size: 10px;
  line-height: 1;
  background: none;
  box-shadow: none;
  padding: 0;
}

/* ── Étroit ─────────────────────────────────────────────────────────────
   Sous 480 px le graphique lui-même ne fait plus que quelques centaines de
   pixels : le tableau se réduit plutôt que de le recouvrir. */
@media (max-width: 480px) {
  .gc-dash { inline-size: 168px; }
  .gc-dash-row { font-size: 9px; padding: 1.5px 7px; }
}

/* ── Chemin de retour du tableau ─────────────────────────────────────────
   Il n'apparaît que lorsque le tableau est masqué, et il est volontairement
   discret : c'est un rappel, pas une invitation. Un panneau qui se ferme
   doit dire où il est parti — sans quoi la croix devient un aller simple. */
.gc-restore {
  display: block;
  inline-size: 100%;
  margin: 2px 0 0;
  padding: 5px 6px;
  border: 1px dashed var(--border);
  border-radius: 5px;
  background: none;
  color: var(--text-3);
  font-size: 9.5px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}

.gc-restore:hover {
  color: var(--text-2);
  border-style: solid;
  background: rgb(var(--veil) / .05);
}

.gc-restore[hidden] { display: none; }

/* Une ligne autorisée à passer sur deux : réservée à ce qui porte un nom ET
   un prix, comme l'obstacle. Le reste du tableau reste sur une ligne — c'est
   ce qui lui garde sa hauteur prévisible. */
.gc-dash-row.is-wide { align-items: flex-start; }

.gc-dash-row.is-wide > b {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.3;
}

/* ═══════════════════════════════════════════════════════════════════════
   AUDIT DES ZONES — fiche réservée à l'administration
   ─────────────────────────────────────────────────────────────────────
   Elle n'a pas à être belle, elle a à être LISIBLE et complète : c'est un
   outil de contrôle, pas une vue produit. D'où la police à chasse fixe sur
   les valeurs — on y compare des prix et des horodatages.
   ═══════════════════════════════════════════════════════════════════ */

.gc-zd {
  border: 1px dashed var(--border);
  border-radius: 5px;
  padding: 5px 6px;
  max-block-size: 260px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.gc-zd[hidden] { display: none; }

.gc-zd-h {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-block-end: 4px;
}

.gc-zd-empty { font-size: 9.5px; color: var(--text-3); }

.gc-zd-row + .gc-zd-row { margin-block-start: 6px; padding-block-start: 6px; border-block-start: 1px solid var(--border); }

.gc-zd-k {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-2);
  margin-block-end: 2px;
}

.gc-zd dl { margin: 0; display: flex; flex-direction: column; gap: 1px; }

.gc-zd dl > div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 9px;
  line-height: 1.35;
}

.gc-zd dt { color: var(--text-3); white-space: nowrap; }

.gc-zd dd {
  margin: 0;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  text-align: end;
  overflow-wrap: anywhere;
}

/* Backtest suspendu : un message, pas un panneau vide. Une disparition sans
   explication se lit comme une panne. */
.bt-suspended {
  margin: 0;
  padding: 8px;
  font-size: 10px;
  line-height: 1.5;
  color: var(--warn);
  background: var(--warn-soft);
  border-radius: 5px;
}

.bt-suspended[hidden] { display: none; }

/* ── LE `hidden` DE LA BRANCHE SUSPENDUE NE MASQUAIT PAS TOUT ─────────────
   `updateBacktestPanel()` pose `hidden` sur tous les enfants du panneau, mais
   `.bt-sample`, `.bt-scope` et `.bt-strip` portent un `display` de feuille
   AUTEUR : il bat le `[hidden] { display: none }` de la feuille du NAVIGATEUR
   quelle que soit la spécificité — c'est l'origine dans la cascade qui
   tranche, pas le poids du sélecteur. Même piège, même remède qu'au
   `#ladderPanel`.

   Mesuré en production le 2026-08-16 : sous « Backtest en pause » restaient
   « 0 trades » et un périmètre PÉRIMÉ — « Aujourd'hui · ^N225 · 15m » sur un
   graphique WTIUSD — parce que `#btScope` n'est écrit que dans la branche NON
   suspendue et gardait donc l'instrument d'avant. Un message de pause surmonté
   de chiffres qui contredisent le graphique se lit comme une panne, ce que ce
   message existait précisément pour éviter. */
#btPanel [hidden] { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════
   LES CINQ COUCHES, LE RISQUE ET LE SCORE
   ─────────────────────────────────────────────────────────────────────
   Une lecture en escalier : intitulé à gauche, valeur à droite. L'ACTION
   est la seule ligne colorée — c'est elle qu'on cherche. Le reste est de
   l'encre neutre, pour que la couleur garde son sens.
   ═══════════════════════════════════════════════════════════════════ */

.gc-dec { margin: 0; display: flex; flex-direction: column; gap: 1px; }

.gc-dec-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 2.5px 6px;
  min-width: 0;
}

.gc-dec-row:nth-child(odd) { background: rgb(var(--veil) / .03); }

.gc-dec-row dt {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}

.gc-dec-row dd {
  margin: 0;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-2);
  text-align: end;
  min-width: 0;
  /* Un retour à la ligne contrôlé plutôt qu'une troncature : « Extension
     hors du range de l… » ne dit rien de plus que rien. */
  overflow-wrap: anywhere;
}

/* L'action porte la couleur, et elle seule. */
.gc-dec-action { font-weight: 700; }
.gc-dec-action.is-ok   { color: var(--up); }
.gc-dec-action.is-no   { color: var(--down); }
.gc-dec-action.is-wait { color: var(--warn); }
.gc-dec-action.is-na   { color: var(--text-3); }

.gc-dec-reason { color: var(--warn); font-weight: 500; }

/* ── Risque ─────────────────────────────────────────────────────────── */

.gc-rr-is-ok   { color: var(--up); }
.gc-rr-is-wait { color: var(--warn); }
/* Rouge DISCRET : un ratio insuffisant est une raison de ne pas entrer,
   pas une alarme. */
.gc-rr-is-no   { color: var(--down); opacity: .9; }
.gc-rr-is-na   { color: var(--text-3); }

/* ── Score explicable ───────────────────────────────────────────────── */

.gc-score-details { font-size: 10px; }

.gc-score-details > summary {
  cursor: pointer;
  padding: 3px 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-3);
  list-style: none;
}

.gc-score-details > summary::-webkit-details-marker { display: none; }
.gc-score-details > summary::before { content: '▸ '; }
.gc-score-details[open] > summary::before { content: '▾ '; }
.gc-score-details > summary:hover { color: var(--text-2); }

.gc-sc-h {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 4px 6px 2px;
}

.gc-sc-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 1.5px 6px;
  font-size: 9.5px;
  color: var(--text-2);
}

.gc-sc-row > span:nth-child(2) { flex: 1; min-width: 0; }

.gc-sc-pts {
  inline-size: 26px;
  flex: none;
  font-weight: 700;
  color: var(--up);
  font-variant-numeric: tabular-nums;
}

.gc-sc-max { color: var(--text-3); font-size: 9px; }

/* Un critère non rempli n'est pas une faute : il est simplement éteint. */
.gc-sc-row.is-off { opacity: .45; }
.gc-sc-row.is-off .gc-sc-pts { color: var(--text-3); }

.gc-sc-total {
  display: flex;
  justify-content: space-between;
  padding: 4px 6px;
  margin-block-start: 2px;
  border-block-start: 1px solid var(--border);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-2);
}

/* Les verrous sont À PART, sous le total : ils ne retirent pas de points,
   ils refusent l'entrée. Les mélanger aux malus laisserait croire qu'un
   score plus élevé les lèverait. */
.gc-sc-blockers { margin-block-start: 4px; border-block-start: 1px dashed var(--border); }
.gc-sc-row.is-block { color: var(--warn); }
.gc-sc-row.is-block .gc-sc-pts { color: var(--warn); }

/* ── Les deux refus d'un mouvement étendu ────────────────────────────────
   Posés ensemble et à égalité : « pas d'achat tardif » et « pas de vente »
   répondent à deux questions différentes, et n'en afficher qu'un laisse le
   lecteur déduire l'autre — à l'envers. Ton neutre, jamais directionnel. */
.gc-dec-both {
  margin: 5px 6px 0;
  padding: 5px 7px;
  border-radius: 6px;
  background: rgb(var(--veil) / .05);
  border-inline-start: 2px solid var(--warn);
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--text-2);
}
.gc-dec-both > * + * { margin-top: 2px; }

/* La lecture d'un niveau : un fait, pas une consigne. */
.gc-dash-row .gc-dash-warn { color: var(--warn); }
.gc-dash-row .gc-dash-info { color: var(--text-2); }