/* ecran-kilometre.css — classes propres à la saisie au kilomètre (SAI-07).
   Portée de la passation « Saisie au kilomètre » (docs/modeles/design_handoff_saisie_kilometre).
   À charger après modele-erp.css. Ce qui n'est PAS ici : .tbl-* et .btn — ils viennent du
   dépôt et ne se redéfinissent pas par écran.

   QUATRE ÉCARTS AVEC LA FEUILLE LIVRÉE, tous imposés par la charte du dépôt
   (docs/couleurs-en-dur.md) :

     1. LE BLOC .et-bandeau A ÉTÉ RETIRÉ. Il vit dans easytech-theme.css, et les 45 écrans
        d'EasyAccounting le prennent par EcranCompta (EnTeteBandeau="true"). Le laisser ici
        aurait redéfini le bandeau de TOUS les écrans depuis une feuille d'écran, puisque
        celle-ci est liée globalement dans App.razor.
     2. UNE COULEUR D'ÉTAT NE S'ÉCRIT JAMAIS EN color:. --et-succes rend 3,30:1 sur blanc,
        --et-avertissement 2,02:1 sur son propre fond pâle : les neuf sites qui les posaient
        en encre prennent le rang -ink. En FOND, en LISERÉ et en PASTILLE elles restent —
        sauf l'ambre, qui prend --et-avertissement-mark au seuil graphique de 3:1.
     3. AUCUN #fff NI rgba() LITTÉRAL. L'encre sur l'ardoise est --et-sur-ardoise-plein,
        celle sur l'aplat d'engagement --et-sur-aplat, le voile de la fenêtre --et-voile,
        les trois ombres --et-ombre-flottant (une ombre est géométrie ET couleur, un seul
        jeton).
     4. LES LARGEURS SORTENT DES PAGES. La passation posait flex:0 0 210px et
        min-width:1180px en style inline ; docs/conventions-responsive.md l'interdit. Elles
        sont ici, en classes, avec la colonne d'ancrage que le lot 03 demande à toute table
        de plus de 960 px.
*/

/* ---- Bandeau d'alerte -------------------------------------------------- */

.kl-bandeau {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  flex-shrink: 0;
  padding: 9px var(--et-bandeau-pad-h);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}

.kl-bandeau > .bi { flex-shrink: 0; }
.kl-bandeau.est-grave { background: var(--et-danger-badge-bg); color: var(--et-danger-ink); }
.kl-bandeau.est-signal { background: var(--et-avertissement-bg); color: var(--et-avertissement-ink); }
/* Le bordereau retrouvé (brouillon côté serveur, 2026-09-06) : une information, pas une alerte. */
.kl-bandeau.est-info { background: var(--et-tint); color: var(--et-ink); font-weight: 400; }
.kl-bandeau.est-info > .bi { color: var(--et-form-blue); }
.kl-bandeau-actions { margin-left: auto; display: flex; gap: 8px; flex-shrink: 0; }

/* ---- En-tête du bordereau ---------------------------------------------- */

.kl-entete {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  flex-shrink: 0;
  background: var(--et-surface);
  border-bottom: 1px solid var(--et-hairline);
}

.kl-champ-bloc { padding: 10px 14px; border-right: 1px solid var(--et-hairline); }
.kl-champ-bloc:last-child { border-right: 0; }

