/* Finitions visuelles uniquement : la mise en page repose sur Bootstrap. */
:root {
  --bg: #0f1216;
  --surface: #171b21;
  --surface-2: #1f252d;
  --border: #2a313b;
  --text: #e8ecf1;
  --muted: #a8b2be;
  --accent: #3ddc97;
  --accent-ink: #06281a;
  --danger: #ff7b7b;
  --warn: #ffc857;
  --warn-ink: #2b2100;
  --accent-hover: #5ee8ac;
  --header-bg: rgba(15, 18, 22, .95);
  --player-bg: rgba(23, 27, 33, .98);
  --player-h: 9.5rem; /* ajusté dynamiquement par app.js */
}

/* Thème clair : activé par data-bs-theme="light" (posé sur <html> par le script d'en-tête et app.js) */
[data-bs-theme="light"] {
  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #eaeef3;
  --border: #cfd6df;
  --text: #1b2129;
  --muted: #566170;
  --accent: #0a7d53;
  --accent-ink: #ffffff;
  --accent-hover: #086645;
  --danger: #c62828;
  --warn: #a85d00;
  --warn-ink: #ffffff;
  --header-bg: rgba(244, 246, 249, .95);
  --player-bg: rgba(255, 255, 255, .98);
}

html, body { background: var(--bg); color: var(--text); }
body { padding-bottom: calc(var(--player-h) + env(safe-area-inset-bottom, 0px)); }

.min-w-0 { min-width: 0; }
.text-accent { color: var(--accent); }
.text-muted-ui { color: var(--muted); }
.btn-touch { min-height: 48px; }

.app-header { background: var(--header-bg); border-bottom: 1px solid var(--border); }

/* Boutons */
.btn-accent { background: var(--accent); color: var(--accent-ink); border: 0; }
.btn-accent:hover, .btn-accent:focus-visible { background: var(--accent-hover); color: var(--accent-ink); }
.btn-accent:disabled { background: var(--surface-2); color: var(--muted); opacity: 1; }
.btn-play { width: 56px; height: 56px; border-radius: 50%; font-size: 1.9rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: 0; }
.btn-icon { width: 44px; height: 44px; font-size: 1.35rem; line-height: 1; padding: 0; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Logo / illustration */
.logo { width: 48px; height: 48px; flex: 0 0 auto; border-radius: .5rem; background: var(--surface-2);
  display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--muted); font-size: 1.5rem; }
.logo-lg { width: 56px; height: 56px; font-size: 1.75rem; }
.logo img { width: 100%; height: 100%; object-fit: contain; }

/* Cartes de stations */
.station-card { display: flex; align-items: center; background: var(--surface); border: 1px solid var(--border);
  border-radius: .75rem; min-width: 0; }
.station-card.is-current { border-color: var(--accent); }
.station-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: .75rem; min-height: 64px;
  padding: .5rem .5rem .5rem .75rem; background: none; border: 0; color: inherit; text-align: left; border-radius: .75rem; }
.station-name { font-weight: 600; }
.station-meta { font-size: .8rem; color: var(--muted); }
.badge-http { font-size: .7rem; color: var(--warn); border: 1px solid var(--warn); border-radius: .35rem; padding: 0 .3rem; margin-left: .35rem; }
.station-action { flex: 0 0 auto; width: 44px; height: 44px; margin-right: .25rem; display: inline-flex; align-items: center;
  justify-content: center; background: none; border: 0; border-radius: 50%; color: var(--muted); font-size: 1.2rem; text-decoration: none; }
.station-action:hover { color: var(--text); }
.btn-fav[aria-pressed="true"] { color: var(--warn); }

/* Indicateur visuel de lecture (égaliseur) */
.eq { display: none; align-items: flex-end; gap: 2px; height: 14px; flex: 0 0 auto; }
.eq.is-playing { display: inline-flex; }
.eq span { width: 3px; height: 100%; background: var(--accent); border-radius: 1px; transform-origin: bottom;
  animation: eq 900ms ease-in-out infinite; }
.eq span:nth-child(2) { animation-delay: -300ms; }
.eq span:nth-child(3) { animation-delay: -600ms; }
@keyframes eq { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .eq span { animation: none; transform: scaleY(.7); } }

/* Barre de lecture */
.player { background: var(--player-bg); border-top: 1px solid var(--border);
  padding: .75rem 0 calc(.75rem + env(safe-area-inset-bottom, 0px)); }
.status-dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--muted); flex: 0 0 auto; }
.status-connecting, .status-buffering, .status-interrupted { background: var(--warn); }
.status-playing { background: var(--accent); }
.status-error { background: var(--danger); }
.volume-value { width: 3ch; text-align: right; }
#status-text { min-width: 0; }

/* Curseur de volume aux couleurs de l'application */
.form-range::-webkit-slider-thumb { background: var(--accent); }
.form-range::-moz-range-thumb { background: var(--accent); }
.form-range { accent-color: var(--accent); }

/* Navigation inférieure (Radios / Favoris / En lecture) */
.bottom-nav { display: flex; margin-top: .5rem; padding-top: .25rem; border-top: 1px solid var(--border); }
.nav-item-btn { position: relative; flex: 1 1 0; min-height: 52px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: .1rem; background: none; border: 0; border-radius: .5rem; color: var(--muted);
  font-size: .75rem; text-decoration: none; }
.nav-item-btn i { font-size: 1.3rem; line-height: 1; }
.nav-item-btn:hover { color: var(--text); }
.nav-item-btn[aria-current="page"] { color: var(--accent); }
.nav-item-btn:disabled { opacity: .45; }
.nav-badge { position: absolute; top: 2px; left: calc(50% + .45rem); min-width: 1.15rem; padding: 0 .3rem; border-radius: 1rem;
  background: var(--warn); color: var(--warn-ink); font-size: .7rem; font-weight: 600; line-height: 1.15rem; text-align: center; }

/* Défilement vers la station en cours (hors de la barre de lecture fixe) */
.station-card { scroll-margin-top: 4.5rem; scroll-margin-bottom: calc(var(--player-h) + 1rem); transition: background-color .3s; }
.station-card.flash { background: var(--surface-2); }

/* ===== Accueil : en-tête compact, sections de cards ===== */
.search-group { flex: 1 1 100%; }
@media (min-width: 768px) { .search-group { flex: 1 1 0; max-width: 32rem; } }
.home-section { margin-bottom: 1.5rem; }
.section-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 .5rem; }
.cat-card { width: 100%; height: 100%; text-align: left; color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: .75rem; padding: 0; cursor: pointer;
  transition: border-color .15s, background-color .15s; }
.cat-card:hover { border-color: var(--accent); background: var(--surface-2); }
.cat-icon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: .6rem; background: var(--surface-2); color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; line-height: 1; }
.cat-flag { font-size: 1.5rem; }
.cat-title { font-weight: 600; line-height: 1.2; font-size: .95rem; }
.cat-sub { font-size: .78rem; color: var(--muted); line-height: 1.25; }
.chip { display: inline-flex; align-items: center; gap: .4rem; background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 2rem; padding: .3rem .75rem; font-size: .85rem; min-height: 36px; }
.chip:hover { border-color: var(--accent); }

/* Volet Paramètres */
.settings-panel { height: auto; max-height: 80vh; background: var(--surface); color: var(--text);
  padding-bottom: env(safe-area-inset-bottom, 0px); }