:root{
    --color-primary: #291d51;
    --color-primary-75: #291d51B0;
    --color-primary-50: #291d5180;
    --color-primary-25: #291d5140;
    --color-primary-00: #291d5100;
    --color-secondary: #FF5500;
    --color-secondary-75: #FF5500b0;
    --color-secondary-50: #FF550080;
    --color-secondary-25: #FF550040;
    --color-secondary-00: #FF550000;
    --color-background: #FFFFFF;
    --color-background-90: #FFFFFFDD;
    --color-background-75: #FFFFFFB0;
    --color-background-50: #FFFFFF80;
    --color-background-25: #FFFFFF40;
    --color-background-00: #FFFFFF00;
    --box-shadow_x : 0px;
    --box-shadow_y : 5px;
    --box-shadow_r : 5px;
    --box-shadow_s : 0px;
    --box-shadow_color : #00000040;
    --text-shadow_x : 0px;
    --text-shadow_y : 0px;
    --text-shadow_r : 0px;
    --fade_time : 110ms;
    --logo-color-orange : #FF5500;
    --logo-color-blue : #291d51;
}
@font-face {
    font-family: 'Icon';
    src: url('assets/icomoon.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: 'figtree';
    font-style: normal;
    font-weight: 400;
    src: url('assets/Figtree-Regular.woff2') format('woff2');
    font-display: swap;
}
*{
    box-sizing: border-box;
    scrollbar-color: var(--color-secondary-75)
    var(--color-primary);
    scrollbar-width: thin;
    &:hover{
        scrollbar-color: var(--color-secondary)
        var(--color-primary);
    }
}
body,html,form{
    padding: 0;
    margin: 0;
}
html{
    height: 100%;
    width: 100%;
}
*::selection {
    color: #FFFFFF;
    background-color: var(--color-secondary);
}
a{
    color: var(--color-secondary);
    background-image: linear-gradient(var(--color-secondary), var(--color-secondary));
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 100%;
    transition: background-size .4s, color .4s;
    text-decoration: none;
    padding: 0 3px;
    border-radius: 3px;
    &:hover{
        color: #fff;
        background-size: 100% 100%;
        transition: background-size .1s, color .1s;
    }
}

body{
    /*height: 100%;*/
    width: 100%;
    background: var(--color-primary);
    font-size: 20px;
    color: #FFFFFF;
    font-family : "figtree", Arial, sans-serif;
    padding: 130px 10px 77px;
    header{
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        width: 100%;
        padding: 0;
        /*background: #ecd5d5;*/
        background: linear-gradient( #ffffff, #FFFFFF60 );
        backdrop-filter: blur(10px);
        z-index: 10;
        box-shadow: 0 0 30px var(--color-primary-25);
        section{
            display: flex;
            justify-content: space-between;
            width: 100%;
            max-width: 1920px;
            margin: auto;
            min-height: 0;
            align-items: center;
            gap: 10px;
            text-transform: uppercase;
            color: #FFFFFF;
            font-weight: bold;
            line-height: 36px;
            height: 100px;
            .logo{
                height: 100px;
                width: 143px;
                display: block;
            }
            .burger{
                display: none;
                align-items: center;
                padding: 3vmin;
                cursor: pointer;
                svg{
                    stroke: var(--color-primary);
                    height: 30px;
                    width: 30px;
                }
            }
            .menu{
                font-size: 20px;
                display: flex;
                height: 100%;
                .item{
                    height: 100%;
                    padding: 0 3vmin;
                    color: var(--color-primary);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    text-decoration: none;
                    text-align: center;
                    line-height: 1.2em;
                    &:hover{
                        color: #FFFFFF;
                        background: var(--color-secondary);
                    }
                }
            }
        }
    }
    &:before{
        content: "";
        top: 0;
        left: 0;
        right: 0;
        height: 100px;
        position: fixed;
        background: #FFFFFF;
        z-index: -1;
    }
    footer{
        position: fixed;
        font-size: 0.8em;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        text-align: center;
        padding: 10px;
        background: linear-gradient( var(--color-secondary-50),  var(--color-secondary) );
        text-transform: uppercase;
        color: #ecd5d5;
        backdrop-filter: blur(10px);
        z-index: 10;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0 30px var(--color-primary-25);
        a{
            color: #FFFFFF;
        }
    }
    &:after{
        content: "";
        bottom: 0;
        left: 0;
        right: 0;
        height: 50px;
        position: fixed;
        background: var(--color-secondary);
        z-index: -1;
    }
    &.accueil {
        /*display: flex;
        flex-direction: column;
        align-items: center;*/
        /*justify-content: center;*/
    }
    main{
        /*background: #ffffff;*/
        color: #ffffff;
        width: 100%;
        height: auto;
        max-width: 1200px;
        /*border-radius: 20px;*/
        padding: 20px 2vmin;
        margin: auto;
        line-height: 1.5em;
        h1,h2,h3{
            color: var(--color-secondary);
            line-height: 1.1em;
        }
    }
}

@media (max-width: 1000px) {
    body {
        & header {
            & section {
                .burger{
                    display: flex;
                }
                .menu{
                    display: none;
                }
                .menu.active{
                    display: flex;
                    flex-direction: column;
                    position: absolute;
                    right: 0;
                    top: 100px;
                    gap: 0;
                    background: #FFFFFF;
                    .item{
                        background: #FFFFFF;
                        padding: 20px 40px;
                        &:hover{
                            color: #FFFFFF;
                            background: var(--color-secondary);
                        }
                    }
                }
            }
        }
    }
}