/**************************************************************************************************/
/********* HEADER  ********************************************************************************/
/**************************************************************************************************/
@media screen and (max-width: 1150px) {
    #header .logo span {font-size:.8em; margin-bottom:17px;}
}
@media screen and (max-width: 850px) {
    #header .logo {flex-direction:column;justify-content: center;align-items:flex-start;}
        #header .logo svg, #header .logo span {margin-bottom:0;}
}
@media screen and (min-width: 750px) {
    #header {height:80px;display:flex;justify-content: space-between;align-items:flex-end;z-index:5;}
        #header .logo {flex:1;}
        .headerRight {width:60%;max-width:595px;display:flex;justify-content: space-between;margin:0 0 20px 10px;align-items:flex-end;}
    
    #topMenu {flex:1;}
        #topMenu > ul {display:flex;}
        #topMenu > ul > li {position:relative;background:#fff;}
        #topMenu > ul > li:not(:last-child) {margin:0 5% 0 0;}
        #topMenu > ul > li > ul {position:absolute;top:100%;left:-10px;min-width:calc(100% + 20px);padding:30px 10px 15px;background:#fff;opacity:0;z-index:-1;
            pointer-events:none;
            transform:translate3d(0,-10%,0);
            transition:transform .2s ease-out, opacity .2s;}
            #topMenu > ul > li:hover > ul, #topMenu > ul > li > ul:hover {opacity:1;pointer-events:initial;
                transform:translate3d(0,0,0);}
            #topMenu > ul > li > ul > li {margin:0.5em 0;}

    #menuBtn{display:none;}

}

@media screen and (max-width: 749px) {
    #header {padding:0;height:60px;}
        #header .logo {position:relative;padding:10px 20px 5px;background:#fff;z-index:10;}
            #header .logo svg{width:170px;height:35px}
            #header .logo span{font-size:.7em;}
    
    #menuBtn {position:absolute;top:0;right:0;padding:20px;z-index:15;cursor:pointer;}
        #menuBtn svg {transition:opacity .3s;}
        .closeMenuIcon {position:absolute;top:20px;left:20px;opacity:0;}
        .cross .closeMenuIcon {opacity:1;}
        .cross .burgerIcon {opacity:0;}
    .headerRight{position:absolute;top:100%;left:0;width:100%;height:calc(100vh - 60px);padding:10px 20px 0;background:#fff;z-index:5;
        display:flex;flex-direction:column;
        visibility:hidden;
        opacity:0;
        transform:translate3d(0, -20px, 0);
        transition:transform .3s ease-out, opacity .3s;}
    .headerRight.open{transform:translate3d(0, 0, 0);opacity:1;}
    .headerRight.visible{visibility:visible;}

    #topMenu a{font-size:1.7em;}
        #topMenu ul li a {display:block;margin-bottom:.2em; padding-bottom:.4em;}
            #topMenu ul li ul {display:none;}
    
    .socials {margin:.2em 0 1em;}
    .menuImage {position:relative;flex:1;margin:10px -20px 0 -20px;width:calc(100% + 40px);}
        .menuImage img {position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;}
}


/**************************************************************************************************/
/********* GENERAL  *******************************************************************************/
/**************************************************************************************************/
@media screen and (min-width: 1400px) {
    #page {position:relative;}
    #page::before, #page::after {content:'';position:absolute;top:80px;bottom:0;z-index:-1;background:#d3ffe4;width:calc(50% - 600px);}
    #page::before {left:0;}
    #page::after {right:0;}
}
@media screen and (max-width: 1200px) {
    .bloc .textContent {padding:20px 50px;display:flex;flex-direction:column;justify-content: center;font-size:.9em;}
}

