:root {
    --encre: #1a1a1a;
    --texte-2: #4a4a48;
    --texte-3: #5c5c59;
    --fond: #fafaf8;
    --surface: #ffffff;
    --surface-2: #f4f4f2;
    --surface-3: #f7f7f5;
    --visionneuse: #ededeb;
    --jaune: #fce200;
    --jaune-clair: #fef6b3;
    --vert: #cdddd5;
    --vert-clair: #eef4f1;
    --gris: #d9d8d6;
    --gris-2: #e6e5e2;
    --bordure-champ: #8c8c88;
    --danger: #9a2b1f;
    --youtube: #c4302b;
    --ombre-partition: 0 2px 10px rgba(34, 40, 42, .15);
    --hl-font-title: "Jost", "Quicksand", sans-serif;
}

[data-theme="dark"] {
    --encre: #f2f2f0;
    --texte-2: #c9c9c6;
    --texte-3: #b4b4b0;
    --fond: #1a1d20;
    --surface: #2a2d30;
    --surface-2: #33373a;
    --surface-3: #2f3336;
    --visionneuse: #202326;
    --vert: #3f5249;
    --vert-clair: #2c3a34;
    --jaune-clair: #4a4420;
    --gris: #44494d;
    --gris-2: #3a3e41;
    --bordure-champ: #8f9499;
}

[data-theme="stage"] {
    --encre: #e8e3d8;
    --texte-2: #a9b3ae;
    --texte-3: #a9b3ae;
    --fond: #1f2426;
    --surface: #2c3336;
    --surface-2: #2f3639;
    --surface-3: #2c3336;
    --visionneuse: #161a1c;
    --vert: #2b3a33;
    --vert-clair: #26322d;
    --jaune-clair: #4a4420;
    --gris: #3a4245;
    --gris-2: #3a4245;
    --bordure-champ: #7d8a85;
}

body {
    background: var(--fond);
    color: var(--encre);
}

.hl-header {
    background: var(--surface);
    border-bottom: 1px solid var(--gris-2);
}

.hl-header-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    min-height: 76px;
    padding: 8px 48px;
    border-top: 5px solid var(--group-main);
}

.hl-logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.hl-logo img {
    width: auto;
}

.hl-sep {
    width: 1px;
    height: 34px;
    background: var(--gris);
}

.hl-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hl-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    font-family: var(--hl-font-title);
    font-size: 1.0625rem;
    font-weight: 700;
    text-decoration: none;
}

.hl-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hl-group-name {
    font-family: var(--hl-font-title);
    font-size: .9375rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.hl-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    background: var(--surface);
    color: var(--encre);
    border: 1px solid var(--bordure-champ);
    border-radius: 6px;
}

.hl-icon-button.hl-small {
    min-width: 32px;
    min-height: 32px;
    width: 32px;
    height: 32px;
}

.hl-icon-button:hover {
    background: var(--surface-2);
}

.hl-group-row {
    display: flex;
    align-items: stretch;
}

.hl-group-row.is-current {
    background: var(--jaune-clair);
    color: #1a1a1a;
}

.hl-group-row.is-current .dropdown-item.active {
    background: transparent;
    color: #1a1a1a;
    font-weight: 600;
}

.hl-group-row.is-current .hl-group-gear:hover {
    background: var(--jaune);
}

.hl-group-row-main {
    flex: 1 1 auto;
    min-width: 0;
}

.hl-group-row-gear {
    flex: 0 0 auto;
}

.hl-group-gear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    height: 100%;
    padding: 0;
    background: transparent;
    color: inherit;
    border: 0;
}

.hl-group-gear:hover {
    background: var(--surface-2);
}

.hl-group-gear:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: -3px;
}

.hl-nav {
    display: flex;
    gap: 4px;
    margin-left: 8px;
}

.hl-nav a,
.hl-nav-soon {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 14px;
    border-radius: 6px;
    color: var(--encre);
    text-decoration: none;
}

.hl-nav a:hover {
    color: #000;
    background: var(--surface-2);
}

.hl-nav a.is-active {
    background: var(--vert);
    font-weight: 700;
}

.hl-nav-soon {
    color: var(--texte-3);
    cursor: not-allowed;
}

.hl-spacer {
    flex: 1 1 auto;
}

.hl-header .dropdown > .btn,
.hl-header .dropdown > .btn-outline-secondary {
    min-width: 44px;
    min-height: 44px;
    border: 1px solid var(--bordure-champ);
    background: var(--surface);
    color: var(--encre);
}

.hl-donate {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    background: var(--surface);
    color: var(--encre);
    border: 1.5px solid var(--encre);
    border-radius: 6px;
    font-weight: 700;
}

.hl-donate:hover {
    background: var(--surface-2);
}

.hl-heart {
    color: var(--hl-yellow);
    text-shadow: 0 0 1px #000, 0 0 1px #000, 0 0 1px #000;
}

.hl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 18px;
    border-radius: 6px;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid var(--bordure-champ);
    background: var(--surface);
    color: var(--encre);
}

.hl-btn:hover {
    background: var(--surface-2);
}

.hl-btn-primary {
    background: var(--hl-yellow);
    border-color: var(--hl-yellow);
    color: #1a1a1a;
}

.hl-btn-primary:hover {
    background: #e6cf00;
}

.hl-btn[disabled],
.hl-btn[aria-disabled="true"] {
    opacity: .5;
    cursor: not-allowed;
}

.hl-card {
    background: var(--surface);
    border: 1px solid var(--gris);
    border-radius: 8px;
}

.hl-song-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 10px 48px;
}

.hl-song-id {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 16px;
    min-width: 0;
}

.hl-crumb {
    white-space: nowrap;
    font-size: .9375rem;
    color: var(--encre);
}

.hl-song-title {
    margin: 0;
    font-family: var(--hl-font-title);
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.hl-song-info {
    margin: 0;
    font-size: 1rem;
    color: var(--texte-2);
}

.hl-song-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hl-song-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 460px;
    gap: 24px;
    padding: 0 48px 28px;
    align-items: start;
}

.hl-score-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--gris-2);
}

.hl-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.hl-tab {
    min-height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--encre);
    font-weight: 600;
}

.hl-tab:hover {
    background: var(--surface-2);
}

.hl-tab[aria-selected="true"] {
    background: var(--encre);
    color: var(--surface);
}

.hl-tools {
    display: flex;
    align-items: center;
    gap: 6px;
}

.hl-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    border: 1px solid var(--bordure-champ);
    border-radius: 6px;
    background: var(--surface);
    color: var(--encre);
}

