#navbarNav
{    
    justify-content:center;
}
#navbarNav a 
{
    font-size: 30px;
    font-family: 'Lato', sans-serif;
    font-weight: bold;
    font-style: italic;
    color: white;
    justify-content: center;
    padding: 30px;
    
}

.logo
{
    color: #FF007F;
}

#navbarNav a:hover
{
    color: #FF007F;
}

header
{
    height: 95vh;
    width: 100%;
    background:url('images/fabian-moller-gI7zgb80QWY-unsplash.jpg') center center ;
    background-position: center;
    background-size: cover;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
}


/*Section mes services*/
.mesServices
{  
    margin-top: 40px;
    margin-bottom: 40px;
}
.mesServicesTitres h2
{
    font-family: 'Kalam', cursive;
    text-align: center;    
    font-weight: bold;
    text-decoration: underline;
    color:#FF007F ;
    margin-bottom: 20px;
}

.mesServices h3
{
    font-family: 'Kalam', cursive;
    font-weight: bold;
    color:#FF007F ;
    text-decoration: underline;
}

.mesCartes
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;   
}

.mesCartes .card
{
    width: 25rem;
    height: 35rem;
}

.card
{
    box-shadow: 0px 10px 30px black;
    transition: all 0.4s ease-in-out;
    
}

.mesServices .card:hover
{
    transform: scale(1.1);
    border: 3px solid #FF007F ;   
}


.mesCartes h3
{
    color: #FF007F;
    font-weight: bold;
    text-decoration: underline;
    text-align: center;
}

.mesCartes p
{   
    text-align: center;
    font-family: 'Kalam', cursive;
}
/*Section mes services*/

/*Section Presentation*/
.presentation h2
{
    text-align: center;
    font-family: 'Kalam', cursive;
    font-weight: bold;
    text-decoration: underline;
    color:#FF007F ;
    margin-bottom: 20px;
}

.presentation p
{
    font-family: 'Kalam', cursive;
    font-size: 16px;
}

/*Section Presentation*/

/*Section Articles*/
.Articles
{
    margin: 40px 0px 40px 0px;
}
.titreArticles
{
    
    margin:20px 0px 20px 0px ;
}
.Articles h2
{
    text-align: center;
    font-weight: bold;
    color:#FF007F ;
    font-family: 'Kalam', cursive;
    text-decoration: underline;
}
.Articles h3
{
    text-align: center;
    font-weight: bold;
    color:#FF007F ;
    text-decoration: underline;
}

.Articles h4 
{    
    font-family: 'Pacifico', cursive;  
    color: #FF007F ;;
}

.imgCarousel
{
    max-height: 800px;
    min-height: 400px;
}

.Articles img
{
    
    border-radius: 20px;
}

.Articles .carousel-item button
{
    background-color:black;
    border-radius: 10px;
    border: solid #FF007F 3px ;
}

.monModal
{
    font-family: 'Lato', sans-serif;  
    
}

.modal-title
{
    font-family: 'Lato', sans-serif;  
    font-weight: bold;
    color: #FF007F;
}

.modal1Titre 
{
    justify-content: center;
    align-items: center;
    text-align: center;
    font-weight: bold;
    text-decoration: underline;
}

.motEvidence
{
    font-weight: bold;
    text-decoration: underline;
}

.modalCorps
{
    text-align: justify;
}
.modal1Corps 
{
    display: flex;
    justify-content: space-around;
    text-align: left;
}

.modal2Corps 
{
    text-align: justify;
}

.modal3Corps
{
    min-width: 500px;
    display: flex;
    flex-direction: row;   
    justify-content: space-around;
    text-align: left;
}




/*Section Articles*/

/*Section Contact*/
.contactTitre
{
    margin:20px 0px 20px 0px ;
}
.contactContainer
{
    display: flex;
    justify-content: space-around;
    align-items: center;   
}

.contactContainer iframe
{
    box-shadow: 0px 10px 30px black;
}
.contactContainer h4
{
    color:#FF007F ;
    font-weight: bold;
}
.contactTitre h2 
{
    font-family: 'Kalam', cursive;
    text-align: center;
    font-weight: bold;
    color:#FF007F ;
    text-decoration: underline;
}

.mesContactes
{
    display: flex;
    flex-direction: column;
}

.mesContactes div
{
    display:flex;
    padding: 30px;
}

.mesContactes img
{
    margin-right: 20px;
}

.formulaireContact
{
    font-family: 'Kalam', cursive;
    font-weight: bold;
    color: #FF007F;  
    width:800px;
}

.formulaireContact h3
{
    font-family: 'Kalam', cursive; 
    text-align: center;
    font-weight: bold;
    text-decoration: underline;
}

.btnContainer
{
text-align: center;
}

.btnEnvoyer
{
    justify-content: center;
    align-items: center;
    border: 2px solid #FF007F;
    border-radius: 5px;
    font-family: 'Pacifico', cursive;
    font-weight: bold;
    width: 100px;

}

.btnEnvoyer:hover
{
    background-color: #FF007F;
}




/*Section Contact*/

/*Section Footer*/
.monFooter
{   
    text-align: center;
    margin: 20px 0px 0px 0px;
    padding: 5px;
    display: flex;
    background-color: #FF007F;
    background-size: cover;
    justify-content: center;
    align-items: center;
}


.mesLogos
{
    display: flex;
    justify-content: flex-end;
}

.footerTexte p
{
    
    justify-content: flex-start;
    font-family: 'Pacifico', cursive;
    font-weight: bold;
    margin: 0px;
}

.mesLogos img
{
    padding: 5px;
}

.monFooterNom h3
{
    font-family: 'Lato', sans-serif;
    font-weight: bold ;
    font-style: italic;
}

