/* ═══════════════════════════════════════════════════════════════
   AtomicPunch Studio — studio.css
   Totalement séparé de style.css — thème dark/orange
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Rajdhani:wght@400;600;700&display=swap');

:root {
	--so-bg: #0A0B0F;
	--so-bg2: #10121A;
	--so-bg3: #171923;
	--so-orange: #F97316;
	--so-orange-dim: #C05A0A;
	--so-orange-pale: rgba(249,115,22,0.10);
	--so-orange-glow: 0 0 50px rgba(249,115,22,0.30);
	--so-purple: #A855F7;
	--so-purple-pale: rgba(168,85,247,0.10);
	--so-green: #22C55E;
	--so-white: #F1F5F9;
	--so-grey: #8892A4;
	--so-border: rgba(255,255,255,0.06);
	--so-font-d: 'Bebas Neue', 'Impact', sans-serif;
	--so-font-b: 'Rajdhani', 'Arial', sans-serif;
}

/* ── BASE PAGE STUDIO ── */
.studio-page {
	background: var(--so-bg);
	color: var(--so-white);
	font-family: var(--so-font-b);
	font-size: 16px;
	line-height: 1.6;
	margin: 0;
	overflow-x: hidden;
}

	.studio-page * {
		box-sizing: border-box;
	}

	.studio-page a {
		text-decoration: none;
		transition: color .2s;
	}

/* ── HEADER ── */
.studio-header {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 1000;
	background: rgba(10,11,15,0.88);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--so-border);
}

.studio-header-inner {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 0 5%;
	height: 60px;
	max-width: 1300px;
	margin: 0 auto;
}

.studio-back-link {
	color: var(--so-grey);
	font-size: 0.82em;
	font-weight: 600;
	font-family: var(--so-font-b);
	white-space: nowrap;
}

	.studio-back-link:hover {
		color: var(--so-white);
	}

.studio-header-logo {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--so-font-d);
	font-size: 1.3em;
	letter-spacing: 1px;
	color: var(--so-white);
	margin-right: auto;
}

.studio-bolt {
	color: var(--so-orange);
}

.studio-nav {
	display: flex;
	gap: 24px;
}

	.studio-nav a {
		color: var(--so-grey);
		font-size: 0.88em;
		font-weight: 600;
		font-family: var(--so-font-b);
	}

		.studio-nav a:hover {
			color: var(--so-orange);
		}

/* ── HERO ── */
.studio-hero {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	padding: 90px 5% 60px;
}

.sh-grid {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(249,115,22,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(249,115,22,.035) 1px, transparent 1px);
	background-size: 55px 55px;
	animation: studioGridMove 25s linear infinite;
}

@keyframes studioGridMove {
	from {
		background-position: 0 0;
	}

	to {
		background-position: 55px 55px;
	}
}

.sh-glow-orange, .sh-glow-purple {
	position: absolute;
	border-radius: 50%;
	filter: blur(100px);
	pointer-events: none;
}

.sh-glow-orange {
	width: 500px;
	height: 500px;
	background: radial-gradient(circle, rgba(249,115,22,.22) 0%, transparent 70%);
	top: -150px;
	right: -80px;
	animation: studioFloat 9s ease-in-out infinite alternate;
}

.sh-glow-purple {
	width: 350px;
	height: 350px;
	background: radial-gradient(circle, rgba(168,85,247,.16) 0%, transparent 70%);
	bottom: 0;
	left: -80px;
	animation: studioFloat 11s ease-in-out infinite alternate-reverse;
}

@keyframes studioFloat {
	from {
		transform: translate(0,0);
	}

	to {
		transform: translate(25px,35px);
	}
}

.sh-content {
	position: relative;
	z-index: 2;
	text-align: center;
	max-width: 740px;
}

.sh-eyebrow {
	display: inline-block;
	background: var(--so-orange-pale);
	border: 1px solid rgba(249,115,22,.28);
	color: var(--so-orange);
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	padding: 5px 18px;
	border-radius: 100px;
	margin-bottom: 24px;
	font-family: var(--so-font-b);
}

.sh-title {
	display: flex;
	flex-direction: column;
	line-height: 0.88;
	margin: 0 0 24px;
}

.sh-t1 {
	font-family: var(--so-font-d);
	font-size: clamp(3.5em, 11vw, 7em);
	color: var(--so-white);
	letter-spacing: 8px;
}

.sh-t2 {
	font-family: var(--so-font-d);
	font-size: clamp(4.5em, 14vw, 9.5em);
	color: var(--so-orange);
	letter-spacing: 4px;
	text-shadow: var(--so-orange-glow);
}

.sh-t3 {
	font-family: var(--so-font-d);
	font-size: clamp(1.8em, 4.5vw, 3em);
	color: var(--so-grey);
	letter-spacing: 13px;
}

.sh-desc {
	font-size: 1.05em;
	color: var(--so-grey);
	line-height: 1.7;
	max-width: 520px;
	margin: 0 auto 36px;
}

.sh-actions {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 48px;
}

.sh-stats {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
}

.sh-stat {
	text-align: center;
}

.sh-stat-n {
	display: inline-block;
	font-family: var(--so-font-d);
	font-size: 2em;
	color: var(--so-orange);
	letter-spacing: 1px;
}

.sh-stat-l {
	display: block;
	font-size: 0.72em;
	color: var(--so-grey);
	text-transform: uppercase;
	letter-spacing: 1px;
	font-family: var(--so-font-b);
}

