.iqitfake{ display: none;} @charset "UTF-8"; /*** Style mixins ***/ /*** Variables mixins and functions ***/ .container, .elementor-section.elementor-section-boxed > .elementor-container { max-width: 1270px; } a:link:not(.nav-link):not(.btn), a:visited:not(.nav-link):not(.btn) { color: #777777; } a:hover:not(.nav-link):not(.btn) { color: #333333; } .pagination .page-list li:hover { border-color: #333333; } .pagination .page-list li.current { border-color: #333333; } .pagination .page-list li.current a { color: #333333; } #mobile-header { border-bottom: solid 1px #e3e3e3; } #mobile-header .mobile-main-bar { padding-top: 1.4285714286rem; padding-bottom: 1.4285714286rem; } #mobile-header .m-nav-btn { color: #777777; } #mobile-header .m-nav-btn:hover { color: #333333; } #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: 'Josefin Sans', sans-serif; } #blockcart-content { background: #ffffff; 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: #dedede; color: #2e2e2e; } .btn-secondary:not(:disabled):not(.disabled):active { background: #dedede; 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: #dedede; color: #2e2e2e; border: solid 1px #e3e3e3; } /*** Primary button ***/ .btn-primary, .btn-primary.disabled, .btn-primary:disabled { background: #000000; 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: #333333; color: #ffffff; } .btn-primary:not(:disabled):not(.disabled):active { background: #333333; color: #ffffff; } #wrapper .breadcrumb { padding-top: 0.7142857143rem; padding-bottom: 0.7142857143rem; margin-top: -1.0714285714rem; margin-bottom: 1.0714285714rem; font-size: 0.8571428571rem; font-style: normal; font-weight: normal; text-transform: none; color: #8f8f8f; } #wrapper .breadcrumb li:after { color: #8f8f8f; } #wrapper .breadcrumb a { color: #8f8f8f; } /*** 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: #000000; } .custom-radio input[type=radio]:checked + span { background-color: #000000; } .custom-checkbox input[type=checkbox] + span:not(.color), .custom-radio { background: #ffffff; color: #000000; 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(194, 194, 194, 0.7); } .modal-content { background: #ffffff; border: none 1px; } .js-quickview-np-btn { background: #ffffff; } /*** Notifications ***/ .ns-box { background: #ca5058; color: #ffffff; border: none 1px; } .product-price { color: #ad1f00; } .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: #000000; color: #ffffff; } #back-to-top:hover { background: #333333; color: #ffffff; } #header, #checkout-header { background: #f7f1e6; border-top: none 1px #e3d6be; border-bottom: solid 1px #e3d6be; } .sticky-desktop-wrapper #desktop-header.stuck-header { background: #f7f1e6; border-bottom: solid 1px #e3d6be; } #header .header-nav { color: #eadfc9; background: #1f140d; border-bottom: none 1px; padding-top: 0.5714285714rem; padding-bottom: 0.5714285714rem; font-size: 0.8571428571rem; } #header .header-nav a { color: #eadfc9; } #header .header-nav a:hover { color: #d4b77e; } #header .header-nav .social-links._topbar { font-size: 1rem; } .header-top { padding-top: 1rem; padding-bottom: 1rem; color: #1f140d; } .header-top a:not(.btn):not(.nav-link) { color: #1f140d; } .header-top a:not(.btn):not(.nav-link):hover { color: #6b3a1e; } .header-top .form-search-control { background: #ffffff; color: #1f140d; border: solid 1px #c9b38c; } .header-top input.form-search-control::-webkit-input-placeholder { color: #1f140d; } .header-top input.form-search-control:-moz-placeholder { color: #1f140d; } .header-top input.form-search-control:-ms-input-placeholder { color: #1f140d; } .header-top input.form-search-control:-moz-placeholder { color: #1f140d; } .header-top .search-btn { color: #1f140d; } .header-top .header-btn-w .header-btn > .icon { font-size: 1.4285714286rem; display: block; } .header-top .header-btn-w .header-btn .title { display: none !important; } .header-top .header-cart-default a.cart-toogle { background: #000000; color: #1f140d; padding: 0.6428571429rem 0.6428571429rem; } .header-top .header-cart-default a.cart-toogle:hover { color: #1f140d; } .header-top a.header-cart-btn:not(:hover) { color: #1f140d; } .stuck-header .header-top { padding-top: 0.5714285714rem; padding-bottom: 0.5714285714rem; } .sticky-desktop-wrapper #desktop-header.stuck-header, .stuck-menu { background: #ffffff; } .cart-products-count-btn { background: #6b3a1e; color: #f7f1e6; } .desktop-header-style-1 .search-widget, .desktop-header-style-2 .search-widget { max-width: 50%; } /*** HORIZONTAL MENU ***/ #iqitmegamenu-horizontal { background: #000000; border-top: none 3px #521919; border-right: none 3px #38b82c; border-bottom: none 3px #457deb; 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.5714285714rem; max-width: 14.2857142857rem; color: #ffffff; padding-left: 1.0714285714rem; padding-right: 1.0714285714rem; border-left: groove 2px rgba(87, 87, 87, 0.57); } #sticky-cart-wrapper a.header-cart-btn:not(:hover) { color: #ffffff; } #sticky-cart-wrapper .ps-shoppingcart.side-cart #blockcart-content { top: -1.2142857143rem; } .cbp-vertical-on-top .cbp-vertical-title { line-height: 3.5714285714rem !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: #f8f8f8; color: #333333; } .cbp-horizontal .cbp-tab-title { font-size: 1rem; font-style: normal; font-weight: normal; text-transform: none; line-height: 1em; } .cbp-horizontal .cbp-legend { background: #ca5058; color: #ffffff; } .cbp-horizontal .cbp-mainlink-icon, .cbp-horizontal .cbp-mainlink-iicon { font-size: 1.4285714286rem; max-height: 1.4285714286rem; } @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.7142857143rem; padding-right: 0.7142857143rem; } } #cbp-hrmenu .cbp-hrsub { transform: translateY(-10px); } #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; } .iqitmegamenu-submenu-container { padding: 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: normal; 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-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.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: 1rem; font-style: normal; font-weight: normal; text-transform: none; } .cbp-hrmenu .cbp-hrsub-inner, .cbp-hrmenu ul.cbp-hrsub-level2 { background: #ffffff; border: none 1px #37a625; box-shadow: 0px 15px 25px 0px rgba(74, 63, 63, 0.15); } .cbp-hrmenu .cbp-hrsub-inner, .cbp-hrmenu .cbp-hrsub-inner a, .cbp-hrmenu .cbp-hrsub-inner a:link { color: !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-hrsub-inner .cbp-column-title, .cbp-hrmenu .cbp-hrsub-inner a.cbp-column-title:link { color: #333333 !important; border-bottom: none 3px #c2bc29; font-size: 1rem; font-style: normal; font-weight: bold; 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: #595050 !important; } #iqitmegamenu-mobile { background: #ffffff; } #iqitmegamenu-mobile li > ul.mobile-menu__submenu--accordion .mobile-menu__tab { min-height: 3.8571428571rem; } #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.1428571429rem; padding-bottom: 1.1428571429rem; } #iqitmegamenu-mobile li > ul.mobile-menu__submenu--accordion .mobile-menu__link { color: #595050 !important; padding-top: 1.1428571429rem; padding-bottom: 1.1428571429rem; font-size: 1.2857142857rem; font-style: normal; font-weight: normal; text-transform: none; } .col-mobile-menu-push #iqitmegamenu-mobile { border: none 1px; } .mobile-menu__submenu { background: #ffffff; } .mobile-menu__tab { border-bottom: solid 1px #ebebeb; min-height: 4.4285714286rem; } .mobile-menu__link { color: #595050 !important; padding-top: 1.4285714286rem; padding-bottom: 1.4285714286rem; font-size: 1.5714285714rem; font-style: normal; font-weight: normal; text-transform: none; } .mobile-menu__arrow { padding-top: 1.4285714286rem; padding-bottom: 1.4285714286rem; color: #595050; font-size: 1.5714285714rem; } .mobile-menu__tab-icon { font-size: 1.5714285714rem; } .mobile-menu__tab-icon--img { max-height: 1.5714285714rem; } .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; background-color: #f4f4f4; border-bottom: none 1px; } .mobile-menu__title { font-size: 1.5714285714rem; font-style: normal; font-weight: normal; text-transform: none; } .mobile-menu__column-title { font-size: 1.5714285714rem; font-style: normal; font-weight: bold; text-transform: uppercase; color: #595050 !important; } .mobile-menu__column { font-size: 1.1428571429rem; 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: 0.5714285714rem; } .mobile-menu__links-list-li { padding-top: 0.4285714286rem; padding-bottom: 0.4285714286rem; } .mobile-menu__close, .mobile-menu__back-btn { color: #595050; } .mobile-menu__footer { border-top: none 1px; color: #595050; background-color: #f4f4f4; } /*** PS_FacatedSearch ***/ /*** Carousels ***/ .swiper-button-next, .swiper-button-prev { background: #333333; color: #ffffff; } .swiper-pagination-bullet { background: #333333; } /*** Product miniature ***/ .products.row { margin: 0rem; } .products.row > .col, .products.row > [class*="col-"] { padding: 0rem; } .swiper-container-wrapper { margin: 0rem; } .swiper-container-wrapper .products.swiper-container { padding: 0rem; } .swiper-container-wrapper .product-carousel { padding: 0rem; } .swiper-products-carousel.swiper-arrows-above .swiper-button { margin: 0rem; } .product-miniature { border: none 1px; outline: 1px none transparent; } .product-miniature .thumbnail-container .product-thumbnail-second { position: absolute; top: 0; left: 0; right: 0; opacity: 0; transition: opacity 0.3s ease; backface-visibility: hidden; } .product-miniature .thumbnail-container:hover .product-thumbnail-second { opacity: 1; } .product-miniature .thumbnail-container:hover .product-thumbnail-first { opacity: 0; } .product-miniature .thumbnail-container:hover picture:last-child .product-thumbnail-first { opacity: 1; } .product-miniature-grid .product-title { font-size: 1rem; font-style: normal; font-weight: normal; text-transform: none; } .product-miniature-grid .product-price { font-size: 1rem; font-style: normal; font-weight: normal; text-transform: none; } @media (hover: hover) { .product-miniature:hover { outline: none 1px; box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.15); } } .product-miniature-grid .product-functional-buttons { background: #ffffff; } .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: !important; } .products-grid .product-miniature .product-category-name { display: none !important; } .products-grid .product-miniature .product-reference { display: none !important; } .products-grid .product-miniature .product-brand { display: none !important; } .products-grid .product-miniature .product-description-short { display: none !important; } .products-grid .product-miniature .product-add-cart { display: none !important; } .products-grid .product-miniature .flag-discount-value { display: none !important; } .product-miniature .input-qty, .product-miniature .input-group-add-cart .bootstrap-touchspin { display: none !important; } .btn-product-list { padding: 0.5357142857rem 1.0714285714rem; background: black; color: #ffffff; border: none 1px; } .btn-product-list:hover { background: #ffffff; color: #000000; } .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; } .products-grid .product-miniature-layout-3 .product-description { background: rgba(40, 44, 51, 0.93); } .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(2, 1fr); } @media (min-width: 768px) { .layout-full-width .swiper-default-carousel:not(.swiper-initialized) .swiper-wrapper { grid-template-columns: repeat(3, 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(2, 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(5, 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(4, 1fr); } } .product_header_container .product-price, .product_p_price_container .product-price { font-size: 1.2857142857rem; font-style: normal; font-weight: bold; text-transform: none; } #product .images-container .product-cover { border: none 1px; } .images-container .swiper-button-arrow, #product .product-cover .expander > span, #product-modal .modal-body .swiper-button-arrow { color: #ffffff; background: #333333; } .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 .product-cover .expander { color: #ffffff; background: #333333; } #product .product-cover .expander:hover { opacity: 0.6 !important; } .product-variants > .product-variants-item { display: inline-block; margin-right: 1rem; vertical-align: top; } #wrapper { border-top: none 1px; border-bottom: none 1px; padding-top: 1.0714285714rem; padding-bottom: 1.0714285714rem; color: #777777; } #index #wrapper, #module-iqitelementor-Preview.elementor-landing-body #wrapper { padding-top: 1.4285714286rem; padding-bottom: 1.4285714286rem; } #content-wrapper .page-title { color: #333333; font-size: 1.5714285714rem; font-style: normal; font-weight: bold; text-transform: none; border-bottom: solid 1px #e3e3e3; margin-bottom: 0.8em; padding-bottom: 0.5em; } #content-wrapper .page-title a:link, #content-wrapper .page-title a:visited { color: #333333; } #content-wrapper .section-title { color: #333333; font-size: 1.1428571429rem; font-style: normal; font-weight: bold; text-transform: none; border-bottom: solid 1px #e3e3e3; margin-bottom: 0.8em; padding-bottom: 0.5em; } #content-wrapper .section-title a:link, #content-wrapper .section-title a:visited { color: #333333; } .nav-tabs .nav-link { color: #000000; font-size: 1.1428571429rem; 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: #333333; font-size: 1rem; font-style: normal; font-weight: bold; text-transform: none; border-bottom: solid 1px #e3e3e3; margin-bottom: 0.8em; padding-bottom: 0.5em; } #wrapper .block-title a:link, #wrapper .block-title a:visited { color: #333333; } #left-column .block, #right-column .block { border: none 1px; } #footer, #checkout-footer { background: #f8f8f8; } #footer .ps-emailsubscription-block .newsletter-input-group, #checkout-footer .ps-emailsubscription-block .newsletter-input-group { border: solid 1px #e3e3e3; 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: #777777; } #footer .ps-emailsubscription-block .newsletter-input-group .btn-subscribe:hover, #checkout-footer .ps-emailsubscription-block .newsletter-input-group .btn-subscribe:hover { color: #bd4e0f; } #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: 1.3571428571rem; } #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: #333333; font-size: 1rem; font-style: normal; font-weight: bold; text-transform: none; border-bottom: solid 1px #e3e3e3; margin-bottom: 0.8em; padding-bottom: 0.5em; } #footer .block-title a:link, #footer .block-title a:visited, #checkout-footer .block-title a:link, #checkout-footer .block-title a:visited { color: #333333; } #footer-container-first { border-top: none 1px; padding-top: 2.1428571429rem; padding-bottom: 2.1428571429rem; background: #212121; 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: none 1px; padding-top: 2.8571428571rem; padding-bottom: 1.8571428571rem; color: #777777; } #footer-container-main a, #checkout-footer a { color: #777777; } #footer-container-main a:hover, #checkout-footer a:hover { color: #333333; } #footer-copyrights { border-top: none 1px; background: #ffffff; padding-top: 1.0714285714rem; padding-bottom: 1.0714285714rem; } @media (max-width: 767px) { #footer .block-toggle { width: 100%; flex-basis: initial; } #footer .block-toggle > .block-title { cursor: pointer; } #footer .block-toggle > .block-title span::after { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: ""; margin-left: 10px; } #footer .block-toggle > .block-content { display: none; } #footer .block-toggle._toggled > .block-content { display: block; } #footer .block-toggle._toggled .block-title span::after { content: ""; } #footer .footer-style-inline .block-title { display: block !important; max-width: 100%; } #footer .footer-style-inline .block-content { display: block; width: 100%; margin-top: 1rem; } } #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; } /* ========================================================================== DEGLET MARYOUMA — habillage PrestaShop 8.2 / thème Warehouse (iqit) v2 — structure inspirée de la démo Warehouse 13 « Organic » -------------------------------------------------------------------------- Où le coller : • Thème enfant (recommandé) : themes/warehousechild/assets/css/custom.css • ou : Modules > Warehouse - Theme editor > Code > Custom CSS Organisation : 1. Tokens (couleurs, typo, espaces) — modifier ICI uniquement 2. Base 3. Composants .mry-* (blocs HTML Elementor, voir theme/elementor/) 4. Surcharges Warehouse (couleurs / typo / bordures, jamais la grille) ========================================================================== */ @import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;600;700&family=Jost:wght@400;500&family=Amiri:wght@400;700&display=swap"); /* 1. TOKENS ================================================================ */ :root { /* Neutres chauds, comme la lettre de présentation */ --mry-bg: #FFFDF9; --mry-surface: #FFFFFF; --mry-surface-2: #F4EEE3; /* bande beige (atouts) */ --mry-surface-3: #F8F5EF; /* pied de page */ --mry-border: rgba(42, 32, 24, 0.10); --mry-border-strong: rgba(42, 32, 24, 0.20); --mry-text: #2A2018; /* brun datte */ --mry-text-muted: #76695B; /* L'or du logo : un décor (#C0903F) et un or lisible pour textes et boutons (#8C6420, 5,2:1) */ --mry-gold: #C0903F; --mry-gold-soft: rgba(192, 144, 63, 0.14); --mry-accent: #8C6420; --mry-accent-hover: #6E4E17; --mry-on-accent: #FFFDF9; /* Bande « variétés » */ --mry-deep: #2A1E14; --mry-on-deep: #F4EADB; --mry-on-deep-muted: rgba(244, 234, 219, 0.70); --mry-success: #2E7D4F; --mry-whatsapp: #1F9D55; --mry-font-display: "Josefin Sans", "Century Gothic", system-ui, sans-serif; --mry-font-body: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif; --mry-font-arabic: "Amiri", "Noto Naskh Arabic", serif; --mry-text-xs: 0.75rem; --mry-text-sm: 0.875rem; --mry-text-base: 1rem; --mry-text-lg: 1.1875rem; --mry-text-xl: 1.5rem; --mry-text-2xl: 2.125rem; --mry-text-3xl: 2.75rem; --mry-text-4xl: 4rem; --mry-space-1: 4px; --mry-space-2: 8px; --mry-space-3: 12px; --mry-space-4: 16px; --mry-space-5: 24px; --mry-space-6: 32px; --mry-space-7: 48px; --mry-space-8: 64px; --mry-space-9: 96px; --mry-container: 1320px; --mry-gutter: 16px; --mry-radius-sm: 2px; --mry-radius-md: 4px; --mry-shadow: 0 1px 2px rgba(42, 32, 24, 0.05), 0 12px 32px rgba(42, 32, 24, 0.10); --mry-ease: cubic-bezier(0.2, 0.8, 0.2, 1); --mry-dur: 220ms; } /* 2. BASE ================================================================== */ body { background: var(--mry-bg); color: var(--mry-text); font-family: var(--mry-font-body); font-size: var(--mry-text-base); line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: var(--mry-accent); text-underline-offset: 3px; text-decoration-thickness: 1px; } a:hover, a:focus { color: var(--mry-accent-hover); } :focus-visible { outline: 2px solid var(--mry-accent); outline-offset: 2px; } [lang="ar"], .mry-ar { font-family: var(--mry-font-arabic); } /* 3. COMPOSANTS .mry-* ===================================================== */ .mry-container { width: min(100% - 2 * var(--mry-gutter), var(--mry-container)); margin-inline: auto; } .mry-section { padding-block: var(--mry-space-9); } @media (max-width: 767px) { .mry-section { padding-block: var(--mry-space-8); } } .mry-icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; } /* Titres de section centrés avec palmier (comme la démo 13) */ .mry-title { text-align: center; max-width: 640px; margin: 0 auto var(--mry-space-7); } .mry-title__mark { display: block; width: 40px; height: 40px; margin: 0 auto var(--mry-space-3); color: var(--mry-gold); stroke-width: 1.3; } .mry-title h2, .mry-h2 { font-family: var(--mry-font-display); font-weight: 600; font-size: clamp(1.75rem, 3.2vw, var(--mry-text-2xl)); line-height: 1.15; letter-spacing: 0; color: var(--mry-text); margin: 0 0 var(--mry-space-3); } .mry-title p { margin: 0; color: var(--mry-text-muted); } /* Boutons */ .mry-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--mry-space-2); min-height: 48px; padding: 4px var(--mry-space-6) 0; border: 1px solid transparent; border-radius: var(--mry-radius-sm); font: 600 var(--mry-text-sm) / 1 var(--mry-font-display); text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; cursor: pointer; transition: background-color var(--mry-dur) var(--mry-ease), border-color var(--mry-dur) var(--mry-ease), color var(--mry-dur) var(--mry-ease); } .mry-btn svg { width: 18px; height: 18px; margin-top: -4px; } .mry-btn--primary { background: var(--mry-accent); color: var(--mry-on-accent); } .mry-btn--primary:hover, .mry-btn--primary:focus { background: var(--mry-accent-hover); color: var(--mry-on-accent); } .mry-btn--light { background: var(--mry-on-accent); color: var(--mry-text); } .mry-btn--light:hover, .mry-btn--light:focus { background: var(--mry-gold); color: var(--mry-deep); } .mry-btn--outline-light { background: transparent; color: var(--mry-on-accent); border-color: rgba(255, 253, 249, 0.55); } .mry-btn--outline-light:hover, .mry-btn--outline-light:focus { background: rgba(255, 253, 249, 0.12); color: var(--mry-on-accent); } .mry-btn--secondary { background: transparent; color: var(--mry-text); border-color: var(--mry-border-strong); } .mry-btn--secondary:hover, .mry-btn--secondary:focus { background: var(--mry-surface-2); color: var(--mry-text); } .mry-btn-row { display: flex; flex-wrap: wrap; gap: var(--mry-space-3); } /* Slider d'accueil — reproduit Slider Revolution de la démo 13 ------------ Transition « slidevertical » 1,5 s, calques texte depuis la gauche (−50 px), calques image depuis la droite ou montant en rotation, sortie en fondu, flèches « hades » (vignette 3D au survol), puces « hermes ». */ .mry-slider { --mry-slider-h: 760px; --mry-ease-slide: cubic-bezier(0.45, 0, 0.55, 1); /* transition entre slides */ --mry-power2-out: cubic-bezier(0.5, 1, 0.89, 1); --mry-power3-out: cubic-bezier(0.33, 1, 0.68, 1); --mry-power4-in: cubic-bezier(0.5, 0, 0.75, 0); position: relative; overflow: hidden; height: var(--mry-slider-h); background: var(--mry-deep); } .mry-slider__track { position: absolute; inset: 0; } .mry-slide { position: absolute; inset: 0; overflow: hidden; visibility: hidden; background: var(--mry-deep); } .mry-slide.is-current { visibility: visible; } .mry-slide.is-first { animation: mry-fade 1500ms ease both; } .mry-slide__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .mry-slide__bg--blur { filter: blur(22px) brightness(0.5) saturate(1.15); transform: scale(1.15); } .mry-slide__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(42, 30, 20, 0.82) 0%, rgba(42, 30, 20, 0.35) 60%, rgba(42, 30, 20, 0.15) 100%); } .mry-slide__shade--center { background: rgba(42, 30, 20, 0.55); } .mry-slide--light { background: var(--mry-surface-2); } .mry-slide__inner { position: relative; height: 100%; display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--mry-space-7); align-items: center; } .mry-slide__inner--center { grid-template-columns: 1fr; justify-items: center; text-align: center; } .mry-slide__inner--center p.mry-slide__lead { margin-inline: auto; } .mry-slide__inner--center .mry-btn-row { justify-content: center; } .mry-slide__ar { font-family: var(--mry-font-arabic); font-size: var(--mry-text-xl); color: var(--mry-gold); margin: 0 0 var(--mry-space-2); text-align: left; } .mry-slide h1, .mry-slide .mry-slide__title { font-family: var(--mry-font-display); font-weight: 700; font-size: clamp(2.5rem, 5.6vw, 5.25rem); line-height: 1; letter-spacing: -0.01em; color: var(--mry-on-deep); margin: 0 0 var(--mry-space-5); text-wrap: balance; } .mry-slide p.mry-slide__lead { font-size: var(--mry-text-lg); line-height: 1.55; color: var(--mry-on-deep-muted); max-width: 46ch; margin: 0 0 var(--mry-space-6); } .mry-slide--light h1, .mry-slide--light .mry-slide__title { color: var(--mry-text); } .mry-slide--light p.mry-slide__lead { color: var(--mry-text-muted); } .mry-slide__media { position: relative; height: 100%; } .mry-slide__frame { position: relative; width: min(300px, 70vw); aspect-ratio: 9 / 16; border-radius: var(--mry-radius-md); overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); } .mry-slide__frame::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(244, 234, 219, 0.45); border-radius: 2px; pointer-events: none; } .mry-slide__frame video, .mry-slide__frame img { width: 100%; height: 100%; object-fit: cover; display: block; } .mry-slide__media .mry-slide__frame { position: absolute; top: 50%; left: 50%; margin: calc(min(300px, 70vw) * -8 / 9) 0 0 -150px; } .mry-slide__tag { position: absolute; left: calc(50% - 200px); top: 64%; margin: 0; background: var(--mry-bg); color: var(--mry-text); padding: 12px 16px; border-radius: var(--mry-radius-sm); font-size: var(--mry-text-sm); line-height: 1.35; box-shadow: var(--mry-shadow); } .mry-slide__tag strong { display: block; font-family: var(--mry-font-display); font-weight: 600; } .mry-slide__photo { position: absolute; display: block; object-fit: cover; border-radius: var(--mry-radius-sm); box-shadow: 0 24px 48px rgba(42, 30, 20, 0.25); border: 8px solid #fff; } .mry-slide__photo--a { width: 340px; aspect-ratio: 3 / 4; left: 8%; top: 13%; } .mry-slide__photo--b { width: 280px; aspect-ratio: 3 / 4; left: 48%; top: 28%; } /* Calques animés : états de départ (frame_0) et d'arrivée (frame_1) */ .mry-layer { opacity: 0; transform: var(--from, translateX(-50px)); } .mry-layer--right { --from: translateX(110vw); opacity: 1; } .mry-layer--rise { --from: translateY(var(--y0, 800px)) rotate(var(--r0, -80deg)); opacity: 1; } .mry-slide.is-in .mry-layer { opacity: 1; transform: var(--to, none); transition: transform var(--sp, 1000ms) var(--ease, var(--mry-power2-out)) var(--st, 1000ms), opacity var(--sp, 1000ms) var(--ease, var(--mry-power2-out)) var(--st, 1000ms); } .mry-slide.is-in .mry-layer--right, .mry-slide.is-in .mry-layer--rise { --sp: 1500ms; --ease: var(--mry-power3-out); } /* frame_999 : sortie en fondu power4.in pendant le changement de slide */ .mry-slide.is-out .mry-layer { opacity: 0; transform: var(--to, none); transition: opacity 1500ms var(--mry-power4-in); } /* Flèches « hades » : 100 × 100, vignette de la slide voisine qui pivote au survol */ .mry-arr { position: absolute; top: 50%; z-index: 5; width: 100px; height: 100px; margin-top: -50px; padding: 0; display: grid; place-items: center; border: 0; cursor: pointer; perspective: 600px; background: rgba(0, 0, 0, 0.25); color: #fff; transition: background-color 0.3s, color 0.3s; } .mry-arr .mry-icon { width: 30px; height: 30px; stroke-width: 1.6; } .mry-arr:hover, .mry-arr:focus-visible { background: #fff; color: rgba(0, 0, 0, 0.5); } .mry-arr--prev { left: 20px; } .mry-arr--next { right: 20px; } .mry-arr__thumb { position: absolute; top: 0; width: 100px; height: 100px; background: #888 center / cover no-repeat; opacity: 0; transition: all 0.3s; pointer-events: none; } .mry-arr--prev .mry-arr__thumb { left: 100%; transform-origin: 0 50%; transform: rotateY(-90deg); } .mry-arr--next .mry-arr__thumb { right: 100%; transform-origin: 100% 50%; transform: rotateY(90deg); } .mry-arr:hover .mry-arr__thumb { opacity: 1; transform: rotateY(0deg); } /* Puces « hermes » : anneau blanc, remplissage de bas en haut */ .mry-bullets { position: absolute; left: 0; right: 0; bottom: 24px; z-index: 5; display: flex; justify-content: center; gap: 10px; } .mry-bullets button { position: relative; overflow: hidden; width: 16px; height: 16px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: transparent; box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px rgba(42, 30, 20, 0.12); transition: background 0.3s ease; } .mry-bullets button:hover { background: rgba(0, 0, 0, 0.21); } .mry-bullets button::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 0; background: #fff; transition: height 0.3s ease; } .mry-bullets button[aria-current="true"]::after { height: 100%; } /* sur une slide claire, puces brunes pour rester visibles */ .mry-slider.is-light .mry-bullets button { box-shadow: inset 0 0 0 2px var(--mry-text); } .mry-slider.is-light .mry-bullets button::after { background: var(--mry-text); } /* laisser la place aux flèches de 100 px */ @media (min-width: 992px) { .mry-slide__inner { width: min(100% - 280px, var(--mry-container)); } } .mry-slider__pause { position: absolute; right: 20px; bottom: 18px; z-index: 5; background: rgba(0, 0, 0, 0.25); color: #fff; border: 0; border-radius: var(--mry-radius-sm); font: 500 12px/1 var(--mry-font-body); padding: 8px 10px; cursor: pointer; } @keyframes mry-fade { from { opacity: 0; } to { opacity: 1; } } @media (max-width: 1199px) { .mry-slider { --mry-slider-h: 680px; } .mry-slide__photo--a { width: 280px; } .mry-slide__photo--b { width: 220px; left: 44%; } } @media (max-width: 991px) { .mry-slider { --mry-slider-h: 720px; } .mry-slide__inner { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: var(--mry-space-5); align-items: start; padding-top: var(--mry-space-7); } .mry-slide__inner--center, .mry-slide__inner--video { grid-template-rows: 1fr; align-items: center; padding-top: 0; } .mry-slide__media--video { display: none; } /* la vidéo reste visible en fond, moins floutée */ .mry-slide__bg--blur { filter: blur(3px) brightness(0.42); transform: scale(1.04); } .mry-slide__media { height: auto; min-height: 220px; } .mry-slide__photo { border-width: 6px; } .mry-slide__photo--a { width: 140px; left: 0; top: 0; } .mry-slide__photo--b { width: 118px; left: 118px; top: 28px; } .mry-arr { display: none; } /* navigation au doigt + puces */ .mry-slider__pause { right: auto; left: 16px; } /* libère le coin du bouton WhatsApp */ } @media (prefers-reduced-motion: reduce) { .mry-slide.is-in .mry-layer { transition: none; } .mry-slide.is-first { animation: none; } } /* Réassurance ------------------------------------------------------------ */ .mry-reassurance { border-bottom: 1px solid var(--mry-border); background: var(--mry-surface); } .mry-reassurance__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); } .mry-reassurance__item { display: flex; gap: var(--mry-space-3); align-items: center; justify-content: center; padding: var(--mry-space-5) var(--mry-space-4); font-size: var(--mry-text-sm); line-height: 1.4; color: var(--mry-text-muted); } .mry-reassurance__item + .mry-reassurance__item { border-left: 1px solid var(--mry-border); } .mry-reassurance__item strong { display: block; color: var(--mry-text); font-family: var(--mry-font-display); font-weight: 600; font-size: var(--mry-text-base); padding-top: 3px; } .mry-reassurance__item .mry-icon { color: var(--mry-gold); width: 30px; height: 30px; stroke-width: 1.3; } @media (max-width: 991px) { .mry-reassurance__list { grid-template-columns: 1fr 1fr; } .mry-reassurance__item { justify-content: flex-start; } .mry-reassurance__item:nth-child(3) { border-left: 0; } .mry-reassurance__item:nth-child(n+3) { border-top: 1px solid var(--mry-border); } } @media (max-width: 540px) { .mry-reassurance__list { grid-template-columns: 1fr; } .mry-reassurance__item + .mry-reassurance__item { border-left: 0; border-top: 1px solid var(--mry-border); } } /* Double bannière pleine largeur ---------------------------------------- */ .mry-banners { display: grid; grid-template-columns: 1fr 1fr; } .mry-banner { position: relative; display: flex; align-items: flex-end; min-height: 300px; padding: var(--mry-space-7); overflow: hidden; color: var(--mry-on-deep); text-decoration: none; } .mry-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--mry-ease); } .mry-banner::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(42, 30, 20, 0.88), rgba(42, 30, 20, 0.25) 80%); } .mry-banner:hover img { transform: scale(1.04); } .mry-banner__body { position: relative; z-index: 2; max-width: 420px; } .mry-banner--right { justify-content: flex-end; text-align: right; } .mry-banner__kicker { display: block; font-size: var(--mry-text-sm); font-weight: 500; color: #EDD198; margin-bottom: var(--mry-space-1); } .mry-banner__title { display: block; font-family: var(--mry-font-display); font-weight: 700; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.05; margin-bottom: var(--mry-space-2); } .mry-banner__text { display: block; color: var(--mry-on-deep-muted); font-size: var(--mry-text-sm); } .mry-banner:hover, .mry-banner:focus { color: var(--mry-on-deep); } @media (max-width: 767px) { .mry-banners { grid-template-columns: 1fr; } .mry-banner { min-height: 240px; padding: var(--mry-space-5); } } /* Carte des variétés — élément fort --------------------------------------- */ .mry-varieties { background: var(--mry-deep); color: var(--mry-on-deep); } .mry-varieties .mry-title h2 { color: var(--mry-on-deep); } .mry-varieties .mry-title p { color: var(--mry-on-deep-muted); } .mry-varieties__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(244, 234, 219, 0.16); } .mry-variety { padding: var(--mry-space-6) var(--mry-space-5) 0; } .mry-variety + .mry-variety { border-left: 1px solid rgba(244, 234, 219, 0.16); } .mry-variety__name { font-family: var(--mry-font-display); font-weight: 700; font-size: clamp(1.75rem, 2.6vw, 2.375rem); line-height: 1.05; margin: 0; color: var(--mry-on-deep); } .mry-variety__name span { display: block; text-align: left; font-family: var(--mry-font-arabic); font-weight: 400; font-size: var(--mry-text-lg); margin-top: var(--mry-space-2); color: var(--mry-gold); } .mry-variety__desc { margin: var(--mry-space-4) 0 var(--mry-space-5); color: var(--mry-on-deep-muted); font-size: var(--mry-text-sm); } .mry-variety__desc a { color: var(--mry-on-deep); } .mry-sweet { font-size: var(--mry-text-xs); color: var(--mry-on-deep-muted); } .mry-sweet__dots { display: flex; gap: 6px; margin-top: var(--mry-space-2); } .mry-sweet__dots i { width: 26px; height: 5px; border-radius: 1px; background: rgba(244, 234, 219, 0.18); } .mry-sweet__dots i.is-on { background: var(--mry-gold); } @media (max-width: 991px) { .mry-varieties__list { grid-template-columns: 1fr 1fr; } .mry-variety:nth-child(3) { border-left: 0; } .mry-variety:nth-child(n+3) { border-top: 1px solid rgba(244, 234, 219, 0.16); margin-top: var(--mry-space-6); } } @media (max-width: 540px) { .mry-varieties__list { grid-template-columns: 1fr; } .mry-variety { padding-inline: 0; } .mry-variety + .mry-variety { border-left: 0; border-top: 1px solid rgba(244, 234, 219, 0.16); margin-top: var(--mry-space-6); } } /* Bande beige « Pourquoi Maryouma » avec vidéo -------------------------- */ .mry-why { background: var(--mry-surface-2); margin-block: var(--mry-space-9); } .mry-why__grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--mry-space-8); align-items: center; } .mry-why__media { margin-block: calc(-1 * var(--mry-space-8)); justify-self: center; } .mry-why__media .mry-slide__frame { width: min(320px, 70vw); box-shadow: var(--mry-shadow); } .mry-why__body { padding-block: var(--mry-space-8); } .mry-why__body .mry-title { margin-bottom: var(--mry-space-6); } .mry-features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--mry-space-6) var(--mry-space-7); } .mry-feature { display: grid; grid-template-columns: 44px 1fr; gap: var(--mry-space-4); } .mry-feature .mry-icon { width: 40px; height: 40px; color: var(--mry-gold); stroke-width: 1.2; } .mry-feature h3 { font-family: var(--mry-font-display); font-weight: 600; font-size: var(--mry-text-lg); margin: 4px 0 var(--mry-space-1); color: var(--mry-text); } .mry-feature p { margin: 0; font-size: var(--mry-text-sm); color: var(--mry-text-muted); } @media (max-width: 991px) { .mry-why__grid { grid-template-columns: 1fr; gap: 0; } .mry-why__media { margin-block: calc(-1 * var(--mry-space-7)) 0; } .mry-why__body { padding-block: var(--mry-space-7); } } @media (max-width: 540px) { .mry-features { grid-template-columns: 1fr; } } /* Conseils & recettes (blog) ----------------------------------------------- */ .mry-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mry-space-6); } .mry-post__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--mry-radius-md); background: var(--mry-surface-2); margin-bottom: var(--mry-space-4); } .mry-post__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 500ms var(--mry-ease); } .mry-post:hover .mry-post__img img { transform: scale(1.04); } .mry-post h3 { font-family: var(--mry-font-display); font-weight: 600; font-size: var(--mry-text-lg); line-height: 1.3; margin: 0 0 var(--mry-space-2); padding-bottom: var(--mry-space-2); border-bottom: 1px solid var(--mry-border); } .mry-post h3 a { color: var(--mry-text); text-decoration: none; } .mry-post h3 a:hover { color: var(--mry-accent); } .mry-post p { font-size: var(--mry-text-sm); color: var(--mry-text-muted); margin: 0 0 var(--mry-space-3); } .mry-post__meta { font-size: var(--mry-text-xs); color: var(--mry-text-muted); padding-top: var(--mry-space-2); border-top: 1px solid var(--mry-border); } @media (max-width: 991px) { .mry-posts { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } } /* Trois colonnes : réseaux / points de vente / professionnels ------------- */ .mry-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mry-space-7); } .mry-trio__col h2 { font-family: var(--mry-font-display); font-weight: 600; font-size: var(--mry-text-xl); text-align: center; margin: 0 0 var(--mry-space-5); } .mry-insta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: var(--mry-space-3); } .mry-insta a { display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--mry-radius-sm); } .mry-insta img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity var(--mry-dur) var(--mry-ease); } .mry-insta a:hover img { opacity: 0.8; } .mry-socials { display: flex; justify-content: center; gap: var(--mry-space-4); } .mry-socials a { display: grid; place-items: center; width: 44px; height: 44px; color: var(--mry-text-muted); border-radius: var(--mry-radius-sm); } .mry-socials a:hover { color: var(--mry-accent); background: var(--mry-gold-soft); } .mry-store { display: grid; grid-template-columns: 96px 1fr; gap: var(--mry-space-4); align-items: center; padding-block: var(--mry-space-3); border-bottom: 1px solid var(--mry-border); } .mry-store:first-of-type { padding-top: 0; } .mry-store img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--mry-radius-sm); display: block; } .mry-store h3 { font-family: var(--mry-font-display); font-weight: 600; font-size: var(--mry-text-base); margin: 0 0 2px; } .mry-store p { margin: 0; font-size: var(--mry-text-sm); color: var(--mry-text-muted); line-height: 1.45; } .mry-store__status { display: inline-block; font-size: 11px; font-weight: 500; color: var(--mry-accent); background: var(--mry-gold-soft); padding: 2px 6px; border-radius: var(--mry-radius-sm); margin-bottom: 4px; } .mry-pro { background: var(--mry-surface-2); border-radius: var(--mry-radius-md); padding: var(--mry-space-6); text-align: center; } .mry-pro p { color: var(--mry-text-muted); font-size: var(--mry-text-sm); margin: 0 0 var(--mry-space-5); } @media (max-width: 991px) { .mry-trio { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } } /* Bouton WhatsApp flottant -------------------------------------------------- */ .mry-whatsapp { position: fixed; right: 20px; bottom: 20px; z-index: 50; display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 20px 0 16px; border-radius: 26px; background: var(--mry-whatsapp); color: #fff; font: 500 var(--mry-text-sm)/1 var(--mry-font-body); text-decoration: none; box-shadow: 0 6px 20px rgba(0,0,0,.18); } .mry-whatsapp:hover, .mry-whatsapp:focus { color: #fff; background: #198A4A; } .mry-whatsapp .mry-icon { width: 22px; height: 22px; } @media (max-width: 540px) { .mry-whatsapp span { display: none; } .mry-whatsapp { width: 52px; padding: 0; justify-content: center; } } /* 4. SURCHARGES WAREHOUSE =================================================== Uniquement couleurs, typographie, bordures. La grille Bootstrap du thème n'est pas touchée. Vérifier chaque sélecteur à l'inspecteur après intégration : le Theme editor peut générer des règles plus spécifiques. ========================================================================== */ h1, h2, h3, .h1, .h2, .h3, .page-title, h1.page-title, .section-title, .block-title, .products-section-title, .elementor-heading-title { font-family: var(--mry-font-display); font-weight: 600; letter-spacing: 0; color: var(--mry-text); text-transform: none; } .section-title, .products-section-title { font-size: clamp(1.75rem, 3.2vw, var(--mry-text-2xl)); text-align: center; } /* Boutons du thème */ .btn { border-radius: var(--mry-radius-sm); font-family: var(--mry-font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; } .btn-primary, .btn-primary:not(:disabled):not(.disabled):active, .add-to-cart, .btn.add-to-cart { background-color: var(--mry-accent); border-color: var(--mry-accent); color: var(--mry-on-accent); } .btn-primary:hover, .btn-primary:focus, .add-to-cart:hover, .add-to-cart:focus { background-color: var(--mry-accent-hover); border-color: var(--mry-accent-hover); color: var(--mry-on-accent); } .btn-secondary, .btn-default { background: transparent; color: var(--mry-text); border: 1px solid var(--mry-border-strong); } .btn-secondary:hover, .btn-default:hover { background: var(--mry-surface-2); color: var(--mry-text); } /* En-tête (style « logo centré » de la démo 13) */ .header-banner { background: var(--mry-gold); height: 3px; } #header .header-nav { background: var(--mry-bg); border-bottom: 1px solid var(--mry-border); font-size: var(--mry-text-xs); color: var(--mry-text-muted); } #header .header-nav a { color: var(--mry-text-muted); } #header .header-nav a:hover { color: var(--mry-accent); } #header .header-top { background: var(--mry-bg); } #header .header-btn, #header .header-btn .icon { color: var(--mry-text); } #header .header-btn:hover { color: var(--mry-accent); } .cart-products-count-btn { background: var(--mry-accent); color: var(--mry-on-accent); } #search_widget .form-control, .search-widget .form-control { background: var(--mry-surface); border: 1px solid var(--mry-border-strong); border-radius: var(--mry-radius-sm); min-height: 44px; } #search_widget .form-control:focus { border-color: var(--mry-accent); box-shadow: 0 0 0 3px var(--mry-gold-soft); } /* Méga-menu iqit : majuscules Josefin, comme la démo */ .cbp-hrmenu .cbp-hrmenu-tab > a, .cbp-hrmenu .cbp-tab-title { font-family: var(--mry-font-display); font-weight: 600; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mry-text); } .cbp-hrmenu .cbp-hrmenu-tab:hover > a .cbp-tab-title, .cbp-hrmenu .cbp-hrmenu-tab.cbp-hropen > a .cbp-tab-title { color: var(--mry-accent); } .cbp-hrmenu .cbp-hrsub-inner { background: var(--mry-surface); border: 1px solid var(--mry-border); } /* Vignette produit : catégorie + nom à gauche, prix doré à droite */ .product-miniature .product-thumbnail img, .product-miniature .thumbnail-container img { border-radius: var(--mry-radius-sm); } .product-miniature .product-title, .product-miniature .product-title a { font-family: var(--mry-font-display); font-weight: 600; font-size: 0.9375rem; line-height: 1.3; color: var(--mry-text); } .product-miniature .product-title a:hover { color: var(--mry-accent); } .product-miniature .product-category-name { font-size: var(--mry-text-xs); color: var(--mry-text-muted); text-transform: none; } .product-price-and-shipping .product-price, .product-miniature .price { font-family: var(--mry-font-display); font-weight: 600; color: var(--mry-accent); } .regular-price { color: var(--mry-text-muted); } .product-flags .product-flag { border-radius: var(--mry-radius-sm); font-weight: 500; text-transform: none; font-size: 11px; } .product-flags .product-flag.new { background: var(--mry-surface-2); color: var(--mry-accent); } .product-flags .product-flag.discount, .product-flags .product-flag.on-sale { background: var(--mry-text); color: var(--mry-surface); } /* Fiche produit */ #product h1.page-title { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.1; font-weight: 700; } .product-prices .current-price, .product-prices .current-price-value { font-family: var(--mry-font-display); font-weight: 600; font-size: var(--mry-text-2xl); color: var(--mry-accent); } .product-variants .control-label, .product-add-to-cart .control-label { font-weight: 500; text-transform: none; } .nav-tabs .nav-link { font-family: var(--mry-font-display); font-weight: 600; color: var(--mry-text-muted); border: 0; border-bottom: 2px solid transparent; } .nav-tabs .nav-link.active { color: var(--mry-text); border-bottom-color: var(--mry-gold); background: transparent; } /* Champs */ .form-control, .custom-select { border: 1px solid var(--mry-border-strong); border-radius: var(--mry-radius-sm); min-height: 44px; background: var(--mry-surface); color: var(--mry-text); } .form-control:focus { border-color: var(--mry-accent); box-shadow: 0 0 0 3px var(--mry-gold-soft); } /* Fil d'Ariane */ .breadcrumb { background: transparent; font-size: var(--mry-text-sm); } .breadcrumb a { color: var(--mry-text-muted); } /* Pied de page : titres soulignés d'une barre dorée (démo 13) */ #footer, #footer-container-main { background: var(--mry-surface-3); color: var(--mry-text); } #footer .block-title { font-family: var(--mry-font-display); font-weight: 600; font-size: var(--mry-text-base); position: relative; padding-bottom: var(--mry-space-3); } #footer .block-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 3px; background: var(--mry-gold); } #footer a { color: var(--mry-text); } #footer a:hover { color: var(--mry-accent); } #footer-copyrights { background: var(--mry-accent); color: var(--mry-on-accent); font-size: var(--mry-text-sm); } #footer-copyrights a { color: var(--mry-on-accent); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; } } /* 5. EN-TÊTE (Header style 4) : menu à gauche · logo au centre · icônes à droite */ #header .header-top { padding-top: 6px !important; padding-bottom: 6px !important; background: var(--mry-bg) !important; border-bottom: 1px solid var(--mry-border); } #header #desktop-header-container > .row { display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: center; margin: 0; } #header #desktop-header-container > .row > .col-header-menu { grid-column: 1; grid-row: 1; padding: 0; min-width: 0; display: flex; justify-content: flex-start; width: auto !important; max-width: none !important; } #header #desktop-header-container > .row > .col-header-left { grid-column: 2; grid-row: 1; padding: 0 40px !important; display: flex; justify-content: center; width: auto !important; max-width: none !important; } #header #desktop-header-container > .row > .col-header-right { grid-column: 3; grid-row: 1; padding: 0; min-width: 0; display: flex; justify-content: flex-end; width: auto !important; max-width: none !important; } #header #desktop-header-container > .row > .col-12 { position: absolute !important; left: 0; right: 0; bottom: 0; width: auto !important; flex: none !important; max-width: none !important; } #header #desktop-header-container .col-header-right > .row { flex-wrap: nowrap; align-items: center; } #header #desktop_logo img { max-height: 90px !important; width: auto; } /* Menu */ #iqitmegamenu-wrapper, #iqitmegamenu-horizontal, #cbp-hrmenu, #cbp-hrmenu > ul, #cbp-hrmenu > ul > li, #cbp-hrmenu > ul > li > a { background: transparent !important; border: 0 !important; box-shadow: none !important; } #header #cbp-hrmenu > ul { display: flex !important; flex-wrap: nowrap !important; gap: 0 14px !important; list-style: none !important; padding: 0 !important; margin: 0; } #header #cbp-hrmenu > ul > li { float: none !important; list-style: none !important; } #header #cbp-hrmenu > ul > li > a { padding: 18px 0 !important; } #header #cbp-hrmenu > ul > li .cbp-tab-title, #header #cbp-hrmenu > ul > li > a { font-family: 'Josefin Sans', sans-serif !important; font-weight: 600 !important; font-size: 13px !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; color: #2A2018 !important; white-space: nowrap !important; } #header #cbp-hrmenu > ul > li:hover .cbp-tab-title { color: #8C6420 !important; } #cbp-hrmenu .cbp-submenu-aindicator { display: none; } /* Icônes fines (recherche, compte, panier) */ #header .col-header-right .header-btn-w { display: flex; align-items: center; padding: 0 12px !important; margin: 0 !important; } #header .col-header-right .header-btn { display: flex !important; align-items: center; position: relative; background: transparent !important; border: 0 !important; color: #2A2018 !important; } #header .col-header-right .header-btn .title, #header .cart-products-count-btn-txt { display: none !important; } #header .col-header-right .header-btn i.icon { font-size: 0 !important; width: 24px; height: 24px; display: inline-block; background: #2A2018; -webkit-mask: var(--ic) center / 24px no-repeat; mask: var(--ic) center / 24px no-repeat; } #header .col-header-right .header-btn:hover i.icon { background: #8C6420; } #header .col-header-right .header-btn i.fa-search { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); } #header .col-header-right .header-btn i.fa-user { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1-4.4 4-6.5 8-6.5s7 2.1 8 6.5'/%3E%3C/svg%3E"); } #header .col-header-right .header-btn i.fa-shopping-bag { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 13H6z'/%3E%3Cpath d='M9 8a3 3 0 0 1 6 0'/%3E%3C/svg%3E"); } #header .cart-products-count-btn { position: absolute; top: -4px; right: -8px; min-width: 18px; height: 18px; line-height: 18px; font-size: 10px; text-align: center; border-radius: 50% !important; background: #8C6420 !important; color: #fff !important; } /* Blocs de l'accueil en pleine largeur */ .mry-slider, .mry-reassurance, .mry-banners, .mry-section, .mry-why { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; } html, body { overflow-x: clip; } body#index #wrapper { padding-top: 0 !important; } body#index #wrapper > .container, body#index #content-wrapper, body#index #main, body#index .page-content { margin-top: 0 !important; padding-top: 0 !important; } .mry-banner { min-height: 380px !important; } .mry-banner::before { background: linear-gradient(0deg, rgba(30, 20, 12, 0.92) 0%, rgba(30, 20, 12, 0.55) 45%, rgba(30, 20, 12, 0.15) 100%) !important; } .mry-banner, .mry-banner:hover, .mry-banner__title { color: #FFFFFF !important; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); } .mry-banner__text { color: #EFE6D8 !important; font-size: 15px !important; } #header .sticky-header, #desktop-header.stuck-header, #desktop-header.stuck-header .header-top, #header.stuck-header, .stuck-header #desktop-header-container { background: #FFFDF9 !important; } #desktop-header.stuck-header { box-shadow: 0 2px 12px rgba(42, 32, 24, 0.08) !important; } .product-miniature .thumbnail-container { margin-bottom: 14px !important; border-radius: 4px; overflow: hidden; } .product-miniature .product-thumbnail { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: #F4EEE3; } .product-miniature .product-thumbnail picture, .product-miniature .product-thumbnail img { display: block; width: 100% !important; height: 100% !important; object-fit: cover; } .product-miniature .product-description { display: grid !important; grid-template-columns: 1fr auto; column-gap: 16px; row-gap: 2px; align-items: start; text-align: left !important; padding: 0 !important; } .product-miniature .product-description > * { grid-column: 1; } .product-miniature .product-category-name { grid-row: 1; margin: 0 !important; font-size: 13px !important; color: #76695B !important; text-align: left !important; } .product-miniature .product-title { grid-row: 2; margin: 0 !important; text-align: left !important; } .product-miniature .product-title a { font-family: 'Josefin Sans', sans-serif !important; font-weight: 600 !important; font-size: 17px !important; line-height: 1.3 !important; color: #2A2018 !important; } .product-miniature .product-price-and-shipping { grid-column: 2 !important; grid-row: 1 / span 2; display: flex !important; flex-direction: column-reverse; align-items: flex-end; text-align: right !important; padding-top: 14px; margin: 0 !important; } .product-miniature .product-price-and-shipping .product-price { font-family: 'Josefin Sans', sans-serif !important; font-weight: 600 !important; font-size: 17px !important; color: #8C6420 !important; white-space: nowrap; } .product-miniature .product-price-and-shipping .regular-price { font-size: 13px !important; text-decoration: line-through; color: #76695B !important; } .product-miniature .product-description-short, .product-miniature .products-variants, .product-miniature .product-brand, .product-miniature .product-reference { display: none !important; } .product-miniature .product-flags .product-flag { background: #FFFDF9 !important; color: #8C6420 !important; border-radius: 3px !important; font-size: 12px !important; font-weight: 500 !important; text-transform: none !important; padding: 4px 8px !important; } .product-miniature .product-flags .product-flag.discount, .product-miniature .product-flags .product-flag.discount-percentage, .product-miniature .product-flags .product-flag.on-sale { background: #2A2018 !important; color: #FFFDF9 !important; } @media (max-width: 575px) { .product-miniature .product-description { grid-template-columns: 1fr; } .product-miniature .product-price-and-shipping { grid-column: 1 !important; grid-row: 3; flex-direction: row-reverse; justify-content: flex-end; gap: 8px; padding-top: 4px; } } .products .js-product-miniature-wrapper, .elementor-products .js-product-miniature-wrapper { padding-left: 12px !important; padding-right: 12px !important; margin-bottom: 40px !important; } .product-miniature .product-thumbnail { position: relative !important; } .product-miniature .product-thumbnail picture { position: absolute !important; inset: 0; } .product-miniature .product-thumbnail img { position: absolute !important; inset: 0; max-width: none !important; max-height: none !important; } .product-miniature .product-description { column-gap: 10px !important; } .product-miniature .product-title a { font-size: 15px !important; letter-spacing: 0 !important; line-height: 1.35 !important; } .product-miniature .product-price-and-shipping { padding-top: 16px !important; } .product-miniature .product-price-and-shipping .product-price { font-size: 15px !important; letter-spacing: 0 !important; } .product-miniature .product-category-name { font-size: 12px !important; letter-spacing: 0 !important; } /* Supprimer les espaces blancs d'Elementor autour des blocs de la maquette */ body#index .elementor-section:has(.mry-slider, .mry-reassurance, .mry-banners, .mry-varieties, .mry-why, .mry-section) { margin: 0 !important; padding: 0 !important; } body#index .elementor-section:has(.mry-slider, .mry-reassurance, .mry-banners, .mry-varieties, .mry-why, .mry-section) .elementor-container, body#index .elementor-section:has(.mry-slider, .mry-reassurance, .mry-banners, .mry-varieties, .mry-why, .mry-section) .elementor-column-wrap, body#index .elementor-section:has(.mry-slider, .mry-reassurance, .mry-banners, .mry-varieties, .mry-why, .mry-section) .elementor-widget-wrap, body#index .elementor-section:has(.mry-slider, .mry-reassurance, .mry-banners, .mry-varieties, .mry-why, .mry-section) .elementor-element-populated { padding: 0 !important; margin: 0 !important; } body#index .elementor-widget-html { margin-bottom: 0 !important; } body#index .elementor-widget-html .mry-slider, body#index .elementor-widget-html .mry-banners, body#index .elementor-widget-html .mry-varieties, body#index .elementor-widget-html .mry-why { margin-top: 0 !important; margin-bottom: 0 !important; } /* 9. BLOC « POURQUOI » comme la maquette (vidéo qui dépasse, bandes blanches) */ body#index .elementor-section.elementor-element:has(.mry-why) { padding-top: 96px !important; padding-bottom: 96px !important; background: #FFFDF9 !important; } body#index .mry-why { margin: 0 calc(50% - 50vw) !important; padding: 0 !important; } body#index .mry-why__grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 64px; align-items: center; } body#index .mry-why__media { margin: -56px 0 !important; justify-self: center; } body#index .mry-why__media .mry-slide__frame { width: 320px !important; height: auto !important; aspect-ratio: 9 / 16 !important; overflow: hidden; border-radius: 4px; box-shadow: 0 18px 40px rgba(43, 29, 20, .18); } body#index .mry-why__media video { width: 100% !important; height: 100% !important; object-fit: cover; display: block; } body#index .mry-why__body { padding: 64px 0 !important; } @media (max-width: 991px) { body#index .elementor-section.elementor-element:has(.mry-why) { padding-top: 64px !important; padding-bottom: 64px !important; } body#index .mry-why__grid { grid-template-columns: 1fr; gap: 0; } body#index .mry-why__media { margin: -40px 0 0 !important; } body#index .mry-why__media .mry-slide__frame { width: 260px !important; } body#index .mry-why__body { padding: 40px 0 !important; } } /* 10. BOUTON « DEMANDER LES TARIFS » : texte blanc */ body .mry-pro a.mry-btn, body .mry-pro a.mry-btn:visited, body .mry-pro a.mry-btn:hover, body .mry-pro a.mry-btn:focus { color: #FFFFFF !important; } body .mry-pro a.mry-btn:hover { background: #5E3F22 !important; } /* 11. BOUTON WHATSAPP : toujours au-dessus et texte blanc */ body a.mry-whatsapp, body a.mry-whatsapp:visited, body a.mry-whatsapp:hover, body a.mry-whatsapp:focus { color: #FFFFFF !important; z-index: 999 !important; text-decoration: none !important; } /* 12. PAGE « À PROPOS » : version animée */ body.cms-id-4 .page-header, body.cms-id-4 h1.page-title, body.cms-id-4 #wrapper .breadcrumb { display: none !important; } body.cms-id-4 #wrapper { padding-top: 0 !important; } .mry-ap { color: #2A2018; overflow: visible; } .mry-ap p { margin: 0; } .mry-ap img, .mry-ap video { display: block; width: 100%; height: 100%; object-fit: cover; } .mry-ap__kicker { font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: #8C6420 !important; margin-bottom: 14px !important; } .mry-ap h2.mry-ap__h1, .mry-ap h2.mry-ap__h2, .mry-ap h3 { font-family: 'Josefin Sans', sans-serif !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: #2A2018 !important; } .mry-ap h2.mry-ap__h1 { font-size: clamp(40px, 5.6vw, 76px) !important; line-height: 1 !important; margin: 0 0 24px !important; } .mry-ap h2.mry-ap__h1 em { display: block; font-style: normal; color: #C0903F !important; } .mry-ap h2.mry-ap__h2 { font-size: clamp(28px, 3.4vw, 44px) !important; line-height: 1.1 !important; margin: 0 0 16px !important; } .mry-ap h3 { font-size: 22px !important; margin: 0 0 10px !important; } .mry-ap__lead { font-size: 18px; line-height: 1.7; color: #76695B; max-width: 46ch; } .mry-ap__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 32px; } .mry-ap a.mry-ap__btn, .mry-ap a.mry-ap__btn:visited { position: relative; overflow: hidden; display: inline-flex; align-items: center; min-height: 52px; padding: 4px 32px 0; background: #8C6420; color: #FFFFFF !important; border-radius: 2px; font-family: 'Josefin Sans', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none !important; transition: transform .3s, box-shadow .3s; } .mry-ap a.mry-ap__btn::before { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.18); transform: translateX(-101%); transition: transform .5s cubic-bezier(.2,.8,.2,1); } .mry-ap a.mry-ap__btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(42,30,20,.22); } .mry-ap a.mry-ap__btn:hover::before { transform: translateX(0); } .mry-ap a.mry-ap__btn--light, .mry-ap a.mry-ap__btn--light:visited { background: #FFFDF9; color: #2A2018 !important; } .mry-ap a.mry-ap__btn--wa, .mry-ap a.mry-ap__btn--wa:visited { background: #1F9D55; } .mry-ap a.mry-ap__link { color: #2A2018 !important; font-weight: 500; text-decoration: none !important; border-bottom: 1px solid #C0903F; padding-bottom: 2px; } .mry-ap__hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; min-height: 640px; padding: 56px 0 72px; } .mry-ap__hero-media { position: relative; height: 600px; } .mry-ap__frame { position: absolute; overflow: hidden; border-radius: 4px; box-shadow: 0 30px 60px rgba(42,30,20,.22); } .mry-ap__frame::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(255,253,249,.5); border-radius: 2px; pointer-events: none; } .mry-ap__frame--main { right: 0; top: 0; width: 72%; height: 100%; animation: mry-ap-in-right 1.2s cubic-bezier(.2,.8,.2,1) .2s both; } .mry-ap__frame--small { left: 0; bottom: 48px; width: 44%; aspect-ratio: 4 / 5; border: 8px solid #FFFDF9; animation: mry-ap-in-up 1.2s cubic-bezier(.2,.8,.2,1) .6s both, mry-ap-float 6s ease-in-out 2s infinite; } .mry-ap__frame--small::after { display: none; } .mry-ap__badge { position: absolute; left: 30%; top: 36px; width: 128px; height: 128px; border-radius: 50%; background: #2A1E14; color: #F4EADB; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; line-height: 1.3; padding: 0 14px; animation: mry-ap-pop .9s cubic-bezier(.3,1.5,.5,1) 1.1s both; } .mry-ap__badge::before { content: ""; position: absolute; inset: 6px; border: 1px dashed rgba(192,144,63,.8); border-radius: 50%; animation: mry-ap-spin 18s linear infinite; } .mry-ap__badge span { display: block; font-family: 'Josefin Sans', sans-serif; font-weight: 700; font-size: 30px; letter-spacing: 0; color: #C0903F; margin-bottom: 2px; } .mry-ap__up { animation: mry-ap-in-up 1s cubic-bezier(.2,.8,.2,1) both; } .mry-ap__up:nth-child(1) { animation-delay: .1s; } .mry-ap__up:nth-child(2) { animation-delay: .25s; } .mry-ap__up:nth-child(3) { animation-delay: .4s; } .mry-ap__up:nth-child(4) { animation-delay: .55s; } .mry-ap__marquee { width: 100vw; margin-left: calc(50% - 50vw); background: #2A1E14; overflow: hidden; padding: 26px 0; } .mry-ap__marquee-track { display: flex; width: max-content; animation: mry-ap-marquee 38s linear infinite; } .mry-ap__marquee-track span { font-family: 'Josefin Sans', sans-serif; font-weight: 600; font-size: 26px; color: #F4EADB; white-space: nowrap; padding: 0 28px; display: flex; align-items: center; gap: 56px; } .mry-ap__marquee-track span::after { content: "\2726"; font-size: 14px; color: #C0903F; margin-left: 28px; } .mry-ap__marquee:hover .mry-ap__marquee-track { animation-play-state: paused; } .mry-ap__steps { padding: 120px 0 40px; } .mry-ap__steps-head { text-align: center; margin-bottom: 72px; } .mry-ap__step { display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: center; margin-bottom: 96px; } .mry-ap__step--rev .mry-ap__step-img { order: 2; } .mry-ap__step-img { height: 480px; overflow: hidden; border-radius: 4px; } .mry-ap__step-img img { transition: transform 1.2s cubic-bezier(.2,.8,.2,1); } .mry-ap__step:hover .mry-ap__step-img img { transform: scale(1.05); } .mry-ap__num { display: block; font-family: 'Josefin Sans', sans-serif; font-weight: 700; font-size: 88px; line-height: 1; color: transparent; -webkit-text-stroke: 1px #C0903F; margin-bottom: 8px; } .mry-ap__step-text p { font-size: 17px; line-height: 1.8; color: #76695B; max-width: 42ch; } .mry-ap__values { width: 100vw; margin-left: calc(50% - 50vw); background: #F4EEE3; padding: 88px 16px; } .mry-ap__values-inner { max-width: 1270px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .mry-ap__value { position: relative; background: #FFFDF9; padding: 40px 32px; border-radius: 4px; transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s; } .mry-ap__value::before { content: ""; position: absolute; left: 32px; top: 0; width: 32px; height: 3px; background: #C0903F; transition: width .5s cubic-bezier(.2,.8,.2,1); } .mry-ap__value:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(42,30,20,.10); } .mry-ap__value:hover::before { width: calc(100% - 64px); } .mry-ap__value h3 { font-size: 19px !important; } .mry-ap__value p { font-size: 14px; line-height: 1.6; color: #76695B; } .mry-ap__gallery { display: grid; grid-template-columns: 1fr 1fr 1.3fr 1fr; grid-template-rows: 230px 230px; gap: 14px; padding: 96px 0; } .mry-ap__gallery img { border-radius: 4px; min-height: 0; transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .6s; } .mry-ap__gallery img:nth-child(1) { grid-row: 1 / 3; } .mry-ap__gallery img:nth-child(3) { grid-column: 3; grid-row: 1 / 3; } .mry-ap__gallery img:nth-child(5) { grid-column: 4; grid-row: 1 / 3; } .mry-ap__gallery img:nth-child(2) { grid-column: 2; grid-row: 1; } .mry-ap__gallery img:nth-child(4) { grid-column: 2; grid-row: 2; } .mry-ap__gallery img:hover { transform: scale(1.03); filter: brightness(1.05); } .mry-ap__cta { position: relative; border-radius: 4px; overflow: hidden; padding: 96px 32px; text-align: center; margin-bottom: 64px; background: #2A1E14 url("/img/cms/boutique-facade.jpg") center / cover no-repeat; } .mry-ap__cta::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(30,20,12,.9), rgba(30,20,12,.6)); } .mry-ap__cta-inner { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; } .mry-ap__cta .mry-ap__kicker { color: #EDD198 !important; } .mry-ap__cta h2.mry-ap__h2 { color: #FFFFFF !important; } .mry-ap__cta-text { color: #EFE6D8; font-size: 17px; } .mry-ap__cta .mry-ap__btns { justify-content: center; } html.mry-js .mry-reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s cubic-bezier(.2,.8,.2,1), transform 1s cubic-bezier(.2,.8,.2,1); } html.mry-js .mry-reveal.is-in { opacity: 1; transform: none; } html.mry-js .mry-ap__values .mry-reveal:nth-child(2) { transition-delay: .12s; } html.mry-js .mry-ap__values .mry-reveal:nth-child(3) { transition-delay: .24s; } html.mry-js .mry-ap__values .mry-reveal:nth-child(4) { transition-delay: .36s; } @keyframes mry-ap-in-up { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } } @keyframes mry-ap-in-right { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: none; } } @keyframes mry-ap-pop { from { opacity: 0; transform: scale(.4) rotate(-20deg); } to { opacity: 1; transform: none; } } @keyframes mry-ap-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @keyframes mry-ap-spin { to { transform: rotate(360deg); } } @keyframes mry-ap-marquee { to { transform: translateX(-50%); } } @media (max-width: 991px) { .mry-ap__hero { grid-template-columns: 1fr; gap: 40px; min-height: 0; padding: 32px 0 56px; } .mry-ap__hero-media { height: 460px; } .mry-ap__badge { width: 104px; height: 104px; left: auto; right: 16px; top: auto; bottom: 16px; } .mry-ap__badge span { font-size: 24px; } .mry-ap__marquee-track span { font-size: 20px; } .mry-ap__steps { padding-top: 80px; } .mry-ap__step { grid-template-columns: 1fr; gap: 24px; margin-bottom: 64px; } .mry-ap__step--rev .mry-ap__step-img { order: 0; } .mry-ap__step-img { height: 320px; } .mry-ap__num { font-size: 64px; } .mry-ap__values { padding: 64px 16px; } .mry-ap__values-inner { grid-template-columns: 1fr 1fr; } .mry-ap__gallery { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 200px); padding: 64px 0; } .mry-ap__gallery img:nth-child(n) { grid-column: auto; grid-row: auto; } .mry-ap__gallery img:nth-child(1) { grid-column: 1 / -1; } .mry-ap__gallery img:nth-child(5) { display: none; } .mry-ap__cta { padding: 64px 20px; } } @media (max-width: 540px) { .mry-ap__values-inner { grid-template-columns: 1fr; } .mry-ap__hero-media { height: 400px; } } @media (prefers-reduced-motion: reduce) { .mry-ap *, .mry-ap *::before { animation: none !important; transition: none !important; } html.mry-js .mry-reveal { opacity: 1; transform: none; } } /* 13. PAGE « FAQ » */ body.cms-id-7 .page-header, body.cms-id-7 h1.page-title, body.cms-id-7 #wrapper .breadcrumb { display: none !important; } .mry-faq { color: #2A2018; padding: 48px 0 64px; } .mry-faq p { margin: 0; } .mry-faq__head { text-align: center; max-width: 640px; margin: 0 auto 64px; animation: mry-faq-up 1s cubic-bezier(.2,.8,.2,1) both; } .mry-faq__palm { display: block; width: 40px; height: 40px; margin: 0 auto 14px; background: #C0903F; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 8c0-2.76-2.46-5-5.5-5S2 5.24 2 8h2l1-1 1 1h4'/%3E%3Cpath d='M13 7.14A5.82 5.82 0 0 1 16.5 6c3.04 0 5.5 2.24 5.5 5h-3l-1-1-1 1h-3'/%3E%3Cpath d='M5.89 9.71c-2.15 2.15-2.3 5.47-.35 7.43l4.24-4.25.7-.7.71-.71 2.12-2.12c-1.95-1.96-5.27-1.8-7.42.35'/%3E%3Cpath d='M11 15.5c.5 2.5-.17 4.5-1 6.5h4c2-5.5-.5-12-1-14'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 8c0-2.76-2.46-5-5.5-5S2 5.24 2 8h2l1-1 1 1h4'/%3E%3Cpath d='M13 7.14A5.82 5.82 0 0 1 16.5 6c3.04 0 5.5 2.24 5.5 5h-3l-1-1-1 1h-3'/%3E%3Cpath d='M5.89 9.71c-2.15 2.15-2.3 5.47-.35 7.43l4.24-4.25.7-.7.71-.71 2.12-2.12c-1.95-1.96-5.27-1.8-7.42.35'/%3E%3Cpath d='M11 15.5c.5 2.5-.17 4.5-1 6.5h4c2-5.5-.5-12-1-14'/%3E%3C/svg%3E") center / contain no-repeat; } .mry-faq__kicker { font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: #8C6420 !important; margin-bottom: 12px !important; } .mry-faq h2.mry-faq__title, .mry-faq h2.mry-faq__cta-title { font-family: 'Josefin Sans', sans-serif !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: #2A2018 !important; line-height: 1.1 !important; } .mry-faq h2.mry-faq__title { font-size: clamp(34px, 4.4vw, 56px) !important; margin: 0 0 18px !important; } .mry-faq__lead { font-size: 17px; line-height: 1.7; color: #76695B; } .mry-faq__layout { display: grid; grid-template-columns: 240px 1fr; gap: 64px; align-items: start; } .mry-faq__nav { position: sticky; top: 120px; display: flex; flex-direction: column; border-left: 1px solid rgba(42,32,24,.12); animation: mry-faq-up 1s cubic-bezier(.2,.8,.2,1) .2s both; } .mry-faq__nav a { position: relative; padding: 10px 0 10px 20px; color: #76695B !important; font-family: 'Josefin Sans', sans-serif; font-weight: 600; font-size: 15px; text-decoration: none !important; transition: color .25s, padding .25s; } .mry-faq__nav a::before { content: ""; position: absolute; left: -1px; top: 50%; width: 2px; height: 0; background: #C0903F; transform: translateY(-50%); transition: height .3s; } .mry-faq__nav a:hover, .mry-faq__nav a.is-active { color: #2A2018 !important; padding-left: 26px; } .mry-faq__nav a:hover::before, .mry-faq__nav a.is-active::before { height: 100%; } .mry-faq__group { margin-bottom: 48px; scroll-margin-top: 120px; } .mry-faq__cat { font-family: 'Josefin Sans', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #8C6420; margin-bottom: 14px !important; } .mry-faq__item { background: #FFFFFF; border: 1px solid rgba(42,32,24,.08); border-radius: 4px; margin-bottom: 10px; transition: border-color .3s, box-shadow .3s; } .mry-faq__item:hover { border-color: rgba(192,144,63,.5); } .mry-faq__item.is-open { border-color: #C0903F; box-shadow: 0 14px 34px rgba(42,30,20,.08); } .mry-faq__q { position: relative; cursor: pointer; padding: 22px 64px 20px 26px; font-family: 'Josefin Sans', sans-serif; font-weight: 600; font-size: 18px; line-height: 1.35; color: #2A2018; user-select: none; } .mry-faq__q::before, .mry-faq__q::after { content: ""; position: absolute; right: 28px; top: 50%; width: 14px; height: 1.5px; background: #8C6420; transition: transform .4s cubic-bezier(.2,.8,.2,1); } .mry-faq__q::after { transform: rotate(90deg); } .mry-faq__item.is-open .mry-faq__q::after { transform: rotate(0deg); } .mry-faq__item.is-open .mry-faq__q::before { transform: rotate(180deg); } .mry-faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.2,.8,.2,1); } .mry-faq__a > div { overflow: hidden; } .mry-faq__a p { padding: 0 26px 24px; font-size: 15px; line-height: 1.8; color: #76695B; opacity: 0; transform: translateY(-6px); transition: opacity .35s .05s, transform .35s .05s; } .mry-faq__item.is-open .mry-faq__a { grid-template-rows: 1fr; } .mry-faq__item.is-open .mry-faq__a p { opacity: 1; transform: none; } html:not(.mry-js) .mry-faq__a { grid-template-rows: 1fr; } html:not(.mry-js) .mry-faq__a p { opacity: 1; transform: none; } .mry-faq__cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 40px; padding: 44px 48px; border-radius: 4px; background: #2A1E14; } .mry-faq h2.mry-faq__cta-title { color: #F4EADB !important; font-size: clamp(24px, 2.6vw, 32px) !important; margin: 0 0 8px !important; } .mry-faq__cta p { color: rgba(244,234,219,.75); } .mry-faq__cta-btns { display: flex; gap: 12px; flex-wrap: wrap; } .mry-faq a.mry-faq__btn, .mry-faq a.mry-faq__btn:visited { display: inline-flex; align-items: center; min-height: 50px; padding: 4px 28px 0; border-radius: 2px; background: #FFFDF9; color: #2A2018 !important; font-family: 'Josefin Sans', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none !important; transition: transform .3s, background .3s; } .mry-faq a.mry-faq__btn:hover { transform: translateY(-2px); background: #C0903F; } .mry-faq a.mry-faq__btn--wa, .mry-faq a.mry-faq__btn--wa:visited { background: #1F9D55; color: #FFFFFF !important; } .mry-faq a.mry-faq__btn--wa:hover { background: #198A4A; } @keyframes mry-faq-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } } @media (max-width: 991px) { .mry-faq { padding-top: 24px; } .mry-faq__head { margin-bottom: 36px; } .mry-faq__layout { grid-template-columns: 1fr; gap: 28px; } .mry-faq__nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 8px; border-left: 0; } .mry-faq__nav a { padding: 8px 16px !important; border: 1px solid rgba(42,32,24,.15); border-radius: 40px; font-size: 14px; } .mry-faq__nav a::before { display: none; } .mry-faq__q { font-size: 16px; padding: 18px 56px 16px 20px; } .mry-faq__q::before, .mry-faq__q::after { right: 22px; } .mry-faq__a p { padding: 0 20px 20px; } .mry-faq__cta { flex-direction: column; align-items: flex-start; padding: 32px 24px; } } /* Bouton catalogue (page À propos) */ .mry-ap a.mry-ap__btn--outline, .mry-ap a.mry-ap__btn--outline:visited { background: transparent; color: #2A2018 !important; border: 1px solid #2A2018; } .mry-ap a.mry-ap__btn--outline:hover { background: #2A2018; color: #FFFDF9 !important; } /* 14. Tous les boutons dorés : texte blanc */ html body a.mry-btn--primary, html body a.mry-btn--primary:visited, html body a.mry-btn--primary:hover, html body a.mry-btn--primary:focus, html body a.mry-btn--primary *, html body #wrapper a.mry-btn--primary, html body #wrapper a.mry-btn--primary:visited, html body .elementor a.mry-btn--primary, html body .elementor a.mry-btn--primary:visited, html body .elementor-widget-html a.mry-btn--primary, html body .mry-slider a.mry-btn--primary, html body .mry-slider a.mry-btn--primary:visited { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; } html body a.mry-btn--primary:hover { background: #6E4E17 !important; } /* 15. PAGE BOUTIQUE : arbre des catégories à gauche, toujours ouvert */ body#category .block-categories { background: #FFFFFF; border: 1px solid rgba(42,32,24,.08); border-radius: 4px; padding: 24px 22px 18px; } body#category .block-categories .block-title { border: 0 !important; margin: 0 0 14px !important; padding: 0 0 12px !important; position: relative; } body#category .block-categories .block-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 3px; background: #C0903F; } body#category .block-categories .block-title a { font-size: 0 !important; color: transparent !important; pointer-events: none; } body#category .block-categories .block-title a::after { content: "Catégories"; font-family: 'Josefin Sans', sans-serif; font-weight: 600; font-size: 18px; color: #2A2018; text-transform: none; letter-spacing: 0; } body#category .block-categories .collapse { display: block !important; height: auto !important; visibility: visible !important; } body#category .block-categories .collapse-icons, body#category .block-categories .arrows { display: none !important; } body#category .block-categories .category-sub-menu { list-style: none; margin: 0; padding: 0; } body#category .block-categories li[data-depth="0"] > a { display: none !important; } body#category .block-categories li[data-depth="1"] { padding: 10px 0; border-bottom: 1px solid rgba(42,32,24,.08); } body#category .block-categories li[data-depth="1"]:last-child { border-bottom: 0; } body#category .block-categories li[data-depth="1"] > a { display: block; font-family: 'Josefin Sans', sans-serif !important; font-weight: 600 !important; font-size: 15px !important; color: #2A2018 !important; text-decoration: none !important; padding: 2px 0 6px; transition: color .2s; } body#category .block-categories li[data-depth="1"] > a:hover { color: #8C6420 !important; } body#category .block-categories li[data-depth="2"] > a { position: relative; display: block; padding: 4px 0 4px 16px !important; font-size: 14px !important; color: #76695B !important; text-decoration: none !important; transition: color .2s, padding .2s; } body#category .block-categories li[data-depth="2"] > a::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 1px; background: #C0903F; transition: width .2s; } body#category .block-categories li[data-depth="2"] > a:hover { color: #2A2018 !important; padding-left: 20px !important; } body#category .block-categories li[data-depth="2"] > a:hover::before { width: 10px; } /* 16. PAGE CONTACT */ body#contact #wrapper .breadcrumb { display: none !important; } body#contact #main { display: flex; flex-direction: column; } body#contact #main > .page-header { order: 1; } body#contact #main > #content, body#contact #main > .page-content, body#contact #main > section { order: 2; } body#contact #iqitcontactpage-map { order: 3; } body#contact .page-header { text-align: center; border: 0 !important; margin: 48px auto 48px !important; padding: 0 !important; max-width: 640px; animation: mry-ct-up .9s cubic-bezier(.2,.8,.2,1) both; } body#contact .page-header::before { content: "Une question, une commande ?"; display: block; font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: #8C6420; margin-bottom: 12px; } body#contact .page-header h1.page-title { border: 0 !important; padding: 0 !important; margin: 0 !important; } body#contact .page-header h1.page-title span { font-family: 'Josefin Sans', sans-serif !important; font-weight: 600 !important; font-size: clamp(34px, 4.4vw, 56px) !important; line-height: 1.1 !important; color: #2A2018 !important; text-transform: none !important; letter-spacing: 0 !important; border: 0 !important; } body#contact .page-header::after { content: "Écrivez-nous, appelez-nous ou passez nous voir en boutique : nous répondons rapidement."; display: block; margin-top: 16px; font-size: 17px; line-height: 1.7; color: #76695B; } body#contact .page-content > .row, body#contact #content > .row { display: grid !important; grid-template-columns: 380px 1fr; gap: 32px; margin: 0 0 64px !important; align-items: start; } body#contact .page-content > .row > [class*="col-"], body#contact #content > .row > [class*="col-"] { width: auto !important; max-width: none !important; flex: none !important; } body#contact .page-content > .row > [class*="col-"]:not(.contact-page-info), body#contact #content > .row > [class*="col-"]:not(.contact-page-info) { padding: 0 !important; } body#contact .row > .contact-page-info { background: #2A1E14; color: #F4EADB; border-radius: 4px; padding: 40px 36px !important; animation: mry-ct-up .9s cubic-bezier(.2,.8,.2,1) .15s both; position: relative; overflow: hidden; } body#contact .contact-page-info::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 200px; height: 200px; border: 1px dashed rgba(192,144,63,.35); border-radius: 50%; animation: mry-ct-spin 40s linear infinite; pointer-events: none; } body#contact .contact-page-info hr { border: 0; border-top: 1px solid rgba(244,234,219,.12) !important; margin: 18px 0 !important; } body#contact .contact-rich > strong { display: block; font-family: 'Josefin Sans', sans-serif; font-weight: 600; font-size: 24px; color: #FFFFFF; margin-bottom: 22px; } body#contact .contact-rich .part { display: flex; align-items: center; gap: 16px; } body#contact .contact-rich .icon { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(192,144,63,.16); color: #C0903F; font-size: 17px; transition: background .3s, color .3s, transform .3s; } body#contact .contact-rich .part:hover .icon { background: #C0903F; color: #2A1E14; transform: scale(1.06); } body#contact .contact-rich .data, body#contact .contact-rich .data a { color: #F4EADB !important; font-size: 15px; line-height: 1.5; text-decoration: none !important; } body#contact .contact-rich .data a:hover { color: #EDD198 !important; } body#contact .contact-page-info .part:not(.contact-rich .part) { color: rgba(244,234,219,.75); font-size: 14px; line-height: 1.7; } body#contact .mry-ct__label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #C0903F !important; margin: 0 0 6px !important; } body#contact .mry-ct p { color: rgba(244,234,219,.8); margin: 0 0 18px; } body#contact .mry-ct__btns { display: flex; flex-wrap: wrap; gap: 10px; } body#contact a.mry-ct__btn, body#contact a.mry-ct__btn:visited { display: inline-flex; align-items: center; min-height: 46px; padding: 4px 22px 0; border-radius: 2px; background: #1F9D55; color: #FFFFFF !important; font-family: 'Josefin Sans', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none !important; transition: transform .3s, background .3s; } body#contact a.mry-ct__btn:hover { transform: translateY(-2px); background: #198A4A; } body#contact a.mry-ct__btn--light, body#contact a.mry-ct__btn--light:visited { background: transparent; border: 1px solid rgba(244,234,219,.5); color: #F4EADB !important; } body#contact a.mry-ct__btn--light:hover { background: #F4EADB; color: #2A1E14 !important; } body#contact .contact-form { background: #FFFFFF; border: 1px solid rgba(42,32,24,.08); border-radius: 4px; padding: 40px 44px; box-shadow: 0 20px 50px rgba(42,30,20,.06); animation: mry-ct-up .9s cubic-bezier(.2,.8,.2,1) .3s both; } body#contact .contact-form .form-group.row { display: block !important; margin: 0 0 20px !important; } body#contact .contact-form .form-group.row > [class*="col-"] { width: 100% !important; max-width: 100% !important; flex: none !important; padding: 0 !important; margin: 0 !important; } body#contact .contact-form h4 { font-size: 0 !important; margin: 0 0 8px !important; } body#contact .contact-form h4::after { content: "Envoyez-nous un message"; font-family: 'Josefin Sans', sans-serif; font-weight: 600; font-size: 26px; color: #2A2018; } body#contact .contact-form label.form-control-label { display: block; text-align: left !important; font-size: 13px; font-weight: 500; color: #2A2018; margin-bottom: 8px !important; padding: 0 !important; } body#contact .contact-form .form-control-comment { display: none !important; } body#contact .contact-form .form-control, body#contact .contact-form .bootstrap-filestyle .form-control { min-height: 50px; border: 1px solid rgba(42,32,24,.16) !important; border-radius: 2px !important; background: #FFFDF9 !important; font-size: 15px; color: #2A2018; padding: 12px 16px; font-family: inherit; transition: border-color .25s, box-shadow .25s, background .25s; box-shadow: none !important; } body#contact .contact-form .form-control:focus { border-color: #C0903F !important; background: #FFFFFF !important; box-shadow: 0 0 0 4px rgba(192,144,63,.14) !important; outline: 0; } body#contact .contact-form textarea.form-control { min-height: 160px; resize: vertical; } body#contact .contact-form .bootstrap-filestyle .btn { border-radius: 2px !important; } body#contact .contact-form .form-footer { text-align: left !important; padding: 8px 0 0 !important; border: 0 !important; } body#contact .contact-form input.btn.btn-primary[type="submit"] { min-height: 54px; padding: 4px 44px 0 !important; background: #8C6420 !important; border: 0 !important; border-radius: 2px !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF; font-family: 'Josefin Sans', sans-serif !important; font-weight: 600 !important; font-size: 14px !important; letter-spacing: .1em; text-transform: uppercase; transition: transform .3s, box-shadow .3s, background .3s; } body#contact .contact-form input.btn.btn-primary[type="submit"]:hover { background: #6E4E17 !important; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(42,30,20,.22); } body#contact #iqitcontactpage-map { margin: 0 0 64px; border-radius: 4px; overflow: hidden; position: relative; box-shadow: 0 20px 50px rgba(42,30,20,.08); } body#contact #iqitcontactpage-map iframe { display: block; width: 100%; height: 380px; filter: sepia(.25) saturate(.85); transition: filter .5s; } body#contact #iqitcontactpage-map:hover iframe { filter: none; } @keyframes mry-ct-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } } @keyframes mry-ct-spin { to { transform: rotate(360deg); } } @media (max-width: 991px) { body#contact .page-header { margin: 24px auto 32px !important; } body#contact .page-content > .row, body#contact #content > .row { grid-template-columns: 1fr; gap: 20px; margin-bottom: 40px !important; } body#contact .row > .contact-page-info { padding: 32px 24px !important; } body#contact .contact-form { padding: 28px 20px; } body#contact .contact-form input.btn.btn-primary[type="submit"] { width: 100%; } body#contact #iqitcontactpage-map iframe { height: 280px; } } @media (prefers-reduced-motion: reduce) { body#contact *, body#contact *::after { animation: none !important; } } /* 17. PAGE LIVRAISON */ body.cms-id-1 .page-header, body.cms-id-1 h1.page-title, body.cms-id-1 #wrapper .breadcrumb { display: none !important; } .mry-lv { color: #2A2018; padding: 48px 0 64px; } .mry-lv p { margin: 0; } .mry-lv__head { text-align: center; max-width: 640px; margin: 0 auto 56px; animation: mry-faq-up 1s cubic-bezier(.2,.8,.2,1) both; } .mry-lv__kicker { font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: #8C6420 !important; margin-bottom: 12px !important; } .mry-lv h2.mry-lv__title { font-family: 'Josefin Sans', sans-serif !important; font-weight: 600 !important; font-size: clamp(34px, 4.4vw, 56px) !important; line-height: 1.1 !important; letter-spacing: 0 !important; text-transform: none !important; color: #2A2018 !important; margin: 0 0 18px !important; } .mry-lv__lead { font-size: 17px; line-height: 1.7; color: #76695B; } .mry-lv h3 { font-family: 'Josefin Sans', sans-serif !important; font-weight: 600 !important; font-size: 20px !important; text-transform: none !important; letter-spacing: 0 !important; color: #2A2018 !important; margin: 0 0 10px !important; } .mry-lv__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 56px; } .mry-lv__card { position: relative; background: #FFFFFF; border: 1px solid rgba(42,32,24,.08); border-radius: 4px; padding: 36px 30px; transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s; } .mry-lv__card::before { content: ""; position: absolute; left: 30px; top: 0; width: 32px; height: 3px; background: #C0903F; transition: width .5s cubic-bezier(.2,.8,.2,1); } .mry-lv__card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(42,30,20,.10); } .mry-lv__card:hover::before { width: calc(100% - 60px); } .mry-lv__card p { font-size: 15px; line-height: 1.7; color: #76695B; } .mry-lv__num { display: block; font-family: 'Josefin Sans', sans-serif; font-weight: 700; font-size: 56px; line-height: 1; color: transparent; -webkit-text-stroke: 1px #C0903F; margin-bottom: 14px; } .mry-lv__steps { background: #F4EEE3; border-radius: 4px; padding: 44px 48px; margin-bottom: 40px; } .mry-lv h3.mry-lv__subtitle { font-size: 26px !important; margin-bottom: 24px !important; } .mry-lv__steps ol { list-style: none; counter-reset: lv; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .mry-lv__steps li { counter-increment: lv; position: relative; padding-top: 48px; font-size: 15px; line-height: 1.6; color: #76695B; } .mry-lv__steps li::before { content: counter(lv); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; background: #2A1E14; color: #EDD198; display: grid; place-items: center; font-family: 'Josefin Sans', sans-serif; font-weight: 700; font-size: 15px; } .mry-lv__steps li:not(:last-child)::after { content: ""; position: absolute; left: 44px; right: -12px; top: 18px; height: 1px; background: rgba(42,32,24,.18); } .mry-lv__steps li strong { display: block; color: #2A2018; font-weight: 600; margin-bottom: 2px; } .mry-lv__info { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 40px; } .mry-lv__info > div { border-left: 3px solid #C0903F; padding: 6px 0 6px 22px; } .mry-lv__info p { font-size: 15px; line-height: 1.7; color: #76695B; } .mry-lv__cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: #2A1E14; border-radius: 4px; padding: 32px 40px; } .mry-lv__cta p { font-family: 'Josefin Sans', sans-serif; font-weight: 600; font-size: 22px; color: #F4EADB; } .mry-lv a.mry-lv__btn, .mry-lv a.mry-lv__btn:visited { display: inline-flex; align-items: center; min-height: 50px; padding: 4px 28px 0; border-radius: 2px; background: #1F9D55; color: #FFFFFF !important; font-family: 'Josefin Sans', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none !important; transition: transform .3s, background .3s; } .mry-lv a.mry-lv__btn:hover { transform: translateY(-2px); background: #198A4A; } @media (max-width: 991px) { .mry-lv { padding-top: 24px; } .mry-lv__cards { grid-template-columns: 1fr; } .mry-lv__steps { padding: 32px 24px; } .mry-lv__steps ol { grid-template-columns: 1fr 1fr; } .mry-lv__steps li::after { display: none; } .mry-lv__info { grid-template-columns: 1fr; } .mry-lv__cta { flex-direction: column; align-items: flex-start; padding: 28px 24px; } } @media (max-width: 540px) { .mry-lv__steps ol { grid-template-columns: 1fr; } } /* 18. Icônes du header : correction pour afficher le chiffre du panier */ #header .col-header-right .header-btn i.icon { background: none !important; -webkit-mask: none !important; mask: none !important; position: relative; font-size: 0 !important; width: 24px; height: 24px; display: inline-block; } #header .col-header-right .header-btn i.icon::before { content: "" !important; display: block; width: 24px; height: 24px; background: #2A2018; -webkit-mask: var(--ic) center / 24px no-repeat; mask: var(--ic) center / 24px no-repeat; transition: background .2s; } #header .col-header-right .header-btn:hover i.icon::before { background: #8C6420; } #header .col-header-right .header-btn i.icon .cart-products-count-btn { position: absolute; top: -6px; right: -9px; min-width: 18px; height: 18px; padding: 0 4px; font-family: 'Jost', sans-serif; font-size: 10px !important; font-weight: 600; font-style: normal; line-height: 18px; text-align: center; border-radius: 9px !important; background: #8C6420 !important; color: #FFFFFF !important; } #header .col-header-right .header-btn i.icon .cart-products-count-btn.d-none { display: none !important; } /* 19. Cacher le sélecteur de langue */ #header .language-selector-wrapper, #header .language-selector, #header #language-selector-label, #header [class*="language-selector"], #mobile-header [class*="language-selector"] { display: none !important; } /* 20. En-tête collant au défilement : fond crème, ombre, logo plus petit */ #desktop-header.stuck, #desktop-header.stuck-header-element, #iqitmegamenu-wrapper.stuck { background: #FFFDF9 !important; box-shadow: 0 4px 20px rgba(42, 32, 24, .10) !important; z-index: 1000 !important; } #desktop-header.stuck .header-top { padding-top: 2px !important; padding-bottom: 2px !important; border-bottom: 0 !important; } #desktop-header.stuck #desktop_logo img { max-height: 58px !important; transition: max-height .3s; } #desktop-header.stuck #cbp-hrmenu > ul > li > a { padding-top: 12px !important; padding-bottom: 12px !important; } #iqitmegamenu-wrapper.stuck { left: 0 !important; right: 0 !important; width: 100% !important; } #iqitmegamenu-wrapper.stuck #cbp-hrmenu { background: #FFFDF9 !important; } #desktop_logo img { transition: max-height .3s; } /* Cacher les logos de cartes bancaires */ #footer-copyrights .copyright-img { display: none !important; } /* 22. Pied de page : « Contact us » → « Contactez-nous » + horaires propres */ .block-iqitcontactpage .block-title span { font-size: 0 !important; } .block-iqitcontactpage .block-title span::after { content: "Contactez-nous"; font-size: 15px; } .block-iqitcontactpage .mry-ct__label { font-weight: 600; color: #2A2018; margin: 0 0 4px !important; } .block-iqitcontactpage .mry-ct p { margin: 0 0 10px; font-size: 14px; color: #76695B; } .block-iqitcontactpage .mry-ct__btns { display: none !important; } /* 23. PAGE COMMANDE (checkout) */ body#checkout #main > h1.page-title { text-align: center; border: 0 !important; margin: 32px 0 40px !important; padding: 0 !important; } body#checkout #main > h1.page-title::before { content: "Plus qu'une étape"; display: block; font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: #8C6420; margin-bottom: 10px; } body#checkout #main > h1.page-title span { font-size: 0 !important; border: 0 !important; } body#checkout #main > h1.page-title span::after { content: "Finaliser ma commande"; font-family: 'Josefin Sans', sans-serif; font-weight: 600; font-size: clamp(30px, 3.6vw, 44px); color: #2A2018; letter-spacing: 0; text-transform: none; } body#checkout .checkout-step { background: #FFFFFF; border: 1px solid rgba(42,32,24,.08) !important; border-radius: 4px; margin-bottom: 14px !important; overflow: hidden; transition: box-shadow .3s, border-color .3s; } body#checkout .checkout-step.-current { border-color: rgba(192,144,63,.6) !important; box-shadow: 0 18px 44px rgba(42,30,20,.08); } body#checkout .checkout-step .step-title { display: flex !important; align-items: center; gap: 14px; margin: 0 !important; padding: 22px 28px !important; border: 0 !important; font-family: 'Josefin Sans', sans-serif !important; font-weight: 600 !important; font-size: 20px !important; color: #2A2018 !important; text-transform: none !important; letter-spacing: 0 !important; background: transparent !important; } body#checkout .checkout-step .step-number { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #F4EEE3; color: #8C6420; font-size: 15px; font-weight: 700; margin: 0 !important; } body#checkout .checkout-step.-current .step-number { background: #8C6420; color: #FFFFFF; } body#checkout .checkout-step.-complete .step-number { background: #2A1E14; color: #EDD198; } body#checkout .checkout-step:not(.-current):not(.-complete) .step-title { color: rgba(42,32,24,.4) !important; } body#checkout .checkout-step .step-title .done { color: #1F9D55; margin-left: 4px; } body#checkout .checkout-step .step-edit { margin-left: auto !important; font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 500; color: #8C6420 !important; } body#checkout .checkout-step .content { padding: 4px 28px 28px !important; border: 0 !important; } body#checkout .checkout-step .form-group.row { display: block !important; margin: 0 0 18px !important; } body#checkout .checkout-step .form-group.row > [class*="col-"] { width: 100% !important; max-width: 100% !important; flex: none !important; padding: 0 !important; margin: 0 !important; text-align: left !important; } body#checkout .checkout-step .form-group.row > label { display: block; font-size: 13px; font-weight: 500; color: #2A2018; margin-bottom: 7px !important; } body#checkout .checkout-step .form-control-comment { display: block; font-size: 12px; color: #9A8D7E; padding-top: 4px !important; } body#checkout .checkout-step .form-control, body#checkout .checkout-step .form-control-select, body#checkout .checkout-step .input-group .form-control { min-height: 50px; border: 1px solid rgba(42,32,24,.16) !important; border-radius: 2px !important; background: #FFFDF9 !important; font-size: 15px; color: #2A2018; padding: 12px 16px; box-shadow: none !important; transition: border-color .25s, box-shadow .25s, background .25s; } body#checkout .checkout-step .form-control:focus { border-color: #C0903F !important; background: #FFFFFF !important; box-shadow: 0 0 0 4px rgba(192,144,63,.14) !important; outline: 0; } body#checkout .checkout-step .input-group-btn .btn, body#checkout .checkout-step .input-group .btn { min-height: 50px; border-radius: 2px !important; border: 1px solid rgba(42,32,24,.16) !important; border-left: 0 !important; background: #FFFDF9 !important; color: #76695B !important; } body#checkout .checkout-step .password-strength-feedback, body#checkout .checkout-step .password-requirements { font-size: 12px; } body#checkout .checkout-step .custom-checkbox input + span, body#checkout .checkout-step .custom-radio { border-color: rgba(42,32,24,.3) !important; } body#checkout .checkout-step .custom-checkbox label, body#checkout .checkout-step .custom-checkbox { font-size: 14px; color: #2A2018; } body#checkout .checkout-step .custom-checkbox label a, body#checkout .checkout-step a { color: #8C6420 !important; } body#checkout .checkout-step p, body#checkout .checkout-step .nav-link { font-size: 14px; color: #76695B; } body#checkout .checkout-step .nav-inline, body#checkout .checkout-step .nav { gap: 8px; margin-bottom: 18px; } body#checkout .btn-primary, body#checkout .btn-primary:visited { min-height: 54px; background: #8C6420 !important; border: 0 !important; border-radius: 2px !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF; font-family: 'Josefin Sans', sans-serif !important; font-weight: 600 !important; font-size: 14px !important; letter-spacing: .1em; text-transform: uppercase; transition: background .3s, transform .3s, box-shadow .3s; } body#checkout .btn-primary:hover { background: #6E4E17 !important; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(42,30,20,.2); } body#checkout .delivery-option, body#checkout .payment-option { background: #FFFDF9; border: 1px solid rgba(42,32,24,.12); border-radius: 4px; padding: 16px 18px !important; margin-bottom: 10px !important; transition: border-color .25s; } body#checkout .delivery-option:hover, body#checkout .payment-option:hover { border-color: #C0903F; } body#checkout .cart-grid-right { position: sticky; top: 110px; align-self: flex-start; } body#checkout #js-checkout-summary { background: #FFFFFF; border: 1px solid rgba(42,32,24,.08) !important; border-radius: 4px !important; box-shadow: 0 18px 44px rgba(42,30,20,.06); overflow: hidden; } body#checkout #js-checkout-summary::before { content: "Votre commande"; display: block; padding: 20px 24px 14px; font-family: 'Josefin Sans', sans-serif; font-weight: 600; font-size: 20px; color: #2A2018; border-bottom: 1px solid rgba(42,32,24,.08); } body#checkout #js-checkout-summary .card-block, body#checkout #js-checkout-summary .card-body { padding-left: 24px !important; padding-right: 24px !important; } body#checkout #js-checkout-summary .cart-total, body#checkout #js-checkout-summary .cart-summary-totals { background: #F4EEE3 !important; } body#checkout #js-checkout-summary .cart-total .label, body#checkout #js-checkout-summary .cart-total .value { font-family: 'Josefin Sans', sans-serif; font-weight: 700; color: #2A2018 !important; } body#checkout #js-checkout-summary::after { content: "✓ Paiement à la livraison\A✓ Livraison partout en Tunisie\A✓ Retrait gratuit en boutique"; white-space: pre; display: block; padding: 18px 24px 20px; font-size: 13px; line-height: 1.9; color: #76695B; border-top: 1px solid rgba(42,32,24,.08); } @media (max-width: 767px) { body#checkout #main > h1.page-title { margin: 16px 0 24px !important; } body#checkout .checkout-step .step-title { padding: 18px 18px !important; font-size: 18px !important; } body#checkout .checkout-step .content { padding: 4px 18px 22px !important; } body#checkout .cart-grid-right { position: static; margin-top: 16px; } } /* 24. Pied de page : nom de la boutique lisible (correction page Contact) */ #footer .contact-rich > strong, body#contact #footer .contact-rich > strong { color: #2A2018 !important; font-size: 15px !important; margin-bottom: 10px !important; } #footer .contact-rich .data, #footer .contact-rich .data a, body#contact #footer .contact-rich .data, body#contact #footer .contact-rich .data a { color: #2A2018 !important; } body#contact #footer .contact-rich .icon { width: auto !important; height: auto !important; background: none !important; color: #2A2018 !important; font-size: 14px !important; } body#contact #footer .contact-rich .part { gap: 8px !important; } /* 25. Pied de page : horaires lisibles (page Contact) */ #footer .mry-ct p, body#contact #footer .mry-ct p { color: #76695B !important; font-size: 14px !important; margin: 0 0 10px !important; } #footer .mry-ct__label, body#contact #footer .mry-ct__label { color: #2A2018 !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; font-size: 14px !important; } #footer .mry-ct__btns, body#contact #footer .mry-ct__btns { display: none !important; } /* 26. Commande : rond numéroté des étapes, complet et avec le chiffre */ body#checkout .checkout-step .step-number { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 34px !important; width: 34px !important; height: 34px !important; min-width: 34px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 50% !important; box-shadow: none !important; overflow: visible !important; transform: none !important; text-indent: 0 !important; font-family: 'Josefin Sans', sans-serif !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1 !important; padding-top: 3px !important; background: #F4EEE3 !important; color: #8C6420 !important; -webkit-text-fill-color: #8C6420 !important; } body#checkout .checkout-step .step-number::before, body#checkout .checkout-step .step-number::after { content: none !important; display: none !important; } body#checkout .checkout-step.-current .step-number { background: #8C6420 !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; } body#checkout .checkout-step.-complete .step-number { background: #2A1E14 !important; color: #EDD198 !important; -webkit-text-fill-color: #EDD198 !important; } body#checkout .checkout-step .step-title .done { position: static !important; } /* 27. BOUTIQUE MOBILE : catégories en haut, en boutons qui défilent */ @media (max-width: 767px) { body#category #wrapper .row { display: flex; flex-wrap: wrap; } body#category #left-column { order: -1 !important; width: 100% !important; margin-bottom: 8px; } body#category #content-wrapper { order: 0 !important; } body#category #left-column > *:not(.block-categories) { display: none !important; } body#category .block-categories { background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 !important; } body#category .block-categories .block-title { display: none !important; } body#category .block-categories .category-top-menu > .category-sub-menu > li[data-depth="0"] > .collapse > .category-sub-menu { display: flex !important; flex-wrap: nowrap; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 4px 0 10px; } body#category .block-categories .category-sub-menu::-webkit-scrollbar { display: none; } body#category .block-categories li[data-depth="1"] { flex: none; padding: 0 !important; border: 0 !important; } body#category .block-categories li[data-depth="1"] > a { display: inline-block !important; white-space: nowrap; padding: 9px 16px 7px !important; border: 1px solid rgba(42,32,24,.18); border-radius: 40px; background: #FFFFFF; font-size: 14px !important; } body#category .block-categories li[data-depth="1"] > a:hover { border-color: #C0903F; color: #8C6420 !important; } body#category .block-categories li[data-depth="1"] .collapse { display: none !important; } } /* 28. Boutique mobile : sans flèches */ @media (max-width: 767px) { body#category .block-categories li::before, body#category .block-categories li::after, body#category .block-categories li > a::before, body#category .block-categories .category-sub-menu > li::before { content: none !important; display: none !important; } body#category .block-categories li[data-depth="1"] > a { padding: 9px 16px 7px !important; } } /* 29. Boutique : moins d'espace autour du titre et de la barre de tri */ body#category #main .page-header, body#category #main h1.page-title { margin: 0 0 12px !important; padding: 0 0 10px !important; } body#category #js-product-list-top, body#category .products-selection { margin: 0 0 16px !important; padding: 8px 0 !important; border-top: 0 !important; border-bottom: 1px solid rgba(42,32,24,.08) !important; min-height: 0 !important; align-items: center; } body#category #js-product-list-top hr, body#category .products-selection hr { display: none !important; } body#category .products-selection .row { margin: 0 !important; align-items: center; } body#category .products-selection .form-control, body#category .products-selection .custom-select, body#category .products-selection .select-title, body#category .products-selection .btn, body#category .products-selection .dropdown-toggle { min-height: 36px !important; height: 36px !important; padding: 0 12px !important; line-height: 34px !important; font-size: 13px !important; border-radius: 2px !important; } body#category .products-selection .total-products, body#category .products-selection .showing { font-size: 13px; color: #76695B; margin: 0 !important; } body#category #subcategories, body#category .subcategories { margin: 0 0 12px !important; padding: 0 !important; } body#category #products, body#category #js-product-list { margin-top: 0 !important; padding-top: 0 !important; } @media (max-width: 767px) { body#category #left-column { margin-bottom: 0 !important; } body#category .block-categories .category-sub-menu { padding-bottom: 4px !important; } body#category #main h1.page-title { font-size: 22px !important; } } /* 30. Pied de page : titre Contactez-nous + copyright centré */ .block-iqitcontactpage .block-title span { font-size: inherit !important; } .block-iqitcontactpage .block-title span::after { content: none !important; } #footer-copyrights .copyright-txt { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; text-align: center; } .mry-copy { display: block; text-align: center; padding: 6px 0; font-size: 13px; color: #FFFDF9; } .mry-copy__pay { display: none !important; } @media (max-width: 767px) { .mry-copy { padding-bottom: 46px; } } /* 31. Arbre des catégories : sans les petites flèches (ordinateur + mobile) */ body#category .block-categories li::before, body#category .block-categories li::after, body#category .block-categories li > a::before, body#category .block-categories li[data-depth="1"] > a::before, body#category .block-categories .category-sub-menu > li::before { content: none !important; display: none !important; } body#category .block-categories li[data-depth="1"] > a { padding-left: 0 !important; margin-left: 0 !important; text-indent: 0 !important; } /* on garde le petit trait doré devant les sous-catégories */ body#category .block-categories li[data-depth="2"] > a::before { content: "" !important; display: block !important; position: absolute; left: 0; top: 50%; width: 6px; height: 1px; background: #C0903F; } /* 32. Bouton WhatsApp flottant, toujours visible */ a.mry-whatsapp { position: fixed !important; right: 20px; bottom: 20px; z-index: 9999 !important; display: inline-flex !important; align-items: center; gap: 8px; height: 52px; padding: 0 20px 0 16px; border-radius: 26px; background: #1F9D55 !important; color: #FFFFFF !important; font-size: 14px; font-weight: 500; text-decoration: none !important; box-shadow: 0 6px 20px rgba(0,0,0,.18); transition: transform .3s, background .3s; } a.mry-whatsapp:hover { background: #198A4A !important; transform: translateY(-3px); color: #FFFFFF !important; } a.mry-whatsapp .mry-icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; } a.mry-whatsapp::before { content: ""; position: absolute; inset: 0; border-radius: 26px; box-shadow: 0 0 0 0 rgba(31,157,85,.55); animation: mry-wa-pulse 2.4s infinite; } @keyframes mry-wa-pulse { 0% { box-shadow: 0 0 0 0 rgba(31,157,85,.55); } 70% { box-shadow: 0 0 0 14px rgba(31,157,85,0); } 100% { box-shadow: 0 0 0 0 rgba(31,157,85,0); } } #back-to-top { bottom: 84px !important; right: 26px !important; } @media (max-width: 540px) { a.mry-whatsapp { width: 54px; height: 54px; padding: 0; justify-content: center; border-radius: 50%; right: 16px; bottom: 16px; } a.mry-whatsapp::before { border-radius: 50%; } a.mry-whatsapp span { display: none; } #back-to-top { bottom: 82px !important; right: 21px !important; } } /* 33. Contact : « Référence de commande » indiquée comme facultative */ body#contact .contact-form .form-group:has(#id-order) label.form-control-label::after, body#contact .contact-form .form-group:has(#file-upload) label.form-control-label::after { content: " (facultatif)"; font-weight: 400; color: #9A8D7E; } /* 35. Bouton WhatsApp : rond, sans texte */ a.mry-whatsapp { width: 58px !important; height: 58px !important; padding: 0 !important; justify-content: center !important; border-radius: 50% !important; } a.mry-whatsapp::before { border-radius: 50% !important; } a.mry-whatsapp span { display: none !important; } a.mry-whatsapp .mry-wa-logo { width: 30px; height: 30px; } /* 36. Réseaux : seulement Facebook, Instagram, YouTube */ .social-links li.twitter, .social-links li.pinterest, .social-links li.vimeo, li.twitter:has(.fa-x-twitter), li.pinterest:has(.fa-pinterest-p), li.vimeo:has(.fa-vimeo) { display: none !important; } /* 38. Filtres en haut de la colonne, au-dessus des catégories */ body#category #left-column { display: flex !important; flex-direction: column; } body#category #left-column #search_filters_wrapper, body#category #left-column .block-facets { order: -1; margin: 0 0 16px !important; } body#category #search_filters { background: #FFFFFF; border: 1px solid rgba(42,32,24,.08); border-radius: 4px; padding: 22px 22px 14px; box-shadow: 0 10px 28px rgba(42,30,20,.05); } body#category #search_filters::before { content: "Filtrer"; display: block; font-family: 'Josefin Sans', sans-serif; font-weight: 600; font-size: 18px; color: #2A2018; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid rgba(42,32,24,.08); } @media (max-width: 767px) { body#category #left-column #search_filters_wrapper { display: block !important; order: 1; } }