/* push&pull amp — habillage bleu-argent façon lecteur mp3 des années 2000 */

.amp {
  --navy: #0c1a36; --navy-2: #14264a; --lcd: #b9d0ff; --lcd-dim: #4e6390;
  --chrome-1: #eef2f8; --chrome-2: #c3ccdb; --chrome-3: #98a5bb; --edge: #46536b;
  width: 275px; user-select: none; -webkit-user-select: none;
  font: 8px var(--pix, monospace); color: #2a3346;
  filter: drop-shadow(0 4px 10px rgba(20, 30, 60, .25));
}
.amp button { font: inherit; color: inherit; cursor: pointer; }
.win {
  margin-bottom: 3px; padding: 0 5px 5px;
  background: linear-gradient(var(--chrome-1), var(--chrome-2) 55%, var(--chrome-3));
  border: 1px solid var(--edge); border-radius: 5px;
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0,0,0,.15);
}

/* barre de titre */
.tb {
  display: flex; align-items: center; gap: 6px; height: 15px; margin: 0 -5px 5px; padding: 0 8px;
  background: linear-gradient(#3e5891, #22355f 60%, #1a2a4d); border-radius: 4px 4px 0 0;
  color: #d6e1f7; text-transform: uppercase; letter-spacing: 1px;
}
.tb i { flex: 1; height: 5px; background: repeating-linear-gradient(#7d93c4 0 1px, transparent 1px 2px); opacity: .7; }
.tb span { white-space: nowrap; text-shadow: 0 1px 0 #0b1530; }

/* écran */
.lcd {
  display: grid; grid-template-columns: 92px 1fr; gap: 5px; height: 48px; padding: 4px 5px;
  background: radial-gradient(120% 140% at 30% 0%, var(--navy-2), var(--navy) 70%);
  border: 1px solid #08112a; border-radius: 3px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.7), 0 1px 0 #fff;
  color: var(--lcd);
}
.lcd-l { position: relative; display: grid; grid-template-rows: 1fr auto; }
.st { position: absolute; left: 0; top: 2px; width: 7px; height: 8px; }
.st.is-play { background: #8fd18f; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.st.is-pause { background: linear-gradient(90deg, #e8c36a 0 35%, transparent 35% 65%, #e8c36a 65%); }
.st.is-stop { background: var(--lcd-dim); }
.lcd-time { justify-self: end; font: 16px/1 var(--pix, monospace); letter-spacing: 1px; color: #d4e3ff; text-shadow: 0 0 6px rgba(140, 180, 255, .6); cursor: pointer; padding-top: 1px; }
.viz { width: 76px; height: 18px; justify-self: end; image-rendering: pixelated; }
.lcd-r { min-width: 0; display: grid; grid-template-rows: 1fr auto; }
.scroll { white-space: pre; overflow: hidden; color: #e3ecff; padding-top: 3px; letter-spacing: .3px; }
.info { display: flex; align-items: baseline; gap: 3px; color: var(--lcd-dim); }
.info b { font-weight: normal; color: var(--lcd); background: rgba(255,255,255,.06); padding: 0 2px; }
.info em { font-style: normal; margin-left: auto; }
.info em + em { margin-left: 4px; }
.info em.on { color: #c8dcff; text-shadow: 0 0 4px rgba(150,190,255,.8); }

/* curseurs */
.row-sl { display: flex; align-items: center; gap: 5px; margin: 6px 0 4px; }
.amp input[type=range] { -webkit-appearance: none; appearance: none; background: transparent; margin: 0; cursor: pointer; }
.vol { width: 80px; height: 12px; --p: 80%; }
.bal { width: 38px; height: 12px; }
.row-sl .pill { padding: 2px 5px 1px; }
.vol::-webkit-slider-runnable-track { height: 5px; border-radius: 3px; border: 1px solid #5d6a82; background: linear-gradient(90deg, #39b54a, #e2d23b 60%, #e0472f) 0 0 / var(--p) 100% no-repeat, #26324a; }
.bal::-webkit-slider-runnable-track { height: 5px; border-radius: 3px; border: 1px solid #5d6a82; background: #26324a; }
.vol::-moz-range-track, .bal::-moz-range-track { height: 5px; border-radius: 3px; border: 1px solid #5d6a82; background: #26324a; }
.vol::-webkit-slider-thumb, .bal::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 9px; margin-top: -3px; border-radius: 3px; background: linear-gradient(#fff, #b5c0d2); border: 1px solid #56627a; }
.vol::-moz-range-thumb, .bal::-moz-range-thumb { width: 14px; height: 9px; border-radius: 3px; background: linear-gradient(#fff, #b5c0d2); border: 1px solid #56627a; }

.pill {
  padding: 2px 6px 1px; border-radius: 8px; text-transform: uppercase;
  background: linear-gradient(#fdfdfd, #c5cede); border: 1px solid #6a768d; color: #4a556b;
  box-shadow: 0 1px 0 rgba(255,255,255,.7);
}
.pill:active { background: linear-gradient(#c5cede, #eef2f8); }
.pill.on { color: #fff; background: linear-gradient(#7ea2ec, #3f62b3); border-color: #2c447c; text-shadow: 0 1px 0 #1c2f5e; }
.row-sl .pill:first-of-type { margin-left: auto; }

.seek { width: 100%; height: 12px; --p: 0%; }
.seek::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; border: 1px solid #5d6a82; background: linear-gradient(90deg, #6f95e6, #a8c2f7) 0 0 / var(--p) 100% no-repeat, #26324a; }
.seek::-moz-range-track { height: 6px; border-radius: 3px; border: 1px solid #5d6a82; background: #26324a; }
.seek::-moz-range-progress { height: 6px; background: #6f95e6; border-radius: 3px; }
.seek::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 10px; margin-top: -3px; border-radius: 4px; background: linear-gradient(#fff, #b5c0d2); border: 1px solid #56627a; }
.seek::-moz-range-thumb { width: 26px; height: 10px; border-radius: 4px; background: linear-gradient(#fff, #b5c0d2); border: 1px solid #56627a; }

/* transport */
.row-tr { display: flex; align-items: center; gap: 3px; margin-top: 5px; }
.rb {
  display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #ffffff, #d5dce8 55%, #9eabc2);
  border: 1px solid #57637b; box-shadow: inset 0 -2px 3px rgba(0,0,0,.12), 0 1px 0 rgba(255,255,255,.8);
}
.rb svg { width: 9px; height: 9px; fill: #2f3a50; }
.rb:active { background: radial-gradient(circle at 50% 70%, #ffffff, #c7d0de 60%, #9eabc2); }
.rb--sm { width: 19px; height: 19px; margin-left: 2px; }
.rb--sm svg { width: 7px; height: 7px; }
.amp.is-playing .rb[data-a="play"] svg { fill: #2c6a2c; }
.tr-tog { display: flex; gap: 2px; margin-left: 4px; }
.badge {
  margin-left: auto; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #d7e27a, var(--lime, #b5c33b) 60%, #7f8a1c); color: #fff;
  font: 700 8px/1 var(--round, Verdana); border: 1px solid #6c7618; text-shadow: 0 1px 0 #6c7618;
}

/* égaliseur */
.eq-top { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; }
.pill--lit.on { background: linear-gradient(#a7ef9a, #3fae35); border-color: #2a6b23; color: #fff; text-shadow: 0 1px 0 #2a6b23; }
.eq-curve { flex: 1; height: 19px; width: 0; background: var(--navy); border: 1px solid #08112a; border-radius: 2px; }
.presets {
  font: 8px var(--pix, monospace); text-transform: uppercase; color: #4a556b;
  padding: 2px 4px 1px; border-radius: 8px; border: 1px solid #6a768d; background: linear-gradient(#fdfdfd, #c5cede);
  -webkit-appearance: none; appearance: none; cursor: pointer; width: 64px;
}
.eq-body {
  display: grid; grid-template-columns: 22px 26px repeat(10, 1fr); align-items: stretch; gap: 0;
  height: 92px; padding: 5px 2px 2px; background: rgba(30, 45, 80, .1); border: 1px solid #8794ab; border-radius: 3px;
}
.eq-col { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.eq-col span { font-size: 7px; letter-spacing: 0; color: #46516a; white-space: nowrap; transform: scale(.92); }
.eq-pre span { font-size: 6px; }
.eq-scale { display: flex; flex-direction: column; justify-content: space-between; font-size: 6px; color: #56627a; padding: 0 1px 11px; white-space: nowrap; transform-origin: left; }
.vs { writing-mode: vertical-lr; direction: rtl; width: 14px; flex: 1; min-height: 0; }
.vs::-webkit-slider-runnable-track { width: 4px; border-radius: 2px; background: #26324a; border: 1px solid #5d6a82; }
.vs::-moz-range-track { width: 4px; border-radius: 2px; background: #26324a; }
.vs::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 8px; margin-left: -5px; border-radius: 2px; background: linear-gradient(#fff, #b5c0d2); border: 1px solid #56627a; }
.vs::-moz-range-thumb { width: 12px; height: 8px; border-radius: 2px; background: linear-gradient(#fff, #b5c0d2); border: 1px solid #56627a; }

/* reverb */
.rv-lcd {
  flex: 1; height: 19px; display: grid; place-items: center;
  background: var(--navy); border: 1px solid #08112a; border-radius: 2px;
  color: var(--lcd); text-shadow: 0 0 4px rgba(140, 180, 255, .5); letter-spacing: .5px;
}
.rv-body { display: grid; gap: 4px; padding: 6px 6px 5px; background: rgba(30, 45, 80, .1); border: 1px solid #8794ab; border-radius: 3px; }
.rv-row { display: grid; grid-template-columns: 58px 1fr 36px; align-items: center; gap: 6px; text-transform: uppercase; color: #46516a; }
.rv-row b { font-weight: normal; text-align: right; color: var(--lcd); background: var(--navy); border-radius: 2px; padding: 1px 3px; font-size: 7px; }
.rs { width: 100%; height: 12px; }
.rs::-webkit-slider-runnable-track { height: 5px; border-radius: 3px; border: 1px solid #5d6a82; background: #26324a; }
.rs::-moz-range-track { height: 5px; border-radius: 3px; border: 1px solid #5d6a82; background: #26324a; }
.rs::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 9px; margin-top: -3px; border-radius: 2px; background: linear-gradient(#fff, #b5c0d2); border: 1px solid #56627a; }
.rs::-moz-range-thumb { width: 12px; height: 9px; border-radius: 2px; background: linear-gradient(#fff, #b5c0d2); border: 1px solid #56627a; }
.amp.rv-off .rv-row, .rv-row.is-off input, .rv-row.is-off b { opacity: .5; }
.rv-row { grid-template-columns: 62px 1fr 38px; }
.fx-tog { padding: 2px 0 1px; width: 100%; text-align: center; }
.w-rv .rv-lcd { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0 4px; }

/* playlist */
.pl-list {
  list-style: none; margin: 0; padding: 3px 0; height: 142px; overflow-y: auto;
  background: var(--navy); border: 1px solid #08112a; border-radius: 3px;
  font: 10px/1.6 Verdana, Tahoma, sans-serif; color: #cfe0ff;
}
.pl-list li { display: flex; justify-content: space-between; gap: 6px; padding: 0 6px; cursor: default; white-space: nowrap; }
.pl-list li span:first-child { overflow: hidden; text-overflow: ellipsis; }
.pl-list li.sel { background: #2b4479; }
.pl-list li.cur { color: #fff; font-weight: bold; }
.pl-list li.cur.sel, .pl-list li.cur { background: #4565b4; }
.pl-list::-webkit-scrollbar { width: 8px; }
.pl-list::-webkit-scrollbar-thumb { background: #8a9bc2; border-radius: 4px; }
.pl-foot { display: flex; align-items: center; gap: 3px; margin-top: 5px; }
.pl-total { margin-left: auto; padding: 2px 6px 1px; background: var(--navy); color: var(--lcd); border-radius: 2px; border: 1px solid #08112a; }

/* lecteur vidéo (post « la vidéo est là ») : même habillage que le lecteur de musique */
.vamp { width: auto; max-width: 520px; margin: 8px auto 10px; }
.vamp .win { margin: 0; }
.vscreen { position: relative; background: #000; border: 1px solid #08112a; border-radius: 3px; overflow: hidden; box-shadow: inset 0 1px 3px rgba(0,0,0,.7), 0 1px 0 #fff; }
.vscreen video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.vbig {
  position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%;
  display: grid; place-items: center; background: radial-gradient(circle at 50% 30%, #ffffff, #d5dce8 55%, #9eabc2);
  border: 1px solid #57637b; box-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.vbig svg { width: 20px; height: 20px; fill: #2f3a50; margin-left: 3px; }
.vamp.is-playing .vbig { display: none; }
.vamp .seek { margin-top: 6px; }
.vlcd { margin-left: 4px; padding: 2px 6px 1px; background: var(--navy); color: var(--lcd); border-radius: 2px; border: 1px solid #08112a; letter-spacing: .5px; white-space: nowrap; }
.vlcd b { font-weight: normal; color: #d4e3ff; }
.vamp .vol { width: 70px; margin-left: auto; }

/* menus de presets maison (même habillage que la playlist) */
.pmenu { position: relative; display: inline-block; flex: none; }
.pmenu-btn { text-align: left; position: relative; padding-right: 14px; }
.pmenu-btn::after { content: ""; position: absolute; right: 6px; top: 50%; margin-top: -2px; border: 3px solid transparent; border-top: 4px solid #4a556b; }
.pmenu.open .pmenu-btn { color: #fff; background: linear-gradient(#7ea2ec, #3f62b3); border-color: #2c447c; }
.pmenu.open .pmenu-btn::after { border-top-color: #fff; }
.pmenu-list {
  position: absolute; right: 0; top: calc(100% + 3px); z-index: 50;
  min-width: 158px; margin: 0; padding: 3px 0; list-style: none;
  background: var(--navy); border: 1px solid #5d6a82; border-radius: 3px;
  box-shadow: 0 0 0 1px #08112a, 0 8px 18px rgba(10, 20, 45, .45);
  font: 8px/1 var(--pix, monospace); text-transform: uppercase; letter-spacing: .5px;
}
.pmenu-list[hidden] { display: none; }
.pmenu-head { padding: 4px 8px 5px; margin-bottom: 2px; color: var(--lcd-dim); border-bottom: 1px dotted #2b4479; }
.pmenu-item { padding: 5px 8px 4px; color: #cfe0ff; cursor: pointer; white-space: nowrap; outline: none; }
.pmenu-item:hover, .pmenu-item:focus { background: #4565b4; color: #fff; }
.pmenu-item::before { content: "› "; color: var(--lcd-dim); }
.pmenu-item:hover::before, .pmenu-item:focus::before { color: #fff; }

/* le lecteur passe au-dessus des encadrés qui le suivent (sinon le menu FXS est coupé) */
#amp.amp { position: relative; z-index: 30; }