/* ==========================================================
   DECOENLIGNE - INTERFACE WOOCOMMERCE COMMUNE
   V6

   - message après ajout au panier
   - panier visible avant le hamburger sur mobile
   - boutique : 1 service par ligne sur mobile
   ========================================================== */



:root{
    --del-ui-black:#211d1a;
    --del-ui-gold:#b58a49;
    --del-ui-gold-light:#d7b36e;
    --del-ui-cream:#f7f4ef;
    --del-ui-text:#574f48;
}

/* ==========================================================
   1. MESSAGE APRES AJOUT AU PANIER
   ========================================================== */

.woocommerce-message
.del-cart-added-message{
    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:18px;

    width:100%;
}

.del-cart-added-message__text{
    flex:1 1 auto;
}

.del-cart-added-actions{
    display:flex;

    flex:0 0 auto;

    align-items:center;

    gap:9px;
}

.del-cart-added-actions .button,
.del-loop-cart-actions a{
    display:inline-flex !important;

    align-items:center;
    justify-content:center;

    min-height:38px;

    margin:0 !important;

    padding:9px 16px !important;

    border-radius:999px !important;

    font-size:11px !important;
    font-weight:700 !important;

    line-height:1.2 !important;

    text-decoration:none !important;

    text-transform:uppercase;
}

.del-cart-added-actions__cart,
.del-loop-cart-actions__cart{
    background:var(--del-ui-black) !important;

    border:1px solid var(--del-ui-gold) !important;

    color:var(--del-ui-gold-light) !important;
}

.del-cart-added-actions__continue,
.del-loop-cart-actions__continue{
    background:var(--del-ui-cream) !important;

    border:1px solid var(--del-ui-gold) !important;

    color:var(--del-ui-black) !important;
}

.del-cart-added-actions__cart:hover,
.del-loop-cart-actions__cart:hover,
.del-cart-added-actions__continue:hover,
.del-loop-cart-actions__continue:hover{
    background:var(--del-ui-gold) !important;

    border-color:var(--del-ui-gold) !important;

    color:var(--del-ui-black) !important;
}


/* ==========================================================
   2. BOUTONS APRES AJOUT AJAX DANS LA BOUTIQUE
   ========================================================== */

.del-loop-cart-actions{
    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:10px;

    width:100%;

    margin:16px 0 7px;
}

/*
 * Sur les fiches produit, on détache visuellement les actions
 * secondaires du bouton principal "Ajouter le projet au panier".
 */
body.single-product
.del-loop-cart-actions{
    margin-top:16px !important;
}

.del-loop-cart-actions a{
    flex:1 1 145px;

    max-width:190px;
}


/* ==========================================================
   3. PANIER MOBILE A GAUCHE DU HAMBURGER
   ========================================================== */

#del-mobile-cart-source{
    display:none !important;
}

.del-mobile-cart{
    display:none;
}

@media only screen and (max-width:959px){

    #Top_bar{
        position:relative !important;
    }

    #Top_bar .del-mobile-cart{
        position:absolute !important;

        /*
         * left et top sont calculés en JS à partir de la position
         * réelle de .responsive-menu-toggle.
         * On n'utilise donc plus de décalage horizontal fixe, source du chevauchement.
         */
        right:auto !important;

        z-index:1002 !important;

        display:flex !important;

        align-items:center;
        justify-content:center;

        width:36px;
        height:36px;

        padding:0 !important;

        transform:translateY(-50%);

        border:1px solid var(--del-ui-gold);
        border-radius:999px;

        background:var(--del-ui-black);

        color:var(--del-ui-gold-light) !important;

        text-decoration:none !important;

        pointer-events:auto !important;
    }

    /*
     * Le hamburger reste toujours au-dessus de tout élément voisin
     * et conserve toute sa zone cliquable.
     */
    #Top_bar a.responsive-menu-toggle{
        z-index:1004 !important;
        pointer-events:auto !important;
    }

    #Top_bar .del-mobile-cart__icon{
        display:flex;

        align-items:center;
        justify-content:center;

        width:21px;
        height:21px;
    }

    #Top_bar .del-mobile-cart__count{
        position:absolute;

        top:-6px;
        right:-5px;

        display:flex;

        align-items:center;
        justify-content:center;

        min-width:19px;
        height:19px;

        padding:0 5px;

        border-radius:999px;

        background:var(--del-ui-gold);

        color:var(--del-ui-black);

        font-size:10px;
        font-weight:700;

        line-height:19px;
    }
}


