body:has(.dashboard-admin),
body:has(.dashboard-musician),
body:has(.change-password),
body:has(.add-event),
body:has(.gestion-musiciens),
body:has(.add-mailing),
body:has(.newsletter-admin),
body:has(.gallery-admin),
body:has(.edit-lyrics),
body:has(.edit-sections) {
    background-position: center;
}

.dashboard-admin,
.dashboard-musician,
.change-password,
.add-event,
.gestion-musiciens,
.add-mailing,
.newsletter-admin,
.gallery-admin,
.edit-lyrics,
.edit-sections {
    width: min(100% - 2rem, 76rem);
    margin-inline: auto;
    padding: clamp(2rem, 5vw, 4rem) 0;
}

.dashboard-admin h1,
.dashboard-musician h1,
.change-password h1,
.add-event h1,
.gestion-musiciens h1,
.add-mailing h1,
.newsletter-admin h1,
.gallery-admin h1,
.edit-lyrics h1,
.edit-sections h1 {
    margin-bottom: 2rem;
    color: var(--color-ink);
    font-size: clamp(2.4rem, 5vw, 4rem);
}

.dashboard-admin h2,
.dashboard-musician h2,
.change-password h2,
.add-event h2,
.gestion-musiciens h2,
.add-mailing h2,
.newsletter-admin h2,
.gallery-admin h2,
.edit-lyrics h2,
.edit-sections h2 {
    color: var(--color-ink);
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    line-height: 1.15;
}

.dashboard-grid,
.admin-menu-grid,
.admin-pages-grid,
.newsletter-editor,
.lyrics-editor-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 1.4rem;
}

.dashboard-card,
.admin-page-header,
.admin-menu,
.admin-page-card,
.change-password-form,
.add-event-form,
.form-ajout,
.add-mailing-form,
#newsletter-form,
.newsletter-preview,
.gallery-admin form,
.edit-lyrics > section,
.edit-sections > section,
.edit-lyrics-header,
.edit-sections-header {
    padding: clamp(1.25rem, 3vw, 2rem);
    color: var(--color-ink);
    background: var(--color-paper-soft);
    border: 1px solid var(--color-line);
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
}

.newsletter-preview iframe {
    display: block;
    width: 100%;
    min-height: 42rem;
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: 8px;
}

.admin-page-header {
    margin-bottom: 1.5rem;
}

