/* La vue « Contrôle des factures » (assets/js/vue-rapprochement3.js) : trois volets, liste des
   factures | lignes rapprochées | facture et bon de réception, la ligne choisie surlignée. Chaque
   volet défile à l'intérieur ; la page ne défile pas. */.r3-hote { height: 100%; min-height: 0; }
/* hidden l'emporte toujours (les display posés plus bas ne doivent pas le défaire). */
.r3-hote .r3v [hidden] { display: none !important; }
.r3-hote .r3v {
  --r3v-panel: #fff; --r3v-ink: #18212b; --r3v-muted: #5d6977; --r3v-line: #d8dee5; --r3v-soft: #f5f7f9;
  --r3v-accent: #1f5fa8; --r3v-accent-soft: #e3edf8; --r3v-mark: #ffd84a; --r3v-mark-edge: #d9a400; --r3v-desk: #d7dde3;
  --r3v-ok: #1d7a4a; --r3v-ok-bg: #e2f3ea; --r3v-warn: #9a5b00; --r3v-warn-bg: #fcefd6; --r3v-bad: #b4282e; --r3v-bad-bg: #fbe3e3; --r3v-info: #4a5868; --r3v-info-bg: #e9edf1;
  --r3v-data: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  display: grid; grid-template-columns: 240px minmax(0, 1fr) minmax(0, 1.05fr); grid-template-rows: auto minmax(0, 1fr);
  gap: 12px; height: 100%; min-height: 560px; color: var(--r3v-ink); font-size: .86rem; line-height: 1.45;
}
.r3-hote .r3v-msg { grid-column: 1 / -1; margin: auto; display: flex; align-items: center; gap: 10px; color: var(--r3v-muted); padding: 30px; }
.r3-hote .r3v-msg--ko { color: var(--r3v-bad); }
.r3-hote .r3v-top { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.r3-hote .r3v-top h2 { font-size: 1.1rem; font-weight: 700; margin: 0; }
.r3-hote .r3v-sub { color: var(--r3v-muted); font-size: .8rem; }
.r3-hote .r3v-legend { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.r3-hote .r3v-pane { background: var(--r3v-panel); border: 1px solid var(--r3v-line); border-radius: 8px; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.r3-hote .r3v-pill { display: inline-flex; align-items: center; gap: 5px; font-size: .7rem; font-weight: 600; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.r3-hote .r3v-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.r3-hote .r3v-s-ok { color: var(--r3v-ok); background: var(--r3v-ok-bg); }
.r3-hote .r3v-s-reserve, .r3-hote .r3v-s-hors { color: var(--r3v-warn); background: var(--r3v-warn-bg); }
.r3-hote .r3v-s-presta { color: var(--r3v-info); background: var(--r3v-info-bg); }
.r3-hote .r3v-s-ecart { color: var(--r3v-bad); background: var(--r3v-bad-bg); }
.r3-hote .r3v-doux { color: var(--r3v-muted); }
.r3-hote .r3v-esp { flex: 1; }
/* liste */
.r3-hote .r3v-lt { padding: 10px 10px 6px; display: grid; gap: 6px; border-bottom: 1px solid var(--r3v-line); }
.r3-hote .r3v-lt h3, .r3-hote .r3v-lbl { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--r3v-muted); font-weight: 600; margin: 0; }
.r3-hote .r3v-q { width: 100%; box-sizing: border-box; border: 1px solid var(--r3v-line); border-radius: 6px; padding: 5px 8px; font: inherit; }
.r3-hote .r3v-filtres { display: flex; flex-wrap: wrap; gap: 4px; }
.r3-hote .r3v-f { font: inherit; font-size: .72rem; border: 1px solid var(--r3v-line); background: var(--r3v-soft); color: var(--r3v-ink); border-radius: 999px; padding: 1px 8px; cursor: pointer; }
.r3-hote .r3v-f small { color: var(--r3v-muted); }
.r3-hote .r3v-f.on { border-color: var(--r3v-accent); background: var(--r3v-accent-soft); }
.r3-hote .r3v-l { overflow: auto; padding: 4px 6px 8px; flex: 1; min-height: 0; }
.r3-hote .r3v-inv { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; width: 100%; text-align: left; background: none; border: 0; border-radius: 6px; padding: 8px; color: inherit; font: inherit; cursor: pointer; }
.r3-hote .r3v-inv:hover { background: var(--r3v-soft); }
.r3-hote .r3v-inv[aria-current="true"] { background: var(--r3v-accent-soft); }
.r3-hote .r3v-inv .n { font-family: var(--r3v-data); font-size: .78rem; font-weight: 500; white-space: nowrap; }
.r3-hote .r3v-inv .f { color: var(--r3v-muted); font-size: .78rem; }
.r3-hote .r3v-inv .t { font-family: var(--r3v-data); font-size: .78rem; text-align: right; font-variant-numeric: tabular-nums; }
.r3-hote .r3v-inv .p { justify-self: end; }
/* détail */
.r3-hote .r3v-head { padding: 10px 14px; display: grid; gap: 8px; border-bottom: 1px solid var(--r3v-line); }
.r3-hote .r3v-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.r3-hote .r3v-title b { font-family: var(--r3v-data); font-size: 1.05rem; font-weight: 500; }
.r3-hote .r3v-traitee { display: inline-flex; align-items: center; gap: 4px; color: var(--r3v-ok); font-size: .76rem; font-weight: 600; }
.r3-hote .r3v-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.r3-hote .r3v-chip { font: inherit; font-size: .78rem; border: 1px solid var(--r3v-line); background: var(--r3v-soft); color: var(--r3v-ink); border-radius: 6px; padding: 3px 9px; cursor: pointer; }
.r3-hote .r3v-chip span { color: var(--r3v-muted); margin-right: 4px; }
.r3-hote .r3v-chip b { font-family: var(--r3v-data); font-weight: 500; }
.r3-hote .r3v-chip:hover { border-color: var(--r3v-accent); }
.r3-hote .r3v-chip.on { border-color: var(--r3v-mark-edge); background: color-mix(in srgb, var(--r3v-mark) 30%, var(--r3v-panel)); }
.r3-hote .r3v-tw { overflow: auto; flex: 1; min-height: 0; }
.r3-hote .r3v-t { border-collapse: collapse; width: 100%; font-size: .8rem; }
.r3-hote .r3v-t th { position: sticky; top: 0; background: var(--r3v-panel); text-align: left; font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--r3v-muted); font-weight: 600; padding: 8px; border-bottom: 1px solid var(--r3v-line); white-space: nowrap; }
.r3-hote .r3v-t td { padding: 8px; border-bottom: 1px solid var(--r3v-line); vertical-align: top; }
.r3-hote .r3v-t .num { text-align: right; font-family: var(--r3v-data); font-variant-numeric: tabular-nums; white-space: nowrap; }
.r3-hote .r3v-t td.code { font-family: var(--r3v-data); font-size: .76rem; white-space: nowrap; }
.r3-hote .r3v-row { cursor: pointer; outline: none; }
.r3-hote .r3v-row:hover td { background: var(--r3v-soft); }
.r3-hote .r3v-row:focus-visible td { box-shadow: inset 0 0 0 1px var(--r3v-accent); }
.r3-hote .r3v-row.sel td { background: color-mix(in srgb, var(--r3v-mark) 22%, var(--r3v-panel)); }
.r3-hote .r3v-row.sel td:first-child { box-shadow: inset 3px 0 0 var(--r3v-mark-edge); }
.r3-hote .r3v-ko { color: var(--r3v-bad); font-weight: 600; }
.r3-hote .r3v-ok { color: var(--r3v-ok); }
.r3-hote .r3v-note { padding: 10px 14px; border-top: 1px solid var(--r3v-line); display: grid; gap: 5px; background: var(--r3v-soft); max-height: 34%; overflow: auto; }
.r3-hote .r3v-note p { margin: 0; max-width: 70ch; }
.r3-hote .r3v-brs { display: flex; flex-wrap: wrap; gap: 6px; }
.r3-hote .r3v-br { font: inherit; font-family: var(--r3v-data); font-size: .74rem; border: 1px dashed var(--r3v-line); border-radius: 5px; padding: 2px 7px; background: var(--r3v-panel); color: var(--r3v-ink); cursor: pointer; }
.r3-hote .r3v-br.unlinked { border-color: var(--r3v-warn); color: var(--r3v-warn); }
.r3-hote .r3v-br.on { border-style: solid; border-color: var(--r3v-accent); background: var(--r3v-accent-soft); }
.r3-hote .r3v-actions { border-top: 1px solid var(--r3v-line); }
.r3-hote .r3v-sugg { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--r3v-warn-bg); color: var(--r3v-warn); }
.r3-hote .r3v-sugg p { margin: 0; flex: 1; color: var(--r3v-ink); }
.r3-hote .r3v-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 14px; }
.r3-hote .r3v-btn { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: .8rem; border: 1px solid var(--r3v-line); background: var(--r3v-panel); color: var(--r3v-ink); border-radius: 6px; padding: 5px 10px; cursor: pointer; }
.r3-hote .r3v-btn:hover { border-color: var(--r3v-accent); }
.r3-hote .r3v-btn:disabled { opacity: .6; cursor: progress; }
.r3-hote .r3v-btn--plein { background: var(--r3v-accent); border-color: var(--r3v-accent); color: #fff; }
.r3-hote .r3v-btn--danger { border-color: var(--r3v-bad); color: var(--r3v-bad); }
.r3-hote .r3v-btn--conf { background: var(--r3v-bad); border-color: var(--r3v-bad); color: #fff; }
/* documents */
.r3-hote .r3v-docs { background: var(--r3v-desk); gap: 1px; }
.r3-hote .r3v-sheet { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--r3v-panel); }
.r3-hote .r3v-vbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 12px; border-bottom: 1px solid var(--r3v-line); font-size: .76rem; color: var(--r3v-muted); }
.r3-hote .r3v-vbar code { font-family: var(--r3v-data); color: var(--r3v-ink); }
.r3-hote .r3v-kind { font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; color: var(--r3v-ink); }
.r3-hote .r3v-hint { margin-left: auto; }
.r3-hote .r3v-z { display: inline-flex; align-items: center; gap: 4px; }
.r3-hote .r3v-zb { display: inline-flex; align-items: center; gap: 4px; font-size: .7rem; font-weight: 600; border-radius: 999px; padding: 1px 7px; }
.r3-hote .r3v-zb--aucune { color: var(--r3v-muted); background: var(--r3v-soft); }
.r3-hote .r3v-zb--a_verifier { color: var(--r3v-warn); background: var(--r3v-warn-bg); }
.r3-hote .r3v-zb--verifiee { color: var(--r3v-ok); background: var(--r3v-ok-bg); }
.r3-hote .r3v-zb--a_corriger { color: var(--r3v-bad); background: var(--r3v-bad-bg); }
.r3-hote .r3v-mini { display: inline-flex; align-items: center; gap: 3px; font: inherit; font-size: .7rem; border: 1px solid var(--r3v-line); background: var(--r3v-panel); color: var(--r3v-ink); border-radius: 5px; padding: 1px 6px; cursor: pointer; }
.r3-hote .r3v-mini:hover { border-color: var(--r3v-accent); }
.r3-hote .r3v-mini--ok { border-color: var(--r3v-ok); color: var(--r3v-ok); }
.r3-hote .r3v-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.r3-hote .r3v-tab { font: inherit; font-family: var(--r3v-data); font-size: .74rem; border: 1px solid var(--r3v-line); background: var(--r3v-panel); color: var(--r3v-muted); border-radius: 5px; padding: 2px 8px; cursor: pointer; position: relative; }
.r3-hote .r3v-tab i { font-style: normal; color: var(--r3v-warn); }
.r3-hote .r3v-tab.has { color: var(--r3v-ink); border-color: var(--r3v-mark-edge); }
.r3-hote .r3v-tab.has::after { content: ""; position: absolute; top: -3px; right: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--r3v-mark-edge); }
.r3-hote .r3v-tab.on { background: var(--r3v-accent-soft); color: var(--r3v-ink); border-color: var(--r3v-accent); }
.r3-hote .r3v-viewer { flex: 1; min-height: 0; overflow: auto; background: var(--r3v-desk); padding: 16px; display: flex; justify-content: center; align-items: flex-start; }
/* La page suit la largeur de la visionneuse (jamais une largeur figée au moment du rendu). */
.r3-hote .r3v-page { position: relative; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .18), 0 8px 24px rgba(0, 0, 0, .08); width: 100%; max-width: 1100px; flex: none; }
.r3-hote .r3v-page canvas, .r3-hote .r3v-page img { display: block; width: 100%; height: auto; }
/* Le chargement d'un autre document : l'ancien s'efface, l'animation apparaît si le chargement dure. */
.r3-hote .r3v-viewer { position: relative; }
.r3-hote .r3v-viewer.is-charge .r3v-page { opacity: 0; transition: none; }
.r3-hote .r3v-charge { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--r3v-muted); font-size: .8rem; pointer-events: none;
  opacity: 0; animation: r3v-apparait .2s ease .15s forwards; }
