/* Importer « Comment ça marche » — three looping scenes. Markup: importer-steps.html, timeline: importer-steps.js */
.tms{--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)}
.tms *{box-sizing:border-box}
.tms-over{margin:0 0 .4em;font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--m)}
.tms-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}
.tms-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}
.tms-txt .n{font-family:'Sora',sans-serif;font-weight:800;font-size:22px;color:var(--o)}
.tms-txt h3{margin:.15em 0 .35em;font-family:'Sora',sans-serif;font-weight:800;font-size:clamp(22px,2.6vw,30px);letter-spacing:-.02em}
.tms-txt p{margin:0;font-size:16px;line-height:1.55;color:var(--m);max-width:34ch}
@media(max-width:760px){.tms-row{grid-template-columns:1fr}}
/* ---- scène commune ---- */
.tms-sc{position:relative;width:100%;aspect-ratio:4/3;container-type:inline-size;border-radius:26px;background:#EFEBE3;overflow:hidden}
.tms-sc [data-a]{transition:all .7s cubic-bezier(.3,1.35,.4,1);transition-delay:var(--d,0ms)}
.tms-sc.out [data-a]{opacity:0 !important;transition:opacity .35s ease !important;transition-delay:0ms !important}
.tms-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)}
.tms-sc .pill.on{opacity:1;transform:none}
.tms-sc .pill .mk svg{width:5cqw;height:5cqw;display:block}
.tms-sc .caret{width:.5cqw;height:4cqw;background:var(--o);animation:tmsCb 1s steps(1) infinite}
@keyframes tmsCb{50%{opacity:0}}
/* 1 · règles */
.tms-sc .rules{position:absolute;left:0;right:0;top:31%;display:flex;justify-content:center;gap:2cqw}
.tms-sc .rc{display:inline-flex;align-items:center;gap:1.2cqw;background:#fff;border-radius:999px;padding:1.5cqw 2.6cqw 1.5cqw 1.5cqw;font-weight:800;font-size:2.9cqw;
  box-shadow:0 1.5cqw 3.5cqw rgba(11,15,20,.12);opacity:0;transform:translateY(40%) scale(.6)}
