/* ============================================================
   THEME — ANNÉES 80
   Néon, magenta, cyan, gradients vaporwave, typographies VT323
   et Bungee, fond grille rétro & soleil couchant.
   ============================================================ */

[data-theme="annees80"][data-mode="light"] {
  --bg: #ffe6f7;
  --paper: #fff7fb;
  --text: #1a0233;
  --muted: #8e3a8e;
  --line: rgba(255,0,153,.15);
  --accent: #ff007a;
  --accent-2: #00f0ff;
  --accent-3: #ffd700;
  --shadow: 0 20px 60px -20px rgba(255,0,122,.45);
}

[data-theme="annees80"][data-mode="dark"] {
  --bg: #0a0026;
  --paper: #1a0a40;
  --text: #fff;
  --muted: #ff80df;
  --line: rgba(255,0,255,.25);
  --accent: #ff007a;
  --accent-2: #00f0ff;
  --accent-3: #ffd700;
  --shadow: 0 20px 60px -10px rgba(255,0,122,.7);
}

[data-theme="annees80"] {
  font-family: 'Space Grotesk', sans-serif;
}

[data-theme="annees80"] .section-title,
[data-theme="annees80"] .hero-title,
[data-theme="annees80"] .opt-num,
[data-theme="annees80"] .stat-num,
[data-theme="annees80"] .sim-result-value,
[data-theme="annees80"] .ba-spec strong,
[data-theme="annees80"] .tip-step,
[data-theme="annees80"] .val-num {
  font-family: 'Bungee', sans-serif;
  letter-spacing: 0;
  text-transform: uppercase;
}

