/*****************************************************************************************************************************/
/* Reset - Redefinitions des balises HTML */
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
@import url(fonts.css);

*{margin:0; padding:0;}
*, *:after, *::before{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, select, textarea, blockquote{font-family:'Poppins', sans-serif; font-size:16px; color:var(--colorMain); font-weight:400;}

fieldset, img{border:0}
address, caption, cite, code, dfn, em, strong, th, var{font-style:normal; font-weight:normal;}

a, button{color:var(--colorYellow); text-decoration:none; cursor:pointer; outline:none; transition:all 0.3s ease 0s;}
a:hover{text-decoration:none;}

input:focus, a:focus, textarea:focus, select:focus, button:focus{outline:none;}

ul li{list-style:none;}

iframe{border:none;}

img{vertical-align:middle;}

::-moz-selection{background:#b3d4fc; text-shadow:none;}
::selection{background:#b3d4fc; text-shadow:none;}

*::-webkit-input-placeholder {font-size: 18px; color:#b5b5b5;}
*:-moz-placeholder {font-size: 18px; color:#b5b5b5; opacity: 1;}
*::-moz-placeholder {font-size: 18px; color:#b5b5b5; opacity: 1;}
*:-ms-input-placeholder {font-size: 18px; color:#b5b5b5;}


/* variables */
:root {
	--colorMain: #00006e;
	--colorAlt: #0cc;
	--colorYellow: #ffff7d;
	--colorWhite: #fff;
	--colorBlue: #5a9bff;
	--colorEco: #323cd7;
	--colorPale: #dcfdff;
	--colorJaune: #f9db05;
	--colorOrange: #f6af27;
	--colorOfonce: #e67e28;
	--colorRouge: #e52322;
}



/*****************************************************************************************************************************/

/*****************************************************************************************************************************/
/* CLASS génériques */
/*****************************************************************************************************************************/
	strong{font-weight:normal;}
	em{font-style:italic;}

	.img-responsive{width:100%; height:auto;}
	.img-cover{width:100%; height:100%; object-fit:cover;}
	.img-contain{width:100%; height:100%; object-fit:contain;}

	.hidetext{font-size:0; text-indent:-9999px;}



/*****************************************************************************************************************************/

/*****************************************************************************************************************************/
/* Structure generale */
/*****************************************************************************************************************************/
	body {
		text-align: center;
		background: var(--colorWhite);
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	}

	#header, 
	#middle, 
	.page {
		position: relative;
		width: 100%;
		margin: 0 auto;
		text-align: left;
	}

	#middle {
		overflow: hidden;
	}

	.page {
		max-width: 1440px;
	}

	.d-flex {
		display: flex;
	}

	.alt-font {
		font-family: 'MacanStencil-Bold';
	}

	.bg-dark {
		background-color: var(--colorMain);
	}

	.bg-pale {
		background-color: var(--colorPale);
	}


	/* bouton */
	.btn {
		display: inline-flex;
		align-items: center;
		min-height: 54px;
		padding: 5px 50px;
		background-color: var(--colorMain);
		border-radius: 12px;
		font-size: 24px;
		color: var(--colorYellow);
		font-weight: 600;
		text-align: center;
		text-transform: uppercase;
		letter-spacing: 1px;
	}

	.btn:hover {
		opacity: 0.7;
	}


	/* -------------- header -------------- */
	#header {
		position: relative;
		padding-top: 74px;
	}

		#header .page {
			display: flex;
			justify-content: center;
			max-width: 10000px;
			height: 388px;
		}

			#header .img-cover {
				object-position: center top;
			}

			#header .logo {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				width: 110px;
				z-index: 10;
			}

			#header .hd-left {
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				width: 50%;
				padding-right: 4.3%;
			}

			#header.header-alt .hd-left {
				padding-right: 0;
			}

			#header .hd-left .tt-txt {
					position: absolute;
					top: 50%;
					left: 3.2%;
					right: 0;
					transform: translateY(-50%);
					font-family: 'Macan-Bold';
					font-size: 30px;
					color: var(--colorWhite);
					text-align: center;
					text-transform: uppercase;
				}

				#header.header-alt .hd-left .tt-txt {
					left: 6.5%;
					font-size: 30px;
				}

					#header .hd-left .tt-txt span {
						display: block;
					}



				#header .tt-img {
					width: 289px;
				}

				#header.header-alt .tt-img {
					position: absolute;
					top: 50%;
					left: 45.7%;
					transform: translate(-50%,-50%);
				}

			#header .hd-right {
				position: relative;
				width: 50%;
			}

				#header .hd-right .tt-txt {
					position: absolute;
					top: 50%;
					left: 3.2%;
					right: 0;
					transform: translateY(-50%);
					font-family: 'Macan-Bold';
					font-size: 38px;
					color: var(--colorWhite);
					text-align: center;
					text-transform: uppercase;
				}

				#header.header-alt .hd-right .tt-txt {
					left: 6.5%;
					font-size: 30px;
				}

					#header .hd-right .tt-txt span {
						display: block;
					}

					#header.header-alt .tt-txt .alt-font {
						margin-bottom: 8px;
						font-size: 42px;
					}


		/* barre menu */
		#header .top-barre {
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 74px;
			padding: 0 58px 0 53px;
			background-color: var(--colorMain);
			box-shadow: 0 0 18px 0 rgba(0,0,0,0.35);
			z-index: 1000;
		}


			/* logo */
			#header .top-barre .logo-top {
				width: 142px;
				padding-bottom: 6px;
			}


			/* menu */
			#header .top-barre .burger {
				display: none;
			}

			#header .top-barre .menu {
				display: flex;
				align-items: center;
			}

				#header .top-barre .menu .filet {
					margin-left: 26px;
				}

				#header .top-barre .menu .filet:before {
					content: '';
					width: 1px;
					height: 15px;
					margin-right: 26px;
					border-left: 1px solid var(--colorWhite);
					display: inline-block;
					vertical-align: middle;
				}

				#header .top-barre .menu li + li {
					margin-left: 18px;
				}

					#header .top-barre .menu a {
						font-size: 15px;
						color: var(--colorWhite);
						font-weight: 500;
						text-transform: uppercase;
						letter-spacing: 0.5px;
						display: inline-block;
					}

					#header .top-barre .menu a:after {
						content: '';
						margin-top: 1px;
						border-bottom: 2px solid transparent;
						display: block;
						transition: all 0.3s ease 0s;
					}

					#header .top-barre .menu a:hover, 
					#header .top-barre .menu .nav-on a {
						color: var(--colorPale);
					}

					#header .top-barre .menu a:hover:after, 
					#header .top-barre .menu .nav-on a:after {
						border-bottom-color: var(--colorPale);
					}

					#header .top-barre .menu .lk-home {
						font-size: 0;
						text-indent: -9999px;
						display: block;
					}

					#header .top-barre .menu .lk-home:before {
						content: '';
						width: 41px;
						height: 36px;
						background: url(../img/picto-home.png) no-repeat;
						background-size: 100% auto;
						display: block;
					}

