/* ===========================================================================
   EASYCONSO — FEUILLE DE MODULE (.cso-*)
   Passation : docs/modeles/design_handoff_module_consolidation/ (2026-08-23).

   POURQUOI UNE FEUILLE DE MODULE ET NON TRENTE-UNE FEUILLES D'ÉCRAN
     La règle du dépôt est « un écran, une feuille » (CLAUDE.md), et elle a une
     raison : trente branches qui ajoutent un écran se télescopaient sur la
     dernière ligne de modele-erp.css. Elle a aussi une exception écrite —
     « une classe utilisée par deux écrans ou plus remonte dans le gabarit ».
     Ici, presque tout est partagé : le rendu « état édité » sert à ETA-01,
     ETA-02 et ETA-03 ; le fil de descente à six écrans ; la pastille de méthode
     à onze. Trente-et-une feuilles auraient donc surtout produit trente-et-une
     copies de la même règle.

     Et remonter tout cela dans le gabarit serait un changement de NOYAU pour
     un besoin d'un seul module. D'où le précédent easypaie.css : une feuille
     par module, préfixe propre, ses propres paliers responsive. C'est le
     troisième cas du dépôt et il est traité comme les deux autres.

   AUCUNE COULEUR LITTÉRALE. Tout passe par les jetons --et-* de
   easytech-theme.css, donc le thème sombre suit sans une ligne de plus.

   *** UN JETON DE LA PASSATION N'EXISTE PAS SOUS CE NOM ***
     La passation nomme « --et-struct » (#354A5F) la teinte des intitulés de
     section. Le dépôt la porte depuis le 2026-08-17 sous le nom
     « --et-table-head », même valeur exactement. On emploie le nom du DÉPÔT :
     déclarer un alias --et-struct donnerait deux noms pour une teinte, et le
     jour où l'un bouge l'autre ne suivrait pas.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. MONTANTS, RÉFÉRENCES, COMPTES
   « Tous les montants sont en chiffres tabulaires, alignés à droite. C'est non
   négociable : un état consolidé se lit en colonne. » (passation)

   font-variant-numeric: tabular-nums est ce qui fait tenir la colonne : sans
   lui, un « 1 » plus étroit qu'un « 8 » désaligne les unités d'une ligne à
   l'autre, et l'œil ne peut plus additionner de haut en bas.
   --------------------------------------------------------------------------- */
