/* ==========================================================================
   Music Linker Stylesheet
   ========================================================================== */

/* --- 1. GLOBAL & BASE STYLES --- */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #1a1a1a;
    color: #fff;
    margin: 0;
    padding: 40px 20px;
    line-height: 1.6;
}

/* --- 2. LAYOUT & STRUCTURE --- */
.background-mosaic {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-size: cover;
    background-position: center;
    filter: blur(50px) brightness(0.4);
    transform: scale(1.1);
}

/* OVERRIDE pour la page d'accueil : Background spécifique + Flou léger */
body.home-body .background-mosaic {
    background-image: url('../images/bg1080.png') !important;
    filter: blur(3px) brightness(0.7) !important;
    /* Ajout du flou (3px) */
    transform: none !important;
}

.main-content {
    position: relative;
    z-index: 1;
}

.admin-container {
    max-width: 960px;
    margin: auto;
}

.edit-container {
    max-width: 700px;
    margin: auto;
}

/* --- 3. PAGE-SPECIFIC BODY LAYOUTS --- */
.login-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.collection-body {
    padding: 40px;
}

.public-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* --- 4. CARDS & CONTAINERS --- */
.card,
.edit-container,
.login-box,
.public-container,
.home-central-container {
    background: rgba(40, 40, 40, 0.4);
    backdrop-filter: blur(30px) saturate(1.2);
    -webkit-backdrop-filter: blur(30px) saturate(1.2);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

.card,
.edit-container {
    padding: 28px;
    margin-bottom: 30px;
}

.login-box {
    width: 320px;
    padding: 30px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.25);
    text-align: center;
}

.public-container {
    width: 100%;
    max-width: 450px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.25);
}

/* Effet de lumière sur les cartes */
.card::before,
.edit-container::before,
.login-box::before,
.public-container::before,
.home-central-container::before,
.mosaic-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
}

.card::before,
.edit-container::before,
.login-box::before,
.public-container::before,
.home-central-container::before {
    background: radial-gradient(400px circle at var(--mouse-x) var(--mouse-y), rgba(255, 255, 255, 0.1), transparent 40%);
}

/* --- 5. HEADER & NAVIGATION --- */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

.header h1 {
    font-size: 2.2em;
    font-weight: 700;
    color: #fff;
}

.header-nav {
    display: flex;
    gap: 15px;
}

.admin-nav {
    position: absolute;
    top: 40px;
    right: 40px;
    z-index: 10;
}

.admin-nav-link {
    font-size: 0.9em;
    font-weight: 600;
    text-decoration: none;
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 8px 14px;
    border-radius: 8px;
    transition: all 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

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

/* --- 6. FORMS & BUTTONS --- */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: flex;
    align-items: center;
    font-size: 0.9em;
    font-weight: 500;
    margin-bottom: 8px;
    color: #eee;
}

.form-group input[type="text"],
.form-group input[type="date"],
.form-group textarea,
.login-box input {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    background-color: rgba(245, 245, 247, 0.9);
    border: 1px solid transparent;
    box-sizing: border-box;
    font-size: 1em;
    color: #1d1d1f;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.login-box input {
    margin-bottom: 15px;
}

.form-group input[type="text"]:focus,
.form-group input[type="date"]:focus,
.form-group textarea:focus,
.login-box input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15);
}

.form-group textarea {
    min-height: 100px;
    resize: vertical;
}

.login-box button,
.form-group button[type="submit"] {
    width: 100%;
    padding: 14px;
    font-size: 1em;
    font-weight: 600;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.login-box button {
    padding: 12px;
}

.form-group button[type="submit"] {
    margin-top: 10px;
}

.login-box button:hover,
.form-group button[type="submit"]:hover {
    background-color: #0056b3;
}

.form-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
}

input[type="date"] {
    position: relative;
    padding-right: 15px;
    color-scheme: dark;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    color: transparent;
    background: transparent;
    cursor: pointer;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
}

.form-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: transparent;
    padding: 0;
    margin-top: 0;
}

.form-toggle label {
    margin-bottom: 0;
    font-size: 0.8em;
    color: #bbb;
}

.save-button {
    margin-top: 0;
    width: auto;
    padding: 12px 20px;
    font-family: inherit;
    font-size: 1em;
    font-weight: 600;
    background-color: rgba(43, 244, 143, 0.9);
    color: #1d1d1f;
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.save-button:hover {
    background-color: #fff;
    color: #000;
}

.platform-icon {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    vertical-align: middle;
    object-fit: contain;
}

.search-label {
    cursor: pointer;
    transition: color 0.2s ease;
    display: inline-flex;
}

.search-label:hover {
    color: #58a6ff;
}


/* --- 7. ADMIN TABLE (LEGACY) --- */
table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    text-align: left;
    padding: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    vertical-align: middle;
}

tr:last-child td {
    border-bottom: none;
}

