/* ================================
HEADER
=================================*/
:root {
    --LOGO-HEIGHT:calc(var(--HEADER-HEIGHT) - 2 * var(--HEADER-PADDING));
    --LOGO-WIDTH:var(--LOGO-HEIGHT);
}

body > header {
    height:var(--HEADER-HEIGHT);
    background-color:var(--HEADER-BACKGROUND-COLOR);
    border-bottom:var(--HEADER-BORDER-WIDTH) solid var(--HEADER-BORDER-COLOR);
    box-shadow:var(--HEADER-SHADOW);

    position:fixed;
    top:0; left:0; z-index:99;
    width:100%;
    box-sizing:border-box;
}

body > header .logo {
    top:var(--HEADER-PADDING); left:var(--HEADER-PADDING);
    width:var(--LOGO-WIDTH);   height:var(--LOGO-HEIGHT);
    position:absolute;
}
body > header .logo img, 
body > header .logo svg,
body > header .logo div {
    display:block;
    width:100%;
    height:100%;
}

body > header .title {
    color:var(--HEADER-TITLE-COLOR);
    top:calc(var(--HEADER-PADDING) * 1.5);
    left:calc(var(--HEADER-PADDING) + var(--LOGO-WIDTH) + var(--HEADER-PADDING));
    font-family:var(--HEADER-TITLE-FONT);
    font-size:var(--HEADER-TITLE-SIZE);
    font-weight:var(--HEADER-TITLE-WEIGHT);
    position:absolute;
    width:max-content;
}

body > header .slogan {
    color:var(--HEADER-SLOGAN-COLOR);
    font-family:var(--HEADER-SLOGAN-FONT);
    font-size:var(--HEADER-SLOGAN-SIZE);
    top:calc(var(--HEADER-HEIGHT) / 2);
    left:calc(var(--HEADER-PADDING) + var(--LOGO-WIDTH) + var(--HEADER-PADDING));
    background-color:var(--HEADER-SLOGAN-BACKCOLOR);
    padding:3px;border-radius:0.5em;
    position:absolute;
    width:max-content;
}

/* ---------------------------------- */
/* Menu principal                     */
body > header nav.main {
    top:calc(var(--HEADER-PADDING));
    right:calc(var(--HEADER-PADDING));
    font-size:var(--HEADER-MENU-FONT-SIZE);
    position:absolute;
}

body > header nav.main a {
    color:var(--HEADER-MENU-COLOR);
    border-bottom:var(--HEADER-MENU-UNDERLINE-SIZE) solid transparent;
    margin:0 0.25em;
    transition:0.3s;
}
body > header nav.main a:hover,
body > header nav.main a.underline {
    border-bottom:var(--HEADER-MENU-UNDERLINE-SIZE) solid var(--HEADER-MENU-COLOR);
}

@media screen and (max-width:768px) {
    body > header nav.main  { display:none }
}

body > header nav.main a svg,
body > header nav.main a img {
    fill:var(--HEADER-MENU-COLOR);
    width:var(--HEADER-MENU-FONT-SIZE); 
    height:var(--HEADER-MENU-FONT-SIZE);
    margin:0;
    margin-bottom:2px;
    vertical-align:text-bottom;
    transition:0.3s;
}
body > header nav.main a:hover svg {
    fill:var(--HEADER-MENU-HOVER-COLOR);
}

/* ------------------------------------- */
/* Bouton "burger"                       */

body > header #burger { display:none }

@media screen and (min-width:768px) {
    body > header #burger + label { display:none }
}

body > header #burger + label {
    top:calc(var(--HEADER-PADDING) * 1.5); right:calc(var(--HEADER-PADDING) * 1.5);
    width:var(--HEADER-BURGER-SIZE); height:var(--HEADER-BURGER-SIZE);
    position:absolute;
    cursor:pointer;
    transition:0.3s;
}


/* ------------------------------------- */
/* Menu du bouton "burger"               */

body > header #burger ~ nav {
    background-color:var(--HEADER-BACKGROUND-COLOR);
    top:var(--HEADER-HEIGHT); 
    left:-100vw; opacity:0;
    position:fixed;
    width:100%; height:calc(100vh - var(--HEADER-HEIGHT)); z-index:90;
    padding:100px 0 20px 0;
    box-sizing:border-box;
    overflow:auto;
    transition:0.5s;

    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:flex-end;
}
body > header #burger:checked ~ nav { left:0; opacity:1; }
body > header #burger ~ nav > nav { width:100% }
body > header #burger ~ nav > nav > a {
    color:var(--HEADER-MENU-COLOR);
    border:none;
    border-bottom:var(--HEADER-MENU-UNDERLINE-SIZE) solid transparent;
    font-size:calc(var(--HEADER-MENU-FONT-SIZE) * 1.5);
    display:block;
    width:max-content;
    margin:20px auto;
    transition:0.3s;
}
body > header #burger ~ nav > nav > a:hover,
body > header #burger ~ nav > nav > a.underline {
    border-bottom:var(--HEADER-MENU-UNDERLINE-SIZE) solid var(--HEADER-MENU-COLOR);
}

