/* Copie du design du site vitrine Spliink (thème spliink-theme, assets/css/site.css), réutilisé pour l'espace client. */
/* WordPress ajoute automatiquement une marge en haut à chaque enfant (sauf le premier)
   d'un bloc Groupe en layout "flow" (règle .is-layout-flow > * + *), pour espacer des
   blocs empilés verticalement. Sur nos conteneurs recomposés en grid/flex (colonnes),
   cette marge fait démarrer le 1er enfant plus haut que les suivants — d'où des cartes
   qui semblaient "plus hautes". On neutralise cette marge partout où le gap CSS gère
   déjà l'espacement. */
.spliink-feature-grid > *,
.spliink-feature-grid-v2 > *,
.spliink-pricing-grid > *,
.spliink-steps-grid > *,
.spliink-usecase-stack > *,
.spliink-demo-row > *,
.spliink-recap-rows > *,
.spliink-recap-header > * {
	margin-top: 0 !important;
}

/* Bandeau CTA final sombre + footer, façon payylo.com. */
.spliink-dark-outro {
	background: #0B0F1A;
	color: #E7E9F0;
}

.spliink-final-cta {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}

.spliink-final-cta h2 {
	color: #FFFFFF;
	font-size: clamp(1.85rem, 1.85rem + 2vw, 2.75rem);
	line-height: 1.15;
	margin: 0 0 16px;
}

.spliink-final-cta-gradient {
	background: linear-gradient(120deg, #A5A3F5 0%, #C9B8FF 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.spliink-final-cta p {
	color: #A3A8BC;
	font-size: 1.05rem;
	margin: 0 0 28px;
}

.spliink-footer-columns {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 40px;
	padding-top: 48px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

@media (max-width: 782px) {
	.spliink-footer-columns {
		grid-template-columns: 1fr;
	}
}

.spliink-footer-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.spliink-footer-brand-mark {
	width: 32px;
	height: 32px;
	border-radius: 9px;
	background: linear-gradient(120deg, #5D5CE0, #706FEC);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	flex-shrink: 0;
}

.spliink-footer-brand span {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1.15rem;
	color: #fff;
}

.spliink-footer-columns p {
	color: #A3A8BC;
	font-size: 0.92rem;
	line-height: 1.6;
	max-width: 320px;
}

.spliink-footer-social {
	display: flex;
	gap: 14px;
	margin-top: 16px;
}

.spliink-footer-social a {
	color: #A3A8BC;
	display: inline-flex;
}

.spliink-footer-social a:hover {
	color: #fff;
}

.spliink-footer-columns h3 {
	color: #fff;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0 0 16px;
}

.spliink-footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.spliink-footer-links a {
	color: #A3A8BC;
	font-size: 0.92rem;
	text-decoration: none;
}

.spliink-footer-links a:hover {
	color: #fff;
}

.spliink-footer-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 0.85rem;
	color: #7B8094;
}

.spliink-footer-bottom-links {
	display: flex;
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.spliink-footer-bottom-links a {
	color: #7B8094;
	text-decoration: none;
}

.spliink-footer-bottom-links a:hover {
	color: #fff;
}

/* ===== Dashboard Spliink v2 — sidebar + cartes façon Alma/WP Umbrella =====
   Démonstration visuelle uniquement : aucune donnée réelle, aucun paiement traité. */

.spliink-dash-shell {
	display: flex;
	align-items: flex-start;
}

@media (max-width: 900px) {
	.spliink-dash-shell {
		flex-direction: column;
	}
}

.spliink-dash-sidebar {
	width: 248px;
	flex-shrink: 0;
	position: sticky;
	top: 0;
	height: 100vh;
	padding: 20px 16px 20px;
	box-sizing: border-box;
	border-right: 1px solid var(--wp--preset--color--accent-5);
	background: var(--wp--preset--color--base);
	display: flex;
	flex-direction: column;
}

@media (max-width: 900px) {
	.spliink-dash-sidebar {
		position: static;
		width: 100%;
		height: auto;
		border-right: none;
		border-bottom: 1px solid var(--wp--preset--color--accent-5);
	}
}

.spliink-dash-sidebar-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px 20px;
	text-decoration: none;
	color: inherit;
}

.spliink-dash-sidebar-brand span {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1.1rem;
}

.spliink-dash-sidebar-nav {
	display: flex;
	flex-direction: column;
}

.spliink-dash-sidebar-account {
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--wp--preset--color--accent-5);
}

@media (max-width: 900px) {
	.spliink-dash-sidebar-account {
		margin-top: 20px;
		border-top: none;
	}
}

.spliink-dash-sidebar-account-label {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-2);
	margin: 0 0 4px;
	padding: 0 10px;
}

.spliink-dash-sidebar-account-name {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 8px;
	padding: 0 10px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.spliink-dash-sidebar-logout {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-radius: 8px;
	color: var(--wp--preset--color--contrast-2);
	font-size: 0.85rem;
	text-decoration: none;
}

.spliink-dash-sidebar-logout:hover {
	background: var(--wp--preset--color--base-2);
	color: var(--wp--preset--color--contrast);
}

.spliink-dash-nav-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 14px;
	border-radius: 10px;
	color: var(--wp--preset--color--contrast-2);
	font-weight: 500;
	font-size: 0.92rem;
	cursor: pointer;
	margin-bottom: 2px;
	border: none;
	background: transparent;
	width: 100%;
	text-align: left;
	font-family: var(--wp--preset--font-family--body);
	white-space: nowrap;
}

