/*
  QM Analytics — Thèmes de page
  Surcharges de couleurs + hero, activées par une classe sur <body>.
  À charger APRÈS le design system et les CSS de page.
  ============================================
*/

/* ═══ HERO VILLES — structure commune ═══════ */
.theme-paris #hero,
.theme-lyon #hero,
.theme-bordeaux #hero,
.theme-strasbourg #hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.theme-paris .flag-bg,
.theme-paris .flag-rays,
.theme-paris .flag-tri,
.theme-paris .flag-overlay,
.theme-lyon .flag-bg,
.theme-lyon .flag-rays,
.theme-lyon .flag-tri,
.theme-lyon .flag-overlay,
.theme-bordeaux .flag-bg,
.theme-bordeaux .flag-rays,
.theme-bordeaux .flag-tri,
.theme-bordeaux .flag-overlay,
.theme-strasbourg .flag-bg,
.theme-strasbourg .flag-rays,
.theme-strasbourg .flag-tri,
.theme-strasbourg .flag-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.theme-paris .flag-tri,
.theme-lyon .flag-tri,
.theme-bordeaux .flag-tri,
.theme-strasbourg .flag-tri {
  display: none;
}
.theme-paris .hero-cnt,
.theme-lyon .hero-cnt,
.theme-bordeaux .hero-cnt,
.theme-strasbourg .hero-cnt {
  position: relative;
  z-index: 10;
}
.theme-paris .flag-overlay,
.theme-lyon .flag-overlay,
.theme-bordeaux .flag-overlay,
.theme-strasbourg .flag-overlay {
  z-index: 2;
}
.theme-paris .flag-bg,
.theme-lyon .flag-bg,
.theme-bordeaux .flag-bg,
.theme-strasbourg .flag-bg {
  z-index: 0;
}

@keyframes bgShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ═══ PARIS — Bleu Haussmannien ═════════════ */
.theme-paris {
  --clr-primary:      #2d4a7a;
  --clr-primary-dark: #1a2a4a;
  --clr-accent:       #4a7abd;
  --clr-darker:       #0d1829;
  --clr-dark:         #111d33;
}
.theme-paris #hero { background: #0d1829; }
.theme-paris .flag-bg {
  background: linear-gradient(160deg, #0b1525 0%, #152238 35%, #1e3560 65%, #0f1f3a 100%);
}
.theme-paris .flag-rays {
  z-index: 1;
  background: radial-gradient(ellipse 55% 65% at 50% 20%, rgba(74, 122, 189, 0.22) 0%, transparent 70%);
  animation: drift 20s ease-in-out infinite alternate;
  will-change: transform;
}
.theme-paris .flag-overlay { background: rgba(10, 18, 35, 0.30); }

@keyframes drift {
  0%   { transform: translate(-12%, -8%) scale(1.0); }
  40%  { transform: translate(8%, 6%)    scale(1.18); }
  100% { transform: translate(14%, -4%)  scale(0.92); }
}

/* ═══ LYON — Rouge Cardinal ═════════════════ */
.theme-lyon {
  --clr-primary:      #7a1a1a;
  --clr-primary-dark: #4a0f0f;
  --clr-accent:       #c0392b;
  --clr-darker:       #1a0404;
  --clr-dark:         #2a0808;
}
.theme-lyon #hero { background: #1a0404; }
.theme-lyon .flag-bg {
  background: linear-gradient(-45deg, #1a0404, #4a0f0f, #7a1a1a, #5a1010, #1a0404);
  background-size: 400% 400%;
  animation: bgShift 14s ease infinite;
}
.theme-lyon .flag-rays { display: none; }
.theme-lyon .flag-overlay { background: rgba(20, 4, 4, 0.30); }

/* ═══ BORDEAUX — Rive Gauche ════════════════ */
.theme-bordeaux {
  --clr-primary:      #7a2040;
  --clr-primary-dark: #4a1a2d;
  --clr-accent:       #c44d70;
  --clr-darker:       #1a0810;
  --clr-dark:         #2d0f1a;
  --local-intro-bg:   rgba(122, 32, 64, 0.05);
}
.theme-bordeaux #hero { background: #1a0810; }
.theme-bordeaux .flag-bg {
  background: linear-gradient(-45deg, #1a0810, #4a1a2d, #7a2040, #3d1228, #1a0810);
  background-size: 400% 400%;
  animation: bgShift 16s ease infinite;
}
.theme-bordeaux .flag-rays {
  z-index: 1;
  background:
    radial-gradient(ellipse 320px 480px at 50% -5%, rgba(196, 77, 112, 0.16) 0%, transparent 60%),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 80px,
      rgba(196, 77, 112, 0.02) 80px,
      rgba(196, 77, 112, 0.02) 81px
    );
}
.theme-bordeaux .flag-overlay { background: rgba(20, 5, 12, 0.35); }

/* ═══ STRASBOURG — Bleu Ciel Alsace / Rhin ══ */
.theme-strasbourg {
  --clr-primary:      #1a5fa8;
  --clr-primary-dark: #0f3d6e;
  --clr-accent:       #4a9fd4;
  --clr-darker:       #081828;
  --clr-dark:         #0d2438;
}
.theme-strasbourg #hero { background: #081828; }
.theme-strasbourg .flag-bg {
  background: linear-gradient(-45deg, #081828, #0f3d6e, #1a5fa8, #2d7fc0, #081828);
  background-size: 400% 400%;
  animation: bgShift 14s ease infinite;
}
.theme-strasbourg .flag-rays {
  z-index: 1;
  background: radial-gradient(ellipse 320px 480px at 50% -2%, rgba(74, 159, 212, 0.22) 0%, transparent 65%);
}
.theme-strasbourg .flag-overlay { background: rgba(5, 15, 35, 0.30); }

/* ═══ THÈMES PAGES SERVICES ═════════════════ */
.svc-tracking {
  --svc-accent:       #16a34a;
  --svc-accent-dark:  #052e16;
  --svc-accent-light: #4ade80;
}
.svc-attribution {
  --svc-accent:       #2563eb;
  --svc-accent-dark:  #1e3a8a;
  --svc-accent-light: #60a5fa;
}
.svc-reporting {
  --svc-accent:       #9333ea;
  --svc-accent-dark:  #4a1d96;
  --svc-accent-light: #c084fc;
}
.svc-mobile {
  --svc-accent:       #ea580c;
  --svc-accent-dark:  #7c2d12;
  --svc-accent-light: #fb923c;
}

/* ── Accessibilité ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .flag-bg,
  .flag-rays {
    animation: none;
  }
}