/* Hianma commercial section artwork — robust v2.
   Render artwork as CSS backgrounds instead of <img> elements because the legacy
   premium marketing stylesheet intentionally hides raster <img> nodes in commercial sections.
   The real interactive-looking Hianma dashboard preview remains untouched and visible. */

/* Retire the DOM-injected v1 figures if an older cached page still loads the v1 runtime. */
.hm-marketing .hm-commercial-section-visual {
  display: none !important;
}

/* Retire the old sprite mascots only; the real product dashboard is preserved. */
.hm-marketing .hm-exact-hian,
.hm-marketing .hm-final-cta-mascot {
  display: none !important;
}

/* Shared artwork surface. These are generated boxes with CSS backgrounds, so legacy
   rules that hide commercial raster <img> elements cannot suppress them. */
.hm-marketing .hm-product-stage::after,
.hm-marketing #solution .hm-section-heading::after,
.hm-marketing #roles .hm-section-heading::after,
.hm-marketing #all-in-one .hm-two-column::after,
.hm-marketing #website .hm-website-grid::before,
.hm-marketing #institutions .hm-section-heading::after,
.hm-marketing #languages-security .hm-dual-grid::before,
.hm-marketing #features .hm-final-heading::after,
.hm-marketing #why-hianma .hm-final-heading::after,
.hm-marketing #how-it-works .hm-final-heading::after,
.hm-marketing #faq .hm-final-faq-intro::after,
.hm-marketing #commercial-cta .hm-final-cta-inner::after,
.hm-marketing #contact .hm-contact-copy::after {
  content: "" !important;
  display: block !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  width: min(100%, 680px) !important;
  aspect-ratio: 4 / 3 !important;
  background-color: transparent !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
}

/* 01 — Hero / Hianma solution. Keep the dashboard fully visible; artwork supports it below. */
.hm-marketing .hm-product-stage {
  position: relative !important;
}
.hm-marketing .hm-product-stage::after {
  background-image: url('/assistant/hian/commercial/01-hianma-solution.png') !important;
  width: min(62%, 360px) !important;
  margin: -46px -20px 0 auto !important;
  position: relative !important;
  z-index: 3 !important;
}

/* 02 — Promise / #solution */
.hm-marketing #solution .hm-section-heading::after {
  background-image: url('/assistant/hian/commercial/02-promesse.png') !important;
  margin: 30px auto 4px !important;
}

/* 03 — Roles */
.hm-marketing #roles .hm-section-heading::after {
  background-image: url('/assistant/hian/commercial/03-roles.png') !important;
  grid-column: 1 / -1 !important;
  justify-self: center !important;
  margin: 28px auto 4px !important;
}

/* 04 — All-in-one. Replace only the old decorative orbit, not product UI. */
.hm-marketing #all-in-one .hm-orbit {
  display: none !important;
}
.hm-marketing #all-in-one .hm-two-column::after {
  background-image: url('/assistant/hian/commercial/04-tout-en-un.png') !important;
  align-self: center !important;
  justify-self: center !important;
  margin: 0 auto !important;
}

/* 05 — Public mini-site. Replace the old generic mock with the approved illustration. */
.hm-marketing #website .hm-site-mock {
  display: none !important;
}
.hm-marketing #website .hm-website-grid::before {
  background-image: url('/assistant/hian/commercial/05-mini-site.png') !important;
  align-self: center !important;
  justify-self: center !important;
  margin: 0 auto !important;
}

/* 06 — Institutions */
.hm-marketing #institutions .hm-section-heading::after {
  background-image: url('/assistant/hian/commercial/06-etablissements.png') !important;
  margin: 28px auto 4px !important;
}

/* 07 — Languages & security */
.hm-marketing #languages-security .hm-dual-grid::before {
  background-image: url('/assistant/hian/commercial/07-langues-securite.png') !important;
  grid-column: 1 / -1 !important;
  justify-self: center !important;
  width: min(100%, 760px) !important;
  margin: 0 auto 26px !important;
}

/* 08 — Features */
.hm-marketing #features .hm-final-heading::after {
  background-image: url('/assistant/hian/commercial/08-fonctionnalites.png') !important;
  margin: 26px auto 0 !important;
}

