/* ----------------------------------CONFIG---------------------------------- */
:root {
  /* Layout */
  --menu-height: 140px;
  --menu-top-height: 60px;
  --menu-bottom-height: 220px;
  --logo-height: 172px;
  --menu-left-width: var(--aside);
  --menu-right-width: 0px;
  --menu-left-and-right-width: calc(
    var(--menu-left-width) + var(--menu-right-width)
  );

  --menu-item-color: #000;
  --menu-right-icons: 16px;

  --slide-menu-width: 320px;
  --slide-menu-padding-y: 16px;
  --menu-right-height: 40px;
  /* renseigner une valeur ici pour centrer le slide-menu, sinon laisser "unset" */

  /* Colors */
  --topbar-background: var(--color-1);
  --submenu-background: var(--light);
  --submenu-icone: "\f061";

  --menu-item-hover-color: #000;
  --menu-item-hover-background: var(--light);
  --menu-item-active-color: var(--color-3);
  --menu-item-active-background: none;
  --burger-color: var(--color-1);
  --aside: 0px;
}

.accueil main {
  margin-top: 32px;
  width: calc(100% - var(--aside));
}
main {
  margin-top: var(--menu-height);
  width: calc(100% - var(--aside));
}
main.mini {
  margin-top: 350px;
}

.main.message_actif {
  margin-top: calc(var(--topbar-height) + 40px);
}
/* Main-menu */
#main-menu {
  z-index: 800;
  /* position        : fixed; */
  top: 0;
  left: 0;
  width: 100%;
  font-weight: bold;
  /* height          : var(--menu-height); */
  display: flex;
  justify-content: space-between;
  max-width: calc(100% - var(--aside));
  /* text-transform: uppercase; */
}

#main-menu .menu-mask {
  display: none;
}
#main-menu .achatExpressresponsive {
  display: none;
}

#main-menu .menu-bottom .logo {
  width: var(--menu-left-width);
  height: var(--logo-height);
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

#main-menu .menu-bottom.mini .logo {
  width: 180px;
  height: var(--logo-height);
}

#main-menu .menu-bottom .logo.logo-left {
  display: none;
}
#main-menu .menu-bottom.mini .logo.logo-left {
  display: block;
}
#main-menu .menu-bottom.mini .logo.logo-big {
  display: none;
}
/* #main-menu .menu-bottom{
   transition:height .3s ;
} */
#main-menu .menu-bottom.mini {
  --menu-bottom-height: 80px;
}
#main-menu .menu-bottom .logo img {
  width: 100%;
  height: 100%;
}

#main-menu .menu-bottom .logo-square {
  display: none;
}

#menu-slide {
  display: flex;
  flex-direction: column;
  width: calc(100vw - var(--menu-left-width));
  justify-content: center;
}

/* TOP MENU */
#menu-slide .menu-top,
#menu-slide .menu-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100vw;
  height: var(--menu-bottom-height);
  padding: 0 1rem;
  /* background: url(../../img/fond2.jpg); */
}
#menu-slide .menu-bottom {
  position: relative;
  display: block;
  align-items: center;
  justify-content: space-between;
  width: 100vw;
  height: var(--menu-bottom-height);
  padding: 0 1rem;

  margin-top: var(--menu-top-height);
  z-index: 50;
  max-width: calc(100vw - var(--aside));
}
#menu-slide .menu-bottom.mini {
  --logo-height: 80px;
  position: fixed;
  top: -220px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: var(--menu-bottom-height);
  padding: 0 1rem;
  /* background: url(../../img/body.jpg); */
  background: #fff;
  margin-top: var(--menu-top-height);
  z-index: 700;
  animation: menu 0.3s both;
}

#menu-slide .menu-bottom ul li a.active {
  font-weight: bold;
}
#menu-slide .menu-top ul li a.active {
  font-weight: bold;
}

@keyframes menu {
  0% {
    top: -220px;
  }
  100% {
    top: 0px;
  }
}

#menu-slide .menu-top {
  position: fixed;
  top: 0;
  background: var(--topbar-background);
  justify-content: space-between;
  height: var(--menu-top-height);
  z-index: 800;
  max-width: calc(100vw - var(--aside));
}
#menu-slide li svg {
  width: 25px;
  height: 25px;
}
#menu-slide .menu-top .left li:last-child svg {
  margin-right: 1rem;
}

#menu-slide .menu-top .left li:last-child {
  padding-left: 1rem;
}