.hl-tool:hover {
    background: var(--surface-2);
}

.hl-tool[aria-pressed="true"] {
    background: var(--vert);
    border-color: var(--encre);
}

.hl-zoom-value {
    min-width: 52px;
    text-align: center;
    font-size: .875rem;
}

.hl-versions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px 0;
}

.hl-version-chip {
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid var(--bordure-champ);
    border-radius: 999px;
    background: var(--surface);
    color: var(--encre);
    font-size: .8125rem;
    font-weight: 600;
}

.hl-version-chip[aria-pressed="true"] {
    background: var(--encre);
    color: var(--surface);
}

.hl-viewer {
    background: var(--visionneuse);
    padding: 24px;
    height: 100%;
    overflow: auto;
    border-radius: 0 0 8px 8px;
}

.hl-pages {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.hl-viewer.is-horizontal .hl-pages {
    flex-direction: row;
    align-items: flex-start;
    width: max-content;
    min-width: 100%;
    justify-content: flex-start;
}

.hl-page {
    position: relative;
    background: #fff;
    box-shadow: var(--ombre-partition);
    flex: 0 0 auto;
}

.hl-page canvas,
.hl-page img {
    display: block;
    max-width: none;
}

.hl-page-text {
    padding: 24px;
    color: #1a1a1a;
    font-family: "Courier New", monospace;
    white-space: pre;
    overflow: auto;
}

.hl-viewer-note {
    max-width: 520px;
    margin: 40px auto;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--gris);
    border-radius: 8px;
    text-align: center;
}

.hl-score:fullscreen,
.hl-score.is-expanded {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-radius: 0;
}

.hl-score.is-expanded {
    position: fixed;
    inset: 0;
    z-index: 1900;
}

.hl-score:fullscreen .hl-viewer,
.hl-score.is-expanded .hl-viewer {
    flex: 1 1 auto;
    height: auto;
    border-radius: 0;
}

.hl-side {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.hl-card-pad {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.hl-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.hl-card-title {
    margin: 0;
    font-family: "Quicksand", sans-serif;
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--texte-2);
}

.hl-card-count {
    font-size: .8125rem;
    color: var(--texte-3);
}

.hl-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hl-pill {
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--bordure-champ);
    border-radius: 6px;
    background: var(--surface);
    color: var(--encre);
    font-size: .875rem;
    font-weight: 600;
}

.hl-pill[aria-pressed="true"] {
    border: 1.5px solid var(--encre);
    background: var(--vert);
}

.hl-player {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hl-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    border: 0;
    border-radius: 50%;
    background: var(--encre);
    color: var(--surface);
    font-size: 1.75rem;
}

.hl-play[disabled] {
    opacity: .5;
    cursor: not-allowed;
}

.hl-progress-wrap {
    flex: 1 1 auto;
    min-width: 0;
}

.hl-progress {
    width: 100%;
    height: 24px;
    margin: 0;
    background: transparent;
    accent-color: var(--encre);
}

.hl-times {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: .8125rem;
    color: var(--texte-2);
}

.hl-repeat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border: 1.5px solid var(--encre);
    border-radius: 6px;
    background: var(--surface);
    color: var(--encre);
}

.hl-repeat[aria-pressed="true"] {
    background: var(--vert);
}

.hl-sounds-tempo {
    padding: 14px;
    border-radius: 6px;
    background: var(--surface-2);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hl-tempo-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: .9375rem;
}

.hl-tempo-head span:last-child {
    font-size: .8125rem;
    color: var(--texte-2);
}

.hl-tempo {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    min-width: 200px;
}

.hl-tempo .hl-range {
    width: 100%;
    margin: 0;
}

.hl-tempo-group {
    display: flex;
    width: 100%;
    align-items: stretch;
    border: 2px solid var(--encre);
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface);
}

.hl-tempo-btn,
.hl-tempo-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 12px;
    background: transparent;
    color: var(--encre);
    border: 0;
    font-size: 1.125rem;
    font-weight: 700;
    cursor: pointer;
}

.hl-tempo-btn {
    min-width: 44px;
    font-size: 1.25rem;
}

.hl-tempo-btn:hover,
.hl-tempo-value:hover {
    background: var(--gris-2);
}

.hl-tempo-value {
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0;
    min-width: 112px;
    padding: 2px 10px;
    border-left: 2px solid var(--encre);
    border-right: 2px solid var(--encre);
    line-height: 1.05;
}

.hl-tempo-value.is-changed {
    background: var(--hl-yellow);
    color: #000;
}

.hl-tempo-number {
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
}

.hl-tempo-unit {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--texte-2);
}

.hl-range {
    width: 100%;
    accent-color: var(--encre);
}

.hl-small-btn {
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--bordure-champ);
    border-radius: 6px;
    background: var(--surface);
    color: var(--encre);
    font-weight: 600;
}

.hl-small-btn:hover {
    background: var(--surface-2);
}

.hl-speed {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .875rem;
}

.hl-speed select {
    min-height: 36px;
    border: 1px solid var(--bordure-champ);
    border-radius: 6px;
    background: var(--surface);
    color: var(--encre);
    padding: 0 8px;
}

.hl-video-stage {
    position: relative;
    height: 200px;
    border-radius: 8px;
    background: #1a1a1a;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    overflow: hidden;
}

.hl-video-stage iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.hl-video-play {
    width: 64px;
    height: 44px;
    border: 0;
    border-radius: 10px;
    background: var(--youtube);
    color: #fff;
    font-size: 1.5rem;
}

.hl-video-caption {
    margin: 0;
    font-size: .8125rem;
    color: #e8e8e6;
}

.hl-poster {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
}

.hl-poster-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 64px;
    width: 64px;
    height: 84px;
    background: var(--jaune-clair);
    border: 1px solid var(--hl-yellow);
    border-radius: 4px;
    color: #1a1a1a;
    font-size: 1.75rem;
}

.hl-poster-text {
    flex: 1 1 auto;
}

.hl-poster-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.hl-poster-meta {
    margin: 0;
    font-size: .875rem;
    color: var(--texte-2);
}

.hl-dialog {
    width: min(960px, 94vw);
    max-height: 92vh;
    padding: 0;
    border: 0;
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
    background: var(--surface);
    color: var(--encre);
}

.hl-dialog::backdrop {
    background: rgba(26, 26, 26, .5);
}

.hl-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--gris-2);
}

.hl-dialog-body {
    padding: 16px;
    max-height: 80vh;
    overflow: auto;
    text-align: center;
}

.hl-dialog-body img {
    max-width: 100%;
    height: auto;
}

