/* ============================================================================
   EasyCompta — la fenêtre de pièce, une fois pour le module

   Le cadre que le brouillard (SAI-02) avait dessiné pour son volet de pièce —
   voile, fenêtre centrée, en-tête ardoise avec le rang et les flèches
   précédente / suivante, corps qui défile, pied d'actions — sert désormais
   aussi au journal général (ETA-04), qui ouvre la même pièce en lecture. 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.

   Elle ne porte que le CADRE. Ce qu'une fenêtre met dedans — l'en-tête de pièce
   modifiable du brouillard, les lignes en lecture du journal — reste à chaque
   écran, sous son préfixe.

   « Toute fiche ou saisie du domaine s'ouvre en modale, jamais en volet » (§7 de
   la passation) : c'est bien une fenêtre centrée, le mot « volet » du brouillard
   est celui de sa maquette.

   Anatomie : .cpta-voile > .cpta-fenetre[.cpta-fenetre-courte]
              > .cpta-fenetre-tete (.cpta-fenetre-t · .cpta-rang-nav · .cpta-nav ×n · .cpta-fermer)
              > .cpta-fenetre-corps
              > [.cpta-fenetre-meta]
              > .cpta-fenetre-pied
   ========================================================================== */

.cpta-voile {
  position: fixed;
  z-index: 1070;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--et-voile);
}

.cpta-fenetre {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 760px;
  max-height: 100%;
  background: var(--et-surface);
  border: 1px solid var(--et-filet-fort);
  box-shadow: var(--et-ombre-flottant);
}

.cpta-fenetre-courte { max-width: 560px; }

.cpta-fenetre-tete {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding: 10px 12px;
  background: var(--et-table-head);
  color: var(--et-sur-ardoise-plein);
}

.cpta-fenetre-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 700; }
.cpta-rang-nav { flex: none; font-family: var(--et-font-mono); font-size: 12px; color: var(--et-sur-ardoise); }

.cpta-nav {
  width: 28px;
  height: 28px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--et-fond-ardoise);
  border: 1px solid var(--et-filet-ardoise);
  color: var(--et-sur-ardoise-plein);
  font-size: 12px;
  cursor: pointer;
}

/* L'ardoise n'a que deux jetons de fond — pas de rang « survol », à la différence de la
   marine. Le survol se dit donc par le FILET, qui passe au premier rang d'encre : ajouter
   un jeton au thème pour un seul bouton serait une modification de noyau. */
.cpta-nav:hover { border-color: var(--et-sur-ardoise-plein); }
.cpta-nav:disabled { opacity: .4; cursor: not-allowed; }
.cpta-fermer { margin-left: 4px; }

.cpta-fenetre-corps { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

.cpta-fenetre-meta { display: flex; gap: 18px; flex-wrap: wrap; padding: 11px 16px; border-top: 1px solid var(--et-hairline); font-size: 12px; color: var(--et-muted); }
.cpta-fenetre-meta b { color: var(--et-ink); font-weight: 600; }

.cpta-fenetre-pied {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex-shrink: 0;
  padding: 10px 12px;
  background: var(--et-surface-2);
  border-top: 1px solid var(--et-hairline);
}

/* Sous 1024 px rien de ce qui se touche ne descend sous 44 px (docs/cibles-tactiles.md) :
   les flèches et la croix de l'en-tête, 28 px au poste, prennent la cible. Le brouillard
   portait cette règle sur son propre cadre ; elle remonte avec lui. */
@media (max-width: 1024px) {
  .cpta-nav { width: 44px; height: 44px; }
}

/* Sous 720 px la fenêtre prend tout l'écran : le voile n'a plus de marge à montrer. */
@media (max-width: 720px) {
  .cpta-voile { padding: 0; }
  .cpta-fenetre { max-width: 100%; height: 100%; border: 0; }
}

/* Une fenêtre ne s'imprime pas : ce qu'on imprime est la liste derrière elle. */
@media print {
  .cpta-voile { display: none !important; }
}