
#admin{
	position: relative;
	width:100%;
	min-height: calc(100vh - 70px); /*pour le padding*/
	height: 100%;
	margin:0 auto;
	padding:20px 0 50px 0;
	background: linear-gradient(5deg, #52536c, #686985);
}











										/*  CONNECTION ADMIN */
											/*  CONNECTION ADMIN */	
#admin_connect_container{
	display: flex;
	width: 100%;
	height:100%;
	min-height: calc(100vh - 140px);
}
#admin input[type=submit]{
	cursor: pointer;
}
#admin_connect{
	display: table;
	padding-top: 30px;
	padding-bottom: 15px;
	box-shadow: 2px 2px 12px 3px #dadbff;
	border-radius: 5px;
	width:400px;
	max-width: 100%;
	margin:auto;
	background:rgba(20,70,20,0.2);
	backdrop-filter: blur(7px);
}
#admin h1{
	font-family: 'Roboto', sans-serif;
	font-weight: bold;
	text-align: center;
	max-width: 100%;
	word-break: break-word;
	color: #dadbff;
	font-size: 45px;
	user-select: none;

}
#admin_connect_avatar{
	position: relative;
	width:200px;
	max-width: 90%;
	aspect-ratio: 1/1;
	border-radius: 50%;
	overflow: hidden;
	margin:20px auto;
	border: 10px solid #dadbff;
}
#admin_connect_avatar img{
	margin:auto;
	width:100%;
}
#admin_connect h1{
	color: #dadbff;
	font-size: 35px;
}
#admin_connect form{
	margin:0 auto;
	max-width: 80%;
	text-align: center;
}
#admin_connect input{
	display: block;
	margin:20px auto;
	height:30px;
	border-radius: 5px;
	box-sizing: border-box;
	width: 100%;
	text-align: center;
	background: #dadbff;
	font-weight: bold;
	font-size: 1.05em;
}
										/*  CONNECTION ADMIN */
											/*  CONNECTION ADMIN */	




										/*   ADMIN CONNECTE*/
											/*  ADMIN CONNECTE*/	


#admin_disconnect{
	width: 100%;
	max-width: 1200px;
	padding:0;
	margin: 5px auto 30px auto;
	text-align: center;
}
#admin_disconnect form{
	padding:0;
	margin: 0;
}
#admin_disconnect input[type=submit]{
	border:none;
	background: none;
	padding:0;
	margin: 0;
	font-weight: bold;
	vertical-align: middle;
}
#admin_disconnect input[type=submit]:hover{
	text-decoration: underline;
}





#admin_connectected{
	position: relative;
	width:100%;
	max-width:1200px;
	margin: 0 auto;
	height: 100%;
	border: 1px solid #a4eefb;
	box-sizing: border-box;
}
#admin_menu{
	position: absolute;
	height:100%;
	width: 20%;
	left: 0;
	/*background:blue;*/
}
#admin_container{
	width:80%;
	height: 100%;
	/*background: grey;*/
	margin-left:20%;
}
#admin_content{
	position: relative;
	width: 100%;
	height:600px;
	background-color:rgba(255, 255, 255, 0.15);	
	overflow-y:scroll;
	box-sizing: border-box;
}



#admin_menu_icon{
	position: relative;
	height:200px;
	width:100%;
	box-sizing: border-box;
	user-select: none;
}
#admin_menu_icon img{
	position:absolute;
	left:15%;
	top:0;
	bottom: 0;
	margin: auto;
	width:70%;
	aspect-ratio: 1/1;
}

#admin_menu ul{
	position: relative;
	display: block;
	height: calc(100% - 200px);
	border-right: 1px solid #a4eefb;
	user-select: none;
}
#admin_menu li{
	display: flex;
	justify-content: center;
	text-align: center;
  	flex-direction: column;
	list-style-type:none;
	height:20%;
	font-family: Arial;
	font-size:22px;
	font-weight:bold;
	border-top: 1px solid #a4eefb;
	box-sizing: border-box;
	color: #dadbff;
}

