body.integration-it-page .integration-page-visual--hero-html {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 2880 / 1480;
  background: #000;
}

body.integration-it-page .integration-page-visual--hero-html > .integration-page-hero-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
}

body.integration-it-page .integration-page-visual--hero-html::before {
  content: "" !important;
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block !important;
  width: auto !important;
  height: auto !important;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.98) 0%, rgba(0, 0, 0, 0.92) 14%, rgba(0, 0, 0, 0.56) 38%, rgba(0, 0, 0, 0.08) 65%, rgba(0, 0, 0, 0.14) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.02) 45%, rgba(0, 0, 0, 0.98) 100%) !important;
}

body.integration-it-page .integration-page-hero-copy {
  position: absolute;
  top: 17%;
  left: 10.8%;
  z-index: 2;
  width: 35%;
  color: #fff;
}

body.integration-it-page .integration-page-hero-copy h1 {
  margin: 0 0 0.38em;
  color: #f7b000;
  font-size: clamp(42px, 4.4vw, 66px);
  font-weight: 700;
  line-height: 0.98;
}

body.integration-it-page .integration-page-hero-copy p {
  margin: 0;
  color: #fff;
  font-size: clamp(16px, 1.34vw, 21px);
  font-weight: 600;
  line-height: 1.22;
}

body.integration-it-page .integration-page-hero-copy strong {
  color: #f7b000;
  font-weight: 700;
}

body.integration-it-page .integration-page-visual--hero-html .integration-page-hotspots {
  position: absolute;
  top: auto;
  right: 6.5%;
  bottom: 7.2%;
  left: 7.5%;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1.5%;
}

@media (min-width: 1441px) {
  body.integration-it-page .integration-page-visual--hero-html .integration-page-hotspots {
    bottom: calc(7.2% + 33.75vw - 486px);
  }
}

body.integration-it-page .integration-page-visual--hero-html .integration-page-hotspot {
  position: relative;
  inset: auto;
  display: flex;
  width: auto;
  height: auto;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  overflow: visible;
  color: #fff;
  text-decoration: none;
  text-indent: 0;
  background: transparent;
  box-shadow: none;
  filter: none;
  -webkit-filter: none;
}

body.integration-it-page .integration-page-visual--hero-html .integration-page-hotspot::before,
body.integration-it-page .integration-page-visual--hero-html .integration-page-hotspot::after {
  content: none;
}

body.integration-it-page .integration-page-visual--hero-html .integration-page-hotspot img {
  display: block;
  width: auto;
  height: clamp(68px, 7.2vw, 104px);
  max-width: 100%;
  object-fit: contain;
  background: transparent;
  box-shadow: none;
  filter: none;
  -webkit-filter: none;
}

body.integration-it-page .integration-page-visual--hero-html .integration-page-hotspot--testing .integration-page-hotspot__icon {
  display: flex;
  width: 100%;
  max-width: none;
  align-items: center;
  justify-content: center;
  font-size: inherit;
}

body.integration-it-page .integration-page-visual--hero-html .integration-page-hotspot--testing .integration-page-hotspot__icon::before {
  content: none;
}

body.integration-it-page .integration-page-visual--hero-html .integration-page-hotspot--testing .integration-page-hotspot__icon img {
  flex: 0 0 auto;
  margin-inline: auto;
  transform: none;
}

body.integration-it-page .integration-page-visual--hero-html .integration-page-hotspot span {
  display: grid;
  grid-template-columns: 0.4em minmax(0, 1fr);
  column-gap: 0.48em;
  align-items: start;
  width: 150px;
  max-width: 100%;
  color: #fff;
  font-size: clamp(14px, 1.25vw, 18px);
  font-weight: 700;
  line-height: 1.08;
  text-align: left;
}

body.integration-it-page .integration-page-visual--hero-html .integration-page-hotspot span::before {
  content: "";
  position: static;
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  width: 0;
  height: 0;
  margin-top: 0.32em;
  border-top: 0.24em solid transparent;
  border-bottom: 0.24em solid transparent;
  border-left: 0.34em solid #f7b000;
}

