/* =========================================================
   zmessages.com — feuille de style principale
   1. Jetons (thème clair / sombre)
   2. Base
   3. En-tête, navigation, recherche
   4. Pied de page
   5. Mise en page
   6. Accueil (héros, grille d'outils)
   7. Composants d'outils
   8. Divers
   ========================================================= */

/* ---------- 1. Jetons ---------- */
:root {
	--zm-bg: #ffffff;
	--zm-bg-soft: #f5f7fb;
	--zm-bg-sunk: #eef2f8;
	--zm-card: #ffffff;
	--zm-border: #e3e8f0;
	--zm-border-str: #cfd8e6;
	--zm-text: #101828;
	--zm-text-2: #344054;
	--zm-muted: #667a93;
	--zm-accent: #2563eb;
	--zm-accent-d: #1d4ed8;
	--zm-accent-soft: #eaf1ff;
	--zm-ok: #059669;
	--zm-ok-soft: #e7f6f0;
	--zm-warn: #b45309;
	--zm-header-h: 64px;
	--zm-radius: 14px;
	--zm-radius-lg: 20px;
	--zm-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px -12px rgba(16, 24, 40, .12);
	--zm-shadow-lg: 0 4px 12px rgba(16, 24, 40, .07), 0 24px 48px -20px rgba(16, 24, 40, .22);
	--zm-accent-2: #4f46e5;
	--zm-glow: rgba(37, 99, 235, .16);
	--zm-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--zm-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	color-scheme: light;
}

[data-theme="dark"] {
	--zm-bg: #0d1117;
	--zm-bg-soft: #141b25;
	--zm-bg-sunk: #101822;
	--zm-card: #161d28;
	--zm-border: #263140;
	--zm-border-str: #354356;
	--zm-text: #e8eef7;
	--zm-text-2: #c3cede;
	--zm-muted: #8fa1b8;
	--zm-accent: #5b8cff;
	--zm-accent-d: #7aa2ff;
	--zm-accent-soft: #16243d;
	--zm-accent-2: #818cf8;
	--zm-glow: rgba(91, 140, 255, .18);
	--zm-ok: #34d399;
	--zm-ok-soft: #10261f;
	--zm-warn: #fbbf24;
	--zm-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);
	--zm-shadow-lg: 0 4px 12px rgba(0, 0, 0, .45), 0 24px 48px -20px rgba(0, 0, 0, .7);
	color-scheme: dark;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--zm-header-h) + 16px);
	/* Le menu mobile est parqué hors écran à droite : on empêche le défilement horizontal
	   qu'il provoquerait. « clip » plutôt que « hidden » pour ne pas casser position:sticky. */
	overflow-x: clip;
}

body {
	margin: 0;
	background: var(--zm-bg);
	color: var(--zm-text);
	font-family: var(--zm-font);
	font-size: 17px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	font-feature-settings: "cv11", "ss01", "calt";
}

img, svg, video { max-width: 100%; height: auto; }

a { color: var(--zm-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { color: var(--zm-text); line-height: 1.2; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.022em; text-wrap: balance; }
h1 { font-size: clamp(28px, 4.2vw, 40px); }
h2 { font-size: clamp(22px, 3vw, 28px); margin-top: 1.8em; }
h3 { font-size: 19px; margin-top: 1.5em; }
p { margin: 0 0 1em; }

:focus-visible { outline: 3px solid var(--zm-accent); outline-offset: 2px; border-radius: 6px; }

.zm-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; }

.zm-skip {
	position: absolute; left: -9999px; top: 8px; z-index: 999;
	background: var(--zm-accent); color: #fff; padding: 10px 18px; border-radius: 10px;
}
.zm-skip:focus { left: 16px; }

/* ---------- 3. En-tête ---------- */
.zm-header {
	position: sticky; top: 0; z-index: 100;
	background: color-mix(in srgb, var(--zm-bg) 88%, transparent);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--zm-border);
}
@supports not (backdrop-filter: blur(1px)) { .zm-header { background: var(--zm-bg); } }

.zm-header-in { display: flex; align-items: center; gap: 18px; height: var(--zm-header-h); }

.zm-logo { display: inline-flex; align-items: center; gap: 9px; color: var(--zm-text); font-weight: 700; font-size: 19px; letter-spacing: -.02em; text-decoration: none; flex-shrink: 0; }
.zm-logo:hover { text-decoration: none; }
.zm-logo-mark { color: var(--zm-accent); display: inline-flex; }
.zm-logo-dot { color: var(--zm-muted); font-weight: 500; }

.zm-nav { display: flex; align-items: center; gap: 4px; margin-left: 10px; flex: 1; }
.zm-nav-close { display: none; }

.zm-nav-link {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 8px 12px; border-radius: 10px;
	color: var(--zm-text-2); font-size: 15.5px; font-weight: 600;
	background: none; border: 0; cursor: pointer; font-family: inherit;
	white-space: nowrap; transition: background .15s, color .15s;
}
.zm-nav-link:hover { background: var(--zm-bg-soft); color: var(--zm-text); text-decoration: none; }
.zm-mega-btn[aria-expanded="true"] { background: var(--zm-accent-soft); color: var(--zm-accent); }
.zm-mega-btn svg { transition: transform .18s; }
.zm-mega-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

.zm-has-mega { position: static; }

