/* Styles pour la page À Propos */

/* Section Bannière */
.banner {
    background-image: url('../images/banner.jpg'); /* Assurez-vous du chemin correct vers votre image */
    background-size: cover;
    background-position: center;
    color: #ffffff;
    height: 60vh; /* Assurez-vous que cela correspond à la valeur dans votre HTML */
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

.banner h1 {
    font-size: 48px;
    font-weight: bold;
    margin-bottom: 20px;
}

.banner p {
    font-size: 24px;
}

/* Section Motivation et Savoir-faire */
.motivation h2 {
    font-size: 32px;
    color: #2c3e50;
    margin-bottom: 20px;
}

.motivation p {
    color: #7f8c8d;
    font-size: 16px;
}

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

/* Section Processus */
.processus h2 {
    font-size: 32px;
    color: #2c3e50;
    margin-bottom: 40px;
}

.processus .col-md-4 img {
    max-width: 150px;
    margin-bottom: 20px;
}

.processus h3 {
    font-size: 24px;
    color: #2c3e50;
    margin-bottom: 15px;
}

.processus p {
    color: #7f8c8d;
    font-size: 16px;
}

/* Section Engagements */
.engagements h2 {
    font-size: 32px;
    color: #2c3e50;
    margin-bottom: 40px;
}

.engagements .col-md-4 img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    margin-bottom: 20px;
    border-radius: 8px; /* Optionnel : pour des coins arrondis */
}

.engagements h3 {
    font-size: 24px;
    color: #2c3e50;
    margin-bottom: 15px;
}

.engagements p {
    color: #7f8c8d;
    font-size: 16px;
}

/* Section Appel à l'Action */
.call-to-action {
    background-color: #005f73;
    color: #ffffff;
}

.call-to-action h2 {
    font-size: 32px;
    margin-bottom: 20px;
}

.call-to-action p {
    font-size: 18px;
}

.call-to-action .btn {
    font-size: 18px;
}

/* Pied de page */
footer {
    background-color: #343a40;
    color: #ffffff;
}

footer a {
    color: #ffffff;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

/* Styles généraux */
h2 {
    font-family: 'Roboto', sans-serif;
}

p, h3, h4 {
    font-family: 'Roboto', sans-serif;
}

/* Ajustements pour les images circulaires dans la section Processus */
.processus .card-img-top {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 50%;
    margin: 0 auto 20px auto;
}

/* Styles pour les cartes */
.card {
    border: none;
}

.card-body {
    padding: 20px;
}

/* Media Queries pour la réactivité */
@media (max-width: 768px) {
    .banner h1 {
        font-size: 36px;
    }

    .banner p {
        font-size: 18px;
    }

    .motivation h2,
    .processus h2,
    .engagements h2 {
        font-size: 28px;
    }

    .call-to-action h2 {
        font-size: 28px;
    }
}