@media (max-width: 767px) {
  body.integration-it-page .integration-page-visual--hero-html {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
  }

  body.integration-it-page .integration-page-visual--hero-html > .integration-page-hero-background {
    object-position: 54% top;
  }

  body.integration-it-page .integration-page-visual--hero-html::before {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.52) 0%, rgba(0, 0, 0, 0.68) 45%, rgba(0, 0, 0, 0.98) 100%),
      linear-gradient(90deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.22) 100%) !important;
  }

  body.integration-it-page .integration-page-hero-copy {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    padding: 96px 20px 24px;
  }

  body.integration-it-page .integration-page-hero-copy h1 {
    margin-bottom: 18px;
    font-size: 42px;
  }

  body.integration-it-page .integration-page-hero-copy p {
    max-width: 360px;
    font-size: 17px;
  }

  body.integration-it-page .integration-page-visual--hero-html .integration-page-hotspots {
    position: relative;
    inset: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 18px;
    padding: 18px 20px 42px;
  }

  body.integration-it-page .integration-page-visual--hero-html .integration-page-hotspot {
    gap: 9px;
  }

  body.integration-it-page .integration-page-visual--hero-html .integration-page-hotspot img {
    height: 72px;
  }

  body.integration-it-page .integration-page-visual--hero-html .integration-page-hotspot span {
    max-width: 150px;
    font-size: 15px;
  }
}

/* 2026-08-03 - Client video follow-up: stable desktop axes without transforms.
   The six equal tracks are anchored to the same centered 1120px content line,
   so the Dev Indicateurs label cannot tighten either neighbouring gap. */
@media (min-width: 901px) {
  body.integration-it-page
    .integration-page-visual--hero-html
    .integration-page-hotspots {
    right: auto !important;
    bottom: 56px !important;
    left: max(24px, calc(50% - 560px)) !important;
    width: min(1120px, calc(100% - 48px)) !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    column-gap: 32px !important;
    transform: none !important;
  }
}

/* Both sections paint into the same four-pixel overlap. This removes the
   fractional device-pixel seam at every viewport size without introducing a
   visible border or altering either section's measured height. */
body.integration-it-page .integration-page-visual--hero-html::after {
  height: 5px !important;
}

body.integration-it-page
  .integration-page-visual--hero-html
  + .integration-dynamic-section--wms {
  margin-top: -5px !important;
}

@media (max-width: 720px) {
  body.integration-it-page .integration-dynamic-section__frame {
    top: -2px !important;
    bottom: -4px !important;
    height: calc(100% + 6px) !important;
  }

  body.integration-it-page .integration-dynamic-section::before {
    top: -2px !important;
    bottom: -4px !important;
  }

  body.integration-it-page
    .integration-dynamic-section
    + .integration-dynamic-section,
  body.integration-it-page
    .integration-dynamic-section--interfaces
    + .integration-lower-grid {
    margin-top: -2px !important;
    border-top: 0 !important;
  }
}

/* 2026-07-30 - Desktop shortcut hover aligned with Engineering. */
@media (min-width: 901px) and (hover: hover) {
  body.integration-it-page
    .integration-page-visual--hero-html
    .integration-page-hotspot
    img {
    transition: transform 180ms ease;
  }

  body.integration-it-page
    .integration-page-visual--hero-html
    .integration-page-hotspot:hover
    > img,
  body.integration-it-page
    .integration-page-visual--hero-html
    .integration-page-hotspot--testing:hover
    .integration-page-hotspot__icon
    img {
    transform: translateY(-4px);
  }
}

/* 2026-08-03 - Very-wide desktop stabilization.
   Freeze the validated 1920px hero rhythm inside the homepage 1120px
   content container while keeping the photo and section full width. */
