/* ============================================================================
   ÉCRAN — PLAN COMPTABLE SYSCOHADA (CPT-04)

   Feuille d'ÉCRAN. Préfixe .plc-, et non le .pc- de la maquette : .pc- est déjà
   employé par ecran-rapport-personnel.css. Ses cinq classes y sont des couleurs
   (.pc-bleu, .pc-vert…) et aucun nom de la maquette ne les heurte aujourd'hui —
   mais deux écrans partageant un préfixe finissent par se rencontrer, et cette
   rencontre-là ne fait ni erreur ni avertissement. C'est la deuxième du chantier
   après le .ep- d'EasyPaie sur CPT-02.

   CE QUI N'EST PAS ICI : la bande d'indicateurs (.plc-faits / .plc-fait, feuille
   de module css/easycompta-vignette.css), le cadre de liste (.tbl-*) et
   l'en-tête de panneau (.flt-tete, .flt-surtitre) du gabarit, les fenêtres
   (ModalCadre), l'ossature d'écran (EcranCompta).
   ========================================================================== */

.appgrid .plc-corps { display: flex; align-items: stretch; gap: 14px; }
.appgrid .plc-liste { flex: 1; min-width: 0; }
.appgrid .plc-aside {
  flex: 0 0 400px;
  background: var(--et-surface);
  border: 1px solid var(--et-hairline);
  align-self: flex-start;
}
.appgrid .plc-bloc { padding: 12px 14px; border-bottom: 1px solid var(--et-hairline); }
.appgrid .plc-bloc:last-child { border-bottom: 0; }

/* LA LISTE EST UNE TABLE — CE QUI RESTE ICI, ET CE QUI N'Y EST PLUS.
   L'arbre à trois niveaux (.plc-classe / .plc-racine / .plc-cpt), ses cases à cocher
   (.plc-coche) et sa barre de lot (.plc-selection) ont été retirés le 2026-09-07 : la
   liste des comptes est passée au gabarit de liste (Tableau), qui apporte la rangée,
   la sélection, la barre de lot et le tri. Il ne reste ici que ce que le gabarit ne
   connaît pas — l'habillage des cellules propres au plan comptable, et l'état de la
   rangée que l'écran seul sait qualifier. */

/* CE QUE L'ÉCRAN AJOUTE À LA RANGÉE DU GABARIT.
   Trois états, qui se cumulent : la sourdine d'un compte inactif, l'alerte des quatre
   familles bloquantes (.tbl-alerte, du gabarit) et la rangée dont le panneau est ouvert. */

/* Un compte inactif reste LISIBLE : on le consulte pour décider s'il doit le rester.
   La sourdine dit « mis de côté », elle ne cache pas — et elle n'atteint pas la
   pastille d'état, qui porte sa couleur en propre et qui est ce qu'on vient lire. */
.appgrid .tbl tbody tr.plc-inactif > td { color: var(--et-muted); }

/* La rangée CHOISIE, celle que le panneau latéral décrit. Elle prime sur .tbl-alerte —
   d'où le sélecteur plus spécifique et non un !important : la question « quelle rangée
   est-ce que je lis ? » passe avant « quelle rangée est en défaut ? », qui se voit déjà
   dans la colonne du constat. */
.appgrid .tbl tbody tr.plc-ligne-choisie > td { background: var(--et-tint); }
.appgrid .tbl tbody tr.plc-ligne-choisie > td:first-child { box-shadow: inset 3px 0 0 var(--et-form-blue); }

/* LES CELLULES PROPRES AU PLAN */
.appgrid .plc-num { font-family: var(--et-font-mono); font-size: 13px; font-weight: 600; }
.appgrid .plc-constat { display: block; font-size: 12px; line-height: 1.3; }

/* La teinte d'identité de la classe, celle que portait le bord gauche des nœuds de
   l'arbre. Un filet de 3 px et non une pastille ronde : posé dans une colonne, il
   s'aligne d'une rangée à l'autre, et l'œil suit la classe en balayant. */
