/* Présentation de l'entreprise */

h2{
    color: #ffc107;
}

#about-intro {
    padding: 60px 20px;
    text-align: center;
    background-color: #f9f9f9; /* Couleur de fond légère */
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    width: 100%;
    margin: auto;
}

#about-intro h2 {
    font-size: 2.5rem;
    color: #ffc107;
    margin-bottom: 15px;
}

#about-intro .intro-text {
    font-size: 1.2rem;
    color: #444;
    line-height: 1.8;
    margin-bottom: 15px;
    text-align: justify;
}

/* Vision & Mission */
/* Ajout d'un espacement entre les sections */
#about-vision-mission .row {
    margin-bottom: 40px;
}

/* Taille max pour éviter que les images soient trop grandes */
#about-vision-mission img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}


/* Valeurs */
#about-values {
    padding: 50px 20px;
    text-align: center;
}

.values-grid {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.value-item {
    width: 20%;
    text-align: center;
}

.value-item i {
    font-size: 2rem;
    color: #007bff;
}

/* Section Infrastructures */
#about-infrastructures {
    padding: 50px 20px;
    background: #f9f9f9;
    text-align: center;
}

#about-infrastructures h2 {
    font-size: 2.5rem;
    color: #ffc107;
    margin-bottom: 15px;
}

.infra-intro {
    font-size: 1.2rem;
    color: #444;
    margin-bottom: 30px;
}

/* Grille des infrastructures */
.infra-grid {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
}

.infra-item {
    width: 30%;
    background: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s ease-in-out;
}

.infra-item img {
    width: 100%;
    border-radius: 8px;
}

.infra-item h3 {
    color: #333;
    margin-top: 10px;
}

.infra-item p {
    font-size: 1rem;
    color: #666;
}

.infra-item:hover {
    transform: scale(1.05);
}

/* 📱 Adaptation pour les tablettes */
@media (max-width: 1024px) {
    #about-intro {
        padding: 50px 15px;
    }

    #about-intro h2 {
        font-size: 2rem; /* Réduction de la taille du titre */
    }

    #about-intro .intro-text {
        font-size: 1.1rem; /* Légère réduction de la taille du texte */
    }

    .values-grid {
        flex-wrap: wrap; /* Permet aux éléments de passer à la ligne */
        justify-content: center;
    }

    .value-item {
        width: 30%; /* Augmente la taille des valeurs pour meilleure lisibilité */
    }

    .infra-item {
        width: 45%; /* Augmente la taille des infrastructures pour éviter qu'elles soient trop petites */
    }
}

/* 📱 Adaptation pour les mobiles */
@media (max-width: 768px) {
    #about-intro {
        padding: 40px 10px; /* Réduction du padding */
    }

    #about-intro h2 {
        font-size: 1.8rem; /* Ajustement du titre */
    }

    #about-intro .intro-text {
        font-size: 1rem; /* Réduction pour meilleure lecture */
        text-align: center; /* Centrage du texte */
    }

    #about-vision-mission .row {
        flex-direction: column; /* Empile les éléments en colonne */
        text-align: center;
    }

    #about-vision-mission img {
        margin-top: 15px; /* Ajout d'un espace entre texte et image */
    }

    .values-grid {
        flex-direction: column; /* Les valeurs s'affichent en colonne */
        align-items: center;
    }

    .value-item {
        width: 80%; /* Les valeurs prennent plus de place */
        margin-bottom: 15px;
    }

    .infra-grid {
        flex-direction: column; /* Les infrastructures passent en colonne */
        align-items: center;
    }

    .infra-item {
        width: 90%; /* Agrandir les cartes sur mobile */
    }
}