/* ============================================================
   effects.css — Curseur note de musique + effets visuels
   ------------------------------------------------------------
   Curseur = SVG data URI inline, aucune requête HTTP externe.
   Fallback vers curseur système si le navigateur ne supporte
   pas le SVG cursor (rares navigateurs anciens).
   ============================================================ */

/* Curseur note de musique (SVG 24×24, hotspot en haut-gauche) */
body,
body a,
body button {
  cursor:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><path fill='%232d5279' stroke='%23ffffff' stroke-width='0.8' d='M19.5 3v13.9c-.7-.4-1.5-.6-2.4-.6-2.5 0-4.6 2-4.6 4.6s2 4.6 4.6 4.6 4.6-2 4.6-4.6V6.9l3.9-.6V3z'/></svg>") 4 4,
    auto;
}

/* Sur les zones interactives : version accent lumineux */
body a:hover,
body button:hover,
body .btn:hover,
body .product-buy:hover,
body .ticket-btn:hover {
  cursor:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 28 28'><path fill='%238ab1cd' stroke='%23ffffff' stroke-width='1' d='M19.5 3v13.9c-.7-.4-1.5-.6-2.4-.6-2.5 0-4.6 2-4.6 4.6s2 4.6 4.6 4.6 4.6-2 4.6-4.6V6.9l3.9-.6V3z'/></svg>") 5 5,
    pointer;
}

/* Curseur "action" pour champs texte */
body input, body textarea, body select {
  cursor: text;
}

/* ============================================================
   Effets visuels : fade-in au scroll, transitions
   ============================================================ */

.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Ondulation légère sur le hero au chargement */
@keyframes gentleRise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-text,
.page-header,
.hero-cover {
  animation: gentleRise 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero-cover { animation-delay: 0.15s; }

/* Zoom léger + luminosité sur les images de la galerie au survol */
.gallery-grid .gallery-item {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s;
}
.gallery-grid .gallery-item:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 12px 30px rgba(31, 58, 82, 0.15);
}

/* Bouton mute/unmute des effets sonores — tout en bas à droite */
.sound-toggle {
  position: fixed;
  bottom: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  background: rgba(31, 58, 82, 0.85);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: background 0.2s, transform 0.2s;
  backdrop-filter: blur(4px);
}
.sound-toggle:hover {
  background: rgba(45, 82, 121, 0.95);
  transform: scale(1.06);
}
.sound-toggle .sound-icon-on,
.sound-toggle .sound-icon-off { display: none; }
.sound-toggle.enabled .sound-icon-on { display: inline; }
.sound-toggle:not(.enabled) .sound-icon-off { display: inline; opacity: 0.7; }

/* ============================================================
   Accessibilité : désactive les effets pour prefers-reduced-motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .fade-in { opacity: 1; transform: none; transition: none; }
  .hero-text, .page-header, .hero-cover { animation: none; }
  .gallery-grid .gallery-item:hover { transform: none; }
}