.embed-audio
{
    display:flex;
    justify-content:center;
    width:100%;
    margin:auto;
    background:var(--color4);
    .mp3_main
    {
        display:none;
    }
    .audios
    {
        max-width:400px;
        margin:auto;
    }
}

.audios
{
    text-align:center;
    width:100%;
    margin:0;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    padding:0;
    box-sizing:border-box;
}
.mp3_main
{
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:center;
    width:100%;
    margin-top:5px;
    padding:13px 5px;
    border:1px solid var(--border);
    border-radius:0.35rem;
}
.mp3_main .help
{
    position:relative;
    top:100%;
    width:100%;
    height:30px;
    text-align:left;
    color:var(--color3);
    font-size: 12px;
    font-style: italic;
    margin-top: 10px;
}
.mp3_intro
{
    text-align:left;
    padding-bottom:10px;
}
.mp3_item
{
    margin:0px;
    text-align:center;
    width:100%;
    border:none;
}
.mp3_header
{
    position:relative;
    width:100%;
    display:flex;
    align-items:center;
    background:var(--surface);
}

.mp3_item-content
{
    position:relative;
    padding:0;
    display:flex;
    align-items: stretch;
    overflow:hidden;
}
.audio_src
{
    display:none;
}

.audio_num,
.audio_num2
{
    position:relative;
    z-index:3;
    font-size:15px;
    pointer-events:none;
    letter-spacing:0.05em;
    height:100%;
    border:none;
    white-space:nowrap;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 15px;
    color:#fff;
    clip-path:polygon(0% 0%, var(--percent) 0%, var(--percent) 100%, 0% 100%);
}
.audio_num2
{
    position:absolute;
    width:100%;
    top:0;
    left:0;
    padding:0;
    clip-path:polygon(var(--percent) 0%, 100% 0%, 100% 100%, var(--percent) 100%);
    color:var(--text);
}

.mp3_name
{
    font-size:11px;
    color:black;
    font-weight:normal;
    letter-spacing:0.05em;
    text-transform:uppercase;
    padding:0 10px;
}
.instrument_image
{
    position:relative;
    width:50px;
    height:35px;
    background:transparent;
}
.instrument_image img
{
    position:absolute;
    top:50%;
    left:50%;
    transform:translateX(-50%) translateY(-50%);
    width:60%;
    height:90%;
    object-fit:contain;
    object-position:center center;
}
.audio_player-container
{
    --audio-chrome: var(--border);
    --audio-track: var(--color8);
    --audio-surface: transparent;
    width:100%;
    padding:0;
    display:flex;
    flex-direction:column;
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    align-items:stretch;
    background:var(--surface);
    overflow:hidden;
    box-sizing:border-box;
}
.audio_player
{
    display:flex;
    width:100%;
    flex-direction:row;
    align-items:stretch;
    background:var(--surface);
    border-bottom:1px solid var(--audio-chrome);
}
.audio_icon
{
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    text-transform:uppercase;
    font-size:16px;
    letter-spacing:0.05em;
    width:100%;
    background:var(--surface);
    border:none;
    border-right:1px solid var(--audio-chrome);
    height:40px;
    transition:background 0.15s ease;
}
.audio_icon:last-child
{
    border-right:none;
}
.audio_icon:hover
{
    background:var(--color8);
    filter:none;
}
.loading .audio_icon
{
    opacity:0.3;
}
.audio_icon:focus
{
    outline:2px solid var(--color5);
    outline-offset:-2px;
    filter:none;
}
.audio_restart
{
}
.audio_player img
{
    height:40%;
}
img
{
    font-size:0;
}
.audio_play
{
}
.audio_speed
{
    margin:0;
    padding:0.35rem 0.5rem;
    background:var(--surface);
    color:var(--text);
    text-transform:uppercase;
    letter-spacing:0.10em;
    font-size:11px;
    width:100%;
    box-sizing:border-box;
    border-top:1px solid var(--audio-chrome);
}
.audio_speed button
{
    background:var(--surface);
    color:var(--text);
    border:1px solid var(--audio-chrome);
    border-radius:0.25rem;
    font-weight:bold;
    font-size:inherit;
    padding:5px;
    width:60px;
    height:32px;
    cursor:pointer;
}
.audio_speed button:hover
{
    background:var(--color8);
    filter:none;
}
.current_speed
{
    display:inline-block;
    width:80px;
}
.audio_num-container
{
    display:flex;
    width:100%;
    flex-direction:row;
}
.audio_percent
{
    position:relative;
    width:100%;
    background:var(--audio-track, var(--color8));
    margin-left:0;
    height:40px;
    min-height:40px;
    margin-top:1px;
    --percent:0%;
    cursor:pointer;
}
.audio_percent:before
{
    content:'';
    position:absolute;
    top:0px;
    left:0px;
    width:var(--percent);
    height:calc(100% - 0px);
    background:var(--color5);
}
.partitura_dl
{
    font-size:13px;
    line-height:2em;
}
.partitura_dl ul
{
    padding:0 0 0 5px;
    list-style:none;
}
.partitura_transpose
{
    grid-column-start:1;
    grid-row-start:3;
    margin-top:0.75em;
}
.partitura_transpose_title
{
    display:inline-flex;
    align-items:center;
    gap:0.35em;
    margin:0 0 0.35em 0;
    padding:8px 15px;
    font-size:12px;
    font-family:inherit;
    color:var(--color4);
    background:var(--color3);
    border:none;
    border-radius:5px;
    cursor:pointer;
    text-align:left;
}
.partitura_transpose_title:hover
{
    opacity:0.8;
}
.partitura_transpose_chevron
{
    display:inline-block;
    width:0;
    height:0;
    border-left:0.35em solid transparent;
    border-right:0.35em solid transparent;
    border-top:0.4em solid currentColor;
    transition:transform 0.2s ease;
}
.partitura_transpose.is_collapsed .partitura_transpose_chevron
{
    transform:rotate(-90deg);
}
.partitura_transpose.is_collapsed .transpose_keys
{
    display:none;
}
.partitura_transpose .transpose_keys
{
    list-style:none;
    padding:0;
    margin:0;
    width:100%;
    border:1px solid #ddd;
    border-radius:6px;
    background:#fafafa;
    box-shadow:0 1px 2px rgba(0,0,0,0.05);
}
.partitura_transpose .transpose_keys li
{
    border-bottom:1px solid #eee;
}
.partitura_transpose .transpose_keys li:last-child
{
    border-bottom:none;
}
.partitura_transpose .transpose_key_link
{
    display:block;
    font-size:0.9em;
    padding:0.4em 0.65em;
    color:#333;
    text-decoration:none;
    transition:background 0.15s ease, color 0.15s ease;
}
.partitura_transpose .transpose_key_link:hover
{
    background:#e8e8e8;
    color:#000;
}
.pdf:before
{
    content:'';
    position:relative;
    top:-2px;
    display:block;
    width:3em;
    background:url(../images/pdf.svg) center center no-repeat;
    background-size:auto 100%;
    height:1.5em;
}
.pdf
{
    display:flex;
    align-items:center;
    color:var(--color3);
    margin-bottom:5px;
}

