/* Nano Galeries */
.ng {
	--ng-gap: clamp(.5rem, 1.5vw, 1rem);
	--ng-radius: var(--nc-radius-sm, 8px);
	--ng-ink: var(--nc-ink, #1e140e);
	--ng-brand: var(--nc-brand, #5a3825);
	--ng-accent: var(--nc-accent, #d9a35b);
	position: relative;
}
.ng-items { list-style: none; margin: 0; padding: 0; }
.ng-item { margin: 0; padding: 0; }
.ng-item[hidden] { display: none; }
.ng-link {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--ng-radius);
	background: color-mix(in srgb, var(--ng-ink) 6%, transparent);
	cursor: zoom-in;
}
.ng-link img { display: block; width: 100%; height: auto; transition: transform .4s ease, filter .4s ease; }
.ng-link:hover img { transform: scale(1.03); }
.ng-link:focus-visible { outline: 3px solid var(--ng-accent); outline-offset: 3px; }
.ng-caption {
	position: absolute;
	inset: auto 0 0 0;
	padding: 2rem .9rem .7rem;
	color: #fff;
	font-size: .9rem;
	line-height: 1.35;
	background: linear-gradient(transparent, rgba(0, 0, 0, .65));
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .2s, transform .2s;
}
.ng-link:hover .ng-caption, .ng-link:focus-visible .ng-caption { opacity: 1; transform: none; }
@media (hover: none) { .ng-caption { opacity: 1; transform: none; } }

/* Grille */
.ng--grid .ng-items {
	display: grid;
	gap: var(--ng-gap);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, max(180px, calc((100% - (var(--ng-cols) - 1) * var(--ng-gap)) / var(--ng-cols)))), 1fr));
}
.ng--grid .ng-link img { aspect-ratio: var(--ng-ratio); object-fit: cover; height: 100%; }

/* Mosaïque */
.ng--masonry .ng-items { columns: var(--ng-cols) 220px; column-gap: var(--ng-gap); }
.ng--masonry .ng-item { break-inside: avoid; margin-bottom: var(--ng-gap); }

/* Défilement */
.ng--slider .ng-items {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: min(80%, 420px);
	gap: var(--ng-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 0;
	padding-bottom: .75rem;
	scrollbar-width: thin;
}
.ng--slider .ng-items:focus-visible { outline: 3px solid var(--ng-accent); outline-offset: 4px; border-radius: 4px; }
.ng--slider .ng-item { scroll-snap-align: start; }
.ng--slider .ng-link img { aspect-ratio: 4 / 3; object-fit: cover; height: 100%; }
.ng-slider-nav { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .5rem; }
.ng-slider-btn, .ng-lb-btn {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	border: 1.5px solid currentColor;
	background: transparent;
	color: var(--ng-ink);
	cursor: pointer;
	transition: background-color .15s, color .15s;
}
.ng-slider-btn:hover { background: var(--ng-ink); color: #fff; }
.ng-slider-btn:focus-visible, .ng-lb-btn:focus-visible { outline: 3px solid var(--ng-accent); outline-offset: 2px; }
.ng-slider-btn svg, .ng-lb-btn svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Filtres */
.ng-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; }
.ng-filter {
	font: inherit;
	font-weight: 700;
	padding: .5rem 1rem;
	min-height: 2.75rem;
	border-radius: 99px;
	border: 1.5px solid color-mix(in srgb, var(--nc-ink, #1e140e) 25%, transparent);
	background: transparent;
	color: var(--nc-ink, #1e140e);
	cursor: pointer;
}
.ng-filter span { font-weight: 400; opacity: .65; font-variant-numeric: tabular-nums; }
.ng-filter:hover { border-color: var(--nc-ink, #1e140e); }
.ng-filter[aria-pressed="true"] { background: var(--nc-brand, #5a3825); border-color: var(--nc-brand, #5a3825); color: #fff; }
.ng-filter:focus-visible { outline: 3px solid var(--nc-accent, #d9a35b); outline-offset: 2px; }
.ng.is-filtering .ng-item:not([hidden]) { animation: ng-in .35s ease-out; }
@keyframes ng-in { from { opacity: 0; } }

/* Visionneuse */
html.ng-locked { overflow: hidden; }
.ng-lightbox {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgba(14, 18, 15, .96);
	color: #fff;
	display: none;
	grid-template-rows: 1fr auto;
}
.ng-lightbox[open] { display: grid; animation: ng-in .2s ease-out; }
.ng-lightbox::backdrop { background: transparent; }
.ng-lb-stage { display: grid; place-items: center; padding: clamp(.5rem, 3vw, 2.5rem); min-height: 0; overflow: hidden; }
.ng-lb-figure { margin: 0; display: grid; justify-items: center; gap: .75rem; max-height: 100%; min-height: 0; }
.ng-lb-img {
	max-width: 100%;
	max-height: calc(100vh - 9rem);
	max-height: calc(100dvh - 9rem);
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 4px;
	transition: opacity .2s;
}
.ng-lightbox.is-loading .ng-lb-img { opacity: .4; }
.ng-lb-caption { font-size: .95rem; max-width: 65ch; text-align: center; opacity: .9; }
.ng-lb-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .75rem clamp(.75rem, 3vw, 2rem) calc(.75rem + env(safe-area-inset-bottom));
	border-top: 1px solid rgba(255, 255, 255, .12);
}
.ng-lb-count { font-variant-numeric: tabular-nums; opacity: .8; }
.ng-lb-buttons { display: flex; gap: .5rem; }
.ng-lb-btn { color: #fff; border-color: rgba(255, 255, 255, .4); }
.ng-lb-btn:hover { background: #fff; color: #111; }
.ng-lb-btn[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
	.ng *, .ng-lightbox, .ng-lightbox * { transition: none !important; animation: none !important; }
	.ng-link:hover img { transform: none; }
}