.tms-sc .rc.on{opacity:1;transform:none}
.tms-sc .rc i{width:4cqw;height:4cqw;border-radius:50%;background:var(--li);display:flex;align-items:center;justify-content:center}
.tms-sc .rc i svg{width:62%;height:62%}
.tms-sc .mc{position:absolute;top:49%;width:40%;background:#fff;border-radius:4cqw;padding:2.4cqw;box-shadow:0 2cqw 5cqw rgba(11,15,20,.14);opacity:0;transform:translateY(25%) scale(.8)}
.tms-sc .mc.good{left:7%}.tms-sc .mc.bad{right:7%}
.tms-sc .mc.on{opacity:1;transform:rotate(-2deg)}.tms-sc .mc.bad.on{transform:rotate(2deg)}
.tms-sc .mc .ph{background:var(--s);border-radius:2.6cqw;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center}
.tms-sc .mc .ph img{width:88%;height:86%;object-fit:contain}.tms-sc img.flip{transform:scaleX(-1)}
.tms-sc .mc b{display:block;margin-top:1.6cqw;font-weight:800;font-size:3cqw}
.tms-sc .mc small{display:block;font-weight:600;font-size:2.4cqw;color:var(--m)}
.tms-sc .mc em{position:absolute;left:50%;top:-3cqw;display:inline-flex;align-items:center;gap:1cqw;white-space:nowrap;font-style:normal;font-weight:800;font-size:2.6cqw;border-radius:999px;padding:1cqw 2.2cqw;
  transform:translateX(-50%) scale(0);transition:transform .45s cubic-bezier(.3,1.7,.4,1)}
.tms-sc .mc em svg{width:2.8cqw;height:2.8cqw}
.tms-sc .mc .ok{background:var(--li)}.tms-sc .mc .no{background:#D0161F;color:#fff}
.tms-sc .mc.good .no,.tms-sc .mc.bad .ok{display:none}
.tms-sc .mc.x em{transform:translateX(-50%) scale(1) rotate(-3deg)}
.tms-sc .mc.bad.x{transform:rotate(2deg) scale(.95)}
.tms-sc .mc.bad.x .ph,.tms-sc .mc.bad.x b,.tms-sc .mc.bad.x small{filter:grayscale(1);opacity:.45;transition:all .5s ease}
/* 2 · carte */
.tms-sc .mapw{position:absolute;inset:-12% 0 0 0}
.tms-map{width:100%;height:100%;display:block}
.tms-map .oth{fill:#E4DFD4;stroke:#EFEBE3;stroke-width:1.2}.tms-map .src{fill:#D6CEBD;stroke:#EFEBE3;stroke-width:1.2}.tms-map .dz{fill:#CFE6C8;stroke:#EFEBE3;stroke-width:1.2}
.tms-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)}
.tms-sc .dot.on{opacity:1;transform:none;animation:tmsPing 1.4s ease-out 1;animation-delay:var(--d)}
@keyframes tmsPing{0%{box-shadow:0 0 0 0 rgba(255,84,0,.55)}100%{box-shadow:0 0 0 3cqw rgba(255,84,0,0)}}
.tms-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}
.tms-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)}
.tms-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)}
.tms-sc .st img{width:100%;height:100%;object-fit:contain;display:block}
.tms-sc .st.on{opacity:1;filter:none;transform:none}
.tms-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)}
.tms-sc .cnt.on{opacity:1;transform:none}
.tms-sc .cnt b{font-family:'Sora',sans-serif;font-weight:800;font-size:4cqw;font-variant-numeric:tabular-nums}
.tms-sc .cnt span{font-weight:800;font-size:2.5cqw}
/* 3 · prix */
.tms-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)}
.tms-sc .car.on{opacity:1;transform:rotate(-3deg)}
.tms-sc .car .ph{position:relative;background:var(--s);border-radius:2.6cqw;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center}
.tms-sc .car .ph img{width:88%;height:86%;object-fit:contain}
.tms-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}
.tms-sc .fl svg{width:3cqw;height:2cqw;border-radius:.4cqw}
.tms-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}
.tms-sc .car small{display:block;margin-top:.8cqw;font-weight:700;font-size:2.4cqw;color:var(--m)}
.tms-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)}
.tms-sc .rcpt.on{opacity:1;transform:rotate(1.5deg)}
.tms-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}
.tms-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%)}
.tms-sc .ln span{font-weight:700;color:var(--m)}.tms-sc .ln b{font-weight:800;font-variant-numeric:tabular-nums}
.tms-sc .ln.on{opacity:1;transform:none}
.tms-sc .sep{display:block;height:.5cqw;border-radius:.5cqw;background:var(--k);margin:1.6cqw 0 1.2cqw;transform:scaleX(0);transform-origin:left}
.tms-sc .sep.on{transform:none}
.tms-sc .tot{display:flex;flex-direction:column;opacity:0;transform:scale(.7);transform-origin:left}
.tms-sc .tot span{font-weight:800;font-size:2.4cqw;color:var(--m)}
.tms-sc .tot b{font-family:'Sora',sans-serif;font-weight:800;font-size:5.3cqw;letter-spacing:-.03em;white-space:nowrap}
.tms-sc .tot.on{opacity:1;transform:none}
.tms-sc .tot.fl2 b{color:var(--o)}
.tms-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)}
.tms-sc .wa.on{opacity:1;transform:rotate(-2deg)}
.tms-sc .wa i{width:5.6cqw;height:5.6cqw;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center}
.tms-sc .wa i svg{width:62%;height:62%}
@media (prefers-reduced-motion:reduce){.tms-sc *{transition:opacity .3s !important;animation:none !important}}
/* Integration: the section sits inside the 820px .wrap, so it takes the column width and
   the page's horizontal rhythm instead of its own padding. Importer-only: the story is the
   Algerian import route (customs rules, landed price); Trader keeps the static steps. */
.tms{max-width:none;padding:clamp(28px,4vw,56px) 0 0}
body[data-mode="eu"] .tms,body[data-mode="sell"] .tms{display:none}
/* The page has a generic .pill chip rule (border + muted colour); the scene's search pill must not inherit it. */
.tms-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){.tms{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"] .tms-sc :is(.rules,.rc,.mc,.tag,.cnt,.car,.rcpt,.wa){direction:rtl}
[dir="rtl"] .tms-sc .rc{padding:1.5cqw 1.5cqw 1.5cqw 2.6cqw}
[dir="rtl"] .tms-sc .wa{padding:1.2cqw 1.2cqw 1.2cqw 3cqw}
[dir="rtl"] .tms-sc .tot{transform-origin:right}
.tms.tm-abroad .tms-map .dz{display:none}