/* ============================================================================
   ÉCRAN — TABLEAU DÉCISIONNEL (EasyBI, /app/tableau-bi)

   SA FEUILLE ET RIEN QUE LA SIENNE, et elle n'existe que pour une chose que le
   gabarit ne porte pas : l'HISTOGRAMME À TROIS SÉRIES, mois par mois — normales,
   nuit, heures supplémentaires. Le reste de l'écran est déjà au gabarit (cartes,
   tables .mx-tbl, bandeaux .mx-blocage) et n'a besoin d'aucune règle ici.

   POURQUOI ELLE ARRIVE LE 2026-09-08. Les trois barres et les trois marques de
   la légende écrivaient leur couleur DANS LA PAGE, dans un attribut style. La
   charte l'interdit — « jamais de couleur codée en dur dans une page » vaut
   aussi pour un var(--et-*) recopié dans un style en ligne (docs/couleurs-en-dur.md).

   ET ELLES N'ÉTAIENT PAS LES BONNES. Les trois séries prenaient --et-form-blue,
   --et-blue et --et-amber : deux bleus voisins, que rien ne distingue sur une
   barre de 14 px, et un ambre qui est une couleur d'ÉTAT. Or ces trois séries
   sont des IDENTITÉS — « nuit » n'est pas un avertissement, c'est une nature
   d'heures. Elles prennent donc les trois premiers emplacements de la palette
   catégorielle, validée sur les couples adjacents (voir PaletteCategorielle et
   --et-cat-* dans easytech-theme.css).

   AUCUNE HAUTEUR ICI : la hauteur d'une barre est une DONNÉE, elle reste dans le
   balisage, en pourcentage calculé par l'écran.
   ============================================================================ */

/* L'axe : les barres poussent depuis le bas, et la bande défile latéralement
   quand la période porte plus de mois que la largeur n'en montre. */
.tbi-histo {
    display: flex; align-items: flex-end; gap: 12px;
    height: 220px; overflow-x: auto;
    border-bottom: 1px solid var(--et-hairline); padding-bottom: 8px;
}

/* Une colonne = un mois. Largeur minimale pour que le libellé du mois tienne
   sans être coupé. */
.tbi-mois { min-width: 64px; text-align: center; }
.tbi-mois-barres { display: flex; align-items: flex-end; justify-content: center; gap: 4px; height: 180px; }
.tbi-mois-lbl { margin-top: 4px; font-size: 12px; color: var(--et-muted); }

/* Les trois barres. La largeur est fixe, la hauteur vient du balisage. */
.tbi-barre { width: 14px; background: var(--et-inerte); }
.tbi-barre.est-cat-1 { background: var(--et-cat-1); }
.tbi-barre.est-cat-2 { background: var(--et-cat-2); }
.tbi-barre.est-cat-3 { background: var(--et-cat-3); }