/* ============================================================================
   ÉCRANS — LES CINQ ANALYSES COMPTABLES DESSINÉES ICI
   (CPT-12 résultat, CPT-13 charges, CPT-14 qualité, CPT-15 structure,
    CPT-17 recoupements ; CPT-16 « TVA et taxes » complète le rail de six)

   UNE SEULE FEUILLE POUR CINQ ÉCRANS, ET C'EST VOULU. Ce sont les onglets d'un
   même rail : ils partagent le titre de section, la note, le petit tableau de
   fenêtre et la jauge de poids. Cinq feuilles en auraient fait cinq copies —
   exactement ce que la règle du dépôt sur les classes partagées cherche à
   éviter. Chaque onglet garde son préfixe (.rm-, .cn-, .qe-, .sf-, .rc-),
   celui de sa maquette, pour ce qui n'appartient qu'à lui.

   LA SYNTHÈSE (.sy-) A REJOINT LA FEUILLE AU LOT 9 ET L'A QUITTÉE AVEC LE
   RETRAIT DU TABLEAU DE BORD COMPTABLE. Le rail n'a plus d'écran hôte : ce sont
   six analyses à égalité, dont cinq se dessinent ici.

   CE QUI N'EST PAS ICI : le rail d'onglets (.tbd-*, module easycompta-onglets),
   la vignette (.*-fait / .*-faits, module easycompta-vignette) et les fenêtres
   (.xp-*, module easycompta-modal).
   ========================================================================== */

/* ---- COMMUN AUX CINQ ONGLETS ------------------------------------------------ */

.appgrid .cpd-titre { display: flex; align-items: center; gap: 9px; margin: 18px 0 4px; padding-bottom: 5px; border-bottom: 2px solid var(--et-filet-fort); }
.appgrid .cpd-titre::before { content: ""; flex: none; width: 3px; height: 14px; background: var(--et-form-blue); }
.appgrid .cpd-titre span { font-family: var(--et-font-mono); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--et-table-head-encre); }
.appgrid .cpd-note { margin: 6px 0 10px; max-width: 94ch; font-size: 12px; line-height: 1.6; color: var(--et-muted); }
.appgrid .cpd-chip { display: inline-block; padding: 1px 7px; background: var(--et-surface-3); border: 1px solid var(--et-form-border); font-family: var(--et-font-mono); font-size: 12px; font-weight: 600; white-space: nowrap; }
.appgrid .cpd-ligne { cursor: pointer; }
.appgrid .cpd-ligne:hover { background: var(--et-surface-3); }

/* La jauge de poids : la part d'un poste dans son total. */
.appgrid .cpd-jauge { height: 5px; margin-top: 4px; background: var(--et-surface-3); }
.appgrid .cpd-jauge > i { display: block; height: 100%; }

.appgrid .cpd-paire, .xp-corps .cpd-paire { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }

/* ---- CPT-12 · RÉSULTAT ET MARGES ------------------------------------------- */
/* L'histogramme à double barre : produits en vert, charges en rouge, mois par
   mois. L'écart entre les deux EST le résultat du mois — et il se voit sans
   qu'on ait à le lire. */
.appgrid .rm-histo { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: end; gap: 8px; height: 180px; padding: 12px; background: var(--et-surface); border: 1px solid var(--et-hairline); }
.appgrid .rm-mois { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 5px; }
.appgrid .rm-paire { display: flex; align-items: flex-end; justify-content: center; gap: 3px; width: 100%; height: 100%; }
.appgrid .rm-produits { width: 40%; background: var(--et-succes); }
.appgrid .rm-charges { width: 40%; background: var(--et-danger); }
.appgrid .rm-mois > span { font-family: var(--et-font-mono); font-size: 12px; color: var(--et-muted); }
.appgrid .rm-legende { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; font-size: 12px; color: var(--et-muted); }
.appgrid .rm-legende i { display: inline-block; width: 11px; height: 11px; margin-right: 5px; vertical-align: -1px; }
/* Un solde PRINCIPAL se distingue d'un poste intermédiaire : c'est la marche
   qu'on lit, l'autre est le chemin pour y arriver. */
