/* ============================================================
   indépendance-energetique.fr — Design Tokens
   Tech-énergie sobre : bleu nuit + vert électrique
   ============================================================ */

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

:root {
  /* ── Brand palette (dark) ──────────────────────── */
  --bg-deep: #050a16;
  --bg: #0a1124;
  --bg-1: #0e1730;
  --bg-2: #131f3d;
  --bg-3: #1a2950;
  --border: #1f2b4a;
  --border-strong: #2c3a64;

  /* ── Accents ──────────────────────── */
  --accent: #00e599;            /* electric mint — primary */
  --accent-glow: #00e59933;
  --accent-deep: #00b878;
  --solar: #ffb840;             /* solar amber — secondary CTA, "économies", aides */
  --solar-glow: #ffb84026;
  --signal: #54b9ff;            /* cyan-blue — data viz, neutral info */
  --danger: #ff5e62;            /* hausse de prix, alertes */
  --warn: #f6a623;

  /* ── Text on dark ──────────────────────── */
  --text: #f3f5fa;
  --text-mid: #b0bacc;
  --text-low: #707d96;
  --text-dim: #4a5570;

  /* ── Light surfaces (used for content pages) ──────────────────────── */
  --paper: #f6f7f9;
  --paper-2: #ffffff;
  --paper-3: #eef0f4;
  --paper-border: #e3e7ef;
  --paper-border-strong: #cdd3df;
  --ink: #0a1124;
  --ink-mid: #4d5a76;
  --ink-low: #8a93a6;

  /* ── Typography ──────────────────────── */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-xs: 0.75rem;       /* 12 */
  --fs-sm: 0.875rem;      /* 14 */
  --fs-base: 1rem;        /* 16 */
  --fs-md: 1.0625rem;     /* 17 */
  --fs-lg: 1.1875rem;     /* 19 */
  --fs-xl: 1.4375rem;     /* 23 */
  --fs-2xl: 1.75rem;      /* 28 */
  --fs-3xl: 2.25rem;      /* 36 */
  --fs-4xl: 3rem;         /* 48 */
  --fs-5xl: 4rem;         /* 64 */
  --fs-6xl: 5.5rem;       /* 88 — display only */

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-base: 1.55;
  --lh-loose: 1.7;

  --tracking-tight: -0.025em;
  --tracking-snug: -0.012em;
  --tracking-wide: 0.06em;
  --tracking-wider: 0.12em;

  /* ── Spacing (4px) ──────────────────────── */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --s-24: 6rem;
  --s-32: 8rem;

  /* ── Radius ──────────────────────── */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 12px;
  --r-4: 16px;
  --r-5: 20px;
  --r-6: 28px;
  --r-pill: 999px;

  /* ── Shadows ──────────────────────── */
  --shadow-glow: 0 0 0 1px rgba(0, 229, 153, 0.18), 0 12px 40px -10px rgba(0, 229, 153, 0.35);
  --shadow-card-dark: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 24px 60px -20px rgba(0, 0, 0, 0.6);
  --shadow-card-light: 0 1px 2px rgba(15, 25, 50, 0.04), 0 10px 30px -12px rgba(15, 25, 50, 0.12);
  --shadow-lift: 0 30px 60px -25px rgba(0, 0, 0, 0.5);

  /* ── Layout ──────────────────────── */
  --content-max: 1240px;
  --content-narrow: 760px;
  --content-wide: 1400px;

  /* ── Transitions ──────────────────────── */
  --t-fast: 120ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-base: 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-slow: 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ============================================================
   Base reset + body
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  color: var(--text);
  background: var(--bg);
  font-feature-settings: "ss01", "cv11", "ss03";
  text-wrap: pretty;
}

body.theme-paper {
  background: var(--paper);
  color: var(--ink);
}

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

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--tracking-snug);
  line-height: var(--lh-snug);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit;
  padding: 0;
}

::selection {
  background: var(--accent);
  color: var(--bg);
}