/* General Styles */
.liste-catg {
  display: grid;
  grid-template-columns: repeat(2, 1fr);  /* 2 columns */
  gap: 20px;  /* Space between items */
  list-style: none;
  padding: 0;
  margin: 0;
}

.liste-catg li {
  display: flex;
  flex-direction: column;  /* Stack the image and text vertically */
  align-items: center;  /* Center horizontally */
  justify-content: center;  /* Center vertically */
  text-align: center;
}

.liste-catg a {
  display: flex;
  flex-direction: column;  /* Keep image and text in a column layout */
  align-items: center;  /* Align image and text horizontally */
  text-decoration: none;
  color: inherit;
}

.picto-catg {
  margin-bottom: 10px;  /* Space between image and text */
}

.img-responsive {
  max-width: 100%;  /* Make image responsive */
  height: auto;
  object-fit: contain;  /* Ensure the image doesn't stretch */
  width: 100%;  /* Set a fixed width for consistency */
}

/* Responsive Styles for Mobile */
@media (max-width: 767px) {
  .liste-catg {
    grid-template-columns: 1fr;  /* Switch to 1 column on mobile */
  }

  .img-responsive {
    width: 100%;  /* Optionally scale down images on mobile */
  }
}





	/* -------------- footer -------------- */
	#footer {
		position: relative;
	}

		#footer .page {
			display: flex;
			align-items: flex-start;
			justify-content: center;
			padding: 45px 0;
		}

			#footer .ft-left {
				display: flex;
				flex-direction: column;
				justify-content: center;
				position: relative;
				width: 50%;
			}

				#footer .ft-left .tt-img {
					width: 211px;
					margin: 0 auto;
				}

				#footer .ft-left .tt-txt {
					margin: 50px 0 38px;
					font-family: 'Macan-Bold';
					font-size: 24px;
					color: var(--colorWhite);
					text-align: center;
					line-height: 26px;
				}

					#footer .ft-left .tt-txt span {
						display: block;
					}

				#footer .ft-left .lk-bas {
					display: flex;
					flex-wrap: wrap;
					justify-content: center;
				}

					#footer .ft-left .lk-bas a {
						margin: 10px 2.5% 0;
						font-size: 12px;
						color: var(--colorYellow);
					}

					.lk {
						display: inline-block;
					}

					#footer .ft-left .lk-bas a:after, 
					.lk:after {
						content: '';
						width: 100%;
						height: 1px;
						border-bottom: 1px solid var(--colorYellow);
						display: block;
						transition: opacity 0.3s ease 0s;
					}

					#footer .ft-left .lk-bas a:hover:after, 
					.lk:hover:after {
						opacity: 0;
					}

			#footer .ft-right {
				display: flex;
				flex-direction: column;
				justify-content: center;
				width: 50%;
				padding: 23px 3% 0;
			}

				#footer .ft-right .tt-ft {
					font-family: 'Macan-Bold';
					font-size: 24px;
					color: var(--colorYellow);
					text-align: left;
					text-transform: uppercase;
					letter-spacing: 1.5px;
				}

				#footer .ft-right .paragraphe {
					padding: 26px 0;
					font-size: 13px;
					color: var(--colorWhite);
					text-align: left;
					line-height: 18px;
					letter-spacing: 0.5px;
				}

				#footer .ft-right .txt-bas {
					display: flex;
					align-items: center;
					font-size: 15px;
					color: var(--colorWhite);
					font-weight: 500;
					font-style: italic;
					letter-spacing: 0.5px;
				}

					#footer .ft-right .txt-bas a {
						color: var(--colorWhite);
					}

					#footer .ft-right .txt-bas .img-veolia {
						width: 126px;
						margin-left: 12px;
					}

					#footer .ft-right .txt-bas .img-gestes {
						width: 155px;
						margin-left: 34px;
					}



/*****************************************************************************************************************************/

/*****************************************************************************************************************************/
/* Bloc css de la page index */
/*****************************************************************************************************************************/
/* titre h2 */
.tt-h2 {
	position: relative;
	font-family: 'MacanStencil-Bold';
	font-size: 35px;
	color: var(--colorAlt);
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 2px;
}

.tt-h2-lg {
	font-size: 46px;
}

	.tt-h2 .alt-font {
		font-family: 'Macan-Bold';
		display: block;
	}


/* intro */
.intro {
	padding: 95px 9.5vw 0;
	text-align: center;
}

	.intro .tt-intro {
		font-family: 'Macan-Bold';
		font-size: 30px;
		text-transform: uppercase;
		line-height: 31px;
		letter-spacing: 1.5px;
	}

	.intro .chapo {
		margin-top: 20px;
		font-size: 20px;
		font-weight: 500;
		line-height: 22px;
	}


/* bloc constats */
.constats {
	margin-top: 55px;
	text-align: center;
}


	/* titre */
	.constats .tt-h2:after {
		content: '';
		width: 1px;
		height: 25px;
		margin: 16px auto 0;
		border-left: 1px solid #6f6fad;
		display: block;
		font-weight: 200;
	}


	/* cadre */
	.constats .cadre {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 90%;
		max-width: 764px;
		height: 95px;
		margin: 0 auto;
		padding: 0 5%;
		background-color: var(--colorAlt);
		border-radius: 8px;
	}

	.constats .cadre + .cadre {
		margin-top: 8px;
	}

		.constats .cadre .titre {
			font-size: 22px;
			color: var(--colorWhite);
			font-weight: 700;
		}

		.constats .cadre .txt {
			color: var(--colorWhite);
		}


/* bloc texte */
.txt-inter {
	width: 73%;
	max-width: 764px;
	margin: 50px auto 0;
	font-size: 18px;
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
	line-height: 24px;
	letter-spacing: 1.5px;
}


/* bloc mots d'ordre */
.mots {
	margin-top: 80px;
	text-align: center;
}

	.mots .liste-mots {
		display: flex;
		justify-content: center;
		position: relative;
		margin-top: 36px;
	}

	.mots .liste-mots:after {
		content: '';
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		width: 100%;
		height: 1px;
		border-bottom: 1px solid var(--colorMain);
		display: block;
	}

		.mots .liste-mots li {
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			width: 214px;
			height: 54px;
			background-color: var(--colorMain);
			border-radius: 8px;
			font-family: 'MacanStencil-Bold';
			font-size: 30px;
			color: var(--colorYellow);
			text-transform: uppercase;
			z-index: 10;
		}

		.mots .liste-mots li + li {
			margin-left: 64px;
		}


