/* ── La fenêtre « ✂️ Anonymiser » — composant partagé, hors optimiseurs ────
   Popup autonome, installable sur n'importe quelle page statique du site
   (/anonymiser-ses-donnees/, /prompts/…). Les optimiseurs ont leur propre
   fenêtre, dans /shared/opt-anonymiser-doc.js — même moteur, avec en plus le
   ciblage d'un champ de l'application. Celle-ci n'a pas de champ à cibler :
   elle propose de copier le résultat, ou de le télécharger.

   ⚠️ FEUILLE INDÉPENDANTE, à dessein. La fenêtre des optimiseurs réutilise
   optimiseur-ui.css — pensée pour une application React compilée, avec sa
   barre d'onglets et son propre système de couleur par page. La charger sur
   une page statique aurait apporté des centaines de lignes sans rapport.
   Ici, la même identité visuelle que /anonymiseur/ elle-même (teinte
   ardoise) — c'est le même outil, il doit se reconnaître d'un coup d'œil.

   Installer (avec anonymiseur-popup.js, voir ce fichier) :
   <link rel="stylesheet" href="/shared/anonymiseur-popup.css">
   ───────────────────────────────────────────────────────────────────── */

.anonp-ov {
  position: fixed; inset: 0; z-index: 100010;
  background: rgba(20, 30, 36, .55);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 5vh 16px; overflow-y: auto;
}

.anonp-modale {
  --anonp-accent: #2f5d6e;
  --anonp-accent-clair: #e4eff2;
  --anonp-accent-fonce: #1c3c48;
  --anonp-vert: #2f6b4f;
  --anonp-vert-clair: #e5f3ea;
  --anonp-brique: #a8442a;
  --anonp-brique-clair: #fbece8;
  --anonp-ambre: #8a6512;
  --anonp-ambre-clair: #fbf2dd;
  --anonp-trait: rgba(29, 50, 60, .14);
  --anonp-doux: #5a6a71;
  --anonp-encre: #1a2a31;
  width: 100%; max-width: 620px; margin: auto 0;
  background: #fff; color: var(--anonp-encre);
  border-radius: var(--r-xl, 20px);
  box-shadow: var(--sh-3, 0 24px 60px -12px rgba(20, 30, 36, .4), 0 4px 14px rgba(20, 30, 36, .18));
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif;
  font-size: 14.5px; line-height: 1.55;
}

.anonp-tete {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding: 20px 20px 14px; border-bottom: 1px solid var(--anonp-trait);
}
.anonp-tete h2 { margin: 0 0 4px; font-size: 18px; color: var(--anonp-accent-fonce); }
.anonp-tete p { margin: 0; color: var(--anonp-doux); font-size: 13px; }

.anonp-fermer {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: var(--r-pill, 999px);
  border: 1px solid var(--anonp-trait); background: #fff; color: var(--anonp-doux);
  font-size: 15px; cursor: pointer; line-height: 1;
}
.anonp-fermer:hover { background: var(--anonp-accent-clair); color: var(--anonp-accent-fonce); }

.anonp-corps { padding: 18px 20px 22px; max-height: 74vh; overflow-y: auto; }

