/*Mobile*/
@media(max-width:768px){

	@keyframes fadeIn { 
		from { opacity: 0; } 
	  }
	  
	.animate-flicker {
		animation: fadeIn 1s infinite alternate;
	}
	
	#flashDate{
		background:#df0000;
		color:#fff;
		text-align:center;
		padding:10px 20px;
	}

    h1,h2,h3{
        text-align: left;
    }
	.divForm div input[type=submit]{
		width:100%;
	}

	.formCenter{
		float:left;
		clear:both;
		width:100%;
		border:0;
		border-radius:0;
		padding: 20px 0;
		background:#fff;
	}

	.formLogin{
		float:left;
		clear:both;
		width:100%;
		border:0;
		border-radius:5px;
		padding: 20px 0;
		background:#fff;
	}

	.formLogin .sectionLabel{
		padding:5px 0;
	}
	.formLogin section input{
		width:100%;
	}

	.btnMenuDrop{
		position:absolute;
		right:5px;
		top:5px;
		font-size:14px;
		z-index:20;
		display:block;
		cursor:pointer;
		padding:10px 15px;
    }
    
    .btnMenuNext{
		display:none;
	}

	#mainPanel{
		float:left;
		clear:both;
		width:100%;
		min-height:100%;
	}

	/*MneuHeadTop*/
	#menuHeadFolder{
		position: absolute;
		float:left;
		clear:both;
		width:100%;
		height:auto;
		background:#222;
		display:none;
		top:50px;
		z-index:120;
	}	

	#menuHead{
		float:left;
		clear:both;
        width:100%;
        background:#43AB48;
        display:none;
	}
	#menuHead ul,#menuHead li{
		list-style-type:none;
		margin:0;
		padding:0;
		float:left;
		clear:both;
		width:100%;
	}

	#menuHead ul{
		float:left;
		position:relative;
	}
	#menuHead ul li > ul{
		display: none;
		position:relative;
		float:left;
		clear:both;
		width:100%;
	}
	#menuHead ul li{
		position:relative;
		float:left;
		clear:both;
		width:100%;
		border-bottom:1px solid #349438;
    }
	#menuHead ul li a{
		padding:15px 15px 16px;
		display:block;
		color:#fff;
		font-size:18px;
		text-decoration:none;
		text-align:left;
	}
	#menuHead ul li a:active{
		background:#222;
	}
	#menuHead ul li .btnMenuDrop a{
		padding:0px;
		text-decoration:none;
	}
	#menuHead ul li{
		position:relative;
	}
	#menuHead ul li ul li{
		float:left;
		width:100%;
		border:0;
    }
	#menuHead ul li ul li a{
		display:block;
		text-align:left;
		padding:14px 15px 16px;
		font-size:16px;
		text-decoration: none;
	}
    #menuHead ul li ul li a{
		padding-left:30px;
	}
    #menuHead ul li ul li ul li a{
		padding-left:60px;
	}
	#menuHead ul li ul li a:active{
		background:#222;
	}
	#menuHead ul li > ul{
		padding:0 0 0 15px;
	}
	#menuHead ul li:hover > ul{
		display:none;
		padding:5px 0;
	}
	#menuHead ul li ul li > ul{
		position:relative;
		margin:0;
	}
	#menuHead ul li ul li:hover > ul{
		display:none;
	}
	/****/

	.toLeft{
		float:none;
	}
	.toRight{
		float:none;
	}
	.blockSiteCenter{
		float:left;
		clear:both;
		width:100%;
	}

	#mainHeader{
		float:left;
		clear:both;
		width:100%;
	}
	#mainHeaderPage{
		float:left;
		clear:both;
		width:100%;
	}
	#mainHeaderLogo{
		float:left;
		clear:both;
		width:100%;
		text-align:center;
		padding:15px 0 10px;
	}
	#mainHeaderLogo img{
		display:inline-block;
		height:40px;
	}

	#mainHeaderSession{
		float:left;
		clear:both;
		width:100%;
		line-height:50px;
		text-align:center;
	}
	#mainNav{
		float:left;
		clear:both;
		width:100%;
		background:#d2d2d2;
	}

	#menuRightHeader{
		float:left;
		clear:both;
		width:100%;
		text-align:center;
		border-bottom:1px solid #e5e5e5;
	}
	#menuRightHeader a{
		color:#222;
		padding:0 14px;
		display:inline-block;
		text-decoration:none;
	}
	#menuRightHeader a:hover{
		background:#f0f0f0;
	}
	#menuRightHeader a:active{
		background:#e5e5e5;
	}

	#session_cnx,#session_pan{
		display:none;
	}

	.panel{
		float:left;
		clear:both;
		width:100%;
		border-bottom:1px solid #ddd;
		margin-bottom:15px;
	}
	.panel div{
		float:left;
		clear:both;
		width:100%;
	}
	.panel div a{
		display:block;
		text-align:center;
		padding:10px 15px;
		color:#333;
		font-size:16px;
        text-decoration:none;
        border-radius:4px;
	}
	.panel div a:active{
        background:#F07F22;
        color:#fff;
	}
	.panel div a.panel_on{
		display:block;
		background:#0c518a;
        color:#fff;
        border-radius:4px;
	}
	.panelData{
		float:left;
		clear:both;
        width:100%;
        padding:10px 0 0;
	}

	.catTitle{
		float:left;
		clear:both;
		width:100%;
		font-size:28px;
		color:#0072C6;
		font-family:'Bitter';
		text-align:center;
		padding:20px 0;
	}
	.catTitle span{
		padding:0 0;
	}

	.blockArticle{
		float:left;
		clear:both;
		width:100%;
	}
	.blockSite{
		float:left;
		clear:both;
        width:100%;
        padding:20px;
	}
	.blockBody{
		float:left;
		clear:both;
        width:100%;
		background:#fff;
		border-radius:0;
	}
	.blockSiteSim{
		float:left;
		clear:both;
		width:100%;
	}

	.blockSiteTop{
		margin:0;
		float:left;
		clear:both;
		width:100%;
    }
    
	.blockSite800{
		float:left;
		clear:both;
		width:100%;
		padding:20px 20px;
	}
	.textAc{
		font-family:'Open Sans Light';
		font-size:24px;
		line-height: 34px;
		text-align:center;
	}

	.blockSiteCmt{
		margin:20px auto;
        float:left;
		clear:both;
		width:100%;
        text-align: center;
	}
	.blockSiteVideo{
		margin:30px auto;
        float:left;
		clear:both;
		width:100%;
        text-align: center;
    }

    .flex100, .flexPageLeft, .flexPageRight{
		float:left;
        clear:both;
        width:100%;
	}

    #apropos{
        background:#0692C6;
    }
    #apropos .blockSite{
        text-align: center;
    }
    #apropos h1, #apropos p{
        color:#fff;
	}
	
	.blockSite100{
		float:left;
		clear:both;
		width:100%;
	}

	#flexTop{
		float:left;
		clear:both;
		width:100%;
	}
	#flexTop div#flexTopLeft{
		float:left;
		clear:both;
		width:100%;
	}
	#flexTop div#flexTopRight{
		display:none;
	}
	#flexTop div#flexTopSep{
		display:none;
	}

	#flexHalf{
		float:left;
		clear:both;
		width:100%;
		padding:0 20px;
	}
	#flexHalfLeft{
		float:left;
		clear:both;
		width:100%;
	}
	#flexHalfRight{
		float:left;
		clear:both;
		width:100%;
	}

	#flex13{
		float:left;
		clear:both;
		width:100%;
		padding:0 20px;
	}
	#flex13Left{
		float:left;
		clear:both;
		width:100%;
	}
	#flex13Right{
		float:left;
		clear:both;
		width:100%;
	}

	#pageHalf{
		float:left;
		clear:both;
		width:100%;
		padding:0 20px;
	}
	#page100{
		float:left;
		clear:both;
		width:100%;
		padding:0 20px;
	}

	.pageCenter{
		float:left;
		clear:both;
		width:100%;
		padding:20px 20px;
	}

	#footPanel{
		float:left;
		clear:both;
		width:100%;
		bottom:0;
		background:#eee;
		color:#222;
		padding:10px 0 30px;
	}
	.footLinks{
        position:relative;
        text-align: center;
    }
    .footLinks span, .footLinks a{
		display:inline-block;
        padding:5px 15px;
        color:#222;
    }
    .footLinks a{
        color:#0c518a;
    }


	/*Box Trans*/
	#boxTransFolder{
		position:fixed;
		display:none;
		top:0;
		left:0;
		width:100%;
		height:100%;
		background-color:#000;
		filter:opacity(60);
		-moz-opacity:0.6;
		opacity: 0.6;
		z-index:100;
	}
	.boxDiap{
		background:#000;
		border-radius:0px;
	}
	.boxDiapNo{
		border-radius:5px;
		background:#fff;
	}
	#boxTransChild{
		position:fixed;
		display:none;
		max-width:100%;
		z-index:110;
	}
	#boxTransChildIn{
		float:left;
		clear:both;
		width:100%;
	}
	#boxTransTitle{
		font-size:24px;
		padding:15px 20px 14px;
		color:#0072C6;
	}
	#boxTransData{
		padding:0 20px 20px;
		color:#333;
	}
	.boxButtons{
		float:left;
		clear:both;
		width:100%;
		margin-top:20px;
		text-align:right;
	}
	/****/

	.menuBar{
		float:left;
		clear:both;
		width:100%;
		background:#222;
		height:40px;
		overflow: hidden;
	}
	.menuBarIn{
		float:left;
		clear:both;
		width:100%;
		line-height:40px;
		font-size:14px;
		color:#fff;
		padding:0 10px;
	}
	.menuBarIn a{
		display:inline-block;
		padding:0 10px;
		color:#fff;
	}
	.menuBarInText{
		color:#FEF200;
		font-weight:bold;
	}

	#topMobile{
		float:left;
		clear:both;
		width:100%;
		background:#FEF200;
		color:#444;
		line-height:56px;
        text-align: center;	
	}

	/****/
	#menuMobile{
		float:left;
		clear:both;
		width:100%;
		z-index:100;
		position:relative;
	}
	#menuMobile ul, #menuMobile li{
		list-style-type:none;
		margin:0;
		padding:0;
		float:left;
		position:relative;
		line-height:56px;
	}
	#menuMobile ul li > ul{
		display: none;
		position:absolute;
		float:left;
		clear:both;
		width:200px;
		background:#0F74BA;
	}
	#menuMobile ul li{
		float:left;
		width:100%;
	}
	#menuMobile ul li a{
		display:inline-block;
		padding:0 15px;
	}
	#menuMobile ul li a:active{
		background:#ddd;
	}
	#menuMobile ul li{
		position:relative;
	}
	#menuMobile ul li #logoHref{
		display:block;
		padding:0;
	}
	#menuMobile ul li > ul li a{
		display:block;
		text-align:left;
		color:#fff;
	}
	#menuMobile ul li > ul li a:active{
		background:#222;
	}
    
    .ico_mobile_menu{
        background:url(../images/ico_mobile.png) no-repeat center;
		padding:10px 10px;
    }

    #logo{
        display:block;
        width:194px;
        height:56px;
        background:url(../images/logo.png) no-repeat center;
        background-size: cover;
    }
    #logoImmob{
        display:block;
        width:187px;
        height:56px;
        background:url(../images/logo_immob.png) no-repeat center;
        background-size: 100%;
    }
	/****/

	#qSearch{
		display:block;
		width:100%;
		padding:10px;
		background:none;
		border:0;
		color:#444;
	}
	#qSearchMobileBlock{
		float:left;
		clear:both;
		width:100%;
		padding:0 10px;
        background:#f0f0f0;
        border-top:1px solid #e5e5e5;
		display:none;
	}
	#qSearchMobileBlock #qSearchMobile{
		width:100%;
		background:none;
		border:0;
		color:#444;
		font-size:16px;
	}
	
	.ico_mobile_user{
		background:url(../images/ico_mobile_user.png) no-repeat center;
		padding:10px 10px;
	}
	.ico_mobile_panier{
		background:url(../images/ico_mobile_panier.png) no-repeat center;
		padding:10px 10px;
	}
	.ico_mobile_search{
        background:url(../images/ico_search_site.png) no-repeat center;
        background-size: 20px 20px;
		padding:10px 10px;
	}

	#qSearchSite, #blockTopRight, #blockTopLogo{
		display:none;
    }

    #articleTitreMobile{
		display:block;
    }

	/*Table Grid*/
	table.onGrid {
		background:#fff;
		width:100%;
		border-collapse:collapse;
		border-radius:4px;
		margin-bottom:25px;
	}
	.onGrid thead, .onGrid tbody, .onGrid th, .onGrid td, .onGrid tr {
		display: block;
	}
	table.onGrid thead tr{
		position: relative;
	}
	.onGrid tr{
		margin: 0 0 1rem 0;
		border-top:2px solid #99d1ff;
	}
	.onGrid tr:nth-child(odd) {
		background: #fff;
	}
	.onGrid thead{
		background:#f0f0f0;
	}
	.onGrid thead th{
		padding:10px 8px;
		font-size:13px;
		text-align:left;
		border-bottom:1px solid #ddd;
		text-overflow:ellipsis;
		white-space:nowrap;
		overflow:hidden;
	}
	.onGrid tr.onGridSubHead{
		background:#f5f5f5;
	}
	.onGrid tbody td{
		padding:10px 8px;
		border-bottom:1px solid #ddd;
		text-overflow:ellipsis;
		white-space:nowrap;
		overflow:hidden;
	}
	.onGrid tbody tr td:active{
		background:#ddd;
	}
	.onGrid tfoot{
		background:#f0f0f0;
	}
	.onGrid tfoot td{
		padding:10px 8px;
		border-bottom:1px solid #ddd;
		text-overflow:ellipsis;
		white-space:nowrap;
		overflow:hidden;
	}
	.onGrid tr.onGridCheck td{
		background:#cce8ff;
		border-bottom:1px solid #99d1ff;
	}

	article{
		line-height: 26px;
		font-size:16px;
	}
	article h1{
		line-height:34px;
        font-size:30px;
        font-weight:bold;
		margin:0 0 10px 0;
	}
	article .articleIllus{
		float:right;
		margin:10px 0 20px 0;
		width:100%;
    }
    
    #blockVideoPlay{
        margin:20px 0 0;background:#000;
        width:100%;
        height:380px;
    }
    
    #blockTopLogo{
        float:left;
        clear:both;
        width:100%;
        text-align: center;
        padding:10px 0;
    }

    #blockTopMenu{
        float:left;
        clear:both;
        width:100%;
    }
    #blockTopRight{
        float:left;
        clear:both;
        width:100%;
        height:auto;
        text-align:center;
        padding:10px 0;
        border-bottom:1px solid #ddd;
        background:#f0f0f0;
    }

    .siteFolder{
		display:grid;
		grid-template-columns: auto auto;
	}
	.siteItem{
		float:left;
		width:330px;
		margin:10px;
		border-radius:10px;
		overflow:hidden;
		position:relative;
	}
	.siteItem .siteTitle{
		display:block;
		height:50px;
		line-height:50px;
		width:100%;
		font-family: 'Open Sans Bold';
		color:#fff;
		text-align:center;
	}
	.sitePhoto{
		display:block;
		position:relative;
	}
	.sitePhoto img{
		display:block;
		border-radius:10px;
		max-width: 100%;
	}
	.siteTitle{
		display:block;
		font-size:18px;
		color:#000;
		font-family: 'Open Sans Bold';
		padding:3px 0;
	}
	
	/******/
	.opFolder{
		display:grid;
		grid-template-columns: auto auto;
	}
	.opItem{
		float:left;
		width:320px;
		margin:10px;
		border:1px solid #ddd;
		border-radius:8px;
		overflow:hidden;
	}
	.opPhoto{
		display:block;
		min-height:200px;
		background:#222;
	}
	.opPhoto img{
		display:block;
		width:100%;
	}
	.opDetails{
		display:block;
		height:120px;
		padding:15px 15px;
	}
	.opTitle{
		display:block;
		font-size:18px;
		color:#000;
		font-family: 'Open Sans Bold';
		padding:3px 0;
	}
	.opLieu{
		display:block;
		font-size:14px;
		color:#0f74ba;
		font-size:14px;
	}

	.opDis{
		float:left;
        clear:both;
        width:100%;
		display:block;
		text-align:center;
	}
	.opDisTitle{
		display:block;
		margin:0 0 20px;
	}
	.opDisDetails{
		display:block;
		text-align:left;
	}
	.opDisDetails div{
		text-align:left;
		padding:6px 0;
		border-top:1px solid #e5e5e5;
	}
	.opDis h1{
		color:#000;
		font-family: 'Open Sans Bold';
		margin-bottom:5px;
	}
	.opDis h2{
		color:#50be2f;
	}

	#banSlider{
        float:left;
        clear:both;
        width:100%;
        height:320px;
	}
    .swiper-slide img{
		height:auto;
		width:100%;
	}

	.videoEmb{
		float:left;
		clear:both;
		width:100%;
		height:400px;
		background:#000;
	}
	.videoEmb iframe{
		width:100%;
		height:100%;
		border:1px solid #333;
	}

	.stepList{
		display: inline-grid;
		width:100%;
		grid-template-columns: auto auto auto;
		grid-column-gap: 20px;
		row-gap: 20px;
		position:relative;
	}
	.stepList .gridItem{
		border-radius:6px;
		overflow: hidden;
	}
	.stepList .gridItem:hover{
		background:#338d38;
	}
	.stepList .gridTitle{
		font-size:16px;
		text-align:center;
		color:#fff;
		padding:10px 15px;
	}

	.articleList{
		display: inline-grid;
		width:100%;
		grid-template-columns: auto;
		grid-column-gap: 20px;
		row-gap: 20px;
		position:relative;
	}
	.articleList .gridItem{
		border-radius:0;
		overflow:none;
	}

	.articleItem{
		display:flex;
		width:100%;
	}
	.articlePhoto{
		width:160px;
	}
	.articlePhoto img{
		display:block;
		width:160px;
	}
	.articleDetail{
		width:auto;
		padding:0 0 0 20px;
	}
	.articleTitle{
		font-size:14px;
		color:#000;
		padding:0 0 5px;
	}

	.flex100{
		float:left;
        clear:both;
        width:100%;
	}

	.articleReading{
		float:left;
        clear:both;
		width:100%;
		padding:0 0 20px;
	}
	.articlePlus{
		float:left;
        clear:both;
		width:100%;
		padding:20px 0;
		border-top:2px solid #444;
	}
	.articlePlus .articleList{
		grid-template-columns: auto;
	}

	article{
		padding:0 0 0 0;
	}
	article h1{
		color:#000;
		font-size:28px;
	}
	.articleText{
		line-height:26px;
	}
	.articleIllus{
		float:left;
		clear:both;
		width:100%;
		margin:0 0 20px;
	}
	.articleIllus img{
		display:block;
		width:100%;
	}

	.partList{
		display: inline-grid;
		width:100%;
		grid-template-columns: auto auto;
		grid-column-gap: 20px;
		row-gap: 20px;
		position:relative;
	}
	.partList .gridItem{
		border-radius:6px;
		overflow: hidden;
	}

	.consList{
		grid-template-columns: repeat(4, 1fr);
	}
	.consImg{
		width:140px;
		height:140px;
	}

	.banner160{
		position:relative;
		display: none;
	}
}

@media(max-width:480px){

	#banSlider{
        float:left;
        clear:both;
        width:100%;
        height:280px;
	}

	.videoEmb{
		float:left;
		clear:both;
		width:100%;
		height:300px;
		background:#000;
	}

	.stepList{
		grid-template-columns: auto;
	}
	.stepList .gridTitle{
		font-size:16px;
	}

	.articleItem{
		display:block;
		float:left;
		clear:both;
		width:100%;
	}
	.articlePhoto{
		float:left;
		clear:both;
		width:100%;
	}
	.articlePhoto img{
		display:block;
		width:100%;
	}
	.articleDetail{
		float:left;
		clear:both;
		width:100%;
		padding:10px 0 0;
	}
	.articleTitle{
		font-size:16px;
		color:#000;
	}

	.partList{
		grid-template-columns: auto;
	}

	/*Conseillers*/
	.consList{
		grid-template-columns: repeat(2, 1fr);
	}
	.consImg{
		width:140px;
		height:140px;
	}
}