/* ===========================================================================
   ÉCRAN « HISTORIQUE DES DÉPARTS » (/app/sorties-effectif, et ses routes paie et RH)
   — préfixe .dep-*

   Maquette « Historique des départs — EasyTime » (canevas du 2026-09-27, versée dans
   docs/modeles/design_handoff_historique_departs/). Ce que cette feuille pose, et rien de
   plus :
     · les faits saillants en GRILLE, libellés à la ligne au lieu d'être coupés ;
     · le bandeau « à traiter » et son bouton ;
     · la bande de rattrapage des terminaux, sous la liste ;
     · la consigne de la colonne « À traiter ».

   Les onglets sont au gabarit (.mx-vues), comme la liste en cartes sous 1024 px
   (.mx-liste-cartes) — partagés avec la liste du personnel, dont cet écran est l'autre
   face.

   AUCUNE COULEUR EN DUR : tout par --et-*.
   =========================================================================== */

.dep-vues             { margin: 4px 0 16px; }

/* ---------------------------------------------------------------------------
   FAITS SAILLANTS — une grille, et non plus une rangée de cases qui se partagent la
   largeur : à six, chacune tombait sous 150 px et ses libellés (« DÉPARTS DU PÉRIMÈ… »)
   étaient coupés. Six, trois ou deux par rangée selon la place ; le libellé passe à la
   ligne, et la base du chiffre (.prec) aussi, sous le chiffre.
   --------------------------------------------------------------------------- */
.mx-faits.dep-faits {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-bottom: 16px; border: 1px solid var(--et-hairline);
}
.dep-faits .mx-fait       { padding: 10px 14px; background: var(--et-surface); }
.dep-faits .mx-fait-lbl   { white-space: normal; overflow: visible; letter-spacing: .08em; line-height: 1.35; }
.dep-faits .mx-fait-val   { margin-top: 4px; font-size: 18px; }
.dep-faits .mx-fait-val .prec { display: block; margin: 2px 0 0; line-height: 1.4; }
@media (max-width: 1100px) { .mx-faits.dep-faits { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .mx-faits.dep-faits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------------------
   LE BANDEAU « À TRAITER » — il tient sa ligne, et son bouton passe dessous quand la
   place manque.
   --------------------------------------------------------------------------- */
.dep-bandeau          { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; margin-bottom: 16px; }
.dep-bandeau .mx-blocage-txt { flex: 1 1 320px; }
.dep-bandeau-btn      { flex: none; }

/* Le tiret d'une valeur absente, à l'encre du texte : sur le fond d'une ligne en alerte,
   en sombre, l'encre inerte du gabarit (.tbl-vide) lisait 2,04:1, celle des gloses 4,13:1
   et l'encre secondaire 4,46:1. Un tiret seul ne se confond pas avec une valeur. */
.dep-vide             { color: var(--et-ink); }

/* La consigne de l'onglet « À traiter » : à l'encre de danger, c'est ce qu'on vient lire. */
.dep-c-afaire         { font-weight: 600; color: var(--et-danger-ink); }

/* ---------------------------------------------------------------------------
   LA BANDE DE RATTRAPAGE — sous la liste, sur une ligne quand elle n'a rien à dire.
   --------------------------------------------------------------------------- */
.dep-terminaux        { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; padding: 12px 16px;
                        background: var(--et-surface); border: 1px solid var(--et-hairline); }
.dep-terminaux-ligne  { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; }
.dep-terminaux-ligne > .bi { color: var(--et-form-blue-d); font-size: 18px; }
.dep-terminaux-txt    { flex: 1 1 260px; font-size: 13px; color: var(--et-ink); }
.dep-terminaux-ligne > .dep-terminaux-txt:last-child { color: var(--et-muted); }
.dep-terminaux-ok     { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--et-succes-ink); }
.dep-terminaux-matricules { display: flex; flex-wrap: wrap; gap: 4px; max-height: 180px; overflow-y: auto; }

@media (max-width: 1024px) {
    .dep-terminaux .mx-btn,
    .dep-bandeau-btn      { min-height: 44px; }
}
@media (max-width: 640px) {
    .dep-terminaux .mx-btn,
    .dep-bandeau-btn      { flex: 1 1 100%; justify-content: center; }
}