/* Mobile-only spacing pass. Desktop layout is intentionally untouched. */
@media only screen and (max-width: 639px) {
  /* Accueil mobile : les interstices entre sections reprennent le fond du site,
     afin d'éviter qu'une bande verte globale apparaisse entre les cartes. */
  body#collection-689a0a318cfdce28ce69337d article.sections {
    background-color: #f2f3ed !important;
  }

  /* Accueil mobile : arrondis identiques sur la carte 360°. */
  body#collection-689a0a318cfdce28ce69337d
    section[data-section-id="689e07741560960187b9d67a"]
    #block-1b8b1f1053f70f2175b7 {
    border-radius: 16px !important;
    overflow: hidden !important;
    clip-path: inset(0 round 16px) !important;
  }

  /* Keep a consistent 80px breathing space below the mobile navigation. */
  main .page-section:first-of-type .content-wrapper {
    padding-top: 80px !important;
  }

  /* Keep list headings and card groups aligned to a 20px mobile gutter. */
  main .list-section-title,
  main .user-items-list-item-container.user-items-list-simple {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  main .page-section:first-of-type .sqs-block-button-container {
    justify-content: center !important;
    text-align: center !important;
  }

  main .page-section:first-of-type .sqs-block-button-element {
    text-align: center !important;
  }

  /* Accueil mobile uniquement : première vue plus compacte. */
  body#collection-689a0a318cfdce28ce69337d main .page-section:first-of-type .content-wrapper {
    padding-top: 16px !important;
  }

  body#collection-689a0a318cfdce28ce69337d #block-d5138bf138183b891fd9 h1 {
    font-size: 30px !important;
    line-height: 36px !important;
  }

  body#collection-689a0a318cfdce28ce69337d #block-0cdfbb09ab8c91dc8d5d p {
    font-size: 17px !important;
    line-height: 23.8px !important;
  }

  /* Accueil mobile uniquement : le CTA secondaire reprend la largeur du CTA principal. */
  body#collection-689a0a318cfdce28ce69337d #block-yui_3_17_2_1_1755187030497_8653 .sqs-block-button-container {
    justify-content: center !important;
    text-align: center !important;
  }

  body#collection-689a0a318cfdce28ce69337d #block-yui_3_17_2_1_1755187030497_8653 .sqs-block-button-element {
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  /* Accueil mobile uniquement : aère le CTA du bloc À propos. */
  body#collection-689a0a318cfdce28ce69337d
    main
    section[data-section-id="689a0adc84aebb784fe72bcc"]
    .fe-block-yui_3_17_2_1_1755187030497_8653 {
    transform: translateY(14px) !important;
  }

  /* Accueil mobile uniquement : 30px entre le CTA et le bloc réglementaire. */
  body#collection-689a0a318cfdce28ce69337d
    main
    section[data-section-id="689ef81a6f722327e3c5f527"] {
    margin-top: -18.6px !important;
  }

  /* Accueil + Nos solutions : centre le groupe légal entre Mission et Coordonnées. */
  body:is(
      #collection-689a0a318cfdce28ce69337d,
      #collection-68b19f287532c575a2e0ca1d,
      #collection-689a0f6f5e8fec5f3fffdb81,
      #collection-68b04c11a1aea005c3439d26,
      #collection-68b04ea4550d37791855e765,
      #collection-689f1c28252aa978a47a6799,
      #collection-689a0adb84aebb784fe72b40
    )
    #footer-sections
    #block-01b1a27a9fa4825bae04 {
    transform: translateY(26px) !important;
  }

  /* La version Firebase conserve aussi le lien Cookies : centre alors les trois lignes. */
  body:is(
      #collection-689a0a318cfdce28ce69337d,
      #collection-68b19f287532c575a2e0ca1d,
      #collection-689a0f6f5e8fec5f3fffdb81,
      #collection-68b04c11a1aea005c3439d26,
      #collection-68b04ea4550d37791855e765,
      #collection-689f1c28252aa978a47a6799,
      #collection-689a0adb84aebb784fe72b40
    )
    #footer-sections
    #block-01b1a27a9fa4825bae04:has(p:last-child br:nth-of-type(2)) {
    transform: translateY(13px) !important;
  }

}

/* Shared mobile navigation CTA. This stylesheet is loaded by every local
   page, so the menu button stays identical throughout the site. */
@media only screen and (max-width: 639px) {
  body .header-menu .header-menu-cta {
    width: 100% !important;
  }

  body .header-menu .header-menu-cta a.theme-btn--primary {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: calc(100% - 45px) !important;
    max-width: none !important;
    min-height: 47px !important;
    padding: 12px 24px !important;
    border-radius: 10px !important;
    background: #b37b38 !important;
    color: #fff !important;
    font-family: Inter, Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }

  body .header-menu .header-menu-cta a.theme-btn--primary:hover,
  body .header-menu .header-menu-cta a.theme-btn--primary:focus-visible {
    background: #b37b38 !important;
    color: #fff !important;
  }
}

/* Sous-menu « Nos accompagnements » : même chevron fin que la navigation
   principale, permanent avant chaque libellé, sur desktop comme sur mobile. */
