/* PRATINIUM — v122 mobile menu/header real centering
 * Objectif : corriger le décalage résiduel vers la droite du bloc mobile
 * lorsque le contenu du menu hamburger est affiché, sans toucher au desktop.
 * La pile Devise/Contact + CTA + Recherche est recentrée sur l'axe réel du viewport.
 */
@media (min-width: 768px){
  #header .pf-mobile-extra-panel{ display:none!important; }
}

@media (max-width: 767.98px){
  /* Le conteneur du header mobile doit être un repère plein écran, sans offset Bootstrap. */
  #header .header-top.pf-header-top-global > .container,
  #header .header-top > .container,
  #header .pf-header-top-global > .container{
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  #header .pf-header-row-global,
  #header .header-top .container .row.pf-header-row-global{
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }

  /* Axe commun : panneau menu + CTA + recherche, centré sur le viewport et non sur une colonne décalée. */
  #header .pf-mobile-extra-panel,
  #header .pf-mobile-extra-panel.is-open,
  #header .pf-header-centerline{
    width: min(332px, calc(100vw - 48px)) !important;
    max-width: min(332px, calc(100vw - 48px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    position: relative !important;
    left: -10px !important;
    right: auto !important;
    transform: none !important;
  }

  /* Sur très petits écrans, on réduit légèrement l'offset pour éviter tout rognage gauche. */
  @media (max-width: 374px){
    #header .pf-mobile-extra-panel,
    #header .pf-mobile-extra-panel.is-open,
    #header .pf-header-centerline{
      left: -6px !important;
      width: min(326px, calc(100vw - 42px)) !important;
      max-width: min(326px, calc(100vw - 42px)) !important;
    }
  }

  /* Le contenu interne reste centré et occupe exactement la même largeur. */
  #header .pf-mobile-extra-panel.is-open,
  #header .pf-header-centerline{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  #header .pf-mobile-extra-panel.is-open .pf-mobile-currency,
  #header .pf-mobile-extra-panel.is-open .pf-mobile-contact,
  #header .pf-header-ctas,
  #header .pf-header-centerline .pf-header-ctas,
  #header .pf-header-centerline #search_widget,
  #header .pf-header-centerline #_desktop_search,
  #header .pf-header-centerline .search-widget,
  #header .pf-header-centerline #search_widget form,
  #header .pf-header-centerline #_desktop_search form,
  #header .pf-header-centerline .search-widget form{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  /* Pas de régression sur l'état fermé : le panneau caché ne réserve aucun espace. */
  #header .pf-mobile-extra-panel:not(.is-open){
    display: none !important;
    height: 0 !important;
    max-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }
}