/**
 * Extra MatGeco — fenêtre modale « agrandir l'image ».
 * Panneau blanc encadré au centre de l'écran, sur un fond assombri.
 * Palette de la charte : vert MatGeco #11802f / #1c4a1d.
 */

/* Image cliquable ------------------------------------------------------ */
[data-em-zoom] {
	cursor: zoom-in;
}

/* Pastille loupe : repère visuel + accès clavier (une image n'est pas
   focusable). Elle se place dans le cadre qui contient l'image — celui-ci est
   déjà en position:relative dans les deux blocs concernés. */
.em-zoom-btn {
	position: absolute;
	right: 10px;
	bottom: 10px;
	width: 36px;
	height: 36px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 999px;
	background: rgba(28, 74, 29, 0.72);
	color: #fff;
	cursor: zoom-in;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 0.18s ease, transform 0.18s ease, background 0.18s ease;
	z-index: 2;
}
/* Beaucoup de thèmes (Kadence compris) posent « svg { width: … } » ou laissent
   le SVG s'écraser dans un conteneur flex : sans ces trois lignes l'icône
   mesure 0 px de large et la pastille apparaît vide. */
.em-zoom-btn > svg {
	width: 20px !important;
	height: 20px !important;
	flex: 0 0 auto;
	display: block;
	fill: none;
	stroke: currentColor;
}
:hover > .em-zoom-btn,
:focus-within > .em-zoom-btn {
	opacity: 1;
	transform: none;
}
.em-zoom-btn:hover {
	background: #11802f;
}
.em-zoom-btn:focus-visible {
	opacity: 1;
	transform: none;
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* Fenêtre modale ------------------------------------------------------- */
html.em-lb-ouverte {
	overflow: hidden;
}

.em-lb {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	box-sizing: border-box;
}
.em-lb[hidden] {
	display: none;
}

.em-lb-fond {
	position: absolute;
	inset: 0;
	background: rgba(16, 24, 17, 0.62);
	backdrop-filter: blur(2px);
}

.em-lb-fenetre {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	max-width: min(1180px, 100%);
	max-height: 100%;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
	overflow: hidden;
	animation: em-lb-entree 0.18s ease-out;
}
@keyframes em-lb-entree {
	from { opacity: 0; transform: translateY(8px) scale(0.99); }
	to   { opacity: 1; transform: none; }
}

/* Barre de titre ------------------------------------------------------- */
.em-lb-barre {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	padding: 10px 12px 10px 18px;
	border-bottom: 1px solid #e4e9e4;
	background: #f8fef9;
}
.em-lb-titre {
	flex: 1 1 auto;
	min-width: 0;
	/* La légende n'est plus répétée sous l'image : le titre doit donc pouvoir
	   s'enrouler, sinon un texte long serait coupé et perdu. Une limite de
	   lignes a été essayée : sur téléphone elle rognait la légende, et
	   l'infobulle ne sert à rien au doigt. Le titre défile donc plutôt que
	   de rogner, et l'image garde la place restante. */
	overflow-y: auto;
	max-height: 28vh;
	overscroll-behavior: contain;
	color: #1c4a1d;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}
.em-lb-compteur {
	flex: 0 0 auto;
	color: #627262;
	font-size: 13px;
	white-space: nowrap;
}
.em-lb-btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 34px;
	padding: 0 12px;
	border: 1px solid #cfdccf;
	border-radius: 999px;
	background: #fff;
	color: #1c4a1d;
	font-size: 13px;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.em-lb-btn:hover {
	background: #11802f;
	border-color: #11802f;
	color: #fff;
}
.em-lb-btn:focus-visible {
	outline: 2px solid #11802f;
	outline-offset: 2px;
}
.em-lb-fermer {
	width: 34px;
	padding: 0;
}
.em-lb-btn > svg {
	width: 20px !important;
	height: 20px !important;
	flex: 0 0 auto;
	display: block;
	fill: none;
	stroke: currentColor;
}

/* Corps ---------------------------------------------------------------- */
/* La chaîne barre → corps → scène → image doit être une colonne flex dont
   chaque maillon peut RÉTRÉCIR (min-height:0) : sans cela la hauteur de la
   scène reste « auto », le « max-height:100% » de l'image ne se résout sur
   rien, l'image déborde et la fenêtre se met à défiler. */
.em-lb-corps {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	align-items: stretch;
	justify-content: center;
	background: #fff;
}
.em-lb-scene {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
	box-sizing: border-box;
	overflow: hidden;
	overscroll-behavior: contain;
}

.em-lb-img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	margin: auto;
	border-radius: 4px;
	cursor: zoom-in;
	/* Surtout pas de crisp-edges : sur un schéma coté agrandi il produit des
	   escaliers. On laisse le navigateur lisser. */
	image-rendering: auto;
}

/* Taille réelle : l'image dépasse la fenêtre et se déplace à la souris ou au
   doigt. AUCUNE barre de défilement n'est affichée (demande de Francisco) —
   le curseur « main » indique qu'on peut la déplacer. */
.em-lb.is-pleine .em-lb-scene {
	overflow: auto;
	scrollbar-width: none;          /* Firefox */
	-ms-overflow-style: none;       /* anciens Edge */
	cursor: grab;
}
.em-lb.is-pleine .em-lb-scene::-webkit-scrollbar {
	width: 0;
	height: 0;
	display: none;
}
.em-lb.is-pleine .em-lb-scene.is-glisse {
	cursor: grabbing;
}
.em-lb.is-pleine .em-lb-img {
	max-width: none;
	max-height: none;
	margin: auto;
	cursor: inherit;
}

/* Navigation ----------------------------------------------------------- */
.em-lb-nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	transform: translateY(-50%);
	width: 42px;
	height: 42px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #e4e9e4;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.94);
	color: #1c4a1d;
	box-shadow: 0 2px 10px rgba(28, 74, 29, 0.12);
	cursor: pointer;
	transition: background 0.16s ease, color 0.16s ease;
}
.em-lb-nav:hover {
	background: #11802f;
	border-color: #11802f;
	color: #fff;
}
.em-lb-nav:focus-visible {
	outline: 2px solid #11802f;
	outline-offset: 2px;
}
.em-lb-nav > svg {
	width: 22px !important;
	height: 22px !important;
	flex: 0 0 auto;
	display: block;
	fill: none;
	stroke: currentColor;
}
.em-lb-prev { left: 10px; }
.em-lb-next { right: 10px; }