/* bloc enjeux */
.enjeux {
	display: flex;
	align-items: center;
	margin-top: 40px;
}

	.enjeux .visuel {
		width: 68.9%;
		height: 462px;
		margin-left: -24.9%;
		background: url(../img/visuel-enjeux.jpg) no-repeat top right;
		background-size: auto 100%;
	}

	.enjeux .texte {
		width: 56%;
		padding: 0 4.8% 0 3.8%;
	}


		/* titre */
		.enjeux .texte .tt-h2 {
			padding: 36px 0 0 44px;
			text-align: left;
		}


		/* liste texte */
		.enjeux .texte .liste-bullet {
			margin-top: 32px;
		}

			.liste-bullet li {
				position: relative;
				padding: 0 0 14px 56px;
				line-height: 20px;
			}

			.liste-bullet li:last-child {
				padding-bottom: 0;
			}

			.liste-bullet li:before {
				content: '';
				position: absolute;
				top: -4px;
				left: 0;
				width: 33px;
				height: 33px;
				background-color: var(--colorYellow);
				border-radius: 33px;
				display: block;
				z-index: 10;
			}

			.liste-bullet li:after {
				content: '';
				position: absolute;
				top: 0;
				left: 16px;
				width: 1px;
				height: 100%;
				border-left: 1px solid #4f4f9b;
				display: block;
			}

			.liste-bullet li:last-child:after {
				display: none;
			}

				.enjeux .texte .liste-bullet li strong {
					font-size: 18px;
					font-weight: 700;
					text-transform: uppercase;
				}


/* bloc interets */
.interets {
	margin-top: 80px;
	overflow: hidden;
}

	.interets .d-flex {
		position: relative;
		margin-top: 38px;
	}

	.interets .d-flex:before {
		content: '';
		position: absolute;
		top: 44px;
		left: 0;
		width: 100%;
		height: 1px;
		border-bottom: 1px solid var(--colorYellow);
		display: block;
	}

	.interets .d-flex .page {
		display: flex;
	}


	/* titre principal */
	.interets .tt-h2 {
		padding-top: 36px;
	}


	/* titre colonne */
	.interets .tt-h3 {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		position: relative;
		height: 90px;
		padding: 0 20px;
		background-color: var(--colorMain);
		border: 1px solid var(--colorYellow);
		border-radius: 8px;
		font-family: 'MacanStencil-Bold';
		font-size: 25px;
		color: var(--colorYellow);
		text-transform: uppercase;
	}


	/* liste texte */
	.interets .liste-bullet {
		margin-top: 36px;
	}

		.interets .liste-bullet li {
			padding: 0 0 20px 49px;
			color: var(--colorWhite);
		}

		.interets .liste-bullet li:last-child {
			padding-bottom: 0;
		}

		.interets .liste-bullet li:before {
			top: 0;
			width: 25px;
			height: 25px;
			border-radius: 25px;
		}

		.interets .liste-bullet li:after {
			left: 12px;
			border-left-color: var(--colorYellow);
		}

			.interets .liste-bullet li strong {
				font-weight: 600;
			}

	
	/* colonne gauche */
	.interets .col-left {
		width: 58%;
		padding: 0 1.5% 0 8.1%;
	}

		.interets .col-left .liste-bullet {
			margin-left: 4px;
		}


	/* colonne droite */
	.interets .col-right {
		width: 42%;
	}

		.interets .col-right .liste-bullet {
			margin-left: 8px;
		}

			.interets .col-right .liste-bullet li {
				padding-right: 34%;
			}

			.interets .col-right .visuel {
				width: 121%;
				height: 340px;
				margin: 16px 0 0 14%;
				background: url(../img/visuel-interets.jpg) no-repeat;
				background-size: auto 100%;
			}


/* cadre texte */
.txt-cadre {
	position: relative;
	width: 100%;
	height: 1px;
	margin: 36px auto;
}

.txt-cadre:after {
	content: '';
	position: absolute;
	top: -18px;
	left: 50%;
	transform: translateX(-50%);
	width: 13px;
	height: 39px;
	background: url(../img/mark.png) no-repeat;
	background-size: 100% 100%;
	display: block;
}


/* cta rubrique */
.cta {
	display: flex;
	justify-content: center;
}

	.inner-cta {
		display: flex;
		justify-content: center;
		position: relative;
		margin-top: 52px;
		z-index: 1;
	}

	.inner-cta:after {
		content: '';
		position: absolute;
		top: 127px;
		left: 0;
		width: 100%;
		height: 1px;
		border-bottom: 1px solid var(--colorAlt);
		display: block;
		z-index: -1;
	}

		.cta .cta-bloc {
			display: flex;
			flex-direction: column;
			align-items: center;
			flex: 0 0 342px;
			width: 342px;
		}

		.cta .cta-bloc + .cta-bloc {
			margin-left: 16.6%;
		}

			.cta .lk-pg {
				display: flex;
				flex-direction: column;
				align-items: center;
				height: 254px;
				padding-top: 37px;
				background-color: var(--colorWhite);
				border: 1px solid var(--colorAlt);
				border-radius: 7px;
			}

			.cta .lk-pg:hover {
				box-shadow: 0 0 8px 4px rgba(0,0,110,0.1);
			}

				.cta .lk-pg .rubrique {
					display: flex;
					align-items: center;
					height: 152px;
					font-family: 'MacanStencil-Semibold';
					font-size: 34px;
					color: var(--colorMain);
					text-align: center;
					text-transform: uppercase;
					line-height: 35px;
				}

				.cta .lk-alt .rubrique {
					color: var(--colorAlt);
				}

				.cta .lk-pg .lien {
					font-size: 17px;
					color: var(--colorAlt);
					font-weight: 700;
				}

				.cta .lk-alt .lien {
					color: var(--colorMain);
				}

			.cta .sticker {
				display: flex;
				width: 251px;
				height: 76px;
				margin-top: 20px;
				background: url(../img/sticker-sol.png) no-repeat;
				background-size: 100% 100%;
				font-size: 17px;
				color: var(--colorMain);
				font-weight: 700;
			}

			.cta .bloc-alt .sticker {
				background-image: url(../img/sticker-eco.png);
			}

			.cta .sticker:hover {
				filter: drop-shadow(0 0 4px rgba(0,0,110,0.3));
			}

				.cta .sticker span {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 100%;
					height: 100%;
					transform: rotate(-3deg);
				}
				.cta .bloc-alt .sticker span {
					transform: rotate(3deg);
				}

					.cta .sticker strong {
						font-family: 'MacanStencil-Bold';
						font-size: 23px;
						text-transform: uppercase;
					}


/* slider videos */
.vidz {
	position: relative;
	padding: 80px 0 93px;
	text-align: center;
}

.vidz.wt-after {
	padding-bottom: 134px;
}

.vidz.wt-btn {
	padding-bottom: 83px;
}

