@font-face { font-family: 'Apollo'; src: url('../fonts/APOLLO.otf') format('opentype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Avenir'; src: url('../fonts/Avenir.ttc') format('truetype'); font-weight: normal; font-style: normal; } .iqitfake{ display: none;} /*** Style mixins ***/ /*** Variables mixins and functions ***/ .container, .elementor-section.elementor-section-boxed > .elementor-container { max-width: 1380px; } a:link:not(.nav-link):not(.btn), a:visited:not(.nav-link):not(.btn) { color: #000000; } a:hover:not(.nav-link):not(.btn) { color: #777777; } .pagination .page-list li:hover { border-color: #777777; } .pagination .page-list li.current { border-color: #777777; } .pagination .page-list li.current a { color: #777777; } #mobile-header { border-bottom: solid 1px #e3e3e3; } #mobile-header .mobile-main-bar { padding-top: 2.8571428571rem; padding-bottom: 2.8571428571rem; } #mobile-header .m-nav-btn { color: #000000; } #mobile-header .m-nav-btn:hover { color: #777777; } #mobile-header .m-nav-btn > span { display: none !important; } #mobile-header .mobile-buttons-bar { background: #c9c9c9; } html { font-size: 14px; } @media (max-width: 767px) { html { font-size: 12px; } } body { line-height: 1.4rem; } body { font-family: 'Avenir', sans-serif; } #blockcart-content { background: #f4f2f2; border: none 1px; box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.15); } /*** Secondary button ***/ .btn-secondary, .btn-secondary.disabled, .btn-secondary:disabled, .bootstrap-touchspin .group-span-filestyle .btn-touchspin, .group-span-filestyle .bootstrap-touchspin .btn-touchspin, .group-span-filestyle .btn-default { background: #f8f8f8; color: #333333; border: none 1px #f0f0f0; } .btn-secondary:hover, .btn-secondary:focus, .btn-secondary :active, .btn-secondary.disabled:hover, .btn-secondary.disabled:focus, .btn-secondary.disabled :active, .btn-secondary:disabled:hover, .btn-secondary:disabled:focus, .btn-secondary:disabled :active, .bootstrap-touchspin .group-span-filestyle .btn-touchspin:hover, .bootstrap-touchspin .group-span-filestyle .btn-touchspin:focus, .bootstrap-touchspin .group-span-filestyle .btn-touchspin :active, .group-span-filestyle .bootstrap-touchspin .btn-touchspin:hover, .group-span-filestyle .bootstrap-touchspin .btn-touchspin:focus, .group-span-filestyle .bootstrap-touchspin .btn-touchspin :active, .group-span-filestyle .btn-default:hover, .group-span-filestyle .btn-default:focus, .group-span-filestyle .btn-default :active { background: #feeaf3; color: #2e2e2e; } .btn-secondary:not(:disabled):not(.disabled):active { background: #feeaf3; color: #2e2e2e; } .btn-outline-secondary, .btn-outline-secondary.disabled, .btn-outline-secondary:disabled { background: #f8f8f8; color: #333333; border: solid 1px #e3e3e3; } .btn-outline-secondary:hover, .btn-outline-secondary.disabled:hover, .btn-outline-secondary:disabled:hover { background: #feeaf3; color: #2e2e2e; border: solid 1px #e3e3e3; } /*** Primary button ***/ .btn-primary, .btn-primary.disabled, .btn-primary:disabled { background: #fe3f72; color: #ffffff; border: none 1px; } .btn-primary:hover, .btn-primary:focus, .btn-primary :active, .btn-primary.disabled:hover, .btn-primary.disabled:focus, .btn-primary.disabled :active, .btn-primary:disabled:hover, .btn-primary:disabled:focus, .btn-primary:disabled :active { background: #feeaf3; color: #000000; border-color: #000000; } .btn-primary:not(:disabled):not(.disabled):active { background: #feeaf3; color: #000000; border-color: #000000; } #wrapper .breadcrumb { background: #ffffff; padding-top: 0.8571428571rem; padding-bottom: 0.8571428571rem; padding-left: 0.7142857143rem; padding-right: 0.7142857143rem; margin-top: -3.5714285714rem; margin-bottom: 3.5714285714rem; font-size: 0.9285714286rem; font-style: normal; font-weight: normal; text-transform: none; color: #757575; } #wrapper .breadcrumb li:after { color: #757575; } #wrapper .breadcrumb a { color: #757575; } /*** Text fields ***/ .form-control { background-color: #ffffff; color: #777777; border: solid 1px #e3e3e3; } .custom-select2, .custom-select2 option { background-color: #ffffff; } .custom-select2:after { color: #777777; } .bootstrap-touchspin .btn-touchspin { background-color: #ffffff; color: #777777; border: solid 1px #e3e3e3; } .bootstrap-touchspin .btn-touchspin:hover { color: #777777; } .form-control::-webkit-input-placeholder { color: #777777; } .form-control::-moz-placeholder { color: #777777; } .form-control:-ms-input-placeholder { color: #777777; } .form-control:-moz-placeholder { color: #777777; } .form-control:focus { color: #777777; border-color: #8a8a8a; } /*** Radio buttons and checkboxes ***/ .custom-checkbox input[type=checkbox] + span .checkbox-checked { color: #d06e6a; } .custom-radio input[type=radio]:checked + span { background-color: #d06e6a; } .custom-checkbox input[type=checkbox] + span:not(.color), .custom-radio { background: #f2f2f2; color: #d06e6a; border-color: #e3e3e3; } /*** Dropdowns ***/ .dropdown-menu, .autocomplete-suggestions { background: #ffffff; border: solid 1px #e3e3e3; } .dropdown-menu .dropdown-item, .autocomplete-suggestions .dropdown-item { color: #474747!important; border-bottom: solid 1px #e3e3e3; } .dropdown-menu .dropdown-item:focus, .dropdown-menu .dropdown-item:hover, .autocomplete-suggestions .dropdown-item:focus, .autocomplete-suggestions .dropdown-item:hover { background: rgba(71, 71, 71, 0.05); } /*** Tooltips ***/ .tooltip-inner { background: #333!important; color: white!important; } .tooltip { --bs-tooltip-bg: #333333; --bs-tooltip-color: #ffffff; } /*** Modals ***/ .modal-backdrop { background: rgba(0, 0, 0, 0.75); } .modal-content { background: #ffffff; border: solid 1px rgba(161, 161, 161, 0.25); } .js-quickview-np-btn { background: #ffffff; } /*** Notifications ***/ .ns-box { background: #ca5058; color: #ffffff; border: none 1px; } .product-price { color: #d06e6a; } .iqit-review-star { color: #e0d041; } .product-flags .product-flag { font-size: 0.7857142857rem; font-style: normal; font-weight: normal; text-transform: none; } .product-flags .discount, .product-flags .on-sale { background: #eba53d; color: #ffffff; } .product-flags .new { background: #969696; color: #ffffff; } .product-flags .online-only, .product-flags .pack { background: #e0e0e0; color: #000000; } .product-flags .out_of_stock { background: #a17738; color: #fff7f7; } .discount { background: #eba53d; color: #ffffff; } .product-available { background: #67a675; color: #ffffff; } .product-unavailable { background: #a17738; color: #fff7f7; } .alert-success a:link:not(.nav-link):not(.btn), .alert-success a:visited:not(.nav-link):not(.btn) { text-decoration: underline; } .alert-info a:link:not(.nav-link):not(.btn), .alert-info a:visited:not(.nav-link):not(.btn) { text-decoration: underline; } .alert-warning a:link:not(.nav-link):not(.btn), .alert-warning a:visited:not(.nav-link):not(.btn) { text-decoration: underline; } .alert-danger a:link:not(.nav-link):not(.btn), .alert-danger a:visited:not(.nav-link):not(.btn) { text-decoration: underline; } #iqitcompare-floating { background: #ffffff; border-top: none 1px; border-left: none 1px; border-right: none 1px; } #page-preloader { background: #ffffff; } #back-to-top { background: #fe3f72; color: #ffffff; } #back-to-top:hover { background: #333333; color: #ffffff; } #header, #checkout-header { border-top: none 1px #000000; border-bottom: none 1px #000000; } .sticky-desktop-wrapper #desktop-header.stuck-header { border-bottom: none 1px #000000; } #header .header-nav { color: #000000; background: url("/img/cms/topbackground.png") right top / contain no-repeat fixed; border-bottom: none 1px #e3e3e3; padding-top: 1.0714285714rem; padding-bottom: 1.0714285714rem; font-size: 1.0714285714rem; display: none !important; } #header .header-nav a { color: #000000; } #header .header-nav a:hover { color: #959595; } #header .header-nav .social-links._topbar { font-size: 0.8571428571rem; } #header .header-nav .social-links._topbar a:not(:hover) { color: #000000 !important; } .header-top { padding-top: 0.3571428571rem; padding-bottom: 0.3571428571rem; color: #000000; } .header-top a:not(.btn):not(.nav-link) { color: #000000; } .header-top a:not(.btn):not(.nav-link):hover { color: rgba(248, 77, 255, 0.39); } .header-top .form-search-control { background: #ffffff; color: #000000; border: solid 1px #ffffff; } .header-top input.form-search-control::-webkit-input-placeholder { color: #000000; } .header-top input.form-search-control:-moz-placeholder { color: #000000; } .header-top input.form-search-control:-ms-input-placeholder { color: #000000; } .header-top input.form-search-control:-moz-placeholder { color: #000000; } .header-top .search-btn { color: #000000; } .header-top .header-btn-w .header-btn > .icon { font-size: 1.7857142857rem; display: block; } .header-top .header-cart-default a.cart-toogle { background: #000000; color: #000000; padding: 0.6428571429rem 0.6428571429rem; } .header-top .header-cart-default a.cart-toogle:hover { color: #000000; } .header-top a.header-cart-btn:not(:hover) { color: #000000; } .sticky-desktop-wrapper #desktop-header.stuck-header, .stuck-menu { background: #ffffff; } .header-top { transition: padding 0.3s ease; } .cart-products-count-btn { background: #ff2b8d; color: #ffffff; } .desktop-header-style-1 .search-widget, .desktop-header-style-2 .search-widget { max-width: 81%; } /*** HORIZONTAL MENU ***/ #iqitmegamenu-horizontal { border-top: none 1px #e3e3e3; border-right: none 3px #38b82c; border-bottom: solid 3px #e3e3e3; border-left: none 3px #a6cc0f; } .cbp-horizontal > ul > li > a, .cbp-horizontal > ul > li > a:not([href]):not([tabindex]), .cbp-horizontal > ul > li > .cbp-main-link { line-height: 3.2142857143rem; max-width: 14.2857142857rem; color: #000000; padding-left: 1.4285714286rem; padding-right: 1.4285714286rem; border-left: none 1px #575757; } #sticky-cart-wrapper a.header-cart-btn:not(:hover) { color: #000000; } #sticky-cart-wrapper .ps-shoppingcart.side-cart #blockcart-content { top: -1.0357142857rem; } .cbp-vertical-on-top .cbp-vertical-title { line-height: 3.2142857143rem !important; } .cbp-vertical-on-top .cbp-vertical-title-text { display: none !important; } .cbp-horizontal > ul > li.cbp-hropen > a, .cbp-horizontal > ul > li.cbp-hropen > a:not([href]):not([tabindex]), .cbp-horizontal > ul > li.cbp-hropen > a:hover { background: #f4f2f2; color: #777777; } .cbp-horizontal .cbp-tab-title { font-size: 1rem; font-style: normal; font-weight: normal; text-transform: uppercase; line-height: 1em; } .cbp-horizontal .cbp-legend { background: #ca5058; color: #ffffff; } .cbp-horizontal .cbp-mainlink-icon, .cbp-horizontal .cbp-mainlink-iicon { font-size: 1.5714285714rem; max-height: 1.5714285714rem; } .cbp-horizontal > ul { text-align: center; } .cbp-horizontal > ul > li { float: none; text-align: left; } .cbp-horizontal .cbp-submenu-aindicator { display: none; } @media (max-width: 1300px) { .cbp-horizontal .cbp-tab-title { font-size: 1rem; } .cbp-horizontal > ul > li > a, .cbp-horizontal > ul > li > a:not([href]):not([tabindex]), .cbp-horizontal > ul > li > .cbp-main-link { padding-left: 0.8571428571rem; padding-right: 0.8571428571rem; } } #cbp-hrmenu .cbp-hrsub { transform: translateY(15px); } #cbp-hrmenu .cbp-hropen .cbp-hrsub { transform: translateY(0px); } #cbp-hrmenu .cbp-hrsub, #cbp-hrmenu .cbp-hrsub-level2, #cbp-hrmenu .cbp-hrsub-wrapper { transition: opacity 300ms ease-in-out, transform 300ms ease-in-out; } .container-iqitmegamenu, .iqit-megamenu-container, .cbp-hrsub-narrow, #desktop-header-container.container { position: static !important; } .cbp-hrmenu .cbp-hrsub-inner { padding-left: 0; padding-right: 0; } /*** VERTICAL MENU ***/ .cbp-vertical-on-top #cbp-hrmenu1-ul { background: #ffffff; border: solid 1px #e3e3e3; } #content-wrapper #cbp-hrmenu1 { background: #ffffff; border: solid 1px #e3e3e3; } #cbp-hrmenu1 .cbp-vertical-title { font-size: 1.2857142857rem; font-style: italic; font-weight: normal; text-transform: none; color: #ffffff; background: #000000; line-height: 3.5714285714rem; } #cbp-hrmenu1 .cbp-vertical-title:hover { color: #ffffff; background: #000000; } #cbp-hrmenu1 > ul > li > a, #cbp-hrmenu1 > ul > li > span.cbp-main-link { font-size: 1.1428571429rem; font-style: normal; font-weight: normal; text-transform: none; padding-top: 0.5714285714rem; padding-bottom: 0.5714285714rem; border-top: solid 1px rgba(227, 227, 227, 0.35); } #cbp-hrmenu1 > ul > li > a .cbp-mainlink-icon, #cbp-hrmenu1 > ul > li > a .cbp-mainlink-iicon { font-size: 1.7142857143rem; max-height: 1.7142857143rem; } #cbp-hrmenu1 > ul > li > a, #cbp-hrmenu1 > ul > li > span.cbp-main-link { color: #c9b1b1; } #cbp-hrmenu1 > ul > li.cbp-hropen > a, #cbp-hrmenu1 > ul > li.cbp-hropen > a:hover { background: #f8f8f8; color: #333333; } #cbp-hrmenu1 .cbp-legend { background: #ca5058; color: #ffffff; } #cbp-hrmenu1 .cbp-hrsub, #cbp-hrmenu1 > ul, #cbp-hrmenu1 .cbp-hrsub-level2, #cbp-hrmenu1 .cbp-hrsub-wrapper { transition: visibility 300ms ease-in-out, opacity 300ms ease-in-out; } .cbp-vert-expanded #cbp-hrmenu1 .cbp-vertical-title { color: #ffffff; background: #000000; } .cbp-not-on-top #cbp-hrmenu1-ul { position: relative; } .cbp-hrmenu.cbp-vertical .cbp-hrsub-wrapper { top: 0; margin-top: 0px !important; min-height: 100%; } .cbp-hrmenu.cbp-vertical .cbp-hrsub { min-height: 100%; } .cbp-hrmenu.cbp-vertical .cbp-show { -js-display: flex; display: flex; flex-wrap: wrap; } .cbp-hrmenu.cbp-vertical .cbp-hrsub-inner { width: 100%; } /*** SUBMENU ***/ .cbp-hrmenu .cbp-hrsub { font-size: 0.9285714286rem; font-style: normal; font-weight: normal; text-transform: none; } .cbp-hrmenu .cbp-hrsub-inner, .cbp-hrmenu ul.cbp-hrsub-level2 { background: #ffffff; border: solid 1px #ffffff; box-shadow: 0px 1500px 0px 1500px rgba(13, 13, 13, 0.48); } .cbp-hrmenu .cbp-hrsub-inner, .cbp-hrmenu .cbp-hrsub-inner a, .cbp-hrmenu .cbp-hrsub-inner a:link { color: #000000 !important; } .cbp-hrmenu .cbp-hrsub-inner a:hover { color: #333333 !important; } .cbp-hrmenu .tabs-links { background: #f7f7f7; } .cbp-hrmenu .cbp-tabs-names li a { color: #777777 !important; } .cbp-hrmenu .cbp-tabs-names li a:hover, .cbp-hrmenu .cbp-tabs-names li a.active { background: #ffffff; color: #777777 !important; } .cbp-hrmenu .cbp-links li a:before { display: none; } .cbp-hrmenu .cbp-links li a { padding-left: 0; } .cbp-hrmenu .cbp-hrsub-inner .cbp-column-title, .cbp-hrmenu .cbp-hrsub-inner a.cbp-column-title:link { color: #000000 !important; border-bottom: none 3px #c2bc29; font-size: 1.0714285714rem; font-style: normal; font-weight: normal; text-transform: uppercase; } .cbp-hrmenu .cbp-hrsub-inner a.cbp-column-title:hover { color: !important; } /*** MOBILE MENU ***/ #mobile-header .col-mobile-menu-dropdown.show { background: #ffffff; } #mobile-header .col-mobile-menu-dropdown.show .m-nav-btn { color: #000000 !important; } #iqitmegamenu-mobile { background: #ffffff; } #iqitmegamenu-mobile li > ul.mobile-menu__submenu--accordion .mobile-menu__tab { min-height: 4.1428571429rem; } #iqitmegamenu-mobile li > ul.mobile-menu__submenu--accordion .mobile-menu__tab:not(:last-child) { border-bottom: none 1px; } #iqitmegamenu-mobile li > ul.mobile-menu__submenu--accordion .mobile-menu__arrow { padding-top: 1.2857142857rem; padding-bottom: 1.2857142857rem; } #iqitmegamenu-mobile li > ul.mobile-menu__submenu--accordion .mobile-menu__link { color: #595050 !important; padding-top: 1.2857142857rem; padding-bottom: 1.2857142857rem; font-size: 1.2857142857rem; font-style: normal; font-weight: normal; text-transform: none; } .col-mobile-menu-push #iqitmegamenu-mobile { border: none 1px #000000; } .col-mobile-menu-push #_mobile_iqitmegamenu-mobile { box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.15); } .mobile-menu__submenu { background: #ffffff; } .mobile-menu__tab { border-bottom: none 1px; min-height: 4rem; } .mobile-menu__link { color: #000000 !important; padding-top: 1.2142857143rem; padding-bottom: 1.2142857143rem; font-size: 1.5rem; font-style: normal; font-weight: normal; text-transform: none; } .mobile-menu__arrow { padding-top: 1.2142857143rem; padding-bottom: 1.2142857143rem; color: #000000; font-size: 1.5714285714rem; } .mobile-menu__tab-icon { font-size: 1.5rem; } .mobile-menu__tab-icon--img { max-height: 1.5rem; } .mobile-menu__legend { font-size: 0.8571428571rem; font-style: normal; font-weight: normal; text-transform: none; color: #ffffff; background-color: #595050; } .mobile-menu__header-wrapper { color: #595050; border-bottom: solid 1px #000000; } .mobile-menu__title { font-size: 1.6428571429rem; font-style: normal; font-weight: normal; text-transform: none; } .mobile-menu__column-title { font-size: 2rem; font-style: normal; font-weight: bold; text-transform: none; color: #595050 !important; } .mobile-menu__column { font-size: 1.2857142857rem; font-style: normal; font-weight: normal; text-transform: none; color: #595050; margin-bottom: 2.8571428571rem; } .mobile-menu__column-categories:not(:last-child) { margin-bottom: 2.8571428571rem; } .mobile-menu__column-title { margin-bottom: 1.1428571429rem; } .mobile-menu__links-list-li { padding-top: 0.5rem; padding-bottom: 0.5rem; } .mobile-menu__close, .mobile-menu__back-btn { color: #595050; } .mobile-menu__footer { border-top: solid 1px #000000; color: #595050; } /*** PS_FacatedSearch ***/ #search_filters .noUi-connect { background: #ffffff; } /*** Carousels ***/ .swiper-button-next, .swiper-button-prev { background: #ffffff; color: #000000; } .swiper-pagination-bullet { background: #333333; } /*** Product miniature ***/ .products.row { margin: -1.0714285714rem; } .products.row > .col, .products.row > [class*="col-"] { padding: 1.0714285714rem; } .swiper-container-wrapper { margin: -1.0714285714rem; } .swiper-container-wrapper .products.swiper-container { padding: 1.0714285714rem; } .swiper-container-wrapper .product-carousel { padding: 1.0714285714rem; } .swiper-products-carousel.swiper-arrows-above .swiper-button { margin: 1.0714285714rem; } .product-miniature { border: none 1px; outline: 1px solid transparent; } .product-miniature-grid .product-title { font-size: 0.9285714286rem; font-style: normal; font-weight: bold; text-transform: none; } .product-miniature-grid .product-price { font-size: 1.1428571429rem; font-style: normal; font-weight: bold; text-transform: none; } @media (hover: hover) { .product-miniature:hover { outline: solid 1px rgba(161, 161, 161, 0.25); background: #fafafa; } } .product-miniature-grid .product-functional-buttons a:link, .product-miniature-grid .product-functional-buttons a:visited, .product-miniature-grid .product-functional-buttons a:hover { color: #ffffff !important; } .product-miniature-grid .product-functional-buttons a { display: block; border-radius: 50%; margin: 5px 0; padding: 8px; box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.1); } .product-miniature-grid .product-functional-buttons i { font-size: 1rem; } .product-miniature-grid .product-functional-buttons a:link, .product-miniature-grid .product-functional-buttons a:visited, .product-miniature-grid .product-functional-buttons a:hover { background: #fafafa; } .product-miniature-grid .product-functional-buttons-bottom { bottom: auto; top: 0.7rem; right: 0rem; left: auto; min-width: auto; padding: 0; transform: translate(0, 0); } .products-grid .product-miniature .product-reference { display: none !important; } .products-grid .product-miniature .product-brand { display: none !important; } .products-grid .product-miniature .product-add-cart { display: none !important; } .products-grid .product-miniature .flag-discount-value { display: none !important; } .btn-product-list { padding: 0.5rem 1rem; background: #ffffff; color: #000000; border: solid 1px rgba(161, 161, 161, 0.25); } .btn-product-list:hover { background: #d06e6a; color: #ffffff; border-color: #d06e6a; } .products-grid .product-miniature-layout-1 { text-align: center; } .products-grid .product-miniature-layout-1 .input-group-add-cart { justify-content: center; } .products-grid .product-miniature-layout-1 .product-description { padding: 0.7142857143rem; } .products-grid .product-miniature-layout-2 .product-add-cart { display: none !important; } .products-grid .product-miniature-layout-2 .products-variants { padding-top: 0rem; } .products-grid .product-miniature-layout-2 .product-description { padding: 0.7142857143rem; } .swiper-default-carousel:not(.swiper-initialized) .swiper-wrapper { grid-template-rows: 1fr; grid-auto-rows: 0; display: grid; overflow-y: hidden; } .swiper-default-carousel:not(.swiper-initialized) .swiper-wrapper { grid-template-columns: repeat(1, 1fr); } @media (min-width: 768px) { .layout-full-width .swiper-default-carousel:not(.swiper-initialized) .swiper-wrapper { grid-template-columns: repeat(1, 1fr); } .layout-left-column .swiper-default-carousel:not(.swiper-initialized) .swiper-wrapper, .layout-right-column .swiper-default-carousel:not(.swiper-initialized) .swiper-wrapper { grid-template-columns: repeat(0, 1fr); } } @media (min-width: 992px) { .layout-full-width .swiper-default-carousel:not(.swiper-initialized) .swiper-wrapper { grid-template-columns: repeat(4, 1fr); } .layout-left-column .swiper-default-carousel:not(.swiper-initialized) .swiper-wrapper, .layout-right-column .swiper-default-carousel:not(.swiper-initialized) .swiper-wrapper { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1200px) { .layout-full-width .swiper-default-carousel:not(.swiper-initialized) .swiper-wrapper { grid-template-columns: repeat(4, 1fr); } .layout-left-column .swiper-default-carousel:not(.swiper-initialized) .swiper-wrapper, .layout-right-column .swiper-default-carousel:not(.swiper-initialized) .swiper-wrapper { grid-template-columns: repeat(3, 1fr); } } .product_header_container .product-price, .product_p_price_container .product-price { font-size: 2rem; font-style: normal; font-weight: bold; text-transform: none; } #product .images-container .product-cover { border: none 1px #f4f2f2; } .images-container .swiper-button-arrow, #product .product-cover .expander > span, #product-modal .modal-body .swiper-button-arrow { color: #333333; background: #ffffff; } .images-container .swiper-button-arrow:hover, #product .product-cover .expander > span:hover, #product-modal .modal-body .swiper-button-arrow:hover { opacity: 0.6 !important; } .product-cover .expander { width: 100%; height: 100%; padding: 0; bottom: 0; right: 0; } .product-cover .expander > span { position: absolute; bottom: 1rem; right: 1rem; padding: 0.6rem; } #product .product-cover .expander > span { color: #333333; background: #ffffff; transition: opacity 0.2s cubic-bezier(0.7, 0, 0.3, 1), color 0.2s cubic-bezier(0.7, 0, 0.3, 1); } #product .product-cover .expander > span:hover { opacity: 0.6 !important; } .product-tabs .nav-tabs { justify-content: center; } @media screen and (max-width: 768px) { .col-left-product-cover, .col-left-product-thumbs { flex: 0 0 100%; max-width: 100%; } .col-left-product-thumbs { order: 2; margin-top: 2rem; } } #wrapper { border-top: none 1px; border-bottom: none 1px; padding-top: 3.5714285714rem; padding-bottom: 3.5714285714rem; color: #000000; } #index #wrapper, #module-iqitelementor-Preview.elementor-landing-body #wrapper { padding-top: 3.5714285714rem; padding-bottom: 3.5714285714rem; } #content-wrapper .page-title { color: #000000; font-size: 2.2857142857rem; font-style: normal; font-weight: bold; text-transform: none; margin-bottom: 0.8em; padding-bottom: 0.6em; } #content-wrapper .page-title a:link, #content-wrapper .page-title a:visited { color: #000000; } #content-wrapper .page-title:after { content: ""; position: absolute; bottom: -2.5px; display: block; width: 40px; height: 1px; border-bottom: solid 5px #595050; left: 0; right: 0; } #content-wrapper .section-title { color: #333333; font-size: 1.2857142857rem; font-style: normal; font-weight: bold; text-transform: none; margin-bottom: 0.8em; padding-bottom: 0.6em; } #content-wrapper .section-title a:link, #content-wrapper .section-title a:visited { color: #333333; } #content-wrapper .section-title:after { content: ""; position: absolute; bottom: -1.5px; display: block; width: 30px; height: 1px; border-bottom: solid 3px #ca5058; left: 0; right: 0; } .nav-tabs .nav-link { color: #000000; font-size: 1.2857142857rem; font-style: normal; font-weight: bold; text-transform: none; } .nav-tabs .nav-link.active, .nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus { color: #000000; border-bottom: solid 3px #ca5058; } .iqit-accordion .title { font-style: normal; font-weight: normal; text-transform: none; } .iqit-accordion .nav-link { border-bottom: solid 3px #ca5058; border-bottom-color: transparent; } .iqit-accordion .nav-link:not(.collapsed) { color: #000000; border-bottom: solid 3px #ca5058; } #wrapper .block-title { color: #000000; font-size: 1rem; font-style: normal; font-weight: bold; text-transform: none; margin-bottom: 0.8em; padding-bottom: 0.6em; } #wrapper .block-title a:link, #wrapper .block-title a:visited { color: #000000; } #wrapper .block-title:after { content: ""; position: absolute; bottom: -1.5px; display: block; width: 30px; height: 1px; border-bottom: solid 3px #000000; left: 0; right: 0; } #left-column .block, #right-column .block { padding: 1.4285714286rem; border: solid 1px rgba(161, 161, 161, 0.25); } #footer, #checkout-footer { background: rgba(242, 211, 245, 0); } #footer .ps-emailsubscription-block .newsletter-input-group, #checkout-footer .ps-emailsubscription-block .newsletter-input-group { border: solid 1px rgba(161, 161, 161, 0.25); background: #ffffff; } #footer .ps-emailsubscription-block .newsletter-input-group .input-subscription, #checkout-footer .ps-emailsubscription-block .newsletter-input-group .input-subscription { color: #777777; } #footer .ps-emailsubscription-block .newsletter-input-group .btn-subscribe, #checkout-footer .ps-emailsubscription-block .newsletter-input-group .btn-subscribe { color: #d06e6a; } #footer .ps-emailsubscription-block .newsletter-input-group .btn-subscribe:hover, #checkout-footer .ps-emailsubscription-block .newsletter-input-group .btn-subscribe:hover { color: #d06e6a; } #footer .ps-emailsubscription-block input.input-subscription::-webkit-input-placeholder, #checkout-footer .ps-emailsubscription-block input.input-subscription::-webkit-input-placeholder { color: #777777; } #footer .ps-emailsubscription-block input.input-subscription::-moz-placeholder, #checkout-footer .ps-emailsubscription-block input.input-subscription::-moz-placeholder { color: #777777; } #footer .ps-emailsubscription-block input.input-subscription:-ms-input-placeholder, #checkout-footer .ps-emailsubscription-block input.input-subscription:-ms-input-placeholder { color: #777777; } #footer .ps-emailsubscription-block input.input-subscription :-moz-placeholder, #checkout-footer .ps-emailsubscription-block input.input-subscription :-moz-placeholder { color: #777777; } #footer .social-links._footer, #checkout-footer .social-links._footer { font-size: 2.8571428571rem; } #footer .social-links._footer a:not(:hover), #checkout-footer .social-links._footer a:not(:hover) { color: #777777 !important; } #footer .block-title, #checkout-footer .block-title { color: #000000; font-size: 1rem; font-style: normal; font-weight: bold; text-transform: none; margin-bottom: 0.8em; padding-bottom: 0.6em; } #footer .block-title a:link, #footer .block-title a:visited, #checkout-footer .block-title a:link, #checkout-footer .block-title a:visited { color: #000000; } #footer .block-title:after, #checkout-footer .block-title:after { content: ""; position: absolute; bottom: -1.5px; display: block; width: 30px; height: 1px; border-bottom: solid 3px #000000; left: 0; right: 0; } #footer-container-first { border-top: none 1px rgba(161, 161, 161, 0.25); padding-top: 2.1428571429rem; padding-bottom: 2.1428571429rem; color: #ffffff; } #footer-container-first h5 { font-size: 1.5rem; font-style: normal; font-weight: bold; text-transform: none; } #footer-container-main, #checkout-footer { border-top: solid 1px rgba(161, 161, 161, 0.25); padding-top: 4.2857142857rem; padding-bottom: 3.2857142857rem; color: #000000; } #footer-container-main a, #checkout-footer a { color: #000000; } #footer-container-main a:hover, #checkout-footer a:hover { color: #777777; } #footer-copyrights { border-top: solid 1px rgba(161, 161, 161, 0.25); padding-top: 0.8571428571rem; padding-bottom: 0.8571428571rem; } #maintenance-page { background: #e3e3e3; color: #333333; } #maintenance-page a, #maintenance-page a:link { color: #333333; } .maintenance-page-newsletter .maintenance-page-newsletter-btn { background: #000000; color: #ffffff; } .maintenance-page-newsletter .maintenance-page-newsletter-btn:hover { background: #333333; color: #ffffff; } .maintenance-page-newsletter input[type=email] { border: solid 1px #333333; background: #e3e3e3; color: #333333; } .maintenance-page-newsletter input[type=email]::-webkit-input-placeholder { color: #333333; } .maintenance-page-newsletter input[type=email]::-moz-placeholder { color: #333333; } .maintenance-page-newsletter input[type=email]:-ms-input-placeholder { color: #333333; } .maintenance-page-newsletter input[type=email] :-moz-placeholder { color: #333333; } @font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: url(iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */ src: local('Material Icons'), local('MaterialIcons-Regular'), url(iconfont/MaterialIcons-Regular.woff2) format('woff2'), url(iconfont/MaterialIcons-Regular.woff) format('woff'), url(iconfont/MaterialIcons-Regular.ttf) format('truetype'); } .material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; /* Preferred icon size */ display: inline-block; width: 1em; height: 1em; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga'; } /* ============================================================================= BEAUTYSTORE — custom-global.css (version réorganisée) ============================================================================= Ce fichier regroupe TOUT le CSS personnalisé du thème, réorganisé par thème/page pour être navigable. AUCUNE règle n'a été supprimée ni fusionnée par rapport à la version d'origine — y compris les règles redondantes ou qui se réécrasent les unes les autres (ex: search_widget stylisé à plusieurs endroits, page-title répété sur plusieurs pages) : elles ont seulement été déplacées dans la section qui correspond à leur sujet. Ce choix est volontaire, pour rester prudent sur un thème en production — le nettoyage/dédoublonnage pourra se faire dans une passe ultérieure séparée si besoin. SOMMAIRE 0. Preloader (masque le FOUC avant que le JS ajoute .bz-loaded) 1. Fonts, variables globales, styles généraux (site entier) 2. Header (icônes user/panier, logo, recherche) 3. Menu principal / méga-menu (desktop + mobile) 4. Filtres catégorie (dropdowns, tri, filtres actifs) 5. Produits — miniatures grille + carrousels (home/catégorie) 6. Page produit (fiche produit complète) 7. Bannières / mini-banner / sections colonnes Elementor (home) 8. Panier (cart-summary, code promo, lignes produits, cross-selling) 9. Page inscription (body#registration) 10. Page login (body.page-authentication / body.authentication) 11. Espace "Mon compte" (dashboard, fidélité, adresses, identité, historique commandes, avoirs, réductions, wishlist, RGPD, alertes) 12. Page Marques (listing + méga-menu marques A-Z) 13. Blog (listing, article, carrousel) 14. Responsive global — grille produits, carrousels, panier (gros bloc de media queries mobile/tablette qui touche plusieurs sections) 15. Correctifs ponctuels divers (fixes isolés, non classés ailleurs par sécurité — ordre chronologique d'origine conservé) ============================================================================= */ /* ============================================================================= 0. PRELOADER ----------------------------------------------------------------------------- Masque le FOUC (contenu non stylé/en cache) tant que .bz-loaded n'est pas ajouté sur <html> par le JS. Fonctionne même si le JS charge tard : par défaut html N'A PAS la classe .bz-loaded, donc l'overlay s'affiche automatiquement dès le premier paint, sans dépendre du timing du script. ============================================================================= */ html:not(.bz-loaded) { overflow: hidden !important; } html:not(.bz-loaded)::before { content: ""; position: fixed; inset: 0; z-index: 999999; background-color: #ffffff; background-image: url('/img/logo-1780588175.jpg'); background-repeat: no-repeat; background-position: center 44%; background-size: 160px auto; } html:not(.bz-loaded)::after { content: ""; position: fixed; z-index: 1000000; width: 34px; height: 34px; top: calc(44% + 100px); left: calc(50% - 17px); border: 3px solid #f0d6e3; border-top-color: #e6007e; border-radius: 50%; animation: bzPreloaderSpin 0.8s linear infinite; } html.bz-loaded::before, html.bz-loaded::after { opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s ease; } @keyframes bzPreloaderSpin { to { transform: rotate(360deg); } } @media (max-width: 480px) { html:not(.bz-loaded)::before { background-size: 110px auto; } html:not(.bz-loaded)::after { top: calc(44% + 75px); } } /* ============================================================================= 1. FONTS, VARIABLES GLOBALES, STYLES GÉNÉRAUX ============================================================================= */ @import url("https://fonts.googleapis.com/css2?family=Avenir:wght@400;500;600;700;800&display=swap"); @import url('https://fonts.googleapis.com/css2?family=Avenir+Next:wght@400;500;600;700&display=swap'); @import url("https://fonts.googleapis.com/css2?family=Apollo:wght@400;500;700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Avenir:wght@400;500;600;700;800&display=swap"); @import url('https://fonts.googleapis.com/css2?family=Avenir+Next:wght@400;500;600;700&display=swap'); @import url("https://fonts.googleapis.com/css2?family=Apollo:wght@400;500;700&display=swap"); :root { --accent: #e6007e; --text: #1a1a1a; --muted: #8a8a8a; --border: #ededed; --radius: 10px; --pink: #ff2d7f; --progress-percent: 45%; } .row.no-gutters.justify-content-end, .row.no-gutters.justify-content-end * { font-weight: 400 !important; } #cbp-hrmenu .cbp-tab-title, #cbp-hrmenu .cbp-column-title { text-transform: capitalize !important; } /* Polices Avenir sur divers blocs Elementor */ .elementor-element-cftejh4 .elementor-heading-title, .elementor-element-cftejh4 .elementor-heading-title span, .elementor-element-bxraw70 .elementor-heading-title, .elementor-element-bxraw70 .elementor-heading-title span, .elementor-element-6fe3w6d .elementor-heading-title, .elementor-element-6fe3w6d .elementor-heading-title span, .elementor-element-b11o3uk .elementor-heading-title, .elementor-element-b11o3uk .elementor-heading-title span { font-family: "Avenir", "Avenir Next", Arial, sans-serif !important; font-weight: 600 !important; font-size: 20px !important; } .elementor-element-k0xbji9 .elementor-heading-title, .elementor-element-k0xbji9 .elementor-heading-title span, .elementor-element-x6h4ujy .elementor-heading-title, .elementor-element-x6h4ujy .elementor-heading-title span, .elementor-element-1vh74mw .elementor-heading-title, .elementor-element-1vh74mw .elementor-heading-title span, .elementor-element-sxul98j .elementor-heading-title, .elementor-element-sxul98j .elementor-heading-title span { font-family: "Avenir", Arial, sans-serif !important; } .elementor-element-vf3ygwg .elementor-heading-title, .elementor-element-vf3ygwg .elementor-heading-title *, .elementor-element-toctbmk .elementor-heading-title, .elementor-element-toctbmk .elementor-heading-title *, .elementor-element-jup8vbc .elementor-heading-title, .elementor-element-jup8vbc .elementor-heading-title *, .elementor-element-4xuzj2r .elementor-heading-title, .elementor-element-4xuzj2r .elementor-heading-title *, .elementor-element-dh1f339 .elementor-heading-title, .elementor-element-dh1f339 .elementor-heading-title *, .elementor-element-uoz5mcc .elementor-heading-title, .elementor-element-uoz5mcc .elementor-heading-title * { font-family: "Avenir", sans-serif !important; font-size: 18px !important; } .elementor-heading-title.elementor-size-default { font-family: "Apollo", sans-serif !important; font-weight: 400 !important; } .elementor-element-dtwg1ci .elementor-heading-title { font-family: Arial, sans-serif !important; font-weight: 700 !important; } /* Éléments masqués globalement */ .owl-carousel.carousel5.slider_mobile, .carousel-inner, .block-iqitcontactpage, .block-iqitlinksmanager-1 { display: none !important; } .simpleblog-posts::-webkit-scrollbar { display: none !important; } .logo.img-fluid { width: 362px; max-width: 250px !important; height: auto !important; object-fit: contain; } @media (max-width: 767px) { .logo.img-fluid { width: 280px; height: 57px; } } @media (max-width: 575px) { .logo.img-fluid { width: 220px; height: 45px; } } @media (max-width: 399px) { .logo.img-fluid { width: 150px; height: 42px; } } /* Carousel arrows (générique Elementor) */ .elementor-swiper-button { width: 40px !important; height: 40px !important; background: transparent !important; border: none !important; box-shadow: none !important; color: #2b2b2b !important; display: flex !important; align-items: center !important; justify-content: center !important; top: 50% !important; transform: translateY(-50%) !important; margin-top: 0 !important; } .elementor-swiper-button::after { display: none !important; } .elementor-swiper-button-prev { left: -20px !important; } .elementor-swiper-button-next { right: -20px !important; } .elementor-swiper-button.swiper-button-disabled { opacity: 0.25 !important; cursor: default !important; } .elementor-swiper-button-prev::before { content: ''; display: block; width: 14px; height: 20px; border-left: 1px solid #2b2b2b; border-bottom: 1px solid #2b2b2b; transform: rotate(45deg); margin-left: 6px; } .elementor-swiper-button-next::before { content: ''; display: block; width: 14px; height: 14px; border-right: 1px solid #2b2b2b; border-top: 1px solid #2b2b2b; transform: rotate(45deg); margin-right: 6px; } /* Search widget (règles génériques d'origine — d'autres blocs recoupant le même sujet existent plus loin dans le fichier, section 15) */ .search-widget .fa-search { display: none !important; } .search-widget, .search-widget form, .search-widget .form-control, .search-widget input { border: none !important; box-shadow: none !important; } /* Titre / description RTE générique (page CMS) */ .rte-content p:first-child { font-family: 'Apollo', serif !important; font-size: 42px !important; font-weight: 700 !important; text-transform: uppercase; margin: 2em 0 !important; line-height: 1.2 !important; } .rte-content p:not(:first-child) { font-family: 'Avenir', sans-serif !important; font-size: 18px !important; font-weight: 500 !important; line-height: 1.7 !important; } /* Réaffiche uniquement la description courte transformée en points */ [id^="product-description-short-"].rte-content.product-description { display: block !important; } .bz-short-desc-list { list-style: none; margin: 0; padding: 0; } .bz-short-desc-list li { position: relative; padding-left: 18px; margin-bottom: 6px; font-size: 14px; line-height: 1.4; color: #333; } .bz-short-desc-list li::before { content: "•"; position: absolute; left: 0; color: #e6007e; font-weight: bold; } .elementor-heading-title a, .elementor-heading-title a:visited { transition: color 0.3s ease !important; } .elementor-widget-heading .elementor-heading-title a:hover { color: #ff69b4 !important; } .rte-content p span { text-decoration: none !important; } h1.page-title, .page-header .page-title, .page-header h1.page-title { font-family: "Apollo", serif !important; } .page-header { border-bottom: none !important; } .page-header::after, .page-title::after, .page-title span::after { display: none !important; content: none !important; } body { overflow-x: hidden; } /* ============================================================================= 2. HEADER (icônes, logo, recherche) ============================================================================= */ /* ---- Icône connexion ---- */ .header-user-btn .icon.fa-user::before { content: url('data:image/svg+xml;utf8,<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 47.13 44.47" style="enable-background:new 0 0 47.13 44.47;" xml:space="preserve" width="28px" height="28px"><path fill="currentColor" d="M27.05,21.51c2.75-1.36,4.65-4.19,4.65-7.46c0-4.58-3.73-8.31-8.31-8.31c-4.59,0-8.31,3.73-8.31,8.31c0,3.27,1.9,6.1,4.65,7.46c-6.69,1.58-11.68,7.37-11.68,14.26c0,0.36,0.29,0.65,0.65,0.65h29.38c0.36,0,0.65-0.29,0.65-0.65C38.72,28.88,33.74,23.09,27.05,21.51 M16.37,14.05c0-3.87,3.15-7.01,7.01-7.01c3.87,0,7.01,3.15,7.01,7.01c0,3.87-3.15,7.01-7.01,7.01C19.51,21.06,16.37,17.91,16.37,14.05 M9.36,35.12c0.36-7.08,6.51-12.73,14.03-12.73c7.51,0,13.67,5.65,14.02,12.73H9.36z"/></svg>') !important; font-size: 0 !important; } .header-user-btn .icon.fa-user { display: inline-block !important; width: 28px !important; height: 28px !important; vertical-align: middle; margin-right: 12px !important; } .header-user-btn { display: inline-flex !important; align-items: center !important; gap: 0 !important; padding: 0 !important; font-size: 16px !important; order: 2 !important; visibility: visible !important; opacity: 1 !important; } .header-user-btn .title { display: inline-block; vertical-align: middle; font-weight: 500; margin: 0 !important; font-size: 0; /* "Connexion" -> remplacé par "Compte" via ::before */ } .header-user-btn .title::before { content: "Compte"; font-size: 16px; } /* ---- Icône panier FIX : on neutralise toute règle de masquage héritée (display/width/visibility) qui pourrait faire disparaître l'icône, et on fixe order=1 pour qu'elle s'affiche AVANT le bouton compte dans le conteneur flex du header. ---- */ .header-cart-btn .icon.fa-shopping-bag::before { content: url('data:image/svg+xml;utf8,<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 47.13 44.47" style="enable-background:new 0 0 47.13 44.47;" xml:space="preserve" width="28px" height="28px"><g><path fill="currentColor" d="M30.05,17.81c-0.38,0-0.69-0.31-0.69-0.69v-3.44c0-3.79-2.77-6.87-6.18-6.87S17,9.89,17,13.68v3.44c0,0.38-0.31,0.69-0.69,0.69c-0.38,0-0.69-0.31-0.69-0.69v-3.44c0-4.54,3.39-8.24,7.56-8.24s7.56,3.7,7.56,8.24v3.44C30.74,17.5,30.43,17.81,30.05,17.81"/><path fill="currentColor" d="M31.09,37.39H15.27c-1.53,0-2.95-0.61-4-1.73c-1.05-1.11-1.58-2.57-1.49-4.09l0.88-14.96c0.09-1.45,1.29-2.59,2.74-2.59h19.55c1.45,0,2.66,1.14,2.74,2.59l0.88,14.96c0.09,1.53-0.44,2.98-1.49,4.09C34.04,36.77,32.62,37.39,31.09,37.39 M13.41,15.4c-0.73,0-1.33,0.57-1.37,1.29l-0.88,14.95c-0.07,1.15,0.33,2.23,1.12,3.07c0.79,0.83,1.85,1.29,3,1.29H31.1c1.15,0,2.21-0.46,3-1.29s1.18-1.92,1.12-3.07l-0.88-14.95c-0.04-0.73-0.65-1.29-1.37-1.29C32.97,15.4,13.41,15.4,13.41,15.4z"/></g></svg>') !important; font-size: 0 !important; } .header-cart-btn .icon.fa-shopping-bag { display: inline-block !important; width: 28px !important; height: 28px !important; vertical-align: middle; margin-right: 12px !important; visibility: visible !important; opacity: 1 !important; } .header-cart-btn { display: inline-flex !important; align-items: center !important; gap: 0 !important; padding: 0 !important; font-size: 16px !important; order: 1 !important; visibility: visible !important; opacity: 1 !important; flex-shrink: 0 !important; } .header-cart-btn .info-wrapper { display: inline !important; } .header-cart-btn .title { display: inline !important; font-size: 16px; font-weight: 500; margin: 0 !important; } /* Conteneur parent des deux boutons : on l'active en flex pour que "order" prenne effet. Cible large pour couvrir les variantes de thème PrestaShop les plus courantes — sans effet si le sélecteur ne matche pas. */ .header-top-right, .header-nav-right, #_desktop_user_info, .header-icons, #header-user-btn, #ps-shoppingcart-wrapper { flex-shrink: 0 !important; } .header-cart-btn { display: inline-flex !important; order: 1 !important; visibility: visible !important; opacity: 1 !important; flex-shrink: 0 !important; } .header-cart-btn .icon.fa-shopping-bag { display: inline-block !important; visibility: visible !important; opacity: 1 !important; } .header-cart-btn, .header-cart-btn .icon.fa-shopping-bag, .header-cart-btn .icon.fa-shopping-bag::before { display: inline-block !important; visibility: visible !important; opacity: 1 !important; width: auto !important; height: auto !important; } /* ============================================================ FIX : Masquer l'icône du panier sur TOUTES les pages SAUF sur la page produit (body#product) ============================================================ */ /* 1. Masquer l'icône <i> du panier partout */ .bag-icon, .btn-product-list .bag-icon, .add-to-cart .bag-icon, .fa.fa-shopping-bag.fa-fw.bag-icon { display: none !important; } /* 2. Masquer le pseudo-élément SVG partout */ .add-to-cart::before { display: none !important; content: none !important; } /* 4. RÉAFFICHER le pseudo-élément SVG UNIQUEMENT sur la page produit */ body#product .add-to-cart::before { display: inline-block !important; content: url('data:image/svg+xml;utf8,<svg viewBox="0 0 47.13 44.47" xmlns="http://www.w3.org/2000/svg" width="28" height="28" style="vertical-align: middle; margin-right: 12px; font-weight: bold;"><g><path fill="white" d="M30.05,17.81c-0.38,0-0.69-0.31-0.69-0.69v-3.44c0-3.79-2.77-6.87-6.18-6.87S17,9.89,17,13.68v3.44c0,0.38-0.31,0.69-0.69,0.69c-0.38,0-0.69-0.31-0.69-0.69v-3.44c0-4.54,3.39-8.24,7.56-8.24s7.56,3.7,7.56,8.24v3.44C30.74,17.5,30.43,17.81,30.05,17.81"/><path fill="white" d="M31.09,37.39H15.27c-1.53,0-2.95-0.61-4-1.73c-1.05-1.11-1.58-2.57-1.49-4.09l0.88-14.96c0.09-1.45,1.29-2.59,2.74-2.59h19.55c1.45,0,2.66,1.14,2.74,2.59l0.88,14.96c0.09,1.53-0.44,2.98-1.49,4.09C34.04,36.77,32.62,37.39,31.09,37.39 M13.41,15.4c-0.73,0-1.33,0.57-1.37,1.29l-0.88,14.95c-0.07,1.15,0.33,2.23,1.12,3.07c0.79,0.83,1.85,1.29,3,1.29H31.1c1.15,0,2.21-0.46,3-1.29s1.18-1.92,1.12-3.07l-0.88-14.95c-0.04-0.73-0.65-1.29-1.37-1.29C32.97,15.4,13.41,15.4,13.41,15.4z"/></g></svg>') !important; } /* Version alternative — cible le parent direct */ #ps-shoppingcart-wrapper { order: -1 !important; /* -1 le met en premier */ } #header-user-btn { order: 0 !important; /* 0 le met en deuxième */ } .header-cart-btn, .header-user-btn { display: inline-flex !important; align-items: center !important; } .header-user-btn .title { font-size: 0 !important; } .header-user-btn .title::before { content: "Compte" !important; font-size: 17px !important; position: relative; top: 5px; } /* ---- Search widget (radius, focus, icône loupe custom) ---- */ .input-group { border: 1px solid #000 !important; border-radius: 10px !important; overflow: hidden; background: #fff; transition: .3s ease; } .input-group .form-control { border: 0 !important; box-shadow: none !important; } .input-group .search-btn { border: 0 !important; background: transparent !important; color: #000 !important; transition: .3s ease; } .input-group:hover { border-color: #e6007e !important; } .input-group:hover .search-btn { background: #fff !important; color: #fff !important; } .input-group:focus-within { border-color: #e6007e !important; } .search-widget .input-group { border-radius: 8px !important; overflow: hidden !important; } .search-widget .search-btn { border-radius: 0 8px 8px 0 !important; } .search-widget .form-control, .search-widget input.form-control, .search-widget form { border-radius: 8px !important; } .search-widget .form-control, .search-widget input.form-control, .search-widget form { border-radius: px !important; box-shadow: none !important; } .search-widget .form-control:focus, .search-widget input.form-control:focus { border-color: #e6007e !important; box-shadow: 0 0 0 3px rgba(230, 0, 126, 0.1) !important; outline: none !important; } .input-group.js-parent-focus { display: flex; align-items: stretch; } .input-group.js-parent-focus .form-control { height: 46px !important; border: 1px solid #d9d9d9 !important; border-radius: 4px 0 0 4px !important; box-shadow: none !important; } .input-group.js-parent-focus .input-group-append { display: flex; } .input-group.js-parent-focus .btn { height: 46px !important; width: 50px !important; padding: 0 !important; border: 1px solid #d9d9d9 !important; border-left: none !important; border-radius: 0 4px 4px 0 !important; background: #fff !important; display: flex !important; align-items: center; justify-content: center; } .input-group.js-parent-focus .btn i { font-size: 18px; color: #666; } .input-group.js-parent-focus .form-control:focus, .input-group.js-parent-focus .btn:focus { box-shadow: none !important; } #search_filters { width: 70% !important; } #search_widget .input-group { border: none !important; border-bottom: 1px solid #000 !important; border-radius: 0 !important; } #search_widget .form-search-control { border: none !important; border-radius: 0 !important; box-shadow: none !important; } #search_widget .search-btn { border: none !important; border-radius: 0 !important; background: transparent !important; color: #000 !important; box-shadow: none !important; } #search_widget .search-btn i { color: #000 !important; } #search_widget .input-group:focus-within { border-bottom-color: #000 !important; } #search_widget .input-group { border: none !important; border-bottom: 1px solid #000 !important; border-radius: 0 !important; } #search_widget .form-search-control { border: none !important; border-radius: 0 !important; box-shadow: none !important; } #search_widget .search-btn { border: none !important; border-radius: 0 !important; background: transparent !important; color: #000 !important; box-shadow: none !important; display: flex; align-items: center; justify-content: center; padding: 0 10px; } /* remplacer l'ancienne icône */ #search_widget .search-btn i { display: none !important; } /* nouvelle icône search */ #search_widget .search-btn::before { content: ""; width: 25px; height: 25px; display: block; background-color: #000; mask: url("data:image/svg+xml,%3Csvg fill='none' stroke='currentColor' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m21 21-4.35-4.35m2.35-5.65a8 8 0 1 1-16 0 8 8 0 0 1 16 0z'/%3E%3C/svg%3E") center / contain no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg fill='none' stroke='currentColor' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m21 21-4.35-4.35m2.35-5.65a8 8 0 1 1-16 0 8 8 0 0 1 16 0z'/%3E%3C/svg%3E") center / contain no-repeat; } /* ---- Ajouter un border-radius au champ de recherche (variante utilitaire) ---- */ .input-group .form-search-control { border-radius: 25px !important; /* ou */ border-radius: 50px !important; /* ou */ border-radius: 30px 0 0 30px !important; } .input-group .search-btn { border-radius: 0 25px 25px 0 !important; /* ou */ border-radius: 0 50px 50px 0 !important; } .input-group { border-radius: 25px !important; } .input-group .form-search-control { border-radius: 25px 0 0 25px !important; border: 1px solid #ddd !important; } .input-group .search-btn { border-radius: 0 25px 25px 0 !important; border: 1px solid #ddd !important; border-left: none !important; } @media (max-width: 767px) { .elementor-element.elementor-element-t2ktahy { margin-top: -314px !important; } } /* ============================================================================= 3. MENU PRINCIPAL / MÉGA-MENU (desktop + mobile) ============================================================================= */ .iqitmegamenu-wrapper { position: relative; overflow: visible !important; border-bottom: none !important; } .iqitmegamenu-wrapper::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 1px; background-color: #000000 !important; } /* SUPPRIMER COMPLÈTEMENT LA LIGNE GRISE ET L'ESPACE */ #iqitmegamenu-wrapper { border-bottom: none !important; border-bottom-color: transparent !important; box-shadow: none !important; outline: none !important; } #iqitmegamenu-wrapper .container, #iqitmegamenu-wrapper .container-iqitmegamenu, #iqitmegamenu-wrapper .iqitmegamenu, #iqitmegamenu-wrapper .cbp-hrmenu, #iqitmegamenu-wrapper .cbp-hrsub, #iqitmegamenu-wrapper .cbp-hrsub-inner, #iqitmegamenu-wrapper .row, #iqitmegamenu-wrapper .cbp-menu-column { border-bottom: none !important; border-bottom-color: transparent !important; } #iqitmegamenu-wrapper { position: relative !important; overflow: visible !important; } #iqitmegamenu-wrapper::after { content: '' !important; position: absolute !important; bottom: 0 !important; left: 50% !important; transform: translateX(-50%) !important; width: 100vw !important; height: 1px !important; background-color: #00000 !important; display: block !important; z-index: 9999 !important; } #iqitmegamenu-wrapper .container-iqitmegamenu { padding-bottom: 0 !important; margin-bottom: 0 !important; } .iqitmegamenu-wrapper { background-color: transparent !important; } /* 1. Le <li> parent doit être en position relative pour servir de repère, mais on casse le full-width en positionnant le sous-menu par rapport au menu entier */ #cbp-hrmenu { position: relative; } /* 2. Rendre chaque sous-menu full width, ancré à la fenêtre et non au <li> */ .cbp-hrmenu .cbp-hrsub { position: fixed !important; /* ou absolute selon le comportement voulu, voir note plus bas */ left: 0 !important; right: 0 !important; width: 100vw !important; max-width: 100vw !important; margin: 0 !important; box-sizing: border-box; z-index: 999; } /* 3. Le container interne garde son max-width classique (ex: 1200px) et se centre */ .cbp-hrmenu .cbp-hrsub .iqitmegamenu-submenu-container { max-width: 1200px; /* adaptez à la largeur de votre site */ margin: 0 auto; width: 100%; box-sizing: border-box; } /* Hover rose sur les onglets principaux du méga-menu */ #cbp-hrmenu .nav-link:hover, #cbp-hrmenu .nav-link:hover .cbp-tab-title { color: #e6007e !important; } /* Hover rose sur les liens de sous-menu (colonnes) */ .cbp-hrsub .nav-link:hover, .cbp-hrsub .cbp-column-title:hover, .cbp-hrsub .cbp-category-title:hover, .cbp-links a:hover, .cbp-category-link-w a:hover { color: #e6007e !important; } /* Hover rose sur les liens marques (A-Z) */ .bz-az-results a:hover, .bz-az-letter:hover { color: #e6007e !important; } /* Menu mobile */ .mobile-menu__link:hover, .mobile-menu__column-title:hover, .mobile-menu__links-list-li a:hover { color: #e6007e !important; } /* Transition douce pour un effet propre */ #cbp-hrmenu .nav-link, .cbp-hrsub a, .mobile-menu__link, .mobile-menu__links-list-li a { transition: color 0.2s ease; } /* ---- Sticky menu (global, tel quel) ---- */ .sticky-desktop-wrapper { position: sticky; top: 0; z-index: 999; background: white; } .sticky-desktop-wrapper.is-sticky { position: fixed; top: 0; left: 0; right: 0; z-index: 999; animation: slideDown 0.3s ease; background: white; } @keyframes slideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } } #desktop-header { position: relative; z-index: 1; background: white; } .bz-topbar, .header-banner, .header-nav { position: relative; z-index: 2; } #iqitmegamenu-wrapper { background: white; } body.has-sticky-menu { padding-top: 0; } #iqitmegamenu-horizontal { background: white; } /* ---- Sticky menu — page d'accueil uniquement (variante scoped .home) ---- */ .home .sticky-desktop-wrapper { position: sticky; top: 0; z-index: 999; background: white; } .home .sticky-desktop-wrapper.is-sticky { position: fixed; top: 0; left: 0; right: 0; z-index: 999; background: white; animation: slideDown 0.3s ease; } .home #desktop-header { position: relative; z-index: 1; background: white; } .home .bz-topbar, .home .header-banner, .home .header-nav { position: relative; } .home #wrapper, .home #content-wrapper { position: relative; z-index: 0; } .home #iqitmegamenu-wrapper { background: white; } .home #sticky-cart-wrapper { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); display: block !important; } @media (max-width: 768px) { .home #sticky-cart-wrapper { display: none !important; } } /* ========================================================================= BEAUTYSTORE — Méga-menu épuré (façon capture d'écran fournie) Scope strict : #iqitmegamenu-wrapper uniquement Principe (couleurs actuelles du site conservées, uniquement la mise en page/structure change) : - Barre de navigation : texte simple, sans encadré, sans flèche visible - Sous-menu : fond plat, sans carte/ombre lourde, colonnes texte pur - Titre de colonne : petites majuscules + filet de séparation neutre - Liens : empilés avec un espacement confortable, soulignés au survol - Garde-fou : aucune flèche ni sous-menu ne s'affiche pour un onglet qui n'a pas la classe .cbp-has-submeu (= pas de sous-catégories), même si un autre CSS du thème tentait de le forcer. ========================================================================= */ #iqitmegamenu-wrapper { --mm-line: #e8e6e2; /* filet de séparation neutre, pas une couleur de marque */ } #iqitmegamenu-wrapper #cbp-hrmenu { background: transparent !important; border: none !important; box-shadow: none !important; } #iqitmegamenu-wrapper #cbp-hrmenu > ul { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 30px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } #iqitmegamenu-wrapper .cbp-hrmenu-tab { background: transparent !important; border: none !important; } #iqitmegamenu-wrapper .cbp-hrmenu-tab > a.nav-link { display: inline-flex !important; align-items: center !important; gap: 4px !important; padding: 20px 2px !important; margin: 0 !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; font-family: 'Poppins', 'Avenir', sans-serif !important; font-size: 14px !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; } #iqitmegamenu-wrapper .cbp-hrmenu-tab > a.nav-link .cbp-tab-title { font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; text-transform: none !important; } #iqitmegamenu-wrapper .cbp-hrmenu-tab > a.nav-link:hover, #iqitmegamenu-wrapper .cbp-hrmenu-tab > a.nav-link:hover .cbp-tab-title { text-decoration: underline !important; } #iqitmegamenu-wrapper .cbp-submenu-aindicator { display: none !important; } #iqitmegamenu-wrapper .cbp-hrsub { background: #fff !important; border: none !important; border-top: 1px solid var(--mm-line) !important; box-shadow: 0 16px 30px rgba(28, 43, 74, .07) !important; } #iqitmegamenu-wrapper .cbp-hrsub-inner { background: transparent !important; padding: 34px 0 !important; } #iqitmegamenu-wrapper .iqitmegamenu-submenu-container { background: transparent !important; } #iqitmegamenu-wrapper .row.menu_row { column-gap: 12px !important; row-gap: 26px !important; } #iqitmegamenu-wrapper .cbp-menu-column { background: transparent !important; border: none !important; padding-left: 22px !important; padding-right: 22px !important; } #iqitmegamenu-wrapper .cbp-menu-column-inner { background: transparent !important; } #iqitmegamenu-wrapper .cbp-column-title { display: block !important; font-family: 'Poppins', 'Avenir', sans-serif !important; font-size: 12.5px !important; font-weight: 700 !important; letter-spacing: .06em !important; text-transform: uppercase !important; background: transparent !important; padding: 0 0 12px !important; margin: 0 0 14px !important; border: none !important; border-bottom: 1px solid var(--mm-line) !important; text-decoration: none !important; } #iqitmegamenu-wrapper a.cbp-column-title:hover { text-decoration: underline !important; } #iqitmegamenu-wrapper .cbp-links { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 11px !important; background: transparent !important; } #iqitmegamenu-wrapper .cbp-links li { margin: 0 !important; padding: 0 !important; background: transparent !important; } #iqitmegamenu-wrapper .cbp-links a { font-family: 'Poppins', 'Avenir', sans-serif !important; font-size: 13.5px !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; text-decoration: none !important; } #iqitmegamenu-wrapper .cbp-links a:hover { text-decoration: underline !important; } #iqitmegamenu-wrapper .cbp-category-link-w > .cbp-links.cbp-category-tree { margin-top: 4px !important; } #iqitmegamenu-wrapper .cbp-hrmenu-tab:not(.cbp-has-submeu) > a.nav-link .cbp-submenu-aindicator { display: none !important; } #iqitmegamenu-wrapper .cbp-hrmenu-tab:not(.cbp-has-submeu) > .cbp-hrsub { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } @media (max-width: 1024px) { #iqitmegamenu-wrapper #cbp-hrmenu > ul { gap: 20px !important; } #iqitmegamenu-wrapper .cbp-hrmenu-tab > a.nav-link { font-size: 13px !important; padding: 16px 2px !important; } #iqitmegamenu-wrapper .cbp-hrsub-inner { padding: 26px 0 !important; } #iqitmegamenu-wrapper .cbp-menu-column { padding-left: 16px !important; padding-right: 16px !important; } } /* ============================================================================= 4. FILTRES CATÉGORIE (dropdowns, tri, filtres actifs) ============================================================================= */ #search_filters { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; align-items: center !important; padding: 16px 0 !important; margin: 0 !important; } .facet { margin: 0 !important; padding: 0 !important; } .facet ul { margin: 0 !important; padding: 0 !important; list-style: none !important; } .select-title, .facet-title-dropdown { display: inline-flex !important; align-items: center !important; justify-content: space-between !important; gap: 100px !important; padding: 11px 20px !important; border: 1px solid var(--text) !important; border-radius: 10px !important; background: #fff !important; color: var(--text) !important; font-size: 15px !important; font-weight: 700 !important; cursor: pointer !important; transition: background .2s ease !important; } .select-title:hover, .facet-title-dropdown:hover { background: #f5f5f5 !important; } .dropdown-menu, .dropdown-menu-facet { display: none !important; position: absolute !important; top: 100% !important; left: 0 !important; min-width: 200px !important; background: #fff !important; border: 1px solid #e0e0e0 !important; border-radius: 8px !important; box-shadow: 0 4px 12px rgba(0, 0, 0, .15) !important; padding: 8px 0 !important; z-index: 1000 !important; } .dropdown-menu.show, .dropdown-menu-facet.show { display: block !important; } .dropdown-item { display: block !important; padding: 10px 16px !important; color: var(--text) !important; font-size: 13px !important; transition: background .2s ease !important; } .dropdown-item:hover { background: #f8f8f8 !important; color: var(--accent) !important; } .noUi-target { background: #f0f0f0 !important; border-radius: 4px !important; border: none !important; height: 4px !important; } .noUi-handle { background: var(--text) !important; border: none !important; border-radius: 50% !important; width: 16px !important; height: 16px !important; top: -6px !important; cursor: grab !important; } .noUi-connect { background: var(--text) !important; } .col-left-sort { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; align-items: center !important; margin-bottom: 16px !important; } .col-left-sort select { padding: 9px 14px !important; border: 1px solid var(--text) !important; border-radius: 6px !important; font-size: 13px !important; } .showing.hidden-sm-down { display: none !important; } #category h1.page-title { display: none !important; } .breadcrumb { background: #fff !important; } /* Supprime le séparateur existant */ .breadcrumb-custom li::after, .breadcrumb-custom li + li::before { content: none !important; } /* Ajoute uniquement > */ .breadcrumb-custom li + li::before { content: ">" !important; display: inline-block !important; margin: 0 2px; } /* ========================================================================= FIX — bordure plus épaisse sur les filtres catégorie (dropdowns + tri) ========================================================================= */ .select-title, .facet-title-dropdown { border: 1px solid var(--text) !important; } .facet .form-control.facet-title { border: 1px solid var(--text) !important; } .col-left-sort select { border: 2px solid var(--text) !important; } /* ========================================================================= FIX v3 — Grille 4 colonnes par ligne (au lieu d'une seule ligne flex) ------------------------------------------------------------------------ On passe de display:flex (qui écrase tout sur une seule ligne) à display:grid avec 4 colonnes égales. Les filtres passent à la ligne suivante automatiquement au-delà de 4 éléments. ========================================================================= */ #search_filters { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 10px !important; flex-wrap: unset !important; } #search_filters > .facet { flex: unset !important; min-width: 0 !important; max-width: none !important; width: 100% !important; } #search_filters > .facet > ul, #search_filters > .facet > ul > li, #search_filters > .facet .facet-dropdown { width: 100% !important; display: block !important; } #search_filters .select-title, #search_filters .facet-title-dropdown { display: inline-flex !important; width: 100% !important; box-sizing: border-box !important; justify-content: space-between !important; align-items: center !important; gap: 8px !important; border: 1px solid var(--text) !important; padding: 11px 16px !important; } #search_filters .select-title span, #search_filters .facet-title-dropdown span { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; flex: 1 1 auto !important; min-width: 0 !important; } @media (max-width: 1200px) { #search_filters { grid-template-columns: repeat(3, 1fr) !important; } } @media (max-width: 900px) { #search_filters { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 560px) { #search_filters { grid-template-columns: 1fr !important; } } /* ========================================================================= DROPDOWN "PRIX" — design plus professionnel ========================================================================= */ .dropdown-menu-facet.faceted-slider { padding: 22px 20px 20px 20px !important; min-width: 280px !important; margin-top: 8px !important; border: 1px solid #e5e5e5 !important; border-radius: 10px !important; box-shadow: 0 8px 24px rgba(0, 0, 0, .12) !important; } .dropdown-menu-facet.faceted-slider p[id^="facet_label_"] { margin: 0 0 24px 0 !important; padding: 10px 14px !important; background: #f7f7f7 !important; border-radius: 6px !important; text-align: center !important; font-size: 14px !important; font-weight: 700 !important; color: var(--text) !important; letter-spacing: .2px !important; } .dropdown-menu-facet.faceted-slider .noUi-target { margin: 0 12px 8px 12px !important; height: 5px !important; background: #ececec !important; border-radius: 3px !important; } .dropdown-menu-facet.faceted-slider .noUi-connect { background: var(--accent) !important; } .dropdown-menu-facet.faceted-slider .noUi-handle { width: 18px !important; height: 18px !important; top: -7px !important; border-radius: 50% !important; background: #fff !important; border: 2px solid var(--accent) !important; box-shadow: 0 2px 6px rgba(0, 0, 0, .2) !important; cursor: grab !important; } .dropdown-menu-facet.faceted-slider .noUi-handle:active { cursor: grabbing !important; box-shadow: 0 0 0 6px rgba(230, 0, 126, .15) !important; } .dropdown-menu-facet.faceted-slider .noUi-touch-area { cursor: grab !important; } /* ========================================================================= FIX — Filtres catégorie mobile : largeur pleine + espace pour éviter le chevauchement avec la section tri "Pertinence" ========================================================================= */ @media (max-width: 900px) { #search_filters { width: 100% !important; grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; margin-top: 20px !important; } .products-selection { top: 0 !important; left: 0 !important; position: relative !important; margin-bottom: 15px !important; } } @media (max-width: 560px) { #search_filters { width: 100% !important; grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; margin-top: 24px !important; } #search_filters .select-title, #search_filters .facet-title-dropdown { width: 100% !important; padding: 10px 12px !important; font-size: 13px !important; gap: 6px !important; box-sizing: border-box !important; } } @media (max-width: 380px) { #search_filters { width: 100% !important; grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; margin-top: 24px !important; } #search_filters .select-title, #search_filters .facet-title-dropdown { width: 100% !important; padding: 9px 10px !important; font-size: 12px !important; } #search_filters .select-title span, #search_filters .facet-title-dropdown span { white-space: normal !important; } } /* ========================================================================= FIX MOBILE — #js-active-search-filters (filtres actifs) ========================================================================= */ #products { position: relative; } #js-active-search-filters { position: absolute; top: 60px; left: 0; right: 0; z-index: 3; } #products > div:has(> #js-active-search-filters) { min-height: 0; } @media (max-width: 1024px) { #js-active-search-filters { position: static !important; top: auto !important; left: auto !important; right: auto !important; z-index: auto !important; margin: 16px 12px 12px 12px !important; width: auto !important; } #products { position: static !important; } #products > div:has(> #js-active-search-filters) { min-height: auto !important; } .category-description-top { margin-top: 0 !important; } #active-search-filters { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important; padding: 0 !important; margin: 0 !important; } #active-search-filters .active-filter-title { font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; color: #1a1a1a !important; flex: 0 0 100% !important; margin-bottom: 4px !important; } #active-search-filters .filter-blocks { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; list-style: none !important; margin: 0 !important; padding: 0 !important; } #active-search-filters .filter-block { margin: 0 !important; } #active-search-filters .js-search-link { display: inline-flex !important; align-items: center !important; gap: 6px !important; background: #fff !important; border: 1px solid #1a1a1a !important; border-radius: 20px !important; padding: 6px 12px !important; font-size: 12px !important; font-weight: 500 !important; color: #1a1a1a !important; text-decoration: none !important; line-height: 1.3 !important; white-space: normal !important; } #active-search-filters .js-search-link:hover { background: #1a1a1a !important; color: #fff !important; } #active-search-filters .js-search-link .fa-times { font-size: 10px !important; flex-shrink: 0 !important; } } @media (max-width: 480px) { #active-search-filters .js-search-link { font-size: 11px !important; padding: 5px 10px !important; } } /* ---- Barre de tri (vue grille/liste + tri + par page) ---- */ .view-switcher a, .products-sort-nb-dropdown .select-title { height: 44px !important; box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; } .view-switcher a { justify-content: center !important; width: 44px !important; padding: 0 !important; border: 1px solid var(--text) !important; border-radius: 8px !important; } .products-sort-nb-dropdown { display: inline-flex !important; width: auto !important; } .products-sort-nb-dropdown .select-title { width: auto !important; display: inline-flex !important; align-items: center !important; gap: 24px !important; padding: 10px 16px !important; white-space: nowrap !important; } .products-sort-nb-dropdown .select-title { font-size: 13px !important; } .products-sort-nb-dropdown .select-title { padding: 6px 12px !important; } .products-selection { position: relative; left: 1%; top: 105px; /* à ajuster */ width:100%; } #js-product-list-top { border: none !important; } #js-product-list-top::before, #js-product-list-top::after { display: none !important; } /* Étape 1 : on retire le bloc filtres actifs de son emplacement d'origine, sans display:none (qui le ferait disparaître), mais en le sortant du flux proprement — doublon volontairement conservé, voir bloc identique plus haut */ #products { position: relative; } .category-description-top { margin-top: -33px !important; padding-top: 0 !important; } .category-description-top hr { margin-top: 0; margin-bottom: rem; /* ajustez selon besoin */ } .category-description-top .rte-content { margin-top: -60px ; padding-top: 0; } .category-description-top .rte-content p { margin-top: 0; } .category-description-top .rte-content p:first-child { margin-top: 0; } .category-description-top .rte-content p { margin-top: -62px; } /* ============================================================================= 5. PRODUITS — MINIATURES (grille classique + carrousels home/catégorie) ============================================================================= */ /* ---- Carte produit (grille classique) ---- */ .product-miniature { background: #fff !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; padding: 14px !important; display: flex !important; flex-direction: column !important; height: 100% !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .10) !important; transition: transform .2s ease !important; contain: layout style !important; } .product-miniature:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, .15) !important; transform: translateY(-2px) !important; } .product-miniature .thumbnail-container { position: relative !important; margin: 0 0 12px !important; aspect-ratio: 1 / 1 !important; contain: layout !important; } .product-miniature .product-thumbnail img { width: 100% !important; border-radius: 6px !important; } .product-miniature .product-flags { position: absolute !important; top: 10px !important; left: 10px !important; z-index: 3 !important; } .product-miniature .product-flags li { background: #fff !important; color: var(--text) !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; padding: 4px 10px !important; border-radius: 4px !important; box-shadow: 0 1px 4px rgba(0, 0, 0, .12) !important; margin: 0 0 4px !important; } .product-miniature .product-functional-buttons { position: absolute !important; top: 8px !important; right: 8px !important; z-index: 3 !important; } .product-miniature .btn-iqitwishlist-add { width: 32px !important; height: 32px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: transparent !important; border: 1px solid #333 !important; border-radius: 18px !important; padding: 4px 9px !important; min-width: 60px !important; } .btn-iqitwishlist-add:hover { background: #f5f5f5 !important; } .product-miniature .btn-iqitwishlist-add i { color: var(--text) !important; font-size: 18px !important; } /* ---- Coeur VIDE (non ajouté) — noir, contour uniquement ---- */ .btn-iqitwishlist-add .fa-heart-o::before { content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47.1 44.5" width="32px" height="32px"><path fill="%231a1a1a" d="M24.2,42.1c-0.5,0-1-0.2-1.4-0.6c0,0-3.3-3.2-16.4-16.2l-0.1-0.1c-0.1-0.1-0.2-0.2-0.3-0.3c-2.1-2.3-3.3-5.3-3.3-8.4c0-6.9,5.6-12.4,12.4-12.4c3.4,0,6.5,1.3,8.9,3.7c2.3-2.4,5.5-3.7,8.9-3.7c6.8,0,12.4,5.6,12.4,12.4c0,3.4-1.4,6.6-3.9,9c0,0-0.1,0.1-0.1,0.1C28.2,38.8,25.7,41.5,25.7,41.5C25.3,41.9,24.8,42.1,24.2,42.1L24.2,42.1z M15.2,5.4c-6.1,0-11.1,5-11.1,11.1c0,2.8,1.1,5.5,3,7.6c0.1,0.1,0.1,0.1,0.2,0.2l0.1,0.1c13.1,13.1,16.3,16.2,16.3,16.2c0.1,0.1,0.3,0.2,0.5,0.2h0c0.2,0,0.4-0.1,0.5-0.2c0,0,2.5-2.7,15.8-15.9l0.1-0.1c2.2-2.1,3.5-5,3.5-8.1c0-6.1-5-11.1-11.1-11.1c-3.2,0-6.3,1.4-8.4,3.8l-0.5,0.6l-0.5-0.6C21.5,6.8,18.4,5.4,15.2,5.4"/></svg>') !important; font-size: 0 !important; } /* ---- Coeur PLEIN (ajouté) — rouge/rose, rempli ---- */ .btn-iqitwishlist-add .fa-heart::before { content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47.1 44.5" width="32px" height="32px"><path fill="%23e6007e" d="M24.2,42.1c-0.5,0-1-0.2-1.4-0.6c0,0-3.3-3.2-16.4-16.2l-0.1-0.1c-0.1-0.1-0.2-0.2-0.3-0.3c-2.1-2.3-3.3-5.3-3.3-8.4c0-6.9,5.6-12.4,12.4-12.4c3.4,0,6.5,1.3,8.9,3.7c2.3-2.4,5.5-3.7,8.9-3.7c6.8,0,12.4,5.6,12.4,12.4c0,3.4-1.4,6.6-3.9,9c0,0-0.1,0.1-0.1,0.1C28.2,38.8,25.7,41.5,25.7,41.5C25.3,41.9,24.8,42.1,24.2,42.1L24.2,42.1z M15.2,5.4c-6.1,0-11.1,5-11.1,11.1c0,2.8,1.1,5.5,3,7.6c0.1,0.1,0.1,0.1,0.2,0.2l0.1,0.1c13.1,13.1,16.3,16.2,16.3,16.2c0.1,0.1,0.3,0.2,0.5,0.2h0c0.2,0,0.4-0.1,0.5-0.2c0,0,2.5-2.7,15.8-15.9l0.1-0.1c2.2-2.1,3.5-5,3.5-8.1c0-6.1-5-11.1-11.1-11.1c-3.2,0-6.3,1.4-8.4,3.8l-0.5,0.6l-0.5-0.6C21.5,6.8,18.4,5.4,15.2,5.4"/></svg>') !important; font-size: 0 !important; } .col-add-wishlist { margin-left: 320px !important; margin-top: -75px !important; } .product-miniature .product-brand { font-weight: 700 !important; text-transform: uppercase !important; font-size: 14px !important; color: var(--text) !important; } .product-miniature .product-title a { color: var(--text) !important; font-weight: 400 !important; font-size: 15px !important; } .product-miniature .variant-links { display: flex !important; gap: 6px !important; flex-wrap: wrap !important; } .product-miniature .variant-links .color { width: 22px !important; height: 22px !important; border-radius: 6px !important; border: 1px solid rgba(0, 0, 0, .1) !important; } .color-variant-dropdown { margin-bottom: 18px !important; padding: 10px 14px !important; border: 1px solid #d0d0d0 !important; border-radius: 6px !important; font-size: 14px !important; line-height: 1.4 !important; height: auto !important; background: #ffffff !important; color: #1a1a1a !important; cursor: pointer !important; } .color-variant-dropdown:focus { outline: none !important; border-color: #e6007e !important; box-shadow: 0 0 0 3px rgba(230, 0, 126, 0.1) !important; } .product-variants-item ul[id^="group_"] { margin-top: 8px !important; } .product-variants-item .color { border-radius: 6px !important; } .color-variant-dropdown.form-control { width: 390px !important; max-width: 400px !important; } /* ---- Prix produit (grille + carrousel) ---- */ .product-miniature .product-price-and-shipping { display: flex !important; flex-direction: column !important; gap: 6px !important; order: 4 !important; margin-bottom: 20px !important; align-items: flex-start !important; } .product-price, .product-miniature .product-price { color: var(--accent) !important; font-weight: 600 !important; font-family: "Avenir Medium", "Avenir", sans-serif !important; font-size: 25px !important; line-height: 1.2 !important; letter-spacing: 0.5px !important; margin: 0 !important; padding: 0 !important; display: block !important; order: -1 !important; } .elementor-products-carousel .product-price { font-weight: 700 !important; font-size: 20px !important; } .product-miniature .regular-price, .discount { color: var(--muted) !important; } .product-miniature .regular-price { display: inline-flex !important; align-items: center !important; gap: 6px !important; margin: 0 !important; padding: 0 !important; font-size: 12px !important; font-weight: 400 !important; text-decoration: none !important; color: #1a1a1a !important; order: 1 !important; line-height: 1.4 !important; } .product-miniature .regular-price::before { content: "Prix d'origine :" !important; color: #1a1a1a !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.5px !important; font-family: "Avenir", "Avenir Next", sans-serif !important; text-decoration: none !important; white-space: nowrap !important; display: inline !important; margin-right: 0 !important; } .elementor-products-carousel .regular-price { text-decoration: none !important; color: #1a1a1a !important; } .elementor-products-carousel .regular-price::before { color: #1a1a1a !important; font-family: "Avenir", "Avenir Next", sans-serif !important; } .discount { background: #fff !important; border: 1px solid var(--accent) !important; border-radius: 4px !important; padding: 0 6px !important; font-size: 11px !important; font-weight: 700 !important; margin-left: 6px !important; color: var(--accent) !important; } .tnd-unit { font-size: 11px !important; font-weight: 600 !important; vertical-align: super !important; margin-left: 2px !important; } .product_header_container .product-price, .product_p_price_container .product-price, .product-price, .product-miniature .product-price { font-size: 25px !important; font-weight: 600 !important; line-height: 1.2 !important; color: var(--accent) !important; font-family: "Avenir Medium", "Avenir", sans-serif !important; letter-spacing: 0.5px !important; margin: 0 !important; padding: 0 !important; display: block !important; order: -1 !important; } /* ---- Bouton "Ajouter au panier" ---- */ .add-to-cart { border-radius: 8px !important; padding: 5px 24px !important; min-width: 300px !important; font-weight: 600 !important; font-family: 'Avenir', sans-serif !important; text-transform: uppercase !important; } .product-miniature .add-to-cart { display: flex !important; width: 100% !important; align-items: center !important; justify-content: center !important; gap: 6px !important; background: transparent !important; color: var(--text) !important; border: 1px solid var(--text) !important; border-radius: 6px !important; padding: 11px 14px !important; font-size: 14px !important; font-weight: 500 !important; text-transform: none !important; min-width: unset !important; transition: background .2s ease, color .2s ease !important; } .product-miniature .add-to-cart:hover { background: var(--text) !important; color: #fff !important; } /* Ne pas appliquer le style add-to-cart "plein" sur les listes de produits. Couvre aussi le bouton "View" (variantes / rupture de stock) qui n'a que .btn.btn-product-list sans .add-to-cart — il doit avoir exactement le même gabarit (largeur, alignement) que "Ajouter au panier". */ .btn.btn-product-list.add-to-cart, .btn.btn-product-list { display: flex !important; width: 100% !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; border-radius: 6px !important; padding: 11px 14px !important; min-width: unset !important; font-weight: 500 !important; font-family: inherit !important; text-transform: none !important; text-decoration: none !important; background: transparent !important; color: #1a1a1a !important; border: 1px solid #1a1a1a !important; } .btn.btn-product-list:hover { background: #1a1a1a !important; color: #fff !important; } .btn.btn-product-list.add-to-cart { font-family: "Avenir", "Avenir Next", Arial, sans-serif !important; } /* Icône panier avant le titre (page produit, bouton plein) */ .add-to-cart::before { content: url('data:image/svg+xml;utf8,<svg viewBox="0 0 47.13 44.47" xmlns="http://www.w3.org/2000/svg" width="28" height="28" style="vertical-align: middle; margin-right: 12px; font-weight: bold;"><g><path fill="white" d="M30.05,17.81c-0.38,0-0.69-0.31-0.69-0.69v-3.44c0-3.79-2.77-6.87-6.18-6.87S17,9.89,17,13.68v3.44c0,0.38-0.31,0.69-0.69,0.69c-0.38,0-0.69-0.31-0.69-0.69v-3.44c0-4.54,3.39-8.24,7.56-8.24s7.56,3.7,7.56,8.24v3.44C30.74,17.5,30.43,17.81,30.05,17.81"/><path fill="white" d="M31.09,37.39H15.27c-1.53,0-2.95-0.61-4-1.73c-1.05-1.11-1.58-2.57-1.49-4.09l0.88-14.96c0.09-1.45,1.29-2.59,2.74-2.59h19.55c1.45,0,2.66,1.14,2.74,2.59l0.88,14.96c0.09,1.53-0.44,2.98-1.49,4.09C34.04,36.77,32.62,37.39,31.09,37.39 M13.41,15.4c-0.73,0-1.33,0.57-1.37,1.29l-0.88,14.95c-0.07,1.15,0.33,2.23,1.12,3.07c0.79,0.83,1.85,1.29,3,1.29H31.1c1.15,0,2.21-0.46,3-1.29s1.18-1.92,1.12-3.07l-0.88-14.95c-0.04-0.73-0.65-1.29-1.37-1.29C32.97,15.4,13.41,15.4,13.41,15.4z"/></g></svg>'); display: inline-block; margin-right: -2px; vertical-align: middle; margin-top: 3px; } /* Bouton désactivé — rupture de stock RÉELLE uniquement (classe posée par JS, jamais sur un simple disabled temporaire) */ .add-to-cart.js-oos-real { background: #f0f0f0 !important; color: #000 !important; border: 1.5px solid #000 !important; cursor: not-allowed !important; opacity: 1 !important; font-size: 0 !important; } .add-to-cart.js-oos-real .bag-icon, .add-to-cart.js-oos-real .spinner-icon { display: none !important; } .add-to-cart.js-oos-real::after { content: "Rupture de stock" !important; font-size: 14px !important; font-weight: 600 !important; font-family: "Avenir", sans-serif !important; } /* Fix hauteur + icône bouton — page catégorie (couvre aussi "View") */ body#category .product-miniature .add-to-cart, body#category .btn.btn-product-list { height: 38px !important; min-height: unset !important; padding: 0 14px !important; line-height: 28px !important; font-size: 12px !important; } body#category .product-miniature .add-to-cart .bag-icon, body#category .btn.btn-product-list .bag-icon { display: none !important; } @media (max-width: 767px) { body#category .product-miniature .add-to-cart, body#category .btn.btn-product-list { min-height: 44px !important; height: 44px !important; padding: 10px 16px !important; line-height: 1.2 !important; } } /* 1. Supprimer les icônes du bouton "Ajouter au panier" */ .product-miniature .add-to-cart .bag-icon, .product-miniature .add-to-cart .spinner-icon { display: none !important; } /* 2. Police Avenir sur les textes des fiches produits (listing) */ .product-miniature .product-title, .product-miniature .product-title a, .product-miniature .product-brand, .product-miniature .product-category-name, .product-miniature .product-reference, .product-miniature .product-description-short, .product-miniature .add-to-cart .add-to-cart { font-family: "Avenir", "Avenir Next", "Helvetica Neue", Arial, sans-serif !important; } body:not(#product) .product-miniature .bag-icon, body:not(#product) .add-to-cart .bag-icon, body:not(#product) .btn-product-list .bag-icon, body:not(#product) .add-to-cart::before { display: none !important; content: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; } /* Icône SVG uniquement sur le bouton principal "Ajouter au panier" de la fiche produit — jamais sur les miniatures du carrousel */ body#product .product-add-to-cart .add-to-cart::before { display: inline-block !important; content: url('data:image/svg+xml;utf8,<svg viewBox="0 0 47.13 44.47" xmlns="http://www.w3.org/2000/svg" width="28" height="28" style="vertical-align: middle; margin-right: 12px; font-weight: bold;"><g><path fill="white" d="M30.05,17.81c-0.38,0-0.69-0.31-0.69-0.69v-3.44c0-3.79-2.77-6.87-6.18-6.87S17,9.89,17,13.68v3.44c0,0.38-0.31,0.69-0.69,0.69c-0.38,0-0.69-0.31-0.69-0.69v-3.44c0-4.54,3.39-8.24,7.56-8.24s7.56,3.7,7.56,8.24v3.44C30.74,17.5,30.43,17.81,30.05,17.81"/><path fill="white" d="M31.09,37.39H15.27c-1.53,0-2.95-0.61-4-1.73c-1.05-1.11-1.58-2.57-1.49-4.09l0.88-14.96c0.09-1.45,1.29-2.59,2.74-2.59h19.55c1.45,0,2.66,1.14,2.74,2.59l0.88,14.96c0.09,1.53-0.44,2.98-1.49,4.09C34.04,36.77,32.62,37.39,31.09,37.39 M13.41,15.4c-0.73,0-1.33,0.57-1.37,1.29l-0.88,14.95c-0.07,1.15,0.33,2.23,1.12,3.07c0.79,0.83,1.85,1.29,3,1.29H31.1c1.15,0,2.21-0.46,3-1.29s1.18-1.92,1.12-3.07l-0.88-14.95c-0.04-0.73-0.65-1.29-1.37-1.29C32.97,15.4,13.41,15.4,13.41,15.4z"/></g></svg>') !important; } /* Sécurité supplémentaire : re-masquer explicitement l'icône sur toutes les miniatures produits, même sur body#product */ body#product .product-miniature .add-to-cart::before { display: none !important; content: none !important; } /* ---- Carrousel produits (Elementor, home/catégorie) — hauteur égale, layout ---- */ .elementor-products-carousel.swiper-products-carousel { display: flex !important; } .elementor-products-carousel .swiper-wrapper { display: flex !important; align-items: stretch !important; } .elementor-products-carousel .js-product-miniature-wrapper { display: flex !important; flex-direction: column !important; } .elementor-products-carousel .product-miniature.product-miniature-grid { display: flex !important; flex-direction: column !important; height: 100% !important; min-height: 650px !important; } .elementor-products-carousel .thumbnail-container { display: flex !important; align-items: center !important; justify-content: center !important; height: 280px !important; overflow: hidden !important; contain: layout !important; } .elementor-products-carousel .thumbnail-container img { width: 100% !important; height: 100% !important; object-fit: contain !important; } .elementor-products-carousel .product-description { flex: 1 !important; display: flex !important; flex-direction: column !important; } .elementor-products-carousel .row.extra-small-gutters { flex: 1 !important; display: flex !important; flex-direction: column !important; } .elementor-products-carousel .row.extra-small-gutters > .col { flex: 1 !important; } .elementor-products-carousel .product-brand { height: 18px !important; overflow: hidden !important; } .elementor-products-carousel .product-title { height: 42px !important; overflow: hidden !important; text-overflow: ellipsis !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; } .elementor-products-carousel .product-price-and-shipping { height: 50px !important; margin-top: auto !important; margin-bottom: 15px !important; } .elementor-products-carousel .products-variants { height: auto !important; overflow: visible !important; margin-bottom: 10px !important; display: flex !important; flex-direction: column !important; gap: 6px !important; } .elementor-products-carousel .bz-colors-label { height: auto !important; overflow: visible !important; } .elementor-products-carousel .variant-links { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; height: auto !important; } .elementor-products-carousel .product-add-cart { margin-top: auto !important; padding-top: 10px !important; } .elementor-products-carousel .add-to-cart { width: 100% !important; height: 45px !important; } @media (max-width: 1200px) { .elementor-products-carousel .product-miniature.product-miniature-grid { min-height: 620px !important; } .elementor-products-carousel .thumbnail-container { height: 260px !important; } } @media (max-width: 768px) { .elementor-products-carousel .product-miniature.product-miniature-grid { min-height: 580px !important; } .elementor-products-carousel .thumbnail-container { height: 240px !important; } .elementor-products-carousel .product-price, .product-price { font-size: 18px !important; } .product-miniature .regular-price { font-size: 11px !important; } .product-miniature .regular-price::before { font-size: 10px !important; } } @media (max-width: 480px) { .elementor-products-carousel .product-miniature.product-miniature-grid { min-height: 550px !important; } .elementor-products-carousel .thumbnail-container { height: 220px !important; } .elementor-products-carousel .product-title { height: 36px !important; } .elementor-products-carousel .product-price, .product-price { font-size: 16px !important; } .product-miniature .regular-price { font-size: 10px !important; gap: 4px !important; } .product-miniature .regular-price::before { font-size: 9px !important; } } /* ============================================================ FIX RACINE v2 — espace blanc dans le carrousel produits ============================================================ */ .elementor-products-carousel .product-miniature.product-miniature-grid { height: auto !important; min-height: 0 !important; } .elementor-products-carousel .product-price-and-shipping { height: auto !important; margin-top: 8px !important; margin-bottom: 12px !important; } .elementor-products-carousel .product-add-cart { margin-top: 10px !important; } .elementor-products-carousel .thumbnail-container { height: auto !important; aspect-ratio: 3 / 4 !important; overflow: hidden !important; } .elementor-products-carousel .thumbnail-container img { width: 100% !important; height: 100% !important; object-fit: cover !important; } .elementor-products-carousel .swiper-slide { align-self: flex-start !important; height: auto !important; } .elementor-products-carousel .js-product-miniature-wrapper { height: auto !important; align-self: flex-start !important; } .elementor-products-carousel .swiper-wrapper { align-items: flex-start !important; } /* ============================================================ FIX — aligne les boutons "Ajouter au panier" même quand une carte n'a pas de bloc "couleurs" (produit à variante unique). ============================================================ */ .elementor-products-carousel .row.extra-small-gutters:not(:has(.products-variants)) .product-price-and-shipping { margin-top: 65.5px !important; } /* ---- Réaffiche les étiquettes promo (PROMO, pourcentage, etc.) ---- */ .product-flags.js-product-flags { display: flex !important; flex-wrap: wrap !important; } /* ---- Flèches carrousel (variante icône SVG chevron) ---- */ .elementor-swiper-button-next::before, .elementor-swiper-button-prev::before { content: none !important; display: none !important; width: 0 !important; height: 0 !important; } .swiper-button-next.elementor-swiper-button-next, .swiper-button-prev.elementor-swiper-button-prev { width: 100px !important; height: 100px !important; margin-top: -50px !important; background: none !important; } div.swiper-button-next.elementor-swiper-button-next::after, div.swiper-button-prev.elementor-swiper-button-prev::after { content: '' !important; font-size: 0 !important; color: transparent !important; width: 100px !important; height: 100px !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; display: block !important; } div.swiper-button-next.elementor-swiper-button-next::after { background-image: url("data:image/svg+xml,%3Csvg%20fill%3D%22%23000000%22%20height%3D%22800px%22%20width%3D%22800px%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20407.436%20407.436%22%3E%3Cpolygon%20points%3D%22112.814%2C0%2091.566%2C21.178%20273.512%2C203.718%2091.566%2C386.258%20112.814%2C407.436%20315.869%2C203.718%20%22%2F%3E%3C%2Fsvg%3E") !important; } div.swiper-button-prev.elementor-swiper-button-prev::after { background-image: url("data:image/svg+xml,%3Csvg%20fill%3D%22%23000000%22%20height%3D%22800px%22%20width%3D%22800px%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20404.258%20404.258%22%3E%3Cpolygon%20points%3D%22289.927%2C18%20265.927%2C0%20114.331%2C202.129%20265.927%2C404.258%20289.927%2C386.258%20151.831%2C202.129%20%22%2F%3E%3C%2Fsvg%3E") !important; } .elementor-swiper-button.swiper-button-disabled { opacity: 0.35 !important; } .swiper-button-prev.elementor-swiper-button-prev { left: -70px !important; } .swiper-button-next.elementor-swiper-button-next { right: -70px !important; } /* Flèches Slider Revolution Uranus */ .tp-leftarrow.tparrows.uranus, .tp-rightarrow.tparrows.uranus { background: transparent !important; border: none !important; box-shadow: none !important; color: #000 !important; } .tp-leftarrow.tparrows.uranus::before, .tp-rightarrow.tparrows.uranus::before { color: #000 !important; font-size: 38px !important; font-weight: 400; transition: all .3s ease; } .tp-leftarrow.tparrows.uranus:hover::before, .tp-rightarrow.tparrows.uranus:hover::before { color: #000 !important; transform: scale(1.15); } @media (max-width: 767px) { .swiper-button-next.elementor-swiper-button-next, .swiper-button-prev.elementor-swiper-button-prev { width: 40px !important; height: 40px !important; margin-top: -20px !important; } .swiper-button-next.elementor-swiper-button-next { right: -30px !important; } .swiper-button-prev.elementor-swiper-button-prev { left: -30px !important; } } /* Force l'affichage des flèches dès le premier rendu, sans attendre Swiper */ .elementor-swiper-button.swiper-button-next, .elementor-swiper-button.swiper-button-prev, .elementor-swiper-button-next, .elementor-swiper-button-prev { display: flex !important; opacity: 1 !important; visibility: visible !important; } .elementor-swiper-button.swiper-button-next, .elementor-swiper-button.swiper-button-prev, .elementor-swiper-button-next, .elementor-swiper-button-prev { width: 60px !important; height: 60px !important; margin-top: -30px !important; } div.swiper-button-next.elementor-swiper-button-next::after, div.swiper-button-prev.elementor-swiper-button-prev::after { width: 60px !important; height: 60px !important; } /* ---- Variantes couleur : badge "+N" quand plus de 4 couleurs ---- */ .variant-links { counter-reset: bz-extra; position: relative; } .variant-links .color:nth-child(n+5) { counter-increment: bz-extra; position: absolute !important; /* sort l'élément du flux, libère la place */ visibility: hidden !important; /* le rend invisible sans conflit avec le "display" inline */ pointer-events: none !important; top: 0; left: 0; } .variant-links::after { content: "+" counter(bz-extra); display: none; width: 25px; height: 25px; border-radius: 5px; border: 1px solid rgba(0,0,0,.1); align-items: center; justify-content: center; background: #ffff; color: #1a1a1a; font-size: 11px; font-weight: 700; cursor: pointer; flex-shrink: 0; } .variant-links:has(.color:nth-child(5))::after { display: inline-flex; } @media (max-width: 767px) { .variant-links:has(.color:nth-child(5))::after { display: none !important; content: none !important; } } /* ---- Image entière visible, sans recadrage (#js-product-list) ---- */ #js-product-list .product-miniature .thumbnail-container { flex: none !important; max-width: 100% !important; width: 100% !important; aspect-ratio: 1 / 1 !important; height: auto !important; margin: 0 0 12px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #ffff!important; border-radius: 8px !important; overflow: hidden !important; } @media (max-width: 1024px) { #js-product-list .js-product-miniature-wrapper { width: calc(50% - 10px) !important; max-width: calc(50% - 10px) !important; flex: 0 0 calc(50% - 10px) !important; } } @media (max-width: 600px) { #js-product-list .js-product-miniature-wrapper { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; } body#category .products, body#category .products .row { display: flex !important; flex-direction: column !important; grid-template-columns: none !important; gap: 16px !important; padding: 0 12px !important; } } .products.row.products-grid { margin-top: 120px !important; } /* ========================================================================= FIX MOBILE — restaure le line-clamp à 2 lignes sur le titre du carrousel ========================================================================= */ @media (max-width: 1024px) { .elementor-products-carousel .product-title.product-title, .swiper-default-carousel .product-title.product-title { display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: normal !important; } .elementor-products-carousel .product-title.product-title a, .swiper-default-carousel .product-title.product-title a { display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; white-space: normal !important; } } /* ========================================================================= FIX MOBILE — flèches du carrousel repositionnées au niveau de l'image ========================================================================= */ @media (max-width: 1024px) { .elementor-products-carousel .elementor-swiper-button { top: 100px !important; transform: translateY(0) !important; width: 26px !important; height: 26px !important; background: rgba(255,255,255,.92) !important; border-radius: 50% !important; box-shadow: 0 1px 4px rgba(0,0,0,.15) !important; z-index: 5 !important; } .elementor-products-carousel .elementor-swiper-button-prev { left: 2px !important; } .elementor-products-carousel .elementor-swiper-button-next { right: 2px !important; } } @media (max-width: 768px) { .elementor-products-carousel .elementor-swiper-button { top: 80px !important; } } @media (max-width: 480px) { .elementor-products-carousel .elementor-swiper-button { top: 55px !important; } } /* ---- HOMOGÉNÉISATION — cartes des CARROUSELS alignées visuellement sur les cartes de grille produits ---- */ .elementor-products-carousel .product-miniature.product-miniature-grid, .swiper-default-carousel .product-miniature.product-miniature-grid, body#product .product-carousel .product-miniature, body#cart .crossselling-products .product-miniature { background: #fff !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; padding: 14px !important; box-sizing: border-box !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .10) !important; transition: transform .2s ease, box-shadow .2s ease !important; } .elementor-products-carousel .product-miniature.product-miniature-grid:hover, .swiper-default-carousel .product-miniature.product-miniature-grid:hover, body#product .product-carousel .product-miniature:hover, body#cart .crossselling-products .product-miniature:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, .15) !important; transform: translateY(-2px) !important; } .tax-shipping-delivery-label { display: none !important; } /* ---- "Envie du meilleur pour votre peau ?" (section injectée par JS) ---- */ .envie-du-meilleur, .envie-du-meilleur h2 { border: none !important; } .envie-du-meilleur { margin-top: -50px !important; margin-bottom: -60px !important; padding-top: 0 !important; padding-bottom: 0 !important; margin-left: 50px !important; } .envie-du-meilleur h2 { margin-top: 0 !important; margin-bottom: 10px !important; /* ou 0 si tu veux aucun espace avec le texte */ } .envie-du-meilleur p { margin-top: 0 !important; margin-bottom: 0 !important; margin-left: 70px !important; } .envie-du-meilleur h2 { font-size: 42px !important; line-height: 1.2; } .envie-du-meilleur p { font-size: 18px !important; line-height: 1.6; } .envie-du-meilleur-text { margin-left: 12% !important; } .envie-du-meilleur-count { display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; min-width: auto !important; border: none !important; border-radius: 0 !important; background: transparent !important; color: #000 !important; font-family: "Avenir", sans-serif !important; font-size: 14px !important; font-weight: 400 !important; } .envie-du-meilleur-count { display: none !important; } @media (max-width: 1024px) { .envie-du-meilleur { margin-top: 0 !important; margin-bottom: 20px !important; } .envie-du-meilleur h2 { font-size: 30px !important; line-height: 1.25 !important; margin-bottom: 12px !important; } .envie-du-meilleur p { font-size: 15px !important; } } @media (max-width: 768px) { .envie-du-meilleur { margin-top: 0 !important; margin-bottom: 16px !important; } .envie-du-meilleur h2 { font-size: 24px !important; line-height: 1.25 !important; margin-bottom: 10px !important; } .envie-du-meilleur p { font-size: 13px !important; } } @media (max-width: 480px) { .envie-du-meilleur { margin-top: 0 !important; margin-bottom: 12px !important; } .envie-du-meilleur h2 { font-size: 20px !important; line-height: 1.25 !important; margin-bottom: 8px !important; } .envie-du-meilleur p { font-size: 12px !important; } } @media (max-width: 1024px) { .products-selection { position: relative !important; top: 0 !important; } } /* ---- "COMPLÉTEZ VOTRE ROUTINE" (section title catégorie) ---- */ .category-products .section-title span { font-family: 'Apollo', serif !important; font-size: 38px !important; font-weight: 400 !important; line-height: 1.2; letter-spacing: 1px; } .category-products .section-title { text-align: center; } .category-products .section-title span { font-size: 0 !important; } .category-products .section-title span::after { content: "COMPLÉTEZ VOTRE ROUTINE"; font-size: 42px !important; } @media (max-width: 767px) { .category-products .section-title span { font-size: 0 !important; } .category-products .section-title span::after { content: "COMPLÉTEZ VOTRE ROUTINE"; font-size: 18px !important; } } /* ============================================================================= 6. PAGE PRODUIT (fiche produit complète) ============================================================================= */ .product_header_container { display: flex !important; flex-direction: column !important; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 0px solid; } .product_header_container h1.page-title { font-family: 'Avenir Next', sans-serif !important; font-weight: 100 !important; font-size: 25px !important; letter-spacing: 1px !important; } .product_header_container h1.page-title span { font-family: 'Avenir Next', 'Avenir', sans-serif !important; font-weight: 500 !important; } .product-manufacturer { order: -1 !important; display: flex !important; } .manufacturer-name-text { font-weight: 600 !important; text-transform: uppercase !important; font-size: 26px !important; color: #1a1a1a !important; display: block !important; } .product-add-to-cart.js-product-add-to-cart { display: flex !important; flex-direction: column !important; } .product-add-to-cart .row { display: flex !important; flex-direction: column !important; gap: 15px !important; } .product-quantity { width: 100% !important; } .product-quantity .qty { display: flex !important; align-items: center !important; gap: 10px !important; } .product-quantity .qty::before { content: 'QUANTITÉ:' !important; font-weight: 500 !important; font-size: 17px !important; font-family: 'Avenir', sans-serif !important; letter-spacing: 0.6px !important; margin-right: 5px !important; } .benefits-list .benefit-title { font-family: "Avenir", "Avenir Next", sans-serif !important; font-weight: 400 !important; font-size: 17px !important; color: #1a1a1a !important; line-height: 1.4 !important; } .benefits-list .benefit-icon i { font-size: 18px !important; } .benefits-list li { display: flex; align-items: center; gap: 10px; } .benefit-icon svg { stroke-width: 2; } .benefit-icon svg path { stroke: #1a1a1a; stroke-width: 1; } .benefit-icon svg path { stroke: #1a1a1a; stroke-width: 0.5; } .benefit-title { font-weight: 700; } .benefits-block { max-width: 500px; } .benefits-block { transform: scale(0.8); transform-origin: left top; } @media (max-width: 768px) { body#product .benefits-block { transform: none !important; width: calc(100% + 24px) !important; max-width: calc(100% + 24px) !important; margin-left: -12px !important; margin-right: -12px !important; box-sizing: border-box !important; } body#product .benefits-list { display: flex !important; flex-direction: column !important; gap: 10px !important; width: 100% !important; } body#product .benefits-list li { display: flex !important; align-items: center !important; gap: 10px !important; width: 100% !important; } body#product .benefit-icon { flex-shrink: 0 !important; width: 20px !important; } body#product .benefit-icon svg { width: 20px !important; height: 20px !important; } body#product .benefit-content { flex: 1 !important; min-width: 0 !important; } body#product .benefit-title { font-size: 13.5px !important; line-height: 1.3 !important; white-space: nowrap !important; } } @media (max-width: 380px) { body#product .benefit-title { white-space: normal !important; font-size: 13px !important; } } @media (max-width: 768px) { body#product .product-prices .product-price.current-price-value { font-size: 26px !important; line-height: 1.2 !important; } } @media (max-width: 480px) { body#product .product-prices .product-price.current-price-value { font-size: 24px !important; } } /* ---- Fiches produit — style ARTDECO générique appliqué même hors miniature ---- */ body#product .product-miniature { all: initial !important; display: flex !important; flex-direction: column !important; height: 100% !important; } body#product .product-miniature-wrapper .product-miniature { border: none !important; background: none !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; } body#product .product-miniature-wrapper { padding: 0 8px !important; } /* ---- Accordéon Description / Détails ---- */ .iqit-accordion .title a { font-family: 'Avenir', sans-serif; font-weight: bold; font-size: 20px; text-transform: uppercase; } #productdaas-accordion-description { display: none; } #productdaas-accordion-description.show { display: block; } .product-accessories.block.block-section { display: none !important; } .product-accessories { display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; } /* ========================================================================= FIX — réduction de l'espace entre le titre "Description" et son contenu ========================================================================= */ html body .iqit-accordion .card .title { padding-bottom: 0 !important; margin-bottom: 0 !important; } html body .iqit-accordion .card .title a { padding-bottom: 8px !important; display: block !important; } html body .iqit-accordion .card .content { padding-top: 0 !important; margin-top: 0 !important; } html body #productdaas-accordion-description .rte-content { margin-top: 0 !important; padding-top: 0 !important; } html body #productdaas-accordion-description .rte-content p:first-child { margin-top: 0 !important; } html body #productdaas-accordion-description .rte-content p:empty { display: none !important; margin: 0 !important; padding: 0 !important; } .product-additional-info.js-product-additional-info { display: none !important; } /* icône par défaut : flèche vers le bas (fermé) */ #productdaas-accordion .angle-up { display: none; } #productdaas-accordion .angle-down { display: inline-block; } /* quand Bootstrap ouvre le panneau, il retire la classe .collapsed du lien */ #productdaas-accordion .title a:not(.collapsed) .angle-up { display: inline-block; } #productdaas-accordion .title a:not(.collapsed) .angle-down { display: none; } #manufacturer-short-description { display: none !important; } #iqit-wishlist-product-btn, #iqit-wishlist-product-btn:hover, #iqit-wishlist-product-btn:focus, #iqit-wishlist-product-btn:active { background: transparent !important; border: 1px solid #000!important; /* Change la couleur si besoin */ border-radius: 30% !important; box-shadow: none !important; width: 60px; height: 50px; display: flex; align-items: center; justify-content: center; position: relative; top: -1px; } /* ---- Avis (reviews) — texte traduit ---- */ .iqitreviews-title { font-size: 0 !important; } .iqitreviews-title::after { content: "Avis"; font-size: 22px; /* adapte selon ton thème */ } #iqitreviews-snippet { font-size: 0 !important; } #iqitreviews-snippet::after { content: "Aucun avis"; font-size: 16px !important; } #product-availability { display: none !important; } #product .product-flags { display: none !important; } .col.col-auto.col-md.price { display: flex !important; align-items: center; flex-wrap: nowrap !important; white-space: nowrap !important; gap: 5px; } /* ========================================================================= FIX FINAL v2 — "QUANTITÉ : [-] 1 [+]" avec boutons séparés ========================================================================= */ body#product .product-quantity .qty { width: auto !important; display: flex !important; align-items: center !important; gap: 10px !important; } body#product .product-quantity .qty .input-group.bootstrap-touchspin { display: flex !important; align-items: center !important; gap: 12px !important; border: none !important; background: transparent !important; overflow: visible !important; width: max-content !important; height: auto !important; position: relative !important; } body#product .product-quantity .qty .input-group.bootstrap-touchspin * { position: static !important; float: none !important; } body#product .product-quantity .qty .input-group-btn-vertical { display: contents !important; } body#product .product-quantity .qty #quantity_wanted { order: 2 !important; width: 24px !important; height: auto !important; text-align: center !important; border: none !important; background: transparent !important; font-weight: 500 !important; font-size: 16px !important; font-family: 'Avenir', sans-serif !important; padding: 0 !important; margin: 0 !important; -moz-appearance: textfield !important; } body#product .product-quantity .qty #quantity_wanted::-webkit-outer-spin-button, body#product .product-quantity .qty #quantity_wanted::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0 !important; } body#product .product-quantity .qty .btn-touchspin { border: 1px solid #1a1a1a !important; border-radius: 8px !important; background: transparent !important; width: 32px !important; height: 32px !important; min-width: 32px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 0 !important; line-height: normal !important; cursor: pointer !important; padding: 0 !important; margin: 0 !important; color: #1a1a1a !important; } body#product .product-quantity .qty .bootstrap-touchspin-down { order: 1 !important; } body#product .product-quantity .qty .bootstrap-touchspin-up { order: 3 !important; } body#product .product-quantity .qty .bootstrap-touchspin-up i, body#product .product-quantity .qty .bootstrap-touchspin-down i { display: none !important; } body#product .product-quantity .qty .bootstrap-touchspin-up::before { content: "+" !important; font-size: 15px !important; font-weight: 500 !important; } body#product .product-quantity .qty .bootstrap-touchspin-down::before { content: "-" !important; font-size: 15px !important; font-weight: 500 !important; } body#product .product-quantity .qty .bootstrap-touchspin-up:hover, body#product .product-quantity .qty .bootstrap-touchspin-down:hover { background: #f2f2f2 !important; } @media (max-width: 767px) { body#product .page-content, body#product .product-container, body#product .container { max-width: 100% !important; padding-inline: 8px !important; } } /* ========================================================================= FIX MOBILE — inverse UNIQUEMENT accordéon ↔ bloc infos produit, les images restent en première position, inchangées. ========================================================================= */ @media (max-width: 767px) { body#product .row.product-info-row { display: flex !important; flex-direction: column !important; } body#product .col-md-7.col-product-image { display: contents !important; } body#product .col-md-7.col-product-image > * { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } body#product .col-product-image .images-container { order: 1 !important; } body#product .col-product-image .after-cover-tumbnails, body#product .col-product-image .after-cover-tumbnails2, body#product .col-product-image #products-tab-anchor { order: 1 !important; } body#product .col-md-5.col-product-info { order: 2 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } body#product #productdaas-accordion { order: 3 !important; } } /* ============================================================ THUMBNAILS PRODUIT — FIX AVEC FLECHES, scope strict #product-images-thumbs ============================================================ */ #product-images-thumbs { position: relative !important; height: 480px !important; max-height: 480px !important; } #product-images-thumbs .thumb-arrow { position: absolute; left: 0; right: 0; height: 28px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #e0e0e0; border-radius: 4px; z-index: 5; cursor: pointer; transition: opacity .15s ease; } #product-images-thumbs .thumb-arrow:hover { background: #f9f9f9; } #product-images-thumbs .thumb-arrow.is-disabled { opacity: .3; cursor: default; pointer-events: none; } #product-images-thumbs .thumb-arrow--up { top: 0; } #product-images-thumbs .thumb-arrow--down { bottom: 0; } #product-images-thumbs .thumb-viewport { position: absolute; top: 32px; bottom: 32px; left: 0; right: 0; overflow: hidden !important; /* plus de scrollbar */ } #product-images-thumbs .swiper-wrapper { display: flex !important; flex-direction: column !important; gap: 8px; transition: transform .25s ease !important; overflow: visible !important; /* on gère via transform, pas scroll */ } #product-images-thumbs .swiper-slide { flex-shrink: 0 !important; } #product-images-thumbs .thumb-container img.js-thumb-selected { border: 2px solid #e6007e !important; } /* Mobile: flèches gauche/droite au lieu de haut/bas */ @media (max-width: 767px) { #product-images-thumbs { height: auto !important; max-height: none !important; } #product-images-thumbs .thumb-viewport { position: static; overflow: hidden !important; } #product-images-thumbs .swiper-wrapper { flex-direction: row !important; } #product-images-thumbs .thumb-arrow--up, #product-images-thumbs .thumb-arrow--down { top: 50%; bottom: auto; transform: translateY(-50%); width: 28px; height: 40px; left: auto; right: auto; } #product-images-thumbs .thumb-arrow--up { left: 0; } #product-images-thumbs .thumb-arrow--down { right: 0; } } /* ---- Carrousel "produits similaires" (page produit uniquement) ---- */ body#product .swiper-wrapper, body#product .swiper-slide, body#product .js-product-miniature-wrapper.product-carousel { height: auto !important; } body#product .swiper-wrapper { display: flex !important; align-items: stretch !important; } body#product .js-product-miniature-wrapper.product-carousel { display: flex !important; flex-direction: column !important; width: 100% !important; } body#product .product-carousel .product-miniature { display: flex !important; flex-direction: column !important; height: 100% !important; min-height: 520px !important; } body#product .product-carousel .thumbnail-container { height: 220px !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; } body#product .product-carousel .thumbnail-container img { max-height: 100% !important; width: auto !important; object-fit: contain !important; } body#product .product-carousel .product-description { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; } body#product .product-carousel .product-title a { display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; min-height: 2.6em !important; } body#product .product-carousel .products-variants { min-height: 34px !important; margin-bottom: 10px !important; } body#product .product-carousel .product-add-cart { margin-top: auto !important; padding-top: 10px !important; } body#product .product-carousel .add-to-cart, body#product .product-carousel .btn.btn-product-list { width: 100% !important; } @media (max-width: 1024px) { body#product .product-carousel .product-miniature { min-height: 380px !important; } body#product .product-carousel .thumbnail-container { height: 160px !important; } } @media (max-width: 768px) { body#product .product-carousel .product-miniature { min-height: 340px !important; } body#product .product-carousel .thumbnail-container { height: 140px !important; } } @media (max-width: 480px) { body#product .product-carousel .product-miniature { min-height: 300px !important; } body#product .product-carousel .thumbnail-container { height: 120px !important; } } /* ========================================================================= FIX — empêche les pastilles de couleur de passer à la ligne dans le carrousel "produits similaires" (page produit) ========================================================================= */ body#product .product-carousel .variant-links { flex-wrap: nowrap !important; overflow: hidden !important; } @media (max-width: 1024px) { body#product .product-carousel .variant-links .color { width: 18px !important; height: 18px !important; } body#product .product-carousel .variant-links { gap: 4px !important; } } @media (max-width: 480px) { body#product .product-carousel .variant-links .color { width: 16px !important; height: 16px !important; } body#product .product-carousel .variant-links { gap: 3px !important; } } @media (max-width: 1024px) { body#product .product-carousel .variant-links::after { width: 18px !important; height: 18px !important; font-size: 9px !important; } } @media (max-width: 480px) { body#product .product-carousel .variant-links::after { width: 16px !important; height: 16px !important; font-size: 8px !important; } } body#product .product-carousel .products-variants { height: 46px !important; min-height: 46px !important; max-height: 46px !important; overflow: hidden !important; } /* ========================================================================= CARROUSEL PRODUITS — variante .swiper-default-carousel (produits similaires / cross-selling), alignée sur le style Elementor ========================================================================= */ .swiper-default-carousel.swiper-products-carousel, .swiper-default-carousel { display: flex !important; } .swiper-default-carousel .js-product-miniature-wrapper { display: flex !important; flex-direction: column !important; } .swiper-default-carousel .product-miniature.product-miniature-grid { display: flex !important; flex-direction: column !important; height: 100% !important; min-height: 650px !important; } .swiper-default-carousel .thumbnail-container { display: flex !important; align-items: center !important; justify-content: center !important; height: 280px !important; overflow: hidden !important; contain: layout !important; } .swiper-default-carousel .thumbnail-container img { width: 100% !important; height: 100% !important; object-fit: contain !important; } .swiper-default-carousel .product-description { flex: 1 !important; display: flex !important; flex-direction: column !important; } .swiper-default-carousel .row.extra-small-gutters { flex: 1 !important; display: flex !important; flex-direction: column !important; } .swiper-default-carousel .row.extra-small-gutters > .col { flex: 1 !important; } .swiper-default-carousel .product-brand { height: 18px !important; overflow: hidden !important; } .swiper-default-carousel .product-title { height: 42px !important; overflow: hidden !important; text-overflow: ellipsis !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; } .swiper-default-carousel .product-price-and-shipping { height: 50px !important; margin-top: auto !important; margin-bottom: 15px !important; } .swiper-default-carousel .products-variants { height: auto !important; overflow: visible !important; margin-bottom: 10px !important; display: flex !important; flex-direction: column !important; gap: 6px !important; } .swiper-default-carousel .bz-colors-label { height: auto !important; overflow: visible !important; } .swiper-default-carousel .variant-links { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; height: auto !important; } .swiper-default-carousel .product-add-cart { margin-top: auto !important; padding-top: 10px !important; } .swiper-default-carousel .add-to-cart, .swiper-default-carousel .btn.btn-product-list { width: 100% !important; height: 45px !important; } .swiper-default-carousel .product-price { font-weight: 700 !important; font-size: 20px !important; } .swiper-default-carousel .swiper-pagination-product { display: none !important; } .swiper-default-carousel .swiper-button-prev, .swiper-default-carousel .swiper-button-next { width: 40px !important; height: 40px !important; background: transparent !important; border: none !important; box-shadow: none !important; color: #2b2b2b !important; display: flex !important; align-items: center !important; justify-content: center !important; top: 50% !important; transform: translateY(-50%) !important; margin-top: 0 !important; } .swiper-default-carousel .swiper-button-prev::after, .swiper-default-carousel .swiper-button-next::after { display: none !important; } body#cart .crossselling-products .swiper-slide { display: flex !important; height: auto !important; } .swiper-default-carousel .swiper-button-disabled { opacity: 0.25 !important; cursor: default !important; } .swiper-default-carousel .swiper-button-prev::before { content: ''; display: block; width: 14px; height: 20px; border-left: 1px solid #2b2b2b; border-bottom: 1px solid #2b2b2b; transform: rotate(45deg); margin-left: 6px; } .swiper-default-carousel .swiper-button-next::before { content: ''; display: block; width: 14px; height: 14px; border-right: 1px solid #2b2b2b; border-top: 1px solid #2b2b2b; transform: rotate(45deg); margin-right: 6px; } /* ---- Desktop — largeur de carte identique aux autres carrousels (4/ligne) ---- */ @media (min-width: 1025px) { .swiper-default-carousel .swiper-slide { width: calc((100% - 36px) / 4) !important; max-width: calc((100% - 36px) / 4) !important; min-width: calc((100% - 36px) / 4) !important; margin-right: 12px !important; } .swiper-default-carousel .swiper-slide:last-child { margin-right: 0 !important; } body#cart .crossselling-products .swiper-slide { width: calc((100% - 36px) / 4) !important; max-width: calc((100% - 36px) / 4) !important; min-width: calc((100% - 36px) / 4) !important; margin-right: 12px !important; } body#cart .crossselling-products .swiper-slide:last-child { margin-right: 0 !important; } } /* ---- Responsive — mêmes paliers que .elementor-products-carousel ---- */ @media (max-width: 1200px) { .swiper-default-carousel .product-miniature.product-miniature-grid { min-height: 620px !important; } .swiper-default-carousel .thumbnail-container { height: 260px !important; } } @media (max-width: 1024px) { .swiper-default-carousel { padding-left: 8px !important; padding-right: 8px !important; } .swiper-default-carousel .swiper-slide { width: calc((100% - 16px) / 3) !important; max-width: calc((100% - 16px) / 3) !important; min-width: calc((100% - 16px) / 3) !important; margin-right: 8px !important; height: auto !important; display: flex !important; } .swiper-default-carousel .swiper-slide:nth-child(3n) { margin-right: 0 !important; } .swiper-default-carousel .js-product-miniature-wrapper { width: 100% !important; height: auto !important; display: flex !important; flex-direction: column !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; } .swiper-default-carousel .product-miniature.product-miniature-grid { height: auto !important; align-self: stretch !important; padding: 5px !important; width: 100% !important; display: flex !important; flex-direction: column !important; overflow: visible !important; gap: 0 !important; margin: 0 !important; min-height: 0 !important; } .swiper-default-carousel .product-description { flex: 0 1 auto !important; display: flex !important; flex-direction: column !important; gap: 0 !important; margin: 0 !important; padding: 0 !important; height: auto !important; min-height: 0 !important; } .swiper-default-carousel .thumbnail-container { margin: 0 0 2px !important; padding: 0 !important; height: 200px !important; max-height: 200px !important; min-height: 200px !important; width: 100% !important; overflow: hidden !important; background: #f5f5f5 !important; position: relative !important; border-radius: 4px !important; } .swiper-default-carousel .thumbnail-container img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } .swiper-default-carousel .product-brand { height: auto !important; min-height: 0 !important; font-size: 6.5px !important; line-height: 1.1 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; flex-shrink: 0 !important; } .swiper-default-carousel .product-title { height: auto !important; min-height: 0 !important; font-size: 6.5px !important; line-height: 1.1 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; flex-shrink: 0 !important; } .swiper-default-carousel .product-price-and-shipping { margin: 1px 0 !important; padding: 0 !important; height: auto !important; min-height: 0 !important; } .swiper-default-carousel .product-price { font-size: 8.5px !important; margin: 0 !important; padding: 0 !important; line-height: 1.2 !important; } .swiper-default-carousel .products-variants { margin: 1px 0 !important; padding: 0 !important; height: auto !important; min-height: 0 !important; } .swiper-default-carousel .variant-links { margin: 0 !important; padding: 0 !important; gap: 2px !important; height: auto !important; min-height: 0 !important; } .swiper-default-carousel .variant-links .color { width: 12px !important; height: 12px !important; margin: 0 !important; } .swiper-default-carousel .add-to-cart, .swiper-default-carousel .btn.btn-product-list { height: 28px !important; max-height: 28px !important; min-height: 28px !important; padding: 0 4px !important; font-size: 7.5px !important; gap: 3px !important; white-space: nowrap !important; flex-shrink: 0 !important; margin: 2px 0 0 0 !important; border-radius: 4px !important; width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; } .swiper-default-carousel .add-to-cart::before { width: 11px !important; height: 11px !important; margin: 0 !important; flex-shrink: 0 !important; } .swiper-default-carousel.swiper-products-carousel, .swiper-default-carousel .swiper-wrapper, .swiper-default-carousel .swiper-slide, .swiper-default-carousel .js-product-miniature-wrapper { overflow: visible !important; margin: 0 !important; padding: 0 !important; height: auto !important; min-height: 0 !important; } .swiper-default-carousel.swiper-products-carousel { padding-bottom: 2px !important; margin-bottom: 0 !important; } } @media (max-width: 768px) { .swiper-default-carousel { padding-left: 6px !important; padding-right: 6px !important; } .swiper-default-carousel .swiper-slide { width: calc((100% - 8px) / 2) !important; max-width: calc((100% - 8px) / 2) !important; min-width: calc((100% - 8px) / 2) !important; margin-right: 8px !important; height: auto !important; display: flex !important; } .swiper-default-carousel .swiper-slide:nth-child(2n) { margin-right: 0 !important; } .swiper-default-carousel .product-miniature.product-miniature-grid { min-height: auto !important; padding: 4px !important; display: flex !important; flex-direction: column !important; overflow: visible !important; gap: 0 !important; margin: 0 !important; } .swiper-default-carousel .product-add-cart { margin-top: 4px !important; } .swiper-default-carousel .thumbnail-container { margin: 0 0 2px !important; padding: 0 !important; height: 160px !important; max-height: 160px !important; min-height: 160px !important; width: 100% !important; overflow: hidden !important; background: #f5f5f5 !important; border-radius: 4px !important; } .swiper-default-carousel .thumbnail-container img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } .swiper-default-carousel .product-brand { font-size: 5.5px !important; line-height: 1.1 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; flex-shrink: 0 !important; } .swiper-default-carousel .product-title { font-size: 5.5px !important; line-height: 1.1 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; flex-shrink: 0 !important; } .swiper-default-carousel .product-price { font-size: 7.5px !important; margin: 0 !important; padding: 0 !important; line-height: 1.2 !important; } .swiper-default-carousel .variant-links .color { width: 10px !important; height: 10px !important; margin: 0 !important; } .swiper-default-carousel .add-to-cart, .swiper-default-carousel .btn.btn-product-list { height: 26px !important; max-height: 26px !important; min-height: 26px !important; padding: 0 3px !important; font-size: 6.5px !important; gap: 2px !important; white-space: nowrap !important; flex-shrink: 0 !important; margin: 2px 0 0 0 !important; border-radius: 4px !important; width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; } } @media (max-width: 480px) { .swiper-default-carousel { padding-left: 4px !important; padding-right: 4px !important; } .swiper-default-carousel .swiper-slide { width: calc((100% - 6px) / 2) !important; max-width: calc((100% - 6px) / 2) !important; min-width: calc((100% - 6px) / 2) !important; margin-right: 6px !important; } .swiper-default-carousel .swiper-slide:nth-child(2n) { margin-right: 0 !important; } .swiper-default-carousel .product-miniature.product-miniature-grid { min-height: auto !important; padding: 3px !important; } .swiper-default-carousel .product-add-cart { margin-top: 4px !important; } .swiper-default-carousel .thumbnail-container { height: 110px !important; max-height: 110px !important; min-height: 110px !important; } .swiper-default-carousel .product-title { height: auto !important; font-size: 5px !important; } .swiper-default-carousel .product-price { font-size: 7px !important; } .swiper-default-carousel .add-to-cart, .swiper-default-carousel .btn.btn-product-list { height: 24px !important; max-height: 24px !important; min-height: 24px !important; font-size: 6px !important; } } /* ============================================================================= 7. BANNIÈRES / MINI-BANNER / SECTIONS COLONNES ELEMENTOR (page d'accueil) ============================================================================= */ /* ---- Bannière catalogue avec texte en overlay ---- */ .elementor-iqit-banner { position: relative !important; display: block !important; } .elementor-iqit-banner-img { position: relative !important; display: block !important; width: 100% !important; } .elementor-iqit-banner-content { position: absolute !important; bottom: 40px !important; left: 0 !important; right: 0 !important; width: 100% !important; padding: 0 30px !important; background: transparent !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; z-index: 15 !important; box-sizing: border-box !important; } .elementor-iqit-banner-title { margin: 0 0 15px 0 !important; line-height: 1.2 !important; color: #1a1a1a !important; display: block !important; width: 100% !important; } .banner-line-1 { font-family: "Apollo", serif !important; font-size: 28px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; color: #1a1a1a !important; display: block !important; margin-bottom: 6px !important; } .banner-line-2 { font-family: "Avenir", "Avenir Next", sans-serif !important; font-size: 14px !important; font-weight: 400 !important; color: #1a1a1a !important; display: block !important; margin-bottom: 4px !important; } .banner-line-3 { font-family: "Apollo", serif !important; font-size: 28px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; color: #1a1a1a !important; display: block !important; } .elementor-iqit-banner-description { font-family: "Avenir", "Avenir Next", sans-serif !important; font-size: 13px !important; font-weight: 400 !important; color: #555 !important; margin: 0 0 5px 0 !important; line-height: 1.6 !important; max-width: 500px !important; } .elementor-button-link.elementor-button { font-family: "Avenir", "Avenir Next", sans-serif !important; padding: 10px 28px !important; background-color: #ffffff !important; color: #1a1a1a !important; border: 2px solid #1a1a1a !important; border-radius: 5px !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: all 0.3s ease !important; } .elementor-button-link.elementor-button:hover { background-color: #1a1a1a !important; color: #ffffff !important; transform: translateY(-2px) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important; } .elementor-button-link.elementor-button:active { transform: translateY(0) !important; } .elementor-button-text { color: inherit !important; font-family: inherit !important; font-weight: inherit !important; } @media (max-width: 1024px) { .elementor-iqit-banner-content { bottom: 30px !important; padding: 0 25px !important; } .banner-line-1 { font-size: 22px !important; margin-bottom: 5px !important; } .banner-line-2 { font-size: 12px !important; margin-bottom: 3px !important; } .banner-line-3 { font-size: 22px !important; } .elementor-iqit-banner-title { margin-bottom: 12px !important; } .elementor-iqit-banner-description { font-size: 12px !important; margin-bottom: 5px !important; } .elementor-button-link.elementor-button { padding: 9px 24px !important; font-size: 10px !important; } } @media (max-width: 768px) { .elementor-iqit-banner-content { bottom: 25px !important; padding: 0 20px !important; } .banner-line-1 { font-size: 18px !important; margin-bottom: 4px !important; } .banner-line-2 { font-size: 11px !important; margin-bottom: 2px !important; } .banner-line-3 { font-size: 18px !important; } .elementor-iqit-banner-title { margin-bottom: 10px !important; } .elementor-iqit-banner-description { font-size: 11px !important; margin-bottom: 4px !important; max-width: 100% !important; } .elementor-button-link.elementor-button { padding: 8px 20px !important; font-size: 9px !important; } } @media (max-width: 480px) { .elementor-iqit-banner-content { bottom: 2px !important; padding: 0 15px !important; } .banner-line-1 { font-size: 16px !important; margin-bottom: 3px !important; } .banner-line-2 { font-size: 10px !important; margin-bottom: 2px !important; } .banner-line-3 { font-size: 16px !important; } .elementor-iqit-banner-title { margin-bottom: -2px !important; } .elementor-iqit-banner-description { font-size: 10px !important; margin-bottom: -95px !important; } .elementor-button-link.elementor-button { padding: 7px 18px !important; font-size: 8px !important; } } /* ---- Mini-banner (jeu / promo home) ---- */ .cbo-banner-text { margin-left: 90px !important; } .cbo-banner-text .t .big { font-size: 60px !important; font-weight: 500 !important; line-height: 1.1 !important; } .cbo-banner-text .sub { font-size: 19px !important; line-height: 1.2 !important; text-align: center !important; font-weight: 600 !important; display: block !important; } .mb-ov.mb-ov-center { position: relative !important; left: -40px !important; margin-top: -120px !important; } .mb-ov.mb-ov-center .top, .mb-ov.mb-ov-center .bot { position: relative; margin-left: 50px !important; } .mb-ov.mb-ov-center .big { font-size: 60px !important; line-height: 0.8 !important; font-weight: 500 !important; margin-left: 70px !important; } .mb-ov.mb-ov-shop { left: 75% !important; right: auto !important; } .mb-ov.mb-ov-left { max-width: 600px !important; width: 600px !important; white-space: normal !important; margin-left: -15px; } .mb-ov.mb-ov-left div { line-height: 1; } .btns { display: flex; justify-content: flex-start; align-items: center; gap: 10px; text-align: left; padding-left: 0; margin-left: 40px; } .btns a, .btns .btn { font-weight: 700 !important; font-family: "Avenir", "Avenir Next", sans-serif !important; } @media (max-width: 1024px) { .mb-ov.mb-ov-shop { left: 80% !important; } .mb-ov.mb-ov-left { max-width: 400px !important; width: 400px !important; margin-left: -30px; } .mb-ov.mb-ov-center .big { font-size: 60px !important; } } @media (max-width: 768px) { .mb-ov.mb-ov-left { display: none !important; } .mb-ov.mb-ov-center { width: 100% !important; left: 0 !important; right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; position: relative !important; } .mb-ov.mb-ov-center .top, .mb-ov.mb-ov-center .bot { margin-left: 0 !important; text-align: center !important; } .mb-ov.mb-ov-center .big { font-size: 40px !important; margin-left: 0 !important; text-align: center !important; } .mb-ov.mb-ov-shop { left: 50% !important; transform: translateX(-50%) !important; position: absolute !important; bottom: 20px !important; } .cbo-banner-text .t { font-size: 36px !important; } .cbo-banner-text .sub { font-size: 18px !important; } } @media (max-width: 480px) { .mb-ov.mb-ov-center { width: 100% !important; left: 0 !important; right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; position: relative !important; padding: 0 10px !important; } .mb-ov.mb-ov-center .top, .mb-ov.mb-ov-center .bot { margin-left: 0 !important; text-align: center !important; } .mb-ov.mb-ov-center .big { font-size: 28px !important; margin-left: 0 !important; text-align: center !important; } .mb-ov.mb-ov-shop { left: 50% !important; transform: translateX(-50%) !important; position: absolute !important; bottom: 15px !important; font-size: 11px !important; } } /* ---- 6 colonnes 16.666% : Promos / Makeup / Skincare / Haircare / Bodycare / Accessoires ---- */ .elementor-element-520w0n0, .elementor-element-eeb7chb, .elementor-element-uqoxdx9, .elementor-element-0cqls3r, .elementor-element-x0fly7i, .elementor-element-i43792t { font-family: "Avenir", "Avenir Next", sans-serif !important; flex: 0 0 16.666% !important; max-width: 16.666% !important; width: 16.666% !important; padding: 0 8px !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; } .elementor-element-520w0n0 *, .elementor-element-eeb7chb *, .elementor-element-uqoxdx9 *, .elementor-element-0cqls3r *, .elementor-element-x0fly7i *, .elementor-element-i43792t * { font-family: "Avenir", "Avenir Next", sans-serif !important; } .elementor-element-520w0n0 img, .elementor-element-eeb7chb img, .elementor-element-uqoxdx9 img, .elementor-element-0cqls3r img, .elementor-element-x0fly7i img, .elementor-element-i43792t img { width: 100% !important; height: auto !important; display: block !important; border-radius: 10px !important; } .elementor-element-holqvof .elementor-heading-title, .elementor-element-o4zg4p9 .elementor-heading-title, .elementor-element-dnly53j .elementor-heading-title, .elementor-element-s76o1td .elementor-heading-title, .elementor-element-o7cqh1y .elementor-heading-title, .elementor-element-u2kqdyv .elementor-heading-title { font-family: "Avenir", "Avenir Next", sans-serif !important; font-weight: 600 !important; font-size: 16px !important; text-align: center !important; } .elementor-element-o4zg4p9 .elementor-heading-title a, .elementor-element-s76o1td .elementor-heading-title a, .elementor-element-u2kqdyv .elementor-heading-title a { color: inherit !important; text-decoration: none !important; } .elementor-element-o4zg4p9 .elementor-heading-title a:hover, .elementor-element-s76o1td .elementor-heading-title a:hover, .elementor-element-u2kqdyv .elementor-heading-title a:hover { color: #e6007e !important; } @media (max-width: 1024px) { .elementor-element-520w0n0, .elementor-element-eeb7chb, .elementor-element-uqoxdx9, .elementor-element-0cqls3r, .elementor-element-x0fly7i, .elementor-element-i43792t { flex: 0 0 20% !important; max-width: 20% !important; width: 20% !important; padding: 0 6px !important; } .elementor-element-holqvof .elementor-heading-title, .elementor-element-o4zg4p9 .elementor-heading-title, .elementor-element-dnly53j .elementor-heading-title, .elementor-element-s76o1td .elementor-heading-title, .elementor-element-o7cqh1y .elementor-heading-title, .elementor-element-u2kqdyv .elementor-heading-title { font-size: 14px !important; } } @media (max-width: 768px) { .elementor-element-520w0n0, .elementor-element-eeb7chb, .elementor-element-uqoxdx9, .elementor-element-0cqls3r, .elementor-element-x0fly7i, .elementor-element-i43792t { flex: 0 0 33.333% !important; max-width: 33.333% !important; width: 33.333% !important; padding: 0 5px !important; margin-bottom: 10px !important; } .elementor-element-holqvof .elementor-heading-title, .elementor-element-o4zg4p9 .elementor-heading-title, .elementor-element-dnly53j .elementor-heading-title, .elementor-element-s76o1td .elementor-heading-title, .elementor-element-o7cqh1y .elementor-heading-title, .elementor-element-u2kqdyv .elementor-heading-title { font-size: 11px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .elementor-element-520w0n0 img, .elementor-element-eeb7chb img, .elementor-element-uqoxdx9 img, .elementor-element-0cqls3r img, .elementor-element-x0fly7i img, .elementor-element-i43792t img { max-width: 140px !important; height: auto !important; } } @media (max-width: 480px) { .elementor-element-520w0n0, .elementor-element-eeb7chb, .elementor-element-uqoxdx9, .elementor-element-0cqls3r, .elementor-element-x0fly7i, .elementor-element-i43792t { flex: 0 0 33.333% !important; max-width: 33.333% !important; width: 33.333% !important; padding: 0 3px !important; margin-bottom: 8px !important; } .elementor-element-holqvof .elementor-heading-title, .elementor-element-o4zg4p9 .elementor-heading-title, .elementor-element-dnly53j .elementor-heading-title, .elementor-element-s76o1td .elementor-heading-title, .elementor-element-o7cqh1y .elementor-heading-title, .elementor-element-u2kqdyv .elementor-heading-title { font-size: 9px !important; } .elementor-element-520w0n0 img, .elementor-element-eeb7chb img, .elementor-element-uqoxdx9 img, .elementor-element-0cqls3r img, .elementor-element-x0fly7i img, .elementor-element-i43792t img { max-width: 100px !important; } } /* ---- 3 colonnes 33.333% : Haircare / Bodycare / Accessoires ---- */ .elementor-element-2p8tre6, .elementor-element-1qocsir, .elementor-element-gzpu9tz { font-family: "Avenir", "Avenir Next", sans-serif !important; flex: 0 0 33.333% !important; max-width: 33.333% !important; width: 33.333% !important; padding: 0 10px !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; } .elementor-element-2p8tre6 *, .elementor-element-1qocsir *, .elementor-element-gzpu9tz * { font-family: "Avenir", "Avenir Next", sans-serif !important; } .elementor-element-2p8tre6 img, .elementor-element-1qocsir img, .elementor-element-gzpu9tz img { width: 100% !important; height: auto !important; display: block !important; border-radius: 10px !important; } .elementor-element-k4hq3ag .elementor-heading-title, .elementor-element-mr15r4x .elementor-heading-title, .elementor-element-klogokt .elementor-heading-title { font-family: "Avenir", "Avenir Next", sans-serif !important; font-weight: 600 !important; font-size: 18px !important; text-align: center !important; } .elementor-element-k4hq3ag .elementor-heading-title a, .elementor-element-klogokt .elementor-heading-title a { color: inherit !important; text-decoration: none !important; } .elementor-element-k4hq3ag .elementor-heading-title a:hover, .elementor-element-klogokt .elementor-heading-title a:hover { color: #e6007e !important; } @media (max-width: 1024px) { .elementor-element-2p8tre6, .elementor-element-1qocsir, .elementor-element-gzpu9tz { flex: 0 0 33.333% !important; max-width: 33.333% !important; width: 33.333% !important; padding: 0 8px !important; } .elementor-element-k4hq3ag .elementor-heading-title, .elementor-element-mr15r4x .elementor-heading-title, .elementor-element-klogokt .elementor-heading-title { font-size: 16px !important; } } @media (max-width: 768px) { .elementor-element-2p8tre6, .elementor-element-1qocsir, .elementor-element-gzpu9tz { flex: 0 0 33.333% !important; max-width: 33.333% !important; width: 33.333% !important; padding: 0 5px !important; margin-bottom: 10px !important; } .elementor-element-k4hq3ag .elementor-heading-title, .elementor-element-mr15r4x .elementor-heading-title, .elementor-element-klogokt .elementor-heading-title { font-size: 12px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .elementor-element-2p8tre6 img, .elementor-element-1qocsir img, .elementor-element-gzpu9tz img { max-width: 150px !important; height: auto !important; } } @media (max-width: 480px) { .elementor-element-2p8tre6, .elementor-element-1qocsir, .elementor-element-gzpu9tz { flex: 0 0 33.333% !important; max-width: 33.333% !important; width: 33.333% !important; padding: 0 3px !important; margin-bottom: 8px !important; } .elementor-element-k4hq3ag .elementor-heading-title, .elementor-element-mr15r4x .elementor-heading-title, .elementor-element-klogokt .elementor-heading-title { font-size: 10px !important; } .elementor-element-2p8tre6 img, .elementor-element-1qocsir img, .elementor-element-gzpu9tz img { max-width: 100px !important; } } /* ---- 3 colonnes 33.333% : Promos / Makeup / Skincare ---- */ .elementor-element-rd12vrz, .elementor-element-dneibcy, .elementor-element-gm0immy { font-family: "Avenir", "Avenir Next", sans-serif !important; flex: 0 0 33.333% !important; max-width: 33.333% !important; width: 33.333% !important; padding: 0 10px !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; } .elementor-element-rd12vrz *, .elementor-element-dneibcy *, .elementor-element-gm0immy * { font-family: "Avenir", "Avenir Next", sans-serif !important; } .elementor-element-rd12vrz img, .elementor-element-dneibcy img, .elementor-element-gm0immy img { width: 100% !important; height: auto !important; display: block !important; border-radius: 10px !important; } .elementor-element-nopi0ph .elementor-heading-title, .elementor-element-hmse78p .elementor-heading-title, .elementor-element-lzj3emk .elementor-heading-title { font-family: "Avenir", "Avenir Next", sans-serif !important; font-weight: 600 !important; font-size: 18px !important; text-align: center !important; } .elementor-element-hmse78p .elementor-heading-title a { color: inherit !important; text-decoration: none !important; } .elementor-element-hmse78p .elementor-heading-title a:hover { color: #e6007e !important; } @media (max-width: 1024px) { .elementor-element-rd12vrz, .elementor-element-dneibcy, .elementor-element-gm0immy { flex: 0 0 33.333% !important; max-width: 33.333% !important; width: 33.333% !important; padding: 0 8px !important; } .elementor-element-nopi0ph .elementor-heading-title, .elementor-element-hmse78p .elementor-heading-title, .elementor-element-lzj3emk .elementor-heading-title { font-size: 16px !important; } } @media (max-width: 768px) { .elementor-element-rd12vrz, .elementor-element-dneibcy, .elementor-element-gm0immy { flex: 0 0 33.333% !important; max-width: 33.333% !important; width: 33.333% !important; padding: 0 5px !important; margin-bottom: 10px !important; } .elementor-element-nopi0ph .elementor-heading-title, .elementor-element-hmse78p .elementor-heading-title, .elementor-element-lzj3emk .elementor-heading-title { font-size: 12px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .elementor-element-rd12vrz img, .elementor-element-dneibcy img, .elementor-element-gm0immy img { max-width: 150px !important; height: auto !important; } } @media (max-width: 480px) { .elementor-element-rd12vrz, .elementor-element-dneibcy, .elementor-element-gm0immy { flex: 0 0 33.333% !important; max-width: 33.333% !important; width: 33.333% !important; padding: 0 3px !important; margin-bottom: 8px !important; } .elementor-element-nopi0ph .elementor-heading-title, .elementor-element-hmse78p .elementor-heading-title, .elementor-element-lzj3emk .elementor-heading-title { font-size: 10px !important; } .elementor-element-rd12vrz img, .elementor-element-dneibcy img, .elementor-element-gm0immy img { max-width: 100px !important; } } /* ---- 2 colonnes 50/50 : Moins de 30DT / Gift ideas ---- */ .elementor-element-5h1uutf, .elementor-element-o0z5scu { font-family: "Avenir", "Avenir Next", sans-serif !important; flex: 0 0 50% !important; max-width: 50% !important; width: 50% !important; padding: 0 15px !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; } .elementor-element-5h1uutf *, .elementor-element-o0z5scu * { font-family: "Avenir", "Avenir Next", sans-serif !important; } .elementor-element-5h1uutf img, .elementor-element-o0z5scu img { width: 100% !important; height: auto !important; display: block !important; border-radius: 10px !important; } .elementor-element-gkegtd8 .elementor-heading-title, .elementor-element-6qeffnf .elementor-heading-title, .elementor-element-cp9va8a .elementor-heading-title, .elementor-element-6lofk39 .elementor-heading-title { font-family: "Avenir", "Avenir Next", sans-serif !important; font-weight: 600 !important; } .elementor-element-gkegtd8 .elementor-heading-title, .elementor-element-cp9va8a .elementor-heading-title { font-size: 24px !important; } .elementor-element-6qeffnf .elementor-heading-title, .elementor-element-6lofk39 .elementor-heading-title { font-size: 16px !important; } @media (max-width: 1024px) { .elementor-element-5h1uutf, .elementor-element-o0z5scu { flex: 0 0 50% !important; max-width: 50% !important; width: 50% !important; padding: 0 10px !important; } } @media (max-width: 768px) { .elementor-element-5h1uutf, .elementor-element-o0z5scu { flex: 0 0 50% !important; max-width: 50% !important; width: 50% !important; padding: 0 8px !important; margin-bottom: 15px !important; } .elementor-element-gkegtd8 .elementor-heading-title, .elementor-element-cp9va8a .elementor-heading-title { font-size: 18px !important; } .elementor-element-6qeffnf .elementor-heading-title, .elementor-element-6lofk39 .elementor-heading-title { font-size: 12px !important; } .elementor-element-5h1uutf img, .elementor-element-o0z5scu img { max-width: 100% !important; height: auto !important; } } @media (max-width: 480px) { .elementor-element-5h1uutf, .elementor-element-o0z5scu { flex: 0 0 50% !important; max-width: 50% !important; width: 50% !important; padding: 0 5px !important; margin-bottom: 10px !important; } .elementor-element-gkegtd8 .elementor-heading-title, .elementor-element-cp9va8a .elementor-heading-title { font-size: 16px !important; } .elementor-element-6qeffnf .elementor-heading-title, .elementor-element-6lofk39 .elementor-heading-title { font-size: 11px !important; } .elementor-element-5h1uutf img, .elementor-element-o0z5scu img { max-width: 100% !important; height: auto !important; } } /* ---- 2 colonnes 50/50 : Glowy skin / Trending lip combo ---- */ .elementor-element-c2c6j36, .elementor-element-qo0x84t { font-family: "Avenir", "Avenir Next", sans-serif !important; flex: 0 0 50% !important; max-width: 50% !important; width: 50% !important; padding: 0 15px !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; } .elementor-element-c2c6j36 *, .elementor-element-qo0x84t * { font-family: "Avenir", "Avenir Next", sans-serif !important; } .elementor-element-c2c6j36 img, .elementor-element-qo0x84t img { width: 100% !important; height: auto !important; display: block !important; border-radius: 10px !important; } .elementor-element-10nj13h .elementor-heading-title, .elementor-element-rar1pn1 .elementor-heading-title, .elementor-element-ezob2x2 .elementor-heading-title, .elementor-element-uwkb1rr .elementor-heading-title { font-family: "Avenir", "Avenir Next", sans-serif !important; font-weight: 600 !important; } .elementor-element-10nj13h .elementor-heading-title { font-size: 24px !important; } .elementor-element-rar1pn1 .elementor-heading-title, .elementor-element-ezob2x2 .elementor-heading-title, .elementor-element-uwkb1rr .elementor-heading-title { font-size: 16px !important; } @media (max-width: 1024px) { .elementor-element-c2c6j36, .elementor-element-qo0x84t { flex: 0 0 50% !important; max-width: 50% !important; width: 50% !important; padding: 0 10px !important; } } @media (max-width: 768px) { .elementor-element-c2c6j36, .elementor-element-qo0x84t { flex: 0 0 50% !important; max-width: 50% !important; width: 50% !important; padding: 0 8px !important; margin-bottom: 15px !important; } .elementor-element-10nj13h .elementor-heading-title, .elementor-element-ezob2x2 .elementor-heading-title { font-size: 18px !important; } .elementor-element-rar1pn1 .elementor-heading-title, .elementor-element-uwkb1rr .elementor-heading-title { font-size: 12px !important; } .elementor-element-c2c6j36 img, .elementor-element-qo0x84t img { max-width: 100% !important; height: auto !important; } } @media (max-width: 480px) { .elementor-element-c2c6j36, .elementor-element-qo0x84t { flex: 0 0 50% !important; max-width: 50% !important; width: 50% !important; padding: 0 5px !important; margin-bottom: 10px !important; } .elementor-element-10nj13h .elementor-heading-title, .elementor-element-ezob2x2 .elementor-heading-title { font-size: 16px !important; } .elementor-element-rar1pn1 .elementor-heading-title, .elementor-element-uwkb1rr .elementor-heading-title { font-size: 11px !important; } .elementor-element-c2c6j36 img, .elementor-element-qo0x84t img { max-width: 100% !important; height: auto !important; } } /* ---- Catégories (2 sections génériques 3 colonnes) ---- */ .elementor-section.elementor-element-wlelxu7 .elementor-row, .elementor-section.elementor-element-wyr76x8 .elementor-row { display: flex !important; gap: 20px !important; padding: 20px !important; } .elementor-section.elementor-element-wlelxu7 .elementor-column, .elementor-section.elementor-element-wyr76x8 .elementor-column { flex: 1 !important; width: 33.333% !important; max-width: 33.333% !important; } .elementor-section.elementor-element-wlelxu7 .elementor-image img, .elementor-section.elementor-element-wyr76x8 .elementor-image img { width: 100% !important; aspect-ratio: 1/1.2 !important; object-fit: cover !important; border-radius: 20px !important; } .elementor-section.elementor-element-wlelxu7 .elementor-heading-title, .elementor-section.elementor-element-wyr76x8 .elementor-heading-title { font-size: 16px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .08em !important; text-align: center !important; margin-top: 16px !important; color: var(--text) !important; } @media (max-width: 1024px) { .elementor-section.elementor-element-wlelxu7 .elementor-row, .elementor-section.elementor-element-wyr76x8 .elementor-row { gap: 16px !important; padding: 16px !important; } } @media (max-width: 768px) { .elementor-section.elementor-element-wlelxu7 .elementor-row, .elementor-section.elementor-element-wyr76x8 .elementor-row { flex-wrap: wrap !important; gap: 12px !important; padding: 12px !important; } .elementor-section.elementor-element-wlelxu7 .elementor-column, .elementor-section.elementor-element-wyr76x8 .elementor-column { flex: 0 0 calc(33.333% - 8px) !important; width: calc(33.333% - 8px) !important; max-width: calc(33.333% - 8px) !important; } .elementor-section.elementor-element-wlelxu7 .elementor-heading-title, .elementor-section.elementor-element-wyr76x8 .elementor-heading-title { font-size: 12px !important; } } @media (max-width: 480px) { .elementor-section.elementor-element-wlelxu7 .elementor-column, .elementor-section.elementor-element-wyr76x8 .elementor-column { flex: 0 0 calc(33.333% - 7px) !important; width: calc(33.333% - 7px) !important; max-width: calc(33.333% - 7px) !important; } .elementor-section.elementor-element-wlelxu7 .elementor-heading-title, .elementor-section.elementor-element-wyr76x8 .elementor-heading-title { font-size: 11px !important; } } /* ========================================================================= SECTION 4 COLONNES — hover sur l'image + description noire, alignée à gauche, largeur limitée (retour à la ligne) ========================================================================= */ .elementor-element-i3wqcys, .elementor-element-d60ktr7, .elementor-element-x3ngyms, .elementor-element-sfuk11m { flex: 0 0 25% !important; max-width: 25% !important; width: 25% !important; padding: 0 14px !important; box-sizing: border-box !important; } .elementor-element-4x4vb9z .elementor-image, .elementor-element-5mqqu3l .elementor-image, .elementor-element-nmus5fc .elementor-image, .elementor-element-7n9fgt1 .elementor-image { display: block !important; border-radius: 0 !important; overflow: hidden !important; position: relative !important; box-shadow: 0 6px 18px rgba(0, 0, 0, .08) !important; transition: box-shadow .35s ease !important; } .elementor-element-4x4vb9z .elementor-image a, .elementor-element-5mqqu3l .elementor-image a, .elementor-element-nmus5fc .elementor-image a, .elementor-element-7n9fgt1 .elementor-image a { display: block !important; overflow: hidden !important; border-radius: 0 !important; cursor: pointer !important; } .elementor-element-4x4vb9z .elementor-image img, .elementor-element-5mqqu3l .elementor-image img, .elementor-element-nmus5fc .elementor-image img, .elementor-element-7n9fgt1 .elementor-image img { width: 100% !important; height: 100% !important; aspect-ratio: 1 / 1.06 !important; object-fit: cover !important; display: block !important; border-radius: 0 !important; transition: transform .5s cubic-bezier(.2,.8,.2,1) !important; } .elementor-element-4x4vb9z .elementor-image:hover, .elementor-element-5mqqu3l .elementor-image:hover, .elementor-element-nmus5fc .elementor-image:hover, .elementor-element-7n9fgt1 .elementor-image:hover { box-shadow: 0 14px 32px rgba(0, 0, 0, .16) !important; } .elementor-element-4x4vb9z .elementor-image:hover img, .elementor-element-5mqqu3l .elementor-image:hover img, .elementor-element-nmus5fc .elementor-image:hover img, .elementor-element-7n9fgt1 .elementor-image:hover img { transform: scale(1.07) !important; } .elementor-element-k0xbji9 .elementor-heading-title, .elementor-element-x6h4ujy .elementor-heading-title, .elementor-element-1vh74mw .elementor-heading-title, .elementor-element-sxul98j .elementor-heading-title { text-align: left !important; color: #1a1a1a !important; font-weight: 400 !important; font-size: 13.5px !important; line-height: 1.5 !important; max-width: 200px !important; transition: color .3s ease !important; } .elementor-element-i3wqcys:has(.elementor-image:hover) .elementor-element-k0xbji9 .elementor-heading-title, .elementor-element-d60ktr7:has(.elementor-image:hover) .elementor-element-x6h4ujy .elementor-heading-title, .elementor-element-x3ngyms:has(.elementor-image:hover) .elementor-element-1vh74mw .elementor-heading-title, .elementor-element-sfuk11m:has(.elementor-image:hover) .elementor-element-sxul98j .elementor-heading-title { color: #e6007e !important; } @media (max-width: 1024px) { .elementor-element-i3wqcys, .elementor-element-d60ktr7, .elementor-element-x3ngyms, .elementor-element-sfuk11m { flex: 0 0 50% !important; max-width: 50% !important; width: 50% !important; padding: 0 10px !important; margin-bottom: 24px !important; } .elementor-element-k0xbji9 .elementor-heading-title, .elementor-element-x6h4ujy .elementor-heading-title, .elementor-element-1vh74mw .elementor-heading-title, .elementor-element-sxul98j .elementor-heading-title { max-width: 100% !important; } } @media (max-width: 600px) { .elementor-element-i3wqcys, .elementor-element-d60ktr7, .elementor-element-x3ngyms, .elementor-element-sfuk11m { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; padding: 0 !important; margin-bottom: 28px !important; } } /* ---- SLIDER ACCUEIL — décale TEXTES + BOUTONS vers la gauche ---- */ html body #rev_slider_4_1_wrapper rs-layer-wrap:has(#slider-4-slide-6-layer-1):not(#a):not(#b), html body #rev_slider_4_1_wrapper rs-layer-wrap:has(#slider-4-slide-6-layer-4):not(#a):not(#b), html body #rev_slider_4_1_wrapper rs-layer-wrap:has(#slider-4-slide-6-layer-18):not(#a):not(#b), html body #rev_slider_4_1_wrapper rs-layer-wrap:has(#slider-4-slide-6-layer-20):not(#a):not(#b), html body #rev_slider_4_1_wrapper rs-layer-wrap:has(#slider-4-slide-6-layer-19):not(#a):not(#b), html body #rev_slider_4_1_wrapper rs-layer-wrap:has(#slider-4-slide-6-layer-36):not(#a):not(#b) { margin-left: -160px !important; margin-top: 40px !important; } @media (max-width: 1240px) { html body #rev_slider_4_1_wrapper rs-layer-wrap:has(#slider-4-slide-6-layer-1):not(#a):not(#b), html body #rev_slider_4_1_wrapper rs-layer-wrap:has(#slider-4-slide-6-layer-4):not(#a):not(#b), html body #rev_slider_4_1_wrapper rs-layer-wrap:has(#slider-4-slide-6-layer-18):not(#a):not(#b), html body #rev_slider_4_1_wrapper rs-layer-wrap:has(#slider-4-slide-6-layer-20):not(#a):not(#b), html body #rev_slider_4_1_wrapper rs-layer-wrap:has(#slider-4-slide-6-layer-19):not(#a):not(#b), html body #rev_slider_4_1_wrapper rs-layer-wrap:has(#slider-4-slide-6-layer-36):not(#a):not(#b) { margin-left: -50px !important; } } @media (max-width: 1024px) { html body #rev_slider_4_1_wrapper rs-layer-wrap:has(#slider-4-slide-6-layer-1):not(#a):not(#b), html body #rev_slider_4_1_wrapper rs-layer-wrap:has(#slider-4-slide-6-layer-4):not(#a):not(#b), html body #rev_slider_4_1_wrapper rs-layer-wrap:has(#slider-4-slide-6-layer-18):not(#a):not(#b), html body #rev_slider_4_1_wrapper rs-layer-wrap:has(#slider-4-slide-6-layer-20):not(#a):not(#b), html body #rev_slider_4_1_wrapper rs-layer-wrap:has(#slider-4-slide-6-layer-19):not(#a):not(#b), html body #rev_slider_4_1_wrapper rs-layer-wrap:has(#slider-4-slide-6-layer-36):not(#a):not(#b) { margin-left: -30px !important; } } @media (max-width: 778px) { html body #rev_slider_4_1_wrapper rs-layer-wrap:has(#slider-4-slide-6-layer-1):not(#a):not(#b), html body #rev_slider_4_1_wrapper rs-layer-wrap:has(#slider-4-slide-6-layer-4):not(#a):not(#b), html body #rev_slider_4_1_wrapper rs-layer-wrap:has(#slider-4-slide-6-layer-18):not(#a):not(#b), html body #rev_slider_4_1_wrapper rs-layer-wrap:has(#slider-4-slide-6-layer-20):not(#a):not(#b), html body #rev_slider_4_1_wrapper rs-layer-wrap:has(#slider-4-slide-6-layer-19):not(#a):not(#b), html body #rev_slider_4_1_wrapper rs-layer-wrap:has(#slider-4-slide-6-layer-36):not(#a):not(#b) { margin-left: -15px !important; } } @media (max-width: 480px) { html body #rev_slider_4_1_wrapper rs-layer-wrap:has(#slider-4-slide-6-layer-1):not(#a):not(#b), html body #rev_slider_4_1_wrapper rs-layer-wrap:has(#slider-4-slide-6-layer-4):not(#a):not(#b), html body #rev_slider_4_1_wrapper rs-layer-wrap:has(#slider-4-slide-6-layer-18):not(#a):not(#b), html body #rev_slider_4_1_wrapper rs-layer-wrap:has(#slider-4-slide-6-layer-20):not(#a):not(#b), html body #rev_slider_4_1_wrapper rs-layer-wrap:has(#slider-4-slide-6-layer-19):not(#a):not(#b), html body #rev_slider_4_1_wrapper rs-layer-wrap:has(#slider-4-slide-6-layer-36):not(#a):not(#b) { margin-left: 0 !important; } } /* Titre "nouveautés" */ .nouveautes-section .elementor-heading-title.elementor-size-default.none { display: block !important; opacity: 1 !important; visibility: visible !important; font-size: 28px !important; font-weight: 700 !important; color: #1a1a1a !important; line-height: 1.2 !important; } .elementor-heading-title.elementor-size-default.none:first-of-type { display: block !important; visibility: visible } /* ============================================================================= 8. PANIER (cart-summary, code promo, lignes produits, cross-selling) ============================================================================= */ /* ---- Conteneur carte récapitulatif ---- */ .card.cart-summary { max-width: 500px !important; margin: 20px auto !important; background-color: #ffffff !important; border-radius: 12px !important; padding: 0 !important; border: none !important; transform: translateY(-60px) !important; max-height: 80vh !important; overflow-y: auto !important; overflow-x: hidden !important; scrollbar-color: #d0d0d0 #f5f5f5 !important; scrollbar-width: thin !important; } .card.cart-summary, .card.cart-summary * { box-shadow: none !important; -webkit-box-shadow: none !important; } .card.cart-summary hr { display: none !important; } .card.cart-summary::-webkit-scrollbar { width: 10px !important; } .card.cart-summary::-webkit-scrollbar-track { background: #f5f5f5 !important; border-radius: 5px !important; } .card.cart-summary::-webkit-scrollbar-thumb { background: #d0d0d0 !important; border-radius: 5px !important; } .card.cart-summary::-webkit-scrollbar-thumb:hover { background: #999 !important; } .cart-detailed-totals { padding: 0 !important; background: transparent !important; } .cart-summary, .card-body { display: flex !important; flex-direction: column !important; } /* Ordre : code promo -> sous-totaux -> total */ .cart-detailed-totals.js-cart-detailed-totals { display: flex !important; flex-direction: column !important; } .cart-detailed-totals .block-promo, .block-promo { order: -1 !important; } .cart-detailed-totals .card-body.cart-detailed-subtotals, .cart-detailed-subtotals { order: 1 !important; } .cart-detailed-totals .card-body.cart-summary-totals { order: 2 !important; } .fa.fa-tag.btn.voucher-icon { display: none !important; } /* ---- Sous-totaux ---- */ .card-body.cart-detailed-subtotals { padding: 30px 25px 0 25px !important; background: transparent !important; border: none !important; } .card-body.cart-detailed-subtotals::before { content: "Récapitulatif" !important; display: block !important; font-size: 26px !important; font-weight: 700 !important; color: #1a1a1a !important; margin-bottom: 18px !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; } .cart-summary-line .label { color: #666 !important; font-weight: 500 !important; } .cart-summary-line .value { color: #1a1a1a !important; font-weight: 600 !important; } .cart-summary-line small { display: none !important; } /* ---- Barre de livraison gratuite ---- */ .iqitfreedeliverycount { padding: 20px 25px !important; margin: 0 !important; background: transparent !important; border: none !important; border-top: 1px solid #f0f0f0 !important; --progress: 45%; } .alert.alert-info.iqitfreedeliverycount { background-color: transparent !important; border-color: transparent !important; color: inherit !important; } .iqitfreedeliverycount > p { display: none !important; } .iqitfreedeliverycount::before { content: "" !important; display: block !important; width: 100% !important; height: 8px !important; background: linear-gradient( to right, #ff2d7f 0%, #ff2d7f var(--progress, var(--progress-percent)), #e8e8e8 var(--progress, var(--progress-percent)), #e8e8e8 100% ) !important; border-radius: 4px !important; margin-bottom: 12px !important; box-shadow: 0 2px 4px rgba(255, 45, 127, 0.3) !important; transition: background 0.4s ease !important; } .iqitfreedeliverycount .ifdc-remaining-price { display: inline !important; font-size: 12px !important; color: #ff2d7f !important; font-weight: 600 !important; margin-top: 0 !important; visibility: visible !important; } .iqitfreedeliverycount { padding-left: 0 !important; padding-right: 0 !important; } .iqitfreedeliverycount::before { width: 100% !important; } /* ---- Total ---- */ .card-body.cart-summary-totals { padding: 20px 25px !important; background: transparent !important; border-top: 1px solid #e8e8e8 !important; margin: 0 !important; } .cart-total .label { font-size: 16px !important; font-weight: 700 !important; color: #1a1a1a !important; } .cart-total .value { font-size: 22px !important; font-weight: 700 !important; color: #1a1a1a !important; } /* ---- Code promo ---- */ .cart-voucher-area input::placeholder { color: transparent !important; } .block-promo .cart-voucher-area { padding: 1rem; background: #fff; } .block-promo { padding: 25px 25px !important; background: transparent !important; border: none !important; border-top: 1px solid #ffff !important; margin: 0 !important; } .cart-detailed-totals .block-promo { margin: 0 !important; padding-top: 0 !important; padding-bottom: 1px !important; } .cart-detailed-totals hr { margin: 10px 0 !important; } .block-promo::before { content: "Avez-vous un code promo ?" !important; display: block !important; font-family: 'Avenir', 'Avenir Next', sans-serif !important; font-weight: 800 !important; font-size: 24px !important; color: #1a1a1a !important; margin-bottom: 12px !important; } .block-promo .promo-code::before { content: "Code promo" !important; display: block !important; font-family: 'Avenir', 'Avenir Next', sans-serif !important; font-weight: 400 !important; font-size: 14px !important; color: #1a1a1a !important; margin-bottom: 6px !important; } .block-promo .promo-code::after { content: "Saisissez le code sans espaces entre les caractères" !important; display: block !important; font-family: 'Avenir', 'Avenir Next', sans-serif !important; font-size: 12px !important; color: #000 !important; margin-top: 8px !important; } .promo-code form { display: flex !important; gap: 8px !important; align-items: center !important; } .block-promo .promo-code .input-group, .cart-voucher-area .promo-code .input-group, .promo-code .input-group { display: flex !important; flex-direction: row !important; align-items: stretch !important; gap: 10px !important; height: 44px !important; width: 100% !important; } .block-promo .promo-code .form-control, .cart-voucher-area .promo-code .form-control, .promo-code input.form-control { flex: 1 !important; height: 44px !important; margin: 0 !important; border-radius: 6px !important; border: 1px solid #1a1a1a !important; box-sizing: border-box !important; padding: 12px 14px !important; font-size: 14px !important; } .promo-code input.form-control:focus { outline: none !important; border-color: #ff2d7f !important; box-shadow: 0 0 0 3px rgba(255, 45, 127, 0.1) !important; } .promo-code input[type="hidden"] { display: none !important; } .block-promo .promo-code .input-group-append, .cart-voucher-area .promo-code .input-group-append { display: flex !important; height: 44px !important; margin: 0 !important; } .block-promo .promo-code button[type="submit"] span { font-size: 0 !important; } .block-promo .promo-code button[type="submit"]::after { content: "APPLIQUER" !important; font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; color: #1a1a1a !important; } .block-promo .promo-code button[type="submit"], .cart-voucher-area .promo-code button[type="submit"], .promo-code button { height: 44px !important; margin: 0 !important; background: #ffffff !important; color: #1a1a1a !important; border: 2px solid #1a1a1a !important; border-radius: 6px !important; padding: 0 20px !important; white-space: nowrap !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 12px !important; font-weight: 700 !important; cursor: pointer !important; } .promo-code button:hover { background-color: #1a1a1a !important; color: #ffffff !important; } .block-promo .promo-code .voucher-icon, .fa.fa-tag.btn.voucher-icon { display: none !important; } .promo-code .alert { display: none !important; } .promo-code .input-group { border: none !important; box-shadow: none !important; } .promo-code .input-group-append { border-left: none !important; } .promo-code .form-control { border-right: none !important; box-shadow: none !important; } .promo-code .btn { border-left: none !important; box-shadow: none !important; } .promo-code .input-group { border-radius: 1px !important; overflow: hidden !important; } .promo-code .form-control { border-radius: 0 !important; } .promo-code .btn { border-radius: 0 !important; } /* Fix doublon "Avez-vous un code promo ?" (via CSS, indépendant du JS qui retire aussi la classe du wrapper imbriqué) */ .cart-summary .block-promo:nth-of-type(2) > *:not(.cart-voucher):first-child { display: none !important; } /* ---- Bouton checkout ---- */ .checkout.cart-detailed-actions { padding: 25px !important; background: transparent !important; border: none !important; } .checkout.cart-detailed-actions .btn { display: block !important; width: 100% !important; padding: 16px !important; background: linear-gradient(135deg, #ff2d7f 0%, #ff1a6f 100%) !important; border: none !important; border-radius: 8px !important; color: #ffffff !important; font-size: 14px !important; font-weight: 700 !important; text-transform: uppercase !important; cursor: pointer !important; box-shadow: 0 4px 12px rgba(255, 45, 127, 0.3) !important; } .checkout.cart-detailed-actions .btn:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 16px rgba(255, 45, 127, 0.4) !important; } .checkout.cart-detailed-actions .btn-primary { font-size: 0 !important; position: relative; } .checkout.cart-detailed-actions .btn-primary::before { content: "VALIDER MON PANIER"; font-size: 15px; font-weight: 500; display: inline-block; text-transform: uppercase; } /* ---- Lignes produits dans le panier ---- */ .cart-items { display: flex; flex-direction: column; gap: 0; } .cart-item { border: 2px solid #1a1a1a; border-radius: 1px; padding: 16px; margin-bottom: -1px; background-color: #ffffff; } .cart-item:first-child { border-radius: 16px 16px 0 0; } .cart-item:last-child { border-radius: 0 0 16px 16px; border-bottom: 2px solid #1a1a1a; } .cart-item { border: 1px solid #1a1a1a !important; /* au lieu de 2px */ } .product-line-grid { display: flex; align-items: flex-start; gap: 16px; width: 100%; } .product-line-grid .product-image { flex-shrink: 0; width: 70px; height: 90px; } .product-image img { width: 100%; height: 100%; object-fit: contain; } .product-line-grid-body { flex: 1; display: flex; flex-direction: column; gap: 8px; } .product-line-grid-body .col-9 { font-weight: 700; font-size: 12px; text-transform: uppercase; color: #1a1a1a; margin-bottom: 2px; } .product-line-info .label { font-weight: 700; font-size: 14px; color: #1a1a1a; margin: 0; line-height: 1.3; } .product-line-info small { font-size: 11px; color: #999; margin-top: 4px; } .qty-and-delete { display: flex; align-items: center; gap: 8px; margin-top: 10px; } .qty { width: 50px; } .qty input, .qty input[type="number"], .form-control[type="number"], .js-cart-line-product-quantity { width: 50px !important; height: 32px !important; border: 1px solid #1a1a1a !important; border-radius: 4px !important; text-align: center !important; font-weight: 600 !important; font-size: 14px !important; background-color: #ffffff !important; color: #1a1a1a !important; padding: 4px !important; visibility: visible !important; opacity: 1 !important; display: block !important; } .qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .qty input[type=number] { -moz-appearance: textfield; } body#cart .bootstrap-touchspin .input-group-btn-vertical { display: none !important; } .cart-line-product-actions a { background: transparent; color: #1a1a1a; border: 1px solid #1a1a1a; border-radius: 4px; padding: 6px 10px; font-size: 12px; font-weight: 600; text-decoration: none; cursor: pointer; transition: all 0.2s; white-space: nowrap; } .cart-line-product-actions a:hover { background: #1a1a1a; color: #ffffff; } .cart-line-product-actions a i { display: none; } .cart-line-product-actions a::before { content: "Supprimer"; font-size: 12px; font-weight: 600; } .remove-from-cart:hover { background-color: #ff0000 !important; color: #fff !important; border-color: #ff0000 !important; } .product-line-grid-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin-left: auto; } .unit-price { font-size: 13px; color: #999; } .unit-price .value { font-weight: 600; color: #1a1a1a; } .col.col-auto.col-md.unit-price { display: none !important; } .price { text-align: right; } .product-price strong { font-weight: 700; font-size: 16px; color: #e6007e; display: block; } /* ---- Cross-selling (page panier) ---- */ .crossselling-products .section-title { font-family: 'Apollo', serif !important; font-size: 26px !important; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #1a1a1a; } .crossselling-products .section-title span { font-family: 'Apollo', serif !important; } .crossselling-products .product-title { font-family: Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } .crossselling-products { order: 1; margin-top: 280px !important; } body#cart .crossselling-products { background: #ffffff !important; border-radius: 12px !important; max-width: 10000vw !important; box-sizing: border-box !important; } body#cart .crossselling-products .product-miniature { display: flex !important; flex-direction: column !important; width: 100% !important; height: 100% !important; min-height: 480px !important; min-width: 300px !important; box-sizing: border-box !important; } body#cart .crossselling-products .js-product-miniature-wrapper { display: flex !important; height: 100% !important; } body#cart .crossselling-products .thumbnail-container { height: 220px !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; } body#cart .crossselling-products .thumbnail-container img { max-height: 100% !important; width: auto !important; object-fit: contain !important; } body#cart .crossselling-products .product-description { flex: 1 !important; display: flex !important; flex-direction: column !important; } body#cart .crossselling-products .product-title { min-height: 40px !important; } body#cart .crossselling-products .product-add-cart { margin-top: auto !important; } body#cart .crossselling-products h4.section-title { font-size: 0 !important; line-height: 0 !important; height: 40px !important; margin: 0 0 20px 0 !important; padding: 0 !important; text-align: center !important; position: relative !important; display: block !important; overflow: visible !important; } body#cart .crossselling-products h4.section-title::before { content: "VOUS AIMEREZ ÉGALEMENT" !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; font-size: 45px !important; line-height: 1.3 !important; font-family: 'Apollo', serif !important; font-weight: 500 !important; letter-spacing: 1px !important; text-transform: uppercase !important; color: #1a1a1a !important; text-align: center !important; } /* ---- Marque + référence — lignes du panier (compagnon du JS panier) ---- */ .product-line-brand { font-weight: 700; text-transform: uppercase; font-size: 13px; color: #1a1a1a; margin-bottom: 2px; } .product-line-reference { font-size: 12px; color: #999; margin-top: 4px; } /* ---- Couleur montant livraison / sous-totaux (noir si payante) ---- */ .cart-summary-line#cart-subtotal-shipping > .value { color: #fff !important; } #cart-subtotal-shipping .value { color: #000; } #cart-subtotal-shipping .value-free { color: #fff; } .cart-summary-line .js-subtotal { color: #000000 !important; } #cart-subtotal-shipping .label { color: #000000 !important; } #cart-subtotal-products .label { color: #000000 !important; } /* ---- Suppression des séparateurs <hr> et bordures internes du panier ---- */ .cart-detailed-totals hr { display: none !important; border: none !important; height: 0 !important; margin: 0 !important; } .cart-detailed-totals .card-body { border: none !important; box-shadow: none !important; } .cart-detailed-totals .card-body + .card-body { border-top: none !important; } .cart-summary-totals, .cart-summary-totals.card-body { border-top: none !important; border-bottom: none !important; } .card.cart-summary * { border-top-color: transparent; } /* ---- Popup panier custom (bzc-*, injectée par custom.js) ---- */ .bzc-btn.solid { color: #ffffff !important; } .bzc-btn.solid[data-cart] { background: #fe3f72 !important; background-image: none !important; border-color: #fe3f72 !important; color: #fff !important; } .bzc-btn.solid[data-cart] { transition: transform 0.3s ease, box-shadow 0.3s ease; } .bzc-btn.solid[data-cart]:hover { transform: translateY(-4px); } /* ---- Popup fidélité — points gagnés ---- */ .loyalty-popup-points { color: #e6007e !important; } /* ---- Bouton "Commander" — hover ---- */ .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background: #fe3f72 !important; color: #fff !important; border: none !important; transform: translateY(-3px) !important; box-shadow: none !important; } /* ---- Étiquette "on-sale" ---- */ .product-flags .product-flag.on-sale { border: 1px solid #1a1a1a !important; } /* ---- Champ quantité agrandi (col.col-auto.col-md.qty) ---- */ body#cart .col.col-auto.col-md.qty .js-cart-line-product-quantity { width: 40px !important; font-size: 15px !important; } /* ========================================================================= PANIER — bouton "-" et "+" pour la quantité (col.col-auto.col-md.qty) ========================================================================= */ body#cart .col.col-auto.col-md.qty .bootstrap-touchspin .input-group-btn-vertical { display: contents !important; } body#cart .col.col-auto.col-md.qty { width: auto !important; } body#cart .col.col-auto.col-md.qty .input-group.bootstrap-touchspin { display: flex !important; align-items: center !important; gap: 8px !important; border: none !important; background: transparent !important; overflow: visible !important; width: max-content !important; height: auto !important; position: relative !important; } body#cart .col.col-auto.col-md.qty .input-group.bootstrap-touchspin * { position: static !important; float: none !important; } body#cart .col.col-auto.col-md.qty .js-cart-line-product-quantity { order: 2 !important; width: 40px !important; height: 30px !important; text-align: center !important; border: none !important; background: transparent !important; font-weight: 600 !important; font-size: 16px !important; line-height: normal !important; padding: 0 !important; margin: 0 !important; -moz-appearance: textfield !important; color: #1a1a1a !important; opacity: 1 !important; visibility: visible !important; -webkit-text-fill-color: #1a1a1a !important; } body#cart .col.col-auto.col-md.qty .js-cart-line-product-quantity::-webkit-outer-spin-button, body#cart .col.col-auto.col-md.qty .js-cart-line-product-quantity::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0 !important; } body#cart .col.col-auto.col-md.qty .btn-touchspin { border: 1px solid #1a1a1a !important; border-radius: 6px !important; background: transparent !important; width: 28px !important; height: 28px !important; min-width: 28px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 0 !important; cursor: pointer !important; padding: 0 !important; margin: 0 !important; color: #1a1a1a !important; } body#cart .col.col-auto.col-md.qty .bootstrap-touchspin-down { order: 1 !important; } body#cart .col.col-auto.col-md.qty .bootstrap-touchspin-up { order: 3 !important; } body#cart .col.col-auto.col-md.qty .bootstrap-touchspin-up i, body#cart .col.col-auto.col-md.qty .bootstrap-touchspin-down i { display: none !important; } body#cart .col.col-auto.col-md.qty .bootstrap-touchspin-up::before { content: "+" !important; font-size: 14px !important; font-weight: 600 !important; } body#cart .col.col-auto.col-md.qty .bootstrap-touchspin-down::before { content: "-" !important; font-size: 14px !important; font-weight: 600 !important; } body#cart .col.col-auto.col-md.qty .bootstrap-touchspin-up:hover, body#cart .col.col-auto.col-md.qty .bootstrap-touchspin-down:hover { background: #f2f2f2 !important; } /* ========================================================================= PANIER — fix affichage quantité ========================================================================= */ body#cart .col.col-auto.col-md.qty .input-group.bootstrap-touchspin { flex-shrink: 0 !important; flex-direction: row !important; flex-wrap: nowrap !important; } body#cart .col.col-auto.col-md.qty .js-cart-line-product-quantity { flex: 0 0 auto !important; flex-shrink: 0 !important; font-family: "Avenir", "Avenir Next", Arial, sans-serif !important; letter-spacing: normal !important; line-height: 30px !important; box-sizing: border-box !important; text-indent: 0 !important; direction: ltr !important; min-width: 40px !important; } body#cart .col.col-auto.col-md.qty .btn-touchspin { flex-shrink: 0 !important; } body#cart .col.col-auto.col-md.qty .bootstrap-touchspin-up, body#cart .col.col-auto.col-md.qty .bootstrap-touchspin-down { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; margin: 0 !important; float: none !important; } body#cart .qty-and-delete { flex-wrap: nowrap !important; } body#cart .col.col-auto.col-md.qty { margin-right: 40px !important; } /* ========================================================================== FIX : .crossselling-products dans la page panier (#cart) — versions successives conservées telles quelles (ordre chronologique d'origine). ========================================================================== */ body#cart .cart-grid-body .crossselling-products { width: 154% !important; } body#cart .cart-grid-body .crossselling-products { width: 140% !important; max-width: 1000% !important; margin-top: 420px !important; } body#cart:has(.cart-items li.cart-item:nth-child(3)) .crossselling-products { margin-top: 10rem !important; } body#cart .crossselling-products .swiper-container, body#cart .crossselling-products .products { max-width: 120% !important; } body#cart:has(.cart-items li.cart-item:nth-child(2)):not(:has(.cart-items li.cart-item:nth-child(3))) .crossselling-products { margin-top: 260px !important; } @media (max-width: 767px) { body#cart .cart-grid-body { position: relative; } body#cart .cart-grid-body .crossselling-products { width: 180vw !important; max-width: 1000vw !important; margin-left: calc(50% - 80vw) !important; margin-right: calc(50% - 1000vw) !important; padding: 0 15px !important; box-sizing: border-box; } } @media (max-width: 767px) { body#cart .crossselling-products .swiper, body#cart .crossselling-products .swiper-container, body#cart .crossselling-products .swiper-wrapper { margin-left: -100px !important; padding-left: 0 !important; } } /* ========================================================================= SMART FIX v3 — 100% CSS, carrousel cross-selling mobile ========================================================================= */ @media (max-width: 767px) { body#cart .crossselling-products .swiper-wrapper { overflow: visible !important; scroll-snap-type: none !important; -webkit-overflow-scrolling: auto !important; } body#cart .crossselling-products { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 20px 12px !important; box-sizing: border-box !important; overflow: hidden !important; } body#cart .crossselling-products .swiper, body#cart .crossselling-products .swiper-container { width: 100% !important; max-width: 100% !important; overflow: hidden !important; } body#cart .crossselling-products .product-miniature { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow: hidden !important; padding: 10px !important; } body#cart .crossselling-products .thumbnail-container { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } body#cart .crossselling-products .product-title, body#cart .crossselling-products .product-brand, body#cart .crossselling-products .product-price, body#cart .crossselling-products .add-to-cart { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; white-space: normal !important; overflow-wrap: break-word !important; } body#cart .crossselling-products .add-to-cart, body#cart .crossselling-products .btn.btn-product-list { font-size: 11px !important; padding: 8px 4px !important; } } /* ---- Loyalty card ("#loyalty") — masqué globalement, remplacé par le bloc bénéfices custom ---- */ #loyalty { display: none !important; } /* ============================================================================= 9. PAGE INSCRIPTION (body#registration) ============================================================================= */ body#registration #header, body#registration #footer, body#registration .breadcrumb { display: none !important; } body#registration #main-page-content { margin: 0 !important; padding: 0 !important; min-height: 100vh !important; } body#registration #wrapper { margin: 0 !important; padding: 0 !important; } body#registration #inner-wrapper { max-width: 100% !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } body#registration #content-wrapper { display: flex !important; flex-direction: row !important; width: 100% !important; min-height: 100vh !important; margin: 0 !important; padding: 0 !important; background: white !important; } body#registration #content { width: 60% !important; max-width: none !important; margin-left: 20% !important; padding: 0 !important; border: none !important; } body#registration #main { flex: 0 0 50% !important; width: 50% !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: stretch !important; padding: 0 !important; margin: 0 !important; background: white !important; overflow-y: scroll !important; box-sizing: border-box !important; height: 100vh !important; } body#registration #main::-webkit-scrollbar { width: 8px !important; } body#registration #main::-webkit-scrollbar-track { background: #f5f5f5 !important; } body#registration #main::-webkit-scrollbar-thumb { background: #d0d0d0 !important; border-radius: 4px !important; } body#registration #main::-webkit-scrollbar-thumb:hover { background: #999 !important; } body#registration .registration-side-image { flex: 0 0 50% !important; width: 50% !important; height: 100vh !important; background: linear-gradient(135deg, #E8547F 0%, #D63A63 100%) !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; box-sizing: border-box !important; } body#registration .registration-side-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } body#registration .page-header { display: block !important; text-align: center !important; margin-bottom: 25px !important; margin-top: 0 !important; padding: 40px 20px 0 20px !important; width: 100% !important; box-sizing: border-box !important; } body#registration .page-header::before { content: "" !important; display: block !important; width: 140px !important; height: 55px !important; background: url('https://beauty.mcom.tn/img/logo-1780588175.jpg') center/contain no-repeat !important; margin: 0 auto 18px !important; } body#registration .page-header::before { content: ""; display: block; width: 280px !important; height: 90px !important; background: url("https://beauty.mcom.tn/img/logo-1780588175.jpg") center center / contain no-repeat; margin: 0 auto 25px; } body#registration .page-header .page-title { font-size: 28px !important; font-weight: 600 !important; color: #1a1a1a !important; margin: 0 !important; } body#registration .page-header .page-title { font-family: "Avenir", "Avenir Next", Arial, sans-serif !important; } body#registration section.register-form { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 40px 20px !important; border: none !important; outline: none !important; background: transparent !important; box-shadow: none !important; display: flex !important; flex-direction: column !important; flex: 1 !important; box-sizing: border-box !important; } body#registration section.register-form #customer-form { width: 100% !important; max-width: none !important; display: block !important; margin: 0 !important; padding: 0 !important; border: none !important; background: none !important; } body#registration section.register-form #customer-form > div { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border: none !important; outline: none !important; background: transparent !important; box-shadow: none !important; display: block !important; } body#registration section.register-form > p { display: none !important; } body#registration section.register-form > p a { color: #e6007e !important; text-decoration: underline !important; font-weight: 600 !important; } body#registration #customer-form::after { display: block !important; text-align: center !important; font-size: 13px !important; color: #666 !important; margin-top: 20px !important; } body#registration .col-md-2, body#registration .col-md-8, body#registration .js-input-column, body#registration .form-group .col-md-2, body#registration .form-group .col-md-8, body#registration .form-group .js-input-column { max-width: none !important; width: 100% !important; flex: 0 0 100% !important; padding: 0 !important; margin: 0 !important; display: block !important; } body#registration .form-group { margin-bottom: 18px !important; padding: 0 !important; display: block !important; width: 100% !important; box-sizing: border-box !important; } body#registration .form-group.row { display: block !important; width: 100% !important; box-sizing: border-box !important; } body#registration .form-group label { font-size: 11px !important; font-weight: 700 !important; color: #1a1a1a !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; margin-bottom: 6px !important; padding: 0 !important; display: block !important; } body#registration .form-group label.required::after { content: " *" !important; color: #e6007e !important; } body#registration .custom-radio { display: inline-flex !important; align-items: center !important; margin-right: 20px !important; margin-bottom: 0 !important; position: relative !important; } body#registration .custom-radio input { position: absolute !important; opacity: 0 !important; cursor: pointer !important; width: 16px !important; height: 16px !important; } body#registration .custom-radio span:first-of-type { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 16px !important; height: 16px !important; border: 2px solid #d0d0d0 !important; border-radius: 50% !important; margin-right: 8px !important; background: white !important; flex-shrink: 0 !important; } body#registration .custom-radio input:checked + span:first-of-type { border-color: #e6007e !important; background: #e6007e !important; } body#registration .custom-radio input:checked + span:first-of-type::after { content: "✓" !important; color: white !important; font-weight: bold !important; font-size: 10px !important; } body#registration .radio-inline { display: inline-block !important; margin-right: 20px !important; } body#registration .custom-checkbox { display: flex !important; align-items: flex-start !important; margin-bottom: 15px !important; position: relative !important; } body#registration .custom-checkbox input { position: absolute !important; opacity: 0 !important; cursor: pointer !important; width: 16px !important; height: 16px !important; } body#registration .custom-checkbox span:first-of-type { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 16px !important; height: 16px !important; border: 2px solid #d0d0d0 !important; border-radius: 4px !important; background: white !important; margin-right: 10px !important; flex-shrink: 0 !important; } body#registration .custom-checkbox input:checked + span:first-of-type { border-color: #e6007e !important; background: #e6007e !important; } body#registration .custom-checkbox input:checked + span:first-of-type::after { content: "✓" !important; color: white !important; font-weight: bold !important; font-size: 10px !important; } body#registration .custom-checkbox label { font-size: 12px !important; color: #666 !important; cursor: pointer !important; margin: 0 !important; line-height: 1.4 !important; padding-left: 0 !important; } body#registration .custom-checkbox label em { font-size: 11px !important; color: #999 !important; font-style: italic !important; display: block !important; margin-top: 2px !important; } body#registration .custom-checkbox span:first-of-type { border: 2px solid #000000 !important; } body#registration .form-control, body#registration input[type="text"], body#registration input[type="email"], body#registration input[type="password"], body#registration input[type="date"] { width: 100% !important; max-width: none !important; padding: 12px 14px !important; border: 1px solid #d0d0d0 !important; border-radius: 5px !important; font-size: 13px !important; background: white !important; color: #1a1a1a !important; box-sizing: border-box !important; transition: border-color 0.3s !important; margin-bottom: 0 !important; } body#registration .form-control, body#registration input[type="text"], body#registration input[type="email"], body#registration input[type="password"], body#registration input[type="date"] { border: 1px solid #000000 !important; } body#registration .form-control:focus, body#registration input:focus { outline: none !important; border-color: #e6007e !important; box-shadow: 0 0 0 3px rgba(230, 0, 126, 0.1) !important; } body#registration .form-control:focus, body#registration input:focus { border-color: #000000 !important; } body#registration input::placeholder { color: #999 !important; } body#registration .input-group { display: flex !important; align-items: center !important; gap: 0 !important; width: 100% !important; } body#registration .input-group .form-control { border-radius: 5px 0 0 5px !important; flex: 1 !important; } body#registration .input-group-append { display: flex !important; } body#registration .input-group-append .btn { border: 1px solid #d0d0d0 !important; border-left: none !important; border-radius: 0 5px 5px 0 !important; background: white !important; color: #666 !important; padding: 12px 14px !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: background 0.3s !important; } body#registration .input-group-append .btn:hover { background: #f5f5f5 !important; } body#registration .form-control-comment { font-size: 11px !important; color: #999 !important; margin-top: 4px !important; margin-bottom: 8px !important; } body#registration .form-control-comment { color: #000000 !important; } body#registration button[type="submit"], body#registration input[type="submit"], body#registration .form-control-submit { display: block !important; width: 100% !important; padding: 13px 30px !important; background: white !important; color: black !important; border: 2px solid black !important; border-radius: 5px !important; font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 1px !important; cursor: pointer !important; transition: all 0.3s ease !important; margin-top: 20px !important; box-sizing: border-box !important; } body#registration button[type="submit"]:hover, body#registration input[type="submit"]:hover { background: #f0f0f0 !important; transform: translateY(-2px) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; } body#registration button[type="submit"]:active { transform: translateY(0) !important; } body#registration .form-footer { text-align: center !important; margin-top: 0 !important; padding: 0 !important; margin-bottom: 20px !important; } body#registration section.register-form > p { text-align: center !important; font-size: 13px !important; color: #666 !important; margin-top: 20px !important; padding: 0 !important; } body#registration section.register-form > p a { color: #e6007e !important; text-decoration: underline !important; font-weight: 600 !important; font-size: 13px !important; } body#registration .password-strength-feedback { margin-top: 8px !important; font-size: 12px !important; } body#registration .progress { height: 4px !important; background: #e8e8e8 !important; border-radius: 3px !important; } body#registration .progress-bar { background: #e6007e !important; height: 100% !important; } body#registration .forgot-password { margin-top: 12px !important; text-align: center !important; } body#registration .forgot-password a { color: #e6007e !important; text-decoration: none !important; font-size: 12px !important; font-weight: 600 !important; } body#registration .forgot-password a:hover { text-decoration: underline !important; } body#registration #notifications { display: none !important; } body#registration .text-muted.pr-1 { position: relative !important; top: 15px !important; } body#registration .form-group:has(#field-birthday) { display: none !important; } body#registration .bz-back-home { margin-top: -150px !important; margin-left: -90px !important } @media (max-width: 1024px) { body#registration .bz-back-home { margin-top: -90px !important; margin-left: 0 !important; top: 14px !important; left: 14px !important; position: fixed !important; z-index: 100000 !important; } } @media (max-width: 1024px) { body#registration, body#registration #wrapper, body#registration #inner-wrapper, body#registration #content, body#registration #content-wrapper, body#registration #main, body#registration section.register-form, body#registration #customer-form { margin-left: 0 !important; margin-right: 0 !important; left: 0 !important; right: auto !important; position: relative !important; transform: none !important; float: none !important; } body#registration #content-wrapper { flex-direction: column !important; width: 100% !important; max-width: 100% !important; min-height: auto !important; } body#registration #content { width: 100% !important; max-width: 100% !important; } body#registration #main { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; overflow-y: visible !important; padding: 40px 30px !important; box-sizing: border-box !important; } body#registration .registration-side-image { display: none !important; width: 0 !important; flex: 0 0 0 !important; } body#registration section.register-form, body#registration #customer-form { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } } @media (max-width: 768px) { html, body#registration { overflow-x: hidden !important; width: 100% !important; max-width: 100% !important; } body#registration #main { padding: 30px 20px !important; min-height: auto !important; } body#registration section.register-form { max-width: 100% !important; } body#registration .form-control, body#registration input[type="text"], body#registration input[type="email"], body#registration input[type="password"] { font-size: 12px !important; padding: 11px 13px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } body#registration button[type="submit"], body#registration input[type="submit"] { font-size: 11px !important; padding: 11px 24px !important; width: 100% !important; box-sizing: border-box !important; } } @media (max-width: 480px) { body#registration #main { padding: 20px 15px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } body#registration section.register-form { max-width: 100% !important; } body#registration .form-control, body#registration input[type="text"], body#registration input[type="email"], body#registration input[type="password"] { font-size: 12px !important; padding: 10px 12px !important; width: 100% !important; box-sizing: border-box !important; } body#registration button[type="submit"], body#registration input[type="submit"] { font-size: 10px !important; padding: 10px 20px !important; width: 100% !important; } body#registration .custom-radio { margin-right: 15px !important; } } /* ---- Lien "Vous avez déjà un compte ?" (après inscription) ---- */ .login-link-after-register { display: block; text-align: center; margin-top: 20px; font-size: 13px; color: #666; text-decoration: none; } .login-link-after-register:hover { color: #000; text-decoration: underline; } .login-link-after-register, .login-link-after-register a { color: #e6007e !important; } /* ---- Bouton "CRÉER UN COMPTE" (texte custom sur bouton natif) ---- */ button[data-link-action="save-customer"] { text-indent: -9999px; position: relative; overflow: hidden; } button[data-link-action="save-customer"]::after { content: "CRÉER UN COMPTE"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-indent: 0; color: #000; white-space: nowrap; font-size: 16px; font-weight: 600; } /* ---- FIX MOBILE — page inscription (sans bordures) ---- */ @media (max-width: 768px) { body#registration { overflow-x: hidden !important; width: 100% !important; max-width: 100vw !important; min-height: 100vh !important; height: auto !important; } body#registration #content-wrapper { flex-direction: column !important; width: 100% !important; max-width: 100% !important; min-height: auto !important; padding: 0 !important; margin: 0 !important; border: none !important; box-shadow: none !important; } body#registration .registration-side-image { display: none !important; width: 0 !important; height: 0 !important; flex: 0 0 0 !important; } body#registration #main { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; padding: 20px 16px 40px !important; margin: 0 !important; min-height: auto !important; height: auto !important; overflow-y: visible !important; box-sizing: border-box !important; border: none !important; box-shadow: none !important; background: #ffffff !important; } body#registration #content { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; border: none !important; } body#registration section.register-form { padding: 20px 0 30px 0 !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; border: none !important; background: transparent !important; box-shadow: none !important; } body#registration .page-header { padding: 20px 0 10px 0 !important; margin: 0 !important; border: none !important; background: transparent !important; } body#registration .page-header::before { width: 120px !important; height: 40px !important; margin: 0 auto 12px !important; border: none !important; } body#registration .page-header .page-title { font-size: 22px !important; border: none !important; } body#registration .form-group, body#registration .form-group.row, body#registration .custom-radio, body#registration .custom-checkbox { border: none !important; box-shadow: none !important; background: transparent !important; } body#registration .form-control, body#registration input[type="text"], body#registration input[type="email"], body#registration input[type="password"], body#registration input[type="date"] { font-size: 16px !important; padding: 14px 16px !important; border-radius: 8px !important; width: 100% !important; box-sizing: border-box !important; border: 1px solid #d0d0d0 !important; background: #ffffff !important; } body#registration .form-control:focus, body#registration input:focus { border-color: #e6007e !important; box-shadow: 0 0 0 3px rgba(230, 0, 126, 0.1) !important; } body#registration .form-group { margin-bottom: 14px !important; } body#registration .form-group label { font-size: 12px !important; margin-bottom: 4px !important; } body#registration .custom-radio { margin-right: 16px !important; border: none !important; } body#registration .custom-radio span:first-of-type, body#registration .custom-checkbox span:first-of-type { width: 18px !important; height: 18px !important; border: 2px solid #d0d0d0 !important; } body#registration .custom-checkbox label { font-size: 12px !important; line-height: 1.3 !important; } body#registration button[type="submit"], body#registration input[type="submit"], body#registration .form-control-submit { width: 100% !important; padding: 14px !important; font-size: 14px !important; border-radius: 8px !important; margin-top: 20px !important; border: 2px solid #1a1a1a !important; background: #ffffff !important; color: #1a1a1a !important; } body#registration button[type="submit"]:hover { background: #f5f5f5 !important; } body#registration #customer-form::after { font-size: 14px !important; margin-top: 16px !important; border: none !important; } body#registration section.register-form > p a { font-size: 14px !important; } body#registration #customer-form, body#registration section.register-form, body#registration #main { border: none !important; box-shadow: none !important; } } @media (max-width: 400px) { body#registration #main { padding: 16px 12px 30px !important; } body#registration .page-header .page-title { font-size: 19px !important; } body#registration .page-header::before { width: 100px !important; height: 32px !important; } body#registration .form-control, body#registration input[type="text"], body#registration input[type="email"], body#registration input[type="password"] { font-size: 15px !important; padding: 12px 14px !important; } body#registration button[type="submit"] { font-size: 13px !important; padding: 12px !important; } body#registration .custom-radio { margin-right: 12px !important; } body#registration .custom-checkbox label { font-size: 11px !important; } } /* ============================================================================= 10. PAGE LOGIN (body.page-authentication / body.authentication) ============================================================================= */ html.authentication, body.authentication { margin: 0 !important; padding: 0 !important; background: #fff !important; } html.authentication { height: 100% !important; overflow: hidden !important; } body.page-authentication, body.authentication { min-height: 100vh !important; height: 100vh !important; overflow: hidden !important; width: 100vw !important; } body.page-authentication #header, body.page-authentication header, body.authentication #header, body.page-authentication #footer, body.page-authentication footer, body.authentication #footer, body.page-authentication .breadcrumb, body.page-authentication nav.breadcrumb, body.authentication .breadcrumb, body.page-authentication #notifications, body.authentication #notifications, body.page-authentication .page-header, body.authentication .page-header, body.page-authentication .page-footer, body.authentication .page-footer { display: none !important; } body.page-authentication #main, body.authentication #main, body.page-authentication #main-page-content, body.authentication #main-page-content, body.page-authentication #wrapper, body.authentication #wrapper, body.page-authentication #inner-wrapper, body.authentication #inner-wrapper, body.page-authentication #content-wrapper, body.authentication #content-wrapper, body.page-authentication #content, body.authentication #content { margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; } body.page-authentication #content.page-content, body.authentication #content.page-content { display: flex !important; flex-direction: row !important; height: 100vh !important; width: 100vw !important; margin: 0 !important; padding: 0 !important; gap: 0 !important; background: #fff !important; overflow: hidden !important; } body.page-authentication #content.page-content > section, body.authentication #content.page-content > section { margin: 0 !important; padding: 0 !important; } .login-form-section::before { content: '' !important; position: absolute !important; top: 60px !important; left: 25% !important; transform: translateX(-50%) !important; width: 180px !important; height: 37px !important; background: url('https://beauty.mcom.tn/img/logo-1780588175.jpg') no-repeat !important; background-size: contain !important; background-position: center !important; display: block !important; z-index: 10 !important; } .login-form-wrapper, section#main > div { width: 100% !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 30px !important; box-sizing: border-box !important; } .login-form-header, .page-header { text-align: center !important; margin: 0 0 40px 0 !important; padding: 0 !important; margin-top: 80px !important; } .login-form-title, .page-header h1, .page-header .page-title { font-family: 'Georgia', serif !important; font-size: 28px !important; font-weight: 700 !important; color: #1a1a1a !important; margin: 0 !important; letter-spacing: 1px !important; padding: 0 !important; } .login-form-title { font-family: "Avenir", "Avenir Next", Arial, sans-serif !important; } .login-form, section#main > form, section#main > section { display: flex !important; flex-direction: column !important; gap: 20px !important; margin: 0 !important; padding: 0 !important; width: 100% !important; } .form-group { display: flex !important; flex-direction: column !important; gap: 6px !important; margin: 0 !important; padding: 0 !important; } .form-group.row { display: flex !important; flex-direction: column !important; gap: 6px !important; } .form-group label { font-size: 12px !important; font-weight: 600 !important; color: #1a1a1a !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; margin: 0 !important; padding: 0 !important; } .form-group .col-md-2, .form-group .col-md-8, .form-group .col-md-2.form-control-comment, .form-group .js-input-column { display: block !important; width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; flex: none !important; } .form-group input[type="email"], .form-group input[type="password"], .form-control { width: 100% !important; padding: 13px 15px !important; border: 1px solid #d0d0d0 !important; border-radius: 5px !important; font-size: 14px !important; font-family: Arial, sans-serif !important; transition: border-color 0.3s, box-shadow 0.3s !important; background: #fff !important; color: #1a1a1a !important; box-sizing: border-box !important; margin: 0 !important; } .form-group input[type="email"]:focus, .form-group input[type="password"]:focus, .form-control:focus { outline: none !important; border-color: #e6007e !important; box-shadow: 0 0 0 3px rgba(230, 0, 126, 0.1) !important; } .input-group { display: flex !important; align-items: center !important; gap: 0 !important; width: 100% !important; margin: 0 !important; } .input-group .form-control, .input-group input { flex: 1 !important; border-radius: 5px 0 0 5px !important; margin: 0 !important; } .input-group-append { margin: 0 !important; } .input-group-append .btn, .input-group .input-group-append button { border-radius: 0 5px 5px 0 !important; border: 1px solid #d0d0d0 !important; border-left: none !important; background: #fff !important; color: #666 !important; padding: 13px 14px !important; cursor: pointer !important; transition: all 0.2s !important; height: auto !important; display: flex !important; align-items: center !important; justify-content: center !important; } .input-group-append .btn:hover, .input-group .input-group-append button:hover { background: #f5f5f5 !important; color: #1a1a1a !important; } .forgot-password { text-align: center !important; margin: 0 !important; padding: 0 !important; } .forgot-password a { font-size: 12px !important; color: #e6007e !important; text-decoration: none !important; font-weight: 600 !important; } .forgot-password a:hover { color: #c70061 !important; text-decoration: underline !important; } .form-footer, footer.form-footer, .form-footer.text-center, section#main .form-footer { display: block !important; justify-content: center !important; margin: 15px 0 0 0 !important; padding: 0 !important; width: 100% !important; gap: 10px !important; visibility: visible !important; } body.page-authentication #submit-login, body.page-authentication button#submit-login, body.page-authentication input#submit-login, body.page-authentication button[type="submit"], body.page-authentication button[type="submit"].btn-primary, body.page-authentication button[type="submit"].btn, body.page-authentication button.btn-primary, body.page-authentication button.form-control-submit, body.page-authentication button[data-link-action="sign-in"], body.page-authentication section#main button[type="submit"], body.page-authentication .form-footer button, body.page-authentication .form-footer input[type="submit"], body.page-authentication footer button, body.page-authentication footer input[type="submit"], body.page-authentication input[type="submit"].btn-primary { display: inline-block !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; z-index: 100 !important; min-width: 280px !important; width: auto !important; padding: 13px 30px !important; height: auto !important; line-height: normal !important; background: #ffffff !important; color: #000000 !important; border: 2px solid #000000 !important; border-radius: 5px !important; font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 1px !important; cursor: pointer !important; transition: all 0.3s ease !important; position: relative !important; margin: 10px auto !important; box-sizing: border-box !important; text-decoration: none !important; } body.page-authentication #submit-login:hover, body.page-authentication button#submit-login:hover, body.page-authentication input#submit-login:hover, body.page-authentication button[type="submit"]:hover, body.page-authentication button[type="submit"].btn-primary:hover, body.page-authentication button.btn-primary:hover, body.page-authentication button.form-control-submit:hover, body.page-authentication section#main button[type="submit"]:hover, body.page-authentication .form-footer button:hover { background: #f0f0f0 !important; color: #000000 !important; transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; } body.page-authentication #submit-login:active, body.page-authentication button#submit-login:active, body.page-authentication button[type="submit"]:active, body.page-authentication .form-footer button:active { transform: translateY(0) !important; } body.page-authentication #submit-login:disabled, body.page-authentication button[type="submit"]:disabled { display: inline-block !important; visibility: visible !important; opacity: 0.6 !important; } .no-account { text-align: center !important; margin: 20px 0 0 0 !important; padding: 20px 0 0 0 !important; border-top: 1px solid #e0e0e0 !important; width: 100% !important; visibility: visible !important; display: block !important; } .no-account a { font-size: 12px !important; color: #e6007e !important; text-decoration: none !important; font-weight: 700 !important; display: inline-flex !important; align-items: center !important; gap: 5px !important; } .no-account a:hover { color: #c70061 !important; text-decoration: underline !important; } .login-image-section { flex: 0 0 50% !important; width: 50% !important; background: linear-gradient(135deg, #E8547F 0%, #D63A63 100%) !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; position: relative !important; height: 100vh !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } .login-image-section img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; display: block !important; } body.page-authentication .search-btn, body.page-authentication button.search-btn, body.page-authentication [class*="search-btn"] { display: none !important; } @media (max-width: 1024px) { body.page-authentication #content.page-content, body.authentication #content.page-content { flex-direction: column !important; height: auto !important; min-height: 100vh !important; width: 100% !important; } body.page-authentication, body.authentication { min-height: 100vh !important; height: auto !important; } .login-form-section, section#main { flex: 0 0 auto !important; width: 100% !important; height: auto !important; min-height: auto !important; padding: 40px 30px !important; } .login-form-section::before { width: 150px !important; height: 31px !important; top: 20px !important; left: 50% !important; transform: translateX(-50%) !important; } .login-form-header { margin-top: 70px !important; } .login-image-section { display: none !important; } } @media (max-width: 768px) { body.page-authentication #content.page-content, body.authentication #content.page-content { height: auto !important; min-height: auto !important; width: 100% !important; } body.page-authentication, body.authentication { height: auto !important; } .login-form-section, section#main { padding: 30px 20px !important; min-height: auto !important; height: auto !important; } .login-form-section::before { width: 120px !important; height: 25px !important; top: 15px !important; left: 50% !important; transform: translateX(-50%) !important; } .login-form-header { margin-top: 60px !important; margin-bottom: 30px !important; } .login-form-title { font-size: 20px !important; } .form-group input { font-size: 13px !important; padding: 12px 14px !important; } #submit-login, button[type="submit"].btn-primary, button.form-control-submit { min-width: 100% !important; font-size: 11px !important; } .login-image-section { display: none !important; } } @media (max-width: 480px) { .login-form-section, section#main { padding: 20px 15px !important; } .login-form-section::before { width: 100px !important; height: 20px !important; top: 12px !important; left: 50% !important; transform: translateX(-50%) !important; } .login-form-header { margin-top: 50px !important; margin-bottom: 25px !important; } .login-form-title { font-size: 18px !important; } .form-group label { font-size: 11px !important; } .form-group input { font-size: 12px !important; padding: 11px 13px !important; } #submit-login, button[type="submit"].btn-primary, button.form-control-submit { padding: 11px 24px !important; font-size: 10px !important; min-width: auto !important; } } /* ---- Bordures noires / focus rose — champs formulaire login ---- */ #login-form .form-control, #login-form .input-group .form-control, #login-form .input-group-append .btn { border: 1px solid #000 !important; box-shadow: none !important; } #login-form .form-control:focus { border-color: #F05DBE !important; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1) !important; outline: none !important; } #login-form .btn-outline-secondary { border-color: #000 !important; color: #000 !important; } #login-form .btn-outline-secondary:hover { background: #F5CEEA !important; color: #fff !important; } /* ---- Lien retour accueil (bouton rond, injecté par le JS) ---- */ a.bz-back-home { display: flex !important; align-items: center !important; justify-content: center !important; } a.bz-back-home svg, a.bz-back-home svg path { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; opacity: 0 !important; } a.bz-back-home::after { content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="rgba(0,0,0,0.55)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9.5L12 3l9 6.5V20a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1V9.5z"></path></svg>') !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; display: block !important; line-height: 0 !important; pointer-events: none !important; width: 20px !important; height: 20px !important; } a.bz-back-home { width: 54px !important; height: 54px !important; background-color: #fff !important; color: #000 !important; } a.bz-back-home svg { width: 28px !important; height: 28px !important; stroke: #000 !important; } /* ---- Boutons social login (Google / Facebook) — page connexion ---- */ .iqitsociallogin-page-connexion { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 12px !important; width: 100% !important; } .iqitsociallogin-page-connexion .btn-iqitsociallogin { flex: 1 1 0 !important; width: auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; white-space: nowrap !important; margin: 0 !important; padding: 10px 12px !important; font-size: 13px !important; } .iqitsociallogin-page-connexion .btn-google img { width: 16px !important; height: 16px !important; margin: 0 !important; } .iqitsociallogin-page-connexion i { font-size: 15px !important; } @media (max-width: 480px) { .iqitsociallogin-page-connexion { flex-direction: column !important; } .iqitsociallogin-page-connexion .btn-iqitsociallogin { width: 100% !important; } } .iqitsociallogin { display: flex !important; gap: 10px !important; justify-content: center !important; } .iqitsociallogin .btn-iqitsociallogin { flex: 1 1 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; padding: 8px 14px !important; border-radius: 4px !important; text-decoration: none !important; white-space: nowrap !important; margin: 0 !important; box-shadow: none !important; font-size: 0 !important; /* hides the original "Login with..." text */ } .iqitsociallogin .btn-facebook { background-color: #3c5a8a !important; border: 1px solid #3c5a8a !important; color: #ffffff !important; } .iqitsociallogin .btn-facebook i { font-size: 15px !important; color: #ffffff !important; margin: 0 !important; } .iqitsociallogin .btn-facebook::after { content: "FACEBOOK"; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.3px !important; text-transform: uppercase !important; color: #ffffff !important; font-family: "Avenir", "Avenir Next", Arial, sans-serif !important; } .iqitsociallogin .btn-google { background-color: #ffffff !important; border: 1px solid #dcdcdc !important; color: #4d4d4d !important; } .iqitsociallogin .btn-google span { display: flex !important; align-items: center !important; margin: 0 !important; } .iqitsociallogin .btn-google img { width: 15px !important; height: 15px !important; margin: 0 !important; } .iqitsociallogin .btn-google::after { content: "GOOGLE"; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.3px !important; text-transform: uppercase !important; color: #4d4d4d !important; font-family: "Avenir", "Avenir Next", Arial, sans-serif !important; } .iqitsociallogin-colors-native .btn-google { background: unset !important; } a.btn.btn-secondary.btn-iqitsociallogin.btn-google.mt-1.mb-1 { background: #ffffff !important; color: #000000 !important; border: 1px solid #000000 !important; } a.btn.btn-secondary.btn-iqitsociallogin.btn-google.mt-1.mb-1:hover { background: #ffffff !important; color: #000000 !important; border-color: #000000 !important; } .iqitsociallogin.iqitsociallogin-checkout { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 10px !important; } .iqitsociallogin.iqitsociallogin-checkout .text-muted { flex-basis: 100% !important; width: 100% !important; margin: 0 0 4px 0 !important; padding: 0 !important; } .iqitsociallogin.iqitsociallogin-checkout .btn-iqitsociallogin { flex: 1 1 0 !important; min-width: 0 !important; margin: 0 !important; padding: 10px 12px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; white-space: nowrap !important; box-sizing: border-box !important; font-size: 0 !important; /* cache le texte natif du lien (évite le doublon) */ } .iqitsociallogin.iqitsociallogin-checkout .btn-facebook i { font-size: 15px !important; } .iqitsociallogin.iqitsociallogin-checkout .btn-google img { width: 15px !important; height: 15px !important; } .iqitsociallogin.iqitsociallogin-checkout .btn-facebook::after { content: "Facebook" !important; font-size: 13px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; } .iqitsociallogin.iqitsociallogin-checkout .btn-google::after { content: "Google" !important; font-size: 13px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; } .iqitsociallogin .text-muted.pr-1 { display: inline-flex !important; align-items: center; transform: translateY(-10px); } .iqitsociallogin-checkout .text-muted { font-size: 16px !important; font-weight: 500; color: #000 !important; } /* ---- FIX MOBILE — page login (sans bordures) ---- */ @media (max-width: 768px) { body.page-authentication, body.authentication { overflow-x: hidden !important; width: 100% !important; max-width: 100vw !important; min-height: 100vh !important; height: auto !important; } body.page-authentication #content.page-content, body.authentication #content.page-content { flex-direction: column !important; height: auto !important; min-height: 100vh !important; width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; padding: 0 !important; margin: 0 !important; border: none !important; box-shadow: none !important; } .login-image-section { display: none !important; width: 0 !important; height: 0 !important; flex: 0 0 0 !important; } .login-form-section, section#main, body.page-authentication section#main { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; padding: 20px 16px 40px !important; margin: 0 !important; min-height: auto !important; height: auto !important; box-sizing: border-box !important; overflow-x: hidden !important; border: none !important; box-shadow: none !important; background: #ffffff !important; } .login-form-section::before { position: relative !important; top: 0 !important; left: 0 !important; transform: none !important; width: 160px !important; height: 40px !important; margin: 0 auto 20px auto !important; display: block !important; background-size: contain !important; } .login-form-header { margin-top: 0 !important; margin-bottom: 24px !important; border: none !important; } .login-form-title { font-size: 22px !important; border: none !important; } .form-group input[type="email"], .form-group input[type="password"], .form-control { font-size: 16px !important; padding: 14px 16px !important; border-radius: 8px !important; width: 100% !important; box-sizing: border-box !important; border: 1px solid #d0d0d0 !important; background: #ffffff !important; } .login-form, .login-form *, .form-group, .form-group.row, .input-group, .input-group-append { border: none !important; box-shadow: none !important; background: transparent !important; } body.page-authentication #submit-login, body.page-authentication button[type="submit"].btn-primary, body.page-authentication button.form-control-submit { width: 100% !important; min-width: unset !important; padding: 14px !important; font-size: 14px !important; border-radius: 8px !important; margin: 10px 0 !important; border: 2px solid #1a1a1a !important; background: #ffffff !important; color: #1a1a1a !important; } body.page-authentication #submit-login:hover, body.page-authentication button[type="submit"].btn-primary:hover { background: #f5f5f5 !important; } .iqitsociallogin-page-connexion { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 8px !important; border: none !important; background: transparent !important; padding: 0 !important; margin: 0 !important; } .iqitsociallogin-page-connexion .btn-iqitsociallogin { flex: 1 1 calc(50% - 4px) !important; min-width: 0 !important; padding: 10px 8px !important; font-size: 11px !important; border-radius: 6px !important; border: 1px solid #dcdcdc !important; background: #ffffff !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; } .iqitsociallogin-page-connexion .btn-google { background: #ffffff !important; border: 1px solid #dcdcdc !important; color: #4d4d4d !important; font-size: 0 !important; } .iqitsociallogin-page-connexion .btn-google img { width: 16px !important; height: 16px !important; margin: 0 !important; } .iqitsociallogin-page-connexion .btn-google::after { content: "GOOGLE" !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.3px !important; text-transform: uppercase !important; color: #4d4d4d !important; font-family: "Avenir", "Avenir Next", Arial, sans-serif !important; } .iqitsociallogin-page-connexion .btn-facebook { background: #3c5a8a !important; border: 1px solid #3c5a8a !important; color: #ffffff !important; font-size: 0 !important; } .iqitsociallogin-page-connexion .btn-facebook i { font-size: 15px !important; color: #ffffff !important; margin: 0 !important; } .iqitsociallogin-page-connexion .btn-facebook::after { content: "FACEBOOK" !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.3px !important; text-transform: uppercase !important; color: #ffffff !important; font-family: "Avenir", "Avenir Next", Arial, sans-serif !important; } .no-account { margin-top: 16px !important; padding-top: 16px !important; border-top: 1px solid #e8e8e8 !important; background: transparent !important; } .no-account a { font-size: 14px !important; } .forgot-password a { font-size: 13px !important; } .login-form { gap: 16px !important; border: none !important; } .login-form .iqitsociallogin { margin-bottom: 8px !important; border: none !important; } .login-form-section::before, .login-form-section::after { border: none !important; } .card, .card-body, .form-group, .input-group, .input-group-append { border: none !important; box-shadow: none !important; background: transparent !important; } } @media (max-width: 400px) { .login-form-section, body.page-authentication section#main { padding: 16px 12px 30px !important; } .login-form-title { font-size: 19px !important; } .login-form-section::before { width: 130px !important; height: 32px !important; } .form-group input[type="email"], .form-group input[type="password"], .form-control { font-size: 15px !important; padding: 12px 14px !important; } body.page-authentication #submit-login, body.page-authentication button[type="submit"].btn-primary { font-size: 13px !important; padding: 12px !important; } .iqitsociallogin-page-connexion .btn-iqitsociallogin { flex: 1 1 100% !important; padding: 10px !important; } .iqitsociallogin-page-connexion .btn-google::after { font-size: 10px !important; } .iqitsociallogin-page-connexion .btn-facebook::after { font-size: 10px !important; } } /* ============================================================================= 11. ESPACE "MON COMPTE" ----------------------------------------------------------------------------- Regroupe toutes les pages du compte, chacune scopée strictement par son sélecteur body (body#my-account, body.page-identity, body.page-addresses, body.page-history, body.page-order-slip, body.page-discount, body#module-iqitwishlist-view, body#module-psgdpr-gdpr, body#module-ps_emailalerts-account, body#module-totloyaltyadvanced-account). Chaque bloc reste strictement indépendant des autres — aucune règle commune n'a été factorisée par sécurité, exactement comme dans le fichier d'origine. ============================================================================= */ /* --------------------------------------------------------------------------- 11.1 — "Mes points de fidélité" (body#module-totloyaltyadvanced-account) --------------------------------------------------------------------------- */ body#module-totloyaltyadvanced-account { --loy-bg: #fdf6f8; --loy-surface: #ffffff; --loy-ink: #1c1a1a; --loy-muted: #8c8482; --loy-line: rgba(28, 26, 26, .08); --loy-accent: #e6007e; --loy-accent-ink: #ad0060; --loy-accent-soft: #fce4ec; --loy-gold: #c9a961; --loy-gold-soft: #f7f0df; --loy-radius-lg: 20px; --loy-radius-md: 14px; --loy-shadow: 0 14px 34px rgba(28, 26, 26, .07); background: var(--loy-bg); } body#module-totloyaltyadvanced-account, body#module-totloyaltyadvanced-account input, body#module-totloyaltyadvanced-account button { font-family: 'bsf-Avenir', 'Poppins', sans-serif; color: var(--loy-ink); } body#module-totloyaltyadvanced-account h1, body#module-totloyaltyadvanced-account h2, body#module-totloyaltyadvanced-account h5 { font-family: 'Apollo', 'Playfair Display', serif; font-weight: 500; letter-spacing: .01em; } body#module-totloyaltyadvanced-account #inner-wrapper { padding-top: 8px; padding-bottom: 64px; } body#module-totloyaltyadvanced-account .breadcrumb { background: transparent; border: none; padding: 18px 0 6px; } body#module-totloyaltyadvanced-account .breadcrumb-custom li { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--loy-muted); } body#module-totloyaltyadvanced-account .breadcrumb-custom li.breadcrumb-active { color: var(--loy-accent-ink); font-weight: 600; } body#module-totloyaltyadvanced-account .page-header { margin-bottom: 28px; } body#module-totloyaltyadvanced-account .page-header .page-title { font-size: 34px; position: relative; padding-bottom: 14px; } body#module-totloyaltyadvanced-account .page-header .page-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 2px; background: var(--loy-gold); } body#module-totloyaltyadvanced-account #content > .row { display: flex; flex-wrap: wrap; gap: 28px; } body#module-totloyaltyadvanced-account .my-account-side-links { flex: 0 0 260px !important; max-width: 260px !important; background: var(--loy-surface); border-radius: var(--loy-radius-lg); box-shadow: var(--loy-shadow); padding: 10px; display: flex; flex-direction: column; gap: 2px; align-self: flex-start; } body#module-totloyaltyadvanced-account .my-account-side-links a { flex: 0 0 100% !important; max-width: 100% !important; width: 100%; padding: 0; margin: 0; } body#module-totloyaltyadvanced-account .my-account-side-links .link-item { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 10px; font-size: 13.5px; color: var(--loy-ink); transition: background .2s ease, color .2s ease, transform .2s ease; } body#module-totloyaltyadvanced-account .my-account-side-links .link-item i { font-size: 15px; width: 18px; text-align: center; color: var(--loy-muted); transition: color .2s ease; } body#module-totloyaltyadvanced-account .my-account-side-links a:hover .link-item { background: var(--loy-accent-soft); color: var(--loy-accent-ink); transform: translateX(2px); } body#module-totloyaltyadvanced-account .my-account-side-links a:hover .link-item i { color: var(--loy-accent-ink); } body#module-totloyaltyadvanced-account .my-account-side-links a[href*="totloyaltyadvanced"] .link-item { background: var(--loy-gold-soft); color: #6b5424; font-weight: 600; } body#module-totloyaltyadvanced-account .my-account-side-links a[href*="totloyaltyadvanced"] .link-item i { color: var(--loy-gold); } body#module-totloyaltyadvanced-account .my-account-page-content { flex: 1 1 0% !important; max-width: none !important; background: var(--loy-surface); border-radius: var(--loy-radius-lg); box-shadow: var(--loy-shadow); padding: 40px 44px; } body#module-totloyaltyadvanced-account .my-account-page-content h2 { font-size: 26px; margin-bottom: 4px; } body#module-totloyaltyadvanced-account .my-account-page-content h2::before { content: "Programme fidélité"; display: block; font-family: 'bsf-Avenir', 'Poppins', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--loy-accent); margin-bottom: 10px; } body#module-totloyaltyadvanced-account #notifications:empty { display: none; } body#module-totloyaltyadvanced-account .table tfoot { display: table-header-group; /* fait remonter le total tout en haut */ } body#module-totloyaltyadvanced-account .table tfoot tr { display: flex; align-items: center; gap: 24px; background: linear-gradient(135deg, var(--loy-accent-soft), var(--loy-gold-soft)); border-radius: var(--loy-radius-md); padding: 26px 30px; margin: 22px 0 30px; border: none; } body#module-totloyaltyadvanced-account .table tfoot td { border: none; padding: 0; } body#module-totloyaltyadvanced-account .table tfoot td:first-child { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; text-align: left !important; flex: 1 1 auto; } body#module-totloyaltyadvanced-account .table tfoot td:nth-child(2) { display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; flex: 0 0 84px; border-radius: 50%; background: var(--loy-surface); box-shadow: 0 0 0 3px var(--loy-gold); font-family: 'Apollo', 'Playfair Display', serif; font-size: 28px; color: var(--loy-accent-ink); text-align: center !important; } body#module-totloyaltyadvanced-account .table tfoot td:last-child { display: none; } @media (prefers-reduced-motion: no-preference) { body#module-totloyaltyadvanced-account .table tfoot td:nth-child(2) { animation: loy-pop .5s ease both; } } @keyframes loy-pop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } } body#module-totloyaltyadvanced-account .table { border: none; border-collapse: separate; border-spacing: 0; width: 100%; } body#module-totloyaltyadvanced-account .table thead { display: none; } body#module-totloyaltyadvanced-account .table tbody { display: block; } body#module-totloyaltyadvanced-account .table tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; background: var(--loy-surface); border: 1px solid var(--loy-line); border-radius: var(--loy-radius-md); padding: 16px 20px; margin-bottom: 10px; transition: box-shadow .2s ease, transform .2s ease; } body#module-totloyaltyadvanced-account .table-striped tbody tr:nth-of-type(odd) { background: var(--loy-surface); } body#module-totloyaltyadvanced-account .table tbody tr:hover { box-shadow: var(--loy-shadow); transform: translateY(-1px); } body#module-totloyaltyadvanced-account .table th[data-label], body#module-totloyaltyadvanced-account .table td[data-label] { border: none; padding: 0; background: transparent; } body#module-totloyaltyadvanced-account .table th[data-label]::before, body#module-totloyaltyadvanced-account .table td[data-label]::before { content: attr(data-label); display: block; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--loy-muted); margin-bottom: 3px; } body#module-totloyaltyadvanced-account .table th[data-label="Commande"] { flex: 1 1 170px; font-weight: 700; font-size: 14px; } body#module-totloyaltyadvanced-account .table td[data-label="Date"] { flex: 1 1 150px; font-size: 13px; color: var(--loy-muted); } body#module-totloyaltyadvanced-account .table td[data-label="Points"] { flex: 0 0 90px; font-family: 'Apollo', 'Playfair Display', serif; font-size: 18px; color: var(--loy-accent-ink); } body#module-totloyaltyadvanced-account .table td[data-label="Statuts des points"] { flex: 1 1 140px; min-height: 1px; } body#module-totloyaltyadvanced-account .points_container { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 22px; padding: 0; } body#module-totloyaltyadvanced-account .points_container p { flex: 1 1 260px; background: var(--loy-bg); border: 1px solid var(--loy-line); border-radius: 12px; padding: 14px 18px; font-size: 13px; line-height: 1.5; margin: 0; } body#module-totloyaltyadvanced-account .points_container p b { color: var(--loy-accent-ink); } body#module-totloyaltyadvanced-account p.warning { display: block; text-align: center; font-style: italic; font-size: 13px; color: var(--loy-muted); background: transparent; border: 1px dashed var(--loy-line); border-radius: var(--loy-radius-md); padding: 26px; margin-top: 10px; } body#module-totloyaltyadvanced-account a:focus-visible { outline: 2px solid var(--loy-accent); outline-offset: 2px; border-radius: 6px; } @media (max-width: 991px) { body#module-totloyaltyadvanced-account #content > .row { flex-direction: column; } body#module-totloyaltyadvanced-account .my-account-side-links { flex: 1 1 100% !important; max-width: 100% !important; flex-direction: row; flex-wrap: wrap; gap: 6px; } body#module-totloyaltyadvanced-account .my-account-side-links a { flex: 1 1 auto !important; width: auto; } } @media (max-width: 576px) { body#module-totloyaltyadvanced-account .my-account-page-content { padding: 26px 18px; } body#module-totloyaltyadvanced-account .table tfoot tr { flex-direction: column; text-align: center; gap: 14px; } body#module-totloyaltyadvanced-account .table tfoot td:first-child { text-align: center !important; } } /* --------------------------------------------------------------------------- 11.2 — "Votre compte" / tableau de bord (body#my-account) --------------------------------------------------------------------------- */ body#my-account { --acc-bg: #fdf6f8; --acc-surface: #ffffff; --acc-ink: #1c1a1a; --acc-muted: #8c8482; --acc-line: rgba(28, 26, 26, .08); --acc-accent: #e6007e; --acc-accent-ink: #ad0060; --acc-accent-soft: #fce4ec; --acc-gold: #c9a961; --acc-gold-soft: #f7f0df; --acc-radius-lg: 20px; --acc-radius-md: 14px; --acc-shadow: 0 14px 34px rgba(28, 26, 26, .07); background: var(--acc-bg); } body#my-account, body#my-account input, body#my-account button { font-family: 'bsf-Avenir', 'Poppins', sans-serif; color: var(--acc-ink); } body#my-account h1, body#my-account h2 { font-family: 'Apollo', 'Playfair Display', serif; font-weight: 500; letter-spacing: .01em; } body#my-account #inner-wrapper { padding-top: 8px; padding-bottom: 64px; } body#my-account .breadcrumb { background: transparent; border: none; padding: 18px 0 6px; } body#my-account .breadcrumb-custom li { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--acc-muted); } body#my-account .breadcrumb-custom li.breadcrumb-active { color: var(--acc-accent-ink); font-weight: 600; } body#my-account .page-header { margin-bottom: 28px; } body#my-account .page-header .page-title { font-size: 34px; position: relative; padding-bottom: 14px; } body#my-account .page-header .page-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 2px; background: var(--acc-gold); } body#my-account #content > .row { display: flex; flex-wrap: wrap; gap: 28px; } body#my-account .my-account-side-links { flex: 0 0 260px !important; max-width: 260px !important; background: var(--acc-surface); border-radius: var(--acc-radius-lg); box-shadow: var(--acc-shadow); padding: 10px; display: flex; flex-direction: column; gap: 2px; align-self: flex-start; } body#my-account .my-account-side-links a { flex: 0 0 100% !important; max-width: 100% !important; width: 100%; padding: 0; margin: 0; } body#my-account .my-account-side-links .link-item { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 10px; font-size: 13.5px; color: var(--acc-ink); transition: background .2s ease, color .2s ease, transform .2s ease; } body#my-account .my-account-side-links .link-item i, body#my-account .my-account-side-links .link-item .material-icons { font-size: 15px; width: 18px; text-align: center; color: var(--acc-muted); transition: color .2s ease; } body#my-account .my-account-side-links a:hover .link-item { background: var(--acc-accent-soft); color: var(--acc-accent-ink); transform: translateX(2px); } body#my-account .my-account-side-links a:hover .link-item i, body#my-account .my-account-side-links a:hover .link-item .material-icons { color: var(--acc-accent-ink); } body#my-account .my-account-side-links a[href*="totloyaltyadvanced"] .link-item { background: var(--acc-gold-soft); color: #6b5424; font-weight: 600; } body#my-account .my-account-side-links a[href*="totloyaltyadvanced"] .link-item .material-icons { color: var(--acc-gold); } body#my-account .my-account-page-content { flex: 1 1 0% !important; max-width: none !important; background: var(--acc-surface); border-radius: var(--acc-radius-lg); box-shadow: var(--acc-shadow); padding: 64px 44px; text-align: center; } body#my-account #notifications:empty { display: none; } body#my-account .my-account-page-content::before { content: "\f0e4"; /* icône "tachometer" — reprend le médaillon de la page fidélité */ display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin: 0 auto 22px; border-radius: 50%; background: linear-gradient(135deg, var(--acc-accent-soft), var(--acc-gold-soft)); box-shadow: 0 0 0 3px var(--acc-gold); font-family: "FontAwesome"; font-size: 24px; color: var(--acc-accent-ink); } @media (prefers-reduced-motion: no-preference) { body#my-account .my-account-page-content::before { animation: acc-pop .5s ease both; } } @keyframes acc-pop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } } body#my-account .my-account-page-content { font-size: 17px; line-height: 1.6; color: var(--acc-ink); } body#my-account a:focus-visible { outline: 2px solid var(--acc-accent); outline-offset: 2px; border-radius: 6px; } @media (max-width: 991px) { body#my-account #content > .row { flex-direction: column; } body#my-account .my-account-side-links { flex: 1 1 100% !important; max-width: 100% !important; flex-direction: row; flex-wrap: wrap; gap: 6px; } body#my-account .my-account-side-links a { flex: 1 1 auto !important; width: auto; } } @media (max-width: 576px) { body#my-account .my-account-page-content { padding: 40px 20px; } } /* --------------------------------------------------------------------------- 11.3 — "Vos informations personnelles" / Identité (body.page-identity) --------------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap'); body.page-identity { --id-ink: #1a1a1a; --id-rose: #e6007e; --id-rose-deep: #b8005f; --id-blush: #fce4ec; --id-cream: #faf6f4; --id-line: #ece1dd; --id-gray: #767676; --id-muted: #b9aca7; --id-gold: #c9a961; --id-gold-soft: #f7f0df; --id-radius: 18px; background: var(--id-cream); } @keyframes idFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } body.page-identity .my-account-page-content, body.page-identity .my-account-side-links { animation: idFadeUp .5s ease both; } @media (prefers-reduced-motion: reduce) { body.page-identity .my-account-page-content, body.page-identity .my-account-side-links { animation: none; } } body.page-identity nav.breadcrumb { background: transparent; border: none; padding: 22px 0 4px; } body.page-identity .breadcrumb-custom { font-family: 'Poppins', sans-serif; font-size: 12.5px; letter-spacing: .03em; } body.page-identity .breadcrumb-custom li { display: inline-flex; align-items: center; } body.page-identity .breadcrumb-custom li:not(:last-child)::after { content: '/'; margin: 0 8px; color: #d8cfca; } body.page-identity .breadcrumb-custom li a span { color: var(--id-gray); transition: color .25s ease; } body.page-identity .breadcrumb-custom li a:hover span { color: var(--id-rose); } body.page-identity .breadcrumb-custom li.breadcrumb-active span { color: var(--id-ink); font-weight: 500; } body.page-identity .page-header { text-align: center; margin-bottom: 6px; } body.page-identity .page-header .page-title { font-family: 'Playfair Display', serif; font-weight: 600; font-size: 34px; color: var(--id-ink); position: relative; display: inline-block; padding-bottom: 16px; } body.page-identity .page-header .page-title::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 46px; height: 2px; background: var(--id-rose); } body.page-identity .my-account-page-content-wrapper { padding: 22px 0 70px; } body.page-identity .my-account-page-content-wrapper > .row { align-items: flex-start; } body.page-identity .my-account-side-links { flex: 0 0 260px !important; max-width: 260px !important; background: #fff; border-radius: 20px; box-shadow: 0 14px 34px rgba(28, 26, 26, .07); padding: 10px; display: flex; flex-direction: column; gap: 2px; align-self: flex-start; } body.page-identity .my-account-side-links a { flex: 0 0 100% !important; max-width: 100% !important; width: 100%; padding: 0; margin: 0; } body.page-identity .my-account-side-links .link-item { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 10px; font-family: 'Poppins', sans-serif; font-size: 13.5px; color: var(--id-ink); transition: background .2s ease, color .2s ease, transform .2s ease; } body.page-identity .my-account-side-links .link-item i, body.page-identity .my-account-side-links .link-item .material-icons { font-size: 15px; width: 18px; text-align: center; color: var(--id-gray); transition: color .2s ease; } body.page-identity .my-account-side-links a:hover .link-item { background: var(--id-blush); color: var(--id-rose-deep); transform: translateX(2px); } body.page-identity .my-account-side-links a:hover .link-item i, body.page-identity .my-account-side-links a:hover .link-item .material-icons { color: var(--id-rose-deep); } body.page-identity .my-account-side-links a[href$="/identite"] .link-item { background: var(--id-gold-soft); color: #6b5424; font-weight: 600; } body.page-identity .my-account-side-links a[href$="/identite"] .link-item i { color: var(--id-gold); } body.page-identity .my-account-page-content { background: #fff; border-radius: var(--id-radius); border: 1px solid var(--id-line); box-shadow: 0 14px 40px rgba(26, 26, 26, .05); padding: 40px 44px 34px; } body.page-identity .my-account-page-content h2 { font-family: 'Playfair Display', serif; font-weight: 600; font-size: 22px; color: var(--id-ink); margin-bottom: 28px; padding-bottom: 16px; border-bottom: 1px solid var(--id-line); } body.page-identity #notifications .alert { border-radius: 12px; border: none; font-family: 'Poppins', sans-serif; font-size: 13px; padding: 14px 18px; margin-bottom: 22px; } body.page-identity #customer-form .form-group { padding: 15px 0; border-bottom: 1px solid #f4eeec; } body.page-identity #customer-form footer.form-footer { border-bottom: none; } body.page-identity #customer-form .col-form-label { font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--id-ink); } body.page-identity #customer-form .col-form-label.required::after { content: '*'; color: var(--id-rose); margin-left: 4px; } body.page-identity #customer-form .form-control { font-family: 'Poppins', sans-serif; font-size: 14.5px; color: var(--id-ink); background: var(--id-cream); border: 1px solid var(--id-line); border-radius: 10px; padding: 11px 16px; height: auto; box-shadow: none; transition: all .25s ease; } body.page-identity #customer-form .form-control:focus { border-color: var(--id-rose); background: #fff; box-shadow: 0 0 0 3px rgba(230, 0, 126, .12); outline: none; } body.page-identity #customer-form .form-control-comment { font-family: 'Poppins', sans-serif; font-size: 11.5px; color: var(--id-gray); margin-top: 6px; display: inline-block; } body.page-identity #customer-form .col-md-2.form-control-comment { font-size: 11px; font-style: italic; color: var(--id-muted); margin-top: 0; } body.page-identity #customer-form .input-group .form-control { border-right: none; border-radius: 10px 0 0 10px; } body.page-identity #customer-form .input-group-append .btn-outline-secondary { border: 1px solid var(--id-line); border-left: none; border-radius: 0 10px 10px 0; background: var(--id-cream); color: var(--id-gray); padding: 0 16px; transition: all .25s ease; } body.page-identity #customer-form .input-group-append .btn-outline-secondary:hover { color: var(--id-rose); background: var(--id-blush); } body.page-identity #customer-form .input-group.js-parent-focus:focus-within .form-control { border-color: var(--id-rose); } body.page-identity .password-strength-feedback .progress { height: 5px; border-radius: 6px; background: var(--id-blush); overflow: hidden; } body.page-identity .password-strength-feedback .progress-bar { background: linear-gradient(90deg, var(--id-rose), var(--id-rose-deep)); } body.page-identity .password-strength-text { font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 500; color: var(--id-rose); margin: 8px 0 6px; } body.page-identity .password-requirements p { font-family: 'Poppins', sans-serif; font-size: 11.5px; color: var(--id-gray); display: flex; align-items: center; gap: 6px; margin-bottom: 4px; } body.page-identity .password-requirements i.fa-check { color: var(--id-muted); font-size: 10px; } body.page-identity .custom-checkbox { display: flex; align-items: flex-start; gap: 10px; } body.page-identity .custom-checkbox input[type="checkbox"] { accent-color: var(--id-rose); } body.page-identity .custom-checkbox input:checked + span, body.page-identity .custom-checkbox input:checked ~ span { background: var(--id-rose); border-color: var(--id-rose); } body.page-identity .custom-checkbox label { font-family: 'Poppins', sans-serif; font-size: 13px; color: var(--id-gray); line-height: 1.5; margin: 0; } body.page-identity .form-footer { margin-top: 8px; padding-top: 26px; border-top: 1px solid var(--id-line); } body.page-identity .form-control-submit { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, var(--id-rose) 0%, var(--id-rose-deep) 100%); border: none; border-radius: 30px; padding: 14px 46px; box-shadow: 0 10px 24px rgba(230, 0, 126, .28); transition: all .3s ease; } body.page-identity .form-control-submit:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(230, 0, 126, .36); } body.page-identity .form-control-submit:active { transform: translateY(0); } body.page-identity a:focus-visible, body.page-identity button:focus-visible, body.page-identity input:focus-visible { outline: 2px solid var(--id-rose); outline-offset: 2px; } @media (max-width: 992px) { body.page-identity .my-account-page-content { padding: 30px 26px; } } @media (max-width: 991px) { body.page-identity .my-account-page-content-wrapper > .row { flex-direction: column; } body.page-identity .my-account-side-links { flex: 1 1 100% !important; max-width: 100% !important; flex-direction: row; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; } body.page-identity .my-account-side-links a { flex: 1 1 auto !important; width: auto; } } @media (max-width: 768px) { body.page-identity .page-header .page-title { font-size: 26px; } body.page-identity .my-account-page-content { padding: 26px 20px; } body.page-identity #customer-form .col-md-2.form-control-comment { padding-left: 0; margin-top: 4px; } } @media (max-width: 480px) { body.page-identity .my-account-page-content { padding: 22px 16px; } body.page-identity .form-control-submit { width: 100%; padding: 14px 0; } } /* --------------------------------------------------------------------------- 11.4 — "Vos adresses" (body.page-addresses) --------------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap'); body.page-addresses { --adr-ink: #1a1a1a; --adr-rose: #e6007e; --adr-rose-deep: #b8005f; --adr-blush: #fce4ec; --adr-cream: #faf6f4; --adr-line: #ece1dd; --adr-gray: #767676; --adr-muted: #b9aca7; --adr-gold: #c9a961; --adr-gold-soft: #f7f0df; --adr-radius: 18px; background: var(--adr-cream); } @keyframes adrFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } body.page-addresses .my-account-page-content, body.page-addresses .my-account-side-links { animation: adrFadeUp .5s ease both; } @media (prefers-reduced-motion: reduce) { body.page-addresses .my-account-page-content, body.page-addresses .my-account-side-links { animation: none; } } body.page-addresses nav.breadcrumb { background: transparent; border: none; padding: 22px 0 4px; } body.page-addresses .breadcrumb-custom { font-family: 'Poppins', sans-serif; font-size: 12.5px; letter-spacing: .03em; } body.page-addresses .breadcrumb-custom li { display: inline-flex; align-items: center; } body.page-addresses .breadcrumb-custom li:not(:last-child)::after { content: '/'; margin: 0 8px; color: #d8cfca; } body.page-addresses .breadcrumb-custom li a span { color: var(--adr-gray); transition: color .25s ease; } body.page-addresses .breadcrumb-custom li a:hover span { color: var(--adr-rose); } body.page-addresses .breadcrumb-custom li.breadcrumb-active span { color: var(--adr-ink); font-weight: 500; } body.page-addresses .page-header { text-align: center; margin-bottom: 6px; } body.page-addresses .page-header .page-title { font-family: 'Playfair Display', serif; font-weight: 600; font-size: 34px; color: var(--adr-ink); position: relative; display: inline-block; padding-bottom: 16px; } body.page-addresses .page-header .page-title::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 46px; height: 2px; background: var(--adr-rose); } body.page-addresses .my-account-page-content-wrapper { padding: 22px 0 70px; } body.page-addresses .my-account-page-content-wrapper > .row { align-items: flex-start; } body.page-addresses .my-account-side-links { flex: 0 0 260px !important; max-width: 260px !important; background: #fff; border-radius: 20px; box-shadow: 0 14px 34px rgba(28, 26, 26, .07); padding: 10px; display: flex; flex-direction: column; gap: 2px; align-self: flex-start; } body.page-addresses .my-account-side-links a { flex: 0 0 100% !important; max-width: 100% !important; width: 100%; padding: 0; margin: 0; } body.page-addresses .my-account-side-links .link-item { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 10px; font-family: 'Poppins', sans-serif; font-size: 13.5px; color: var(--adr-ink); transition: background .2s ease, color .2s ease, transform .2s ease; } body.page-addresses .my-account-side-links .link-item i, body.page-addresses .my-account-side-links .link-item .material-icons { font-size: 15px; width: 18px; text-align: center; color: var(--adr-gray); transition: color .2s ease; } body.page-addresses .my-account-side-links a:hover .link-item { background: var(--adr-blush); color: var(--adr-rose-deep); transform: translateX(2px); } body.page-addresses .my-account-side-links a:hover .link-item i, body.page-addresses .my-account-side-links a:hover .link-item .material-icons { color: var(--adr-rose-deep); } body.page-addresses .my-account-side-links a[href$="/adresses"] .link-item { background: var(--adr-gold-soft); color: #6b5424; font-weight: 600; } body.page-addresses .my-account-side-links a[href$="/adresses"] .link-item i { color: var(--adr-gold); } body.page-addresses .my-account-page-content { background: #fff; border-radius: var(--adr-radius); border: 1px solid var(--adr-line); box-shadow: 0 14px 40px rgba(26, 26, 26, .05); padding: 40px 44px 44px; } body.page-addresses .my-account-page-content h2 { font-family: 'Playfair Display', serif; font-weight: 600; font-size: 22px; color: var(--adr-ink); margin-bottom: 28px; padding-bottom: 16px; border-bottom: 1px solid var(--adr-line); } body.page-addresses #notifications .alert { border-radius: 12px; border: none; font-family: 'Poppins', sans-serif; font-size: 13px; padding: 14px 18px; margin-bottom: 22px; } body.page-addresses .my-account-page-content > .row { margin: 0 -10px; } body.page-addresses .my-account-page-content > .row > [class*="col-"] { padding: 0 10px; margin-bottom: 20px; } body.page-addresses article.address { display: flex; flex-direction: column; height: 100%; background: var(--adr-cream); border: 1px solid var(--adr-line); border-radius: 16px; padding: 22px 22px 18px; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; } body.page-addresses article.address:hover { border-color: var(--adr-rose); box-shadow: 0 12px 28px rgba(230, 0, 126, .10); transform: translateY(-2px); } body.page-addresses .address-body { flex: 1; } body.page-addresses .address-body h4 { display: inline-block; font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--adr-rose); background: var(--adr-blush); padding: 4px 10px; border-radius: 6px; margin-bottom: 12px; } body.page-addresses .address-body address { font-family: 'Poppins', sans-serif; font-style: normal; font-size: 13.5px; line-height: 1.7; color: var(--adr-ink); } body.page-addresses .address-footer { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--adr-line); } body.page-addresses .address-footer a { display: inline-flex; align-items: center; gap: 6px; font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; text-decoration: none; transition: all .2s ease; } body.page-addresses .address-footer a i { font-size: 12px; } body.page-addresses .address-footer a[data-link-action="edit-address"] { color: var(--adr-rose); border: 1px solid var(--adr-rose); border-radius: 30px; padding: 7px 14px; } body.page-addresses .address-footer a[data-link-action="edit-address"]:hover { background: var(--adr-rose); color: #fff; } body.page-addresses .address-footer a[data-link-action="delete-address"] { color: var(--adr-gray); padding: 7px 8px; } body.page-addresses .address-footer a[data-link-action="delete-address"]:hover { color: #c0392b; } body.page-addresses .addresses-footer { text-align: center; margin-top: 10px; padding-top: 24px; border-top: 1px solid var(--adr-line); } body.page-addresses .addresses-footer a[data-link-action="add-address"] { display: inline-flex; align-items: center; gap: 8px; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, var(--adr-rose) 0%, var(--adr-rose-deep) 100%); border-radius: 30px; padding: 13px 30px; text-decoration: none; box-shadow: 0 10px 24px rgba(230, 0, 126, .25); transition: all .3s ease; } body.page-addresses .addresses-footer a[data-link-action="add-address"]:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(230, 0, 126, .32); } body.page-addresses .addresses-footer a[data-link-action="add-address"] i { font-size: 12px; } body.page-addresses .my-account-page-content > p { text-align: center; font-family: 'Poppins', sans-serif; font-style: italic; font-size: 13px; color: var(--adr-gray); border: 1px dashed var(--adr-line); border-radius: 14px; padding: 26px; margin: 0 0 20px; } body.page-addresses a:focus-visible, body.page-addresses button:focus-visible { outline: 2px solid var(--adr-rose); outline-offset: 2px; } @media (max-width: 991px) { body.page-addresses .my-account-page-content-wrapper > .row { flex-direction: column; } body.page-addresses .my-account-side-links { flex: 1 1 100% !important; max-width: 100% !important; flex-direction: row; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; } body.page-addresses .my-account-side-links a { flex: 1 1 auto !important; width: auto; } } @media (max-width: 768px) { body.page-addresses .page-header .page-title { font-size: 26px; } body.page-addresses .my-account-page-content { padding: 26px 20px; } body.page-addresses article.address { padding: 18px 18px 16px; } } @media (max-width: 480px) { body.page-addresses .my-account-page-content { padding: 22px 16px; } body.page-addresses .addresses-footer a[data-link-action="add-address"] { width: 100%; justify-content: center; } } /* --------------------------------------------------------------------------- 11.5 — "Historique de vos commandes" (body.page-history) --------------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap'); body.page-history { --h-ink: #1a1a1a; --h-rose: #e6007e; --h-rose-deep: #b8005f; --h-blush: #fce4ec; --h-cream: #faf6f4; --h-line: #ece1dd; --h-gray: #767676; --h-muted: #b9aca7; --h-gold: #c9a961; --h-gold-soft: #f7f0df; --h-radius: 18px; background: var(--h-cream); } @keyframes hFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } body.page-history .my-account-page-content, body.page-history .my-account-side-links { animation: hFadeUp .5s ease both; } @media (prefers-reduced-motion: reduce) { body.page-history .my-account-page-content, body.page-history .my-account-side-links { animation: none; } } body.page-history nav.breadcrumb { background: transparent; border: none; padding: 22px 0 4px; } body.page-history .breadcrumb-custom { font-family: 'Poppins', sans-serif; font-size: 12.5px; letter-spacing: .03em; } body.page-history .breadcrumb-custom li { display: inline-flex; align-items: center; } body.page-history .breadcrumb-custom li:not(:last-child)::after { content: '/'; margin: 0 8px; color: #d8cfca; } body.page-history .breadcrumb-custom li a span { color: var(--h-gray); transition: color .25s ease; } body.page-history .breadcrumb-custom li a:hover span { color: var(--h-rose); } body.page-history .breadcrumb-custom li.breadcrumb-active span { color: var(--h-ink); font-weight: 500; } body.page-history .page-header { text-align: center; margin-bottom: 6px; } body.page-history .page-header .page-title { font-family: 'Playfair Display', serif; font-weight: 600; font-size: 34px; color: var(--h-ink); position: relative; display: inline-block; padding-bottom: 16px; } body.page-history .page-header .page-title::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 46px; height: 2px; background: var(--h-rose); } body.page-history .my-account-page-content-wrapper { padding: 22px 0 70px; } body.page-history .my-account-page-content-wrapper > .row { align-items: flex-start; } body.page-history .my-account-side-links { flex: 0 0 260px !important; max-width: 260px !important; background: #fff; border-radius: 20px; box-shadow: 0 14px 34px rgba(28, 26, 26, .07); padding: 10px; display: flex; flex-direction: column; gap: 2px; align-self: flex-start; } body.page-history .my-account-side-links a { flex: 0 0 100% !important; max-width: 100% !important; width: 100%; padding: 0; margin: 0; } body.page-history .my-account-side-links .link-item { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 10px; font-family: 'Poppins', sans-serif; font-size: 13.5px; color: var(--h-ink); transition: background .2s ease, color .2s ease, transform .2s ease; } body.page-history .my-account-side-links .link-item i, body.page-history .my-account-side-links .link-item .material-icons { font-size: 15px; width: 18px; text-align: center; color: var(--h-gray); transition: color .2s ease; } body.page-history .my-account-side-links a:hover .link-item { background: var(--h-blush); color: var(--h-rose-deep); transform: translateX(2px); } body.page-history .my-account-side-links a:hover .link-item i, body.page-history .my-account-side-links a:hover .link-item .material-icons { color: var(--h-rose-deep); } body.page-history .my-account-side-links a[href$="/historique-commandes"] .link-item { background: var(--h-gold-soft); color: #6b5424; font-weight: 600; } body.page-history .my-account-side-links a[href$="/historique-commandes"] .link-item i { color: var(--h-gold); } body.page-history .my-account-page-content { background: #fff; border-radius: var(--h-radius); border: 1px solid var(--h-line); box-shadow: 0 14px 40px rgba(26, 26, 26, .05); padding: 40px 44px 44px; } body.page-history .my-account-page-content h2 { font-family: 'Playfair Display', serif; font-weight: 600; font-size: 22px; color: var(--h-ink); margin-bottom: 10px; } body.page-history .my-account-page-content h6 { font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 13px; color: var(--h-gray); margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1px solid var(--h-line); } body.page-history #notifications .alert { border-radius: 12px; border: none; font-family: 'Poppins', sans-serif; font-size: 13px; padding: 14px 18px; margin-bottom: 22px; } body.page-history table.table { width: 100%; border-collapse: separate; border-spacing: 0 10px; font-family: 'Poppins', sans-serif; } body.page-history table.table thead th { background: transparent; border: none; padding: 0 14px 10px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--h-gray); text-align: left; } body.page-history table.table thead th.text-center { text-align: center; } body.page-history table.table tbody th[scope="row"], body.page-history table.table tbody td { background: var(--h-cream); border-top: 1px solid var(--h-line); border-bottom: 1px solid var(--h-line); border-left: none; border-right: none; padding: 16px 14px; font-size: 13px; color: var(--h-ink); vertical-align: middle; transition: border-color .2s ease; } body.page-history table.table tbody th[scope="row"] { border-left: 1px solid var(--h-line); border-radius: 12px 0 0 12px; font-weight: 700; font-size: 12px; letter-spacing: .02em; } body.page-history table.table tbody td:last-child { border-right: 1px solid var(--h-line); border-radius: 0 12px 12px 0; } body.page-history table.table tbody tr:hover th[scope="row"], body.page-history table.table tbody tr:hover td { border-color: var(--h-rose); } body.page-history table.table-striped tbody tr:nth-of-type(odd) th, body.page-history table.table-striped tbody tr:nth-of-type(odd) td { background: var(--h-cream); } body.page-history table.table td.text-xs-right { font-weight: 700; color: var(--h-ink); white-space: nowrap; } body.page-history table.table .label.label-pill { display: inline-block; border: none !important; border-radius: 30px !important; padding: 6px 14px !important; font-family: 'Poppins', sans-serif !important; font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: .03em !important; text-transform: uppercase !important; color: #fff !important; line-height: 1.3 !important; } body.page-history table.table td.order-actions { display: flex; flex-direction: column; align-items: center; gap: 6px; } body.page-history table.table td.order-actions hr { display: none; } body.page-history table.table td.order-actions a { display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: all .2s ease; } body.page-history table.table td.order-actions a[data-link-action="view-order-details"] { color: var(--h-rose); border: 1px solid var(--h-rose); border-radius: 30px; padding: 6px 14px; } body.page-history table.table td.order-actions a[data-link-action="view-order-details"]:hover { background: var(--h-rose); color: #fff; } body.page-history table.table td.order-actions a:not([data-link-action="view-order-details"]) { color: var(--h-gray); } body.page-history table.table td.order-actions a:not([data-link-action="view-order-details"]):hover { color: var(--h-rose-deep); } body.page-history .orders .order { background: var(--h-cream); border: 1px solid var(--h-line); border-radius: 16px; padding: 18px 20px; margin-bottom: 14px; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; } body.page-history .orders .order:hover { border-color: var(--h-rose); box-shadow: 0 12px 28px rgba(230, 0, 126, .10); transform: translateY(-1px); } body.page-history .orders .order h3 { font-family: 'Poppins', sans-serif; font-size: 13.5px; font-weight: 700; color: var(--h-ink); margin: 0 0 6px; } body.page-history .orders .order a h3 { text-decoration: none; } body.page-history .orders .order .date { font-family: 'Poppins', sans-serif; font-size: 12px; color: var(--h-gray); margin-bottom: 4px; } body.page-history .orders .order .total { font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 700; color: var(--h-rose); margin-bottom: 10px; } body.page-history .orders .order .status .label.label-pill { display: inline-block; border: none !important; border-radius: 30px !important; padding: 6px 14px !important; font-family: 'Poppins', sans-serif !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: .03em !important; text-transform: uppercase !important; color: #fff !important; } body.page-history .orders .order .invoice:not(:empty) { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--h-line); } body.page-history .my-account-page-content > p.alert, body.page-history .my-account-page-content > .alert-warning { text-align: center; font-family: 'Poppins', sans-serif; font-size: 13px; color: var(--h-gray); background: var(--h-cream) !important; border: 1px dashed var(--h-line) !important; border-radius: 14px !important; padding: 26px !important; } body.page-history a:focus-visible, body.page-history button:focus-visible { outline: 2px solid var(--h-rose); outline-offset: 2px; } @media (max-width: 991px) { body.page-history .my-account-page-content-wrapper > .row { flex-direction: column; } body.page-history .my-account-side-links { flex: 1 1 100% !important; max-width: 100% !important; flex-direction: row; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; } body.page-history .my-account-side-links a { flex: 1 1 auto !important; width: auto; } } @media (max-width: 768px) { body.page-history .page-header .page-title { font-size: 26px; } body.page-history .my-account-page-content { padding: 26px 20px; } } @media (max-width: 480px) { body.page-history .my-account-page-content { padding: 22px 16px; } body.page-history .orders .order { padding: 16px 16px; } } /* --------------------------------------------------------------------------- 11.6 — "Avoirs" (body.page-order-slip) --------------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap'); body.page-order-slip { --os-ink: #1a1a1a; --os-rose: #e6007e; --os-rose-deep: #b8005f; --os-blush: #fce4ec; --os-cream: #faf6f4; --os-line: #ece1dd; --os-gray: #767676; --os-muted: #b9aca7; --os-gold: #c9a961; --os-gold-soft: #f7f0df; --os-radius: 18px; background: var(--os-cream); } @keyframes osFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } body.page-order-slip .my-account-page-content, body.page-order-slip .my-account-side-links { animation: osFadeUp .5s ease both; } @media (prefers-reduced-motion: reduce) { body.page-order-slip .my-account-page-content, body.page-order-slip .my-account-side-links { animation: none; } } body.page-order-slip nav.breadcrumb { background: transparent; border: none; padding: 22px 0 4px; } body.page-order-slip .breadcrumb-custom { font-family: 'Poppins', sans-serif; font-size: 12.5px; letter-spacing: .03em; } body.page-order-slip .breadcrumb-custom li { display: inline-flex; align-items: center; } body.page-order-slip .breadcrumb-custom li:not(:last-child)::after { content: '/'; margin: 0 8px; color: #d8cfca; } body.page-order-slip .breadcrumb-custom li a span { color: var(--os-gray); transition: color .25s ease; } body.page-order-slip .breadcrumb-custom li a:hover span { color: var(--os-rose); } body.page-order-slip .breadcrumb-custom li.breadcrumb-active span { color: var(--os-ink); font-weight: 500; } body.page-order-slip .page-header { text-align: center; margin-bottom: 6px; } body.page-order-slip .page-header .page-title { font-family: 'Playfair Display', serif; font-weight: 600; font-size: 34px; color: var(--os-ink); position: relative; display: inline-block; padding-bottom: 16px; } body.page-order-slip .page-header .page-title::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 46px; height: 2px; background: var(--os-rose); } body.page-order-slip .my-account-page-content-wrapper { padding: 22px 0 70px; } body.page-order-slip .my-account-page-content-wrapper > .row { align-items: flex-start; } body.page-order-slip .my-account-side-links { flex: 0 0 260px !important; max-width: 260px !important; background: #fff; border-radius: 20px; box-shadow: 0 14px 34px rgba(28, 26, 26, .07); padding: 10px; display: flex; flex-direction: column; gap: 2px; align-self: flex-start; } body.page-order-slip .my-account-side-links a { flex: 0 0 100% !important; max-width: 100% !important; width: 100%; padding: 0; margin: 0; } body.page-order-slip .my-account-side-links .link-item { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 10px; font-family: 'Poppins', sans-serif; font-size: 13.5px; color: var(--os-ink); transition: background .2s ease, color .2s ease, transform .2s ease; } body.page-order-slip .my-account-side-links .link-item i, body.page-order-slip .my-account-side-links .link-item .material-icons { font-size: 15px; width: 18px; text-align: center; color: var(--os-gray); transition: color .2s ease; } body.page-order-slip .my-account-side-links a:hover .link-item { background: var(--os-blush); color: var(--os-rose-deep); transform: translateX(2px); } body.page-order-slip .my-account-side-links a:hover .link-item i, body.page-order-slip .my-account-side-links a:hover .link-item .material-icons { color: var(--os-rose-deep); } body.page-order-slip .my-account-side-links a[href$="/avoirs"] .link-item { background: var(--os-gold-soft); color: #6b5424; font-weight: 600; } body.page-order-slip .my-account-side-links a[href$="/avoirs"] .link-item i { color: var(--os-gold); } body.page-order-slip .my-account-page-content { background: #fff; border-radius: var(--os-radius); border: 1px solid var(--os-line); box-shadow: 0 14px 40px rgba(26, 26, 26, .05); padding: 40px 44px 44px; } body.page-order-slip .my-account-page-content h2 { font-family: 'Playfair Display', serif; font-weight: 600; font-size: 22px; color: var(--os-ink); margin-bottom: 10px; } body.page-order-slip .my-account-page-content h6 { font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 13px; color: var(--os-gray); margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1px solid var(--os-line); } body.page-order-slip #notifications .alert { border-radius: 12px; border: none; font-family: 'Poppins', sans-serif; font-size: 13px; padding: 14px 18px; margin-bottom: 22px; } body.page-order-slip .my-account-page-content > .alert-info { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; background: var(--os-cream) !important; border: 1px dashed var(--os-line) !important; border-radius: 16px !important; padding: 48px 24px !important; font-family: 'Poppins', sans-serif; font-size: 13.5px; color: var(--os-gray) !important; } body.page-order-slip .my-account-page-content > .alert-info::before { content: "\f0f6"; /* fa-file-text-o */ font-family: "FontAwesome"; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: var(--os-blush); color: var(--os-rose); font-size: 22px; } body.page-order-slip table.table { width: 100%; border-collapse: separate; border-spacing: 0 10px; font-family: 'Poppins', sans-serif; } body.page-order-slip table.table thead th { background: transparent; border: none; padding: 0 14px 10px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--os-gray); text-align: left; } body.page-order-slip table.table tbody th[scope="row"], body.page-order-slip table.table tbody td { background: var(--os-cream); border-top: 1px solid var(--os-line); border-bottom: 1px solid var(--os-line); border-left: none; border-right: none; padding: 16px 14px; font-size: 13px; color: var(--os-ink); vertical-align: middle; transition: border-color .2s ease; } body.page-order-slip table.table tbody th[scope="row"] { border-left: 1px solid var(--os-line); border-radius: 12px 0 0 12px; font-weight: 700; } body.page-order-slip table.table tbody td:last-child { border-right: 1px solid var(--os-line); border-radius: 0 12px 12px 0; } body.page-order-slip table.table tbody tr:hover th[scope="row"], body.page-order-slip table.table tbody tr:hover td { border-color: var(--os-rose); } body.page-order-slip table.table a { color: var(--os-rose); font-weight: 600; text-decoration: none; } body.page-order-slip table.table a:hover { color: var(--os-rose-deep); text-decoration: underline; } body.page-order-slip a:focus-visible, body.page-order-slip button:focus-visible { outline: 2px solid var(--os-rose); outline-offset: 2px; } @media (max-width: 991px) { body.page-order-slip .my-account-page-content-wrapper > .row { flex-direction: column; } body.page-order-slip .my-account-side-links { flex: 1 1 100% !important; max-width: 100% !important; flex-direction: row; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; } body.page-order-slip .my-account-side-links a { flex: 1 1 auto !important; width: auto; } } @media (max-width: 768px) { body.page-order-slip .page-header .page-title { font-size: 26px; } body.page-order-slip .my-account-page-content { padding: 26px 20px; } body.page-order-slip .my-account-page-content > .alert-info { padding: 36px 18px !important; } } @media (max-width: 480px) { body.page-order-slip .my-account-page-content { padding: 22px 16px; } } /* --------------------------------------------------------------------------- 11.7 — "Bons de réduction" (body.page-discount) --------------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap'); body.page-discount { --d-ink: #1a1a1a; --d-rose: #e6007e; --d-rose-deep: #b8005f; --d-blush: #fce4ec; --d-cream: #faf6f4; --d-line: #ece1dd; --d-gray: #767676; --d-muted: #b9aca7; --d-gold: #c9a961; --d-gold-soft: #f7f0df; --d-radius: 18px; background: var(--d-cream); } @keyframes dFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } body.page-discount .my-account-page-content, body.page-discount .my-account-side-links { animation: dFadeUp .5s ease both; } @media (prefers-reduced-motion: reduce) { body.page-discount .my-account-page-content, body.page-discount .my-account-side-links { animation: none; } } body.page-discount nav.breadcrumb { background: transparent; border: none; padding: 22px 0 4px; } body.page-discount .breadcrumb-custom { font-family: 'Poppins', sans-serif; font-size: 12.5px; letter-spacing: .03em; } body.page-discount .breadcrumb-custom li { display: inline-flex; align-items: center; } body.page-discount .breadcrumb-custom li:not(:last-child)::after { content: '/'; margin: 0 8px; color: #d8cfca; } body.page-discount .breadcrumb-custom li a span { color: var(--d-gray); transition: color .25s ease; } body.page-discount .breadcrumb-custom li a:hover span { color: var(--d-rose); } body.page-discount .breadcrumb-custom li.breadcrumb-active span { color: var(--d-ink); font-weight: 500; } body.page-discount .page-header { text-align: center; margin-bottom: 6px; } body.page-discount .page-header .page-title { font-family: 'Playfair Display', serif; font-weight: 600; font-size: 34px; color: var(--d-ink); position: relative; display: inline-block; padding-bottom: 16px; } body.page-discount .page-header .page-title::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 46px; height: 2px; background: var(--d-rose); } body.page-discount .my-account-page-content-wrapper { padding: 22px 0 70px; } body.page-discount .my-account-page-content-wrapper > .row { align-items: flex-start; } body.page-discount .my-account-side-links { flex: 0 0 260px !important; max-width: 260px !important; background: #fff; border-radius: 20px; box-shadow: 0 14px 34px rgba(28, 26, 26, .07); padding: 10px; display: flex; flex-direction: column; gap: 2px; align-self: flex-start; } body.page-discount .my-account-side-links a { flex: 0 0 100% !important; max-width: 100% !important; width: 100%; padding: 0; margin: 0; } body.page-discount .my-account-side-links .link-item { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 10px; font-family: 'Poppins', sans-serif; font-size: 13.5px; color: var(--d-ink); transition: background .2s ease, color .2s ease, transform .2s ease; } body.page-discount .my-account-side-links .link-item i, body.page-discount .my-account-side-links .link-item .material-icons { font-size: 15px; width: 18px; text-align: center; color: var(--d-gray); transition: color .2s ease; } body.page-discount .my-account-side-links a:hover .link-item { background: var(--d-blush); color: var(--d-rose-deep); transform: translateX(2px); } body.page-discount .my-account-side-links a:hover .link-item i, body.page-discount .my-account-side-links a:hover .link-item .material-icons { color: var(--d-rose-deep); } body.page-discount .my-account-side-links a[href$="/reduction"] .link-item { background: var(--d-gold-soft); color: #6b5424; font-weight: 600; } body.page-discount .my-account-side-links a[href$="/reduction"] .link-item i { color: var(--d-gold); } body.page-discount .my-account-page-content { background: #fff; border-radius: var(--d-radius); border: 1px solid var(--d-line); box-shadow: 0 14px 40px rgba(26, 26, 26, .05); padding: 40px 44px 44px; } body.page-discount .my-account-page-content h2 { font-family: 'Playfair Display', serif; font-weight: 600; font-size: 22px; color: var(--d-ink); margin-bottom: 26px; padding-bottom: 20px; border-bottom: 1px solid var(--d-line); } body.page-discount #notifications .alert { border-radius: 12px; border: none; font-family: 'Poppins', sans-serif; font-size: 13px; padding: 14px 18px; margin-bottom: 22px; } body.page-discount .my-account-page-content > .alert-info { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; background: var(--d-cream) !important; border: 1px dashed var(--d-line) !important; border-radius: 16px !important; padding: 48px 24px !important; font-family: 'Poppins', sans-serif; font-size: 13.5px; color: var(--d-gray) !important; } body.page-discount .my-account-page-content > .alert-info::before { content: "\f02b"; /* fa-tag */ font-family: "FontAwesome"; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: var(--d-blush); color: var(--d-rose); font-size: 22px; } body.page-discount table.table { width: 100%; border-collapse: separate; border-spacing: 0 10px; font-family: 'Poppins', sans-serif; } body.page-discount table.table thead th { background: transparent; border: none; padding: 0 14px 10px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--d-gray); text-align: left; } body.page-discount table.table tbody th[scope="row"], body.page-discount table.table tbody td { background: var(--d-cream); border-top: 1px solid var(--d-line); border-bottom: 1px solid var(--d-line); border-left: none; border-right: none; padding: 16px 14px; font-size: 13px; color: var(--d-ink); vertical-align: middle; transition: border-color .2s ease; } body.page-discount table.table tbody th[scope="row"] { border-left: 1px solid var(--d-line); border-radius: 12px 0 0 12px; font-weight: 700; } body.page-discount table.table tbody td:last-child { border-right: 1px solid var(--d-line); border-radius: 0 12px 12px 0; } body.page-discount table.table tbody tr:hover th[scope="row"], body.page-discount table.table tbody tr:hover td { border-color: var(--d-rose); } body.page-discount code, body.page-discount .discount-code { display: inline-block; font-family: 'Poppins', sans-serif; font-weight: 700; letter-spacing: .04em; background: var(--d-blush); color: var(--d-rose-deep); border-radius: 8px; padding: 4px 10px; } body.page-discount a:focus-visible, body.page-discount button:focus-visible { outline: 2px solid var(--d-rose); outline-offset: 2px; } @media (max-width: 991px) { body.page-discount .my-account-page-content-wrapper > .row { flex-direction: column; } body.page-discount .my-account-side-links { flex: 1 1 100% !important; max-width: 100% !important; flex-direction: row; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; } body.page-discount .my-account-side-links a { flex: 1 1 auto !important; width: auto; } } @media (max-width: 768px) { body.page-discount .page-header .page-title { font-size: 26px; } body.page-discount .my-account-page-content { padding: 26px 20px; } body.page-discount .my-account-page-content > .alert-info { padding: 36px 18px !important; } } @media (max-width: 480px) { body.page-discount .my-account-page-content { padding: 22px 16px; } } /* --------------------------------------------------------------------------- 11.8 — "Liste de souhaits" (body#module-iqitwishlist-view) --------------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap'); body#module-iqitwishlist-view { --w-ink: #1a1a1a; --w-rose: #e6007e; --w-rose-deep: #b8005f; --w-blush: #fce4ec; --w-cream: #faf6f4; --w-line: #ece1dd; --w-gray: #767676; --w-muted: #b9aca7; --w-gold: #c9a961; --w-gold-soft: #f7f0df; --w-radius: 18px; background: var(--w-cream); } @keyframes wFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } body#module-iqitwishlist-view .my-account-page-content, body#module-iqitwishlist-view .my-account-side-links { animation: wFadeUp .5s ease both; } @media (prefers-reduced-motion: reduce) { body#module-iqitwishlist-view .my-account-page-content, body#module-iqitwishlist-view .my-account-side-links { animation: none; } } body#module-iqitwishlist-view nav.breadcrumb { background: transparent; border: none; padding: 22px 0 4px; } body#module-iqitwishlist-view .breadcrumb-custom { font-family: 'Poppins', sans-serif; font-size: 12.5px; letter-spacing: .03em; } body#module-iqitwishlist-view .breadcrumb-custom li { display: inline-flex; align-items: center; } body#module-iqitwishlist-view .breadcrumb-custom li:not(:last-child)::after { content: '/'; margin: 0 8px; color: #d8cfca; } body#module-iqitwishlist-view .breadcrumb-custom li a span { color: var(--w-gray); transition: color .25s ease; } body#module-iqitwishlist-view .breadcrumb-custom li a:hover span { color: var(--w-rose); } body#module-iqitwishlist-view .breadcrumb-custom li.breadcrumb-active span { color: var(--w-ink); font-weight: 500; } body#module-iqitwishlist-view .page-header { text-align: center; margin-bottom: 6px; } body#module-iqitwishlist-view .page-header .page-title { font-family: 'Playfair Display', serif; font-weight: 600; font-size: 34px; color: var(--w-ink); position: relative; display: inline-block; padding-bottom: 16px; } body#module-iqitwishlist-view .page-header .page-title::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 46px; height: 2px; background: var(--w-rose); } body#module-iqitwishlist-view .my-account-page-content-wrapper { padding: 22px 0 70px; } body#module-iqitwishlist-view .my-account-page-content-wrapper > .row { align-items: flex-start; } body#module-iqitwishlist-view .my-account-side-links { flex: 0 0 260px !important; max-width: 260px !important; background: #fff; border-radius: 20px; box-shadow: 0 14px 34px rgba(28, 26, 26, .07); padding: 10px; display: flex; flex-direction: column; gap: 2px; align-self: flex-start; } body#module-iqitwishlist-view .my-account-side-links a { flex: 0 0 100% !important; max-width: 100% !important; width: 100%; padding: 0; margin: 0; } body#module-iqitwishlist-view .my-account-side-links .link-item { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 10px; font-family: 'Poppins', sans-serif; font-size: 13.5px; color: var(--w-ink); transition: background .2s ease, color .2s ease, transform .2s ease; } body#module-iqitwishlist-view .my-account-side-links .link-item i, body#module-iqitwishlist-view .my-account-side-links .link-item .material-icons { font-size: 15px; width: 18px; text-align: center; color: var(--w-gray); transition: color .2s ease; } body#module-iqitwishlist-view .my-account-side-links a:hover .link-item { background: var(--w-blush); color: var(--w-rose-deep); transform: translateX(2px); } body#module-iqitwishlist-view .my-account-side-links a:hover .link-item i, body#module-iqitwishlist-view .my-account-side-links a:hover .link-item .material-icons { color: var(--w-rose-deep); } body#module-iqitwishlist-view .my-account-side-links a[href*="iqitwishlist"] .link-item { background: var(--w-gold-soft); color: #6b5424; font-weight: 600; } body#module-iqitwishlist-view .my-account-side-links a[href*="iqitwishlist"] .link-item i { color: var(--w-gold); } body#module-iqitwishlist-view .my-account-page-content { background: #fff; border-radius: var(--w-radius); border: 1px solid var(--w-line); box-shadow: 0 14px 40px rgba(26, 26, 26, .05); padding: 40px 44px 44px; } body#module-iqitwishlist-view .my-account-page-content h2 { font-family: 'Playfair Display', serif; font-weight: 600; font-size: 22px; color: var(--w-ink); margin-bottom: 26px; padding-bottom: 20px; border-bottom: 1px solid var(--w-line); } body#module-iqitwishlist-view #notifications .alert { border-radius: 12px; border: none; font-family: 'Poppins', sans-serif; font-size: 13px; padding: 14px 18px; margin-bottom: 22px; } body#module-iqitwishlist-view #iqitwishlist-user-products { display: flex; flex-direction: column; gap: 14px; } body#module-iqitwishlist-view .iqitwishlist-product { background: var(--w-cream); border: 1px solid var(--w-line); border-radius: 16px; padding: 16px 18px; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; } body#module-iqitwishlist-view .iqitwishlist-product:hover { border-color: var(--w-rose); box-shadow: 0 12px 28px rgba(230, 0, 126, .10); transform: translateY(-1px); } body#module-iqitwishlist-view .iqitwishlist-product + hr, body#module-iqitwishlist-view #iqitwishlist-user-products > hr { display: none; } body#module-iqitwishlist-view .iqitwishlist-product img { border-radius: 12px; border: 1px solid var(--w-line); background: #fff; } body#module-iqitwishlist-view .iqitwishlist-product ._name a { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 13.5px; color: var(--w-ink); text-decoration: none; line-height: 1.4; transition: color .2s ease; } body#module-iqitwishlist-view .iqitwishlist-product ._name a:hover { color: var(--w-rose); } body#module-iqitwishlist-view .iqitwishlist-product ._name .text-muted { font-family: 'Poppins', sans-serif; font-size: 11.5px; color: var(--w-gray) !important; margin-top: 4px; } body#module-iqitwishlist-view .iqitwishlist-product .product-price { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 15px; color: var(--w-rose); white-space: nowrap; } body#module-iqitwishlist-view .iqitwishlist-product .tnd-unit { font-size: 10.5px; font-weight: 600; color: var(--w-rose-deep); vertical-align: super; margin-left: 2px; } body#module-iqitwishlist-view .input-group-add-cart { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } body#module-iqitwishlist-view .bootstrap-touchspin { display: flex; align-items: center; gap: 6px; } body#module-iqitwishlist-view .input-qty { width: 46px; height: 34px; text-align: center; border: 1px solid var(--w-line); border-radius: 8px; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 13px; color: var(--w-ink); background: #fff; } body#module-iqitwishlist-view .input-qty:focus { outline: none; border-color: var(--w-rose); box-shadow: 0 0 0 3px rgba(230, 0, 126, .12); } body#module-iqitwishlist-view .btn-touchspin { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--w-line); border-radius: 8px; background: #fff; color: var(--w-gray); transition: all .2s ease; } body#module-iqitwishlist-view .btn-touchspin:hover { border-color: var(--w-rose); color: var(--w-rose); } body#module-iqitwishlist-view .input-group-btn-vertical { display: flex !important; flex-direction: row !important; gap: 4px; } body#module-iqitwishlist-view .btn.btn-product-list.add-to-cart { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 12.5px; letter-spacing: .02em; text-transform: none; color: #fff; background: linear-gradient(135deg, var(--w-rose) 0%, var(--w-rose-deep) 100%); border: none; border-radius: 30px; padding: 10px 20px; box-shadow: 0 8px 18px rgba(230, 0, 126, .22); transition: all .25s ease; } body#module-iqitwishlist-view .btn.btn-product-list.add-to-cart:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(230, 0, 126, .3); } body#module-iqitwishlist-view .js-iqitwishlist-remove { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; color: var(--w-gray); border: 1px solid var(--w-line); transition: all .2s ease; } body#module-iqitwishlist-view .js-iqitwishlist-remove:hover { background: var(--w-blush); color: var(--w-rose); border-color: var(--w-rose); } body#module-iqitwishlist-view .iqitwishlist-share { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--w-line); } body#module-iqitwishlist-view .iqitwishlist-share h3 { font-family: 'Playfair Display', serif; font-weight: 600; font-size: 17px; color: var(--w-ink); margin-bottom: 14px; } body#module-iqitwishlist-view .iqitwishlist-share .input-group { display: flex; border-radius: 10px; overflow: hidden; border: 1px solid var(--w-line); } body#module-iqitwishlist-view .iqitwishlist-share .form-control { flex: 1; border: none; padding: 12px 16px; font-family: 'Poppins', sans-serif; font-size: 12.5px; color: var(--w-gray); background: var(--w-cream); } body#module-iqitwishlist-view .iqitwishlist-share .form-control:focus { outline: none; } body#module-iqitwishlist-view #iqitwishlist-clipboard-btn { border: none; border-left: 1px solid var(--w-line); background: #fff; color: var(--w-rose); font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 12px; padding: 0 18px; white-space: nowrap; transition: all .2s ease; } body#module-iqitwishlist-view #iqitwishlist-clipboard-btn:hover { background: var(--w-rose); color: #fff; } body#module-iqitwishlist-view #iqitwishlist-warning { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; background: var(--w-cream) !important; border: 1px dashed var(--w-line) !important; border-radius: 16px !important; padding: 48px 24px !important; font-family: 'Poppins', sans-serif; font-size: 13.5px; color: var(--w-gray) !important; } body#module-iqitwishlist-view #iqitwishlist-warning::before { content: "\f004"; /* fa-heart */ font-family: "FontAwesome"; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: var(--w-blush); color: var(--w-rose); font-size: 22px; } body#module-iqitwishlist-view a:focus-visible, body#module-iqitwishlist-view button:focus-visible, body#module-iqitwishlist-view input:focus-visible { outline: 2px solid var(--w-rose); outline-offset: 2px; } @media (max-width: 991px) { body#module-iqitwishlist-view .my-account-page-content-wrapper > .row { flex-direction: column; } body#module-iqitwishlist-view .my-account-side-links { flex: 1 1 100% !important; max-width: 100% !important; flex-direction: row; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; } body#module-iqitwishlist-view .my-account-side-links a { flex: 1 1 auto !important; width: auto; } } @media (max-width: 768px) { body#module-iqitwishlist-view .page-header .page-title { font-size: 26px; } body#module-iqitwishlist-view .my-account-page-content { padding: 26px 20px; } body#module-iqitwishlist-view .iqitwishlist-product { padding: 14px; } body#module-iqitwishlist-view .iqitwishlist-product .row > [class*="col"] { margin-bottom: 8px; } body#module-iqitwishlist-view .btn.btn-product-list.add-to-cart { width: 100%; } } @media (max-width: 480px) { body#module-iqitwishlist-view .my-account-page-content { padding: 22px 16px; } body#module-iqitwishlist-view .iqitwishlist-share .input-group { flex-direction: column; border-radius: 12px; } body#module-iqitwishlist-view #iqitwishlist-clipboard-btn { border-left: none; border-top: 1px solid var(--w-line); padding: 12px; width: 100%; } } /* --------------------------------------------------------------------------- 11.9 — "RGPD – Données personnelles" (body#module-psgdpr-gdpr) --------------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap'); body#module-psgdpr-gdpr { --g-ink: #1a1a1a; --g-rose: #e6007e; --g-rose-deep: #b8005f; --g-blush: #fce4ec; --g-cream: #faf6f4; --g-line: #ece1dd; --g-gray: #767676; --g-muted: #b9aca7; --g-gold: #c9a961; --g-gold-soft: #f7f0df; --g-radius: 18px; background: var(--g-cream); } @keyframes gFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } body#module-psgdpr-gdpr .my-account-page-content, body#module-psgdpr-gdpr .my-account-side-links { animation: gFadeUp .5s ease both; } @media (prefers-reduced-motion: reduce) { body#module-psgdpr-gdpr .my-account-page-content, body#module-psgdpr-gdpr .my-account-side-links { animation: none; } } body#module-psgdpr-gdpr nav.breadcrumb { background: transparent; border: none; padding: 22px 0 4px; } body#module-psgdpr-gdpr .breadcrumb-custom { font-family: 'Poppins', sans-serif; font-size: 12.5px; letter-spacing: .03em; } body#module-psgdpr-gdpr .breadcrumb-custom li { display: inline-flex; align-items: center; } body#module-psgdpr-gdpr .breadcrumb-custom li:not(:last-child)::after { content: '/'; margin: 0 8px; color: #d8cfca; } body#module-psgdpr-gdpr .breadcrumb-custom li a span { color: var(--g-gray); transition: color .25s ease; } body#module-psgdpr-gdpr .breadcrumb-custom li a:hover span { color: var(--g-rose); } body#module-psgdpr-gdpr .breadcrumb-custom li.breadcrumb-active span { color: var(--g-ink); font-weight: 500; } body#module-psgdpr-gdpr .page-header { text-align: center; margin-bottom: 6px; } body#module-psgdpr-gdpr .page-header .page-title { font-family: 'Playfair Display', serif; font-weight: 600; font-size: 34px; color: var(--g-ink); position: relative; display: inline-block; padding-bottom: 16px; } body#module-psgdpr-gdpr .page-header .page-title::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 46px; height: 2px; background: var(--g-rose); } body#module-psgdpr-gdpr .my-account-page-content-wrapper { padding: 22px 0 70px; } body#module-psgdpr-gdpr .my-account-page-content-wrapper > .row { align-items: flex-start; } body#module-psgdpr-gdpr .my-account-side-links { flex: 0 0 260px !important; max-width: 260px !important; background: #fff; border-radius: 20px; box-shadow: 0 14px 34px rgba(28, 26, 26, .07); padding: 10px; display: flex; flex-direction: column; gap: 2px; align-self: flex-start; } body#module-psgdpr-gdpr .my-account-side-links a { flex: 0 0 100% !important; max-width: 100% !important; width: 100%; padding: 0; margin: 0; } body#module-psgdpr-gdpr .my-account-side-links .link-item { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 10px; font-family: 'Poppins', sans-serif; font-size: 13.5px; color: var(--g-ink); transition: background .2s ease, color .2s ease, transform .2s ease; } body#module-psgdpr-gdpr .my-account-side-links .link-item i, body#module-psgdpr-gdpr .my-account-side-links .link-item .material-icons { font-size: 15px; width: 18px; text-align: center; color: var(--g-gray); transition: color .2s ease; } body#module-psgdpr-gdpr .my-account-side-links a:hover .link-item { background: var(--g-blush); color: var(--g-rose-deep); transform: translateX(2px); } body#module-psgdpr-gdpr .my-account-side-links a:hover .link-item i, body#module-psgdpr-gdpr .my-account-side-links a:hover .link-item .material-icons { color: var(--g-rose-deep); } body#module-psgdpr-gdpr .my-account-side-links a[href*="psgdpr"] .link-item { background: var(--g-gold-soft); color: #6b5424; font-weight: 600; } body#module-psgdpr-gdpr .my-account-side-links a[href*="psgdpr"] .link-item i { color: var(--g-gold); } body#module-psgdpr-gdpr .my-account-page-content { background: #fff; border-radius: var(--g-radius); border: 1px solid var(--g-line); box-shadow: 0 14px 40px rgba(26, 26, 26, .05); padding: 40px 44px 44px; } body#module-psgdpr-gdpr .my-account-page-content > h2:first-of-type { font-family: 'Playfair Display', serif; font-weight: 600; font-size: 22px; color: var(--g-ink); margin-bottom: 26px; padding-bottom: 20px; border-bottom: 1px solid var(--g-line); } body#module-psgdpr-gdpr #notifications .alert { border-radius: 12px; border: none; font-family: 'Poppins', sans-serif; font-size: 13px; padding: 14px 18px; margin-bottom: 22px; } body#module-psgdpr-gdpr .my-account-page-content .container { padding: 0; margin: 0; max-width: none; width: 100%; } body#module-psgdpr-gdpr .page_content { display: flex; flex-direction: column; gap: 18px; } body#module-psgdpr-gdpr .psgdprinfo17 { background: var(--g-cream); border: 1px solid var(--g-line); border-radius: 16px; padding: 26px 28px; } body#module-psgdpr-gdpr .psgdprinfo17 h2 { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: .02em; color: var(--g-ink); margin-bottom: 6px; padding-bottom: 12px; position: relative; } body#module-psgdpr-gdpr .psgdprinfo17 h2::after { content: ''; position: absolute; left: 0; bottom: 0; width: 32px; height: 2px; background: var(--g-rose); } body#module-psgdpr-gdpr .psgdprinfo17 p { font-family: 'Poppins', sans-serif; font-size: 13.5px; line-height: 1.7; color: var(--g-gray); margin: 14px 0 0; } body#module-psgdpr-gdpr .psgdprinfo17 p a { color: var(--g-rose); font-weight: 600; text-decoration: none; } body#module-psgdpr-gdpr .psgdprinfo17 p a:hover { color: var(--g-rose-deep); text-decoration: underline; } body#module-psgdpr-gdpr .psgdprinfo17 .clearfix { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; } body#module-psgdpr-gdpr .psgdprgetdatabtn17 { display: inline-flex; align-items: center; justify-content: center; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 12.5px; letter-spacing: .02em; text-decoration: none; padding: 12px 24px; border-radius: 30px; transition: all .25s ease; } body#module-psgdpr-gdpr #exportDataToCsv { color: #fff; background: linear-gradient(135deg, var(--g-rose) 0%, var(--g-rose-deep) 100%); border: none; box-shadow: 0 10px 22px rgba(230, 0, 126, .25); } body#module-psgdpr-gdpr #exportDataToCsv:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(230, 0, 126, .32); } body#module-psgdpr-gdpr #exportDataToPdf { color: var(--g-rose); background: #fff; border: 1px solid var(--g-rose); } body#module-psgdpr-gdpr #exportDataToPdf:hover { background: var(--g-rose); color: #fff; } body#module-psgdpr-gdpr a:focus-visible, body#module-psgdpr-gdpr button:focus-visible { outline: 2px solid var(--g-rose); outline-offset: 2px; } @media (max-width: 991px) { body#module-psgdpr-gdpr .my-account-page-content-wrapper > .row { flex-direction: column; } body#module-psgdpr-gdpr .my-account-side-links { flex: 1 1 100% !important; max-width: 100% !important; flex-direction: row; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; } body#module-psgdpr-gdpr .my-account-side-links a { flex: 1 1 auto !important; width: auto; } } @media (max-width: 768px) { body#module-psgdpr-gdpr .page-header .page-title { font-size: 26px; } body#module-psgdpr-gdpr .my-account-page-content { padding: 26px 20px; } body#module-psgdpr-gdpr .psgdprinfo17 { padding: 20px 18px; } body#module-psgdpr-gdpr .psgdprgetdatabtn17 { width: 100%; } } @media (max-width: 480px) { body#module-psgdpr-gdpr .my-account-page-content { padding: 22px 16px; } } /* --------------------------------------------------------------------------- 11.10 — "Mes alertes" (body#module-ps_emailalerts-account) --------------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap'); body#module-ps_emailalerts-account { --a-ink: #1a1a1a; --a-rose: #e6007e; --a-rose-deep: #b8005f; --a-blush: #fce4ec; --a-cream: #faf6f4; --a-line: #ece1dd; --a-gray: #767676; --a-muted: #b9aca7; --a-gold: #c9a961; --a-gold-soft: #f7f0df; --a-radius: 18px; background: var(--a-cream); } @keyframes aFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } body#module-ps_emailalerts-account .my-account-page-content, body#module-ps_emailalerts-account .my-account-side-links { animation: aFadeUp .5s ease both; } @media (prefers-reduced-motion: reduce) { body#module-ps_emailalerts-account .my-account-page-content, body#module-ps_emailalerts-account .my-account-side-links { animation: none; } } body#module-ps_emailalerts-account nav.breadcrumb { background: transparent; border: none; padding: 22px 0 4px; } body#module-ps_emailalerts-account .breadcrumb-custom { font-family: 'Poppins', sans-serif; font-size: 12.5px; letter-spacing: .03em; } body#module-ps_emailalerts-account .breadcrumb-custom li { display: inline-flex; align-items: center; } body#module-ps_emailalerts-account .breadcrumb-custom li:not(:last-child)::after { content: '/'; margin: 0 8px; color: #d8cfca; } body#module-ps_emailalerts-account .breadcrumb-custom li a span { color: var(--a-gray); transition: color .25s ease; } body#module-ps_emailalerts-account .breadcrumb-custom li a:hover span { color: var(--a-rose); } body#module-ps_emailalerts-account .breadcrumb-custom li.breadcrumb-active span { color: var(--a-ink); font-weight: 500; } body#module-ps_emailalerts-account .page-header { text-align: center; margin-bottom: 6px; } body#module-ps_emailalerts-account .page-header .page-title { font-family: 'Playfair Display', serif; font-weight: 600; font-size: 34px; color: var(--a-ink); position: relative; display: inline-block; padding-bottom: 16px; } body#module-ps_emailalerts-account .page-header .page-title::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 46px; height: 2px; background: var(--a-rose); } body#module-ps_emailalerts-account .my-account-page-content-wrapper { padding: 22px 0 70px; } body#module-ps_emailalerts-account .my-account-page-content-wrapper > .row { align-items: flex-start; } body#module-ps_emailalerts-account .my-account-side-links { flex: 0 0 260px !important; max-width: 260px !important; background: #fff; border-radius: 20px; box-shadow: 0 14px 34px rgba(28, 26, 26, .07); padding: 10px; display: flex; flex-direction: column; gap: 2px; align-self: flex-start; } body#module-ps_emailalerts-account .my-account-side-links a { flex: 0 0 100% !important; max-width: 100% !important; width: 100%; padding: 0; margin: 0; } body#module-ps_emailalerts-account .my-account-side-links .link-item { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 10px; font-family: 'Poppins', sans-serif; font-size: 13.5px; color: var(--a-ink); transition: background .2s ease, color .2s ease, transform .2s ease; } body#module-ps_emailalerts-account .my-account-side-links .link-item i, body#module-ps_emailalerts-account .my-account-side-links .link-item .material-icons { font-size: 15px; width: 18px; text-align: center; color: var(--a-gray); transition: color .2s ease; } body#module-ps_emailalerts-account .my-account-side-links a:hover .link-item { background: var(--a-blush); color: var(--a-rose-deep); transform: translateX(2px); } body#module-ps_emailalerts-account .my-account-side-links a:hover .link-item i, body#module-ps_emailalerts-account .my-account-side-links a:hover .link-item .material-icons { color: var(--a-rose-deep); } body#module-ps_emailalerts-account .my-account-side-links a[href*="ps_emailalerts"] .link-item { background: var(--a-gold-soft); color: #6b5424; font-weight: 600; } body#module-ps_emailalerts-account .my-account-side-links a[href*="ps_emailalerts"] .link-item i { color: var(--a-gold); } body#module-ps_emailalerts-account .my-account-page-content { background: #fff; border-radius: var(--a-radius); border: 1px solid var(--a-line); box-shadow: 0 14px 40px rgba(26, 26, 26, .05); padding: 40px 44px 44px; } body#module-ps_emailalerts-account .my-account-page-content h2 { font-family: 'Playfair Display', serif; font-weight: 600; font-size: 22px; color: var(--a-ink); margin-bottom: 26px; padding-bottom: 20px; border-bottom: 1px solid var(--a-line); } body#module-ps_emailalerts-account #notifications .alert { border-radius: 12px; border: none; font-family: 'Poppins', sans-serif; font-size: 13px; padding: 14px 18px; margin-bottom: 22px; } body#module-ps_emailalerts-account .my-account-page-content > .alert-warning { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; background: var(--a-cream) !important; border: 1px dashed var(--a-line) !important; border-radius: 16px !important; padding: 48px 24px !important; font-family: 'Poppins', sans-serif; font-size: 13.5px; color: var(--a-gray) !important; } body#module-ps_emailalerts-account .my-account-page-content > .alert-warning::before { content: "\f2b6"; /* fa-envelope-open-o */ font-family: "FontAwesome"; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: var(--a-blush); color: var(--a-rose); font-size: 22px; } body#module-ps_emailalerts-account a:focus-visible, body#module-ps_emailalerts-account button:focus-visible { outline: 2px solid var(--a-rose); outline-offset: 2px; } @media (max-width: 991px) { body#module-ps_emailalerts-account .my-account-page-content-wrapper > .row { flex-direction: column; } body#module-ps_emailalerts-account .my-account-side-links { flex: 1 1 100% !important; max-width: 100% !important; flex-direction: row; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; } body#module-ps_emailalerts-account .my-account-side-links a { flex: 1 1 auto !important; width: auto; } } @media (max-width: 768px) { body#module-ps_emailalerts-account .page-header .page-title { font-size: 26px; } body#module-ps_emailalerts-account .my-account-page-content { padding: 26px 20px; } body#module-ps_emailalerts-account .my-account-page-content > .alert-warning { padding: 36px 18px !important; } } @media (max-width: 480px) { body#module-ps_emailalerts-account .my-account-page-content { padding: 22px 16px; } } /* ============================================================================= 12. PAGE MARQUES (listing + méga-menu marques A-Z) ============================================================================= */ /* ========================================================================= PAGE MARQUES — grille de logos, design moderne en cartes ========================================================================= */ .ms-grid { max-width: 1280px; margin: 0 auto; padding: 20px 15px 60px; } .ms-grid .row { display: grid !important; grid-template-columns: repeat(6, 1fr) !important; gap: 20px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } .ms-grid .brand { all: unset; box-sizing: border-box !important; position: relative !important; display: flex !important; flex-direction: column !important; align-items: center !important; background: #ffffff !important; border: 1px solid #ededed !important; border-radius: 12px !important; padding: 22px 16px !important; text-align: center !important; cursor: pointer !important; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .3s ease !important; } .ms-grid .brand:hover { transform: translateY(-4px) !important; border-color: #f3c1dc !important; background: linear-gradient(180deg, #ffffff 0%, #fdf1f7 100%) !important; box-shadow: 0 12px 28px rgba(230, 0, 126, .12) !important; } .ms-grid .brand-img { width: 100% !important; height: 70px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 14px !important; } .ms-grid .brand-img a { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; } .ms-grid .brand-img img { max-width: 100% !important; max-height: 100% !important; width: auto !important; height: auto !important; object-fit: contain !important; transition: transform .3s ease !important; } .ms-grid .brand:hover .brand-img img { transform: scale(1.08) !important; } .ms-grid .brand-infos { width: 100% !important; } .ms-grid .brand-infos a { position: relative !important; display: inline-block !important; max-width: 100% !important; font-family: "Avenir", "Avenir Next", sans-serif !important; font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .4px !important; color: #1a1a1a !important; text-decoration: none !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; transition: color .2s ease !important; } .ms-grid .brand:hover .brand-infos a { color: #e6007e !important; } .ms-grid .brand-infos a::after { content: "" !important; position: absolute !important; left: 50% !important; bottom: -4px !important; width: 0 !important; height: 2px !important; background: #e6007e !important; transition: width .3s ease, left .3s ease !important; } .ms-grid .brand:hover .brand-infos a::after { width: 60% !important; left: 20% !important; } @media (max-width: 1200px) { .ms-grid .row { grid-template-columns: repeat(5, 1fr) !important; gap: 16px !important; } } @media (max-width: 1024px) { .ms-grid .row { grid-template-columns: repeat(4, 1fr) !important; gap: 14px !important; } .ms-grid .brand { padding: 18px 12px !important; } .ms-grid .brand-img { height: 60px !important; } } @media (max-width: 768px) { .ms-grid { padding: 15px 12px 40px; } .ms-grid .row { grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; } .ms-grid .brand { padding: 14px 8px !important; border-radius: 10px !important; } .ms-grid .brand-img { height: 50px !important; margin-bottom: 10px !important; } .ms-grid .brand-infos a { font-size: 10.5px !important; letter-spacing: .2px !important; } } @media (max-width: 480px) { .ms-grid .row { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; } .ms-grid .brand { padding: 12px 6px !important; } .ms-grid .brand-img { height: 44px !important; margin-bottom: 8px !important; } .ms-grid .brand-infos a { font-size: 9.5px !important; } } /* ========================================================================= BEAUTYSTORE — Style de la barre A-Z pour l'onglet "Marques" Compagnon de beautystore-marques-az.js — scope : .bz-az-brands ========================================================================= */ .bz-az-brands { font-family: 'Poppins', 'Avenir', sans-serif !important; padding: 24px 30px 30px !important; } .bz-az-bar { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 18px !important; padding-bottom: 16px !important; margin-bottom: 24px !important; border-bottom: 1px solid #ececec !important; list-style: none !important; } .bz-az-letter { appearance: none !important; background: none !important; border: none !important; padding: 4px 2px !important; margin: 0 !important; font-family: inherit !important; font-size: 14px !important; font-weight: 600 !important; cursor: pointer !important; position: relative !important; } .bz-az-letter.is-disabled { color: #c9c9c9 !important; cursor: default !important; pointer-events: none !important; } .bz-az-letter:not(.is-disabled)::after { content: '' !important; position: absolute !important; left: 0 !important; right: 0 !important; bottom: -17px !important; height: 2px !important; background: #e6007e !important; transform: scaleX(0) !important; transition: transform .15s ease !important; } .bz-az-letter:not(.is-disabled):hover, .bz-az-letter:not(.is-disabled):focus-visible { color: #e6007e !important; } .bz-az-letter:not(.is-disabled):hover::after, .bz-az-letter:not(.is-disabled):focus-visible::after { transform: scaleX(1) !important; } .bz-az-see-all { margin-left: auto !important; font-size: 12.5px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: .03em !important; text-decoration: none !important; white-space: nowrap !important; } .bz-az-see-all:hover { text-decoration: underline !important; } .bz-az-results { column-count: 4 !important; column-gap: 34px !important; } .bz-az-results a[data-letter] { display: block !important; break-inside: avoid !important; font-size: 13.5px !important; font-weight: 500 !important; text-decoration: none !important; padding: 6px 0 !important; } .bz-az-results a[data-letter]:hover { text-decoration: underline !important; } @media (max-width: 1024px) { .bz-az-results { column-count: 3 !important; } } @media (max-width: 768px) { .bz-az-brands { padding: 18px 16px 22px !important; } .bz-az-bar { gap: 12px !important; } .bz-az-results { column-count: 2 !important; column-gap: 20px !important; } } /* ============================================================================= 13. BLOG (listing, article, carrousel) ============================================================================= */ /* ============================================================ BLOG CAROUSEL (ph_simpleblog) — suppression de TOUS les séparateurs ============================================================ */ .simpleblog__listing__post, .simpleblog__listing__post *, .simpleblog__listing__post__wrapper, .simpleblog__listing__post__wrapper.cardblog, .simpleblog__listing__post__wrapper.post-item, .simpleblog__listing__post__wrapper__content, .simpleblog__listing__post__wrapper__content.card-block, .simpleblog__listing__post__wrapper__footer, .simpleblog-posts-column, .elementor-blog-posts-carousel, .elementor-blog-carousel, .elementor-blog-carousel .swiper-slide, .elementor-blog-carousel .swiper-wrapper { border: none !important; border-top: none !important; border-bottom: none !important; border-left: none !important; border-right: none !important; box-shadow: none !important; outline: none !important; } .simpleblog__listing__post hr, .simpleblog__listing__post__wrapper hr, .elementor-blog-posts-carousel hr { display: none !important; } /* ========================================================================= BLOG — PAGE LISTING (2 colonnes), design moderne en cartes ========================================================================= */ .simpleblog__listing { max-width: 1280px; margin: 0 auto; padding: 20px 15px 60px; } .simpleblog__listing .row { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 28px !important; margin: 0 !important; padding: 0 !important; } .simpleblog__listing__post { padding: 0 !important; max-width: 100% !important; flex: none !important; width: 100% !important; } .simpleblog__listing__post__wrapper { display: flex !important; flex-direction: column !important; height: 100% !important; background: #ffffff !important; border: 1px solid #ededed !important; border-radius: 1px !important; overflow: hidden !important; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important; } .simpleblog__listing__post__wrapper:hover { transform: translateY(-5px) !important; box-shadow: 0 14px 32px rgba(0, 0, 0, .08) !important; border-color: #f3c1dc !important; } .simpleblog__listing__post__wrapper > a:first-child { display: block !important; overflow: hidden !important; aspect-ratio: 2 / 1 !important; } .simpleblog__listing__post__wrapper .photo { width: 100% !important; height: 100% !important; object-fit: cover !important; margin: 0 !important; display: block !important; transition: transform .5s ease !important; } .simpleblog__listing__post__wrapper:hover .photo { transform: scale(1.06) !important; } .simpleblog__listing__post__wrapper__content { display: flex !important; flex-direction: column !important; flex: 1 !important; padding: 24px 26px 20px !important; } .simpleblog__listing__post__wrapper__content__headline { margin: 0 0 12px !important; font-family: "Avenir", serif !important; font-size: 18px !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: .2px !important; } .simpleblog__listing__post__wrapper__content__headline a { color: #1a1a1a !important; text-decoration: none !important; transition: color .2s ease !important; } .simpleblog__listing__post__wrapper:hover .simpleblog__listing__post__wrapper__content__headline a { color: #e6007e !important; } .simpleblog__listing__post__wrapper__content p[itemprop="description"] { margin: 0 0 18px !important; font-family: "Avenir", "Avenir Next", sans-serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.6 !important; color: #666 !important; display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } .simpleblog__listing__post__wrapper__content__readmore { display: inline-flex !important; align-items: center !important; gap: 6px !important; margin-top: auto !important; font-family: "Avenir", "Avenir Next", sans-serif !important; font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .6px !important; color: #1a1a1a !important; text-decoration: none !important; transition: color .2s ease, gap .2s ease !important; } .simpleblog__listing__post__wrapper__content__readmore .text-underline { text-decoration: none !important; } .simpleblog__listing__post__wrapper__content__readmore i { font-size: 10px !important; transition: transform .2s ease !important; } .simpleblog__listing__post__wrapper__content__readmore:hover { color: #e6007e !important; gap: 10px !important; } .simpleblog__listing__post__wrapper__content__readmore:hover i { transform: translateX(2px) !important; } .simpleblog__listing__post__wrapper__footer { border: none !important; padding: 0 26px 20px !important; margin: 0 !important; font-family: "Avenir", "Avenir Next", sans-serif !important; font-size: 12px !important; color: #999 !important; } .simpleblog__listing__post__wrapper__footer:empty { display: none !important; padding: 0 !important; } @media (max-width: 900px) { .simpleblog__listing .row { grid-template-columns: 1fr !important; gap: 20px !important; } .simpleblog__listing__post__wrapper__content { padding: 20px 20px 18px !important; } .simpleblog__listing__post__wrapper__content__headline { font-size: 19px !important; } } @media (max-width: 480px) { .simpleblog__listing { padding: 15px 12px 40px; } .simpleblog__listing .row { gap: 16px !important; } .simpleblog__listing__post__wrapper__content { padding: 16px 16px 16px !important; } .simpleblog__listing__post__wrapper__content__headline { font-size: 17px !important; margin-bottom: 8px !important; } .simpleblog__listing__post__wrapper__content p[itemprop="description"] { font-size: 13px !important; -webkit-line-clamp: 2 !important; } } /* ========================================================= Blog article — mise en page 2 colonnes (sidebar "Articles populaires" + contenu de l'article) ========================================================= */ .blog-post-layout { display: flex; flex-wrap: wrap; gap: 2.5rem; } /* ---------- Sidebar ---------- */ .blog-sidebar-popular { flex: 0 0 220px; max-width: 220px; } .blog-sidebar-popular__title { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 1.25rem; } .blog-sidebar-popular__list--loading { font-size: 0.8rem; color: #999; } .blog-sidebar-popular__item { display: block; text-decoration: none; color: inherit; margin-bottom: 1.5rem; } .blog-sidebar-popular__item:hover .blog-sidebar-popular__item-title { text-decoration: underline; } .blog-sidebar-popular__img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; border-radius: 4px; margin-bottom: 0.6rem; } .blog-sidebar-popular__item-title { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.35; } .blog-sidebar-popular__date { display: block; font-size: 0.68rem; color: #999; margin-top: 0.25rem; } /* ---------- Main column ---------- */ .blog-post-main { flex: 1 1 0%; min-width: 0; } .blog-post-main .page-header { margin-bottom: 0.5rem; } .blog-post-main .page-title { margin-bottom: 0; } .blog-post-share { display: flex; align-items: center; gap: 0.9rem; margin: 0.75rem 0 1.5rem; font-size: 0.8rem; color: #666; } .blog-post-share__label { text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.05em; } .blog-post-share__link { color: #333; font-size: 1rem; line-height: 1; } .blog-post-share__link:hover { color: #000; } .simpleblog__post img.img-fluid.mb-4 { border-radius: 6px; } .simpleblog__post .rte-content strong { color: #111; } /* ---------- Responsive ---------- */ @media (max-width: 991px) { .blog-post-layout { flex-direction: column; } .blog-sidebar-popular { order: 2; flex: 1 1 auto; max-width: none; margin-top: 2rem; } .blog-sidebar-popular__list { display: flex; gap: 1.25rem; overflow-x: auto; } .blog-sidebar-popular__item { flex: 0 0 140px; margin-bottom: 0; } .blog-post-main { order: 1; } } body#module-ph_simpleblog-single h1.page-title { font-family: 'Apollo', serif !important; font-size: 42px !important; font-weight: 400 !important; line-height: 1.2; letter-spacing: 1px; } body#module-ph_simpleblog-single .blog-post-main { margin-top: -100px !important; } body#module-ph_simpleblog-single .blog-sidebar-popular { margin-top: 100px !important; } body#module-ph_simpleblog-single img.img-fluid.mb-4 { width: 70% !important; max-width: 100% !important; } body#module-ph_simpleblog-single .rte-content > p:first-child { font-family: 'Avenir', sans-serif !important; font-size: 20px !important; } /* ========================================================================= FLÈCHES CARROUSEL BLOG — plus grandes, noires, sans cercle Scopé via :has() au widget qui contient les articles de blog, pour ne toucher AUCUN autre carrousel du site (produits, catégories, etc.) ========================================================================= */ .elementor-widget-loop-carousel:has(.simpleblog__listing__post) .elementor-swiper-button, .elementor-widget-loop-carousel:has(.simpleblog__listing__post) .swiper-button-prev, .elementor-widget-loop-carousel:has(.simpleblog__listing__post) .swiper-button-next, .elementor-element:has(> .elementor-widget-container .simpleblog__listing__post) .elementor-swiper-button, .elementor-element:has(> .elementor-widget-container .simpleblog__listing__post) .swiper-button-prev, .elementor-element:has(> .elementor-widget-container .simpleblog__listing__post) .swiper-button-next { width: 48px !important; height: 48px !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; color: #1a1a1a !important; display: flex !important; align-items: center !important; justify-content: center !important; top: 50% !important; transform: translateY(-50%) !important; margin-top: 0 !important; z-index: 5 !important; cursor: pointer !important; transition: transform .25s ease, opacity .25s ease !important; } .elementor-widget-loop-carousel:has(.simpleblog__listing__post) .elementor-swiper-button::after, .elementor-widget-loop-carousel:has(.simpleblog__listing__post) .swiper-button-prev::after, .elementor-widget-loop-carousel:has(.simpleblog__listing__post) .swiper-button-next::after, .elementor-element:has(> .elementor-widget-container .simpleblog__listing__post) .elementor-swiper-button::after, .elementor-element:has(> .elementor-widget-container .simpleblog__listing__post) .swiper-button-prev::after, .elementor-element:has(> .elementor-widget-container .simpleblog__listing__post) .swiper-button-next::after { display: none !important; content: none !important; font-size: 0 !important; } .elementor-widget-loop-carousel:has(.simpleblog__listing__post) .swiper-button-prev, .elementor-widget-loop-carousel:has(.simpleblog__listing__post) .elementor-swiper-button-prev, .elementor-element:has(> .elementor-widget-container .simpleblog__listing__post) .swiper-button-prev, .elementor-element:has(> .elementor-widget-container .simpleblog__listing__post) .elementor-swiper-button-prev { left: -48px !important; } .elementor-widget-loop-carousel:has(.simpleblog__listing__post) .swiper-button-next, .elementor-widget-loop-carousel:has(.simpleblog__listing__post) .elementor-swiper-button-next, .elementor-element:has(> .elementor-widget-container .simpleblog__listing__post) .swiper-button-next, .elementor-element:has(> .elementor-widget-container .simpleblog__listing__post) .elementor-swiper-button-next { right: -48px !important; } .elementor-widget-loop-carousel:has(.simpleblog__listing__post) .swiper-button-prev::before, .elementor-element:has(> .elementor-widget-container .simpleblog__listing__post) .swiper-button-prev::before { content: '' !important; display: block !important; width: 16px !important; height: 16px !important; border-left: 2.5px solid #1a1a1a !important; border-bottom: 2.5px solid #1a1a1a !important; transform: rotate(45deg) !important; margin-left: 8px !important; } .elementor-widget-loop-carousel:has(.simpleblog__listing__post) .swiper-button-next::before, .elementor-element:has(> .elementor-widget-container .simpleblog__listing__post) .swiper-button-next::before { content: '' !important; display: block !important; width: 16px !important; height: 16px !important; border-right: 2.5px solid #1a1a1a !important; border-top: 2.5px solid #1a1a1a !important; transform: rotate(45deg) !important; margin-right: 8px !important; } .elementor-widget-loop-carousel:has(.simpleblog__listing__post) .swiper-button-prev:hover, .elementor-element:has(> .elementor-widget-container .simpleblog__listing__post) .swiper-button-prev:hover { transform: translateY(-50%) translateX(-4px) !important; } .elementor-widget-loop-carousel:has(.simpleblog__listing__post) .swiper-button-next:hover, .elementor-element:has(> .elementor-widget-container .simpleblog__listing__post) .swiper-button-next:hover { transform: translateY(-50%) translateX(4px) !important; } .elementor-widget-loop-carousel:has(.simpleblog__listing__post) .swiper-button-disabled, .elementor-element:has(> .elementor-widget-container .simpleblog__listing__post) .swiper-button-disabled { opacity: 0.25 !important; cursor: default !important; } .elementor-widget-loop-carousel:has(.simpleblog__listing__post) .swiper-button-disabled:hover, .elementor-element:has(> .elementor-widget-container .simpleblog__listing__post) .swiper-button-disabled:hover { transform: translateY(-50%) !important; } @media (max-width: 1024px) { .elementor-widget-loop-carousel:has(.simpleblog__listing__post) .elementor-swiper-button, .elementor-widget-loop-carousel:has(.simpleblog__listing__post) .swiper-button-prev, .elementor-widget-loop-carousel:has(.simpleblog__listing__post) .swiper-button-next, .elementor-element:has(> .elementor-widget-container .simpleblog__listing__post) .elementor-swiper-button, .elementor-element:has(> .elementor-widget-container .simpleblog__listing__post) .swiper-button-prev, .elementor-element:has(> .elementor-widget-container .simpleblog__listing__post) .swiper-button-next { width: 34px !important; height: 34px !important; } .elementor-widget-loop-carousel:has(.simpleblog__listing__post) .swiper-button-prev::before, .elementor-widget-loop-carousel:has(.simpleblog__listing__post) .swiper-button-next::before, .elementor-element:has(> .elementor-widget-container .simpleblog__listing__post) .swiper-button-prev::before, .elementor-element:has(> .elementor-widget-container .simpleblog__listing__post) .swiper-button-next::before { width: 12px !important; height: 12px !important; } .elementor-widget-loop-carousel:has(.simpleblog__listing__post) .swiper-button-prev, .elementor-element:has(> .elementor-widget-container .simpleblog__listing__post) .swiper-button-prev { left: -8px !important; } .elementor-widget-loop-carousel:has(.simpleblog__listing__post) .swiper-button-next, .elementor-element:has(> .elementor-widget-container .simpleblog__listing__post) .swiper-button-next { right: -8px !important; } } @media (max-width: 480px) { .elementor-widget-loop-carousel:has(.simpleblog__listing__post) .elementor-swiper-button, .elementor-widget-loop-carousel:has(.simpleblog__listing__post) .swiper-button-prev, .elementor-widget-loop-carousel:has(.simpleblog__listing__post) .swiper-button-next, .elementor-element:has(> .elementor-widget-container .simpleblog__listing__post) .elementor-swiper-button, .elementor-element:has(> .elementor-widget-container .simpleblog__listing__post) .swiper-button-prev, .elementor-element:has(> .elementor-widget-container .simpleblog__listing__post) .swiper-button-next { width: 28px !important; height: 28px !important; } } /* ============================================================================= 14. RESPONSIVE GLOBAL — GRILLE PRODUITS, CARROUSEL, PANIER ----------------------------------------------------------------------------- Gros bloc de media queries mobile/tablette qui recoupe plusieurs sections à la fois (grille produits, carrousels, panier). Conservé groupé tel quel, comme dans le fichier d'origine, plutôt que réparti — car de nombreuses règles y ajustent plusieurs composants en une seule requête média et les séparer risquerait de casser leur cohérence. ============================================================================= */ @media (max-width: 1024px) { .product-miniature { padding: 6px !important; margin: 0 !important; gap: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; } .product-miniature .thumbnail-container { margin: 0 0 2px !important; padding: 0 !important; height: 220px !important; max-height: 220px !important; min-height: 220px !important; width: 100% !important; overflow: hidden !important; background: #f5f5f5 !important; position: relative !important; border-radius: 4px !important; } .product-miniature .thumbnail-container img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } .product-miniature .product-brand.product-brand { font-size: 7px !important; line-height: 1.1 !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } .product-miniature .product-title.product-title a { font-size: 7px !important; line-height: 1.1 !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; display: block !important; } .product-miniature .product-price-and-shipping { margin: 1px 0 !important; padding: 0 !important; height: auto !important; min-height: 0 !important; } .product-miniature .product-price, .product-price.product-price { font-size: 9px !important; margin: 0 !important; padding: 0 !important; line-height: 1.2 !important; } .product-miniature .regular-price { font-size: 6px !important; margin: 0 !important; padding: 0 !important; line-height: 1.2 !important; } .product-miniature .variant-links { margin: 1px 0 !important; padding: 0 !important; height: auto !important; min-height: 0 !important; gap: 2px !important; } .product-miniature .variant-links .color { width: 14px !important; height: 14px !important; margin: 0 !important; } .product-miniature .product-add-cart { margin: 0 !important; padding: 0 !important; height: auto !important; min-height: 0 !important; } .product-miniature .add-to-cart.add-to-cart, .product-miniature .btn.btn-product-list { height: 28px !important; max-height: 28px !important; min-height: 28px !important; padding: 0 6px !important; font-size: 8px !important; line-height: 1 !important; margin: 2px 0 0 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; gap: 4px !important; white-space: nowrap !important; box-sizing: border-box !important; border-radius: 4px !important; } .product-miniature .add-to-cart.add-to-cart::before { width: 12px !important; height: 12px !important; margin: 0 !important; flex-shrink: 0 !important; } .product-miniature .product-description { margin: 0 !important; padding: 0 !important; gap: 0 !important; height: auto !important; min-height: 0 !important; } .elementor-products-carousel { padding-left: 8px !important; padding-right: 8px !important; } .elementor-products-carousel .swiper-wrapper { gap: 8px !important; align-items: stretch !important; } .elementor-products-carousel .swiper-slide { width: calc(33.333% - 6px) !important; max-width: calc(33.333% - 6px) !important; min-width: calc(33.333% - 6px) !important; flex: 0 0 calc(33.333% - 6px) !important; height: auto !important; display: flex !important; } .elementor-products-carousel .js-product-miniature-wrapper { width: 100% !important; height: auto !important; display: flex !important; flex-direction: column !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; } .elementor-products-carousel .product-miniature.product-miniature-grid { height: auto !important; align-self: stretch !important; padding: 5px !important; width: 100% !important; display: flex !important; flex-direction: column !important; overflow: visible !important; gap: 0 !important; margin: 0 !important; min-height: 0 !important; } .elementor-products-carousel .product-description { flex: 0 1 auto !important; display: flex !important; flex-direction: column !important; gap: 0 !important; margin: 0 !important; padding: 0 !important; height: auto !important; min-height: 0 !important; } .elementor-products-carousel .thumbnail-container { margin: 0 0 2px !important; padding: 0 !important; height: 200px !important; max-height: 200px !important; min-height: 200px !important; width: 100% !important; overflow: hidden !important; background: #f5f5f5 !important; position: relative !important; border-radius: 4px !important; } .elementor-products-carousel .thumbnail-container img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } .elementor-products-carousel .product-brand.product-brand { height: auto !important; min-height: 0 !important; font-size: 6.5px !important; line-height: 1.1 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; flex-shrink: 0 !important; } .elementor-products-carousel .product-title.product-title { height: auto !important; min-height: 0 !important; font-size: 6.5px !important; line-height: 1.1 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; flex-shrink: 0 !important; } .elementor-products-carousel .product-price-and-shipping { margin: 1px 0 !important; padding: 0 !important; height: auto !important; min-height: 0 !important; } .elementor-products-carousel .product-price.product-price { font-size: 8.5px !important; margin: 0 !important; padding: 0 !important; line-height: 1.2 !important; } .elementor-products-carousel .products-variants { margin: 1px 0 !important; padding: 0 !important; height: auto !important; min-height: 0 !important; } .elementor-products-carousel .variant-links { margin: 0 !important; padding: 0 !important; gap: 2px !important; height: auto !important; min-height: 0 !important; } .elementor-products-carousel .variant-links .color { width: 12px !important; height: 12px !important; margin: 0 !important; } .elementor-products-carousel .add-to-cart.add-to-cart, .elementor-products-carousel .btn.btn-product-list { height: 28px !important; max-height: 28px !important; min-height: 28px !important; padding: 0 4px !important; font-size: 7.5px !important; gap: 3px !important; white-space: nowrap !important; flex-shrink: 0 !important; margin: 2px 0 0 0 !important; border-radius: 4px !important; width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; } .elementor-products-carousel .add-to-cart.add-to-cart::before { width: 11px !important; height: 11px !important; margin: 0 !important; flex-shrink: 0 !important; } .products:not(body#category .products), .products .row:not(body#category .products .row), .js-product-miniature-wrapper { display: flex !important; flex-wrap: wrap !important; align-items: stretch !important; overflow: visible !important; margin: 0 !important; padding: 0 !important; gap: 0 !important; } body#category .products, body#category .products .row { display: flex !important; flex-wrap: wrap !important; align-items: stretch !important; overflow: visible !important; } .js-product-miniature-wrapper { display: flex !important; flex-direction: column !important; overflow: visible !important; margin: 0 !important; padding: 0 !important; height: auto !important; min-height: 0 !important; } .elementor-products-carousel.swiper-products-carousel, .elementor-products-carousel .swiper, .elementor-products-carousel .swiper-container, .elementor-products-carousel .swiper-wrapper, .elementor-products-carousel .swiper-slide, .elementor-products-carousel .js-product-miniature-wrapper { overflow: visible !important; margin: 0 !important; padding: 0 !important; height: auto !important; min-height: 0 !important; } .elementor-products-carousel.swiper-products-carousel { padding-bottom: 2px !important; margin-bottom: 0 !important; } .card.cart-summary { max-width: 100% !important; margin: 10px !important; } } @media (max-width: 768px) { .product-miniature { padding: 4px !important; border-radius: 8px !important; margin: 0 !important; gap: 0 !important; height: auto !important; min-height: 0 !important; } .product-miniature .thumbnail-container { margin: 0 0 2px !important; padding: 0 !important; height: 180px !important; max-height: 180px !important; min-height: 180px !important; width: 100% !important; overflow: hidden !important; background: #f5f5f5 !important; position: relative !important; border-radius: 4px !important; } .product-miniature .thumbnail-container img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } .product-miniature .product-brand.product-brand { font-size: 6.5px !important; line-height: 1.1 !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } .product-miniature .product-title.product-title a { font-size: 6.5px !important; line-height: 1.1 !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; display: block !important; } .product-miniature .product-price-and-shipping { margin: 1px 0 !important; padding: 0 !important; height: auto !important; min-height: 0 !important; } .product-miniature .product-price, .product-price.product-price { font-size: 8px !important; margin: 0 !important; padding: 0 !important; line-height: 1.2 !important; } .product-miniature .regular-price { font-size: 5.5px !important; margin: 0 !important; padding: 0 !important; line-height: 1.2 !important; } .product-miniature .variant-links { margin: 1px 0 !important; padding: 0 !important; gap: 2px !important; min-height: 0 !important; height: auto !important; } .product-miniature .variant-links .color { width: 12px !important; height: 12px !important; margin: 0 !important; } .product-miniature .product-add-cart { margin: 0 !important; padding: 0 !important; height: auto !important; min-height: 0 !important; } .product-miniature .add-to-cart.add-to-cart, .product-miniature .btn.btn-product-list { height: 26px !important; max-height: 26px !important; min-height: 26px !important; padding: 0 4px !important; font-size: 7px !important; line-height: 1 !important; margin: 2px 0 0 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; gap: 3px !important; white-space: nowrap !important; box-sizing: border-box !important; border-radius: 4px !important; } .product-miniature .add-to-cart.add-to-cart::before { width: 10px !important; height: 10px !important; margin: 0 !important; flex-shrink: 0 !important; } .product-miniature .product-description { margin: 0 !important; padding: 0 !important; gap: 0 !important; height: auto !important; min-height: 0 !important; } .elementor-products-carousel { padding-left: 6px !important; padding-right: 6px !important; } .elementor-products-carousel .swiper-wrapper { gap: 8px !important; align-items: stretch !important; } .elementor-products-carousel .swiper-slide { width: calc(50% - 4px) !important; max-width: calc(50% - 4px) !important; min-width: calc(50% - 4px) !important; flex: 0 0 calc(50% - 4px) !important; height: auto !important; display: flex !important; } .elementor-products-carousel .js-product-miniature-wrapper { width: 100% !important; height: auto !important; display: flex !important; flex-direction: column !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; } .elementor-products-carousel .product-miniature.product-miniature-grid { height: auto !important; align-self: stretch !important; padding: 4px !important; width: 100% !important; display: flex !important; flex-direction: column !important; overflow: visible !important; gap: 0 !important; margin: 0 !important; min-height: 0 !important; } .elementor-products-carousel .product-description { flex: 0 1 auto !important; display: flex !important; flex-direction: column !important; gap: 0 !important; margin: 0 !important; padding: 0 !important; height: auto !important; min-height: 0 !important; } .elementor-products-carousel .thumbnail-container { margin: 0 0 2px !important; padding: 0 !important; height: 160px !important; max-height: 160px !important; min-height: 160px !important; width: 100% !important; overflow: hidden !important; background: #f5f5f5 !important; position: relative !important; border-radius: 4px !important; } .elementor-products-carousel .thumbnail-container img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } .elementor-products-carousel .product-brand.product-brand { height: auto !important; min-height: 0 !important; font-size: 5.5px !important; line-height: 1.1 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; flex-shrink: 0 !important; } .elementor-products-carousel .product-title.product-title { height: auto !important; min-height: 0 !important; font-size: 5.5px !important; line-height: 1.1 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; flex-shrink: 0 !important; } .elementor-products-carousel .product-price-and-shipping { margin: 1px 0 !important; padding: 0 !important; height: auto !important; min-height: 0 !important; } .elementor-products-carousel .product-price.product-price { font-size: 7.5px !important; margin: 0 !important; padding: 0 !important; line-height: 1.2 !important; } .elementor-products-carousel .products-variants { margin: 1px 0 !important; padding: 0 !important; height: auto !important; min-height: 0 !important; } .elementor-products-carousel .variant-links { margin: 0 !important; padding: 0 !important; gap: 2px !important; height: auto !important; min-height: 0 !important; } .elementor-products-carousel .variant-links .color { width: 10px !important; height: 10px !important; margin: 0 !important; } .elementor-products-carousel .add-to-cart.add-to-cart, .elementor-products-carousel .btn.btn-product-list { height: 26px !important; max-height: 26px !important; min-height: 26px !important; padding: 0 3px !important; font-size: 6.5px !important; gap: 2px !important; white-space: nowrap !important; flex-shrink: 0 !important; margin: 2px 0 0 0 !important; border-radius: 4px !important; width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; } .elementor-products-carousel .add-to-cart.add-to-cart::before { width: 10px !important; height: 10px !important; margin: 0 !important; flex-shrink: 0 !important; } html body#category, body#category { overflow-x: hidden !important; width: 100% !important; max-width: 100vw !important; } body#category #content, body#category #main, body#category .page-content { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; box-sizing: border-box !important; } body#category .products, body#category .products .row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 20px !important; margin: 0 !important; padding: 0 12px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } body#category .js-product-miniature-wrapper.js-product-miniature-wrapper { width: 100% !important; max-width: 100% !important; flex: none !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; min-width: 0 !important; } body#category .product-miniature { margin: 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } body#cart #inner-wrapper.container, body#cart #content-wrapper { padding-left: 0 !important; padding-right: 0 !important; max-width: 100% !important; width: 100% !important; position: static !important; margin-top: -50px !important; } body#cart #main { padding-left: 0 !important; padding-right: 0 !important; display: block !important; position: static !important; top: auto !important; flex-direction: unset !important; } body#cart #main > h1.page-title { display: block !important; position: static !important; top: auto !important; float: none !important; clear: both !important; width: 100% !important; order: unset !important; flex: unset !important; margin: 0 0 8px 0 !important; } body#cart .cart-grid.row { display: flex !important; flex-direction: column !important; margin-left: 0 !important; margin-right: 0 !important; margin-top: 0 !important; clear: both !important; position: static !important; } body#cart .cart-grid-body, body#cart .cart-grid-right { padding-left: 8px !important; padding-right: 8px !important; } html body#cart h1.page-title, html body#cart .page-title, #cart .page-title, body#cart h1.page-title { position: static !important; top: auto !important; font-size: 20px !important; font-weight: 700 !important; padding: 16px 8px 12px 8px !important; margin: 0 0 8px 0 !important; display: block !important; width: 100% !important; clear: both !important; float: none !important; z-index: auto !important; } .cart-items { background: #ffffff !important; border-radius: 14px !important; border: 1px solid #ededed !important; overflow: hidden !important; margin: 0 0 16px 0 !important; } .cart-item { padding: 14px !important; border-radius: 0 !important; border: none !important; border-bottom: 1px solid #f0f0f0 !important; margin-bottom: 50px !important; background: transparent !important; } .cart-item:last-child { border-bottom: none !important; } .product-line-grid { display: flex !important; align-items: center !important; gap: 10px !important; } .product-line-grid .product-image { width: 50px !important; height: 62px !important; flex-shrink: 0 !important; } .product-line-grid-body { display: flex !important; flex-direction: column !important; gap: 0 !important; min-width: 0 !important; flex: 1 1 auto !important; } .product-line-grid-body .col-9 { font-size: 9.5px !important; font-weight: 700 !important; letter-spacing: 0.2px !important; margin-bottom: 2px !important; } .product-line-info .label { font-size: 11.5px !important; font-weight: 600 !important; line-height: 1.3 !important; word-break: break-word !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; margin-bottom: 1px !important; } .product-line-info small { font-size: 9px !important; color: #999 !important; margin-top: 1px !important; display: block !important; } .qty-and-delete { gap: 6px !important; margin-top: 6px !important; align-items: center !important; } .qty { width: 34px !important; } .qty input { height: 26px !important; font-size: 11px !important; border-radius: 4px !important; } .cart-line-product-actions a { padding: 4px 8px !important; font-size: 9.5px !important; border-radius: 4px !important; } .product-line-grid-right { flex-shrink: 0 !important; margin-left: 0 !important; gap: 2px !important; align-items: flex-end !important; justify-content: center !important; } .unit-price { display: none !important; } .product-price strong { font-size: 13.5px !important; font-weight: 700 !important; color: #1a1a1a !important; } .block-promo { background: transparent !important; border: none !important; padding: 20px 0 16px 0 !important; margin: 0 !important; } .block-promo::before { font-size: 16px !important; font-weight: 700 !important; margin-bottom: 12px !important; } .block-promo .promo-code .input-group { height: 44px !important; } .block-promo .promo-code .form-control, .block-promo .promo-code .input-group-append, .block-promo .promo-code button[type="submit"] { height: 44px !important; } .block-promo .promo-code button[type="submit"] { padding: 0 18px !important; } .block-promo .promo-code button[type="submit"]::after { font-size: 12px !important; letter-spacing: 0.3px !important; } .block-promo .promo-code::after { font-size: 10.5px !important; } .card.cart-summary { max-width: 100% !important; margin: 0 !important; max-height: none !important; box-shadow: none !important; border-radius: 0 !important; background: transparent !important; transform: none !important; } .card-body.cart-detailed-subtotals { padding: 8px 0 0 0 !important; background: transparent !important; } .card-body.cart-detailed-subtotals::before { font-size: 2px !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; margin-bottom: 14px !important; } .cart-summary-line { padding: 6px 0 !important; border-bottom: none !important; } .cart-summary-line .label, .cart-summary-line .value { font-size: 14px !important; font-weight: 500 !important; } .iqitfreedeliverycount { padding: 14px 0 !important; background: transparent !important; border-top: none !important; border-bottom: none !important; } .iqitfreedeliverycount::before { height: 8px !important; margin-bottom: 8px !important; } .iqitfreedeliverycount .ifdc-remaining-price { font-size: 11.5px !important; } .card-body.cart-summary-totals { padding: 14px 0 18px 0 !important; background: transparent !important; border-top: 1px solid #ededed !important; } .cart-total .label { font-size: 15px !important; font-weight: 700 !important; } .cart-total .value { font-size: 19px !important; font-weight: 700 !important; } .cart-summary-totals::after { font-size: 10.5px !important; } .checkout.cart-detailed-actions { padding: 8px 0 20px 0 !important; background: transparent !important; } .checkout.cart-detailed-actions .btn { padding: 15px !important; font-size: 13.5px !important; font-weight: 700 !important; border-radius: 10px !important; background: linear-gradient(135deg, #ff2d7f 0%, #ff1a6f 100%) !important; } body#cart .crossselling-products { width: calc(100% + 16px) !important; max-width: calc(100% + 16px) !important; margin-left: -8px !important; margin-right: -8px !important; margin-top: 8px !important; padding: 24px 8px !important; box-sizing: border-box !important; overflow-x: hidden !important; background: #ffffff !important; border-radius: 0 !important; } body#cart .crossselling-products h4.section-title { height: auto !important; margin: 0 0 16px 0 !important; } body#cart .crossselling-products h4.section-title::before { font-size: 18px !important; line-height: 1.3 !important; position: relative !important; letter-spacing: 0.5px !important; font-weight: 700 !important; } body#cart .crossselling-products .products.products-grid.swiper, body#cart .crossselling-products .swiper-wrapper { width: 100% !important; } body#cart .crossselling-products .swiper-wrapper { display: flex !important; gap: 8px !important; align-items: stretch !important; } body#cart .crossselling-products .swiper-slide { width: calc(50% - 4px) !important; max-width: calc(50% - 4px) !important; min-width: calc(50% - 4px) !important; flex: 0 0 calc(50% - 4px) !important; height: auto !important; display: flex !important; } body#cart .crossselling-products .js-product-miniature-wrapper { width: 100% !important; height: auto !important; display: flex !important; flex-direction: column !important; } body#cart .crossselling-products .product-miniature { min-height: 280px !important; height: auto !important; width: 100% !important; padding: 8px !important; display: flex !important; flex-direction: column !important; overflow: visible !important; } body#cart .crossselling-products .thumbnail-container { height: 110px !important; } body#cart .crossselling-products .product-title { font-size: 10px !important; height: auto !important; min-height: 0 !important; } body#cart .crossselling-products .product-brand { font-size: 9px !important; } body#cart .crossselling-products .product-price { font-size: 12px !important; } body#cart .crossselling-products .add-to-cart { height: 32px !important; font-size: 9px !important; padding: 0 6px !important; } } @media (max-width: 480px) { .product-miniature { padding: 3px !important; margin: 0 !important; gap: 0 !important; height: auto !important; min-height: 0 !important; } .product-miniature .thumbnail-container { margin: 0 0 2px !important; padding: 0 !important; height: 130px !important; max-height: 130px !important; min-height: 130px !important; width: 100% !important; overflow: hidden !important; background: #f5f5f5 !important; position: relative !important; border-radius: 4px !important; } .product-miniature .thumbnail-container img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } .product-miniature .product-brand.product-brand { font-size: 6px !important; line-height: 1.1 !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } .product-miniature .product-title.product-title a { font-size: 6px !important; line-height: 1.1 !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; display: block !important; } .product-miniature .product-price-and-shipping { margin: 1px 0 !important; padding: 0 !important; height: auto !important; min-height: 0 !important; } .product-miniature .product-price, .product-price.product-price { font-size: 7px !important; margin: 0 !important; padding: 0 !important; line-height: 1.2 !important; } .product-miniature .variant-links { margin: 1px 0 !important; padding: 0 !important; gap: 1px !important; min-height: 0 !important; height: auto !important; } .product-miniature .variant-links .color { width: 10px !important; height: 10px !important; margin: 0 !important; } .product-miniature .add-to-cart.add-to-cart, .product-miniature .btn.btn-product-list { height: 24px !important; max-height: 24px !important; min-height: 24px !important; padding: 0 3px !important; font-size: 6.5px !important; line-height: 1 !important; margin: 2px 0 0 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; gap: 2px !important; white-space: nowrap !important; box-sizing: border-box !important; border-radius: 4px !important; } .product-miniature .add-to-cart.add-to-cart::before { width: 9px !important; height: 9px !important; margin: 0 !important; flex-shrink: 0 !important; } .product-miniature .product-description { margin: 0 !important; padding: 0 !important; gap: 0 !important; height: auto !important; min-height: 0 !important; } .elementor-products-carousel { padding-left: 4px !important; padding-right: 4px !important; } .elementor-products-carousel .swiper-wrapper { gap: 6px !important; align-items: stretch !important; } .elementor-products-carousel .swiper-slide { width: calc(50% - 3px) !important; max-width: calc(50% - 3px) !important; min-width: calc(50% - 3px) !important; flex: 0 0 calc(50% - 3px) !important; height: auto !important; display: flex !important; } .elementor-products-carousel .js-product-miniature-wrapper { width: 100% !important; height: auto !important; display: flex !important; flex-direction: column !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; } .elementor-products-carousel .product-miniature.product-miniature-grid { height: auto !important; align-self: stretch !important; padding: 3px !important; width: 100% !important; display: flex !important; flex-direction: column !important; overflow: visible !important; gap: 0 !important; margin: 0 !important; min-height: 0 !important; } .elementor-products-carousel .product-description { flex: 0 1 auto !important; display: flex !important; flex-direction: column !important; gap: 0 !important; margin: 0 !important; padding: 0 !important; height: auto !important; min-height: 0 !important; } .elementor-products-carousel .thumbnail-container { margin: 0 0 2px !important; padding: 0 !important; height: 110px !important; max-height: 110px !important; min-height: 110px !important; width: 100% !important; overflow: hidden !important; background: #f5f5f5 !important; position: relative !important; border-radius: 4px !important; } .elementor-products-carousel .thumbnail-container img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } .elementor-products-carousel .product-brand.product-brand { height: auto !important; min-height: 0 !important; font-size: 5px !important; line-height: 1.1 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; flex-shrink: 0 !important; } .elementor-products-carousel .product-title.product-title { height: auto !important; min-height: 0 !important; font-size: 5px !important; line-height: 1.1 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; flex-shrink: 0 !important; } .elementor-products-carousel .product-price-and-shipping { margin: 1px 0 !important; padding: 0 !important; height: auto !important; min-height: 0 !important; } .elementor-products-carousel .product-price.product-price { font-size: 7px !important; margin: 0 !important; padding: 0 !important; line-height: 1.2 !important; } .elementor-products-carousel .products-variants { margin: 1px 0 !important; padding: 0 !important; height: auto !important; min-height: 0 !important; } .elementor-products-carousel .variant-links { margin: 0 !important; padding: 0 !important; gap: 1px !important; height: auto !important; min-height: 0 !important; } .elementor-products-carousel .variant-links .color { width: 8px !important; height: 8px !important; margin: 0 !important; } .elementor-products-carousel .add-to-cart.add-to-cart, .elementor-products-carousel .btn.btn-product-list { height: 24px !important; max-height: 24px !important; min-height: 24px !important; padding: 0 2px !important; font-size: 6px !important; gap: 2px !important; white-space: nowrap !important; flex-shrink: 0 !important; margin: 2px 0 0 0 !important; border-radius: 4px !important; width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; } .elementor-products-carousel .add-to-cart.add-to-cart::before { width: 8px !important; height: 8px !important; margin: 0 !important; flex-shrink: 0 !important; } } @media (max-width: 1024px) and (min-width: 769px) { body#cart .crossselling-products { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; margin-top: 40px !important; padding: 28px 24px !important; box-sizing: border-box !important; overflow-x: hidden !important; } body#cart .crossselling-products h4.section-title::before { font-size: 26px !important; } .card.cart-summary { max-width: 100% !important; margin: 16px auto !important; } } @media (max-width: 380px) { .block-promo .promo-code .input-group { flex-direction: column !important; height: auto !important; gap: 8px !important; } .block-promo .promo-code .form-control { border-radius: 8px !important; } .block-promo .promo-code .input-group-append { height: 44px !important; } .block-promo .promo-code button[type="submit"] { border-radius: 8px !important; border-left: 1px solid #1a1a1a !important; width: 100% !important; } .product-line-grid .product-image { width: 44px !important; height: 56px !important; } } @media (max-width: 1024px) { body#cart .cart-grid.row { display: flex !important; flex-direction: column !important; } body#cart .cart-grid-body, body#cart .cart-grid-right { display: contents !important; } body#cart .cart-grid-body .cart-container { order: 1 !important; padding-left: 8px !important; padding-right: 8px !important; box-sizing: border-box !important; width: 100% !important; } body#cart .cart-grid-right .card.cart-summary { order: 2 !important; padding-left: 8px !important; padding-right: 8px !important; box-sizing: border-box !important; width: 100% !important; } body#cart .cart-grid-right .checkout.cart-detailed-actions { order: 3 !important; padding-left: 8px !important; padding-right: 8px !important; box-sizing: border-box !important; width: 100% !important; } body#cart .cart-grid-body .crossselling-products { order: 4 !important; width: 100% !important; } body#cart .cart-grid-body > a.btn-secondary { order: 5 !important; margin-left: 8px !important; } } /* ============================================================================= 15. CORRECTIFS PONCTUELS DIVERS ----------------------------------------------------------------------------- Fixes isolés ajoutés au fil du temps, qui ne rentraient pas clairement dans une des sections ci-dessus (souvent des micro-ajustements sur un composant déjà couvert ailleurs, ou touchant un composant unique et isolé). Conservés ici, dans l'ordre chronologique d'origine, par sécurité — aucune fusion avec les règles déjà présentes plus haut. ============================================================================= */ .header-cart-btn { display: inline-flex !important; order: 1 !important; visibility: visible !important; opacity: 1 !important; flex-shrink: 0 !important; } .header-cart-btn .icon.fa-shopping-bag { display: inline-block !important; visibility: visible !important; opacity: 1 !important; } .header-cart-btn, .header-cart-btn .icon.fa-shopping-bag, .header-cart-btn .icon.fa-shopping-bag::before { display: inline-block !important; visibility: visible !important; opacity: 1 !important; width: auto !important; height: auto !important; } .iqit-accordion .title a { font-family: 'Avenir', sans-serif; font-weight: bold; font-size: 20px; text-transform: uppercase; } .category-products .section-title span { font-family: 'Apollo', serif !important; font-size: 38px !important; font-weight: 400 !important; line-height: 1.2; letter-spacing: 1px; } .category-products .section-title { text-align: center; } /* Le menu wrapper - seul élément sticky */ .sticky-desktop-wrapper { position: sticky; top: 0; z-index: 999; background: white; } /* ===== STICKY MENU UNIQUEMENT - PAGE D'ACCUEIL ===== */ .home .sticky-desktop-wrapper { position: sticky; top: 0; z-index: 999; background: white; } /* UNIQUEMENT pour le titre "nouveautés" */ .nouveautes-section .elementor-heading-title.elementor-size-default.none { display: block !important; opacity: 1 !important; visibility: visible !important; font-size: 28px !important; font-weight: 700 !important; color: #1a1a1a !important; line-height: 1.2 !important; } /* ========================================================================= FIX — Filtres catégorie mobile : largeur pleine + espace pour éviter le chevauchement avec la section tri "Pertinence" ========================================================================= */ @media (max-width: 1024px) { .envie-du-meilleur { margin-top: 0 !important; margin-bottom: 20px !important; } .envie-du-meilleur h2 { font-size: 30px !important; line-height: 1.25 !important; margin-bottom: 12px !important; } .envie-du-meilleur p { font-size: 15px !important; } } /* ========================================================================= FIX MOBILE UNIQUEMENT — #js-active-search-filters (filtres actifs) ========================================================================= */ #manufacturer-short-description { display: none !important; } .products.row.products-grid { margin-top: 17px !important; } .bzc-btn.solid { color: #ffffff !important; } .variant-links { counter-reset: bz-extra; position: relative; } /* ========================================================================= CARROUSEL PRODUITS — PAGE PRODUIT & PAGE PANIER ========================================================================= */ .swiper-default-carousel.swiper-products-carousel, .swiper-default-carousel { display: flex !important; } body#cart .crossselling-products .swiper-slide { display: flex !important; height: auto !important; } body#product .product-miniature { all: initial !important; display: flex !important; flex-direction: column !important; height: 100% !important; } /* ========================================================================= FIX — réduction de l'espace entre le titre "Description" et son contenu ========================================================================= */ html body .iqit-accordion .card .title { padding-bottom: 0 !important; margin-bottom: 0 !important; } /* ========================================================================= BOUTONS SOCIAL LOGIN — page de connexion, alignés sur une seule ligne ========================================================================= */ .iqitsociallogin-page-connexion { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 12px !important; width: 100% !important; } .iqitsociallogin { display: flex !important; gap: 10px !important; justify-content: center !important; } /* ---- Login title ---- */ .login-form-title { font-family: "Avenir", "Avenir Next", Arial, sans-serif !important; } .col.col-auto.col-md.price { display: flex !important; align-items: center; flex-wrap: nowrap !important; white-space: nowrap !important; gap: 5px; } /* ============================================================ FIX MOBILE - PAGES LOGIN & INSCRIPTION (sans bordures) ============================================================ */ .iqitsociallogin-colors-native .btn-google { background: unset !important; } body#registration .form-group:has(#field-birthday) { display: none !important; } /* ========================================================================= FIX — Carrousel "produits similaires" (.product-carousel) ========================================================================= */ body#product .swiper-wrapper, body#product .swiper-slide, body#product .js-product-miniature-wrapper.product-carousel { height: auto !important; } /* ========================================================================= Style marque + référence — lignes du panier ========================================================================= */ .product-line-brand { font-weight: 700; text-transform: uppercase; font-size: 13px; color: #1a1a1a; margin-bottom: 2px; } .checkout.cart-detailed-actions .btn-primary { font-size: 0 !important; position: relative; } body#registration .bz-back-home { margin-top: -150px !important; margin-left: -90px !important } .cart-summary-line#cart-subtotal-shipping > .value { color: #fff !important; } .benefits-block { transform: scale(0.8); transform-origin: left top; } /* icône par défaut : flèche vers le bas (fermé) */ #productdaas-accordion .angle-up { display: none; } /* 1. Supprimer les icônes du bouton "Ajouter au panier" */ .product-miniature .add-to-cart .bag-icon, .product-miniature .add-to-cart .spinner-icon { display: none !important; } body:not(#product) .product-miniature .bag-icon, body:not(#product) .add-to-cart .bag-icon, body:not(#product) .btn-product-list .bag-icon, body:not(#product) .add-to-cart::before { display: none !important; content: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; } .btn.btn-product-list.add-to-cart { font-family: "Avenir", "Avenir Next", Arial, sans-serif !important; } .login-link-after-register { display: block; text-align: center; margin-top: 20px; font-size: 13px; color: #666; text-decoration: none; } body#registration .page-header .page-title { font-family: "Avenir", "Avenir Next", Arial, sans-serif !important; } /* ========================================================================= FIX MOBILE — restaure le line-clamp à 2 lignes sur le titre du carrousel ========================================================================= */ @media (max-width: 1024px) { body#product .product-carousel .product-miniature { min-height: 380px !important; } body#product .product-carousel .thumbnail-container { height: 160px !important; } } /* ========================================================================= FIX — empêche les pastilles de couleur de passer à la ligne dans le carrousel "produits similaires" (page produit). ========================================================================= */ body#product .product-carousel .variant-links { flex-wrap: nowrap !important; overflow: hidden !important; } /* ========================================================================= FIX MOBILE — inverse UNIQUEMENT accordéon ↔ bloc infos produit ========================================================================= */ @media (max-width: 767px) { body#product .row.product-info-row { display: flex !important; flex-direction: column !important; } } @media (max-width: 768px) { body#product .benefits-block { transform: none !important; width: calc(100% + 24px) !important; max-width: calc(100% + 24px) !important; margin-left: -12px !important; margin-right: -12px !important; box-sizing: border-box !important; } } a.bz-back-home { display: flex !important; align-items: center !important; justify-content: center !important; } .iqitsociallogin.iqitsociallogin-checkout { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 10px !important; } @media (max-width: 1024px) { body#registration .bz-back-home { margin-top: -90px !important; margin-left: 0 !important; top: 14px !important; left: 14px !important; position: fixed !important; z-index: 100000 !important; } } #cart-subtotal-shipping .value { color: #000; } .cart-summary .block-promo:nth-of-type(2) > *:not(.cart-voucher):first-child { display: none !important; } /* Masquer le texte original */ .iqitreviews-title { font-size: 0 !important; } #iqitreviews-snippet { font-size: 0 !important; } .category-products .section-title span { font-size: 0 !important; } .color-variant-dropdown.form-control { width: 390px !important; max-width: 400px !important; } .remove-from-cart:hover { background-color: #ff0000 !important; color: #fff !important; border-color: #ff0000 !important; } /* ========================================================================= FIX FINAL v2 — "QUANTITÉ : [-] 1 [+]" avec boutons séparés ========================================================================= */ body#product .product-quantity .qty { width: auto !important; display: flex !important; align-items: center !important; gap: 10px !important; } .iqitmegamenu-wrapper { position: relative; overflow: visible !important; border-bottom: none !important; } /* SUPPRIMER COMPLÈTEMENT LA LIGNE GRISE ET L'ESPACE */ #iqitmegamenu-wrapper { border-bottom: none !important; border-bottom-color: transparent !important; box-shadow: none !important; outline: none !important; } /* Ajouter un border-radius au champ de recherche */ .input-group .form-search-control { border-radius: 25px !important; /* ou */ border-radius: 50px !important; /* ou */ border-radius: 30px 0 0 30px !important; } /* ========================================================================= SECTION 4 COLONNES — hover sur l'image + description noire, alignée à gauche, largeur limitée (retour à la ligne) ========================================================================= */ .elementor-element-i3wqcys, .elementor-element-d60ktr7, .elementor-element-x3ngyms, .elementor-element-sfuk11m { flex: 0 0 25% !important; max-width: 25% !important; width: 25% !important; padding: 0 14px !important; box-sizing: border-box !important; } /* ========================================================================= HOMOGÉNÉISATION — les cartes des CARROUSELS (home, catégorie, page produit "produits similaires", panier "vous aimerez également") ========================================================================= */ .elementor-products-carousel .product-miniature.product-miniature-grid, .swiper-default-carousel .product-miniature.product-miniature-grid, body#product .product-carousel .product-miniature, body#cart .crossselling-products .product-miniature { background: #fff !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; padding: 14px !important; box-sizing: border-box !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .10) !important; transition: transform .2s ease, box-shadow .2s ease !important; } .tax-shipping-delivery-label { display: none !important; } /* ========================================================================= FLÈCHES CARROUSEL BLOG — plus grandes, noires, sans cercle ========================================================================= */ a.btn.btn-secondary.btn-iqitsociallogin.btn-google.mt-1.mb-1 { background: #ffffff !important; color: #000000 !important; border: 1px solid #000000 !important; } /* ========================================================================= SEARCH WIDGET — bordure ajoutée, scopée UNIQUEMENT à .search-widget ========================================================================= */ .search-widget .form-control, .search-widget input.form-control, .search-widget form { border-radius: px !important; box-shadow: none !important; } a.bz-back-home { width: 54px !important; height: 54px !important; background-color: #fff !important; color: #000 !important; } /* ========================================================================= PANIER — champ quantité agrandi (col.col-auto.col-md.qty) ========================================================================= */ body#cart .col.col-auto.col-md.qty .js-cart-line-product-quantity { width: 40px !important; font-size: 15px !important; } /* ========================================================================= PANIER — masquer le prix unitaire ========================================================================= */ .col.col-auto.col-md.unit-price { display: none !important; } /* ========================================================================= PANIER — bouton "-" et "+" pour la quantité (col.col-auto.col-md.qty) ========================================================================= */ body#cart .col.col-auto.col-md.qty .bootstrap-touchspin .input-group-btn-vertical { display: contents !important; } /* ========================================================================= PANIER — fix affichage quantité ========================================================================= */ body#cart .col.col-auto.col-md.qty .input-group.bootstrap-touchspin { flex-shrink: 0 !important; flex-direction: row !important; flex-wrap: nowrap !important; } .cart-summary-line .js-subtotal { color: #000000 !important; } #cart-subtotal-shipping .label { color: #000000 !important; } #cart-subtotal-products .label { color: #000000 !important; } .login-link-after-register, .login-link-after-register a { color: #e6007e !important; } .page-header { border-bottom: none !important; } .page-header::after, .page-title::after, .page-title span::after { display: none !important; content: none !important; } /* ========================================================================= SEARCH WIDGET — radius réduit sur le bouton loupe et le conteneur ========================================================================= */ .search-widget .input-group { border-radius: 8px !important; overflow: hidden !important; } .category-description-top .rte-content p { margin-top: -62px; } /* ========================================================================= SLIDER ACCUEIL — décale TEXTES + BOUTONS vers la gauche ========================================================================= */ .elementor-heading-title a, .elementor-heading-title a:visited { transition: color 0.3s ease !important; } .rte-content p span { text-decoration: none !important; } /* Input group */ .input-group.js-parent-focus { display: flex; align-items: stretch; } .iqitsociallogin .text-muted.pr-1 { display: inline-flex !important; align-items: center; transform: translateY(-10px); } .iqitsociallogin-checkout .text-muted { font-size: 16px !important; font-weight: 500; color: #000 !important; } body#registration .page-header::before { content: ""; display: block; width: 280px !important; height: 90px !important; background: url("https://beauty.mcom.tn/img/logo-1780588175.jpg") center center / contain no-repeat; margin: 0 auto 25px; } /* ============================================================ FIX RACINE v2 — espace blanc dans le carrousel produits ============================================================ */ .elementor-products-carousel .product-miniature.product-miniature-grid { height: auto !important; min-height: 0 !important; } /* ============================================================ FIX — aligne les boutons "Ajouter au panier" même quand une carte n'a pas de bloc "couleurs" (produit à variante unique). ============================================================ */ .elementor-products-carousel .row.extra-small-gutters:not(:has(.products-variants)) .product-price-and-shipping { margin-top: 65.5px !important; } /* ============================================================ Barre de tri (vue grille/liste + tri + par page) ============================================================ */ .view-switcher a, .products-sort-nb-dropdown .select-title { height: 44px !important; box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; } .product-flags.js-product-flags { display: flex !important; flex-wrap: wrap !important; } .elementor-swiper-button-next::before, .elementor-swiper-button-prev::before { content: none !important; display: none !important; width: 0 !important; height: 0 !important; } .swiper-button-next.elementor-swiper-button-next, .swiper-button-prev.elementor-swiper-button-prev { width: 100px !important; height: 100px !important; margin-top: -50px !important; background: none !important; } .elementor-swiper-button.swiper-button-disabled { opacity: 0.35 !important; } .swiper-button-prev.elementor-swiper-button-prev { left: -70px !important; } .swiper-button-next.elementor-swiper-button-next { right: -70px !important; } /* Flèches Slider Revolution Uranus */ .tp-leftarrow.tparrows.uranus, .tp-rightarrow.tparrows.uranus { background: transparent !important; border: none !important; box-shadow: none !important; color: #000 !important; } @media (max-width: 767px) { .swiper-button-next.elementor-swiper-button-next, .swiper-button-prev.elementor-swiper-button-prev { width: 40px !important; height: 40px !important; margin-top: -20px !important; } .swiper-button-next.elementor-swiper-button-next { right: -30px !important; } .swiper-button-prev.elementor-swiper-button-prev { left: -30px !important; } } @media (max-width: 767px) { .variant-links:has(.color:nth-child(5))::after { display: none !important; content: none !important; } } @media (max-width: 767px) { body#category .product-miniature .add-to-cart, body#category .btn.btn-product-list { min-height: 44px !important; height: 44px !important; padding: 10px 16px !important; line-height: 1.2 !important; } } @media (max-width: 767px) { body#product .page-content, body#product .product-container, body#product .container { max-width: 100% !important; padding-inline: 8px !important; } } @media (max-width: 480px) { .product-miniature .product-price, .product-price.product-price { font-size: 14px !important; margin: 0 !important; padding: 0 !important; line-height: 1.2 !important; } } body#cart .cart-grid-body .crossselling-products { width: 154% !important; } @media (max-width: 767px) { body#cart .cart-grid-body { position: relative; } body#cart .cart-grid-body .crossselling-products { width: 180vw !important; max-width: 1000vw !important; margin-left: calc(50% - 80vw) !important; margin-right: calc(50% - 1000vw) !important; padding: 0 15px !important; box-sizing: border-box; } } @media (max-width: 767px) { body#cart .crossselling-products .swiper, body#cart .crossselling-products .swiper-container, body#cart .crossselling-products .swiper-wrapper { margin-left: -100px !important; padding-left: 0 !important; } } #loyalty { display: none !important; } /* ============================================================ Beautystore.tn — "Mes points de fidélité" page (fix résiduel) ============================================================ */ /* ========================================================================== FIX CONDITIONNEL : .crossselling-products dans la page panier (#cart) ========================================================================== */ body#cart:has(.cart-items li.cart-item:nth-child(3)) .crossselling-products { margin-top: 10rem !important; } body#cart .crossselling-products .swiper-container, body#cart .crossselling-products .products { max-width: 120% !important; } /* ============================================================================= CARTES CROSS-SELLING — UNIFORMISATION COMPLÈTE Toutes les cartes doivent paraître identiques en hauteur ET en structure interne, même si le contenu diffère (variantes, titre court/long, promo). ============================================================================= */ /* 1. La carte entière : hauteur fixe et identique pour toutes */ body#cart .cart-grid-body .crossselling-products .product-miniature { display: flex !important; flex-direction: column !important; height: 100% !important; min-height: 480px !important; /* hauteur commune forcée */ box-sizing: border-box !important; } /* 2. Le wrapper Swiper doit étirer chaque slide à la même hauteur (indispensable pour que min-height sur .product-miniature ait un effet) */ body#cart .cart-grid-body .crossselling-products .swiper-wrapper { align-items: stretch !important; } body#cart .cart-grid-body .crossselling-products .swiper-slide { display: flex !important; height: auto !important; } body#cart .cart-grid-body .crossselling-products .js-product-miniature-wrapper { display: flex !important; flex-direction: column !important; width: 100% !important; height: auto !important; } /* 3. Zone image : hauteur identique quelle que soit l'image source */ body#cart .cart-grid-body .crossselling-products .thumbnail-container { height: 220px !important; min-height: 220px !important; max-height: 220px !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; flex-shrink: 0 !important; } body#cart .cart-grid-body .crossselling-products .thumbnail-container img { max-height: 100% !important; max-width: 100% !important; width: auto !important; height: auto !important; object-fit: contain !important; } /* 4. Description : occupe tout l'espace restant, pousse le bouton en bas */ body#cart .cart-grid-body .crossselling-products .product-description { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-height: 0 !important; } /* 5. Marque : hauteur fixe (une ligne), même si absente sur certains produits */ body#cart .cart-grid-body .crossselling-products .product-brand { min-height: 18px !important; font-size: 14px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } /* 6. Titre : toujours 2 lignes réservées, tronqué au-delà, donc jamais de décalage entre titre court et titre long */ body#cart .cart-grid-body .crossselling-products .product-title { min-height: 40px !important; margin: 0 0 6px !important; } body#cart .cart-grid-body .crossselling-products .product-title a { display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; line-height: 1.3 !important; } /* 7. Zone variantes couleur : hauteur réservée FIXE, qu'il y en ait ou non (c'est la principale cause de cartes qui "sautent" en hauteur) */ body#cart .cart-grid-body .crossselling-products .products-variants { min-height: 46px !important; max-height: 46px !important; overflow: hidden !important; margin: 0 0 8px !important; } /* Si un produit n'a PAS de variantes, on garde quand même l'espace vide pour que le prix commence toujours à la même hauteur */ body#cart .cart-grid-body .crossselling-products .row.extra-small-gutters:not(:has(.products-variants))::after { content: "" !important; display: block !important; min-height: 46px !important; } /* 8. Prix : toujours à la même position verticale relative (order + hauteur fixe) */ body#cart .cart-grid-body .crossselling-products .product-price-and-shipping { min-height: 40px !important; margin: 4px 0 12px !important; display: flex !important; align-items: baseline !important; flex-wrap: wrap !important; gap: 6px !important; } body#cart .cart-grid-body .crossselling-products .product-price { font-size: 20px !important; font-weight: 700 !important; white-space: nowrap !important; } /* 9. Bouton "Ajouter au panier" : toujours collé en bas de la carte, identique en taille sur toutes les cartes */ body#cart .cart-grid-body .crossselling-products .product-add-cart { margin-top: auto !important; width: 100% !important; } body#cart .cart-grid-body .crossselling-products .add-to-cart, body#cart .cart-grid-body .crossselling-products .btn.btn-product-list { width: 100% !important; height: 44px !important; min-height: 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; } /* 10. Neutraliser toute row/col qui pourrait varier en hauteur */ body#cart .cart-grid-body .crossselling-products .row.extra-small-gutters { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; } /* ========================================================================= RESPONSIVE — même logique, hauteurs adaptées aux écrans plus petits ========================================================================= */ @media (max-width: 992px) { body#cart .cart-grid-body .crossselling-products .product-miniature { min-height: 420px !important; } body#cart .cart-grid-body .crossselling-products .thumbnail-container { height: 180px !important; min-height: 180px !important; max-height: 180px !important; } } @media (max-width: 576px) { body#cart .cart-grid-body .crossselling-products .product-miniature { min-height: 380px !important; } body#cart .cart-grid-body .crossselling-products .thumbnail-container { height: 150px !important; min-height: 150px !important; max-height: 150px !important; } body#cart .cart-grid-body .crossselling-products .product-title a { font-size: 13px !important; } body#cart .cart-grid-body .crossselling-products .product-price { font-size: 16px !important; } } /* ========================================================================== FIX PROGRESSIF : .crossselling-products dans la page panier (#cart) ========================================================================== */ body#cart:has(.cart-items li.cart-item:nth-child(2)):not(:has(.cart-items li.cart-item:nth-child(3))) .crossselling-products { margin-top: 260px !important; } .swiper-container-wrapper .products.swiper-container { padding: 0 !important; } /* ========================================================= BEAUTYSTORE - FIX CARTES PRODUITS MOBILE Grille 2 colonnes + lisibilité texte/prix Limité à id="category" uniquement A coller dans : CSS additionnel du thème (ou dans un fichier custom.css chargé après le thème) ========================================================= */ @media (max-width: 767px) { /* ---------- GRILLE : forcer 2 colonnes propres ---------- */ #category #js-product-list .products.row, #category .products.row.products-grid { display: flex !important; flex-wrap: wrap !important; margin: 0 -6px !important; } #category .js-product-miniature-wrapper { flex: 0 0 50% !important; max-width: 50% !important; width: 50% !important; padding: 6px !important; box-sizing: border-box !important; } /* ---------- CARTE : cadrage propre, hauteur homogène ---------- */ #category .product-miniature { padding: 10px !important; border-radius: 10px !important; display: flex !important; flex-direction: column !important; height: 100% !important; } /* ---------- IMAGE ---------- */ #category .product-miniature .thumbnail-container { margin-bottom: 8px !important; } #category .product-miniature .thumbnail-container img { width: 100% !important; height: auto !important; aspect-ratio: 3 / 4 !important; object-fit: contain !important; } /* ---------- BLOC TEXTE : ordre clair marque > titre > prix ---------- */ #category .product-miniature .product-description { padding: 0 2px !important; } #category .product-miniature .product-brand { font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.02em !important; color: #1a1a1a !important; margin: 0 0 2px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } #category .product-miniature .product-title { margin: 0 0 6px !important; } #category .product-miniature .product-title a { font-size: 12.5px !important; line-height: 1.35 !important; font-weight: 400 !important; color: #1a1a1a !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; min-height: 2.7em !important; /* évite le décalage entre titres courts/longs */ } /* ---------- PRIX : bien visible, jamais coupé ---------- */ #category .product-miniature .product-price-and-shipping { margin: 4px 0 10px !important; order: 4 !important; } #category .product-miniature .product-price { font-size: 16px !important; font-weight: 700 !important; line-height: 1.2 !important; white-space: nowrap !important; } #category .product-miniature .product-price .tnd-unit { font-size: 11px !important; font-weight: 600 !important; margin-left: 2px !important; } /* ---------- VARIANTES COULEUR : compactes ---------- */ #category .product-miniature .products-variants { margin: 0 0 8px !important; } #category .product-miniature .bz-colors-label { font-size: 11px !important; margin-bottom: 3px !important; } #category .product-miniature .variant-links .color { width: 18px !important; height: 18px !important; } /* ---------- BOUTON AJOUTER AU PANIER ---------- */ #category .product-miniature .product-add-cart { margin-top: auto !important; } #category .product-miniature .btn-product-list, #category .product-miniature a.btn-product-list { padding: 9px 6px !important; font-size: 12px !important; font-weight: 600 !important; border-radius: 6px !important; line-height: 1.2 !important; white-space: nowrap !important; } #category .product-miniature .btn-product-list .bag-icon { font-size: 12px !important; } /* ---------- BOUTON WISHLIST : discret, bien placé ---------- */ #category .product-functional-buttons { top: 6px !important; right: 6px !important; } #category .btn-iqitwishlist-add { width: 26px !important; height: 26px !important; background: rgba(255,255,255,0.85) !important; border-radius: 50% !important; } #category .btn-iqitwishlist-add i { font-size: 14px !important; } /* ---------- DESCRIPTION COURTE (masquée par défaut, on s'assure) ---------- */ #category .product-miniature .product-description-short { display: none !important; } } /* Petits mobiles : ajuste encore un peu les tailles */ @media (max-width: 380px) { #category .product-miniature .product-title a { font-size: 12px !important; } #category .product-miniature .product-price { font-size: 15px !important; } #category .product-miniature .btn-product-list { font-size: 11px !important; padding: 8px 4px !important; } } /* ========================================================= SMART IDEAS — style premium cosmétique Badges, prix barré/réduction, effet tap, skeleton loading ========================================================= */ :root { --bs-pink: #e6007e; --bs-pink-soft: #fde3f0; --bs-dark: #1a1a1a; } @media (max-width: 767px) { /* ---------- CARTE : ombre douce premium + transition tap ---------- */ .product-miniature { box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important; transition: transform 0.15s ease, box-shadow 0.15s ease !important; -webkit-tap-highlight-color: transparent !important; } /* ---------- EFFET TAP : retour visuel tactile au clic ---------- */ .product-miniature.bz-tap-active { transform: scale(0.97) !important; box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important; } .product-miniature .thumbnail-container a, .product-miniature .product-title a { -webkit-tap-highlight-color: transparent !important; } /* ---------- BADGES : promo / nouveauté sur l'image ---------- */ .product-miniature .product-flags { display: flex !important; flex-direction: column !important; gap: 4px !important; top: 8px !important; left: 8px !important; } .bz-badge { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; padding: 4px 8px; border-radius: 20px; line-height: 1; box-shadow: 0 1px 4px rgba(0,0,0,0.15); width: fit-content; } .bz-badge-promo { background: var(--bs-pink); color: #fff; } .bz-badge-new { background: var(--bs-dark); color: #fff; } /* ---------- PRIX BARRÉ + % RÉDUCTION ---------- */ .product-miniature .product-price-and-shipping { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: baseline !important; gap: 6px !important; } .bz-price-old { font-size: 12px !important; font-weight: 500 !important; color: #999 !important; text-decoration: line-through !important; order: 2 !important; } .bz-discount-pill { background: var(--bs-pink-soft) !important; color: var(--bs-pink) !important; font-size: 10.5px !important; font-weight: 700 !important; padding: 2px 7px !important; border-radius: 20px !important; line-height: 1.4 !important; order: 3 !important; } .product-miniature .product-price { order: 1 !important; color: var(--bs-pink) !important; } /* ---------- SKELETON LOADING : effet chargement fluide ---------- */ .product-miniature.bz-skeleton .thumbnail-container img { visibility: hidden !important; } .product-miniature.bz-skeleton .thumbnail-container { position: relative !important; background: #f1f1f1 !important; border-radius: 6px !important; overflow: hidden !important; } .product-miniature.bz-skeleton .thumbnail-container::after, .bz-skel-line { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, #f1f1f1 25%, #e9e9e9 37%, #f1f1f1 63% ); background-size: 400% 100%; animation: bz-shimmer 1.4s ease infinite; } .bz-skel-line { position: static; display: block; height: 10px; border-radius: 4px; margin: 6px 0; } @keyframes bz-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } } } /* ============================================================ FIX RESPONSIVE — Bloc "Produits complémentaires" (cross-selling) Corrige : débordement horizontal, cartes coupées, zones grises, titre tronqué, swiper mal calé sur mobile. ============================================================ */ /* 1) Le bloc section ne doit jamais dépasser la largeur de l'écran */ .crossselling-products.block { width: 100%; max-width: 100vw; overflow: hidden; /* empêche le débordement horizontal */ box-sizing: border-box; padding-left: 12px; padding-right: 12px; } /* 2) Titre de section : plus de coupure, retour à la ligne propre */ .crossselling-products .section-title { font-size: 18px; line-height: 1.3; white-space: normal; overflow: visible; text-overflow: unset; margin: 0 0 14px; padding: 0; } /* 3) Le conteneur swiper doit être borné par le parent, jamais plus large */ .crossselling-products .swiper-container-wrapper, .crossselling-products .products.swiper { width: 100%; max-width: 100%; overflow: hidden; /* clip le débordement des slides */ position: relative; box-sizing: border-box; } /* 4) Le wrapper interne de swiper utilise transform pour le scroll, donc il peut être plus large que l'écran : c'est normal, mais le PARENT doit avoir overflow:hidden (fait ci-dessus) */ .crossselling-products .swiper-wrapper { display: flex; align-items: stretch; } /* 5) Slides : UNE SEULE carte visible à la fois sur mobile */ @media (max-width: 767px) { .crossselling-products .swiper-slide { width: 100% !important; /* 1 carte pleine largeur */ max-width: 100%; flex-shrink: 0; box-sizing: border-box; padding-right: 0; } } /* 6) Carte produit : image et textes ne débordent jamais de la carte */ .crossselling-products .product-miniature { width: 100%; box-sizing: border-box; overflow: hidden; } .crossselling-products .thumbnail-container img { max-width: 100%; height: auto; display: block; } /* 7) Titres produit : évite le texte tronqué à gauche par overflow parent */ .crossselling-products .product-title a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal; word-break: break-word; } /* 8) Boutons flèches prev/next : cachés ou repositionnés sur mobile (sur mobile on navigue au swipe tactile, pas aux flèches) */ @media (max-width: 767px) { .crossselling-products .swiper-button-prev, .crossselling-products .swiper-button-next { display: none; } } /* 9) Pagination (points) bien centrée sous les cartes */ .crossselling-products .swiper-pagination { position: static; margin-top: 12px; text-align: center; } /* Mobile only */ @media (max-width: 767px) { body#cart .cart-grid-body .crossselling-products { width: 232% !important; max-width: 1002% !important; margin-top: 60px !important; } } /* 10) Empêche tout élément parent (thème) de forcer un scroll horizontal global sur la page à cause de ce bloc */ html, body { overflow-x: hidden; } /* ============================================================ FIX TABLETTE UNIQUEMENT (768px – 1024px) Ne touche ni le mobile (<768px) ni le desktop (>1024px). Corrige : débordement horizontal du carousel cross-selling, espace vide entre le panier et le carousel, espacement manquant entre le bloc produit/code promo et le récapitulatif. ============================================================ */ @media (min-width: 768px) and (max-width: 1024px) { /* 0) Conteneur global : neutralise le max-width fixe hérité du thème (souvent calé sur desktop) qui cause le débordement horizontal ou les bandes vides sur les côtés en tablette. */ #wrapper, #inner-wrapper.container, .cart-grid-body { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box !important; overflow-x: hidden !important; } /* 1) Bloc cross-selling : jamais plus large que l'écran */ body#cart .cart-grid-body .crossselling-products, body#cart .cart-grid-body .crossselling-products.block { width: 100% !important; max-width: 100% !important; margin-top: 24px !important; margin-left: 0 !important; margin-right: 0 !important; overflow: hidden !important; box-sizing: border-box !important; } .crossselling-products .block-content, .crossselling-products .swiper-container-wrapper, .crossselling-products .products.swiper, .crossselling-products .swiper-container { width: 190% !important; max-width: 190% !important; overflow: hidden !important; margin-left: -45px !important; box-sizing: border-box !important; } /* 2) 2 cartes visibles à la fois sur tablette, jamais tronquées sur le bord droit */ .crossselling-products .swiper-wrapper { justify-content: flex-start; box-sizing: border-box; } .crossselling-products .swiper-slide { width: calc(150% - 8px) !important; max-width: calc(40% - 8px) !important; flex-shrink: 0; box-sizing: border-box !important; margin-right: 16px; } .crossselling-products .swiper-slide:nth-child(2n) { margin-right: 0; } .crossselling-products .js-product-miniature-wrapper { width: 100%; } .crossselling-products .product-miniature { margin: 0 auto; width: 100%; } /* 3) Neutralise l'espace vide entre le résumé panier et le cross-selling (colonnes étirées en flex/grid ou hauteur fantôme laissée par un layout desktop en 2 colonnes) */ .cart-grid-body { display: block !important; } .cart-container { margin-bottom: 0 !important; min-height: 0 !important; height: auto !important; } .cart-grid-right { margin-bottom: 0 !important; min-height: 0 !important; height: auto !important; } .cart-summary { height: auto !important; min-height: 0 !important; } /* 4) Espacement manquant entre le bloc "produit + code promo" et le "RÉCAPITULATIF" en dessous */ .block-promo { margin-top: 24px !important; margin-bottom: 24px !important; padding-bottom: 20px !important; border-bottom: 1px solid #ededed !important; } .cart-summary-products, #cart-subtotal-products { margin-top: 8px !important; } } /* ============================================================================= FIX — Carrousel "Vous aimerez également" (cross-selling), page panier Version PRO - 1 carte PLEINE LARGEUR (100%), pas d'aperçu ============================================================================= */ @media (max-width: 767px) { /* --- CONTENEUR PRINCIPAL --- */ body#cart .cart-grid-body .crossselling-products, body#cart .crossselling-products, body#cart .crossselling-products.block { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; margin-top: 30px !important; margin-bottom: 10px !important; padding: 0 12px !important; box-sizing: border-box !important; overflow: hidden !important; } /* --- TITRE --- */ body#cart .crossselling-products .section-title { font-size: 18px !important; font-weight: 600 !important; line-height: 1.4 !important; margin: 0 0 18px 0 !important; padding: 0 !important; text-align: left !important; color: #1a1a1a !important; letter-spacing: -0.3px !important; } /* --- CONTENEUR SWIPER --- */ body#cart .crossselling-products .swiper, body#cart .crossselling-products .swiper-container, body#cart .crossselling-products .swiper-container-wrapper, body#cart .crossselling-products .products.swiper { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; box-sizing: border-box !important; } /* --- WRAPPER DES SLIDES --- */ body#cart .crossselling-products .swiper-wrapper { display: flex !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: 0px !important; /* PAS D'ESPACE entre les cartes */ width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* --- SLIDE - UNE SEULE CARTE PLEINE LARGEUR (100%) --- */ body#cart .crossselling-products .swiper-slide { box-sizing: border-box !important; width: 100% !important; /* PLEINE LARGEUR */ max-width: 100% !important; min-width: 100% !important; flex: 0 0 100% !important; /* 1 carte = 100% de l'écran */ margin: 0 !important; padding: 0 !important; height: auto !important; display: flex !important; align-items: stretch !important; } /* --- WRAPPER DU PRODUIT --- */ body#cart .crossselling-products .js-product-miniature-wrapper { box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; flex: none !important; margin: 0 !important; padding: 0 !important; height: auto !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } /* --- FLÈCHES DE NAVIGATION MASQUÉES --- */ body#cart .crossselling-products .swiper-button-prev, body#cart .crossselling-products .swiper-button-next { display: none !important; } /* --- PAGINATION --- */ body#cart .crossselling-products .swiper-pagination { position: static !important; margin-top: 20px !important; text-align: center !important; } body#cart .crossselling-products .swiper-pagination-bullet { background: #d1d1d1 !important; opacity: 1 !important; width: 8px !important; height: 8px !important; margin: 0 4px !important; border-radius: 50% !important; } body#cart .crossselling-products .swiper-pagination-bullet-active { background: #e6007e !important; width: 20px !important; border-radius: 4px !important; } /* ======================================================= CARTE PRODUIT - Design épuré et professionnel ======================================================= */ body#cart .crossselling-products .product-miniature { width: 100% !important; padding: 14px !important; display: flex !important; flex-direction: column !important; height: 100% !important; background: #ffffff !important; border: 1px solid #e8e8e8 !important; border-radius: 16px !important; box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important; transition: box-shadow 0.25s ease !important; overflow: hidden !important; } body#cart .crossselling-products .product-miniature:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.10) !important; } /* --- IMAGE PRODUIT --- */ body#cart .crossselling-products .thumbnail-container { position: relative !important; width: 100% !important; height: 200px !important; max-height: 200px !important; display: block !important; overflow: hidden !important; border-radius: 12px !important; background: #f7f7f7 !important; margin: 0 0 12px 0 !important; padding: 0 !important; } body#cart .crossselling-products .thumbnail-container a { display: block !important; width: 100% !important; height: 100% !important; } body#cart .crossselling-products .thumbnail-container img { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; display: block !important; } /* --- ACTIONS (wishlist, etc.) --- */ body#cart .crossselling-products .product-functional-buttons { top: 10px !important; right: 10px !important; } body#cart .crossselling-products .btn-iqitwishlist-add { width: 32px !important; height: 32px !important; background: rgba(255,255,255,0.92) !important; border-radius: 50% !important; box-shadow: 0 2px 8px rgba(0,0,0,0.10) !important; } body#cart .crossselling-products .btn-iqitwishlist-add i { font-size: 14px !important; } /* --- DESCRIPTION PRODUIT --- */ body#cart .crossselling-products .product-description { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; flex: 1 1 auto !important; min-width: 0 !important; padding: 0 !important; } /* --- MARQUE --- */ body#cart .crossselling-products .product-brand { font-size: 10px !important; font-weight: 600 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: #888888 !important; margin: 0 0 3px 0 !important; text-align: center !important; width: 100% !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* --- TITRE PRODUIT --- */ body#cart .crossselling-products .product-title { margin: 0 0 6px 0 !important; width: 100% !important; min-width: 0 !important; text-align: center !important; } body#cart .crossselling-products .product-title a { font-size: 13px !important; line-height: 1.4 !important; font-weight: 500 !important; color: #1a1a1a !important; text-align: center !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; word-break: break-word !important; min-height: 2.6em !important; text-decoration: none !important; } /* --- ÉLÉMENTS MASQUÉS --- */ body#cart .crossselling-products .products-variants, body#cart .crossselling-products .product-reference { display: none !important; } /* --- PRIX --- */ body#cart .crossselling-products .product-price-and-shipping { display: flex !important; flex-wrap: wrap !important; align-items: baseline !important; justify-content: center !important; gap: 4px !important; margin: 0 0 12px 0 !important; width: 100% !important; text-align: center !important; } body#cart .crossselling-products .product-price { font-size: 17px !important; font-weight: 700 !important; color: #e6007e !important; text-align: center !important; white-space: nowrap !important; } body#cart .crossselling-products .product-price .tnd-unit { font-size: 11px !important; font-weight: 600 !important; margin-left: 2px !important; } /* --- PRIX BARRÉ (réduction) --- */ body#cart .crossselling-products .regular-price { font-size: 13px !important; color: #999999 !important; text-decoration: line-through !important; margin-right: 4px !important; } /* ======================================================= BOUTON AJOUTER AU PANIER - Taille optimale ======================================================= */ body#cart .crossselling-products .product-add-cart { width: 100% !important; margin-top: auto !important; padding-top: 4px !important; } body#cart .crossselling-products .product-add-cart .add-to-cart, body#cart .crossselling-products .product-add-cart .btn.btn-product-list, body#cart .crossselling-products a.add-to-cart, body#cart .crossselling-products button.add-to-cart, body#cart .crossselling-products .btn.btn-product-list.add-to-cart { width: 100% !important; max-width: 100% !important; height: 42px !important; min-height: 42px !important; padding: 0 16px !important; margin: 0 !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.3px !important; text-transform: uppercase !important; border-radius: 8px !important; border: none !important; background-color: #1a1a1a !important; background-image: none !important; color: #ffffff !important; display: flex !important; align-items: center !important; justify-content: center !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; transition: all 0.2s ease-in-out !important; cursor: pointer !important; box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important; } /* --- HOVER / ACTIVE --- */ body#cart .crossselling-products .add-to-cart:hover { background-color: #333333 !important; box-shadow: 0 4px 12px rgba(0,0,0,0.18) !important; transform: translateY(-1px) !important; } body#cart .crossselling-products .add-to-cart:active { transform: translateY(0px) !important; opacity: 0.85 !important; } /* --- MASQUER LES ICÔNES INUTILES --- */ body#cart .crossselling-products .add-to-cart .bag-icon, body#cart .crossselling-products .add-to-cart .spinner-icon { display: none !important; } /* --- BOUTON PRODUIT ÉPUISÉ --- */ body#cart .crossselling-products .product-add-cart .btn-product-list[disabled] { opacity: 0.5 !important; cursor: not-allowed !important; background-color: #999999 !important; box-shadow: none !important; } /* ======================================================= AJUSTEMENT POUR LES PETITS ÉCRANS (< 400px) ======================================================= */ @media (max-width: 399px) { body#cart .crossselling-products .thumbnail-container { height: 160px !important; max-height: 160px !important; } body#cart .crossselling-products .product-title a { font-size: 12px !important; } body#cart .crossselling-products .product-price { font-size: 15px !important; } body#cart .crossselling-products .add-to-cart { height: 38px !important; min-height: 38px !important; font-size: 11px !important; } } /* ======================================================= AJUSTEMENT POUR LES GRANDS MOBILES (> 600px) ======================================================= */ @media (min-width: 600px) and (max-width: 767px) { body#cart .crossselling-products .thumbnail-container { height: 240px !important; max-height: 240px !important; } body#cart .crossselling-products .product-title a { font-size: 14px !important; } body#cart .crossselling-products .product-price { font-size: 19px !important; } body#cart .crossselling-products .add-to-cart { height: 46px !important; min-height: 46px !important; font-size: 13px !important; } } } /* ============================================================================= FIX — Carrousel "Vous aimerez également" (cross-selling), page panier Version PRO - 1 carte PLEINE LARGEUR (100%) - Mobile & Tablette ============================================================================= */ @media (max-width: 1024px) { /* --- CONTENEUR PRINCIPAL --- */ body#cart .cart-grid-body .crossselling-products, body#cart .crossselling-products, body#cart .crossselling-products.block { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; margin-top: 30px !important; margin-bottom: 10px !important; padding: 0 16px !important; box-sizing: border-box !important; overflow: hidden !important; } /* --- TITRE --- */ body#cart .crossselling-products .section-title { font-size: 20px !important; font-weight: 600 !important; line-height: 1.4 !important; margin: 0 0 20px 0 !important; padding: 0 !important; text-align: left !important; color: #1a1a1a !important; letter-spacing: -0.3px !important; } /* --- CONTENEUR SWIPER --- */ body#cart .crossselling-products .swiper, body#cart .crossselling-products .swiper-container, body#cart .crossselling-products .swiper-container-wrapper, body#cart .crossselling-products .products.swiper { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; box-sizing: border-box !important; } /* --- WRAPPER DES SLIDES --- */ body#cart .crossselling-products .swiper-wrapper { display: flex !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: 0px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* --- SLIDE - UNE SEULE CARTE PLEINE LARGEUR (100%) --- */ body#cart .crossselling-products .swiper-slide { box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; min-width: 100% !important; flex: 0 0 100% !important; margin: 0 !important; padding: 0 !important; height: auto !important; display: flex !important; align-items: stretch !important; } /* --- WRAPPER DU PRODUIT --- */ body#cart .crossselling-products .js-product-miniature-wrapper { box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; flex: none !important; margin: 0 !important; padding: 0 !important; height: auto !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } /* --- FLÈCHES DE NAVIGATION MASQUÉES --- */ body#cart .crossselling-products .swiper-button-prev, body#cart .crossselling-products .swiper-button-next { display: none !important; } /* --- PAGINATION --- */ body#cart .crossselling-products .swiper-pagination { position: static !important; margin-top: 24px !important; text-align: center !important; } body#cart .crossselling-products .swiper-pagination-bullet { background: #d1d1d1 !important; opacity: 1 !important; width: 10px !important; height: 10px !important; margin: 0 5px !important; border-radius: 50% !important; } body#cart .crossselling-products .swiper-pagination-bullet-active { background: #e6007e !important; width: 24px !important; border-radius: 5px !important; } /* ======================================================= CARTE PRODUIT - Design épuré et professionnel ======================================================= */ body#cart .crossselling-products .product-miniature { width: 100% !important; padding: 16px !important; display: flex !important; flex-direction: column !important; height: 100% !important; background: #ffffff !important; border: 1px solid #e8e8e8 !important; border-radius: 16px !important; box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important; transition: box-shadow 0.25s ease !important; overflow: hidden !important; } body#cart .crossselling-products .product-miniature:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.10) !important; } /* --- IMAGE PRODUIT --- */ body#cart .crossselling-products .thumbnail-container { position: relative !important; width: 100% !important; height: 220px !important; max-height: 220px !important; display: block !important; overflow: hidden !important; border-radius: 12px !important; background: #f7f7f7 !important; margin: 0 0 14px 0 !important; padding: 0 !important; } body#cart .crossselling-products .thumbnail-container a { display: block !important; width: 100% !important; height: 100% !important; } body#cart .crossselling-products .thumbnail-container img { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; display: block !important; } /* --- ACTIONS (wishlist, etc.) --- */ body#cart .crossselling-products .product-functional-buttons { top: 10px !important; right: 10px !important; } body#cart .crossselling-products .btn-iqitwishlist-add { width: 34px !important; height: 34px !important; background: rgba(255,255,255,0.92) !important; border-radius: 50% !important; box-shadow: 0 2px 8px rgba(0,0,0,0.10) !important; } body#cart .crossselling-products .btn-iqitwishlist-add i { font-size: 15px !important; } /* --- DESCRIPTION PRODUIT --- */ body#cart .crossselling-products .product-description { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; flex: 1 1 auto !important; min-width: 0 !important; padding: 0 !important; } /* --- MARQUE --- */ body#cart .crossselling-products .product-brand { font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: #888888 !important; margin: 0 0 4px 0 !important; text-align: center !important; width: 100% !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* --- TITRE PRODUIT --- */ body#cart .crossselling-products .product-title { margin: 0 0 8px 0 !important; width: 100% !important; min-width: 0 !important; text-align: center !important; } body#cart .crossselling-products .product-title a { font-size: 14px !important; line-height: 1.4 !important; font-weight: 500 !important; color: #1a1a1a !important; text-align: center !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; word-break: break-word !important; min-height: 2.6em !important; text-decoration: none !important; } /* --- ÉLÉMENTS MASQUÉS --- */ body#cart .crossselling-products .products-variants, body#cart .crossselling-products .product-reference { display: none !important; } /* --- PRIX --- */ body#cart .crossselling-products .product-price-and-shipping { display: flex !important; flex-wrap: wrap !important; align-items: baseline !important; justify-content: center !important; gap: 6px !important; margin: 0 0 14px 0 !important; width: 100% !important; text-align: center !important; } body#cart .crossselling-products .product-price { font-size: 18px !important; font-weight: 700 !important; color: #e6007e !important; text-align: center !important; white-space: nowrap !important; } body#cart .crossselling-products .product-price .tnd-unit { font-size: 12px !important; font-weight: 600 !important; margin-left: 2px !important; } /* --- PRIX BARRÉ (réduction) --- */ body#cart .crossselling-products .regular-price { font-size: 14px !important; color: #999999 !important; text-decoration: line-through !important; margin-right: 6px !important; } /* ======================================================= BOUTON AJOUTER AU PANIER - Taille optimale ======================================================= */ body#cart .crossselling-products .product-add-cart { width: 100% !important; margin-top: auto !important; padding-top: 4px !important; } body#cart .crossselling-products .product-add-cart .add-to-cart, body#cart .crossselling-products .product-add-cart .btn.btn-product-list, body#cart .crossselling-products a.add-to-cart, body#cart .crossselling-products button.add-to-cart, body#cart .crossselling-products .btn.btn-product-list.add-to-cart { width: 100% !important; max-width: 100% !important; height: 44px !important; min-height: 44px !important; padding: 0 20px !important; margin: 0 !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0.3px !important; text-transform: uppercase !important; border-radius: 8px !important; border: none !important; background-color: #1a1a1a !important; background-image: none !important; color: #ffffff !important; display: flex !important; align-items: center !important; justify-content: center !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; transition: all 0.2s ease-in-out !important; cursor: pointer !important; box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important; } /* --- HOVER / ACTIVE --- */ body#cart .crossselling-products .add-to-cart:hover { background-color: #333333 !important; box-shadow: 0 4px 12px rgba(0,0,0,0.18) !important; transform: translateY(-2px) !important; } body#cart .crossselling-products .add-to-cart:active { transform: translateY(0px) !important; opacity: 0.85 !important; } /* --- MASQUER LES ICÔNES INUTILES --- */ body#cart .crossselling-products .add-to-cart .bag-icon, body#cart .crossselling-products .add-to-cart .spinner-icon { display: none !important; } /* --- BOUTON PRODUIT ÉPUISÉ --- */ body#cart .crossselling-products .product-add-cart .btn-product-list[disabled] { opacity: 0.5 !important; cursor: not-allowed !important; background-color: #999999 !important; box-shadow: none !important; } /* ======================================================= AJUSTEMENT POUR MOBILES (< 480px) ======================================================= */ @media (max-width: 479px) { body#cart .crossselling-products { padding: 0 12px !important; } body#cart .crossselling-products .section-title { font-size: 17px !important; margin-bottom: 16px !important; } body#cart .crossselling-products .thumbnail-container { height: 180px !important; max-height: 180px !important; } body#cart .crossselling-products .product-miniature { padding: 12px !important; } body#cart .crossselling-products .product-title a { font-size: 12px !important; } body#cart .crossselling-products .product-price { font-size: 16px !important; } body#cart .crossselling-products .add-to-cart { height: 40px !important; min-height: 40px !important; font-size: 11px !important; padding: 0 12px !important; } body#cart .crossselling-products .swiper-pagination-bullet { width: 8px !important; height: 8px !important; margin: 0 4px !important; } body#cart .crossselling-products .swiper-pagination-bullet-active { width: 18px !important; } } /* ======================================================= AJUSTEMENT POUR TABLETTES (768px - 1024px) ======================================================= */ @media (min-width: 768px) and (max-width: 1024px) { body#cart .crossselling-products { padding: 0 20px !important; } body#cart .crossselling-products .section-title { font-size: 22px !important; margin-bottom: 24px !important; } body#cart .crossselling-products .thumbnail-container { height: 280px !important; max-height: 280px !important; } body#cart .crossselling-products .product-miniature { padding: 20px !important; border-radius: 20px !important; } body#cart .crossselling-products .product-title a { font-size: 16px !important; } body#cart .crossselling-products .product-price { font-size: 20px !important; } body#cart .crossselling-products .add-to-cart { height: 50px !important; min-height: 50px !important; font-size: 14px !important; border-radius: 10px !important; } body#cart .crossselling-products .product-brand { font-size: 12px !important; } body#cart .crossselling-products .swiper-pagination-bullet { width: 12px !important; height: 12px !important; margin: 0 6px !important; } body#cart .crossselling-products .swiper-pagination-bullet-active { width: 28px !important; } body#cart .crossselling-products .btn-iqitwishlist-add { width: 38px !important; height: 38px !important; } body#cart .crossselling-products .btn-iqitwishlist-add i { font-size: 17px !important; } } /* ======================================================= AJUSTEMENT POUR TABLETTES PAYSAGE (1024px spécifique) ======================================================= */ @media (min-width: 1024px) and (max-width: 1199px) { body#cart .crossselling-products { padding: 0 24px !important; } body#cart .crossselling-products .thumbnail-container { height: 300px !important; max-height: 300px !important; } body#cart .crossselling-products .add-to-cart { height: 48px !important; min-height: 48px !important; font-size: 13px !important; } } } /* ============================================================================= FIX — PAGE PANIER 90% DE LARGEUR SUR MOBILE & TABLETTE Sans modifier la taille du bouton "Commander" ============================================================================= */ /* ============================================================ 1. PAGE 90% DE LARGEUR SUR MOBILE (< 768px) ============================================================ */ @media (max-width: 767px) { /* --- CONTENEUR PRINCIPAL --- */ body#cart #inner-wrapper.container { padding-left: 5% !important; padding-right: 5% !important; max-width: 100% !important; width: 100% !important; } /* --- CONTENU PRINCIPAL --- */ body#cart #content-wrapper { padding-left: 0 !important; padding-right: 0 !important; max-width: 100% !important; width: 100% !important; } /* --- SECTION MAIN --- */ body#cart section#main { padding-left: 0 !important; padding-right: 0 !important; max-width: 100% !important; width: 100% !important; } /* --- PAGE TITLE --- */ body#cart .page-title { padding-left: 0 !important; padding-right: 0 !important; font-size: 18px !important; margin: 10px 0 16px 0 !important; } /* --- CART GRID --- */ body#cart .cart-grid { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; max-width: 100% !important; width: 100% !important; } /* --- CART GRID BODY --- */ body#cart .cart-grid-body { padding-left: 0 !important; padding-right: 0 !important; max-width: 100% !important; width: 100% !important; flex: 0 0 100% !important; } /* --- CART GRID RIGHT --- */ body#cart .cart-grid-right { padding-left: 0 !important; padding-right: 0 !important; max-width: 100% !important; width: 100% !important; flex: 0 0 100% !important; margin-top: 16px !important; } /* --- CART CONTAINER --- */ body#cart .cart-container { padding-left: 0 !important; padding-right: 0 !important; max-width: 100% !important; width: 100% !important; } /* --- CART OVERVIEW --- */ body#cart .cart-overview { padding-left: 0 !important; padding-right: 0 !important; max-width: 100% !important; width: 100% !important; } /* --- CART ITEMS --- */ body#cart .cart-items { padding-left: 0 !important; padding-right: 0 !important; max-width: 100% !important; width: 100% !important; } body#cart .cart-item { padding: 12px 0 !important; border-bottom: 1px solid #e8e8e8 !important; } body#cart .cart-item:last-child { border-bottom: none !important; } /* --- PRODUCT LINE GRID --- */ body#cart .product-line-grid { padding-left: 0 !important; padding-right: 0 !important; max-width: 100% !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } /* --- PRODUCT LINE BODY --- */ body#cart .product-line-grid-body { padding-left: 0 !important; padding-right: 0 !important; max-width: 100% !important; width: 100% !important; flex: 0 0 100% !important; } body#cart .product-line-grid-body .row { margin-left: 0 !important; margin-right: 0 !important; } body#cart .product-line-grid-body .col.product-image { flex: 0 0 80px !important; max-width: 80px !important; padding-left: 0 !important; } body#cart .product-line-grid-body .col-9 { flex: 1 !important; max-width: 100% !important; padding-right: 0 !important; } body#cart .product-line-grid-body .label { font-size: 13px !important; font-weight: 500 !important; } /* --- PRODUCT LINE ACTIONS --- */ body#cart .product-line-grid-right { padding-left: 0 !important; padding-right: 0 !important; max-width: 100% !important; width: 100% !important; flex: 0 0 100% !important; margin-top: 8px !important; } body#cart .product-line-grid-right .row { margin-left: 0 !important; margin-right: 0 !important; justify-content: space-between !important; } body#cart .product-line-grid-right .unit-price { font-size: 12px !important; color: #888 !important; } body#cart .product-line-grid-right .qty { flex: 0 0 auto !important; } body#cart .product-line-grid-right .qty .form-control { height: 32px !important; width: 50px !important; font-size: 13px !important; text-align: center !important; } body#cart .product-line-grid-right .price { font-size: 15px !important; font-weight: 600 !important; color: #e6007e !important; } /* --- CART SUMMARY --- */ body#cart .cart-summary { padding: 16px !important; max-width: 100% !important; width: 100% !important; border-radius: 12px !important; background: #ffffff !important; box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important; border: 1px solid #e8e8e8 !important; } body#cart .cart-summary .card-body { padding: 8px 0 !important; } body#cart .cart-summary .cart-summary-line { font-size: 13px !important; padding: 6px 0 !important; } body#cart .cart-summary .cart-total { font-size: 16px !important; padding: 10px 0 !important; } body#cart .cart-summary .cart-total .label { font-size: 15px !important; font-weight: 600 !important; } body#cart .cart-summary .cart-total .value { font-size: 17px !important; font-weight: 700 !important; color: #e6007e !important; } /* --- VOUCHER --- */ body#cart .block-promo { padding: 8px 0 !important; } body#cart .cart-voucher .form-control { height: 38px !important; font-size: 13px !important; } body#cart .cart-voucher .btn { height: 38px !important; font-size: 13px !important; padding: 0 14px !important; } /* --- CHECKOUT BUTTON - TAILLE CONSERVÉE --- */ body#cart .checkout .btn { font-size: 15px !important; padding: 12px !important; height: auto !important; border-radius: 10px !important; } /* --- CONTINUE SHOPPING --- */ body#cart .btn-secondary.mt-3 { margin-left: 0 !important; font-size: 13px !important; padding: 8px 16px !important; } /* --- LOYALTY POINTS --- */ body#cart [data-js-has-points] { font-size: 12px !important; padding: 0 !important; } /* --- CROSS-SELLING (garder le travail déjà fait) --- */ body#cart .crossselling-products { padding-left: 0 !important; padding-right: 0 !important; margin-top: 20px !important; } /* --- NOTIFICATIONS --- */ body#cart #notifications { padding-left: 0 !important; padding-right: 0 !important; } } /* ============================================================ 2. TABLETTE (< 1024px) - 90% DE LARGEUR ============================================================ */ @media (min-width: 768px) and (max-width: 1024px) { /* --- CONTENEUR PRINCIPAL --- */ body#cart #inner-wrapper.container { padding-left: 5% !important; padding-right: 5% !important; max-width: 100% !important; width: 100% !important; } /* --- CART GRID --- */ body#cart .cart-grid-body { padding-left: 0 !important; padding-right: 12px !important; flex: 0 0 65% !important; max-width: 65% !important; } body#cart .cart-grid-right { flex: 0 0 35% !important; max-width: 35% !important; padding-left: 0 !important; } /* --- PRODUCT LINE --- */ body#cart .product-line-grid-body .label { font-size: 14px !important; } body#cart .product-line-grid-right .price { font-size: 16px !important; } /* --- CART SUMMARY --- */ body#cart .cart-summary { padding: 16px !important; } /* --- CHECKOUT BUTTON - TAILLE CONSERVÉE --- */ body#cart .checkout .btn { font-size: 16px !important; padding: 12px 20px !important; } /* --- CONTINUE SHOPPING --- */ body#cart .btn-secondary.mt-3 { margin-left: 0 !important; } /* --- CROSS-SELLING --- */ body#cart .crossselling-products { padding-left: 0 !important; padding-right: 0 !important; } } /* ============================================================ 3. TRÈS PETITS ÉCRANS (< 480px) ============================================================ */ @media (max-width: 479px) { /* --- CONTENEUR PRINCIPAL --- */ body#cart #inner-wrapper.container { padding-left: 4% !important; padding-right: 4% !important; } /* --- PAGE TITLE --- */ body#cart .page-title { font-size: 16px !important; } /* --- PRODUCT LINE --- */ body#cart .product-line-grid-body .col.product-image { flex: 0 0 65px !important; max-width: 65px !important; } body#cart .product-line-grid-body .label { font-size: 12px !important; } body#cart .product-line-grid-right .qty .form-control { height: 28px !important; width: 42px !important; font-size: 12px !important; } body#cart .product-line-grid-right .price { font-size: 14px !important; } /* --- CART SUMMARY --- */ body#cart .cart-summary { padding: 12px !important; } body#cart .cart-summary .cart-total .label { font-size: 14px !important; } body#cart .cart-summary .cart-total .value { font-size: 16px !important; } /* --- CHECKOUT BUTTON - TAILLE CONSERVÉE --- */ body#cart .checkout .btn { font-size: 14px !important; padding: 10px !important; } /* --- CONTINUE SHOPPING --- */ body#cart .btn-secondary.mt-3 { font-size: 12px !important; padding: 6px 12px !important; } } body#cart .checkout.cart-detailed-actions .btn-primary, body#cart .cart-detailed-actions a.btn.btn-primary { position: relative !important; overflow: hidden !important; text-indent: -9999px !important; white-space: nowrap !important; color: transparent !important; } /* Le ::before devient un overlay qui recouvre tout le bouton, avec son propre texte repositionné et son propre texte lisible — indépendant de tout text-indent/font-size hérité du parent. */ body#cart .checkout.cart-detailed-actions .btn-primary::before, body#cart .cart-detailed-actions a.btn.btn-primary::before { position: absolute !important; inset: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; text-indent: 0 !important; font-size: 15px !important; line-height: normal !important; color: #ffffff !important; white-space: normal !important; text-align: center !important; padding: 0 12px !important; } /* ============================================================================= FIX FINAL — neutralise le margin-top desktop (420px/260px/10rem) du cross-selling qui créait un grand vide sur mobile ============================================================================= */ @media (max-width: 767px) { body#cart .cart-grid-body .crossselling-products, body#cart:has(.cart-items li.cart-item:nth-child(2)) .crossselling-products, body#cart:has(.cart-items li.cart-item:nth-child(3)) .crossselling-products, body#cart:has(.cart-items li.cart-item:nth-child(2)):not(:has(.cart-items li.cart-item:nth-child(3))) .crossselling-products { margin-top: 30px !important; } } /* ============================================================================= FIX FINAL — neutralise le margin-top desktop (420px/260px/10rem) du cross-selling qui créait un grand vide sur TABLETTE aussi ============================================================================= */ @media (min-width: 768px) and (max-width: 1024px) { body#cart .cart-grid-body .crossselling-products, body#cart:has(.cart-items li.cart-item:nth-child(2)) .crossselling-products, body#cart:has(.cart-items li.cart-item:nth-child(3)) .crossselling-products, body#cart:has(.cart-items li.cart-item:nth-child(2)):not(:has(.cart-items li.cart-item:nth-child(3))) .crossselling-products { margin-top: 4px !important; } } /* ============================================================================= FIX — ajoute un espace entre la liste de produits du panier et le bloc "Avez-vous un code promo ?" ============================================================================= */ @media (max-width: 1024px) { .cart-items { margin-bottom: 45px !important; /* ajuste cette valeur selon l'espace voulu */ } .block-promo { margin-top: 8px !important; } } /* ============================================================================= FIX — Page panier en pleine largeur sur tablette (768px–1024px) ============================================================================= */ @media (min-width: 768px) and (max-width: 1024px) { body#cart #inner-wrapper.container, body#cart #content-wrapper, body#cart section#main, body#cart .cart-grid { max-width: 100% !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 16px !important; padding-right: 16px !important; box-sizing: border-box !important; } body#cart .cart-grid-body, body#cart .cart-grid-right { padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } html body#cart, body#cart { overflow-x: hidden !important; max-width: 100vw !important; } } /* ============================================================================= FIX — PAGE D'ACCUEIL (body#index) CARROUSEL PRODUITS : 1 PRODUIT PAR SLIDE SUR MOBILE ============================================================================= */ /* ============================================================ 1. MOBILE — 1 PRODUIT PAR SLIDE ============================================================ */ @media (max-width: 767px) { body#index .elementor-products-carousel .swiper-container, body#index .elementor-products-carousel .swiper, body#index .elementor-products-carousel .swiper-wrapper { overflow: visible !important; } /* --- Chaque slide occupe 100% de la largeur --- */ body#index .elementor-products-carousel .swiper-slide { width: 100% !important; max-width: 100% !important; min-width: 100% !important; flex: 0 0 100% !important; margin-right: 0 !important; padding: 0 6px !important; box-sizing: border-box !important; } /* --- La carte produit prend toute la largeur --- */ body#index .elementor-products-carousel .product-miniature-wrapper { width: 100% !important; max-width: 100% !important; flex: none !important; margin: 0 !important; padding: 0 !important; } body#index .elementor-products-carousel .product-miniature { width: 100% !important; max-width: 100% !important; padding: 14px !important; min-height: 460px !important; margin: 0 auto !important; border-radius: 12px !important; } /* --- Image --- */ body#index .elementor-products-carousel .thumbnail-container { height: 220px !important; max-height: 220px !important; min-height: 220px !important; width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #f7f5f4 !important; border-radius: 8px !important; overflow: hidden !important; } body#index .elementor-products-carousel .thumbnail-container img { width: 100% !important; height: 100% !important; object-fit: contain !important; display: block !important; } /* --- Marque --- */ body#index .elementor-products-carousel .product-brand { font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; color: #888888 !important; margin-bottom: 2px !important; } /* --- Titre --- */ body#index .elementor-products-carousel .product-title { margin-bottom: 6px !important; } body#index .elementor-products-carousel .product-title a { font-size: 14px !important; font-weight: 500 !important; line-height: 1.4 !important; color: #1a1a1a !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; min-height: 2.8em !important; } /* --- Couleurs --- */ body#index .elementor-products-carousel .products-variants { margin-bottom: 8px !important; } body#index .elementor-products-carousel .bz-colors-label { font-size: 11px !important; color: #888888 !important; margin-bottom: 4px !important; } body#index .elementor-products-carousel .variant-links .color { width: 20px !important; height: 20px !important; border-radius: 6px !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; } /* --- Prix --- */ body#index .elementor-products-carousel .product-price-and-shipping { margin: 4px 0 12px 0 !important; display: flex !important; flex-wrap: wrap !important; align-items: baseline !important; gap: 6px !important; } body#index .elementor-products-carousel .product-price { font-size: 18px !important; font-weight: 700 !important; color: #e6007e !important; } body#index .elementor-products-carousel .regular-price { font-size: 13px !important; color: #999999 !important; text-decoration: line-through !important; } body#index .elementor-products-carousel .discount { font-size: 11px !important; font-weight: 700 !important; color: #e6007e !important; background: #fde3f0 !important; padding: 2px 8px !important; border-radius: 12px !important; border: none !important; } /* --- Bouton Ajouter --- */ body#index .elementor-products-carousel .product-add-cart { margin-top: auto !important; padding-top: 4px !important; } body#index .elementor-products-carousel .add-to-cart, body#index .elementor-products-carousel .btn-product-list { width: 100% !important; height: 44px !important; min-height: 44px !important; padding: 0 16px !important; font-size: 13px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.3px !important; border-radius: 10px !important; border: 1.5px solid #1a1a1a !important; background: transparent !important; color: #1a1a1a !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.3s ease !important; } body#index .elementor-products-carousel .add-to-cart:hover { background: #1a1a1a !important; color: #ffffff !important; transform: translateY(-2px) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; } /* --- Cacher l'icône du panier dans le bouton --- */ body#index .elementor-products-carousel .add-to-cart .bag-icon, body#index .elementor-products-carousel .add-to-cart .spinner-icon { display: none !important; } /* --- Flèches de navigation --- */ body#index .elementor-products-carousel .elementor-swiper-button { top: 110px !important; transform: translateY(0) !important; width: 32px !important; height: 32px !important; background: rgba(255, 255, 255, 0.92) !important; border-radius: 50% !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10) !important; z-index: 5 !important; border: 1px solid #e8e8e8 !important; } body#index .elementor-products-carousel .elementor-swiper-button-prev { left: 4px !important; } body#index .elementor-products-carousel .elementor-swiper-button-next { right: 4px !important; } body#index .elementor-products-carousel .elementor-swiper-button::before { display: none !important; } body#index .elementor-products-carousel .elementor-swiper-button-prev::after { content: '' !important; display: block !important; width: 10px !important; height: 10px !important; border-left: 2px solid #1a1a1a !important; border-bottom: 2px solid #1a1a1a !important; transform: rotate(45deg) !important; margin-left: 4px !important; } body#index .elementor-products-carousel .elementor-swiper-button-next::after { content: '' !important; display: block !important; width: 10px !important; height: 10px !important; border-right: 2px solid #1a1a1a !important; border-top: 2px solid #1a1a1a !important; transform: rotate(45deg) !important; margin-right: 4px !important; } body#index .elementor-products-carousel .elementor-swiper-button.swiper-button-disabled { opacity: 0.2 !important; pointer-events: none !important; } } /* ============================================================ 2. TRÈS PETITS MOBILES (< 480px) — PAGE D'ACCUEIL ============================================================ */ @media (max-width: 479px) { body#index .elementor-products-carousel .product-miniature { padding: 10px !important; min-height: 400px !important; } body#index .elementor-products-carousel .thumbnail-container { height: 180px !important; max-height: 180px !important; min-height: 180px !important; } body#index .elementor-products-carousel .product-title a { font-size: 13px !important; } body#index .elementor-products-carousel .product-price { font-size: 16px !important; } body#index .elementor-products-carousel .add-to-cart { height: 38px !important; min-height: 38px !important; font-size: 12px !important; padding: 0 12px !important; } body#index .elementor-products-carousel .variant-links .color { width: 16px !important; height: 16px !important; } body#index .elementor-products-carousel .elementor-swiper-button { top: 90px !important; width: 28px !important; height: 28px !important; } } /* ============================================================ 3. TABLETTE (768px - 1024px) — 2 PRODUITS PAR SLIDE ============================================================ */ @media (min-width: 768px) and (max-width: 1024px) { body#index .elementor-products-carousel .swiper-slide { width: calc(50% - 8px) !important; max-width: calc(50% - 8px) !important; min-width: calc(50% - 8px) !important; flex: 0 0 calc(50% - 8px) !important; margin-right: 8px !important; padding: 0 4px !important; } body#index .elementor-products-carousel .swiper-slide:nth-child(2n) { margin-right: 0 !important; } body#index .elementor-products-carousel .product-miniature { padding: 12px !important; min-height: 400px !important; } body#index .elementor-products-carousel .thumbnail-container { height: 200px !important; max-height: 200px !important; min-height: 200px !important; } body#index .elementor-products-carousel .product-title a { font-size: 13px !important; } body#index .elementor-products-carousel .product-price { font-size: 16px !important; } body#index .elementor-products-carousel .add-to-cart { height: 38px !important; min-height: 38px !important; font-size: 12px !important; } body#index .elementor-products-carousel .elementor-swiper-button { top: 100px !important; transform: translateY(0) !important; width: 34px !important; height: 34px !important; } body#index .elementor-products-carousel .elementor-swiper-button-prev { left: 2px !important; } body#index .elementor-products-carousel .elementor-swiper-button-next { right: 2px !important; } } /* ============================================================ 4. FORCER LE SWIPER À DÉFILER PAR 1 PRODUIT SUR MOBILE ============================================================ */ @media (max-width: 767px) { /* Forcer le swiper à prendre toute la largeur */ body#index .elementor-products-carousel .swiper-container, body#index .elementor-products-carousel .swiper-wrapper { width: 100% !important; overflow: visible !important; } /* Désactiver le scroll snap natif qui peut interférer */ body#index .elementor-products-carousel .swiper-slide { scroll-snap-align: none !important; } } .autocomplete-suggestions .col-shop { display: none !important; } .cart-detailed-actions .btn-lg { padding-top: 20px; padding-bottom: 20px; /* ou fixer une hauteur précise */ height: 60px; line-height: 20px; /* ajuster pour centrer le texte verticalement */ } .add-to-cart .spinner-icon { display: none; } .add-to-cart[aria-busy="true"] .bag-icon { display: none; } .add-to-cart[aria-busy="true"] .spinner-icon { display: inline-block; } /* Style optionnel pour un rendu plus pro */ .add-to-cart { position: relative; transition: opacity 0.2s ease; } .add-to-cart[aria-busy="true"] { opacity: 0.8; pointer-events: none; cursor: not-allowed; } .spinner-icon { animation: fa-spin 0.8s linear infinite; } .product-price { display: inline-flex; align-items: baseline; gap: 6px; } .current-price-value { font-size: 24px; font-weight: 700; color: #1a1a1a; } /* Si vous affichez aussi un prix barré (promo) */ .regular-price-value { font-size: 16px; color: #999; text-decoration: line-through; } /* Si le prix a une devise ou un badge promo à côté */ .product-price .badge-promo { font-size: 12px; background: #e63946; color: #fff; padding: 2px 8px; border-radius: 4px; } .product-prices { position: relative; transition: opacity 0.2s ease; } .product-prices.loading { opacity: 0.4; pointer-events: none; } .product-prices.loading .current-price-value::after { content: ""; display: inline-block; width: 14px; height: 14px; margin-left: 8px; border: 2px solid #ccc; border-top-color: #333; border-radius: 50%; vertical-align: middle; animation: price-spin 0.6s linear infinite; } @keyframes price-spin { to { transform: rotate(360deg); } } /* ========================================================================= LOADER PRIX — accompagne le module JS 31 (bz-price-loader) Classe posée par le JS : .bz-loading sur .js-product-prices ========================================================================= */ .js-product-prices { position: relative !important; transition: opacity 0.2s ease !important; } .js-product-prices.bz-loading { opacity: 0.4 !important; pointer-events: none !important; } .js-product-prices.bz-loading .current-price-value::after { content: "" !important; display: inline-block !important; width: 14px !important; height: 14px !important; margin-left: 8px !important; border: 2px solid #ccc !important; border-top-color: #e6007e !important; border-radius: 50% !important; vertical-align: middle !important; animation: bz-price-spin 0.6s linear infinite !important; } @keyframes bz-price-spin { to { transform: rotate(360deg); } } /* ========================================================================= FIX — Champ mot de passe visuellement identique au champ email ========================================================================= */ /* L'input-group doit se comporter EXACTEMENT comme un input simple */ #login-form .input-group.js-parent-focus { width: 100% !important; border: 1px solid #000 !important; border-radius: 5px !important; background: #fff !important; overflow: hidden !important; transition: border-color 0.3s, box-shadow 0.3s !important; } /* Le champ password à l'intérieur ne doit PAS avoir sa propre bordure (sinon double-bordure : celle de l'input-group + celle de l'input) */ #login-form .input-group.js-parent-focus #field-password { border: none !important; box-shadow: none !important; padding: 13px 15px !important; font-size: 14px !important; font-family: Arial, sans-serif !important; background: transparent !important; color: #1a1a1a !important; flex: 1 !important; width: auto !important; } /* Le focus doit s'appliquer sur le CONTENEUR entier, comme pour l'email */ #login-form .input-group.js-parent-focus:focus-within { border-color: #F05DBE !important; box-shadow: 0 0 0 3px rgba(230, 0, 126, 0.1) !important; } /* Neutralise le focus individuel de l'input pour éviter un double effet */ #login-form .input-group.js-parent-focus #field-password:focus { outline: none !important; box-shadow: none !important; border: none !important; } /* Bouton œil : même hauteur, bordure fondue avec le conteneur */ #login-form .input-group.js-parent-focus .input-group-append { display: flex !important; align-items: stretch !important; } #login-form .input-group.js-parent-focus .input-group-append .btn { border: none !important; border-left: 1px solid #e0e0e0 !important; background: #fff !important; color: #666 !important; padding: 0 14px !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: background 0.2s ease, color 0.2s ease !important; } #login-form .input-group.js-parent-focus .input-group-append .btn:hover { background: #f5f5f5 !important; color: #1a1a1a !important; } /* ========================================================================= FIX GLOBAL — Champ mot de passe visuellement identique au champ email S'applique partout : connexion, inscription, mon compte (identité) ========================================================================= */ .input-group.js-parent-focus { width: 100% !important; border: 1px solid #000 !important; border-radius: 5px !important; background: #fff !important; overflow: hidden !important; transition: border-color 0.3s, box-shadow 0.3s !important; display: flex !important; align-items: stretch !important; } /* L'input à l'intérieur ne doit pas avoir sa propre bordure/ombre */ .input-group.js-parent-focus input.form-control { border: none !important; box-shadow: none !important; padding: 13px 15px !important; font-size: 14px !important; font-family: Arial, sans-serif !important; background: transparent !important; color: #1a1a1a !important; flex: 1 !important; width: auto !important; border-radius: 0 !important; } /* Le focus s'applique sur le conteneur entier, comme pour l'email */ .input-group.js-parent-focus:focus-within { border-color: #F05DBE !important; box-shadow: 0 0 0 3px rgba(230, 0, 126, 0.1) !important; } .input-group.js-parent-focus input.form-control:focus { outline: none !important; box-shadow: none !important; border: none !important; } /* Bouton œil : hauteur alignée, séparation fine avec le champ */ .input-group.js-parent-focus .input-group-append { display: flex !important; align-items: stretch !important; } .input-group.js-parent-focus .input-group-append .btn { border: none !important; border-left: 1px solid #e0e0e0 !important; border-radius: 0 !important; background: #fff !important; color: #666 !important; padding: 0 14px !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: background 0.2s ease, color 0.2s ease !important; } .input-group.js-parent-focus .input-group-append .btn:hover { background: #f5f5f5 !important; color: #1a1a1a !important; } /* ========================================================================= FIX GLOBAL — Bordure noire 1px uniforme sur TOUS les champs de formulaire S'applique partout : login, inscription, mon compte, checkout, adresses... ========================================================================= */ input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="date"], input[type="search"], textarea, select, .form-control { border: 1px solid #000 !important; border-radius: 5px !important; background: #fff !important; padding: 13px 15px !important; font-size: 14px !important; color: #1a1a1a !important; box-shadow: none !important; transition: border-color 0.3s, box-shadow 0.3s !important; } input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="tel"]:focus, input[type="number"]:focus, input[type="date"]:focus, input[type="search"]:focus, textarea:focus, select:focus, .form-control:focus { outline: none !important; border-color: #000 !important; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08) !important; } #registration .input-group-append { border: 1px solid #000 !important; border-left: none !important; border-radius: 0 8px 8px 0 !important; } /* --- Cas spécial : champ mot de passe dans .input-group (bouton œil) --- */ .input-group.js-parent-focus { width: 100% !important; border: 0px solid #000 !important; border-radius: 5px !important; background: #fff !important; overflow: hidden !important; transition: border-color 0.3s, box-shadow 0.3s !important; display: flex !important; align-items: stretch !important; } /* L'input à l'intérieur du groupe ne doit PAS avoir sa propre bordure (sinon double-cadre avec le conteneur ci-dessus) */ .input-group.js-parent-focus .form-control { border: none !important; box-shadow: none !important; border-radius: 0 !important; flex: 1 !important; width: auto !important; } .input-group.js-parent-focus:focus-within { border-color: #000 !important; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08) !important; } .input-group.js-parent-focus .form-control:focus { outline: none !important; box-shadow: none !important; border: none !important; } /* Bouton œil : séparation fine avec le champ, même bordure noire */ .input-group.js-parent-focus .input-group-append .btn { border: none !important; border-left: 1px solid #000 !important; border-radius: 0 !important; background: #fff !important; color: #666 !important; padding: 0 14px !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: background 0.2s ease, color 0.2s ease !important; } .input-group.js-parent-focus .input-group-append .btn:hover { background: #f5f5f5 !important; color: #1a1a1a !important; } /* --- Checkbox / radio custom : bordure noire aussi --- */ .custom-checkbox span:first-of-type, .custom-radio span:first-of-type { border: 2px solid #000 !important; } /* ========================================================================= FIX CIBLÉ — Bordure noire sur le champ email (tous formulaires) Utilise l'ID pour spécificité maximale, évite tout conflit avec les règles .form-control génériques scoped par page ========================================================================= */ input#field-email, input#field-email.form-control { border: 1px solid #000 !important; box-shadow: none !important; } input#field-email:focus { border-color: #000 !important; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08) !important; outline: none !important; } #content-wrapper .section-title:after { display: none !important; } /* ========================================================================= Flèches carrousel "COMPLÉTEZ VOTRE ROUTINE" — à l'extérieur des cartes ========================================================================= */ /* Conteneur principal */ .category-products .block-content.swiper-container-wrapper { position: relative !important; overflow: visible !important; } .category-products .products.swiper { overflow: visible !important; } /* ========================================================================= FORCER 4 CARTES SUR DESKTOP ========================================================================= */ /* Forcer le conteneur à utiliser toute la largeur */ .category-products .block-content.swiper-container-wrapper, .category-products .products.swiper, .category-products .swiper-wrapper { width: 100% !important; max-width: 100% !important; } /* Desktop : 4 cartes visibles */ @media (min-width: 1025px) { .category-products .swiper-slide { width: calc(25% - 9px) !important; min-width: calc(25% - 9px) !important; max-width: calc(25% - 9px) !important; flex: 0 0 calc(25% - 9px) !important; margin-right: 12px !important; } /* Supprimer la largeur fixe inline ajoutée par Swiper */ .category-products .swiper-slide[style*="width:"] { width: calc(25% - 9px) !important; min-width: calc(25% - 9px) !important; max-width: calc(25% - 9px) !important; flex: 0 0 calc(25% - 9px) !important; } .category-products .swiper-slide:last-child { margin-right: 0 !important; } /* Forcer le wrapper en flex */ .category-products .swiper-wrapper { display: flex !important; flex-wrap: nowrap !important; width: 100% !important; } } /* Tablette : 2 cartes visibles */ @media (min-width: 768px) and (max-width: 1024px) { .category-products .swiper-slide { width: calc(50% - 6px) !important; min-width: calc(50% - 6px) !important; max-width: calc(50% - 6px) !important; flex: 0 0 calc(50% - 6px) !important; margin-right: 12px !important; } .category-products .swiper-slide[style*="width:"] { width: calc(50% - 6px) !important; min-width: calc(50% - 6px) !important; max-width: calc(50% - 6px) !important; } .category-products .swiper-slide:nth-child(2n) { margin-right: 0 !important; } } /* Mobile : 1 carte visible */ @media (max-width: 767px) { .category-products .swiper-slide { width: 100% !important; min-width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; margin-right: 0 !important; } .category-products .swiper-slide[style*="width:"] { width: 100% !important; min-width: 100% !important; max-width: 100% !important; } } /* ========================================================================= FLÈCHES DE NAVIGATION ========================================================================= */ .category-products .swiper-button-prev, .category-products .swiper-button-next { position: absolute !important; top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important; margin-top: 0 !important; width: 44px !important; height: 44px !important; background: rgba(255,255,255,0.9) !important; border-radius: 50% !important; border: 1px solid #ededed !important; box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important; z-index: 20 !important; display: flex !important; align-items: center !important; justify-content: center !important; opacity: 1 !important; visibility: visible !important; cursor: pointer !important; } .category-products .swiper-button-prev { left: -60px !important; right: auto !important; } .category-products .swiper-button-next { right: -60px !important; left: auto !important; } /* Supprimer les styles par défaut de Swiper */ .category-products .swiper-button-prev::before, .category-products .swiper-button-next::before { content: none !important; display: none !important; } section.category-products.block.block-section div.swiper-button-next::after, section.category-products.block.block-section div.swiper-button-prev::after { content: '' !important; font-size: 0 !important; color: transparent !important; width: 18px !important; height: 18px !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; display: block !important; } /* Flèche droite */ section.category-products.block.block-section div.swiper-button-next::after { background-image: url("data:image/svg+xml,%3Csvg%20fill%3D%22%23000000%22%20height%3D%22800px%22%20width%3D%22800px%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20407.436%20407.436%22%3E%3Cpolygon%20points%3D%22112.814%2C0%2091.566%2C21.178%20273.512%2C203.718%2091.566%2C386.258%20112.814%2C407.436%20315.869%2C203.718%20%22%2F%3E%3C%2Fsvg%3E") !important; } /* Flèche gauche */ section.category-products.block.block-section div.swiper-button-prev::after { background-image: url("data:image/svg+xml,%3Csvg%20fill%3D%22%23000000%22%20height%3D%22800px%22%20width%3D%22800px%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20404.258%20404.258%22%3E%3Cpolygon%20points%3D%22289.927%2C18%20265.927%2C0%20114.331%2C202.129%20265.927%2C404.258%20289.927%2C386.258%20151.831%2C202.129%20%22%2F%3E%3C%2Fsvg%3E") !important; } /* Désactiver les flèches */ .category-products .swiper-button-disabled { opacity: 0.35 !important; pointer-events: none !important; } /* Ajustement des flèches sur petits écrans */ @media (max-width: 1200px) { .category-products .swiper-button-prev { left: -8px !important; } .category-products .swiper-button-next { right: -8px !important; } } /* ========================================================================= PAGINATION (points en bas) ========================================================================= */ .category-products .swiper-pagination { display: none !important; } /* ========================================================================= TRANSITION - Défilement de 1 produit ========================================================================= */ .category-products .swiper-wrapper { transition-timing-function: ease-out !important; transition-duration: 300ms !important; } /* ============================================================================= FLÈCHES CROSS-SELLING PANIER — chevrons noirs (même style que category-products) ============================================================================= */ /* Supprimer le contenu par défaut de Swiper (::before éventuel) */ body#cart .cart-grid-body .crossselling-products .swiper-button-prev::before, body#cart .cart-grid-body .crossselling-products .swiper-button-next::before { content: none !important; display: none !important; } /* Chevron via ::after en image SVG, plus de bordure/fond sur le conteneur */ body#cart .cart-grid-body .crossselling-products .swiper-button-prev, body#cart .cart-grid-body .crossselling-products .swiper-button-next { background: transparent !important; border: none !important; box-shadow: none !important; } body#cart .cart-grid-body .crossselling-products div.swiper-button-next::after, body#cart .cart-grid-body .crossselling-products div.swiper-button-prev::after { content: '' !important; font-size: 0 !important; color: transparent !important; width: 20px !important; height: 20px !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; display: block !important; } /* Flèche droite */ body#cart .cart-grid-body .crossselling-products div.swiper-button-next::after { background-image: url("data:image/svg+xml,%3Csvg%20fill%3D%22%23000000%22%20height%3D%22800px%22%20width%3D%22800px%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20407.436%20407.436%22%3E%3Cpolygon%20points%3D%22112.814%2C0%2091.566%2C21.178%20273.512%2C203.718%2091.566%2C386.258%20112.814%2C407.436%20315.869%2C203.718%20%22%2F%3E%3C%2Fsvg%3E") !important; } /* Flèche droite */ body#cart .cart-grid-body .crossselling-products div.swiper-button-next::after { background-image: url("data:image/svg+xml,%3Csvg%20fill%3D%22%23000000%22%20height%3D%22800px%22%20width%3D%22800px%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20407.436%20407.436%22%3E%3Cpolygon%20points%3D%22112.814%2C0%2091.566%2C21.178%20273.512%2C203.718%2091.566%2C386.258%20112.814%2C407.436%20315.869%2C203.718%20%22%2F%3E%3C%2Fsvg%3E") !important; } /* Flèche gauche */ body#cart .cart-grid-body .crossselling-products div.swiper-button-prev::after { background-image: url("data:image/svg+xml,%3Csvg%20fill%3D%22%23000000%22%20height%3D%22800px%22%20width%3D%22800px%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20404.258%20404.258%22%3E%3Cpolygon%20points%3D%22289.927%2C18%20265.927%2C0%20114.331%2C202.129%20265.927%2C404.258%20289.927%2C386.258%20151.831%2C202.129%20%22%2F%3E%3C%2Fsvg%3E") !important; } /* Désactivé */ body#cart .cart-grid-body .crossselling-products .swiper-button-disabled { opacity: 0.35 !important; } /* Éloigner les flèches */ body#cart .cart-grid-body .crossselling-products div.swiper-button-next { right: -px !important; } body#cart .cart-grid-body .crossselling-products div.swiper-button-prev { left: -10px !important; } @media (min-width: 992px) { #inner-wrapper { max-width: 85% !important; } } /* Réduire la taille des images dans le cross-selling */ body#cart .crossselling-products .product-thumbnail img { max-width: 80% !important; height: auto !important; margin: 0 auto !important; display: block !important; } /* Ajuster la hauteur des miniatures */ body#cart .crossselling-products .thumbnail-container { text-align: center !important; padding: 0 !important; } /* Optionnel : réduire la largeur du conteneur d'image */ body#cart .crossselling-products .thumbnail-container { max-width: 200px !important; margin: 0 auto !important; } /* Pour les slides */ body#cart .crossselling-products .swiper-slide { display: flex !important; justify-content: center !important; } /* Images plus petites */ body#cart .crossselling-products .product-thumbnail img { max-width: 60% !important; height: auto !important; margin: 0 auto !important; display: block !important; } body#cart .crossselling-products .thumbnail-container { max-width: 150px !important; margin: 0 auto !important; text-align: center !important; } body#cart .cart-grid-body .crossselling-products .thumbnail-container { height: 220px !important; min-height: 305px !important; max-height: 297px !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; flex-shrink: 0 !important; } body#cart .crossselling-products .thumbnail-container { max-width: 290px !important; margin: 0 auto !important; text-align: center !important; } /* Desktop */ body#cart .cart-grid-body .crossselling-products .thumbnail-container { height: 220px !important; min-height: 305px !important; max-height: 297px !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; flex-shrink: 0 !important; } body#cart .crossselling-products .thumbnail-container { max-width: 357px !important; width: 100% !important; margin: 0 auto !important; text-align: center !important; } /* Tablette */ @media (max-width: 991px) { body#cart .cart-grid-body .crossselling-products .thumbnail-container { height: 220px !important; min-height: 260px !important; max-height: 260px !important; } body#cart .crossselling-products .thumbnail-container { max-width: 300px !important; width: 100% !important; } } /* Mobile */ @media (max-width: 767px) { body#cart .cart-grid-body .crossselling-products .thumbnail-container { height: 200px !important; min-height: 220px !important; max-height: 220px !important; width: 100% !important; } body#cart .crossselling-products .thumbnail-container { max-width: 100% !important; width: 100% !important; margin: 0 auto !important; } } /* Petit mobile */ @media (max-width: 480px) { body#cart .cart-grid-body .crossselling-products .thumbnail-container { height: 180px !important; min-height: 200px !important; max-height: 200px !important; } body#cart .crossselling-products .thumbnail-container { max-width: 100% !important; } } body#cart .cart-grid-body .crossselling-products .thumbnail-container { background-color: #fff !important; } @media (max-width: 767px) { .envie-du-meilleur-text { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; text-align: left !important; margin: 0 !important; padding: 0 !important; } .envie-du-meilleur-text h2 { width: 100% !important; max-width: 100% !important; white-space: nowrap !important; text-align: left !important; font-size: clamp(13px, 4vw, 18px) !important; margin: 0 0 16px -55px !important; } .envie-du-meilleur-text p { width: 100% !important; text-align: left !important; margin: 0 0 16px -5px !important; } } /* ============================================================ FIX TAILLE IMAGE SUR MOBILE - CARTES PRODUITS ============================================================ */ /* --- MOBILE (max 767px) --- */ @media (max-width: 767px) { /* ===== 1. CONTENEUR DE L'IMAGE - FORCE UNE GRANDE TAILLE ===== */ .product-miniature .thumbnail-container { /* ✅ TAILLE FORCÉE : grand conteneur */ width: 100% !important; height: auto !important; min-height: 200px !important; /* Hauteur minimum absolue */ max-height: 350px !important; /* Hauteur maximum pour ne pas déborder */ /* ✅ RATIO : format portrait pour une image plus haute */ aspect-ratio: 2 / 3 !important; /* 🎯 Ajustez selon vos préférences : - 2/3 => image très haute - 3/4 => image haute - 4/5 => image modérée - 1/1 => image carrée */ display: flex !important; align-items: center !important; justify-content: center !important; background: #f5f5f5 !important; border-radius: 8px !important; overflow: hidden !important; padding: 4px !important; margin-bottom: 6px !important; } /* ===== 2. IMAGE ELLE-MÊME - IGNORE LES ATTRIBUTS HTML ===== */ .product-miniature .thumbnail-container img { /* ✅ IGNORE width="236" et height="305" de HTML */ width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; /* ✅ CONSERVE LES PROPORTIONS */ object-fit: contain !important; /* ✅ SUPPRIME LES CONTRAINTES */ min-width: auto !important; min-height: auto !important; display: block !important; margin: 0 auto !important; border-radius: 4px !important; /* ✅ FORCE L'AFFICHAGE */ position: relative !important; top: auto !important; left: auto !important; transform: none !important; } /* ===== 3. LIEN AUTOUR DE L'IMAGE ===== */ .product-miniature .thumbnail-container a.thumbnail { display: flex !important; width: 100% !important; height: 100% !important; align-items: center !important; justify-content: center !important; } /* ===== 4. PICTURE (balise picture) ===== */ .product-miniature .thumbnail-container picture { display: flex !important; width: 100% !important; height: 100% !important; align-items: center !important; justify-content: center !important; } /* ===== 5. CARTE PRODUIT ===== */ .product-miniature { padding: 10px !important; min-height: 300px !important; height: 100% !important; display: flex !important; flex-direction: column !important; } /* ===== 6. CONTENU TEXTE ===== */ .product-miniature .product-description { padding: 4px 0 0 0 !important; gap: 2px !important; flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; } /* Marque */ .product-miniature .product-brand { font-size: 10px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.3px !important; margin-bottom: 1px !important; order: 1 !important; font-size: 10px !important; } /* Titre */ .product-miniature .product-title { font-size: 12px !important; font-weight: 400 !important; line-height: 1.3 !important; margin-bottom: 2px !important; order: 2 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; min-height: 32px !important; } .product-miniature .product-title a { color: #1a1a1a !important; text-decoration: none !important; font-size: 12px !important; } /* ===== 7. PRIX ===== */ .product-miniature .product-price-and-shipping { margin-bottom: 4px !important; order: 3 !important; } .product-miniature .product-price { font-size: 16px !important; font-weight: 700 !important; color: #e6007e !important; line-height: 1.2 !important; } /* ===== 8. BOUTON AJOUTER AU PANIER ===== */ .product-miniature .product-add-cart { margin-top: auto !important; order: 4 !important; } .product-miniature .product-add-cart .btn-product-list { font-size: 11px !important; padding: 7px 8px !important; gap: 4px !important; border-radius: 6px !important; border: 1px solid #1a1a1a !important; background: transparent !important; color: #1a1a1a !important; width: 100% !important; justify-content: center !important; align-items: center !important; display: flex !important; font-weight: 500 !important; text-transform: none !important; min-height: 34px !important; } .product-miniature .product-add-cart .btn-product-list .bag-icon { font-size: 13px !important; } /* ===== 9. CACHER LES ÉLÉMENTS INUTILES ===== */ .product-miniature .product-category-name, .product-miniature .product-reference, .product-miniature .product-description-short { display: none !important; } /* ===== 10. COEUR WISHLIST ===== */ .product-miniature .product-functional-buttons { top: 6px !important; right: 6px !important; } .product-miniature .product-functional-buttons .btn-iqitwishlist-add { width: 28px !important; height: 28px !important; } .product-miniature .product-functional-buttons .btn-iqitwishlist-add i { font-size: 16px !important; } /* ===== 11. WRAPPER DE LA CARTE (pour 2 colonnes) ===== */ .js-product-miniature-wrapper { flex: 0 0 50% !important; max-width: 50% !important; padding: 4px !important; } } /* ============================================================ TRÈS PETITS ÉCRANS (< 380px) - 1 colonne ============================================================ */ @media (max-width: 380px) { .js-product-miniature-wrapper { flex: 0 0 100% !important; max-width: 100% !important; } .product-miniature .thumbnail-container { aspect-ratio: 3 / 4 !important; min-height: 250px !important; max-height: 400px !important; } } /* ============================================================ TABLETTES (768px à 991px) ============================================================ */ @media (min-width: 768px) and (max-width: 991px) { .js-product-miniature-wrapper { flex: 0 0 33.333% !important; max-width: 33.333% !important; } .product-miniature .thumbnail-container { aspect-ratio: 3 / 4 !important; min-height: 250px !important; } } /* ============================================================ CORRECTION : FORCER L'IMAGE À S'AFFICHER CORRECTEMENT ============================================================ */ /* Supprime les contraintes de taille inline de l'image */ .thumbnail-container img[width][height] { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; min-width: auto !important; min-height: auto !important; } /* ============================================================================= BEAUTYSTORE — custom-carousel-cards-index.css ============================================================================= Ce fichier CSS est DÉDIÉ UNIQUEMENT à la page d'accueil (body#index) pour styliser les cartes produits dans les carrousels Elementor. ============================================================================= */ /* ----------------------------------------------------------------------------- SCOPING : Toutes les règles sont préfixées par body#index pour ne s'appliquer qu'à la page d'accueil. ----------------------------------------------------------------------------- */ body#index { /* ------------------------------------------------------------------------- VARIABLES LOCALES (uniquement pour ce contexte) ------------------------------------------------------------------------- */ --bs-pink: #e6007e; --bs-pink-soft: #fce4ec; --bs-text: #1a1a1a; --bs-muted: #8a8a8a; --bs-border: #ededed; --bs-radius: 10px; --bs-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); --bs-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.15); --bs-transition: all 0.25s ease-in-out; /* ------------------------------------------------------------------------- 1. CONTENEUR DU CARROUSEL & DES SLIDES ------------------------------------------------------------------------- */ .elementor-products-carousel.swiper-products-carousel { display: flex !important; } .elementor-products-carousel .swiper-wrapper { display: flex !important; align-items: stretch !important; gap: 0; } .elementor-products-carousel .swiper-slide { height: auto !important; align-self: flex-start !important; box-sizing: border-box !important; padding: 0 8px; } /* ------------------------------------------------------------------------- 2. CARTE PRODUIT - STRUCTURE PRINCIPALE ------------------------------------------------------------------------- */ .elementor-products-carousel .js-product-miniature-wrapper { display: flex !important; flex-direction: column !important; height: 100% !important; box-sizing: border-box !important; } .elementor-products-carousel .product-miniature.product-miniature-grid { background: #ffffff !important; /* ✅ FOND BLANC PUR */ border: 1px solid var(--bs-border) !important; border-radius: var(--bs-radius) !important; padding: 14px !important; box-shadow: var(--bs-shadow) !important; display: flex !important; flex-direction: column !important; height: 100% !important; transition: var(--bs-transition) !important; box-sizing: border-box !important; } .elementor-products-carousel .product-miniature.product-miniature-grid:hover { box-shadow: var(--bs-shadow-hover) !important; transform: translateY(-3px) !important; } /* ------------------------------------------------------------------------- 3. IMAGE PRODUIT ------------------------------------------------------------------------- */ .elementor-products-carousel .thumbnail-container { display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 0 12px 0 !important; padding: 0 !important; width: 100% !important; background: #ffffff !important; /* ✅ FOND BLANC PUR */ border-radius: 6px !important; overflow: hidden !important; aspect-ratio: 1 / 1 !important; flex-shrink: 0 !important; } .elementor-products-carousel .thumbnail-container img { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; display: block !important; transition: transform 0.4s ease !important; } .elementor-products-carousel .product-miniature:hover .thumbnail-container img { transform: scale(1.04) !important; } /* ------------------------------------------------------------------------- 4. BLOC "PRODUCT-DESCRIPTION" (pour tout le texte) ------------------------------------------------------------------------- */ .elementor-products-carousel .product-description { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; gap: 4px !important; } /* ------------------------------------------------------------------------- 5. MARQUE ------------------------------------------------------------------------- */ .elementor-products-carousel .product-brand { order: 1 !important; display: block !important; font-weight: 700 !important; text-transform: uppercase !important; font-size: 13px !important; color: var(--bs-text) !important; letter-spacing: 0.5px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; min-height: 16px !important; } /* ------------------------------------------------------------------------- 6. TITRE ------------------------------------------------------------------------- */ .elementor-products-carousel .product-title { order: 2 !important; margin: 0 0 6px 0 !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.3 !important; min-height: 2.6em !important; } .elementor-products-carousel .product-title a { color: var(--bs-text) !important; text-decoration: none !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: normal !important; } .elementor-products-carousel .product-title a:hover { color: var(--bs-pink) !important; } /* ------------------------------------------------------------------------- 7. COULEURS (VARIANTES) ------------------------------------------------------------------------- */ .elementor-products-carousel .products-variants { order: 3 !important; display: flex !important; flex-direction: column !important; gap: 4px !important; margin: 4px 0 10px 0 !important; min-height: 30px !important; } .elementor-products-carousel .bz-colors-label { font-size: 12px !important; color: var(--bs-muted) !important; } .elementor-products-carousel .variant-links { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 6px !important; } .elementor-products-carousel .variant-links .color { width: 22px !important; height: 22px !important; border-radius: 6px !important; border: 1px solid rgba(0, 0, 0, 0.1) !important; background-size: cover !important; background-position: center center !important; transition: transform 0.2s ease, border-color 0.2s ease !important; } .elementor-products-carousel .variant-links .color:hover { transform: scale(1.1) !important; border-color: var(--bs-pink) !important; } /* Badge "+N" pour plus de 4 couleurs */ .elementor-products-carousel .variant-links { counter-reset: bz-extra; position: relative; } .elementor-products-carousel .variant-links .color:nth-child(n+5) { counter-increment: bz-extra; position: absolute !important; visibility: hidden !important; pointer-events: none !important; } .elementor-products-carousel .variant-links::after { content: "+" counter(bz-extra); display: none; width: 22px; height: 22px; border-radius: 6px; border: 1px solid rgba(0,0,0,.1); align-items: center; justify-content: center; background: #ffffff; color: var(--bs-text); font-size: 11px; font-weight: 700; cursor: pointer; flex-shrink: 0; } .elementor-products-carousel .variant-links:has(.color:nth-child(5))::after { display: inline-flex; } /* ------------------------------------------------------------------------- 8. PRIX ------------------------------------------------------------------------- */ .elementor-products-carousel .product-price-and-shipping { order: 4 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 2px !important; margin: 4px 0 12px 0 !important; } .elementor-products-carousel .product-price { color: var(--bs-pink) !important; font-weight: 700 !important; font-size: 20px !important; line-height: 1.2 !important; font-family: "Avenir", "Avenir Next", sans-serif !important; } .elementor-products-carousel .regular-price { font-size: 14px !important; color: var(--bs-muted) !important; text-decoration: line-through !important; display: flex !important; align-items: center !important; gap: 6px !important; } .elementor-products-carousel .regular-price::before { content: "Prix d'origine :" !important; color: var(--bs-text) !important; font-size: 12px !important; font-weight: 600 !important; text-decoration: none !important; font-family: "Avenir", "Avenir Next", sans-serif !important; } .elementor-products-carousel .discount { background: transparent !important; border: 1px solid var(--bs-pink) !important; border-radius: 4px !important; padding: 2px 8px !important; font-size: 12px !important; font-weight: 700 !important; color: var(--bs-pink) !important; margin-left: 6px !important; } .tnd-unit { font-size: 12px !important; font-weight: 600 !important; vertical-align: super !important; margin-left: 2px !important; } /* ------------------------------------------------------------------------- 9. BOUTON "AJOUTER AU PANIER" ------------------------------------------------------------------------- */ .elementor-products-carousel .product-add-cart { order: 5 !important; margin-top: auto !important; padding-top: 6px !important; } .elementor-products-carousel .add-to-cart, .elementor-products-carousel .btn.btn-product-list { display: flex !important; width: 100% !important; align-items: center !important; justify-content: center !important; gap: 8px !important; background: transparent !important; color: var(--bs-text) !important; border: 1.5px solid var(--bs-text) !important; border-radius: 6px !important; padding: 10px 14px !important; font-size: 14px !important; font-weight: 500 !important; font-family: "Avenir", "Avenir Next", sans-serif !important; text-transform: none !important; transition: var(--bs-transition) !important; cursor: pointer !important; min-height: 44px !important; } .elementor-products-carousel .add-to-cart:hover { background: var(--bs-text) !important; color: #ffffff !important; transform: translateY(-2px) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; } /* Icône du panier masquée dans les carrousels */ .elementor-products-carousel .add-to-cart .bag-icon, .elementor-products-carousel .add-to-cart .spinner-icon { display: none !important; } /* Bouton désactivé (Rupture de stock) */ .elementor-products-carousel .add-to-cart.js-oos-real { background: #f0f0f0 !important; color: var(--bs-muted) !important; border-color: var(--bs-muted) !important; cursor: not-allowed !important; font-size: 0 !important; } .elementor-products-carousel .add-to-cart.js-oos-real::after { content: "Rupture de stock" !important; font-size: 13px !important; font-weight: 600 !important; } /* ------------------------------------------------------------------------- 10. WISHLIST (Coeur) ------------------------------------------------------------------------- */ .elementor-products-carousel .product-functional-buttons { position: absolute !important; top: 10px !important; right: 10px !important; z-index: 3 !important; } .elementor-products-carousel .btn-iqitwishlist-add { width: 32px !important; height: 32px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: rgba(255, 255, 255, 0.85) !important; border: 1px solid var(--bs-border) !important; border-radius: 50% !important; padding: 0 !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important; transition: var(--bs-transition) !important; } .elementor-products-carousel .btn-iqitwishlist-add:hover { background: #ffffff !important; border-color: var(--bs-pink) !important; transform: scale(1.1) !important; } .elementor-products-carousel .btn-iqitwishlist-add i { font-size: 16px !important; color: var(--bs-text) !important; } /* Cœur vide */ .elementor-products-carousel .btn-iqitwishlist-add .fa-heart-o::before { content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47.1 44.5" width="22px" height="22px"><path fill="%231a1a1a" d="M24.2,42.1c-0.5,0-1-0.2-1.4-0.6c0,0-3.3-3.2-16.4-16.2l-0.1-0.1c-0.1-0.1-0.2-0.2-0.3-0.3c-2.1-2.3-3.3-5.3-3.3-8.4c0-6.9,5.6-12.4,12.4-12.4c3.4,0,6.5,1.3,8.9,3.7c2.3-2.4,5.5-3.7,8.9-3.7c6.8,0,12.4,5.6,12.4,12.4c0,3.4-1.4,6.6-3.9,9c0,0-0.1,0.1-0.1,0.1C28.2,38.8,25.7,41.5,25.7,41.5C25.3,41.9,24.8,42.1,24.2,42.1L24.2,42.1z M15.2,5.4c-6.1,0-11.1,5-11.1,11.1c0,2.8,1.1,5.5,3,7.6c0.1,0.1,0.1,0.1,0.2,0.2l0.1,0.1c13.1,13.1,16.3,16.2,16.3,16.2c0.1,0.1,0.3,0.2,0.5,0.2h0c0.2,0,0.4-0.1,0.5-0.2c0,0,2.5-2.7,15.8-15.9l0.1-0.1c2.2-2.1,3.5-5,3.5-8.1c0-6.1-5-11.1-11.1-11.1c-3.2,0-6.3,1.4-8.4,3.8l-0.5,0.6l-0.5-0.6C21.5,6.8,18.4,5.4,15.2,5.4"/></svg>') !important; font-size: 0 !important; } /* Cœur plein */ .elementor-products-carousel .btn-iqitwishlist-add .fa-heart::before { content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47.1 44.5" width="22px" height="22px"><path fill="%23e6007e" d="M24.2,42.1c-0.5,0-1-0.2-1.4-0.6c0,0-3.3-3.2-16.4-16.2l-0.1-0.1c-0.1-0.1-0.2-0.2-0.3-0.3c-2.1-2.3-3.3-5.3-3.3-8.4c0-6.9,5.6-12.4,12.4-12.4c3.4,0,6.5,1.3,8.9,3.7c2.3-2.4,5.5-3.7,8.9-3.7c6.8,0,12.4,5.6,12.4,12.4c0,3.4-1.4,6.6-3.9,9c0,0-0.1,0.1-0.1,0.1C28.2,38.8,25.7,41.5,25.7,41.5C25.3,41.9,24.8,42.1,24.2,42.1L24.2,42.1z M15.2,5.4c-6.1,0-11.1,5-11.1,11.1c0,2.8,1.1,5.5,3,7.6c0.1,0.1,0.1,0.1,0.2,0.2l0.1,0.1c13.1,13.1,16.3,16.2,16.3,16.2c0.1,0.1,0.3,0.2,0.5,0.2h0c0.2,0,0.4-0.1,0.5-0.2c0,0,2.5-2.7,15.8-15.9l0.1-0.1c2.2-2.1,3.5-5,3.5-8.1c0-6.1-5-11.1-11.1-11.1c-3.2,0-6.3,1.4-8.4,3.8l-0.5,0.6l-0.5-0.6C21.5,6.8,18.4,5.4,15.2,5.4"/></svg>') !important; font-size: 0 !important; } /* ------------------------------------------------------------------------- 11. RESPONSIVE - TABLETTE ET MOBILE ------------------------------------------------------------------------- */ /* Tablettes (≤ 1024px) */ @media (max-width: 1024px) { .elementor-products-carousel .swiper-slide { width: calc(50% - 8px) !important; max-width: calc(50% - 8px) !important; min-width: calc(50% - 8px) !important; flex: 0 0 calc(50% - 8px) !important; padding: 0 4px !important; } .elementor-products-carousel .product-miniature.product-miniature-grid { padding: 10px !important; min-height: 380px !important; } .elementor-products-carousel .thumbnail-container { aspect-ratio: 1 / 1 !important; min-height: 180px !important; } .elementor-products-carousel .product-brand { font-size: 11px !important; } .elementor-products-carousel .product-title { font-size: 13px !important; } .elementor-products-carousel .product-price { font-size: 17px !important; } .elementor-products-carousel .add-to-cart { font-size: 12px !important; min-height: 38px !important; padding: 6px 10px !important; } } /* Mobiles (≤ 767px) */ @media (max-width: 767px) { .elementor-products-carousel .swiper-slide { width: 100% !important; max-width: 100% !important; min-width: 100% !important; flex: 0 0 100% !important; padding: 0 4px !important; } .elementor-products-carousel .product-miniature.product-miniature-grid { padding: 14px !important; min-height: 460px !important; } .elementor-products-carousel .thumbnail-container { aspect-ratio: 1 / 1 !important; min-height: 220px !important; } .elementor-products-carousel .product-brand { font-size: 12px !important; } .elementor-products-carousel .product-title { font-size: 14px !important; } .elementor-products-carousel .product-price { font-size: 18px !important; } .elementor-products-carousel .add-to-cart { font-size: 13px !important; min-height: 44px !important; padding: 8px 12px !important; } /* Badge "+N" masqué sur mobile pour plus d'espace */ .elementor-products-carousel .variant-links:has(.color:nth-child(5))::after { display: none !important; } .elementor-products-carousel .variant-links .color:nth-child(n+5) { position: relative !important; visibility: visible !important; pointer-events: auto !important; } } /* Très petits mobiles (≤ 480px) */ @media (max-width: 480px) { .elementor-products-carousel .product-miniature.product-miniature-grid { padding: 10px !important; min-height: 380px !important; } .elementor-products-carousel .thumbnail-container { aspect-ratio: 1 / 1 !important; min-height: 180px !important; } .elementor-products-carousel .product-brand { font-size: 10px !important; } .elementor-products-carousel .product-title { font-size: 12px !important; } .elementor-products-carousel .product-price { font-size: 16px !important; } .elementor-products-carousel .add-to-cart { font-size: 12px !important; min-height: 38px !important; padding: 6px 8px !important; } .elementor-products-carousel .variant-links .color { width: 18px !important; height: 18px !important; } } } /* ============================================================================= BEAUTYSTORE — custom-carousel-product.css ============================================================================= Ce fichier CSS est DÉDIÉ UNIQUEMENT à la page produit (body#product) pour styliser les cartes produits dans le carrousel "Produits similaires" (swiper-default-carousel). ============================================================================= */ /* ----------------------------------------------------------------------------- SCOPING : Toutes les règles sont préfixées par body#product pour ne s'appliquer qu'à la page produit. ----------------------------------------------------------------------------- */ body#product { /* ------------------------------------------------------------------------- VARIABLES LOCALES (uniquement pour ce contexte) ------------------------------------------------------------------------- */ --bs-pink: #e6007e; --bs-pink-soft: #fce4ec; --bs-text: #1a1a1a; --bs-muted: #8a8a8a; --bs-border: #ededed; --bs-radius: 10px; --bs-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); --bs-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.15); --bs-transition: all 0.25s ease-in-out; /* ------------------------------------------------------------------------- 1. CONTENEUR DU CARROUSEL & DES SLIDES ------------------------------------------------------------------------- */ .swiper-default-carousel.swiper-products-carousel { display: flex !important; } .swiper-default-carousel .swiper-wrapper { display: flex !important; align-items: stretch !important; gap: 0; } .swiper-default-carousel .swiper-slide { height: auto !important; align-self: flex-start !important; box-sizing: border-box !important; padding: 0 8px; } /* ------------------------------------------------------------------------- 2. CARTE PRODUIT - STRUCTURE PRINCIPALE ------------------------------------------------------------------------- */ .swiper-default-carousel .js-product-miniature-wrapper { display: flex !important; flex-direction: column !important; height: 100% !important; box-sizing: border-box !important; } .swiper-default-carousel .product-miniature.product-miniature-grid { background: #ffffff !important; /* ✅ FOND BLANC PUR */ border: 1px solid var(--bs-border) !important; border-radius: var(--bs-radius) !important; padding: 14px !important; box-shadow: var(--bs-shadow) !important; display: flex !important; flex-direction: column !important; height: 100% !important; transition: var(--bs-transition) !important; box-sizing: border-box !important; } .swiper-default-carousel .product-miniature.product-miniature-grid:hover { box-shadow: var(--bs-shadow-hover) !important; transform: translateY(-3px) !important; } /* ------------------------------------------------------------------------- 3. IMAGE PRODUIT ------------------------------------------------------------------------- */ .swiper-default-carousel .thumbnail-container { display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 0 12px 0 !important; padding: 0 !important; width: 100% !important; background: #ffffff !important; /* ✅ FOND BLANC PUR */ border-radius: 6px !important; overflow: hidden !important; aspect-ratio: 1 / 1 !important; flex-shrink: 0 !important; } .swiper-default-carousel .thumbnail-container img { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; display: block !important; transition: transform 0.4s ease !important; } .swiper-default-carousel .product-miniature:hover .thumbnail-container img { transform: scale(1.04) !important; } /* ------------------------------------------------------------------------- 4. BLOC "PRODUCT-DESCRIPTION" (pour tout le texte) ------------------------------------------------------------------------- */ .swiper-default-carousel .product-description { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; gap: 4px !important; } /* ------------------------------------------------------------------------- 5. MARQUE ------------------------------------------------------------------------- */ .swiper-default-carousel .product-brand { order: 1 !important; display: block !important; font-weight: 700 !important; text-transform: uppercase !important; font-size: 13px !important; color: var(--bs-text) !important; letter-spacing: 0.5px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; min-height: 16px !important; } /* ------------------------------------------------------------------------- 6. TITRE ------------------------------------------------------------------------- */ .swiper-default-carousel .product-title { order: 2 !important; margin: 0 0 6px 0 !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.3 !important; min-height: 2.6em !important; } .swiper-default-carousel .product-title a { color: var(--bs-text) !important; text-decoration: none !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: normal !important; } .swiper-default-carousel .product-title a:hover { color: var(--bs-pink) !important; } /* ------------------------------------------------------------------------- 7. COULEURS (VARIANTES) ------------------------------------------------------------------------- */ .swiper-default-carousel .products-variants { order: 3 !important; display: flex !important; flex-direction: column !important; gap: 4px !important; margin: 4px 0 10px 0 !important; min-height: 30px !important; } .swiper-default-carousel .bz-colors-label { font-size: 12px !important; color: var(--bs-muted) !important; } .swiper-default-carousel .variant-links { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 6px !important; } .swiper-default-carousel .variant-links .color { width: 22px !important; height: 22px !important; border-radius: 6px !important; border: 1px solid rgba(0, 0, 0, 0.1) !important; background-size: cover !important; background-position: center center !important; transition: transform 0.2s ease, border-color 0.2s ease !important; } .swiper-default-carousel .variant-links .color:hover { transform: scale(1.1) !important; border-color: var(--bs-pink) !important; } /* Badge "+N" pour plus de 4 couleurs */ .swiper-default-carousel .variant-links { counter-reset: bz-extra; position: relative; } .swiper-default-carousel .variant-links .color:nth-child(n+5) { counter-increment: bz-extra; position: absolute !important; visibility: hidden !important; pointer-events: none !important; } .swiper-default-carousel .variant-links::after { content: "+" counter(bz-extra); display: none; width: 22px; height: 22px; border-radius: 6px; border: 1px solid rgba(0,0,0,.1); align-items: center; justify-content: center; background: #ffffff; color: var(--bs-text); font-size: 11px; font-weight: 700; cursor: pointer; flex-shrink: 0; } .swiper-default-carousel .variant-links:has(.color:nth-child(5))::after { display: inline-flex; } /* ------------------------------------------------------------------------- 8. PRIX ------------------------------------------------------------------------- */ .swiper-default-carousel .product-price-and-shipping { order: 4 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 2px !important; margin: 4px 0 12px 0 !important; } .swiper-default-carousel .product-price { color: var(--bs-pink) !important; font-weight: 700 !important; font-size: 20px !important; line-height: 1.2 !important; font-family: "Avenir", "Avenir Next", sans-serif !important; } .swiper-default-carousel .regular-price { font-size: 14px !important; color: var(--bs-muted) !important; text-decoration: line-through !important; display: flex !important; align-items: center !important; gap: 6px !important; } .swiper-default-carousel .regular-price::before { content: "Prix d'origine :" !important; color: var(--bs-text) !important; font-size: 12px !important; font-weight: 600 !important; text-decoration: none !important; font-family: "Avenir", "Avenir Next", sans-serif !important; } .swiper-default-carousel .discount { background: transparent !important; border: 1px solid var(--bs-pink) !important; border-radius: 4px !important; padding: 2px 8px !important; font-size: 12px !important; font-weight: 700 !important; color: var(--bs-pink) !important; margin-left: 6px !important; } .tnd-unit { font-size: 12px !important; font-weight: 600 !important; vertical-align: super !important; margin-left: 2px !important; } /* ------------------------------------------------------------------------- 9. BOUTON "AJOUTER AU PANIER" ------------------------------------------------------------------------- */ .swiper-default-carousel .product-add-cart { order: 5 !important; margin-top: auto !important; padding-top: 6px !important; } .swiper-default-carousel .add-to-cart, .swiper-default-carousel .btn.btn-product-list { display: flex !important; width: 100% !important; align-items: center !important; justify-content: center !important; gap: 8px !important; background: transparent !important; color: var(--bs-text) !important; border: 1.5px solid var(--bs-text) !important; border-radius: 6px !important; padding: 10px 14px !important; font-size: 14px !important; font-weight: 500 !important; font-family: "Avenir", "Avenir Next", sans-serif !important; text-transform: none !important; transition: var(--bs-transition) !important; cursor: pointer !important; min-height: 44px !important; } .swiper-default-carousel .add-to-cart:hover { background: var(--bs-text) !important; color: #ffffff !important; transform: translateY(-2px) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; } /* Icône du panier masquée dans les carrousels */ .swiper-default-carousel .add-to-cart .bag-icon, .swiper-default-carousel .add-to-cart .spinner-icon { display: none !important; } /* Bouton désactivé (Rupture de stock) */ .swiper-default-carousel .add-to-cart.js-oos-real { background: #f0f0f0 !important; color: var(--bs-muted) !important; border-color: var(--bs-muted) !important; cursor: not-allowed !important; font-size: 0 !important; } .swiper-default-carousel .add-to-cart.js-oos-real::after { content: "Rupture de stock" !important; font-size: 13px !important; font-weight: 600 !important; } /* ------------------------------------------------------------------------- 10. WISHLIST (Coeur) ------------------------------------------------------------------------- */ .swiper-default-carousel .product-functional-buttons { position: absolute !important; top: 10px !important; right: 10px !important; z-index: 3 !important; } .swiper-default-carousel .btn-iqitwishlist-add { width: 32px !important; height: 32px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: rgba(255, 255, 255, 0.85) !important; border: 1px solid var(--bs-border) !important; border-radius: 50% !important; padding: 0 !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important; transition: var(--bs-transition) !important; } .swiper-default-carousel .btn-iqitwishlist-add:hover { background: #ffffff !important; border-color: var(--bs-pink) !important; transform: scale(1.1) !important; } .swiper-default-carousel .btn-iqitwishlist-add i { font-size: 16px !important; color: var(--bs-text) !important; } /* Cœur vide */ .swiper-default-carousel .btn-iqitwishlist-add .fa-heart-o::before { content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47.1 44.5" width="22px" height="22px"><path fill="%231a1a1a" d="M24.2,42.1c-0.5,0-1-0.2-1.4-0.6c0,0-3.3-3.2-16.4-16.2l-0.1-0.1c-0.1-0.1-0.2-0.2-0.3-0.3c-2.1-2.3-3.3-5.3-3.3-8.4c0-6.9,5.6-12.4,12.4-12.4c3.4,0,6.5,1.3,8.9,3.7c2.3-2.4,5.5-3.7,8.9-3.7c6.8,0,12.4,5.6,12.4,12.4c0,3.4-1.4,6.6-3.9,9c0,0-0.1,0.1-0.1,0.1C28.2,38.8,25.7,41.5,25.7,41.5C25.3,41.9,24.8,42.1,24.2,42.1L24.2,42.1z M15.2,5.4c-6.1,0-11.1,5-11.1,11.1c0,2.8,1.1,5.5,3,7.6c0.1,0.1,0.1,0.1,0.2,0.2l0.1,0.1c13.1,13.1,16.3,16.2,16.3,16.2c0.1,0.1,0.3,0.2,0.5,0.2h0c0.2,0,0.4-0.1,0.5-0.2c0,0,2.5-2.7,15.8-15.9l0.1-0.1c2.2-2.1,3.5-5,3.5-8.1c0-6.1-5-11.1-11.1-11.1c-3.2,0-6.3,1.4-8.4,3.8l-0.5,0.6l-0.5-0.6C21.5,6.8,18.4,5.4,15.2,5.4"/></svg>') !important; font-size: 0 !important; } /* Cœur plein */ .swiper-default-carousel .btn-iqitwishlist-add .fa-heart::before { content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47.1 44.5" width="22px" height="22px"><path fill="%23e6007e" d="M24.2,42.1c-0.5,0-1-0.2-1.4-0.6c0,0-3.3-3.2-16.4-16.2l-0.1-0.1c-0.1-0.1-0.2-0.2-0.3-0.3c-2.1-2.3-3.3-5.3-3.3-8.4c0-6.9,5.6-12.4,12.4-12.4c3.4,0,6.5,1.3,8.9,3.7c2.3-2.4,5.5-3.7,8.9-3.7c6.8,0,12.4,5.6,12.4,12.4c0,3.4-1.4,6.6-3.9,9c0,0-0.1,0.1-0.1,0.1C28.2,38.8,25.7,41.5,25.7,41.5C25.3,41.9,24.8,42.1,24.2,42.1L24.2,42.1z M15.2,5.4c-6.1,0-11.1,5-11.1,11.1c0,2.8,1.1,5.5,3,7.6c0.1,0.1,0.1,0.1,0.2,0.2l0.1,0.1c13.1,13.1,16.3,16.2,16.3,16.2c0.1,0.1,0.3,0.2,0.5,0.2h0c0.2,0,0.4-0.1,0.5-0.2c0,0,2.5-2.7,15.8-15.9l0.1-0.1c2.2-2.1,3.5-5,3.5-8.1c0-6.1-5-11.1-11.1-11.1c-3.2,0-6.3,1.4-8.4,3.8l-0.5,0.6l-0.5-0.6C21.5,6.8,18.4,5.4,15.2,5.4"/></svg>') !important; font-size: 0 !important; } /* ------------------------------------------------------------------------- 11. FLÈCHES DE NAVIGATION (style identique aux autres carrousels) ------------------------------------------------------------------------- */ .swiper-default-carousel .swiper-button-prev, .swiper-default-carousel .swiper-button-next { position: absolute !important; top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important; margin-top: 0 !important; width: 44px !important; height: 44px !important; background: rgba(255, 255, 255, 0.9) !important; border-radius: 50% !important; border: 1px solid var(--bs-border) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important; z-index: 20 !important; display: flex !important; align-items: center !important; justify-content: center !important; opacity: 1 !important; visibility: visible !important; cursor: pointer !important; } .swiper-default-carousel .swiper-button-prev { left: -22px !important; right: auto !important; } .swiper-default-carousel .swiper-button-next { right: -22px !important; left: auto !important; } /* Supprimer les styles par défaut de Swiper */ .swiper-default-carousel .swiper-button-prev::after, .swiper-default-carousel .swiper-button-next::after { content: none !important; display: none !important; } /* Chevrons SVG */ .swiper-default-carousel .swiper-button-prev::before { content: '' !important; display: block !important; width: 12px !important; height: 12px !important; border-left: 2.5px solid var(--bs-text) !important; border-bottom: 2.5px solid var(--bs-text) !important; transform: rotate(45deg) !important; margin-left: 4px !important; } .swiper-default-carousel .swiper-button-next::before { content: '' !important; display: block !important; width: 12px !important; height: 12px !important; border-right: 2.5px solid var(--bs-text) !important; border-top: 2.5px solid var(--bs-text) !important; transform: rotate(45deg) !important; margin-right: 4px !important; } /* Désactiver les flèches */ .swiper-default-carousel .swiper-button-disabled { opacity: 0.35 !important; pointer-events: none !important; } /* ------------------------------------------------------------------------- 12. RESPONSIVE - TABLETTE ET MOBILE ------------------------------------------------------------------------- */ /* Tablettes (≤ 1024px) */ @media (max-width: 1024px) { .swiper-default-carousel .swiper-slide { width: calc(50% - 8px) !important; max-width: calc(50% - 8px) !important; min-width: calc(50% - 8px) !important; flex: 0 0 calc(50% - 8px) !important; padding: 0 4px !important; } .swiper-default-carousel .product-miniature.product-miniature-grid { padding: 10px !important; min-height: 380px !important; } .swiper-default-carousel .thumbnail-container { aspect-ratio: 1 / 1 !important; min-height: 180px !important; } .swiper-default-carousel .product-brand { font-size: 11px !important; } .swiper-default-carousel .product-title { font-size: 13px !important; } .swiper-default-carousel .product-price { font-size: 17px !important; } .swiper-default-carousel .add-to-cart { font-size: 12px !important; min-height: 38px !important; padding: 6px 10px !important; } .swiper-default-carousel .swiper-button-prev { left: -8px !important; } .swiper-default-carousel .swiper-button-next { right: -8px !important; } } /* Mobiles (≤ 767px) */ @media (max-width: 767px) { .swiper-default-carousel .swiper-slide { width: 100% !important; max-width: 100% !important; min-width: 100% !important; flex: 0 0 100% !important; padding: 0 4px !important; } .swiper-default-carousel .product-miniature.product-miniature-grid { padding: 14px !important; min-height: 420px !important; } .swiper-default-carousel .thumbnail-container { aspect-ratio: 1 / 1 !important; min-height: 200px !important; } .swiper-default-carousel .product-brand { font-size: 12px !important; } .swiper-default-carousel .product-title { font-size: 14px !important; } .swiper-default-carousel .product-price { font-size: 18px !important; } .swiper-default-carousel .add-to-cart { font-size: 13px !important; min-height: 44px !important; padding: 8px 12px !important; } /* Flèches plus petites et repositionnées */ .swiper-default-carousel .swiper-button-prev, .swiper-default-carousel .swiper-button-next { width: 34px !important; height: 34px !important; } .swiper-default-carousel .swiper-button-prev { left: 2px !important; } .swiper-default-carousel .swiper-button-next { right: 2px !important; } .swiper-default-carousel .swiper-button-prev::before, .swiper-default-carousel .swiper-button-next::before { width: 10px !important; height: 10px !important; } /* Badge "+N" masqué sur mobile pour plus d'espace */ .swiper-default-carousel .variant-links:has(.color:nth-child(5))::after { display: none !important; } .swiper-default-carousel .variant-links .color:nth-child(n+5) { position: relative !important; visibility: visible !important; pointer-events: auto !important; } } /* Très petits mobiles (≤ 480px) */ @media (max-width: 480px) { .swiper-default-carousel .product-miniature.product-miniature-grid { padding: 10px !important; min-height: 360px !important; } .swiper-default-carousel .thumbnail-container { aspect-ratio: 1 / 1 !important; min-height: 160px !important; } .swiper-default-carousel .product-brand { font-size: 10px !important; } .swiper-default-carousel .product-title { font-size: 12px !important; } .swiper-default-carousel .product-price { font-size: 16px !important; } .swiper-default-carousel .add-to-cart { font-size: 12px !important; min-height: 38px !important; padding: 6px 8px !important; } .swiper-default-carousel .variant-links .color { width: 18px !important; height: 18px !important; } .swiper-default-carousel .swiper-button-prev, .swiper-default-carousel .swiper-button-next { width: 28px !important; height: 28px !important; } .swiper-default-carousel .swiper-button-prev::before, .swiper-default-carousel .swiper-button-next::before { width: 8px !important; height: 8px !important; } } } /* ============================================================================= BEAUTYSTORE — carousel-completez-votre-routine-comme-panier.css ============================================================================= Objectif : faire ressembler le carrousel "COMPLÉTEZ VOTRE ROUTINE" (page produit, section .category-products) EXACTEMENT au carrousel "Vous aimerez également" de la page panier (body#cart .crossselling-products). À coller à la SUITE du fichier custom-global.css existant (ou dans un fichier séparé chargé APRÈS lui), afin que ces règles gagnent en priorité sur celles déjà en place pour .category-products. ============================================================================= */ /* ----------------------------------------------------------------------------- 1. CONTENEUR PRINCIPAL — même comportement full-bleed que le panier ----------------------------------------------------------------------------- */ .category-products.block.block-section { background: #ffffff !important; border-radius: 0 !important; box-sizing: border-box !important; } /* ----------------------------------------------------------------------------- 2. TITRE DE SECTION — même style que "VOUS AIMEREZ ÉGALEMENT" ----------------------------------------------------------------------------- */ .category-products h4.section-title, .category-products .section-title { font-size: 0 !important; line-height: 0 !important; height: 40px !important; margin: 0 0 20px 0 !important; padding: 0 !important; text-align: center !important; position: relative !important; display: block !important; overflow: visible !important; border: none !important; } .category-products h4.section-title span, .category-products .section-title span { font-size: 0 !important; } .category-products h4.section-title::before, .category-products .section-title span::after { content: "COMPLÉTEZ VOTRE ROUTINE" !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; font-size: 45px !important; line-height: 1.3 !important; font-family: 'Apollo', serif !important; font-weight: 500 !important; letter-spacing: 1px !important; text-transform: uppercase !important; color: #1a1a1a !important; text-align: center !important; } @media (max-width: 767px) { .category-products h4.section-title::before, .category-products .section-title span::after { font-size: 22px !important; line-height: 1.25 !important; } } /* ----------------------------------------------------------------------------- 2bis. LARGEUR DES SLIDES — exactement 4 cartes visibles sur desktop, jamais de 5e carte qui dépasse partiellement ----------------------------------------------------------------------------- */ .category-products .block-content.swiper-container-wrapper, .category-products .products.swiper, .category-products .swiper-wrapper { overflow: hidden !important; width: 100% !important; max-width: 100% !important; } @media (min-width: 1025px) { .category-products .swiper-slide { width: calc(25% - 9px) !important; min-width: calc(25% - 9px) !important; max-width: calc(25% - 9px) !important; flex: 0 0 calc(25% - 9px) !important; margin-right: 12px !important; } .category-products .swiper-slide[style*="width:"] { width: calc(25% - 9px) !important; min-width: calc(25% - 9px) !important; max-width: calc(25% - 9px) !important; flex: 0 0 calc(25% - 9px) !important; } .category-products .swiper-slide:nth-child(4n) { margin-right: 0 !important; } .category-products .swiper-wrapper { display: flex !important; flex-wrap: nowrap !important; } } @media (min-width: 768px) and (max-width: 1024px) { .category-products .swiper-slide { width: calc(50% - 6px) !important; min-width: calc(50% - 6px) !important; max-width: calc(50% - 6px) !important; flex: 0 0 calc(50% - 6px) !important; margin-right: 12px !important; } .category-products .swiper-slide[style*="width:"] { width: calc(50% - 6px) !important; min-width: calc(50% - 6px) !important; max-width: calc(50% - 6px) !important; } .category-products .swiper-slide:nth-child(2n) { margin-right: 0 !important; } } /* ----------------------------------------------------------------------------- 3. CARTE PRODUIT — structure identique au panier ----------------------------------------------------------------------------- */ .category-products .product-miniature { display: flex !important; flex-direction: column !important; width: 100% !important; height: 100% !important; min-height: 480px !important; padding: 14px !important; box-sizing: border-box !important; background: #ffffff !important; border: 1px solid #e8e8e8 !important; border-radius: 16px !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important; transition: box-shadow 0.25s ease !important; overflow: hidden !important; } .category-products .product-miniature:hover { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10) !important; } .category-products .js-product-miniature-wrapper { display: flex !important; flex-direction: column !important; width: 100% !important; height: 100% !important; } .category-products .swiper-wrapper { align-items: stretch !important; } .category-products .swiper-slide { display: flex !important; height: auto !important; } /* ----------------------------------------------------------------------------- 4. IMAGE PRODUIT — même hauteur et comportement que le panier ----------------------------------------------------------------------------- */ .category-products .thumbnail-container { position: relative !important; width: 100% !important; height: 220px !important; min-height: 220px !important; max-height: 220px !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; border-radius: 12px !important; background: #f7f7f7 !important; margin: 0 0 12px 0 !important; padding: 0 !important; flex-shrink: 0 !important; } .category-products .thumbnail-container a { display: block !important; width: 100% !important; height: 100% !important; } .category-products .thumbnail-container img { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; display: block !important; } /* ----------------------------------------------------------------------------- 5. WISHLIST — même position/taille que le panier ----------------------------------------------------------------------------- */ .category-products .product-functional-buttons { position: absolute !important; top: 10px !important; right: 10px !important; } .category-products .btn-iqitwishlist-add { width: 32px !important; height: 32px !important; background: rgba(255, 255, 255, 0.92) !important; border-radius: 50% !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10) !important; border: none !important; } .category-products .btn-iqitwishlist-add i { font-size: 14px !important; } /* ----------------------------------------------------------------------------- 6. DESCRIPTION — centrée comme dans le panier ----------------------------------------------------------------------------- */ .category-products .product-description { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; flex: 1 1 auto !important; min-width: 0 !important; padding: 0 !important; } /* ----------------------------------------------------------------------------- 7. MARQUE ----------------------------------------------------------------------------- */ .category-products .product-brand { font-size: 10px !important; font-weight: 600 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: #888888 !important; margin: 0 0 3px 0 !important; text-align: center !important; width: 100% !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* ----------------------------------------------------------------------------- 8. TITRE ----------------------------------------------------------------------------- */ .category-products .product-title { margin: 0 0 6px 0 !important; width: 100% !important; min-width: 0 !important; text-align: center !important; height: auto !important; } .category-products .product-title a { font-size: 13px !important; line-height: 1.4 !important; font-weight: 500 !important; color: #1a1a1a !important; text-align: center !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; word-break: break-word !important; min-height: 2.6em !important; text-decoration: none !important; } /* ----------------------------------------------------------------------------- 9. VARIANTES / RÉFÉRENCE — masquées comme dans le panier ----------------------------------------------------------------------------- */ .category-products .products-variants, .category-products .product-reference { display: none !important; } /* ----------------------------------------------------------------------------- 10. PRIX ----------------------------------------------------------------------------- */ .category-products .product-price-and-shipping { display: flex !important; flex-wrap: wrap !important; align-items: baseline !important; justify-content: center !important; gap: 4px !important; margin: 0 0 12px 0 !important; width: 100% !important; text-align: center !important; height: auto !important; } .category-products .product-price { font-size: 17px !important; font-weight: 700 !important; color: #e6007e !important; text-align: center !important; white-space: nowrap !important; } .category-products .product-price .tnd-unit { font-size: 11px !important; font-weight: 600 !important; margin-left: 2px !important; } .category-products .regular-price { font-size: 13px !important; color: #999999 !important; text-decoration: line-through !important; margin-right: 4px !important; } /* ----------------------------------------------------------------------------- 11. BOUTON "AJOUTER AU PANIER" — noir plein, identique au panier ----------------------------------------------------------------------------- */ .category-products .product-add-cart { width: 100% !important; margin-top: auto !important; padding-top: 4px !important; } .category-products .product-add-cart .add-to-cart, .category-products .product-add-cart .btn.btn-product-list, .category-products a.add-to-cart, .category-products button.add-to-cart, .category-products .btn.btn-product-list.add-to-cart { width: 100% !important; max-width: 100% !important; height: 42px !important; min-height: 42px !important; padding: 0 16px !important; margin: 0 !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.3px !important; text-transform: uppercase !important; border-radius: 8px !important; border: none !important; background-color: #1a1a1a !important; background-image: none !important; color: #ffffff !important; display: flex !important; align-items: center !important; justify-content: center !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; transition: all 0.2s ease-in-out !important; cursor: pointer !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important; } .category-products .add-to-cart:hover { background-color: #333333 !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18) !important; transform: translateY(-1px) !important; } .category-products .add-to-cart:active { transform: translateY(0px) !important; opacity: 0.85 !important; } .category-products .add-to-cart .bag-icon, .category-products .add-to-cart .spinner-icon { display: none !important; } .category-products .product-add-cart .btn-product-list[disabled] { opacity: 0.5 !important; cursor: not-allowed !important; background-color: #999999 !important; box-shadow: none !important; } /* ----------------------------------------------------------------------------- 12. FLÈCHES DE NAVIGATION — chevrons noirs nus, sans cercle/fond, positionnées en dehors des cartes ----------------------------------------------------------------------------- */ .category-products .swiper-button-prev::before, .category-products .swiper-button-next::before { content: none !important; display: none !important; } .category-products .swiper-button-prev, .category-products .swiper-button-next { position: absolute !important; top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important; margin-top: 0 !important; width: 44px !important; height: 44px !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; z-index: 20 !important; display: flex !important; align-items: center !important; justify-content: center !important; opacity: 1 !important; visibility: visible !important; cursor: pointer !important; } .category-products .swiper-button-prev { left: -60px !important; right: auto !important; } .category-products .swiper-button-next { right: -60px !important; left: auto !important; } .category-products div.swiper-button-next::after, .category-products div.swiper-button-prev::after { content: '' !important; font-size: 0 !important; color: transparent !important; width: 22px !important; height: 22px !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; display: block !important; } .category-products div.swiper-button-next::after { background-image: url("data:image/svg+xml,%3Csvg%20fill%3D%22%23000000%22%20height%3D%22800px%22%20width%3D%22800px%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20407.436%20407.436%22%3E%3Cpolygon%20points%3D%22112.814%2C0%2091.566%2C21.178%20273.512%2C203.718%2091.566%2C386.258%20112.814%2C407.436%20315.869%2C203.718%20%22%2F%3E%3C%2Fsvg%3E") !important; } .category-products div.swiper-button-prev::after { background-image: url("data:image/svg+xml,%3Csvg%20fill%3D%22%23000000%22%20height%3D%22800px%22%20width%3D%22800px%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20404.258%20404.258%22%3E%3Cpolygon%20points%3D%22289.927%2C18%20265.927%2C0%20114.331%2C202.129%20265.927%2C404.258%20289.927%2C386.258%20151.831%2C202.129%20%22%2F%3E%3C%2Fsvg%3E") !important; } .category-products .swiper-button-disabled { opacity: 0.35 !important; pointer-events: none !important; } @media (max-width: 1200px) { .category-products .swiper-button-prev { left: -8px !important; } .category-products .swiper-button-next { right: -8px !important; } } /* ----------------------------------------------------------------------------- 13. PAGINATION — masquée comme dans le panier (pas de points) ----------------------------------------------------------------------------- */ .category-products .swiper-pagination { display: none !important; } /* ----------------------------------------------------------------------------- 14. RESPONSIVE — mêmes points de rupture que le panier ----------------------------------------------------------------------------- */ @media (max-width: 991px) { .category-products .thumbnail-container { height: 180px !important; min-height: 180px !important; max-height: 180px !important; } } @media (max-width: 767px) { /* 1 carte pleine largeur, comme le panier sur mobile */ .category-products .swiper-slide { width: 100% !important; max-width: 100% !important; min-width: 100% !important; flex: 0 0 100% !important; margin: 0 !important; } .category-products .swiper-button-prev, .category-products .swiper-button-next { display: none !important; } .category-products .product-miniature { padding: 12px !important; } .category-products .thumbnail-container { height: 200px !important; max-height: 200px !important; } .category-products .product-title a { font-size: 12px !important; } .category-products .product-price { font-size: 16px !important; } .category-products .add-to-cart { height: 40px !important; min-height: 40px !important; font-size: 11px !important; } } @media (max-width: 479px) { .category-products .thumbnail-container { height: 160px !important; max-height: 160px !important; } .category-products .product-miniature { padding: 10px !important; } .category-products .add-to-cart { height: 38px !important; min-height: 38px !important; font-size: 11px !important; padding: 0 12px !important; } } /* ============================================================================= FLÈCHES CARROUSEL "COMPLÉTEZ VOTRE ROUTINE" — identiques au panier ============================================================================= */ /* Supprimer TOUS les styles existants avec priorité maximale */ section.category-products.block.block-section .swiper-button-prev, section.category-products.block.block-section .swiper-button-next, .category-products .swiper-button-prev, .category-products .swiper-button-next, .category-products .block-content .swiper-button-prev, .category-products .block-content .swiper-button-next, body#product .category-products .swiper-button-prev, body#product .category-products .swiper-button-next { background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; width: 44px !important; height: 44px !important; margin-top: 0 !important; top: 50% !important; transform: translateY(-50%) !important; position: absolute !important; display: flex !important; align-items: center !important; justify-content: center !important; opacity: 1 !important; visibility: visible !important; cursor: pointer !important; z-index: 20 !important; } /* Supprimer ::before et ::after existants */ section.category-products.block.block-section .swiper-button-prev::before, section.category-products.block.block-section .swiper-button-prev::after, section.category-products.block.block-section .swiper-button-next::before, section.category-products.block.block-section .swiper-button-next::after, .category-products .swiper-button-prev::before, .category-products .swiper-button-prev::after, .category-products .swiper-button-next::before, .category-products .swiper-button-next::after { content: none !important; display: none !important; background: none !important; border: none !important; width: 0 !important; height: 0 !important; } /* Positionnement */ section.category-products.block.block-section .swiper-button-prev, .category-products .swiper-button-prev { left: -60px !important; right: auto !important; } section.category-products.block.block-section .swiper-button-next, .category-products .swiper-button-next { right: -60px !important; left: auto !important; } /* NOUVEAUX chevrons SVG via ::after — avec priorité maximale */ section.category-products.block.block-section .swiper-button-next::after, .category-products .swiper-button-next::after { content: '' !important; display: block !important; font-size: 0 !important; color: transparent !important; width: 22px !important; height: 22px !important; background-image: url("data:image/svg+xml,%3Csvg%20fill%3D%22%23000000%22%20height%3D%22800px%22%20width%3D%22800px%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20407.436%20407.436%22%3E%3Cpolygon%20points%3D%22112.814%2C0%2091.566%2C21.178%20273.512%2C203.718%2091.566%2C386.258%20112.814%2C407.436%20315.869%2C203.718%20%22%2F%3E%3C%2Fsvg%3E") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; border: none !important; } section.category-products.block.block-section .swiper-button-prev::after, .category-products .swiper-button-prev::after { content: '' !important; display: block !important; font-size: 0 !important; color: transparent !important; width: 22px !important; height: 22px !important; background-image: url("data:image/svg+xml,%3Csvg%20fill%3D%22%23000000%22%20height%3D%22800px%22%20width%3D%22800px%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20404.258%20404.258%22%3E%3Cpolygon%20points%3D%22289.927%2C18%20265.927%2C0%20114.331%2C202.129%20265.927%2C404.258%20289.927%2C386.258%20151.831%2C202.129%20%22%2F%3E%3C%2Fsvg%3E") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; border: none !important; } /* Désactiver les flèches */ section.category-products.block.block-section .swiper-button-disabled, .category-products .swiper-button-disabled { opacity: 0.35 !important; pointer-events: none !important; } /* Responsive */ @media (max-width: 1200px) { section.category-products.block.block-section .swiper-button-prev, .category-products .swiper-button-prev { left: -8px !important; } section.category-products.block.block-section .swiper-button-next, .category-products .swiper-button-next { right: -8px !important; } } @media (max-width: 767px) { section.category-products.block.block-section .swiper-button-prev, section.category-products.block.block-section .swiper-button-next, .category-products .swiper-button-prev, .category-products .swiper-button-next { display: none !important; } } @media (max-width: 1024px) { section.category-products.block.block-section .swiper-button-prev, section.category-products.block.block-section .swiper-button-next, .category-products .swiper-button-prev, .category-products .swiper-button-next { width: 34px !important; height: 34px !important; } section.category-products.block.block-section .swiper-button-next::after, section.category-products.block.block-section .swiper-button-prev::after, .category-products .swiper-button-next::after, .category-products .swiper-button-prev::after { width: 16px !important; height: 16px !important; } } /* ============================================================================= FLÈCHES CARROUSEL "COMPLÉTEZ VOTRE ROUTINE" — MARGES GAUCHE/DROITE ============================================================================= */ /* Position des flèches avec margin */ .category-products .swiper-button-prev { left: -60px !important; margin-left: -20px !important; } .category-products .swiper-button-next { right: -60px !important; margin-right: -20px !important; } /* Version avec margin plus grande pour éloigner les flèches */ .category-products .swiper-button-prev { left: 60px !important; margin-left: 15px !important; } .category-products .swiper-button-next { right: -60px !important; margin-right: 15px !important; } /* Version responsive avec marges adaptatives */ @media (max-width: 1200px) { .category-products .swiper-button-prev { left: -8px !important; margin-left: -10px !important; } .category-products .swiper-button-next { right: -8px !important; margin-right: -10px !important; } } @media (max-width: 1024px) { .category-products .swiper-button-prev { left: -4px !important; margin-left: -20px !important; } .category-products .swiper-button-next { right: -4px !important; margin-right: -20px !important; } } @media (max-width: 767px) { .category-products .swiper-button-prev, .category-products .swiper-button-next { display: none !important; } } /* ============================================================================= FIX SCROLL MOBILE — Carrousel "COMPLÉTEZ VOTRE ROUTINE" ============================================================================= */ /* === 1. FORCER L'AFFICHAGE DES FLÈCHES SUR MOBILE === */ @media (max-width: 767px) { .category-products .swiper-button-prev, .category-products .swiper-button-next { display: flex !important; visibility: visible !important; opacity: 1 !important; width: 34px !important; height: 34px !important; background: rgba(255, 255, 255, 0.9) !important; border: 1px solid #e8e8e8 !important; border-radius: 50% !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important; z-index: 30 !important; } .category-products .swiper-button-prev { left: 4px !important; right: auto !important; margin-left: 0 !important; } .category-products .swiper-button-next { right: 4px !important; left: auto !important; margin-right: 0 !important; } /* Réduire la taille des chevrons */ .category-products .swiper-button-next::after, .category-products .swiper-button-prev::after { width: 14px !important; height: 14px !important; } } /* === 2. FORCER LE SWIPER À DÉFILER CORRECTEMENT === */ .category-products .swiper-container, .category-products .swiper, .category-products .swiper-wrapper { overflow: visible !important; } .category-products .swiper-wrapper { display: flex !important; flex-wrap: nowrap !important; } /* === 3. S'ASSURER QUE LES SLIDES SONT VISIBLES === */ .category-products .swiper-slide { flex-shrink: 0 !important; height: auto !important; } /* === 4. FORCER LA PAGINATION POUR VOIR LE NOMBRE DE SLIDES === */ .category-products .swiper-pagination { display: block !important; position: static !important; margin-top: 20px !important; text-align: center !important; } .category-products .swiper-pagination-bullet { background: #d1d1d1 !important; opacity: 1 !important; width: 8px !important; height: 8px !important; margin: 0 4px !important; border-radius: 50% !important; } .category-products .swiper-pagination-bullet-active { background: #e6007e !important; width: 20px !important; border-radius: 4px !important; } /* === 5. VERSION ULTRA-AGRESSIVE POUR FORCER LES FLÈCHES === */ .category-products [class*="swiper-button"] { display: flex !important; visibility: visible !important; opacity: 1 !important; } @media (max-width: 767px) { .category-products [class*="swiper-button"] { display: flex !important; visibility: visible !important; opacity: 1 !important; background: rgba(255, 255, 255, 0.9) !important; border: 1px solid #e8e8e8 !important; border-radius: 50% !important; width: 34px !important; height: 34px !important; } } /* ============================================================ THUMBS-FIX.CSS — à charger APRÈS le CSS du thème ------------------------------------------------------------ Complète thumbs-fix.js : le JS ne fait que calculer et poser des `transform: translateX/Y(...)`, ce CSS définit la mise en page qui rend ce transform réellement visible et correct (flex layout des slides, dimensions du viewport, sens de défilement vertical en desktop / horizontal en mobile). ============================================================ */ /* ------------------------------------------------------------ 1. IMAGE LARGE (#product-images-large) ------------------------------------------------------------ Le wrapper doit être un ruban flex horizontal où chaque slide occupe 100% de la largeur ; translateX(-100%), (-200%), etc. fait alors glisser exactement une image à la fois. ------------------------------------------------------------ */ #product-images-large.swiper-container { overflow: hidden; position: relative; width: 100%; } #product-images-large .swiper-wrapper { display: flex; flex-wrap: nowrap; transition: transform .35s ease; will-change: transform; } #product-images-large .product-lmage-large { flex: 0 0 100%; max-width: 100%; width: 100%; } #product-images-large .product-lmage-large img { width: 100%; height: auto; display: block; } /* Flèches de l'image large : toujours cliquables, visibles au survol */ #product-images-large .swiper-button-inner-prev, #product-images-large .swiper-button-inner-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; cursor: pointer; opacity: .7; transition: opacity .2s ease; } #product-images-large .swiper-button-inner-prev:hover, #product-images-large .swiper-button-inner-next:hover { opacity: 1; } #product-images-large .swiper-button-inner-prev { left: 12px; } #product-images-large .swiper-button-inner-next { right: 12px; } /* ------------------------------------------------------------ 2. VIGNETTES — DESKTOP (colonne verticale, défilement vertical) ------------------------------------------------------------ */ #product-images-thumbs { position: relative; display: flex; flex-direction: column; align-items: center; } #product-images-thumbs .thumb-viewport { overflow: hidden; width: 100%; /* Hauteur du viewport = zone visible de vignettes ; ajuster si le thème impose déjà une hauteur fixe à .js-qv-mask */ max-height: 480px; } #product-images-thumbs .swiper-wrapper { display: flex; flex-direction: column; gap: 10px; transition: transform .25s ease; will-change: transform; } #product-images-thumbs .swiper-slide { flex: 0 0 auto; width: 100%; } #product-images-thumbs .thumb-container { border-radius: 6px; overflow: hidden; cursor: pointer; transition: box-shadow .2s ease, opacity .2s ease; } #product-images-thumbs img.thumb { display: block; width: 100%; height: auto; cursor: pointer; opacity: .55; transition: opacity .2s ease; } /* Vignette active : pas de cadre, juste une opacité pleine + une ombre douce pour la distinguer subtilement des autres */ #product-images-thumbs .thumb.selected, #product-images-thumbs .thumb.js-thumb-selected { opacity: 1; } #product-images-thumbs .thumb-container:has(.js-thumb-selected) { box-shadow: 0 2px 10px rgba(0, 0, 0, .12); } /* Survol : légère remontée d'opacité même sur une vignette inactive */ #product-images-thumbs .thumb-container:hover img.thumb { opacity: .85; } #product-images-thumbs .thumb-container:has(.js-thumb-selected):hover img.thumb { opacity: 1; } /* Flèches ▲▼ des vignettes, desktop */ #product-images-thumbs .thumb-arrow { display: flex; align-items: center; justify-content: center; width: 100%; height: 28px; border: none; background: transparent; cursor: pointer; font-size: 12px; color: #1a1a1a; transition: opacity .15s ease, background .15s ease; } #product-images-thumbs .thumb-arrow:hover { background: #f2f2f2; } #product-images-thumbs .thumb-arrow.is-disabled { opacity: .25; cursor: default; pointer-events: none; background: transparent; } /* Masque les flèches natives Swiper de l'image large SI elles apparaissent par erreur à l'intérieur du bloc vignettes */ #product-images-thumbs .swiper-button-prev, #product-images-thumbs .swiper-button-next { display: none !important; } /* ------------------------------------------------------------ 3. RESPONSIVE — TABLETTE (≤ 1024px) ------------------------------------------------------------ Les vignettes restent verticales mais plus compactes. ------------------------------------------------------------ */ @media (max-width: 1024px) { #product-images-thumbs .thumb-viewport { max-height: 380px; } #product-images-thumbs .swiper-wrapper { gap: 8px; } } /* ------------------------------------------------------------ 4. RESPONSIVE — MOBILE (≤ 767px) ------------------------------------------------------------ Les vignettes passent en ligne horizontale sous (ou au-dessus de) l'image large ; le JS bascule automatiquement en translateX à cette largeur (cf. isMobile() dans thumbs-fix.js). ------------------------------------------------------------ */ @media (max-width: 767px) { .col-left-product-thumbs { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; order: 2; /* vignettes sous l'image large sur mobile */ } .col-left-product-cover { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; order: 1; } .images-container .row.no-gutters { flex-direction: column; } #product-images-thumbs { flex-direction: row; align-items: stretch; margin-top: 10px; } #product-images-thumbs .thumb-viewport { max-height: none; max-width: 100%; width: 100%; } #product-images-thumbs .swiper-wrapper { flex-direction: row; gap: 8px; } #product-images-thumbs .swiper-slide { flex: 0 0 72px; width: 72px; } /* Flèches ▲▼ deviennent gauche/droite en mobile */ #product-images-thumbs .thumb-arrow { width: 32px; height: auto; flex: 0 0 32px; } #product-images-thumbs .thumb-arrow--up::before { content: "\25C0"; /* ◀ remplace visuellement ▲ */ } #product-images-thumbs .thumb-arrow--down::before { content: "\25B6"; /* ▶ remplace visuellement ▼ */ } #product-images-thumbs .thumb-arrow--up, #product-images-thumbs .thumb-arrow--down { font-size: 0; /* cache le ▲▼ texte d'origine, le ::before le remplace */ } } /* Très petits écrans : vignettes encore plus compactes */ @media (max-width: 420px) { #product-images-thumbs .swiper-slide { flex: 0 0 58px; width: 58px; } #product-images-thumbs .thumb-arrow { width: 26px; flex: 0 0 26px; } } .mnp-submit { width: 100%; background: #fff; border: 2px solid #1a1a1a; color: #1a1a1a; padding: 14px 20px; border-radius: 5px; font-size: 13px; font-weight: 700; letter-spacing: 1px; cursor: pointer; transition: background 0.25s ease, color 0.25s ease, transform 0.15s ease; } .mnp-submit:hover { background: #1a1a1a; color: #fff; } .mnp-submit:active { transform: scale(0.98); } .mnp-title, .mnp-list li, .mnp-label, .mnp-input, .mnp-submit, .mnp-msg { font-family: 'Avenir', 'Avenir Next', 'Segoe UI', Helvetica, Arial, sans-serif; } #mnp-popup { border-radius: 20px !important; overflow: hidden !important; } @media (max-width: 767px) { .row { margin-left: 0 !important; margin-right: 0 !important; } .col-md-8, .col-md-4.cart-grid-right { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; padding-left: 0 !important; padding-right: 0 !important; } #checkout-personal-information-step, #checkout-addresses-step, #checkout-delivery-step, #checkout-payment-step { width: 100% !important; padding-left: 12px !important; padding-right: 12px !important; box-sizing: border-box !important; } #js-checkout-summary { width: 100% !important; margin-top: 20px !important; border-radius: 0 !important; } .form-group.row { margin-left: 0 !important; margin-right: 0 !important; } .form-group .col-md-2, .form-group .col-md-8 { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; padding-left: 0 !important; padding-right: 0 !important; } .form-group .col-md-2.col-form-label { margin-bottom: 4px !important; } .form-control { width: 100% !important; box-sizing: border-box !important; } .btn-block, .continue { width: 100% !important; } .card-body, .card-block { padding-left: 12px !important; padding-right: 12px !important; box-sizing: border-box !important; } } #field-password { border: 1px solid #000 !important; border-right: none !important; border-radius: 6px 0 0 6px !important; } #field-password + .input-group-append .btn[data-action="show-password"] { border: 1px solid #000 !important; border-left: none !important; border-radius: 0 6px 6px 0 !important; } .input-group-append .btn-secondary { position: relative; min-width: 90px; } .input-group-append .btn-secondary .btn-loader { display: none; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; border-radius: 50%; animation: promo-spin 0.7s linear infinite; position: absolute; top: 50%; left: 50%; margin-top: -8px; margin-left: -8px; } @keyframes promo-spin { to { transform: rotate(360deg); } } .input-group-append .btn-secondary.is-loading span:not(.btn-loader) { visibility: hidden; } .input-group-append .btn-secondary.is-loading .btn-loader { display: inline-block; } /* Popup toast */ .promo-toast { position: fixed; top: 20px; left: 50%; transform: translateX(-50%) translateY(-20px); background: #fff; padding: 14px 22px; border-radius: 10px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18); font-size: 14px; font-weight: 600; z-index: 999999; opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease; max-width: 90%; text-align: center; } .promo-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .promo-toast.success { border-left: 4px solid #2e7d32; color: #1a1a1a; } .promo-toast.error { border-left: 4px solid #c62828; color: #1a1a1a; } /* ============================================================================= BEAUTYSTORE — Image produit principale, version PRO (mobile) ----------------------------------------------------------------------------- Remplace le fix précédent. Contient : 1. Fix du conflit Swiper natif (fade) vs thumbs-fix.js — swipe fluide 2. Contrainte de taille de l'image large sur mobile 3. Pagination points sous l'image (style Zara/Sephora) 4. Zoom au tap (nécessite le petit script JS fourni séparément) 5. Vignettes conservées, allégées visuellement ----------------------------------------------------------------------------- À coller tout en bas de custom-global.css, APRÈS la section THUMBS-FIX.CSS. ============================================================================= */ /* ============================================================================= 1. FIX CONFLIT SWIPER NATIF (fade) vs thumbs-fix.js ============================================================================= */ #product-images-large.swiper-fade .swiper-wrapper { transition-property: transform !important; } #product-images-large.swiper-fade .swiper-slide { opacity: 1 !important; pointer-events: auto !important; } #product-images-large .product-lmage-large { transform: none !important; } #product-images-large .swiper-wrapper { display: flex !important; flex-wrap: nowrap !important; width: 100% !important; } #product-images-large .product-lmage-large { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; box-sizing: border-box !important; } /* ============================================================================= 2. TAILLE DE L'IMAGE LARGE SUR MOBILE ============================================================================= */ @media (max-width: 767px) { body#product .col-md-7.col-product-image, body#product .images-container { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } #product-images-large.swiper-container { width: 100% !important; max-width: 100% !important; overflow: hidden !important; border-radius: 12px !important; background: #f7f7f7 !important; position: relative !important; } #product-images-large .swiper-wrapper { width: 100% !important; } #product-images-large .product-lmage-large { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; aspect-ratio: 3 / 4 !important; /* format portrait cosmétique classique */ display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; } #product-images-large .product-lmage-large img, #product-images-large picture img { width: 100% !important; height: 100% !important; max-width: 100% !important; object-fit: cover !important; display: block !important; user-select: none !important; -webkit-user-drag: none !important; } } /* ============================================================================= 3. PAGINATION POINTS — sous l'image, style épuré (Zara/Sephora) ----------------------------------------------------------------------------- Nécessite un conteneur <div class="bz-image-dots"></div> injecté juste après #product-images-large (voir script JS fourni), OU réutilise .swiper-pagination-product si le thème le génère déjà — dans ce cas ce bloc restyle simplement l'existant plutôt que d'en créer un nouveau. ============================================================================= */ @media (max-width: 767px) { #product-images-large .swiper-pagination-product, .bz-image-dots { position: static !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; margin: 12px 0 0 !important; padding: 0 !important; } #product-images-large .swiper-pagination-bullet, .bz-image-dots .bz-dot { width: 6px !important; height: 6px !important; border-radius: 50% !important; background: #e0d9d9 !important; opacity: 1 !important; margin: 0 !important; transition: width .25s ease, background .25s ease !important; cursor: pointer !important; } #product-images-large .swiper-pagination-bullet-active, .bz-image-dots .bz-dot.is-active { width: 18px !important; border-radius: 3px !important; background: #e6007e !important; } } /* ============================================================================= 4. ZOOM AU TAP — overlay plein écran, transition fluide ----------------------------------------------------------------------------- Structure attendue (injectée par le script JS fourni) : <div class="bz-zoom-overlay"> <img class="bz-zoom-img" src="..."> </div> Le tap sur l'image produit ajoute .bz-zoom-active sur <body> et positionne le point de tap comme transform-origin, pour un zoom "vers l'endroit tapé" plutôt qu'un zoom centré générique. ============================================================================= */ .bz-zoom-overlay { position: fixed; inset: 0; z-index: 100000; background: #ffffff; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; touch-action: none; overscroll-behavior: contain; } body.bz-zoom-active .bz-zoom-overlay { opacity: 1; visibility: visible; } .bz-zoom-overlay .bz-zoom-img { max-width: 100%; max-height: 100%; width: auto; height: auto; transform-origin: center center; transition: transform .3s cubic-bezier(.2, .8, .2, 1); touch-action: pinch-zoom; will-change: transform; } /* État zoomé : posé dynamiquement en JS via variable inline --bz-zoom-scale et --bz-zoom-origin-x / --bz-zoom-origin-y calculées au point de tap */ .bz-zoom-overlay .bz-zoom-img.is-zoomed { transform: scale(var(--bz-zoom-scale, 2.2)); transform-origin: var(--bz-zoom-origin-x, 50%) var(--bz-zoom-origin-y, 50%); cursor: zoom-out; } .bz-zoom-overlay .bz-zoom-img:not(.is-zoomed) { cursor: zoom-in; } /* Bouton fermeture (croix), coin haut droit, safe-area friendly */ .bz-zoom-close { position: absolute; top: max(16px, env(safe-area-inset-top)); right: 16px; z-index: 100001; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: rgba(26, 26, 26, .06); border: none; border-radius: 50%; cursor: pointer; transition: background .2s ease; } .bz-zoom-close:hover, .bz-zoom-close:active { background: rgba(26, 26, 26, .12); } .bz-zoom-close::before, .bz-zoom-close::after { content: ""; position: absolute; width: 16px; height: 2px; background: #1a1a1a; border-radius: 1px; } .bz-zoom-close::before { transform: rotate(45deg); } .bz-zoom-close::after { transform: rotate(-45deg); } /* Petite indication discrète "pincez ou touchez pour zoomer", visible une fraction de seconde à l'ouverture de la fiche produit puis masquée */ .bz-zoom-hint { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); background: rgba(26, 26, 26, .78); color: #fff; font-family: "Avenir", "Avenir Next", sans-serif; font-size: 11px; font-weight: 500; letter-spacing: .2px; padding: 7px 14px; border-radius: 20px; white-space: nowrap; opacity: 0; animation: bz-hint-fade 3.2s ease forwards; pointer-events: none; } @keyframes bz-hint-fade { 0% { opacity: 0; transform: translateX(-50%) translateY(6px); } 12% { opacity: 1; transform: translateX(-50%) translateY(0); } 80% { opacity: 1; } 100% { opacity: 0; } } /* Curseur "loupe" discret sur l'image en mode carrousel normal (mobile), pour signaler que l'image est tapable */ @media (max-width: 767px) { #product-images-large .product-lmage-large { position: relative !important; } #product-images-large .product-lmage-large::after { content: ""; position: absolute; bottom: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .9); box-shadow: 0 2px 8px rgba(0, 0, 0, .12); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3Cpath d='M11 8v6M8 11h6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 16px; pointer-events: none; z-index: 2; } /* Masque l'icône loupe existante du thème (expander/fa-expand) pour ne pas dupliquer avec la nôtre */ #product-images-large .expander { display: none !important; } } /* ============================================================================= 5. VIGNETTES MOBILE — allégées, discrètes, sous les points ============================================================================= */ @media (max-width: 767px) { .col-left-product-thumbs { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; order: 3 !important; /* après image (1) et points (2) */ margin-top: 10px !important; } .col-left-product-cover { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; order: 1 !important; } .images-container .row.no-gutters { flex-direction: column !important; } #product-images-thumbs { flex-direction: row !important; align-items: stretch !important; height: auto !important; max-height: none !important; } #product-images-thumbs .thumb-viewport { max-height: none !important; max-width: 100% !important; width: 100% !important; position: static !important; } #product-images-thumbs .swiper-wrapper { flex-direction: row !important; gap: 8px !important; justify-content: center !important; } #product-images-thumbs .swiper-slide { flex: 0 0 52px !important; width: 52px !important; } #product-images-thumbs .thumb-container { border-radius: 8px !important; overflow: hidden !important; } #product-images-thumbs img.thumb { opacity: .45 !important; border: 1.5px solid transparent !important; border-radius: 8px !important; transition: opacity .2s ease, border-color .2s ease !important; } #product-images-thumbs img.thumb.selected, #product-images-thumbs img.thumb.js-thumb-selected { opacity: 1 !important; border-color: #e6007e !important; } /* Flèches ▲▼ masquées sur mobile — le swipe + les points suffisent, les vignettes ne défilent qu'au tap direct si peu nombreuses */ #product-images-thumbs .thumb-arrow { display: none !important; } } @media (max-width: 420px) { #product-images-thumbs .swiper-slide { flex: 0 0 44px !important; width: 44px !important; } } /* ============================================================================= FIX DESKTOP — Image produit principale trop grande ----------------------------------------------------------------------------- Le thème n'impose aucune hauteur max sur #product-images-large en desktop : l'image affiche sa taille naturelle proportionnelle à la largeur de la colonne (col-md-7 = 58% de la page), ce qui la rend disproportionnée sur les images très hautes (portrait). Plutôt que de forcer une hauteur fixe (qui recadrerait l'image / laisserait des bandes vides), on réduit la largeur MAX du bloc image : le ratio de l'image est conservé, sa hauteur diminue mécaniquement en proportion. Scope : desktop uniquement (>= 992px), ne touche pas au mobile déjà corrigé dans fix-image-principale-produit-pro.css. ============================================================================= */ @media (min-width: 992px) { body#product .row.product-info-row { align-items: flex-start !important; } /* Réduit la colonne image de 58% (col-md-7) à une largeur plafonnée, et laisse la colonne info produit récupérer l'espace libéré */ body#product .col-md-7.col-product-image { flex: 0 0 44% !important; max-width: 44% !important; width: 44% !important; } body#product .col-md-5.col-product-info { flex: 0 0 56% !important; max-width: 56% !important; width: 56% !important; } /* L'image large elle-même : plafonne sa hauteur visible, tout en gardant object-fit: contain pour ne jamais la recadrer/déformer */ #product-images-large.swiper-container { max-height: 560px !important; } #product-images-large .product-lmage-large { display: flex !important; align-items: center !important; justify-content: center !important; max-height: 560px !important; } #product-images-large .product-lmage-large img, #product-images-large picture img { max-height: 560px !important; width: auto !important; max-width: 100% !important; object-fit: contain !important; margin: 0 auto !important; display: block !important; } /* La colonne des vignettes suit la même hauteur max, pour rester visuellement alignée avec l'image large réduite */ #product-images-thumbs { max-height: 560px !important; } } /* Palier intermédiaire : grands écrans où on peut laisser un peu plus de place sans revenir au problème d'origine */ @media (min-width: 1400px) { #product-images-large.swiper-container, #product-images-large .product-lmage-large, #product-images-large .product-lmage-large img, #product-images-large picture img, #product-images-thumbs { max-height: 620px !important; } } .col.view-switcher { visibility: hidden !important; } /* ========================================================================= FIX CSS — Page "Liste des produits de la marque" (body.manufacturer) Portée : UNIQUEMENT cette page (tout est scopé sous body.manufacturer) Objectif : mise en page pro, moderne, propre en mobile / tablette / desktop Aucune police n'est modifiée ici — on ne touche pas font-family. ========================================================================= */ /* ------------------------------------------------------------------------- 1) Header de marque : titre + logo/description + bandeau accroche ------------------------------------------------------------------------- */ body.manufacturer .page-title { font-size: clamp(20px, 2.4vw, 28px); font-weight: 700; letter-spacing: 0.01em; margin-bottom: 20px; } body.manufacturer #manufacturer-description-wrapper .card { border: 1px solid #ececec; border-radius: 12px; padding: 18px 20px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04); margin-bottom: 14px; } body.manufacturer #manufacturer-short-description p, body.manufacturer #manufacturer-description p { font-size: 14.5px; line-height: 1.6; color: #3a3a3a; margin: 0; } body.manufacturer .btn-brands-more { border-radius: 20px; font-size: 13px; padding: 6px 16px; } /* Bandeau "ENVIE DU MEILLEUR..." */ body.manufacturer .envie-du-meilleur { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; background: linear-gradient(135deg, #fdf1f6 0%, #fce4ec 100%); border-radius: 16px; padding: 28px clamp(20px, 4vw, 48px); margin: 24px 0 32px; } body.manufacturer .envie-du-meilleur-text { margin-left: 22% !important; } body.manufacturer .envie-du-meilleur-text h2 { font-size: clamp(20px, 2.6vw, 30px); font-weight: 700; margin: 0 0 6px; line-height: 1.25; color: #1a1a1a; } body.manufacturer .envie-du-meilleur-text p { font-size: 14px; color: #555; margin: 0; } body.manufacturer .envie-du-meilleur-count { display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fff; border-radius: 14px; padding: 14px 26px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); min-width: 110px; } body.manufacturer .envie-du-meilleur-count .num { font-size: 28px; font-weight: 800; color: #e6007e; line-height: 1; } body.manufacturer .envie-du-meilleur-count .label { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; color: #888; margin-top: 4px; text-align: center; } /* ------------------------------------------------------------------------- 2) Barre de tri / vue grille-liste / nb par page ------------------------------------------------------------------------- */ body.manufacturer #js-product-list-top { border: 1px solid #ececec; border-radius: 12px; padding: 10px 16px; margin-bottom: 22px; background: #fff; width: 100%; max-width: 100%; overflow: hidden; box-sizing: border-box; } /* La ligne interne (view-switcher + tri + nb par page) ne doit jamais dépasser la largeur du conteneur parent */ body.manufacturer #js-product-list-top .row { width: 100%; max-width: 100%; margin: 0; flex-wrap: wrap; } body.manufacturer #js-product-list-top .row > [class*="col"] { max-width: 100%; } /* Le bloc "Pertinence" + "8" doit rester DANS la carte, aligné à droite, jamais en position absolute/fixed qui le ferait sortir du flux */ body.manufacturer #js-product-list-top .col.col-auto { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-left: auto; } body.manufacturer .products-sort-nb-dropdown { position: relative; flex-shrink: 0; } body.manufacturer .products-sort-nb-dropdown .dropdown-menu { right: 0; left: auto; min-width: 200px; } body.manufacturer .products-sort-nb-dropdown .select-title { border-radius: 8px; font-size: 13.5px; padding: 8px 14px; } body.manufacturer .view-switcher a { border-radius: 8px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; } body.manufacturer .view-switcher a.current { background: #1a1a1a; color: #fff; } /* ------------------------------------------------------------------------- 3) Grille produits — desktop / tablette / mobile ------------------------------------------------------------------------- */ .products.row.products-grid { margin-top: 55px !important; } body.manufacturer #js-product-list .products.row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 0; } body.manufacturer #js-product-list .js-product-miniature-wrapper { width: 100%; max-width: 100%; padding: 0; flex: unset; } body.manufacturer .product-miniature { transition: box-shadow 0.25s ease, transform 0.25s ease; } body.manufacturer .product-miniature:hover { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.09) !important; transform: translateY(-3px); } body.manufacturer .product-title a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; } body.manufacturer .product-flag.on-sale { background: #e6007e !important; color: #fff !important; } body.manufacturer .add-to-cart { transition: background 0.2s ease, color 0.2s ease; } body.manufacturer .add-to-cart:hover { background: #1a1a1a !important; color: #fff !important; } /* ------------------------------------------------------------------------- 4) Tablette (≤ 1024px) → 3 colonnes ------------------------------------------------------------------------- */ @media (max-width: 1024px) { body.manufacturer #js-product-list .products.row { grid-template-columns: repeat(3, 1fr); gap: 16px; } body.manufacturer .envie-du-meilleur { padding: 22px 28px; } } /* ------------------------------------------------------------------------- 5) Petite tablette / grand mobile (≤ 768px) → 2 colonnes ------------------------------------------------------------------------- */ @media (max-width: 768px) { body.manufacturer #js-product-list .products.row { grid-template-columns: repeat(2, 1fr); gap: 12px; } body.manufacturer .envie-du-meilleur { flex-direction: column; text-align: center; padding: 20px; } body.manufacturer #js-product-list-top { padding: 10px 12px; } body.manufacturer .products-sort-nb-dropdown .select-title { font-size: 12.5px; padding: 7px 10px; } } /* ------------------------------------------------------------------------- 6) Mobile (≤ 480px) → 2 colonnes serrées, tout compact ------------------------------------------------------------------------- */ @media (max-width: 480px) { body.manufacturer #js-product-list .products.row { grid-template-columns: repeat(2, 1fr); gap: 8px; } body.manufacturer .product-miniature { padding: 8px !important; } body.manufacturer .product-title a { font-size: 12.5px !important; min-height: 2.4em; } body.manufacturer .product-price { font-size: 15px !important; } body.manufacturer .product-brand { font-size: 11px !important; } body.manufacturer .add-to-cart { font-size: 11.5px !important; padding: 8px 6px !important; } body.manufacturer .envie-du-meilleur-text h2 { font-size: 18px; } body.manufacturer .envie-du-meilleur-count .num { font-size: 22px; } } /* ================================================================ MENU MOBILE PRO – POLICE AVENIR / TITRES GRANDS ================================================================ */ @media (max-width: 768px) { /* --- BASE : Avenir en priorité --- */ #_mobile_iqitmegamenu-mobile, #_mobile_iqitmegamenu-mobile * { font-family: 'Avenir', 'Avenir Next', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; } /* --- CONTENEUR PRINCIPAL --- */ #_mobile_iqitmegamenu-mobile { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; max-width: 100vw !important; height: 100vh !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; background: #f7f5f2 !important; z-index: 99999 !important; overflow-y: auto !important; box-shadow: 0 0 60px rgba(0, 0, 0, 0.12) !important; letter-spacing: 0.01em !important; } /* --- EN-TÊTE : plus d'impact --- */ .mobile-menu__header-wrapper { background: #ffffff !important; border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important; padding: 20px 24px !important; position: sticky !important; top: 0 !important; z-index: 20 !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.03) !important; } .mobile-menu__header-wrapper .mobile-menu__title { font-family: 'Avenir', 'Avenir Next', sans-serif !important; font-weight: 700 !important; font-size: 1.4rem !important; letter-spacing: 0.5px !important; color: #1a1a2e !important; text-transform: uppercase !important; background: linear-gradient(135deg, #1a1a2e 0%, #4a3a3a 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } .mobile-menu__back-btn .fa-angle-left { font-size: 1.3rem !important; color: #1a1a2e !important; } .mobile-menu__close { color: #1a1a2e !important; background: rgba(0, 0, 0, 0.04) !important; border-radius: 50% !important; width: 44px !important; height: 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; font-size: 1.2rem !important; } .mobile-menu__close:hover { background: rgba(0, 0, 0, 0.08) !important; transform: rotate(90deg) scale(1.05) !important; } /* --- CATÉGORIES PRINCIPALES : TITRES PLUS GRANDS --- */ .mobile-menu__tab { border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important; padding: 2px 0 !important; transition: 0.2s !important; } .mobile-menu__tab:hover { background: rgba(0, 0, 0, 0.015) !important; } .mobile-menu__link { font-family: 'Avenir', 'Avenir Next', sans-serif !important; font-weight: 600 !important; font-size: 1.15rem !important; color: #1a1a2e !important; padding: 14px 12px !important; border-radius: 10px !important; transition: all 0.25s ease !important; letter-spacing: 0.3px !important; } .mobile-menu__link .js-mobile-menu__tab-title { font-weight: 600 !important; font-size: 1.15rem !important; letter-spacing: 0.4px !important; } .mobile-menu__link:hover { color: #b8957a !important; background: rgba(184, 149, 122, 0.07) !important; transform: translateX(4px) !important; } /* --- FLÈCHE D'EXPANSION --- */ .mobile-menu__arrow { color: #1a1a2e !important; opacity: 0.4 !important; padding: 10px 14px !important; transition: all 0.25s ease !important; font-size: 1.1rem !important; } .mobile-menu__arrow:hover { opacity: 1 !important; transform: translateX(6px) !important; color: #b8957a !important; } /* --- SOUS-MENU : titres encore plus grands --- */ .mobile-menu__submenu { background: #fcfaf8 !important; border-left: 4px solid #b8957a !important; border-radius: 0 14px 14px 0 !important; margin: 6px 0 12px 0 !important; padding: 20px 24px !important; box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.02) !important; } .mobile-menu__submenu .mobile-menu__column-title { font-family: 'Avenir', 'Avenir Next', sans-serif !important; font-weight: 700 !important; font-size: 1rem !important; text-transform: uppercase !important; letter-spacing: 1.2px !important; color: #b8957a !important; display: block !important; margin-bottom: 12px !important; padding-bottom: 6px !important; border-bottom: 2px solid rgba(184, 149, 122, 0.15) !important; } /* --- LIENS DES SOUS-MENUS --- */ .mobile-menu__submenu .mobile-menu__links-list-li a { font-family: 'Avenir', 'Avenir Next', sans-serif !important; font-weight: 450 !important; font-size: 1rem !important; color: #2d2d44 !important; padding: 8px 0 !important; display: block !important; border-bottom: 1px solid transparent !important; transition: all 0.2s ease !important; letter-spacing: 0.2px !important; } .mobile-menu__submenu .mobile-menu__links-list-li a:hover { color: #b8957a !important; padding-left: 10px !important; border-bottom-color: rgba(184, 149, 122, 0.2) !important; font-weight: 500 !important; } /* ================================================================ CACHER : Langue, Devise et Connexion ================================================================ */ .js-top-menu-bottom, .mobile-menu__footer, .mobile-menu__language-currency, .mobile-menu__user, .mobile-menu__language-selector, .mobile-menu__currency-selector, .mobile-menu__footer .d-flex, .mobile-menu__footer .text-reset, .mobile-menu__footer a[href*="mon-compte"], .mobile-menu__footer .fa-user, .mobile-menu__footer .mr-4, .mobile-menu__footer .d-inline-block { display: none !important; } .mobile-menu__footer { height: 0 !important; padding: 0 !important; margin: 0 !important; min-height: 0 !important; } /* --- SCROLLBAR LUXE --- */ #_mobile_iqitmegamenu-mobile::-webkit-scrollbar { width: 4px !important; } #_mobile_iqitmegamenu-mobile::-webkit-scrollbar-thumb { background: #b8957a !important; border-radius: 20px !important; } #_mobile_iqitmegamenu-mobile::-webkit-scrollbar-track { background: transparent !important; } /* --- ANIMATION D'OUVERTURE (optionnel) --- */ #_mobile_iqitmegamenu-mobile { animation: mobileMenuFadeIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important; } @keyframes mobileMenuFadeIn { 0% { opacity: 0; transform: translateY(-12px) scale(0.98); } 100% { opacity: 1; transform: translateY(0) scale(1); } } } /* ========================================================================== Cart quantity touchspin — remove borders & restyle (BeautyStore theme) ========================================================================== */ /* Kill the outer input-group border/shadow */ .bootstrap-touchspin { border: none !important; box-shadow: none !important; border-radius: 0 !important; background: transparent; } /* The number input itself */ .bootstrap-touchspin .form-control.input-qty, .bootstrap-touchspin .block-cart-product-quantity, .bootstrap-touchspin input[type="number"] { border: none !important; box-shadow: none !important; background: transparent; text-align: center; font-weight: 600; color: #2b2b2b; padding: 0 6px; -moz-appearance: textfield; /* hide native spinners in Firefox */ } /* Hide native number spinners (Chrome/Safari/Edge) since we use custom ones */ .bootstrap-touchspin input[type="number"]::-webkit-outer-spin-button, .bootstrap-touchspin input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Remove focus ring border */ .bootstrap-touchspin .form-control.input-qty:focus, .bootstrap-touchspin input[type="number"]:focus { border: none !important; box-shadow: none !important; outline: none !important; } /* Custom up/down button column */ .bootstrap-touchspin .input-group-btn-vertical { border: none !important; background: transparent; } .bootstrap-touchspin .btn-touchspin { border: none !important; background: transparent !important; box-shadow: none !important; padding: 0 4px; color: #999; transition: color .15s ease; } .bootstrap-touchspin .btn-touchspin:hover { color: #d4a373; /* swap to your theme accent color */ background: transparent !important; } .bootstrap-touchspin .btn-touchspin:active, .bootstrap-touchspin .btn-touchspin:focus { box-shadow: none !important; outline: none !important; } /* Optional: give the whole widget a subtle pill instead of a hard border, if you still want SOME visual separation */ .bootstrap-touchspin.themed-pill { background: #f7f7f7; border-radius: 20px; padding: 2px 8px; } /* ============================================================================= FALLBACK ICÔNES — Menu mobile sans dépendance à FontAwesome ----------------------------------------------------------------------------- Remplace les glyphes FontAwesome (fa-angle-left, fa-angle-right, fa-times, fa-user) par des caractères Unicode / SVG natifs, au cas où la police FontAwesome ne se charge pas correctement sur le menu mobile. ============================================================================= */ /* IMPORTANT : toutes les règles ci-dessous sont scopées sous #_mobile_iqitmegamenu-mobile (le panneau du menu mobile) afin de ne JAMAIS toucher aux icônes du header (compte, panier, recherche, burger) qui utilisent aussi des classes fa-user / fa / etc. en dehors du menu. */ /* Neutralise la dépendance à la police FontAwesome, UNIQUEMENT dans le menu mobile */ #_mobile_iqitmegamenu-mobile .fa, #_mobile_iqitmegamenu-mobile .mobile-menu__arrow i, #_mobile_iqitmegamenu-mobile .mobile-menu__back-btn span, #_mobile_iqitmegamenu-mobile .mobile-menu__close span { font-family: Arial, sans-serif !important; font-style: normal !important; font-weight: normal !important; -webkit-font-smoothing: antialiased !important; } /* ---- Flèches (retour / expansion sous-menu) — menu mobile uniquement ---- */ #_mobile_iqitmegamenu-mobile .fa-angle-left:before, #_mobile_iqitmegamenu-mobile .fa-angle-right:before { display: inline-block !important; font-size: 22px !important; font-weight: 300 !important; line-height: 1 !important; transform: scaleY(1.4) !important; /* épaissit visuellement le chevron fin */ } #_mobile_iqitmegamenu-mobile .fa-angle-left:before { content: "\2039" !important; /* ‹ */ } #_mobile_iqitmegamenu-mobile .fa-angle-right:before { content: "\203A" !important; /* › */ } /* ---- Croix de fermeture (×) — menu mobile uniquement ---- */ #_mobile_iqitmegamenu-mobile .mobile-menu__close .fa-times { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; } #_mobile_iqitmegamenu-mobile .fa-times:before { content: "\2715" !important; /* ✕ */ display: inline-block !important; font-size: 18px !important; font-weight: 400 !important; line-height: 1 !important; color: currentColor !important; } /* ---- Icône utilisateur DANS LE PIED DU MENU MOBILE UNIQUEMENT (le lien "Votre compte" en bas du panneau — PAS l'icône compte du header) ---- */ #_mobile_iqitmegamenu-mobile .mobile-menu__user .fa-user { display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 0 !important; /* masque tout caractère résiduel */ } #_mobile_iqitmegamenu-mobile .mobile-menu__user .fa-user:before { content: "" !important; display: inline-block !important; width: 18px !important; height: 18px !important; background-color: currentColor !important; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") !important; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") !important; -webkit-mask-size: contain !important; mask-size: contain !important; -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important; -webkit-mask-position: center !important; mask-position: center !important; } /* ---- S'assure que le bouton close reste cliquable et bien cadré, maintenant que le glyphe est fiable et visible — menu mobile uniquement ---- */ #_mobile_iqitmegamenu-mobile .mobile-menu__close.js-mobile-menu__close { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; height: 36px !important; cursor: pointer !important; pointer-events: auto !important; } #main-page-content h1.h1.page-title { display: none !important; } body#index { @media (max-width: 767px) { .elementor-products-carousel .swiper-slide { width: 100% !important; padding: 3px 3px !important; /* ← celle-ci */ } } } /* ============================================================ CARROUSEL PRODUITS - 2 CARTES SUR MOBILE / 3 SUR TABLETTE ============================================================ */ /* --- MOBILE (≤ 767px) : 2 cartes --- */ @media (max-width: 767px) { .swiper-slide, .swiper-slide[style*="width:"] { width: calc(50% - 8px) !important; max-width: calc(50% - 8px) !important; min-width: calc(50% - 8px) !important; flex: 0 0 calc(50% - 8px) !important; flex-shrink: 0 !important; margin-right: 8px !important; margin-left: 0 !important; padding: 0 4px !important; box-sizing: border-box !important; } .swiper-slide:nth-child(2n) { margin-right: 0 !important; } .swiper-wrapper { display: flex !important; flex-wrap: nowrap !important; width: 100% !important; gap: 0 !important; } .elementor-products-carousel, .swiper-default-carousel, .category-products .block-content, .swiper-container-wrapper { overflow: hidden !important; width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; } .product-miniature { padding: 10px !important; width: 100% !important; max-width: 100% !important; margin: 0 auto !important; box-sizing: border-box !important; } .product-miniature .thumbnail-container { height: 160px !important; min-height: 160px !important; max-height: 200px !important; aspect-ratio: unset !important; margin-bottom: 6px !important; } .product-miniature .thumbnail-container img { width: 100% !important; height: 100% !important; object-fit: contain !important; } .product-miniature .product-brand { font-size: 10px !important; margin-bottom: 1px !important; } .product-miniature .product-title a { font-size: 11px !important; line-height: 1.3 !important; min-height: 2.6em !important; } .product-miniature .product-price { font-size: 14px !important; font-weight: 700 !important; } .product-miniature .regular-price { font-size: 10px !important; } .product-miniature .regular-price::before { font-size: 9px !important; } .product-miniature .add-to-cart, .product-miniature .btn-product-list { font-size: 10px !important; padding: 6px 8px !important; height: 32px !important; min-height: 32px !important; border-radius: 4px !important; } .product-miniature .variant-links .color { width: 16px !important; height: 16px !important; } .product-miniature .bz-colors-label { font-size: 10px !important; } .elementor-swiper-button, .swiper-button-prev, .swiper-button-next { display: flex !important; visibility: visible !important; opacity: 1 !important; width: 28px !important; height: 28px !important; background: rgba(255, 255, 255, 0.9) !important; border-radius: 50% !important; border: 1px solid #e8e8e8 !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important; z-index: 10 !important; } .elementor-swiper-button-prev, .swiper-button-prev { left: 2px !important; right: auto !important; } .elementor-swiper-button-next, .swiper-button-next { right: 2px !important; left: auto !important; } .js-product-miniature-wrapper { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; } } /* --- TABLETTE (768px - 1024px) : 3 cartes --- */ @media (min-width: 768px) and (max-width: 1024px) { .swiper-slide, .swiper-slide[style*="width:"] { width: calc(33.333% - 10px) !important; max-width: calc(33.333% - 10px) !important; min-width: calc(33.333% - 10px) !important; flex: 0 0 calc(33.333% - 10px) !important; flex-shrink: 0 !important; margin-right: 10px !important; margin-left: 0 !important; padding: 0 4px !important; box-sizing: border-box !important; } .swiper-slide:nth-child(3n) { margin-right: 0 !important; } .swiper-wrapper { display: flex !important; flex-wrap: nowrap !important; width: 100% !important; gap: 0 !important; } .elementor-products-carousel, .swiper-default-carousel, .category-products .block-content, .swiper-container-wrapper { overflow: hidden !important; width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; } .product-miniature { padding: 12px !important; width: 100% !important; max-width: 100% !important; margin: 0 auto !important; box-sizing: border-box !important; } .product-miniature .thumbnail-container { height: 180px !important; min-height: 180px !important; max-height: 220px !important; aspect-ratio: unset !important; margin-bottom: 8px !important; } .product-miniature .thumbnail-container img { width: 100% !important; height: 100% !important; object-fit: contain !important; } .product-miniature .product-brand { font-size: 11px !important; margin-bottom: 2px !important; } .product-miniature .product-title a { font-size: 12px !important; line-height: 1.3 !important; min-height: 2.6em !important; } .product-miniature .product-price { font-size: 16px !important; font-weight: 700 !important; } .product-miniature .add-to-cart, .product-miniature .btn-product-list { font-size: 11px !important; padding: 8px 10px !important; height: 36px !important; min-height: 36px !important; border-radius: 4px !important; } .elementor-swiper-button, .swiper-button-prev, .swiper-button-next { display: flex !important; visibility: visible !important; opacity: 1 !important; width: 32px !important; height: 32px !important; background: rgba(255, 255, 255, 0.9) !important; border-radius: 50% !important; border: 1px solid #e8e8e8 !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important; z-index: 10 !important; } .elementor-swiper-button-prev, .swiper-button-prev { left: 2px !important; right: auto !important; } .elementor-swiper-button-next, .swiper-button-next { right: 2px !important; left: auto !important; } .js-product-miniature-wrapper { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; } } /* --- TRÈS PETITS MOBILES (< 400px) : 2 cartes adaptées --- */ @media (max-width: 399px) { .swiper-slide, .swiper-slide[style*="width:"] { width: calc(50% - 4px) !important; max-width: calc(50% - 4px) !important; min-width: calc(50% - 4px) !important; flex: 0 0 calc(50% - 4px) !important; margin-right: 4px !important; padding: 0 2px !important; } .swiper-slide:nth-child(2n) { margin-right: 0 !important; } .product-miniature { padding: 6px !important; } .product-miniature .thumbnail-container { height: 120px !important; min-height: 120px !important; max-height: 150px !important; } .product-miniature .product-title a { font-size: 9px !important; } .product-miniature .product-price { font-size: 12px !important; } .product-miniature .product-brand { font-size: 8px !important; } .product-miniature .add-to-cart, .product-miniature .btn-product-list { font-size: 8px !important; padding: 4px 6px !important; height: 26px !important; min-height: 26px !important; } .product-miniature .variant-links .color { width: 12px !important; height: 12px !important; } .elementor-swiper-button, .swiper-button-prev, .swiper-button-next { width: 22px !important; height: 22px !important; } } /* ========================================================= FIX RESPONSIVE - Carrousel "Complétez votre routine" 1 carte visible à la fois sur mobile & tablette ========================================================= */ @media (max-width: 991px) { .category-products .swiper-container .swiper-wrapper { /* on laisse Swiper gérer le transform, on ajuste juste les slides */ } .category-products .swiper-slide { width: 100% !important; flex-shrink: 0; } .category-products .product-miniature { width: 100% !important; max-width: 100% !important; } /* Optionnel : réduire le padding interne de la carte sur mobile */ .category-products .product-miniature { padding: 10px !important; } /* Image un peu plus compacte */ .category-products .thumbnail-container { max-width: 220px; margin: 0 auto; } /* Titre / marque plus lisibles sur petit écran */ .category-products .product-title a { font-size: 14px !important; } .category-products .product-price { font-size: 18px !important; } /* Pagination (points) plus visible */ .category-products .swiper-pagination { margin-top: 10px; position: relative; } /* Cache les flèches prev/next sur mobile (swipe tactile suffit) */ .category-products .swiper-button-prev, .category-products .swiper-button-next { display: none !important; } } /* Tablette : légère variante si vous voulez un poil plus d'air */ @media (min-width: 768px) and (max-width: 991px) { .category-products .product-miniature { padding: 16px !important; } .category-products .thumbnail-container { max-width: 260px; } } /* Petit mobile (<= 480px) : resserrer encore */ @media (max-width: 480px) { .category-products .thumbnail-container { max-width: 180px; } .category-products .product-title a { font-size: 13px !important; } .category-products .product-price { font-size: 16px !important; } } /* ========================================================================= FIX MOBILE — Bouton "Ajouter au panier" + cœur wishlist sur la MÊME ligne. Les colonnes Bootstrap (.col-12) empilaient tout verticalement sur mobile : on neutralise ce comportement pour ces 3 colonnes précises. Bouton légèrement réduit (ne remplit plus 100% de l'espace restant). ========================================================================= */ @media (max-width: 767px) { body#product .product-add-to-cart .row.extra-small-gutters.product-quantity { display: flex !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: 8px !important; margin: 0 !important; } body#product .product-add-to-cart .product-quantity > .col-add-qty, body#product .product-add-to-cart .product-quantity > .col-add-btn, body#product .product-add-to-cart .product-quantity > .col-add-wishlist { flex: 0 0 auto !important; max-width: none !important; width: auto !important; padding: 0 !important; } body#product .col-add-qty { display: none !important; } body#product .col-add-btn { flex: 0 1 82% !important; min-width: 0 !important; } body#product .product-add-to-cart .add-to-cart { width: 75% !important; max-width: none !important; } body#product .col-add-wishlist { flex-shrink: 0 !important; } body#product #iqit-wishlist-product-btn { display: flex !important; align-items: center !important; justify-content: center !important; background: transparent !important; border: 1px solid #1a1a1a !important; border-radius: 10px !important; width: 48px !important; height: 48px !important; } body#product #iqit-wishlist-product-btn i { color: #1a1a1a !important; font-size: 18px !important; } } .elementor-element.elementor-element-xy5ngqi .elementor-widget-container { margin: 0 -169px -2px 0 !important; } .iqitfreedeliverycount .ifdc-bar-fill { width: var(--progress); } .iqitfreedeliverycount.hidden-xs-up { display: block !important; } /* ========================================================================= FIX — Supprime la ligne noire verticale sur les radios de livraison non sélectionnés (artefact visuel du thème sur .custom-radio) ========================================================================= */ .delivery-option .custom-radio { position: relative !important; } .delivery-option .custom-radio span { display: inline-block !important; width: 18px !important; height: 18px !important; border-radius: 50% !important; border: 1.5px solid #ccc !important; background: #fff !important; position: relative !important; } /* Supprime tout pseudo-élément parasite (ligne, trait, curseur) */ .delivery-option .custom-radio span::before, .delivery-option .custom-radio span::after { content: none !important; display: none !important; border: none !important; background: none !important; width: 0 !important; height: 0 !important; } /* Point central uniquement quand coché */ .delivery-option .custom-radio input[type="radio"]:checked + span { border-color: #e6007e !important; } .delivery-option .custom-radio input[type="radio"]:checked + span::before { content: "" !important; display: block !important; width: 10px !important; height: 10px !important; border-radius: 50% !important; background: #e6007e !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; } /* Cache visuellement l'input natif tout en le gardant cliquable/accessible */ .delivery-option .custom-radio input[type="radio"] { position: absolute !important; opacity: 0 !important; width: 18px !important; height: 18px !important; margin: 0 !important; cursor: pointer !important; z-index: 2 !important; } .elementor-displayFooter .elementor-element-xgvdla7 .swiper-button-prev, .elementor-displayFooter .elementor-element-xgvdla7 .swiper-button-next { display: none !important; } /* Cache les flèches de CETTE section (paiement) */ .elementor-element-lj5keql .swiper-button-prev, .elementor-element-lj5keql .swiper-button-next, .elementor-element-lj5keql .swiper-section-button { display: none !important; } /* Centre le texte "Payez en toute sécurité avec" */ .ps-pay-label { justify-content: center; text-align: center; width: 100%; } /* ============================================================================= FIX — Image produit trop petite dans .category-products (carrousel "COMPLÉTEZ VOTRE ROUTINE"), mobile ET tous écrans. ----------------------------------------------------------------------------- Cause : plusieurs règles .thumbnail-container définies à différents endroits de custom-global.css se contredisent (max-width fixe en px, pas de width:100%, object-fit mal combiné). Ce bloc gagne la cascade grâce à une spécificité renforcée + !important, et remplace TOUTES les anciennes valeurs par une seule logique cohérente : l'image remplit toute la largeur disponible de la carte, centrée, sans jamais déborder ni rester minuscule dans un coin. ============================================================================= */ /* Conteneur : occupe toute la largeur de la carte, hauteur proportionnelle */ section.category-products .thumbnail-container, .category-products .product-miniature .thumbnail-container { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; aspect-ratio: 1 / 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; background: #fafafa !important; border-radius: 8px !important; margin: 0 0 12px 0 !important; padding: 0 !important; } /* Le lien et la balise <picture> doivent aussi remplir tout l'espace, sinon l'image garde sa taille intrinsèque même si le conteneur est grand */ section.category-products .thumbnail-container a.thumbnail, section.category-products .thumbnail-container picture, .category-products .product-miniature .thumbnail-container a.thumbnail, .category-products .product-miniature .thumbnail-container picture { width: 100% !important; height: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* L'image elle-même : remplit tout le conteneur, contenue proprement */ section.category-products .thumbnail-container img, .category-products .product-miniature .thumbnail-container img { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; min-width: 0 !important; min-height: 0 !important; object-fit: contain !important; object-position: center center !important; display: block !important; margin: 0 auto !important; } /* Neutralise explicitement toute ancienne règle max-width en px qui pourrait encore traîner ailleurs dans le fichier pour ce même sélecteur, sur mobile */ @media (max-width: 767px) { section.category-products .thumbnail-container, .category-products .product-miniature .thumbnail-container { width: 100% !important; max-width: 100% !important; } } @media (max-width: 480px) { section.category-products .thumbnail-container, .category-products .product-miniature .thumbnail-container { width: 100% !important; max-width: 100% !important; } } body#registration .custom-checkbox:has(#ff_psgdpr) { display: none !important; } body#registration .form-group label.required::after { display: none !important; content: none !important; } @media (max-width: 767px) { #index #wrapper, #module-iqitelementor-Preview.elementor-landing-body #wrapper { padding-top: 0 !important; margin-top: -57px !important; } #index, #module-iqitelementor-Preview.elementor-landing-body { padding-top: 0 !important; margin-top: 0 !important; } }