/* ============================================================
   BETTER CLEANER — Signature électronique (styles)
   ============================================================ */

/* ---- liste documents ---- */
.sig-badge{font-size:12.5px;font-weight:600;padding:5px 12px;border-radius:980px;background:var(--ink);color:#fff;}
.doc-list{display:flex;flex-direction:column;gap:14px;margin-bottom:8px;}
.doc-card{display:flex;align-items:center;gap:18px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:18px 22px;box-shadow:var(--shadow-sm);transition:box-shadow .25s,transform .25s,border-color .25s;}
.doc-card:hover{box-shadow:var(--shadow);transform:translateY(-2px);border-color:transparent;}
.doc-ic{width:46px;height:46px;flex:none;border-radius:13px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--accent) 9%,#fff);color:var(--accent);}
.doc-ic svg{width:22px;height:22px;}
.doc-main{flex:1;min-width:0;}
.doc-top{display:flex;align-items:center;gap:10px;margin-bottom:3px;}
.doc-type{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);
  background:color-mix(in srgb,var(--accent) 10%,#fff);padding:3px 9px;border-radius:7px;}
.doc-id{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;}
.doc-title{font-size:16.5px;font-weight:600;letter-spacing:-.01em;}
.doc-meta{font-size:13px;margin-top:3px;}
.doc-side{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none;}
.doc-amt{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;}
.doc-amt-lbl{font-size:11.5px;}
.doc-side .btn{margin-top:6px;}
@media(max-width:640px){
  .doc-card{flex-wrap:wrap;}
  .doc-side{flex-direction:row;align-items:center;width:100%;justify-content:space-between;border-top:1px solid var(--line);padding-top:12px;margin-top:2px;}
  .doc-side .btn{margin-top:0;}
}

.signed-list{display:flex;flex-direction:column;gap:2px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;}
.signed-row{display:flex;align-items:center;gap:14px;padding:16px 22px;border-bottom:1px solid var(--line-2);cursor:pointer;transition:background .2s;}
.signed-row:last-child{border-bottom:none;}
.signed-row:hover{background:var(--bg-soft);}
.signed-ic{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;background:#eef6f0;color:var(--ok);}
.signed-main{flex:1;min-width:0;}
.signed-id{font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.signed-meta{font-size:12.5px;margin-top:2px;}
.signed-status{font-size:12.5px;font-weight:600;color:var(--ok);display:inline-flex;align-items:center;gap:5px;flex:none;}

/* ---- signer flow ---- */
.sig-back{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--muted);margin-bottom:18px;transition:color .2s;}
.sig-back:hover{color:var(--ink);}
.signer{max-width:760px;}
.sig-steps{display:flex;align-items:center;gap:0;margin-bottom:30px;}
.sig-step{display:flex;align-items:center;gap:9px;flex:1;position:relative;}
.sig-step:not(:last-child)::after{content:"";position:absolute;left:calc(28px + 9px + 56px);right:8px;top:14px;height:2px;background:var(--line);}
.sig-step .ss-n{width:28px;height:28px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-size:13px;font-weight:650;background:var(--bg-soft-2);color:var(--muted);transition:all .3s var(--ease);}
.sig-step .ss-l{font-size:13px;font-weight:550;color:var(--muted);white-space:nowrap;}
.sig-step.cur .ss-n{background:var(--accent);color:#fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,#fff);}
.sig-step.cur .ss-l{color:var(--ink);}
.sig-step.done .ss-n{background:var(--ok);color:#fff;}
.sig-step.done .ss-l{color:var(--ink-2);}
.sig-step.done:not(:last-child)::after,.sig-step.cur:not(:last-child)::after{background:color-mix(in srgb,var(--accent) 40%,var(--line));}
@media(max-width:600px){ .sig-step .ss-l{display:none;} .sig-step:not(:last-child)::after{left:34px;right:6px;} }

.sig-panel{display:none;}
.sig-panel.on{display:block;animation:viewIn .4s var(--ease);}
.sig-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:24px;flex-wrap:wrap;}
.sig-hint{display:inline-flex;align-items:center;gap:7px;font-size:13px;}

/* ---- document preview ---- */
.sig-doc{padding:30px 32px;}
.sd-head{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:20px;border-bottom:1px solid var(--line);}
.sd-brand{font-size:18px;font-weight:800;letter-spacing:-.01em;}
.sd-sub{font-size:12px;margin-top:3px;}
.sd-type{text-align:right;}
.sd-type-lbl{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--accent);}
.sd-id{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;}
.sd-meta{display:flex;justify-content:space-between;gap:30px;padding:18px 0;border-bottom:1px solid var(--line-2);}
.sd-meta>div{display:flex;flex-direction:column;gap:2px;}
.sd-meta .r{text-align:right;align-items:flex-end;}
.sd-meta span{font-size:11px;}
.sd-meta b{font-size:14px;}
.sd-title{font-size:17px;font-weight:600;margin:20px 0 8px;}
.sd-table{width:100%;border-collapse:collapse;}
.sd-table th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:650;padding:0 0 11px;border-bottom:1.5px solid var(--ink);}
.sd-table th.r,.sd-table td.r{text-align:right;}
.sd-table td{padding:13px 0;border-bottom:1px solid var(--line-2);font-size:14.5px;}
.sd-table .dl-name{font-weight:500;}
.sd-totals{margin-left:auto;width:280px;margin-top:18px;}
.sd-totals .row{display:flex;justify-content:space-between;padding:7px 0;font-size:14px;color:var(--ink-2);}
.sd-totals .grand{border-top:1.5px solid var(--ink);margin-top:7px;padding-top:13px;font-size:17px;font-weight:700;color:var(--ink);}

/* ---- consent ---- */
.sig-consent h3{font-size:20px;margin-bottom:16px;}
.consent-scroll{max-height:260px;overflow:auto;padding:18px 20px;background:var(--bg-soft);border-radius:var(--r-sm);
  border:1px solid var(--line-2);font-size:13.5px;line-height:1.6;color:var(--ink-2);display:flex;flex-direction:column;gap:12px;}
.consent-scroll b{color:var(--ink);}
.consent-check{display:flex;align-items:flex-start;gap:12px;margin-top:16px;font-size:14px;line-height:1.45;cursor:pointer;}
.consent-check input{width:20px;height:20px;flex:none;margin-top:1px;accent-color:var(--accent);cursor:pointer;}

/* ---- sign ---- */
.sig-sign h3{font-size:20px;margin-bottom:16px;}
.sign-tabs{display:flex;gap:6px;background:var(--bg-soft);padding:4px;border-radius:980px;width:fit-content;margin-bottom:18px;}
.sign-tabs button{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:550;padding:8px 18px;border-radius:980px;color:var(--muted);transition:all .2s;}
.sign-tabs button.on{background:#fff;color:var(--ink);box-shadow:var(--shadow-sm);}
.sign-pane{display:none;}
.sign-pane.on{display:block;}
.pad-wrap{position:relative;border:2px dashed var(--line);border-radius:var(--r);background:
  repeating-linear-gradient(0deg,transparent,transparent 31px,var(--line-2) 31px,var(--line-2) 32px);height:200px;overflow:hidden;}
.sig-pad{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;}
.pad-placeholder{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);text-align:center;color:var(--muted-2);font-size:14px;pointer-events:none;}
.pad-clear{position:absolute;bottom:12px;right:12px;display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:500;
  padding:6px 12px;border-radius:980px;background:#fff;border:1px solid var(--line);color:var(--ink-2);box-shadow:var(--shadow-sm);}
.pad-clear:hover{border-color:var(--ink);}
.sign-type-input{width:100%;font-size:16px;padding:14px 18px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;outline:none;transition:border-color .2s;}
.sign-type-input:focus{border-color:var(--accent);}
.sign-type-preview{min-height:74px;margin-top:14px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--bg-soft);font-family:'Segoe Script','Snell Roundhand',cursive;font-size:34px;color:var(--accent);}

.sign-otp{margin-top:26px;padding-top:22px;border-top:1px solid var(--line-2);}
.otp-head{display:flex;flex-direction:column;gap:2px;margin-bottom:14px;}
.otp-head b{font-size:14.5px;}
.otp-head span{font-size:12.5px;}
.otp-inputs{display:flex;gap:10px;}
.otp-inputs input{width:48px;height:56px;text-align:center;font-size:22px;font-weight:600;border:1px solid var(--line);
  border-radius:12px;background:#fff;outline:none;transition:border-color .2s,box-shadow .2s;font-variant-numeric:tabular-nums;}
.otp-inputs input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,#fff);}
.otp-fill{margin-top:12px;font-size:12.5px;color:var(--accent);font-weight:550;text-decoration:underline;text-underline-offset:2px;}
.otp-fill:hover{opacity:.7;}
@media(max-width:560px){ .otp-inputs input{width:42px;height:50px;font-size:19px;} }

/* ---- success / certificate ---- */
.sig-success{text-align:center;padding:14px 0 28px;}
.success-ring{width:74px;height:74px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;
  background:#eef6f0;color:var(--ok);animation:popIn .5s var(--ease);}
.success-ring svg{width:38px;height:38px;stroke-width:2.2;}
@keyframes popIn{from{transform:scale(.6);opacity:0;}to{transform:scale(1);opacity:1;}}
.sig-success h2{font-size:28px;}
.sig-success p{margin-top:8px;font-size:15px;}
.cert{padding:26px 28px;border:1.5px solid color-mix(in srgb,var(--ok) 40%,#fff);background:#f6fbf8;}
.cert-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;}
.cert-seal{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:650;color:var(--ok);
  letter-spacing:.02em;text-transform:uppercase;}
.cert-ref{font-size:13px;font-variant-numeric:tabular-nums;color:var(--ink-2);font-weight:600;}
.cert-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 30px;margin-bottom:22px;}
.cert-grid span{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:3px;}
.cert-grid b{font-size:14.5px;}
.cert-sig{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px;background:#fff;border-radius:var(--r-sm);border:1px dashed color-mix(in srgb,var(--ok) 35%,#fff);}
.cert-sig-img{height:64px;}
.cert-sig-typed{font-family:'Segoe Script','Snell Roundhand',cursive;font-size:32px;color:var(--accent);}
.cert-sig-cap{font-size:11.5px;}
.cert-foot{display:flex;align-items:flex-start;gap:8px;margin-top:20px;font-size:12px;line-height:1.5;}
.cert-foot svg{flex:none;margin-top:1px;}
