/*  ecran-balance-tiers.css — ETA-08.

    Préfixe `.bta-`, vérifié libre avant d'être posé — et `.ba-` écarté pour cela :
    il est celui de la balance ÂGÉE (ecran-balance-agee.css), et deux blocs homonymes
    ne cassent pas la construction, ILS FUSIONNENT, propriété par propriété,
    later-wins, sans que rien ne le signale (docs/conventions-nommage.md, « La même
    règle, côté CSS et jetons »). Deux balances voisines dessinées chacune à moitié
    faux, et aucun garde pour le voir : c'est exactement le cas que la règle décrit.
    La balance générale avait dû écarter `.bg-` pour la même raison.

    Les règles communes aux états du lot — grille de filtres avancés, bandeau de
    périmètre, mention — vivent dans ecran-grand-livre.css, chargée avant : elles
    servent maintenant QUATRE écrans, et la règle du §6.3 fait remonter ce qui sert
    deux écrans ou plus plutôt que de le recopier. Ce fichier ne garde que ce qui
    est propre à la balance des tiers. Aucune couleur littérale. */

/* 1 · Les trois groupes de colonnes, comme à la balance générale : ouverture,
      mouvements, clôture ne se lisent qu'ensemble, et le filet vertical les sépare —
      sans lui, six colonnes de chiffres se confondent. */
.bta-table th.bta-groupe {
    border-left: 1px solid var(--et-hairline);
    font-weight: 600;
}

.bta-table tbody td:nth-child(3),
.bta-table tbody td:nth-child(5),
.bta-table tbody td:nth-child(7),
.bta-table tfoot td:nth-child(3),
.bta-table tfoot td:nth-child(5),
.bta-table tfoot td:nth-child(7) {
    border-left: 1px solid var(--et-hairline);
}

.bta-table tbody tr:hover { background: var(--et-survol); }

/* 1 bis · LE VOLET A REMPLACÉ LA GRILLE DE FILTRES (2026-09-12).

      `.bta-filtres`, `.bta-filtres.est-avance` et `.bta-bascules` sont partis avec elle :
      les filtres sont descendus dans le volet latéral partagé (FiltreLateral), dont les
      champs, les cases et le bouton de remise à zéro sont habillés par `.flt-*` dans
      easytime-shell.css — plancher tactile de 44 px compris. Les redessiner ici les
      ferait diverger du volet des cinq états voisins au premier filet retouché.

      Ce qui reste de l'ancienne carte : `.bta-actions`, devenue la BARRE DE L'ÉTAT —
      nature, compensation, colonnes. Elle garde sa forme, qui était mesurée.

      Depuis le 2026-09-23 (second passage), ce qui BORNE LA REQUÊTE — période, journal,
      recherche, cases — est dans la barre de critères commune aux états (`.glt-criteres`,
      ecran-grand-livre.css), et les critères posés s'écrivent dans sa rangée
      (`.glt-actifs`). Le volet ne garde que les facettes et le seuil. */

.bta-colonne { min-width: 0; }

/* Les cases de la barre de critères sont parties au volet le 2026-10-14, pour que la
   barre — compacte, comme au grand livre et à la balance générale — tienne sur une ligne. */

/* La pastille d'un critère du volet est un bouton : il rouvre le volet. */
.appgrid .bta-pastille-volet { font: inherit; cursor: pointer; }

.bta-actions {
    display: flex;
    align-items: center;
    gap: var(--et-outils-gap);
    flex-wrap: wrap;
    padding: var(--et-outils-py) 16px;
}

/* 1 ter · LA BARRE DE L'ÉTAT V2 (2026-09-23). Les segments — nature, période, colonnes —
      sont le contrôle partagé `.tbl-groupe` du gabarit de liste : même grammaire que les
      autres listes, actif en ardoise pleine. Ce qui suit est propre à l'écran. */

/* « Compenser les mixtes » : un bouton à bascule, actif sur la teinte d'information comme
   le bouton de repli du volet — pas en ardoise, qui dit « choix parmi plusieurs ». */
