.accordion {
  --bs-accordion-bg: transparent !important;
  --bs-accordion-active-bg: transparent !important;

  --icon-arrow-2: url("../../assets/images/svg/arrow2.svg");
  --bs-accordion-btn-icon: var(--icon-arrow-2) !important;
  --bs-accordion-btn-active-icon: var(--icon-arrow-2) !important;

  .accordion-button {
    padding-left: 0;
    font-size: var(--font-size-1-5);

    &:after {
      background-image: none;
      background-color: var(--bs-accordion-color); /* Couleur dynamique */
      mask-image: var(--bs-accordion-btn-icon);
      mask-repeat: no-repeat;
      mask-size: var(--bs-accordion-btn-icon-width);
      mask-position: center;
      -webkit-mask-image: var(--bs-accordion-btn-icon);
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-size: var(--bs-accordion-btn-icon-width);
      -webkit-mask-position: center;
    }

    &:not(.collapsed) {
      --bs-accordion-border-color: none;
    }
  }

  .accordion-body {
    --bs-accordion-body-padding-x: var(--spacing-3);
    --bs-accordion-body-padding-y: var(--spacing-3);
  }

  &.accordion-dark {
    --bs-accordion-active-color: var(--bs-primary);
    --bs-accordion-color: var(--bs-primary);
    --bs-accordion-border-color: var(--bs-primary);
    --bs-accordion-btn-color: var(--bs-primary);
  }

  &.accordion-light {
    --bs-accordion-active-color: var(--bs-white);
    --bs-accordion-color: var(--bs-white);
    --bs-accordion-border-color: var(--bs-white);
    --bs-accordion-btn-color: var(--bs-white);
  }
}