body::-webkit-scrollbar {
	display: none; /* Chrome, Safari, Opera */
} 
body{
	margin: 0px;  
	padding: 0px;
	background-color: rgba(0, 0, 0, 0.02);
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none;  /* Internet Explorer et Edge */
}
#page_de_connexion{ 
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8); 
}
#zone_connexion{
	margin-top: 400px;
	margin-left: 21.2%;
	padding-bottom: 5px;
	width: 48.5%;
	height: auto;
	border: 1px solid white;
	border-radius: 2px;
	text-align: center;
}
#zone_connexion > form > ul > li{
	list-style-type: none;
	width: 100%;
	margin-left: -20px;
	margin-top: 20px;
	color: white;
}
#zone_de_connexion > form > ul{
	background-color: blue;
}
#tel, #tel_confirm{
	width: 50%;
	height: 25px;
	background-color: rgba(0, 0, 0, 0.0);
	border: 1px solid white;
	border-radius: 2px;
	color: white;
}
#submit, #code, #localisation{
	background-color: rgba(0, 0, 0, 0.0);
	border: 1px solid white;
	color: white;
	height: 26px;
	border-radius: 2px;
}
#submit:hover{
	background-color: white;
	color: black;
	font-weight: bold;
}
#localisation{
	border: 1px solid white;
}
optgroup, option{
	color: black;
	background-color: black;
	color: white;
}

.etape{
	color: white;
	font-size: 2.0em;
	margin: 0px 0px 0px 0px;
}
#pseudo, #prenom, #password{
	width: 50%;
	height: 25px;
	background-color: rgba(0, 0, 0, 0.0);
	border: 1px solid white;
	border-radius: 2px;
	color: white;
}
#precedent{
	background-color: rgba(0, 0, 0, 0.0);
	color: white;
	height: 27px;
	border: 1px solid white;
	border-radius: 2px;
	margin-right: 170px;
}
#suivant{
	background-color: rgba(0, 0, 0, 0.0);
	color: white;
	height: 27px;
	border: 1px solid white;
	border-radius: 2px;
	margin-left: 170px;
}
#progression{
	margin-top: 50px;
}
.star_progression{
	width: 20px;
	height: 20px;
	border-radius: 2px;
	margin-bottom: -8px;
}
.avatar_inscription{
	width: 50PX;
	height: 50px;
	margin-top: 20px;
	border-radius: 2px;
}
.nom, .art, .tel, .password, .localisation{
	color: white;
}
#loader {
	margin-top: 100px;
}
header{
	position: fixed;
	background-color: white;
}
.erreur_inscription{
	margin-top: 0px;
	margin-bottom: -35	px;
	color: red;
}
#colone1{
	margin-top: 20px;
	padding-top: 40px;
	border-radius: 4px;
	width: 20%;
	height: 1122px;
	word-wrap: break-word;
	overflow: hidden;
}
#colone2{
	width: 50%;
	height: 1200px;
	margin-left: 20.5%;
	margin-top: -1255px;
	overflow: auto;
	border-bottom: 1px solid rgb(150, 150, 150);
}
	.diapos_description p{
		margin-top: 0px;
	}
	.diapo{
		float: left; 
	}
	#diapo_img{
		width: 790px; 
		height: 210px;
	}
	.diapos{
		width: calc(790px * 5);
		animation: defiler 45s infinite;
	}
	.diaporama1{
		width: 100%;
		height: 210px;
		overflow: hidden;
		margin-top: 0px;
		margin-bottom: 0px;
		border-radius: 5px;
		box-shadow: 0px 4px 4px black;
	}

	@keyframes defiler{
		0%{
			transform: translateX(0);
		}
		13%{
			transform: translateX(0);
		}
		20%{
			transform: translateX(-790px);
		}
		33%{
			transform: translateX(-790px);
		}
		40%{
			transform: translateX(-1580px);
		}
		53%{
			transform: translateX(-1580px);
		}
		60%{
			transform: translateX(-2370px);
		}
		73%{
			transform: translateX(-2370px);
		}
		80%{
			transform: translateX(-3160px);
		}
		93%{
			transform: translateX(-3160px);
		}
		100%{
			transform: translateX(0);
		}
		

	}

	.diapos_description p{
		background-color:rgba(255, 135, 15, 0.65);
		color: rgb(0, 64, 128);
		margin-top: 5px;
		font-size: 1.2em;
		padding: 0px 0px 0px 0px;
		border: 1px solid rgba(0, 64, 128, 0.2);
		border-radius: 5px;
		width: 100%;
	}


	.visitez{
		float: right;
		margin-top: -25px;
		color: rgb(150, 150, 150);
	}
	.visitez a{
		background-color: rgb(0, 0, 0);
		color: white;
		padding: 1px 5px 1px 5px;
		border-radius: 2px;
	}
	.titre_paragraphes{
		text-align: center; 
		margin: 50px 0px 10px 0px;
		font-size: 20px;
	}
	.titre_paragraphes > a{
		color: rgb(0, 64, 128);
		text-decoration: none;
		font-size: 25px;
	}
	.bloc_part{
		display: none;
	}
	
	.paragraphes{
		margin: 0;
		padding: 0;
	}
	.paragraphes > li{
		width: 45%;
		height: auto;
		padding: 0px 0px 0px 30px;
		float: left;
		word-wrap: break-word;
		overflow: hidden;
		text-align: justify;
		list-style-type: none;
	}
	.paragraphe1::first-letter{
		font-family: Forte;
		font-size: 30px;
		color: rgb(0, 64, 128);
	}
	.paragraphe2{
		margin-left: 0%;
	}
	.propos_img{
		width: 100px;
		margin-left: 0%;
	}

	.der{
		text-align: center;
		margin-top: 50px;
	}


