/* PRATINIUM — V46 panneau mobile remonté dans la zone libre au-dessus des CTA
 * Devise / Contactez-nous sont affichés uniquement dans un panneau indépendant,
 * ouvert/fermé par le hamburger, positionné en absolute dans la zone libre entre
 * la barre logo/panier et les boutons Acheter/Voter/Investir.
 * Il flotte au-dessus du contenu : il ne déplace, ne masque et ne vide jamais #wrapper/main/#content.
 */
@media (min-width: 768px) {
  #header .pf-mobile-extra-panel { display: none !important; }
}

@media (max-width: 767px) {
  /* Le header devient l'ancre du panneau flottant. */
  #header,
  #header .header-top,
  #header .pf-header-top-global,
  #header .pf-header-top-global > .container,
  #header .pf-header-row-global,
  #header .header-top .container .row {
    position: relative !important;
    z-index: 1000 !important;
  }

  /* Le wrapper Classic mobile ne doit jamais pousser/embarquer le contenu principal. */
  #header #mobile_top_menu_wrapper {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 100% !important;
    width: 100% !important;
    z-index: 1001 !important;
    margin: 0 !important;
  }

  /* Cacher les blocs Devise/Contact d'origine en mobile hors du panneau dédié. */
  #header .header-nav .hidden-sm-down,
  #header .header-nav .right-nav,
  #header .header-nav .currency-selector,
  #header .header-nav #currency-selector,
  #header .header-nav .contact-link,
  #header .header-nav #contact-link,
  #header .header-nav a[href*="contact"],
  #header .pf-header-row-global > .currency-selector,
  #header .pf-header-row-global > #currency-selector,
  #header .pf-header-row-global > .contact-link,
  #header .pf-header-row-global > #contact-link,
  #header .pf-header-row-global > a[href*="contact"],
  #header #mobile_top_menu_wrapper .js-top-menu-bottom,
  #header #mobile_top_menu_wrapper #_mobile_currency_selector,
  #header #mobile_top_menu_wrapper #_mobile_contact_link {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  /* Garde-fou : le contenu principal reste toujours visible et dans son propre flux. */
  body #wrapper,
  body main,
  body #content,
  body .page-content,
  body .pf-account-dashboard {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  #header .pf-mobile-extra-panel {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    left: 50% !important;
    /* Zone encadrée : panneau remonté dans le blanc, au-dessus des CTA/recherche, sans chevauchement. */
    top: -36px !important;
    transform: translateX(-50%) !important;
    z-index: 1002 !important;
    width: min(330px, calc(100vw - 32px)) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    pointer-events: none !important;
  }

  #header .pf-mobile-extra-panel.is-open {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    padding: 4px 10px !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    text-align: center !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  #header .pf-mobile-extra-panel.is-open,
  #header .pf-mobile-extra-panel.is-open * {
    color: #555 !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
    text-decoration: none !important;
  }

  /* Très petits écrans : conserve le panneau dans la zone blanche sans toucher aux boutons. */
  @media (max-width: 390px) {
    #header .pf-mobile-extra-panel {
      top: -42px !important;
      width: min(318px, calc(100vw - 28px)) !important;
    }
    #header .pf-mobile-extra-panel.is-open {
      gap: 5px !important;
      padding-top: 3px !important;
      padding-bottom: 3px !important;
    }
  }
}

/* PRATINIUM — V119 mobile menu readability
 * Corrige le panneau Devise / Contactez-nous partiellement caché :
 * le panneau n'est plus positionné en négatif, il s'affiche dans le flux du header,
 * entre le logo et les boutons Acheter / Approuver / Investir.
 */
@media (max-width: 767px){
  #header,
  #header .header-top,
  #header .pf-header-top-global,
  #header .pf-header-top-global > .container,
  #header .pf-header-row-global,
  #header .header-top .container .row{
    overflow: visible !important;
  }

  #header .pf-mobile-extra-panel{
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    z-index: 5 !important;
    order: 2 !important;
    width: min(330px, calc(100vw - 34px)) !important;
    max-width: calc(100vw - 34px) !important;
    margin: -2px auto 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  #header .pf-header-centerline{
    order: 3 !important;
  }

  #header .pf-mobile-extra-panel.is-open{
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    min-height: 38px !important;
    padding: 2px 8px 4px !important;
    margin-bottom: 2px !important;
    text-align: center !important;
    background: rgba(255,255,255,.78) !important;
    border: 1px solid rgba(205,218,232,.55) !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 22px rgba(15,42,70,.07), inset 0 1px 0 rgba(255,255,255,.92) !important;
  }

  #header .pf-mobile-extra-panel.is-open,
  #header .pf-mobile-extra-panel.is-open *{
    color: #4c5563 !important;
    font-size: 13px !important;
    line-height: 1.18 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  #header .pf-mobile-extra-panel.is-open .pf-mobile-contact a{
    color: #1c5fa8 !important;
    font-weight: 650 !important;
  }
}