/*---------------------*/
/*Vue Home*/
/*---------------------*/
/*Element globale*/
.Apropos{
    width: 100vw;
    min-height: 100vh;
    background-color: var(--color-blanc);				
    overflow: hidden;
}
.Apropos_Content{
    width: 100%;
    height: 100%;			
}
/*Les projets récents*/
/*Partie liste des projets*/
#EnglobeProjet{
    width: 100vw;
    min-height: 330px;
    margin: 0px auto 0px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 0px;			
    background-color: transparent;
}
.ElementProjet{
    display: flex;
    width: 27vw;
    height: calc(27vw * 0.5625);
    margin: 50px 0.5vw;
    position: relative;			
    transition: 0.4s ease all;	                        
}
.ElementprojetNom{
    height: 100%;
    text-align: center;
    font-size: 18px;
    font-family: "Poppins";
    font-weight: 400;
    padding-left: 5px;
    color: var(--color-main);
    display: flex;			   
    flex-direction: row;			    
    align-items: center;			    
    justify-content: center;
    writing-mode: vertical-rl;
    text-orientation: sideways-right;
    transition: 0.3s ease all;
}
.ElementprojetNom:first-letter {
    text-transform: uppercase;
}
.ElementProjetImage{
    width: 100%;
    height: 100%;				
    padding: 0%;
    text-align: center;
    border-radius: 10px;				
    overflow: hidden;
    z-index: 1;
    border-radius: 5px;		
    transition: 0.3s ease all;	
}
.ElementProjet img{
    width: 100%;
    height: 100%;
    border-radius: 3px;	
    overflow: hidden;
    transition: 0.3s ease all;
    object-fit: cover;
}
.ElementProjet:hover{	
    z-index: 10;
    transition: 0.3s ease all;
    filter: blur(0px) opacity(100%);
    cursor: pointer;				
}



.ElementProjet:hover img{
    transform: scale(1.1);
    transition: 0.4s ease all;
}

/*Bouton voir plus*/
.Apropos_VoirPlus{
    width: 180px;
    height: 40px;
    border:  2px solid var(--color-blanc);			
    font-size: 18px;
    text-align: center;
    font-weight: 700;
    margin: 20px 3vw 20px 0;
    /*float: right;*/
    display: inline-block;
    color: var(--color-blanc);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    
}
.Apropos_VoirPlus span{
    position: relative;
    z-index: 3;
}
.Apropos_VoirPlus:before{
    content: '';
    position: absolute;
    top: 6px;
    left: -2px;
    width: calc(100% + 4px);
    height: calc(100% - 12px);
    background: var(--color-noir);
    transition: 0.5s ease-in-out;
    transform: scaleY(0);
}
.Apropos_VoirPlus:hover:before{
    transform: scaleY(1);
}
.Apropos_VoirPlus:after{
    content: '';
    position: absolute;
    left: 6px;
    top: -2px;
    height: calc(100% + 4px);
    width: calc(100% - 12px);
    background: var(--color-noir);
    transition: 0.5s ease-in-out;
    transform: scaleX(0);		
    -webkit-transform: scaleX(0);		
    -moz-transform: scaleX(0);				
    transition-delay: 0.5s;
}
.Apropos_VoirPlus:hover:after{
    transform: scaleX(1);
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
}

.ElementProjetImage::after{
    content: attr(help);
    box-sizing: border-box;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 300;
    font-size: 1.3rem;
    color: var(--color-blanc);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    padding: 10px;
    opacity: 0;
    z-index: -1;
    transition: .3s ease opacity;
}
.ElementProjetImage:hover::after{
    opacity: 1;
    z-index: 100;
    transition: .3s ease opacity;
}


@media screen and (min-width: 0px) and (max-width: 1200px) {
    /*Partie liste des projets*/			
    .ElementProjet{
        width: 70vw;
        height: calc(70vw * 0.5625);
        margin: 5vh 0vw 5vh 0vw;
        border-radius: 6px;          
    }
    .ElementprojetNom{
        height: 100%;
        text-align: center;
        font-size: 23px;
        padding-left: 5px;
        font-weight: bold;
        transition: 0.3s;
        font-family: sans-serif;
        font-weight: 400;
        display: flex;			   
        flex-direction: row;			    
        align-items: center;			    
        justify-content: center;
        writing-mode: vertical-rl;
        text-orientation: sideways-right;
    }
    .ElementprojetNom:first-letter {
        text-transform: uppercase;
    }
    .ElementProjetImage{
        width: 100%;
        height: 100%;				
        margin: 0%;				
        padding: 0%;
        text-align: center;
        border-radius: 3px;				
        overflow: hidden;
        z-index: 1;
        border-radius: 5px;        
        transition: 1.2s;
    }
    .ElementProjetImage img{
        width: 100%;
        height: 100%;	
    }
    .ElementProjetImage:hover{
        transform: scale(1);
        transition: 1s;
        opacity: 1;
        z-index: 10;				
    }

}