@import "../fonts/stylesheet.css";

:root{
    --admin-bar-h: 32px;

    --color-1: #125A9D;
    --color-2: #EA8F1E;
    --color-3: #141414;
    --color-4: #ffffff;
    --color-5: #CFDDEB;
    --color-6: #F8F8F8;
    --color-7: red;

    --text-color: var(--color-1);
    --bg-color: var(--color-4);
    --container-w: 1600px!important;
    --container-space: calc((1920px - (var(--container-w) + 30px)) / 2);
    --header-h: 155px;
    --header-mini-h: 80px;

    /* boutons */
    --btn-color: var(--color-4);
    --btn-h: 30px;
    --btn-s: 15px;
    --btn-bg: var(--color-1);
    --btn-p: 0 20px;
    --btn-big-s: 25px;
    --btn-big-h: 58px;
}


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

body{
    width: 100%;
    max-width: 1920px;
    min-height: 100vh;
    background-color: var(--bg-color);
    overflow-x: hidden;
    margin-left: auto;
    margin-right: auto;
}

ul{margin: 0; padding: 0; list-style: none;}

*{
    font-family: Poppins, sans-serif;
    color: var(--text-color);
    box-sizing: border-box;
}

h2, h3, h4, h5, h6{margin-top: 0;margin-bottom: 0.5em; line-height: 1.2em;}

