@import url("../fonts/fonts.css");

:root {
    /* Variables de thème */
    --body-max-w: 1920px;
    --red: #F70202;
    --primary: #F70202;
    --black: #000;
    --black-2: #2B2523;
    --dflt-font: Arial, sans-serif;
    --bkpt: 1920;

    /* Personnalisation des éléments généraux */
    --body-bg: #fff;
    --header-h: 148px;
    --header-top-h: 94px;
    --header-bottom-h: 54px;
    --header-menu-bg: var(--red);
    --header-logo-w: 241px;
    --menu-gap: 30px;
    --menu-trigger-size: 60px;
    --footer-content-h: 386px;
    --footer-link-h: 83px;
    --footer-agc-pin-h: 28px;

    --section-title-size: 50px;
    --aside-trigger-w: 80px;
}

#commercial{
    --btm-com-title-size: 54px;
    --btm-com-text-size: 36px;
    --btm-com-form-w: 679px;
    --btm-com-form-h: 466px;
    --btn-com-label-s: 30px;
    --btn-com-input-h: 35px;
    --btm-com-submit-w: 212px;
    --btm-com-submit-h: 56px;
}

#commercial-aside{
    --btm-com-title-size: 32px;
    --btm-com-text-size: 23px;
    --btm-com-form-w: 679px;
    --btm-com-form-h: 466px;
    --btn-com-label-s: 20px;
    --btn-com-input-h: var(--btn-com-label-s);
    --btm-com-submit-w: 212px;
    --btm-com-submit-h: 56px;
}

#commercial-aside{
    --aside-w: 703px;
}

#newsletter{
    --btm-nl-h: 610px;
    --btm-nl-title-size: 162px;
    --btm-nl-text-size: 40px;
    --btm-nl-form-w: 860px;
    --btm-nl-input-s: 24px;
    --btm-nl-input-h: 51px;
}