/* ============================================================
   Utilities
   ============================================================ */
.wrap {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--s-6);
}
.wrap-wide {
  width: 100%;
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: 0 var(--s-6);
}
.wrap-narrow {
  width: 100%;
  max-width: var(--content-narrow);
  margin: 0 auto;
  padding: 0 var(--s-6);
}

.mono { font-family: var(--font-mono); font-feature-settings: "tnum"; }
.display { font-family: var(--font-display); letter-spacing: var(--tracking-snug); }
.tabular { font-variant-numeric: tabular-nums; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--accent);
}

.theme-paper .eyebrow { color: var(--accent-deep); }
.theme-paper .eyebrow::before { background: var(--accent-deep); }

.h-hero {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.4rem + 4.5vw, var(--fs-6xl));
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 0.98;
}
.h-1 { font-size: clamp(2rem, 1.2rem + 3vw, var(--fs-5xl)); letter-spacing: -0.03em; line-height: 1.02; }
.h-2 { font-size: clamp(1.625rem, 1rem + 2vw, var(--fs-4xl)); letter-spacing: -0.02em; line-height: 1.08; }
.h-3 { font-size: clamp(1.375rem, 1rem + 1vw, var(--fs-3xl)); letter-spacing: -0.015em; }
.h-4 { font-size: var(--fs-2xl); }
.h-5 { font-size: var(--fs-xl); }

.lede {
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.3125rem);
  line-height: 1.5;
  color: var(--text-mid);
}
.theme-paper .lede { color: var(--ink-mid); }

.muted { color: var(--text-mid); }
.theme-paper .muted { color: var(--ink-mid); }
.dim { color: var(--text-low); }
.theme-paper .dim { color: var(--ink-low); }

.kbd-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  background: rgba(0, 229, 153, 0.08);
  color: var(--accent);
  border: 1px solid rgba(0, 229, 153, 0.2);
}
.kbd-tag.solar {
  background: rgba(255, 184, 64, 0.08);
  color: var(--solar);
  border-color: rgba(255, 184, 64, 0.25);
}
.kbd-tag.signal {
  background: rgba(84, 185, 255, 0.08);
  color: var(--signal);
  border-color: rgba(84, 185, 255, 0.22);
}
.kbd-tag.neutral {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-mid);
  border-color: var(--border);
}
.theme-paper .kbd-tag.neutral {
  background: var(--paper-2);
  color: var(--ink-mid);
  border-color: var(--paper-border-strong);
}

.divider-soft {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
  border: 0;
  margin: 0;
}
.theme-paper .divider-soft {
  background: linear-gradient(90deg, transparent, var(--paper-border), transparent);
}

/* Background "grid" overlay used in dark sections */
.grid-bg {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: center;
}
.grid-bg-fade {
  position: relative;
}
.grid-bg-fade::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center;
  -webkit-mask-image: radial-gradient(ellipse at top, #000 0%, transparent 70%);
  mask-image: radial-gradient(ellipse at top, #000 0%, transparent 70%);
  pointer-events: none;
}

.glow-aurora {
  position: absolute;
  pointer-events: none;
  width: 80%;
  height: 60%;
  top: -20%;
  left: 10%;
  background: radial-gradient(ellipse at center, rgba(0, 229, 153, 0.18), transparent 60%);
  filter: blur(60px);
  z-index: 0;
}

/* Accent palette tweaks — applied via data attribute on <html> */
:root[data-accent="cyan"] {
  --accent: #54d8ff;
  --accent-deep: #1f9cce;
  --accent-glow: rgba(84, 216, 255, 0.22);
}
:root[data-accent="amber"] {
  --accent: #ffb840;
  --accent-deep: #c98410;
  --accent-glow: rgba(255, 184, 64, 0.22);
}
:root[data-accent="lime"] {
  --accent: #c8f24a;
  --accent-deep: #87a812;
  --accent-glow: rgba(200, 242, 74, 0.25);
}