.ProductTable__header.sortable.active,
.ProductTable__header.sortable:hover {
  background-color: #2fa0a9;
}
.ProductTable__header.sortable i.order-column:after,
.ProductTable__header.sortable i.order-column:before {
  background-image: url(../images/icon-fleche-order-column.svg);
  background-size: contain;
  width: 8px;
  height: 5px;
  content: "";
}
.ProductTable__headers,
.Product__container {
  min-width: fit-content;
  display: flex;
}
.ProductTable__header,
.Product__value {
  padding: 10px 7px;
  text-align: center;
  box-sizing: border-box;
}
.Product__value div[note],
.Product__value div[notecritere]:before {
  --colorexcellent: #00b75c;
  --colorbon: #abc978;
  --colormoyen: #ffc62c;
  --colormauvais: #f3a96d;
  --colornul: #ee2225;
}
.Product__value div.none {
  width: 60px;
}
.Product__value div.none::before {
  content: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.0793 2C5.45116 2 0.0792829 6.36406 0.0792829 11.75C0.0792829 13.9812 1.0121 16.025 2.55897 17.6703C1.86053 19.5172 0.407408 21.0828 0.38397 21.1016C0.0745954 21.4297 -0.00977961 21.9078 0.168345 22.3203C0.34647 22.7328 0.754283 23 1.20428 23C4.0871 23 6.36053 21.7953 7.7246 20.8297C9.07928 21.2563 10.5418 21.5 12.0793 21.5C18.7074 21.5 24.0793 17.1359 24.0793 11.75C24.0793 6.36406 18.7074 2 12.0793 2ZM12.0793 19.25C10.8277 19.25 9.59022 19.0578 8.40428 18.6828L7.34022 18.3453L6.42616 18.9922C5.75585 19.4656 4.8371 19.9953 3.73085 20.3516C4.07303 19.7844 4.40585 19.1469 4.66366 18.4672L5.16053 17.15L4.19491 16.1281C3.34647 15.2234 2.32928 13.7281 2.32928 11.75C2.32928 7.61563 6.70272 4.25 12.0793 4.25C17.4558 4.25 21.8293 7.61563 21.8293 11.75C21.8293 15.8844 17.4558 19.25 12.0793 19.25Z' fill='%23777'%3E%3C/path%3E%3Cpath d='M22.3875 23.0862L1.30176 2.00049' stroke='%23777' stroke-width='2.5' stroke-linecap='round'%3E%3C/path%3E%3C/svg%3E");
}
.Product__value div.none::after {
  display: block;
  content: "aucun avis";
  font-size: 0.8em;
  color: #777;
}
.ProductTable__sticky-headers {
  overflow: auto;
  position: sticky;
  top: 0;
  max-width: 100%;
  width: 100%;
  z-index: 8;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.ProductTable__sticky-headers::-webkit-scrollbar {
  display: none;
}
.tdm-cache-producttable {
  position: fixed;
  top: -60px;
  left: 0;
  width: 100%;
  height: 60px;
  z-index: 7;
  pointer-events: none;
  background-color: #ebebec;
  background-image: url("../images/texture-fond-site.png");
  background-repeat: repeat;
  background-size: auto auto;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  transition: transform 140ms cubic-bezier(0.2, 0, 0, 1);
}
.tdm-cache-producttable--visible {
  -webkit-transform: translateY(60px);
  transform: translateY(60px);
}
.ProductTable__headers {
  border-bottom: 5px solid #fff0;
  border-radius: 5px 0 0 5px;
}
.ProductTable__header {
  position: relative;
  flex-grow: 0;
  flex-shrink: 0;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  vertical-align: top;
  background-color: #39bdc8;
  border: 1px solid #e0ddda;
}
.ProductTable__header.sortable:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: calc(50% - 6px);
  border: 6px solid #fff0;
  border-top-color: #2fa0a9;
  opacity: 0;
  transition: 0.16s;
}
.ProductTable__header.sortable.active:after,
.ProductTable__header.sortable:hover:after {
  opacity: 1;
  transform: translateY(100%);
}
.ProductTable__header.sortable {
  padding-bottom: 27px;
}
.ProductTable__header.sortable i.order-column {
  display: flex;
  position: absolute;
  flex-direction: column;
  align-items: end;
  bottom: 7px;
  gap: 4px;
  left: 0;
  padding-right: 7px;
  width: 100%;
  opacity: 0.5;
}
.ProductTable__header.sortable i.order-column:before {
  display: block;
}
.ProductTable__header.sortable.ascending i.order-column:before,
.ProductTable__header.sortable.descending i.order-column:after {
  display: none;
}
.ProductTable__header.sortable i.order-column:after {
  display: block;
  transform: rotate(180deg);
}
.ProductTable__header:first-of-type {
  position: sticky;
  font-weight: 700;
  left: 0;
  z-index: 2;
}
.ProductTable {
  position: relative;
  overflow: scroll;
  z-index: 7;
  display: flex;
  gap: 10px;
  flex-direction: column;
  background-color: #ebebec;
  background-image: url(../images/texture-fond-site.png);
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.ProductTable::-webkit-scrollbar {
  display: none;
}
@media (min-width: 992px) and (max-width: 1365px) {
  .ProductTable,
  .ProductTable__sticky-headers {
    width: 66.666667vw;
    max-width: none;
  }
}
@media (min-width: 1366px) {
  .ProductTable,
  .ProductTable__sticky-headers {
    width: calc(100vw - 400px);
    margin-left: calc(50% - 50vw + 200px);
    max-width: none;
  }
}
.Product__value {
  flex-grow: 1;
  flex-basis: 0%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  border-left: 1px solid #e0ddda;
  background-color: #f5f3f3;
}
.Product__value:first-of-type {
  position: sticky;
  color: #fff;
  left: 0;
  z-index: 1;
  border-left: none;
}
.Product__value,
.Product__value a,
.Product__value li,
.Product__value p {
  font-size: 13px;
}
.Product__value.productTitle {
  background-color: #0086be;
  font-weight: 700;
}
.Product__value.productTitle img {
  padding-top: 5px;
}
.Product__value b.percent_bag {
  position: relative;
  display: block;
  font-size: 18px;
  margin-bottom: 5px;
}
.Product__value b.percent_bag .new {
  position: absolute;
  content: "Nouveau";
  display: inline-block;
  font-size: 9px;
  color: #fff;
  padding: 5px;
  padding-top: 2px;
  padding-bottom: 2px;
  background-color: #39bfc9;
  border-radius: 4px;
  top: 0;
  left: 50%;
  transform: translateY(calc(-100% - 4px)) translateX(-50%);
  text-align: center;
}
.Product__value b.percent_bag .new:after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: calc(50% - 4px);
  border-style: solid;
  border-width: 6px 4px 0 4px;
  border-color: #39bfc9 #fff0 #fff0 #fff0;
}
.Product__value.prices,
.Product__value.volumes,
.Product__value.weights {
  padding: 0;
}
.Product__value.prices ul,
.Product__value.volumes ul,
.Product__value.weights ul {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
.Product__value.prices li,
.Product__value.volumes li,
.Product__value.weights li {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  border-bottom: 2px dotted #e0ddda;
}
.Product__value.prices li:last-of-type,
.Product__value.volumes li:last-of-type,
.Product__value.weights li:last-of-type {
  border: none;
}
.Product__value.prices li strong {
  font-weight: 700;
  background-color: #d1d1d1;
  padding-left: 4px;
  padding-right: 4px;
  border-radius: 3px;
}
@media (max-width: 470px) {
  .ProductTable__header,
  .Product__value,
  .Product__value a,
  .Product__value li,
  .Product__value p,
  .Product__value span,
  .Product__value strong {
    font-size: 10px;
  }
  .Product__value.prices li strong {
    font-size: 12px;
  }
}
.Product__value ul.liste-avis {
  min-width: 70px;
  padding: 0;
  margin: 0 0 0.5em;
  text-align: left;
  align-self: flex-start;
  list-style: none;
}
.Product__value ul.liste-avis li {
  line-height: 1.2;
  margin-bottom: 0.5em;
  text-align: left;
  hyphens: auto;
}
.Product__value ul.liste-avis li:before {
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  height: 14px;
  width: 14px;
  margin-right: 5px;
  float: left;
}
.Product__value ul.liste-avis li.plus:before {
  content: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.00033 0.666504C4.40033 0.666504 0.666992 4.39984 0.666992 8.99984C0.666992 13.5998 4.40033 17.3332 9.00033 17.3332C13.6003 17.3332 17.3337 13.5998 17.3337 8.99984C17.3337 4.39984 13.6003 0.666504 9.00033 0.666504ZM13.167 9.83317H9.83366V13.1665H8.16699V9.83317H4.83366V8.1665H8.16699V4.83317H9.83366V8.1665H13.167V9.83317Z' fill='%234FBB36'/%3E%3C/svg%3E%0A");
}
.Product__value ul.liste-avis li.moins:before {
  content: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.00033 0.666504C4.40033 0.666504 0.666992 4.39984 0.666992 8.99984C0.666992 13.5998 4.40033 17.3332 9.00033 17.3332C13.6003 17.3332 17.3337 13.5998 17.3337 8.99984C17.3337 4.39984 13.6003 0.666504 9.00033 0.666504ZM13.167 9.83317H4.83366V8.1665H13.167V9.83317Z' fill='%23FA2600'/%3E%3C/svg%3E%0A");
}
.Product__value div[note] {
  position: relative;
  margin: 0 auto 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  background-color: #e6e6e6;
  border-radius: 100%;
  background-size: 100% 100%;
  background-position: 0 0;
  background-image: conic-gradient(
    from 0deg at 50% 50%,
    #f5f3f3 var(--setprogressbar),
    #f5f3f3 var(--setprogressbar)
  );
}
.Product__value div[note].excellent {
  background-image: conic-gradient(
    from 0deg at 50% 50%,
    var(--colorexcellent) var(--setprogressbar),
    #073aff00 var(--setprogressbar)
  );
}
.Product__value div[note].bon {
  background-image: conic-gradient(
    from 0deg at 50% 50%,
    var(--colorbon) var(--setprogressbar),
    #073aff00 var(--setprogressbar)
  );
}
.Product__value div[note].moyen {
  background-image: conic-gradient(
    from 0deg at 50% 50%,
    var(--colormoyen) var(--setprogressbar),
    #073aff00 var(--setprogressbar)
  );
}
.Product__value div[note].mauvais {
  background-image: conic-gradient(
    from 0deg at 50% 50%,
    var(--colormauvais) var(--setprogressbar),
    #073aff00 var(--setprogressbar)
  );
}
.Product__value div[note].nul {
  background-image: conic-gradient(
    from 0deg at 50% 50%,
    var(--colornul) var(--setprogressbar),
    #073aff00 var(--setprogressbar)
  );
}
.Product__value div[note]:before {
  content: "";
  position: absolute;
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background-color: #fff;
}
.Product__value div[note] span {
  position: relative;
  font-size: 18px;
  font-weight: 700;
}
.Product__value div[notecritere] {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 20px auto 5px;
  width: 60px;
  height: 15px;
  padding: 4px;
  border-radius: 10px;
  background-color: #e6e6e6;
}
.Product__value div[notecritere]:before {
  display: block;
  content: "";
  border-radius: 10px;
  width: var(--setprogressbar);
  height: 100%;
  background-color: #fff;
  border: 1px solid #afafaf;
}
.Product__value div[notecritere] span {
  display: block;
  position: absolute;
  text-align: center;
  width: 100%;
  font-size: 14px;
  top: -25px;
}
.Product__value div[notecritere].excellent:before {
  background-color: var(--colorexcellent);
}
.Product__value div[notecritere].bon:before {
  background-color: var(--colorbon);
}
.Product__value div[notecritere].moyen:before {
  background-color: var(--colormoyen);
}
.Product__value div[notecritere].mauvais:before {
  background-color: var(--colormauvais);
}
.Product__value div[notecritere].nul:before {
  background-color: var(--colornul);
}