*{font-family: var(--dflt-font);}
body{width: 100%; max-width: var(--body-max-w); min-height: 100vh; background-color: #fff;overflow-x: hidden;margin: 0 auto;}
.container{width: 100%; max-width: 1600px;margin: 0 auto;}
.btn{background-color: var(--black); color: white;font-size: 16px;font-weight: bold;padding: 7px 28px;}
.btn.shadow{box-shadow: rgba(0,0,0,.3) 0 3px 6px;}
.btn:hover{color: white;}
/*section{overflow: hidden;}*/

/* =============================
         Header
============================= */
.search-mobile, #open-search{display: none;}
.search-mobile{
    position: fixed;
    left: 0; top: 80px;
    width: 100%;
    z-index: 999;
    background-color: white;
    padding: 15px;
    border-top: #ccc 1px solid;
    box-shadow: rgb(0 0 0 / 16%) 0 3px 6px;
}

.strtoupper{
    text-transform: uppercase;
}
header{
    position: sticky;
    top: 0; left: 0;
    z-index: 999;
    min-height: var(--header-h);
    display: grid;
    grid-template-rows: var(--header-top-h) var(--header-bottom-h);
}
header .top .logo img{margin: 5px 0 0 5px;width: var(--header-logo-w);}
header .container > div:not(.logo){padding-bottom: 15px;}
header .top{background-color: white;min-height: 94px}
header .bottom{background-color: var(--red);min-height: 54px;display: flex;}
header .container{display: grid; justify-content: space-between;padding: 0; align-items: center;gap: 20px;}
/*header .top .container{grid-template-columns: calc(var(--header-logo-w) + 5px) 1fr auto auto; align-items: end;}*/
header .top .container{grid-template-columns: calc(var(--header-logo-w) + 5px) 1fr auto; align-items: end;}
header .bottom .container{grid-template-columns: calc(var(--header-logo-w) + 5px) 1fr auto;}
/*header .contact, header .contact a{display: flex; align-items: center;}*/
header #search, #search-mobile{position: relative; max-width: 645px;}
header #search input, #search-mobile input{width: 100%;border-radius: 0; outline: 0; border: 0; border-bottom: var(--red) 1px solid;padding-left: 9%;font-size: 17px;}
header #search button, #search-mobile button{position: absolute; top: -11px; left: -6px;border: 0; outline: 0; background-color: transparent;}
/*header .search, header .nav-menu{margin-left: 111px;}*/
header .search{margin-left: 60px;}
header .nav-menu{margin-left: 30px;}

header .nav-menu{display: flex; align-items: center;}
header .nav-menu ul{display: grid; grid-auto-flow: column; gap: var(--menu-gap); list-style: none;margin: 0; padding: 0}
header .nav-menu ul a{color: white; font-weight: 900;font-size: 18px;}
header .nav-menu ul li{position: relative;min-height: var(--header-bottom-h);display: flex; align-items: center;}
header .nav-menu > ul > li > a{display: flex; align-items: center; gap: 10px; white-space: nowrap;}
header .nav-menu > ul > li:not(:last-of-type):after{
    content: '';
    position: absolute;
    top: 50%;
    right: calc(-1 * var(--menu-gap) / 2);
    height: 60%;
    width: 1px;
    background-color: white;
    transform: translateY(-50%);
}
header .nav-menu [data-submenu] > a:after{
    font-family: "Font Awesome 5 Free";
    content: '\f077';
    margin: 5px;
    font-size: 16px;
    transition: transform .2s ease;
    transform-origin: center;
    will-change: transform;
    display: inline-block;
}
header .nav-menu [data-submenu].show a:after{transform: rotate(180deg);}
/*header .top .contact{margin-right: 30px;display: grid; grid-auto-flow: column; gap: 24px;padding-bottom: 8px!important; align-items: center;}*/
header .top .contact{display: grid; grid-auto-flow: column; gap: 24px;padding-bottom: 8px!important; align-items: center;}
header .top .contact *{color: black;}
header .top .contact span{font-size: 20px;}
header .top .contact a{font-size: 18px;font-weight: bold; transition: color .3s ease;}
header .top .contact a:hover{color: var(--red);}
header .top .contact .tel{display: flex;}
header .top .contact .tel p{margin-bottom: 0;}
header .top .contact .call{margin-right: 5px;}
header .tools{display: grid; grid-auto-flow: column; gap: 40px;}

header .bottom .contact{padding-bottom: 0!important;}

header .submenu{
    display: grid;
    position: absolute;
    bottom: 0; left: 0;
    transform: translateY(100%) scaleY(0);
    transform-origin: top center;
    transition: transform .3s ease, width .3s ease;
    will-change: transform, width;
}
header .submenu.show{display: grid;transform: translateY(100%) scaleY(1);background-color: white;}
header .submenu > ul,
header .submenu .categories > ul{grid-auto-flow: row; gap: 0;}
header .submenu > ul > li > a,
header .submenu .categories > ul > li > a{font-weight: normal; font-size: 18px; color: black; white-space: nowrap;padding: 0 15px;text-transform: uppercase;}
header .submenu > ul > li:not(:last-of-type),
header .submenu .categories > ul > li:not(:last-of-type){border-bottom: var(--red) 1px solid;}
header .submenu > ul > li > a,
header .submenu .categories > ul > li > a{display: flex; align-items: center; align-self: stretch; width: 100%; transition: background-color .3s ease, color .3s ease; will-change: background-color, color;}
header .submenu > ul > li > a:hover,
header .submenu .categories > ul > li > a:hover{background-color: var(--red); color: white;}

header .wild-sub{display: grid; grid-template-columns: auto 1fr;width: 100vw; max-width: 275px;}
header .wild-sub{max-width: max-content;}
/*header .wild-sub.show{max-width: 1081px;}*/

header .wild-sub .category-content.show{display: block}
header .wild-sub .category-content{min-width: 821px; display: none;}

header .wild-sub .category-container{display: none;}
header .wild-sub.show .category-container{display: block}
header .wild-sub .category-container{overflow: hidden}
header .wild-sub .category-content{position: relative;background: url('/theme/charte/imgs/submenu.jpg') no-repeat; background-size: cover; height: 100%}
header .wild-sub .category-content:before{background-color: rgba(255,255,255,.7); content: ''; top: 0; left: 0; width: 100%; height: 100%;position: absolute;z-index: 1;}
header .wild-sub .titre > div,
header .wild-sub .category-content > div{display: none; width: 100%; position: relative; z-index: 2;}
header .wild-sub .category-content{padding: 5%;}
header .wild-sub .titre > div{white-space: nowrap; color: var(--red);text-transform: uppercase; font-size: 54px; font-weight: bold;text-align: center;}
header .wild-sub .titre > div.show{display: inline-block;}
header .wild-sub .category-content > div.show{display: grid;gap: 10%;grid-auto-flow: unset; grid-template-columns: repeat(auto-fit, 193px);}
header .wild-sub .group *{color: black;}
header .wild-sub .group ul{grid-auto-flow: row;gap: 0;}
header .wild-sub .group ul li{min-height: 0;}
header .wild-sub .subcategory{font-size: 17px;font-weight: bold; color: black;}
header .wild-sub .group > a{font-weight: 500; font-size: 12px;}
header .wild-sub .group li a{font-size: 17px; font-weight: 500;color: black}
header .tools{display: none;}

body.menu-mobie-show{overflow: hidden;}
.menu-mobie-show #mobile-menu{transform: translateY(0);opacity: 1;}
#menu-trigger{position: fixed; top: 10px; right: 10px; width: var(--menu-trigger-size); height: var(--menu-trigger-size); background-color: white; border-radius: 50%; justify-content: center; align-items: center; transition: background-color .3s ease, color .3s ease; will-change: background-color, color; color: var(--red); display: none; z-index: 2222; font-size: 24px;}
#menu-trigger:hover{background-color: var(--red); color: white;}
#menu-trigger .fa-bars{display: unset;}
#menu-trigger .fa-xmark{display: none;}
.menu-mobie-show #menu-trigger .fa-bars{display: none;}
.menu-mobie-show #menu-trigger .fa-xmark{display: unset;}
.menu-mobie-show #menu-trigger{background-color: var(--red); color: white;}
.menu-mobie-show #menu-trigger:hover{background-color: white; color: var(--red);}

#mobile-menu{opacity: 0; position: fixed; left: 0; top: 0; transform: translateY(-100%); width: 100%; max-width: 100vw; min-height: 100vh; background-color: var(--red);transition: transform .5s ease, opacity .5s ease; will-change: transform, opacity; z-index: 1111; display: flex; justify-content: space-between; align-items: center;flex-direction: column; padding: 7vw 0;}
#mobile-menu ul{list-style: none;margin: 0; padding: 0}
/*#mobile-menu ul li{text-align: center;}*/
#mobile-menu ul li a{color: white; transition: color .3s ease; will-change: color;}
#mobile-menu ul li a:hover{color: black}
#mobile-menu ul > li > a{font-size: 24px;}
#mobile-menu .submenu ul{margin-left: 20px;}
#mobile-menu .submenu ul > li > a{font-size: 16px;}
#mobile-menu *{color: white;}
#mobile-menu .wild-sub > div{display: none!important;}
#mobile-menu .wild-sub.show > div{display: block!important;}
#mobile-menu .wild-sub.show > div.category-container{display: none!important;}
#mobile-menu ul > li.show .submenu{ display: unset;}
#mobile-menu .submenu{display: none;}
#mobile-menu .submenu.show{display: block;}
#mobile-menu .tools{display: grid; grid-auto-flow: column; gap: 15px;}
#mobile-menu .contact, #mobile-menu .contact-buttons{display: grid; grid-template-columns: 1fr; align-items: center; gap: 15px;}
#mobile-menu .contact a{font-size: 18px;font-weight: bold; transition: color .3s ease; display: inline;}
#mobile-menu .contact a:hover{color: black;}
#mobile-menu .contact .tel{display: flex; align-items: center;}
#search-mobile input{
    height: 30px;
    padding-left: 40px;
}

