/* Volet « prochaine escapade » — voir includes/escapade-promo.php. Couleurs du site (--psu-*). */

.psb-promo {
	--pp-bg: var(--psu-surface, #fbf7f1);
	--pp-text: var(--psu-text, #3b2a1f);
	--pp-muted: var(--psu-muted, #7a6453);
	--pp-gold: var(--psu-gold, #b8914f);
	--pp-line: var(--psu-line, rgba(92, 64, 44, .14));
	--pp-ease: cubic-bezier(.22, .61, .36, 1);
	position: fixed;
	z-index: 9990;
	right: 20px;
	bottom: 96px;
	width: 340px;
	max-height: calc(100vh - 140px);
	max-height: calc(100dvh - 140px);
	overflow: auto;
	border: 1px solid color-mix(in srgb, var(--pp-gold) 40%, transparent);
	border-radius: 28px;
	background: var(--pp-bg);
	color: var(--pp-text);
	box-shadow: 0 30px 80px -24px rgba(59, 42, 31, .45);
	font-size: 15px;
	line-height: 1.6;
	opacity: 0;
	transform: translateX(calc(100% + 40px));
	transition: transform .9s var(--pp-ease), opacity .7s var(--pp-ease);
	scrollbar-width: thin;
}

.psb-promo[hidden] {
	display: block;
	visibility: hidden;
}

.psb-promo.is-open {
	visibility: visible;
	opacity: 1;
	transform: none;
}

.psb-promo__close {
	position: absolute;
	z-index: 2;
	top: 12px;
	right: 12px;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 50%;
	background: rgba(42, 29, 20, .35);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #fff;
	cursor: pointer;
	transition: transform .4s var(--pp-ease), background-color .3s;
}

.psb-promo__close:hover {
	background: rgba(42, 29, 20, .6);
	transform: rotate(90deg);
}

.psb-promo__close:focus-visible,
.psb-promo-tab:focus-visible,
.psb-promo a:focus-visible {
	outline: 2px solid var(--pp-gold);
	outline-offset: 3px;
}

.psb-promo__close svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
}

/* Photo en arche, qui s'approche doucement à l'ouverture. */
.psb-promo__media {
	position: relative;
	margin: 12px 12px 0;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: 160px 160px 18px 18px / 120px 120px 18px 18px;
}

.psb-promo__media img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	transform: scale(1.12);
	transition: transform 2.4s var(--pp-ease);
}

.psb-promo.is-open .psb-promo__media img {
	transform: scale(1);
}

.psb-promo__seats {
	position: absolute;
	left: 50%;
	bottom: 12px;
	padding: 5px 14px;
	border-radius: 999px;
	background: rgba(42, 29, 20, .55);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #f6ecdf;
	font-size: 12px;
	letter-spacing: .06em;
	white-space: nowrap;
	transform: translateX(-50%);
	animation: psb-promo-pulse 2.8s ease-in-out infinite;
}

@keyframes psb-promo-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(226, 194, 134, .55); }
	50%      { box-shadow: 0 0 0 7px rgba(226, 194, 134, 0); }
}

.psb-promo__body {
	padding: 18px 24px 24px;
	text-align: center;
}

.psb-promo p {
	margin: 0;
}

.psb-promo__kicker {
	font-size: 11px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--pp-gold);
}

.psb-promo__title {
	margin-top: 6px !important;
	font-size: 34px;
	font-weight: 400;
	font-style: italic;
	line-height: 1.1;
	letter-spacing: -.02em;
}

.psb-promo__dates {
	margin-top: 6px !important;
	font-size: 14px;
	color: var(--pp-muted);
}

.psb-promo__desc {
	margin-top: 12px !important;
	color: var(--pp-muted);
}

.psb-promo__price {
	margin-top: 12px !important;
	font-size: 18px;
}

.psb-promo__price small {
	font-size: 13px;
	color: var(--pp-muted);
}

