/**
 * Pages programme : styles des deux CTA des cartes d'offres.
 * Les classes sont placees par abdos-offer-buttons.js sur les deux liens
 * dont les textes correspondent exactement aux offres Essentiel/Premium.
 */
.bfn-abdos-offer-cta,
.bfn-abdos-offer-cta:visited {
	background: #fe7541 !important;
	background-color: #fe7541 !important;
	background-image: none !important;
	border: 1px solid #fe7541 !important;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	text-decoration: none !important;
	transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease !important;
}

.bfn-abdos-offer-cta :is(span, .elementor-button-text, .elementor-button-icon, i, svg) {
	color: inherit !important;
	-webkit-text-fill-color: currentColor !important;
}

.bfn-abdos-offer-cta:hover,
.bfn-abdos-offer-cta:focus-visible {
	background: #ffffff !important;
	background-color: #ffffff !important;
	background-image: none !important;
	border-color: #000000 !important;
	color: #000000 !important;
	-webkit-text-fill-color: #000000 !important;
	text-decoration: none !important;
}

.bfn-abdos-offer-cta:is(:hover, :focus-visible) :is(span, .elementor-button-text, .elementor-button-icon, i, svg) {
	color: #000000 !important;
	-webkit-text-fill-color: #000000 !important;
}

.bfn-abdos-offer-cta:is(:hover, :focus-visible) svg {
	stroke: currentColor !important;
}

.bfn-abdos-offer-cta:focus-visible {
	outline: 3px solid rgba(254, 117, 65, 0.45) !important;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.bfn-abdos-offer-cta {
		transition: none !important;
	}
}


/* Entire Essentiel offer card is clickable on /programme-abdos/. */
.bfn-abdos-essential-card {
	cursor: pointer;
	transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.bfn-abdos-essential-card:hover,
.bfn-abdos-essential-card:focus-visible {
	border-color: rgba(254, 117, 65, 0.55) !important;
	box-shadow: 0 14px 34px rgba(24, 49, 60, 0.10);
	transform: translateY(-1px);
}

.bfn-abdos-essential-card:focus-visible {
	outline: 3px solid rgba(254, 117, 65, 0.35);
	outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.bfn-abdos-essential-card {
		transition: none !important;
		transform: none !important;
	}
}

/**
 * Le hero commun aux pages programme force ses deux lignes de titre en
 * nowrap dans le contenu Elementor. Sur un petit ecran, le texte depasse
 * alors la largeur du viewport et rend toute la page scrollable sur l'axe X.
 */
@media (max-width: 768px) {
	.hero-section-weightloss,
	.hero-weightloss-inner,
	.hero-content,
	.hero-title,
	.hero-buttons,
	.hero-stats {
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box;
	}

	.hero-title .line1,
	.hero-title .line2 {
		display: block !important;
		max-width: 100% !important;
		white-space: normal !important;
		overflow-wrap: anywhere;
	}

	.hero-badge,
	.hero-buttons > a {
		max-width: 100% !important;
		box-sizing: border-box;
		white-space: normal !important;
	}

	.hero-section-weightloss {
		overflow-x: clip;
	}
}

/**
 * Mobile : renforcer la lisibilite du texte noir superpose aux photos des
 * heroes programme, sans masquer completement l'image.
 */
@media (max-width: 768px) {
	.hero-section-weightloss {
		position: relative;
		isolation: isolate;
	}

	.hero-section-weightloss::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 0;
		pointer-events: none;
		background: linear-gradient(
			90deg,
			rgba(255, 255, 255, 0.92) 0%,
			rgba(255, 255, 255, 0.84) 52%,
			rgba(255, 255, 255, 0.68) 76%,
			rgba(255, 255, 255, 0.28) 100%
		);
	}

	.hero-weightloss-inner {
		position: relative;
		z-index: 1;
	}
}

/**
 * Mobile : rendre les badges d'introduction des pages programme lisibles
 * sur toutes les photos de hero, sans changer leur design desktop.
 */
@media (max-width: 768px) {
	.hero-badge {
		background: rgba(255, 248, 244, 0.96) !important;
		border: 1px solid rgba(244, 125, 66, 0.38) !important;
		color: #c9541f !important;
		-webkit-text-fill-color: #c9541f !important;
		font-weight: 800 !important;
		box-shadow: 0 8px 24px rgba(27, 32, 38, 0.12) !important;
		backdrop-filter: blur(4px);
		-webkit-backdrop-filter: blur(4px);
	}

	.hero-badge :is(span, strong, i, svg) {
		color: inherit !important;
		-webkit-text-fill-color: currentColor !important;
	}
}