a{
    display: inline-block;
    text-decoration: none;
    color: white;
}
blockquote{font-style: italic; background-color: #f8f8f8; border-radius: 20px; margin: 5px 0;padding: 15px;}
blockquote p{margin: 0;}
blockquote p:before {content: open-quote; margin-right: 5px;}
blockquote p:after {content: close-quote; margin-left: 5px;}

.container{
    width: 100%;
    max-width: var(--container-w);
    margin: 0 auto;
}

.alert{
    padding: 10px;
    border-radius: 5px;
    font-size: 20px;
    width: 100%; text-align: center;
}

.alert.alert-info{
    border: #b8daff 1px solid;
    background-color: #cce5ff;
    color: var(--color-1);
}

.alert.alert-success{
    border: #badbcc 1px solid;
    background-color: #d1e7dd;
    color: #0f5132;
}

.alert.alert-danger{
    border: #f5c2c7 1px solid;
    background-color: #f8d7da;
    color: #842029;
}

.alert.alert-warning{
    border: #ffecb5 1px solid;
    background-color: #fff3cd;
    color: #664d03;
}

.btn{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: var(--btn-h) !important;
    background-color: var(--btn-bg) !important;
    border-radius: calc(var(--btn-h) / 2) calc(var(--btn-h) / 2) 0 calc(var(--btn-h) / 2) !important;
    padding: var(--btn-p) !important;
    text-align: center;
}

.cnarm-btn{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: var(--btn-h);
    background-color: var(--btn-bg);
    border-radius: calc(var(--btn-h) / 2) calc(var(--btn-h) / 2) 0 calc(var(--btn-h) / 2);
    padding: var(--btn-p);
    text-align: center;
}

.cnarm-btn, .cnarm-btn *{
    color: var(--btn-color);
    font-size: var(--btn-s);
}

.cnarm-btn:hover{color:  white; text-decoration: none;}

.cnarm-btn.big{--btn-h: var(--btn-big-h);}
.cnarm-btn.big, .cnarm-btn.big *{font-size: var(--btn-big-s);}
.cnarm-btn.orange{background-color: var(--color-2);}
.cnarm-btn.orange:hover{background-color: var(--color-1);}

.btn, .btn *{
    color: var(--btn-color) !important;
    font-size: var(--btn-s) !important;
}

.btn.big{
    --btn-h: var(--btn-big-h) !important;
}

.btn.big, .btn.big *{
    font-size: var(--btn-big-s) !important;
}

.btn.orange{background-color: var(--color-2) !important;}
.btn.orange:hover{background-color: var(--color-1) !important;}

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

header{
    /* Header */
    --menu-mobile-speed: .5s;
    --header-bg: var(--color-4);
    --menu-color: var(--color-3);
    --menu-underline-color: var(--color-2);
    --menu-li-p: 0 20px;
    --menu-s: 20px;
    --logo-w: 181px;
    --tools-t: -50px;
    --tools-picto-h: 50px;
    --tools-g: 45px;
    --tools-sep-r: 20px;
    --tools-sep-h: 80px;
    --header-mini-tools-sep-h: 60px;

    background-color: var(--header-bg);
    position: fixed; z-index: 888;
    top: 0; left: 0; width: 100%;
    box-shadow: rgba(0,0,0,.16) 0 3px 6px;
}

header.mini{
    --tools-t: 0;
    --tools-sep-h: var(--header-mini-tools-sep-h);
}

header.mini{--header-h: var(--header-mini-h);}

header > .container{
    min-height: var(--header-h);
    display: grid;
    grid-template-columns: var(--logo-w) 1fr auto;
    justify-content: space-between;
    align-items: center;
    transition: min-height .2s ease;
    will-change: min-height;
}

header .logo img{
    width: 100%;
    height: auto;
    max-width: var(--logo-w);
}

/* Menu */
header nav ul{
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    margin: 0;
}
header nav ul li a, header nav ul li a *{
    color: var(--menu-color);
    text-decoration: none;
    font-size: var(--menu-s);
}

header nav ul li{
    padding: var(--menu-li-p);
}

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

header nav ul > li > a{
    position: relative;
}
header nav ul > li > a:before{
    content: '';
    position: absolute;
    background-color: var(--menu-underline-color);
    left: 50%; bottom: 0;
    width: 0; height: 2px;
    transform: translateX(-50%);
    transition: width .3s ease;
    will-change: width;
    text-decoration: none;
}

header nav ul > li > a:hover:before{
    width: 100%;
}

header nav ul > li > a:hover, header nav ul > li > a:hover span{text-decoration: none;}

/* Tools */
header .tools{
    display: grid;
    grid-auto-flow: column;
    gap: var(--tools-g);
    margin-top: var(--tools-t);
}

header .tools-item{
    position: relative;
}

header .tools-item .picto{
    height: var(--tools-picto-h);
    aspect-ratio: 1;
    width: auto;
    text-align: center;
    margin: 0 auto 5px;
    position: relative;
}

header.mini .tools-item .picto{display: none}

header .tools-item .picto svg, header .tools-item .picto img{
    width: auto;
    height: auto;
    max-height: var(--tools-picto-h);
}

header .tools-item .picto img{
    width: var(--tools-picto-h);
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
}

header .tools-item .picto.connected:after{
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 12px; height: auto; aspect-ratio: 1;
    border-radius: 50%;
    background-color: #37c436;
}

header .tools-item .cnarm-btn{transition: background-color .3s ease; will-change: background-color;}
header .tools-item .cnarm-btn:hover{background-color: var(--color-2);}
header .tools > div:not(:last-of-type):after{
    content: "";
    height: var(--tools-sep-h);
    width: 3px;
    background-color: var(--color-2);
    position: absolute;
    right: calc(var(--tools-sep-r) * -1);
    top: 50%; transform: translateY(-20%);
}
body.admin-bar header{top: var(--admin-bar-h)}
header.mini .tools > div:not(:last-of-type):after{transform: translateY(-50%);}

#mobile-trigger{
    border-radius: 50%; position: fixed; z-index: 1000;
    top: calc(var(--header-h) / 2); right: 15px; transform: translateY(-50%);
    aspect-ratio: 1; height: auto; width: 60px;
    display: none; justify-content: center; align-items: center;
    transition: background-color .3s ease; will-change: background-color;
}
body.admin-bar #mobile-trigger{top: calc(var(--header-h) / 2 + var(--admin-bar-h));}
#mobile-trigger svg path{ fill: var(--color-1); transition: fill .3s ease; will-change: fill;}
#mobile-trigger:hover{background-color: var(--color-2)}
#mobile-trigger:hover svg path{fill: var(--color-4);}
#mobile-trigger-open, #mobile-trigger.close #mobile-trigger-close{display: block;}
#mobile-trigger-close, #mobile-trigger.close #mobile-trigger-open{display: none;}

body.mobile-show #mobile-trigger svg path{fill: var(--color-2);}
body.mobile-show #mobile-trigger:hover svg path{fill: white;}

