: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;
    --danger-ink: #9a2b1f;
    --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;
    --danger-ink: #ff9b8f;
}

[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: nowrap;
    min-width: 0;
    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-logo-baseline {
    height: 44px;
    width: auto;
}

.hl-lang .btn,
.hl-lang .dropdown-item {
    min-height: 44px;
}

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

.hl-group {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    max-width: 100%;
    padding: 0 40px 0 0;
    background: var(--surface-2);
    color: var(--encre);
    border: 1px solid var(--gris);
    border-radius: 999px;
}

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

.hl-group > .dropdown {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    pointer-events: none;
}

.hl-group .hl-icon-button.hl-small {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    min-width: 44px;
    min-height: 44px;
    padding: 0 10px 0 0;
    background: none;
    color: var(--encre);
    border: 0;
    border-radius: 999px;
    font-size: 1.5rem;
    line-height: 1;
    pointer-events: auto;
}

.hl-group .hl-icon-button.hl-small:hover {
    background: none;
}

.hl-group .hl-icon-button.hl-small:focus-visible {
    outline: 3px solid var(--encre);
    outline-offset: 2px;
}

.hl-group > .dropdown .dropdown-menu {
    pointer-events: auto;
}

.hl-group .hl-avatar,
.hl-group .hl-group-balance {
    position: relative;
    z-index: 2;
}

.hl-group-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    max-width: 24rem;
}

.hl-group-sub {
    display: block;
    color: var(--texte-3);
    font-size: .75rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hl-group-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.hl-avatar {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    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 {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    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(--hl-yellow);
    color: #1a1a1a;
}

.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;
    gap: 8px;
    color: var(--encre);
    text-decoration: none;
}

.hl-nav a > i {
    font-size: 1.1em;
    line-height: 1;
    vertical-align: middle;
    color: inherit;
}

@media (max-width: 1199.98px) {
    .hl-nav-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
}

.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-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: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 8px 16px;
    padding: 10px 48px;
}

.hl-song-back {
    justify-self: start;
    min-width: 0;
}

.hl-song-id {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
    max-width: min(60vw, 720px);
    text-align: center;
}

.hl-crumb {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    white-space: nowrap;
    font-size: .9375rem;
    color: var(--encre);
}

