/* ============================================================
   THEME — FUTURISTE
   Dark-tech, cyan/violet glow, lignes de circuit, typographies
   Orbitron + Space Grotesk, accents holographiques.
   ============================================================ */

[data-theme="futuriste"][data-mode="dark"] {
  --bg: #050912;
  --paper: #0c1220;
  --text: #eaf6ff;
  --muted: #7e8aa3;
  --line: rgba(120,200,255,.12);
  --accent: #00e5ff;
  --accent-2: #b388ff;
  --accent-3: #00ffa3;
  --shadow: 0 0 60px -10px rgba(0,229,255,.45);
}

[data-theme="futuriste"][data-mode="light"] {
  --bg: #e6eef8;
  --paper: #ffffff;
  --text: #0a1220;
  --muted: #4d5a73;
  --line: rgba(10,18,32,.10);
  --accent: #0066ff;
  --accent-2: #7c3aed;
  --accent-3: #00b377;
  --shadow: 0 30px 60px -30px rgba(0,102,255,.4);
}

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

[data-theme="futuriste"] .section-title,
[data-theme="futuriste"] .hero-title,
[data-theme="futuriste"] .opt-num,
[data-theme="futuriste"] .stat-num,
[data-theme="futuriste"] .sim-result-value,
[data-theme="futuriste"] .ba-spec strong,
[data-theme="futuriste"] .tip-step,
[data-theme="futuriste"] .val-num,
[data-theme="futuriste"] .brand-name {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  letter-spacing: 0;
}

[data-theme="futuriste"] .hero-title {
  font-size: clamp(2.6rem, 7vw, 6rem);
  line-height: 1.05;
  color: var(--text);
  text-shadow: none;
}
[data-theme="futuriste"] .hero-title .line {
  color: var(--text);
  text-shadow: none;
}
[data-theme="futuriste"][data-mode="dark"] .hero-title .line {
  text-shadow: 0 0 24px rgba(0,229,255,.25);
}
[data-theme="futuriste"] .hero-title .italic {
  font-style: normal;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 24px rgba(0,229,255,.45));
}
[data-theme="futuriste"] .hero-title .emphasis {
  color: var(--accent);
  text-shadow: 0 0 24px rgba(0,229,255,.6);
}
[data-theme="futuriste"][data-mode="light"] .hero-title .emphasis {
  text-shadow: 0 0 18px rgba(0,102,255,.35);
}
[data-theme="futuriste"] .section-title em {
  color: var(--accent);
  font-style: normal;
  text-shadow: 0 0 18px rgba(0,229,255,.5);
}

[data-theme="futuriste"] .kicker {
  font-family: 'Major Mono Display', monospace;
  letter-spacing: .3em;
  font-size: .8rem;
  color: var(--accent);
}

[data-theme="futuriste"] .brand-name {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .15em;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
[data-theme="futuriste"] .brand-sub {
  font-family: 'Major Mono Display', monospace;
  font-size: .65rem;
  letter-spacing: .2em;
  color: var(--accent-3);
}
[data-theme="futuriste"] .brand-mark {
  color: var(--accent);
  filter: drop-shadow(0 0 8px var(--accent));
}

/* Hero — circuit grid */
[data-theme="futuriste"] body { background: var(--bg); }
[data-theme="futuriste"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% -20%, rgba(0,229,255,.18), transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(179,136,255,.12), transparent 45%),
    radial-gradient(circle at 100% 100%, rgba(0,255,163,.1), transparent 40%);
}
[data-theme="futuriste"] body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(0,229,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,.04) 1px, transparent 1px);
  background-size: 60px 60px;
}
[data-theme="futuriste"][data-mode="light"] body::after {
  background-image:
    linear-gradient(rgba(0,102,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,102,255,.06) 1px, transparent 1px);
}

[data-theme="futuriste"] .hero-bg { color: var(--accent); opacity: .35; mix-blend-mode: screen; }
[data-theme="futuriste"] .hero-bg .pipe-network path { stroke-width: 2; }

[data-theme="futuriste"] .hero {
  position: relative;
}
[data-theme="futuriste"] .hero::before {
  content: '';
  position: absolute;
  top: 14%; right: 8%;
  width: 320px; height: 320px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  box-shadow:
    inset 0 0 60px rgba(0,229,255,.2),
    0 0 60px rgba(0,229,255,.3);
  animation: scanRing 12s linear infinite;
  z-index: -1;
}
[data-theme="futuriste"] .hero::after {
  content: '';
  position: absolute;
  top: 20%; right: 14%;
  width: 220px; height: 220px;
  border: 1px dashed var(--accent-2);
  border-radius: 50%;
  animation: scanRing 18s linear infinite reverse;
  z-index: -1;
}
@keyframes scanRing { to { transform: rotate(360deg); } }

