.bloc-mosaique-elements {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin-left: auto;
	margin-right: auto;

	&.col1 {
		grid-template-columns: repeat(1, 1fr);
	}

	&.col3 {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Gestion des alignements WordPress */
.bloc-mosaique-elements.alignwide {
	max-width: var(--wp--style--global--wide-size, 1200px);
}

.bloc-mosaique-elements.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.bloc-mosaique-elements.aligncenter {
	margin-left: auto;
	margin-right: auto;
}

.bloc-mosaique-elements.alignleft {
	float: left;
	margin-right: 2rem;
}

.bloc-mosaique-elements.alignright {
	float: right;
	margin-left: 2rem;
}

/* Si le bloc n'a pas d'alignement spécifique */
.bloc-mosaique-elements:not(.alignwide):not(.alignfull):not(.aligncenter):not(
		.alignleft
	):not(.alignright) {
	max-width: var(--wp--style--global--content-size, 800px);
}

.bloc-mosaique-element {
	position: relative;
	text-decoration: none;
	color: inherit;
	display: block;
}

a.bloc-mosaique-element,
a.bloc-mosaique-element:hover,
a.bloc-mosaique-element:focus {
	text-decoration: none;
	color: inherit;
}
.bloc-mosaique-element .bloc-mosaique-element-content {
	min-height: 600px;
	flex: 1;
	display: flex;
	position: relative;
	border-radius: 20px;

	&::before {
		content: "";
		display: block;
		width: 165px;
		height: 80px;
		background: url(../../assets/images/mask4-top-left.svg) no-repeat center
			center;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
	}

	& > * {
		border-radius: 20px;
	}
}

.bloc-mosaique-element .counter {
	position: absolute;
	top: 0;
	left: 0;
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--gris);
	border-color: var(--wp--preset--color--gris);
	width: 90px;
	height: 20px;
	border-radius: 20px;
	padding: 5px 20px;
	z-index: 3;
	text-align: center;
	border: 1px solid var(--wp--preset--color--gris);
	line-height: 1.1rem;
	font-size: 0.8rem;
}

.bloc-mosaique-element .bloc-mosaique-element-content img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
}

.bloc-mosaique-element
	.bloc-mosaique-element-content
	.bloc-mosaique-element-presentation {
	position: relative;
	z-index: 2;
	background-color: var(--wp--preset--color--gris);
	color: var(--wp--preset--color--white) !important;
	opacity: 0;
	transition: opacity 0.3s ease;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 40px;
	margin: 0;

	a {
		color: var(--wp--preset--color--white) !important;
	}

	& > p {
		color: var(--wp--preset--color--white) !important;
	}
}

body.couleur-accent-vert {
	.bloc-mosaique-element
		.bloc-mosaique-element-content
		.bloc-mosaique-element-presentation {
		background-color: color-mix(
			in srgb,
			var(--wp--preset--color--vert-medium) 60%,
			transparent
		);
	}
	.bloc-mosaique-element .bloc-mosaique-element-content {
		background-color: var(--wp--preset--color--vert-medium);
	}
}
body.couleur-accent-violet {
	.bloc-mosaique-element
		.bloc-mosaique-element-content
		.bloc-mosaique-element-presentation {
		background-color: color-mix(
			in srgb,
			var(--wp--preset--color--third) 60%,
			transparent
		);
	}

	.bloc-mosaique-element .bloc-mosaique-element-content {
		background-color: var(--wp--preset--color--third);
	}
}
body.couleur-accent-bleuclair {
	.bloc-mosaique-element
		.bloc-mosaique-element-content
		.bloc-mosaique-element-presentation {
		background-color: color-mix(
			in srgb,
			var(--wp--preset--color--bleu-medium) 60%,
			transparent
		);
	}
}
body.couleur-accent-vertclair {
	.bloc-mosaique-element
		.bloc-mosaique-element-content
		.bloc-mosaique-element-presentation {
		background-color: color-mix(
			in srgb,
			var(--wp--preset--color--bleu-clair) 80%,
			transparent
		);
	}
	.bloc-mosaique-element .bloc-mosaique-element-content {
		background-color: var(--wp--preset--color--bleu-clair);
	}
}
body.couleur-accent-orange {
	.bloc-mosaique-element
		.bloc-mosaique-element-content
		.bloc-mosaique-element-presentation {
		background-color: color-mix(
			in srgb,
			var(--wp--preset--color--secondary) 60%,
			transparent
		);
	}
	.bloc-mosaique-element .bloc-mosaique-element-content {
		background-color: var(--wp--preset--color--secondary);
	}
}
body.couleur-accent-rose {
	.bloc-mosaique-element
		.bloc-mosaique-element-content
		.bloc-mosaique-element-presentation {
		background-color: color-mix(
			in srgb,
			var(--wp--preset--color--rose) 60%,
			transparent
		);
	}
	.bloc-mosaique-element .bloc-mosaique-element-content {
		background-color: var(--wp--preset--color--rose);
	}
}
.bloc-mosaique-element .bloc-mosaique-element-title {
	margin-top: 10px;
	margin-bottom: 20px;
	display: block;
}
/* Affiche le bloc au survol */
.bloc-mosaique-element:hover
	.bloc-mosaique-element-content
	.bloc-mosaique-element-presentation {
	opacity: 1;
}

@media (width < 768px) {
	.bloc-mosaique-elements {
		grid-template-columns: 1fr;
		width: 90%;

		.bloc-mosaique-element {
			flex-direction: column-reverse;
			display: flex;

			.bloc-mosaique-element-content {
				flex-direction: column;
				min-height: initial;

				img {
					max-height: 300px;
					object-fit: cover;
					object-position: center;
					position: initial;
					top: initial;
					left: initial;
					bottom: 0;
					right: 0;
					border-bottom-left-radius: 0;
					border-bottom-right-radius: 0;
				}
				.bloc-mosaique-element-presentation {
					min-height: 150px;
					position: relative;
					top: initial;
					left: initial;
					bottom: 0;
					right: 0;
					display: block;
					opacity: 1;
					background-color: initial;
					border-top-left-radius: 0;
					border-top: 0;
					border-top-right-radius: 0;
					padding-top: 1rem;
					padding-bottom: 5rem;

					a {
						color: var(--wp--preset--color--white) !important;
					}

					& > p {
						color: var(--wp--preset--color--white) !important;
					}

					ul {
						padding-left: 0;
						li {
							font-size: var(--wp--preset--font-size--default);
						}
					}

					& > * {
						color: var(--wp--preset--color--white) !important;
						opacity: 1;
					}
				}
			}
		}

		&.col3 {
			grid-template-columns: 1fr;
		}
	}

	.bloc-mosaique-elements.alignfull {
		width: 97%;
	}
}