﻿
.bloc-l { padding:0px 85px 40px; }

/*#region Le bandeau titre*/

	body #contenu .bloc-h > .titre { display:block; background-color:#f7f3ed; }
		body #contenu .bloc-h > .titre .bloc-l { padding:50px 70px 20px 540px; background:url(/img/pourquoi/titre.png) no-repeat 80px 0px; }

/*#endregion Le bandeau titre*/

/*#region Commun Paragraphe*/

	/*Un paragraphe*/
	.paragraphe {
		position:relative; z-index:2;
		margin:40px 85px; padding:20px;
		font-size:1.5rem; font-family:'Source sans pro',sans-serif; font-weight:normal; color:#363737;
		line-height:120%;
		background-color:white;
	}
		.paragraphe b { font-family:'Source sans pro',sans-serif; font-weight:bold; }

		/*Un titre de paragraphe*/
		.paragraphe h1 {
			margin:0px; padding:35px 0px 40px 145px;
			font-size:2.125rem; font-family:'Quicksand',sans-serif; font-weight:normal; color:#55547f; line-height:120%;
		}

		/*Un sous-titre de paragraphe*/
		.paragraphe h2 {
			position:relative;
			margin:0px; padding:20px 40px 0px 165px;
			font-size:1.8125rem; font-family:'Source sans pro',sans-serif; font-weight:bold; color:#185c9e; line-height:100%;
		}
		/*Le tiret devant le h2*/
		.paragraphe h2::before {
			content:"-";
			position:absolute;
			top:20px; left:145px;
			font-family:'Source sans pro',sans-serif; font-weight:bold;
		}

		/*Un bloc de texte de paragraphe*/
		.paragraphe p {
			margin:0px; padding:30px 120px 0px 170px;
			font-size:1.375rem; font-family:'Source sans pro',sans-serif; font-weight:normal; color:#363737; line-height:130%;
		}

		/*Une séparation de paragraphe*/
		.paragraphe hr {
			display:block;
			border:none;
			margin:0px; padding:0px;
			height:20px;
		}

/*#endregion Commun Paragraphe*/

/*#region Paragraphe 1*/

	.paragraphe.p1 { 
		margin:220px 0px 0px 0px; padding:112px 0px 0px 0px; 
		border-top:solid 4px #bfbebe;
	}

		.paragraphe.p1 .retrait { 
			margin:0px 0px 0px 110px; padding:7px 0px 13px 40px; 
			background:url(/img/pourquoi/retrait.png) repeat-y left top;
		}

/*#endregion Paragraphe 1*/

/*#region Paragraphe 234*/

	.paragraphe.p234 { 
		margin:50px 0px 0px; padding-bottom:80px;
		background-color:#f7f3ed;
		background-repeat:no-repeat;
		background-image:		url(/img/pourquoi/puzzlehaut.png),	url(/img/pourquoi/puzzlemilieu.png),	url(/img/pourquoi/puzzlebas.png);
		background-position:	center top,							center center,							center bottom;
		width:100%;
	}

/*#endregion Paragraphe 234*/

/*#region Paragraphe 5*/

	.paragraphe.p5 { 
		margin:70px 0px 0px; padding:0px; 
		font-size:1.875rem; font-family:'Source sans pro',sans-serif; font-weight:normal; line-height:130%;
	}

		.paragraphe.p5 .bloc-l {  text-align:center; padding: 0px 170px 80px; }

		.paragraphe.p5 a { 
			position: relative; display: inline-block;
			width: auto;
			margin: 30px 0px 0px; padding: 15px 25px;
			font-family: 'Quicksand',sans-serif; font-size: 1.875rem; font-weight:normal; color: white;
			white-space: nowrap;
			background-color: #f9b135;
		}

/*#endregion Paragraphe 5*/

/*#region RESPONSIVE */

@media all and (max-width: 1200px) {

	#global .bloc-h { padding-left:0px; padding-right:0px; }

	/*#region Le bandeau titre*/

		body #contenu .bloc-h > .titre { display:table; }
			body #contenu .bloc-h > .titre .bloc-l {
				display:table-cell;
				padding:20px 30px 20px 44%;
				vertical-align:middle;
				background-position:calc(100% / 2 - (1200px - 410px) / 2 + 80px) center;
			}

	/*#endregion Le bandeau titre*/

}