@media (min-width: 1600px) {
  body.integration-it-page .integration-page-main,
  body.integration-it-page .integration-page-visual--hero-html {
    width: 100% !important;
    max-width: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  body.integration-it-page .integration-page-visual--hero-html {
    height: 987px;
    aspect-ratio: auto;
  }

  body.integration-it-page .integration-page-hero-copy {
    top: 168px;
    left: 50%;
    width: 1120px;
    transform: translateX(-50%);
  }

  body.integration-it-page .integration-page-hero-copy h1,
  body.integration-it-page .integration-page-hero-copy p {
    width: 100%;
    max-width: 545px;
  }

  body.integration-it-page .integration-page-visual--hero-html .integration-page-hotspots {
    right: auto;
    bottom: 181px;
    left: calc(50% - 560px);
    width: 1120px;
    column-gap: 32px;
    row-gap: 0;
    transform: none;
  }
}

@media (max-width: 900px) {
  body.integration-it-page .integration-page-hotspot__desktop-break {
    display: none !important;
  }
}

/* 2026-08-03 - Desktop hero shortcut alignment.
   The shortcut row shares the copy's left axis and uses a fixed grid gap;
   the full-width hero and its validated mobile layout remain untouched. */
@media (min-width: 901px) and (max-width: 1599px) {
  body.integration-it-page .integration-page-visual--hero-html .integration-page-hotspots {
    right: auto;
    bottom: 31px;
    left: 10.8%;
    width: min(1120px, 82.7%);
    column-gap: 32px;
    row-gap: 0;
  }
}

/* Each desktop shortcut owns one identical column. Labels use the same
   full-width, arrow-plus-text structure as the Assistance reference, so a
   long word cannot intrude into the following column. */
@media (min-width: 901px) {
  body.integration-it-page
    .integration-page-visual--hero-html
    .integration-page-hotspot
    > span:not(.integration-page-hotspot__icon) {
    position: relative;
    display: block;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    padding-left: 12px;
    transform: none;
  }

  body.integration-it-page
    .integration-page-visual--hero-html
    .integration-page-hotspot
    > span:not(.integration-page-hotspot__icon)::before {
    position: absolute;
    top: 0.32em;
    left: 0;
    display: block;
    margin: 0;
  }
}

/* Keep the first content section joined to the hero on integral and
   fractional viewport heights without exposing the page background. */
body.integration-it-page
  .integration-page-visual--hero-html
  + .integration-dynamic-section--wms {
  margin-top: -1px !important;
  border-top: 0 !important;
}

/* 2026-08-03 - Final hero join and desktop shortcut clearance.
   The two independently composited sections overlap by two CSS pixels and
   the dark hero remains above the first photographic section, preventing a
   rounded device pixel from exposing the white section background. */
body.integration-it-page .integration-page-visual--hero-html {
  z-index: 4 !important;
}

body.integration-it-page
  .integration-page-visual--hero-html
  + .integration-dynamic-section--wms {
  position: relative !important;
  z-index: 3 !important;
  margin-top: -2px !important;
  border-top: 0 !important;
}

@media (min-width: 901px) {
  body.integration-it-page
    .integration-page-visual--hero-html
    .integration-page-hotspots {
    bottom: 56px !important;
  }
}

/* 2026-08-03 - Final internal-page hero system.
   Identical grid tracks isolate icon spacing from label length. The row uses
   the same fixed bottom clearance at every desktop width. */
@media (min-width: 901px) {
  body.integration-it-page
    .integration-page-visual--hero-html
    .integration-page-hotspots {
    top: auto !important;
    right: auto !important;
    bottom: 56px !important;
    left: 50% !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    width: min(1120px, calc(100% - 48px)) !important;
    column-gap: 32px !important;
    row-gap: 0 !important;
    transform: translateX(-50%) !important;
  }

  body.integration-it-page
    .integration-page-visual--hero-html
    .integration-page-hotspot {
    display: grid !important;
    grid-template-rows: 104px auto !important;
    justify-items: stretch !important;
    align-items: start !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 10px !important;
    margin: 0 !important;
  }

  body.integration-it-page
    .integration-page-visual--hero-html
    .integration-page-hotspot
    > img {
    display: block !important;
    width: auto !important;
    height: 104px !important;
    max-width: 100% !important;
    max-height: 104px !important;
    justify-self: start !important;
    margin: 0 0 0 16px !important;
    object-fit: contain !important;
    object-position: center bottom !important;
  }

  body.integration-it-page
    .integration-page-visual--hero-html
    .integration-page-hotspot__icon {
    display: flex !important;
    width: 100% !important;
    height: 104px !important;
    max-width: none !important;
    align-items: flex-end !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding-left: 0 !important;
  }

  body.integration-it-page
    .integration-page-visual--hero-html
    .integration-page-hotspot__icon
    img {
    display: block !important;
    width: auto !important;
    height: 104px !important;
    max-width: 100% !important;
    max-height: 104px !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: center bottom !important;
  }
}

/* The hero and first section are separate compositing layers. Their rounded
   device-pixel bounds overlap inside the existing black fade, so neither the
   white page canvas nor the light section base can appear at the join. */
body.integration-it-page .integration-page-visual--hero-html {
  margin: 0 !important;
  border: 0 !important;
  background-color: #000 !important;
}

body.integration-it-page .integration-page-visual--hero-html::after {
  content: "" !important;
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 2 !important;
  display: block !important;
  height: 4px !important;
  pointer-events: none !important;
  background: #000 !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.integration-it-page
  .integration-page-visual--hero-html
  + .integration-dynamic-section--wms {
  margin-top: -4px !important;
  border-top: 0 !important;
}

@media (max-width: 767px) {
  body.integration-it-page
    .integration-page-visual--hero-html
    .integration-page-hotspots {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 18px !important;
    row-gap: 26px !important;
    padding: 18px 20px 40px !important;
  }

  body.integration-it-page
    .integration-page-visual--hero-html
    .integration-page-hotspot {
    display: grid !important;
    grid-template-rows: 72px auto !important;
    justify-items: stretch !important;
    align-items: start !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 9px !important;
    margin: 0 !important;
  }

  body.integration-it-page
    .integration-page-visual--hero-html
    .integration-page-hotspot
    > img,
  body.integration-it-page
    .integration-page-visual--hero-html
    .integration-page-hotspot__icon {
    display: flex !important;
    width: 100% !important;
    height: 72px !important;
    max-width: none !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
  }

  body.integration-it-page
    .integration-page-visual--hero-html
    .integration-page-hotspot
    > img {
    height: 62px !important;
    align-self: end !important;
    object-fit: contain !important;
    object-position: center bottom !important;
  }

  body.integration-it-page
    .integration-page-visual--hero-html
    .integration-page-hotspot__icon {
    align-items: flex-end !important;
  }

  body.integration-it-page
    .integration-page-visual--hero-html
    .integration-page-hotspot__icon
    img {
    display: block !important;
    width: auto !important;
    height: 62px !important;
    max-width: 100% !important;
    max-height: 62px !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    object-position: center bottom !important;
  }
}

/* 2026-08-04 - Stable desktop hero rhythm.
   The copy and shortcuts participate in the normal vertical flow: the row no
   longer drifts downward when the full-width hero grows on wide screens.
   Horizontal sizing and the validated 56px lower clearance are preserved. */
@media (min-width: 901px) {
  body.integration-it-page .integration-page-visual--hero-html {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    box-sizing: border-box !important;
    padding-top: 8.7361vw !important;
    padding-bottom: 56px !important;
  }

  body.integration-it-page .integration-page-hero-copy {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 35% !important;
    margin: 0 0 0 10.8% !important;
    transform: none !important;
  }

  body.integration-it-page
    .integration-page-visual--hero-html
    .integration-page-hotspots {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: var(--service-hero-left, 0px) !important;
    flex: 0 0 auto !important;
    grid-template-columns: repeat(6, minmax(0, 160px)) !important;
    column-gap: 24px !important;
    justify-content: start !important;
    width: min(1080px, calc(100% - 48px)) !important;
    margin: 175px 0 0 0 !important;
    transform: none !important;
  }

  body.integration-it-page
    .integration-page-visual--hero-html
    .integration-page-hotspot {
    grid-template-rows: 120px auto !important;
  }

  body.integration-it-page
    .integration-page-visual--hero-html
    .integration-page-hotspot
    > img {
    display: block !important;
    width: 88px !important;
    height: auto !important;
    max-width: 88px !important;
    max-height: 120px !important;
    align-self: end !important;
    justify-self: start !important;
    margin: 0 0 0 16px !important;
    object-fit: contain !important;
    object-position: center bottom !important;
  }

  body.integration-it-page
    .integration-page-visual--hero-html
    .integration-page-hotspot__icon {
    height: 120px !important;
    align-items: flex-end !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    padding-left: 0 !important;
  }

  body.integration-it-page
    .integration-page-visual--hero-html
    .integration-page-hotspot__icon
    img {
    display: block !important;
    width: 88px !important;
    height: auto !important;
    max-width: 88px !important;
    max-height: 120px !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: center bottom !important;
  }
}

@media (min-width: 1600px) {
  body.integration-it-page .integration-page-visual--hero-html {
    padding-top: 168px !important;
  }

  body.integration-it-page .integration-page-hero-copy {
    width: min(1120px, calc(100% - 48px)) !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }
}

/* Testing and Pilotage retain the validated equal-row desktop stack. */
@media (min-width: 901px) {
  body.integration-it-page .integration-lower-stack {
    display: grid !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    align-self: stretch !important;
  }

  body.integration-it-page .integration-lower-card--testing {
    justify-content: flex-start !important;
  }

  body.integration-it-page
    .integration-lower-card--indicators
    .integration-lower-card__copy,
  body.integration-it-page
    .integration-lower-card--testing
    .integration-lower-card__copy,
  body.integration-it-page
    .integration-lower-card--pilotage
    .integration-lower-card__copy {
    padding: clamp(92px, 8vw, 128px) 0 0 !important;
  }

  body.integration-it-page .integration-lower-card--pilotage::after {
    height: auto !important;
    min-height: 130px !important;
    flex: 1 1 130px !important;
  }
}

/* Restore the complete Pilotage artwork on desktop. A former lower slice in
   ::after clipped the globe; the full source now covers the card while a
   controlled upper veil hides the text baked into the reference image. */
@media (min-width: 901px) {
  body.integration-it-page .integration-lower-card--pilotage {
    background-color: #202324 !important;
    background-image: url("assets/integration-pilotage-bg.png") !important;
    background-position: center bottom !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }

  body.integration-it-page .integration-lower-card--pilotage::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    display: block !important;
    pointer-events: none !important;
    background: linear-gradient(
      180deg,
      #202324 0%,
      #202324 64%,
      rgba(32, 35, 36, 0.94) 69%,
      rgba(32, 35, 36, 0.52) 75%,
      rgba(32, 35, 36, 0.08) 82%,
      rgba(32, 35, 36, 0) 88%
    ) !important;
  }

  body.integration-it-page .integration-lower-card--pilotage::after {
    content: none !important;
    display: none !important;
  }
}

/* 2026-08-05 - Fluid desktop proportions for the Dev / Testing / Pilotage
   composition. The former 520px cap made the copy look progressively smaller
   as the two grid columns grew. Keep the validated 50/50 grid, but size each
   copy from its own card so the composition follows the PSD at every desktop
   width. The Dev artwork overlaps the white field by two pixels to eliminate
   the fractional-pixel seam produced by its percentage height. */
@media (min-width: 901px) {
  body.integration-it-page
    .integration-lower-card--indicators
    .integration-lower-card__copy,
  body.integration-it-page
    .integration-lower-card--testing
    .integration-lower-card__copy,
  body.integration-it-page
    .integration-lower-card--pilotage
    .integration-lower-card__copy {
    width: 76% !important;
    max-width: none !important;
    padding-top: 8vw !important;
  }

  body.integration-it-page
    .integration-lower-card--indicators
    .integration-lower-card__copy
    h2,
  body.integration-it-page
    .integration-lower-card--testing
    .integration-lower-card__copy
    h2,
  body.integration-it-page
    .integration-lower-card--pilotage
    .integration-lower-card__copy
    h2 {
    font-size: clamp(38px, 3.4vw, 58px) !important;
    line-height: 0.98 !important;
  }

  body.integration-it-page
    .integration-lower-card--indicators
    .integration-lower-card__copy
    p,
  body.integration-it-page
    .integration-lower-card--testing
    .integration-lower-card__copy
    p,
  body.integration-it-page
    .integration-lower-card--pilotage
    .integration-lower-card__copy
    p {
    font-size: clamp(16px, 1.25vw, 22px) !important;
    line-height: 1.18 !important;
  }

  body.integration-it-page .integration-lower-card--indicators {
    background-color: #ffffff !important;
    background-image: none !important;
  }

  body.integration-it-page .integration-lower-card--indicators::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 0 !important;
    width: 100% !important;
    height: calc(43% + 2px) !important;
    background:
      linear-gradient(
        180deg,
        #ffffff 0%,
        rgba(255, 255, 255, 0.98) 18%,
        rgba(255, 255, 255, 0.88) 36%,
        rgba(255, 255, 255, 0.66) 56%,
        rgba(255, 255, 255, 0.38) 74%,
        rgba(255, 255, 255, 0.14) 88%,
        rgba(255, 255, 255, 0) 100%
      ),
      url("assets/integration-dev-indicateurs-dashboard-20260620.png?v=20260825-client-image") center center / cover no-repeat !important;
    pointer-events: none !important;
  }

  body.integration-it-page .integration-lower-card--indicators::before {
    content: none !important;
    display: none !important;
  }

  body.integration-it-page
    .integration-lower-card--indicators
    .integration-lower-card__copy {
    position: relative !important;
    z-index: 2 !important;
  }
}