[data-theme="annees80"] .hero-title {
  font-size: clamp(2.6rem, 7vw, 6rem);
  background: linear-gradient(180deg, #ff007a 0%, #ffd700 50%, #00f0ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 0 40px rgba(255,0,122,.5);
}
[data-theme="annees80"] .hero-title .italic {
  background: linear-gradient(180deg, #00f0ff, #ff007a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: normal;
}
[data-theme="annees80"] .hero-title .emphasis {
  background: linear-gradient(180deg, #ffd700, #ff007a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

[data-theme="annees80"] .section-title em {
  background: linear-gradient(90deg, #ff007a, #00f0ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: normal;
}

[data-theme="annees80"] .kicker {
  font-family: 'VT323', monospace;
  font-size: 1.1rem;
  letter-spacing: .3em;
  color: var(--accent-2);
  text-shadow: 0 0 8px var(--accent-2);
}

[data-theme="annees80"] .brand-name {
  font-family: 'Bungee', sans-serif;
  background: linear-gradient(90deg, #ff007a, #00f0ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-transform: uppercase;
}
[data-theme="annees80"] .brand-sub {
  font-family: 'VT323', monospace;
  font-size: .9rem;
  color: var(--accent);
}
[data-theme="annees80"] .brand-mark {
  filter: drop-shadow(0 0 8px var(--accent));
}

/* Hero — fond grille + soleil couchant */
[data-theme="annees80"] .hero {
  background:
    linear-gradient(180deg, #2b0a4d 0%, #9b1764 55%, #ff7a59 95%);
  color: #fff;
  overflow: hidden;
}
[data-theme="annees80"][data-mode="light"] .hero {
  background:
    linear-gradient(180deg, #ffd6f1 0%, #f48fff 50%, #ffd700 100%);
  color: var(--text);
}
[data-theme="annees80"] .hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: -10%; right: -10%;
  height: 50%;
  background:
    repeating-linear-gradient(90deg, transparent 0 49px, rgba(0,240,255,.6) 49px 50px),
    repeating-linear-gradient(0deg, transparent 0 49px, rgba(0,240,255,.6) 49px 50px);
  transform: perspective(800px) rotateX(70deg);
  transform-origin: top;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%);
          mask-image: linear-gradient(180deg, transparent, #000 30%);
  z-index: -1;
}
[data-theme="annees80"] .hero::before {
  content: '';
  position: absolute;
  top: 8%; right: 8%;
  width: 280px; height: 280px;
  border-radius: 50%;
  background:
    repeating-linear-gradient(0deg, transparent 0 12px, rgba(0,0,0,.4) 12px 16px),
    radial-gradient(circle, #ffd700 0%, #ff007a 70%);
  z-index: -1;
  filter: drop-shadow(0 0 60px #ff007a);
  animation: sun80 8s ease-in-out infinite;
}
@keyframes sun80 {
  50% { transform: translateY(-12px); }
}
[data-theme="annees80"] .hero-bg { display: none; }

[data-theme="annees80"] .hero-eyebrow,
[data-theme="annees80"] .hero-rating em,
[data-theme="annees80"] .hero-rating { color: rgba(255,255,255,.85); }
[data-theme="annees80"][data-mode="light"] .hero-eyebrow,
[data-theme="annees80"][data-mode="light"] .hero-rating em { color: var(--text); }

[data-theme="annees80"] .stat-num {
  color: var(--accent-3);
  text-shadow: 0 0 14px rgba(255,215,0,.6);
}
[data-theme="annees80"] .stat-suf, [data-theme="annees80"] .stat-lab {
  color: rgba(255,255,255,.75);
  font-family: 'VT323', monospace;
  font-size: 1rem;
  letter-spacing: .1em;
}
[data-theme="annees80"][data-mode="light"] .stat-suf,
[data-theme="annees80"][data-mode="light"] .stat-lab { color: var(--muted); }

[data-theme="annees80"] .stat { border-color: rgba(255,255,255,.25); }
[data-theme="annees80"][data-mode="light"] .stat { border-color: var(--line); }

/* Buttons */
[data-theme="annees80"] .btn-primary {
  background: linear-gradient(90deg, #ff007a, #ffd700);
  color: #1a0233;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-family: 'Bungee', sans-serif;
  font-size: .8rem;
  box-shadow: 0 0 30px rgba(255,0,122,.65), 0 0 60px rgba(255,215,0,.3);
}
[data-theme="annees80"] .btn-primary:hover {
  background: linear-gradient(90deg, #00f0ff, #ff007a);
  color: #fff;
}
[data-theme="annees80"] .btn-ghost {
  background: rgba(0,240,255,.1);
  color: var(--accent-2);
  border-color: var(--accent-2);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-family: 'VT323', monospace;
  font-size: 1.05rem;
}

/* Header */
[data-theme="annees80"] .site-header {
  background: rgba(26,2,51,.85);
  border-bottom: 2px solid var(--accent);
  box-shadow: 0 0 30px rgba(255,0,122,.4);
}
[data-theme="annees80"][data-mode="light"] .site-header {
  background: rgba(255,247,251,.92);
  border-bottom-color: var(--accent);
}
[data-theme="annees80"] .site-nav a { color: var(--accent-2); font-family: 'VT323', monospace; font-size: 1.1rem; letter-spacing: .1em; text-transform: uppercase; }
[data-theme="annees80"] .site-nav a.nav-cta {
  background: var(--accent);
  color: #fff;
  font-family: 'Bungee', sans-serif;
  font-size: .8rem;
  box-shadow: 0 0 20px rgba(255,0,122,.6);
}

/* Theme switch */
[data-theme="annees80"] .theme-switch { background: rgba(255,0,122,.1); border-color: var(--accent); }
[data-theme="annees80"] .theme-btn { color: var(--accent-2); font-family: 'VT323', monospace; font-size: 1rem; }
[data-theme="annees80"] .theme-btn.is-active {
  background: linear-gradient(90deg, var(--accent), var(--accent-3));
  color: #1a0233;
}

/* Social rail */
[data-theme="annees80"] .social-rail {
  background: rgba(26,2,51,.7);
  border-color: var(--accent);
  box-shadow: 0 0 20px rgba(255,0,122,.45);
}
[data-theme="annees80"] .social-link { color: var(--accent-2); }
[data-theme="annees80"] .social-link:hover { background: var(--accent); color: #fff; box-shadow: 0 0 20px var(--accent); }
[data-theme="annees80"] .social-tag { color: var(--accent-3); font-family: 'VT323', monospace; font-size: 1rem; }

/* Floating controls */
[data-theme="annees80"] .ctrl-btn { background: var(--accent); color: #fff; border: 2px solid var(--accent-3); box-shadow: 0 0 20px var(--accent); }
[data-theme="annees80"] .ctrl-btn:hover { background: var(--accent-2); color: #1a0233; box-shadow: 0 0 30px var(--accent-2); }

/* Service cards */
[data-theme="annees80"] .services-grid {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 40px rgba(255,0,122,.35);
}
[data-theme="annees80"] .service-card {
  background: var(--paper);
}
[data-theme="annees80"] .service-card::before { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); }
[data-theme="annees80"] .service-card h3 { font-family: 'Bungee', sans-serif; font-size: 1.2rem; text-transform: uppercase; letter-spacing: 0; }
[data-theme="annees80"] .service-icon { color: var(--accent); filter: drop-shadow(0 0 8px var(--accent)); }

/* About */
[data-theme="annees80"] .about-text .lead {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
}
[data-theme="annees80"] .portrait-frame {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 40px rgba(255,0,122,.55);
  transform: rotate(0);
}
[data-theme="annees80"] .portrait-tag {
  background: var(--accent-3);
  color: #1a0233;
  font-family: 'Bungee', sans-serif;
  font-size: .7rem;
}
[data-theme="annees80"] .portrait-caption {
  font-family: 'VT323', monospace;
  font-size: 1.6rem;
  color: var(--accent);
}
[data-theme="annees80"] .badge { background: var(--accent); color: #fff; box-shadow: 0 0 12px var(--accent); }

/* Premium */
[data-theme="annees80"] .premium {
  background:
    linear-gradient(135deg, #1a0233 0%, #6b1071 100%);
}
[data-theme="annees80"] .premium::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 60px, rgba(0,240,255,.08) 60px 61px),
    repeating-linear-gradient(0deg, transparent 0 60px, rgba(0,240,255,.08) 60px 61px);
  pointer-events: none;
}
[data-theme="annees80"] .opt-card {
  background: rgba(255,0,122,.08);
  border-color: var(--accent);
}
[data-theme="annees80"] .opt-card:hover {
  background: rgba(0,240,255,.12);
  border-color: var(--accent-2);
  box-shadow: 0 0 30px rgba(0,240,255,.4);
}
[data-theme="annees80"] .opt-num {
  color: var(--accent-3);
  text-shadow: 0 0 14px var(--accent-3);
}
[data-theme="annees80"] .opt-card h3 { font-family: 'Bungee', sans-serif; font-size: 1.1rem; }
[data-theme="annees80"] .opt-card::after {
  background: linear-gradient(90deg, var(--accent), var(--accent-3));
  color: #1a0233;
  font-family: 'Bungee', sans-serif;
  font-size: .8rem;
  text-transform: uppercase;
  box-shadow: 0 0 30px var(--accent);
}

/* BA / advice / reviews / contact accents */
[data-theme="annees80"] .ba-knob { background: var(--accent-3); color: #1a0233; box-shadow: 0 0 20px var(--accent-3); }
[data-theme="annees80"] .ba-line, [data-theme="annees80"] .ba-handle { background: var(--accent-3); }
[data-theme="annees80"] .ba-spec strong { font-family: 'Bungee', sans-serif; font-size: 1.3rem; color: var(--accent); }

[data-theme="annees80"] .advice-sim {
  background: linear-gradient(135deg, #2a0840, #6b1071);
  border: 2px solid var(--accent);
  box-shadow: 0 0 40px rgba(255,0,122,.5);
}
[data-theme="annees80"] .advice-sim h3 { font-family: 'Bungee', sans-serif; font-size: 1.4rem; color: var(--accent-3); }
[data-theme="annees80"] .sim-result-value {
  font-family: 'Bungee', sans-serif;
  background: linear-gradient(90deg, var(--accent-3), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
[data-theme="annees80"] .sim-toggle button.is-active {
  background: linear-gradient(90deg, var(--accent), var(--accent-3));
  color: #1a0233;
}

[data-theme="annees80"] .rev-card {
  background: var(--paper);
  border: 2px solid var(--accent);
  box-shadow: 0 0 20px rgba(255,0,122,.25);
}
[data-theme="annees80"] .rev-card p { font-family: 'Space Grotesk', sans-serif; font-style: italic; }
[data-theme="annees80"] .rev-quote { color: var(--accent-2); opacity: .9; }
[data-theme="annees80"] .rev-stars { color: var(--accent-3); text-shadow: 0 0 8px var(--accent-3); }

[data-theme="annees80"] .contact {
  background:
    linear-gradient(135deg, #1a0233 0%, #ff007a 50%, #00f0ff 100%);
}
[data-theme="annees80"] .contact-form {
  background: rgba(0,0,0,.4);
  border: 2px solid var(--accent-3);
  box-shadow: 0 0 40px rgba(255,215,0,.3);
}

[data-theme="annees80"] .ci-value { color: var(--accent-3); font-family: 'Bungee', sans-serif; font-size: .95rem; }

[data-theme="annees80"] .site-footer { background: #1a0233; color: #fff; border-top: 2px solid var(--accent); }
[data-theme="annees80"] .foot-tag, [data-theme="annees80"] .foot-grid ul a, [data-theme="annees80"] .foot-legal { color: rgba(255,255,255,.7); }
[data-theme="annees80"] .foot-grid ul a:hover { color: var(--accent-3); text-shadow: 0 0 8px var(--accent-3); }
[data-theme="annees80"] .foot-mark { color: var(--accent); }