:root {
	--bg:     #1B1200;
	--accent: #FFD700;
	--text:   white;
	--title:  #A98F6F;
	}


body {
	background:  var(--bg);
	color:       var(--text);
	font-family: "Noto Sans", sans-serif;
	margin:      0;
	padding:     0;
	}

#wrapper {
	min-height: 40vh;
	}

a {
	color: var(--accent);
	}

/*************************************************************************************************************************
 PAGE
*************************************************************************************************************************/
header h1, header h2 {
	display: none;
	}

header {
	background:          url(../img/logo.svg);
	height:              200px;
	margin:              20px auto 50px;
	background-size:     contain;
	background-position: center;
	background-repeat:   no-repeat;
	}

h3 {
	font-size:   250%;
	font-weight: 900;
	width:       80vw;
	margin:      48px auto 24px;
	color:       var(--accent);
	}

section {
	width:  80vw;
	margin: 0 auto;
	}

#lang {
	position: absolute;
	top:      10px;
	right:    10px
	}

#btn-lang {
	width:             80px;
	height:            40px;
	background:        url(../img/en.svg);
	background-size:   contain;
	background-repeat: no-repeat;
	display:           block;
	cursor: pointer;
	}

#btn-lang.c {
	background:        url(../img/cn.svg);
	background-size:   contain;
	background-repeat: no-repeat;
	}

.intro {
	font-size:   150%;
	font-weight: 900;
	text-align:  center;
	margin:      3em auto;
	}

@media screen and (min-device-width: 320px) and (max-width: 768px) {
	
	header {
		height:          140px;
		
		background-size: 90%;
		}
	
	.intro {
		font-size: 100%;
		margin:    0 auto 2em;
		}
	
	h3 {
		margin-top: 2em;
		text-align: center;
		}
	
	#lang {
		top: 20px
		}
	
	#btn-lang {
		width:  60px;
		height: 30px;
		}
	}

/*************************************************************************************************************************
 PRODUITS
*************************************************************************************************************************/
.product {
	display:         flex;
	flex-direction:  row;
	justify-content: space-between;
	padding:         24px;
	gap:             12px;
	margin:          6px;
	/*width: 983px;*/
	/*height: 566px;*/
	/*width: 80vw;*/
	background:      white;
	box-shadow:      0 10px 100px black;
	border-radius:   8px;
	aspect-ratio:    2/1;
	/* Inside auto layout */
	flex:            none;
	order:           0;
	flex-grow:       0;
	color:           #666;
	}


.product .image {
	flex: 0 0 49%;
	}

.product img {
	width: 100%;
	}

.product .infos {
	flex:            0 0 49%;
	display:         flex;
	flex-direction:  column;
	justify-content: space-between;
	}

.product h4.title {
	margin:         0.5em 0;
	text-transform: uppercase;
	font-family:    "Libre Baskerville", serif;
	color:          var(--title);
	font-size:      200%;
	}

.product h5.subtitle {
	margin:         0.5em 0;
	text-transform: uppercase;
	font-family:    "Libre Baskerville", serif;
	color:          var(--title);
	font-size:      100%;
	}

.btn-bar {
	display:         flex;
	justify-content: flex-end;
	}

.btn {
	/* Bouton */
	
	/* Auto layout */
	display:         flex;
	flex-direction:  row;
	align-items:     center;
	padding:         10px;
	gap:             -60px;
	color:           black;
	font-weight:     900;
	width:           fit-content;
	background:      #FFD700;
	border-radius:   8px;
	text-decoration: none;
	/* Inside auto layout */
	flex:            none;
	order:           1;
	flex-grow:       0;
	}

.slick-slide {
	transition: .4s ease transform, .4s opacity ease-in-out;
	transform:  scale(.95);
	opacity:    .5;
	height:     auto;
	}

.slick-slide.slick-active {
	transform: scale(1);
	opacity:   1;
	}

.slick-dots li button:before {
	color: silver
	}

.slick-dots li.slick-active button:before {
	color: var(--accent);
	}


@media screen and (min-device-width: 320px) and (max-width: 768px) {
	
	#products-wrapper {
		margin-bottom: 6em;
		}
	
	.product {
		flex-direction: column;
		padding:        12px;
		gap:            0px;
		font-size:      85%;
		aspect-ratio:   1/1.4;
		}
	
	.product img {
		width: 90%;
		margin: 0 auto;
		}
	
	
	/*.slick-track*/
	/*{*/
	/*    display: flex !important;*/
	/*}*/
	/*.slick-slide*/
	/*{*/
	/*    height: inherit !important;*/
	/*}*/
	.product h4.title {
		margin: .5em 0 0 0;
		}
	
	.product h5.subtitle {
		margin: 0 0 .5em 0;
		}
		
		
	}

/*************************************************************************************************************************
 PIEDDE PAGE
*************************************************************************************************************************/
footer {
	height:          40vh;
	background:      url(../img/bg.svg) no-repeat;
	background-size: cover;
	}