/************************************************* Les boites *************************************************/

/* ASIDE */
.droitePage{
	float: left;
	width: 300px;
	margin-top: 1px;
}.droitePage .lienDroite{
	color: #34495e;
	padding: 0px;
	margin: 0px;
	border-top: none;
}.droitePage .lienDroite:hover{
	padding: 0px;
	margin: 0px;
	background-color: white;
	color: #3498db;
}.droitePage h3{
	padding: 25px 10px;
	margin : 0;
	text-align: center;
}.droitePage a{
	display: block;
	transition: padding 0.5s, background 0.5s;
	padding: 10px;
	border-top: 1px solid #ecf0f1;
}.droitePage a:hover{
	background: #ecf0f1;
	padding-left: 15px;
	padding-right: 5px;
}
.droitePage .special{
	margin-left: 0;
	width: 100%;
	text-align: center;
}.droitePage .special a{
	border: 1px solid white;
	background-color: #4aa3df; 
	border-radius: 3px;
	color: white;
	font-weight: 400;
	font-size: 14px;
}.droitePage .special a:hover{
	border: 1px solid #4aa3df;
	background: white;
	border-radius: 3px;
	padding-left: 10px;
	padding-right: 10px;
	color: #4aa3df;
}
.droitePage img{
	object-fit: cover;
	border-radius: 2px;	
}.droitePage li:hover p{
	color: #34495e;
}.droitePage p{
	display: inline-block;
	vertical-align: middle;
	margin-left: 10px;
	width: 215px;
	font-weight: 700;
	color: #7f8c8d;
	transition: color 0.5s;
	font-size: 15px;
}
article{
	padding: 5px;
	box-shadow: 1px 1px 2px #d2d2d2;
	background-color: white;
}
.article_gris{
	background-color: #ecf0f1;
}
.box{
	box-shadow: 1px 1px 2px #d2d2d2;
	padding: 10px 20px;
	background-color: white;
	margin-bottom: 5px;
	border-radius: 2px;
}.succesBox{
	box-shadow: 1px 1px 2px #d2d2d2;
	padding: 20px;
	background-color: white;
	margin-bottom: 5px;
	border-radius: 2px;
	border: 1px solid #2ecc71;
	text-align: center;
}.errorBox{
	box-shadow: 1px 1px 2px #d2d2d2;
	padding: 20px 20px;
	background-color: white;
	margin-bottom: 5px;
	border-radius: 2px;
	border: 1px solid #e74c3c;
	text-align: center;
}
.ajout{
	box-shadow: 1px 1px 2px #d2d2d2;
	padding: 10px 20px;
	background-color: white;
	margin-bottom: 5px;
}
.filtre{
	display: inline-block;
	line-height: normal;
}.plusDeFiltre{
	display: none;
}
.twoColumnBox{
	box-shadow: 1px 1px 2px #d2d2d2;
	padding: 0 20px;
	background-color: white;
	margin-bottom: 5px;
	border-radius: 2px;
}.twoColumnBox .gauche{
	display: inline-block;
	vertical-align: middle;
	line-height: 64px;
	width: 560px;
	box-sizing: border-box;
	margin: 0;
}.twoColumnBox .gauche label{
	display: block;
	font-size: 12px;
}.twoColumnBox .filtre input{
	border-radius: 3px;
	padding: 11px;
	font-size: 13px;
	border: 1px solid #bdc3c7;
}
.twoColumnBox .droite{
	display: inline-block;
	vertical-align: middle;
	text-align: right;
	width: 350px;
	box-sizing: border-box;
}.twoColumnBox .droite input{
	font-size: 16px;
}.twoColumnBox .p{
	line-height: normal;
}.twoColumnBox li a{
	display: block;
	padding: 10px 15px;
}
.twoColumnBox li{
	display: inline-block;
	vertical-align: middle;
	text-align: center;	
	border-radius: 3px;
	line-height: 38px;
	font-size: 18px;
	margin: 0 2px;
}
.twoColumnBox li:hover{
	color: #3498db;
	background-color: #ecf0f1;
}
.twoColumnBox li:active{
	color: #34495e;
	background-color: silver;
}
.numero_page_active p{
	background-color: #3498db;
	color: white;
	border-radius: 3px;
	padding: 10px 15px;
}
.twoColumnBox .ppp:hover{
	background-color: white;
	color: #34495e;
}
.paginationBox{
	margin-bottom: 20px;
}
.paginationBox .gauche{
	width: 350px;
}.paginationBox .droite{
	text-align: left;
	width: 595px;
}.list_num_page{
	display: inline;
}.mob_page{
	display: none;
}

