/* Icônes d'écoute (Spotify, Apple Music, YouTube Music) des pages artistes.
 *
 * Code des icônes fourni par la cliente (2026-09-25), repris tel quel mais :
 *   - classes préfixées (.ic-sp…, .ic-yt…) : .circle, .shadow, .dot existent
 *     déjà dans le CSS Webflow du gabarit ;
 *   - px convertis en em (1em = côté de l'icône : 300 px d'origine pour
 *     YouTube) : l'icône se redimensionne sans se déformer, il
 *     suffit de poser `font-size` = sa largeur ;
 *   - Spotify : glyphe Simple Icons (CC0), vert #1ED760, traits blancs ;
 *   - Apple Music : glyphe Bootstrap Icons (MIT) sur le dégradé de l'icône
 *     officielle, #FB5C74 → #FA233B, note blanche.
 * Chargée par les pages artistes ET par le site (aperçus du panneau /editeur).
 * Balisage : ICON_HTML dans assets/artist-page.js (seule source). */

.ic { position: relative; display: block; width: 1em; height: 1em; flex: none; }
.ic *, .ic *::before, .ic *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ---- Spotify : glyphe vectoriel (Simple Icons, CC0) — la version CSS
   (arcs en bordure + points) donnait des traits aux bouts détachés ---- */
.ic-sp svg { display: block; width: 100%; height: 100%; }

/* ---- YouTube Music (300 px d'origine, SCSS compilé) ---- */
.ic-yt { background: #333; overflow: hidden; border-radius: 50%; }
.ic-yt__circle {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 47.33333333333333%; height: 47.33333333333333%;
  border-radius: 50%; background: #e23229; overflow: hidden; z-index: 2;
}
.ic-yt__circle::before, .ic-yt__circle::after { content: ""; position: absolute; top: 50%; transform: translate(-50%, -50%); }
.ic-yt__circle::before {
  top: 40%; left: 55%;
  border-bottom: 0.25em solid rgba(0, 0, 0, 0.2);
  border-left: 0.013333em solid transparent; border-right: 0.013333em solid transparent;
  transform: rotate(-60deg) translate(-50%, -50%); transform-origin: 0% 0%; z-index: 2;
}
.ic-yt__circle::after {
  left: 56%;
  border-left: 0.2em solid #fff;
  border-top: 0.103333em solid transparent; border-bottom: 0.103333em solid transparent;
}
.ic-yt__dot {
  position: absolute; bottom: 29%; right: 35%; z-index: 3;
  width: 0.2em; height: 0.02em; background: #e23229;
  transform: rotate(-28deg) translate(50%, 50%);
}
.ic-yt__shadow {
  position: absolute; bottom: 50%; right: 37.5%; width: 100%; height: 100%; overflow: hidden;
  transform: rotate(-27.5deg) skewX(35deg); transform-origin: 100% 100%;
}
.ic-yt__shadow::before {
  content: ""; display: block; width: 200%; height: 200%; border-radius: 50%;
  background: #3d3d3d; transform: skewX(-35deg);
}
.ic-yt__circle .ic-yt__shadow { right: 22.5%; }
.ic-yt__circle .ic-yt__shadow::before { background: #c7322a; }

/* ---- Apple Music ---- */
.ic-am svg { display: block; width: 100%; height: 100%; }