.sh-stat-sep {
	width: 1px;
	height: 36px;
	background: var(--so-border);
}

.sh-scroll-hint {
	position: absolute;
	bottom: 28px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	color: var(--so-grey);
	font-size: 0.68em;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-family: var(--so-font-b);
	z-index: 2;
}

.sh-scroll-line {
	width: 1px;
	height: 36px;
	background: linear-gradient(to bottom, var(--so-orange), transparent);
	animation: scrollPulseStudio 2s ease-in-out infinite;
}

@keyframes scrollPulseStudio {
	0%,100% {
		opacity: .35;
	}

	50% {
		opacity: 1;
	}
}

/* ── BOUTONS ── */
.sbtn-dl {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--so-orange);
	color: #fff;
	font-weight: 700;
	font-size: 1em;
	padding: 13px 26px;
	border-radius: 7px;
	font-family: var(--so-font-b);
	transition: all .22s;
	position: relative;
	overflow: hidden;
	white-space: nowrap;
}

	.sbtn-dl::before {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(135deg, rgba(255,255,255,.12) 0%, transparent 55%);
		pointer-events: none;
	}

	.sbtn-dl:hover {
		background: var(--so-orange-dim);
		transform: translateY(-2px);
		box-shadow: var(--so-orange-glow);
		color: #fff;
	}

.sbtn-sm {
	font-size: 0.88em;
	padding: 10px 18px;
}

.sbtn-big {
	font-size: 1.1em;
	padding: 16px 32px;
	flex-direction: column;
	gap: 3px;
	border-radius: 9px;
}

.sbtn-sub {
	font-size: 0.7em;
	font-weight: 400;
	opacity: .72;
}

.sbtn-ghost {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	color: var(--so-white);
	font-weight: 600;
	font-size: 1em;
	padding: 13px 22px;
	border-radius: 7px;
	border: 1px solid var(--so-border);
	font-family: var(--so-font-b);
	transition: all .22s;
	white-space: nowrap;
}

	.sbtn-ghost:hover {
		border-color: var(--so-orange);
		color: var(--so-orange);
		background: var(--so-orange-pale);
	}

.sbtn-steam {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #1b2838;
	color: #c7d5e0;
	font-weight: 600;
	font-size: 0.88em;
	padding: 10px 18px;
	border-radius: 7px;
	border: 1px solid #2a475e;
	font-family: var(--so-font-b);
	transition: all .22s;
	white-space: nowrap;
}

	.sbtn-steam:hover {
		background: #2a475e;
		color: #fff;
	}

.sbtn-discord {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #5865F2;
	color: #fff;
	font-weight: 600;
	font-size: 0.88em;
	padding: 10px 18px;
	border-radius: 7px;
	font-family: var(--so-font-b);
	transition: all .22s;
	white-space: nowrap;
}

	.sbtn-discord:hover {
		background: #4752c4;
		color: #fff;
	}

/* ── SECTIONS ── */
.studio-section {
	max-width: 1200px;
	margin: 0 auto;
	padding: 90px 5%;
}

.studio-section-head {
	text-align: center;
	margin-bottom: 60px;
}

.studio-tag {
	display: inline-block;
	background: var(--so-orange-pale);
	border: 1px solid rgba(249,115,22,.22);
	color: var(--so-orange);
	font-size: 0.7em;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	padding: 4px 15px;
	border-radius: 100px;
	margin-bottom: 12px;
	font-family: var(--so-font-b);
}

.studio-section-title {
	font-family: var(--so-font-d);
	font-size: clamp(2em, 5vw, 3.2em);
	color: var(--so-white);
	letter-spacing: 3px;
	margin: 0;
}

/* ── GAME CARDS ── */
.sgame-card {
	display: grid;
	grid-template-columns: 1fr 1.3fr;
	gap: 50px;
	align-items: center;
	margin-bottom: 80px;
	padding: 40px;
	background: var(--so-bg2);
	border: 1px solid var(--so-border);
	border-radius: 14px;
	transition: border-color .3s;
}

	.sgame-card:hover {
		border-color: rgba(249,115,22,.25);
	}

.sgame-reverse {
	direction: rtl;
}

	.sgame-reverse > * {
		direction: ltr;
	}

.sgame-wip {
	border-color: rgba(168,85,247,.15);
}

	.sgame-wip:hover {
		border-color: rgba(168,85,247,.35);
	}

.sgame-cover-wrap {
	position: relative;
	border-radius: 10px;
	overflow: hidden;
}

.sgame-cover {
	width: 100%;
	aspect-ratio: 3/4;
	object-fit: cover;
	display: block;
	border-radius: 10px;
	transition: transform .5s ease;
}

.sgame-card:hover .sgame-cover {
	transform: scale(1.04);
}

.sgame-cover-placeholder {
	aspect-ratio: 3/4;
	background: linear-gradient(135deg, #1a1f2e 0%, #0d1117 100%);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--so-grey);
	font-family: var(--so-font-d);
	font-size: 1.5em;
	letter-spacing: 2px;
}

	.sgame-cover-placeholder::after {
		content: 'IMAGE À VENIR';
	}

.sgame-cover-shine {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(255,255,255,.06) 0%, transparent 50%);
	pointer-events: none;
}

.sgame-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	padding: 4px 12px;
	border-radius: 100px;
	font-size: 0.74em;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-family: var(--so-font-b);
}

	.sgame-badge.available {
		background: rgba(34,197,94,.18);
		border: 1px solid rgba(34,197,94,.45);
		color: #4ade80;
	}

	.sgame-badge.wip {
		background: rgba(168,85,247,.18);
		border: 1px solid rgba(168,85,247,.45);
		color: #d8b4fe;
	}

