/*---------------------*/
/*Vue présentation*/
/*---------------------*/
/*Element globale*/
.Presentation{
    height: calc(100vh - 100px);
    width: 100vw;
    background: var(--color-blanc);
    color: var(--color-main);    
    overflow: hidden;
    overflow-y: hidden;
}
.Presentation_Content{    
    width: 100vw;
    padding: 10vh 15vw;    
    height: 100%;
    display: flex;
    align-items: center;    
    justify-content: space-between;    
    align-content: top;    
    flex-wrap: wrap;
    z-index: 3;
}

/*Partie image*/
.Presentation_Image{
    height: 60vh;
    width: 60vh;
    background: linear-gradient(90deg, var(--color-second), var(--color-third));
    border-radius: 30vh;
    display: flex;
    align-items: top;
    justify-content: center;
}
.Presentation_Image::before{
    content: " ";
    position: absolute;
    top: -5%;
    left: -5%;
    width: 110%;
    height: 110%;
    border-radius: 33vh;
    background: linear-gradient(90deg, var(--color-second), var(--color-third));
    filter: blur(13px); 
    animation: animation_cercles 15s linear infinite;
    -webkit-animation: animation_cercles 15s linear infinite;
    -moz-animation: animation_cercles 15s linear infinite;	
}
.Presentation_Image>p{
    font-size: 140px;
    padding-top: 6vh;
    font-family: 'Poppins', serif;
    font-weight: 800;   
    color: var(--color-blanc); 
    text-align: center;
}
.Presentation_Image>img{
    position: absolute;
    height: 70vh;
    bottom: 0;
    right: 0;    
    transform: translateX(12vw) translateY(15vh);
    -webkit-transform: translateX(12vw) translateY(15vh);
    -moz-transform: translateX(12vw) translateY(15vh);
}

/*Partie texte*/
.Presentation_Texte{
    text-align: left;
    width: 35vw;
    justify-content: top;    
    display: flex;
    flex-direction: column;
}
.Presentation_Texte h1{	
    font-size: 60px;
    font-family: "Poppins", serif;
    font-weight: 800;	
    color: var(--color-main);			
    line-height: 65px;
}
.Presentation_Texte h2{
    font-weight: 600;
    font-size: 20px;
    font-family: "Poppins", serif;
    color: var(--color-main);		
}

/*Bouton pour contacter*/
.Presentation_Bouton{
    width: 180px;
    height: 45px;    
    border-radius: 3px;    
    line-height: 40px;
    font-size: 16px;
    text-align: center;
    font-weight: 600;
    font-family: "Poppins";
    margin-top: 25px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;   
    background: var(--color-blanc);
    color: var(--color-main); 
    border: 1px solid var(--color-main);
    transition: 0.3s ease all;
    z-index: 20;
}
.Presentation_Bouton:hover{
    transition: 0.3s ease all;
    background-color: var(--color-main);
    color: var(--color-blanc);
}

.presentation_grosCercle{
    background: linear-gradient(90deg, var(--color-second), var(--color-third));
    width: 150vw;
    height: 150vw;
    border-radius: 60vw;
    position: absolute;
    top: -45vw;
    left: -5vw;
    display: flex;
    align-items: center;
    justify-content: center;   
    animation: animation_cercles 15s linear infinite;
    -webkit-animation: animation_cercles 15s linear infinite;
    -moz-animation: animation_cercles 15s linear infinite; 
}
.presentation_grosCercle>div{
    background-color: var(--color-blanc);
    width: 100vw;
    height: 100vw;
    border-radius: 50vw;
}

@media screen and (min-width: 0px) and (max-width: 1500px) {
    .Presentation_Content{
        flex-direction: column;
        justify-content: center;   
        flex-wrap: nowrap;    
        height: 110%;    
    }    
    .Presentation_Image>p{
        display: none;
    }
    .Presentation_Texte{
        width: 70vw;        
        display: flex;
        align-items: center;
        justify-content: center;       
    }  
    .Presentation_Texte>h1{
        text-align: center;
        line-height: 150px;
    }
    .Presentation_Texte>h2{
        text-align: center;
    }
    .Presentation_Image, .Presentation_Image:before{
        background: transparent;      
     }
}
@media screen and (min-width: 0px) and (max-width: 1200px) {
     .Presentation_Texte{
        width: 95vw;
    }     
}