/*  ecran-journal-general.css — ETA-04, journal général.

    Préfixe `.jg-`, celui de la maquette, vérifié libre. Une feuille pour un
    écran (§6.3), aucune couleur littérale, aucune taille sous 12 px.

    CE QUI N'EST PAS ICI : .tbl-* (la liste), .btn (les boutons de sortie) et
    .et-bandeau* (l'en-tête) — ils viennent du dépôt et ne se redéfinissent pas
    par écran. La feuille ne porte que ce que la maquette dessine EN PLUS : le
    sélecteur segmenté, la bande de filtres à libellés, le bandeau d'état, les
    rangs de mois et de pièce dépliée, les cartes de souche, le pied collant.

    UNE COULEUR D'ÉTAT N'EST JAMAIS ÉCRITE EN `color:` (révision du 2026-09-03) :
    l'encre posée sur un fond pâle est le rang -ink ; comme liseré, la couleur
    d'état reste — sauf l'ambre, qui prend --et-avertissement-mark. */

/* 1 · Le cadre de l'écran. Les bandes se suivent sans marge : c'est une feuille
      d'état, pas une page de cartes. */
.jg-page {
    display: flex;
    flex-direction: column;
    background: var(--et-surface);
    border: 1px solid var(--et-hairline);
}

/* 2 · Les commandes du bandeau : le sélecteur de vue et les sorties, dans un
      conteneur qui se replie sur deux lignes quand la largeur manque — la zone
      d'actions du bandeau, partagée par 45 écrans, ne replie pas. */
