.entete {
    position: sticky;
    top: 0;
    width: 100%;

    box-sizing: border-box;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(5px);

    padding: 1rem;

    gap: 1rem;

    z-index: 1000;

    transition: transform 200ms ease-in-out;

    body:has(main > .presentation) & {
        display: none !important;
    }

    &.entete-cache {
        transform: translateY(-100%);
    }

    .logo {
        z-index: 1;

        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 2rem;

        cursor: pointer;
        
        img {
            width: 4rem;
            height: 4rem;
            object-fit: contain;
            object-position: center;
        }
    }

    --largeur-burger: 2rem;
    .burger {
        width: var(--largeur-burger);
        height: 2rem;

        padding: 0;

        border-radius: 0.25rem;

        background: none;

        border-width: 0.063rem;
        border-style: solid;
        border-color: transparent;

        transition: border-color 200ms ease-in-out;

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

        &.trigger {
            animation-name: trigger;
            animation-duration: 1s;
            animation-timing-function: linear;
        }

        & > svg {
            fill: white;
            display: block;

            width: 1.75rem;
            height: 1.75rem;
        }

        &:hover {
            border-color: white;
        }
    }
    .reflet-burger {
        width: var(--largeur-burger);
    }
}

body:has(main.chargement) .entete {
    pointer-events: none;
}

@keyframes trigger {
    0% { transform: translateX(0%); }
    25% { transform: translateX(20%); }
    50% { transform: translateX(0%); }
    75% { transform: translateX(20%); }
    110% { transform: translateX(0%); }
}

.menu-volant {
    position: fixed;

    z-index: 5000;

    left: 1rem;
    top: 1rem;

    box-sizing: border-box;
    min-width: 20%;
    height: calc(100% - 2rem);
    width: fit-content;

    border-radius: 1rem;
    padding: 0.5rem;

    overflow: hidden;

    background-color: rgba(0, 0, 0, 0.4);

    backdrop-filter: blur(20px);

    --durée-animation: 200ms;

    transition-property: transform;
    transition-duration: var(--durée-animation);
    transition-timing-function: ease-in-out;

    transform: translateX(calc(-100% - 1rem));

    &.active {
        transform: translateX(0);
    }

    .contenu {
        width: 100%;
        height: 100%;

        box-sizing: border-box;
        
        border-radius: 0.5rem;
        background-color: rgba(15, 15, 15, 0.7);

        padding: 1rem 2rem 2rem 2rem;

        overflow: hidden;
        overflow-y: auto;

        display: flex;
        flex-direction: column;
        gap: 2rem;

        section {
            display: flex;
            flex-direction: column;
            gap: 1rem;

            transition-duration: 200ms;
            transition-timing-function: ease-in-out;
            transition-property: transform;

            transform: translateX(calc(-100% - 2rem));  /* 2rem padding du conteneur */

            /* On prévoit de la marge */
            &:nth-child(1) { transition-delay: calc(var(--durée-animation) + 100ms * 0); }
            &:nth-child(2) { transition-delay: calc(var(--durée-animation) + 100ms * 1); }
            &:nth-child(3) { transition-delay: calc(var(--durée-animation) + 100ms * 2); }
            &:nth-child(4) { transition-delay: calc(var(--durée-animation) + 100ms * 3); }
            &:nth-child(5) { transition-delay: calc(var(--durée-animation) + 100ms * 4); }
            &:nth-child(6) { transition-delay: calc(var(--durée-animation) + 100ms * 5); }
            &:nth-child(7) { transition-delay: calc(var(--durée-animation) + 100ms * 6); }
            &:nth-child(8) { transition-delay: calc(var(--durée-animation) + 100ms * 7); }
            &:nth-child(9) { transition-delay: calc(var(--durée-animation) + 100ms * 8); }
            &:nth-child(10) { transition-delay: calc(var(--durée-animation) + 100ms * 9); }

            .menu-volant:not(.active) & {
                transition-delay: var(--durée-animation) !important;
                transition-duration: 0 !important;
            }

            .menu-volant.active & {
                transform: translateX(0);
            }

            a {
                text-decoration: none;
                cursor: pointer;

                color: lightgray;

                &:hover {
                    color: white;
                }
            }

            &.fermeture-volant {
                display: flex;
                flex-direction: row;
                justify-content: flex-end;

                padding: 1rem 0;

                border-bottom: 0.063rem solid lightgrey;

                & > svg {
                    width: 2rem;
                    height: 2rem;

                    fill: lightgrey;

                    cursor: pointer;

                    &:hover {
                        fill: white;
                    }
                }
            }

            .sous-section {
                margin-left: 1rem;

                display: flex;
                flex-direction: column;
                gap: 1rem;
                border-left: 0.063rem solid lightgray;

                a {
                    padding-left: 1rem;
                }
            }
        }
    }
}

@media (orientation: portrait) and (min-width: 768px),
       (orientation: landscape) and (min-height: 768px)  {
    .entete {
        display: flex;
        flex-direction: row;
        align-items: center;

        .logo {
            width: 4rem;
            height: 4rem;
        
            object-fit: contain;
            object-position: center;
        }
        
        .menu {
            display: flex;
            flex-direction: row;
            align-items: center;
        
            gap: 5rem;

            a {
                text-decoration: none;
            
                color: gray;
            }
        }
    }
}

@media (orientation: portrait) and (max-width: 768px),
       (orientation: landscape) and (max-height: 768px) {
    .menu-volant {
        width: calc(100% - 2rem);
    }

    html:has(.menu-volant.active) {
        overflow: hidden;
    }
}