/* modifier promary couleur */
:root {
  --sm-primary: #c69e7f;
  --sm-background: #333;
  --sm-hover-background: #484848;
  --table-bg: #f8f9fa;
}

.btn-primary {
  background-color: #c69e7f;
  border-color: #c69e7f;

  &:hover,
  &:focus,
  &:active {
    background-color: #9c7659 !important;
    border-color: #705846 !important;
  }
}

.bg-primary {
  background-color: #c69e7f !important; /* !important to ensure override */
}

.text-primary {
  color: #c69e7f !important; /* !important to ensure override */
}

/* Pour Chrome, Safari, Edge */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Pour Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

body {
  font-family: "Montserrat", sans-serif;
}

.breadcrumb-custom {
  margin-bottom: 1rem;

  .breadcrumb-nav {
    margin: 0 !important;
  }

  .breadcrumb-modern {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(198, 158, 127, 0.16);
    border-radius: 999px;
    padding: 0.5rem 1rem;
    box-shadow: 0 10px 24px rgba(51, 51, 51, 0.06);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
  }

  .breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
  }

  .breadcrumb-item a {
    color: #705846;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
  }

  .breadcrumb-item a:hover,
  .breadcrumb-item a:focus-visible {
    color: #5c4636;
  }

  .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(112, 88, 70, 0.6);
    font-weight: 600;
  }

  .breadcrumb-item .icon {
    width: 16px;
    height: 16px;
  }
}

.container {
  margin-bottom: 30px;
  margin-top: 10px;
}