.header-nav-folder-item
  > a:is(
    [href="/entrepreneurs-et-dirigeants"],
    [href="/entreprises-et-employeurs"],
    [href="/epargnants-individuels"]
  )
  .header-nav-folder-item-content {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 10px !important;
  transform: none !important;
}

.header-menu-nav-folder[data-folder="/nos-accompagnements-1"]
  a:is(
    [href="/entrepreneurs-et-dirigeants"],
    [href="/entreprises-et-employeurs"],
    [href="/epargnants-individuels"]
  )
  .header-menu-nav-item-content {
  display: flex !important;
  align-items: baseline !important;
  gap: 10px !important;
}

.header-nav-folder-item
  > a:is(
    [href="/entrepreneurs-et-dirigeants"],
    [href="/entreprises-et-employeurs"],
    [href="/epargnants-individuels"]
  )
  .header-nav-folder-item-content::before,
.header-menu-nav-folder[data-folder="/nos-accompagnements-1"]
  a:is(
    [href="/entrepreneurs-et-dirigeants"],
    [href="/entreprises-et-employeurs"],
    [href="/epargnants-individuels"]
  )
  .header-menu-nav-item-content::before {
  content: "" !important;
  position: static !important;
  inset: auto !important;
  display: inline-block !important;
  box-sizing: border-box !important;
  width: 7px !important;
  height: 7px !important;
  flex: 0 0 auto !important;
  margin-top: 0.42em !important;
  border: 0 !important;
  border-top: 1.5px solid currentColor !important;
  border-right: 1.5px solid currentColor !important;
  opacity: 1 !important;
  transform: rotate(45deg) !important;
  color: currentColor !important;
  pointer-events: none !important;
}

/* Le début des chevrons du sous-menu est calé sur le N du libellé parent.
   La grille mobile verrouille la même colonne de départ pour les trois liens. */
@media only screen and (min-width: 640px) {
  .header-nav-item--folder:has(
      > .header-nav-folder-title[data-href="/nos-accompagnements-1"]
    )
    > .header-nav-folder-content {
    left: calc(-1em - 2px) !important;
  }
}

@media only screen and (max-width: 639px) {
  .header-menu-nav-folder[data-folder="/nos-accompagnements-1"]
    a:is(
      [href="/entrepreneurs-et-dirigeants"],
      [href="/entreprises-et-employeurs"],
      [href="/epargnants-individuels"]
    )
    .header-menu-nav-item-content {
    display: grid !important;
    grid-template-columns: 7px minmax(0, 1fr) !important;
    align-items: start !important;
    column-gap: 10px !important;
  }
}

/* Burger mobile — accordéon conforme aux variantes Figma 361:109 / 363:126.
   Le desktop et les dimensions du CTA existant restent volontairement intacts. */
