@import url('https://use.fontawesome.com/releases/v5.13.0/css/all.css');
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100;0,500;0,700;0,800;0,900;1,400&display=swap');

:root{
    --green:#92AA03;
    --black:#000;
    --white:#FFF;
}

body { margin-top:220px; }
a {color:var(--green);}


/* ---- Menu connecté ----------------------------------------------------------------------------------------------- */
#div_menu_connecte ul li span:hover {color:var(--green);}
/* ------------------------------------------------------------------------------------------------------------------ */


/* ---- Module de navigation ---------------------------------------------------------------------------------------- */
nav .login {position:relative;z-index:1;}
nav .login::before {transform:skewY(-1deg);position:absolute;bottom:-20px;left:0;width:100%;height:100%;background:var(--green);content:'';z-index:0;}
#header a {flex:1 0 auto;text-align:center;/*mix-blend-mode:multiply;*/position:relative;}
#header a #logo {aspect-ratio:1/1;width:auto;height:75px;border-radius:20px;position:relative;bottom:-10px;z-index:1;}
/*.home #header a #logo {height:113px;}*/
nav.fixed-top::before {display:none;}
nav .login::before {background:#000;bottom:-10px;height:11em;top:-65px;}
nav ul {position:relative;justify-content:center;align-items:center;margin:0;padding:0;display:flex;}
nav ul li {list-style-type:none;text-transform:uppercase;font-size:14px;line-height:1;color:#fff;text-align:center;margin:0 30px;}
nav ul li a {color:#fff;}
nav .choixlivraison {display:flex;}
nav.fixed-top.promoactive {top:30px;}
nav > .row div {flex:1 0 auto;}
nav > .row div > div.col-md-9 {align-items:center;justify-content:center;}
nav > .row div > div.col-md-9 .address {display:flex;flex-direction:row;align-items:center;justify-content:center;width:100%;}
nav > .row div > div.col-md-9 .address {flex-direction:row-reverse;margin-bottom:.5em;}
nav .address::before {position:relative;top:0;width:50px;height:41px;background-color:#000;border-top-right-radius:20px;border-bottom-right-radius:20px;display:block;background-size:70%;}
nav {background:var(--green);padding:1.2em 0;position:relative;}
nav::after {content:'';display:block;background:var(--green);height:20px;width:100%;transform:skewY(-.5deg);position:absolute;bottom:-10px;z-index:0;}
nav img.logo {position:relative;}
nav .row {display:flex;flex-direction:row;align-items:center;justify-content:center;margin:0;}
nav > .row {width:100%;z-index:1;}
nav .btn-voir {
    background:var(--black);border-color:var(--black);box-shadow:none;
    border-radius:20px;border-bottom-left-radius:0;border-top-left-radius:0;
    text-align:center;text-shadow:none;padding:10px;font-size:.8em;
    width:auto;height:auto;
    cursor:pointer;font-family:'Montserrat';font-weight:bold;}
nav .btn-voir {color:#fff;}

nav .login ul li span.type_lien {color:#FFF;text-decoration:none;cursor:pointer;}
nav .login ul li span.type_lien::before {display:none;}
nav .login ul li span.type_lien::after {
    content:'';background:url('/site_v3/img/picto-connexion.svg') no-repeat center center;background-size:contain;
    width:45px;height:45px;display:block;margin:10px auto 0 auto;transition:all .5s ease;
}
nav .login ul li span.type_lien.show-cart {position:relative;}
nav .login ul li span.show-cart::after {background-image:url('/site_v3/img/picto-panier.svg');}
nav .login ul li span.type_lien .nb {position:absolute;top:30px; left:40px; bottom:10px;right:-7px;background:#fff;border-radius:50px;width:20px;height:20px;text-align:center;line-height:20px;font-size:13px;color:#ff002a;}
nav .login ul li span.type_lien:hover {color:var(--green);}
/* ------------------------------------------------------------------------------------------------------------------ */


/* ---- Auto-complétion du haut de page ----------------------------------------------------------------------------- */
.postcode {
    font-family:'Montserrat';font-size:.9em;font-weight:bold;font-style:normal; background:#fff;
    box-shadow:none; width:100%;
    border-radius:20px; border-bottom-right-radius:0; border-top-right-radius:0;height:43px;line-height:1.2em;padding:10px 20px;margin:0;text-align:left;
    color:var(--black);border:0;
}
.postcode:-moz-placeholder { color:#bbb; font-weight:normal; }
.postcode::-moz-placeholder { color:#bbb; font-weight:normal; }
.postcode::-webkit-input-placeholder { color:#bbb; font-weight:normal; }
.postcode:-ms-input-placeholder { color:#bbb; font-weight:normal; }
.postcode:focus {outline:none;}
.ui-autocomplete {
    background: 		#fff;
    border: 			1px solid #fff;
    z-index: 			40000;
    font-weight: 		300;
    font-size: 			13px;
    line-height: 		19px;
    text-align: 		center;
    color : 			#a8a8a8;
    list-style-type: 	none;
    max-height: 		200px;
    overflow-y: 		auto;
    overflow-x: 		hidden;
}
.ui-autocomplete-loading {
    background: 		white url( '/img/ajax-loader.gif' ) right center no-repeat;
}
/* ------------------------------------------------------------------------------------------------------------------ */



/* ---- Pop-up ------------------------------------------------------------------------------------------------------ */
#infos, .product-list button, nav img.logo {border-radius:20px;}
.content-popup span.close {border:3px solid var(--green);}
.content-popup h2 {color:var(--black);}
.content-popup h4 span {color:var(--black);font-style:italic;font-size:16px;display:block;}
.content-popup h6.special {font-size:14px;margin:10px 0px; color:var(--black);}
.content-popup #div_erreur_commande label div {position:relative;background:#FFF; border:2px solid var(--black);border-radius:3px;width:21px;height:21px;margin-right:10px;display:inline-block;vertical-align:-5px;}
.content-popup label.active div, .contenu_categorie label.active div {border-color:var(--black);}
.content-popup label.active div::before, .contenu_categorie label.active div::before {position:absolute;top:15%;left:15%;display:block;background:var(--black);border-radius:3px;width:70%;height:70%;content:'';}
.content-popup .row input[type="number"] {background:var(--black);border:0;outline:0;width:100%;line-height:40px;color:#fff;font-family:'Montserrat', sans-serif;font-size:24px;text-align:center;position:absolute;left:0;padding:0;border-radius:5px;}
.content-popup a.etape {
    background:var(--green);
    color:#fff;
    font-family:'Montserrat', sans-serif;font-size:14px;font-weight:500;text-transform:uppercase;width:100%;display:block;line-height:43px;
    border:0; border-radius:5px;cursor:pointer;transition:all .5s ease;
}
.content-popup .btn-blanc {
    background: var(--white);
    color:var(--black);
    font-family:'Montserrat', sans-serif;font-size:16px;font-weight:500;text-transform:uppercase;width:100%;display:block;line-height:43px;
    border:1px solid var(--white);border-radius:5px;cursor:pointer;transition:all .5s ease;
}
.section {
    width:					100%;
    padding:				5px;
    border:					1px solid var(--green);
}
/* ------------------------------------------------------------------------------------------------------------------ */


/* ---- Pop-up Validation de commande ------------------------------------------------------------------------------- */
#div_validation_commande .section_connexion {
    width:					100%;
    padding:5px;
    border:1px solid var(--green);;
}
#div_historique_commande .section {
    border:					1px solid var(--green);;
}
#div_historique_commande .detail_resto h4 {font-size:30px;text-align:center;color:var(--green);}
#div_historique_commande tr.precisions td {font-weight:normal; font-size:13px; font-style:italic; color:var(--green); }
/* ------------------------------------------------------------------------------------------------------------------ */


/* ---- Boutons ----------------------------------------------------------------------------------------------------- */
.content-popup [type="submit"],
.content-popup [type="button"],
.content-popup [name="previous"],
.content-popup [name="next"],
.content-popup [name="validation"],
.content-popup [name="facebook"],
.content-popup a.etape,
.acces_banque,
.classe_btn_top,
.classe_btn,
.classe_btn_secondaire:hover,
.btn-blanc:hover,
a.btn_small, span.btn_small {
    background:var(--green);
    border-radius: 5px;
    color: var(--white);
    border:1px solid var(--white);
}
.classe_btn_secondaire,
.classe_btn:hover,
a.btn_top.active, a.btn_top:hover,
span.btn_top.active, span.btn_top:hover,
a.btn.active, a.btn:hover,
a.btn_small.active, a.btn_small:hover, span.btn_small:hover {
    background:var(--black);
    border-radius: 5px;
    color: var(--white);
    border:1px solid var(--black);
}
a.btn_top, span.btn_top,
a.btn {
    color: var(--white);
    border:1px solid var(--white);
    background:var(--green);
    border-radius: 5px;
}
a.btn.btn-info {
    color: #FFF !important;
    border:1px solid #1f76a1;
    background: #1f76a1;
    border-radius: 5px;
}
a.btn.btn-info:hover {
    background: #d9edf7 !important;
    border-radius: 5px;
    color: #1f76a1 !important;
    border:1px solid #1f76a1;
}
.btn-blanc {
    background:var(--white);
    color:var(--green);
    border:1px solid var(--green);
    border-radius: 5px;
}
span.type_lien:hover {cursor:pointer;}
a.lien_simple_couleur, span.lien_simple_couleur {color:var(--green);}
a.lien_simple_couleur_blanc, span.lien_simple_couleur_blanc {color:var(--white);}
a.lien_simple, span.lien_simple {color:var(--green); font-size:18px;}
a.lien_simple_bis, span.lien_simple_bis {color:var(--black); font-size:18px;}
a.lien_simple_couleur:hover, a.lien_simple:hover, a.lien_simple_bis:hover,
span.lien_simple_couleur:hover, span.lien_simple:hover, span.lien_simple_bis:hover {font-weight:600; text-decoration:none;}
a.lien_simple_couleur_blanc:hover, span.lien_simple_couleur_blanc:hover {color:var(--green);}
/* ------------------------------------------------------------------------------------------------------------------ */


/* ---- Changement de quartier (Pop-up) ----------------------------------------------------------------------------- */
#changement_quartier a {color:var(--green);}
/* ------------------------------------------------------------------------------------------------------------------ */


/* ---- Panier ------------------------------------------------------------------------------------------------------ */
#cart.active { margin-top:100px; }
#cart h3 {font-family:'Permanent Marker';font-size: 1.75rem; color:var(--white);line-height:80px;}
#cart h3::before {content:'';display:block;width:100%;height:1px;background:var(--green);}
#cart h3::after {content:'';display:block;width:35px;height:6px;margin:0 auto;background:var(--green);}
#cart input {display:block;width:100%;background:var(--green);border:0;font-family:'Montserrat', sans-serif;text-align:center;color:#fff;}
#cart .row div:first-child .bt-remove:hover {color:var(--green);border-color:var(--green);}
#cart .row div:first-child .bt-remove-menu:hover {color:var(--green);border-color:var(--green);}
/* ------------------------------------------------------------------------------------------------------------------ */


/* ---- FAQ --------------------------------------------------------------------------------------------------------- */
#faq div.question { margin-bottom:20px; border:2px solid #DDD; border-radius:20px; }
#faq div.question:hover { background-color:var(--white); border:2px solid var(--green); }
/* ------------------------------------------------------------------------------------------------------------------ */

.fil-ariane { margin-top: 220px; }

/* ---- Footer ------------------------------------------------------------------------------------------------------ */
footer {padding-top:2em;background:var(--black);color:#fff;}
footer h3 {line-height:1.2;color:#fff;}
footer h4 { font-size:1.25rem; color:var(--green); }
footer a.social { font-size:2.5rem; color:var(--green); }
footer a.social:hover { color:#FFF; text-decoration:none; }
footer ul { padding-left:20px; }
footer ul li {list-style:none;}
footer ul li a {color:#fff;}
footer ul li a:hover {color:var(--green); text-decoration:none; }
footer p { padding-left:20px; }
footer > div.row {margin:0;}
/* ------------------------------------------------------------------------------------------------------------------ */


/* ==== Divers ====================================================================================================== */
#container .row.product-list {display:block;border:0 solid transparent;padding:0 35px;min-height:0;max-height:0;overflow:hidden;}
#container .row.product-list.active {animation:none;height:auto;max-height:none;}
#container .row.product-list.inactive {animation:openListReverse .5s ease forwards; overflow:hidden;}
#container .product-list .row {border-bottom:1px solid #ddd;min-height:0;padding:15px 0;}
.product-list p span {display:block;color:#9d9d9f;font-size:14px;}
.product-list p a {color:var(--green); font-size:14px;}
.product-list button {background:var(--green);color:#FFF;border:none;box-shadow:none;width:100%;line-height:38px;font-family:'Montserrat', sans-serif;padding:0;transition:all .5s ease;cursor:pointer;overflow:hidden;position:relative;padding-right:46px;}
.product-list button::after { position:absolute;content:'+'; line-height:38px; font-size:40px; right:0; width:46px; text-align:center; transition:all .2s ease; }
.product-list .addtocart img, img.addfrompopup {opacity:0;position:absolute;height:35px;width:35px;z-index:100;pointer-events:none;}
#infos img {
    box-shadow: none;
    border: 2px solid var(--green);
    border-radius: 20px;
}
#contenu-h1 {box-shadow:none;border:0;transform:skewY(-1deg);background:var(--black); margin-bottom:15px;}
#contenu-h1 h1 {color:#fff; font-size:18px; padding:15px 0 15px 5px;}

/* ================================================================================================================== */


/* ---- Version MOBILE ---------------------------------------------------------------------------------------------- */
@media screen and (max-width:991px){

    body { margin-top:240px; }

    /* ---- Navigation ---------------------------------------------------------------------------------------------- */
    nav .login::before, nav::after {display:none;}
    nav img.logo {margin:0 auto;display:block;position:fixed;top:36px;z-index:2;left:10px;max-width:64px;height:auto;}
    nav > .row {flex-direction:column-reverse;}
    nav.fixed-top.menu_connecte_active {padding:0;}
    nav > .row div.login {background:#000;padding:1rem;}
    nav > .row div.mt-2 > .col-md-4 {max-width:50%;}
    nav ul {justify-content:flex-end;}
    nav ul li {margin:0 10px;}
    nav ul li, nav .login ul li span.type_lien {font-size:0;}
    nav .login ul li span.type_lien .nb {top:0;left:6px;}
    nav .login ul li span.type_lien::after {width:35px;height:35px;margin:0 auto;}
    nav .btn-voir {border:0;}
    /* -------------------------------------------------------------------------------------------------------------- */


    /* ---- Divers -------------------------------------------------------------------------------------------------- */
    .postcode {height:39px;}
    #col-centrale { margin-top:15px; }
    #specialites .row {width:100%;margin:0;}
    #specialites .col-2 {-ms-flex:1 0 50%;flex:1 0 50%;max-width:50%;}
    #specialites .col-2 a.btn_small {margin:0;}
    #content {max-width:100%;}

    h1, h2, h3, h4, h5, h6, .h1 {text-align:center;}
    h1 {font-weight:bold;font-size:3rem;padding-bottom:10px;}
    h2 {font-size:2em;padding:0 20px;}
    #contenu-h1 h1 {font-size:15px;}
    #contenu-h1 {box-shadow:none;border:0;transform:skewY(0deg);background:var(--black); }
    /*#contenu-h1 { transform:skewY(0deg); }*/
    #contenu-h1 {transform:none;}

    #breadcrumbs {margin:10px auto;width:100%;font-size:.75rem;padding:10px 0;}
    footer {text-align:center;}
    footer ul { padding-left:0px; }
    /* -------------------------------------------------------------------------------------------------------------- */

}
/* ------------------------------------------------------------------------------------------------------------------ */