@font-face {
  font-family: 'RobotoISK';         
      src: url('../fonts/roboto/Roboto-Regular.woff2') format('woff2'),
        url('../fonts/roboto/Roboto-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'RobotoISK';
        src: url('../fonts/roboto/Roboto-Bold.woff2') format('woff2'),
        url('../fonts/roboto/Roboto-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.preorder,
.release {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .9rem;
    font-weight: 700;
}

:root {
    --main-color-a: #b388eb;
    --main-color-b: #7c83fd;
    --main-color-c: #58b4ff;
    --footer-button-main: #6b868f;
    --footer-button-hover: #3c4d52;
    --font-title: 'RobotoISK', sans-serif;
    --border-radius: 5px;
}

.btn,
.release,
input {
    border-radius: var(--border-radius)
}

body,
html {
    font-family: var(--font-title)
}

main {
    display: flex;
    flex-direction: column;
    min-height: 100vh
}

section {
    flex: 1
}

.top-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000
}

.top-menu .sub-menu[style*=top] {
    top: 100% !important
}

.top-menu .sub-menu .sub-menu {
    top: 0;
    left: 100%
}

#header {
    color: #000;
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
}

#header.is-open { flex: fit-content;}

#header .mobile-header-bottom{
    flex: fit-content;
}

#header .agg-checkout-header{
    padding: 0px;
}
#header .header-nav {
    border-bottom: 0;
    max-height: 45px;
    margin-top: -5px;
}

#checkout #footer .text-sm-center,
#checkout #footer a,
#footer .footer-container li a:hover,
#header .header-nav .cart-preview .shopping-cart,
#mobile_top_menu_wrapper .js-top-menu-bottom a {
    color: #000
}

#blockEmailSubscription_displayFooterBefore,
#header .header-nav .blockcart,
#mobile_top_menu_wrapper,
#mobile_top_menu_wrapper .top-menu .collapse.in,
#mobile_top_menu_wrapper .top-menu .collapsing,
.block-categories,
.footer-container .links ul {
    background: 0 0
}

#checkout #header,
#checkout #header .header-nav
{
    position: relative;
}

#checkout .header-nav,
#footer,
#header .header-top {
    background: linear-gradient(to right, var(--main-color-a), var(--main-color-c))
}

#header .header-top {
    z-index: 5;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
    padding: 0.3rem 0;
}

#header .header-top a[data-depth="0"] {
    color: #fff;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .1)
}

#header .header-nav .cart-preview.active,
#header .header-nav .cart-preview.active a,
#header .header-nav .cart-preview.active i {
    background: 0 0;
    color: #000
}

#header .header-nav .blockcart.active a:hover,
#header .header-nav a:hover,
.dropdown:hover .expand-more,
.product-miniature .highlighted-informations .quick-view:hover {
    color: var(--main-color-b);
    text-decoration: none
}

#header .header-nav a:hover i.material-icons,
.page-my-account #content .links a:hover i {
    color: var(--main-color-b)
}

#header .top-menu a[data-depth="0"]:hover {
    color: #fff;
    text-decoration: none
}

#search_widget {
    padding-top: 6px
}

.header-top .search-widgets form input[type=text] {
    color: #000;
    background: #f6f6f6
}

.ui-autocomplete.ui-front {
    position: fixed
}

.has-discount.product-price {
    color: var(--main-color-a)
}

.product-description {
    position: relative
}

.product-description .overlay-link {
    position: absolute;
    inset: 0;
    z-index: 10;
    background: 0 0;
    text-decoration: none
}

.product-miniature .thumbnail-container:hover .product-description::after {
    border-top: 0
}

.release {
    background-color: var(--main-color-c);
    color: #fff;
    padding: 4px 10px;
    width: fit-content;
    display: inline-block;
    text-shadow: 0 1px 1px #5b5b5b;
    margin-bottom: 10px
}

.disclaimer {
    background: var(--main-color-c);
    background-color: rgba(0, 136, 255, .1);
    padding: 10px;
    border-radius: 5px
}

.disclaimer-red {
    /*background-color: #ffdbdb;*/
    background: #ffeaea; /* rouge clair, pas agressif */
    padding: 10px;
    text-align: center;
}

.disclaimer-red a {
  color: #0b6fd2; /* bleu foncé, lisible sur fond clair rouge */
  font-weight: 500;
}

.preorder {
    background-color: #efefef;
    color: #000;
    padding: 4px 10px;
    border-radius: var(--border-radius);
    text-align: center;
    text-shadow: 0 1px 1px #fff
}

/* Product page. Image arrow down */


#product-modal .modal-content .modal-body .mask {
  margin-bottom: 2.188rem;
}

#product-modal .modal-content .modal-body .product-cover-modal {
  margin-top: 1.6em;
}

/*================stick price bottom==================*/
.product-miniature .product-description {
    flex-grow: 1;
    display: flex;
    flex-direction: column
}

