/* OG Carrousel 3D — toutes les couleurs sont surchargeables via les variables ci-dessous. */
.ogc {
	--ogc-bg: #ffffff;
	--ogc-bg2: #f6f7fa;
	--ogc-fg: #151922;
	--ogc-muted: #5f6878;
	--ogc-accent: #f2b54a;
	--ogc-accent-text: #b56d00;
	--ogc-panel: #f7f8fa;
	--ogc-line: rgba(15, 23, 42, .1);
	--ogc-card-w: clamp(170px, 27vw, 310px);
	--ogc-card-h: calc(var(--ogc-card-w) * .525);
	--ogc-radius: 14px;
	--ogc-ease: cubic-bezier(.2, .8, .2, 1);
	--ogc-r: 0px;
	--ogc-rot: 0;

	position: relative;
	isolation: isolate;
	overflow: hidden;
	margin: 1rem 0;
	padding: clamp(.75rem, 2.5vw, 1.5rem) clamp(.75rem, 3vw, 2rem);
	border-radius: 22px;
	color: var(--ogc-fg);
	background:
		radial-gradient(120% 70% at 50% 0%, var(--ogc-bg2), transparent 70%),
		var(--ogc-bg);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
.ogc *, .ogc *::before, .ogc *::after { box-sizing: border-box; }
.ogc img { max-width: none; height: auto; display: block; }
.ogc h2, .ogc h3, .ogc p, .ogc figure, .ogc ul, .ogc pre { margin: 0; padding: 0; }
.ogc a { color: inherit; text-decoration: none; }

/* Halo lumineux qui suit la carte active */
.ogc::before {
	content: "";
	position: absolute;
	inset: -20% -10% auto;
	height: 70%;
	z-index: -1;
	background: radial-gradient(40% 50% at 50% 55%, color-mix(in srgb, var(--ogc-accent) 16%, transparent), transparent 70%);
	filter: blur(30px);
	animation: ogc-breathe 7s ease-in-out infinite;
	pointer-events: none;
}

/* ---------- En-tête ---------- */
.ogc-head { text-align: center; position: relative; z-index: 2; }
.ogc-kicker {
	font-size: .78rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ogc-accent-text);
}
.ogc-title {
	margin-top: .35rem !important;
	font-size: clamp(1.35rem, 3.2vw, 2.1rem);
	line-height: 1.05;
	font-weight: 700;
	color: var(--ogc-fg);
	letter-spacing: -.02em;
}
.ogc-title em { font-style: italic; font-weight: 400; color: var(--ogc-accent-text); }

.ogc.is-ready .ogc-kicker { animation: ogc-rise .8s var(--ogc-ease) both; }
.ogc.is-ready .ogc-title { animation: ogc-rise .9s .08s var(--ogc-ease) both; }

/* ---------- Scène 3D ---------- */
.ogc-stage {
	position: relative;
	height: calc(var(--ogc-card-h) * 1.6);
	perspective: calc(var(--ogc-card-w) * 2.3);
	perspective-origin: 50% 35%;
	touch-action: pan-y;
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
	outline: none;
}
.ogc-stage:focus-visible { box-shadow: inset 0 0 0 2px var(--ogc-accent); border-radius: 12px; }
.ogc.is-dragging .ogc-stage { cursor: grabbing; }

.ogc-hint {
	position: absolute;
	top: .1rem;
	left: 50%;
	transform: translateX(-50%);
	font-size: .72rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--ogc-muted);
	opacity: .8;
	transition: opacity .6s;
	pointer-events: none;
}
.ogc.has-interacted .ogc-hint { opacity: 0; }

.ogc-scene {
	position: absolute;
	left: 50%;
	top: 52%;
	transform-style: preserve-3d;
	animation: ogc-float 7s ease-in-out infinite;
}
.ogc.is-ready .ogc-scene { animation: ogc-enter 1.2s var(--ogc-ease) both, ogc-float 7s 1.2s ease-in-out infinite; }

.ogc-ring {
	transform-style: preserve-3d;
	transform: rotateX(-4deg) translateZ(calc(var(--ogc-r) * -1)) rotateY(calc(var(--ogc-rot) * -1deg));
	transition: transform .85s var(--ogc-ease);
}
.ogc.is-dragging .ogc-ring { transition: none; }

