/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */



.home-grid .elementor-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 35px;
    grid-auto-flow: column;
}

.home-grid .elementor-col-50 {
    width: 100%;
}


.product-details-wrap {
    background-color: #FFFFFF !important;
}




/* Cibler UNIQUEMENT la section carousel */
.js-products-carousel ul.products {
    margin: 0;
    padding: 0;
}

/* Ne pas laisser Woo forcer des colonnes/floats à l'intérieur du slider */
.js-products-carousel ul.products li.product {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    list-style: none;
}

/* Swiper prend le relais pour la mise en ligne */
.js-products-carousel .swiper {
    width: 100%;
}

/* Optionnel: réduire la hauteur des bullets si tu les actives un jour */
/* .js-products-carousel .swiper-pagination { position: static; margin-top: 10px; } */








#block-12>div>div>div>div>div>div.wp-block-woocommerce-product-filter-price {
    border: 2px solid #ddd;
    /* bordure grise claire */
    border-radius: 5px;
    /* angles légèrement arrondis */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    /* petite ombre douce */
    padding: 10px;
    /* espace intérieur pour aérer le contenu */
    background-color: #fff;
    /* fond blanc pour contraster avec l'ombre */
}

#block-12>div>div>div>div>div>div.wp-block-woocommerce-product-filter-attribute {
    border: 2px solid #ddd;
    /* bordure grise claire */
    border-radius: 5px;
    /* angles légèrement arrondis */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    /* petite ombre douce */
    padding: 10px;
    /* espace intérieur pour aérer le contenu */
    background-color: #fff;
    /* fond blanc pour contraster avec l'ombre */
    margin-top: -15px;
}


#block-13 {
    border: 2px solid #ddd;
    /* bordure grise claire */
    border-radius: 5px;
    /* angles légèrement arrondis */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    /* petite ombre douce */
    padding: 10px;
    /* espace intérieur pour aérer le contenu */
    background-color: #fff;
    /* fond blanc pour contraster avec l'ombre */
    margin-top: -30px;
}



b:not(h1 b):not(h2 b):not(h3 b):not(h4 b):not(h5 b):not(h6 b),
strong:not(h1 strong):not(h2 strong):not(h3 strong):not(h4 strong):not(h5 strong):not(h6 strong) {
    color: #B88A30 !important;
    /* ou la couleur que tu veux */
}




/* début header ----------------------------------------------------------- */





.wishlist-link {
    display: inline-block;
    text-decoration: none;
    margin: 0 10px;
}

.wishlist-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    transition: transform 0.3s ease;
    border-radius: 50%;

}

.wishlist-icon:hover {
    transform: scale(1.1);
}




/* pour l'animation de la notification de la boutique */
.store-notice-parent {
    overflow: hidden;
    padding: 10px 0;
    position: relative;
}

.store-notice {
    display: inline-block;
    white-space: nowrap;
    animation: scroll-left 15s linear infinite;
    font-weight: bold;
    font-size: 12px;
    padding-left: 100%;
}

@keyframes scroll-left {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-100%);
    }
}



/* styles du sticky header */
#header>div:nth-child(1)>div>div>div>div>div:nth-child(1)>div>div>a>img.sticky-logo {
    padding-bottom: 10px !important;
    padding-top: 10px !important;

}


/* Scroll uniquement sur les sous-menus profonds et longs (classe ajoutée par JS) */
.ct-header .menu .sub-menu.submenu-scroll {
    max-height: 560px;
    overflow-y: auto;
    overflow-x: visible;
    /* important: ne pas couper d'éventuels flyouts */
    scrollbar-width: thin;
    scrollbar-color: #c9c9c9 transparent;
}

.ct-header .menu .sub-menu.submenu-scroll::-webkit-scrollbar {
    width: 8px;
}

.ct-header .menu .sub-menu.submenu-scroll::-webkit-scrollbar-thumb {
    background: #c9c9c9;
    border-radius: 4px;
}