#admin_menu li:hover{
	cursor: pointer;
	opacity:0.8;
	background: rgba(0, 0, 0, 0.1);
	color: #aff3ff;
}


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

	#admin_menu li{
		font-size:17px;

	word-break: break-word;
	}
}



#admin_content h1{
	margin:10px auto;
	user-select: none;
}


#admin_content h2{
	display: block;
	text-align: center;
	font-size: 25px;
	font-family: Arial;	
	margin: 25px 0 15px 0;
	text-shadow: 1px 1px 2px #303030, 0 0 1em #dadbff, 0 0 0.2em #dadbff;
	user-select: none;
	/*text-shadow: #dadbff 6px 6px 6px;*/

}




/*                            M O D U L E    D A S H B O A R D                   */
/*                            M O D U L E    D A S H B O A R D                   */
/*                            M O D U L E    D A S H B O A R D                   */

#admin_dashboard_content{
	width:100%;
	margin:0 auto;
	padding: 20px 0;
	background-color:rgba(25, 180, 100, 0.1);
	border-radius: 10px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
}

	
#admin_dashboard_stats_header{
	margin-top:15px;
	padding:15px 0;
	width: calc(100% - 40px);
	text-align: center;
	font-size: 26px;
	color: #333333;
	text-shadow: 1px 1px 2px #303030, 0 0 1em #dadbff, 0 0 0.2em #dadbff;
	user-select: none;

}


.admin_dashboard_stats{
	min-height:70px;
	width: 200px;
	background-size:90px 90px;
	background-repeat: no-repeat;
	background-position: 50% 0;
	margin: 30px 0 0 0;
	padding: 105px 0 10px 0;
	user-select: none;
}
.admin_dashboard_stats:hover{
	background-color: rgba(0, 0, 0, 0.1);
}
.admin_dashboard_stats p{
	font-family: Arial, sans-serif;
	text-align: center;
}
.admin_dashboard_stats p.stats1{
	font-size: 40px;
	font-weight: bold;
	color:#d4e6f4;
}
.admin_dashboard_stats p.stats2{
	font-family: 'Preahvihear', sans-serif;
	font-size: 24px;
	font-weight: bold;
	color:#e9f5ff;
}
.admin_dashboard_stats p.stats3{
	font-size: 11px;
	color:#e9f5ff;
}
@media screen and (max-width: 829px){
	.admin_dashboard_break{
		display: none;
	}
	.admin_dashboard_stats{
		width: calc(100% - 40px);
	}
}

#admin_dashboard_stats_views{
	background-image: url('../img/kit/admin/vues.png');
}
#admin_dashboard_stats_likes{
	background-image: url('../img/kit/admin/likes.png');
}
#admin_dashboard_stats_shares{
	background-image: url('../img/kit/admin/shares.png');
}
#admin_dashboard_stats_posts{
	background-image: url('../img/kit/admin/posts.png');
}
#admin_dashboard_stats_tutos{
	background-image: url('../img/kit/admin/tutos.png');
}
#admin_dashboard_stats_actus{
	background-image: url('../img/kit/admin/actus.png');
}





#admin_dashboard_notepad{
	margin-top: 20px;
	padding:20px 0;
	width:calc(100% - 40px);
	color:#d4e6f4;
	font-family: Arial, sans-serif;
	font-weight: bold;
	text-align: center;
	font-size: 26px;
	font-family: 'Preahvihear', sans-serif;
}
#admin_dashboard_notepad textarea{
	padding:10px 2%;
	resize: none;
	width:90%;
	height: 400px;
	margin:0 auto;
	border:none;
	overflow-y: scroll;
	font-family: 'Preahvihear', sans-serif;
	background-color:#e9f5ff;
}




/*                        F I N    M O D U L E    D A S H B O A R D                   */
/*                        F I N    M O D U L E    D A S H B O A R D                   */
/*                        F I N    M O D U L E    D A S H B O A R D                   */


/*                            CONTACT                           */
/*                            CONTACT                            */
/*                            CONTACT                            */