th {
    font-size: 0.8em;
    font-weight: 600;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Uniformisation des boutons d'action */
.action-btn {
    background: none !important;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    line-height: 1;
    font-size: 1.2em;
}

.action-btn:hover {
    transform: scale(1.1);
}

.toggle-hide-btn {
    color: #aaa !important;
    font-size: 1.4em;
}

.toggle-hide-btn:hover {
    color: #58a6ff !important;
}

.toggle-hide-btn.is-hidden {
    opacity: 0.4;
}

.delete-btn {
    color: #aaa !important;
}

.delete-btn:hover {
    color: #ff8a8a !important;
}

/* Nouveau style pour le bouton Highlight */
.highlight-btn {
    color: #444 !important;
    /* Grisé par défaut */
    filter: grayscale(100%);
    opacity: 0.5;
}

.highlight-btn.hover {
    filter: grayscale(0%);
    opacity: 1;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.highlight-btn.active {
    color: #ffd700 !important;
    /* Or */
    filter: grayscale(0%);
    opacity: 1;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.4);
}

.highlight-badge {
    margin-left: 8px;
    font-size: 0.9em;
    cursor: help;
}

/* Ligne mise en avant dans le tableau admin */
tr.is-highlight-row td {
    background: linear-gradient(to right, rgba(255, 215, 0, 0.05), transparent);
}

td strong {
    font-weight: 600;
    color: #fff;
}

td small {
    color: #bbb;
}

td>a {
    color: #58a6ff;
    text-decoration: none;
    font-weight: 500;
}

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

.title-cell,
.slug-cell a {
    cursor: pointer;
}

/* MODIFICATION : Troncature du slug pour l'ancien tableau */
.slug-cell {
    text-align: center;
    max-width: 150px;
    /* Limite la largeur de la colonne */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.slug-cell a {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.slug-cell.copied a {
    color: #1DB954;
}

tr.is-hidden-row {
    opacity: 0.5;
}

/* Slug Column - Revoir affichage (Pour le nouveau design GRID) */
.col-slug {
    display: flex;
    align-items: center;
    min-width: 0;
    overflow: hidden;
}

/* MODIFICATION : .slug-pill est maintenant un bouton */
.slug-pill {
    display: inline-block;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    font-family: monospace;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: all 0.2s;

    /* Troncature */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;

    /* Reset Button Styles */
    cursor: pointer;
    line-height: normal;
    text-align: left;
}

.slug-pill:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

/* Date Column */
.col-date {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
    font-variant-numeric: tabular-nums;
}

/* Actions Column */
.action-group {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.icon-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.btn-highlight.active {
    color: #ffd700;
}

.btn-highlight:hover {
    color: #ffd700;
    background: rgba(255, 215, 0, 0.1);
}

.btn-delete:hover {
    color: #ff6b6b;
    background: rgba(255, 107, 107, 0.1);
}

/* Pagination */
.pagination-container {
    padding: 20px;
    display: flex;
    justify-content: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.pagination-pills {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(0, 0, 0, 0.2);
    padding: 5px 10px;
    border-radius: 50px;
}

.page-pill {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.2s;
}

.page-pill:hover {
    background: #fff;
    color: #000;
}

.page-info {
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
}

/* Responsive Table */
@media (max-width: 768px) {
    .table-head {
        display: none;
        /* Hide headers on mobile */
    }

    .table-row {
        grid-template-columns: 60px 1fr;
        grid-template-areas:
            "art info"
            "art slug"
            "actions actions";
        gap: 10px;
        padding: 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .col-art {
        grid-area: art;
    }

    .col-info {
        grid-area: info;
    }

    .col-slug {
        grid-area: slug;
    }

    .col-date {
        display: none;
    }

    /* Hide date on mobile */
    .col-actions {
        grid-area: actions;
        justify-content: flex-start;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
    }

    .action-group {
        width: 100%;
        justify-content: space-between;
    }

    .admin-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
}

/* --- 8. COLLECTION (MOSAIC) PAGE --- */

/* --- NEW BUTTON STYLES (MATCHING REACT UI) --- */
.vgm-data-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: transparent;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.vgm-data-btn:hover {
    border-color: rgba(255, 255, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.05);
}

.vgm-data-btn svg {
    color: #9ca3af;
    /* text-gray-400 */
    transition: color 0.2s ease;
}

.vgm-data-btn:hover svg {
    color: #ffaa73;
}

.vgm-data-btn span {
    font-size: 0.75rem;
    /* text-xs */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    /* tracking-wider */
    color: #9ca3af;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    /* font-sans */
    transition: color 0.2s ease;
}

.vgm-data-btn:hover span {
    color: #fff;
}

/* Header Controls Wrapper for Mosaic Page */
.header-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    max-width: 100%;
    margin-bottom: 50px;
}

/* On desktop, keep the years centered and button on the right */
@media (min-width: 768px) {
    .header-controls .year-navigation {
        margin-bottom: 0;
        /* Remove existing margin as it's handled by wrapper */
    }

    .header-controls .right-actions {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }
}

/* On mobile, stack them */
@media (max-width: 767px) {
    .header-controls {
        flex-direction: column;
        gap: 20px;
    }

    .header-controls .right-actions {
        position: static;
        transform: none;
    }

    .header-controls .year-navigation {
        margin-bottom: 0;
    }
}


/* Navigation par Année - Bulles discrètes */
.year-navigation {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 50px;
    position: relative;
    z-index: 100;
}

.year-bubble-link {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    backdrop-filter: blur(10px);
}

.year-bubble-link:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.year-bubble-link.active {
    background: #fff;
    color: #000;
    border-color: #fff;
    font-weight: 600;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 100px 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.2rem;
}

.month-group {
    margin-bottom: 60px;
}

.month-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
}

/* Nouveau design "Bulle Glossy" pour le mois */
.month-bubble {
    background: rgba(40, 40, 40, 0.4);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 10px 24px;
    border-radius: 50px;
    /* Forme de pilule */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

/* L'effet de lumière interactif (via JS) */
.month-bubble::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: radial-gradient(300px circle at var(--mouse-x) var(--mouse-y), rgba(255, 255, 255, 0.15), transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.month-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
    color: #fff;
    position: relative;
    z-index: 1;
}

.month-count {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* PLAYLIST PILL (Similar to month-bubble) */
.playlist-pill {
    background: rgba(40, 40, 40, 0.4);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 8px 20px;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    font-size: 1rem;
    font-weight: 400;
    /* Modified to thinner font */
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.playlist-pill:not(.disabled):hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.1);
}

.playlist-pill.disabled {
    opacity: 0.5;
    background: rgba(20, 20, 20, 0.3);
    border-color: rgba(255, 255, 255, 0.05);
    color: #888;
    cursor: not-allowed;
}

.playlist-icon {
    font-size: 0.8em;
    color: #bbb;
}

.patreon-icon-small {
    width: 14px;
    height: 14px;
    fill: currentColor;
    display: inline-block;
    vertical-align: middle;
}

.playlist-pill:not(.disabled):hover .playlist-icon {
    color: #fff;
}

/* Light effect for playlist (reused) */
.playlist-pill::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: radial-gradient(200px circle at var(--mouse-x) var(--mouse-y), rgba(255, 255, 255, 0.1), transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.mosaic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 25px;
}

.mosaic-item-wrapper {
    position: relative;
}

.mosaic-item {
    display: block;
    /* CRUCIAL : Force le lien à être un bloc pour respecter les dimensions */
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 20px;
    overflow: hidden;
    /* Masque l'overlay quand il est en bas */
    /* Transition plus fluide et "élastique" pour l'effet liquide */
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.2);
    width: 100%;
    /* S'assure qu'il remplit la cellule de la grille */
}

/* NOUVEAU DESIGN HOVER "LIQUID GLASS" */
.mosaic-item:hover {
    transform: translateY(-5px) scale(1.02);
    /* Bordures ultra-arrondies au survol */
    border-radius: 35px;
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.4),
        inset 0 0 20px rgba(255, 255, 255, 0.1);
    /* Lueur interne */
    border-color: rgba(255, 255, 255, 0.4);
}

.mosaic-item img {
    display: block;
    /* Supprime l'espace fantôme sous les images inline */
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Remplit le carré sans déformer l'image (coupe les bords si nécessaire) */
    transition: transform 0.8s cubic-bezier(0.33, 1, 0.68, 1);
    /* Zoom très lent et smooth */
}

.mosaic-item:hover img {
    transform: scale(1.15) rotate(2deg);
    /* Zoom + rotation subtile */
}

/* Overlay redesign */
.overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(20, 20, 20, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 15px;
    box-sizing: border-box;
    transform: translateY(100%);
    /* Caché par défaut en bas */
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 10;
    /* S'assure que l'overlay est au-dessus de l'image */
}

.mosaic-item:hover .overlay {
    transform: translateY(0);
    /* Glisse vers le haut */
}

.overlay-title {
    font-weight: 700;
    font-size: 1rem;
    margin: 0 0 4px 0;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.overlay-artist {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.delete-mosaic-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 20;
    /* Augmenté pour être au-dessus de tout */
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 12px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    transform: scale(0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}

.mosaic-item-wrapper:hover .delete-mosaic-btn {
    opacity: 1;
    transform: scale(1);
}

/* Highlight Item Design */
.mosaic-item-wrapper.highlight-wrapper {
    grid-column: span 2;
    /* Prend 2 colonnes en largeur */
    grid-row: span 2;
    /* Prend 2 lignes en hauteur */
}

/* Fallback pour mobile : on garde 1 colonne si l'écran est petit */
@media (max-width: 600px) {
    .mosaic-item-wrapper.highlight-wrapper {
        grid-column: span 1;
        grid-row: span 1;
    }
}

.mosaic-item.is-highlight {
    border: 2px solid rgba(255, 223, 88, 0.4);
    /* Bordure dorée subtile */
    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(255, 215, 0, 0.15) inset;
    /* Lueur interne */
}

.mosaic-item.is-highlight::after {
    /* Effet Frosty Gold Overlay */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.1) 0%,
            rgba(255, 215, 0, 0.05) 50%,
            rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    z-index: 2;
}

/* NOUVEAU DESIGN TROPHÉE (SVG CROWN) */
.trophy-icon {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Design Glassy + Or */
    background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.25), rgba(255, 215, 0, 0.15));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 50%;

    /* Bordures lumineuses pour effet 3D */
    border-top: 1px solid rgba(255, 255, 255, 0.8);
    border-left: 1px solid rgba(255, 255, 255, 0.4);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 215, 0, 0.3);

    /* Ombres pour détacher du fond */
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.3),
        inset 0 0 12px rgba(255, 215, 0, 0.2);

    /* Couleur de la couronne */
    color: #FFD700;
    z-index: 5;

    /* Animation unique à l'entrée */
    animation: floatTrophyEnter 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    opacity: 0;
    transform: translateY(10px);
}