.anonp-primaire, .anonp-secondaire {
  font: inherit; font-weight: 600; font-size: 13.5px;
  border-radius: var(--r-md, 12px); padding: 10px 16px; cursor: pointer;
  border: 1px solid transparent;
}
.anonp-primaire { background: var(--anonp-accent); color: #fff; }
.anonp-primaire:hover { background: var(--anonp-accent-fonce); }
.anonp-primaire:disabled { opacity: .6; cursor: default; }
.anonp-secondaire { background: var(--anonp-accent-clair); color: var(--anonp-accent-fonce); border-color: rgba(47, 93, 110, .22); }
.anonp-secondaire:hover { background: #d7e6ea; }

.anonp-depot {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; padding: 30px 16px; border-radius: var(--r-lg, 16px);
  border: 2px dashed rgba(47, 93, 110, .35); background: var(--anonp-accent-clair);
  cursor: pointer; margin-bottom: 12px;
}
.anonp-depot.est-survole { border-color: var(--anonp-accent); background: #d7e6ea; }
.anonp-depot b { color: var(--anonp-accent-fonce); font-size: 14.5px; }
.anonp-depot small { color: var(--anonp-doux); font-size: 12px; }
.anonp-depot input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

.anonp-alerte {
  margin: 10px 0; padding: 10px 12px; border-radius: var(--r-md, 12px);
  background: var(--anonp-brique-clair); border: 1px solid rgba(168, 68, 42, .3);
  color: var(--anonp-brique); font-size: 13px;
}

.anonp-fichier {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; border-radius: var(--r-md, 12px); background: #f4f7f7;
  margin-bottom: 10px; font-size: 13px;
}
.anonp-fichier b { color: var(--anonp-accent-fonce); }
.anonp-fichier span { color: var(--anonp-doux); }
.anonp-changer {
  margin-left: auto; background: none; border: none; color: var(--anonp-accent);
  font: inherit; font-size: 12.5px; cursor: pointer; text-decoration: underline;
}

.anonp-cache {
  margin-bottom: 10px; padding: 10px 12px; border-radius: var(--r-md, 12px);
  background: var(--anonp-ambre-clair); color: var(--anonp-ambre); font-size: 12.5px;
}

.anonp-h3 { font-size: 13.5px; font-weight: 700; color: var(--anonp-accent-fonce); margin: 16px 0 6px; }
.anonp-note-h3 { font-size: 12px; color: var(--anonp-doux); margin: 0 0 8px; }

.anonp-outils { display: flex; gap: 8px; margin-bottom: 10px; }
.anonp-outils button {
  font: inherit; font-size: 12px; padding: 6px 12px; border-radius: var(--r-pill, 999px);
  border: 1px solid var(--anonp-trait); background: #fff; color: var(--anonp-accent-fonce); cursor: pointer;
}
.anonp-outils button:hover { background: var(--anonp-accent-clair); }

.anonp-vide { color: var(--anonp-doux); font-size: 13px; margin: 8px 0; }

.anonp-ligne {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; border-radius: var(--r-sm, 8px); margin-bottom: 6px; background: #f8fafa;
}
.anonp-ligne.est-douteux { background: var(--anonp-ambre-clair); }
/* Le pourquoi et le choix masquer/généraliser (posés par le moteur,
   /shared/anonymiseur-doc.js) prennent toute la largeur, sous la ligne. */
.anonp-ligne .anpd-aide, .anonp-ligne .anpd-choix { flex: 1 1 100%; padding-left: 25px; color: var(--anonp-encre); }
.anonp-ligne .anpd-doute { color: var(--anonp-ambre); }
#anonp-3r { margin: 4px 0 2px; color: var(--anonp-accent-fonce); }
.anonp-ligne-tete { display: flex; align-items: center; gap: 8px; flex: 1 1 220px; min-width: 0; cursor: pointer; }
.anonp-ligne-tete input[type=checkbox] { width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--anonp-accent); }
.anonp-quoi { display: flex; flex-direction: column; min-width: 0; }
.anonp-type { font-size: 11px; text-transform: uppercase; letter-spacing: .02em; color: var(--anonp-doux); }
.anonp-valeur { font-size: 13px; color: var(--anonp-encre); overflow-wrap: anywhere; }
.anonp-doute { font-size: 10.5px; color: var(--anonp-ambre); font-weight: 700; }
.anonp-balise {
  font: inherit; font-size: 12.5px; width: 150px; max-width: 40vw;
  padding: 5px 8px; border-radius: var(--r-sm, 8px); border: 1px solid var(--anonp-trait);
}
.anonp-retirer {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: var(--r-pill, 999px);
  border: none; background: none; color: var(--anonp-brique); cursor: pointer;
}

.anonp-ajout { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 4px; }
.anonp-ajout input[type=text], .anonp-ajout select {
  font: inherit; font-size: 13px; padding: 8px 10px; border-radius: var(--r-sm, 8px);
  border: 1px solid var(--anonp-trait);
}
.anonp-ajout input[type=text] { flex: 1 1 180px; min-width: 0; }

.anonp-images { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.anonp-image {
  display: flex; flex-direction: column; align-items: center; gap: 6px; width: 88px;
  font-size: 11px; text-align: center; color: var(--anonp-doux); cursor: pointer;
}
.anonp-vignette {
  width: 64px; height: 64px; border-radius: var(--r-sm, 8px); background: #e2e8e9 center/cover no-repeat;
  border: 2px solid transparent;
}
.anonp-image.est-masque .anonp-vignette { border-color: var(--anonp-brique); opacity: .55; }

.anonp-bilan { margin-top: 14px; padding: 12px 14px; border-radius: var(--r-md, 12px); font-size: 13px; }
.anonp-bilan.est-ok { background: var(--anonp-vert-clair); color: var(--anonp-vert); }
.anonp-bilan.est-ko { background: var(--anonp-brique-clair); color: var(--anonp-brique); }
.anonp-bilan ul { margin: 6px 0 0 18px; }

.anonp-apercu {
  margin-top: 10px; padding: 12px 14px; border-radius: var(--r-md, 12px);
  background: #f4f7f7; font-size: 13px; white-space: pre-wrap; word-break: break-word;
  max-height: 220px; overflow-y: auto;
}
.anonp-apercu mark { background: rgba(250, 204, 21, .5); border-radius: 3px; padding: 0 2px; }

.anonp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.anonp-lot, .anonp-passerelle {
  margin-top: 14px; padding: 12px 14px; border-radius: var(--r-md, 12px); background: #f4f7f7;
}
.anonp-lot h3, .anonp-passerelle h3 { font-size: 13px; margin: 0 0 4px; color: var(--anonp-accent-fonce); }
.anonp-note { font-size: 12px; color: var(--anonp-doux); margin: 0 0 8px; }
.anonp-passerelle a { color: var(--anonp-accent); font-weight: 600; }

#anonp-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px);
  z-index: 100020; background: #1a2a31; color: #fff; padding: 10px 18px;
  border-radius: var(--r-pill, 999px); font-size: 13px; opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s;
}
#anonp-toast.est-vu { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) { #anonp-toast { transition: none; } }

@media (max-width: 640px) {
  .anonp-ov { padding: 0; align-items: stretch; }
  .anonp-modale { max-width: none; height: 100vh; height: 100dvh; border-radius: 0; margin: 0; }
  .anonp-corps { max-height: calc(100vh - 74px); max-height: calc(100dvh - 74px); }
}