.fullwidth.produits.lazy .banner,
.fullwidth.produits.lazy .banner--mockup {
	background-image: none;
}


.fullwidth.produits {
	--vef-section-margin-top: 130px;
	--vef-section-margin-bottom: 60px;

	--content-max-width: 800px;

	--vef-cta-background: var(--vef-color-dark-grey);
	--vef-cta-color: white;
	--vef-cta-background-hover: transparent;
	--vef-cta-color-hover: white;

	--vef-background-image-url: url("https://www.bons-plans-voyage-new-york.com/wordpress/wp-content/themes/tsa-bpvny/img/home-2023/citypass-background.png");

	margin-top: var(--vef-section-margin-top);
	margin-bottom: var(--vef-section-margin-bottom);


	--vef-couleur-overlay: var(--vef-couleur-dominante, #393939);
}


.fullwidth.produits ::selection,
.fullwidth.produits ::-moz-selection {
	background-color: white;
	color: var(--vef-couleur-dominante, #393939);
}


.fullwidth.produits .banner {
	padding: 0;
}

.fullwidth.produits .wrapper {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.fullwidth.produits .wrapper > * {
	text-align: center;
	width: 100%;
}

.banner--mockup {
	background-image: var(--vef-background-image-url-mobile);
	background-repeat: no-repeat;
	position: relative;
	z-index: 5;
}

.banner--mockup::before {
	position: absolute;
	inset: 0;
	content: " ";
	background: var(--vef-couleur-overlay);
	opacity: 0.6;
	z-index: 1;
}

.banner--mockup > img {
	width: 100%;
	max-width: 160px;
	height: auto;
	margin: -60px auto -20px;
	position: relative;
	z-index: 2;
}

.banner--content {
	font-family: Arial;
	color: white;
	background-color: var(--vef-couleur-dominante, #393939);
	padding: 2.5em 0 1.5em;
}



.fullwidth.produits .title {
	font-size: 2em;
	line-height: 1em;
	font-weight: bold;
	text-transform: uppercase;
}

.fullwidth.produits .desc {
	line-height: 1.3em;
	font-weight: 400;
	margin-top: 0.75em;
	padding: 0 1em;
}

.fullwidth.produits .desc > * + * {
	margin-top: 0.5em;
}

.fullwidth.produits .cta {
	margin-top: 1em;
}

.fullwidth.produits .cta > a {
	display: inline-block;
	text-decoration: none;
	background-color: var(--vef-cta-background);
	padding: 0.75em 1em;
	color: white;
	border: 3px solid var(--vef-cta-background);
}

.fullwidth.produits .cta > a:hover,
.fullwidth.produits .cta > a:focus-visible {
	background: transparent;
	border-color: white;
}




@media (min-width:700px) {
	.fullwidth.produits {
		--vef-section-margin-top: 160px;
		--vef-section-margin-bottom: 150px;
	}


	.fullwidth.produits .banner {
		display: flex;
		justify-content: center;
		background-image: var(--vef-background-image-url);
		background-repeat: no-repeat;
		position: relative;
	}

	.fullwidth.produits .banner::after {
		content: " ";
		position: absolute;
		inset: 0;
		background-color: var(--vef-couleur-dominante, #393939);
		z-index: 1;
		opacity: 0.6;
	}

	.fullwidth.produits .banner::before {
		content: " ";
		position: absolute;
		inset: 0;
		z-index: 2;
		opacity: 1;
		background: rgb(var(--vef-couleur-dominante-r), var(--vef-couleur-dominante-g), 0);
		background: -moz-linear-gradient(90deg, rgba(var(--vef-couleur-dominante-r), var(--vef-couleur-dominante-g), var(--vef-couleur-dominante-b), 0) 0%, rgba(var(--vef-couleur-dominante-r), var(--vef-couleur-dominante-g), var(--vef-couleur-dominante-b), 1) 40%);
		background: -webkit-linear-gradient(90deg, rgba(var(--vef-couleur-dominante-r), var(--vef-couleur-dominante-g), var(--vef-couleur-dominante-b), 0) 0%, rgba(var(--vef-couleur-dominante-r), var(--vef-couleur-dominante-g), var(--vef-couleur-dominante-b), 1) 40%);
		background: linear-gradient(90deg, rgba(var(--vef-couleur-dominante-r), var(--vef-couleur-dominante-g), var(--vef-couleur-dominante-b), 0) 0%, rgba(var(--vef-couleur-dominante-r), var(--vef-couleur-dominante-g), var(--vef-couleur-dominante-b), 1) 40%);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffae00", endColorstr="#ffae00", GradientType=1);
	}

	.fullwidth.produits .wrapper {
		flex-direction: row;
		gap: 2em;
		max-width: var(--content-max-width);
		z-index: 4;
	}

	.banner--mockup {
		background-image: none;
		max-width: 220px;
	}

	.banner--mockup::before {
		display: none;
	}

	.banner--mockup > img {
		margin-bottom: -60px;
		max-width: none;
	}

	.banner--content {
		text-align: left !important;
		background: none;
		color: white;
		align-self: center;
		padding: 2em 0;
	}

	.fullwidth.produits .title {
		font-size: 2.25em;
	}

	.fullwidth.produits .desc {
		max-width: 480px;
		padding: 0;
		font-size: 1.4rem;
		line-height: 1.2em;
	}
}



@media (min-width:1921px) {
	.fullwidth.produits .banner {
		background-image: var(--vef-background-image-url-wide);
	}
}