:root {
    --primary-color:#c13dfd; /* Couleur principale */
    --secondary-color:#e040fb; /* Couleur secondaire */
    --accent-color:#c03dfdb9; /* Couleur d'accent */
    --background-color: #000000; 
    --couleur-recherche:#191818a5;
    --tableau-hover:#1a1a1a;
    --tableau-selected:#373737;
    --couleur-text:white;
    --couleur-player:#0d0d0d;
    --couleur-background:rgba(255, 255, 255, 0.057);
    --player-text:rgba(255, 255, 255, 0.452);
    --background-dropdown:#191818;
    --text-dropdown:rgb(255, 255, 255);

}

::-webkit-scrollbar {
    width: 12px; /* Largeur de la scrollbar */
}

::-webkit-scrollbar-track {
    background: #1e1e1e; /* Fond sombre de l'ascenseur */
}

::-webkit-scrollbar-thumb {
    background-color: #444444; /* Couleur sombre de la barre de défilement */
    border-radius: 10px; /* Coins arrondis de la barre */
    border: 2px solid #1e1e1e; /* Espacement autour de la barre */
}

::-webkit-scrollbar-thumb:hover {
    background-color: #555555; /* Couleur de la barre au survol */
}

body {
    -webkit-user-select: none; /* Pour Chrome/Safari */
    -moz-user-select: none;    /* Pour Firefox */
    -ms-user-select: none;     /* Pour Internet Explorer/Edge */
    user-select: none;         /* Pour les navigateurs modernes */
    background-color: var(--background-color); /* Couleur de fond douce */
}

img {
    pointer-events: none; /* Désactive les événements de pointeur pour les images */
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: 'poppins', sans-serif;
}

header {
    background-color: var(--background-color);/* Couleur de fond du header (à personnaliser) */
    padding: 10px 0; /* Espacement interne du header */
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
    position: fixed; /* Fixe le header en haut de la fenêtre du navigateur */
    width: 100%; /* Définit la largeur du header à 100% de la fenêtre */
    top: 0; /* Positionne le header au sommet de la fenêtre */
    z-index: 100; /* Assure que le header est au-dessus du contenu */
}

header img {
    margin-left: 10px;
    width: 60px; /* Largeur de l'image (à personnaliser) */
}

nav ul {
    list-style: none; /* Supprime les puces de la liste */
    margin: 0; /* Supprime la marge par défaut de la liste */
    padding: 0; /* Supprime le rembourrage par défaut de la liste */
    display: flex; /* Utilisation de flexbox pour aligner les éléments horizontalement */
    align-items: center; /* Alignement vertical au centre */
}

.nav-item {
    margin-left: auto; /* Pousse l'icône Instagram à droite */
    display: flex; /* Assure que l'icône est alignée correctement */
    align-items: center; /* Aligne verticalement l'icône */
}

.nav-item a {
    margin-right: 15px; /* Ajustez cette valeur selon vos préférences */
}


/* BARRE DE RECHERCHE AVEC DROPDOWN */


form {
    margin-bottom: 20px; /* Ajout d'espace en bas du formulaire */
    padding-top: 80px;
    padding-left: 50px;
    padding-right: 50px;
}

.input-wrapper {
    position: relative;
    width: 100%;
}

#search-bar {
    background-color: var(--couleur-recherche);
    border: 1px solid #ffffff0f;  /* Bordure légère */
    color: var(--couleur-text);   
    width: 100%; /* Prendre toute la largeur du conteneur */
    padding: 10px 60px 10px 40px; /* Ajout de padding à droite et à gauche pour les icônes */
    height: 40px;
    border-radius: 30px; /* Coins arrondis */
    background-image: url('../media/search.png'); /* Image de fond pour l'icône de recherche */
    background-size: 20px 20px; /* Ajuste la taille de l'image */
    background-repeat: no-repeat; /* Pas de répétition */
    background-position: 10px center; /* Position de la loupe */
    text-indent: 10px; /* Espace pour le texte */
    margin: 0; /* Supprimer la marge */
    overflow: hidden; /* Empêcher les débordements */
}

