/* Balanced home hero proportions. French and English use the same approved
   desktop composition; only the localized title text changes. */
@media (min-width: 921px) {
  html:is([lang="fr"], [lang="en"]) body.mbm3-active main.mbm3-site .mbm3-panel > section.mbm3-hero {
    grid-template-columns: minmax(0, 1fr) minmax(38.4rem, .82fr) !important;
    gap: clamp(1.15rem, 2vw, 2.15rem) !important;
    align-items: center !important;
    min-height: 39rem !important;
    padding-top: clamp(3rem, 4.6vw, 4.4rem) !important;
    padding-bottom: clamp(3rem, 4.6vw, 4.2rem) !important;
    overflow: hidden !important;
  }

  html:is([lang="fr"], [lang="en"]) body.mbm3-active main.mbm3-site .mbm3-panel > section.mbm3-hero .mbm3-hero-copy {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    padding-right: clamp(.15rem, .7vw, .65rem) !important;
  }

  /* Keep the real H1 for semantics, but render the approved three-line
     composition independently so no runtime can reflow it into 5–6 lines. */
  html:is([lang="fr"], [lang="en"]) body.mbm3-active main.mbm3-site .mbm3-panel > section.mbm3-hero .mbm3-hero-copy > h1 {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 1rem 0 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
  }

  html:is([lang="fr"], [lang="en"]) body.mbm3-active main.mbm3-site .mbm3-panel > section.mbm3-hero .mbm3-hero-copy > h1 > * {
    display: none !important;
  }

  html[lang="fr"] body.mbm3-active main.mbm3-site .mbm3-panel > section.mbm3-hero .mbm3-hero-copy > h1::before {
    content: "Votre site, votre app, votre admin\A et vos outils métier.\A Un seul système." !important;
  }

  html[lang="en"] body.mbm3-active main.mbm3-site .mbm3-panel > section.mbm3-hero .mbm3-hero-copy > h1::before {
    content: "Your website, your app, your admin\A and your business tools.\A One system." !important;
  }

  html:is([lang="fr"], [lang="en"]) body.mbm3-active main.mbm3-site .mbm3-panel > section.mbm3-hero .mbm3-hero-copy > h1::before {
    display: block !important;
    width: max-content !important;
    max-width: 100% !important;
    color: #10223f !important;
    font-family: "Avenir Next", "Segoe UI Variable Display", "Segoe UI", Inter, system-ui, sans-serif !important;
    font-size: clamp(2.02rem, 2.18vw, 2.38rem) !important;
    font-weight: 850 !important;
    line-height: 1.035 !important;
    letter-spacing: -.046em !important;
    white-space: pre !important;
  }

  html:is([lang="fr"], [lang="en"]) body.mbm3-active main.mbm3-site .mbm3-panel > section.mbm3-hero .mbm3-hero-copy > h1::after {
    display: block !important;
    width: 4.9rem !important;
    height: .27rem !important;
    margin-top: 1.15rem !important;
  }

  html:is([lang="fr"], [lang="en"]) body.mbm3-active main.mbm3-site .mbm3-panel > section.mbm3-hero .mbm3-hero-copy > p,
  html:is([lang="fr"], [lang="en"]) body.mbm3-active main.mbm3-site .mbm3-panel > section.mbm3-hero .mbm3-hero-copy > blockquote {
    max-width: 46rem !important;
  }

  html:is([lang="fr"], [lang="en"]) body.mbm3-active main.mbm3-site .mbm3-panel > section.mbm3-hero .mbm3-hero-identity {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 30rem !important;
    overflow: visible !important;
  }

  /* Same approved visual weight and containment in both languages. */
  html:is([lang="fr"], [lang="en"]) body.mbm3-active main.mbm3-site #mbm-home-device-showcase-host {
    width: min(100%, 38.4rem) !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  html:is([lang="fr"], [lang="en"]) body.mbm3-active main.mbm3-site #mbm-home-device-showcase-host > .mbm-home-approved-device,
  html:is([lang="fr"], [lang="en"]) body.mbm3-active main.mbm3-site #mbm-home-device-showcase-host img {
    width: 100% !important;
    max-width: 38.4rem !important;
    max-height: 36rem !important;
    height: auto !important;
    object-fit: contain !important;
  }
}

@media (min-width: 921px) and (max-width: 1180px) {
  html:is([lang="fr"], [lang="en"]) body.mbm3-active main.mbm3-site .mbm3-panel > section.mbm3-hero {
    grid-template-columns: minmax(0, 1fr) minmax(31rem, .9fr) !important;
    gap: 1rem !important;
  }

  html:is([lang="fr"], [lang="en"]) body.mbm3-active main.mbm3-site .mbm3-panel > section.mbm3-hero .mbm3-hero-copy > h1::before {
    font-size: clamp(1.72rem, 2.2vw, 2rem) !important;
  }

  html:is([lang="fr"], [lang="en"]) body.mbm3-active main.mbm3-site #mbm-home-device-showcase-host {
    width: min(100%, 34.8rem) !important;
  }

  html:is([lang="fr"], [lang="en"]) body.mbm3-active main.mbm3-site #mbm-home-device-showcase-host > .mbm-home-approved-device,
  html:is([lang="fr"], [lang="en"]) body.mbm3-active main.mbm3-site #mbm-home-device-showcase-host img {
    max-width: 34.8rem !important;
    max-height: 33rem !important;
  }
}

/* On mobile/tablet let the real localized text wrap naturally. */
@media (max-width: 920px) {
  html:is([lang="fr"], [lang="en"]) body.mbm3-active main.mbm3-site .mbm3-panel > section.mbm3-hero .mbm3-hero-copy > h1 {
    font-size: clamp(2.4rem, 7vw, 4rem) !important;
    line-height: .96 !important;
  }
}