/* MBOKA_T2R3_MOBILE_CSS */

/* Ancien titre : masquage uniquement lorsque
   la nouvelle trajectoire est visible. */
.mp-t2r3-legacy-heading {
  display: none !important;
}

#mpT2Layout .mp-t2r3-nav {
  display: none;
}

@media (max-width: 760px) {

  /* Espace de securite pour la navigation fixe */
  #view-trajectory.mp-t2-guided {
    padding-bottom: calc(
      110px + env(safe-area-inset-bottom, 0px)
    ) !important;
  }

  #mpT2Layout {
    min-width: 0;
    max-width: 100%;
  }

  /* Navigation accessible entre les cinq etapes */
  #mpT2Layout .mp-t2r3-nav:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin: 15px 2px 8px;
  }

  #mpT2Layout .mp-t2r3-label {
    color: #b5d6c2;
    font-size: 11px;
    font-weight: 650;
  }

  #mpT2Layout .mp-t2r3-controls {
    display: flex;
    gap: 7px;
  }

  #mpT2Layout .mp-t2r3-controls button {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    border: 1px solid rgba(125, 220, 167, .3);
    background: rgba(35, 110, 77, .25);
    color: #b9f1cf;
    font-size: 21px;
    cursor: pointer;
  }

  #mpT2Layout .mp-t2r3-controls button:disabled {
    opacity: .28;
    cursor: default;
  }

  #mpT2Layout .mp-t2r3-controls button:focus-visible {
    outline: 2px solid #76e1a7;
    outline-offset: 2px;
  }

  /* Rail defilant horizontalement */
  #mpT2Layout #mpT2Step {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    max-width: 100%;
    gap: 10px;
    padding: 14px 12px 17px;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 12px;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #3d9b72 transparent;
  }

  #mpT2Layout #mpT2Step > .mp-t2-step {
    flex: 0 0 min(68vw, 210px);
    min-width: 0;
    min-height: 57px;
    scroll-snap-align: start;
    padding: 9px;
    border-radius: 12px;
    background: rgba(25, 70, 48, .23);
  }

  #mpT2Layout #mpT2Step .mp-t2-step strong {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  #mpT2Layout .mp-t2-switch {
    position: relative;
    z-index: 2;
  }

  #mpT2Layout .mp-t2-columns,
  #mpT2Layout .mp-t2-stack,
  #mpT2Layout .mp-t2-card {
    min-width: 0;
  }
}

@media (max-width: 440px) {
  #mpT2Layout #mpT2Step > .mp-t2-step {
    flex-basis: 72vw;
  }
}