@media (max-width: 900px) {
	.spliink-dash-nav-item {
		width: auto;
	}
}

.spliink-dash-nav-item:hover {
	background: var(--wp--preset--color--base-2);
}

.spliink-dash-nav-item.is-active {
	background: var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--accent);
	font-weight: 600;
}

.spliink-dash-nav-icon {
	display: inline-flex;
	flex-shrink: 0;
}

.spliink-dash-main {
	flex: 1;
	min-width: 0;
	padding: 32px 40px 64px;
	box-sizing: border-box;
}

@media (max-width: 900px) {
	.spliink-dash-main {
		padding: 24px 16px 48px;
	}
}

.spliink-dash-panel {
	display: none;
}

.spliink-dash-panel.is-active {
	display: block;
}

.spliink-dash-panel-title {
	margin: 0 0 4px;
}

.spliink-dash-panel-desc {
	color: var(--wp--preset--color--contrast-2);
	margin: 0 0 28px;
}

/* Bandeau "profil à compléter" — priorité visuelle haute */
.spliink-profile-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	background: #FFF7ED;
	border: 1px solid #FDBA74;
	border-radius: 18px;
	padding: 22px 26px;
	margin-bottom: 28px;
}

.spliink-profile-banner-text {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.spliink-profile-banner-icon {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: #FED7AA;
	color: #B45309;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.spliink-profile-banner-title {
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 4px;
	font-size: 1rem;
}

.spliink-profile-banner-desc {
	font-size: 0.88rem;
	color: var(--wp--preset--color--contrast-2);
	margin: 0;
	max-width: 480px;
}

.spliink-profile-banner-cta {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 42px;
	padding: 0 20px;
	border-radius: 9999px;
	background: #F59E0B;
	color: #fff;
	font-size: 0.88rem;
	font-weight: 600;
	border: none;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--heading);
	text-decoration: none;
}

/* Badge discret une fois le profil complet */
.spliink-status-pill {
	display: none;
	align-items: center;
	gap: 8px;
	background: #ECFDF5;
	border: 1px solid #6EE7B7;
	color: #047857;
	border-radius: 9999px;
	padding: 8px 16px;
	font-size: 0.85rem;
	font-weight: 600;
	margin-bottom: 28px;
	width: fit-content;
}

.spliink-status-pill-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #10B981;
}

.is-profile-complete .spliink-profile-banner {
	display: none;
}

.is-profile-complete .spliink-status-pill {
	display: inline-flex;
}

/* Cartes façon Alma : blanches, sobres, hiérarchie claire */
.spliink-overview-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

@media (max-width: 900px) {
	.spliink-overview-grid {
		grid-template-columns: 1fr;
	}
}

.spliink-alma-card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--accent-5);
	border-radius: 18px;
	padding: 24px;
}

.spliink-alma-card-label {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-2);
	margin: 0 0 16px;
}

.spliink-alma-card-main {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 6px;
}

.spliink-alma-card-sub {
	font-size: 0.85rem;
	color: var(--wp--preset--color--contrast-2);
	margin: 0;
}

.spliink-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 9999px;
	font-size: 0.75rem;
	font-weight: 700;
}

.spliink-badge.is-success {
	background: #ECFDF5;
	color: #047857;
}

.spliink-badge.is-neutral {
	background: var(--wp--preset--color--base-2);
	color: var(--wp--preset--color--contrast-2);
}

.spliink-badge-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.spliink-empty-chart {
	margin-top: 14px;
	height: 64px;
	border-radius: 10px;
	background: repeating-linear-gradient(
		90deg,
		var(--wp--preset--color--base-2),
		var(--wp--preset--color--base-2) 6px,
		var(--wp--preset--color--base) 6px,
		var(--wp--preset--color--base) 12px
	);
	display: flex;
	align-items: flex-end;
	gap: 6px;
	padding: 8px;
	box-sizing: border-box;
}

.spliink-empty-chart span {
	flex: 1;
	background: var(--wp--preset--color--accent-5);
	border-radius: 3px 3px 0 0;
	height: 15%;
}

/* Statistiques (vue dédiée) */
.spliink-stats-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-bottom: 24px;
}

@media (max-width: 900px) {
	.spliink-stats-grid {
		grid-template-columns: 1fr;
	}
}

.spliink-empty-state {
	background: var(--wp--preset--color--base);
	border: 1px dashed var(--wp--preset--color--accent-5);
	border-radius: 18px;
	padding: 48px 24px;
	text-align: center;
}

.spliink-empty-state-icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--accent);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px;
}

.spliink-empty-state-title {
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 6px;
}

.spliink-empty-state-desc {
	font-size: 0.88rem;
	color: var(--wp--preset--color--contrast-2);
	margin: 0;
	max-width: 360px;
	margin-left: auto;
	margin-right: auto;
}

/* Paramètres */
.spliink-settings-section {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--accent-5);
	border-radius: 18px;
	padding: 28px;
	margin-bottom: 20px;
}

.spliink-settings-section h3 {
	margin: 0 0 4px;
	font-size: 1.05rem;
}

.spliink-settings-section-desc {
	font-size: 0.85rem;
	color: var(--wp--preset--color--contrast-2);
	margin: 0 0 20px;
}

.spliink-settings-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

@media (max-width: 600px) {
	.spliink-settings-row {
		grid-template-columns: 1fr;
	}
}

.spliink-upload-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	border-radius: 12px;
	background: var(--wp--preset--color--base-2);
	margin-bottom: 10px;
}

.spliink-upload-row:last-child {
	margin-bottom: 0;
}

