.contenu_conteneur_modal{
    position: absolute;
    left: 0;
    top: 0;
    width: 100% ;
    height: 100%;
    background: transparent ;
}

.contenu_fond{
    position: absolute;
    left: 0;
    top: 0;
    width: 100% ;
    height: 100%;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(#ffddaa));
    background: -webkit-linear-gradient(#ffffff, #ffddaa);
    background: -moz-linear-gradient(#ffffff, #ffddaa);
    background: -ms-linear-gradient(#ffffff, #ffddaa);
    background: -o-linear-gradient(#ffffff, #ffddaa);
    background: linear-gradient(#ffffff, #ffddaa);
    -pie-background: linear-gradient(#ffffff, #ffddaa);
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    cursor: pointer;
    opacity : 0 ;
}

.contenu_fond_active{
    opacity : 0.75;
}

.contenu_pages{
    /*    Other  */
    left: 49.5%;
    top: 49.5%;
    bottom: 49.5%;
    right: 49.5%;
    -webkit-box-shadow: #000 0px 10px 20px;
    -moz-box-shadow: #000 0px 10px 20px;
    box-shadow: #000 0px 10px 20px;
    
    position: absolute;
    left: 49.5vw;
    top: 49.5vw;
    bottom: 49.5vw;
    right: 49.5vw;
    overflow: visible;
    opacity : 0;
    background: rgba(0,0,0,0.5);
    -webkit-box-shadow: #000 0px 1vw 2vw;
    -moz-box-shadow: #000 0px 1vw 2wv;
    box-shadow: #000 0px 1vw 2vw;
     -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.contenu_pages_active{
    /*    Other  */
    left: 2%;
    top: 2%;
    bottom: 2%;
    right: 2%;
    
    left: 2vw;
    top: 2vw;
    bottom: 2vw;
    right: 2vw;
    opacity : 1;
}

.contenu_pages_body{
    position: absolute;
    left: 1%;
    top: 1%;
    width: 98%;
    height: 98%;
    overflow: visible;
    background: transparent ;
}

.header{
    /*    Other  */
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    
    
    position: absolute;
    background: transparent ;
    border: 1px solid #f00;
    bottom: 100% ;
    right:  -2% ;
    width: 15%;
    min-width: 100px;
    height: 5% ;
    min-height: 25px;
    -webkit-border-radius: 3vw;
    -moz-border-radius: 3vw;
    border-radius: 3vw;
    overflow: hidden;
    opacity : 0 ;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.header_active {
    opacity : 1 ;
}

.common_btn_icon{
    background-size : 100% 100% ; 
   
}