/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   LA BARRE DES SCÉNARIOS D'UN DOSSIER SEUL (18/10, Shared/BarreScenarios.razor, préfixe bsc-). Collée juste sous la barre de la
   formule (hauteur mesurée --vit-h, hub-direct.js) ou en haut du hub ; le verre de la barre du groupe (voile semi-transparent, flou
   fort : .fec-overlay porte la classe a-barre-groupe, son flou passe sur ::before, sinon celui de la barre ne flouterait rien).
   Une puce par scénario (l'actif à la marque), puis « Générer ». Téléphone : les puces défilent à l'horizontale.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
.bsc {
    position: sticky; top: calc(env(safe-area-inset-top, 0px) + 8px); z-index: 6;
    display: flex; align-items: center; justify-content: center; gap: 8px 12px; flex-wrap: wrap; box-sizing: border-box;
    /* 18/10 (Arthur : la même largeur que la barre de la formule) : celle de sa peau, mesurée (--vit-w, hub-direct.js), qui
       s'élargit à toute la colonne une fois collée ; sans barre de formule, la colonne du hub. Le contenu reste centré. */
    width: var(--vit-w, min(100%, var(--hub-col, 1320px))); max-width: 100%;
    margin: 0 auto 14px; padding: 8px 12px; border-radius: 14px; border: 1px solid var(--o8);
    background: color-mix(in srgb, var(--hx5, #060d14) 66%, transparent);
    -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%);
}
.bsc.is-sous-vitrine { top: var(--vit-h, 58px); }
html[data-fond]:not([data-theme="light"]) .fec-overlay .bsc { background-color: rgba(6, 16, 24, .62); }
html[data-theme="light"] .bsc { background: color-mix(in srgb, var(--color-bg-card, #fff) 72%, transparent); border-color: var(--color-border-subtle);
    box-shadow: 0 6px 20px rgba(15, 30, 45, .07); }
html[data-style="mat"] .bsc { background: color-mix(in srgb, var(--mt-carte, #0b1820) 82%, transparent); border-color: var(--mt-trait, var(--o8)); }
.bsc-l { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 12px; font-weight: 800; color: var(--tx2); cursor: help; }
.bsc-l .iku-ico { color: var(--brand); }
.bsc-puces { display: flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; flex-wrap: wrap; }
.bsc-puce {
    height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--o10); background: var(--o4); color: var(--tx2);
    font: inherit; font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: background .14s, border-color .14s, color .14s;
}
.bsc-puce:hover:not(:disabled) { color: var(--tx1); border-color: color-mix(in srgb, var(--brand) 45%, transparent); }
.bsc-puce.on { color: var(--brand-ink, #032530); background: var(--brand); border-color: var(--brand); }
.bsc-puce:focus-visible, .bsc-gen:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.bsc-puce:disabled { cursor: progress; }
/* 18/10 (« un peu trop chargé ») : dans la barre, un ajout discret, « + 3 scénarios types » : ni fond ni cadre, comme « Piloter » ;
   dans le tiroir du téléphone, le bouton garde son cadre (pas de bulle au toucher : son libellé dit tout). */
.bsc-gen {
    display: inline-flex; align-items: center; gap: 5px; flex: none; height: 28px; padding: 0 10px; border-radius: 8px; cursor: pointer;
    font: inherit; font-size: 12px; font-weight: 700; white-space: nowrap; color: var(--tx2); background: none; border: 0;
}
.bsc-gen .iku-ico { color: var(--brand); }
.bsc-gen:hover:not(:disabled) { color: var(--brand-strong); background: color-mix(in srgb, var(--brand) 12%, transparent); }
.bsc-t-pied .bsc-gen { color: var(--brand-strong); background: color-mix(in srgb, var(--brand) 10%, transparent);
    border: 1px dashed color-mix(in srgb, var(--brand) 55%, transparent); }
/* 18/10 : les chiffres clés du scénario affiché (et l'écart à la base), puis « Piloter → ». */
.bsc-sep { flex: none; width: 1px; height: 22px; background: var(--o10); }
.bsc-kpis { display: flex; align-items: center; gap: 4px 16px; flex-wrap: wrap; min-width: 0; }
.bsc-kpi { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; cursor: help; font-variant-numeric: tabular-nums; }
.bsc-kpi-l { font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--mut1, #8aa0ad); }
.bsc-kpi-v { font-size: 13px; font-weight: 800; color: var(--tx1); }
.bsc-kpi-e { font-style: normal; font-size: 11px; font-weight: 700; color: var(--mut1, #8aa0ad); }
.bsc-kpi-e.is-up { color: var(--st-green, #34d399); }
.bsc-kpi-e.is-down { color: var(--st-red, #f87171); }
.bsc-pil { flex: none; height: 28px; padding: 0 10px; border: 0; border-radius: 8px; background: none; cursor: pointer; font: inherit; font-size: 12px;
    font-weight: 700; color: var(--brand-strong); white-space: nowrap; }
.bsc-pil:hover { background: color-mix(in srgb, var(--brand) 12%, transparent); }
.bsc-pil:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.bsc-etat { display: inline-flex; align-items: center; gap: 7px; flex: none; font-size: 12px; font-weight: 600; color: var(--tx2); }
.bsc-spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--o12); border-top-color: var(--brand); animation: bsc-tourne .8s linear infinite; }
@keyframes bsc-tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bsc-spin { animation: none; } }
html[data-theme="light"] .bsc-puce { background: #fff; border-color: var(--color-border-subtle); }
/*  19/10 : la règle claire ci-dessus (fond blanc) l'emportait sur .bsc-puce.on (plus spécifique) : texte blanc sur blanc. */
html[data-theme="light"] .bsc-puce.on { color: #fff; background: var(--brand); border-color: var(--brand); }
/* Écran moyen : les chiffres passent sous les puces, la barre reste d'un bloc. */
@media (max-width: 1180px) { .bsc-kpis { gap: 4px 12px; } .bsc-kpi-l { font-size: 10.5px; } }

/* ── 18/10, TÉLÉPHONE (Arthur : « fais le tiroir mobile ») : sous 768 px, une seule pilule en pleine largeur (le scénario affiché en
   entier, l'écart de son CA à la base) qui ouvre un tiroir par le bas ; les puces qui défilaient coupaient l'actif et le dernier. ── */
.bsc-mob { display: none; }
@media (max-width: 767px) {
    .bsc { width: 100%; padding: 5px; gap: 0; flex-wrap: nowrap; }
    .bsc > :not(.bsc-mob) { display: none; }
    .bsc-mob {
        display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; height: 32px; padding: 0 10px; border: 0; border-radius: 10px;
        background: var(--o4); color: var(--tx1); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; text-align: left;
    }
    .bsc-mob > .iku-ico:first-child { color: var(--brand); flex: none; }
    .bsc-mob.is-alt { background: color-mix(in srgb, var(--brand) 14%, transparent); }
    .bsc-mob-n { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .bsc-mob-e { flex: none; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
    .bsc-mob-e.is-up { color: var(--st-green, #34d399); }
    .bsc-mob-e.is-down { color: var(--st-red, #f87171); }
    .bsc-mob-chev { flex: none; color: var(--mut1, #8aa0ad); }
}

/* LE TIROIR (Shared/TiroirScenarios) : rendu au niveau de la page, au-dessus des onglets et des boutons flottants (fab-stack 5 000, copilote 10 050). */
.bsc-voile { position: fixed; inset: 0; z-index: 10090; background: rgba(2, 8, 12, .55); animation: bsc-fondu .16s ease-out; }
.bsc-tiroir {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 10091; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: 78vh; max-height: 78dvh;
    box-sizing: border-box; padding: 6px 14px calc(12px + env(safe-area-inset-bottom, 0px)); border-radius: 18px 18px 0 0;
    background: var(--surf-2, #102733); border-top: 1px solid var(--o10); box-shadow: 0 -12px 40px rgba(0, 0, 0, .45); animation: bsc-monte .2s ease-out;
}
html[data-theme="light"] .bsc-tiroir { background: #fff; border-color: var(--color-border-subtle); box-shadow: 0 -12px 40px rgba(15, 30, 45, .18); }
html[data-style="mat"] .bsc-tiroir { background: var(--mt-carte, #0b1820); }
@keyframes bsc-monte { from { transform: translateY(24px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes bsc-fondu { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bsc-voile, .bsc-tiroir { animation: none; } }
.bsc-t-tete { position: relative; display: grid; gap: 2px; padding: 10px 40px 10px 0; }
.bsc-t-poignee { justify-self: center; width: 36px; height: 4px; border-radius: 2px; background: var(--o12); margin: 0 0 8px 40px; }
.bsc-t-tete b { font-size: 15px; font-weight: 800; color: var(--tx1); }
.bsc-t-sous { font-size: 12px; color: var(--mut1, #8aa0ad); }
.bsc-t-x { position: absolute; top: 14px; right: 0; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 10px;
    background: var(--o6); color: var(--tx1); cursor: pointer; }
.bsc-t-liste { display: grid; gap: 6px; overflow-y: auto; overscroll-behavior: contain; padding: 2px 0 8px; }
.bsc-t-ligne {
    display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "c n n" ". ca tr"; gap: 3px 8px; align-items: center;
    width: 100%; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--o8); background: var(--o4); color: var(--tx1);
    font: inherit; text-align: left; cursor: pointer;
}
.bsc-t-ligne.on { border-color: color-mix(in srgb, var(--brand) 60%, transparent); background: color-mix(in srgb, var(--brand) 12%, transparent); }
.bsc-t-coche { grid-area: c; color: var(--brand); display: grid; place-items: center; }
.bsc-t-nom { grid-area: n; font-size: 14px; font-weight: 800; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bsc-t-base { margin-left: 4px; font-size: 11px; font-weight: 600; color: var(--mut1, #8aa0ad); }
.bsc-t-v { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--tx2); }
.bsc-t-v:nth-of-type(3) { grid-area: ca; }
.bsc-t-v:nth-of-type(4) { grid-area: tr; justify-self: end; }
.bsc-t-l { font-size: 11px; font-weight: 600; color: var(--mut1, #8aa0ad); }
.bsc-t-v i { font-style: normal; margin-left: 4px; font-size: 11.5px; }
.bsc-t-v i.is-up { color: var(--st-green, #34d399); }
.bsc-t-v i.is-down { color: var(--st-red, #f87171); }
.bsc-t-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid var(--o8); }
.bsc-t-pied .bsc-gen { flex: 1 1 auto; justify-content: center; height: 40px; }
.bsc-t-pied .bsc-pil { height: 40px; }
@media (min-width: 768px) { .bsc-voile, .bsc-tiroir { display: none; } }   /* écran large : les puces */