#search-bar:focus {
    border: 1px solid #ffffff1b; 
    outline: none;
}

#genre-dropdown {
    padding: 3px;
    appearance: none;
    -webkit-appearance: none; /* Support pour WebKit (Chrome, Safari) */
    -moz-appearance: none; /* Support pour Firefox */
    background-color: transparent; /* Arrière-plan transparent */
    border: none; /* Supprime la bordure */
    position: absolute; /* Position absolue dans l'input */
    right: 10px; /* Positionné à droite de l'input */
    top: 50%;
    transform: translateY(-50%); /* Centré verticalement */
    width: 30px; /* Largeur pour l'icône de genre */
    height: 30px; /* Hauteur de l'icône */
    background: url('../media/genre.png') no-repeat center;
    background-size: 10px;
    cursor: pointer;
    
    /* Masquer le texte sélectionné */
    color: transparent; /* Rendre le texte transparent */
    text-indent: 100%; /* Déplace le texte hors de la vue */
    overflow: hidden; /* Empêche le débordement du texte */
}

#genre-dropdown option {
    background-color: var(--background-dropdown);
    color:var(--text-dropdown);
}

#genre-dropdown:focus {
    outline: none;
    background: url('../media/genre2.png') no-repeat center;
    background-size: 10px;
}


/* TABLE BEATS */



table {
    width: 80%; /* Définit une largeur pour la table */
    border-collapse: collapse; /* Fusionner les bordures */
    border: none;
    margin: 20px auto; /* Centre le tableau en utilisant les marges */
    background-color: var(--background-color); /* Fond du tableau */
    margin-bottom: 100px;
}

th {
    color: var(--couleur-text); 
    border: none;
    padding: 5px; /* Rembourrage réduit */
    text-align: left; /* Alignement à gauche */
    font-weight: bold; /* Rendre le texte en gras */
}

td {
    padding: 10px; /* Rembourrage réduit */
    border: none; /* Pas de bordure verticale */
    color: var(--couleur-text);  /* Couleur du texte utilisant la variable d'accent */
}

table tr td:nth-child(1), 
table th:nth-child(1) {
    white-space: nowrap; /* Empêche le texte de se couper */
    padding: 5px; /* Rembourrage autour du texte */
    font-weight: bold; /* Rendre le texte en gras dans la première colonne */
    width: 30px;
}

table tr td:nth-child(2), 
table th:nth-child(2) {
    font-weight: bold; /* Rendre le texte en gras dans la deuxième colonne */

}

table tr td:nth-child(3), 
table th:nth-child(3) {
    white-space: nowrap; /* Empêche le texte de se couper */
    padding: 5px; /* Rembourrage autour du texte */
    font-weight: normal; /* Rendre le texte en gras dans la troisième colonne */
    font-size: 12px;
    max-width: 150px; /* Limite la largeur de la cellule */
    overflow: hidden; /* Cache le débordement de texte */
    text-overflow: ellipsis; /* Ajoute les points de suspension (...) */
}

table tr:hover {
    background-color: var(--tableau-hover); /* Couleur de fond différente au survol */
    cursor: pointer; /* Change le curseur au survol */
    transition: background-color 0.3s ease; /* Transition douce pour l'effet de survol */
}

table tr:hover td:first-child {
    border-top-left-radius: 10px; /* Arrondi en haut à gauche */
    border-bottom-left-radius: 10px; /* Arrondi en bas à gauche */
}

table tr:hover td:last-child {
    border-top-right-radius: 10px; /* Arrondi en haut à droite */
    border-bottom-right-radius: 10px; /* Arrondi en bas à droite */
}

table tr:hover th {
    background-color: var(--background-color); /* Garde la couleur de fond des en-têtes */
}

tr.playing {
    background-color:var(--tableau-selected); /* Couleur de fond pour la ligne en cours de lecture */
    transition: background-color 0.3s ease;
}