.zm-mega {
	position: absolute; left: 0; right: 0; top: 100%;
	background: var(--zm-card); border-bottom: 1px solid var(--zm-border);
	box-shadow: var(--zm-shadow-lg);
	animation: zm-drop .16s ease-out;
}
@keyframes zm-drop { from { opacity: 0; transform: translateY(-6px); } }
.zm-mega-in { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 26px; padding: 26px 20px 30px; }
.zm-mega-title { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--zm-muted); }
.zm-mega-col ul { list-style: none; margin: 0; padding: 0; }
.zm-mega-col li { margin: 0 0 1px; }
.zm-mega-col a { display: block; padding: 5px 8px; margin-left: -8px; border-radius: 8px; color: var(--zm-text-2); font-size: 14.5px; line-height: 1.45; }
.zm-mega-col a:hover { background: var(--zm-accent-soft); color: var(--zm-accent); text-decoration: none; }
.zm-mega-more { color: var(--zm-accent) !important; font-weight: 600; }

.zm-header-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }

.zm-icon-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border-radius: 10px;
	background: none; border: 1px solid transparent; color: var(--zm-text-2);
	cursor: pointer; transition: background .15s, border-color .15s;
}
.zm-icon-btn:hover { background: var(--zm-bg-soft); border-color: var(--zm-border); }

.zm-theme-btn .zm-ico-moon { display: none; }
[data-theme="dark"] .zm-theme-btn .zm-ico-sun { display: none; }
[data-theme="dark"] .zm-theme-btn .zm-ico-moon { display: block; }

.zm-burger { display: none; flex-direction: column; gap: 4px; }
.zm-burger span { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s, opacity .2s; }
.zm-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.zm-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.zm-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Recherche */
.zm-searchbar { border-top: 1px solid var(--zm-border); background: var(--zm-card); padding: 16px 0 20px; animation: zm-drop .16s ease-out; }
.zm-searchbox { position: relative; display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 1.5px solid var(--zm-border-str); border-radius: 12px; background: var(--zm-bg); }
.zm-searchbox:focus-within { border-color: var(--zm-accent); box-shadow: 0 0 0 4px var(--zm-accent-soft); }
.zm-searchbox svg { color: var(--zm-muted); flex-shrink: 0; }
.zm-searchbox input { flex: 1; border: 0; background: none; padding: 13px 0; font-size: 16px; font-family: inherit; color: var(--zm-text); outline: none; }
.zm-searchbox input::-webkit-search-cancel-button { display: none; }
.zm-searchbox kbd { font-family: var(--zm-mono); font-size: 11px; color: var(--zm-muted); border: 1px solid var(--zm-border); border-radius: 5px; padding: 2px 6px; background: var(--zm-bg-soft); }
.zm-search-results { list-style: none; margin: 12px 0 0; padding: 0; max-height: 52vh; overflow-y: auto; }
.zm-search-results li a { display: flex; align-items: baseline; gap: 10px; padding: 10px 14px; border-radius: 10px; color: var(--zm-text); }
.zm-search-results li a:hover, .zm-search-results li.zm-sel a { background: var(--zm-accent-soft); text-decoration: none; }
.zm-search-results b { font-weight: 600; font-size: 15.5px; }
.zm-search-results span { color: var(--zm-muted); font-size: 13.5px; }
.zm-search-empty { padding: 14px; color: var(--zm-muted); font-size: 15px; }

.zm-nav-overlay { position: fixed; inset: 0; background: rgba(8, 14, 24, .45); z-index: 99; }

/* ---------- 4. Pied de page ---------- */
.zm-footer { margin-top: 72px; background: var(--zm-bg-soft); border-top: 1px solid var(--zm-border); }

.zm-footer-in {
	display: grid;
	grid-template-columns: 1.9fr 1fr 1fr 1fr;
	gap: 40px 32px;
	padding-top: 52px;
	padding-bottom: 44px;
}

.zm-footer-brand p { color: var(--zm-muted); font-size: 14.5px; line-height: 1.65; margin: 14px 0 0; max-width: 34ch; }
.zm-footer-brand .zm-logo { font-size: 18px; }

.zm-footer-title { margin: 0 0 14px; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--zm-muted); }
.zm-footer-col ul { list-style: none; margin: 0; padding: 0; }
.zm-footer-col li { margin: 0 0 2px; }
.zm-footer-col a { display: block; padding: 5px 0; color: var(--zm-text-2); font-size: 14.5px; line-height: 1.45; }
.zm-footer-col a:hover { color: var(--zm-accent); text-decoration: none; }

.zm-footer-bar { border-top: 1px solid var(--zm-border); }
.zm-footer-bar-in { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; padding-top: 18px; padding-bottom: 18px; }
.zm-footer-bar p { margin: 0; font-size: 13.5px; color: var(--zm-muted); }

@media (max-width: 900px) {
	.zm-footer-in { grid-template-columns: 1fr 1fr; gap: 32px 28px; padding-top: 42px; }
	.zm-footer-brand { grid-column: 1 / -1; }
	.zm-footer-brand p { max-width: 52ch; }
}

