.hopopup-gallery {
	--hopopup-gallery-gap: 16px;
	--hopopup-gallery-columns-desktop: 4;
	--hopopup-gallery-columns-tablet: 2;
	--hopopup-gallery-columns-mobile: 1;
	--hopopup-gallery-per-view: 3;
	--hopopup-gallery-arrow-size: 42px;
	--hopopup-gallery-arrow-background: rgba(255, 255, 255, .92);
	--hopopup-gallery-arrow-color: #1d2327;
	--hopopup-gallery-dot-color: rgba(29, 35, 39, .3);
	--hopopup-gallery-dot-active-color: #1d2327;
	box-sizing: border-box;
	container-name: hopopup-gallery;
	container-type: inline-size;
	position: relative;
	width: 100%;
}

.hopopup-gallery *,
.hopopup-gallery *::before,
.hopopup-gallery *::after {
	box-sizing: border-box;
}

.hopopup-gallery__viewport {
	min-width: 0;
	outline: none;
	overflow: hidden;
}

.hopopup-gallery__track {
	margin: 0;
	padding: 0;
}

.hopopup-gallery__item {
	background: var(--hopopup-color-surface-soft, #f5f7f6);
	margin: 0;
	min-width: 0;
	overflow: hidden;
	position: relative;
}

.hopopup-gallery__image,
.hopopup-gallery__link {
	display: block;
	width: 100%;
}

.hopopup-gallery__image {
	height: auto;
}

.hopopup-gallery__link {
	color: inherit;
	position: relative;
	text-decoration: none;
}

.hopopup-gallery__caption {
	background: linear-gradient(to top, rgba(0, 0, 0, .62), rgba(0, 0, 0, 0));
	bottom: 0;
	color: #fff;
	font-size: clamp(.72rem, .68rem + .15vw, .84rem);
	left: 0;
	line-height: 1.35;
	margin: 0;
	padding: 2.4rem .8rem .7rem;
	pointer-events: none;
	position: absolute;
	right: 0;
	z-index: 1;
}

/* Grille classique : le nombre de colonnes reste indépendant selon l'écran. */
.hopopup-gallery--grid .hopopup-gallery__track {
	display: grid;
	gap: var(--hopopup-gallery-gap);
	grid-template-columns: repeat(var(--hopopup-gallery-columns-desktop), minmax(0, 1fr));
}

/* Mosaïque éditoriale compatible avec l'ancien rendu de Hop' Réalisations. */
.hopopup-gallery--mosaic .hopopup-gallery__track {
	display: grid;
	gap: var(--hopopup-gallery-gap);
	grid-auto-flow: dense;
	grid-auto-rows: 12.5cqw;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hopopup-gallery--mosaic .hopopup-gallery__item--portrait {
	grid-column: span 1;
	grid-row: span 3;
}

.hopopup-gallery--mosaic .hopopup-gallery__item--square {
	grid-column: span 1;
	grid-row: span 2;
}

.hopopup-gallery--mosaic .hopopup-gallery__item--landscape {
	grid-column: span 2;
	grid-row: span 3;
}

.hopopup-gallery--mosaic .hopopup-gallery__item--wide {
	grid-column: span 2;
	grid-row: span 2;
}

.hopopup-gallery--mosaic .hopopup-gallery__image,
.hopopup-gallery--mosaic .hopopup-gallery__link {
	height: 100%;
}

.hopopup-gallery--mosaic .hopopup-gallery__image {
	inset: 0;
	object-fit: cover;
	position: absolute;
}

/* Slider léger, sans dépendance Elementor/Swiper. */
.hopopup-gallery--carousel .hopopup-gallery__viewport {
	touch-action: pan-y;
}

.hopopup-gallery--carousel .hopopup-gallery__track {
	display: flex;
	gap: var(--hopopup-gallery-gap);
	transform: translate3d(0, 0, 0);
	will-change: transform;
}

.hopopup-gallery--carousel .hopopup-gallery__item {
	flex: 0 0 calc(100% / var(--hopopup-gallery-per-view));
}

.hopopup-gallery__arrow {
	align-items: center;
	appearance: none;
	background: var(--hopopup-gallery-arrow-background);
	border: 0;
	border-radius: 999px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .14);
	color: var(--hopopup-gallery-arrow-color);
	cursor: pointer;
	display: flex;
	height: var(--hopopup-gallery-arrow-size);
	justify-content: center;
	padding: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	transition: opacity .18s ease, transform .18s ease;
	width: var(--hopopup-gallery-arrow-size);
	z-index: 3;
}

.hopopup-gallery__arrow:hover,
.hopopup-gallery__arrow:focus-visible {
	transform: translateY(-50%) scale(1.05);
}

.hopopup-gallery__arrow:disabled {
	cursor: default;
	opacity: .3;
}

.hopopup-gallery__arrow svg {
	height: 22px;
	width: 22px;
}

.hopopup-gallery__arrow--prev {
	left: 12px;
}

.hopopup-gallery__arrow--next {
	right: 12px;
}

.hopopup-gallery__dots {
	align-items: center;
	display: flex;
	gap: 7px;
	justify-content: center;
	margin-top: 12px;
}

.hopopup-gallery__dot {
	appearance: none;
	background: var(--hopopup-gallery-dot-color);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	height: 8px;
	padding: 0;
	transition: background-color .18s ease, transform .18s ease;
	width: 8px;
}

.hopopup-gallery__dot.is-active {
	background: var(--hopopup-gallery-dot-active-color);
	transform: scale(1.25);
}

@container hopopup-gallery (max-width: 64rem) {
	.hopopup-gallery--grid .hopopup-gallery__track {
		grid-template-columns: repeat(var(--hopopup-gallery-columns-tablet), minmax(0, 1fr));
	}

	.hopopup-gallery--mosaic .hopopup-gallery__track {
		grid-auto-rows: 25cqw;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@container hopopup-gallery (max-width: 47.9375rem) {
	.hopopup-gallery--grid .hopopup-gallery__track {
		grid-template-columns: repeat(var(--hopopup-gallery-columns-mobile), minmax(0, 1fr));
	}

	.hopopup-gallery--mosaic .hopopup-gallery__track {
		grid-auto-flow: row;
		grid-auto-rows: auto;
		grid-template-columns: 1fr;
	}

	.hopopup-gallery--mosaic .hopopup-gallery__item {
		aspect-ratio: var(--hopopup-gallery-ratio, 1 / 1);
		grid-column: auto;
		grid-row: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hopopup-gallery__track,
	.hopopup-gallery__arrow,
	.hopopup-gallery__dot {
		transition-duration: 0s !important;
	}
}

@supports not (container-type: inline-size) {
	@media (max-width: 1024px) {
		.hopopup-gallery--grid .hopopup-gallery__track {
			grid-template-columns: repeat(var(--hopopup-gallery-columns-tablet), minmax(0, 1fr));
		}

		.hopopup-gallery--mosaic .hopopup-gallery__track {
			grid-auto-rows: 25vw;
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	@media (max-width: 767px) {
		.hopopup-gallery--grid .hopopup-gallery__track {
			grid-template-columns: repeat(var(--hopopup-gallery-columns-mobile), minmax(0, 1fr));
		}

		.hopopup-gallery--mosaic .hopopup-gallery__track {
			grid-auto-flow: row;
			grid-auto-rows: auto;
			grid-template-columns: 1fr;
		}

		.hopopup-gallery--mosaic .hopopup-gallery__item {
			aspect-ratio: var(--hopopup-gallery-ratio, 1 / 1);
			grid-column: auto;
			grid-row: auto;
		}
	}
}