/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS & STYLES DÉCORATIFS — Chargé en async (non-bloquant)
   Contient : keyframes, thèmes alternatifs (nature/scientific), 
   scrollbars stylisées, animations premium, effets hover, etc.
   ═══════════════════════════════════════════════════════════════ */

/* ═══ Scrollbar personnalisée ═══ */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: oklch(var(--background-100));
}

.dark ::-webkit-scrollbar-track {
  background: oklch(var(--background-900));
}

::-webkit-scrollbar-thumb {
  background: oklch(var(--primary-400));
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: oklch(var(--primary-600));
}

/* ═══ Scrollbar stylisée visible — VERTICAL ═══ */
.scrollbar-styled {
  scrollbar-width: auto;
  scrollbar-color: oklch(var(--background-300)) oklch(var(--background-900));
}

.scrollbar-styled::-webkit-scrollbar {
  width: 10px;
}

.scrollbar-styled::-webkit-scrollbar-track {
  background: oklch(var(--background-900));
  border-radius: 5px;
  border: 1px solid oklch(var(--background-700));
  margin: 4px 0;
}

.scrollbar-styled::-webkit-scrollbar-thumb {
  background-color: oklch(var(--foreground-300));
  border-radius: 5px;
  border: 2px solid oklch(var(--background-900));
  min-height: 48px;
}

.scrollbar-styled::-webkit-scrollbar-thumb:hover {
  background-color: oklch(var(--foreground-200));
}

.scrollbar-styled::-webkit-scrollbar-thumb:active {
  background-color: oklch(var(--foreground-100));
}

/* ═══ Scrollbar stylisée visible — HORIZONTAL ═══ */
.scrollbar-styled-x {
  scrollbar-width: auto;
  scrollbar-color: oklch(var(--background-300)) oklch(var(--background-900));
}

.scrollbar-styled-x::-webkit-scrollbar {
  height: 10px;
}

.scrollbar-styled-x::-webkit-scrollbar-track {
  background: oklch(var(--background-900));
  border-radius: 5px;
  border: 1px solid oklch(var(--background-700));
  margin: 0 4px;
}

.scrollbar-styled-x::-webkit-scrollbar-thumb {
  background-color: oklch(var(--foreground-300));
  border-radius: 5px;
  border: 2px solid oklch(var(--background-900));
  min-width: 48px;
}

.scrollbar-styled-x::-webkit-scrollbar-thumb:hover {
  background-color: oklch(var(--foreground-200));
}

.scrollbar-styled-x::-webkit-scrollbar-thumb:active {
  background-color: oklch(var(--foreground-100));
}

/* ═══ Animations personnalisées ═══ */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-ring {
  0% { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

.animate-fade-in { animation: fade-in 0.3s ease-out; }
.animate-slide-up { animation: slide-up 0.4s ease-out; }
.animate-pulse-ring { animation: pulse-ring 1.5s cubic-bezier(0, 0, 0.2, 1) infinite; }

/* ═══ Soundbar / Audio ═══ */
@keyframes soundbar {
  0%, 100% { height: 40%; }
  50% { height: 100%; }
}

@keyframes audioBar {
  0% { height: 3px; }
  100% { height: 9px; }
}

@keyframes eqBar {
  0% { height: 4px; }
  100% { height: 14px; }
}

.audio-bar { animation: audioBar 0.45s ease-in-out infinite alternate; height: 3px; }

/* ═══ Hide scrollbar ═══ */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* ═══ Scrollbar fine ═══ */
.scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.12) transparent;
}
.scrollbar-thin::-webkit-scrollbar { width: 5px; }
.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
.scrollbar-thin::-webkit-scrollbar-thumb {
  background-color: rgba(255,255,255,0.12);
  border-radius: 10px;
}
.scrollbar-thin::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,0.25); }
.scrollbar-thin::-webkit-scrollbar-thumb:active { background-color: rgba(255,255,255,0.35); }

