/* Lightweight mobile overrides to mirror the responsive behavior seen on asyneo.fr */
:root {
  --mobile-gutter: 16px;
}

@media (max-width: 900px) {
  body {
    overflow-x: hidden;
  }

  .dmInner {
    min-width: 100% !important;
    width: 100% !important;
    overflow-x: visible;
  }

  .dmOuter,
  .dmLayoutWrapper,
  #dm,
  #dm .dm-wrapper,
  #dm .dm_home_page,
  #dm .dm-home-page,
  #dm .dmPageBody {
    max-width: 100%;
    overflow-x: hidden;
  }

  .dmRespRow {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .dmRespRow .dmRespColsWrapper {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 !important;
    box-sizing: border-box;
  }

  .dmRespCol {
    box-sizing: border-box;
  }

  .dmRespCol {
    width: 100% !important;
    padding-left: var(--mobile-gutter) !important;
    padding-right: var(--mobile-gutter) !important;
  }

  /* Header: center elements and wrap navigation links */
  .dmHeaderContainer .dmRespRow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
    width: 100%;
    max-width: 100vw;
    overflow: visible;
  }

  .dmHeaderContainer .dmRespCol {
    text-align: center;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .dmHeaderContainer {
    overflow: visible;
    transition: transform 0.3s ease-in-out;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 101 !important;
  }

  .dmHeaderContainer.header-hidden {
    transform: translateY(-100%);
  }

  .dmHeaderContainer .fullBleedChanged,
  .dmHeaderContainer .fullBleedMode {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100vw;
    box-sizing: border-box;
    overflow: visible;
  }

  /* Remove side padding on the nav column so the dropdown fits the viewport */
  #1536620497.dmRespCol {
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
  }

  /* Hide the top divider row that pushes the logo down on mobile */
  .dmHeaderContainer .dmHeaderResp .dmRespRow:first-of-type {
    display: none;
  }

  /* Keep the header compact and aligned like asyneo.fr */
  .dmHeaderContainer {
    padding-top: 4px;
    padding-bottom: 4px;
  }

  #1606776363 .dmRespCol {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 100%;
  }

  #1606776363 .dmRespColsWrapper {
    margin: 0 !important;
    width: 100%;
    box-sizing: border-box;
  }

  #1606776363 .dmRespCol img {
    max-width: 120px;
    height: auto;
    width: 100%;
    display: block;
  }

  /* Contain the logo widget itself */
  #1126455146 img,
  #1297034533 {
    max-width: 120px !important;
    width: 100% !important;
    height: auto !important;
  }

  /* Hide header call button under the menu on mobile */
  #1609592632,
  #1213537237,
  .u_1590741700,
  .dmCall.voipReplacement {
    display: none !important;
  }

  /* Hide the small screen call button section in header */
  .u_1576630431 {
    display: none !important;
  }

  nav.main-navigation {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 30;
    margin: 0 auto;
    padding-left: var(--mobile-gutter);
    padding-right: var(--mobile-gutter);
    overflow: visible;
  }

  /* Kill desktop effect paddings on mobile */
  nav.main-navigation.unifiednav,
  nav.main-navigation.unifiednav.effect-bottom,
  nav.main-navigation.unifiednav.effect-bottom2,
  nav.main-navigation.unifiednav.effect-top-bottom {
    padding: 0 !important;
  }

  /* Mobile dropdown: hide list by default and show via toggle */
  nav.main-navigation ul.unifiednav__container {
    display: none;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    gap: 6px;
    padding: 12px var(--mobile-gutter);
    margin: 0;
    background: #f5f7fb;
    border: 1px solid #dfe6f0;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    overflow: visible;
    position: relative;
    z-index: 100;
  }

  nav.main-navigation.mobile-nav-open ul.unifiednav__container {
    display: flex;
  }

  nav.main-navigation .unifiednav__item {
    width: 100%;
    border-radius: 8px;
  }

  nav.main-navigation .unifiednav__item a {
    display: block;
    width: 100%;
    padding: 12px 10px;
    color: #0f1a2c !important;
    border-radius: 8px;
    font-weight: 600;
  }

  nav.main-navigation .unifiednav__item a:hover,
  nav.main-navigation .unifiednav__item a:focus {
    background: #e8edf5;
  }

  .mobile-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 14px;
    background: #fff;
    color: #0f1a2c;
    border: 1px solid #dfe6f0;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    width: 100%;
    max-width: 100%;
    margin: 0 0 10px 0;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  }

  /* Hero text sizing */
  h1 {
    font-size: clamp(24px, 6vw, 32px);
    text-align: center;
  }

  /* Center the hero section and its orange container - override all desktop CSS */
  #1767892589 {
    text-align: center !important;
    width: 100% !important;
  }

  #1767892589 h1 {
    text-align: center !important;
  }

  #dm .dmBody div.u_1767892589 {
    text-align: center !important;
    width: 100% !important;
  }

  #dm .dmBody div.u_1620106714 {
    text-align: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10 !important;
    position: relative !important;
  }

  h2 {
    font-size: clamp(20px, 5vw, 28px);
  }

  p,
  li,
  .dmNewParagraph {
    font-size: 16px;
    line-height: 1.6;
  }

  /* Reduce large paddings on feature blocks */
  .dmNewParagraph,
  .dmWidget[data-element-type="paragraph"] {
    padding-left: var(--mobile-gutter) !important;
    padding-right: var(--mobile-gutter) !important;
  }

  /* Gallery thumbs: prevent overflow */
  .dmPhotoGallery .photoGalleryThumbs {
    width: 100% !important;
    height: auto !important;
  }

  /* Make call-to-action block full width */
  .u_1590741700,
  .u_1213537237 {
    width: 100% !important;
  }
}