/*------------------------------------*\
    $Base / Version mobile
\*------------------------------------*/
* {
	box-sizing: border-box;
}

body {
	margin: auto;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;

}

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

li{
	list-style-type: none;
}

ul{
	padding-left: 1px;
}

/* En-tête */

header{
	background-color: #1c1c1c;
	display: flex;
	justify-content: space-between;
	font-family: 'Permanent Marker';
	font-size: 20px;
	align-items: center;
	padding-right: 20px;
	padding-left: 20px;
}

header a{
	color: white;
}

nav{
	display: flex;
	justify-content: center;
	flex-direction: column;
	padding-left: 20px;
	background-color: #1c1c1c;
	margin-bottom: 20px;
}

nav a{
	color: white;
}

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

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 48 
}

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 48
}

.material-symbols-outlined{
	padding-right: 20px;
	color: white;
}

select{
	margin-bottom: 10px;
}

/* Aside */

#tri{
	padding-left: 20px;
	display: flex;
	flex-direction: column;
}

.tri-collection label {
	text-transform: uppercase;
	color: #666;
	margin-bottom: 5px;
	font-size: 12px;
	display: flex;
	flex-direction: column;
}

.tri-collection{
	padding-right: 20px;
}

/* Articles */

#produits{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

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

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

/* Pied de page */

footer{
	background-color: #1c1c1c;
	color: white;
	padding-left: 20px;
}

footer a{
	color: white;
}

/*------------------------------------*\
    $Version Tablette
\*------------------------------------*/

@media (min-width: 480px) {

	#navigation-principale{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}

	#footer-inner{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}
}

/*------------------------------------*\
    $Version Desktop
\*------------------------------------*/

@media (min-width: 960px){

	#navigation-principale{
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	
	#tri{
		display: flex;
		flex-wrap: wrap;
	}

	#footer-inner{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}

}