/* ══════════════════════════════════════════════════════════════
   support-apple.css  —  Apple-inspired design for support.html
   Gold/purple → Apple blue  |  Serif → System font
══════════════════════════════════════════════════════════════ */

/* ── POLICE SYSTÈME ── */
html, body, button, input, textarea, select,
.btn-submit, .contact-btn, .faq-btn, .faq-tab,
.bottom-link, .logo, .topbar-link,
.flabel, .finput, .fselect, .ftextarea {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text',
               'Helvetica Neue', 'Segoe UI', Arial, sans-serif !important;
}
.hero-title, .form-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,.07);
  --purple:      #0a84ff;
  --purple-lt:   #409cff;
  --purple-dim:  rgba(10,132,255,.2);
  --purple-pale: rgba(10,132,255,.07);
  --ink:         #000000;
  --ink-2:       #1c1c1e;
  --ink-3:       #2c2c2e;
  --ink-4:       #3a3a3c;
  --muted:       rgba(235,235,245,.55);
  --text:        #f5f5f7;
  --border:      rgba(255,255,255,.12);
  --border-2:    rgba(255,255,255,.07);
}

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

body::before {
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(10,132,255,.08) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 85% 80%, rgba(10,132,255,.04) 0%, transparent 55%) !important;
}
body::after {
  background-image:
    linear-gradient(rgba(10,132,255,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,132,255,.02) 1px, transparent 1px) !important;
}

/* ── TOPBAR ── */
.topbar {
  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 { color: #fff !important; }
.logo strong { color: #fff !important; }
.logo b { color: #fff !important; }

/* ── HERO ── */
.hero-title em { color: #409cff !important; }

/* ── SEARCH ── */
.search-input:focus {
  border-color: rgba(10,132,255,.5) !important;
  background: rgba(10,132,255,.05) !important;
  box-shadow: 0 0 0 3px rgba(10,132,255,.12) !important;
}

/* ── FAQ TABS ── */
.faq-tab.active, .faq-tab:hover {
  background: rgba(10,132,255,.12) !important;
  border-color: rgba(10,132,255,.3) !important;
  color: #409cff !important;
}

/* ── FAQ ── */
.faq-btn:hover { color: #409cff !important; }
.faq-item.open .faq-icon { color: #409cff !important; }
.faq-answer a { color: #409cff !important; }

/* ── CONTACT BUTTONS ── */
.contact-btn.purple {
  background: rgba(10,132,255,.12) !important;
  border-color: rgba(10,132,255,.28) !important;
  color: #409cff !important;
}
.contact-btn.purple:hover {
  background: rgba(10,132,255,.22) !important;
  border-color: rgba(10,132,255,.5) !important;
}

/* ── FORM INPUTS ── */
.finput:focus, .fselect:focus, .ftextarea:focus {
  border-color: rgba(10,132,255,.5) !important;
  background: rgba(10,132,255,.05) !important;
  box-shadow: 0 0 0 3px rgba(10,132,255,.1) !important;
}

/* ── FOOTER ── */
.footer { background: #1c1c1e !important; border-top-color: rgba(255,255,255,.07) !important; }
.footer-brand a { color: #fff !important; }
.footer-brand a span[style] { color: #fff !important; }
.footer-brand a b { color: #fff !important; }
.footer-col-links a:hover { color: #409cff !important; }
.footer-bottom-links a:hover { color: #409cff !important; }

/* ── BOUTON SUBMIT — pill bleu ── */
.btn-submit {
  background: #0a84ff !important;
  border-radius: 980px !important;
  box-shadow: 0 4px 18px rgba(10,132,255,.3) !important;
}
.btn-submit:hover {
  background: #409cff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 24px rgba(10,132,255,.45) !important;
}

/* ══════════════════════════════════════════════════════════════
   LIGHT MODE
══════════════════════════════════════════════════════════════ */
html[data-theme="light"] {
  --ink:         #f5f5f7;
  --ink-2:       #ffffff;
  --ink-3:       #f0f0f5;
  --ink-4:       #e8e8ed;
  --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);
  --purple-pale: rgba(0,113,227,.06);
  --muted:       rgba(0,0,0,.5);
  --text:        #1d1d1f;
  --border:      rgba(0,0,0,.1);
  --border-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; }
html[data-theme="light"] body::before {
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(0,113,227,.05) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 85% 80%, rgba(0,113,227,.03) 0%, transparent 55%) !important;
}

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

html[data-theme="light"] .hero-title em { color: #0071e3 !important; }

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

html[data-theme="light"] .faq-tab { background: #fff !important; border-color: rgba(0,0,0,.09) !important; color: rgba(0,0,0,.45) !important; }
html[data-theme="light"] .faq-tab.active,
html[data-theme="light"] .faq-tab:hover {
  background: rgba(0,113,227,.07) !important;
  border-color: rgba(0,113,227,.2) !important;
  color: #0071e3 !important;
}

html[data-theme="light"] .faq-btn { color: #1d1d1f !important; }
html[data-theme="light"] .faq-btn:hover { color: #0071e3 !important; }
html[data-theme="light"] .faq-item.open .faq-icon { color: #0071e3 !important; }

html[data-theme="light"] .contact-btn.purple {
  background: rgba(0,113,227,.08) !important;
  border-color: rgba(0,113,227,.22) !important;
  color: #0071e3 !important;
}
html[data-theme="light"] .contact-btn.purple:hover {
  background: rgba(0,113,227,.14) !important;
  border-color: rgba(0,113,227,.4) !important;
}

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

html[data-theme="light"] .footer {
  background: #eef1f8 !important;
  border-top-color: rgba(0,0,0,.07) !important;
}
html[data-theme="light"] .footer-brand a { color: #1d1d1f !important; }
html[data-theme="light"] .footer-brand a span[style] { color: #1d1d1f !important; }
html[data-theme="light"] .footer-brand a b { color: #1d1d1f !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"] .btn-submit {
  background: #0071e3 !important;
  box-shadow: 0 4px 18px rgba(0,113,227,.25) !important;
}
html[data-theme="light"] .btn-submit:hover {
  background: #0077ed !important;
  box-shadow: 0 8px 24px rgba(0,113,227,.38) !important;
}