.popin
{
    position:fixed;
    z-index:3;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.7);
    cursor:pointer;
}
.iframe_container
{
    position:absolute;
    top:50%;
    left:50%;
    transform:translateY(-50%) translateX(-50%);
    width:calc(100% - 30px);
    max-width:800px;
}
.popin_close
{
    position:absolute;
    cursor:pointer;
    right:-20px;
    top:-20px;
    width:40px;
    height:40px;
    font-size:20px;
    font-weight:bold;
    background:white;
    z-index:3;
}
.iframe
{
    position:relative;
    padding-top:56.25%;
}
.iframe_container iframe
{
    position:absolute;
    top:0%;
    left:0%;
    width:100%;
    height:100%;
    background:white;
}

.audio_loading
{
    background:white;
    display:none;
    justify-content:center;
    align-items:center;
    color:black;
    font-size:1em;
    height:100%;
    position:absolute;
    left:0;
    width:100%;
}
.loading .audio_loading
{
    display:flex;
}

/* Loading state styles */
.audio_player-container.loading {
    opacity: 0.7;
    pointer-events: none;
}

.audio_player-container.loading .audio_loading {
    display: inline-block !important;
    color: var(--color3);
    font-weight: bold;
    animation: pulse 1.5s ease-in-out infinite;
    text-align: center;
    width: 100%;
}

.audio_player-container.loading .audio_current,
.audio_player-container.loading .audio_total {
    display: none;
}

.audio_player-container:not(.loading) .audio_loading {
    display: none;
}

.audio_loading {
    font-size: 12px;
    color: var(--color3);
    font-style: italic;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

@media all and (max-width: 1005px)
{
    .audios
    {
        display:grid;
        align-items:flex-start;
        grid-template-columns:1fr 1fr;
        grid-gap:0px;
        padding-bottom:10px;
        margin:auto;
    }
    .mp3_main
    {
        margin-top:0;
    }
    .mp3_name
    {
        font-size:9px;
    }
    .audio_icon
    {
        height:38px;
    }
    .audio_speed button
    {
        width:40px;
        height:30px;

    }
    .audio_num,
    .audio_num2
    {
        font-size:15px;
    }
    .instrument_image
    {
        height:33px;
    }
    .instrument_image img
    {
        height:60%;
    }
    .partitura_dl
    {
        font-size:10px;
    }
    .partitura_dl p
    {
        margin:20px 0 10px 0;
    }
}

/* Too small width for player */
@media all and (max-width: 600px)
{
    .audios
    {
        grid-template-columns:1fr;
    }
}



/* MP3 Enable/Disable Controls */
.mp3_controls {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 0px 8px 8px;
    flex-shrink: 0;
}

.mp3_enable_toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.mp3_enable_checkbox {
    display: none;
}

.toggle_slider {
    position: relative;
    width: 36px;
    height: 18px;
    background-color: #ccc;
    border-radius: 9px;
    transition: background-color 0.3s;
}

.toggle_slider:before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s;
}

.mp3_enable_checkbox:checked + .toggle_slider {
    background-color: var(--green);
}

.mp3_enable_checkbox:checked + .toggle_slider:before {
    transform: translateX(18px);
}

.toggle_label {
    font-size: 11px;
    color: var(--color3);
    font-weight: bold;
    text-transform: uppercase;
}

/* ── Fiche partition (.partitura-view) ───────────────────────────── */

.partitura-view .partitura_content > .audios {
    --audios-radius: var(--radius-md);
    width: 100%;
    margin: 0 0 1rem;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.partitura-view .audios > .audio_player-container,
.partitura-view .audios > .mp3_main {
    border-radius: var(--audios-radius);
    overflow: hidden;
}

.partitura-view .audios > .audio_player-container {
    border: 1px solid var(--border);
}

.partitura-view .audios > .mp3_main {
    margin-top: 0;
    padding: 0.65rem 0.5rem 0.5rem;
    box-sizing: border-box;
    background: var(--surface);
}

.partitura-view .mp3_main .help {
    position: static;
    top: auto;
    width: auto;
    height: auto;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--text);
    opacity: 0.7;
    text-align: left;
}

@media all and (max-width: 1005px) {
    .partitura-view .audios {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        margin: 0 0 1rem;
        order: 3;
    }
}