/* =====================================================================
 * VEILLE / shared design tokens
 * Imported by every page. Single source of truth for brand identity.
 * ===================================================================== */

:root {
  /* Surfaces */
  --bg:            #FAFAF9;
  --bg-2:          #F4F4F2;
  --bg-deep:       #EFEFEC;
  --surface:       #FFFFFF;
  --surface-2:     #FAFAF9;
  --dark:          #0A0A0A;
  --dark-2:        #141414;

  /* Text */
  --ink:           #0A0A0A;
  --ink-2:         #262626;
  --ink-3:         #404040;
  --muted:         #525252;
  --mute-2:        #737373;
  --mute-3:        #A3A3A3;
  --mute-4:        #D4D4D4;
  --on-dark:       #FAFAF9;
  --on-dark-mute:  #A3A3A3;

  /* Lines */
  --line:          #E5E5E5;
  --line-2:        #D4D4D4;
  --line-soft:     #EFEFEC;
  --line-dark:     #262626;

  /* Brand accent (single forest green) */
  --accent:        #0E3D2E;
  --accent-2:      #155E47;
  --accent-3:      #E4EEEA;
  --accent-soft:   #F1F6F3;
  --accent-on-dark: #2E7D5B; /* on-dark tint of #0E3D2E, single sanctioned accent for dark surfaces (replaces banned #5BA88C) */

  /* Semantic */
  --high:          #B91C1C;
  --high-tint:     #FEE2E2;
  --high-soft:     #FEF2F2;
  --med:           #B45309;
  --med-tint:      #FEF3C7;
  --med-soft:      #FFFBEB;
  --low:           #15803D;
  --low-tint:      #DCFCE7;
  --low-soft:      #F0FDF4;
  --info:          #1E40AF;
  --info-tint:     #DBEAFE;
  --info-soft:     #EFF6FF;

  /* Radius */
  --radius:        6px;
  --radius-lg:     8px;
  --radius-xl:     12px;

  /* Shadow */
  --shadow-xs:     0 1px 0 rgba(10,10,10,.04);
  --shadow-sm:     0 1px 0 rgba(10,10,10,.04), 0 1px 2px rgba(10,10,10,.05);
  --shadow-md:     0 1px 0 rgba(10,10,10,.04), 0 8px 20px -8px rgba(10,10,10,.08);
  --shadow-lg:     0 1px 0 rgba(10,10,10,.04), 0 30px 60px -24px rgba(10,10,10,.15);
}

/* =====================================================================
 * BASE typography & reset
 * ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  font-feature-settings: "ss01", "ss02", "cv11";
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}
.mono {
  font-family: "Geist", sans-serif;
  font-feature-settings: "tnum", "zero", "ss01";
}
::selection { background: var(--accent); color: var(--bg); }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* =====================================================================
 * BRAND mark / V Convergence, logo officiel Veille AI (acté mai 2026)
 * Deux triangles pleins convergeant vers un vertex unique.
 * viewBox="0 0 48 78", polygon fill="currentColor"
 * Utilisé dans toutes les pages. Ne pas modifier.
 * ===================================================================== */
.brand-v {
  height: 1.2em;
  width: auto;
  color: var(--accent);
  margin-right: -1px;
  transform: translateY(0.15em);
  transition: color .25s ease;
}
a:hover .brand-v { color: var(--ink); }

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

/* =====================================================================
 * LAYOUT & TEXT PLACEMENT, Apple-style rules
 *
 * Six rules, non-negotiables. These govern HOW elements are positioned,
 * not just what they look like. Apply them in every surface: marketing,
 * dashboard, documents, onboarding.
 *
 * Rule 1, HERO: centered, one idea, nothing competing.
 * Rule 2, SCALE JUMP: H1 ≥ 52px, body ≤ 19px. Never compress the gap.
 * Rule 3, ONE IDEA PER SECTION. Eyebrow labels it. H2 states it. Body
 *           supports it. More to say = new section.
 * Rule 4, BODY MAX 52ch. Reading width. Not a preference.
 * Rule 5, VERTICAL RHYTHM IS FIXED. See gaps below. Do not improvise.
 * Rule 6, WEIGHT IS BINARY. Headlines: 600. Body: 300–400. Never 500
 *           or 700 in prose. Weight 500 = Mono labels only.
 * ===================================================================== */

/* ── HERO BLOCK (Rule 1 + Rule 2 + Rule 5) ─────────────────────────── */
/* Use for: landing hero, section openers, feature reveals             */
/* Structure: .hero-block > .hero-eyebrow + .hero-h1 + .hero-kicker    */
.hero-block {
  text-align: center;
  max-width: 860px;
  margin-inline: auto;
}

.hero-eyebrow {
  font-family: "Geist", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 40px;      /* Rule 5: fixed 40px, never adjust */
}

