/* Smooth monthly / annual selector inspired by the shared moving-indicator
 * navigation pattern. The pricing plugin keeps ownership of prices and cart
 * actions; this layer only follows its existing `.active` state. */

/* Shared Theme IA button presets. The pricing plugin keeps the original
 * buttons, IDs, loaders and click listeners; JS only decorates their internals. */
.lp-pricing-wrapper .action-button[data-tia-button-preset="legalprod-split-arrow"] {
	--tia-button-split-arrow-bg: var(--primary, #5233ff);
	--tia-button-split-arrow-border: var(--primary, #5233ff);
	--tia-button-split-arrow-text: #fff;
	--tia-button-split-arrow-panel-bg: rgba(255, 255, 255, .1);
	--tia-button-split-arrow-panel-border: rgba(255, 255, 255, .24);
	--tia-button-split-arrow-hover-panel-bg: var(--primary-dark, #4020e0);
	--tia-button-split-arrow-hover-panel-border: var(--primary-dark, #4020e0);
	background: var(--tia-button-split-arrow-bg);
	border: var(--tia-space-button-split-arrow-border-width) solid var(--tia-button-split-arrow-border);
	border-radius: var(--tia-radius-button-split-arrow);
	color: var(--tia-button-split-arrow-text);
	display: inline-flex;
	padding:
		var(--tia-space-button-split-arrow-padding-y)
		var(--tia-space-button-split-arrow-padding-right)
		var(--tia-space-button-split-arrow-padding-y)
		var(--tia-space-button-split-arrow-padding-left);
	transition:
		background-color var(--tia-duration-button-split-arrow) var(--tia-ease-button-split-arrow),
		border-color var(--tia-duration-button-split-arrow) var(--tia-ease-button-split-arrow),
		box-shadow var(--tia-duration-button-split-arrow) var(--tia-ease-button-split-arrow),
		color var(--tia-duration-button-split-arrow) var(--tia-ease-button-split-arrow);
}

.lp-pricing-wrapper .action-button[data-tia-button-preset="legalprod-split-arrow"]:is(:hover, :focus-visible) {
	background: var(--tia-button-split-arrow-bg);
	border-color: var(--tia-button-split-arrow-border);
	color: var(--tia-button-split-arrow-text);
}

.lp-pricing-wrapper .pricing-card-enterprise .addon-contact-btn[data-tia-button-preset="legalprod-split-arrow"] {
	font-size: 14px;
}

.lp-pricing-wrapper .addon-add-btn[data-tia-button-preset="legalprod-secondary-arrow"],
.lp-pricing-wrapper #credit-acheter-btn[data-tia-button-preset="legalprod-secondary-arrow"] {
	--tia-button-secondary-arrow-bg: var(--primary, #5233ff);
	--tia-button-secondary-arrow-border: var(--primary, #5233ff);
	--tia-button-secondary-arrow-text: #fff;
	--tia-button-secondary-arrow-hover-bg: var(--primary-dark, #4020e0);
	--tia-button-secondary-arrow-hover-border: var(--primary-dark, #4020e0);
	--tia-button-secondary-arrow-hover-text: #fff;
	background: var(--tia-button-secondary-arrow-bg);
	border: 1px solid var(--tia-button-secondary-arrow-border);
	border-radius: var(--tia-radius-button-split-arrow);
	color: var(--tia-button-secondary-arrow-text);
	min-height: var(--tia-space-button-split-arrow-height);
	padding:
		var(--tia-space-button-split-arrow-padding-y)
		var(--tia-space-button-split-arrow-padding-right)
		var(--tia-space-button-split-arrow-padding-y)
		var(--tia-space-button-split-arrow-padding-left);
	transition:
		background-color var(--tia-duration-button-split-arrow) var(--tia-ease-button-split-arrow),
		border-color var(--tia-duration-button-split-arrow) var(--tia-ease-button-split-arrow),
		color var(--tia-duration-button-split-arrow) var(--tia-ease-button-split-arrow);
}

/* Les deux commandes d'un module partagent exactement la même largeur.
 * Le CTA conserve son preset et sa flèche, avec un espacement interne adapté
 * à la largeur compacte du sélecteur de quantité. */
.lp-pricing-wrapper .addon-card-right {
	--lp-addon-control-height: 41px;
	--lp-addon-control-width: 108px;
}

.lp-pricing-wrapper .addon-card-right > :is(
	.addon-quantity,
	.addon-add-btn[data-tia-button-preset="legalprod-secondary-arrow"]
) {
	block-size: var(--lp-addon-control-height);
	box-sizing: border-box;
	flex: 0 0 var(--lp-addon-control-width);
	inline-size: var(--lp-addon-control-width);
	max-block-size: var(--lp-addon-control-height);
	min-block-size: var(--lp-addon-control-height);
	min-inline-size: var(--lp-addon-control-width);
	max-inline-size: var(--lp-addon-control-width);
}

.lp-pricing-wrapper .addon-card-right > .addon-add-btn[data-tia-button-preset="legalprod-secondary-arrow"] {
	--tia-space-button-split-arrow-gap: 4px;
	--tia-space-button-split-arrow-padding-left: 10px;
	--tia-space-button-split-arrow-padding-right: 10px;
	font-size: 14px;
	padding-block: 0;
}

.lp-pricing-wrapper :is(.addon-add-btn, #credit-acheter-btn)[data-tia-button-preset="legalprod-secondary-arrow"]:is(:hover, :focus-visible) {
	background: var(--tia-button-secondary-arrow-hover-bg);
	border-color: var(--tia-button-secondary-arrow-hover-border);
	color: var(--tia-button-secondary-arrow-hover-text);
}

.lp-pricing-wrapper :is(.action-button, .addon-add-btn)[data-tia-button-preset] > .tia-btn__label-clip > .btn-text {
	opacity: 1;
	transition:
		transform var(--tia-duration-button-split-arrow-label) var(--tia-ease-button-split-arrow-label),
		opacity 200ms ease;
}

.lp-pricing-wrapper :is(.action-button, .addon-add-btn)[data-tia-button-preset].loading > :is(.tia-btn__label-clip, .tia-btn__icon) {
	opacity: 0;
}

.lp-pricing-wrapper :is(.addon-add-btn, #credit-acheter-btn)[data-tia-button-preset="legalprod-secondary-arrow"].added {
	--tia-button-secondary-arrow-bg: #22c55e;
	--tia-button-secondary-arrow-border: #22c55e;
	--tia-button-secondary-arrow-hover-bg: #22c55e;
	--tia-button-secondary-arrow-hover-border: #22c55e;
	background: #22c55e;
	border-color: #22c55e;
	color: #fff;
}

/* Modules / crédits : le même CTA secondaire rectangulaire que sur le reste
 * du site, tout en conservant les IDs, aria-expanded et panneaux existants. */
.lp-pricing-wrapper .addons-toggle-wrap {
	max-width: 900px;
}

.lp-pricing-wrapper .addons-toggle,
.lp-pricing-wrapper .addons-toggle:is(:hover, :focus-visible) {
	border-radius: var(--tia-radius-button-split-arrow, 13px);
	transform: none;
}

.lp-pricing-wrapper .addons-toggle[data-tia-button-preset="legalprod-secondary-arrow"] {
	--tia-button-secondary-arrow-bg: #fff;
	--tia-button-secondary-arrow-border: rgba(82, 51, 255, .24);
	--tia-button-secondary-arrow-text: var(--text, #1e1e1e);
	--tia-button-secondary-arrow-hover-bg: #f7f6ff;
	--tia-button-secondary-arrow-hover-border: var(--primary, #5233ff);
	--tia-button-secondary-arrow-hover-text: var(--primary, #5233ff);
	background: var(--tia-button-secondary-arrow-bg);
	border: var(--tia-space-button-split-arrow-border-width) solid var(--tia-button-secondary-arrow-border);
	border-radius: var(--tia-radius-button-split-arrow);
	box-shadow: none;
	color: var(--tia-button-secondary-arrow-text);
	flex: 1 1 340px;
	font-size: 16px;
	font-weight: 720;
	gap: 18px;
	justify-content: space-between;
	max-width: 440px;
	min-height: var(--tia-space-button-split-arrow-height);
	padding:
		var(--tia-space-button-split-arrow-padding-y)
		var(--tia-space-button-split-arrow-padding-right)
		var(--tia-space-button-split-arrow-padding-y)
		var(--tia-space-button-split-arrow-padding-left);
	text-align: left;
	transform: none;
}

.lp-pricing-wrapper .addons-toggle[data-tia-button-preset="legalprod-secondary-arrow"]:is(:hover, :focus-visible) {
	background: var(--tia-button-secondary-arrow-hover-bg);
	border-color: var(--tia-button-secondary-arrow-hover-border);
	box-shadow: none;
	color: var(--tia-button-secondary-arrow-hover-text);
	transform: none;
}

.lp-pricing-wrapper .addons-toggle.open[data-tia-button-preset="legalprod-secondary-arrow"],
.lp-pricing-wrapper .addons-toggle.open[data-tia-button-preset="legalprod-secondary-arrow"]:is(:hover, :focus-visible) {
	--tia-button-secondary-arrow-bg: var(--primary, #5233ff);
	--tia-button-secondary-arrow-border: var(--primary, #5233ff);
	--tia-button-secondary-arrow-text: #fff;
	--tia-button-secondary-arrow-hover-bg: var(--primary, #5233ff);
	--tia-button-secondary-arrow-hover-border: var(--primary, #5233ff);
	--tia-button-secondary-arrow-hover-text: #fff;
	background: var(--primary, #5233ff);
	border-color: var(--primary, #5233ff);
	box-shadow: none;
	color: #fff;
}

.lp-pricing-wrapper .addons-toggle.open[data-tia-button-preset="legalprod-secondary-arrow"] > .tia-btn__icon {
	transform: rotate(90deg);
}

.lp-pricing-wrapper .addons-toggle.open[data-tia-button-preset="legalprod-secondary-arrow"]:is(:hover, :focus-visible) > .tia-btn__icon {
	transform: translate3d(var(--tia-space-button-split-arrow-icon-shift), 0, 0) rotate(90deg);
}

@media (max-width: 767px) {
	.lp-pricing-wrapper .addons-toggle[data-tia-button-preset="legalprod-secondary-arrow"] {
		--tia-space-button-split-arrow-label-shift: 2.5em;
		flex: 0 0 auto;
		font-size: 14px;
		height: auto;
		line-height: 1.15;
		max-width: none;
		min-height: var(--tia-space-button-split-arrow-height);
		width: 100%;
	}

	.lp-pricing-wrapper .addons-toggle[data-tia-button-preset="legalprod-secondary-arrow"] > .tia-btn__label-clip > .tia-btn__label {
		white-space: normal;
	}

	/* Le faux bandeau de la page ne depasse plus sous le header mobile. Le
	 * margin negatif de la section suivante place alors le blanc a 73px. */
	body.page-id-2119.lptia-bridge-active #lp2119_section_1 {
		height: 83px !important;
	}

	/* Le bandeau absolu de l'offre Pro fait partie de sa silhouette visuelle.
	 * Cette marge lui donne le meme espace que les deux autres offres. */
	body.page-id-2119.lptia-bridge-active .lp-pricing-wrapper .pricing-card.featured {
		margin-top: 64px !important;
	}

	body.page-id-2119.lptia-bridge-active #tia-price-included {
		margin-top: 16px;
	}

	/* Les deux groupes de cartes sont deux grilles distinctes : restitue le
	 * meme espacement a leur jonction que celui des cartes d'une meme grille. */
	body.page-id-2119.lptia-bridge-active #lp2119_row_20 + #lp2119_row_27 {
		margin-top: 20px;
	}
}

/* Sur telephone, le diagramme desktop devient deux rails compacts autour du
 * coeur LegalProd. Tous les outils restent accessibles sans creer une liste
 * verticale de pres de deux ecrans. */
@media (max-width: 560px) {
	body.page-id-2119.lptia-bridge-active .lp-price-stack-map {
		padding: 58px 14px 20px;
	}

	body.page-id-2119.lptia-bridge-active .lp-price-stack-map__layout {
		gap: 18px;
	}

	body.page-id-2119.lptia-bridge-active .lp-price-stack-map__side {
		display: flex;
		align-items: stretch;
		gap: 10px;
		overflow-x: auto;
		padding: 2px 0 10px;
		scroll-padding-inline: 2px;
		scroll-snap-type: x mandatory;
		scrollbar-color: rgba(201, 201, 206, .42) transparent;
		scrollbar-width: thin;
		overscroll-behavior-inline: contain;
		-webkit-overflow-scrolling: touch;
	}

	body.page-id-2119.lptia-bridge-active .lp-price-stack-map__side::-webkit-scrollbar {
		height: 4px;
	}

	body.page-id-2119.lptia-bridge-active .lp-price-stack-map__side::-webkit-scrollbar-thumb {
		border-radius: 999px;
		background: rgba(201, 201, 206, .42);
	}

	body.page-id-2119.lptia-bridge-active .lp-price-stack-map__side .lp-price-tool-cluster,
	body.page-id-2119.lptia-bridge-active .lp-price-stack-map__side .lp-price-tool-cluster:last-child:nth-child(odd) {
		box-sizing: border-box;
		flex: 0 0 min(82%, 220px);
		grid-column: auto;
		padding: 14px;
		border: 1px solid rgba(255, 255, 255, .09);
		border-radius: 16px;
		background: rgba(255, 255, 255, .035);
		scroll-snap-align: start;
	}

	body.page-id-2119.lptia-bridge-active .lp-price-stack-map__hub {
		margin: 0;
		padding: 18px;
		border-radius: 20px;
	}

	body.page-id-2119.lptia-bridge-active .lp-price-stack-map__hub-brand {
		margin-bottom: 16px;
	}

	body.page-id-2119.lptia-bridge-active .lp-price-stack-map__modules {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 6px;
	}

	body.page-id-2119.lptia-bridge-active .lp-price-stack-map__modules span {
		min-height: 42px;
		padding: 7px 8px;
		font-size: 9.5px;
	}
}

.lp-pricing-wrapper .billing-options[data-lp-billing-motion-ready="true"] {
	isolation: isolate;
	overflow: hidden;
	position: relative;
}

.lp-pricing-wrapper .billing-options .lp-billing-period-indicator {
	background: var(--primary, #5233ff);
	border-radius: 50em;
	box-shadow: 0 4px 14px rgba(82, 51, 255, 0.28);
	pointer-events: none;
	position: absolute;
	z-index: 0;
}

.lp-pricing-wrapper .billing-options.is-billing-motion-ready .lp-billing-period-indicator {
	transition:
		left 720ms cubic-bezier(0.16, 1, 0.3, 1),
		top 720ms cubic-bezier(0.16, 1, 0.3, 1),
		width 720ms cubic-bezier(0.16, 1, 0.3, 1),
		height 720ms cubic-bezier(0.16, 1, 0.3, 1),
		box-shadow 360ms ease !important;
}

.lp-pricing-wrapper
	.billing-options[data-lp-billing-motion-ready="true"]
	.billing-option {
	background: transparent !important;
	box-shadow: none !important;
	position: relative;
	transition: color 300ms cubic-bezier(0.16, 1, 0.3, 1) !important;
	z-index: 1;
}

.lp-pricing-wrapper
	.billing-options[data-lp-billing-motion-ready="true"]
	.billing-option.active,
.lp-pricing-wrapper
	.billing-options[data-lp-billing-motion-ready="true"]
	.billing-option.active.current-config {
	background: transparent !important;
	box-shadow: none !important;
	color: #fff;
}

.lp-pricing-wrapper
	.billing-options[data-lp-billing-motion-ready="true"]
	.billing-option:focus-visible {
	outline: 2px solid rgba(82, 51, 255, 0.42);
	outline-offset: 2px;
}

/* Les panneaux de modules et de credits sont pilotes par le calculateur de
 * prix via la classe `.open`. Cette couche conserve cette logique metier et
 * rend uniquement l'ouverture/fermeture plus progressive. */
.lp-pricing-wrapper .addons-section,
.lp-pricing-wrapper .credits-section {
	transform-origin: top center;
	transition:
		grid-template-rows 620ms cubic-bezier(0.16, 1, 0.3, 1),
		opacity 320ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 560ms cubic-bezier(0.16, 1, 0.3, 1),
		visibility 0s linear 620ms;
}

.lp-pricing-wrapper .addons-section.open,
.lp-pricing-wrapper .credits-section.open {
	transition-delay: 0s;
}

/* Le padding de la grille imposait encore une petite hauteur au panneau
 * ferme. Il participe maintenant a la transition et disparait totalement. */
.lp-pricing-wrapper .addons-section > .addons-grid {
	padding-bottom: 0;
	padding-top: 0;
	transition:
		padding-top 560ms cubic-bezier(0.16, 1, 0.3, 1),
		padding-bottom 560ms cubic-bezier(0.16, 1, 0.3, 1);
}

.lp-pricing-wrapper .addons-section.open > .addons-grid {
	padding-bottom: 4px;
	padding-top: 24px;
}

.lp-pricing-wrapper .addons-section .addon-card,
.lp-pricing-wrapper .credits-section .credit-card {
	transform: translateY(16px) scale(0.985);
	transition:
		opacity 360ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 500ms cubic-bezier(0.16, 1, 0.3, 1),
		border-color 300ms ease,
		box-shadow 300ms ease;
}

.lp-pricing-wrapper .addons-section.open .addon-card,
.lp-pricing-wrapper .credits-section.open .credit-card {
	transform: translateY(0) scale(1);
}

.lp-pricing-wrapper .addons-section.open .addon-card:nth-child(1) {
	transition-delay: 70ms;
}

.lp-pricing-wrapper .addons-section.open .addon-card:nth-child(2) {
	transition-delay: 125ms;
}

.lp-pricing-wrapper .addons-section.open .addon-card:nth-child(3) {
	transition-delay: 180ms;
}

.lp-pricing-wrapper .addons-section.open .addon-card:nth-child(4) {
	transition-delay: 235ms;
}

.lp-pricing-wrapper .credits-section.open .credit-card {
	transition-delay: 80ms;
}

@media (prefers-reduced-motion: reduce) {
	/* Ces deux ouvertures restent volontairement douces et courtes : elles ont
	 * ete explicitement demandees et evitent le saut brutal du contenu. */
	.lp-pricing-wrapper .addons-section,
	.lp-pricing-wrapper .credits-section {
		transition-duration: 520ms, 280ms, 460ms, 0s !important;
	}

	.lp-pricing-wrapper .addons-section > .addons-grid {
		transition-duration: 460ms, 460ms !important;
	}

	.lp-pricing-wrapper .addons-section .addon-card,
	.lp-pricing-wrapper .credits-section .credit-card {
		transition-duration: 320ms, 440ms, 300ms, 300ms !important;
	}
}