/*===========================
        Navbar
=============================*/
.navbar{max-width: max-content;margin-top: 40px;padding: 0; display: flex; flex-wrap: nowrap;}
.navbar a{font-size: 25px; color: var(--red);text-decoration: underline; white-space: nowrap;}
.navbar a:last-of-type{display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;white-space: unset;}
.navbar span{font-size: 25px; color: var(--red);margin: 0 15px;text-decoration: none;}


/* =============================
         Bas de page
============================= */
#commercial{background: url("/theme/charte/imgs/btm-ctct-bg.svg") no-repeat; background-size: 100% auto; background-position: top center;}
#newsletter{background: url("/theme/charte/imgs/nl-bg.png") no-repeat; background-size: cover; background-position: bottom left;min-height: var(--btm-nl-h);margin-top: -1%;}

/* Section contact commercial */
#commercial .header *{color: white;}
#commercial h2{margin-top: 2%;margin-bottom: 0;line-height: 1.0em;}
#commercial h2 *{font-size: var(--btm-com-title-size); font-weight: bold;text-align: center;text-transform: uppercase;}
#commercial .text{margin-top: 0.5%;}
#commercial .text *{font-size: var(--btm-com-text-size); text-align: center;}
#commercial .form{
    width: 100%; max-width: var(--btm-com-form-w);min-height: var(--btm-com-form-h);
    margin-top: 3%;
    background: white url("/theme/charte/imgs/btm-ctct-form-bg.png") no-repeat;
    background-size: cover; background-position: bottom left;
    border: var(--red) 1px solid; border-radius: 15px;
    box-shadow: rgba(0,0,0,0.16) 0 9px 13px;
}
#commercial form{width: 100%; max-width: 73%; margin: 6% auto;padding-left: 6%;}
#commercial .control-group{display: flex; width: 100%;margin-bottom: 4%;}
#commercial .control-submit{margin: 13% auto 0;text-align: center;}
#commercial label{font-size: var(--btn-com-label-s); font-weight: bold;white-space: nowrap;margin-right: 5px;}
#commercial input{border: none; border-bottom: #000 1px solid; width: 100%;height: var(--btn-com-input-h);}
#commercial button{background-color: black; color: white; width: var(--btm-com-submit-w); height: var(--btm-com-submit-h); border-radius: 9px; border: #000 1px solid; transition: background-color .2s ease; will-change: background-color; display: flex; justify-content: center; align-items: center;box-shadow: rgba(0,0,0,0.16) 0 3px 6px;margin: 0 auto;}
#commercial button > div{color: inherit; transition: color .2s ease; will-change: color;font-size: 20px; font-weight: bold;}
#commercial button:hover{background-color: white;}
#commercial button:hover > div{color: var(--red);}

