/* ============================================================
   Ocleiria Toolbox  signer PDF (styles spécifiques)
   Réutilise style.css / audio.css / pdf.css
   ============================================================ */

.signer { display:flex; flex-direction:column; gap:20px; }
.signer__grid { display:grid; grid-template-columns:1fr 340px; gap:20px; align-items:start; }

.signer__nav { display:flex; align-items:center; gap:10px; margin-bottom:12px; flex-wrap:wrap; }

/* ---------- Scène : page + signature déplaçable ---------- */
.sign-stage {
  position:relative; display:flex; align-items:center; justify-content:center;
  min-height:320px; padding:16px; background:var(--secondary-bg);
  border:1px solid var(--border-color); border-radius:var(--radius-card);
  overflow:hidden;
}
.sign-stage > canvas {
  display:block; max-width:100%; height:auto; background:#fff;
  box-shadow:0 2px 14px rgba(27,26,23,.22); border-radius:2px;
}
.sign-stage .loading { position:absolute; inset:0; }

.sign-overlay {
  position:absolute; left:0; top:0; box-sizing:border-box;
  border:1.5px dashed var(--accent); cursor:grab; touch-action:none;
  background:color-mix(in srgb, var(--accent) 5%, transparent);
}
.sign-overlay:active { cursor:grabbing; }
.sign-overlay img { display:block; width:100%; height:100%; pointer-events:none; user-select:none; }
.sign-handle {
  position:absolute; right:-8px; bottom:-8px; width:16px; height:16px;
  background:var(--accent); border:2px solid var(--card-bg); border-radius:50%;
  cursor:nwse-resize; touch-action:none;
}

/* ---------- Panneau signature ---------- */
.signer__panel {
  background:var(--card-bg); border:1px solid var(--border-color);
  border-radius:var(--radius-card); box-shadow:var(--shadow-card);
  padding:18px; display:flex; flex-direction:column; gap:14px;
  position:sticky; top:calc(var(--nav-h) + 12px);
}
.signer__tabs { display:flex; gap:6px; }
.tab {
  flex:1 1 0; font-family:var(--font-body); font-size:.88rem; font-weight:600;
  padding:8px 10px; border:1px solid var(--border-color); background:transparent;
  color:var(--text-secondary); border-radius:var(--radius); cursor:pointer; transition:var(--transition);
}
.tab:hover { color:var(--text-primary); }
.tab.is-active { background:var(--accent-soft); color:var(--accent); border-color:transparent; }

.sign-pad {
  display:block; width:100%; height:auto; aspect-ratio:38/17;
  background:#fff; border:1px solid var(--border-color); border-radius:var(--radius);
  touch-action:none; cursor:crosshair;
}
.signer__padctl { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.signer__color { display:inline-flex; align-items:center; gap:8px; font-size:.82rem;
  color:var(--text-secondary); font-family:var(--font-mono); }
.signer__color input[type="color"] { width:34px; height:26px; padding:0; border:1px solid var(--border-color);
  border-radius:var(--radius-sm); background:none; cursor:pointer; }

.drop--sm { padding:24px 16px; }
.drop--sm p { font-size:.86rem; }
.signer__preview {
  display:block; max-width:100%; max-height:120px; margin-top:6px;
  background:#fff; border:1px solid var(--border-color); border-radius:var(--radius); padding:6px;
}

@media (max-width:820px) {
  .signer__grid { grid-template-columns:1fr; }
  .signer__panel { position:static; }
}