/* =================================================================ating
   DEUX-POINTS DESIGN SYSTEM — Charte Graphique & Tokens
   ==================================================================== */

:root {
  /* Palette de couleurs */
  --ink: #181A22;
  --majorelle: #2B3A8F;
  --majorelle-deep: #1E285F;
  --sand: #F3ECDE;
  --sand-2: #EAE1CC;
  --rust: #AD4B2A;
  --saffron: #DE9F27;
  --white: #FDFBF6;

  /* Typographies */
  --display: 'Fraunces', serif;
  --body: 'Space Grotesk', sans-serif;
  --mono: 'IBM Plex Mono', monospace;

  /* Layout */
  --max: 1180px;
}

/* Base et réinitialisation */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--sand);
  color: var(--ink);
  font-family: var(--body);
  line-height: 1.5;
  overflow-x: hidden;
}

/* Effets visuels & Apple Glass */
.apple-glass {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(24, 26, 34, 0.08);
}

.apple-glass-dark {
  background: rgba(24, 26, 34, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(253, 251, 246, 0.1);
}

/* Boutons et interactions */
.btn-primary {
  background: var(--rust);
  color: var(--white);
  padding: 15px 30px;
  border-radius: 100px;
  font-weight: 500;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.2s ease, background 0.2s ease;
  border: none;
  cursor: pointer;
}

.btn-primary:hover {
  background: var(--ink);
  transform: translateY(-2px);
}

.btn-secondary {
  border: 1.5px solid var(--ink);
  padding: 15px 30px;
  border-radius: 100px;
  font-weight: 500;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--ink);
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
  cursor: pointer;
}

.btn-secondary:hover {
  background: var(--ink);
  color: var(--white);
  transform: translateY(-2px);
}

/* Utilitaires typographiques */
.font-display { font-family: var(--display); }
.font-body { font-family: var(--body); }
.font-mono { font-family: var(--mono); }