#pages {
    position: relative;

    overflow: hidden;

    pointer-events: none;
}

#pages > section {
    height: 100%;
    width: 100%;

    position: absolute;

    box-sizing: border-box;

    display: flex;
}


#pages > section.ouverte {
    left: 0;
}

/* transitions */
#pages > section.ouverte,
#pages > section.fermée {
    transition: left 200ms ease-in-out, filter 200ms ease-in-out;
}

#pages > section,
#pages > section.fermée {
    left: -100%;
}

section.sans-html {
    display: none;
}

.événements {
    pointer-events: auto;
}

.carte {
    transition: filter 200ms ease-in-out;
}

section.gris,
.carte.gris {
    filter: grayscale(1) brightness(50%);

    pointer-events: none;
}

section.gris *,
.carte.gris * {
    pointer-events: none !important;
}


/* menus */
.menu-modale {
    max-height: 100%;
    overflow: hidden;

    border-radius: 4px;
    padding: 2rem;
    align-self: stretch;

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

    pointer-events: auto;

    background-color: white;


}

.menu-modale > .tête {
    margin-bottom: 1rem;
    border-radius: 4px;
    padding: 1.25rem;

    display: flex;
    flex-direction: row;

    background-color: var(--couleur-thème);

    font-weight: bold;
    color: white;
}

.menu-modale > .tête button.retour {
    margin-left: auto;
    margin-right: 0.5rem;
}

.menu-modale > .corps {
    flex-grow: 2;

    overflow-y: auto;
}

@media screen and (max-height: 48.128rem), (max-width: 37.5rem) {
    #pages {
        overflow: visible;
    }
    
    #pages > section {
        max-width: 100vw;
        overflow: hidden;

        height: unset;

        padding: 0;

        position: relative;
    }

    .menu-modale {
        border-radius: unset;

        max-height: unset;
    }
    
    #pages > section.fermée {
        position: absolute;

        max-height: 100vh;
        overflow: hidden;
    }
}