.hl-dialog-body object {
    width: 100%;
    height: 75vh;
}

@media (max-width: 1199.98px) {
    .hl-header-bar {
        padding: 8px 24px;
    }

    .hl-song-head {
        padding: 16px 24px;
    }

    .hl-song-title {
        font-size: 1.5rem;
    }

    .hl-song-body {
        grid-template-columns: minmax(0, 1fr);
        padding: 0 24px 230px;
    }

    .hl-stage {
        height: min(72vh, 1000px);
    }

    .hl-sounds {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 30;
        border-width: 1px 0 0;
        border-radius: 0;
        box-shadow: 0 -4px 14px rgba(0, 0, 0, .12);
    }

    .hl-sounds .hl-card-pad {
        padding: 10px 24px;
        gap: 8px;
    }

    .hl-sounds .hl-card-head,
    .hl-sounds .hl-tempo-head {
        display: none;
    }

    .hl-sounds .hl-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .hl-sounds .hl-sounds-tempo {
        padding: 8px 12px;
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    .hl-song-body {
        grid-template-columns: minmax(0, 1fr) 360px;
    }
}

@media (max-width: 767.98px) {
    .hl-header-bar {
        padding: 8px 12px;
        gap: 8px 12px;
    }

    .hl-sep,
    .hl-group-name {
        display: none;
    }

    .hl-song-head {
        padding: 12px;
    }

    .hl-song-body {
        padding: 0 12px 250px;
    }

    .hl-song-title {
        font-size: 1.1875rem;
    }

    .hl-viewer {
        padding: 12px;
    }

    .hl-stage {
        height: 70vh;
    }

    .hl-tools .hl-tool-hide-small {
        display: none;
    }
}

.hl-viewer {
    touch-action: pan-x pan-y;
}

.hl-song-info span + span::before {
    content: " · ";
}

.hl-more,
.hl-summary {
    display: none;
}

@media (max-width: 767.98px) {
    .hl-more {
        display: inline-flex;
    }

    .hl-summary {
        display: block;
        margin: 0;
        font-size: .75rem;
        color: var(--texte-2);
    }

    .hl-sounds:not(.is-open) .hl-pills,
    .hl-sounds:not(.is-open) .hl-sounds-tempo,
    .hl-sounds:not(.is-open) .hl-times {
        display: none;
    }

    .hl-sounds .hl-card-pad {
        padding: 10px 12px 18px;
    }

    .hl-song-body {
        padding-bottom: 150px;
    }

    .hl-donate-text {
        display: none;
    }

    .hl-donate {
        padding: 0 12px;
    }

    .hl-header-bar {
        min-height: 0;
    }
}

.hl-sets {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 0;
    min-height: 70vh;
}

.hl-sets-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px 20px 24px 48px;
    border-right: 1px solid var(--gris);
}

.hl-sets-main {
    padding: 24px 48px 28px 32px;
    min-width: 0;
}

.hl-side-title {
    margin: 12px 0 0;
    font-family: "Quicksand", sans-serif;
    font-size: .8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--texte-3);
}

.hl-set-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hl-set-link {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border: 1.5px solid transparent;
    border-radius: 6px;
    color: var(--encre);
    text-decoration: none;
}

.hl-set-link:hover {
    background: var(--surface-2);
}

.hl-set-link.is-open {
    background: var(--surface);
    border-color: var(--encre);
}

.hl-set-when,
.hl-set-meta {
    font-size: .8125rem;
    color: var(--texte-2);
}

.hl-set-alert {
    margin: 2px 12px 0;
    font-size: .75rem;
    color: #8a2e12;
}

.hl-link-button {
    border: 0;
    background: none;
    padding: 0;
    font-weight: 700;
    color: var(--encre);
    text-decoration: underline;
}

.hl-badge-dark {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 4px;
    background: var(--encre);
    color: var(--surface);
    font-size: .8125rem;
    font-weight: 700;
}

.hl-set-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.hl-set-admin {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.hl-btn-danger {
    border: 1.5px solid var(--danger);
    color: var(--danger);
}

.hl-set-columns {
    display: grid;
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.hl-entries {
    list-style: none;
    margin: 12px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hl-entry {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--gris);
    border-radius: 8px;
    background: var(--surface);
}

.hl-entry.is-dragging {
    opacity: .5;
}

.hl-handle {
    min-width: 44px;
    min-height: 44px;
    border: 0;
    background: none;
    color: var(--texte-2);
    cursor: grab;
}

.hl-entry-number {
    font-family: var(--hl-font-title);
    font-size: 1.25rem;
    font-weight: 600;
    min-width: 1.5rem;
}

.hl-entry-text {
    flex: 1 1 auto;
}

.hl-add-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    border: 1.5px dashed var(--bordure-champ);
    border-radius: 8px;
    color: var(--encre);
    text-decoration: none;
}

.hl-print-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--gris-2);
}

.hl-print-title {
    margin: 0 auto 0 0;
    font-family: var(--hl-font-title);
    font-size: 1.3125rem;
    text-transform: uppercase;
}

.hl-select-small {
    min-height: 38px;
    max-width: 170px;
    border: 1px solid var(--bordure-champ);
    border-radius: 6px;
    background: var(--surface);
    color: var(--encre);
}

.hl-print-rows {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hl-print-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 11px 18px;
    border-bottom: 1px solid var(--gris-2);
}

.hl-print-song {
    flex: 0 0 170px;
    font-weight: 700;
}

.hl-print-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hl-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid var(--gris);
    border-radius: 6px;
    background: var(--surface);
}

.hl-check:has(input:checked) {
    border: 1.5px solid var(--encre);
    background: var(--vert);
}

.hl-print-foot {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 18px;
    background: var(--surface-3);
    border-radius: 0 0 8px 8px;
}

.hl-print-format {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    border: 0;
    margin: 0;
    padding: 0;
}

.hl-print-legend {
    font-size: .875rem;
    font-weight: 700;
    float: none;
    width: auto;
    margin: 0 12px 0 0;
}

.hl-print-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.hl-add-row {
    margin: 8px 12px;
    min-height: 40px;
}

#library-results .list-group-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

#library-results .list-group-item > a {
    flex: 1 1 auto;
}

.hl-stage {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: #1f2426;
    color: #e8e3d8;
}

html.is-pupitre,
html.is-pupitre body {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #1f2426;
}

.hl-pupitre {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    box-sizing: border-box;
    overflow: hidden;
    background: #1f2426;
    color: #e8e3d8;
}

.hl-stage-head {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 6px 12px;
}