.appgrid .plc-jeton-classe { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.appgrid .plc-jeton-classe > i { display: inline-block; flex: none; width: 3px; height: 13px; }

.appgrid .plc-puce {
  display: inline-block;
  padding: 1px 6px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
/* Le texte posé sur un aplat d'état prend le rang -ink : à 12 px, la couleur d'état
   elle-même ne passe pas l'AA sur son propre fond pâle. */
.appgrid .plc-puce.est-actif { background: var(--et-succes-bg); color: var(--et-succes-ink); }
.appgrid .plc-puce.est-inactif { background: var(--et-neutre-bg); color: var(--et-neutre); }

/* UNE VALEUR EN LECTURE DANS LA GRILLE DE LA FENÊTRE (.xp-grille) — ni champ, ni note.

   Elle prend la hauteur d'un champ pour que sa rangée s'aligne sur ses voisines, mais
   ne porte ni cadre ni fond. C'est délibéré : un cadre annonce une saisie possible, et
   un champ grisé se lit comme un champ DÉSACTIVÉ — donc comme quelque chose qui
   pourrait être réactivé, ce qui n'est pas le cas ici. La classe n'est pas une donnée
   qu'on refuse de laisser modifier : c'est une conséquence du numéro.

   Elle vit dans la feuille d'ÉCRAN et non dans le gabarit de fenêtre d'EasyCompta :
   un seul écran s'en sert aujourd'hui, et la règle du dépôt fait monter une classe
   dans le gabarit quand DEUX écrans la partagent, jamais avant. */
.appgrid .plc-lu {
  display: flex;
  align-items: center;
  min-height: var(--et-h-champ);
  font-family: var(--et-font-mono);
  font-size: var(--et-fs-champ);
  color: var(--et-ink);
}
.appgrid .plc-lu.est-vide { color: var(--et-faint); }

/* LES FILTRES D'ÉCRAN, posés dans la barre d'outils du tableau. .mx-select est en
   largeur 100 % par défaut — il est fait pour la grille de fiche dense ; dans une barre
   il lui faut un plafond, sinon les trois listes se partagent la rangée entière et
   chassent la recherche à la ligne. */
.appgrid .plc-filtre { flex: 0 1 auto; width: auto; min-width: 150px; max-width: 200px; }

/* Le poids de la sélection, dans le bandeau du gabarit. Il n'est ni un bouton ni un
   lien : le bandeau n'habille que ceux-là, et un texte y tomberait sans alignement. */
.appgrid .tbl-selection-actions > .plc-poids { align-self: center; font-size: 12px; color: var(--et-muted); }

/* Le titre de bande de la vue Contrôles — il était écrit en style en ligne sur cinq
   propriétés, recopiées à chaque bande. */
.appgrid .plc-bandeau {
  font-size: 12px; font-weight: 700; color: var(--et-table-head);
  text-transform: uppercase; letter-spacing: .06em;
}

/* La croix du panneau. Le clic sur la rangée déjà ouverte referme aussi, mais le
   panneau peut avoir été ouvert depuis la vue Contrôles, où la rangée n'est plus là. */
.appgrid .plc-fermer {
  margin-left: 8px; padding: 0 2px; border: 0; background: none;
  color: var(--et-muted); font-size: 13px; line-height: 1; cursor: pointer;
}
.appgrid .plc-fermer:hover { color: var(--et-ink); }

/* Les mouvements du compte, mois par mois. Une barre par-dessus l'axe pour un
   mouvement débiteur, en dessous pour un créditeur : le SENS est l'information,
   et une hauteur seule le perdrait. */
.appgrid .plc-mois { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; }
.appgrid .plc-colonne { display: flex; flex-direction: column; height: 76px; }
.appgrid .plc-haut { display: flex; flex-direction: column; justify-content: flex-end; flex: 1; }
.appgrid .plc-bas { flex: 1; }
.appgrid .plc-barre-d { background: var(--et-form-blue); min-height: 1px; }
.appgrid .plc-barre-c { background: var(--et-avertissement-mark); min-height: 1px; }
.appgrid .plc-axe { height: 1px; background: var(--et-filet-fort); }
.appgrid .plc-mois-nom { margin-top: 4px; font-family: var(--et-font-mono); font-size: 12px; color: var(--et-muted); text-align: center; }

/* Une ligne de propriété du panneau : libellé à gauche, valeur à droite, et le
   détail dessous — la même anatomie que ChampFiche, sans son formulaire. */
.appgrid .plc-prop { padding: 7px 0; border-bottom: 1px solid var(--et-rang); }
.appgrid .plc-prop:last-child { border-bottom: 0; }
.appgrid .plc-prop-tete { display: flex; align-items: center; gap: 9px; }
.appgrid .plc-prop-val { margin-left: auto; font-family: var(--et-font-mono); font-size: 12px; font-weight: 600; text-align: right; white-space: nowrap; }
.appgrid .plc-prop-detail { margin-top: 2px; padding-left: 22px; font-size: 12px; color: var(--et-faint); line-height: 1.4; }

@media (max-width: 1100px) {
  .appgrid .plc-corps { display: block; }
  .appgrid .plc-aside { width: 100%; margin-top: 14px; }
}
@media (max-width: 720px) {
  .appgrid .plc-mois { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  /* Les filtres cessent de se partager la rangée et prennent chacun la leur : trois
     listes de 150 px côte à côte sous 720 px ne laissent plus rien à leur libellé. */
  .appgrid .plc-filtre { flex: 1 1 100%; max-width: none; }
}

/* Les largeurs de colonnes de la table des comptes d'une famille. Elles vivaient
   EN DUR dans le Razor (style="width:100px" 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 ; « Ce qui est constaté »
   prend le reste. */
.appgrid .plc-col-numero { width: 100px; }
.appgrid .plc-col-libelle { width: 220px; }
.appgrid .plc-col-solde { width: 120px; text-align: right; }