/* Qui vend à qui (src/flux-bailleurs.js) : la charte des écrans de l'application. Pas de classe « .cs » (déjà prise par les curseurs, src/curseurs.css) ; les rangées .cs-barre, .cs-cherche, .cs-n viennent de src/cessions-probables.css et src/volume-marche.css (.vm-*). */
.flx { max-width: 1100px; margin: 0 auto; padding: 20px 24px 56px; color: var(--texte); }
.flx h2 { margin: 0 0 4px; font-size: var(--t-15); font-weight: 600; color: var(--encre); }
.flx h3 { margin: 26px 0 6px; font-size: var(--t-13); font-weight: 600; color: var(--encre); }
.flx .vm-cles { margin-bottom: 4px; }
.flx-defile { overflow-x: auto; margin-top: 10px; }
.flx-mx { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-12); font-variant-numeric: tabular-nums; }
.flx-mx th, .flx-mx td { padding: 6px 8px; border-bottom: 1px solid var(--filet); text-align: center; white-space: nowrap; }
.flx-mx thead th { font-size: var(--t-11); font-weight: 500; color: var(--attenue); }
.flx-mx th.flx-tete, .flx-mx tbody th[scope="row"] { position: sticky; left: 0; z-index: 1; background: var(--panneau); text-align: left; font-weight: 500; color: var(--encre); }
.flx-mx tbody th[scope="row"] { box-shadow: 1px 0 0 var(--filet); }
.flx-case { min-width: 70px; line-height: 1.25; }
.flx-case small { display: block; font-size: var(--t-11); opacity: .75; color: inherit; }
.flx-fonce { color: var(--panneau); }
.flx-diag { background: var(--survol); }
.flx-sym { font-style: italic; }
.flx-tot { box-shadow: -1px 0 0 var(--filet-fort); font-weight: 600; }
.flx-somme th, .flx-somme td { border-top: 1px solid var(--filet-fort); font-weight: 600; }
.flx-grp th { text-align: left; background: var(--survol); font-size: var(--t-11); font-weight: 600; color: var(--attenue); text-transform: none; position: static; box-shadow: none; }
.flx .vm-tab table:not(.flx-mx) td { vertical-align: top; }
.flx-dir { white-space: normal; min-width: 220px; }
.flx-dir small { display: block; color: var(--attenue); font-size: var(--t-11); }
.flx-nat { font-style: normal; font-size: var(--t-11); padding: 2px 8px; border-radius: 999px; background: var(--survol); color: var(--encre); }
.flx-constats { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; margin-top: 10px; }
.flx-constat { padding: 12px 14px; border-radius: var(--r-moyen); box-shadow: inset 0 0 0 1px var(--filet); }
.flx-constat b { display: block; font-size: var(--t-13); color: var(--encre); }
.flx-constat p { margin: 6px 0 0; font-size: var(--t-13); line-height: 1.5; }
.flx-alerte { background: var(--survol); }
.flx-limites { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: var(--t-12); line-height: 1.5; color: var(--texte); }
@media (max-width: 700px) { .flx { padding: 14px 14px 48px; } .flx-constats { grid-template-columns: 1fr; } }