.appgrid .rm-principal td { font-weight: 700; background: var(--et-surface-3); }
/* Les largeurs de colonnes. Elles vivaient EN DUR dans le Razor (style="width:160px"
   sur chaque <th>) ; une largeur dans une page est ce que docs/conventions-responsive.md
   interdit, et c'est ici qu'un palier peut les relâcher. Exercice et N-1 sont deux
   montants de même largeur : une seule classe. Le détail d'un solde (fenêtre) a la
   sienne, plus étroite — deux largeurs, deux classes. Les td suivent leur th. */
.appgrid .rm-col-solde { min-width: 250px; }
.appgrid .rm-col-ref { width: 100px; }
.appgrid .rm-col-montant { width: 160px; text-align: right; }
.appgrid .rm-col-taux { width: 100px; text-align: right; }
.appgrid .rm-col-variation { width: 120px; text-align: right; }
.appgrid .rm-col-poids { min-width: 180px; }
.appgrid .rm-col-compte, .xp-corps .rm-col-compte { width: 110px; }
.appgrid .rm-col-montant-detail, .xp-corps .rm-col-montant-detail { width: 150px; }

/* ---- CPT-13 · CHARGES PAR NATURE ------------------------------------------- */
/* La barre de répartition : une seule ligne, un segment par classe de charge.
   Un camembert dirait la même chose en moins lisible et en plus de place. */
.appgrid .cn-repartition { display: flex; height: 26px; overflow: hidden; border: 1px solid var(--et-hairline); }
.appgrid .cn-segment { display: flex; align-items: center; justify-content: center; min-width: 0; font-family: var(--et-font-mono); font-size: 12px; font-weight: 600; color: var(--et-sur-aplat); white-space: nowrap; overflow: hidden; }
.appgrid .cn-legende { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; font-size: 12px; color: var(--et-muted); }
.appgrid .cn-legende i { display: inline-block; width: 11px; height: 11px; margin-right: 5px; vertical-align: -1px; }
/* La tendance : douze barres minuscules, la saisonnalité d'un compte en un coup d'œil. */
.appgrid .cn-tendance { display: flex; align-items: flex-end; gap: 1px; height: 22px; }
.appgrid .cn-tendance > i { display: block; flex: 1; min-width: 2px; background: var(--et-form-blue); }
/* La pastille de famille devant le nom d'une nature : sa couleur est celle de la
   famille, calculée — elle reste dans la page ; sa géométrie, non. */
.appgrid .cn-pastille { display: inline-block; width: 9px; height: 9px; margin-right: 6px; }
/* Les largeurs de colonnes des deux tableaux (comptes, postes budgétaires). Elles
   vivaient EN DUR dans le Razor (style="width:150px" sur chaque <th>) ; une largeur
   dans une page est ce que docs/conventions-responsive.md interdit, et c'est ici
   qu'un palier peut les relâcher. Exercice, Budget, Réalisé et Budget proratisé sont
   quatre montants de même largeur : une seule classe, de même pour les deux Écart.
   Le mois par mois de la fenêtre a la sienne. Les td suivent leur th. */
.appgrid .cn-col-compte { width: 110px; }
.appgrid .cn-col-poste { width: 120px; }
.appgrid .cn-col-libelle { min-width: 230px; }
.appgrid .cn-col-nature { min-width: 170px; }
.appgrid .cn-col-prefixe { width: 100px; }
.appgrid .cn-col-montant { width: 150px; text-align: right; }
.appgrid .cn-col-ecart { width: 140px; text-align: right; }
.appgrid .cn-col-tendance { width: 120px; }
.appgrid .cn-col-poids { width: 150px; }
.appgrid .cn-col-consommation { min-width: 170px; }
.appgrid .cn-col-mois, .xp-corps .cn-col-mois { width: 90px; }

/* ---- CPT-14 · QUALITÉ DES ÉCRITURES ---------------------------------------- */
/* Une anomalie est un BOUTON : elle mène là où elle se corrige. Le filet de
   gauche porte la gravité — bloquante, importante, mineure. */
