/* ═══════════════════════════════════════════════════════════════════
   DTISoft — Fichiers d'import / export archivés  (namespace `fx-`)

   ⚠️ `fx-` et NON `fa-` : Font Awesome occupe déjà `fa-` sur toute
      l'application. Une classe `.fa-liste` aurait hérité de la police
      d'icônes — texte remplacé par des glyphes, sans erreur ni indice.

   ⚠️ z-index 11800 — et NON 1400 comme à la première écriture. Ce chiffre
      avait été choisi en ne regardant que la fenêtre d'import (1200) et sa
      confirmation (1300). Or la visionneuse s'ouvre AUSSI depuis la fenêtre
      Historique, qui est à **9000** : le classeur s'ouvrait donc DERRIÈRE
      elle (signalé par l'utilisateur).
      Cette visionneuse est une feuille : elle est toujours ouverte PAR
      dessus autre chose et ne doit jamais être recouverte. Elle se place
      donc au-dessus de tout l'applicatif — plafond mesuré 11600
      (`doc-actions.css`) — mais SOUS le verrou de session
      (`session-lock.css`, 2147483000), qui doit rester le dernier mot.
   ═══════════════════════════════════════════════════════════════════ */

/* Même garde-fou que dans export-articles.css : `[hidden]` doit gagner contre
   les classes qui fixent `display`. `.fx-barre` avait sa règle dédiée ; celle-ci
   couvre aussi toutes les futures. */
.fx-overlay [hidden] { display: none; }

.fx-overlay {
    position: fixed; inset: 0; z-index: 11800;
    background: rgba(15, 23, 42, .55);
    display: flex; align-items: center; justify-content: center; padding: 24px;
}
.fx-box {
    background: #fff; border-radius: 10px; box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
    max-width: 100%; max-height: 88vh; display: flex; flex-direction: column;
    font-size: 13px; color: #1e293b;
}
.fx-box-large { max-height: 92vh; }