#publications{
	margin-top: 50px;
	width: 100%;
}
#ent_pub{
	margin-top: 30px;
}
.bande_1{
	padding: 0;
}

.icon_part{
	width: 12px;
	color: rgb(0, 64, 128);
}
.icon_reseaux{
	width: 15px;
	padding-left:30px;
	float: right;
}
.zones{
	list-style-type: none;
	width: 48%;
	height: 250px;
	float: left;
	word-wrap: break-word;
	overflow: auto;
	margin-left: 5px;
}
.baniere{
	width: 700px;
	height: 100%;
}
.pub_img{
	float: left;
	max-width: 350px;
	height: 100%;
	border-radius: 3px;
	margin-left: 5px;
}
.pub_icon{
	width: 20px;
	height: 20px;
	margin-left: 40px;
}
.details_img{
	padding: 0;
}
.details_img > li{
	list-style-type: none;
}
.details_icon{
	width: 10px;
	color: rgb(255, 135, 15); 
}
.bande_2{
	padding: 0;
}
.zones_1{
	list-style-type: none;
	width: 49%;
	height: 30px;
	float: left;
	margin-bottom: 70px;
}
.cont{
	color: rgb(0, 64, 128);
}
.cont > a{
	text-decoration: none;
}
#details{
	color: rgb(120, 120, 120);
	margin: 0;
}
.prix_img{
    width: 20px;
    height: 20px;
    color: rgb(120, 120, 120);
    margin: 0;
    padding: 0;
}


#colone3{
	margin-left: 72.3%; 
	width: 27.5%;
	height: 1220px;
	margin-top: -1080px;
	padding-top: 5px;
	word-wrap: break-word;
	overflow: hidden;
}

#connexion2{
	display: none;
}








