/* === Structure de base === */
#home_slider {
  position: relative;      /* pour positionner les flèches en absolu */
  overflow: hidden;
  width: 100%;
  height: auto;
}

#home_slider_slide {
  background: black;
}

/* === Overlay (pour positionner les flèches) === */
#home_slider_overlay {
  position: absolute;       /* occupe tout le slider */
  inset: 0;                 /* top:0; right:0; bottom:0; left:0 */
  z-index: 50;
  pointer-events: none;     /* laisse passer les clics — on remet sur les flèches plus bas */
  display: flex;
  justify-content: space-between;
  align-items: center;      /* centre verticalement les flèches */
  padding: 0 1rem;          /* petit espace aux bords */
}

/* === Boutons gauche / droite === */
#home_slider_prev,
#home_slider_next {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  width: 60px;
  height: 60px;
  border: 0;
  cursor: pointer;
  transition: transform 0.25s ease;
}

#home_slider_prev img,
#home_slider_next img {
    width: 40px;
    height: auto;
}

#home_slider_prev::before,
#home_slider_next::before {
  font-size: 24px;
  transition: transform 0.25s ease;
}

/* Hover effect — léger zoom + glow */
#home_slider_prev:hover,
#home_slider_next:hover {
  transform: scale(1.15);
}

/* petit mouvement de la flèche vers l’intérieur */
#home_slider_prev:hover::before {
  transform: translateX(-3px);
}
#home_slider_next:hover::before {
  transform: translateX(3px);
}


/* === bxSlider layout === */
.bx-wrapper,
.bx-viewport {
  width: 100%;
}

.bx-viewport {
  height: inherit !important;
  aspect-ratio: 16 / 5;
  background: #000;
}

.bxslider > li {
  height: 100%;
}

.bx-viewport img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  background: #000;
}





.home_section_header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}


.home_section_header_more::before {
  display: none;
}

.home_section_header_more::after {
  position:relative;
  left: 0px;
  content: " »";
  transition: left 0.5s ease;
}

.home_section_header_more:hover::after {
  left: 5px;
}






#home_listen {
  /*background: linear-gradient(180deg, rgb(var(--main-color) / 0.3), transparent);*/
  background: url("../img/home/home_listen.svg") no-repeat top left rgb(var(--background-color));
}

#home_listen .container {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 2em;
}

.home_listen_main {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}

  .home_listen_main > div {
    width: 50%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
  }

    .home_listen_intro {
      text-align: center;
      font-weight: bold;
    }

    .home_listen_titrage {
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
    }

    .home_listen_ajax_title_picture {
      text-align: center;
      aspect-ratio: 1 / 1;
      object-fit: cover;
    }

      .home_listen_ajax_title_picture img {
        width: auto;
        height: 30vh;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        aspect-ratio: 1 / 1;
        object-fit: cover;
      }

      .home_listen_ajax_title_text {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
      }

        .home_listen_ajax_title_text_artist {
          font-weight: bold;
          font-size: 1.2rem;
        }
  
        .home_listen_ajax_title_text_title {
          font-size: 1rem;
        }


.home_listen_talent {
  display: none !important;
}

.show .home_listen_talent {
  display: block !important;
}

.home_listen_talent_image {
  width: auto;
  text-align: center;
}

.home_listen_talent_image img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  height: 20vh;
}

.home_listen_talent_name {
  text-align: center;
}

.home_listen_talent_name_text {
  font-weight: bold;
  font-size: 1.1rem;
  display: block;
}

    
.home_listen_calltoaction {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 1em;
}

  .home_listen_calltoaction a {
    display: inline-block;
    background-color: rgb(var(--secondary-color));
    color: white;
    text-decoration: none;
    padding: 0.75rem 1.5rem;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.25s ease, transform 0.25s ease;
    transform: scale(100%);
  }

  .home_listen_calltoaction a:hover {
    background-color: color-mix(in srgb, rgb(var(--secondary-color)) 80%, black);
    transform: scale(105%);
  }

  .home_listen_calltoaction a::before {
    display: none;
  }

  .home_listen_calltoaction a img {
    width: auto;
    height: 1.2em;
    margin-right: 0.5rem;
    vertical-align: middle;
  }






.home_content_grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2vw;
  list-style: none;
  align-items: self-start;
  justify-items: stretch;
  padding: 0;
  margin: 0;
}

.home_content_grid.square {
  grid-template-columns: repeat(6, 1fr);
}

  .home_content_grid_item {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: start;
    align-items: center;
    text-align: center;
    height: 100%;
  }

  .home_content_grid_item a {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: start;
    height: 100%;
  }

  .home_content_grid_item a::before {
    display: none;
  }

    .home_content_grid_item_thumb {
      width: 100%;
      aspect-ratio: 16 / 9;
      overflow: hidden;
      border-radius: 8px;
    }
    
    .home_content_grid.square .home_content_grid_item_thumb {
      aspect-ratio: 1 / 1;
    }

      .home_content_grid_item_thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.25s ease;
      }

      .home_content_grid_item a:hover img {
        transform: scale(102%);
      }

    .home_content_grid_item_title {
      font-weight: bold;
      font-size: 1.1rem;
    }

    .home_content_grid_item_meta {
      font-size: 0.9rem;
      opacity: 0.7;
      font-style: italic;
      font-size: 0.8em;
    }

    .home_content_grid_item_chapo {
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }




@media (max-width: 950px) {
  .home_content_grid.square {
    grid-template-columns: repeat(5, 1fr);
  }
}


@media (max-width: 750px) {
  .home_content_grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .home_content_grid.square {
    grid-template-columns: repeat(4, 1fr);
  }

  .home_listen_main {
    justify-content: center;
  }

  .home_listen_calltoaction {
    display: none !important;
  }
}


@media (max-width: 600px) {
  .show .home_listen_talent {
    display: none !important;
  }
}


@media (max-width: 500px) {
  .home_content_grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .home_content_grid.square {
    grid-template-columns: repeat(3, 1fr);
  }

  #home_slider {
    display: none;
  }
}


@media (max-width: 350px) {
  .home_content_grid {
    grid-template-columns: repeat(1, 1fr);
  }

  .home_content_grid.square {
    grid-template-columns: repeat(1, 1fr);
  }

  .home_section_header_more {
    display: none;
  }
}