.hero-h1 {
  font-family: "Geist", -apple-system, sans-serif;
  font-size: clamp(52px, 7vw, 80px);
  font-weight: 600;          /* Rule 6: always 600 */
  letter-spacing: -0.036em;
  line-height: 1.02;
  color: var(--ink);
  max-width: 16ch;           /* Rule 3: one idea = short headline */
  margin: 0 auto 24px;      /* Rule 5: fixed 24px below H1 */
}

.hero-kicker {
  font-size: clamp(17px, 1.8vw, 21px);
  font-weight: 300;          /* Rule 6: body = 300 */
  line-height: 1.55;
  color: var(--muted);
  max-width: 34ch;           /* Rule 4: reading width constraint */
  margin: 0 auto 48px;      /* Rule 5: fixed 48px before CTA */
}

/* Dark variant (hero on --dark background) */
.hero-block.dark .hero-h1     { color: var(--on-dark); }
.hero-block.dark .hero-kicker { color: var(--on-dark-mute); }

/* ── FEATURE BLOCK (Rule 3 + Rule 4 + Rule 5) ──────────────────────── */
/* Use for: feature sections, step explanations, product details        */
/* Structure: .feature-block > .feature-eyebrow + .feature-h2 +        */
/*            .feature-body [+ optional CTA]                            */
.feature-block {
  text-align: left;          /* Rule 1 inverse: features are left-aligned */
}

.feature-eyebrow {
  font-family: "Geist", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 14px;      /* Rule 5: fixed 14px */
}

.feature-h2 {
  font-family: "Geist", -apple-system, sans-serif;
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 600;          /* Rule 6: always 600 */
  letter-spacing: -0.028em;
  line-height: 1.06;
  color: var(--ink);
  max-width: 22ch;           /* Rule 3: one idea */
  margin: 0 0 16px;         /* Rule 5: fixed 16px below H2 */
}

.feature-body {
  font-size: clamp(16px, 1.4vw, 18px);
  font-weight: 400;          /* Rule 6: body = 400 */
  line-height: 1.65;
  color: var(--muted);
  max-width: 52ch;           /* Rule 4: hard limit */
  margin: 0 0 40px;         /* Rule 5: fixed 40px before next element */
}

/* Dark variant */
.feature-block.dark .feature-h2   { color: var(--on-dark); }
.feature-block.dark .feature-body { color: var(--on-dark-mute); }

/* ── SECTION RHYTHM (Rule 5) ────────────────────────────────────────── */
/* These are the only permitted section padding values.                 */
/* Do not invent intermediate values.                                   */
.section-xs  { padding: 40px 0; }           /* tight: inline sub-sections */
.section-sm  { padding: 64px 0; }           /* compact: feature grids */
.section-md  { padding: 100px 0; }          /* standard: most sections */
.section-lg  { padding: clamp(100px, 10vw, 160px) 0; }  /* breathing: hero, CTA */
.section-xl  { padding: clamp(140px, 14vw, 220px) 0; }  /* statement: cover only */

/* ── CONTENT WIDTH CONSTRAINTS (Rule 4) ─────────────────────────────── */
/* Apply to text containers, not grid wrappers.                         */
.text-narrow  { max-width: 480px; }    /* short copy, captions */
.text-body    { max-width: 600px; }    /* body text, 52ch equivalent */
.text-wide    { max-width: 720px; }    /* long-form: docs, legal */

/* ── SCALE JUMP ENFORCEMENT (Rule 2) ─────────────────────────────────── */
/* Never place display text smaller than these minimums.                */
/* Never use font-size between 22px and 36px for headers.               */
/* The gap between body (≤19px) and H2 (≥36px) is intentional.         */
.display-sm  { font-size: clamp(36px, 4vw, 52px);   font-weight: 600; letter-spacing: -0.028em; line-height: 1.06; }
.display-md  { font-size: clamp(44px, 5.5vw, 64px); font-weight: 600; letter-spacing: -0.032em; line-height: 1.04; }
.display-lg  { font-size: clamp(52px, 7vw, 80px);   font-weight: 600; letter-spacing: -0.036em; line-height: 1.02; }
.display-xl  { font-size: clamp(64px, 9vw, 100px);  font-weight: 600; letter-spacing: -0.040em; line-height: 1.00; }

/* ── READING BODY (Rule 6) ───────────────────────────────────────────── */
.body-lg  { font-size: 18px; font-weight: 300; line-height: 1.65; color: var(--muted); }
.body-md  { font-size: 16px; font-weight: 400; line-height: 1.6;  color: var(--muted); }
.body-sm  { font-size: 14px; font-weight: 400; line-height: 1.55; color: var(--muted); }

/* On dark backgrounds */
.dark .body-lg,
.dark .body-md,
.dark .body-sm { color: var(--on-dark-mute); }