/* Section newsletter */
#newsletter h2{margin-top: 7%;margin-bottom: 0;padding-left: 8%}
#newsletter h2 *{font-size: var(--btm-nl-title-size); font-weight: bold;font-style: italic;text-transform: uppercase; color: white; line-height: 1.0em;}
#newsletter h2 span{color: black}
#newsletter .text *{font-size: var(--btm-nl-text-size); text-align: center;text-transform: uppercase; font-weight: bold;}
#newsletter .header, #newsletter .header .col{padding: 0;}
#newsletter form{width: 100%; max-width: var(--btm-nl-form-w); margin: 1% auto; position: relative;}
#newsletter form input{width: 100%;min-height: var(--btm-nl-input-h); border-radius: 7px; border: var(--red) 1px solid;padding-left: 5%;color: black; font-size: var(--btm-nl-input-s);}
#newsletter form button{background: transparent; outline: none; border: none; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--red);}

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

footer .footer-content{
    background: black url('/theme/charte/imgs/footer-bg.svg') no-repeat;
    background-size: cover; background-position: top left;
    min-height: var(--footer-content-h);
    padding-top: 83px;
}
footer .footer-content *{color: white;}
footer .footer-content form {position: relative;}
footer .footer-content form button{background: transparent;
    outline: none;
    border: none;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--red);
}
footer .footer-content .col{padding: 0;position: relative}
footer .footer-content .col a.link-contact{position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; z-index: 2}
footer .footer-content .row{padding: 0 9px; justify-content: space-between;}
footer .footer-content .container > div:nth-child(2){margin-top: 15px;}
footer .footer-links{min-height: var(--footer-link-h); display: flex; align-items: center;}
footer .footer-links *{color: var(--red); font-weight: 500;font-family: 'Sen', sans-serif;}
footer input{background-color: transparent; outline: none; border: none; border-bottom: #aaa 1px solid; border-left: #aaa 1px solid; height: 62px;text-align: center; width: 100%;font-size: 29px;}
footer input::placeholder{color: white;}

footer h2{text-transform: uppercase;font-size: 40px; font-weight: bold;}
footer h3{margin-bottom: 0; font-size: 25px; font-weight: bold;}
footer .agence{padding-left: 36px; position: relative;font-size: 21px; line-height: 1.15em; z-index: 1}
footer .agence:before{
    content: url('/theme/charte/imgs/location-dot-solid.svg');
    font-size: var(--footer-agc-pin-h);
    position: absolute; top: 0; left: 0;
    height: var(--footer-agc-pin-h);
    aspect-ratio: 113 / 150;
}
footer .social{margin-top: 23px;text-align: center;}
footer .social a{font-size: 52px;}
footer .social > a:not(:last-of-type){margin-right: 10px;}
footer .follow{text-align: center;font-size: 33px; line-height: 1.2em;text-transform: uppercase;}

footer .footer-links .container{padding: 0 9px;}
footer .footer-links .left > div, footer .footer-links .right > div{display: grid; gap: 25px; grid-auto-flow: column;}
footer .footer-links a{display: inline-block;}

/* =============================
         Éléments communs
============================= */
article{margin: 50px 0;}
.section-title, .section-title h2, article h1{
    font-size: var(--section-title-size);
    font-weight: bold; color: black; text-transform: uppercase;
    width: 100%; position: relative;
}
.section-title.red-dot h2:after{
    position: absolute;
    top: 12px;
    content: '';
    width: 40px; aspect-ratio: 1;
    border-radius: 50%;
    margin-left: 27px;
    background-color: var(--red);
}



#slide-services{
    padding-top: 20px;
    --svc-gap: 20px;
    --svc-w: 270px;
    --svcs-top: 38px;
    --svc-top: 124px;
}
#slide-services .services{
    display: grid;
    grid-template-columns: repeat(auto-fit, var(--svc-w));
    gap: var(--svc-gap);
    padding-top: var(--svcs-top);
}

