/* Polygon en background */
.container-fluid {
	position: relative;
}
.polygonsBackground {
	position: absolute;
	top: 0;
	right:15px;
	bottom: 0;
	left: -15px;
	
	max-width: unset;
	width: calc(100% + 30px);
	
	overflow: hidden;

	display: flex;
	flex-direction: row;
	justify-content: space-between;
	
	opacity: .2;
}
.polygonsBackground.invert {
	transform: scale(-1, 1);
	transform-origin: 50%;
}
.polygonsBackground div {
	height: 100%;
	width: calc(100% / 3 + 50px);
	margin-left: -100px;
}
.polygonsBackground > div {
	background-color: rgb(228, 144, 42);
	clip-path: polygon(12% 0, 100% 0, 100% 100%, 0% 100%);
}
.polygonsBackground > div + div {
	background-color: rgb(233, 164, 83);
	clip-path: polygon(0% 0, 100% 0, 100% 100%, 10% 100%);
}
.polygonsBackground > div + div + div {
	background-color: rgb(232, 160, 75);
	clip-path: polygon(8% 0, 100% 0, 100% 100%, 0% 100%);
}
.polygonsBackground > div + div + div + div {
	background-color: rgb(230, 148, 50);
	clip-path: polygon(0% 0%, 100% 0, 100% 100%, 17% 100%);
}
.polygonsBackground > div + div + div + div + div {
	background-color: rgb(235, 170, 93);
	clip-path: polygon(8% 0%, 100% 0, 100% 100%, 0 100%);
}
.polygonsBackground > div + div + div + div + div + div {
	background-color: rgb(228, 144, 42);
	clip-path: polygon(0% 0%, 100% 0, 100% 100%, 5% 100%);
}
.polygonsBackground > div + div + div + div + div + div + div {
	background-color: rgb(232, 160, 75);
	clip-path: polygon(6% 0%, 90% 0, 100% 100%, 0 100%);
}
.polygonsBackground > div + div + div + div + div + div + div + div {
	background-color: var(rgb(230, 148, 50));
	clip-path: polygon(0% 0%, 100% 0, 100% 100%, 17% 100%);
}


/* Footer  */
#footer .container > * {
	padding: 3%;
}

#inlineBlockCoordonnees {
	background-color: rgb(228, 144, 42);
}
#social_block {
	background-color: rgb(232, 160, 75);
}
#links_block_left {
	background-color: var(rgb(230, 148, 50));
}
#blocknewsletter {
	background-color: rgb(235, 170, 93);
}
#footer::before {
	content: " ";
	display: block;
	height: 150px;
	position: absolute;
	bottom: 100%;
	left: 0; right: 0;
	z-index: 2;
	background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #ffffff 42.2%);
	background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #ffffff 42.2%);
	background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #ffffff 42.2%);
	background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 42.2%);
	
	display: none;
}
#footer .container {
	display: flex;
	justify-content: center;
	padding: 0;
	flex-wrap: wrap;
}
#footer .container > * { 
	width: 100%;
}

#footer #links_block_left ul li a {
	line-height: 17px;
	display: block;
	padding: 10px 10px 5px 80px;
	margin-right: -10px;
	margin-left: -80px;
	min-height: 30px;
}
#footer #links_block_left ul li a:hover {
	background-color: var(--theme-color-1);
	text-decoration: none;
}

@media (min-width: 768px) {
	#footer .container > * { width: calc(50%); }
}

@media (min-width: 992px) {
	
	#footer .container > * { width: calc(25%); }
	#blocklink { order: 0; }
}
@media (min-width: 1200px) {
	#footer .container > * { width: calc(25%); }
}
@media (min-width: 1400px) {
	#footer .container > * { width: calc(20%); }
}


#footer .container > * > * { 
	padding: 0 10%;
}