.sgame-tags {
	display: flex;
	gap: 7px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.stag {
	padding: 3px 11px;
	border-radius: 100px;
	font-size: 0.7em;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-family: var(--so-font-b);
}

	.stag.orange {
		background: var(--so-orange-pale);
		border: 1px solid rgba(249,115,22,.22);
		color: var(--so-orange);
	}

	.stag.purple {
		background: var(--so-purple-pale);
		border: 1px solid rgba(168,85,247,.22);
		color: #d8b4fe;
	}

.sgame-title {
	font-family: var(--so-font-d);
	font-size: clamp(2.2em,4.5vw,3.8em);
	color: var(--so-white);
	letter-spacing: 3px;
	margin: 0 0 14px;
	line-height: 1;
}

.sgame-title-purple {
	color: #c084fc;
}

.sgame-desc {
	color: var(--so-grey);
	font-size: 0.98em;
	line-height: 1.72;
	margin-bottom: 20px;
}

.sgame-feats {
	list-style: none;
	padding: 0;
	margin: 0 0 28px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

	.sgame-feats li {
		font-size: 0.9em;
		color: var(--so-white);
	}

.sgame-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
}

.sgame-wip-bar {
	margin-bottom: 28px;
}

.sgame-wip-label {
	font-size: 0.78em;
	color: var(--so-grey);
	margin-bottom: 7px;
	font-family: var(--so-font-b);
}

.sgame-wip-track {
	height: 4px;
	background: rgba(255,255,255,.07);
	border-radius: 2px;
	overflow: hidden;
}

.sgame-wip-fill {
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--so-purple), #c084fc);
	border-radius: 2px;
	transition: width 1.5s ease;
}

/* ── LAUNCHER SECTION ── */
.studio-launcher-section {
	background: var(--so-bg2);
	position: relative;
	overflow: hidden;
	padding: 90px 5%;
}

.slauncher-bg-glow {
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 15% 50%, rgba(249,115,22,.08) 0%, transparent 55%), radial-gradient(circle at 85% 50%, rgba(168,85,247,.06) 0%, transparent 55%);
	pointer-events: none;
}

.slauncher-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
	position: relative;
}

.slauncher-title {
	font-family: var(--so-font-d);
	font-size: clamp(2em, 4vw, 3em);
	color: var(--so-white);
	letter-spacing: 3px;
	margin: 12px 0 18px;
	line-height: 1.05;
}

.slauncher-desc {
	color: var(--so-grey);
	font-size: 0.98em;
	line-height: 1.7;
	margin-bottom: 32px;
}

.slauncher-feats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	margin-bottom: 36px;
}

.slauncher-feat {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.slauncher-feat-icon {
	font-size: 1.2em;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--so-orange-pale);
	border: 1px solid rgba(249,115,22,.2);
	border-radius: 7px;
	flex-shrink: 0;
}

.slauncher-feat strong {
	display: block;
	font-size: 0.88em;
	color: var(--so-white);
	margin-bottom: 1px;
	font-family: var(--so-font-b);
}

.slauncher-feat span {
	font-size: 0.78em;
	color: var(--so-grey);
	font-family: var(--so-font-b);
}

.slauncher-dl-block {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	margin-bottom: 18px;
}

.slauncher-specs {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
}

	.slauncher-specs span {
		font-size: 0.76em;
		color: var(--so-grey);
		display: flex;
		align-items: center;
		gap: 5px;
		font-family: var(--so-font-b);
	}

.slauncher-dotnet-note {
	font-size: 0.78em;
	color: var(--so-grey);
	background: rgba(255,255,255,.03);
	border: 1px solid var(--so-border);
	padding: 10px 14px;
	border-radius: 7px;
	line-height: 1.6;
	font-family: var(--so-font-b);
}

	.slauncher-dotnet-note a {
		color: var(--so-orange);
		text-decoration: underline;
	}

/* Mockup */
.slauncher-right {
	display: flex;
	justify-content: center;
}

.slauncher-mockup {
	width: 100%;
	max-width: 400px;
	background: #0D0E14;
	border-radius: 11px;
	border: 1px solid rgba(255,255,255,.09);
	box-shadow: 0 40px 70px rgba(0,0,0,.55), var(--so-orange-glow);
	overflow: hidden;
}

.slm-titlebar {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 9px 13px;
	background: #17181F;
	border-bottom: 1px solid var(--so-border);
}

.slm-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
}

	.slm-dot.red {
		background: #FF5F57;
	}

	.slm-dot.yellow {
		background: #FEBC2E;
	}

	.slm-dot.green {
		background: #28C840;
	}

.slm-title {
	font-size: 0.68em;
	color: var(--so-grey);
	margin-left: 7px;
	font-family: var(--so-font-d);
	letter-spacing: 1px;
}

.slm-body {
	display: flex;
	height: 230px;
}

