/* ============================================================
   ONGLET BOOK & RISQUE — refonte DA site (06/08/2026)
   Référence maîtresse : gradient-site/css/style.css (décision
   Louis : la DA du SITE prime sur la DA historique de l'app).
   Tokens : glass rgba(255,255,255,.03)/.08, cyan #00f2ff en
   accent rare, titres en dégradé blanc→#60a5fa→#00f2ff,
   boutons pilule (primaire = dégradé clair à texte sombre),
   une encre par bloc, chiffres tabulaires alignés à droite.
   Namespace .bk-root : les overrides descendants transposent
   les dbc.Card/Table/Button existants sans réécrire le layout.
   ============================================================ */

.bk-root {
    --bk-glass-bg: rgba(255, 255, 255, 0.03);
    --bk-glass-border: rgba(255, 255, 255, 0.08);
    --bk-cyan: #00f2ff;
    --bk-blue: #60a5fa;
    --bk-ink: #cbd5e1;
    --bk-muted: #94a3b8;
    --bk-loss: #f87171;
    --bk-warn: #fbbf24;
    --bk-gain: #34d399;
}

/* ============================================================
   THÈME CLAIR (charte D1b, 28/08/2026) — même mécanisme que premium.css
   (`[data-theme="light"]` posé sur la racine, jamais un second système).

   MESURÉ AVANT : `.bk-block-title`/`.bk-block-lede`/`.bk-root h6` étaient
   posés HORS carte dans Conformité et Documents (texte blanc littéral, zéro
   variante claire) — contraste 1,08:1 sur fond clair. Deux corrections
   distinctes, jamais l'une sans l'autre :
   (1) tokens de texte redéfinis ici pour le cas où du texte reste hors
       carte (Documents, futures pages) ;
   (2) `.bk-block-card` (ci-dessous) RE-ÉPINGLE les tokens sombres sur
       lui-même, quel que soit le thème — sa surface est fixe et FONCÉE dans
       les deux thèmes (une île, jamais une page), donc son contenu garde
       les couleurs optimisées pour un fond sombre. Sans ce re-épinglage, un
       titre a l'intérieur d'une carte toujours sombre aurait hérité de la
       teinte "optimisée pour fond clair" ci-dessous et y aurait perdu du
       contraste.
   ============================================================ */
[data-theme="light"] .bk-root {
    --bk-glass-bg: rgba(15, 23, 42, 0.035);
    --bk-glass-border: rgba(15, 23, 42, 0.14);
    --bk-cyan: #0e7490;
    --bk-blue: #1d4ed8;
    --bk-ink: #0f172a;
    --bk-muted: #475569;
    --bk-loss: #b3261e;
    --bk-warn: #92400e;
    --bk-gain: #047857;
}
[data-theme="light"] .bk-root .card-header,
[data-theme="light"] .bk-root .bk-block-title,
[data-theme="light"] .bk-root h6,
[data-theme="light"] .bk-root .bk-hero-value,
[data-theme="light"] .bk-root .bk-signal-when,
[data-theme="light"] .bk-root .bk-signal-val,
[data-theme="light"] .bk-root .accordion-button,
[data-theme="light"] .bk-root .accordion-button.collapsed,
[data-theme="light"] .bk-root .accordion-button:not(.collapsed) {
    color: var(--bk-ink) !important;
}
[data-theme="light"] .bk-root .accordion-button::after {
    filter: none;
}
[data-theme="light"] .bk-root .btn-outline-secondary,
[data-theme="light"] .bk-root .btn-secondary,
[data-theme="light"] .bk-root .btn-outline-info,
[data-theme="light"] .bk-root .btn-info,
[data-theme="light"] .bk-root .btn-outline-danger,
[data-theme="light"] .bk-root .btn-outline-warning,
[data-theme="light"] .bk-root .btn-warning {
    border-color: rgba(15, 23, 42, 0.3) !important;
    color: var(--bk-ink) !important;
}
/* Trouvé en construisant le filet de non-régression (28/08) : le `:hover`
   de ces mêmes boutons (plus bas dans ce fichier) force `color: #ffffff`
   sur un fond survolé quasi transparent (`rgba(0, 242, 255, 0.06)`) --
   correct sur le fond sombre par défaut, texte blanc invisible sur le
   fond quasi blanc de ce thème dès qu'on survole. Même classe de bug que
   `#position-book-upload` : seule la couleur de base avait une variante
   claire, jamais l'état `:hover`. */
