body, #container{ 
	min-width: 0px;
	max-width: 720px;
	width: 100%;
}

#container{ 
	background-color: black;
}

.sub-container{
	min-height: 0;
	padding-bottom: 20px;
}

.phpdebugbar{
	display: none;
}

/***********************MENU**************************/
	.nav-top-menu{
		min-width: 0px;
		width:100%;
		top:22px; /*pour laisser place au login*/
	}

	.website-logo{
		background-image: url("/css/homepage/logo4.png");
		top:10px;
	}

	.right-menu{
		background-image: url("/css/homepage/menu-icon2-mob.png");
		height: 48px;
		width: 48px;
		margin: 0 10px;
	}

	.nav-top-menu-ul{
		position: absolute;
		top:60px;
		max-width: 98%;
		width: 98%;
		padding-top: 15px;
		padding-bottom: 15px;
		background: rgba(152,152,152,0.8);
		
	}

	.nav-top-menu-li{
		display: block;
		margin-left: 30px;
		padding:7px;
		margin-bottom: 8px;
		width: 80%;
		text-align: center;
		background-color: rgba(255,255,255,1);
		border: 2px solid #c1c1c1;
	}

	.nav-top-menu-li a{
		display: block;
	}

	.nav-top-menu-li:hover{
 		text-decoration: none; 
	}



	#lang_choice_div{
		margin-top: -12px;
	}


/***********LOGIN************************/
	#div_login{
		display: block;
		position: absolute;
		top: -361px;
		left: 0px;
		width: 100%;
		z-index: 1101; /*au dessus du nav menu*/
	}

	#login_icon{
		display: none;
	}

	#logged_div{
		width: 100%;
		height: 365px;
		max-height: 365px;
		border-right: 0;
		border-bottom: 4px solid white;
	}

	.form-body-header{
		width: 100%;;
		/*border-top: 2px solid white;*/

	}

	.form-body-header-choice{
		/*border-bottom:4px solid white;*/
	}

	.checkbox{
		display: flex;
	}
	input[type='checkbox']{
		width: 10px;
		border: 2px solid black;
	}

	.checkbox label {
		/*display: inline-block;*/
		/*float: right;*/
		/*text-align: right;*/
	}

	#login_form{
		width: 100%;
		border-bottom: 4px solid white;
		height: 365px;
	}



	#login_icon_mob{
		display: block;
		width: 100%;
		height: 22px;
		background-image: url('/css/icon/fleche1-blanc-2.png');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		cursor: pointer;
	}

	#authenticated_user p{
		margin-top:0;
	}
	.alert{
		width: 80%;
	}

	.alert ul{
		padding-left:15px;
	}

	.btn-form-body-footer{
		padding:0;
	}

	.a-mdp-oublie{
	margin-top: 15px;
	}

/**************ACCUEIL*******************************/
	.block-homepage{
		display: none;
		/*height: 120%;*/
	}

	#welcome-chargement-message{
		display: none;	
		/*display: block;	*/
		line-height: 0;
	}

	#block-homepage-layer0{
		display: block;
	}

	#block-homepage-layer1{
		display: block;
		padding-top: 70px;
	}

	#container-triptyque-1-layer1, #container-triptyque-2-layer1, #container-triptyque-3-layer1 {
		right: 0;
	}

	.container-triptyque-layer1{
		min-width: 0px;
		width: 100%;
		height: 30%;
		border:1px solid black;
		background: red;
		position: relative;
		display: none;
	}


	.triptyque-h1{
		top:0;
	}

	#block-homepage-layer0, #block-homepage-layer1, #block-homepage-layer2 {
		min-width: 0;
	}

/***********PORTFOLIO**********************************/
	.grid-sizer, .grid-item { 
		width: 99%; 
		margin-bottom: 4px;
	}

	.category_listing_a{
		background-color: #DDD;
		margin-top: 6px;
		display: inline-block;
	}


/***********PORTFOLIO SHOW***************************/
	#projets-info{
		padding:8px;
		margin: 0;

	}

	.projets_show_presentation_titre{
		width: 96%;
		text-align: center;
		text-decoration: none;
		margin-bottom: 8px;
	}

	.projets_show_presentation_description{
		margin-left: 10px;
		padding: 8px 10px;
	}

