/* ============================================================
   effects.css — Curseur personnalisé + effets visuels
   ------------------------------------------------------------
   Uniquement actif sur écrans avec pointeur fin (desktop).
   Sur mobile / tablette, le curseur système est conservé
   pour préserver l'UX tactile.
   ============================================================ */

@media (hover: hover) and (pointer: fine) {
  body,
  a, button, .btn, .btn-outline, .btn-primary, .btn-secondary,
  input[type="submit"], select, .tile, .concert-row, .album-card {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='32' viewBox='0 0 28 32'><g fill='%232d5279' stroke='%231F3A52' stroke-width='0.8'><ellipse cx='9' cy='24' rx='6' ry='4.5' transform='rotate(-20 9 24)'/><path d='M13.5 21.5 L13.5 6 L23 3 L23 8.5 L14.5 11 Z'/><ellipse cx='19' cy='19' rx='5' ry='3.8' transform='rotate(-20 19 19)'/></g></svg>") 4 24, auto;
  }
  /* Curseur "pointer" (mais toujours une note) pour les liens cliquables */
  a, button, .btn, .btn-outline, .btn-primary, .btn-secondary,
  .tile, .album-card, .concert-row, .single-card, .photo-thumb {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='34' viewBox='0 0 30 34'><g fill='%232d5279' stroke='%23fff' stroke-width='1'><ellipse cx='9' cy='25' rx='6.5' ry='5' transform='rotate(-20 9 25)'/><path d='M14 22 L14 5 L24 2 L24 8 L15 10.5 Z'/><ellipse cx='20' cy='19' rx='5.5' ry='4' transform='rotate(-20 20 19)'/></g></svg>") 5 25, pointer;
  }
}

/* Fade-in au scroll ------------------------------------------ */
[data-fade] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform;
}
[data-fade].visible {
  opacity: 1;
  transform: translateY(0);
}

/* Effets au hover sur les images de la galerie et pochettes */
@media (hover: hover) and (pointer: fine) {
  .single-cover img, .album-cover img, .photo-thumb img {
    transition: transform 0.5s ease, filter 0.5s ease;
  }
  .single-cover:hover img, .album-cover:hover img, .photo-thumb:hover img {
    transform: scale(1.04);
    filter: brightness(1.05);
  }
}

/* Bouton toggle du son -------------------------------------- */
.sound-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(31,58,82,0.2);
  background: rgba(255,255,255,0.95);
  color: #1F3A52;
  font-size: 1.15rem;
  cursor: pointer;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(31,58,82,0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  padding: 0;
  line-height: 1;
}
.sound-toggle:hover {
  transform: scale(1.08);
  box-shadow: 0 5px 16px rgba(31,58,82,0.22);
}
.sound-toggle[aria-pressed="true"] {
  background: #1F3A52;
  color: white;
}
@media (max-width: 600px) {
  .sound-toggle { bottom: 12px; right: 12px; width: 40px; height: 40px; font-size: 1.05rem; }
}

/* Réduire les effets pour les personnes qui préfèrent moins d'animations */
@media (prefers-reduced-motion: reduce) {
  [data-fade] { opacity: 1; transform: none; transition: none; }
  .single-cover img, .album-cover img, .photo-thumb img { transition: none; }
}