/*
 * Shonen Retro Game — Atelier « Nocturne laqué »
 * Administrable version of atelier-elementor-widget.html.
 * Every selector is scoped to the shortcode root.
 */

.srgh-page--atelier {
	--srgh-border: rgba(255, 255, 255, .16);
	--srgh-phi-space-1: 16px;
	--srgh-phi-space-2: 26px;
	--srgh-phi-space-3: 42px;
	--srgh-phi-space-4: 68px;
	position: relative;
	isolation: isolate;
	box-sizing: border-box;
	width: 100vw;
	max-width: none;
	margin: 0;
	margin-inline: calc(50% - 50vw);
	overflow-x: clip;
	background: var(--srgh-ink);
	color: var(--srgh-white);
	font-family: var(--srgh-body);
	font-size: var(--srgh-body-size);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

.srgh-page--atelier,
.srgh-page--atelier * {
	box-sizing: border-box;
}

.srgh-page--atelier main {
	display: block;
	width: 100%;
}

.srgh-page--atelier img {
	display: block;
	max-width: 100%;
}

.srgh-page--atelier p {
	margin: 0;
}

.srgh-page--atelier a {
	color: inherit;
	-webkit-tap-highlight-color: transparent;
}

.srgh-page--atelier a:focus-visible,
.srgh-page--atelier button:focus-visible,
.srgh-page--atelier summary:focus-visible {
	outline: 3px solid var(--srgh-blue);
	outline-offset: 3px;
}

.srgh-page--atelier .srgh-shell {
	width: min(calc(100% - clamp(32px, 5vw, 96px)), var(--srgh-shell));
	margin-inline: auto;
}

.srgh-page--atelier h1,
.srgh-page--atelier h2,
.srgh-page--atelier h3 {
	margin: 0;
	color: var(--srgh-white) !important;
	font-family: var(--srgh-heading) !important;
	font-weight: 800 !important;
	letter-spacing: .01em !important;
	text-shadow: none !important;
}

.srgh-page--atelier .srgh-section {
	position: relative;
	padding: clamp(56px, 7vw, 100px) 0;
}

.srgh-page--atelier .srgh-h2 {
	margin-bottom: var(--srgh-phi-space-3);
	font-size: clamp(36px, 2.8vw, var(--srgh-h2-size)) !important;
	line-height: 1.08 !important;
	text-transform: none !important;
}

.srgh-page--atelier .text-cyan {
	color: var(--srgh-cyan) !important;
}

.srgh-page--atelier .text-violet {
	color: var(--srgh-violet) !important;
}

.srgh-page--atelier .text-magenta {
	color: var(--srgh-magenta) !important;
}

.srgh-page--atelier .text-yellow {
	color: var(--srgh-yellow) !important;
}

.srgh-page--atelier .text-blue {
	color: var(--srgh-blue) !important;
}

/* Buttons are locked against Elementor's global button rules. */
.srgh-page--atelier .srgh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 68px !important;
	min-width: 310px;
	padding: 20px 36px !important;
	border: 1px solid var(--srgh-yellow) !important;
	border-radius: 0 !important;
	background: var(--srgh-yellow) !important;
	background-image: none !important;
	box-shadow: none !important;
	color: var(--srgh-ink) !important;
	font: 700 18px/1 var(--srgh-heading) !important;
	letter-spacing: .04em !important;
	text-decoration: none !important;
	text-shadow: none !important;
	text-transform: uppercase !important;
	transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}

.srgh-page--atelier .srgh-btn:hover {
	transform: translateY(-2px);
	border-color: var(--srgh-yellow) !important;
	background: color-mix(in srgb, var(--srgh-yellow) 86%, white) !important;
	color: var(--srgh-ink) !important;
}

.srgh-page--atelier .srgh-btn--ghost {
	border-color: rgba(255, 255, 255, .58) !important;
	background: transparent !important;
	color: var(--srgh-white) !important;
}

