/* 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(40, 47, 108);
	clip-path: polygon(12% 0, 100% 0, 100% 100%, 0% 100%);
}
.polygonsBackground > div + div {
	background-color: rgb(108, 117, 177);
	clip-path: polygon(0% 0, 100% 0, 100% 100%, 10% 100%);
}
.polygonsBackground > div + div + div {
	background-color: rgb(79, 88, 155);
	clip-path: polygon(8% 0, 100% 0, 100% 100%, 0% 100%);
}
.polygonsBackground > div + div + div + div {
	background-color: rgb(158, 163, 207);
	clip-path: polygon(0% 0%, 100% 0, 100% 100%, 17% 100%);
}
.polygonsBackground > div + div + div + div + div {
	background-color: rgb(59, 68, 137);
	clip-path: polygon(8% 0%, 100% 0, 100% 100%, 0 100%);
}
.polygonsBackground > div + div + div + div + div + div {
	background-color: rgb(40, 47, 108);
	clip-path: polygon(0% 0%, 100% 0, 100% 100%, 5% 100%);
}
.polygonsBackground > div + div + div + div + div + div + div {
	background-color: rgb(79, 88, 155);
	clip-path: polygon(6% 0%, 90% 0, 100% 100%, 0 100%);
}
.polygonsBackground > div + div + div + div + div + div + div + div {
	background-color: var(rgb(158, 163, 207));
	clip-path: polygon(0% 0%, 100% 0, 100% 100%, 17% 100%);
}


.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(79, 88, 155);
	opacity: .2;
	clip-path: polygon(0 0, 100% 0, 88% 88%, 8% 90%);
}
.pseudoPolygon.pPolyg_1:after {
	background-color: rgb(79, 88, 155);
	opacity: .2;
	clip-path: polygon(0 20%, 100% 30%, 88% 80%, 24% 100%);
}
.pseudoPolygon.pPolyg_2:before {
	background-color: rgb(79, 88, 155);
	opacity: .2;
	clip-path: polygon(15% 0, 90% 10%, 88% 88%, 8% 90%);
}
.pseudoPolygon.pPolyg_2:after {
	background-color: rgb(79, 88, 155);
	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(79, 88, 155);
	opacity: .2;
	clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
	
	top: 0;
}
.pseudoPolygon.pPolyg_3:after {
	background-color: rgb(79, 88, 155);
	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(79, 88, 155);
	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(79, 88, 155);
	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(79, 88, 155);
	opacity: .2;
	clip-path: polygon(15% 0, 90% 10%, 88% 88%, 8% 90%);
}
.pseudoPolygon.pPolyg_4:after {
	background-color: rgb(79, 88, 155);
	opacity: .2;
	clip-path: polygon(0 20%, 100% 30%, 88% 80%, 24% 100%);
}
.pseudoPolygon.pPolyg_5:before {
	background-color: rgb(79, 88, 155);
	opacity: .2;
	clip-path: polygon(0 20%, 100% 30%, 88% 80%, 14% 100%);
}
.pseudoPolygon.pPolyg_5:after {
	background-color: rgb(79, 88, 155);
	opacity: .2;
	clip-path: polygon(0 20%, 100% 30%, 88% 80%, 24% 100%);

}
.pseudoPolygon.pPolyg_6:before {
	background-color: rgb(79, 88, 155);
	opacity: .2;
	clip-path: polygon(0 20%, 100% 30%, 88% 80%, 14% 100%);
}
.pseudoPolygon.pPolyg_6:after {
	background-color: rgb(79, 88, 155);
	opacity: .2;
	clip-path: polygon(15% 25%, 90% 20%, 88% 88%, 8% 90%);
}
.pseudoPolygon.pPolyg_7:before {
	background-color: rgb(79, 88, 155);
	opacity: .2;
	clip-path: polygon(15% 0, 90% 10%, 88% 88%, 8% 90%);
}
.pseudoPolygon.pPolyg_7:after {
	background-color: rgb(79, 88, 155);
	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;
}