/* ══ CE QUI PÈSE SUR LA TRÉSORERIE (2026-10-19), préfixe sens- ═══════════════════════════════════════════════════════════════
   Shared/SensibilitesVue.razor : la tornade des hypothèses clés du prévisionnel, ouverte depuis le menu « Outils » du pilotage et la
   palette. Rang 5630 / 5631 comme les ratios bancaires (au-dessus du cockpit et de ses fenêtres), rendue hors du conteneur du cockpit.
   • Jetons de l'app : --surf-*, --tx*, --mut*, --o*, --brand, --st-red (défavorable), --st-green (favorable). Clair et sombre.
   • Une seule échelle : chaque barre part de l'axe central (la base), sa longueur est proportionnelle à l'écart.
   • Étiquettes à l'encre du texte, jamais à la couleur de la barre.
   • Téléphone (≤ 640 px) : plein écran, le nom du levier au-dessus de ses barres.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

body:has(.sens-modal) .cop-fab { display: none; }

.sens-back { position: fixed; inset: 0; z-index: 5630; background: var(--bd72, rgba(3,12,18,.72)); backdrop-filter: blur(2px); }
.sens-modal {
    position: fixed; z-index: 5631; inset: 0; margin: auto;
    width: min(980px, calc(100vw - 48px));
    height: min(860px, calc(100vh - 48px)); height: min(860px, calc(100dvh - 48px));
    display: flex; flex-direction: column; overflow: hidden; outline: none;
    background: var(--surf-2, #102733); color: var(--tx1, #eafdff); font-family: var(--font-family);
    border: 1px solid color-mix(in srgb, var(--brand, #00B1CF) 22%, transparent); border-radius: 18px;
    box-shadow: 0 30px 80px rgba(0,0,0,.55);
    --sens-def: var(--st-red, #f87171);
    --sens-fav: var(--st-green, #34d399);
}
html[data-theme="light"] .sens-modal { background: #fff; box-shadow: 0 30px 80px rgba(30,41,59,.25); }

.sens-head { flex: 0 0 auto; display: flex; align-items: flex-start; gap: 14px; padding: 18px 22px 14px; border-bottom: 1px solid var(--o8); }
.sens-head-ic {
    flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
    background: color-mix(in srgb, var(--brand, #00B1CF) 16%, transparent); color: var(--brand-strong, var(--brand, #00B1CF));
}
.sens-head-ic svg { width: 18px; height: 18px; }
.sens-head-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sens-titre { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; }
.sens-sous { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--mut1); }
.sens-scen { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; color: var(--tx2, var(--tx1)); background: var(--o6); }
.sens-scen svg { width: 12px; height: 12px; }
.sens-x {
    flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; cursor: pointer;
    border: 1px solid var(--o10); background: transparent; color: var(--mut2);
}
.sens-x:hover { background: var(--o6); color: var(--tx1); }
.sens-x svg { width: 15px; height: 15px; }

.sens-corps { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 22px 22px; display: flex; flex-direction: column; gap: 14px; }
/* Les blocs du corps gardent leur hauteur : sans cela, le tableau (overflow-x) se tasse à zéro dans la colonne qui défile. */
.sens-corps > * { flex-shrink: 0; }