/* ==========================================================
   4. MOBILE : 1 SERVICE / PRODUIT PAR LIGNE
   ========================================================== */

@media only screen and (max-width:767px){

    body.woocommerce
    ul.products,

    body.woocommerce-page
    ul.products,

    body.post-type-archive-product
    ul.products,

    body.tax-product_cat
    ul.products,

    body.tax-product_tag
    ul.products{
        display:grid !important;

        grid-template-columns:
            minmax(0,1fr) !important;

        gap:28px !important;
    }

    body.woocommerce
    ul.products li.product,

    body.woocommerce-page
    ul.products li.product,

    body.post-type-archive-product
    ul.products li.product,

    body.tax-product_cat
    ul.products li.product,

    body.tax-product_tag
    ul.products li.product{
        float:none !important;

        clear:none !important;

        width:100% !important;
        max-width:520px !important;

        margin:0 auto !important;

        padding-left:0 !important;
        padding-right:0 !important;
    }

    body.woocommerce
    ul.products li.product:nth-child(n),

    body.woocommerce-page
    ul.products li.product:nth-child(n){
        margin-right:auto !important;
        margin-left:auto !important;
    }

    /*
     * L'image reste suffisamment grande sur téléphone
     * sans dépasser la largeur utile.
     */
    body.woocommerce
    ul.products li.product
    .image_frame,

    body.woocommerce-page
    ul.products li.product
    .image_frame{
        width:100% !important;
        max-width:100% !important;
    }
}


/* ==========================================================
   5. TABLETTE / MOBILE : ACTIONS PANIER EMPILABLES
   ========================================================== */

@media only screen and (max-width:959px){

    .woocommerce-message
    .del-cart-added-message{
        align-items:flex-start;

        flex-direction:column;
    }

    .del-cart-added-actions{
        width:100%;

        flex-wrap:wrap;
    }

    .del-cart-added-actions .button{
        flex:1 1 190px;
    }
}


@media only screen and (max-width:520px){

    .del-cart-added-actions{
        display:grid;

        grid-template-columns:1fr;

        gap:7px;
    }

    .del-cart-added-actions .button{
        width:100% !important;
    }

    .del-loop-cart-actions{
        display:grid;

        grid-template-columns:1fr;

        width:100%;
    }

    .del-loop-cart-actions a{
        width:100% !important;
        max-width:none;
    }
}


/* ==========================================================
   6. ESPACEMENT ACTIONS APRES AJOUT
   ========================================================== */

body.single-product
.single_add_to_cart_button
+ .del-loop-cart-actions{
    margin-top:16px !important;
}

@media only screen and (max-width:959px){

    body.single-product
    .del-loop-cart-actions{
        margin-top:18px !important;
        gap:10px !important;
    }
}

@media only screen and (max-width:520px){

    body.single-product
    .del-loop-cart-actions{
        margin-top:18px !important;
        gap:9px !important;
    }
}


/* ==========================================================
   7. MENU PRESTATIONS MOBILE
   Le + reste identifiable ; le comportement 1er/2e clic
   est géré dans produits-communs.php.
   ========================================================== */

@media only screen and (max-width:1239px){

    #Side_slide #menu ul li.submenu .menu-toggle,
    #Side_slide #menu ul li.menu-item-has-children .menu-toggle{
        z-index:3 !important;
    }
}


/* ==========================================================
   V8 - PANIER MOBILE / HAMBURGER
   ========================================================== */

@media only screen and (max-width:1239px){

    #Top_bar .del-mobile-cart{
        width:36px !important;
        height:36px !important;
        pointer-events:auto !important;
    }

    #Top_bar a.responsive-menu-toggle{
        position:relative !important;
        z-index:1100 !important;
        pointer-events:auto !important;
    }
}


/* ==========================================================
   8. SOUS-MENU MOBILE - "TOUS NOS SERVICES"
   ========================================================== */

@media only screen and (max-width:1239px){

    #Side_slide #menu
    .del-mobile-all-services{
        margin:0 !important;
        padding:0 !important;
    }

    #Side_slide #menu
    .del-mobile-all-services > a{
        display:block !important;

        margin:4px 12px 8px !important;
        padding:12px 15px !important;

        background:var(--del-ui-black) !important;

        border:1px solid var(--del-ui-gold) !important;
        border-left:3px solid var(--del-ui-gold) !important;

        color:var(--del-ui-gold-light) !important;

        font-weight:700 !important;

        text-transform:none !important;
    }

    #Side_slide #menu
    .del-mobile-all-services > a:hover,
    #Side_slide #menu
    .del-mobile-all-services > a:focus{
        background:var(--del-ui-gold) !important;

        color:var(--del-ui-black) !important;
    }
}


