/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   ANONYMISEUR DE FEC — préfixe `anon-`, même grammaire que analyses.css / lbo.css / cession.css.
   L'écran réutilise la coque `.retr-page` / `.retr-top` / `.retr-body` (partagée avec /solo et
   /retraitements) : seul l'intérieur est à lui. Jetons repris de tokens.css — sauf les trois encres
   sémantiques, redéclarées ici dans les DEUX thèmes (cf. le bloc juste dessous).
   Chargée APRÈS analyses.css, non bloquante (preload → stylesheet), comme les autres feuilles de vue.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── TROIS ENCRES SÉMANTIQUES, DÉFINIES LOCALEMENT ET DANS LES DEUX THÈMES ───────────────────────
   ⚠️ `--color-warning`, `--color-success` et `--color-danger` de tokens.css ne sont déclarés QUE dans
   le bloc `:root` (thème sombre) : ce sont des teintes CLAIRES (#FAC775, #5DCAA5, #F09595), pensées
   pour du texte sur fond sombre. Posées telles quelles sur le thème clair, elles donnent de l'ambre
   pâle sur blanc cassé — lisible nulle part. Et `--text-warning`, qu'emploient plusieurs feuilles
   existantes, n'est défini NULLE PART : il tombe toujours sur son repli.
   On déclare donc ici trois encres à nous, avec leur variante claire. Elles ne servent qu'à cet
   écran et ne touchent à rien d'autre. */
.anon {
    --anon-warn: #F0C26B;
    --anon-warn-bg: color-mix(in srgb, #E9B872 14%, transparent);
    --anon-warn-bd: color-mix(in srgb, #E9B872 40%, transparent);
    --anon-ok: #5DCAA5;
    --anon-ko: #F09595;
    --anon-ko-bd: color-mix(in srgb, #F09595 38%, transparent);
    display: flex; flex-direction: column; gap: 12px; min-width: 0;
}

html[data-theme="light"] .anon {
    --anon-warn: #7a4e00;
    --anon-warn-bg: color-mix(in srgb, #E9B872 26%, transparent);
    --anon-warn-bd: color-mix(in srgb, #C98A1E 45%, transparent);
    --anon-ok: #0b6b4f;
    --anon-ko: #a52422;
    --anon-ko-bd: color-mix(in srgb, #a52422 30%, transparent);
}

/* ── ÉTAT D'ACCUEIL ──────────────────────────────────────────────────────────────────────────────
   La zone de dépôt domine, les trois colonnes d'explication passent dessous. Sur un écran étroit
   elles s'empilent — un tableau de trois colonnes de 4 lignes est illisible sous 700 px. */
/*  ⚠️ ALIGNÉ À GAUCHE, pas centré. Centré à 980 px sur un écran de 1440, le bloc flottait au milieu
    pendant que le titre et son chapeau — qui vivent dans `.retr-top`, pleine largeur — restaient
    collés au bord gauche : deux colonnes invisibles pour un seul écran d'accueil. Aligné, le titre,
    la zone de dépôt et les trois cartes partent du même bord et se lisent comme une seule colonne. */
.anon-accueil { display: flex; flex-direction: column; gap: 16px; max-width: 1080px; margin: 4px 0 0; width: 100%; }

.anon-drop {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 5px; padding: 40px 18px; border-radius: 14px; text-align: center;
    border: 1.5px dashed color-mix(in srgb, var(--brand-strong) 45%, transparent); background: var(--o4);
    transition: border-color .15s ease, background .15s ease;
}
.anon-drop:hover { border-color: var(--brand-strong); background: color-mix(in srgb, var(--brand) 7%, transparent); }
/* L'input natif est étiré sur toute la zone en opacité nulle : c'est LUI qui reçoit le clic ET le
   glisser-déposer, sans une ligne de JS (même mécanique que `.solo-drop`). */
.anon-drop input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.anon-drop-ic { color: var(--brand-strong); line-height: 0; margin-bottom: 4px; }
.anon-drop-t { font-size: 15px; font-weight: 700; color: var(--tx1); }
.anon-drop-s { font-size: 11.5px; color: var(--color-text-muted); }
.anon-drop-loc { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; }
/*  L'input reste dans le DOM pendant la lecture (cf. le commentaire du composant) : on le neutralise
    ici, sans le retirer. `pointer-events:none` suffit — un second dépôt pendant la lecture du premier
    écraserait les octets en cours de copie. */
.anon-drop.is-busy { cursor: default; border-style: solid; border-color: color-mix(in srgb, var(--brand-strong) 30%, transparent); }
.anon-drop.is-busy input[type=file] { pointer-events: none; }
.anon-drop.is-busy:hover { background: var(--o4); border-color: color-mix(in srgb, var(--brand-strong) 30%, transparent); }
.anon-drop-run { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--color-text-muted); }

.anon-quoi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.anon-quoi-c { padding: 12px 14px; border-radius: 11px; border: 1px solid var(--o12); background: var(--o4); min-width: 0; }
.anon-quoi-t { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--tx1); margin-bottom: 7px; }
.anon-quoi-t .iku-ico { color: var(--brand-strong); flex: 0 0 auto; }
.anon-quoi-l { margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 3px; }
.anon-quoi-l li { font-size: 11.5px; color: var(--color-text-muted); line-height: 1.45; }

/* ── LE CHIFFRE, EN TÊTE ─────────────────────────────────────────────────────────────────────────
   « X champs anonymisés en Y,Y s » est le résultat qu'on vient chercher : il prend la première ligne
   et la plus grande taille de la page. Le reste du bandeau est du contexte, en pastilles. */
.anon-bandeau {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    padding: 13px 16px; border-radius: 12px; border: 1px solid var(--color-teal-border);
    background: var(--color-teal-bg);
}
.anon-bandeau-n { display: flex; align-items: baseline; gap: 9px; min-width: 0; flex-wrap: wrap; }
.anon-bandeau-n b { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--brand-strong); font-variant-numeric: tabular-nums; line-height: 1.1; }
.anon-bandeau-n span { font-size: 13px; color: var(--tx1); font-weight: 600; }
.anon-bandeau-d { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.anon-chip {
    display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px;
    font-size: 10.5px; line-height: 1.35; white-space: nowrap; color: var(--color-text-muted);
    border: 1px solid var(--o12); background: var(--o4); max-width: 260px; overflow: hidden; text-overflow: ellipsis;
}
.anon-chip .iku-ico { flex: 0 0 auto; }
.anon-chip-run { color: var(--brand-strong); border-color: var(--color-teal-border); }

/* ── LA GARANTIE ─────────────────────────────────────────────────────────────────────────────────
   Recalculée en RELISANT le fichier produit. Elle mérite donc une bande à elle, pas une pastille. */
.anon-integre { display: flex; align-items: flex-start; gap: 9px; padding: 10px 14px; border-radius: 10px; font-size: 12px; line-height: 1.5; }
.anon-integre .iku-ico { flex: 0 0 auto; margin-top: 1px; }
.anon-integre.ok { color: var(--anon-ok); background: color-mix(in srgb, var(--anon-ok) 13%, transparent); border: 1px solid color-mix(in srgb, var(--anon-ok) 32%, transparent); }
.anon-integre.ok b { color: var(--anon-ok); }
.anon-integre.ko { color: var(--anon-ko); background: color-mix(in srgb, var(--anon-ko) 12%, transparent); border: 1px solid var(--anon-ko-bd); }

.anon-avert, .anon-err { display: flex; align-items: flex-start; gap: 9px; padding: 9px 13px; border-radius: 10px; font-size: 11.5px; line-height: 1.5; }
.anon-avert { color: var(--anon-warn); background: var(--anon-warn-bg); border: 1px solid var(--anon-warn-bd); }
.anon-err { color: var(--anon-ko); background: color-mix(in srgb, var(--anon-ko) 12%, transparent); border: 1px solid var(--anon-ko-bd); }
.anon-avert .iku-ico, .anon-err .iku-ico { flex: 0 0 auto; margin-top: 1px; }

/* ── LA GRILLE : choix à gauche, preuve à droite ──────────────────────────────────────────────────
   380 px à gauche, le reste à droite. Sous 1080 px la preuve passe SOUS le choix : deux colonnes de
   ~480 px écrasent le tableau avant/après, qui est justement ce qu'on vient regarder. */
.anon-grille { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 12px; align-items: start; }
.anon-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.anon-card { padding: 14px 16px; border-radius: 12px; border: 1px solid var(--o12); background: var(--color-bg-card); min-width: 0; }
.anon-card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.anon-card-t { font-size: 13px; font-weight: 700; color: var(--tx1); margin-bottom: 3px; }
.anon-card-p { font-size: 11.5px; color: var(--color-text-muted); line-height: 1.5; margin: 0 0 10px; }

/* ── LES CASES ───────────────────────────────────────────────────────────────────────────────────
   Chaque option est une CARTE cliquable, pas une ligne de formulaire : le libellé seul (« Noms de
   tiers ») ne dit pas ce que la case coûte ni ce qu'elle rapporte. La phrase d'explication et le
   compte de cellules font partie de la décision. */
.anon-opt {
    display: flex; align-items: flex-start; gap: 10px; padding: 9px 11px; margin-bottom: 6px;
    border-radius: 10px; border: 1px solid var(--o12); background: var(--o4); cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.anon-opt:hover { border-color: var(--color-border-hover); }
.anon-opt.on { border-color: var(--color-teal-border-soft); background: var(--color-teal-bg); }
.anon-opt.absent { opacity: .5; }
.anon-opt input[type=checkbox] { flex: 0 0 auto; margin-top: 2px; width: 15px; height: 15px; accent-color: var(--brand-strong); cursor: pointer; }
.anon-opt-x { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.anon-opt-h { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.anon-opt-h b { font-size: 12px; font-weight: 650; color: var(--tx1); }
.anon-opt-j {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; padding: 1px 5px;
    border-radius: 4px; color: var(--brand-strong); background: color-mix(in srgb, var(--brand) 13%, transparent);
    white-space: nowrap;
}
.anon-opt-x small { font-size: 11px; color: var(--color-text-muted); line-height: 1.45; }
.anon-opt-m { font-size: 10.5px; font-style: normal; color: var(--tx8, var(--color-text-secondary)); font-variant-numeric: tabular-nums; }

/* ── LES DEUX TÉLÉCHARGEMENTS ────────────────────────────────────────────────────────────────────
   Le FEC anonymisé est l'action principale (teintée) ; la table est son pendant, mais SECONDAIRE —
   la confondre avec le fichier à transmettre est l'erreur qui coûte cher. D'où l'avertissement
   juste dessous, et non en bas de page. */
.anon-dl {
    display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 13px; margin-bottom: 8px;
    text-align: left; border: 1px solid var(--o12); border-radius: 11px; background: var(--o4);
    cursor: pointer; font-family: inherit; color: inherit;
    transition: border-color .15s ease, background .15s ease;
}
.anon-dl:hover:not(:disabled) { border-color: var(--brand-strong); background: color-mix(in srgb, var(--brand) 7%, transparent); }
.anon-dl:disabled { cursor: default; opacity: .55; }
.anon-dl-1 { border-color: var(--color-teal-border-soft); background: var(--color-teal-bg); }
.anon-dl-ic { flex: 0 0 auto; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: var(--brand-strong); background: color-mix(in srgb, var(--brand) 14%, transparent); }
.anon-dl-x { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.anon-dl-x b { font-size: 12.5px; font-weight: 650; color: var(--tx1); }
.anon-dl-x small { font-size: 10.5px; color: var(--color-text-muted); line-height: 1.4; overflow-wrap: anywhere; }

.anon-garde {
    display: flex; align-items: flex-start; gap: 8px; padding: 9px 12px; border-radius: 10px; margin: 2px 0 10px;
    font-size: 11px; line-height: 1.5; color: var(--anon-warn);
    background: var(--anon-warn-bg); border: 1px solid var(--anon-warn-bd);
}
.anon-garde .iku-ico { flex: 0 0 auto; margin-top: 1px; }
.anon-garde b { font-weight: 700; }

.anon-mdp-t { display: flex; align-items: flex-start; gap: 9px; font-size: 11.5px; color: var(--tx1); cursor: pointer; }
.anon-mdp-t input[type=checkbox] { flex: 0 0 auto; margin-top: 2px; width: 14px; height: 14px; accent-color: var(--brand-strong); cursor: pointer; }
.anon-mdp-t small { display: block; font-size: 10.5px; color: var(--color-text-muted); line-height: 1.45; margin-top: 1px; }
.anon-mdp { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.anon-mdp-i {
    flex: 1 1 190px; min-width: 0; padding: 7px 10px; border-radius: 8px; font-family: inherit; font-size: 12px;
    color: var(--tx1); background: var(--color-bg-input); border: 1px solid var(--o14);
}
.anon-mdp-i:focus { outline: none; border-color: var(--brand-strong); }
.anon-mdp-b { flex: 0 0 auto; padding: 7px 13px; border-radius: 8px; border: 0; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--brand-contrast, #fff); background: var(--brand); }
.anon-mdp-b:disabled { opacity: .5; cursor: default; }
.anon-mdp-s { flex: 1 1 100%; font-size: 10.5px; color: var(--color-text-muted); line-height: 1.45; }
.anon-mdp-ok { display: inline-flex; align-items: center; gap: 4px; color: var(--anon-ok); }
.anon-mdp-ko { color: var(--anon-warn); }

/* ── RELECTURE ───────────────────────────────────────────────────────────────────────────────────── */
.anon-relire {
    position: relative; display: flex; align-items: center; gap: 11px; padding: 11px 13px; margin-bottom: 8px;
    border-radius: 11px; border: 1.5px dashed color-mix(in srgb, var(--brand-strong) 40%, transparent);
    background: var(--o4); cursor: pointer;
}
.anon-relire:hover { border-color: var(--brand-strong); }
.anon-relire.on { border-style: solid; border-color: color-mix(in srgb, var(--anon-ok) 32%, transparent); background: color-mix(in srgb, var(--anon-ok) 13%, transparent); }
.anon-relire input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.anon-relire-ic { flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: var(--brand-strong); background: color-mix(in srgb, var(--brand) 14%, transparent); }
.anon-relire.on .anon-relire-ic { color: var(--anon-ok); background: color-mix(in srgb, var(--anon-ok) 16%, transparent); }
.anon-relire-x { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.anon-relire-x b { font-size: 12.5px; font-weight: 650; color: var(--tx1); overflow-wrap: anywhere; }
.anon-relire-x small { font-size: 10.5px; color: var(--color-text-muted); }

.anon-relu-etat { display: flex; align-items: flex-start; gap: 8px; padding: 8px 11px; border-radius: 9px; margin-bottom: 8px; font-size: 11px; line-height: 1.5; }
.anon-relu-etat .iku-ico { flex: 0 0 auto; margin-top: 1px; }
.anon-relu-etat.ok { color: var(--anon-ok); background: color-mix(in srgb, var(--anon-ok) 13%, transparent); border: 1px solid color-mix(in srgb, var(--anon-ok) 32%, transparent); }
.anon-relu-etat.warn { color: var(--anon-warn); background: var(--anon-warn-bg); border: 1px solid var(--anon-warn-bd); }

.anon-lien { border: 0; background: none; padding: 3px 0; font-family: inherit; font-size: 11.5px; color: var(--color-text-muted); cursor: pointer; text-align: left; }
.anon-lien:hover { color: var(--tx1); }
.anon-lien-b { align-self: flex-start; }

/* ── LE LOT : une pastille par fichier dans l'aperçu, des liens de reprise après le geste ──────────
   Cinq fichiers au plus : des pastilles, pas un menu déroulant — on doit voir d'un coup d'œil lequel
   est ouvert. Les liens de reprise servent quand Chrome a refusé les téléchargements en série. */
.anon-fichiers { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.anon-fichier {
    max-width: 100%; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--o14); background: var(--o4);
    color: var(--color-text-secondary); font-family: inherit; font-size: 11px; cursor: pointer; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}
.anon-fichier:hover { border-color: var(--brand-strong); color: var(--tx1); }
.anon-fichier.on { color: var(--brand-contrast, #fff); background: var(--brand-strong); border-color: var(--brand-strong); font-weight: 650; }
.anon-reprises { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin-top: 4px; font-size: 11px; color: var(--color-text-muted); }
.anon-reprises .anon-lien { text-decoration: underline; text-underline-offset: 2px; }

/* ── APRÈS LE GESTE : ce qui est parti, ce qui ne vaut plus ──────────────────────────────────────── */
.anon-pris {
    display: flex; align-items: flex-start; gap: 8px; padding: 9px 12px; border-radius: 10px; margin: 2px 0 10px;
    font-size: 11px; line-height: 1.5; color: var(--anon-ok);
    background: color-mix(in srgb, var(--anon-ok) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--anon-ok) 32%, transparent);
}
.anon-pris .iku-ico { flex: 0 0 auto; margin-top: 1px; }
.anon-pris b { font-weight: 650; overflow-wrap: anywhere; }
/*  Même teinte d'alerte que `.anon-garde` : les deux encarts se suivent, et c'est voulu — l'un dit ce
    qu'il ne faut jamais transmettre, l'autre que ce qu'on a transmis ne vaut plus. */
.anon-garde-w { border-style: dashed; }

/*  « L'essayer » ne produit AUCUN fichier : elle se distingue du téléchargement teinté par son seul
    contour, sans lui disputer la place d'action principale. */
.anon-dl-2 { border-color: color-mix(in srgb, var(--brand-strong) 34%, transparent); }

/* ── LE VOLET DES VALEURS D'ORIGINE ───────────────────────────────────────────────────────────────
   Sobre tant qu'il est fermé, ALERTE dès qu'il est ouvert : c'est le seul état de cet écran où de
   vrais noms sont affichés, et rien d'autre ne le signalerait à quelqu'un qui regarde de loin. */
.anon-oeil {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px;
    border: 1px solid var(--o14); background: var(--o4); color: var(--color-text-secondary);
    font-family: inherit; font-size: 11px; cursor: pointer;
}
.anon-oeil:hover { border-color: var(--brand-strong); color: var(--tx1); }
.anon-oeil.on { color: var(--anon-warn); background: var(--anon-warn-bg); border-color: var(--anon-warn-bd); }
.anon-att { color: var(--anon-warn); font-weight: 700; }

/* ── AVANT / APRÈS ───────────────────────────────────────────────────────────────────────────────
   ⚠️ LE TABLEAU DÉBORDE HORIZONTALEMENT DANS SON PROPRE CONTENEUR, jamais dans la page. Un FEC a 18
   colonnes ; même réduit aux colonnes concernées il en reste 8 à 10, et les forcer dans la largeur
   disponible écrase les libellés à trois caractères — on ne verrait plus ce qu'on est venu vérifier.
   D'où `overflow-x: auto` ICI et `min-width: 0` sur toute la chaîne de parents (`.anon-col`,
   `.anon-card`), sans quoi la grille refuse de rétrécir et c'est la PAGE qui défile. */
.anon-card-f { display: flex; flex-direction: column; min-width: 0; }
.anon-legende { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.anon-lg { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--color-text-muted); }
.anon-lg i { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; }
.anon-lg-a { background: var(--o14); }
.anon-lg-b { background: color-mix(in srgb, var(--brand) 55%, transparent); }

/*  Barre de défilement RENDUE VISIBLE : avec les six champs cochés le tableau passe à douze colonnes
    et déborde pour de bon. Une barre fine mais présente est la seule chose qui dise qu'il reste des
    colonnes à droite — sans elle, l'écran a l'air d'en avoir perdu. */
.anon-tbl-x { overflow-x: auto; border-radius: 9px; border: 1px solid var(--o12); min-width: 0; scrollbar-width: thin; }
.anon-tbl { width: 100%; border-collapse: collapse; font-size: 11px; }
/*  ⚠️ PAS de `position: sticky` sur l'en-tête : le tableau tient en douze lignes et n'a AUCUN
    défilement vertical à lui. Collé, il se serait accroché au haut de la FENÊTRE pendant que la page
    défile — avec un fond translucide (les jetons `--oN` le sont tous), donc le contenu de la page
    visible au travers. Un en-tête collant se paie d'un fond opaque ; ici il ne sert à rien. */
.anon-tbl th {
    text-align: left; font-weight: 650; font-size: 10px;
    letter-spacing: .02em; text-transform: uppercase; color: var(--color-text-muted);
    padding: 7px 9px; background: var(--o6); white-space: nowrap;
    border-bottom: 1px solid var(--o12);
}
.anon-tbl td { padding: 6px 9px; vertical-align: top; border-bottom: 1px solid var(--color-border-subtle); max-width: 210px; }
.anon-tbl tbody tr:last-child td { border-bottom: 0; }
.anon-tbl tbody tr:hover td { background: var(--o4); }
.anon-th-n, .anon-td-n { width: 1%; white-space: nowrap; text-align: right; color: var(--color-text-dim); font-variant-numeric: tabular-nums; }

/* La cellule MODIFIÉE empile deux valeurs : l'origine en gris, la nouvelle en teinte de marque. Deux
   colonnes côte à côte (« avant » / « après ») auraient doublé la largeur d'un tableau déjà à 10
   colonnes ; empilées, elles se lisent d'un coup d'œil vertical. */
.anon-td-c { background: color-mix(in srgb, var(--brand) 7%, transparent); }
/*  Vue par défaut (le jeton seul) : un fond plus discret encore. Il dit « cette cellule a changé »
    sans avoir à montrer par rapport à quoi. */
.anon-td-a { background: color-mix(in srgb, var(--brand) 4%, transparent); }
.anon-v-a, .anon-v-b, .anon-v-n { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.anon-v-a { color: var(--color-text-dim); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--color-text-dim) 55%, transparent); font-size: 10.5px; }
.anon-v-b { color: var(--brand-strong); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; margin-top: 1px; }
.anon-v-b.anon-v-ok { color: var(--anon-ok); font-family: inherit; font-size: 11px; }
.anon-v-n { color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }

.anon-vide { padding: 22px 14px; text-align: center; font-size: 11.5px; color: var(--color-text-muted); border: 1px dashed var(--o12); border-radius: 9px; line-height: 1.5; }

/* ── LA TABLE EN UN COUP D'ŒIL ───────────────────────────────────────────────────────────────────── */
/*  ⚠️ DEUX COLONNES, PAS UN `space-between`. Avec `justify-content: space-between`, une valeur longue
    (l'empreinte sha256, la liste des règles) partait se coller au bord droit et repoussait son
    libellé : les quatre lignes n'avaient plus ni le même point de départ, ni le même point d'arrivée,
    et la liste se lisait en zigzag. Une grille fige la colonne des libellés ; les valeurs commencent
    toutes au même endroit et reviennent à la ligne dans leur propre colonne. */
.anon-kv { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.anon-kv > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 12px; align-items: baseline; font-size: 11px; }
.anon-kv span { color: var(--color-text-muted); }
.anon-kv code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; color: var(--tx1); overflow-wrap: anywhere; min-width: 0; line-height: 1.5; }
@media (max-width: 620px) { .anon-kv > div { grid-template-columns: minmax(0, 1fr); } }
/*  `.anon-json` (l'extrait de la table) a été retiré le 2026-09-16 avec le bloc qu'il stylait : il
    rendait de vrais noms sur l'écran qui sert à les retirer. */
.anon-card-p code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; color: var(--brand-strong); }

/* ── ÉTROIT ──────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
    .anon-grille, .anon-duo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
    .anon-quoi { grid-template-columns: 1fr; }
    .anon-bandeau { flex-direction: column; align-items: flex-start; }
    .anon-bandeau-d { justify-content: flex-start; }
    .anon-bandeau-n b { font-size: 22px; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   LA MODALE (AnonymiserModal) — demande d'Arthur du 2026-09-16 : l'outil s'ouvre DANS l'app.
   Elle ne porte que le cadre : l'intérieur reste `.anon`, identique à celui de la page /anonymiser.
   ⚠️ `position: fixed` et RIEN au-dessus qui pose un `backdrop-filter` : un ancêtre filtré deviendrait
   le bloc conteneur du `fixed` et la modale se recadrerait sur lui (piège déjà payé ailleurs).
   ⚠️ Le z-index se règle AUSSI dans entry.css : sous `.fec-content`, ce 5200 ne se compare qu'à ses
   frères. Voir la règle `.fec-loader:has(.anonm-back)`.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */
.anonm-back {
    position: fixed; inset: 0; z-index: 5200; display: flex; align-items: center; justify-content: center;
    padding: 24px 16px; background: rgba(4, 12, 18, .62); animation: anonm-in .16s ease-out;
}
html[data-theme="light"] .anonm-back { background: rgba(28, 42, 52, .42); }
@keyframes anonm-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .anonm-back { animation: none; } }

.anonm-box {
    display: flex; flex-direction: column; width: min(1180px, 100%); max-height: 100%; min-height: 0;
    border-radius: 16px; border: 1px solid var(--o12); background: var(--color-bg-surface, var(--bg1, #0d1b24));
    box-shadow: 0 24px 70px rgba(0, 0, 0, .46); overflow: hidden;
}
.anonm-hd {
    flex: 0 0 auto; display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px;
    border-bottom: 1px solid var(--o12);
}
.anonm-hd-x { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.anonm-hd-x b { font-size: 15px; font-weight: 700; color: var(--tx1); }
.anonm-hd-x small { font-size: 11.5px; line-height: 1.5; color: var(--color-text-muted); }
.anonm-x {
    flex: 0 0 auto; width: 28px; height: 28px; margin-left: auto; display: grid; place-items: center;
    border: 1px solid var(--o12); border-radius: 8px; background: var(--o4); color: var(--color-text-secondary); cursor: pointer;
}
.anonm-x:hover { color: var(--tx1); border-color: var(--brand-strong); }

/*  Le corps défile, l'en-tête reste : un FEC traité produit un écran long, et perdre le titre et la
    croix en cours de lecture oblige à remonter pour fermer. */
.anonm-bd { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 16px; }

@media (max-width: 760px) {
    .anonm-back { padding: 0; }
    .anonm-box { width: 100%; height: 100%; max-height: 100%; border-radius: 0; border: 0; }
    .anonm-bd { padding: 12px; }
}

/* ── L'ACTION, EN TÊTE ET SUR DEUX COLONNES ──────────────────────────────────────────────────────
   « Vos fichiers » et « L'essayer » sortent de la colonne de gauche (Arthur, « bad ux ici », 2026-09-16 :
   380 px de large, 1 500 px de haut, 755 px de vide à côté). Côte à côte, pleine largeur, AVANT la grille :
   prendre le fichier et l'essayer sont les deux gestes qu'on est venu faire ; les options se règlent après. */
.anon-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.anon-duo .anon-card { min-width: 0; }