/* Trader « Comment ça marche » — three looping scenes. Markup: trader-steps.html, timeline: trader-steps.js */
.tmq{--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)}
.tmq *{box-sizing:border-box}
.tmq-over{margin:0 0 .4em;font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--m)}
.tmq-h{margin:0 0 clamp(24px,4vw,48px);font-family:'Sora',sans-serif;font-weight:800;font-size:clamp(28px,4vw,44px);letter-spacing:-.03em;line-height:1.05}
.tmq-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}
.tmq-txt .n{font-family:'Sora',sans-serif;font-weight:800;font-size:22px;color:var(--o)}
.tmq-txt h3{margin:.15em 0 .35em;font-family:'Sora',sans-serif;font-weight:800;font-size:clamp(22px,2.6vw,30px);letter-spacing:-.02em}
.tmq-txt p{margin:0;font-size:16px;line-height:1.55;color:var(--m);max-width:34ch}
@media(max-width:760px){.tmq-row{grid-template-columns:1fr}}
/* ---- scène commune ---- */
.tmq-sc{position:relative;width:100%;aspect-ratio:4/3;container-type:inline-size;border-radius:26px;background:#EFEBE3;overflow:hidden}
.tmq-sc [data-a]{transition:all .7s cubic-bezier(.3,1.35,.4,1);transition-delay:var(--d,0ms)}
.tmq-sc.out [data-a]{opacity:0 !important;transition:opacity .35s ease !important;transition-delay:0ms !important}
.tmq-sc .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)}
.tmq-sc .pill.on{opacity:1;transform:none}
.tmq-sc .pill .mk svg{width:5cqw;height:5cqw;display:block}
.tmq-sc .caret{width:.5cqw;height:4cqw;background:var(--o);animation:tmqCb 1s steps(1) infinite}
@keyframes tmqCb{50%{opacity:0}}

