/* --- Style PRESENTATION- ---------------------------------- */


.chiffre-cle {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8f5e9;
    padding: 20px;
    border-radius: 10px;
    margin: 20px 0;
}

.chiffre-cle .nombre {
    font-size: 3rem;
    font-weight: bold;
    color: var(--color-alfa-dark);
    margin-right: 20px;
}

.separateur { border: 0; border-top: 1px solid #ddd; margin: 40px 0; }

.stats-liste { display: flex; justify-content: space-around; list-style: none; padding: 0; text-align: center; }
.stats-liste li { font-size: 1.1rem; }
.stats-liste strong { display: block; font-size: 2rem; color: var(--color-alfa-dark); }

/* --- GRILLE DE LIENS --- */
.grille-liens { display:flex ; gap: 20px; background: #f9f9f9; padding: 20px 40px; border-radius: 8px; justify-content: space-around;}
.colonne-liens {width:40%;}
.colonne-liens h3 { font-size: 1rem; border-bottom: 1px solid #ccc; padding-bottom: 5px; }
.colonne-liens ul { list-style: "→ "; padding-left: 20px; }
.colonne-liens a { color: #333; text-decoration: none; transition: 0.3s; }
.colonne-liens a:hover { color: var(--color-alfa-dark); padding-left: 5px; }

/* --- LOGOS EN SCALE DE GRISES --- */
.syndicats-logos { margin-top: 50px; text-align: center; }

.logos-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    justify-items: center; 
    align-items: center;   
    gap: 20px;
    margin-top: 20px;
    max-width: 700px; 
    margin-left: auto;
    margin-right: auto;
}


.logos-container img {
    max-width: 120px; /* Tamaño uniforme */
    height: auto;
    filter: grayscale(100%); /* Todo gris */
    opacity: 0.7; /* Más suave */
    transition: all 0.4s ease;
}

.logos-container img:hover {
    filter: grayscale(0%); /* Vuelve el color */
    opacity: 1;
    transform: scale(1.1); /* Agranda un poquito */
}

.petits-caracteres { font-size: 0.8rem; color: #777; margin-top: 15px; }

 /*** RESPONSIVE ***/
@media (max-width: 700px) {
    .logos-container {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en tablets/móvil */
    }
}