.m-avis {
  @media (max-width: 767px) {
    overflow-x: clip;
  }

  .m-avis__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 64px;
    text-align: center;

    @media (max-width: 767px) {
      gap: 32px;
    }
  }

  .m-avis__titre {
    font-family: var(--wp--preset--font-family--primary);
    color: var(--wp--preset--color--secondary);
    font-size: 32px;
    font-weight: var(--wp--custom--font-weight--semi-bold);
    line-height: 40px;
    margin: 0;
  }

  .m-avis__logo-lien {
    display: inline-block;
    text-decoration: none;
  }

  .m-avis__logo {
    width: 102px;
    height: auto;
    display: block;
  }

  .m-avis__logo-texte {
    font-family: var(--wp--preset--font-family--primary);
    color: var(--wp--preset--color--secondary);
    font-size: 20px;
    font-weight: var(--wp--custom--font-weight--semi-bold);
  }

  .m-avis__slider {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    @media (max-width: 767px) {
      flex-wrap: wrap;
      justify-content: center;
      gap: 32px 20px;
    }
  }

  .m-avis__stars {
    --etoile-grise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15' fill='none'%3E%3Cpath d='M7.47588 0.00976562C7.56932 0.022843 7.66041 0.0491009 7.74671 0.0872396L7.87236 0.153646L7.9876 0.236328C8.06017 0.296811 8.12381 0.367264 8.17705 0.445313L8.24866 0.567708L9.78903 3.6875L9.83395 3.76563C9.88342 3.84117 9.94608 3.90751 10.0195 3.96094C10.1175 4.03219 10.2317 4.07876 10.3515 4.09635L13.7949 4.60026C13.9361 4.62074 14.0701 4.67076 14.1901 4.74609L14.3053 4.82943L14.4069 4.92839C14.4701 4.99879 14.523 5.07772 14.5644 5.16276L14.6178 5.29427L14.6523 5.43229C14.6769 5.57175 14.6721 5.71566 14.638 5.85417C14.5924 6.03881 14.4962 6.20705 14.36 6.33984L11.8691 8.76562C11.7823 8.85022 11.7172 8.95445 11.6797 9.06966C11.6422 9.18485 11.6333 9.30767 11.6536 9.42708L12.2409 12.8509L12.2558 12.9928C12.2607 13.135 12.2359 13.2773 12.1823 13.4102C12.1106 13.5874 11.9906 13.7412 11.8359 13.8535C11.6812 13.9658 11.4979 14.0323 11.3073 14.0456C11.1165 14.0588 10.9259 14.0182 10.7571 13.9284L7.68161 12.3112C7.57444 12.255 7.45496 12.2259 7.33395 12.2259C7.21299 12.2259 7.09341 12.2544 6.98629 12.3105L3.90947 13.9284C3.7408 14.0176 3.55099 14.0585 3.36064 14.0449C3.17037 14.0314 2.98759 13.965 2.8333 13.8529C2.67897 13.7406 2.55915 13.5871 2.4876 13.4102C2.4339 13.2773 2.40917 13.135 2.41403 12.9928L2.42835 12.8516L3.01559 9.42773L3.02536 9.33789C3.02977 9.24752 3.01766 9.15684 2.98955 9.07031C2.96143 8.98383 2.91795 8.90317 2.86129 8.83268L2.8001 8.76562L0.30921 6.34115C0.172835 6.20874 0.0766126 6.04057 0.0305645 5.85612C-0.0156764 5.67077 -0.00950115 5.47597 0.0494448 5.29427L0.10283 5.16211C0.165177 5.03419 0.25414 4.92034 0.363898 4.82812L0.479132 4.74414C0.559492 4.6939 0.646525 4.65514 0.737596 4.62891L0.876919 4.59896L4.31767 4.09635L4.40622 4.07747C4.49353 4.05375 4.5761 4.0144 4.6497 3.96094C4.74769 3.88975 4.82716 3.79607 4.88082 3.6875L6.41989 0.568359L6.49215 0.445313C6.57189 0.328444 6.67515 0.228856 6.79619 0.153646L6.92184 0.0872396C7.05135 0.0299458 7.19195 0 7.3346 0L7.47588 0.00976562ZM6.07614 4.27734C5.92681 4.57956 5.70627 4.84156 5.43356 5.03971C5.16071 5.2379 4.84344 5.36616 4.50973 5.41471L1.69267 5.82682L3.73043 7.81055L3.81832 7.90104C4.01638 8.11886 4.16642 8.37668 4.25778 8.65755C4.34912 8.93845 4.37902 9.23533 4.34697 9.528L4.32939 9.653L3.84892 12.4551L6.3665 11.1315C6.66489 10.9748 6.99693 10.8926 7.33395 10.8926C7.67104 10.8926 8.0036 10.9741 8.30205 11.1309L10.8203 12.4551L10.3392 9.653C10.2823 9.32044 10.3077 8.97837 10.4121 8.65755C10.5165 8.33672 10.6971 8.04601 10.9388 7.81055L12.9746 5.82747L10.1582 5.41536C9.82504 5.36644 9.50798 5.23771 9.23564 5.03971C8.96324 4.8416 8.74295 4.57995 8.59371 4.278L7.33395 1.72786L6.07614 4.27734Z' fill='%23D5DAE3'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.43356 5.03971C5.70627 4.84156 5.92681 4.57956 6.07614 4.27734L7.33395 1.72786L8.59371 4.278C8.74295 4.57995 8.96324 4.8416 9.23564 5.03971C9.50798 5.23771 9.82504 5.36644 10.1582 5.41536L12.9746 5.82747L10.9388 7.81055C10.6971 8.04601 10.5165 8.33672 10.4121 8.65755C10.3077 8.97837 10.2823 9.32044 10.3392 9.653L10.8203 12.4551L8.30205 11.1309C8.0036 10.9741 7.67104 10.8926 7.33395 10.8926C6.99693 10.8926 6.66489 10.9748 6.3665 11.1315L3.84892 12.4551L4.32939 9.653L4.34697 9.528C4.37902 9.23533 4.34912 8.93845 4.25778 8.65755C4.16642 8.37668 4.01638 8.11886 3.81832 7.90104L3.73043 7.81055L1.69267 5.82682L4.50973 5.41471C4.84344 5.36616 5.16071 5.2379 5.43356 5.03971Z' fill='%23D5DAE3'/%3E%3C/svg%3E");
    --etoile-orange: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15' fill='none'%3E%3Cpath d='M7.47588 0.00976562C7.56932 0.022843 7.66041 0.0491009 7.74671 0.0872396L7.87236 0.153646L7.9876 0.236328C8.06017 0.296811 8.12381 0.367264 8.17705 0.445313L8.24866 0.567708L9.78903 3.6875L9.83395 3.76563C9.88342 3.84117 9.94608 3.90751 10.0195 3.96094C10.1175 4.03219 10.2317 4.07876 10.3515 4.09635L13.7949 4.60026C13.9361 4.62074 14.0701 4.67076 14.1901 4.74609L14.3053 4.82943L14.4069 4.92839C14.4701 4.99879 14.523 5.07772 14.5644 5.16276L14.6178 5.29427L14.6523 5.43229C14.6769 5.57175 14.6721 5.71566 14.638 5.85417C14.5924 6.03881 14.4962 6.20705 14.36 6.33984L11.8691 8.76562C11.7823 8.85022 11.7172 8.95445 11.6797 9.06966C11.6422 9.18485 11.6333 9.30767 11.6536 9.42708L12.2409 12.8509L12.2558 12.9928C12.2607 13.135 12.2359 13.2773 12.1823 13.4102C12.1106 13.5874 11.9906 13.7412 11.8359 13.8535C11.6812 13.9658 11.4979 14.0323 11.3073 14.0456C11.1165 14.0588 10.9259 14.0182 10.7571 13.9284L7.68161 12.3112C7.57444 12.255 7.45496 12.2259 7.33395 12.2259C7.21299 12.2259 7.09341 12.2544 6.98629 12.3105L3.90947 13.9284C3.7408 14.0176 3.55099 14.0585 3.36064 14.0449C3.17037 14.0314 2.98759 13.965 2.8333 13.8529C2.67897 13.7406 2.55915 13.5871 2.4876 13.4102C2.4339 13.2773 2.40917 13.135 2.41403 12.9928L2.42835 12.8516L3.01559 9.42773L3.02536 9.33789C3.02977 9.24752 3.01766 9.15684 2.98955 9.07031C2.96143 8.98383 2.91795 8.90317 2.86129 8.83268L2.8001 8.76562L0.30921 6.34115C0.172835 6.20874 0.0766126 6.04057 0.0305645 5.85612C-0.0156764 5.67077 -0.00950115 5.47597 0.0494448 5.29427L0.10283 5.16211C0.165177 5.03419 0.25414 4.92034 0.363898 4.82812L0.479132 4.74414C0.559492 4.6939 0.646525 4.65514 0.737596 4.62891L0.876919 4.59896L4.31767 4.09635L4.40622 4.07747C4.49353 4.05375 4.5761 4.0144 4.6497 3.96094C4.74769 3.88975 4.82716 3.79607 4.88082 3.6875L6.41989 0.568359L6.49215 0.445313C6.57189 0.328444 6.67515 0.228856 6.79619 0.153646L6.92184 0.0872396C7.05135 0.0299458 7.19195 0 7.3346 0L7.47588 0.00976562ZM6.07614 4.27734C5.92681 4.57956 5.70627 4.84156 5.43356 5.03971C5.16071 5.2379 4.84344 5.36616 4.50973 5.41471L1.69267 5.82682L3.73043 7.81055L3.81832 7.90104C4.01638 8.11886 4.16642 8.37668 4.25778 8.65755C4.34912 8.93845 4.37902 9.23533 4.34697 9.528L4.32939 9.653L3.84892 12.4551L6.3665 11.1315C6.66489 10.9748 6.99693 10.8926 7.33395 10.8926C7.67104 10.8926 8.0036 10.9741 8.30205 11.1309L10.8203 12.4551L10.3392 9.653C10.2823 9.32044 10.3077 8.97837 10.4121 8.65755C10.5165 8.33672 10.6971 8.04601 10.9388 7.81055L12.9746 5.82747L10.1582 5.41536C9.82504 5.36644 9.50798 5.23771 9.23564 5.03971C8.96324 4.8416 8.74295 4.57995 8.59371 4.278L7.33395 1.72786L6.07614 4.27734Z' fill='%23D69107'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.43356 5.03971C5.70627 4.84156 5.92681 4.57956 6.07614 4.27734L7.33395 1.72786L8.59371 4.278C8.74295 4.57995 8.96324 4.8416 9.23564 5.03971C9.50798 5.23771 9.82504 5.36644 10.1582 5.41536L12.9746 5.82747L10.9388 7.81055C10.6971 8.04601 10.5165 8.33672 10.4121 8.65755C10.3077 8.97837 10.2823 9.32044 10.3392 9.653L10.8203 12.4551L8.30205 11.1309C8.0036 10.9741 7.67104 10.8926 7.33395 10.8926C6.99693 10.8926 6.66489 10.9748 6.3665 11.1315L3.84892 12.4551L4.32939 9.653L4.34697 9.528C4.37902 9.23533 4.34912 8.93845 4.25778 8.65755C4.16642 8.37668 4.01638 8.11886 3.81832 7.90104L3.73043 7.81055L1.69267 5.82682L4.50973 5.41471C4.84344 5.36616 5.16071 5.2379 5.43356 5.03971Z' fill='%23D69107'/%3E%3C/svg%3E");
    position: relative;
    display: inline-block;
    width: 90px;
    height: 15px;
    background: var(--etoile-grise) repeat-x left center / 18px 15px;

    &::before {
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
      width: var(--rating, 0%);
      background: var(--etoile-orange) repeat-x left center / 18px 15px;
    }
  }

  .m-avis__track {
    --gap: 128px;
    --visibles: 5;
    flex: 0 1 auto;
    width: calc(var(--visibles) * 164px + (var(--visibles) - 1) * var(--gap));
    max-width: 100%;
    min-width: 0;
    display: flex;
    gap: var(--gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;

    &::-webkit-scrollbar {
      display: none;
    }

    @media (max-width: 1560px) {
      --visibles: 4;
    }

    @media (max-width: 1200px) {
      --visibles: 3;
    }

    @media (max-width: 991px) {
      --visibles: 2;
    }

    @media (max-width: 767px) {
      --gap: 24px;
      order: 1;
      flex: 0 0 auto;
      width: 100vw;
      max-width: none;
      margin-inline: calc(50% - 50vw);
      cursor: grab;
    }
  }

  .m-avis__card {
    flex: 0 0 164px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    scroll-snap-align: start;

    @media (max-width: 767px) {
      flex-basis: 58%;
      scroll-snap-align: center;
    }
  }

  .m-avis__card-titre {
    color: var(--wp--preset--color--secondary);
    font-size: 16px;
    font-weight: var(--wp--custom--font-weight--bold);
    line-height: 24px;
    margin: 0;
  }

  .m-avis__card-texte {
    color: #354A6F;
    font-size: 14px;
    line-height: 20px;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .m-avis__nav {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 57px;
    height: 44px;
    border: none;
    border-radius: 50px;
    background-color: var(--wp--preset--color--primary);
    cursor: pointer;
    transition: background-color 0.2s ease-in;

    &:hover {
      background-color: var(--wp--preset--color--primary-darken);
    }

    @media (max-width: 767px) {
      order: 2;
    }
  }

  .m-avis__nav--next svg {
    transform: rotate(180deg);
  }
}