[data-theme="futuriste"] .hero-eyebrow,
[data-theme="futuriste"] .hero-lead { color: var(--muted); }
[data-theme="futuriste"] .hero-eyebrow { font-family: 'Major Mono Display', monospace; }

[data-theme="futuriste"] .stat-num {
  color: var(--accent);
  text-shadow: 0 0 14px rgba(0,229,255,.5);
}

/* Buttons */
[data-theme="futuriste"] .btn {
  font-family: 'Space Grotesk', sans-serif;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .8rem;
}
[data-theme="futuriste"] .btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #050912;
  border: 1px solid var(--accent);
  box-shadow: 0 0 30px rgba(0,229,255,.5), inset 0 0 12px rgba(255,255,255,.2);
}
[data-theme="futuriste"] .btn-primary:hover {
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  color: #fff;
  box-shadow: 0 0 50px rgba(179,136,255,.7);
}
[data-theme="futuriste"] .btn-ghost {
  background: rgba(0,229,255,.05);
  color: var(--accent);
  border-color: var(--accent);
}
[data-theme="futuriste"] .btn-ghost:hover { box-shadow: 0 0 20px rgba(0,229,255,.4); }

/* Header & nav */
[data-theme="futuriste"] .site-header {
  background: rgba(10,18,32,.7);
  border-bottom: 1px solid var(--accent);
  box-shadow: 0 0 40px rgba(0,229,255,.15);
  backdrop-filter: blur(16px);
}
[data-theme="futuriste"][data-mode="light"] .site-header {
  background: rgba(255,255,255,.85);
}
[data-theme="futuriste"] .site-nav a {
  font-family: 'Major Mono Display', monospace;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .15em;
}
[data-theme="futuriste"] .site-nav a.nav-cta {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #050912;
  box-shadow: 0 0 16px rgba(0,229,255,.5);
}

/* Theme switch */
[data-theme="futuriste"] .theme-switch {
  background: rgba(0,229,255,.05);
  border: 1px solid var(--accent);
  box-shadow: 0 0 12px rgba(0,229,255,.2);
}
[data-theme="futuriste"] .theme-btn { font-family: 'Major Mono Display', monospace; }
[data-theme="futuriste"] .theme-btn.is-active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #050912;
}