.vidz.wt-after:after {
	content: '';
	position: absolute;
	bottom: 43px;
	left: 50%;
	transform: translateX(-50%);
	width: 13px;
	height: 39px;
	background: url(../img/mark.png) no-repeat;
	background-size: 100% 100%;
	display: block;
}

	.vidz .bg-mark {
		position: absolute;
		bottom: 0;
		left: -128px;
		width: 398px;
		height: 587px;
		background: url(../img/mark-videos.png) no-repeat;
		background-size: 100% auto;
	}

	.vidz.wt-btn .bg-mark {
		bottom: 162px;
		height: 627px;
		background-image: url(../img/mark-vid-full.png);
	}

	.vidz .tt-h2 {
		display: inline-flex;
		position: relative;
		padding: 0 18px;
		background: #fff;
    	z-index: 2;
	}

	.vidz .cadre-vidz {
		position: relative;
		width: 73.3%;
		margin: -24px auto 0;
		padding: 68px 0 35px;
		background: #fff;
		border: 1px solid var(--colorAlt);
    	border-radius: 22px;
    	z-index: 1;
	}

		.vidz .slider-vidz {
			width: calc(54vw + 20px);
			margin: 0 auto;
		}

			.vidz .vidz-item {
				padding: 0 10px;
			}

				.vidz .inner-vid {
					position: relative;
					padding-bottom: 56.25%;
				}

				.vidz .inner-vid iframe {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
				}

				.vidz .tt-vid {
					margin-top: 14px;
					font-size: 20px;
					font-weight: 700;
					text-align: center;
					line-height: 26px;
				}

	.vidz .chapo {
		position: relative;
	    width: 358px;
		margin: 72px auto 18px;
	    font-size: 20px;
	    font-weight: 500;
	    line-height: 30px;
	    z-index: 1;
	}



/*****************************************************************************************************************************/

/*****************************************************************************************************************************/
/* Bloc css de la page citoyens */
/*****************************************************************************************************************************/
/* bloc manifeste */
.manifeste {
	position: relative;
	padding: 45px 7.6% 40px;
	background: url(../img/bg-manifeste.png) no-repeat bottom center;
	background-size: 414px 147px;
	text-align: center;
}

	.manifeste .paragraphe {
		font-size: 16px;
		font-weight: 400;
		line-height: 25px;
	}

	.manifeste .tt-h2 + .paragraphe {
		margin-top: 38px;
	}

		.manifeste .paragraphe strong {
			font-weight: 700;
		}

	.manifeste .tt-h3 {
		margin: 60px 0 10px;
		font-size: 30px;
		font-weight: 700;
	}


/* bloc fond bleu */
.citoyen {
	position: relative;
	padding: 38px 8.95% 64px 7.8%;
}

	.citoyen .tt-h2 {
		margin-left: 63px;
		text-align: left;
	}

	.citoyen .liste-bullet {
		margin-top: 36px;
	}

		.citoyen .liste-bullet li {
			padding: 0 0 20px 63px;
			font-size: 16px;
			color: var(--colorWhite);
			font-weight: 400;
			line-height: 24px;
		}

		.citoyen .liste-bullet li:after {
		    border-left: 0.5px solid var(--colorYellow);
		}

			.citoyen .liste-bullet li strong {
				font-weight: 600;
			}

	.citoyen .accroche {
		margin-top: 45px;
		font-size: 26px;
		color: var(--colorWhite);
		font-weight: 700;
		text-align: center;
		text-transform: uppercase;
		line-height: 34px;
	}


/* bloc pourquoi signer */
.signer {
	position: relative;
	padding: 40px 11.5% 47px;
	text-align: center;
	overflow: hidden;
}

.signer:before {
	content: '';
	position: absolute;
	top: 0;
	right: -61px;
	width: 420px;
	height: 276px;
	background: url(../img/bg-signer.png) no-repeat;
	background-size: 100% 100%;
	display: block;
	z-index: -1;
}

.signer.inv:before {
	right: auto;
	left: -61px;
}

.signer.sol:before {
	top: -40px;
	right: auto;
	left: 50%;
	transform: translateX(-50%);
}

	.signer .sstt-signer {
		margin-top: 32px;
		font-size: 22px;
		font-weight: 500;
	}

	.signer .liste-signer {
		margin-top: 18px;
	}

		.signer .liste-signer li {
			font-size: 16px;
			line-height: 25px;
		}

		.signer .liste-signer li + li:before {
			content: '';
			width: 98px;
			height: 1px;
			margin: 20px auto;
			border-bottom: 3px solid var(--colorAlt);
			display: block;
		}

	.signer .bouton {
		margin-top: 35px;
	}


/* modal signer */
.modal .tt-modal {
	margin-bottom: 55px;
	font-family: 'MacanStencil-Bold';
	font-size: 49px;
	color: var(--colorAlt);
	text-transform: uppercase;
	letter-spacing: 1px;
}

.modal .formulaire {
	position: relative;
}

	.modal .btn {
		height: 50px;
		padding: 0 36px;
		background-color: var(--colorYellow);
		border-radius: 5px;
		color: var(--colorMain);
	}

	.modal .form-error {
		display: none;
	}

	.modal .txt-error {
		position: absolute;
	    top: -35px;
	    left: 0;
	    width: 100%;
	    color: #f00;
	    display: block;
	}

	.modal .form-item {
		display: flex;
		margin-bottom: 25px;
	}


	/* formulaire */
	.modal .label {
		width: 20.6%;
		padding-right: 16px;
		font-size: 30px;
		color: var(--colorWhite);
		font-weight: 500;
		text-align: right;
		text-transform: uppercase;
		line-height: 40px;
	}

	.modal .error .label {
		color: #f00;
	}

		.modal .label sup {
			font-size: 18px;
		}

	.modal .input-txt {
		width: 72.5%;
		height: 40px;
		padding: 0 12px;
		background-color: var(--colorWhite);
		border: 1px solid var(--colorWhite);
		border-radius: 5px;
	}

	.modal .error .input-txt {
		border-color: #f00;
	}


	/* checkbox */
	.form-check {
		margin-bottom: 24px;
		padding-left: 14.9%;
	}

		.check-container {
			position: relative;
			font-size: 15px;
			color: var(--colorWhite);
			font-weight: 500;
			text-align: left;
			display: block;
			cursor: pointer;
			user-select: none;
		}

			.check-container .txt-label {
				padding: 4px 0 0 51px;
				line-height: 18px;
				display: block;
			}

			.check-container .label-big {
				font-size: 20px;
				line-height: 23px;
			}

				.check-container .txt-label a {
					color: var(--colorWhite);
					text-decoration: underline;
				}

			.check-container input {
				position: absolute;
				width: 0;
				height: 0;
				opacity: 0;
				cursor: pointer;
			}

			.check-container .checkmark {
				position: absolute;
				top: 0;
				left: 0;
				width: 27px;
				height: 27px;
				background: var(--colorWhite);
				border: 3px solid var(--colorBlue);
				border-radius: 4px;
				transition: all 0.3s ease 0s;
			}

			.error .check-container .checkmark {
				border-color: #f00;
			}

			.check-container input:checked ~ .checkmark {
				background-image: url(../img/tick.png);
				background-repeat: no-repeat;
				background-position: center;
				background-size: 15px 11px;
			}