@media (max-width: 560px) {
	.zm-footer-in { grid-template-columns: 1fr; gap: 4px; padding-top: 34px; padding-bottom: 30px; }
	.zm-footer-brand { margin-bottom: 22px; }

	/* Sur mobile, chaque colonne devient une section repliable. */
	.zm-footer-col { border-top: 1px solid var(--zm-border); padding: 4px 0; }
	.zm-footer-col .zm-footer-title { margin: 0; padding: 15px 0; cursor: pointer; position: relative; }
	.zm-footer-col .zm-footer-title::after {
		content: ""; position: absolute; right: 4px; top: 50%; width: 8px; height: 8px;
		border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
		transform: translateY(-70%) rotate(45deg); transition: transform .2s;
	}
	.zm-footer-col.zm-open .zm-footer-title::after { transform: translateY(-30%) rotate(-135deg); }
	.zm-footer-col ul { display: none; padding-bottom: 12px; }
	.zm-footer-col.zm-open ul { display: block; }
	.zm-footer-col a { padding: 8px 0; font-size: 15px; }

	.zm-footer-bar-in { flex-direction: column; gap: 6px; }
}

/* ---------- 5. Mise en page ---------- */
.zm-main { min-height: 60vh; }
.zm-page { width: 100%; margin: 0 auto; padding: 26px 20px 10px; }
.zm-page-narrow { max-width: 760px; }
.zm-page-wide { max-width: 1180px; }
.zm-page-head h1 { margin-bottom: .4em; }
.zm-content > *:first-child { margin-top: 0; }

.zm-breadcrumbs { font-size: 13.5px; color: var(--zm-muted); margin: 0 0 18px; }
.zm-breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.zm-breadcrumbs li::after { content: "›"; margin-left: 6px; color: var(--zm-border-str); }
.zm-breadcrumbs li:last-child::after { content: ""; }
.zm-breadcrumbs a { color: var(--zm-muted); }
.zm-breadcrumbs a:hover { color: var(--zm-accent); }

/* ---------- 6. Accueil ---------- */
.zm-main { position: relative; }

/* Fond du héros : halos + grille fine, en pleine largeur derrière le contenu. */
.home .zm-main::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 860px; z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(60% 55% at 12% 0%, var(--zm-glow) 0%, transparent 60%),
		radial-gradient(45% 50% at 88% 8%, color-mix(in srgb, var(--zm-accent-2) 16%, transparent) 0%, transparent 62%),
		linear-gradient(to bottom, color-mix(in srgb, var(--zm-bg-soft) 70%, var(--zm-bg)), var(--zm-bg));
}
.home .zm-main::after {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 620px; z-index: -1;
	pointer-events: none; opacity: .55;
	background-image:
		linear-gradient(to right, var(--zm-border) 1px, transparent 1px),
		linear-gradient(to bottom, var(--zm-border) 1px, transparent 1px);
	background-size: 44px 44px;
	-webkit-mask-image: radial-gradient(70% 80% at 50% 0%, #000 20%, transparent 100%);
	mask-image: radial-gradient(70% 80% at 50% 0%, #000 20%, transparent 100%);
}
[data-theme="dark"] .home .zm-main::after { opacity: .35; }

.zm-hero { padding: 46px 0 30px; }
.zm-hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 44px 56px; align-items: center; }
.zm-hero-copy { text-align: left; }

.zm-hero-badge {
	display: inline-flex; align-items: center; gap: 9px;
	background: color-mix(in srgb, var(--zm-card) 80%, transparent);
	border: 1px solid color-mix(in srgb, var(--zm-accent) 28%, var(--zm-border));
	color: var(--zm-text-2); font-size: 13px; font-weight: 600; letter-spacing: .01em;
	padding: 6px 14px 6px 10px; border-radius: 999px; margin-bottom: 22px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
	backdrop-filter: blur(6px);
}
.zm-pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--zm-ok); flex-shrink: 0; }
.zm-pulse::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--zm-ok); opacity: 0; animation: zm-pulse 2.2s ease-out infinite; }
@keyframes zm-pulse { 0% { transform: scale(.5); opacity: .8; } 100% { transform: scale(1.4); opacity: 0; } }