.spliink-upload-label {
	font-size: 0.9rem;
	color: var(--wp--preset--color--contrast);
}

.spliink-upload-btn {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	height: 34px;
	padding: 0 14px;
	border-radius: 9999px;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--accent-5);
	color: var(--wp--preset--color--contrast);
	font-size: 0.8rem;
	font-weight: 600;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--heading);
}

/* Support */
.spliink-support-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

@media (max-width: 600px) {
	.spliink-support-grid {
		grid-template-columns: 1fr;
	}
}

.spliink-support-card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--accent-5);
	border-radius: 18px;
	padding: 26px;
}

.spliink-support-card-icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--accent);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 14px;
}

.spliink-support-card h3 {
	margin: 0 0 6px;
	font-size: 1rem;
}

.spliink-support-card p {
	font-size: 0.88rem;
	color: var(--wp--preset--color--contrast-2);
	margin: 0 0 16px;
}

.spliink-support-card a.spliink-text-link {
	color: var(--wp--preset--color--accent);
	font-weight: 600;
	font-size: 0.88rem;
	text-decoration: none;
}

/* ===== Parcours e-commerce mockup (paiement / création de compte / dashboard) =====
   Démonstration visuelle uniquement : aucun paiement réel, aucune logique de facturation. */

.spliink-mock-banner {
	max-width: 720px;
	margin: 0 auto 32px;
	padding: 10px 18px;
	border-radius: 12px;
	background: var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--accent);
	font-size: 0.82rem;
	font-weight: 600;
	text-align: center;
}

.spliink-steps-indicator {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
	margin-bottom: 40px;
	flex-wrap: wrap;
}

.spliink-steps-indicator .spliink-step {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.88rem;
	color: var(--wp--preset--color--contrast-2);
}

.spliink-steps-indicator .spliink-step-num {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--accent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.78rem;
	flex-shrink: 0;
}

.spliink-steps-indicator .spliink-step.is-active .spliink-step-num {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

.spliink-steps-indicator .spliink-step.is-active .spliink-step-label {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

.spliink-steps-indicator .spliink-step-sep {
	width: 28px;
	height: 1px;
	background: var(--wp--preset--color--accent-5);
}

/* Formulaires (paiement + création de compte) */
.spliink-form-field {
	margin-bottom: 18px;
}

.spliink-form-field label {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	margin-bottom: 6px;
}

.spliink-fake-input,
.spliink-fake-select {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border: 1px solid var(--wp--preset--color--accent-5);
	border-radius: 10px;
	font-size: 0.95rem;
	font-family: var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
}

.spliink-fake-input:focus,
.spliink-fake-select:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 3px rgba(93, 92, 224, 0.15);
}

.spliink-form-row-2 {
	display: flex;
	gap: 14px;
}

.spliink-form-row-2 .spliink-form-field {
	flex: 1 1 0;
	min-width: 0;
}

.spliink-form-note {
	font-size: 0.78rem;
	color: var(--wp--preset--color--contrast-2);
	margin-top: -6px;
	margin-bottom: 18px;
}

/* Page paiement : formulaire + récap côte à côte */
.spliink-checkout-row {
	display: flex;
	gap: 56px;
	align-items: flex-start;
	max-width: 1000px;
	margin: 0 auto;
}

@media (max-width: 782px) {
	.spliink-checkout-row {
		flex-direction: column;
	}
}

.spliink-checkout-form {
	flex: 1.3 1 0;
	min-width: 0;
}

.spliink-checkout-summary {
	flex: 1 1 0;
	min-width: 0;
}

.spliink-summary-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 0;
	border-bottom: 1px solid var(--wp--preset--color--accent-5);
	font-size: 0.92rem;
}

.spliink-summary-row:last-of-type {
	border-bottom: none;
}

.spliink-summary-row.is-total {
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--wp--preset--color--contrast);
	padding-top: 16px;
}

.spliink-summary-row span:first-child {
	color: var(--wp--preset--color--contrast-2);
}

/* Page création de compte : formulaire centré */
.spliink-signup-card {
	max-width: 480px;
	margin: 0 auto;
}

/* Dashboard */
.spliink-dashboard-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--accent-5);
	padding: 16px var(--wp--preset--spacing--50);
}

.spliink-dashboard-header-inner {
	max-width: 1152px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.spliink-dashboard-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: inherit;
}

.spliink-dashboard-brand .spliink-logo-mark {
	width: 32px;
	height: 32px;
	border-radius: 8px;
}

.spliink-dashboard-brand span {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1.05rem;
}

.spliink-dashboard-account {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 0.88rem;
	color: var(--wp--preset--color--contrast-2);
}

.spliink-dashboard-account a {
	color: var(--wp--preset--color--contrast-2);
	text-decoration: none;
}

.spliink-dashboard-account a:hover {
	color: var(--wp--preset--color--accent);
}

@media (max-width: 600px) {
	.spliink-dashboard-header-inner {
		flex-wrap: wrap;
		row-gap: 8px;
	}

	.spliink-dashboard-account {
		font-size: 0.82rem;
		gap: 12px;
	}
}

.spliink-status-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	padding: 20px 24px;
	border-radius: 20px;
	margin-bottom: 32px;
	background: #FFF7ED;
	border: 1px solid #FDBA74;
}

.spliink-status-banner.is-live {
	background: #ECFDF5;
	border-color: #6EE7B7;
}

.spliink-status-banner-text {
	display: flex;
	align-items: center;
	gap: 12px;
}