/* Garde ouvert un sous-menu quand le <li> porte .sticky-open */
/* Neutraliser le :hover natif quand sticky est actif (on coupe) */
.ct-header.safi-sticky-zone.menu-sticky-open .menu li.menu-item-has-children:hover>ul.sub-menu,
.ct-header.safi-sticky-zone.menu-sticky-open .menu li.menu-item-has-children:hover>.ct-mega-menu,
.ct-header.safi-sticky-zone.menu-sticky-open .menu li.menu-item-has-children:hover>.ct-mega-menu .ct-mega-menu-inner {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Forcer l'affichage persistant via .sticky-open (UL ET Mega) */
.ct-header.safi-sticky-zone.menu-sticky-open nav .menu>li.sticky-open>ul.sub-menu,
.ct-header.safi-sticky-zone.menu-sticky-open nav .menu>li.sticky-open>.ct-mega-menu,
.ct-header.safi-sticky-zone.menu-sticky-open nav .menu>li.sticky-open>.ct-mega-menu .ct-mega-menu-inner,
.ct-header.safi-sticky-zone.menu-sticky-open .menu li.sticky-open>ul.sub-menu,
.ct-header.safi-sticky-zone.menu-sticky-open .menu li.sticky-open>.ct-mega-menu,
.ct-header.safi-sticky-zone.menu-sticky-open .menu li.sticky-open>.ct-mega-menu .ct-mega-menu-inner {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    z-index: 9999;
}

/* Scroll sélectif (inchangé) */
.ct-header .menu .sub-menu.submenu-scroll {
    max-height: min(560px, calc(100vh - 160px));
    overflow-y: auto;
    overflow-x: visible;
    scrollbar-width: thin;
    scrollbar-color: #c9c9c9 transparent;
}

.ct-header .menu .sub-menu.submenu-scroll::-webkit-scrollbar {
    width: 8px;
}

.ct-header .menu .sub-menu.submenu-scroll::-webkit-scrollbar-thumb {
    background: #c9c9c9;
    border-radius: 4px;
}




/* Bordure dorée sur tous les sous-menus */
.ct-header .menu .sub-menu {
    border: 2px solid #B88A30;
    /* Bordure dorée */
    border-radius: 4px;
    /* Optionnel : coins arrondis */
    padding: 8px;
    /* Optionnel : espace intérieur */
}



/* Sous-menus : fond blanc et texte noir */
.ct-header .menu .sub-menu {
    background-color: #ffffff !important;
    /* fond blanc */
}

.ct-header .menu .sub-menu li a {
    color: #000000 !important;
    /* texte noir */
}

/* Effet au survol : texte doré par exemple */
.ct-header .menu .sub-menu li a:hover {
    color: #DAA520 !important;
    /* doré (ou autre couleur au choix) */
}



/* pour l'icone à côté du logo */
.ct-header .custom-logo-icon {
    display: inline-flex;
    align-items: center;
    margin-left: 12px;
    /* espace avec le logo */
    line-height: 1;
    color: #DAA520;
    /* doré */
    text-decoration: none;
}

.ct-header .custom-logo-icon:hover {
    color: #000;
}



/* Flèches des sous-menus : couleur noire */
.ct-header .menu .sub-menu li.menu-item-has-children>a svg,
.ct-header .menu .sub-menu li.menu-item-has-children>a .ct-icon,
.ct-header .menu .sub-menu li.menu-item-has-children>a .ct-dropdown-icon,
.ct-header .menu .sub-menu li.menu-item-has-children>a .ct-menu-item-arrow,
.ct-header .menu .sub-menu li.menu-item-has-children>.ct-submenu-icon {
    fill: #000 !important;
    stroke: #000 !important;
    color: #000 !important;
}

/* Flèche dorée au survol du lien */
.ct-header .menu .sub-menu li.menu-item-has-children>a:hover svg,
.ct-header .menu .sub-menu li.menu-item-has-children>a:hover .ct-icon,
.ct-header .menu .sub-menu li.menu-item-has-children>a:hover .ct-dropdown-icon,
.ct-header .menu .sub-menu li.menu-item-has-children>a:hover .ct-menu-item-arrow,
.ct-header .menu .sub-menu li.menu-item-has-children>a:hover .ct-submenu-icon {
    fill: #DAA520 !important;
    /* Doré */
    stroke: #DAA520 !important;
    color: #DAA520 !important;
}


/* Bordure grise entre chaque élément du sous-menu */
.ct-header .menu .sub-menu li {
    border-bottom: 1px solid #ddd;
    /* gris clair */
}

/* On retire la bordure pour le dernier élément */
.ct-header .menu .sub-menu li:last-child {
    border-bottom: none;
}


/* icone mon compte */
#header>div:nth-child(1)>div>div>div>div>div:nth-child(2)>div>div.ct-header-account>span>svg {
    display: block !important;
}








/* ==========================================
   SYSTÈME DE MENU ADAPTATIF PROFESSIONNEL
   Optimisé pour accessibilité + UX
   ========================================== */

/* Scroll UNIQUEMENT sur les enfants de "Les 3 Meilleures Générations" + autres menus spécifiques */
.menu-item-412>.sub-menu,
.menu-item-2638>.sub-menu,
.menu-item-414>.sub-menu,
.menu-item-415>.sub-menu,
.menu-item-3339>.sub-menu,
.menu-item-416>.sub-menu {
    max-height: min(70vh, calc(100vh - 120px));
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px;
    scroll-behavior: smooth;
}