[data-theme="light"] .bk-root .btn-outline-secondary:hover,
[data-theme="light"] .bk-root .btn-secondary:hover,
[data-theme="light"] .bk-root .btn-outline-info:hover,
[data-theme="light"] .bk-root .btn-info:hover,
[data-theme="light"] .bk-root .btn-outline-danger:hover,
[data-theme="light"] .bk-root .btn-outline-warning:hover,
[data-theme="light"] .bk-root .btn-warning:hover {
    color: var(--bk-ink) !important;
}
/* Cartes GÉNÉRIQUES (pas les `.bk-block-card`, toujours sombres : exclues
   explicitement) -- accordéons, cartes ponctuelles hors grille de blocs. */
[data-theme="light"] .bk-root .card:not(.bk-block-card) {
    background: rgba(15, 23, 42, 0.035) !important;
    border-color: rgba(15, 23, 42, 0.14) !important;
}
[data-theme="light"] .bk-root .alert-warning {
    color: #7a4a00 !important;
}
[data-theme="light"] .bk-root .alert-danger {
    color: #7a2018 !important;
}
/* BLOQUANT mesuré 28/08 : `dcc.Upload` "Importer un CSV/Excel de positions"
   (`#position-book-upload`, portfolio_layout.py) ne fixe AUCUNE couleur de
   texte -- il hérite du texte de carte Bootstrap DARKLY, clair, prévu pour
   un fond sombre. Sous ce thème clair la carte ambiante devient claire
   (règle `.card:not(.bk-block-card)` ci-dessus) : texte clair sur fond
   clair, invisible. Le fond posé en ligne par le Python
   (`rgba(255,255,255,0.03)`, quasi transparent, correct en sombre) reste
   inchangé ici -- seul du contraste manque, jamais l'opacité. */
[data-theme="light"] .bk-root #position-book-upload > div {
    background-color: rgba(15, 23, 42, 0.035) !important;
    color: var(--bk-ink) !important;
}

/* --- Cartes : verre du site, jamais l'ancien CARD_STYLE opaque --- */
.bk-root .card {
    background: var(--bk-glass-bg) !important;
    border: 1px solid var(--bk-glass-border) !important;
    border-radius: 20px !important;
    box-shadow: none !important;
}
.bk-root .card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--bk-glass-border) !important;
    padding: 1.15rem 1.5rem !important;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-size: 1.02rem;
    color: #ffffff !important;
}
.bk-root .card-body {
    background: transparent !important;
    padding: 1.5rem !important;
}

/* Titre de section façon site : marque affinée + texte en dégradé */
.bk-section-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #ffffff 0%, #60a5fa 50%, #00f2ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.bk-mark {
    height: 15px;
    width: auto;
    flex: 0 0 auto;
    opacity: 0.9;
}
/* ============================================================
   ÉCHELLE TYPOGRAPHIQUE (refonte 17/08/2026, retour Louis
   « un seul gros bloc, les titres importants au second plan »)

   MESURÉ AVANT, en sonde DOM sur le dashboard réel :
     valeur héros ......... 48   px / 800
     titre de carte ....... 16,3 px / 700
     titre de section (h6)  16   px / 500   <-- plus LÉGER qu'un chiffre
     valeur de métrique ... 15,2 px / 600
     eyebrow .............. 10,9 px / 600
   Hors le héros, toute la hiérarchie d'une page de 2 600 px tenait
   dans 1,1 px, et un titre de section pesait moins qu'une cellule de
   tableau. Deux niveaux sont créés ici :
     L1  .bk-block-title  — un BLOC = une carte = une question
     L2  .bk-root h6      — une SECTION dans un bloc
   Ne pas réduire ces écarts sans re-mesurer : c'est l'écart, pas la
   valeur absolue, qui fait la hiérarchie.
   ============================================================ */

