/* ===========================================================
   MineKonnect — Design Tokens
   Palette dérivée du logo (or dégradé + anthracite) + fond
   "minerai sombre" façon coffre-fort / salle des scellés.
   =========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,500;9..144,600;9..144,700&family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* --- Fond / surfaces (anthracite du logo) --- */
  --void:        #0B0C10;
  --surface:     #14151D;
  --surface-2:   #1B1D28;
  --surface-3:   #22242F;
  --border:      rgba(230,196,104,0.14);
  --border-soft: rgba(244,241,232,0.08);

  /* --- Or (dégradé du logo) --- */
  --gold-100: #F6E8BE;
  --gold-300: #EED28E;
  --gold-400: #E7C468;
  --gold-500: #D6AC44;
  --gold-600: #C9A227;
  --gold-700: #A9821E;
  --gold-900: #6E5314;
  --gold-grad: linear-gradient(120deg, #8A6A1E 0%, #E7C468 45%, #F6E8BE 62%, #C9A227 100%);

  /* --- Texte --- */
  --ink:      #F4F1E8;
  --ink-dim:  #ACA793;
  --ink-mute: #706C5E;

  /* --- États --- */
  --success: #3FB87F;
  --danger:  #E1555C;
  --info:    #4AA8D8;

  /* --- Typo --- */
  --font-display: 'Fraunces', ui-serif, Georgia, serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;

  /* --- Rayon / ombres --- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;
  --shadow-card: 0 10px 30px rgba(0,0,0,0.35);
  --shadow-pop: 0 24px 60px rgba(0,0,0,0.55);

  --header-h: 76px;
  --sidebar-w: 264px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--void);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; line-height:1.15; margin:0; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:2px solid var(--gold-400); outline-offset:2px; }
::selection{ background:var(--gold-600); color:#0B0C10; }

.container{ width:100%; max-width:1220px; margin:0 auto; padding:0 24px; }
.eyebrow{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-400); display:flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:''; width:22px; height:1px; background:var(--gold-500); }

.mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}