body {
    margin: 0;
    width: 100%;
    height: 100vh;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: #e5dddd ;
    background-color: #000000;

}
main{
    height: 100%;
}

h2 {
    font-size: 2em;
}
h1{
    margin: 0;
}
a{
    margin: 0;
    padding: 0;
    text-decoration: none;
    color: white;

}
a:hover{
    text-decoration: underline;
}

.navbar{
    display: flex;
    flex-direction: column;
    background-color: #000000;
    height: 75px;
    justify-content: center;
    align-items: center;
}
.navbar > div{
    border-radius: 20px;
    display: flex;
    height: 35px;
    width: 34vw;
    padding: 5px;
    justify-content: left;
    align-items: center;
    background-color: #2a2a2a;
    gap: 0.2vw;
}

.home{
    width: 30px;
    height: 30px;
}
.search{
    width: 25px;
    height: 25px;
    margin: 0 5px;
}
.recherche-musique{
    position: relative; 
}

.recherche-musique input{
    height: 20px;
    width: 400px;
}
.historique{
    position: absolute;
    left: 0;
    width: 100%;
    background: #2a2a2a;
    border: 1px solid #020202;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    display: none; 
}


.contener{
    display: flex;
    width: 100%;
    height: 100%;
}
.favoris{
    width: 25%;
    height: fit-content;
    background-color: #101010;
    padding: 10px;
    margin: 10px;
    border-radius: 5px;

}
.main{
    flex: 1;
    background-color: #141414;
    height: fit-content;
    padding: 10px;
    margin: 10px;
    border-radius: 5px;
}

.main.fit-content {
    min-height: fit-content;
}

.musiqueBloc{
    display: flex;
    border-radius: 10px;
    margin: 10px 0;
    background-color: #181818;
    padding: 10px;
    cursor: pointer;
}
.musiqueBloc:hover{
    opacity: 0.8;
    transform: scale(1.005);
    transition: 0.2s ease-in-out;
    background-color: #242424;
}
.musiqueBloc > div{
    padding-left: 5px;
}
.descriptionSon > div{
    display: flex;
}

.descriptionSon > div > div{
    width: 50%;
}
.descriptionSon img{
    display: flex;
    height: auto;
    width: 150px;
    margin-bottom: 5px;
}




.clickable{
    position: relative ;
    width: 30px;
    height: 30px;
    margin-left: 5px;
    margin-top: auto;
    margin-bottom: 0px;
   /* cursor: url("../img/delete.png");*/
   cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><text y="20" font-size="20">⭐</text></svg>') 16 16, auto;
   align-self: center;
}

.clickable-details{
    position: relative ;
    width: 20px !important;
    height: 20px;
    margin-left: 5px;
   /* cursor: url("../img/delete.png");*/
   cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><text y="20" font-size="20">⭐</text></svg>') 16 16, auto;
   align-self: center;
   margin-top: auto;
   margin-bottom: auto !important;
}

.favorisBloc {
    cursor:zoom-in;
    display: flex;
    flex-direction: row;
    margin-bottom: 20px;
}


.favorisBloc .clickable{
    left: 3%;
}

.musiqueBloc{
    display: flex;
    border-radius: 10px;
    margin: 10px 0;
    background-color: #181818;
    padding: 10px;
    cursor: pointer;
}
/*cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><text y="20" font-size="20">☆</text></svg>') 16 16, auto;*/

.favoriContainer{
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding-left: 5px;
}
.favLink {
    margin-left: auto;
}

.favoriContainer a,  .favoriContainer h3, .favoriContainer p{
    margin-top: 0px;

}
.favoriContainer a{
    margin-left: auto;
    text-align: end;
}
.favoriContainer h3 {
    max-width: 230px;

}
.favoriContainer p {
    max-width: 280px;

}
.musiqueBloc{
    display: flex;
    border-radius: 10px;
    margin: 10px 0;
    background-color: #181818;
    padding: 10px;
    cursor: pointer;
}
.jeu{
    width: 50px;
    height: 50px;
    margin-right:20px ;
}




/* GIF de chargement (caché par défaut) */
#bloc-gif-attente {
    margin: 40px;
    text-align: center;
  }