.slm-sidebar {
	width: 105px;
	background: #fff;
	border-right: 1px solid #E2E8F0;
	padding: 12px 7px;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.slm-logo {
	font-size: 1.3em;
	text-align: center;
	margin-bottom: 10px;
	color: var(--so-orange);
}

.slm-navitem {
	font-size: 0.62em;
	color: #64748B;
	padding: 5px 9px;
	border-radius: 5px;
	font-weight: 600;
	font-family: 'Segoe UI', sans-serif;
}

	.slm-navitem.active {
		background: #FFF7ED;
		color: #F97316;
	}

.slm-main {
	flex: 1;
	background: #F1F5F9;
	display: flex;
	flex-direction: column;
}

.slm-hero-img {
	height: 125px;
	background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
	display: flex;
	align-items: flex-end;
	padding: 10px 12px;
}

	.slm-hero-img span {
		font-family: var(--so-font-d);
		font-size: 1.1em;
		color: #fff;
		letter-spacing: 2px;
	}

.slm-card {
	flex: 1;
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.slm-status {
	font-size: 0.6em;
	background: #F0FDF4;
	color: #22C55E;
	border: 1px solid #BBF7D0;
	padding: 2px 7px;
	border-radius: 100px;
	width: fit-content;
	font-weight: 700;
	font-family: 'Segoe UI', sans-serif;
}

.slm-playbtn {
	background: #F97316;
	color: #fff;
	font-size: 0.65em;
	font-weight: 700;
	padding: 7px 12px;
	border-radius: 5px;
	width: fit-content;
	font-family: 'Segoe UI', sans-serif;
}

/* ── ABOUT ── */
.studio-about-section {
	max-width: 1200px;
	margin: 0 auto;
	padding: 90px 5%;
}

.sabout-grid {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 60px;
	align-items: start;
}

.sabout-text p {
	color: var(--so-grey);
	line-height: 1.8;
	margin-bottom: 16px;
	font-size: 0.97em;
}

.sabout-text strong {
	color: var(--so-white);
}

.sabout-links {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 28px;
}

.sabout-socials h3 {
	font-family: var(--so-font-d);
	font-size: 1.4em;
	letter-spacing: 2px;
	color: var(--so-white);
	margin-bottom: 20px;
}

.sabout-social-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.ssocial-card {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 18px;
	background: var(--so-bg2);
	border: 1px solid var(--so-border);
	border-radius: 9px;
	color: var(--so-white);
	font-size: 0.88em;
	font-weight: 600;
	font-family: var(--so-font-b);
	transition: all .22s;
}

.ssocial-icon {
	font-size: 1.1em;
}

.ssocial-card:hover {
	border-color: var(--so-orange);
	background: var(--so-orange-pale);
	color: var(--so-white);
	transform: translateY(-2px);
}

/* ── FOOTER ── */
.studio-footer {
	background: var(--so-bg);
	border-top: 1px solid var(--so-border);
	padding: 40px 5%;
	text-align: center;
}

.studio-footer-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 900px;
	margin: 0 auto 20px;
	flex-wrap: wrap;
	gap: 20px;
	color: var(--so-grey);
	font-family: var(--so-font-b);
	font-size: 0.9em;
}

	.studio-footer-inner strong {
		color: var(--so-white);
	}

.studio-footer-nav {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
	justify-content: center;
}

	.studio-footer-nav a {
		color: var(--so-grey);
		font-size: 0.85em;
		font-family: var(--so-font-b);
	}

		.studio-footer-nav a:hover {
			color: var(--so-orange);
		}

.studio-footer-copy {
	color: #4a5568;
	font-size: 0.82em;
	font-family: var(--so-font-b);
}

/* ══════════════════════════════════════════════════════════
   SECTION PONT dans index.html
   ══════════════════════════════════════════════════════════ */
.studio-bridge {
	position: relative;
	padding: 90px 5%;
	background: linear-gradient(160deg, #0A0B0F 0%, #10121A 50%, #0A0B0F 100%);
	overflow: hidden;
	font-family: var(--so-font-b);
}

.studio-bridge-noise {
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
	pointer-events: none;
}

.studio-bridge-glow-left, .studio-bridge-glow-right {
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
	pointer-events: none;
}

.studio-bridge-glow-left {
	width: 400px;
	height: 400px;
	background: radial-gradient(circle, rgba(249,115,22,.12) 0%, transparent 70%);
	top: -100px;
	left: -100px;
}

.studio-bridge-glow-right {
	width: 300px;
	height: 300px;
	background: radial-gradient(circle, rgba(168,85,247,.1) 0%, transparent 70%);
	bottom: -50px;
	right: -50px;
}

.studio-bridge-inner {
	max-width: 1100px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 60px;
	align-items: center;
	position: relative;
	z-index: 1;
}

.studio-eyebrow {
	display: inline-block;
	background: rgba(249,115,22,.1);
	border: 1px solid rgba(249,115,22,.28);
	color: #F97316;
	font-size: 0.7em;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	padding: 4px 16px;
	border-radius: 100px;
	margin-bottom: 18px;
}

.studio-bridge-heading {
	font-family: var(--so-font-d);
	margin: 0 0 16px;
	line-height: 0.9;
}

.studio-heading-atomic {
	display: block;
	font-size: clamp(2.2em, 5vw, 4em);
	color: #F1F5F9;
	letter-spacing: 6px;
}

.studio-heading-punch {
	display: block;
	font-size: clamp(3em, 6.5vw, 5.5em);
	color: #F97316;
	letter-spacing: 3px;
	text-shadow: 0 0 40px rgba(249,115,22,.3);
}

.studio-heading-studio {
	display: block;
	font-size: clamp(1.3em, 2.8vw, 2.2em);
	letter-spacing: 10px;
}

.studio-bridge-desc {
	color: #8892A4;
	font-size: 0.98em;
	line-height: 1.7;
	margin-bottom: 28px;
	max-width: 480px;
}

.studio-bridge-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.studio-cta-primary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #F97316;
	color: #fff;
	font-weight: 700;
	font-size: 0.95em;
	padding: 12px 24px;
	border-radius: 7px;
	font-family: var(--so-font-b);
	transition: all .22s;
	white-space: nowrap;
}

	.studio-cta-primary:hover {
		background: #C05A0A;
		transform: translateY(-2px);
		box-shadow: 0 0 40px rgba(249,115,22,.35);
		color: #fff;
	}

.studio-cta-secondary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	color: #F1F5F9;
	font-weight: 600;
	font-size: 0.95em;
	padding: 12px 20px;
	border-radius: 7px;
	border: 1px solid rgba(255,255,255,.1);
	font-family: var(--so-font-b);
	transition: all .22s;
	white-space: nowrap;
}

	.studio-cta-secondary:hover {
		border-color: #F97316;
		color: #F97316;
		background: rgba(249,115,22,.08);
	}

