/* ============================================================
   ITEZIA DESIGN SYSTEM — Space Tech Theme
   ============================================================ */

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

/* ---- Design Tokens ---- */
:root {
  /* ── Backgrounds — Pure noir ── */
  --void:       #020202;   /* Absolute black      */
  --deep:       #060606;   /* Noir profond        */
  --surface:    #0C0C0C;   /* Surface primaire    */
  --card:       #111111;   /* Carte               */
  --glass:      rgba(8,8,8,0.72);
  --glass-hi:   rgba(14,14,14,0.88);

  /* ── Borders — Neutral dark ── */
  --b-dim:  #181818;
  --b-1:    #222222;
  --b-2:    #333333;
  --b-3:    #444444;

  /* ── Brand — Or burnished (Itezia Gold) ── */
  --brand:       #C0963C;
  --brand-l:     #D4AF5A;
  --brand-dim:   rgba(192,150,60,0.08);
  --brand-glow:  rgba(192,150,60,0.16);
  --brand-glow2: rgba(192,150,60,0.04);

  /* ── Secondary gold / bronze ── */
  --blue:      #8C6D28;
  --blue-l:    #C0963C;
  --blue-dim:  rgba(140,109,40,0.10);
  --blue-glow: rgba(140,109,40,0.18);

  /* ── Teal — Status active ── */
  --teal:      #14B8A6;
  --teal-l:    #2DD4BF;
  --teal-dim:  rgba(20,184,166,0.1);

  /* ── Amber — Alerte / accent chaud ── */
  --amber:     #D97706;
  --amber-l:   #F59E0B;
  --amber-dim: rgba(217,119,6,0.10);

  /* ── Green — System active ── */
  --green:     #22C55E;
  --green-l:   #4ADE80;

  /* ── Error ── */
  --red:       #EF4444;

  /* ── Text — Warm white ── */
  --t1: #F2EFE8;
  --t2: #A8A49C;
  --t3: #575450;
  --t4: #2E2C28;

  /* ── Typography ── */
  --font:      'Space Grotesk', -apple-system, sans-serif;
  --mono:      'JetBrains Mono', 'Fira Code', monospace;

  --fs-xs:   0.72rem;   /*  11.5px */
  --fs-sm:   0.875rem;  /*  14px   */
  --fs-base: 1rem;      /*  16px   */
  --fs-lg:   1.125rem;  /*  18px   */
  --fs-xl:   1.25rem;   /*  20px   */
  --fs-2xl:  1.5rem;    /*  24px   */
  --fs-3xl:  1.875rem;  /*  30px   */
  --fs-4xl:  2.25rem;   /*  36px   */
  --fs-5xl:  3rem;      /*  48px   */
  --fs-6xl:  3.75rem;   /*  60px   */
  --fs-7xl:  4.5rem;    /*  72px   */
  --fs-disp: clamp(5rem, 12vw, 10rem);  /* Display */

  /* ── Spacing (8px base grid) ── */
  --s1:  0.25rem;   /*  4px */
  --s2:  0.5rem;    /*  8px */
  --s3:  0.75rem;   /* 12px */
  --s4:  1rem;      /* 16px */
  --s5:  1.25rem;   /* 20px */
  --s6:  1.5rem;    /* 24px */
  --s7:  1.75rem;   /* 28px */
  --s8:  2rem;      /* 32px */
  --s10: 2.5rem;    /* 40px */
  --s12: 3rem;      /* 48px */
  --s14: 3.5rem;    /* 56px */
  --s16: 4rem;      /* 64px */
  --s16: 4rem;      /* 64px */
  --s20: 5rem;      /* 80px */
  --s24: 6rem;      /* 96px */
  --s28: 7rem;      /* 112px */
  --s32: 8rem;      /* 128px */

  /* ── Radius ── */
  --r1: 6px;
  --r2: 10px;
  --r3: 16px;
  --r4: 24px;
  --r5: 32px;
  --rfull: 9999px;

  /* ── Shadows ── */
  --sh-sm: 0 2px 8px rgba(0,0,0,.7);
  --sh-md: 0 6px 24px rgba(0,0,0,.75);
  --sh-lg: 0 16px 48px rgba(0,0,0,.8);
  --sh-xl: 0 32px 80px rgba(0,0,0,.85);
  --sh-brand: 0 8px 32px var(--brand-glow), 0 0 80px var(--brand-glow2);
  --sh-blue:  0 8px 32px var(--blue-glow);

  /* ── Glow effects ── */
  --glow-brand: 0 0 20px var(--brand-glow), 0 0 60px var(--brand-glow2);
  --glow-blue:  0 0 20px var(--blue-glow);
  --glow-teal:  0 0 20px rgba(20,184,166,.15);

  /* ── Transitions ── */
  --ease: cubic-bezier(.16,1,.3,1);
  --t1s: 120ms cubic-bezier(.4,0,.2,1);
  --t2s: 220ms cubic-bezier(.4,0,.2,1);
  --t3s: 400ms cubic-bezier(.16,1,.3,1);
  --t-spring: 500ms cubic-bezier(.34,1.56,.64,1);

  /* ── Layout ── */
  --nav-h:  64px;
  --max-w:  1200px;
  --max-ww: 1400px;

  /* ── Z-index ── */
  --z-bg:     -1;
  --z-base:    0;
  --z-card:   10;
  --z-dots:   90;
  --z-nav:   100;
  --z-modal: 200;
  --z-toast: 300;
}

