/* Finance › Tableau de bord (Kevin, 10 oct. 2026 — maquette « Tableau de bord financier »). L'en-tête et les cartes
   de chiffres sont ceux des états financiers (etats-fi.css : .fi-tete, .fi-kpis, .kcard du kit) ; ici, les blocs de
   graphique et leur grille. Préfixé `tb-`. */

/* une carte de chiffre mène à son état : c'est un bouton, au dessin de la carte */
.tb-kpis button.kcard{appearance:none;text-align:left;font:inherit;color:inherit;cursor:pointer;width:100%;transition:border-color .15s}
.tb-kpis button.kcard:hover{border-color:var(--border-strong)}
.tb-kpis button.kcard:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.tb-duo{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:12px;margin-bottom:12px}
.tb-duo.tb-egal{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
/* le bloc d'un graphique : le dessin de « la cascade » du Résultat (.fi-casc), sans sa règle sur les svg */
.tb-bloc{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:17px 20px 16px;min-width:0}
.tb-bloc h2{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin:0}
.tb-bloc-t{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:30px;margin-bottom:4px}
.tb-bloc .tb-aide{font-size:12px;line-height:1.5;color:var(--ink-3);margin:0 0 10px}
.tb-bloc .tb-aide b{color:var(--ink-2);font-weight:650}
.tb-bloc .seg button{padding:5px 10px;font-size:12px;cursor:pointer}
.tb-rien{font-size:12.5px;line-height:1.5;color:var(--ink-3);padding:26px 0;text-align:center}

/* un graphique, l'axe de ses mois, et ce qui dit la valeur d'un mois au survol */
.tb-graph{position:relative}
.tb-survol{position:absolute;inset:0;display:grid}
.tb-survol span[data-tip]{cursor:default}
.tb-axe{position:relative;height:16px;margin-top:2px;font-size:10.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.tb-axe span{position:absolute;top:0;white-space:nowrap;transform:translateX(-50%)}
.tb-axe span:first-child{transform:none}
.tb-axe span:last-child{transform:translateX(-100%)}

.tb-chiffres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.tb-chiffres div{font-size:11.5px;line-height:1.4;color:var(--ink-3)}
.tb-chiffres b{display:block;font-family:var(--font-display);font-size:16px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.tb-chiffres .tb-retard{color:var(--accent-strong);font-weight:600}
html[data-theme="dark"] .tb-chiffres .tb-retard{color:var(--coral-text)}
.tb-donut{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.tb-donut .legend{flex:1 1 200px;max-width:none}

@media(max-width:1000px){
  .tb-duo,.tb-duo.tb-egal{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:620px){
  .tb-chiffres{grid-template-columns:minmax(0,1fr);gap:8px}
  .tb-donut{justify-content:center}
  /* cinq cartes l'une sous l'autre repoussaient les courbes d'un écran entier : le chiffre d'affaires sur toute la
     largeur, les quatre autres deux par deux, sans leur icône */
  .fi-kpis.tb-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .fi-kpis.tb-kpis .kcard{padding:12px 14px}
  .fi-kpis.tb-kpis .kcard:first-child{grid-column:1 / -1}
  .fi-kpis.tb-kpis .kcard-ic{display:none}
  .fi-kpis.tb-kpis .kcard-top{margin-bottom:3px}
  .fi-kpis.tb-kpis .kcard-v{font-size:20px}
}