.admin_contact_nextprev{
	display: inline-table;
	padding:20px 0;
	text-align: center;
	width: 150px;
	margin:20px auto;
	background-color: rgba(20, 40, 120, 0.4);
	box-sizing: border-box;
	border:1px solid #323f80;
	color:#c5cfff;
	font-family: Arial,sans-serif;
	font-size: 20px;
	font-weight: bold;
	border-radius: 5px;
	cursor: pointer;
}
.admin_contact_nextprev:hover{
	background-color: rgba(20, 40, 120, 0.6);
}

.admin_contact_element{
	border:1px solid white;
	box-sizing: border-box;
	margin-bottom: 10px;
}
.admin_contact_element:hover{
	background-color: rgba(255, 255, 255, 0.1);
}
.admin_contact_element h3{
	display: inline-table;
	padding:10px 0 0 10px;
	font-size:20px;
	font-family: Arial, sans-serif;
	cursor: pointer;
}
.admin_contact_element p{
	display: inline-table;
	padding:0 0 10px 15px;
	color:#393939;
	cursor: pointer;
}

.admin_content{
	display: none;
}





/*                            F I N    M O D U L E    C O N T A C T                            */
/*                            F I N    M O D U L E    C O N T A C T                            */
/*                            F I N    M O D U L E    C O N T A C T                            */




/*           COMMUN POSTS / ACTUS / BOUTIQUE           */
	/*           COMMUN POSTS / ACTUS / BOUTIQUE           */
		/*           COMMUN POSTS / ACTUS / BOUTIQUE           */
	/*           COMMUN POSTS / ACTUS / BOUTIQUE           */
/*           COMMUN POSTS / ACTUS / BOUTIQUE           */
.admin_step1{
	position: absolute;
	width: 100%;
}
.admin_step1_btn{
	position: relative;
	background-color: rgba(0, 0, 0, 0.2);	
	font-weight: bold;
	font-family: Arial, sans-serif;
	text-align: center;
	cursor: pointer;
	overflow: hidden;
	border-radius: 5px;
	box-sizing: border-box;
}
.admin_step1_btn:hover{
	background-color: rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(255, 255, 255, 0.7);
	p{
		background-color: rgba(255, 255, 255, 0.4);
		color: rgba(0, 0, 0, 0.6);
	}
}
.admin_step1_btn p{
	position: absolute;
	bottom: 0;
	width:100%;
	background-color: rgba(255, 255, 255, 0.2);
	color: rgba(255, 255, 255, 0.8);
	padding:5px;
}

.admin_step1_btn_add{
	background-image: url(../img/kit/admin/add.png);
}
.admin_step1_btn_mod{
	background-image: url(../img/kit/admin/modify.png);
}
.admin_step1_btn_del{
	background-image: url(../img/kit/admin/delete.png);
}

@media screen and (min-width : 801px){
	.admin_step1{
		display: flex;
		justify-content: space-evenly;
		margin-top: 120px;
	}
	.admin_step1_btn{
		width: 30%;
		max-width: 240px;
		aspect-ratio: 1/1;
		float: left;
		background-size: 50% 50%;
		background-position: 50% 24%;
		background-repeat: no-repeat;
		font-size:28px;
	}
}
@media screen and (max-width : 800px){
	.admin_step1{
		padding-top: 20px;
		min-height: 100%;
	}
	.admin_step1_btn{
		max-width: 200px;
		width: 90%;
		aspect-ratio: 1/1;
		margin: 0 auto 20px auto;
		background-size: 50% 50%;
		background-position: 50% 20%;
		background-repeat: no-repeat;
		font-size:25px;

	}

}
.btn_admin_back{
	display: table;
	margin: -15px auto 20px auto;
	font-family: 'preahvihear',sans-serif;
	font-size: 17px;
	font-weight: bold;
	cursor: pointer;
	background: none;
	border: none;
	color:rgba(0, 0, 0, 0.7);
	user-select: none;
}