/* ═══ Smooth scroll ═══ */
.scroll-smooth { scroll-behavior: smooth; }

/* ═══ News card hover ═══ */
.news-card-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.news-card-hover:hover { transform: translateY(-4px); }

/* ═══ Gradient text premium ═══ */
.gradient-text-premium {
  background: linear-gradient(135deg, oklch(var(--primary-500)) 0%, oklch(var(--primary-400)) 50%, oklch(var(--secondary-500)) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ═══ Toast / Badge animations ═══ */
@keyframes slide-in-right {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.animate-slide-in-right { animation: slide-in-right 0.3s ease-out; }

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.7); }
  50% { box-shadow: 0 0 0 10px rgba(251, 191, 36, 0); }
}
.animate-pulse-glow { animation: pulse-glow 2s infinite; }

@keyframes pulse-soft {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.02); }
}
@keyframes ping-soft {
  0% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.3); opacity: 0.4; }
  100% { transform: scale(1.6); opacity: 0; }
}
.animate-pulse-soft { animation: pulse-soft 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.animate-ping-soft { animation: ping-soft 2s cubic-bezier(0, 0, 0.2, 1) infinite; }

/* ═══ Skeleton ═══ */
@keyframes skeleton-loading {
  0% { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}
.skeleton {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0px, rgba(255, 255, 255, 0.1) 40px, rgba(255, 255, 255, 0.05) 80px);
  background-size: 200px 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
}

@keyframes shimmer-wave {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.shimmer-skeleton {
  background: linear-gradient(110deg, oklch(var(--background-200) / 0.3) 8%, oklch(var(--background-200) / 0.6) 18%, oklch(var(--background-200) / 0.3) 33%);
  background-size: 200% 100%;
  animation: shimmer-wave 1.2s ease-in-out infinite;
}

/* ═══ Premium page animations ═══ */
@keyframes float-slow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-20px) translateX(10px); opacity: 0.35; }
  50% { transform: translateY(-40px) translateX(-5px); opacity: 0.25; }
  75% { transform: translateY(-15px) translateX(15px); opacity: 0.3; }
}
@keyframes float-slower {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-15px) scale(1.05); }
}
@keyframes pulse-slow {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}
.animate-float-slow { animation: float-slow 6s ease-in-out infinite; }
.animate-float-slower { animation: float-slower 8s ease-in-out infinite; }
.animate-pulse-slow { animation: pulse-slow 3s ease-in-out infinite; }

/* ═══ Superhero theme animations ═══ */
@keyframes hero-float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  25% { transform: translateY(-8px) rotate(1deg); }
  75% { transform: translateY(4px) rotate(-1deg); }
}
@keyframes energy-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}
@keyframes hero-glow {
  0%, 100% { box-shadow: 0 0 8px rgba(44, 95, 45, 0.3); }
  50% { box-shadow: 0 0 24px rgba(44, 95, 45, 0.6), 0 0 48px rgba(44, 95, 45, 0.2); }
}
@keyframes cape-wave {
  0%, 100% { transform: skewX(0deg) scaleY(1); }
  25% { transform: skewX(2deg) scaleY(1.02); }
  75% { transform: skewX(-2deg) scaleY(0.98); }
}
@keyframes badge-shine {
  0% { left: -100%; }
  50%, 100% { left: 100%; }
}
.animate-hero-float { animation: hero-float 4s ease-in-out infinite; }
.animate-energy-pulse { animation: energy-pulse 2s ease-in-out infinite; }
.animate-hero-glow { animation: hero-glow 3s ease-in-out infinite; }
.animate-cape-wave { animation: cape-wave 3s ease-in-out infinite; }

.hero-badge-shine {
  position: relative;
  overflow: hidden;
}
.hero-badge-shine::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: badge-shine 3s ease-in-out infinite;
}