.spliink-status-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #F59E0B;
	flex-shrink: 0;
}

.spliink-status-banner.is-live .spliink-status-dot {
	background: #10B981;
}

.spliink-status-banner-title {
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	margin: 0;
}

.spliink-status-banner-desc {
	font-size: 0.85rem;
	color: var(--wp--preset--color--contrast-2);
	margin: 2px 0 0;
}

.spliink-dashboard-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-bottom: 32px;
}

@media (max-width: 900px) {
	.spliink-dashboard-grid {
		grid-template-columns: 1fr;
	}
}

.spliink-stat-tile {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--accent-5);
	border-radius: 16px;
	padding: 20px;
}

.spliink-stat-tile-label {
	font-size: 0.8rem;
	color: var(--wp--preset--color--contrast-2);
	margin: 0 0 8px;
}

.spliink-stat-tile-value {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	margin: 0;
}

.spliink-dashboard-section {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--accent-5);
	border-radius: 20px;
	padding: 28px;
	margin-bottom: 24px;
}

.spliink-dashboard-section h3 {
	margin: 0 0 4px;
	font-size: 1.1rem;
}

.spliink-dashboard-section-desc {
	font-size: 0.88rem;
	color: var(--wp--preset--color--contrast-2);
	margin: 0 0 20px;
}

.spliink-api-key-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: var(--wp--preset--color--base-2);
	border: 1px solid var(--wp--preset--color--accent-5);
	border-radius: 12px;
	padding: 14px 16px;
}

.spliink-api-key-value {
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 0.88rem;
	color: var(--wp--preset--color--contrast);
	overflow-x: auto;
	white-space: nowrap;
}

.spliink-copy-btn {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: 9999px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-size: 0.82rem;
	font-weight: 600;
	border: none;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--heading);
}

.spliink-kyc-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.spliink-kyc-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-radius: 12px;
	background: var(--wp--preset--color--base-2);
}

.spliink-kyc-item-label {
	font-size: 0.92rem;
	color: var(--wp--preset--color--contrast);
}

.spliink-kyc-status {
	font-size: 0.78rem;
	font-weight: 600;
	padding: 4px 12px;
	border-radius: 9999px;
	background: #FFF7ED;
	color: #B45309;
}

.spliink-kyc-status.is-valid {
	background: #ECFDF5;
	color: #047857;
}

.spliink-simulate-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 20px;
	border-radius: 9999px;
	background: #F59E0B;
	color: #fff;
	font-size: 0.85rem;
	font-weight: 600;
	border: none;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--heading);
	flex-shrink: 0;
}

.spliink-simulate-btn.is-live {
	background: #10B981;
	cursor: default;
}

.spliink-plugin-status {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.9rem;
	color: var(--wp--preset--color--contrast-2);
}

.spliink-plugin-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #D1D5DB;
}

/* Composants visuels Spliink non couverts par les block supports natifs de Gutenberg. */

.spliink-badge-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border-radius: 9999px;
	background: linear-gradient(120deg, var(--wp--preset--color--base) 0%, var(--wp--preset--color--base) 40%, var(--wp--preset--color--accent-3) 100%);
	border: 1px solid rgba(112, 111, 236, 0.15);
	box-shadow: 0 10px 15px -3px rgba(112, 111, 236, 0.1), 0 4px 6px -4px rgba(112, 111, 236, 0.1);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

.spliink-gradient-text {
	background: linear-gradient(120deg, var(--wp--preset--color--accent) 0%, var(--wp--preset--color--accent-2) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.spliink-card {
	background: var(--wp--preset--color--base);
	border-radius: 24px;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
	padding: 24px;
	border: 1px solid var(--wp--preset--color--accent-5);
}

.spliink-check-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
}

.spliink-check-list li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.9rem;
	color: var(--wp--preset--color--contrast-2);
}

.spliink-check-list li::before {
	content: "\2713";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--accent);
	font-size: 0.7rem;
	font-weight: 700;
}

.spliink-participant-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 12px;
	border-radius: 12px;
	background: var(--wp--preset--color--base-2);
	font-size: 0.85rem;
}

.spliink-status-paid {
	color: var(--wp--preset--color--accent-4);
	font-weight: 600;
}

.spliink-status-pending {
	color: var(--wp--preset--color--contrast-2);
}

.spliink-progress-track {
	width: 100%;
	height: 8px;
	border-radius: 9999px;
	background: var(--wp--preset--color--accent-3);
	overflow: hidden;
}

.spliink-progress-fill {
	height: 100%;
	border-radius: 9999px;
	background: linear-gradient(90deg, var(--wp--preset--color--accent), var(--wp--preset--color--accent-2));
}

/* WordPress enveloppe le template part header dans <header class="wp-block-template-part">
   qui colle exactement à sa hauteur : le sticky doit être posé ici (son parent .wp-site-blocks
   fait toute la hauteur de page), pas sur le <header> interne dont le parent direct est ce
   wrapper trop court pour laisser une marge de défilement au sticky. */
header.wp-block-template-part {
	position: sticky;
	top: 16px;
	z-index: 100;
}

/* Même mécanisme que le header : WordPress ajoute une marge automatique (blockGap)
   entre le dernier bloc de la page et le wrapper du footer, ce qui laissait apparaître
   une ligne de fond blanc entre le CTA final sombre et le footer, tous deux censés
   s'enchaîner sans coupure visuelle. */
.wp-site-blocks > footer.wp-block-template-part {
	margin-top: 0;
}