#menu-mobile{
    position: fixed; z-index: -1; background-color: var(--color-4);
    top: 0; left: 0; opacity: 0; transform: translateY(-100%);
    width: 100%; max-width: 100vw; height: 100vh;
    transition: opacity var(--menu-mobile-speed) ease, transform var(--menu-mobile-speed) ease;
    will-change: opacity, transform;
    display: flex; flex-direction: column; justify-content: space-between; align-items: center;
    padding: 15px 15px 30px;
}
body.admin-bar #menu-mobile{height: calc(100vh - var(--admin-bar-h)); top: var(--admin-bar-h);}
#menu-mobile *{color: var(--color-1);}
#menu-mobile .logo img{width: 100%; max-width: 181px; height: auto;}
#menu-mobile .cnarm-btn{background-color: var(--color-2);}
#menu-mobile .tools{display: grid; gap: 20px; grid-template-columns: 1fr;}
#menu-mobile .tools-item .picto{ display: none;}
#menu-mobile .tools-item .cnarm-btn{
    --btn-h: 30px;
    --btn-s: 15px;
    --btn-p: 0 20px;
    --btn-big-s: 25px;
    --btn-big-h: 58px;
    color: white  !important;
}
.mb-5{
    margin-bottom: 30px;
}
.c-pointer{
    cursor: pointer;
}
#menu-mobile nav li{text-align: center;}
body.mobile-show{overflow: hidden;}
body.mobile-show #menu-mobile{opacity: 1; transform: translateY(0); z-index: 999;}

#page{position: relative; z-index: 1; padding-top: var(--header-h);}



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

footer{
    --footer-cols: 350px 1fr;
    --footer-p: 60px 0 75px;
    --footer-bf-h: 8px;
    --footer-bf-b: 20px;
    --footer-right-p: 30px 0 0;
    --footer-right-rows: 70px auto;
    --footer-right-menu-s: 20px;
    --footer-right-menu-g: var(--footer-right-menu-s);
    --footer-right-col: 3;
    --footer-g: 40px;
    --logo-w: 307px;
    --slogan-s: 21px;
    --slogan-m: 60px 0 0 0;
    --footer-sect-title-s: 25px;
    --footer-sect-title-m: 0 0 70px 0;
    --footer-sect-block-s: 21px;
    --footer-sect-ul-m: 35px 0 10px 0;
    --footer-sect-ul-s: 18px;
    --contact-m: 50px 0 0 0;
    --contact-s: var(--slogan-s);
    --social-m: 50px 0 0 0;
    --social-g: 15px;
    --contact-svg-w: 35px;
    --social-svg-w: 49px;
    --social-tk-lnk-w: 50px;
    --social-tk-svg-w: 30px;

    background-color: var(--color-1);
    padding: var(--footer-p);
    position: relative;
    position: relative;
}
footer *{color: white}
footer > .container{display: grid; grid-template-columns: var(--footer-cols); gap: var(--footer-g)}
footer:before{
    content: ""; position: absolute; left: 0; bottom: var(--footer-bf-b);
    width: 100%; height: var(--footer-bf-h); background-color: var(--color-2);
}
footer .footer-right{
    display: grid; gap: var(--footer-g); grid-template-columns: repeat(var(--footer-right-col), 1fr);
    grid-template-rows: var(--footer-right-rows);
    padding: var(--footer-right-p); justify-content: space-between;
}

footer .footer-left > img{width: var(--logo-w); height: auto;}
footer .slogan{
    font-size: var(--slogan-s); font-weight: 300;
    margin: var(--slogan-m);
}

footer .footer-section-title{
    font-size: var(--footer-sect-title-s);
    font-weight: 600;
    margin: var(--footer-sect-title-m);
}

footer .footer-section-block, footer .footer-section-block > a{
    font-size: var(--footer-sect-block-s);
    font-weight: 600;
    color: var(--color-2);
}

footer .footer-section-block a{transition: color .3s ease; will-change: color;}
footer .footer-section-block a:hover{color: white;}

footer .footer-section > div:not(:first-of-type){
    margin: var(--footer-sect-ul-m);
}

footer .footer-section > ul *{
    color: var(--color-5);
    transition: color .3s ease; will-change: color;
    font-weight: 300;
    font-size: var(--footer-sect-ul-s);
}

