/* -----------------------------------------------------------------
   bruxellesfleurs.be - flux produits
   Complement a assets/css/main.css (theme Editorial) : memes couleurs
   (#f56a6a), memes bordures, memes polices. Rien n'est surcharge.
   ----------------------------------------------------------------- */

/* ---- grille principale : 5 bouquets ---- */

.produits {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-gap: 1.25em;
	gap: 1.25em;
	margin: 0 0 2em 0;
}

.produit {
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: solid 1px rgba(210, 215, 217, 0.75);
	border-radius: 0.375em;
	overflow: hidden;
	transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.produit:hover {
	box-shadow: 0 0.5em 1.5em rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

.produit .photo {
	display: block;
	margin: 0;
	cursor: pointer;
	background: #f7f7f7;
	border-bottom: solid 1px rgba(210, 215, 217, 0.75);
}

.produit .photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 0;
}

.produit .corps {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1em 0.9em 1.1em 0.9em;
	text-align: center;
}

.produit h3 {
	font-size: 0.8em;
	line-height: 1.45;
	margin: 0 0 0.6em 0;
	letter-spacing: 0.05em;
}

.produit .prix {
	display: block;
	margin: 0 0 1em 0;
	font-size: 0.85em;
	line-height: 1.4;
	color: #f56a6a;
	font-weight: 700;
	/* la ligne de prix pousse le bouton en bas : les cartes s'alignent
	   meme quand un nom de bouquet tient sur deux lignes */
	margin-top: auto;
}

.produit .prix span {
	display: block;
	color: #9fa3a6;
	font-size: 0.8em;
	font-weight: 400;
	letter-spacing: 0;
}

.produit .button {
	width: 100%;
	padding: 0;
	font-size: 0.7em;
}

/* Le bouton "voir tout le catalogue" est centre sous la grille. */
.produits-cta {
	text-align: center;
}

/* ---- bouquets de la barre laterale ---- */

.mini-produits {
	margin: 0 0 1em 0;
}

.mini-produit {
	display: flex;
	align-items: center;
	margin: 0 0 0.8em 0;
	cursor: pointer;
	border-radius: 0.375em;
	transition: background-color 0.2s ease-in-out;
}

.mini-produit:hover {
	background-color: rgba(245, 106, 106, 0.05);
}

.mini-produit img {
	width: 5.5em;
	height: 5.5em;
	object-fit: cover;
	border-radius: 0.375em;
	flex-shrink: 0;
}

.mini-produit .txt {
	padding: 0 0 0 0.9em;
	line-height: 1.4;
}

.mini-produit .nom {
	display: block;
	font-family: "Roboto Slab", serif;
	font-size: 0.8em;
	font-weight: 700;
	color: #3d4449;
}

.mini-produit .prix {
	display: block;
	font-size: 0.75em;
	font-weight: 700;
	color: #f56a6a;
}

/* ---- adaptations ecran ---- */

@media screen and (max-width: 1280px) {

	.produits {
		grid-template-columns: repeat(3, 1fr);
	}

}

@media screen and (max-width: 736px) {

	/* Sur mobile la grille devient un vrai flux : on fait defiler les
	   5 bouquets horizontalement plutot que de les empiler sur 3 rangs. */
	.produits {
		display: flex;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		margin-right: -1.5em;
		padding: 0 1.5em 1em 0;
	}

	.produit {
		flex: 0 0 62%;
		scroll-snap-align: start;
	}

	.produit h3,
	.produit .prix {
		font-size: 0.85em;
	}

}