.hl-stage-head .hl-icon-button {
    background: transparent;
    color: #e8e3d8;
    border-color: #3a4245;
}

.hl-stage-logo {
    height: 28px;
    width: auto;
}

.hl-stage-head .hl-stage-full[aria-pressed="true"],
.hl-stage-head .hl-stage-flip[aria-pressed="true"] {
    background: #e8e3d8;
    color: #1f2426;
    border-color: #e8e3d8;
}

.hl-stage-head .hl-stage-full.is-suggested {
    background: var(--hl-yellow);
    color: #1a1a1a;
    border-color: var(--hl-yellow);
}

.hl-stage-head .hl-stage-full[hidden] {
    display: none;
}

.hl-stage-head .hl-icon-button:focus-visible,
.hl-stage-tab:focus-visible,
.hl-stage-nav:focus-visible {
    outline: 3px solid var(--hl-yellow);
    outline-offset: 2px;
    box-shadow: none;
}

.hl-stage-title {
    flex: 1 1 160px;
    min-width: 0;
}

.hl-stage-title h1 {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--hl-font-title);
    font-size: 1.125rem;
    line-height: 1.2;
    text-transform: uppercase;
    color: #fff;
}

.hl-stage-meta {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .75rem;
    color: #a9b3ae;
}

.hl-stage-tabs {
    display: flex;
    gap: 4px;
    padding: 2px;
    border-radius: 8px;
    background: #2c3336;
}

.hl-stage-tab {
    min-height: 44px;
    padding: 0 14px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #e8e3d8;
    font-weight: 600;
}

.hl-stage-tab[aria-pressed="true"] {
    background: #e8e3d8;
    color: #1f2426;
}

.hl-stage-viewer {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    padding: 8px;
    touch-action: pan-y;
}

.hl-stage-page {
    display: grid;
    place-items: center;
    perspective: 2200px;
    --hl-turn-ms: 520ms;
}

.hl-stage-page > .hl-page {
    grid-area: 1 / 1;
}

.hl-stage-page[data-turn] > .is-turning-in,
.hl-stage-page[data-turn] > .is-turning-out {
    pointer-events: none;
}

.hl-stage-page[data-turn="next"] > .is-turning-out,
.hl-stage-page[data-turn="prev"] > .is-turning-out {
    z-index: 2;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    animation: hl-turn-next var(--hl-turn-ms) cubic-bezier(.45, .05, .25, 1) forwards;
    transform-origin: left center;
}

.hl-stage-page[data-turn="prev"] > .is-turning-out {
    transform-origin: right center;
    animation-name: hl-turn-prev;
}

.hl-stage-page[data-turn="next"] > .is-turning-out::after,
.hl-stage-page[data-turn="prev"] > .is-turning-out::after,
.hl-stage-page[data-turn="next"] > .is-turning-in::after,
.hl-stage-page[data-turn="prev"] > .is-turning-in::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    will-change: opacity;
}

.hl-stage-page[data-turn="next"] > .is-turning-out::after {
    background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .55));
    animation: hl-turn-shade var(--hl-turn-ms) ease-in forwards;
}

.hl-stage-page[data-turn="prev"] > .is-turning-out::after {
    background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, .55));
    animation: hl-turn-shade var(--hl-turn-ms) ease-in forwards;
}

.hl-stage-page[data-turn="next"] > .is-turning-in::after {
    background: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) 70%);
    animation: hl-turn-cast var(--hl-turn-ms) ease-out forwards;
}

.hl-stage-page[data-turn="prev"] > .is-turning-in::after {
    background: linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) 70%);
    animation: hl-turn-cast var(--hl-turn-ms) ease-out forwards;
}

.hl-stage-page[data-turn="fade"] > .is-turning-in {
    z-index: 2;
    will-change: opacity;
    animation: hl-turn-fade var(--hl-turn-ms) linear forwards;
}

@keyframes hl-turn-next {
    from { transform: rotateY(0deg); }
    to { transform: rotateY(-180deg); }
}

@keyframes hl-turn-prev {
    from { transform: rotateY(0deg); }
    to { transform: rotateY(180deg); }
}

@keyframes hl-turn-shade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes hl-turn-cast {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes hl-turn-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.hl-stage-foot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
}

.hl-stage-count {
    flex: 1 1 auto;
    text-align: center;
    color: #a9b3ae;
}

.hl-stage-nav {
    flex: 0 1 38%;
    min-height: 48px;
    padding: 0 16px;
    border: 1px solid #3a4245;
    border-radius: 8px;
    background: #2c3336;
    color: #e8e3d8;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hl-stage-nav.is-next {
    background: var(--hl-yellow);
    border-color: var(--hl-yellow);
    color: #1a1a1a;
    font-weight: 700;
    text-align: right;
}

.hl-stage-nav[hidden] {
    visibility: hidden;
    display: block;
}

@media (max-width: 1199.98px) {
    .hl-sets {
        grid-template-columns: minmax(0, 1fr);
    }

    .hl-sets-side {
        padding: 16px 24px;
        border-right: 0;
        border-bottom: 1px solid var(--gris);
    }

    .hl-sets-main {
        padding: 16px 24px;
    }

    .hl-set-columns {
        grid-template-columns: minmax(0, 1fr);
    }
}

.hl-rec-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 24px;
    padding: 24px 48px 28px;
    align-items: start;
}

.hl-rec-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.hl-rec-space {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 240px;
}

.hl-rec-used {
    font-family: var(--hl-font-title);
    font-size: 1.75rem;
    font-weight: 600;
}

.hl-rec-day {
    margin: 22px 0 8px;
    font-family: "Quicksand", sans-serif;
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--texte-2);
}

.hl-rec-rows {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hl-rec-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    border: 1px solid var(--gris);
    border-radius: 8px;
    background: var(--surface);
}

.hl-rec-thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 72px;
    height: 52px;
    border-radius: 6px;
    background: var(--vert);
    font-size: .8125rem;
    font-weight: 700;
}

.hl-rec-thumb.is-video {
    background: #1a1a1a;
    color: #fff;
}

.hl-rec-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.hl-rec-meta {
    font-size: .875rem;
    color: var(--texte-2);
}

.hl-rec-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hl-play-small {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    font-size: 1.375rem;
}

.hl-tool-44 {
    width: 44px;
    height: 44px;
    text-decoration: none;
}

.hl-tool-danger {
    color: var(--danger);
}

.hl-rec-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hl-rec-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px;
    border-radius: 10px;
    background: #1a1a1a;
    color: #fafaf8;
}

