@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;700&display=swap');

:root {
  --c-yellow: #ffcb08;
  --c-red: #ed1c24;
  --c-purple: #b369aa;

  --n-0: #ffffff;
  --n-50: #fdfdfb;
  --n-100: #f4f4f7;
  --n-300: #d4d4dd;
  --n-500: #696f82;
  --n-700: #4a4a5e;
  --n-900: #1a1a2e;

  --success: #22c55e;
  --warning: #f59e0b;
  --error: #ed1c24;

  --g-0: #ffcb08;   
  --g-1: #d81b22;   
  --g-2: #b369aa;   
  --g-3: #ffe27a;   
  --g-4: #f26b70;   
  --g-5: #7d4976;   

  --ff-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --ff-body: 'Inter', system-ui, -apple-system, sans-serif;

  --fs-display: 72px;
  --fs-h1: 48px;
  --fs-h2: 32px;
  --fs-h3: 22px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-tiny: 12px;

  --lh-tight: 1.0;
  --lh-snug: 1.2;
  --lh-normal: 1.6;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;

  --w-site: 1600px;   
  --w-texte: 900px;   

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 999px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.12);

  --t-fast: 150ms ease;
  --t-base: 200ms ease;
  --t-slow: 300ms ease-out;

  --bp-sm: 640px;
  --bp-md: 1024px;
  --bp-lg: 1280px;

  --page-bg: #ffffff;
  --header-bg: rgba(255, 255, 255, 0.92);
  --on-dark: #ffffff;
  --link: #b369aa;
  --inverse-surface: #1a1a2e;
  --overlay: rgba(26, 26, 46, 0.55);
  --code-bg: #f4f4f7;

  --ok-text: #128a3e;
  --ok-bg: #e6f9ec;
  --warn-text: #8a6c00;
  --warn-bg: #fff6cc;
  --err-text: #b5121a;
  --err-bg: #ffe9e9;
  --info-text: #1e60c9;
  --info-bg: #eaf1ff;
  --purple-text: #5e3159;
  --purple-bg: #f9f2f8;
  --purple-border: #efdfec;
  --chart-tick: #696f82;
  --chart-grid: rgba(26, 26, 46, 0.10);

  --av-sm: 32px;
  --av-md: 48px;
  --av-lg: 96px;
  --av-xl: 160px;
}

html[data-theme="dark"] {
  --page-bg: #101020;
  --header-bg: rgba(20, 20, 38, 0.92);

  --n-0: #1a1a2e;
  --n-50: #21213a;
  --n-100: #2a2a44;
  --n-300: #43435f;
  --n-500: #9d9db5;
  --n-700: #c4c4d6;
  --n-900: #f1f1f7;

  --link: #d79fd0;
  --inverse-surface: #2e2e4a;
  --overlay: rgba(0, 0, 0, 0.7);
  --code-bg: #12121f;

  --ok-text: #5ddb92;
  --ok-bg: rgba(46, 163, 76, 0.18);
  --warn-text: #f0c651;
  --warn-bg: rgba(255, 203, 8, 0.16);
  --err-text: #ff8b90;
  --err-bg: rgba(237, 28, 36, 0.18);
  --info-text: #86b0ff;
  --info-bg: rgba(59, 130, 246, 0.18);
  --purple-text: #dda8d6;
  --purple-bg: rgba(179, 105, 170, 0.14);
  --purple-border: rgba(179, 105, 170, 0.32);
  --chart-tick: #9d9db5;
  --chart-grid: rgba(255, 255, 255, 0.12);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.55);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.6);

  color-scheme: dark;
}


*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--n-900);
  background: var(--page-bg);
  min-height: 100vh;
  opacity: 0;
  animation: pageFadeIn 300ms ease-out forwards;
}

@keyframes pageFadeIn {
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  body {
    opacity: 1;
    animation: none;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

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

a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--t-fast);
}
a:hover { color: var(--n-900); }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}


h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 700;
  color: var(--n-900);
  line-height: var(--lh-snug);
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

.display { font-size: var(--fs-display); line-height: var(--lh-tight); font-weight: 700; font-family: var(--ff-display); }

.text-small { font-size: var(--fs-small); }
.text-tiny { font-size: var(--fs-tiny); }
.text-muted { color: var(--n-700); }
.text-faint { color: var(--n-500); }


.container {
  max-width: var(--w-site);
  margin: 0 auto;
  padding: 0 var(--s-6);
}

.container-narrow {
  max-width: var(--w-texte);
  margin: 0 auto;
  padding: 0 var(--s-6);
}

.section { padding: var(--s-16) 0; }
.section-sm { padding: var(--s-10) 0; }


:focus-visible {
  outline: 2px solid var(--c-purple);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}


@media (max-width: 640px) {
  :root {
    --fs-display: 40px;
    --fs-h1: 32px;
    --fs-h2: 24px;
    --fs-h3: 18px;
  }
  .container, .container-narrow { padding: 0 var(--s-4); }
  .section { padding: var(--s-10) 0; }
}