.jg-sorties { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

/* 2 bis · Le sélecteur de vue, dans le bandeau. Trois boutons collés, l'actif en
      ardoise — la maquette, au jeton près (le blanc sur l'ardoise a un nom). */
.jg-seg { display: inline-flex; }

.jg-seg > button {
    height: 30px;
    padding: 0 13px;
    background: var(--et-surface);
    border: 1px solid var(--et-filet-fort);
    color: var(--et-ink);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.jg-seg > button + button { border-left: 0; }
.jg-seg > button:hover { color: var(--et-form-blue); }
.jg-seg > button.est-actif {
    background: var(--et-table-head);
    border-color: var(--et-table-head);
    color: var(--et-sur-ardoise-plein);
}
.jg-seg > button:focus-visible { outline: 2px solid var(--et-form-blue); outline-offset: 1px; position: relative; z-index: 1; }

/* 3 · La bande de filtres. Un libellé au-dessus de chaque champ, en capitales
      discrètes : une rangée de listes sans nom se lit en devinant. */
.jg-filtres {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    padding: 9px 14px;
    background: var(--et-surface-2);
    border-bottom: 1px solid var(--et-hairline);
}

.jg-champ > label {
    display: block;
    margin-bottom: 2px;
    color: var(--et-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.jg-champ .form-select,
.jg-champ .form-control { height: 30px; font-size: 12px; }

/* Les largeurs sont ici, pas dans la page (docs/conventions-responsive.md). */
.jg-champ.est-court { width: 104px; }
.jg-champ.est-moyen { width: 132px; }
.jg-champ.est-date  { width: 142px; }
.jg-champ.est-date .form-control { font-family: var(--et-font-mono); }
.jg-champ.est-large { width: 172px; }
.jg-champ.est-plein { flex: 1 1 200px; min-width: 180px; }

.jg-coche {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    color: var(--et-ink);
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
}

/* Taille retiree le 2026-09-10 : la case prend les 17 px du gabarit (app.css),
   et 24 px sous 1024 px (lot02). Voir docs/cibles-tactiles.md. */
.jg-coche > input { margin: 0; }

.jg-raz { height: 30px; padding: 0 6px; font-size: 12px; font-weight: 600; text-decoration: none; }

/* 4 · Le bandeau d'état. Il dit ce qui empêche le journal d'être opposable ; sa
      couleur est un fond pâle et son encre le rang -ink, jamais la couleur d'état. */
.jg-bandeau {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    padding: 8px 14px;
    border-bottom: 1px solid var(--et-hairline);
    font-size: var(--et-fs-cell);
    font-weight: 600;
}

.jg-bandeau > .bi { flex-shrink: 0; }
.jg-bandeau > span { flex: 1 1 320px; min-width: 0; }
.jg-bandeau.est-grave  { background: var(--et-danger-badge-bg);   color: var(--et-danger-ink); }
.jg-bandeau.est-signal { background: var(--et-avertissement-bg); color: var(--et-avertissement-ink); }
.jg-bandeau a:not(.jg-bandeau-a) { color: inherit; text-decoration: underline; }

.jg-bandeau-a,
.jg-bandeau-x {
    flex-shrink: 0;
    height: 26px;
    padding: 0 10px;
    background: transparent;
    border: 1px solid currentColor;
    color: inherit;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    line-height: 24px;
    cursor: pointer;
}

.jg-bandeau-a { margin-left: auto; }
.jg-bandeau-x { width: 26px; padding: 0; margin-left: auto; font-size: 14px; }
.jg-bandeau-a:hover { text-decoration: none; opacity: .85; }

/* 5 · La liste. Le gabarit .tbl fait le reste ; ici, la tête colle en haut sur
      un écran assez large pour que le tableau tienne sans défiler de côté — un
      conteneur qui défile de côté avale le collage, et sous 1024 px il faut
      défiler de côté. */
.jg-cadre { border: 0; }
.jg-table { width: 100%; }
.jg-table thead th { position: sticky; top: 0; z-index: 2; }

@media (min-width: 1024px) {
    .jg-cadre .tbl-defile { overflow: visible; }
}

.jg-c-date  { width: 96px; }
.jg-c-jal   { width: 56px; }
.jg-c-piece { width: 190px; }
.jg-c-orig  { width: 150px; }
.jg-c-mt    { width: 124px; }
.jg-c-etat  { width: 110px; }
.jg-c-per   { width: 120px; }
.jg-c-n     { width: 80px; }
.jg-c-seq   { width: 200px; }

/* La barre de mois : un repère, pas une section. Capitales espacées, en ardoise. */
.jg-table tbody tr.jg-mois td {
    background: var(--et-surface-3);
    border-top: 1px solid var(--et-hairline);
    font-weight: 700;
}

.jg-mois-lib { color: var(--et-table-head); letter-spacing: .07em; text-transform: uppercase; font-size: 12px; }
.jg-mois-n { margin-left: 9px; color: var(--et-muted); font-weight: 400; font-size: 12px; }

/* La pièce : cliquable ; celle qui est ouverte en fenêtre reste visée derrière, pour
   savoir où l'on en est quand les flèches avancent. */
.jg-table tbody tr.jg-piece { cursor: pointer; }
.jg-table tbody tr.jg-piece:focus-visible { outline: 2px solid var(--et-form-blue); outline-offset: -2px; }
.jg-table tbody tr.jg-piece.est-visee td { background: var(--et-tint); }
.jg-page:focus { outline: none; }

.jg-date { color: var(--et-ink); }
.jg-ref { white-space: nowrap; font-weight: 600; }
.jg-ref > .bi { width: 14px; margin-right: 2px; color: var(--et-muted); font-size: 12px; }
.jg-lib { max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jg-orig { color: var(--et-muted); font-size: 12px; }
.jg-per { color: var(--et-muted); }
.jg-seq { color: var(--et-muted); font-size: 12px; white-space: nowrap; }
.jg-seq.est-grave { color: var(--et-danger-ink); font-weight: 600; }

/* Le code journal : un jeton mono sur fond de surface, celui de la maquette. */
.jg-chip {
    display: inline-block;
    padding: 1px 6px;
    background: var(--et-surface-3);
    border: 1px solid var(--et-filet-fort);
    font-family: var(--et-font-mono);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* LA CONTRE-PASSATION (TRT-03, db/1456). La mention se pose EN REGARD de la
   référence, pas à la place : la pièce annulée reste au grand livre, et son
   numéro reste celui qu'un contrôle fiscal cherche. Aucune couleur d'état ici —
   annulée n'est ni une erreur ni un succès, c'est un fait. */
.jg-annule {
    margin-left: 6px;
    color: var(--et-muted);
    font-size: 12px;
    font-style: italic;
    font-weight: 400;
    white-space: nowrap;
}

.jg-compte { color: var(--et-form-blue); font-weight: 600; text-decoration: none; }
.jg-compte:hover { color: var(--et-form-blue-d); text-decoration: underline; }

/* Les puces de justificatif et la confrontation vivent dans easycompta-justificatif.css
   (.cpta-justif-*, .cpta-lecture-*) : deux fenêtres les partagent. */

/* LA FENÊTRE DE PIÈCE. Le cadre vient de easycompta-fenetre.css (.cpta-fenetre-*) ; ici,
   ce que le journal met dedans : l'en-tête de pièce en lecture, la table des lignes, le
   justificatif. */
.jg-volet { max-width: 820px; }
.jg-volet-entete { padding: 12px 16px; border-bottom: 1px solid var(--et-hairline); }
.jg-volet-refs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.jg-volet-ref { font-weight: 700; color: var(--et-ink); }
.jg-volet-lib { margin-top: 6px; font-size: var(--et-fs-tete); font-weight: 600; color: var(--et-ink); }
.jg-volet-meta { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 6px; font-size: 12px; color: var(--et-muted); }
.jg-volet-meta b { color: var(--et-ink); font-weight: 600; }
.jg-volet-cadre { border: 0; border-bottom: 1px solid var(--et-hairline); }
.jg-volet-table .jg-c-cpt { width: 110px; }
.jg-volet-table tfoot td { font-weight: 600; }
.jg-volet-pied-aide { flex: 1 1 200px; min-width: 0; font-size: 12px; color: var(--et-faint); }

.jg-equilibre { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.jg-equilibre.est-ok    { background: var(--et-succes-bg);       color: var(--et-succes-ink); }
.jg-equilibre.est-grave { background: var(--et-danger-badge-bg); color: var(--et-danger-ink); }

.jg-note { color: var(--et-muted); font-size: 12px; }

/* 6 · La pastille d'état, partout où l'écran en pose une : mois, pièce, pied. */
.jg-pastille {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 7px;
    border: 0;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.jg-pastille.est-ok     { background: var(--et-succes-bg);        color: var(--et-succes-ink); }
.jg-pastille.est-signal { background: var(--et-avertissement-bg); color: var(--et-avertissement-ink); }
.jg-pastille.est-grave  { background: var(--et-danger-badge-bg);  color: var(--et-danger-ink); }
.jg-pastille.est-neutre { background: var(--et-neutre-bg);        color: var(--et-neutre); }
.jg-pastille.est-bouton { cursor: pointer; }
.jg-pastille.est-bouton:hover { box-shadow: inset 0 0 0 1px currentColor; }
.jg-pastille.est-bouton:disabled { cursor: progress; }

/* 7 · Les états d'attente et de vide, dans la table comme hors d'elle. */
.jg-attente, .jg-vide { padding: 24px 14px; color: var(--et-muted); text-align: center; line-height: 1.55; }
.jg-vide .btn-link { padding: 0 4px; font-size: inherit; vertical-align: baseline; }

/* 8 · Le contrôle de séquence : une carte par journal, liseré à gauche selon le
      verdict. L'ambre n'apparaît pas — un journal est continu, troué, illisible ou
      muet, et aucun de ces états n'est « à surveiller ». */
.jg-souches { padding: 14px; }
.jg-intro { max-width: 760px; margin: 0 0 14px; color: var(--et-muted); font-size: var(--et-fs-cell); line-height: 1.55; }

.jg-souche {
    margin-bottom: 10px;
    padding: 11px 14px;
    background: var(--et-surface);
    border: 1px solid var(--et-hairline);
    border-left: 3px solid var(--et-inerte);
}

.jg-souche.est-ok     { border-left-color: var(--et-succes); }
.jg-souche.est-grave  { border-left-color: var(--et-danger); }
.jg-souche.est-neutre { border-left-color: var(--et-neutre); }
.jg-souche.est-muet   { border-left-color: var(--et-inerte); }
.jg-souche.est-muet .lib, .jg-souche.est-muet .plage { color: var(--et-faint); }

.jg-souche-tete { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.jg-souche-tete .lib { color: var(--et-ink); font-size: var(--et-fs-cell); font-weight: 600; }
.jg-souche-tete .plage { color: var(--et-muted); font-family: var(--et-font-mono); font-size: 12px; }
.jg-souche-tete .verdict { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font-size: 12px; font-weight: 600; white-space: nowrap; }
.jg-souche.est-ok .verdict     { color: var(--et-succes-ink); }
.jg-souche.est-grave .verdict  { color: var(--et-danger-ink); }
.jg-souche.est-neutre .verdict { color: var(--et-neutre); }
.jg-souche.est-muet .verdict   { color: var(--et-faint); }

.jg-souche-note { margin-top: 6px; color: var(--et-muted); font-size: 12px; line-height: 1.45; }

.jg-trous { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.jg-trous-n { color: var(--et-muted); font-size: 12px; }

/* Un trou de numérotation : son numéro en mono, son compte à côté — « n° 41 à 47 »
   sans le nombre laisse compter de tête. */
.jg-trou { display: flex; align-items: baseline; gap: 10px; font-size: 12px; }
.jg-trou .n { font-family: var(--et-font-mono); font-weight: 600; color: var(--et-danger-ink); }
.jg-trou .q { color: var(--et-muted); }

/* La cause d'un numéro manquant (.cpta-cause) vient de easycompta-sequence.css : deux
   écrans la disent, elle est montée en feuille de module. */

/* 9 · Le pied : les deux contrôles de l'état, collants sur une longue liste. */
.jg-pied {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 8px 14px;
    background: var(--et-surface-2);
    border-top: 2px solid var(--et-filet-fort);
}

.jg-pied-g { color: var(--et-muted); font-size: 12px; }
.jg-pied-d { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }

/* 10 · Le message qui passe. Un panneau flottant prend --et-ombre-flottant. */
.jg-toast {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1080;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 420px;
    padding: 12px 14px;
    background: var(--et-surface);
    border: 1px solid var(--et-hairline);
    border-left: 3px solid var(--et-succes);
    box-shadow: var(--et-ombre-flottant);
    color: var(--et-ink);
    font-size: var(--et-fs-cell);
    line-height: 1.45;
}

.jg-toast > .bi { color: var(--et-succes-ink); }
.jg-toast-x { margin-left: 4px; padding: 0 4px; background: transparent; border: 0; color: var(--et-muted); font-size: 14px; line-height: 1; cursor: pointer; }

/* 11 · Paliers. Échelle retenue de docs/conventions-responsive.md. */
@media (max-width: 1024px) {
    .jg-champ.est-plein { flex-basis: 100%; }
    .jg-c-orig { display: none; }
    .jg-table .jg-orig { display: none; }
}

@media (max-width: 720px) {
    .jg-filtres { padding: 8px 10px; }
    .jg-champ.est-court, .jg-champ.est-moyen, .jg-champ.est-date, .jg-champ.est-large { width: calc(50% - 5px); }
    .jg-souche-tete .verdict { margin-left: 0; width: 100%; }
    .jg-pied-d { margin-left: 0; }
}

@media (max-width: 640px) {
    .jg-seg > button { padding: 0 9px; }
}

/* 12 · Impression : la vue telle qu'elle est filtrée, sans ses commandes. Les
      tailles d'impression sont hors de l'échelle d'écran. */
@media print {
    .jg-filtres, .jg-pied, .jg-toast, .jg-seg, .jg-bandeau-a, .jg-bandeau-x { display: none !important; }
    .jg-page { border: 0; }
    .jg-table thead th { position: static; }
    .jg-table tbody tr.jg-piece.est-visee td { background: transparent; }
}