/* --- L1 : le bloc ---
   Une BOÎTE doit se voir comme une boîte (retour Louis 17/08 : « quasiment
   rien n'a changé »). Le verre du site — blanc à 3 % sur un fond #050a14,
   bordure à 8 % — suffit pour UNE carte posée sur une page ; empilé six fois
   il ne délimite plus rien, l'œil ne lit qu'un dégradé de noir. Les blocs du
   book prennent donc une SURFACE OPAQUE franchement plus claire que la page,
   une bordure visible et une ombre portée qui les décolle. Le verre reste la
   règle partout ailleurs dans l'onglet. */
.bk-blocks {
    display: flex;
    flex-direction: column;
    gap: 1.9rem;
}
.bk-root .card.bk-block-card {
    background: #0b1220 !important;
    border: 1px solid rgba(148, 163, 184, 0.22) !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45),
                inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    overflow: hidden;
    /* Re-épinglage des tokens : la surface du bloc est fixe et FONCÉE dans
       les deux thèmes, donc son contenu garde les couleurs optimisées pour
       un fond sombre, quel que soit `[data-theme]` sur la racine. Sans ça,
       la variante claire ci-dessus (pensée pour du texte sur fond clair)
       s'appliquerait aussi ICI et perdrait du contraste sur ce fond sombre
       fixe (charte D1b, 28/08). */
    --bk-glass-bg: rgba(255, 255, 255, 0.03);
    --bk-glass-border: rgba(255, 255, 255, 0.08);
    --bk-cyan: #00f2ff;
    --bk-blue: #60a5fa;
    --bk-ink: #cbd5e1;
    --bk-muted: #94a3b8;
    --bk-loss: #f87171;
    --bk-warn: #fbbf24;
    --bk-gain: #34d399;
    /* `--doc-*` (document_theme.css) sont dérivées de `--bk-*` PAR VALEUR,
       une seule fois, à l'élément qui les déclare (`.doc-root`, c'est-à-dire
       `#compliance-root` lui-même) -- un `var()` n'est pas un lien vivant,
       c'est un instantané. Sans les re-dériver ICI aussi, tout `.doc-status`
       affiché dans un bloc toujours sombre héritait l'instantané pris au
       thème courant sur l'ancêtre (ex. le vert clair `#047857`, pensé pour
       du texte sur fond blanc) au lieu du vert sombre `#34d399` -- mesuré en
       navigateur réel : 3,41:1 pour `--doc-ok`, jusqu'à 1,05:1 pour
       `--doc-none` (charte D1b, 28/08). */
    --doc-ok: var(--bk-gain);
    --doc-warn: var(--bk-warn);
    --doc-late: var(--bk-loss);
    --doc-unreadable: var(--bk-muted);
    --doc-none: var(--bk-ink);
}
/* Débordement horizontal mobile (charte D1b, constat mesuré : scrollWidth
   545 pour un viewport de 390) : un ancêtre flex sans `min-width:0` empêche
   le `.table-responsive` de `responsive=True` de faire son travail, même
   quand IL porte bien `overflow-x:auto`. Le fix descend toute la chaîne. */
.bk-root .bk-block-card,
.bk-root .bk-block-card .card-body,
.bk-root .bk-block-card .table-responsive {
    min-width: 0;
}
.bk-root .bk-block-card .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
/* Filet mobile (constat CSS 28/08) : plusieurs tables du Book/Documents/
   Conformité (ex. "VaR du book : méthodes croisées",
   `#position-book-var-methods-table`) sont un `dbc.Table(...)` SANS
   `responsive=True` — aucun `.table-responsive` n'existe dans le DOM pour
   ces tables, donc le fix ci-dessus (qui suppose ce wrapper) ne les
   couvre pas. Mesuré : 544 px de contenu dans un conteneur de 246-390 px
   à 390 px de large, zéro scroll possible, page NON élargie (le débordement
   restait invisible, pas absorbé). `display:block` sur un `<table>` sans
   toucher `display` de ses `thead`/`tbody`/`tr`/`td` enfants les laisse
   former une table anonyme normale à l'intérieur d'une boîte de bloc qui,
   elle, peut défiler — technique standard, aucun wrapper DOM requis.
   `.bk-root` est partagé par le Book, `#documents-root` ET
   `#compliance-root` (charte D1b) : une seule règle couvre les trois
   écrans ; les deux id sont repris en toute redondance au cas où un
   futur bloc rendrait une table hors de `.bk-root`. */
