.gallery{
	column-count:4;
	column-gap:12px;
	max-width:1180px;
	margin:0 auto;
	padding:0 16px 40px;
}
@media (max-width:1000px){ .gallery{column-count:3;} }
@media (max-width:700px){ .gallery{column-count:2;} }
@media (max-width:480px){ .gallery{column-count:1;} }

.pro_gallery .title {
	max-width: 1150px;
	margin: 20px auto;
	font-size: 20px;
	color: #666;
	font-family: Arial;
	border-bottom: 1px solid #666;
}

@media screen and (max-width: 1180px) {
	.pro_gallery .title {
		padding: 0 20px;
	}
}

.tile{
	position:relative;
	display:inline-block;
	width:100%;
	margin:0 0 12px;
	overflow:hidden;
	background:#171a21;
	border:1px solid #202533;
	cursor:zoom-in; 
	break-inside: avoid;
	-webkit-column-break-inside: avoid; /* Safari/anciennes versions */
	-moz-column-break-inside: avoid;    /* Firefox anciennes versions */
}

.tile img{
	width:100%;
	display:block;
	transition:transform .35s ease
}

.tile:hover img{
	transform:scale(1.04)
}

.tile figcaption{
	position:absolute;
	bottom:8px;
	left:8px;
	right:8px;
	background:rgba(0,0,0,.45);
	color:#fff; padding:6px 10px; font-size:12px;
	display: none;
}

/* Lightbox */
.lightbox{
	position:fixed;
	inset:0; 
	display:none; 
	place-items:center; 
	background:rgba(7,8,12,.88); 
	backdrop-filter:blur(3px);
	z-index:50
}

.lightbox[open]{display:grid}

.lb-frame{
	position:relative; 
	width:min(92vw,1100px);
}

.lb-media{
	background:#000; 
	overflow:hidden; 
	box-shadow:0 12px 40px rgba(0,0,0,.6);
}

.lb-media img{
	width: auto;            /* largeur auto pour garder le ratio */
	height: auto;
	max-width: 90vw;        /* jamais plus large que 90% de la fenêtre */
	max-height: 90vh;       /* jamais plus haute que 90% de la fenêtre */
	display: block;
	margin: 0 auto;
}

.lb-caption{
	display:flex;
	justify-content:space-between;
	gap:12px;
	font-size:14px;
	color:#cbd5e1;
	padding:10px 4px
}

.lb-btns{
	position:absolute;
	inset:0;
	display:flex; 
	align-items:center; 
	justify-content:space-between; 
	pointer-events:none
}

.lb-btn{
	pointer-events:auto; 
	display:grid; 
	place-items:center; 
	width:44px; 
	height:44px; 
	background:rgba(0,0,0,.55); 
	border:1px solid rgba(255,255,255,.12);
	color:#fff; 
	font-size:22px; 
	cursor:pointer; 
	user-select:none; 
	transition:transform .2s
}

.lb-btn:hover{
	transform:scale(1.06)
}

.lb-topbar{
	position:absolute;
	top:10px;
	right:10px;
	display:flex;
	gap:8px
}

.chip{
	font-size:12px; 
	padding:6px 10px; 
	background:rgba(0,0,0,.55); 
	color:#fff; 
	border:1px solid rgba(255,255,255,.12);
	display: none;
}

.close{
	cursor:pointer
}