/* Custom CSS */

/* Applique la police Trebuchet MS sur l'ensemble du site */
body {
    font-family: 'Trebuchet MS', sans-serif;
}

/* Ombre en bas de la barre de navigation */
.navbar {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Header avec image en background */
.header {
    background: url('/src/images/mother-951190_1280.jpg') no-repeat center center/cover;
    position: relative;
    height: 100vh; /* Hauteur normale sur les grands écrans */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

@media (max-width: 768px) {
    .header {
        height: 50vh; /* Hauteur réduite sur les petits écrans */
    }
}

.header .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Overlay sombre */
    z-index: 1;
}

/* Le texte dans le header doit être par-dessus l'overlay */
.header .text-white {
    z-index: 2;
    color: white;
}

/* Agrandir légèrement la description du header */
.header p.lead {
    font-size: 1.5rem; /* Taille légèrement agrandie */
}

/* Section titre */
.section-title {
    font-size: 2.5em;
    color: darkgreen;
}

/* Cartes de services */
.card {
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.card img {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

/* Style des titres de services en violet et centrés */
.card-title {
    color:darkgreen; /* Violet */
    text-align: center;
}

/* Style des descriptions de services en gris foncé et police réduite */
.card-text {
    color: #4f4f4f; /* Gris foncé */
    font-size: 0.9rem; /* Taille réduite */
}

/* Arrondir les bordures des images dans certaines sections */
.rounded-custom {
    border-radius: 15px;
}

/* Agrandir légèrement la police des paragraphes dans certaines sections */
#equipe-ecoute ul li, #gestion-besoins ul li, #avantages-beneficiaires ul li {
    font-size: 1.1rem;
}

/* Boutons dans la navbar */
.navbar-nav .btn {
    border-radius: 25px;
}

/* Couleur violet personnalisée pour les boutons */
.btn-violet {
    background-color: green !important;
    border: darkgreen;
    color: #fff !important;
}

.btn-violet:hover {
    background-color: rgba(6, 61, 6, 0.944) !important;
}

/* Footer styles */
.footer {
    background-color: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
}