/* =========================================================================
   ANTHASMA — Ambiance (effets doux + bouton musique)
   Couche purement décorative : aucune couleur ni structure modifiée.
   ========================================================================= */

/* ------------------------------------------------- Pétales flottants */
#ambience-leaves {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
}

/* ------------------------------------------------- Bouton musique */
.ambience-toggle {
  position: fixed;
  right: 1.15rem;
  bottom: 1.15rem;
  z-index: 70;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--ivory);
  color: var(--sage-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: transform .45s var(--ease), background .45s var(--ease), color .45s var(--ease), box-shadow .45s var(--ease);
}
.ambience-toggle svg { width: 22px; height: 22px; display: block; }
.ambience-toggle:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.ambience-toggle:focus-visible { outline: 2px solid var(--sage-deep); outline-offset: 3px; }

.ambience-toggle.playing {
  background: var(--sage-deep);
  color: var(--ivory);
  border-color: transparent;
}

/* anneaux qui respirent quand la musique joue */
.ambience-toggle::before,
.ambience-toggle::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid var(--sage);
  opacity: 0;
  pointer-events: none;
}
.ambience-toggle.playing::before { animation: amb-ring 3.2s var(--ease) infinite; }
.ambience-toggle.playing::after  { animation: amb-ring 3.2s var(--ease) 1.6s infinite; }

@keyframes amb-ring {
  0%   { transform: scale(.86); opacity: .55; }
  100% { transform: scale(1.45); opacity: 0; }
}

/* barre/note : petite vague à l'intérieur du bouton quand ça joue */
.ambience-toggle .eq { display: none; gap: 3px; align-items: flex-end; height: 18px; }
.ambience-toggle .eq i {
  width: 3px; border-radius: 2px; background: currentColor; display: block;
  animation: amb-eq 1.4s ease-in-out infinite;
}
.ambience-toggle .eq i:nth-child(1) { height: 60%; animation-delay: 0s;   }
.ambience-toggle .eq i:nth-child(2) { height: 100%; animation-delay: .25s; }
.ambience-toggle .eq i:nth-child(3) { height: 45%; animation-delay: .5s;  }
.ambience-toggle .eq i:nth-child(4) { height: 80%; animation-delay: .12s; }
.ambience-toggle.playing .note { display: none; }
.ambience-toggle.playing .eq { display: flex; }

@keyframes amb-eq {
  0%, 100% { transform: scaleY(.55); }
  50%      { transform: scaleY(1); }
}

/* ------------------------------------------------- Micro-effets doux */
/* Icônes des cartes accompagnements : légère inclinaison au survol */
.serv-icon svg { transition: transform .6s var(--ease); }
.serv-card:hover .serv-icon svg { transform: rotate(-7deg) scale(1.1); }

/* Badge du hero : respiration très lente */
@media (prefers-reduced-motion: no-preference) {
  .hero-badge { animation: amb-float 7s ease-in-out infinite; }
  @keyframes amb-float {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -7px; }
  }
}

/* Mouvement réduit : on coupe tout */
@media (prefers-reduced-motion: reduce) {
  #ambience-leaves { display: none; }
  .ambience-toggle::before, .ambience-toggle::after { animation: none; }
  .ambience-toggle .eq i { animation: none; }
}

@media (max-width: 680px) {
  .ambience-toggle { width: 46px; height: 46px; right: .9rem; bottom: .9rem; }
}