/* ═══ Badge toast ═══ */
@keyframes badge-toast-ring {
  0% { transform: scale(1); opacity: 0.6; border-width: 2px; border-style: solid; }
  100% { transform: scale(1.6); opacity: 0; border-width: 1px; border-style: solid; }
}
@keyframes badge-toast-legendary {
  0%, 100% { box-shadow: 0 4px 16px rgba(251, 191, 36, 0.4); }
  50% { box-shadow: 0 4px 24px rgba(251, 191, 36, 0.7), 0 0 40px rgba(251, 191, 36, 0.2); }
}
.animate-badge-toast-ring { animation: badge-toast-ring 1.2s ease-out forwards; }
.animate-badge-toast-legendary { animation: badge-toast-legendary 2s ease-in-out infinite; }

/* ═══ Immersive / narration ═══ */
@keyframes narrationPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}
.animate-narration-pulse { animation: narrationPulse 2s ease-in-out infinite; }

@keyframes swipeHint {
  0%, 100% { transform: translateX(0); opacity: 0.5; }
  50% { transform: translateX(-8px); opacity: 1; }
}
.animate-swipe-hint { animation: swipeHint 2s ease-in-out 3; }

/* ═══ Mobile helpers ═══ */
.safe-area-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); }
.no-overscroll { overscroll-behavior: none; -webkit-overflow-scrolling: touch; }

/* ═══ Focus reading mode ═══ */
body.focus-reading-mode [data-header],
body.focus-reading-mode [data-footer],
body.focus-reading-mode header,
body.focus-reading-mode footer,
body.focus-reading-mode nav { display: none !important; }

body.focus-reading-mode main {
  max-width: 800px !important;
  margin: 0 auto !important;
  padding: 40px 20px !important;
  font-size: 1.05rem;
  line-height: 1.8;
}
body.focus-reading-mode { background: #fafdf9 !important; }

/* ═══ Glass lift ═══ */
.glass-lift {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.glass-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px -8px rgba(0, 0, 0, 0.08);
}

/* ═══ Float orbs ═══ */
@keyframes floatOrb1 {
  0%, 100% { transform: translateY(0); opacity: 0.06; }
  50% { transform: translateY(-15px); opacity: 0.12; }
}
@keyframes floatOrb2 {
  0%, 100% { transform: translateY(0); opacity: 0.06; }
  50% { transform: translateY(15px); opacity: 0.1; }
}
.animate-float-orb-1 { animation: floatOrb1 6s ease-in-out infinite; }
.animate-float-orb-2 { animation: floatOrb2 8s ease-in-out infinite; }

/* ═══ Scroll reveal ═══ */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}
.reveal-visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }
.reveal-delay-5 { transition-delay: 0.40s; }
.reveal-delay-6 { transition-delay: 0.48s; }

/* ═══ Stagger reveal ═══ */
.stagger-reveal > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.35s ease-out, transform 0.35s ease-out;
}
.stagger-reveal.stagger-visible > *:nth-child(1) { transition-delay: 0s; opacity: 1; transform: translateY(0); }
.stagger-reveal.stagger-visible > *:nth-child(2) { transition-delay: 0.04s; opacity: 1; transform: translateY(0); }
.stagger-reveal.stagger-visible > *:nth-child(3) { transition-delay: 0.08s; opacity: 1; transform: translateY(0); }
.stagger-reveal.stagger-visible > *:nth-child(4) { transition-delay: 0.12s; opacity: 1; transform: translateY(0); }
.stagger-reveal.stagger-visible > *:nth-child(5) { transition-delay: 0.16s; opacity: 1; transform: translateY(0); }
.stagger-reveal.stagger-visible > *:nth-child(6) { transition-delay: 0.20s; opacity: 1; transform: translateY(0); }
.stagger-reveal.stagger-visible > *:nth-child(7) { transition-delay: 0.24s; opacity: 1; transform: translateY(0); }
.stagger-reveal.stagger-visible > *:nth-child(8) { transition-delay: 0.28s; opacity: 1; transform: translateY(0); }
.stagger-reveal.stagger-visible > *:nth-child(9) { transition-delay: 0.32s; opacity: 1; transform: translateY(0); }
.stagger-reveal.stagger-visible > *:nth-child(10) { transition-delay: 0.36s; opacity: 1; transform: translateY(0); }
.stagger-reveal.stagger-visible > *:nth-child(11) { transition-delay: 0.40s; opacity: 1; transform: translateY(0); }
.stagger-reveal.stagger-visible > *:nth-child(12) { transition-delay: 0.44s; opacity: 1; transform: translateY(0); }
.stagger-reveal.stagger-visible > *:nth-child(13) { transition-delay: 0.48s; opacity: 1; transform: translateY(0); }
.stagger-reveal.stagger-visible > *:nth-child(14) { transition-delay: 0.52s; opacity: 1; transform: translateY(0); }

