/* Trader hero — « Achète bas. Revends haut. ». Markup: trader-hero.html, timeline: trader-hero.js */
.tmt-root{display:flex;justify-content:center;font-family:'Manrope',system-ui,sans-serif;color:#0B0F14;margin:6px auto 4px;width:100%}
/* The story is the intra-Europe arbitrage: Importer and Vendre keep their own heroes. */
body[data-mode="dz"] .tmt-root,body[data-mode="sell"] .tmt-root{display:none}
/* isolation: the scene layers (z-index up to 60) must never escape above sheets/dialogs. */
.tmt-scene{position:relative;isolation:isolate;z-index:0;width:min(92vw,540px);aspect-ratio:1/1;font-size:min(3vw,16px);--tb:#0B0F14;--ts:#FF5400;--tst:#C74200}
.tmt-scene *{box-sizing:border-box}
.tmt-mapw{position:absolute;inset:0;border-radius:28px;overflow:hidden;opacity:0;transform:scale(.94);transition:opacity .8s ease,transform 1s cubic-bezier(.3,1.2,.4,1),filter .6s}
.tmt-mapw.on{opacity:1;transform:none}.tmt-mapw.dim{opacity:.35;filter:saturate(.6)}
.tmt-map{position:absolute;inset:0;width:100%;height:100%}
.tmt-map .oth,.tmt-map .dz{fill:#E8E4DA;stroke:#F5F3EE;stroke-width:1.2}
.tmt-map .src{fill:#DAD3C3;stroke:#F5F3EE;stroke-width:1.2}
.tmt-dot{position:absolute;width:3.2%;aspect-ratio:1;margin:-1.6% 0 0 -1.6%;border-radius:50%;border:2px solid #fff;opacity:0;transform:scale(0);transition:all .45s cubic-bezier(.3,1.7,.4,1)}
.tmt-dot.b{background:var(--tb)}.tmt-dot.s{background:var(--ts)}
.tmt-dot.on{opacity:1;transform:none;animation:tmtPing 1.6s ease-out 1}
@keyframes tmtPing{0%{box-shadow:0 0 0 0 rgba(11,15,20,.28)}100%{box-shadow:0 0 0 14px rgba(11,15,20,0)}}
/* 1 */
.tmt-pill{position:absolute;left:8%;top:42%;width:84%;background:#fff;border-radius:999px;padding:.95em 1.2em;z-index:60;display:flex;align-items:center;gap:.55em;
  font-weight:800;font-size:1.05em;white-space:nowrap;box-shadow:0 16px 38px rgba(11,15,20,.18);opacity:0;transform:translateY(12%) scale(.8) rotate(-2deg);transition:all .8s cubic-bezier(.3,1.35,.4,1)}
.tmt-pill.on{opacity:1;transform:none}
.tmt-pill.dock{left:3%;top:3%;width:50%;font-size:.78em;padding:.7em 1em;transform:rotate(-2deg)}
.tmt-pill.dock .tmt-caret{display:none}
.tmt-pill .mk svg{width:1.45em;height:1.45em;display:block}
.tmt-caret{width:2.5px;height:1.15em;background:#FF5400;animation:tmtCb 1s steps(1) infinite}
@keyframes tmtCb{50%{opacity:0}}
.tmt-pill .ok{position:absolute;right:-.35em;top:-.45em;width:1.7em;height:1.7em;border-radius:50%;background:#40FF00;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.3);transition:all .45s cubic-bezier(.3,1.7,.4,1)}
.tmt-pill .ok svg{width:1em;height:1em}.tmt-pill .ok.on{opacity:1;transform:none}
/* 2 */
.tmt-tag{position:absolute;z-index:58;display:inline-flex;align-items:center;gap:.55em;font-weight:800;font-size:.72em;color:#fff;border-radius:999px;padding:.45em .7em .45em .9em;box-shadow:0 10px 22px rgba(11,15,20,.16);opacity:0;transform:scale(.5);transition:all .5s cubic-bezier(.3,1.6,.4,1)}
.tmt-tag.b{background:var(--tb);left:56%;top:22%}.tmt-tag.s{background:var(--ts);color:#0B0F14;left:6%;top:62%}
.tmt-tag .fls{display:inline-flex;gap:.3em}.tmt-tag .fls i{display:block;line-height:0}.tmt-tag .fls svg{width:1.5em;height:1em;border-radius:2px;display:block;box-shadow:0 0 0 1px rgba(255,255,255,.55)}
.tmt-tag.on{opacity:1;transform:rotate(-2deg)}
.tmt-scene.pair .tmt-tag{opacity:0;transform:scale(.6);transition:all .35s ease}
/* 3 · rail */
.tmt-rail{position:absolute;left:5%;right:5%;top:78%;height:16%;background:#fff;border-radius:18px;padding:0 6%;z-index:57;box-shadow:0 14px 30px rgba(11,15,20,.16);
  opacity:0;transform:translateY(30%);transition:all .6s cubic-bezier(.3,1.3,.4,1)}
.tmt-rail.on{opacity:1;transform:none}
.tmt-rail .ax{position:absolute;left:6%;right:6%;top:52%;height:2px;background:#0B0F14}
.tmt-rail .tk{position:absolute;width:3px;height:0;border-radius:2px;transition:height .4s cubic-bezier(.3,1.6,.4,1)}
.tmt-rail .tk.b{top:3px;background:var(--tb)}.tmt-rail .tk.s{bottom:3px;background:var(--ts)}
.tmt-rail.on .tk{height:1.1em}
.tmt-rail .md{position:absolute;top:50%;width:.9em;height:.9em;margin:-.45em 0 0 -.45em;border-radius:50%;border:2px solid #fff;transform:scale(0);transition:transform .4s cubic-bezier(.3,1.7,.4,1) .9s}
.tmt-rail .md.b{background:var(--tb)}.tmt-rail .md.s{background:var(--ts)}.tmt-rail.on .md{transform:none}
.tmt-rail .lb{position:absolute;white-space:nowrap;font-weight:800;font-size:.64em;transform:translateX(-50%);opacity:0;transition:opacity .4s ease 1.1s}
.tmt-rail .lb.b{bottom:.4em;color:var(--tb)}.tmt-rail .lb.s{top:.4em;color:var(--tst)}.tmt-rail.on .lb{opacity:1}
/* 4 · cartes et écart */
.tmt-card{position:absolute;left:var(--fx);top:var(--fy);width:36%;background:#fff;border-radius:20px;padding:3%;box-shadow:0 14px 32px rgba(11,15,20,.16);z-index:40;
  opacity:0;transform:translate(-50%,-50%) scale(.08);transition:all .9s cubic-bezier(.3,1.25,.4,1)}
.tmt-card .ph{position:relative;background:#F5F3EE;border-radius:13px;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center}
.tmt-card .ph img{width:90%;height:88%;object-fit:contain}
.tmt-card .fl{position:absolute;left:6px;top:6px;display:inline-flex;align-items:center;gap:.35em;background:#0B0F14;color:#fff;font-weight:800;font-size:.62em;border-radius:999px;padding:.3em .35em}
.tmt-card .fl svg{width:1.35em;height:.9em;border-radius:2px;display:block}
.tmt-card .bd{padding:.5em .15em 0}
.tmt-card small{display:block;font-weight:800;font-size:.62em;color:#5B6470}
.tmt-card b{display:block;font-family:'Sora',sans-serif;font-weight:800;font-size:1.15em;letter-spacing:-.02em}
.tmt-card.b b{color:var(--tb)}.tmt-card.s b{color:var(--tst)}
.tmt-card span{display:block;font-weight:700;font-size:.66em}
.tmt-scene.pair #tmtC1{opacity:1;left:25%;top:40%;transform:translate(-50%,-50%) rotate(-4deg)}
.tmt-scene.pair #tmtC2{opacity:1;left:75%;top:40%;transform:translate(-50%,-50%) rotate(4deg)}
.tmt-arrow{position:absolute;left:50%;top:38%;width:9%;z-index:45;transform:translate(-50%,-50%) scaleX(0);transform-origin:left;transition:transform .5s ease}
.tmt-arrow svg{width:100%;display:block}.tmt-scene.pair .tmt-arrow{transform:translate(-50%,-50%) scaleX(1);transition-delay:.9s}
.tmt-spread{position:absolute;left:50%;top:60%;z-index:50;font-family:'Sora',sans-serif;font-weight:800;font-size:1.7em;letter-spacing:-.02em;background:#40FF00;border-radius:999px;
  padding:.3em .8em;transform:translate(-50%,-50%) scale(0);transition:transform .5s cubic-bezier(.3,1.7,.4,1),box-shadow .4s}
.tmt-spread.on{transform:translate(-50%,-50%) rotate(-3deg)}
.tmt-spread.flash{box-shadow:0 0 0 5px #FF5400}
.tmt-chip{position:absolute;left:44%;top:60%;z-index:52;background:#fff;border-radius:999px;padding:.55em 1em;font-weight:800;font-size:.8em;white-space:nowrap;color:#B3261E;
  box-shadow:0 12px 26px rgba(11,15,20,.18);opacity:0;transform:scale(.4);transition:all .8s cubic-bezier(.4,.9,.4,1)}
.tmt-chip.burst{opacity:1;transform:rotate(var(--r,0deg))}
.tmt-chip.suck{opacity:0;left:46% !important;top:60% !important;transform:scale(.18);transition:all .7s cubic-bezier(.55,.05,.35,1)}
.tmt-scene.deal #tmtC1,.tmt-scene.deal #tmtC2,.tmt-scene.deal .tmt-arrow,.tmt-scene.deal .tmt-spread,.tmt-scene.deal .tmt-rail,.tmt-scene.deal .tmt-tag{opacity:0;transition:opacity .45s ease}
/* 5 · le deal */
.tmt-final{position:absolute;left:12%;top:11%;width:76%;background:#fff;border-radius:26px;padding:3%;z-index:55;box-shadow:0 26px 56px rgba(11,15,20,.22);
  opacity:0;transform:translateY(8%) scale(.72);transition:transform .8s cubic-bezier(.3,1.3,.4,1),opacity .5s ease;pointer-events:none}
.tmt-scene.deal .tmt-final{opacity:1;transform:none}
.tmt-final .el{opacity:0;transform:translateY(12px) scale(.92);transition:all .5s cubic-bezier(.3,1.35,.4,1)}
.tmt-scene.deal .tmt-final .el{opacity:1;transform:none}
.tmt-scene.deal .tmt-final .el:nth-child(2){transition-delay:.25s}.tmt-scene.deal .tmt-final .el:nth-child(3){transition-delay:.45s}
.tmt-scene.deal .tmt-final .el:nth-child(4){transition-delay:.65s}.tmt-scene.deal .tmt-final .el:nth-child(5){transition-delay:.8s}.tmt-scene.deal .tmt-final .el:nth-child(6){transition-delay:1.1s}
.tmt-final .ph{position:relative;background:#F5F3EE;border-radius:18px;aspect-ratio:2.4/1;display:flex;align-items:center;justify-content:center}
.tmt-final .ph img{height:86%;width:auto}
.tmt-final .pro{position:absolute;left:8px;bottom:8px;font-weight:800;font-size:.6em;background:#0B0F14;color:#F5F3EE;border-radius:999px;padding:.3em .7em}
.tmt-final .route{display:flex;align-items:center;gap:.4em;margin:.7em .1em 0}
.tmt-final .route .pt{display:inline-flex;flex-direction:column;align-items:center;gap:.2em;font-weight:800;font-size:.64em}
.tmt-final .route .pt i svg{width:1.9em;height:1.26em;border-radius:2px;display:block;box-shadow:0 0 0 1px rgba(11,15,20,.08)}
.tmt-final .route .ln{position:relative;flex:1;height:2.4em;margin-bottom:1.1em;background:linear-gradient(90deg,#9AA0A8 50%,transparent 0) 0 50%/10px 2px repeat-x}
.tmt-final .mv{position:absolute;left:0;top:50%;height:1.5em;transform:translate(0,-64%);scale:-1 1;transition:left 2.4s cubic-bezier(.45,.05,.4,1)}
.tmt-scene.drive .tmt-final .mv{left:calc(100% - 3.9em)}
.tmt-final .two{display:flex;gap:.6em;margin-top:.2em}
.tmt-final .two span{flex:1;background:#F5F3EE;border-radius:12px;padding:.45em .7em}
.tmt-final .two small{display:block;font-weight:700;font-size:.62em;color:#5B6470}
.tmt-final .two b{font-family:'Sora',sans-serif;font-weight:800;font-size:1.05em}
.tmt-final .two .b{color:var(--tb)}.tmt-final .two .s{color:var(--tst)}
.tmt-final .lb{display:block;font-weight:700;font-size:.64em;color:#5B6470;margin:.6em .2em 0}
.tmt-final .tot{display:block;font-family:'Sora',sans-serif;font-weight:800;font-size:2.05em;letter-spacing:-.03em;margin:0 .1em .25em;color:#0B0F14}
.tmt-final .wa{display:inline-flex;align-items:center;gap:.5em;background:#F5F3EE;border-radius:999px;padding:.35em .9em .35em .35em;font-weight:800;font-size:.76em}
.tmt-final .wa i{width:1.9em;height:1.9em;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center}
.tmt-final .wa i svg{width:62%;height:62%}
.tmt-scene.deal .tmt-pill{left:25%;top:2%;width:50%;justify-content:center}
.tmt-scene.out>*{opacity:0 !important;transition:opacity .45s ease !important}
@media (prefers-reduced-motion:reduce){.tmt-scene *{transition:opacity .4s !important;animation:none !important}}
/* Arabic: the scene keeps its physical layout (map, rail, journey Essen → Lyon); the text blocks inside read right-to-left. */
[dir="rtl"] .tmt-tag,[dir="rtl"] .tmt-card .bd,[dir="rtl"] .tmt-final,[dir="rtl"] .tmt-chip,[dir="rtl"] .tmt-rail .lb{direction:rtl}
[dir="rtl"] .tmt-tag{padding:.45em .9em .45em .7em}
[dir="rtl"] .tmt-final .route{direction:ltr}
[dir="rtl"] .tmt-final .wa{padding:.35em .35em .35em .9em}
[dir="rtl"] .tmt-final .tot{direction:ltr;text-align:right}