/* ===== RESET NATIF BOUTONS (Chrome Android) ===== */
button,
button:hover,
button:focus,
button:active,
button:focus-visible,
button:focus-within {
  -webkit-appearance: none !important;
  appearance: none !important;
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
  background-color: transparent !important;
}

/* ===== GLOBAL ===== */
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: radial-gradient(circle at top, #1b1f27, #0d1117);
  color: #e6e6e6;
}

main {
  max-width: 1100px;
  margin: auto;
  padding: 40px 20px;
}

footer {
  text-align: center;
  padding: 20px;
  font-size: 0.9em;
  color: #aaa;
}

/* ===== BANDEAU ===== */
.top-banner {
  height: 220px;
  background:
    linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)),
    url("imgs/baner.jpg") center / cover no-repeat;
  border-bottom: 2px solid #000;
}

.banner-content {
  height: 100%;
  max-width: 1100px;
  margin: auto;
  padding: 0 20px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

.station-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: "Courier New", monospace;
  flex-wrap: wrap;
}

.station-call {
  color: #5ddcff;
  font-weight: bold;
}

.station-name {
  font-size: 2.6rem;
  letter-spacing: 4px;
  color: #ffcc66;
  text-shadow:
    0 0 6px rgba(255,180,80,0.6),
    0 0 18px rgba(0,0,0,0.9);
}

.station-zone {
  background: rgba(255, 180, 80, 0.15);
  color: #ffcc66;
  border: 1px solid rgba(255, 180, 80, 0.4);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.75em;
  font-family: system-ui, Arial;
  box-shadow: 0 0 6px rgba(0,0,0,0.6);
  margin-left: auto;
}

.station-sub {
  font-family: "Courier New", monospace;
  font-size: 0.95em;
  color: #6cff9f;
  text-shadow: 0 0 6px rgba(0,0,0,0.8);
}