/* ═══ Dropdown / Tab / Hero animations ═══ */
@keyframes dropdownEnter {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.dropdown-enter { animation: dropdownEnter 0.2s ease-out forwards; }

@keyframes tabFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.tab-fade-in { animation: tabFadeIn 0.2s ease-out forwards; }

@keyframes heroFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-fade { opacity: 0; animation: heroFadeIn 0.5s ease-out forwards; }

/* ═══ Progress bar grow ═══ */
@keyframes progressGrow {
  from { width: 0%; }
  to { width: var(--progress-target, 100%); }
}
.progress-grow { animation: progressGrow 1s ease-out forwards; }

/* ═══ Hover lift ═══ */
.hover-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hover-lift:hover { transform: translateY(-2px); }

/* ═══ Mobile perf optimisations ═══ */
@media (max-width: 768px) {
  .animate-hero-float { animation: none; }
  .animate-pulse-glow { animation: pulse-glow 3s infinite; }
  .floating-particles .particle:nth-child(n+10) { display: none; }
}

/* ═══ Reduced motion ═══ */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .stagger-reveal > *,
  .hero-fade,
  .dropdown-enter,
  .tab-fade-in,
  .progress-grow,
  .animate-float-orb-1,
  .animate-float-orb-2 {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   THEME: Nature (alternatif — chargé en async)
   ═══════════════════════════════════════════════════════════════ */
[data-theme="nature"] {
  --background-50: 0.97 0.015 120;
  --background-100: 0.94 0.025 120;
  --background-200: 0.89 0.030 120;
  --background-300: 0.82 0.035 120;
  --background-400: 0.72 0.035 120;
  --background-500: 0.62 0.030 120;
  --background-600: 0.52 0.025 120;
  --background-700: 0.42 0.025 120;
  --background-800: 0.32 0.025 120;
  --background-900: 0.24 0.025 120;
  --background-950: 0.16 0.025 120;
  --foreground-50: 0.97 0.005 120;
  --foreground-100: 0.93 0.008 120;
  --foreground-200: 0.87 0.010 120;
  --foreground-300: 0.78 0.012 120;
  --foreground-400: 0.68 0.015 120;
  --foreground-500: 0.58 0.018 120;
  --foreground-600: 0.48 0.020 120;
  --foreground-700: 0.38 0.022 120;
  --foreground-800: 0.28 0.025 120;
  --foreground-900: 0.21 0.028 120;
  --foreground-950: 0.14 0.030 120;
  --primary-50: 0.97 0.03 145;
  --primary-100: 0.93 0.05 145;
  --primary-200: 0.86 0.07 145;
  --primary-300: 0.76 0.09 145;
  --primary-400: 0.65 0.11 145;
  --primary-500: 0.53 0.14 145;
  --primary-600: 0.45 0.14 145;
  --primary-700: 0.38 0.13 145;
  --primary-800: 0.30 0.12 145;
  --primary-900: 0.24 0.11 145;
  --primary-950: 0.18 0.10 145;
  --accent-50: 0.97 0.04 85;
  --accent-100: 0.94 0.06 85;
  --accent-200: 0.89 0.09 85;
  --accent-300: 0.80 0.11 85;
  --accent-400: 0.70 0.13 85;
  --accent-500: 0.60 0.15 85;
  --accent-600: 0.50 0.15 85;
  --accent-700: 0.42 0.14 85;
  --accent-800: 0.34 0.13 85;
  --accent-900: 0.26 0.12 85;
  --accent-950: 0.18 0.11 85;
  --secondary-50: 0.97 0.03 175;
  --secondary-100: 0.94 0.05 175;
  --secondary-200: 0.89 0.07 175;
  --secondary-300: 0.80 0.09 175;
  --secondary-400: 0.70 0.11 175;
  --secondary-500: 0.58 0.13 175;
  --secondary-600: 0.48 0.13 175;
  --secondary-700: 0.40 0.12 175;
  --secondary-800: 0.32 0.11 175;
  --secondary-900: 0.24 0.10 175;
  --secondary-950: 0.16 0.09 175;
}

/* ═══════════════════════════════════════════════════════════════
   THEME: Scientifique (alternatif — chargé en async)
   ═══════════════════════════════════════════════════════════════ */
[data-theme="scientific"] {
  --background-50: 0.98 0.005 230;
  --background-100: 0.95 0.008 230;
  --background-200: 0.90 0.012 230;
  --background-300: 0.83 0.015 230;
  --background-400: 0.73 0.018 230;
  --background-500: 0.63 0.020 230;
  --background-600: 0.53 0.018 230;
  --background-700: 0.43 0.018 230;
  --background-800: 0.33 0.018 230;
  --background-900: 0.24 0.018 230;
  --background-950: 0.16 0.015 230;
  --foreground-50: 0.97 0.005 230;
  --foreground-100: 0.93 0.008 230;
  --foreground-200: 0.87 0.010 230;
  --foreground-300: 0.78 0.012 230;
  --foreground-400: 0.68 0.015 230;
  --foreground-500: 0.58 0.018 230;
  --foreground-600: 0.48 0.020 230;
  --foreground-700: 0.38 0.022 230;
  --foreground-800: 0.28 0.025 230;
  --foreground-900: 0.21 0.028 230;
  --foreground-950: 0.14 0.030 230;
  --primary-50: 0.97 0.02 220;
  --primary-100: 0.93 0.04 220;
  --primary-200: 0.86 0.06 220;
  --primary-300: 0.76 0.08 220;
  --primary-400: 0.65 0.10 220;
  --primary-500: 0.55 0.12 220;
  --primary-600: 0.46 0.12 220;
  --primary-700: 0.39 0.11 220;
  --primary-800: 0.32 0.10 220;
  --primary-900: 0.25 0.09 220;
  --primary-950: 0.19 0.08 220;
  --accent-50: 0.97 0.02 275;
  --accent-100: 0.95 0.04 275;
  --accent-200: 0.90 0.06 275;
  --accent-300: 0.82 0.08 275;
  --accent-400: 0.72 0.10 275;
  --accent-500: 0.60 0.12 275;
  --accent-600: 0.50 0.12 275;
  --accent-700: 0.42 0.11 275;
  --accent-800: 0.34 0.10 275;
  --accent-900: 0.26 0.09 275;
  --accent-950: 0.18 0.08 275;
  --secondary-50: 0.97 0.02 200;
  --secondary-100: 0.95 0.04 200;
  --secondary-200: 0.90 0.06 200;
  --secondary-300: 0.82 0.08 200;
  --secondary-400: 0.72 0.10 200;
  --secondary-500: 0.60 0.12 200;
  --secondary-600: 0.50 0.12 200;
  --secondary-700: 0.42 0.11 200;
  --secondary-800: 0.34 0.10 200;
  --secondary-900: 0.26 0.09 200;
  --secondary-950: 0.18 0.08 200;
}