tr.playing:hover {
    background-color:var(--tableau-selected); /* Couleur différente lorsque l'utilisateur survole */
}

tr.playing td:first-child {
    background-color: var(--tableau-selected);
    border-top-left-radius: 10px; /* Arrondi en haut à gauche */
    border-bottom-left-radius: 10px; /* Arrondi en bas à gauche */
    transition: background-color 0.3s ease, border-radius 0.3s ease;
}

tr.playing td:last-child {
    background-color: var(--tableau-selected);
    border-top-right-radius: 10px; /* Arrondi en haut à droite */
    border-bottom-right-radius: 10px; /* Arrondi en bas à droite */
    transition: background-color 0.3s ease, border-radius 0.3s ease;
}

tr.playing:hover td:first-child,
tr.playing:hover td:last-child {
    background-color: var(--tableau-selected-hover); /* Couleur différente lorsque l'utilisateur survole */
    transition: background-color 0.3s ease, border-radius 0.3s ease;
}


.beat-image-play {
    position: relative;    /* Permet de superposer le bouton sur l'image */
    width: 35px;           /* Taille du conteneur (et de l'image) */
    height: 35px;
}

.beat-image {
    border-radius: 5px;
    width: 100%;           /* L'image occupe tout le conteneur */
    height: 100%;   /* Ajuste l'image pour qu'elle couvre l'espace correctement */

}

.play-pause-btn {
    position: absolute;    /* Le bouton sera positionné par rapport au conteneur */
    top: 50%;              /* Centrer verticalement */
    left: 50%;             /* Centrer horizontalement */
    transform: translate(-50%, -50%);  /* Ajuste pour que le centre du bouton corresponde au centre de l'image */
    background: none;      /* Pas de fond pour le bouton */
    border: none;          /* Pas de bordures visibles */
    cursor: pointer;       /* Affiche un pointeur de clic */
    z-index: 1;            /* S'assurer que le bouton est au-dessus de l'image */
}

.play-pause-icon {
    width: 24px;           
    height: 24px;
}

.beat-info {
    display: flex;
    flex-direction: column;
}

.beat-title {
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 5px;
}

.beat-collaborators {
    font-size: 12px;
    color: #ffffff7b;
}

.download-btn {
    display: inline-block; /* Affiche comme un bloc en ligne */
    background-image: url('../media/download.png'); /* Image de fond pour le bouton */
    background-repeat: no-repeat; /* Ne pas répéter l'image */
    background-size: 18px; /* Ajuste la taille de l'image pour qu'elle soit contenue */
    background-position: center; /* Centre l'image dans le bouton */
    
    width: 25px; /* Largeur du bouton */
    height: 25px; /* Hauteur du bouton */
    
    text-indent: -9999px; /* Cache le texte, mais garde l'accessibilité */
    border: none; /* Pas de bordure */
    cursor: pointer; /* Curseur en forme de main */
    background-color: var(--couleur-background);
    border-radius: 30px;
    transition: transform 0.2s; /* Transition pour l'effet de survol */
}

.download-btn:hover {
    transform: scale(1.1); /* Agrandit légèrement le bouton au survol */
}



/* DESIGN DU PLAYER */



.player-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 100;
}

.player-container {
    background-color: var(--couleur-player); /* Fond du lecteur */
    color: #fff; /* Couleur du texte */
    padding: 10px 20px; /* Espacement interne */
    display: flex; /* Utilise Flexbox pour aligner les éléments */
    align-items: center; /* Centre les éléments verticalement */
    justify-content: flex-start; /* Aligne les éléments à gauche */
    box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.25); /* Ombre pour le conteneur */
    width: 100%; /* Prend toute la largeur de l'écran */
    height: 80px; /* Peut être modifié selon les besoins */
    z-index: 101; /* Assure que le lecteur est au-dessus de la barre de progression */
    overflow: visible;
}

