@charset "UTF-8";
/* Body */
        :root {
            --primary-color: #0FB89F;
            --secondary-color: #3a3e42;
            --accent-color: #E03757;
            --light-bg: #BFBFBF;
            --track-highlight: #e9ecef;
            --search-highlight: #fff3cd;
            --player-height-desktop: 120px;
            --player-height-mobile: 150px;
            --player-height-compact: 60px;
            --touch-target-size: 44px; /* Taille minimum recommandée pour les cibles tactiles */
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            padding-bottom: var(--player-height-desktop);
            background-color: lightslategray;
        }
		.loader-container {
			display: none; /* Caché par défaut */
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 2rem;
			text-align: center;
		}
        
        /* Header avec logo */
        .app-header {
			display: flex;
			justify-content: space-between; /* Répartir l'espace entre les éléments */
			align-items: center;
			padding: 0.5rem 1rem; /* Ajout de padding horizontal */
			margin-bottom: 1rem;
			background-color: lightslategray; /* Même couleur que le fond */
			position: fixed; /* Rend l'en-tête fixe */
			top: 0;
			left: 0;
			right: 0;
			z-index: 1000; /* S'assure que l'en-tête apparaît au-dessus des autres éléments */
			box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Ajoute une ombre légère */
		}

		/* Style pour les icônes de navigation */
		.nav-icons {
			display: flex;
			justify-content: space-between;
			width: 100%;
			max-width: 500px; /* Limite la largeur pour éviter un trop grand espacement */
			margin: 0 auto;
		}

		.nav-icon {
			display: flex;
			flex-direction: column;
			align-items: center;
			color: #333;
			text-decoration: none;
			padding: 5px;
			border-radius: 5px;
			transition: background-color 0.2s;
		}

		.nav-icon:hover {
			background-color: rgba(255, 255, 255, 0.2);
		}

		.nav-icon i {
			font-size: 30px; /* Icônes agrandies */
			margin-bottom: 2px;
		}

		/* Bouton pour remonter en haut de la page */
		.scroll-to-top {
			position: fixed;
			top: 130px; /* Position au-dessus du lecteur audio */
			right: 10px;
			background-color: greenyellow;
			color: red;
			border-radius: 50%;
			width: 45px;
			height: 45px;
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;
			z-index: 999;
			box-shadow: 0 2px 5px rgba(0,0,0,0.2);
			opacity: 0;
			transition: opacity 0.3s ease;
		}

		.scroll-to-top.visible {
			opacity: 1;
		}

		.scroll-to-top i {
			font-size: 24px;
		}
		
		.container.mt-4 {
			margin-top: 70px !important; /* Ajuste cette valeur en fonction de la hauteur de votre en-tête */
			max-width: 100%;
			padding-left: 5px;
			padding-right: 5px;
		}


        .app-logo {
            height: 50px;
            width: auto;
        }

        /* Section des émotions */
        .emotions-container {
            background-color: #333;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
        }
        
        .emotions-title {
            color: white;
            text-align: center;
            margin-bottom: 20px;
            font-size: 28px;
        }
        
        .emotions-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }
        
        .emotion-item {
			position: relative;
			cursor: pointer;
			transition: transform 0.2s;
			text-align: center;
			/* Ajout d'un padding pour l'effet de halo */
			padding: 5px;
		}
        
        .emotion-item:hover {
            transform: scale(1.05);
        }
        
        .emotion-image {
			width: 100%;
			aspect-ratio: 1/1;
			border-radius: 50%;
			object-fit: cover;
			box-shadow: 0 4px 8px rgba(0,0,0,0.3);
			/* Ajout du halo lumineux */
			border: 0px solid rgba(255, 255, 255, 0.6);
			/* Ajouter un effet de glow */
			filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.7));
			transition: all 0.3s ease;
		}
		/* Ajouter un effet au survol pour plus d'interactivité */
		.emotion-item:hover .emotion-image {
			border-color: rgba(255, 255, 255, 0.9);
			filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.9));
		}
        
        .emotion-label {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-weight: bold;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
            font-size: 16px;
            width: 100%;
            text-align: center;
            text-transform: uppercase;
        }

         /* En mobile, réduire la taille du logo */
    @media (max-width: 576px) {
        .app-logo {
            height: 40px;
        }

        .app-header {
            padding: 0.3rem 0; /* Encore moins d'espace en haut sur mobile */
        }
        
        .container.mt-4 {
            margin-top: 60px !important; /* Version mobile */
        }

        .nav-icon i {
            font-size: 26px; /* Version mobile des icônes agrandies */
        }

        #scroll-to-current {
            bottom: 46px !important;
            width: 40px;
            height: 40px;
            right: 15px;
            font-size: 20px;
        }
		.scroll-to-top {
            top: 200px; /* Ajustement pour mobile */
            width: 40px;
            height: 40px;
            left: 20px;
        }

        body {
            padding-bottom: var(--player-height-mobile);
        }
        
        .track-number {
            font-size: 12px;
        }

        .track-heart {
            font-size: 22px;
        }

        .track-index-container {
            min-width: 50px;
            width: 50px;
        }
        
        .track-composer {
            font-size: 14px;
        }

        .track-title {
            font-size: 14px;
        }
        
        .track-artist {
            font-size: 14px;
        }

        .track-info-btn {
            width: 40px;
            height: 40px;
            font-size: 22px;
        }
        
        .modal-info-label {
            width: 120px;
        }
        
        .modal-info-photo {
            width: 45px;
            height: 45px;
			border: 2px solid var(--primary-color);
        }
        
        .round-player-btn.play-btn {
            width: 60px;
            height: 60px;
        }
        
        .round-player-btn {
            width: 40px;
            height: 40px;
        }
        
        .modal-player-controls {
            gap: 15px;
        }
        
        .audio-control-container {
            gap: 15px;
        }
        
        .emotions-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
        }
        
        .emotion-label {
            font-size: 14px;
        }
        
        .selection2-container {
            max-width: 100%;
        }

        .emotion-circle {
            width: 50px;
            height: 50px;
        }

        .emotion-title {
            font-size: 20px;
        }

        .cell-label {
            font-size: 12px;
        }

        .cell-count {
            font-size: 14px;
        }
        
        .lyrics-search-info {
            font-size: 0.8rem;
            padding: 6px 8px;
        }

        .lyrics-content {
            font-size: 0.95rem;
        }
    }
        
        /* Version desktop: 4 colonnes */
        @media (min-width: 768px) {
            .emotions-grid {
                grid-template-columns: repeat(4, 1fr);
            }
        }

	/* Items de la liste des morceaux */
	/* Styles pour le nouvel affichage des morceaux */
	.track-item-new {
		display: flex;
		align-items: flex-start; /* Aligner les éléments au début plutôt qu'au centre */
		cursor: pointer;
		padding: 12px 10px;
		border-radius: 6px;
		margin-bottom: 6px;
		transition: all 0.2s;
		background-color: var(--secondary-color);
		color: white;
		position: relative;
		width: 100%;
	}

	.track-item-new:hover {
		transform: translateX(5px);
		background-color: #212529;
	}

	.track-item-new.active {
		border-left: 4px solid var(--accent-color);
		background-color: #212529;
	}

	/* Conteneur pour numéro + cœur empilés - agrandi */
	.track-index-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start; /* Aligner au début plutôt qu'au centre */
		margin-right: 4px;
		flex-shrink: 0;
		min-width: 50px;
		width: 50px;
		padding-top: 2px; /* Ajout d'un léger padding pour aligner parfaitement */
	}

	/* Modification du track-number */
	.track-number {
		display: block; /* Changé de table à block */
		width: 100%;
		margin: 0 auto 8px; /* Ajusté la marge pour pousser le cœur vers le bas */
		background-color: transparent;
		color: var(--light-bg);
		font-weight: normal;
		font-size: 12px;
		text-align: center;
		margin-top: 0; /* S'assurer qu'il n'y a pas de marge en haut */
	}

	/* Modification du track-heart pour maintenir l'équilibre visuel */
	.track-heart {
		width: 100%;
		text-align: center;
		color: var(--primary-color);
		font-size: 22px;
		cursor: pointer;
		transition: transform 0.2s, color 0.2s;
		margin-top: auto; /* Pousse le cœur vers le bas du conteneur */
	}
    
    .track-heart:hover {
        transform: scale(1.2);
        color: var(--accent-color);
    }
    
    .track-heart-fill {
        color: var(--accent-color);
    }
    
    .track-info-container {
		display: flex;
		flex-direction: column;
		justify-content: flex-start; /* Aligner au début */
		flex-grow: 1;
		min-width: 0;
		overflow: hidden;
		padding-right: 10px;
	}
    
    /* Styles pour la première ligne */
    .track-info-line1 {
        display: flex;
        width: 100%;
        margin-bottom: 2px;
    }
    
    .track-info-primary {
        color: var(--accent-color);
        font-weight: bold;
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-right: 10px;
        flex-grow: 1;
    }
    
    .track-info-secondary {
        color: var(--light-bg);
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex-shrink: 1;
        max-width: 40%;
    }
    
    /* Style pour la seconde ligne */
    .track-info-line2 {
        color: var(--primary-color);
        font-style: italic;
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
    }
    
    .track-controls {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start; /* Aligner au début */
		margin-left: 8px;
		flex-shrink: 0;
		padding-top: 2px; /* Alignement avec le reste */
	}
    
    .track-info-btn {
		margin-right: -14px;
		color: white;
		background-color: cadetblue;
		border-radius: 50%;
		width: 40px; /* Agrandi de 32px à 42px */
		height: 40px; /* Agrandi de 32px à 42px */
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		font-size: 22px; /* Agrandi de 18px à 22px */
		transition: background-color 0.2s, transform 0.2s;
	}

	.track-info-btn:hover {
		background-color: var(--accent-color);
		transform: scale(1.1);
	}

	/* Masquer l'en-tête des résultats sur tablettes et ordinateurs */
