:root {
	/* =========================================================
	   BRAND
	========================================================= */
	/* PRIMARY = ROUGE EuréCard — couleur dominante du logo (Pokéball).
	   Or & bleu sont des accents secondaires. */
	--pkb-primary: #fe0201;
	--pkb-primary-hover: #d40000;
	--pkb-primary-soft: #FFEBEE;
	--pkb-primary-border: rgba(254,2,1,.25);
	--pkb-primary-ring: rgba(254,2,1,.10);

	/* Danger reste rouge (cohérent avec primary mais légèrement nuancé) */
	--pkb-danger: #d40000;
	--pkb-danger-hover: #a30000;
	--pkb-danger-soft: #FFEBEE;

	--pkb-blue: #1565C0;
	--pkb-blue-soft: #E3F2FD;
	--pkb-blue-light: #42A5F5;

	--pkb-yellow: #F0A500;
	--pkb-yellow-soft: #FFF8E1;

	--pkb-green: #22c55e;
	--pkb-green-soft: #ecfdf5;

	--pkb-purple: #fe0201;
	--pkb-purple-soft: #FFEBEE;

	--pkb-pink: #ec4899;
	--pkb-pink-soft: #fdf2f8;

	--pkb-orange: #f97316;
	--pkb-orange-soft: #fff7ed;

	--pkb-red: #fe0201;
	--pkb-red-soft: #FFEBEE;

	/* =========================================================
	   BACKGROUNDS
	========================================================= */
	--pkb-bg: #f6f8fb;
	--pkb-bg-soft: #f7f9fc;
	--pkb-bg-strong: #edf2f7;

	--pkb-surface: #ffffff;
	--pkb-surface-soft: #f3f4f6;
	--pkb-surface-muted: #f8fafc;
	--pkb-surface-glass: rgba(255,255,255,.88);
	--pkb-surface-glass-strong: rgba(255,255,255,.96);

	/* =========================================================
	   TEXT
	========================================================= */
	--pkb-text: #111827;
	--pkb-ink: #0f172a;
	--pkb-text-soft: #475569;
	--pkb-text-muted: #64748b;
	--pkb-muted: #64748b;
	--pkb-text-light: #94a3b8;
	--pkb-text-invert: #ffffff;

	/* =========================================================
	   BORDERS
	========================================================= */
	--pkb-border: rgba(15,23,42,.10);
	--pkb-border-soft: rgba(15,23,42,.07);
	--pkb-border-strong: rgba(15,23,42,.16);

	/* =========================================================
	   SHADOWS
	========================================================= */
	--pkb-shadow-xs: 0 1px 3px rgba(15,23,42,.04);
	--pkb-shadow-sm: 0 2px 6px rgba(15,23,42,.05);
	--pkb-shadow-md: 0 4px 12px rgba(15,23,42,.06);
	--pkb-shadow-lg: 0 8px 20px rgba(15,23,42,.08);
	--pkb-shadow-xl: 0 12px 28px rgba(15,23,42,.10);

	/* =========================================================
	   RADIUS
	========================================================= */
	--pkb-radius-xs: 10px;
	--pkb-radius-sm: 14px;
	--pkb-radius-md: 18px;
	--pkb-radius-lg: 24px;
	--pkb-radius-xl: 28px;
	--pkb-radius-2xl: 34px;
	--pkb-radius-pill: 999px;

	/* =========================================================
	   LAYOUT
	========================================================= */
	--pkb-container-xs: 760px;
	--pkb-container-sm: 1080px;
	--pkb-container: 1680px;
	--pkb-container-wide: 1680px;
	--pkb-container-full: 100%;

	--pkb-container-padding: 14px;
	--pkb-container-padding-mobile: 8px;

	--pkb-gap-xs: 6px;
	--pkb-gap-sm: 10px;
	--pkb-gap: 18px;
	--pkb-gap-md: 24px;
	--pkb-gap-lg: 32px;
	--pkb-gap-xl: 48px;

	/* =========================================================
	   HEADER / NAV
	========================================================= */
	--pkb-header-height: 78px;
	--pkb-header-height-mobile: 64px;

	/* =========================================================
	   FORMS
	========================================================= */
	--pkb-input-height: 48px;
	--pkb-input-height-sm: 42px;
	--pkb-input-bg: var(--pkb-surface);
	--pkb-input-border: var(--pkb-border);
	--pkb-input-radius: var(--pkb-radius-md);

	/* =========================================================
	   BUTTONS
	========================================================= */
	--pkb-btn-height: 46px;
	--pkb-btn-height-sm: 40px;
	--pkb-btn-radius: var(--pkb-radius-md);

	/* =========================================================
	   TYPOGRAPHY
	========================================================= */
	--pkb-font-main: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	--pkb-font-size-xs: 12px;
	--pkb-font-size-sm: 13px;
	--pkb-font-size-base: 16px;
	--pkb-font-size-md: 18px;
	--pkb-font-size-lg: 22px;
	--pkb-font-size-xl: 28px;
	--pkb-font-size-2xl: 36px;
	--pkb-font-size-hero: clamp(34px, 5vw, 72px);

	--pkb-line-height-tight: 1.05;
	--pkb-line-height-title: 1.12;
	--pkb-line-height-base: 1.5;

	/* =========================================================
	   MOTION
	========================================================= */
	--pkb-transition-fast: .15s ease;
	--pkb-transition: .22s ease;
	--pkb-transition-slow: .35s ease;

	/* =========================================================
	   OPACITY / OVERLAYS
	========================================================= */
	--pkb-overlay-light: rgba(255,255,255,.72);
	--pkb-overlay-dark: rgba(15,23,42,.58);
	--pkb-backdrop-blur: blur(14px);

	/* =========================================================
	   Z-INDEX
	========================================================= */
	--pkb-z-base: 1;
	--pkb-z-sticky: 50;
	--pkb-z-header: 100;
	--pkb-z-dropdown: 200;
	--pkb-z-overlay: 900;
	--pkb-z-modal: 1000;
	--pkb-z-max: 1100;
}

