/* =========================================================
   Paviterra — Home / Section 2 : 4 panneaux scroll-jackés
   ========================================================= */

.pv-scroll {
	position: relative;
	height: 400vh;          /* N × 100vh (N=4) → pin sur 3×100vh */
	background: #fff;
}
.pv-scroll__stage {
	position: relative;
	height: 100vh;
	overflow: hidden;
}

/* ---------- Navigation verticale (gauche) ---------- */
.pv-scroll__nav {
	position: absolute;
	left: clamp(24px, 4vw, 70px);
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.pv-scroll__nav-item {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	background: none;
	border: 0;
	padding: 6px 0;
	cursor: pointer;
	color: var(--pv-muted);
	font-family: var(--pv-font);
	font-weight: 700;
	font-size: 18px;
	line-height: 1;
	transition: color .3s ease, font-size .35s ease;
}
.pv-scroll__nav-label { transition: transform .4s cubic-bezier(.34, 1.2, .5, 1), letter-spacing .4s ease; }
.pv-scroll__nav-item:hover { color: var(--pv-rust); }
.pv-scroll__nav-item:hover .pv-scroll__nav-label { transform: translateX(14px); letter-spacing: .01em; }
.pv-scroll__nav-item.is-active {
	color: var(--pv-rust);
	font-size: 30px;
}

/* Marqueur « tiret » qui s'étend au survol (façon maquette) */
.pv-scroll__dial {
	width: 20px;
	height: 2px;
	flex: 0 0 auto;
	border-radius: 2px;
	background: currentColor;
	opacity: .45;
	transition: width .45s cubic-bezier(.34, 1.2, .5, 1), background .3s ease, opacity .3s ease;
}
.pv-scroll__nav-item:hover .pv-scroll__dial { width: 52px; opacity: 1; background: var(--pv-rust); }
.pv-scroll__nav-item.is-active .pv-scroll__dial { width: 42px; opacity: 1; background: var(--pv-rust); }

/* ---------- Panneaux ---------- */
.pv-scroll__panels { position: absolute; inset: 0; }
.pv-panel {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .5s ease, visibility .5s;
}
.pv-panel.is-active { opacity: 1; visibility: visible; }

/* Titre géant : DEVANT l'image et CENTRÉ dans son cadre (dans .pv-panel__media) */
.pv-panel__title {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;                              /* devant l'image (.pv-panel__img) */
	margin: 0;
	padding: 0 26px;
	text-align: center;
	color: #e0e0e0;                          /* XD : #E0E0E0 */
	font-family: var(--pv-font);             /* PT Sans Pro */
	font-weight: 800;                        /* Extra Bold */
	font-size: clamp(40px, 5.4vw, 84px);
	line-height: 1.04;
	pointer-events: none;
	opacity: 0;
	transition: opacity .6s ease .1s;
}
.pv-panel.is-active .pv-panel__title { opacity: 1; }

/* Colonne centrale : image + sous-titre + CTA */
.pv-panel__center {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 26px;
	padding: 120px 40px;
}

/* Image : "stade 0" (bande fine) → 4/3 quand le panneau est actif */
.pv-panel__media {
	position: relative;
	width: min(760px, 60vw);
	height: 132px;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .35);
	transition: height .85s cubic-bezier(.4, 0, .2, 1);
}
.pv-panel.is-active .pv-panel__media {
	height: calc(min(760px, 60vw) * 0.75);   /* proportion 4/3 */
}
.pv-panel__img {
	display: block;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
}
/* Placeholders */
.pv-panel__img--paviplot { background-image: linear-gradient(150deg, #d8c3a3, #8f7a58); }
.pv-panel__img--pavistab { background-image: linear-gradient(150deg, #a9b884, #5f6f43); }
.pv-panel__img--pavibord { background-image: linear-gradient(150deg, #c2bfb2, #6f7a5f); }
.pv-panel__img--pavifond { background-image: linear-gradient(150deg, #c3c6c9, #6d7176); }

/* Sous-titre + liens + CTA : apparition décalée */
.pv-panel__subtitle,
.pv-panel__links,
.pv-panel__cta {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .5s ease, transform .5s cubic-bezier(.4, 0, .2, 1);
}
.pv-panel.is-active .pv-panel__subtitle { opacity: 1; transform: none; transition-delay: .25s; }
.pv-panel.is-active .pv-panel__links    { opacity: 1; transform: none; transition-delay: .32s; }
.pv-panel.is-active .pv-panel__cta      { opacity: 1; transform: none; transition-delay: .4s; }

.pv-panel__subtitle {
	margin: 0;
	color: var(--pv-ink);
	font-size: 18px;
}
.pv-panel__links {
	display: flex;
	gap: 46px;
}
.pv-panel__links a {
	color: var(--pv-rust);
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
}
.pv-panel__links a:hover { text-decoration: underline; }
.pv-panel__cta { display: flex; gap: 14px; }

/* ---------- Vignettes produits (Paviplot, droite) ---------- */
.pv-panel__thumbs {
	position: absolute;
	right: clamp(24px, 4vw, 70px);
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 26px;
	opacity: 0;
	transition: opacity .6s ease .35s;
}
.pv-panel.is-active .pv-panel__thumbs { opacity: 1; }
.pv-thumb { margin: 0; text-align: center; }
.pv-thumb__img {
	display: block;
	width: 120px;
	height: 70px;
	border-radius: 8px;
	background: repeating-linear-gradient(135deg, #efe9df 0 8px, #e6ded1 8px 16px);
}
.pv-thumb figcaption {
	margin-top: 6px;
	font-size: 12px;
	color: var(--pv-muted);
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
	.pv-panel__thumbs { display: none; }

	/* Nav : barre horizontale en bas (au lieu de la colonne à gauche) */
	.pv-scroll__nav {
		left: 50%;
		right: auto;
		top: auto;
		bottom: 20px;
		transform: translateX(-50%);
		flex-direction: row;
		justify-content: center;
		flex-wrap: wrap;
		gap: 10px 18px;
		width: calc(100vw - 24px);
	}
	.pv-scroll__dial { display: none; }               /* pas de tiret en ligne */
	.pv-scroll__nav { gap: 8px 16px; }
	.pv-scroll__nav-item { font-size: 12px; padding: 4px 0; }
	.pv-scroll__nav-item.is-active { font-size: 14px; }
	.pv-scroll__nav-label { transform: none !important; }

	.pv-panel__media { width: 84vw; }
	.pv-panel.is-active .pv-panel__media { height: calc(84vw * 0.78); }
	.pv-panel__center { padding: 80px 18px 88px; }     /* espace pour la nav en bas */
	.pv-panel__title { font-size: clamp(22px, 6.4vw, 40px); padding: 0 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.pv-panel, .pv-panel__media, .pv-panel__title,
	.pv-panel__subtitle, .pv-panel__links, .pv-panel__cta,
	.pv-scroll__dial::before { transition-duration: .01ms !important; }
}