@media all and (max-width: 930px) {

	.bloc-l { padding:0px 60px 40px; }

	/*#region Le bandeau titre*/

		body #contenu .bloc-h > .titre { top:0px; position:relative; }

	/*#endregion Le bandeau titre*/

	/*#region Commun Paragraphe*/

		/*Un paragraphe*/
		.paragraphe { padding:20px 0px; }

			/*Un titre de paragraphe*/
			.paragraphe h1 { padding:35px 0px 40px 0px; }

			/*Un sous-titre de paragraphe*/
			.paragraphe h2 { padding:20px 0px 0px 0px; }
			/*Le tiret devant le h2*/
			.paragraphe h2::before { left:-20px; }

			/*Un bloc de texte de paragraphe*/
			.paragraphe p { padding:30px 0px 0px 0px; }

	/*#endregion Commun Paragraphe*/

	/*#region Paragraphe 1*/

		.paragraphe.p1 { margin-top:0px; }

			.paragraphe.p1 .retrait { 
				margin:0px 0px 0px 0px;
				padding:4px 0px 13px 40px;
			}

	/*#endregion Paragraphe 1*/

	/*#region Paragraphe 234*/

		.paragraphe.p234 { padding-bottom:40px; background-image:none; }

	/*#endregion Paragraphe 234*/

	/*#region Paragraphe 5*/

			.paragraphe.p5 .bloc-l {  padding: 0px 50px 80px; }

	/*#endregion Paragraphe 5*/

}

@media all and (max-width: 768px) {
	
	/*#region Le bandeau titre*/

			body #contenu .bloc-h > .titre .bloc-l { background-size:contain; }

	/*#endregion Le bandeau titre*/

}

@media all and (max-width: 639px) {
	
	#global .bloc-h,
	#global.pg-pourquoi .bloc-h {
		padding-left: 0px;
		padding-right: 0px;
	}

	.bloc-l { padding-left:20px; padding-right:20px; }

	/*#region Le bandeau titre*/

		body #contenu .bloc-h > .titre {
		}
			body #contenu .bloc-h > .titre .bloc-l {
				padding-left:20px;
				padding-right:20px;
				text-align:left;
				background-image:url(/img/principe/titre-320.png);
				background-position:right bottom;
				background-size: 120px;
			}

	/*#endregion Le bandeau titre*/

	/*#region Commun Paragraphe*/

		/*Un paragraphe*/

			/*Un titre de paragraphe*/
			.paragraphe h1 {
				padding: 0px;
				margin: 30px 0px 30px 0px;
			}

			/*Un sous-titre de paragraphe*/
			.paragraphe h2 {
				padding: 0px;
				margin: 20px 0px 0px 0px;
			}
			/*Le tiret devant le h2*/
			.paragraphe h2::before {
				content:none;
				display:none;
			}

			/*Un bloc de texte de paragraphe*/
			.paragraphe p {
				padding: 0px;
				margin: 20px 0px 0px 0px;
			}

	/*#endregion Commun Paragraphe*/

	/*#region Paragraphe 1*/

		.paragraphe.p1 {
			padding-top:40px;
		}

			.paragraphe.p1 .retrait {
			}

			.paragraphe.p1 .bloc-l {
				padding-bottom:0px;
			}

	/*#endregion Paragraphe 1*/

	/*#region Paragraphe 234*/

		.paragraphe.p234 {
			margin-top:40px;
			padding-bottom: 20px;
		}

			.paragraphe.p234 .bloc-l {
				padding-bottom: 0px;
				margin-bottom: 30px;
			}

	/*#endregion Paragraphe 234*/

	/*#region Paragraphe 5*/

		.paragraphe.p5 {
			margin-top:40px;
			margin-bottom:40px;
			padding-left: 15px;
			padding-right: 15px;
		}

			.paragraphe.p5 .bloc-l { padding-left:20px; padding-right:20px; }

			.paragraphe.p5 a {
				white-space: normal;
				margin-left:5px;
				margin-right:5px;
			}

			.paragraphe.p5 .bloc-l {
				padding-bottom: 0px;
				margin-bottom: 30px;
			}

	/*#endregion Paragraphe 5*/

}

@media all and (max-width: 510px) {
	
	.paragraphe.p1 .retrait { max-height:330px; }

	.paragraphe.p1 .retrait > span { /*line-height:180%;*/ }

	.paragraphe.p5 .bloc-l { font-size:1.6875rem; line-height:120%; }

}

/*#endregion RESPONSIVE */
