:root {
    --background: #f5f5f5;
    --surface: #ffffff;
    --surface-hover: #f0f0f0;

    --text: #202020;
    --text-secondary: #707070;

    --border: #dddddd;

    --button-background: #ffffff;
    --button-hover: #eeeeee;

    --danger: #a92b2b;
}


[data-theme="dark"] {
    --background: #101010;
    --surface: #1a1a1a;
    --surface-hover: #242424;

    --text: #eeeeee;
    --text-secondary: #999999;

    --border: #333333;

    --button-background: #242424;
    --button-hover: #303030;

    --danger: #e57373;
}


* {
    box-sizing: border-box;
}


body {
    margin: 0;

    font-family:
        Arial,
        sans-serif;

    background: var(--background);
    color: var(--text);

    transition:
        background 0.2s,
        color 0.2s;
}


.topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}


.topbar-content {
    max-width: 1000px;
    margin: auto;

    min-height: 64px;

    display: flex;
    align-items: center;

    gap: 2rem;

    padding: 0 1.5rem;
}


.brand {
    color: var(--text);
    text-decoration: none;

    font-size: 1.1rem;
    font-weight: bold;

    white-space: nowrap;
}


.navigation {
    display: flex;
    gap: 0.5rem;

    flex: 1;
}


.nav-link {
    color: var(--text-secondary);
    text-decoration: none;

    padding: 0.6rem 0.8rem;

    border-radius: 6px;
}


.nav-link:hover {
    background: var(--surface-hover);
}


.nav-link.active {
    color: var(--text);
    font-weight: bold;

    background: var(--surface-hover);
}


.topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}


button {
    padding: 0.65rem 0.9rem;

    border: 1px solid var(--border);
    border-radius: 6px;

    background: var(--button-background);
    color: var(--text);

    cursor: pointer;
}


button:hover {
    background: var(--button-hover);
}


.theme-button {
    min-width: 42px;
}


.sync-button {
    font-weight: bold;
}


main {
    max-width: 1000px;

    margin: auto;

    padding: 2rem 1.5rem;
}


.section-header {
    display: flex;

    justify-content: space-between;
    align-items: flex-start;

    gap: 1rem;

    margin-bottom: 1.5rem;
}


h1 {
    margin: 0;

    font-size: 1.7rem;
}


.subtitle {
    margin:
        0.4rem 0 0;

    color: var(--text-secondary);
}


.release-count {
    color: var(--text-secondary);

    font-size: 0.9rem;
}


.releases {
    display: grid;

    gap: 0.8rem;
}


.release {
    display: flex;

    gap: 1.5rem;

    padding: 1rem;

    background: var(--surface);

    border: 1px solid var(--border);
    border-radius: 8px;
}


.release-date {
    min-width: 100px;

    font-weight: bold;
}


.release-info {
    min-width: 0;
}


.release-artist {
    display: block;
}


.release-title {
    margin-top: 0.3rem;
}


.release-type {
    margin-top: 0.3rem;

    color: var(--text-secondary);

    font-size: 0.9rem;
}


.artist-search {
    display: flex;

    gap: 0.5rem;

    margin-bottom: 1.5rem;
}


.artist-search input {
    flex: 1;

    min-width: 0;

    padding: 0.75rem;

    border:
        1px solid var(--border);

    border-radius: 6px;

    background: var(--surface);
    color: var(--text);

    font-size: 1rem;
}


.artists {
    display: grid;

    gap: 0.6rem;
}


.artist-item {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 1rem;

    padding: 1rem;

    background: var(--surface);

    border:
        1px solid var(--border);

    border-radius: 8px;
}


.artist-info {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 0.3rem;
}


.artist-name {
    font-weight: bold;
}


.artist-mbid {
    color: var(--text-secondary);

    font-size: 0.8rem;

    overflow-wrap: anywhere;
}


.delete-button {
    color: var(--danger);
}


.empty-state {
    padding: 2rem;

    text-align: center;

    background: var(--surface);

    border:
        1px solid var(--border);

    border-radius: 8px;

    color: var(--text-secondary);
}


.empty-state a {
    color: var(--text);
}