@media (max-width: 767.98px) {
    .bk-root table,
    #compliance-root table,
    #documents-root table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}
/* Une seule densité de tableau pour tout l'onglet (grille commune §4) :
   remplace les `style={'fontSize': ...}` dispersés d'un tableau à l'autre. */
.bk-root .bk-table-sm {
    font-size: 0.85rem;
}
/* P&L négatif dans une cellule -- remplace un `style={'color': ...}` inline
   calculé côté Python (charte D1b : zéro style= inline). */
.bk-root .bk-loss-text {
    color: var(--bk-loss) !important;
}
/* Texte secondaire dans une cellule/volet de détail -- remplace
   `className="text-muted"`, qui n'a pas de variante claire dans Bootstrap
   DARKLY (charte D1b : zéro `text-muted` dans cet onglet). */
.bk-root .bk-cell-muted {
    color: var(--bk-muted);
    font-size: 0.85rem;
}
/* Historique des acquittements : le motif est un texte libre, potentiellement
   long -- remplace un `style={'maxWidth': ..., 'whiteSpace': ...}` inline. */
.bk-root .bk-comment-cell {
    max-width: 22rem;
    white-space: normal;
}

/* ============================================================
   CONTRE-FIL premium.css (mesuré en navigateur réel, charte D1b 28/08,
   ÉTENDU au re-audit DA du 28/08) —
   `[data-theme="light"] .card .table, [data-theme="light"] .card .table >
   :not(caption) > * > *` (premium.css) pose `color: #0f172a !important`
   (quasi-noir) sur TOUTE `.card` en thème clair. `.bk-block-card`, lui,
   reste TOUJOURS sombre (re-épinglage ci-dessus, fond #0b1220), quelle que
   soit la racine qui le porte -- Book & Risque (`.bk-root`, SANS id),
   Conformité (`#compliance-root`) ou Documents (`#documents-root`). Une
   première version de ce contre-fil ne portait que sur `#compliance-root` :
   restait donc actif le trou mesuré en clair sur le Book PEUPLÉ (cellule
   « SPY » 1,05:1) ET sur Documents (bandeau de provenance 1,05:1).
   Spécificité : premium.css pèse (attribut + 2 classes) = (0,3,0) [+
   `:not(caption)`, un sélecteur de TYPE, sur la variante `> * > *` =
   (0,3,1)]. Une racine sans id (`.bk-root`) ne peut pas gagner par ID.

   PREMIÈRE CORRECTION INSUFFISANTE, mesurée en navigateur réel (Playwright,
   re-audit DA 28/08) : doubler la classe (`.bk-block-card.bk-block-card
   .table`) ne pèse QUE (0,3,0)/(0,3,1) -- deux classes doublées (2) + `.table`
   (1) = 3, exactement le total de premium.css (attribut + 2 classes = 3). Une
   spécificité ÉGALE se départage par l'ORDRE DE CHARGEMENT, et
   `book_theme.css` charge AVANT `premium.css` (ordre alphabétique des
   fichiers `assets/`) : premium.css gagnait le bras de fer malgré le
   contre-fil, cellule « SPY » retombant à 1,05:1 en thème clair -- vu au
   rendu, invisible en lisant seulement le nombre de classes. La classe est
   donc TRIPLÉE : 3 + 1 (`.table`) = 4, qui bat 3 sans dépendre de l'ordre de
   chargement ni d'un id de racine. */
.bk-block-card.bk-block-card.bk-block-card .table,
.bk-block-card.bk-block-card.bk-block-card .table > :not(caption) > * > * {
    color: var(--bk-ink) !important;
}
.bk-block-card.bk-block-card.bk-block-card .table thead th {
    color: var(--bk-muted) !important;
}
/* Bandeau de titre : c'est lui qui fait lire « nouvelle boîte » en
   défilement, bien avant la bordure. */
.bk-root .bk-block-card > .card-header {
    background: rgba(255, 255, 255, 0.045) !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18) !important;
    padding: 1.05rem 1.5rem 1.1rem !important;
}
.bk-root .bk-block-card > .card-body {
    padding: 1.4rem 1.5rem 1.5rem !important;
}
.bk-block-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
}
.bk-block-title {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.15;
    color: #ffffff;
}
/* La QUESTION à laquelle le bloc répond — même patron que les cartes
   benchmark (`benchmark-duel-question`) : un bloc s'ouvre sur sa
   question, jamais sur sa méthode. */