#header {
  background: #fff;

  .container {
    margin: 0 auto;
  }

  .header-container {
    background: transparent !important;
  }

  .banner {
    background: #F9F9F9;

    .row {
      justify-content: center;
    }

    a {
      display: block;
      width: 100%;
      max-width: 1170px;
      color: #333;
      text-decoration: none;
    }

    span {
      display: block;
      min-height: 50px;
      padding: 15px 12px;
      text-align: center;
      font-size: 14px;
      font-weight: 700;
      line-height: 1.4;
    }
  }

  .header-main-shell {
    padding: 10px 0 18px;
  }

  #header_logo {
    text-align: center;
    margin-bottom: 22px;

    a {
      display: inline-block;
    }

    .logo {
      width: 140px;
      max-width: 100%;
      height: auto;
    }
  }

  .nav {
    > .container,
    > .container > .row {
      width: 100%;
      margin: 0;
      max-width: none;
    }
  }

  .header-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }

  .header-tools-left,
  .header-tools-right {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .header-tool,
  .header-action {
    font-size: 13px;
    line-height: 1.2;
  }

  .header-tool a,
  .header-action,
  .languages-block .current {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 6px 0;
    border: 0;
    background: transparent;
    color: #333;
    text-decoration: none;
    transition: color 0.2s ease, opacity 0.2s ease;
  }

  .header-tool a:hover,
  .header-action:hover,
  .languages-block .current:hover,
  .header-tool a:focus-visible,
  .header-action:focus-visible,
  .languages-block .current:focus-visible {
    color: #333;
    opacity: 0.72;
  }

  .img-contact,
  .img-account,
  .header-action i {
    font-size: 27px;
    line-height: 1;
    color: #111;
  }

  #contact-link {
    a {
      font-size: 14px;
      font-weight: 400;
      letter-spacing: 0;
    }

    .contact-link-label {
      gap: 10px;
    }

    .img-contact {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 24px;
      // border: 1px solid #111;
      font-size: 18px;
    }
  }

  .languages-block {
    position: relative;

    .current {
      border-radius: 0;
      padding-right: 2px;
    }

    .language-label {
      font-size: 14px;
      font-weight: 400;
      text-transform: none;
    }

    .dropdown-menu {
      min-width: 180px;
      margin-top: 6px;
      padding: 6px 0;
      border: 1px solid rgba(51, 51, 51, 0.14);
      border-radius: 0;
      box-shadow: 0 18px 38px rgba(51, 51, 51, 0.12);
    }

    li {
      list-style: none;
    }

    li > a,
    li > span {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 14px;
      color: #333;
      text-decoration: none;
      text-transform: none;
      font-size: 13px;
    }

    li.selected > span,
    li > a:hover {
      background: #f5ede6;
    }
  }

  .locale-flag {
    display: inline-block;
    width: 18px;
    height: 15px;
    // border: 1px solid rgba(51, 51, 51, 0.12);
    // box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.65) inset;
    flex: 0 0 auto;
  }

  .locale-flag-fr {
    background: linear-gradient(to right, #1f5fbf 0 33.33%, #fff 33.33% 66.66%, #d94747 66.66% 100%);
  }

  .locale-flag-en {
    background:
      linear-gradient(to bottom, transparent 38%, #c73535 38% 62%, transparent 62%),
      linear-gradient(to right, transparent 42%, #c73535 42% 58%, transparent 58%),
      #21468b;
  }

  .locale-flag-it {
    background: linear-gradient(to right, #2f9b5b 0 33.33%, #fff 33.33% 66.66%, #d94747 66.66% 100%);
  }

  .locale-flag-de {
    background: linear-gradient(to bottom, #111 0 33.33%, #c73535 33.33% 66.66%, #e0b232 66.66% 100%);
  }

  .locale-flag-es {
    background: linear-gradient(to bottom, #c73535 0 25%, #e0b232 25% 75%, #c73535 75% 100%);
  }

  .account_info {
    position: relative;

    .header_user_info {
      margin: 0;
    }

    .logged_menu {
      min-width: 200px;
      margin-top: 6px;
      padding: 6px 0;
      border: 1px solid rgba(51, 51, 51, 0.14);
      border-radius: 0;
      box-shadow: 0 18px 38px rgba(51, 51, 51, 0.12);
    }

    .logged_menu li {
      list-style: none;
    }

    .logged_menu a {
      display: block;
      padding: 9px 14px;
      color: #333;
      text-decoration: none;
      text-transform: none;
      border: 0;
      min-height: 0;
    }

    .logged_menu a:hover {
      background: #f5ede6;
    }
  }

  .header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
  }

  .header-action {
    position: relative;
    min-width: 34px;
    justify-content: center;

    strong {
      position: absolute;
      top: -4px;
      right: -10px;
      min-width: 22px;
      padding: 4px 7px;
      border-radius: 999px;
      background: #c69e7f;
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      text-align: center;
    }
  }

  .cart-action {
    flex-direction: column;
    align-items: center;
    gap: 2px;

    .cart-icon-wrap {
      position: relative;
      display: inline-flex;

      i {
        font-size: 27px;
        line-height: 1;
        color: #111;
      }

      strong {
        top: -10px;
        right: -14px;
      }
    }

    .cart-amount {
      font-size: 13px;
      font-weight: 700;
      color: #fff;
      background: #c69e7f;
      padding: 3px 8px;
      border-radius: 999px;
      white-space: nowrap;
    }
  }

  #search_block_top {
    width: 180px;
  }

  #searchbox {
    position: relative;
  }

  .search_query {
    width: 100%;
    height: 34px;
    padding: 6px 34px 6px 0;
    border: 0;
    border-bottom: 1px solid rgba(51, 51, 51, 0.28);
    border-radius: 0;
    box-shadow: none;
    color: #333;
    font-style: italic;
  }

  .search_query:focus {
    border-color: #c69e7f;
    box-shadow: none;
  }

  .button-search {
    position: absolute;
    top: 1px;
    right: 0;
    bottom: 1px;
    padding: 0 2px 0 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #9a9a9a;
    font-size: 24px;
    line-height: 1;
  }

  .button-search:hover,
  .button-search:focus-visible {
    background: transparent;
    color: #333;
  }

  #homepage-slider {
    padding-top: 0 !important;
  }

  #htmlcontent_top .htmlcontent-home li i.fa.fa-qrcode,
  #htmlcontent_top .htmlcontent-home li i.fa.fa-phone-square,
  #htmlcontent_top .htmlcontent-home li i.fa.fa-truck {
    font-size: 100px !important;
    margin-left: -40px !important;
  }
}

@media (max-width: 991px) {
  #header {
    .header-main-shell {
      padding: 18px 0 6px;
    }

    .nav {
      width: 100%;
    }

    .header-tools {
      flex-direction: column;
      gap: 14px;
    }

    .header-tools-left,
    .header-tools-right {
      width: 100%;
      justify-content: center;
      flex-wrap: wrap;
    }

    #search_block_top {
      width: min(100%, 280px);
    }
  }
}

@media (max-width: 767px) {
  #header {
    .banner span {
      min-height: 0;
      font-size: 12px;
      padding: 12px 10px;
    }

    .header-tools,
    .header-tools-left,
    .header-tools-right,
    .header-actions {
      gap: 8px;
    }

    .header-tool,
    .header-action,
    #search_block_top {
      width: 100%;
      max-width: 100%;
    }

    .header-tool a,
    .header-action,
    .languages-block .current {
      width: 100%;
      justify-content: center;
    }

    .header-tools-right {
      flex-direction: column;
    }

    .search_query {
      padding-right: 34px;
    }

    .button-search {
      justify-content: center;
    }
  }
}

