body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f8f8f8; } .container { max-width: 1200px; margin: 0 auto; padding: 20px; } .title { color: #6a0dad; text-align: center; margin-top: 20px; } .list { display: flex; justify-content: space-between; flex-wrap: wrap; } .list > div { width: 30%; margin-bottom: 20px; } /* Styles pour les articles */ article { background-color: #fff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); overflow: hidden; transition: transform 0.3s ease; } article:hover { transform: translateY(-5px); } header.short-text, footer.short-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 10px; } header.short-text { background-color: #6a0dad; color: #fff; } footer.short-text { background-color: #f0f0f0; } /* Styles pour les liens hypertexte */ header.short-text a { color: #fff; /* Blanc pour les liens */ } /* Image styles */ .list img { display: block; width: 100%; height: auto; } /* Responsive styles */ @media screen and (max-width: 768px) { .list > div { width: 45%; } } @media screen and (max-width: 576px) { .list > div { width: 100%; } } /* Styles pour les boutons de pagination */ .pagination { text-align: center; margin-top: 20px; } .pagination a { display: inline-block; padding: 8px 16px; margin: 0 4px; background-color: #6a0dad; color: #fff; border-radius: 4px; text-decoration: none; transition: background-color 0.3s ease; margin-bottom: 10px; } .pagination a:hover { background-color: #4a0772; } .pagination .active { background-color: #29043e; } .filters { text-align: center; margin-bottom: 20px; } .filters label { margin-right: 10px; } .filters select { margin-right: 10px; } .filters button { background-color: #8c00ff; color: #fff; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; } .filters button:hover { background-color: #6a0080; } .music-links { margin-top: 10px; } .music-links a { display: inline-block; margin-right: 10px; padding: 5px 10px; border-radius: 5px; color: #fff; text-decoration: none; transition: background-color 0.3s ease; } .music-links a.spotify, .music-links a.deezer, .music-links a.youtube { color: white; padding: 8px 12px; border-radius: 5px; text-decoration: none; transition: background-color 0.3s, color 0.3s; margin-bottom: 10px; } .music-links a.spotify { background-color: #1DB954; /* Vert Spotify */ } .music-links a.deezer { background-color: #6E44FF; /* Violet Deezer */ } .music-links a.youtube { background-color: #FF0000; /* Rouge YouTube */ } .music-links a.spotify:hover, .music-links a.deezer:hover, .music-links a.youtube:hover { color: rgb(255, 255, 255); background-color: rgba(84, 15, 202, 0.8); /* Fond légèrement plus clair au survol */ } .artist-name, .album-name { display: inline-block; margin-right: 10px; padding: 5px 10px; border-radius: 5px; background-color: #7300ff; color: #fff; transition: background-color 0.3s ease; } footer.short-text { display: flex; flex-direction: column; } /* Style pour la liste déroulante */ .select-playlist { display: inline-block; /* Transformer en élément inline-block */ padding: 8px 15px; /* Rembourrage intérieur */ font-size: 16px; /* Taille de la police */ border: 1px solid #ccc; /* Bordure */ border-radius: 4px; /* Coins arrondis */ background-color: #f0f0f0; margin-right: 10px; /* Marge à droite pour l'espace entre la liste déroulante et le bouton */ margin-bottom: 10px; /* Ajout d'un espace en bas */ } /* Style pour le bouton Ajouter à la playlist */ .btn-add-to-playlist { display: inline-block; /* Transformer en élément inline-block */ background-color: #6021aa; /* Couleur de fond */ color: white; /* Couleur du texte */ padding: 10px 20px; /* Rembourrage intérieur */ border: none; /* Pas de bordure */ border-radius: 4px; /* Coins arrondis */ cursor: pointer; /* Curseur pointeur au survol */ transition: background-color 0.3s; /* Animation de transition */ } .btn-add-to-playlist:hover { background-color: #461860; /* Couleur de fond au survol */ } #error-message { color: red; background-color: #ffd6d6; /* Fond rouge pour les messages d'erreur */ margin-top: 10px; /* Ajout de marge en haut des messages */ padding: 10px; /* Ajout de rembourrage aux messages */ border-radius: 4px; font-size: 14px; display: flex; /* Utilise Flexbox */ justify-content: center; /* Centre le contenu horizontalement */ align-items: center; /* Centre le contenu verticalement */ }