/*
Theme Name: DomaineDelHess
Theme URI: https://www.domaine-hess.com/
Description: Thème enfant d'Astra pour Le Domaine de l'Hess
Author: Dev Roofline
Author URI: https://www.domaine-hess.com/
Template: astra
Version: 1.0.0
*/

/**
 * ==========================================================
 * Domaine de l'Hess - CSS Global
 * ==========================================================
 *
 * Contient :
 * 1. Header / Navigation
 * 2. Recherche produits
 * 3. Avis clients
 * 4. FAQ
 * 5. Formulaire de contact
 * 6. Footer
 * 7. Responsive
 *
 * ==========================================================
 */

.woocommerce-NoticeGroup {
    margin-top: 200px !important;
}

/* ==========================================================
   1. Header / Navigation
   ========================================================== */

#nav,
#panier-container-nav {
    background-color: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(3px) !important;
}

/* Mini panier Elementor */
.elementor-menu-cart__main {
    margin-top: 13px !important;
}

/* Mega menu */
#ekit-megamenu-header {
    display: flex;
    justify-content: center;
}

/* Menu principal */
#menu-header {
    display: flex;
    gap: 40px;
}

/* Effet de rebond quantité panier */
@keyframes cartBounce {
  0%   { transform: translateY(0); }
  20%  { transform: translateY(-8px); }
  40%  { transform: translateY(0); }
  60%  { transform: translateY(-4px); }
  80%  { transform: translateY(0); }
  100% { transform: translateY(0); }
}

.cart-bounce {
  animation: cartBounce 0.6s ease !important;
  will-change: transform !important;
}




/* ==========================================================
   2. Recherche produits
   ========================================================== */

.search-btn {
    padding: 0 5px !important;
}

.shopengine-search-result-container {
    min-width: 300px !important;
    margin-top: 5px !important;
}

.search-produit-mobile .shopengine-search-result-container {
    height: 100vh !important;
}



/* ==========================================================
   3. Avis clients
   ========================================================== */

/* Bulle newsletter - container interne non cliquable */
.elementor-element-91746ae {
    pointer-events: none !important;
}

/* Mais les elements interactifs restent cliquables */
.elementor-element-91746ae a,
.elementor-element-91746ae button,
.elementor-element-91746ae input {
    pointer-events: auto !important;
}
.ast-shop-product-out-of-stock {
    display: none !important;
}

/* Message indisponibilite personnalise sur les fiches produit */
.stock.hess-masque {
    display: none !important;
}

.stock.hess-indisponible {
    font-family: 'Comfortaa', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #9A5033;
    font-style: italic;
}

/* Bloc message indispo WYSIWYG */
.hess-indispo-message {
    margin-top: 12px;
}

.hess-indispo-message p {
    font-family: 'Comfortaa', sans-serif;
    font-size: 14px;
    color: #9A5033;
    font-weight: 700;
    line-height: 1.2rem;
    font-style: italic;
    margin-bottom: 20px;
}

.hess-indispo-btn {
    display: inline-block;
    padding: 10px 10px;
    background: #4A505E;
    color: #F8F2E3 !important;
    font-family: 'Comfortaa', sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2rem;
    border-radius: 4px;
    text-decoration: none;
    transition: background 0.2s ease;
}

.hess-indispo-btn:hover {
    background: #9A5033;
}
.ti-inner,
.ti-inner .ti-name,
.ti-inner .ti-date,
.ti-inner .ti-review-text-container,
.ti-inner .ti-read-more,
.ti-inner .ti-read-more-active,
.ti-inner .ti-read-more span,
.ti-controls .ti-next,
.ti-controls .ti-prev,
.ti-controls .ti-next svg,
.ti-controls .ti-prev svg,
.ti-controls .ti-next path,
.ti-controls .ti-prev path {
    color: #FFFBF3 !important;
    fill: #FFFBF3 !important;
    stroke: #FFFBF3 !important;
}

.ti-stars,
.ti-rating-text {
    display: none !important;
}

.ti-name {
    padding-bottom: 20px !important;
}

.ti-next,
.ti-prev,
.ti-controls .ti-next:hover,
.ti-controls .ti-prev:hover {
    background-color: transparent !important;
}



/* ==========================================================
   4. FAQ
   ========================================================== */

.faq-box {
    position: relative;

    margin-bottom: 10px;

    border-bottom: none;

    cursor: pointer;
    transition: background 1s ease;
}

/* Ligne dégradée sous chaque FAQ */
.faq-box::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 0;

    width: 100%;
    height: 1px;

    background: linear-gradient(
        to right,
        #4A505E 0%,
        #ffffff 100%
    );
}

