/* CSS responsive */

@media (max-width: 969px) {
	/* Haut */
	body, html{
		overflow-x:hidden;
	}
	#main, #contenu, #bas{
		width:95%;
	}
	#contact{
		position:relative;
		float: left;
		margin-top: 15px;
		right: auto;
		top: auto;
		text-align: center;
		width: 45%;
	}
	#recherche {
		margin-top: 15px;
		position: relative;
		right: auto;
		top: auto;
	}
	#haut {height:auto;}
	#haut_titre {
		position:relative;	
	}
	
	/* Menu-mobile */
	#menu_haut{
		display:none;
	}
	.affiche-mobile{
		display:block;
		width:100%;
		text-align:right;
		height:40px;
		background-color:#C3C3C3;
	}
	.affiche-mobile p{
		display:inline-block;
		color:#fff;
		font-size:16px;
	}
	.affiche-mobile img{
		float:right;
		margin:5px 20px 5px 10px;
	}
	#menu-mobile nav ul{
		margin:0 0 20px;
	}
	#menu-mobile nav ul li{
		width:100%;
		height:40px;
		background:none;
		text-align:center;
		margin:0;
		font-size:16px;
		background-color:#EBEBEB;
		border-bottom:1px solid #C3C3C3;
		padding: 8px 0 0;
		box-sizing:border-box;
		text-transform:uppercase;
	}
	#menu-mobile nav ul li a{
		display:block;
		width:100%;
		height:40px;
	}
	#menu-mobile nav ul.sous-menu-mobile{
		margin:0;
	}
	#menu-mobile nav ul.sous-menu-mobile li{
		background-color:#F8F8F8;
	}
	
	/* Contenu */
	#encart_haut, #encart_haut #image img, #encart_haut #fond_texte{
		width:100%;
	}
	#encart_haut #texte{
		width:85%
	}
	#encart_haut #fond_texte{
		bottom:0;
		height:85px;
	}
	#encart_haut #texte{
		height:65px;
	}
	table{
		width:100% !important;
	}
	
	/* Actualités */
	.col_actu, .colonne_450{
		width:95%;
	}
	.actu .col_actu_img{
		width:26%;
	}
	.actu .col_actu_texte{
		width:68%;
	}
	.colonne_350{
		width:30%;
	}
	
	/* Contenu */
	.c_05, .c_10, .c_15, .c_20, .c_25, .c_30, .c_35,
	.c_40, .c_45, .c_50, .c_55, .c_60, .c_65, .c_70,
	.c_75, .c_80, .c_85, .c_90, .c_95, .c_100{
		width:100%;
		float:none;
	}
	.c_05{
		clear:both;
	}
	.liste-clipso,
	.a-la-une div{
		width:50% !important;
		float:left;
	}
	.clipso{
		width:30%;
	}
	#partenaires div{
		width:30% !important;
		float:left;
	}
	blockquote h2{
		word-wrap: normal;
	}
	
	/* Bas */
	#bas{
		height:auto;
	}
	
	/* Pages */
	#contenu table tr td{
		display:block;
		width:100% !important;
		height:auto !important;
	}
	.colonne_550{
		width:100%;
	}
	.colonne_350.center{
		width:100%;
	}
	.colonne_350.center #plan{
		margin:0 auto;
	}
	#contenu div.c_50, #contenu div.c_50 form, #contenu div.c_50 form .colonne_350, #contenu div.c_50 form .colonne_100{
		width:100%;
		box-sizing:border-box;
	}
}

/* Téléphones (portrait) */
@media (max-width: 479px) {
	/* Haut */
	#haut{
		padding:20px 0;
	}
	#contact {
		float:none;
		text-align:left;
	}
	#recherche{
		display:none;
	}
	.image_fond {display:none;}
	
	/* Contenu */
	#main{
		width:100%;
	}
	#contenu{
		width:95%;
		padding:5px;
		margin:0 auto;
	}
	.contenu-page img {
		max-width:100%;
		height:auto !important;	
	}
	#encart_haut #image, #encart_haut #nom_societe{
		display:none;
	}
	#encart_haut, #encart_haut #fond_texte{
		height:115px;
	}
	#encart_haut #texte{
		width:95%;
		left:0;
		height:90px;
	}
	h2#texte br{
		display:none;
	}
	ul li{
		margin-left:0;
	}
	
	/* Actualités */
	.col_actu, .colonne_450{
		width:100%;
		box-sizing:border-box;
	}
	.actu .col_actu_img{
		display:none;
	}
	.actu .col_actu_texte{
		width:100%;
		box-sizing:border-box;
	}
	.col_actu div.colonne_330 div.colonne_150, .col_actu div.colonne_330 div.colonne_180{
		width:70%;
	}
	
	/* Contenu */
	.liste-clipso,
	.a-la-une div,
	.clipso,
	#partenaires div{
		width:100% !important;
		float:none;
	}
	
	/* Bas */
	.nom_societe{
		font-size:45px;
	}
	#bas .colonne_350{
		width:100%;
	}
	
	/* Pages */
	#contenu .contenu-page div{
		padding:10px !important;
		float:none;
		text-align:center;
		margin:0 !important;
	}
	#contenu .contenu-page div ul {text-align:left;}
	.fond_img_realisations{
		margin:0;
		width:100%;
		box-sizing:border-box;
		height:auto;
		text-align:center;
	}
	.fond_img_realisations img {
		max-height:100%;
		box-sizing:border-box;
		width:auto !important;	
	}
	.colonne_400{
		width:100%;
		box-sizing:border-box;
	}
	#plan{
		width:100%;
	}
	form .colonne_150, form .colonne_100 {
		text-align:center;
		width:100%;
		font-size:16px;	
	}
	form .colonne_400, form .colonne_350 {
		width:100%;
		float:none;
		text-align:center;	
	}
	input[type="text"], textarea, select {
		width:100% !important;
		font-size:14px;
		box-sizing:border-box;
		padding:5px 10px;	
	}
}