footer .footer-section > ul a:hover{color: var(--color-2);}

footer .footer-contact{
    margin: var(--contact-m);
}

footer .footer-contact{
    display: grid; grid-auto-flow: row; gap: 15px;
}

footer .footer-contact li{display: flex; align-items: center}
footer .footer-contact li svg{margin-right: 10px;width: var(--contact-svg-w);}
footer .footer-contact a span{transition: color .3s ease; font-size: var(--contact-s); font-weight: bold}
footer .footer-contact a:hover span{color: var(--color-2)}

footer .footer-social{
    display: grid; grid-auto-flow: column; gap: var(--social-g);justify-content: start;
    margin: var(--social-m);
}

footer .footer-social svg path.social-path{transition: fill .3s ease; will-change: fill;}
footer .footer-social a:hover svg path.social-path{fill: var(--color-2)}

footer .footer-right .footer-main-menu{grid-column: 1 / calc(var(--footer-right-col) + 1);}
footer .footer-right .footer-main-menu ul{display: grid; grid-auto-flow: column; gap: var(--footer-right-menu-g);}
footer .footer-right .footer-main-menu ul a{font-weight: 600;}
footer .footer-right h2, footer .footer-right a{font-size: var(--footer-right-menu-s);}
footer .footer-right a{transition: color .3s ease; will-change: color; font-weight: 300;}
footer .footer-right a:hover{color: var(--color-2);}
footer .footer-right h2{font-weight: 500; text-transform: uppercase; color: var(--color-2);}

footer .footer-right .menu-tools li:not(:last-of-type){margin-bottom: 15px;}
footer .footer-right .menu-tools a{color: var(--color-2);}
footer .footer-right .menu-tools a:hover{color: white;}

footer .footer-social svg{
    width: var(--social-svg-w);
    height: auto;
}
footer .footer-social .tikok a{
    background-color: white;
    width: var(--social-tk-lnk-w); height: var(--social-tk-lnk-w); border-radius: 50%;
    display: flex;justify-content: center; align-items: center;
    transition: background-color .3s ease;
    will-change: background-color;
}
footer .footer-social .tikok a:hover{background-color: var(--color-2);}
footer .footer-social .tikok svg{ width: var(--social-tk-svg-w); height: auto;}
footer .footer-social .tikok svg path{fill: var(--color-1);}


.elementor-widget-theme-post-content a{color: var(--color-1);}

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

