/* La Selection Francaise - accueil valide le 03/09/2026 */
@media (min-width: 768px) {
  .page-index #header .header-top {
    height: 150px !important;
    padding: 12px 0 !important;
    background: linear-gradient(180deg, #f8fcff 0%, #eef7fc 100%) !important;
  }
  .page-index #header .header-top > .container {
    height: 126px !important;
    position: relative !important;
  }
  .page-index #_desktop_logo {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 160px !important;
    height: 126px !important;
    text-align: center !important;
  }
  .page-index #_desktop_logo .logo {
    width: auto !important;
    height: 112px !important;
    max-height: 112px !important;
    transition: transform .2s ease, filter .2s ease;
  }
  .page-index #_desktop_logo a:hover .logo {
    transform: translateY(-2px) scale(1.02);
    filter: drop-shadow(0 4px 6px rgba(9, 48, 100, .18));
  }
  .page-index #_desktop_top_menu {
    position: absolute !important;
    left: 190px !important;
    top: 38px !important;
    width: auto !important;
    height: auto !important;
  }
  .page-index #top-menu {
    display: flex !important;
    flex-flow: row nowrap !important;
    gap: 12px !important;
    width: auto !important;
    height: auto !important;
  }
  .page-index #top-menu > li > a {
    display: block !important;
    padding: 11px 16px !important;
    border: 1px solid #173e73 !important;
    border-bottom: 2px solid #d3a63c !important;
    border-radius: 8px !important;
    background: #f4faff !important;
    color: #102f5f !important;
    line-height: 1.1 !important;
    box-shadow: 0 2px 5px rgba(16, 47, 95, .08) !important;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease !important;
  }
  .page-index #top-menu > li > a:hover,
  .page-index #top-menu > li > a:focus {
    background: #e5f3fb !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(16, 47, 95, .14) !important;
  }
  .page-index #search_widget {
    position: absolute !important;
    right: 0 !important;
    top: 39px !important;
    width: 285px !important;
  }
  .page-index #header { background: #eef7fc !important; }
  .page-index #wrapper { background: #e6f4fb !important; padding-top: 16px !important; }
  .page-index #wrapper::before {
    content: "3 articles achetés = 10 % de remise automatique";
    display: block;
    max-width: 1106px;
    margin: 0 auto 16px;
    padding: 14px 20px;
    border: 2px solid #d3a63c;
    border-radius: 8px;
    background: #103a72;
    color: #fff;
    text-align: center;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: .01em;
    box-shadow: 0 4px 10px rgba(16, 58, 114, .16);
  }
  .page-index .page-home {
    background: #f7f1e8 !important;
    border: 1px solid rgba(23, 62, 115, .18);
    border-radius: 8px;
    overflow: hidden;
  }
  .page-index .featured-products { padding: 24px 14px !important; }
  .page-index .featured-products:not(.mt-3) .products {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: stretch !important;
  }
  .page-index .featured-products:not(.mt-3) .products > .js-product {
    flex: 0 0 20% !important;
    max-width: 20% !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .page-index .featured-products:not(.mt-3) .products > .js-product:nth-child(5) {
    display: none !important;
  }
  .page-index .featured-products:not(.mt-3),
  .page-index .featured-products.mt-3 {
    min-height: 0 !important;
    height: auto !important;
  }
  .page-index .featured-products.mt-3 {
    background: #eef7fc !important;
    border-top: 1px solid rgba(23, 62, 115, .18);
  }
  .page-index .featured-products .thumbnail-container {
    width: 100% !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }
}

@media (max-width: 767px) {
  .page-index #wrapper::before {
    content: "3 articles achetés = 10 % de remise automatique";
    display: block;
    margin: 0 12px 14px;
    padding: 11px 12px;
    border: 2px solid #d3a63c;
    border-radius: 7px;
    background: #103a72;
    color: #fff;
    text-align: center;
    font-weight: 700;
  }
}

@media (min-width: 768px) {
  body.page-index #header .header-top {
    height: 150px !important;
    min-height: 150px !important;
  }
  body.page-index #header .header-top > .container {
    height: 126px !important;
    min-height: 126px !important;
  }
  body.page-index #header .header-top .lsf-header-layout {
    display: grid !important;
    grid-template-columns: 170px minmax(0, 1fr) 300px !important;
    gap: 20px !important;
    align-items: center !important;
    height: 126px !important;
  }
  body.page-index #header .lsf-header-layout #_desktop_logo,
  body.page-index #header .lsf-header-layout #_desktop_top_menu,
  body.page-index #header .lsf-header-layout #search_widget {
    position: static !important;
    inset: auto !important;
    float: none !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
  }
  body.page-index #header .lsf-header-layout #_desktop_logo {
    grid-area: auto !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    text-align: left !important;
    align-self: center !important;
    max-height: 126px !important;
  }
  body.page-index #header .lsf-header-layout #_desktop_logo img.logo {
    width: auto !important;
    height: 100px !important;
    max-width: 150px !important;
    max-height: 100px !important;
  }
  body.page-index #header .lsf-header-layout #_desktop_top_menu {
    grid-area: auto !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    align-self: center !important;
    width: 100% !important;
  }
  body.page-index #header .lsf-header-layout #top-menu {
    display: block !important;
    white-space: nowrap !important;
    position: relative !important;
    width: 100% !important;
    height: 42px !important;
    margin: 0 !important;
    justify-content: center !important;
  }
  body.page-index #header .lsf-header-layout #top-menu > li {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    vertical-align: middle !important;
    float: none !important;
    width: calc((100% - 24px) / 3) !important;
    margin: 0 8px 0 0 !important;
  }
  body.page-index #header .lsf-header-layout #top-menu > li:last-child {
    margin-right: 0 !important;
  }
  body.page-index #header .lsf-header-layout #top-menu > li:nth-child(1) { left: 0 !important; }
  body.page-index #header .lsf-header-layout #top-menu > li:nth-child(2) { left: calc((100% - 24px) / 3 + 12px) !important; }
  body.page-index #header .lsf-header-layout #top-menu > li:nth-child(3) { left: calc(2 * ((100% - 24px) / 3 + 12px)) !important; }
  body.page-index #header .lsf-header-layout #search_widget {
    grid-area: auto !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: stretch !important;
    align-self: center !important;
  }
}