.trophy-icon svg {
    width: 24px;
    height: 24px;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4));
    /* Ombre portée sous la couronne elle-même */
}

@keyframes floatTrophyEnter {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.8);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Ajustement de l'overlay pour les gros items */
.is-highlight .overlay-title {
    font-size: 1.4rem;
    /* Titre plus gros */
}

.is-highlight .overlay-artist {
    font-size: 1rem;
}

/* --- 9. PUBLIC PAGE --- */
.public-container .content-body {
    padding: 0 30px 30px 30px;
}

.platform-links {
    list-style: none;
    padding: 0;
    margin: 30px 0 0 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.platform-links a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 12px 16px;
    background-color: rgba(245, 245, 247, 0.9);
    border-radius: 10px;
    text-decoration: none;
    color: #1d1d1f;
    font-weight: 600;
    font-size: 1em;
    transition: all 0.2s ease-out;
    border: 1px solid transparent;
}

.platform-links a:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    color: #fff;
}

.platform-links .icon {
    background-size: cover;
    width: 24px;
    height: 24px;
    display: inline-block;
    margin-right: 10px;
    vertical-align: middle;
}

.platform-links a.spotify:hover {
    background-color: #1DB954;
}

.platform-links a.youtube:hover {
    background-color: #FF0000;
}

