/* ============================================================
   BASE LAYOUT
============================================================ */
html, body{
	width:100%;
	min-height:100%;
	background:var(--bg);
	color:var(--fg);
	-webkit-font-smoothing:antialiased;
}

/* ============================================================
   BACKGROUND IMAGE (2 couches pour effet de profondeur)
============================================================ */
#bgImage{
	position:fixed;
	inset:0;
	z-index:var(--z-bg);
	pointer-events:none;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	will-change: background-position;
	/* Image de fond - définie par JS */
}

#bgOverlay{
	position:fixed;
	inset:0;
	z-index:var(--z-bg-overlay);
	pointer-events:none;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	will-change: background-position;
	/* Image PNG transparente - définie par JS */
}

/* ============================================================
   HEADER
============================================================ */
.header{
	position:fixed;
	top:0; left:0; right:0;
	z-index:var(--z-ui);
	padding: clamp(20px, 4vh, 36px) var(--pad-x);
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
	pointer-events:none;
	gap:24px;
}

.header [data-logo]{
	width: clamp(140px, 20vw, 220px);
	height: auto;
	display: block;
}

.page-title{
	font-family:-apple-system,'Helvetica Neue',Arial,sans-serif;
	font-size: clamp(1.5rem, 3.5vw, 3.2rem);
	font-weight:300;
	letter-spacing:-0.025em;
	line-height:1.1;
	pointer-events:none;
}

.page-title em{
	font-family:Georgia,'Times New Roman',serif;
	font-style:italic;
	font-weight:400;
	color:var(--accent);
	pointer-events:none;
}

.signature{
	font-family: Georgia, 'Times New Roman', serif;
	font-style: italic;
	font-size: clamp(0.95rem, 1.6vw, 1.3rem);
	opacity:.55;
	margin-top:8px;
	color: rgba(240,236,228,.55);
	pointer-events:none;
}

.collections-header__title {
    margin: 0;
    font-family: Doto;
    font-style: normal;
    font-weight: 600;
    letter-spacing: -.05em;
    line-height: 1;
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    color: rgba(240,236,228,.9);
    padding-top: 10px;
    padding-left: 10px;
}

/* ============================================================
   BACK BUTTON
============================================================ */
.btn-back{
	position:fixed;
	top: clamp(20px, 4vh, 36px);
	left: 50%;
	z-index:calc(var(--z-ui) + 1);
	display:flex;
	transform: translateX(-50%);
	will-change: transform, opacity;
	align-items:center;
	gap:10px;
	padding:8px 14px 8px 10px;
	border-radius:999px;
	background: rgba(12,12,12,.6);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid rgba(240,236,228,.22);
	color: rgba(240,236,228,.85);
	cursor:pointer;
	opacity:.8;
	box-shadow: 0 4px 16px rgba(0,0,0,.3);
	transition: opacity .35s, background .35s, border-color .35s, transform .3s;
	pointer-events:auto;
}

.btn-back svg{
	width:16px;
	height:auto;
	transition: transform .35s;
}

.btn-back__label{
	font-family:-apple-system,'Helvetica Neue',Arial,sans-serif;
	font-size:.68rem;
	letter-spacing:.12em;
	text-transform:uppercase;
	font-weight:500;
	transition: opacity .35s;
}

@media (hover:hover){
	.btn-back:hover{
		opacity:1;
		background: rgba(201,169,97,.15);
		border-color: rgba(201,169,97,.45);
		color: var(--accent);
		box-shadow: 0 6px 20px rgba(0,0,0,.4);
		transform: translateX(-50%) translateY(-2px);
	}
	.btn-back:hover svg{
		transform: translateX(-3px);
	}
}

@media (max-width:768px){
	.btn-back__label{
		display:none;
	}
	.btn-back{
		padding:10px;
		min-width:42px;
		min-height:42px;
		justify-content:center;
	}
}

.btn-back:focus-visible{
	outline:none;
	opacity:1;
	box-shadow: 0 0 0 2px rgba(201,169,97,.5);
}

/* ============================================================
   PAGE LOAD - Initial hidden state
   (GSAP will animate from these states)
============================================================ */
body:not(.prefers-reduced-motion):not(.loaded) #bgImage,
body:not(.prefers-reduced-motion):not(.loaded) #bgOverlay,
body:not(.prefers-reduced-motion):not(.loaded) .header,
body:not(.prefers-reduced-motion):not(.loaded) .btn-back,
body:not(.prefers-reduced-motion):not(.loaded) .card,
body:not(.prefers-reduced-motion):not(.loaded) .progress,
body:not(.prefers-reduced-motion):not(.loaded) .nav,
body:not(.prefers-reduced-motion):not(.loaded) .helper{
	opacity:0;
}

/* Reduced motion OR loaded: show immediately */
body.prefers-reduced-motion #bgImage,
body.prefers-reduced-motion #bgOverlay,
body.prefers-reduced-motion .header,
body.prefers-reduced-motion .card,
body.prefers-reduced-motion .progress,
body.prefers-reduced-motion .nav,
body.prefers-reduced-motion .helper,
body.loaded .card{
	opacity:1;
	transform:none;
	filter:none;
}

/* ============================================================
   BUTTONS — Shared across pages
============================================================ */
.btn-primary{
	display:inline-flex;
	align-items:center;
	gap:1rem;
	padding:1.2rem 2.5rem;
	font-size:1rem;
	font-weight:400;
	letter-spacing:.05em;
	text-transform:uppercase;
	color:var(--fg);
	background:transparent;
	border:1px solid currentColor;
	text-decoration:none;
	transition:all .4s ease;
	cursor:pointer;
}

.btn-primary:hover{
	background:var(--accent, #c9a961);
	color:var(--bg, #0a0a0a);
	border-color:var(--accent, #c9a961);
	transform:translateY(-2px);
	box-shadow:0 8px 30px rgba(201,169,97,.3);
}

.btn-primary::after{
	content:'→';
	font-size:1.2em;
	transition:transform .3s ease;
}

.btn-primary:hover::after{
	transform:translateX(5px);
}

/* ============================================================
   ERROR MESSAGE (fallback when data fails to load)
============================================================ */
.error-message{
	text-align:center;
	padding:3rem 2rem;
	color:rgba(255,255,255,0.6);
	font-size:0.95rem;
	line-height:1.6;
}