.wp-block-details.is-style-custom-style {
	@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-size: 1.1em;
		font-weight: 700;
		/* Pin the custom marker to the container */

		position: relative;

		padding: 1rem 1rem 1rem 0;

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

		content: "";
		text-align: left;

		border-bottom: 1px solid var(--color-primary);
		/* Register summary as an anchor element */

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

		&:after {
			/* Anchor the shape to the summary */
			position: absolute;
			top: 1.2rem;
			right: 0.1rem;
			bottom: 12px;

			width: 1.3rem;
			height: 1.3rem;
			/* Custom marker dimensions */

			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="m12 13.171 4.95-4.95 1.414 1.415L12 16 5.636 9.636 7.05 8.222l4.95 4.95Z"/></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%;
		}
	}
}