:root {
  --menu-gap: 15px;
  /* main-menu */
  --main-menu-height: 100px;
  --main-menu-padding-y: 5px;
  --main-menu-padding-x: 10px;
  --main-menu-bg-color: white;
  /* menu-items */
  --menu-item-padding-x: 16px;
  --menu-item-height: 38px;
  --menu-item-bg: transparent;
  --menu-item-bg-hover: var(--bg-light-2);
  --menu-item-color: var(--dark);
  --menu-item-color-hover: var(--dark);
  --menu-item-radius: 0;
  /* upper-menu */
  --upper-menu-height: 30px;
  /* menu-right */
  --menu-right-gap: var(--menu-gap);
  /* Sub-menu ul */
  --sub-menu-padding: 16px;
  --sub-menu-bg-color: white;
  --sub-menu-radius: 0;
  --sub-menu-radius-border-width: 0;
  --sub-menu-radius-border-color: #ddd;
  --sub-menu-box-shadow: var(--shadow-2);
  /* sub-menu-items */
  --sub-menu-item-color: var(--dark);
  --sub-menu-item-color-hover: var(--dark);
  --sub-menu-item-padding: 8px 16px;
  --sub-menu-item-bg: transparent;
  --sub-menu-item-bg-hover: var(--bg-light);
  --sub-menu-item-radius: 10px;
  /* btn-menu (phone call + search) */
  --btn-topbar-bg: #bd5b5b;
  --btn-topbar-bg-hover: #692727;
  --btn-topbar-color: #ffffff;
  --btn-topbar-border-color: #692727;
  --btn-topbar-border-width: 1px;
  --btn-topbar-radius: 20px;
  --btn-topbar-transform: normal;
  --btn-menu-gap: var(--menu-gap);
  /* slide-menu after breckpoint */
  --slide-menu-bg: white;
  --slide-menu-width: 380px;
  /* burger*/
  --burger-size: 60px;
  --burger-color: var(--dark);
  /* icon-menu */
  --icon-menu-color: var(--dark);
  --icon-menu-color-hover: white;
  --icon-menu-size: 20px;
  --icon-menu-gap: var(--menu-gap);
  /* mega-menu */
  --megamenu-column: 3;
  --megamenu-padding: 20px 20px 20px 20px;
  --megamenu-margin: 100px;
  --megamenu-column-rule: 0;
  --megamenu-column-gap: 20px;
  /* upper-menu items text style */
  --upper-menu-font-size: 16px;
  --upper-menu-font-weight: inherit;
  --upper-menu-font-style: normal;
  --upper-menu-text-transform: normal;
  /* level0-menu items text style */
  --level0-menu-font-size: 16px;
  --level0-menu-font-weight: 400;
  --level0-menu-font-style: normal;
  --level0-menu-text-transform: normal;
  /* Sub-title text style */
  --sub-title-font-size: 16px;
  --sub-title-font-weight: normal;
  --sub-title-font-style: normal;
  --sub-title-text-transform: none;
  --sub-title-color: #000;
  /* Link-image */
  --link-image-width: 250px;
  --link-image-gap: 16px;
  /* icons */
  --icon-size: 16px;
  --icon-padding-top: 4px;
  --icon-gap: 16px;
  /* arrows */
  --menu-arrow-stroke: 2;
  --menu-arrow-submenu-display: block;
}
/* Topbar button (phone) */
@media {
  .btn-topbar {
    background-color: var(--btn-topbar-bg);
    color: var(--btn-topbar-color);
    border: var(--btn-topbar-border-width) var(--btn-topbar-border-color) solid;
    border-radius: var(--btn-topbar-radius);
  }
  .btn-topbar:hover {
    background-color: var(--btn-1-bg-hover);
    color: var(--btn-1-color);
  }
}
/* main-menu */
@media {
  main {
    margin-top: var(--main-menu-height);
  }
  #main-menu {
    background: var(--main-menu-bg-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--main-menu-height);
    padding: var(--main-menu-padding-y) var(--main-menu-padding-x);
    position: fixed;
    z-index: 200;
    top: 0;
    width: 100%;
    white-space: nowrap;
    /* border-bottom  : 1px solid var(--text-muted); */
  }
}
/* logo */
@media {
  #main-menu .logo > img {
    height: 84px;
  }
  #slide-menu .logo {
    display: none;
  }
}
/* slide-menu */
@media {
  #slide-menu {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 16px;
  }

  #main-menu.menu-breakpoint .sub-menu ul {
    overflow: scroll;
  }

  .menu-breakpoint .sub-menu.open ul.menu-level-1 li{
      min-height:auto;
      max-width:100%;
}

  .menu-breakpoint > #slide-menu {
    position: fixed;
    z-index: 100;
    top: var(--main-menu-height);
    left: 100%;
    height: calc(100vh - var(--main-menu-height));
    background-color: var(--slide-menu-bg);
    width: var(--slide-menu-width);
    padding: 16px;
    transition: all ease 0.2s;
    display: unset;
    overflow-y: auto;
  }
  .menu-breakpoint > #slide-menu.menu-open {
    left: calc(100% - var(--slide-menu-width));
  }

  .menu-breakpoint > #slide-menu .menu-level-1 > li a {
    color: var(--dark);
    font-weight: 400;
  }
  #main-menu:not(.menu-breakpoint).menu-align-left #slide-menu {
    margin-right: auto;
  }
  #main-menu:not(.menu-breakpoint).menu-align-left #slide-menu > ul {
    justify-content: flex-start;
  }
  #main-menu:not(.menu-breakpoint).menu-align-right #slide-menu {
    margin-left: auto;
  }
  #main-menu:not(.menu-breakpoint).menu-align-right #slide-menu > ul {
    justify-content: flex-end;
  }
}
/* upper-menu*/
@media {
  #main-menu:not(.menu-breakpoint) #slide-menu > ul.top-menu > li {
    height: 100%;
  }
  #main-menu:not(.menu-breakpoint) #slide-menu > ul.top-menu {
    height: var(--upper-menu-height);
    text-transform: unset;
  }
}
/* down-menu */
@media {
  #slide-menu:not(.menu-breakpoint) > ul:not(.top-menu) > li {
    height: 100%;
  }
  #slide-menu:not(.menu-breakpoint) > ul:not(.top-menu) > li > a {
    font-size: var(--level0-menu-font-size);
    font-weight: var(--level0-menu-font-weight);
    text-transform: var(--level0-menu-text-transform);
    font-style: var(--level0-menu-font-style);
    height: 100%;
  }
}
/* sub-title */
@media {
  #slide-menu a .menu-sub-title {
    font-size: var(--sub-title-font-size);
    font-weight: var(--sub-title-font-weight);
    text-transform: var(--sub-title-text-transform);
    font-style: var(--sub-title-font-style);
  }
}
/* menu right */
@media {
  #main-menu .menu-right {
    display: flex;
    gap: var(--menu-right-gap);
    align-items: center;
  }
  #main-menu.menu-breakpoint .menu-right {
    padding-right: calc(var(--burger-size) + 1rem);
  }
}
/* icon-menu */
@media {
  #icon-menu {
    display: flex;
    align-items: center;
    gap: var(--icon-menu-gap);
  }
  #icon-menu a {
    color: var(--icon-menu-color);
    font-size: var(--icon-menu-size);
  }
  #icon-menu a:hover {
    color: var(--icon-menu-color-hover);
  }
  #icon-menu.menu-collapsed {
    padding-bottom: var(--icon-menu-gap);
    padding-left: 16px;
  }
  #icon-menu.menu-collapsed > li > a {
    width: 38px;
    height: 38px;
    border: 1px solid var(--color-1);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .shops_menu_icon_cart {
    position: relative;
  }
  .shops_menu_icon_cart .shops_menu_cart_icon {
    position: absolute;
    top: -19px;
    right: -18px;
  }
  .shops_menu_icon_cart .shops_menu_cart_icon .badge-basket {
    font-size: 12px;
    color: white;
    height: 18px;
    padding: 5px;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    background: #000000;
    right: 5px;
  }
}
/* menu-level-0 */
@media {
  .menu-level-0 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
  }

  .menu-level-0 > li > a {
    height: var(--menu-item-height);
    display: block;
    padding: 0 var(--menu-item-padding-x);
    background: var(--menu-item-bg);
    display: flex;
    align-items: center;
    transition: background 0.2s ease;
    border-radius: var(--menu-item-radius);
    color: var(--menu-item-color) !important;
  }
  .menu-level-0 > li:hover > a {
    background: var(--menu-item-bg-hover);
    color: var(--menu-item-color-hover) !important;
  }

  .menu-bottom .menu-level-0 .menu-title {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 15px;
  }
  .menu-breakpoint .menu-level-0 {
    flex-direction: column;
    align-items: flex-start;
    flex: 0 0 auto;
  }
  .menu-breakpoint .menu-level-0 > li {
    width: 100%;
    height: auto;
  }
  .menu-breakpoint .menu-level-0 a {
    padding: 16px;
    height: max-content;
  }
}
/* menu-level-1+ */
@media {
  .sub-menu {
    position: relative;
  }
  .sub-menu ul.menu-level-1 {
    background: var(--bg-light-2);
    border-radius: 0 0 20px 20px;
  }
  .sub-menu ul.menu-level-1 li {
    max-width: 211px;
    width: 100%;
    white-space: normal;
    text-align: center;
    background: white;
    min-height: 200px;
    height: 100%;
    margin-bottom: 20px;
    border-radius: 10px;
  }
  .sub-menu ul.menu-level-1 li .menu-title {
    font-weight: bold;
    font-size: 18px;
    color: var(--color-2);
    text-transform: unset;
  }
  .sub-menu ul.menu-level-1 li .menu-title .menu-sub-title {
    color: #000;
  }

  .sub-menu ul {
    display: none;
    flex-direction: column;
    position: absolute;
    padding: var(--sub-menu-padding);
    background-color: var(--sub-menu-bg-color);
    border-radius: var(--sub-menu-radius);
    width: max-content;
    border: var(--sub-menu-radius-border-width) solid
      var(--sub-menu-radius-border-color);
  }

  #main-menu:not(.megamenu).sub-menu ul {
    box-shadow: var(--sub-menu-box-shadow);
  }

  #main-menu:not(.menu-breakpoint).megamenu #slide-menu > ul > li > ul {
    /* box-shadow: var(--sub-menu-box-shadow); */
  }
  #main-menu.menu-breakpoint .sub-menu ul {
    box-shadow: none;
  }
  #slide-menu li > a + ul:hover,
  #slide-menu li:hover > a + ul {
    display: flex;
    z-index: 1;
  }
  .sub-menu li {
    display: block;
    padding: var(--sub-menu-item-padding);
    background: var(--sub-menu-item-bg);
    transition: background 0.2s ease;
    border-radius: var(--sub-menu-item-radius);
    border: 2px solid transparent;
    color: var(--sub-menu-item-color) !important;
    height: 100%;
  }
  .sub-menu li:hover {
    border-color: var(--color-1);
  }

  .menu-level-2,
  .menu-level-3,
  .menu-level-4 {
    top: 0;
    left: 100%;
  }
  #slide-menu .return {
    display: none;
  }
  #slide-menu.menu-breakpoint:not(.menu-open) ul {
    box-shadow: none;
  }
  .menu-breakpoint .sub-menu ul {
    position: fixed;
    display: flex;
    z-index: 100;
    top: var(--main-menu-height);
    left: 100%;
    height: calc(100vh - var(--main-menu-height));
    background-color: var(--slide-menu-bg);
    width: var(--slide-menu-width);
    padding: 16px;
    transition: all ease 0.2s;
    border-radius: 0;
    border: none;
  }
  .menu-breakpoint .sub-menu.active > ul {
    left: calc(100% - var(--slide-menu-width));
  }
  .menu-breakpoint #slide-menu .return {
    display: block;
  }
  .menu-breakpoint .return > a {
    font-weight: bolder;
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .menu-breakpoint .sub-menu > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
/* svg menu-arrow */
@media {
  .menu-breakpoint #slide-menu .return svg {
    stroke: var(--menu-item-color);
    stroke-width: 2;
    transform: rotate(180deg);
  }
  svg.menu-arrow {
    display: var(--menu-arrow-display);
    stroke: var(--menu-item-color);
    stroke-width: 2 var(--menu-arrow-stroke);
    display: var(--menu-arrow-submenu-display);
    align-self: center;
    padding: var(menu-arrow-padding);
  }
  #main-menu.megamenu:not(.menu-breakpoint) svg.menu-arrow,
  #main-menu:not(.menu-breakpoint) > #slide-menu > ul > li > a svg.menu-arrow {
    display: none;
  }
  .menu-breakpoint svg.menu-arrow {
    display: block;
  }
}
/* burger */
@media {
  #burger {
    display: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    height: var(--burger-size);
    width: var(--burger-size);
    transition: transform 400ms;
    user-select: none;
    position: absolute;
    right: var(--main-menu-padding-x);
    z-index: 999;
  }
  .menu-breakpoint #burger {
    display: flex;
  }
  #burger.active {
    transform: rotate(45deg);
  }
  #burger .line {
    fill: none;
    transition:
      stroke-dasharray 400ms,
      stroke-dashoffset 400ms;
    stroke: var(--burger-color);
    stroke-width: 3;
    stroke-linecap: round;
  }
  #burger .top {
    stroke-dasharray: 40 121;
  }
  #burger .bottom {
    stroke-dasharray: 40 121;
  }
  #burger.active .top {
    stroke-dashoffset: -68px;
  }
  #burger.active .bottom {
    stroke-dashoffset: -68px;
  }
}
/* mask */
@media {
  #mask {
    display: none;
    top: var(--main-menu-height);
    left: 0;
    position: fixed;
    width: 100vw;
    height: calc(100vh - var(--main-menu-height));
    background-color: rgba(0, 0, 0, 0);
    transition: all ease 0.2s;
  }
  #mask.active {
    display: block;
    background-color: rgba(0, 0, 0, 0.8);
  }
}
/* phone */
@media (max-width: 600px) {
  :root {
    --slide-menu-width: 100%;
  }
}
/* btn-menu */
@media {
  #btn-menu {
    display: flex;
    gap: var(--btn-menu-gap);
  }
  #btn-menu.menu-collapsed {
    flex-wrap: wrap;
    padding-bottom: var(--btn-menu-gap);
    z-index: 0;
  }
}
/* search */
@media {
  #search [type="search"] {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none !important;
    min-width: 64px;
  }
  #search {
    flex-wrap: nowrap;
    min-width: 175px;
  }
}
/* image */
@media {
  #slide-menu ul ul li.link-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  #slide-menu ul ul li.link-image {
    width: var(--link-image-width);
    padding-bottom: var(--link-image-gap);
    border-radius: var(--sub-menu-item-radius) var(--sub-menu-item-radius) 0 0;
    overflow: hidden;
  }
  /* img-left */
  #main-menu:not(.menu-breakpoint):not(.megamenu)
    #slide-menu
    ul
    ul.link-image.img-left {
    padding-left: calc(var(--link-image-width) + var(--link-image-gap));
  }
  #main-menu:not(.menu-breakpoint):not(.megamenu)
    #slide-menu
    ul
    ul
    li.link-image.img-left {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    height: 100%;
    border-radius: var(--sub-menu-item-radius) 0 0 var(--sub-menu-item-radius);
  }
  /* img-right */
  #main-menu:not(.menu-breakpoint):not(.megamenu)
    #slide-menu
    ul
    ul.link-image.img-right {
    padding-right: calc(var(--link-image-width) + var(--link-image-gap));
  }
  #main-menu:not(.menu-breakpoint):not(.megamenu)
    #slide-menu
    ul
    ul
    li.link-image.img-right {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    height: 100%;
    border-radius: 0 var(--sub-menu-item-radius) var(--sub-menu-item-radius) 0;
  }
  /* img-bottom */
  #slide-menu:not(.megamenu) ul ul li.link-image.img-bottom {
    order: 1;
    padding-bottom: 0;
    margin-top: var(--link-image-gap);
    border-radius: 0 0 var(--sub-menu-item-radius) var(--sub-menu-item-radius);
  }
  #main-menu.menu-breakpoint #slide-menu.menu-open ul ul li.link-image {
    border-radius: var(--sub-menu-item-radius);
    padding: 0;
    width: 100%;
    margin: var(--link-image-gap) 0;
  }
  #main-menu.megamenu:not(.menu-breakpoint) #slide-menu > ul ul li.link-image {
    width: 100%;
    border-radius: var(--sub-menu-item-radius);
    padding: 0;
    margin-bottom: 1rem;
    width: 595px;
  }
  #main-menu.megamenu:not(.menu-breakpoint)
    #slide-menu
    > ul
    ul
    li.link-image:last-child {
    margin-bottom: 0;
  }
  #main-menu .menu-block-right {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding-left: 1rem;
  }
  #main-menu.menu-breakpoint .menu-block-right {
    padding-left: 0;
  }
  #main-menu.menu-breakpoint .menu-block-right .menu-title {
    font-size: 16px;
  }
  @media (max-width: 1630px) {
    #main-menu .menu-block-right {
      padding-left: 0 !important;
    }
  }
  .menu-block-right .menu-title {
    position: relative;
    font-size: 18px;
    color: var(--color-1);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    margin-top: 1rem;
    white-space: normal;
  }
  .menu-block-right p {
    font-family: var(--subtitle2-font);
    color: var(--color-1);
    margin-bottom: 0;
    white-space: normal;
  }
  .menu-block-right .menu-title:before {
    content: url("../../img/etoiles.svg");
    position: absolute;
    top: -30px;
    left: 0;
    width: 100%;
    height: auto;
  }
}
/* icons */
@media {
  #slide-menu a {
    gap: var(--icon-gap);
  }
  #slide-menu a i {
    font-size: var(--icon-size);
    padding-top: var(--icon-padding-top);
  }
}
/* logo-center menu */
@media {
  #main-menu.logo-center:not(.menu-breakpoint) .menu-left .logo {
    display: none;
  }
  #main-menu.logo-center:not(.menu-breakpoint) #slide-menu {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: 100%;
    grid-template-areas: "menu-1 image menu-2";
  }
  #main-menu.logo-center:not(.menu-breakpoint) #slide-menu.double-menu {
    grid-template-rows: var(--upper-menu-height) var(--menu-item-height);
    grid-template-areas: "menu-1 image menu-2" "menu-3 image menu-4";
  }
  #main-menu.logo-center:not(.menu-breakpoint) #slide-menu > :first-child {
    grid-area: image;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #main-menu.logo-center:not(.menu-breakpoint) #slide-menu > :nth-child(2),
  #main-menu.logo-center:not(.menu-breakpoint) #slide-menu > :nth-child(4) {
    justify-content: flex-end;
  }
  #main-menu.logo-center:not(.menu-breakpoint) #slide-menu > :nth-child(3),
  #main-menu.logo-center:not(.menu-breakpoint) #slide-menu > :nth-child(5) {
    justify-content: flex-start;
  }
}
/* megamenu */
@media {
  .megamenu:not(.menu-breakpoint) #slide-menu > ul > li > ul {
    padding: var(--megamenu-padding);
    margin: 0;
    width: calc(100% - var(--megamenu-margin) - var(--megamenu-margin));
    left: 0;
    width: max-content;
    top: var(---main-menu-height);
  }
  .megamenu:not(.menu-breakpoint) .sub-menu {
    position: relative;
    /* page-break-inside: avoid; */
    /* break-inside: avoid-column; */
    height: 100%;
  }
  .megamenu:not(.menu-breakpoint) .sub-menu ul {
    /* width: 100%; */
  }
  .megamenu:not(.menu-breakpoint) .sub-menu ul li.breack-after {
    break-after: column;
  }
  .megamenu:not(.menu-breakpoint) .sub-menu ul li.breack-before {
    break-before: column;
  }
  .megamenu:not(.menu-breakpoint) #slide-menu .sub-menu:hover > ul {
    display: block;
    column-count: var(--megamenu-column);
    column-rule: var(--megamenu-column-rule);
    column-gap: var(--megamenu-column-gap);
    column-fill: balance;
  }
  .megamenu:not(.menu-breakpoint) #slide-menu .sub-menu:hover > ul ul {
    position: relative;
    display: flex;
    left: 0;
    padding-left: 0;
    padding-right: 0;
  }
}
#slide-menu .menu-level-0 > li a.active {
  color: var(--color-2) !important;
}

 .megamenu.menu-breakpoint #slide-menu .sub-menu ul.menu-level-1 li {
    max-width: 100%;
    width: 100%;
    white-space: normal;
    text-align: center;
    background: white;
    min-height: auto;
    height: 100%;
    margin-bottom: 0px;
    border-radius: 10px;
  }
   .menu-breakpoint > #slide-menu .menu-level-1 > li a {
    color: var(--dark);
    font-weight: 400;
    display: flex;
    justify-content: flex-start;
  }
   .menu-breakpoint > #slide-menu .menu-level-1 > li a .menu-title{
text-align: left;
  }