/* =========================================================
   MOBILE VARIABLES
========================================================= */

@media (max-width: 760px) {
	:root {
		--pkb-container-padding: var(--pkb-container-padding-mobile);
		--pkb-gap: 8px;
		--pkb-header-height: var(--pkb-header-height-mobile);
		--pkb-input-height: 44px;
		--pkb-btn-height: 44px;
	}
}

/* =========================================================
   GLOBAL CONTAINERS
========================================================= */

.pkb-container,
.pb-mega-inner,
.pkbh-wrap,
.pb-global-wrap,
.pkdx-global-wrap {
	width: min(var(--pkb-container), 100%);
	margin-inline: auto;
	padding-inline: var(--pkb-container-padding);
}

.pkb-container-sm {
	width: min(var(--pkb-container-sm), 100%);
	margin-inline: auto;
	padding-inline: var(--pkb-container-padding);
}

.pkb-container-wide {
	width: min(var(--pkb-container-wide), 100%);
	margin-inline: auto;
	padding-inline: var(--pkb-container-padding);
}

.pkb-container-full {
	width: 100%;
	max-width: 100%;
	margin-inline: auto;
	padding-inline: var(--pkb-container-padding);
}

/* =========================================================
   MOBILE GLOBAL ARCHIVES
========================================================= */

@media (max-width: 760px) {
	.pb-global-archive,
	.pkdx-global-archive {
		padding-left: 0;
		padding-right: 0;
	}

	.pb-global-wrap,
	.pkdx-global-wrap,
	.pkb-container,
	.pkb-container-sm,
	.pkb-container-wide,
	.pkb-container-full {
		width: 100%;
		max-width: 100%;
		padding-inline: var(--pkb-container-padding);
		margin-inline: auto;
	}

	.pb-cards-grid,
	.pkdx-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--pkb-gap);
		width: 100%;
	}

	.pb-json-search-shell {
		margin-left: calc(var(--pkb-container-padding) * -1);
		margin-right: calc(var(--pkb-container-padding) * -1);
	}
}