/* ── Verrou, attente ── */
.sens-verrou { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 18px; border-radius: 12px; background: var(--o3); color: var(--tx2, var(--tx1)); font-size: 13px; line-height: 1.5; }
.sens-verrou > svg { width: 18px; height: 18px; color: var(--mut1); flex: 0 0 auto; }
.sens-verrou > span { flex: 1 1 260px; }
.sens-btn {
    display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 9px; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600;
    border: 1px solid color-mix(in srgb, var(--brand, #00B1CF) 45%, transparent); background: color-mix(in srgb, var(--brand, #00B1CF) 14%, transparent); color: var(--tx1);
}
.sens-btn svg { width: 14px; height: 14px; }
.sens-calcul { display: flex; flex-direction: column; gap: 10px; padding: 28px 18px; border-radius: 12px; background: var(--o3); }
.sens-calcul-t { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.sens-calcul-d { font-size: 12.5px; color: var(--mut1); }
.sens-barre { height: 6px; border-radius: 999px; background: var(--o8); overflow: hidden; }
.sens-barre > span { display: block; height: 100%; border-radius: 999px; background: var(--brand, #00B1CF); transition: width .2s ease; }
.sens-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--o10); border-top-color: var(--brand, #00B1CF); animation: sens-tourne .8s linear infinite; }
@keyframes sens-tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sens-spin { animation: none; } .sens-barre > span { transition: none; } }

/* ── Lecture ── */
.sens-lecture { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--o8); background: var(--o3); }
.sens-phrase { margin: 0; font-size: 14.5px; font-weight: 700; line-height: 1.45; color: var(--tx1); }
.sens-base { margin: 0; font-size: 12.5px; color: var(--tx2, var(--tx1)); }
.sens-note { margin: 2px 0 0; display: flex; gap: 6px; align-items: flex-start; font-size: 12px; color: var(--mut1); line-height: 1.45; }
.sens-note svg { width: 13px; height: 13px; flex: 0 0 auto; margin-top: 2px; }

.sens-outils { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.sens-chips { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--o6); gap: 2px; }
.sens-chip { border: 0; background: transparent; color: var(--mut1); font: inherit; font-size: 12.5px; padding: 5px 11px; border-radius: 8px; cursor: pointer; }
.sens-chip.on { background: var(--surf-2, #102733); color: var(--tx1); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
html[data-theme="light"] .sens-chip.on { background: #fff; box-shadow: 0 1px 3px rgba(30,41,59,.18); }
.sens-legende { display: inline-flex; gap: 14px; font-size: 12px; color: var(--tx2, var(--tx1)); }
.sens-legende span { display: inline-flex; align-items: center; gap: 6px; }
.sens-pastille { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.sens-pastille.def { background: var(--sens-def); }
.sens-pastille.fav { background: var(--sens-fav); }

/* ── Tornade ── */
.sens-tornade { display: flex; flex-direction: column; gap: 4px; }
.sens-axe-tete, .sens-ligne { display: grid; grid-template-columns: 210px 1fr; column-gap: 14px; align-items: center; }
.sens-axe-base { justify-self: center; font-size: 11.5px; color: var(--mut1); padding-bottom: 2px; }
.sens-ligne { padding: 8px 0; border-top: 1px solid var(--o6); }
.sens-nom { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.sens-nom b { font-size: 13px; font-weight: 700; line-height: 1.3; }
.sens-poser {
    display: inline-flex; align-items: center; gap: 3px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: 11.5px;
    color: var(--brand-strong, var(--brand, #00B1CF)); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}
.sens-poser svg { width: 11px; height: 11px; }
.sens-poser:hover { text-decoration-color: currentColor; }
.sens-crans { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sens-cran { display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 6px; }
.sens-cran-l { font-size: 11.5px; color: var(--mut1); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sens-piste { position: relative; height: 20px; }
.sens-piste::before { content: ""; position: absolute; left: 50%; top: -6px; bottom: -6px; width: 1px; background: var(--o12, var(--o10)); }
.sens-b { position: absolute; top: 3px; height: 14px; min-width: 2px; }
.sens-b.def { background: color-mix(in srgb, var(--sens-def) 78%, transparent); border-radius: 4px 0 0 4px; }
.sens-b.fav { background: color-mix(in srgb, var(--sens-fav) 78%, transparent); border-radius: 0 4px 4px 0; }
.sens-v { position: absolute; top: 2px; font-size: 11.5px; line-height: 16px; color: var(--tx1); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sens-na { position: absolute; left: calc(50% + 6px); top: 2px; font-size: 11.5px; line-height: 16px; color: var(--mut1); font-style: italic; white-space: nowrap; }

.sens-sansobjet { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--mut1); line-height: 1.45; }
.sens-sansobjet b { color: var(--tx2, var(--tx1)); font-weight: 600; }

.sens-lien { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; padding: 4px 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: 12.5px; color: var(--tx2, var(--tx1)); }
.sens-lien svg { width: 13px; height: 13px; }
.sens-lien:hover { color: var(--tx1); }

/* ── Tableau des chiffres (vue accessible de la tornade) ── */
.sens-table-w { overflow-x: auto; border: 1px solid var(--o8); border-radius: 10px; }
.sens-table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.sens-table th, .sens-table td { padding: 6px 10px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--o6); }
.sens-table th:first-child, .sens-table td:first-child, .sens-table th:nth-child(2), .sens-table td:nth-child(2) { text-align: left; }
.sens-table th { font-weight: 600; color: var(--mut1); background: var(--o3); }
.sens-table small { color: var(--mut1); margin-left: 4px; }
.sens-tr-base td { font-weight: 700; }
.sens-td-na { color: var(--mut1); font-style: italic; text-align: left !important; white-space: normal !important; }

.sens-pied { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 11.5px; color: var(--mut1); padding-top: 6px; border-top: 1px solid var(--o6); }

/* ── Téléphone ── */
@media (max-width: 640px) {
    .sens-modal { inset: 0; width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; border: 0; }
    .sens-head { padding: 14px 16px 12px; gap: 10px; }
    .sens-corps { padding: 12px 16px 18px; }
    .sens-axe-tete, .sens-ligne { grid-template-columns: 1fr; row-gap: 6px; }
    .sens-axe-tete > span:first-child { display: none; }
    .sens-nom { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 10px; }
    .sens-cran { grid-template-columns: 40px 1fr; }
    .sens-v, .sens-cran-l, .sens-na { font-size: 11px; }
    .sens-phrase { font-size: 13.5px; }
}