/* ========================= TOGGLE ========================= */

#menuToggle {
    position: fixed;
    top: calc(30px * var(--scale));
    left: calc(10px * var(--scale));
    z-index: 10;
}

#menuToggle input {
    width: calc(50px * var(--scale));
    height: calc(40px * var(--scale));
    position: absolute;
    top: calc(-6px * var(--scale));
    left: calc(-5px * var(--scale));
    cursor: pointer;
    opacity: 0;
    z-index: 200;
}

/* ========================= HAMBURGER ========================= */

#menuToggle span {
    display: block;
    width: calc(50px * var(--scale));
    height: calc(8px * var(--scale));
    margin-bottom: calc(6px * var(--scale));

    background: linear-gradient(to bottom, #8b6b4e, #5a3f2c);

    border-radius: calc(6px * var(--scale));
    border: 1px solid rgba(61, 42, 29, 0.9);

    transition: all .4s ease;

    box-shadow:
        0 calc(1px * var(--scale)) 0 rgba(255,255,255,0.2) inset,
        0 calc(-1px * var(--scale)) 0 rgba(0,0,0,0.14) inset,
        0 calc(3px * var(--scale)) 0 #3b281c,
        0 calc(6px * var(--scale)) calc(12px * var(--scale)) rgba(0,0,0,0.22);
}

#menuToggle input:checked ~ span {
    transform: rotate(45deg);
}

#menuToggle input:checked ~ span:nth-last-child(3) {
    opacity: 0;
}

#menuToggle input:checked ~ span:nth-last-child(2) {
    transform: rotate(-45deg);
}

/* ========================= MENU PANEL ========================= */

#menu {
    position: absolute;

    width: clamp(
        calc(260px * var(--scale)),
        calc(50vw * var(--scale)),
        calc(900px * var(--scale))
    );

    max-height: 90vh;

    margin: calc(-100px * var(--scale)) 0 0 calc(-50px * var(--scale));
    padding: calc(24px * var(--scale)) calc(20px * var(--scale)) calc(20px * var(--scale)) calc(80px * var(--scale));

    overflow-y: auto;
    list-style: none;

    background: linear-gradient(to bottom, rgba(255,250,244,0.97), rgba(228,203,171,0.92));

    border-radius: calc(42px * var(--scale));
    border: 1px solid rgba(98,58,28,0.28);

    box-shadow:
        0 calc(2px * var(--scale)) 0 rgba(255,255,255,0.55) inset,
        0 calc(-2px * var(--scale)) 0 rgba(120,70,30,0.10) inset,
        0 calc(6px * var(--scale)) 0 rgba(120,70,30,0.22),
        0 calc(12px * var(--scale)) calc(22px * var(--scale)) rgba(0,0,0,0.22);

    transform: translateX(-100%);
    transition: transform .4s ease;
}

#menuToggle input:checked ~ ul {
    transform: none;
}

/* ========================= TYPO ========================= */

#menu li {
    padding: calc(10px * var(--scale)) 0;
    font-size: calc(20px * var(--scale));
    border-bottom: 1px solid rgba(74,36,17,0.1);
}

#menu a {
    display: block;
    text-decoration: none;
    color: #4a2411;
    font-family: "texte";
    transition: .2s;
}

#menu a:hover {
    transform: translateX(calc(5px * var(--scale)));
}

/* ========================= STRUCTURE ========================= */

.menu-player {
    font-size: calc(18px * var(--scale));
    font-weight: bold;
}

.menu-home {
    font-size: calc(28px * var(--scale));
}

/* catégories */

.menu-category {
    text-align: center;
    margin-top: calc(20px * var(--scale));
    margin-bottom: calc(10px * var(--scale));

    padding: calc(12px * var(--scale));

    font-family: "titres";

    font-size: calc(42px * var(--scale));

    border-radius: calc(18px * var(--scale));

    background: linear-gradient(to bottom, rgba(255,248,238,0.94), rgba(235,214,186,0.88));
}

/* ========================= LOCK ========================= */

.locked {
    opacity: .5;
}

.unlock {
    font-size: calc(14px * var(--scale));
    margin-left: calc(10px * var(--scale));
}

/* ========================= GRID ========================= */

.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(calc(95px * var(--scale)), 1fr));
    gap: calc(12px * var(--scale));
}

.menu-grid a {
    height: calc(95px * var(--scale));

    border-radius: calc(16px * var(--scale));

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

    transition: .2s;
}

.menu-grid span {
    font-size: calc(13px * var(--scale));
}

/* ========================= ANIMATION ========================= */

.menu-section-item {
    overflow: hidden;
    transition: max-height .35s ease, opacity .25s ease;
}

.menu-section-item.is-hidden {
    max-height: 0 !important;
    opacity: 0;
}