/* The Sound Maker : « studio de bruitage ». Velours violet, ondes qui partent du titre,
   égaliseur et micro dans la console du bas, lampe « Enregistrement ». Rien sur la boîte. */
.sm--the-sound-maker {
  --sm-fond: #2a1030; --sm-fond-2: #f6eef7; --sm-encre: #2a1030; --sm-doux: #5a3f5f;
  --sm-accent: #7a2d84; --sm-accent-fonce: #561c5e; --sm-carte: #fff;
  --sm-police: "Bricolage Grotesque", var(--titre);
}
.sm--the-sound-maker .sm-ouverture {
  background: radial-gradient(ellipse at 20% 30%, #4b1f55 0, #2a1030 60%), #2a1030;
  color: #fbeefc;
}
.sm--the-sound-maker .sm-ouverture h1 { color: #fbeefc; font-weight: 800; }
.sm--the-sound-maker .sm-sur { color: #f2c792; }
.sm--the-sound-maker .sm-accroche { color: #e9d6eb; }
.sm--the-sound-maker .fil-ariane, .sm--the-sound-maker .fil-ariane a { color: #dfc8e1; }
.sm--the-sound-maker .sm-boite img { filter: drop-shadow(0 24px 26px rgba(0, 0, 0, 0.6)); }

.tsm-onde { position: absolute; left: 12%; top: 38%; width: 14rem; aspect-ratio: 1; margin: -7rem 0 0 -7rem; border-radius: 50%; border: 2px solid rgba(242, 199, 146, 0.35); opacity: 0; }
.tsm-console { background: linear-gradient(#1c0a21, #12061a); border-top: 3px solid #4b1f55; }
.tsm-lampe {
  position: absolute; left: clamp(1rem, 4vw, 3rem); top: 1rem; margin: 0;
  display: flex; align-items: center; gap: 0.5rem;
  font-family: "Bricolage Grotesque", var(--titre); font-weight: 800; font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: #ffd9d0; padding: 0.3rem 0.7rem; border: 2px solid #ff6b57; border-radius: 0.4rem;
}
.tsm-lampe__point { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #ff6b57; box-shadow: 0 0 10px #ff6b57; }
.tsm-egaliseur { position: absolute; left: clamp(1rem, 4vw, 3rem); right: clamp(7rem, 16vw, 12rem); bottom: 1rem; top: 3.3rem; display: flex; align-items: flex-end; gap: 4px; }
.tsm-barre { flex: 1; height: 60%; border-radius: 3px 3px 0 0; background: linear-gradient(to top, #8e3fa0, #f2c792); transform-origin: bottom; }
.tsm-barre--2 { height: 85%; } .tsm-barre--3 { height: 40%; } .tsm-barre--4 { height: 95%; }
.tsm-barre--5 { height: 55%; } .tsm-barre--6 { height: 75%; } .tsm-barre--7 { height: 35%; } .tsm-barre--8 { height: 65%; }
.tsm-micro { position: absolute; right: clamp(1rem, 4vw, 3rem); bottom: 0.4rem; width: clamp(4.5rem, 9vw, 7rem); height: auto; }
.tsm-micro__tete { fill: #3d1846; stroke: #f2c792; stroke-width: 4; }
.tsm-micro__grille { stroke: #f2c792; stroke-width: 2; opacity: 0.6; }
.tsm-micro__arceau, .tsm-micro__pied { fill: none; stroke: #dfc8e1; stroke-width: 5; stroke-linecap: round; }

@media (prefers-reduced-motion: no-preference) {
  .tsm-onde { animation: tsm-onde 4.5s ease-out infinite; }
  .tsm-onde--2 { animation-delay: 1.5s; } .tsm-onde--3 { animation-delay: 3s; }
  @keyframes tsm-onde { 0% { opacity: 0.8; scale: 0.3; } 100% { opacity: 0; scale: 2.4; } }
  .tsm-barre { animation: tsm-son 1.1s ease-in-out infinite alternate; }
  .tsm-barre--2 { animation-duration: 0.8s; } .tsm-barre--3 { animation-duration: 1.3s; } .tsm-barre--4 { animation-duration: 0.7s; }
  .tsm-barre--5 { animation-duration: 1.2s; } .tsm-barre--6 { animation-duration: 0.9s; } .tsm-barre--7 { animation-duration: 1.4s; } .tsm-barre--8 { animation-duration: 1s; }
  @keyframes tsm-son { from { scale: 1 0.25; } to { scale: 1 1; } }
  .tsm-lampe__point { animation: tsm-lampe 1.6s steps(2, jump-none) infinite; }
  @keyframes tsm-lampe { 50% { opacity: 0.25; box-shadow: none; } }
}
@media (max-width: 52rem) {
  .tsm-onde { left: 50%; top: 8.5rem; width: 9rem; margin: -4.5rem 0 0 -4.5rem; }
}
@media (max-width: 52rem) and (prefers-reduced-motion: no-preference) {
  @keyframes tsm-onde { 0% { opacity: 0.8; scale: 0.3; } 100% { opacity: 0; scale: 1.5; } }
}