.hl-rec-card-title {
    margin: 0;
    font-family: var(--hl-font-title);
    font-size: 1.375rem;
    text-transform: uppercase;
}

.hl-rec-buttons {
    display: flex;
    gap: 10px;
}

.hl-rec-buttons button {
    flex: 1 1 0;
    min-height: 52px;
    border-radius: 6px;
    font-weight: 700;
    color: #fff;
}

.hl-rec-sound {
    border: 0;
    background: var(--youtube);
}

.hl-rec-video {
    border: 1px solid #5a6366;
    background: transparent;
}

.hl-rec-buttons button[disabled] {
    opacity: .5;
}

.hl-rec-live {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: 6px;
    background: #2f3639;
}

.hl-rec-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e5534b;
}

.hl-rec-timer {
    font-family: var(--hl-font-title);
    font-size: 1.75rem;
}

.hl-wave {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 32px;
    flex: 1 1 auto;
}

.hl-wave i {
    display: block;
    width: 4px;
    height: 100%;
    border-radius: 2px;
    background: #7fa596;
    transform-origin: center;
    animation: hl-wave 1s ease-in-out infinite;
}

.hl-wave i:nth-child(3n) {
    animation-delay: -.3s;
}

.hl-wave i:nth-child(3n + 1) {
    animation-delay: -.6s;
}

.hl-wave i:nth-child(4n) {
    animation-delay: -.15s;
}

@keyframes hl-wave {
    0%, 100% { transform: scaleY(.25); }
    50% { transform: scaleY(1); }
}

.hl-rec-stop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 6px;
    background: #fafaf8;
}

.hl-rec-stop span {
    width: 16px;
    height: 16px;
    background: #1a1a1a;
}

.hl-rec-preview {
    width: 100%;
    max-height: 180px;
    border-radius: 6px;
    background: #000;
}

.hl-rec-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-weight: 600;
}

.hl-rec-input {
    min-height: 46px;
    padding: 0 12px;
    border: 1px solid #5a6366;
    border-radius: 6px;
    background: #2f3639;
    color: #fafaf8;
}

.hl-rec-progress {
    height: 8px;
    background: #2f3639;
    border-radius: 4px;
    overflow: hidden;
}

.hl-rec-progress .progress-bar {
    height: 100%;
    background: #fafaf8;
}

.hl-rec-error {
    margin: 0;
    padding: 10px 12px;
    border-radius: 6px;
    background: #fff;
    color: var(--danger);
    font-weight: 600;
}

.hl-rec-reminder {
    padding: 14px;
    border: 1px solid var(--hl-yellow);
    border-radius: 6px;
    background: #fff9cc;
    color: #1a1a1a;
    font-size: .875rem;
    line-height: 1.45;
}

@media (max-width: 1199.98px) {
    .hl-rec-page {
        grid-template-columns: minmax(0, 1fr);
        padding: 16px 24px 28px;
    }

    .hl-rec-side {
        order: -1;
    }
}

lod-address-input,
lod-route-picker {
    display: block;
}

.hl-address {
    position: relative;
}

.hl-suggest {
    position: absolute;
    z-index: 60;
    left: 0;
    right: 0;
    top: 100%;
    margin: 2px 0 0;
    padding: 4px;
    list-style: none;
    max-height: 280px;
    overflow: auto;
    background: var(--surface);
    border: 1px solid var(--bordure-champ);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
}

.hl-suggest-item {
    padding: 10px 12px;
    border-radius: 4px;
    cursor: pointer;
}

.hl-suggest-item:hover,
.hl-suggest-item[aria-selected="true"] {
    background: var(--vert);
}

.hl-map-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
}

.hl-map {
    width: 100%;
    height: 200px;
    border: 1px solid var(--gris);
    border-radius: 8px;
    background: var(--surface-2);
}

.hl-map-wrap .hl-map {
    max-width: 520px;
}

.hl-place lod-route-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: stretch;
    padding: 16px;
}

.hl-place-text {
    flex: 1 1 240px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}

.hl-place-address {
    margin: 0;
    font-weight: 600;
}

.hl-place .hl-map {
    flex: 1 1 300px;
    max-width: 420px;
    height: 150px;
}

.hl-place {
    margin-bottom: 16px;
}

.hl-route-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hl-route-link {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 16px;
    border: 1px solid var(--bordure-champ);
    border-radius: 6px;
    background: var(--surface);
    color: var(--encre);
    font-weight: 600;
    text-decoration: none;
}

.hl-route-link:hover {
    background: var(--surface-2);
}

.hl-route-link.is-preferred {
    border: 1.5px solid var(--encre);
    background: var(--jaune-clair);
}

body {
    height: auto;
    min-height: 100vh;
    width: auto;
}

.hl-stage {
    min-height: 0;
}

/* ---- fenêtre de la partition : hauteur de l'écran, lecteur MusicXML dedans ---- */
.hl-stage {
    position: relative;
    height: clamp(320px, calc(100vh - 330px), 1000px);
    height: clamp(320px, calc(100dvh - 330px), 1000px);
}

.hl-song-body.is-xml-view .hl-stage {
    height: clamp(320px, calc(100vh - 305px), 1100px);
    height: clamp(320px, calc(100dvh - 305px), 1100px);
}

.hl-song-body.is-xml-view .hl-sounds--empty {
    display: none;
}

.hl-song-body.is-xml-view:not(:has(.hl-side > :not(.hl-sounds--empty))) {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 1199.98px) {
    .hl-song-body.is-xml-view:not(:has(.hl-sounds:not(.hl-sounds--empty))) {
        padding-bottom: 28px;
    }
}

.hl-pages.is-xml {
    display: block;
    width: 100%;
}

.hl-xml-host {
    position: relative;
    background: #fff;
    color: #1a1a1a;
    box-shadow: var(--ombre-partition);
    border-radius: 4px;
    padding: 16px;
    min-height: 220px;
}

.hl-xml-surface {
    width: 100%;
    outline: none;
}

.hl-xml-host.is-editing .hl-xml-surface {
    cursor: crosshair;
}

.hl-xml-host:not(.is-editing) .hl-xml-surface svg {
    cursor: pointer;
}

.hl-xml-tools {
    display: flex;
    align-items: center;
    gap: 4px;
}

.hl-xml-tools[hidden],
.hl-xml-drawer[hidden],
.hl-xml-editactions[hidden],
.hl-xml-bubble[hidden] {
    display: none;
}

.hl-xml-editactions {
    display: inline-flex;
    gap: 4px;
    padding-left: 6px;
    margin-left: 2px;
    border-left: 1px solid var(--gris);
}