.srgh-page--atelier .srgh-btn--ghost:hover {
	border-color: var(--srgh-white) !important;
	background: rgba(255, 255, 255, .1) !important;
	color: var(--srgh-white) !important;
}

/* Signature divider. */
.srgh-page--atelier .srgh-rule-gradient,
.srgh-page--atelier .srgh-led {
	height: 2px;
	border: 0;
	background: linear-gradient(90deg, var(--srgh-cyan), var(--srgh-violet), var(--srgh-magenta), var(--srgh-yellow));
}

.srgh-page--atelier .srgh-led {
	height: 4px;
	background-size: 200% 100%;
	animation: srgcc-atelier-led 8s linear infinite;
}

@keyframes srgcc-atelier-led {
	from { background-position: 0 0; }
	to { background-position: -200% 0; }
}

/* Hero. */
.srgh-page--atelier .srgh-hero {
	position: relative;
	overflow: hidden;
	background: var(--srgh-ink);
}

.srgh-page--atelier .srgh-hero__media {
	position: absolute;
	inset: 0;
}

.srgh-page--atelier .srgh-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--srgh-image-x) var(--srgh-image-y);
	opacity: var(--srgh-image-opacity) !important;
}

.srgh-page--atelier .srgh-hero__overlay {
	position: absolute;
	inset: 0;
}

.srgh-page--atelier .srgh-hero__inner {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(600px, 42vw, 1120px);
	padding-block: clamp(52px, 6vw, 92px);
}

.srgh-page--atelier .srgh-hero__body {
	max-width: min(61.8vw, 1100px);
}

.srgh-page--atelier .srgh-kicker {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 var(--srgh-phi-space-2);
	color: var(--srgh-cyan);
	font: 700 clamp(15px, .9vw, 20px)/1 var(--srgh-heading);
	letter-spacing: .16em;
	text-transform: uppercase;
}

.srgh-page--atelier .srgh-kicker::before {
	width: 30px;
	height: 2px;
	background: var(--srgh-cyan);
	content: "";
	flex: none;
}

.srgh-page--atelier .srgh-hero__body h1 {
	max-width: none;
	font-size: clamp(58px, 5.4vw, var(--srgh-h1-size)) !important;
	line-height: 1.02 !important;
	text-transform: uppercase !important;
}

.srgh-page--atelier .srgh-hero__body h1 > span {
	display: block;
}

.srgh-page--atelier .srgh-hero__sub {
	max-width: 820px;
	margin-top: 22px;
	color: var(--srgh-muted);
	font-size: clamp(18px, 1.1vw, 24px);
	line-height: 1.58;
}

.srgh-page--atelier .srgh-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--srgh-phi-space-1);
	margin-top: var(--srgh-phi-space-3);
}

.srgh-page--atelier .srgh-hero__kanji {
	position: absolute;
	top: 50%;
	right: clamp(10px, 3.4vw, 40px);
	transform: translateY(-50%);
	color: rgba(255, 255, 255, .14);
	font: 700 clamp(30px, 2.5vw, 48px)/1 var(--srgh-heading);
	letter-spacing: .3em;
	pointer-events: none;
	user-select: none;
	white-space: nowrap;
	writing-mode: vertical-rl;
}

/* Shared strips. */
.srgh-page--atelier .srgh-strip {
	display: grid;
	border-top: 1px solid var(--srgh-border);
	border-bottom: 1px solid var(--srgh-border);
}

.srgh-page--atelier .srgh-strip--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.srgh-page--atelier .srgh-strip--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.srgh-page--atelier .srgh-strip > div {
	min-width: 0;
	border-right: 1px solid var(--srgh-border);
}

.srgh-page--atelier .srgh-strip > div:last-child {
	border-right: 0;
}

.srgh-page--atelier .srgh-strip__num {
	display: block;
	font: 800 18px/1 var(--srgh-heading);
	letter-spacing: .1em;
}