/* Scrollbar dorée */
.menu-item-412>.sub-menu,
.menu-item-2638>.sub-menu,
.menu-item-414>.sub-menu,
.menu-item-415>.sub-menu,
.menu-item-3339>.sub-menu,
.menu-item-416>.sub-menu {
    scrollbar-width: thin;
    scrollbar-color: #B88A30 rgba(245, 245, 245, 0.5);
}

.menu-item-412>.sub-menu::-webkit-scrollbar,
.menu-item-2638>.sub-menu::-webkit-scrollbar,
.menu-item-414>.sub-menu::-webkit-scrollbar,
.menu-item-415>.sub-menu::-webkit-scrollbar,
.menu-item-3339>.sub-menu::-webkit-scrollbar,
.menu-item-416>.sub-menu::-webkit-scrollbar {
    width: 6px;
}

.menu-item-412>.sub-menu::-webkit-scrollbar-track,
.menu-item-2638>.sub-menu::-webkit-scrollbar-track,
.menu-item-414>.sub-menu::-webkit-scrollbar-track,
.menu-item-415>.sub-menu::-webkit-scrollbar-track,
.menu-item-3339>.sub-menu::-webkit-scrollbar-track,
.menu-item-416>.sub-menu::-webkit-scrollbar-track {
    background: rgba(245, 245, 245, 0.3);
    border-radius: 3px;
}

.menu-item-412>.sub-menu::-webkit-scrollbar-thumb,
.menu-item-2638>.sub-menu::-webkit-scrollbar-thumb,
.menu-item-414>.sub-menu::-webkit-scrollbar-thumb,
.menu-item-415>.sub-menu::-webkit-scrollbar-thumb,
.menu-item-3339>.sub-menu::-webkit-scrollbar-thumb,
.menu-item-416>.sub-menu::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #B88A30 0%, #9a7228 100%);
    border-radius: 3px;
}





/* --- TÂCHE 53 : RÉTABLISSEMENT DES SOUS-MENUS EN NOIR --- */

/* 1. Fond sombre pour le sous-menu */
.ct-header .menu .sub-menu {
    background-color: #1a1a1a !important;
    /* Noir doux, plus élégant que #000 pur */
    border: 1px solid #B88A30 !important;
    /* Bordure dorée conservée */
}

/* 2. Texte des liens : Blanc/Gris clair */
.ct-header .menu .sub-menu li a {
    color: #f5f5f5 !important;
}

/* 3. Survol des liens : Doré */
.ct-header .menu .sub-menu li a:hover {
    color: #B88A30 !important;
    background-color: #2a2a2a !important;
    /* Légère surbrillance du fond au survol */
}

/* 4. Flèches (SVG/Icônes) : Blanc par défaut */
.ct-header .menu .sub-menu li.menu-item-has-children>a svg,
.ct-header .menu .sub-menu li.menu-item-has-children>a .ct-icon,
.ct-header .menu .sub-menu li.menu-item-has-children>a .ct-dropdown-icon,
.ct-header .menu .sub-menu li.menu-item-has-children>a .ct-menu-item-arrow,
.ct-header .menu .sub-menu li.menu-item-has-children>.ct-submenu-icon {
    fill: #f5f5f5 !important;
    stroke: #f5f5f5 !important;
    color: #f5f5f5 !important;
}

/* 5. Flèches au survol : Doré */
.ct-header .menu .sub-menu li.menu-item-has-children>a:hover svg,
.ct-header .menu .sub-menu li.menu-item-has-children>a:hover .ct-icon,
.ct-header .menu .sub-menu li.menu-item-has-children>a:hover .ct-dropdown-icon,
.ct-header .menu .sub-menu li.menu-item-has-children>a:hover .ct-menu-item-arrow,
.ct-header .menu .sub-menu li.menu-item-has-children>a:hover .ct-submenu-icon {
    fill: #B88A30 !important;
    stroke: #B88A30 !important;
    color: #B88A30 !important;
}

/* 6. Séparateurs entre les éléments : Gris sombre */
.ct-header .menu .sub-menu li {
    border-bottom: 1px solid #333 !important;
}

.ct-header .menu .sub-menu li:last-child {
    border-bottom: none !important;
}

/* 7. Scrollbar dorée (pour les longs menus) adaptée au fond sombre */
.menu-item-412>.sub-menu::-webkit-scrollbar-track,
.menu-item-2638>.sub-menu::-webkit-scrollbar-track,
.menu-item-414>.sub-menu::-webkit-scrollbar-track,
.menu-item-415>.sub-menu::-webkit-scrollbar-track,
.menu-item-3339>.sub-menu::-webkit-scrollbar-track,
.menu-item-416>.sub-menu::-webkit-scrollbar-track {
    background: #2a2a2a !important;
    /* Fond de la scrollbar sombre */
}





