body {
    font-family: "Arial Regular", serif;
}

/*-----Devis------*/


.correct {
    border: 2px solid green;
}

.fondDevis {
    background-color: #BCEFFF;
}

#QuestionnaireDevis .carousel-item {
    background: transparent;
}

#entete {
    text-align: center;
}

#devis {
    font-size: 35px;
}

.question {
    font-size: 29px;
    text-align: center;
}

.questionnaire {
    text-align: center;
}

.remerciement {
    text-align: center;
    align-items: center;
    height: 50%;
}

.btn.question {
    width: 400px;
    height: 70px;
    background-color: #00bfff;
    color: #444;
    font-size: 20px;
    margin-bottom: 20px;
}

.btn.question:hover {
    background-color: #0095C7;
}

.btn.photo {
    background-color: #00bfff;
    color: #444;
    font-size: 20px;
    margin-bottom: 20px;
    width: 150px;
    height: 210px;
}

.btn.photo:hover {
    background-color: #0095C7;
}

.btn.photo .envoi {
    height: 150px;
    width: 198px;
    opacity: 0;
    position: absolute;
}


.btn.photo img {
    max-height: 125px;
}

.btn.valider {
    width: 400px;
    height: 50px;
    background-color: #00bfff;
    color: #444;
    font-size: 20px;
    margin-bottom: 20px;
}

.btn.valider:hover {
    background-color: #0095C7;
}


#QuestionnaireDevis .media-body {
    align-items: center;
    justify-content: center;
    flex-grow: 1;
}

.erreur {
    color: red;
}

.btn.incorrect,
.incorrect {
    border: 2px solid red;
}

/* #afficherPhoto {
   position: relative;
   left: 40%;
   width: 250px;
} */

/* ----Temoignages---- */

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    background: #000;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#photo img {
    width: 100%;
}

/* ---Explications---- */

.texte-explicatif {
    font-size: 20px;
    text-align: center;
}

.texte-explicatif .titre {
    font-size: 30px;
    font-weight: bold;
}

.photos-explicatives .galerie {
    overflow: hidden;
    max-height: 150px;
}

.photos-explicatives img:hover {
    transform: scale(1.1);
    cursor: pointer;
}

.photos-explicatives img {
    transition: all ease-in-out 0.4s;
    width: 100%;
}

/* ------Modal------- */

.galerieModal .modal-content .carousel .active:after {
    content: "";
}

.galerieModal .modal-content .carousel-control-next,
.modal-content .carousel-control-prev {
    opacity: 1;
}

.galerieModal .modal-content .carousel-control-next-icon,
.modal-content .carousel-control-prev-icon {
    height: 3rem;
    width: 3rem;
}

.modal-content .carousel-control-prev:hover .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2300bfff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}

.modal-content .carousel-control-next:hover .carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2300bfff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.galerieModal .modal-content .carousel-indicators [data-bs-target] {
    height: 5px;
}

.galerieModal .modal-content .carousel-indicators [data-bs-target].active {
    background-color: #00bfff;
}

.galerieModal .modal-header {
    background: transparent;
}

.galerieModal .modal-content,
.galerieModal .modal-header {
    background: transparent;
    border: none;
}

.modal-content .btn-close.boutonModal {
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    opacity: 1;
}

.modal-content .btn-close.boutonModal:hover {
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2300bfff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    opacity: 1;
}

/* ------Footer------- */

#footer {
    height: auto;
    color: #25657A;
    background-image: linear-gradient(to right,
            #00BFFB 50%,
            #0095C7 100%,
            rgba(0, 0, 0, 0));
}

#footer li {
    list-style: none;
}

#footer ul {
    padding: 0;
    margin-top: 10px;
}

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

#footer .titre {
    font-weight: bold;
    font-size: 17px;
}

/* Accueil */
.bandeau-icones {
    display: flex;
    margin-bottom: 5px;
}

.photosMosaique {

    width: 100%;
    height: 50%;

}


.bandeau-icones div {
    display: flex;
    align-items: center;
    width: 20%;

}

.bandeau-icones img,
.bandeau-icones svg,
.bandeau-icones i {
    height: 80px;
    margin: 0 10px 0 0;
}

.bandeau-icones p {
    font-size: 18px;
}

.case1 {
    background-color: rgb(198, 224, 240);
}

.photoclients1,
.photoclients2 {
    width: 90%;
    height: 400px;
}

.photoclients1 {
    float: right;
}


.image1 {
    width: 500px;
    height: 450px;
}

.icon {
    color: darkblue;
}

.iconeReseaux {
    width: 50px;
    height: 50px
}

