/**
 * Zoom/lightbox sur les planches du Guide des tailles/couleurs -- voir
 * guide-tailles-zoom.js pour le contexte du bug corrigé. Style repris
 * délibérément identique à .lmp-guide-overlay (configurateur-minis-positifs/
 * src/configurateur.css), même variables --lmp-*, pour que l'agrandissement se
 * comporte pareil que dans le studio de personnalisation.
 */

.guide-image--zoomable {
	cursor: zoom-in;
}

.lmp-guide-zoom-overlay {
	position: fixed;
	inset: 0;
	background: rgba(61, 43, 31, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem 1.25rem;
	z-index: 10000;
}

.lmp-guide-zoom-overlay__img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	border-radius: 10px;
	background: var(--lmp-blanc);
	box-shadow: 0 20px 60px -20px rgba(61, 43, 31, 0.6);
}

.lmp-guide-zoom-overlay__close {
	position: absolute;
	top: 1rem;
	right: 1.25rem;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	border: none;
	background: var(--lmp-blanc);
	color: var(--lmp-brun);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 6px 20px -6px rgba(61, 43, 31, 0.5);
}

.lmp-guide-zoom-overlay__close:hover,
.lmp-guide-zoom-overlay__close:focus-visible {
	background: var(--lmp-creme-dark);
}