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

:root{
    --top: 0px;
    --100vh: 100vh;
    --admin-bar-h: 32px;

    /* Couleur Theme */
    --color-1: #322428;
    --color-2: #C00631;
    --color-3: #F39777;
    --color-4: #E84320;
    --color-5: #DA5C1F;
    --color-6: #F9B138;
    --color-7: #FFC36B;
    --color-8: #707070;
    --color-9: #FB7E5B;

    /* Default */
    --body-max-size: 1920px;

    /* Texte */
    --default-font-family: "Futura-Std", sans-serif;
    --default-font-s: 20;
    --default-color: var(--color-1);

    /* Titre */
    --site-title-s: 72;
    --site-title-color: var(--default-color);

    /* Bouton */
    --btn-s: 30;
    --btn-bg-color: var(--color-6);
    --btn-color: var(--color-1);
    --btn-bg-color-hv: var(--color-1);
    --btn-color-hv: white;
    --btn-rad: 30;
    --btn-h: 80;
    --btn-p: 10px 110px;

    /* Container */
    --container-w: 1600;

    /* Header */
    --header-h: 195;
    --header-bg-color: #FFF;

    /* Footer */
    --footer-bg-color: #FFF;


    /* Valeurs calculées */
    --btn-rad-px: calc(var(--btn-rad) * 1px);
    --btn-s-px: calc(var(--btn-s) * 1px);
    --btn-h-px: calc(var(--btn-h) * 1px);
    --container-w-px: calc(var(--container-w) * 1px);
    --default-font-s-px: calc(var(--default-font-s) * 1px);
    --default-title-s-px: calc(var(--default-title-s) * 1px);
    --header-h-px: calc(var(--header-h) * 1px);
}

body.admin-bar{
    --top: 32px;
}

html, body{padding: 0; margin: 0;}
body{
    width: 100%;
    max-width: var(--body-max-size);
    min-height: 100vh;
    overflow-x: hidden;
}

*{
    font-family: var(--default-font-family);
    color: var(--default-color);
}

a{text-decoration: none;}
button{border: none; outline: 0;}
ul{list-style: none; padding: 0; margin: 0;}

.site-btn{
    background-color: var(--btn-bg-color);
    color: var(--btn-color);
    min-height: var(--btn-h-px);
    font-size: var(--btn-s-px);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: var(--btn-p);
    border-radius: var(--btn-rad-px);
    transition: background-color .3s ease, color .3s ease;
    will-change: background-color, color;
    max-width: max-content;
    font-weight: bold;
}

.site-btn:hover{
    background-color: var(--btn-bg-color-hv);
    color: var(--btn-color-hv);
}

.site-container{
    width: 100%;
    max-width: var(--container-w-px);
    margin-left: auto; margin-right: auto;
}

.site-title{
    font-size: var(--default-title-s-px);
    color: var(--site-title-color);
}

#site-title, #site-description{display: none;}

/* ===========================================
                    Header
=========================================== */

:root{
    --menu-s: 16px;
    --menu-color: var(--color-8);
    --menu-item-p: 0 30px;
    --srch-w: 363px;
    --srch-h: 30px;
    --srch-s: var(--menu-s);
    --srch-p: 5px 15px 5px 60px;
    --srch-btn-l: 15px;
}

.header-wrapper{
    --header-p: 35px 15 15px;
    --header-w: 1785px;
    --menu-item-border: var(--color-2) 2px solid;
    --logo-h: 150px;

    background-color: var(--header-bg-color);
    position: fixed;
    top: var(--top); left: 0;
    width: 100%;
    z-index: 800;
}

.header-wrapper.mini {
    --header-h-px: 80px;
    /*--header-p: 10px 15px;*/
    --header-p: 15px;
    --logo-h: 50px;
    box-shadow: rgba(0, 0, 0, .16) 0 3px 6px;
}

header{
    min-height: var(--header-h-px);
    display: flex;
    padding: var(--header-p);
    max-width: var(--header-w);
    justify-content: space-between;
    transition: min-height .3s ease, box-shadow .3s ease, padding .3s ease;
    will-change: min-height, box-shadow, padding;
    margin: 0 auto;
}

body.admin-bar header{top: var(--admin-bar-h);}

header #branding img{
    max-height: var(--logo-h);
    width: auto;
    transition: max-height .3s ease;
}

header > nav, header > nav ul{
    display: flex;
    justify-content: space-between;
}

.header-wrapper.mini nav, .header-wrapper.mini nav ul{
    align-items: center;
}

header > nav ul li,
#menu-mobile > nav ul li{
    padding: var(--menu-item-p);
}

header > nav ul li:not(:last-of-type){
    border-right: var(--menu-item-border);
}

header > nav ul li a,
header > nav ul li a span,
#menu-mobile > nav ul li a span,
#menu-mobile > nav ul li a
{
    font-size: var(--menu-s);
    color: var(--menu-color);
    text-transform: uppercase;
    transition: transform .3s ease, color .3s ease;
    will-change: trnasform, color;
    display: inline-block;
    white-space: nowrap;
}