/* Cards jeux dans la section pont */
.studio-bridge-right {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.studio-game-pill {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 20px;
	background: rgba(255,255,255,.04);
	border: 1px solid rgba(255,255,255,.07);
	border-radius: 10px;
	transition: all .22s;
	cursor: default;
}

	.studio-game-pill:hover {
		border-color: rgba(249,115,22,.3);
		background: rgba(249,115,22,.05);
	}

	.studio-game-pill.wip:hover {
		border-color: rgba(168,85,247,.3);
		background: rgba(168,85,247,.05);
	}

.studio-game-pill-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
}

	.studio-game-pill-dot.green {
		background: #22C55E;
		box-shadow: 0 0 6px rgba(34,197,94,.5);
	}

	.studio-game-pill-dot.purple {
		background: #A855F7;
		box-shadow: 0 0 6px rgba(168,85,247,.5);
	}

.studio-game-pill-info {
	flex: 1;
}

	.studio-game-pill-info strong {
		display: block;
		color: #F1F5F9;
		font-size: 0.92em;
		font-weight: 700;
	}

	.studio-game-pill-info span {
		font-size: 0.76em;
		color: #8892A4;
	}

.studio-game-pill-badge {
	font-size: 0.68em;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 3px 10px;
	border-radius: 100px;
	background: rgba(249,115,22,.18);
	border: 1px solid rgba(249,115,22,.35);
	color: #F97316;
	white-space: nowrap;
}

	.studio-game-pill-badge.wip-badge {
		background: rgba(168,85,247,.18);
		border-color: rgba(168,85,247,.35);
		color: #d8b4fe;
	}

/* Mini launcher card */
.studio-launcher-mini {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	background: rgba(249,115,22,.07);
	border: 1px solid rgba(249,115,22,.25);
	border-radius: 10px;
	margin-top: 4px;
}

.studio-launcher-mini-icon {
	font-size: 1.4em;
	color: #F97316;
}

.studio-launcher-mini-text {
	flex: 1;
}

	.studio-launcher-mini-text strong {
		display: block;
		color: #F1F5F9;
		font-size: 0.9em;
		font-weight: 700;
	}

	.studio-launcher-mini-text span {
		font-size: 0.74em;
		color: #8892A4;
	}

.studio-launcher-mini-dl {
	background: #F97316;
	color: #fff;
	font-size: 0.8em;
	font-weight: 700;
	padding: 7px 14px;
	border-radius: 6px;
	font-family: var(--so-font-b);
	transition: all .22s;
	white-space: nowrap;
}

	.studio-launcher-mini-dl:hover {
		background: #C05A0A;
		color: #fff;
	}

