@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════════
   STRUCTURE DE SÉANCE — habillage
   ─────────────────────────────────────────────────────────────────────
   Rien de neuf en couleur : tout vient des jetons du terminal (`--text-2`,
   `--text-3`, `--line`, `--panel`). Une valeur écrite en dur ici resterait
   sombre sous le thème clair et sous la peau « lux » — c'est le défaut qui a
   déjà fait rester un graphique noir sur une page blanche.

   `body` en tête de chaque sélecteur : la peau ogilio l'exige pour que ses
   règles gagnent contre celles de style.css sans `!important`. On suit.
   ═══════════════════════════════════════════════════════════════════ */

/* ── LA GRILLE DES RÉGLAGES ──────────────────────────────────────────────
   Sept colonnes : le nom, puis les six cases. `minmax(0, 1fr)` sur le nom et
   non `auto` — sans le `0`, un nom long pousse la grille au-delà du panneau et
   les cases sortent à droite. C'est la même règle que le reste du responsive
   du terminal (`min-width: 0` partout). */
body .sst-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(6, 22px);
  gap: 2px 0;
  align-items: center;
  margin: 6px 0 10px;
  font-size: 11px;
}

body .sst-grid-h,
body .sst-grid-r {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  align-items: center;
}

body .sst-grid-h > span {
  text-align: center;
  font-size: 9.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-3);
  padding-bottom: 3px;
  border-bottom: 1px solid var(--line, rgba(128, 128, 128, .18));
}

body .sst-grid-r > span { text-align: center; }

body .sst-grid-n {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--text-2);
  font-weight: 500;
  /* Un nom qui déborde s'abrège au lieu de pousser les cases hors du
     panneau : sur un téléphone, la colonne fait 120 px. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Les demi-séances sont DÉCALÉES et plus discrètes : elles appartiennent à la
   séance du dessus, et l'écrire à l'œil évite une phrase d'explication. */
body .sst-grid-r.is-child .sst-grid-n {
  padding-left: 12px;
  color: var(--text-3);
  font-weight: 400;
}

body .sst-grid input[type="checkbox"] {
  margin: 0;
  width: 13px;
  height: 13px;
  accent-color: var(--accent, #4a8fe0);
}

/* ── L'INFOBULLE ─────────────────────────────────────────────────────────
   `pointer-events: none` est la ligne qui compte : sans elle, l'infobulle
   passe sous le curseur, intercepte le `mousemove` du graphique, et se met à
   clignoter en se plaçant elle-même hors d'atteinte. */
body .sst-tip {
  position: absolute;
  z-index: 40;
  pointer-events: none;
  min-width: 132px;
  max-width: 230px;
  padding: 7px 9px;
  border-radius: 6px;
  border: 1px solid var(--line, rgba(128, 128, 128, .28));
  background: var(--panel, rgba(20, 24, 30, .96));
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-2);
}

body .sst-tip[hidden] { display: none; }

body .sst-tip-h {
  font-weight: 600;
  font-size: 11.5px;
  color: var(--text-1, var(--text-2));
}

body .sst-tip-p {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 600;
  margin: 1px 0 5px;
  color: var(--text-1, var(--text-2));
}

body .sst-tip-r {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

body .sst-tip-r > span { color: var(--text-3); }
body .sst-tip-r > b {
  font-weight: 500;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── LE PANNEAU DU DOCK ──────────────────────────────────────────────────
   Un tableau de cinq colonnes, chiffres alignés à droite en chiffres
   tabulaires : quatre prix qui ne s'alignent pas se comparent à l'œil, ce qui
   est précisément ce qu'on veut éviter d'un tableau de niveaux. */
body .sst-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

body .sst-tbl th {
  font-size: 9.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-3);
  text-align: right;
  padding: 0 0 3px;
  border-bottom: 1px solid var(--line, rgba(128, 128, 128, .18));
}

body .sst-tbl th:first-child,
body .sst-tbl td:first-child { text-align: left; color: var(--text-2); }

body .sst-tbl td {
  padding: 2.5px 0;
  border-bottom: 1px solid var(--line, rgba(128, 128, 128, .10));
}

body .sst-tbl td.sst-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding-left: 8px;
}

body .sst-tbl td.sst-st {
  text-align: right;
  padding-left: 8px;
  color: var(--text-3);
  font-size: 10px;
}

body .sst-notes {
  margin: 7px 0 0;
  padding-left: 14px;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--text-3);
}

body .sst-empty,
body .sst-warn {
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--text-3);
  padding: 6px 0 2px;
}

body .sst-warn { color: var(--warn, #f0a94b); }

/* ── LA LIGNE ADR DU PANNEAU ─────────────────────────────────────────────
   Un chiffre en tête, le reste en retrait : « ADR consommé 82 % · 24,10 /
   29,40 (14 j) ». Chiffres tabulaires, sinon le ratio tremble d'un tick à
   l'autre. */
body .sst-adr {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-2);
  padding: 0 0 6px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line, rgba(128, 128, 128, .18));
  font-variant-numeric: tabular-nums;
  unicode-bidi: plaintext;
}