/* !important : `.bk-root .card-header` impose font-weight 800 + encre blanche
   à toute sa descendance. Sans surcharge, le chapô sortait en gras clair et
   entrait en concurrence avec le titre qu'il est censé servir. */
.bk-block-lede {
    display: block;
    font-size: 0.88rem;
    font-weight: 400 !important;
    letter-spacing: 0;
    line-height: 1.45;
    color: var(--bk-muted) !important;
    margin-top: 5px;
    max-width: 78ch;
}

/* --- L2 : la section dans un bloc --- */
.bk-root h6 {
    font-size: 1.08rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: -0.015em;
    margin-top: 1.7rem;
    margin-bottom: 0.55rem !important;
}
/* Une section qui OUVRE son bloc n'a rien à séparer : ni trait au-dessus
   d'elle (il collerait sous le bandeau de titre), ni marge haute. Les `<Hr>`
   d'ouverture des `build_*_section` datent de la carte unique, où ils
   séparaient bien deux sections consécutives ; dans une boîte dédiée ils
   ouvrent le corps sur un vide. */
.bk-root .bk-block-card > .card-body > hr:first-child,
.bk-root .bk-block-card > .card-body > *:first-child > hr:first-child {
    display: none;
}
.bk-root .card-body > h6:first-child,
.bk-root .card-body > div:first-child > h6:first-child,
.bk-root .bk-block-card > .card-body > *:first-child > h6:first-child {
    margin-top: 0;
}
/* Le trait de séparation devient un repère de section, pas un fil perdu
   au milieu du texte : plus d'air au-dessus, aucun en dessous (le titre
   qui suit porte déjà sa marge). */
.bk-root hr {
    margin: 2rem 0 0 !important;
    border-color: var(--bk-glass-border) !important;
    opacity: 1 !important;
}

/* --- L3 : légende de tableau --- */
/* Un tableau dense n'est repérable en défilement que s'il porte son nom
   juste au-dessus : le titre de section est souvent à plusieurs centaines
   de pixels (constat sur le tableau VaR par ligne, sans titre du tout). */
.bk-table-caption {
    font-size: 0.68rem;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--bk-muted);
    margin-bottom: 4px;
}

.bk-eyebrow {
    font-size: 0.68rem;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--bk-muted);
}

/* --- Héros : LA VaR + jauge de budget + expositions --- */
.bk-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 2.2rem;
    padding: 0.4rem 0 1.1rem;
}
.bk-hero-main { min-width: 240px; }
.bk-hero-value {
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
}
.bk-hero-sub {
    color: var(--bk-muted);
    font-size: 0.92rem;
    margin-top: 2px;
}
.bk-hero-side {
    flex: 1 1 300px;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}
.bk-hero-expo {
    display: flex;
    gap: 1.8rem;
    flex: 0 0 auto;
    align-items: center;
}
.bk-hero-expo .bk-expo-val {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--bk-ink);
    font-variant-numeric: tabular-nums;
}
/* Jauge de budget VaR (patron du ticket pré-trade, érigé en modèle) */
.bk-gauge-track {
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    position: relative;
    overflow: hidden;
}
.bk-gauge-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #34d399 0%, #fbbf24 65%, #f87171 100%);
}
.bk-gauge-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--bk-muted);
}
.bk-gauge-label b { color: var(--bk-ink); font-variant-numeric: tabular-nums; }

/* Strip de métriques secondaires (seuil/horizon/vol/covariance) */
.bk-metric-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-top: 1px solid var(--bk-glass-border);
    border-bottom: 1px solid var(--bk-glass-border);
    margin: 0.25rem 0 1.2rem;
}
.bk-metric {
    padding: 10px 18px 10px 0;
    margin-right: 18px;
    border-right: 1px solid var(--bk-glass-border);
}
.bk-metric:last-child { border-right: none; margin-right: 0; }
.bk-metric .bk-metric-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--bk-ink);
    font-variant-numeric: tabular-nums;
}

