/**********************************
  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: 35px 0 31px 0;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
	}
	@media screen and (max-width:1500px){
		#header > .inner {
			padding: 35px 4rem 31px 4rem;
		}
	}
		.logo img {
			width: 183px;
		}
		
		.headertopBarRs li:not(:first-child) {
			margin: 0 0 0 5px;
		}
		.headerTopBar-content {
			display: flex;
			justify-content: flex-end;
			position: relative;
		}
		.headerTopBar-content .nous-contacter {
			position: absolute;
			top: 0;
			right: 0;
		}
/* ----------------------
ZONE INTERIEURE (CONTENU)
-----------------------*/

section#contents {
    padding: 50px 0;
}
.home section#contents {
	padding-top: 10px;
}

@media screen and (max-width:768px) {
	section#contents {
    padding: 30px 0;
	}
}

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

.headerPage {
	padding: 63px 0 63px 0;
	position: relative;
	background-color: var(--purple-transparent);
}
.headerPage .bg-header {
	opacity: .3;
	position: absolute;
	top: 0;
	left: 0;
}
	.breadcrumb {
		top: 0;
		left: 0;
	}
	.headerPage .text {
		position: relative;
		z-index: 1;
	}
	.headerPage .text .container .desc {
		text-align: center;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--white);
    max-width: 70%;
	}
	.headerPage .picto-header {
		position: static;
		width: 55px;
		margin-bottom: 1.8rem;
	}
span.mobile-buton {
	display: none;
	background: var(--purple);
	width: 58px;
	height: 58px;
	padding: 15px;
	border-radius: 50%;
	cursor: pointer;
}

	span.mobile-buton span {
		width: 100%;
		height: 3px;
		background-color: #fff;
		display: block;
		margin: 6px 0;
	}
	span.mobile-buton.close span {
		display: none;
	}
span.mobile-buton::before, span.mobile-buton::after {
    content: "";
    width: 100%;
    height: 3px;
    background-color: #fff;
}
span.mobile-buton.close::before {
	transform: rotate( 45deg) translate(1px, 1px);
}
span.mobile-buton.close::after {
	transform: rotate( -45deg) translate(1px, -1px);
}
body #wrapper {
	transition: all .4s;
}
body.menu-mobile-show #wrapper {
	margin-top: 145px;
	transition: all .4s;
}
body.menu-mobile-show #header {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 9999;
}
/* ----------------------
HEADER PAGE Home
-----------------------*/
.headerPage-home {
	margin-left: auto;
	max-width: calc( 100% - calc((100% - 1440px) / 2 ) );
	position: relative;
}
.headerPage-home .text  {
	position: absolute;
	top: 38%;
	left: 140px;
}
.headerPage-home .text .like-h1 {
	font-size: 2.6rem;
	font-weight: 400;
	letter-spacing: initial;
}
/* ------------
COLONNES
--------------*/
#leftbar >.inner{

}
#rightbar > .inner{
	
}


/* -------------------
FOOTER (PIED DE PAGE)
--------------------*/

.subFooter {
	position: relative;
	border-radius: 175px 175px 0 0;
}
.subFooter .nous-contacter a {
	border-radius: 40px 40px 0 0;
}
.subFooter::before {
	content: '';
	width: 100%;
	height: 82px;
	position: absolute;
	bottom: 0;
	left: 0;
	background: var(--orange-light);
	border-radius: 175px 175px 0 0;
	z-index: -1;
}
.subFooter-contact {
	margin-left: 60px;
}
.subFooter-nav {
	margin-bottom: 0;
	margin-right: 11.7rem;
}
	footer#footer ul {
		margin: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
		footer#footer ul li {
			padding: 0;
		}
			footer#footer ul li a {
				font-size: 1.2rem;
				color: #fff;
				font-weight: 400;
			}
			footer#footer ul li:not(:last-child) a::after {
				content: "|";
				margin: 0 5px;
			}


/* ------------
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){
}
@media screen and (max-width: 1100px), (max-device-width: 1100px){
	#header > .inner {
		justify-content: space-between;
	}
}
	@media screen and (max-width: 972px), (max-device-width: 972px){
		#header > .inner {
			justify-content: center;
		}
		#header > .inner .logo {
			margin-bottom: 1.5rem;
		}
	}
/*02 TABLETTE*/
@media screen and (max-width: 1024px), (max-device-width: 1024px){
	.headerPage-home .text {
		left: 80px;
	}
}
/*02 TABLETTE*/
@media screen and (max-width: 991px), (max-device-width: 991px){
	.subFooter .nous-contacter {
		position: absolute;
    left: 60px;
	}
	
}
/*03 MINI-TABLETTE et MOBILE */
@media screen and (max-width: 767px), (max-device-width: 767px){
		
	span.mobile-buton {
		display: flex;
	}
	.logo img {
		max-width: 140px;
	}
	#header > .inner {
		justify-content: space-between;
		align-items: center;
		padding: 16px 4rem 16px 4rem;
	} 
	#header > .inner .logo {
		margin-bottom: 0;
	}
	.subFooter .nous-contacter {
		position: absolute;
    left: 50%;
		transform: translateX(-50%);
	}
	.subFooter-nav {
		display: none;
	}

	.subFooter-contact > img {
		position: relative;
    right: 60px;
	}

	.headerPage-home .text {
		top: initial;
    bottom: 271px;
    left: 50%;
    width: 100%;
    transform: translateX(-50%);
	}
	.headerPage-home .text .like-h1 {
		font-size: 2rem;
	}
}
@media screen and (max-width: 600px), (max-device-width: 600px){
	.headerPage-home .text {
		bottom: 223px;
	}
}
@media screen and (max-width: 500px), (max-device-width: 500px){
	.subFooter .nous-contacter a {
		padding: 9px 25px 2px 25px;
	}
	.headerPage-home .text {
		bottom: 161px;
	}
}
@media screen and (max-width: 400px), (max-device-width: 400px){
	.headerPage-home .text {
		bottom: 106px;
	}
}