/* ============================================================================
   EasyCompta — LE RAIL D'ONGLETS D'UN TABLEAU DE BORD

   Feuille de MODULE et non d'écran : six écrans du tableau de bord trésorerie
   et sept du tableau de bord comptable portent ce rail
   (docs/modeles/design_handoff_easycompta, §7 « Tableaux de bord à onglets »).
   Une classe employée par deux écrans ou plus remonte — c'est la règle du
   dépôt, et treize copies d'une même règle en seraient la démonstration.

   L'ONGLET ACTIF SE RECONNAÎT À SON FILET, PAS À UN FOND : deux pixels de bleu
   sous le libellé, comme le reste de la charte. Aucune couleur en dur.
   ========================================================================== */

.appgrid .tbd-onglets { display: flex; padding: 0 4px; margin-bottom: 12px; background: var(--et-surface); border-bottom: 1px solid var(--et-hairline); flex-shrink: 0; flex-wrap: wrap; }
.appgrid .tbd-onglets > a { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-bottom: 2px solid transparent; font-size: 13px; font-weight: 600; color: var(--et-muted); text-decoration: none; }
.appgrid .tbd-onglets > a:hover { color: var(--et-form-blue); background: var(--et-surface-3); }
.appgrid .tbd-onglets > a.est-actif { color: var(--et-form-blue); border-bottom-color: var(--et-form-blue); }

/* ----------------------------------------------------------------------------
   LE RAIL D'ONGLETS INTERNE À UN ÉCRAN (.eca-onglets)

   Le rail ci-dessus navigue ENTRE des écrans : ses onglets sont des liens. Ce
   rail-ci bascule entre les VUES d'un même écran — comptes / chéquiers /
   signataires, remises / effets / impayés, ordres / campagnes / chèques,
   emprunts / lignes de crédit — et ses onglets sont donc des boutons.

   Il vit ici, avec l'autre, parce qu'il est le même dessin et qu'il sert
   quatre écrans : recopié dans quatre feuilles d'écran, il aurait divergé au
   premier réglage. La règle du dépôt est explicite — une classe employée par
   deux écrans ou plus remonte dans un gabarit, jamais l'inverse.
   -------------------------------------------------------------------------- */

.appgrid .eca-onglets { display: flex; padding: 0 4px; margin-bottom: 12px; background: var(--et-surface); border-bottom: 1px solid var(--et-hairline); flex-shrink: 0; flex-wrap: wrap; }
.appgrid .eca-onglets > button { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; background: transparent; border: 0; border-bottom: 2px solid transparent; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--et-muted); cursor: pointer; }
.appgrid .eca-onglets > button:hover { color: var(--et-form-blue); }
.appgrid .eca-onglets > button.est-actif { color: var(--et-form-blue); border-bottom-color: var(--et-form-blue); }

/* ----------------------------------------------------------------------------
   LA CARTE DE SECTION (.eca-carte)

   Une surface plate, un filet, une tête à barre bleue et un corps. C'est le
   contenant de tout ce qui n'est ni une liste (.tbl-*) ni une fenêtre (.xp-*) :
   le billetage et le théorique d'un arrêté, la position projetée et les files
   d'un tableau de bord. Deux écrans la portent, donc elle vit ici et non dans
   la feuille de l'un des deux.

   La tête n'a PAS de fond : elle se distingue par le filet fort du bas et la
   barre bleue de gauche, comme tous les titres de section de la charte.
   -------------------------------------------------------------------------- */

.appgrid .eca-carte { background: var(--et-surface); border: 1px solid var(--et-hairline); }
.appgrid .eca-tete { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-bottom: 2px solid var(--et-filet-fort); }
.appgrid .eca-tete::before { content: ""; flex: none; width: 3px; height: 13px; background: var(--et-form-blue); }
.appgrid .eca-tete > b, .appgrid .eca-tete > span:first-of-type { font-family: var(--et-font-mono); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--et-table-head-encre); }
.appgrid .eca-tete .fin { margin-left: auto; font-family: var(--et-font); font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--et-muted); }
.appgrid .eca-corps { padding: 11px 12px; }

@media (max-width: 1024px) {
  /* Sous 1024 px, un onglet reste une cible de 44 px (docs/cibles-tactiles.md). */
  .appgrid .tbd-onglets > a,
  .appgrid .eca-onglets > button { height: 44px; }
}