/* ===========================================================
   Nerd Marketing — Design Tokens (Figma-sourced 2026-09-06)
   =========================================================== */

:root {
	/* Palette (charte graphique officielle Nerd Marketing 2026-09-06) */
	--nm-navy:       #1A3155;  /* palette principale — navy officiel */
	--nm-navy-2:     #112545;  /* variant plus foncé pour hover/cards */
	--nm-navy-deep:  #0F1E3A;  /* extra deep pour sections stackées */
	--nm-blue:       #115992;  /* palette secondaire */
	--nm-blue-light: #3AA8FF;  /* palette secondaire */
	--nm-green:      #98C93C;  /* palette principale — vert lime */
	--nm-green-2:    #DAED2E;  /* variant hover */
	--nm-yellow:     #EEE933;  /* palette secondaire — jaune officiel (pas #FFCC00) */
	--nm-gray:       #EEF0F3;  /* palette secondaire */
	--nm-white:      #FFFFFF;
	--nm-black:      #000000;

	/* Semantic aliases */
	--nm-bg:            var(--nm-white);
	--nm-bg-dark:       var(--nm-navy);
	--nm-bg-alt:        var(--nm-gray);
	--nm-text:          var(--nm-navy);
	--nm-text-inverse:  var(--nm-white);
	--nm-accent:        var(--nm-green);
	--nm-accent-hover:  var(--nm-green-2);
	--nm-link:          var(--nm-blue-light);

	/* Type */
	--nm-font-body:     'Nunito', system-ui, -apple-system, sans-serif;
	--nm-font-heading:  'Nunito', system-ui, -apple-system, sans-serif;
	--nm-font-menu:     'Roboto', system-ui, -apple-system, sans-serif;

	--nm-fs-hero:       clamp(2.5rem, 6vw, 5rem);        /* 40 - 80px */
	--nm-fs-h1:         clamp(2rem, 4vw, 3.5rem);        /* 32 - 56px */
	--nm-fs-h2:         clamp(1.75rem, 3vw, 3rem);       /* 28 - 48px */
	--nm-fs-h3:         clamp(1.375rem, 2vw, 2rem);      /* 22 - 32px */
	--nm-fs-body-lg:    1.375rem;                        /* 22px */
	--nm-fs-body:       1.125rem;                        /* 18px */
	--nm-fs-body-sm:    0.9375rem;                       /* 15px */

	--nm-lh-tight:      1.15;
	--nm-lh-heading:    1.25;
	--nm-lh-body:       1.6;

	/* Space */
	--nm-space-xs:  0.5rem;
	--nm-space-sm:  1rem;
	--nm-space-md:  2rem;
	--nm-space-lg:  4rem;
	--nm-space-xl:  6rem;
	--nm-space-xxl: 8rem;

	/* Layout */
	--nm-container:      1200px;
	--nm-container-wide: 1440px;
	--nm-container-pad:  1.5rem;

	/* Radii */
	--nm-radius-sm: 8px;
	--nm-radius-md: 16px;
	--nm-radius-lg: 24px;
	--nm-radius-pill: 999px;

	/* Shadows */
	--nm-shadow-sm: 0 2px 8px rgba(6, 44, 73, 0.08);
	--nm-shadow-md: 0 8px 24px rgba(6, 44, 73, 0.12);
	--nm-shadow-lg: 0 24px 48px rgba(6, 44, 73, 0.18);

	/* Transitions */
	--nm-transition: 0.2s ease-out;
}

/* ===========================================================
   Base reset (minimal, no CSS framework)
   =========================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--nm-font-body);
	font-size: var(--nm-fs-body);
	line-height: var(--nm-lh-body);
	color: var(--nm-text);
	background: var(--nm-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

h1, h2, h3, h4, h5, h6 {
	font-family: var(--nm-font-heading);
	font-weight: 800;
	line-height: var(--nm-lh-heading);
	color: var(--nm-text);
	margin: 0 0 var(--nm-space-md) 0;
}
h1 { font-size: var(--nm-fs-h1); }
h2 { font-size: var(--nm-fs-h2); }
h3 { font-size: var(--nm-fs-h3); }

p, ul, ol { margin: 0 0 var(--nm-space-md) 0; }

a {
	color: var(--nm-link);
	text-decoration: none;
	transition: color var(--nm-transition);
}
a:hover { color: var(--nm-green); }

button, input, textarea, select { font-family: inherit; font-size: inherit; }