/* ══════════════════════════════════════════════════════════════
   cover-letter-apple.css  —  Apple-inspired design
   Purple/gold → Apple blue  |  Serif → System font
══════════════════════════════════════════════════════════════ */

/* ── POLICE SYSTÈME ── */
html, body, button, input, textarea, select,
.btn-gen, .btn-login, .btn-sm, .btn-new, .btn-upgrade,
.btn-nav-link, .btn-cv-link, .btn-logout, .btn-theme,
.lang-opt, .flabel, .finput, .eyebrow {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text',
               'Helvetica Neue', 'Segoe UI', Arial, sans-serif !important;
}
.h1, .result-title, .auth-gate h2, .seo-section h2, .faq-title {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display',
               'Helvetica Neue', 'Segoe UI', Arial, sans-serif !important;
}

/* ── CSS VARIABLES ── */
:root {
  --gold:        #0a84ff;
  --gold-lt:     #409cff;
  --gold-dim:    rgba(10,132,255,.2);
  --gold-pale:   rgba(10,132,255,.08);
  --purple:      #0a84ff;
  --purple-lt:   #409cff;
  --purple-dim:  rgba(10,132,255,.2);
  --ink:         #000000;
  --ink-2:       #1c1c1e;
  --ink-3:       #2c2c2e;
  --bg:          #000000;
  --muted:       rgba(235,235,245,.55);
  --text:        #f5f5f7;
  --border:      rgba(255,255,255,.12);
  --border-2:    rgba(255,255,255,.07);
  --surface:     rgba(255,255,255,.05);
  --surface-2:   rgba(255,255,255,.09);
}