.barre {
    border: 5px solid rgb(33, 102, 204);
    border-radius: 10px;
    margin-bottom: 35px;
}

.equipe {
    color: black;
    font-weight: bold;
}

#presentation,
#haut {
    text-align: center;
}

#youtube {
    width: 1200px;
    height: 700px;
}



.temoin {
    width: 550px;
    height: 300px;
}

.partenaireBas {
    width: 90%;
    height: 90%;
}

.devis {
    width: 100%;
    height: 60%;
}

a>i {
    color: black;
}

main {
    padding: 20px;
}

.cardPresentation {
    border-radius: 10px;
    margin-left: 3%;
    width: 600px;
}


.cardAvis {
    border-radius: 10px;
    margin-left: 3%;
    width: 90%;
}


.titreFAQ {
    text-align: center;
    font-weight: bold;
}



/*Caroussel*/

#carousselDocteur .carousel-control-prev:hover .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2300bfff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}

#carousselDocteur .carousel-control-next:hover .carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2300bfff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

#carousselDocteur .carousel-control-next-icon,
#carousselDocteur .carousel-control-prev-icon {
    background: transparent;
}

#carousselDocteur .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23007CA6'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}

#carousselDocteur .carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23007CA6'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

#carousselDocteur .active:after {
    content: 0;
}

.photosPresentation {
    overflow: hidden;
    max-height: 250px;
}

.fichePresentation {
    background-color: #43B8DF;
    Position: relative;
    width: 22%;
    left: 09%;
}

.textePresentation {
    color: #1B4A59;
}

.textePresentation .titre {
    color: #1B4A59;
    font-weight: bold;
}

#carousselDocteur .carousel-item.active {
    background: transparent;
}

.banniere {
    padding: 0;
}


/* FAQ */

.faq-heading {
    border-bottom: #777;
    padding: 20px 60px;
}

.faq-container {
    display: flex;
    justify-content: center;
    flex-direction: column;

}

.hr-line {
    width: 60%;
    margin: auto;

}

/* Style the buttons that are used to open and close the faq-page body */
.faq-page {
    /* background-color: #eee; */
    color: #444;
    cursor: pointer;
    padding: 30px 20px;
    width: 60%;
    border: none;
    outline: none;
    transition: 0.4s;
    margin: auto;
}

.faq-body {
    margin: auto;
    /* text-align: center; */
    width: 50%;
    padding: auto;

}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active,
.faq-page:hover {
    background-color: #72b3da;
}

/* Style the faq-page panel. Note: hidden by default */
.faq-body {
    padding: 0 18px;
    background-color: white;
    border-radius: 10px;
    padding: 20px;
    display: none;
    overflow: hidden;
    margin-top: 20px;
    margin-bottom: 20px;
}

.faq-page:after {
    content: '\02795';
    /* Unicode character for "plus" sign (+) */
    font-size: 13px;
    color: rgb(255, 255, 255);
    float: right;
    margin-left: 5px;
}

.faq-page.active:after {
    content: "\2796";
    /* Unicode character for "minus" sign (-) */
}

/* ------Header------- */
.banniere {
    position: relative;
    color: #444;
    font-family: "Swansea";
    font-size: 15px;
}

.img_banniere {
    width: 100%;
    height: 175px;
    margin: auto;
}

.logo {
    position: absolute;
    left: 40px;
    top: 30px;
}

.bouton_langue {
    position: absolute;
    right: 15px;
    top: 15px;

}

#langue {
    background-color: white;
    padding: 5px 10px;
    border-radius: 15px;
    border: none;
    color: #00bfff;
    font-weight: bold;
}

#slogan {
    color: white;
    font-size: 1.5em;
}

.nom {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#nom_clinique {
    font-size: 2em;

}

.stats {
    position: absolute;
    top: 125px;
    width: 90%;
    padding-left: 45px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.menu {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 10px;

}

.menu button {
    color: #44b6f8;
    font-weight: bold;
    background-color: white;
    padding: 10px 10px;
    text-align: center;
    border-radius: 20px;
    border-color: #00bfff;
}

.menu button:hover {
    background-color: #00bfff;
    color: white;
}

.menu a {
    color: #00bfff;
    font-weight: bold;
    text-decoration: none;
}

.menu a:hover {
    color: white;
}

/* Page Contact */
.page_contact {
    position: relative;
    /*background-color: #BCEFFF;*/
    font-family: "Swansea";
}

#background_contact {
    opacity: 55%;
    position: relative;
    width: 100%;
    height: 400px;
    margin-top: 5px;
}

