/* PRATINIUM v170 — Header desktop inspiré Stripe
   Objectif : header compact, blanc, arrondi, proche de la capture Stripe,
   tout en conservant la structure PrestaShop et les CTAs/recherche existants. */

@media (min-width: 992px) {
  body #header,
  body #header .header-top,
  body #header .pf-header-top-global {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  /* Stripe-like: une carte blanche compacte, arrondie et flottante. */
  body #header .header-top.pf-header-top-global {
    padding: 16px 20px 10px !important;
    margin: 0 !important;
    min-height: 0 !important;
  }

  body #header .pf-header-top-global > .container,
  body #header .header-top > .container {
    width: calc(100vw - 64px) !important;
    max-width: 1760px !important;
    min-height: 76px !important;
    height: 76px !important;
    margin: 0 auto !important;
    padding: 0 34px !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,.97) !important;
    border: 1px solid rgba(15, 23, 42, .055) !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .10), 0 1px 0 rgba(255,255,255,.8) inset !important;
    overflow: visible !important;
  }

  body #header .pf-header-row-global,
  body #header .header-top .container .row.pf-header-row-global {
    display: grid !important;
    grid-template-columns: minmax(170px, 235px) minmax(760px, 1fr) 0 !important;
    column-gap: clamp(20px, 4vw, 64px) !important;
    align-items: center !important;
    min-height: 76px !important;
    height: 76px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  body #header #_desktop_logo,
  body #header .pf-header-logo-global {
    grid-column: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 235px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body #header #_desktop_logo h1,
  body #header .pf-header-logo-global h1,
  body #header #_desktop_logo a,
  body #header .pf-header-logo-global a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
  }

  body #header #_desktop_logo img,
  body #header .pf-header-logo-global img,
  body #header .logo img {
    height: auto !important;
    max-height: 62px !important;
    max-width: 205px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
  }

  body #header .pf-header-centerline {
    grid-column: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(430px, auto) minmax(340px, 420px) !important;
    column-gap: clamp(16px, 2vw, 28px) !important;
    align-items: center !important;
    justify-content: end !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  body #header .pf-header-ctas {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }

  body #header .pf-header-ctas .pf-btn,
  body #header .pf-header-centerline .pf-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 126px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 22px !important;
    border-radius: 999px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: -.01em !important;
    box-shadow: none !important;
    transform: none !important;
  }

  body #header .pf-header-ctas .pf-btn:hover,
  body #header .pf-header-centerline .pf-btn:hover {
    transform: translateY(-1px) !important;
  }

  body #header .pf-btn--ghost {
    color: #0f2f46 !important;
    background: linear-gradient(180deg, rgba(223,250,255,.95), rgba(204,246,255,.78)) !important;
    border: 1px solid rgba(39, 205, 238, .45) !important;
  }

  body #header .pf-btn--secondary {
    color: #102033 !important;
    background: linear-gradient(180deg, #fff, #f4f8fc) !important;
    border: 1px solid rgba(15, 23, 42, .12) !important;
  }

  body #header .pf-btn--primary {
    color: #08192b !important;
    background: linear-gradient(180deg, #ffd878, #f4b63f) !important;
    border: 1px solid rgba(209, 145, 28, .38) !important;
  }

  body #header .pf-header-centerline #search_widget,
  body #header .pf-header-centerline #_desktop_search,
  body #header .pf-header-centerline .search-widget {
    grid-column: 2 !important;
    justify-self: end !important;
    display: block !important;
    position: relative !important;
    width: clamp(340px, 24vw, 420px) !important;
    min-width: 340px !important;
    max-width: 420px !important;
    height: 46px !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  body #header #search_widget form,
  body #header .search-widget form {
    position: relative !important;
    width: 100% !important;
    height: 46px !important;
    margin: 0 !important;
  }

  body #header #search_widget input[type='text'],
  body #header .search-widget input[type='text'],
  body #header #search_widget input[type='search'],
  body #header .search-widget input[type='search'] {
    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 46px 0 54px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(15, 23, 42, .12) !important;
    background: rgba(248, 250, 252, .88) !important;
    box-shadow: inset 0 1px 1px rgba(15, 23, 42, .035) !important;
    font-size: 15px !important;
    line-height: 46px !important;
    color: #102033 !important;
    text-overflow: ellipsis !important;
  }

  body #header #search_widget input::placeholder,
  body #header .search-widget input::placeholder { color: rgba(15, 23, 42, .38) !important; }

  body #header #search_widget button,
  body #header .search-widget button,
  body #header #search_widget .search,
  body #header .search-widget .search {
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: rgba(15, 23, 42, .58) !important;
    z-index: 3 !important;
  }

  body #header #search_widget .material-icons,
  body #header .search-widget .material-icons {
    font-size: 25px !important;
    line-height: 1 !important;
  }

  /* v456: this historical rule used to hide the top bar on EVERY desktop page.
     Restrict it to pages explicitly classified as single-header. */
  body #header .pf-header-stack-v417--reference-single > .header-nav {
    display: none !important;
  }
}

@media (min-width: 992px) and (max-width: 1320px) {
  body #header .pf-header-top-global > .container,
  body #header .header-top > .container {
    width: calc(100vw - 36px) !important;
    padding: 0 22px !important;
  }
  body #header .pf-header-row-global,
  body #header .header-top .container .row.pf-header-row-global {
    grid-template-columns: minmax(150px, 200px) minmax(650px, 1fr) 0 !important;
    column-gap: 18px !important;
  }
  body #header #_desktop_logo img,
  body #header .pf-header-logo-global img,
  body #header .logo img {
    max-height: 56px !important;
    max-width: 185px !important;
  }
  body #header .pf-header-centerline {
    grid-template-columns: minmax(350px, auto) minmax(300px, 350px) !important;
    column-gap: 12px !important;
  }
  body #header .pf-header-ctas { gap: 8px !important; }
  body #header .pf-header-ctas .pf-btn,
  body #header .pf-header-centerline .pf-btn {
    min-width: 104px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 16px !important;
    font-size: 14px !important;
  }
  body #header .pf-header-centerline #search_widget,
  body #header .pf-header-centerline #_desktop_search,
  body #header .pf-header-centerline .search-widget {
    width: clamp(300px, 25vw, 350px) !important;
    min-width: 300px !important;
    max-width: 350px !important;
  }
}

@media (max-width: 991.98px) {
  /* On ne casse pas le menu mobile : simple réduction visuelle du bloc haut. */
  body #header .header-top.pf-header-top-global {
    padding-top: 10px !important;
    padding-bottom: 8px !important;
  }
  body #header .pf-header-top-global > .container,
  body #header .header-top > .container {
    width: calc(100vw - 24px) !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.97) !important;
    box-shadow: 0 12px 30px rgba(15,23,42,.08) !important;
  }
}

/* PRATINIUM v171 — alignement latéral header/hero desktop
   La carte du header reprend exactement la même respiration gauche/droite que le hero. */
@media (min-width: 992px) {
  body #header .header-top.pf-header-top-global {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  body #header .pf-header-top-global > .container,
  body #header .header-top > .container {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 10px !important;
  }
}

@media (min-width: 992px) and (max-width: 1320px) {
  body #header .header-top.pf-header-top-global {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  body #header .pf-header-top-global > .container,
  body #header .header-top > .container {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}