/* Compact mobile view (phones only) */
@media (max-width: 600px) {
  /* Wallpaper background */
  body {
    background-image: url("../Images/Tapisserie_RR_02.jpg");
    background-repeat: repeat;
    background-attachment: scroll;
    background-size: auto;
  }

  /* Hide almost everything by default */
  .container,
  .gallery,
  .yellow_divider,
  footer,
  .footer_banner,
  .footer_column,
  .team_active_column,
  .team_temp_column,
  .footer_column_bw,
  .interactive_column,
  .black_column,
  .yel_column,
  .yel_column_50,
  .yel_column_30,
  .links_column,
  .news_column,
  .pic_column,
  .timetable2_column {
    display: none !important;
  }

  header {
    height: 200px;
    border-bottom: none;
    background: transparent;
  }
  #Player {
    position: static;
    width: 100%;
    max-width: 540px;
    margin: 16px auto;
  }
  #Player iframe {
    width: 100% !important;
    height: 145px !important;
    box-shadow: 0 0 20px rgba(250,210,0,0.9);
    border-radius: 8px;
  }

  /* Show the compact block */
  .mobile-compact {
    display: block !important;
    margin: 12px auto 48px;
    padding: 12px;
    width: min(92%, 560px);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(2px);
  }
  .mobile-compact h1 {
    font-size: 16px;
    margin: 0 0 8px 0;
  }
  .mobile-compact p {
    font-size: 14px;
    margin: 0 0 12px 0;
  }
  .mobile-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 8px;
  }
  .mobile-actions a {
    display: block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    border: 1px solid #2F3542;
    border-radius: 10px;
    font-weight: 600;
    background: #FFFFFF;
  }
}


@media (max-width: 600px) {
  .mobile-actions .toggle-schedule {
    appearance: none;
    border: 1px solid #2F3542;
    border-radius: 10px;
    padding: 14px 16px;
    font-weight: 600;
    background: #FFFFFF;
    cursor: pointer;
  }
  /* Hide schedule/grid by default on mobile */
  #grille, .timetable2_column {
    display: none !important;
  }
  /* When toggled on, reveal the schedule area */
  body.show-schedule #grille,
  body.show-schedule .timetable2_column {
    display: block !important;
  }
  /* Make the table horizontally scrollable and readable on phones */
  body.show-schedule #grille table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  body.show-schedule #grille h3,
  body.show-schedule #grille .emission,
  body.show-schedule #grille p {
    font-size: 14px;
    line-height: 18px;
  }
  /* Give some spacing to the revealed grid */
  body.show-schedule #grille {
    margin-top: 10px;
    padding: 8px;
    background: rgba(255,255,255,0.93);
    border-radius: 10px;
  }
}