.zm-hero h1 { font-size: clamp(36px, 5.2vw, 60px); line-height: 1.06; letter-spacing: -.035em; font-weight: 800; margin-bottom: .4em; max-width: 14ch; }
.zm-hero h1 em {
	font-style: normal;
	background: linear-gradient(92deg, var(--zm-accent) 0%, var(--zm-accent-2) 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.zm-hero .zm-lead { font-size: clamp(17px, 1.9vw, 19px); color: var(--zm-muted); max-width: 52ch; margin: 0 0 28px; line-height: 1.65; }

.zm-hero-search { position: relative; max-width: 560px; z-index: 5; }
.zm-hero-box {
	border-radius: 16px; border: 1px solid var(--zm-border-str);
	background: var(--zm-card); padding: 4px 6px 4px 18px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 12px 32px -14px rgba(16, 24, 40, .2);
	transition: border-color .15s, box-shadow .15s;
}
.zm-hero-box:focus-within { border-color: var(--zm-accent); box-shadow: 0 0 0 4px var(--zm-accent-soft), 0 12px 32px -14px rgba(16, 24, 40, .2); }
.zm-hero-box svg { color: var(--zm-accent); }
.zm-hero-box input { padding: 15px 0; font-size: 17px; }
.zm-hero-box kbd { padding: 5px 9px; font-size: 12px; border-radius: 8px; }
.zm-hero-search .zm-search-results {
	position: absolute; left: 0; right: 0; top: 100%; margin: 8px 0 0; padding: 6px;
	background: var(--zm-card); border: 1px solid var(--zm-border); border-radius: 14px;
	box-shadow: var(--zm-shadow-lg); max-height: 46vh; z-index: 30;
}
.zm-hero-search .zm-search-results:empty { display: none; }

.zm-hero-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; font-size: 13.5px; color: var(--zm-muted); }
.zm-hero-quick a {
	display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px;
	background: color-mix(in srgb, var(--zm-card) 70%, transparent); border: 1px solid var(--zm-border);
	color: var(--zm-text-2); font-size: 13.5px; font-weight: 500; transition: .15s;
}
.zm-hero-quick a:hover { border-color: var(--zm-accent); color: var(--zm-accent); background: var(--zm-accent-soft); text-decoration: none; }

.zm-hero-trust { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; color: var(--zm-text-2); font-size: 14px; font-weight: 500; }
.zm-hero-trust li { display: inline-flex; align-items: center; gap: 8px; }
.zm-hero-trust svg { width: 17px; height: 17px; color: var(--zm-ok); }

/* Démo en direct (compteur de mots) */
.zm-hero-demo { position: relative; }
.zm-hero-demo::before {
	content: ""; position: absolute; inset: 14% -6% -8% 8%; z-index: -1; border-radius: 40px;
	background: linear-gradient(135deg, color-mix(in srgb, var(--zm-accent) 28%, transparent), color-mix(in srgb, var(--zm-accent-2) 22%, transparent));
	filter: blur(42px); opacity: .9;
}
.zm-demo {
	background: var(--zm-card); border: 1px solid var(--zm-border); border-radius: 20px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 30px 60px -30px rgba(16, 24, 40, .35);
	overflow: hidden;
}
[data-theme="dark"] .zm-demo { box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 30px 60px -30px rgba(0, 0, 0, .8); }
.zm-demo-bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--zm-border); background: var(--zm-bg-soft); }
.zm-demo-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--zm-border-str); }
.zm-demo-dot:nth-child(1) { background: #ff5f57; } .zm-demo-dot:nth-child(2) { background: #febc2e; } .zm-demo-dot:nth-child(3) { background: #28c840; }
.zm-demo-title { margin-left: 8px; font-size: 12.5px; font-weight: 600; color: var(--zm-muted); letter-spacing: .01em; }
.zm-demo-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--zm-ok); }
.zm-demo-area {
	display: block; width: 100%; min-height: 150px; resize: none; border: 0; outline: none;
	padding: 18px 20px; font-family: inherit; font-size: 15.5px; line-height: 1.65; color: var(--zm-text);
	background: var(--zm-card);
}
.zm-demo-area::placeholder { color: var(--zm-muted); }
.zm-demo-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--zm-border); }
.zm-demo-stats div { padding: 14px 10px; text-align: center; border-right: 1px solid var(--zm-border); }
.zm-demo-stats div:last-child { border-right: 0; }
.zm-demo-stats b { display: block; font-size: 24px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; color: var(--zm-accent); font-variant-numeric: tabular-nums; transition: transform .12s; }
.zm-demo-stats b.zm-tick { transform: scale(1.06); }
.zm-demo-stats span { display: block; margin-top: 4px; font-size: 12px; font-weight: 500; color: var(--zm-muted); text-transform: uppercase; letter-spacing: .05em; }
.zm-demo-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--zm-border); background: var(--zm-bg-soft); font-size: 13px; }
.zm-demo-foot span { display: inline-flex; align-items: center; gap: 7px; color: var(--zm-muted); }
.zm-demo-foot svg { width: 15px; height: 15px; }
.zm-demo-foot a { font-weight: 600; white-space: nowrap; }

/* Bandeau des catégories */
.zm-cats-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; padding: 34px 0 6px; }
.zm-cat-tile {
	display: flex; flex-direction: column; gap: 10px; padding: 16px 14px 14px;
	border-radius: 14px; border: 1px solid var(--zm-border); background: var(--zm-card);
	color: var(--zm-text); transition: border-color .16s, transform .16s, box-shadow .16s;
}
.zm-cat-tile:hover { text-decoration: none; transform: translateY(-2px); border-color: color-mix(in srgb, var(--zm-accent) 45%, var(--zm-border)); box-shadow: var(--zm-shadow); }
.zm-cat-ico { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--zm-accent-soft); color: var(--zm-accent); }
.zm-cat-ico svg { width: 18px; height: 18px; }
.zm-cat-tile b { font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.zm-cat-tile small { font-size: 12.5px; color: var(--zm-muted); margin-top: -6px; }

/* Sections */
.zm-section { padding: 44px 0 4px; }
.zm-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.zm-section-head h2 { margin: 0; font-size: clamp(22px, 2.7vw, 28px); letter-spacing: -.025em; }
.zm-section-head p { margin: 5px 0 0; color: var(--zm-muted); font-size: 15px; }
.zm-section-head-ico { display: inline-flex; align-items: center; gap: 12px; }
.zm-section-head-ico .zm-cat-ico { width: 38px; height: 38px; border-radius: 11px; }
.zm-section-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 600; white-space: nowrap; padding: 7px 12px; border-radius: 9px; }
.zm-section-link:hover { background: var(--zm-accent-soft); text-decoration: none; }
.zm-section-link svg { width: 15px; height: 15px; transition: transform .16s; }
.zm-section-link:hover svg { transform: translateX(3px); }
.zm-eyebrow { display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--zm-accent); margin-bottom: 10px; }
.zm-section-head.zm-center { flex-direction: column; align-items: center; text-align: center; margin-bottom: 30px; }
.zm-section-head.zm-center h2 { max-width: 22ch; font-size: clamp(26px, 3.4vw, 36px); }
.zm-section-head.zm-center p { max-width: 56ch; font-size: 16.5px; }