.srgh-page--atelier .srgh-strip h2 {
	line-height: 1.12 !important;
	text-transform: uppercase !important;
}

.srgh-page--atelier .srgh-strip p,
.srgh-page--atelier .srgh-strip li {
	color: var(--srgh-muted);
}

/* Services. */
.srgh-page--atelier #srgcc-atelier-prestations,
.srgh-page--atelier .srgh-atelier-factors {
	width: min(100%, var(--srgh-atelier-content));
	margin-inline: auto;
}

.srgh-page--atelier #srgcc-atelier-prestations > div {
	padding: var(--srgh-phi-space-3) var(--srgh-phi-space-2);
}

.srgh-page--atelier #srgcc-atelier-prestations .srgh-strip__num {
	margin-bottom: 14px;
	font-size: clamp(19px, .95vw, 22px);
}

.srgh-page--atelier #srgcc-atelier-prestations h2 {
	margin-bottom: 10px;
	font-size: clamp(22px, 1.35vw, 26px) !important;
}

.srgh-page--atelier #srgcc-atelier-prestations p {
	font-size: clamp(17px, 1.05vw, 19px);
	line-height: 1.58;
}

.srgh-page--atelier #srgcc-atelier-prestations ul {
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.srgh-page--atelier #srgcc-atelier-prestations li {
	margin: 0;
	padding: 7px 0;
	border-top: 1px solid rgba(255, 255, 255, .18);
	color: var(--srgh-white);
	font-size: clamp(16px, 1vw, 18px);
	line-height: 1.45;
}

/* Image band. */
.srgh-page--atelier .srgh-band {
	position: relative;
	overflow: hidden;
	background: var(--srgh-ink);
}

.srgh-page--atelier .srgh-band__img {
	width: 100%;
	height: clamp(410px, 31vw, 560px);
	object-fit: cover;
	object-position: var(--srgh-image-x) var(--srgh-image-y);
	opacity: var(--srgh-image-opacity) !important;
}

.srgh-page--atelier .srgh-band__panel {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.srgh-page--atelier .srgh-band--left .srgh-band__panel {
	justify-content: flex-start;
}

.srgh-page--atelier .srgh-band__panel-inner {
	width: min(680px, 38.2%);
	margin: 0 var(--srgh-phi-space-4) 0 0;
	padding: clamp(24px, 4vw, 52px) clamp(24px, 4vw, 40px);
	background: linear-gradient(260deg, rgba(8, 11, 19, .94) 60%, rgba(8, 11, 19, 0));
}

.srgh-page--atelier .srgh-band--left .srgh-band__panel-inner {
	margin: 0 0 0 var(--srgh-phi-space-4);
	background: linear-gradient(100deg, rgba(8, 11, 19, .94) 60%, rgba(8, 11, 19, 0));
}

.srgh-page--atelier .srgh-band__panel-inner h2 {
	margin-bottom: 14px;
	font-size: clamp(32px, 2.7vw, 44px) !important;
	line-height: 1.08 !important;
	text-transform: none !important;
}

.srgh-page--atelier .srgh-band__panel-inner p {
	color: var(--srgh-muted);
	font-size: clamp(17px, 1.05vw, 19px);
	line-height: 1.58;
}

/* Four factors. */
.srgh-page--atelier .srgh-atelier-factors > div {
	min-height: 168px;
	padding: var(--srgh-phi-space-3) var(--srgh-phi-space-2);
}

.srgh-page--atelier .srgh-atelier-factors .srgh-strip__num {
	margin-bottom: var(--srgh-phi-space-1);
	color: var(--srgh-yellow) !important;
	font-size: clamp(30px, 2.1vw, 38px);
	letter-spacing: .02em;
}

.srgh-page--atelier .srgh-atelier-factors h2 {
	margin-bottom: 10px;
	font-size: clamp(20px, 1.35vw, 24px) !important;
}

.srgh-page--atelier .srgh-atelier-factors p {
	font-size: clamp(16px, 1vw, 18px);
	line-height: 1.55;
}

/* Process. */
.srgh-page--atelier .srgh-atelier-steps-section {
	padding-top: var(--srgh-phi-space-4);
	padding-bottom: var(--srgh-phi-space-4);
}

.srgh-page--atelier .srgh-atelier-steps-section .srgh-shell,
.srgh-page--atelier .srgh-atelier-faq-section .srgh-shell {
	width: min(calc(100% - clamp(32px, 5vw, 96px)), var(--srgh-atelier-content));
}

.srgh-page--atelier .srgh-steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
}

