/* ─────────────── DESIGN TOKENS — Anthropic Academy Style ─────────────── */
:root {
  --bg:        #FAF9F5;
  --surface:   #F0EEE6;
  --surface2:  #E8E6DD;
  --surface3:  #DDDBD2;
  --border:    rgba(0,0,0,.08);
  --border2:   rgba(0,0,0,.12);
  --dark:      #141413;
  --dark-l:    #2C2B25;
  --dark-d:    rgba(20,20,19,.05);
  --dark-t:    rgba(20,20,19,.08);
  --accent:    #2C2B25;
  --green:     #3D7A5F;
  --green-d:   rgba(61,122,95,.08);
  --red:       #B44040;
  --red-d:     rgba(180,64,64,.08);
  --blue:      #5B7FA4;
  --blue-d:    rgba(91,127,164,.08);
  --gold:      #8B7340;
  --gold-d:    rgba(139,115,64,.08);
  --text:      #0E0E0D;
  --muted:     #3E3D34;
  --dim:       #7C7A6E;
  --sidebar-w: 320px;
  --hdr-h:     56px;
  --radius:    8px;
  --serif:     'Fraunces', 'Georgia', 'Times New Roman', serif;
  --sans:      'Sora', 'Helvetica Neue', system-ui, sans-serif;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 2px 8px rgba(0,0,0,.06);
  --shadow-lg: 0 4px 16px rgba(0,0,0,.08);
}

/* ─────────────── RESET ─────────────── */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.7;overflow-x:hidden}

/* ─────────────── HEADER ─────────────── */
.hdr{position:fixed;top:0;left:0;right:0;height:var(--hdr-h);z-index:200;
  background:var(--bg);border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;padding:0 32px}
.hdr-logo{display:flex;align-items:center;gap:14px;height:100%;cursor:pointer;flex-shrink:0}
.logo-gem{display:none}
.logo-name{font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--text)}
.logo-sub{font-size:13px;color:var(--muted);letter-spacing:0;text-transform:none;font-weight:400}
.hdr-right{display:flex;align-items:center;gap:14px}

/* ─────────────── BUTTONS ─────────────── */
.btn-primary{display:inline-flex;align-items:center;gap:8px;background:var(--dark);color:#fff;padding:10px 24px;border-radius:var(--radius);font-weight:500;font-size:14px;cursor:pointer;border:none;transition:all .15s;letter-spacing:.1px;font-family:var(--sans);text-decoration:none}
.btn-primary:hover{background:var(--dark-l);box-shadow:var(--shadow-md);text-decoration:none}
.btn-secondary{display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--text);padding:10px 24px;border-radius:var(--radius);font-weight:500;font-size:14px;cursor:pointer;border:1px solid var(--border2);transition:all .15s;font-family:var(--sans);text-decoration:none}
.btn-secondary:hover{border-color:var(--text);background:var(--dark-d);text-decoration:none}
.btn-gold{background:var(--dark);color:#fff;border:none;padding:10px 20px;border-radius:var(--radius);font-weight:600;font-size:14px;cursor:pointer;transition:all .15s;font-family:var(--sans);text-decoration:none}
.btn-gold:hover{background:var(--dark-l);text-decoration:none}
.btn-ghost{background:transparent;color:var(--muted);border:1px solid var(--border);padding:10px 20px;border-radius:var(--radius);font-weight:500;font-size:14px;cursor:pointer;transition:all .15s;display:none;font-family:var(--sans)}
.btn-ghost:hover{border-color:var(--muted);color:var(--text)}

/* ─────────────── ACCESSIBILITÉ — focus clavier ─────────────── */
/* Visible uniquement quand l'utilisateur navigue au clavier, jamais au clic. */
:focus{outline:none}
:focus-visible{outline:2px solid var(--text);outline-offset:2px;border-radius:4px}

/* ─────────────── UTILITIES ─────────────── */
@keyframes pgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}