@media (max-width: 768px) {
	.bfn-program-cta-compact {
		max-width: 100% !important;
		box-sizing: border-box !important;
		font-size: clamp(16px, 4.5vw, 19px) !important;
		padding-left: 16px !important;
		padding-right: 16px !important;
		white-space: nowrap !important;
	}

	.bfn-program-cta-compact :is(span, .elementor-button-text) {
		white-space: nowrap !important;
	}

	.bfn-program-badge-nowrap {
		width: auto !important;
		min-width: max-content !important;
		max-width: none !important;
		flex: 0 0 auto !important;
		white-space: nowrap !important;
		word-break: normal !important;
		overflow-wrap: normal !important;
		hyphens: none !important;
		-webkit-hyphens: none !important;
	}
}


/**
 * Override les styles Elementor/Astra apres avoir marque les deux CTA de l'offre.
 * La forte specificite evite que leur etat orange reprenne le dessus au survol.
 */
html body .elementor .elementor-widget-button a.elementor-button.bfn-abdos-offer-cta:is(:hover, :focus-visible),
html body .elementor .elementor-widget-button button.elementor-button.bfn-abdos-offer-cta:is(:hover, :focus-visible),
html body .elementor a.bfn-abdos-offer-cta:is(:hover, :focus-visible),
html body .elementor button.bfn-abdos-offer-cta:is(:hover, :focus-visible),
html body .elementor input.bfn-abdos-offer-cta:is(:hover, :focus-visible),
html body a.bfn-abdos-offer-cta:is(:hover, :focus-visible),
html body button.bfn-abdos-offer-cta:is(:hover, :focus-visible),
html body input.bfn-abdos-offer-cta:is(:hover, :focus-visible) {
	background: #ffffff !important;
	background-color: #ffffff !important;
	background-image: none !important;
	border: 1px solid #000000 !important;
	color: #000000 !important;
	-webkit-text-fill-color: #000000 !important;
	text-decoration: none !important;
}

html body .elementor .elementor-widget-button a.elementor-button.bfn-abdos-offer-cta:is(:hover, :focus-visible) :is(span, .elementor-button-text, .elementor-button-icon, i, svg),
html body .elementor .elementor-widget-button button.elementor-button.bfn-abdos-offer-cta:is(:hover, :focus-visible) :is(span, .elementor-button-text, .elementor-button-icon, i, svg),
html body .elementor .bfn-abdos-offer-cta:is(:hover, :focus-visible) :is(span, .elementor-button-text, .elementor-button-icon, i, svg),
html body .bfn-abdos-offer-cta:is(:hover, :focus-visible) :is(span, .elementor-button-text, .elementor-button-icon, i, svg) {
	color: #000000 !important;
	-webkit-text-fill-color: #000000 !important;
}

html body .elementor .bfn-abdos-offer-cta:is(:hover, :focus-visible)::before,
html body .elementor .bfn-abdos-offer-cta:is(:hover, :focus-visible)::after {
	background: #ffffff !important;
	background-color: #ffffff !important;
	background-image: none !important;
	opacity: 1 !important;
}


/* L'etat hover est pose aussi en inline par le script pour contrer les styles du theme. */
html body .elementor .bfn-abdos-offer-cta.bfn-abdos-offer-hovered,
html body .bfn-abdos-offer-cta.bfn-abdos-offer-hovered {
	background: #ffffff !important;
	background-color: #ffffff !important;
	background-image: none !important;
	border-color: #000000 !important;
	color: #000000 !important;
	-webkit-text-fill-color: #000000 !important;
}

html body .elementor .bfn-abdos-offer-cta.bfn-abdos-offer-hovered::before,
html body .elementor .bfn-abdos-offer-cta.bfn-abdos-offer-hovered::after,
html body .elementor .bfn-abdos-offer-cta.bfn-abdos-offer-hovered *::before,
html body .elementor .bfn-abdos-offer-cta.bfn-abdos-offer-hovered *::after {
	background: #ffffff !important;
	background-color: #ffffff !important;
	background-image: none !important;
	opacity: 1 !important;
}