/* ══════════════════════════════════════════════════════════════
   interview-prep-apple.css  —  Apple-inspired design
   Purple/gold/cyan → Apple blue  |  Serif → System font
══════════════════════════════════════════════════════════════ */

/* ── POLICE SYSTÈME ── */
html, body, button, input, textarea, select,
.btn-gen, .btn-back, .btn-upgrade, .btn-sm,
.btn-copy-ans, .btn-copy-all, .btn-del-session,
.mode-tab, .flabel, .finput, .form-note {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text',
               'Helvetica Neue', 'Segoe UI', Arial, sans-serif !important;
}
.h1, .results-title, .sessions-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);
  --cyan:       #0a84ff;
  --cyan-dim:   rgba(10,132,255,.18);
  --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; }
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;
}
.nav-logo { color: #fff !important; }
.nav-logo .gem { color: #fff !important; }
.nav-logo b { color: #fff !important; }

/* Avatar — bleu */
.nav-avatar {
  background: linear-gradient(135deg, #0a84ff, #409cff) !important;
}

/* ── 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; }

/* ── 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;
}
.form-note strong { 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;
}

/* ── MODE TABS ── */
.mode-tab.active {
  background: #0a84ff !important;
  box-shadow: 0 4px 16px rgba(10,132,255,.35) !important;
}
.mode-tab:hover { color: #f5f5f7 !important; }

/* ── QUESTION CARDS — strip + badge → bleu uniforme ── */
.qc[data-t="technique"] {
  --qc-strip: linear-gradient(90deg, #0a84ff, #409cff);
  --qc-num: rgba(10,132,255,.3);
  --qc-badge: rgba(64,156,255,.9);
  --qc-badge-bg: rgba(10,132,255,.1);
  --qc-badge-border: rgba(10,132,255,.25);
  --qc-border: rgba(10,132,255,.3);
}
.qc[data-t="comportemental"] {
  --qc-strip: linear-gradient(90deg, #0a84ff, #409cff);
  --qc-num: rgba(10,132,255,.3);
  --qc-badge: rgba(64,156,255,.9);
  --qc-badge-bg: rgba(10,132,255,.1);
  --qc-badge-border: rgba(10,132,255,.25);
  --qc-border: rgba(10,132,255,.3);
}
.qc[data-t="experience"] {
  --qc-strip: linear-gradient(90deg, #0a84ff, #409cff);
  --qc-num: rgba(10,132,255,.3);
  --qc-badge: rgba(64,156,255,.9);
  --qc-badge-bg: rgba(10,132,255,.1);
  --qc-badge-border: rgba(10,132,255,.25);
  --qc-border: rgba(10,132,255,.3);
}

/* ── COPY ALL hover ── */
.btn-copy-all:hover { border-color: rgba(10,132,255,.4) !important; color: #409cff !important; }

/* ── SESSIONS ── */
.sessions-count {
  background: rgba(10,132,255,.12) !important;
  border-color: rgba(10,132,255,.28) !important;
  color: #409cff !important;
}
.session-item.open { border-color: rgba(10,132,255,.35) !important; }
.session-icon {
  background: rgba(10,132,255,.12) !important;
  border-color: rgba(10,132,255,.25) !important;
  color: #409cff !important;
}
.session-company { color: #409cff !important; }
.results-meta strong { color: #409cff !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; }

/* ── 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; }
.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);
  --cyan:       #0071e3;
  --cyan-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"] .nav-avatar {
  background: linear-gradient(135deg, #0071e3, #0077ed) !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"] .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"] .form-note strong { color: #0071e3 !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"] .mode-tab.active {
  background: #0071e3 !important;
  box-shadow: 0 4px 14px rgba(0,113,227,.25) !important;
}

html[data-theme="light"] .qc[data-t="technique"],
html[data-theme="light"] .qc[data-t="comportemental"],
html[data-theme="light"] .qc[data-t="experience"] {
  --qc-strip: linear-gradient(90deg, #0071e3, #0077ed);
  --qc-num: rgba(0,113,227,.25);
  --qc-badge: rgba(0,113,227,.9);
  --qc-badge-bg: rgba(0,113,227,.08);
  --qc-badge-border: rgba(0,113,227,.2);
  --qc-border: rgba(0,113,227,.28);
}

html[data-theme="light"] .sessions-count {
  background: rgba(0,113,227,.08) !important;
  border-color: rgba(0,113,227,.22) !important;
  color: #0071e3 !important;
}
html[data-theme="light"] .session-item.open { border-color: rgba(0,113,227,.3) !important; }
html[data-theme="light"] .session-icon {
  background: rgba(0,113,227,.08) !important;
  border-color: rgba(0,113,227,.2) !important;
  color: #0071e3 !important;
}
html[data-theme="light"] .session-company { color: #0071e3 !important; }
html[data-theme="light"] .results-meta strong { color: #0071e3 !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"] .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,.15), 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"] .nav-gem { color: #1d1d1f !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; }