#footer .like_h4 {
	margin: 0 0 20px;
	position: relative;
	z-index: 1;
	color: #fff;
	height: 60px;
}
@media (min-width: 768px) {
		
	#footer .container > * {
		margin-right: -40px;
		margin-left: -40px;
		padding: 50px;
	}
	#inlineBlockCoordonnees {
		clip-path: polygon(12% 0, 82% 0, 98% 100%, 6% 100%);
	}
	#social_block {
		clip-path: polygon(9% 0, 100% 0, 100% 100%, 21% 100%);
	}
	#links_block_left {
		clip-path: polygon(0 0, 100% 0, 100% 100%, 10% 100%);
	}
	#blocknewsletter {
		clip-path: polygon(6% 0%, 100% 0, 100% 100%, 0 100%);
	}
}
@media (min-width: 768px) {
	#ephtm_menu li {
		position: relative;
	}
}
/* Menu */
nav {
	background: rgb(228, 137, 19);
}
nav > ul > li > a {
	color: #fff;
	border: none;
	margin-left: -20px;
}
#ephtm_menu a:hover {
	border: none;
	color: white;
	background-color: rgb(231, 153, 60);
}

#ephtm_menu > ul > li::after {
		/* Triangle avec after */
		content: "";
		width: 30px;
		height: 30px;
		display: block;
		position: absolute;
		bottom: -14px;
		left: calc(50% - 25px);
		border-style: solid;
		border-width: 15px;
		border-color: rgba(0,0,0,0);
		border-top-color: #e48913;
		z-index: -1;
		transition: bottom .3s ease-in-out 0s;
}

#ephtm_menu > ul > li:hover::after {
		/* Triangle avec after */
		bottom: -30px;
}
#ephtm_menu li.avec-sous-menu:hover::after {
		display: none;
}
#ephtm_menu > ul > li:hover {
	z-index: ;
}


nav > ul > li > a,
nav > ul > li:first-of-type > a,
nav > ul > li:last-of-type > a {
	padding-right: 40px;
	padding-left: 40px;
	transition: clip-path .3s ease-in-out 0s, background .3s ease-in-out 0s;
	background-color: rgb(235, 170, 93);
}

@media (min-width: 992px) {
	nav > ul > li > a {
		background-color: rgb(228, 144, 42);
		clip-path: polygon(12% 0, 100% 0, 100% 100%, 0% 100%);
	}
	nav > ul > li + li > a {
		background-color: rgb(233, 164, 83);
		clip-path: polygon(0% 0, 100% 0, 100% 100%, 10% 100%);
	}
	nav > ul > li + li + li > a {
		background-color: rgb(232, 160, 75);
		clip-path: polygon(8% 0, 100% 0, 100% 100%, 0% 100%);
	}
	nav > ul > li + li + li + li > a {
		background-color: var(rgb(230, 148, 50));
		clip-path: polygon(0% 0%, 100% 0, 100% 100%, 17% 100%);
	}
	nav > ul > li + li + li + li + li > a {
		background-color: rgb(235, 170, 93);
		clip-path: polygon(8% 0%, 100% 0, 100% 100%, 0 100%);
	}
	nav > ul > li + li + li + li + li + li > a {
		background-color: rgb(228, 144, 42);
		clip-path: polygon(0% 0%, 100% 0, 100% 100%, 5% 100%);
	}
	nav > ul > li + li + li + li + li + li + li > a {
		background-color: rgb(232, 160, 75);
		clip-path: polygon(6% 0%, 90% 0, 100% 100%, 0 100%);
	}
	nav > ul > li + li + li + li + li + li + li + li > a {
		background-color: var(rgb(230, 148, 50));
		clip-path: polygon(0% 0%, 100% 0, 100% 100%, 17% 100%);
	}

	nav > ul > li:first-of-type::before,
	nav > ul > li:last-of-type::before {
		content: " ";
		display: block;
		background-color: rgb(228, 144, 42);
		height: 100%;
		width: 150px;
		position: absolute;
		top: 0;
		right: 100%;
		bottom: 0;
		clip-path: polygon(0% 0, 100% 0, 100% 100%, 10% 100%);
	}
	nav > ul > li:last-of-type::before {
		right: auto;
		left: 100%;
		clip-path: polygon(0% 0, 100% 0, 85% 100%, 0% 100%);
		margin-left: -22px;
		background-color: rgb(228, 144, 42);
		width: 170px;
	}
}

