html,
body {
	height: 100%;
}
body {
	background-color: #131313;
	font-family: "Inter", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	font-variation-settings: "slnt" 0;
}
[x-cloak] {
	display: none !important;
}
.logo:hover .logo-svg {
	transform: rotateY(180deg);
}
.btn--animateglowPink {
	--border-size: 6px;
	--border-angle: 0turn;
	background-image: conic-gradient(
			from var(--border-angle),
			#131313,
			#131313 50%,
			#131313
		),
		conic-gradient(
			from var(--border-angle),
			transparent 20%,
			#d33cf2,
			transparent
		);
	background-size: calc(100% - (var(--border-size) * 2))
			calc(100% - (var(--border-size) * 2)),
		cover;
	background-position: center center;
	background-repeat: no-repeat;
	animation: 8s linear infinite bg-spin;
}
@keyframes bg-spin {
	to {
		--border-angle: 1turn;
	}
}
@property --border-angle {
	syntax: "<angle>";
	inherits: true;
	initial-value: 0turn;
}
.circle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: grid;
	grid-template-areas: "layer";
	place-items: center;
	border-radius: 50%;

	--radius: 250px;
	width: 100%;
	min-height: 100%;
	transition: all 0.3s ease;
}
.stat {
	grid-area: layer;
	--d: calc(var(--i) / var(--total));
	--r-offset: -0.25turn;
	--r-amount: 1turn;
	--r: calc((var(--r-amount) * var(--d)) + var(--r-offset));
	--transform: rotate(var(--r)) translate(var(--radius))
		rotate(calc(-1 * var(--r)));
	transform: var(--transform);
}
.glass {
	background: rgba(255, 255, 255, 0.26) !important;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1) !important;
	backdrop-filter: blur(9.3px) !important;
	-webkit-backdrop-filter: blur(9.3px) !important;
}
@media (max-width: 1280px) {
	.stat {
		--radius: 25vmin !important;
	}
}
@keyframes float {
	0% {
		box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
		transform: translatey(0px);
	}
	50% {
		box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2);
		transform: translatey(-5px);
	}
	100% {
		box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
		transform: translatey(0px);
	}
}
@keyframes floatdown {
	0% {
		box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
		transform: translatey(-5px);
	}
	50% {
		box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2);
		transform: translatey(0px);
	}
	100% {
		box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
		transform: translatey(-5px);
	}
}






/* Conteneur pour les cartes */
.carte-container {
    display: flex;
    justify-content: space-between;
    gap: 20px; /* Espacement entre les cartes */
    flex-wrap: wrap; /* Permet à la ligne de passer à la ligne suivante si nécessaire */
}

/* Styles pour la carte */
.carte {
    background: rgba(255, 251, 251, 0.699); /* Blanc avec transparence */
    border-radius: 17px;
    box-shadow: 0 px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    max-width: 300px;
    text-align: center;
    flex: 1 1 calc(33.333% - 20px); /* Trois cartes par ligne avec espacement */
    box-sizing: border-box; /* Inclut le padding et la bordure dans la largeur totale */
}

/* Styles pour les titres */
.carte h2 {
    margin-top: 0;
    color: #333;
}

.carte h3 {
    margin: 10px 0;
    color: #666;
}

.carte h4 {
    margin: 5px 0;
    color: #999;
}

/* Styles pour le paragraphe et le lien */
.carte p {
    font-size: 14px;
    color: #333;
}

.carte a {
    display: inline-block;
    margin-top: 10px;
    color: #912c2c;
    text-decoration: none;
}

.carte a:hover {
    text-decoration: underline;
}