@import "../fonts/stylesheet.css?v1.0.5";

:root{
    --bkpt: 1920;
    --color-1: #CE2F34;
    --color-2: #225028;
    --color-3: #A9C392;
    --color-4: #76AF00;
    --color-5: rgba(34,80,40,.6);
    --color-6: white;
    --color-7: #DA6266;
    --color-8: #F2F2F2;
    --color-9: #5E9133;

    --header-h: 60px;
    --header-p: 0 65px;
    --header-g: 120px;
    --header-sh: rgba(0,0,0,.3) 0 3px 16px;
    --header-cols: 1fr 165px 1fr;
    --menu-g: 40px;
    --menu-s: 18px;
    --submenu-s: 15px;
    --submenu-pt: 20px;
    --submenu-pb: var(--submenu-pt);
    --submenu-g: 10px;
    --submenu-bullet-w: var(--submenu-s);
    --header-mob-p: 15px;
    --container-w: 1370px;
    --container-1600-w: 1600px;
}

html, body{
    margin: 0;
    padding: 0;
}

body{
    width: 100%;
    max-width: 1920px;
    min-height: 100vh;
    margin: 0 auto;
    overflow-x: hidden;
}

*{color: var(--color-2);font-family: Proxima-Nova, sans-serif;}
ul{list-style: none; margin: 0; padding: 0;}
a{text-decoration: none; transition: color .3s ease; will-change: color;color: var(--color-2);}
a:hover{color: var(--color-1)}
img{width: 100%; max-width: max-content; height: auto; display: block;}

.bdb-container{max-width: var(--container-w); margin-left: auto; margin-right: auto;}
.bdb-container-1600{max-width: var(--container-1600-w); margin-left: auto; margin-right: auto;}
.bdb-btn{
    --btn-h: 50px;
    --btn-rad: 12px;
    --btn-p: 0 30px;
    --btn-s: 18px;
    background-color: var(--color-1);
    min-height: var(--btn-h);
    padding: var(--btn-p);
    border-radius: var(--btn-rad);
    display: flex; justify-content: center; align-items: center;
    font-size: var(--btn-s);
    font-weight: bold;
    color: var(--color-6);
    text-transform: uppercase;
    max-width: max-content;
    transition: background-color .3s ease, color .3s ease;
    will-change: background-color, color;
    text-align: center;
}
.bdb-btn:hover{background-color: var(--color-6);}


/* Header */

header{
    width: 100%;
    min-height: var(--header-h);
    display: grid;
    grid-template-columns: var(--header-cols);
    justify-content: space-between;
    gap: var(--header-g);
    align-items: center;
    padding: var(--header-p); margin: 0;
    position: fixed; top: 0; left: 0;
    box-shadow: var(--header-sh);
    background-color: white;
    z-index: 999;
}
body.admin-bar header{top: 32px;}

header ul{
    display: grid;
    grid-auto-flow: column;
    gap: var(--menu-g);
}
header ul li{max-width: max-content;}

header ul a, #menu-mobile a{
    font-size: var(--menu-s);
    font-family: Bungee;
    text-transform: uppercase;
}

header .sub-menu{
    display: none;
    position: fixed;
    left: 0;
    top: var(--header-h);
    width: 100%;
    height: auto;
    background-color: #E6E6E6;
    flex-direction: column;
    padding-top: var(--submenu-pt);
    padding-bottom: var(--submenu-pb);
    gap: var(--submenu-g);
    box-shadow: rgba(0,0,0,.16) 0 3px 6px;
    z-index: 888;
}

header .sub-menu li{
    position: relative;
    padding-left: 30px;
}

header .sub-menu li a {
    font-size: var(--submenu-s);
}

header .sub-menu li:before,
header .sub-menu li:after{
    content: '';
    position: absolute;
    top: 50%; left: 0;
    width: var(--submenu-bullet-w);
    height: auto;
    aspect-ratio: 1;
    transform: translateY(-50%);
    transition: opacity .3s ease;
    will-change: opacity;
}

header .sub-menu li:before{
    background: url("/wp-content/themes/brasserie-de-bourbon/charte/imgs/list-bullet-green.svg") no-repeat;
    background-position: top center;
    background-size: cover;
}

header .sub-menu li:after{
    background: url("/wp-content/themes/brasserie-de-bourbon/charte/imgs/list-bullet.svg") no-repeat;
    background-position: top center;
    background-size: cover;
}

header .sub-menu li:after,
header .sub-menu li:hover:before{
    opacity: 0;
}