/* fin header ---------------------------------------------------------------------------------------------------------------------------------------------- */










/* début accueil ----------------------------------------------------------- */

.lettre-commandant-div {
    filter: blur(0px);
}



.eael-product-grid.eael-product-simple .woocommerce ul.products li.product .woocommerce-loop-product__title,
.eael-product-grid.eael-product-reveal .woocommerce ul.products li.product .woocommerce-loop-product__title,
.eael-post-grid.eael-product-simple .woocommerce ul.products li.product .woocommerce-loop-product__title,
.eael-post-grid.eael-product-reveal .woocommerce ul.products li.product .woocommerce-loop-product__title {
    line-height: 0.8 !important;
    white-space: nowrap;
    /* empêche le retour à la ligne */
    overflow: hidden;
    /* masque le texte qui déborde */
    text-overflow: ellipsis;
    /* affiche "..." à la fin */
    display: block;
    padding: 5px !important;
}



/* pour les carrés blancs de la sélection du mois */
.elementor-618 .elementor-element.elementor-element-52ae219 .eael-product-grid .woocommerce ul.products li.product {
    border-style: none !important;
}





/* ✅ Corrige la superposition des titres arabes avec le bouton */
.eael-product-title {
    margin-bottom: 50px !important;
    /* espace sous le bloc titre */
    overflow: visible !important;
    /* s'assurer qu'aucun texte n'est coupé */
}

.titre-arabe {
    margin-top: 8px !important;
    margin-bottom: 10px !important;
    display: block !important;
    position: relative !important;
    z-index: 1;
    color: #6b6b6b !important;
}





/* --- CSS TÂCHE 5 : CORRECTION FINALE ESPACEMENT & IMAGES --- */

/* 1. Le Slide (Le tiroir Swiper) */
.safi-nouveautes .swiper-slide {
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    /* La marge droite est gérée par le PHP (10px) */
}

/* 2. Le Produit (Contenu interne) */
/* On écrase toutes les marges héritées du thème parent */
.safi-nouveautes .swiper-slide .product,
.safi-nouveautes .eael-product-carousel {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    width: 100%;
    /* S'assure que le bloc occupe tout l'espace du slide */
}

/* 3. L'Image (Agrandissement) */
/* Force l'image à prendre 100% de la largeur du slide pour éliminer les vides latéraux */
.safi-nouveautes .image-wrap,
.safi-nouveautes .image-wrap img,
.safi-nouveautes .woocommerce-loop-product__link img {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    margin: 0 auto !important;
    height: auto !important;
}

/* 4. Sécurité Conteneur */
/* Petite marge latérale pour éviter que le premier/dernier livre ne touche le bord de l'écran */
.safi-nouveautes .swiper-container-wrap {
    padding: 0 4px;
}





/* --- TÂCHE 6 : Uniformisation des titres des produis dans les carousel (Style SifatuSafwa) --- */

/* 0. NOUVEAU : On supprime la marge du conteneur parent du titre pour coller l'Arabe */
.safi-nouveautes .eael-product-title {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
    /* Sécurité */
}

/* 1. Titre Français : on limite à 2 lignes et on fixe la hauteur */
.safi-nouveautes .eael-product-title h2,
.safi-nouveautes .woocommerce-loop-product__title {
    font-size: 14px !important;
    /* Taille lisible */
    font-weight: 700 !important;
    /* Gras comme sur l'exemple */
    color: #333 !important;
    /* Noir foncé */
    line-height: 1.4 !important;

    /* Magie pour couper proprement à 2 lignes */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* Limite à 2 lignes max */
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 42px;
    /* Hauteur fixe (1.4 * 14px * 2 lignes ≈ 40-42px) */
    margin-bottom: 2px !important;
    /* Marge réduite au minimum (était 5px) */
}

/* 2. Titre Arabe : Gris, plus petit, aligné */
.safi-nouveautes .titre-arabe {
    font-family: 'Amiri', 'Traditional Arabic', serif;
    /* Police arabe jolie si dispo */
    font-size: 13px !important;
    color: #7a7a7a !important;
    /* Gris comme sur l'image */
    line-height: 1.3 !important;

    /* On limite aussi l'arabe pour éviter les décalages */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 36px;
    /* Hauteur fixe pour l'arabe */
    margin-top: 0px !important;
    /* On force le rapprochement vers le haut */
    margin-bottom: 5px !important;
    /* Petit espace avant le prix */
}

