/**********************************
  structure globale du site
***********************************/




/* ------------
HEADER (EN-TETE)
--------------*/
#header {
    background-color: #fff;
}
header.scrollUp.nav-down {
    -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.32);
    -moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.32);
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.32);
}
	#header > .inner {
		padding: 10px 0;
	}
		.logo {
			z-index: 100;
		}
		.headertopBar {
			padding: 5px 0;
			height: 40px;
		}
		.headertopBarRs li:not(:first-child) {
			margin: 0 0 0 5px;
		}


/* ----------------------
ZONE INTERIEURE (CONTENU)
-----------------------*/

section#contents {
    padding: 50px 0;
}
body.home section#contents {
    padding: 0;
}
.page-template-page-devis section#contents{
	padding: 0 0 50px 0;
}
.no-title .box-title{
	display: none;
}

/* ----------------------
HEADER PAGE
-----------------------*/

.headerPage {
    height: 250px;
    background-color: grey;
}
	.breadcrumb {
		top: 0;
		left: 0;
	}
	.headerPage .text, .headerPage .text .container {
		height: 100%;
	}
	.headerPage .text {
		z-index: 1;
		top: 0;
	}
		.headerPage .text .container .desc {
			color: var(--white);
			flex: 0;
		}
		.headerPage img{
			filter: brightness(80%);
			-webkit-filter: brightness(80%);
}
		
span.mobile-buton {
	display: none;
	width: 35px;
}
	span.mobile-buton span {
		width: 100%;
		height: 3px;
		background-color: #fff;
		display: block;
		margin: 6px 0;
	}
span.mobile-buton::before, span.mobile-buton::after {
    content: "";
    width: 100%;
    height: 3px;
    background-color: #fff;
}


/* ------------
COLONNES
--------------*/
#leftbar >.inner{

}
#rightbar > .inner{
	
}


/* -------------------
FOOTER (PIED DE PAGE)
--------------------*/
footer#footer {
    background-color: var(--color03);
}

	footer#footer ul {
		margin: 0;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
	}
		footer#footer ul li {
			padding: 0;
		}
		footer#footer .footerTop ul li a{
			color: var(--white)

		}
			footer#footer ul li a {
				font-size: 1.6rem;
			}
			footer#footer ul li:not(:last-child) a::after {
				content: "|";
				margin: 0 5px;
			}
			.footerTop{
				position: relative;
			}
			.footerTop::after{
				content: '';
				position: absolute;
				right: 0;
				top: 0;
				bottom: 0;
				background-image: url('../img/charte/picto-forme.svg');
				background-repeat: no-repeat;
				background-size: cover;
				width: calc(270px/2);
				height: 100%;
				display: block;
				cursor: pointer;
				background-position: 0 0;
			}
			.footerTop::before{
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				background-image: url('../img/charte/picto-forme.svg');
				background-repeat: no-repeat;
				background-size: cover;
				width: calc(270px/2);
				height: 100%;
				display: block;
				cursor: pointer;
				background-position: 0 0;
				transform: rotate(180deg);
			}
			.footerTopInner{
				z-index: 1;
			}
			.acces-rapide a{
				color: var(--white);
			}
			.acces-rapide a::before{
				content: '>';
				color: var(--white);
				font-size: 1.6rem;
				margin-right: 0.5rem;
			}
			.acces-rapide .box-content{
				display: flex;
				flex-direction: column;
			}
.footerBottom .logoAdkalis img {
    max-width: 150px;
}

/* ------------
PAGE ERREUR
--------------*/
#error_page{

}
.error{
	color:#f00;
}
.error_form{
	color:#f00;
}

/*RESPONSIVE
01 - DESKTOP */
@media screen and (max-width: 1400px), (max-device-width: 1400px){
}
@media screen and (max-width: 1200px), (max-device-width: 1200px){
	.footerTop::after{
		display: none;
	}
	.footerTop::before{
		display: none;
	}
	.footerTop{
		background-image: url('../img/charte/fond-footer-pictos.svg');
		background-repeat: no-repeat;
		background-size: cover;
		background-position: initial;
	}
}
/*02 TABLETTE*/
@media screen and (max-width: 1024px), (max-device-width: 1024px){
	.footerTop{
		background-position: initial;
	}
	footer#footer ul {
    	margin: 0 auto;
		max-width: 80%;
	}
	footer#footer ul#menu-menu-nos-gammes-expertes{
		max-width: 100%;
	}
	footer#footer h5{
		font-size: 1.8rem;
	}
	.footerBottom p{
		font-size: 1.1rem;
		line-height: 1.3rem;
	}
	footer#footer .footerBottom li a{
		font-size: 1.1rem;
	}

}
/*03 MINI-TABLETTE et MOBILE */
@media screen and (max-width: 768px), (max-device-width: 768px){
		

	.logo img {
		max-width: 198px;
	}

	.headerPage {
		height: 400px;
	}
}