#slide-services .services > * {
    border: #707070 1px solid;
    border-radius: 5px;
    aspect-ratio: 1;
    text-align: center;
    display: flex;
    justify-content: center;
    padding-top: var(--svc-top);
    font-size: 21px;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 1.2em;
    background-position: top center;
}

/* Sidebar */
#aside-trigger{position: fixed; top: 37%; right: 1%;z-index: 777; transition: transform .2s ease; will-change: transform;}
#aside-trigger img{width: var(--aside-trigger-w); height: auto;}
#aside-trigger:hover{transform: scale(1.2);}
aside{position: fixed; top: 17%; z-index: 775; left: 100vw; transition: transform .5s ease; will-change: transform; width: 100%; max-width: max-content;}
aside.show{transform: translateX(-125%);}

#commercial-aside{max-width: var(--aside-w);width: var(--aside-w);}
#commercial-aside .header *{color: white;}
#commercial-aside h2{margin-top: 3.5%;margin-bottom: 0;line-height: 1.0em;text-align: center}
#commercial-aside h2{font-size: var(--btm-com-title-size); font-weight: bold;text-align: center;text-transform: uppercase;}
#commercial-aside .text{margin-top: 2.5%; text-align: center}
#commercial-aside .text{font-size: var(--btm-com-text-size); text-align: center;}
#commercial-aside .form{
    width: 100%; min-height: var(--btm-com-form-h);
    background: white url("/theme/charte/imgs/btm-ctct-form-bg.png") no-repeat;
    background-size: cover; background-position: bottom left;
    border: var(--red) 1px solid; border-radius: 15px;
    box-shadow: rgba(0,0,0,0.16) 0 9px 13px;
    padding: 2% 5%;
}
#commercial-aside form{width: 100%; margin: 6% auto;}
#commercial-aside form .f_wrapper {margin: 4% auto 0;max-width: 65%;}
#commercial-aside .control-group{display: flex; width: 100%;margin-bottom: 3%;}
#commercial-aside .control-submit{margin: 3% auto 0;text-align: center;}
#commercial-aside label{font-size: var(--btn-com-label-s); font-weight: bold;white-space: nowrap;margin-right: 5px;}
#commercial-aside input{border: none; border-bottom: #000 1px solid; width: 100%;height: var(--btn-com-input-h);}
#commercial-aside button{background-color: black; color: white; width: var(--btm-com-submit-w); height: var(--btm-com-submit-h); border-radius: 9px; border: #000 1px solid; transition: background-color .2s ease; will-change: background-color; display: flex; justify-content: center; align-items: center;box-shadow: rgba(0,0,0,0.16) 0 3px 6px;margin: 0 auto;}
#commercial-aside button > div{color: inherit; transition: color .2s ease; will-change: color;font-size: 20px; font-weight: bold;}
#commercial-aside button:hover{background-color: white;}
#commercial-aside button:hover > div{color: var(--red);}