header > nav ul li a:hover span{
    color: var(--color-2);
    transform: scale(1.15);
}

header form,
#menu-mobile form{
    position: relative;
    width: var(--srch-w);
    transform: translateY(-20%);
}

.header-wrapper.mini form{
    transform: translateY(0);
}

header input[type="image"],
#menu-mobile input[type="image"]{
    position: absolute;
    top: 50%; left: var(--srch-btn-l);
    transform: translateY(-50%);
}
header input[type="text"],
#menu-mobile input[type="text"]{
    min-height: var(--srch-h);
    font-size: var(--srch-s);
    padding: var(--srch-p);
    width: 100%;
    max-width: var(--srch-w);
}

header .btn,
#menu-mobile .btn{
    background-color: var(--color-3);
    color: white;
    font-size: 20px;
    border-radius: 10px;
    padding: 5px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-left: 15px;
    line-height: 1;
    text-transform: uppercase;
    max-height: max-content;
}

header .btn{transform: translateY(-15%);}

header .btn:hover,
#menu-mobile .btn:hover{
    background-color: var(--color-4);
    color: white;
}

.header-wrapper.mini header .btn{transform: translateY(0);}

/* Menu mobile */

#menu-trigger{
    display: none;
    justify-content: center;
    align-items: center;
    width: 60px; height: auto;
    aspect-ratio: 1; border-radius: 50%;
    transition: background-color .3s ease;
    position: fixed; top: 10px; right: 15px;
    z-index: 2000;
}

#menu-trigger svg{
    width: 40px; height: auto;
}

#menu-trigger svg path{
    transition: fill .3s ease;
    will-change: fill;
    fill: var(--color-2);
}

#menu-mobile{
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    max-width: 100vw;
    height: var(--100vh);
    background-color: white;
    opacity: 0;
    transform: translateY(-100%);
    transition:  opacity .5s ease, transform .5s ease;
    will-change: opacity, transform;
    display: flex; flex-direction: column;
    justify-content: space-between;
    padding: 15px;
    align-items: center;
    z-index: 1000;
}

#menu-mobile input[type="text"],
#menu-mobile > nav ul li{text-align: center}

body.menu-show #menu-mobile{
    opacity: 1;
    transform: translateY(0);
}

body.menu-show{overflow: hidden;}

#menu-trigger:hover{
    background-color: var(--color-2);
}

#menu-trigger:hover svg path{
    fill: white;
}

#branding-mobile img{
    max-height: 10vh;
}


/* ===========================================
                    Contenu
=========================================== */

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

/* ===========================================
                    Footer
=========================================== */

footer{
    --container-w: 1700px;
    --ft-t: 50px;
    --contact-w: 400px;
    --contact-img-w: 120px;
    --contact-img-m: 20px;
    --contact-s: 20px;
    --nl-title-s: 32px;
    --nl-s: 20px;
    --nl-input-h: 50px;
    --block-w: 600px;
    --mention-s: 16px;
    background-color: var(--footer-bg-color);
    padding-top: var(--ft-t);
}

