/* TransMemo - clins d'oeil animes dans les sections du site.
   Regle commune : toujours derriere le contenu, jamais cliquables. */

.tmx-egg{position:absolute;z-index:0;pointer-events:none;will-change:transform}

/* Sections accueillant un clin d'oeil : le contenu repasse au-dessus */
.tmx-intro,.tmx-steps-section,
.tmx-schedule-section,.tmx-route-section,.tmx-faq-section{position:relative;overflow:hidden}
.tmx-intro>.tmx-container,.tmx-steps-section>.tmx-container,
.tmx-schedule-section>.tmx-container,.tmx-route-section>.tmx-container,
.tmx-faq-section>.tmx-container{position:relative;z-index:1}

/* Teintes communes */
.tmx-egg .ink{fill:#17202a}
.tmx-egg .red{fill:#e30613}
.tmx-egg .paper{fill:#fff}
.tmx-egg .strokeInk{fill:none;stroke:#17202a;stroke-linecap:round;stroke-linejoin:round}

/* Oscillation douce, pivot au pied */
@keyframes tmxSway{0%,100%{transform:rotate(-2.6deg)}50%{transform:rotate(2.6deg)}}

/* =========================================================
   2. Le service - le panneau d'arret qui balance
   ========================================================= */
.tmx-egg-stopsign{right:5%;bottom:0;width:78px;opacity:.11;
  transform-origin:50% 100%;animation:tmxSway 5.4s ease-in-out infinite}

/* =========================================================
   3. Les 4 etapes - le bus qui traverse
   ========================================================= */
.tmx-egg-bus{left:-140px;bottom:18px;width:132px;opacity:.1;
  animation:tmxDrive 26s linear infinite}
@keyframes tmxDrive{
  0%  {transform:translate3d(0,0,0)}
  25% {transform:translate3d(28vw,-3px,0)}
  50% {transform:translate3d(56vw,0,0)}
  75% {transform:translate3d(84vw,-3px,0)}
  100%{transform:translate3d(118vw,0,0)}
}
.tmx-egg-bus .wheel{transform-box:fill-box;transform-origin:center;
  animation:tmxRoll 1.1s linear infinite}
@keyframes tmxRoll{to{transform:rotate(360deg)}}

/* =========================================================
   4. Lire un horaire - l'horloge de gare
   ========================================================= */
.tmx-egg-clock{right:6%;top:14%;width:96px;opacity:.1}
.tmx-egg-clock .hand{transform-box:fill-box;transform-origin:50% 100%}
.tmx-egg-clock .min{animation:tmxTurn 24s linear infinite}
.tmx-egg-clock .hour{animation:tmxTurn 144s linear infinite}
.tmx-egg-clock .sec{animation:tmxTick 4s steps(20) infinite}
@keyframes tmxTurn{to{transform:rotate(360deg)}}
@keyframes tmxTick{to{transform:rotate(360deg)}}

/* =========================================================
   5. Parcours (fond sombre) - le trace qui se dessine
   ========================================================= */
.tmx-egg-trace{left:0;top:0;width:100%;height:100%;opacity:.2}
.tmx-egg-trace .base{fill:none;stroke:#fff;stroke-opacity:.28;stroke-width:2.5;
  stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:4 10}
.tmx-egg-trace .draw{fill:none;stroke:#ff5a64;stroke-width:3;stroke-linecap:round;
  stroke-linejoin:round;stroke-dasharray:1000;stroke-dashoffset:1000;
  animation:tmxDraw 9s ease-in-out infinite}
@keyframes tmxDraw{
  0%{stroke-dashoffset:1000}60%{stroke-dashoffset:0}
  85%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}
}
.tmx-egg-trace .pin{fill:#ff5a64;opacity:0;animation:tmxPin 9s ease-in-out infinite}
@keyframes tmxPin{0%,55%{opacity:0;transform:translateY(-6px)}
  65%,85%{opacity:1;transform:translateY(0)}100%{opacity:0}}

/* =========================================================
   6. Aide & FAQ - le panneau de direction
   ========================================================= */
.tmx-egg-signpost{left:4%;bottom:0;width:104px;opacity:.1;
  transform-origin:50% 100%;animation:tmxSway 6.8s ease-in-out infinite}

/* ---------- Adaptations ---------- */
@media (max-width:900px){
  .tmx-egg-stopsign{width:58px;opacity:.09}
  .tmx-egg-clock{width:66px;opacity:.08}
  .tmx-egg-signpost{width:74px;opacity:.08}
  .tmx-egg-bus{width:96px}
}
@media (max-width:600px){
  .tmx-egg-clock,.tmx-egg-signpost{display:none}
}
@media (prefers-reduced-motion:reduce){
  .tmx-egg{display:none}
}