.dashboard-musician .admin-page-header {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.dashboard-musician .admin-page-header p {
    display: none;
}

.admin-page-header h1,
.admin-page-header p {
    margin: 0;
}

.admin-page-header p {
    margin-top: 0.7rem;
    font-size: 1.1rem;
    font-weight: 700;
}

.admin-menu {
    padding: 0;
    overflow: hidden;
}

.admin-menu summary {
    padding: 1.2rem 1.4rem;
    color: var(--color-white);
    font-size: 1.35rem;
    font-weight: 700;
    background: var(--color-blue-900);
    cursor: pointer;
}

.admin-menu-links {
    display: grid;
}

.admin-menu-links a {
    display: grid;
    gap: 0.3rem;
    padding: 1.1rem 1.4rem;
    color: var(--color-ink);
    text-decoration: none;
    border-top: 1px solid var(--color-line);
    transition: background-color 160ms ease;
}

.admin-menu-links a:hover,
.admin-menu-links a:focus-visible {
    background: var(--color-paper-glass-active);
}

.admin-menu-links strong {
    font-size: 1.15rem;
}

.admin-menu-links span {
    font-weight: 700;
}

.admin-pages-grid {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.admin-page-card {
    display: grid;
    gap: 0.55rem;
    min-height: 11.5rem;
    align-content: start;
    color: var(--color-ink);
    text-decoration: none;
    transition: transform 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.admin-page-card:hover,
.admin-page-card:focus-visible {
    background: var(--color-paper-glass-active);
    box-shadow: var(--shadow-card);
    transform: translateY(-0.2rem);
}

.admin-page-icon {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    min-height: 3.1rem;
    align-items: center;
    justify-content: center;
    padding: 0.65rem 0.9rem;
    color: var(--color-white);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    background: var(--color-blue-900);
    border-radius: 8px;
}

.admin-page-card small {
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.35;
}

.dashboard-card {
    min-height: 10rem;
    text-decoration: none;
    transition: transform 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.dashboard-card:hover,
.dashboard-card:focus-visible {
    background: var(--color-paper-glass-active);
    box-shadow: var(--shadow-card);
    transform: translateY(-0.2rem);
}

.dashboard-card h2,
.dashboard-card p {
    margin: 0;
}

.dashboard-card p {
    margin-top: 0.75rem;
    font-weight: 700;
}

.form-group,
.champ,
.edit-lyrics-song-field,
.edit-sections-song-field,
.section-editor-field {
    display: grid;
    gap: 0.4rem;
    margin-bottom: 1.15rem;
}

.form-group label,
.champ label,
.edit-lyrics-song-field label,
.edit-sections-song-field label,
.section-editor-field label {
    color: var(--color-ink);
    font-weight: 700;
}

.form-group input,
.form-group select,
.form-group textarea,
.change-password input,
.champ input,
.champ select,
.champ textarea,
.edit-lyrics select,
.edit-lyrics textarea,
.edit-sections select,
.edit-sections textarea,
.edit-sections input,
.gallery-admin input,
.gallery-admin select,
.newsletter-admin input,
.newsletter-admin textarea {
    width: 100%;
    min-height: 2.6rem;
    padding: 0.55rem 0.75rem;
    color: var(--color-ink);
    font-weight: 700;
    background: var(--color-paper-glass-active);
    border: 1.5px solid var(--color-line);
    border-radius: 6px;
    outline: 0;
}

.form-group textarea,
.newsletter-admin textarea,
.edit-lyrics textarea,
.edit-sections textarea {
    min-height: 9rem;
    resize: vertical;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.change-password input:focus,
.champ input:focus,
.champ select:focus,
.champ textarea:focus,
.edit-lyrics select:focus,
.edit-lyrics textarea:focus,
.edit-sections select:focus,
.edit-sections textarea:focus,
.edit-sections input:focus,
.gallery-admin input:focus,
.gallery-admin select:focus,
.newsletter-admin input:focus,
.newsletter-admin textarea:focus {
    border-color: var(--color-blue-700);
    box-shadow: 0 0 0 4px var(--color-focus);
}

.event-hours,
.sections-actions,
.lyrics-sync-actions,
.section-time-controls,
.section-bars {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.dashboard-admin button,
.dashboard-musician button,
.change-password button,
.add-event button,
.gestion-musiciens button,
.add-mailing button,
.newsletter-admin button,
.gallery-admin button,
.edit-lyrics button,
.edit-sections button,
.btn-delete,
.delete-section-button {
    display: inline-flex;
    min-height: 2.8rem;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1rem;
    color: var(--color-white);
    font-weight: 700;
    background: var(--color-blue-900);
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 160ms ease, transform 160ms ease;
}

.dashboard-admin button:hover,
.dashboard-musician button:hover,
.change-password button:hover,
.add-event button:hover,
.gestion-musiciens button:hover,
.add-mailing button:hover,
.newsletter-admin button:hover,
.gallery-admin button:hover,
.edit-lyrics button:hover,
.edit-sections button:hover,
.btn-delete:hover,
.delete-section-button:hover {
    background: var(--color-blue-800);
    transform: translateY(-1px);
}

.dashboard-admin button:disabled,
.dashboard-musician button:disabled,
.change-password button:disabled,
.add-event button:disabled,
.gestion-musiciens button:disabled,
.add-mailing button:disabled,
.newsletter-admin button:disabled,
.gallery-admin button:disabled,
.edit-lyrics button:disabled,
.edit-sections button:disabled {
    cursor: wait;
    opacity: 0.7;
    transform: none;
}

.btn-delete,
.delete-section-button {
    background: var(--color-error);
}

.success,
.error,
.is-error,
.dashboard-admin [id$="-message"],
.change-password [id$="-message"],
.add-event [id$="-message"],
.gestion-musiciens [id$="-message"],
.add-mailing [id$="-message"],
.newsletter-admin [id$="-message"],
.gallery-admin [id$="-message"],
.edit-lyrics [id$="-message"],
.edit-sections [id$="-message"],
#newsletter-message,
#message-musicien {
    min-height: 1.4rem;
    font-weight: 700;
}

.success {
    color: var(--color-success);
}

.error,
.is-error {
    color: var(--color-error);
}

.dashboard-admin table,
.dashboard-musician table,
.change-password table,
.add-event table,
.gestion-musiciens table,
.add-mailing table,
.newsletter-admin table,
.gallery-admin table,
.edit-lyrics table,
.edit-sections table {
    width: 100%;
    margin-bottom: 2rem;
    overflow: hidden;
    border-collapse: collapse;
    background: var(--color-paper-soft);
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
}

.dashboard-admin th,
.dashboard-admin td,
.dashboard-musician th,
.dashboard-musician td,
.change-password th,
.change-password td,
.add-event th,
.add-event td,
.gestion-musiciens th,
.gestion-musiciens td,
.add-mailing th,
.add-mailing td,
.newsletter-admin th,
.newsletter-admin td,
.gallery-admin th,
.gallery-admin td,
.edit-lyrics th,
.edit-lyrics td,
.edit-sections th,
.edit-sections td {
    padding: 0.9rem 1rem;
    color: var(--color-ink);
    text-align: left;
    border-bottom: 1px solid var(--color-line);
}

.dashboard-admin th,
.dashboard-musician th,
.change-password th,
.add-event th,
.gestion-musiciens th,
.add-mailing th,
.newsletter-admin th,
.gallery-admin th,
.edit-lyrics th,
.edit-sections th {
    background: var(--color-blue-100);
    font-size: 1rem;
}

.dashboard-admin tr:last-child td,
.dashboard-musician tr:last-child td,
.change-password tr:last-child td,
.add-event tr:last-child td,
.gestion-musiciens tr:last-child td,
.add-mailing tr:last-child td,
.newsletter-admin tr:last-child td,
.gallery-admin tr:last-child td,
.edit-lyrics tr:last-child td,
.edit-sections tr:last-child td {
    border-bottom: 0;
}

.edit-lyrics-header,
.edit-sections-header,
.sections-editor-header,
.lyrics-sync-toolbar {
    display: flex;
    gap: 1.2rem;
    align-items: center;
    justify-content: space-between;
}

.edit-lyrics-header p,
.edit-sections-header p,
.sections-editor-header p {
    margin: 0;
    font-weight: 700;
}

.dashboard-admin audio,
.dashboard-musician audio,
.change-password audio,
.add-event audio,
.gestion-musiciens audio,
.add-mailing audio,
.newsletter-admin audio,
.gallery-admin audio,
.edit-lyrics audio,
.edit-sections audio {
    width: 100%;
}

.lyrics-lines,
.sections-list {
    display: grid;
    gap: 0.75rem;
}

.lyrics-editor-line,
.section-editor-row {
    width: 100%;
    color: var(--color-ink);
    background: var(--color-paper-glass-active);
    border: 1px solid var(--color-line);
}

.lyrics-editor-line {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    justify-content: start;
    text-align: left;
}

.lyrics-editor-line.is-current,
.lyrics-editor-line.is-timed {
    border-color: var(--color-blue-700);
}

.section-editor-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 1rem;
    padding: 1rem;
    border-left: 0.5rem solid var(--section-color, var(--color-blue-700));
    border-radius: 8px;
}

.section-loop-field {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-weight: 700;
}

.section-loop-field input,
.section-editor-field input[type="color"] {
    width: auto;
}

#gallery-preview-container {
    margin: 1rem 0;
}

#gallery-preview {
    display: block;
    max-width: min(100%, 25rem);
    border: 4px solid var(--color-white);
    box-shadow: var(--shadow-card);
}

.dashboard-admin hr,
.dashboard-musician hr,
.change-password hr,
.add-event hr,
.gestion-musiciens hr,
.add-mailing hr,
.newsletter-admin hr,
.gallery-admin hr,
.edit-lyrics hr,
.edit-sections hr {
    margin: 2rem 0;
    border: 0;
    border-top: 1px solid var(--color-line);
}

@media (max-width: 760px) {
    .dashboard-admin,
    .dashboard-musician,
    .change-password,
    .add-event,
    .gestion-musiciens,
    .add-mailing,
    .newsletter-admin,
    .gallery-admin,
    .edit-lyrics,
    .edit-sections {
        width: min(100% - 1.5rem, 76rem);
        padding-block: 1.5rem;
    }

    .edit-lyrics-header,
    .edit-sections-header,
    .sections-editor-header,
    .lyrics-sync-toolbar {
        display: grid;
    }

    .dashboard-admin table,
    .dashboard-musician table,
    .change-password table,
    .add-event table,
    .gestion-musiciens table,
    .add-mailing table,
    .newsletter-admin table,
    .gallery-admin table,
    .edit-lyrics table,
    .edit-sections table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}