/* Pages OKTO PDF et comptes a payer : maquettes animees en CSS pur, donnees fictives.
   Chaque maquette est un conteneur : elle s'adapte a sa propre largeur. L'etat de base
   (sans animation) est l'etat final, donc complet. En mouvement reduit, plus aucun
   deplacement : seuls les fondus restent. */

.rs-acc{color:var(--color-braise-700)}
.rs-eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:13.5px;font-weight:600;color:var(--color-braise-750)}
.rs-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--color-braise-500)}

.rs-marque{display:inline-flex;align-items:center;gap:4px}
.rs-marque img{width:22px;height:22px;flex:0 0 22px}
.rs-marque b{font-size:15px;font-weight:800;line-height:1;letter-spacing:-.035em;color:var(--color-ardoise-950)}
.rs-marque i{display:inline-flex;align-items:center;margin-left:-1px;padding:3px 4px;border-radius:4px;font-style:normal;font-size:10px;font-weight:800;line-height:1;letter-spacing:.01em;color:#fff;background-image:linear-gradient(105deg,#ff6320 0%,#ff6320 20%,#ff2e63 100%)}

.rs-cel{min-width:0}
.rs{--ink:var(--color-ardoise-700);--hd:var(--color-ardoise-950);--mut:var(--color-ardoise-500);--line:var(--color-ardoise-200);--soft:var(--color-ardoise-50);--acc:var(--color-braise-750);--accv:rgba(248,112,95,.12);--dist:8px;--s0:0;--d0:1;
  position:relative;max-width:520px;margin-inline:auto;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 1px 2px rgba(21,12,31,.05),0 24px 60px -30px rgba(21,12,31,.28);
  font-family:Poppins,sans-serif;font-size:12px;line-height:1.4;color:var(--ink);text-align:left}
.rs svg{width:15px;height:15px;flex:0 0 auto}
.rs b{font-weight:600}

.rs-top{display:flex;align-items:center;gap:10px;min-width:0;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--soft)}
.rs-top b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--hd)}
.rs-ico{display:grid;place-items:center;width:26px;height:26px;flex:0 0 26px;border-radius:8px;background:var(--accv);color:var(--acc)}
.rs-tag{flex:0 0 auto;padding:2px 9px;border-radius:999px;font-style:normal;font-size:10.5px;font-weight:600;white-space:nowrap;color:var(--acc);background:var(--accv);box-shadow:inset 0 0 0 1px rgba(248,112,95,.22)}

/* OKTO PDF */
.rs-bar{display:flex;flex-wrap:wrap;gap:6px;padding:10px 14px 0}
.rs-p{padding:4px 11px;border-radius:8px;font-size:11px;font-weight:500;color:var(--mut);box-shadow:inset 0 0 0 1px var(--line)}
.rs-page{display:grid;gap:9px;margin:12px 14px 14px;padding:16px 18px;border:1px solid var(--line);border-radius:10px;background:#fff}
.rs-h{margin-bottom:2px;font-size:13px;font-weight:600;color:var(--hd)}
.rs-l{display:block;height:6px;border-radius:3px;background:var(--color-ardoise-100)}
.rs-w90{width:90%}.rs-w70{width:70%}.rs-w85{width:85%}.rs-w60{width:60%}
.rs-t{position:relative;margin:0;padding:3px 6px;font-size:12px;color:var(--hd)}
.rs-hl{position:absolute;inset:0;border-radius:4px;background:rgba(248,112,95,.22);transform-origin:left center}
.rs-tx{position:relative}
.rs-sign{display:flex;align-items:flex-end;gap:12px;margin-top:8px;padding-top:10px;border-top:1px dashed var(--color-ardoise-300)}
.rs-lab{padding-bottom:2px;font-size:10.5px;color:var(--mut)}
.rs .rs-sig{width:110px;height:36px;flex:0 0 auto;color:var(--color-braise-750)}
.rs-sig path{stroke-dasharray:1;stroke-dashoffset:0}
.rs-date{margin-left:auto;padding:2px 9px;border-radius:999px;font-size:10.5px;font-weight:500;white-space:nowrap;color:var(--acc);background:var(--accv)}
.rs-bub{display:flex;align-items:center;gap:8px;margin:0 14px 14px;padding:9px 12px;border-radius:12px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line);color:var(--hd)}
.rs-sp{display:grid;color:var(--acc)}
.rs-bt{min-width:0}
.rs-bub em{margin-left:auto;padding:2px 8px;border-radius:999px;font-style:normal;font-size:10.5px;font-weight:600;white-space:nowrap;color:var(--acc);background:var(--accv)}