.kl-champ-bloc > label {
  display: block;
  margin-bottom: 4px;
  color: var(--et-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.kl-requis { color: var(--et-danger-ink); font-weight: 400; text-transform: none; letter-spacing: 0; }

/* La contrepartie est AFFICHÉE, pas choisie : c'est celle du journal. La laisser modifiable
   ferait poser des écritures sur un compte qui n'est pas celui du relevé. */
.kl-fixe {
  display: flex;
  align-items: baseline;
  gap: 8px;
  height: 30px;
  padding: 0 8px;
  background: var(--et-surface-2);
  border: 1px solid var(--et-hairline);
  color: var(--et-ink);
  font-size: 13px;
  line-height: 30px;
}

.kl-fixe-lib {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: inherit;
  font-size: 12px;
  color: var(--et-muted);
}

/* Les contrôles natifs sont dessinés par le navigateur, qui leur arrondit les coins quel
   que soit border-radius : on lui retire le rendu et on redessine le chevron. */
.kl-champ {
  box-sizing: border-box;
  height: 30px;
  padding: 0 7px;
  background: var(--et-surface);
  border: 1px solid var(--et-filet-fort);
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  color: var(--et-ink);
  font: inherit;
  font-size: 13px;
  outline: none;
}

select.kl-champ {
  padding-right: 26px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--et-muted) 50%),
    linear-gradient(135deg, var(--et-muted) 50%, transparent 50%);
  background-position: right 13px center, right 8px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.kl-champ:focus { border-color: var(--et-form-blue); box-shadow: inset 0 0 0 1px var(--et-form-blue); }
.kl-champ.mono { font-family: var(--et-font-mono); }
.kl-num { font-family: var(--et-font-mono); text-align: right; font-variant-numeric: tabular-nums; }
.kl-plein { width: 100%; }

/* ---- Synthèse ---------------------------------------------------------- */

.kl-synthese {
  display: flex;
  flex-shrink: 0;
  background: var(--et-surface);
  border-bottom: 2px solid var(--et-filet-fort);
}

.kl-mesure {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 14px;
  border-right: 1px solid var(--et-hairline);
}

.kl-mesure:last-child { border-right: 0; }

/* Mêmes proportions que les vignettes du module : clé 12 px mono en capitales, valeur
   16 px mono — 12 et non 11 : l'échelle ne descend pas sous 12 px (révision du 2026-09-02). */
.kl-mesure > .n {
  font-family: var(--et-font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--et-muted);
}

.kl-mesure > .v { font-family: var(--et-font-mono); font-size: 16px; font-weight: 600; }

/* ---- Corps ------------------------------------------------------------- */

/* LE CORPS EST BORNÉ À LA FENÊTRE sur un poste — même mécanique et mêmes raisons que la
   saisie de pièce (ecran-saisie-piece.css, .sr-corps) : la coquille ne borne pas .et-scroll,
   c'est le document qui défile, et un bordereau de quarante lignes emportait les totaux, le
   pointage et le bouton de comptabilisation sous le bord. La grille défile dans son cadre,
   la tête reste figée, le pied reste dessous. Ce qui est posé AU-DESSUS du corps est plus
   haut qu'en saisie de pièce d'une bande de synthèse (~400 px) ; max-height et non height,
   le minimum de 380 px protège une fenêtre trop basse. Sous 1024 px la borne est levée. */
.kl-corps {
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 380px;
  max-height: calc(100vh - var(--kl-au-dessus, 400px));
}
.kl-colonne { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--et-surface-2); }
.kl-scroller { flex: 1 1 auto; min-height: 0; overflow: auto; }

/* La tête se fige dans le cadre borné — z 3 au-dessus des cellules ancrées (2, lot 03), au-
   dessous de la cellule de coin (4). Le filet inférieur voyage AVEC la cellule, en ombre
   intérieure (lot 08). La cellule de coin — la date, colonne d'ancrage — réunit les deux
   filets, à une spécificité qui l'emporte sur celle du lot 03. */
.kl-grille .tbl > thead > tr > th {
  position: sticky;
  top: 0;
  z-index: 3;
  box-shadow: inset 0 -1px 0 var(--et-table-head-fonce);
}
.kl-grille .tbl-ancree[data-ancre="2"] > thead > tr > :nth-child(2) {
  z-index: 4;
  box-shadow: 1px 0 0 var(--et-hairline), inset 0 -1px 0 var(--et-table-head-fonce);
}

/* Le menu des comptes doit sortir du cadre, sans quoi il est rogné dès la deuxième ligne.
   La table garde donc son min-width en attribut : sans lui elle se comprime au lieu de
   déborder et tronque ses cellules. Le défilement appartient au scroller. */