.ogc-card {
	position: absolute;
	left: calc(var(--ogc-card-w) / -2);
	top: calc(var(--ogc-card-h) / -2);
	width: var(--ogc-card-w);
	height: var(--ogc-card-h);
	border-radius: var(--ogc-radius);
	overflow: hidden;
	background: #e8eaee;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transform: rotateY(var(--a, 0deg)) translateZ(var(--ogc-r)) scale(var(--s, 1));
	filter: brightness(var(--b, 1)) saturate(var(--sat, 1));
	opacity: var(--o, 1);
	box-shadow: 0 24px 45px -22px rgba(15, 23, 42, .35), 0 0 0 1px rgba(15, 23, 42, .08);
	transition: transform .6s var(--ogc-ease), filter .45s, opacity .45s, box-shadow .45s;
	cursor: pointer;
}
.ogc.is-dragging .ogc-card { transition: filter .2s, opacity .2s; }
.ogc-card img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ogc-card.is-active {
	box-shadow:
		0 34px 60px -24px rgba(15, 23, 42, .45),
		0 0 0 1px color-mix(in srgb, var(--ogc-accent) 60%, transparent),
		0 0 50px -10px color-mix(in srgb, var(--ogc-accent) 45%, transparent);
}

/* Reflet qui balaye la carte quand elle devient active */
.ogc-glare {
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .38) 48%, rgba(255, 255, 255, .08) 54%, transparent 65%);
	background-size: 250% 100%;
	background-position: 130% 0;
	mix-blend-mode: screen;
	pointer-events: none;
}
.ogc-card.is-active .ogc-glare { animation: ogc-glare 1.1s .25s var(--ogc-ease) both; }

/* Entrée échelonnée des cartes */
.ogc.is-ready .ogc-card img { animation: ogc-card-in .9s calc(var(--i) * 70ms + .2s) var(--ogc-ease) both; }

.ogc-floor {
	position: absolute;
	left: 50%;
	bottom: 1%;
	width: min(90%, calc(var(--ogc-card-w) * 2.4));
	height: 60px;
	transform: translateX(-50%);
	background: radial-gradient(50% 50% at 50% 50%, rgba(15, 23, 42, .16), transparent 70%);
	filter: blur(6px);
	animation: ogc-shadow 7s ease-in-out infinite;
	pointer-events: none;
}

/* ---------- Navigation et légende ---------- */
.ogc-nav {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: .6rem;
	max-width: 640px;
	margin: 0 auto;
}
.ogc-btn {
	appearance: none;
	border: 1px solid var(--ogc-line);
	background: var(--ogc-panel);
	color: var(--ogc-fg);
	font: inherit;
	font-size: 1rem;
	line-height: 1;
	padding: .8rem 1rem;
	border-radius: 999px;
	cursor: pointer;
	transition: background .25s, border-color .25s, transform .25s var(--ogc-ease), color .25s;
}
.ogc-btn:hover { border-color: var(--ogc-accent-text); color: var(--ogc-accent-text); }
.ogc-btn:active { transform: scale(.94); }
.ogc-btn:focus-visible { outline: 2px solid var(--ogc-accent); outline-offset: 2px; }
.ogc-prev, .ogc-next { width: 2.4rem; height: 2.4rem; padding: 0; font-size: .9rem; }

