/* ===========================================================================
   ÉCRAN — TABLEAU DE BORD VENTES v2 (VNT-01), /app/ventes/tableau-bord (.tbv-*)

   Ce que la feuille ajoute au gabarit, et rien d'autre : les vignettes,
   cartes, tables, pastilles et barres sont celles de modele-erp.css
   (.mx-ind, .mx-carte, .mx-tbl, .mx-pastille, .mx-barre). Ici vivent les
   quatre objets propres à l'écran :
     · la jauge d'objectif, avec son repère « attendu à date » et sa
       projection en pointillé ;
     · la bande « du devis à l'encaissement » ;
     · le graphique mensuel (SVG) et la balance âgée empilée ;
     · les onglets horizontaux des cartes et la barre de sélection de la
       relance groupée.

   Aucune couleur écrite : tout passe par les jetons --et-*. Les marques du
   SVG prennent leur couleur par la PROPRIÉTÉ CSS fill: — l'attribut fill=
   n'accepte pas var() (CLAUDE.md, « Three things never take a token »).
   =========================================================================== */

.tbv-espace { margin-bottom: var(--et-tdb-ecart); }

/* ---------------------------------------------------------------- jauges */
.tbv-jauge {
    position: relative; height: 6px; margin: 8px 0 6px;
    background: var(--et-piste);
}
.tbv-jauge.est-grande { height: 12px; margin: 10px 0 8px; }
.tbv-jauge-val {
    position: absolute; left: 0; top: 0; bottom: 0;
    background: var(--et-form-blue);
}
.tbv-jauge-val.est-critique { background: var(--et-avertissement-mark); }
/* La projection prolonge la barre en pointillé : ce qui reste à faire au même rythme. */
.tbv-jauge-proj {
    position: absolute; top: 50%; height: 0;
    border-top: 2px dashed var(--et-form-blue);
}
/* Le repère « attendu à date » dépasse la barre de part et d'autre : il se lit
   comme un trait de niveau, pas comme un segment de plus. */
.tbv-jauge-repere {
    position: absolute; top: -3px; bottom: -3px; width: 2px;
    background: var(--et-ink);
}
.tbv-jauge.est-grande .tbv-jauge-repere { top: -4px; bottom: -4px; }

.tbv-obj-grille {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tbv-obj {
    padding: var(--et-tdb-bloc-py) var(--et-tdb-bloc-px); min-width: 0;
    border-right: 1px solid var(--et-hairline);
}
.tbv-obj:last-child { border-right: 0; }
.tbv-obj-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.tbv-obj-titre { font-size: 13px; font-weight: 600; color: var(--et-ink); }
.tbv-obj-cible { font-family: var(--et-font-mono); font-size: 12px; color: var(--et-faint); }
.tbv-obj-pct { margin-top: 6px; font-family: var(--et-font-mono); font-size: 20px; font-weight: 600; color: var(--et-ink); }
.tbv-obj-pct small { margin-left: 8px; font-family: var(--et-font); font-size: 13px; font-weight: 400; color: var(--et-muted); }
.tbv-obj-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; color: var(--et-faint); }
.tbv-obj-pied strong { font-family: var(--et-font-mono); color: var(--et-ink); }
/* Sous un indicateur en alerte, le pied est sur --et-danger-badge-bg : --et-faint y lit 4,31:1. */
.mx-ind.est-negatif .tbv-obj-pied { color: var(--et-muted-sur-alerte); }
.tbv-obj-vide { padding: 14px 16px; font-size: 13px; color: var(--et-muted); }

.tbv-legende { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--et-muted); }
.tbv-legende-trait { width: 2px; height: 12px; background: var(--et-ink); }
.tbv-legende-tiret { width: 14px; border-top: 2px dashed var(--et-form-blue); }
.tbv-legende-tiret.est-objectif { border-top-color: var(--et-ink); }
.tbv-legende-carre { width: 10px; height: 10px; background: var(--et-form-blue); }
.tbv-legende-carre.est-n1 { background: var(--et-inerte); }

