/* ============================================================
   RADIO ALPINE — Responsive / Media Queries
   assets/css/responsive.css
   ============================================================ */

/* ── Tablette (max 1024px) ── */
@media (max-width: 1024px) {
  .programmes-grid     { grid-template-columns: repeat(2, 1fr); }
  .stations-grid       { grid-template-columns: repeat(3, 1fr); }
  .footer-inner        { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-brand        { grid-column: 1 / -1; }
  .player-freq         { display: none; }
}

/* ── Mobile (max 768px) ── */
@media (max-width: 768px) {

  /* Header */
  header              { padding: 0.75rem 1rem; }
  nav.main-nav        { display: none; }
  .hamburger          { display: flex; }
  .live-badge         { font-size: 0.65rem; padding: 0.3rem 0.7rem; }
  .live-badge .live-label { display: none; } /* masquer le texte, garder le point */

  /* Hero */
  .hero               { min-height: 85vh; }
  .hero-title         { font-size: clamp(3rem, 18vw, 5rem); }
  .hero-sub           { font-size: 1rem; }
  .hero-eyebrow       { font-size: 0.6rem; letter-spacing: 0.25em; }

  /* Sections */
  section             { padding: 3rem 1.2rem; max-width: 100%; }
  .section-title      { font-size: clamp(2rem, 10vw, 3rem); }

  /* Player */
  .player-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
  }
  .player-controls    { width: 100%; justify-content: space-between; }
  .volume-control     { flex: 1; justify-content: flex-end; }
  .volume-slider      { width: 100px; }
  .player-freq        { display: block; font-size: 1.4rem; }

  /* Programmes */
  .programmes-grid    { grid-template-columns: 1fr; }

  /* Météo */
  .meteo-section      { padding: 3rem 1.2rem; }
  .stations-grid      { grid-template-columns: repeat(2, 1fr); }

  /* Replay */
  .replay-item        { flex-wrap: wrap; gap: 0.75rem; }
  .replay-num         { display: none; }
  .replay-duration    { order: 3; }
  .btn-ghost          { order: 4; width: 100%; text-align: center; }

  /* Footer */
  .footer-inner       { grid-template-columns: 1fr; gap: 2rem; }
  .footer-brand       { grid-column: auto; }
  footer              { padding: 2.5rem 1.2rem 1.5rem; }
}

/* ── Très petit mobile (max 400px) ── */
@media (max-width: 400px) {
  .logo-text          { font-size: 1.2rem; }
  .logo-sub           { display: none; }
  .stations-grid      { grid-template-columns: 1fr; }
  .hero-title         { font-size: clamp(2.8rem, 20vw, 4rem); }
  .player-bar         { padding: 0.8rem; }
  .btn-play           { width: 42px; height: 42px; font-size: 1.1rem; }
}