.body-wrapper { background: #f7f7f7; }

.btnmenu { display: block; width: 120px; text-align: center; margin: 10px auto; cursor: pointer; color: white; padding: 8px 15px; background: linear-gradient(45deg, #00ff99 0%,#00defd 100%); border-radius: 5px; font-weight: bold;  }


#header { top:0; }
#main { margin-top: 100px; }

/*
    NEW MENU
*/

#newmenu {
    display: none;
    top:0;
    /* background: hsla(0,0%,0%,0.57); */
    top: 0;
    /* background: hsla(0, 0%, 0%, 0.57); */
    bottom: 0;
    height: 100%;
    width: 100%;
    /*display: flex;*/
    position: fixed;
    margin: 0;
    padding: 0;
    z-index: 1000;
    left: 0;
    max-width: 1398px;
    width: 93.5%;
    left: 50%;
    transform: translateX(-50%);
    /* margin: 0 auto; */
}

#newmenu *, #newmenu *::before, #newmenu *::after { box-sizing: border-box; }

#newmenu .NMbloc {position: absolute;display: block;top: 3px;left: 87px;/* right:0; */background: white;padding: 10px;/* margin: 10px auto; */border-radius: 10px;width: 645px;z-index: 1001;/* box-shadow: 0px 0px 9px 3px rgba(0, 0, 0, 0.06); */}

#newmenu .retour, #newmenu .croix {/* display: none; */margin: 10px;font-weight: bold;cursor:pointer;border-radius: 50%;width: 25px;height: 25px;}
#newmenu .retour:hover, #newmenu .croix:hover { background: #EEE; }
#newmenu .croix {position: absolute;top: 83px;right: 41px;padding: 1px 0 0 8px;font-family: 'Roboto';font-family: "Quicksand", "Gill Sans", "Gill Sans MT", "Myriad Pro", Helvetica, Arial, "sans-serif";}
#newmenu .retour {display: none;position: absolute;top: 83px;right: 41px;z-index: 1;/* background-color: #FFF; *//* display: none !important; *//* float: left; */padding: 1px 0 0 4px;}
#newmenu .retour .fleche_retour {width:20px;/* display: none; */}

/* Quand on est dans une sous-catégorie, on masque la croix (elle se superpose à la flèche) */
#newmenu.is-submenu .croix { display: none !important; }

#newmenu .NMmenu {display: flex;flex-wrap: nowrap;flex-direction: column;justify-content:flex-start;align-items:stretch;gap: 16px;}

#newmenu h2 {/* display: none; */position: absolute;margin: 0;top: 91px;left: 27px;color: #1D3254;font-family: Roboto;font-size: 16px;font-style: normal;font-weight: 500;line-height: 150%; /* 24px */letter-spacing: -0.16px;/* width: 100%; *//* background-color: #FFF; */}
#newmenu h2 > *{ font-family: Roboto;font-size: 16px;font-style: normal;font-weight: 500;line-height: 150%; /* 24px */letter-spacing: -0.16px; }
#newmenu h2 a { color:#1d3254; border-bottom:1px solid #EEE; text-decoration: none;}

#newmenu .cat {box-sizing: border-box;height: 56px;/* border:1px solid #f6f6f8; */border-radius: 8px;padding: 8px;/* box-shadow:  0px 4px 8px rgba(0, 0, 0, 0.04); */background:white;width: 97%;/* margin: 5px 1%; */display:flex;align-items: center;justify-content: center;cursor:pointer}
#newmenu .children { /*background:#D9F6F8 */ }
#newmenu .cat:hover, #newmenu a:focus .cat { background:#f6f6f8; }

#newmenu .title { width: 80px; padding: 10px; margin: 0; margin-bottom: 1px }
#newmenu .title a {color: #1d3254;text-decoration: none;font-size: 16px;font-weight: 500;line-height: 150%;font-family: 'Quicksand';}

#newmenu .img, #newmenu .title, #newmenu .arrow { display:inline-block;  flex:1;  }
#newmenu .img, #newmenu .arrow { flex:none}
#newmenu .arrow { padding: 0 10px; font-size:24px; color:grey; margin-bottom: 5px; }

#newmenu .img { width: 32px; height: 32px; display: block; overflow: hidden; margin:0; padding: 0;  }
#newmenu .img img { width: 27px; height: 27px; transition: all 0.5s ease; }

#newmenu .invisible { display:none }
#newmenu .overflow {max-height: 500px;overflow: auto;border-top: 48px solid #FFF;}

#newmenu .cta { margin: 8px; display: none; font-size: 12px; }
#newmenu .cta span { background:#0779FF; padding: 3px 5px; cursor:pointer; color: white; font-weight: bold; }
#newmenu .cta span:hover { background: linear-gradient(45deg, #00defd 0%,#00ff99 100%); } 

#newmenu form { margin: 10px 7px;}
#newmenu form .bg {display: flex;flex-wrap:wrap;flex-direction:row;justify-content:flex-start;align-items:stretch;width: 100%;border:0;background:#fff;border-radius:50px;font-size:15px;border: 1px solid #1d3254;padding:4px 4px 4px 17px;height:51px;} 
#newmenu form .bg .searchInput { display: flex; flex: 1; background: none; border:0; padding: 8px 10px; }
#newmenu form .bg .searchInput:focus, #newmenu form .bg .searchInput:focus-visible {border:0 none !important;border-radius: 50px;margin-right: 5px;outline: none;}
#newmenu form .bg .searchSubmit { display: flex; background: none; border:0; background: linear-gradient(45deg, #00ff99 0%,#00defd 100%); border-radius: 5px; font-weight: bold; padding: 10px; color:white; text-transform: uppercase; text-align: center; cursor: pointer; margin-left:5px;}
#newmenu form .bg .searchSubmit:hover, #newmenu form .bg .searchSubmit:focus { background: linear-gradient(-45deg, #00ff99 0%,#00defd 100%); }

#newmenu form .bg .searchSubmit2 {
    background:linear-gradient(72deg, #F907FC 0.03%, #0779FF 100%);
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    padding: 8px;
    border-radius: 100px;
    cursor: pointer;
    border: none;
    color:white; font-weight: bold;
    margin-top:5px;
    margin-right:5px;
}
#newmenu form .bg .searchSubmit2:hover, #newmenu form .bg .searchSubmit2:focus { background:#0779FF; }

/*
    FOOTER DEBUG
*/

.footer-debug { margin:10px; border-top:1px dashed #CCC; padding:10px; clear: both; float: none; position: relative; max-width: 100%; box-sizing: border-box; overflow-x: auto; word-wrap: break-word; overflow-wrap: break-word;}
.footer-debug .sql ol { }
.footer-debug .sql ol li { }
.footer-debug .sql ol li small { display: inline-block; font-size:10px; margin-right: 15px; width: 45px; }
.footer-debug .sql ol li p { display:inline; font-size:12px; word-wrap: break-word; overflow-wrap: break-word; max-width: 100%;}
.footer-debug .sql h3 { font-weight:bold; margin:15px 0}

.NMbreadcrumbs { margin: 14px 8px 10px 8px; font-size: 0.9em; }

/*
    MESSAGERIE
*/

#messagerie { display:flex; }
.h1-messagerie { font-size:32px; color:#1D3253; font-weight:800; padding-bottom: 12px; }
.h1-messagerie .badge {  text-overflow: ellipsis; white-space: nowrap; overflow: hidden; color: #FFF; border-radius: 1rem; font-size: 14px; line-height: 1.2rem;   padding: 0 0.6em; background:#FA6420 }
#messagerie #inbox { border-right:1px solid #EEE; width: 40%; padding: 10px; padding-left: 0 }
#messagerie #conversation {  width: 60%; padding: 10px; padding-right: 0 }

#inbox { }
#inbox .header { display: flex; justify-content: space-between;   }
#inbox .header span { display: inline-block; width: 22%; border:1px solid #DDD;  padding: 5px; border-radius: 5px; color:#AAA; margin: 5px; font-size:13px;  align-items: center; text-align: center; }
#inbox .header span:first-child { margin-left: 0;}
#inbox .header span:last-child { margin-right: 0;}
#inbox .header span.highlight { color:white; font-weight: bold; background:#1891FC; border-color:#1891FC  }
#inbox .header span:hover { border-color:#1891FC; background: white; color:#1891FC; cursor: pointer;}

#inbox .listing { overflow: auto; max-height: 600px; }
#inbox .listing h2 { font-weight: bold; margin: 1em 0}

#inbox .listing .card { background:white; box-shadow: 0 0 0.1rem rgba(0,0,0,0.08); border-radius: 1.1rem; padding: 1px; display: flex; margin-bottom: 10px; }
#inbox .listing .card:hover { box-shadow: 0 0 1rem rgba(0,0,0,0.08); cursor: pointer; }

#inbox .listing .card .image { padding: 10px; border-right:1px solid #EFE; width: 50px; }
#inbox .listing .card .image .avatar { width:3rem;  height:3rem; border-radius:100%; background: #EEE no-repeat center center;  background-size: cover; left: 0; }

#inbox .listing .card .content { padding: 10px; display: block; position: relative; width: 100%}
#inbox .listing .card .content h4 { font-weight: bold; margin-top: 0; margin-bottom: 0; font-size: 18px; }
#inbox .listing .card .content h4 .badge { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; color: #FFF; border-radius: 3px; font-size: 12px; line-height: 1.2rem;   padding: 0 0.6em; background:#26E1F3; text-transform: uppercase; font-weight: bold;}
#inbox .listing .card .content p { font-size: 15px; }
#inbox .listing .card .content p.category { margin: 0; color:#1E3354 }
#inbox .listing .card .content p.category strong { font-weight: bold; color:#6DD400}
#inbox .listing .card .content p.date { margin: 0; color:#8D98A8 }
#inbox .listing .card .content p.prix { color:#FFF;  position: absolute; margin: 1px 0; right: 11px; top:11px; padding: 0 0.6em; border-radius: 3em; height: 1.7em; line-height: 1.1em; font-size: 105%; background: #71d600; }
#inbox .listing .card .content p.btns { margin: 8px 0 4px 0}
#inbox .listing .card .content p.btns button { border-radius: 2px; border:1px solid #EEE; padding: 3px 8px; margin-bottom: 3px }
#inbox .listing .card .content p.btns button:hover { cursor: pointer; border:1px solid #CCC;  }

#inbox .listing .card.highlight { color:white;  background:#1891FC; border-color:#1891FC }
#inbox .listing .card.highlight .image { border-right: 1px solid #339EFC  }
#inbox .listing .card.highlight p.category { color: white; }
#inbox .listing .card.highlight p.date { color:rgba(255,255,255,0.50);}

#conversation .header { display: flex; align-items:stretch; border-bottom:1px solid #EEE; padding-bottom: 5px; }

#conversation .header .image { padding: 0px; width: 50px; }
#conversation .header .image .avatar { width:3rem;  height:3rem; border-radius:100%; background: #EEE no-repeat center center;  background-size: cover; left: 0; }
#conversation .header .content { padding-left: 15px; width: 100%; }
#conversation .header .content h4 { font-weight: bold; margin-top: 0; margin-bottom: 0; font-size: 18px; }
#conversation .header .content h4 .badge { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; color: #FFF; border-radius: 3px; font-size: 12px; line-height: 1.2rem;   padding: 0 0.6em; background:#26E1F3; text-transform: uppercase; font-weight: bold;}
#conversation .header .content p { font-size: 15px; margin: 0; color:#1E3354 }

#conversation .header .btn a { display: block; border:1px solid #1D3253; border-radius: 3px; padding: 5px 10px; text-wrap: nowrap; background: white; color:#1D3253  }
#conversation .header .btn a:hover { box-shadow: 0 0 1rem rgba(0,0,0,0.08); cursor: pointer; text-decoration: none; }

#conversation .overflow { max-height: 500px; overflow: auto; padding: 10px; color:#1D3253  }
#conversation .overflow .info { padding: 10px; margin: 10px 70px; border:1px solid #CCC; border-radius: 1em; font-size: 0.9em  }
#conversation .overflow .info h5 { font-weight: bold; font-size:18px; margin: 0; padding: 0 }


#conversation .overflow .primary { float: left; width: 60%; position: relative;}
#conversation .overflow .secondary { float: right; width: 60%; position: relative; }
#conversation .overflow .primary p, #conversation .overflow .secondary p { margin: 4px 0 }

#conversation .overflow .primary .dial, #conversation .overflow .secondary .dial {  background:white; box-shadow: 0 0 1rem rgba(0,0,0,0.08); border-radius: 5px; border-bottom-left-radius: 0; margin: 5px; padding: 8px 10px; font-size:14px;  }
#conversation .overflow .secondary .dial { border-radius: 5px; border-bottom-right-radius: 0; } 

#conversation .overflow .primary .dial { margin-left: 70px; }
#conversation .overflow .secondary .dial { margin-right: 70px; }
#conversation .overflow .date { color:#CCC; font-size:13px; }
#conversation .overflow .primary .date { margin-left: 70px; }
#conversation .overflow .secondary .date { margin-right: 70px; text-align: right; }

#conversation .overflow .primary .image { position: absolute; bottom:16px; left: 25px;}
#conversation .overflow .secondary .image { position: absolute; bottom:16px; right: 25px;}

#conversation .overflow .avatar { width:2rem;  height:2rem; border-radius:100%; background: #EEE no-repeat center center; background-size: cover; }

#conversation .overflow .prix { font-size:16px; }
#conversation .overflow .prix strong { font-weight: bold; margin-right: 20px; }
#conversation .overflow .strike { text-decoration: line-through; color:#CCC}
#conversation .overflow .btn-offer { margin-top: 8px; padding: 5px 15px; }

#conversation .overflow .success .dial { background: #6DD400; color:white !important}
#conversation .overflow .success .strike { color:rgba(255,255,255,.80) }


#conversation .footer { padding-top: 4px; width:100% }
#conversation .footer .flex { display: flex; justify-content: space-between; align-items:stretch; }
#conversation .footer input { margin:10px; padding: 12px 15px; border-radius: 2em; border:1px solid #CCC; box-shadow: 0 2px 1rem rgba(0,0,0, 0.1);  }
#conversation .footer input[type="text"] { width: 100%; margin-right: 0 }
#conversation .footer input[type="submit"] { }
#conversation .footer input[type="submit"]:hover { cursor: pointer; }


@media(max-width:1024px) {
    
    #main { margin-top: 160px; }
    
    #inbox .listing .card .content p, #inbox button, #conversation .dial { font-size:14px;  }
    #inbox .listing .card .content h4, #conversation .overflow .info h5 { font-size:16px; }
    #inbox .listing .card .content p.prix { top:3px; right: 3px; font-size:14px; }
   
    
    #conversation .overflow .primary .dial, #conversation .overflow .secondary .dial { padding:6px 10px; margin-bottom: 3px; }
    #conversation .overflow .primary .dial { margin-left: 50px; }
    #conversation .overflow .secondary .dial { margin-right: 50px; }
    #conversation .overflow .primary .image { bottom:18px; left: 10px;}
    #conversation .overflow .secondary .image {  bottom:18px; right: 10px;}
    
    #conversation .overflow .info { margin: 10px; }
    
    #conversation .overflow .primary .date { margin-left: 50px; }
    #conversation .overflow .secondary .date { margin-right: 50px;  }
    #conversation .overflow .date { margin-bottom: 6px; font-size:11px }

    body .center { padding: 0 10px; /*margin-top: 130px;*/ }
    #newmenu .NMbloc{
        top: 37px;
        width: 100vw;
        left: 50%;
        transform: translateX(-50%);
    }
}

@media(max-width:768px) {

    #newmenu .bloc { max-width:none; position: absolute; width: 100%; border-radius: 0; top:0; margin-top: 0; } 
    
    #newmenu .cat {width: 100%;border-radius: 0;border:0;margin: 1px 0;padding: 8px;}
    #newmenu form { margin: 2px 0; }
    #newmenu h2 { font-size:16px; top: 80px; left: 21px; }
    #newmenu .croix{ top: 72px; right: 10px; }
    #newmenu .NMbloc {
        top: 51px;
        margin-top: 0;
        margin-bottom: 0;
        bottom:0;
        
    }
    #newmenu .overflow { max-height: 800px; }
    
    #newmenu .retour .fleche_retour { width: 18px; margin: 0; padding: 0; }
    #newmenu .retour {right: 10px;top: 70px;}
    
    #conversation .overflow .primary { width: 70%; }
    #conversation .overflow .secondary { width: 70%; }
    #conversation .overflow { padding: 0 }
    
    .h1-messagerie { padding-bottom: 0; font-size: 22px !important }
    .h1-messagerie .badge { font-size:12px }
    
    
}



@media(max-width:680px) {
    
    #messagerie, #messagerie #inbox, #messagerie #conversation { display: block; width: 100% }
   
    #messagerie #conversation { display: none; }
    #inbox .listing { overflow:visible; }
}