.modal #merci {
	padding-top: 36px;
	display: none;
}

	.modal #merci .tt-modal {
		font-size: 60px;
		color: var(--colorWhite);
		line-height: 60px;
	}

	.modal #merci .tt-modal:after {
		content: '';
		width: 23px;
		height: 73px;
		margin: 68px auto 0;
		background: url(../img/mark-white.png) no-repeat;
		background-size: 100% 100%;
		display: block;
	}

		.modal #merci .tt-modal span {
			font-family: 'Macan-Bold';
			font-size: 35px;
			color: var(--colorWhite);
			line-height: 45px;
			display: block;
		}

	.modal .paragraphe {
		padding: 0 15%;
		font-size: 24px;
		color: var(--colorWhite);
		font-weight: 500;
		line-height: 34px;
	}

	.modal .share {
		display: flex;
		justify-content: center;
		margin-top: 57px;
	}

		.modal .share li + li {
			margin-left: 21px;
		}

			.modal .share li a {
				width: 47px;
				height: 47px;
				background-repeat: no-repeat;
				background-size: 100% 100%;
				display: block;
			}

			.modal .share li a:hover {
				opacity: 0.6;
			}

			.modal .share li .lk-mail {
				background-image: url(../img/picto-mail.png);
			}

			.modal .share li .lk-fb {
				background-image: url(../img/picto-fb.png);
			}

			.modal .share li .lk-twt {
				background-image: url(../img/picto-twt.png);
			}

			.modal .share li .lk-insta {
				background-image: url(../img/picto-insta.png);
			}

			.modal .share li .lk-lkin {
				background-image: url(../img/picto-lkin.png);
			}


/* bloc signataires */
.signataires .page {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 18px 0 46px;
}

	.signataires .tt-sign {
		font-size: 31px;
		font-weight: 700;
		text-align: center;
	}

	.signataires .decompte {
		width: 327px;
		height: 65px;
		margin: 10px -17px 0 0;
		background: url(../img/bg-decompte.png) no-repeat;
		background-size: 310px 65px;
		font-family: 'Roboto', sans-serif;
		font-size: 55px;
		color: var(--colorWhite);
		font-weight: 700;
		text-align: right;
		line-height: 65px;
		letter-spacing: 31px;
	}

	.signataires .legende {
		margin-top: 22px;
		font-size: 25px;
	}

		.signataires .legende strong {
			font-weight: 700;
		}

	.signataires .tt-slider {
		margin-top: 26px;
		font-size: 22px;
		text-transform: uppercase;
		letter-spacing: 0.5px;
	}

	.signataires .slider-sign {
		width: 100%;
		margin-top: 48px;
	}

		.signataires .slider-sign .inner-sign {
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			position: relative;
			height: 72px;
			padding: 0 0 8px 27.3%;
		}

		.signataires .slider-sign .inner-sign:before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 1px;
			height: 72px;
			border-left: 3px solid #41dcdb;
			display: block;
		}

			.signataires .slider-sign p {
				font-size: 18px;
			}

			.signataires .slider-sign .txt-nom {
				font-weight: 700;
				text-transform: uppercase;
			}


/* bloc decouvre */
.decouvre {
	position: relative;
	padding: 50px 11.5% 90px;
	background: url(../img/bg-decouvre.png) no-repeat center right;
	background-size: auto 100%;
	text-align: center;
}

	.decouvre .chapo {
	    width: 405px;
		margin: 40px auto 55px;
	    font-size: 23px;
	    line-height: 30px;
	}



/*****************************************************************************************************************************/

/*****************************************************************************************************************************/
/* Bloc css de la page organisations */
/*****************************************************************************************************************************/
/* comment ca marche */
.marche {
	position: relative;
	padding: 42px 0 73px;
	overflow: hidden;
}

	.marche .inner-marche {
		padding: 0 7.6%;
	}

		.marche .tt-h2 {
			color: var(--colorMain);
		}

		.marche .chapo {
			padding: 20px 21.5% 0;
			font-family: 'Macan-Bold';
			font-size: 20px;
			text-align: center;
		}

	.marche .d-flex {
		display: flex;
		margin-top: 50px;
	}

		.marche .d-flex .visuel {
			width: 68.9%;
			height: 462px;
			margin-right: -31.9%;
			background: url(../img/visuel-org.jpg) no-repeat;
			background-size: auto 100%;
		}

		.marche .d-flex .liste-bullet {
			width: 63%;
			padding: 0 3% 0 12.2%;
		}

			.marche .d-flex .liste-bullet li {
			    padding: 0 0 25px 65px;
			    font-size: 18px;
			    line-height: 25px;
			}

			.marche .d-flex .liste-bullet li:last-child {
			    padding-bottom: 0;
			}


/* besoin d'idees */
.idees {
	position: relative;
	padding-top: 48px;
	text-align: center;
}

	.idees .inner-idees {
		padding: 0 17.1%;
	}

		.idees .chapo {
			padding-top: 26px;
			font-family: 'Macan-Bold';
			font-size: 20px;
			color: var(--colorWhite);
			text-align: center;
			letter-spacing: 1px;
		}

	.idees .slider-idees {
		max-width: 1020px;
		margin: 36px auto 0;
	}

		.idees .slider-idees .idee-item p {
			display: flex;
			align-items: center;
			width: 340px;
			height: 271px;
			padding: 0 44px;
			background: url(../img/bulle-idee.png) no-repeat top center;
			background-size: 300px auto;
			font-size: 22px;
			color: var(--colorWhite);
			line-height: 31px;
		}


/* pourquoi s'engager */
.pourquoi {
	position: relative;
	padding: 48px 13.3% 83px;
	text-align: center;
}

	.pourquoi .liste-pourquoi {
		margin-top: 50px;
	}

		.pourquoi .liste-pourquoi .tt-h3 {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 47px;
			background-color: var(--colorAlt);
			border-radius: 6px;
			font-family: 'MacanStencil-Semibold';
			font-size: 26px;
			color: var(--colorWhite);
			text-transform: uppercase;
			letter-spacing: 2px;
		}

		.pourquoi .liste-pourquoi .paragraphe {
			margin-top: 24px;
			font-size: 18px;
			font-weight: 500;
			line-height: 22px;
		}

		.pourquoi .liste-pourquoi .paragraphe + .tt-h3 {
			margin-top: 36px;
		}

	.pourquoi .encart {
		position: relative;
		margin-top: 80px;
		padding: 58px 13% 68px;
		background-color: var(--colorWhite);
		border: 1px solid #4bdcdc;
		border-radius: 22px;
		z-index: 10;
	}

		.pourquoi .encart .chapo {
			font-size: 32px;
			font-weight: 600;
			line-height: 42px;
		}

		.pourquoi .encart dl dt {
			margin-top: 20px;
			font-family: 'MacanStencil-Semibold';
			font-size: 30px;
			color: var(--colorBlue);
			line-height: 36px;
		}

		.pourquoi .encart dl dd {
			font-size: 18px;
			font-weight: 500;
		}

	.pourquoi .bg-mark {
		position: absolute;
		bottom: 32px;
		left: -64px;
		width: 280px;
		height: 523px;
		background: url(../img/bg-mark.png) no-repeat;
		background-size: 100% auto;
	}