a.psb-promo__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	margin-top: 16px;
	padding: 13px 22px;
	border-radius: 999px;
	background: var(--psu-btn-solid, #5b3f2c) !important;
	background-image: none !important;
	color: var(--psu-btn-solid-text, #f8f1e7) !important;
	text-decoration: none !important;
	transition: transform .5s var(--pp-ease), box-shadow .5s var(--pp-ease), background-color .4s;
}

a.psb-promo__cta:hover {
	transform: translateY(-2px);
	background: var(--pp-gold) !important;
	color: #2a1d14 !important;
	box-shadow: 0 14px 34px -14px color-mix(in srgb, var(--pp-gold) 80%, transparent);
}

.psb-promo__cta i {
	font-style: normal;
	transition: transform .5s var(--pp-ease);
}

.psb-promo__cta:hover i {
	transform: translateX(4px);
}

a.psb-promo__more {
	display: inline-block;
	margin-top: 12px;
	font-size: 13px;
	color: var(--pp-muted) !important;
	background-image: linear-gradient(currentColor, currentColor) !important;
	background-size: 100% 1px !important;
	background-position: 0 100% !important;
	background-repeat: no-repeat !important;
	text-decoration: none !important;
}

a.psb-promo__more:hover {
	color: var(--pp-gold) !important;
}

/* ---------------------------------------------------------------- carrousel (plusieurs escapades)
   Toutes les diapos sont superposées dans la même case : le volet garde la hauteur de la plus
   grande et ne saute pas d'une escapade à l'autre. */

.psb-promo__slides {
	display: grid;
}

.psb-promo__slide {
	grid-area: 1 / 1;
	min-width: 0;
}

.psb-promo.is-multi .psb-promo__slide {
	visibility: hidden;
	opacity: 0;
	transform: translateX(calc(var(--pp-dir, 1) * 28px));
	transition: opacity .6s var(--pp-ease), transform .7s var(--pp-ease), visibility 0s .7s;
}

.psb-promo.is-multi .psb-promo__slide.is-active {
	visibility: visible;
	opacity: 1;
	transform: none;
	transition: opacity .6s var(--pp-ease) .08s, transform .7s var(--pp-ease) .08s, visibility 0s;
}

.psb-promo__body {
	padding-bottom: 14px;
}

/* Bouton « Réserver » à la même hauteur sur chaque diapo, quelle que soit la longueur du texte. */
@media (min-width: 601px) {
	.psb-promo.is-multi .psb-promo__slide {
		display: flex;
		flex-direction: column;
	}

	.psb-promo.is-multi .psb-promo__body {
		display: flex;
		flex: 1;
		flex-direction: column;
		align-items: center;
	}

	.psb-promo.is-multi a.psb-promo__cta {
		margin-top: auto;
	}

	.psb-promo.is-multi .psb-promo__price {
		margin-bottom: 16px;
	}
}

.psb-promo__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 4px 24px 0;
}

.psb-promo__arrow {
	display: grid;
	place-items: center;
	flex: none;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--pp-line);
	border-radius: 50%;
	background: transparent;
	color: var(--pp-text);
	cursor: pointer;
	transition: background-color .3s, border-color .3s, transform .4s var(--pp-ease);
}

.psb-promo__arrow:hover {
	border-color: var(--pp-gold);
	background: color-mix(in srgb, var(--pp-gold) 14%, transparent);
}

.psb-promo__arrow[data-step="-1"]:hover { transform: translateX(-2px); }
.psb-promo__arrow[data-step="1"]:hover  { transform: translateX(2px); }

.psb-promo__arrow svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.psb-promo__dots {
	display: flex;
	align-items: center;
	gap: 7px;
}

.psb-promo__dot {
	width: 7px;
	height: 7px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: color-mix(in srgb, var(--pp-muted) 45%, transparent);
	cursor: pointer;
	transition: width .5s var(--pp-ease), background-color .4s;
}

.psb-promo__dot.is-active {
	width: 20px;
	background: var(--pp-gold);
}

.psb-promo__count {
	margin-left: 6px;
	font-size: 12px;
	letter-spacing: .08em;
	color: var(--pp-muted);
	font-variant-numeric: tabular-nums;
}

.psb-promo__count b {
	font-weight: 600;
	color: var(--pp-text);
}

.psb-promo__arrow:focus-visible,
.psb-promo__dot:focus-visible {
	outline: 2px solid var(--pp-gold);
	outline-offset: 3px;
}

p.psb-promo__foot {
	margin: 0;
	padding: 2px 24px 22px;
	text-align: center;
}

/* Les éléments du texte arrivent l'un après l'autre. */
.psb-promo__body > * {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .7s var(--pp-ease), transform .8s var(--pp-ease);
}

.psb-promo.is-open .psb-promo__body > * {
	opacity: 1;
	transform: none;
}

