/* ============================================================
   Onglet Comparaison — charte commune (15/09/2026)
   Préfixe `.cmp-`, tokens `.bk-*` de book_theme.css réutilisés :
   la surface `.bk-block-card` est fixe et sombre dans les deux thèmes,
   donc tout ce qui vit dedans lit les tokens ré-épinglés par la carte
   (jamais un littéral de couleur seul, règle D1b).
   ============================================================ */

/* Police de la DA (Inter, `--font-primary` de premium.css) posée sur la racine
   de l'onglet plutôt qu'héritée du body : le bloc héros et les chiffres ne
   dépendent plus de l'ordre de chargement des feuilles (retour Louis 29/09). */
.cmp-root { font-family: var(--font-primary); }

.cmp-root .cmp-field-label {
    font-size: 0.72rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--bk-muted);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
}
.cmp-root .comparison-strategy-dropdown { margin-bottom: 10px; }

.cmp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}
.cmp-actions .cmp-cta { flex: 1 1 260px; }

/* Résultats des stratégies comparées : les blocs s'empilent avec le même
   écart que les blocs de la coquille (`.bk-blocks`). */
.cmp-results:empty { display: none; }
.cmp-results > .bk-block-card + .bk-block-card,
.cmp-results > .alert + .bk-block-card { margin-top: 1.9rem; }

/* --- Tableau comparatif (stratégies et compositions) --- */
.cmp-table-wrap { margin-top: 4px; }
.cmp-table .cmp-metric-label {
    font-weight: 600;
    color: var(--bk-ink);
    white-space: normal;
    text-align: left;
    display: table-cell;
    align-items: center;
    gap: 6px;
}
.cmp-table .cmp-value { font-variant-numeric: tabular-nums; }
/* Meilleure valeur d'une ligne : encre cyan, filet à gauche, jamais un
   fond opaque (le tableau reste lisible photocopié).
   MESURÉ (Playwright, 15/09) : `.cmp-table .cmp-best` (0,2,0) perdait contre
   le contre-fil triplé de book_theme (`.bk-block-card x3 .table > :not(caption)
   > * > *`, (0,4,1) + !important) : la cellule restait en encre ink. La classe
   de carte est donc reprise TRIPLÉE ici aussi, avec `!important`, pour peser
   (0,6,1) sans dépendre de l'ordre de chargement. Même règle pour les
   colonnes B, les écarts signés et les lignes qui changent. */
.bk-block-card.bk-block-card.bk-block-card .cmp-table td.cmp-best {
    color: var(--bk-cyan) !important;
    font-weight: 700;
    background: rgba(0, 242, 255, 0.06);
    box-shadow: inset 3px 0 0 var(--bk-cyan);
}
.bk-block-card.bk-block-card.bk-block-card .cmp-table td.cmp-delta.cmp-gain { color: var(--bk-gain) !important; }
.bk-block-card.bk-block-card.bk-block-card .cmp-table td.cmp-delta.cmp-loss { color: var(--bk-loss) !important; }
.bk-block-card.bk-block-card.bk-block-card .cmp-table thead th { white-space: normal; }
.cmp-caption {
    font-size: 0.65rem;
    font-weight: 400;
    opacity: 0.75;
    color: var(--bk-muted);
}
.bk-block-card.bk-block-card.bk-block-card .cmp-table td.cmp-col-b,
.bk-block-card.bk-block-card.bk-block-card .cmp-table thead th.cmp-col-b { color: var(--bk-cyan) !important; }
.cmp-table .cmp-row-changed td { font-weight: 700; }
.cmp-table .cmp-row-changed td:first-child { box-shadow: inset 3px 0 0 var(--bk-cyan); }
.cmp-table .cmp-delta { font-weight: 600; }
.cmp-alert { font-size: 0.85rem; }

/* --- Héros A | B --- */
.cmp-hero {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 0.6rem;
}
.cmp-hero-tile {
    padding: 14px 18px;
    border: 1px solid var(--bk-glass-border);
    border-radius: 14px;
    background: var(--bk-glass-bg);
    min-width: 0;
}
.cmp-hero-tile.cmp-side-b { border-color: rgba(0, 242, 255, 0.35); }
.cmp-hero-name {
    font-size: 0.72rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--bk-muted);
    overflow-wrap: anywhere;
}
.cmp-hero-value {
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--bk-ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    margin: 4px 0 6px;
}
.cmp-hero-sub {
    font-size: 0.85rem;
    color: var(--bk-muted);
    font-variant-numeric: tabular-nums;
}
.cmp-gain { color: var(--bk-gain) !important; }
.cmp-loss { color: var(--bk-loss) !important; }
.cmp-metric-label-small {
    font-size: 0.7rem;
    color: var(--bk-muted);
    max-width: 22ch;
    line-height: 1.25;
}

/* --- Meilleures performances (stratégies) --- */
.cmp-best-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.cmp-best-item {
    padding: 12px 14px;
    border: 1px solid var(--bk-glass-border);
    border-radius: 12px;
    background: var(--bk-glass-bg);
    min-width: 0;
}
.cmp-best-label {
    font-size: 0.72rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--bk-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}
.cmp-best-value {
    margin-top: 6px;
    font-size: 0.95rem;
    color: var(--bk-ink);
    overflow-wrap: anywhere;
}
.cmp-best-value.cmp-best-empty { color: var(--bk-muted); }

.cmp-list { padding-left: 1.1rem; margin-bottom: 0.4rem; }
.cmp-list li { margin-bottom: 4px; }
.cmp-graph { width: 100%; }

@media (max-width: 767.98px) {
    .cmp-hero, .cmp-best-grid { grid-template-columns: 1fr; }
    .cmp-hero-value { font-size: 2.1rem; }
}

/* Tableaux d'explication (16/09) : ligne de total, grille des corrélations. */
.cmp-table .cmp-row-total td { font-weight: 700; border-top: 1px solid var(--bk-muted) !important; }
.cmp-corr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 767.98px) { .cmp-corr-grid { grid-template-columns: 1fr; } }