/* --- Tables : denses, scannables, chiffres tabulaires à droite --- */
.bk-root .table {
    color: var(--bk-ink);
    margin-bottom: 0.4rem;
}
.bk-root .table thead th {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    font-weight: 600;
    color: var(--bk-muted);
    border-bottom: 1px solid var(--bk-glass-border) !important;
    border-top: none !important;
    padding: 8px 10px;
    white-space: nowrap;
}
.bk-root .table td {
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding: 8px 10px;
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
}
.bk-root .table td:not(:first-child),
.bk-root .table th:not(:first-child) {
    text-align: right;
}
.bk-root .table-hover tbody tr:hover {
    background: rgba(0, 242, 255, 0.04) !important;
}

/* --- Boutons : système unique du site (pilules) --- */
.bk-root .btn {
    border-radius: 50px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px;
    text-transform: none !important;
    box-shadow: none !important;
    transition: all 0.2s ease;
}
/* CTA primaire — signature du site : dégradé clair, texte sombre */
.bk-root .btn-primary {
    background: linear-gradient(135deg, #ffffff 0%, #60a5fa 100%) !important;
    border: none !important;
    color: #050a14 !important;
    font-weight: 700 !important;
}
.bk-root .btn-primary:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}
/* Toutes les actions secondaires : contour lisible, hover cyan */
.bk-root .btn-outline-secondary,
.bk-root .btn-secondary,
.bk-root .btn-outline-info,
.bk-root .btn-info,
.bk-root .btn-outline-danger,
.bk-root .btn-outline-warning,
.bk-root .btn-warning {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: #e2e8f0 !important;
}
.bk-root .btn-outline-secondary:hover,
.bk-root .btn-secondary:hover,
.bk-root .btn-outline-info:hover,
.bk-root .btn-info:hover,
.bk-root .btn-outline-danger:hover,
.bk-root .btn-outline-warning:hover,
.bk-root .btn-warning:hover {
    border-color: rgba(0, 242, 255, 0.55) !important;
    background: rgba(0, 242, 255, 0.06) !important;
    color: #ffffff !important;
}

/* --- Hiérarchie d'alerte : 1 incident, pas 1 note méthodo --- */
/* Notes méthodo (ex-alerts color=info) : plus de boîte pleine — un
   filet gauche discret, une encre. */
.bk-root .alert-info {
    background: transparent !important;
    border: none !important;
    border-left: 2px solid rgba(96, 165, 250, 0.45) !important;
    border-radius: 0 !important;
    color: var(--bk-muted) !important;
    padding: 4px 0 4px 12px !important;
    font-size: 0.85rem;
}
/* Incident actionnable (warning) : ambre franc, se détache des notes */
.bk-root .alert-warning {
    background: rgba(251, 191, 36, 0.08) !important;
    border: 1px solid rgba(251, 191, 36, 0.35) !important;
    border-radius: 12px !important;
    color: #fde68a !important;
}
.bk-root .alert-danger {
    background: rgba(248, 113, 113, 0.08) !important;
    border: 1px solid rgba(248, 113, 113, 0.4) !important;
    border-radius: 12px !important;
    color: #fecaca !important;
}