/******************PHOTO SHOW******************/
	.photo-show-img{
		min-width: 0px;
	}

	#photo-info{
		width: 90%;
	}

	.p-btn{
		width: 90%;
		display: block;
		padding-bottom: 10px;
	}

	.p-btn a{
		display: block;
		margin-bottom: 10px;
		text-align: center;
	}

	.photo-commentaires-grid{
		width: 98%;
	}

	.photo-commentaires-grid-add-commentaire{
		width: 98%;
	}

	input, textarea, select  {
		width: 100%;
	}

	/*input[type="submit"]{
		width: 100px;
	}*/
	.photo-commentaires-grid-all-commentaire{
		width: 98%;
		padding-bottom: 0;
	}

	.commentaire-width{
		width: 100%;
		padding-left: 0px;
	}

	.message-info{
		/*text-align: center;*/
		margin: 8px;
	}

	.pagination{
		padding-left: 0;
	}

	.grid-img-info-all-pictures{
		display: none;
	}

/************ABOUT********************/
	.sub-container-div-about{
		margin-left: 0;
	}

	.img-about{
		width: 99%;
		margin-bottom: 15px;
	}

	#descriptive-about{
		width: 98%;
	}
	.about-p, .about-p-last{
		margin: 20px 15px;
	}

	.about-p-last{
		text-align: center;
	}


/***************CONTACT****************/
	.formulaire-container{
		width: 98%;
		margin-top:0;
	}

	.formulaire-contact-info{
		width: 98%;
		height: auto;
		margin: 0;
	}

	.form{
		width: 100%;
	}

	#message_content{
		width: 100%;
	}
	.formLabel, .label-login-page{
		float: none;
		width: 100%;
		display: block;
		text-align: left;
	}

	.form-email-input, .input-login-page{
		width: 100%;
	}

	/****** 2024 *****/
	.formulaire-container-contact{
		width: 98%;
		background-image: none;

	}

/**********************BLOG************************/
	.sub-container-blog{
		min-width: 0;
	}

	.articles-index-left{
		width: 100%;
		min-width: 0;
	}

	.articles-grid{
		min-width: 0;
	}

	.articles-item{
		width: 95%;
	}

	.articles-item:hover{
		transform:none;
	}

	.articles-diapo-titre{
		font-size: 1.5em;
	}

	.articles-index-right{
		width: 100%;
		float: none;
		padding: 0 8px;
	}

		.articles-index-popular{
			display: none;
		}

		.articles-index-cat{
			display: none;
		}

	.blog_menu_title{
		margin-top: 6px;
		position: relative;
		height: 25px;
	}

	.blog_menu_title_icon{
		cursor: pointer;
		position: absolute;
		top:2px;
		right: 2px;
		background-image: url('/css/icon/fleche1-blanc2.png'); 
		background-size: contain;
		background-repeat: no-repeat;
		background-position: right;
		height: 20px;
		width: 20px;
	}

	#blog_menu_title_icon_tous{
		transform: rotate(0.5turn);
	}

	#blog_menu_title_tous{
		width: 97%;
	}

/*******diapo*********/
	.diapo-dot-container{
		display: none;
	}

	.articles-index-diapo, .articles-index-diapo-slide, .articles-diapo-img{
		height: 300px;
	}
	
	.articles-index-diapo{
		margin-top: 20px;
		width: 600px;
	}

	.articles-index-diapo-slide{
		width: 3000px; /*900x5*/
	}

	.articles-index-diapo , .diapo-controls-div{
		display: block;
	}

	.diapo-controls{
		width: 30px;
		height: 30px;
	}

/**********************ARTICLES*******************/
	.articleH3{
		padding-left: 20px;
	}

	.article-corps p{
		text-indent: 10px;
	}

	.article-show-img{
		width: 98%;
	}

	.lien-lire-la-suite{
		width: 90%;
		text-align: center;
	}

	.article-edit-info{
		width: 96%;
		font-size: 0.9em;
	}

.p-succes-message {
	width: 90%;
}

.supp-creation-projet{
	position: relative;
	width: 86%;
}

.submit-sup-icon{
	width: 25px;
	height: 25px;
}

.fieldset-add-info .floatLeft {
	float: none;
}
.fieldset-add-info .floatLeft img{
	width: 98%;
}