header .sub-menu li:before,
header .sub-menu li:hover:after{
    opacity: 1;
}

header .sub-menu.show,
#menu-mobile .sub-menu.show{
    display: flex;
}

body.admin-bar header .sub-menu{
    top: calc(var(--header-h) + 32px);
}

.tooltip{
    position: fixed; z-index: 9000;
    opacity: 1; background-color: white;
    color: var(--color-2);
    border: var(--color-2) 1px solid;
    box-shadow: rgba(0,0,0,.16) 0 3px 6px;
    transform: translateX(-50%);
    width: 100%; max-width: 180px;
    text-align: center;
    font-size: 14px;
    padding: 5px 15px;
    border-radius: 3px;
}


/* Menu mobile */

#menu-mobile{
    padding: var(--header-mob-p);
    position: fixed; z-index: 1000; top: 0; left: 0;
    width: 100%; max-width: 100vw; height: 100vh;
    display: flex; justify-content: space-between; align-items: center; flex-direction: column;
    transform: translateY(-100%); opacity: 0;
    transition: transform .5s ease, opacity .5s ease;
    will-change: tranform, opacity;
    background-color: white;
}
#menu-mobile .logo{max-width: 165px;}
#menu-mobile ul li{text-align: center;}
#menu-mobile ul li:not(:last-of-type){margin: 15px;}
body.menu-show #menu-mobile{transform: translateY(0); opacity: 1;}
#menu-trigger{
    width: 50px; height: auto; aspect-ratio: 1;
    border-radius: 50%; justify-content: center; align-items: center; display: none;
    transition: background-color .3s ease; will-change: background-color;
    position: fixed; top: 5px; right: 15px; z-index: 1100;
}
body.admin-bar #menu-trigger{top: 37px;}
#menu-trigger .close, body.menu-show #menu-trigger .open{display: none;}
#menu-trigger .open, body.menu-show #menu-trigger .close{display: block;}

#menu-trigger svg{width: 30px; height: auto}
#menu-trigger:hover{background-color: var(--color-2);}
#menu-trigger svg path{fill: var(--color-2);transition: fill .3s ease; will-change: fill;}
#menu-trigger:hover svg path{fill: white;}

#menu-mobile .sub-menu{
    flex-direction: column;
    display: none;
    margin: 15px 0 0;
}
#menu-mobile ul.sub-menu li{margin: 0!important;}
#menu-mobile .sub-menu li a{font-size: 15px; font-style: italic;color: var(--color-3);}

/* Content */

#content{margin-top: var(--header-h);}

/* Footer */
footer{
    --ct-p: 80px 0 0 0;
    --menu-p: 50px 0 0 0;
    --logo-w: 408px;
    --slogan-s: 30px;
    --menu-s: 22px;
    --menu-item-p: 20px 0;
    --menu-item-w: 300px;
    --cprgt-h: 90px;
    --cprgt-s: 35px;
    --ment-h: var(--cprgt-h);
    --ment-s: 24px;
    --footer-container-w: 1500px;

    position: relative;
}

footer *{color: white}
footer #footer-content, footer .footer-menu{background-color: var(--color-2);}
footer #footer-content{padding: var(--ct-p);}
footer #footer-content .footer-menu {padding: var(--menu-p);}

footer #footer-content .bdb-container{
    max-width: var(--footer-container-w);
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
}

footer .logo{
    max-width: var(--logo-w);
}

footer #footer-content .slogan{
    text-align: right;
    font-size: var(--slogan-s);
    font-weight: 600;
    font-style: italic;
}

footer #footer-content .footer-menu nav{border-top: white 1px solid;}

footer #footer-content .footer-menu ul{
    display: grid;
    grid-template-columns: repeat(3, var(--menu-item-w));
    max-width: var(--footer-container-w);
    margin: 0 auto;
    justify-content: space-between;
}

footer #footer-content .footer-menu ul li a {
    font-size: var(--menu-s);
    font-weight: bold;
    text-transform: uppercase;
}
footer #footer-content .footer-menu ul li {
    padding: var(--menu-item-p);
}

footer #copyright{
    background-color: var(--color-9);
    display: flex; align-items: center;
    min-height: var(--cprgt-h);
    justify-content: center;
}

footer #copyright .text{
    color: var(--color-2);
    font-size: var(--cprgt-s);
    text-transform: uppercase;
    text-align: center;
    font-weight: bold;
    letter-spacing: .310em;
}