/* Nav pill dans le header original */
.nav-studio-pill {
	background: rgba(249,115,22,.15) !important;
	border: 1px solid rgba(249,115,22,.35) !important;
	color: #F97316 !important;
	padding: 5px 13px !important;
	border-radius: 100px !important;
	font-weight: 700 !important;
	transition: all .22s !important;
}

	.nav-studio-pill:hover {
		background: rgba(249,115,22,.25) !important;
		color: #F97316 !important;
		text-shadow: none !important;
	}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
	.sgame-card {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.sgame-reverse {
		direction: ltr;
	}

	.slauncher-inner {
		grid-template-columns: 1fr;
	}

	.slauncher-right {
		display: none;
	}

	.sabout-grid {
		grid-template-columns: 1fr;
	}

	.studio-bridge-inner {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.studio-bridge-right {
		display: none;
	}
	/* simplifié sur mobile */
}

@media (max-width: 768px) {
	.studio-nav {
		display: none;
	}

	.sh-t1 {
		font-size: clamp(2.8em, 14vw, 4.5em);
	}

	.sh-t2 {
		font-size: clamp(3.5em, 17vw, 6.5em);
	}

	.sh-t3 {
		font-size: clamp(1.4em, 5.5vw, 2em);
	}

	.slauncher-feats {
		grid-template-columns: 1fr;
	}

	.sgame-card {
		padding: 24px 18px;
	}

	.studio-footer-inner {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
}

/* ═══════════════════════════════════════════════
   AJOUTS v3 — Logo, DA app alignée, playtests
   ═══════════════════════════════════════════════ */

/* Logo dans le header */
.studio-header-logo-img {
	height: 44px;
	width: auto;
	object-fit: contain;
	filter: drop-shadow(0 0 6px rgba(249,115,22,.25));
	transition: filter .2s, transform .2s;
}

	.studio-header-logo-img:hover {
		transform: scale(1.05);
		filter: drop-shadow(0 0 12px rgba(249,115,22,.7));
	}

/* Logo hero — remplace le texte massif */
.sh-logo-hero {
	margin-bottom: 28px;
}

.sh-logo-img {
	height: clamp(120px, 22vw, 220px);
	width: auto;
	object-fit: contain;
	filter: drop-shadow(0 0 40px rgba(249,115,22,.45)) drop-shadow(0 0 80px rgba(249,115,22,.2));
	animation: logoFloat 5s ease-in-out infinite alternate;
}

@keyframes logoFloat {
	from {
		transform: translateY(0px);
		filter: drop-shadow(0 0 40px rgba(249,115,22,.45)) drop-shadow(0 0 80px rgba(249,115,22,.2));
	}

	to {
		transform: translateY(-8px);
		filter: drop-shadow(0 0 55px rgba(249,115,22,.65)) drop-shadow(0 0 100px rgba(249,115,22,.3));
	}
}

/* Supprime le titre text-based hero (remplacé par l'image) */
.sh-title {
	display: none;
}

/* Logo dans le launcher */
.slauncher-logo-wrap {
	margin: 12px 0 20px;
}

.slauncher-logo {
	height: 70px;
	width: auto;
	object-fit: contain;
	filter: drop-shadow(0 0 16px rgba(249,115,22,.4));
}

/* Logo dans le mockup sidebar */
.slm-logo-img {
	height: 36px;
	width: auto;
	object-fit: contain;
	display: block;
	margin: 0 auto 12px;
	filter: drop-shadow(0 0 4px rgba(249,115,22,.5));
}

/* Logo dans le footer */
.studio-footer-brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}

.studio-footer-logo-img {
	height: 48px;
	width: auto;
	object-fit: contain;
	filter: drop-shadow(0 0 8px rgba(249,115,22,.3));
	opacity: .9;
	transition: filter .2s, opacity .2s;
}

	.studio-footer-logo-img:hover {
		filter: drop-shadow(0 0 16px rgba(249,115,22,.6));
		opacity: 1;
	}

.studio-footer-brand small {
	font-size: 0.76em;
	color: var(--so-grey);
	font-family: var(--so-font-b);
}

/* ── Playtest banner dans la fiche Valheron ── */
.sgame-playtest-banner {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	background: linear-gradient(135deg, rgba(249,115,22,.12) 0%, rgba(249,115,22,.06) 100%);
	border: 1px solid rgba(249,115,22,.35);
	border-radius: 10px;
	padding: 16px 18px;
	margin-bottom: 18px;
	position: relative;
	overflow: hidden;
}

	.sgame-playtest-banner::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 2px;
		background: linear-gradient(90deg, var(--so-orange), transparent);
	}

.sgame-playtest-icon {
	font-size: 1.6em;
	line-height: 1;
	flex-shrink: 0;
}

.sgame-playtest-banner strong {
	display: block;
	color: var(--so-orange);
	font-size: 0.95em;
	font-weight: 700;
	margin-bottom: 3px;
	font-family: var(--so-font-b);
}

.sgame-playtest-banner span {
	font-size: 0.82em;
	color: var(--so-grey);
	font-family: var(--so-font-b);
	line-height: 1.5;
}

/* Badge "En développement" pour Valheron (orange, pas vert) */
.sgame-badge.dev-badge {
	background: rgba(249,115,22,.18);
	border: 1px solid rgba(249,115,22,.45);
	color: #fb923c;
}

/* Barre de progression orange pour Valheron */
.sgame-wip-fill.orange-fill {
	background: linear-gradient(90deg, var(--so-orange), #fb923c);
}

/* Mockup launcher — statut dev + bouton désactivé */
.slm-status.dev-status {
	background: rgba(249,115,22,.12);
	color: #fb923c;
	border: 1px solid rgba(249,115,22,.35);
}

.slm-playbtn.disabled-btn {
	background: rgba(255,255,255,.08);
	color: var(--so-grey);
	border: 1px dashed rgba(255,255,255,.15);
	cursor: default;
}

/* ── Alignement DA avec l'app — palette plus cohérente ── */
/* Section jeux : fond légèrement plus chaud */
.studio-section {
	background: var(--so-bg);
}

.sgame-card {
	background: var(--so-bg2);
	border-color: rgba(249,115,22,.08);
}

/* Section launcher : fond blanc cassé pour rappeler l'app WPF */
.studio-launcher-section {
	background: #F8FAFC;
}

.slauncher-bg-glow {
	display: none;
}
/* pas besoin sur fond clair */
.slauncher-title {
	color: #0F172A;
}

.slauncher-desc {
	color: #64748B;
}

.slauncher-feat strong {
	color: #0F172A;
}

.slauncher-feat span {
	color: #64748B;
}

.slauncher-specs span {
	color: #94A3B8;
}

.slauncher-dotnet-note {
	background: #F1F5F9;
	border-color: #E2E8F0;
	color: #64748B;
}

	.slauncher-dotnet-note a {
		color: var(--so-orange);
	}

.studio-tag {
	/* sur fond clair, on garde le tag orange bien visible */
	background: rgba(249,115,22,.1);
	border-color: rgba(249,115,22,.3);
}

/* Mockup adapté (fond clair autour) */
.slauncher-mockup {
	box-shadow: 0 30px 60px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.06), 0 0 40px rgba(249,115,22,.15);
}