/* Social rail & ctrls — pastilles néon bien visibles sur fond clair */
[data-theme="futuriste"] .social-rail {
  background: transparent;
  border: 0;
  box-shadow: none;
}
[data-theme="futuriste"] .social-link {
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border: 1.5px solid var(--accent);
  box-shadow:
    0 0 0 3px rgba(0,229,255,.15),
    0 6px 20px rgba(0,229,255,.45),
    inset 0 0 12px rgba(255,255,255,.25);
}
[data-theme="futuriste"][data-mode="light"] .social-link {
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: var(--accent);
  box-shadow:
    0 0 0 3px rgba(0,102,255,.18),
    0 8px 24px rgba(0,102,255,.45),
    inset 0 0 12px rgba(255,255,255,.35);
}
[data-theme="futuriste"] .social-link svg {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
[data-theme="futuriste"] .social-link:hover {
  color: #fff;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  box-shadow:
    0 0 0 4px rgba(179,136,255,.25),
    0 10px 28px rgba(179,136,255,.6),
    inset 0 0 14px rgba(255,255,255,.35);
  filter: drop-shadow(0 0 14px var(--accent)) drop-shadow(0 0 4px var(--accent-2));
}
[data-theme="futuriste"] .social-tag { font-family: 'Major Mono Display', monospace; color: var(--accent-2); }
[data-theme="futuriste"] .ctrl-btn {
  background: var(--paper);
  color: var(--accent);
  border: 1px solid var(--accent);
  box-shadow: 0 0 16px rgba(0,229,255,.3);
}
[data-theme="futuriste"] .ctrl-btn:hover {
  background: var(--accent);
  color: #050912;
  box-shadow: 0 0 24px rgba(0,229,255,.7);
}

/* About */
[data-theme="futuriste"] .about, [data-theme="futuriste"] .advice, [data-theme="futuriste"] .site-footer {
  background: var(--paper);
}
[data-theme="futuriste"] .portrait-frame {
  background: linear-gradient(135deg, rgba(0,229,255,.2), rgba(179,136,255,.2));
  border: 1px solid var(--accent);
  box-shadow: 0 0 40px rgba(0,229,255,.3);
  transform: rotate(0);
}
[data-theme="futuriste"] .portrait-bg { fill: rgba(0,229,255,.15); }
[data-theme="futuriste"] .portrait-stroke path, [data-theme="futuriste"] .portrait-stroke circle { stroke: var(--accent); }
[data-theme="futuriste"] .portrait-tag {
  background: var(--accent);
  color: #050912;
  font-family: 'Major Mono Display', monospace;
  font-size: .75rem;
}
[data-theme="futuriste"] .portrait-caption { font-family: 'Major Mono Display', monospace; font-size: .9rem; color: var(--accent-2); letter-spacing: .15em; }
[data-theme="futuriste"] .badge { background: rgba(0,229,255,.1); color: var(--accent); border: 1px solid var(--accent); }

/* Services */
[data-theme="futuriste"] .services-grid {
  background: var(--accent);
  border: 1px solid var(--accent);
  box-shadow: 0 0 40px rgba(0,229,255,.15);
}
[data-theme="futuriste"] .service-card { background: var(--paper); }
[data-theme="futuriste"] .service-card::before { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
[data-theme="futuriste"] .service-card h3 { font-family: 'Orbitron', sans-serif; font-size: 1.2rem; text-transform: uppercase; letter-spacing: .04em; }
[data-theme="futuriste"] .service-icon { color: var(--accent); filter: drop-shadow(0 0 10px var(--accent)); }
[data-theme="futuriste"] .service-card:hover { color: #050912; }
[data-theme="futuriste"] .service-card:hover h3 { color: #050912; text-shadow: none; }
[data-theme="futuriste"] .service-card:hover .service-icon { color: #050912; filter: none; }

/* Premium */
[data-theme="futuriste"] .premium {
  background: linear-gradient(135deg, #050912 0%, #0c1d3a 100%);
}
[data-theme="futuriste"] .premium::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,229,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,.08) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 70%);
          mask-image: radial-gradient(ellipse at center, #000 30%, transparent 70%);
}
[data-theme="futuriste"] .opt-card {
  background: rgba(0,229,255,.04);
  border: 1px solid rgba(0,229,255,.2);
  border-radius: 4px;
  position: relative;
}
[data-theme="futuriste"] .opt-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 24px; height: 1px; background: var(--accent);
}
[data-theme="futuriste"] .opt-card:hover {
  background: rgba(0,229,255,.08);
  border-color: var(--accent);
  box-shadow: 0 0 30px rgba(0,229,255,.4);
}
[data-theme="futuriste"] .opt-num {
  font-family: 'Major Mono Display', monospace;
  color: var(--accent);
  font-size: 2rem;
}
[data-theme="futuriste"] .opt-card h3 {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
[data-theme="futuriste"] .opt-card::after {
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  color: #050912;
  font-family: 'Orbitron', sans-serif;
  text-transform: uppercase;
  border-radius: 4px;
  box-shadow: 0 0 30px rgba(0,229,255,.6);
}

/* BA / advice / reviews */
[data-theme="futuriste"] .ba-knob { background: var(--accent); color: #050912; box-shadow: 0 0 24px var(--accent); }
[data-theme="futuriste"] .ba-line, [data-theme="futuriste"] .ba-handle { background: var(--accent); box-shadow: 0 0 12px var(--accent); }
[data-theme="futuriste"] .ba-spec strong { font-family: 'Orbitron', sans-serif; font-size: 1.4rem; color: var(--accent); }

[data-theme="futuriste"] .advice-sim {
  background: linear-gradient(135deg, #0c1d3a, #1a0a3a);
  border: 1px solid var(--accent);
  box-shadow: 0 0 40px rgba(0,229,255,.3);
}
[data-theme="futuriste"] .advice-sim h3 { font-family: 'Orbitron', sans-serif; font-size: 1.4rem; color: var(--accent); }
[data-theme="futuriste"] .sim-result-value { color: var(--accent); text-shadow: 0 0 18px rgba(0,229,255,.5); }
[data-theme="futuriste"] .sim-toggle button.is-active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #050912;
}

[data-theme="futuriste"] .rev-card {
  background: var(--paper);
  border: 1px solid rgba(0,229,255,.2);
  border-radius: 4px;
}
[data-theme="futuriste"] .rev-card:hover {
  border-color: var(--accent);
  box-shadow: 0 0 24px rgba(0,229,255,.3);
}
[data-theme="futuriste"] .rev-card p { font-family: 'Space Grotesk', sans-serif; font-style: normal; }
[data-theme="futuriste"] .rev-quote { color: var(--accent); }

/* Contact */
[data-theme="futuriste"] .contact {
  background:
    linear-gradient(135deg, #050912 0%, #0c1d3a 50%, #1a0a3a 100%);
}
[data-theme="futuriste"] .contact::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,229,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,.08) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 80%);
          mask-image: radial-gradient(ellipse at center, #000 40%, transparent 80%);
}
[data-theme="futuriste"] .contact-form {
  background: rgba(0,229,255,.04);
  border: 1px solid var(--accent);
  box-shadow: 0 0 40px rgba(0,229,255,.2);
  border-radius: 6px;
}
[data-theme="futuriste"] .ci-value {
  font-family: 'Orbitron', sans-serif;
  font-size: 1rem;
  color: var(--accent);
}
[data-theme="futuriste"] .field input,
[data-theme="futuriste"] .field select,
[data-theme="futuriste"] .field textarea { font-family: 'Orbitron', sans-serif; font-size: .95rem; letter-spacing: .04em; }

/* Footer */
[data-theme="futuriste"] .site-footer { border-top: 1px solid var(--accent); box-shadow: 0 -10px 40px -20px rgba(0,229,255,.4); }
[data-theme="futuriste"] .foot-mark { color: var(--accent); filter: drop-shadow(0 0 8px var(--accent)); }
[data-theme="futuriste"] .foot-tag { font-family: 'Orbitron', sans-serif; font-size: .9rem; }
[data-theme="futuriste"] .foot-grid ul a { font-family: 'Major Mono Display', monospace; text-transform: uppercase; font-size: .8rem; letter-spacing: .15em; }

[data-theme="futuriste"] .reviews { background: var(--bg); }
[data-theme="futuriste"] .ba { background: var(--bg); }

/* ════════════════════════════════════════════════════════════════
   METHODE — palette futuriste lisible
   On surcharge les overrides "craie-ocre" de plaquiste.css pour
   que la timeline 6 étapes respecte le code cyan/violet et reste
   parfaitement lisible en light comme en dark.
   ════════════════════════════════════════════════════════════════ */

/* Fond + halos repensés pour le thème */
[data-theme="futuriste"] .methode { background: var(--paper); }
[data-theme="futuriste"] .methode::before {
  background: radial-gradient(circle, rgba(0,229,255,.18), transparent 65%);
}
[data-theme="futuriste"] .methode::after {
  background: radial-gradient(circle, rgba(179,136,255,.16), transparent 65%);
}

/* Light mode — texte sombre sur paper blanc, accents néon */
[data-theme="futuriste"][data-mode="light"] .methode .section-title {
  color: var(--text) !important;
  text-shadow: none;
}
[data-theme="futuriste"][data-mode="light"] .methode .section-title em {
  color: var(--accent) !important;
  text-shadow: 0 0 18px rgba(0,102,255,.35);
}
[data-theme="futuriste"][data-mode="light"] .methode .kicker {
  color: var(--accent-2) !important;
}
[data-theme="futuriste"][data-mode="light"] .methode .section-sub {
  color: var(--muted) !important;
}
[data-theme="futuriste"][data-mode="light"] .methode__body h3 {
  color: var(--text) !important;
}
[data-theme="futuriste"][data-mode="light"] .methode__body p {
  color: #2a364d !important;
}
[data-theme="futuriste"][data-mode="light"] .methode__body p strong {
  color: var(--accent) !important;
}

/* Dark mode — texte clair sur paper sombre */
[data-theme="futuriste"][data-mode="dark"] .methode .section-title {
  color: #eaf6ff !important;
  text-shadow: 0 0 24px rgba(0,229,255,.25);
}
[data-theme="futuriste"][data-mode="dark"] .methode .section-title em {
  color: var(--accent) !important;
  text-shadow: 0 0 24px rgba(0,229,255,.6);
}
[data-theme="futuriste"][data-mode="dark"] .methode .kicker {
  color: var(--accent-2) !important;
}
[data-theme="futuriste"][data-mode="dark"] .methode .section-sub {
  color: rgba(234,246,255,.78) !important;
}
[data-theme="futuriste"][data-mode="dark"] .methode__body h3 {
  color: #eaf6ff !important;
  font-family: 'Orbitron', sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 1.05rem;
}
[data-theme="futuriste"][data-mode="dark"] .methode__body p {
  color: rgba(234,246,255,.72) !important;
}
[data-theme="futuriste"][data-mode="dark"] .methode__body p strong {
  color: var(--accent) !important;
  text-shadow: 0 0 12px rgba(0,229,255,.4);
}

/* H3 en light mode aussi en Orbitron caps pour cohérence visuelle */
[data-theme="futuriste"][data-mode="light"] .methode__body h3 {
  font-family: 'Orbitron', sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 1.05rem;
}

/* Numéros et trait vertical : couleurs néon cohérentes */
[data-theme="futuriste"] .methode__list::before {
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 50%, var(--accent-3) 100%);
  opacity: .55;
  box-shadow: 0 0 16px rgba(0,229,255,.4);
}
[data-theme="futuriste"] .methode__step .methode__number {
  background: var(--paper) !important;
  color: var(--accent) !important;
  border: 1px solid var(--accent) !important;
  box-shadow: 0 0 16px rgba(0,229,255,.35);
  font-family: 'Orbitron', sans-serif;
}
[data-theme="futuriste"] .methode__step:nth-child(2n) .methode__number {
  color: var(--accent-2) !important;
  border-color: var(--accent-2) !important;
  box-shadow: 0 0 16px rgba(179,136,255,.4);
}
[data-theme="futuriste"] .methode__step:nth-child(3n) .methode__number {
  color: var(--accent-3) !important;
  border-color: var(--accent-3) !important;
  box-shadow: 0 0 16px rgba(0,255,163,.35);
}
[data-theme="futuriste"] .methode__icon {
  color: var(--accent) !important;
  filter: drop-shadow(0 0 8px var(--accent));
}
[data-theme="futuriste"] .methode__step:nth-child(2n) .methode__icon {
  color: var(--accent-2) !important;
  filter: drop-shadow(0 0 8px var(--accent-2));
}
[data-theme="futuriste"] .methode__step:nth-child(3n) .methode__icon {
  color: var(--accent-3) !important;
  filter: drop-shadow(0 0 8px var(--accent-3));
}

/* ════════════════════════════════════════════════════════════════
   COSMOS — décor de fond futuriste (inspiré atelier-calade)
   Saturne en focal + nébuleuses + galaxie + champs d'étoiles +
   comètes + orbites + aurora + horizon holographique.
   N'apparaît que pour [data-theme="futuriste"].
   ════════════════════════════════════════════════════════════════ */
.cosmos { display: none; }

[data-theme="futuriste"] .cosmos {
  display: block;
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
[data-theme="futuriste"] .cosmos > * {
  position: absolute;
  pointer-events: none;
  will-change: transform, opacity;
}

/* ──────── NÉBULEUSES — gros voiles colorés diffus ──────── */
[data-theme="futuriste"] .cosmos__nebula {
  border-radius: 50%;
  filter: blur(60px);
  mix-blend-mode: screen;
}
[data-theme="futuriste"] .cosmos__nebula--1 {
  top: -10%; left: -8%;
  width: 760px; height: 760px;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(0,229,255,.35) 0%,
      rgba(0,160,220,.18) 30%,
      rgba(0,80,180,.08) 55%,
      transparent 75%);
  animation: nebulaDrift1 60s ease-in-out infinite alternate;
}
[data-theme="futuriste"] .cosmos__nebula--2 {
  bottom: -20%; right: -10%;
  width: 880px; height: 880px;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(179,136,255,.32) 0%,
      rgba(140,90,220,.18) 28%,
      rgba(80,40,140,.08) 55%,
      transparent 75%);
  animation: nebulaDrift2 75s ease-in-out infinite alternate;
}

/* ──────── GALAXIE — spirale lointaine, repeating-conic ──────── */
[data-theme="futuriste"] .cosmos__galaxy {
  top: 12%; left: 8%;
  width: 320px; height: 320px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255,255,255,.7) 0%,
      rgba(0,229,255,.5) 6%,
      rgba(179,136,255,.25) 18%,
      rgba(80,30,120,.12) 38%,
      transparent 65%),
    repeating-conic-gradient(from 0deg at 50% 50%,
      transparent 0deg 18deg,
      rgba(0,229,255,.08) 18deg 24deg,
      transparent 24deg 36deg);
  filter: blur(2px);
  opacity: .85;
  mix-blend-mode: screen;
  animation: galaxySpin 180s linear infinite;
}

