/* TJ Cover Gallery — mosaïque + visionneuse */

.tjcg-wrap {
	container-type: inline-size;
	margin: 0 0 1.5em;
	/* côté d'une vignette en mode défilement : largeur / colonnes visibles */
	--tjcg-cell: calc((100cqw - (var(--tjcg-cols, 8) - 1) * var(--tjcg-gap, 0px)) / var(--tjcg-cols, 8));
}
.tjcg-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(var(--tjcg-size, 180px), 30%), 1fr));
	gap: var(--tjcg-gap, 0);
	margin: 0;
	padding: 0;
	line-height: 0;
}

/* Ascenseur vertical : N colonnes, hauteur = N lignes visibles */
.tjcg-scroll-vertical .tjcg-scroller {
	max-height: calc(var(--tjcg-cell) * var(--tjcg-rows, 3) + (var(--tjcg-rows, 3) - 1) * var(--tjcg-gap, 0px));
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.tjcg-scroll-vertical .tjcg-grid { grid-template-columns: repeat(var(--tjcg-cols, 8), 1fr); }

/* Ascenseur horizontal : N colonnes visibles sur la largeur, L lignes */
.tjcg-scroll-horizontal .tjcg-scroller {
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	padding-bottom: 6px;
}
.tjcg-scroll-horizontal .tjcg-grid {
	grid-auto-flow: column;
	grid-template-columns: none;
	grid-template-rows: repeat(var(--tjcg-rows, 3), var(--tjcg-cell));
	grid-auto-columns: var(--tjcg-cell);
	width: max-content;
}
.tjcg-scroll-horizontal .tjcg-item { scroll-snap-align: start; }

.tjcg-scroller { scrollbar-width: thin; scrollbar-color: rgba(128,128,128,.6) transparent; }
.tjcg-scroller::-webkit-scrollbar { width: 8px; height: 8px; }
.tjcg-scroller::-webkit-scrollbar-thumb { background: rgba(128,128,128,.55); border-radius: 8px; }
.tjcg-scroller::-webkit-scrollbar-track { background: transparent; }
.tjcg-scroller:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.tjcg-item {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #1a1a1a;
	cursor: zoom-in;
	outline-offset: -3px;
	text-decoration: none !important;
	box-shadow: none !important;
	border: 0 !important;
	container-type: inline-size;
}
.tjcg-item[hidden] { display: none !important; }
.tjcg-item .tjcg-img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	margin: 0 !important;
	border-radius: 0 !important;
	transition: transform .45s cubic-bezier(.2,.7,.2,1), filter .3s;
}
.tjcg-item:hover .tjcg-img,
.tjcg-item:focus-visible .tjcg-img { transform: scale(1.05); }