@media (max-width: 650px) {

    /* Barre supérieure */

    .topbar-content {
        flex-wrap: wrap;
        gap: 0.7rem;

        padding-top: 0.8rem;
        padding-bottom: 0.8rem;
    }

    .brand {
        width: 100%;
        font-size: 1rem;
    }

    .navigation {
        flex: 1;
        order: 2;

        gap: 0.2rem;
    }

    .nav-link {
        padding: 0.55rem 0.7rem;
    }

    .topbar-actions {
        order: 3;
        margin-left: auto;
    }


    /* Contenu */

    main {
        padding: 1.3rem 1rem;
    }

    h1 {
        font-size: 1.4rem;
    }

    .section-header {
        align-items: center;
    }


    /* Sorties */

    .release {
        align-items: flex-start;
        gap: 1rem;
    }

    .release-cover {
        width: 80px;
        height: 80px;

        flex: 0 0 80px;
    }

    .release-content {
        flex: 1;
        min-width: 0;

        display: block;
    }

    .release-date {
        min-width: 0;

        margin-bottom: 0.35rem;

        font-size: 0.85rem;

        color: var(--text-secondary);
    }

    .release-title {
        overflow-wrap: anywhere;
    }


    /* Recherche */

    .artist-search {
        flex-direction: column;
    }

    .artist-search input {
        width: 100%;
    }

    .artist-search button {
        width: 100%;
    }


    /* Artistes */

    .artist-item {
        gap: 0.7rem;
    }

    .artist-info {
        flex: 1;
        min-width: 0;
    }

    .artist-name {
        overflow-wrap: anywhere;
    }

    .artist-mbid {
        display: none;
    }


    /* Boutons */

    button {
        min-height: 42px;
    }

}

.search-results {
    display: grid;
    gap: 0.6rem;
}

.back-link {
    margin-top: 1.5rem;
}

.back-link a {
    color: var(--text);
    text-decoration: none;
}

.back-link a:hover {
    text-decoration: underline;
}

.release {
    display: flex;
    gap: 1rem;

    padding: 1rem;

    background: var(--surface);

    border: 1px solid var(--border);
    border-radius: 8px;
}

.release-cover {
    width: 90px;
    height: 90px;

    flex: 0 0 90px;

    border-radius: 6px;
    overflow: hidden;

    background: var(--surface-hover);
}

.release-cover img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.cover-placeholder {
    width: 100%;
    height: 100%;

    display: none;

    align-items: center;
    justify-content: center;

    color: var(--text-secondary);

    font-size: 2rem;
}

.release-content {
    min-width: 0;

    display: flex;
    gap: 1.5rem;

    align-items: center;
}

.release-date {
    min-width: 100px;

    font-weight: bold;
}

.sync-status {
    margin-top: 0.5rem;

    color: var(--text-secondary);

    font-size: 0.85rem;
}

.release-filters {
    display: flex;
    flex-wrap: wrap;

    gap: 1rem;

    margin-top: 1rem;
    margin-bottom: 1.5rem;
}

.release-filters label {
    display: flex;
    align-items: center;

    gap: 0.4rem;

    cursor: pointer;

    color: var(--text-secondary);
}

.release-filters input {
    cursor: pointer;
}

.artists-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        2rem;

    gap: 1rem;
}


.artist-group {
    scroll-margin-top: 1rem;
}


.artist-group + .artist-group {
    margin-top: 1.5rem;
}


.artist-letter {
    margin:
        0 0 0.6rem;

    color: var(--text-secondary);

    font-size: 1rem;
}


.alphabet-nav {
    position: sticky;
    top: 1rem;

    align-self: start;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 0.1rem;

    max-height:
        calc(100vh - 2rem);
}


.alphabet-link {
    width: 1.8rem;
    height: 1.4rem;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--text);
    text-decoration: none;

    border-radius: 4px;

    font-size: 0.75rem;
    font-weight: bold;
}


.alphabet-link:hover {
    background:
        var(--surface-hover);
}


.alphabet-link.disabled {
    color: var(--text-secondary);

    opacity: 0.3;
}


@media (max-width: 600px) {

    .artists-layout {
        grid-template-columns:
            minmax(0, 1fr)
            1.5rem;

        gap: 0.5rem;
    }


    .alphabet-link {
        width: 1.4rem;

        font-size: 0.65rem;
    }

}

.sync-progress {
    color: var(--text-secondary);
    font-size: 0.8rem;
    white-space: nowrap;
}

.sync-button:disabled {
    opacity: 0.55;
    cursor: wait;
}