/* Empêche le header sticky (~110px avec sa marge de 16px) de cacher le haut des
   sections quand on clique un lien d'ancre du menu (#comment-ca-marche, etc.). */
html {
	scroll-padding-top: 130px;
}

.spliink-header-pill {
	border-radius: 9999px;
	background: linear-gradient(120deg, var(--wp--preset--color--base) 0%, var(--wp--preset--color--base) 60%, var(--wp--preset--color--accent-3) 100%);
	border: 1px solid rgba(112, 111, 236, 0.15);
	box-shadow: 0 10px 15px -3px rgba(112, 111, 236, 0.08), 0 4px 6px -4px rgba(112, 111, 236, 0.08);
	padding: 0 28px;
}

.spliink-header-pill > .wp-block-group {
	min-height: 64px;
}

.spliink-header-pill .wp-block-navigation a {
	color: #485E79;
	font-size: 15px;
	font-weight: 500;
}

.spliink-header-pill .wp-block-navigation a:hover {
	color: #212A40;
}

.spliink-header-cta .wp-block-button__link {
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.wp-block-group.spliink-header-cta {
	align-items: center;
}

.spliink-login-link {
	margin: 0;
	white-space: nowrap;
}

.spliink-login-link a {
	color: #485E79;
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
}

.spliink-login-link a:hover {
	color: #212A40;
}

/* Payylo dimensionne ses boutons via une hauteur fixe + centrage flex plutôt que du
   padding vertical (0px 32px de padding, 44px de haut) : on reproduit ce calcul pour
   avoir des boutons plus fins, avec la même hauteur entre le plein et le outline. */
.spliink-hero-buttons .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 32px;
	box-sizing: border-box;
}

/* Mobile : on retire le CTA du header (place à la nav/burger uniquement, poussé à
   droite par le justify-content:space-between une fois ce bloc caché) et on le
   remplace par un bouton flottant fixé en bas à droite de l'écran. */
.wp-block-buttons.spliink-mobile-fab {
	display: none;
}

/* Sélecteurs à deux classes : le bloc core `.wp-block-buttons{display:flex}` a la
   même spécificité qu'une seule classe, donc un simple `.spliink-header-cta{display:none}`
   peut perdre le cascade selon l'ordre d'impression des feuilles de style. */
@media (max-width: 600px) {
	.wp-block-group.spliink-header-cta {
		display: none;
	}

	.wp-block-buttons.spliink-mobile-fab {
		display: flex;
		position: fixed;
		bottom: calc(16px + env(safe-area-inset-bottom));
		right: calc(16px + env(safe-area-inset-right));
		z-index: 200;
		margin: 0;
	}

	.spliink-mobile-fab .wp-block-button__link {
		padding: 14px 22px;
		box-shadow: 0 10px 25px -5px rgba(93, 92, 224, 0.45), 0 8px 10px -6px rgba(93, 92, 224, 0.3);
	}
}

.spliink-logo-text .wp-block-site-title a {
	font-family: var(--wp--preset--font-family--heading);
}

.spliink-logo-group {
	align-items: center;
}

.spliink-logo-mark {
	margin: 0;
	display: flex;
	flex-shrink: 0;
}

.spliink-logo-mark img {
	display: block;
	border-radius: 8px;
}

.spliink-eyebrow {
	display: table;
	margin: 0 auto 16px;
	padding: 6px 16px;
	border-radius: 9999px;
	background: var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--accent);
	font-size: 0.9rem;
	font-weight: 500;
	letter-spacing: normal;
	text-transform: none;
}

.spliink-feature-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

@media (max-width: 900px) {
	.spliink-feature-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.spliink-feature-grid {
		grid-template-columns: 1fr;
	}
}

.spliink-feature-card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--accent-5);
	border-radius: 20px;
	padding: 28px;
}

.spliink-feature-icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: var(--wp--preset--color--accent-3);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
	color: var(--wp--preset--color--accent);
}

.spliink-feature-card h3 {
	margin: 0 0 8px;
	font-size: 1.1rem;
}

.spliink-feature-card p {
	margin: 0;
	color: var(--wp--preset--color--contrast-2);
	font-size: 0.92rem;
	line-height: 1.5;
}

/* Variante "carte avec mockup" façon payylo.com, pour comparaison avec la grille à icônes. */
.spliink-feature-grid-v2 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

@media (max-width: 900px) {
	.spliink-feature-grid-v2 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.spliink-feature-grid-v2 {
		grid-template-columns: 1fr;
	}
}

.spliink-feature-card-v2 {
	border: 1px solid var(--wp--preset--color--accent-5);
	border-radius: 20px;
	overflow: hidden;
	background: var(--wp--preset--color--base);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.spliink-feature-card-v2__visual {
	background: var(--wp--preset--color--base-2);
	padding: 24px;
	min-height: 168px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid var(--wp--preset--color--accent-5);
}

.spliink-feature-card-v2__body {
	padding: 20px 24px 24px;
}

.spliink-feature-card-v2__body h3 {
	margin: 0 0 8px;
	font-size: 1.15rem;
	font-family: var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--contrast);
}

.spliink-feature-card-v2__body p {
	margin: 0;
	color: var(--wp--preset--color--contrast-2);
	font-size: 0.92rem;
	line-height: 1.5;
}

/* Petits éléments des mockups statiques (aucun n'est interactif). */
.sfm-mock {
	width: 100%;
}

.sfm-mock--center {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.sfm-mock--row {
	display: flex;
	align-items: center;
	gap: 14px;
}

.sfm-methodrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px solid var(--wp--preset--color--accent-5);
	background: var(--wp--preset--color--base);
	font-size: 0.82rem;
	color: var(--wp--preset--color--contrast);
	margin-bottom: 8px;
}

