.wp-block-details.is-style-custom {
  padding: 1rem 2rem;

  border-radius: var(--border-radius);
  box-shadow: 0 0 5px rgba(0, 0, 0, .16);

  @media (prefers-reduced-motion: no-preference) {
    interpolate-size: allow-keywords;
  }

  &::details-content {
    overflow-y: clip;

    transition: content-visibility 1s allow-discrete,
    opacity 1s,
    block-size 1s;

    opacity: 0;

    block-size: 0;
  }

  summary::-webkit-details-marker {
    display: none;
  }

  summary {
    font-weight: 900;

    position: relative;

    margin-bottom: 0;
    padding-right: 1.5rem;

    list-style: none; /* Évite la puce dans certains navigateurs */

    content: '';

    anchor-name: --summary;
    &::marker {
      content: '';
    }

    &:after {
      position: absolute;
      top: 0;
      right: .1rem;
      bottom: 12px;

      width: 1.3rem;
      height: 1.3rem;

      content: '';
      transition: var(--transition-all);

      background-color: currentColor;

      mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z"/></svg>');
      mask-repeat: no-repeat;
      mask-size: 100%;
      mask-position: center;
    }
  }

  &[open]::details-content {
    opacity: 1;

    block-size: auto;
  }

  &[open] summary {
    &:after {
      transform: rotate(-180deg);
      transform-origin: 50%;

      mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path d="M5 11v2h14v-2z"/></svg>');
    }
  }
}

.wp-block-details.is-style-custom-2 {
  border-bottom: 1px solid rgba(var(--color-orange-rgb), .5);

  @media (prefers-reduced-motion: no-preference) {
    interpolate-size: allow-keywords;
  }

  &::details-content {
    overflow-y: clip;

    transition: content-visibility 1s allow-discrete,
    opacity 1s,
    padding 1s,
    block-size 1s;

    opacity: 0;

    block-size: 0;
  }

  summary::-webkit-details-marker {
    display: none;
  }

  summary {
    font-weight: 900;

    position: relative;

    margin-bottom: 0;
    padding-bottom: .9rem;

    list-style: none; /* Évite la puce dans certains navigateurs */

    content: '';
    transition: padding 1s;

    anchor-name: --summary;

    &::marker {
      content: '';
    }

    &:after {
      position: absolute;
      top: 0;
      right: .1rem;
      bottom: 12px;

      width: 1.3rem;
      height: 1.3rem;

      content: '';
      transition: var(--transition-all);

      background-color: currentColor;

      mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z"/></svg>');
      mask-repeat: no-repeat;
      mask-size: 100%;
      mask-position: center;
    }
  }

  &[open]::details-content {
    padding-bottom: 1rem;

    opacity: 1;

    block-size: auto;
  }

  &[open] summary {
    &:after {
      transform: rotate(-180deg);
      transform-origin: 50%;

      mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path d="M5 11v2h14v-2z"/></svg>');
    }
  }
}