/**
 * Sections marketing d’accueil / landing : référencer, texte+image, texte+galerie, hero home.
 * Complète main.min.css — multisite (--highlight-color).
 */

/* ------------------------------------------------------------------------- *
 * Bloc « Référencer » (restaurateur : visibilité + stats + double CTA)
 * ------------------------------------------------------------------------- */

.kl-reference-block {
	position: relative;
	background: linear-gradient(180deg, #f8f7fa 0%, #eceaf0 50%, #e6e3eb 100%);
	overflow: hidden;
}

.kl-reference-block::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 85% 60% at 8% 20%, rgba(255, 255, 255, 0.75), transparent 52%),
		radial-gradient(ellipse 70% 50% at 95% 85%, rgba(255, 255, 255, 0.35), transparent 48%);
	pointer-events: none;
}

.kl-reference-block > .container {
	position: relative;
	z-index: 1;
}

.kl-reference-block__wrapper .kl-h2 {
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.15;
}

.kl-reference-block__wrapper .kl-h4 {
	line-height: 1.55;
	max-width: 36rem;
}

.kl-reference-block__illu {
	position: relative;
	overflow: visible;
	background: transparent;
	line-height: 0;
}

.kl-reference-block__illu > img {
	display: block;
	border-radius: 18px;
	box-shadow:
		0 2px 6px rgba(41, 44, 61, 0.05),
		0 20px 50px -24px rgba(41, 44, 61, 0.22);
}

.kl-reference-block .kl-reference-block__illu__stat--icon,
.kl-reference-block .kl-reference-block__illu__stat--chiffre {
	background: rgba(255, 255, 255, 0.94) !important;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(41, 44, 61, 0.08) !important;
	border-radius: 14px !important;
	box-shadow: 0 10px 32px rgba(41, 44, 61, 0.12);
}

.kl-reference-block .kl-reference-block__illu__stat--icon .kl-reference-block__illu__stat--icon--text {
	color: rgba(41, 44, 61, 0.92);
	font-weight: 600;
}

