/* =========================================================================
   LargeGamer — Lightbox
   Palette relevée sur largegamer.com : violet-noir du bandeau, cyan du logo,
   rouge des boutons, or des titres.
   Tu peux tout re-teinter en changeant uniquement les variables ci-dessous.
   ========================================================================= */

.lglb {
	--lglb-bg: #0e0b16;          /* fond du bandeau / menu du site */
	--lglb-surface: #130f1f;     /* fond des sous-menus */
	--lglb-violet: #2e1f49;      /* item de menu actif */
	--lglb-cyan: #6fc3f7;        /* logo LargeGamer.com */
	--lglb-cyan-bright: #6fd6ff; /* survol */
	--lglb-red: #b3121f;         /* bouton "Stay Polite!" */
	--lglb-gold: #e8b338;        /* accents de titres */
	--lglb-text: #f2f4f3;
	--lglb-text-dim: #a9a6b8;

	--lglb-btn-size: 48px;       /* >= 44px : minimum tactile recommandé */
	--lglb-radius: 10px;
	--lglb-gap: 16px;
	--lglb-ease: cubic-bezier(0.22, 0.68, 0.35, 1);
}

/* -------------------------------------------------------------------------
   Conteneur <dialog>
   Le mode natif place la boîte dans la "top layer" du navigateur : elle passe
   au-dessus de tout, sans guerre de z-index avec Divi.
   ------------------------------------------------------------------------- */
dialog.lglb {
	padding: 0;
	border: 0;
	margin: 0;
	max-width: 100vw;
	max-height: 100vh;
	width: 100vw;
	height: 100dvh; /* tient compte de la barre d'URL mobile */
	background: transparent;
	overflow: hidden;
	color: var(--lglb-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.45;
}

dialog.lglb::backdrop {
	background: rgba(14, 11, 22, 0.94);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

/* Repli si ::backdrop n'est pas géré. */
.lglb__shade {
	position: absolute;
	inset: 0;
	background: rgba(14, 11, 22, 0.94);
	z-index: 0;
}

@supports selector(::backdrop) {
	.lglb__shade {
		display: none;
	}
}

/* -------------------------------------------------------------------------
   Scène : l'image et sa légende
   ------------------------------------------------------------------------- */
.lglb__stage {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: calc(var(--lglb-btn-size) + var(--lglb-gap) * 1.5) var(--lglb-gap) var(--lglb-gap);
	padding-top: max(calc(var(--lglb-btn-size) + var(--lglb-gap) * 1.5), env(safe-area-inset-top));
	padding-bottom: max(var(--lglb-gap), env(safe-area-inset-bottom));
	box-sizing: border-box;
	touch-action: none;
}

.lglb__frame {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	max-height: 100%;
	min-width: 0;
	min-height: 0;
}

.lglb__img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: var(--lglb-radius);
	background: var(--lglb-surface);
	/* Liseré cyan discret + ombre portée : l'image se détache du fond noir. */
	box-shadow:
		0 0 0 1px rgba(111, 195, 247, 0.35),
		0 0 34px -8px rgba(111, 195, 247, 0.3),
		0 24px 60px -20px rgba(0, 0, 0, 0.9);
	transform-origin: center center;
	transition: transform 0.28s var(--lglb-ease), opacity 0.2s linear;
	cursor: zoom-in;
	-webkit-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
}

.lglb--zoomed .lglb__img {
	cursor: grab;
	transition: transform 0.2s var(--lglb-ease);
}

.lglb--panning .lglb__img {
	cursor: grabbing;
	transition: none;
}

.lglb--no-zoom .lglb__img {
	cursor: default;
}

/* Apparition de l'image */
@keyframes lglb-in {
	from {
		opacity: 0;
		transform: scale(0.94);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

.lglb__img--enter {
	animation: lglb-in 0.3s var(--lglb-ease) both;
}

/* -------------------------------------------------------------------------
   Légende
   ------------------------------------------------------------------------- */
.lglb__caption {
	max-width: min(900px, 100%);
	margin-top: 14px;
	padding: 10px 16px;
	text-align: center;
	font-size: 15px;
	color: var(--lglb-text);
	background: linear-gradient(180deg, rgba(46, 31, 73, 0.55), rgba(19, 15, 31, 0.75));
	border: 1px solid rgba(111, 195, 247, 0.22);
	border-radius: 8px;
	box-sizing: border-box;
}

.lglb__caption:empty {
	display: none;
}

/* -------------------------------------------------------------------------
   Boutons — tous au minimum 48x48
   ------------------------------------------------------------------------- */
.lglb__btn {
	position: absolute;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--lglb-btn-size);
	height: var(--lglb-btn-size);
	padding: 0;
	margin: 0;
	border: 1px solid rgba(111, 195, 247, 0.45);
	border-radius: 50%;
	background: rgba(19, 15, 31, 0.82);
	color: var(--lglb-cyan);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background 0.18s var(--lglb-ease), color 0.18s var(--lglb-ease),
		border-color 0.18s var(--lglb-ease), transform 0.18s var(--lglb-ease),
		opacity 0.18s var(--lglb-ease);
	-webkit-tap-highlight-color: transparent;
}

.lglb__btn svg {
	width: 24px;
	height: 24px;
	display: block;
	pointer-events: none;
}

.lglb__btn:hover,
.lglb__btn:focus-visible {
	background: var(--lglb-violet);
	color: var(--lglb-cyan-bright);
	border-color: var(--lglb-cyan-bright);
	transform: scale(1.06);
}

.lglb__btn:focus-visible {
	outline: 3px solid var(--lglb-cyan-bright);
	outline-offset: 3px;
}

.lglb__btn:active {
	transform: scale(0.94);
}

.lglb__btn[hidden] {
	display: none;
}

/* Fermeture : rouge LargeGamer au survol, impossible à rater. */
.lglb__close {
	top: max(12px, env(safe-area-inset-top));
	right: max(12px, env(safe-area-inset-right));
	width: calc(var(--lglb-btn-size) + 4px);
	height: calc(var(--lglb-btn-size) + 4px);
}

.lglb__close svg {
	width: 26px;
	height: 26px;
}

.lglb__close:hover,
.lglb__close:focus-visible {
	background: var(--lglb-red);
	color: #fff;
	border-color: #fff;
}

/* Flèches de navigation */
.lglb__prev,
.lglb__next {
	top: 50%;
	transform: translateY(-50%);
	width: calc(var(--lglb-btn-size) + 8px);
	height: calc(var(--lglb-btn-size) + 8px);
}

.lglb__prev {
	left: max(12px, env(safe-area-inset-left));
}

.lglb__next {
	right: max(12px, env(safe-area-inset-right));
}

.lglb__prev:hover,
.lglb__prev:focus-visible,
.lglb__next:hover,
.lglb__next:focus-visible {
	transform: translateY(-50%) scale(1.06);
}

.lglb__prev:active,
.lglb__next:active {
	transform: translateY(-50%) scale(0.94);
}

/* Compteur "2 sur 6" */
.lglb__counter {
	position: absolute;
	top: max(12px, env(safe-area-inset-top));
	left: max(12px, env(safe-area-inset-left));
	z-index: 3;
	height: var(--lglb-btn-size);
	display: flex;
	align-items: center;
	padding: 0 16px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--lglb-gold);
	background: rgba(19, 15, 31, 0.82);
	border: 1px solid rgba(232, 179, 56, 0.32);
	border-radius: 999px;
	box-sizing: border-box;
}

.lglb__counter[hidden] {
	display: none;
}

/* -------------------------------------------------------------------------
   Chargement et erreur
   ------------------------------------------------------------------------- */
.lglb__spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	width: 44px;
	height: 44px;
	margin: -22px 0 0 -22px;
	border: 3px solid rgba(111, 195, 247, 0.22);
	border-top-color: var(--lglb-cyan);
	border-radius: 50%;
	animation: lglb-spin 0.8s linear infinite;
	pointer-events: none;
}