/* A7.1 — configuration du premier compte */
.setup-page {
    min-height: 100vh;
}

.setup-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 2rem 1rem;
}

.setup-card {
    width: min(100%, 32rem);
    padding: 2rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

.setup-heading h1 {
    margin: 0.25rem 0 0.75rem;
}

.setup-kicker {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.setup-form {
    display: grid;
    gap: 0.55rem;
    margin-top: 1.5rem;
}

.setup-form input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.75rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--background);
    color: var(--text);
    font: inherit;
}

.setup-form input:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.field-label {
    margin-top: 0.45rem;
    font-weight: 600;
}

.field-help,
.setup-note {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.form-error {
    margin-top: 1rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-weight: 600;
}

.setup-submit {
    margin-top: 1rem;
}

.setup-note {
    margin-top: 1.25rem;
}

/* A7.2 — Authentification */
.user-badge {
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.88rem;
    opacity: 0.78;
}

.logout-button {
    border: 1px solid var(--border-color, #d6d6d6);
    background: transparent;
    color: inherit;
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    cursor: pointer;
}

.auth-page {
    min-height: 100vh;
}

.auth-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 2rem 1rem;
}

.auth-card {
    width: min(100%, 420px);
    padding: 2rem;
    border: 1px solid var(--border-color, #d6d6d6);
    border-radius: 16px;
    background: var(--card-background, inherit);
}

.auth-heading h1 {
    margin: 0.35rem 0 0.5rem;
}

.auth-heading p {
    margin: 0 0 1.5rem;
    opacity: 0.72;
}

.auth-kicker {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.6;
}

.auth-form {
    display: grid;
    gap: 1rem;
}

.auth-form label {
    display: grid;
    gap: 0.4rem;
}

.auth-form input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--border-color, #d6d6d6);
    border-radius: 9px;
    background: inherit;
    color: inherit;
}

.auth-submit {
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.85rem 1rem;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
}

.auth-error {
    margin-bottom: 1rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid currentColor;
    border-radius: 9px;
}

/* A7.3 — Administration des utilisateurs */
.admin-grid { display:grid; grid-template-columns:minmax(260px,360px) minmax(0,1fr); gap:1.5rem; align-items:start; }
.admin-card { border:1px solid var(--border-color,#d6d6d6); border-radius:14px; padding:1.25rem; }
.admin-card h2 { margin-top:0; }
.admin-form,.admin-password-form { display:grid; gap:.8rem; }
.admin-form label { display:grid; gap:.35rem; }
.admin-form input,.admin-password-form input { box-sizing:border-box; width:100%; padding:.7rem .8rem; border:1px solid var(--border-color,#d6d6d6); border-radius:8px; background:inherit; color:inherit; }
.admin-user-list { display:grid; gap:.9rem; }
.admin-user { border:1px solid var(--border-color,#d6d6d6); border-radius:10px; padding:1rem; }
.admin-user-heading,.admin-user-actions { display:flex; gap:.7rem; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.admin-user-actions { margin-top:.9rem; justify-content:flex-start; }
.admin-badge,.inactive-badge { display:inline-block; margin-left:.45rem; padding:.18rem .45rem; border:1px solid currentColor; border-radius:999px; font-size:.72rem; opacity:.75; }
.admin-message { padding:.75rem .9rem; border:1px solid var(--border-color,#d6d6d6); border-radius:8px; }
.admin-user details { min-width:min(100%,340px); }
.admin-user summary { cursor:pointer; }
.admin-password-form { margin-top:.75rem; }
@media (max-width:800px) { .admin-grid { grid-template-columns:1fr; } }


/* A10.2 — Associations de sources externes */
.source-links { margin-top:.45rem; font-size:.82rem; opacity:.9; }
.source-links summary { cursor:pointer; user-select:none; }
.source-links-content { display:grid; gap:.45rem; margin-top:.55rem; }
.vgmdb-association { display:flex; gap:.45rem; flex-wrap:wrap; }
.vgmdb-association input[type="text"] { min-width:180px; flex:1; padding:.45rem .55rem; border:1px solid var(--border-color,#d6d6d6); border-radius:7px; background:inherit; color:inherit; }
.vgmdb-association button { padding:.45rem .65rem; }

/* Attribution affichée uniquement lorsque la pochette de secours vient de Spotify. */
.spotify-cover-attribution {
    position: absolute;
    right: 4px;
    bottom: 4px;

    padding: 2px 4px;

    border-radius: 3px;

    background: rgba(0, 0, 0, 0.78);
    color: #fff;

    font-size: 0.55rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
}

.release-cover {
    position: relative;
}

/* A11.2 — Safari / PWA iOS */
html {
    min-height: 100%;
    background: var(--background);
    color-scheme: light;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html[data-theme="dark"] { color-scheme: dark; }

body {
    min-height: 100vh;
    min-height: 100dvh;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    -webkit-tap-highlight-color: transparent;
}

.topbar-content {
    padding-left: max(1.5rem, env(safe-area-inset-left));
    padding-right: max(1.5rem, env(safe-area-inset-right));
}

button, input, select, textarea { font: inherit; }
button, .nav-link, a { touch-action: manipulation; }

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.brand-logo {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 7px;
}

@media (hover: none) {
    .nav-link:hover, button:hover, .alphabet-link:hover { background: initial; }
    .nav-link.active { background: var(--surface-hover); }
}

@media (max-width: 650px) {
    .topbar-content {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }

    main {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
        padding-bottom: max(1.3rem, env(safe-area-inset-bottom));
    }

    input, select, textarea { font-size: 16px; }

    .topbar-actions {
        width: 100%;
        margin-left: 0;
        flex-wrap: wrap;
    }

    .topbar-actions form { margin: 0; }
    .user-badge { max-width: 9rem; }
}

@media (display-mode: standalone) {
    .topbar {
        padding-top: env(safe-area-inset-top);
    }
}


/* A11.2.2 — Menu utilisateur mobile compact */
.desktop-actions { display:flex; align-items:center; gap:.5rem; }
.sync-form { display:flex; align-items:center; gap:.5rem; }
.mobile-user-menu { display:none; position:relative; }
.mobile-user-summary {
    list-style:none; cursor:pointer; padding:.55rem .75rem;
    border:1px solid var(--border); border-radius:7px;
    background:var(--button-background); color:var(--text); font-weight:600;
    max-width:10rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mobile-user-summary::-webkit-details-marker { display:none; }
.mobile-user-summary::after { content:" ▾"; }
.mobile-user-menu[open] .mobile-user-summary::after { content:" ▴"; }
.mobile-user-dropdown {
    position:absolute; z-index:1000; top:calc(100% + .45rem); right:0;
    min-width:13rem; padding:.45rem; border:1px solid var(--border);
    border-radius:10px; background:var(--surface); box-shadow:0 10px 30px rgba(0,0,0,.22);
}
.mobile-user-dropdown form { display:grid; gap:.25rem; margin:0; }
.mobile-menu-action { width:100%; min-height:44px; text-align:left; border:0; background:transparent; }
@media (max-width:650px) {
    .desktop-actions { display:none; }
    .mobile-user-menu { display:block; margin-left:auto; }
    .topbar-actions { width:auto; margin-left:auto; flex-wrap:nowrap; }
    .navigation { min-width:0; flex-wrap:wrap; }
    .sync-progress { width:100%; }
}


/* A11.2.3 — Barre de navigation mobile compacte */
@media (max-width: 650px) {
    .topbar-content {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 0.5rem;
        row-gap: 0.65rem;
    }

    .brand {
        grid-column: 1 / -1;
    }

    .navigation {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.15rem;
        min-width: 0;
        overflow: visible;
    }

    .navigation a {
        flex: 0 1 auto;
        min-width: 0;
        padding: 0.5rem 0.55rem;
        font-size: clamp(0.82rem, 3.45vw, 1rem);
        white-space: nowrap;
    }

    .topbar-actions {
        width: auto;
        min-width: 0;
        margin: 0;
        justify-self: end;
    }

    .mobile-user-summary {
        max-width: 7.5rem;
        padding: 0.5rem 0.6rem;
        font-size: clamp(0.82rem, 3.45vw, 1rem);
    }
}

@media (max-width: 390px) {
    .topbar-content {
        column-gap: 0.25rem;
    }

    .navigation {
        gap: 0;
    }

    .navigation a {
        padding-inline: 0.38rem;
        font-size: 0.78rem;
    }

    .mobile-user-summary {
        max-width: 6rem;
        padding-inline: 0.45rem;
        font-size: 0.78rem;
    }
}