/* ============================================================================
   EasyCompta — la cause d'un numéro manquant, une fois pour le module

   Deux écrans la disent : le journal général (ETA-04, vue Séquences) et le
   paramétrage des journaux (CPT-03, panneau d'analyse). La règle du dépôt fait
   remonter ce qui sert à deux — une feuille de module, comme la vignette et
   le rail d'onglets, et non deux copies sous deux préfixes.

   Le dessin : la référence en mono, la phrase à côté, en retrait sous le trou
   qu'elle explique. Sans trace, elle est atténuée et en italique — c'est une
   absence, pas une explication. Aucune couleur d'état : une cause n'est ni
   une erreur ni un succès, c'est un fait.

   Anatomie : .num (référence ou numéro) · .txt (la phrase, composée au serveur).
   Sélecteurs bornés à .appgrid, comme les autres feuilles de module.
   ========================================================================== */

.appgrid .cpta-cause {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-left: 14px;
  font-size: 12px;
  line-height: 1.45;
}

.appgrid .cpta-cause .num { flex: none; min-width: 120px; font-family: var(--et-font-mono); color: var(--et-ink); }
.appgrid .cpta-cause .txt { color: var(--et-muted); }

.appgrid .cpta-cause.est-muette .num,
.appgrid .cpta-cause.est-muette .txt { color: var(--et-faint); font-style: italic; }

/* Dans une table .tbl, la cause occupe une rangée à elle, sans le filet du gabarit
   entre elle et le trou qu'elle explique. */
.appgrid .tbl tbody tr.cpta-cause-rang td { padding-top: 2px; padding-bottom: 4px; border-top: 0; }

/* ---------------------------------------------------------------------------
   Justifier à la main (db/1460) — le geste sous la ligne « sans trace ».
   Un lien discret, puis un champ et deux boutons ; le bleu de contenu pour
   l'engagement, comme partout dans une page. Même retrait que la cause.
   --------------------------------------------------------------------------- */
.appgrid .cpta-justifier { padding-left: 14px; margin: 2px 0 6px; font-size: 12px; }
.appgrid .cpta-justifier-lien {
  background: none; border: 0; padding: 0; font: inherit; font-size: 12px;
  color: var(--et-form-blue); text-decoration: underline; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
}
.appgrid .cpta-justifier-lien:hover { color: var(--et-form-blue-d); }
.appgrid .cpta-justifier-form { display: grid; gap: 6px; max-width: 640px; padding: 8px 10px; background: var(--et-surface-2); border: 1px solid var(--et-hairline); }
.appgrid .cpta-justifier-form > label { display: grid; gap: 4px; }
.appgrid .cpta-justifier-form > label > span { color: var(--et-muted); font-weight: 600; }
.appgrid .cpta-justifier-gestes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.appgrid .cpta-justifier-aide { color: var(--et-faint); font-style: italic; }
.appgrid .cpta-justifier-erreur { display: flex; gap: 6px; align-items: baseline; color: var(--et-danger-ink); }

@media (max-width: 720px) {
  .appgrid .cpta-cause { flex-wrap: wrap; }
  .appgrid .cpta-cause .num { min-width: 0; }
  .appgrid .cpta-justifier-form { max-width: none; }
}