.tmq{--tb:#0B0F14;--ts:#FF5400;--tst:#C74200}
/* 1 · marchés */
.tmq-sc .grp{position:absolute;left:8%;right:8%;background:#fff;border-radius:3.6cqw;padding:2.6cqw 3cqw;box-shadow:0 2cqw 5cqw rgba(11,15,20,.12);opacity:0;transform:translateY(20%) scale(.9)}
.tmq-sc .grp.on{opacity:1;transform:none}
.tmq-sc .gb{top:26%}.tmq-sc .gs{top:64%}
.tmq-sc .grp small{display:block;font-weight:800;font-size:2.6cqw;margin-bottom:1.6cqw}
.tmq-sc .gb small{color:var(--tb)}.tmq-sc .gs small{color:var(--tst)}
.tmq-sc .cs{display:flex;gap:1.4cqw;flex-wrap:wrap}
.tmq-sc .cc{display:inline-flex;align-items:center;gap:1.1cqw;border-radius:999px;padding:1.1cqw 2cqw 1.1cqw 1.2cqw;font-weight:800;font-size:2.45cqw;color:#fff;opacity:0;transform:scale(.5)}
.tmq-sc .cc i svg{width:4cqw;height:2.7cqw;border-radius:.5cqw;display:block;box-shadow:0 0 0 1px rgba(255,255,255,.6)}
.tmq-sc .cc.b{background:var(--tb)}.tmq-sc .cc.s{background:var(--ts);color:#0B0F14}
.tmq-sc .cc.on{opacity:1;transform:none}
.tmq-sc .cc.tog{opacity:1;transform:none;background:#fff;color:var(--k);box-shadow:inset 0 0 0 .4cqw #D8D3C8}
.tmq-sc .cc.tog.x{background:var(--tb);color:#fff;box-shadow:none;animation:tmqPop .45s cubic-bezier(.3,1.7,.4,1)}
@keyframes tmqPop{0%{transform:scale(.8)}100%{transform:none}}
.tmq-sc .cur{position:absolute;left:72%;top:66%;width:5cqw;opacity:0;transition:all .9s cubic-bezier(.45,.05,.3,1)}
.tmq-sc .cur svg{width:100%;display:block;filter:drop-shadow(0 .6cqw 1cqw rgba(0,0,0,.25))}
.tmq-sc .cur.on{opacity:1;left:62%;top:46%}
/* 2 · rail */
/* 2 · carte */
.tmq-sc .mapw{position:absolute;inset:-12% 0 0 0}
.tmq-map{width:100%;height:100%;display:block}
.tmq-map .oth{fill:#E4DFD4;stroke:#EFEBE3;stroke-width:1.2}.tmq-map .src{fill:#D6CEBD;stroke:#EFEBE3;stroke-width:1.2}.tmq-map .dz{fill:#CFE6C8;stroke:#EFEBE3;stroke-width:1.2}
.tmq-sc .dot{position:absolute;width:3.2cqw;height:3.2cqw;margin:-1.6cqw 0 0 -1.6cqw;border-radius:50%;background:var(--o);border:.5cqw solid #fff;opacity:0;transform:scale(0);transition:all .45s cubic-bezier(.3,1.7,.4,1)}
.tmq-sc .dot.on{opacity:1;transform:none;animation:tmqPing 1.4s ease-out 1;animation-delay:var(--d)}
@keyframes tmqPing{0%{box-shadow:0 0 0 0 rgba(255,84,0,.55)}100%{box-shadow:0 0 0 3cqw rgba(255,84,0,0)}}
.tmq-sc .tag{position:absolute;left:4%;top:5%;background:var(--k);color:var(--s);font-weight:800;font-size:2.7cqw;border-radius:999px;padding:1.3cqw 2.6cqw}
.tmq-sc .tiles{position:absolute;left:4%;bottom:5%;display:flex;gap:1.3cqw;background:#fff;border-radius:3cqw;padding:1.6cqw;box-shadow:0 2cqw 4cqw rgba(11,15,20,.14)}
.tmq-sc .st{width:6.4cqw;height:6.4cqw;border-radius:1.6cqw;overflow:hidden;background:#fff;box-shadow:0 0 0 1px #E3E1DA;display:flex;align-items:center;justify-content:center;opacity:.2;filter:grayscale(1);transform:scale(.8)}
.tmq-sc .st img{width:100%;height:100%;object-fit:contain;display:block}
.tmq-sc .st.on{opacity:1;filter:none;transform:none}
.tmq-sc .cnt{position:absolute;right:4%;top:5%;display:flex;align-items:baseline;gap:1.2cqw;background:var(--li);border-radius:999px;padding:1.6cqw 2.8cqw;box-shadow:0 2cqw 4cqw rgba(11,15,20,.16);opacity:0;transform:scale(.6)}
.tmq-sc .cnt.on{opacity:1;transform:none}
.tmq-sc .cnt b{font-family:'Sora',sans-serif;font-weight:800;font-size:4cqw;font-variant-numeric:tabular-nums}
.tmq-sc .cnt span{font-weight:800;font-size:2.5cqw}

.tmq-sc .dot.b{background:var(--tb)}.tmq-sc .dot.s{background:var(--ts)}
.tmq-sc .tiles{top:5%;bottom:auto}
.tmq-sc .rail{position:absolute;left:4%;right:4%;bottom:5%;height:24%;background:#fff;border-radius:3.6cqw;box-shadow:0 2cqw 5cqw rgba(11,15,20,.16);opacity:0;transform:translateY(30%)}
.tmq-sc .rail.on{opacity:1;transform:none}
.tmq-sc .rail .ax{position:absolute;left:7%;right:7%;top:52%;height:.45cqw;background:var(--k)}
.tmq-sc .tk{position:absolute;width:.6cqw;height:0;border-radius:.4cqw;transition:height .4s cubic-bezier(.3,1.6,.4,1);transition-delay:var(--d)}
.tmq-sc .tk.b{top:.8cqw;background:var(--tb)}.tmq-sc .tk.s{bottom:.8cqw;background:var(--ts)}
.tmq-sc .tk.on{height:3.6cqw}
.tmq-sc .md{position:absolute;top:50%;width:3cqw;height:3cqw;margin:-1.5cqw 0 0 -1.5cqw;border-radius:50%;border:.5cqw solid #fff;transform:scale(0)}
.tmq-sc .md.b{background:var(--tb)}.tmq-sc .md.s{background:var(--ts)}.tmq-sc .md.on{transform:none}
.tmq-sc .rl{position:absolute;white-space:nowrap;font-weight:800;font-size:2.4cqw;transform:translateX(-50%);opacity:0}
.tmq-sc .rl.b{bottom:1.4cqw;color:var(--tb)}.tmq-sc .rl.s{top:1.4cqw;color:var(--tst)}.tmq-sc .rl.on{opacity:1}
/* 3 · marge */
/* 3 · prix */
.tmq-sc .car{position:absolute;left:5%;top:14%;width:40%;background:#fff;border-radius:4cqw;padding:2.4cqw;box-shadow:0 2cqw 5cqw rgba(11,15,20,.14);opacity:0;transform:translateX(-20%) rotate(-8deg)}
.tmq-sc .car.on{opacity:1;transform:rotate(-3deg)}
.tmq-sc .car .ph{position:relative;background:var(--s);border-radius:2.6cqw;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center}
.tmq-sc .car .ph img{width:88%;height:86%;object-fit:contain}
.tmq-sc .fl{position:absolute;left:1.4cqw;top:1.4cqw;display:inline-flex;align-items:center;gap:.8cqw;background:var(--k);color:#fff;font-weight:800;font-size:2.1cqw;border-radius:999px;padding:.8cqw}
.tmq-sc .fl svg{width:3cqw;height:2cqw;border-radius:.4cqw}
.tmq-sc .car b{display:block;margin-top:1.6cqw;font-family:'Sora',sans-serif;font-weight:800;font-size:4.4cqw;letter-spacing:-.02em;background:#FFBD00;display:inline-block;border-radius:999px;padding:.3cqw 1.8cqw}
.tmq-sc .car small{display:block;margin-top:.8cqw;font-weight:700;font-size:2.4cqw;color:var(--m)}
.tmq-sc .rcpt{position:absolute;right:5%;top:10%;width:47%;background:#fff;border-radius:4cqw;padding:3cqw 3.2cqw;box-shadow:0 2.5cqw 6cqw rgba(11,15,20,.16);opacity:0;transform:translateY(12%) scale(.9)}
.tmq-sc .rcpt.on{opacity:1;transform:rotate(1.5deg)}
.tmq-sc .rcpt .hd{display:block;font-weight:800;font-size:2.4cqw;color:var(--m);letter-spacing:.04em;text-transform:uppercase;margin-bottom:1.2cqw}
.tmq-sc .ln{display:flex;justify-content:space-between;gap:2cqw;padding:1.2cqw 0;border-bottom:1px dashed #E3E1DA;font-size:2.55cqw;opacity:0;transform:translateX(-40%)}
.tmq-sc .ln span{font-weight:700;color:var(--m)}.tmq-sc .ln b{font-weight:800;font-variant-numeric:tabular-nums}
.tmq-sc .ln.on{opacity:1;transform:none}
.tmq-sc .sep{display:block;height:.5cqw;border-radius:.5cqw;background:var(--k);margin:1.6cqw 0 1.2cqw;transform:scaleX(0);transform-origin:left}
.tmq-sc .sep.on{transform:none}
.tmq-sc .tot{display:flex;flex-direction:column;opacity:0;transform:scale(.7);transform-origin:left}
.tmq-sc .tot span{font-weight:800;font-size:2.4cqw;color:var(--m)}
.tmq-sc .tot b{font-family:'Sora',sans-serif;font-weight:800;font-size:5.3cqw;letter-spacing:-.03em;white-space:nowrap}
.tmq-sc .tot.on{opacity:1;transform:none}
.tmq-sc .tot.fl2 b{color:var(--o)}
.tmq-sc .wa{position:absolute;left:5%;bottom:10%;display:inline-flex;align-items:center;gap:1.6cqw;background:#fff;border-radius:999px;padding:1.2cqw 3cqw 1.2cqw 1.2cqw;font-weight:800;font-size:2.8cqw;
  box-shadow:0 2cqw 4cqw rgba(11,15,20,.14);opacity:0;transform:translateY(40%) scale(.7)}
.tmq-sc .wa.on{opacity:1;transform:rotate(-2deg)}
.tmq-sc .wa i{width:5.6cqw;height:5.6cqw;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center}
.tmq-sc .wa i svg{width:62%;height:62%}

.tmq-sc .car{width:36%;top:12%}
.tmq-sc .car b{background:var(--tb);color:#fff}
.tmq-sc .wf{position:absolute;right:4%;top:9%;width:54%;background:#fff;border-radius:4cqw;padding:3cqw;box-shadow:0 2.5cqw 6cqw rgba(11,15,20,.16);opacity:0;transform:translateY(12%) scale(.9)}
.tmq-sc .wf.on{opacity:1;transform:rotate(1.5deg)}
.tmq-sc .wf .hd{display:block;font-weight:800;font-size:2.4cqw;color:var(--m);letter-spacing:.04em;text-transform:uppercase;margin-bottom:1.4cqw}
.tmq-sc .wr{display:grid;grid-template-columns:32% 1fr auto;align-items:center;gap:1.6cqw;padding:1cqw 0;opacity:0;transform:translateX(-30%)}
.tmq-sc .wr.on{opacity:1;transform:none}
.tmq-sc .wr .lb{font-weight:700;font-size:2.2cqw;color:var(--m);white-space:nowrap}
.tmq-sc .wr .tr{position:relative;height:3cqw;background:#F5F3EE;border-radius:.8cqw}
.tmq-sc .wr .br{position:absolute;top:0;bottom:0;border-radius:.8cqw;transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.3,1.1,.4,1);transition-delay:calc(var(--d) + 150ms)}
.tmq-sc .wr.on .br{transform:none}
.tmq-sc .wr b{font-weight:800;font-size:2.5cqw;font-variant-numeric:tabular-nums;white-space:nowrap}
.tmq-sc .s{--c:var(--ts)}.tmq-sc .b{--c:var(--tb)}
.tmq-sc .br.s{background:var(--ts)}.tmq-sc .br.b{background:var(--tb)}.tmq-sc .br.r{background:#D0161F}.tmq-sc .br.g{background:#0B0F14}
.tmq-sc .wr b.s{color:var(--tst)}.tmq-sc .wr b.b{color:var(--tb)}.tmq-sc .wr b.r{color:#D0161F}
.tmq-sc .wr b.g{font-family:'Sora',sans-serif;font-size:3.6cqw;color:#0B0F14}
.tmq-sc .wr:last-child{border-top:.4cqw solid var(--k);margin-top:.6cqw;padding-top:1.6cqw}
.tmq-sc .pro{position:absolute;left:5%;top:66%;background:var(--k);color:var(--s);font-weight:800;font-size:2.4cqw;border-radius:999px;padding:1.1cqw 2.4cqw;opacity:0;transform:scale(.6)}
.tmq-sc .pro.on{opacity:1;transform:rotate(-2deg)}
@media (prefers-reduced-motion:reduce){.tmq-sc *{transition:opacity .3s !important;animation:none !important}}
/* Integration: same column as the Importer scenes; Trader-only (the story is buy-market vs resale-market margin). */
.tmq{max-width:none;padding:clamp(28px,4vw,56px) 0 0}
body[data-mode="dz"] .tmq,body[data-mode="sell"] .tmq{display:none}
/* The page has a generic .pill chip rule (border + muted colour); the scene's search pill must not inherit it. */
.tmq-sc .pill{border:0;color:var(--k)}
/* Desktop: bleed past the 820px column by the same amount as the hero band so both share the wider edges. */
@media(min-width:1000px){.tmq{margin-inline:calc(-1 * min(74px, (100vw - 880px) / 2))}}
/* Arabic: scenes keep their physical layout (dir="ltr"); the mock UI blocks inside read right-to-left. */
[dir="rtl"] .tmq-sc :is(.grp,.car,.wf,.wa){direction:rtl}
[dir="rtl"] .tmq-sc .cc{padding:1.1cqw 1.2cqw 1.1cqw 2cqw}
[dir="rtl"] .tmq-sc .wa{padding:1.2cqw 1.2cqw 1.2cqw 3cqw}
/* The pointer clicks the toggle chip, which sits at the other end of the row in Arabic. */
[dir="rtl"] .tmq-sc .cur{left:44%}[dir="rtl"] .tmq-sc .cur.on{left:32%}
/* Signed amounts are static Latin text: keep them LTR so the sign stays in front of the digits. */
[dir="rtl"] .tmq-sc .wr b{direction:ltr}