#infoWrapper {
	position: relative;
	padding: 180px 0 140px;
	background: var(--primary-dark-blue);
}

#infoWrapper:after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 50%;
	height: 100%;
	background: url('/content/dam/intl/europe/france/sma/patients/pro-nmd/fr_FR/media/images/common/fon.png')
		bottom / cover no-repeat;
}

#infoWrapper .heading-h1 {
	position: relative;
	padding: 0 0 0 70px;
	color: var(--secondary-green-2);
	text-align: left;
	font: 700 52px / 1.2 'Roboto';
}

#infoWrapper .heading-h1::after {
	content: '';
	position: absolute;
	top: 4px;
	left: 0;
	width: 55px;
	height: 55px;
	background: url('/content/dam/intl/europe/france/sma/patients/pro-nmd/fr_FR/media/images/common/hand.png')
		center / 100% no-repeat;
}

#infoWrapper .cmp-text {
	max-width: 90%;
}

#infoWrapper .subtitle {
	margin-bottom: 40px;
	color: var(--color-white);
	font: 500 28px / 1.2 'Roboto';
}

#infoWrapper .description {
	color: var(--color-white);
	font: 300 20px / 1.2 'Roboto';
}

#infoWrapper .link-form {
	margin-top: 50px;
}

#infoWrapper .link-form a {
	padding: 15px 30px;
	border: 1px solid transparent;
	border-radius: 5px;
	background: var(--primary-blue);
	color: var(--color-white);
	font: 300 20px / 1.2 'Roboto';
	transition: 0.3s;
}

#infoWrapper .link-form a:hover {
	border: 1px solid var(--primary-blue);
	background: var(--color-white);
	color: var(--primary-blue);
}

#pourInformation {
	padding: 50px 0 20px;
	background: var(--color-lightgrey-2);
}

#pourInformation .subtitle .heading-h2 {
	color: var(--primary-dark-blue);
	text-align: left;
	font: 700 34px / 1.2 'Roboto';
}

#pourInformation .cmp-text {
	max-width: 450px;
	padding-left: 80px;
}

#pourInformation .cmp-text p {
	margin-bottom: 20px;
	color: var(--secondary-grey-2);
	font: 300 20px / 1.2 'Roboto';
}

@media all and (max-width: 1024px) {
	#infoWrapper:after {
		background-position: right bottom;
	}
}

@media all and (max-width: 991px) {
	#infoWrapper {
		padding: 80px 0 0;
	}

	#infoWrapper > .col,
	#pourInformation .container > .row > .col {
		max-width: 100%;
	}

	#infoWrapper::after {
		position: relative;
		width: 100%;
		height: 350px;
		margin-top: 40px;
	}

	#infoWrapper .heading-h1 {
		padding: 0 0 0 15px;
		text-align: center;
		font-size: 36px;
	}

	#infoWrapper .heading-h1::after {
		left: calc(50% - 140px);
		width: 40px;
		height: 40px;
		text-align: center;
	}

	#infoWrapper .cmp-text {
		max-width: 100%;
	}

	#infoWrapper .subtitle {
		margin-bottom: 20px;
		text-align: center;
		font-size: 22px;
	}

	#infoWrapper .description {
		text-align: center;
		font-size: 22px;
	}

	#infoWrapper .link-form {
		text-align: center;
	}

	#pourInformation .subtitle .heading-h2 {
		margin-bottom: 20px;
		text-align: center;
	}

	#pourInformation .cmp-text {
		margin: 0 auto;
		padding: 0;
	}

	#pourInformation .cmp-text p {
		text-align: center;
	}
}

@media all and (max-width: 475px) {
	#infoWrapper::after {
		height: 250px;
	}

	#infoWrapper .link-form a {
		font-size: 16px;
	}
}