.service-card {
	perspective: 1000px;
	width: 300px;
	height: 200px;
	position: relative;
}

.speciality-card {
	perspective: 2500px;
	width: 450px;
	height: 350px;
	position: relative;
}

.card-inner {
	width: 100%;
	height: 100%;
	transition: transform .6s;
	transform-style: preserve-3d;
	position: absolute;
}

.service-card:hover .card-inner {
	transform: rotateY(180deg);
}

.speciality-card:hover .card-inner {
	transform: rotateY(180deg);
}

.card-front, .card-back {
	width: 100%;
	height: 100%;
	position: absolute;
	backface-visibility: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
}

.card-front {
	background-size: cover;
	background-position: center;
}

.card-back {
	background-color: #ffffff;
	transform: rotateY(180deg);
	padding: 15px;
/* Augmente l’espace intérieur */
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	border-radius: 10px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin: 0;
}

/* Texte qui arrive par la droite */
.text-slide {
	opacity: 0;
	transform: translateX(200px);
	animation: slide-in 2s ease-out forwards;
}

@keyframes slide-in {
	from {
		opacity: 0;
		transform: translateX(100px);
	}
	
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* Image qui se dévoile avec un effet de fondu */
.image-fade {
	opacity: 0;
	filter: grayscale(100%);
	animation: fade-in 2s ease-out forwards;
}

@keyframes fade-in {
	from {
		opacity: 0;
	}
	
	to {
		opacity: 1;
	}
}

/* Texte qui arrive par la droite */
.text-slide {
	opacity: 0;
	transform: translateX(200px);
	animation: slide-in 2s ease-out forwards;
}

@keyframes slide-in {
	from {
		opacity: 0;
		transform: translateX(200px);
	}
	
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* Texte qui arrive par la gauche */
.text-slide-l {
	opacity: 0;
	transform: translateX(200px);
	animation: slide-out 2s ease-out forwards;
}

@keyframes slide-out {
	from {
		opacity: 0;
		transform: translateX(-200px);
	}
	
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.slide-in {
	opacity: 0;
	transform: translateX(200px);
	transition: opacity 1s ease-out, transform 1s ease-out;
}

.slide-in.show {
	opacity: 1;
	transform: translateX(0);
}