.sfm-methodrow:last-child {
	margin-bottom: 0;
}

.sfm-methodrow.is-selected {
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 2px rgba(93, 92, 224, 0.15);
	font-weight: 600;
}

.sfm-methodrow-label {
	display: flex;
	align-items: center;
}

.sfm-radio {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid var(--wp--preset--color--accent-5);
	display: inline-block;
	margin-right: 10px;
	box-sizing: border-box;
}

.sfm-radio.is-selected {
	border-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent);
	box-shadow: inset 0 0 0 2.5px var(--wp--preset--color--base);
}

.sfm-check {
	color: var(--wp--preset--color--accent-4);
	font-weight: 700;
}

.sfm-mock-link {
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--heading);
}

.sfm-mock-sub {
	font-size: 0.8rem;
	color: var(--wp--preset--color--contrast-2);
	margin-top: 4px;
}

.sfm-avatars {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 10px;
}

.sfm-avatars span {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--accent);
	font-size: 0.7rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--heading);
}

.sfm-avatars .sfm-amount {
	width: auto;
	border-radius: 9999px;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	margin-left: auto;
	font-size: 0.85rem;
}

.sfm-check-circle {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--accent-4);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.3rem;
	font-weight: 700;
	margin-bottom: 10px;
}

.sfm-browserbar {
	display: flex;
	align-items: center;
	gap: 6px;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--accent-5);
	border-radius: 8px 8px 0 0;
	padding: 8px 10px;
}

.sfm-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-5);
	display: inline-block;
}

.sfm-url {
	margin-left: 6px;
	font-size: 0.72rem;
	color: var(--wp--preset--color--contrast-2);
}

.sfm-brandbar {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-size: 0.82rem;
	font-weight: 600;
	text-align: center;
	padding: 12px;
	border-radius: 0 0 8px 8px;
}

.sfm-lock {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--accent);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 10px;
}

/* Slider de logos "Ils nous font confiance" — administrable : les logos sont de
   vrais blocs Image WordPress (remplaçables depuis l'admin, media library normale)
   dans .spliink-trust-track. Un petit script (trust-slider.js) clone cette piste
   une fois pour boucler en continu ; la piste éditée par l'utilisateur reste unique. */
.spliink-trust-slider {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
	mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

.spliink-trust-marquee {
	display: flex;
	width: max-content;
	animation: spliink-trust-scroll 28s linear infinite;
}

.spliink-trust-marquee:hover {
	animation-play-state: paused;
}

@keyframes spliink-trust-scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

.spliink-trust-track {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	flex-shrink: 0;
	gap: 48px;
}

.spliink-trust-logo-img {
	flex-shrink: 0;
	margin: 0;
	opacity: 0.75;
	filter: grayscale(100%);
}

.spliink-trust-logo-img img {
	display: block;
	height: 36px;
	width: auto;
}

@media (prefers-reduced-motion: reduce) {
	.spliink-trust-marquee {
		animation: none;
		flex-wrap: wrap;
		width: 100%;
		justify-content: center;
	}
}

/* Section "Comment ça marche" : switch Commerçants / Utilisateurs en CSS pur
   (case à cocher cachée + sélecteurs ~), pour que chaque public se retrouve. */
/* Bloc, pas flex : sinon les .spliink-audience-panel (qui suivent le switch dans le
   DOM pour que le sélecteur ~ fonctionne) deviendraient elles-mêmes des items flex
   à côté du switch au lieu de s'empiler dessous. */
.spliink-audience-toggle-wrap {
	text-align: center;
}

.spliink-audience-checkbox {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.spliink-audience-switch {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px;
	border-radius: 9999px;
	background: var(--wp--preset--color--base-2);
	border: 1px solid var(--wp--preset--color--accent-5);
	cursor: pointer;
	user-select: none;
	position: relative;
	margin-bottom: 40px;
}

.spliink-audience-switch span {
	position: relative;
	z-index: 1;
	padding: 10px 22px;
	border-radius: 9999px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast-2);
	transition: color 0.2s ease;
}

.spliink-audience-switch::before {
	content: "";
	position: absolute;
	top: 4px;
	left: 4px;
	width: calc(50% - 4px);
	height: calc(100% - 8px);
	border-radius: 9999px;
	background: var(--wp--preset--color--accent);
	transition: transform 0.25s ease;
}

.spliink-audience-checkbox:checked + .spliink-audience-switch::before {
	transform: translateX(100%);
}

.spliink-audience-switch span:first-child {
	color: var(--wp--preset--color--base);
}

.spliink-audience-checkbox:checked + .spliink-audience-switch span:first-child {
	color: var(--wp--preset--color--contrast-2);
}

.spliink-audience-checkbox:checked + .spliink-audience-switch span:last-child {
	color: var(--wp--preset--color--base);
}

.spliink-audience-checkbox:focus-visible + .spliink-audience-switch {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.wp-block-group.spliink-audience-panel {
	display: none;
}

/* Dans l'éditeur (iframe avec la classe editor-styles-wrapper), on affiche les deux
   panneaux Commerçants/Utilisateurs empilés en permanence : le switch CSS ne peut pas
   être actionné de façon fiable dans le canvas de l'éditeur, donc sans ça le panneau
   "Utilisateurs" serait invisible et impossible à modifier depuis l'admin. */
.editor-styles-wrapper .wp-block-group.spliink-audience-panel {
	display: block !important;
}

.editor-styles-wrapper .spliink-audience-panel-merchants::before,
.editor-styles-wrapper .spliink-audience-panel-users::before {
	display: block;
	margin: 24px 0 12px;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--wp--preset--color--accent);
}

.editor-styles-wrapper .spliink-audience-panel-merchants::before {
	content: "Panneau \201C Commerçants \201D (affiché par défaut sur le site) :";
}

.editor-styles-wrapper .spliink-audience-panel-users::before {
	content: "Panneau \201C Utilisateurs \201D (visible sur le site quand le switch est activé) :";
}

.wp-block-group.spliink-audience-panel-merchants {
	display: block;
}

.spliink-audience-checkbox:checked ~ .wp-block-group.spliink-audience-panel-merchants {
	display: none;
}

.spliink-audience-checkbox:checked ~ .wp-block-group.spliink-audience-panel-users {
	display: block;
}

.spliink-steps-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

@media (max-width: 900px) {
	.spliink-steps-grid {
		grid-template-columns: 1fr;
	}
}

.spliink-step-card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--accent-5);
	border-radius: 20px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	min-height: 420px;
}