/* 3. Prix : On s'assure qu'il est bien détaché en bas */
.safi-nouveautes .eael-product-price {
    margin-top: auto !important;
    /* Pousse le prix vers le bas si on utilise flexbox */
    font-weight: bold;
    color: #000;
}

/* Optionnel : Alignement général du bloc texte */
.safi-nouveautes .product-details-wrap {
    text-align: left;
    /* Ou center, selon votre préférence */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}






/* --- TÂCHE 7 : AGRANDISSEMENT MAXIMAL DES IMAGES & NETTOYAGE --- */

/* 1. Force tous les conteneurs intermédiaires à 0 padding/margin */
.safi-nouveautes .eael-product-carousel,
.safi-nouveautes .product-image-wrap,
.safi-nouveautes .image-wrap {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border: none !important;
    /* Retire d'éventuelles bordures invisibles */
}

/* 2. L'Image : Zoom léger + Remplissage total */
.safi-nouveautes .image-wrap img {
    width: 100% !important;
    max-width: none !important;
    /* Autorise l'image à dépasser sa taille réelle si nécessaire */
    margin: 0 auto !important;
    display: block !important;

    /* Optionnel : Un léger zoom pour densifier l'affichage (style Sifatu Safwa) */
    transform: scale(1.05);
    transform-origin: center bottom;
    /* On zoome depuis le bas pour ne pas cacher le titre */
}

/* 3. Sécurité : On cache ce qui dépasse (si le zoom est trop fort) */
.safi-nouveautes .product-image-wrap {
    overflow: hidden !important;
}





/* --- TÂCHE 12 : ANIMATION AU SURVOL (WRAPPER + STYLE TÂCHE 10) --- */

/* 1. On cible le WRAPPER (.image-wrap) pour recevoir l'animation */
.safi-nouveautes .image-wrap {
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out !important;
    will-change: transform, filter;

    /* Structure : On s'assure que le wrapper est un bloc solide */
    display: block !important;
    transform-origin: center center;
}

/* 2. Au survol du wrapper, on anime LE WRAPPER LUI-MÊME */
/* On applique ici les valeurs visuelles de la Tâche 10 (scale 1.08, translateY -5px) */
.safi-nouveautes .image-wrap:hover {
    transform: scale(1.08) translateY(-5px) !important;
    cursor: pointer;

    /* Ombre portée douce (Style Tâche 10) */
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.15));

    /* Z-Index crucial : permet de passer au-dessus des voisins */
    z-index: 50 !important;
    position: relative !important;
}

/* 3. On annule toute animation directe sur l'image elle-même */
/* C'est essentiel pour éviter les conflits : l'image est passive, c'est le wrapper qui bouge */
.safi-nouveautes .image-wrap img {
    transition: none !important;
    transform: none !important;
}

/* 4. Gestion des débordements (Sécurité anti-clipping) */
/* On force tous les parents à montrer ce qui dépasse (l'image qui grandit) */
.safi-nouveautes .swiper-slide,
.safi-nouveautes .product,
.safi-nouveautes .eael-product-carousel {
    overflow: visible !important;
    z-index: auto !important;
}

/* Le slide survolé passe au premier plan absolu */
.safi-nouveautes .swiper-slide:hover {
    z-index: 100 !important;
}


/* fin accueil ----------------------------------------------------------- */







/* début boutique ----------------------------------------------------------- */



/* Titre des produits dans la boutique et les catégories */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 14px !important;
}


/* pour les titres des produits des carousel */
.eael-woo-product-carousel-container .eael-product-title * {
    font-size: 14px !important;
}


/* Titres produits WooCommerce, Elementor et Blocksy */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce div.product .product_title,
.eael-product-title,
.ct-product .ct-woo-card-title {
    font-family: Helvetica, Arial, sans-serif !important;
}


/* Masquer bouton Ajouter au panier sur la boutique et les catégories */
.woocommerce.archive .add_to_cart_button,
.woocommerce.archive .product_type_simple,
.woocommerce.archive .product_type_variable {
    display: none !important;
}


/* Prix en gras dans la boutique, les catégories et la fiche produit */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    font-weight: bold !important;
    /* gras */
    color: black;
}


.titre-arabe {
    font-weight: 300 !important;
    font-family: "Amiri", "Scheherazade New", serif;
    /* optionnel : meilleure police arabe */
    font-size: 1.2em;

}



/* Limiter l'affichage du filtre aux 4 premières catégories */
.woof_container_inner_catgoriesdeproduits ul li:nth-child(n+5) {
    display: none;
}