/* Section about : fond légèrement plus foncé pour contraster avec launcher */
.studio-about-section {
	background: var(--so-bg2);
}

/* Hero : garde le fond sombre mais avec un effet de grain subtil inspiré de l'app */
.studio-hero {
	background: radial-gradient(ellipse at 60% 40%, #18120A 0%, #0A0B0F 60%);
}

/* Bouton "Wishlist sur Steam" — cohérence */
.sbtn-steam {
	font-size: 0.88em;
}

/* Responsive ajouts */
@media (max-width: 768px) {
	.sh-logo-img {
		height: clamp(90px, 40vw, 160px);
	}

	.slauncher-logo {
		height: 50px;
	}

	.studio-footer-logo-img {
		height: 36px;
	}
}

/* ── Logo dans la section pont (index.html) ── */
.studio-bridge-logo-wrap {
	margin-bottom: 18px;
}

.studio-bridge-logo-img {
	height: clamp(80px, 14vw, 140px);
	width: auto;
	object-fit: contain;
	filter: drop-shadow(0 0 30px rgba(249,115,22,.4));
	transition: filter .3s, transform .3s;
}

	.studio-bridge-logo-img:hover {
		filter: drop-shadow(0 0 45px rgba(249,115,22,.65));
		transform: scale(1.03);
	}

/* Pill Valheron "en dev" dans la section pont */
.studio-game-pill.dev-pill {
	border-color: rgba(249,115,22,.2);
}

	.studio-game-pill.dev-pill:hover {
		border-color: rgba(249,115,22,.4);
		background: rgba(249,115,22,.07);
	}

.studio-game-pill-dot.orange-dot {
	background: var(--so-orange);
	box-shadow: 0 0 6px rgba(249,115,22,.6);
	animation: devPulse 2s ease-in-out infinite;
}

@keyframes devPulse {
	0%,100% {
		opacity: 1;
	}

	50% {
		opacity: .5;
	}
}

.studio-game-pill-badge.dev-badge-pill {
	background: rgba(249,115,22,.18);
	border: 1px solid rgba(249,115,22,.4);
	color: #fb923c;
}

/* ═══════════════════════════════════════════════════════
   STUDIO — Animations & Visual Polish v2
   ═══════════════════════════════════════════════════════ */

/* ── Scrollbar orange ───────────────────────────────────── */
.studio-page ::-webkit-scrollbar { width: 7px; }
.studio-page ::-webkit-scrollbar-track { background: var(--so-bg); }
.studio-page ::-webkit-scrollbar-thumb { background: var(--so-orange); border-radius: 4px; }
.studio-page ::-webkit-scrollbar-thumb:hover { background: #fb923c; }

/* ── Header nav hover ───────────────────────────────────── */
.studio-nav a {
    position: relative;
    padding-bottom: 2px;
}
.studio-nav a::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0;
    width: 0; height: 2px;
    background: var(--so-orange);
    transition: width .25s ease;
    border-radius: 2px;
}
.studio-nav a:hover::after { width: 100%; }

/* ── Scroll-reveal base ─────────────────────────────────── */
.s-reveal {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity .7s ease, transform .7s ease;
}
.s-reveal.visible { opacity: 1 !important; transform: none !important; }

.s-reveal-left  { opacity: 0; transform: translateX(-36px); transition: opacity .7s ease, transform .7s ease; }
.s-reveal-right { opacity: 0; transform: translateX(36px);  transition: opacity .7s ease, transform .7s ease; }
.s-reveal-left.visible, .s-reveal-right.visible { opacity: 1; transform: none; }

.s-reveal-scale { opacity: 0; transform: scale(.93); transition: opacity .65s ease, transform .65s ease; }
.s-reveal-scale.visible { opacity: 1; transform: none; }

/* Stagger group */
.s-stagger > * {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .5s ease, transform .5s ease;
}
.s-stagger.visible > *:nth-child(1) { opacity:1; transform:none; transition-delay:.04s }
.s-stagger.visible > *:nth-child(2) { opacity:1; transform:none; transition-delay:.12s }
.s-stagger.visible > *:nth-child(3) { opacity:1; transform:none; transition-delay:.20s }
.s-stagger.visible > *:nth-child(4) { opacity:1; transform:none; transition-delay:.28s }
.s-stagger.visible > *:nth-child(5) { opacity:1; transform:none; transition-delay:.36s }
.s-stagger.visible > *:nth-child(6) { opacity:1; transform:none; transition-delay:.44s }

/* ── Particules canvas hero ─────────────────────────────── */
#studio-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: .35;
}

/* ── Game cards enrichies ───────────────────────────────── */
.sgame-card {
    position: relative;
    overflow: hidden;
    transition: border-color .35s, box-shadow .35s, transform .35s;
}
.sgame-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--so-orange), transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s ease;
}
.sgame-card:hover::before { transform: scaleX(1); }
.sgame-card:hover {
    box-shadow: 0 20px 60px rgba(0,0,0,.4), 0 0 40px rgba(249,115,22,.07);
    transform: translateY(-3px);
}
.sgame-wip::before {
    background: linear-gradient(90deg, var(--so-purple), transparent);
}
.sgame-wip:hover {
    box-shadow: 0 20px 60px rgba(0,0,0,.4), 0 0 40px rgba(168,85,247,.07);
}

/* Mouse glow sur les game cards */
.sgame-card-glow {
    position: absolute;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(249,115,22,.07) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%,-50%);
    transition: opacity .3s;
    opacity: 0;
    z-index: 0;
}
.sgame-card:hover .sgame-card-glow { opacity: 1; }