/* Cartes d'outils */
.zm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 14px; }
.zm-tool-card {
	position: relative; display: flex; flex-direction: column; gap: 6px;
	padding: 20px; border: 1px solid var(--zm-border); border-radius: 16px;
	background: var(--zm-card); color: var(--zm-text);
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
	transition: border-color .18s, transform .18s, box-shadow .18s;
}
.zm-tool-card::after {
	content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
	background: linear-gradient(135deg, color-mix(in srgb, var(--zm-accent) 7%, transparent), transparent 55%);
	transition: opacity .18s;
}
.zm-tool-card:hover { text-decoration: none; border-color: color-mix(in srgb, var(--zm-accent) 50%, var(--zm-border)); transform: translateY(-3px); box-shadow: var(--zm-shadow-lg); }
.zm-tool-card:hover::after { opacity: 1; }
.zm-tool-ico {
	width: 42px; height: 42px; border-radius: 12px; margin-bottom: 8px;
	display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
	background: linear-gradient(145deg, var(--zm-accent-soft), color-mix(in srgb, var(--zm-accent) 16%, var(--zm-card)));
	border: 1px solid color-mix(in srgb, var(--zm-accent) 16%, transparent);
	color: var(--zm-accent);
	transition: background .18s, color .18s, transform .18s;
}
.zm-tool-card:hover .zm-tool-ico { background: linear-gradient(145deg, var(--zm-accent), var(--zm-accent-2)); color: #fff; border-color: transparent; }
.zm-tool-card b { font-size: 16px; font-weight: 600; letter-spacing: -.012em; line-height: 1.3; }
.zm-tool-card > span:not(.zm-tool-ico):not(.zm-tag-hot):not(.zm-card-arrow) { color: var(--zm-muted); font-size: 14px; line-height: 1.55; }
.zm-card-arrow {
	position: absolute; top: 16px; right: 16px; width: 28px; height: 28px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--zm-accent); background: var(--zm-accent-soft);
	opacity: 0; transform: translate(-6px, 6px); transition: opacity .18s, transform .18s;
}
.zm-card-arrow svg { width: 14px; height: 14px; }
.zm-tool-card:hover .zm-card-arrow { opacity: 1; transform: translate(0, 0); }
.zm-tool-card.zm-is-current { border-color: var(--zm-accent); background: var(--zm-accent-soft); }
.zm-tag-hot { align-self: flex-start; margin-top: 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--zm-accent); background: var(--zm-accent-soft); padding: 3px 9px; border-radius: 999px; }

/* Variante compacte (sections par catégorie) */
.zm-grid-compact { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 10px; }
.zm-grid-compact .zm-tool-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 1px; align-items: center; padding: 14px 44px 14px 16px; border-radius: 14px; }
.zm-grid-compact .zm-tool-ico { grid-row: 1 / 3; width: 40px; height: 40px; margin: 0; border-radius: 11px; }
.zm-grid-compact .zm-tool-card b { font-size: 15px; }
.zm-grid-compact .zm-tool-card > span:not(.zm-tool-ico):not(.zm-tag-hot):not(.zm-card-arrow) { font-size: 13.5px; line-height: 1.45; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zm-grid-compact .zm-tag-hot { display: none; }
.zm-grid-compact .zm-card-arrow { top: 50%; margin-top: -14px; right: 12px; }
.zm-grid-compact .zm-tool-card:hover { transform: translateY(-2px); box-shadow: var(--zm-shadow); }

/* Pourquoi zmessages */
.zm-why { padding: 64px 0 20px; }
.zm-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.zm-why-card {
	position: relative; padding: 28px 26px 26px; border-radius: 20px;
	background: var(--zm-card); border: 1px solid var(--zm-border);
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
	overflow: hidden;
}
.zm-why-card::before {
	content: ""; position: absolute; top: -40px; right: -40px; width: 160px; height: 160px; border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--zm-accent) 14%, transparent), transparent 70%);
}
.zm-why-ico {
	width: 46px; height: 46px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center;
	background: linear-gradient(145deg, var(--zm-accent), var(--zm-accent-2)); color: #fff;
	box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--zm-accent) 70%, transparent);
	margin-bottom: 18px;
}
.zm-why-ico svg { width: 22px; height: 22px; }
.zm-why-card h3 { margin: 0 0 8px; font-size: 18.5px; letter-spacing: -.02em; }
.zm-why-card p { margin: 0; color: var(--zm-muted); font-size: 15px; line-height: 1.65; }

