/**
 * La table virtualisée — les règles dont `js/table.js` a besoin, et rien d'autre.
 *
 * Elles vivaient dans `css/app.css`. Elles en sortent parce que deux pages
 * montent désormais le même module : l'application sous `/app`, et la
 * démonstration de la page de vente sous `/`. Recopier ces règles dans la page
 * de vente les aurait fait diverger au premier ajustement de colonne ; charger
 * `app.css` entier l'aurait cassée, car sa règle `html, body` impose
 * `height: 100%` et `display: flex` à un document qui doit défiler.
 *
 * Ce fichier ne déclare aucun jeton. Il consomme ceux de la page qui le charge —
 * `--row-h`, `--line`, `--line-soft`, `--ink`, `--ink-2`, `--ink-3`, `--bg-sunk`,
 * `--bg-hover`, `--bg-sel`, `--accent`, `--ok`, `--acq`, `--pub`, `--dead` — de
 * sorte que la table porte la palette de son hôte sans que sa géométrie change.
 *
 * `--row-h` doit valoir 30px : `ROW_H` est écrit en dur dans `js/table.js`, et
 * la virtualisation calcule ses index à partir de cette hauteur. Une autre
 * valeur ne rétrécit pas les lignes, elle décale la fenêtre rendue.
 */

/* La page de vente écrit en 16px, l'application en 13px. La taille est posée
   ici plutôt qu'héritée : les largeurs de colonnes ci-dessous sont accordées à
   ce corps, et les 28px d'en-tête ne tiennent pas 16px de texte. */
.table { font-size: 13px; line-height: 1.45; }

/* ── Table ──────────────────────────────────────────────────────────── */
.tablewrap { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.table { height: 100%; display: flex; flex-direction: column; overflow-x: auto; }
.thead, .trow {
  display: grid;
  grid-template-columns:
    28px 22px minmax(150px, 1.3fr) minmax(240px, 2.4fr)
    96px 82px 66px 58px 74px minmax(120px, 1fr) 96px minmax(160px, 1.6fr);
  min-width: 1262px;
  align-items: center;
}
.thead {
  position: sticky; top: 0; z-index: 2;
  height: 28px; background: var(--bg-sunk);
  border-bottom: 1px solid var(--line);
  font-size: 11px; font-weight: 650; color: var(--ink-2);
  text-transform: uppercase; letter-spacing: .03em;
  flex: 0 0 auto;
}
.th { padding: 0 7px; cursor: pointer; user-select: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th:hover { color: var(--ink); }
.th.num { text-align: right; }
.th .arrow { color: var(--accent); }

.tbody-scroll { flex: 1; overflow-y: auto; position: relative; min-width: 1262px; }
.tbody-spacer { width: 1px; }
.tbody { position: absolute; top: 0; left: 0; right: 0; }
.trow {
  height: var(--row-h);
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
}
.trow:hover { background: var(--bg-hover); }
.trow.is-sel { background: var(--bg-sel); }
.td {
  padding: 0 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.td.num { text-align: right; font-variant-numeric: tabular-nums; }
.td.dim { color: var(--ink-2); }
.td-pin { text-align: center; padding: 0; }
.pin { background: none; border: 0; cursor: pointer; color: var(--ink-3); font-size: 13px; line-height: 1; padding: 2px; }
.pin.on { color: var(--accent); }
.name-cell { display: flex; align-items: center; gap: 6px; overflow: hidden; }
.name-cell img { width: 15px; height: 15px; border-radius: 3px; object-fit: contain; flex: 0 0 auto; background: var(--bg-sunk); }
.name-cell .nm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.star { color: #c99700; flex: 0 0 auto; }

.st { font-weight: 600; }
.st-Active   { color: var(--ok); }
.st-Acquired { color: var(--acq); }
.st-Public   { color: var(--pub); }
.st-Inactive { color: var(--dead); }

.tagline { color: var(--ink-2); font-size: 11.5px; }

.empty { position: absolute; inset: 40px 0 auto; text-align: center; color: var(--ink-3); }

.pin { font-size: 14px; }
.pin.on { color: #c99700; }
.trow.is-pinned { background: color-mix(in srgb, #c99700 7%, transparent); }
.trow.is-pinned:hover { background: color-mix(in srgb, #c99700 13%, transparent); }
.thead .th[data-key="_pin"] { text-align: center; color: #c99700; }

/* ── Marqueur de suivi investisseur ──────────────────────────────────── */
.td-track { text-align: center; padding: 0; }
.thead .th[data-key="tracking"] { text-align: center; color: var(--acq); }
.trk { font-size: 9px; cursor: help; }
.trk-domaine { color: var(--acq); }
.trk-nom { color: var(--ink-3); }
.trk-euro { color: var(--ok); margin-left: 2px; cursor: help; }