/*
Encadrés « Note biaisée » — styles du bloc Groupe.

Le biais reprend celui de l'en-tête de page et des miniatures de réalisation.
Deux sens : le bord haut monte vers la droite, ou l'inverse. Le biais est donné
en rem plutôt qu'en pourcentage pour rester constant quelle que soit la hauteur
du texte.
*/

.wp-block-group.is-style-note-biaisee,
.wp-block-group.is-style-note-biaisee-inverse {
	--note-biais: 1.5rem;

	position: relative;
	padding-block: calc(var(--note-biais) + var(--wp--preset--spacing--40, 1.5rem));
	padding-inline: var(--wp--preset--spacing--40, 1.5rem);
	background-color: var(--wp--preset--color--aubergine);
	color: var(--wp--preset--color--snow);
}

/* Bord haut montant vers la droite. */
.wp-block-group.is-style-note-biaisee {
	clip-path: polygon(
		0 var(--note-biais),
		100% 0,
		100% calc(100% - var(--note-biais)),
		0 100%
	);
}

/* Bord haut descendant vers la droite. */
.wp-block-group.is-style-note-biaisee-inverse {
	clip-path: polygon(
		0 0,
		100% var(--note-biais),
		100% 100%,
		0 calc(100% - var(--note-biais))
	);
}

.wp-block-group.is-style-note-biaisee a,
.wp-block-group.is-style-note-biaisee-inverse a {
	color: var(--wp--preset--color--lime);
}

.wp-block-group.is-style-note-biaisee > :first-child,
.wp-block-group.is-style-note-biaisee-inverse > :first-child {
	margin-block-start: 0;
}

.wp-block-group.is-style-note-biaisee > :last-child,
.wp-block-group.is-style-note-biaisee-inverse > :last-child {
	margin-block-end: 0;
}

@media (min-width: 782px) {
	.wp-block-group.is-style-note-biaisee,
	.wp-block-group.is-style-note-biaisee-inverse {
		--note-biais: 2.25rem;

		padding-inline: var(--wp--preset--spacing--50, 3rem);
	}
}