/* --- Sévérité graduée des scénarios (fini le tout-rouge) --- */
.bk-sev {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}
.bk-sev-low  { color: #7dd3c8; background: rgba(52, 211, 153, 0.12); }
.bk-sev-mid  { color: #fcd34d; background: rgba(251, 191, 36, 0.14); }
.bk-sev-high { color: #fca5a5; background: rgba(248, 113, 113, 0.16); }

/* Drill-down des chocs par scénario */
.bk-details summary {
    cursor: pointer;
    color: var(--bk-blue);
    font-size: 0.8rem;
    list-style: none;
    user-select: none;
}
.bk-details summary::-webkit-details-marker { display: none; }
.bk-details summary::before { content: '+ '; }
.bk-details[open] summary::before { content: '\2212 '; }
.bk-details[open] .bk-details-body {
    color: var(--bk-muted);
    font-size: 0.8rem;
    padding: 6px 0 2px 12px;
    border-left: 1px solid var(--bk-glass-border);
    margin-top: 4px;
    text-align: left;
    white-space: normal;
}

/* --- Formulaire : équilibre des colonnes (retour Louis 06/08 : les
   champs empilés en une pile ne remplissaient que la droite) ---
   Saisie du book à gauche (~42%), paramètres à droite (~58%) posés en
   GRILLE 2 colonnes ; les titres de groupes s'étendent sur les deux. */
/* Restructure 06/08 (retour Louis) : book PLEINE LARGEUR en haut (upload +
   saisie + aperçu tableau), paramètres EN DESSOUS en grille 3 colonnes. */
.bk-params-col {
    border-top: 1px solid var(--bk-glass-border);
    margin-top: 18px;
    padding-top: 14px;
}
@media (min-width: 992px) {
    .bk-params-col > .row {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 2px 30px;
        align-items: start;
    }
    .bk-params-col > .row > .col-12:has(> .bk-eyebrow) {
        grid-column: 1 / -1;
    }
}

/* Retour Louis 06/08 (« indigeste ») : les textes d'aide sous CHAQUE champ
   (~15 lignes grises) sortent de l'écran — le formulaire redevient une
   grille de champs scannable. Les aides restent dans le DOM (ids i18n
   conservés, doctrine labels fantômes) et réapparaissent au survol du
   groupe de champ concerné. */
/* 06/08 (retour Louis, itération finale) : les aides sont portées par de
   VRAIS ⓘ cliquables (book-help-btn, mêmes classes que les Résultats) qui
   ouvrent le panneau latéral book-help-offcanvas. Les <small> historiques
   restent montés (ids i18n — doctrine labels fantômes) mais invisibles. */
.bk-params-col small.text-muted {
    display: none !important;
}

/* Zone de collage du book (retour Louis : « digne de Windows XP ») :
   surface encastrée du site, encre mono teal claire, focus cyan. */
.bk-root #position-book-csv-input {
    background: rgba(2, 12, 27, 0.65) !important;
    border: 1px solid var(--bk-glass-border) !important;
    border-radius: 14px !important;
    color: #8be9d9 !important;
    font-size: 0.85rem !important;
    line-height: 1.75 !important;
    padding: 14px 16px !important;
    letter-spacing: 0.02em;
}
.bk-root #position-book-csv-input:focus {
    border-color: rgba(0, 242, 255, 0.45) !important;
    box-shadow: 0 0 0 3px rgba(0, 242, 255, 0.08) !important;
    outline: none !important;
}
.bk-root #position-book-upload > div {
    border-radius: 14px;
    /* `--border-color` (posé en ligne par le Python) n'existe nulle part
       dans les tokens (`--border-light` est le nom réel) : le `var()`
       invalide rendait tout le raccourci `border` invalide, donc AUCUNE
       bordure pointillée, dans les deux thèmes. Corrigé ici, jamais côté
       Python (hors périmètre CSS). */
    border: 1px dashed var(--bk-glass-border) !important;
}
.bk-params-col small.text-muted:hover {
    font-size: 0.8rem !important;
    top: 26px;
    right: 0;
    left: auto;
    width: max-content;
    z-index: 40;
    background: #0b1524;
    border: 1px solid var(--bk-glass-border);
    border-radius: 10px;
    padding: 8px 12px;
    max-width: 340px;
    box-shadow: 0 12px 30px rgba(2, 8, 23, 0.5);
    color: var(--bk-ink) !important;
}
.bk-params-col small.text-muted:hover::before {
    content: '';
}
.bk-params-col > .row > .col-12,
.bk-params-col { position: relative; }

/* --- Formulaire : groupes nommés + barre repliée --- */
.bk-form-group {
    padding: 14px 0 4px;
    border-top: 1px solid var(--bk-glass-border);
    margin-top: 12px;
}
.bk-form-group:first-child { border-top: none; margin-top: 0; padding-top: 0; }
.bk-form-group .bk-eyebrow { display: block; margin-bottom: 10px; }
.bk-summary-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 18px;
    background: var(--bk-glass-bg);
    border: 1px solid var(--bk-glass-border);
    border-radius: 14px;
    color: var(--bk-ink);
    font-size: 0.9rem;
}

/* Accordéon des analyses avancées : verre, hairlines */
.bk-root .accordion,
.bk-root .accordion-item {
    background: transparent !important;
}
.bk-root .accordion-item {
    border: 1px solid var(--bk-glass-border) !important;
    border-radius: 16px !important;
    margin-bottom: 10px;
    overflow: hidden;
}
/* L'en-tête Bootstrap d'accordéon est un <h2> : les règles gradient-text
   globales de premium.css (.card-header h2, .title-box h2) le rendaient
   TRANSPARENT (webkit-text-fill-color) — titres invisibles, vu en sonde. */
