/* ===========================================================================
   ÉCRAN — BARÈMES ET TARIFS (.trf-*)   VNT-04 / FRN-04

   FEUILLE D'ÉCRAN, pour un composant que DEUX modules montent (Vente et Achat)
   — mais c'est bien UN écran : le même composant, le même balisage, un seul
   paramètre de sens. La règle du dépôt vise les écrans, pas les routes.

   CE QU'ELLE PORTE, ET RIEN D'AUTRE
     La disposition à deux colonnes du simulateur, la liste de suggestions
     d'article, et les trois alignements que la table ne devine pas. Le cadre de
     page, les cartes, les boutons, les tables, les pastilles, les indicateurs
     et les fenêtres viennent de modele-erp.css et ne sont pas redéfinis ici.

   AUCUNE COULEUR LITTÉRALE : jetons --et-* uniquement.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. ALIGNEMENTS

   `.mx-tbl th` force text-align:left (0,1,1). Une classe nue (0,1,0) ne le
   battrait pas : d'où la portée par `.mx-tbl`, qui monte à 0,2,0.
   --------------------------------------------------------------------------- */
.trf-droite { text-align: right; }
.trf-centre { text-align: center; }
.mx-tbl .trf-droite { text-align: right; }
.mx-tbl .trf-centre { text-align: center; }

/* Trois boutons de fin de rangée ne se coupent pas au milieu d'un mot. */
.trf-nowrap { white-space: nowrap; }

.trf-col-actions { width: 92px; }
.trf-col-rang { width: 56px; }

/* ---------------------------------------------------------------------------
   2. LA NOTE D'ANOMALIE — la rangée qui suit un barème sans porteur

   Elle appartient à la rangée du dessus : elle n'a donc ni son filet haut ni
   son rembourrage complet, sinon les deux se lisent comme deux faits distincts.
   --------------------------------------------------------------------------- */
.mx-tbl tbody tr.est-alerte td.trf-note {
    padding-top: 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--et-avertissement-ink);
}

/* ---------------------------------------------------------------------------
   3. LE NOMBRE DE LIGNES EST UN LIEN

   Il ouvre l'onglet des lignes filtré sur ce barème — c'est le geste le plus
   fréquent de l'écran. Il portait `.btn btn-link`, qui apporte le bleu et le
   soulignement de Bootstrap ; ici c'est un `.mx-btn` ramené à la chasse d'un
   nombre, pour qu'une colonne de comptes reste une colonne de comptes.
   --------------------------------------------------------------------------- */
.trf-lien-nombre {
    height: 22px; padding: 0 6px;
    font-family: var(--et-font-mono); font-size: 13px;
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   4. FILTRES DU BANDEAU DE CARTE
   --------------------------------------------------------------------------- */
.trf-filtres { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.trf-filtre { width: auto; min-width: 15rem; }

/* ---------------------------------------------------------------------------
   5. LE SIMULATEUR — saisie à gauche, verdict à droite

   Remplace `row g-3 / col-lg-4 / col-lg-8`, qui écrivait des douzièmes dans le
   balisage. La colonne de saisie est FIXE : elle porte la grille dense, dont la
   colonne de libellés fait déjà 158 px, et la laisser s'étirer aurait donné un
   champ de 600 px pour saisir une quantité.
   --------------------------------------------------------------------------- */
.trf-simulateur {
    display: grid;
    grid-template-columns: 420px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}
.trf-resultat { min-width: 0; }
.trf-espace { margin-bottom: 12px; }
.trf-large { width: 100%; }

/* L'attente n'est pas un vide : elle dit ce qu'on obtiendra. */
.trf-attente { padding: 40px 20px; }
.trf-attente-ico { display: block; font-size: 30px; margin-bottom: 10px; color: var(--et-inerte); }

/* ---------------------------------------------------------------------------
   6. SUGGESTIONS D'ARTICLE

   Remplace le `.list-group` de Bootstrap (rayon, ombre, bleu de survol).
   Plafonnée et défilante : une recherche à deux lettres ramène un catalogue, et
   une liste sans plafond pousserait le bouton de simulation hors de l'écran.
   --------------------------------------------------------------------------- */
.trf-suggestions {
    margin-top: 4px;
    max-height: 180px; overflow-y: auto;
    border: 1px solid var(--et-hairline);
    background: var(--et-surface);
}
.trf-suggestion {
    display: flex; align-items: baseline; gap: 8px;
    width: 100%; padding: 5px 10px;
    border: 0; border-bottom: 1px solid var(--et-hairline);
    background: var(--et-surface); color: var(--et-ink);
    font-family: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.trf-suggestion:last-child { border-bottom: 0; }
.trf-suggestion:hover { background: var(--et-rang); }
.trf-suggestion:focus-visible { outline: 2px solid var(--et-form-blue); outline-offset: -2px; }

/* ---------------------------------------------------------------------------
   7. L'ÉCART AU PRIX DE BASE — deux sens, pas deux verdicts

   Une remise n'est pas une bonne nouvelle et une majoration n'est pas une
   faute : ce sont les deux sens d'un même écart, et le signe le dit déjà. Ces
   deux teintes ne sont donc PAS --et-succes et --et-danger pleins, qui auraient
   fait lire un feu tricolore ; ce sont leurs encres de rang, seules à tenir AA
   sur les trois fonds de rangée (blanc, survol, sélection).
   --------------------------------------------------------------------------- */
.trf-baisse { color: var(--et-succes-ink); }
.trf-hausse { color: var(--et-danger-ink); }

/* ---------------------------------------------------------------------------
   8. LA CANDIDATE RETENUE

   Aplat pâle plus liseré à gauche, exactement la forme de `.mx-tbl tr.est-alerte`
   — pour que « retenue » et « en anomalie » se lisent comme deux valeurs d'une
   même convention, et non comme deux inventions. Le liseré survit au thème
   sombre, où l'aplat vert pâle descend à quelques pour cent du fond.
   --------------------------------------------------------------------------- */
.mx-tbl tbody tr.trf-rang-retenu td { background: var(--et-succes-bg); }
.mx-tbl tbody tr.trf-rang-retenu td:first-child { box-shadow: inset 3px 0 0 var(--et-succes); }

/* ---------------------------------------------------------------------------
   9. PALIERS — géométrie seule (docs/conventions-responsive.md)

   Règle tactile (docs/cibles-tactiles.md) : sous 1024 px, aucune cible ne
   descend sous 44 px, et une cible ne rétrécit jamais.
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    /* La colonne de saisie et le verdict s'empilent : à cette largeur, 420 px de
       formulaire ne laissent pas de quoi lire une table de six colonnes. */
    .trf-simulateur { grid-template-columns: minmax(0, 1fr); }
    .trf-filtre { min-height: 44px; }
    .trf-suggestion { min-height: 44px; }
    .mx-tbl .trf-col-actions .mx-btn { min-width: 44px; min-height: 44px; }
    /* Le nombre-lien est une cible : il monte avec les autres. */
    .trf-lien-nombre { min-width: 44px; min-height: 44px; }
}

@media (max-width: 720px) {
    .trf-filtres { margin-left: 0; width: 100%; }
    .trf-filtre { min-width: 0; width: 100%; }
}