/* ─────────────────────────────────────────────────────────────────────────────
 * lq-viewer.css — visionneuse d'images plein écran (portal/js/lq-viewer.js)
 * + vignettes « touchez pour agrandir » (.lqv-thumb) de l'éditeur d'étape.
 *
 * Feuille dédiée : le composant ne pose aucun style= en balisage, seul le
 * CSSOM (transform, --lqv-dim) est piloté par le script. Rien ici ne dépend de
 * dashboard.css ; les couleurs de la visionneuse sont volontairement sombres
 * (image d'abord), quel que soit le thème du portail.
 * ───────────────────────────────────────────────────────────────────────────── */

/* ── Vignette qui ouvre la visionneuse ──────────────────────────────────── */
.lqv-thumb {
  position: relative; display: inline-block; max-width: 100%;
  padding: 0; margin: 0; border: 0; border-radius: 8px; background: none;
  font: inherit; color: inherit; line-height: 0; cursor: zoom-in;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.lqv-thumb > img { display: block; transition: filter .15s ease, transform .15s ease; }
.lqv-thumb:hover > img { filter: brightness(.94); }
.lqv-thumb:active > img { transform: scale(.985); }
.lqv-thumb:focus-visible { outline: 2px solid var(--forest, #1b4332); outline-offset: 3px; }
/* Pastille « loupe » : dit au doigt que la vignette s'agrandit (rien en survol seul). */
.lqv-thumb::after {
  content: ""; position: absolute; right: 4px; bottom: 4px; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(17, 24, 39, .74) center / 14px 14px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3M11 8v6M8 11h6'/%3E%3C/svg%3E");
  pointer-events: none; transition: transform .15s ease, background-color .15s ease;
}
.lqv-thumb:hover::after, .lqv-thumb:focus-visible::after { background-color: rgba(17, 24, 39, .92); transform: scale(1.1); }
.lqv-thumb--solo { display: block; width: fit-content; }
.lqv-thumb--gal { flex-shrink: 0; }
/* Vignette de réponse (44 × 33) : trop petite pour une pastille, mais la cible tactile fait 44 × 44. */
.lqv-thumb--qcm { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
.lqv-thumb--qcm::after { display: none; }
.lqv-thumb--wiz { flex-shrink: 0; }

/* ── Visionneuse ───────────────────────────────────────────────────────── */
.lqv {
  --lqv-dim: 1;
  position: fixed; inset: 0; z-index: 10050;
  display: flex; flex-direction: column;
  background: rgba(8, 12, 10, var(--lqv-dim));
  color: #fff; font-family: inherit;
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
  overscroll-behavior: contain; -webkit-user-select: none; user-select: none;
  animation: lqv-fade .16s ease-out;
}
@keyframes lqv-fade { from { opacity: 0; } to { opacity: 1; } }

.lqv-bar { touch-action: none; flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 8px 10px; min-height: 60px; }
.lqv-count { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 600; letter-spacing: .02em; font-variant-numeric: tabular-nums; padding-left: 6px; }
.lqv-tools { display: flex; align-items: center; gap: 4px; }
.lqv-pct { min-width: 52px; text-align: center; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .86); }

.lqv-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 44px; height: 44px; padding: 0; border-radius: 12px;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); color: #fff;
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background-color .15s ease, transform .1s ease, opacity .15s ease;
}
.lqv-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .26); }
.lqv-btn:active:not(:disabled) { transform: scale(.94); }
.lqv-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px rgba(0, 0, 0, .65); }
.lqv-btn:disabled { opacity: .35; cursor: default; }

.lqv-mid { touch-action: none; position: relative; flex: 1 1 auto; min-height: 0; }
.lqv-stage { position: absolute; inset: 0; overflow: hidden; touch-action: none; cursor: default; outline: none; }
.lqv-stage.is-zoomed { cursor: grab; }
.lqv-stage.is-zoomed:active { cursor: grabbing; }
.lqv-slide { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center; }
.lqv-slide.is-anim { transition: transform .2s ease; }
.lqv-slide.in-next { animation: lqv-in-next .22s ease-out; }
.lqv-slide.in-prev { animation: lqv-in-prev .22s ease-out; }
@keyframes lqv-in-next { from { opacity: 0; transform: translate3d(36px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes lqv-in-prev { from { opacity: 0; transform: translate3d(-36px, 0, 0); } to { opacity: 1; transform: none; } }

/* Le cadre de l'image remplit la scène ; object-fit en fait une image « contenue », agrandie au besoin. */
.lqv-img {
  display: block; width: 100%; height: 100%; object-fit: contain; transform-origin: 50% 50%;
  -webkit-user-drag: none; will-change: transform; transition: opacity .15s ease;
}
.lqv-img.is-anim { transition: transform .2s ease; }
.lqv-stage.is-loading .lqv-img, .lqv-img.is-error { opacity: 0; }

.lqv-spin { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .25); border-top-color: #fff; animation: lqv-spin .8s linear infinite; display: none; }
.lqv-stage.is-loading .lqv-spin { display: block; }
@keyframes lqv-spin { to { transform: rotate(360deg); } }
.lqv-err { position: absolute; left: 16px; right: 16px; top: 50%; margin: -12px 0 0; text-align: center; font-size: 15px; color: rgba(255, 255, 255, .86); }

.lqv-nav { position: absolute; top: 50%; margin-top: -22px; background: rgba(0, 0, 0, .48); }
.lqv-prev { left: 8px; }
.lqv-next { right: 8px; }

.lqv-info {
  flex: 0 0 auto; max-height: 34vh; overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain;
  -webkit-user-select: text; user-select: text;
  padding: 10px 16px 14px; background: #0b100e; border-top: 1px solid rgba(255, 255, 255, .12);
}
.lqv-info[hidden], .lqv-cap[hidden], .lqv-credit[hidden] { display: none; }
.lqv-cap { margin: 0; font-size: 15px; line-height: 1.5; color: #fff; max-width: 70ch; }
.lqv-credit { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .78); max-width: 70ch; }
.lqv-cap + .lqv-credit { margin-top: 6px; }
.lqv-src { color: #b7e4c7; text-decoration: underline; text-underline-offset: 2px; display: inline-block; min-height: 24px; }
.lqv-src:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 3px; }

.lqv-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

@media (max-width: 480px) {
  .lqv-bar { padding: 6px 8px; gap: 4px; }
  .lqv-pct { min-width: 46px; }
  .lqv-nav { background: rgba(0, 0, 0, .56); }
}
@media (prefers-reduced-motion: reduce) {
  .lqv, .lqv-slide.in-next, .lqv-slide.in-prev, .lqv-spin { animation: none; }
  .lqv-spin { border-top-color: rgba(255, 255, 255, .9); }
  .lqv-slide.is-anim, .lqv-img.is-anim, .lqv-img, .lqv-btn, .lqv-thumb > img, .lqv-thumb::after { transition: none; }
}
@media (forced-colors: active) {
  .lqv-btn { border: 1px solid ButtonText; background: ButtonFace; color: ButtonText; }
  .lqv-btn:focus-visible { outline: 2px solid Highlight; }
}

/* `hidden` doit gagner sur les display: des boutons (flèches d'une visionneuse à image unique). */
.lqv [hidden] { display: none !important; }