@media (max-width: 1920px) {
    :root{
        --bkpt: 1920;
        --header-h: calc(100vw * 155 / var(--bkpt));
        --container-w: calc(100vw * 1600 / var(--bkpt))!important;
        --container-space: calc((100vw - (var(--container-w) + 30px)) / 2);

        /* boutons */
        --btn-h: calc(100vw * 30 / var(--bkpt));
        --btn-s: calc(100vw * 15 / var(--bkpt));
        --btn-p: 0 calc(100vw * 20 / var(--bkpt));
        --btn-big-s: calc(100vw * 25 / var(--bkpt));
        --btn-big-h: calc(100vw * 58 / var(--bkpt));
    }

    header{
        /* Header */
        --header-mini-h: calc(100vw * 80 / var(--bkpt));
        --logo-w: calc(100vw * 181 / var(--bkpt));
        --menu-li-p: 0 calc(100vw * 20 / var(--bkpt));
        --menu-s: calc(100vw * 20 / var(--bkpt));
        --tools-t: calc(100vw * -50 / var(--bkpt));
        --tools-picto-h: calc(100vw * 50 / var(--bkpt));
        --tools-g: calc(100vw * 45 / var(--bkpt));
        --tools-sep-r: calc(100vw * 20 / var(--bkpt));
        --tools-sep-h: calc(100vw * 80 / var(--bkpt));
        --header-mini-tools-sep-h: calc(100vw * 60 / var(--bkpt));
    }

    footer{
        --footer-cols: calc(100vw * 350 / var(--bkpt)) 1fr;
        --footer-p: calc(100vw * 60 / var(--bkpt)) 0 calc(100vw * 75 / var(--bkpt));
        --footer-bf-h: calc(100vw * 8 / var(--bkpt));
        --footer-bf-b: calc(100vw * 20 / var(--bkpt));
        --footer-right-p: calc(100vw * 30 / var(--bkpt)) 0 0;
        --footer-right-rows: calc(100vw * 70 / var(--bkpt)) auto;
        --footer-right-menu-s: calc(100vw * 20 / var(--bkpt));
        --footer-g: calc(100vw * 40 / var(--bkpt));
        --logo-w: calc(100vw * 307 / var(--bkpt));
        --slogan-s: calc(100vw * 21 / var(--bkpt));
        --slogan-m: calc(100vw * 60 / var(--bkpt)) 0 0 0;
        --footer-sect-title-s: calc(100vw * 25 / var(--bkpt));
        --footer-sect-title-m: 0 0 calc(100vw * 70 / var(--bkpt)) 0;
        --footer-sect-block-s: calc(100vw * 21 / var(--bkpt));
        --footer-sect-ul-m: calc(100vw * 35 / var(--bkpt)) 0 calc(100vw * 10 / var(--bkpt)) 0;
        --footer-sect-ul-s: calc(100vw * 18 / var(--bkpt));
        --contact-m: calc(100vw * 50 / var(--bkpt)) 0 0 0;
        --social-m: calc(100vw * 50 / var(--bkpt)) 0 0 0;
        --social-g: calc(100vw * 15 / var(--bkpt));
        --contact-svg-w: calc(100vw * 35 / var(--bkpt));
        --social-svg-w: calc(100vw * 49 / var(--bkpt));
        --social-tk-svg-w: calc(100vw * 30 / var(--bkpt));
        --social-tk-lnk-w: calc(100vw * 50 / var(--bkpt));
    }

    .container{padding: 0 15px;}
    blockquote{
        border-radius: calc(100vw * 20 / var(--bkpt));
        margin: calc(100vw * 5 / var(--bkpt)) 0;
        padding: calc(100vw * 15 / var(--bkpt));
    }
}

@media (max-width: 1024px){
    :root{
        --bkpt: 1024;
        --header-h: 80px;
        --container-space: 15px;
    }

    header{
        --header-mini-h: 80px;
        --logo-w: 130px;
    }

    footer{
        --footer-right-col: 2;
    }

    #mobile-trigger{display: flex;}
    header #menu, header .tools{display: none;}
    footer .footer-right{grid-auto-flow: unset; grid-template-columns: 1fr 1fr;}
    footer .footer-right .footer-main-menu ul{ grid-template-columns: 1fr 1fr 1fr;grid-auto-flow: unset; gap: 0;}
}

@media screen and (max-width: 782px){
    :root{
        --admin-bar-h: 46px;
    }

    footer{--bkpt: 768;}
    footer > .container{grid-template-columns: 1fr}
    footer .footer-right{grid-template-rows: unset;}
    footer .footer-right .footer-main-menu ul{ grid-template-columns: 1fr 1fr;}
}

@media screen and (max-width: 600px){
    header{position: sticky;}
    #page{padding-top: 0;}
    body.admin-bar header{ top: 0}
}

@media (max-width: 480px) {
    :root{
        --bkpt: 480;
        --btn-big-s: 16px;
        --btn-big-h: 30px;
        --btn-p: 5px 20px;
        --btn-s: 14px;
        --btn-h: 30px;
    }

    .alert{font-size: 16px;}

    footer{
        --bkpt: 480;
        --slogan-s: 16px;
        --footer-sect-ul-s: 16px;
        --footer-sect-block-s: 18px;
        --footer-sect-title-s: 20px;
        --footer-sect-title-m: 0 0 20px;
        --footer-sect-ul-m: 15px 0 0;
        --footer-g: 30px;
        --logo-w: calc(100vw * 250 / var(--bkpt));
        --footer-p: 30px 0 50px;
    }

    blockquote{
        border-radius: 15px;
        margin: 5px 0;
        padding: 15px;
    }

    footer *{text-align: center;}
    footer .footer-contact, footer .footer-contact li, footer .footer-social{justify-content: center}
    footer .footer-right, footer .footer-right .footer-main-menu ul{grid-template-columns: 1fr}
    footer .footer-right .footer-main-menu{grid-column: unset;}
}