/* Question */
.faq-box .question {
    display: flex;
    align-items: center;

    gap: 12px;
    padding: 10px 0;
}

.question > h3 {
    margin: 0;

    color: #34545E;

    font-family: "Comfortaa", sans-serif;
    font-size: 16px;
    font-weight: 600;
}

/* Réponse fermée */
.faq-box .answer {
    max-height: 0;
    overflow: hidden;

    margin-left: 10px;
    padding-top: 0;

    opacity: 0;

    color: #4A505E;

    font-family: "Comfortaa", sans-serif;
    font-size: 14px;
    line-height: 18px;

    transition:
        max-height 1s ease-in-out,
        opacity 0.8s ease-in-out,
        padding 0.5s ease-in-out;
}

/* Réponse ouverte */
.faq-box.open .answer {
    max-height: 500px;

    padding-top: 10px;
    padding-bottom: 10px;

    opacity: 1;
}



/* ==========================================================
   5. Formulaire de contact
   ========================================================== */

#formulaire_contact input,
#formulaire_contact textarea {
    padding: 10px 10px 10px 0;
}

#formulaire_contact button {
    margin-top: 20px;
}

.elementor-message::before {
    color: green;
}



/* ==========================================================
   Bulle newsletter flottante
   ========================================================== */

.bulle-newsletter-wrap {
    position: fixed;
    bottom: 5px;
    right: 5px;
    z-index: 9999;

    opacity: 0;
    transform: scale(0.4);
    pointer-events: none;

    transform-origin: bottom right;
    transition:
        opacity 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
        transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Visible apres scroll */
.bulle-newsletter-wrap.is-visible {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

/* Pulsation uniquement quand ouverte */
.bulle-newsletter-wrap.is-visible:not(.is-closed) .elementor-element-619c3ce {
    animation: bulleGonfle 5s ease-in-out infinite;
    animation-delay: 2s;
}

@keyframes bulleGonfle {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.04); }
    100% { transform: scale(1); }
}

/* --- Bouton fermer --- */
.bulle-newsletter-close {
    position: absolute;
    top: -235px;
    right: 115px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #4A505E;
    color: #F8F2E3;
    font-size: 15px;
    line-height: 24px;
    text-align: center;
    cursor: pointer;
    z-index: 10000;
    border: 1px solid #F8F2E3;
    transition: background 0.2s;
    user-select: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.bulle-newsletter-close:hover {
    background: #9A5033;
}

@media (max-width: 1024px) {
    .bulle-newsletter-close {
        top: -135px;
        right: 90px;
    }
    /* Forcer forme carree quand bulle fermee sur tablette */
    .bulle-newsletter-wrap[style*="60px"] {
        --padding-top: 10px !important;
        --padding-bottom: 10px !important;
        --padding-left: 10px !important;
        --padding-right: 10px !important;
        padding: 10px !important;
    }
}

@media (max-width: 768px) {
    .bulle-newsletter-close {
        top: -190px;
        right: 105px;
    }
}

/* --- Etat ferme : petit bouton rond discret --- */
.bulle-newsletter-wrap.is-closed {
    opacity: 1 !important;
    pointer-events: auto !important;
    cursor: pointer;
    transition:
        opacity 0.4s ease,
        transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Masquer le contenu interne quand ferme */
.bulle-newsletter-wrap.is-closed .elementor-element-619c3ce > * {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Reduire la bulle en petit rond */
.bulle-newsletter-wrap.is-closed .elementor-element-619c3ce {
    animation: none !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    cursor: pointer;
    transition:
        width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        border-radius 0.4s ease;
}

.bulle-newsletter-wrap.is-closed .bulle-newsletter-close {
    display: none;
}

.bulle-newsletter-wrap.is-closed .elementor-element-619c3ce {
    animation: none;
}
/*
@media (max-width: 1024px) {
    .bulle-newsletter-wrap {
        right: 25px;
    }
}*/


/* ==========================================================
   Scroll margin pour les ancres (compense la hauteur du menu sticky) */
[id] {
    scroll-margin-top: 100px;
}

/* Classe utilitaire couleur beige */
.color-beige {
    color: #E1D5B3;
}

/* ==========================================================
   Lire plus mobile — .rm-hidden
   ========================================================== */

@media (max-width: 768px) {

    .rm-hidden {
        display: none;
    }

    .rm-hidden.is-open {
        display: block;
    }

    .rm-toggle {
        display: inline-block;
        margin-top: 8px;
        font-family: 'Comfortaa', sans-serif;
        font-size: 13px;
        font-weight: 700;
        color: #9A5033;
        cursor: pointer;
        text-decoration: underline;
        text-underline-offset: 3px;
        background: none;
        border: none;
        padding: 0;
    }

}

@media (min-width: 769px) {

    .rm-toggle {
        display: none;
    }

    .rm-hidden {
        display: block !important;
    }

}

.atelier-infos {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.atelier-info-card {
    background: #FFFBF3;
    border: 1px solid #E1D5B3;
    border-radius: 8px;
    padding: 8px 14px;
    font-family: 'Comfortaa', sans-serif;
    font-size: 12px;
    color: #4A505E;
    line-height: 1.4;
}

.atelier-info-card--accent {
    background: #F8F2E3;
    border-color: #9A5033;
}

.atelier-info-label {
    font-weight: 700;
    color: #4A505E;
}

.atelier-info-value {
    font-weight: 400;
    color: #4A505E;
}

/* Menu footer
   NOTE : les classes .menu-item-XXXX sont des IDs WordPress generés dynamiquement.
   Si le menu est recree, ajouter manuellement la classe CSS "footer-menu-item"
   sur chaque element depuis Apparence > Menus > Options d'ecran > Classes CSS.
   Les selecteurs ci-dessous resteront fonctionnels en attendant cette migration. */
.menu-item-3722,
.menu-item-3720,
.menu-item-3719,
.menu-item-3721 {
    margin-left: 20px !important;
}

.menu-item-3722 a,
.menu-item-3720 a,
.menu-item-3719 a,
.menu-item-3721 a {
    font-size: 14px !important;
    font-weight: 300 !important;
}



/* ==========================================================
   7. Responsive
   ========================================================== */

/* Desktop intermédiaire */
@media (max-width: 1140px) and (min-width: 1024px) {

    #menu-header {
        gap: 20px;
    }

}

/* Desktop */
@media (min-width: 1024px) {

    #menu-nav {
        min-width: 690px;
    }

}

/* Tablette */
@media (max-width: 1024px) {

    #menu-header {
        display: block;
        margin-top: 55px;
    }

    .ekit-wid-con .elementskit-menu-container,
    .elementskit-menu-overlay {
        top: -150px !important;
        width: 100vw !important;
        height: 110vh !important;
    }

    .elementskit-menu-overlay {
        left: -200% !important;
    }

    #menu-nav .elementskit-menu-offcanvas-elements {
        width: 110vh !important;
        height: 110vh !important;
    }

    .ekit-wid-con .elementskit-navbar-nav {
        min-height: 100vh !important;
    }

    .elementskit-menu-offcanvas-elements.active,
    .elementskit-menu-overlay.active {
        left: -40px !important;
    }

}

