/**********************************
  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);
}
	#headerInner {
		height: 70px;
	}
	#header > .inner {
		padding: 10px 0;
	}
		.logo img {
			max-width: 288px;
		}
		.headertopBar {
			background-color: var(--white);
			padding: 5px 0;
		}
    .headertopBar .container ul.headertopBarRs li a {
      text-decoration: none;
    }
		.headertopBarRs li:not(:first-child) {
			margin: 0 0 0 18px;
		}


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

section#contents {
    padding: 50px 0;
}

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

.headerPage {
    height: 585px;
	position: relative;
    margin-bottom: 0;
}
@media (min-width:576px) {
  .headerPage {
    margin-bottom: 30px;
}
}
	.bandeau-rouge {
    position: absolute;
    display: flex;
    width: 100%;
    left: 0;
    bottom: 0;
    background: var(--color-primary);
    height: calc(100% - 170px);
	}
  .bandeau-rouge::before {
    content: '';
    position: absolute;
    bottom: 99%;
    height: calc(170px - 93px);
    background: var(--color-primary);
    width: 100%;
    clip-path: polygon(100% 100%, 0 100%, 100% 0);
  }
  .headerPage .bandeau-rouge .desc {
    display: none;
  }
	.breadcrumb {
		top: 0;
		left: 0;
		font-family: 'ri';
	}
		.breadcrumb a {
			color: var(--white) !important;
		}
	.headerPage .text, .headerPage .text .container {
		height: 100%;
	}
	.headerPage .text {
		z-index: 1;
		top: 0;
	}
		.headerPage .text .container .desc {
			text-align: center;
			font-size: 1.8rem;
		}

span.mobile-buton {
	display: none;
}
@media (max-width:767px) {
  span.mobile-buton {
    position: fixed;
    background-color: var(--gray-100);
    left: 0;
    bottom: 0;
    z-index: 10;
    right: 0;
    padding: 15px;
	}
}
	span.mobile-buton span {
		width: 30px;
		height: 4px;
		background-color: var(--color-primary);
		display: block;
		margin: 6px 0;
    border-radius: 2px;
	}
span.mobile-buton::before, span.mobile-buton::after {
    content: "";
    width: 30px;
    height: 4px;
    background-color: var(--color-primary);
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
}

.banniere {
	color: var(--white);
}
	.banniere > img {
		width: 70px;
	}


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

}
#rightbar > .inner{

}

#wrapper {
  overflow: hidden;
}
/* -------------------
FOOTER (PIED DE PAGE)
--------------------*/
#footer {
    background-color: var(--white);
    padding: 25px 0;
}
	#footer ul {
		margin: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		list-style: none;
	}
		#footer ul li {
			padding: 0;
			margin: 0;
      margin-bottom: 10px;
		}
			#footer ul li a {
				font-size: 1.2rem;
				color: var(--gray-700);
        text-decoration: none;
			}
			#footer ul li:not(:last-child) a::after {
				content: "|";
				margin: 0 5px;
			}
#topFooter {
	background-color: var(--color-primary);
	padding: 42px 0;
}
	#topFooter #adress p, #topFooter #adress a{
		margin-bottom: 0;
		color: var(--white);
    text-decoration: none;
	}
	.footerIcon {
		color: var(--white);
    font-size: 1.4rem;
	}
  .headerIcon {
    color: var(--color-primary);
    text-decoration: none;
    font-size: 1.4rem;
  }

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

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

/*RESPONSIVE*/
@media screen and (max-width: 767px), (max-device-width: 767px){
	.logo img {
		max-width: 198px;
	}
	#footer ul {
		flex-direction: column;
    padding-bottom: 50px;
	}
		#footer ul li:not(:last-child) a::after {
			content: unset;
		}
	.headerPage {
		max-height: 400px;
	}
}
@media screen and (max-width: 400px), (max-device-width: 400px) {
	.headerPage .text .desc > p {
		height: 132px;
		overflow: hidden;
	}
}
@media screen and (max-width: 370px), (max-device-width: 370px) {
	.headertopBarRs li:not(:first-child) {
		margin: 0 0 0 10px;
	}
	.logo img {
		max-width: 128px;
	}
}
@media screen and (max-width: 330px), (max-device-width: 330px) {
	.headerPage .text .desc > p {
		height: 130px;
	}
}