#menu-slide .menu-top .left li:first-child a span,
#menu-slide .menu-top .left li:nth-child(2) a span {
  display: none;
}
#menu-slide .menu-top .left li:first-child a,
#menu-slide .menu-top .left li:nth-child(2) a {
  padding: 9px;
}

#menu-slide .menu-top .left li:last-child a:after {
  content: "";
  position: absolute;
  top: calc(50% - 12px);
  left: 5px;
  width: 1px;
  height: 24px;
  background: #000;
}
#menu-slide .menu-top .icons-menu-top > li {
  position: relative;
  /* font-size: 1.5rem; */

}

#menu-slide .menu-top .icons-menu-top > li:nth-child(n + 3):after {
  content: "";
  position: absolute;
  top: calc(50% - 12px);
  left: 0px;
  width: 1px;
  height: 24px;
  background: #000;
}

#menu-slide .dropdown-toggle::before {
  display: inline-block;
  margin-right: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}
#menu-slide .dropdown-toggle::after {
  display: none;
}

#menu-slide li a {
  font-weight: 400;
  font-size: 16px;
  text-transform: uppercase;
}
#menu-slide .menu-top ul.list-menu {
  justify-content: center;
}
#menu-slide .menu-bottom .menu-shops {

  height     : 60px;

}
#menu-slide ul.list-menu {
  display: flex;
  height     : 60px;
  align-items: center;
  justify-content: center;
}



#menu-slide .menu-bottom.mini ul.list-menu {
  height     : 100%;
}
#menu-slide .menu-top .list-menu > li {
  height: 100%;
  display: flex;
  align-items: center;
}

#menu-slide .menu-bottom .list-menu > li {
  padding: 0 1rem;
}

/* #menu-slide  .list-menu > li:last-child > a {
    color: var(--menu-item-color);
    display: flex;
    align-items: center;
    padding: 0 2rem;
    position:relative;
    font-weight:300;
} */

#menu-slide .sub-menu ul > li > a {
  color: var(--menu-item-color);
  padding: 8px 12px;
}

#menu-slide .sub-menu {
  height: 100%;
}
#menu-slide .sub-menu a {
  height: 100%;
  align-items: center;
  display: flex;
  padding: 0 1rem;
  position: relative;
}
#menu-slide .menu-sub-title {
  font-size: 10px;
  font-weight: 200;
}

#main-menu ul.list-menu li:hover > a,
#main-menu ul.icons-menu-top li:hover > a {
  color: var(--menu-item-hover-color);
}

#main-menu a.user-button {
  font-size: 14px;
}

/* SUB-MENU */
#main-menu .sub-menu {
  position: relative;
}
#main-menu .sub-menu > a {
  cursor: pointer;
}
#main-menu .sub-menu > ul {
  position: absolute;
  top: 59px;
  left: 0;
  background: #fff;
  box-shadow: var(--shadow-2);
  visibility: hidden;
  opacity: 0;
  transition: opacity ease 0.2s, left ease 0.2s;
  z-index: 10;
}

#main-menu .sub-menu:hover > ul {
  visibility: visible;
  opacity: 1;
}
#main-menu .sub-menu > ul a {
  white-space: nowrap;
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-3-alt);
}
#main-menu .sub-menu > ul li.bg-1 a {
  color: #fff;
}

#main-menu .menu-bottom .sub-menu > ul li:last-child a {
  border: none;
  /* text-align: center; */
  display: block;
}
/* #main-menu .menu-bottom .sub-menu > ul li:nth-last-child(2) a {
    border: none;
    background: var(--color-1);
} */

#main-menu .sub-menu > ul a i {
  width: 25px;
  text-align: center;
  color: var(--color-3);
  font-size: 19px;
}
#main-menu .sub-menu > ul a:not(.btn) svg {
  stroke: var(--color-1);
  fill: var(--color-1);
}

#main-menu .sub-menu > ul a:not(.btn):hover {
  background: var(--color-1);
  color: #fff;
}

#main-menu .sub-menu > ul a:not(.btn):hover i {
  color: #fff;
}
#main-menu .sub-menu > ul a:not(.btn):hover svg {
  stroke: #fff;
  fill: #fff;
}

#main-menu .sub-menu > ul.menu-level-2 {
  top: 0px;
  right: 100px;
  left: 100%;
  z-index: 400;
  width: 100%;
  box-shadow: inset var(--shadow-1);
}
#main-menu .sub-menu > ul.menu-level-2 a {
  min-height: 45px;
}

