/* MBOKA_TRAJECTORY_T2R4_SAFE */

/*
  Masquer le titre historique seulement lorsque
  la nouvelle vue Parcours est active.

  Le titre revient automatiquement dans
  les autres pages et dans la vue classique.
*/

body:has(
  #view-trajectory.view.active.mp-t2-guided
) .topbar #pageTitle {
  display: none !important;
}

/*
  Responsive mobile :
  compacter seulement les ecrans courts.
*/

@media (max-width: 760px) and (max-height: 700px) {

  #view-trajectory.mp-t2-guided .mp-t2-switch {
    margin-bottom: 8px !important;
  }

  #view-trajectory.mp-t2-guided
  #mpT2Layout .mp-t2-hero {
    min-height: 0 !important;
    padding: 14px 16px !important;
    gap: 9px !important;
    flex-direction: column !important;
  }

  #view-trajectory.mp-t2-guided
  #mpT2Layout .mp-t2-kicker {
    font-size: 9px !important;
  }

  #view-trajectory.mp-t2-guided
  #mpT2Layout .mp-t2-hero h2 {
    font-size: 26px !important;
    margin: 5px 0 !important;
    line-height: 1.1;
  }

  #view-trajectory.mp-t2-guided
  #mpT2Layout .mp-t2-hero p {
    font-size: 13px !important;
    margin: 0 !important;
    line-height: 1.35;
  }

  /* Le slogan reste visible.
     Seul le texte secondaire est cache. */

  #view-trajectory.mp-t2-guided
  #mpT2Layout .mp-t2-hero-copy > span {
    display: none !important;
  }

  #view-trajectory.mp-t2-guided
  #mpT2Layout .mp-t2-stage-card {
    width: 100% !important;
    min-width: 0 !important;
    padding: 10px 12px !important;
  }

  #view-trajectory.mp-t2-guided
  #mpT2Layout .mp-t2-stage-card strong {
    font-size: 16px !important;
    margin: 3px 0 !important;
  }

  /* Parcours horizontal */

  #view-trajectory.mp-t2-guided
  #mpT2Layout #mpT2Step {
    display: flex !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    grid-template-columns: none !important;
    gap: 9px !important;
    margin-top: 9px !important;
    padding: 10px 12px !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  #view-trajectory.mp-t2-guided
  #mpT2Layout #mpT2Step > .mp-t2-step {
    flex: 0 0 190px !important;
    min-width: 0 !important;
    min-height: 54px !important;
    scroll-snap-align: start;
  }

  /* Espace pour la navigation fixe */

  #view-trajectory.mp-t2-guided {
    padding-bottom: calc(
      120px + env(safe-area-inset-bottom, 0px)
    ) !important;
  }
}