.kl-grille .tbl-cadre,
.kl-grille .tbl-defile { overflow: visible; }

/* ---- Grille ------------------------------------------------------------ */

.kl-row { border-bottom: 1px solid var(--et-hairline); }
.kl-row:hover { background: var(--et-surface-3); }
.kl-row.est-vide { background: var(--et-surface-2); }
/* Le liseré dit qu'une ligne ne passera pas, sans repeindre la ligne : un fond rouge sur
   dix rangs d'un bordereau de quarante rend la grille illisible. */
.kl-row.est-bloquante { box-shadow: inset 3px 0 0 var(--et-danger); }

.kl-rang { color: var(--et-inerte); }
.kl-cell { position: relative; }

.kl-cell input,
.kl-cell select {
  box-sizing: border-box;
  width: 100%;
  height: 30px;
  padding: 0 7px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  color: var(--et-ink);
  font: inherit;
  font-size: 13px;
  outline: none;
}

.kl-cell input:hover,
.kl-cell select:hover { border-color: var(--et-hairline); }
.kl-cell input:focus,
.kl-cell select:focus { border-color: var(--et-form-blue); background: var(--et-surface); box-shadow: inset 0 0 0 1px var(--et-form-blue); }
.kl-cell input.mono { font-family: var(--et-font-mono); }
.kl-cell input.kl-num { text-align: right; font-family: var(--et-font-mono); font-variant-numeric: tabular-nums; }
.kl-cell input.faute { border-color: var(--et-danger-ink); background: var(--et-danger-badge-bg); }

.kl-cell-compte { min-width: 0; }
.kl-motif { padding: 2px 7px 4px; font-size: 12px; color: var(--et-danger-ink); line-height: 1.4; }
.kl-vide-cell { padding-left: 7px; font-size: 12px; color: var(--et-inerte); }
.kl-actions-ligne { display: flex; align-items: center; gap: 6px; }

/* ---- Menu des comptes -------------------------------------------------- */
/* Posé en absolu sous le champ : c'est le repli quand l'interop manque. Dans la grille,
   js/menu-flottant.js le passe en fixe après le rendu, aux coordonnées du champ, retourné
   vers le haut si la place manque en bas : un cadre borné qui défile rogne ce qui en sort. */

.kl-menu {
  position: absolute;
  z-index: 30;
  left: 2px;
  top: 34px;
  width: 350px;
  max-height: 236px;
  overflow: auto;
  background: var(--et-surface);
  border: 1px solid var(--et-filet-fort);
  box-shadow: var(--et-ombre-flottant);
}

.kl-menu-tete {
  padding: 6px 10px;
  background: var(--et-surface-2);
  border-bottom: 1px solid var(--et-hairline);
  color: var(--et-muted);
  font-size: 12px;
  font-weight: 600;
}

.kl-sugg {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 10px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--et-hairline);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.kl-sugg.est-frequent { background: var(--et-surface); }
.kl-sugg:hover,
.kl-sugg.est-vise { background: var(--et-tint); }
/* La proposition visée au clavier porte un liseré : on doit voir ce qu'Entrée va prendre. */
.kl-sugg.est-vise { box-shadow: inset 2px 0 0 var(--et-form-blue); }