.onglet{
	border-radius: 3px 3px 0 0;
	border: 1px solid white;
	border-bottom: none;
	box-shadow: inset 1px -1px 10px #d2d2d2;
}
.onglet h2{
	display: inline-block;
	vertical-align: middle;
	margin: 0;
	font-size: 16px;
}.onglet .actif{
	display: inline-block;
	vertical-align: middle;
	margin: 0;
	border-radius: 3px 3px 0 0;
	margin-right: 10px;
	background-color: white;
	border: 1px solid white;
}.onglet .inactif a{
	padding: 10px 15px;
	color: #7f8c8d;
	display: block;
}.onglet .inactif{
	display: inline-block;
	vertical-align: bottom;
	margin: 0;
	border-radius: 3px 3px 0 0;
	margin-right: 10px;
	background-color: #ecf0f1;
	border: 1px solid white;
	border-bottom: none;
}.onglet .actif{
	padding: 15px;
	color: #34495e;
}.onglet .inactif:hover{
	background-color: white;
	cursor: pointer;
}
.onglet div{
	display: inline-block;
	vertical-align: middle;
}.onglet .inactif a:hover{
	color: black;
}
/************************************************* Les block *************************************************/
.rang, .rangF{
	display: inline-block;
	font-size: 28px;
	vertical-align: middle;
	line-height: 108px;
	width: 100px;
	text-align: center;
	font-weight: 700;
}.rangP{
	display: inline-block;
	font-size: 30px;
	vertical-align: middle;
	width: 100px;
	text-align: center;
	font-weight: 700;
}.rang sup, .rangF sup{
	font-weight: 400;
	font-size: 14px;
}.non_classe{
	display: inline-block;
	font-size: 20px;
	vertical-align: middle;
	width: 100px;
	text-align: center;
	font-weight: 700;
}.the_best_img{
	position: absolute;
	margin-left: -23px;
	margin-top: -3px;
	width: 45px;
}
.vote{
	display: inline-block;
	vertical-align: middle;
	padding: 0;
	width: 112px;
}
.vote .shadow{
	border: 1px solid #bdc3c7;
	box-shadow: 1px 1px 2px #d2d2d2;
}
.vote p{
	text-align: center; 
	font-weight: 700;
}
.nbVote{
	display: inline-block;
	vertical-align: middle;
	font-size: 12px;
	width: 66px;
	text-align: left;
	color: #7f8c8d;
	font-weight: 700;
}.infoVote{
	font-size: 10px; 
	text-align: center; 
	color: #7f8c8d; 
	padding: 2px;
	border: 1px solid #ecf0f1;
}.pour{
	display: block;
	text-align: center;
	border-radius: 3px;
	border: 1px solid #ecf0f1;
	box-shadow: 1px 1px 2px #ecf0f1;
	margin: 5px 0;
}.contre{
	display: block;
	text-align: center;
	border-radius: 3px;
	border: 1px solid #ecf0f1;
	box-shadow: 1px 1px 2px #ecf0f1;
	margin: 5px 0;
}.pour img, .contre img{
	margin-bottom: 0;
	border-radius: 3px;
}.pour:hover{
	border: 1px solid #3498db;
	position: relative;
}.contre:hover{
	border: 1px solid #e74c3c;
	position: relative;
}.contre:focus{
	outline-color: #e74c3c;
}.pour_valide{
	display: block;
	text-align: center;
	border-radius: 0 0 3px 3px;
	border: 1px solid white;
	background-color: #fbfcfc;	
}.contre_valide{
	display: block;
	text-align: center;
	border-radius: 0 0 3px 3px;
	border: 1px solid white;
	background-color: #fbfcfc;
	
}.pour_valide img, .contre_valide img{
	margin-bottom: 0;
	border-radius: 3px;
}
.image{
	display: inline-block;
	vertical-align: middle;
	border-radius: 2px;
	width: 150px; height: 150px;
	margin-left: 10px;
}.photo{
	width: 150px; height: 150px;
	object-fit: contain;
}.no_photo{
	width: 150px; height: 150px;
	object-fit: none;
	margin-bottom: -3px;
	background-color: #bdc3c7;
	border-radius: 3px;
}
.art_rgt{
	vertical-align: middle;
	width: 70%;
	display: inline-block;
	max-height: 140px;
	margin: 18px 0 0 18px;
}.art_rgt_votable_photo{
	display: inline-block;
	vertical-align: middle;
	width: 59%;
	margin-left: 20px;
	max-height: 140px;
	margin: 18px 0 0 18px;
}.art_rgt_votable_no_photo{
	display: inline-block;
	vertical-align: middle;
	width: 75%;
	margin: 0 0 0 18px;
}.art_rgt_no_votable_no_photo{
	display: inline-block;
	vertical-align: middle;
	width: 75%;
	margin: 18px 0 0 18px;
}.art_rgt_commentaire{
	display: inline-block;
	vertical-align: middle;
	width: 84%;
	margin: 18px 0 0 18px;
}.art_rgt_grand{
	display: inline-block;
	vertical-align: middle;
	width: 840px;
	margin: 18px 0 0 18px;
}
.nom_value p, .nom_value a{
	color: #7f8c8d;
	
	font-weight: 400;
}.nom_value h2{
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin: 0;
	padding: 0;
	font-size: 24px;
}.nom_value h2 a{
	
	color: #34495e;
}.nom_value h2 a:hover{
	text-decoration: underline;
	color: #3498db;
}.description{
	display: inline-block;
	vertical-align: middle;
	margin: 0;
	padding-top: 10px;
	font-size: 14px;
}
.art_rgt_commentaire .nom_value{
	display: inline-block;
	vertical-align: middle;
	max-width: 90%;
}.art_rgt_commentaire h2{
	margin: 0;
	font-size: 18px;
	color: #7f8c8d;
	font-weight: 400;
}.art_rgt_commentaire h2 span{
	color: #34495e;
	font-size: 16px;
}.art_rgt_commentaire .description{
	display: block;
}				
.droite_bas{
	
	font-size: 12px;

	line-height: 20px;
	padding-top: 5px;
}.droite_bas a{
	display: inline-block;
	vertical-align: middle;
	margin-left: 15px;
	
	font-weight: 400;
}.droite_bas a:hover{
	text-decoration: underline;
}.droite_bas span span{
	color: #34495e;
}
.stat{
	text-align: right;
}
.stat p, .stat a{
	display: inline-block;
	vertical-align: middle;
	margin-left: 12px;
	color: #7f8c8d;
	font-size: 10px;
}.stat a:hover{
	text-decoration: underline;
}.stat img{
	margin: 0;
}
.infobulle{
	position: absolute;
	background: #000;
	padding: 3px 7px;
	border-radius: 3px;
	color: white;
	text-align: center;
}					
/************************************************* Les placements *************************************************/
.inline_block_middle{
	display: inline-block;
	vertical-align: middle;
}.inline_block_bottom{
	display: inline-block;
	vertical-align: bottom;
}
.article_droite{
	display: inline-block;
	vertical-align: top;
	width: 800px;
}
/************************************************* Les titres *************************************************/
.rightBox h3{
	padding-bottom: 20px;
	margin: 22px 10px;
	border-bottom: 1px solid #ecf0f1;
	text-align: center;
}.ecrireComm form{
	border-radius: 3px;
}.ecrireComm h3{
	margin: 0;
	padding: 0;
	margin-bottom: 15px;
}.msg h3{
	margin-top: 10px;
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid #ecf0f1;
}.twoColumnBox h3{
	color: #7f8c8d;
	font-weight: 400;
	line-height: normal;
}.twoColumnBox h3 span{
	color: #34495e;
}h4{
	margin: 0px;
	display: inline-block;
	vertical-align: middle;
	margin-right: 10px;

}
/************************************************* Les alignements *************************************************/
.center{
	text-align: center;
}.left{
	text-align: left;
}
/************************************************* Les textes *************************************************/	
.succes{
	font-weight: 700;
	color: #2ecc71;
}.error{
	font-weight: 700;
	color: #e74c3c;
}
/************************************************* Les couleurs *************************************************/
.grisee{
	color: #7f8c8d;
	font-size: 12px;
	padding-top: 7px;
	font-weight: 400;
}.blue{
	color: #3498db;
}.blue_f{
	color: #2980b9;
}.red{
	color: #e74c3c;
}
.border_red{
	border: 1px solid #c0392b;
}
/************************************************* Le restes *************************************************/
.new_titre{
	width: 886px;
	padding: 10px;
	border-radius: 2px 2px 0 0;
	border: 1px solid rgb(169, 169, 169);
}
.base{
	-webkit-filter: grayscale(50%);
	filter: grayscale(50%);
}
.voteCom{
	display: inline-block;
	vertical-align: top;
	margin-right: 20px; 
	width: 80px;
	text-align: center;
}
.bas{
	width: 	800px;
}
select{
	padding: 10px;
	border-radius: 3px;
	cursor: pointer;
	font-weight: 700;
	font-size: 14px;
	border: 1px solid #bdc3c7;
	
}select:focus{
	border-radius: 3px 3px 0 0;
}
.search_art{
	width: 255px;
}
.prix{
	width: 30px;
}		
.input_com{
	padding: 5px;
	width: 985px;
	height: 50px;
	margin-bottom: 5px;
}.list_com_art{
	background-color: white;
	padding: 5px;
	width: 985px;
	margin-bottom: 5px;
}				
/* AJOUT ARTICLE */
.modifBox{
	box-shadow: 1px 1px 2px #d2d2d2;
	border-radius: 2px;
	padding: 20px;
	background-color: white;
	margin-bottom: 20px;
	margin-top: 5px;
	color: #7f8c8d;
}
	.modifBox p{
		margin: 10px 0;
	}
	.formNewArtC{
		display: none;
	}
	.formNewArtA{
		display: block;
		padding: 30px 20px 10px 20px;
	}
	.modifBox .titreNewArt{
		padding: 15px;
		width: 883px;
		font-weight: 700;
		font-size: 18px;
	}
	.modifBox .textNewArt{
		padding: 16px;
		width: 883px;
		height: 90px;
		resize: vertical;
		font-size: 16px;
	}
	.modifBox .new_art_r{
		float: left;
		border: 1px solid #3498db;
	}
