:root{
	--overlay-bg: rgba(0,0,0,.92);
	--ui-bg: rgba(0,0,0,.5);
	--ui-bg-hover: rgba(255,255,255,.1);
	--ui-text: #fff;
}

.lb-trigger{cursor: zoom-in;}

/* Ne pas forcer la police globale du site */

.gallery{display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:16px; padding:24px;}
.gallery .lb-trigger{width:100%; height: 260px; object-fit: cover; border-radius:14px; box-shadow: 0 6px 30px rgba(0,0,0,.15);}    

.lb-overlay{position: fixed; inset: 0; background: var(--overlay-bg); display:none; z-index: 9999;}
.lb-overlay.open{display:block;}

.lb-stage{position:absolute; inset: 72px 0 72px 0; display:grid; place-items:center; overflow:hidden;}
/* Cadre 4/3 strict, dimensionné pour rentrer dans vw et vh */
.lb-media-wrap{position:relative; display:block; width: min(92vw, 1400px, calc(82vh * 4 / 3)); aspect-ratio: 4 / 3; height: auto;}
/* Fallback si aspect-ratio non supporté */
@supports not (aspect-ratio: 1 / 1) {
	.lb-media-wrap{height:auto;}
	.lb-media-wrap::before{content:""; display:block; padding-top:75%;}
}
/* L’image remplit le cadre 4/3, centrée, avec recadrage si nécessaire */
.lb-img{position:absolute; inset:0; width: 100%; height: 100%; object-fit: cover; object-position: center center; will-change: transform; user-select: none; -webkit-user-drag: none; cursor: grab; touch-action: none;}
.lb-img.dragging{cursor: grabbing;}

.lb-topbar{position:absolute; left:0; right:0; top:0; display:flex; align-items:center; justify-content:space-between; padding:10px 14px; color: var(--ui-text);} 

.lb-chip{background: var(--ui-bg); backdrop-filter: blur(4px); border-radius: 999px; padding:8px 12px; font-size:14px; display:inline-flex; align-items:center; gap:10px;}

.lb-btn{appearance:none; border:0; background: var(--ui-bg); color: var(--ui-text); width:44px; height:44px; display:grid; place-items:center; border-radius:999px; cursor:pointer; transition: background .15s ease;}
.lb-btn:hover{background: var(--ui-bg-hover);}    
.lb-btn svg{width:22px; height:22px;}

.lb-center-nav{position:absolute; inset-block:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; pointer-events:none;}
.lb-center-nav .lb-btn{pointer-events:auto; margin: 0 10px;}

@media (max-width:600px){
	.lb-stage{inset: 56px 0 72px 0;}
	/* Cadre 4/3 strict pour mobile */
	.lb-media-wrap{width: min(96vw, calc(72vh * 4 / 3)); aspect-ratio: 4 / 3; height: auto;}
	@supports not (aspect-ratio: 1 / 1) {
		.lb-media-wrap::before{padding-top:75%;}
	}
}