/* =============================
         Notre Catalogue
============================= */
#catalogue_modal .modal-header{background-color: #000;}
#catalogue_modal .close{text-shadow: none; color: #555; opacity: 1; transition: color .3s ease; will-change: color;}
#catalogue_modal .close:hover{color: #ccc;}
#catalogue_modal .modal-title{color: white}
#catalogue_modal .modal-footer{background-color: var(--red);}
#catalogue_modal .modal-dialog{max-width: 1024px;}
#catalogue_modal iframe{width: 100%; max-width: 1024px; height: auto; aspect-ratio: 480 / 360;}
#catalogue_modal .modal-body a{color: var(--red);}

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

@media (max-width: 1920px){
    body{margin: 0;}
    :root{
        --body-max-w: 100vw;

        --header-h: calc(100vw * 148 / var(--bkpt));
        --header-logo-w: calc(100vw * 241 / var(--bkpt));
        --menu-gap: calc(100vw * 30 / var(--bkpt));
        --footer-content-h: calc(100vw * 386 / var(--bkpt));
        --footer-link-h: calc(100vw * 83 / var(--bkpt));
        --footer-agc-pin-h: calc(100vw * 28 / var(--bkpt));
        --section-title-size: calc(100vw * 50 / var(--bkpt));
        --header-top-h: calc(100vw * 94 / var(--bkpt));
        --header-bottom-h: calc(100vw * 54 / var(--bkpt));
        --aside-trigger-w: calc(100vw * 80 / var(--bkpt));
    }

    #commercial{
        --btm-com-title-size: calc(100vw * 54 / var(--bkpt));
        --btm-com-text-size: calc(100vw * 36 / var(--bkpt));
        --btm-com-form-w: calc(100vw * 679 / var(--bkpt));
        --btm-com-form-h: calc(100vw * 466 / var(--bkpt));
        --btn-com-label-s: calc(100vw * 30 / var(--bkpt));
        --btn-com-input-h: calc(100vw * 35 / var(--bkpt));
        --btm-com-submit-w: calc(100vw * 212 / var(--bkpt));
        --btm-com-submit-h: calc(100vw * 56 / var(--bkpt));
    }

    #commercial-aside{
        --aside-w: calc(100vw * 703 / var(--bkpt));
        --btm-com-title-size: calc(100vw * 32 / var(--bkpt));
        --btm-com-text-size: calc(100vw * 23 / var(--bkpt));
        --btm-com-form-w: calc(100vw * 679 / var(--bkpt));
        --btm-com-form-h: calc(100vw * 466 / var(--bkpt));
        --btn-com-label-s: calc(100vw * 20 / var(--bkpt));
        --btm-com-submit-w: calc(100vw * 212 / var(--bkpt));
        --btm-com-submit-h: calc(100vw * 56 / var(--bkpt));
    }

    #newsletter{
        --btm-nl-h: calc(100vw * 610 / var(--bkpt));
        --btm-nl-title-size: calc(100vw * 162 / var(--bkpt));
        --btm-nl-text-size: calc(100vw * 40 / var(--bkpt));
        --btm-nl-form-w: calc(100vw * 860 / var(--bkpt));
        --btm-nl-input-s: calc(100vw * 24 / var(--bkpt));
        --btm-nl-input-h: calc(100vw * 51 / var(--bkpt));
    }

    .btn {
        /*font-size: calc(100vw * 18 / var(--bkpt));*/
        font-size: calc(100vw * 16 / var(--bkpt));
        /*padding: calc(100vw * 7 / var(--bkpt)) calc(100vw * 28 / var(--bkpt));*/
        padding: calc(100vw * 7 / var(--bkpt)) calc(100vw * 15 / var(--bkpt));
    }

    header .top .logo img{margin: 2px;}
    /*header .search, header .nav-menu{margin-left: calc(100vw * 111 / var(--bkpt));}*/
    header .search{margin-left: calc(100vw * 60 / var(--bkpt));}
    header .nav-menu{margin-left: calc(100vw * 30 / var(--bkpt));}
    header .nav-menu ul a{font-size: calc(100vw * 18 / var(--bkpt))}
    header .nav-menu [data-submenu] > a:after{font-size: calc(100vw * 16 / var(--bkpt))}
    header #search input{font-size: calc(100vw * 17 / var(--bkpt))}
    header #search button{top: calc(100vw * -11 / var(--bkpt)); left: calc(100vw * -6 / var(--bkpt));}
    header #search button img{width: calc(100vw * 29 / var(--bkpt))}
    header .top .contact span{font-size: calc(100vw * 20 / var(--bkpt))}
    header .top .contact a{font-size: calc(100vw * 18 / var(--bkpt))}
    header .top .contact .call svg{width: calc(100vw * 46 / var(--bkpt))}
    header .top .basket img{width: calc(100vw * 33 / var(--bkpt))}
    header .top .login img{width: calc(100vw * 38 / var(--bkpt))}
    header .wild-sub .category-content{min-width: calc(100vw * 821 / var(--bkpt));}

    /* Navbar */
    .navbar{margin-top: calc(100vw * 40 / var(--bkpt));}
    .navbar a{font-size: calc(100vw * 25 / var(--bkpt))}
    .navbar span{font-size: calc(100vw * 25 / var(--bkpt));margin: 0 calc(100vw * 15 / var(--bkpt));}

    /* Footer */
    footer .footer-content{padding-top: calc(100vw * 83 / var(--bkpt));}
    footer h2{font-size: calc(100vw * 40 / var(--bkpt));}
    footer h3{font-size: calc(100vw * 25 / var(--bkpt));}
    footer .agence{padding-left: calc(100vw * 36 / var(--bkpt)); font-size: calc(100vw * 21 / var(--bkpt));}
    footer .social{margin-top: calc(100vw * 23 / var(--bkpt));}
    footer .social a{font-size: calc(100vw * 52 / var(--bkpt));}
    footer .follow{font-size: calc(100vw * 33 / var(--bkpt));}
    footer .footer-links .left > div, footer .footer-links .right > div{gap: calc(100vw * 25 / var(--bkpt));}

    /* Commun */
    .section-title.red-dot h2:after{
        top: calc(100vw * 12 / var(--bkpt));
        width: calc(100vw * 40 / var(--bkpt));
        margin-left: calc(100vw * 27 / var(--bkpt));
    }

    #slide-services{
        padding-top: calc(100vw * 20 / var(--bkpt));
        --svc-gap: calc(100vw * 20 / var(--bkpt));
        --svc-w: calc(100vw * 270 / var(--bkpt));
        --svcs-top: calc(100vw * 38 / var(--bkpt));
        --svc-top: calc(100vw * 124 / var(--bkpt));
    }
    #slide-services .services > *{font-size: calc(100vw * 21 / var(--bkpt));}
    #slide-services .service{background-size: calc(100vw * 209 / var(--bkpt)) auto!important;}
}

