body {
    height: 100vh;
    > .main-logo {
        grid-area: main-logo;
    }
    > header {
        grid-area: header;
    }
    > main {
        grid-area: main;
    }
    > aside {
        grid-area: aside;
    }
    > footer {
        grid-area: footer;
    }
    .footer-portailpro {
        grid-area: footer-portailpro;
    }

    display: grid;
    grid-template-areas:
        "main-logo"
        "header"
        "aside"
        "main"
        "footer"
        "footer-portailpro"
    ;

    /* Pour gérer la barre de debug de symfony */
    > .sf-toolbar {
        position: absolute;
    }
}

main {
    padding: var(--pico-spacing) calc(var(--pico-spacing) * 4);
}

@media (min-device-width: 600px) {
    body {
        --layout-header-height: 80px;
        --layout-footer-height: 80px;
        grid-template-columns: 270px auto;
        grid-template-areas:
            "main-logo header"
            "aside main"
            "footer-portailpro footer"
        ;
        grid-template-rows: var(--layout-header-height) auto var(--layout-footer-height);
    }
}