/* Style du lien "Voir plus" du filtre */
.show-more-cats {
    display: block;
    color: #0073aa;
    cursor: pointer;
    margin-top: 5px;
    font-weight: 600;
    text-align: left;
}

/* Effet au survol pour le lien "Voir plus" */
.show-more-cats:hover {
    text-decoration: underline;
}



/* Style du bouton "Voir plus" pour les filtres WOOF */
.show-more-cats {
    display: block;
    color: #0073aa;
    /* couleur du lien */
    cursor: pointer;
    /* pointeur au survol */
    margin-top: 5px;
    /* espace au-dessus */
    font-weight: 600;
    /* gras */
    text-align: left;
    /* alignement à gauche */
}

.show-more-cats:hover {
    text-decoration: underline;
    /* effet au survol */
}

/* Limiter l'affichage du filtre aux 4 premières options */
.woof_container_pa_edition .woof_container_inner ul li:nth-child(n+5) {
    display: block;
}




/* pour le filtre */
.irs--round .irs-bar,
.irs--round .irs-from,
.irs--round .irs-to,
.irs--round .irs-single {
    background-color: #B88A30 !important;
}

.irs--round .irs-handle {
    border: 4px solid #B88A30 !important;
}

.irs--round .irs-from:before,
.irs--round .irs-to:before,
.irs--round .irs-single:before {
    border-top-color: #B88A30 !important;

}


/* ========================================
   BORDURES ET OMBRE POUR LES CONTENEURS DE FILTRES
   ======================================== */

/* Bordures et ombre pour les conteneurs de filtres */
/*
.woof_container_pa_format,
.woof_container_pa_harakat,
.woof_container_pa_edition,
.woof_container_pa_couverture,
.woof_container_product_cat {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 10px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}
*/

/* Ombre dorée intense + animation au survol */
/*
.woof_container_pa_format:hover,
.woof_container_pa_harakat:hover,
.woof_container_pa_edition:hover,
.woof_container_pa_couverture:hover,
.woof_container_product_cat:hover {
    box-shadow: 0 6px 28px rgba(184, 138, 48, 0.35),
                0 3px 12px rgba(0, 0, 0, 0.12);
    border-color: rgba(184, 138, 48, 0.4);
    transform: translateY(-3px) scale(1.01);
}
*/