.appgrid .qe-anomalie { display: flex; align-items: flex-start; gap: 11px; width: 100%; padding: 11px 13px; margin-bottom: 8px; background: var(--et-surface); border: 1px solid var(--et-hairline); border-left: 4px solid var(--et-inerte); text-align: left; cursor: pointer; font-family: inherit; }
.appgrid .qe-anomalie:hover { background: var(--et-surface-3); }
.appgrid .qe-anomalie.bloquante { border-left-color: var(--et-danger-ink); }
.appgrid .qe-anomalie.importante { border-left-color: var(--et-avertissement-mark); }
.appgrid .qe-anomalie.mineure { border-left-color: var(--et-inerte); }
/* Un contrôle PASSÉ reste affiché : « aucune pièce déséquilibrée » ne dit pas la
   même chose qu'un contrôle absent, et c'est ce qu'un dossier de clôture montre.
   Il est simplement rendu discret — le vert ne se dispute pas l'attention. */
.appgrid .qe-anomalie.ok { border-left-color: var(--et-succes-ink); opacity: .82; }
.appgrid .qe-anomalie > i { flex: none; margin-top: 2px; font-size: 15px; }
.appgrid .qe-anomalie .l { flex: 1; min-width: 0; }
.appgrid .qe-anomalie .l b { display: block; font-size: 13px; font-weight: 700; color: var(--et-ink); }
.appgrid .qe-anomalie .l span { display: block; font-size: 12px; color: var(--et-muted); line-height: 1.5; margin-top: 2px; }
.appgrid .qe-anomalie .c { flex: none; text-align: right; }
.appgrid .qe-anomalie .c b { display: block; font-family: var(--et-font-mono); font-size: 17px; font-weight: 600; }
.appgrid .qe-anomalie .c span { display: block; font-size: 12px; color: var(--et-muted); }

/* Les deux relevés de la saisie, côte à côte : par journal, puis par qui l'a
   ouverte. Ils ne jugent pas — ils situent. */
.appgrid .qe-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.appgrid .qe-colonne { background: var(--et-surface); border: 1px solid var(--et-hairline); padding: 12px; }
/* La jauge d'avancement de la comptabilisation : pleine quand le brouillard est vide. */
.appgrid .qe-jauge { height: 8px; margin: 6px 0 4px; background: var(--et-surface-3); border: 1px solid var(--et-hairline); }
.appgrid .qe-jauge > i { display: block; height: 100%; background: var(--et-succes); }
/* Les largeurs de colonnes. Elles vivaient EN DUR dans le Razor (style="width:150px"
   sur chaque <th>) ; une largeur dans une page est ce que
   docs/conventions-responsive.md interdit, et c'est ici qu'un palier peut les
   relâcher. Les td suivent leur th. Le relevé par journal est dans la page ; la
   référence et le montant d'un échantillon sont dans la fenêtre d'anomalie,
   d'où la double portée. */
.appgrid .qe-col-journal { width: 110px; }
.appgrid .qe-col-ref, .xp-corps .qe-col-ref { width: 150px; }
.appgrid .qe-col-montant, .xp-corps .qe-col-montant { width: 150px; }

/* ---- CPT-15 · STRUCTURE FINANCIÈRE ------------------------------------------ */
/* Les deux masses côte à côte : l'actif dit à quoi l'argent sert, le passif d'où
   il vient. Les mettre l'une SOUS l'autre ferait perdre la comparaison, qui est
   tout le propos du bilan. */
.appgrid .sf-masses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.appgrid .sf-colonne { background: var(--et-surface); border: 1px solid var(--et-hairline); padding: 12px; }
.appgrid .sf-barre { display: flex; flex-direction: column; height: 220px; border: 1px solid var(--et-hairline); overflow: hidden; }
.appgrid .sf-part { display: flex; align-items: center; justify-content: center; min-height: 0; font-family: var(--et-font-mono); font-size: 12px; font-weight: 600; color: var(--et-sur-aplat); overflow: hidden; }
.appgrid .sf-detail { margin-top: 10px; }
.appgrid .sf-detail > div { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--et-hairline); font-size: 13px; }
.appgrid .sf-detail i.pastille { display: inline-block; flex: none; width: 10px; height: 10px; }
.appgrid .sf-detail .m { margin-left: auto; font-family: var(--et-font-mono); font-weight: 600; }
/* Le curseur d'un ratio : sa position sur son échelle, et le seuil en repère. */
.appgrid .sf-echelle { position: relative; height: 8px; margin-top: 5px; background: var(--et-surface-3); }
.appgrid .sf-echelle > i { position: absolute; top: 0; bottom: 0; left: 0; display: block; }
.appgrid .sf-echelle > b { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--et-table-head); }
/* Les largeurs de colonnes des deux tableaux (les trois grandeurs, les ratios). Elles
   vivaient EN DUR dans le Razor (style="min-width:250px" sur chaque <th>) ; une largeur
   dans une page est ce que docs/conventions-responsive.md interdit, et c'est ici qu'un
   palier peut les relâcher. Valeur et N-1 sont la même grandeur à deux dates : une seule
   classe. Les td suivent leur th. */
