/* ============================================================
   KARISMA-KARNIVAL — Thème clair/sombre
   Transitions fluides lors du toggle
   ============================================================ */

/* Transition globale au changement de thème */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
  transition:
    background-color 300ms ease,
    color 300ms ease,
    border-color 300ms ease,
    box-shadow 300ms ease !important;
}

/* Icône du bouton thème */
.btn-theme .icon-sun  { display: none; }
.btn-theme .icon-moon { display: block; }

[data-theme="light"] .btn-theme .icon-sun  { display: block; }
[data-theme="light"] .btn-theme .icon-moon { display: none; }

/* Ajustements spécifiques au thème clair */
[data-theme="light"] .site-header.scrolled {
  background: rgba(245, 242, 237, 0.9);
}

[data-theme="light"] .card {
  box-shadow: var(--shadow-sm);
}

[data-theme="light"] .card:hover {
  box-shadow: var(--shadow-md);
}

/* Overlay vidéo hero — ajustement thème */
.hero__video-overlay {
  background: rgba(0, 0, 0, 0.55);
}

[data-theme="light"] .hero__video-overlay {
  background: rgba(0, 0, 0, 0.3);
}

/* Canvas p5.js — opacité par thème */
#p5-canvas {
  opacity: 0.4;
}

[data-theme="light"] #p5-canvas {
  opacity: 0.15;
}