@media (max-width: 1630px){
    header > div{padding-left: 15px; padding-right: 15px;}
    footer .footer-content .row{margin-left: 0; margin-right: 0;}
    .navbar{padding: 0 15px;}
}

@media (max-width: 1024px){
    :root {--bkpt: 1024;}
    #commercial{--btm-com-title-size: 4vw;}
    #newsletter{
        --btm-nl-title-size: 9vw;
        --btm-nl-h: 31vw;
    }

    header .top .contact,
    header .tools,
    header .nav-menu,
    header .bottom,
    header .bottom .contact{display: none;}
    #menu-trigger{display: flex;}

    header{box-shadow: rgba(0,0,0,0.16) 0 3px 6px; min-height: calc(100vw * 80 / var(--bkpt));;grid-template-rows: calc(100vw * 94 / var(--bkpt));}
    header .top {min-height: calc(100vw * 94 / var(--bkpt));}
    header .top .container{grid-template-columns: calc(var(--header-logo-w) + 5px) 1fr;}
    header .search{padding-right: 80px;margin-left: 0;}

    .section-title{margin: 0}
    .section-title.red-dot h2:after{right: 0; margin-left: 0; top:50%; transform: translateY(-50%);}
    .section-title.red-dot h2{padding-right: calc(100vw * 40 / var(--bkpt))}

    .product-list, .product-list .owl-carousel{margin: 0;}

    #commercial .form{margin-top: 30px;}
    #commercial h2 *{line-height: 1.0em;}
}

