@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap);
/**
 * Consomyzone — couche visuelle partagée des pages help/explore
 * Alignée sur la charte landing v2 (moderne, soignée, professionnelle).
 * À charger APRÈS les \3c style> inline des pages pour surcharger proprement.
 */

:root {
	--cmz-green-900: #0e3b33;
	--cmz-green-800: #165c4f;
	--cmz-green-700: #1f7a63;
	--cmz-lime: #8cc63f;
	--cmz-green-soft: #e6f4ea;
	--cmz-blue: #2d8dbf;
	--cmz-ink: #333333;
	--cmz-muted: #6b7280;
	--cmz-line: #e0e0e0;
	--cmz-grey: #f7f7f7;
	--cmz-white: #ffffff;
	--cmz-radius: 18px;
	--cmz-radius-lg: 24px;
	--cmz-shadow: 0 12px 34px rgba(14, 59, 51, 0.1);
	--cmz-shadow-sm: 0 4px 14px rgba(14, 59, 51, 0.07);
	--cmz-max: 1200px;

	/* Alias rétrocompat avec tokens inline des pages */
	--cmz-bg: #f7faf9;
	--cmz-bg-soft: #ffffff;
	--cmz-text: var(--cmz-green-900);
	--cmz-green: var(--cmz-lime);
	--cmz-green-dark: #6fb62f;
	--cmz-teal: var(--cmz-green-800);
	--cmz-teal-2: var(--cmz-green-700);
	--cmz-border: rgba(14, 59, 51, 0.1);
	--cmz-border-card: rgba(14, 59, 51, 0.07);
	--cmz-line: #e0e0e0;
	--cmz-line-soft: rgba(14, 59, 51, 0.06);
	--cmz-panel: rgba(255, 255, 255, 0.96);
	--cmz-card: #ffffff;
	--cmz-surface: #ffffff;
	--radius-xl: 24px;
	--radius-lg: 18px;
	--radius-md: 14px;
	--max: 1240px;
	--container: 1240px;
	--topbar-h: 72px;
}

body {
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
	color: var(--cmz-ink) !important;
	background:
		radial-gradient(circle at 88% 8%, rgba(140, 198, 63, 0.14), transparent 32%),
		radial-gradient(circle at 4% 60%, rgba(45, 141, 191, 0.08), transparent 28%),
		linear-gradient(180deg, #ffffff 0%, #f7faf9 100%) !important;
	-webkit-font-smoothing: antialiased;
}

/* ── Header clair type landing ── */
.topbar {
	background: rgba(255, 255, 255, 0.94) !important;
	color: var(--cmz-green-900) !important;
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--cmz-line) !important;
	box-shadow: none !important;
}

.topbar-inner,
.topbar .container {
	min-height: 72px;
}

.topbar .nav-link,
.topbar-nav a,
.nav-desktop a,
.nav a:not(.btn):not(.btn-primary):not(.btn-cta):not(.btn-back) {
	color: var(--cmz-green-900) !important;
}

.topbar .nav-link:hover,
.topbar-nav a:hover,
.nav-desktop a:hover {
	background: var(--cmz-green-soft) !important;
	color: var(--cmz-green-800) !important;
}

.nav-divider {
	background: var(--cmz-line) !important;
}

.btn-back {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	color: var(--cmz-green-900) !important;
	background: var(--cmz-white) !important;
	border: 1px solid var(--cmz-line) !important;
	border-radius: 999px !important;
	padding: 8px 14px !important;
	font-size: 0.9rem !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.btn-back:hover {
	background: var(--cmz-green-soft) !important;
	border-color: var(--cmz-green-700) !important;
	color: var(--cmz-green-800) !important;
}

.btn-primary,
.btn-cta,
.nav-desktop .btn-primary,
.nav-mobile .btn-primary-mobile {
	background: var(--cmz-green-700) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 999px !important;
	font-weight: 700 !important;
	box-shadow: 0 6px 18px rgba(31, 122, 99, 0.22) !important;
}

.btn-primary:hover,
.btn-cta:hover,
.nav-desktop .btn-primary:hover {
	background: var(--cmz-green-800) !important;
	color: #fff !important;
}

.burger-btn {
	border-color: var(--cmz-line) !important;
	color: var(--cmz-green-900) !important;
	background: #fff !important;
}

.burger-btn > span,
.burger-btn span {
	background: var(--cmz-green-900) !important;
}

.nav-mobile {
	background: #fff !important;
	border-top: 1px solid var(--cmz-line) !important;
	box-shadow: var(--cmz-shadow) !important;
}

.nav-mobile a {
	color: var(--cmz-green-900) !important;
}

.nav-mobile a:hover {
	background: var(--cmz-green-soft) !important;
}

.brand {
	background: transparent !important;
	box-shadow: none !important;
	padding: 0 !important;
}

.brand-text {
	color: var(--cmz-green-900) !important;
}

/* ── Typo & sections ── */
h1,
.h1,
.hero h1,
.hero-card h1 {
	color: var(--cmz-green-900) !important;
	letter-spacing: -0.02em;
	font-weight: 800 !important;
}

h2,
.section-head h2 {
	color: var(--cmz-green-900) !important;
	font-weight: 800 !important;
	letter-spacing: -0.015em;
}

.kicker,
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--cmz-green-700) !important;
	font-weight: 600 !important;
	font-size: 0.85rem !important;
	letter-spacing: 0.02em;
}

