.xd-pro-packs{
	color:#fff;
	position:relative;
	overflow:hidden;
}

.xd-pro-packs .xd-pp-grid{
	display:grid;
	grid-template-columns:minmax(320px,1.07fr) minmax(320px,.93fr);
	align-items:center;
	gap:134px;
}

.xd-pro-packs .xd-pp-left{
	min-width:0;
}

.xd-pro-packs .xd-pp-slider{
	position:relative;
	width:100%;
	min-height:520px;
	display:flex;
	align-items:center;
	justify-content:left;
}

.xd-pro-packs .xd-pp-slides{
	position:relative;
	width:100%;
	min-height:543px;
}

.xd-pro-packs .xd-pp-slide{
	position:absolute;
	inset:0;
	display:flex;
	align-items:center;
	justify-content:left;
	opacity:0;
	visibility:hidden;
	transform:translateY(14px) scale(.985);
	transition:opacity .28s ease, transform .28s ease, visibility .28s ease;
}

.xd-pro-packs .xd-pp-slide.is-active{
	opacity:1;
	visibility:visible;
	transform:translateY(0) scale(1);
}

.xd-pro-packs .xd-pp-slide img{
	display:block;
	max-width:100%;
	max-height:543px;
	width:auto;
	height:auto;
	object-fit:contain;
	filter:drop-shadow(0 18px 32px rgba(0,0,0,.38));
}

.xd-pro-packs .xd-pp-bottom-nav{
	display:flex;
	align-items:center;
	justify-content: center;
	gap:20px;
	margin-top:20px;
}

.xd-pro-packs .xd-pp-counter{
	display:flex;
	align-items:center;
	gap:16px;
	font-family:'Poppins', Helvetica, Arial, Lucida, sans-serif;
	font-size:18px;
	color:#fff;
	letter-spacing:.08em;
}

.xd-pro-packs .xd-pp-sep{
	--xd-pp-progress: 33.333%;
	position:relative;
	display:block;
	width:140px;
	height:2px;
	border-radius:999px;
	background:rgba(255,255,255,.78);
	overflow:hidden;
}

.xd-pro-packs .xd-pp-sep::before{
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:var(--xd-pp-progress);
	height:100%;
	border-radius:999px;
	background:#3f38ff;
	transition:width .35s ease;
}

.xd-pro-packs .xd-pp-arrows{
	display:flex;
	align-items:center;
	gap:16px;
}

.xd-pro-packs .xd-pp-arrow{
	width:60px;
	height:30px;
	border-radius:999px;
	border:1px solid rgba(255,255,255,.85);
	background:transparent;
	color:#fff;
	cursor:pointer;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	font-size:22px;
	line-height:1;
	transition:all .22s ease;
}

.xd-pro-packs .xd-pp-arrow:hover{
	background:#fff;
	color:#111;
}

.xd-pro-packs .xd-pp-right{
	min-width:0;
}

.xd-pro-packs .xd-pp-title{
	margin:0;
	font-family:'Poppins', Helvetica, Arial, Lucida, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.65rem;
    color: #FFFFFF !important;
}

.xd-pro-packs .xd-pp-tabs{
	display:flex;
	flex-wrap:wrap;
	gap:14px;
	margin-bottom:34px;
}

.xd-pro-packs .xd-pp-tab{
	appearance:none;
	font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif;
    background: #fff;
    color: #000;
	border:1px solid #fff;
    border-radius: 3px;
    padding: 7px 15px;
    font-weight: 800;
    font-size: 0.6rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
	transition:all .22s ease;
	cursor:pointer;
}

.xd-pro-packs .xd-pp-tab:hover,
.xd-pro-packs .xd-pp-tab.is-active{
	background: #000;
	border:1px solid #fff;
    color: #fff;
}

.xd-pro-packs .xd-pp-desc{
	font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif;
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.4rem;
    margin-top: 60px !important;
    margin-bottom: 40px !important;
}

.xd-pro-packs .xd-pp-desc p{
	margin:0 0 16px;
}

.xd-pro-packs .xd-pp-desc ul,
.xd-pro-packs .xd-pp-desc ol{
	margin:16px 0 16px 18px;
	padding:0 0 0 10px;
}

.xd-pro-packs .xd-pp-desc li{
	margin-bottom:8px;
}

.xd-pro-packs .xd-pp-cta-wrap{
	margin-top:36px;
}

.xd-pro-packs .xd-pp-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 2.5rem;

    color: #ffff !important;
    border: 2px solid #2414FF;
    border-radius: 6px;
    font-size: 0.91rem;
    font-family:'Poppins', Helvetica, Arial, Lucida, sans-serif;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;

    /* Le fond "normal" sera géré via ::after */
    background: transparent;

    /* Fallback si jamais la variable n'est pas définie */
    --hover-bg: #000;
}

/* Fond "normal" (état de repos) */
.xd-pro-packs .xd-pp-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;

    background-color: #2414FF; /* Fond d'origine */
}

/* Fond animé blanc */
.xd-pro-packs .xd-pp-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    background: #000;

    /* Effet initial : caché à gauche */
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.35s ease-out;
}

/* Hover : remplissage blanc */
.xd-pro-packs .xd-pp-cta:hover::before {
    transform: scaleX(1);
}

/* Texte devient foncé sur le fond blanc */
.xd-pro-packs .xd-pp-cta:hover {
    color: #2414FF !important;
}

.xd-pro-packs .xd-pp-items-data{
	display:none !important;
}

@media (max-width: 980px){
	.xd-pro-packs{
		padding:40px 24px;
	}

	.xd-pro-packs .xd-pp-grid{
		grid-template-columns:1fr;
		gap:34px;
	}

	.xd-pro-packs .xd-pp-slider,
	.xd-pro-packs .xd-pp-slides{
		min-height:340px;
	}

	.xd-pro-packs .xd-pp-slide img{
		max-height:320px;
	}

	.xd-pro-packs .xd-pp-bottom-nav{
		flex-direction:column;
		align-items:flex-start;
	}

	.xd-pro-packs .xd-pp-sep{
		width:90px;
	}

	.xd-pro-packs .xd-pp-title{
		font-size:34px;
	}

	.xd-pro-packs .xd-pp-cta{
		width:100%;
		min-width:0;
	}
}