.platform-links a.itunes:hover {
    background-color: #fb5165;
}

.platform-links a.tidal:hover {
    background-color: #000000;
}

.platform-links a.deezer:hover {
    background-color: #A238FF;
}

.platform-links a.qobuz:hover {
    background-color: #2050E6;
}

.platform-links a.bandcamp:hover {
    background-color: #1DA0C3;
}

.platform-links a.steam:hover {
    background-color: #1b2838;
}

.footer {
    text-align: center;
    font-size: 0.8em;
    color: #e0e0e0;
    width: 100%;
}

.footer a {
    color: #fff;
    text-decoration: none;
}

.footer img {
    height: 15px;
    width: auto;
    vertical-align: middle;
    margin-left: 5px;
}

/* --- 10. RESPONSIVE DESIGN --- */
@media (max-width: 768px) {
    .admin-container {
        padding: 0 10px;
    }

    .header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    table thead {
        display: none;
    }

    table,
    tbody,
    tr,
    td {
        display: block;
        width: 100% !important;
    }

    table tr {
        margin-bottom: 15px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 12px;
        padding: 15px;
        box-sizing: border-box;
    }

    table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        text-align: right;
    }

    table tr td:last-child {
        border-bottom: none;
    }

    table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #eee;
        margin-right: 15px;
        text-align: left;
    }

    .artwork-cell,
    .actions-cell {
        justify-content: flex-end;
    }

    .artwork-cell::before,
    .actions-cell::before {
        margin-right: auto;
    }
}

/* --- 11. HOME PAGE SPECIFIC (CARRD STYLE) --- */
.home-body {
    display: flex;
    justify-content: center;
    align-items: center;
    /* Centrage vertical */
    min-height: 100vh;
    padding: 20px;
    box-sizing: border-box;
    /* Correction du décalage : on s'assure qu'il n'y a pas de marge par défaut qui décale tout */
    margin: 0;
    width: 100%;
}

/* Cache le bouton flottant sur la Home Page uniquement */
body.home-body .patreon-float-btn {
    display: none !important;
}

/* REFACTORING : Conteneur Central Unique */
.home-central-container {
    max-width: 540px;
    /* ELARGI de 480px à 540px */
    width: 100%;
    /* MODIFICATION : Augmentation du padding horizontal */
    padding: 10px 40px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* Correction : suppression des marges auto qui pourraient interférer avec le flexbox parent */
    margin: 0 auto;
    box-sizing: border-box;
    /* S'assure que le padding ne s'ajoute pas à la largeur */
    margin-top: 40px;
    /* Ajout d'une marge pour détacher du logo */
}

