/* ============================================================
   Ocleiria Toolbox  Numéroter PDF
   Réutilise style.css / audio.css / pdf.css.
   Styles spécifiques : aperçu de page + marqueur de position.
   ============================================================ */

.num { display:flex; flex-direction:column; gap:20px; }

.num__bar {
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:12px 14px; background:var(--card-bg); border:1px solid var(--border-color);
  border-radius:var(--radius-card); box-shadow:var(--shadow-card);
}
.num__name { min-width:0; font-size:.86rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.num__grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,360px); gap:24px; align-items:start; }

.num__previewwrap { display:flex; flex-direction:column; gap:10px; }
.num__previewlabel { font-size:.82rem; font-weight:500; color:var(--text-secondary); }
.num__preview {
  background:var(--secondary-bg); border:1px solid var(--border-color); border-radius:var(--radius-card);
  padding:20px; display:flex; align-items:center; justify-content:center; min-height:320px;
}

.num__stage { position:relative; display:inline-block; line-height:0; }
.num__page canvas {
  display:block; max-width:100%; height:auto; background:#fff;
  box-shadow:0 2px 14px rgba(27,26,23,.22); border-radius:2px;
}

/* Marqueur : petite pastille indiquant où le numéro sera écrit */
.num__marker {
  position:absolute; z-index:2; transform:translate(-50%, -50%);
  min-width:22px; height:20px; padding:0 6px; border-radius:5px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:11px; line-height:1; white-space:nowrap;
  background:var(--accent); color:#fff; box-shadow:0 1px 6px rgba(0,0,0,.35);
  pointer-events:none;
}

.num__opts { align-items:flex-start; }
.num__opts .field { min-width:0; flex:1 1 130px; margin:0; }
.num__check { flex:1 1 100%; margin-top:4px; }

.num__actions { display:flex; gap:12px; flex-wrap:wrap; }

@media (max-width:760px) {
  .num__grid { grid-template-columns:1fr; }
}