/* =========================
   ROOT & GLOBAL
========================= */

:root {
  --zoom-scale: 2;
  --color-light-bg: #F3ECD1;
  --color-dark-bg: #1C1F25;
  --color-accent-light: #CC6633;
  --color-accent-dark: #038F7B;
  --color-accent-player-light:#EBDFC2;
    --color-accent-player-dark:#3b3b3f;




}

* {
  box-sizing: border-box;
}

body {
  background: var(--color-light-bg);
  color: black;
  font-family: Arial, sans-serif;
  height: 100%;
  margin: 0;
  --volume-thumb-color: var(--color-accent-light);
  --player-background: var(--color-light-bg);
    --visualizer-color: var(--color-accent-light);
    --player-color:var(--color-accent-player-light);


}

body.dark-mode {
  background: var(--color-dark-bg);
  color: white;
  --volume-thumb-color: var(--color-accent-dark);
   --player-background: var(--color-dark-bg);
     --visualizer-color: var(--color-accent-dark);
    --player-color:var(--color-accent-player-dark);
}

/* =========================
   HYPE
========================= */

.boomer-container,
.disco-container {
  position: fixed;
  pointer-events: none;
  z-index: 99999;
}

.boomer-container {
  top: 60%;
  transform: translateY(-50%);
}

#leftContainer { left: -350px; }
#rightContainer { right: -350px; }

.boomer-img { width: 300px; }

.disco-container {
  top: -300px;
}

#discorightContainer { left: 70%; }
#discoleftContainer { right: 70%; }

.disco-img { width: 200px; }

/* =========================
   ANIMATIONHYPE
========================= */

.enter-left  { animation: slideInLeft 0.8s ease-out forwards; }
.enter-right { animation: slideInRight 0.8s ease-out forwards; }
.enter-top   { animation: slideInTop 0.8s ease-out forwards; }

.exit-left   { animation: slideOutLeft 0.8s ease-in forwards; }
.exit-right  { animation: slideOutRight 0.8s ease-in forwards; }
.exit-top    { animation: slideOutTop 0.8s ease-in forwards; }

.zoom { animation: zoomPulse 0.25s infinite alternate; }

@keyframes slideInLeft  { from { left: -350px; } to { left: 0; } }
@keyframes slideOutLeft { from { left: 0; } to { left: -350px; } }

@keyframes slideInRight  { from { right: -350px; } to { right: 0; } }
@keyframes slideOutRight { from { right: 0; } to { right: -350px; } }

@keyframes slideInTop  { from { top: -300px; } to { top: 40px; } }
@keyframes slideOutTop { from { top: 40px; } to { top: -300px; } }

@keyframes zoomPulse {
  from { transform: scale(1); }
  to   { transform: scale(1.1); }
}

/* =========================
   LAYOUT
========================= */

.center-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.stage {
display:flex;
  flex-direction: row;
  align-items: center;
  text-align: center;
  gap:2VH;
}

.player {
  display:flex;
  flex-direction: row;
  align-items: center;
  z-index: 1;
  height: 6vh;
  background: var(--player-background);
  border-radius: 10px;
  margin-left:0.7Vh;
  margin-right:0.7Vh;
  margin-bottom:0.7Vh;




}

.canvas {
  width: calc(83%); /* 4px left + 4px right */
  height: 8vh;
  overflow: hidden;
  border-top-left-radius: 10px;   
  border-top-right-radius: 10px;

  margin-right:0.9Vh;
  


}

#audioCanvas {
  width: 100%;   /* relative width to .canvas */		
  height: 100%;  /* relative height to .canvas */
  display: block;
    border-top-left-radius: 10px;   
  border-top-right-radius: 10px;

 
  
  

	
}

.modernplayer {
  width:30%;
  background: var(--player-color);
  border-radius: 10px; 


}

.playPauseButton {
  margin-left:0.9Vh ;
}


.titles{
 display:flex;
 flex-direction:column;
 margin-left:1vh;
 align-items: center;
 text-align: center;
 width: 50vh;
 height: 6vh;
 overflow:hidden;
 white-space: nowrap;
}

.titrebox{
width:100%;
height:50%;
overflow: hidden;
position: relative;
}

.artistebox{
width:100%;
height:50%;
display: flex;
align-items: flex-end;
justify-content: center;
}

.titlescroller{
display: inline-block;
white-space: nowrap;
}


.image {
  width: 55%;
  max-width: 600px;
  cursor: pointer;
  transition: transform 0.3s ease, width 0.4s ease;  z-index:2;
  margin-top:2vh;
}

.bandeau {
  width: 70%;
  max-width: 800px;
  margin-bottom: 1.1Vh;
  z-index:1;
}



/* =========================
   ICONS & BUTTONS
========================= */
.volumeicons {
  width: 34px;
  height: 34px;

}
.icons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  cursor: pointer;
  width: 42px;
  height: 42px;
}

.boutonsombre,
.boutonclair {
  padding: 2Vh 2Vh;
  color: white;
  border: none;
  font-size: 14px;
  cursor: pointer;
  border-radius: 10px;

}