/* 09 — Why Hianma */
.hm-marketing #why-hianma .hm-final-heading::after {
  background-image: url('/assistant/hian/commercial/09-pourquoi-hianma.png') !important;
  margin: 26px auto 0 !important;
}

/* 10 — Setup */
.hm-marketing #how-it-works .hm-final-heading::after {
  background-image: url('/assistant/hian/commercial/10-mise-en-place.png') !important;
  margin: 26px auto 0 !important;
}

/* 11 — FAQ */
.hm-marketing #faq .hm-final-faq-intro::after {
  background-image: url('/assistant/hian/commercial/11-faq.png') !important;
  width: min(100%, 440px) !important;
  margin: 24px auto 0 !important;
}

/* 12 — Your school CTA */
.hm-marketing #commercial-cta .hm-final-cta-inner::after {
  background-image: url('/assistant/hian/commercial/12-votre-ecole.png') !important;
  width: min(46vw, 500px) !important;
  align-self: center !important;
  justify-self: end !important;
  margin: 0 0 0 auto !important;
}

/* 13 — Contact */
.hm-marketing #contact .hm-contact-copy::after {
  background-image: url('/assistant/hian/commercial/13-contact.png') !important;
  width: min(100%, 440px) !important;
  margin: 28px 0 0 !important;
}

@media (min-width: 981px) {
  .hm-marketing #commercial-cta .hm-final-cta-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr) !important;
    align-items: center !important;
    gap: clamp(28px, 5vw, 72px) !important;
  }
  .hm-marketing #commercial-cta .hm-final-cta-copy {
    grid-column: 1 !important;
  }
  .hm-marketing #commercial-cta .hm-final-cta-inner::after {
    grid-column: 2 !important;
  }
}

@media (max-width: 980px) {
  .hm-marketing .hm-product-stage::after {
    width: min(68%, 340px) !important;
    margin: -30px auto 0 !important;
  }

  .hm-marketing #all-in-one .hm-two-column::after,
  .hm-marketing #website .hm-website-grid::before {
    width: min(100%, 600px) !important;
    margin: 20px auto 0 !important;
  }

  .hm-marketing #commercial-cta .hm-final-cta-inner::after {
    width: min(88%, 480px) !important;
    margin: 24px auto 0 !important;
    justify-self: center !important;
  }

  .hm-marketing #contact .hm-contact-copy::after {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 700px) {
  .hm-marketing .hm-product-stage::after,
  .hm-marketing #solution .hm-section-heading::after,
  .hm-marketing #roles .hm-section-heading::after,
  .hm-marketing #all-in-one .hm-two-column::after,
  .hm-marketing #website .hm-website-grid::before,
  .hm-marketing #institutions .hm-section-heading::after,
  .hm-marketing #languages-security .hm-dual-grid::before,
  .hm-marketing #features .hm-final-heading::after,
  .hm-marketing #why-hianma .hm-final-heading::after,
  .hm-marketing #how-it-works .hm-final-heading::after,
  .hm-marketing #faq .hm-final-faq-intro::after,
  .hm-marketing #commercial-cta .hm-final-cta-inner::after,
  .hm-marketing #contact .hm-contact-copy::after {
    width: min(100%, 430px) !important;
    max-width: 100% !important;
  }

  .hm-marketing .hm-product-stage::after {
    width: min(78%, 300px) !important;
    margin-top: -18px !important;
  }

  .hm-marketing #solution .hm-section-heading::after,
  .hm-marketing #roles .hm-section-heading::after,
  .hm-marketing #institutions .hm-section-heading::after,
  .hm-marketing #features .hm-final-heading::after,
  .hm-marketing #why-hianma .hm-final-heading::after,
  .hm-marketing #how-it-works .hm-final-heading::after {
    margin-top: 20px !important;
  }

  .hm-marketing #languages-security .hm-dual-grid::before {
    grid-column: 1 / -1 !important;
    margin-bottom: 18px !important;
  }

  .hm-marketing #faq .hm-final-faq-intro::after,
  .hm-marketing #contact .hm-contact-copy::after {
    width: min(100%, 360px) !important;
  }
}