:root{
    --bg:        oklch(0.965 0.012 85);
    --bg-2:      oklch(0.945 0.014 82);
    --paper:     oklch(0.99 0.008 90);
    --ink:       oklch(0.20 0.012 60);
    --ink-2:     oklch(0.34 0.012 60);
    --ink-3:     oklch(0.52 0.012 60);
    --ink-4:     oklch(0.74 0.010 70);
    --rule:      oklch(0.86 0.012 75);
    --rule-2:    oklch(0.78 0.012 70);
    --accent:    oklch(0.58 0.14 35);
    --accent-ink:oklch(0.42 0.12 32);
    --green:     oklch(0.48 0.08 145);
    --green-bg:  oklch(0.94 0.04 145);
    --shadow-1:  0 1px 0 oklch(0.86 0.012 75);
    --serif: "Instrument Serif", "Iowan Old Style", "Apple Garamond", Georgia, serif;
    --sans: "Geist", "Söhne", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

    /* ─── Design Layer: easing + spacing tokens ─── */
    --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in:    cubic-bezier(0.55, 0, 1, 0.45);
    --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth:cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast:  120ms;
    --dur-base:  200ms;
    --dur-slow:  340ms;
    --sp-1:8px;--sp-2:16px;--sp-3:24px;--sp-4:32px;--sp-5:40px;--sp-6:48px;
    --shadow-lift: 0 4px 16px -4px oklch(0.20 0.01 60 / 0.14), 0 1px 0 var(--rule);
    --shadow-hover:0 8px 28px -8px oklch(0.20 0.01 60 / 0.20), 0 1px 0 var(--rule);
  }

  *{box-sizing:border-box}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);}
  body{
    font-family:var(--sans);
    font-size:16px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    font-feature-settings:"ss01","cv11";
    letter-spacing:-0.005em;
  }
  ::selection{background:var(--accent);color:var(--paper)}

  /* ---------- Editorial primitives ---------- */
  .wrap{max-width:1280px;margin:0 auto;padding:0 32px}
  .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
  .rule{border:0;border-top:1px solid var(--rule);margin:0}
  .eyebrow{
    font-family:var(--sans);
    font-size:11px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--ink-3);
    font-weight:500;
  }
  .num{font-family:var(--sans);font-variant-numeric:tabular-nums;letter-spacing:-0.02em}
  .serif{font-family:var(--serif);font-weight:400;letter-spacing:-0.015em;line-height:1.02}
  .italic{font-family:var(--serif);font-style:italic;font-weight:400}

  h1,h2,h3,h4{margin:0;font-weight:500;letter-spacing:-0.015em}

  /* ---------- Top bar ---------- */
  .topbar{
    border-bottom:1px solid var(--rule);
    background:var(--bg);
    position:sticky;top:0;z-index:50;
    backdrop-filter:saturate(140%) blur(8px);
  }
  .topbar-inner{
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 32px;max-width:1280px;margin:0 auto;
  }
  .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
  .brand-mark{
    width:30px;height:30px;border-radius:6px;
    background:var(--ink);color:var(--paper);
    display:grid;place-items:center;
    font-family:var(--serif);font-size:20px;line-height:1;
    font-style:italic;
  }
  .brand-word{font-family:var(--serif);font-size:22px;letter-spacing:0.04em}
  .nav{display:flex;gap:28px;align-items:center}
  .nav a{color:var(--ink-2);text-decoration:none;font-size:14px;transition:color var(--dur-fast) var(--ease-smooth);position:relative}
  .nav a::after{content:"";position:absolute;bottom:-2px;left:0;right:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-base) var(--ease-out)}
  .nav a:hover{color:var(--ink)}
  .nav a:hover::after{transform:scaleX(1)}
  .topbar-cta{display:flex;align-items:center;gap:14px}
  .link-quiet{color:var(--ink-2);font-size:14px;text-decoration:none}
  .btn{
    appearance:none;border:1px solid var(--ink);background:var(--ink);color:var(--paper);
    padding:9px 16px;border-radius:999px;font:inherit;font-size:14px;
    text-decoration:none;display:inline-flex;align-items:center;gap:8px;cursor:pointer;
    transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),background var(--dur-fast) var(--ease-smooth);
    will-change:transform;
  }
  .btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px -8px oklch(0.20 0.01 60 / 0.28)}
  .btn:active{transform:translateY(0) scale(0.975);box-shadow:none;transition-duration:var(--dur-fast)}
  .btn-ghost{background:transparent;color:var(--ink)}
  .btn-accent{background:var(--accent);border-color:var(--accent);color:var(--paper)}
  .btn-lg{padding:14px 22px;font-size:15px}

  /* Hero CSS externalisé → /public/css/10-landing-hero.css */