.hl-song-title {
    margin: 0;
    max-width: 100%;
    font-family: var(--hl-font-title);
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: .02em;
    text-align: center;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

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

.hl-song-actions {
    display: inline-flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    justify-self: end;
    max-width: 100%;
}

.hl-song-actions > .hl-btn {
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
}

.hl-song-actions > .hl-btn:not(:first-child) {
    margin-left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.hl-song-actions > .hl-btn:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.hl-song-actions > .hl-btn:focus-visible {
    position: relative;
    z-index: 1;
}

@media (max-width: 767.98px) {
    .hl-song-head {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
    }

    .hl-song-back {
        justify-self: start;
    }

    .hl-song-id {
        max-width: 100%;
        width: 100%;
    }

    .hl-song-actions {
        justify-content: center;
        justify-self: center;
    }

    .hl-song-actions .hl-act-label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .hl-song-actions > .hl-btn {
        width: 44px;
        padding: 0;
    }

    .hl-song-actions:empty {
        display: none;
    }
}

.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-score-label {
    align-self: center;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .08em;
    white-space: nowrap;
    color: var(--texte-3);
}

.hl-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    min-width: 0;
    max-width: 100%;
    gap: 4px;
    padding: 2px;
    border-radius: 8px;
}

.hl-tabs-dark {
    background: #2c3336;
}

.hl-tab {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: .4em;
    min-width: 44px;
    min-height: 44px;
    padding: 0 14px;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 6px;
    background: transparent;
    font-weight: 600;
}

.hl-tabs-dark .hl-tab {
    color: #e8e3d8;
}

.hl-tab-name {
    min-width: 0;
    max-width: 12ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hl-tab[aria-selected="true"] .hl-tab-name,
.hl-tab[aria-pressed="true"] .hl-tab-name {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.hl-tab:focus-visible {
    outline: 3px solid var(--hl-yellow);
    outline-offset: 2px;
    box-shadow: none;
}

.hl-tabs-dark .hl-tab:hover {
    background: #3a4246;
}

.hl-tabs-dark .hl-tab[aria-selected="true"],
.hl-tabs-dark .hl-tab[aria-pressed="true"] {
    background: var(--hl-yellow);
    color: #1a1a1a;
    border-bottom-color: #1a1a1a;
}

.hl-score-tabbar {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow-x: auto;
    padding: 4px 8px;
    border-radius: 8px;
    background: var(--hl-white, #fff);
    color: var(--hl-black, #1a1a1a);
}

.hl-score-tabbar .hl-score-label {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    min-height: 44px;
    color: var(--hl-black, #1a1a1a);
}

.hl-score-tabbar .hl-tabs {
    flex: 0 0 auto;
    align-items: center;
    overflow: visible;
    max-width: none;
}

.hl-score-tabbar .hl-tabs[hidden] {
    display: none;
}

.hl-tabs-light {
    background: var(--hl-white, #fff);
}

.hl-tabs-light .hl-tab {
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--hl-gray, #d9d8d6);
    border-bottom-width: 3px;
    border-radius: 5px;
    background: var(--hl-white, #fff);
    color: var(--hl-black, #1a1a1a);
}

.hl-tabs-light .hl-tab:hover {
    background: var(--hl-gray, #d9d8d6);
}

.hl-tabs-light .hl-tab[aria-selected="true"] {
    background: var(--hl-black, #1a1a1a);
    color: var(--hl-white, #fff);
    border-color: var(--hl-black, #1a1a1a);
    border-bottom-color: var(--hl-yellow);
}

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

.hl-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    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-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-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 {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 44px;
    max-width: 100%;
    padding: 0 10px;
    border: 1px solid var(--bordure-champ);
    border-radius: 6px;
    background: var(--surface);
    color: var(--encre);
    font-size: .75rem;
    font-weight: 600;
}

.hl-pill-text {
    min-width: 0;
    max-width: 14ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

.hl-player {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.hl-ctrls {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    min-width: 0;
}

.hl-ctrls > .hl-repeat {
    flex: 0 1 44px;
    width: auto;
    min-width: 32px;
}

.hl-ctrls > .hl-play {
    flex: 0 0 auto;
    width: 52px;
    min-width: 44px;
}

.hl-play {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    width: 52px;
    min-width: 44px;
    height: auto;
    padding: 0;
    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 {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.hl-progress-wrap .hl-times {
    display: contents;
}

.hl-progress-wrap [data-elapsed] {
    order: 0;
}

.hl-progress-wrap .hl-progress {
    order: 1;
}

.hl-progress-wrap [data-total] {
    order: 2;
}

.hl-progress-wrap [data-elapsed],
.hl-progress-wrap [data-total] {
    flex: 0 0 auto;
    font-size: .75rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--texte-2);
}

@media (max-width: 767.98px) {
    .hl-progress-wrap .hl-times-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

.hl-progress {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    height: 24px;
    margin: 0;
    background: transparent;
    accent-color: var(--encre);
}

.hl-times {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: .8125rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    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-ctrls > .hl-repeat[hidden] {
    display: inline-flex;
    visibility: hidden;
}

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

lod-sound-player {
    display: block;
    container-type: inline-size;
}

.hl-pop-wrap {
    position: relative;
    flex: 0 1 44px;
    min-width: 32px;
    display: flex;
}

.hl-pop-wrap > .hl-repeat {
    flex: 1 1 auto;
    width: auto;
    min-width: 32px;
}

.hl-pop {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border: 1.5px solid var(--encre);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

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

.hl-pop-wrap[hidden] {
    display: none;
}

.hl-mix-pop {
    right: 0;
    width: min(560px, 94vw);
    max-height: 60vh;
    align-items: stretch;
    overflow-y: auto;
}

.hl-mix-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

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

.hl-mix-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) minmax(0, 20ch) 56px;
    align-items: center;
    gap: 6px 10px;
}

.hl-mix-name {
    min-width: 0;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hl-mix-row.is-muted .hl-mix-name {
    text-decoration: line-through;
    opacity: .65;
}

.hl-mix-row.is-muted .hl-mix-range {
    opacity: .45;
}

.hl-mix-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 44px;
    min-height: 44px;
    padding: 0 8px;
    border: 1px solid var(--hl-black);
    border-radius: var(--hl-radius);
    background: var(--hl-white);
    color: var(--hl-black);
    font-weight: 700;
    cursor: pointer;
}

.hl-mix-btn:hover {
    background: var(--hl-gray);
}

.hl-mix-btn[aria-pressed="true"] {
    background: var(--hl-yellow);
    color: #1a1a1a;
}

.hl-mix-btn:focus-visible {
    outline: 3px solid var(--hl-black);
    outline-offset: 2px;
}

.hl-mix-spacer {
    display: block;
}

.hl-mix-range {
    width: 100%;
    min-width: 0;
    min-height: 44px;
}

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

    .hl-mix-name {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .hl-mix-row > :nth-child(1) {
        grid-column: 1;
        grid-row: 2;
    }

    .hl-mix-row > :nth-child(2) {
        grid-column: 2;
        grid-row: 2;
    }

    .hl-mix-row > :nth-child(4) {
        grid-column: 3;
        grid-row: 2;
    }
}

.hl-volume-pop {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}

.hl-volume-range {
    width: 32px;
    height: 120px;
    margin: 0;
    writing-mode: vertical-lr;
    direction: rtl;
}

.hl-volume-value {
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--texte-2);
}

.hl-tempo-block {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--bordure-champ);
}

.hl-tempo-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
    margin-bottom: 8px;
}

.hl-tempo-title {
    font-weight: 700;
}

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

.hl-tempo-group > :first-child {
    border-radius: 6px 0 0 6px;
}

.hl-tempo-group > :last-child {
    border-radius: 0 6px 6px 0;
}

.hl-tempo-value-wrap {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    align-items: stretch;
}

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

.hl-tempo-btn {
    flex: 0 0 56px;
    font-size: 1.25rem;
    font-weight: 700;
}

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

.hl-tempo-value {
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 2px 8px;
    border-left: 1.5px solid var(--encre);
    border-right: 1.5px solid var(--encre);
}

.hl-tempo-value.is-changed {
    background: #FCE200;
    color: #000;
}

.hl-tempo-btn:focus-visible,
.hl-tempo-value:focus-visible {
    outline: 3px solid var(--encre);
    outline-offset: -3px;
}

.hl-tempo-btn:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.hl-tempo-number {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
}

.hl-tempo-unit {
    font-size: .75rem;
    font-weight: 400;
    color: inherit;
}

.hl-tempo-error {
    font-size: .75rem;
    font-weight: 600;
    color: var(--bs-danger, #b02a37);
}

.hl-tempo-error[hidden] {
    display: none;
}

.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--group {
    max-width: 520px;
}

.hl-dialog-status {
    margin: 0;
    padding: 0 16px 8px;
    min-height: 1.5em;
    color: var(--encre);
}

.hl-group-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.hl-copy-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--gris-2);
    color: var(--encre);
    font-size: .8125rem;
    font-weight: 600;
}

.hl-group-chip {
    display: inline-flex;
    align-items: center;
    max-width: 14rem;
    padding: 2px 10px;
    border: 1px solid var(--chip-border, #A9A8A6);
    border-radius: 999px;
    background: var(--chip-bg, #D9D8D6);
    color: var(--chip-fg, #1A1A1A);
    font-size: .8125rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

button.hl-group-chip {
    min-height: 44px;
    cursor: pointer;
}

.hl-group-chip:focus-visible {
    outline: 3px solid var(--encre, #1A1A1A);
    outline-offset: 2px;
}

.hl-group-chip.is-private {
    --chip-bg: #D9D8D6;
    --chip-fg: #1A1A1A;
    --chip-border: #A9A8A6;
}

.hl-copy-badge.is-bad,
.hl-copies .is-bad {
    border: 1px solid var(--danger);
    color: var(--danger);
}

.hl-copies {
    margin: 8px 0;
    padding: 0;
    list-style: none;
}

.hl-copy-item {
    padding: 4px 0;
}

.hl-group-manage {
    min-height: 44px;
    min-width: 44px;
    margin-top: 6px;
}

.hl-titles-picker-heading {
    margin-top: 8px;
    font-weight: 700;
    list-style: none;
}

.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 {
        display: none;
    }

    main:has(.hl-sounds:not(.hl-sounds--empty)) {
        padding-bottom: calc(var(--hl-player-height, 0px) + env(safe-area-inset-bottom, 0px));
        scroll-padding-bottom: calc(var(--hl-player-height, 0px) + env(safe-area-inset-bottom, 0px));
    }

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

@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-logo-baseline {
        height: 40px;
    }

    .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-sounds .hl-card-pad {
        padding: 10px 12px 18px;
    }

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

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




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

.hl-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
    color: var(--texte-2);
}

.hl-crumbs li + li::before {
    content: "›";
    margin-right: 8px;
}

.hl-crumbs a,
.hl-set-line a,
.hl-set-place-line a,
.hl-entry-title {
    color: var(--encre);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hl-crumbs a,
.hl-set-line a,
.hl-set-place-line a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.hl-set-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px 20px;
    margin-bottom: 20px;
}

.hl-set-stamp {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 88px;
    height: 88px;
    border-radius: var(--hl-radius);
    background: #FCE200;
    color: #1A1A1A;
    line-height: 1.05;
    font-weight: 700;
}

.hl-set-stamp.is-past {
    background: #D9D8D6;
}

.hl-set-stamp-wd,
.hl-set-stamp-mo {
    font-size: .8125rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.hl-set-stamp-day {
    font-family: var(--hl-font-title);
    font-size: 2rem;
}

.hl-set-head-text {
    flex: 1 1 280px;
    min-width: 0;
}

.hl-set-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 0 0 4px;
    font-family: var(--hl-font-title);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 700;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.hl-set-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 8px;
    margin: 0;
    color: var(--encre);
}

.hl-set-line form {
    display: inline-flex;
}

.hl-set-muted,
.hl-set-place-line {
    color: var(--texte-2);
    font-size: .9375rem;
}

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

.hl-set-line .hl-link-button {
    min-height: 44px;
    padding: 0 8px;
}

.hl-set-panels {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 16px;
    margin-bottom: 28px;
}

.hl-set-panels:has(> :only-child) {
    grid-template-columns: minmax(0, 1fr);
}

.hl-set-panel {
    padding: 16px 20px 20px;
    border: 1px solid var(--gris);
    border-radius: var(--hl-radius);
    background: var(--surface);
}

.hl-set-panel-title,
.hl-entry-set-title {
    margin: 0 0 12px;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--texte-2);
}

.hl-set-panel-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
}

.hl-set-panel-actions form {
    display: contents;
}

.hl-set-panel-actions .hl-btn,
.hl-entry-play {
    min-height: 44px;
}

.hl-btn-lg {
    min-height: 56px;
    padding: 0 24px;
    font-size: 1.0625rem;
}

.hl-btn-line {
    background: transparent;
    border: 1.5px solid var(--encre);
    color: var(--encre);
}

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

.hl-set-more {
    position: relative;
}

.hl-set-more > summary {
    list-style: none;
    cursor: pointer;
}

.hl-set-more > summary::-webkit-details-marker {
    display: none;
}

.hl-set-more[open] > summary .mdi-chevron-down {
    transform: rotate(180deg);
}

.hl-set-more-menu {
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    min-width: 260px;
    padding: 10px;
    border: 1px solid var(--gris);
    border-radius: var(--hl-radius);
    background: var(--surface);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
}

.hl-set-more-menu form {
    display: contents;
}

.hl-set-more-menu .hl-btn {
    justify-content: flex-start;
}

.hl-set-section-title {
    margin: 0 0 12px;
    font-family: var(--hl-font-title);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

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

.hl-entry {
    display: grid;
    grid-template-columns: 48px minmax(0, 2fr) minmax(0, 3fr) auto auto;
    align-items: center;
    gap: 12px 16px;
    padding: 12px 16px;
    border: 1px solid var(--gris);
    border-radius: var(--hl-radius);
    background: var(--surface);
}

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

.hl-entry-number {
    font-family: var(--hl-font-title);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
}

.hl-entry-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-wrap: anywhere;
}

.hl-entry-title {
    font-weight: 700;
}

.hl-entry-sub {
    color: var(--texte-2);
}

.hl-entry-set {
    min-width: 0;
}

.hl-entry-set-title {
    margin-bottom: 6px;
}

.hl-entry-instruments {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.hl-entry-instrument {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 2px 10px;
    border-radius: 999px;
    background: #FFF6A8;
    color: #1A1A1A;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.5;
}

.hl-entry-instrument-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hl-entry-tools {
    display: flex;
    align-items: center;
    gap: 2px;
    opacity: .85;
}

.hl-entry-tools form {
    display: contents;
}

@media (max-width: 991.98px) {
    .hl-sets-main {
        padding: 16px 24px;
    }

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

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

    .hl-entry-set,
    .hl-entry-play,
    .hl-entry-tools {
        grid-column: 2;
    }
}

[data-theme="dark"] .hl-entry-instrument,
[data-theme="dark"] .hl-set-stamp {
    color: #1A1A1A;
}

@media (forced-colors: active) {
    .hl-set-stamp,
    .hl-entry-instrument {
        border: 1px solid CanvasText;
    }
}

.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-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-btn-danger {
    border: 1.5px solid var(--danger);
    color: var(--danger);
}





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



.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-print-choice {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
}

.hl-print-note {
    padding: 0 4px;
    color: var(--encre);
    font-size: 0.8rem;
}

.hl-kind {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    border: 1px solid var(--encre);
    border-radius: 4px;
    background: var(--surface);
    color: var(--encre);
    font-size: 0.75rem;
    font-weight: 700;
}

.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-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: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 12px;
    padding: 6px 12px;
}

.hl-stage-left,
.hl-stage-right {
    display: flex;
    align-items: center;
    gap: 8px 12px;
    min-width: 0;
}

.hl-stage-right {
    justify-content: flex-end;
}

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

.hl-stage-logo {
    position: absolute;
    top: 50%;
    right: 100%;
    margin-right: 12px;
    transform: translateY(-50%);
    height: 40px;
    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-nav:focus-visible {
    outline: 3px solid var(--hl-yellow);
    outline-offset: 2px;
    box-shadow: none;
}

.hl-stage-title {
    position: relative;
    min-width: 0;
    max-width: min(70vw, 860px);
    text-align: center;
}

.hl-stage-title h1 {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--hl-font-title);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
}

.hl-stage-meta {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.7rem;
    line-height: 1;
    color: #a9b3ae;
    margin: 0;
}

.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;
    overflow: hidden;
    --hl-turn-ms: 560ms;
    --hl-turn-ease: cubic-bezier(0.45, 0.05, 0.25, 1);
    --hl-turn-perspective: 1800px;
}

.hl-stage-page[data-turn] {
    perspective: var(--hl-turn-perspective);
    overflow: visible;
    z-index: 3;
}

.hl-stage-viewer:has(.hl-stage-page[data-turn="next"], .hl-stage-page[data-turn="prev"]) {
    overflow: clip;
    overflow-clip-margin: 48px;
}

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

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

.hl-stage-page[data-turn] > .hl-stage-turn-out {
    z-index: 2;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
    transform-style: preserve-3d;
    overflow: hidden;
    border-radius: 0;
}

.hl-stage-page[data-turn="next"] > .hl-stage-turn-out {
    transform-origin: left center;
    animation: hl-stage-turn-next var(--hl-turn-ms) var(--hl-turn-ease) forwards;
}

.hl-stage-page[data-turn="prev"] > .hl-stage-turn-out {
    transform-origin: right center;
    animation: hl-stage-turn-prev var(--hl-turn-ms) var(--hl-turn-ease) forwards;
}

.hl-stage-page[data-turn="fade"] > .hl-stage-turn-out {
    z-index: 2;
    animation: hl-stage-turn-fade-out var(--hl-turn-ms) linear forwards;
}

.hl-stage-page[data-turn] > .hl-stage-turn-in::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
}

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

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

.hl-stage-page[data-turn="fade"] > .hl-stage-turn-in {
    animation: hl-turn-fade var(--hl-turn-ms) linear forwards;
}

@keyframes hl-stage-turn-next {
    0% { transform: rotateY(0deg) skewY(0deg); border-radius: 0; box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
    40% { transform: rotateY(-50deg) skewY(2.5deg) translateZ(30px); border-radius: 0 56px 56px 0 / 0 40px 40px 0; box-shadow: 18px 10px 36px rgba(0, 0, 0, 0.45); }
    75% { transform: rotateY(-120deg) skewY(-1.5deg) translateZ(18px); border-radius: 0 36px 36px 0 / 0 24px 24px 0; box-shadow: 10px 6px 24px rgba(0, 0, 0, 0.3); }
    100% { transform: rotateY(-180deg) skewY(0deg); border-radius: 0; box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
}

@keyframes hl-stage-turn-prev {
    0% { transform: rotateY(0deg) skewY(0deg); border-radius: 0; box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
    40% { transform: rotateY(50deg) skewY(-2.5deg) translateZ(30px); border-radius: 56px 0 0 56px / 40px 0 0 40px; box-shadow: -18px 10px 36px rgba(0, 0, 0, 0.45); }
    75% { transform: rotateY(120deg) skewY(1.5deg) translateZ(18px); border-radius: 36px 0 0 36px / 24px 0 0 24px; box-shadow: -10px 6px 24px rgba(0, 0, 0, 0.3); }
    100% { transform: rotateY(180deg) skewY(0deg); border-radius: 0; box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
}

@keyframes hl-stage-turn-shadow {
    0% { opacity: 0; }
    35% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes hl-stage-turn-fade-out {
    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: 4px;
    padding: 3px 8px;
}

.hl-stage-count {
    display: block;
    font-size: 0.75rem;
    line-height: 1;
    color: #a9b3ae;
    margin: 0;
}

.hl-stage-bar {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 12px;
    padding: 4px;
    border-radius: 12px;
    background: #1a1a1a;
}

.hl-stage-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
}

.hl-stage-tempo {
    min-width: 0;
    display: flex;
    justify-content: center;
}

.hl-stage-bar .hl-stage-title {
    flex: 1 1 200px;
    min-width: 0;
    max-width: none;
    margin-left: auto;
    padding: 0 4px;
    text-align: right;
}

.hl-stage-bar .hl-stage-title h1 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    font-size: 0.95rem;
    line-height: 1.1;
}

.hl-stage-bar .hl-stage-meta {
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
}

.hl-stage-bar .hl-stage-act[aria-expanded="true"] {
    background: var(--hl-yellow);
    color: #1a1a1a;
}

.hl-stage-act {
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #fff;
    font-size: .75rem;
    line-height: 1.1;
    white-space: nowrap;
}

.hl-stage-act i {
    font-size: 1.4rem;
    line-height: 1;
}

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

.hl-stage-act:disabled {
    color: #7d8588;
    cursor: not-allowed;
}

.hl-stage-notes-panel,
.hl-sp-panel {
    bottom: max(96px, calc(env(safe-area-inset-bottom) + 88px));
}

@media (max-width: 599.98px) {
    .hl-stage-act-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

.hl-stage-nav {
    flex: 0 1 22%;
    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:disabled,
.hl-stage-nav[aria-disabled="true"] {
    opacity: 0.4;
    cursor: not-allowed;
    background: #2c3336;
    border-color: #3a4245;
    color: #e8e3d8;
    font-weight: 400;
}

@media (max-width: 1199.98px) {
    .hl-sets {
        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;
}

lod-recording-link {
    display: contents;
}

.hl-tool-text {
    width: auto;
    padding: 0 12px;
    gap: 6px;
    font-size: .875rem;
    text-decoration: none;
}

.hl-rec-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hl-rec-chips:empty {
    display: none;
}

.hl-rec-chip {
    display: block;
    max-width: 200px;
    min-height: 24px;
    padding: 0 8px;
    overflow: hidden;
    border-radius: 12px;
    background: var(--surface-2);
    font-size: .8125rem;
    line-height: 24px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.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(240px, calc(100vh - 330px - var(--hl-player-height, 0px) - env(safe-area-inset-bottom, 0px)), 1000px);
    height: clamp(240px, calc(100dvh - 330px - var(--hl-player-height, 0px) - env(safe-area-inset-bottom, 0px)), 1000px);
}

.hl-song-body.is-xml-view .hl-stage {
    height: clamp(240px, calc(100vh - 305px - var(--hl-player-height, 0px) - env(safe-area-inset-bottom, 0px)), 1100px);
    height: clamp(240px, calc(100dvh - 305px - var(--hl-player-height, 0px) - env(safe-area-inset-bottom, 0px)), 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-surface svg {
    cursor: pointer;
}

.hl-pages.is-xml .hl-xml-host {
    background: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    min-height: 0;
}

.hl-pages.is-xml .hl-xml-frame {
    margin: 0 auto;
}

.hl-pages.is-xml .hl-xml-surface {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.hl-xml-surface > div {
    position: relative;
}

.hl-xml-surface > div > .hl-notes-layer {
    z-index: 3;
}

.hl-pages.is-xml .hl-xml-surface > div {
    background: #fff;
    box-shadow: var(--ombre-partition);
}

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

.hl-xml-tools[hidden],
.hl-xml-views[hidden] {
    display: none;
}

.hl-xml-views {
    position: relative;
    color: var(--encre);
}

.hl-xml-viewslabel {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    min-width: 44px;
    padding: 0 10px;
    cursor: pointer;
    border: 1px solid var(--gris);
    border-radius: 8px;
    background: var(--surface);
}

.hl-xml-viewslabel:focus-visible {
    outline: 3px solid var(--hl-yellow);
    outline-offset: 2px;
}

.hl-xml-viewslist {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(420px, 90vw);
    max-height: 60vh;
    overflow: auto;
    padding: 12px;
    background: var(--surface);
    border: 1px solid var(--gris);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

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

.hl-xml-viewname {
    flex: 1 1 100%;
    font-weight: 600;
}

.hl-xml-viewcontrol {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1 1 100%;
}

.hl-xml-viewselect {
    min-height: 44px;
    flex: 1 1 140px;
}

[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(240px, calc(100dvh - 330px - var(--hl-player-height, 0px) - env(safe-area-inset-bottom, 0px)), 900px);
    }

}

.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: grid;
    grid-template-columns: 1fr minmax(0, 2fr) 1fr;
    align-items: center;
    gap: 8px 16px;
    margin-bottom: 16px;
}

.hl-edit-back {
    justify-self: start;
}

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

    .hl-edit-head }

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

.hl-edit-head .hl-edit-title {
    min-width: 0;
    display: block;
    -webkit-line-clamp: none;
    line-clamp: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hl-pill {
    display: inline-block;
    padding: 2px 10px;
    border: 1px solid var(--gris);
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--encre);
    background: var(--surface);
}

.hl-edit-grid {
    display: grid;
    grid-template-columns: minmax(220px, 280px) 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-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;
}

html {
    scroll-behavior: smooth;
}

.hl-edit-aside,
.hl-edit-section,
.hl-section-title {
    scroll-margin-top: 16px;
}

.hl-edit-nav {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--gris);
}

.hl-edit-delete .btn {
    width: 100%;
    min-height: 44px;
}

.hl-info-form {
    padding: 16px;
}

.hl-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.hl-info-field .form-label {
    margin-bottom: 4px;
    font-size: .875rem;
    font-weight: 700;
    color: var(--encre);
}

.hl-info-field .form-control,
.hl-info-field .form-select {
    min-height: 44px;
    border-radius: 8px;
}

.hl-info-field .form-select {
    background-position: right 12px center;
    background-size: 16px 12px;
}

.hl-info-field .form-control:focus-visible,
.hl-info-field .form-select:focus-visible {
    outline: 3px solid var(--encre);
    outline-offset: 2px;
}

.hl-info-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.hl-info-actions .btn {
    min-height: 44px;
}

.hl-edit #section-info {
    text-transform: uppercase;
    letter-spacing: .04em;
}

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

.hl-edit-nav-title {
    margin: 0 0 8px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

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

.hl-edit-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 44px;
    padding: 0 10px;
    border-radius: 6px;
    color: var(--encre);
    font-weight: 600;
    text-decoration: none;
}

.hl-edit-nav-link:hover {
    background: var(--gris);
}

.hl-edit-nav-link:focus-visible {
    outline: 3px solid var(--encre);
    outline-offset: 2px;
}

.hl-edit-nav-link .hl-pill {
    min-height: 28px;
    background: #FCE200;
    border-color: #FCE200;
    color: #1A1A1A;
}

@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;
    }
}

/* ---- 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-measure-marker {
    position: absolute;
    z-index: 4;
    min-width: 44px;
    min-height: 44px;
    padding: 0 8px;
    border: 2px solid #1a1a1a;
    border-radius: 22px;
    background: var(--jaune, #fce200);
    color: #1a1a1a;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.hl-measure-marker:focus-visible {
    outline: 3px solid #1a1a1a;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px #fff;
}

.hl-measure-panel button:focus-visible,
.hl-measure-panel input:focus-visible,
.hl-measure-panel select:focus-visible,
.hl-measure-panel textarea:focus-visible {
    outline: 3px solid var(--encre);
    outline-offset: 2px;
}

.hl-measure-tools[hidden],
.hl-measure-panel[hidden] {
    display: none;
}

.hl-measure-panel {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(360px, calc(100vw - 32px));
    max-height: 70vh;
    overflow: auto;
    padding: 12px;
    border: 2px solid var(--encre);
    border-radius: 8px;
    background: var(--surface, #fff);
    color: var(--encre);
}

.hl-measure-panel button,
.hl-measure-panel input,
.hl-measure-panel select {
    min-height: 44px;
}

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

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

.hl-measure-item {
    padding: 8px;
    border: 1px solid var(--gris);
    border-radius: 6px;
}

.hl-measure-text {
    margin: 4px 0 8px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.hl-measure-error:empty {
    display: none;
}

.hl-measure-error {
    color: #8a1c1c;
    font-weight: 600;
}

.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;
}

/* ---- 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-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-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-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;
}

.hl-or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
    color: var(--encre);
}

.hl-or::before,
.hl-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--gris);
}

.hl-import-ungroup {
    min-height: 44px;
    min-width: 44px;
}

.hl-titles-picker-dialog {
    width: min(640px, 96vw);
}

.hl-titles-picker-list {
    list-style: none;
    margin: 12px 0;
    padding: 0;
    max-height: 50vh;
    overflow: auto;
    border: 1px solid var(--gris, #D9D8D6);
    border-radius: 8px;
}

.hl-titles-picker-item[hidden] {
    display: none;
}

.hl-titles-picker-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 8px 12px;
    cursor: pointer;
}

.hl-titles-picker-row input {
    width: 24px;
    height: 24px;
    flex: none;
}

.hl-titles-picker-item.is-selected {
    background: var(--vert, #CDDDD5);
}

.hl-titles-picker-rank {
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    border-radius: 14px;
    background: #1A1A1A;
    color: #fff;
    font-weight: 700;
    text-align: center;
    line-height: 28px;
    flex: none;
}

.hl-titles-picker-rank[hidden] {
    display: none;
}

.hl-titles-picker-text {
    flex: 1;
}

.hl-titles-picker-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.hl-titles-picker-foot .hl-btn {
    min-height: 44px;
    min-width: 44px;
}

.hl-titles-picker-row:focus-within {
    outline: 3px solid #1A1A1A;
    outline-offset: -3px;
}

.hl-set-group .hl-set-toolbar.btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.hl-set-group .hl-set-toolbar.btn-group > .hl-btn,
.hl-set-group .hl-set-toolbar.btn-group > lod-share .hl-btn {
    min-height: 44px;
    border-radius: 6px;
}

.hl-select {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 44px;
    min-height: 44px;
    padding: 0 8px;
    cursor: pointer;
}

.hl-select input {
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: var(--hl-black);
}

.hl-select input:focus-visible {
    outline: 3px solid var(--hl-black);
    outline-offset: 2px;
}

.hl-result-count {
    margin: 0 0 8px;
    font-weight: 600;
}

.hl-table-wrap {
    width: 100%;
}

.hl-load-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
}

.hl-load-sentinel {
    display: block;
    width: 100%;
    height: 1px;
}

.hl-load-status {
    margin: 0;
    color: var(--hl-black);
    font-size: 0.9rem;
}

.hl-load-status[hidden],
.hl-load-more [hidden] {
    display: none;
}

.hl-library-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--hl-white);
    color: var(--hl-black);
}

.hl-library-table th,
.hl-library-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--hl-gray);
    text-align: left;
    vertical-align: middle;
}

.hl-library-table thead th {
    border-bottom: 2px solid var(--hl-black);
    white-space: nowrap;
}

.hl-library-table .hl-col-select {
    width: 1%;
    padding: 0 4px;
}

.hl-library-table tbody tr.is-selected > * {
    background: var(--hl-green);
}

.hl-library-table .hl-group-row th {
    background: var(--hl-gray);
    font-size: 1.05rem;
}

.hl-sort {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 6px;
    border: 0;
    border-radius: var(--hl-radius);
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.hl-sort:hover span {
    text-decoration: underline;
}

.hl-sort:focus-visible {
    outline: 3px solid var(--hl-black);
    outline-offset: 2px;
}

.hl-sort i {
    font-size: 1.25rem;
    line-height: 1;
}

th[aria-sort="none"] .hl-sort i {
    opacity: .55;
}

.hl-cell-title a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 700;
    color: inherit;
}

.hl-cell-sub {
    display: block;
    font-weight: 400;
    color: #4a4a4a;
}

.hl-cell-text {
    max-width: 14rem;
}

.hl-ellipsis {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hl-library-table .hl-cell-title {
    min-width: 12rem;
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .hl-library-table .hl-col-extra {
        display: none;
    }
}

.hl-cell-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.hl-cell-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

.hl-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--hl-gray);
    color: var(--hl-black);
    font-size: .875rem;
    font-weight: 600;
    white-space: nowrap;
}

.hl-tag--partition {
    background: var(--hl-tag-partition);
}

.hl-tag--audio {
    background: var(--hl-tag-audio);
}

.hl-tag--video {
    background: var(--hl-tag-video);
}

.hl-tag--enregistrement {
    background: var(--hl-tag-enregistrement);
}

.hl-tag i {
    font-size: 1.1rem;
    line-height: 1;
}

@media (min-width: 768px) {
    .hl-selectall-text {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

@media (max-width: 767.98px) {
    .hl-library-table,
    .hl-library-table thead,
    .hl-library-table tbody,
    .hl-library-table tr,
    .hl-library-table th,
    .hl-library-table td {
        display: block;
    }

    .hl-library-table thead tr {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        padding-bottom: 8px;
        border-bottom: 2px solid var(--hl-black);
    }

    .hl-library-table thead th {
        width: auto;
        padding: 0;
        border: 0;
    }

    .hl-library-table tbody tr[data-song-row] {
        margin-bottom: 12px;
        padding: 4px 0;
        border: 1px solid var(--hl-black);
        border-radius: var(--hl-radius);
    }

    .hl-library-table tbody th,
    .hl-library-table tbody td {
        padding: 6px 12px;
        border: 0;
    }

    .hl-library-table .hl-group-row {
        margin: 12px 0 8px;
    }

    .hl-library-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: .8125rem;
        font-weight: 700;
    }

    .hl-library-table .hl-col-select {
        width: auto;
        padding: 0 8px;
        text-align: left;
    }
}

.hl-bulkbar {
    position: sticky;
    top: 0;
    z-index: var(--hl-z-bulkbar, 20);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 8px 12px;
    border: 2px solid var(--hl-black);
    border-radius: var(--hl-radius);
    background: var(--hl-white);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}

.hl-bulkbar[hidden] {
    display: flex;
    visibility: hidden;
}

.hl-bulkbar .hl-btn {
    min-height: 44px;
}

.hl-bulkbar .hl-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.hl-bulkbar-count {
    min-height: 44px;
    display: flex;
    align-items: center;
    margin-right: auto;
    font-weight: 700;
}

.hl-delete-list {
    max-height: 200px;
    overflow: auto;
    padding-left: 20px;
}

.hl-toast[data-status] {
    position: fixed;
    left: 50%;
    bottom: 16px;
    z-index: 1080;
    max-width: min(560px, 92vw);
    padding: 12px 16px;
    border-radius: var(--hl-radius);
    background: var(--hl-black);
    color: var(--hl-white);
    font-weight: 600;
    transform: translateX(-50%);
}

.hl-toast[data-status]:not(.is-visible) {
    display: none;
}

.hl-stage-act[aria-expanded="true"],
.hl-stage-act.is-active {
    background: var(--hl-yellow);
    color: #1a1a1a;
}

.hl-tool-panel {
    position: fixed;
    left: max(8px, env(safe-area-inset-left));
    bottom: max(56px, env(safe-area-inset-bottom));
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-sizing: border-box;
    width: min(380px, calc(100vw - 16px));
    max-height: calc(100dvh - 120px);
    overflow-y: auto;
    padding: 12px;
    border: 2px solid var(--hl-yellow);
    border-radius: var(--hl-radius);
    background: #1f2426;
    color: #e8e3d8;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .5);
}

.hl-tool-panel[hidden] {
    display: none;
}

.hl-tool-head,
.hl-tool-row,
.hl-tool-stepper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.hl-tool-head {
    justify-content: space-between;
}

.hl-tool-title {
    margin: 0;
    font-size: 1.1rem;
}

.hl-tool-label {
    flex: 1 1 100%;
    font-weight: 600;
}

.hl-tool-input,
.hl-tool-button,
.hl-tool-main,
.hl-tuner-string,
.hl-tool-panel .hl-icon-button {
    min-height: 44px;
    min-width: 44px;
    box-sizing: border-box;
    border: 1px solid #6b7478;
    border-radius: var(--hl-radius);
    background: #2c3336;
    color: #e8e3d8;
    font: inherit;
    padding: 4px 10px;
}

.hl-tool-input[type="number"] {
    width: 5.5em;
    text-align: center;
}

.hl-tool-main {
    flex: 1 1 auto;
    background: var(--hl-yellow);
    border-color: var(--hl-yellow);
    color: #1a1a1a;
    font-weight: 700;
    cursor: pointer;
}

.hl-tool-main[aria-pressed="true"] {
    background: #e8e3d8;
    border-color: #e8e3d8;
    text-decoration: underline;
}

.hl-tool-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
}

.hl-tool-check input {
    width: 24px;
    height: 24px;
}

.hl-tool-range {
    flex: 1 1 140px;
    min-height: 44px;
}

.hl-tool-hint {
    margin: 0;
    font-size: .85rem;
    color: #c9d1cc;
}

.hl-tool-error {
    margin: 0;
    padding: 8px;
    border: 2px solid #ffd35c;
    border-radius: var(--hl-radius);
    background: #3a2f10;
    color: #f2f2f2;
}

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

.hl-beat-dots {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.hl-beat-dots[hidden] {
    display: none;
}

.hl-beat-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 2px solid #6b7478;
    border-radius: 50%;
    color: #e8e3d8;
    font-weight: 700;
}

.hl-beat-dot.is-first {
    border-style: double;
    border-width: 4px;
}

.hl-beat-dot.is-on {
    background: var(--hl-yellow);
    border-color: var(--hl-yellow);
    color: #1a1a1a;
    transform: scale(1.15);
    text-decoration: underline;
}

.hl-beat-dots.is-calm .hl-beat-dot {
    transition: none;
    transform: none;
}

.hl-tuner-strings {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

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

.hl-tuner-string.is-near {
    border: 3px solid var(--hl-yellow);
}

@media (prefers-reduced-motion: no-preference) {
    .hl-beat-dot {
        transition: transform .06s linear;
    }
}

.hl-xml-frame.is-paged {
    position: relative;
    overflow: hidden;
    overflow: clip;
    margin: 0 auto;
    background: #fff;
}

.hl-xml-frame.is-paged .hl-xml-surface {
    will-change: transform;
}

.hl-xml-host.is-paged {
    width: max-content;
    max-width: 100%;
    min-height: 0;
    margin: 0 auto;
    padding: 0;
}

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

.hl-page-xml {
    background: #fff;
}

.hl-stage-viewer:has(.hl-page-xml) {
    overflow: hidden;
}

.hl-instrument-icon {
    flex: 0 0 auto;
    font-size: 1.25em;
    line-height: 1;
    vertical-align: -.2em;
}

.hl-look-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.hl-look-sound {
    min-width: 14rem;
}

.hl-ts {
    width: 100%;
}

.ts-wrapper.hl-ts .ts-control {
    min-height: 44px;
    cursor: pointer;
}

.ts-wrapper.hl-ts.focus .ts-control {
    outline: 3px solid var(--hl-black, #1A1A1A);
    outline-offset: 2px;
}

.hl-ts-option,
.hl-ts-item {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.hl-ts-option {
    min-height: 40px;
}

.hl-ts-holder {
    display: inline-block;
    min-width: 12rem;
}

.hl-icon-dialog {
    width: min(46rem, 94vw);
}

.hl-icon-body {
    display: grid;
    gap: 1rem;
    text-align: left;
}

.hl-icon-fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.hl-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap: .375rem;
}

.hl-icon-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    min-height: 64px;
    padding: .375rem;
    font-size: .8125rem;
    line-height: 1.2;
}

.hl-icon-cell i {
    font-size: 1.75rem;
    line-height: 1;
}

.btn-check:checked + .hl-icon-cell {
    outline: 3px solid var(--hl-yellow, #FCE200);
    outline-offset: 1px;
}

.btn-check:focus-visible + .hl-icon-cell {
    outline: 3px solid var(--hl-black, #1A1A1A);
    outline-offset: 2px;
}

.hl-icon-preview {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 4rem;
}

.hl-icon-big {
    font-size: 3.5rem;
    line-height: 1;
}

.hl-icon-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

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

.hl-duplicate-body {
    text-align: left;
}

.hl-duplicate-body .form-control,
.hl-duplicate-body .btn {
    min-height: 44px;
}

.hl-duplicate-body .form-check-input {
    width: 1.5rem;
    height: 1.5rem;
}

.hl-duplicate-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

.hl-chips {
    min-width: 8rem;
}

.hl-fmt-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 600;
}

.hl-rec-compact .hl-rec-row {
    flex-wrap: nowrap;
    gap: 12px;
    padding: 8px 12px;
}

.hl-rec-compact .hl-rec-info {
    flex: 1 1 0;
    flex-direction: row;
    align-items: baseline;
    gap: 12px;
    white-space: nowrap;
}

.hl-rec-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 700;
}

.hl-rec-compact .hl-rec-meta,
.hl-rec-name .hl-rec-meta {
    flex: 0 0 auto;
    font-size: .8125rem;
    color: var(--texte-2);
}

.hl-rec-player {
    flex: 1 1 240px;
    min-width: 0;
}

.hl-rec-audio {
    display: block;
    width: 100%;
    height: 40px;
}

.hl-rec-video summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 12px;
    cursor: pointer;
    font-weight: 700;
}

.hl-rec-video video {
    display: block;
    width: 100%;
    max-width: 480px;
    margin-top: 8px;
}

.hl-rec-name {
    max-width: 22rem;
}

.hl-rec-name .hl-rec-title {
    display: block;
}

.hl-rec-cell {
    min-width: 12rem;
}

@media (max-width: 575.98px) {
    .hl-rec-compact .hl-rec-row {
        flex-wrap: wrap;
    }

    .hl-rec-compact .hl-rec-info {
        flex-basis: 100%;
        white-space: normal;
    }

    .hl-rec-player {
        flex-basis: 0;
        flex-grow: 1;
    }
}

lod-file-visibility {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.hl-vis-error {
    color: var(--bs-danger, #b00020);
    font-size: .75rem;
    font-weight: 600;
}

tr.is-hidden-file > th,
tr.is-hidden-file > td:not(.hl-col-actions) {
    opacity: .6;
}

lod-progress .progress {
    height: 1.5rem;
}

lod-progress .progress-bar {
    color: var(--hl-black, #1A1A1A);
    background-color: var(--hl-yellow, #FCE200);
    transition: width 0.2s linear;
}

lod-progress .progress-bar-striped {
    background-image: linear-gradient(45deg, rgba(26, 26, 26, 0.25) 25%, transparent 25%, transparent 50%, rgba(26, 26, 26, 0.25) 50%, rgba(26, 26, 26, 0.25) 75%, transparent 75%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    lod-progress .progress-bar {
        transition: none;
        animation: none;
    }
}

[data-motion="reduced"] .hl-stage-page[data-turn] > .hl-stage-turn-in,
[data-motion="reduced"] .hl-stage-page[data-turn] > .hl-stage-turn-out {
    animation-duration: var(--hl-turn-ms) !important;
}

[data-motion="reduced"] .hl-stage-page[data-turn] > .hl-stage-turn-in::after {
    animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .hl-stage-page[data-turn] > .hl-stage-turn-in,
    .hl-stage-page[data-turn] > .hl-stage-turn-out {
        animation-name: hl-turn-fade;
        animation-duration: var(--hl-turn-ms) !important;
    }

    .hl-stage-page[data-turn] > .hl-stage-turn-out {
        animation-name: hl-stage-turn-fade-out;
    }

    .hl-stage-page[data-turn] > .hl-stage-turn-in::after {
        animation: none !important;
    }
}

.hl-stage-head .hl-stage-close {
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
}

lod-stage-player.hl-sp {
    display: block;
}

.hl-sp-panel {
    --hl-snd-btn: 44px;
    --hl-snd-gap: 6px;
    --hl-snd-label: .6rem;
    --hl-snd-ctl: 48px;
    --hl-snd-pill-h: 44px;
    width: min(600px, calc(100vw - 16px));
    overflow: visible;
}

.hl-sp-panel .hl-play {
    background: var(--hl-yellow);
    border-color: var(--hl-yellow);
    color: #1a1a1a;
}

.hl-sp-panel .hl-ctl:has(> .hl-repeat[hidden]) {
    display: none;
}

.hl-sp-panel .hl-player {
    gap: 10px;
}

.hl-sp-sourcebox {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.hl-sp-current {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 20ch;
    min-height: 44px;
}

.hl-sp-current[hidden] {
    display: none;
}

.hl-sp-panel .hl-controls-row .hl-pop,
.hl-sp-panel .hl-sp-source-wrap .hl-pop {
    top: auto;
    bottom: calc(100% + 8px);
}

.hl-sp-panel .hl-sp-source-wrap .hl-pop {
    left: 0;
    right: auto;
}

.hl-sp-source-pop {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 220px;
    max-width: 80vw;
}

.hl-sp-source {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    text-align: left;
}

.hl-sp-source:hover,
.hl-sp-source[aria-checked="true"] {
    background: #3a4245;
}

.hl-sp-source:focus-visible {
    outline: 3px solid var(--hl-yellow);
    outline-offset: 2px;
}

.hl-sp-source-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hl-sp-hidden {
    position: absolute;
    left: -9999px;
    top: 0;
    width: 900px;
    height: 600px;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
}

.hl-tab.is-absent {
    border-bottom-style: dotted;
}

.hl-tabs-dark .hl-tab.is-absent {
    border-bottom-color: #6b7478;
}

.hl-tab.is-absent > :not(.hl-tab-chosen) {
    opacity: .45;
}

.hl-tab-chosen {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 10px;
    height: 10px;
    box-sizing: border-box;
    border: 1px solid #fff;
    border-radius: 50%;
    background: var(--hl-danger, #d62828);
    box-shadow: 0 0 0 1px #1a1a1a;
}






@media (max-width: 767.98px) {
    .hl-stage-head {
        grid-template-columns: auto 1fr auto;
    }
    .hl-stage-left {
        display: contents;
    }
    .hl-tabs {
        grid-column: 1 / -1;
        grid-row: 2;
    }
    .hl-stage-logo {
        display: none;
    }
    .hl-stage-right {
        flex-wrap: nowrap;
        max-width: 100%;
        overflow-x: auto;
    }
    .hl-stage-bar .hl-stage-title {
        flex-basis: 100%;
    }
}

.hl-import-bar {
    position: sticky;
    bottom: 0;
    z-index: 100;
    padding: 0.5rem 0 calc(0.5rem + env(safe-area-inset-bottom));
    background: var(--bs-body-bg, #fff);
    border-top: 1px solid var(--hl-border, #1a1a1a);
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.12);
}
.hl-import-bar[hidden] {
    display: none;
}
.hl-import-bar .btn {
    min-height: 44px;
}
.hl-import-bar .progress {
    height: 1.25rem;
}
html:has(.hl-import-bar:not([hidden])) {
    scroll-padding-bottom: 12rem;
}
@media (max-width: 575.98px) {
    .hl-import-bar lod-progress p {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .hl-import-actions {
        flex-wrap: nowrap !important;
    }
    .hl-import-actions .btn {
        flex: 1 1 0;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

.hl-noire {
    font-size: 1.1em;
    line-height: 1;
    vertical-align: -0.15em;
    color: inherit;
}

.hl-filters {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    margin-bottom: 16px;
}

.hl-filters-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.hl-filter-selects {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

.hl-filter-field {
    min-width: 0;
}

.hl-filter-field .ts-wrapper.single .ts-control {
    min-height: 44px;
    cursor: pointer;
}

.hl-filter-nojs,
.hl-chips,
.hl-filters > .hl-btn {
    grid-column: 1 / -1;
    justify-self: start;
}

.hl-filters-toggle {
    display: none;
    min-height: 44px;
}

.hl-filters-badge:not(:empty) {
    min-width: 24px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--hl-black);
    color: var(--hl-white);
    font-weight: 700;
    text-align: center;
}

.hl-letters {
    display: flex;
    flex-wrap: nowrap;
    gap: 2px;
    overflow-x: auto;
    padding-bottom: 6px;
}

.hl-letter {
    flex: 0 0 auto;
    min-width: 28px;
    min-height: 28px;
    padding: 0 4px;
    border: 1px solid var(--hl-black);
    border-radius: var(--hl-radius);
    background: var(--hl-white);
    color: var(--hl-black);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}

.hl-letter[data-letter=""] {
    min-width: 44px;
}

.hl-letter[aria-pressed="true"] {
    background: var(--hl-black);
    color: var(--hl-white);
}

.hl-letter.is-empty {
    border-style: dashed;
    border-color: #767676;
    background: var(--hl-gray);
    color: #595959;
    cursor: default;
}

.hl-letter:focus-visible {
    outline: 3px solid var(--hl-black);
    outline-offset: 2px;
}

.hl-filter-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.hl-filter-option {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
}

.hl-filter-option-text {
    flex: 1 1 auto;
}

.hl-filter-option-count {
    font-weight: 700;
}

.hl-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hl-chips[hidden],
.hl-filters [hidden],
.hl-filter-empty[hidden] {
    display: none;
}

.hl-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 0 0 12px;
    border: 2px solid var(--hl-black);
    border-radius: 999px;
    background: var(--hl-gray);
    color: var(--hl-black);
    font-weight: 600;
}

.hl-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.hl-chip-remove:focus-visible {
    outline: 3px solid var(--hl-black);
    outline-offset: -3px;
}

.hl-filter-empty {
    padding: 16px 0;
    font-weight: 600;
}

@media (max-width: 767.98px) {
    .hl-filters-toggle {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .hl-filters-panel {
        display: none;
    }

    .hl-filters-panel.is-open {
        display: flex;
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .hl-filter-selects {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .hl-filters-panel {
        display: contents;
    }

    .hl-filter-selects {
        display: contents;
    }

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

    .hl-filter-search,
    .hl-letters {
        grid-column: 1 / -1;
    }
}

@media (min-width: 992px) {
    .hl-filters {
        grid-template-columns: minmax(200px, 1.3fr) repeat(3, minmax(0, 1fr));
    }

    .hl-filter-search {
        grid-column: auto;
    }
}

:root {
    --hl-z-bulkbar: 20;
    --hl-z-select-dropdown: 1050;
}

.hl-filters,
.hl-filters-panel,
.hl-filter-field {
    transform: none;
    filter: none;
    will-change: auto;
}

.hl-filter-field .ts-wrapper.dropdown-active,
.hl-filter-field .ts-wrapper.dropdown-active .ts-dropdown {
    z-index: var(--hl-z-select-dropdown);
}

.hl-filter-field .ts-dropdown {
    z-index: var(--hl-z-select-dropdown);
}

.hl-edit .hl-pill,
.hl-edit .badge,
.hl-edit .hl-auto-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    min-height: 0;
    height: 1.5rem;
    max-width: 14rem;
    padding: 0 .5rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.hl-edit .hl-pill .mdi,
.hl-edit .badge .mdi,
.hl-edit .hl-auto-badge .mdi {
    font-size: .9rem;
    line-height: 1;
}

.hl-edit .table > tbody > tr > th small.d-block {
    line-height: 1.2;
}

.hl-edit .table > tbody > tr > th > .badge,
.hl-edit .table > tbody > tr > th > .hl-auto-badge {
    margin: .125rem .25rem .125rem 0;
}

.hl-edit .hl-chips {
    gap: .25rem !important;
}

.hl-edit .hl-chips {
    align-items: center;
    flex-wrap: wrap;
}

.hl-edit .btn-group .btn:focus-visible {
    position: relative;
    z-index: 3;
    outline: 2px solid var(--hl-black, #1A1A1A);
    outline-offset: 1px;
    box-shadow: 0 0 0 4px var(--hl-yellow, #FCE200);
}

.hl-chip-group {
    flex-wrap: nowrap;
    vertical-align: middle;
}

.hl-chip-group > .btn {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    height: 1.5rem;
    min-height: 1.5rem;
    padding: 0 .5rem;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1;
}

.hl-chip-group > .hl-chip-split {
    min-width: 1.5rem;
    padding: 0 .375rem;
}

.hl-chip-group .mdi {
    font-size: .9rem;
    line-height: 1;
}

.hl-chip-menu {
    z-index: 1060;
    min-width: 12rem;
    padding: .25rem 0;
}

.hl-chip-menu form {
    margin: 0;
}

.hl-chip-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: .375rem;
    min-height: 2rem;
}

.hl-gen-option {
    margin-bottom: .5rem;
    padding: .5rem .5rem .5rem 2rem;
    border: 1px solid var(--hl-gray, #D9D8D6);
    border-radius: var(--hl-radius, 6px);
}

.hl-gen-option:has(input:checked) {
    border-color: var(--hl-black, #1A1A1A);
    box-shadow: inset 0 0 0 1px var(--hl-black, #1A1A1A);
}

.hl-gen-option .form-check-label {
    display: block;
    width: 100%;
    cursor: pointer;
}

.hl-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
}

.hl-note-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
    max-width: 100%;
}

.hl-note-label {
    font-size: .875em;
    line-height: 1.2;
    color: var(--texte-2);
    white-space: nowrap;
}

.hl-note-text {
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.hl-note-input {
    flex: 1 1 12rem;
    max-width: 20rem;
}

.hl-note-status {
    font-size: .75rem;
    font-weight: 600;
}

.hl-note-status.is-ok {
    color: var(--bs-success-text-emphasis, #0a3622);
}

.hl-note-status.is-ok::before {
    content: "\2713\00a0";
}

.hl-note-status.is-error {
    color: var(--bs-danger-text-emphasis, #58151c);
}

.hl-instrument {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
}

.hl-instrument-toggle {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    max-width: 14rem;
    min-height: 2rem;
}

.hl-instrument-toggle [data-instrument-label] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hl-instrument-toggle .hl-instrument-icon,
.hl-instrument-item .hl-instrument-icon {
    font-size: 1.25rem;
    line-height: 1;
}

.hl-instrument-menu {
    z-index: 1060;
    max-height: 18rem;
    overflow-y: auto;
}

.hl-instrument-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 2rem;
}

.hl-instrument-status.is-error {
    font-size: .75rem;
    font-weight: 600;
    color: var(--bs-danger-text-emphasis, #58151c);
}

.hl-edit .hl-pill {
    border: 0;
    background: var(--surface);
    color: var(--encre);
}

.hl-edit .hl-edit-table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--encre);
    --bs-table-hover-bg: var(--surface-3);
    --bs-table-hover-color: var(--encre);
    margin-bottom: 0;
}

.hl-edit .hl-edit-table > thead > tr > th {
    padding: .5rem .75rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--texte-2);
    border-bottom: 1px solid var(--gris);
    background: transparent;
    white-space: nowrap;
}

.hl-edit .hl-edit-table > tbody > tr > th,
.hl-edit .hl-edit-table > tbody > tr > td {
    padding: .75rem;
    border-bottom: 1px solid var(--gris-2);
}

.hl-edit .hl-section-card {
    margin-bottom: 1.5rem;
    border-top: 3px solid var(--group-main, var(--encre));
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}

.hl-edit .hl-section-card .table-responsive {
    border-radius: 0 0 8px 8px;
}

.hl-edit .hl-section-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    min-height: 52px;
    padding: .25rem .75rem;
    background: var(--gris);
    color: var(--encre);
    border-radius: 5px 5px 0 0;
}

.hl-edit .hl-section-title {
    display: flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    margin: 0;
    font-family: var(--hl-font-title);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--encre);
}

.hl-edit .hl-section-aside {
    margin-inline-start: auto;
    text-align: end;
}

.hl-edit .hl-section-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--texte-2);
    font-size: .875rem;
}

.hl-edit .hl-section-link:focus-visible {
    outline: 2px solid var(--encre);
    outline-offset: 1px;
}

.hl-edit .hl-is-empty > thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.hl-edit .hl-section-title .hl-pill {
    margin-inline-start: .25rem;
}

.hl-edit .hl-empty > td {
    color: var(--texte-2);
}

.hl-edit .hl-edit-table > tbody > tr > th {
    min-width: 0;
    max-width: 22rem;
    font-weight: 400;
}

.hl-file-name {
    display: block;
    overflow: hidden;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hl-file-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .125rem .5rem;
    margin-top: .125rem;
    font-size: .8125rem;
    line-height: 1.3;
    color: var(--texte-2);
}

.hl-file-meta .hl-note-text {
    color: var(--texte-2);
}

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

.hl-size-inline {
    display: none;
}

.hl-edit .hl-col-size {
    white-space: nowrap;
    font-size: .8125rem;
    color: var(--texte-2);
}

.hl-edit .hl-col-actions {
    width: 1%;
    white-space: nowrap;
}

.hl-edit .hl-col-instrument {
    width: 12rem;
    white-space: nowrap;
}

.hl-edit .hl-icon-only {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    min-height: 1.75rem;
    padding: .25rem;
    border: 0;
    border-radius: 6px;
    background: none;
    box-shadow: none;
    color: var(--texte-2);
    font-size: 1rem;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

.hl-edit .hl-icon-only .mdi {
    font-size: 1.25em;
    line-height: 1;
}

.hl-edit .hl-icon-only:hover,
.hl-edit .hl-icon-only:focus-visible {
    background: var(--surface-2);
    color: var(--encre);
}

.hl-edit .hl-icon-only:focus-visible {
    outline: 2px solid var(--encre);
    outline-offset: 1px;
}

.hl-edit .hl-icon-only[aria-pressed="true"] {
    color: var(--encre);
}

.hl-edit .hl-icon-only:disabled {
    opacity: .5;
}

.hl-edit .hl-act {
    min-width: 2rem;
    min-height: 2rem;
}

.hl-edit .hl-score-edit {
    min-width: 44px;
    min-height: 44px;
}

.hl-edit .hl-act-danger:hover,
.hl-edit .hl-act-danger:focus-visible {
    color: var(--danger-ink);
}

.hl-edit .hl-actions {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: .125rem;
}

.hl-edit .hl-act-host {
    display: inline-flex;
    margin: 0;
}

.hl-edit .hl-note-edit {
    flex: 0 0 auto;
    min-width: 1.75rem;
    min-height: 1.75rem;
    opacity: .6;
}

.hl-edit tr:hover .hl-note-edit,
.hl-edit tr:focus-within .hl-note-edit,
.hl-edit .hl-note-edit:hover,
.hl-edit .hl-note-edit:focus-visible {
    opacity: 1;
}

.hl-edit .hl-gen-open {
    min-width: 1.75rem;
    min-height: 1.75rem;
}

.hl-edit .hl-note {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .125rem;
    max-width: 100%;
}

.hl-edit .hl-instrument {
    display: block;
    width: 11rem;
}

.hl-edit .hl-instrument .ts-wrapper.hl-ts .ts-control {
    min-height: 2rem;
    padding: .125rem 1.5rem .125rem .375rem !important;
    flex-wrap: nowrap;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--encre);
    font-size: .9375rem;
    white-space: nowrap;
    overflow: hidden;
}

.hl-edit .hl-instrument .ts-wrapper.hl-ts .ts-control::after {
    content: "\25BE";
    position: absolute;
    inset-inline-end: .5rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--texte-2);
}

.hl-edit .hl-instrument .ts-wrapper.hl-ts .ts-control input {
    color: var(--encre);
}

.hl-edit .hl-instrument .ts-wrapper.hl-ts .ts-control:hover,
.hl-edit .hl-instrument .ts-wrapper.hl-ts.focus .ts-control,
.hl-edit .hl-instrument .ts-wrapper.hl-ts.dropdown-active .ts-control {
    border-color: var(--bordure-champ);
    background: var(--surface);
}

.hl-edit .hl-instrument .ts-wrapper.hl-ts.focus .ts-control {
    outline: 2px solid var(--encre);
    outline-offset: 1px;
}

.hl-edit .hl-instrument .hl-ts-item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hl-edit .hl-chip-group {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    vertical-align: middle;
    border: 1px solid var(--gris);
    border-radius: 999px;
    background: var(--surface);
}

.hl-edit .hl-chip-group:has(.btn-outline-danger) {
    border-color: var(--danger-ink);
}

.hl-edit .hl-chip-group > .btn {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    height: 1.5rem;
    min-height: 1.5rem;
    padding: 0 .5rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--encre);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1;
}

.hl-edit .hl-chip-group > .btn-outline-danger {
    color: var(--danger-ink);
}

.hl-edit .hl-chip-group > .btn:hover {
    background: var(--surface-2);
    color: var(--encre);
}

.hl-edit .hl-chip-group > .btn.disabled {
    opacity: 1;
    color: var(--texte-2);
}

.hl-edit .hl-chip-group > .btn:has(+ .hl-chip-split) {
    border-radius: 999px 0 0 999px;
}

.hl-edit .hl-chip-group > .hl-chip-split {
    min-width: 1.5rem;
    padding: 0 .375rem;
    border-left: 1px solid var(--gris);
    border-radius: 0 999px 999px 0;
}

@media (pointer: coarse), (hover: none) {
    .hl-edit .hl-icon-only::before {
        content: "";
        position: absolute;
        inset: -.5rem;
    }

    .hl-edit .hl-instrument .ts-wrapper.hl-ts .ts-control {
        min-height: 44px;
    }

    .hl-edit .hl-act-danger {
        color: var(--danger-ink);
    }
}

@media (max-width: 991.98px) {
    .hl-edit .hl-edit-table .hl-col-size {
        display: none;
    }

    .hl-edit .hl-size-inline {
        display: inline;
    }
}

@media (max-width: 767.98px) {
    .hl-edit .table-responsive {
        overflow-x: visible;
    }

    .hl-edit .hl-edit-table,
    .hl-edit .hl-edit-table > tbody,
    .hl-edit .hl-edit-table > tbody > tr,
    .hl-edit .hl-edit-table > tbody > tr > th,
    .hl-edit .hl-edit-table > tbody > tr > td {
        display: block;
        width: auto;
        max-width: none;
    }

    .hl-edit .hl-edit-table > thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .hl-edit .hl-edit-table > tbody > tr {
        margin-bottom: .75rem;
        padding: .5rem 0;
        border: 1px solid var(--gris);
        border-radius: 8px;
    }

    .hl-edit .hl-edit-table > tbody > tr > td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: .125rem;
        font-size: .75rem;
        font-weight: 600;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--texte-2);
    }

    .hl-edit .hl-edit-table > tbody > tr > th,
    .hl-edit .hl-edit-table > tbody > tr > td {
        padding: .375rem .75rem;
        border-bottom: 0;
    }

    .hl-edit .hl-empty > td::before {
        display: none;
    }
}

.hl-member-invit {
    align-items: center;
}

.hl-invit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--gris);
    color: var(--encre);
    font-size: 1.5rem;
}

.hl-invit-address {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hl-invit-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hl-invit-side {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    font-size: .875rem;
}

.hl-invit-role {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 9rem;
}

.hl-invit-deadline {
    min-width: 11rem;
}

.hl-invit-expired .hl-invit-address,
.hl-invit-expired .hl-invit-role > span:first-child {
    color: var(--texte-2);
}

.hl-invit-expired .hl-invit-state {
    border-style: dashed;
}

.hl-invit-count {
    min-height: 0;
    padding: 2px 10px;
}

.hl-invit-actions {
    display: inline-flex;
    gap: .25rem;
    min-width: 4.5rem;
    justify-content: flex-end;
}

.hl-member-invit .hl-icon-only {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    min-height: 2rem;
    padding: .25rem;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--texte-2);
    cursor: pointer;
}

.hl-member-invit .hl-icon-only .mdi {
    font-size: 1.25rem;
    line-height: 1;
}

.hl-member-invit .hl-icon-only:hover,
.hl-member-invit .hl-icon-only:focus-visible {
    background: var(--surface-2);
    color: var(--encre);
}

.hl-member-invit .hl-invit-revoke:hover,
.hl-member-invit .hl-invit-revoke:focus-visible {
    color: var(--danger-ink);
}

.hl-member-invit .hl-icon-only:focus-visible {
    outline: 2px solid var(--encre);
    outline-offset: 1px;
}

@media (pointer: coarse) {
    .hl-member-invit .hl-icon-only {
        min-width: 44px;
        min-height: 44px;
    }
}

@media (max-width: 767.98px) {
    .hl-invit-side {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .hl-invit-role,
    .hl-invit-deadline,
    .hl-invit-actions {
        min-width: 0;
    }

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

    .hl-invit-meta {
        white-space: normal;
    }
}

.hl-tralala-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: 0 14px;
    background: var(--surface);
    color: var(--encre);
    border: 1.5px solid var(--encre);
    border-radius: 22px;
    font-weight: 700;
}

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

.hl-group-balance {
    flex: 0 0 auto;
    min-width: 0;
}

.hl-group-balance .hl-tralala-pill {
    white-space: nowrap;
    min-height: 0;
    min-width: 0;
    padding: 2px 8px;
    border-width: 1px;
    border-radius: 10px;
    font-size: .75rem;
    line-height: 1;
    font-weight: 700;
    text-decoration: none;
}

.hl-group-balance .hl-tralala-pill:hover .hl-tralala-amount {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hl-tralala-pill:focus-visible,
.hl-tralala-pagelink:focus-visible,
.hl-tralala-dialog button:focus-visible,
.hl-tralala-dialog input:focus-visible,
.hl-tralala-dialog select:focus-visible {
    outline: 3px solid var(--encre);
    outline-offset: 2px;
}

.hl-tralala-amount {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.hl-tralala-symbol {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask: url("/static/img/tralala/helolami-tralala-currentcolor.svg") center / contain no-repeat;
    mask: url("/static/img/tralala/helolami-tralala-currentcolor.svg") center / contain no-repeat;
}

.hl-tralala-body {
    text-align: left;
}

.hl-tralala-big {
    font-size: 2rem;
    font-weight: 700;
    margin: 4px 0;
}

.hl-tralala-group,
.hl-tralala-hint {
    margin: 0 0 4px;
    color: var(--encre);
}

.hl-tralala-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.hl-tralala-actions .hl-btn,
.hl-tralala-filters .hl-btn,
.hl-tralala-pager .hl-btn {
    min-height: 44px;
}

.hl-tralala-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    margin-bottom: 16px;
    background: var(--surface-2);
    border: 1px solid var(--gris-2);
    border-left: 6px solid var(--group-main);
    border-radius: var(--hl-radius, 10px);
}

.hl-tralala-hero-icon {
    flex: 0 0 auto;
    font-size: 44px;
    line-height: 1;
    color: var(--encre);
}

.hl-tralala-hero-text {
    min-width: 0;
}

.hl-tralala-hero-text p {
    margin: 0;
}

.hl-tralala-hero-group {
    font-weight: 700;
    overflow-wrap: anywhere;
}

.hl-tralala-hero-label {
    font-size: .875rem;
}

.hl-tralala-hero-amount {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.15;
}

.hl-tralala-hero-amount .hl-tralala-symbol {
    width: .8em;
    height: .8em;
}

.hl-tralala-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.hl-tralala-tile {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: 64px;
    padding: 12px;
    text-align: left;
    background: var(--surface);
    color: var(--encre);
    border: 1.5px solid var(--bordure-champ);
    border-radius: var(--hl-radius, 10px);
    cursor: pointer;
}

.hl-tralala-tile:hover {
    background: var(--surface-2);
    border-color: var(--encre);
}

.hl-tralala-tile-icon {
    flex: 0 0 auto;
    font-size: 28px;
    line-height: 1;
}

.hl-tralala-tile-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.hl-tralala-tile-label {
    font-size: 1rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.hl-tralala-tile-hint {
    font-size: .8125rem;
    overflow-wrap: anywhere;
}

.hl-tralala-tile--primary {
    grid-column: 1 / -1;
    align-items: center;
    background: var(--hl-yellow);
    color: #1a1a1a;
    border-color: #1a1a1a;
}

.hl-tralala-tile--primary:hover {
    background: #e6cf00;
    border-color: #1a1a1a;
}

.hl-tralala-tile--primary .hl-tralala-tile-icon {
    font-size: 36px;
}

.hl-tralala-tile--primary .hl-tralala-tile-label {
    font-size: 1.125rem;
}

.hl-tralala-dialog .hl-tralala-tile--primary:focus-visible {
    outline-color: #1a1a1a;
}

.hl-dialog-foot .hl-tralala-pagelink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    margin-right: auto;
    color: var(--encre);
    text-decoration: underline;
}

.hl-tralala-pagelink:hover {
    text-decoration: none;
}

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

    .hl-tralala-hero-amount {
        font-size: 1.875rem;
    }
}

.hl-tralala-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 12px;
}

.hl-tralala-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}

.hl-tralala-field input,
.hl-tralala-field select {
    min-height: 44px;
}

.hl-tralala-table th,
.hl-tralala-table td {
    vertical-align: middle;
}

.hl-tralala-table caption {
    caption-side: top;
    font-weight: 700;
    color: var(--encre);
}

.hl-tralala-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 12px 0;
}

.hl-tralala-status {
    padding: 0 16px;
    min-height: 0;
}

.hl-tralala-status:not(:empty) {
    padding: 8px 16px;
}

.hl-tralala-status.is-error,
.hl-tralala-alert {
    color: var(--encre);
    border-left: 4px solid var(--hl-black);
    padding-left: 8px;
    font-weight: 700;
}

.hl-tralala-card {
    border: 1px solid var(--bordure-champ);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
    background: var(--surface-2);
}

.hl-tralala-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.hl-tralala-gauge {
    width: 100%;
    height: 14px;
}

.hl-tralala-packline {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.hl-tralala-pack {
    display: flex;
    gap: 12px;
    align-items: center;
    min-height: 44px;
    flex: 1;
}

.hl-tralala-spirit {
    margin-top: 16px;
    padding: 12px;
    border-left: 4px solid var(--hl-yellow);
    background: var(--surface-2);
}

.hl-tralala-detail:focus {
    outline: 2px solid var(--encre);
}

.hl-countin-wrap {
    flex: 0 0 44px;
}

.hl-countin-button {
    position: relative;
}

.hl-countin-button.is-active {
    background: var(--vert);
    border-width: 2.5px;
}

.hl-countin-button.is-counting {
    background: var(--hl-yellow);
    color: #1a1a1a;
}

.hl-countin-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--encre);
    color: var(--surface);
    font-size: .75rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

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

.hl-countin-badge:empty {
    display: none;
}

.hl-countin-pop {
    right: 0;
    width: min(300px, 92vw);
    align-items: stretch;
}

.hl-countin-set {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    border: 0;
}

.hl-countin-note[hidden] {
    display: none;
}

.hl-countin-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.hl-countin-choice {
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px;
    border: 2px solid #1A1A1A;
    border-radius: 8px;
    background: #fff;
    color: #1A1A1A;
    font-weight: 600;
    cursor: pointer;
}

.hl-countin-choice[aria-pressed="true"] {
    background: #FCE200;
    color: #1A1A1A;
}

.hl-countin-choice:focus-visible {
    outline: 3px solid #1A1A1A;
    outline-offset: 2px;
}

.hl-countin-set[hidden] {
    display: none;
}

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

.hl-countin-display {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.hl-countin-display.is-active {
    display: flex;
}

.hl-countin-digit {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.2em;
    min-height: 2.2em;
    border: 4px solid var(--encre);
    border-radius: 50%;
    background: var(--hl-yellow);
    color: #1a1a1a;
    color: #1a1a1a;
    font-size: clamp(4rem, 22vmin, 11rem);
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .35);
}

@media (prefers-reduced-motion: no-preference) {
    .hl-countin-digit {
        animation: hl-countin-pop .35s ease-out;
    }
}

@keyframes hl-countin-pop {
    from {
        transform: scale(.7);
        opacity: .4;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

[data-motion="reduced"] .hl-countin-digit {
    animation: none;
}

lod-score-editor {
    display: grid;
    grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) minmax(220px, 320px);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "head head head" "top top top" "tools canvas props" "status status status";
    height: calc(100vh - 72px);
    min-height: 480px;
    background: var(--surface-2);
    color: var(--encre);
}

.hl-score-head {
    grid-area: head;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    background: var(--encre);
    color: var(--surface);
}

.hl-score-head a,
.hl-score-head .hl-score-name {
    color: inherit;
}

.hl-score-name {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    flex: 1 1 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hl-score-dirty {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--hl-yellow);
    color: #1a1a1a;
    color: #1a1a1a;
    font-size: .875rem;
    font-weight: 700;
}

.hl-score-dirty[hidden] {
    display: none;
}

.hl-score-top {
    grid-area: top;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--bordure-champ);
}

.hl-score-top-sep {
    width: 1px;
    align-self: stretch;
    min-height: 28px;
    background: var(--bordure-champ);
}

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

.hl-score-button:hover:not(:disabled) {
    background: var(--vert);
}

.hl-score-button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.hl-score-button.is-primary {
    background: var(--hl-yellow);
    color: #1a1a1a;
    border-color: var(--jaune);
    color: #1a1a1a;
    font-weight: 700;
}

.hl-score-button.is-primary:hover:not(:disabled) {
    background: var(--encre);
    border-color: var(--encre);
    color: var(--surface);
}

.hl-score-head .hl-score-button {
    background: transparent;
    border-color: var(--surface);
    color: var(--surface);
}

lod-score-toolbar {
    grid-area: tools;
    overflow-y: auto;
    padding: 12px;
    background: var(--surface);
    border-right: 1px solid var(--bordure-champ);
}

.hl-score-toolgroup {
    margin-bottom: 14px;
}

.hl-score-toolgroup-title {
    display: block;
    margin-bottom: 6px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.hl-score-toolgroup-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.hl-score-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--bordure-champ);
    border-radius: var(--hl-radius, 6px);
    background: var(--surface);
    color: var(--encre);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}

.hl-score-tool:hover:not(:disabled) {
    background: var(--vert);
}

.hl-score-tool[aria-pressed="true"] {
    background: var(--hl-yellow);
    color: #1a1a1a;
    border-color: var(--encre);
    color: #1a1a1a;
    box-shadow: inset 0 0 0 2px var(--encre);
}

.hl-score-tool:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.hl-score-tool-glyph {
    font-family: "Noto Music", "Segoe UI Symbol", "Apple Symbols", sans-serif;
    font-size: 1.5rem;
}

lod-score-canvas {
    grid-area: canvas;
    min-width: 0;
    min-height: 0;
    display: flex;
}

.hl-score-scroll {
    flex: 1;
    overflow: auto;
    background: #ffffff;
    color: #1a1a1a;
    padding: 12px;
    cursor: crosshair;
}

.hl-score-scroll.is-select {
    cursor: default;
}

.hl-score-stage {
    position: relative;
    width: max-content;
    min-width: 100%;
}

.hl-score-surface {
    position: relative;
}

.hl-score-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hl-score-selection {
    position: absolute;
    border: 2px solid var(--encre);
    border-radius: 4px;
    background: rgba(252, 226, 0, .35);
}

.hl-score-selection.is-measure {
    background: rgba(252, 226, 0, .18);
}

.hl-score-selection[hidden],
.hl-score-ghost[hidden] {
    display: none;
}

.hl-score-ghost {
    position: absolute;
    border-radius: 50%;
    background: rgba(26, 26, 26, .55);
    border: 1px dashed #1a1a1a;
}

.hl-score-ghost-label {
    position: absolute;
    left: 100%;
    top: -2px;
    margin-left: 4px;
    padding: 0 4px;
    border-radius: 3px;
    background: #1a1a1a;
    color: #ffffff;
    font-size: .75rem;
    white-space: nowrap;
}

.hl-score-flag {
    position: absolute;
    padding: 0 6px;
    border-radius: 3px;
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
    background: #1a1a1a;
    color: #ffffff;
}

.hl-score-flag.is-overfull {
    background: #b3261e;
}

.hl-score-flag.is-incomplete {
    background: #1a1a1a;
}

lod-score-props {
    grid-area: props;
    overflow-y: auto;
    padding: 12px;
    background: var(--surface);
    border-left: 1px solid var(--bordure-champ);
}

.hl-score-props-section {
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--gris);
}

.hl-score-props-title {
    margin: 0 0 8px;
    font-size: 1rem;
    font-weight: 700;
}

.hl-score-props-info {
    margin: 0 0 8px;
    font-size: .875rem;
}

.hl-score-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}

.hl-score-field-label {
    font-size: .875rem;
    font-weight: 600;
}

.hl-score-parts {
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
}

.hl-score-part {
    margin-bottom: 12px;
    padding: 8px;
    border: 1px solid var(--gris);
    border-radius: var(--hl-radius, 6px);
    background: var(--surface-3);
}

.hl-score-prop-button {
    min-height: 44px;
}

.hl-score-status {
    grid-area: status;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    padding: 6px 16px;
    min-height: 36px;
    background: var(--surface);
    border-top: 1px solid var(--bordure-champ);
    font-size: .875rem;
}

.hl-score-status-message {
    flex: 1 1 240px;
}

.hl-score-readonly {
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--gris);
    font-weight: 700;
}

.hl-score-shortcuts {
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    overflow: auto;
    padding: 20px;
    border: 2px solid var(--encre);
    border-radius: var(--hl-radius, 6px);
    background: var(--surface);
    color: var(--encre);
}

.hl-score-shortcuts::backdrop {
    background: rgba(26, 26, 26, .6);
}

.hl-score-shortcuts table {
    width: 100%;
    margin-bottom: 12px;
    border-collapse: collapse;
}

.hl-score-shortcuts th,
.hl-score-shortcuts td {
    padding: 4px 8px;
    border-bottom: 1px solid var(--gris);
    text-align: left;
}

.hl-score-shortcuts kbd {
    padding: 1px 6px;
    border: 1px solid var(--bordure-champ);
    border-radius: 4px;
    background: var(--surface-2);
    color: var(--encre);
}

.hl-score-saveas-fields {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

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

@media (max-width: 900px) {
    lod-score-editor {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto minmax(360px, 1fr) auto auto;
        grid-template-areas: "head" "top" "tools" "canvas" "props" "status";
        height: auto;
    }

    lod-score-toolbar,
    lod-score-props {
        border: 0;
        border-bottom: 1px solid var(--bordure-champ);
    }

    .hl-score-toolgroup {
        display: inline-block;
        margin-right: 12px;
    }
}

.hl-sounds {
    --hl-snd-btn: 44px;
    --hl-snd-gap: 6px;
    --hl-snd-label: .6rem;
    --hl-snd-ctl: 48px;
    --hl-snd-pill-h: 44px;
}

.hl-sounds .hl-card-head {
    flex-wrap: nowrap;
    justify-content: flex-start;
    min-width: 0;
}

.hl-sounds .hl-card-title,
.hl-sounds .hl-card-count {
    flex: 0 0 auto;
    white-space: nowrap;
}

.hl-sounds .hl-pills {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: var(--hl-snd-gap);
    overflow: visible;
}

.hl-sounds .hl-pill,
.hl-pills-more-button {
    flex: 0 0 auto;
    min-height: var(--hl-snd-pill-h);
    padding: 0 8px;
    font-size: .75rem;
}

.hl-sounds .hl-pill-text {
    max-width: 11ch;
}

.hl-pills-more {
    position: relative;
    flex: 0 0 auto;
}

.hl-pills-more[hidden],
.hl-pills-menu[hidden] {
    display: none;
}

.hl-pills-more-button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--bordure-champ);
    border-radius: 6px;
    background: var(--surface);
    color: var(--encre);
    font-weight: 600;
    cursor: pointer;
}

.hl-pills-more-button[aria-expanded="true"] {
    border: 1.5px solid var(--encre);
}

.hl-pills-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 45;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 12rem;
    max-width: min(20rem, 86vw);
    padding: 8px;
    border: 1.5px solid var(--encre);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

.hl-pills-menu .hl-pill {
    width: 100%;
    justify-content: flex-start;
}

.hl-pills-menu .hl-pill-text {
    max-width: none;
}

.hl-sounds .hl-pill:focus-visible,
.hl-pills-more-button:focus-visible,
.hl-ctl .hl-repeat:focus-visible,
.hl-ctl .hl-play:focus-visible {
    outline: 3px solid var(--encre);
    outline-offset: 2px;
}

.hl-controls-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 6px 8px;
    min-width: 0;
}

.hl-controls-row > .hl-ctrls {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 2px;
    width: auto;
}

.hl-ctl,
.hl-pop-wrap.hl-volume-wrap,
.hl-pop-wrap.hl-countin-wrap,
.hl-pop-wrap.hl-mix-wrap {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: var(--hl-snd-ctl);
    min-width: var(--hl-snd-ctl);
}

.hl-ctl > .hl-repeat,
.hl-ctl > .hl-play,
.hl-pop-wrap > .hl-repeat {
    flex: 0 0 auto;
    width: var(--hl-snd-btn);
    min-width: var(--hl-snd-btn);
    height: var(--hl-snd-btn);
    max-width: none;
}

.hl-ctl > .hl-play {
    flex: 0 0 auto;
    aspect-ratio: 1;
    width: 44px;
    min-width: 44px;
    height: 44px;
    border-radius: 50%;
}

.hl-ctl > .hl-repeat[hidden] {
    display: inline-flex;
    visibility: hidden;
}

.hl-ctl:has(> .hl-repeat[hidden]) {
    visibility: hidden;
}

.hl-ctl-label {
    display: block;
    font-size: var(--hl-snd-label);
    line-height: 1.1;
    text-align: center;
    color: var(--texte-2);
    white-space: nowrap;
    overflow: visible;
}

.hl-ctl.hl-tempo-ctl {
    width: auto;
    min-width: 0;
}

.hl-ctl.hl-tempo-ctl .hl-tempo-group {
    width: auto;
    flex-wrap: nowrap;
    height: var(--hl-snd-btn);
    border-width: 1px;
    border-radius: 6px;
}

.hl-ctl.hl-tempo-ctl .hl-tempo-btn {
    flex: 0 0 44px;
    min-height: 44px;
    padding: 0;
}

.hl-ctl.hl-tempo-ctl .hl-tempo-value-wrap {
    flex: 0 0 auto;
}

.hl-ctl.hl-tempo-ctl .hl-tempo-value {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    flex-direction: column;
    gap: 2px;
    min-height: 44px;
    padding: 0 8px;
}

.hl-ctl:has(> .hl-more) {
    display: none;
}

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

.hl-controls-row > .hl-tempo-block {
    flex: 1 1 200px;
    margin: 0;
    padding: 0;
    border: 0;
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    align-items: start;
    gap: 2px 8px;
    min-width: 0;
}

.hl-tempo-block .hl-tempo-head {
    display: contents;
}

.hl-tempo-block .hl-tempo-title {
    font-size: .7rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
}

.hl-tempo-block .hl-countin-wrap {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.hl-tempo-block .hl-countin-button {
    width: var(--hl-snd-btn);
    min-width: var(--hl-snd-btn);
    height: var(--hl-snd-btn);
}

.hl-tempo-block .hl-tempo-group {
    width: auto;
    flex-wrap: nowrap;
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    border-width: 1px;
    border-radius: 6px;
}

.hl-tempo-block .hl-tempo-btn,
.hl-tempo-block .hl-tempo-value {
    min-height: 44px;
    padding: 0 4px;
}

.hl-tempo-block .hl-tempo-btn {
    flex: 0 0 44px;
    font-size: 1rem;
}

.hl-tempo-block .hl-tempo-value {
    border-left-width: 1px;
    border-right-width: 1px;
}

.hl-tempo-block .hl-tempo-number {
    font-size: 1rem;
}

.hl-tempo-block .hl-tempo-value {
    flex-wrap: nowrap;
    gap: 4px;
}

.hl-tempo-block .hl-tempo-unit {
    font-size: .7rem;
}

.hl-tempo-block .hl-tempo-caption {
    display: none;
}

.hl-controls-row .hl-countin-pop {
    right: 0;
}

.hl-controls-row .hl-pop {
    max-width: 86vw;
}

@media (max-width: 1199.98px) {
    .hl-sounds .hl-card-head {
        display: flex;
    }

    .hl-sounds .hl-card-title,
    .hl-sounds .hl-card-count {
        display: none;
    }

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

@media (min-width: 1200px) {
    .hl-controls-row .hl-pop {
        bottom: auto;
        top: calc(100% + 8px);
    }
}

.hl-tool-dock {
    position: fixed;
    bottom: max(96px, calc(env(safe-area-inset-bottom) + 88px));
    left: max(8px, env(safe-area-inset-left));
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    max-width: calc(100vw - 16px);
    pointer-events: none;
}

.hl-tool-dock > * {
    pointer-events: auto;
}

.hl-tool-dock .hl-tool-panel.hl-tool-wide {
    position: static;
    order: 2;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 14px;
    width: min(780px, calc(100vw - 16px));
    max-height: min(46dvh, 320px);
    padding: 6px 10px;
}

.hl-tool-wide .hl-tool-head {
    flex: 0 0 auto;
    gap: 10px;
}

.hl-tool-wide .hl-tool-title {
    font-size: 1rem;
}

.hl-tool-wide .hl-tool-row {
    flex: 0 1 auto;
    gap: 4px 8px;
}

.hl-tool-wide .hl-tool-label {
    flex: 0 0 auto;
    font-size: .85rem;
}

.hl-tool-wide .hl-tool-range {
    flex: 0 1 110px;
}

.hl-tool-wide .hl-tool-hint,
.hl-tool-wide .hl-tool-error,
.hl-tool-wide .hl-tuner-strings {
    flex: 1 1 100%;
    font-size: .8rem;
}

.hl-tool-wide .hl-tool-main {
    flex: 0 0 auto;
}

.hl-stage .hl-pupitre-overlay {
    position: absolute;
    top: 8px;
    right: 16px;
    z-index: 5;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

@media (max-width: 767.98px) {
    .hl-pupitre-overlay .hl-icon-button span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
}

.hl-pupitre-overlay .hl-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    min-height: 44px;
    padding: 0 20px;
    border: 2px solid #FCE200;
    border-radius: 999px;
    background: #1A1A1A;
    color: #fff;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
}

.hl-pupitre-overlay .hl-icon-button .lodi {
    font-size: 1.4rem;
    color: #fff;
}

.hl-pupitre-overlay .hl-icon-button:hover {
    background: #1A1A1A;
    color: #fff;
}

.hl-pupitre-overlay .hl-icon-button:focus-visible {
    outline: 3px solid #FCE200;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px #1A1A1A;
}

.hl-logo-compact,
.hl-more-nav,
.hl-more-toggle {
    display: none;
}

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

.hl-more-menu {
    display: flex;
    align-items: center;
    gap: 12px;
    position: static;
    inset: auto;
    transform: none;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    min-width: 0;
}

.hl-more-menu .dropdown,
.hl-more-menu .hl-lang {
    margin: 0 !important;
}

@media (max-width: 1199.98px) {
    .hl-header-bar {
        flex-wrap: nowrap;
        gap: 6px;
        padding: 8px 12px;
        min-height: 64px;
    }

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

    .hl-logo-baseline {
        display: none;
    }

    .hl-logo-compact {
        display: block;
        height: 18px;
        width: auto;
        max-width: 100%;
    }

    .hl-logo-compact.hl-on-dark {
        display: none;
    }

    [data-theme="dark"] .hl-logo-compact.hl-on-light,
    [data-theme="stage"] .hl-logo-compact.hl-on-light {
        display: none;
    }

    [data-theme="dark"] .hl-logo-compact.hl-on-dark,
    [data-theme="stage"] .hl-logo-compact.hl-on-dark {
        display: block;
    }

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

    .hl-group-sub {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        border: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .hl-group {
        gap: 0;
        flex: 0 0 auto;
    }

    .hl-spacer {
        flex: 1 1 0;
        min-width: 0;
    }

    .hl-avatar {
        width: 44px;
        height: 44px;
    }

    .hl-group-balance {
        margin-inline: 4px;
    }

    .hl-group-balance .hl-tralala-pill {
        padding: 2px 6px;
        font-size: .75rem;
    }

    .hl-nav {
        margin-left: 0;
        gap: 0;
    }

    .hl-nav a {
        justify-content: center;
        min-width: 44px;
        padding: 10px;
    }

    .hl-more-toggle {
        display: inline-flex;
    }

    .hl-more-menu {
        display: none;
        position: absolute;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 12px;
        min-width: 220px;
        border: 1px solid var(--gris-2);
        background: var(--surface);
        border-radius: 6px;
    }

    .hl-more-menu.show {
        display: flex;
    }

    .hl-more-menu .dropdown,
    .hl-more-menu .hl-lang {
        width: 100%;
    }

    .hl-more-menu .dropdown > .btn {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 479.98px) {
    .hl-nav {
        display: none;
    }

    .hl-more-nav {
        display: flex;
        flex-direction: column;
    }

    .hl-more-nav a {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 44px;
        padding: 8px 12px;
        color: var(--encre);
        text-decoration: none;
        border-radius: 6px;
    }

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

.hl-score-band {
    position: absolute;
    border: 1px dashed var(--encre);
    background: rgba(26, 26, 26, .08);
}

.hl-score-band[hidden] {
    display: none;
}

.hl-score-status-count {
    margin: 0;
    font-weight: 600;
}

.hl-score-props-section select.form-select,
.hl-score-props-section input.form-control {
    min-height: 44px;
}

.hl-sounds-float {
    --hl-snd-btn: 44px;
    --hl-snd-gap: 6px;
    --hl-snd-label: .6rem;
    --hl-snd-ctl: 48px;
    --hl-snd-pill-h: 44px;
    --hl-float-margin: 16px;
    position: absolute;
    right: var(--hl-float-margin);
    bottom: 4px;
    z-index: 6;
    box-sizing: border-box;
    width: min(680px, calc(100% - 2 * var(--hl-float-margin)));
    max-height: calc(100% - 2 * var(--hl-float-margin));
    overflow: visible;
    padding: 8px 12px 12px;
    border: 1px solid var(--bordure-champ);
    border-radius: 8px;
    background: var(--surface);
    color: var(--encre);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
    transform: scale(.8);
    transform-origin: bottom right;
}

.hl-sounds-float[hidden] {
    display: none;
}

.hl-float-open {
    position: absolute;
    right: 16px;
    bottom: 4px;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    min-height: 44px;
    padding: 0 20px;
    border: 2px solid #FCE200;
    border-radius: 999px;
    background: #1A1A1A;
    color: #fff;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
    cursor: pointer;
}

.hl-float-open .mdi {
    font-size: 1.4rem;
    color: #fff;
}

.hl-float-open[hidden] {
    display: none;
}

.hl-float-open:focus-visible {
    outline: 3px solid #FCE200;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px #1A1A1A;
}

.hl-sounds-float .hl-float-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 4px;
}

.hl-sounds-float .hl-float-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--encre);
}

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

.hl-sounds-float .hl-float-close:hover {
    background: var(--surface-2);
}

.hl-sounds-float .hl-float-close:focus-visible,
.hl-sounds-float .hl-ctl .hl-repeat:focus-visible,
.hl-sounds-float .hl-ctl .hl-play:focus-visible {
    outline: 3px solid var(--encre);
    outline-offset: 2px;
}

.hl-sounds-float .hl-controls-row .hl-pop {
    top: auto;
    bottom: calc(100% + 8px);
}

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

@media (max-width: 767.98px) {
    .hl-sounds-float {
        --hl-float-margin: 8px;
        padding: 8px;
        overflow-y: auto;
    }
}
.hl-song-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 0;
    margin: 0;
    font-size: 0.9rem;
    color: var(--texte-2);
}

.hl-song-meta-item + .hl-song-meta-item::before {
    content: "·";
    margin: 0 0.5rem;
}

.hl-tab-group {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: stretch;
    border-radius: 6px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 100% 3px;
}

.hl-tabs .hl-tab-group > .hl-tab,
.hl-tabs .hl-tab-group > .hl-tab:hover,
.hl-tabs .hl-tab-group > .hl-tab[aria-selected="true"],
.hl-tabs .hl-tab-group > .hl-tab[aria-pressed="true"],
.hl-tabs .hl-tab-group > .hl-tab.is-absent {
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
}

.hl-tab-kind {
    display: inline-flex;
    align-items: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 6px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.hl-tabs-dark .hl-tab-group {
    color: #e8e3d8;
}

.hl-tabs-dark .hl-tab-group:has(> .hl-tab:hover, > .hl-tab-kind:not([aria-disabled="true"]):hover) {
    background-color: #3a4246;
}

.hl-tabs-dark .hl-tab-group:has(> .hl-tab[aria-selected="true"], > .hl-tab[aria-pressed="true"]) {
    background-color: var(--hl-yellow);
    color: #1a1a1a;
    box-shadow: inset 0 -3px 0 #1a1a1a;
}

.hl-tabs-dark .hl-tab-group:has(> .is-absent) {
    background-image: repeating-linear-gradient(90deg, #6b7478 0 3px, transparent 3px 6px);
}

.hl-tabs-light .hl-tab-group {
    border-radius: 5px;
    background-color: var(--hl-white, #fff);
    color: var(--hl-black, #1a1a1a);
    box-shadow: inset 0 -3px 0 var(--hl-gray, #d9d8d6), inset 0 0 0 1px var(--hl-gray, #d9d8d6);
}

.hl-tabs-light .hl-tab-group:has(> .hl-tab:hover, > .hl-tab-kind:not([aria-disabled="true"]):hover) {
    background-color: var(--hl-gray, #d9d8d6);
}

.hl-tabs-light .hl-tab-group:has(> .hl-tab[aria-selected="true"]) {
    background-color: var(--hl-black, #1a1a1a);
    color: var(--hl-white, #fff);
    box-shadow: inset 0 -3px 0 var(--hl-yellow), inset 0 0 0 1px var(--hl-black, #1a1a1a);
}

.hl-tab-kind[hidden] {
    display: none;
}

.hl-tab-kind[aria-disabled="true"] {
    opacity: .85;
}

.hl-tab-kind:focus-visible,
.hl-tab-menu-item:focus-visible {
    outline: 3px solid var(--hl-yellow);
    outline-offset: 2px;
    box-shadow: none;
}

.hl-tab-caret {
    font-size: 1rem;
    line-height: 1;
}

.hl-tab-menu {
    position: fixed;
    z-index: 1080;
    min-width: 140px;
    margin: 0;
    padding: 4px;
    list-style: none;
    border: 1px solid var(--hl-gray, #d9d8d6);
    border-radius: 6px;
    background: var(--hl-white, #fff);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
}

.hl-tab-menu[hidden] {
    display: none;
}

.hl-tab-menu-item {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--hl-black, #1a1a1a);
    font-weight: 600;
    text-align: left;
}

.hl-tab-menu-item:hover {
    background: var(--hl-gray, #d9d8d6);
}

.hl-tab-menu-item[aria-checked="true"] {
    background: var(--hl-yellow);
}

.hl-score .hl-stage {
    position: relative;
}

.hl-score-controls {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 4px;
    border: 1px solid var(--bordure-champ);
    border-radius: var(--hl-radius);
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    pointer-events: auto;
}

@supports (backdrop-filter: blur(4px)) {
    .hl-score-controls {
        background: color-mix(in srgb, var(--surface) 72%, transparent);
        backdrop-filter: blur(6px);
    }
}

.hl-score-controls .hl-zoom,
.hl-score-controls .hl-notes-tools {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
}

.hl-score-controls .hl-notes-tools[hidden] {
    display: none;
}

.hl-score-controls .hl-notes-tools {
    padding-top: 6px;
    border-top: 1px solid var(--gris);
}

.hl-score-controls .hl-notes-tools:not(:has(.hl-tool:not([hidden]))) {
    border-top: 0;
    padding-top: 0;
}

.hl-score-controls .hl-zoom-value {
    min-width: 44px;
    color: var(--encre);
    font-weight: 600;
}

.hl-score-controls .hl-tool {
    background: var(--surface);
    border: 1px solid var(--bordure-champ);
    color: var(--encre);
}

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

.hl-score-controls .hl-tool[aria-pressed="true"] {
    background: var(--hl-yellow);
    border-color: var(--hl-black);
    color: var(--hl-black);
}

.hl-score-controls .hl-tool:focus-visible {
    outline: 3px solid var(--hl-black);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--hl-yellow);
}

.hl-score-controls .hl-notes-group {
    position: absolute;
    top: 6px;
    left: calc(100% + 10px);
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 4px;
    border: 1px solid var(--bordure-champ);
    border-radius: var(--hl-radius);
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

.hl-score-controls .hl-notes-group[hidden] {
    display: none;
}

.hl-score-controls .hl-notes-status {
    max-width: 52px;
    text-align: center;
    overflow-wrap: anywhere;
    color: var(--encre);
}

[data-contrast="high"] .hl-score-controls,
[data-contrast="high"] .hl-score-controls .hl-notes-group {
    background: var(--surface);
    border: 2px solid var(--hl-black);
    backdrop-filter: none;
}

@media (max-width: 767.98px) {
    .hl-score-controls .hl-notes-group {
        position: static;
        margin-top: 4px;
    }
}

.hl-search-field {
    position: relative;
    width: 100%;
}

.hl-search-field .mdi {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    font-size: 1.25rem;
    line-height: 1;
    color: currentColor;
    opacity: 0.7;
    pointer-events: none;
}

.hl-search-field .form-control {
    width: 100%;
    min-height: 44px;
    padding-left: 2.75rem;
    border: 1px solid #9a9a9a;
    border-radius: 999px;
    background-color: #fff;
}

.hl-search-field .form-control::placeholder {
    opacity: 0.7;
}

.hl-search-field .form-control:focus-visible {
    outline: 3px solid var(--hl-black);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--hl-yellow);
}

[data-theme="dark"] .hl-search-field .form-control,
[data-theme="stage"] .hl-search-field .form-control {
    border-color: #444444;
}

.hl-set-choice {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 48px 40px;
}

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

.hl-set-choice-sub {
    margin: 4px 0 0;
    color: var(--texte-2);
}

.hl-set-finder-tools {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

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

.hl-kind-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 0 18px;
    border: 1.5px solid var(--hl-black);
    border-radius: 999px;
    background: var(--surface);
    color: var(--encre);
    font-weight: 700;
}

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

.hl-kind-btn.is-active {
    background: var(--hl-black);
    color: #fff;
}

.hl-kind-btn:focus-visible {
    outline: 3px solid var(--hl-black);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--hl-yellow);
}

.hl-set-group {
    margin-bottom: 28px;
}

.hl-set-cards {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
}

.hl-set-card {
    display: flex;
    flex-direction: column;
    border: 1.5px solid var(--gris);
    border-radius: 12px;
    background: var(--surface);
}

.hl-set-card[hidden],
.hl-set-group[hidden],
.hl-set-empty[hidden] {
    display: none;
}

.hl-set-card-link {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 44px;
    padding: 14px 16px;
    color: var(--encre);
    text-decoration: none;
    border-radius: 12px;
}

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

.hl-set-card-link:focus-visible {
    outline: 3px solid var(--hl-black);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--hl-yellow);
}

.hl-set-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    min-width: 64px;
    padding: 8px 6px;
    border-radius: 10px;
    background: var(--hl-yellow);
    color: #1a1a1a;
    font-size: .8125rem;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.15;
}

.hl-set-date strong {
    font-size: 1.75rem;
    line-height: 1.1;
}

.hl-set-card.is-past .hl-set-date {
    background: #d9d8d6;
}

.hl-set-card-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.hl-set-card-name {
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

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

.hl-set-card .hl-set-alert {
    margin: 0;
    padding: 8px 16px 12px;
}

.hl-set-card .hl-link-button {
    min-height: 44px;
    min-width: 44px;
    padding: 0 8px;
}

.hl-set-empty {
    padding: 16px;
    border-radius: 8px;
    background: #d9d8d6;
    color: #1a1a1a;
    font-weight: 700;
}

[data-theme="dark"] .hl-kind-btn,
[data-theme="stage"] .hl-kind-btn {
    border-color: #fff;
}

[data-theme="dark"] .hl-kind-btn.is-active,
[data-theme="stage"] .hl-kind-btn.is-active {
    background: #fff;
    color: #1a1a1a;
}

[data-theme="dark"] .hl-set-card.is-past .hl-set-date,
[data-theme="stage"] .hl-set-card.is-past .hl-set-date {
    background: #444444;
    color: #fff;
}

[data-theme="dark"] .hl-set-card .hl-set-alert,
[data-theme="stage"] .hl-set-card .hl-set-alert {
    color: #ffb59c;
}

[data-theme="dark"] .hl-set-empty,
[data-theme="stage"] .hl-set-empty {
    background: #2a2a2a;
    color: #fff;
}

[data-contrast="high"] .hl-set-card {
    border-color: currentColor;
    border-width: 2px;
}

[data-contrast="high"] .hl-set-card.is-past .hl-set-date {
    background: #fff;
    color: #000;
    outline: 2px solid #000;
}

@media (max-width: 767.98px) {
    .hl-set-choice {
        padding: 16px;
    }

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

.hl-met-pills {
    justify-content: center;
}

.hl-met-pop .hl-beat-dot {
    width: 36px;
    height: 36px;
    border-color: var(--encre);
    color: var(--encre);
    background: transparent;
    transform: none;
    text-decoration: none;
}

.hl-met-pop .hl-beat-dot.is-first {
    border-style: solid;
    border-width: 3px;
}

.hl-met-pop .hl-beat-dot.is-on {
    background: #FCE200;
    border-color: #1A1A1A;
    color: #1A1A1A;
}

.hl-met-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.hl-met-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1 1 auto;
}

.hl-met-dots {
    flex: 0 0 44px;
    padding: 0;
    font-size: 1.4rem;
    line-height: 1;
}

.hl-met-dots[aria-expanded="true"] {
    background: #FCE200;
}

.hl-met-sub {
    gap: 10px;
}

.hl-met-sub .hl-tool-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hl-met-sub .hl-tool-check {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
}

.hl-met-sub .hl-tool-check input {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
}

.hl-met-sub .hl-tool-input {
    min-height: 44px;
}

.hl-sp-panel .hl-pills {
    position: relative;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: var(--hl-snd-gap);
    overflow: visible;
}

.hl-sp-panel .hl-pill {
    flex: 0 0 auto;
    min-height: var(--hl-snd-pill-h);
    padding: 0 8px;
    font-size: .75rem;
}

.hl-sp-panel .hl-pill-text {
    max-width: 11ch;
}

lod-sound-player.hl-sp-panel[hidden] {
    display: none;
}

html.is-pupitre .hl-float-open {
    position: static;
    flex: 0 0 auto;
    box-shadow: none;
    min-width: 44px;
    min-height: 44px;
}

.hl-stage-list {
    z-index: 40;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 100vw);
    max-height: none;
    padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) 16px;
    border-width: 0 0 0 1px;
    border-radius: 0;
    background: #15191b;
    gap: 14px;
}

.hl-stage-list-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.hl-stage-list-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
}

.hl-stage-list-state {
    margin: 4px 0 0;
    font-size: .85rem;
    color: #b9bfc1;
}

.hl-stage-list-close {
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 16px;
    border: 0;
    border-radius: 999px;
    background: #f1f1ef;
    color: #1a1a1a;
    font-weight: 600;
    cursor: pointer;
}

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

.hl-stage-list-item {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 14px;
    border: 0;
    border-radius: 10px;
    background: #23292b;
    color: #e8e3d8;
    text-align: left;
    cursor: pointer;
}

.hl-stage-list-item:hover:not(:disabled) {
    background: #2f3739;
}

.hl-stage-list-item.is-current,
.hl-stage-list-item.is-current:hover {
    background: var(--hl-yellow);
    color: #1a1a1a;
}

.hl-stage-list-item:disabled {
    color: #7d8588;
    cursor: not-allowed;
}

.hl-stage-list-close:focus-visible,
.hl-stage-list-item:focus-visible {
    outline: 3px solid var(--hl-yellow);
    outline-offset: 2px;
}

.hl-stage-list-item.is-current:focus-visible {
    outline-color: #fff;
}

.hl-stage-list-num {
    flex: 0 0 auto;
    min-width: 2ch;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
}

.hl-stage-list-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.hl-stage-list-name {
    font-weight: 700;
}

.hl-stage-list-detail {
    font-size: .8rem;
    opacity: .85;
}

.hl-tuner-panel,
.hl-tool-dock .hl-tool-panel.hl-tuner-panel {
    position: fixed;
    top: calc(80px + var(--float-dy, 0px));
    left: calc(50% - min(46vw, 11rem) + var(--float-dx, 0px));
    bottom: auto;
    z-index: 1080;
    gap: 10px;
    width: min(92vw, 22rem);
    max-height: calc(100dvh - 96px);
    overflow: visible;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 24px;
    background: #1f2426;
    color: #f2efe6;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}

.hl-tuner-handle {
    position: absolute;
    top: -24px;
    left: 50%;
    z-index: 0;
    width: 64px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    transform: translateX(-50%);
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.hl-tuner-handle::after {
    content: "";
    position: absolute;
    top: 19px;
    left: 12px;
    right: 12px;
    height: 5px;
    border-radius: 3px;
    background: var(--hl-black);
    border: 1px solid var(--hl-white);
    pointer-events: none;
}

.hl-tuner-handle:hover::after {
    background: var(--hl-black);
}

.hl-tuner-icon {
    flex: none;
    font-size: 20px;
    line-height: 1;
    color: inherit;
    pointer-events: none;
}

.hl-tuner-panel.is-dragging,
.hl-tuner-panel.is-dragging .hl-tuner-handle {
    cursor: grabbing;
}

.hl-tuner-handle:focus-visible {
    outline: 3px solid var(--hl-white);
    outline-offset: -3px;
}

.hl-tool-dock:has(.hl-tuner-panel:not([hidden])) {
    z-index: 1080;
}

.hl-tuner-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -8px -8px 0;
    padding: 0;
    pointer-events: none;
}

.hl-tuner-top > * {
    pointer-events: auto;
}

.hl-tool-panel .hl-tuner-close {
    box-sizing: border-box;
    flex: 0 0 auto;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    margin-left: auto;
    padding: 0;
    border: 1px solid var(--tb-ctl-border, rgba(255, 255, 255, .16));
    border-radius: 50%;
    background: var(--tb-ctl, transparent);
    color: inherit;
    font-size: 1.3rem;
    line-height: 1;
}

.hl-tool-panel .hl-tuner-close:hover {
    background: var(--tb-ctl-hover, rgba(255, 255, 255, .12));
}

.hl-tool-panel .hl-tuner-close:focus-visible {
    outline: 3px solid var(--hl-yellow);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--hl-black);
}

.hl-tuner-mic,
.hl-tuner-inst {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 44px;
    min-height: 44px;
    box-sizing: border-box;
    padding: 4px 10px;
    border: 2px solid #6b7478;
    border-radius: 999px;
    background: #2c3336;
    color: #e8e3d8;
    font: inherit;
    font-size: 1.3rem;
    cursor: pointer;
}

.hl-tuner-mic[aria-pressed="true"] {
    border: 3px solid #1e5a32;
    background: var(--hl-green);
    color: #1a1a1a;
}

.hl-tuner-mic[aria-pressed="false"] {
    border-style: dashed;
}

.hl-tuner-inst:focus-visible,
.hl-tuner-mic:focus-visible,
.hl-tuner-option:focus-visible {
    outline: 3px solid var(--hl-yellow);
    outline-offset: 2px;
}

.hl-tuner-pop {
    z-index: 1090;
    box-sizing: border-box;
    margin: 0;
    padding: 6px;
    border: 2px solid var(--hl-yellow);
    border-radius: var(--hl-radius);
    background: #1f2426;
    color: #e8e3d8;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .5);
}

.hl-tuner-pop[hidden] {
    display: none;
}

.hl-tuner-list {
    min-width: 15rem;
    list-style: none;
}

.hl-tuner-option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    box-sizing: border-box;
    padding: 4px 10px;
    border-radius: var(--hl-radius);
    cursor: pointer;
}

.hl-tuner-option i {
    flex: 0 0 auto;
    font-size: 1.4rem;
}

.hl-tuner-option:hover {
    background: #2c3336;
}

.hl-tuner-option[aria-selected="true"] {
    background: #e8e3d8;
    color: #1a1a1a;
    font-weight: 700;
}

.hl-tuner-dial-cents {
    min-height: 1.2em;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.2;
}

.hl-tuner-dial {
    position: relative;
    width: min(100%, 210px);
    margin: 0 auto;
    padding-bottom: 20px;
    --hl-tuner-angle: 0deg;
}

.hl-tuner-arc {
    position: relative;
    aspect-ratio: 2 / 1;
    overflow: hidden;
}

.hl-tuner-arc::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: conic-gradient(from -90deg, #4a5256 0 81deg, var(--hl-green) 81deg 99deg, #4a5256 99deg 180deg, transparent 180deg);
    -webkit-mask: radial-gradient(circle, transparent 66%, #000 67%);
    mask: radial-gradient(circle, transparent 66%, #000 67%);
}

.hl-tuner-needle-dial {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 5px;
    height: 94%;
    margin-left: -2px;
    border-radius: 3px 3px 0 0;
    background: var(--hl-yellow);
    transform-origin: 50% 100%;
    transform: rotate(var(--hl-tuner-angle));
}

.hl-tuner-dial[data-state="idle"] .hl-tuner-needle-dial {
    opacity: .5;
}

.hl-tuner-dial-center {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
    text-align: center;
}

.hl-tuner-dial-note {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
}

.hl-tuner-dial-freq {
    min-height: 1.2em;
    font-size: .75rem;
    line-height: 1.2;
    color: #c9d1cc;
}

.hl-tuner-bound {
    position: absolute;
    bottom: 0;
    font-size: .8rem;
    color: #c9d1cc;
}

.hl-tuner-bound-low {
    left: 0;
}

.hl-tuner-bound-high {
    right: 0;
}

.hl-tuner-banner {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.hl-tuner-settings {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 12px;
}

.hl-tuner-settings > * {
    margin: 0;
}

.hl-tuner-settings .hl-tool-row {
    flex-wrap: wrap;
    gap: 6px;
}

.hl-tuner-settings .hl-tool-input,
.hl-tuner-settings .hl-icon-button,
.hl-tuner-settings .hl-tool-button {
    min-height: 44px;
    box-sizing: border-box;
}

.hl-tuner-settings .hl-icon-button {
    min-width: 44px;
}

.hl-tuner-settings :focus-visible {
    outline: 3px solid var(--hl-yellow);
    outline-offset: 2px;
}

.hl-tuner-play {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid #6b7478;
    border-radius: 999px;
    background: #2c3336;
    color: #e8e3d8;
    font-size: 1.3rem;
    cursor: pointer;
}

.hl-tuner-play[hidden] {
    display: none;
}

.hl-tuner-play:focus-visible,
.hl-tuner-micpick:focus-visible,
.hl-tuner-mics-allow:focus-visible {
    outline: 3px solid var(--hl-yellow);
    outline-offset: 2px;
}

.hl-tuner-a4box {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.hl-tuner-a4box .hl-tool-input[type="number"] {
    width: 5.8rem;
    padding-right: 2rem;
    text-align: right;
    appearance: textfield;
    -moz-appearance: textfield;
}

.hl-tuner-a4unit {
    position: absolute;
    right: 8px;
    font-size: .75rem;
    color: #c9d1cc;
    pointer-events: none;
}

.hl-tuner-ref .hl-tool-stepper {
    flex-wrap: nowrap;
    gap: 2px;
}

.hl-tuner-settings .hl-tuner-ref .hl-icon-button {
    min-width: 44px;
    padding: 0;
    border-color: transparent;
    background: transparent;
}

.hl-tuner-micgroup {
    display: inline-flex;
    align-items: center;
}

.hl-tuner-micpick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin-left: -6px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #e8e3d8;
    font-size: 1.3rem;
    cursor: pointer;
}

.hl-tuner-micpick[hidden] {
    display: none;
}

.hl-tuner-mics {
    min-width: 16rem;
    padding: 0 0 6px;
    border: 1px solid #3a4246;
    background: #15191b;
}

.hl-tuner-mics-title {
    margin-bottom: 4px;
    padding: 8px 12px;
    border-left: 3px solid var(--hl-yellow);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-variant-caps: all-small-caps;
    color: #c9d1cc;
}

.hl-tuner-miclist {
    margin: 0;
    padding: 0 6px;
    list-style: none;
}

.hl-tuner-micoption[aria-selected="true"] {
    background: #2c3336;
    color: #e8e3d8;
    font-weight: 700;
}

.hl-tuner-micmark {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
}

.hl-tuner-micoption[aria-selected="true"] .hl-tuner-micmark {
    background: var(--hl-yellow);
    transform: rotate(45deg) scale(.8);
}

.hl-tuner-mics-hint {
    margin: 6px 12px;
    font-size: .75rem;
    color: #c9d1cc;
}

.hl-tuner-mics-allow {
    display: block;
    min-height: 44px;
    margin: 0 12px;
    padding: 4px 10px;
    border: 1px solid #6b7478;
    border-radius: var(--hl-radius);
    background: #2c3336;
    color: #e8e3d8;
    font: inherit;
    font-size: .85rem;
    cursor: pointer;
}

.hl-tuner-mics-allow[hidden],
.hl-tuner-mics-hint[hidden] {
    display: none;
}

.hl-tuner-dial {
    --hl-tuner-color: #8a9399;
}

.hl-tuner-dial[data-state="low"] {
    --hl-tuner-color: #6cb4ff;
}

.hl-tuner-dial[data-state="high"] {
    --hl-tuner-color: #ff9a62;
}

.hl-tuner-dial[data-state="ok"] {
    --hl-tuner-color: var(--hl-green);
}

.hl-tuner-dial[data-state] .hl-tuner-needle-dial {
    background: var(--hl-tuner-color);
}

.hl-tuner-dial[data-state] .hl-tuner-dial-note,
.hl-tuner-dial[data-state] .hl-tuner-dial-cents {
    color: var(--hl-tuner-color);
}

.hl-tuner-dial[data-state="idle"] .hl-tuner-dial-note {
    opacity: .6;
}

.hl-tuner-dial[data-state="ok"] .hl-tuner-arc::before {
    background: conic-gradient(from -90deg, #4a5256 0 81deg, var(--hl-green) 81deg 99deg, #4a5256 99deg 180deg, transparent 180deg);
    outline: 3px solid var(--hl-green);
}

.hl-tuner-dial[data-state="low"] .hl-tuner-arc::before {
    background: conic-gradient(from -90deg, var(--hl-tuner-color) 0 81deg, #4a5256 81deg 99deg, #4a5256 99deg 180deg, transparent 180deg);
}

.hl-tuner-dial[data-state="high"] .hl-tuner-arc::before {
    background: conic-gradient(from -90deg, #4a5256 0 81deg, #4a5256 81deg 99deg, var(--hl-tuner-color) 99deg 180deg, transparent 180deg);
}

.hl-tuner-dial-cents {
    font-size: .95rem;
}

@media (max-width: 575px) {
    .hl-tuner-panel {
        width: min(92vw, 22rem);
    }
}

.hl-tuner-strings-head {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #c9d1cc;
}

.hl-tuner-panel .hl-tuner-strings {
    display: grid;
    grid-template-columns: repeat(var(--hl-tuner-cols, 4), minmax(0, 1fr));
    gap: 5px;
}

.hl-tuner-panel .hl-tuner-string {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 52px;
    min-height: 44px;
    padding: 2px;
    border-radius: var(--hl-radius);
    border: 2px solid #6b7478;
    transition: none;
}

.hl-tuner-string-name {
    font-weight: 700;
    font-size: .95rem;
    line-height: 1.1;
}

.hl-tuner-string-sci {
    font-size: .7rem;
    line-height: 1.1;
}

.hl-tuner-string-check {
    position: absolute;
    top: 0;
    right: 2px;
    font-size: .7rem;
    line-height: 1;
    display: none;
    color: #1e5a32;
}

.hl-tuner-panel .hl-tuner-string.is-tuned {
    border: 3px solid #1e5a32;
    background: var(--hl-green);
    color: #1a1a1a;
}

.hl-tuner-string.is-tuned .hl-tuner-string-check {
    display: inline;
}

.hl-tuner-panel .hl-tuner-string[aria-pressed="true"] {
    box-shadow: inset 0 -5px 0 var(--hl-yellow);
}

.hl-tuner-panel .hl-tuner-string.is-near {
    border: 3px solid #fce200;
    box-shadow: 0 0 0 2px #1a1a1a, 0 0 10px 2px rgba(252, 226, 0, .55);
    transform: scale(1.06);
    z-index: 1;
    font-weight: 700;
}

.hl-tuner-panel .hl-tuner-string.is-near::after {
    content: "";
    position: absolute;
    bottom: -7px;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -5px;
    border: 5px solid transparent;
    border-bottom-color: #fce200;
    border-top: 0;
}

.hl-tuner-panel .hl-tuner-string.is-tuned.is-near {
    border: 3px solid #fce200;
    background: #cddcd5;
    box-shadow: 0 0 0 2px #1e5a32, 0 0 10px 2px rgba(252, 226, 0, .55);
}

.hl-tuner-panel .hl-tuner-string.is-tuned.is-near[aria-pressed="true"] {
    box-shadow: 0 0 0 2px #1e5a32, 0 0 10px 2px rgba(252, 226, 0, .55), inset 0 -5px 0 #1e5a32;
}

.hl-tuner-ref .hl-tool-label {
    flex: 0 0 auto;
}

@media (prefers-reduced-motion: no-preference) {
    .hl-tuner-needle-dial {
        transition: transform .15s ease-out;
    }
}

.hl-set-edit-banner {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem 1rem;
    background: var(--hl-yellow);
    color: #1a1a1a;
    color: #1a1a1a;
    border-bottom: 2px solid #1a1a1a;
}
.hl-set-edit-banner-text {
    display: flex;
    flex-direction: column;
}
.hl-set-edit-banner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.hl-set-edit-banner .hl-btn {
    min-height: 44px;
    color: #1a1a1a;
    border-color: #1a1a1a;
}
.hl-set-edit-banner .hl-btn-dark {
    background: #1a1a1a;
    color: #fff;
}
.hl-set-edit {
    max-width: 880px;
}
.hl-set-edit-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    list-style: none;
    padding: 0;
    margin: 0 0 .5rem;
}
.hl-set-edit-crumbs li + li::before {
    content: "›";
    margin-right: .5rem;
}
.hl-set-edit-section,
.hl-set-edit-danger {
    background: var(--surface);
    color: var(--encre);
    border: 1px solid var(--bordure-champ);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}
.hl-set-edit-danger {
    border: 2px solid var(--danger-ink);
}
.hl-set-edit-danger .hl-set-edit-title {
    color: var(--danger-ink);
}
.hl-set-edit-title {
    font-family: var(--hl-font-title);
    font-size: 1.25rem;
    margin-bottom: .75rem;
}
.hl-set-edit-lead {
    color: var(--texte-2);
}
.hl-set-edit-entries {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .75rem;
}
.hl-set-edit-card {
    background: var(--surface-2);
    border: 1px solid var(--bordure-champ);
    border-radius: 10px;
    padding: .75rem;
}
.hl-set-edit-card.is-dragging {
    opacity: .5;
}
.hl-set-edit-card.is-open {
    border-color: var(--encre);
}
.hl-set-edit-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}
.hl-set-edit-tools {
    display: inline-flex;
    gap: .25rem;
}
.hl-set-edit-tools .hl-handle,
.hl-set-edit-tools .hl-icon-button {
    min-width: 44px;
    min-height: 44px;
}
.hl-set-edit-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--encre);
    color: var(--surface);
    font-weight: 700;
}
.hl-set-edit-text {
    display: flex;
    flex-direction: column;
    flex: 1 1 12rem;
}
.hl-set-edit-song {
    font-size: 1.05rem;
}
.hl-set-edit-text small {
    color: var(--texte-2);
}
.hl-set-edit-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    list-style: none;
    padding: 0;
    margin: .5rem 0;
}
.hl-set-edit-pill {
    background: var(--jaune-clair);
    color: var(--encre);
    border: 1px solid var(--bordure-champ);
    border-radius: 999px;
    padding: .15rem .65rem;
    font-size: .875rem;
}
.hl-set-edit-pill[hidden] {
    display: none;
}
.hl-set-edit-card-actions,
.hl-set-edit-actions,
.hl-set-edit-bulk {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}
.hl-set-edit-card-actions .hl-btn,
.hl-set-edit-actions .hl-btn,
.hl-set-edit-bulk .hl-btn,
.hl-set-edit-danger .hl-btn {
    min-height: 44px;
}
.hl-set-edit-warning {
    margin: .5rem 0 0;
    padding: .5rem .75rem;
    background: var(--jaune-clair);
    color: var(--encre);
    border-left: 4px solid var(--encre);
    border-radius: 4px;
}
.hl-set-edit-warning[hidden] {
    display: none;
}
.hl-set-edit-panel {
    margin-top: .75rem;
    padding: .75rem;
    background: var(--vert-clair);
    border: 1px solid var(--bordure-champ);
    border-radius: 8px;
}
.hl-set-edit-panel[hidden] {
    display: none;
}
.hl-set-edit-panel-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    margin-bottom: .5rem;
}
.hl-set-edit-panel-title {
    font-size: 1rem;
    margin: 0;
}
.hl-set-edit-group {
    border: 0;
    padding: 0;
    margin: 0 0 .5rem;
}
.hl-set-edit-group legend {
    font-size: .9rem;
    font-weight: 700;
    color: var(--texte-2);
    margin-bottom: .25rem;
}
.hl-set-edit-check {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 44px;
    padding: .25rem .5rem;
    border-radius: 6px;
    cursor: pointer;
}
.hl-set-edit-check:hover {
    background: var(--gris-2);
}
.hl-set-edit-check input {
    width: 24px;
    height: 24px;
    flex: none;
    accent-color: var(--encre);
}
.hl-set-edit-check input:focus-visible,
.hl-set-edit-card button:focus-visible {
    outline: 3px solid var(--encre);
    outline-offset: 2px;
}
.hl-set-edit-check em {
    font-style: normal;
    font-size: .8rem;
    background: var(--gris);
    color: var(--encre);
    border-radius: 4px;
    padding: 0 .4rem;
}
.hl-set-edit-retention {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}
[data-theme="dark"] .hl-set-edit-banner,
[data-theme="stage"] .hl-set-edit-banner {
    background: var(--hl-yellow);
    color: #1a1a1a;
    color: #1a1a1a;
}
[data-theme="dark"] .hl-set-edit-number,
[data-theme="stage"] .hl-set-edit-number {
    background: var(--hl-yellow);
    color: #1a1a1a;
    color: #1a1a1a;
}
[data-contrast="high"] .hl-set-edit-section,
[data-contrast="high"] .hl-set-edit-danger,
[data-contrast="high"] .hl-set-edit-card,
[data-contrast="high"] .hl-set-edit-panel,
[data-contrast="high"] .hl-set-edit-pill {
    border: 2px solid var(--encre);
}
[data-contrast="high"] .hl-set-edit-text small,
[data-contrast="high"] .hl-set-edit-lead,
[data-contrast="high"] .hl-set-edit-group legend {
    color: var(--encre);
}
@media (max-width: 575.98px) {
    .hl-set-edit-banner {
        position: static;
    }
    .hl-set-edit-banner-actions .hl-btn,
    .hl-set-edit-card-actions .hl-btn {
        flex: 1 1 100%;
    }
    .hl-set-edit-section,
    .hl-set-edit-danger {
        padding: .75rem;
    }
}

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

.hl-set-place-menu {
    position: relative;
    display: inline-block;
}

.hl-set-place-toggle,
.hl-set-place-list a,
.hl-set-place-list button {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border: 0;
    background: transparent;
    color: var(--encre);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.hl-set-place-toggle {
    width: auto;
    gap: 4px;
    border: 1px solid var(--gris);
    border-radius: 8px;
    background: #fff;
}

.hl-set-place-list {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 30;
    min-width: 220px;
    max-width: calc(100vw - 24px);
    margin: 4px 0 0;
    padding: 4px 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--gris);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}

.hl-set-place-list[hidden] {
    display: none;
}

.hl-set-place-list a:hover,
.hl-set-place-list button:hover {
    background: var(--gris);
}

.hl-set-place-toggle:focus-visible,
.hl-set-place-list a:focus-visible,
.hl-set-place-list button:focus-visible {
    outline: 3px solid var(--encre);
    outline-offset: -3px;
    box-shadow: 0 0 0 2px #FCE200;
}

[data-theme="dark"] .hl-set-place-toggle,
[data-theme="dark"] .hl-set-place-list {
    background: #1A1A1A;
    border-color: #D9D8D6;
}

[data-theme="dark"] .hl-set-place-toggle,
[data-theme="dark"] .hl-set-place-list a,
[data-theme="dark"] .hl-set-place-list button {
    color: #fff;
}

[data-theme="dark"] .hl-set-place-list a:hover,
[data-theme="dark"] .hl-set-place-list button:hover {
    background: #333;
}

[data-contrast="high"] .hl-set-place-toggle,
[data-contrast="high"] .hl-set-place-list {
    border: 2px solid currentColor;
    box-shadow: none;
}

@media (max-width: 575.98px) {
    .hl-set-place-menu {
        position: static;
    }

    .hl-set-place-list {
        left: 12px;
        right: 12px;
        max-width: none;
    }
}

.hl-stage-audio-only {
    max-width: 520px;
    margin: 12vh auto 0;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    background: transparent;
    color: #ffffff;
}

.hl-stage-audio-only .mdi-music-note {
    font-size: 6rem;
    line-height: 1;
    color: var(--jaune);
}

.hl-stage-audio-only h2 {
    margin: 0;
    font-size: 1.75rem;
    color: #ffffff;
}

.hl-stage-audio-detail,
.hl-stage-audio-text {
    margin: 0;
    color: #ffffff;
}

.hl-stage-audio-open {
    min-height: 44px;
    padding: 8px 24px;
    border: 2px solid var(--jaune);
    border-radius: 999px;
    background: #1a1a1a;
    color: #ffffff;
    font-weight: 600;
    cursor: pointer;
}

.hl-stage-audio-open:focus-visible {
    outline: 3px solid var(--jaune);
    outline-offset: 2px;
}

.hl-invit-host,
.hl-invit-host lod-invitation-list,
.hl-invit-host .hl-invit-rows {
    display: contents;
    list-style: none;
}

.hl-song-titlerow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 20px;
    max-width: 100%;
}

.hl-tempo-bar {
    --tb-bg: #f4f4f2;
    --tb-border: var(--hl-gray);
    --tb-fg: var(--hl-black);
    --tb-ctl: #ffffff;
    --tb-ctl-hover: #ebebe8;
    --tb-ctl-border: #b9b8b5;
    --tb-value: var(--hl-black);
    --tb-muted: #4a4a48;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 10px;
    box-sizing: border-box;
    max-width: 100%;
    padding: 4px 10px;
    border: 1px solid var(--tb-border);
    border-radius: 14px;
    background: var(--tb-bg);
    color: var(--tb-fg);
    font-size: .9rem;
}

.hl-tempo-bar.hl-tempo-dark {
    --tb-bg: rgba(255, 255, 255, .06);
    --tb-border: rgba(255, 255, 255, .16);
    --tb-fg: #f2efe6;
    --tb-ctl: rgba(255, 255, 255, .08);
    --tb-ctl-hover: rgba(255, 255, 255, .16);
    --tb-ctl-border: rgba(255, 255, 255, .22);
    --tb-value: var(--hl-yellow);
    --tb-muted: #d6d2c6;
}

.hl-tempo-bar .hl-tempo-set {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding-right: 10px;
    border-right: 1px solid var(--tb-border);
}

.hl-tempo-bar .hl-tempo-row {
    display: flex;
    align-items: center;
    gap: 8px;
    order: 1;
}

.hl-tempo-bar .hl-tempo-label {
    order: 2;
    margin: 0;
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tb-muted);
}

.hl-tempo-bar .hl-tempo-field {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    min-height: 36px;
    padding: 0 4px;
}

.hl-tempo-bar .hl-tempo-input {
    box-sizing: border-box;
    width: 3rem;
    min-height: 36px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--tb-value);
    font: inherit;
    font-size: 1.15rem;
    font-weight: 700;
    text-align: right;
    appearance: textfield;
    -moz-appearance: textfield;
}

.hl-tempo-bar .hl-tempo-input::-webkit-outer-spin-button,
.hl-tempo-bar .hl-tempo-input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.hl-tempo-bar .hl-tempo-input[aria-invalid="true"] {
    outline: 2px solid #ff6b6b;
    color: var(--tb-fg);
}

.hl-tempo-bar .hl-tempo-unit {
    align-self: center;
    font-size: .8rem;
    font-weight: 600;
    color: var(--tb-muted);
    pointer-events: none;
}

.hl-tempo-bar .hl-tempo-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 0;
    border: 1px solid var(--tb-ctl-border);
    border-radius: 50%;
    background: var(--tb-ctl);
    color: var(--tb-fg);
    font-size: 1.15rem;
    cursor: pointer;
}

.hl-tempo-bar .hl-tempo-btn,
.hl-tempo-bar .hl-countin-button {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    box-sizing: border-box;
    width: 68px;
    min-width: 68px;
    height: 46px;
    min-height: 46px;
    padding: 2px 4px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: var(--tb-ctl);
    color: var(--tb-fg);
    font: inherit;
    font-size: .8rem;
    line-height: 1.1;
    white-space: nowrap;
    cursor: pointer;
}

.hl-tempo-bar .hl-tempo-btn > i,
.hl-tempo-bar .hl-countin-button > i {
    font-size: 1.15rem;
    line-height: 1;
}

.hl-tempo-bar .hl-tempo-btn > span,
.hl-tempo-bar .hl-countin-button > span.hl-countin-text {
    display: block;
    text-align: center;
}

.hl-tempo-bar .hl-countin-button {
    position: relative;
}

.hl-tempo-bar .hl-tempo-btn > .mdi-chevron-down {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: .9rem;
    opacity: .8;
}

.hl-tempo-bar .hl-tempo-btn,
.hl-tempo-bar .hl-tempo-tools,
.hl-tempo-bar .hl-countin-wrap {
    flex: 0 0 auto;
}

.hl-tempo-bar .hl-tempo-tools > .hl-tempo-btn {
    position: relative;
}

.hl-tempo-bar .hl-tempo-step:hover,
.hl-tempo-bar .hl-tempo-btn:hover,
.hl-tempo-bar .hl-countin-button:hover,
.hl-tempo-bar .hl-tempo-item:hover:not(:disabled) {
    background: var(--tb-ctl-hover);
}

.hl-tempo-bar .hl-tempo-btn[aria-expanded="true"],
.hl-tempo-bar .hl-countin-button[aria-expanded="true"],
.hl-tempo-bar .hl-countin-button.is-active,
.hl-tempo-bar .hl-tempo-item[aria-expanded="true"] {
    border-color: var(--hl-yellow);
    background: var(--hl-yellow);
    color: var(--hl-black);
}

.hl-tempo-bar .hl-tempo-step:focus-visible,
.hl-tempo-bar .hl-tempo-btn:focus-visible,
.hl-tempo-bar .hl-countin-button:focus-visible,
.hl-tempo-bar .hl-tempo-item:focus-visible,
.hl-tempo-bar .hl-tempo-input:focus-visible {
    outline: 3px solid var(--hl-yellow);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--hl-black);
}

.hl-tempo-bar .hl-countin-wrap {
    display: inline-flex;
    align-items: center;
    position: relative;
    min-width: 0;
}

.hl-tempo-bar .hl-countin-wrap > .hl-ctl-label {
    display: none;
}

.hl-tempo-bar .hl-countin-pop {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 40;
    white-space: normal;
}

.hl-tempo-tools {
    position: relative;
}

.hl-tempo-menu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 12rem;
    margin-top: 6px;
    padding: 6px;
    border: 1px solid var(--tb-border, var(--hl-gray));
    border-radius: 12px;
    background: var(--hl-white);
    color: var(--hl-black);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}

.hl-tempo-dark .hl-tempo-menu {
    background: #1f2426;
    color: #f2efe6;
}

.hl-tempo-menu[hidden] {
    display: none;
}

.hl-tempo-bar .hl-tempo-menu .hl-tempo-item {
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.hl-tempo-bar .hl-tempo-item:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.hl-stage-titlerow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 12px;
    min-width: 0;
}

.hl-stage-titlerow h1 {
    flex: 0 1 auto;
    min-width: 0;
}

.hl-stage-titlerow .hl-tempo-bar {
    flex: 0 0 auto;
}

@media (max-width: 1024px) {
    .hl-stage-head .hl-stage-title {
        min-width: 0;
        max-width: 100%;
    }

    .hl-stage-titlerow {
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px 12px;
    }

    .hl-stage-titlerow h1 {
        flex: 1 1 100%;
        text-align: center;
        overflow-wrap: anywhere;
    }

    .hl-stage-titlerow .hl-tempo-bar {
        flex: 0 1 auto;
        margin-inline: auto;
    }

    .hl-stage-head .hl-stage-list > span {
        white-space: nowrap;
    }

    .hl-tempo-bar .hl-tempo-set {
        padding-right: 0;
        border-right: 0;
    }
}

@media (max-width: 640px) {
    .hl-tempo-bar .hl-tempo-set {
        flex: 1 1 100%;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--tb-border);
    }

    .hl-tempo-bar .hl-tempo-btn,
    .hl-tempo-bar .hl-countin-button {
        width: 76px;
        min-width: 76px;
    }
}

.hl-tempo-badge-host {
    position: absolute;
    top: -6px;
    right: -6px;
    z-index: 3;
}

.hl-tempo-badge-host[hidden] {
    display: none;
}

.hl-tempo-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    min-width: 18px;
    padding: 0;
    border: 1px solid var(--surface);
    border-radius: 50%;
    background: var(--encre);
    color: var(--surface);
    font-size: .75rem;
    line-height: 1;
    cursor: help;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .35);
}

.hl-tempo-badge::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    max-width: 100vw;
    transform: translate(-50%, -50%);
}

.hl-tempo-badge:focus-visible {
    outline: 3px solid var(--encre);
    outline-offset: 2px;
}

.hl-tempo-badge-tip {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: max-content;
    max-width: min(260px, 70vw);
    padding: 8px 10px;
    border: 1px solid var(--encre);
    border-radius: 6px;
    background: var(--surface);
    color: var(--encre);
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.35;
    text-align: left;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s;
}

.hl-tempo-badge-host:hover .hl-tempo-badge-tip,
.hl-tempo-badge-host:focus-within .hl-tempo-badge-tip {
    visibility: visible;
    opacity: 1;
}

[data-theme="dark"] .hl-tempo-badge,
[data-theme="stage"] .hl-tempo-badge {
    border-color: var(--jaune);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .4);
}

[data-theme="dark"] .hl-tempo-badge-tip,
[data-theme="stage"] .hl-tempo-badge-tip {
    border-color: var(--jaune);
    background: var(--surface-2);
    color: var(--encre);
}

.hl-tempo-line {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: .8125rem;
}

.hl-tempo-label {
    font-weight: 600;
}

.hl-file-tempo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.hl-tempo-input {
    width: 6rem;
    min-height: 44px;
}

.hl-tempo-status {
    font-size: .75rem;
    font-weight: 600;
}

.hl-tempo-status.is-ok {
    color: var(--bs-success-text-emphasis, #0a3622);
}

.hl-tempo-status.is-ok::before {
    content: "\2713\00a0";
}

.hl-tempo-status.is-error {
    color: var(--danger-ink, #58151c);
}

@media (prefers-reduced-motion: reduce) {
    .hl-tempo-badge-tip {
        transition: none;
    }
}

.hl-song-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 20px;
    max-width: 100%;
}

.hl-song-sub .hl-song-meta {
    justify-content: flex-start;
}

.hl-tempo-bar .hl-countin-badge {
    top: -7px;
    right: -7px;
    z-index: 2;
    min-width: 24px;
    height: 22px;
    box-sizing: border-box;
    padding: 0 5px;
    border: 2px solid var(--hl-white);
    border-radius: 11px;
    background: var(--hl-black);
    color: var(--hl-yellow);
    font-size: .75rem;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: .02em;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .25);
    pointer-events: none;
}

.hl-tempo-dark .hl-countin-badge {
    border-color: #1f2426;
    background: var(--hl-yellow);
    color: var(--hl-black);
}

.hl-tempo-bar .hl-countin-pop {
    top: 100%;
    right: auto;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    box-sizing: border-box;
    width: min(92vw, 20rem);
    min-width: 0;
    max-width: calc(100vw - 16px);
    margin-top: 6px;
    padding: 6px;
    border: 1px solid var(--tb-border, var(--hl-gray));
    border-radius: 12px;
    background: var(--hl-white);
    color: var(--hl-black);
    font-size: .9rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}

.hl-tempo-bar .hl-countin-pop[hidden] {
    display: none;
}

.hl-tempo-dark .hl-countin-pop {
    background: #1f2426;
    color: #f2efe6;
}

.hl-tempo-bar .hl-countin-pop .hl-mix-title {
    margin: 0;
    padding: 0 6px;
    font-size: .8rem;
    font-weight: 600;
    color: inherit;
}

.hl-tempo-bar .hl-countin-set {
    gap: 4px;
}

.hl-tempo-bar .hl-countin-choices {
    gap: 4px;
}

.hl-tempo-bar .hl-countin-choice {
    box-sizing: border-box;
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--tb-ctl-border);
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 600;
}

.hl-tempo-bar .hl-countin-choice:hover {
    background: var(--tb-ctl-hover);
}

.hl-tempo-bar .hl-countin-choice[aria-pressed="true"] {
    border-color: var(--hl-yellow);
    background: var(--hl-yellow);
    color: var(--hl-black);
}

.hl-tempo-bar .hl-countin-choice:focus-visible {
    outline: 3px solid var(--hl-yellow);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--hl-black);
}

.hl-tempo-bar .hl-met-wrap {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}

.hl-met-pill {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    z-index: 1090;
    display: flex;
    align-items: center;
    gap: 4px;
    box-sizing: border-box;
    max-width: calc(100vw - 16px);
    padding: 4px;
    border: 1px solid var(--tb-border, var(--hl-gray));
    border-radius: 999px;
    background: var(--hl-white);
    color: var(--hl-black);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
    transform: translate(calc(-50% + var(--met-pill-shift, 0px) + var(--met-pill-dx, 0px)), var(--met-pill-dy, 0px));
}

.hl-met-pill-handle {
    position: absolute;
    top: -12px;
    left: 50%;
    width: 64px;
    height: 20px;
    transform: translateX(-50%);
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.hl-met-pill-handle::after {
    content: "";
    position: absolute;
    top: 7px;
    left: 12px;
    right: 12px;
    height: 5px;
    border-radius: 3px;
    background: var(--hl-black);
    border: 1px solid var(--hl-white);
}

.hl-met-pill-handle:active,
.hl-met-pill.is-dragging .hl-met-pill-handle {
    cursor: grabbing;
}

.hl-met-pill-handle:focus-visible {
    outline: 3px solid var(--hl-yellow);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--hl-black);
}

.hl-met-pill[hidden] {
    display: none;
}

.hl-tempo-dark .hl-met-pill {
    background: #1f2426;
    color: #f2efe6;
}

.hl-met-pill-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--tb-ctl-border);
    border-radius: 50%;
    background: var(--tb-ctl);
    color: inherit;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}

.hl-met-pill-btn:hover {
    background: var(--tb-ctl-hover);
}

.hl-met-pill[data-mode="running"] [data-met-pill-toggle] {
    border-color: var(--hl-yellow);
    background: var(--hl-yellow);
    color: var(--hl-black);
}

.hl-met-pill-btn:focus-visible {
    outline: 3px solid var(--hl-yellow);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--hl-black);
}

.hl-met-pill-icon {
    flex: none;
    font-size: 20px;
    line-height: 1;
    color: inherit;
    pointer-events: none;
}

.hl-met-pill-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
}

.hl-met-pill-visual .hl-beat-dots {
    flex-wrap: nowrap;
    gap: 4px;
}

.hl-met-pill-visual .hl-beat-dot {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border-width: 2px;
    border-color: #6b7478;
    background: transparent;
    font-size: 0;
    transform: none;
    text-decoration: none;
}

.hl-met-pill-visual .hl-beat-dot.is-first {
    border-style: solid;
    background: #fff;
    border-color: var(--hl-black);
}

.hl-met-pill-visual .hl-beat-dot.is-on {
    background: var(--hl-yellow);
    border-color: var(--hl-yellow);
}

.hl-met-pill[data-mode="paused"] .hl-met-pill-visual {
    opacity: .5;
}

@media (max-width: 640px) {
    .hl-met-pill-visual .hl-beat-dot {
        width: 14px;
        height: 14px;
    }
}

.hl-pitch-warning {
    margin: 4px 0 0;
    font-size: .875rem;
    line-height: 1.3;
}

.hl-pitch-warning[hidden] {
    display: none;
}

.hl-mix-row .hl-mix-range {
    min-height: 44px;
}

.hl-dock {
    position: static;
    flex: 0 0 auto;
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-height: 40vh;
    max-height: 40dvh;
    overflow: auto;
    background: #15191b;
    color: #e8e3d8;
    border-top: 2px solid var(--hl-yellow);
}

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

.hl-dock .hl-tool-panel,
.hl-dock .hl-stage-list {
    position: static;
    width: auto;
    max-height: none;
    overflow: visible;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    padding: 10px max(12px, env(safe-area-inset-left));
}

.hl-dock button,
.hl-dock input,
.hl-dock select {
    min-height: 44px;
    min-width: 44px;
}

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

@media (max-width: 575.98px) {
    .hl-stage-head {
        gap: 0 2px;
        padding: 2px 4px;
    }
    .hl-stage-left {
        display: contents;
    }
    .hl-stage-tempo {
        justify-content: center;
    }
    .hl-stage-right {
        gap: 0;
        flex-wrap: nowrap;
        overflow: visible;
    }
    .hl-tempo-bar {
        flex-wrap: nowrap;
        gap: 0;
        padding: 0;
        border: 0;
        background: transparent;
        width: auto;
    }
    .hl-tempo-bar .hl-tempo-set {
        position: relative;
        flex: 0 0 auto;
        padding: 0;
        border: 0;
    }
    .hl-tempo-bar .hl-tempo-row {
        gap: 0;
    }
    .hl-tempo-bar .hl-tempo-step {
        width: 40px;
        min-width: 40px;
        height: 44px;
    }
    .hl-tempo-bar .hl-tempo-input {
        width: 2.3rem;
        font-size: 1.05rem;
    }
    .hl-tempo-bar .hl-tempo-unit {
        display: none;
    }
    .hl-tempo-bar .hl-tempo-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .hl-tempo-bar .hl-tempo-btn,
    .hl-tempo-bar .hl-countin-button {
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
        border-color: transparent;
        background: transparent;
    }
    .hl-tempo-bar .hl-tempo-btn > span,
    .hl-tempo-bar .hl-countin-button > span.hl-countin-text {
        display: none;
    }
    .hl-tempo-bar .hl-tempo-btn > .mdi-chevron-down {
        top: 2px;
        right: 2px;
        font-size: .75rem;
    }
    .hl-stage-head .hl-tabs {
        grid-column: 1 / -1;
        grid-row: 2;
        gap: 2px;
        padding: 2px 28px 2px 2px;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
        overscroll-behavior-x: contain;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    }
    .hl-stage-head .hl-tabs::-webkit-scrollbar {
        display: none;
    }
    .hl-tab {
        padding: 0 10px;
        gap: .25em;
        scroll-snap-align: start;
    }
    .hl-tab-name {
        max-width: 9ch;
    }
    .hl-tab-kind {
        padding: 0 4px;
        font-size: .65rem;
    }
    .hl-stage-viewer {
        padding: 4px;
    }
    .hl-stage-foot {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) 44px;
        grid-template-areas: "title title title" "prev acts next";
        align-items: center;
        gap: 2px 4px;
        padding: 4px 6px;
        background: #1a1a1a;
        border-top: 1px solid #3a4245;
    }
    .hl-stage-foot .hl-stage-bar {
        display: contents;
    }
    .hl-stage-foot .hl-stage-bar .hl-stage-title {
        grid-area: title;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "heading heading" "meta count";
        column-gap: 8px;
        flex: none;
        max-width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0 4px;
        text-align: center;
    }
    .hl-stage-foot .hl-stage-bar .hl-stage-title h1 {
        grid-area: heading;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        overflow-wrap: anywhere;
        text-transform: none;
        font-size: .95rem;
        line-height: 1.15;
    }
    .hl-stage-foot .hl-stage-bar .hl-stage-meta {
        grid-area: meta;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: left;
        text-transform: none;
        letter-spacing: 0;
        font-size: .7rem;
        line-height: 1.3;
    }
    .hl-stage-foot .hl-stage-count {
        grid-area: count;
        font-size: .7rem;
        line-height: 1.3;
        text-align: right;
        white-space: nowrap;
    }
    .hl-stage-foot .hl-stage-nav {
        grid-area: prev;
        flex: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        min-width: 44px;
        min-height: 44px;
        padding: 0;
        font-size: 1.5rem;
        line-height: 1;
        text-align: center;
    }
    .hl-stage-foot .hl-stage-nav.is-next {
        grid-area: next;
    }
    .hl-stage-nav-text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .hl-stage-foot .hl-stage-actions {
        grid-area: acts;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 2px;
        min-width: 0;
    }
    .hl-stage-act {
        padding: 4px 10px;
    }
    html.is-pupitre .hl-stage-actions .hl-float-open {
        position: static;
        flex: 0 0 auto;
        width: 44px;
        min-width: 44px;
        height: 44px;
        padding: 0;
        gap: 0;
        border-radius: 8px;
        box-shadow: none;
    }
    html.is-pupitre .hl-stage-actions .hl-float-open span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .hl-stage-notes-panel,
    .hl-sp-panel {
        bottom: calc(env(safe-area-inset-bottom) + 112px);
    }
}

.hl-toast-region {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(420px, calc(100vw - 24px));
    pointer-events: none;
}

.hl-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 6px 10px 14px;
    border: 1px solid var(--bordure-champ);
    border-left-width: 6px;
    border-radius: 8px;
    background: var(--surface);
    color: var(--encre);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
    opacity: 1;
    transition: opacity .3s ease;
    animation: hl-toast-in .25s ease;
}

.hl-toast-ok {
    border-left-color: #2e7d4f;
}

.hl-toast-err {
    border-left-color: var(--danger);
}

.hl-toast-out {
    opacity: 0;
}

.hl-toast-text {
    flex: 1;
    align-self: center;
    overflow-wrap: anywhere;
}

.hl-toast-close {
    flex: none;
    min-width: 44px;
    min-height: 44px;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1.6rem;
    line-height: 1;
    border-radius: 8px;
    cursor: pointer;
}

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

.hl-toast-close:focus-visible {
    outline: 3px solid var(--encre);
    outline-offset: 2px;
}

[data-theme="dark"] .hl-toast-ok {
    border-left-color: #6fcf97;
}

[data-theme="dark"] .hl-toast-err {
    border-left-color: #ff8a7a;
}

@keyframes hl-toast-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 767.98px) {
    .hl-toast-region {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hl-toast {
        animation: none;
        transition: none;
    }
}

.hl-tempo-bar .hl-countin-set {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 4px;
    border: 0;
}

.hl-tempo-bar .hl-countin-set .hl-mix-title {
    float: none;
    width: 100%;
    box-sizing: border-box;
}

.hl-tempo-bar .hl-countin-choices {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    width: 100%;
}

.hl-tempo-bar .hl-countin-choice {
    flex: 1 1 0;
}

.hl-tempo-bar .hl-countin-pop .hl-countin-choice[aria-pressed="true"],
.hl-tempo-dark .hl-countin-pop .hl-countin-choice[aria-pressed="true"] {
    border-color: #FCE200;
    background: #FCE200;
    color: #1A1A1A;
}

.hl-tempo-bar .hl-countin-button .hl-countin-badge,
.hl-tempo-dark .hl-countin-button .hl-countin-badge {
    border-color: #1A1A1A;
    background: #FCE200;
    color: #1A1A1A;
}

.hl-float-open {
    border-color: var(--hl-score-play);
}

.hl-dock:has(.hl-score-panel:not([hidden])) {
    border-top-color: var(--hl-score-play);
    overflow: visible;
}

.hl-float-open-label {
    white-space: normal;
    text-align: left;
}

.hl-dock .hl-tool-panel.hl-score-panel {
    margin: 8px max(8px, env(safe-area-inset-left));
}

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

.hl-score .hl-stage {
    display: flex;
    flex-direction: column;
}

.hl-score .hl-stage > .hl-viewer {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
}

.hl-score .hl-stage > .hl-sounds-float {
    --encre: #1A1A1A;
    --texte-2: #4A4A48;
    --texte-3: #4A4A48;
    --surface: #FFFFFF;
    --surface-2: #F4F4F2;
    --gris-2: #E6E5E2;
    --bordure-champ: #8C8C88;
    --vert: #CDDDD5;
    position: relative;
    right: auto;
    bottom: auto;
    flex: 0 0 auto;
    width: 100%;
    max-height: none;
    margin: 0;
    padding: 8px max(12px, env(safe-area-inset-left));
    border: 0;
    border-top: 3px solid var(--hl-score-play);
    border-radius: 0;
    background: #FFFFFF;
    color: #1A1A1A;
    transform: none;
    box-shadow: none;
    overflow: visible;
}

.hl-score .hl-stage > .hl-sounds-float .hl-float-title {
    color: #1A1A1A;
}

.hl-score .hl-stage > .hl-sounds-float .hl-float-close {
    border: 1px solid #8C8C88;
    background: #FFFFFF;
    color: #1A1A1A;
}

.hl-score .hl-stage > .hl-sounds-float .hl-float-close:hover {
    background: #F4F4F2;
}

.hl-score .hl-stage > .hl-sounds-float .hl-ctl-label,
.hl-score .hl-stage > .hl-sounds-float .hl-volume-value {
    color: #4A4A48;
}

.hl-score .hl-stage > .hl-float-open {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 6;
    max-width: calc(100% - 24px);
    margin: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}

@media (max-width: 575.98px) {
    .hl-score .hl-stage > .hl-sounds-float {
        margin: 0;
        padding: 6px 8px;
        overflow: visible;
    }
    .hl-score .hl-stage > .hl-float-open {
        width: 44px;
        padding: 0;
    }
    .hl-score .hl-stage > .hl-float-open .hl-float-open-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

.hl-score .hl-stage > .hl-sounds-float .hl-float-close,
.hl-tool-panel.hl-score-panel [data-float-close] {
    position: relative;
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    padding: 0;
}

.hl-score .hl-stage > .hl-sounds-float .hl-float-close::after,
.hl-tool-panel.hl-score-panel [data-float-close]::after {
    content: "";
    position: absolute;
    inset: -6px;
}

.hl-score .hl-stage > .hl-sounds-float .hl-float-close .mdi,
.hl-tool-panel.hl-score-panel [data-float-close] .mdi {
    font-size: 16px;
    line-height: 1;
}

.hl-tool-panel.hl-score-panel [data-float-close]:focus-visible {
    outline: 3px solid var(--hl-yellow);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px #1A1A1A;
}

@media (max-width: 575.98px) {
    .hl-song-head {
        grid-template-columns: minmax(0, 1fr) auto;
        justify-items: stretch;
        gap: 0 8px;
        padding: 4px 12px 6px;
    }

    .hl-song-back {
        grid-column: 1;
        grid-row: 1;
    }

    .hl-song-actions {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }

    .hl-song-id {
        grid-column: 1 / -1;
        grid-row: 2;
        align-items: stretch;
        gap: 4px;
    }

    .hl-song-titlerow {
        justify-content: flex-start;
    }

    .hl-song-title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: clamp(1rem, 4.6vw, 1.2rem);
        text-align: left;
    }

    .hl-song-sub {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .hl-song-meta {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        white-space: nowrap;
        font-size: .8rem;
    }

    .hl-song-meta:not(:has(.hl-song-meta-item)) {
        display: none;
    }

    .hl-tempo-bar {
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 4px;
        padding: 2px 6px;
    }

    .hl-tempo-bar .hl-tempo-set {
        flex: 0 1 auto;
        min-width: 0;
    }

    .hl-tempo-bar .hl-tempo-label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .hl-tempo-bar .hl-tempo-step {
        width: 44px;
        height: 44px;
        min-width: 44px;
    }

    .hl-tempo-bar .hl-tempo-btn,
    .hl-tempo-bar .hl-countin-button {
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
        padding: 0;
    }

    .hl-tempo-bar .hl-tempo-btn > span,
    .hl-tempo-bar .hl-countin-button > span.hl-countin-text {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .hl-tempo-bar .hl-countin-button .hl-countin-badge,
    .hl-tempo-dark .hl-countin-button .hl-countin-badge {
        border-color: #1A1A1A;
        background: #FCE200;
        color: #1A1A1A;
    }
}

@media (min-width: 768px) {
    .hl-song-id {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 4px 20px;
        max-width: min(88vw, 1100px);
        width: 100%;
        text-align: left;
    }

    .hl-song-sub {
        display: contents;
    }

    .hl-song-titlerow {
        grid-column: 1;
        grid-row: 1;
        justify-content: flex-start;
        min-width: 0;
    }

    .hl-song-titlerow .hl-song-title {
        flex: 1 1 auto;
        min-width: 0;
        text-align: left;
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .hl-song-id .hl-tempo-bar {
        grid-column: 2;
        grid-row: 1;
        flex: none;
        justify-self: end;
    }

    .hl-song-id .hl-song-meta {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: flex-start;
    }
}

.hl-countin-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 5000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    max-width: calc(100vw - 24px);
    padding: 18px 20px;
    border-radius: 20px;
    background: rgba(26, 26, 26, .88);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.hl-countin-overlay .hl-countin-row {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 10px;
    opacity: .6;
}

.hl-countin-overlay .hl-countin-row.is-current {
    opacity: 1;
}

.hl-countin-overlay .hl-beat-dot {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    background: transparent;
    border: 2px solid #d9d8d6;
    color: #fff;
    font-size: 1.1rem;
    text-decoration: none;
    transform: none;
}

.hl-countin-overlay .hl-beat-dot.is-first {
    border-style: double;
    border-width: 5px;
}

.hl-countin-overlay .hl-beat-dot.is-done {
    background: #4a4a4a;
    border-color: #4a4a4a;
    color: #d9d8d6;
}

.hl-countin-overlay .hl-beat-dot.is-on {
    background: var(--hl-yellow, #fce200);
    border-color: var(--hl-yellow, #fce200);
    color: #1a1a1a;
    transform: scale(1.15);
}

@media (max-width: 575px) {
    .hl-countin-overlay {
        padding: 12px;
    }

    .hl-countin-overlay .hl-countin-row {
        gap: 6px;
    }

    .hl-countin-overlay .hl-beat-dot {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hl-countin-overlay .hl-beat-dot {
        transition: none;
    }

    .hl-countin-overlay .hl-beat-dot.is-on {
        transform: none;
    }
}

.hl-countin-live {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.hl-song-info-btn {
    display: none;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font-size: 1.4rem;
}

.hl-song-info-btn:focus-visible,
.hl-song-meta:focus-visible {
    outline: 3px solid var(--hl-yellow);
    outline-offset: 2px;
}

lod-song-info {
    display: block;
    min-width: 0;
}

@media (min-width: 768px) {
    .hl-song-id {
        grid-template-columns: minmax(0, 1fr);
    }

    .hl-song-titlerow {
        display: flex;
        align-items: baseline;
        gap: 0 16px;
        grid-column: 1;
        grid-row: 1;
    }

    .hl-song-titlerow .hl-song-title {
        flex: 0 1 auto;
        max-width: 60%;
    }

    .hl-song-titlerow lod-song-info {
        flex: 1 1 0;
    }

    .hl-song-id .hl-song-meta {
        display: block;
        grid-column: auto;
        grid-row: auto;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: .8rem;
    }

    .hl-song-id .hl-tempo-bar {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
    }
}

@media (max-width: 767.98px) {
    .hl-song-titlerow {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .hl-song-titlerow .hl-song-title {
        flex: 1 1 auto;
        min-width: 0;
    }

    .hl-song-info-btn {
        display: inline-flex;
    }

    .hl-song-id .hl-song-meta {
        display: none;
    }

    lod-song-info.is-open .hl-song-meta {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: flex-start;
        gap: 6px;
        z-index: 1000;
        min-width: 220px;
        padding: 12px 16px;
        border-radius: 10px;
        background: var(--hl-white);
        color: var(--hl-black);
        box-shadow: 0 6px 24px rgba(0, 0, 0, .3);
        font-size: .9rem;
        overflow-x: visible;
        white-space: normal;
    }

    lod-song-info.is-open .hl-song-meta-item + .hl-song-meta-item::before {
        content: none;
    }
}

@media (min-width: 768px) {
    .hl-song-id {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 20px;
        max-width: 100%;
        width: 100%;
        text-align: left;
    }

    .hl-song-titlerow {
        display: block;
        flex: 1 1 20rem;
        min-width: 0;
    }

    .hl-song-titlerow .hl-song-title {
        max-width: 100%;
    }

    .hl-song-titlerow lod-song-info {
        flex: none;
    }

    .hl-song-id .hl-song-meta {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .hl-song-id .hl-tempo-bar {
        flex: 0 0 auto;
        justify-self: auto;
    }
}

.hl-sp-panel .hl-tool-head {
    flex-wrap: nowrap;
}

.hl-sp-panel .hl-tool-head .hl-tool-title {
    flex: none;
}

.hl-sp-panel .hl-tool-head .hl-pills {
    flex: 1 1 auto;
    min-width: 0;
}

.hl-sp-panel .hl-tool-head .hl-icon-button {
    flex: none;
    margin-left: auto;
}

@media (max-width: 575px) {
    .hl-sp-panel .hl-tool-head .hl-tool-title {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

body > .ts-dropdown {
    z-index: 1090;
}

[data-play][data-loading] {
    position: relative;
    cursor: progress;
}

[data-play][data-loading] > i {
    visibility: hidden;
}

[data-play][data-loading]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.25em;
    height: 1.25em;
    margin: -0.625em 0 0 -0.625em;
    box-sizing: border-box;
    border: 3px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    opacity: 0.85;
    animation: hl-spin 0.8s linear infinite;
}

@keyframes hl-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-play][data-loading]::after {
        animation: none;
        border-top-color: currentColor;
        border-style: dotted;
    }
}

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

.hl-backing-sounds {
    display: grid;
    gap: .25rem;
    max-height: 12rem;
    margin: .5rem 0;
    overflow-y: auto;
}

.hl-backing-sounds .form-check {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.hl-backing-add {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

.hl-backing-parts {
    display: grid;
    gap: .5rem;
    margin: .5rem 0 0;
    padding-left: 1.5rem;
}

.hl-backing-part {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.hl-backing-part .form-control {
    flex: 1 1 auto;
    min-height: 44px;
}

.hl-backing-part-actions {
    display: inline-flex;
    gap: .25rem;
}

.hl-backing-part-actions .hl-icon-only {
    min-width: 44px;
    min-height: 44px;
}

.hl-backing-status:empty {
    display: none;
}

.hl-sp-source-heading {
    padding: .5rem .75rem .25rem;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
}

.hl-backing-step {
    display: grid;
    gap: 1rem;
}

.hl-backing-chosen-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
}

.hl-backing-chosen-item .hl-icon-only {
    min-width: 44px;
    min-height: 44px;
}

.hl-backing-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.hl-backing-buttons .btn,
.hl-backing-step .btn {
    min-height: 44px;
}

:root {
    --bp-c1: #f28b72;
    --bp-c2: #f5b83d;
    --bp-c3: #e3dc4a;
    --bp-c4: #7fd48a;
    --bp-c5: #4fd1c5;
    --bp-c6: #6cb6ff;
    --bp-c7: #a99bff;
    --bp-c8: #f08ad0;
    --bp-on-color: #1a1a1a;
}

lod-backing-player {
    display: block;
}

.hl-bp {
    --bp-fg: var(--encre);
    --bp-bg: var(--surface);
    --bp-bg2: var(--surface-2);
    --bp-line: var(--bordure-champ);
    --bp-sub: var(--texte-2);
    color: var(--bp-fg);
}

.hl-dock .hl-bp {
    --bp-fg: #e8e3d8;
    --bp-bg: #1f2426;
    --bp-bg2: #1f2426;
    --bp-line: #6b7478;
    --bp-sub: #c9c3b6;
}

.hl-bp {
    display: flex;
    flex-direction: column;
}

.hl-bp-progress {
    order: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin-top: 4px;
}

.hl-bp[data-layout="rows"] .hl-bp-progress {
    order: -1;
    margin: 0 0 4px;
}

.hl-bp-seek {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    margin: 0;
    accent-color: var(--jaune);
}

.hl-bp-seek:focus-visible {
    outline: 3px solid var(--bp-fg);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--jaune);
}

.hl-bp-grid {
    display: grid;
    gap: 4px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.hl-bp[data-layout="columns"] .hl-bp-grid {
    grid-auto-flow: column;
    grid-auto-columns: 56px;
    grid-template-columns: 68px;
    grid-template-rows: auto minmax(120px, 1fr) auto;
}

.hl-bp-col {
    box-sizing: border-box;
    border: 1px solid var(--bp-line);
    border-radius: 8px;
    background: var(--bp-bg2);
    min-width: 0;
}

.hl-bp-master {
    border-top: 6px solid var(--jaune);
}

.hl-bp-track {
    border-top: 6px solid var(--bp-color);
}

.hl-bp[data-layout="columns"] .hl-bp-col {
    grid-row: 1 / span 3;
    display: grid;
    grid-template-rows: subgrid;
    justify-items: center;
    gap: 4px;
    padding: 4px 2px;
}

.hl-bp[data-layout="columns"] .hl-bp-master {
    position: sticky;
    left: 0;
    z-index: 1;
}

.hl-bp-btn,
.hl-bp-main,
.hl-bp-toggle,
.hl-bp-solo,
.hl-bp-tempo-value,
.hl-bp-more,
.hl-bp-reset,
.hl-bp-item {
    box-sizing: border-box;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid var(--bp-line);
    border-radius: 6px;
    background: var(--bp-bg);
    color: var(--bp-fg);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.hl-bp-btn i,
.hl-bp-main i,
.hl-bp-toggle i,
.hl-bp-more i {
    font-size: 1.5rem;
    line-height: 1;
}

.hl-bp-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 2px;
    background: var(--jaune);
    border-color: var(--jaune);
    color: #1a1a1a;
    font-size: .8rem;
}

.hl-bp-main[data-loading] {
    opacity: .7;
    cursor: progress;
}

.hl-bp-toggle {
    width: 100%;
    background: var(--bp-color);
    border-color: var(--bp-color);
    color: var(--bp-on-color);
}

.hl-bp-toggle[aria-pressed="false"] {
    background: var(--bp-bg);
    border: 2px dashed var(--bp-color);
    color: var(--bp-fg);
}

.hl-bp-toggle[aria-pressed="true"] {
    border-style: solid;
}

.hl-bp-btn:focus-visible,
.hl-bp-main:focus-visible,
.hl-bp-toggle:focus-visible,
.hl-bp-solo:focus-visible,
.hl-bp-tempo-value:focus-visible,
.hl-bp-more:focus-visible,
.hl-bp-reset:focus-visible,
.hl-bp-item:focus-visible,
.hl-bp-select:focus-visible,
.hl-bp-range:focus-visible {
    outline: 3px solid var(--bp-fg);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--jaune);
}

.hl-bp-body {
    display: grid;
    justify-items: center;
    align-items: center;
    min-height: 0;
    width: 100%;
}

.hl-bp-range {
    margin: 0;
    accent-color: var(--bp-color, var(--bp-fg));
}

.hl-bp[data-layout="columns"] .hl-bp-body {
    grid-template-rows: 1fr auto;
}

.hl-bp[data-layout="columns"] .hl-bp-range {
    width: 44px;
    height: 100%;
    min-height: 100px;
    writing-mode: vertical-lr;
    direction: rtl;
}

.hl-bp-value {
    font-size: .7rem;
    font-variant-numeric: tabular-nums;
    color: var(--bp-sub);
    white-space: nowrap;
}

.hl-bp-name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .72rem;
    font-weight: 700;
    text-align: center;
}

.hl-bp-foot {
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 2px;
    width: 100%;
    min-width: 0;
}

.hl-bp-solo {
    width: 100%;
    padding: 0;
}

.hl-bp-solo[aria-pressed="true"] {
    background: var(--jaune);
    border-color: var(--jaune);
    color: #1a1a1a;
}

.hl-bp-tempo-value {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0;
    line-height: 1.1;
}

.hl-bp-tempo-unit {
    font-size: .6rem;
    font-weight: 400;
}

.hl-bp-tempo-value.is-changed {
    box-shadow: inset 0 -3px 0 var(--jaune);
}

.hl-bp-more {
    width: 100%;
}

.hl-bp-col.is-off .hl-bp-range {
    opacity: .6;
}

.hl-bp[data-layout="columns"] .hl-bp-master > .hl-bp-name {
    display: none;
}

.hl-bp[data-layout="rows"] .hl-bp-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    overflow: visible;
}

.hl-bp[data-layout="rows"] .hl-bp-col {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-areas: "name name name" "play body act";
    align-items: center;
    column-gap: 8px;
    padding: 2px 8px 4px;
    border-top-width: 1px;
    border-left: 8px solid var(--bp-color, var(--jaune));
}

.hl-bp[data-layout="rows"] .hl-bp-name {
    display: block;
    grid-area: name;
    text-align: left;
}

.hl-bp[data-layout="rows"] .hl-bp-main,
.hl-bp[data-layout="rows"] .hl-bp-toggle {
    grid-area: play;
    width: 44px;
}

.hl-bp[data-layout="rows"] .hl-bp-main-text {
    display: none;
}

.hl-bp[data-layout="rows"] .hl-bp-body {
    grid-area: body;
    grid-template-columns: minmax(0, 1fr) 3.4em;
}

.hl-bp[data-layout="rows"] .hl-bp-range {
    width: 100%;
    min-height: 44px;
}

.hl-bp[data-layout="rows"] .hl-bp-value {
    text-align: right;
}

.hl-bp[data-layout="rows"] .hl-bp-track .hl-bp-foot {
    display: contents;
}

.hl-bp[data-layout="rows"] .hl-bp-track .hl-bp-solo {
    grid-area: act;
    width: auto;
    padding: 0 10px;
}

.hl-bp[data-layout="rows"] .hl-bp-master .hl-bp-foot {
    grid-area: act;
    grid-auto-flow: column;
    width: auto;
}

.hl-bp[data-layout="rows"] .hl-bp-tempo-value,
.hl-bp[data-layout="rows"] .hl-bp-more {
    width: 48px;
}

.hl-bp-pop {
    position: fixed;
    z-index: 60;
    box-sizing: border-box;
    display: grid;
    gap: 4px;
    min-width: 200px;
    max-width: calc(100vw - 16px);
    padding: 6px;
    border: 2px solid var(--jaune);
    border-radius: 8px;
    background: var(--bp-bg);
    color: var(--bp-fg);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .4);
}

.hl-bp-pop[hidden],
.hl-bp-item[hidden],
.hl-bp-hint[hidden] {
    display: none;
}

.hl-bp-pop-tempo {
    grid-auto-flow: column;
    min-width: 0;
}

.hl-bp-reset {
    padding: 0 10px;
    font-variant-numeric: tabular-nums;
}

.hl-bp-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 0 10px;
    text-align: left;
    font-weight: 400;
}

.hl-bp-item[aria-pressed="true"] {
    background: var(--bp-fg);
    color: var(--bp-bg);
}

.hl-bp-item i {
    font-size: 1.25rem;
}

.hl-bp-item:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.hl-bp-time {
    flex: 0 0 auto;
    margin: 0;
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--bp-sub);
}

.hl-bp-source {
    display: grid;
    gap: 2px;
    padding: 2px 6px;
    font-size: .85rem;
}

.hl-bp-select {
    min-height: 44px;
    max-width: 100%;
    border: 1px solid var(--bp-line);
    border-radius: 6px;
    background: var(--bp-bg);
    color: var(--bp-fg);
    padding: 0 8px;
}

.hl-bp-hint {
    margin: 0 0 6px;
    padding: 8px 12px;
    border-left: 4px solid var(--jaune);
    background: var(--bp-bg);
    font-weight: 700;
}

.hl-offer { border: 0; padding: 0; margin: 16px 0 0; }
.hl-offer-legend { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; float: none; width: auto; }
.hl-offer-gifts { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.hl-offer-gift { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 44px; padding: 16px; text-align: left; color: #1A1A1A; background: #FFFFFF; border: 3px solid #1A1A1A; border-radius: 8px; cursor: pointer; }
.hl-offer-gift:hover { background: #CDDDD5; }
.hl-offer-gift:focus-visible { outline: 3px solid #1A1A1A; outline-offset: 3px; box-shadow: 0 0 0 6px #FFFFFF; }
.hl-offer-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; font-weight: 700; color: #FFFFFF; background: #1A1A1A; }
.hl-offer-gift-title { font-size: 1.5rem; font-weight: 700; }
.hl-offer-gift-desc { font-size: 0.95rem; }
.hl-offer-radio { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 8px 0; }
.hl-offer-radio input { margin-top: 4px; flex: none; }
.hl-offer-radio label { display: flex; flex-direction: column; cursor: pointer; }
.hl-offer-payer { margin-top: 16px; }
.hl-offer-payer .form-select { min-height: 44px; }
.hl-offer-note { margin: 6px 0 0; font-size: 0.9rem; }
.hl-offer-warning { margin: 8px 0 0; padding: 8px 12px; border-left: 4px solid #1A1A1A; background: #D9D8D6; color: #1A1A1A; font-weight: 700; }
.hl-offer-warning a { color: #1A1A1A; text-decoration: underline; }
.hl-offer-gift:disabled { opacity: 1; color: #1A1A1A; background: #D9D8D6; border-style: dashed; cursor: not-allowed; }
.hl-offer-buy { margin: 16px 0 0; }
.hl-offer-buy .hl-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; text-decoration: underline; }

.hl-avatar--all { background: var(--surface-2); color: var(--encre); border: 1.5px solid var(--encre); font-size: 1.4rem; }
.hl-group-all-icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--encre); }
.hl-header-balance {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
}

.hl-header-balance .hl-tralala-pill {
    min-height: 44px;
    min-width: 44px;
    padding: 0 12px;
    font-size: .95rem;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .hl-header-balance .hl-tralala-pill {
        padding: 0 8px;
        font-size: .85rem;
    }
}
.hl-tralala-blocked { margin: 0 0 16px; padding: 12px 16px; border: 3px solid #1A1A1A; border-left-width: 10px; background: #D9D8D6; color: #1A1A1A; display: flex; flex-direction: column; gap: 6px; }
.hl-gl-list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.hl-gl-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--bs-border-color, #D9D8D6); border-radius: 8px; }
.hl-gl-item.is-blocked { border-style: dashed; }
.hl-gl-ident { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hl-gl-logo { width: 48px; height: 48px; flex: none; border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.hl-gl-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.hl-gl-actions .hl-btn { min-height: 44px; }
.hl-offer-badge-line { display: flex; align-items: center; gap: 8px; margin: 0; min-height: 44px; }
.hl-offer-cost { margin: 0; font-weight: 700; }

lod-storage-meter {
    display: inline-flex;
    flex: 0 1 auto;
    align-items: center;
    min-width: 0;
}
lod-storage-meter[hidden] { display: none; }
.hl-storage-meter-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    min-width: 44px;
    padding: 0 8px;
    color: inherit;
    text-decoration: none;
    font-size: .85rem;
    white-space: nowrap;
}
.hl-storage-meter-link:hover .hl-storage-meter-text { text-decoration: underline; }
.hl-storage-meter-body { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 110px; }
.hl-storage-meter-track { display: block; height: 6px; border: 1px solid var(--hl-black); border-radius: 3px; background: var(--hl-gray); overflow: hidden; }
.hl-storage-meter-fill { display: block; height: 100%; background: var(--hl-black); }
.hl-storage-meter-link.is-warn .hl-storage-meter-fill { background: repeating-linear-gradient(45deg, var(--hl-black) 0 4px, var(--hl-yellow) 4px 8px); }
.hl-storage-meter-link.is-full .hl-storage-meter-track { border-width: 2px; border-color: var(--hl-black); }
.hl-storage-meter-state { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; }
.hl-storage-meter-link.is-full .hl-storage-meter-text { font-weight: 700; }
[data-theme="dark"] .hl-storage-meter-track,
[data-theme="stage"] .hl-storage-meter-track { border-color: var(--hl-white); background: var(--hl-black); }
[data-theme="dark"] .hl-storage-meter-fill,
[data-theme="stage"] .hl-storage-meter-fill { background: var(--hl-yellow); }
[data-theme="dark"] .hl-storage-meter-link.is-warn .hl-storage-meter-fill,
[data-theme="stage"] .hl-storage-meter-link.is-warn .hl-storage-meter-fill { background: repeating-linear-gradient(45deg, var(--hl-yellow) 0 4px, var(--hl-black) 4px 8px); }
@media (max-width: 575.98px) {
    .hl-storage-meter-text,
    .hl-storage-meter-state-text { display: none; }
    .hl-storage-meter-body { min-width: 56px; }
}
@media (max-width: 991.98px) {
    .hl-storage-meter-state-text { display: none; }
}

.hl-quota-page { max-width: 880px; }
.hl-quota-status { padding: 12px 16px; border: 2px solid var(--hl-black); border-radius: var(--hl-radius); background: var(--hl-gray); color: var(--hl-black); font-weight: 700; margin: 0 0 16px; display: flex; gap: 8px; align-items: flex-start; }
.hl-quota-status.is-full { border-width: 3px; border-left-width: 10px; }
.hl-quota-stack { display: flex; height: 22px; border: 2px solid var(--hl-black); border-radius: 11px; overflow: hidden; background: var(--hl-white); }
.hl-quota-seg { display: block; height: 100%; border-right: 1px solid var(--hl-black); min-width: 2px; }
.hl-quota-seg:last-child { border-right: 0; }
.hl-quota-seg--scores { background: var(--hl-yellow); }
.hl-quota-seg--musicxml { background: var(--hl-green); }
.hl-quota-seg--audio { background: var(--hl-tag-video); }
.hl-quota-seg--videos { background: var(--hl-tag-enregistrement); }
.hl-quota-seg--recordings { background: var(--hl-gray); }
.hl-quota-seg--derived { background: repeating-linear-gradient(45deg, var(--hl-white) 0 4px, var(--hl-gray) 4px 8px); }
.hl-quota-legend { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.hl-quota-legend li { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; }
.hl-quota-dot { width: 14px; height: 14px; border: 1px solid var(--hl-black); border-radius: 50%; display: inline-block; flex: none; }
.hl-quota-total { margin: 12px 0 0; font-weight: 700; }
.hl-quota-more { margin: 24px 0; padding: 16px; border: 1px solid var(--bs-border-color, var(--hl-gray)); border-radius: var(--hl-radius); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.hl-quota-more h2 { margin: 0; }
.hl-quota-more p { margin: 4px 0 0; }
.hl-quota-review { list-style: none; margin: 0; padding: 0; }
.hl-quota-review > li { border-bottom: 1px solid var(--bs-border-color, var(--hl-gray)); }
.hl-quota-review-head { width: 100%; min-height: 56px; display: flex; align-items: center; gap: 12px; padding: 8px 4px; background: transparent; border: 0; color: inherit; text-align: left; font: inherit; }
.hl-quota-review-head .hl-quota-review-label { flex: 1 1 auto; font-weight: 700; }
.hl-quota-review-head .hl-quota-review-size { white-space: nowrap; }
.hl-quota-review-head:hover { background: var(--hl-gray); color: var(--hl-black); }
.hl-quota-items { list-style: none; margin: 0 0 12px 36px; padding: 0; }
.hl-quota-items li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 44px; padding: 4px 0; }
.hl-quota-items a { min-height: 44px; display: inline-flex; align-items: center; font-weight: 700; }
.hl-quota-chip { display: inline-block; padding: 1px 8px; border: 1px solid var(--hl-black); border-radius: 12px; font-size: .8rem; background: var(--hl-gray); color: var(--hl-black); }
.hl-quota-table { width: 100%; }
.hl-quota-table td:last-child,
.hl-quota-table th:last-child { text-align: right; }

.hl-fold-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    padding: 4px 18px;
    cursor: pointer;
    list-style: none;
}

.hl-fold-summary::-webkit-details-marker {
    display: none;
}

.hl-fold-summary::before {
    content: "";
    order: -1;
    flex: none;
    width: 10px;
    height: 10px;
    margin-right: 4px;
    border-right: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    transform: rotate(-45deg);
}

.hl-fold-summary .hl-card-title {
    flex: 0 1 auto;
}

.hl-fold-summary .hl-pills {
    flex: 1 1 0;
    min-width: 0;
    justify-content: flex-end;
    cursor: default;
}

.hl-fold-summary .hl-pill:focus-visible {
    outline: 3px solid var(--hl-black);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--hl-yellow);
}

.hl-fold-summary:not(:has(.hl-pills)) .hl-card-title {
    flex: 1 1 auto;
}

details[open] > .hl-fold-summary::before {
    transform: rotate(45deg);
}

@media (prefers-reduced-motion: no-preference) {
    .hl-fold-summary::before {
        transition: transform .15s ease;
    }
}

.hl-fold-summary:focus-visible,
.hl-fold-expand:focus-visible,
.hl-fold-close:focus-visible {
    outline: 3px solid var(--hl-black);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--hl-yellow);
}

.hl-fold-expand,
.hl-fold-close {
    background: transparent;
    color: var(--encre);
    border-color: var(--bordure-champ);
}

.hl-fold-expand:hover,
.hl-fold-close:hover {
    background: var(--surface-2);
}

.hl-fold-dialog {
    width: 90vw;
    height: 90vh;
    max-width: 90vw;
    max-height: 90vh;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: var(--surface);
    color: var(--hl-black);
}

.hl-fold-dialog[open] {
    display: flex;
    flex-direction: column;
}

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

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

.hl-fold-body {
    flex: 1;
    overflow: auto;
    padding: 16px;
}

.hl-quota-page { max-width: 1080px; }
.hl-ov-section { margin: 0 0 40px; }
.hl-ov-title { margin: 0 0 16px; padding-bottom: 8px; border-bottom: 3px solid var(--hl-yellow); display: inline-block; }
.hl-ov-card { padding: 16px; border: 1px solid var(--hl-black); border-radius: var(--hl-radius); background: var(--hl-white); color: var(--hl-black); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.hl-ov-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.hl-ov-card-head .hl-btn,
.hl-ov-card-head lod-plan-picker .hl-btn,
.hl-ov-renewal .hl-btn { min-height: 44px; min-width: 44px; }
.hl-ov-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.hl-ov-grid--usage { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.hl-ov-balance { flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 20px 32px; border-width: 2px; border-left-width: 10px; }
.hl-ov-balance-main { display: flex; align-items: center; gap: 16px; flex: 1 1 220px; }
.hl-ov-balance-main > .mdi { font-size: 2.5rem; line-height: 1; }
.hl-ov-label { margin: 0; font-size: .9rem; font-weight: 700; }
.hl-ov-big { margin: 0; font-size: 2.6rem; line-height: 1.1; font-weight: 700; }
.hl-ov-big .hl-tralala-symbol { width: .8em; height: .8em; }
.hl-ov-value { margin: 0; font-size: 1.5rem; font-weight: 700; }
.hl-ov-renewal { flex: 2 1 320px; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.hl-ov-renewal-head { margin: 0; display: flex; gap: 8px; align-items: flex-start; }
.hl-ov-state { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 700; }
.hl-ov-state.is-warn { padding: 8px 12px; border: 2px solid var(--hl-black); border-left-width: 8px; background: var(--hl-gray); color: var(--hl-black); border-radius: var(--hl-radius); }
.hl-ov-balance .hl-tralala-actions { flex: 1 1 100%; margin-top: 0; }
.hl-ov-facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px 16px; }
.hl-ov-fact dt { font-size: .8rem; font-weight: 400; text-transform: uppercase; letter-spacing: .04em; }
.hl-ov-fact dd { margin: 0; font-weight: 700; }
.hl-ov-free { display: inline-block; padding: 0 8px; border: 1px solid var(--hl-black); border-radius: 12px; background: var(--hl-green); color: #1A1A1A; }
.hl-ov-note { margin: 0; font-size: .9rem; }
.hl-ov-bar { height: 14px; border: 2px solid var(--hl-black); border-radius: 7px; background: var(--hl-white); overflow: hidden; }
.hl-ov-bar-fill { display: block; height: 100%; background: var(--hl-black); }
.hl-ov-bar.is-warn .hl-ov-bar-fill { background: repeating-linear-gradient(45deg, var(--hl-black) 0 4px, var(--hl-yellow) 4px 8px); }
.hl-ov-bar.is-full { border-width: 3px; }
.hl-ov-ident { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hl-ov-logo { width: 40px; height: 40px; flex: none; border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; border: 1px solid var(--hl-black); }
.hl-ov-total { margin: 16px 0 0; padding: 12px 16px; border: 2px solid var(--hl-black); border-radius: var(--hl-radius); background: var(--hl-yellow); color: #1A1A1A; font-weight: 700; font-size: 1.1rem; }
.hl-ov-total-detail { font-weight: 400; font-size: .95rem; }
.hl-ov-readonly { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; border-style: dashed; }
.hl-ov-stack { display: flex; height: 26px; border: 2px solid var(--hl-black); border-radius: 13px; overflow: hidden; background: var(--hl-white); margin-bottom: 16px; }
.hl-ov-seg { display: block; height: 100%; border-right: 1px solid var(--hl-black); }
.hl-ov-seg:last-child { border-right: 0; }
.hl-ov-seg--storage { background: var(--hl-yellow); }
.hl-ov-seg--members { background: var(--hl-green); }
.hl-ov-seg--groups { background: var(--hl-tag-video); }
.hl-ov-seg--events { background: var(--hl-tag-enregistrement); }
.hl-ov-dot { width: 16px; height: 16px; border: 1px solid var(--hl-black); border-radius: 50%; display: inline-block; }
.hl-ov-usage { gap: 4px; }
.hl-ov-usage--total { border-width: 2px; }
.hl-ov-lots { list-style: none; margin: 0; padding: 0 0 0 20px; border-left: 3px solid var(--hl-black); display: flex; flex-direction: column; gap: 16px; }
.hl-ov-lot { position: relative; padding: 12px 16px; border: 1px solid var(--hl-black); border-radius: var(--hl-radius); background: var(--hl-white); color: var(--hl-black); display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: center; }
.hl-ov-lot::before { content: ""; position: absolute; left: -29px; top: 20px; width: 14px; height: 14px; border: 3px solid var(--hl-black); border-radius: 50%; background: var(--hl-yellow); }
.hl-ov-lot-text { margin: 0; grid-column: 1 / -1; }
.hl-ov-lot .hl-ov-bar { grid-column: 1 / -1; height: 10px; }
.hl-ov-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border: 1px solid #1A1A1A; border-radius: 14px; background: var(--hl-gray); color: #1A1A1A; font-weight: 700; font-size: .9rem; }
.hl-ov-section a:focus-visible,
.hl-ov-section button:focus-visible,
.hl-ov-section summary:focus-visible { outline: 3px solid var(--hl-black); outline-offset: 2px; box-shadow: 0 0 0 5px var(--hl-yellow); }
[data-theme="dark"] .hl-ov-bar,
[data-theme="stage"] .hl-ov-bar { background: #1A1A1A; border-color: #FFFFFF; }
[data-theme="dark"] .hl-ov-bar-fill,
[data-theme="stage"] .hl-ov-bar-fill { background: var(--hl-yellow); }
[data-theme="dark"] .hl-ov-bar.is-warn .hl-ov-bar-fill,
[data-theme="stage"] .hl-ov-bar.is-warn .hl-ov-bar-fill { background: repeating-linear-gradient(45deg, var(--hl-yellow) 0 4px, #1A1A1A 4px 8px); }
@media (max-width: 575.98px) {
    .hl-ov-big { font-size: 2rem; }
    .hl-ov-grid { grid-template-columns: 1fr; }
    .hl-ov-balance { border-left-width: 6px; }
    .hl-ov-lot { grid-template-columns: 1fr; }
}

.hl-plan-summary { margin: 0 0 12px; }
.hl-plan-markers { position: relative; list-style: none; margin: 0; padding: 0; height: 36px; }
.hl-plan-marker { position: absolute; bottom: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; font-size: .75rem; font-weight: 700; line-height: 1.1; color: var(--hl-black); }
.hl-plan-marker.is-current { transform: translateX(-100%); align-items: flex-end; }
.hl-plan-marker-arrow { font-size: .7rem; }
.hl-plan-meter-track { display: block; height: 6px; border: 1px solid var(--hl-black); border-radius: 3px; background: var(--hl-gray); overflow: hidden; }
.hl-plan-meter-fill { display: block; height: 100%; min-width: 2px; background: var(--hl-black); }
.hl-plan-legend { display: flex; justify-content: space-between; gap: 8px; margin: 4px 0 12px; font-size: .875rem; }
[data-theme="dark"] .hl-plan-marker,
[data-theme="stage"] .hl-plan-marker { color: var(--hl-white); }
[data-theme="dark"] .hl-plan-meter-track,
[data-theme="stage"] .hl-plan-meter-track { border-color: var(--hl-white); background: var(--hl-black); }
[data-theme="dark"] .hl-plan-meter-fill,
[data-theme="stage"] .hl-plan-meter-fill { background: var(--hl-yellow); }

.hl-welcome {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin: 0 0 16px;
    padding: 14px 16px;
    background: #CDDDD5;
    color: #1A1A1A;
    border: 1.5px solid #1A1A1A;
    border-radius: 10px;
}

.hl-welcome--inline,
.hl-welcome--dialog {
    margin: 12px 0;
}

.hl-welcome-icon {
    font-size: 2rem;
    line-height: 1;
}

.hl-welcome-text {
    flex: 1 1 260px;
    min-width: 0;
}

.hl-welcome-title {
    margin: 0;
    font-weight: 700;
}

.hl-welcome-status {
    margin: 4px 0 0;
}

.hl-welcome-status:empty {
    display: none;
}

.hl-welcome .hl-btn {
    min-height: 44px;
}

.hl-welcome-li:has(lod-welcome-offer[hidden]),
.hl-welcome-li:has(lod-welcome-offer:empty) {
    display: none;
}

.hl-header-quota {
    display: inline-flex;
    flex: 0 1 auto;
    align-items: stretch;
    min-width: 0;
    min-height: 44px;
    border: 1.5px solid var(--encre);
    border-radius: 22px;
    background: var(--surface);
    color: var(--encre);
}
.hl-header-quota lod-storage-meter:not([hidden]) + lod-tralala-balance:not([hidden]) { border-left: 1px solid var(--encre); }
.hl-header-quota .hl-storage-meter-link { height: 100%; padding: 0 12px; border-radius: 22px 0 0 22px; }
.hl-header-quota .hl-tralala-pill { height: 100%; border: 0; border-radius: 0 22px 22px 0; background: transparent; }
.hl-header-quota lod-storage-meter[hidden] + lod-tralala-balance .hl-tralala-pill { border-radius: 22px; }
.hl-header-quota .hl-tralala-pill:hover,
.hl-header-quota .hl-storage-meter-link:hover { background: var(--surface-2); }
.hl-header-quota .hl-tralala-pill:focus-visible,
.hl-header-quota .hl-storage-meter-link:focus-visible { outline: 3px solid var(--encre); outline-offset: -3px; }
.hl-header-balance { position: relative; }
.hl-tralala-pill.has-alert { position: relative; }
.hl-tralala-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 2px solid #1A1A1A;
    border-radius: 50%;
    background: #FCE200;
    color: #1A1A1A;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1;
}
.hl-tralala-tip {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1100;
    width: max-content;
    max-width: min(300px, 90vw);
    padding: 8px 12px;
    border: 2px solid #FCE200;
    border-radius: 8px;
    background: #1A1A1A;
    color: #FFFFFF;
    font-size: .85rem;
    font-weight: 400;
    white-space: normal;
}
.hl-tralala-tip[hidden] { display: none; }
@media (max-width: 575.98px) {
    .hl-header-quota .hl-storage-meter-link { padding: 0 8px; }
}

.hl-quota-layout { display: block; }
.hl-page-nav { margin: 0 0 24px; }
.hl-page-nav-box { border: 1px solid var(--encre); border-radius: 8px; background: var(--surface); color: var(--encre); }
.hl-page-nav-summary { display: flex; align-items: center; min-height: 44px; padding: 0 12px; font-weight: 700; cursor: pointer; }
.hl-page-nav-summary:focus-visible,
.hl-page-nav-link:focus-visible { outline: 3px solid var(--encre); outline-offset: -3px; }
.hl-page-nav-list { list-style: none; margin: 0; padding: 0 0 8px; }
.hl-page-nav-link { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-left: 4px solid transparent; color: inherit; text-decoration: none; }
.hl-page-nav-link.is-level-1 { padding-left: 28px; font-size: .9rem; }
.hl-page-nav-link:hover { background: var(--surface-2); text-decoration: underline; }
.hl-page-nav-link[aria-current="location"] { border-left-color: var(--encre); background: var(--surface-2); font-weight: 700; }
.hl-page-nav-link[aria-current="location"]::after { content: "\2022"; margin-left: auto; padding-left: 8px; }
.hl-page-target { scroll-margin-top: 96px; }
.hl-page-target:focus { outline: 3px solid var(--encre); outline-offset: 4px; }
.hl-page-target.is-highlight { background: #FCE200; color: #1A1A1A; outline: 3px solid #1A1A1A; outline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) {
    .hl-page-target.is-highlight { animation: hl-target-flash 1.4s ease-out; }
}
@keyframes hl-target-flash { from { background: #FCE200; } to { background: transparent; } }
@media (min-width: 992px) {
    .hl-quota-page { max-width: 1320px; }
    .hl-quota-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; align-items: start; }
    .hl-page-nav { position: sticky; top: 96px; margin: 0; max-height: calc(100vh - 112px); overflow-y: auto; }
    .hl-page-nav-summary { display: none; }
}
.hl-quota-plan { margin: 16px 0; }

.hl-ov-usage-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hl-ov-usage-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }

.hl-ts { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.hl-ts:empty { display: none; }
.hl-ts-legend { margin: 0; font-size: .8rem; color: var(--hl-black); }
.hl-ts-names { list-style: none; margin: 0; padding: 0; position: relative; height: 46px; }
.hl-ts-tier { position: absolute; top: 0; margin: 0; padding: 0; transform: translateX(-50%); }
.hl-ts-tier:last-child { transform: translateX(-100%); }
.hl-ts-name { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; min-width: 44px; min-height: 44px; padding: 4px 8px 0; border: 2px solid transparent; border-radius: var(--hl-radius); background: transparent; color: var(--hl-black); font: inherit; font-weight: 700; cursor: pointer; }
.hl-ts-name.is-last { align-items: flex-end; }
.hl-ts-name-text { display: inline-flex; align-items: center; min-height: 24px; }
.hl-ts-pointer { display: block; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 10px solid var(--hl-black); }
.hl-ts-name.is-selectable { border-color: var(--hl-black); background: var(--hl-white); }
.hl-ts-name.is-selectable:hover { background: var(--hl-yellow); color: #1A1A1A; }
.hl-ts-name.is-disabled { border: 2px dashed var(--hl-black); background: var(--hl-gray); color: #1A1A1A; cursor: not-allowed; }
.hl-ts-name.is-current { border-color: var(--hl-black); background: var(--hl-yellow); color: #1A1A1A; cursor: default; }
.hl-ts-name.is-planned { border-color: var(--hl-black); background: var(--hl-white); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 3px; }
.hl-ts-dot { display: inline-block; width: 8px; height: 8px; margin-left: 4px; border: 2px solid var(--hl-black); border-radius: 50%; background: var(--hl-yellow); }
.hl-ts-tip { position: fixed; z-index: 2000; display: flex; flex-direction: column; gap: 2px; max-width: min(18rem, calc(100vw - 16px)); padding: 8px 12px; border: 2px solid #FFFFFF; border-radius: var(--hl-radius); background: #1A1A1A; color: #FFFFFF; font-size: .85rem; box-shadow: 0 0 0 2px #1A1A1A, 0 4px 12px rgba(0, 0, 0, .35); }
.hl-ts-tip[hidden] { display: none; }
.hl-ts-tip-code { font-size: 1rem; }
.hl-ts-tip-note { font-weight: 700; color: #FCE200; }
.hl-ts-lowest { margin: 0; display: flex; align-items: center; gap: 6px; font-size: .9rem; color: var(--hl-black); }
.hl-ts-scroll { overflow-x: auto; overflow-y: hidden; padding: 4px 0 8px; }
.hl-ts-inner { width: 100%; }
.hl-ts-track { position: relative; display: flex; height: 22px; margin: 0 0 40px; border: 2px solid var(--hl-black); border-radius: 11px; background: var(--hl-white); width: 100%; }
.hl-ts-fill { position: absolute; left: 0; top: 0; bottom: 0; z-index: 0; border-radius: 9px 0 0 9px; background: var(--hl-black); }
.hl-ts-seg { position: relative; z-index: 1; flex: 0 0 auto; height: 100%; border-right: 2px solid var(--hl-black); background: transparent; box-shadow: 1px 0 0 var(--hl-white), inset -1px 0 0 var(--hl-white); }
.hl-ts-seg:last-of-type { border-right: 0; }
.hl-ts-seg.is-planned { background: repeating-linear-gradient(45deg, var(--hl-gray) 0 4px, var(--hl-white) 4px 8px); color: #1A1A1A; }
.hl-ts-marker { position: absolute; z-index: 2; top: -6px; bottom: -36px; width: 0; pointer-events: none; }
.hl-ts-marker-line { position: absolute; left: -2px; top: 0; bottom: 26px; width: 4px; background: var(--hl-black); box-shadow: 0 0 0 2px var(--hl-white); }
.hl-ts-marker-label { position: absolute; bottom: 0; left: 0; transform: translateX(-50%); white-space: nowrap; padding: 1px 8px; border: 2px solid var(--hl-black); border-radius: 10px; background: var(--hl-white); color: var(--hl-black); font-size: .8rem; font-weight: 700; }
.hl-ts-marker.is-start .hl-ts-marker-label { transform: none; }
.hl-ts-marker.is-end .hl-ts-marker-label { transform: translateX(-100%); }
.hl-ts-pending, .hl-ts-alert { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 12px; border: 2px solid var(--hl-black); border-left-width: 8px; border-radius: var(--hl-radius); background: var(--hl-gray); color: #1A1A1A; }
.hl-ts-alert { flex-direction: column; align-items: flex-start; border-width: 3px; border-left-width: 10px; }
.hl-ts-pending-text, .hl-ts-alert-text { margin: 0; display: flex; align-items: flex-start; gap: 6px; font-weight: 700; }
.hl-ts-action-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.hl-ts .hl-btn { min-height: 44px; }
.hl-ts-status { min-height: 0; font-size: .9rem; font-weight: 700; }
.hl-ts-status:empty { display: none; }
.hl-ts button:focus-visible, .hl-ts-status:focus-visible { outline: 3px solid var(--hl-black); outline-offset: 2px; box-shadow: 0 0 0 5px var(--hl-yellow); }
.hl-ts button[aria-disabled="true"].hl-btn { opacity: .6; cursor: not-allowed; }
[data-theme="dark"] .hl-ts-track, [data-theme="stage"] .hl-ts-track { background: #1A1A1A; border-color: #FFFFFF; }
[data-theme="dark"] .hl-ts-seg, [data-theme="stage"] .hl-ts-seg { color: #FFFFFF; border-color: #FFFFFF; box-shadow: 1px 0 0 #1A1A1A, inset -1px 0 0 #1A1A1A; }
[data-theme="dark"] .hl-ts-fill, [data-theme="stage"] .hl-ts-fill { background: #FFFFFF; }
[data-theme="dark"] .hl-ts-seg.is-current, [data-theme="stage"] [data-theme="dark"] .hl-ts-marker-line, [data-theme="stage"] .hl-ts-marker-line { background: var(--hl-yellow); box-shadow: 0 0 0 2px #1A1A1A; }
[data-theme="dark"] .hl-ts-marker-label, [data-theme="stage"] .hl-ts-marker-label { background: #1A1A1A; color: #FFFFFF; border-color: #FFFFFF; }
[data-theme="dark"] .hl-ts-lowest, [data-theme="stage"] .hl-ts-lowest { color: #FFFFFF; }
[data-theme="dark"] .hl-ts-name, [data-theme="stage"] .hl-ts-name { color: #FFFFFF; }
[data-theme="dark"] .hl-ts-pointer, [data-theme="stage"] .hl-ts-pointer { border-top-color: #FFFFFF; }
[data-theme="dark"] .hl-ts-name.is-selectable, [data-theme="stage"] .hl-ts-name.is-selectable, [data-theme="dark"] .hl-ts-name.is-planned, [data-theme="stage"] .hl-ts-name.is-planned { background: #1A1A1A; border-color: #FFFFFF; }
[data-theme="dark"] .hl-ts-name.is-selectable:hover, [data-theme="stage"] .hl-ts-name.is-selectable:hover { background: var(--hl-yellow); color: #1A1A1A; }
[data-theme="dark"] .hl-ts-name.is-disabled, [data-theme="stage"] .hl-ts-name.is-disabled { background: #333333; border-color: #FFFFFF; }
[data-theme="dark"] .hl-ts-name.is-current, [data-theme="stage"] .hl-ts-name.is-current { background: var(--hl-yellow); color: #1A1A1A; border-color: #FFFFFF; }
[data-theme="dark"] .hl-ts-legend, [data-theme="stage"] .hl-ts-legend { color: #FFFFFF; }
[data-theme="dark"] .hl-ts button:focus-visible, [data-theme="stage"] .hl-ts button:focus-visible { outline-color: #FFFFFF; box-shadow: 0 0 0 5px #1A1A1A; }

.hl-group-menu {
    width: max-content;
    min-width: 16rem;
    max-width: min(22rem, calc(100vw - 2rem));
    padding: .25rem 0;
}
.hl-group-menu .dropdown-header {
    color: var(--texte-3);
    font-size: .8125rem;
    font-weight: 700;
}
.hl-group-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.hl-group-logo {
    display: inline-block;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
    border: 1px solid var(--gris);
}
.hl-group-row-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hl-group-role {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    font-size: 1.25rem;
    color: var(--encre);
}
.hl-group-row-main .dropdown-item:focus-visible,
.hl-group-gear:focus-visible {
    outline: 3px solid var(--encre);
    outline-offset: -3px;
}
.hl-invitation-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.hl-invitation-button {
    min-height: 44px;
    min-width: 44px;
}
.hl-invitation-button:focus-visible {
    outline: 3px solid var(--encre);
    outline-offset: 2px;
}

lod-countin-button {
    display: contents;
}

.hl-countin-wrap .hl-countin-state {
    max-width: 64px;
    white-space: normal;
    overflow-wrap: anywhere;
}

.hl-bp-foot .hl-countin-wrap {
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
}

.hl-bp-foot .hl-countin-button {
    border-color: var(--bp-line);
    background: var(--bp-bg);
    color: var(--bp-fg);
}

.hl-bp-foot .hl-countin-button.is-active {
    background: var(--hl-yellow);
    color: #1a1a1a;
}

.hl-bp-foot .hl-countin-state {
    color: var(--bp-sub);
}

.hl-countin-button:focus-visible {
    outline: 3px solid var(--encre);
    outline-offset: 2px;
}

.hl-stage-split {
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
    border-radius: 8px;
}

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

.hl-stage-split .hl-stage-act {
    min-height: 44px;
}

.hl-stage-split-main {
    border-radius: 8px 0 0 8px;
}

.hl-stage-split-main:only-child {
    border-radius: 8px;
}

.hl-stage-split-arrow {
    min-width: 44px;
    padding: 4px 6px;
    border-left: 1px solid rgba(255, 255, 255, .35);
    border-radius: 0 8px 8px 0;
}

.hl-stage-split-arrow i {
    font-size: 1.5rem;
    transition: transform .15s ease;
}

.hl-stage-split-arrow[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.hl-stage-split-arrow[aria-expanded="true"] {
    border-left-color: #1a1a1a;
}

.hl-stage-split-main:hover:not([aria-disabled="true"]),
.hl-stage-split-arrow:hover {
    background: rgba(255, 255, 255, .14);
}

.hl-stage-bar .hl-stage-split-arrow[aria-expanded="true"]:hover {
    background: var(--hl-yellow);
}

.hl-stage-split-main.is-playing {
    background: rgba(252, 226, 0, .22);
    box-shadow: inset 0 -3px 0 var(--hl-yellow);
}

.hl-stage-split-main[aria-disabled="true"] {
    color: #8d9598;
    cursor: not-allowed;
}

.hl-stage-split-main:focus-visible,
.hl-stage-split-arrow:focus-visible {
    position: relative;
    z-index: 1;
}

.hl-bp-note {
    margin: 0;
    padding: 2px 8px;
    font-size: .8rem;
    opacity: .85;
}

.hl-bp-note[hidden] {
    display: none;
}

@media (max-width: 599.98px) {
    .hl-stage-foot .hl-stage-actions {
        flex-wrap: wrap;
        row-gap: 2px;
    }
    .hl-stage-split .hl-stage-act {
        padding: 4px 6px;
    }
    .hl-stage-split-main {
        min-width: 44px;
    }
    .hl-stage-split-arrow {
        min-width: 32px;
        padding: 4px 2px;
    }
}