/* nous contacter */
.contact {
	position: relative;
	padding: 60px 7.6% 40px;
	text-align: center;
}

	.contact .tt-h2 {
		color: var(--colorBlue);
	}

	.contact .paragraphe {
		margin-top: 36px;
		font-size: 18px;
		color: var(--colorWhite);
		font-weight: 500;
		line-height: 25px;
	}

	.contact .paragraphe:after {
		content: '';
		width: 12px;
		height: 38px;
		margin: 18px auto 0;
		background: url(../img/mark-white.png) no-repeat;
		background-size: 100% 100%;
		display: block;
	}

	.contact .marg-alt {
		margin-top: 60px;
	}

	.contact .paragraphe .bouton {
		margin-top: 32px;
	}

	.contact .bouton2 {
		margin-top: 22px;
		font-size: 12px;
	}

	.contact .bouton {
		margin-top: 22px;
	}

		.contact .bouton .btn {
			height: 50px;
			padding: 0 28px;
			background-color: var(--colorBlue);
			border-radius: 5px;
			color: var(--colorWhite);
		}

		.contact .bouton2 .btn {
			height: 32px;
			padding: 0 15px;
			background-color: transparent;
			border-radius: 5px;
			color: var(--colorBlue);
			font-size: 12px;
			border-style: solid;
			border-color: var(--colorBlue);
			border-width: 2px;

		}

	.contact .adresse {
		margin-top: 36px;
		color: var(--colorWhite);
	}


/* modal contact */
.modal .intro-modal {
	margin-bottom: 55px;
	font-family: 'Macan-Bold';
	font-size: 26px;
	color: var(--colorAlt);
	text-align: center;
	line-height: 34px;
	letter-spacing: 1px;
}


	/* formulaire */
	#modalFormOrg.modal .label {
		width: 33.7%;
		padding-right: 26px;
	}

	#modalFormOrg.modal .input-txt {
		width: 61.6%;
	}

	#modalFormOrg.modal .bouton {
		padding-top: 25px;
	}

		#modalFormOrg.modal .bouton .btn {
			background-color: var(--colorAlt);
			color: var(--colorMain);
		}


/* partenaires */
.partner {
	position: relative;
	padding: 40px 4.3% 20px;
	text-align: center;
}

	.partner .tt-prtn {
		font-size: 35px;
		color: var(--colorBlue);
		font-weight: 600;
	}

	.partner .liste-prtn {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin-top: 40px;
	}

		.partner .liste-prtn .prtn-item {
			width: 191px;
			padding: 0 10px 40px;
		}


	/* slider mises en avant */
	.slider-mea {
		width: calc(100% - 180px);
		margin: 30px auto 0;
	}

		.slider-mea .mea-item {
			padding: 0 10px;
		}

			.slider-mea .mea-item .inner-mea {
				display: flex;
				align-items: center;
				background: url(../img/bg-mea.png) no-repeat center right -72px;
				background-size: auto 150%;
				border: 1px solid #649bff;
				border-radius: 22px;
			}

				.slider-mea .mea-item .mea-logo {
					width: 42.6%;
					padding: 0 8.3%;
				}

				.slider-mea .mea-item .mea-txt {
					width: 46.2%;
					padding: 32px 0 28px;
					font-size: 17px;
					font-weight: 500;
					text-align: left;
					line-height: 25px;
				}

					.slider-mea .mea-item .mea-txt .emp {
						margin-top: 11px;
						font-size: 15px;
						color: #649bff;
						font-weight: 700;
						display: block;
					}



/*****************************************************************************************************************************/

/*****************************************************************************************************************************/
/* Bloc css de la page eco gestes */
/*****************************************************************************************************************************/
.color-alt {
	color: var(--colorEco);
}

.tt-eco {
	font-family: 'Macan-Bold';
	font-size: 28px;
	color: var(--colorEco);
	text-align: center;
	line-height: 32px;
}


/* bloc intro */
.intro-eco {
	padding-top: 26px;
}

	.intro-eco .bouton {
		margin-top: 48px;
		text-align: center;
	}