.hl-xml-save.is-dirty:not(:disabled) {
    background: var(--hl-yellow);
    border-color: var(--hl-yellow);
    color: #000;
}

.hl-xml-bar {
    color: var(--encre);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    padding: 8px 12px;
    border-top: 1px solid var(--gris-2);
    background: var(--surface);
}

.hl-xml-bar[hidden] {
    display: none;
}

.hl-xml-bar .hl-progress-wrap {
    flex: 1 1 220px;
    min-width: 140px;
}

.hl-xml-transport {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hl-xml-drawer {
    color: var(--encre);
    position: absolute;
    top: 8px;
    right: 22px;
    z-index: 6;
    width: min(340px, calc(100% - 44px));
    max-height: calc(100% - 16px);
    overflow: auto;
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--gris);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

.hl-xml-close {
    position: absolute;
    top: 6px;
    right: 6px;
}

.hl-xml-drawer .hl-xml-mix {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
    border: 0;
    background: transparent;
}

.hl-xml-drawer .hl-xml-mix[hidden] {
    display: none;
}

.hl-xml-mixrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
}

.hl-xml-partname {
    flex: 1 1 140px;
    font-weight: 700;
}

.hl-xml-parts {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hl-xml-partinput {
    flex: 1 1 140px;
    min-width: 0;
}

.hl-xml-view .hl-pills {
    flex-wrap: wrap;
}

.hl-xml-bubble {
    position: absolute;
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: min(420px, calc(100% - 16px));
    padding: 6px 8px;
    background: var(--surface);
    color: var(--texte);
    border: 1px solid var(--gris);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
}

.hl-xml-bubblehead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: .8125rem;
}

.hl-xml-bubblerow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.hl-xml-bb {
    min-width: 32px;
    min-height: 32px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: transparent;
    color: inherit;
    border: 1px solid var(--gris);
    border-radius: 6px;
    font-size: .8125rem;
    font-weight: 700;
    line-height: 1;
}

.hl-xml-bb:hover:not(:disabled) {
    background: var(--gris-2);
}

.hl-xml-bb[aria-pressed="true"] {
    background: var(--hl-yellow);
    border-color: var(--hl-yellow);
    color: #000;
}

.hl-xml-bb:disabled {
    opacity: .4;
}

.hl-xml-bbselect {
    width: auto;
    min-height: 32px;
    padding-top: 0;
    padding-bottom: 0;
}

[data-downloads] {
    font-size: .8125rem;
}

.hl-score [data-downloads] {
    padding: 6px 12px !important;
}

@media (max-width: 767.98px) {
    .hl-song-body.is-xml-view .hl-stage {
        height: clamp(300px, calc(100dvh - 330px), 900px);
    }

    .hl-xml-drawer {
        left: 8px;
        right: 8px;
        width: auto;
    }

    .hl-xml-bar .hl-progress-wrap {
        order: 3;
        flex: 1 1 60%;
    }

    .hl-xml-bar > .hl-repeat[aria-pressed] {
        order: 4;
    }

    .hl-xml-bar .hl-tempo .hl-range {
        display: none;
    }

    .hl-xml-bar {
        position: sticky;
        bottom: 0;
        z-index: 20;
        box-shadow: 0 -4px 14px rgba(0, 0, 0, .12);
    }

}

.hl-score:fullscreen .hl-stage,
.hl-score.is-expanded .hl-stage {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
}

/* ---- page « Modifier la fiche du morceau » : fiche à gauche, fichiers au centre ---- */
.hl-edit {
    padding: 16px 48px 32px;
}

.hl-edit-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 16px;
    margin-bottom: 16px;
}

.hl-edit-title {
    margin: 0;
    font-family: var(--hl-font-title);
    font-size: 1.5rem;
    font-weight: 600;
}

.hl-edit-song {
    text-transform: uppercase;
    letter-spacing: .02em;
}

.hl-edit-grid {
    display: grid;
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

.hl-edit-aside {
    position: sticky;
    top: 16px;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--gris);
    border-radius: 8px;
}

.hl-edit-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 12px;
}

.hl-edit-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hl-dialog--form {
    width: min(780px, 94vw);
}

.hl-dialog--form .hl-dialog-body {
    text-align: left;
}

.hl-name-hint {
    margin-top: .25rem;
    padding: .625rem .875rem;
    border-left: 6px solid #b26a00;
    border-radius: var(--hl-radius);
    background: #fff4d1;
    color: #1a1a1a;
    font-size: .95rem;
    line-height: 1.45;
}

.hl-name-hint .mdi {
    flex: none;
    color: #7a4a00;
    font-size: 1.4rem;
    line-height: 1.2;
}

.hl-name-hint strong {
    font-weight: 700;
    overflow-wrap: anywhere;
}

.hl-name-hint[hidden] {
    display: none !important;
}

[data-theme="dark"] .hl-name-hint,
[data-theme="stage"] .hl-name-hint {
    border-left-color: #ffd35c;
    background: #3a2f10;
    color: #f2f2f2;
}

[data-theme="dark"] .hl-name-hint .mdi,
[data-theme="stage"] .hl-name-hint .mdi {
    color: #ffd35c;
}

[data-contrast="high"] .hl-name-hint {
    border: 2px solid currentColor;
    border-left-width: 6px;
}

:root {
    --hl-warn-bg: #fff4d1;
    --hl-warn-edge: #b26a00;
    --hl-warn-ink: #1a1a1a;
}

[data-theme="dark"],
[data-theme="stage"] {
    --hl-warn-bg: #3a2f10;
    --hl-warn-edge: #ffd35c;
    --hl-warn-ink: #f2f2f2;
}

.hl-gen-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 12px;
    margin-top: 4px;
}

.hl-gen-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 8px;
    border: 0;
    background: transparent;
    color: var(--texte-2);
    font-size: .875rem;
    text-decoration: underline;
}

.hl-gen-btn:hover {
    color: var(--encre);
}

.hl-gen-btn .mdi {
    font-size: 1.1rem;
    line-height: 1;
}

.hl-gen-none {
    color: var(--texte-2);
}

.hl-auto-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border: 1px solid var(--hl-warn-edge);
    border-radius: var(--hl-radius);
    background: var(--hl-warn-bg);
    color: var(--hl-warn-ink);
    font-size: .85rem;
    font-weight: 700;
}

@media (max-width: 991.98px) {
    .hl-edit {
        padding: 12px;
    }

    .hl-edit-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .hl-edit-aside {
        position: static;
    }
}

/* ---- volume du lecteur MusicXML ---- */
.hl-xml-mixmaster .hl-xml-volume {
    flex: 1 1 120px;
}