.cso-mono {
    font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

.cso-montant {
    font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

/* Un montant négatif n'est pas une alerte : au bilan consolidé, un
   amortissement cumulé est négatif par nature. Il est seulement DISTINGUÉ,
   par la teinte de texte affaibli, jamais par le rouge de danger — sinon la
   moitié d'un bilan crie. */
.cso-montant.est-negatif { color: var(--et-ink); }
.cso-montant.est-nul { color: var(--et-inerte); }

/* ---------------------------------------------------------------------------
   2. MENTION D'UNITÉ
   « Chaque écran chiffré affiche son unité en clair. À reprendre tel quel —
   c'est la première source d'erreur de lecture. » (passation)

   Elle est en TÊTE de la table et non en pied : on lit l'unité avant les
   chiffres, ou on ne la lit pas.
   --------------------------------------------------------------------------- */
.cso-unite {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--et-hairline);
    background: var(--et-surface-3);
    color: var(--et-muted);
    font-size: 12px;
    font-weight: 600;
}

.cso-unite .bi { color: var(--et-faint); }

/* ---------------------------------------------------------------------------
   3. RENDU « ÉTAT ÉDITÉ » — ETA-01, ETA-02, ETA-03
   « Rendu état comptable : padding serré 4 px 8 px, filet bas --et-rang sur
   chaque ligne, libellés de total en 700, montants tabulaires à droite. Pas de
   pastille superflue : c'est un document, pas un tableau de bord. »

   C'est le seul endroit du module où l'on s'écarte du gabarit de liste, et
   c'est délibéré : un bilan consolidé n'est pas une liste d'objets qu'on trie
   et sélectionne, c'est une page qu'on lit et qu'on signe.
   --------------------------------------------------------------------------- */
.cso-etat {
    width: 100%;
    border-collapse: collapse;
    background: var(--et-surface);
    font-size: 13px;
}

.cso-etat > thead > tr > th {
    padding: 6px 8px;
    border-bottom: 1px solid var(--et-filet-fort);
    background: var(--et-surface-2);
    color: var(--et-table-head-encre);
    font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
}

.cso-etat > thead > tr > th.est-montant { text-align: right; }

/* *** LE REMBOURRAGE VERTICAL PASSE PAR --et-cellule-y, IL N'EST PAS EN DUR ***
   La passation demande « padding serré 4 px 8 px » pour l'état édité, et par
   ailleurs trois densités réglables (compacte 4 px, confortable 9 px, tactile
   14 px). Ce sont la MÊME valeur au palier compact : le 4 px de l'état édité EST
   la densité compacte.

   Le figer à 4 px aurait rouvert exactement la divergence que le dépôt a fermée
   le 2026-08-23 (« Densité des listes : trois paliers ») : deux familles de
   tableaux affichant des hauteurs différentes pour le même écran, dont une seule
   suit le réglage de la coquille. Un consolideur qui passe sa tablette en tactile
   verrait ses listes s'ouvrir et ses états rester serrés, sans comprendre
   pourquoi.

   La densité de la coquille (--et-cellule-y, easytech-theme.css, posée par
   ShellModule via .appgrid[data-densite]) s'applique donc ici aussi. Ce qui fait
   de cette table un DOCUMENT n'est pas un rembourrage immuable : ce sont les
   filets par ligne, les totaux en 700 et l'absence de pastille. */
.cso-etat > tbody > tr > td {
    padding: var(--et-cellule-y) 8px;
    border-bottom: 1px solid var(--et-rang);
    vertical-align: baseline;
}

/* Une ligne de TOTAL : libellé en 700, filet haut plus marqué. Elle ne change
   pas de fond — un état comptable n'a pas de bandes de couleur, il a une
   hiérarchie typographique. */
.cso-etat > tbody > tr.est-total > td {
    border-top: 1px solid var(--et-filet-fort);
    font-weight: 700;
}

/* Les rubriques de niveau 1 (ACTIF IMMOBILISÉ, CAPITAUX PROPRES) : capitales
   et graisse, comme dans le document imprimé. */
.cso-etat > tbody > tr.est-rubrique > td:first-child {
    color: var(--et-table-head-encre);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cso-etat td.est-montant {
    font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.cso-etat td.est-poste { color: var(--et-muted); }
.cso-etat td.est-note { color: var(--et-faint); }

/* Le retrait d'un poste sous sa rubrique : deux niveaux suffisent, au-delà un
   état devient un arbre et cesse de se lire en colonne. */
.cso-etat td.niveau-2 { padding-left: 22px; }
.cso-etat td.niveau-3 { padding-left: 36px; }

/* ---------------------------------------------------------------------------
   4. TABLES LARGES — CE QUE CETTE FEUILLE NE FAIT PAS
   « Première colonne collante sur fond opaque : indispensable, les tables de
   cumul et de bilan défilent horizontalement sur 6 à 9 colonnes de montants. »

   *** LE MÉCANISME EXISTE DÉJÀ, ON NE LE RÉÉCRIT PAS ***
     wwwroot/css/lot03-tables-larges.css fige la colonne d'ancrage d'une table
     à partir d'une classe et d'un attribut : « .tbl-ancree » + data-ancre="N".
     Il porte déjà le fond opaque --et-surface, la garde :not([colspan]) pour
     les rangées fusionnées, et le rang variable pour les tables dont la
     première colonne est une case à cocher.

     Le recopier ici en « .cso-collante » aurait donné deux implémentations du
     même effet, dont une seule connue de docs/tables-larges.md et de
     tools/paliers-responsive.ps1. Les écrans de cumul et de bilan emploient
     donc « tbl-ancree », et cette section n'existe que pour dire où regarder.

   Reste à la charge de cette feuille : la largeur minimale par table, qui
   dépend du nombre de colonnes de montants et n'est donc pas générique.
   --------------------------------------------------------------------------- */
.cso-large { overflow-x: auto; }
.cso-large > table { min-width: 1080px; }
.cso-large.est-tres-large > table { min-width: 1320px; }

/* ---------------------------------------------------------------------------
   5. FIL DE DESCENTE — ETA-01, ETA-02, ETA-03, ETA-05, ADM-02, CUM-01
   « Depuis n'importe quel montant d'un état, remonter jusqu'au fichier déposé
   par l'entité. Elle doit garder le contexte (poste, entité, exercice) à
   chaque saut. »

   Rendu comme un fil PERSISTANT et non comme un fil d'Ariane : un fil d'Ariane
   dit où l'on est, celui-ci dit où l'on peut descendre. D'où les cinq maillons
   toujours visibles, celui de l'écran courant marqué.
   --------------------------------------------------------------------------- */
.cso-descente {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 10px;
    border: 1px solid var(--et-hairline);
    background: var(--et-surface-3);
    font-size: 12px;
}

.cso-descente-lbl {
    margin-right: 4px;
    color: var(--et-faint);
    font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.cso-descente a {
    padding: 2px 6px;
    border: 1px solid transparent;
    color: var(--et-form-blue-encre);
    font-weight: 600;
    text-decoration: none;
}

.cso-descente a:hover {
    border-color: var(--et-repos-bord);
    background: var(--et-tint);
    color: var(--et-form-blue-d);
    text-decoration: none;
}

.cso-descente .est-courant {
    padding: 2px 6px;
    background: var(--et-tint);
    color: var(--et-ink);
    font-weight: 600;
}

.cso-descente .sep { color: var(--et-inerte); }

/* ---------------------------------------------------------------------------
   6. ASSISTANT DE BOUCLAGE — BCL-01
   Sept étapes, l'étape bloquante mise en avant. L'état d'une étape est un
   CONSTAT (voir ConsoBouclageService) : le rendu n'a donc que trois cas à
   distinguer, et pas de « en attente de validation ».
   --------------------------------------------------------------------------- */
.cso-etapes {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border: 1px solid var(--et-hairline);
    background: var(--et-surface);
}

.cso-etape {
    flex: 1 1 140px;
    min-width: 140px;
    padding: 10px 12px;
    border-right: 1px solid var(--et-hairline);
    background: var(--et-surface);
}

.cso-etape:last-child { border-right: 0; }

.cso-etape-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-bottom: 6px;
    background: var(--et-piste);
    color: var(--et-muted);
    font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    font-weight: 700;
}

.cso-etape-lbl { color: var(--et-ink); font-size: 13px; font-weight: 600; }
.cso-etape-detail { margin-top: 2px; color: var(--et-muted); font-size: 12px; }

.cso-etape.est-achevee { background: var(--et-succes-bg); }
.cso-etape.est-achevee .cso-etape-num { background: var(--et-ok); color: var(--et-surface); }

/* L'étape COURANTE porte un liseré bas épais : c'est là qu'on travaille. */
.cso-etape.est-courante { border-bottom: 3px solid var(--et-form-blue); }
.cso-etape.est-courante .cso-etape-num { background: var(--et-form-blue); color: var(--et-surface); }

/* L'étape BLOQUÉE est la seule qui prenne le fond d'avertissement : la
   passation demande « l'étape bloquante mise en avant », au singulier. */
.cso-etape.est-bloquee { background: var(--et-danger-badge-bg); }
.cso-etape.est-bloquee .cso-etape-num { background: var(--et-danger); color: var(--et-surface); }
.cso-etape.est-bloquee .cso-etape-detail { color: var(--et-danger-ink); font-weight: 600; }

/* ---------------------------------------------------------------------------
   7. PASTILLE DE MÉTHODE — IG / IP / ME
   La méthode conditionne tous les écrans en aval : elle est donc rendue de la
   même façon partout, et la couleur porte un sens fixe —
   IG conforme (vert), IP et ME avertissement (orange, parce qu'elles
   demandent une lecture particulière du cumul), société mère et sortie neutres.
   --------------------------------------------------------------------------- */
.cso-methode {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.cso-methode.est-ig { background: var(--et-succes-bg); color: var(--et-ok); }
.cso-methode.est-ip,
.cso-methode.est-me { background: var(--et-avertissement-bg); color: var(--et-avertissement-ink); }
.cso-methode.est-mere { background: var(--et-piste); color: var(--et-muted); }
.cso-methode.est-sortie { background: var(--et-danger-badge-bg); color: var(--et-danger-ink); }

/* Les deux pourcentages côte à côte. Ils sont TOUJOURS affichés tous les deux
   (règle métier 2) : c'est ce qui permet de voir que le partage n'a pas pris
   le mauvais. */
.cso-pourcents { display: inline-flex; gap: 10px; }
.cso-pourcents .est-controle { color: var(--et-muted); }
.cso-pourcents .est-interet { color: var(--et-ink); font-weight: 600; }

/* ---------------------------------------------------------------------------
   8. ENCART D'AUTO-DÉDUCTION — ELI-01, et le principe partout
   « Le système propose, l'utilisateur ne saisit que l'exception. »
   Encart d'information, pas d'alerte : il annonce une économie de travail.
   --------------------------------------------------------------------------- */
.cso-auto {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--et-repos-bord);
    border-left: 3px solid var(--et-form-blue);
    background: var(--et-tint);
    color: var(--et-ink);
    font-size: 13px;
    line-height: 1.5;
}

.cso-auto .bi { margin-top: 2px; color: var(--et-form-blue-encre); }
.cso-auto strong { font-weight: 700; }

/* ---------------------------------------------------------------------------
   9. BANDE DE FAITS D'UN ÉTAT
   Les chiffres de tête d'un état édité (total du bilan, résultat net). Ils
   reprennent .mx-faits du gabarit ; cette section n'ajoute que l'alignement
   tabulaire, que le gabarit ne pouvait pas décider pour tout le monde.
   --------------------------------------------------------------------------- */
.cso-faits .mx-fait-val { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
   10. SÉLECTEUR DE PÉRIODE — COL-01, ETA-05, ADM-02
   Composant ConsoSelecteurExercice, posé dans la barre d'outils de la page
   (.mx-outils). Il remplace la pastille « Exercice 2025 — … » que ces écrans
   affichaient : la période cesse d'être une mention pour devenir un choix.

   LA LARGEUR EST ICI, PAS DANS LA PAGE
     Le libellé d'une option est long — « 2025 — Comptes annuels au 31/12/2025 »
     — et il l'est parce qu'un millésime seul ne distingue pas deux arrêtés du
     même exercice. La largeur qui le contient est une décision de feuille, pas
     de page : posée en style en ligne, elle échapperait aux paliers.
   --------------------------------------------------------------------------- */
.cso-periode {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Même traitement que le libellé du fil de descente : c'est la même fonction —
   nommer ce que la commande voisine contrôle, sans lui voler l'attention. */
.cso-periode-lbl {
    color: var(--et-faint);
    font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.cso-periode-select {
    max-width: 260px;
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   11. PALIERS — échelle retenue de docs/conventions-responsive.md
   560 / 640 / 720 / 1024 / 1100, et 641 en min-width. Rien d'autre.

   *** DEUX PALIERS DE LA PASSATION NE SONT PAS REPRIS ICI, ET C'EST ÉCRIT ***
     Elle demande « sous 1360 px le fil d'Ariane disparaît » et « sous 1240 px
     le nom du module disparaît de la barre ». Les deux portent sur la BARRE
     SUPÉRIEURE, c'est-à-dire sur la coquille partagée par les quinze modules —
     rail-lateral.css y masque déjà ses propres libellés à 1360 px. Les poser
     dans une feuille de module ferait deux choses fausses à la fois :
     introduire deux paliers hors échelle (le commit du 2026-08-23 les a
     justement recensés comme tels), et faire décider par EasyConso de
     l'apparence d'une barre qui ne lui appartient pas.

     Le fil d'Ariane des pages, lui, cède à 1100 px — le palier de l'échelle
     où le titre passe déjà sous les filtres. C'est un palier plus tardif que
     1360, donc un compromis : le fil reste visible entre 1100 et 1360 px.
     L'arbitrage est porté dans docs/module-conso-integration.md ; il se tranche
     dans la coquille, pas ici.

   *** ET LES ÉTATS ÉDITÉS NE SE DÉGRADENT PAS ***
     « Les états édités (ETA-01/02/03) ne se dégradent pas en dessous de
     1100 px : conserver le défilement horizontal plutôt que d'empiler les
     colonnes de montants. » Un bilan dont les colonnes s'empilent n'est plus
     un bilan — on ne peut plus comparer 30/06 à 31/12. D'où l'absence de toute
     règle qui toucherait .cso-etat sous 1100 px : le défilement reste.
   --------------------------------------------------------------------------- */

@media (max-width: 1100px) {
    /* Le fil d'Ariane cède avant le titre : il est le moins porteur des deux. */
    .cso-fil-page { display: none; }

    /* Le fil de DESCENTE, lui, reste : c'est la fonction la plus utilisée en
       revue, et une revue se fait aussi sur un portable de 1024 px. Il passe
       seulement en défilement horizontal plutôt qu'en retour à la ligne, pour
       que l'ordre des cinq maillons reste lisible. */
    .cso-descente { flex-wrap: nowrap; overflow-x: auto; }

    .cso-etape { flex-basis: 50%; min-width: 0; }
}

@media (max-width: 1024px) {
    /* Règle tactile du dépôt (docs/cibles-tactiles.md) : sous 1024 px, aucune
       cible interactive sous 44 px, et une cible ne rétrécit jamais. Les
       maillons du fil de descente sont des liens, donc des cibles. */
    .cso-descente a,
    .cso-descente .est-courant { min-height: 44px; display: inline-flex; align-items: center; }
    .cso-descente { padding: 4px 8px; }

    /* Le sélecteur de période en est une aussi, et c'est la commande par
       laquelle on entre dans un exercice : la manquer coûte une consultation
       sur la mauvaise période. */
    .cso-periode-select { min-height: 44px; }
}

@media (max-width: 720px) {
    /* La grille dense passe en une colonne au même palier que le gabarit : les
       formulaires du module (COL-03, CAP-02, CAP-03, ADM-05) emploient .mx-form,
       qui le fait déjà. Ici, seuls les deux pourcentages se dépilent — côte à
       côte, ils ne tiennent plus dans une colonne de tableau. */
    .cso-pourcents { flex-direction: column; gap: 0; }

    .cso-etapes { display: block; }
    .cso-etape { border-right: 0; border-bottom: 1px solid var(--et-hairline); }
    .cso-etape:last-child { border-bottom: 0; }
}

@media (max-width: 560px) {
    /* Dernier palier de contenu : on rend les rembourrages, l'unité et le fil
       de descente passent en pile. */
    .cso-unite { flex-wrap: wrap; padding: 6px 8px; }
    .cso-auto { padding: 8px; }

    /* Le libellé « EXERCICE » cède, pas le sélecteur : « 2025 — Comptes annuels
       au 31/12/2025 » se passe d'être annoncé, et la barre d'outils n'a plus la
       place des deux. */
    .cso-periode-lbl { display: none; }
    .cso-periode-select { max-width: 100%; }
}

/* ===========================================================================
   IMPRESSION

   LA CHAÎNE DE DESCENTE NE S'IMPRIME PAS. `.cso-descente` n'est pas un fil
   d'Ariane — elle dit où l'on peut DESCENDRE depuis un état consolidé : poste
   d'état, tableau de passage, journal, cumul par entité, liasse d'origine.
   C'est une affordance de consultation, et elle n'a aucun sens sur du papier :
   cinq à six liens en tête d'un bilan, mesurés à la recette du 2026-09-11 sur
   les quatre états consolidés.

   Le bouton « Réessayer » du bandeau d'erreur part pour la même raison, mais PAS
   par cette règle-ci : il n'est pas dans les actions d'en-tête, il est dans un
   `.alert` Bootstrap. C'est `.alert .mx-btn` du gabarit (modele-erp.css) qui le
   retire — vérifié à la mesure, après l'avoir cru masqué à tort.
   =========================================================================== */
@media print {
    .cso-descente { display: none !important; }
}