
/* >–––––––––––––––––––––––––––––––––––––– LAYOUT A –––––––––< */

section.la section {
	display: flex;
	margin: 0 auto;
	width: 90%;
	}
	section.la section:not(:first-of-type) { margin-top: 2rem; }

		section.la section .img { flex: 0 0 45rem; }
		section.la section .img.l { margin-right: 2rem; }
		section.la section .img.r { margin-left: 2rem; }

			section.la section .img img {
				width: 100%;
				height: auto;
			}

		section.la section h2 {
			margin: 2rem 0;
			font-size: 3rem; line-height: 3.2rem;
		}


/* >–––––––––––––––––––––––––––––––––––––– PRODS –––––––––< */

section.prods .set {
	margin-bottom: 4rem;
}
section.prods .set:last-of-type { margin-bottom: 0; }
section.prods .set section.emphase { background-color:#B5F3DC; }

	section.prods .set h2 {
		margin-top: 4rem;
		margin-bottom: 1rem;
		padding-bottom: 1rem;
		font-family: "GaramondURW W01 Bold", sans-serif;
		font-size: 3rem;
		text-align: center;
		border-bottom: 1px solid #000;
	}

	section.prods .set h3 {
		margin-bottom: 0.5rem;
		font-family: "GaramondURW W01 Oblique", sans-serif;
		font-size: 4.5rem; line-height: 4.5rem;
	}
	section.prods .set h3::first-letter { text-transform: uppercase; }
	section.prods .set h3:not(:first-of-type) { margin-top: 4rem; }
	
	section.prods .set > div {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		border-bottom: 1px solid #000;
	}
	section.prods .set > div:last-of-type { border-bottom: none; }

		section.prods .set section {
			flex: 0 0 24%;
			box-sizing: border-box;
			margin-right: 1%;
			margin-bottom: 2.5rem;
			padding: 0 1.5rem;
			border-bottom: 1px dashed #000;
			border-right: 1px dashed #000;
		}
		
			section.prods .set h4 {
				margin-bottom: 0.5rem;
				font-family: "GaramondURW W01 Oblique", sans-serif;
				font-size: 4.5rem; line-height: 4.5rem;
			}
				section.prods .set h4 span {
					font-size: 2.2rem; line-height: 2.2rem;
				}

			section.prods .set section > div {
				display: flex;
				flex-wrap: wrap;
			}

				section.prods .set h5 {
					padding: 1rem 2rem 1rem 0;
					font-family: "GaramondURW W01 Oblique", sans-serif;
					font-size: 3rem; line-height: 3rem;
					color: #007fff;
					cursor: pointer;
				}
				section.prods .set h5:hover { color: #000; }

				section.prods p.none {
					margin-bottom: 8rem;
					font-family: "GaramondURW W01 Oblique", sans-serif;
					font-size: 3rem; line-height: 3.2rem;
					text-align: center;
				}

			/*section.prods section section p { margin-bottom: 0; text-align: center; }*/

		/*section.prods section section .btn {
			padding: 1rem;
			font-size: 1.8rem; line-height: 1.8rem;
			color: #007fff;
			cursor: pointer;
		}

			section.prods section section .btn b { font-size: 2.4rem; }

		section.prods section section .btn:hover { color: #000; }*/



/* >–––––––––––––––––––––––––––––––––––––– TESTIMONIALS –––––––––< */

section.testim section {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	margin: 0 auto;
	width: 90%;
}
	section.testim blockquote {
		flex: 0 0 30%;
		position: relative;
		box-sizing: border-box;
		margin-bottom: 5rem;
		padding: 1rem;
		width: 70%;
	}
	section.testim blockquote::before {
		position: absolute; left: -3rem; top: -4rem;
		font-family: "GaramondURW W01 Bold Oblique", sans-serif;
		font-size: 6rem;
	}
	section.testim blockquote.fr::before { content: '«'; }
	section.testim blockquote.en::before { content: open-quote; }

		section.testim blockquote p:last-of-type { margin-bottom: 1rem;  }
		section.testim blockquote footer {
			font-family: "GaramondURW W01 Bold Oblique", sans-serif;
			font-size: 2rem; line-height: 2rem;
			text-align: right;
		}




/* >–––––––––––––––––––––––––––––––––––––– REACTIF ––––––––––––––––––––––– REACTIF ––––––––––––––––––––––– REACTIF ––––––––––––––––––––––– REACTIF –––––––––< */



@media all and (max-width: 1000px) {
	/* >–––––––––––––––––––––––––––––––––––––– LA –––––––––< */
	section.la section .img { flex: 0 0 30rem; }

	/* >–––––––––––––––––––––––––––––––––––––– PRODS –––––––––< */
	section.prods .set h5 { font-size: 3vw; line-height: 3vw; }

	/* >–––––––––––––––––––––––––––––––––––––– TESTIMONIALS –––––––––< */
	section.testim section { display: block; }
	section.testim blockquote { margin-bottom: 3rem; width: 100%; }
}

@media all and (max-width: 800px) {
	/* >–––––––––––––––––––––––––––––––––––––– LA –––––––––< */
	section.la section { display: block; width: 100%; }
	section.la section .img { width: 80%; }
	section.la section .img.l,
	section.la section .img.r { margin: 0 auto 4rem auto; }

	/* >–––––––––––––––––––––––––––––––––––––– PRODS –––––––––< */
	/*section.prods section section.one { display: block; margin-left: 0; margin-right: 0; width: 100%; }*/
	/*section.prods section section > div { margin: 2rem 0; width: 70vw; }*/
	section.prods .set h3 { font-size: 4rem; line-height: 4rem; }
	section.prods .set h4 { font-size: 3.5rem; line-height: 3.5rem; }
	section.prods .set h4 span { display: block; line-height: 2.8rem; }
	section.prods .set section > div { display: block; text-align: center; }
	section.prods .set h5 { padding: 1rem 1.5rem 1rem 0; font-size: 2.5rem; line-height: 2.5rem; }
}

@media all and (max-width: 600px) {
	/* >–––––––––––––––––––––––––––––––––––––– LA –––––––––< */
	section.la section .img { width: 90%; }
	section.la section h2 { margin-bottom: 1rem; font-size: 2.5rem; line-height: 2.7rem; }

	/* >–––––––––––––––––––––––––––––––––––––– PRODS –––––––––< */
	/*section.prods section section > div { width: 90%; }
	section.prods section section p.big { font-size: 2.5rem; line-height: 2.7rem; }*/

	/* >–––––––––––––––––––––––––––––––––––––– TESTIMONIALS –––––––––< */
	section.testim blockquote::before { left: -1.5rem; top: -2rem; font-size: 4rem; }
	section.testim blockquote footer { font-size: 1.8rem; line-height: 2.7rem; }
}

@media all and (max-width: 500px) {
	/* >–––––––––––––––––––––––––––––––––––––– PRODS –––––––––< */
	section.prods .set section{ flex: 0 0 31%; }
}