/* Header & Logo */
.home-header {
    margin-bottom: 30px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* NOUVEAU : Wrapper pour le logo externe */
.home-logo-wrapper {
    position: absolute;
    top: 5%;
    /* Ajuster la position verticale */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    text-align: center;
    width: 100%;
    /* Ajout d'un peu d'espace si le container monte trop haut sur petit écran, 
       mais le home-body flex center gère pas mal de cas */
}

/* Si on utilise flex center sur body, position absolute peut être tricky sur petit écran.
   Alternative : Mettre le logo dans le flux normal AVANT le container, géré par le flex column du body.
   Cependant, home-body est centré. 
   Modifions home-body pour être flex-column si besoin ou laissons le flux naturel.
*/

/* Réajustement de home-body pour empiler Logo + Container */
.home-body {
    flex-direction: column;
    /* Pour empiler logo et container */
    justify-content: center;
    padding-top: 40px;
}

.home-logo-wrapper {
    position: static;
    /* Dans le flux */
    transform: none;
    margin-bottom: 20px;
    /* Pour la tagline : centrage vertical des enfants */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    /* Espace entre logo et tagline */
}

/* MODIFICATION : Logo encore plus grand */
.home-logo-outside {
    width: 380px;
    /* Agrandit significativement (comme demandé) */
    height: auto;
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.15));
}

.home-tagline {
    width: 250px;
    /* Taille approximative, ajustable */
    height: auto;
    /* Modification : Opacité complète (pas de transparence) */
    opacity: 1;
}


/* --- NOUVEAU STYLE POUR LA DESCRIPTION MODERNISÉE --- */
.home-description-modern {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    font-weight: 400;
    text-align: center;
}

.intro-text {
    font-size: 1.15rem;
    /* Texte un peu plus grand */
    margin-bottom: 15px;
    font-weight: 500;
    color: #fff;
}

.description-details {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 15px;
}

.highlight-brand {
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.5px;
}


.highlight-item {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.3);
}

/* Links Stack */
.links-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    margin-bottom: 30px;
}

.home-link-btn {
    display: flex;
    align-items: center;
    /* justify-content: center;  <- Modifié pour espacer texte et icône */
    justify-content: space-between;
    padding: 14px 24px;
    background: rgba(255, 255, 255, 0.08);
    /* Bouton transparent */
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    /* Boutons pillule complets */
    text-decoration: none;
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.home-link-btn:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.2);
    /* Couleur de fond par défaut au hover (blanc translucide) */
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    color: #fff;
}

/* --- COULEURS DE MARQUE AU SURVOL --- */
.home-link-btn.patreon:hover {
    background-color: #FF424D;
    border-color: #FF424D;
}

.home-link-btn.kofi:hover {
    background-color: #13C3FF;
    border-color: #13C3FF;
}

.home-link-btn.apple:hover {
    background-color: #B161E0;
    border-color: #B161E0;
}

.home-link-btn.acast:hover {
    background-color: #FCEC88;
    border-color: #FCEC88;
    color: #000;
    /* Texte noir pour contraste sur jaune */
}

.home-link-btn.acast:hover .link-icon-img {
    filter: invert(0%) !important;
    /* Force l'icône noire pour contraste */
}

.home-link-btn.deezer:hover {
    background-color: #A238FF;
    border-color: #A238FF;
}

.home-link-btn.spotify:hover {
    background-color: #1DB954;
    border-color: #1DB954;
}

/* STYLE POUR LES ICONES IMAGES DANS LES BOUTONS */
.link-icon-img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: block;
    /* Filtre modifié pour être plus robuste : 
       Invert 100% inverse les noirs en blancs.
       Grayscale + Brightness assure que même les icônes colorées deviennent blanches.
    */
    filter: invert(100%) grayscale(100%) brightness(200%);
    transition: filter 0.2s ease;
}

/* Au survol du bouton, on enlève le filtre blanc pour révéler la couleur originale */
.home-link-btn:hover .link-icon-img {
    filter: none;
}

/* FIX SPÉCIFIQUE : Forcer le blanc sur les logos qui sont noirs à l'origine (Deezer, Spotify, Apple) au survol */
.home-link-btn.deezer:hover .link-icon-img,
.home-link-btn.spotify:hover .link-icon-img,
.home-link-btn.apple:hover .link-icon-img {
    filter: invert(100%) grayscale(100%) brightness(200%);
}

.btn-icon-right {
    font-size: 1.2rem;
    margin-left: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    /* Fixe la largeur pour alignement */
}


/* Lien de mise en avant (ex: Collection) */
.home-link-btn.highlight-link {
    background: rgba(43, 244, 143, 0.2);
    border-color: rgba(43, 244, 143, 0.5);
    color: #fff;
}

.home-link-btn.highlight-link:hover {
    background: rgba(43, 244, 143, 0.4);
    box-shadow: 0 0 20px rgba(43, 244, 143, 0.2);
}

/* Separator */
.separator-container {
    width: 100%;
    margin-bottom: 25px;
    display: flex;
    justify-content: center;
}

.separator-img {
    width: 80%;
    max-width: 200px;
    height: auto;
    opacity: 0.8;
}

/* Social Row */
.social-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.2s ease;
    padding: 10px;
    border-radius: 50%;
    background: transparent;
}

.social-icon:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

/* Footer & Admin */
.admin-link-wrapper {
    margin-top: 10px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.3);
}

.admin-discrete-link {
    color: inherit;
    text-decoration: none;
}

