/*-- Responsive --*/

.box-btn-menu{
	display: none;
}


@media screen and (max-width: 1024px), (max-device-width: 1024px){ /* Tablettes */
	#wrapperInner.container{
		max-width: 90%;
	}


	#header .box-logo {
	    width: 145px;
	}
	/* Actualités */
	#newsList .newsContainer{
		height: 270px
	}
		.contenu-actu{
			line-height: 1.3;
		}



	#header .box-logo{
		margin-left: 5%;
	}
	.box-langue{
		margin-right:5%;
	}
	.box-btn-menu {
	    clear: both;
	    display: block;
	    float:left;
	    margin-top: 20px;
	}
		.box-btn-menu .box-titre{
			display: none;
		}
		#btn-menu{
			background: url('/images/charte/sprite.png') no-repeat -200px -150px / 300px auto;
			cursor: pointer;
			display: block;
			height: 50px;
			text-align: center;
			width: 50px;
		}
			#btn-menu span{
				display: none;
			}
			.mm-opening #btn-menu{
				background-position: -250px -150px;
			}



	#wrapperInner {
		max-width: 90%;
	}
	.nested{
   		background-color: rgba(255, 255, 255, 0.9);
		width: 100%;
	}
		.nested .firstLevel{
			display:none;
			height:auto;
			overflow:hidden;
			text-align: center;
			line-height: 20px;
		}
		.nested .firstLevel li{
			padding: 0;
			width: 100%;
			float: none;
			height: auto;
		}
			
		.nested .firstLevel li a::after {
			width: 100%;
			margin: 0;
			height: 1px;
		}
			.nested .firstLevel li:hover ul,
			.nested .firstLevel li.sfhover ul,
			.nested .firstLevel li ul{
				left: auto;
				margin:0;
				padding: 0;
				position: relative;
				width: 100%;
			}

				.nested .firstLevel li ul .contentLevel {
				    background-image: none;
				    padding: 20px 0;
				}
				.nested .firstLevel li ul li{
					padding: 5px 0;
					height: auto;
					width: 100%;
					float: none;

				}
				.nested .firstLevel ul li a{
					padding: 0;
					font-size: 12px;
					line-height: 1
				}



} /* Fin Tablettes : 768*1024 */


@media screen and (max-width: 767px), (max-device-width: 767px){ /* Mini-tablettes */
	#wrapper .filter .filter-n1 {
		padding:0 !important;
	}
	#wrapper .filter .filter-n1 ul li,
	#wrapper .listeMetier ul li{
		width: 48%;
		margin-bottom: 2px
	}
	.chapoPicture{
		width: 100%;
		
	}
	#FicheFiliale .metiers ul li{
		width: 48%;
		margin-bottom: 10px;
		min-height: 100px;
	}
	#FicheFiliale h1,
	#FicheFiliale .contact,
	#FicheFiliale .adresse{
		text-align: center;
		margin-bottom: 20px
	}
	#FicheFiliale .contact .picture{
		margin: 10px auto;
		float: none;
	}
	/* Actualités */
	#newsList .newsContainer{
		height: 250px
	}
		#newsEventsList .chapoPicture img{
			height: 100%
		}
		.contenu-actu{
			font-size: 12px;
			line-height: 1.2;
		}

	.colleft, .colright{
		width: 100%;
		float: none;
		margin:0 0 10px 0;
	}


} /* Fin Mini-tablettes : 600*768 */


@media screen and (max-width: 599px), (max-device-width: 599px){ /* Mobiles */
	#template-home  .slick-arrow{
		display: none !important;
	}
	.slider-home .slick-spe{
		background: #fff;
	}
	#template-home .slick-titre-desc{
		position: relative;
		width: 100%;
		padding:10px 10px 60px 10px;
	}
	.bloc-references-inte, .bloc-actualites-inte {
	    padding:10px 0;
	}
	.actualites-home,
	.content-bloc-references-home{
		padding: 0 0;
	}
		
	.lien-bottom-home{
		padding: 0 15px;
	}
	.bloc-references-inte .titre-bottom-home, .bloc-actualites-home .titre-bottom-home {
	    padding: 0 15px;
	    font-size: 1.3rem;
	}
	.actu-home-img{
		height: 130px;
	}
	.bouton1,
	.bouton2,
	.bouton3,
	.bouton4{
		width: 100%;
		margin:5px 0 !important;
	}

	/*Formulaire*/

		#captcha{
		margin:0;
		width: 100%;
		}
		label{
			width: 100%;
			margin:0;
			text-align: left;
		}
	/**/



	/*Boutons*/
	.bouton1, .bouton2, .bouton3{
		width: 100%;
		text-align: center;
	}
	/**/



	
	#wrapper .h1::after, #wrapper .h1::before, #wrapper h1::before, #wrapper h1::after {
	    display: block;
	    margin: 15px auto !important;
	}
	.box-btn-menu {
	}
	#header .widgetSearch {
	    width: 100%;
	    margin-right: 0;
	}
	#wrapperInner #contents{
		float: none;
		width: 100%;
	}


	/* Actualités */
	#newsList .newsContainer{
		border-bottom: 1px solid #fede8d;
		height: auto;
		margin-bottom: 6%;
		padding-bottom: 3%;
	}
		#newsList .chapoPicture, #newsList .newsContainer:nth-child(2n+1) .chapoPicture, .contenu-actu{
			float: none;
			margin: 0;
			width: 100%
		}
		#newsList .chapoPicture{
			height: 170px;
			overflow: hidden;
		}
			#newsEventsList .chapoPicture img{
				height: auto;
			}
		.contenu-actu{
			margin-top: 2%;
			padding: 2% 3%;
		}

	/* Single Actualité */
	#news .chapoPicture{
		float: none;
		margin: 0 0 3%;
		max-width: 100%;
	}

} /* Fin Mobiles : 320*599 */





/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px){
	#pref-metierv2 .shortProductReference{
		margin:0;
	}
	#header .box-logo{
		width: 80px;
		margin:10px 0;
	}
	#header .box-langue{
		margin-top: 20px;
	}

	#header .container{
		max-width: 100%;
	}

	.layout-row .layout-column{
		width: 100%;
	}

	.intext_left .textAndImages .structured_text_semantique_text, .intext_right .textAndImages .structured_text_semantique_text, .intext_left, .intext_right{
		width: 100%;
		display: block;
		height: auto;
	}
	/* formulaire*/
	input, select, textarea{
		height:25px;
		width:100%;
	}
	input[type="submit"], input[type="reset"]{
		text-align:center!important;
	}                                      
	fieldset{
		margin-left:0;
		margin-right:0;
		padding-right:0;
		padding-left:0;
	}
	.directoryEnties{
		float:none;
	}
	.group_multi_radio, .group_multi_checkbox, .group_multi, .groupMultiRadio, .groupMulticheckbox, .groupMulti{
		padding:0;
		top:5px;
	}
	.colonne{
		width:100%;
		text-align:center;
		margin:0;
	}
	.colonne p{
		text-align:left;
	}
	
	table{
		font-size:80%;
	}

	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr{ 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr, th{ 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	.actionnariat thead tr,
	.actionnariat th{
		position: inherit !important;
	}
	.actionnariat table {
		border: none;
		display: flex;
		flex-direction: row;
	}
	
	tr{ border: 1px solid #ccc; }
	
	td{ 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		text-align:center;
	}
	
	td:before{ 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
}