/* TABLE DES MATIERES

	1 Réglages généraux
	2 Réglages Typographiques
		2.1 Réglages Typographiques sur desktop
	3 Réglages des boutons et liens
	4 Réglages du Header
		4.1 Réglages du Header sur desktop
	5 Réglages du Nav
		5.1 Réglages du Nav sur desktop
	6 Réglages généraux Main
		6.1 Réglages généraux Main sur desktop
		6.2 Réglages Bloc de présentation (scroll-x)
		6.3 Réglages présentation de produits
			6.3.1 Réglages présentation de produits sur desktop
	7 Réglages Footer
*/

	/* Réglages généraux */
	html {scroll-behavior: smooth;}

	* {
		margin: 0px;
		padding: 0px;
		box-sizing: border-box;
	}

	body {
		font-family: 'DM Sans', sans-serif;
		font-feature-settings: "ss02";
		font-size: 24px;
		overflow-x: hidden;
		background-color: #fff;
	}

	body * {
		/* outline: 1px solid blue; */
		outline-offset: -4px;
	}

	img {width: 100%;}


	/* Réglages Typographiques */

	@font-face {
		font-family: 'DM Serif Display';
		src: url('fontkit/dmserifdisplay-regular-webfont.woff2') format('woff2'),
		url('fontkit/dmserifdisplay-regular-webfont.woff') format('woff');
		font-weight: normal;
		font-style: normal;
	}

	@font-face {
		font-family: 'DM Sans Bold';
		src: url('fontkit/dmsans-bold-webfont.woff2') format('woff2'),
		url('fontkit/dmsans-bold-webfont.woff') format('woff');
		font-weight: normal;
		font-style: 700;

	}

	@font-face {
		font-family: 'DM Sans';
		src: url('fontkit/dmsans-regular-webfont.woff2') format('woff2'),
		url('fontkit/dmsans-regular-webfont.woff') format('woff');
		font-weight: normal;
		font-style: 400;
	}

	h1, h2, h3, h4, h5, p, a {color: #fff; mix-blend-mode: difference;}

	h1 {font-family: 'DM Serif Display', serif; font-size: 95px;}

	h2 {font-family: 'DM Serif Display', serif; font-size: 32px; margin-top: 1rem; font-weight: 400;}

	.product-container h2 { font-size: 48px;}

	.product-container h3 { font-family: 'DM Sans', sans-serif; font-size: 36px; font-weight: 400;}

	p, input {font-family: 'DM Sans', sans-serif; font-size: 16px; font-feature-settings: "ss02"; margin-top: 1rem;}

	ul {list-style-type: none;}


	/* Réglages Typographiques sur desktop */

@media (min-width: 900px){

	h1 {font-size: 110px;}

	h2 {font-size: 48px; color: #fff;}

	.img-display h2 { font-size: 64px;}

	.img-display h3 { font-size: 48px;}

	p {font-size: 24px; max-width: 60vw;}
}

	/* Réglages des boutons et liens */

	.button {
		display: inline-block;
		font-size: 24px;
		padding: 12px 20px;
		mix-blend-mode: difference;
		background-color: #000;
		color: #fff;
		text-decoration: none;
		margin: 2rem auto;
		border: 2px solid #fff;
		cursor: pointer;
		transition: all .5s ease;
	}

	.button:hover {
		background-color: #fff;
		color: #000;
		transform: scale(110%);
	}


	/* Réglages du Header */

	header {position: relative; display: block; text-align: center;}

	.header-block {height: 50vh;}

	.header-block.white {background-color: #fff; height: calc(50vh + 9px);}

	.header-block.black {background-color: #000; height: calc(50vh - 9px);}

	h1 {
		position: absolute;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		color: #fff;
		mix-blend-mode: difference;
		letter-spacing: normal;
		line-height: 1em;
		font-weight: 400;
		-webkit-font-smoothing: antialiased;
	}

	h1 span {flex: 0; align-self: center; margin: 42px auto;}

	#arrow-bottom {
		display: inline;
		position: absolute;
		bottom: 42px;
		left: 50vw;
		transform: translateX(-50vw);
		color: #fff;
		mix-blend-mode: difference;
		font-weight: 700;
		animation: scroll-arrow 1s 2s ease infinite alternate both;
	}


	/* Réglages du Header sur desktop */

@media (min-width: 900px){

	header {display: flex; height: 100vh;}

	.header-block {flex: 1;}

	.header-block.white {height: 100%;}

	.header-block.black {height: 100%;}

	h1 {flex-direction: row; justify-content: space-evenly;}

	h1 span {flex: 1; width: 100%;}
}


	/* Réglages du Nav */

	nav {
		position: fixed;
		display: block;
		background-color: #000;
		color: #fff;
		opacity: 1;
		height: 100vh;
		width: 100vw;
		padding: 10px;
		z-index: 2;
		transform: translateY(-100vh);
		transition: all .5s ease;
	}

	#menu-icon {
		position: fixed;
		top: 12px;
		right: 12px;
		animation: none;
		text-decoration: none;
		font-size: 24px;
		font-weight: 400;
		color: #000;
		background-color: #fff;
		z-index: 3;
		padding: 10px;
		cursor: pointer;
		transition: all .5s ease;
	}


	nav > a {
		color: #fff;
		text-decoration: none;
		animation: slide-in-left 1s 1.5s ease both;
	}

	nav > a h4 {
		margin-top: 12px;
	}

	.nav-links {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		height: 60vh;
		list-style: none;
		margin-top: 10vh;
	}

	.nav-links > * {
		padding: 1rem 24px;
	}

	.nav-links > li > a {
		position: relative;
		text-decoration: none;
		font-size: 5vh;
		font-weight: 800;
	}

	.nav-links > li > a:before {
		content: "";
		position: absolute;
		height: 8%;
		bottom: -1px;
		margin: 0 auto;
		left: auto;
		right: 0;
		width: 100%;
		background: #fff;
		transition: all .5s ease;
	}

	.nav-links > li > a:hover:before {
		transform: translateY(-5px);
		left: auto;
	}

	/* Réglages du Nav sur desktop */

@media (min-width: 900px) {

	nav {
		display: flex;
		justify-content: space-between;
		padding: 0;
		color: #fff;
		height: 0;
		mix-blend-mode: difference;
		background: none;
		transform: translateY(0%) !important;
	}

	nav > a > h4 {
		margin-top: 0;
		padding: 1rem 24px;
	}

	#menu-icon {
		display: none;
	}

	.nav-links {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: flex-start;
		list-style: none;
		height: auto;
		margin-top: 0;
		animation: slide-in-right 1s 1.5s ease both;
	}

	.nav-links > li > a {
		font-size: 24px;
	}
}


	/* Réglages généraux Main */

	.container {display: flex; flex-wrap: wrap;}

	.container.reverse {flex-direction: row-reverse;}

	.block {
		flex: 1 1 450px;
		padding: 24px;
		display: flex;
		flex-direction: column;
		overflow-x: hidden;
	}

	.separator .block {padding: 0px;}

	.white {background-color: #fff;}

	.black {background-color: #000;}

	.block img {width: 80%; margin: auto auto; border-radius: auto;}

	img.bnwFilter {filter: grayscale(100%); transition: all .5s ease;}

	img.bnwFilter:hover {filter: grayscale(0%);}


	/* Réglages généraux Main sur desktop */

@media (min-width: 900px){

	.block {padding: 56px; justify-content: center;}
}


	/* Réglages Bloc de présentation (scroll-x) */

	#products .block {
		padding-right: 0px;
	}

	#products h2, #products p {
		padding-right: 24px;
	}

	.scroll-x {
		position: relative;
		display: flex;
		overflow-x: scroll;
		margin-top: 48px;
	}

	.scroll-x::-webkit-scrollbar {
		height: 54px;
		background-color: #000;
	}

	.scroll-x::-webkit-scrollbar-thumb {
		border-top: 24px solid black;
		border-bottom: 24px solid black;
		background-color: white;
	}

	.scroll-x img {
		height: 500px;
		width: auto;
		margin: 0px 24px 0px 0px;
	}

	.scroll-x img:last-child {
		margin: 0;
	}


	/* Réglages présentation de produits */

	.product-container {
		margin: 0 auto;
		position: relative;
		max-width: 100vw;
		margin-top: 100px;
		padding: 24px;
	}

	.product-container h2.nomProduit, .product-container > h3 {
		text-align: center;
		position: absolute;
		left: 0;
		right: 0;
		z-index: 1;
	}

	h2.nomProduit { transform: translateY(-48px);}

	.product-container > h3 { transform: translateY(30px);}

	h4.sold-out {
		text-align: center;
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		z-index: 1;
		font-size: 25vw;
		transform: translateY(-50%) rotate(-30DEG);
	}

	.product-images {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		overflow: hidden;
	}

	.img-display {
		position: relative;
	}

	.img-display a {
		mix-blend-mode: normal;
	}

	.img-choice {
		position: relative;
		display: flex;
		overflow-x: scroll;
		margin-top: 15px;
	}

	.img-choice img {
		width: 200px;
		margin: 0px 24px 0px 0px;
	}

	.img-choice img:last-child {
		margin: 0px;
	}

	.img-choice::-webkit-scrollbar-thumb {
		border-top: 24px solid #fff;
		border-bottom: 24px solid #fff;
		background-color: #000;
	}

	.black .img-choice::-webkit-scrollbar-thumb {
		border-top: 24px solid #000;
		border-bottom: 24px solid #000;
		background-color: #fff;
	}

	.img-choice::-webkit-scrollbar {
		height: 54px;
		background-color: transparent;
	}

	.adjQual {
		font-size: 36px;
	}

	.product-description {
		text-align: center;
		margin: 24px auto;
	}

	.product-description h2 {
		line-height: 2.5rem;
	}


	/* Réglages présentation de produits sur desktop */

@media (min-width: 900px){

	.product-container {
		max-width: calc(100vw - 48px);
		padding: 24px;
	}

	.product-container p {
		margin: 1rem auto;
	}

	.img-display {
		flex: 4 1;
	}

	.img-choice img:hover {
		filter: invert(1) grayscale(1);
	}

	.img-display img {
		margin: 0 auto;
	}

	.product-images {
		flex-direction: row-reverse;
		justify-content: center;
	}

	.img-choice {
		flex-direction: column;
		margin: 0;
		flex: 1 1;
	}

	.img-choice img {
		width: 100%;
		margin: 0;
		transition: all .5s linear;
	}


	.product-container h2.nomProduit, .product-container h3 {
		right: 0;
	}

	h2.nomProduit {transform: translateY(-48px);}

	.product-container h3 {transform: translateY(30px);}

	h4.sold-out {top: 50%}
}


	/* Réglages Footer */

	footer {text-align: center; padding: 24px;}

	footer > * {
		margin-top: 24px;
	}

	ul.social-media {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-content: center;
		mix-blend-mode: difference;
		color: #fff;
		list-style: none;
	}

	ul.social-media li {
		max-width: 48px;
		margin: 16px;
		transition: all .5s ease;
	}

	ul.social-media li:hover {
		transform: scale(120%);
	}