.hl-xml-volumevalue {
    min-width: 4ch;
    text-align: right;
    font-size: .8125rem;
    color: var(--texte-2);
}

.hl-xml-partvolume {
    flex: 1 1 100%;
    width: 100%;
}

/* ---- notes personnelles sur les PDF et images ---- */
.hl-notes-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.hl-notes-tools[hidden],
.hl-notes-group[hidden] {
    display: none;
}

.hl-notes-group {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding-left: 6px;
    margin-left: 2px;
    border-left: 1px solid var(--gris);
}

.hl-notes-swatch {
    width: 26px;
    height: 26px;
    border: 2px solid var(--surface);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--gris);
    cursor: pointer;
}

.hl-notes-swatch[aria-pressed="true"] {
    box-shadow: 0 0 0 3px var(--encre);
}

.hl-notes-swatch:disabled {
    opacity: .35;
}

.hl-notes-status {
    color: var(--texte-2);
    padding-left: 4px;
}

.hl-notes-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.hl-notes-layer[hidden] {
    display: none;
}

.hl-notes-layer.is-active {
    pointer-events: auto;
    touch-action: none;
    cursor: crosshair;
}

.hl-notes-layer.is-active[data-tool="text"] {
    cursor: text;
}

.hl-notes-layer.is-active[data-tool="erase"] {
    cursor: cell;
}

.hl-notes-layer.is-active[data-tool="move"] {
    cursor: default;
}

.hl-notes-handle {
    position: absolute;
    z-index: 2;
    min-width: 44px;
    min-height: 44px;
    box-sizing: border-box;
    border: 1px dashed var(--encre);
    border-radius: 3px;
    background: rgba(252, 226, 0, .12);
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.hl-notes-handle:hover {
    background: rgba(252, 226, 0, .3);
}

.hl-notes-handle:focus-visible {
    outline: 3px solid var(--encre);
    outline-offset: 2px;
    background: rgba(252, 226, 0, .3);
}

.hl-notes-handle.is-dragging {
    cursor: grabbing;
    background: rgba(252, 226, 0, .4);
}

.hl-notes-handle i {
    position: absolute;
    top: -12px;
    right: -12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--hl-yellow);
    color: #000;
    font-size: 16px;
    pointer-events: none;
}

.hl-stage-notes .hl-tool {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    background: transparent;
    color: #e8e3d8;
    border-color: #3a4245;
}

.hl-stage-notes .hl-tool:hover {
    background: #2c3336;
}

.hl-stage-notes .hl-tool[aria-pressed="true"] {
    background: #e8e3d8;
    color: #1f2426;
    border-color: #e8e3d8;
}

.hl-stage-notes .hl-tool:focus-visible {
    outline: 3px solid var(--hl-yellow);
    outline-offset: 2px;
}

.hl-notes-input {
    position: absolute;
    z-index: 3;
    min-width: 120px;
    max-width: 70%;
    padding: 2px 4px;
    background: rgba(255, 255, 255, .85);
    border: 1px dashed var(--encre);
    border-radius: 3px;
    font-family: sans-serif;
    font-weight: 600;
    line-height: 1.2;
    resize: both;
    overflow: hidden;
}

/* ---- accords dans la bulle de correction ---- */
.hl-xml-chordrow {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--gris-2);
}

.hl-xml-chordinput {
    width: 120px;
    min-height: 32px;
}

.hl-xml-chip {
    min-width: 30px;
    min-height: 28px;
    font-weight: 600;
}

/* ---- partage d'un set : lien et QR code ---- */
.hl-share-qr {
    display: flex;
    justify-content: center;
    padding: 12px;
    background: #fff;
    border-radius: 8px;
}

.hl-share-qr img,
.hl-share-qr canvas {
    max-width: 100%;
    height: auto;
}

.hl-share-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}

/* ---- page publique d'un set (lien sans compte) ---- */
.hl-public {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px 24px 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.hl-public-head .hl-song-title {
    margin: 6px 0;
}

.hl-public-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding-left: 24px;
}

.hl-public-song {
    font-weight: 700;
    font-size: 1.125rem;
    margin-right: 8px;
}

/* ---- petits boutons à côté de la date et du lieu d'un set ---- */
.hl-mini-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 44px;
    padding: 0 14px;
    margin: 0 2px;
    background: var(--surface);
    color: var(--encre);
    border: 1px solid var(--bordure-champ);
    border-radius: 14px;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
}

.hl-mini-btn:hover {
    background: var(--surface-2);
    color: var(--encre);
}

.hl-mini-btn-primary {
    background: var(--hl-yellow);
    border-color: var(--hl-yellow);
    color: #000;
}

.hl-mini-btn-primary:hover {
    background: var(--hl-yellow);
    filter: brightness(.95);
    color: #000;
}

/* ---- page d'un set : toutes les actions en haut, impression dans une fenêtre ---- */
.hl-set-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 12px 0 16px;
}

.hl-set-toolbar form {
    display: contents;
}

.hl-set-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 24px;
    margin: 12px 0 16px;
}

.hl-set-group {
    flex: 0 1 auto;
    max-width: 100%;
}

.hl-set-group .hl-set-toolbar {
    margin: 0;
    gap: 6px;
}

.hl-set-group .hl-btn {
    padding: 0 12px;
    gap: 6px;
    font-size: .9375rem;
}

.hl-set-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 8px;
    font-size: 1rem;
    color: var(--texte-2);
}

.hl-set-line .hl-mini-btn {
    margin: 0;
}

.hl-group-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px;
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--encre);
}

.hl-onair {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 4px;
    background: #1A1A1A;
    color: #fff;
    font-size: .75rem;
    letter-spacing: .12em;
}

.hl-onair-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--hl-yellow);
}

.hl-set-place {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 10px;
    margin: 8px 0;
}

.hl-set-place .hl-group-title {
    margin: 0;
}

.hl-set-place .hl-mini-btn {
    margin: 0;
}

.hl-set-address {
    margin: 0;
    overflow-wrap: anywhere;
}

.hl-dialog--wide {
    width: min(900px, 96vw);
}

.hl-dialog--wide .hl-dialog-body {
    text-align: left;
}

.hl-dialog--wide .hl-print {
    padding: 16px;
    border: 0;
    background: transparent;
}

.hl-btn-sm {
    min-height: 44px;
    padding: 0 14px;
    font-size: .9375rem;
}

.hl-btn-danger:hover {
    background: var(--surface-2);
}