body > header #burger ~ nav > nav > a svg,
body > header #burger ~ nav > nav > a img {
    fill:var(--HEADER-MENU-COLOR);
    width:var(--HEADER-MENU-FONT-SIZE); 
    height:var(--HEADER-MENU-FONT-SIZE);
    margin:0;
    margin-bottom:2px;
    vertical-align:text-bottom;
    transition:0.3s;
}
body > header #burger ~ nav > nav > a:hover svg {
    fill:var(--GC-COLOR-LINK);
}



/***********************************************/
/* DEFINITION OF BURGER BUTTONS                */

/* 3 horizontal bars */
body > header #burger + label.bbb {
    background-image:linear-gradient(var(--HEADER-MENU-COLOR),var(--HEADER-MENU-COLOR)), 
                     linear-gradient(var(--HEADER-MENU-COLOR),var(--HEADER-MENU-COLOR)), 
                     linear-gradient(var(--HEADER-MENU-COLOR),var(--HEADER-MENU-COLOR));
    background-size:100% 15%,100% 15%,100% 15%;
    background-position:0 0, 0 42.5%, 0 85%;
    background-repeat:no-repeat;
}
body > header #burger:hover + label.bbb {
    background-image:linear-gradient(var(--HEADER-MENU-HOVER-COLOR),var(--HEADER-MENU-HOVER-COLOR)), 
                     linear-gradient(var(--HEADER-MENU-HOVER-COLOR),var(--HEADER-MENU-HOVER-COLOR)), 
                     linear-gradient(var(--HEADER-MENU-HOVER-COLOR),var(--HEADER-MENU-HOVER-COLOR));
}
body > header #burger:checked + label.bbb {
    background-size:100% 15%,15% 100%,100% 15%;
    background-position:0 50%,50% 0,0 50%;
    transform:rotate(45deg);
}

/* 2 horizontal bars */
body > header #burger + label.bb {
    background-image:linear-gradient(var(--HEADER-MENU-COLOR),var(--HEADER-MENU-COLOR)), 
                     linear-gradient(var(--HEADER-MENU-COLOR),var(--HEADER-MENU-COLOR));
    background-size:100% 15%,100% 15%;
    background-position:0 25%, 0 75%;
    background-repeat:no-repeat;
}
body > header #burger:hover + label.bb {
    background-image:linear-gradient(var(--HEADER-MENU-HOVER-COLOR),var(--HEADER-MENU-HOVER-COLOR)), 
                     linear-gradient(var(--HEADER-MENU-HOVER-COLOR),var(--HEADER-MENU-HOVER-COLOR));
}
body > header #burger:checked + label.bb {
    background-size:100% 15%,15% 100%;
    background-position:0 50%,50% 0;
    transform:rotate(45deg);
}

/* 3 horizontal points */
body > header #burger + label.ppp {
    background-image:linear-gradient(var(--HEADER-MENU-COLOR),var(--HEADER-MENU-COLOR)), 
                     linear-gradient(var(--HEADER-MENU-COLOR),var(--HEADER-MENU-COLOR)), 
                     linear-gradient(var(--HEADER-MENU-COLOR),var(--HEADER-MENU-COLOR));
    background-size:15% 15%, 15% 15%, 15% 15%;
    background-position:0 42.5%, 42.5% 42.5%, 85% 42.5%;
    background-repeat:no-repeat;
}
body > header #burger:hover + label.ppp {
    background-image:linear-gradient(var(--HEADER-MENU-HOVER-COLOR),var(--HEADER-MENU-HOVER-COLOR)), 
                     linear-gradient(var(--HEADER-MENU-HOVER-COLOR),var(--HEADER-MENU-HOVER-COLOR)), 
                     linear-gradient(var(--HEADER-MENU-HOVER-COLOR),var(--HEADER-MENU-HOVER-COLOR));
}
body > header #burger:checked + label.ppp {
    background-size:100% 15%,15% 100%,100% 15%;
    background-position:0 50%,50% 0,0 50%;
    transform:rotate(45deg);
}