.spliink-step-card .spliink-feature-card-v2__visual {
	margin-top: auto;
}

.spliink-step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 0.85rem;
	margin-bottom: 16px;
}

.spliink-step-card h3 {
	margin: 0 0 8px;
	font-size: 1.1rem;
	font-family: var(--wp--preset--font-family--heading);
}

.spliink-step-card p {
	margin: 0 0 20px;
	color: var(--wp--preset--color--contrast-2);
	font-size: 0.92rem;
	line-height: 1.5;
}

.spliink-step-card .spliink-feature-card-v2__visual {
	border: 1px solid var(--wp--preset--color--accent-5);
	border-radius: 14px;
	background: var(--wp--preset--color--base-2);
	min-height: 140px;
}

/* Apparition en fondu + glissement vers le haut au scroll (comme les cartes
   "Use Cases" de payylo.com) — géré par reveal.js via IntersectionObserver. */
.spliink-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.spliink-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.spliink-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Section "Cas d'usage" — effet de pile façon payylo.com : chaque carte est
   "sticky" dans un créneau de plein écran, et la suivante (z-index croissant)
   glisse par-dessus au scroll au lieu de la pousser hors du flux. */
.spliink-usecase-stack {
	position: relative;
}

.spliink-usecase-slot {
	position: sticky;
	top: 96px;
	height: calc(100vh - 96px);
	display: flex;
	align-items: center;
}

.spliink-usecase-slot-1 { z-index: 1; }
.spliink-usecase-slot-2 { z-index: 2; }
.spliink-usecase-slot-3 { z-index: 3; }
.spliink-usecase-slot-4 { z-index: 4; }
.spliink-usecase-slot-5 { z-index: 5; }
.spliink-usecase-slot-6 { z-index: 6; }

.spliink-usecase-card {
	width: 100%;
	height: 560px;
	display: flex;
	align-items: center;
	gap: 56px;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--accent-5);
	border-radius: 28px;
	box-shadow: 0 25px 50px -12px rgba(33, 42, 64, 0.15);
	padding: 48px;
	overflow: hidden;
}

.spliink-usecase-text,
.spliink-usecase-visual {
	max-height: 100%;
	overflow: hidden;
}

@media (max-width: 900px) {
	.spliink-usecase-slot {
		position: static;
		height: auto;
		padding: 12px 0;
	}

	.spliink-usecase-card {
		height: auto;
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
		padding: 24px;
	}

	.spliink-usecase-text,
	.spliink-usecase-visual {
		max-height: none;
		overflow: visible;
	}
}

.spliink-usecase-text {
	flex: 1 1 0;
	min-width: 0;
}

.spliink-usecase-visual {
	flex: 1 1 0;
	min-width: 0;
}

.spliink-usecase-tag {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 9999px;
	background: var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--accent);
	font-size: 0.78rem;
	font-weight: 600;
	margin-bottom: 12px;
}

.spliink-usecase-text h3 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.4rem;
	margin: 0 0 12px;
	color: var(--wp--preset--color--contrast);
}

.spliink-usecase-text p {
	color: var(--wp--preset--color--contrast-2);
	font-size: 0.98rem;
	line-height: 1.6;
	margin: 0 0 18px;
}

/* Section CTA "Demander une démo" — texte à gauche, carte à droite (façon payylo.com) */
.spliink-demo-row {
	display: flex;
	align-items: center;
	gap: 56px;
}

@media (max-width: 900px) {
	.spliink-demo-row {
		flex-direction: column;
		align-items: stretch;
	}
}

.spliink-demo-cta {
	flex: 1 1 0;
	min-width: 0;
}

/* .spliink-eyebrow centre normalement le badge (utile dans les sections centrées type
   "Pourquoi Spliink"), mais cette section est alignée à gauche : on annule le centrage
   automatique ici précisément. */
.spliink-demo-cta .spliink-eyebrow {
	margin-left: 0;
	margin-right: 0;
}

.spliink-demo-recap {
	flex: 1 1 0;
	min-width: 0;
}

.spliink-recap-card {
	background: var(--wp--preset--color--base);
	border: 1px solid rgba(112, 111, 236, 0.3);
	border-radius: 24px;
	padding: 24px;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.06), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
}

.spliink-recap-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
}

.spliink-recap-logo {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--accent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1.1rem;
	flex-shrink: 0;
}

