@media screen and (max-width: 768px) {
  .card:hover {
    background-color: rgb(216, 197, 22); /* Couleur de fond plus claire et semi-transparente */
    transition: background-color 0.3s; /* Durée de la transition */
    transform: scale(1.02);
    box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
  }
  .card:active {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
  }
  
  /* Ou ajoutez une couleur de fond lorsqu'on clique sur une card */
  .card:active {
    background-color: rgba(120, 184, 245, 0.8);
    top: 3px;
  }
  .row {
    --bs-gutter-x: 0 !important;
  }

  #navColorPlaylist{
    position: fixed;
    bottom: 50%; /* Ajustez la valeur selon votre préférence pour la distance verticale par rapport au bas de la fenêtre */
    left: 20px; /* Ajustez la valeur selon votre préférence pour la distance par rapport au bord gauche de la fenêtre */
    width: 200px; /* Ajustez la largeur du bouton selon votre préférence */
    transform: translateY(50%); /* Déplace le bouton de 50% de sa hauteur vers le haut pour le centrer verticalement */
    z-index: 999; /* Assurez-vous que le bouton est en avant-plan par rapport aux autres éléments */
  }
  main {
    margin-bottom: 150px;
  }
  #searchValue {
    width : 50%;
  }
  .carousel-inner {
    overflow: hidden;
  }
  
.carousel-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
  
.card {
    margin: 10px;
    transition: 0.3s transform;
  }
  
  .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f7bb32' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
   }
   
   .carousel-control-next-icon {
     background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f7bb32' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
   }

    .carousel-control-prev-icon:before,
    .carousel-control-next-icon:before {
        display: none; /* Hide the default icons */
    }

    .carousel-control-prev,
    .carousel-control-next {
        width: 5%; /* Adjust the width to change the size of the controls */
    }

    .carousel-control-prev {
        margin-left: -3%; /* Adjust the position as needed */
    }

    .carousel-control-next {
        margin-right: -3%; /* Adjust the position as needed */
    }
  
  .carousel-indicators {
    bottom: -40px;
  }
  
  .carousel-indicators li {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #00000080;
    transition: background-color 0.3s;
  }
  
  .carousel-indicators .active {
    background-color: #000000cc;
  }
  
  /* CSS pour les cartes audio */
  .card-img-top {
    height: 200px;
    object-fit: cover;
  }
  
  .card-title {
    margin-bottom: 0.5rem;
  }
  
  .card-text {
    margin-bottom: 0;
  }

  .card-body {
    height: 180px;
    background-color: rgb(120, 184, 245);
  }

  #buttonOfCard {
    background-color: rgb(120, 184, 245);
    padding-bottom : 20px;
  }
  #displayComments {
    height : 200px;
    display: flex;
    align-items: center;
  }
  .card:active {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
  }
  
  /* Ou ajoutez une couleur de fond lorsqu'on clique sur une card */
  .card:active {
    background-color: rgba(120, 184, 245, 0.8);
  }

}


@media screen and (max-width: 1300px) {
  .card:hover {
    background-color: rgb(216, 197, 22); /* Couleur de fond plus claire et semi-transparente */
    transition: background-color 0.3s; /* Durée de la transition */
    transform: scale(1.02);
    box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
  }
  .card:active {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
  }
  
  /* Ou ajoutez une couleur de fond lorsqu'on clique sur une card */
  .card:active {
    background-color: rgba(120, 184, 245, 0.8);
    top: 3px;
  }
.carousel-inner {
    overflow: hidden;
  }
  
.carousel-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
  
.card {
    margin: 10px;
    transition: 0.3s transform;
  }
  
  .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f7bb32' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
   }
   
   .carousel-control-next-icon {
     background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f7bb32' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
   }

    .carousel-control-prev-icon:before,
    .carousel-control-next-icon:before {
        display: none; /* Hide the default icons */
    }

    .carousel-control-prev,
    .carousel-control-next {
        width: 5%; /* Adjust the width to change the size of the controls */
    }

    .carousel-control-prev {
        margin-left: -3%; /* Adjust the position as needed */
    }

    .carousel-control-next {
        margin-right: -3%; /* Adjust the position as needed */
    }
  
  .carousel-indicators {
    bottom: -40px;
  }
  
  .carousel-indicators li {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #00000080;
    transition: background-color 0.3s;
  }
  
  .carousel-indicators .active {
    background-color: #000000cc;
  }
  
  /* CSS pour les cartes audio */
  .card-img-top {
    height: 230px;
    object-fit: cover;
  }
  
  .card-title {
    margin-bottom: 0.5rem;
  }
  
  .card-text {
    margin-bottom: 0;
  }

  .card-body {
    height: 200px;
    background-color: rgb(120, 184, 245);
  }

  #buttonOfCard {
    background-color: rgb(120, 184, 245);
    padding-bottom : 20px;
  }

  #displayComments {
    height : 100px;
    display: flex;
    align-items: center;
  }
}

@media screen and (min-width: 1301px) {
  .card:hover {
    background-color: rgb(216, 197, 22); /* Couleur de fond plus claire et semi-transparente */
    transition: background-color 0.3s; /* Durée de la transition */
    transform: scale(1.02);
    box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
  }
  .card:active {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
  }
  
  /* Ou ajoutez une couleur de fond lorsqu'on clique sur une card */
  .card:active {
    background-color: rgba(120, 184, 245, 0.8);
    top: 3px;
  }
  .carousel-inner {
      overflow: hidden;
    }
    
  .carousel-item {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
    }
    
  .card {
      margin: 10px;
      margin-top : 60px;
      transition: 0.3s transform;
    }
    
    .carousel-control-prev-icon {
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f7bb32' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
     }
     
     .carousel-control-next-icon {
       background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f7bb32' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
     }
  
      .carousel-control-prev-icon:before,
      .carousel-control-next-icon:before {
          display: none; /* Hide the default icons */
      }
  
      .carousel-control-prev,
      .carousel-control-next {
          width: 5%; /* Adjust the width to change the size of the controls */
      }
  
      .carousel-control-prev {
          margin-left: -3%; /* Adjust the position as needed */
      }
  
      .carousel-control-next {
          margin-right: -3%; /* Adjust the position as needed */
      }
    
    .carousel-indicators {
      bottom: -40px;
    }
    
    .carousel-indicators li {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background-color: #00000080;
      transition: background-color 0.3s;
    }
    
    .carousel-indicators .active {
      background-color: #000000cc;
    }
    
    /* CSS pour les cartes audio */
    .card-img-top {
      height: 300px;
      object-fit: cover;
    }
    
    .card-title {
      margin-bottom: 0.5rem;
    }
    
    .card-text {
      margin-bottom: 0;
    }
  
    .card-body {
      height: 327px;
      background-color: rgb(120, 184, 245);
    }
  
    #buttonOfCard {
      background-color: rgb(120, 184, 245);
      padding-bottom : 20px;
    }
    #displayComments {
      height : 100px;
      display: flex;
      align-items: center;
    }
    .card:active {
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
    }
    
    /* Ou ajoutez une couleur de fond lorsqu'on clique sur une card */
    .card:active {
      background-color: rgba(120, 184, 245, 0.8);
    }
  }