.btn_admin_back:hover{
	color:rgba(0, 0, 0, 0.9);
}
.admin_step label{
	display: block;
	width:600px;
	max-width: 90%;
	font-family: Arial, sans-serif;
	font-size: 25px;
	font-weight: bold;
	margin:0 auto 5px auto;
	color:rgba(255, 255, 255, 0.8);
	user-select: none;
}
.admin_step textarea, .admin_step input, .admin_step select{
	display: block;
	width:600px;
	max-width: 90%;
	margin:0 auto 20px auto;
	min-height:50px;
	box-sizing: border-box;
	font-size: 20px;
}
.admin_step select{
	text-align: center;
	padding:10px 15px;
}
.admin_step input{
	padding:10px 15px;
}
.admin_step textarea{
	resize: vertical;
	padding:10px 15px;
}

.admin_submit{
	display: table;
	margin: 20px auto;
	width:400px;
	max-width: 90%;
	background-color: rgba(0, 0, 0, 0.2);
	color: rgba(255, 255, 255, 0.8);
	font-size: 30px;
	font-family: 'preahvihear',sans-serif;
	font-weight: bold;
	text-align: center;
	padding:20px;
	border:none;
	box-sizing: border-box;
}
.admin_submit:hover{
	background-color: rgba(255, 255, 255, 0.2);
	color: rgba(0, 0, 0, 0.6);
}
p.admin_p_intro{
	display: table;
	background-color: rgba(0, 0, 0, 0.1);
	width:600px;
	max-width: 90%;
	padding:20px 0;
	margin: 0 auto 20px auto;
	text-align: center;
	color:rgba(255, 255, 255, 0.7);
	font-size: 20px;
	font-weight: bold;
	font-family: Arial, sans-serif;
	user-select: none;
}
p.admin_error{
	display: table;
	margin:0 auto;
	color: red;
	font-size: 22px;
	font-weight: bold;
	font-family: Arial, sans-serif;
	color:red;
}
.admin_step button{
	cursor: pointer;
}


/*           COMMUN POSTS / ACTUS / BOUTIQUE           */
	/*           COMMUN POSTS / ACTUS / BOUTIQUE           */
		/*           COMMUN POSTS / ACTUS / BOUTIQUE           */
	/*           COMMUN POSTS / ACTUS / BOUTIQUE           */
/*           COMMUN POSTS / ACTUS / BOUTIQUE           */





/*                            DEBUT    POSTS                              */
 	/*                            DEBUT    POSTS                              */
/*                            DEBUT    POSTS                              */
.add_post_chapitre,.mod_post_chapitre{
	display: block;
	width: 650px;
	max-width:90%;
	border: 1px solid rgba(255, 255, 255, 0.7);
	box-sizing: border-box;
	border-radius: 3px;
	margin:30px auto 0 auto;
	padding:20px 0;
}
.add_post_chapitre input[type="text"], .mod_post_chapitreinput[type="text"]{
	max-width:96%;
}
.add_post_chapitre textarea, .mod_post_chapitre textarea{
	min-height: 200px;
	max-width:96%;
}

.div_add_post_image, #div_add_post_principalImg, .div_mod_post_image, #div_mod_post_principalImg{
	position: relative;
	display: inline-block;
	margin: 0 1% 20px 0;
	width:200px;
	max-width: 30%;
	aspect-ratio: 1/1;
	border-radius: 5px;
	box-sizing: border-box;
	border: 5px solid rgba(255, 255, 255, 0.2);
	background-color:rgba(0, 0, 0, 0.2);
	background-image: url(../img/kit/instagram.png);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
.div_add_post_image input[type="file"], #div_add_post_principalImg input[type="file"],.div_mod_post_image input[type="file"], #div_mod_post_principalImg input[type="file"]{
	display: block;
	height:100%;
	width: 100%;
	cursor: pointer;
	opacity: 0;
}

.add_post_image_empty, #add_post_principalImg_empty, .mod_post_image_empty, #mod_post_principalImg_empty{
	position: absolute;
	top:0;
	right:0;
	padding: 5px;
	background-color: rgba(0, 0, 0, 0.8);
	color:rgba(255, 255, 255, 0.7);
	cursor:pointer;
	font-weight: bold;
	font-size: 1.2em;
	font-family: Arial, sans-serif;
	z-index: 10;
	user-select: none;
}

