/* ============================================================================ ÉCRAN — JOURNAUX (CPT-03) Feuille d'ÉCRAN. Préfixe .jx-, celui de la maquette de la passation (docs/modeles/design_handoff_easycompta, CPT-03-Refonte-journaux) — il était libre au dépôt, contrairement au .ep- de CPT-02. CE QUI N'EST PAS ICI : le cadre de liste (.tbl-*) et l'en-tête de panneau (.flt-tete, .flt-surtitre), tous deux du gabarit easytime-shell.css ; la fenêtre d'édition (ModalCadre) ; l'ossature d'écran (EcranCompta). Cette feuille pose le maître-détail, l'histogramme de volumétrie et la marque des trous de numérotation. ========================================================================== */ /* LE MAÎTRE-DÉTAIL. Le panneau de droite n'est pas un tiroir : il reste ouvert, parce que la question de l'écran — « ce journal est-il bien réglé ? » — se pose en comparant la fiche à ce que le journal a produit. Les cacher l'un derrière l'autre obligerait à mémoriser l'un pour lire l'autre. */ .appgrid .jx-corps { display: flex; align-items: stretch; gap: 14px; } .appgrid .jx-liste { flex: 1; min-width: 0; } .appgrid .jx-aside { flex: 0 0 400px; background: var(--et-surface); border: 1px solid var(--et-hairline); align-self: flex-start; } .appgrid .jx-bloc { padding: 12px 14px; border-bottom: 1px solid var(--et-hairline); } .appgrid .jx-bloc:last-child { border-bottom: 0; } /* CE QUE L'ÉCRAN AJOUTE À LA RANGÉE DU GABARIT. .jx-rang et .jx-trou* ont été retirés le 2026-09-07 : la liste est passée au gabarit (Tableau), qui apporte la rangée et son curseur, et les trous de numérotation sont devenus une COLONNE — donc un nombre qui se trie et se totalise, là où c'était une marque rouge glissée sous la séquence, invisible au tri. */ /* Un journal archivé reste LISIBLE : on l'ouvre pour décider s'il doit le rester. La sourdine dit « mis de côté », elle ne cache pas, et elle n'atteint pas les pastilles, qui portent leur couleur en propre. */ .appgrid .tbl tbody tr.jx-archive > td { color: var(--et-muted); } /* La rangée dont le panneau est ouvert. Sélecteur plus spécifique plutôt qu'un !important : elle doit primer sur .tbl-alerte du gabarit, sans lui interdire de revenir ailleurs. */ .appgrid .tbl tbody tr.jx-ligne-choisie > td { background: var(--et-tint); } .appgrid .tbl tbody tr.jx-ligne-choisie > td:first-child { box-shadow: inset 3px 0 0 var(--et-form-blue); } /* LES CELLULES PROPRES AU RÉFÉRENTIEL DES JOURNAUX */ .appgrid .jx-code { font-family: var(--et-font-mono); font-size: 13px; font-weight: 600; } .appgrid .jx-lib { font-size: 13px; color: var(--et-ink); } .appgrid .jx-sous { font-size: 12px; color: var(--et-muted); line-height: 1.35; } .appgrid .jx-sous.mono { font-family: var(--et-font-mono); } /* Une contrepartie absente sur un journal de trésorerie n'est pas une nuance de gris : la saisie sera refusée à la première pièce. */ .appgrid .jx-sous.est-manque { color: var(--et-danger-ink); font-weight: 600; } .appgrid .jx-prochain { font-family: var(--et-font-mono); font-size: 12px; font-weight: 600; color: var(--et-ink); } .appgrid .jx-type { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 1px 6px; background: var(--et-neutre-bg); color: var(--et-neutre); font-size: 12px; font-weight: 600; } /* L'ACTIVITÉ, en trois états. Le texte posé sur un aplat prend le rang -ink : à 12 px, la couleur d'état elle-même ne passe pas l'AA sur son propre fond pâle. */ .appgrid .jx-activite { display: inline-block; padding: 1px 6px; white-space: nowrap; font-size: 12px; font-weight: 600; } .appgrid .jx-activite.est-vivant { background: var(--et-succes-bg); color: var(--et-succes-ink); } .appgrid .jx-activite.est-dormant { background: var(--et-avertissement-bg); color: var(--et-avertissement-ink); } .appgrid .jx-activite.est-vide { background: var(--et-neutre-bg); color: var(--et-neutre); } /* LES FILTRES D'ÉCRAN, posés dans la barre d'outils du tableau. .mx-select est en largeur 100 % par défaut — il est fait pour la grille de fiche dense ; dans une barre il lui faut un plafond, sinon les listes chassent la recherche à la ligne. */ .appgrid .jx-filtre { flex: 0 1 auto; width: auto; min-width: 150px; max-width: 200px; } /* L'HISTOGRAMME DE VOLUMÉTRIE — douze colonnes, une par mois. Il n'a pas d'axe : la hauteur se lit relativement au mois le plus fourni, et le nombre est écrit sous chaque barre. Un axe gradué demanderait une échelle, donc une décision d'arrondi, pour une série de douze valeurs qu'on lit de toute façon en comparaison — pas en valeur absolue. */ .appgrid .jx-mois { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; align-items: end; } .appgrid .jx-barre-cadre { display: flex; flex-direction: column; justify-content: flex-end; height: 96px; } .appgrid .jx-barre { background: var(--et-form-blue); min-height: 2px; } .appgrid .jx-barre.est-vide { background: var(--et-filet-fort); } .appgrid .jx-mois-nom { margin-top: 5px; font-family: var(--et-font-mono); font-size: 12px; color: var(--et-muted); text-align: center; } .appgrid .jx-mois-nb { font-family: var(--et-font-mono); font-size: 12px; font-weight: 600; color: var(--et-ink); text-align: center; } /* Le jeton de gabarit, dans le panneau : il se lit, il ne se clique pas. */ .appgrid .jx-puce { display: inline-block; padding: 1px 6px; background: var(--et-surface-3); border: 1px solid var(--et-form-border); font-family: var(--et-font-mono); font-size: 12px; color: var(--et-ink); } /* L'aperçu de la prochaine pièce : ce que la saisie (SAI-01) affichera. Le bord bleu le désigne comme une projection, pas comme une donnée enregistrée. */ .appgrid .jx-projection { margin-top: 9px; padding: 9px 11px; background: var(--et-surface-3); border-left: 3px solid var(--et-form-blue); } .appgrid .jx-projection-note { font-size: 12px; color: var(--et-muted); } .appgrid .jx-projection-val { margin-top: 3px; font-family: var(--et-font-mono); font-size: 15px; font-weight: 600; color: var(--et-ink); } .appgrid .jx-note { padding: 10px 12px; background: var(--et-neutre-bg); font-size: 12px; color: var(--et-ink); line-height: 1.5; } /* Sous 1100 px le panneau passe SOUS la liste plutôt que de la comprimer : à 400 px fixes, il ne resterait pas assez de largeur pour les huit colonnes du tableau, et c'est le tableau qui porte la comparaison entre journaux. */ @media (max-width: 1100px) { .appgrid .jx-corps { display: block; } .appgrid .jx-aside { width: 100%; margin-top: 14px; } } @media (max-width: 720px) { .appgrid .jx-mois { grid-template-columns: repeat(6, minmax(0, 1fr)); } /* Les filtres cessent de se partager la rangée et prennent chacun la leur : deux listes de 150 px côte à côte sous 720 px ne laissent plus rien à la recherche. */ .appgrid .jx-filtre { flex: 1 1 100%; max-width: none; } } /* La largeur de colonne de la table des trous de numérotation. Elle vivait EN DUR dans le Razor (style="width:80px;text-align:right" sur le ) ; une largeur dans une page est ce que docs/conventions-responsive.md interdit, et c'est ici qu'un palier peut la relâcher. Le td suit son th. */ .appgrid .jx-col-combien { width: 80px; text-align: right; }