/* Keep the same proportions on compact desktop/tablet-landscape without
   allowing the two half-height cards to overflow. Mobile remains governed by
   the previously validated rules below 901px. */
@media (min-width: 901px) and (max-width: 1199px) {
  body.integration-it-page
    .integration-lower-card--indicators
    .integration-lower-card__copy,
  body.integration-it-page
    .integration-lower-card--testing
    .integration-lower-card__copy,
  body.integration-it-page
    .integration-lower-card--pilotage
    .integration-lower-card__copy {
    width: 82% !important;
    padding-top: clamp(58px, 6vw, 72px) !important;
  }

  body.integration-it-page
    .integration-lower-card--indicators
    .integration-lower-card__copy
    h2,
  body.integration-it-page
    .integration-lower-card--testing
    .integration-lower-card__copy
    h2,
  body.integration-it-page
    .integration-lower-card--pilotage
    .integration-lower-card__copy
    h2 {
    font-size: clamp(38px, 4vw, 48px) !important;
  }

  body.integration-it-page
    .integration-lower-card--indicators
    .integration-lower-card__copy
    p,
  body.integration-it-page
    .integration-lower-card--testing
    .integration-lower-card__copy
    p,
  body.integration-it-page
    .integration-lower-card--pilotage
    .integration-lower-card__copy
    p {
    margin-top: 28px !important;
    font-size: 14px !important;
  }

  body.integration-it-page
    .integration-lower-card--indicators
    .integration-lower-card__copy
    p
    + p {
    margin-top: 18px !important;
  }
}

/* 2026-08-05 - Wide-desktop dynamic panels.
   The 1120px wide-screen container gives the left copy a 620px column. The
   legacy 50% panel start consequently overlapped that copy and left the open
   card narrower than the validated Assistance two-column composition. Use
   the same 56% / 44% split as the reference: one clean column gap, no overlap,
   and a stable panel width for WMS, ERP/TMS and Interfaces. */
@media (min-width: 1600px) {
  body.integration-it-page .integration-dynamic-card {
    left: 56% !important;
    width: 44% !important;
    height: 356px !important;
    max-width: none !important;
    padding: 34px 46px 30px !important;
    justify-content: flex-start !important;
  }

  body.integration-it-page .integration-dynamic-icons {
    margin-top: 24px !important;
  }
}