#footer {
  .footer-container {
    background-color: #F9F9F9;
    color: var(--sm-background);
    

    #footer {
      padding: 20px;
    }

    h4 {
      font-size: 18px;
      font: bold 20px / 16px open-sans, sans-serif;
      color: #333;

      a {
        text-decoration: none;
        color: #333;
      }
    }

    .footer-toggle {
      width: 100%;
      padding: 0;
      border: 0;
      background: transparent;
      color: #333;
      text-align: left;
      font: inherit;
    }

    .footer-panel {
      overflow: hidden;
    }

    ul {
      padding: 0;

      li {
        list-style: none;
        font-size: 13px;
        margin-bottom: 10px;

        span, a {
          text-decoration: none;
          color: #777777;
          font-size: 13px;
        }

        .hours-open {
          font-style: italic;
          margin: 0px;
          color: #777777;
        }
          
          
      }
    }

   

    .footer-text {
      color: #777777;
      font-size: 13px;
    }

    .info-boutique {
      border-left: solid 1px #484848;
      padding: 0 0 5px 20px;
    }

    #bottom-page {
      background-color: #333;
      color:#F9F9F9;
      padding: 10px 5vw;
    }
  }

    .footer-block {
      .underline {
        position:relative;
        top:-5px;
        color:#af9012;
        border:1px solid;
        width:64px
      }
    }
  }

/* Coloris */
.filtered-coloris {
  &.right {
    text-align: end;

    .selected-coloris {
      justify-content: end;
    }
  }

  span {
    &:first-child {
      font-weight: 600;
      text-decoration: underline;
      text-underline-offset: 2px;
    }
  }

  .selected-coloris {
    flex-wrap: wrap;
    // width: 90%;

    margin-top: 5px;

    .btn-tous {
      &:hover {
        // font-size: larger;
        border: solid 5px rgb(115, 241, 115) !important;
      }

      &.active {
        border: solid 5px rgb(115, 241, 115) !important;
 
      }
    }
  }
}

@media (min-width: 992px) {
  #footer {
    .footer-container {
      .footer-panel.collapse {
        display: block !important;
        height: auto !important;
        visibility: visible;
      }

      .footer-toggle {
        pointer-events: none;
      }
    }
  }
}

@media (max-width: 991px) {
  #footer {
    .footer-container {
      width: 100%;

      #footer {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 20px 5vw;
      }

      .row {
        display: block;
        margin: 0;
      }

      .footer-block {
        width: 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
        float: none;
        margin-bottom: 12px;
      }

      .col-xs-12,
      .col-sm-2,
      .col-sm-3,
      .col-sm-12,
      .col-lg-4 {
        width: 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
        float: none;
      }

      h4 {
        margin-bottom: 0;
      }

      .footer-toggle {
        position: relative;
        padding: 12px 32px 12px 0;

        &::after {
          content: "+";
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          font-size: 22px;
          line-height: 1;
          color: #777777;
        }

        &[aria-expanded="true"]::after {
          content: "-";
        }
      }

      .footer-panel {
        padding-top: 10px;
      }

      #bottom-page {
        width: 100%;
        display: block;
      }
    }
  }
}

.btn-couleur {
  width: 30px;
  height: 30px;

  &:hover {
    width: 35px;
    height: 35px;
    border: solid 5px rgb(115, 241, 115) !important;
  }

  &.active {
    border: solid 5px rgb(115, 241, 115) !important;
    width: 35px;
    height: 35px;
  }

  &.multicolor-bg {
    // background: linear-gradient(
    //   45deg,
    //   #ff0000 0%,
    //   #ffa500 14%,
    //   #ffff00 28%,
    //   #008000 42%,
    //   #0000ff 56%,
    //   #ee82ee 84%
    // ) ;
    background: linear-gradient(217deg, rgb(255 0 0 / 0.8), transparent 70.71%),
      linear-gradient(127deg, rgb(0 255 0 / 0.8), transparent 70.71%),
      linear-gradient(336deg, rgb(0 0 255 / 0.8), transparent 70.71%);
  }
}

/* Notifications */
#notification {
  .notif {
    position: fixed;
    bottom: 200px;
    right: 10px;
    z-index: 5;
    opacity: 100%;
  }
}

/* Breadcumb */
.breadcrumb-custom {
  .breadcrumb {
    a {
      text-decoration: none;
      color: #333;

      .icon {
        width: 20px;
        height: 20px;
        margin-top: -7px;
      }
    }
  }
}

@media (max-width: 992px) {
  .main-header {
    flex-direction: column;
    gap: 1rem;
    align-items: center !important;
  }

  .dessus-header {
    font-size: 10px;
  }

  .info-boutique {
    border: none !important;
    padding: 0px !important;
  }
}