/* Comptes a payer */
.rs-in{position:relative;display:flex;align-items:center;gap:10px;margin:14px 14px 0;padding:10px 12px 12px;border:1px solid var(--line);border-radius:12px;background:#fff}
.rs-fn{flex:1;min-width:0}
.rs-fn b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--hd)}
.rs-fn small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10.5px;color:var(--mut)}
.rs-st{display:grid;justify-items:end}
.rs-st i{grid-area:1/1;padding:2px 9px;border-radius:999px;font-style:normal;font-size:10.5px;font-weight:600;white-space:nowrap}
.rs-lect{color:var(--mut);background:var(--color-ardoise-100);opacity:0}
.rs-lue{color:var(--acc);background:var(--accv)}
.rs-prog{position:absolute;left:12px;right:12px;bottom:0;height:2px;border-radius:2px;background:var(--color-braise-500);transform-origin:left center;opacity:0}
.rs-dr{margin:12px 14px 14px;overflow:hidden;border:1px solid var(--line);border-radius:12px}
.rs-drh{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;border-bottom:1px solid var(--line);background:var(--soft)}
.rs-drh b{color:var(--hd)}
.rs-dr dl{margin:0;padding:2px 12px}
.rs-r{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--color-ardoise-100)}
.rs-r dt{color:var(--mut)}
.rs-r dd{display:flex;align-items:center;gap:6px;margin:0;font-variant-numeric:tabular-nums;color:var(--hd)}
.rs-tot{border-bottom:0}
.rs-tot dd{font-weight:600}
.rs-ok{display:grid;place-items:center;width:15px;height:15px;border-radius:50%;background:var(--accv);color:var(--acc)}
.rs-ok svg{width:9px;height:9px;stroke-width:3}
.rs-coh{padding:1px 8px;border-radius:999px;font-style:normal;font-size:10px;font-weight:600;white-space:nowrap;color:var(--acc);background:var(--accv)}
.rs-prop{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 12px;border-top:1px solid var(--line);font-size:11.5px;color:var(--hd)}
.rs-prop em{padding:2px 10px;border-radius:999px;font-style:normal;font-size:10.5px;font-weight:600;color:var(--acc);box-shadow:inset 0 0 0 1px rgba(248,112,95,.35)}

@media (max-width:420px){
  .rs-top,.rs-bar{padding-inline:12px}
  .rs-page{margin-inline:12px;padding:14px}
  .rs-in,.rs-dr{margin-inline:12px}
  .rs-bub{margin-inline:12px}
  .rs-coh{display:none}
}

@media (prefers-reduced-motion:reduce){
  .rs{--dist:0px;--s0:1;--d0:0}
}