.admin-discrete-link:hover {
    color: #fff;
    text-decoration: underline;
}

/* MODIFICATION : Footer textuel simple, centré sous le container */
.home-footer {
    position: relative;
    /* Reprend sa place dans le flux normal */
    width: 100%;
    text-align: center;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.2);
    margin-top: 40px;
    /* Espace entre le container et le footer */
    pointer-events: none;
}

.home-footer p {
    margin: 0;
}

/* --- 12. FLOATING ACTIONS & PATREON --- */

/* Par défaut (Desktop) : Bouton flottant visible, Footer masqué */
.patreon-float-btn.show-on-desktop {
    display: flex;
}

.mobile-footer-patreon.show-on-mobile {
    display: none;
}

.patreon-float-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 10px;

    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 1);

    padding: 12px 20px;
    border-radius: 50px;
    text-decoration: none;
    color: #000;
    font-size: 0.95rem;
    font-weight: 700;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.patreon-float-btn:hover {
    background: #fff;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.3);
    color: #000;
}

.patreon-icon {
    width: 24px;
    height: 24px;
    fill: #000;
    transition: transform 0.3s ease;
    display: block;
}

.patreon-float-btn:hover .patreon-icon {
    transform: rotate(-10deg);
    fill: #FF424D;
}

.patreon-text {
    white-space: nowrap;
}

/* --- RESPONSIVE MOBILE (< 768px) --- */
@media (max-width: 768px) {

    /* Cache le bouton flottant */
    .patreon-float-btn.show-on-desktop {
        display: none !important;
    }

    /* Affiche le lien footer */
    .mobile-footer-patreon.show-on-mobile {
        display: block;
        text-align: center;
        padding: 20px 0 40px 0;
        /* Un peu d'espace en bas */
        width: 100%;
        margin-top: 20px;
    }

    .mobile-footer-patreon a {
        color: rgba(255, 255, 255, 0.6);
        text-decoration: none;
        font-size: 0.9rem;
        border-bottom: 1px dashed rgba(255, 255, 255, 0.3);
        padding-bottom: 2px;
        transition: color 0.2s ease;
    }

    .mobile-footer-patreon a:active {
        color: #fff;
        border-bottom-color: #fff;
    }
}

/* --- 13. ADMIN DASHBOARD REDESIGN --- */

.admin-body {
    padding-top: 40px;
    padding-bottom: 80px;
}

/* En-tête Flottant (Modifié) */
.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding: 10px 0;
    /* Réduction du padding, retrait du background */
    background: transparent;
    backdrop-filter: none;
    border-radius: 0;
    border: none;
}

.header-content {
    display: flex;
    align-items: center;
    gap: 20px;
}

.admin-logo {
    height: 32px;
    width: auto;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.2));
}

.header-actions {
    display: flex;
    gap: 12px;
    /* Espace entre les boutons */
}

/* Boutons supérieurs stylisés (Glassmorphism) */
.btn-sm.btn-secondary {
    padding: 10px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    /* Arrondi plus prononcé */
    color: #fff;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-sm.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.btn-sm.btn-secondary.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.05);
}

.btn-sm.btn-secondary.disabled:hover {
    transform: none;
    box-shadow: none;
}

.header-content {
    display: flex;
    align-items: center;
    gap: 20px;
}

.admin-logo {
    height: 32px;
    /* Réduit la taille du logo */
    width: auto;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.2));
}

.admin-header h1 {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0;
    line-height: 1;
}

.subtitle {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 5px 0 0 0;
}

/* Bouton Déconnexion Stylisé */
.btn-sm.btn-secondary {
    padding: 8px 16px;
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #fff;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-sm.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
}

/* Create Section */
.create-section {
    padding: 30px;
    margin-bottom: 30px;
}

.create-section h2 {
    margin-top: 0;
    font-size: 1.4rem;
    margin-bottom: 20px;
}

.input-group {
    display: flex;
    gap: 10px;
}

.input-group input {
    flex: 1;
    padding: 15px 20px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.input-group input:focus {
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.3);
    outline: none;
}

/* Bouton "Créer" Stylisé */
.create-form .btn-primary {
    padding: 0 30px;
    /* Largeur augmentée */
    font-size: 1rem;
    font-weight: 600;
    background: #fff;
    color: #000;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
}

.create-form .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.2);
}

/* Table Redesign */
.table-card {
    padding: 0;
    /* Reset padding for full-width rows */
    overflow: visible;
    /* Allow hover effects to pop out */
}

.table-header {
    padding: 25px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.table-header h2 {
    margin: 0;
    font-size: 1.4rem;
}

.sort-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
}

.sort-label {
    color: rgba(255, 255, 255, 0.4);
}

.sort-btn {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.6);
    padding: 6px 12px;
    border-radius: 8px;
    transition: all 0.2s;
    background: rgba(255, 255, 255, 0.05);
}

.sort-btn.active {
    background: #fff;
    color: #000;
    font-weight: 600;
}

/* Custom Table Layout */
.custom-table {
    display: flex;
    flex-direction: column;
}