.tjcg-cap {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: 28px 10px 9px;
	font: 600 12px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif;
	letter-spacing: .01em;
	color: #fff;
	background: linear-gradient(transparent, rgba(0,0,0,.78));
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .25s, transform .25s;
	pointer-events: none;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tjcg-item:hover .tjcg-cap,
.tjcg-item:focus-visible .tjcg-cap { opacity: 1; transform: none; }
@media (hover: none) { .tjcg-cap { display: none; } }
@container (max-width: 99px) { .tjcg-cap { display: none; } } /* trop petit pour un titre */

/* ---------- Animation « en direct » ---------- */

.tjcg-grid { --tjcg-adur: .38s; }
.tjcg-out-fade { animation: tjcg-fade-out var(--tjcg-adur) ease-in forwards; }
.tjcg-in-fade  { animation: tjcg-fade-in  var(--tjcg-adur) ease-out; }
@keyframes tjcg-fade-out { to { opacity: 0; } }
@keyframes tjcg-fade-in  { from { opacity: 0; } }

.tjcg-out-flip { animation: tjcg-flip-out var(--tjcg-adur) ease-in forwards; }
.tjcg-in-flip  { animation: tjcg-flip-in  var(--tjcg-adur) ease-out; }
@keyframes tjcg-flip-out { from { transform: perspective(600px) rotateY(0); } to { transform: perspective(600px) rotateY(90deg); } }
@keyframes tjcg-flip-in  { from { transform: perspective(600px) rotateY(-90deg); } to { transform: perspective(600px) rotateY(0); } }

.tjcg-out-zoom { animation: tjcg-zoom-out var(--tjcg-adur) ease-in forwards; }
.tjcg-in-zoom  { animation: tjcg-zoom-in  var(--tjcg-adur) ease-out; }
@keyframes tjcg-zoom-out { to { transform: scale(.6); opacity: 0; } }
@keyframes tjcg-zoom-in  { from { transform: scale(1.3); opacity: 0; } }

.tjcg-out-wipe { animation: tjcg-wipe-out var(--tjcg-adur) ease-in forwards; }
.tjcg-in-wipe  { animation: tjcg-wipe-in  var(--tjcg-adur) ease-out; }
@keyframes tjcg-wipe-out { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 100%); } }
@keyframes tjcg-wipe-in  { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------- Visionneuse ---------- */

html.tjcg-lock { overflow: hidden; }

.tjcg-lb {
	position: fixed; inset: 0; z-index: 999999;
	display: flex; align-items: center; justify-content: center;
	background: var(--tjcg-lb-bg, rgba(11,11,12,.94));
	color: #f2f2f2;
	font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
	opacity: 0;
	transition: opacity .22s ease;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.tjcg-lb[hidden] { display: none; }
.tjcg-lb.is-open { opacity: 1; }

.tjcg-lb-inner {
	display: flex; align-items: center; gap: 40px;
	max-width: calc(100vw - 140px);
	transform: scale(.97);
	transition: transform .25s ease;
}
.tjcg-lb.is-open .tjcg-lb-inner { transform: none; }

.tjcg-lb-figure { margin: 0; position: relative; line-height: 0; flex: 0 1 auto; }
.tjcg-lb-img {
	display: block;
	max-width: min(86vh, calc(100vw - 520px));
	max-height: 86vh;
	width: auto; height: auto;
	box-shadow: 0 30px 80px rgba(0,0,0,.55);
	transition: opacity .2s ease;
	user-select: none; -webkit-user-drag: none;
}
.tjcg-lb-img.is-loading { opacity: 0; }

.tjcg-lb-info { flex: 0 0 300px; max-width: 300px; }
.tjcg-lb-info[hidden] { display: none; }
.tjcg-lb-info.is-empty { display: none; }
.tjcg-lb-title { margin: 0 0 .6em; font-size: 22px; line-height: 1.25; font-weight: 700; color: #fff; letter-spacing: -.01em; }
.tjcg-lb-credit { margin: 0 0 1.4em; color: rgba(255,255,255,.75); font-size: 14px; }
.tjcg-lb-credit a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.tjcg-lb-credit:empty, .tjcg-lb-title:empty { display: none; }

.tjcg-lb-link {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 10px 18px;
	border-radius: 999px;
	background: var(--tjcg-accent, #fff);
	color: var(--tjcg-accent-ink, #111) !important;
	font-weight: 600; font-size: 14px; line-height: 1.2;
	text-decoration: none !important;
	transition: transform .15s, filter .15s;
}
.tjcg-lb-link:hover { transform: translateY(-1px); filter: brightness(1.08); }
.tjcg-lb-link[hidden] { display: none; }
.tjcg-lb-link svg { width: 14px; height: 14px; }

.tjcg-lb-btn {
	position: absolute;
	display: flex; align-items: center; justify-content: center;
	width: 48px; height: 48px; padding: 0;
	border: 0; border-radius: 50%;
	background: rgba(255,255,255,.08);
	color: #fff;
	cursor: pointer;
	transition: background .15s;
}
.tjcg-lb-btn:hover, .tjcg-lb-btn:focus-visible { background: rgba(255,255,255,.2); }
.tjcg-lb-btn:focus-visible, .tjcg-lb-link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.tjcg-lb-btn svg { width: 22px; height: 22px; }
.tjcg-lb-close { top: 18px; right: 18px; }
.tjcg-lb-prev  { left: 18px;  top: 50%; margin-top: -24px; }
.tjcg-lb-next  { right: 18px; top: 50%; margin-top: -24px; }
.tjcg-lb-btn[hidden] { display: none; }

.tjcg-lb-count {
	position: absolute; top: 30px; left: 26px;
	font-size: 12px; letter-spacing: .08em;
	color: rgba(255,255,255,.55);
	font-variant-numeric: tabular-nums;
}

/* Écrans étroits ou portrait : info sous l'image */
@media (max-width: 900px), (max-aspect-ratio: 1/1) {
	.tjcg-lb-inner {
		flex-direction: column; gap: 18px;
		max-width: 92vw;
		max-height: 100vh;
		padding: 64px 0 24px;
		overflow-y: auto;
	}
	.tjcg-lb-img { max-width: 92vw; max-height: calc(100vh - 230px); }
	.tjcg-lb-info { flex: none; max-width: 92vw; width: 100%; text-align: center; }
	.tjcg-lb-title { font-size: 18px; }
	.tjcg-lb-prev, .tjcg-lb-next { top: auto; bottom: 18px; margin-top: 0; }
	.tjcg-lb-prev { left: 12px; }
	.tjcg-lb-next { right: 12px; }
}
@media (max-width: 600px) {
	.tjcg-lb-prev, .tjcg-lb-next { display: none; } /* balayage tactile */
	.tjcg-lb-close { top: 10px; right: 10px; }
	.tjcg-lb-count { top: 24px; left: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.tjcg-item .tjcg-img, .tjcg-lb, .tjcg-lb-inner, .tjcg-lb-img, .tjcg-cap { transition: none; }
	[class*="tjcg-out-"], [class*="tjcg-in-"] { animation-duration: .01s !important; }
}