/* ============================================================
   Taneino Visuals — CSS custom (ex-BO Divi)
   Migré dans le thème enfant Gutenberg
   ============================================================
   Sommaire :
   1. Lightbox Envira (fond, toolbar)
   2. WooCommerce dans la lightbox Envira
   3. Bouton "Ajouter au panier" (variante visible)
   4. Mini-cart YITH (z-index, masquage)
   5. Breadcrumb AIOSEO
   6. Watermark diagonal sur la lightbox
   7. Galerie Envira — coins arrondis + hover
   8. Pagination Envira / WordPress (refonte UX)
   ============================================================ */


/* ------------------------------------------------------------
   1. Lightbox Envira — fond noir + toolbar repositionnée
   ------------------------------------------------------------ */
.envirabox-bg {
    background: black !important;
    opacity: 1 !important;
}

.envirabox-theme-base_dark .envirabox-toolbar {
    top: 10px !important;
}


/* ------------------------------------------------------------
   2. WooCommerce dans la lightbox Envira
   ------------------------------------------------------------
   On cache prix/quantité/bouton uniquement sur les fiches
   produit affichées avec la classe .envira-woocommerce-hidden
   (l'ancien bloc "tout cacher" est conservé en commentaire au
   cas où il faudrait y revenir.)
   ------------------------------------------------------------ */
/*
.envira-woocommerce .price,
.envira-woocommerce .quantity,
.envira-woocommerce .single_add_to_cart_button,
.envira-woocommerce form.cart {
    display: none !important;
}
*/

.envira-woocommerce.envira-woocommerce-hidden .price,
.envira-woocommerce.envira-woocommerce-hidden .quantity {
    display: none !important;
}

.envirabox-woocommerce .envirabox-outer .envirabox-inner .envira-woocommerce {
    width: 100% !important;
    bottom: -8vh !important;
}


/* ------------------------------------------------------------
   3. Bouton "Ajouter au panier" — version visible (premium)
   ------------------------------------------------------------ */
.envira-woocommerce.envira-woocommerce-hidden .single_add_to_cart_button {
    background: linear-gradient(90deg, #c8a96e, #e8c987) !important;
    color: #0a0a0a !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    padding: 12px 20px !important;
    width: 100% !important;
    font-weight: 600 !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
}


/* ------------------------------------------------------------
   4. Mini-cart — migré vers le plugin taneino-minicart
   ------------------------------------------------------------
   Les overrides YITH WACP de cette section (mai 2026) ont été
   supprimés en même temps que la désactivation du plugin YITH.
   Le mini-cart est désormais rendu par le plugin taneino-minicart
   (drawer #tn-minicart-drawer), stylé dans son propre minicart.css.
   ------------------------------------------------------------ */


/* ------------------------------------------------------------
   5. Breadcrumb AIOSEO — couleur des liens
   ------------------------------------------------------------ */
.aioseo-breadcrumbs a {
    color: #00c6c2;
}


/* ------------------------------------------------------------
   6. Watermark diagonal sur la lightbox Envira
   ------------------------------------------------------------ */
.envirabox-overlay::after,
.envirabox-wrap::after {
    content: "© Taneino_Visuals · © Taneino_Visuals · © Taneino_Visuals";
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-35deg);
    font-size: 22px;
    font-family: 'Arial', sans-serif;
    color: rgba(255, 255, 255, 0.35);
    white-space: nowrap;
    pointer-events: none;
    z-index: 99999;
    letter-spacing: 8px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
    user-select: none;
}


/* ------------------------------------------------------------
   7. Galerie Envira — coins arrondis + hover premium
   ------------------------------------------------------------ */
/* 7.1 Arrondis sur toutes les images des galleries Envira */
.envira-gallery-wrap .envira-gallery-item img,
.envira-gallery-wrap .envira-gallery-image,
.envira-gallery-public .envira-gallery-item img {
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    display: block;
    width: 100%;
    height: auto;
}

/* 7.2 Le conteneur doit aussi clipper pour un arrondi propre */
.envira-gallery-wrap .envira-gallery-item,
.envira-gallery-wrap .envira-gallery-item a {
    border-radius: 8px;
    overflow: hidden;
    display: block;
}

/* 7.3 Hover : zoom léger + ombre douce */
.envira-gallery-wrap .envira-gallery-item:hover img,
.envira-gallery-public .envira-gallery-item:hover img {
    transform: scale(1.03);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* 7.4 Garantit que le zoom ne déborde pas */
.envira-gallery-wrap .envira-gallery-item {
    position: relative;
}

/* 7.5 Arrondi aussi sur la pagination / miniatures Envira */
.envira-pagination .envira-gallery-item img,
.envira-lightbox-image {
    border-radius: 8px;
}

/* 7.6 Respiration entre les images (optionnel — décommenter si besoin)
.envira-gallery-wrap .envira-gallery-item {
    padding: 4px;
}
*/


/* ------------------------------------------------------------
   8. Pagination Envira / WordPress — refonte UX
   ------------------------------------------------------------ */

/* Conteneur ------------------------------------------------- */
.envira-pagination,
.envira-gallery-pagination,
nav.pagination,
.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 40px 0 32px;
    padding: 0;
    list-style: none;
    font-family: inherit;
}

