/**************************************************************************************************/
/********* MISC ***********************************************************************************/
/**************************************************************************************************/
@media screen and (max-width: 100px) { body {font-size:16px;} }
@media screen and (max-width: 500px) { body {font-size:14px;} }

/**************************************************************************************************/
/********* MENU ***********************************************************************************/
/**************************************************************************************************/

@media screen and (max-width: 1650px) {
    h1, h2, h3, h4, h5 {hyphens: auto;}
}
@media screen and (max-width: 1300px) {
    .homeGPara {padding-bottom:20%;}
}
@media screen and (max-width: 1150px) {
    #menu {padding:2% 0 1%;}
        #logo {padding-top:0;padding-bottom:0;}
            .logoPicto {width:45px;height:54px;}
            .logoFont {width:175px;height:37px;margin-left:0;}

            #menuWrap ul.mod-menu {font-size:16px;}
    #page:not(.homePage) #menuWrap {padding-bottom:5%;}
        #page:not(.homePage) #menuWrap::before {right:50%;transform: skewY(6.5deg);}
        #page:not(.homePage) #menuWrap::after {left:50%;transform: skewY(-6.5deg);}
}

@media screen and (max-width: 850px) {
    .homePage #menu {display:block;padding:2px 0 1%;}
        #page:not(.homePage) #logo {padding-right:0;}
            .logoPicto {width:36px;height:43px;}
            .logoFont {width:140px;height:29px;}

        #menuWrap ul.mod-menu {width:80%;padding-left:0;}
        #page.homePage #menuWrap ul.mod-menu {margin-left:5%;padding-left:45px;padding-left:2%}
            #menuWrap .active {font-size:1.5em;}
                #menuWrap ul.mod-menu li a {display:block;padding:6px 15px 6px 6px;}
                #menuWrap ul.mod-menu li a:hover {transform:none;}
}
@media screen and (max-width: 700px) {
    #page:not(.homePage) #menuWrap {padding-bottom:0;}
        #page:not(.homePage) #menuWrap::before {display:none;}
        #page:not(.homePage) #menuWrap::after {display:none;}
}
@media screen and (max-width: 650px) {
    #menuWrap ul.mod-menu {font-size:12px;}
}
@media screen and (max-width: 550px) {
    #menuWrap ul.mod-menu {width:90%;}
}
@media screen and (max-width: 420px) {
    .logoFont {display:block;}
    #page:not(.homePage) #menu {display:block;}
        #page:not(.homePage) #menuWrap ul.mod-menu {margin-left:5%;}


    #menuWrap ul.mod-menu li:last-child a {position:absolute;bottom:130%;right:0;padding-right:0;}
}


/**************************************************************************************************/
/********* HOME PAGE ******************************************************************************/
/**************************************************************************************************/
@media screen and (max-width: 1850px) {
    .homeHeaderText {font-size:1.8vw;}
}
@media screen and (max-width: 1400px) {
    #homeHeader {height:45vw;}
}
@media screen and (max-width: 1000px) {
    #homeHeader {margin-bottom:-7.5%;}
    .homegrid {padding-bottom:4%;}
        .homegrid::before {width:45%;}
        .homegrid::after {width:45%;bottom:20px;}
        .homeGridRow1 {z-index:2;}
            .homeGImg1Wrap {width:50%;}
            .homeGParaWrap {width:50%;display:block;}
                .homeGPara1 {padding:10% 5% .5em 5%;width:100%;}
                .homeGPara2 {padding:.5em 5% 26% 5%;;width:100%;}

        .homeGridRow2 {z-index:3;}
            .homeGImg2Wrap {display:none;}
            .homeGEquipeWrap {width:100%;}
}

