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

/* ── POLICE SYSTÈME ── */
html, body, button, input, select, textarea,
.billing-btn, .btn-plan, .faq-btn, .back-link,
.plan-name, .plan-sub, .plan-desc, .plan-feature,
.hero-sub, .hero-tag, .trust {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text',
               'Helvetica Neue', 'Segoe UI', Arial, sans-serif !important;
}
.hero-title, .faq-title, .plan-amount, .plan-currency,
.logo {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display',
               'Helvetica Neue', 'Segoe UI', Arial, sans-serif !important;
}

/* ── CSS VARIABLES DARK MODE ── */
: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);
}

/* ── GRILLE — colonnes égales, hauteur uniforme ── */
.plans {
  grid-template-columns: 1fr 1fr 1fr 1fr !important;
  align-items: stretch !important;
}
.plan {
  display: flex !important;
  flex-direction: column !important;
}
/* Pousser le bouton tout en bas pour aligner les cartes */
.btn-plan {
  margin-top: auto !important;
}

/* ── RESPONSIVE MOBILE ── */
@media (max-width: 900px) {
  /* 2 colonnes sur tablette */
  .plans {
    grid-template-columns: 1fr 1fr !important;
    max-width: 700px !important;
    gap: 14px !important;
    padding: 0 1.5rem 60px !important;
  }
  /* Featured prend toute la largeur en haut */
  .plan.featured {
    grid-column: 1 / -1 !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}

@media (max-width: 600px) {
  /* 1 colonne pleine largeur sur mobile */
  .plans {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    gap: 12px !important;
    padding: 0 1rem 48px !important;
  }
  .plan.featured {
    grid-column: auto !important;
  }
  /* Padding plus compact sur petits écrans */
  .plan {
    padding: 28px 20px 24px !important;
  }
  .plan.featured {
    padding: 28px 20px 24px !important;
  }
  /* Montant prix un peu plus petit */
  .plan.featured .plan-amount {
    font-size: 2.8rem !important;
  }
}

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

/* Orbs background → blue */
body::before {
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(10,132,255,.08) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 10% 80%, rgba(10,132,255,.04) 0%, transparent 60%) !important;
}
body::after {
  background-image:
    linear-gradient(rgba(10,132,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,132,255,.025) 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 — noir et blanc */
.logo { color: #fff !important; font-style: normal !important; }
.logo strong { color: #fff !important; }
.logo b { color: #fff !important; }

.back-link { color: rgba(235,235,245,.55) !important; }
.back-link:hover { color: #409cff !important; }

/* ── HERO TAG ── */
.hero-tag {
  color: #409cff !important;
  background: rgba(10,132,255,.08) !important;
  border-color: rgba(10,132,255,.22) !important;
}
.hero-tag-dot { background: #0a84ff !important; }

/* Hero title em */
.hero-title em { color: #409cff !important; font-style: italic; }

/* Billing save badge */
.billing-save {
  background: #0a84ff !important;
  color: #fff !important;
}

/* ── BILLING TOGGLE ── */
html:not([data-theme="light"]) .billing-btn { color: rgba(235,235,245,.55) !important; }
html:not([data-theme="light"]) .billing-btn.active {
  background: #2c2c2e !important;
  color: #f5f5f7 !important;
}
html[data-theme="light"] .billing-btn { color: rgba(0,0,0,.5) !important; }
html[data-theme="light"] .billing-btn.active {
  background: #fff !important;
  color: #1d1d1f !important;
}

/* ── PLAN CARDS ── */
.plan {
  background: rgba(28,28,30,.88) !important;
  border-color: rgba(255,255,255,.1) !important;
}
.plan:not(.featured):hover {
  box-shadow: 0 20px 55px rgba(0,0,0,.55), 0 0 0 1px rgba(10,132,255,.25) !important;
  border-color: rgba(10,132,255,.25) !important;
}

/* Featured plan — normalize size + blue animated border */
.plan.featured {
  border-color: rgba(10,132,255,.45) !important;
  background: linear-gradient(165deg, rgba(28,28,30,.97), rgba(10,132,255,.08)) !important;
  box-shadow: 0 0 80px rgba(10,132,255,.18), 0 24px 64px rgba(0,0,0,.5) !important;
  /* Normalize to same size as other cards */
  padding: 38px 26px 32px !important;
  border-radius: 22px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.plan.featured:hover {
  box-shadow: 0 0 110px rgba(10,132,255,.25), 0 30px 72px rgba(0,0,0,.55), 0 0 0 1px rgba(10,132,255,.6) !important;
}

/* Animated gradient border → blue tones */
.plan.featured::before {
  background: linear-gradient(135deg, #0a84ff, #409cff, #0071e3, #409cff, #0a84ff) !important;
  background-size: 300% 300% !important;
}

/* Ambient glow orb → blue */
.plan.featured::after {
  background: rgba(10,132,255,.12) !important;
}

/* Plan badge "Le plus populaire" */
.plan-badge-top {
  background: linear-gradient(135deg, #0a84ff, #409cff) !important;
  box-shadow: 0 4px 18px rgba(10,132,255,.4) !important;
}

/* Plan featured name/currency → blue tint */
.plan.featured .plan-name { color: rgba(64,156,255,.75) !important; }
.plan.featured .plan-currency { color: rgba(64,156,255,.7) !important; }
.plan.featured .plan-amount { font-size: 3.6rem !important; color: #fff !important; }

/* Plan note (annual badge) */
.plan-note {
  color: #409cff !important;
  background: rgba(10,132,255,.1) !important;
  border-color: rgba(10,132,255,.22) !important;
}

/* ── CHECKMARKS (pf-check) ── */
.pf-check {
  background: rgba(10,132,255,.1) !important;
  border-color: rgba(10,132,255,.22) !important;
}
.pf-check svg { color: #409cff !important; }

/* Purple feature variant → blue */
.plan-feature.purple .pf-check {
  background: rgba(10,132,255,.1) !important;
  border-color: rgba(10,132,255,.25) !important;
}
.plan-feature.purple .pf-check svg { color: #409cff !important; }

/* ── BOUTONS DES PLANS — tous pill bleu ── */
.btn-plan {
  border-radius: 980px !important;
}

/* Outline (plan gratuit) */
.btn-plan.outline {
  border-color: rgba(255,255,255,.18) !important;
  color: rgba(235,235,245,.75) !important;
  background: transparent !important;
}
.btn-plan.outline:hover {
  border-color: #409cff !important;
  color: #409cff !important;
  background: rgba(10,132,255,.06) !important;
}

/* Gold (plan 1 CV) → blue */
.btn-plan.gold {
  background: #0a84ff !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 18px rgba(10,132,255,.3) !important;
}
.btn-plan.gold:hover {
  background: #409cff !important;
  opacity: 1 !important;
  box-shadow: 0 6px 26px rgba(10,132,255,.45) !important;
}

/* Purple (plan premium) → blue */
.btn-plan.purple {
  background: #0a84ff !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 18px rgba(10,132,255,.3) !important;
}
.btn-plan.purple:hover {
  background: #409cff !important;
  opacity: 1 !important;
  box-shadow: 0 6px 26px rgba(10,132,255,.45) !important;
}

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

/* ── TRUST BAR ── */
.trust-item svg { color: #409cff !important; opacity: .6 !important; }

/* ── FOOTER ── */
.footer { background: #1c1c1e !important; border-top-color: rgba(255,255,255,.07) !important; }
.footer-col-links a:hover { color: #409cff !important; }
.footer-bottom-links a:hover { color: #409cff !important; }
/* Footer logo gem — white in dark, dark in light */
.footer a[href="index.html"] { color: #fff !important; }
.footer a[href="index.html"] 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);
  --purple-pale: rgba(0,113,227,.06);
  --ink:         #f5f5f7;
  --ink-2:       #ffffff;
  --ink-3:       #f5f5f7;
  --ink-4:       #e8e8ed;
  --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; color: #1d1d1f !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 50% 40% at 10% 80%, rgba(0,113,227,.03) 0%, transparent 60%) !important;
}
html[data-theme="light"] body::after {
  background-image:
    linear-gradient(rgba(0,113,227,.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,113,227,.015) 1px, transparent 1px) !important;
}

html[data-theme="light"] .topbar {
  background: rgba(245,245,247,.85) !important;
  border-bottom-color: rgba(0,0,0,.1) !important;
}

/* Logo light — noir */
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"] .back-link { color: rgba(0,0,0,.5) !important; }
html[data-theme="light"] .back-link:hover { color: #0071e3 !important; }

html[data-theme="light"] .hero-tag {
  color: #0071e3 !important;
  background: rgba(0,113,227,.07) !important;
  border-color: rgba(0,113,227,.18) !important;
}
html[data-theme="light"] .hero-tag-dot { background: #0071e3 !important; }
html[data-theme="light"] .hero-title { color: #1d1d1f !important; }
html[data-theme="light"] .hero-title em { color: #0071e3 !important; }
html[data-theme="light"] .hero-sub { color: rgba(0,0,0,.55) !important; }

html[data-theme="light"] .billing-save {
  background: #0071e3 !important;
  color: #fff !important;
}
html[data-theme="light"] .billing-btn.active {
  background: #fff !important;
  color: #1d1d1f !important;
}

html[data-theme="light"] .plan {
  background: #fff !important;
  border-color: rgba(0,0,0,.09) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
}
html[data-theme="light"] .plan:not(.featured):hover {
  box-shadow: 0 16px 40px rgba(0,0,0,.1) !important;
  border-color: rgba(0,113,227,.25) !important;
}
html[data-theme="light"] .plan.featured {
  background: linear-gradient(165deg, #fff, rgba(0,113,227,.04)) !important;
  border-color: rgba(0,113,227,.3) !important;
  box-shadow: 0 0 60px rgba(0,113,227,.1), 0 20px 50px rgba(0,0,0,.1) !important;
}
html[data-theme="light"] .plan.featured::before { opacity: .35 !important; }
html[data-theme="light"] .plan.featured::after { background: rgba(0,113,227,.06) !important; }
html[data-theme="light"] .plan.featured .plan-name { color: rgba(0,113,227,.6) !important; }
html[data-theme="light"] .plan.featured .plan-currency { color: rgba(0,113,227,.55) !important; }
html[data-theme="light"] .plan.featured .plan-amount { color: #1d1d1f !important; }

html[data-theme="light"] .plan-badge-top {
  background: linear-gradient(135deg, #0071e3, #0077ed) !important;
  box-shadow: 0 4px 18px rgba(0,113,227,.35) !important;
}
html[data-theme="light"] .plan-note {
  color: #0071e3 !important;
  background: rgba(0,113,227,.08) !important;
  border-color: rgba(0,113,227,.2) !important;
}

html[data-theme="light"] .pf-check {
  background: rgba(0,113,227,.08) !important;
  border-color: rgba(0,113,227,.2) !important;
}
html[data-theme="light"] .pf-check svg { color: #0071e3 !important; }
html[data-theme="light"] .plan-feature.purple .pf-check {
  background: rgba(0,113,227,.07) !important;
  border-color: rgba(0,113,227,.18) !important;
}
html[data-theme="light"] .plan-feature.purple .pf-check svg { color: #0071e3 !important; }

html[data-theme="light"] .btn-plan.outline {
  border-color: rgba(0,0,0,.14) !important;
  color: rgba(0,0,0,.6) !important;
  background: transparent !important;
}
html[data-theme="light"] .btn-plan.outline:hover {
  border-color: #0071e3 !important;
  color: #0071e3 !important;
  background: rgba(0,113,227,.05) !important;
}
html[data-theme="light"] .btn-plan.gold {
  background: #0071e3 !important;
  box-shadow: 0 4px 18px rgba(0,113,227,.25) !important;
}
html[data-theme="light"] .btn-plan.gold:hover {
  background: #0077ed !important;
  box-shadow: 0 6px 26px rgba(0,113,227,.35) !important;
}
html[data-theme="light"] .btn-plan.purple {
  background: #0071e3 !important;
  box-shadow: 0 4px 18px rgba(0,113,227,.25) !important;
}
html[data-theme="light"] .btn-plan.purple:hover {
  background: #0077ed !important;
  box-shadow: 0 6px 26px rgba(0,113,227,.35) !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"] .trust-item svg { color: #0071e3 !important; opacity: .5 !important; }

html[data-theme="light"] .footer { background: #eef1f8 !important; border-top-color: rgba(0,0,0,.07) !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 a[href="index.html"] { color: #1d1d1f !important; }
html[data-theme="light"] .footer a[href="index.html"] span[style] { color: #1d1d1f !important; }