/* ── Étapes de fabrication — Carousel ────────────────────────────────────── */

.pwp-etapes-carousel {
	--etapes-accent      : #eb7100;
	--etapes-label-sz    : .75rem;
	--swiper-theme-color : #eb7100;
	overflow: hidden;
}

.pwp-etapes-main .swiper-wrapper {
	margin-bottom: 1em;
}

/* ── Slide principale ─────────────────────────────────────────────────────── */

.pwp-etapes-main .swiper-slide {
	display   : flex;
	gap       : 3em;
	align-items: flex-start;
}

/* Colonne image */
.pwp-etape-img {
	flex       : 0 0 50%;
	max-width  : 50%;
	overflow   : hidden;
	border-radius: 4px;
}

.pwp-etape-img__photo {
	width      : 100%;
	height     : 100%;
	object-fit : cover;
	display    : block;
}

.pwp-etape-img--placeholder {
	width      : 100%;
	aspect-ratio: 4 / 3;
	background : #f0ede6;
}

/* Colonne contenu */
.pwp-etape-content {
	flex    : 1;
	padding : 1em 0;
}

.pwp-etape-label {
	display        : block;
	font-size      : var(--etapes-label-sz);
	font-weight    : 700;
	text-transform : uppercase;
	letter-spacing : .08em;
	color          : var(--etapes-accent);
	margin-bottom  : .4em;
}

.pwp-etape-title {
	font-size     : 1.5rem;
	font-weight   : 700;
	margin        : 0 0 .75em;
	line-height   : 1.25;
}

.pwp-etape-text {
	font-size   : .95rem;
	line-height : 1.65;
	color       : inherit;
}

.pwp-etape-text p { margin: 0 0 .75em; }
.pwp-etape-text p:last-child { margin-bottom: 0; }

/* ── Barre de navigation ──────────────────────────────────────────────────── */

.pwp-etapes-nav {
	display        : flex;
	align-items    : flex-start;
	border-top     : 1px solid #e0dbd0;
	margin-top     : 2em;
	position       : relative;
}

/* ── Thumbs (desktop) ─────────────────────────────────────────────────────── */

.pwp-etapes-thumbs {
	flex      : 1;
	min-width : 0;
}

.pwp-etapes-thumbs .swiper-slide {
	width       : auto;
	min-width   : 150px;
	padding     : 14px 16px 18px;
	cursor      : pointer;
	border-top  : 3px solid transparent;
	box-sizing  : border-box;
	transition  : border-color .2s;
	user-select : none;
}

.pwp-etapes-thumbs .swiper-slide-thumb-active {
	border-top-color: var(--etapes-accent);
}

.pwp-thumb-label {
	display        : block;
	font-size      : var(--etapes-label-sz);
	font-weight    : 700;
	text-transform : uppercase;
	letter-spacing : .08em;
	color          : var(--etapes-accent);
	margin-bottom  : .3em;
}

.pwp-thumb-title {
	display     : block;
	font-size   : .9rem;
	line-height : 1.3;
	color       : inherit;
}

.pwp-etapes-thumbs .swiper-slide-thumb-active .pwp-thumb-title {
	color : var(--etapes-accent);
}

/* ── Boutons de navigation ────────────────────────────────────────────────── */

.pwp-etapes-nav .swiper-button-next,
.pwp-etapes-nav .swiper-button-prev {
	--swiper-navigation-color : var(--etapes-accent);
	position       : static;
	flex-shrink    : 0;
	align-self     : flex-end;
	margin         : 0 0 12px 12px;
	width          : 48px;
	height         : 48px;
	border-radius  : 50%;
	border         : 2px solid var(--etapes-accent);
	background     : #fff;
	transition     : opacity .2s;
}

.pwp-etapes-nav .swiper-button-next::after,
.pwp-etapes-nav .swiper-button-prev::after {
	font-size : 16px;
	color     : var(--etapes-accent);
}

.pwp-etapes-nav .swiper-button-next .swiper-navigation-icon,
.pwp-etapes-nav .swiper-button-prev .swiper-navigation-icon {
	fill : var(--etapes-accent);
}

.pwp-etapes-nav .swiper-button-next .swiper-navigation-icon path,
.pwp-etapes-nav .swiper-button-prev .swiper-navigation-icon path {
	fill : var(--etapes-accent);
}

.pwp-etapes-nav .swiper-button-next:hover,
.pwp-etapes-nav .swiper-button-prev:hover {
	opacity : .6;
}

/* Prev masqué à la première étape, next masqué à la dernière */
.pwp-etapes-nav .swiper-button-prev.pwp-etapes-nav--disabled,
.pwp-etapes-nav .swiper-button-next.pwp-etapes-nav--disabled {
	display : none;
}

/* ── Mobile : titre actif ─────────────────────────────────────────────────── */

.pwp-etape-mobile-title {
	display : none;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 768px) {

	/* Slide : colonne unique */
	.pwp-etapes-main .swiper-slide {
		flex-direction : column;
		gap            : 1.25em;
	}

	.pwp-etape-img,
	.pwp-etape-img .pwp-etape-img__photo {
		flex      : none;
		max-width : 100%;
		width     : 100%;
	}

	.pwp-etape-content {
		padding : 0;
	}

	/* Nav : cache les thumbs, affiche le titre mobile */
	.pwp-etapes-thumbs {
		display : none;
	}

	.pwp-etape-mobile-title {
		display     : flex;
		flex-direction: column;
		gap         : .25em;
		flex        : 1;
		padding     : 14px 12px;
	}

	.pwp-etape-mobile-title .pwp-thumb-title {
		font-weight : 700;
	}
}