.appgrid .sf-col-grandeur { min-width: 250px; }
.appgrid .sf-col-formule { min-width: 340px; }
.appgrid .sf-col-montant { width: 180px; text-align: right; }
.appgrid .sf-col-ratio { min-width: 210px; }
.appgrid .sf-col-mesure { min-width: 290px; }
.appgrid .sf-col-valeur { width: 110px; text-align: right; }
.appgrid .sf-col-seuil { width: 100px; text-align: right; }
.appgrid .sf-col-position { min-width: 190px; }

/* ---- CPT-16 · TVA ET TAXES --------------------------------------------------- */
/* L'histogramme à double sens : la taxe facturée vers le haut, la taxe récupérable
   vers le bas. L'écart entre les deux barres EST ce qui est dû à l'État — la lecture
   se fait sans additionner de tête, ce qui est tout l'intérêt du dessin. */
.appgrid .tv-histo { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; padding: 12px; background: var(--et-surface); border: 1px solid var(--et-hairline); }
.appgrid .tv-mois { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.appgrid .tv-haut, .appgrid .tv-bas { display: flex; width: 100%; height: 70px; }
.appgrid .tv-haut { align-items: flex-end; }
.appgrid .tv-haut > i { display: block; width: 46%; margin: 0 auto; background: var(--et-form-blue); }
.appgrid .tv-bas > i { display: block; width: 46%; margin: 0 auto; background: var(--et-avertissement); }
.appgrid .tv-mois > span { font-family: var(--et-font-mono); font-size: 12px; color: var(--et-muted); }
.appgrid .tv-axe { height: 1px; width: 100%; background: var(--et-filet-fort); }
/* Le poste de LIQUIDATION est le résultat, pas une ligne de plus : il se distingue. */
.appgrid .tv-principal td { font-weight: 700; background: var(--et-surface-3); }
/* Une échéance fiscale : un rang, sa date, ce qu'elle coûte si on la manque. */
.appgrid .tv-echeance { display: flex; align-items: center; gap: 11px; padding: 9px 12px; margin-bottom: 7px; background: var(--et-surface); border: 1px solid var(--et-hairline); border-left: 4px solid var(--et-form-blue); }
.appgrid .tv-echeance.proche { border-left-color: var(--et-avertissement-mark); }
.appgrid .tv-echeance.depassee { border-left-color: var(--et-danger-ink); }
.appgrid .tv-echeance .d { flex: none; width: 92px; font-family: var(--et-font-mono); font-size: 13px; font-weight: 600; color: var(--et-ink); }
.appgrid .tv-echeance .l { flex: 1; min-width: 0; }
.appgrid .tv-echeance .l b { display: block; font-size: 13px; color: var(--et-ink); }
.appgrid .tv-echeance .l span { display: block; font-size: 12px; color: var(--et-muted); line-height: 1.45; }
.appgrid .tv-echeance .m { flex: none; font-family: var(--et-font-mono); font-size: 13px; font-weight: 600; }
/* Les largeurs. Elles vivaient EN DUR dans le Razor (style="width:150px" sur
   chaque <th>, style="width:130px" sur le sélecteur de mois) ; une largeur dans une
   page est ce que docs/conventions-responsive.md interdit, et c'est ici qu'un
   palier peut les relâcher. Les td suivent leur th. Base déduite et taxe sont deux
   montants de même largeur : une seule classe. Le `min-width:1080px` de la table
   RESTE dans la page — le garde tools/paliers-responsive.ps1 le lit pour exiger
   l'ancre. Le mois du détail d'un poste est dans la fenêtre, d'où la double portée. */
.appgrid .tv-champ-mois { width: 130px; }
.appgrid .tv-col-poste { min-width: 250px; }
.appgrid .tv-col-compte { width: 110px; }
.appgrid .tv-col-montant { width: 150px; text-align: right; }
.appgrid .tv-col-taux { width: 90px; text-align: right; }
.appgrid .tv-col-raccord { min-width: 230px; }
.appgrid .tv-col-mois, .xp-corps .tv-col-mois { width: 90px; }

/* ---- CPT-17 · RECOUPEMENTS CROISÉS ------------------------------------------ */
/* Deux colonnes qui devraient dire le même chiffre, et l'écart au milieu. La
   disposition EST la démonstration : gauche, droite, différence. */
.appgrid .rc-controle { background: var(--et-surface); border: 1px solid var(--et-hairline); border-left: 4px solid var(--et-succes); margin-bottom: 10px; }
.appgrid .rc-controle.ecart { border-left-color: var(--et-danger-ink); }
/* Un contrôle SANS OBJET dans ce dossier reste affiché, en retrait : le retirer
   de la liste laisserait croire qu'il a été passé. */
.appgrid .rc-controle.sans-objet { border-left-color: var(--et-inerte); opacity: .72; }
.appgrid .rc-controle { cursor: pointer; }
.appgrid .rc-controle:hover { background: var(--et-surface-3); }
.appgrid .rc-tete { display: flex; align-items: baseline; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--et-hairline); }
.appgrid .rc-tete b { font-size: 13px; font-weight: 700; color: var(--et-ink); }
.appgrid .rc-tete .fin { margin-left: auto; font-family: var(--et-font-mono); font-size: 15px; font-weight: 600; }
.appgrid .rc-corps { display: grid; grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1fr); align-items: center; gap: 10px; padding: 11px 12px; }
.appgrid .rc-cote .n { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--et-muted); }
.appgrid .rc-cote .v { display: block; font-family: var(--et-font-mono); font-size: 16px; font-weight: 600; color: var(--et-ink); margin-top: 2px; }
.appgrid .rc-signe { text-align: center; font-family: var(--et-font-mono); font-size: 13px; color: var(--et-muted); }
.appgrid .rc-lecture { padding: 0 12px 11px; font-size: 12px; line-height: 1.6; color: var(--et-muted); }
/* Les largeurs. Elles vivaient EN DUR dans le Razor (style="width:150px" sur
   chaque <th>, style="width:110px" sur le champ de tolérance) ; une largeur dans
   une page est ce que docs/conventions-responsive.md interdit, et c'est ici qu'un
   palier peut les relâcher. Les td suivent leur th. La référence et le montant
   d'une ligne sont dans la fenêtre du contrôle, d'où la double portée. */