@media screen and (max-width:500px){
	#page_de_connexion{
		margin-left: 0.5%;
	}
	#zone_connexion{
		margin-top: 250px;
		margin-left: 0.5%;
		width: 98%;
		height: auto;
	}
	#tel, #tel_confirm{
	width: 65%;
	height: 25px;
	background-color: rgba(0, 0, 0, 0.0);
	border: 1px solid white;
	border-radius: 2px;
	color: white;
	}
	#pseudo, #prenom{
	width: 100%;
	}
	#precedent{
		background-color: rgba(0, 0, 0, 0.0);
		color: white;
		height: 27px;
		border: 1px solid white;
		border-radius: 2px;
		margin-right: 55px;
	}
	#suivant{
	background-color: rgba(0, 0, 0, 0.0);
	color: white;
	height: 27px;
	border: 1px solid white;
	border-radius: 2px;
	margin-left: 55px;
	}
	#colone1{
		display: block;
		width: 100%;
		height: auto;
	}

	#colone2{
	width: 100%;
	height: auto;
	margin-left: 0.5%;
	margin-top: 0px;
	overflow: hidden;
	border-bottom: 0px;
	}
		.diaporama1{
			display: none;
		}
		.diapos_description{
			display: none;
		}
		.visitez{
			display: none;
		}
		.titre_paragraphe{
			text-align: center; 
			margin: 0px 0px 5px 0px; 
		}
		.titre_paragraphes > a{
            display: none;
			font-size: 20px;
			text-align: center; 
			margin: 0px 0px 5px 0px; 
		}
		.bloc_part{
			display: inline-block;
			margin-top: 10px;
		}
		.part_img{
			width: 10%;
			margin-left: 10.3px;
			margin-right: 0px;
		}
		
		.paragraphes{
			display: none;
		}
		
		.interaction_p{
			margin-top: -120px;
			font-size: 13px;
			text-align: justify;
			padding: 5px 5px 15px 5px;
		}
		
		.interaction_img{
			margin-left: 76.4%;
			margin-top: 60px;
			width: 50px;
			height: 50px;
		}
		.der{
		text-align: center;
		margin-top: 50px;
		font-size: 20px;
		}
		#publications{
			margin-top: 0px;
		}
		.publication{
			width: 96%;
			margin-top: 10px;
			margin-left: 2px;
			padding: 3px;
			background-color: rgba(0, 64, 128, 0.04);
			border: 1px solid rgba(0, 64, 128, 0.08);
			border-radius: 5px;
		}
		#ent_pub{
			margin-top: 0px;
		}
		.bande_1{
			padding: 0;
		}
		.zones{
			width: 100%;
			height: auto;
			float: none;
			margin-top: 5px;
		}
		#cont_reseaux{
			margin-top: 10px;
		}
		.icon_reseaux{
			width: 11px;
			padding-left: 5px;
			margin-right: 5px;
			float: right;
		}
		.baniere{
			width: 500px;
			height: 100%;
		}
		#zone_1{
			height: 120px;
		}
		.pub_img{
			width: auto;
			height: 120px;
			border-radius: 3px;
		}
		.list_details{
			margin: 0;
			padding: 0;
		}
		.list_details > li{
			width: 47%;
			height: auto;
			list-style-type: none;
			float: left;
			margin-right: 1%;
			word-wrap: break-word;
			overflow: hidden;
		}
		.details{
			border: 1px solid rgb(210, 210, 210);
			border-radius: 5px;
			padding: 5px;
			font-size: 11px;
			color: rgb(100, 100, 100);
		}
		.details_img{
			margin-left: 3%;
			margin: 0;
			padding: 0;
		}
		.details_img > li{
			margin-left: 0%;
			font-size: 11.5px;
		}
		.bande_2{
			margin: 0;
			padding: 0;
		}
		.zones_1{
			width: 91.5%;
			height: 23px;
			float: none;
			margin-top: 20px;
			margin-bottom: 0;
			padding: 2px 15px 0px 15px;
			border: 1px solid rgb(200, 200, 200);
			border-radius: 360px;
			font-size: 12px;
			color: rgb(0, 64, 128);
		}
		.pub_icon{
			width: 13px;
			margin-left: 0px;
			margin-right: 0px;
            color: rgb(255, 135, 15);
		}
        .prix_img{
            width: 13px;
            height: 13px;
        }
	

	#bouton_connexion_mobile{
		text-align: center;
		display: block;
		position: fixed;
		top: 92%;
		width: 100%;
		height: 50px;
		margin: 0;
		padding: 0;
	}
	.bouton_connexion_mobile{
		text-align: center;
		width: 100%;
		height: 50px;
		margin-top: 0;
		margin-bottom: 0;
		margin-left: 2px;
		padding: 0;
	}
	.bouton_connexion_mobile > li{
		text-align: center;
		width: 33%;
		height: 23px;
		padding-top: 5px;
		list-style-type: none;
		float: left;
	}
	.bouton_connex_mobile{
		background-color: rgb(0, 64, 128);
		margin-top: 15px;
		border-radius: 5px;
	}
	.bouton_connex_mobile > a{
		color: rgb(255, 135, 15);
	}
	.poster_plus_mobile{
		color: rgb(0, 64, 128);
		width: 50px;
		height: 50px;
	}

	#colone3{
	margin-top: 25px;
	margin-left: 0px; 
	width: 100%;
	height: auto;
	padding-top: 5px;
	}
		#fais_du_jour{
			margin-top: 50px;
		}
		#connexion{
			display: none;
		}
		#astuces{
			display: none;
		}

		.col-sm-12{
		width: 95.5%;
		margin-left: 2.25px;

		}
		.bi_bi_exclamation_triangle{
			width: 30px;
		}
		.heading_alert{
			font-size: 20px;
		}

		
}