@media screen and (max-width:1080px) {

    #subTitle {
        display: none;
    }

    #menu {
        margin: 0;
        width: 100%;
        display: none;
    }

    #menu.open {
        display: grid !important;
        justify-items: center;
        row-gap: calc(var(--small-margin)/4);
        margin-bottom: var(--small-margin);
    }

    main h1 {
        display: none;
    }

    nav li {
        text-align: center;
    }

    h2 {
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        -ms-hyphens: auto;
        -o-hyphens: auto;
        hyphens: auto;
    }

    #liste-des-coediteurices ol {
        margin-left: var(--small-margin);
    }
}

@media screen and (max-width:409px) {
    h1 {
        font-size: clamp(var(--font-size-lg), 19vw, 19vw);
    }
}

@media screen and (min-width: 1080px) {
    :root {
        --side-margin: 5vw;
    }

    body {
        display: grid;
        grid-template-columns: 36% auto;
    }

    header {
        position: sticky;
        align-self: start;
        top: 0;
    }

    nav {
        position: fixed;
        bottom: 0;
        width: 36%;
        margin-top: var(--large-margin);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: var(--small-margin);
        margin: 0;
        border-top: none;
    }

    nav ul {
        margin-bottom: 0;
    }

    .active::before {
        content: '/ ';

    }

    #subTitle {
        padding-top: var(--small-margin);
    }

    #menuButton {
        display: none;
    }

    main {
        position: relative;
        padding-right: 18vw;
        padding-left: var(--medium-margin);
    }
}