body.ce-kit-1{--e-global-color-a8d4fa7:#6ec1e4;--e-global-color-2fb30112:#54595f;--e-global-color-cdf76af:#7a7a7a;--e-global-color-6847dc60:#61ce70;--e-global-color-2fba8526:#4054b2;--e-global-color-63a9d9dd:#23a455;--e-global-color-3fd7fd3d:#000;--e-global-color-2ecac225:#fff;color:#2D3029;}body.ce-kit-1 p{margin-bottom:20px;}a, .elementor a{color:#3D5A3D;font-family:"Outfit", sans-serif;font-size:16px;font-weight:400;font-style:normal;line-height:1.7em;}a:hover, .elementor a:hover{color:#C67B5C;}body.ce-kit-1 h1{color:#3D5A3D;font-family:"Cormorant Garamond", sans-serif;font-size:56px;font-weight:500;line-height:1.1em;}body.ce-kit-1 h2{color:#3D5A3D;font-family:"Cormorant Garamond", sans-serif;font-size:40px;font-weight:500;line-height:1.2em;}body.ce-kit-1 h3{color:#3D5A3D;font-family:"Cormorant Garamond", sans-serif;font-size:28px;font-weight:500;line-height:1.3em;}body.ce-kit-1 h4{color:#3D5A3D;font-family:"Outfit", sans-serif;font-size:22px;font-weight:500;line-height:1.4em;}body.ce-kit-1 h5{color:#3D5A3D;font-family:"Outfit", sans-serif;font-size:18px;font-weight:500;line-height:1.4em;}body.ce-kit-1 h6{color:#3D5A3D;font-family:"Outfit", sans-serif;font-size:14px;font-weight:500;line-height:1.4em;}body.ce-kit-1 .ce-display-small{color:#3D5A3D;font-family:"Cormorant Garamond", sans-serif;font-size:36px;font-weight:500;}body.ce-kit-1 .ce-display-medium{color:#3D5A3D;font-family:"Cormorant Garamond", sans-serif;font-size:48px;font-weight:500;}body.ce-kit-1 .ce-display-large{color:#3D5A3D;font-family:"Cormorant Garamond", sans-serif;font-size:64px;font-weight:500;}body.ce-kit-1 .ce-display-xl{color:#3D5A3D;font-family:"Cormorant Garamond", sans-serif;font-size:80px;font-weight:500;}body.ce-kit-1 .ce-display-xxl{color:#3D5A3D;font-size:96px;font-weight:500;}.elementor-button{font-family:"Outfit", sans-serif;font-weight:500;text-transform:uppercase;font-style:normal;text-decoration:none;line-height:1.4em;letter-spacing:1.5px;--ce-bg-color:#7D9A78;background-color:var(--ce-bg-color);border-style:none;}.elementor-button, a.elementor-button:not(#e){color:#FAF8F5;}.elementor-button:is(:hover, :focus), a.elementor-button:not(#e):is(:hover, :focus){color:#FAF8F5;}.elementor-button:is(:hover, :focus){--ce-bg-color:#3D5A3D;}.elementor-button.elementor-size-sm{font-size:14px;padding:14px 28px 14px 28px;border-radius:4px 4px 4px 4px;}.elementor-button-primary .elementor-button, .elementor-button-primary a.elementor-button:not(#e){color:#FAF8F5;}.elementor-button-primary .elementor-button{--ce-bg-color:#3D5A3D;background-color:var(--ce-bg-color);}.elementor-button-primary .elementor-button:is(:hover, :focus), .elementor-button-primary a.elementor-button:not(#e):is(:hover, :focus){color:#FAF8F5;}.elementor-button-primary .elementor-button:is(:hover, :focus){--ce-bg-color:#C67B5C;}.elementor-button-primary .elementor-button.elementor-size-sm{padding:16px 36px 16px 36px;border-radius:4px 4px 4px 4px;}.elementor-button-secondary .elementor-button{font-family:"Outfit", sans-serif;font-weight:500;text-transform:uppercase;letter-spacing:1.5px;}.elementor-button-secondary .elementor-button, .elementor-button-secondary a.elementor-button:not(#e){color:#3D5A3D;}.elementor-button-secondary .elementor-button:is(:hover, :focus), .elementor-button-secondary a.elementor-button:not(#e):is(:hover, :focus){color:#FAF8F5;}.elementor-button-secondary .elementor-button:is(:hover, :focus){--ce-bg-color:#3D5A3D;box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);}.elementor-button-secondary .elementor-button.elementor-size-sm{font-size:14px;padding:12px 28px 12px 28px;border-radius:1px 1px 1px 1px;}.btn:not(.btn-primary, .btn-secondary){font-family:"Outfit", sans-serif;font-size:14px;font-weight:500;text-transform:uppercase;line-height:1.4em;letter-spacing:1.5px;background-color:#7D9A78;padding:12px 28px 12px 28px;border-radius:4px 4px 4px 4px;}.btn:not(.btn-primary, .btn-secondary), a.btn:not(.btn-primary, .btn-secondary){color:#FAF8F5;}.btn:not(.btn-primary, .btn-secondary):is(:hover, :active, :focus), a.btn:not(.btn-primary, .btn-secondary):is(:hover, :focus){color:#FAF8F5;}.btn:not(.btn-primary, .btn-secondary):is(:hover, :active, :focus){background-color:#3D5A3D;}.btn-primary{font-family:"Outfit", sans-serif;font-size:15px;font-weight:500;text-transform:uppercase;letter-spacing:1.5px;background-color:#3D5A3D;padding:16px 36px 16px 36px;border-radius:4px 4px 4px 4px;}.btn-primary, a.btn-primary{color:#FAF8F5;}.btn-primary:is(:hover, :active, :focus), a.btn-primary:is(:hover, :focus){color:#FAF8F5;}.btn-primary:is(:hover, :active, :focus){background-color:#C67B5C;}.btn-secondary{font-family:"Outfit", sans-serif;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:1.5px;padding:12px 28px 12px 28px;border-radius:4px 4px 4px 4px;}.btn-secondary, a.btn-secondary{color:#3D5A3D;}.btn-secondary:is(:hover, :active, :focus), a.btn-secondary:is(:hover, :focus){color:#FAF8F5;}.btn-secondary:is(:hover, :active, :focus){background-color:#3D5A3D;}.elementor-element{--widgets-space-row:20px;--widgets-space-column:20px;}{}header.page-header{display:var(--page-title-display);}@property --e-global-color-primary { syntax: '<color>'; initial-value: #6ec1e4; inherits: false }
@property --e-global-color-secondary { syntax: '<color>'; initial-value: #54595f; inherits: false }
@property --e-global-color-text { syntax: '<color>'; initial-value: #7a7a7a; inherits: false }
@property --e-global-color-accent { syntax: '<color>'; initial-value: #61ce70; inherits: false }
@property --e-global-color-a8d4fa7 { syntax: '<color>'; initial-value: #6ec1e4; inherits: false }
@property --e-global-color-2fb30112 { syntax: '<color>'; initial-value: #54595f; inherits: false }
@property --e-global-color-cdf76af { syntax: '<color>'; initial-value: #7a7a7a; inherits: false }
@property --e-global-color-6847dc60 { syntax: '<color>'; initial-value: #61ce70; inherits: false }
@property --e-global-color-2fba8526 { syntax: '<color>'; initial-value: #4054b2; inherits: false }
@property --e-global-color-63a9d9dd { syntax: '<color>'; initial-value: #23a455; inherits: false }
@property --e-global-color-3fd7fd3d { syntax: '<color>'; initial-value: #000; inherits: false }
@property --e-global-color-2ecac225 { syntax: '<color>'; initial-value: #fff; inherits: false }
/* Start custom CSS for page-settings *//* ==========================================================================
   MySo 3.0 — CSS personnalisé complet (Creative Elements)
   Dernière mise à jour : 28 avril 2026
   
   Contenu :
   1. Sous-catégories (override cadres turquoise)
   2. Menu catégories (doublons +/-)
   3. Checkbox Faceted Search (Sage MySo)
   4. Masquer tuile Programme de Fidélité
   6. Fix formulaire inscription (cases à cocher invisibles)
   
   ⚠️ SECTION 5 RETIRÉE LE 22.04.26
   Les icônes Mon Compte Vendeur + Contact Boutique sont désormais gérées
   directement dans le module ETS Marketplace (front.css) pour cohérence
   avec la page compte vendeur. Voir MODIFICATIONS_MODULES_MYSO.md.
   ========================================================================== */


/* ==========================================================================
   1. SOUS-CATÉGORIES — override des cadres turquoise
   ========================================================================== */

#subcategories.card.card-block {
    background: #faf8f5 !important;
    border: 1px solid #e8e2d9 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

.subcategory-heading {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    color: #3d5a3d !important;
    font-weight: 500 !important;
}

.subcategories-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.subcategories-list li {
    border: 1px solid #e8e2d9 !important;
    border-radius: 8px !important;
    padding: 12px !important;
    background: #ffffff !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
}

.subcategories-list li:hover {
    border-color: #7d9a78 !important;
    box-shadow: 0 4px 16px rgba(125, 154, 120, 0.15) !important;
    transform: translateY(-2px) !important;
}

.subcategory-image {
    border: none !important;
    outline: none !important;
    border-radius: 6px !important;
    overflow: hidden !important;
}

.subcategory-image a.img,
.subcategory-image a {
    display: block !important;
    border: none !important;
    outline: none !important;
    text-decoration: none !important;
}

.subcategory-image a.img:hover,
.subcategory-image a.img:focus,
.subcategory-image a.img:active,
.subcategory-image:hover,
.subcategory-image:focus,
.subcategory-image:focus-within {
    border: none !important;
    outline: 2px solid #7d9a78 !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

.subcategories-list li h5 {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-weight: 500 !important;
    font-size: 18px !important;
    color: #3d5a3d !important;
    margin: 12px 0 6px 0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.subcategories-list li h5 a {
    color: #3d5a3d !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.subcategories-list li h5 a:hover {
    color: #c67b5c !important;
}

.cat_desc {
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    color: #5c5f55 !important;
    line-height: 1.5 !important;
}

.subcategories-list *:focus {
    outline-color: #7d9a78 !important;
}


/* ==========================================================================
   2. MENU CATÉGORIES — doublons +/- et style général
   ========================================================================== */

#category-tree .navbar-toggler,
.block-categories .arrows .arrow-down + .arrow-right,
.block-categories .category-sub-menu .collapse-icons .remove {
    display: none !important;
}

.block-categories .arrows,
.block-categories .collapse-icons {
    color: #7d9a78 !important;
    font-size: 14px !important;
    cursor: pointer !important;
}

.block-categories .collapse-icons .add,
.block-categories .collapse-icons .remove {
    color: #7d9a78 !important;
    transition: transform 0.2s ease !important;
}

.block-categories .collapse-icons[aria-expanded="true"] .add {
    display: none !important;
}

.block-categories .collapse-icons[aria-expanded="false"] .remove {
    display: none !important;
}

.block-categories .category-sub-menu a,
.block-categories li a {
    font-family: 'Outfit', sans-serif !important;
    color: #2d3029 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.block-categories .category-sub-menu a:hover,
.block-categories li a:hover {
    color: #3d5a3d !important;
}

.block-categories h2,
.block-categories .h4 {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    color: #3d5a3d !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    font-size: 16px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #e8e2d9 !important;
}


/* ==========================================================================
   3. CHECKBOX FACETED SEARCH — Sage MySo avec ✓ blanc
   ========================================================================== */

.facet-label .custom-checkbox {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    border: 1.5px solid #7d9a78 !important;
    border-radius: 3px !important;
    background: #ffffff !important;
    position: relative !important;
    vertical-align: middle !important;
    margin-right: 8px !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.facet-label .custom-checkbox input[type="checkbox"],
.facet-label input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
}

.facet-label .custom-checkbox svg,
.facet-label .custom-checkbox i,
.facet-label .custom-checkbox span {
    display: none !important;
}

.facet-label:has(input:checked) .custom-checkbox,
.facet-label.active .custom-checkbox,
.facet li.active .facet-label .custom-checkbox,
.facet-label input:checked ~ .custom-checkbox,
.facet-label .custom-checkbox.active {
    background: #7d9a78 !important;
    border-color: #7d9a78 !important;
}

.facet-label:has(input:checked) .custom-checkbox::after,
.facet-label.active .custom-checkbox::after,
.facet li.active .facet-label .custom-checkbox::after,
.facet-label input:checked ~ .custom-checkbox::after,
.facet-label .custom-checkbox.active::after {
    content: '' !important;
    position: absolute !important;
    left: 5px !important;
    top: 1px !important;
    width: 4px !important;
    height: 9px !important;
    border: solid #ffffff !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
    display: block !important;
}

.facet-label {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    cursor: pointer !important;
    padding: 4px 0 !important;
    margin-bottom: 2px !important;
}

.facet-label a.search-link,
.facet-label a._gray-darker {
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    color: #2d3029 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
    padding: 0 !important;
    margin: 0 !important;
}

.facet-label a.search-link:hover,
.facet-label a._gray-darker:hover {
    color: #3d5a3d !important;
}

.facet li.active .facet-label a,
.facet-label:has(input:checked) a {
    color: #3d5a3d !important;
    font-weight: 500 !important;
}

.facet-title,
.facet h2,
#search_filters .facet-title {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    color: #3d5a3d !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

#search_filters_wrapper h4,
#search_filters h4 {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    color: #3d5a3d !important;
    font-weight: 500 !important;
    letter-spacing: 1px !important;
}


/* ==========================================================================
   4. MASQUER la tuile Programme de Fidélité
   ========================================================================== */

#aem-loyalty-link {
    display: none !important;
}


/* ==========================================================================
   6. FIX FORMULAIRE INSCRIPTION (28 avril 2026 - v2)
   
   Le HTML genere par PrestaShop pour les checkboxes du formulaire ressemble a :
   <label>
     <input type="checkbox" name="..." style="opacity:0">  <- vraie case (invisible)
     <span>                                                 <- faux carre 18x18 visuel
       <i class="material-icons checkbox-checked">B</i>     <- icone "checked"
     </span>
     Texte du label
   </label>
   
   Le span sans classe et l icone simulent visuellement la case mais le clic ne
   declenche rien sur la vraie case si elle est en opacity:0.
   
   Solution : on rend la VRAIE case visible et on masque le faux carre + icone.
   ========================================================================== */

/* 6.1 - Rendre la VRAIE case visible et cliquable */
#customer-form input[type="checkbox"] {
    opacity: 1 !important;
    width: 18px !important;
    height: 18px !important;
    pointer-events: auto !important;
    position: relative !important;
    margin-right: 8px !important;
    vertical-align: middle !important;
    cursor: pointer !important;
    accent-color: #7d9a78 !important;
}

/* 6.2 - Masquer le faux carre decoratif + icone Material par-dessus */
/* On cible TOUS les span descendants directs d un label dans le formulaire */
#customer-form label > span,
#customer-form .custom-checkbox > span {
    display: none !important;
}

/* 6.3 - Filet de securite : masquer toute icone Material liee aux checkboxes */
#customer-form i.material-icons,
#customer-form i.checkbox-checked,
#customer-form .checkbox-checked {
    display: none !important;
}

/* 6.4 - Reset du .custom-checkbox sur formulaire (override section 3) */
#customer-form .custom-checkbox {
    display: inline !important;
    width: auto !important;
    height: auto !important;
    border: none !important;
    background: transparent !important;
    margin-right: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}/* End custom CSS */