@media (max-width: 768px){
    :root {--bkpt: 768;}
    #commercial{--btm-com-text-size: 3vw;}
    #commercial-aside{--bkpt: 1024;}

    header, header .top{min-height: 80px;}
    header .search{margin: 36px 0 0 auto;padding-bottom: 0;width: 100%;}
    header #search{display: flex;}
    header #search button{position: relative; top: unset; left: unset;}
    header .top .container{align-items: start;}

    .navbar{margin-left: auto;margin-right: auto;}
}

@media (max-width: 480px){
    :root{
        --bkpt: 480;
        --section-title-size: 20px;
    }

    #commercial-aside{
        --btm-com-title-size: 20px;
        --btm-com-text-size: 14px;
        --btn-com-label-s: 14px;
        --btm-com-submit-w: 120px;
        --btm-com-submit-h: 30px;
    }

    #commercial,#newsletter{--bkpt: 768;}
    #commercial .header{padding: 0;}
    #newsletter{--btm-nl-h: 44vw;}

    article{margin: 30px 0;}

    header .top .logo img{min-width: 160px;}
    header .search{display: none;}
    header .top .container{align-items: start;}
    #open-search{display: block;margin: 26px 80px 0 auto;}
    #mobile-menu ul > li > a{font-size: 20px; font-weight: bold}
    #mobile-menu .submenu ul > li > a{font-size: 14px; padding: 0 5px; font-weight: inherit}
    #mobile-menu .contact, #mobile-menu .contact .tel{flex-direction: column;}
    #mobile-menu .contact .tel p{margin-bottom: 0;}

    .navbar a, .navbar span{font-size: 16px;}

    #newsletter{margin-top: 30px;display: flex;flex-direction: column;justify-content: flex-end;padding-bottom: 20px;}
    #aside-trigger img{width: calc(100vw * 80 / 768);}

    footer .footer-content .container > div:nth-child(2){display: grid; grid-template-columns: 1fr;gap: 20px;}
    footer h2{font-size: 24px;margin: 0 auto}
    footer .social a{font-size: 32px;}
    footer .follow{font-size: 20px;}
    footer h3, footer input{font-size: 18px;height: 40px;}
    footer .agence{padding-left: 36px; font-size: 14px; width: 70%;margin: 0 auto;}
    footer .footer-links *{font-size: 14px;}
    footer .footer-content{padding-top: 30px;padding-bottom: 30px;}
    footer .footer-links{padding: 15px;}
    footer .footer-links a{text-align: center;}
    footer .footer-links .container, footer .footer-links .container > * > *{display: grid!important; grid-template-columns: 1fr;grid-auto-flow: unset!important;gap: 0!important;}

    #slide-services .services{justify-content: center!important;}
    .section-title h2{text-align: center}
    .section-title.red-dot h2{padding-right: 0}
}