/* ---------------------------------- card ---------------------------------- */
:root {
	--card-10-height: 12.2rem;
	--card-10-padding: 1rem;
	--card-10-arrow-mb: .4rem;
	--card-10-translateY: 1.4rem;
}
.grid-16 .wpgb-card-10:nth-child(1n + 5) {
	transform: translateY(var(--card-10-translateY)) !important;
}
.grid-16 .wpgb-card-10:nth-child(1n + 9) {
	transform: translateY(calc(var(--card-10-translateY)*2)) !important;
}
.grid-16 .wpgb-card-10:nth-child(1n + 13) {
	transform: translateY(calc(var(--card-10-translateY)*3)) !important;
}
.grid-16 .wpgb-card-10:nth-child(1n + 17) {
	transform: translateY(calc(var(--card-10-translateY)*4)) !important;
}
.wpgb-card-10 .wso-media-wrapper {
	display: grid;
	grid-template-areas:
		"area1"
		"area2";
	grid-gap: 1rem;
	padding: var(--card-10-padding) !important;
	background-color: var(--color-gray);
	border-radius: var(--intro-border-radius) !important;
	align-items: center;
	transition: var(--transition-normal) ease-in-out !important;
}
.wpgb-card-10:hover .wso-media-wrapper {
	background-color: var(--color-1);
	transition: var(--transition-normal) ease-in-out;
}
.wpgb-card-10:hover .wso-media-wrapper.Nutropia {
	background-color: var(--nutro-orange);
}
.wpgb-card-10:hover .wso-media-wrapper.Metanorm {
	background-color: var(--meta-red);
}
.wpgb-card-10:hover .wso-media-wrapper.Vis-terrena {
	background-color: var(--vis-green);
}
.wpgb-card-10:hover .wso-media-wrapper.Selomun {
	background-color: var(--selo-pink);
}
.wpgb-card-10 .wso-media-wrapper .wso-flip-image,
.wpgb-card-10 .wso-media-wrapper .image_wrapper {
	position: relative;
	grid-area: area1;
	height: var(--card-10-height);
	transition: var(--transition-normal) ease-in-out;
	z-index: 1;
}
.wpgb-card-10 .wso-media-wrapper .image_wrapper img {
	height: 100% !important;
	width: 100% !important;
	object-fit: cover;
	border-radius: var(--intro-border-radius) !important;
}
.wpgb-card-10 .wso-media-wrapper .wso-title {
	position: relative;
	grid: area2;
	min-height: calc(var(--h4-line-height)*2);
	transition: var(--transition-normal) ease-in-out;
}
#Wrapper .wpgb-card-10:hover .wso-media-wrapper .wso-title {
	color: var(--color-white) !important;
	transition: var(--transition-normal) ease-in-out;
}
.wpgb-card-10 .wso-media-wrapper .wso-title span {
	display: inline-block;
}
.wpgb-card-10 .wso-media-wrapper .wso-title::after {
	content: "";
	display: block;
	width: 1rem;
	height: 1rem;
	position: absolute;
	bottom: var(--card-10-arrow-mb);
	right: 0;
	background-image: var(--image-box-arrow-icon);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	transition: var(--transition-normal) ease-in-out;
}
.wpgb-card-10:hover .wso-media-wrapper .wso-title::after {
	background-image: var(--card-11-hover-arrow);
	transition: var(--transition-normal) ease-in-out;
}
.wpgb-card-10:hover .wso-media-wrapper .wso-title::after {
	transform: rotate(45deg);
	transition: var(--transition-normal) ease-in-out;
}
.wpgb-card-10 .wso-media-wrapper .wso-flip-image img {
	height: 60% !important;
	width: 60%;
}
.wpgb-card-10 a {
	text-decoration: unset !important;
}
/* ----------------------------- flip animation ----------------------------- */
.wpgb-card-10 .wso-media-wrapper .wso-flip-image {
	z-index: -1;
}
.wpgb-card-10:hover .wso-media-wrapper .wso-flip-image,
.wpgb-card-10:hover .wso-media-wrapper .image_wrapper {
	transition: var(--transition-normal) ease-in-out;
	transform: matrix3d(-1, 0, 0, 0,
			0, 1, 0, 0,
			0, 0, 1, 0,
			-0, 0, 0, 1);
}
.wpgb-card-10 .wso-media-wrapper .wso-flip-image {
	display: flex;
	width: calc(var(--card-10-height)/1.5);
	height: calc(var(--card-10-height)/1.5);
	margin: 0 auto;
	transition: var(--transition-normal) ease-in-out;
	transform: matrix3d(-1, 0, 0, 0,
			0, 1, 0, 0,
			0, 0, 1, 0,
			-0, 0, 0, 1);
	justify-content: center;
	align-items: center;
	background-color: var(--color-white);
	border-radius: 50%;
}
.wpgb-card-10:hover .wso-media-wrapper .wso-flip-image {
	z-index: 1;
	transform: matrix3d(1, 0, 0, 0,
			0, 1, 0, 0,
			0, 0, 1, 0,
			-0, 0, 0, 1);
}
.wpgb-card-10:hover .wso-media-wrapper .image_wrapper {
	opacity: 0;
	transition: var(--transition-normal) ease-in-out;
}
@media only screen and (max-width:767px) {
	:root {
		--card-10-height: 15.8rem;
		--card-10-padding: 1.2rem;
		--card-10-arrow-mb: .8rem;
	}
}
/* ------------------------------- bubble card ------------------------------ */
:root {
	--card-11-gap: .8rem;
	--card-11-picto-width: 3rem;
	--card-11-picto-height: 3rem;
	--card-11-wrapper-padding: .3rem;
	--card-11-wrapper-padding-right: 1rem;
	--card-11-br: 4rem;
	--card-11-arrow-height: .8rem;
	--card-11-arrow-width: .8rem;
	--card-11-arrow: url('/wp-content/uploads/2024/08/arrow-1.svg');
	--card-11-hover-arrow: url('/wp-content/uploads/2024/09/arrow-4.svg');
}
.wpgb-card-11 .wso-wrapper {
	position: relative;
	display: flex;
	width: 100%;
	flex-direction: row;
	align-items: center;
	gap: var(--card-11-gap);
	padding: var(--card-11-wrapper-padding) !important;
	padding-right: var(--card-11-wrapper-padding-right) !important;
	background-color: var(--color-gray);
	border-radius: var(--card-11-br);
	transition: var(--transition-normal) ease-in-out !important;
}
.wpgb-card-11:hover .wso-wrapper {
	cursor: pointer;
	background-color: var(--color-1);
	transition: var(--transition-normal) ease-in-out;
}
.wpgb-card-11:hover .wso-wrapper.Nutropia {
	background-color: var(--nutro-orange);
}
.wpgb-card-11:hover .wso-wrapper.Metanorm {
	background-color: var(--meta-red);
}
.wpgb-card-11:hover .wso-wrapper.Vis-terrena {
	background-color: var(--vis-green);
}
.wpgb-card-11:hover .wso-wrapper.Selomun {
	background-color: var(--selo-pink);
}
.wpgb-card-11 .wso-wrapper::after {
	content: "";
	display: block;
	min-width: var(--card-11-arrow-width);
	height: var(--card-11-arrow-height);
	background-image: var(--card-11-arrow);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	margin-left: auto;
	transition: var(--transition-normal) ease-in-out;
}
.wpgb-card-11:hover .wso-wrapper::after {
	transform: rotate(45deg);
	transition: var(--transition-normal) ease-in-out;
	background-image: var(--card-11-hover-arrow);
}
.wpgb-card-11 .wso-absolute-link {
	width: 100%;
}
.wpgb-card-11 .wso-picto-wrapper {
	display: flex;
	min-width: var(--card-11-picto-width);
	height: var(--card-11-picto-height) !important;
	align-items: center;
	justify-content: center;
	background-color: var(--color-white);
	border-radius: 50%;
}
.wpgb-card-11 .wso-picto-wrapper img {
	width: 76.66% !important;
	height: 100% !important;
}
.wpgb-card-11 .wso-h6 {
	flex-basis: 45.17%;
	transition: var(--transition-normal) ease-in-out !important;
}
#Wrapper .wpgb-card-11:hover .wso-h6 {
	color: var(--color-white) !important;
	transition: var(--transition-normal) ease-in-out;
}
@media only screen and (max-width:1499px) and (min-width: 768px) {
	.wpgb-card-10 .wso-media-wrapper .wso-title {
		--h4-font-size: 1rem;
	}
}
@media only screen and (max-width:767px) {
	.wpgb-card-10 .wso-media-wrapper {
		grid-gap: .8rem;
	}
	.wpgb-card-10 .wso-media-wrapper .wso-title::after {
		width: 1.2rem;
		height: 1.2rem;
	}
	:root {
		--card-11-gap: 1.2rem;
		--card-11-picto-width: 4.8rem;
		--card-11-picto-height: 4.8rem;
		--card-11-wrapper-padding: .4rem;
		--card-11-wrapper-padding-right: 1.6rem;
		--card-11-br: 8rem;
		--card-11-arrow-height: 1.2rem;
		--card-11-arrow-width: 1.2rem;
		--card-11-width: 18.2rem;
		--card-11-width: 22.2rem;
	}
	.wpgb-card-11 {
		--h6-font-size: 1.2rem;
		width: var(--card-11-width) !important;
	}
	#Wrapper .wpgb-card-11 .wso-h6 {
		flex-basis: 53.84%;
	}
	.wpgb-card-11 .wso-picto-wrapper img {
		width: 65% !important;
	} 
	.wso-grid-16 .wpgb-card-10 .wso-media-wrapper .wso-title {
		margin-top: 0.5rem;
		min-height: unset;
	}
}