@media (max-width: 576px) {
    .results-header {
        display: none !important;
    }
}
   
    
    /* Style spécifique pour les boutons de tri actifs */
    .btn-outline-primary.active {
        background-color: var(--primary-color);
        color: white;
    }
	.btn-outline-label {
			color: white;
			border: none;
    }

    
    /* Media queries pour les petits écrans */
		@media (max-width: 576px) {
		.track-number {
			width: 34px;
			height: 18px;
			font-size: 14px;
		}

		.track-heart {
			font-size: 34px;
		}

		.track-index-container {
			margin-right: 6px;
			min-width: 22px;
		}

		.track-info-primary, .track-info-secondary, .track-info-line2 {
			font-size: 13px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.track-info-secondary {
			max-width: 35%;
		}

		.track-info-btn {
			width: 34px;
			height: 34px;
			font-size: 32px;
		}

		.track-duration {
			font-size: 10px;
		}
		/* Modal d'information */
		/* Style pour le bouton lyrics dans l'en-tête de la modale d'info */
		 .modal-header-lyrics {
        font-size: 24px;
        color: white; /* Couleur blanche pour le micro */
        background-color: #9370DB; /* Fond violet */
        border-radius: 50%; /* Forme de cercle */
        width: 35px; /* Largeur fixe pour le cercle */
        height: 35px; /* Hauteur fixe pour le cercle */
        cursor: pointer;
        transition: transform 0.2s, background-color 0.2s;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .modal-header-lyrics:hover {
        transform: scale(1.2);
        background-color: var(--accent-color); /* Utilise la couleur d'accent au survol */
    }
	
	/* Style pour les actions d'en-tête (cœur et bouton fermer) */
    .modal-header-actions {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    /* Style pour le cœur dans l'en-tête */
    .modal-header-heart {
        font-size: 24px;
        color: var(--primary-color);
        cursor: pointer;
        transition: transform 0.2s, color 0.2s;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .modal-header-heart:hover {
        transform: scale(1.2);
        color: var(--accent-color);
    }

    .modal-header-heart-fill {
        color: var(--accent-color);
    }
    
    .info-modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 2000;
        justify-content: center;
        align-items: center;
        backdrop-filter: blur(4px);
    }

    .info-modal-content {
        background-color: #212529;
        color: white;
        border-radius: 12px;
        width: 90%;
        max-width: 550px;
        max-height: 85vh;
        overflow-y: auto;
        padding: 0;
        box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
        position: relative;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .info-modal-content::-webkit-scrollbar {
        width: 8px;
    }

    .info-modal-content::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 0 12px 12px 0;
    }

    .info-modal-content::-webkit-scrollbar-thumb {
        background-color: var(--primary-color);
        border-radius: 10px;
    }

    .info-modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        background-color: #2c3135; /* Légèrement plus clair que le fond */
        border-radius: 12px 12px 0 0;
        position: sticky;
        top: 0;
        z-index: 2;
    }

    .info-modal-title {
        font-size: 1.3rem;
        font-weight: bold;
        margin: 0;
        color: var(--primary-color);
    }

    .new-close-btn {
        margin-right: -6px;
        background-color: cadetblue !important;
        color: white !important;
        font-size: 24px;
        border-radius: 50%;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        transition: transform 0.2s;
    }
	
	.new-close-btn:hover {
        transform: scale(1.1);
    }

    .info-modal-body {
        padding: 10px;
    }

    /* Style pour le pied de page de la modal avec les contrôles du lecteur */
    .info-modal-footer {
        padding: 15px 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        background-color: rgba(0, 0, 0, 0.2);
        border-radius: 0 0 12px 12px;
        position: sticky;
        bottom: 0;
        display: flex;
        justify-content: center; /* Centrer les contrôles */
    }

    .modal-player-controls {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
    }

		/* Style pour la section de piste dans la modal */
		.modal-track-section {
        margin-bottom: 20px;
        padding: 15px;
        background-color: var(--secondary-color);
        border-radius: 8px;
    }

    .modal-track-composer {
        color: var(--primary-color);
        font-weight: bold;
        font-size: 18px;
        margin-bottom: 5px;
        width: 100%;
    }

    .modal-track-title {
        color: var(--accent-color);
        font-weight: bold;
        font-size: 20px;
        margin-bottom: 10px;
        width: 100%;
    }

    .modal-track-heart {
        margin-top: 10px;
        font-size: 24px;
        color: var(--primary-color);
        cursor: pointer;
        transition: transform 0.2s, color 0.2s;
    }

    .modal-track-heart:hover {
        transform: scale(1.2);
        color: var(--accent-color);
    }

    .modal-track-heart-fill {
        color: var(--accent-color);
    }
    
    /* Style pour les lignes d'information */
    .modal-info-line {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        width: 100%;
    }

    .modal-info-label {
        font-weight: bold;
        color: var(--light-bg);
        width: 150px;
        flex-shrink: 0;
    }

    .modal-info-value {
        flex-grow: 1;
        margin-right: 10px;
    }

    /* Style pour la photo avec disque en arrière-plan */
    .modal-info-photo {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        overflow: hidden;
        border: 2px solid var(--primary-color);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        flex-shrink: 0;
    }

    .modal-info-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
			/* Animation pour indiquer qu'un élément est cliquable */
    @keyframes pulse-disc {
        0% { transform: scale(1); }
        50% { transform: scale(1.05); }
        100% { transform: scale(1); }
    }

    .modal-info-photo:hover {
        animation: pulse-disc 1s infinite;
    }

		/* Ligne de bas de page avec année et pays */
		.modal-footer-line {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 20px;
        padding-top: 15px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .modal-year {
        font-style: italic;
        color: var(--light-bg);
    }

    .modal-country {
        display: flex;
        align-items: center;
        margin-left: auto;
    }

    .modal-country-name {
        margin-right: 10px;
        font-weight: bold;
		display: none;
    }
		/* Style pour le bouton info dans l'en-tête de la modale des paroles */
		.info-btn {
			color: white;
			background-color: cadetblue;
			border-radius: 50%;
			width: 32px;
			height: 32px;
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;
			font-size: 32px;
			transition: background-color 0.2s, transform 0.2s;
			border: none;
			margin-right: 8px;
		}

		.info-btn:hover {
			background-color: var(--accent-color);
			transform: scale(1.1);
		}
    
    /* Responsive design pour mobile */
    @media (max-width: 576px) {
        .modal-info-label {
            width: 120px;
        }
        
        .modal-info-photo {
            width: 45px;
            height: 45px;
        }
        
        .round-player-btn.play-btn {
            width: 50px;
            height: 50px;
        }
        
        .round-player-btn {
            width: 35px;
            height: 35px;
        }
        
        .modal-player-controls {
            gap: 10px;
        }

		/* Section de titre principale */
		.track-title-section {
			text-align: center;
			margin-bottom: 25px;
			position: relative;
		}
		.track-composer {
        color: var(--primary-color);
        font-weight: bold;
        font-size: 18px;
        width: 100%;
        white-space: normal; /* Permet le retour à la ligne */
        overflow: hidden;
        margin-bottom: 4px;
    }

    .track-title {
        color: var(--accent-color);
        font-weight: bold;
        font-size: 16px;
        width: 100%;
        white-space: normal; /* Permet le retour à la ligne */
        overflow: hidden;
        margin-bottom: 4px;
    }
	
	.track-artist {
        color: var(--light-bg);
        font-size: 18px;
        width: 100%;
        white-space: normal; /* Permet le retour à la ligne */
        overflow: hidden;
    }

		/* Style pour les titres célèbres */
		.famous-title {
        color: gold !important; /* Couleur or pour les titres célèbres */
        text-shadow: 0 0 1px rgba(0, 0, 0, 0.5); /* Ombre légère pour meilleure lisibilité */
    }
    
    .famous-badge {
        display: none;
    }
    
    .famous-badge-modal {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        background-color: gold;
        color: #333;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        margin-left: 10px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        vertical-align: middle;
    }

    .famous-badge-modal i {
        font-size: 14px;
        color: #333;
    }
	/* Adaptations mobiles */
		@media (max-width: 576px) {
			.track-number {
				font-size: 12px;
			}

			.track-heart {
				font-size: 18px;
			}

			.track-index-container {
				min-width: 40px;
				width: 40px;
			}

			.track-composer, .track-title, .track-artist {
				font-size: 14px;
			}

			.track-info-btn {
				width: 36px;
				height: 36px;
				font-size: 32px;
			}
		}	
		
		
	 /* Animations et effets visuels */
    @keyframes pulse-highlight-playlist {
        0% { transform: translateX(0); background-color: #3a3e42; }
        25% { transform: translateX(5px); background-color: rgba(15, 184, 159, 0.3); } /* Changé en couleur turquoise */
        50% { transform: translateX(0); background-color: #3a3e42; }
        75% { transform: translateX(5px); background-color: rgba(15, 184, 159, 0.3); } /* Changé en couleur turquoise */
        100% { transform: translateX(0); background-color: #3a3e42; }
    }
    
    .highlight-scroll-playlist {
        animation: pulse-highlight-playlist 2s ease-in-out;
    }
			

		/* Sections d'informations */
		.info-section {
			margin-bottom: 25px;
			border-left: 3px solid var(--primary-color);
			padding-left: 15px;
			background-color: rgba(255, 255, 255, 0.05);
			border-radius: 0 8px 8px 0;
			padding-top: 12px;
			padding-bottom: 12px;
			padding-right: 12px;
		}

		.info-section-title {
			font-weight: bold;
			color: var(--primary-color);
			margin-bottom: 12px;
			display: flex;
			align-items: center;
		}

		.info-section-title i {
			margin-right: 8px;
			font-size: 1.1rem;
		}

		.info-item {
			display: flex;
			margin-bottom: 12px;
		}

		.info-label {
			font-weight: bold;
			width: 120px;
			flex-shrink: 0;
			color: var(--light-bg);
		}

		.info-value {
			flex-grow: 1;
		}

		/* Styles pour afficher les photos à côté des informations */
		.info-item.with-photo {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 12px;
		}

		.info-content {
			flex: 1;
			display: flex;
			flex-direction: column;
		}

		.info-photo {
			margin-left: 10px;
			flex-shrink: 0;
		}

		.info-photo .photo-frame {
			width: 60px;
			height: 60px;
			border-radius: 50%;
			overflow: hidden;
			border: 2px solid var(--primary-color);
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
			background-color: #333;
		}

		.info-photo .photo-img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		/* Style pour les images d'ambiance */
		.mood-image {
			width: 50px;
			height: 50px;
			border-radius: 50%;
			position: absolute;
			right: 15px;
			object-fit: cover;
			box-shadow: 0 2px 4px rgba(0,0,0,0.2);
			border: 0px solid white;
		}

		.mood-container {
			display: flex;
			align-items: center;
			position: absolute;
			bottom: 15px;
			right: 15px;
		}

		.mood-text {
			font-size: 14px;
			font-weight: bold;
			color: white;
			background-color: #E03757;
			padding: 4px 8px;
			border-radius: 4px;
			margin-right: 70px;
			text-transform: uppercase;
		}

		.mood-text, .mood-image {
			cursor: pointer;
		}

		/* Adaptation pour mobile */
		@media (max-width: 576px) {
			.info-modal-content {
				width: 95%;
				max-height: 90vh;
			}

			.info-item {
				flex-direction: column;
			}

			.info-label {
				width: 100%;
				margin-bottom: 4px;
			}

			.info-item.with-photo {
				flex-direction: row; /* Garder en ligne même sur mobile */
			}

			.info-photo .photo-frame {
				width: 50px;
				height: 50px;
			}

			.mood-container {
				display: flex;
				align-items: center; /* Alignement centré */
				position: absolute;
				right: 0px;
				bottom: 0px;
			}

			.mood-text {
				margin-right: 20px; /* Supprime la marge de droite */
				margin-bottom: 10px; /* Espacement entre le texte et l'image */
				text-align: center;
				font-size: 12px; /* Réduit la taille pour l'adapter aux petits écrans */
			}

			.mood-image {
				position: relative;
				right: 0;
				bottom: 0;
			}

			.info-icon {
				bottom: 10px;
				left: 10px; /* Sur mobile, l'icône est positionnée à gauche */
				right: auto;
				width: 28px;
				height: 28px;
				font-size: 0.9rem;
			}
		}

		/* Badge célèbre */
		.famous-badge {
			position: absolute;
			left: 15px;
			bottom: 15px;
			background-color: gold;
			color: #333;
			width: 32px;
			height: 32px;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 2px 4px rgba(0,0,0,0.2);
			border: 2px solid white;
			z-index: 10;
		}

		.famous-badge i {
			font-size: 18px;
			color: #333;
		}

		/* Ajustement pour mobile */
		@media (max-width: 576px) {
			.famous-badge {
				left: 10px;
				bottom: 10px;
				width: 28px;
				height: 28px;
			}

			.famous-badge i {
				font-size: 16px;
			}
		}

		    /* Lecteur audio fixé en bas */
    .player-container {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #212529;
        color: white;
        padding: 15px;
        z-index: 1000;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
        transition: transform 0.3s ease;
    }

    /* Classe pour réduire le lecteur */
    .player-container.minimized {
        transform: translateY(calc(100% - var(--player-height-compact)));
    }

    .player-toggle {
        position: absolute;
        top: -15px;
        left: 50%;
        transform: translateX(-50%);
        background-color: var(--secondary-color);
        color: white;
        border: none;
        border-radius: 50%;
        width: 30px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
        z-index: 1001;
    }


    /* Style pour le conteneur des contrôles audio */
    .audio-control-container {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px; /* Augmentation de l'espace entre les boutons */
        margin-bottom: 10px;
        width: 100%;
    }

    /* Masquer l'audio player natif */
    .hidden-audio-player {
        display: none;
    }
		/* Adaptation mobile pour mieux espacer les boutons */
		@media (max-width: 576px) {
			.audio-control-container {
				gap: 12px;
			}
		}

		/* Masquer l'audio player natif */
		.hidden-audio-player {
			display: none;
		}

		/* Style des boutons ronds */
		.round-player-btn {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #333;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        transition: all 0.2s ease;
        font-size: 16px;
        border: 2px solid rgba(255, 255, 255, 0.1);
    }

    /* Bouton de lecture légèrement plus grand */
    .round-player-btn.play-btn {
        width: 60px;
        height: 60px;
        background-color: #E03757;
        font-size: 24px;
    }
		@media (max-width: 576px) {
			.round-player-btn.play-btn {
				width: 55px; /* Augmenté de 45px à 55px pour mobile */
				height: 55px; /* Augmenté de 45px à 55px pour mobile */
				font-size: 22px; /* Augmenté de 18px à 22px pour mobile */
			}
		}

		/* Boutons plus petits */
		.round-player-btn.play-btn {
        width: 60px;
        height: 60px;
        background-color: #E03757;
        font-size: 24px;
    }

    /* Effet au survol */
    .round-player-btn:hover {
        transform: scale(1.1);
        background-color: #444;
    }

    .round-player-btn.play-btn:hover {
        background-color: #c92f4b;
    }

    /* Style pour les boutons désactivés */
    .round-player-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none;
    }

		/* Contrôles de volume */
		.volume-controls {
			display: flex;
			align-items: center;
			gap: 5px;
			margin-left: 10px;
		}

		#volume-slider {
			width: 80px;
			height: 5px;
			appearance: none;
			background: rgba(255, 255, 255, 0.2);
			border-radius: 3px;
			outline: none;
		}

		#volume-slider::-webkit-slider-thumb {
			appearance: none;
			width: 12px;
			height: 12px;
			border-radius: 50%;
			background: #0FB89F;
			cursor: pointer;
		}

		/* Barre de progression */
		.player-progress-container {
        display: flex;
        align-items: center;
        width: 100%;
        margin-top: 5px;
        gap: 8px;
    }

    #current-time, #duration {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.7);
        min-width: 35px;
    }

    .progress-bar-container {
        flex-grow: 1;
        height: 5px;
        background-color: rgba(255, 255, 255, 0.2);
        border-radius: 3px;
        cursor: pointer;
        position: relative;
    }

    #progress-bar {
        height: 100%;
        background-color: #0FB89F;
        border-radius: 3px;
        width: 0%;
        transition: width 0.1s linear;
    }
		/* Version compacte du lecteur pour mobile */
		.compact-player {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: var(--player-height-compact);
    }

    .compact-info {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 0 10px;
    }

    .compact-controls {
        display: flex;
        gap: 5px;
    }

		/* Effet de défilement pour le texte trop long */
		@keyframes marquee {
		0% { transform: translateX(100%); }
		100% { transform: translateX(-100%); }
	}

	.marquee {
		white-space: nowrap;
		overflow: hidden;
		position: relative;
	}

	.marquee.active-marquee .marquee-content {
		display: inline-block;
		padding-right: 50px;
		animation: marquee 15s linear infinite;
	}

	/* Pause l'animation au survol */
	.marquee:hover .marquee-content {
		animation-play-state: paused;
	}
			
		/* Nouveau style pour le bouton scroll-to-current */
		/* Position du bouton scroll-to-current */
		#scroll-to-current {
			position: fixed !important;
			bottom: 46px !important; /* Distance du bas */
			right: 16px !important;
			background-color: #0FB89F;
			color: white;
			border-radius: 50%;
			width: 45px;
			height: 45px;
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;
			z-index: 1001 !important; /* Valeur supérieure à celle du lecteur */
			box-shadow: 0 2px 5px rgba(0,0,0,0.2);
			/* Supprimer la marge */
			margin-left: 0;
			font-size: 24px;
		}

		#scroll-to-current:hover {
			background-color: #0ca38c;
			transform: scale(1.1);
		}
		@media (max-width: 576px) {
			#scroll-to-current {
				bottom: 40px; /* Ajustement pour mobile */
				width: 40px;
				height: 40px;
				right: 12px;
				font-size: 20px;
			}
		}
		.highlight-scroll {
			animation: pulse-highlight 2s ease-in-out;
		}

		@keyframes pulse-highlight {
			0% { transform: translateX(0); background-color: #3a3e42; }
			25% { transform: translateX(5px); background-color: rgba(224, 55, 87, 0.3); }
			50% { transform: translateX(0); background-color: #3a3e42; }
			75% { transform: translateX(5px); background-color: rgba(224, 55, 87, 0.3); }
			100% { transform: translateX(0); background-color: #3a3e42; }
		}

		/* Adaptations mobiles */
		@media (max-width: 576px) {
			.round-player-btn {
				width: 36px;
				height: 36px;
				font-size: 14px;
			}

			.round-player-btn.play-btn {
				width: 45px;
				height: 45px;
				font-size: 18px;
			}

			.round-player-btn.small-btn {
				width: 28px;
				height: 28px;
				font-size: 12px;
			}

			.volume-controls {
				margin-left: 5px;
			}

			#volume-slider {
				width: 60px;
			}

			.player-container {
				padding: 10px;
			}
		}

		/* Responsive cards */
		.card {
        margin-bottom: 1rem;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        overflow: hidden;
        background-color: #212529;
        width: calc(100% - 10px);
        margin-left: auto;
        margin-right: auto;
    }

    .card-header {
        color: white;
        background-color: #2c3135; /* Légèrement plus clair que le fond */
        border-bottom: 1px solid rgba(0,0,0,0.1);
        padding: 0.75rem 1rem;
        border-bottom: none !important;
    }

		/* Amélioration pour la navigation */
		.btn-group {
			flex-wrap: wrap;
		}

		@media (max-width: 576px) {
			.btn-group .btn {
				padding: 0.375rem 0.5rem;
				font-size: 0.8rem;
			}

			.card-header {
				flex-direction: column;
				gap: 0.5rem;
			}

			.card-header .btn-group {
				width: 100%;
				justify-content: center;
			}
		}

		/* Remplacer la couleur primaire de Bootstrap par #0FB89F */
		/* Boutons outline primary */
		 .btn-outline-primary {
        color: #0FB89F;
        border-color: #0FB89F;
    }

    .btn-outline-primary:hover,
    .btn-outline-primary:focus,
    .btn-outline-primary:active,
    .btn-outline-primary.active {
        background-color: #0FB89F;
        border-color: #0FB89F;
        color: white;
    }

    /* Badges avec fond primary */
    .bg-primary,
    .badge.bg-primary,
    .btn-primary {
        background-color: #0FB89F !important;
        border-color: #0FB89F !important;
    }

		/* Texte de couleur primaire */
		.text-primary {
			color: #0FB89F !important;
		}

		/* Elements de formulaire avec focus/active sur primaire */
		.form-control:focus,
		.form-select:focus {
			border-color: #0FB89F;
			box-shadow: 0 0 0 0.25rem rgba(15, 184, 159, 0.25);
		}

		/* Liens */
		a {
			color: #0FB89F;
		}
		a:hover {
			color: #0ca38c;
		}

		/* Spinner */
		.spinner-border.text-primary {
			border-color: #0FB89F;
			border-right-color: transparent;
		}

		/* Surbrillance de recherche */
		.search-highlight {
			background-color: rgba(15, 184, 159, 0.2);
			font-weight: bold;
		}

		/* Styles pour la nouvelle interface Sélection2 */
		.selection2-container {
        width: 100%;
        max-width: 500px;
        margin: 0 auto 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.5s ease, transform 0.5s ease;
        position: relative;
    }

    .selection2-container.visible {
        opacity: 1;
        transform: translateY(0);
    }

    .selection2-header {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        width: 100%;
        padding-left: 10px; /* Ajout d'un padding à gauche pour décaler les éléments */
    }

    .emotion-circle {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        overflow: hidden;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        margin-right: 15px;
        border: 0px solid #0FB89F;
        background-position: center;
        background-size: cover;
    }

    .emotion-title {
        color: #FFF;
        font-size: 24px;
        font-weight: bold;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
        text-transform: uppercase;
    }

    /* Modification du grid pour avoir une image de fond unique */
    .selection2-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(3, 1fr);
        gap: 4px;
        width: 100%;
        aspect-ratio: 2/2.5;
        max-height: 300px;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
        position: relative;
        z-index: 1;
        border: 3px solid rgba(128, 128, 128, 0.8);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        padding: 4px;
    }

    /* Ajout d'un overlay unifié pour tout le conteneur plutôt que pour chaque cellule */
    .selection2-grid::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.2) 100%);
        z-index: 0;
        pointer-events: none;
    }

    .selection-cell {
        aspect-ratio: auto;
        position: relative;
        cursor: pointer;
        background: rgba(50, 50, 50, 0.2);
        color: white;
        transition: all 0.3s ease;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 8px;
        height: auto;
        min-height: 40px;
        z-index: 1; /* S'assurer que la cellule est au-dessus de l'overlay */
    }

    /* Modification de la cellule active pour utiliser un liseré au lieu d'un filtre */
    .selection-cell.active {
        background: rgba(0, 0, 0, 0.3); /* Fond légèrement plus foncé */
        border: 5px solid #E03757;
        border-radius: 8px;
        z-index: 2; /* S'assurer que la cellule active est au-dessus des autres */
    }

    .cell-content {
        position: relative;
        z-index: 3; /* S'assurer que le contenu est toujours visible */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
        padding: 5px;
    }

    .cell-label {
        font-weight: bold;
        font-size: 14px; /* Réduction de la taille de police */
        margin-bottom: 2px; /* Réduction de la marge */
        text-transform: uppercase;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9);
    }

    .cell-count {
        font-size: 16px; /* Réduction de la taille de police */
        font-weight: bold;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9);
    }

		/* Responsive design */
		@media (max-width: 576px) {
			.selection2-container {
				max-width: 100%;
			}

			.emotion-circle {
				width: 50px;
				height: 50px;
			}

			.emotion-title {
				font-size: 20px;
			}

			.cell-label {
				font-size: 14px;
			}

			.cell-count {
				font-size: 18px;
			}
		}
		/* Styles pour la fenêtre modale des paroles */
    .lyrics-modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 2000;
        justify-content: center;
        align-items: center;
        backdrop-filter: blur(4px);
    }

    .lyrics-modal-content {
        background-color: #212529;
        text-align: left;
        color: white;
        border-radius: 12px;
        width: 90%;
        max-width: 600px;
        max-height: 85vh;
        overflow-y: auto;
        padding: 0;
        box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
        position: relative;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .lyrics-modal-content::-webkit-scrollbar {
        width: 8px;
    }

    .lyrics-modal-content::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 0 12px 12px 0;
    }

    .lyrics-modal-content::-webkit-scrollbar-thumb {
        background-color: #9370DB; /* Même couleur que le bouton micro */
        border-radius: 10px;
    }

    .lyrics-modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        background-color: #2c3135;
        border-radius: 12px 12px 0 0;
        position: sticky;
        top: 0;
        z-index: 2;
    }

    .lyrics-modal-title {
        font-size: 1.3rem;
        font-weight: bold;
        margin: 0;
        color: #9370DB;
    }

    .lyrics-modal-body {
        margin-top: -70px;
        padding: 0 20px 20px 20px; /* Suppression du padding top pour réduire l'espace */
        white-space: pre-wrap; /* Préserve les retours à la ligne */
        font-size: 1.1rem;
        line-height: 1.6;
        text-align: left; /* Aligner le texte à gauche */
    }

    .lyrics-content {
        text-align: left; /* Aligner le texte à gauche */
    }

    .lyrics-loading {
        text-align: center;
        padding: 30px;
    }

    .lyrics-error {
        color: #ff6b6b;
        text-align: center;
        padding: 20px;
    }

		/* Adaptations pour les très petits écrans */
		@media (max-width: 375px) {
			.selection2-grid {
				aspect-ratio: 2/2; /* Encore plus compact pour les très petits écrans */
				max-height: 250px;
			}

			.cell-label {
				font-size: 12px;
			}

			.cell-count {
				font-size: 14px;
			}	
		}
		/* Style pour le bouton micro */
    .track-lyrics-btn {
        margin-right: -14px;
        margin-top: 8px; /* Espacement par rapport au bouton info */
        color: white;
        background-color: #9370DB; /* Couleur violette pour différencier du bouton info */
        border-radius: 50%;
        width: 36px;
        height: 36px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        font-size: 22px;
        transition: background-color 0.2s, transform 0.2s;
    }

    .track-lyrics-btn:hover {
        background-color: var(--accent-color);
        transform: scale(1.1);
    }
	/* Réduire l'espace entre la section de tri et le bouton d'écoute */
