/* ===========================================================================
   EASYDSF — FEUILLE DE MODULE (.dsf-*)
   Passation : docs/passation-easydsf/ (2026-09-23), charte : 03-charte-et-composants.md.

   POURQUOI UNE FEUILLE DE MODULE
     Les huit écrans du lot 1 partagent presque tout ce qui leur est propre : le
     parcours du dossier (huit étapes), la table de liasse (codes REF, rubriques,
     totaux, montants entre parenthèses), la grille de note, la ligne de contrôle.
     Huit feuilles d'écran en auraient été huit copies — c'est la règle « une classe
     de deux écrans remonte » qui décide, comme pour easypaie.css et easyconso.css.
     Tout le reste vient du gabarit : cartes, boutons, pastilles, bandeaux, champs
     (.mx-*, modele-erp.css) et en-tête d'écran (.ecran-*, easytime-shell.css).

   AUCUNE COULEUR LITTÉRALE : tout est jeton --et-*, le thème sombre suit.
   Aucun bouton orange ici : l'unique .mx-btn-cta de chaque écran est dans sa page.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. LE PARCOURS DU DOSSIER — huit étapes, de la création au dépôt.
   Des liens, pas un assistant : le préparateur va et vient entre le mapping, les
   états et les notes ; c'est la génération qui juge, pas le fil.
   --------------------------------------------------------------------------- */
.dsf-parcours {
    display: flex; flex-wrap: wrap; gap: 0;
    margin: -8px 0 16px; border-bottom: 1px solid var(--et-hairline);
    background: var(--et-surface);
}
.dsf-parcours a {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px;
    font-size: 13px; color: var(--et-muted); text-decoration: none; white-space: nowrap;
}
.dsf-parcours a:hover { color: var(--et-form-blue-d); background: var(--et-tint); }
.dsf-parcours a.est-actif { color: var(--et-ink); font-weight: 600; border-bottom-color: var(--et-form-blue); }
.dsf-parcours-code { font-family: var(--et-font-mono); font-size: 12px; color: var(--et-faint); }
.dsf-parcours a.est-actif .dsf-parcours-code { color: var(--et-form-blue-encre); }

/* ---------------------------------------------------------------------------
   2. LA TABLE DE LIASSE — ETA-01, ETA-02 et la grille des notes.
   En-tête ardoise comme tous les tableaux de la liasse (charte) ; codes REF en
   mono ; rubriques et totaux en capitales grasses, postes en casse de phrase ;
   montants à droite, chiffres tabulaires, négatifs entre parenthèses.
   --------------------------------------------------------------------------- */
.dsf-liasse { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 13px; color: var(--et-ink); }
.dsf-liasse th {
    padding: var(--et-cellule-tete-y) 10px; text-align: left; white-space: nowrap;
    background: var(--et-table-head); color: var(--et-sur-ardoise-plein);
    font-family: var(--et-font-mono); font-size: 12px; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase;
}
.dsf-liasse th.est-montant { text-align: right; }
.dsf-liasse td { padding: var(--et-cellule-y) 10px; border-bottom: 1px solid var(--et-hairline); vertical-align: middle; }
.dsf-liasse td.est-montant {
    text-align: right; white-space: nowrap;
    font-family: var(--et-font-mono); font-variant-numeric: tabular-nums;
}
.dsf-liasse tr.est-total td { background: var(--et-repos-bg); font-weight: 700; }
.dsf-liasse tr.est-total td.dsf-libelle { text-transform: uppercase; }
.dsf-liasse tbody tr.est-cliquable { cursor: pointer; }
.dsf-liasse tbody tr.est-cliquable:hover td { background: var(--et-survol); }
.dsf-liasse tbody tr.est-retenu td { background: var(--et-tint); }
.dsf-liasse tr.est-ecart td { box-shadow: inset 0 -2px 0 var(--et-danger); }
.dsf-libelle-note { display: block; margin-top: 2px; font-size: 12px; color: var(--et-muted); }