.srgh-page--atelier .srgh-step {
	min-width: 0;
	padding: 0 var(--srgh-phi-space-2);
	border-right: 1px solid var(--srgh-border);
}

.srgh-page--atelier .srgh-step:first-child {
	padding-left: 0;
}

.srgh-page--atelier .srgh-step:last-child {
	padding-right: 0;
	border-right: 0;
}

.srgh-page--atelier .srgh-step__num {
	display: block;
	margin-bottom: var(--srgh-phi-space-1);
	font: 800 19px/1 var(--srgh-heading);
	letter-spacing: .08em;
}

.srgh-page--atelier .srgh-step h3 {
	margin-bottom: 8px;
	font-size: clamp(20px, 1.25vw, 23px) !important;
	line-height: 1.1 !important;
	text-transform: uppercase !important;
}

.srgh-page--atelier .srgh-step p {
	color: var(--srgh-muted);
	font-size: clamp(16px, 1vw, 18px);
	line-height: 1.58;
}

/* Native, keyboard-accessible FAQ. */
.srgh-page--atelier .srgh-atelier-faq-section {
	padding-top: var(--srgh-phi-space-3);
	padding-bottom: var(--srgh-phi-space-4);
}

.srgh-page--atelier .srgh-faq {
	display: flex;
	flex-direction: column;
	gap: 0;
	border-top: 1px solid rgba(255, 255, 255, .18);
}

.srgh-page--atelier .srgh-faq details {
	padding: 0;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, .18);
	border-radius: 0;
	background: transparent;
}

.srgh-page--atelier .srgh-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 44px;
	padding: 20px 0;
	color: var(--srgh-white);
	cursor: pointer;
	font: 600 clamp(18px, 1.1vw, 20px)/1.45 var(--srgh-body);
	list-style: none;
}

.srgh-page--atelier .srgh-faq summary::-webkit-details-marker {
	display: none;
}

.srgh-page--atelier .srgh-faq summary::after {
	content: "+";
	flex: none;
	color: var(--srgh-yellow);
	font: 700 20px/1 var(--srgh-heading);
}

.srgh-page--atelier .srgh-faq details[open] summary::after {
	content: "\2212";
}

.srgh-page--atelier .srgh-faq p {
	max-width: 980px;
	margin: 0 0 18px;
	padding-right: 42px;
	color: var(--srgh-muted);
	font-size: clamp(16px, 1vw, 18px);
	line-height: 1.65;
}

.srgh-page--atelier .srgh-image-placeholder {
	min-height: 420px;
	background: var(--srgh-panel);
}