@media (max-width: 640px) {
	.em-lb { padding: 10px; }
	.em-lb-fenetre { border-radius: 10px; }
	.em-lb-barre { padding: 8px 8px 8px 12px; gap: 6px; }
	.em-lb-titre { font-size: 13px; }
	.em-lb-scene { padding: 10px; }
	.em-lb-nav { width: 36px; height: 36px; }
	.em-lb-prev { left: 4px; }
	.em-lb-next { right: 4px; }
	/* Pas de survol au doigt : la loupe reste visible. */
	.em-zoom-btn { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.em-zoom-btn { transition: none; }
	.em-lb-fenetre { animation: none; }
}

/* ── PLAFOND ── ajout réversible du 08-09-2026 ───────────────────────────
   « display:flex » sur .em-lb-btn l'emportait sur l'attribut « hidden » :
   le bouton « Voir en taille réelle » restait donc visible même quand le
   script le masquait. Défaut antérieur au plafond, corrigé ici.
   Pour annuler : supprimer ce bloc. */
.em-lb-btn[hidden],
.em-lb-nav[hidden] {
	display: none !important;
}
/* ── fin PLAFOND ── */

/* ── TAILLE ── 0.88.0 (réglages Médias → Visionneuse) ─────────────────────
   Le script pose la largeur de l'image et la largeur maximale de la fenêtre.
   Si l'écran rogne malgré tout la hauteur d'un pixel, l'image garde ses
   proportions au lieu de s'écraser. Pour annuler : supprimer ce bloc. */
.em-lb-img {
	object-fit: contain;
}
/* ── fin TAILLE ── */