/*Section Footer*/
/*Section RDV*/
#rendez-vous
{
    margin: 15px 0px 15px 0px;
}
.containerRDV
{
    text-align: center;
}
/*Section RDV*/

/*Media Queries*/
@media screen and (max-width: 1800px)
{
    .contactContainer
    {
        flex-direction: column;
    }

    .formulaireContact  
    {
        margin-top: 20px;
    }
}
@media screen and (max-width: 1400px)
{
    .mesCartes
    {
        flex-wrap: wrap;
        flex-direction: column;
    }

    .mesServices .card{
        margin: 20px;
        width: 30rem;
    }
}

@media screen and (min-width: 1400px)
{
    .monFooter p{
        font-weight: bold;
        font-size: 20px;
        
    }
}

@media screen and (max-width: 1200px)
{

}

@media screen and (max-width: 1024px)
{
    .mesServices .card{
        margin: 20px;
        width: 20rem;
    }



}

@media screen and (max-width: 992px)
{
    .contactContainer
    {

        flex-direction: column;
    }
    
    #navbarNav a{
        font-size: 20px;

    }

    .logo
    {
        display: none;
    }

    .navbar button 
    {
        color:black;
        background-color: #FF007F;
    }

    .navbar-toggler-icon
    {
        background-color: #FF007F;
    }


    #navbarNav a
    {
        color: #FF007F;
    }

    .mesCartes .card
    {
        width: 25rem;
    }

    .maMap iframe
    {
        height: 400px;
        width: 700px;
    }

    .formulaireContact  
    {
        width: 600px;
    }

    .modal3Corps
    {
        flex-wrap: wrap;
        flex-direction: column;
        
    }

    .modal3Corps div
    {
        width: 350px;
    }
    
    .modal1Corps
    {
        flex-wrap: wrap;
        flex-direction: column;
    }

}


@media screen and (max-width: 800px)
{
    .mesContactes
    {
        flex-direction: column;
    }

    .maMap iframe
    {
        height: 400px;
        width: 700px;
    }

    .mesCartes .card
    {
        width: 20rem;
    }

    .mesCartes p
    {   
        font-size: 16px;
    }

    .mesCartes h3
    {   
        font-size: 20px;

    }


    .mesServices
    {
        margin-top: 20px;
        margin-bottom: 10px;
    }

    .mesServicesTitres h2
    {
        margin-bottom: 10px;
    }

    .Articles .carousel-item button
    {
        height: 40px;  
    }

    .Articles .carousel-item button h4
    {
        font-size: 15px;
    }

    .mesContactes div
    {
        display:flex;
        padding: 20px;
    }



}

@media screen and (min-width: 1200px) and (max-width: 1400px) {
    .presentation p
    {
        height: 300px;
        overflow-y: scroll;
        width: 100%
    }

}

@media screen and (min-width: 992px) and (max-width: 1200px) {
    .presentation p
    {
        height: 230px;
        overflow-y: scroll;
        width: 100%
    }

}

@media screen and (max-width: 768px)
{
    header
    {
        height: 50vh;
    }
    .presentation h5
    {
        text-align: center;
    }

    .formulaireContact  
    {
        width: 350px;
    }

    .Articles .carousel-item button h4
    {
        font-size: 13px;
    }
}
@media screen and (max-width: 750px)
{
    .maMap iframe
    {
        height: 400px;
        width: 516px;
    }

    .mesContactes div
    {
        display:flex;
        padding: 15px;
    }

    .monFooter p{
        font-weight: bold;
        font-size: 20px;
        
    }
}

@media screen and (max-width: 500px)
{
    .navbar-brand img
    {
        height: 60px;
        width: 60px;
    }
    header
    {
        height: 40vh;
    }
    #navbarNav a 
    {
        font-size: 18px;
        padding: 15px;
        color: #FF007F;
    }
    .maMap iframe
    {
        height: 300px;
        width: 366px;
    }

    .mesCartes p
    {   
        font-family: 'Lato', sans-serif;
        font-weight: bold;
        text-align: center;
        font-size: 12px;

    }

    .mesCartes h3
    {   
        font-size: 18px;

    }
    .mesCartes .card
    {
        width: 20rem;
        height: 450px;
    }

    .presentation p
    {
        font-size: 16px;
        font-weight: bold;
    }

    .modal3Corps
    {
        font-size: 14px;
    }
    
    .monFooter
    {
        align-items: center;
    }

    .monFooter p
    {
        font-size: 14px ;
        font-weight: bold;
    }

    .mesLogos img
    {
        height: 35px;
        width: 35px;
    }

    .presentation p
    {
        height: 250px;
        overflow-y: scroll;
        width: 100%
    }

}
/*Media Queries*/

/*Ajustement Card Presentation*/
@media screen and (min-width: 1200px) and (max-width: 1400px) {
    .presentation p
    {
        height: 180px;
        overflow-y: scroll;
        width: 100%
    }

}

@media screen and (min-width: 992px) and (max-width: 1200px) {
    header
    {
        height: 60vh;
    }
    .presentation p
    {
        height: 120px;
        overflow-y: scroll;
        width: 100%
    }

}

@media screen and (min-width: 768px) and (max-width: 992px) {
    header
    {
        height: 50vh;
        background-size: cover;
    }

    #navbarNav a 
    {
        font-size: 20px;
        
    }
    .presentation p
    {
        height: 80px;
        overflow-y: scroll;
        width: 100%
    }

}
/*Ajustement Card Presentation*/

/*Ajustement image caroussel*/
@media screen and (min-width: 768px) and (max-width: 1400px)
{
    .imgCarousel
    {
        height: 700px;
    }
}
/*Ajustement image caroussel*/