/* ============================================================================
   ÉCRAN — POS : ARRÊTÉS DE JOURNÉES ET BILLETAGE (TRE-10)

   Feuille d'ÉCRAN. Préfixe .c1-, celui de la maquette de la passation
   (docs/modeles/design_handoff_easycompta, TRE-10).

   CE QUI N'EST PAS ICI : le rail d'onglets interne (.eca-onglets, gabarit de
   module css/easycompta-onglets.css) et les fenêtres (.xp-*,
   css/easycompta-modal.css). Cette feuille pose la grille de billetage, les
   cartes comptage / théorique / écart, et les blocs de fiche.

   POURQUOI DEUX COLONNES, ET DANS CET ORDRE : le comptage à gauche parce que
   c'est le geste, le théorique à droite parce que c'est la référence. Sous
   1100 px elles s'empilent — le comptage d'abord, toujours.
   ========================================================================== */

.appgrid .c1-chip { display: inline-block; padding: 1px 7px; background: var(--et-surface-3); border: 1px solid var(--et-form-border); font-family: var(--et-font-mono); font-size: 12px; font-weight: 600; white-space: nowrap; }

.appgrid .c1-ligne { cursor: pointer; }
.appgrid .c1-ligne:hover { background: var(--et-surface-3); }

/* La carte elle-même (.eca-carte / .eca-tete / .eca-corps) n'est PAS ici : c'est
   le gabarit de module (css/easycompta-onglets.css) — le tableau de bord la
   porte aussi. Cette feuille ne dessine que ce qui va DEDANS. */
.appgrid .c1-cols { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 14px; align-items: start; }

/* LE BILLETAGE : une ligne par coupure, la quantité au milieu, le sous-total à
   droite. Le comptage se fait coupure par coupure — un total saisi à la main ne
   se recompte pas, et personne ne peut vérifier d'où vient l'écart. */
.appgrid .c1-billet { display: grid; grid-template-columns: 92px 1fr 108px; gap: 6px 10px; align-items: center; }
.appgrid .c1-billet .cou { font-family: var(--et-font-mono); font-size: 14px; font-weight: 600; color: var(--et-ink); text-align: right; }
.appgrid .c1-billet .tot { font-family: var(--et-font-mono); font-size: 13px; color: var(--et-muted); text-align: right; }
.appgrid .c1-qte { box-sizing: border-box; width: 100%; height: 30px; padding: 0 8px; text-align: right; font-family: var(--et-font-mono); font-size: 14px; background: var(--et-surface); border: 1px solid var(--et-form-border); border-radius: 0; color: var(--et-ink); }
.appgrid .c1-qte:focus { border-color: var(--et-form-blue); box-shadow: inset 0 0 0 1px var(--et-form-blue); outline: none; }
.appgrid .c1-sep { grid-column: 1 / -1; height: 1px; background: var(--et-hairline); margin: 4px 0; }

.appgrid .c1-somme { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--et-hairline); }
.appgrid .c1-somme .l { font-size: 13px; color: var(--et-muted); }
.appgrid .c1-somme .v { font-family: var(--et-font-mono); font-size: 15px; color: var(--et-ink); }
.appgrid .c1-somme.fort .l { font-weight: 700; color: var(--et-ink); }
.appgrid .c1-somme.fort .v { font-size: 20px; font-weight: 600; }

.appgrid .c1-paire, .xp-corps .c1-paire { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }

/* L'avertissement de la politique de caisse : une sortie qui exige un responsable. */
.xp-corps .c1-garde { margin-top: 10px; padding: 9px 11px; background: var(--et-avertissement-bg); color: var(--et-avertissement-ink); font-size: 12px; line-height: 1.5; }

@media (max-width: 1100px) {
  .appgrid .c1-cols { grid-template-columns: minmax(0, 1fr); }
  .appgrid .c1-paire, .xp-corps .c1-paire { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1024px) {
  /* Un champ de billetage se vise au doigt : 44 px, comme tout le reste
     sous 1024 px (docs/cibles-tactiles.md). */
  .appgrid .c1-qte { height: 44px; }
}