/* ---------------------------------------------------------------- pipeline */
.tbv-pipeline {
    display: flex; align-items: stretch;
    background: var(--et-surface); border: 1px solid var(--et-hairline);
}
.tbv-etape {
    flex: 1 1 0; min-width: 0;
    display: flex; align-items: center; gap: 10px;
    padding: var(--et-tdb-bloc-py) var(--et-tdb-bloc-px);
    border-right: 1px solid var(--et-hairline);
    color: var(--et-ink); text-decoration: none;
}
.tbv-etape:last-child { border-right: 0; }
.tbv-etape:hover { background: var(--et-survol); color: var(--et-ink); text-decoration: none; }
.tbv-etape-corps { flex: 1 1 auto; min-width: 0; }
.tbv-etape-lbl {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; color: var(--et-muted);
}
.tbv-etape-val { margin: 3px 0 2px; font-family: var(--et-font-mono); font-size: 16px; font-weight: 600; }
.tbv-etape-sous { font-size: 12px; color: var(--et-faint); }
.tbv-etape > .bi { color: var(--et-inerte); }
.tbv-point { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--et-form-blue); }
.tbv-point.est-devis    { background: var(--et-cat-3); }
.tbv-point.est-commande { background: var(--et-cat-5); }
.tbv-point.est-encaisse { background: var(--et-succes); }
.tbv-point.est-encours  { background: var(--et-danger); }

/* ---------------------------------------------------------------- graphique */
.tbv-cols-graphe {
    display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--et-tdb-gouttiere); align-items: start;
}
.tbv-graphe { display: block; width: 100%; height: auto; padding: var(--et-graphe-p) 14px var(--et-legende-ecart); }
.tbv-graphe-grille { stroke: var(--et-rang); stroke-width: 1; }
.tbv-graphe-axe { fill: var(--et-faint); font-family: var(--et-font-mono); font-size: 11px; }
.tbv-graphe-mois { fill: var(--et-faint); font-family: var(--et-font); font-size: 12px; }
.tbv-graphe-mois.est-courant { fill: var(--et-form-blue-d); font-weight: 700; }
.tbv-graphe-fond { fill: var(--et-tint); }
.tbv-graphe-n  { fill: var(--et-form-blue); }
.tbv-graphe-n1 { fill: var(--et-inerte); }
.tbv-graphe-obj { stroke: var(--et-ink); stroke-width: 2; stroke-dasharray: 4 3; }
.tbv-graphe-unite { fill: var(--et-faint); font-family: var(--et-font); font-size: 11px; }

/* ---------------------------------------------------------------- balance âgée */
.tbv-ages { display: flex; gap: 2px; height: 14px; margin: var(--et-graphe-p) 14px var(--et-legende-ecart); }
.tbv-age { min-width: 3px; background: var(--et-inerte); }
.tbv-age.est-j30    { background: var(--et-avertissement); }
.tbv-age.est-j60    { background: var(--et-avertissement-mark); }
.tbv-age.est-j90    { background: var(--et-danger); }
.tbv-age.est-plus90 { background: var(--et-danger-ink); }
.tbv-puce-age { display: inline-block; width: 10px; height: 10px; margin-right: 8px; vertical-align: -1px; }
.tbv-methode { padding: 8px 14px 12px; font-size: 12px; color: var(--et-faint); }

/* ---------------------------------------------------------------- onglets de carte */
.tbv-onglets {
    display: flex; flex-wrap: wrap; gap: 2px; padding: 0 8px;
    background: var(--et-surface); border-bottom: 1px solid var(--et-hairline);
}
.tbv-onglet {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: var(--et-onglet-h); padding: 0 var(--et-onglet-px);
    border: 0; border-bottom: 3px solid transparent;
    background: transparent; color: var(--et-muted);
    font-size: var(--et-onglet-fs); cursor: pointer;
}
.tbv-onglet:hover { color: var(--et-ink); }
.tbv-onglet.est-actif { color: var(--et-form-blue-encre); font-weight: 700; border-bottom-color: var(--et-form-blue); }
.tbv-compte {
    min-width: 20px; padding: 1px 6px; border-radius: var(--et-r-pill);
    font-size: 12px; font-weight: 600; text-align: center;
    background: var(--et-rang); color: var(--et-ink);
}
.tbv-compte.est-negatif  { background: var(--et-danger-badge-bg); color: var(--et-danger-ink); }
.tbv-compte.est-critique { background: var(--et-avertissement-bg); color: var(--et-avertissement-ink); }

