/* ============================================================
   BOUTIQUE WOOCOMMERCE — STYLE DES CARTES PRODUITS
   ============================================================ */

/* ------------------------------------------------------------
   GRILLE
   ------------------------------------------------------------ */

.woocommerce ul.products,
.woocommerce-page ul.products {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Suppression des anciens comportements WooCommerce */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
    display: none;
}
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last {
    clear: none;
}

/* ------------------------------------------------------------
   CARTE PRODUIT
   .product = carte individuelle
   ------------------------------------------------------------ */

.woocommerce ul.products li.product {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    padding: 0 0 15px 0;
    min-height: 350px;
    width: auto !important;
    margin: 0 !important;
    background: #ffffff;
    overflow: hidden;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.12);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}
/* Petit effet au survol */
.woocommerce ul.products li.product:hover {
    transform: translateY(-2px);
    box-shadow:
        0 5px 12px rgba(0, 0, 0, 0.14);
}

/* ------------------------------------------------------------
   ZONE IMAGE
   ------------------------------------------------------------ */

/*
 * Le lien WooCommerce contient généralement l'image,
 * le titre et le prix.
 */
.woocommerce ul.products li.product
.woocommerce-loop-product__link {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex: 1;
    color: inherit;
}

/*
 * Image produit.
 * On crée une zone uniforme pour toutes les images.
 */
.woocommerce ul.products li.product
.woocommerce-loop-product__link img {
    display: block;
    width: 100%;
    height: 300px;
    margin: 0 0 10px;
    padding: 0;
    object-fit: contain;
    object-position: center;
    background: #f1f1ef;
    border-radius: 7px 7px 0 0;
    transition: transform 0.3s ease;
}

/*
 * Léger zoom au survol.
 */
/* .woocommerce ul.products li.product:hover
.woocommerce-loop-product__link img {
    transform: scale(1.025);
} */

/* ------------------------------------------------------------
   TITRE
   .woocommerce-loop-product__title
   ------------------------------------------------------------ */

.woocommerce ul.products li.product
.woocommerce-loop-product__title {
    margin: 0 10px 3px;
    padding: 0;
    color: #222222;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
}

/* ------------------------------------------------------------
   DESCRIPTION COURTE
   .product-short-description
   ------------------------------------------------------------ */

.woocommerce ul.products li.product
.product-short-description {
    margin: 0 8px 5px;
    color: #555555;
    font-size: 0.70rem;
    font-style: italic;
    line-height: 1.25;
    text-align: center;
}

/*
 * Évite les marges ajoutées par les <p> de WooCommerce.
 */
.woocommerce ul.products li.product
.product-short-description p {
    margin: 0;
}

/* ------------------------------------------------------------
   PRIX
   .price
   ------------------------------------------------------------ */

.woocommerce ul.products li.product
.price {
    display: block;
    margin: 0 0 7px;
    color: #171717;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
    text-align: center;
    padding-top: 5px;
}

/* Prix avant réduction */
.woocommerce ul.products li.product
.price del {
    color: #999999;
    font-size: 0.75rem;
}

/* Prix promotionnel */
.woocommerce ul.products li.product
.price ins {
    color: #171717;
    text-decoration: none;
}

/* ------------------------------------------------------------
   Bouton Ajouter au panier
   .button
   ------------------------------------------------------------ */

.woocommerce ul.products li.product .button { 
    display: flex;
    width: fit-content;
    background-color: #5B977A;
}

/* ------------------------------------------------------------
   Lien du bouton de la card produit
   ------------------------------------------------------------ */

.woocommerce ul.products li.product a {
    color: #ffffff;
}

/* ------------------------------------------------------------
   BADGE PROMOTION
   .onsale
   ------------------------------------------------------------ */

.woocommerce ul.products li.product
.onsale {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 10;
    min-width: auto;
    min-height: auto;
    margin: 0;
    padding: 5px 9px;
    background: #e85d3f;
    color: #ffffff;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
}

/* ------------------------------------------------------------
   BOUTON "VOIR LE PRODUIT"
   ------------------------------------------------------------ */

.woocommerce ul.products li.product
.product-view-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 68px);
    min-height: 29px;
    margin: auto 34px 0;
    padding: 6px 10px;
    background: #71804b;
    color: #ffffff;
    border-radius: 6px;
    font-size: 0.70rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

.woocommerce ul.products li.product
.product-view-button:hover {
    background: #5d6b3d;
    color: #ffffff;
    transform: translateY(-1px);
}

/* ------------------------------------------------------------
   désafficher les catégories & étiquettes de la page du produit 
   ------------------------------------------------------------ */
.product_meta {
    display: none;
}
/* ------------------------------------------------------------
   Cacher les étoiles uniquement dans la grille produits
   ------------------------------------------------------------ */
.woocommerce-shop ul.products li.product .star-rating,
.post-type-archive-product ul.products li.product .star-rating {
    display: none !important;
}

/* ============================================================
   WOOCOMMERCE — PAGINATION
   ============================================================ */
/*
 * Conteneur général
 */
.woocommerce nav.woocommerce-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    padding: 0;
}

/*
 * Liste des pages
 */
.woocommerce nav.woocommerce-pagination ul.page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 0;
    padding: 0;
    border: none;
    list-style: none;
}