/* categories */
.categories {
	padding: 42px 0 16px;
}

	.categories .tt-eco {
		line-height: 38px;
	}

	.liste-catg {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

		.liste-catg li {
			
		}

			.liste-catg a {
				display: flex;
				flex-direction: column;
				align-items: center;
				position: relative;
				padding: 0 12px 20px;
			}

				.picto-catg {
					width: 57px;
					height: 57px;
					background-color: var(--colorEco);
					border-radius: 100px;
					transition: all 0.3s ease 0s;
					display: block;
					overflow: hidden;
				}

				a:hover .picto-catg {
					background-color: var(--colorMain);
				}

				.liste-catg .texte {
					padding-top: 10px;
					font-family: 'MacanStencil-Semibold';
					font-size: 16px;
					color: var(--colorMain);
					text-transform: uppercase;
					letter-spacing: 0.5px;
					white-space: nowrap;
					transition: all 0.3s ease 0s;
				}


/* detail categorie */
.catg-item {
	position: relative;
}

.catg-maison {
	padding-top: 86px;
}

.catg-sdb {
	padding-top: 111px;
}

.catg-brico {
	padding-top: 80px;
}

.catg-jardin {
	padding-top: 104px;
}

.catg-piscine {
	padding-top: 79px;
}

.catg-aliment {
	padding-top: 81px;
}

.catg-habit {
	padding-top: 73px;
	z-index: 1;
}


	/* visuel */
	.catg-item .visuel {
		position: absolute;
		width: 390px;
		height: 331px;
		background-repeat: no-repeat;
		background-size: 100% auto;
	}

	.catg-maison .visuel {
		top: 52px;
		left: -3.2%;
		background-image: url(../img/drop-maison.jpg);
	}

	.catg-sdb .visuel {
		top: 35px;
		right: 4.3%;
		width: 291px;
		height: 357px;
		background-image: url(../img/drop-sdb.jpg);
	}

	.catg-brico .visuel {
		top: 51px;
		right: -1.9%;
		background-image: url(../img/drop-brico.jpg);
	}

	.catg-jardin .visuel {
		top: 66px;
		left: -4.5%;
		background-image: url(../img/drop-jardin.jpg);
	}

	.catg-piscine .visuel {
		top: 41px;
		right: 2.3%;
		background-image: url(../img/drop-piscine.jpg);
	}

	.catg-aliment .visuel {
		top: 80px;
		left: 2px;
		width: 333px;
		height: 283px;
		background-image: url(../img/drop-aliment.jpg);
	}

	.catg-habit .visuel {
		top: 60px;
		right: -1.2%;
		background-image: url(../img/drop-habit.jpg);
	}


	/* nom categorie */
	.catg-item .nom-catg {
		display: flex;
		justify-content: center;
		position: relative;
		font-family: 'MacanStencil-Semibold';
		font-size: 28px;
		text-transform: uppercase;
	}

		.catg-item .nom-catg .picto-catg {
			position: absolute;
			top: 4px;
			left: 50%;
			transform: translateX(-185px);
			width: 71px;
			height: 71px;
		}

		.catg-item .inv .picto-catg {
			top: -14px;
			transform: translateX(117px);
		}

		.catg-item .nom-catg .texte {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 246px;
			height: 75px;
			background: url(../img/sticker.png) no-repeat;
			background-size: 100% 100%;
		}

			.catg-item .nom-catg .texte span {
				transform: rotate(-5deg);
			}


	/* slider gestes */
	.slider-gestes {
		width: 86%;
		margin: 38px auto 0;
	}

		.slider-gestes .geste-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;
			height: 227px;
			margin: 0 12px 0 13px;
			background-color: var(--colorMain);
			border-radius: 7px;
			overflow: hidden;
			cursor: pointer;
		}

		.slider-gestes .geste-item:after {
			content: '';
			position: absolute;
			top: 12px;
			right: 15px;
			width: 26px;
			height: 30px;
			background: url(../img/picto-info.png) no-repeat;
			background-size: 100% auto;
			display: block;
			transition: all 0.4s ease 0s;
		}

		.slider-gestes .geste-item:hover:after {
			background-image: url(../img/picto-info-hover.png);
		}

			.slider-gestes .geste-item .picto-gst {
				height: 120px;
			}

			.slider-gestes .geste-item .nom-gst {
				font-size: 22px;
				color: #fff;
				font-weight: 700;
				text-align: center;
				line-height: 28px;
			}

			.slider-gestes .geste-item .detail {
				display: flex;
    			align-items: center;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 0;
				background-color: var(--colorAlt);
				line-height: 20px;
				transition: height 0.4s ease 0s;
				overflow: hidden;
			}

			.slider-gestes .geste-item:hover .detail {
				height: 100%;
			}

				.slider-gestes .geste-item .detail p {
					padding: 0 30px 0 23px;
				}

					.slider-gestes .geste-item .detail strong {
						font-weight: 700;
					}


/* bandeau */
.bandeau {
	position: relative;
	margin-top: 50px;
	overflow: hidden;
}

	.bandeau .page {
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: 300px;
	}

	.bandeau .page:before {
		content: '';
		position: absolute;
		top: -23px;
		left: 8.6%;
		width: 125px;
		height: 302px;
		background: url(../img/mark-left.png) no-repeat;
		background-size: 100% auto;
		display: block;
	}

	.bandeau.bd-inv .page:before {
		top: -30px;
		left: auto;
		right: 4.9%;
		width: 157px;
		height: 309px;
		background-image: url(../img/mark-right.png);
	}

		.bandeau .tt-bd, 
		.bandeau .chapo-bd {
			padding: 0 27.6%;
			text-align: center;
		}

		.bandeau .tt-bd {
			margin-bottom: 28px;
			font-size: 27px;
			font-weight: 600;
		}

		.bandeau .chapo-bd {
			font-size: 21px;
			font-weight: 500;
			line-height: 27px;
		}

		.bandeau .bath {
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			position: absolute;
			bottom: 2px;
			right: 1.9%;
			width: 218px;
			height: 275px;
			padding: 0 0 30px 34px;
			background: url(../img/bath.png) no-repeat;
			background-size: 100% auto;
		}

		.bandeau.bd-inv .bath {
			right: auto;
			left: 4.2%;
		}

			.bandeau .bath p {
				font-family: 'Macan-Bold';
				color: var(--colorBlue);
			}

			.bandeau .bath .txt-1, 
			.bandeau .bath .txt-2 {
				font-family: 'MacanStencil-Semibold';
			}

			.bandeau .bath .txt-1 {
				font-size: 19px;
			}

			.bandeau .bath .txt-2 {
				margin-left: -10px;
				font-size: 90px;
				line-height: 80px;
			}

			.bandeau .bath .txt-3 {
				font-size: 25px;
				line-height: 25px;
			}

			.bandeau .bath .txt-4 {
				font-size: 13px;
			}


/* bandeau 2 */
.bandeau2 {
	position: relative;
	margin-top: 50px;
	overflow: hidden;
}

	.bandeau2 .page {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		min-height: 300px;
		padding: 40px 0;
	}

	.bandeau2 .page:before {
		content: '';
		position: absolute;
		top: -23px;
		left: 8.6%;
		width: 125px;
		height: 302px;
		background: url(../img/mark-left.png) no-repeat;
		background-size: 100% auto;
		display: block;
	}

	.bandeau2.bd-inv .page:before {
		top: -30px;
		left: auto;
		right: 4.9%;
		width: 157px;
		height: 309px;
		background-image: url(../img/mark-right.png);
	}

		.bandeau2 .tt-bd, 
		.bandeau2 .chapo-bd {
			padding: 0 27.6%;
			text-align: center;
		}

		.bandeau2 .tt-bd {
			margin-bottom: 28px;
			font-size: 27px;
			font-weight: 600;
		}

		.bandeau2 .chapo-bd {
			font-size: 21px;
			font-weight: 500;
			line-height: 27px;
		}

		.bandeau2 .chapo-bd + .bouton {
			margin-top: 32px;
		}

		.bandeau2 .bouton {
			padding: 0 11.5%;
		}

		.bandeau2 .logo-eco {
			position: absolute;
			top: 50%;
			right: 6%;
			transform: translateY(-50%);
			width: 150px;
		}

		.bandeau2.bd-inv .logo-eco {
			right: auto;
			left: 4.2%;
		}

			

/* encart respecter */
.respect {
	position: relative;
}

	.respect .bg-mark {
		position: absolute;
		bottom: 28px;
		right: -64px;
		width: 322px;
		height: 454px;
		background: url(../img/mark-respect.png) no-repeat;
		background-size: 100% auto;
	}

	.respect .encart {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		width: 70.5%;
		margin: 150px auto 0;
		padding-bottom: 70px;
		background-color: var(--colorWhite);
		border: 2px solid var(--colorEco);
		border-radius: 20px;
	}

		.respect .tt-eco {
			width: 65%;
			margin-top: -48px;
			background-color: var(--colorWhite);
		}

		.respect .paragraphe {
			padding: 40px 14% 0;
			font-weight: 500;
			text-align: center;
			line-height: 21px;
		}