/* ──────── SATURNE — planète focale en haut à droite ──────── */
[data-theme="futuriste"] .cosmos__saturn {
  top: 4%;
  right: -3%;
  width: clamp(280px, 32vw, 460px);
  height: clamp(280px, 32vw, 460px);
  animation: planetFloat 22s ease-in-out infinite;
}
[data-theme="futuriste"] .cosmos__saturn-body {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%,
      #d6f7ff 0%,
      #6df5ff 14%,
      #009ec2 38%,
      #064a7c 70%,
      #021428 100%);
  box-shadow:
    inset -28px -32px 70px rgba(2,12,32,.85),
    inset 18px 22px 50px rgba(214,247,255,.18),
    0 0 90px rgba(0,229,255,.35),
    0 0 200px rgba(0,229,255,.18);
  opacity: .92;
}
/* Anneau Saturne — bandes concentriques en ellipse inclinée */
[data-theme="futuriste"] .cosmos__saturn-ring {
  position: absolute;
  top: 42%;
  left: -28%;
  width: 156%;
  height: 30%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center,
      transparent 0 38%,
      rgba(0,229,255,.55) 38.5% 40%,
      transparent 41% 46%,
      rgba(179,136,255,.4) 46.5% 48.5%,
      transparent 49% 56%,
      rgba(0,229,255,.25) 56.5% 58%,
      transparent 60%);
  transform: rotate(-22deg);
  filter: drop-shadow(0 0 18px rgba(0,229,255,.4));
  animation: ringTilt 28s ease-in-out infinite;
  opacity: .9;
}
[data-theme="futuriste"] .cosmos__saturn-ring--2 {
  top: 38%;
  left: -32%;
  width: 164%;
  height: 36%;
  background:
    radial-gradient(ellipse at center,
      transparent 0 44%,
      rgba(0,255,163,.18) 44.5% 45.5%,
      transparent 46% 100%);
  transform: rotate(-24deg);
  animation: ringTilt 36s ease-in-out infinite reverse;
  opacity: .7;
}

