/*  etats-financiers.css — le lot SYS (états financiers).

    UNE FEUILLE DE LOT, ET NON CINQ FEUILLES D'ÉCRAN, POUR CE QUI EST COMMUN
    Le §6.3 du contrat de recréation dit qu'une classe employée par deux écrans
    ou plus remonte au gabarit — jamais l'inverse, sinon un écran finit par
    dépendre de la feuille d'un autre pour s'afficher. Le panneau de contrôles
    (`.ce-*`) est monté par quatre écrans du lot ; la bande de comparaison N/N-1
    par trois. Ils vivent donc ici, chargée avant les feuilles d'écran, comme
    easycompta-vignette.css l'est pour les indicateurs.

    Aucune couleur littérale : les verdicts passent en style depuis
    ControlesEtatsFinanciers, qui rend des jetons. */

/* 1 · Le panneau des contrôles inter-états. */
.ce-controle {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 8px 10px;
    margin-bottom: 6px;
    background: var(--et-surface-2);
    border-left: 3px solid var(--et-hairline);
    font-size: var(--et-fs-cell);
}

.ce-controle:last-child { margin-bottom: 0; }

.ce-controle.est-ok { border-left-color: var(--et-succes-ink); }
.ce-controle.est-ok > i { color: var(--et-succes-ink); }

.ce-controle.est-alerte { border-left-color: var(--et-avertissement-ink); }
.ce-controle.est-alerte > i { color: var(--et-avertissement-ink); }

.ce-controle.est-bloquant { border-left-color: var(--et-danger-ink); }
.ce-controle.est-bloquant > i { color: var(--et-danger-ink); }

.ce-controle.est-indisponible { border-left-color: var(--et-inerte); }
.ce-controle.est-indisponible > i { color: var(--et-inerte); }

.ce-controle .t { font-weight: 600; }

/* La comparaison elle-même : deux membres et leur relation, en chasse fixe pour
   que les chiffres s'alignent verticalement d'un contrôle à l'autre. */
.ce-controle .cmp {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 2px;
    font-family: var(--et-font-mono);
    font-size: 12px;
    color: var(--et-ink);
}

.ce-controle .cmp .rel {
    font-weight: 700;
    color: var(--et-muted);
}

.ce-controle .d {
    margin-top: 2px;
    font-size: 12px;
    color: var(--et-muted);
}

.ce-pastille {
    padding: 1px 7px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* 2 · La variation N/N-1, commune au bilan, au compte de résultat et au tableau
      des flux. Le SIGNE n'est pas une couleur : une charge qui augmente est un
      chiffre en hausse et une mauvaise nouvelle, une charge qui baisse l'inverse.
      Colorer la hausse en rouge partout mentirait une ligne sur deux. Seule la
      chasse fixe est imposée ici. */
.ef-var {
    font-family: var(--et-font-mono);
    font-size: 12px;
    white-space: nowrap;
}

.ef-var .fl { color: var(--et-muted); }

/* 3 · Le panneau de détail d'un poste, monté par le bilan, le compte de résultat
      et le tableau des flux. */
.ef-detail-colle {
    position: sticky;
    top: 8px;
}

.ef-detail-tete {
    padding: 10px 12px;
    border-bottom: 1px solid var(--et-hairline);
}

.ef-detail-tete .ref {
    font-family: var(--et-font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--et-muted);
}

.ef-detail-tete .titre {
    font-size: var(--et-fs-tete);
    font-weight: 600;
    line-height: 1.25;
}

.ef-detail-tete .montant {
    font-family: var(--et-font-mono);
    font-size: 20px;
    font-weight: 600;
    margin-top: 2px;
}

.ef-detail-tete .prec {
    font-size: 12px;
    color: var(--et-muted);
}

.ef-note {
    padding: 7px 10px;
    margin: 8px 12px;
    background: var(--et-surface-2);
    border-left: 3px solid var(--et-form-blue);
    font-size: var(--et-fs-cell);
}

.ef-note .t {
    display: block;
    font-family: var(--et-font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--et-form-blue);
    margin-bottom: 2px;
}

/* 4 · Paliers. Échelle retenue de docs/conventions-responsive.md. Sous 1024 px le
      détail cesse d'être collant : empilé sous le tableau, il masquerait ce qu'il
      sert. */
@media (max-width: 1024px) {
    .ef-detail-colle { position: static; }
    .ce-controle { flex-wrap: wrap; }
}