/* Street Shakers — Répertoire : extraits audio, étiquettes Pop/Soul/Funk/Latin et leurs danses */
/* ---------- REPERTOIRE ---------- */
.repertoire-layout{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
.tracklist{ display:grid; gap:10px; }
.track{
  display:flex; align-items:center; gap:18px; padding:11px 18px; border:1px solid var(--line);
  border-radius:3px; background:var(--bg-panel); transition:border-color .2s ease, transform .2s ease;
}
.track:hover{ border-color:var(--rouge); transform:translateX(4px); }
.track{ position:relative; overflow:hidden; }
/* barre de lecture : curseur natif (souris, doigt, clavier), à la couleur du style de l'extrait.
   --p = avancement en % (mis à jour par js/main.js) */
.track{ --bar:var(--rouge); --p:0%; }
.track[data-style="soul"]{ --bar:var(--noir); }
.track[data-style="funk"]{ --bar:var(--jaune); }
.track[data-style="latin"]{ --bar:var(--bleu); }
.track-seek{
  -webkit-appearance:none; appearance:none; position:absolute; left:0; right:0; bottom:0; width:100%; height:14px;
  margin:0; padding:0; background:transparent; cursor:pointer; z-index:1;
}
.track-seek::-webkit-slider-runnable-track{
  height:4px; margin-top:10px; border-radius:0;
  background:linear-gradient(to right, var(--bar) var(--p), rgba(19,19,18,0.1) var(--p));
}
.track-seek::-moz-range-track{ height:4px; background:rgba(19,19,18,0.1); }
.track-seek::-moz-range-progress{ height:4px; background:var(--bar); }
.track-seek::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:14px; height:14px; margin-top:-5px; border-radius:50%;
  background:var(--bar); border:2px solid var(--ecru); box-shadow:0 0 0 1px rgba(19,19,18,0.25);
  opacity:0; transition:opacity .2s ease, transform .2s ease;
}
.track-seek::-moz-range-thumb{
  width:12px; height:12px; border-radius:50%; background:var(--bar); border:2px solid var(--ecru);
  opacity:0; transition:opacity .2s ease;
}
/* le curseur rond apparaît au survol, pendant la lecture, ou au clavier */
.track:hover .track-seek::-webkit-slider-thumb, .track:has(.track-play[aria-pressed="true"]) .track-seek::-webkit-slider-thumb, .track-seek:focus-visible::-webkit-slider-thumb{ opacity:1; }
.track:hover .track-seek::-moz-range-thumb, .track:has(.track-play[aria-pressed="true"]) .track-seek::-moz-range-thumb, .track-seek:focus-visible::-moz-range-thumb{ opacity:1; }
.track-seek:hover::-webkit-slider-thumb{ transform:scale(1.2); }
.track-seek:focus-visible{ outline:none; }
.track:has(.track-seek:focus-visible){ outline:2px solid var(--rouge); outline-offset:2px; }
.track-play{
  width:42px; height:42px; min-width:42px; border-radius:50%; border:none; cursor:pointer;
  background:var(--noir); color:var(--ecru); display:flex; align-items:center; justify-content:center;
  position:relative; transition:background .2s ease;
}
.track-play:hover{ background:var(--rouge); }
.track-play svg{ width:14px; height:14px; fill:currentColor; }
.icon-pause{ display:none; }
.track-play[aria-pressed="true"] .icon-play{ display:none; }
.track-play[aria-pressed="true"] .icon-pause{ display:block; }
.track-info{ flex:1; min-width:0; }
.track-info h4{ font-family:'Outfit',sans-serif; font-weight:700; text-transform:uppercase; font-size:0.95rem; letter-spacing:0.04em; }
.track-info span{ font-size:0.82rem; opacity:0.65; }
.waveform{ display:flex; align-items:flex-end; gap:2px; height:24px; min-width:90px; }
.waveform i{ width:3px; background:var(--ink); opacity:0.35; border-radius:2px; height:30%; transition:opacity .2s ease; }
.track-play[aria-pressed="true"] ~ .waveform i, .track:has(.track-play[aria-pressed="true"]) .waveform i{ opacity:0.9; animation:bar 0.9s ease-in-out infinite; }
.waveform i:nth-child(1){ height:40%; animation-delay:0s; }
.waveform i:nth-child(2){ height:70%; animation-delay:.1s; }
.waveform i:nth-child(3){ height:100%; animation-delay:.2s; }
.waveform i:nth-child(4){ height:55%; animation-delay:.3s; }
.waveform i:nth-child(5){ height:80%; animation-delay:.4s; }
.waveform i:nth-child(6){ height:45%; animation-delay:.5s; }
.waveform i:nth-child(7){ height:65%; animation-delay:.6s; }
@keyframes bar{ 0%,100%{ transform:scaleY(0.5); } 50%{ transform:scaleY(1); } }
.tag{ font-size:0.72rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; padding:4px 10px; border-radius:999px; white-space:nowrap; }
.tag-pop{ background:var(--rouge); color:var(--ecru); }
.tag-soul{ background:var(--noir); color:var(--jaune); box-shadow:inset 0 0 0 1.5px var(--jaune); }
.tag-funk{ background:var(--jaune); color:var(--noir); }
.tag-latin{ background:var(--bleu); color:var(--ecru); }