.bk-root .accordion-header,
.bk-root h2.accordion-header {
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
}
.bk-root .accordion-button,
.bk-root .accordion-button.collapsed,
.bk-root .accordion-button:not(.collapsed) {
    background: transparent !important;
    color: #ffffff !important;
    -webkit-text-fill-color: currentColor !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
    box-shadow: none !important;
    padding: 14px 18px !important;
    font-size: 0.95rem !important;
}
.bk-root .accordion-button::after {
    filter: brightness(0) invert(1);
    opacity: 0.5;
    /* Le bouton est dans un conteneur flex : sans ces deux règles il se
       réduit à la largeur du texte et le chevron vient coller au libellé. */
    margin-left: auto;
}
.bk-root .accordion-button {
    width: 100% !important;
    display: flex !important;
    align-items: center;
}
.bk-root .accordion-body {
    background: transparent !important;
    padding: 4px 18px 16px !important;
}

/* ============================================================
   SIGNAL D'ÉVÉNEMENT À PROÉMINENCE CONDITIONNELLE (17/08/2026)
   Le bloc calendaire reste à sa place ; SEUL un cas notable
   (règles dans utility/event_risk_model.event_risk_headline)
   remonte ici, contre le budget VaR. Un bandeau permanent posé
   sur un ×0,96 est ignoré en trois jours.
   ============================================================ */
.bk-signal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    padding: 11px 16px;
    border-radius: 14px;
    border: 1px solid var(--bk-glass-border);
    background: var(--bk-glass-bg);
    margin: 0.2rem 0 1.1rem;
    border-left-width: 3px;
}
/* Le ROUGE reste réservé au franchissement — ici un dépassement de
   limite PROJETÉ, qui est bien un franchissement annoncé. */
.bk-signal--breach { border-left-color: var(--bk-loss); }
.bk-signal--elevated { border-left-color: var(--bk-warn); }
/* Jamais de vert : une séance mesurée plus calme est une mesure, pas un
   feu au vert ni une invitation à prendre du risque. */
.bk-signal--calmer { border-left-color: var(--bk-blue); }
.bk-signal-when {
    font-weight: 700;
    color: #ffffff;
    font-size: 0.95rem;
}
.bk-signal-fam {
    font-size: 0.7rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--bk-ink);
    border: 1px solid var(--bk-glass-border);
    border-radius: 999px;
    padding: 2px 9px;
}
.bk-signal-val {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #ffffff;
}
.bk-signal--breach .bk-signal-val { color: var(--bk-loss); }
.bk-signal-note {
    font-size: 0.78rem;
    color: var(--bk-muted);
    flex-basis: 100%;
}
.bk-signal-link {
    font-size: 0.8rem;
    color: var(--bk-blue) !important;
    text-decoration: none;
    white-space: nowrap;
}
.bk-signal-link:hover { color: var(--bk-cyan) !important; }

/* Convention d'une mesure (horizon/confiance), collée au chiffre.
   Deux VaR de conventions différentes se suivaient sans démarcation :
   le héros en 1 j/95 % et la jauge Box 15 en 20 j/99 % se lisaient
   comme deux facettes du même risque (audit quant 17/08). */
.bk-convention {
    display: inline-block;
    font-size: 0.68rem;
    letter-spacing: 0.8px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--bk-muted);
    border: 1px solid var(--bk-glass-border);
    border-radius: 999px;
    padding: 1px 9px;
    margin-left: 10px;
    vertical-align: middle;
    white-space: nowrap;
}

/* Ancre pré-trade depuis le héros */
.bk-anchor-btn {
    font-size: 0.82rem;
    color: var(--bk-blue) !important;
    text-decoration: none;
    border: 1px solid rgba(96, 165, 250, 0.35);
    border-radius: 50px;
    padding: 6px 14px;
    white-space: nowrap;
}
.bk-anchor-btn:hover {
    border-color: rgba(0, 242, 255, 0.55);
    color: #ffffff !important;
}