/*
 * Optimisation mobile limitée aux trois actions du parcours bancaire.
 * Aucun autre bloc de la page n'est ciblé par cette feuille.
 */

@media (max-width: 700px) {
  .bank-page .bank-journey .journey-action-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 10px;
    border-color: rgba(15, 157, 140, 0.34);
    border-radius: 24px;
    background:
      linear-gradient(145deg, rgba(239, 251, 248, 0.98), rgba(211, 242, 235, 0.82));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      0 14px 34px rgba(11, 111, 98, 0.1);
  }

  .bank-page .bank-journey .journey-action-tab {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 132px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid rgba(15, 157, 140, 0.28);
    border-radius: 20px;
    padding: 12px 6px 14px;
    background:
      radial-gradient(circle at 50% 0, rgba(255, 255, 255, 0.98), transparent 56%),
      rgba(255, 255, 255, 0.72);
    color: var(--teal-dark);
    box-shadow:
      0 9px 22px rgba(20, 34, 79, 0.055),
      inset 0 1px 0 rgba(255, 255, 255, 0.96);
    font-size: clamp(0.96rem, 3.9vw, 1.08rem);
    font-weight: 900;
    line-height: 1.08;
    text-wrap: balance;
  }

  .bank-page .bank-journey .journey-action-tab::before {
    display: block;
    width: 66px;
    height: 66px;
    flex: 0 0 66px;
    border-radius: 18px;
    background-color: #fbf7ec;
    background-image: var(--bank-action-image);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow:
      0 7px 15px rgba(20, 34, 79, 0.1),
      0 0 0 1px rgba(15, 157, 140, 0.12);
    content: "";
  }

  .bank-page .bank-journey #action-simuler {
    --bank-action-image: url("/assets/banques/actions/simuler.webp?v=1.3.0");
  }

  .bank-page .bank-journey #action-comparer {
    --bank-action-image: url("/assets/banques/actions/comparer.webp?v=1.3.0");
  }

  .bank-page .bank-journey #action-explorer {
    --bank-action-image: url("/assets/banques/actions/ma-banque.webp?v=1.3.0");
  }

  .bank-page .bank-journey #eme-action-simuler {
    --bank-action-image: url("/assets/banques/actions/simuler.webp?v=1.3.0");
  }

  .bank-page .bank-journey #eme-action-comparer {
    --bank-action-image: url("/assets/banques/actions/comparer.webp?v=1.3.0");
  }

  .bank-page .bank-journey #eme-action-explorer {
    --bank-action-image: url("/assets/banques/actions/ma-banque.webp?v=1.3.0");
  }

  .bank-page .bank-journey .journey-action-tab:hover {
    transform: none;
  }

  .bank-page .bank-journey .journey-action-tab.is-active,
  .bank-page .bank-journey .journey-action-tab[aria-current="step"] {
    border-color: rgba(15, 157, 140, 0.72);
    background:
      radial-gradient(circle at 50% 0, rgba(255, 255, 255, 0.32), transparent 58%),
      linear-gradient(145deg, var(--teal-dark), var(--teal));
    color: #fff;
    box-shadow:
      0 13px 27px rgba(15, 157, 140, 0.24),
      inset 0 1px 0 rgba(255, 255, 255, 0.26);
  }

  .bank-page .bank-journey .journey-action-tab.is-active::before,
  .bank-page .bank-journey .journey-action-tab[aria-current="step"]::before {
    box-shadow:
      0 9px 19px rgba(20, 34, 79, 0.2),
      0 0 0 2px rgba(255, 255, 255, 0.46);
  }

  .bank-page .bank-journey .journey-action-tab.is-active::after {
    position: absolute;
    top: 11px;
    right: 11px;
    width: 7px;
    height: 7px;
    margin: 0;
  }
}

@media (max-width: 370px) {
  .bank-page .bank-journey .journey-action-tabs {
    gap: 7px;
    padding: 8px;
  }

  .bank-page .bank-journey .journey-action-tab {
    min-height: 118px;
    gap: 8px;
    border-radius: 17px;
    padding-inline: 4px;
    font-size: 0.9rem;
  }

  .bank-page .bank-journey .journey-action-tab::before {
    width: 56px;
    height: 56px;
    flex-basis: 56px;
    border-radius: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bank-page .bank-journey .journey-action-tab {
    transition: none;
  }
}

@media (forced-colors: active) {
  .bank-page .bank-journey .journey-action-tab {
    border: 2px solid ButtonText;
  }

  .bank-page .bank-journey .journey-action-tab::before {
    border: 1px solid ButtonText;
    background-color: Canvas;
    box-shadow: none;
  }

  .bank-page .bank-journey .journey-action-tab.is-active,
  .bank-page .bank-journey .journey-action-tab[aria-current="step"] {
    color: HighlightText;
    background: Highlight;
  }
}