/* TransMemo - fond anime du hero (couche strictement derriere le contenu) */
.tmx-hero-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  -webkit-mask-image:radial-gradient(115% 95% at 70% 45%,#000 38%,rgba(0,0,0,.55) 68%,transparent 100%);
          mask-image:radial-gradient(115% 95% at 70% 45%,#000 38%,rgba(0,0,0,.55) 68%,transparent 100%);
}
.tmx-hero-bg svg{position:absolute;inset:0;width:100%;height:100%;display:block}

/* Halos lents */
.tmx-hero-bg .glow{
  position:absolute;border-radius:50%;filter:blur(70px);opacity:.4;
  background:radial-gradient(circle,rgba(227,6,19,.5),transparent 68%);
}
.tmx-hero-bg .glow-a{width:620px;height:620px;top:-14%;right:-6%;animation:tmxDrift 26s ease-in-out infinite}
.tmx-hero-bg .glow-b{width:480px;height:480px;bottom:-18%;left:6%;opacity:.22;animation:tmxDrift 34s ease-in-out infinite reverse}
@keyframes tmxDrift{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%    {transform:translate3d(-38px,34px,0) scale(1.09)}
}

/* Trace des lignes */
.tmx-hero-bg .route{fill:none;stroke:#fff;stroke-opacity:.075;stroke-width:2.5;
  stroke-linecap:round;stroke-linejoin:round}

/* Bus qui circulent le long des lignes */
.tmx-hero-bg .bus{fill:none;stroke:#ff5a64;stroke-width:3.5;stroke-linecap:round;
  stroke-dasharray:14 1000;stroke-dashoffset:1000;filter:drop-shadow(0 0 6px rgba(227,6,19,.55));
  animation:tmxRun linear infinite}
@keyframes tmxRun{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}
.tmx-hero-bg .bus-1{animation-duration:17s;animation-delay:-2s}
.tmx-hero-bg .bus-2{animation-duration:23s;animation-delay:-11s;stroke:#ff9098}
.tmx-hero-bg .bus-3{animation-duration:20s;animation-delay:-6s}
.tmx-hero-bg .bus-4{animation-duration:28s;animation-delay:-16s;stroke:#ff9098;stroke-width:3}
.tmx-hero-bg .bus-5{animation-duration:25s;animation-delay:-9s}

/* Arrets qui respirent */
.tmx-hero-bg .stop{fill:#111820;stroke:#fff;stroke-opacity:.3;stroke-width:2;
  transform-box:fill-box;transform-origin:center;animation:tmxStop 5.5s ease-in-out infinite}
@keyframes tmxStop{0%,100%{opacity:.35}50%{opacity:.9}}
.tmx-hero-bg .stop:nth-of-type(2n){animation-delay:-1.8s}
.tmx-hero-bg .stop:nth-of-type(3n){animation-delay:-3.4s}

@media (max-width:900px){
  .tmx-hero-bg{opacity:.72}
  .tmx-hero-bg .glow-a{width:420px;height:420px}
}
@media (prefers-reduced-motion:reduce){
  .tmx-hero-bg .glow,.tmx-hero-bg .bus,.tmx-hero-bg .stop{animation:none!important}
  .tmx-hero-bg .bus{stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:.18}
}