.appgrid .rc-champ-tolerance { width: 110px; }
.appgrid .rc-col-ref, .xp-corps .rc-col-ref { width: 150px; }
.appgrid .rc-col-montant, .xp-corps .rc-col-montant { width: 150px; }

@media (max-width: 1100px) {
  .appgrid .sf-masses, .appgrid .qe-cols { grid-template-columns: minmax(0, 1fr); }
  .appgrid .rc-corps { grid-template-columns: minmax(0, 1fr); }
  .appgrid .rc-signe { text-align: left; }
}

@media (max-width: 1024px) {
  .appgrid .cpd-paire, .xp-corps .cpd-paire { grid-template-columns: minmax(0, 1fr); }
  .appgrid .qe-anomalie { min-height: 44px; }
}

/* L'ENCRE SUR UN APLAT COLORÉ EST UN JETON, ELLE AUSSI. Les deux segments colorés
   de cette feuille (.cn-segment, .sf-part) écrivaient `color: #fff` — la charte
   nomme ce rôle `--et-sur-aplat` (« ink on a branded surface »), et un littéral
   échappe au relevé des couleurs en dur. Corrigé au lot 9, en passant.

   CE QUI N'EST PLUS ICI : LA SYNTHÈSE (.sy-*). Le tableau de bord comptable a été
   retiré du produit, et cette feuille était son seul dessinateur — la ligne de
   « ce qui attend », le point d'état de période et sa pastille partent avec lui.
   Aucune autre feuille ni aucun écran ne lisait ces classes ; vérifié avant de
   les retirer, comme le veut la règle du dépôt sur les classes partagées. */