/* PAGE *//* SECTION *//* ARTICLE */
.avatar{
	display: inline-block;
	vertical-align: middle;
	width: 45px;
	height: 45px;
	margin-right: 10px;
	text-align: center;
	line-height: 45px;
}.avatar img{
	max-width: 100%;
	max-height: 100%;
}
.deconnexion{
	background-color: white;
	border-radius: 3px;
	text-align: center;
}
	.deconnexion p{
		padding: 50px;
		font-weight: 700;
	}
.error_box{
	background-color: white;
	border-radius: 3px;
	padding: 20px;
	margin-bottom: 30px;
	text-align: center;
	box-shadow: 1px 1px 2px #d2d2d2;
}
	.erreur{
		font-weight: 700;
		color: #e74c3c;
	}
	.no_error{
		font-weight: 700;
		color: #2ecc71;
	}
	.validation{
		font-weight: 700;
		color: #27ae60;
	}

article{
	box-shadow: 1px 1px 2px #d2d2d2;
	background-color: white;
	margin-bottom: 5px;
	padding: 40px 20px;
	border-radius: 3px;
	text-align: center;
}
	article a {
		font-weight: 700;
	}
	table{
		margin: auto;
		text-align: left;
		border-collapse: collapse;
	}
		.td_lft{
			text-align: right;
			font-weight: 700;
		}
		.td_center{
			text-align: center;
		}
		/**************** PROFIL **********************/
		.profil table td{
			padding: 7px 10px;
		}
			.chbx{
				height: 28px;
				width: 28px;
				margin: 0;
				text-align: center;
			}
			.vote_button{
				border: 1px solid silver;
				border-radius: 3px;
				width: 40px;
			}
			.submit{
				font-weight: 700;
				padding: 7px;
			}
		.newsletter{
			text-align: center;
		}
		.newsletter input{
			background-color: #2980b9;
			font-weight: 700;
			color: white;
			border-radius: 3px;
			border: none;
			padding: 20px;
			width: 250px;
			font-size: 15px;
		}
			.newsletter input:hover{
				background-color: #3498db;
			}
	/**************** CONNEXION **********************/
	.connect{
		padding: 9px;
		width: 200px;
		margin: 20px 10px;
	}	
		.connect_red{
			padding: 9px;
			width: 200px;
			margin: 20px 10px;
			border: 1px solid #e74c3c;
		}
	.input_text{
		padding: 10px;
		border-radius: 3px;
		font-size: 14px;
		border: 1px solid #bdc3c7;
		margin: 10px;
		width: 233px;
	}.input_text_invalid{
		padding: 9px;
		width: 200px;
		border: 1px solid #e74c3c;
		margin: 10px;
	}.input_text_disabled{
		background-color: rgb(235, 235, 228); 
		border: 1px solid #a9a9a9;
		font-weight: 400;
		padding: 10px;
		width: 200px;
		margin: 10px 20px;
	}
	.input_radio{
		margin: 10px 18px;
	}.input_radio_invalid{
		border: 1px solid #a9a9a9;
		margin: 10px 20px;
	}
	.input_checkbox{
		margin: 10px 14px;
		position: relative;
		top:2px;
	}.input_checkbox_invalid{
		border: 1px solid #a9a9a9;
		margin: 10px 20px;
	}


	fieldset
	{
		border: none;
		border-top: 1px solid silver;	
		margin: 30px 0;
		padding: 0;
	}
		legend
		{
			text-align: center;
			color: grey;
		}

	/**************** INSCRIPTION **********************/
	.inscr{
		border: 1px solid #a9a9a9;
		padding: 10px;
		width: 200px;
	}
		.inscription table td{
			padding: 7px 10px;
		}
		.info{
			display: inline-block;
			vertical-align: middle;
			font-weight: 700;
			margin-left: 15px;
		}
		.bg_grey{
			background-color: rgb(235, 235, 228); 
			border: 1px solid #a9a9a9;
			font-weight: 400;
			padding: 10px;
			width: 200px;
		}