/* stades */
.stades {
	position: relative;
	margin: 80px 0 18px;
}

	.stades .liste-std {
		display: flex;
		justify-content: center;
		position: relative;
		margin-top: 52px;
		padding: 0 20px;
	}

	.stades .liste-std:before {
		content: '';
		position: absolute;
		top: 30px;
		left: 0;
		width: 100%;
		height: 1px;
		background: linear-gradient(90deg, rgba(1,202,203,1) 0%, rgba(21,31,110,1) 100%);
		display: block;
	}

		.stades .slider-std {
			width: 984px;
			margin-right: -49px;
		}

			.stades .std-item {
				position: relative;
				width: 246px;
				margin-bottom: 40px;
			}

				.stades .std-item .tt-std {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 197px;
					height: 63px;
					border: 1px solid #fff;
					border-radius: 5px;
					font-family: 'Macan-Bold';
					font-size: 20px;
					color: var(--colorWhite);
					text-align: center;
					text-transform: uppercase;
				}

				.stades .etp-1 .tt-std {
					background-color: var(--colorJaune);
					
				}

				.stades .etp-2 .tt-std {
					background-color: var(--colorOrange);
				}

				.stades .etp-3 .tt-std {
					background-color: var(--colorOfonce);
				}

				.stades .etp-4 .tt-std {
					background-color: var(--colorRouge);
				}

				.stades .std-item .paragraphe {
					padding: 16px 48px 0 0;
					line-height: 19px;
				}



/*****************************************************************************************************************************/

/*****************************************************************************************************************************/
/* Bloc css de la page solutions */
/*****************************************************************************************************************************/
/* quelles solutions */
.solutions {
	position: relative;
	padding: 78px 0 110px;
}

.solutions:before {
	content: '';
	position: absolute;
	top: 90px;
	right: 5.6%;
	width: 153px;
	height: 309px;
	background: url(../img/mark-right.png) no-repeat;
	background-size: 100% auto;
	display: block;
}

	.solutions .inner-sol {
		padding: 0 18%;
	}

		.solutions .tt-h2 {
			color: var(--colorMain);
		}

		.solutions .chapo {
			padding: 30px 5.2% 66px;
			font-size: 25px;
			text-align: center;
			line-height: 31px;
		}

			.solutions .chapo strong {
				font-weight: 700;
			}

		.solutions .tt-h3 {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 54px;
			background-color: var(--colorMain);
			border-radius: 9px;
			font-family: 'MacanStencil-Bold';
			font-size: 29px;
			color: var(--colorYellow);
			text-transform: uppercase;
		}

		.solutions .liste-bullet + .tt-h3 {
			margin-top: 110px;
		}

		.solutions .liste-bullet {
			margin: 48px 14px 0;
		}

			.solutions .liste-bullet li {
				padding: 0 0 38px;
				font-size: 20px;
				line-height: 26px;
			}

			.solutions .liste-bullet li:last-child {
				padding-bottom: 0;
			}

			.solutions .liste-bullet li:before {
				top: 2px;
				width: 21px;
				height: 21px;
			}

			.solutions .liste-bullet li:after {
				top: 2px;
				left: 10px;
			}

				.solutions .liste-bullet .txt-list {
					padding: 0 40px;
				}

				.solutions .liste-bullet li strong {
					font-weight: 700;
				}

		.solutions .visuel {
		    position: absolute;
		    width: 344px;
		    height: 220px;
		    background-repeat: no-repeat;
		    background-size: 100% auto;
		}

		.solutions .visu-sobriete {
		    top: -29px;
		    left: -363px;
		    background-image: url(../img/drop-sobriete.jpg);
		}

		.solutions .visu-efficacite {
		    top: -23px;
		    right: -337px;
		    background-image: url(../img/drop-efficacite.jpg);
		}

		.solutions .visu-solidarite {
		    top: 0;
		    left: -363px;
		    background-image: url(../img/drop-solidarite.jpg);
		}

		.solutions .btn-vid {
			display: inline-flex;
			align-items: center;
			justify-content: flex-end;
			width: 155px;
			margin: 0 0 2px 7px;
			padding: 0 10px 0 12px;
			background-color: var(--colorAlt);
			border: 1px solid var(--colorAlt);
			border-radius: 20px;
			font-size: 13px;
			color: var(--colorWhite);
			line-height: 18px;
			vertical-align: middle;
		}

		.solutions .btn-close {
			background-color: var(--colorWhite);
			color: var(--colorAlt);
		}

		.solutions .btn-vid:after {
			content: '';
			width: 7px;
			height: 11px;
			margin-left: 7px;
			background: url(../img/btn-vid.png) no-repeat;
			background-size: 100% 100%;
		}

		.solutions .btn-close:after {
			width: 11px;
			height: 7px;
			margin-left: 10px;
			background-image: url(../img/btn-vid-close.png);
		}

		.solutions .wrapper-vid {
			position: relative;
			width: 54vw;
			margin: 15px auto 24px;
			display: none;
		}

			.solutions .wrapper-vid .inner-vid {
				position: relative;
				padding-bottom: 56.25%;
			}

				.solutions .wrapper-vid iframe {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
				}


/* engage */
.engage {
	position: relative;
	padding: 130px 0 120px;
}

.engage:before {
	content: '';
	position: absolute;
	top: 68px;
	left: 50%;
	transform: translateX(-50%);
	width: 12px;
	height: 38px;
	background: url(../img/mark-white.png) no-repeat;
	background-size: 100% 100%;
	display: block;
}

.engage:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 311px;
	height: 79px;
	background: url(../img/bg-engage.png) no-repeat bottom center;
	background-size: 100% 100%;
	display: block;
}

	.engage .paragraphe {
		margin-top: 40px;
		padding: 0 14.3%;
	    font-size: 21px;
	    color: var(--colorWhite);
	    text-align: center;
	    line-height: 26px;
	}

		.engage .paragraphe strong {
			font-weight: 700;
		}


/* rejoindre */
.rejoindre {
	position: relative;
	padding: 72px 0 97px;
	text-align: center;
}

	.rejoindre .chapo {
		margin-bottom: 21px;
	    font-size: 20px;
	    font-weight: 500;
	    line-height: 29px;
	}

	.rejoindre .btn {
	    padding: 0 101px 0 106px;
	}


/* bandeau ecogest */
	.bandeau.bg-pale {
    margin-bottom: 30px; /* Blank space below the first block */
}

.categories.bg-pale {
    margin-top: 30px; /* Blank space above the second block */
}