#titre_contact {
    position: absolute;
    left: 50px;
    top: 150px;
    color: #444;
}

.lien_maps {
    position: relative;
    left: 14%;
    top: -175px;
    width: 90%;
    height: 120%;
    color: #444;
}

/*Page Notre Clinique*/
.img_presentation {
    object-fit: cover;
    max-width: 100%;
}

.titre_presentation {
    margin-top: 20px;
}

.titre_presentation_offset {
    margin-top: 50px;
    margin-bottom: 25px;
    text-align: center;
}

.profils_presentation {
    border: 3px solid #00bfff;
    border-radius: 20px;
}

.profil_image {
    width: 200px;
    position: relative;
    top: 20px;
    left: 50px;
    border-radius: 20px;
}

.profil_nom {
    padding-top: 25px;
    text-align: center;
    font-weight: bold;
    font-size: larger;
}

.profils_presentation p {
    margin: 10px 30px 10px 30px;
}

.presentation_bold {
    font-weight: bold;
}

.diplomes {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.diplomes img {
    margin: 10px 30px 20px 30px;
    height: 100px;
}



/* Responsive */

@media (max-width: 515px) {

    .nom,
    #slogan,
    .stats {
        display: none;
    }

    .logo {
        left: 20%;
        top: 30%;

    }

    .logo>img {
        width: 200px;
        height: 120px;
    }

}



@media (max-width: 576px) {
    .nom {
        left: 60%;
    }

    .stats {
        margin-top: 15px;
    }

    .menu {

        flex-direction: column;
    }

    .img_banniere {
        height: 200px;
    }

    .divForm {
        margin-top: 15px;
    }

    #carousselDocteur {
        display: none;
    }

    .temoin {
        width: 100%;
        height: 300px;
    }

    .photoclients1,
    .photoclients2 {
        width: 100%;
    }


}



@media (min-width: 576px) and (max-width:768px) {
    .nom {
        left: 60%;
    }

    .stats {
        margin-top: 15px;
    }

    .menu {
        width: auto;
        flex-direction: column;
    }

    .menu>button {
        margin-bottom: 8px;
    }

    .divForm {
        margin-top: 20px;
    }

    .cardcontact {
        width: 100%;
        margin-bottom: 15px;

    }

    .divPartenaire {
        width: 100%;
    }

    .imgPartenaire {
        width: 100%;
    }

    .temoin {
        width: 100%;
        height: 100%;
    }

    .explication {
        flex-direction: column;
    }

    .photoclients1 {
        float: none;
    }

    .textExpli {
        width: 100%;
        margin-bottom: 25px;
        margin-top: 25px;
    }

    .logoFooter {
        width: 80%;
    }



    .fiche {
        display: none;

    }

    .ficheCentre {
        width: 250px;

    }

    .img_banniere {
        height: 200px;
    }

    #instaFrame {
        width: 350px;
        height: 400px;
    }
}

@media (min-width: 768px) and (max-width:992px) {

    .temoin {
        width: 100%;
        height: 300px;
    }

    .photoclients1 {
        width: 300px;
        height: 270px;

        float: right;
    }

    .photoclients2 {
        width: 300px;
        height: 270px;


    }


    .divPartenaire {

        width: 50%;
    }

    .nom {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .menu {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin: 10px;
    }

    .partenaireBas {
        width: 100%;
        margin-left: 30px;
        height: 100%;
    }

    .logoFooter {
        width: 80%;
    }
}

@media (min-width: 992px) and (max-width:1199.98px) {

    .temoin {
        width: 100%;
        height: 300px;
    }

    .photoclients1,
    .photoclients2 {
        width: 380px;
        height: 320px;

    }

    .photoclients1 {
        float: right;
    }





    .divPartenaire {

        width: 40%;
    }

    .nom {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .menu {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin: 10px;
    }
}

@media (min-width: 1199.98px) and (max-width:1399.98px) {

    .photoclients1,
    .photoclients2 {
        width: 480px;
        height: 420px;
    }

    .photoclients1 {
        float: right;
    }

    .cardPresentation {
        width: 50%;
    }

    .devis {
        width: 100%
    }

    .nom {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .menu {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin: 10px;
    }

    .temoin {
        width: 100%;
        height: 300px;
    }
}

@media (min-width: 1399.98px) and (max-width:1699.98px) {

    .temoin {
        width: 100%;
        height: 320px;
    }

    .photoclients1 {
        float: right;

    }

    .photoclients1,
    .photoclients2 {
        width: 500px;
        height: 420px;
    }





    .nom {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .menu {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin: 10px;
    }

}