/* ==========================================================================
   Contrats & avenants (RH-03, /app/paie/contrats) — lot E3 de l'audit EasyPaie, 2026-10-08.
   Pages/Paie/Contrats.razor, sorti de la grille et de la modale Bootstrap.

   Bande d'outils, carte, table, pastilles, bandeaux, fenêtres et champs viennent
   d'easypaie.css ; ici seulement la grille de la fiche du contrat (quatre champs, puis trois,
   puis un plein — la disposition des « col-md-3 / col-md-4 / col-12 » qu'elle remplace), les
   largeurs des deux fenêtres et trois formes de cellule. Jetons seulement. Préfixe .ctt-*.
   ========================================================================== */

.appgrid .ctt-salarie { flex: 0 1 340px; min-width: 0; }

.appgrid .ctt-vide { padding: 32px 18px; text-align: center; color: var(--et-muted); }
.appgrid .ctt-essai { color: var(--et-muted); white-space: nowrap; }
.appgrid .ctt-fonction { color: var(--et-muted); }
.appgrid .ctt-actions { display: inline-flex; gap: 6px; justify-content: flex-end; white-space: nowrap; }

/* Deux colonnes de champs et plus : la largeur « est-large » de l'échelle des modales
   (docs/modele-modale.md), et non les 620 px d'une fiche d'une colonne. La confirmation de
   suppression est une question fermée : l'étroite. */
.appgrid .ctt-modale { max-width: 880px; }
.appgrid .ctt-modale-etroite { max-width: 480px; }
.appgrid .ctt-pied { justify-content: flex-end; }
.appgrid .ctt-bandeau { margin-bottom: 14px; }

.appgrid .ctt-form { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px 14px; }
.appgrid .ctt-champ--quart { grid-column: span 3; }
.appgrid .ctt-champ--tiers { grid-column: span 4; }
.appgrid .ctt-champ--plein { grid-column: 1 / -1; }

/* Sous 720 px, deux champs par rangée (les « col-6 » d'origine) ; sous 560, un seul : une date
   native ne tient pas dans la moitié d'un téléphone. */
@media (max-width: 720px) {
  .appgrid .ctt-champ--quart,
  .appgrid .ctt-champ--tiers { grid-column: span 6; }
}
@media (max-width: 559px) {
  .appgrid .ctt-champ--quart,
  .appgrid .ctt-champ--tiers { grid-column: 1 / -1; }
  .appgrid .ctt-salarie { flex: 1 1 100%; }
}