/* Vendre « Comment ça marche » — three looping scenes. Markup: vendre-steps.html, timeline: vendre-steps.js */
.tmw{--o:#FF5400;--k:#0B0F14;--s:#F5F3EE;--m:#5B6470;--li:#40FF00;max-width:1080px;margin:0 auto;padding:clamp(40px,6vw,88px) 20px;font-family:'Manrope',system-ui,sans-serif;color:var(--k)}
.tmw *{box-sizing:border-box}
.tmw-over{margin:0 0 .4em;text-align:center;font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--m)}
.tmw-h{margin:0 auto clamp(24px,4vw,48px);text-align:center;font-family:'Sora',sans-serif;font-weight:800;font-size:clamp(28px,4vw,44px);letter-spacing:-.03em;line-height:1.05}
.tmw-row{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,5vw,72px);align-items:center;padding:clamp(28px,4vw,48px) 0;border-top:1px solid #E3E1DA}
.tmw-txt .n{font-family:'Sora',sans-serif;font-weight:800;font-size:22px;color:var(--o)}
.tmw-txt h3{margin:.15em 0 .35em;font-family:'Sora',sans-serif;font-weight:800;font-size:clamp(22px,2.6vw,30px);letter-spacing:-.02em}
.tmw-txt p{margin:0;font-size:16px;line-height:1.55;color:var(--m);max-width:34ch}
@media(max-width:760px){.tmw-row{grid-template-columns:1fr}}
/* ---- scène commune ---- */
.tmw-sc{position:relative;width:100%;aspect-ratio:4/3;container-type:inline-size;border-radius:26px;background:#EFEBE3;overflow:hidden}
.tmw-sc [data-a]{transition:all .7s cubic-bezier(.3,1.35,.4,1);transition-delay:var(--d,0ms)}
.tmw-sc.out [data-a]{opacity:0 !important;transition:opacity .35s ease !important;transition-delay:0ms !important}
.tmw-sc .tmw-pill{position:absolute;left:9%;top:9%;width:82%;background:#fff;border-radius:999px;padding:3cqw 3.6cqw;display:flex;align-items:center;gap:1.8cqw;font-weight:800;font-size:3.6cqw;white-space:nowrap;
  box-shadow:0 2cqw 5cqw rgba(11,15,20,.14);opacity:0;transform:translateY(20%) scale(.85)}
.tmw-sc .tmw-pill.on{opacity:1;transform:none}
.tmw-sc .tmw-pill .tmw-mk svg{width:5cqw;height:5cqw;display:block}
.tmw-sc .caret{width:.5cqw;height:4cqw;background:var(--o);animation:tmwCb 1s steps(1) infinite}
@keyframes tmwCb{50%{opacity:0}}

/* 1 · annonce */
.tmw-sc .phs{position:absolute;left:3%;top:60%;width:37.5%;background:#fff;border-radius:3.4cqw;padding:2cqw;z-index:3;box-shadow:0 2cqw 5cqw rgba(11,15,20,.14);opacity:0;transform:translateY(20%) scale(.9)}
.tmw-sc .phs.on{opacity:1;transform:rotate(-2deg)}
.tmw-sc .phs .g{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1cqw}
.tmw-sc .tl{position:relative;aspect-ratio:1;background:var(--s);border-radius:1.6cqw;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.5)}
.tmw-sc .tl.on{opacity:1;transform:none}
.tmw-sc .tl img{width:86%;height:86%;object-fit:contain}
.tmw-sc .tl i{position:absolute;right:.5cqw;top:.5cqw;width:2.6cqw;height:2.6cqw;border-radius:50%;background:var(--o);display:flex;align-items:center;justify-content:center}
.tmw-sc .tl i svg{width:64%;height:64%}
.tmw-sc .c4{display:inline-flex;align-items:center;gap:.8cqw;margin-top:1.4cqw;font-weight:800;font-size:2.3cqw;background:var(--s);border-radius:999px;padding:.7cqw 1.8cqw;opacity:0;transition:opacity .4s ease 1.2s}
.tmw-sc .c4 svg{width:2.4cqw;height:2.4cqw;color:#1E7B3A}
.tmw-sc .phs.on .c4{opacity:1}
.tmw-sc .cgw{position:absolute;left:7%;top:7%;width:27%;opacity:0;transform:translateY(12%) rotate(-12deg) scale(.85);filter:drop-shadow(0 2cqw 3cqw rgba(11,15,20,.16))}
.tmw-sc .cgw.on{opacity:1;transform:rotate(-5deg)}
.tmw-sc .cgw img{width:100%;display:block}
.tmw-sc .scan{position:absolute;left:-4%;right:-4%;top:6%;height:.8cqw;border-radius:1cqw;background:var(--o);box-shadow:0 0 2cqw .6cqw rgba(255,84,0,.6);opacity:0}
.tmw-sc .cgw.x .scan{animation:tmwScan 1.2s ease-in-out forwards}
@keyframes tmwScan{0%{opacity:1;top:6%}85%{opacity:1;top:92%}100%{opacity:0;top:92%}}
.tmw-sc .form{position:absolute;right:5%;top:9%;width:52%;background:#fff;border-radius:4cqw;padding:2.6cqw 3cqw;box-shadow:0 2.5cqw 6cqw rgba(11,15,20,.14);opacity:0;transform:translateX(12%) scale(.92)}
.tmw-sc .form.on{opacity:1;transform:rotate(1.5deg)}
.tmw-sc .fd{position:relative;display:flex;flex-direction:column;padding:1.3cqw 0;border-bottom:1px solid #EFEBE3;opacity:.25}
.tmw-sc .fd span{font-weight:700;font-size:2.2cqw;color:var(--m)}
.tmw-sc .fd b{font-weight:800;font-size:3.1cqw;min-height:3.6cqw}
.tmw-sc .fd > i{position:absolute;right:0;top:50%;width:3.6cqw;height:3.6cqw;margin-top:-1.8cqw;border-radius:50%;background:var(--li);display:flex;align-items:center;justify-content:center;transform:scale(0);transition:transform .4s cubic-bezier(.3,1.7,.4,1);transition-delay:calc(var(--d) + 200ms)}
.tmw-sc .fd > i svg{width:62%;height:62%}
.tmw-sc .fd b{opacity:0;transition:opacity .3s;transition-delay:var(--d)}
.tmw-sc .fd.on{opacity:1}.tmw-sc .fd.on b{opacity:1}.tmw-sc .fd.on > i{transform:none}
.tmw-sc .fd.pr b{font-family:'Sora',sans-serif;font-size:3.6cqw;opacity:1}
.tmw-sc .tmw-mk{padding-top:1.8cqw;opacity:0;transform:translateY(20%)}
.tmw-sc .tmw-mk.on{opacity:1;transform:none}
.tmw-sc .tmw-bar{position:relative;height:1.8cqw;border-radius:1cqw;background:#EFEBE3}
.tmw-sc .band{position:absolute;left:22%;right:30%;top:0;bottom:0;border-radius:1cqw;background:#FFBD00;transform:scaleX(0);transition:transform .6s ease .3s}
.tmw-sc .pt{position:absolute;left:4%;top:50%;width:3.6cqw;height:3.6cqw;margin:-1.8cqw 0 0 -1.8cqw;border-radius:50%;background:var(--k);border:.6cqw solid #fff;transition:left 1s cubic-bezier(.45,.05,.3,1) .7s}
.tmw-sc .tmw-mk.on .band{transform:none}.tmw-sc .tmw-mk.on .pt{left:41%}
.tmw-sc .tmw-mk small{display:block;margin-top:1.4cqw;font-weight:600;font-size:2.2cqw;color:var(--m)}
.tmw-sc .tmw-mk small b{color:var(--k)}
/* 2 · sticker */
.tmw-sc .opt{position:absolute;top:12%;width:42%;background:#fff;border-radius:4cqw;padding:2.6cqw;box-shadow:0 2.5cqw 6cqw rgba(11,15,20,.14);opacity:0;transform:translateY(16%) scale(.88)}
.tmw-sc .opt.on{opacity:1}
.tmw-sc .a4{left:5%}.tmw-sc .a4.on{transform:rotate(-2.5deg)}
.tmw-sc .vin{right:5%}.tmw-sc .vin.on{transform:rotate(2.5deg)}
.tmw-sc .opt .hd{display:block;font-weight:800;font-size:2.6cqw;margin-bottom:1.8cqw}
.tmw-sc .page{background:#FBFAF7;border:1px solid #E3E1DA;border-radius:1.2cqw;aspect-ratio:1/1.3;padding:3cqw 2.6cqw;overflow:hidden}
/* The two stickers appear with the sheet: the stepped "printer" reveal read as slow, progressive image loading. */
.tmw-sc .prt{display:flex;flex-direction:column;gap:2.4cqw}
.tmw-sc .prt svg,.tmw-sc .vs svg{width:100%;display:block}
.tmw-sc .cut{display:block;border-top:.4cqw dashed #B9B4A8}
.tmw-sc .env{position:relative;height:21cqw;margin:.6cqw 0 2cqw;overflow:hidden}
.tmw-sc .env .eb,.tmw-sc .env .ef{position:absolute;left:4%;right:4%;border-radius:1.4cqw}
.tmw-sc .env .eb{top:30%;bottom:0;background:#DCD3C0}
.tmw-sc .env .ef{top:54%;bottom:0;background:linear-gradient(170deg,#E9E1CF,#DDD3BE);box-shadow:0 -.4cqw 1cqw rgba(11,15,20,.08);z-index:3}
.tmw-sc .env .fl2{position:absolute;left:4%;right:4%;top:30%;height:40%;background:#E4DBC7;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;transform:scaleY(-1);z-index:1;transition:transform .5s ease,z-index 0s linear .25s}
.tmw-sc .vs{position:absolute;left:16%;right:16%;top:1%;z-index:2;filter:drop-shadow(0 1cqw 1.6cqw rgba(11,15,20,.22));transform:rotate(-3deg);transition:transform .8s cubic-bezier(.55,.05,.35,1)}
.tmw-sc .vs svg{width:100%;display:block}
.tmw-sc .peel{position:absolute;right:0;bottom:0;width:4.2cqw;height:4.2cqw;border-radius:0 0 1.2cqw 0;background:linear-gradient(135deg,transparent 50%,#F4F1EA 50%,#D9D4C8);box-shadow:-.3cqw -.3cqw .6cqw rgba(0,0,0,.12)}
.tmw-sc .vin.x .vs{transform:translateY(64%) rotate(0deg)}
.tmw-sc .vin.f .fl2{transform:none;z-index:4}
.tmw-sc .lab{position:absolute;right:9%;bottom:10%;z-index:5;display:flex;align-items:center;gap:1cqw;background:#fff;border-radius:.8cqw;padding:.8cqw 1.4cqw;box-shadow:0 .5cqw 1cqw rgba(11,15,20,.14);transform:scale(0) rotate(-6deg);transition:transform .45s cubic-bezier(.3,1.7,.4,1)}
.tmw-sc .vin.l .lab{transform:rotate(-3deg)}
.tmw-sc .lab .bc{width:5cqw;height:2.6cqw;background:repeating-linear-gradient(90deg,#0B0F14 0 .25cqw,transparent .25cqw .5cqw,#0B0F14 .5cqw .9cqw,transparent .9cqw 1.1cqw)}
.tmw-sc .lab b{font-weight:800;font-size:1.9cqw;display:block}.tmw-sc .lab small{font-weight:700;font-size:1.6cqw;color:var(--m);display:block}
.tmw-sc .trk{position:relative;height:9cqw;margin:0 1cqw 1.6cqw}
.tmw-sc .trk .ln{position:absolute;left:4%;right:4%;top:5.2cqw;height:.6cqw;border-radius:1cqw;background:#E3E1DA}
.tmw-sc .trk .fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:1cqw;background:var(--o);transition:width 2.2s linear}
.tmw-sc .vin.g .trk .fill{width:100%}
.tmw-sc .trk .st{position:absolute;top:6.4cqw;transform:translateX(-50%);font-weight:800;font-size:1.8cqw;color:var(--m);white-space:nowrap}
.tmw-sc .trk .st i{position:absolute;left:50%;top:-2.2cqw;width:2.4cqw;height:2.4cqw;margin-left:-1.2cqw;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 .5cqw #D8D3C8;transition:all .3s}
.tmw-sc .trk .s1{left:4%}.tmw-sc .trk .s2{left:50%}.tmw-sc .trk .s3{left:96%}
.tmw-sc .vin.g .trk .st i{background:var(--o);box-shadow:inset 0 0 0 .5cqw var(--o)}
.tmw-sc .vin.g .trk .s1 i{transition-delay:.05s}.tmw-sc .vin.g .trk .s2 i{transition-delay:1.1s}.tmw-sc .vin.g .trk .s3 i{transition-delay:2.2s}
.tmw-sc .vin.g .trk .s3{color:var(--k);transition:color .3s 2.2s}
.tmw-sc .truck{position:absolute;left:4%;top:0;width:7cqw;transform:translateX(-50%);transition:left 2.2s linear}
.tmw-sc .truck svg{width:100%;display:block}
.tmw-sc .vin.g .truck{left:96%}
.tmw-sc .dl{display:inline-block;background:var(--k);color:var(--s);font-weight:800;font-size:2.3cqw;border-radius:999px;padding:1cqw 2.2cqw;opacity:0;transform:scale(.6)}
.tmw-sc .dl.on{opacity:1;transform:none}
.tmw-sc .or{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%) scale(0);width:7cqw;height:7cqw;border-radius:50%;background:var(--o);color:var(--k);font-weight:800;font-size:2.8cqw;display:flex;align-items:center;justify-content:center;z-index:5}
.tmw-sc .or.on{transform:translate(-50%,-50%)}
/* 3 · appels */
.tmw-sc .tgc{position:absolute;left:6%;top:9%;width:52%;display:flex;align-items:center;justify-content:space-between;gap:2cqw;background:#fff;border-radius:3.6cqw;padding:2.4cqw 2.8cqw;box-shadow:0 2cqw 5cqw rgba(11,15,20,.12);opacity:0;transform:translateY(20%) scale(.9)}
.tmw-sc .tgc.on{opacity:1;transform:rotate(-1.5deg)}
.tmw-sc .tgc b{display:block;font-weight:800;font-size:3cqw}.tmw-sc .tgc small{display:block;font-weight:600;font-size:2.2cqw;color:var(--m)}
.tmw-sc .tg{position:relative;flex:none;width:9cqw;height:5.2cqw;border-radius:999px;background:#D8D3C8;transition:background .3s}
.tmw-sc .tg::after{content:"";position:absolute;left:.6cqw;top:.6cqw;width:4cqw;height:4cqw;border-radius:50%;background:#fff;transition:left .35s cubic-bezier(.3,1.5,.4,1)}
.tmw-sc .tgc.x .tg{background:var(--o)}.tmw-sc .tgc.x .tg::after{left:4.4cqw}
.tmw-sc .phn{position:absolute;left:6%;top:30%;display:flex;align-items:center;gap:1.6cqw;background:var(--k);color:var(--s);border-radius:999px;padding:1.6cqw 3cqw 1.6cqw 1.6cqw;opacity:0;transform:scale(.7)}
.tmw-sc .phn.on{opacity:1;transform:none}
.tmw-sc .phn .ic{width:4.6cqw;height:4.6cqw;border-radius:50%;background:var(--o);color:var(--k);display:flex;align-items:center;justify-content:center}
.tmw-sc .phn .ic svg{width:58%;height:58%}
.tmw-sc .phn b{font-family:'Sora',sans-serif;font-weight:800;font-size:3.4cqw;letter-spacing:.02em;white-space:nowrap}
.tmw-sc .phn .hid{display:none;align-items:center;gap:1cqw}.tmw-sc .phn .hid i svg{width:3cqw;height:3cqw;display:block;color:var(--li)}
.tmw-sc .phn.x .clear{display:none}.tmw-sc .phn.x .hid{display:inline-flex;animation:tmwPop .4s cubic-bezier(.3,1.7,.4,1)}
@keyframes tmwPop{0%{transform:scale(.6)}100%{transform:none}}
.tmw-sc .rq{position:absolute;right:4%;width:49%;display:flex;align-items:center;gap:1.8cqw;background:#fff;border-radius:999px;padding:1.4cqw 2.8cqw 1.4cqw 1.4cqw;box-shadow:0 2cqw 4.5cqw rgba(11,15,20,.14);opacity:0;transform:translateX(30%) rotate(6deg) scale(.85)}
.tmw-sc .rq:nth-of-type(3){top:47%}.tmw-sc .rq:nth-of-type(4){top:62%}.tmw-sc .rq:nth-of-type(5){top:77%}
.tmw-sc .rq.on{opacity:1;transform:rotate(-1deg)}
.tmw-sc .rq .wa{width:5.6cqw;height:5.6cqw;flex:none;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center}
.tmw-sc .rq .wa svg{width:62%;height:62%}
.tmw-sc .rq b{display:block;font-weight:800;font-size:2.7cqw}.tmw-sc .rq small{display:block;font-weight:600;font-size:2.3cqw;color:var(--m);white-space:nowrap}
.tmw-sc .tmw-stat{position:absolute;left:5%;top:48%;background:var(--li);font-weight:800;font-size:2.5cqw;border-radius:999px;padding:1.4cqw 2.8cqw;opacity:0;transform:scale(.6)}
.tmw-sc .tmw-stat.on{opacity:1;transform:rotate(-2deg)}
@media (prefers-reduced-motion:reduce){.tmw-sc *{transition:opacity .3s !important;animation:none !important}}
/* Integration: sits inside .welcome-content on the seller landing (mobile: padded column;
   desktop: the full-width "guide" band of the welcome grid). No own side padding or cap. */
/* No auto margins: as a grid item they would shrink the band to its content width. */
.tmw{max-width:none;margin:0;padding:clamp(28px,4vw,56px) 0 0;text-align:left}
.tmw-txt{text-align:left}
/* Arabic: prose follows the page; scenes keep their physical layout (dir="ltr") and the mock UI blocks inside read right-to-left. */
[dir="rtl"] .tmw,[dir="rtl"] .tmw-txt{text-align:right}
[dir="rtl"] .tmw-sc :is(.form,.phs,.opt .hd,.lab,.tgc,.phn,.rq){direction:rtl}
[dir="rtl"] .tmw-sc .fd > i{right:auto;left:0}
[dir="rtl"] .tmw-sc .phn{padding:1.6cqw 1.6cqw 1.6cqw 3cqw}
[dir="rtl"] .tmw-sc .rq{padding:1.4cqw 1.4cqw 1.4cqw 2.8cqw}