/* ==========================================================
   V10 - BOUTONS AJOUTES : CONTRASTE GARANTI
   Neutralise les couches / pseudo-elements Betheme.
   ========================================================== */

.del-cart-added-actions a.button,
.del-loop-cart-actions a{
    background-image:none !important;
    box-shadow:none !important;
    text-shadow:none !important;
    opacity:1 !important;
}

.del-cart-added-actions a.button::before,
.del-cart-added-actions a.button::after,
.del-loop-cart-actions a::before,
.del-loop-cart-actions a::after{
    display:none !important;
    content:none !important;
}

.del-cart-added-actions__cart,
.del-loop-cart-actions__cart{
    background:#211d1a !important;
    border:1px solid #b58a49 !important;
    color:#d7b36e !important;
    -webkit-text-fill-color:#d7b36e !important;
}

.del-cart-added-actions__cart *,
.del-loop-cart-actions__cart *{
    color:#d7b36e !important;
    -webkit-text-fill-color:#d7b36e !important;
}

.del-cart-added-actions__continue,
.del-loop-cart-actions__continue{
    background:#f7f4ef !important;
    border:1px solid #b58a49 !important;
    color:#211d1a !important;
    -webkit-text-fill-color:#211d1a !important;
}

.del-cart-added-actions__continue *,
.del-loop-cart-actions__continue *{
    color:#211d1a !important;
    -webkit-text-fill-color:#211d1a !important;
}

.del-cart-added-actions__cart:hover,
.del-loop-cart-actions__cart:hover,
.del-cart-added-actions__continue:hover,
.del-loop-cart-actions__continue:hover{
    background:#b58a49 !important;
    border-color:#b58a49 !important;
    color:#211d1a !important;
    -webkit-text-fill-color:#211d1a !important;
}


/* ==========================================================
   V10 - PANIER MOBILE
   30px, directement à gauche du hamburger visible.
   ========================================================== */

@media only screen and (max-width:1239px){

    #Top_bar .del-mobile-cart{
        width:30px !important;
        height:30px !important;
        min-width:30px !important;
        min-height:30px !important;
        margin:0 !important;
        padding:0 !important;
        transform:translateY(-50%) !important;
        background:#211d1a !important;
        border:1px solid #b58a49 !important;
        color:#d7b36e !important;
        -webkit-text-fill-color:#d7b36e !important;
        z-index:1090 !important;
    }

    #Top_bar .del-mobile-cart::before,
    #Top_bar .del-mobile-cart::after{
        display:none !important;
        content:none !important;
    }

    #Top_bar .del-mobile-cart__icon{
        width:17px !important;
        height:17px !important;
    }

    #Top_bar .del-mobile-cart__icon svg{
        width:17px !important;
        height:17px !important;
    }

    #Top_bar .del-mobile-cart__count{
        top:-7px !important;
        right:-7px !important;
        min-width:17px !important;
        height:17px !important;
        padding:0 4px !important;
        background:#b58a49 !important;
        color:#211d1a !important;
        -webkit-text-fill-color:#211d1a !important;
        font-size:9px !important;
        line-height:17px !important;
    }

    #Top_bar a.responsive-menu-toggle{
        z-index:1100 !important;
        pointer-events:auto !important;
    }
}


/* ==========================================================
   V10 - "TOUS NOS SERVICES"
   ========================================================== */

@media only screen and (max-width:1239px){

    #Side_slide #menu
    li.del-mobile-all-services > a{
        display:block !important;
        margin:6px 12px 10px !important;
        padding:12px 15px !important;
        background:#211d1a !important;
        border:1px solid #b58a49 !important;
        border-left:3px solid #b58a49 !important;
        color:#d7b36e !important;
        -webkit-text-fill-color:#d7b36e !important;
        font-weight:700 !important;
        opacity:1 !important;
    }

    #Side_slide #menu
    li.del-mobile-all-services > a::before,
    #Side_slide #menu
    li.del-mobile-all-services > a::after{
        display:none !important;
        content:none !important;
    }

    #Side_slide #menu
    li.del-mobile-all-services > a:hover,
    #Side_slide #menu
    li.del-mobile-all-services > a:focus{
        background:#b58a49 !important;
        color:#211d1a !important;
        -webkit-text-fill-color:#211d1a !important;
    }
}