:root {
    --bg-main: #06073dff;
    --bg-card: #070090;
    --bg-card-hover: #0b00d5;
    --text-main: #ffb120;
    --text-muted: #ffffff;
    --erwan-white: #ffffff;
}

*, *::before, *::after { box-sizing: border-box; }
body {
    background-color: var(--bg-main);
    color: var(--text-main);
    font-family: 'Helvetica Neue', Arial, sans-serif;
    margin: 0;
    padding: 30px;
}
a { color: inherit; text-decoration: none; }
h1 { color: var(--erwan-white); font-size: 2.2rem; margin: 0; }
h2 { font-size: 1.6rem; margin-bottom: 15px; border-bottom: 1px solid #ffffff; padding-bottom: 10px; margin-top: 20px; color: var(--text-main);}
.home-section { margin-bottom: 40px;}

/* Recherche */
.search-section { background-color: #070090; padding: 15px; border-radius: 8px; margin-bottom: 30px; }
.search-box { display: flex; gap: 10px; }
.search-box input { flex: 1; padding: 12px; background: rgb(21, 22, 77); border: none; color: white; border-radius: 4px; }
.search-box button { padding: 12px 25px; background: var(--erwan-white); border: none; border-radius: 25px; font-weight: bold; cursor: pointer; color: black; }

/* ÉTAGE 1 : Artistes en Cercles */
.artist-row { display: flex; gap: 20px; overflow-x: auto; padding-bottom: 10px; }
.artist-circle-card { text-align: center; min-width: 120px; }
.circle-avatar {
    width: 110px; height: 110px; background: #282828; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 2.5rem; margin: 0 auto 10px auto;
    box-shadow: 0 8px 16px rgba(0,0,0,0.4);
}
.artist-name { font-size: 0.9rem; font-weight: bold; margin: 0; color: white; }

/* ÉTAGE 2 & 3 : Grilles Carrées (Albums et Musiques) */
.album-grid, .track-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 20px;
}
.album-square-card, .track-card {
    background: var(--bg-card); padding: 16px; border-radius: 8px; transition: background 0.2s;
}
.album-square-card:hover, .track-card:hover { background: var(--bg-card-hover); }

.album-img, .card-img {
    width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 4px; margin-bottom: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.5);
}
.album-img-placeholder, .card-img-placeholder {
    width: 100%; aspect-ratio: 1/1; background: #282828; border-radius: 4px; margin-bottom: 12px;
    display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: var(--text-muted);
}
.album-title, .track-title { font-size: 0.95rem; font-weight: bold; margin: 0 0 5px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.album-artist, .track-meta { font-size: 0.8rem; color: var(--text-muted); margin: 0; }

/* Page de détail */
.detail-container { display: flex; gap: 40px; align-items: flex-end; margin-top: 30px; }
.detail-img-large { width: 250px; height: 250px; object-fit: cover; border-radius: 8px; box-shadow: 0 8px 40px rgba(0,0,0,0.6); }
.detail-img-large-placeholder { width: 250px; height: 250px; background: #282828; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 4rem; }
.detail-info h2 { font-size: 3rem; margin: 5px 0; border: none; padding: 0; }

.tracklist-table tr td {
    transition: background-color 0.2s, color 0.2s;
}
footer { margin-top: 40px; text-align: center; color: var(--text-muted); font-size: 0.8rem; }