@media screen and (max-width: 1050px) {
    .bloc .textContent {font-size:.8em;}
    .formuleSousTitle h2 br {display:none;}
}
@media screen and (max-width: 950px) {
    .maxWidth {padding-left:20px;padding-right:20px;}
    .listFormuleText .textContent {font-size:1em;}
    .btn {font-size:1.8em;}
    .prix {font-size:1.5em;}

    .listFormuleTitle {font-size:2.5em;}
    .bloc .textContent {padding:20px;}
    .footerCenter p {display:inline;}
}
@media screen and (min-width: 749px) {
    .mobile{display:none;}
}
@media screen and (max-width: 749px) {
    .desktop {display:none;}
    h1, h2, h3, h4, .title {margin:.4em 0;}
    h1 {font-size:2em;}
    h2 {font-size:2em;}
    h3 {font-size:2em;}
    h4 {font-size:1.5em;}

    .textContent p, .textContent li {font-size:1.45em;margin: .2em auto}
    .textContent li li {font-size:1em;}

    .btn {font-size:1.25em;padding:.6em;}

    .grid > * {width:100%;margin-top:20px;margin-bottom:0;}
    .grid2 > * {margin-top:10px;}

    .catList {height:calc(100vh - 60px);flex-direction:column;}
        .catItem {position:relative;width:100%;height:calc(50% - 2.5px);}
            .catTitle {width:100%;padding:0 20px;font-size:3em;max-width:7em;}
    
    .formuleHeader.maxWidth {display:block;padding:0;}
        .formuleTitle {padding:0 20px;margin-top:.55em;}
        .formuleImage {width:100%;}
        .formuleDesc {width:100%;display:block;padding:20px 20px 0;}
            .formuleDesc .textContent {padding:0;}
        .btn.prix{font-size:1.5em;margin-top:.5em;;padding-bottom:.2em;}
    .formuleHeaderWrap .fullBgImage {bottom:auto;height:12em;}
    .formuleSousTitle h2 {width:100%;font-size:1.76em;padding:1em 0 0;}

    .recette::before {height:10px;}
    .recette .textContent {font-size:.8em;}

    .recetteWrap:nth-child(3n+2) {margin-left:0;margin-right:0;}

    .listFormules {margin-top:30px;}
    .listFormule {display:block;overflow:visible;margin-top:30px;}
        .listFormuleTitle {font-size:2em;margin-left:0;}
        .listFormuleImage {margin-left:-20px;margin-right:-20px;width:calc(100% + 40px);height:230px;}
            .listFormuleImage::before {width:20px;}
        .listFormuleText {width:auto;}
            .listFormuleInfo {display:flex;align-items:stretch;margin:20px -20px 0 0;width:calc(100% + 20px);max-width:100%;}
                .listFormuleInfo .prix, .listFormuleInfo .btn {padding:.6em;margin:0;font-size:1.4em;}
                .listFormuleInfo > *:last-child {flex:1;}
                .listFormuleInfo br {display:none;}

    .recettesList  .recetteWrap {margin:20px 0;}

    
    .asideFormule li p:first-child {font-size:1.2em;margin:.9em 0 .6em;}
    .asideFormule li p:not(:first-child) {font-size:0.9em;margin:.9em 0 .6em;}
    .asideFormule li:not(:first-child) > p:first-child {display:none;}
    .asideFormule li:first-child > p:not(:first-child) {display:none;}

    .autreFormules {margin-top:0;padding-top:0;overflow:hidden;}
        .autreFormules h2 {font-size:1.3em;margin:.6em 0;}
        .autreFormules .grid li {margin-top:5px;}
        .autreFormules li:first-child {margin-top:0;}
            .autreFormules .btn {font-size:1.8em;padding: .35em .6em;}
    
    .lichous .grid {display:block;}
        .lichous .grid .lichou {width:100%;display:block;margin-bottom:20px;}
            .lichouInfo {display:block;margin:0 -20px;width:calc(100% + 40px);overflow:hidden;}
                .lichouTitle {font-size:2em;}
                .lichouImage {height:220px;}
                    .lichouImage img {width:100%;height:100%;object-fit:cover;object-position:center;}
                .lichou .btn, .lichouPrix .prix {font-size:1.4em;}
                .lichouPrix {padding:7px 20px;}
    
    .toutesFormules {padding-top:1em;}
    .toutesFormules > ul,
    .toutesFormules > ul > li:first-child, 
    .toutesFormules > ul > li:first-child > ul,
    .toutesFormules > ul > li:first-child > ul > li, 
    .toutesFormules > ul > li:nth-child(2) {width:100%;display:block;}

    .espritTitle {font-size:3em;}
    .bloc {display:block;}
        .bloc > div {width:100%;}

    .form {margin:30px 0;}

    .backToTop {font-size:1em;}


    #footer {display:block;}
        .footerLeft {padding:20px 20px 0;;}
            .footerLeft .logo svg {width:150px; height:21px;}
        .footerLeft nav, .footerLeft .smaller {display:none;}
    .footerCenter {width:100%;padding: 13px 20px 20px;background:#000;color:#fff;font-size:.8em;line-height:1.8em;letter-spacing:.05em;}
        .footerCenter h4:first-child{display:none;}
        .footerCenter h4 {text-transform:none;display:inline;font-size:1em;}
        .footerCenter p:last-child{display:inline;}
    .footerRight {width:100%;}
}