.boutonsombre { background: var(--color-accent-light); }
.boutonclair  { background: var(--color-accent-dark); }




.volumeFade {
  margin-bottom:0.5VH;
  width:10vh;
}

/* =========================
   VOLUME FADER
========================= */

#volumeFader {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  outline: none;
  background: linear-gradient(
    to right,
    var(--volume-fader-bg-light) 0%,
    var(--volume-fader-bg-light) 100%,
    #FFFFFF 100%
    
  );




}


#volumeFader::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  cursor: pointer;
    background: var(--volume-thumb-color);
    border:2px solid white;

}

#volumeFader::-moz-range-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  cursor: pointer;
    background: var(--volume-thumb-color);
    border: 2px solid white;

}



/* =========================
   PROGRAMME
========================= */

.programme {
  cursor: pointer;
  display: table;
  border-spacing: 5px 2px;
  width: 300px;
  margin-bottom:3Vh;
}

.row {
  display: table-row;
  transition: opacity 0.5s ease, transform 0.3s ease;
}

.label,
.hour {
  display: table-cell;
  white-space: nowrap;
}

.label {
  text-align: right;
  font-weight: bold;
  padding-right: 5px;
}

.hour {
  padding: 0 8px;
  text-align: right;
}

.text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  white-space: nowrap;
}

/* =========================
   ARROW
========================= */

.arrow {
  display: inline-block;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid currentColor;
  margin-right: 5px;
  transition: transform 0.3s ease;
}

.arrow.down { transform: rotate(90deg); }

/* =========================
   DROPDOWN
========================= */

#dropdown {
  display: none;
  margin-top: 10px;
  padding: 10px;
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.item { margin-bottom: 10px; }

/* =========================
   UTILITIES
========================= */

.clickable { cursor: pointer; }
.hidden { display: none; }

/* =========================
   BANDES PLAYLISTS / HYPE
========================= */

#playlistArrow,
#hypeArrow {
  position: fixed;
  top: 50%;
  font-size: 1.4rem;
  background: rgba(0,0,0,0.3);
  color: white;
  padding: 0.5rem;
  cursor: pointer;
  z-index: 102;
  user-select: none;
  pointer-events: auto;
}

#playlistArrow { right: 0; border-radius: 5px 0 0 5px; transform: translateY(-50%); }
#hypeArrow     { left: 0; border-radius: 0 5px 5px 0; transform: translateY(-50%); }

#playlistArrow:hover,
#hypeArrow:hover { background: rgba(0,0,0,0.8); }

#playlistBanner,
#hypeBanner {
  position: fixed;
  top: 0;
  width: 300px;
  height: 100%;
  padding: 1rem;
  overflow-y: auto;
  transition: all 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
  z-index: 101;
  pointer-events: auto;
}

/* =========================
   COULEURS DYNAMIQUES & OMBRES
========================= */

/* Playlist Banner */
#playlistBanner { 
  right: -300px; 
  background-color: #F99A35; /* clair par défaut */
  box-shadow: -2px 0 5px rgba(0,0,0,0.5); /* ombre standard */
  direction: ltr; /* Scrollbar à gauche pour le bandeau gauche */
}
body.dark-mode #playlistBanner {
  background-color: #04404B; /* sombre */
  box-shadow: -2px 0 10px rgba(0,0,0,0.7); /* ombre renforcée */
}

/* Hype Banner */
#hypeBanner {
  left: -300px;
  background-color: #F99A35; /* clair par défaut */
  box-shadow: 2px 0 5px rgba(0,0,0,0.5); /* ombre standard */
  direction: rtl; /* Scrollbar à droite pour le bandeau droit */
}

/* Scrollbar pour #playlistBanner et #hypeBanner */
#playlistBanner::-webkit-scrollbar,
#hypeBanner::-webkit-scrollbar {
  width: 6px;  /* Scrollbar plus fine */
}

#playlistBanner::-webkit-scrollbar-thumb,
#hypeBanner::-webkit-scrollbar-thumb {
  background-color: var(--thumb-bg-color);
  border-radius: 10px;
  border: 2px solid var(--thumb-border-color);
}

body.dark-mode #hypeBanner {
  background-color: #04404B; /* sombre */
  box-shadow: 2px 0 10px rgba(0,0,0,0.7); /* ombre renforcée */
}

#playlistBanner h3,
#hypeBanner h3 { text-align: center; margin-top: 0; }

#playlistBanner ul,
#hypeBanner ul { list-style: none; padding: 0; margin: 0; }

#playlistBanner li,
#hypeBanner li { margin-bottom: 1rem; border-bottom: 1px solid #555; padding-bottom: 0.5rem; font-size: 0.9rem; }

/* =========================
   RESPONSIVE
========================= */

/* Mobile */
@media (max-width: 779px) {
  :root { --zoom-scale: 2; }

  .bandeau { width: 90%; }
  .image { width: 70%; }


  .icons { width: 40px; height: 40px; }
  .boomer-img { width: 70px; }
  .disco-img { width: 120px; }
  .boomer-container { top: 64%; }
#playlistBanner,
#hypeBanner {
  width: 140px;
  height:100%;
}

.modernplayer {
  width: 90%;
}