/* Chaque "page" : lien, span courant, dots, prev/next ------ */
.envira-pagination .page-numbers,
.envira-gallery-pagination .page-numbers,
nav.pagination .page-numbers,
.pagination .page-numbers,
.envira-pagination a,
.envira-pagination span {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    box-sizing: border-box !important;
    min-width: 44px;
    height: 44px;
    padding: 0 14px !important;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #ffffff;
    color: #1f2937;
    font-size: 15px;
    font-weight: 600;
    line-height: 44px !important;
    vertical-align: middle;
    text-decoration: none;
    transition: all 0.18s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    cursor: pointer;
    user-select: none;
}

/* Hover / focus -------------------------------------------- */
.envira-pagination .page-numbers:hover,
.envira-pagination a:hover,
.pagination .page-numbers:hover {
    background: #f5efe6;
    border-color: #c9a876;
    color: #0f172a;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}

.envira-pagination .page-numbers:focus-visible,
.envira-pagination a:focus-visible {
    outline: 2px solid #c9a876;
    outline-offset: 2px;
}

/* Page courante -------------------------------------------- */
.envira-pagination .page-numbers.current,
.envira-pagination span.current,
.pagination .page-numbers.current {
    background: #c9a876;
    border-color: #c9a876;
    color: #ffffff;
    cursor: default;
    box-shadow: 0 4px 12px rgba(201, 168, 118, 0.4);
}

.envira-pagination .page-numbers.current:hover {
    background: #c9a876;
    transform: none;
}

/* "..." (dots) --------------------------------------------- */
.envira-pagination .page-numbers.dots,
.envira-pagination span.dots,
.pagination .page-numbers.dots {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    color: #9ca3af;
    cursor: default;
    letter-spacing: 2px;
}

.envira-pagination .page-numbers.dots:hover {
    background: transparent;
    border-color: transparent;
    transform: none;
    box-shadow: none;
}

/* Précédent / Suivant — chevrons uniquement ---------------- */
.envira-pagination .prev,
.envira-pagination .next,
.pagination .prev,
.pagination .next {
    width: 44px;
    min-width: 44px !important;
    padding: 0 !important;
    font-size: 0 !important;
    background: #0f172a;
    border-color: #0f172a;
    color: #ffffff;
}

.envira-pagination .prev:hover,
.envira-pagination .next:hover,
.pagination .prev:hover,
.pagination .next:hover {
    background: #c9a876;
    border-color: #c9a876;
    color: #ffffff;
}

.envira-pagination .prev::before,
.pagination .prev::before {
    content: "‹";
    font-size: 22px !important;
    line-height: 1 !important;
    margin: 0 !important;
}

.envira-pagination .next::after,
.pagination .next::after {
    content: "›";
    font-size: 22px !important;
    line-height: 1 !important;
    margin: 0 !important;
}

/* Mobile (≤ 600 px) ---------------------------------------- */
@media (max-width: 600px) {
    .envira-pagination,
    .pagination {
        flex-wrap: nowrap !important;
        gap: 4px !important;
        margin: 24px 0 16px;
        padding: 0 8px;
    }

    .envira-pagination .page-numbers,
    .pagination .page-numbers {
        min-width: 36px !important;
        height: 36px !important;
        padding: 0 8px !important;
        font-size: 13px !important;
        line-height: 36px !important;
        flex-shrink: 0;
    }

    .envira-pagination .prev,
    .envira-pagination .next,
    .pagination .prev,
    .pagination .next {
        font-size: 0 !important;
        padding: 0 !important;
        min-width: 36px !important;
        width: 36px !important;
    }

    .envira-pagination .prev::before,
    .envira-pagination .next::after {
        font-size: 20px !important;
        margin: 0 !important;
        line-height: 36px !important;
    }

    .envira-pagination .page-numbers.dots,
    .pagination .page-numbers.dots {
        min-width: 22px !important;
        padding: 0 2px !important;
    }
}

/* Très petits écrans (≤ 380 px) ----------------------------- */
@media (max-width: 380px) {
    .envira-pagination .page-numbers,
    .pagination .page-numbers {
        min-width: 32px !important;
        height: 32px !important;
        padding: 0 6px !important;
        font-size: 12px !important;
        line-height: 32px !important;
    }

    .envira-pagination .prev,
    .envira-pagination .next {
        min-width: 32px !important;
        width: 32px !important;
    }

    .envira-pagination .prev::before,
    .envira-pagination .next::after {
        line-height: 32px !important;
        font-size: 18px !important;
    }
}


/* ------------------------------------------------------------
   9. Templates de page
   ------------------------------------------------------------ */

/* --- Template : Fond Blanc ---------------------------------- */
body.tn-tpl-fond-blanc {
    background-color: #ffffff;
    color: #111111;
}

/* --- Template : WooCommerce Tunnel (fond blanc + logo seul) - */
body.tn-tpl-woo-tunnel {
    background-color: #ffffff;
    color: #111111;
}

/* Masquer le bouton menu et le panier sur le tunnel */
body.tn-tpl-woo-tunnel .tn-site-header__menu-toggle,
body.tn-tpl-woo-tunnel .tn-minicart__toggle {
    display: none !important;
}

/* --- Template : WooCommerce Tunnel (fond sombre + logo seul) */
/* Fond identique au thème par défaut — seul le menu est masqué */
body.tn-tpl-woo-tunnel-dark .tn-site-header__menu-toggle,
body.tn-tpl-woo-tunnel-dark .tn-minicart__toggle {
    display: none !important;
}