#bandeau {
		position: relative;
		z-index: 10;
	}

	body {
		padding: 0;
		margin: 0
	}

	a {
		cursor: pointer;
	}

	#LP {
		font-family: Montserrat;
		font-size: 14px;
		color: #000046;
		background: #fff
	}

	#LP *,
	#LP *:before,
	#LP *:after {
		box-sizing: border-box
	}

	#LP h1,
	#LP h2,
	#LP h3,
	#LP h4,
	#LP h5,
	#LP h6 {
		margin: 0;
		font-weight: normal;
		z-index: 10;
	}

	#LP h1 {
		color: #FFF;
		font-family: "psel-ferveur-compact";
		text-align: center;
		font-size: 40px;
		line-height: 43px;
		text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.49);
	}

	#LP h2 {
		font-family: "psel-ferveur";
		text-align: center;
		color: #000F55;
		font-size: 27px;
		line-height: 30px;
	}

	#LP h2:first-child {
		max-width: 900px;
	}

	#LP h3 {
		font-family: "psel-ferveur-compact";
		color: #FFF;
		font-size: 50px;
		line-height: 53px;
		padding: 10px 15px;
	}

	#LP h4 {
		font-family: "psel-ferveur";
		color: #FFF;
		text-align: center;
		font-size: 30px;
		line-height: 33px;
		margin-bottom: 30px;
		width: -webkit-fill-available;
	}

	#LP img {
		max-width: 100%;
		height: auto
	}

	#LP sup {
		line-height: 5px
	}

	#LP a {
		text-decoration: none;
		transition: all .45s ease-in-out
	}

	#LP a:hover,
	#LP a:focus,
	#LP a:active {
		outline: none;
		text-decoration: none;
		box-shadow: none
	}

	#LP a.cta {
		display: block;
		width: fit-content;
		margin: 0 auto;
		background: #3aff3d;
		font-size: 14px;
		line-height: 20px;
		padding: 8px 20px;
		font-weight: 900;
		border-radius: 100px;
		color: #00009f;
		cursor: pointer;
		text-transform: uppercase;
		font-family: "psel-ferveur"
	}

	#LP a.cta:hover {
		background: rgb(0, 211, 3.2131979695)
	}

	#LP p,
	#LP ul,
	#LP ol {
		margin: 0
	}

	#LP .desk {
		z-index: 10;
	}


	@media(min-width: 768px) {

		#LP .desk {
			display: flex;
			position: relative;
		}
	}

	canvas {
		position: absolute;
		top: 0;
		left: 0;
		pointer-events: none;
	}

	#LP #header-bonus {
		background: url("https://www.fdj.fr/files/psel-assu-buteur-fond.png") no-repeat center/cover;
		display: flex;
		flex-direction: column;
		gap: 14px;
		align-items: center;
		justify-content: center;
		padding: 20px;
		position: relative;
	}

	#LP #header-bonus .cta {
		margin-bottom: 6px
	}

	#LP #header-bonus .condition {
		text-decoration: underline !important;
		color: hsla(0, 0%, 100%, .8);
		font-size: 12px;
		cursor: pointer;
	}

	#LP #header-bonus .condition:hover {
		color: #fff;
	}

	#LP .condition {
		display: inline-block;
		animation: pulseZoom 1.2s ease-in-out infinite;
	}

	@keyframes pulseZoom {

		0%,
		100% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.08);
		}
	}

	#LP #bonus {
		padding: 0px 16px;
	}

	#LP #bonus .liste {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-radius: 12px;
		overflow: hidden
	}

	#LP #bonus .liste .bonus {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 20px;
		padding: 40px 20px 20px 20px;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		position: relative;
		cursor: pointer;
	}

	#LP #bonus .liste .bonus>img {
		margin-bottom: 16px;
		position: relative;
		z-index: 2;
		transition: all .45s ease-in-out
	}

	#LP #bonus .liste .bonus .open {
		padding: 7px 18px;
		border-radius: 90px;
		background: #fff;
		font-family: "psel-ferveur";
		font-size: 13px;
		font-weight: 900;
		text-transform: uppercase;
		position: relative;
		z-index: 2;
		opacity: 1;
		color: #000046
	}

	#LP #bonus .liste .bonus .open:hover {
		background: #3aff3d
	}

	#LP #bonus .liste .bonus .left,
	#LP #bonus .liste .bonus .right {
		display: none
	}

	#LP #bonus .liste .bonus .fermer {
		background: #fff;
		display: flex;
		width: 24px;
		height: 24px;
		justify-content: center;
		align-items: center;
		border-radius: 100%;
		position: absolute;
		right: 14px;
		top: 14px;
		z-index: 2;
		cursor: pointer;
		transition: all .45s ease-in-out;
		opacity: 0;
		pointer-events: none
	}

	#LP #bonus .liste .bonus .fermer:hover {
		background: #3aff3d
	}

	#LP #bonus .liste .bonus:before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
		pointer-events: none;
		border-radius: 15px;
		z-index: 1;
	}

	#LP #bonus .liste-1 .bonus:nth-child(1) {
		background-image: url("https://www.fdj.fr/files/psel-assu-buteur-l1.jpg");
		background-position: center;
	}

	#LP #bonus .liste-1 .bonus:nth-child(1):before {
		background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
	}

	#LP #bonus .liste-1 .bonus:nth-child(2) {
		background-image: url("https://www.fdj.fr/files/psel-assu-buteur-pl.jpg");
		background-position: center;
	}

	#LP #bonus .liste-1 .bonus:nth-child(2):before {
		background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);

	}

	#LP #bonus .liste-1 .bonus:nth-child(3) {
		background-image: url("https://www.fdj.fr/files/psel-assu-buteur-laliga.jpg");
		background-position: center;
	}

	#LP #bonus .liste-1 .bonus:nth-child(3):before {
		background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
	}

	#LP #bonus .liste-2 .bonus:nth-child(1) {
		background-image: url("https://www.fdj.fr/files/psel-assu-buteur-bundesliga.jpg");
		background-position: center;
	}

	#LP #bonus .liste-2 .bonus:nth-child(1):before {
		background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
	}

	#LP #bonus .liste-2 .bonus:nth-child(2) {
		background-image: url("https://www.fdj.fr/files/psel-assu-buteur-seriea.jpg");
		background-position: center;
	}

	#LP #bonus .liste-2 .bonus:nth-child(2):before {
		background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
	}

	#LP #bonus .liste-2 .bonus:nth-child(3) {
		background-image: url("https://www.fdj.fr/files/psel-assu-buteur-autreschampionnats.jpg");
		background-position: center;
	}

	#LP #bonus .liste-2 .bonus:nth-child(3):before {
		background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
	}

	#LP #bonus .liste .bonus.actif .open {
		opacity: 0;
		pointer-events: none
	}

	#LP #bonus .liste .bonus.actif .fermer {
		opacity: 1;
		pointer-events: auto
	}

	#LP #bonus .liste .bonus.actif:before {
		opacity: 1
	}

	#LP #bonus .liste .bonus .contenu {
		position: relative;
		z-index: 2;
		display: none;
		margin-top: 30px;
	}

	#LP #bonus .liste .bonus .contenu h2 {
		color: #fff;
		font-family: "psel-ferveur";
		font-size: 20px;
		line-height: 120%;
		text-transform: uppercase;
		text-align: center;
		margin-bottom: 20px
	}

	#LP #bonus .liste .bonus .contenu h2 strong {
		font-weight: 900
	}

	#LP #bonus .liste .bonus .contenu .col {
		display: flex;
		flex-direction: column;
		gap: 20px;
		margin: 0 auto 20px auto;
		max-width: 1048px
	}

	#LP #bonus .liste .bonus .contenu .col .etapes {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: auto;
		gap: 5px;
		max-width: 600px;
	}

	/*#LP #bonus .liste .bonus .contenu .col .etapes .etape {
		border-radius: 8px;
		background: #000046;
		color: #fff;
		padding: 16px;
		display: flex;
		flex-direction: row;
		gap: 10px;
		align-items: center;
		width: -webkit-fill-available;
	}*/

	#LP #bonus .liste .bonus .contenu .col .etapes .etape .nb {
		font-size: 22px;
		font-family: "psel-ferveur";
		font-weight: 900;
		text-transform: uppercase
	}

	#LP #bonus .liste .bonus .contenu .col .etapes .etape .txt {
		font-size: 14px;
		font-weight: 300;
		line-height: 130%
	}

	#LP #bonus .liste .bonus .contenu .col .etapes .etape .txt strong {
		font-weight: bold
	}

	#LP #bonus .liste .bonus .contenu .col .cadre {
		flex: 1;
		color: #fff;
		font-size: 11px;
		font-weight: 300;
		line-height: 140%
	}

	#LP #bonus .liste .bonus .contenu .col .cadre strong {
		font-weight: bold
	}

	#LP .cadre p {
		font-weight: 400
	}

	#LP #slide {
		overflow: hidden;
		padding: 20px 0
	}

	#LP #slide h2 {
		font-family: "psel-ferveur";
		font-size: 20px;
		line-height: 120%;
		text-transform: uppercase;
		text-align: center;
		margin-bottom: 20px;
		padding: 0 20px
	}

	#LP #slide h2 strong {
		font-weight: 900
	}

	#LP #slide .splide {
		margin-bottom: 20px
	}

	#LP #slide .splide .splide__list {
		margin-left: 40px !important
	}

	#LP #slide .splide .splide__track {
		padding: 30px 0
	}

	#LP #slide .splide .splide__slide {
		margin-right: 0 !important;
		transition: all .8s ease-in-out;
		z-index: 1
	}

	#LP #slide .splide .splide__slide a {
		display: block;
		text-align: center
	}

	#LP #slide .splide .splide__slide a img {
		margin: 0 auto;
		transition: all .45s ease-in-out
	}

	#LP #slide .splide .splide__slide.custom-active {
		z-index: 3;
		scale: 1.3
	}

	#LP #slide .splide .splide__slide.custom-active img {
		box-shadow: 0px 0px 128.89px 0px #fff, 0px 0px 128.89px 0px #fff
	}

	#LP #bonus .liste .bonus {
		border-radius: 15px;
	}


	#LP #bonus .liste:nth-child(2) {
		margin-top: 20px;
	}



	@media(min-width: 1024px) {
		#LP #header-bonus {
			padding-top: 40px;
			gap: 20px
		}

		#LP #header-bonus .cta {
			margin-bottom: 20px
		}

		#LP #bonus .liste {
			flex-direction: row;
			gap: 20px;
			border-radius: 15px;
		}

		#LP #bonus .liste .bonus {
			height: 350px;
			justify-content: space-between;
			padding: 90px 35px 78px 35px;
			transition: all 1s ease-in-out;
			overflow: hidden;
			cursor: pointer;
		}

		#LP #bonus .liste .bonus .open {
			font-size: 14px;
			position: absolute;
			bottom: 78px
		}

		#LP #bonus .liste .bonus .fermer {
			right: 50%;
			top: 30px;
			transform: translateX(50%);
			scale: 1.3
		}

		#LP #bonus .liste .bonus .left,
		#LP #bonus .liste .bonus .right {
			background: #fff;
			display: flex;
			width: 32px;
			height: 32px;
			justify-content: center;
			align-items: center;
			border-radius: 100%;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			z-index: 10;
			cursor: pointer;
			opacity: 0;
			pointer-events: none;
			transition: all .45s ease-in-out
		}

		#LP #bonus .liste .bonus .left:hover,
		#LP #bonus .liste .bonus .right:hover {
			background: #3aff3d
		}

		#LP #bonus .liste .bonus .left {
			left: 40px
		}

		#LP #bonus .liste .bonus .right {
			right: 40px
		}

		#LP #bonus .liste .bonus .contenu {
			width: 50%;
			max-width: calc(100vw - 102px)
		}

		#LP #bonus .liste .bonus .contenu h2 {
			font-size: 25px;
			margin-bottom: 40px
		}

		#LP #bonus .liste .bonus .contenu .col {
			flex-direction: row
		}

		#LP #bonus .liste .bonus .contenu .col .cadre {
			max-height: 250px;
			overflow-y: auto
		}

		#LP #bonus .liste .bonus:before {
			transition: all 1s ease-in-out
		}

		#LP #bonus .liste .bonus.actif .left,
		#LP #bonus .liste .bonus.actif .right {
			opacity: 1;
			pointer-events: auto
		}

		#LP #bonus .liste:has(.actif) .bonus.actif {
			width: 100%;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			height: max-content;
		}

		#LP #bonus .liste:has(.actif) .bonus:not(.actif) {
			width: 0;
			padding: 0
		}

		#LP #bonus .liste:has(.actif) .bonus:not(.actif)>img,
		#LP #bonus .liste:has(.actif) .bonus:not(.actif) .open,
		#LP #bonus .liste:has(.actif) .bonus:not(.actif) .fermer {
			opacity: 0
		}

		#LP #slide {
			padding: 60px 0
		}

		#LP #slide h2 {
			margin: 0 auto 60px auto;
			width: 540px;
			font-size: 25px
		}

		#LP #slide .splide {
			margin-bottom: 40px
		}

		#LP #slide .splide .splide__list {
			margin-left: 150px !important
		}
	}

	.modal {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 10000;
		background: rgba(0, 0, 0, .9);
		display: none;
		flex-direction: column;
		justify-content: center;
		align-items: center
	}

	.modal .cadre {
		background: #fff;
		border-radius: 20px;
		padding: 40px 40px 40px 40px;
		width: 100%;
		max-width: 500px;
		position: relative;
		max-height: calc(100% - 150px);
		overflow-y: auto
	}

	.modal .cadre>.fermer {
		position: absolute;
		top: 15px;
		right: 15px;
		font-size: 20px;
		transition: all .45s ease-in-out;
		cursor: pointer
	}

	.modal .cadre>.fermer:hover {
		scale: 1.1
	}

	.modal .cadre .titre1 {
		font-family: "psel-ferveur";
		font-weight: 900;
		font-size: 25px;
		line-height: 27px;
		margin-bottom: 20px;
		text-transform: uppercase
	}

	.modal .cadre .titre2 {
		font-family: "psel-ferveur";
		font-weight: 900;
		font-size: 16px;
		margin-top: 20px;
		margin-bottom: 20px;
		text-transform: uppercase
	}

	#LP .gradient-text {
		background: linear-gradient(90deg,
				#00FF19 0%,
				#00FFA9 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		/* Pour Firefox */
		color: transparent;
		text-shadow: none;

	}

	#LP .plus-badge {
		display: inline-block;
		padding: 4px 10px;
		background: linear-gradient(90deg,
				#9BFF00 0%,
				#9BFF00 100%);
		border-radius: 5px;
		/* cercle/ovale */
		color: #000F55;
		font-weight: bold;
		font-size: 1em;
		line-height: 1;
	}

	#LP .content {
		padding: 40px 0px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	#LP .content p {
		margin: 0px auto 0px auto;
		max-width: 1100px;
	}

	#LP .etape-title {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		background-color: #000046;
		border-radius: 10px;
		padding: 0px 20px;
		z-index: 10;
	}

	#LP .badge-left {
		position: absolute;
		left: -50px;
		bottom: -110px;
		z-index: 10;
		rotate: -5deg;
	}

	#LP .badge-right {
		position: absolute;
		right: 50px;
		bottom: 0px;
		z-index: 10;
		rotate: -5deg;
	}

	.slider-img-tel {
		display: none;
		border-radius: 10px;
	}

	@media(max-width: 580px) {
		.slider-img-desk {
			display: none;
		}

		.slider-img-tel {
			display: block;
		}
	}

	@media(max-width: 1285px) {
		#LP .badge-left {
			bottom: 0px;
		}

		#LP h4 {
			margin-top: 30px;
		}
	}

	@media(max-width: 1115px) {
		#LP .badge-left {
			left: 10px;
			width: 150px;
		}

		#LP .badge-right {
			right: 10px;
			width: 150px;
		}

		#LP .content {
			max-width: 90%;
			margin: 0px auto 0px auto;
		}
	}

	@media(max-width: 768px) {

		#LP .badge-left,
		#LP .badge-right {
			bottom: -50px;
		}
	}

	@media(max-width: 1024px) {
		#LP #bonus .liste {
			gap: 20px;
		}

		#LP #bonus .liste .bonus .contenu {
			margin-top: -80px;
		}
	}

	@media(max-width: 580px) {

		#LP .badge-left,
		#LP .badge-right {
			width: 100px;
		}

		#LP h4 {
			font-size: 20px;
			line-height: 23px;
		}

		#LP h3 {
			font-size: 35px;
			line-height: 36px;
		}

		#LP .etape-title {
			padding: 3px 7px;
		}

		.etape details {
			width: 100% !important;
		}

		#LP #bonus .liste .bonus .contenu .col .etapes {
			display: flex;
			flex-direction: column;
			margin: 0;
			align-items: normal;
		}

		.etape details .selector-title {
			font-size: 26px !important;
			line-height: 27px !important;
		}

		.selector-content ul li {
			font-size: 13px;
			line-height: 14px;
		}
	}

	#LP .contenu ul {
		padding-left: 10px;
		font-weight: 400;
	}

	.etape details {
		border-radius: 10px;
		width: 500px;
		font-family: Montserrat;
		overflow: hidden;
	}

	.etape details .selector-title {
		font-family: psel-ferveur-compact;
		font-size: 30px;
		line-height: 30px;
	}


	.etape summary {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #000046;
		color: white;
		padding: 8px 16px;
		font-weight: bold;
		list-style: none;
		/* enlève la flèche native */
		cursor: pointer;
	}

	.etape summary::-webkit-details-marker {
		display: none;
		/* enlève la flèche native (Chrome/Safari) */
	}

	/* Flèche custom */
	.selector-arrow {
		transition: transform 0.3s ease;
	}

	details[open] .selector-arrow {
		transform: rotate(180deg);
	}

	/* Contenu */
	.selector-content {
		background: #f9f9f9;
		padding: 12px 16px;
	}

	.selector-title-bloc {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		gap: 10px;
	}

	#LP li {
		margin-left: 15px;
	}