/* >–––––––––––––––––––––––––––––––––––––– XXXXX –––––––––< */
/* >–––––– XXXXXX XXXXXXXX ––––––< */


/* >–––––– SECTION LISTE ––––––< */

#iViewport > section.liste > div {
	display: inline-block; vertical-align: top;
	box-sizing: border-box;
}

#iViewport > section.liste > div:first-of-type {
	position: relative;
	margin-left: 8%;
	width: 10vw; 
}
#iViewport > section.liste > div:first-of-type::before { content: ''; display: block; padding-top: 106%; }

	#iViewport > section.liste > div:first-of-type svg {
		position: absolute; top: 0; left: 0; right: 0; bottom: 0;
		fill: #fff;
	}



#iViewport > section.liste > div:last-of-type {
	padding-left: 3rem;
	width: 60vw;
}

	#iViewport > section.liste .item {
		display: inline-block; vertical-align: top;
		box-sizing: border-box;
		margin-bottom: 1.5rem;
		padding: 1.5rem 2rem;
		width: 100%;
		text-align: left;
	}
	#iViewport > section.liste a:hover .item { opacity: 0.8; }

		#iViewport > section.liste .item h2 {
			display: block;
			margin-bottom: 2rem;
			font-family: "Frutiger Neue W01 Thin", sans-serif;
			font-size: 3rem; line-height: 3rem;
			color: #000;
			text-align: right;
		}
		#iViewport > section.liste a:hover .item h2 { color: #000; }

		#iViewport > section.liste .item h3 {
			margin-bottom: 2rem;
			font-family: "Frutiger Neue W01 Bd", sans-serif;
			font-size: 2rem; line-height: 2rem;
			color: #000;
		}
		#iViewport > section.liste a:hover .item h3 { color: #000; }

		#iViewport > section.liste .item p {
			font-size: 1.6rem; line-height: 2rem;
		}
		#iViewport > section.liste a:hover a:hover .item p { color: #000; }






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




@media all and (max-width: 1100px) {
	/* >–––––– LISTE ––––––< */
	#iViewport > section.liste .item p { font-size: 1.4vw; line-height: 1.7vw; }
}

@media all and (max-width: 1000px) {
	/* >–––––– LISTE ––––––< */
	#iViewport > section.liste > div:first-of-type { margin-left: 0; width: 20%; }
	#iViewport > section.liste > div:last-of-type { width: 80%; }
	#iViewport > section.liste .item { margin: 0 auto 1.5rem auto; width: 100%; max-width: 70rem; }
	#iViewport > section.liste .item p { font-size: 1.6rem; line-height: 2rem; }
}

@media all and (max-width: 800px) {
	/* >–––––– LISTE ––––––< */
	#iViewport > section.liste .item h2 { font-size: 2.4rem; line-height: 2.4rem; }
	#iViewport > section.liste .item h3 { font-size: 1.8rem; line-height: 2.2rem; }
}

@media all and (max-width: 600px) {
	/* >–––––– LISTE ––––––< */
	#iViewport > section.liste > div { display: block; }
	#iViewport > section.liste > div:first-of-type { margin: 0 auto 3rem auto; width: 30%; max-width: 20rem; }
	#iViewport > section.liste > div:last-of-type { padding-left: 0; width: 100%; }
	#iViewport > section.liste .item h2 { margin-bottom: 1rem; }
}

@media all and (max-width: 500px) {
	/* >–––––– LISTE ––––––< */
	#iViewport > section.liste .item p { font-size: 1.4rem; }
}

@media all and (max-width: 400px) {
	/* >–––––– LISTE ––––––< */
	#iViewport > section.liste .item h2 { font-size: 2rem; line-height: 2rem; }
}