/* ===== TRANSCEIVER ===== */
.trx {
  background: linear-gradient(145deg, #2a2f36, #0f1216);
  border: 2px solid #555;
  border-radius: 14px;
  padding: 22px;
  max-width: 760px;
  margin: auto;
  box-shadow: inset 0 0 15px #000, 0 10px 30px rgba(0,0,0,0.7);
}

.trx-header {
  display: flex;
  justify-content: space-between;
  font-weight: bold;
  margin-bottom: 12px;
}

.brand { color: #5ddcff; }
.model { color: #ccc; }

.led {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.75em;
  background: #111;
  color: #777;
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: inset 0 0 4px rgba(0,0,0,0.8);
}

.led.onair {
  background: #300;
  color: #ff5555;
  border-color: #800;
  box-shadow:
    0 0 6px rgba(255,0,0,0.9),
    inset 0 0 6px rgba(255,0,0,0.6);
}

/* ===== SCREEN ===== */
.trx-screen {
  background: linear-gradient(#052417, #03160e);
  color: #6cff9f;
  font-family: "Courier New", monospace;
  padding: 15px;
  border-radius: 6px;
  margin-bottom: 0px;
  box-shadow: inset 0 0 12px #000;
}

/* ===== COMMANDES (desktop) ===== */
.trx-controls-line {
  display: grid;
  grid-template-columns: 90px auto 90px;
  align-items: center;
  justify-items: center;
  margin-top: 0px;
  margin-bottom: 28px;
}

.trx-controls {
  grid-column: 2;
  display: flex;
  gap: 22px;
  justify-content: center;
  align-items: center;
}

/* Boutons ronds */
.btn-round {
  border-radius: 50%;
  background: linear-gradient(#2a2a2a, #141414);
  border: 2px solid #555;
  color: #eee;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow:
    inset 0 0 8px #000,
    0 4px 8px rgba(0,0,0,0.7);

  padding: 0;

  /* Reset natif Chrome Android / iOS Safari */
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  accent-color: transparent;
  outline: none !important;
  isolation: isolate;
}

.btn-round:focus,
.btn-round:focus-visible {
  outline: none;
  background: linear-gradient(#2a2a2a, #141414) !important;
  accent-color: transparent;
  -webkit-tap-highlight-color: transparent;
  color: #eee;
}

.btn-round.small {
  width: 48px;
  height: 48px;
  font-size: 1.2em;
}

.btn-round.big {
  width: 78px;
  height: 78px;
  font-size: 1.8em;
}

.btn-round .icon {
  display: block;
  pointer-events: none;
  position: relative;
  width: 24px;
  height: 24px;
}

/* Triangle PLAY en pur CSS */
#playPause .icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 55%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 11px 0 11px 19px;
  border-color: transparent transparent transparent #eee;
}

/* Barres PAUSE en pur CSS — visibles seulement quand .paused */
#playPause .icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 20px;
  background: linear-gradient(to right, #eee 35%, transparent 35%, transparent 65%, #eee 65%);
  display: none;
}

/* Quand en pause : cacher le triangle, montrer les barres */
#playPause.paused .icon::before {
  display: none;
}
#playPause.paused .icon::after {
  display: block;
}

.btn-round.play .icon {
  transform: none;
}

.btn-round.pause .icon {
  transform: none;
}

#forward .icon {
  transform: translateX(1px);
}

#rewind .icon {
  transform: translateX(-1px);
}

/* ===== VOLUME KNOB ===== */
.volume-knob {
  grid-column: 3;
  justify-self: end;
  margin-right: 100px;
  margin-top: 100px;
}

.knob {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle, #333, #111);
  border: 2px solid #666;
  position: relative;
}

.knob-indicator {
  position: absolute;
  width: 3px;
  height: 22px;
  background: #ffcc66;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -100%) rotate(0deg);
  transform-origin: 50% 100%;

  border-radius: 2px;
}

.knob-label {
  font-size: 12px;
  margin-top: 6px;
  text-align: center;
  width: 100%;
  letter-spacing: 1px;
}

/* ===== SLIDER AUDIO ===== */
.trx-slider {
  display: flex;
  align-items: center;
  gap: 10px;
}

.trx-slider input {
  flex: 1;
}

/* ===== COMPTEURS ===== */
.live-listeners {
  margin-top: 8px;
  font-family: "Courier New", monospace;
  font-size: 0.85em;
  color: #6cff9f;
}

.counter-visits {
  margin-top: 6px;
  font-size: 0.85em;
  color: #aaa;
}

.archives li {
  padding: 10px;
  margin-top: 8px;
  background: #161b22;
  border-left: 4px solid #0a84ff;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.archive-name {
  flex: 1;
}

.play-count {
  font-size: 0.75em;
  color: #5ddcff;
  font-family: "Courier New", monospace;
  white-space: nowrap;
  flex-shrink: 0;
}

.archives li.active {
  background: #0a84ff;
  color: #000;
}

.archives li.active .play-count {
  color: #000;
}
  padding: 15px;
}

.archives ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* === ANTI-SELECTION === */
html, body, .trx, .trx * {
  -webkit-user-select: none;
  user-select: none;
}

.archives, .archives * {
  -webkit-user-select: text;
  user-select: text;
}

.knob, .btn-round {
  -webkit-tap-highlight-color: transparent;
}



/* ===== SDR ZONE ===== */
.sdr-zone {
  margin-top: 20px;
  padding: 12px;
  background: #10151c;
  border-radius: 8px;
}

