/* Style global du corps de la page */
body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    background: linear-gradient(rgba(223, 216, 216, 0.7), rgba(82, 82, 83, 0.7));
}
.navbar {
    padding: 1rem 0;
}

.navbar-custom {
    background: linear-gradient(90deg, #171718, #024a93);
}

/* Styles des titres */
h1 {
    color: #343a40;
    font-weight: bold;
}

/* Style du conteneur du carrousel */
#carouselTemoignages {
    background-color: #f1f1f1; /* Couleur de fond du carrousel */
    border-radius: 10px;
    padding: 20px;
}

/* Style des titres dans les items du carrousel */
.carousel-item h5 {
    margin-top: 20px;
    font-size: 1.5rem;
    color: #024a93;
    text-align: center;
}

/* Style des paragraphes dans les items du carrousel */
.carousel-item p {
    font-size: 1rem;
    color: #495057;
    text-align: center;
    justify-content: center;
    margin: 20px auto;
    max-width: 600px;
}

/* Style de la date dans les items du carrousel */
.carousel-item time {
    font-size: 0.875rem;
    color: #6c757d;
    display: block;
    text-align: center;
    margin-top: 10px;
}

/* Style des images dans le carrousel */
.carousel-item img {
    width: 150px; /* Largeur fixe pour assurer un cercle */
    height: 150px; /* Hauteur fixe pour assurer un cercle */
    object-fit: cover; /* Remplir le cercle sans distorsion */
    /*object-position: top;  Centrer la tête de la personne */
    object-position: 50% 20%; 
    border-radius: 50%; /* Créer un cercle */
    border: 4px solid #024a93; /* Bordure */
    margin-bottom: 15px; /* Espacement sous l'image */
    display: block; /* Assurer un centrage horizontal */
    margin-left: auto; /* Assurer un centrage horizontal */
    margin-right: auto; /* Assurer un centrage horizontal */
    overflow: hidden; /* Masquer les débordements d'image */
}

/* Style des labels du formulaire */
.form-group label {
    font-weight: bold;
}

/* Style du formulaire de témoignage */
#temoignageForm {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

/* Style du bouton pour afficher le formulaire */

#showFormButton{
    width: 100%;
    font-size: 1.25rem;
}
#submit{
    width: 100%;
    font-size: 1.25rem;
   
}

/* Style des messages d'alerte */
.alert {
    margin-top: 20px;
    font-size: 1rem;
}
/* Style du bouton Submit */
#temoignageForm button[type="submit"] {
    background-color: #024a93; /* Appliquer la couleur souhaitée */
    color: #fff; /* Couleur du texte en blanc pour un bon contraste */
    border: none; /* Retirer les bordures */
    padding: 10px 20px; /* Ajuster le padding pour un aspect plus professionnel */
    border-radius: 5px; /* Coins légèrement arrondis */
    font-size: 1.2rem; /* Taille de la police */
    cursor: pointer; /* Afficher un curseur de pointeur pour indiquer qu'il est cliquable */
    transition: background-color 0.3s ease; /* Animation douce lors du changement de couleur */
}

#temoignageForm button[type="submit"]:hover {
    background-color: #023b74; /* Couleur un peu plus foncée au survol */
}
/* Style du bouton Submit */
#showFormButton  {
    background-color: #024a93; /* Appliquer la couleur souhaitée */
    color: #fff; /* Couleur du texte en blanc pour un bon contraste */
    border: none; /* Retirer les bordures */
    padding: 10px 20px; /* Ajuster le padding pour un aspect plus professionnel */
    border-radius: 5px; /* Coins légèrement arrondis */
    font-size: 1.2rem; /* Taille de la police */
    cursor: pointer; /* Afficher un curseur de pointeur pour indiquer qu'il est cliquable */
    transition: background-color 0.3s ease; /* Animation douce lors du changement de couleur */
}

#showFormButton:hover {
    background-color: #023b74; /* Couleur un peu plus foncée au survol */
}

/* Styles pour les petits écrans */
@media (max-width: 576px) {
    .carousel-item img {
        width: 100px; /* Réduire la taille des images sur petits écrans */
        height: 100px; /* Réduire la taille des images sur petits écrans */
    }
    
    .carousel-item p {
        font-size: 0.9rem; /* Ajuster la taille du texte */
    }
    
    #showFormButton {
        font-size: 1.1rem; /* Ajuster la taille du bouton */
    }

    #temoignageForm .form-group {
        font-size: 0.9rem; /* Ajuster la taille du texte des labels */
    }

    #temoignageForm textarea {
        font-size: 0.9rem; /* Ajuster la taille du texte de la textarea */
    }

    #temoignageForm button {
        font-size: 1rem; /* Ajuster la taille du bouton */
    }
}
.footer {
    background: linear-gradient(90deg, #004080, #1e3853); /* Dégradé bleu */
}

.footer p {
    margin: 0;
    font-size: 14px;
}

.footer i {
    font-size: 1.2rem;
    transition: color 0.3s ease-in-out;
}

.footer i:hover {
    color: #007bff;
}

.bold-text {
    font-weight: bold;
}