.accordion {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;

  border-radius: 32px 8px 32px 8px;

  background-color: var(--color-neutral--light);
}

.section-background .accordion {
  gap: 16px;
  background-color: unset;
  border-radius: unset;
}

.accordion-item {
  margin: 0;
  width: 100%;

  border: none;

  padding: 24px 24px;

  border-left: 5px solid var(--color-neutral--light);


  display: flex;
  flex-direction: column;
  justify-content: center;
}

.accordion-item[open] {
  border-left: 5px solid var(--color-secondary);
}

.accordion-item:first-child {
  border-radius: 32px 0 32px 0;
}

.accordion-item:last-child {
  border-radius: 0 8px 0 8px;
}

.section-background .accordion-item {
  border-radius: 8px;
  background-color: var(--color-white);
  padding: 16px 32px;
}

.section-background--beige .accordion-item {
  border-left: 8px solid var(--color-neutral--dark);
}

.section-background--pink .accordion-item {
  border-left: 8px solid #8E2967;
}

.accordion-item__title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: relative;
  padding: 0;
}

.accordion-item__title::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 10px;
  /* transform: translateY(-50%); */
  width: 20px;
  height: 10px;
  background-image: url("../../images/accordion/arrow.svg");
  background-size: contain;
  background-repeat: no-repeat;

  transition: transform ease 0.3s;
}

details[open] .accordion-item__title::after {
  transform: rotate(180deg);
}

.accordion-item__text-content {
  font-size: var(--heading-size-xs);
  font-weight: 600;
  margin: 0;
  max-width: 80%;
}

.section-background .accordion-item__text-content {
  font-weight: 700;
}

.section-background--pink .accordion-item__text-content {
  color: #8E2967;
}

.accordion-item__text {
  margin-top: 10px;
}

.accordion-item__text p {
  margin: 0;
  max-width: 90%;
  line-height: 165%; /* 29.7px */
}

.section-background .accordion-item__text {
  margin-top: 32px;
}

.section-background .accordion-item__text p {
  line-height: 170%; /* 30.6px */
}


@media all and (min-width: 750px) {
  .accordion-item {
    padding: 24px 32px;
  }
}


.accordion-item::details-content {
  overflow: hidden;
  height: 0;
  opacity: 0;
  transition:
    height 0.3s ease,
    opacity 0.3s ease,
    content-visibility 0.3s allow-discrete;
  transition-behavior: allow-discrete;
}

.accordion-item[open]::details-content {
  height: auto;
  opacity: 1;
}

/* Nécessaire pour animer height: 0 -> auto */
.accordion-item {
  interpolate-size: allow-keywords;
}

@starting-style {
  .accordion-item[open]::details-content {
    height: 0;
    opacity: 0;
  }
}