.table-head {
    display: grid;
    grid-template-columns: 80px 3fr 2fr 120px 140px;
    /* Colonnes fixes */
    padding: 15px 30px;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 600;
}

/* Centrage du titre de la colonne Actions */
.table-head .col-actions {
    text-align: right;
    /* Aligné à droite comme le contenu */
}

.table-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 20px;
}

.table-row {
    display: grid;
    grid-template-columns: 80px 3fr 2fr 120px 140px;
    align-items: center;
    padding: 15px 30px;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.table-row:hover {
    background: rgba(255, 255, 255, 0.03);
}

.table-row.row-hidden {
    opacity: 0.5;
}

.table-row.row-highlight {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.05) 0%, transparent 100%);
    border-left-color: #ffd700;
}

/* Artwork Column */
.art-thumb {
    width: 48px;
    height: 48px;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.art-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.edit-overlay-btn {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
    color: #fff;
    cursor: pointer;
}

.art-thumb:hover .edit-overlay-btn {
    opacity: 1;
}

/* Info Column */
.track-title {
    font-weight: 600;
    color: #fff;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* NOUVEAU : Lien sur le titre */
.track-link {
    color: #fff;
    text-decoration: none;
    transition: color 0.2s ease;
}

.track-link:hover {
    color: #58a6ff;
    text-decoration: underline;
}

.artist-name {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
}

.badge-highlight {
    font-size: 0.9rem;
}

/* Slug Column - Revoir affichage */
.col-slug {
    display: flex;
    align-items: center;
    min-width: 0;
    overflow: hidden;
}

/* MODIFICATION : .slug-pill est maintenant un bouton */
.slug-pill {
    display: inline-block;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.05);
    /* Fond plus discret */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    font-family: monospace;
    /* Police monospace conservée */
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    /* Couleur texte plus douce */
    text-decoration: none;
    transition: all 0.2s;

    /* Troncature */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;

    /* Reset Button Styles */
    cursor: pointer;
    line-height: normal;
    text-align: left;
}

.slug-pill:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

/* Date Column */
.col-date {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
    font-variant-numeric: tabular-nums;
}

/* Actions Column */
.action-group {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.icon-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.btn-highlight.active {
    color: #ffd700;
}

.btn-highlight:hover {
    color: #ffd700;
    background: rgba(255, 215, 0, 0.1);
}

.btn-delete:hover {
    color: #ff6b6b;
    background: rgba(255, 107, 107, 0.1);
}

/* Pagination */
.pagination-container {
    padding: 20px;
    display: flex;
    justify-content: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.pagination-pills {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(0, 0, 0, 0.2);
    padding: 5px 10px;
    border-radius: 50px;
}

.page-pill {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.2s;
}

.page-pill:hover {
    background: #fff;
    color: #000;
}

.page-info {
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
}

/* Responsive Table */
@media (max-width: 768px) {
    .table-head {
        display: none;
        /* Hide headers on mobile */
    }

    .table-row {
        grid-template-columns: 60px 1fr;
        grid-template-areas:
            "art info"
            "art slug"
            "actions actions";
        gap: 10px;
        padding: 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .col-art {
        grid-area: art;
    }

    .col-info {
        grid-area: info;
    }

    .col-slug {
        grid-area: slug;
    }

    .col-date {
        display: none;
    }

    /* Hide date on mobile */
    .col-actions {
        grid-area: actions;
        justify-content: flex-start;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
    }

    .action-group {
        width: 100%;
        justify-content: space-between;
    }
}

/* Admin Controls in Mosaic */
.admin-mosaic-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 5px;
    z-index: 20;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mosaic-item-wrapper:hover .admin-mosaic-controls {
    opacity: 1;
}

.admin-control-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.6);
    color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(4px);
    transition: all 0.2s ease;
}

.admin-control-btn:hover {
    transform: scale(1.1);
    color: white;
}

.admin-control-btn.highlight-btn:hover,
.admin-control-btn.highlight-btn.active {
    background: rgba(255, 215, 0, 0.2);
    color: #ffd700;
}

.admin-control-btn.hide-btn:hover,
.admin-control-btn.hide-btn.active {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.admin-control-btn.delete-btn:hover {
    background: rgba(255, 59, 48, 0.3);
    color: #ff3b30;
}

/* Ensure controls are usable on touch devices */
@media (hover: none) {
    .admin-mosaic-controls {
        opacity: 1;
        background: rgba(0, 0, 0, 0.3);
        padding: 4px;
        border-radius: 20px;
    }
}

/* Mobile adjustments for Admin Header */
@media (max-width: 768px) {
    .admin-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
}
/* --- Toggle Switch (Added Fix) --- */
.toggle-switch {
    width: 20px;
    height: 20px;
    accent-color: var(--primary-color, #3498db);
    cursor: pointer;
}

.form-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: 20px;
}

.form-toggle label {
    margin: 0;
    cursor: pointer;
}

/* --- Mosaic Responsive Improvements --- */
.month-short {
    display: none;
}

@media (max-width: 768px) {
    .month-full {
        display: none;
    }
    .month-short {
        display: inline;
    }
}

.playlist-pill.disabled {
    font-size: 0.75rem; /* Smaller text */
    white-space: nowrap; /* Prevent line break */
    padding: 8px 12px;
}

/* --- Modern Form Actions & Toggles --- */
.form-actions-modern {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.toggles-group {
    display: flex;
    gap: 30px;
}

.toggle-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.toggle-label {
    font-size: 0.95rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
}

/* The Switch Box */
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The Slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.2);
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

input:checked + .slider {
    background-color: #3498db; /* Primary Color */
}

input:focus + .slider {
    box-shadow: 0 0 1px #3498db;
}

input:checked + .slider:before {
    transform: translateX(24px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

/* Modern Buttons */
.buttons-group {
    display: flex;
    gap: 15px;
}

.btn-modern {
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-cancel {
    background-color: transparent;
    color: rgba(255, 255, 255, 0.6);
    border-color: rgba(255, 255, 255, 0.2);
}

.btn-cancel:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
}

.btn-save {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
}

.btn-save:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(52, 152, 219, 0.5);
    filter: brightness(1.1);
}

/* Responsive Actions */
@media (max-width: 600px) {
    .form-actions-modern {
        flex-direction: column-reverse; /* Buttons toggles on top or bottom? Stack 'em */
        gap: 20px;
        align-items: stretch;
    }
    
    .toggles-group {
        justify-content: space-between;
    }
    
    .buttons-group {
        display: flex;
        flex-direction: column;
    }
    
    .btn-modern {
        width: 100%;
    }
}

/* Fix mobile overflow */
.btn-modern {
    box-sizing: border-box;
}

/* --- Admin Playlists & Accordion Styles --- */
.admin-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px;
    color: #eee;
}

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

/* Accordion */
.years-accordion {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.accordion-item {
    background: #1e1e1e;
    border: 1px solid #333;
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.2s;
}

.accordion-item.open {
    border-color: #555;
}

.accordion-header {
    background: rgba(255, 255, 255, 0.02);
    padding: 15px 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}

.accordion-header:hover {
    background: rgba(255, 255, 255, 0.05);
}

.accordion-header h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.accordion-header .arrow {
    transition: transform 0.3s;
    color: #888;
}

.accordion-item.open .arrow {
    transform: rotate(180deg);
}

.accordion-content {
    display: none;
    padding: 20px;
    border-top: 1px solid #333;
    background: rgba(0, 0, 0, 0.1);
}

.accordion-item.open .accordion-content {
    display: block;
}

/* Grid Form */
.months-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 25px;
}

.month-input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.month-input-group label {
    font-size: 0.85rem;
    color: #888;
    font-weight: 500;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    border: 1px solid #333;
    transition: border-color 0.2s;
}

.input-wrapper:focus-within {
    border-color: #3498db;
}

.field-icon {
    margin-left: 10px;
    color: #888;
    opacity: 0.6;
}

.input-minimal {
    background: transparent;
    border: none;
    color: #fff;
    padding: 10px;
    font-size: 0.9rem;
    width: 100%;
    outline: none;
}

.input-minimal::placeholder {
    color: #444;
}

/* --- Back Link Style --- */
.back-link {
    display: inline-flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.2s;
}

.back-link:hover {
    color: #fff;
    text-decoration: underline;
}

/* --- Shared Admin Header Styles (from admin_data) --- */
.header-title h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.5px;
}

.header-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    color: #ccc;
    border-color: rgba(255, 255, 255, 0.1);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.btn-icon-only {
    padding: 8px;
    color: #888;
}

.btn-icon-only:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}

/* --- Standardization --- */
.admin-container {
    max-width: 800px; /* Match admin_data exactly */
}

/* --- Base Button Style (Missing from previous migration) --- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.2s;
    border: 1px solid transparent;
    cursor: pointer;
    line-height: 1.5;
}

/* --- CSS Variables (Restored) --- */
:root {
    --bg-dark: #121212;
    --bg-card: #1e1e1e;
    --border-color: #333;
    --text-main: #eee;
    --text-muted: #888;
    --primary: #3498db;
    --danger: #e74c3c;
    --success: #2ecc71;
}

/* --- Playlist Tooltip --- */
.playlist-pill[data-tooltip] {
    position: relative; /* Ensure positioning context */
}

.playlist-pill[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 110%; /* Place above */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: normal; /* Allow wrapping */
    width: max-content;
    max-width: 200px; /* Prevent too wide on mobile */
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    z-index: 1000;
    pointer-events: none;
    line-height: 1.4;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Tooltip Arrow */
.playlist-pill[data-tooltip]:hover::before {
    /* Using a separate pseudo-element if before wasn't taken, 
       but before IS taken by the light effect. 
       We will rely on simple positioning or modify before stack. 
       Since before is taken, we skip the arrow for simplicity 
       or we would need a nested span for the tooltip. 
       Design preference: Simple box is fine given modern UI context.
    */
}

/* --- Tooltip Fix --- */
.playlist-pill {
    overflow: visible !important; /* Allow tooltip to render outside */
}