/*-----------------------Menu Mask--------------------------*/
#main-menu .menu-mask {
  display: none;
  background-color: rgba(0, 0, 0, 0.8);
}
#main-menu .menu-mask.menu-open {
  top: var(--menu-height);
  left: 0;
  display: block;
  position: fixed;
  width: 100vw;
  height: calc(100vh - var(--menu-height));
  z-index:5;
}
#main-menu.message_actif .menu-mask.menu-open {
  top: var(--menu-height);
}

#main-menu .menu-right {
  display: none;
}

#main-menu .list-menu .sub-menu > ul .icon {
  width: 28px;
  height: 28px;
  stroke: var(--color-1);
  margin-right: 1rem;
}
/* -----------------------------------BURGER----------------------------------- */
#burger {
  display: none;
  cursor: pointer;
}

/*-----------------------barre de recherche--------------------------*/
.nav-search form {
  position: relative;
  margin: 0;
}
.nav-search .form-control {
  /* width        : calc(100% - 44px); */
  max-width: none;
  /* padding-right: 40px; */
  border: none !important;
  border-bottom: 1px solid #000 !important;
}
.nav-search .search-submit {
  position: absolute;
  top: 50%;
  right: 0;
  width: 44px;
  height: 44px;
  margin-top: -20px;
  border: 0;
  outline: none;
  background-color: transparent;
  color: #000;
  font-size: 1.3rem;
  text-align: center;
  -webkit-box-shadow: none;
  box-shadow: none;
  cursor: pointer;
}
.search-bar-up {
  display: none;
}
.nav-search-down {
  display: block;
}
.search-bar-down {
  display: none;
}

.right-link {
  position: absolute;
  top: 0;
  left: 100%;
  width: 300px;
  height: 100%;
  box-shadow: 7px 11px 6px 0 rgba(0, 0, 0, 0.19);
}

.sub-menu .right-link img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  object-position: bottom;
}

#main-menu .sub-menu .right-link a.btn {
  height: auto;
  position: absolute;
  width: calc(100% - 1rem);
  justify-content: center;
  bottom: 0.5rem;
  margin: 0 0.5rem;
  text-transform: unset;

}


.menu-bottom .btn-achat-express{
    position:absolute;
    top:50%;
    right:5%;
    transform:translateY(-50%);
  }
  .menu-bottom.mini .btn-achat-express{
    position:relative;
    top:unset;
    transform:translateY(0);
  }

/* !!!!!!!!!BREACKPOINT!!!!!!!!! */
/* @media (max-width: 1600px){
  .menu-bottom .btn-achat-express {
    right: 0%;
}
} */

@media (max-width: 1660px) {
  /* .menu-bottom.mini .btn-achat-express {
    position: absolute;
    top: 400px;
    transform: translateY(0);
    right: 0;
    left: 32px;
} */
#menu-slide .menu-bottom .menu-shops {
    height: 40%;
}
#main-menu .achatExpressresponsive {
  display: block;
}
  
  .menu-bottom.mini .btn-achat-express span {
    font-size: clamp(20px, 1vw, 20px);
  }

  .horaire span {
    display: none;
  }
}

@media (max-width: 1300px) {
  .slogan {
    display: none;
  }
  #menu-slide .menu-top ul.list-menu {
    /* width: 100%; */
    justify-content: flex-start;
  }
}




