/**
 * Bloc: Chiffres
 * CSS de structure de base
 */

.chiffres {
    padding: 80px 20px;
}

.chiffres__container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Titre de section - TT Commons Thin 60px */
.chiffres__title {
    text-align: center;
    margin-bottom: 60px;
    font-family: 'tt-commons-pro-thin', 'TT Commons Pro', sans-serif;
    font-size: 60px;
    font-weight: 100;
    line-height: 1.2;
}

/* Grille de statistiques */
.chiffres__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
}

/* Item individuel */
.chiffres__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Ligne décorative */
.chiffres__line {
    width: 100%;
    max-width: 250px;
    height: 1px;
    background-color: currentColor;
    opacity: 0.3;
}

/* Nombre - PP Neue Machina 64px */
.chiffres__number {
    font-family: var(--font-heading);
    font-size: 64px;
    font-weight: var(--fw-regular);
    margin: 30px 0;
    line-height: 1;
}

/* Description - TT Commons Thin 26px */
.chiffres__description {
    margin-top: 30px;
    font-family: 'tt-commons-pro-thin', 'TT Commons Pro', sans-serif;
    font-size: 26px;
    font-weight: 100;
    line-height: 1.4;
}

/* Couleurs de fond */
.bg-orange { background-color: #FF8000; color: #fff; }
.bg-red { background-color: #FF2600; color: #fff; }
.bg-blue { background-color: #006DFF; color: #fff; }
.bg-green { background-color: #1A4945; color: #fff; }
.bg-white { background-color: #FFFFFF; color: #000; }
.bg-black { background-color: #000000; color: #fff; }

/* Responsive - Tablette */
@media (max-width: 1024px) {
    .chiffres__title {
        font-size: 48px;
    }

    .chiffres__grid {
        gap: 40px;
    }
    
    .chiffres__number {
        font-size: 56px;
    }

    .chiffres__description {
        font-size: 22px;
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .chiffres {
        padding: 60px 20px;
    }
    
    .chiffres__title {
        font-size: 36px;
        margin-bottom: 40px;
    }
    
    .chiffres__grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    
    .chiffres__number {
        font-size: 48px;
    }
    
    .chiffres__description {
        font-size: 18px;
    }
}