#play-pause-btn {
    background: none; /* Pas de fond */
    border: none; /* Pas de bordure */
    cursor: pointer; /* Curseur pointeur */
    margin-left: 30px;
    transform: translateX(-50%); /* Ajuste pour centrer par rapport à sa largeur */
     transition: transform 0.2s;
     
}

#play-pause-btn:hover {
    transform: translateX(-50%) scale(1.1); /* Agrandit légèrement le bouton sans le déplacer */
}

#current-time {
    padding: 10px;
    color: var(--player-text);
}

#waveform {
    margin: 5 auto;
    height: 40px;   /* Ajuste selon la hauteur que tu souhaites pour la forme d'onde */
    width: 100%;     /* Assure que la forme d'onde prenne toute la largeur */
    overflow: hidden; /* Masque tout débordement, si nécessaire */
}

#duration {
    padding: 10px;
    color: var(--player-text);
}

#volume-slider {
    -webkit-appearance: none; /* Supprime le style par défaut dans WebKit */
    appearance: none; /* Supprime le style par défaut pour les autres navigateurs */
    width: 50px; /* Largeur du slider */
    height: 6px; /* Hauteur de la barre */
    background: var(--background-color); /* Couleur de fond de la barre */
    border-radius: 5px; /* Coins arrondis */
    outline: none; /* Supprime le contour au focus */
    opacity: 0.8; /* Opacité pour un effet de transparence */
    transition: opacity 0.2s; /* Transition pour le hover */
    /*position: relative; /* Nécessaire pour centrer le curseur */
}

#volume-slider:hover {
    opacity: 1; /* Pleine opacité au survol */
}

#volume-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px; /* Même hauteur que le slider */
    background: var(--primary-color); /* Couleur de la barre de progression */
    border-radius: 5px; /* Coins arrondis */
}

#volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Supprime le style par défaut */
    appearance: none;
    width: 15px; /* Taille du curseur */
    height: 15px; /* Taille du curseur */
    margin-top: -4.5px; /* Centre verticalement le curseur sur la barre */
    border-radius: 50%; /* Curseur rond */
    background: var(--secondary-color); /* Couleur du curseur */
    cursor: pointer; /* Affiche un pointeur lors du survol */
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); /* Légère ombre sur le curseur */
    transition: transform 0.2s; /* Transition douce au hover */
}

#volume-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2); /* Agrandit légèrement le curseur */
}

#volume-slider::-moz-range-thumb {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--secondary-color);
    cursor: pointer;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
    transition: transform 0.2s;
    margin-top: 0; /* Firefox gère le centrage différemment */
}

#volume-slider::-moz-range-thumb:hover {
    transform: scale(1.2);
}

#volume-slider::-moz-range-track {
    width: 100%;
    height: 6px;
    background: var(--primary-color); /* Couleur de la barre avant le curseur */
    border-radius: 5px;
}




/* PETITS ECRANS */




@media (max-width: 767px) {
    #volume-slider {
        display: none; /* Masquer la barre de volume sur les petits écrans */
    }

    body {
        font-size: 16px; /* Taille du texte plus grande */
    }

    nav ul li a {
        font-size: 16px; /* Liens de navigation plus grands */
    }

    header img {
        width: 50px; /* Logo légèrement plus petit */
    }

    table th, table td {
        font-size: 14px; /* Texte plus grand dans les tableaux */
        padding: 15px 10px; /* Plus d'espace dans les cellules */
    }

    form {
        margin-bottom: 20px; /* Ajout d'espace en bas du formulaire */
        padding-top: 80px;
        padding-left: 50px;
        padding-right: 50px;
    }

    .player-container {
        padding: 15px 10px; /* Plus d'espace dans le lecteur audio */
    }

    .play-pause-btn {
        width: 30px; /* Bouton lecture/pause plus grand */
        height: 30px;
    }

    .play-pause-icon {
        width: 30px; /* Ajustez la taille de l'icône pour correspondre à celle du bouton */
        height: 30px;
    }

    #current-time, #duration {
        font-size: 14px; /* Augmentez légèrement la taille du texte pour les durées */
    }
}