#ephtm_menu > ul > li > a:hover {
	clip-path: polygon(0% 0, 100% 0, 100% 100%, 0% 100%);
	z-index: 1;
}
.pseudoPolygon {
	position: relative;
	z-index: 0;
}
.pseudoPolygon:before,
.pseudoPolygon:after {
	content: "";
	display: block;
	position: absolute;
	top: 20px;
	right: 0;
	bottom: 0;
	left: 0;
	
	border: none !important;
	
	transition: clip-path .8s ease-in-out 0s;
}
.pseudoPolygon:after {
	top: 0;
}
.pseudoPolygon:hover::before {
	transition: clip-path .2s ease-in-out 0s;
}
.pseudoPolygon:hover::after {
	transition: clip-path .4s ease-in-out 0s;
}

.pseudoPolygon.pPolyg_1:before {
	background-color: rgb(232, 160, 75);
	opacity: .2;
	clip-path: polygon(0 0, 100% 0, 88% 88%, 8% 90%);
}
.pseudoPolygon.pPolyg_1:after {
	background-color: rgb(232, 160, 75);
	opacity: .2;
	clip-path: polygon(0 20%, 100% 30%, 88% 80%, 24% 100%);
}
.pseudoPolygon.pPolyg_2:before {
	background-color: rgb(232, 160, 75);
	opacity: .2;
	clip-path: polygon(15% 0, 90% 10%, 88% 88%, 8% 90%);
}
.pseudoPolygon.pPolyg_2:after {
	background-color: rgb(232, 160, 75);
	opacity: .2;
	clip-path: polygon(0 20%, 100% 30%, 88% 80%, 14% 100%);
}
/* Numéro 3, avec effet rollover */
.pseudoPolygon.pPolyg_3:before {
	background-color: rgb(232, 160, 75);
	opacity: .2;
	clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
	
	top: 0;
}
.pseudoPolygon.pPolyg_3:after {
	background-color: rgb(232, 160, 75);
	opacity: .2;
	clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
	
	top: -30px;
}
.pseudoPolygon.pPolyg_3:hover::before {
	clip-path: polygon(0 0, 100% 0, 88% 88%, 8% 90%);
}
.pseudoPolygon.pPolyg_3:hover::after {
	clip-path: polygon(0 20%, 100% 30%, 88% 80%, 24% 100%);
}

.pseudoPolygon.pPolyg_login:before {
	background-color: rgb(232, 160, 75);
	opacity: .2;
	clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);	
	top: 0;
	right: -30%;
    left: 30%;
}
.pseudoPolygon.pPolyg_login:after {
	background-color: rgb(232, 160, 75);
	opacity: .2;
	clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);	
	top: -30px;
	right: -30%;
    left: 30%;
}
.pseudoPolygon.pPolyg_login:hover::before {
	clip-path: polygon(0 0, 100% 0, 88% 88%, 8% 90%);
}
.pseudoPolygon.pPolyg_login:hover::after {
	clip-path: polygon(0 20%, 100% 30%, 88% 80%, 24% 100%);
}

/* numéro 4, 5, 6, 7 : petits modèles */

