.container.home{
	width: 100vw;
	max-width: 100vw;
	min-height: 100vh;
	margin: 0;
	padding: 0;
}

#home{

	#newsletter{
		display: flex;
		justify-content: center;
		background-color: $body-bg;
		margin: 0 auto;
		padding: 60px 0;
		width: 50%;

		.inscription{
			border-top: 1px solid $black;
			padding-top: 20px;

			.titre{
				@extend %chapeau;
				width: 80%;
				text-align: center;
				margin: 0 auto;
				margin-bottom: 20px;
			}

			.approval{
				display: flex;
				align-items: center;

				input[type="checkbox"]:not(:checked),
				input[type="checkbox"]:checked {
				  position: absolute;
				  left: -9999px;
				}

				/* on prépare le label */
				input[type="checkbox"]:not(:checked) + label,
				input[type="checkbox"]:checked + label {
				  position: relative;
				  padding-left: 30px;
				  cursor: pointer;
				}

				input[type="checkbox"]:not(:checked) + label:before,
				input[type="checkbox"]:checked + label:before {
				  content: '';
				  position: absolute;
				  left:0; top: 3px;
				  width: 17px; height: 17px; /* dim. de la case */
				  border: 1px solid $black;
				  transition: all 0.3s ease;
				}

				input[type="checkbox"]:not(:checked) + label:before{
					background-color: $body-bg;

				}
				input[type="checkbox"]:checked + label:before {
					background-color: $black;
				}
			}
		}

		.networks{
			display: flex;
			justify-content: center;
			margin-top: 60px;
		}

		.tambour{
			img{
				height: 190px;
				margin-right: 60px;
			}

			&.reverse{
				img {
					margin-left: 60px;
			        transform: scaleX(-1);
			        filter: FlipH;
			        -ms-filter: "FlipH";
				}
			}
		}
	}

	.claim{
		@extend .white;
		padding: 30px 0;
		background-color: $dark-blue;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;

		.sentences{
			max-width: 50%;
			display: grid;
			grid-template-columns: 50% 50%;
			grid-column-gap: 15px;

			.quote{
				@extend .thin-italic;
				font-size: 2rem;
				display: flex;
				margin-top: 10px;
			}

			.body{
				font-size: 0.85rem;
			}
		}
	}

	.typologies-home{
		max-width: 82.5%;
		display: grid;
		margin: 0 auto;
		grid-template-columns: repeat(4, 1fr);
		grid-column-gap: 20px;
		grid-row-gap: 30px;
		margin-top: 100px;

		.typologie{
			display: inline-block;
			border-top: 1px solid black;

			.name{
				@extend %chapeau;
				margin-top: 10px;
			}

			.thumb img{
				display: block;
				width: 100%;
			}
		}
	}

	.news{
		width: 45%;
		margin: 0 auto;
		margin-top: 100px;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-column-gap: 1.25rem;
	}
}