/*
 * Chaque élément de la liste
 */
.woocommerce nav.woocommerce-pagination ul.page-numbers li {
    margin: 0;
    padding: 0;
    border: none;
}

/*
 * Numéros de page
 */
.woocommerce nav.woocommerce-pagination
.page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 35px;
    height: 35px;
    padding: 0 5px;
    background: #ffffff;
    color: #222222;
    border: 1px solid #dedede;
    border-radius: 5px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.10);
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

/*
 * Hover
 */
.woocommerce nav.woocommerce-pagination
.page-numbers:not(.current):hover {
    color: #5B977A;
    border-color: #5B977A;
}

/*
 * PAGE ACTIVE
 *
 * Correspond à la petite case verte
 * de ta capture.
 */
.woocommerce nav.woocommerce-pagination
.page-numbers.current {
    background: #5B977A;
    color: #ffffff;
    border-color: #5B977A;
    font-weight: 700;
    box-shadow:
        0 2px 4px rgba(113, 128, 75, 0.25);
}

/*
 * Focus clavier
 */
.woocommerce nav.woocommerce-pagination
.page-numbers:focus-visible {
    outline: 2px solid rgba(113, 128, 75, 0.4);
    outline-offset: 2px;
}

/* ============================================================
   BOUTONS PRÉCÉDENT / SUIVANT
   ============================================================ */
/*
 * Si WooCommerce affiche "Précédent" / "Suivant",
 * on leur applique le même style.
 */
.woocommerce nav.woocommerce-pagination
.page-numbers.prev,
.woocommerce nav.woocommerce-pagination
.page-numbers.next {
    min-width: 25px;
    padding: 0 7px;
    font-size: 10px;
}

/* ============================================================
   BARRE DE RECHERCHE PRODUITS
   ============================================================ */
.woocommerce-product-search-bar {
    width: 100%;
}
/*
 * Formulaire
 */
.woocommerce-product-search-bar
#ajax-product-search {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 260px;
    height: 34px;
    margin: 0;
    background: #ffffff;
    border: 1px solid #d5d5d5;
    border-radius: 5px;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}
/*
 * Champ de recherche
 */
.woocommerce-product-search-bar
#ajax-search-field {
    flex: 1;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0 34px 0 9px;
    background: transparent;
    border: none;
    outline: none;
    color: #333333;
    font-family: inherit;
    font-weight: 400;
    line-height: 1;
}
/*
 * Placeholder
 */
.woocommerce-product-search-bar
#ajax-search-field::placeholder {
    color: #555555;
    opacity: 1;
}
/*
 * Bouton de recherche
 */
.woocommerce-product-search-bar
#btn-form-search {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    color: #222222;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}
/*
 * Hover de l'icône
 */
.woocommerce-product-search-bar
#btn-form-search:hover {
    background: #f5f5f3;
    color: #71804b;
}
/*
 * Focus du champ
 */
.woocommerce-product-search-bar
#ajax-product-search:focus-within {
    border-color: #71804b;
    box-shadow: 0 0 0 2px rgba(113, 128, 75, 0.10);
}
/*
 * Focus clavier du bouton
 */
.woocommerce-product-search-bar
#btn-form-search:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(113, 128, 75, 0.25);
}

/* Width de l'image du produit */
div.woocommerce-product-gallery__wrapper div a img.wp-post-image {
    width: auto!important;
}
/* Fleches quantité */
div.quantity input.qty {
    padding: 4px!important;
}

/* Container des informations du produit */
.woocommerce div.product div.summary {
    min-height: 50vh;
}
/** Modification du bouton "AJouter au panier" **/
/* Visuel */
.wc-proceed-to-checkout > .checkout-button, .single_add_to_cart_button, #place_order {
    background-color: #3f3f3f!important;
}
/* hover */
.wc-proceed-to-checkout > .checkout-button:hover, .single_add_to_cart_button:hover, #place_order:hover {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px!important;
}
/* Je sais plus */
.woocommerce a.added_to_cart {
    padding: 0.5em!important;
    margin-left: 0!important;
    margin-top: 1em!important;
    color: black;
    background-color: rgb(232 232 232);
    border-radius: 6px;
}
/* Produit similaires */
.product .related {
    margin-bottom: 25px;
}


/* ------------------------------------------------------------ */
/* ------------------------------------------------------------ 
   MOBILE
--------------------------------------------------------------- */
/* ------------------------------------------------------------ */

@media (max-width: 1399px) {
    /* nombre de produit par ligne page boutique */
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {
    /* nombre de produit par ligne page boutique */
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .woocommerce-product-search-bar
    #ajax-product-search {
        max-width: 360px;
    }
    #container-search-produit {
        display: flex;
        justify-content: center;
    }

}

@media (max-width: 600px) {
    /* nombre de produit par ligne page boutique */
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .woocommerce ul.products li.product
    .woocommerce-loop-product__link img {
        height: 220px;
    }
    .woocommerce nav.woocommerce-pagination {
        margin-top: 30px;
    }
    .woocommerce nav.woocommerce-pagination
    .page-numbers {
        min-width: 27px;
        height: 27px;
        font-size: 11px;
    }
    .woocommerce-product-search-bar
    #ajax-product-search {
        max-width: 100%;
    }
}