.sub-container-commentaire{
	width: 98%;
}

.commentaire-grid-item{
	width: 100%;
}

.message_div_adm{
	width: 70%;
	min-height: 100px;
}

.commentaires_grouped_img{
	width: 98%;
}

.message-grid-div{
	width: 100%;
}
/*.message_div{
	margin-left: 5%;
}*/

.users-item{
	width: 98%;
}

.blog-article-edit-section1, .blog-article-edit-section2{
	padding-left:2px;
	width: 98%;
}

.edit-text, .edit-textarea-mini{
	width: 100%;
}

.article-create-info, .article-edit-info{
	position: relative;
	right: 0;
	padding: 0 15px;
}

.blog-article-edit-section1 form{
	padding: 0 10px;
}
.edit-cover-img{
	width: 98%;
}

.sup-img-article{
	top:50%;
}

.show-articles-links-div{
	display: block;
}

.show-articles-links{
	min-width: 99%;
	margin-bottom: 16px;
}

.show-articles-links-info, .show-articles-links-description{
	display: none;
}

.show-articles-link-next, .show-articles-link-previous{
	height: 100px;
}

/********commentaires*********/

.edit-commentaire{
	position: relative;
	top:0;
	right: 0;
}

.message_contact{
	/*width: 90%;*/
	margin-right: auto;
	margin-left: auto;
}

.edit-commentaire-img{
	width: 95%;
}


.edit-commentaire-textarea{
	margin-left: 0;
}

/****cat*****/
.ul_li_custom {
	padding:6px;
}
.ul_li_custom ul{
	padding:0;
}

/***********user page***********/
.comment_div_page{
	width: 97%;
}

.p-btn-center{
	padding-bottom: 20px;
}

/********************************/

.sub-container-lightbox{
	display: none;
}

/*******************************VErsion sans JS*******/
	/****accueil****/
		#div_login, .nav-top-menu-ul{
			display: none;
		}

		#login-register-icon-div-nav{
			display: none;
		}

		.website-logo{
			top:0;
		}

		.nav-top-menu {
			top:5px;
		}

		#nav-sans-js{
			width: 100%;
			height: 45px;
			position: relative;
			top: 48px;
			text-align: center;
		}

		#nav-sans-js a{
			width: 23%;
			display: inline-block;
		}


		.nav-sans-js-icon{
			width: 45px;
			height: 45px;
			background-size: contain;
			background-repeat: no-repeat;
			margin-right: auto;
			margin-left: auto;
		}

		#nav-sans-js-icon-gallery{
			display: block;
		}

		#nav-sans-js-icon-about{
			display: block;
			
		}

		#nav-sans-js-icon-blog{
			display: block;
		}

		#nav-sans-js-icon-contact{
			display: block;
		}

		#nav-sans-js-icon-login, #nav-sans-js-icon-login-nav{
			background-image: url("/css/icon/sans-js/login-icon.png");
			width: 35px;
			height: 35px;
			background-color: white;

		}

		#nav-sans-js-icon-register, #nav-sans-js-icon-register-nav{
			background-image: url("/css/icon/sans-js/register-icon.png");
			width: 35px;
			height: 35px;

		}

		#lang_choice_div{
			position: absolute;
			right: 0;
			top:0;
			/*float:right;*/
			display: flex;
			/*display: none;*/
			margin-top: 5px;
			margin-right: 14px;
			/*margin-right: 0px;*/
		}

		#lang_choice_div{
		}

		#lang_form_cn{
			display: none;
		}

		.lang_form{
			width: 30px;
			margin-left: 4px;
		}

		.lang_choice_flag{
			display: inline-block;
		}

	/*********LOGIN REGISTER ICONS*******/	
		#ogin-register-icon-div-nav{
			display: none;
		}

		#login-register-icon-div{
			background-color: black;
			width: 100%;
			text-align: center;
			display: flex;
			justify-content: space-between;
			border-bottom: 4px solid black;
		}

		#login-register-icon-div a {
			width: 49.5%;
			background-color: white;
		}

	

	/**page login********************/

		#login-page-div, #register-page-div{
			width: 96%;
			margin-top: 30px;
		}

		#remember{
			width: 30px;
			height: 30px;
		}