footer .container{
    max-width: var(--container-w);
    padding-bottom: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

footer .container:last-of-type{padding-top: 10px}

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

footer .contact img{
    width: var(--contact-img-w);
    height: auto;
    margin-bottom: var(--contact-img-m);
}

footer .contact p{
    max-width: var(--block-w);
    line-height: 1.3em;
    font-size: var(--contact-s);
    color: var(--color-8);
}

footer .newsletter{
    text-align: right;
    margin: 0 0 0 auto;
    max-width: var(--block-w);
    display: flex; flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}

footer .newsletter h2{
    font-size: var(--nl-title-s);
}

footer .separator{
    grid-column: 1 / 3;
    border-top: var(--color-3) 1px solid;
    width: 100%;
    min-height: 1px;
    margin-top: 30px;
}

footer .wpcf7-spinner,
footer .newsletter br{display: none!important}
footer .newsletter label{
    position: relative;
    border: var(--color-3) 1px solid;
    border-radius: 10px;
    overflow: hidden;
}
footer .newsletter input{min-height: var(--nl-input-h); padding-left: 10px; font-size: var(--nl-s);width: 100%;}
footer .newsletter input, footer .newsletter input:focus,
footer .newsletter input:active,footer .newsletter input:focus-visible{border: none;}
footer .newsletter button[type="submit"]{
    position: absolute;
    top: 50%; right: 0;
    transform: translateY(-50%);
    background: transparent;
    padding-right: 10px;
}

footer .newsletter button[type="submit"] svg {
    height: var(--nl-s);
    width: auto;
}
footer .newsletter button[type="submit"] svg path{
    transition: fill .3s ease;
    will-change: fill;
}

footer .newsletter button[type="submit"]:hover svg path{
    fill: var(--color-3)
}

footer .newsletter .wpcf7-response-output{text-align: center}

footer .mentions-left a:not(:last-of-type),
footer .mentions-right a:not(:last-of-type){
    margin-right: 15px;
}

footer .mentions-left a,
footer .mentions-right a{
    font-size: var(--mention-s);
    color: black;
    transition: color.3s ease;
    will-change: color;
    display: inline-block;
}

footer .mentions-left a:hover,
footer .mentions-right a:hover{
    color: var(--color-3);
}

footer .mentions-right{text-align: right;}


/* ===========================================
                Responsive Design
=========================================== */

@media (max-width: 1920px){
    :root{
        --bkpt: 1920;
        --body-max-size: 100vw;
        --container-w-px: calc(100vw * var(--container-w) / var(--bkpt));
        --default-font-s-px: calc(100vw * var(--default-font-s) / var(--bkpt));
        --default-title-s-px: calc(100vw * var(--default-title-s) / var(--bkpt));
        --btn-rad-px: calc(100vw * var(--btn-rad) / var(--bkpt));
        --btn-s-px: calc(100vw * var(--btn-s) / var(--bkpt));
        --btn-h-px: calc(100vw * var(--btn-h) / var(--bkpt));
        --btn-p: calc(100vw * 10 / var(--bkpt)) calc(100vw * 110 / var(--bkpt));

        --menu-s: calc(100vw * 16 / var(--bkpt));
        --menu-item-p: 0 calc(100vw * 20 / var(--bkpt));
        --srch-w: calc(100vw * 363 / var(--bkpt));
        --srch-h: calc(100vw * 30 / var(--bkpt));
        --srch-p: calc(100vw * 5 / var(--bkpt)) calc(100vw * 15 / var(--bkpt)) calc(100vw * 5 / var(--bkpt)) calc(100vw * 60 / var(--bkpt));
        --srch-btn-l: calc(100vw * 15 / var(--bkpt));
    }

    .header-wrapper {
        --header-p: calc(100vw * 35 / var(--bkpt)) 15px calc(100vw * 15 / var(--bkpt));
        --menu-item-border: var(--color-2) calc(100vw * 2 / var(--bkpt)) solid;
        --logo-h: calc(100vw * 150 / var(--bkpt));
    }

    footer {
        --container-w: calc(100vw * 1700 / var(--bkpt));
        --ft-t: calc(100vw * 50 / var(--bkpt));
        --contact-img-w: calc(100vw * 120 / var(--bkpt));
        --contact-img-m: calc(100vw * 20 / var(--bkpt));
        --contact-s: calc(100vw * 20 / var(--bkpt));
        --nl-s: calc(100vw * 20 / var(--bkpt));
        --nl-input-h: calc(100vw * 50 / var(--bkpt));
        --block-w: calc(100vw * 600 / var(--bkpt));
        --nl-title-s: calc(100vw * 32 / var(--bkpt));
        --contact-w: calc(100vw * 400 / var(--bkpt));
    }

    .header-wrapper.mini {
        --header-h-px: calc(100vw * 80 / var(--bkpt));
        --header-p: 15px calc(100vw * 100 / var(--bkpt));
    }
}

@media (max-width: 1024px){
    :root{
        --bkpt: 1024;
        --container-w-px: 100%;

        --menu-item-p: 10px 30px;
        --menu-s: 16px;
        --srch-p: 5px 15px;
        --header-h-px: 80px;
    }

    .header-wrapper, .header-wrapper.mini {
        --header-p: 15px;
    }

    #menu-trigger{display: flex;}
    nav#menu{display: none;}

    footer {--container-w: 100%;}
    footer .container{grid-template-columns: 1fr 1fr}
}

@media (max-width: 768px){
    :root{
        --bkpt: 768;
    }

    footer .container{grid-template-columns: 1fr;}
    footer .contact, footer .newsletter,
    footer .mentions-left, footer .mentions-right{text-align: center;}
    footer .contact p, footer .newsletter{margin: 0 auto}

    footer .mentions-left, footer .mentions-right{
        display: grid;
        grid-template-columns: 1fr;
    }
    footer .mentions-left, footer .mentions-right, footer .container{gap: 5px;}
    footer .contact{margin: 0 auto 30px;}
}

@media (max-width: 480px){
    :root{
        --bkpt: 480;
        --default-font-s-px: 12px;
        --default-title-s-px: 20px;
        --btn-s-px: 18px;
        --btn-h-px: 40px;
        --btn-p: 5px 20px;
    }

    footer {
        --ft-t: 30px;
        --contact-img-w: calc(100vw * 120 / var(--bkpt));
        --contact-img-m: 20px;
        --contact-s: 16px;
        --nl-s: 16px;
        --nl-input-h: 40px;
        --block-w: 100%;
        --nl-title-s: 24px;
        --contact-w: 100%;
    }
}