.btn-group {
    margin-bottom: -20px; /* Réduire la marge en bas */
}

/* Style pour améliorer le conteneur des boutons de tri */
.sort-options-container {
    margin-bottom: 0px; /* Réduire la marge en bas */
	border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        overflow: hidden;
        background-color: #212529;
        width: calc(100% - 10px);
        margin-left: auto;
        margin-right: auto;
}

/* Ajuster l'espace au-dessus du bouton d'écoute */
.listen-button-container {
    margin-top: 0px; /* Réduire la marge en haut */
}

/* Version mobile - réduction supplémentaire de l'espace */
@media (max-width: 576px) {
    .btn-group {
        margin-bottom: -50px;
    }
    
    .sort-options-container {
        margin-bottom: 0px;
    }
    
    .listen-button-container {
        margin-top: 0px;
    }
}

/* Styles pour la modale de discographie */
.discography-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 2000;
    align-items: center;
    justify-content: center;
}

.discography-modal-content {
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    background-color: #1e1e1e;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}

.discography-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    background-color: #121212;
    border-bottom: 1px solid #333;
}

.discography-modal-title {
    color: white;
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
}

.discography-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    max-height: 70vh;
}

.discography-header-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px 10px 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-play-discography {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background-color: #1DB954;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.5rem;
}

.btn-play-discography:hover {
    background-color: #1ed760;
}

.discography-item {
    padding: 12px;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.05);
    margin-bottom: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.discography-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.discography-item-title {
    font-weight: 600;
    color: white;
    margin-bottom: 4px;
}

.discography-item-composer {
    color: #b3b3b3;
    font-size: 0.9rem;
    margin-bottom: 2px;
}

.discography-item-artist {
    color: #b3b3b3;
    font-size: 0.9rem;
    font-style: italic;
}