/* Importer hero — « la voiture que l'Algérie laisse entrer ». Markup: importer-hero.html, timeline: importer-hero.js */
.tmi-root{display:flex;justify-content:center;font-family:'Manrope',system-ui,sans-serif;color:#0B0F14;margin:6px auto 4px;width:100%}
/* The story is about the Algerian import route: Trader and Vendre keep their own heroes. */
body[data-mode="eu"] .tmi-root,body[data-mode="sell"] .tmi-root{display:none}
/* Phone: animation stacked above the title. Desktop: one hero band, pitch left, animation
   right. Shared by the Importer (.tmi-*) and Trader (.tmt-*) scenes; only one is visible. */
.hero-band{display:flex;flex-direction:column}
@media(min-width:1000px){
  /* .wrap is 820px wide on desktop; the band bleeds 74px past it on each side (940px) so the
     hero reads wider than the search box below: 440px animation + 28px gap, ~470px pitch. */
  .hero-band{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:28px;align-items:center;padding:16px 2px 40px;margin-inline:calc(-1 * min(74px, (100vw - 880px) / 2))}
  /* The wrap clips horizontal overflow (phone safety); let the wider band through on desktop. */
  #s-search > .wrap{overflow-x:visible}
  .hero-band .hero{order:1;padding:0}
  .hero-band .hero h1{font-size:38px;margin-bottom:10px}
  .hero-band .hero .sub{font-size:17px;line-height:1.45}
  .hero-band .tmi-root,.hero-band .tmt-root{order:2;margin:0}
  .hero-band .tmi-scene,.hero-band .tmt-scene{width:440px;font-size:13px}
}
/* isolation: the scene layers (z-index up to 60) must never escape above sheets/dialogs. */
.tmi-scene{position:relative;isolation:isolate;z-index:0;width:min(92vw,540px);aspect-ratio:1/1;font-size:min(3vw,16px)}
.tmi-scene *{box-sizing:border-box}
/* carte */
.tmi-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}
.tmi-mapw.on{opacity:1;transform:none}
.tmi-mapw.dim{opacity:.38;filter:saturate(.6)}
.tmi-map{position:absolute;inset:0;width:100%;height:100%}
.tmi-map .oth{fill:#E8E4DA;stroke:#F5F3EE;stroke-width:1.2}
.tmi-map .src{fill:#DAD3C3;stroke:#F5F3EE;stroke-width:1.2}
.tmi-map .dz{fill:#CFE6C8;stroke:#F5F3EE;stroke-width:1.2}
.tmi-dot{position:absolute;width:3.2%;aspect-ratio:1;margin:-1.6% 0 0 -1.6%;border-radius:50%;background:#FF5400;border:2px solid #fff;
  box-shadow:0 0 0 0 rgba(255,84,0,.5);opacity:0;transform:scale(0);transition:all .45s cubic-bezier(.3,1.7,.4,1)}
.tmi-dot.on{opacity:1;transform:none;animation:tmiPing 1.6s ease-out 1}
@keyframes tmiPing{0%{box-shadow:0 0 0 0 rgba(255,84,0,.55)}100%{box-shadow:0 0 0 14px rgba(255,84,0,0)}}
.tmi-dot.port,.tmi-dot.dzd{background:#0B0F14;opacity:1;transform:none;width:2.6%;margin:-1.3% 0 0 -1.3%}
.tmi-dot.dzd{background:#006233}
/* 1 · recherche */
.tmi-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)}
.tmi-pill.on{opacity:1;transform:none}
.tmi-pill.dock{left:3%;top:3%;width:55%;font-size:.78em;padding:.7em 1em;transform:rotate(-2deg)}
.tmi-pill.dock .tmi-caret{display:none}
.tmi-pill .mk svg{width:1.45em;height:1.45em;display:block}
.tmi-caret{width:2.5px;height:1.15em;background:#FF5400;animation:tmiCb 1s steps(1) infinite}
@keyframes tmiCb{50%{opacity:0}}
.tmi-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)}
.tmi-pill .ok svg{width:1em;height:1em}.tmi-pill .ok.on{opacity:1;transform:none}
/* 2 · compteur et rejets */
.tmi-count{position:absolute;left:3%;top:87%;z-index:58;display:flex;align-items:baseline;gap:.45em;background:#0B0F14;color:#F5F3EE;border-radius:999px;padding:.55em 1.1em;
  box-shadow:0 12px 26px rgba(11,15,20,.22);opacity:0;transform:translateY(40%) scale(.8);transition:all .6s cubic-bezier(.3,1.4,.4,1),background .4s}
.tmi-count.on{opacity:1;transform:none}
.tmi-count b{font-family:'Sora',sans-serif;font-weight:800;font-size:1.25em;font-variant-numeric:tabular-nums}
.tmi-count span{font-weight:700;font-size:.78em}
.tmi-count.ok{background:#40FF00;color:#0B0F14}
.tmi-rej{position:absolute;z-index:57;white-space:nowrap;font-weight:800;font-size:.72em;color:#D0161F;background:#fff;border:2px solid #D0161F;border-radius:999px;padding:.3em .8em;
  opacity:0;transform:translate(-50%,-50%) scale(.4);transition:all .5s cubic-bezier(.3,1.6,.4,1)}
.tmi-rej.on{opacity:1;transform:translate(-50%,-160%) rotate(var(--r)) scale(1)}
.tmi-rej.off{opacity:0;transform:translate(-50%,-420%) rotate(calc(var(--r)*3)) scale(.7);transition:all .6s cubic-bezier(.55,.05,.35,1)}
/* 3 · les cartes sortent de la carte */
.tmi-card{position:absolute;left:var(--fx);top:var(--fy);width:38%;background:#fff;border-radius:20px;padding:3.2%;box-shadow:0 14px 32px rgba(11,15,20,.16);
  opacity:0;transform:translate(-50%,-50%) scale(.08);transition:all .9s cubic-bezier(.3,1.25,.4,1);z-index:40}
.tmi-card .ph{position:relative;background:#F5F3EE;border-radius:13px;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center}
.tmi-card .ph img{width:90%;height:88%;object-fit:contain}
.tmi-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:.35em}
.tmi-card .fl svg{width:1.35em;height:.9em;border-radius:2px;display:block}
.tmi-card .bd{padding:.5em .15em 0}
.tmi-card b{display:block;font-family:'Sora',sans-serif;font-weight:800;font-size:1.02em;letter-spacing:-.02em}
.tmi-card span{display:block;font-weight:800;font-size:.7em;margin-top:.1em}
.tmi-card small{display:block;font-weight:600;font-size:.62em;color:#5B6470}
.tmi-scene.fan #tmiC1{opacity:1;left:23%;top:45%;transform:translate(-50%,-50%) rotate(-5deg);z-index:43}
.tmi-scene.fan #tmiC2{opacity:1;left:50%;top:41%;transform:translate(-50%,-50%) rotate(1deg);z-index:42}
.tmi-scene.fan #tmiC3{opacity:1;left:77%;top:46%;transform:translate(-50%,-50%) rotate(6deg);z-index:41}
.tmi-scene.pick #tmiC2,.tmi-scene.pick #tmiC3{opacity:0;transform:translate(-50%,-50%) scale(.7) rotate(-4deg);transition:all .45s ease}
.tmi-scene.pick #tmiC1{left:50%;top:46%;width:50%;transform:translate(-50%,-50%);transition:all .95s cubic-bezier(.55,.05,.35,1)}
.tmi-card.flash{box-shadow:0 16px 38px rgba(255,84,0,.35),0 0 0 4px #FF5400}
.tmi-okdz{position:absolute;left:58%;top:22%;z-index:45;font-style:normal;display:inline-flex;align-items:center;gap:.35em;font-weight:800;font-size:.85em;background:#40FF00;
  border-radius:999px;padding:.45em .9em;opacity:0;transform:scale(.3);transition:all .45s cubic-bezier(.3,1.7,.4,1)}
.tmi-okdz svg{width:1em;height:1em}.tmi-okdz.on{opacity:1;transform:rotate(4deg)}
/* 4 · le vrai coût */
.tmi-chip{position:absolute;left:40%;top:44%;z-index:50;background:#fff;border-radius:999px;padding:.55em 1em;font-weight:800;font-size:.85em;white-space:nowrap;
  box-shadow:0 12px 26px rgba(11,15,20,.18);opacity:0;transform:scale(.4);transition:all .85s cubic-bezier(.4,.9,.4,1)}
#tmiK0{background:#FFBD00}
.tmi-chip.burst{opacity:1;transform:rotate(var(--r,0deg))}
.tmi-chip.suck{opacity:0;left:44% !important;top:46% !important;transform:scale(.18);transition:all .7s cubic-bezier(.55,.05,.35,1)}
.tmi-scene.cost #tmiC1,.tmi-scene.cost .tmi-okdz{opacity:0;transform:translate(-50%,-50%) scale(.6);transition:all .5s ease .5s}
.tmi-scene.cost .tmi-okdz{transform:scale(.6)}
/* 5 · rendu à Alger via Marseille */
.tmi-final{position:absolute;left:12%;top:12%;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}
.tmi-scene.done .tmi-final{opacity:1;transform:none}
.tmi-final .el{opacity:0;transform:translateY(12px) scale(.92);transition:all .5s cubic-bezier(.3,1.35,.4,1)}
.tmi-scene.done .tmi-final .el{opacity:1;transform:none}
.tmi-scene.done .tmi-final .el:nth-child(2){transition-delay:.3s}.tmi-scene.done .tmi-final .el:nth-child(3){transition-delay:.55s}
.tmi-scene.done .tmi-final .el:nth-child(4){transition-delay:.7s}.tmi-scene.done .tmi-final .el:nth-child(5){transition-delay:1.05s}
.tmi-final .ph{position:relative;background:#F5F3EE;border-radius:18px;aspect-ratio:2.2/1;display:flex;align-items:center;justify-content:center}
.tmi-final .ph img{height:86%;width:auto}
.tmi-final .free{position:absolute;right:8px;top:8px;font-weight:800;font-size:.62em;background:#0B0F14;color:#F5F3EE;border-radius:999px;padding:.3em .7em}
.tmi-final .best{position:absolute;left:8px;bottom:8px;font-weight:800;font-size:.62em;background:#40FF00;border-radius:999px;padding:.3em .7em}
.tmi-final .route{display:flex;align-items:center;gap:.35em;margin:.8em .1em .1em}
.tmi-final .route .pt{display:inline-flex;flex-direction:column;align-items:center;gap:.2em;font-weight:800;font-size:.64em}
.tmi-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)}
.tmi-final .route .ln{position:relative;flex:1;height:2.4em;margin-bottom:1.1em}
.tmi-final .route .road{background:linear-gradient(90deg,#9AA0A8 50%,transparent 0) 0 50%/10px 2px repeat-x}
.tmi-final .route .sea{background:linear-gradient(90deg,#4F9FD6 50%,transparent 0) 0 50%/8px 2px repeat-x}
.tmi-final .mv{position:absolute;left:0;top:50%;transform:translate(0,-64%);transition:left 2.2s cubic-bezier(.45,.05,.4,1)}
.tmi-final .car{height:1.5em;scale:-1 1}.tmi-final .fer{height:2em}
.tmi-scene.drive .tmi-final .car{left:calc(100% - 3.9em)}
.tmi-scene.sail .tmi-final .fer{left:calc(100% - 6.2em)}
.tmi-final .lb{display:block;font-weight:700;font-size:.66em;color:#5B6470;margin:.3em .2em 0}
.tmi-final .tot{display:block;font-family:'Sora',sans-serif;font-weight:800;font-size:2.05em;letter-spacing:-.03em;margin:.05em .1em .3em}
.tmi-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:.78em}
.tmi-final .wa i{width:1.9em;height:1.9em;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center}
.tmi-final .wa i svg{width:62%;height:62%}
.tmi-scene.done .tmi-pill{left:22%;top:2.5%;width:56%;justify-content:center}
.tmi-scene.done .tmi-count{opacity:0}
.tmi-scene.out>*{opacity:0 !important;transition:opacity .45s ease !important}
@media (prefers-reduced-motion:reduce){.tmi-scene *{transition:opacity .4s !important;animation:none !important}}
/* Arabic: the scene keeps its physical layout (map, journey Essen → Alger); the text blocks inside read right-to-left. */
[dir="rtl"] .tmi-card .bd,[dir="rtl"] .tmi-count,[dir="rtl"] .tmi-okdz,[dir="rtl"] .tmi-final,[dir="rtl"] .tmi-chip,[dir="rtl"] .tmi-rej{direction:rtl}
[dir="rtl"] .tmi-final .route{direction:ltr}
[dir="rtl"] .tmi-final .wa{padding:.35em .35em .35em .9em}
/* Destination other than Algeria (importer-destination.js): the Algerian land layer and its port dot leave the map. */
.tmi-scene.tm-abroad .tmi-map .dz,.tmi-scene.tm-abroad .tmi-dot.dzd{display:none}