@media only screen and (max-width: 639px) {
  body.header--menu-open .header {
    width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  body.header--menu-open .header .header-announcement-bar-wrapper {
    min-height: 80px !important;
    padding: 24px 20px 0 11px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #e5ebe8 !important;
  }

  body.header--menu-open .header-display-mobile {
    align-items: flex-start !important;
  }

  body.header--menu-open .header-burger,
  body.header--menu-open .header-burger-btn,
  body.header--menu-open .burger-box {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    padding: 0 !important;
  }

  body.header--menu-open .header-burger-btn .burger-inner > div {
    background-color: #b37b38 !important;
  }

  body.header--menu-open .header-menu {
    height: calc(100dvh - 80px) !important;
    min-height: calc(100vh - 80px) !important;
  }

  body.header--menu-open .header-menu-bg {
    background: #e5ebe8 !important;
  }

  body.header--menu-open .header-menu-nav {
    height: 100% !important;
    padding: 0 !important;
    overflow-y: auto !important;
  }

  body.header--menu-open .header-menu-nav-list {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    min-height: 100% !important;
    padding: 24px 11px !important;
    box-sizing: border-box !important;
  }

  body.header--menu-open
    .header-menu-nav-folder[data-folder="root"] {
    display: block !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    overflow: visible !important;
  }

  body.header--menu-open
    .header-menu-nav-folder[data-folder="root"]
    > .header-menu-nav-folder-content {
    display: block !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    justify-content: flex-start !important;
  }

  body.header--menu-open .header-menu-nav-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 24px !important;
    width: 100% !important;
  }

  body.header--menu-open .header-menu-nav-item {
    width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  body.header--menu-open .header-menu-nav-item > a {
    display: block !important;
    width: fit-content !important;
    color: #b37b38 !important;
    font-family: Inter, Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-decoration: none !important;
  }

  body.header--menu-open
    .header-menu-nav-item.header-menu-nav-item--active
    > a {
    color: #2c301e !important;
    font-weight: 600 !important;
    line-height: 1 !important;
  }

  body.header--menu-open
    .header-menu-nav-item:has(> a[href="/nos-produits-et-solutions"]) {
    display: none !important;
  }

  body.header--menu-open
    .header-menu-nav-folder[data-folder="/nos-accompagnements-1"] {
    display: none !important;
  }

  body.header--menu-open .mlv-mobile-accordion {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  body.header--menu-open .mlv-mobile-accordion.is-open {
    position: relative !important;
    left: -11px !important;
    width: 100vw !important;
    max-width: none !important;
    height: 201px !important;
    min-height: 201px !important;
    margin-left: 0 !important;
    padding: 11px 11px 12px !important;
    border-radius: 8px !important;
    background: #d0ddd7 !important;
    overflow: hidden !important;
  }

  /* Une page d'accompagnement active utilise la hauteur exacte de la
     variante Figma. Sans ligne active, 10px compensent sa hauteur de ligne
     plus grande et conservent le même espace visuel sous le dernier lien. */
  body.header--menu-open
    .mlv-mobile-accordion.is-open:has(
      .mlv-mobile-accordion-panel > a[aria-current="page"]
    ) {
    height: 191px !important;
    min-height: 191px !important;
  }

  body.header--menu-open
    .mlv-mobile-accordion
    a[data-folder-id="/nos-accompagnements-1"] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: #b37b38 !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
  }

  body.header--menu-open
    .mlv-mobile-accordion
    a[data-folder-id="/nos-accompagnements-1"]::after {
    content: "" !important;
    display: inline-block !important;
    width: 6px !important;
    height: 6px !important;
    margin-top: -4px !important;
    border-right: 2px solid currentColor !important;
    border-bottom: 2px solid currentColor !important;
    transform: rotate(45deg) !important;
    transform-origin: center !important;
  }

  body.header--menu-open
    .mlv-mobile-accordion
    .header-menu-nav-item-content-folder::after {
    display: none !important;
    content: none !important;
  }

  body.header--menu-open
    .mlv-mobile-accordion
    .header-dropdown-icon {
    display: none !important;
  }

  body.header--menu-open
    .mlv-mobile-accordion
    .header-nav-folder-title-text {
    padding-bottom: 0 !important;
    background-image: none !important;
  }

  body.header--menu-open
    .mlv-mobile-accordion.is-open
    a[data-folder-id="/nos-accompagnements-1"]::after {
    margin-top: 4px !important;
    transform: rotate(225deg) !important;
  }

  body.header--menu-open .mlv-mobile-accordion-panel {
    display: grid !important;
    gap: 0 !important;
    margin-top: 24px !important;
    padding-left: 21px !important;
  }

  body.header--menu-open .mlv-mobile-accordion-panel:not([hidden]) {
    animation: mlv-mobile-submenu-reveal 180ms ease-out both;
  }

  body.header--menu-open .mlv-mobile-accordion-panel > a:nth-child(2) {
    margin-top: 28px !important;
  }

  body.header--menu-open .mlv-mobile-accordion-panel > a:nth-child(3) {
    margin-top: 23px !important;
  }

  body.header--menu-open .mlv-mobile-accordion-panel[hidden] {
    display: none !important;
  }

  body.header--menu-open .mlv-mobile-accordion-panel > a {
    display: block !important;
    width: fit-content !important;
    color: #b37b38 !important;
    font-family: Inter, Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    text-decoration: none !important;
  }

  body.header--menu-open .mlv-mobile-accordion-panel > a[aria-current="page"] {
    color: #2c301e !important;
    font-weight: 600 !important;
    line-height: 1 !important;
  }

  body.header--menu-open
    .mlv-mobile-accordion-panel
    .header-menu-nav-item-content::before {
    display: none !important;
    content: none !important;
  }

  /* Sous-menu mobile : même petite flèche permanente qu'en desktop. */
  body.header--menu-open
    .mlv-mobile-accordion-panel
    > a
    .header-menu-nav-item-content {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 10px !important;
  }

  body.header--menu-open
    .mlv-mobile-accordion-panel
    > a
    .header-menu-nav-item-content::before {
    content: "" !important;
    display: inline-block !important;
    box-sizing: border-box !important;
    width: 7px !important;
    height: 7px !important;
    flex: 0 0 auto !important;
    margin-top: 0.42em !important;
    border: 0 !important;
    border-top: 1.5px solid currentColor !important;
    border-right: 1.5px solid currentColor !important;
    opacity: 1 !important;
    transform: rotate(45deg) !important;
    color: currentColor !important;
    pointer-events: none !important;
  }

  body.header--menu-open .header-menu-cta {
    flex: 0 0 auto !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-top: 32px !important;
  }

  body.header--menu-open
    .header-menu
    .header-menu-cta
    a.theme-btn--primary {
    width: 216px !important;
    max-width: 216px !important;
    min-height: 47px !important;
    margin: 0 !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
  }

  /* Le bouton flottant reste présent sur les pages, mais jamais au-dessus
     du burger lorsqu'il est ouvert. */
  body.header--menu-open .sk_scrollup_btn {
    display: none !important;
  }

  @keyframes mlv-mobile-submenu-reveal {
    from {
      opacity: 0;
      transform: translateY(-6px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    body.header--menu-open .mlv-mobile-accordion-panel:not([hidden]) {
      animation: none !important;
    }
  }
}