/* OKTO PDF : une ligne se surligne, la signature se trace, l'assistant repond. */
.rs-pdf .rs-p1{animation:rs-pa1 12s linear -6.5s infinite}
.rs-pdf .rs-p2{animation:rs-pa2 12s linear -6.5s infinite}
.rs-pdf .rs-p3{animation:rs-pa3 12s linear -6.5s infinite}
@keyframes rs-pa1{0%,2%{color:var(--mut);background:transparent;box-shadow:inset 0 0 0 1px var(--line)}3%,30%{color:var(--acc);background:var(--accv);box-shadow:inset 0 0 0 1px rgba(248,112,95,.35)}31%,100%{color:var(--mut);background:transparent;box-shadow:inset 0 0 0 1px var(--line)}}
@keyframes rs-pa2{0%,31%{color:var(--mut);background:transparent;box-shadow:inset 0 0 0 1px var(--line)}32%,62%{color:var(--acc);background:var(--accv);box-shadow:inset 0 0 0 1px rgba(248,112,95,.35)}63%,100%{color:var(--mut);background:transparent;box-shadow:inset 0 0 0 1px var(--line)}}
@keyframes rs-pa3{0%,63%{color:var(--mut);background:transparent;box-shadow:inset 0 0 0 1px var(--line)}64%,92%{color:var(--acc);background:var(--accv);box-shadow:inset 0 0 0 1px rgba(248,112,95,.35)}93%,100%{color:var(--mut);background:transparent;box-shadow:inset 0 0 0 1px var(--line)}}
.rs-pdf .rs-hl{animation:rs-hl 12s ease-in-out -6.5s infinite}
@keyframes rs-hl{0%,6%{opacity:0;transform:scaleX(var(--s0))}18%,92%{opacity:1;transform:scaleX(1)}98%,100%{opacity:0;transform:scaleX(1)}}
.rs-pdf .rs-sig path{animation:rs-trait 12s ease-in-out -6.5s infinite}
@keyframes rs-trait{0%,36%{opacity:0;stroke-dashoffset:var(--d0)}50%,92%{opacity:1;stroke-dashoffset:0}98%,100%{opacity:0;stroke-dashoffset:0}}
.rs-pdf .rs-date{animation:rs-adate 12s ease-out -6.5s infinite}
@keyframes rs-adate{0%,51%{opacity:0;transform:translateY(var(--dist))}53.5%,92%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}
.rs-pdf .rs-bub{animation:rs-abub 12s ease-out -6.5s infinite}
@keyframes rs-abub{0%,65%{opacity:0;transform:translateY(var(--dist))}67.5%,92%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}
/* Comptes a payer : la facture est lue, le brouillon se remplit ligne par ligne. */
.rs-ap .rs-in{animation:rs-ain 15s ease-out -9.5s infinite}
@keyframes rs-ain{0%,2%{opacity:0;transform:translateY(var(--dist))}4.5%,92%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}
.rs-ap .rs-prog{animation:rs-prog 15s ease-in-out -9.5s infinite}
@keyframes rs-prog{0%,6%{opacity:0;transform:scaleX(var(--s0))}7%{opacity:1;transform:scaleX(var(--s0))}24%{opacity:1;transform:scaleX(1)}26%,100%{opacity:0;transform:scaleX(1)}}
.rs-ap .rs-lect{animation:rs-lect 15s linear -9.5s infinite}
@keyframes rs-lect{0%,5%{opacity:0}7%,24%{opacity:1}26%,100%{opacity:0}}
.rs-ap .rs-lue{animation:rs-lue 15s linear -9.5s infinite}
@keyframes rs-lue{0%,24%{opacity:0}27%,92%{opacity:1}98%,100%{opacity:0}}
.rs-ap .rs-drh{animation:rs-adrh 15s ease-out -9.5s infinite}
@keyframes rs-adrh{0%,24%{opacity:0;transform:translateY(0px)}26.5%,92%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}
.rs-ap .r1{animation:rs-ar1 15s ease-out -9.5s infinite}
@keyframes rs-ar1{0%,28%{opacity:0;transform:translateY(var(--dist))}30.5%,92%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}
.rs-ap .r2{animation:rs-ar2 15s ease-out -9.5s infinite}
@keyframes rs-ar2{0%,33%{opacity:0;transform:translateY(var(--dist))}35.5%,92%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}
.rs-ap .r3{animation:rs-ar3 15s ease-out -9.5s infinite}
@keyframes rs-ar3{0%,38%{opacity:0;transform:translateY(var(--dist))}40.5%,92%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}
.rs-ap .r4{animation:rs-ar4 15s ease-out -9.5s infinite}
@keyframes rs-ar4{0%,44%{opacity:0;transform:translateY(var(--dist))}46.5%,92%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}
.rs-ap .r5{animation:rs-ar5 15s ease-out -9.5s infinite}
@keyframes rs-ar5{0%,50%{opacity:0;transform:translateY(var(--dist))}52.5%,92%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}
.rs-ap .r6{animation:rs-ar6 15s ease-out -9.5s infinite}
@keyframes rs-ar6{0%,56%{opacity:0;transform:translateY(var(--dist))}58.5%,92%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}
.rs-ap .r4 .rs-ok{animation:rs-ok4 15s ease-out -9.5s infinite}
@keyframes rs-ok4{0%,48%{opacity:0;transform:scale(calc(1 - var(--s0)))}51%,92%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}
.rs-ap .r5 .rs-ok{animation:rs-ok5 15s ease-out -9.5s infinite}
@keyframes rs-ok5{0%,54%{opacity:0;transform:scale(calc(1 - var(--s0)))}57%,92%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}
.rs-ap .rs-coh{animation:rs-coh 15s ease-out -9.5s infinite}
@keyframes rs-coh{0%,60%{opacity:0;transform:translateY(0px)}62.5%,92%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}
.rs-ap .pr1{animation:rs-ap1 15s ease-out -9.5s infinite}
@keyframes rs-ap1{0%,66%{opacity:0;transform:translateY(var(--dist))}68.5%,92%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}
.rs-ap .pr2{animation:rs-ap2 15s ease-out -9.5s infinite}
@keyframes rs-ap2{0%,72%{opacity:0;transform:translateY(var(--dist))}74.5%,92%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}
.rs-ap .pr1 em{animation:rs-acc 15s ease-in-out -9.5s infinite}
@keyframes rs-acc{0%,80%{background:transparent;color:var(--acc)}84%,92%{background:var(--accv);color:var(--acc)}98%,100%{background:transparent;color:var(--acc)}}