/*  ── LA FOURCHETTE CALIBRÉE DU PRÉVISIONNEL (2026-10-11, F5) ─────────────────────────────────────────────────────────────────
    Pages/FourchettePrevision.razor (préfixe fch-) et le cône du graphe de trésorerie (apexTreso._cone, app.js : classes iku-cone-*).
    Moderne : zone en léger fondu le long de l'horizon, bords en pointillés ; Mat et Papier : zone PLEINE légère, sans fondu, bords
    pleins. Le cône est peint SOUS les séries du graphe : la courbe, son aplat et l'encours court terme restent lisibles par-dessus.
    Chargée après analyses.css (index.html) ; bumper son ?v= à chaque modification (git add -f : wwwroot/css est ignoré). */

/*  1. LE CÔNE (SVG d'ApexCharts). La couleur et le fondu de Moderne sont posés par app.js (dégradé de la marque) ; ici, le reste. */
.iku-cone { pointer-events: none; }
.iku-cone-zone { pointer-events: none; }
.iku-cone-bord { fill: none; stroke: var(--brand, #0AACA5); stroke-opacity: .5; stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
html[data-theme="light"] .iku-cone-bord { stroke-opacity: .6; }
html[data-style="mat"] .iku-cone-zone { fill: var(--brand, #0AACA5) !important; fill-opacity: .13 !important; }
html[data-style="mat"][data-theme="light"] .iku-cone-zone { fill-opacity: .11 !important; }
html[data-style="mat"] .iku-cone-bord { stroke-dasharray: none; stroke-opacity: .4; }
html[data-papier][data-style] .iku-cone-zone { fill-opacity: .10 !important; }

/*  2. VUE TRÉSORERIE : la ligne sous le graphe (même filet que la phrase de la banque, .ov4-bank). */
.fch { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--o12);
       font-size: 12px; line-height: 1.5; color: var(--mut1); font-variant-numeric: tabular-nums; }
.fch-bascule { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 7px; border-radius: 999px; border: 1px solid var(--o12);
               background: transparent; color: var(--mut1); font: inherit; font-size: 11px; font-weight: 700; line-height: 1.6; cursor: pointer; white-space: nowrap; }
.fch-bascule:hover { border-color: color-mix(in srgb, var(--brand) 50%, transparent); }
.fch-bascule.on { color: var(--sl3, var(--tx1)); border-color: color-mix(in srgb, var(--brand) 45%, transparent); background: color-mix(in srgb, var(--brand) 10%, transparent); }
html[data-theme="light"] .fch-bascule.on { color: var(--tx1); }
.fch-pastille { width: 14px; height: 9px; border-radius: 3px; flex: none; background: color-mix(in srgb, var(--brand) 24%, transparent);
                border: 1px dashed color-mix(in srgb, var(--brand) 65%, transparent); }
.fch-bascule:not(.on) .fch-pastille { background: transparent; border-color: var(--o12); }
html[data-style="mat"] .fch-pastille { border-style: solid; }
.fch-info { display: inline-flex; align-self: center; color: var(--mut1); cursor: help; }
.fch-info .iku-ico { width: 13px; height: 13px; }
.fch-t { min-width: 0; flex: 1 1 320px; color: var(--tx2); }
.fch-src { flex: 1 1 100%; font-size: 10.5px; color: var(--mut1); cursor: help; }
html[data-density="compact"] .fch { margin-top: 6px; padding-top: 6px; font-size: 11.5px; gap: 4px 8px; }
html[data-density="compact"] .fch-src { font-size: 10px; }
@media (max-width: 600px) {
    .fch { font-size: 11.5px; }
    .fch-t { flex-basis: 100%; }
}

/*  3. COCKPIT : la tuile du bandeau de lecture (.fintree-rt) et son détail. Le bandeau disparaît sur téléphone (analyses.css) : la
    tuile aussi ; la vue Trésorerie porte alors la fourchette. */
.fch-tuile-hote { position: relative; display: flex; }
.fch-tuile b { white-space: nowrap; }
.fch-tuile-off { border-style: dashed; }
.fch-tuile-off b { font-size: 12px; color: var(--mut1); }
.fch-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; width: min(440px, 92vw); padding: 12px 14px 10px; border-radius: 12px;
           border: 1px solid var(--o12); background: var(--surf-pop); box-shadow: 0 14px 36px rgba(0, 0, 0, .38); color: var(--tx2);
           font-size: 12px; line-height: 1.45; text-align: left; cursor: default; }
html[data-theme="light"] .fch-pop { box-shadow: 0 12px 30px rgba(15, 38, 56, .16); }
html[data-style="mat"] .fch-pop { background: var(--mt-carte) !important; border-color: var(--mt-trait) !important; box-shadow: var(--mt-ombre) !important; }
.fch-pop-t { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: 9.5px; font-weight: 800;
             letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
html[data-style="mat"][data-theme="light"] .fch-pop-t { color: var(--mt-marque-texte, var(--brand)); }
.fch-x { display: inline-flex; padding: 3px; border: 0; border-radius: 6px; background: transparent; color: var(--mut1); cursor: pointer; }
.fch-x:hover { color: var(--tx1); background: var(--o8); }
.fch-x .iku-ico { width: 14px; height: 14px; }
.fch-cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.fch-carte { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 6px 8px; border-radius: 9px; border: 1px solid var(--o8); background: var(--o4); }
html[data-style="mat"] .fch-carte { background: var(--mt-carte-2) !important; border-color: var(--mt-trait) !important; }
.fch-carte small { font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mut1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fch-carte b { font-size: 14px; font-weight: 800; color: var(--tx1); font-variant-numeric: tabular-nums; line-height: 1.2; }
.fch-carte span { font-size: 10.5px; color: var(--mut1); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fch-mini { display: block; width: 100%; height: 34px; margin-top: 4px; overflow: visible; }
.fch-mini-zone { fill: var(--brand); fill-opacity: .2; stroke: none; }
.fch-mini-trait { fill: none; stroke: var(--brand); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.fch-mini-zero { stroke: var(--st-red, #F09595); stroke-width: 1; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; }
html[data-style="mat"] .fch-mini-zone { fill-opacity: .14; }
.fch-pop .fch-t { display: block; margin: 9px 0 0; color: var(--tx2); }
.fch-pop .fch-src { display: block; margin: 5px 0 0; }
.fch-meth { margin: 5px 0 0; font-size: 10.5px; color: var(--mut1); }
.fch-masquer { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; padding: 3px 9px; border-radius: 8px; border: 1px solid var(--o8);
               background: transparent; color: var(--mut1); font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; }
.fch-masquer:hover { color: var(--tx1); border-color: color-mix(in srgb, var(--brand) 50%, transparent); }
.fch-masquer .iku-ico { width: 13px; height: 13px; }
html[data-density="compact"] .fch-pop { padding: 9px 11px 8px; }
html[data-density="compact"] .fch-carte { padding: 4px 7px; }
/*  Recette UX 2026-10-11 : « TRÉSORERIE FIN AOÛT 27 » sortait en « TRÉSORERIE FIN AOÛ… » dans une carte d'un tiers de 440 px : le
    libellé passe à la ligne au lieu d'être coupé, et l'écart en dessous aussi (« 1,58 M€ à 2,44 M€ »). Le zéro du petit graphe suit le
    rouge du thème. */
.fch-carte small { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }
.fch-carte span { white-space: normal; }