/* Container Grid */
.stats-grid {
    display: flex;
    gap: 30px;
    width: 100%;
    max-width: 1162px;
    margin: 110px auto 146px;
}


/* Carte individuelle */
.stat-card {
    border-radius: 25px;
        padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
	
    width: 100%;
    /* Plus de background-color ici, c'est géré par le style inline */
}

/* Image */
.stat-image-wrapper {
        width: 100%;
    height: 165px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.stat-image-wrapper img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Typographie */
.stat-number {
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 600;
	font-size: 44px;
	line-height: 44px;
	text-align: center;
}

.stat-desc {
   font-size: 24px;
}

/* ANIMATIOs */

.stat-card {
    position: relative;
    overflow: hidden;
    border-radius: 25px;
    min-height: 300px;
    padding: 24px;
    text-align: center;
}

.stat-image-wrapper {
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 165px;

    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    transition: transform 0.45s ease, top 0.45s ease;
}

.stat-content {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    transition: transform 0.45s ease, bottom 0.45s ease;
}


.stat-card:hover .stat-image-wrapper {
    top: auto;
    bottom: 24px;
}

.stat-card:hover .stat-content {
    bottom: auto;
    top: 24px;
}

.stat-number {
    font-family: 'Raleway';
    font-weight: 600;
    font-size: 44px;
    line-height: 44px;
}

.stat-desc {
    font-size: 24px;
}

.stat-card-3:hover .stat-desc,
.stat-card-1:hover .stat-desc{
	display: none;
}

.stat-card-3:hover .stat-number,
.stat-card-1:hover .stat-number{
	font-size: 104px;
	line-height: 125%;
}

.stat-card-4:hover .stat-number{
	font-size: 34px;
	line-height: 125%;
}

.stat-card-2 .stat-content{
	width: 142px;
}

.stat-card-4 .stat-content{
	width: 189px;
}

@media (max-width: 1499px) and (min-width: 1024px) {
    
    /* 1. Shrink Container & Spacing */
    .stats-grid {
        max-width: 960px; /* Reduced from 1162px */
        gap: 20px;        /* Reduced from 30px */
        margin: 80px auto 100px; /* Reduced top/bottom margins */
    }

    /* 2. Adjust Card Height */
    .stat-card {
        min-height: 260px; /* Reduced from 300px to fit shorter screens */
        padding: 20px;
    }

    /* 3. Scale Down Image Area */
    .stat-image-wrapper {
        height: 140px; /* Reduced from 165px */
        top: 20px;
    }

    /* 4. Adapt Typography */
    .stat-number {
        font-size: 36px; /* Reduced from 44px */
        line-height: 36px;
    }

    .stat-desc {
        font-size: 18px; /* Reduced from 24px */
    }

    /* 5. Adjust Fixed Widths for centered content */
    /* We reset them to auto or slightly smaller to prevent wrapping issues */
    .stat-card-2 .stat-content {
        width: 120px; /* Reduced from 142px */
    }
    
    .stat-card-4 .stat-content {
        width: 160px; /* Reduced from 189px */
    }

    /* 6. Adjust Hover Animations positions */
    .stat-card:hover .stat-image-wrapper {
        bottom: 20px;
    }

    .stat-card:hover .stat-content {
        top: 20px;
    }

    .stat-content {
        bottom: 20px;
    }

    /* 7. Adjust Huge Hover Fonts */
    /* 104px is too big for a 1280px screen grid, scaling down */
    .stat-card-3:hover .stat-number,
    .stat-card-1:hover .stat-number {
        font-size: 72px; /* Reduced from 104px */
    }

    .stat-card-4:hover .stat-number {
        font-size: 28px; /* Reduced from 34px */
    }
}
@media (max-width: 768px) {
    .stats-grid {
		display: flex;
		gap: 8px;
		width: 100%;
		flex-wrap: wrap;
	}
	.stat-card{
		width: calc(50% - 4px);
		min-height: 212px;
		height: 212px;
	}
	.stat-image-wrapper {
    width: 100%;
    height: 120px;}
	.stat-number {
   font-size: 40px;
line-height: 125%;
}
.stat-desc {
    font-size: 18px;
line-height: 130%;
}
.stat-card-3{
	order: 9999;
}
.stat-card-2 .stat-number{
	margin-top: 10px;
}
.stat-card-3 .stat-number{
	margin-top: 20px;
}
.stat-card-2 .stat-content
 {
    width: 112px;
}
}