@media all and (max-width: 1282px){		
	section{
		margin-right: 0.8%;
		width: 74%;
	}
	.droitePage{
		width: 25%;
	}.droitePage p{
		width: 70%;
	}
	.twoColumnBox .gauche{
		width: 55%;
	}.twoColumnBox .droite{
		width: 44%;
	}.paginationBox .droite{
		width: 100%;
		text-align: center;
		border-top: 1px solid  #ecf0f1; 
	}.paginationBox .gauche{
		width: 100%;
		text-align: center;
	}
	.art_rgt{
		width: 60%;
	}.art_rgt_votable_photo{
		width: 45%;
	}.art_rgt_votable_no_photo{
		width: 63%;
	}
	.ajout_bottom{
		text-align: center;
	}.new_titre{
		width: 93%;
	}textarea{
		max-width: 93%;
	}
}		
@media all and (max-width: 1024px){
	.corps{
		width: auto;
	}
	section, .droitePage{
		float: none;
		width: 100%;
		max-width: 100%;
		margin-bottom: 20px;
	}.droitePage p{
		width: 80%;
	}
	.titre{
		float: none;
		width: auto;	
	}.logo_box{
		width: auto;
		margin: auto;
	}
	.art_rgt{
		margin: 1%;
		width: 55%;
	}
}
@media all and (max-width:940px){
	header span{flex:1;}header>a p,header form{display:none;flex:0;}.loupeBlanche{display:inline;}
}		
@media all and (max-width: 680px){
	.titreBox img{
		display: none;
	}

	.corps{
		width: auto;
	}
	section{
		margin-right: 0px;
	}
	.ariane{
		font-size: 10px;
	}
	.titreBox{
		text-align: center;
	}
	h1{
		font-size: 25px;
	}
	.infoBox img{
		display: none;
	}
	.infoBox p{
		font-size: 12px;
	}
	.twoColumnBox .gauche{
		width: 100%;
		text-align: center;
	}
	.twoColumnBox .droite{
		width: 100%;
		text-align: left;
		text-align: center;
		border-top: 1px solid #ecf0f1;
		padding: 5px 0;
	}

	.the_best_img{
		margin-left: -156px;
		margin-top: -3px;
	}
	.rang{
		width: 15%;
		line-height: normal;
		color: #7f8c8d;
	}
	.rangF{
		width: auto;
		min-width: 60px;
		line-height: normal;
	}.rangF p{
		color: #7f8c8d;
	}
	.vote{
		width: 83%;
		text-align: right;
	}
	.vote a, .vote p{
		display: inline-block;
		vertical-align: middle;
		width: 47%;
	}
	.photo{
		width: 75px;
		height: 75px;
	}.image{
		width: 75px;
		height: 75px;
		margin: 1%;
	}
	
	
	h4{
		line-height: 25px;
	}
	.art_rgt{
		margin: 1%;
		width: 45%;
	}.art_rgt .nom_value{
		width: auto;
	}.art_rgt_no_votable_no_photo{
		margin: 1%;
		width: 65%;
	}
	.art_rgt_votable_no_photo, .art_rgt_commentaire{
	 width: 100%;
	 margin: 0;
	 border-top: 1px solid #ecf0f1;
	}
	.art_rgt_commentaire .nom_value{
		 max-width: 84%;
	}
	
	.art_rgt .nom_value .value, .art_rgt_votable_no_photo .nom_value .value{
		width: 100%;
		margin: 0;
		
	}
	.art_rgt h2, .art_rgt_votable_no_photo h2 a{
		width: auto;
		margin: 0;
	}
	.description{
		border-top: 1px solid #ecf0f1;
		font-size: 12px;
		
	}.description p {
		color: #7f8c8d;
	}
	.art_rgt .description, .stat{
		display: none;
	}
	.page{
		float: none;
		border-bottom: 1px solid #ecf0f1;
	}
	.twoColumnBox li a{
		font-size: 15px;
	}.list_num_page{
		display: none;
	}.mob_page{
		display: inline;
	}
	footer p{
		display: block;
		width: 100%;
		padding: 10px 0;
	}
}	
@media all and (max-width:440px){
	header{justify-content:space-around;}
	header span{flex:0;}
	header .double-space{margin-right:10px;}
	header .double-left-space{margin-left:10px;}
	header .monavatar{display:none;} 
	#menuPrincipal{width:100%;}
}
@media all and (max-width:359px){
	.loupeBlanche{display:none;}
}