.product-miniature .product-price-and-shipping {
    margin-top: auto;
}

.product-miniature .thumbnail-container .product-thumbnail {
    height: auto
}

.product-miniature .thumbnail-container {
    border: 2px solid transparent;
    transition: border-color .3s;
    position: relative;
    background: 0 0;
    will-change: border-color;
    display: flex;
    flex: 1;
    flex-direction: column;
    background: #fff;
}

.dropdown,
.dropdown select,
.product-categories a,
.top-menu .popover {
    border-radius: var(--border-radius)
}

.thumbnail-container:hover {
    border-color: var(--main-color-b)
}

.thumbnail-oos {
    filter: grayscale(100%);
    position: relative
}

#checkout .header-nav,
.oos-overlay {
    position: absolute;
    width: 100%;
    z-index: 10
}

.oos-overlay {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    text-align: center;
    background: rgba(0, 0, 0, .5);
    color: #fff;
    padding: 1em;
    pointer-events: auto;
    user-select: none
}

@supports not ((backdrop-filter:blur(1px))) {
    .oos-overlay {
        background: rgba(255, 255, 255, .85)
    }
}

.product-flags li.product-flag.new {
    background: var(--main-color-b)
}

.product-flags li.product-flag.out_of_stock {
    background: var(--main-color-a)
}

.product-flags li.product-flag.discount,
.product-flags li.product-flag.discount-amount,
.product-flags li.product-flag.discount-percentage {
    background-color: var(--main-color-c)
}

.current-price-value {
    color: var(--main-color-c)
}

.discount.discount-percentage {
    background: var(--main-color-c)
}

.product-categories {
    margin-top: 1.5rem;
    font-size: .9rem
}

.product-categories strong {
    display: block;
    margin-bottom: .5rem;
    color: #333;
    font-weight: 600
}

.product-categories ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.product-categories li {
    margin: 0
}

.product-categories a {
    display: inline-block;
    background-color: #b388eb;
    color: #fff;
    padding: 4px 12px;
    text-decoration: none;
    font-size: .85rem;
    transition: background-color .2s, color .2s
}

#footer .btn-primary:hover,
.btn-primary:hover,
.product-categories a:hover {
    background-color: var(--footer-button-hover)
}

.dropdown,
.dropdown select {
    color: #000
}

.top-menu .popover {
    margin-top: 5px
}

#_desktop_top_menu.menu.js-top-menu.position-static.hidden-sm-down {
    padding-top: 9px
}

.btn-primary {
    background-color: var(--main-color-a)
}

#checkout .header-nav {
    top: 0;
    height: auto
}

#checkout .header-nav a,
#footer #block_myaccount_infos .myaccount-title a,
#footer .block-contact,
#footer .block-contact .navbar-toggler .material-icons,
#footer .block-contact a,
#footer .block_newsletter form .row .col-xs-12:last-of-type p,
#footer .footer-container .h3,
#footer .footer-container .h4,
#footer .footer-container .links ul>li a,
#footer .footer-container .material-icons,
#footer .footer-container li a,
#footer .text-sm-center a,
.copyright-link p {
    color: #fff
}

#checkout .header-nav a:hover {
    color: #ebebeb
}

#footer .btn-primary {
    background-color: var(--footer-button-main)
}

#footer .footer-container {
    text-shadow: 0 1px 2px rgba(0, 0, 0, .3)
}

.products>.col-12,
.products>.col-xs-12 {
    width: 25% !important;
    float: left;
    padding: 0 5px;
    box-sizing: border-box;
    display: flex
}

@media (max-width:990px) {

    .products>.col-12,
    .products>.col-xs-12 {
        width: 33.3333% !important
    }

    #header .header-top {
        box-shadow: none
    }

    .header-nav .container,
    .header-top .container {
        width: 100%
    }

    .header-top .search-widgets {
        max-width: 100%
    }

    #mobile_top_menu_wrapper {
        background: #fff
    }

    #_mobile_logo {
        display: none !important
    }

    #header .logo-link {
        margin-left: -20px
    }

    #header #_ig_mobile_logo img {
        max-height: 2.7rem;
    }
}

@media (max-width:767px) {
    #header .header-nav {
        background: linear-gradient(to right, var(--main-color-a), var(--main-color-c));
        margin-top: 0px;
    }

    #header .header-top a {
        color: #000 !important;
        text-transform: uppercase
    }

    #header .header-nav a:hover,
    #header .header-nav a:hover i.material-icons,
    .dropdown:hover .expand-more {
        color: #fff !important;
        text-decoration: none
    }

    #mobile_top_menu_wrapper .top-menu li a,
    button,
    select {
        color: #000
    }

    .products {
        margin-left: 0;
        margin-right: 0
    }

    .products>.col-12,
    .products>.col-xs-12 {
        width: 50% !important
    }

    body#checkout #header .header-nav {
    display: none;
  }
  
  .block-categories
  {
    display: none;
  }
}