@media all and (max-width:984px){
	
	.for_desktop {display: none;}
	.for_tablet {display: block;}
	.for_mobile {display: none;}
	
	.for_desktop.for_tablet {display: block;}
	.for_desktop.for_mobile {display: none;}
	.for_tablet.for_mobile {display: block;}
    
    .wrapper_70 {width: 70%;}
    .wrapper {width: 100%;}
	.column {margin:0;}
	.row {margin: 0 15px;}
	
    .grid_1 {width: 50%;}
    .grid_2 {width: 50%;}
    .grid_3 {width: 100%;}
	
	#content {padding-right:15px; padding-left:15px;}
	
	#content section p { padding: 7px;}
	aside.margin_right {margin-right:0; padding-right:30px;}
	section.presentation img {margin-top: 15px; margin-bottom: 15px;}
	
	div.pictos {
		position: absolute;
		z-index: 100;
		top:0;
		left: 220px;
		margin: 0 5px;
	}
	
	.home_plan figure {width: 304px; display:block; margin-left: auto; margin-right: auto;}
	
	.ard.pad {padding-bottom: 15px; padding-left: 15px;}
	
	article.liste_actu {
        width:45%;
        margin-bottom: 15px;
        padding-bottom: 0 !important;
        padding-left: 15px;
        padding-right: 15px;
        float: left;
        display:inline;
    }
	
	.liste_actu.promoted {width: 70%; height: 160px; display: block; margin-left: auto; margin-right: auto;}
	.actu_details div.date {padding:7px;}
	.actu_details h3 {padding:7px;}
}


@media all and (max-width:725px){
	
	
	.liste_actu.promoted {width: 100%; height: 160px; display: block; margin-left: auto; margin-right: auto;}
	
	header {padding-bottom: 20px; padding-top:0;height: 190px;}
	#content {padding-top:20px;}
	
	.h1_marg40 {margin-bottom:25px;}
	.row {margin: 0 15px;}
	
	.info_menu {display: block; width: 100%; height: 30px; margin: 5px 0 5px 0;}
	div.contact {position: absolute;}
    div.pictos {position: absolute; left: 0;}
	
	.navigation ul li {display: block; margin: 10px 0;}
	.navigation {position: absolute; padding: 0 0 0 20px; bottom: auto;}

	.ard.pad {padding-bottom: 0; padding-left: 0;}
	
	.liste_actu.promoted,
	.liste_actu.promoted .actu_content {height:auto;}
}


@media all and (max-width:675px){ 
    
	.grid_1 {width: 100%;}
	.grid_2 {width: 100%;}
	.grid_3 {width: 100%;}
	
	.margin_left {padding: 0; margin: 0;}
	.margin_center {padding: 0; margin: 0;}
	.margin_right {padding: 0; margin: 0;}
	
	.row {margin: 0 15px;}
		
	.wrapper_70 {width: 80%;}
	
	#content {padding-right:15px; padding-left:15px;}
	
	#content section article {padding-bottom:20px;}
	#content aside {padding-bottom:15px;}
	section.presentation img {margin: 7px 5px;}
	aside.margin_right {margin-right:0; padding-right:0;}
	
	div.pictos .details {display: none; margin-top: 0;}
	
	article.liste_actu {
        width:95%;
        margin-bottom: 15px;
        padding-bottom: 0 !important;
		padding-left: 15px;
        padding-right: 15px;
        float: left;
        display:inline;
    }
	
	.liste_actu.promoted .actu_content {width: 65%;}
	
	.liste_actu div.promoted img {width: 100%;}
	section.actu_details p {
		padding: 0;
	}
	
}


@media all and (max-width:430px){
	.liste_actu.promoted div figure  {display: none;}
	.liste_actu.promoted {width: 100%; height: auto; display: block;}
	.liste_actu.promoted .actu_content {width: 95%;}
	.liste_actu.promoted .actu_content {height: auto; padding: 10px 0px 10px 0	;}
	
	
	
}


@media all and (max-width:385px){
	
	#content {padding-right:10px; padding-left:10px;}
	header {height: 155px;}

	.logo img{width:145px; height:auto;}
	.navigation ul li {display: block; margin: 5px 0px;}

	div.pictos .details {margin-top: 0;}
	div.contact {position: absolute;}
    div.pictos {position: absolute;	left:0;}
	
	.info_menu {display: block;	width: 100%; height: 30px; margin: 5px 0 5px 0;}
	
	.ard_L_top {width: 290px; height: 20px; background: url(../img/box_ardoise_L_top.png) no-repeat top left; background-size:100% auto;}
	.ard_L_mid {width: 290px; background: url(../img/box_ardoise_L_mid.png) repeat-y; background-size:100% auto;}
	.ard_L_bot {width: 290px; height: 22px; background: url(../img/box_ardoise_L_bot.png) no-repeat top left; background-size:100% auto;}
	
	article.liste_actu  {padding-left:5px; padding-right: 5px;}
	figure.image_details img {width: 100%;}
	figure.image_details {width: 90%;}
	
}


@media all and (max-width:320px){
	
	#page {width:320px;}
	
	figure.image_details {text-align: center; margin: 0;}
	
}