/* ---------------------------------------------------------------- relance groupée */
.tbv-selection {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    padding: 8px 14px; min-height: 48px;
    background: var(--et-tint); border-bottom: 1px solid var(--et-hairline);
    font-size: 13px;
}
.tbv-selection-n { font-weight: 600; color: var(--et-form-blue-d); }
.tbv-selection-mt { font-family: var(--et-font-mono); color: var(--et-ink); }
.tbv-selection .mx-btn { margin-left: auto; }
.tbv-col-case { width: 40px; }
.mx-tbl tbody tr.est-coche td { background: var(--et-tint); }
.tbv-apercu {
    padding: var(--et-tdb-bloc-py) var(--et-tdb-bloc-px); font-size: 13px; line-height: 1.55;
    background: var(--et-surface-3); border: 1px solid var(--et-filet-fort);
    max-height: 240px; overflow-y: auto;
}
.tbv-apercu p { margin: 0 0 var(--et-para-mb); }
.tbv-apercu p:last-child { margin-bottom: 0; }
.tbv-bloque { color: var(--et-avertissement-ink); font-weight: 600; }

/* ---------------------------------------------------------------- objectifs (saisie) */
.tbv-saisie-mois {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 16px;
}
.tbv-saisie-mois label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--et-muted); }
.tbv-saisie-total { margin-top: 12px; font-size: 13px; color: var(--et-muted); }
.tbv-saisie-total strong { font-family: var(--et-font-mono); color: var(--et-ink); }

/* ---------------------------------------------------------------- paliers
   Échelle retenue (docs/conventions-responsive.md) : 1024 pour passer les
   rangées à une colonne, 640 pour les grilles internes. */
@media (max-width: 1024px) {
    .tbv-cols-graphe { grid-template-columns: minmax(0, 1fr); }
    .tbv-pipeline { flex-direction: column; }
    .tbv-etape { border-right: 0; border-bottom: 1px solid var(--et-hairline); min-height: 44px; }
    .tbv-etape:last-child { border-bottom: 0; }
    .tbv-onglet { min-height: 44px; }
}
@media (max-width: 640px) {
    /* Les légendes posées dans un en-tête de carte y passent à la ligne plutôt que
       d'écraser le titre — portée par :has(), pour ne toucher que les cartes de l'écran. */
    .mx-carte-tete:has(.tbv-legende) { flex-wrap: wrap; }
    .tbv-obj-grille { grid-template-columns: minmax(0, 1fr); }
    .tbv-obj { border-right: 0; border-bottom: 1px solid var(--et-hairline); }
    .tbv-obj:last-child { border-bottom: 0; }
    .tbv-saisie-mois { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- listes de vignette
   LES DEUX LISTES CÔTE À CÔTE (« À traiter », « Clients ») tiennent dans 480 px de
   carte à 1280 px, rail ouvert : la colonne « Niveau suggéré » sortait de 26 px et le
   bouton « Planifier un appel » de 10. Mesurée sur la carte et non sur la fenêtre, la
   règle suit le rail : sous 560 px de cadre, le bouton garde son icône (le libellé reste
   dans title et aria-label) et les en-têtes passent à la ligne. */
.tbv-espace .vnt-defile-court { container: tbv-liste / inline-size; }
@container tbv-liste (max-width: 559px) {
    .tbv-lib-appel { display: none; }
    .mx-tbl thead th { white-space: normal; }
}