.repertoire-side{ position:relative; display:flex; align-items:center; justify-content:center; }
.stickers{ position:relative; width:100%; max-width:440px; aspect-ratio:5/4; --amp:0deg; }
.sticker{
  position:absolute; padding:12px 26px; font-family:'Outfit',sans-serif; font-weight:700; text-transform:uppercase; font-size:clamp(1.5rem, 3.5vw, 2.2rem);
  letter-spacing:0.05em; line-height:1.1; border-radius:16px; box-shadow:0 7px 0 rgba(0,0,0,0.25);
  transform:rotate(var(--r)); transition:transform .3s ease;
}
/* les étiquettes sont des boutons : un clic lance (ou met en pause) l'extrait du même style */
.sticker{ border:0; cursor:pointer; font-weight:700; -webkit-appearance:none; appearance:none; }
.sticker:focus-visible{ outline:3px solid var(--noir); outline-offset:3px; }
@media (hover: hover) and (pointer: fine){ .sticker:hover{ scale:1.1; } }
.sticker{ transition:transform .3s ease, scale .25s ease; }
.s1{ --r:-8deg; background:var(--rouge); color:var(--ecru); top:5%; left:4%; }
.s2{ --r:6deg; background:var(--noir); color:var(--jaune); border:2px solid var(--jaune); top:17%; right:0; }
.s3{ --r:5deg; background:var(--jaune); color:var(--noir); bottom:21%; left:0; }
.s4{ --r:-4deg; background:var(--bleu); color:var(--ecru); bottom:5%; right:6%; }
/* (entrée « pop » des étiquettes : voir « APPARITIONS AU DÉFILEMENT » en haut du fichier) */
/* vibration au scroll : amplitude pilotée par la vitesse de défilement (--amp) */
.stickers.vibing .sticker{ animation:vibe .16s linear infinite; }
.stickers.vibing .s2{ animation-duration:.14s; animation-delay:-.05s; }
.stickers.vibing .s3{ animation-duration:.18s; animation-delay:-.09s; }
.stickers.vibing .s4{ animation-duration:.15s; animation-delay:-.03s; }
/* ---------- DANSE DES ÉTIQUETTES PENDANT LA LECTURE (100 % CSS) ----------
   Quand un extrait joue (bouton aria-pressed="true"), l'étiquette de son style danse,
   chacune à sa façon et calée sur le tempo estimé du morceau.
   POP = 105 bpm : rebonds · SOUL = 97 bpm : balancement lent (1 balancement = 2 temps) · FUNK = 105 bpm : groove souple · LATIN = 120 bpm : déhanché (1 aller-retour = 2 temps) */