/* ──────── PLANÈTES SECONDAIRES ──────── */
[data-theme="futuriste"] .cosmos__planet {
  border-radius: 50%;
}
[data-theme="futuriste"] .cosmos__planet--2 {
  bottom: 14%;
  left: -4%;
  width: 240px;
  height: 240px;
  background:
    radial-gradient(circle at 60% 32%,
      #c8a8ff 0%,
      #8a5ad6 18%,
      #4a1f8a 45%,
      #1a0a3a 75%,
      #0a0420 100%);
  box-shadow:
    inset -22px -22px 55px rgba(0,0,0,.7),
    inset 16px 16px 40px rgba(200,168,255,.2),
    0 0 80px rgba(179,136,255,.45),
    0 0 180px rgba(179,136,255,.2);
  animation: planetDrift2 46s ease-in-out infinite alternate;
}
[data-theme="futuriste"] .cosmos__planet--3 {
  top: 55%;
  right: 14%;
  width: 90px;
  height: 90px;
  background:
    radial-gradient(circle at 35% 28%,
      #b0f5d8 0%,
      #2dd6a3 22%,
      #0c805a 55%,
      #021a14 90%);
  box-shadow:
    inset -10px -10px 24px rgba(0,0,0,.6),
    inset 8px 8px 18px rgba(176,245,216,.25),
    0 0 50px rgba(0,255,163,.55),
    0 0 110px rgba(0,255,163,.22);
  animation: planetDrift3 26s ease-in-out infinite alternate,
             planetPulse 6s ease-in-out infinite .5s;
}

/* ──────── ORBITES — cercles fins qui tournent ──────── */
[data-theme="futuriste"] .cosmos__orbit {
  border-radius: 50%;
  border: 1px dashed rgba(0,229,255,.18);
  box-shadow: 0 0 30px rgba(0,229,255,.08), inset 0 0 30px rgba(0,229,255,.05);
}
[data-theme="futuriste"] .cosmos__orbit--1 {
  top: 30%; left: 35%;
  width: 480px; height: 480px;
  transform: translate(-50%, -50%) rotate(0deg);
  border-color: rgba(0,229,255,.15);
  animation: orbitSpin 120s linear infinite;
}
[data-theme="futuriste"] .cosmos__orbit--2 {
  bottom: 18%; right: 22%;
  width: 360px; height: 360px;
  transform: rotate(0deg);
  border-style: dotted;
  border-color: rgba(179,136,255,.18);
  animation: orbitSpin 90s linear infinite reverse;
}
/* Petit satellite qui suit l'orbite 1 */
[data-theme="futuriste"] .cosmos__orbit--1::before {
  content: '';
  position: absolute;
  top: -4px; left: 50%;
  width: 8px; height: 8px;
  margin-left: -4px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 14px var(--accent), 0 0 28px var(--accent);
}

/* ──────── ÉTOILES — box-shadow trick ──────── */
[data-theme="futuriste"] .cosmos__stars {
  top: 0; left: 0;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: transparent;
  box-shadow:
    120px 240px #fff,
    340px 80px rgba(0,229,255,.85),
    520px 600px #fff,
    700px 180px rgba(179,136,255,.9),
    880px 520px #fff,
    220px 720px rgba(0,255,163,.8),
    1080px 340px #fff,
    1260px 80px rgba(0,229,255,.75),
    160px 460px #fff,
    1400px 600px rgba(179,136,255,.8),
    600px 360px #fff,
    980px 720px #fff,
    420px 140px rgba(0,229,255,.75),
    1180px 480px rgba(0,255,163,.75),
    760px 60px #fff,
    1320px 240px #fff,
    80px 580px #fff,
    480px 800px rgba(0,229,255,.85),
    920px 80px #fff,
    1500px 360px #fff,
    240px 140px #fff,
    640px 540px rgba(179,136,255,.7),
    1140px 140px #fff,
    1480px 740px rgba(0,229,255,.7),
    340px 660px #fff;
  animation: twinkle 3.5s ease-in-out infinite;
}
[data-theme="futuriste"] .cosmos__stars--small {
  width: 1px; height: 1px;
  box-shadow:
    50px 100px #fff, 250px 50px #fff, 450px 200px rgba(0,229,255,.7),
    650px 380px #fff, 850px 100px #fff, 1050px 250px rgba(179,136,255,.7),
    1250px 480px #fff, 1450px 50px #fff, 100px 320px rgba(0,255,163,.6),
    300px 580px #fff, 500px 680px #fff, 700px 760px rgba(0,229,255,.6),
    900px 600px #fff, 1100px 800px #fff, 1300px 700px #fff,
    180px 200px #fff, 380px 760px rgba(179,136,255,.65), 580px 480px #fff,
    780px 280px #fff, 1180px 60px #fff, 1380px 380px #fff,
    60px 700px #fff, 280px 380px rgba(0,229,255,.65), 540px 60px #fff,
    820px 460px #fff, 1080px 580px #fff, 1240px 280px rgba(0,255,163,.6),
    140px 880px #fff, 360px 220px #fff, 580px 880px rgba(0,229,255,.6),
    800px 880px #fff, 1020px 880px #fff, 1320px 880px rgba(179,136,255,.55);
  animation: twinkle 4.8s ease-in-out infinite .8s;
}
[data-theme="futuriste"] .cosmos__stars--xs {
  width: 1px; height: 1px;
  box-shadow:
    30px 30px rgba(255,255,255,.6), 150px 320px rgba(255,255,255,.5),
    270px 580px rgba(0,229,255,.5), 390px 70px rgba(255,255,255,.5),
    510px 250px rgba(255,255,255,.6), 630px 600px rgba(255,255,255,.5),
    750px 90px rgba(179,136,255,.5), 870px 380px rgba(255,255,255,.6),
    990px 640px rgba(255,255,255,.5), 1110px 130px rgba(0,255,163,.45),
    1230px 380px rgba(255,255,255,.5), 1350px 660px rgba(255,255,255,.55),
    1470px 220px rgba(255,255,255,.5), 90px 470px rgba(0,229,255,.45),
    210px 740px rgba(255,255,255,.55), 330px 870px rgba(255,255,255,.5),
    450px 470px rgba(255,255,255,.5), 570px 770px rgba(179,136,255,.5),
    690px 870px rgba(255,255,255,.55), 810px 540px rgba(255,255,255,.5),
    930px 230px rgba(255,255,255,.55), 1050px 770px rgba(0,229,255,.5),
    1170px 870px rgba(255,255,255,.5), 1290px 530px rgba(255,255,255,.5),
    1410px 100px rgba(255,255,255,.55), 1530px 540px rgba(0,255,163,.45);
  animation: twinkle 6.5s ease-in-out infinite 1.4s;
}

/* ──────── COMÈTES / ÉTOILES FILANTES ──────── */
[data-theme="futuriste"] .cosmos__shooting {
  top: 18%;
  left: -10%;
  width: 160px;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(0,229,255,.95), #fff);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(0,229,255,.85), 0 0 22px rgba(0,229,255,.5);
  transform: rotate(18deg);
  opacity: 0;
  animation: shootingStar 11s ease-in infinite;
}
[data-theme="futuriste"] .cosmos__shooting--2 {
  top: 60%;
  width: 120px;
  background: linear-gradient(90deg, transparent, rgba(179,136,255,.95), #fff);
  box-shadow: 0 0 10px rgba(179,136,255,.85), 0 0 22px rgba(179,136,255,.5);
  transform: rotate(8deg);
  animation: shootingStar 14s ease-in infinite 5s;
}
[data-theme="futuriste"] .cosmos__shooting--3 {
  top: 36%;
  width: 100px;
  background: linear-gradient(90deg, transparent, rgba(0,255,163,.9), #fff);
  box-shadow: 0 0 10px rgba(0,255,163,.7), 0 0 22px rgba(0,255,163,.4);
  transform: rotate(24deg);
  animation: shootingStar 17s ease-in infinite 9s;
}

/* ──────── AURORA — voile lumineux qui ondule en haut ──────── */
[data-theme="futuriste"] .cosmos__aurora {
  top: -10%;
  left: -5%;
  width: 110%;
  height: 50%;
  background:
    radial-gradient(ellipse at 30% 50%,
      rgba(0,229,255,.18), transparent 55%),
    radial-gradient(ellipse at 70% 50%,
      rgba(179,136,255,.16), transparent 55%),
    radial-gradient(ellipse at 50% 50%,
      rgba(0,255,163,.10), transparent 55%);
  filter: blur(40px);
  mix-blend-mode: screen;
  animation: auroraSweep 28s ease-in-out infinite alternate;
}

/* ──────── HORIZON — ligne holographique en bas ──────── */
[data-theme="futuriste"] .cosmos__horizon {
  bottom: 0; left: 0;
  width: 100%; height: 32%;
  background:
    /* sol grille perspective */
    linear-gradient(180deg,
      transparent 0%,
      rgba(0,229,255,.05) 60%,
      rgba(0,229,255,.18) 100%),
    /* ligne d'horizon brillante */
    linear-gradient(180deg,
      transparent 0%,
      transparent 35%,
      rgba(0,229,255,.4) 36%,
      rgba(0,229,255,.6) 36.4%,
      transparent 37%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 100%);
  opacity: .55;
  filter: blur(.3px);
}

@keyframes nebulaDrift1 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(60px, 30px) scale(1.08); }
}
@keyframes nebulaDrift2 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-50px, -40px) scale(1.1); }
}
@keyframes galaxySpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes planetFloat {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-14px, 22px); }
}
@keyframes ringTilt {
  0%, 100% { transform: rotate(-22deg) translate(0, 0); }
  50%      { transform: rotate(-19deg) translate(-12px, 18px); }
}
@keyframes planetDrift2 {
  from { transform: translate(0, 0) rotate(0deg); }
  to   { transform: translate(40px, -30px) rotate(-6deg); }
}
@keyframes planetDrift3 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-20px, 30px) scale(1.08); }
}
@keyframes planetPulse {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.18); }
}
@keyframes orbitSpin {
  to { transform: rotate(360deg); }
}
[data-theme="futuriste"] .cosmos__orbit--1 {
  animation-name: orbitSpinCentered;
}
@keyframes orbitSpinCentered {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes twinkle {
  0%, 100% { opacity: .9; }
  50%      { opacity: .35; }
}
@keyframes shootingStar {
  0%   { transform: translate(0, 0) rotate(18deg); opacity: 0; }
  3%   { opacity: 1; }
  10%  { transform: translate(120vw, 40vh) rotate(18deg); opacity: 0; }
  100% { transform: translate(120vw, 40vh) rotate(18deg); opacity: 0; }
}
@keyframes auroraSweep {
  0%   { transform: translateX(-3%) skewY(-1deg); opacity: .7; }
  50%  { transform: translateX(2%) skewY(1deg); opacity: 1; }
  100% { transform: translateX(-1%) skewY(-.5deg); opacity: .8; }
}

@media (prefers-reduced-motion: reduce) {
  [data-theme="futuriste"] .cosmos > * { animation: none !important; }
  [data-theme="futuriste"] .cosmos__shooting { display: none; }
}