/* Tablette uniquement */
@media (max-width: 1024px) and (min-width: 768px) {

    .recherche-produit {
        min-width: 300px !important;
    }

}

/* Mobile */
@media (max-width: 768px) {

    .elementskit-menu-offcanvas-elements.active,
    .elementskit-menu-overlay.active {
        left: -15px !important;
    }

    .elementskit-menu-overlay {
        left: -300% !important;
    }

}

/* Carousel page prestations - masquer debordement image suivante */
.page-id-4344 .elementor-widget-image-carousel .swiper-container,
.page-id-4344 .elementor-widget-image-carousel .swiper {
    overflow: hidden !important;
}

/* Carousel page prestations - masquer debordement image suivante */
.page-id-4344 .elementor-widget-image-carousel {
    overflow: hidden !important;
}

.page-id-4344 .elementor-image-carousel.swiper-wrapper {
    gap: 1px;
}

/* Slider widget prestations - border radius */
.page-id-4344 .elementor-slides-wrapper {
    border-radius: 8px 100px 8px 8px !important;
    overflow: hidden !important;
}

/* Page categorie Cosmetiques - opacite image hero a 0.45 */
.term-cosmetiques #bg-image {
    --overlay-opacity: 0.4 !important;
}

/* Slider prestations - border radius mobile
   overflow:hidden sur le slide parent pour couper le background-image */
@media (max-width: 768px) {
    .elementor-repeater-item-a66cf97 {
        border-radius: 8px 100px 8px 8px !important;
        overflow: hidden !important;
    }
    .elementor-repeater-item-a66cf97 .swiper-slide-bg {
        border-radius: 8px 100px 8px 8px !important;
    }
}

/* Masquer le menu dropdown duplique dans le footer */
.elementor-element-a887472 .elementor-nav-menu--dropdown {
    display: none !important;
}

/* Supprimer les puces du menu footer */
.elementor-element-a887472 .elementor-nav-menu li {
    list-style: none !important;
}

.elementor-element-a887472 .elementor-nav-menu {
    padding-left: 0 !important;
}