.repertoire-layout:has([data-style="pop"] .track-play[aria-pressed="true"]) .stickers .s1{ animation:dance-pop .571s cubic-bezier(.3,0,.4,1) infinite; z-index:2; }
.repertoire-layout:has([data-style="soul"] .track-play[aria-pressed="true"]) .stickers .s2{ animation:dance-soul 1.237s ease-in-out infinite; z-index:2; }
.repertoire-layout:has([data-style="funk"] .track-play[aria-pressed="true"]) .stickers .s3{ animation:dance-funk 2.286s ease-in-out infinite; z-index:2; }
.repertoire-layout:has([data-style="latin"] .track-play[aria-pressed="true"]) .stickers .s4{ animation:dance-latin 1s ease-in-out infinite; z-index:2; }
/* POP : saute et s'écrase en retombant, comme une balle */
@keyframes dance-pop{
  0%, 100%{ transform:translateY(0) rotate(var(--r)) scale(1.08, .92); }
  15%{ transform:translateY(-6px) rotate(var(--r)) scale(.96, 1.05); }
  45%{ transform:translateY(-22px) rotate(calc(var(--r) + 4deg)) scale(1.02, 1.02); }
  80%{ transform:translateY(-4px) rotate(var(--r)) scale(.98, 1.03); }
}
/* SOUL : balancement lent et ample, tout en souplesse */
@keyframes dance-soul{
  0%, 100%{ transform:translate(-6px, 0) rotate(calc(var(--r) - 7deg)) scale(1.04); }
  25%{ transform:translate(0, -6px) rotate(var(--r)) scale(1.07); }
  50%{ transform:translate(6px, 0) rotate(calc(var(--r) + 7deg)) scale(1.04); }
  75%{ transform:translate(0, -6px) rotate(var(--r)) scale(1.07); }
}
/* FUNK : groove souple — balancement gauche/droite sur 4 temps (1 mesure à 105 bpm = 2,286 s),
   avec un petit hochement de tête sur chaque temps : la tête « dessine » un 8 */
@keyframes dance-funk{
  0%, 100%{ transform:translate(-7px, 4px) rotate(calc(var(--r) - 8deg)) scale(1.05); }
  12.5%{ transform:translate(-4px, -3px) rotate(calc(var(--r) - 5deg)) scale(1.02); }
  25%{ transform:translate(0, 4px) rotate(calc(var(--r) - 1deg)) scale(1.05); }
  37.5%{ transform:translate(4px, -3px) rotate(calc(var(--r) + 4deg)) scale(1.02); }
  50%{ transform:translate(7px, 4px) rotate(calc(var(--r) + 8deg)) scale(1.05); }
  62.5%{ transform:translate(4px, -3px) rotate(calc(var(--r) + 5deg)) scale(1.02); }
  75%{ transform:translate(0, 4px) rotate(calc(var(--r) + 1deg)) scale(1.05); }
  87.5%{ transform:translate(-4px, -3px) rotate(calc(var(--r) - 4deg)) scale(1.02); }
}
/* LATIN : déhanché de gauche à droite avec petits « shimmy » */
@keyframes dance-latin{
  0%, 100%{ transform:translateX(-12px) rotate(calc(var(--r) - 6deg)); }
  20%{ transform:translateX(-9px) translateY(-3px) rotate(calc(var(--r) - 2deg)); }
  25%{ transform:translateX(-12px) rotate(calc(var(--r) - 6deg)); }
  50%{ transform:translateX(12px) rotate(calc(var(--r) + 6deg)); }
  70%{ transform:translateX(9px) translateY(-3px) rotate(calc(var(--r) + 2deg)); }
  75%{ transform:translateX(12px) rotate(calc(var(--r) + 6deg)); }
}
@media (prefers-reduced-motion: reduce){ .stickers .sticker{ animation:none !important; } }

@keyframes vibe{
  0%,100%{ transform:rotate(var(--r)) scale(1); }
  25%{ transform:rotate(calc(var(--r) - var(--amp))) scale(1.06) translateY(-2px); }
  75%{ transform:rotate(calc(var(--r) + var(--amp))) scale(1.06) translateY(2px); }
}
.stickers .inst{ position:absolute; opacity:0.9; }
.stickers .inst svg{ width:64px; height:64px; }
.inst-1{ top:41%; left:41%; }
.inst-1 svg{ stroke:var(--ink); }