*, *::after, *::before {
	box-sizing: inherit;
}

html, body {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

header {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px 40px;
	background-image: url("images/space2.jpg");
	color: whitesmoke;
	border-bottom: 4px solid black;
	background-size: cover;
}

nav ul {
	list-style-type: none;
	display: flex;
}

nav ul li{
	margin-right: 20px;
}

nav a {
	text-decoration: none;
	color: whitesmoke;
	font-weight: 600;
	font-size: 1rem;
	padding: 8px 12px;
	border-radius: 4px;
	transition: background-color 0.3s ease;
}

nav a:hover {
	background-color: blueviolet;
	padding: 16px 24px;

}

nav a:link {
	

}


.prodwrapper {
  display: flex;
  flex-wrap: wrap;
  min-height: 100vh;
  max-height: auto; /* ou 400px selon ton besoin */
  gap: 3rem; /* espace entre les éléments */
  padding:30px; /* espace haut et bas à gérer proprement si nécessaire */
  background-image: url("images/space1.jpg");
  background-size: cover;
  justify-content: center;
  align-items: center;
}

.prod {
   /* prend une part égale de l’espace disponible */
  background: linear-gradien(sky-blue, blueviolet);
  border: 1px solid black;
  border-radius: 10px;
  margin: 10px 10px 10px 10px;
  max-width: 800px;
  min-width: 400px;
  height: auto;
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  align-items: center;
  flex: row;

}

.desc {
	display: inline-block;
	background-color: yellow;
	border-radius: 10px;
	border : 2px dashed black;
	margin: 5px;
	padding: 5px;
	flex: 1;
	min-width: 120px;
	align-items: center;
}

.desc div {
	
}

.desc p {
	display: block;
	margin: 0px;
}



.audio {
	margin: auto;
	padding: 16px 40px;
	
	justify-content: center;
}

.prodtitle {
	font-family: ;
	color: whitesmoke;
}

@media (max-width: 600px) {
	.prod {
		min-width: 300px;
	}
	.audio {
		padding: 16px 16px;
	}
	nav a {
		font-size: ;
	}
	#p1, #p2, #p3, #p4, #p5, #p6 {
   /* prend une part égale de l’espace disponible */
  flex: 1;
  
	}
}