.zm-stats-band {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 18px 0 0;
	border: 1px solid var(--zm-border); border-radius: 20px; overflow: hidden;
	background: var(--zm-card);
}
.zm-stats-band > div { padding: 22px 18px; text-align: center; border-right: 1px solid var(--zm-border); }
.zm-stats-band > div:last-child { border-right: 0; }
.zm-stats-band b { display: block; font-size: clamp(28px, 3.4vw, 38px); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--zm-text); font-variant-numeric: tabular-nums; }
.zm-stats-band b em { font-style: normal; background: linear-gradient(92deg, var(--zm-accent), var(--zm-accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.zm-stats-band span { display: block; margin-top: 8px; font-size: 13.5px; color: var(--zm-muted); font-weight: 500; }

/* Appel à l'action final */
.zm-cta { margin-top: 64px; }
.zm-cta-in {
	position: relative; overflow: hidden; text-align: center;
	padding: 56px 28px; border-radius: 24px;
	background: linear-gradient(135deg, var(--zm-accent) 0%, var(--zm-accent-2) 100%);
	color: #fff; box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--zm-accent) 75%, transparent);
}
.zm-cta-in::before {
	content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
	background-image: linear-gradient(to right, rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.12) 1px, transparent 1px);
	background-size: 40px 40px;
	-webkit-mask-image: radial-gradient(60% 100% at 50% 100%, #000, transparent);
	mask-image: radial-gradient(60% 100% at 50% 100%, #000, transparent);
}
.zm-cta-in > * { position: relative; }
.zm-cta-in h2 { color: #fff; margin: 0 0 10px; font-size: clamp(26px, 3.6vw, 38px); letter-spacing: -.03em; }
.zm-cta-in p { margin: 0 auto 26px; max-width: 54ch; color: rgba(255, 255, 255, .84); font-size: 16.5px; }
.zm-cta .zm-btns { justify-content: center; margin-top: 0; }
.zm-btn-light { background: #fff; border-color: #fff; color: var(--zm-accent-d); padding: 13px 22px; border-radius: 12px; font-size: 15.5px; }
.zm-btn-light:hover { background: #f1f5ff; border-color: #f1f5ff; color: var(--zm-accent-d); }
[data-theme="dark"] .zm-btn-light { color: #1d4ed8; }
.zm-btn-outline-light { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .45); color: #fff; padding: 13px 22px; border-radius: 12px; font-size: 15.5px; }
.zm-btn-outline-light:hover { background: rgba(255, 255, 255, .2); border-color: #fff; color: #fff; }

/* Apparition douce des sections */
@media (prefers-reduced-motion: no-preference) {
	.zm-reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
	.zm-reveal.zm-in { opacity: 1; transform: none; }
}

@media (max-width: 1040px) {
	.zm-cats-strip { grid-template-columns: repeat(4, 1fr); }
	.zm-why-grid { grid-template-columns: 1fr; }
	.zm-stats-band { grid-template-columns: repeat(2, 1fr); }
	.zm-stats-band > div:nth-child(2) { border-right: 0; }
	.zm-stats-band > div:nth-child(-n+2) { border-bottom: 1px solid var(--zm-border); }
}
@media (max-width: 900px) {
	.zm-hero-grid { grid-template-columns: 1fr; gap: 36px; }
	.zm-hero h1 { max-width: none; }
	.zm-hero-demo { max-width: 560px; }
}
@media (max-width: 640px) {
	.zm-hero { padding: 26px 0 16px; }
	.zm-hero-box input { font-size: 16px; padding: 13px 0; }
	.zm-hero-box kbd { display: none; }
	.zm-cats-strip { grid-template-columns: repeat(2, 1fr); gap: 8px; padding-top: 24px; }
	.zm-cat-tile { flex-direction: row; align-items: center; gap: 12px; padding: 12px 14px; }
	.zm-cat-tile small { display: none; }
	.zm-demo-stats b { font-size: 20px; }
	.zm-demo-stats span { font-size: 11px; }
	.zm-why { padding-top: 44px; }
	.zm-why-card { padding: 22px 20px; }
	.zm-stats-band > div { padding: 18px 12px; }
	.zm-cta { margin-top: 44px; }
	.zm-cta-in { padding: 40px 20px; border-radius: 20px; }
	.zm-cta .zm-btns { flex-direction: column; }
	.zm-grid-compact .zm-tool-card { padding-right: 16px; }
	.zm-grid-compact .zm-card-arrow { display: none; }
}

/* Index A→Z */
.zm-cat-block { scroll-margin-top: 90px; padding-top: 12px; }
.zm-cat-head { display: flex; align-items: center; gap: 12px; margin: 30px 0 14px; }
.zm-cat-head h2 { margin: 0; }
.zm-cat-count { font-size: 13px; color: var(--zm-muted); background: var(--zm-bg-soft); border: 1px solid var(--zm-border); padding: 2px 10px; border-radius: 999px; }

/* ---------- 7. Composants d'outils ---------- */
.zm-tool { margin: 0 auto; }
.zm-tool-head { max-width: 780px; }
.zm-tool-head h1 { margin-bottom: .3em; }
.zm-tool-head .zm-lead { margin-left: 0; text-align: left; }

.zm-card { background: var(--zm-card); border: 1px solid var(--zm-border); border-radius: var(--zm-radius-lg); padding: 22px; box-shadow: var(--zm-shadow); }
.zm-card + .zm-card { margin-top: 16px; }

.zm-label { display: block; font-weight: 600; font-size: 14.5px; margin-bottom: 8px; color: var(--zm-text-2); }

.zm-area, .zm-input, .zm-select {
	width: 100%; padding: 13px 14px; font-size: 16px; line-height: 1.6;
	font-family: inherit; color: var(--zm-text);
	background: var(--zm-bg); border: 1.5px solid var(--zm-border); border-radius: 12px;
	outline: none; transition: border-color .15s, box-shadow .15s;
}
.zm-area { min-height: 200px; resize: vertical; }
.zm-area.zm-mono, .zm-input.zm-mono { font-family: var(--zm-mono); font-size: 14.5px; }
.zm-area:focus, .zm-input:focus, .zm-select:focus { border-color: var(--zm-accent); box-shadow: 0 0 0 4px var(--zm-accent-soft); }
.zm-area[readonly], .zm-input[readonly] { background: var(--zm-bg-sunk); }
.zm-select { appearance: none; cursor: pointer; padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23667a93' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px; }

.zm-row { display: flex; flex-wrap: wrap; gap: 12px; }
.zm-row > * { flex: 1 1 180px; min-width: 0; }
.zm-field { margin-bottom: 14px; }

.zm-btns { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.zm-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	padding: 11px 17px; border-radius: 11px; cursor: pointer;
	font-family: inherit; font-size: 15px; font-weight: 600;
	color: var(--zm-text); background: var(--zm-bg); border: 1.5px solid var(--zm-border);
	transition: background .15s, border-color .15s, transform .08s;
}
.zm-btn:hover { background: var(--zm-bg-soft); border-color: var(--zm-border-str); text-decoration: none; }
.zm-btn:active { transform: translateY(1px); }
.zm-btn-primary { background: var(--zm-accent); border-color: var(--zm-accent); color: #fff; }
.zm-btn-primary:hover { background: var(--zm-accent-d); border-color: var(--zm-accent-d); color: #fff; }
.zm-btn-ghost { border-color: transparent; background: none; color: var(--zm-muted); }
.zm-btn-ghost:hover { background: var(--zm-bg-soft); color: var(--zm-text); }
.zm-btn-sm { padding: 8px 13px; font-size: 14px; border-radius: 9px; }
.zm-btn.zm-done { border-color: var(--zm-ok); color: var(--zm-ok); background: var(--zm-ok-soft); }

.zm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.zm-chip {
	padding: 7px 14px; border-radius: 999px; cursor: pointer;
	font-family: inherit; font-size: 14px; font-weight: 600;
	background: var(--zm-bg-soft); border: 1.5px solid var(--zm-border); color: var(--zm-text-2);
	transition: .15s;
}
.zm-chip:hover { border-color: var(--zm-accent); color: var(--zm-accent); }
.zm-chip[aria-pressed="true"], .zm-chip.zm-on { background: var(--zm-accent); border-color: var(--zm-accent); color: #fff; }

.zm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin: 16px 0 0; }
.zm-stat { text-align: center; padding: 14px 10px; border-radius: 12px; background: var(--zm-bg-soft); border: 1px solid var(--zm-border); }
.zm-stat b { display: block; font-size: 27px; line-height: 1.1; color: var(--zm-accent); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.zm-stat span { display: block; margin-top: 4px; font-size: 12.5px; color: var(--zm-muted); }
.zm-stats-sm .zm-stat b { font-size: 20px; color: var(--zm-text); }

.zm-out {
	margin-top: 16px; padding: 16px; border-radius: 12px;
	background: var(--zm-bg-soft); border: 1px solid var(--zm-border);
	white-space: pre-wrap; word-break: break-word; font-size: 15.5px; min-height: 56px;
}
.zm-out.zm-mono { font-family: var(--zm-mono); font-size: 14px; }
.zm-out:empty::before { content: "Le résultat apparaîtra ici."; color: var(--zm-muted); }

.zm-note { display: flex; gap: 10px; padding: 13px 15px; border-radius: 12px; font-size: 14.5px; line-height: 1.6; background: var(--zm-accent-soft); color: var(--zm-text-2); border: 1px solid color-mix(in srgb, var(--zm-accent) 22%, transparent); }
.zm-note-ok { background: var(--zm-ok-soft); border-color: color-mix(in srgb, var(--zm-ok) 28%, transparent); }
.zm-err { color: #b42318; font-size: 14.5px; margin-top: 10px; }
[data-theme="dark"] .zm-err { color: #fca5a5; }

.zm-toast {
	position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px);
	background: var(--zm-text); color: var(--zm-bg);
	padding: 11px 20px; border-radius: 999px; font-size: 14.5px; font-weight: 600;
	box-shadow: var(--zm-shadow-lg); opacity: 0; pointer-events: none;
	transition: opacity .2s, transform .2s; z-index: 200;
}
.zm-toast.zm-show { opacity: 1; transform: translate(-50%, 0); }

/* Résultats en liste (générateurs) */
.zm-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.zm-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-radius: 11px; background: var(--zm-bg-soft); border: 1px solid var(--zm-border); }
.zm-list code { font-family: var(--zm-mono); font-size: 14.5px; word-break: break-all; }

/* FAQ */
.zm-faq { margin-top: 10px; }
.zm-faq details { border: 1px solid var(--zm-border); border-radius: 12px; background: var(--zm-card); margin-bottom: 10px; }
.zm-faq summary { cursor: pointer; list-style: none; padding: 15px 46px 15px 18px; font-weight: 600; font-size: 16.5px; position: relative; }
.zm-faq summary::-webkit-details-marker { display: none; }
.zm-faq summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 22px; font-weight: 400; color: var(--zm-accent); line-height: 1; }
.zm-faq details[open] summary::after { content: "–"; }
.zm-faq .zm-faq-body { padding: 0 18px 16px; color: var(--zm-text-2); font-size: 16px; }
.zm-faq .zm-faq-body > *:first-child { margin-top: 0; }
.zm-faq .zm-faq-body > *:last-child { margin-bottom: 0; }

/* Emplacements publicitaires — aucun cadre visible tant qu'aucune annonce n'est servie */
.zm-ad { margin: 26px 0; text-align: center; }
.zm-ad ins { display: block; }
.zm-ad:empty { display: none; margin: 0; }

/* Colonnes outil + barre latérale */
.zm-tool-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 34px; align-items: start; }
.zm-sidebar { position: sticky; top: calc(var(--zm-header-h) + 20px); display: grid; gap: 16px; }
.zm-side-card { padding: 18px; border: 1px solid var(--zm-border); border-radius: var(--zm-radius); background: var(--zm-card); }
.zm-side-card p.zm-side-title { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--zm-muted); }
.zm-side-card ul { list-style: none; margin: 0; padding: 0; }
.zm-side-card li { margin-bottom: 4px; }
.zm-side-card li a { display: block; padding: 7px 10px; margin-left: -10px; border-radius: 9px; color: var(--zm-text-2); font-size: 14.5px; line-height: 1.45; }
.zm-side-card li a:hover { background: var(--zm-accent-soft); color: var(--zm-accent); text-decoration: none; }

/* Contenu rédactionnel */
.zm-prose { max-width: 760px; margin-top: 40px; }
.zm-prose ul, .zm-prose ol { padding-left: 22px; margin: 0 0 1em; }
.zm-prose li { margin-bottom: .45em; }
.zm-prose table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: 15.5px; display: block; overflow-x: auto; }
.zm-prose th, .zm-prose td { border: 1px solid var(--zm-border); padding: 10px 13px; text-align: left; }
.zm-prose th { background: var(--zm-bg-soft); font-weight: 650; }
.zm-prose code { font-family: var(--zm-mono); font-size: .9em; background: var(--zm-bg-sunk); padding: 2px 6px; border-radius: 6px; }
.zm-prose blockquote { margin: 1.2em 0; padding: 2px 18px; border-left: 3px solid var(--zm-accent); color: var(--zm-text-2); }

/* ---------- 8. Divers ---------- */
.zm-404 { text-align: center; padding-top: 50px; }
.zm-404-code { font-size: 76px; font-weight: 800; color: var(--zm-accent); margin: 0; line-height: 1; letter-spacing: -.04em; }
.zm-404 .zm-grid { text-align: left; margin-top: 26px; }

.zm-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1040px) {
	.zm-tool-layout { grid-template-columns: minmax(0, 1fr); }
	.zm-sidebar { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}

@media (max-width: 880px) {
	.zm-burger { display: inline-flex; }
	/* Le panneau reste DANS le viewport même fermé : le parquer à droite avec
	   translateX(102%) rallongeait la page et provoquait un défilement horizontal,
	   qu'aucun overflow sur <html> ne peut clipper puisqu'il est en position fixed. */
	/* .zm-header porte un backdrop-filter, ce qui en fait le bloc conteneur de
	   ses descendants en position fixed : « bottom: 0 » se rapportait alors à la
	   barre (64 px) et non à la fenêtre. On impose donc une hauteur explicite.
	   100dvh suit la barre d'adresse mobile ; 100vh sert de repli. */
	.zm-nav {
		position: fixed; top: 0; right: 0; width: min(320px, 86vw);
		height: 100vh;
		height: 100dvh;
		flex-direction: column; align-items: stretch; gap: 2px;
		background: var(--zm-card); border-left: 1px solid var(--zm-border);
		padding: 68px 16px 26px; margin: 0; z-index: 101;
		overflow-y: auto; box-shadow: var(--zm-shadow-lg);
		visibility: hidden; opacity: 0;
		transition: opacity .2s ease, visibility .2s;
	}
	.zm-nav.zm-open { visibility: visible; opacity: 1; }
	.zm-nav-close { display: block; position: absolute; top: 14px; right: 16px; width: 38px; height: 38px; border: 0; border-radius: 10px; background: var(--zm-bg-soft); color: var(--zm-text); font-size: 26px; line-height: 1; cursor: pointer; }
	.zm-nav-link { justify-content: space-between; padding: 12px 14px; font-size: 16.5px; }
	.zm-has-mega { position: relative; }
	.zm-mega { position: static; box-shadow: none; border: 0; background: none; animation: none; }
	.zm-mega-in { grid-template-columns: 1fr; padding: 4px 0 10px; gap: 0; }
	.zm-mega-col a { font-size: 15px; padding: 9px 14px; margin-left: 0; }

	/* Chaque catégorie se replie : plus de cent outils ne tiennent pas
	   dans un menu déroulé au doigt. */
	.zm-mega-col { border-top: 1px solid var(--zm-border); }
	.zm-mega-col .zm-mega-title {
		display: flex; align-items: center; justify-content: space-between;
		margin: 0; padding: 13px 14px; cursor: pointer;
		font-size: 12.5px; color: var(--zm-text-2);
	}
	.zm-mega-col .zm-mega-title a { padding: 0; font-size: inherit; color: inherit; pointer-events: none; }
	.zm-mega-col .zm-mega-title::after {
		content: ""; flex-shrink: 0; width: 8px; height: 8px; margin-right: 4px;
		border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
		transform: translateY(-2px) rotate(45deg); transition: transform .2s;
	}
	.zm-mega-col.zm-open .zm-mega-title::after { transform: translateY(2px) rotate(-135deg); }
	.zm-mega-col ul { display: none; padding-bottom: 8px; }
	.zm-mega-col.zm-open ul { display: block; }
}

@media (max-width: 640px) {
	body { font-size: 16.5px; }
	.zm-page { padding: 18px 16px 8px; }
	.zm-wrap { padding: 0 16px; }
	.zm-card { padding: 17px; border-radius: 16px; }
	.zm-grid { grid-template-columns: 1fr; }
	.zm-btn { flex: 1 1 auto; }
	.zm-stat b { font-size: 23px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}