.bta-compenser.est-actif {
    border-color: var(--et-form-blue);
    background: var(--et-tint);
    color: var(--et-form-blue-d);
}

.bta-compte-pastille {
    margin-left: 4px;
    padding: 0 6px;
    font-family: var(--et-font-mono);
    font-size: 12px;
    background: var(--et-tint);
    color: var(--et-form-blue-d);
    border: 1px solid var(--et-form-blue);
}

/* La concordance du compte, dans l'en-tête de sa carte : trois chiffres en ligne, l'écart
   en dernier, avant la pastille qui conclut. */
.bta-concordance {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 16px;
    margin-right: 12px;
    font-size: 12px;
    color: var(--et-muted);
}

.bta-concordance .bta-solde,
.bta-concordance b {
    margin-left: 4px;
    font-size: var(--et-fs-cell);
    font-weight: 600;
    color: var(--et-ink);
}

.bta-lien-ecart { text-decoration: none; }

/* UN SOLDE SUR UNE COLONNE : le signe devant, le sens après, en retrait. Chiffres
   tabulaires, pour que les signes s'alignent dans la colonne. */
.bta-solde {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.bta-sens {
    margin-left: 4px;
    font-weight: 600;
    color: var(--et-muted);
}

/* Les en-têtes qui trient : un bouton plat, le texte de l'en-tête et sa flèche. */
.bta-tri {
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.bta-tri:hover { text-decoration: underline; }

/* Les marques d'une raison sociale : solde à contresens, tiers des deux côtés. Des
   pastilles, seules formes arrondies de la charte. L'ambre prend son rang de marque
   pour le filet et son rang d'encre pour le texte — jamais l'état écrit en color. */
.bta-marque {
    display: inline-block;
    margin-left: 6px;
    padding: 0 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.bta-marque.est-inverse {
    background: var(--et-avertissement-bg);
    color: var(--et-avertissement-ink);
    border: 1px solid var(--et-avertissement-mark);
}

.bta-marque.est-mixte {
    background: var(--et-tint);
    color: var(--et-form-blue-d);
    border: 1px solid var(--et-form-blue);
}

/* La vue « Soldes » a quatre colonnes de moins : elle ne réclame pas la largeur de la
   balance complète, et les filets de groupe de celle-ci n'y ont pas de sens. */
.bta-table-soldes tbody td,
.bta-table-soldes tfoot td { border-left: 0 !important; }
/*  136 px et non 150 : le plus long solde d'une PME (« +92 520 000 D », en gras) tient dans
    120 ; à 150, la table dépassait encore de 1 à 2 px à 1280 volet ouvert (banc, 2026-09-23). */
.bta-table-soldes .bta-col-solde { min-width: 136px; }
/*  SES EN-TÊTES PASSENT À LA LIGNE (2026-09-23). Mesuré au banc à 1280 px, volet ouvert : la
    table ne descendait pas sous 692 px pour un cadre de 678 — « DÉBIT PÉRIODE » et « Solde de
    clôture » refusaient de se couper, et les 15 px de trop rognaient la lettre de sens du solde
    derrière une barre de défilement. Un en-tête peut prendre deux lignes ; un montant, non. */
.bta-table-soldes thead th,
.bta-table-soldes .bta-tri { white-space: normal; }

/* La carte des tiers mixtes et l'écriture de compensation proposée. */
.bta-note-cellule {
    font-size: 12px;
    color: var(--et-faint);
}
/* « à passer à la main » PASSE À LA LIGNE (2026-09-23) : en `nowrap`, c'était la cellule la
   plus large de la table des tiers mixtes, et elle la poussait hors de son cadre à 1600 px.
   Une note se replie ; un montant, non. */
.bta-table-mixtes .bta-note-cellule { display: inline-block; min-width: 9ch; line-height: 1.3; }

.bta-od-rang > td { background: var(--et-surface-2); }

.bta-od {
    border: 1px solid var(--et-form-blue);
    background: var(--et-surface);
}

.bta-od-tete,
.bta-od-pied {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 8px 12px;
    font-size: 12px;
    color: var(--et-muted);
}

.bta-od-tete { border-bottom: 1px solid var(--et-hairline); }
.bta-od-tete strong { font-size: var(--et-fs-cell); color: var(--et-ink); }

/* 2 · Le numéro de compte dans le titre de carte. Il se lit en premier et en mono :
      c'est par lui qu'on retrouve la ligne correspondante de la balance générale. */
.bta-compte-code {
    font-family: var(--et-font-mono);
    font-weight: 700;
}

/* La mention « dormant » : un tiers sans mouvement sur la période, présent pour son seul
   solde d'ouverture. C'est de la glose — rang --et-faint, jamais une couleur d'état. */
.bta-dormant {
    margin-left: 6px;
    font-size: 11px;
    color: var(--et-faint);
}

.bta-dormant::before { content: "· "; }

/* Le cadre de défilement du tableau : c'est LUI qui défile, pas la page. Sans ancêtre à
   overflow, une table de neuf colonnes pousserait la page entière. */
.bta-defile {
    overflow-x: auto;
    /* BLOC CONTENANT, et c'est la mesure qui l'a dit : un intitulé réservé aux lecteurs
       d'écran (.visually-hidden, en position absolue) échappe à un overflow qui n'est pas
       positionné, et élargissait la PAGE de 226 px à 1280 — 576 à 390. */
    position: relative;
}

/* La suite d'un collectif coupé, sous sa table. Même forme qu'au grand livre
   (.gl-suite) : aplat de rang, filet du haut, la commande centrée et sa glose de
   méthode dessous. */
.bta-suite {
    padding: 10px 14px;
    text-align: center;
    background: var(--et-surface-2);
    border-top: 1px solid var(--et-hairline);
}

.bta-note {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--et-faint);
}

/* Le bloc de concordance, même dessin qu'à la balance âgée : les deux écrans répondent à
   la même question et ne doivent pas la poser de deux façons. */
.bta-bloc-concordance { font-size: var(--et-fs-cell); }

/* Le périmètre en pied d'état. Un état sans son périmètre ne se relit pas imprimé. */
.bta-perimetre {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--et-faint);
}

/* 3 · Les rangs de rupture du pied. Ce qui n'a pas d'axe tiers est du contexte, pas un
      auxiliaire : il se lit sans se compter parmi les tiers — même traitement que la
      ligne de report du grand livre. Le solde du collectif, lui, est la conclusion :
      c'est le chiffre qu'on compare à la balance générale, et il est en gras. */
.bta-total td {
    border-top: 1px solid var(--et-form-border);
    font-weight: 700;
}

.bta-sans-tiers td {
    background: var(--et-surface-2);
    color: var(--et-muted);
    font-size: 12px;
}

.bta-collectif td {
    background: var(--et-surface-2);
    font-weight: 700;
}
/*  LES COLONNES QUI CÈDENT SOUS 1024 px SONT RETIRÉES CELLULE PAR CELLULE (2026-09-23).
    Elles cédaient par `visibility: collapse` sur le <col> (lot03), et deux défauts du moteur
    en sortaient, mesurés au banc :
      · la largeur retirée n'était pas rendue — à 768 px la table s'arrêtait à 270 px du bord
        de sa carte, à 1280 px à 75 px (la colonne « Lignes ») ;
      · la hauteur d'une rangée de pied qui FUSIONNAIT des colonnes retirées était calculée
        avant le retrait — « Lignes sans tiers » passait sur trois lignes dans une rangée d'une
        ligne, et chevauchait le total à 390 px.
    lot03 employait `collapse` parce que ces rangées de pied fusionnaient deux à six colonnes :
    un `display: none` par rang y aurait visé une autre colonne que dans le corps. Les rangées
    ne fusionnent donc plus que le code et la raison sociale — jamais retirés —, et chaque
    colonne qui cède porte `.bta-cede` sur son <col>, son en-tête et ses cellules, pied compris.
    Le libellé d'écart reste court sous le palier : il n'a plus que deux colonnes pour lui. */
@media (max-width: 1024px) {
    .bta-table .bta-cede { display: none; }
}
/*  « LIGNES » SUIT LA CARTE, PAS LA FENÊTRE. À 1280 px volet ouvert, la carte n'a que 694 px
    et la vue « Soldes » défilait de 64 px pour un simple décompte ; volet replié, elle en a
    960 et le décompte y tient. La fenêtre ne dit pas lequel des deux : le cadre de défilement
    devient conteneur, et la colonne cède quand il descend sous 720 px. */
.bta-defile { container: bta-cadre / inline-size; }
@container bta-cadre (max-width: 720px) {
    .bta-table-soldes .bta-nb { display: none; }
}
.bta-lib-court { display: none; }
@media (max-width: 1024px) {
    .bta-sans-tiers .bta-lib-long,
    .bta-collectif .bta-lib-long { display: none; }
    .bta-sans-tiers .bta-lib-court,
    .bta-collectif .bta-lib-court { display: inline; }
    .bta-sans-tiers td:first-child,
    .bta-collectif td:first-child { white-space: nowrap; }
}

/* Une ligne de tiers ouvre son détail au grand livre : elle se comporte comme un lien,
   au clic comme au clavier (tabulation puis Entrée). */
.bta-ligne { cursor: pointer; }
.bta-ligne:focus-visible { outline: 2px solid var(--et-form-blue); outline-offset: -2px; }

/* 4 · Paliers. Le tableau défile dans son cadre plutôt que de pousser la page — règle de
      docs/tables-larges.md, échelle de docs/conventions-responsive.md. Sa largeur minimale
      baisse à 1024 px : les deux colonnes d'ouverture cèdent là (voir le colgroup de
      l'écran), et lui laisser 900 px rendrait ce gain au défilement.

      LA RÈGLE TACTILE EST TENUE ICI, PAR L'ÉCRAN. Mesuré au banc avant reprise :
      quatorze cibles sous 44 px à 390 px, dix à 768 — les champs de filtre à 34 px de
      haut, les boutons à 31. docs/cibles-tactiles.md vaut pour tout ce qui est
      interactif sous 1024 px ; lot02-cibles-tactiles.css ne couvre que la coquille et le
      gabarit de liste .tbl-*. Un écran qui pose ses propres champs tient donc la règle
      lui-même. Et une cible ne rétrécit jamais : c'est un plancher, pas une hauteur. */
@media (max-width: 1024px) {
    /* Les deux colonnes d'ouverture cèdent ici : leur largeur sort du compte. */
    /* « .bta-defile > » et non « .bta-table » seul : la règle de base (section 5) est
       écrite APRÈS ce palier, à la même spécificité — elle l'emportait, et le tableau
       gardait ses 940 px sous 1024. Mesuré au banc le 2026-09-23. */
    .bta-defile > .bta-table { min-width: 700px; }

    /* La barre de critères tient son plancher dans ecran-grand-livre.css, le volet dans
       easytime-shell.css : ce qui reste d'interactif ici est la barre de l'état. */
    .bta-actions .btn { min-height: 44px; min-width: 44px; }
    .bta-actions .tbl-groupe > button,
    .bta-tri,
    .appgrid .bta-pastille-volet { min-height: 44px; }
    .bta-tri { min-width: 44px; }
    /*  LA LIGNE DE TIERS EST UNE CIBLE (2026-09-23) : elle ouvre le grand livre au clic et au
        clavier, c'est la seule porte vers le détail d'un tiers. Mesurée au banc : 25 px à 768,
        37 à 390. docs/cibles-tactiles.md tranche le cas — les rangées cliquables du gabarit
        font 53 px. Une hauteur de cellule, dans une table, est un plancher : le contenu sur
        deux lignes garde sa place. Et le lien d'écart de l'en-tête de carte, 24 px, suit. */
    .bta-ligne > td { height: 44px; }
    .bta-lien-ecart { display: inline-flex; align-items: center; min-height: 44px; }
}

@media (max-width: 640px) {
    .bta-actions .btn { flex: 1 1 auto; }
    .bta-actions .ms-auto { margin-left: 0 !important; }

    /* L'EN-TÊTE DE CARTE SE REPLIE PLUTÔT QUE DE S'ÉTRANGLER. Mesuré : à 390 px la
       pastille de concordance gardait sa largeur et le titre tombait dans une colonne
       de quelques chasses — « 401000 Fournisseurs » sur trois lignes, sa glose sur six.
       La pastille passe dessous, et le titre reprend la largeur de la carte. */
    .bta-carte .md-head { flex-wrap: wrap; }
    .bta-carte .md-head > .flex-grow-1 { flex: 1 1 100%; }
    .bta-carte .md-head .badge { margin-left: 45px; }

    /* Les groupes de la barre prennent la ligne entière et partagent sa largeur : la
       période (quatre boutons, partie depuis dans la barre de critères) ne tenait pas à
       390 px ; la nature et les colonnes gardent la règle. */
    .bta-actions .tbl-groupe { flex: 1 1 100%; margin-right: 0; }
    .bta-actions .tbl-groupe > button { flex: 1 1 auto; padding: 0 6px; }
    /*  LA NATURE PASSE SUR DEUX COLONNES (2026-10-23). Relevé au banc dès que la balance a eu
        ses chiffres : les créances et les dettes de la période, en pastille sur « Clients » et
        « Fournisseurs », débordaient sur le bouton voisin à 390 px, et « Tous » tombait à 34 px
        de large. Une grille de deux colonnes garde un seul objet — le sélecteur reste soudé —
        et donne à chaque position la place de son libellé et de son montant. */
    .bta-actions .tbl-groupe.bta-natures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bta-actions .tbl-groupe.bta-natures > button { min-width: 44px; flex-wrap: wrap; gap: 2px 6px; padding: 4px 6px; border-bottom: 1px solid var(--et-form-border); }
    .bta-concordance { margin-left: 45px; }

    /* Le solde doit tenir dans l'écran sans défiler : c'est lui qu'on vient lire. Le code
       et la colonne de solde rendent leur réserve, la raison sociale se replie. */
    .bta-table-soldes .bta-col-code { width: 64px; }
    .bta-table-soldes .bta-col-solde { min-width: 0; }
    .bta-table-soldes .bta-tri { white-space: normal; text-align: inherit; }
    .bta-table-soldes .bta-marque { white-space: normal; margin-left: 0; }
}

/* 5 · Les largeurs de colonnes. Elles vivent ici et non dans le Razor : une largeur
      écrite dans une page est ce que docs/conventions-responsive.md interdit, et c'est
      ici qu'un palier peut les relâcher. Les six colonnes de montants partagent une
      largeur — ce sont les mêmes grandeurs, elles se comparent verticalement.

      LES LARGEURS DE CHAMP ONT DISPARU, et c'est le gain de la grille : un champ qui
      prend la colonne qu'on lui donne n'a pas besoin qu'on lui dise laquelle. Cinq
      max-width en moins, et un repli qui se décide en un endroit. */
.bta-table { min-width: 940px; }

/* La vue « Soldes » et la table des tiers mixtes n'ont pas les six colonnes de montants :
   leur imposer la largeur de la balance complète poussait le solde — ce qu'on vient lire —
   hors de l'écran d'un téléphone. Deux classes, pour passer devant la règle ci-dessus et
   devant le palier à 1024. */
.bta-defile > .bta-table.bta-table-soldes,
.bta-defile > .bta-table.bta-table-mixtes { min-width: 0; }

.bta-col-code { width: 90px; }
.bta-col-montant { width: 108px; }
.bta-col-nb { width: 62px; }