.hero-text,
.section-head p,
.lead,
.sub {
	color: var(--cmz-muted) !important;
}

/* ── Cards ── */
.feature-card,
.tool-card,
.usage-card,
.use-card,
.mode-card,
.sharing-card,
.category-card,
.info-card,
.benefit-card,
.module-card,
.family-card,
.level-card,
.hero-card,
.cta-card,
.poi-card,
.result-card {
	background: var(--cmz-white) !important;
	border: 1px solid var(--cmz-line) !important;
	border-radius: var(--cmz-radius-lg) !important;
	box-shadow: var(--cmz-shadow-sm) !important;
}

.feature-card:hover,
.tool-card:hover,
.usage-card:hover,
.use-card:hover,
.category-card:hover,
.module-card:hover {
	box-shadow: var(--cmz-shadow) !important;
	border-color: rgba(31, 122, 99, 0.22) !important;
	transform: translateY(-2px);
	transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

/* ── Icon boxes (SVG, plus d’emojis) ── */
.feature-icon,
.usage-icon,
.use-icon,
.mode-icon,
.sharing-icon,
.category-icon,
.icon-box,
.icon-wrap,
.module-icon,
.family-icon,
.level-icon,
.benefit-icon,
.node-icon,
.person-badge,
.assistant-badge,
.side-dot,
.icon {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 14px !important;
	background: var(--cmz-green-soft) !important;
	color: var(--cmz-green-800) !important;
	font-size: 0 !important;
	line-height: 0 !important;
	box-shadow: none !important;
	border: 1px solid rgba(31, 122, 99, 0.12);
}

.benefit-icon,
.side-dot,
.person-badge,
.assistant-badge {
	width: 40px;
	height: 40px;
	border-radius: 12px !important;
}

.feature-icon svg,
.usage-icon svg,
.use-icon svg,
.mode-icon svg,
.sharing-icon svg,
.category-icon svg,
.icon-box svg,
.icon-wrap svg,
.module-icon svg,
.family-icon svg,
.level-icon svg,
.benefit-icon svg,
.node-icon svg,
.person-badge svg,
.assistant-badge svg,
.side-dot svg,
.icon svg,
.meta-pill svg,
.result-meta svg,
.fake-input svg,
.control svg,
.mini-btn svg,
.included svg,
.check svg,
.cmz-contact-form__icon svg,
.kicker svg {
	width: 22px;
	height: 22px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex-shrink: 0;
}

.side-dot {
	width: 36px;
	height: 36px;
	border-radius: 10px !important;
}

.side-dot svg {
	width: 16px;
	height: 16px;
}

.meta-pill,
.chip,
.result-meta span,
.mini-btn,
.control {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-radius: 999px;
	background: var(--cmz-grey);
	border: 1px solid var(--cmz-line);
	color: var(--cmz-green-900);
	font-weight: 500;
}

.meta-pill svg,
.result-meta svg,
.mini-btn svg,
.control svg {
	width: 14px;
	height: 14px;
}

.check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	color: var(--cmz-green-700);
	font-size: 0;
}

.check svg {
	width: 14px;
	height: 14px;
}

.included {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.feature-dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 999px;
	background: var(--cmz-green-soft);
	color: var(--cmz-green-700);
	font-size: 0;
}

.feature-dot svg {
	width: 12px;
	height: 12px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2.2;
}

/* CTA bands */
.cta-band,
.cta-card,
.final-cta {
	background:
		radial-gradient(circle at 90% 20%, rgba(140, 198, 63, 0.16), transparent 40%),
		linear-gradient(135deg, #0e3b33 0%, #165c4f 100%) !important;
	color: #fff !important;
	border: none !important;
}

.cta-band h2,
.cta-card h2,
.final-cta h2,
.cta-band p,
.cta-card p {
	color: #fff !important;
}

/* Footer soften */
.page-footer,
.site-footer,
footer.footer {
	border-top: 1px solid var(--cmz-line);
	background: #fff;
}

.cmzux-meta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--cmz-muted);
}

.cmzux-meta svg {
	width: 16px;
	height: 16px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.8;
	flex-shrink: 0;
}

.fake-input {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
}

.meta-grid > div {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

@media (max-width: 768px) {
	.feature-icon,
	.usage-icon,
	.use-icon,
	.mode-icon,
	.sharing-icon,
	.category-icon,
	.icon-box,
	.icon-wrap,
	.module-icon,
	.family-icon,
	.level-icon {
		width: 42px;
		height: 42px;
	}
}