/* Le code REF : une pastille mono sur fond calme — il se lit comme une adresse. */
.dsf-ref {
    display: inline-block; min-width: 34px; padding: var(--et-badge-py) var(--et-badge-px); text-align: center;
    font-family: var(--et-font-mono); font-size: 12px; font-weight: 600;
    background: var(--et-surface-2); border: 1px solid var(--et-hairline); color: var(--et-ink);
}

/* Cellule de note : à saisir = champ blanc bordé ; calculée = fond de repos, non modifiable. */
.dsf-liasse td.est-saisie { padding: calc(var(--et-cellule-y) - 1px) 6px; }   /* 3 / 9 / 15 px (lot AM6) */
.dsf-liasse td.est-saisie .mx-input { height: calc(var(--et-champ-grille-h) + var(--et-champ-grille-sup, 0px)); text-align: right; font-family: var(--et-font-mono); }
.dsf-liasse td.est-calcule { background: var(--et-repos-bg); }

/* ---------------------------------------------------------------------------
   3. LA LIGNE DE CONTRÔLE — CTL-01, BAL-01, DEP-01.
   Code en pastille mono, libellé et phrase d'écart, statut à droite : jamais la
   couleur seule, toujours glyphe + mot (✓ Conforme, ! À vérifier, × Bloquant).
   --------------------------------------------------------------------------- */
.dsf-controles { margin: 0; padding: 0; list-style: none; }
.dsf-controle {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 11px 16px; border-bottom: 1px solid var(--et-hairline);
}
.dsf-controle:last-child { border-bottom: 0; }
.dsf-controle-txt { flex: 1; min-width: 0; }
.dsf-controle-lbl { font-weight: 600; }
.dsf-controle-msg { margin-top: 2px; font-size: 13px; color: var(--et-muted); }
.dsf-controle-msg.est-ecart { font-family: var(--et-font-mono); color: var(--et-danger-ink); }
.dsf-controle .mx-pastille { flex: none; }

/* ---------------------------------------------------------------------------
   4. GRILLES DE CARTES — deux balances côte à côte, un fichier et son accusé.
   --------------------------------------------------------------------------- */
.dsf-deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.dsf-fichier {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 14px; border: 1px solid var(--et-hairline); background: var(--et-surface);
}
.dsf-fichier-nom { font-weight: 700; word-break: break-all; }
.dsf-fichier-meta { margin-top: 2px; font-size: 12px; color: var(--et-muted); }
.dsf-empreinte { font-family: var(--et-font-mono); font-size: 12px; color: var(--et-muted); word-break: break-all; }

/* Choix exclusif en carte (régime, source) : .mx-case-radio pour la marque, ceci pour le cadre. */
.dsf-choix {
    display: flex; align-items: flex-start; gap: 10px; width: 100%;
    padding: 14px 16px; text-align: left;
    background: var(--et-surface); border: 1px solid var(--et-hairline); color: var(--et-ink);
}
.dsf-choix.est-retenu { border: 2px solid var(--et-form-blue); padding: 13px 15px; }
.dsf-choix:disabled { color: var(--et-inerte); cursor: not-allowed; }
.dsf-choix-titre { font-weight: 700; }
.dsf-choix-sous { margin-top: 3px; font-size: 13px; color: var(--et-muted); }

/* ---------------------------------------------------------------------------
   5. PALIERS — retenus dans l'échelle du dépôt (docs/conventions-responsive.md).
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .dsf-parcours a { min-height: 44px; }
    .dsf-deux { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .dsf-parcours { flex-wrap: nowrap; overflow-x: auto; }
    .dsf-controle { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------------------
   6. PLAUSIBILITÉ — CTL-02 (lot 2).
   Un poste « à examiner » est signalé par une marque à gauche, pas par un fond :
   la ligne reste lisible sous le survol et la sélection, et le mot est dans sa
   pastille (jamais la couleur seule).
   --------------------------------------------------------------------------- */
.dsf-liasse tr.est-signale td:first-child { box-shadow: inset 3px 0 0 var(--et-info); }

/* ---------------------------------------------------------------------------
   7. ÉDITION ET DÉPÔT — DEP-02, DEP-04 (lot 2).
   Le sommaire de la PDF numérote ses entrées comme la pile de l'imprimé ;
   l'aperçu prend la hauteur de la fenêtre moins ce qui l'entoure, jamais une
   fraction d'écran devinée.
   --------------------------------------------------------------------------- */