body .sst-adr b { font-weight: 600; color: var(--text-1, var(--text-2)); }
body .sst-adr .sst-num { font-variant-numeric: tabular-nums; }
body .sst-dim { color: var(--text-3); }

/* ── LA LECTURE DE LIQUIDITÉ ─────────────────────────────────────────────
   Deux lignes sans puces : la zone au-dessus, la zone en dessous. Le récit
   enchaîne ses maillons par une flèche posée en `::before` — dans le CSS et
   non dans le texte, pour que la flèche ne soit ni copiée ni lue par le
   lecteur d'écran comme un mot. `margin-inline` et non `margin-left` : en
   arabe la chaîne se lit de droite à gauche et la flèche doit suivre.
   `unicode-bidi: plaintext` sur les lignes qui mêlent chiffres et lettres :
   sans lui, « 4416,55 — intact » se retourne en « intact — 55,4416 ». */
body .sst-read {
  margin: 8px 0 0;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--text-3);
}

body .sst-read-t {
  font-size: 9.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-3);
  padding-bottom: 3px;
  border-bottom: 1px solid var(--line, rgba(128, 128, 128, .18));
  margin-bottom: 4px;
}

body .sst-read ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

body .sst-read li {
  padding: 2px 0;
  unicode-bidi: plaintext;
}

body .sst-read-k {
  color: var(--text-3);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-inline-end: 4px;
}

body .sst-read b { font-weight: 600; color: var(--text-2); }
body .sst-read .sst-num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }

body .sst-read-c {
  color: var(--text-3);
  margin-inline-start: 2px;
}

body .sst-chain + .sst-chain::before {
  content: '→';
  margin-inline: 4px;
  color: var(--text-3);
  opacity: .7;
}

/* Le récit dans l'infobulle : mêmes maillons, en colonne, sans puces. */
body .sst-tip-chain {
  list-style: none;
  margin: 4px 0 0;
  padding: 4px 0 0;
  border-top: 1px solid var(--line, rgba(128, 128, 128, .18));
  color: var(--text-3);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}

body .sst-tip-chain li { unicode-bidi: plaintext; }

/* ── LE NOMBRE DANS LE BANDEAU ───────────────────────────────────────────
   `#adrChip` suit les règles de `#ogDayChip` dans terminal-ogilio.css
   (ordre, RTL, écran court) ; ici seulement sa base neutre et ses deux
   degrés. Ambre à 75 % (`.warm`), ambre gras à 100 % (`.hot`) : atteindre
   une extension après 110 % d'ADR n'est pas la même chose qu'après 55 %, et
   c'est le seul signal couleur que ce chiffre porte. Jetons du thème
   uniquement — une valeur en dur resterait sombre sous le thème clair. */
body #adrChip {
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
  unicode-bidi: plaintext;
  white-space: nowrap;
}

body #adrChip.warm { color: var(--warn, #f0a94b); }
body #adrChip.hot  { color: var(--warn, #f0a94b); font-weight: 700; }

/* ── TÉLÉPHONE ───────────────────────────────────────────────────────────
   À 380 px, sept colonnes ne tiennent pas. Les cases rétrécissent avant que
   quoi que ce soit ne déborde, et le tableau garde ses chiffres lisibles :
   c'est la règle du responsive du terminal — on réduit, on ne coupe pas. */
@media (max-width: 520px) {
  body .sst-grid { grid-template-columns: minmax(0, 1fr) repeat(6, 19px); }
  body .sst-grid input[type="checkbox"] { width: 12px; height: 12px; }
  body .sst-grid-h > span { font-size: 8.5px; }
  body .sst-tip { max-width: 190px; font-size: 10.5px; }
}

/* ── ARABE ───────────────────────────────────────────────────────────────
   Le panneau se lit de droite à gauche comme le reste de l'interface. Les
   NOMBRES, eux, restent en lecture latine : un prix retourné n'est pas un prix.
   `direction: ltr` sur les cellules numériques est la seule façon de garder les
   deux. */
[dir="rtl"] body .sst-tbl th:first-child,
[dir="rtl"] body .sst-tbl td:first-child { text-align: right; }
[dir="rtl"] body .sst-tbl th { text-align: left; }
[dir="rtl"] body .sst-tbl td.sst-num,
[dir="rtl"] body .sst-tbl td.sst-st { text-align: left; padding-right: 8px; padding-left: 0; }
[dir="rtl"] body .sst-tbl td.sst-num { direction: ltr; }
[dir="rtl"] body .sst-notes { padding-right: 14px; padding-left: 0; }
[dir="rtl"] body .sst-grid-r.is-child .sst-grid-n { padding-right: 12px; padding-left: 0; }
[dir="rtl"] body .sst-tip-p { direction: ltr; text-align: right; }