.hl-badge-soft {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border: 1px solid var(--bordure-champ);
    border-radius: 4px;
    background: var(--surface-2);
    color: var(--encre);
    font-size: .8125rem;
    font-weight: 700;
}

.hl-badge-dark .mdi {
    margin-right: 4px;
}

.hl-dialog-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--gris-2);
}

.hl-dialog--narrow {
    width: min(520px, 94vw);
}

.hl-meter {
    height: 14px;
    border: 1px solid var(--bordure-champ);
    border-radius: 7px;
    background: var(--surface-2);
    overflow: hidden;
}

.hl-meter-fill {
    display: block;
    height: 100%;
    min-width: 2px;
    background: var(--encre);
}

.hl-meter-thin {
    height: 6px;
    border-radius: 3px;
}

.hl-storage-reminder {
    margin: 0 0 12px;
}

.hl-storage-line {
    margin: 0 0 4px;
    font-size: 0.875rem;
}

.hl-gp {
    max-width: 1180px;
    margin: 0 auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.hl-gp-banner {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 20px 32px;
    align-items: center;
    padding: 24px;
    border-top: 8px solid var(--group-main);
}

.hl-gp-ident {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
}

.hl-gp-logo {
    flex: none;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface-2);
    border: 1px solid var(--gris);
}

.hl-gp-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--group-main);
    color: var(--group-main-text);
    font-family: var(--hl-font-title);
    font-size: 2.75rem;
    font-weight: 700;
    border: 0;
}

.hl-gp-ident-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hl-gp-eyebrow {
    margin: 0;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--texte-2);
}

.hl-gp-title {
    margin: 0;
    font-size: 2rem;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.hl-gp-stats {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
}

.hl-gp-stat {
    display: flex;
    flex-direction: column-reverse;
    padding: 12px 16px;
    border-radius: 8px;
    background: var(--surface-2);
}

.hl-gp-stat dd {
    margin: 0;
    font-family: var(--hl-font-title);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
}

.hl-gp-stat dt {
    font-weight: 600;
    color: var(--texte-2);
}

.hl-gp-storage {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hl-gp-facts code {
    color: var(--encre);
    font-size: .9rem;
}

.hl-gp-storage-line {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 12px;
    margin: 0;
}

.hl-gp-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
}

.hl-gp-wide {
    grid-column: 1 / -1;
}

.hl-gp-grid > .hl-card {
    height: 100%;
}

.hl-gp-facts {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.hl-gp-facts > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--gris-2);
}

.hl-gp-facts > div:last-child {
    border-bottom: 0;
}

.hl-gp-facts dt {
    font-weight: 600;
    color: var(--texte-2);
}

.hl-gp-facts dd {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-weight: 700;
    text-align: right;
    overflow-wrap: anywhere;
}

.hl-gp-swatch {
    width: 24px;
    height: 24px;
    border: 1px solid var(--bordure-champ);
    border-radius: 6px;
}

.hl-gp-mini-logo {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

.hl-members {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hl-member {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 6px 16px;
    align-items: start;
    padding: 14px 0;
    border-top: 1px solid var(--gris-2);
}

.hl-member:first-child {
    border-top: 0;
}

.hl-member-avatar {
    border-radius: 50%;
    object-fit: cover;
}

.hl-member-mail {
    overflow-wrap: anywhere;
}

.hl-member-devices {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    font-size: .875rem;
}

.hl-member-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.hl-member-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.hl-danger-text {
    color: var(--danger);
    font-weight: 600;
}

.hl-gp-retention {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hl-gp-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hl-gp-inline .form-select {
    flex: 1 1 180px;
    min-height: 44px;
}

.hl-gp-danger {
    border-color: var(--danger);
}

.hl-gp-danger .hl-card-title {
    color: var(--danger);
}

.hl-gp .hl-card-pad {
    gap: 14px;
}

@media (max-width: 899.98px) {
    .hl-gp {
        padding: 16px;
    }

    .hl-gp-banner {
        grid-template-columns: minmax(0, 1fr);
        padding: 18px;
    }

    .hl-gp-stats {
        grid-row: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hl-gp-storage {
        grid-column: 1;
        grid-row: auto;
    }

    .hl-gp-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .hl-gp-logo {
        width: 72px;
        height: 72px;
        font-size: 2rem;
    }

    .hl-gp-title {
        font-size: 1.5rem;
    }

    .hl-member {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .hl-member-side {
        grid-column: 1 / -1;
        align-items: flex-start;
    }

    .hl-member-actions {
        justify-content: flex-start;
    }
}

.hl-dialog--form > form {
    display: flex;
    flex-direction: column;
    max-height: 92vh;
}

.hl-dialog--form > form > .hl-dialog-body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
}

.hl-dialog--form > form > .hl-dialog-head,
.hl-dialog--form > form > .hl-dialog-foot {
    flex: none;
}

.hl-profile-devices {
    width: min(100% - 32px, 640px);
    margin: 8px auto 32px;
    scroll-margin-top: 80px;
}

.hl-profile-danger {
    width: min(100% - 32px, 640px);
    margin: 0 auto 32px;
    padding-top: 16px;
    border-top: 1px solid var(--bs-border-color, #D9D8D6);
    display: flex;
    justify-content: center;
}

.hl-devices {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hl-device {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 6px 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--gris-2);
    border-radius: 8px;
}

.hl-device.is-current {
    background: var(--surface-2);
    border-color: var(--encre);
    border-left-width: 6px;
}

.hl-device-icon {
    font-size: 1.5rem;
    line-height: 1;
}

.hl-device-text {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    min-width: 0;
}

.hl-device-text small {
    flex-basis: 100%;
}

@media (max-width: 575.98px) {
    .hl-device {
        grid-template-columns: 28px minmax(0, 1fr);
    }

    .hl-device-action {
        grid-column: 1 / -1;
    }
}

.hl-gp-preview {
    margin-top: 16px;
}

.hl-gp-preview-label {
    margin: 0 0 8px;
    font-weight: 600;
    color: var(--texte-2);
}

.hl-gp-mini-header {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 12px;
    background: var(--surface);
    border: 1px solid var(--gris);
    border-top: 5px solid var(--group-main);
    border-radius: 6px;
}

.hl-gp-mini-avatar {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--group-main);
    color: var(--group-main-text);
    font-family: var(--hl-font-title);
    font-weight: 700;
}

.hl-gp-mini-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hl-gp-mini-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--hl-font-title);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
}

.hl-gp-mini-brand {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.hl-gp-mini-brand img {
    width: auto;
}

.hl-footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 4px;
    font-weight: 700;
}

.hl-footer-logo {
    width: auto;
    height: 26px;
}