/* anon-v2.css — UI simplifiée de l'anonymiseur (refonte juin 2026) */
.anon-wrap { --anon-primary: var(--c-primary, #064E5A); --anon-line: #e2e6ea; }

/* Menu d'actions (dropdown WAI-ARIA, remplace la surcharge de boutons) */
.anon-menu-wrap { position: relative; display: inline-block; }
.anon-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; min-width: 230px;
  background: #fff; border: 1px solid var(--anon-line); border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.14);
  padding: .35rem; display: flex; flex-direction: column; gap: .15rem; }
.anon-menu.hidden { display: none; }
.anon-menu-item { display: flex; align-items: center; gap: .55rem; width: 100%; text-align: left;
  padding: .6rem .75rem; border: none; background: none; border-radius: 8px; font: inherit; color: #1A1D23;
  cursor: pointer; min-height: 44px; }
.anon-menu-item:hover, .anon-menu-item:focus-visible { background: #ECFDF5; outline: none; }
.anon-menu-item:focus-visible { box-shadow: 0 0 0 2px #9A2A06; }

/* Bulle contextuelle d'anonymisation (apparaît près de la sélection) */
.anon-sel-bubble { position: fixed; z-index: 50; transform: translateX(-50%); }
.anon-sel-bubble.hidden { display: none; }
.anon-sel-bubble button { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .85rem;
  background: #1A1D23; color: #fff; border: none; border-radius: 999px; font: inherit; font-weight: 600;
  font-size: .88rem; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.28); white-space: nowrap; min-height: 40px; }
.anon-sel-bubble button:hover { background: #064E5A; }
.anon-sel-bubble button:focus-visible { outline: 2px solid #9A2A06; outline-offset: 2px; }
.anon-sel-bubble::after { content: ''; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%) rotate(45deg);
  width: 10px; height: 10px; background: #1A1D23; z-index: -1; }
.anon-sel-main { display: flex; align-items: stretch; gap: 2px; background: #1A1D23; border-radius: 999px; }
.anon-sel-bubble #anonSelBubbleCustomBtn { padding: .5rem .7rem; font-size: .95rem; border-radius: 0 999px 999px 0; }
.anon-sel-bubble #anonSelBubbleBtn { border-radius: 999px 0 0 999px; }
.anon-sel-custom { display: flex; gap: 4px; margin-top: 6px; background: #1A1D23; padding: 4px; border-radius: 12px; }
.anon-sel-custom.hidden { display: none; }
.anon-sel-custom input { flex: 1 1 180px; min-width: 160px; padding: .45rem .6rem; border: none; border-radius: 8px; font: inherit; font-size: .88rem; }
.anon-sel-custom input:focus { outline: 2px solid #9A2A06; }
.anon-sel-custom button { padding: .45rem .7rem; background: #047857; color: #fff; border: none; border-radius: 8px; cursor: pointer; font-weight: 700; }
.anon-steps { display: flex; gap: .5rem; margin: 0 0 1.25rem; flex-wrap: wrap; }
.anon-step { flex: 1 1 0; min-width: 140px; display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem;
  background: #fff; border: 1px solid var(--anon-line); border-radius: 12px; cursor: pointer; font: inherit; text-align: left; transition: .15s; }
.anon-step:hover { border-color: var(--anon-primary); }
.anon-step.active { border-color: var(--anon-primary); box-shadow: 0 0 0 2px rgba(6,78,90,.12); }
.anon-step .num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border-radius: 50%; background: #eef2f4; color: var(--anon-primary); font-weight: 700; flex-shrink: 0; }
.anon-step.active .num { background: var(--anon-primary); color: #fff; }
.anon-step .lbl { font-weight: 600; color: #1A1D23; font-size: .95rem; }

.anon-panel { display: none; }
.anon-panel.active { display: block; animation: anonFade .2s ease; }
@keyframes anonFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.anon-help { background: #ECFDF5; border: 1px solid rgba(6,78,90,.18); border-radius: 12px;
  padding: .85rem 1.1rem; margin-bottom: 1rem; font-size: .92rem; line-height: 1.55; color: #1A1D23; }
.anon-help ol { margin: .4rem 0 0; padding-left: 1.2rem; }

.anon-field { margin-bottom: 1rem; }
.anon-label { display: block; font-weight: 600; margin-bottom: .4rem; color: #1A1D23; }
.anon-textarea { width: 100%; box-sizing: border-box; min-height: 160px; padding: .85rem 1rem; border: 1px solid var(--anon-line);
  border-radius: 12px; font: inherit; line-height: 1.5; resize: vertical; background: #fff; color: #1A1D23; }
.anon-textarea:focus { outline: 2px solid var(--anon-primary); outline-offset: 1px; border-color: var(--anon-primary); }
.anon-textarea[readonly] { background: #f8fafb; }
/* Champs auto-extensibles : pas de scrollbar interne, la page défile */
.anon-textarea { overflow: hidden; }

/* Éditeur riche (contenteditable) : conserve la mise en forme collée (gras, italique, listes) */
.anon-rich { overflow: auto; cursor: text; white-space: pre-wrap; word-wrap: break-word; }
.anon-rich:empty::before { content: attr(data-placeholder); color: #52586a; font-style: italic; pointer-events: none; }
.anon-rich:focus { white-space: pre-wrap; }
/* Rendu des listes dans l'éditeur ET le volet annoté (mise en forme préservée).
   Marges de bloc à 0 pour épouser le rythme vertical du textarea de sortie → parité de comparaison. */
#anonSource ul, #anonAnnotated ul, #anonOutput ul { list-style: disc; padding-left: 1.4rem; margin: 0; }
#anonSource ol, #anonAnnotated ol, #anonOutput ol { list-style: decimal; padding-left: 1.4rem; margin: 0; }
#anonSource li, #anonAnnotated li, #anonOutput li { margin: 0; }
#anonSource p, #anonAnnotated p, #anonOutput p { margin: 0; }
#anonSource h1, #anonAnnotated h1, #anonOutput h1, #anonSource h2, #anonAnnotated h2, #anonOutput h2, #anonSource h3, #anonAnnotated h3, #anonOutput h3 { margin: 0; font-weight: 700; line-height: 1.5; }
#anonSource blockquote, #anonAnnotated blockquote, #anonOutput blockquote { margin: 0; padding-left: .8rem; border-left: 3px solid var(--anon-line); color: #52586a; }
/* Colonne droite = vue riche miroir (lecture seule) : même hauteur min + retour à la ligne */
#anonOutput { min-height: 200px; white-space: pre-wrap; word-wrap: break-word; overflow: auto; }
#anonOutput:focus { outline: 2px solid var(--anon-primary); outline-offset: 1px; }

/* Bouton « Copier » flottant en haut-droite du panneau résultat (overlay → n'affecte pas l'alignement) */
.anon-output-wrap { position: relative; }
/* Ligne d'en-tête de volet : label + (à droite) bouton « Copier ». Le bouton vit DANS l'en-tête
   (au-dessus de la boîte), jamais en overlay sur le texte → zéro chevauchement à toute largeur.
   Les deux volets ont une `.anon-pane-head` de même hauteur → boîtes alignées en mode 2 colonnes. */
.anon-pane-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 2.2em; margin-bottom: .4rem; }
.anon-pane-head .anon-pane-label { margin-bottom: 0; height: auto; }
.anon-copy-inline { flex-shrink: 0; display: inline-flex; align-items: center; gap: .3rem; background: var(--anon-primary);
  color: #fff; border: none; border-radius: 8px; padding: .35rem .7rem; font: inherit; font-size: .82rem; font-weight: 600;
  cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.18); height: 2.2em; }
.anon-copy-inline:hover { filter: brightness(1.1); }
.anon-copy-inline:focus-visible { outline: 2px solid #9A2A06; outline-offset: 2px; }

/* Étape 2 — résultat restauré : vraies données SURLIGNÉES (vert = restauré), valeur anonyme au survol/focus */
#restoredOutput { min-height: 120px; white-space: pre-wrap; word-wrap: break-word; overflow: auto; }
#restoredOutput:focus { outline: 2px solid var(--anon-primary); outline-offset: 1px; }
.anon-restored { background: #D1FAE5; color: #065F46; border-radius: 4px; padding: 0 3px; font-weight: 600;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; cursor: help; }
.anon-restored:focus-visible { outline: 2px solid #9A2A06; outline-offset: 1px; }
/* Bascule globale : révèle tous les faux en ligne « vrai (faux) » */
#restoredOutput.lv-show-fakes .anon-restored::after { content: ' (' attr(data-fake) ')'; color: #9A2A06; font-weight: 600; font-size: .9em; }
/* Tooltip accessible (WCAG 1.4.13) */
.anon-tip { position: fixed; z-index: 60; transform: translateX(-50%); background: #1A1D23; color: #fff;
  padding: .4rem .65rem; border-radius: 8px; font-size: .85rem; font-weight: 600; box-shadow: 0 6px 20px rgba(0,0,0,.28);
  white-space: nowrap; max-width: 280px; pointer-events: auto; }
.anon-tip.hidden { display: none; }
/* En plein écran (API Fullscreen native via tools::partials.fullscreen-btn), la carte remplit l'écran */
:fullscreen .anon-grid, :-webkit-full-screen .anon-grid { min-height: 60vh; }
:fullscreen .card-body, :-webkit-full-screen .card-body { max-width: 1400px; margin: 0 auto; }

.anon-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .85rem; }
.anon-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .65rem 1.1rem; border-radius: 10px;
  border: 1px solid var(--anon-primary); background: var(--anon-primary); color: #fff; font: inherit; font-weight: 600;
  cursor: pointer; min-height: 44px; transition: .15s; }
.anon-btn:hover { filter: brightness(1.08); }
.anon-btn.secondary { background: #fff; color: var(--anon-primary); }
.anon-btn:focus-visible { outline: 2px solid #9A2A06; outline-offset: 2px; }

.anon-detect-list { display: flex; flex-direction: column; gap: .4rem; margin-top: .85rem; }
.anon-detect-row { display: flex; align-items: center; gap: .6rem; padding: .55rem .8rem;
  border: 1px solid var(--anon-line); border-radius: 10px; cursor: pointer; }
.anon-detect-row:hover { background: #f8fafb; }
.anon-detect-cat { display: inline-block; font-size: .78rem; font-weight: 700; color: var(--anon-primary);
  background: #ECFDF5; padding: .12rem .5rem; border-radius: 999px; }
.anon-empty { color: #52586a; font-style: italic; margin: .6rem 0; }

.anon-manual { margin-top: .85rem; padding: .85rem; border: 1px dashed var(--anon-line); border-radius: 10px; }
.anon-manual.hidden { display: none; }
.anon-manual .row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; }
.anon-input, .anon-select { padding: .6rem .8rem; border: 1px solid var(--anon-line); border-radius: 10px; font: inherit; min-height: 44px; }
.anon-input { flex: 1 1 220px; }

.anon-mapping { margin-top: 1rem; display: flex; flex-direction: column; gap: .4rem; }
.anon-rule-item { display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .5rem .8rem; background: #f8fafb; border: 1px solid var(--anon-line); border-radius: 10px; }
.anon-rule-text { font-size: .9rem; color: #1A1D23; }
.anon-rule-remove { border: none; background: none; color: #991B1B; font-size: 1.1rem; cursor: pointer;
  width: 32px; height: 32px; border-radius: 8px; }
.anon-rule-remove:hover { background: #FEF2F2; }

.anon-report { margin: .6rem 0; padding: .75rem .9rem; border-radius: 10px; background: #ECFDF5;
  border: 1px solid rgba(6,78,90,.18); color: #065F46; font-size: .9rem; }
.anon-report:empty { display: none; }
/* Rapport de restauration structuré : en-tête + puces des valeurs non retrouvées */
.anon-rep-head { display: flex; align-items: flex-start; gap: .5rem; line-height: 1.45; }
.anon-rep-ico { flex-shrink: 0; }
.anon-rep-missing { margin-top: .6rem; padding-top: .55rem; border-top: 1px solid rgba(6,78,90,.15); }
.anon-rep-note { color: #41506b; font-size: .85rem; margin-bottom: .5rem; line-height: 1.4; }
.anon-rep-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.anon-rep-chip { display: inline-block; background: #fff; border: 1px solid var(--anon-line); color: #1A1D23;
  border-radius: 999px; padding: .2rem .6rem; font-size: .82rem; font-weight: 600; }

/* ===== Éditeur annoté inline (refonte UX juin 2026) ===== */
.anon-toolbar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: .5rem;
  padding: .6rem 0; margin-bottom: .85rem; background: #fff; border-bottom: 1px solid var(--anon-line); }
.anon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
@media (max-width: 860px) { .anon-grid { grid-template-columns: 1fr; } }
/* Dans le constructeur de prompts, l'éditeur est imbriqué dans une card étroite (col-lg-8) :
   2 colonnes y donnaient ~39 ch/volet (serré). On empile (volets pleine largeur ~83 ch, plus lisibles).
   Scoppé #cpAnonPanel → l'anonymiseur autonome garde son affichage 2 colonnes. */
#cpAnonPanel .anon-grid { grid-template-columns: 1fr; }
/* Bascule de vue : Éditeur pleine largeur / Split / Aperçu pleine largeur */
.anon-grid.view-editor { grid-template-columns: 1fr; }
.anon-grid.view-editor > .anon-pane-preview { display: none; }
.anon-grid.view-preview { grid-template-columns: 1fr; }
.anon-grid.view-preview > .anon-pane-editor { display: none; }
.anon-viewswitch { display: inline-flex; gap: 2px; padding: 3px; background: #eef2f4; border-radius: 10px; margin-bottom: .85rem; }
.anon-viewswitch button { border: none; background: none; font: inherit; font-size: .88rem; padding: .4rem .8rem; border-radius: 8px; cursor: pointer; color: #1A1D23; min-height: 38px; }
.anon-viewswitch button[aria-pressed="true"] { background: #fff; color: var(--anon-primary); font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.anon-viewswitch button:focus-visible { outline: 2px solid #9A2A06; outline-offset: 1px; }
/* Hauteur fixe égale pour les 2 labels → les boîtes gauche/droite démarrent au MÊME Y (parité).
   nowrap : le « ? » reste à côté du texte (ne retombe pas sur une 3e ligne). */
.anon-pane-label { font-weight: 600; color: #1A1D23; margin-bottom: .4rem; display: flex; align-items: center; flex-wrap: nowrap; gap: 4px; font-size: .92rem; height: 2.2em; line-height: 1.2; }

#anonEditorWrap.mode-edit #anonAnnotated { display: none; }
#anonEditorWrap.mode-annotate #anonSource { display: none; }

#anonAnnotated { white-space: pre-wrap; word-wrap: break-word; min-height: 200px; padding: .85rem 1rem;
  border: 1px solid var(--anon-line); border-radius: 12px; background: #fff; line-height: 1.5; color: #1A1D23; }
#anonAnnotated:focus { outline: 2px solid var(--anon-primary); outline-offset: 1px; }
.anon-placeholder { color: #52586a; font-style: italic; }

/* Souligné = candidat (sera anonymisé) */
.anon-cand { text-decoration: underline; text-decoration-style: dashed; text-decoration-thickness: 2px;
  text-underline-offset: 3px; text-decoration-color: #0B7285; cursor: pointer; border-radius: 3px; }
.anon-cand:hover { background: #ECFDF5; }

/* Surligné = anonymisé (actif) */
.anon-anon { background: #B9ECE2; color: #064E5A; border-radius: 4px; padding: 0 3px; cursor: pointer;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; font-weight: 600; }
.anon-anon:hover { background: #97E0D1; }

#anonAnnotated span[role="button"]:focus-visible { outline: 2px solid #9A2A06; outline-offset: 1px; }

.anon-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin: .5rem 0 0; font-size: .82rem; color: #52586a; }
.anon-legend .anon-cand, .anon-legend .anon-anon { cursor: default; }

/* ===== Tablette + mobile (≤860px : grille empilée) : cibles tactiles ≥44px (WCAG 2.5.5) =====
   La bascule de vue et le bouton « Copier » de l'en-tête passent à 44px (les deux volets gardent
   une `.anon-pane-head` de même hauteur → alignement préservé). Le bouton n'a jamais été en overlay
   donc aucun chevauchement de texte, quelle que soit la largeur (corrige l'overlap vu jusqu'à 1440px). */
@media (max-width: 860px) {
  .anon-viewswitch { width: 100%; }
  .anon-viewswitch button { min-height: 44px; flex: 1; }
  .anon-pane-head { min-height: 44px; }
  .anon-copy-inline { height: auto; min-height: 44px; }
}
/* ===== Mobile (≤480px) : 16px empêche le zoom automatique de Safari iOS au focus ===== */
@media (max-width: 480px) {
  .anon-textarea { font-size: 16px; }
}