/* V14 side columns only. Player, middle controls and phone remain untouched. */
@media (min-width: 761px) and (min-height: 621px) {
  html body:not(.toptv-immersive-open) #live.hero > aside.channels.panel,
  html body:not(.toptv-immersive-open) #live.hero > aside.ranking.panel {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    padding: 0 !important;
  }

  html body:not(.toptv-immersive-open) #live.hero > aside.channels h2,
  html body:not(.toptv-immersive-open) #live.hero > aside.ranking h2 {
    margin: 2px 0 16px !important;
    padding: 0 2px !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
  }

  /* Clear, spacious channel list, with the chosen channel still identifiable. */
  html body:not(.toptv-immersive-open) #live.hero > aside.channels #channelList {
    gap: 6px !important;
  }
  html body:not(.toptv-immersive-open) #live.hero > aside.channels #channelList .channel {
    min-height: 50px !important;
    margin: 0 !important;
    padding: 6px 9px !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: rgba(255, 255, 255, .025) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
  html body:not(.toptv-immersive-open) #live.hero > aside.channels #channelList .channel.active {
    background: linear-gradient(90deg, rgba(229, 185, 67, .22), rgba(229, 185, 67, .065)) !important;
    box-shadow: inset 3px 0 0 #e6bd56 !important;
  }
  html body:not(.toptv-immersive-open) #live.hero > aside.channels #channelList .channel.active,
  html body:not(.toptv-immersive-open) #live.hero > aside.channels #channelList .channel.active b {
    color: #fff !important;
  }
  html body:not(.toptv-immersive-open) #live.hero > aside.channels #channelList .channel:not(.active):hover,
  html body:not(.toptv-immersive-open) #live.hero > aside.channels #channelList .channel:not(.active):focus-visible {
    background: rgba(229, 185, 67, .10) !important;
  }

  /* Ranking rows retain their existing 54 + 124 px thumbnail grid and scroll rail. */
  html body:not(.toptv-immersive-open) #live.hero > aside.ranking #rankingList .rankRow {
    margin-bottom: 8px !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: rgba(255, 255, 255, .025) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
  html body:not(.toptv-immersive-open) #live.hero > aside.ranking #rankingList .rankRow.active {
    border: 0 !important;
    background: linear-gradient(90deg, rgba(229, 185, 67, .16), rgba(229, 185, 67, .025)) !important;
    box-shadow: inset 3px 0 0 #e6bd56 !important;
  }
  html body:not(.toptv-immersive-open) #live.hero > aside.ranking #rankingList .rankRow:not(.active):hover {
    background: rgba(229, 185, 67, .095) !important;
  }
}

/* V14: compact the left navigation to balance the player and its information. */
@media (min-width: 761px) and (min-height: 621px) {
  html body:not(.toptv-immersive-open) #live.hero > aside.channels.panel {
    align-self: start !important;
    height: max-content !important;
  }
  html body:not(.toptv-immersive-open) #live.hero > aside.channels h2 {
    font-size: 12px !important;
    line-height: 1.4 !important;
    letter-spacing: .035em !important;
  }
  html body:not(.toptv-immersive-open) #live.hero > aside.channels #channelList {
    gap: 2px !important;
  }
  html body:not(.toptv-immersive-open) #live.hero > aside.channels #channelList .channel {
    box-sizing: border-box !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 3px 8px !important;
    gap: 7px !important;
    border-radius: 7px !important;
  }
  html body:not(.toptv-immersive-open) #live.hero > aside.channels #channelList .channel > i {
    flex: 0 0 22px !important;
    width: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    height: 22px !important;
    font-size: 14px !important;
    line-height: 22px !important;
  }
  html body:not(.toptv-immersive-open) #live.hero > aside.channels #channelList .channel > i .toptv-sidebar-brand-logo {
    width: 22px !important;
    height: 22px !important;
  }
  html body:not(.toptv-immersive-open) #live.hero > aside.channels #channelList .channel > span {
    min-width: 0 !important;
    overflow: hidden !important;
  }
  html body:not(.toptv-immersive-open) #live.hero > aside.channels #channelList .channel > span > b,
  html body:not(.toptv-immersive-open) #live.hero > aside.channels #channelList .channel > span > small {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  html body:not(.toptv-immersive-open) #live.hero > aside.channels #channelList .channel > span > b {
    font-size: 11px !important;
    line-height: 12px !important;
  }
  html body:not(.toptv-immersive-open) #live.hero > aside.channels #channelList .channel > span > small {
    font-size: 8.5px !important;
    line-height: 10px !important;
  }
}

/* V14 desktop/iPad: show six ranking thumbnails plus the existing "Voir plus"
   control; keep the full ranking available through the sidebar scroll. */
@media (min-width: 761px) and (min-height: 621px) {
  html body:not(.toptv-immersive-open) #live.hero > aside.ranking.panel {
    align-self: start !important;
    height: 636px !important;
    max-height: 636px !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }
}

/* Space out the compact channel buttons while retaining their 30px height. */
@media (min-width: 761px) and (min-height: 621px) {
  html body:not(.toptv-immersive-open) #live.hero > aside.channels #channelList {
    gap: 5px !important;
  }
}

/* On desktop and iPad, give both rails a little more air below the player top. */
@media (min-width: 761px) and (min-height: 621px) {
  html body:not(.toptv-immersive-open) #live.hero > aside.channels.panel,
  html body:not(.toptv-immersive-open) #live.hero > aside.ranking.panel {
    margin-top: 68px !important;
  }

  /* Leave a clear gap below the absolutely positioned country button. */
  html body:not(.toptv-immersive-open) #live.hero > aside.channels #channelList {
    margin-top: 8px !important;
  }

  /* The ranking panel owns the scroll; the current country/channel title stays visible. */
  html body:not(.toptv-immersive-open) #live.hero > aside.ranking > h2 {
    position: sticky !important;
    top: 0 !important;
    z-index: 4 !important;
    margin: 0 0 4px !important;
    padding: 2px 2px 12px !important;
    background: linear-gradient(110deg, #0b0c14, #10121c 52%, #090b12) !important;
    box-shadow: 0 6px 12px rgba(7, 9, 20, .9) !important;
  }
}