.cta-btn{
	--h: 64px;
	--icon: 64px;
	position: relative;
	display: inline-flex;
	align-items: center;
	width: max-content;
	height: var(--h);
	cursor: pointer;
	text-decoration: none;
}

.cta-btn .cta-label{
	position: relative;
	z-index: 2;
	height:100%;
	padding: 0 30px;
	display:flex;
	align-items:center;
	justify-content:center;
	white-space:nowrap;
	font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif;
	font-weight:600;
	font-size:16px;
	border-radius: 999px;
	transition: transform .45s ease;
}

.cta-btn .cta-icon{
	flex: none;
	width: var(--icon);
	height: var(--icon);
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	transform-origin: center;
}

/* icône de droite : visible par défaut, dans le flux normal */
.cta-btn .cta-icon-right{
	position: static;
	transform: scale(1);
	opacity: 1;
	transition: transform .45s ease, opacity .45s ease;
}

/* icône de gauche : cachée par défaut (repliée), superposée sous le texte */
.cta-btn .cta-icon-left{
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	transform: scale(0);
	opacity: 0;
	transition: transform .45s ease, opacity .45s ease;
}

/* --- SURVOL (tout se produit en même temps) --- */
.cta-btn:hover .cta-label{
	transform: translateX(var(--icon));
	transition: transform .45s ease;
}
.cta-btn:hover .cta-icon-right{
	transform: scale(0);
	opacity: 0;
	transition: transform .45s ease, opacity .45s ease;
}
.cta-btn:hover .cta-icon-left{
	transform: scale(1);
	opacity: 1;
	transition: transform .45s ease, opacity .45s ease;
}

.cta-btn .cta-icon svg{ width:20px; height:18px; flex:none; }
.cta-btn .cta-icon svg *{ fill: currentColor; }

.theme-light .cta-label,
.theme-light .cta-icon{ background:#ffffff; color:#111111; }
.theme-light:hover .cta-icon-left{ background:#F26863; color:#0A0A0A; }

.theme-dark .cta-label,
.theme-dark .cta-icon{ background:#141414; color:#ffffff; }
.theme-dark:hover .cta-icon-left { color:#F26863; }

.theme-brand .cta-label,
.theme-brand .cta-icon{ background:#F26863; color:#ffffff; }
.theme-brand:hover .cta-icon-left { color:#0A0A0A; }

/* ---------- BADGE ---------- */
.cta-badge{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 30px;
	padding: 0 14px;
	border-radius: 4px;
	font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif;
	font-weight: 600;
	font-size: 14px;
	white-space: nowrap;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}

/* ---------- ICÔNE BOUCLE ---------- */
.cta-loop-icon{
	--loop-speed: 0.8s;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	overflow: hidden;
	cursor: pointer;
	text-decoration: none;
	border: none;
	padding: 0;
	background: #141414;
	color: #ffffff;
}

.cta-loop-icon .cta-loop-track{
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	height: 100%;
	width: 48px; /* 2 copies x 24px, pour une boucle parfaitement continue */
	transform: translateX(0);
}

.cta-loop-icon .cta-loop-icon-copy{
	flex: none;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cta-loop-icon .cta-loop-icon-copy svg{
	width: 12px;
	height: 12px;
	flex: none;
}
.cta-loop-icon .cta-loop-icon-copy svg *{ fill: currentColor; }

@keyframes cta-loop-move-right{
	from{ transform: translateX(0); }
	to{ transform: translateX(-24px); }
}
@keyframes cta-loop-move-left{
	from{ transform: translateX(-24px); }
	to{ transform: translateX(0); }
}

/* sens par défaut : l'icône part vers la droite et revient par la gauche */
.cta-loop-icon:hover .cta-loop-track{
	animation: cta-loop-move-right var(--loop-speed) linear infinite;
}

/* sens inversé */
.cta-loop-icon.is-reverse:hover .cta-loop-track{
	animation: cta-loop-move-left var(--loop-speed) linear infinite;
}

/* Déclenchement depuis un wrapper parent : ajoute la classe "ba-hover-trigger"
   (onglet Avancé > Classes CSS) sur n'importe quel conteneur/section Elementor
   qui englobe le widget "Icône Boucle". Survoler ce bloc animera l'icône,
   même si la souris n'est pas directement sur le cercle. */
.ba-hover-trigger:hover .cta-loop-icon:not(.is-reverse) .cta-loop-track{
	animation: cta-loop-move-right var(--loop-speed) linear infinite;
}
.ba-hover-trigger:hover .cta-loop-icon.is-reverse .cta-loop-track{
	animation: cta-loop-move-left var(--loop-speed) linear infinite;
}