/* ============================================================
   STUDIO 56K — Design Tokens (web)
   Source de vérité : design-system-56k.json  ·  v2.0.0
   Positionnement : Swiss Industrial Print, version rose.
   Carré (radius 0) · plat (aucune ombre) · accent unique rose · 2 polices (Geist + Redaction), texte toujours noir.
   ============================================================ */

/* --- Fonts ---------------------------------------------------
   Geist (incl. poids léger 300 pour le technique) : open source, Google Fonts ci-dessous.
   Redaction : GRATUITE (Oh no Type Co / Fontsource), self-hostée dans assets/fonts/.
   Variante de marque UNIQUE : Redaction 35 (la seule chargée). Poids 700 = titres éditoriaux (net en gros) ; le 400 ghoste en gros.
------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap');

@font-face { font-family: 'Redaction 35'; src: url('assets/fonts/redaction-35-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Redaction 35'; src: url('assets/fonts/redaction-35-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('assets/fonts/jetbrains-mono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('assets/fonts/jetbrains-mono-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }

:root {
  /* — Couleurs : primitives — */
  --c-ink: #121212;
  --c-ink-light: #272728;
  --c-pink: #FFB3FF;
  --c-pink-light: #FFD4FF;
  --c-pink-dark: #E89AEF;
  --c-paper: #FFFFFF;
  --c-bone: #F7F7F7;
  --c-gray: #9C9C9C;
  --c-gray-light: #E0E0E0;

  /* — Textes : PAS DE GRIS. Tout le texte en encre #121212 ; la hiérarchie secondaire
       se fait par TAILLE (plus petit) + POIDS (plus léger), jamais par la couleur. — */
  --c-ink-80: #121212;
  --c-ink-60: #121212;
  --c-ink-40: #121212;
  --c-ink-10: rgba(18, 18, 18, 0.10); /* hairline / fond uniquement, JAMAIS du texte */

  /* — Couleurs : sémantique — */
  --text-primary: var(--c-ink);
  --text-secondary: var(--c-ink-80);
  --text-tertiary: var(--c-ink-60);
  --text-on-ink: var(--c-paper);
  --text-on-pink: var(--c-ink);
  --text-disabled: var(--c-gray);

  --surface-base: var(--c-paper);
  --surface-alt: var(--c-bone);
  --surface-highlight: var(--c-pink);
  --surface-inverse: var(--c-ink);

  --border-default: var(--c-ink);
  --border-hairline: var(--c-ink-10);
  --border-muted: var(--c-gray-light);

  --accent: var(--c-pink);
  --focus: var(--c-pink);

  /* — Status : PRODUIT/APP uniquement (hors vitrine) — */
  --status-success: #00CC66;
  --status-warning: #FFAA00;
  --status-error: #FF4444;
  --status-info: #3399FF;

  /* — Typographie : familles — */
  --font-sans: 'Geist', 'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'Redaction 35', 'Redaction', Georgia, 'Times New Roman', serif; /* titres éditoriaux en poids 700 (net) ; le 400 ghoste en gros */
  /* "technique / télémétrie" = JetBrains Mono : labels, références dispositif, métadonnées blueprint.
     Marqueur de crédibilité industrielle (Swiss print / terminal). Petit + uppercase + tracking.
     Famille 56k : app/lu/erp utilisent TOUS JetBrains Mono pour le texte technique. */
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --font-tech: var(--font-mono);

  /* — Typographie : échelle (fluide) — */
  --fs-display: clamp(2.5rem, 6vw, 4.5rem);
  --fs-h1: clamp(2rem, 4.5vw, 3rem);
  --fs-h2: clamp(2rem, 4vw, 3.75rem);
  --fs-h3: 1.5rem;
  --fs-h4: 1.25rem;
  --fs-body-lg: 1.25rem;
  --fs-body: 1.125rem;
  --fs-body-sm: 0.9375rem;
  --fs-caption: 0.8125rem;
  --fs-label: 0.75rem;
  --fs-label-sm: 0.6875rem;

  --tracking-tight: -0.025em;
  --tracking-tighter: -0.03em;
  --tracking-label: 0.08em;
  --tracking-label-wide: 0.1em;
  --leading-tight: 1.05;
  --leading-snug: 1.2;
  --leading-body: 1.6;

  /* — Espacement (4/8) — */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;
  --sp-20: 80px; --sp-24: 96px; --sp-30: 120px;
  --section-py: clamp(80px, 12vh, 120px);
  --section-px: clamp(20px, 5vw, 48px);
  --container-max: 1280px;
  --prose-max: 65ch;

  /* — Forme — */
  --radius: 0px;             /* RADIUS 0 ABSOLU */
  --border-w: 2px;
  --border-hairline-w: 1px;

  /* — Ombres : PLAT PARTOUT — */
  --shadow-none: none;

  /* — Motion — */
  --dur-fast: 150ms;
  --dur: 200ms;
  --dur-slow: 300ms;
  --dur-entry: 700ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* — z-index — */
  --z-dropdown: 10; --z-sticky: 20; --z-fixed: 30;
  --z-overlay: 40; --z-modal: 50; --z-toast: 60; --z-tooltip: 70; --z-grain: 100;
}

