/* ============================================================
   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 — pas de panneau autour, on laisse les boutons
   respirer avec leurs couleurs de marque. */
[data-theme="annees80"] .social-rail {
  background: transparent;
  border: 0;
  box-shadow: none;
}
[data-theme="annees80"] .social-tag { color: var(--accent-3); font-family: 'VT323', monospace; font-size: 1rem; }

/* Floating controls — l'ampoule (mode clair/sombre) est masquée pour ce thème
   car le rendu est verrouillé sur sa palette néon native. */
[data-theme="annees80"] #btn-light { display: none !important; }
[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); }

/* ────────────────────────────────────────────
   LISIBILITÉ — durcissement des contrastes
   Le hero light du thème 80s passe par un dégradé
   pink→magenta→gold qui mangeait le titre original
   (gold-on-gold, cyan-on-pink). On retravaille les
   couleurs pour qu'elles restent lisibles à toute hauteur.
   ──────────────────────────────────────────── */

/* Hero — titre lisible sur tout le dégradé pink/magenta/gold */
[data-theme="annees80"][data-mode="light"] .hero-title {
  background: linear-gradient(180deg, #1a0233 0%, #4a0a6b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2px 0 rgba(255,255,255,.45);
}
[data-theme="annees80"][data-mode="light"] .hero-title .italic {
  background: linear-gradient(180deg, #ff007a, #2b0a4d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
[data-theme="annees80"][data-mode="light"] .hero-title .emphasis {
  background: linear-gradient(180deg, #1a0233, #ff007a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Sur mode sombre on garde le gradient néon mais on renforce le glow
   pour qu'il ressorte du fond violet/magenta. */
[data-theme="annees80"][data-mode="dark"] .hero-title {
  text-shadow:
    0 0 20px rgba(255,255,255,.25),
    0 0 40px rgba(255,0,122,.55);
}

/* Hero lead + eyebrow — fallback contrastés sur les 2 modes */
[data-theme="annees80"][data-mode="light"] .hero-lead { color: #2b0a4d; }
[data-theme="annees80"][data-mode="dark"] .hero-lead  { color: rgba(255,255,255,.92); }

/* Kicker — cyan-on-light-pink était illisible. On force violet en light. */
[data-theme="annees80"][data-mode="light"] .kicker {
  color: var(--accent);
  text-shadow: 0 0 10px rgba(255,0,122,.35);
}

/* Brand-name — sur header light, le cyan du gradient disparaissait */
[data-theme="annees80"][data-mode="light"] .brand-name {
  background: linear-gradient(90deg, #ff007a, #6b1071);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
[data-theme="annees80"][data-mode="light"] .brand-sub { color: #6b1071; }

/* Nav — cyan sur header blanc-rose était trop pâle */
[data-theme="annees80"][data-mode="light"] .site-nav a { color: #2b0a4d; }
[data-theme="annees80"][data-mode="light"] .site-nav a:hover { color: var(--accent); text-shadow: 0 0 8px rgba(255,0,122,.5); }

/* Stat-num — gold sur fond gold = invisible. On force violet sombre en light. */
[data-theme="annees80"][data-mode="light"] .stat-num {
  color: #1a0233;
  text-shadow: 0 0 14px rgba(255,215,0,.7), 0 1px 0 rgba(255,255,255,.5);
}

/* Section title — em cyan→pink illisible sur fond paper light */
[data-theme="annees80"][data-mode="light"] .section-title em {
  background: linear-gradient(90deg, #ff007a, #6b1071);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Service icon en light — cyan sur paper rose pâle = peu de punch */
[data-theme="annees80"][data-mode="light"] .service-icon { color: var(--accent); filter: drop-shadow(0 0 8px var(--accent)); }

/* Reviews — quote cyan sur paper rose était limite */
[data-theme="annees80"][data-mode="light"] .rev-quote { color: var(--accent); }
[data-theme="annees80"][data-mode="light"] .rev-card p { color: #1a0233; }

/* Btn-ghost — cyan sur fond pink hero était illisible */
[data-theme="annees80"][data-mode="light"] .btn-ghost {
  background: rgba(255,0,122,.08);
  color: var(--accent);
  border-color: var(--accent);
}

/* Trio badge — texte foncé sur fond jaune */
[data-theme="annees80"][data-mode="light"] .hero-themes__label { color: #1a0233; }
[data-theme="annees80"][data-mode="light"] .hero-themes__label em { color: var(--accent); }

/* Champs de formulaire — en mode "light" (sombre fond contact) on a un fond foncé */
[data-theme="annees80"] .field input,
[data-theme="annees80"] .field select,
[data-theme="annees80"] .field textarea { color: #fff; background: rgba(0,0,0,.35); border-color: rgba(255,215,0,.4); }
[data-theme="annees80"] .field input::placeholder,
[data-theme="annees80"] .field textarea::placeholder { color: rgba(255,255,255,.6); }
[data-theme="annees80"] .field label { color: rgba(255,255,255,.85); }

/* ────────────────────────────────────────────
   80s — sections à fond magenta/pink (CONTACT, hero dark…)
   Les <em> en gradient pink→cyan disparaissaient sur le
   fond pink/magenta. On force gold + glow pour qu'ils
   ressortent franchement quel que soit le fond.
   ──────────────────────────────────────────── */
[data-theme="annees80"] .contact .section-title,
[data-theme="annees80"] .premium .section-title {
  color: #fff;
  text-shadow: 0 0 24px rgba(255,0,122,.55), 0 2px 0 rgba(0,0,0,.25);
}
[data-theme="annees80"] .contact .section-title em,
[data-theme="annees80"] .premium .section-title em {
  background: linear-gradient(90deg, #ffd700 0%, #00f0ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 30px rgba(255,215,0,.55);
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.3));
}
[data-theme="annees80"] .contact .kicker,
[data-theme="annees80"] .contact .kicker-light {
  color: #ffd700;
  text-shadow: 0 0 12px rgba(255,215,0,.6);
}
[data-theme="annees80"] .contact .hero-lead,
[data-theme="annees80"] .contact p,
[data-theme="annees80"] .contact .lead { color: rgba(255,255,255,.95); }
[data-theme="annees80"] .contact .ci-label { color: #00f0ff; text-shadow: 0 0 8px rgba(0,240,255,.5); letter-spacing: .18em; }

/* Champs en sombre — texte ivoire bien lisible */
[data-theme="annees80"] .contact .field input,
[data-theme="annees80"] .contact .field select,
[data-theme="annees80"] .contact .field textarea { color: #fff; }
[data-theme="annees80"] .contact .field label { color: rgba(255,255,255,.95); letter-spacing: .14em; }

/* About / autres sections — corriger les paragraphes en mode light
   qui prenaient un brun foncé peu visible sur fond pink */
[data-theme="annees80"][data-mode="light"] .about-text p,
[data-theme="annees80"][data-mode="light"] .about-text .lead,
[data-theme="annees80"][data-mode="light"] .section-head p { color: #2b0a4d; }
[data-theme="annees80"][data-mode="light"] .about-quote p { color: #1a0233; }

/* Reviews / témoignages en light — texte foncé contrasté */
[data-theme="annees80"][data-mode="light"] .rev-author { color: #1a0233; font-weight: 700; }
[data-theme="annees80"][data-mode="light"] .rev-author small { color: #8e3a8e; }