/* ── BODY ── */
html { background: #000 !important; color: #f5f5f7 !important; }
body { background: #000 !important; }

/* Bruit de fond — masqué */
body::before { opacity: .15 !important; }

/* ── NAV ── */
.nav {
  background: rgba(0,0,0,.72) !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
  border-bottom-color: rgba(255,255,255,.1) !important;
}

/* Logo — noir et blanc */
.nav-logo { color: #fff !important; }
.nav-logo .gem { color: #fff !important; }
.nav-logo b { color: #fff !important; }

/* Lien actif nav */
.btn-nav-link.active {
  background: rgba(10,132,255,.12) !important;
  border-color: rgba(10,132,255,.3) !important;
  color: #409cff !important;
}
.btn-nav-link:hover { color: #f5f5f7 !important; }

/* ── HERO / EYEBROW ── */
.eyebrow {
  color: #409cff !important;
  background: rgba(10,132,255,.1) !important;
  border-color: rgba(10,132,255,.25) !important;
}
.h1 em { color: #409cff !important; }

/* ── CV CARD ── */
.cv-card {
  background: rgba(10,132,255,.07) !important;
  border-color: rgba(10,132,255,.2) !important;
}
.cv-card-icon {
  background: linear-gradient(135deg, rgba(10,132,255,.22), rgba(10,132,255,.12)) !important;
  border-color: rgba(10,132,255,.3) !important;
  color: #409cff !important;
}

/* ── FORM INPUTS ── */
.finput:focus {
  border-color: rgba(10,132,255,.55) !important;
  background: rgba(10,132,255,.04) !important;
  box-shadow: 0 0 0 3px rgba(10,132,255,.12) !important;
}

/* ── LANG PICKER ── */
.lang-opt:hover {
  border-color: rgba(10,132,255,.3) !important;
}
.lang-opt.active {
  background: rgba(10,132,255,.15) !important;
  border-color: rgba(10,132,255,.5) !important;
  color: #409cff !important;
}

/* ── BOUTON GÉNÉRER — pill bleu ── */
.btn-gen {
  background: #0a84ff !important;
  border-radius: 980px !important;
  box-shadow: 0 4px 18px rgba(10,132,255,.35) !important;
}
.btn-gen:hover {
  background: #409cff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 28px rgba(10,132,255,.5) !important;
}

/* ── AUTH GATE ── */
.auth-gate-icon {
  background: linear-gradient(135deg, rgba(10,132,255,.2), rgba(10,132,255,.1)) !important;
  border-color: rgba(10,132,255,.25) !important;
  color: #409cff !important;
}
.btn-login {
  background: #0a84ff !important;
  border-radius: 980px !important;
  box-shadow: 0 4px 18px rgba(10,132,255,.35) !important;
}
.btn-login:hover {
  background: #409cff !important;
  box-shadow: 0 8px 28px rgba(10,132,255,.5) !important;
}

/* ── BANNER UPGRADE (gold → blue) ── */
.banner-upgrade {
  background: rgba(10,132,255,.07) !important;
  border-color: rgba(10,132,255,.22) !important;
}
.banner-upgrade h3 { color: #409cff !important; }
.btn-upgrade {
  background: #0a84ff !important;
  border-radius: 980px !important;
}
.btn-upgrade:hover {
  box-shadow: 0 4px 16px rgba(10,132,255,.4) !important;
}

/* ── LETTER NOTE (gold → blue) ── */
.letter-note {
  background: rgba(10,132,255,.06) !important;
  border-color: rgba(10,132,255,.18) !important;
  color: #409cff !important;
}

/* ── FOOTER ── */
.footer { background: #1c1c1e !important; border-top-color: rgba(255,255,255,.07) !important; }
.footer::before {
  background: linear-gradient(90deg, transparent, rgba(10,132,255,.25), transparent) !important;
}
.footer-col-links a:hover { color: #409cff !important; }
.footer-bottom-links a:hover { color: #409cff !important; }

/* Footer logo gem — blanc */
.nav-gem { color: #fff !important; }
.footer-brand a { color: #fff !important; }
.footer-brand a b { color: #fff !important; }
.footer-brand a span[style] { color: #fff !important; }

/* ══════════════════════════════════════════════════════════════
   LIGHT MODE
══════════════════════════════════════════════════════════════ */
html[data-theme="light"] {
  --gold:       #0071e3;
  --gold-lt:    #0077ed;
  --gold-dim:   rgba(0,113,227,.18);
  --gold-pale:  rgba(0,113,227,.07);
  --purple:     #0071e3;
  --purple-lt:  #0077ed;
  --purple-dim: rgba(0,113,227,.15);
  --bg:         #f5f5f7;
  --ink-2:      #ffffff;
  --muted:      rgba(0,0,0,.5);
  --text:       #1d1d1f;
  --border:     rgba(0,0,0,.1);
  --border-2:   rgba(0,0,0,.06);
  --surface:    rgba(0,0,0,.03);
  --surface-2:  rgba(0,0,0,.06);
}

html[data-theme="light"] html { background: #f5f5f7 !important; color: #1d1d1f !important; }
html[data-theme="light"] body { background: #f5f5f7 !important; color: #1d1d1f !important; }

html[data-theme="light"] .nav {
  background: rgba(245,245,247,.88) !important;
  border-bottom-color: rgba(0,0,0,.1) !important;
}
html[data-theme="light"] .nav-logo { color: #1d1d1f !important; }
html[data-theme="light"] .nav-logo .gem { color: #1d1d1f !important; }
html[data-theme="light"] .nav-logo b { color: #1d1d1f !important; }

html[data-theme="light"] .btn-nav-link.active {
  background: rgba(0,113,227,.08) !important;
  border-color: rgba(0,113,227,.28) !important;
  color: #0071e3 !important;
}

html[data-theme="light"] .eyebrow {
  color: #0071e3 !important;
  background: rgba(0,113,227,.07) !important;
  border-color: rgba(0,113,227,.2) !important;
}
html[data-theme="light"] .h1 em { color: #0071e3 !important; }

html[data-theme="light"] .cv-card {
  background: rgba(0,113,227,.05) !important;
  border-color: rgba(0,113,227,.18) !important;
}
html[data-theme="light"] .cv-card-icon {
  background: linear-gradient(135deg, rgba(0,113,227,.18), rgba(0,113,227,.1)) !important;
  border-color: rgba(0,113,227,.25) !important;
  color: #0071e3 !important;
}

html[data-theme="light"] .finput:focus {
  border-color: rgba(0,113,227,.55) !important;
  box-shadow: 0 0 0 3px rgba(0,113,227,.1) !important;
}

html[data-theme="light"] .lang-opt.active {
  background: rgba(0,113,227,.08) !important;
  border-color: rgba(0,113,227,.35) !important;
  color: #0071e3 !important;
}
html[data-theme="light"] .lang-opt:hover { border-color: rgba(0,113,227,.28) !important; }

html[data-theme="light"] .btn-gen {
  background: #0071e3 !important;
  box-shadow: 0 4px 18px rgba(0,113,227,.28) !important;
}
html[data-theme="light"] .btn-gen:hover {
  background: #0077ed !important;
  box-shadow: 0 8px 28px rgba(0,113,227,.4) !important;
}

html[data-theme="light"] .auth-gate-icon {
  background: linear-gradient(135deg, rgba(0,113,227,.16), rgba(0,113,227,.08)) !important;
  border-color: rgba(0,113,227,.22) !important;
  color: #0071e3 !important;
}
html[data-theme="light"] .btn-login {
  background: #0071e3 !important;
  box-shadow: 0 4px 18px rgba(0,113,227,.28) !important;
}
html[data-theme="light"] .btn-login:hover {
  background: #0077ed !important;
  box-shadow: 0 8px 28px rgba(0,113,227,.4) !important;
}

html[data-theme="light"] .banner-upgrade {
  background: rgba(0,113,227,.06) !important;
  border-color: rgba(0,113,227,.2) !important;
}
html[data-theme="light"] .banner-upgrade h3 { color: #0071e3 !important; }
html[data-theme="light"] .btn-upgrade { background: #0071e3 !important; }

html[data-theme="light"] .letter-note {
  background: rgba(0,113,227,.05) !important;
  border-color: rgba(0,113,227,.16) !important;
  color: #0071e3 !important;
}

html[data-theme="light"] .footer {
  background: #eef1f8 !important;
  border-top-color: rgba(0,0,0,.07) !important;
}
html[data-theme="light"] .footer::before {
  background: linear-gradient(90deg, transparent, rgba(0,113,227,.18), transparent) !important;
}
html[data-theme="light"] .footer-col-links a:hover { color: #0071e3 !important; }
html[data-theme="light"] .footer-bottom-links a:hover { color: #0071e3 !important; }
html[data-theme="light"] .footer-brand a { color: #1d1d1f !important; }
html[data-theme="light"] .footer-brand a b { color: #1d1d1f !important; }
html[data-theme="light"] .footer-brand a span[style] { color: #1d1d1f !important; }
html[data-theme="light"] .nav-gem { color: #1d1d1f !important; }