.cacher  { display: none; }
.montrer { display: block; }

/* popin background */
.popin {
    display: none; 			/* Hidden by default */
    position: fixed; 		/* Stay in place */
    z-index: 1000; 			/* Sit on top */
    /*padding-top: 70px;   */	/* Location of the box */
    /*padding-left: 100px; */	/* Location of the box */
    left: 0;
    top: 0;
    width: 100%; 			/* Full width */
    height: 100%; 			/* Full height */
    overflow: auto; 		/* Enable scroll if needed */
    background-color: rgb(0,0,0); 		/* Fallback color */
    background-color: rgba(0,0,0,0.6); 	/* Black w/ opacity */
}

/* popin content */
.popin-content {
    background-color: #FFFBE6; /*#FDCA03*/
    margin: 0;
    padding: 0;
    border: 1px solid #888;
    width: 600px;
    height: 500px;
	position: absolute; /*fixed*/
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50% + 300;
}

/* popin info */
.popin-info {
    /*position: relative;*/
    background-color: #FFFBE6; /*#FDCA03*/
    margin: 0;
    padding: 0;
    border: 1px solid #888;
    width: 400px;
    height: 200px;
	position: fixed;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50% + 300;
}

/* popin confirmation */
.popin-confirmation {
    /*position: relative;*/
    background-color: #FFFBE6; /*#FDCA03*/
    margin: 0;
    padding: 0;
    border: 1px solid #888;
    width: 600px;
    height: 350px;
	position: fixed;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50% + 300;
}

/* popin confirmation */
.popin-user {
    /*position: relative;*/
    background-color: #FFFBE6; /*#FDCA03*/
    margin: 0;
    padding: 0;
    border: 1px solid #888;
    width: 600px;
    height: 350px;
	position: fixed;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50% + 300;
}

.popin-juge {
    /*position: relative;*/
    background-color: #FFFBE6; /*#FDCA03*/
    margin: 0;
    padding: 0;
    border: 1px solid #888;
    width: 800px;
    height: 530px;
	position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50% + 300;
}

/* Animation : */
/*    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s	*/
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}