footer #mention{
    color: var(--color-2);
    font-size: var(--ment-s);
    min-height: var(--ment-h);
    display: flex; align-items: center;
    justify-content: center;
    text-align: center;
}

/* Article */
.post-template{
    padding: 50px 0;
    max-width: 1400px;
    margin: 0 auto;
}

.post-template header{display: none}
.post-template .section-title, .post-template .section-title *{
    font-size: 91px;
    line-height: .9em;
    text-transform: uppercase;
    font-family: "Bungee Inline";
    margin-bottom: .5em;
    color: var(--color-1);
}

.post-template .section-title{
    letter-spacing: -.08em;
}

.post-template p{
    font-size: 20px;
}

.post-template h3{font-weight: bold;}


/* Plan du site */
.plan-site ul{
    padding-left: 1.0em;
}

.plan-site *{
    font-size: 20px;
}

/* Dossier */
article#post-2333 .entry-content{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

article#post-2333 .entry-content .dossier{
    background-color: white;
    box-shadow: rgba(0,0,0,.16) 0 3px 6px;
    padding: 20px;
}

article#post-2333 .entry-content .dossier h3{
    font-size: 32px;
}

article#post-2333 .entry-content .dossier a{
    font-size: 20px;
}

/* Animations */


.animate-zoom-in,
.animate-fade-in-up,
.animate-fade-in-right,
.animate-fade-in-left{
    transition: transform 1s ease, opacity 1s ease;
    will-change: transform, opacity;
}

/* Zoom In */

.animate-zoom-in{
    opacity: 0;
    transform: scale(.3);
}

.animate-zoom-in.animated{
    opacity: 1;
    transform: scale(1);
}

/* Fade In Up */

.animate-fade-in-up{
    opacity: 0;
    transform: translateY(30vh);
}

.animate-fade-in-up.animated{
    opacity: 1;
    transform: translateY(0);
}

/* Fade In Right */

.animate-fade-in-right{
    opacity: 0;
    transform: translateX(10vw);
}

.animate-fade-in-right.animated{
    opacity: 1;
    transform: translateX(0);
}

/* Fade in left */

.animate-fade-in-left{
    opacity: 0;
    transform: translateX(-10vw);
}

.animate-fade-in-left.animated{
    opacity: 1;
    transform: translateX(0);
}

#wrapper{
    position: relative;
}

.game-loader img{
    width: 94px;
    height: auto;
}

.game-loader{
    display: none;
    position: absolute;
    max-width: max-content;
    max-height: max-content;
    bottom: 0; left: 0;
    z-index: 10;
    cursor: pointer;
}

@media (max-width: 1920px){
    .post-template{
        padding: calc(100vw * 50 / var(--bkpt)) 0;
        max-width: calc(100vw * 1400 / var(--bkpt));
    }
    .post-template .section-title, .post-template .section-title *{
        font-size: calc(100vw * 91 / var(--bkpt));
    }

    .post-template p{
        font-size: calc(100vw * 20 / var(--bkpt));
    }

    .plan-site *{
        font-size: calc(100vw * 20 / var(--bkpt));
    }

    article#post-2333 .entry-content{
        gap: calc(100vw * 40 / var(--bkpt));
    }

    article#post-2333 .entry-content .dossier{
        padding: calc(100vw * 20 / var(--bkpt));
    }

    article#post-2333 .entry-content .dossier h3{
        font-size: calc(100vw * 32 / var(--bkpt));
    }

    article#post-2333 .entry-content .dossier a{
        font-size: calc(100vw * 20 / var(--bkpt));
    }

    .game-loader img{
        width: calc(100vw * 94 / var(--bkpt));
    }
}

@media (max-width: 1024px){
    .post-template{
        padding: calc(100vw * 50 / var(--bkpt)) 15px;
    }
}

@media (max-width: 480px){
    .post-template .section-title, .post-template .section-title *{
        font-size: calc(100vw * 55 / var(--bkpt));
    }

    .post-template p{
        font-size: 16px;
    }
    .plan-site *,
    article#post-2333 .entry-content .dossier a{
        font-size: 16px;
    }


    .post-template{
        padding: 30px 15px;
    }

    article#post-2333 .entry-content{
        gap: 20px;
        grid-template-columns: 1fr;
    }

    article#post-2333 .entry-content .dossier{
        padding: 15px;
        text-align: center;
    }

    article#post-2333 .entry-content .dossier h3{
        font-size: 24px;
        text-align: center;
    }

    article#post-2333 .entry-content .dossier a{
        text-align: center;
    }
}