/* ── Launcher feats entrée stagger ──────────────────────── */
.slauncher-feat {
    transition: transform .3s ease, opacity .3s ease;
}
.slauncher-feat:hover {
    transform: translateX(5px);
}
.slauncher-feat-icon {
    transition: background .2s, border-color .2s, transform .25s;
}
.slauncher-feat:hover .slauncher-feat-icon {
    background: rgba(249,115,22,.2);
    border-color: rgba(249,115,22,.5);
    transform: scale(1.12) rotate(-3deg);
}

/* ── Mockup launcher flottant ───────────────────────────── */
.slauncher-mockup {
    animation: mockupFloat 6s ease-in-out infinite alternate;
}
@keyframes mockupFloat {
    from { transform: translateY(0px) rotate(-1deg); }
    to   { transform: translateY(-12px) rotate(0.5deg); }
}

/* ── Stat hero ──────────────────────────────────────────── */
.sh-stat {
    transition: transform .2s;
    cursor: default;
}
.sh-stat:hover { transform: scale(1.08); }
.sh-stat:hover .sh-stat-n {
    text-shadow: 0 0 20px rgba(249,115,22,.7);
}

/* ── Bouton DL shimmer ──────────────────────────────────── */
.sbtn-dl {
    overflow: hidden;
}
.sbtn-dl::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
    transition: left .6s ease;
}
.sbtn-dl:hover::after { left: 160%; }

/* ── About socials hover ────────────────────────────────── */
.ssocial-card {
    transition: transform .3s ease, background .3s, border-color .3s, box-shadow .3s;
}
.ssocial-card:hover {
    transform: translateY(-5px) scale(1.04);
    border-color: rgba(249,115,22,.4) !important;
    box-shadow: 0 8px 28px rgba(249,115,22,.12);
    background: rgba(249,115,22,.08) !important;
}
.ssocial-icon {
    transition: transform .3s;
    display: inline-block;
}
.ssocial-card:hover .ssocial-icon { transform: scale(1.2) rotate(-5deg); }

/* ── Section head line deco ─────────────────────────────── */
.studio-section-head {
    position: relative;
}
.studio-section-title::after {
    content: '';
    display: block;
    width: 50px; height: 3px;
    background: linear-gradient(90deg, var(--so-orange), var(--so-purple));
    border-radius: 2px;
    margin: 10px auto 0;
    transition: width .4s ease;
}
.studio-section-head:hover .studio-section-title::after { width: 100px; }

/* ── WIP bar pulse ──────────────────────────────────────── */
.sgame-wip-fill {
    position: relative;
    overflow: hidden;
}
.sgame-wip-fill::after {
    content: '';
    position: absolute;
    top: 0; left: -100%; bottom: 0;
    width: 60%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
    animation: wipShimmer 2.5s 1.8s ease infinite;
}
@keyframes wipShimmer {
    0%   { left: -80%; }
    100% { left: 160%; }
}

/* ── Playtest banner pulse top border ───────────────────── */
.sgame-playtest-banner::before {
    animation: playtestLine 3s ease-in-out infinite alternate;
}
@keyframes playtestLine {
    from { background: linear-gradient(90deg, var(--so-orange), transparent); }
    to   { background: linear-gradient(90deg, var(--so-orange), rgba(168,85,247,.6), transparent); }
}

/* ── Feature list items stagger ────────────────────────── */
.sgame-feats li {
    position: relative;
    padding-left: 0;
    transition: transform .2s, color .2s;
}
.sgame-feats li:hover {
    transform: translateX(6px);
    color: var(--so-orange);
}

/* ── Hero eyebrow pulse ─────────────────────────────────── */
.sh-eyebrow {
    animation: eyebrowPulse 3s ease-in-out infinite;
}
@keyframes eyebrowPulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(249,115,22,.2); }
    50%      { box-shadow: 0 0 0 8px rgba(249,115,22,.0); }
}

/* ── Mockup sidebar nav hover ───────────────────────────── */
.slm-navitem {
    cursor: pointer;
    transition: background .2s, color .2s, transform .2s;
}
.slm-navitem:not(.active):hover {
    background: #FFF7ED;
    color: #F97316;
    transform: translateX(3px);
}

/* ── Tags stagger hover ─────────────────────────────────── */
.stag {
    transition: transform .2s, box-shadow .2s;
}
.stag:hover {
    transform: scale(1.07);
    box-shadow: 0 0 12px rgba(249,115,22,.25);
}
.stag.purple:hover { box-shadow: 0 0 12px rgba(168,85,247,.3); }

/* ── Footer inner hover ─────────────────────────────────── */
.studio-footer-nav a {
    position: relative;
    transition: color .2s;
}
.studio-footer-nav a::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0;
    width: 0; height: 1px;
    background: var(--so-orange);
    transition: width .25s;
}
.studio-footer-nav a:hover::after { width: 100%; }

/* ── Section about text links ───────────────────────────── */
.sabout-links .sbtn-ghost,
.sabout-links .sbtn-discord,
.sabout-links .sbtn-steam {
    transition: transform .2s, box-shadow .2s, background .2s;
}
.sabout-links .sbtn-ghost:hover { transform: translateY(-3px); }
.sabout-links .sbtn-discord:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(88,101,242,.35); }
.sabout-links .sbtn-steam:hover { transform: translateY(-3px); }