.spliink-recap-header div p {
	margin: 0;
}

.spliink-recap-title {
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

.spliink-recap-subtitle {
	font-size: 0.85rem;
	color: var(--wp--preset--color--contrast-2);
}

.spliink-recap-rows {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.spliink-recap-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 14px;
	border-radius: 12px;
	background: var(--wp--preset--color--base-2);
	font-size: 0.9rem;
}

.spliink-recap-row span:first-child {
	color: var(--wp--preset--color--contrast-2);
}

.spliink-recap-row span:last-child {
	font-weight: 700;
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--heading);
	text-align: right;
}

.spliink-recap-note {
	margin: 16px 2px 0;
	font-size: 0.75rem;
	color: var(--wp--preset--color--contrast-2);
}

.spliink-demo-checklist {
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-align: left;
	list-style: none;
	margin: 24px 0 32px;
	padding: 0;
}

.spliink-demo-checklist li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.98rem;
	color: var(--wp--preset--color--contrast-2);
}

.spliink-demo-checklist li::before {
	content: "\2713";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--accent);
	font-size: 0.75rem;
	font-weight: 700;
}

/* Section Pricing */
.spliink-pricing-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	align-items: stretch;
}

@media (max-width: 900px) {
	.spliink-pricing-grid {
		grid-template-columns: 1fr;
	}
}

.spliink-pricing-card {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--accent-5);
	border-radius: 24px;
	padding: 32px;
	position: relative;
}

.spliink-pricing-card.is-recommended {
	border: 2px solid var(--wp--preset--color--accent);
	box-shadow: 0 20px 25px -5px rgba(93, 92, 224, 0.15), 0 8px 10px -6px rgba(93, 92, 224, 0.1);
}

.spliink-pricing-badge {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-size: 0.78rem;
	font-weight: 600;
	padding: 6px 16px;
	border-radius: 9999px;
	white-space: nowrap;
}

.spliink-pricing-card h3 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.2rem;
	margin: 0 0 8px;
}

.spliink-pricing-card .spliink-pricing-desc {
	color: var(--wp--preset--color--contrast-2);
	font-size: 0.9rem;
	margin: 0 0 20px;
	min-height: 40px;
}

.spliink-pricing-price {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 2rem;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	margin-bottom: 4px;
}

.spliink-pricing-price span {
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--wp--preset--color--contrast-2);
}

.spliink-pricing-sub {
	font-size: 0.82rem;
	color: var(--wp--preset--color--contrast-2);
	margin-bottom: 24px;
}

.spliink-pricing-features {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex-grow: 1;
}

.spliink-pricing-features li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 0.88rem;
	color: var(--wp--preset--color--contrast);
}

.spliink-pricing-features li::before {
	content: "\2713";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	margin-top: 1px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--accent);
	font-size: 0.65rem;
	font-weight: 700;
}

.spliink-pricing-cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 44px;
	border-radius: 12px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
}

.spliink-pricing-cta.is-primary .wp-block-button__link {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

.spliink-pricing-cta.is-secondary .wp-block-button__link {
	background: var(--wp--preset--color--base-2);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--accent-5);
}

/* Section FAQ — accordéon en CSS pur (case à cocher invisible superposée à toute la
   carte + sélecteur ~), question et réponse restent de vrais blocs Titre/Paragraphe. */
.spliink-faq-list {
	max-width: 800px;
	margin: 0 auto;
}

.spliink-faq-item {
	position: relative;
	border-bottom: 1px solid var(--wp--preset--color--accent-5);
	padding: 22px 0;
}

.spliink-faq-item:first-child {
	border-top: 1px solid var(--wp--preset--color--accent-5);
}

.spliink-faq-toggle {
	position: absolute;
	inset: 0;
	opacity: 0;
	margin: 0;
	cursor: pointer;
	z-index: 2;
}

.spliink-faq-question-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.spliink-faq-question-row h3 {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

.spliink-faq-chevron {
	flex-shrink: 0;
	color: var(--wp--preset--color--accent);
	transition: transform 0.2s ease;
}

.spliink-faq-answer {
	display: none;
	overflow: hidden;
}

.spliink-faq-answer p {
	margin: 14px 0 0;
	color: var(--wp--preset--color--contrast-2);
	font-size: 0.95rem;
	line-height: 1.6;
}

.spliink-faq-toggle:checked ~ .spliink-faq-answer {
	display: block;
}

.spliink-faq-toggle:checked ~ .spliink-faq-question-row .spliink-faq-chevron {
	transform: rotate(180deg);
}

.spliink-faq-toggle:focus-visible ~ .spliink-faq-question-row {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 4px;
	border-radius: 8px;
}

/* Dans l'éditeur : la case invisible superposée servirait à cliquer/ouvrir sur le site,
   mais bloquerait les clics d'édition sur la question et la réponse. On la neutralise
   et on garde la réponse toujours visible, comme pour le switch Commerçants/Utilisateurs. */
.editor-styles-wrapper .spliink-faq-toggle {
	pointer-events: none;
}

.editor-styles-wrapper .spliink-faq-answer {
	display: block !important;
}

.spliink-pricing-footnote {
	text-align: center;
	color: var(--wp--preset--color--contrast-2);
	font-size: 0.85rem;
	margin-top: 32px;
}

.spliink-psp-badge {
	display: inline-flex;
	align-items: center;
	padding: 8px 18px;
	border-radius: 9999px;
	background: var(--wp--preset--color--base-2);
	color: var(--wp--preset--color--contrast-2);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 0.95rem;
	margin: 0;
}