/* Appliquer box-sizing border-box à tous les éléments pour une gestion plus simple des marges et du padding */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Style des liens internes et externes */
a {
	color: #333; /* Couleur du texte des liens */
	text-decoration: none; /* Pas de soulignement par défaut */
}

/* Style des liens au survol */
a:hover {
	color: #333; /* Couleur du texte au survol */
	text-decoration: underline; /* Ajout du soulignement au survol */
}

/* Mise en page générale */
body {
	font-family: sans-serif; /* Choix de la police */
	background-color: #f9f9f9; /* Couleur de fond de la page */
	color: #333; /* Couleur du texte */
	margin: 0; /* Suppression des marges par défaut */
	padding: 0 20px; /* Marge de 20px à gauche et à droite */
}

.container {
	width: 100%; /* Largeur adaptative */
	max-width: 800px; /* Largeur maximale du conteneur */
	margin: 20px auto; /* Centrage avec une marge de 20px en haut et en bas */
}

h3 {
	text-align: center; /* Texte centré */
	color: #333; /* Couleur du titre */
	margin-bottom: 20px; /* Marge en bas */
	font-weight: normal; /* Poids de la police normal */
}

/* Conteneur des articles du panier */
#cartItems {
	display: flex; /* Active le modèle de mise en page Flexbox pour le conteneur */
	flex-direction: column; /* Organise les éléments enfants (articles) en colonne */
	gap: 20px; /* Ajoute un espacement de 20px entre chaque article du panier */
}

/* Style des éléments du panier */
.cart-item {
	background-color: #fff; /* Fond blanc pour chaque article */
	border: 1px solid #ddd; /* Bordure légère autour de chaque élément du panier */
	border-radius: 8px; /* Coins arrondis pour un effet plus doux */
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Ombre légère sous chaque article pour un effet de profondeur */
	padding: 20px; /* Espacement interne pour créer de l'air autour du contenu */
	display: flex; /* Utilisation de Flexbox pour aligner les éléments internes */
	flex-direction: column; /* Alignement des éléments à l'intérieur du panier en colonne */
	align-items: flex-start; /* Alignement des éléments à gauche de leur conteneur */
	gap: 15px; /* Espacement entre les éléments internes pour améliorer la lisibilité */
}

.cart-item h4 {
	text-align: left; /* Alignement du titre à gauche */
	font-size: 1.25em; /* Taille du titre de l'article */
	color: #333; /* Couleur du titre */
	margin: 0; /* Suppression des marges */
	font-weight: 500; /* Poids de la police du titre */
}

.cart-item p {
	font-size: 1em; /* Taille de la description de l'article */
	color: #555; /* Couleur plus claire pour la description */
}

.cart-item .item-quantity {
	width: 50px; /* Largeur de la zone de quantité */
	height: 30px; /* Hauteur de la zone de quantité */
	font-size: 0.9em; /* Taille de la police de la quantité */
	text-align: center; /* Alignement du texte au centre */
	border: 1px solid #e0e0e0; /* Bordure claire */
	border-radius: 5px; /* Coins arrondis */
	padding: 5px; /* Espacement interne */
	outline: none; /* Supprime le contour bleu du navigateur */
}

.cart-item .item-quantity:focus {
	border: 1px solid #343434; /* Bordure foncée */
}

.cart-item button {
	background-color: #f2f2f2; /* Fond gris clair */
	color: black; /* Texte en noir */
	border: none; /* Pas de bordure */
	padding: 6px 12px; /* Espacement interne du bouton */
	border-radius: 5px; /* Coins arrondis du bouton */
	cursor: pointer; /* Curseur en forme de main */
	font-size: 0.9em; /* Taille de la police du bouton */
	transition: background-color 0.3s ease; /* Effet de transition au survol */
}

.cart-item button:hover {
	background-color: #ebebeb; /* Fond légèrement plus foncé au survol */
}

/* Affichage du total */
#totalPrice {
	font-size: 1.25em; /* Taille du texte du total */
	color: #333; /* Couleur du texte */
	margin-top: 30px; /* Marge en haut */
	text-align: right; /* Alignement à droite */
}

/* Bouton vider le panier (fond noir texte blanc) */
#emptyCartBtn {
	background-color: #000; /* Fond noir */
	color: white; /* Texte blanc */
	padding: 12px; /* Espacement interne */
	border-radius: 5px; /* Coins arrondis */
	width: 100%; /* Largeur à 100% */
	font-size: 1em; /* Taille de la police */
	cursor: pointer; /* Curseur en forme de main */
	text-align: center; /* Texte centré */
	margin-top: 20px; /* Marge en haut */
	margin-bottom: 20px; /* Marge en bas */
	border: none; /* Pas de bordure */
}

#emptyCartBtn:hover {
	background-color: #333; /* Fond gris foncé au survol */
}

/* Bouton passer la commande (fond bleu texte blanc) */
#goToOrderBtn {
	background-color: #007FFF; /* Fond bleu */
	color: white; /* Texte blanc */
	padding: 12px; /* Espacement interne */
	border-radius: 5px; /* Coins arrondis */
	width: 100%; /* Largeur à 100% */
	font-size: 1em; /* Taille de la police */
	cursor: pointer; /* Curseur en forme de main */
	text-align: center; /* Texte centré */
	margin-top: 0px; /* Pas de marge en haut */
	margin-bottom: 20px; /* Marge en bas */
	border: none; /* Pas de bordure */
}

#goToOrderBtn:hover {
	background-color: #0066CC; /* Fond bleu plus foncé au survol */
}

/* Pied de page */
footer {
	position: relative; /* Positionnement relatif du pied de page */
	bottom: 0; /* Fixe le pied de page en bas de la page */
	left: 0; /* Aligne le pied de page à gauche */
	right: 0; /* Aligne le pied de page à droite */
	width: 100%; /* Le pied de page occupe toute la largeur de l'écran */
	font-size: 0.8em; /* Taille de la police réduite pour un texte plus petit */
	text-align: center; /* Aligne le texte au centre du pied de page */
	margin-top: 12px; /* Marge au-dessus du pied de page */
}

/* Ajustement pour des écrans plus larges (tablette et pc) */
@media (min-width: 768px) {
	.cart-item {
		max-width: 100%; /* Les articles s'affichent toujours en vertical */
	}

	#emptyCartBtn {
		font-size: 1em; /* Taille du texte légèrement augmentée pour les grands écrans */
	}
}

/* Petits écrans (max-width: 600px) */
@media (max-width: 600px) {
	body {
		padding: 0 20px; /* Marge de 20px à gauche et à droite pour les petits écrans */
	}

	#totalPrice {
		font-size: 1.25em; /* Taille du total ajustée */
	}

	.cart-item h4 {
		font-size: 1.25em; /* Taille du titre des articles ajustée */
	}

	.cart-item p {
		font-size: 1em; /* Taille de la description ajustée */
	}

	#emptyCartBtn {
		font-size: 1em; /* Taille du bouton ajustée pour les petits écrans */
	}
}