.pseudoPolygon.pPolyg_4:before {
	background-color: rgb(232, 160, 75);
	opacity: .2;
	clip-path: polygon(15% 0, 90% 10%, 88% 88%, 8% 90%);
}
.pseudoPolygon.pPolyg_4:after {
	background-color: rgb(232, 160, 75);
	opacity: .2;
	clip-path: polygon(0 20%, 100% 30%, 88% 80%, 24% 100%);
}
.pseudoPolygon.pPolyg_5:before {
	background-color: rgb(232, 160, 75);
	opacity: .2;
	clip-path: polygon(0 20%, 100% 30%, 88% 80%, 14% 100%);
}
.pseudoPolygon.pPolyg_5:after {
	background-color: rgb(232, 160, 75);
	opacity: .2;
	clip-path: polygon(0 20%, 100% 30%, 88% 80%, 24% 100%);

}
.pseudoPolygon.pPolyg_6:before {
	background-color: rgb(232, 160, 75);
	opacity: .2;
	clip-path: polygon(0 20%, 100% 30%, 88% 80%, 14% 100%);
}
.pseudoPolygon.pPolyg_6:after {
	background-color: rgb(232, 160, 75);
	opacity: .2;
	clip-path: polygon(15% 25%, 90% 20%, 88% 88%, 8% 90%);
}
.pseudoPolygon.pPolyg_7:before {
	background-color: rgb(232, 160, 75);
	opacity: .2;
	clip-path: polygon(15% 0, 90% 10%, 88% 88%, 8% 90%);
}
.pseudoPolygon.pPolyg_7:after {
	background-color: rgb(232, 160, 75);
	opacity: .2;
	clip-path: polygon(0 20%, 100% 30%, 88% 80%, 14% 100%);
}

/* Les labels des formulaires sont aussi des polygons */

.form-contact label {
	background: none !important;
	color: inherit !important;
	padding: 4px 10px 3px;
	position: relative;
	z-index: 1;
}
.form-contact label + input {
	position: relative;
	z-index: 2;
}
.form-contact label::before,
.form-contact label::after {
	content: "";
	display: block;
	position: absolute;
	top: -20px;
	right: 0;
	bottom: -10px;
	left: -10px;
	
	border: none !important;
	z-index: -1;
	
	transition: clip-path .8s ease-in-out 0s;
}
.form-contact label::before {
	background-color: rgba(227, 143, 42, 0.19);
	clip-path: polygon(15% 0, 90% 10%, 88% 88%, 8% 90%);
}
.form-contact label::after {
	background-color: rgba(227, 143, 42, 0.19);
	clip-path: polygon(0 20%, 100% 30%, 88% 80%, 14% 100%);
}

/* Page financement : des polygon sur les h3 */

#financement_conteneur h3 {
	position: relative;
	z-index: 1;
}
#financement_conteneur h3::before,
#financement_conteneur h3::after {
	content: "";
	display: block;
	position: absolute;
	top: -60px;
	right: 40%;
	left: 40%;
	bottom: 10px;
	
	border: none !important;
	z-index: -1;
	
	transition: clip-path .8s ease-in-out 0s;
}
#financement_conteneur h3::before {
	background-color: rgba(227, 143, 42, 0.19);
	clip-path: polygon(15% 0, 90% 10%, 88% 88%, 8% 90%);
}
#financement_conteneur h3::after {
	background-color: rgba(227, 143, 42, 0.19);
	clip-path: polygon(0 20%, 100% 30%, 88% 80%, 14% 100%);
	bottom: 30px;
}

/* Des polygones pour les images d'illustration */
.jarallax,
.jarallax > div {
	position: relative;
}
.jarallax::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 30%;
	
	transition: clip-path .8s ease-in-out 0s;
	
	background-color: rgb(228, 144, 42);
	opacity: .4;
	clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%);
}
.jarallax::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 25%;
	
	transition: clip-path .8s ease-in-out 0s;
	
	background-color: rgb(228, 144, 42);
	opacity: .3;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%);
}
.jarallax > div::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 23%;
	z-index: 2;
	
	transition: clip-path .8s ease-in-out 0s;
	
	background-color: rgb(235, 173, 99);
	opacity: .3;
	clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%);
}
.jarallax > div::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 15%;
	
	transition: clip-path .8s ease-in-out 0s;
	
	background-color: rgb(235, 173, 99);
	opacity: .4;
	clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
}