/* ───────────────────────────────────────────────────────────────────
   Justin Personnaz — Design System tokens & base
   ─────────────────────────────────────────────────────────────────── */

:root {
  /* Colors — palette ultra-restreinte */
  --bg: #FFFFFF;
  --bg-alt: #F2F1EC;
  --ink: #0E0E0C;
  --ink-80: rgba(14, 14, 12, 0.80);
  --ink-60: rgba(14, 14, 12, 0.60);
  --ink-40: rgba(14, 14, 12, 0.40);
  --ink-12: rgba(14, 14, 12, 0.12);
  --ink-08: rgba(14, 14, 12, 0.08);
  --line:   rgba(14, 14, 12, 0.12);
  --error:  #7A1F1F;

  /* Type — Newsreader / Inter via Google Fonts.
     Note: --font-mono kept by name for compatibility, but now points to Inter Light
     (micro-meta on premium édito sites: wide-tracked uppercase sans-serif, not monospace). */
  --font-serif: 'Newsreader', 'Times New Roman', serif;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:  'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* Spacing — strict 4px scale */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;
  --space-48: 192px;
  --space-64: 256px;

  /* Grid — 12 columns, 1680 max */
  --container-max: 1680px;
  --gutter: 24px;
  --page-pad: 48px;
}

@media (max-width: 1024px) {
  :root { --page-pad: 32px; }
}
@media (max-width: 640px) {
  :root { --page-pad: 20px; }
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body {
  min-height: 100vh;
  line-height: 1.5;
  font-feature-settings: "ss01", "cv11";
}
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font: inherit; color: inherit; }

/* Typographic scale — display none of weight > 400 */
.display, .h1, .h2 { font-family: var(--font-serif); font-weight: 400; }
.display { font-size: 4.768rem; line-height: 1.05; letter-spacing: var(--serif-tracking, -0.02em); }
.h1      { font-size: 3.815rem; line-height: 1.10; letter-spacing: var(--serif-tracking, -0.015em); }
.h2      { font-size: 2.441rem; line-height: 1.15; letter-spacing: var(--serif-tracking, -0.01em); }
.h3      { font-size: 1.563rem; line-height: 1.25; letter-spacing: -0.005em; font-weight: 400; }
.h4      { font-size: 1.25rem;  line-height: 1.30; font-weight: 400; }
.body-l  { font-size: 1.125rem; line-height: 1.55; font-weight: 300; }
.body    { font-size: 1rem;     line-height: 1.50; font-weight: 300; }
.caption { font-size: 0.875rem; line-height: 1.40; font-weight: 400; }
.micro {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.30;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 300;
}

@media (max-width: 768px) {
  .display { font-size: 2.75rem; }
  .h1      { font-size: 2.25rem; }
  .h2      { font-size: 1.75rem; }
  .h3      { font-size: 1.25rem; }
}

/* Layout helpers */
.page {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
}

/* Cursor — custom (sober dot + crosshair on link hover) */
html.cursor-custom, html.cursor-custom * { cursor: none !important; }
.cursor-dot {
  position: fixed; top: 0; left: 0;
  width: 6px; height: 6px;
  background: var(--ink);
  border-radius: 50%;
  pointer-events: none;
  z-index: 2147483645;
  transform: translate(-50%, -50%);
  transition: width 200ms ease, height 200ms ease, background 200ms ease, opacity 200ms ease;
  mix-blend-mode: difference;
  filter: invert(1);
}
.cursor-dot.hover {
  width: 32px; height: 32px;
  background: transparent;
  border: 1px solid var(--ink);
  filter: none;
  mix-blend-mode: normal;
}

/* Page transition — fondu blanc cassé */
.page-veil {
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 2147483640;
  pointer-events: none;
  opacity: 0;
  transition: opacity 280ms ease-out;
}
.page-veil.in { opacity: 1; }

/* Header */
.site-header {
  position: sticky; top: 0;
  background: var(--bg);
  z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-6) var(--page-pad);
  max-width: var(--container-max);
  margin: 0 auto;
  /* No border — silence */
}
.site-header .brand {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.9375rem;
  letter-spacing: 0;
}
.site-header .brand .role {
  color: var(--ink-60);
  margin-left: var(--space-3);
}
.site-nav {
  display: flex;
  gap: var(--space-8);
  align-items: center;
}
.site-nav a, .site-nav button {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--ink);
  opacity: 0.4;
  transition: opacity 250ms ease;
  letter-spacing: 0;
}
.site-nav a:hover, .site-nav button:hover { opacity: 1; }
.site-nav a.active { opacity: 1; }
.site-nav .lang {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: inline-flex;
  gap: var(--space-1);
  opacity: 1;
}
.site-nav .lang button { opacity: 0.4; }
.site-nav .lang button.active { opacity: 1; }
.site-nav .lang .sep { opacity: 0.3; }

/* Footer */
.site-footer {
  margin-top: var(--space-48);
  padding: var(--space-8) var(--page-pad) var(--space-6);
  max-width: var(--container-max);
  margin-left: auto; margin-right: auto;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-6); flex-wrap: wrap;
}
.site-footer, .site-footer a {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 300;
  color: var(--ink-60);
}
.site-footer .group { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.site-footer a:hover { color: var(--ink); }
.site-footer .micro { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; }

/* Button — primary */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-sans); font-size: 14px; font-weight: 400;
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: 12px 24px;
  border: 1px solid var(--ink);
  background: transparent; color: var(--ink);
  border-radius: 0;
  transition: background 300ms ease-out, color 300ms ease-out;
}
.btn:hover { background: var(--ink); color: var(--bg); }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Text link with underline */
.link-u {
  display: inline;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--ink-40);
  transition: text-decoration-color 250ms ease;
}
.link-u:hover { text-decoration-color: var(--ink); }

/* Section rule */
.rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--space-24) 0;
}

/* Image utilities */
.img-frame { overflow: hidden; background: var(--bg-alt); position: relative; }
.img-frame img { width: 100%; height: 100%; object-fit: cover; transition: opacity 400ms ease; }

/* Placeholder image — warm gray with mono label */
.img-ph {
  background: var(--bg-alt);
  width: 100%; height: 100%;
  display: flex; align-items: flex-end;
  padding: var(--space-4);
}
.img-ph .meta {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-40);
}

/* No selection on draggables / cursors */
.no-sel { user-select: none; }

/* Accessibility */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}