/* Barre accès rapide */

.boxContainer {
	display: flex;
	justify-content: center;
	width: 100%;
	margin: 2rem 0;
}
.boxContainer p {
	font-size: 1.3vw;
	font-weight: bold;
	margin: 0;
	text-align: center;
}
.flip-card {
	background-color: transparent;
	width: 10vw;
	height: 10vw;
	margin: 0 10px;
	perspective: 1000px; /* Remove this if you don't want the 3D effect */
	cursor: pointer;
}
.flip-card img {
	max-width: 45%;
}
.flip-card-inner {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	transition: transform 1s;
	transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
	transform: rotateY(180deg);
}
.flip-card.attrapeLaMouche {
	animation: ici_ici 5s ease infinite;
	box-shadow: 0 0 2px 0 var(--blue-theme);
}
.flip-card.attrapeLaMouche:last-child {
	animation-delay: 0.5s;
}
@keyframes ici_ici {
	0%,
	20% {
		transform: translateY(20px);
		box-shadow: 0 0 16px 0 var(--blue-theme);
	}
	10%,
	30% {
		box-shadow: 0 0 8px 0 var(--blue-theme);
		transform: translateY(-20px);
	}
	40% {
		transform: translateY(0);
		box-shadow: 0 0 0px 0 var(--blue-theme);
	}
}

.flip-card-front,
.flip-card-back {
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden; /* Safari */
	backface-visibility: hidden;
}
.flip-card-front {
	background-color: white;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.flip-card-back {
	background-color: var(--blue-theme);
	color: var(--yellow-theme);
	transform: rotateY(180deg);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.fc_active {
	background-color: var(--blue-theme);
	color: var(--yellow-theme);
	transform: rotateY(0);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.fc_active .flip-card-front {
	background-color: var(--blue-theme);
	transform: rotateY(180deg);
	color: var(--yellow-theme);
}
.fc_active .flip-card-back {
	transform: none;
}
.flip-card-inner .bubbleInfo,
.fc_active:hover .flip-card-inner {
	transform: rotateY(0);
}
.lastFlip:hover .bubbleInfo {
	display: block;
}
.bubbleInfo {
	display: none;
	position: absolute;
	background-color: white;
	top: 0;
	left: 0;
	transform: translate(-95%, -70%);
	width: 30vw;
	padding: 8px;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	border-bottom-left-radius: 8px;
	border: 2px var(--blue-theme) solid;
}

@media all and (max-width: 1200px) {
	/* .flip-card {
        width: 12vw;
        height: 12vw;
    } */
	.boxContainer p {
		font-size: 1.2vw;
	}
}
@media all and (max-width: 900px) {
	.boxContainer {
		flex-wrap: wrap;
		margin: 0.5rem 0;
	}
	.flip-card {
		margin: 1vw;
		width: 20vw;
		height: 20vw;
	}
	.boxContainer p {
		font-size: 2.4vw;
	}
}
@media all and (max-width: 500px) {
	.flip-card {
		width: 28vw;
		height: 28vw;
	}
	.boxContainer p {
		font-size: 3vw;
	}
}
