/* Museum Voices — pages autonomes sur mobile.
   La SPA a sa propre couche mobile ; cette feuille donne aux pages Prix,
   Compte et assimilées le même rythme sans modifier leur rendu desktop. */

@media (max-width: 767px) {
  body.mv-mobile-page {
    overflow-x: hidden;
  }

  body.mv-mobile-page .wrap {
    padding-inline: 18px;
  }

  body.mv-mobile-page #pricing-hero {
    padding: 34px 0 30px !important;
  }

  body.mv-mobile-page #pricing-hero .eyebrow {
    margin-bottom: 14px !important;
  }

  body.mv-mobile-page #pricing-hero h1 {
    max-width: 10ch !important;
    font-size: clamp(35px, 10.5vw, 44px) !important;
    line-height: 1.04 !important;
    letter-spacing: -.03em !important;
    margin-bottom: 18px !important;
  }

  body.mv-mobile-page #pricing-hero p:not(.eyebrow) {
    max-width: 34ch !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
  }

  body.mv-mobile-page #plan-banner {
    margin-top: 18px !important;
    font-size: 10px !important;
    line-height: 1.45;
  }

  body.mv-mobile-page #pricing-audience {
    padding: 20px 0 0 !important;
  }

  body.mv-mobile-page #pricing-billing {
    padding: 20px 0 24px !important;
  }

  body.mv-mobile-page #pricing-billing .wrap {
    gap: 12px !important;
  }

  body.mv-mobile-page .seg {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100%, 360px);
    padding: 3px;
  }

  body.mv-mobile-page .seg button {
    min-width: 0;
    min-height: 44px;
    padding: 8px 9px;
    line-height: 1.28;
  }

  body.mv-mobile-page #paliers,
  body.mv-mobile-page #comparatif,
  body.mv-mobile-page #solidaire,
  body.mv-mobile-page #view-institutions > section {
    padding: 32px 0 !important;
  }

  body.mv-mobile-page .tier-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  body.mv-mobile-page .tier-card {
    padding: 22px 18px;
  }

  body.mv-mobile-page .tier-card li {
    font-size: 14px;
    line-height: 1.58 !important;
    margin-bottom: 7px;
  }

  body.mv-mobile-page #comparatif .wrap {
    padding-right: 0;
  }

  body.mv-mobile-page #comparatif > .wrap > div {
    padding-right: 18px;
    margin-right: 0;
    -webkit-overflow-scrolling: touch;
  }

  body.mv-mobile-page .cmp {
    min-width: 620px;
  }

  body.mv-mobile-page footer {
    padding: 28px 18px !important;
  }
}