/* ==========================================================
   CROUCHE AMP — lecteur SoundCloud façon skin Winamp
   Tout est dessiné sur une fenêtre de 550 px de large, puis
   mise à l'échelle automatiquement selon la place disponible.
   Pour changer le skin : remplacez skin.jpg (ou --skin ci-dessous).
   ========================================================== */
.amp{
  --skin:url("skin.jpg");
  --cream:#f3eedc; --cream-dim:#b9b4a2;
  --pink:#ff4fd8; --cyan:#46f0ff; --blue:#5a63ff;
  --glass:rgba(7,7,11,.64);
  --font:"VT323","Courier New",monospace;
  position:relative; width:100%; max-width:640px; margin:0 auto;
  font-family:var(--font); color:var(--cream);
  -webkit-user-select:none; user-select:none;
  text-transform:none; letter-spacing:normal; line-height:normal; text-align:left;
}
.amp *{box-sizing:border-box}
.amp-box{width:550px;transform-origin:0 0;display:grid;gap:6px}
.amp-iframe{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none;border:0}

/* ---------- fenêtres ---------- */
.amp .win{position:relative;width:550px;overflow:hidden;background:#777 var(--skin) center/cover no-repeat;
  box-shadow:0 0 0 1px #000,inset 2px 2px 0 rgba(255,255,255,.85),inset -2px -2px 0 rgba(0,0,0,.55),0 10px 24px rgba(0,0,0,.35)}
.amp .win.main{height:236px}
.amp .win.pl{background:#777}
.amp .win.pl::before{content:"";position:absolute;inset:0;background:var(--skin) center/cover no-repeat;transform:scaleX(-1)}
.amp .win>*{position:relative}

/* barre de titre */
.amp .tb{display:flex;align-items:center;gap:8px;height:19px;padding:0 6px;
  background:linear-gradient(#2b2b33,#0c0c10);border-bottom:1px solid #000;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.amp .tb .grip{flex:1;height:9px;background:repeating-linear-gradient(0deg,#d8d4c4 0 1px,transparent 1px 3px);opacity:.55}
.amp .tb span{font-size:17px;letter-spacing:.18em;line-height:1;color:var(--cream);text-shadow:0 0 6px rgba(70,240,255,.5)}
.amp .tb .mini{margin-left:2px;font:inherit;font-size:14px;line-height:1;color:var(--cream);background:#1a1a20;border:1px solid #555;border-radius:2px;padding:1px 5px;cursor:pointer}
.amp .tb .mini[aria-pressed="true"]{color:#000;background:var(--cyan);border-color:#fff}

/* pochette (plâtre en creux) */
.amp .cover{position:absolute;left:20px;top:32px;width:96px;height:96px;border-radius:14px 22px 16px 20px;overflow:hidden;
  background:#d8d8de;box-shadow:inset 6px 6px 12px rgba(0,0,0,.45),inset -2px -2px 3px #fff,1px 1px 0 rgba(255,255,255,.9),-1px -1px 0 rgba(0,0,0,.3)}
.amp .cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s}
.amp .cover img.on{opacity:1}
.amp .cover::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 6px 6px 12px rgba(0,0,0,.45),inset -2px -2px 3px rgba(255,255,255,.8);pointer-events:none}
.amp .cover b{position:absolute;inset:0;display:grid;place-items:center;font:400 54px/1 var(--font);color:#9c9ca8;text-shadow:1px 1px 0 #fff,-1px -1px 1px rgba(0,0,0,.35)}

/* afficheur en verre noir */
.amp .disp{position:absolute;left:200px;top:30px;width:336px;height:82px;border-radius:6px;background:var(--glass);
  backdrop-filter:blur(5px) saturate(1.3);-webkit-backdrop-filter:blur(5px) saturate(1.3);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 8px 18px rgba(0,0,0,.55),0 0 0 1px #000,1px 1px 0 1px rgba(255,255,255,.55)}
.amp .disp::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(165deg,rgba(255,255,255,.16),transparent 38%)}
.amp .time{position:absolute;left:12px;top:0;font-size:46px;line-height:1;letter-spacing:.04em;color:var(--cream);text-shadow:0 0 10px rgba(255,79,216,.45);cursor:pointer}
.amp .vis{position:absolute;right:10px;top:6px;width:160px;height:36px}
.amp .st{position:absolute;left:12px;top:44px;font-size:13px;line-height:1;color:var(--cream-dim);letter-spacing:.14em}
.amp .st em{font-style:normal;color:var(--cyan)}
.amp .idx{position:absolute;right:12px;top:44px;font-size:13px;line-height:1;color:var(--cream-dim);letter-spacing:.14em}
.amp .marq{position:absolute;left:10px;right:10px;bottom:5px;height:20px;overflow:hidden;white-space:nowrap;border-top:1px solid rgba(255,255,255,.1);padding-top:2px}
.amp .marq span{display:inline-block;font-size:20px;line-height:18px;color:var(--cream);text-shadow:0 0 6px rgba(70,240,255,.4)}
.amp .marq.run span{animation:amp-scroll var(--d,12s) linear infinite;padding-right:48px}
@keyframes amp-scroll{to{transform:translateX(-50%)}}

/* curseurs */
.amp input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;margin:0;cursor:pointer;
  --p:0%;--c1:var(--pink);--c2:var(--cyan)}
.amp input[type=range]:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.amp input[type=range]::-webkit-slider-runnable-track{height:12px;border-radius:7px;
  background:linear-gradient(90deg,var(--c1),var(--c2)) 0/var(--p) 100% no-repeat,rgba(6,6,10,.68);
  box-shadow:inset 0 3px 5px rgba(0,0,0,.7),0 0 0 1px #000,1px 1px 0 1px rgba(255,255,255,.6)}
.amp input[type=range]::-moz-range-track{height:12px;border-radius:7px;background:rgba(6,6,10,.68);box-shadow:inset 0 3px 5px rgba(0,0,0,.7),0 0 0 1px #000,1px 1px 0 1px rgba(255,255,255,.6)}
.amp input[type=range]::-moz-range-progress{height:12px;border-radius:7px;background:linear-gradient(90deg,var(--c1),var(--c2))}
.amp input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:20px;margin-top:-4px;border:0;border-radius:48% 52% 50% 50%/55% 45% 55% 45%;
  background:radial-gradient(circle at 35% 30%,#fff,#dcdce2 55%,#a9a9b6);box-shadow:0 2px 0 #7d7d8c,0 4px 6px rgba(0,0,0,.5),inset 0 -2px 3px rgba(0,0,0,.2)}
.amp input[type=range]::-moz-range-thumb{width:22px;height:20px;border:0;border-radius:48% 52% 50% 50%/55% 45% 55% 45%;
  background:radial-gradient(circle at 35% 30%,#fff,#dcdce2 55%,#a9a9b6);box-shadow:0 2px 0 #7d7d8c,0 4px 6px rgba(0,0,0,.5)}
.amp .seek{position:absolute;left:200px;top:122px;width:336px;height:20px}
.amp .vol{position:absolute;left:236px;top:156px;width:112px;height:20px}
.amp .lbl{position:absolute;left:200px;top:158px;font-size:16px;line-height:1;letter-spacing:.14em;color:var(--cream);text-shadow:0 1px 2px #000,0 0 6px rgba(0,0,0,.8)}

/* boutons plâtre */
.amp .ctl{position:absolute;left:14px;top:150px;display:flex;gap:5px}
.amp .b{width:30px;height:32px;padding:0;display:grid;place-items:center;border:0;cursor:pointer;color:#26262e;
  border-radius:46% 54% 50% 50%/52% 48% 52% 48%;
  background:radial-gradient(ellipse at 36% 24%,#fff 0,#f1f1f4 35%,#d2d2da 75%,#bcbcc8);
  box-shadow:0 3px 0 #9797a6,0 7px 9px rgba(0,0,0,.4),inset 0 2px 3px #fff,inset 0 -3px 5px rgba(0,0,0,.16);transition:transform .08s,box-shadow .08s}
.amp .b:nth-child(2n){border-radius:52% 48% 46% 54%/48% 54% 46% 52%}
.amp .b:nth-child(3n){border-radius:50% 50% 54% 46%/54% 46% 54% 46%}
.amp .b:active,.amp .b.on{transform:translateY(2px);box-shadow:0 1px 0 #9797a6,0 3px 5px rgba(0,0,0,.4),inset 0 2px 3px #fff,inset 0 -2px 4px rgba(0,0,0,.2)}
.amp .b:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.amp .b svg{width:16px;height:16px;fill:currentColor}
.amp .b.play{width:38px;background:radial-gradient(ellipse at 36% 24%,#fff 0,#ffd9f6 30%,#b9a4ff 70%,#7fc9ff)}
.amp .b.play.on{box-shadow:0 1px 0 #9797a6,0 0 14px rgba(255,79,216,.8),inset 0 2px 3px #fff,inset 0 -2px 4px rgba(0,0,0,.2)}
.amp .tg{position:absolute;top:154px;height:24px;padding:0 10px;font:inherit;font-size:17px;line-height:22px;letter-spacing:.12em;color:var(--cream-dim);
  background:var(--glass);border:0;border-radius:12px;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 0 0 1px #000,0 2px 0 rgba(255,255,255,.45)}
.amp .tg[aria-pressed="true"]{color:#000;background:linear-gradient(90deg,var(--pink),var(--cyan));box-shadow:0 0 0 1px #000,0 0 12px rgba(70,240,255,.7)}
.amp .tg.shuf{left:362px}.amp .tg.rep{left:446px}
.amp .sc{position:absolute;right:14px;bottom:10px;font-size:15px;letter-spacing:.2em;color:var(--cream);text-shadow:0 1px 2px #000,0 0 6px rgba(0,0,0,.8)}

/* liste de lecture */
.amp .win.pl .body{padding:10px 12px 8px}
.amp .win.pl[hidden]{display:none}
.amp .list{margin:0;padding:4px;list-style:none;height:156px;overflow:auto;border-radius:6px;background:var(--glass);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);box-shadow:inset 0 6px 14px rgba(0,0,0,.55),0 0 0 1px #000,1px 1px 0 1px rgba(255,255,255,.5);
  scrollbar-width:thin;scrollbar-color:#9a9aac #111}
.amp .list li{display:grid;grid-template-columns:30px 1fr auto;gap:6px;align-items:center;padding:1px 6px;font-size:19px;line-height:20px;color:var(--cream);cursor:pointer;border-radius:3px}
.amp .list li:hover{background:rgba(255,255,255,.1)}
.amp .list li.cur{color:#000;background:linear-gradient(90deg,var(--pink),var(--cyan));text-shadow:none}
.amp .list li i{font-style:normal;opacity:.7}
.amp .list li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.amp .list li button{font:inherit;font-size:18px;line-height:1;padding:0;color:inherit;background:none;border:0;cursor:pointer;opacity:0}
.amp .list li:hover button,.amp .list li button:focus-visible{opacity:.9}
.amp .list li.empty{cursor:default;color:var(--cream-dim)}
.amp .plf{display:flex;justify-content:flex-end;align-items:center;margin-top:8px}
.amp .plf{justify-content:flex-end}
.amp .plf .b{width:auto;height:26px;padding:0 14px;border-radius:14px;font:inherit;font-size:18px;letter-spacing:.1em}
.amp .plf small{font-size:16px;letter-spacing:.12em;color:var(--cream);text-shadow:0 1px 2px #000,0 0 6px rgba(0,0,0,.9)}
.amp .err{position:absolute;left:200px;right:14px;top:182px;font-size:16px;line-height:1.1;color:#ffd0e8;text-shadow:0 1px 2px #000}

/* égaliseur */
.amp .win.eq[hidden]{display:none}
.amp .win.eq .body{padding:10px 14px 8px}
.amp .eqtop{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.amp .tg2{font:inherit;font-size:17px;line-height:20px;letter-spacing:.1em;height:24px;padding:0 10px;color:var(--cream-dim);background:var(--glass);border:0;border-radius:12px;cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 0 0 1px #000,0 2px 0 rgba(255,255,255,.45)}
.amp .tg2[aria-pressed="true"]{color:#000;background:linear-gradient(90deg,var(--pink),var(--cyan))}
.amp .tg2:active{transform:translateY(1px)}
.amp .tg2:focus-visible,.amp select:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.amp select{font:inherit;font-size:18px;height:24px;flex:1;min-width:0;padding:0 8px;color:var(--cream);background:var(--glass);border:0;border-radius:6px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 0 0 1px #000}
.amp select option{background:#15151b;color:var(--cream)}
.amp .eqbands{display:flex;align-items:flex-end;gap:2px;height:122px;padding:6px 8px 0;border-radius:8px;background:var(--glass);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);box-shadow:inset 0 6px 14px rgba(0,0,0,.55),0 0 0 1px #000,1px 1px 0 1px rgba(255,255,255,.5)}
.amp .eqs{display:flex;flex-direction:column;justify-content:space-between;height:92px;padding:3px 4px 3px 0;font-size:14px;line-height:1;color:var(--cream-dim)}
.amp .eqb{position:relative;flex:1;height:112px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.amp .eqb input{position:absolute;left:50%;top:44px;width:92px;margin:-10px 0 0 -46px;transform:rotate(-90deg)}
.amp .eqb label{position:relative;font-size:15px;line-height:1;color:var(--cream);padding-bottom:3px}
.amp .eqb.pre label{color:var(--cyan)}
.amp .eqbands .sp{width:10px;flex:none}
.amp .win.eq.off .eqbands{opacity:.5}
.amp .eqbot{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:17px;letter-spacing:.12em;color:var(--cream);text-shadow:0 1px 2px #000,0 0 6px rgba(0,0,0,.9)}
.amp .eqbot input{width:150px;--c1:var(--blue);--c2:var(--pink)}
.amp .eqbot small{margin-left:auto;font-size:15px;letter-spacing:.1em;color:var(--cream-dim)}
.amp .eqbot small.real{color:var(--cyan)}

@media (prefers-reduced-motion:reduce){.amp .marq.run span{animation:none}.amp .b{transition:none}}