.kl-sugg-num { flex: none; min-width: 58px; font-size: 12px; font-weight: 600; color: var(--et-form-blue); }
.kl-sugg-lib { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.kl-sugg-note { flex: none; font-size: 12px; color: var(--et-muted); }
.kl-sugg-note.est-frequent { color: var(--et-form-blue); }

/* ---- TVA de ligne ------------------------------------------------------ */

.kl-tva {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 22px;
  padding: 0 6px;
  background: var(--et-neutre-bg);
  border: 1px solid var(--et-hairline);
  color: var(--et-muted);
  font-family: var(--et-font-mono);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.kl-tva.est-active { background: var(--et-tint); border-color: var(--et-form-blue); color: var(--et-form-blue); }

/* ---- Ajout de ligne ---------------------------------------------------- */

.kl-ajout {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 12px;
  background: var(--et-surface-3);
  border: 0;
  border-bottom: 1px solid var(--et-hairline);
  color: var(--et-form-blue);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.kl-ajout:hover { background: var(--et-tint); }
.kl-ajout > .kl-note { font-weight: 400; }

/* ---- Pied -------------------------------------------------------------- */

.kl-pied {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  flex-shrink: 0;
  padding: 10px 16px;
  background: var(--et-surface);
  border-top: 2px solid var(--et-filet-fort);
}

.kl-total { display: flex; align-items: baseline; gap: 7px; }

.kl-total > .n {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--et-muted);
}

.kl-total > .v { font-size: 15px; font-weight: 600; color: var(--et-ink); }

/* La couleur est portée par la pastille, jamais par le chiffre : les jetons d'état sont des
   teintes claires, illisibles en encre sur blanc. */
.kl-pastille { width: 8px; height: 8px; flex: none; align-self: center; }
.kl-pastille.est-debit { background: var(--et-form-blue); }
.kl-pastille.est-credit { background: var(--et-avertissement-mark); }

.kl-pointage {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 10px;
  font-size: 13px;
  font-weight: 600;
}

.kl-pointage.est-ok { background: var(--et-succes-bg); color: var(--et-succes-ink); }
.kl-pointage.est-ko { background: var(--et-danger-badge-bg); color: var(--et-danger-ink); }

.kl-pied-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* ---- Aside ------------------------------------------------------------- */

.kl-aside {
  flex: 0 0 320px;
  min-height: 0;
  overflow: auto;
  background: var(--et-surface);
  border-left: 1px solid var(--et-filet-fort);
}

.kl-carte { padding: 14px 16px; border-bottom: 1px solid var(--et-hairline); }
.kl-carte:last-child { border-bottom: 0; }

.kl-carte-t {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
  padding-left: 8px;
  border-left: 3px solid var(--et-form-blue);
  color: var(--et-table-head-encre);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.kl-note { margin: 0; font-size: 12px; color: var(--et-muted); line-height: 1.5; }
.kl-fort { font-weight: 600; }

.kl-freqs { display: flex; flex-direction: column; gap: 6px; }

.kl-freq {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  background: var(--et-surface);
  border: 1px solid var(--et-hairline);
  border-radius: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.kl-freq:hover { background: var(--et-tint); border-color: var(--et-form-blue); }
.kl-freq-num { flex: none; font-size: 12px; font-weight: 600; color: var(--et-form-blue); white-space: nowrap; }
.kl-freq-lib { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--et-ink); }
.kl-freq-usage { flex: none; margin-left: auto; font-family: var(--et-font-mono); font-size: 12px; color: var(--et-muted); }

.kl-raccourcis { display: flex; flex-direction: column; gap: 7px; }
.kl-raccourci { display: flex; align-items: center; gap: 10px; }

.kl-kbd {
  display: inline-block;
  min-width: 22px;
  flex-shrink: 0;
  padding: 1px 6px;
  background: var(--et-neutre-bg);
  border: 1px solid var(--et-hairline);
  border-radius: 0;
  border-bottom-width: 2px;
  color: var(--et-ink);
  font-family: var(--et-font-mono);
  font-size: 12px;
  text-align: center;
}

/* La touche posée SUR l'aplat d'engagement : encre --et-sur-aplat, filet --et-sur-aplat-doux,
   fond transparent. La charte ne nomme pas de blanc translucide sur un aplat quelconque — elle
   n'en nomme que sur la marine et sur l'ardoise —, et un chiffre de plus écrit ici serait
   exactement la valeur en dur que docs/couleurs-en-dur.md interdit. */
.kl-kbd-clair {
  background: transparent;
  border-color: var(--et-sur-aplat-doux);
  color: var(--et-sur-aplat);
}

/* ---- Boutons ----------------------------------------------------------- */

.kl-btn,
.kl-btn-fort,
.kl-btn-bleu {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 12px;
  background: var(--et-surface);
  border: 1px solid var(--et-filet-fort);
  border-radius: 0;
  color: var(--et-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.kl-btn-fort { background: var(--et-action); border-color: var(--et-action); color: var(--et-sur-aplat); }
/* L'action forte SECONDAIRE — reprendre un bordereau retrouvé — est bleue : l'orange est
   réservé au seul bouton d'engagement de l'écran, « Comptabiliser ». Même partage qu'en
   saisie de pièce (.sr-btn-fort / .sr-btn-engager). */
.kl-btn-bleu { background: var(--et-form-blue); border-color: var(--et-form-blue); color: var(--et-sur-aplat); }
.kl-btn-bleu:hover { background: var(--et-form-blue-d); border-color: var(--et-form-blue-d); color: var(--et-sur-aplat); }
.kl-btn:hover { border-color: var(--et-form-blue); color: var(--et-form-blue); }
.kl-btn-fort:disabled { background: var(--et-action-off); border-color: var(--et-action-off); color: var(--et-sur-aplat); cursor: not-allowed; }  /* délavé, non gris : modele-erp.css, .mx-btn-cta */
.kl-btn:focus-visible,
.kl-btn-fort:focus-visible,
.kl-btn-bleu:focus-visible { outline: 2px solid var(--et-form-blue); outline-offset: 2px; }

.kl-ico-nu { width: 24px; height: 24px; background: transparent; border: 0; border-radius: 0; color: var(--et-inerte); font-size: 12px; cursor: pointer; }
.kl-ico-nu:hover { color: var(--et-form-blue); }
.kl-ico-danger:hover { color: var(--et-danger-ink); }

/* ---- Fenêtre de rapport ------------------------------------------------ */

.kl-voile {
  position: fixed;
  z-index: 1070;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--et-voile);
}

.kl-fenetre {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 640px;
  max-height: 100%;
  background: var(--et-surface);
  border: 1px solid var(--et-filet-fort);
  box-shadow: var(--et-ombre-flottant);
}

.kl-fenetre-tete {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding: 10px 12px;
  background: var(--et-table-head);
  color: var(--et-sur-ardoise-plein);
}

.kl-fenetre-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 700; }

.kl-nav {
  width: 28px;
  height: 28px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--et-fond-ardoise);
  border: 1px solid var(--et-filet-ardoise);
  color: var(--et-sur-ardoise-plein);
  font-size: 12px;
  cursor: pointer;
}

/* Le survol renforce le filet plutôt que le fond : la famille ardoise n'a pas de rang
   -survol, et en inventer un pour un seul bouton créerait une cinquième valeur à tenir. */
.kl-nav:hover { border-color: var(--et-sur-ardoise-plein); }
.kl-fenetre-corps { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.kl-rapport-bilan { padding: 12px 14px 8px; font-size: 13px; color: var(--et-ink); }

.kl-rapport-l {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 14px 5px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.45;
}

.kl-rapport-l > .bi { flex-shrink: 0; }
.kl-rapport-l.est-ok { background: var(--et-succes-bg); color: var(--et-succes-ink); }
.kl-rapport-l.est-ko { background: var(--et-danger-badge-bg); color: var(--et-danger-ink); }

.kl-fenetre-pied {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex-shrink: 0;
  padding: 10px 12px;
  background: var(--et-surface-2);
  border-top: 1px solid var(--et-hairline);
}

.kl-fenetre-pied > .kl-note { flex: 1; min-width: 0; }

/* ---- Retour immédiat --------------------------------------------------- */

.kl-toast {
  position: fixed;
  z-index: 1090;
  right: 20px;
  bottom: 20px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 430px;
  padding: 12px 14px;
  background: var(--et-surface);
  border: 1px solid var(--et-hairline);
  border-left: 3px solid;
  box-shadow: var(--et-ombre-flottant);
  font-size: 13px;
  color: var(--et-ink);
  line-height: 1.45;
}

/* ==============================================================================================
   PALIERS — sur l'échelle retenue (docs/conventions-responsive.md) : 1024, 720, 560. Le
   palier de 768 px qu'écrivait la passation n'en fait pas partie ; ce qu'il portait passe
   à 720. Recette à 390 / 768 / 1280 / 1600 ; à 1600 rien de ce qui suit ne s'applique.
   ============================================================================================== */

/* ---- 1024 px : le volet passe sous la grille, et tout se touche au doigt ------------------ */

@media (max-width: 1024px) {
  /* Sous 1024 px la page défile d'un bloc : rien n'est borné, sinon la grille et le volet
     se disputent une colonne trop courte et l'un des deux tombe à zéro. Sans cadre borné,
     la tête n'a rien contre quoi se figer : elle redevient une rangée. */
  .kl-corps { flex-direction: column; align-items: stretch; min-height: 0; max-height: none; }
  .kl-colonne { flex: 0 0 auto; }
  .kl-scroller { flex: 0 0 auto; min-height: 0; overflow-x: auto; }
  .kl-grille .tbl > thead > tr > th { position: static; }

  /* Le volet sous la grille, en deux colonnes : une colonne de 320 px étirée laissait les
     deux tiers de l'écran vides. */
  .kl-aside {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    flex: 0 0 auto;
    width: 100%;
    border-left: 0;
    border-top: 2px solid var(--et-filet-fort);
    overflow: visible;
  }
  .kl-carte { border-bottom: 1px solid var(--et-hairline); }
  .kl-carte:nth-child(odd) { border-right: 1px solid var(--et-hairline); }
  .kl-carte:last-child { border-bottom: 0; }

  .kl-entete { flex-wrap: wrap; }
  .kl-champ-bloc { flex: 1 1 200px !important; border-bottom: 1px solid var(--et-hairline); }
  .kl-synthese { flex-wrap: wrap; }
  .kl-mesure { flex: 1 1 33%; }

  /* CIBLES TACTILES (docs/cibles-tactiles.md) : sous 1024 px, rien sous 44 × 44 px, TOUTES
     les cibles de l'écran — les champs de l'en-tête et de la grille, les boutons, les gestes
     de ligne, la bascule de TVA, les comptes fréquents, les propositions du menu. */
  .kl-champ,
  .kl-cell input,
  .kl-cell select { height: 44px; }
  .kl-btn { min-width: 44px; }
  .kl-btn,
  .kl-btn-fort,
  .kl-btn-bleu,
  .kl-freq,
  .kl-ajout,
  .kl-sugg { min-height: 44px; }
  .kl-ico-nu,
  .kl-tva { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; }
  .kl-actions-ligne { gap: 0; }
  .kl-voile { padding: 0; }
  .kl-fenetre { max-width: 100%; height: 100%; border: 0; }
}

/* ---- 720 px : une colonne pour le volet, deux mesures par rangée ------------------------- */

@media (max-width: 720px) {
  .kl-mesure { flex: 1 1 50%; }
  .kl-aside { grid-template-columns: minmax(0, 1fr); }
  .kl-carte:nth-child(odd) { border-right: 0; }

  /* Le pied garde ses totaux sur une rangée et ses actions sur la suivante, le bouton
     d'engagement prenant la largeur qui reste. */
  .kl-pied { gap: 10px 16px; }
  .kl-pied-actions { margin-left: 0; width: 100%; }
  .kl-pied-actions > .kl-btn-fort { flex: 1 1 auto; justify-content: center; }

  /* La grille NE passe PAS en rangées empilées : un bordereau se lit en colonnes, et
     quarante lignes empilées à neuf champs chacune sont illisibles. Elle défile
     horizontalement — c'est le seul écran du module où c'est le bon choix. */
}

/* ---- 560 px : le téléphone — l'en-tête champ par champ, les rembourrages rendus --------- */

@media (max-width: 560px) {
  .kl-champ-bloc { flex: 1 1 100% !important; padding-left: 12px; padding-right: 12px; }
  .kl-bandeau,
  .kl-carte,
  .kl-pied { padding-left: 12px; padding-right: 12px; }
  .kl-bandeau-actions { margin-left: 0; width: 100%; }
  .kl-pied-actions { flex-direction: column; align-items: stretch; }
  .kl-pied-actions > .kl-btn { justify-content: center; }
}

/* ---- Mesures de l'en-tête ----------------------------------------------
   La passation les écrivait en style inline sur chaque bloc. Une largeur en dur dans une
   page échappe aux paliers de docs/conventions-responsive.md et se recopie à la première
   colonne ajoutée : elles vivent ici, où le repli de 1024 px les reprend d'un seul geste. */

.kl-bloc-journal { flex: 0 0 210px; }
.kl-bloc-contrepartie { flex: 0 0 250px; }
.kl-bloc-date { flex: 0 0 160px; }
.kl-bloc-seance { flex: 0 0 220px; }
.kl-bloc-solde { flex: 0 0 180px; }

/* ---- Largeur et ancrage de la grille -----------------------------------
   La table garde une largeur minimale : sans elle, elle se comprime au lieu de déborder et
   tronque ses cellules. Au-delà de 960 px, le lot 03 (docs/tables-larges.md) demande une
   colonne d'ancrage — à 1280 px la colonne de contenu ne fait déjà plus que ~990 px une fois
   le rail retiré, donc le défilement commence sur un poste fixe, pas sur un téléphone.

   L'ANCRE EST LA DATE (rang 2), et non le compte. Le rang 1 n'est qu'un numéro de ligne,
   c'est le cas que le lot prévoit ; et la cellule Compte porte le menu des propositions, qui
   doit SORTIR de la table — la figer l'enfermerait dans son propre plan d'empilement. Sur un
   relevé, la date nomme la ligne aussi bien que le compte. */

.kl-table { min-width: 1180px; }

/* Une cellule figée est peinte en --et-surface par le lot 03, pour être opaque. Les deux
   états de rangée de cet écran doivent la traverser, sinon la colonne de dates reste blanche
   au survol et sur les lignes vierges — et c'est justement la colonne qu'on regarde en
   défilant. */
.kl-table.tbl-ancree > tbody > tr.kl-row.est-vide > :nth-child(2) { background: var(--et-surface-2); }
.kl-table.tbl-ancree > tbody > tr.kl-row:hover > :nth-child(2) { background: var(--et-surface-3); }

/* ---- Colonnes de la grille ---------------------------------------------
   La passation les posait en style inline sur chaque <th>. Neuf largeurs recopiées dans le
   balisage se perdent à la première colonne ajoutée, et elles échappent aux paliers. */

.kl-table .kl-col-rang { width: 30px; }
.kl-table .kl-col-date { width: 132px; text-align: left; }
.kl-table .kl-col-compte { width: 230px; text-align: left; }
.kl-table .kl-col-tiers { width: 170px; text-align: left; }
.kl-table .kl-col-libelle { text-align: left; }
.kl-table .kl-col-montant { width: 130px; }
.kl-table .kl-col-tva { width: 54px; text-align: left; }
.kl-table .kl-col-actions { width: 66px; }

/* ---- Édition papier ----------------------------------------------------
   Le bouton PDF passe par IEditionService.ImprimerAsync(), qui rend l'écran courant tel que
   le navigateur l'imprime. La coquille s'efface d'elle-même — easytime-shell.css rend au flux
   la hauteur et le débordement de .et-scroll —, mais elle ne connaît pas la géométrie de cet
   écran, et sans ce bloc l'édition serait fausse de trois façons :

     1. .kl-scroller est un conteneur overflow:auto DANS un .kl-corps en flex : le bordereau
        serait coupé net au bas de la première page, ce qui est précisément ce qu'on édite ;
     2. .kl-corps met le volet de droite à côté de la grille — sur A4 paysage, la grille
        perdrait 320 px au profit de cartes qui n'ont aucun sens sur papier ;
     3. la table porte un min-width de 1180 px, plus large que la surface utile d'un A4
        paysage : elle déborderait de la feuille au lieu de s'y ajuster.

   CE QUI TOMBE : ce qui ne s'imprime pas parce qu'on ne peut pas cliquer sur du papier — les
   boutons, le menu des comptes, la colonne d'actions de ligne, le rapport et le retour
   immédiat. CE QUI RESTE : le bandeau (il nomme l'édition), l'en-tête du bordereau et ses
   soldes, la bande de synthèse, la grille entière, les totaux et le pointage. Et LE MOTIF
   D'UNE LIGNE BLOQUANTE reste aussi : un bordereau édité avant comptabilisation se relit à
   deux, et c'est ce qu'on y cherche. */

/* PAS DE RÈGLE @page ICI, ET C'EST DÉLIBÉRÉ. La passation demande « A4 paysage », mais @page
   n'a pas de sélecteur : il vaut pour LE DOCUMENT, et cette feuille est liée globalement dans
   App.razor. Un « size: A4 landscape » écrit ici mettrait en paysage l'impression de tous les
   écrans du produit, et entrerait en cascade avec le @page du bulletin de paie
   (ecran-bulletin.css) — la dernière feuille chargée l'emporterait, sur une orientation que
   personne n'a demandée. easypaie.css énonce déjà la règle pour son propre domaine : « ne pas
   écrire de règle @page dans ce fichier ».

   La grille est donc rendue INDÉPENDANTE DE L'ORIENTATION — elle s'ajuste à la largeur de la
   feuille au lieu d'imposer la sienne. Le paysage reste le bon choix pour un bordereau à neuf
   colonnes ; il se prend dans la fenêtre d'impression, et l'infobulle du bouton le dit. */

@media print {
  /* Ce qui ne se clique pas sur papier. */
  .et-bandeau-actions,
  .kl-menu,
  .kl-ajout,
  .kl-pied-actions,
  .kl-actions-ligne,
  .kl-aside,
  .kl-voile,
  .kl-toast { display: none !important; }

  /* La colonne d'actions n'a plus de contenu : sa largeur non plus. */
  .kl-table .kl-col-actions { width: 0; padding: 0; }

  /* Le bordereau reprend le flux du document — sinon il s'arrête au bas de la page 1. */
  .kl-corps { display: block; min-height: 0; max-height: none; }
  .kl-colonne { display: block; background: transparent; }
  .kl-grille .tbl > thead > tr > th { position: static; box-shadow: none; }
  .kl-scroller { overflow: visible !important; min-height: 0; }
  .kl-grille .tbl-cadre { overflow: visible; }

  /* La table s'ajuste à la feuille au lieu de déborder. L'ancrage du lot 03 n'a plus d'objet :
     rien ne défile sur du papier, et une cellule collante y prendrait un fond opaque pour
     rien. */
  .kl-table { min-width: 0; width: 100%; font-size: 8pt; }
  .kl-table.tbl-ancree > thead > tr > :nth-child(2),
  .kl-table.tbl-ancree > tbody > tr > :nth-child(2) { position: static; box-shadow: none; }

  /* Une ligne de relevé ne se coupe pas entre deux pages, et l'en-tête se répète en tête de
     chacune — sans quoi les colonnes de la page 2 ne sont plus nommées. */
  .kl-row { page-break-inside: avoid; }
  .kl-table thead { display: table-header-group; }

  /* Les cellules sont des champs de saisie : on leur retire ce qui n'a de sens qu'à l'écran,
     et on garde leur valeur. Le chevron d'un select est une image de fond, il s'imprimerait. */
  .kl-cell input,
  .kl-cell select,
  .kl-champ,
  select.kl-champ { border-color: transparent; background: transparent; background-image: none; }

  /* Le liseré d'une ligne bloquante est une ombre interne : elle ne s'imprime pas. Le motif
     écrit sous la ligne, lui, reste — et il suffit. */
  .kl-row.est-bloquante { box-shadow: none; }
}