.dsf-sommaire { margin: 0; padding: 10px 16px 12px 40px; font-size: 13px; }
.dsf-sommaire li { padding: 3px 0; border-bottom: 1px solid var(--et-hairline); }
.dsf-sommaire li:last-child { border-bottom: 0; }
.dsf-apercu { display: block; width: 100%; height: calc(100vh - 260px); min-height: 480px; border: 0; }
.dsf-etapes { margin: 0; padding: 12px 16px 12px 36px; }
.dsf-etapes li { padding: 3px 0; }

/* ---------------------------------------------------------------------------
   8. MODE CABINET — PIL-01 (lot 2).
   L'avancement d'un dossier : quatre marches, faites, en cours, à venir. L'état
   est dit par la forme (fond plein, cadre, rien) autant que par la couleur, et
   le mot de la marche reste écrit dans les trois cas.
   --------------------------------------------------------------------------- */
.dsf-avance { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 12px; }
.dsf-avance li { padding: 2px 6px; border: 1px solid transparent; color: var(--et-muted); white-space: nowrap; }
.dsf-avance li.est-fait { background: var(--et-tint); color: var(--et-form-blue-encre); font-weight: 600; }
.dsf-avance li.est-courant { border-color: var(--et-avertissement-mark); color: var(--et-avertissement-ink); font-weight: 600; }
/* Une tuile qui mène à un écran (« parcourir la liasse ») : la tuile du gabarit, cliquable. */
a.dsf-tuile-lien { display: block; color: var(--et-ink); text-decoration: none; }
a.dsf-tuile-lien:hover { background: var(--et-survol); }
a.dsf-tuile-lien:focus-visible { outline: 2px solid var(--et-form-blue); outline-offset: 1px; }

/* ---------------------------------------------------------------------------
   9. DISCUSSIONS — COL-01 (lot 2).
   Un fil de messages sur fond de repos, chacun séparé d'un filet ; la date et le
   montant alors affiché en second rang. La liste réutilise la ligne de contrôle.
   --------------------------------------------------------------------------- */
.dsf-controle.est-cliquable { cursor: pointer; }
.dsf-controle.est-cliquable:hover { background: var(--et-survol); }
.dsf-controle.est-retenu { background: var(--et-tint); box-shadow: inset 3px 0 0 var(--et-form-blue); }
.dsf-fil { padding: 8px 16px; }
.dsf-message { padding: var(--et-alerte-py) 12px; margin: 8px 0; background: var(--et-surface-2); border-left: 3px solid var(--et-hairline); }
.dsf-message-tete { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.dsf-message-meta { font-size: 12px; color: var(--et-muted); }
.dsf-message-texte { margin-top: 4px; white-space: pre-wrap; word-break: break-word; }
.dsf-redaction { border-top: 1px solid var(--et-hairline); }
/* La pastille d'un poste commenté, dans les états : un lien vers sa discussion. */
a.dsf-pastille-discussion { margin-left: 6px; text-decoration: none; }

/* ---------------------------------------------------------------------------
   10. CIRCUIT — COL-03 (lot 3).
   Le nom de qui a franchi l'étape tient dans la tuile : il n'a pas la taille
   d'un montant.
   --------------------------------------------------------------------------- */
.dsf-etape-nom { font-size: 14px; font-weight: 700; font-family: inherit; }

/* ---------------------------------------------------------------------------
   11. ANALYSES — résultat fiscal, score de risque, soldes de gestion (lot 3, 3C).
   Une rubrique d'un état (« II — Réintégrations ») : un titre, pas un total.
   La note sous une tuile dit d'où vient le chiffre (base × taux) : une glose de
   méthode, que la doctrine garde (docs/glose.md § 2).
   --------------------------------------------------------------------------- */
.dsf-liasse tr.est-rubrique td { padding-top: var(--et-cellule-total-y); font-weight: 700; color: var(--et-muted); font-size: 12px; text-transform: uppercase; }
.appgrid .dsf-ind-note { margin-top: 4px; font-size: 12px; color: var(--et-muted); }
.appgrid .dsf-actions { font-size: 14px; }