.fx-head {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; border-bottom: 1px solid #e5e7eb;
    background: #f8fafc; border-radius: 10px 10px 0 0;
}
.fx-title { font-weight: 600; flex: 0 0 auto; }
.fx-title i { color: #16a34a; margin-right: 6px; }
/* `min-width:0` : sans lui, un conteneur flex refuse de se comprimer sous la
   largeur de son contenu et pousse le bouton de fermeture hors de la boîte
   (piège § 7.32). */
.fx-head-actions { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.fx-close {
    border: 0; background: transparent; font-size: 22px; line-height: 1;
    color: #94a3b8; cursor: pointer; padding: 0 2px; flex: 0 0 auto;
}
.fx-close:hover { color: #475569; }

.fx-body { overflow: auto; padding: 12px 14px; flex: 1 1 auto; }

.fx-rech {
    border: 1px solid #cbd5e1; border-radius: 6px; padding: 5px 9px;
    font-size: 12.5px; width: 260px; max-width: 100%;
}
.fx-feuille { border: 1px solid #cbd5e1; border-radius: 6px; padding: 4px 7px; font-size: 12.5px; }
.fx-pager { display: flex; align-items: center; gap: 4px; }
.fx-goto { width: 84px; border: 1px solid #cbd5e1; border-radius: 6px; padding: 4px 6px; font-size: 12.5px; }

.fx-btn {
    display: inline-flex; align-items: center; gap: 5px;
    border: 1px solid #cbd5e1; background: #fff; color: #334155;
    border-radius: 6px; padding: 4px 9px; font-size: 12px; cursor: pointer;
    text-decoration: none; white-space: nowrap;
}
.fx-btn:hover { background: #f1f5f9; }
.fx-btn-2 { color: #2563eb; border-color: #bfdbfe; }
.fx-btn-danger { background: #dc2626; border-color: #dc2626; color: #fff; }
.fx-btn-danger:hover { background: #b91c1c; }

/* Barre de sélection : n'apparaît qu'avec au moins une case cochée, et dit
   COMBIEN de place sera libérée — « supprimer 12 fichiers » ne renseigne pas
   sur le gain réel. */
.fx-barre {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: #fef2f2; border: 1px solid #fecaca; border-radius: 7px;
    padding: 7px 11px; margin-bottom: 9px; font-size: 12.5px; color: #7f1d1d;
}
.fx-barre[hidden] { display: none; }
.fx-barre-t { flex: 1 1 auto; min-width: 0; }

.fx-title-danger { color: #b91c1c; }
.fx-title-danger i { color: #dc2626; }
.fx-conf .fx-head { background: #fef2f2; border-bottom-color: #fecaca; }
.fx-conf-t { margin: 0 0 8px 0; font-size: 13px; }
.fx-conf-n {
    margin: 0 0 14px 0; font-size: 12px; color: #64748b; line-height: 1.55;
    background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 6px; padding: 8px 10px;
}
.fx-conf-actions { display: flex; justify-content: flex-end; gap: 8px; }

.fx-bandeau {
    font-size: 12px; color: #64748b; margin-bottom: 9px;
    background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 6px; padding: 6px 10px;
}
.fx-cible-note { color: #b45309; font-weight: 600; }

.fx-vide { padding: 26px 10px; text-align: center; color: #64748b; font-size: 13px; }
.fx-vide i { margin-right: 6px; }
.fx-vide-note { font-size: 12px; color: #94a3b8; margin-top: 7px; }

/* ── Liste ──────────────────────────────────────────────────────── */
.fx-tbl { width: 100%; border-collapse: collapse; }
.fx-tbl th {
    text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .3px;
    color: #64748b; border-bottom: 1px solid #e5e7eb; padding: 5px 8px; font-weight: 600;
}
.fx-tbl td { padding: 7px 8px; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
.fx-tbl tr:hover td { background: #f8fafc; }
.fx-dt { color: #64748b; white-space: nowrap; }
.fx-num { text-align: right; color: #475569; white-space: nowrap; }
.fx-nom { font-weight: 600; word-break: break-word; }
.fx-res { font-size: 11.5px; color: #94a3b8; margin-top: 2px; }
.fx-actions { display: flex; gap: 5px; }

/* ── Grille du classeur ─────────────────────────────────────────── */
/* Le défilement appartient au conteneur, jamais à la page : une feuille de
   80 colonnes ne doit pas élargir la fenêtre. */
.fx-grille-wrap { overflow: auto; max-height: calc(88vh - 150px); border: 1px solid #e5e7eb; border-radius: 6px; }
.fx-grille { border-collapse: collapse; font-size: 12px; white-space: nowrap; }
.fx-grille th {
    position: sticky; top: 0; z-index: 2;
    background: #f1f5f9; border-bottom: 1px solid #cbd5e1; border-right: 1px solid #e2e8f0;
    padding: 5px 8px; text-align: left; font-weight: 600; color: #334155;
    max-width: 260px; overflow: hidden; text-overflow: ellipsis;
}
.fx-grille td {
    border-bottom: 1px solid #f1f5f9; border-right: 1px solid #f1f5f9;
    padding: 4px 8px; max-width: 320px; overflow: hidden; text-overflow: ellipsis;
}
/* Numéro de ligne figé à gauche : en défilant vers la 60e colonne, on doit
   toujours savoir quelle ligne on lit. */
.fx-ln {
    position: sticky; left: 0; z-index: 1;
    background: #f8fafc; color: #94a3b8; text-align: right;
    border-right: 1px solid #e2e8f0; font-variant-numeric: tabular-nums;
}
.fx-grille thead .fx-ln { z-index: 3; }
.fx-grille tbody tr:hover td { background: #f8fafc; }

/* La ligne d'où vient la valeur consignée dans l'historique. */
.fx-cible td { background: #fef3c7 !important; font-weight: 600; }
.fx-cible .fx-ln { background: #fde68a !important; color: #92400e; }

@media (max-width: 680px) {
    .fx-overlay { padding: 8px; }
    .fx-head { flex-wrap: wrap; }
    .fx-head-actions { justify-content: flex-start; }
    .fx-rech { width: 100%; }
}