/* Elementor sometimes keeps a parent container at 50% in tablet mode. */
@media (max-width: 1024px) {
	body .elementor-element:has(.srgh-page--atelier) {
		--width: 100% !important;
		--content-width: 100% !important;
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 100% !important;
		align-self: stretch !important;
		overflow: visible !important;
	}

	body .elementor-widget-shortcode:has(.srgh-page--atelier) > .elementor-widget-container,
	body .elementor-widget-container:has(> .srgh-page--atelier) {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow: visible !important;
	}

	.srgh-page--atelier {
		left: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-inline: 0 !important;
		transform: none !important;
	}

	.srgh-page--atelier .srgh-hero__body {
		max-width: 760px;
	}

	.srgh-page--atelier .srgh-hero__body h1 {
		font-size: clamp(44px, 9vw, 74px) !important;
	}

	.srgh-page--atelier .srgh-hero__sub {
		font-size: clamp(17px, 2.3vw, 21px);
	}

	.srgh-page--atelier .srgh-hero__actions .srgh-btn {
		font-size: 17px !important;
	}

	.srgh-page--atelier .srgh-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.srgh-page--atelier .srgh-step {
		margin-bottom: 28px;
	}
}

@media (min-width: 641px) and (max-width: 1024px) {
	.srgh-page--atelier #srgcc-atelier-prestations {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.srgh-page--atelier .srgh-atelier-band .srgh-band__panel-inner {
		width: 61.8%;
		margin-right: var(--srgh-phi-space-2);
	}

	.srgh-page--atelier .srgh-band--left .srgh-band__panel-inner {
		margin-right: 0;
		margin-left: var(--srgh-phi-space-2);
	}

	.srgh-page--atelier .srgh-atelier-factors {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.srgh-page--atelier .srgh-atelier-factors > div:nth-child(2) {
		border-right: 0;
	}

	.srgh-page--atelier .srgh-atelier-factors > div:nth-child(-n+2) {
		border-bottom: 1px solid var(--srgh-border);
	}
}

@media (max-width: 640px) {
	.srgh-page--atelier .srgh-shell {
		width: min(calc(100% - 32px), var(--srgh-shell));
	}

	.srgh-page--atelier .srgh-hero__inner {
		align-items: flex-end;
		min-height: 560px;
		padding-block: 52px;
	}

	.srgh-page--atelier .srgh-hero__body {
		max-width: 100%;
	}

	.srgh-page--atelier .srgh-hero__body h1 {
		font-size: clamp(38px, 10.3vw, 54px) !important;
	}

	.srgh-page--atelier .srgh-hero__kanji {
		display: none;
	}

	.srgh-page--atelier .srgh-hero__actions {
		gap: 10px;
	}

	.srgh-page--atelier .srgh-hero__actions .srgh-btn {
		width: 100%;
		min-width: 0;
	}

	.srgh-page--atelier .srgh-focal-image {
		object-position: var(--srgh-image-x-mobile) var(--srgh-image-y-mobile);
	}

	.srgh-page--atelier .srgh-strip--3,
	.srgh-page--atelier .srgh-strip--4 {
		grid-template-columns: 1fr;
	}

	.srgh-page--atelier .srgh-strip > div {
		border-right: 0;
		border-bottom: 1px solid var(--srgh-border);
	}

	.srgh-page--atelier .srgh-strip > div:last-child {
		border-bottom: 0;
	}

	.srgh-page--atelier .srgh-band__panel {
		align-items: flex-end;
	}

	.srgh-page--atelier .srgh-band__panel-inner,
	.srgh-page--atelier .srgh-band--left .srgh-band__panel-inner {
		width: 100%;
		margin: 0;
		background: linear-gradient(0deg, rgba(8, 11, 19, .97) 55%, rgba(8, 11, 19, 0));
		text-align: left !important;
	}

	.srgh-page--atelier .srgh-steps {
		grid-template-columns: 1fr;
	}

	.srgh-page--atelier .srgh-step,
	.srgh-page--atelier .srgh-step:first-child,
	.srgh-page--atelier .srgh-step:last-child {
		margin: 0;
		padding: 0 0 24px;
		border-right: 0;
		border-bottom: 1px solid rgba(255, 255, 255, .14);
	}

	.srgh-page--atelier .srgh-step + .srgh-step {
		padding-top: 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.srgh-page--atelier *,
	.srgh-page--atelier *::before,
	.srgh-page--atelier *::after {
		scroll-behavior: auto !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}