/* Bordures et ombre pour les conteneurs de filtres */
.woof_container_pa_format,
.woof_container_pa_harakat,
.woof_container_pa_edition,
.woof_container_pa_couverture,
.woof_container_product_cat {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 10px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Ombre dorée bien visible au survol */
.woof_container_pa_format:hover,
.woof_container_pa_harakat:hover,
.woof_container_pa_edition:hover,
.woof_container_pa_couverture:hover,
.woof_container_product_cat:hover {
    box-shadow: 0 6px 28px rgba(184, 138, 48, 0.4),
        0 3px 12px rgba(0, 0, 0, 0.12);
    border-color: rgba(184, 138, 48, 0.5);
}










/* ========================================
   COULEUR DORÉE UNIQUEMENT POUR LES LISTES DÉROULANTES DES FILTRES
   ======================================== */

/* Ciblage précis : éléments sélectionnés dans les conteneurs WOOF */
.woof_container_product_cat .chosen-container .chosen-results li.highlighted,
.woof_container_product_cat .chosen-container .chosen-results li.result-selected,
.woof_container_pa_format .chosen-container .chosen-results li.highlighted,
.woof_container_pa_format .chosen-container .chosen-results li.result-selected,
.woof_container_pa_harakat .chosen-container .chosen-results li.highlighted,
.woof_container_pa_harakat .chosen-container .chosen-results li.result-selected,
.woof_container_pa_edition .chosen-container .chosen-results li.highlighted,
.woof_container_pa_edition .chosen-container .chosen-results li.result-selected,
.woof_container_pa_couverture .chosen-container .chosen-results li.highlighted,
.woof_container_pa_couverture .chosen-container .chosen-results li.result-selected {
    background-color: #B88A30 !important;
    background-image: none !important;
    color: #ffffff !important;
}

/* Survol dans les listes déroulantes WOOF */
.woof_container_product_cat .chosen-container .chosen-results li:hover,
.woof_container_pa_format .chosen-container .chosen-results li:hover,
.woof_container_pa_harakat .chosen-container .chosen-results li:hover,
.woof_container_pa_edition .chosen-container .chosen-results li:hover,
.woof_container_pa_couverture .chosen-container .chosen-results li:hover {
    background-color: rgba(184, 138, 48, 0.85) !important;
    color: #ffffff !important;
}







/* ========================================
   WOOF - REMPLACEMENT BLEU → DORÉ #B88A30
   ======================================== */

/* 1️⃣ CHECKBOX - État normal (bordure) */
.woof_container .icheckbox_square-blue,
.woof_checkbox_instock_container .icheckbox_square-blue {
    border: 2px solid #B88A30 !important;
    background: transparent !important;
}

/* 2️⃣ CHECKBOX - Survol (fond léger) */
.woof_container .icheckbox_square-blue:hover,
.woof_checkbox_instock_container .icheckbox_square-blue:hover {
    background-color: rgba(184, 138, 48, 0.1) !important;
    border-color: #B88A30 !important;
}

/* 3️⃣ CHECKBOX - Cochée (fond plein doré) */
.woof_container .icheckbox_square-blue.checked,
.woof_checkbox_instock_container .icheckbox_square-blue.checked {
    background-color: #B88A30 !important;
    background-image: none !important;
    border-color: #B88A30 !important;
}

/* 4️⃣ CHECKBOX - Cochée au survol (doré foncé) */
.woof_container .icheckbox_square-blue.checked:hover,
.woof_checkbox_instock_container .icheckbox_square-blue.checked:hover {
    background-color: #9a7228 !important;
    border-color: #9a7228 !important;
}

/* 5️⃣ COCHE (checkmark) - Blanche sur fond doré */
.woof_container .icheckbox_square-blue.checked:after,
.woof_checkbox_instock_container .icheckbox_square-blue.checked:after {
    content: '✓' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: bold !important;
}

/* 6️⃣ TEXTE "En stock" - Survol doré */
.woof_checkbox_instock_container label:hover,
.woof_container label:hover {
    color: #B88A30 !important;
}

/* 7️⃣ HELPER invisible (zone de clic) */
.woof_container .iCheck-helper:hover,
.woof_checkbox_instock_container .iCheck-helper:hover {
    cursor: pointer !important;
}

/* --- TÂCHE 11 : ESPACEMENT COMPACT & LARGEUR OPTIMISÉE (Version Équilibrée) --- */

/* 1. ÉLARGISSEMENT MODÉRÉ DE LA STRUCTURE */
/* On élargit la page mais on garde des marges confortables sur les côtés */
.archive.woocommerce .ct-container,
.archive.woocommerce .elementor-section.elementor-section-boxed>.elementor-container {
    max-width: 86% !important;
    /* 92% laisse de l'air sur les côtés (vs 98% trop large) */
    width: 86% !important;
    margin-left: auto !important;
    /* Centre le contenu */
    margin-right: auto !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* Force le conteneur principal à occuper 100% de la largeur de l'écran */
.home.page-id-618 [class*="ct-container"] > article,
.archive.woocommerce [class*="ct-container"],
.archive.woocommerce [class*="ct-container"] > article,
.archive.woocommerce main {
    max-width: 100% !important;
    width: 100% !important;
    margin-inline: 0 !important;
}

/* Ajout de marges internes confortables sur les côtés pour éviter que le contenu ne colle aux bords */
.archive.woocommerce [class*="ct-container"] {
    padding-left: 60px !important;
    padding-right: 60px !important;
    box-sizing: border-box !important;
}

@media (max-width: 768px) {
    .archive.woocommerce [class*="ct-container"] {
        padding-left: 25px !important;
        padding-right: 25px !important;
    }
}

/* Permet aux sections Elementor Pleine Largeur de s'étendre d'un bord à l'autre sans contrainte de marge sur la page d'accueil */
.home.page-id-618 .elementor-section.elementor-section-full_width {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 2. GRILLE ULTRA-COMPACTE (5px) */
.woocommerce ul.products,
.woocommerce-page ul.products,
.elementor-widget-woocommerce-products ul.products {
    display: grid !important;
    grid-gap: 5px !important;
    gap: 5px !important;
    padding: 0 !important;
}

/* 3. NETTOYAGE CONTENEURS PRODUITS */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    float: none !important;
    border: none !important;
    text-align: center !important;
    overflow: hidden !important;
}

/* 4. IMAGES (Remplissage naturel) */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product .image-wrap img {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    margin: 0 auto !important;
    height: auto !important;
}

/* --- STYLE DES TITRES (Uniformisation) --- */

/* 5. Titre Français */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #333 !important;
    line-height: 1.4 !important;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 42px;
    margin-bottom: 2px !important;
    padding-top: 5px !important;
}

/* 6. Titre Arabe */
.woocommerce ul.products li.product .titre-arabe {
    font-family: 'Amiri', 'Traditional Arabic', serif;
    font-size: 15px !important;
    color: #7a7a7a !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 42px;
    margin-top: 2px !important;
    margin-bottom: 5px !important;
    text-decoration: none !important;
}

/* 7. Prix */
.woocommerce ul.products li.product .price {
    color: #000 !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    display: block !important;
}





/* fin boutique ----------------------------------------------------------- */






/* début footer ----------------------------------------------------------- */



/* style du menu footer */
.hfe-menu-item {
    padding-left: 0px !important;
}



/* fin footer ----------------------------------------------------------- */






/* début carousel produit ----------------------------------------------------------- */




/* faire dispaitre la mention de la catégorie */
.elementor-618 .elementor-element.elementor-element-a8b6da4 .wpr-grid-product-categories .inner-block {
    display: none !important;
}


/* mettre de l'espace au-dessus des points */
#slick-slide06>div>article>div>div.wpr-grid-item-below-content.elementor-clearfix {
    margin-bottom: 40px !important;
}