/* ============================================================
   BASE
   ============================================================ */
body {
  background: var(--surface-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

/* TITRES — deux systèmes :
   · Geist (h1-h4 / .t-h*) = titres FONCTIONNELS + UI (net, medium/semibold, tracking serré).
   · Redaction 35 700 (.t-editorial) = titres ÉDITORIAUX, net et plein en gros (hero, citations).
   On ne mélange jamais les deux polices dans un même titre. */
h1, .t-h1 { font-family: var(--font-sans); font-size: var(--fs-h1); line-height: var(--leading-tight); letter-spacing: -0.035em; font-weight: 500; }
h2, .t-h2 { font-family: var(--font-sans); font-size: var(--fs-h2); line-height: 1.02; letter-spacing: -0.04em; font-weight: 500; }
h3, .t-h3 { font-family: var(--font-sans); font-size: var(--fs-h3); line-height: var(--leading-snug); letter-spacing: -0.02em; font-weight: 600; }
h4, .t-h4 { font-family: var(--font-sans); font-size: var(--fs-h4); font-weight: 600; }

.t-display { font-family: var(--font-sans); font-size: var(--fs-display); line-height: 1.0; letter-spacing: -0.04em; font-weight: 500; }
/* Titres ÉDITORIAUX : Redaction 35 en poids 700 — net et plein, y compris en gros (hero, titres de section éditoriaux). */
.t-editorial { font-family: var(--font-serif); font-weight: 700; line-height: var(--leading-tight); letter-spacing: -0.015em; }
/* Accent / citation : Redaction 35 700 (un mot, une citation courte). Le 400 ghoste en gros -> on garde 700. */
.t-accent { font-family: var(--font-serif); font-weight: 700; }
.t-label, .eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--c-ink);
}
.t-mono, .t-data { font-family: var(--font-sans); font-weight: 400; font-variant-numeric: tabular-nums; }

/* Couleurs texte */
.text-secondary { color: var(--text-secondary); }
.text-tertiary  { color: var(--text-tertiary); }

::selection { background: var(--c-pink); color: var(--c-ink); }

/* Focus accessible (rose) */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* ============================================================
   COMPOSANTS DE BASE (radius 0, aucune ombre)
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  border-radius: var(--radius);
  border: var(--border-w) solid var(--border-default);
  padding: 14px 28px;
  font-family: var(--font-sans); font-size: 16px; font-weight: 500;
  box-shadow: var(--shadow-none);
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
  cursor: pointer;
}
.btn:active { transform: scale(0.98); }
.btn--primary { background: var(--c-ink); color: var(--text-on-ink); }
.btn--primary:hover { background: var(--c-ink-light); }
.btn--outline { background: transparent; color: var(--c-ink); }
.btn--outline:hover { background: var(--c-bone); }
.btn--accent  { background: var(--c-pink); color: var(--text-on-pink); }
.btn--accent:hover { background: var(--c-pink-light); }
.btn[disabled] { color: var(--text-disabled); border-color: var(--border-muted); cursor: not-allowed; }

.card {
  background: var(--surface-base);
  border: var(--border-w) solid var(--border-default);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-none);
}
.card--alt { background: var(--surface-alt); }
.card--accent { background: var(--c-pink); padding: 32px; }
.card--hoverable { transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.card--hoverable:hover { background: var(--c-pink); transform: translateY(-2px); }

.tag {
  display: inline-block;
  border: var(--border-w) solid var(--border-default);
  border-radius: var(--radius);
  padding: 6px 12px;
  font-family: var(--font-sans); font-size: 11px; font-weight: 400;
  text-transform: uppercase; letter-spacing: var(--tracking-label);
}
.tag--accent { background: var(--c-pink); }
.tag--dark { background: var(--c-ink); color: var(--c-paper); }

.input {
  background: var(--surface-base);
  border: var(--border-w) solid var(--border-default);
  border-radius: var(--radius);
  color: var(--c-ink);
  padding: 14px 18px; font-size: 16px; font-family: var(--font-sans);
}

.section { padding: var(--section-py) var(--section-px); }
.container { max-width: var(--container-max); margin-inline: auto; }
.prose { max-width: var(--prose-max); }

/* Divisions de grille en hairline (gap:1px + fond contrasté) */
.grid-hairline { display: grid; gap: 1px; background: var(--c-ink); }
.grid-hairline > * { background: var(--surface-base); }

/* ============================================================
   TEXTURES SIGNATURE
   ============================================================ */
/* Grain papier fin — multiply sur clair */
.grain { position: relative; }
.grain::before {
  content: ''; position: absolute; inset: 0;
  opacity: 0.035; mix-blend-mode: multiply; pointer-events: none; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}
/* Grain pour surfaces sombres — overlay */
.grain--dark::before { opacity: 0.06; mix-blend-mode: overlay; }

/* Pixel-art / dithering : rendu net, jamais flou */
.pixelated { image-rendering: pixelated; image-rendering: crisp-edges; }

/* ============================================================
   ACCESSIBILITÉ
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}