:root {
    --solution-color: #54b482;
    --solution-hover-color: #74d4a2;
    --solution-active-color: #349462;
    --portail-active-color: #2d9fcf;
    --limseo-color: #2b4b8f;
    --limseo-title-font-family: "Poppins";
    --limseo-text-font-family: "Montserrat";
}



/* scrollbar options */
:root {
    --scrollbar-thumb-color: var(--heavy-gray);
    --scrollbar-track-color: transparent;
    /*  --scrollbar-width: calc(100vw - 100%);  */
}
::-webkit-scrollbar-track { background: var(--scrollbar-track-color); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb-color); }
html {
    scrollbar-gutter: stable;
    scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
}





h1 {
    padding: .25em 1em;
    text-align: center;
}
h2 {
    font-size: 1.8em;
    text-align: center;
    font-weight: 300;
    font-family: var(--limseo-title-font-family), sans-serif;
    color: var(--limseo-black);
    margin: 0;
    /*    margin: -1em auto 1em auto;*/
}

body {
    background-size: cover;
    background-color: var(--limseo-white);
    background-position: center;
    font-family: var(--limseo-text-font-family), sans-serif;
    min-height: 100vh;
    margin: 0;
    /* positionning */
    justify-content: stretch;
    justify-items: stretch;
    align-content: stretch;
    align-items: start;
    /* grid */
    display: grid;
    grid-template-columns: min-content 1fr;
    grid-template-rows: min-content min-content minmax(0, 1fr) min-content;
    grid-template-areas:
        "menu header"
        "menu ariane"
        "menu main"
        "menu footer";
}

    body > header {
        font-family: var(--limseo-text-font-family), sans-serif;
        grid-area: header;
    }

    body > footer {
        font-size: .8em;
        text-align: center;
        font-weight: 300;
        font-family: var(--limseo-text-font-family), sans-serif;
        color: var(--limseo-black);
        backdrop-filter: blur(5px);
        background-color: rgba(255, 255, 255, 0.3);
        padding: .25em 1em;
        margin: 1em auto .5em auto;
        text-align: center;
        grid-area: footer;
    }
        body > footer img {
            height: 2em;
            margin: 0 1em;
        }
        body > footer .version {
        font-size: 1em;
        text-wrap-mode: nowrap;
    }

.main {
    grid-area: main;
    align-self: stretch;
    min-height: 0;
    min-width: 0;
}
    .main.loading {
        overflow: hidden;
        background-image: url("/assets/images/Logo petales.svg");
        background-position: center 5em;
        background-repeat: no-repeat;
        background-size: 4em;
        position: relative;
    }
        .main.loading::before {
            content: "";
            position: absolute;
            text-align: center;
            width: 100vw;
            height: 100vh;
            filter: blur(5px);
            background-color: rgba(255,255,255, .8);
        }
        .dossiers {
            display: grid;
            grid-template-columns: max-content max-content max-content max-content max-content max-content;
            justify-items: start;
            align-items: start;
            justify-content: center;
            align-content: start;
            gap: 1rem;
        }














nav.ariane {
    grid-area: header;
    margin: 4em 1em;
    display: flex;
}

nav ul {
    display: contents;
    cursor: pointer;
}

nav li {
    flex: 1 1;
    border-radius: .5em;
    padding: .2em;
    margin: .2em;
    max-width: 10vw;
}

/* Supprime la croix native sur Chrome, Safari, Edge 
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
    display: none;
}

/* Supprime la croix sur Internet Explorer / Ancien Edge 
input[type="search"]::-ms-clear,
input[type="search"]::-ms-reveal {
    display: none;
    width: 0;
    height: 0;
}

*/