@media screen and (max-width: 950px) {
    .homeHeaderText {margin:5% 5% 8% 5%;max-width:90%;max-width:600px;font-size:1em;}
}
@media screen and (max-width: 850px) {
    #homeHeader {height:55vw;}
}
@media screen and (max-width: 780px) {
    .homeGImg1Wrap::before {display:none;}
        .homeGImg1 {position:relative;transform:skewY(-6.5deg);margin:-27% 0 30px;}
            .homeGImg1 {transform:skewY(6.5deg)}
    .homeGridRow1 {display:block;}
        .homeGImg1Wrap {width:100%;}
        .homeGParaWrap {width:100%;}
            .homeGPara2 {padding-bottom:14%;}
}
@media screen and (max-width: 650px) {
    #homeHeader {height:45vh;min-height:380px;}
        .homeHeaderVideo {left:50%;transform:translate(-50%, -50%);padding-bottom:45vh;width:80vh;min-width:676px;min-height:380px;}
}
@media screen and (max-width: 610px) {
    #homeHeader {clip-path:polygon(0% 0%, 100% 0%, 100% 94.1%, 65% 88.4%, 0% 100%)}
    .homeGEquipeWrap h2 {font-size:2.2em;}
}
@media screen and (max-width: 510px) {
    #homeHeader {clip-path:polygon(0% 0%, 100% 0%, 100% 96.1%, 65% 92.4%, 0% 100%)}
    .homeHeaderText {margin-bottom:20%;}
}