/*                           FIN       POSTS                              */
	/*                           FIN       POSTS                              */
/*                           FIN       POSTS                              */




/*                          DEBUT   ACTUS                               */
	/*                          DEBUT   ACTUS                               */
/*                          DEBUT   ACTUS                               */



#add_actu_intro{
	min-height: 80px;
}
#add_actu_content{
	min-height: 120px;
}
#add_actu_photo_confirm{
	display: table;
	margin:0 auto 20px;
}
#add_actu_photo_input{
	display: table;
	margin: 0 auto 20px auto;
	background-color: rgba(255, 255, 255, 0.1);
	padding:15px 10px;
}

#btn_cont_addactu1{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width:80%;
	margin:0 auto 20px auto;
}
.add_actu_btn{
	margin: 0 20px 10px 0;
	padding:20px 45px 20px 5px;
	background-color: rgba(0, 0, 0, 0.1);
	background-repeat: no-repeat;
	background-position: calc(100% - 5px) 50%;
	background-size: 30px 30px;
	font-size: 20px;
	font-weight: bold;
	cursor: pointer;
	border:none;
	border-radius: 10px;
	color:#d4e6f4;
}
.add_actu_btn:hover{
	background-color: rgba(0, 0, 0, 0.2);
}
#add_actu_preview_btn{	
	background-image: url('../img/kit/admin/apercu.png');	
}
#add_actu_submit{
	background-image: url('../img/kit/admin/confirm.png');
}

#add_actu_photo_confirm button{
	opacity:0.5;
	color:grey;
	padding:5px 10px;
	font-size: 16px;
	border-radius: 5px;
}

#add_actu_photo_confirm button:disabled{
	color:black;
	opacity:1;
	border:1px solid blue;
}



#add_actu_preview_box{
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height:100vh;
	overflow-y: scroll;
	display: none;
	background-color: white;
}
#add_actu_preview_box_close{
	width:50px;
	height: 50px;
	position: absolute;
	right: 0;
	background-color: rgba(0, 0, 0, 0.2);
	font-size: 40px;
	text-align: center;
	font-family: Arial, sans-serif;
	font-weight: bold;
	line-height: 50px;
	cursor: pointer;
}

#admin_actu{
	position: relative;
	min-height: calc(100% - 65px);
	width: 100%;
}















/*                          FIN   ACTUS                               */
/*                          FIN   ACTUS                               */
/*                          FIN   ACTUS                               */




/*                           BOUTIQUE   BOUTIQUE                             */
/*                           BOUTIQUE   BOUTIQUE                             */
/*                           BOUTIQUE   BOUTIQUE                             */


#admin_boutique{
	position: relative;
	min-height: calc(100% - 65px);
	width: 100%;
}



/*                 ETAPE 2    ETAPE 2    ETAPE 2            */
	/*                 ETAPE 2    ETAPE 2    ETAPE 2            */
		/*                 ETAPE 2    ETAPE 2    ETAPE 2            */





.admin_add_inputfile_container{
	background-color: rgba(0, 0, 0, 0.1);
	width:600px;
	max-width: 90%;
	padding:20px 0;
	margin: 20px auto 20px auto;
}
.admin_modify_inputfile_container img{
	display: table;
	width: 90%;
	max-width: 250px;
	max-height:250px;
	margin:0 auto 20px auto;
	cursor: pointer;
}
.admin_modify_image_cancel{
	display: table;
	margin: 0 auto 20px auto;
	width:90%;
	max-width: 250px;
	padding:20px;
	font-weight: bold;
	font-family: Arial, sans-serif;
	font-size: 20px;
	cursor: pointer;
	background-color: rgba(255, 255, 255, 0.2);
	color: rgba(0, 0, 0, 0.6);
	text-align: center;
}
.admin_modify_image_cancel:hover{
	background-color: rgba(255, 255, 255, 0.4);
	color: rgba(0, 0, 0, 0.8);
}







/*                           BOUTIQUE   BOUTIQUE                             */
/*                           BOUTIQUE   BOUTIQUE                             */
/*                           BOUTIQUE   BOUTIQUE                             */