.ogc-caption { text-align: center; display: grid; gap: .1rem; justify-items: center; min-height: 4.6rem; }
.ogc-count { font-size: .75rem; letter-spacing: .15em; color: var(--ogc-muted); font-variant-numeric: tabular-nums; }
.ogc-cap-title { font-size: 1rem; color: var(--ogc-fg); }
.ogc-cap-desc {
	color: var(--ogc-muted);
	font-size: .92rem;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ogc .ogc-link {
	display: inline-flex;
	align-items: center;
	gap: .3em;
	margin-top: .15rem;
	color: var(--ogc-accent-text);
	font-weight: 600;
	font-size: .92rem;
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	transition: background-size .35s var(--ogc-ease);
}
.ogc .ogc-link:hover { background-size: 100% 1px; }

.is-swap { animation: ogc-swap .55s var(--ogc-ease) both; }

/* ---------- Grille ---------- */
.ogc-all h3 {
	font-size: .78rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ogc-muted);
	font-weight: 600;
}
.ogc-all { margin-top: clamp(1rem, 3vw, 1.75rem); }
.ogc-grid {
	list-style: none;
	margin-top: .6rem !important;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr));
	gap: .6rem;
}
.ogc-grid li { margin: 0; opacity: 0; transform: translateY(18px) scale(.97); }
.ogc-all.is-in .ogc-grid li { animation: ogc-rise .7s calc(var(--i) * 55ms) var(--ogc-ease) both; }
.ogc-thumb {
	appearance: none;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ogc-fg);
	font: inherit;
	text-align: left;
	cursor: zoom-in;
}
.ogc-thumb img {
	width: 100%;
	aspect-ratio: 1200 / 630;
	object-fit: cover;
	border-radius: 10px;
	box-shadow: 0 0 0 1px var(--ogc-line);
	transition: transform .4s var(--ogc-ease), box-shadow .3s;
}
.ogc-thumb span {
	display: block;
	margin-top: .3rem;
	font-size: .75rem;
	color: var(--ogc-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color .25s;
}
.ogc-thumb:hover img { transform: translateY(-4px); box-shadow: 0 14px 28px -14px rgba(15, 23, 42, .4), 0 0 0 1px var(--ogc-line); }
.ogc-thumb:hover span, .ogc-thumb.is-active span { color: var(--ogc-fg); }
.ogc-thumb.is-active img { box-shadow: 0 0 0 2px var(--ogc-accent); }
.ogc-thumb:focus-visible { outline: 2px solid var(--ogc-accent); outline-offset: 4px; border-radius: 10px; }
.ogc-note { margin-top: .75rem !important; font-size: .78rem; color: var(--ogc-muted); text-align: center; }

/* ---------- Visionneuse ---------- */
.ogc-lightbox {
	width: min(92vw, 1100px);
	max-width: none;
	max-height: 92vh;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ogc-fg);
	overflow: visible;
}
.ogc-lightbox::backdrop { background: rgba(255, 255, 255, .88); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.ogc-lightbox[open] { animation: ogc-zoom .45s var(--ogc-ease) both; }
.ogc-lightbox[open]::backdrop { animation: ogc-fade .35s ease both; }
.ogc-lightbox.is-closing { animation: ogc-zoom-out .25s ease both; }
.ogc-lightbox.is-closing::backdrop { animation: ogc-fade .25s ease reverse both; }
.ogc-lb-img {
	width: 100%;
	max-height: 80vh;
	object-fit: contain;
	border-radius: 14px;
	box-shadow: 0 30px 80px -25px rgba(15, 23, 42, .5), 0 0 0 1px rgba(15, 23, 42, .08);
}
.ogc-lb-actions { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; margin-top: 1rem; }
.ogc .ogc-lb-actions .ogc-link { color: var(--ogc-fg); }
.ogc .ogc-lb-actions .ogc-link:first-child { color: var(--ogc-accent-text); }
.ogc-close {
	position: absolute;
	top: -.75rem;
	right: -.75rem;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid var(--ogc-line);
	border-radius: 50%;
	background: #fff;
	color: var(--ogc-fg);
	box-shadow: 0 6px 16px -6px rgba(15, 23, 42, .3);
	font-size: 1rem;
	cursor: pointer;
	z-index: 2;
	transition: transform .3s var(--ogc-ease), background .25s;
}
.ogc-close:hover { transform: rotate(90deg); background: var(--ogc-fg); color: #fff; }

/* ---------- Animations ---------- */
@keyframes ogc-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes ogc-shadow { 0%, 100% { opacity: 1; scale: 1; } 50% { opacity: .7; scale: .92; } }
@keyframes ogc-breathe { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@keyframes ogc-enter { from { opacity: 0; transform: scale(.7) rotateX(18deg); } to { opacity: 1; transform: none; } }
@keyframes ogc-card-in { from { opacity: 0; filter: blur(10px); } to { opacity: 1; filter: none; } }
@keyframes ogc-glare { from { background-position: 130% 0; } to { background-position: -30% 0; } }
@keyframes ogc-rise { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes ogc-swap { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes ogc-zoom { from { opacity: 0; transform: scale(.9) translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ogc-zoom-out { to { opacity: 0; transform: scale(.95); } }
@keyframes ogc-fade { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 600px) {
	.ogc { --ogc-card-w: 62vw; border-radius: 16px; }
	.ogc-stage { height: calc(var(--ogc-card-h) * 1.8); }
	.ogc-grid { grid-template-columns: repeat(3, 1fr); }
	.ogc-close { right: 0; top: -3rem; }
}

@media (prefers-reduced-motion: reduce) {
	.ogc *, .ogc *::before, .ogc *::after, .ogc::before, .ogc-lightbox, .ogc-lightbox::backdrop {
		animation: none !important;
		transition-duration: .01ms !important;
	}
	.ogc-grid li { opacity: 1; transform: none; }
}