.sdr-line {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sdr-btn {
  flex-shrink: 0;
  border-color: #6cff9f;
  box-shadow:
    inset 0 0 8px #000,
    0 0 10px rgba(108, 255, 159, 0.5),
    0 4px 8px rgba(0,0,0,0.7);
}

.sdr-btn.btn-disabled {
  opacity: 0.70;
  filter: grayscale(100%) brightness(0.3);
  cursor: not-allowed;
  border-color: #555;
  box-shadow: inset 0 0 8px #000;
}

.stream-status {
  margin-left: auto;
  font-size: 13px;
  font-family: monospace;
  color: orange;
}

.stream-status.connecting {
  color: orange;
}

.stream-status.live {
  color: #00ff88;
}

.stream-status.error {
  color: #ff4d4d;
}

.sdr-status {
  font-family: "Courier New", monospace;
}

.sdr-free {
  color: #6cff9f;
}

.sdr-busy {
  color: #ff5555;
}

.sdr-controls {
  display: flex;
  gap: 10px;
}

/* ===========================
   RESPONSIVE – TABLETTE
=========================== */
@media (max-width: 768px) {

  main {
    padding: 20px 12px;
  }

  .top-banner {
    height: 160px;
  }

  .station-name {
    font-size: 1.8rem;
    letter-spacing: 2px;
  }

  .station-zone {
    margin-left: 0;
  }

  .trx {
    padding: 16px;
  }

  /* Sur tablette on garde le knob mais on réduit la marge */
  .volume-knob {
    margin-right: 20px;
    margin-top: 60px;
  }

  .trx-controls-line {
    grid-template-columns: 70px auto 70px;
    margin-bottom: 20px;
  }

}

/* ===========================
   RESPONSIVE – MOBILE
=========================== */
@media (max-width: 480px) {

  main {
    padding: 12px 10px;
  }

  .top-banner {
    height: 130px;
  }

  .banner-content {
    gap: 6px;
  }

  .station-bar {
    gap: 8px;
  }

  .station-call {
    font-size: 0.9em;
  }

  .station-sep {
    display: none;
  }

  .station-name {
    font-size: 1.3rem;
    letter-spacing: 1px;
  }

  .station-zone {
    margin-left: 0;
    font-size: 0.7em;
    padding: 3px 7px;
  }

  .station-sub {
    font-size: 0.8em;
  }

  .trx {
    padding: 14px 12px;
    border-radius: 10px;
  }

  .trx-screen {
    padding: 10px 12px;
  }

  .trx-screen .freq {
    font-size: 1.1em;
  }

  .trx-screen .track {
    font-size: 0.82em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Contrôles : on cache le knob volume sur mobile */
  .volume-knob {
    display: none;
  }

  /* Sans knob : grille sur 2 colonnes (spacer + contrôles) */
  .trx-controls-line {
    grid-template-columns: 0 auto;
    margin-bottom: 18px;
    margin-top: 6px;
  }

  .controls-spacer {
    display: none;
  }

  .trx-controls {
    gap: 16px;
  }

  .btn-round.small {
    width: 52px;
    height: 52px;
    font-size: 1.3em;
  }

  .btn-round.big {
    width: 72px;
    height: 72px;
    font-size: 1.7em;
  }

  /* Slider */
  .trx-slider {
    gap: 8px;
    font-size: 0.85em;
  }

  /* SDR zone */
  .sdr-zone {
    margin-top: 14px;
    padding: 10px;
  }

  .sdr-line {
    gap: 10px;
    flex-wrap: wrap;
  }

  .sdr-free {
    font-size: 0.85em;
  }

  .stream-status {
    font-size: 12px;
  }

  /* Archives */
  .archives {
    margin-top: 16px;
    padding: 10px;
    border-radius: 8px;
  }

  .archives h2 {
    font-size: 1em;
    margin: 0 0 10px 0;
  }

  .archives li {
    padding: 10px 10px;
    font-size: 0.88em;
    margin-top: 6px;
  }

  footer {
    font-size: 0.8em;
    padding: 14px;
  }

}
/* ====== Slider live – texte uniquement, pas de barre ====== */
#liveSlider input[type=range] {
  display: none;
}
#liveSlider {
  justify-content: space-between;
  padding: 2px 0;
  font-size: 0.85rem;
  opacity: 0.85;
}

/* ====== RRF ====== */
.rrf-bandeau {
  border-top: 1px solid rgba(255,255,255,0.12);
  margin-top: 6px;
  padding-top: 6px;
}
.rrf-slider {
  border-bottom: 1px solid rgba(255,255,255,0.12);
  margin-bottom: 6px;
  padding-bottom: 6px;
}

/* ====== Bouton STOP live ====== */
.stop-btn {
  flex-shrink: 0;
  margin-left: 10px;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888;
  font-size: 0.6rem;
  line-height: 1;
  padding: 0;
}
.stop-btn:hover {
  color: #ff5050;
  border-color: #ff5050;
}