/**************************************************************************************************/
/********* VALORISATION ***************************************************************************/
/**************************************************************************************************/
@media screen and (max-width: 1550px) { .valoGrid {padding-bottom:17%;} }
@media screen and (max-width: 1400px) {
    .valoGrid {padding-bottom:20%;}
    .valoGrid h1 {font-size:2.5em;}
}
@media screen and (max-width: 1300px) { .valoGrid {padding-bottom:23%;} }
@media screen and (max-width: 1150px) {
    #valoriser .grid::after{content:none;}
    .valoGrid {display:grid;grid-template-columns:1fr 1fr;grid-template-rows: repeat(1fr,6);padding-bottom:25%;}
        .valoGrid > div {width:100%;}
            .valoGrid > div.valoBlc2 {grid-row: span 2;}
            .valoGrid > div.valoBlc3::before {transform-origin:100% 0;}
            .valoGrid > div.valoBlc3 > div {padding:9% 5% 11% 11%;}
            .valoGrid > div.valoBlc4 {grid-row:4 / 5;grid-column:2 / 3;}
            .valoGrid > div.valoBlc7::after {display:none;}
}
@media screen and (max-width: 1000px) { .valoGrid {padding-bottom:30%;} }
@media screen and (max-width: 780px) { .valoGrid {padding-bottom:33%;} }
@media screen and (max-width: 700px) {
    .valoGrid {display:flex;flex-direction:column;align-items:stretch;transform-origin:0 0;padding-bottom:30px;}
        .valoGrid > div {min-height:0;}
        .valoGrid .imgCover::before {padding-bottom:75%;}
        .valoGrid > div.valoBlc1 {order:1;position:relative;z-index:10;}
            .valoGrid > div.valoBlc1::before {transform-origin:0 0;}
            .valoGrid > div.valoBlc1 > div {transform-origin:0 0;padding-top:16%;}
        .valoGrid > div.valoBlc2 {order:2;position:relative;z-index:9;}
            .valoGrid > div.valoBlc2 > div {transform-origin:0 0 ;}
        .valoGrid > div.valoBlc3 {order:3;position:relative;z-index:8;}
            .valoGrid > div.valoBlc3::before {transform-origin:50% 0;}
            .valoGrid > div.valoBlc3 > div {padding-top:18%;}
        .valoGrid > div.valoBlc4 {order:4;overflow:visible;position:relative;z-index:6;}
        .valoGrid > div.valoBlc5 {order:5;margin-top:-15%;position:relative;z-index:7;background:#ed7302;}
        .valoGrid > div.valoBlc6 {order:6;position:relative;z-index:4;}
        .valoGrid > div.valoBlc7 {order:8;position:relative;z-index:4;}
        .valoGrid > div.valoBlc8 {order:7;transform: skewY(13deg);position:relative;z-index:5;}
            #valoriser .valoGrid > div.valoBlc8 > .valoBlc8In {padding: 0;transform: none;position: relative;width:100%;height:100%;}
                #valoriser .valoGrid > div.valoBlc8 > .valoBlc8In .imgCover {transform:skewy(-6.5deg);transform-origin: 0 0;}
        .valoGrid > div.valoBlc9 {order:9;background:#ed7302;z-index:4;position:relative;}
}
@media screen and (max-width: 700px) {
    .valoGrid h1 {font-size:2em;}
}

/**************************************************************************************************/
/********* CONCASSER RECYCLER *********************************************************************/
/**************************************************************************************************/
@media screen and (max-width: 1550px) {
    .concTitle {font-size:.8em;}
}
@media screen and (max-width: 1300px) {
    #page.conc_recy #menuWrap::before,
    #page.conc_recy #menuWrap::after {display:none;}
    #page.conc_recy #menuWrap {padding-bottom:0;}

    .concGrid::after {top:0;height:100%;left:0;width:50%;border-left:0;}
    .concItem {display:block;padding-bottom:5%;}
        .concLeft {position:relative;width:50%;}
            .concTitle {max-width:29em;}
            .concImage {position:absolute;left:100%;top:0;width:100%;margin-top:-12%;height:112%;}
        .concRight {width:100%;padding-top:7%;padding-bottom:7%;margin-top:-7%;}

            .concItem:nth-child(n) .concRight::before {background:#ed7302;left:auto;right:0;transform:skewY(-6.5deg);transform-origin:100% 0;}
            .concItem .concRight::after {content:'';position:absolute;bottom:0;left:0;width:50%;height:15%;background:#001f44;z-index:2;
                transform:skewY(6.5deg);transform-origin:100% 0;}
            .concFile {position:absolute;right:0;bottom:0;}
}
@media screen and (max-width: 950px) {
    .concDlLink svg {width:30px;height:40px;}
}
@media screen and (max-width: 800px) {
    .concGrid::after {display:none;}
        .concItem {padding-bottom:10%;}
            .concLeft {position:relative;width:100%;}
                .concText {margin-bottom:0;}
                .concImage {position:relative;left:0;margin-top:0;height:auto;}
            .concItem .concRight {margin-bottom:5%;}
                .concItem .concRight::after {transform:skewY(-6.5deg);transform-origin:0 0;}
                .concFile {bottom:-10%;}
}
@media screen and (max-width: 450px) {
    .concTitle {margin:0 10px;max-width:28em;}
        .concCounter {margin-left:0;}
    .concText {margin:20px 10px 10px;}
    .concFile {padding-right:0;bottom:-15%;}
}
/**************************************************************************************************/
/********* CONTACT PAGE ***************************************************************************/
/**************************************************************************************************/
@media screen and (max-width: 1300px) {
    #contactPage .concRight {width:50%;margin:4% 0;padding:4% 0;}
}
@media screen and (max-width: 800px) {
    #contactPage .concRight {display:none;}
}

/**************************************************************************************************/
/********* DIVESR *********************************************************************************/
/**************************************************************************************************/
@media screen and (max-width: 750px) {
    .diversContent {padding-left:15px;padding-right:15px;}
}

/**************************************************************************************************/
/********* FOOTER *********************************************************************************/
/**************************************************************************************************/
@media screen and (max-width: 1000px) {
    #footer {align-items:baseline;padding-top:0;}
        #footerLogo svg {margin-top:24px;}
        #footer .mod-menu {min-width:calc(50% - 78px);}
        #footer .secondaryLinks {flex-wrap:wrap;align-items:center;flex:1;}
            .slPhone    {order:1; width:80%;}
            .slMail     {order:3; width:80%;}
            .slLink     {order:2; width:20%;}
            .slYou      {order:4; width:20%;}
            .slMentions {order:5; width:100%;}
                #footer .secondaryLinks a {display:block;padding:5px 0;}

}

@media screen and (max-width: 750px) {
    #footerLogo {width:35px;height:42px;margin-right:15px;}
        #footerLogo svg {width:35px;height:42px;margin-top:17px;}
    #footer .mod-menu {min-width:calc(50% - 50px);justify-content:space-between;}

    #footer .secondaryLinks {justify-content:space-between;font-size:.8em;min-width:0;}
        .slPhone    {width:calc(100% - 25px);}
        .slMail     {width:calc(100% - 25px);}
        .slLink     {width:25px;}
        .slYou      {width:25px;}
        .slMentions {text-align:right;}
}
@media screen and (max-width: 560px) {
    #footer .mod-menu a {padding: 0 5px;}
}

@media screen and (max-width: 490px) {
    #footer {flex-wrap:wrap;}
        #footer .mod-menu {width:calc(100% - 50px);padding-right:0;}
        #footer .secondaryLinks {width:100%;flex:initial;padding:1.5em 0 0 55px;}
}