/*------------------------------------*\
    $Base / Version mobile
\*------------------------------------*/
* {
	box-sizing: border-box;
	font-size: 20px;
}

body {
	font-family: Arial, Helvetica, sans-serif;
	background-color: black;
}

a {
	transition: all 0.1s ease-in;
}

a:hover {
	color: #006eff;
}


/* En-tête */
header{
	background-color: rgb(0, 0, 0);
	display: flex;
	justify-content: space-between;
	align-items: center;
	a {
		transition: all 0.1s ease-in;
		color: white;
		text-decoration: none;
	}

}

.marker{
	font-family: 'Permanent Marker', cursive;
	font-size: 20px;
}

#navigation-principale{
	background-color: rgb(0, 0, 0);
	text-transform: uppercase;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	a {
		transition: all 0.1s ease-in;
		color: white;
		text-decoration: none;
	}
}

#liens-secondaires{
	display: flex;
	flex-direction: left;
}

.tri-collection{
	background-color: white;
}

/* Aside */
aside{
	background-color: rgb(0, 0, 0);
	
}

.tri-collection label {
	text-transform: uppercase;
	color: #666;
	margin-bottom: 5px;
}

/* Articles */
#produits{
	background-color: rgb(255, 255, 255);
	display: flex;
	flex-wrap: wrap;
	max-width: auto;
	justify-content: space-between;
}

article{
	width: 50%;
}

.article-infos{
	display: flex;
	align-items: center;
	flex-direction: column;
}

.article-image img {
	max-width: 150px; /* Afin d'éviter les débordement des images */
}


/* Pied de page */
footer{
	background-color: rgb(0, 0, 0);
	color: white;
	a {
		transition: all 0.1s ease-in;
		color: #aaa;
		text-decoration: none;
	}
	
	a:hover {
		color: white;
		text-decoration: none;
	}

	ul {
		list-style: none;
	  }
}

.titres{
	text-transform: uppercase;
	text-transform: full-width;
}


/*------------------------------------*\
    $Version Tablette
\*------------------------------------*/
@media screen and (min-width: 480px) {
	#conteneur {
		display: grid;
		grid-template-columns: 1fr 2fr;
	}
	header, #navigation-principale, footer {
		grid-column: 1 / 3;
	}
	aside {
		grid-column: 1 / 2;
	}
	#produits {
		grid-column: 2 / 3;
	}
}


/*------------------------------------*\
    $Version Desktop
\*------------------------------------*/
@media screen and (min-width: 960px) {
	#conteneur {
		display: grid;
		grid-template-columns: 1fr 2fr 1fr;
	}
	header, #navigation-principale, footer {
		grid-column: 1 / 4;
		
	}
	aside {
		grid-column: 1 / 2;
	}
	#produits {
		grid-column: 2 / 4;
		display: flex;
	}

	#navigation-principale{
		margin: left;
		padding: 100px ;
	}

	aside{
		padding: right;
	}

	.tri-collection{
		background-color: white;
	}
}