@keyframes lglb-spin {
	to {
		transform: rotate(360deg);
	}
}

.lglb__spinner[hidden] {
	display: none;
}

.lglb__error {
	max-width: 420px;
	padding: 22px 26px;
	text-align: center;
	font-size: 16px;
	color: var(--lglb-text);
	background: var(--lglb-surface);
	border: 1px solid var(--lglb-red);
	border-radius: var(--lglb-radius);
}

.lglb__error[hidden] {
	display: none;
}

/* Lecteurs d'écran uniquement */
.lglb__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* -------------------------------------------------------------------------
   Blocage du défilement de la page pendant l'ouverture
   ------------------------------------------------------------------------- */
html.lglb-open,
body.lglb-open {
	overflow: hidden;
	overscroll-behavior: none;
}

/* -------------------------------------------------------------------------
   Indice visuel sur les miniatures cliquables
   ------------------------------------------------------------------------- */
a[data-lglb-ready] {
	cursor: zoom-in;
}

/* -------------------------------------------------------------------------
   Mobile
   ------------------------------------------------------------------------- */
@media (max-width: 600px) {
	.lglb {
		--lglb-gap: 10px;
		--lglb-radius: 6px;
	}

	.lglb__stage {
		padding-left: 6px;
		padding-right: 6px;
	}

	.lglb__caption {
		font-size: 14px;
		padding: 8px 12px;
		margin-top: 10px;
	}

	/* Sur un écran étroit, les flèches latérales masquent l'image.
	   On les descend en bas, côte à côte, hors du champ visuel utile. */
	.lglb__prev,
	.lglb__next {
		top: auto;
		bottom: max(14px, env(safe-area-inset-bottom));
		transform: none;
	}

	.lglb__prev:hover,
	.lglb__prev:focus-visible,
	.lglb__next:hover,
	.lglb__next:focus-visible {
		transform: scale(1.06);
	}

	.lglb__prev:active,
	.lglb__next:active {
		transform: scale(0.94);
	}

	/* Les flèches passant en bas, on libère la place sous la légende. */
	.lglb--multi .lglb__stage {
		padding-bottom: calc(var(--lglb-btn-size) + 30px + env(safe-area-inset-bottom));
	}

	.lglb__counter {
		font-size: 14px;
		padding: 0 13px;
	}
}

/* Écran très bas (téléphone en paysage) : on allège la surcharge verticale. */
@media (max-height: 450px) {
	.lglb__caption {
		display: none;
	}

	.lglb__stage {
		padding-top: max(8px, env(safe-area-inset-top));
	}
}

/* -------------------------------------------------------------------------
   Accessibilité : animations réduites
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.lglb__img,
	.lglb__btn {
		transition: none;
	}

	.lglb__img--enter {
		animation: none;
	}

	.lglb__spinner {
		animation-duration: 2s;
	}
}

/* -------------------------------------------------------------------------
   Contraste élevé / mode forcé
   ------------------------------------------------------------------------- */
@media (forced-colors: active) {
	.lglb__btn {
		border: 2px solid ButtonText;
		background: ButtonFace;
		color: ButtonText;
	}

	.lglb__img {
		box-shadow: none;
		border: 1px solid CanvasText;
	}
}