.r3-hote .r3v-charge .ms { animation: r3v-tourne 1s linear infinite; color: var(--r3v-accent); }
@keyframes r3v-tourne { to { transform: rotate(360deg); } }
@keyframes r3v-apparait { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {.r3-hote .r3v-charge .ms { animation: none; }
.r3-hote .r3v-charge { animation: none; opacity: 1; } }
.r3-hote .r3v-page { transition: opacity .15s ease; }
.r3-hote .r3v-vide { display: grid; gap: 4px; text-align: center; align-self: center; max-width: 36ch; color: var(--r3v-muted); }
.r3-hote .r3v-vide b { color: var(--r3v-ink); font-weight: 600; }
.r3-hote .r3v-hl { position: absolute; pointer-events: none; border-radius: 2px; background: rgba(255, 216, 74, .42); box-shadow: 0 0 0 2px var(--r3v-mark-edge); mix-blend-mode: multiply; transition: all .22s ease; }
.r3-hote .r3v-hl.cell, .r3-hote .r3v-hl.dup { background: rgba(232, 72, 78, .2); box-shadow: 0 0 0 2px #d33a40; }
.r3-hote .r3v-hl.soft { background: rgba(255, 216, 74, .22); box-shadow: 0 0 0 1px var(--r3v-mark-edge); }
/* Zones pas encore vérifiées : en pointillés. */
.r3-hote .r3v-hl.doute { box-shadow: none; outline: 2px dashed var(--r3v-mark-edge); outline-offset: 0; }
.r3-hote .r3v-hl.cell.doute, .r3-hote .r3v-hl.dup.doute { outline-color: #d33a40; }
.r3-hote .r3v-hit { position: absolute; cursor: pointer; }
.r3-hote .r3v-hit:hover { background: rgba(31, 95, 168, .07); }
.r3-hote .r3v-inv:focus-visible, .r3-hote .r3v-chip:focus-visible, .r3-hote .r3v-tab:focus-visible, .r3-hote .r3v-br:focus-visible, .r3-hote .r3v-f:focus-visible { outline: 2px solid var(--r3v-accent); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) {.r3-hote .r3v-hl { transition: none; } }
@media (max-width: 1100px) {.r3-hote .r3v { grid-template-columns: 220px minmax(0, 1fr); grid-template-rows: auto minmax(420px, 1fr) minmax(820px, auto); height: auto; }
.r3-hote .r3v-docs { grid-column: 1 / -1; }
}
@media (max-width: 680px) {.r3-hote .r3v { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 260px minmax(420px, auto) minmax(820px, auto); }
.r3-hote .r3v-legend { margin-left: 0; }
}