.dg-gallery {
	--dg-accent: #f0b000;
	--dg-ratio: 4/5;
	--dg-fit: cover;
	--dg-thumb: 90px;
	--dg-bg: #f3f3f3;
	width: 100%;
	outline: none;
}

.dg-gallery button {
	margin: 0;
	box-shadow: none;
	font-family: inherit;
}

/* Grande image */
.dg-main {
	position: relative;
	aspect-ratio: var(--dg-ratio);
	background: var(--dg-bg);
	overflow: hidden;
	touch-action: pan-y;
}

.dg-main-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--dg-fit);
	transition: opacity .3s ease;
	user-select: none;
	-webkit-user-drag: none;
}

.dg-main-img.is-loading { opacity: .3; }

/* Flèches */
.dg-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0 0 4px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .88);
	color: #222;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	transition: opacity .2s, background-color .2s, color .2s;
}

.dg-prev { left: 12px; }
.dg-next { right: 12px; }

.dg-gallery:hover .dg-nav,
.dg-gallery:focus-within .dg-nav { opacity: 1; }

.dg-nav:hover,
.dg-nav:focus-visible { background: var(--dg-accent); color: #fff; }

@media (hover: none) {
	.dg-nav { opacity: 1; width: 38px; height: 38px; font-size: 26px; }
}

.dg-counter {
	position: absolute;
	right: 12px;
	bottom: 12px;
	padding: 3px 10px;
	border-radius: 12px;
	background: rgba(0, 0, 0, .55);
	color: #fff;
	font-size: 12px;
	line-height: 1.6;
	pointer-events: none;
}

/* Ruban de miniatures */
.dg-thumbs {
	display: flex;
	gap: 8px;
	margin-top: 10px;
	padding-bottom: 6px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: thin;
	scrollbar-color: #ccc transparent;
}

.dg-thumbs::-webkit-scrollbar { height: 6px; }
.dg-thumbs::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }

.dg-thumb {
	flex: 0 0 var(--dg-thumb);
	width: var(--dg-thumb);
	height: var(--dg-thumb);
	padding: 0;
	border: 2px solid transparent;
	background: var(--dg-bg);
	cursor: pointer;
	opacity: .55;
	transition: opacity .2s, border-color .2s;
}

.dg-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dg-thumb:hover,
.dg-thumb:focus-visible { opacity: 1; }

.dg-thumb.is-active {
	opacity: 1;
	border-color: var(--dg-accent);
}

@media (max-width: 600px) {
	.dg-gallery { --dg-thumb: 64px; }
	.dg-thumbs { gap: 6px; }
}

/* Message visible uniquement par les admins */
.dg-admin-notice {
	padding: 12px 16px;
	border-left: 4px solid #d63638;
	background: #fcf0f1;
	color: #50575e;
	font-size: 14px;
}
