/* styles unrelated to zoom */
hr {
	color:#766036 !important;
	opacity:75%;
}

.myPrice, .myPriceHT, .myTitle, .myDesc {
	text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    font-family: raleway;
    font-size: 1.6rem;
    color: #766036;
    text-align: center;
}

.myDesc {
	font-size:1rem;
	text-align:justify;
}

a.btn:hover {
	-webkit-box-shadow: 3px 3px 5px black;
	-moz-box-shadow: 3px 3px 5px black;
    --bs-btn-color: #766036;
    --bs-btn-border-color: #766036;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #766036;
    --bs-btn-hover-border-color: #766036;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #766036;
    --bs-btn-active-border-color: #766036;	
	background: #766036 !important;
	box-shadow: 3px 3px 5px black;
}

a.btn-outline-secondary {
	width: 180px !important;
    text-decoration: none !important;
    padding: 10px 0;
    --bs-btn-color: #766036;
    --bs-btn-border-color: #766036;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #766036;
    --bs-btn-hover-border-color: #766036;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #766036;
    --bs-btn-active-border-color: #766036;
    background: #766036;
    color: white;
    font-size: 1rem;
}

.cart-buttons {
	display:inline-block;
    margin-bottom: 12px;
}

.gallery-spacer {
	display:inline-block;
	width:100%;
	margin-top:20px;
}

/* Flex pour les images */
.zoom-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    min-height: 475px;
    background-color: #FFF;
    padding: 10px;
}

.gallery-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    margin-bottom: 20px;
}

.gallery {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
	align-content:space-between;	
    margin: -10px 0 0 0;
}

.gallery > img{
	cursor:pointer;
	flex:1 1 auto;
	width:auto;
	height:auto;
	max-width:120px;
	max-height:120px;
	margin:10px;
	object-fit:cover;
}

.gallery > img:hover {
	-webkit-transform: translateY(2%);
	-moz-transform: translateY(2%);
	-ms-transform: translateY(2%);
	-o-transform: translateY(2%);
	transform: translateY(2%);
	
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-box-shadow: 5px 5px 10px black;;
	-moz-box-shadow: 5px 5px 10px black;;
	background-color: #F9E4B7;
	box-shadow: 5px 5px 10px black;;
}

/* Flex pour les textes */
.text-zoom-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin: 0 40px;
}

.text-gallery {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
	align-content:space-between;
}

.text-gallery > a {
	flex:1 1 auto;
	width:auto;
	height:auto;
	max-width:150px;
	max-height:150px;
	margin:10px;
}

* { border:0; margin:0; padding:0; }
p { position:absolute; top:3px; right:28px; color:#555; font:bold 13px/1 sans-serif;}

/* these styles are for the demo, but are not required for the plugin */
.zoom {
	display:inline-block;
	position: relative;
}

/* magnifying glass icon */
.zoom:after {
	content:'';
	display:block; 
	width:33px; 
	height:33px; 
	position:absolute; 
	top:0;
	right:0;
	background:url(icon.png);
}

.zoom img {
	display: block;
}

.zoom img::selection { background-color: transparent; }

#ex2 img:hover { cursor: url(grab.cur), default; }
#ex2 img:active { cursor: url(grabbed.cur), default; }

.gallery {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-content:space-between;
}

@media only screen and (max-width: 697px) {
	.gallery {
		display: flex;
		flex-direction: row !important;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-content: space-between;
	}
}

@media only screen and (max-width: 680px) {
	.gallery {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-content:space-between;
	}

	.gallery-container {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		width: 100%;
	}
	
	.gallery > img{
		cursor: pointer;
		flex: 1 1 auto;
		width: auto;
		height: auto;
		max-width: 100px;
		max-height: 100px;
		margin: 20px 10px 0 0;
	}
	
	.gallery > img:hover {
		-webkit-transform: translateY(3%);
		-moz-transform: translateY(3%);
		-ms-transform: translateY(3%);
		-o-transform: translateY(3%);
		transform: translateY(3%);
		
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		-webkit-box-shadow: 3px 3px 5px black;
		-moz-box-shadow: 3px 3px 5px black;
		background-color: #F9E4B7;
		box-shadow: 3px 3px 5px black;
	}
}