/* Responsive */
@media (max-width: 1920px) {
    :root{
        --header-h: calc(100vw * 60 / var(--bkpt));
        --header-p: 0 calc(100vw * 65 / var(--bkpt));
        --header-g: calc(100vw * 120 / var(--bkpt));
        --header-cols: 1fr calc(100vw * 165 / var(--bkpt)) 1fr;
        --header-sh: rgba(0,0,0,.3) 0 calc(100vw * 3 / var(--bkpt)) calc(100vw * 16 / var(--bkpt));
        --menu-g: calc(100vw * 40 / var(--bkpt));
        --menu-s: calc(100vw * 18 / var(--bkpt));
        --submenu-s: calc(100vw * 15 / var(--bkpt));
        --submenu-pt: calc(100vw * 20 / var(--bkpt));
        --submenu-g: calc(100vw * 10 / var(--bkpt));
        --container-w: calc(100vw * 1370 / var(--bkpt));
        --container-1600-w: calc(100vw * 1600 / var(--bkpt));
    }

    .bdb-btn{
        --btn-h: calc(100vw * 50 / var(--bkpt));
        --btn-rad: calc(100vw * 12 / var(--bkpt));
        --btn-p: 0 calc(100vw * 30 / var(--bkpt));
        --btn-s: calc(100vw * 18 / var(--bkpt));
    }

    footer {
        --footer-container-w: calc(100vw * 1500 / var(--bkpt));
        --ct-p: calc(100vw * 80 / var(--bkpt)) 0 0 0;
        --menu-p: calc(100vw * 50 / var(--bkpt)) 0 0 0;
        --logo-w: calc(100vw * 408 / var(--bkpt));
        --slogan-s: calc(100vw * 30 / var(--bkpt));
        --menu-s: calc(100vw * 22 / var(--bkpt));
        --menu-item-p: calc(100vw * 20 / var(--bkpt)) 0;
        --cprgt-h: calc(100vw * 90 / var(--bkpt));
        --cprgt-s: calc(100vw * 35 / var(--bkpt));
        --ment-s: calc(100vw * 24 / var(--bkpt));
        --menu-item-w: calc(100vw * 300 / var(--bkpt));
    }
}

@media (max-width: 1024px){
    :root{
        --bkpt: 1024;
        --header-p: 0;
        --header-h: 60px;
        --header-sh: rgba(0,0,0,.3) 0 3px 16px;
        --menu-s: 18px;
    }
    header{grid-template-columns: 165px; justify-content: center;}
    header nav{display: none;}
    #menu-trigger{display: flex;}

    footer #footer-content .bdb-container,
    footer #footer-content .footer-menu ul,
    footer #copyright, footer #mention{ padding: 0 15px; }
}

@media (max-width: 782px){
    body.admin-bar header {top: 46px;}
    body.admin-bar #menu-trigger{top: 51px;}
}

@media (max-width: 768px){
    :root{
        --container-w: 100%;
        --container-1600-w: 100%;
    }
    .bdb-btn{--bkpt: 768;}

    footer{
        --slogan-s: calc(100vw * 26 / var(--bkpt));
    }

    footer #footer-content .bdb-container,
    footer #footer-content .footer-menu ul{
        grid-template-columns: 1fr;
    }

    footer #footer-content .slogan,
    footer #footer-content .footer-menu ul li{
        text-align: center;
    }

    footer #footer-content .slogan{margin-top: 30px;}
    footer #footer-content .logo{margin: 0 auto;}
    footer #copyright .text{color: var(--color-6);letter-spacing: unset;}
}

@media (max-width: 600px){
    body.admin-bar header{position: sticky; top: 0}
    body.admin-bar #menu-trigger{position: fixed; top: 10px;}
    body.admin-bar #content{margin-top: 0;}
}

@media (max-width: 480px){
    :root {--bkpt: 480;}
    .bdb-btn{--bkpt: 480;}

    footer{
        --slogan-s: 20px;
        --ct-p: 30px 0 0 0;
        --menu-p: 30px 0 0 0;
        --menu-s: 20px;
        --menu-item-p: 15px 0;
        --cprgt-s: 16px;
        --ment-s: 14px;
        --cprgt-h: 0;
    }
    footer .logo{max-width: 30vw;}
    footer #footer-content .footer-menu nav{border-top: none}
    footer #copyright, footer #mention{padding: 15px;}
}