/* cible le wrapper swiper du carousel marqué avec ta classe */
.safi-arabic-carousel .swiper {
    /* ajuste les bornes selon ton design/cartes */
    min-height: clamp(100px, 48vw, 560px);
    position: relative;
    /* pour recentrer les flèches */
}

.safi-arabic-carousel .swiper-button-prev,
.safi-arabic-carousel .swiper-button-next {
    top: 50% !important;
    transform: translateY(-50%);
}


.titre-arabe {
    padding-bottom: 10px !important;
    line-height: 1.6;
    /* clé : > 1.4 pour Amiri/Scheherazade */

}




/* Limiter les titres principaux */
.woocommerce-loop-product__title,
.eael-product-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 2.8em;
    /* adapter à ton line-height */
}

/* Limiter le titre arabe injecté */
.titre-arabe {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    /* max 1 ligne */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 1.4em;
    /* adapter à ton line-height */
}


/* EAEL Woo Product Carousel – badge PROMO compact, rectangle */
.eael-woo-product-carousel-container .image-wrap .eael-onsale.sale-preset-5 {
    position: absolute !important;
    top: 40px !important;
    left: 10px !important;
    /* mets right:10px; left:auto; si tu veux à droite */
    z-index: 20 !important;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    background: red !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    /* ↓ taille texte */
    line-height: 1.2 !important;
    /* compact */
    padding: 2px 6px !important;
    /* très peu de marge interne */

    border-radius: 0 !important;
    /* angles carrés */
    transform: none !important;

    /* neutralise les dimensions forcées du preset */
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
}

/* supprime les triangles/pseudos du preset 5 */
.eael-woo-product-carousel-container .image-wrap .eael-onsale.sale-preset-5::before,
.eael-woo-product-carousel-container .image-wrap .eael-onsale.sale-preset-5::after {
    content: none !important;
    display: none !important;
}




/* fin carousel produit ----------------------------------------------------------- */









/* début page des savants ----------------------------------------------------------- */



#post-2221>div.hero-section.is-width-constrained>header {
    display: none;
}


body.elementor-page-2221 #main>div {
    padding-top: 0px !important;
}


/* pour le h1 de annonce cours et assise */
.page-id-308 h1 {
    display: none !important;
}


/* fin page des savants ----------------------------------------------------------- */







/* début page produit ----------------------------------------------------------- */



/* Style du titre arabe sous le titre produit */
.single-product .titre-arabe {

    font-size: 1.8em; font-weight: 400;
    line-height: 1.6;
    /* clé : > 1.4 pour Amiri/Scheherazade */
    display: block;
    /* garantit une ligne propre */
    padding: 4px 10px 6px;
    /* un peu d'air */
    margin-top: 6px;
    text-align: center;
    direction: rtl;
    overflow: visible;
    /* au cas où un parent force hidden */
    box-sizing: content-box;
    /* facultatif : éviter un calcul serré */
    -webkit-font-smoothing: antialiased;
    /* optionnel */
}


/* Centrer le titre H1 des pages produits */
.single-product h1.product_title {
    text-align: center;
}


/* pour le stock  */
#product-1601>div.product-entry-wrapper.is-width-constrained>div.summary.entry-summary.entry-summary-items>div.ct-product-add-to-cart>form>div.single_variation_wrap>div.woocommerce-variation.single_variation>div.woocommerce-variation-availability>p {
    color: green !important;
}


/* pour les couleurs du choix */
.safi-color-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    margin-left: 8px;
    vertical-align: middle;
}

.safi-color-swatch-radio {
    display: inline-block;
    margin-left: 8px;
    vertical-align: middle;
}



/* Taille du prix uniquement sur la page produit */
.single-product .summary .price {

    font-size: 34px !important;
    /* Ajuste la taille selon ton goût */
}





/* fin paga produit ----------------------------------------------------------- */