.wp-block-details.is-style-custom-style {
	padding: 1.5em;

	border-radius: 10px;
	box-shadow: 0 0 5px var(--color-gris-clair);
	@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.2rem;
		font-weight: 800;

		position: relative;

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

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

		content: "";

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

		&::before {
			/* Fond noir derrière l'icône, calé sur la même boîte que ::after */
			position: absolute;
			top: 0;
			right: 0.1rem;

			width: 1.3rem;
			height: 1.3rem;

			content: "";
			transition: var(--transition-all);
			transform: scale(1.5);
			transform-origin: center;

			border-radius: 50%;
			background-color: var(--color-jaune);
		}

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

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

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

			background-color: var(--color-white);

			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;
		}
	}

	summary + * {
		/* Espace sous le titre porté par le contenu (masqué à l'état fermé). */
		margin-top: 1rem;
	}

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

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