/* ──────────────────────────── Reset ──────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; color-scheme: dark; }
body {
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--t1);
  background: var(--void);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, video, svg { max-width: 100%; display: block; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
h1,h2,h3,h4,h5,h6 { font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }

/* ──────────────────────────── Scrollbar ──────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--b-2); border-radius: var(--rfull); }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb:hover { background: var(--brand); }

/* ──────────────────────────── Focus / Selection ─────────────── */
:focus-visible { outline: 2px solid var(--brand-l); outline-offset: 2px; }
::selection { background: var(--brand-dim); color: var(--brand-l); }

/* ──────────────────────────── Layout ────────────────────────── */
.container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 clamp(var(--s6), 4vw, var(--s12)); }

/* ──────────────────────────── Typography ────────────────────── */
.display  { font-size: var(--fs-disp); font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.eyebrow  { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--t3); display: flex; align-items: center; gap: var(--s2); }
.eyebrow::before { content: ''; width: 20px; height: 1px; background: var(--b-2); }

/* Gradient text — or/blanc */
.g-text {
  background: linear-gradient(135deg, #F2EFE8 0%, var(--brand-l) 55%, var(--brand) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.g-text-brand {
  background: linear-gradient(135deg, var(--brand-l) 0%, var(--brand) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ──────────────────────────── Buttons ───────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: 11px 24px; border-radius: var(--r2);
  font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
  transition: all var(--t2s); white-space: nowrap; position: relative;
  letter-spacing: .01em;
}
.btn-primary {
  background: var(--brand); color: #000;
  box-shadow: var(--sh-brand); border: 1px solid var(--brand);
  letter-spacing: .04em;
}
.btn-primary:hover { background: var(--brand-l); transform: translateY(-1px); box-shadow: 0 0 24px var(--brand-glow); }
.btn-primary:active { transform: none; }

.btn-outline-glow {
  background: transparent; color: var(--t2);
  border: 1px solid var(--b-2);
}
.btn-outline-glow:hover { border-color: var(--brand); color: var(--brand-l); box-shadow: 0 0 16px var(--brand-glow); }

.btn-glass {
  background: var(--glass); color: var(--t2);
  border: 1px solid var(--b-1);
  backdrop-filter: blur(16px);
}
.btn-glass:hover { background: var(--glass-hi); border-color: var(--b-2); color: var(--t1); }

.btn-launch {
  background: var(--brand);
  color: #000; border: none; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 0 24px var(--brand-glow);
}
.btn-launch:hover { transform: translateY(-1px); background: var(--brand-l); box-shadow: 0 0 40px var(--brand-glow); }

.btn-lg  { padding: 16px 36px; font-size: var(--fs-base); border-radius: var(--r3); }
.btn-sm  { padding: 7px 16px; font-size: var(--fs-xs); border-radius: var(--r1); }
.btn-xl  { padding: 20px 48px; font-size: var(--fs-lg); border-radius: var(--r3); letter-spacing: .02em; }

/* ──────────────────────────── Cards ─────────────────────────── */
.card {
  background: var(--card); border: 1px solid var(--b-1);
  border-radius: var(--r3); padding: var(--s8);
  transition: all var(--t3s);
}
.card:hover { border-color: var(--b-2); box-shadow: var(--sh-lg); transform: translateY(-4px); }

.glass-card {
  background: var(--glass); border: 1px solid rgba(255,255,255,.05);
  border-radius: var(--r3); padding: var(--s8);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), var(--sh-md);
}

/* Gradient border card */
.grad-card {
  background: var(--card); border-radius: var(--r3);
  padding: var(--s8); position: relative; transition: all var(--t3s);
}
.grad-card::before {
  content: ''; position: absolute; inset: -1px; border-radius: calc(var(--r3) + 1px);
  background: linear-gradient(135deg, var(--b-2), transparent 60%);
  z-index: -1; transition: all var(--t3s);
}
.grad-card:hover::before { background: linear-gradient(135deg, var(--brand), transparent 60%); }
.grad-card:hover { transform: translateY(-3px); }

/* ──────────────────────────── Badges ────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: var(--rfull); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.badge-active { background: rgba(34,197,94,.08);  color: #4ADE80; border: 1px solid rgba(34,197,94,.2); letter-spacing: .06em; }
.badge-beta   { background: rgba(192,150,60,.10); color: var(--brand-l); border: 1px solid rgba(192,150,60,.25); letter-spacing: .06em; }
.badge-soon   { background: rgba(40,40,40,.6);    color: var(--t3); border: 1px solid var(--b-1); letter-spacing: .06em; }
.badge-new    { background: var(--brand-dim);     color: var(--brand-l); border: 1px solid rgba(192,150,60,.3); letter-spacing: .06em; }

/* ──────────────────────────── Tags ──────────────────────────── */
.tag { display: inline-flex; padding: 2px 10px; background: transparent; border: 1px solid var(--b-1); border-radius: 3px; font-size: var(--fs-xs); color: var(--t3); font-family: var(--mono); letter-spacing: .04em; }

/* ──────────────────────────── Input ─────────────────────────── */
.input {
  width: 100%; background: var(--surface); border: 1px solid var(--b-1);
  border-radius: var(--r2); padding: 11px 14px; font-family: var(--font);
  font-size: var(--fs-sm); color: var(--t1); outline: none; transition: all var(--t1s);
}
.input:focus { border-color: var(--brand-l); box-shadow: 0 0 0 3px var(--brand-dim); }
.input::placeholder { color: var(--t4); }

/* ──────────────────────────── KBD ───────────────────────────── */
.kbd { display: inline-flex; align-items: center; justify-content: center; padding: 1px 6px; background: var(--surface); border: 1px solid var(--b-1); border-radius: 4px; font-size: 10px; font-family: var(--mono); color: var(--t3); }

/* ──────────────────────────── Dot ───────────────────────────── */
.dot { width: 7px; height: 7px; border-radius: var(--rfull); display: inline-block; flex-shrink: 0; }
.dot-on { background: var(--green); animation: dot-pulse 2s infinite; }
@keyframes dot-pulse { 0%,100%{box-shadow:0 0 0 2px rgba(34,197,94,.25)} 50%{box-shadow:0 0 0 5px rgba(34,197,94,.07)} }

/* ──────────────────────────── Divider ───────────────────────── */
.line { height: 1px; background: linear-gradient(90deg, transparent, rgba(192,150,60,.18) 30%, rgba(192,150,60,.18) 70%, transparent); }
.line-h { height: 1px; background: var(--b-1); }

/* ──────────────────────────── Animations ────────────────────── */
.reveal        { opacity: 0; transform: translateY(32px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-left   { opacity: 0; transform: translateX(-32px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-right  { opacity: 0; transform: translateX(32px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-scale  { opacity: 0; transform: scale(.9); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.on, .reveal-left.on, .reveal-right.on, .reveal-scale.on { opacity: 1; transform: none; }

.stagger > * { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.stagger.on > *:nth-child(1) { opacity:1;transform:none;transition-delay:  0ms }
.stagger.on > *:nth-child(2) { opacity:1;transform:none;transition-delay: 80ms }
.stagger.on > *:nth-child(3) { opacity:1;transform:none;transition-delay:160ms }
.stagger.on > *:nth-child(4) { opacity:1;transform:none;transition-delay:240ms }
.stagger.on > *:nth-child(5) { opacity:1;transform:none;transition-delay:320ms }
.stagger.on > *:nth-child(6) { opacity:1;transform:none;transition-delay:400ms }

@keyframes fadeUp    { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:none} }
@keyframes fadeDown  { from{opacity:0;transform:translateY(-16px)} to{opacity:1;transform:none} }
@keyframes fadeIn    { from{opacity:0} to{opacity:1} }
@keyframes scaleIn   { from{opacity:0;transform:scale(.92)} to{opacity:1;transform:none} }
@keyframes glow-pulse { 0%,100%{opacity:.7} 50%{opacity:1} }

/* ──────────────────────────── Icon ────────────────────── */
.eco-icon {
  width: 64px;
  height: 64px;
}

.eco-icon img {
  width: 38px;
  height: 38px;
}

/* Page enter */
.page-enter { animation: fadeUp .35s var(--ease) both; }

/* ══════════════════════════════════════════════
   LIGHT THEME — Charcoal / Or
   ══════════════════════════════════════════════ */
body.light {
  color-scheme: light;

  /* Backgrounds */
  --void:     #F4F2EE;
  --deep:     #ECEAE4;
  --surface:  #E2E0D8;
  --card:     #FFFFFF;
  --glass:    rgba(255,255,255,0.82);
  --glass-hi: rgba(255,255,255,0.96);

  /* Borders */
  --b-dim: #DEDBD2;
  --b-1:   #C8C4B8;
  --b-2:   #A09A8C;
  --b-3:   #706A5E;

  /* Text */
  --t1: #0D0C0A;
  --t2: #3A3830;
  --t3: #6A665C;
  --t4: #A09C90;

  /* Shadows — lighter */
  --sh-sm: 0 2px 8px rgba(0,0,0,.06);
  --sh-md: 0 6px 24px rgba(0,0,0,.08);
  --sh-lg: 0 16px 48px rgba(0,0,0,.10);
  --sh-xl: 0 32px 80px rgba(0,0,0,.12);
}