.psb-promo.is-open .psb-promo__body > :nth-child(1) { transition-delay: .35s; }
.psb-promo.is-open .psb-promo__body > :nth-child(2) { transition-delay: .45s; }
.psb-promo.is-open .psb-promo__body > :nth-child(3) { transition-delay: .55s; }
.psb-promo.is-open .psb-promo__body > :nth-child(4) { transition-delay: .65s; }
.psb-promo.is-open .psb-promo__body > :nth-child(5) { transition-delay: .75s; }
.psb-promo.is-open .psb-promo__body > :nth-child(6) { transition-delay: .85s; }
.psb-promo.is-open .psb-promo__body > :nth-child(7) { transition-delay: .95s; }

/* ---------------------------------------------------------------- onglet pour rouvrir */

.psb-promo-tab {
	position: fixed;
	z-index: 9989;
	right: 0;
	top: 50%;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 16px 10px;
	border: 1px solid color-mix(in srgb, var(--psu-gold, #b8914f) 45%, transparent);
	border-right: 0;
	border-radius: 18px 0 0 18px;
	background: var(--psu-surface, #fbf7f1);
	color: var(--psu-text, #3b2a1f);
	font: inherit;
	font-size: 13px;
	letter-spacing: .06em;
	writing-mode: vertical-rl;
	transform: translate(100%, -50%);
	box-shadow: -10px 10px 30px -16px rgba(59, 42, 31, .4);
	cursor: pointer;
	transition: transform .7s cubic-bezier(.22, .61, .36, 1), padding .4s;
}

.psb-promo-tab span {
	color: var(--psu-gold, #b8914f);
	writing-mode: horizontal-tb;
}

.psb-promo-tab b,
.psb-promo-tab i {
	font-weight: inherit;
	font-style: normal;
}

.psb-promo-tab__t::before {
	content: "· ";
}

.psb-promo-tab[hidden] {
	display: flex;
	visibility: hidden;
}

.psb-promo-tab.is-shown {
	visibility: visible;
	transform: translate(0, -50%);
}

.psb-promo-tab:hover {
	padding-right: 16px;
}

/* ---------------------------------------------------------------- téléphone : carte en bas */

@media (max-width: 600px) {
	/* Téléphone : bandeau compact en bas (photo à gauche, texte à droite), moitié moins haut. */
	.psb-promo {
		right: 10px;
		left: 10px;
		bottom: 10px;
		width: auto;
		padding: 10px 40px 10px 10px;
		border-radius: 22px;
		overflow: hidden;
	}

	.psb-promo__slide {
		display: grid;
		grid-template-columns: 96px 1fr;
		align-items: center;
		gap: 0 12px;
	}

	.psb-promo.is-multi .psb-promo__slide {
		transform: translateX(calc(var(--pp-dir, 1) * 18px));
	}

	.psb-promo__nav {
		justify-content: flex-start;
		gap: 10px;
		padding: 8px 0 0 108px;
	}

	.psb-promo__arrow {
		width: 28px;
		height: 28px;
	}

	.psb-promo__arrow svg {
		width: 13px;
		height: 13px;
	}

	.psb-promo__nav .psb-promo__arrow[data-step="1"] {
		order: 2;
	}

	.psb-promo__nav .psb-promo__dots {
		order: 1;
	}

	p.psb-promo__foot {
		display: none;
	}

	.psb-promo__media {
		grid-row: 1;
		margin: 0;
		aspect-ratio: 3 / 4;
		border-radius: 60px 60px 12px 12px / 46px 46px 12px 12px;
	}

	.psb-promo__seats {
		display: none;
	}

	.psb-promo__body,
	.psb-promo .psb-promo__body {
		padding: 0;
		text-align: left;
	}

	.psb-promo__kicker {
		font-size: 9.5px;
		letter-spacing: .16em;
	}

	.psb-promo__title {
		margin-top: 2px !important;
		font-size: 22px;
	}

	.psb-promo__dates {
		margin-top: 0 !important;
		font-size: 12.5px;
	}

	.psb-promo__desc,
	.psb-promo__price,
	a.psb-promo__more {
		display: none;
	}

	a.psb-promo__cta {
		width: auto;
		margin-top: 8px;
		padding: 8px 16px;
		font-size: 14px;
	}

	.psb-promo__close {
		top: 8px;
		right: 8px;
		width: 30px;
		height: 30px;
		border-color: var(--pp-line);
		background: transparent;
		color: var(--pp-text);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	.psb-promo__close:hover {
		background: var(--pp-line);
	}

	/* Téléphone (2026-11-10, Laura) : la bande verticale du bord droit recouvrait la fin des lignes.
	   Petite étiquette horizontale en bas, entre les boutons Instagram/LinkedIn et « remonter ». */
	.psb-promo-tab {
		top: auto;
		right: auto;
		left: 128px; /* après Instagram + LinkedIn (16 + 2 × 46 + 10 + marge) */
		bottom: 16px;
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-content: center;
		column-gap: 7px;
		max-width: calc(100vw - 128px - 78px); /* s'arrête avant le bouton « remonter » */
		height: 46px;
		padding: 0 16px 0 13px;
		border: 1px solid color-mix(in srgb, var(--psu-gold, #b8914f) 45%, transparent);
		border-radius: 999px;
		writing-mode: horizontal-tb;
		font-size: 11px;
		line-height: 1.25;
		letter-spacing: .05em;
		text-align: left;
		transform: translateY(160%);
	}

	.psb-promo-tab.is-shown {
		transform: none;
	}

	.psb-promo-tab:hover {
		padding-right: 16px;
	}

	.psb-promo-tab b,
	.psb-promo-tab i {
		display: block;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.psb-promo-tab__k {
		font-weight: 600 !important;
	}

	.psb-promo-tab__t {
		opacity: .8;
		text-transform: none;
	}

	.psb-promo-tab__t::before {
		content: none;
	}

	.psb-promo-tab > span {
		grid-row: 1 / 3;
	}
}

@media (prefers-reduced-motion: reduce) {
	.psb-promo,
	.psb-promo *,
	.psb-promo-tab {
		transition: none !important;
		animation: none !important;
	}
}

/* ---------------------------------------------------------------- petits écrans en hauteur
   Le volet tient toujours sans barre de défilement : la photo et les textes se réduisent pour
   que le bouton « Réserver » reste visible. */

.psb-promo__desc {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
}

@media (min-width: 601px) and (max-height: 900px) {
	.psb-promo__media { aspect-ratio: 16 / 9; }
	.psb-promo__body { padding-top: 12px; }
	.psb-promo__desc { -webkit-line-clamp: 2; margin-top: 8px !important; }
	.psb-promo__price { margin-top: 8px !important; }
	.psb-promo__title { font-size: 28px; }
	.psb-promo.is-multi .psb-promo__price { margin-bottom: 10px; }
	a.psb-promo__cta { margin-top: 10px; padding: 10px 20px; }
	p.psb-promo__foot { padding-bottom: 12px; }
}

@media (min-width: 601px) and (max-height: 760px) {
	.psb-promo { bottom: 20px; right: 84px; max-height: calc(100dvh - 40px); }
	.psb-promo__media { aspect-ratio: 5 / 2; border-radius: 90px 90px 14px 14px / 70px 70px 14px 14px; }
	.psb-promo__desc, p.psb-promo__foot { display: none; }
	.psb-promo__nav { padding-bottom: 10px; }
}

@media (min-width: 601px) and (max-height: 540px) {
	.psb-promo { bottom: 10px; max-height: calc(100dvh - 20px); }
	.psb-promo__media { display: none; }
	.psb-promo__close { border-color: var(--pp-line); background: transparent; color: var(--pp-text); }
	.psb-promo__kicker { padding-right: 34px; }
	.psb-promo__title { font-size: 22px; }
	.psb-promo__body { padding: 10px 18px 8px; }
	.psb-promo__dates { margin-top: 2px !important; }
	.psb-promo__price { margin-top: 2px !important; font-size: 15px; }
	a.psb-promo__cta { margin-top: 6px; padding: 8px 18px; }
	.psb-promo__nav { padding: 0 18px 8px; }
	.psb-promo__arrow { width: 28px; height: 28px; }
}

@media (max-width: 600px) {
	.psb-promo { max-height: calc(100dvh - 20px); }
}

/* « Voir plus » : mène à la fiche de l'escapade (photos et réservation). */
a.psb-promo__seemore {
	display: inline-block;
	margin-top: 4px;
	font-size: 13px;
	color: var(--pp-gold) !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
}

@media (max-width: 600px) {
	a.psb-promo__seemore {
		display: block;
		margin-top: 0;
		font-size: 12.5px;
	}
}

@media (min-width: 601px) and (max-height: 540px) {
	a.psb-promo__seemore {
		margin-top: 0;
		font-size: 12px;
	}
}

/* Très petits écrans en hauteur : on garde l'essentiel pour que tout tienne. */
@media (max-height: 420px) {
	.psb-promo__kicker,
	.psb-promo__nav .psb-promo__dots {
		display: none;
	}

	.psb-promo__nav {
		padding-top: 2px;
	}

	.psb-promo__title {
		font-size: 19px;
	}

	a.psb-promo__cta {
		margin-top: 4px;
	}
}