.kl-reference-block .kl-reference-block__illu__stat--icon .kl-reference-block__illu__stat--icon--icon {
	color: var(--highlight-color, #e2081d);
}

.kl-reference-block .kl-reference-block__illu__stat--chiffre .kl-reference-block__illu__stat--chiffre--numb {
	color: var(--highlight-color, #e2081d);
	font-weight: 700;
}

.kl-reference-block .kl-reference-block__illu__stat--chiffre .kl-reference-block__illu__stat--chiffre--text {
	color: rgba(41, 44, 61, 0.88);
	font-weight: 600;
}

.kl-reference-block__btn_group {
	gap: 16px;
}

.kl-reference-block__btn_group .kl-btn {
	border-radius: 12px !important;
	font-weight: 600 !important;
	transition:
		transform 0.22s ease,
		box-shadow 0.22s ease,
		border-color 0.22s ease,
		background-color 0.22s ease,
		color 0.22s ease;
}

.kl-reference-block__btn_group .kl-btn-dark {
	box-shadow: 0 4px 14px rgba(41, 44, 61, 0.15);
}

.kl-reference-block__btn_group .kl-btn-o {
	border-width: 1.5px !important;
}

@media (hover: hover) and (pointer: fine) {
	.kl-reference-block__btn_group .kl-btn:hover {
		transform: translateY(-2px);
		box-shadow: 0 8px 22px rgba(41, 44, 61, 0.12);
	}

	.kl-reference-block__btn_group .kl-btn-dark:hover {
		box-shadow: 0 8px 24px rgba(41, 44, 61, 0.2);
	}
}

@media (prefers-reduced-motion: reduce) {
	.kl-reference-block__btn_group .kl-btn,
	.kl-reference-block__btn_group .kl-btn:hover {
		transition: none;
		transform: none;
	}
}

/* ------------------------------------------------------------------------- *
 * Blocs « Texte + image » & « Texte + galerie » (conseils, collages…)
 * ------------------------------------------------------------------------- */

.kl-text-image.kl-content-wrapper-default {
	position: relative;
}

.kl-text-gallery {
	position: relative;
}

.kl-text-image .kl-text-image__title {
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.18;
}

.kl-text-gallery .kl-text-gallery__title {
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.18;
}

.kl-text-image .kl-text-image__subtitle {
	font-weight: 600;
	color: #292c3d;
}

.kl-text-gallery .kl-text-gallery__subtitle {
	font-weight: 600;
	color: #292c3d;
}

.kl-text-image .kl-text-image__descritpion {
	line-height: 1.6;
	max-width: 38rem;
}

.kl-text-gallery .kl-text-gallery__descritpion {
	line-height: 1.6;
	max-width: 38rem;
}

.kl-text-image .kl-text-image__col--img img {
	border-radius: 18px;
	box-shadow:
		0 2px 8px rgba(41, 44, 61, 0.06),
		0 16px 40px -20px rgba(41, 44, 61, 0.18);
}

.kl-text-image .kl-text-image__label--text {
	background: rgba(255, 255, 255, 0.95) !important;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(41, 44, 61, 0.08);
	border-radius: 12px !important;
	box-shadow: 0 8px 28px rgba(41, 44, 61, 0.1);
}

.kl-text-image .kl-text-image__cta .kl-btn {
	border-radius: 12px !important;
	font-weight: 600 !important;
	transition:
		transform 0.22s ease,
		box-shadow 0.22s ease;
}

.kl-text-gallery .kl-text-gallery__cta .kl-btn {
	border-radius: 12px !important;
	font-weight: 600 !important;
	transition:
		transform 0.22s ease,
		box-shadow 0.22s ease;
}

.kl-text-image .kl-text-image__cta .kl-cta-primary {
	box-shadow: 0 4px 16px color-mix(in srgb, var(--highlight-color, #e2081d) 35%, transparent);
}

.kl-text-gallery .kl-text-gallery__cta .kl-cta-primary {
	box-shadow: 0 4px 16px color-mix(in srgb, var(--highlight-color, #e2081d) 35%, transparent);
}

@media (hover: hover) and (pointer: fine) {
	.kl-text-image .kl-text-image__cta .kl-btn:hover {
		transform: translateY(-2px);
	}

	.kl-text-gallery .kl-text-gallery__cta .kl-btn:hover {
		transform: translateY(-2px);
	}
}

.kl-text-image .kl-image-gallery-illustration,
.kl-text-gallery .kl-image-gallery-illustration {
	gap: 12px;
	align-items: stretch;
}

.kl-text-image .kl-image-gallery-item,
.kl-text-gallery .kl-image-gallery-item {
	border-radius: 14px !important;
	overflow: hidden;
	border: 1px solid rgba(41, 44, 61, 0.07);
	box-shadow:
		0 2px 8px rgba(41, 44, 61, 0.05),
		0 12px 32px -18px rgba(41, 44, 61, 0.16);
	transition:
		transform 0.28s ease,
		box-shadow 0.28s ease;
}

@media (hover: hover) and (pointer: fine) {
	.kl-text-image .kl-image-gallery-item:hover,
	.kl-text-gallery .kl-image-gallery-item:hover {
		transform: translateY(-4px);
		box-shadow:
			0 6px 16px rgba(41, 44, 61, 0.08),
			0 20px 44px -20px rgba(41, 44, 61, 0.2);
	}
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.kl-text-image .kl-text-image__cta .kl-cta-primary {
		box-shadow: 0 4px 16px rgba(41, 44, 61, 0.15);
	}

	.kl-text-gallery .kl-text-gallery__cta .kl-cta-primary {
		box-shadow: 0 4px 16px rgba(41, 44, 61, 0.15);
	}
}

@media (prefers-reduced-motion: reduce) {
	.kl-text-image .kl-text-image__cta .kl-btn,
	.kl-text-image .kl-text-image__cta .kl-btn:hover,
	.kl-text-gallery .kl-text-gallery__cta .kl-btn,
	.kl-text-gallery .kl-text-gallery__cta .kl-btn:hover,
	.kl-text-image .kl-image-gallery-item,
	.kl-text-image .kl-image-gallery-item:hover,
	.kl-text-gallery .kl-image-gallery-item,
	.kl-text-gallery .kl-image-gallery-item:hover {
		transition: none;
		transform: none;
	}
}

/* ------------------------------------------------------------------------- *
 * Hero accueil (listing) — cartes flottantes stats
 * ------------------------------------------------------------------------- */

.kl-hero-home .kl-hero-home__stat > * {
	border-radius: 14px !important;
	border: 1px solid rgba(41, 44, 61, 0.06);
	box-shadow:
		0 2px 8px rgba(41, 44, 61, 0.05),
		0 10px 28px -14px rgba(41, 44, 61, 0.12);
	backdrop-filter: blur(8px);
}

.kl-hero-home .kl-hero-home__stat--chiffre--numb {
	color: var(--highlight-color, #e2081d);
	font-weight: 700;
}

/* ------------------------------------------------------------------------- *
 * Bloc « Conseils » (aide + CTA contact + visuel)
 * ------------------------------------------------------------------------- */

.kl-conseils-block__wrapper .kl-h2 {
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.kl-conseils-block__wrapper .kl-h4 {
	line-height: 1.55;
	max-width: 36rem;
}

.kl-conseils-block__illu img {
	border-radius: 18px;
	box-shadow:
		0 2px 8px rgba(41, 44, 61, 0.06),
		0 16px 40px -20px rgba(41, 44, 61, 0.16);
}

.kl-conseils-block__wrapper .kl-btn {
	border-radius: 12px !important;
	font-weight: 600 !important;
	box-shadow: 0 4px 18px color-mix(in srgb, var(--highlight-color, #e2081d) 32%, transparent);
	transition:
		transform 0.22s ease,
		box-shadow 0.22s ease,
		filter 0.22s ease;
}

@media (hover: hover) and (pointer: fine) {
	.kl-conseils-block__wrapper .kl-btn:hover {
		transform: translateY(-2px);
		filter: brightness(1.04);
	}
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.kl-conseils-block__wrapper .kl-btn {
		box-shadow: 0 4px 18px rgba(41, 44, 61, 0.14);
	}
}

@media (prefers-reduced-motion: reduce) {
	.kl-conseils-block__wrapper .kl-btn,
	.kl-conseils-block__wrapper .kl-btn:hover {
		transition: none;
		transform: none;
	}
}