@media (max-width: 1660px) {
  :root {
    --menu-height: 60px;
    --logo-height: 120px;
    --aside: 0px;
  }

  main {

    width: 100%;
}


#menu-slide .menu-bottom.mini {

  display: block;

}



  #content {
    max-width: 100%;
    width: 100%;
  }
  #cart-preview {
    display: none;
  }
  #menu-slide .menu-top {
    max-width: 100%;
  }

  #menu-slide .menu-bottom {
    margin-top: 0;
  }


  .menu-bottom .btn-achat-express {
    position: relative;
    bottom: 0;
    right: 0;
    transform: translateY(0);
    height:30%;

}
.btn-achat-express {display:none;}
  /*-----------------------Burger--------------------------*/
  #burger {
    right: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    width: 60px;
    /* CODE SVG */
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 400ms;
    user-select: none;
    z-index: 600;
  }
  #burger.active {
    transform: rotate(45deg);
  }
  #burger .line {
    fill: none;
    transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
    stroke: rgb(0, 0, 0);
    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;
  }

  /*-----------------------Main-menu--------------------------*/

  #main-menu .menu-right ul {
    height: var(--menu-height);
  }

  #menu-slide .menu-top {
    order: 2;
  }

  #menu-slide .menu-bottom {
    background: transparent;
    height: auto;
    display: block;
  }
  #main-menu .menu-left {
    width: 80%;
  }
  #menu-slide .menu-bottom {
    position: fixed;
    top: var(--menu-height);
    left: -100%;
    transition: left 0.3s;
    height: 100vh;
   width:var(--slide-menu-width);
  }

  #main-menu.menu-open .menu-bottom {
    background: #fff;
    width: 320px;
    left: 0;
    padding-top: 1.5rem;
    height: 100%;
  }
  /* #menu-slide .menu-bottom.mini{
        display:block;
    } */

  #menu-slide .menu-bottom .list-menu > li {
    padding: 0.5rem 0;
  }

  #menu-slide .menu-bottom ul.list-menu {
    display: block;
  }

  #menu-slide ul.list-menu a {
    padding: 10px 16px;
  }
  #menu-slide .sub-menu {
    height: auto;
  }
  #menu-slide li a,
 #menu-slide .sub-menu ul > li > a{
    padding: 10px 16px;
    position: relative;
  }

  .sub-menu > a::before {
    content: var(--submenu-icone);
    position: absolute;
    right: 20px;
    top: 8px;
    font-family: "Font Awesome 6 Pro";
  }
  #menu-slide .sub-menu ul {
    width: 100%;
    top: 0;
    transition: left 0.3s;
    left: -320px;
    box-shadow: none;
    visibility: visible;
  }
  #main-menu .sub-menu {
    position: static;
  }
  #menu-slide .sub-menu > ul {
    height: 100%;
    margin-top: 1.5rem;
  }
  #menu-slide .sub-menu.open > ul {
    left: 0;
  }
  #main-menu .sub-menu > ul {
    opacity: 1;
  }

  #menu-slide .list-menu > li:last-child > a {
    padding: 10px 16px;
  }

  /* #main-menu .icons-menu-top{
        display:none !important;
    } */
  #main-menu .search-bar-bottom {
    display: none;
  }
  #main-menu .menu-right {
    display: block;
  }

  .btn-user {
    background: transparent;
  }
  .btn-user i {
    /* font-size: 1.5rem; */
    color: #000;
  }
  .icons-menu-top li a i {
    /* font-size: 1.5rem; */
    color: #000;
  }

  #main-menu .reset {
    background: var(--color-1);
  }
  #main-menu .all-cat-link {
    display: flex;
    justify-content: center;
  }
  .sub-menu span.sub-title {
    font-size: 12px;
    font-weight: 200;
  }

  #main-menu .right-link {
    display: none;
  }

  /*-----------------------Search--------------------------*/

  .nav-search-up {
    position: absolute;
    right: -100%;
    top: 65px;
    background: #fff;
    box-shadow: var(--shadow-1);
    padding: 1rem;
    transition: right 0.3s;
    width: 330px;
  }
  .nav-search-up.visible {
    right: 0;
  }
  .search-bar-up {
    display: block;
  }
}

@media (max-width: 992px) {
  #menu-slide .menu-top .icons-menu-top > li:nth-child(n + 2):after {
    display: none;
  }
  #menu-slide .menu-top,
  #menu-slide .menu-bottom {
    padding: 0 1rem;
    /* flex-direction: row-reverse; */
  }
  .nav-link.dropdown-toggle::before {
    display: none !important;
  }
}

.btn-border-col-1 {
  position: relative;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg) translate3d(0, 0, 0);
  }
  25% {
    transform: rotate(3deg) translate3d(0, 0, 0);
  }
  50% {
    transform: rotate(-3deg) translate3d(0, 0, 0);
  }
  75% {
    transform: rotate(1deg) translate3d(0, 0, 0);
  }
  100% {
    transform: rotate(0deg) translate3d(0, 0, 0);
  }
}
@keyframes storm {
  0% {
    transform: translate3d(0, 0, 0) translateZ(0);
  }
  25% {
    transform: translate3d(4px, 0, 0) translateZ(0);
  }
  50% {
    transform: translate3d(-3px, 0, 0) translateZ(0);
  }
  75% {
    transform: translate3d(2px, 0, 0) translateZ(0);
  }
  100% {
    transform: translate3d(0, 0, 0) translateZ(0);
  }
}

/* .btn-border-col-1:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;

  border-radius: 10rem;
  z-index: -2;
}

.btn-border-col-1:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: var(--color-1);
  transition: all 0.3s;
  border-radius: 10rem;
  z-index: -1;
} */

.btn-border-col-1:hover {
  background: var(--color-1);
  border-color: #000;
}
.btn-border-col-1.active {
display:none;
}

/* .btn-border-col-1:hover:before {
  width: 100%;
}
.btn-border-col-1.active:before {
  width: 100%;
} */