/* * Custom code goes here. * A template should always ship with an empty custom.css */ @font-face { font-family: 'Roboto Bk'; src: url('../fonts/Roboto-Black.eot'); src: url('../fonts/Roboto-Black.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-Black.woff2') format('woff2'), url('../fonts/Roboto-Black.woff') format('woff'), url('../fonts/Roboto-Black.ttf') format('truetype'), url('../fonts/Roboto-Black.svg#Roboto-Black') format('svg'); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Roboto Bk'; src: url('../fonts/Roboto-BlackItalic.eot'); src: url('../fonts/Roboto-BlackItalic.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-BlackItalic.woff2') format('woff2'), url('../fonts/Roboto-BlackItalic.woff') format('woff'), url('../fonts/Roboto-BlackItalic.ttf') format('truetype'), url('../fonts/Roboto-BlackItalic.svg#Roboto-BlackItalic') format('svg'); font-weight: 900; font-style: italic; font-display: swap; } @font-face { font-family: 'Roboto'; src: url('../fonts/Roboto-Bold.eot'); src: url('../fonts/Roboto-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-Bold.woff2') format('woff2'), url('../fonts/Roboto-Bold.woff') format('woff'), url('../fonts/Roboto-Bold.ttf') format('truetype'), url('../fonts/Roboto-Bold.svg#Roboto-Bold') format('svg'); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: 'Roboto Cn'; src: url('../fonts/Roboto-BoldCondensed.eot'); src: url('../fonts/Roboto-BoldCondensed.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-BoldCondensed.woff2') format('woff2'), url('../fonts/Roboto-BoldCondensed.woff') format('woff'), url('../fonts/Roboto-BoldCondensed.ttf') format('truetype'), url('../fonts/Roboto-BoldCondensed.svg#Roboto-BoldCondensed') format('svg'); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: 'Roboto Cn'; src: url('../fonts/Roboto-BoldCondensedItalic.eot'); src: url('../fonts/Roboto-BoldCondensedItalic.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-BoldCondensedItalic.woff2') format('woff2'), url('../fonts/Roboto-BoldCondensedItalic.woff') format('woff'), url('../fonts/Roboto-BoldCondensedItalic.ttf') format('truetype'), url('../fonts/Roboto-BoldCondensedItalic.svg#Roboto-BoldCondensedItalic') format('svg'); font-weight: bold; font-style: italic; font-display: swap; } @font-face { font-family: 'Roboto'; src: url('../fonts/Roboto-BoldItalic.eot'); src: url('../fonts/Roboto-BoldItalic.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-BoldItalic.woff2') format('woff2'), url('../fonts/Roboto-BoldItalic.woff') format('woff'), url('../fonts/Roboto-BoldItalic.ttf') format('truetype'), url('../fonts/Roboto-BoldItalic.svg#Roboto-BoldItalic') format('svg'); font-weight: bold; font-style: italic; font-display: swap; } @font-face { font-family: 'Roboto Cn'; src: url('../fonts/Roboto-Condensed.eot'); src: url('../fonts/Roboto-Condensed.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-Condensed.woff2') format('woff2'), url('../fonts/Roboto-Condensed.woff') format('woff'), url('../fonts/Roboto-Condensed.ttf') format('truetype'), url('../fonts/Roboto-Condensed.svg#Roboto-Condensed') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Roboto Cn'; src: url('../fonts/Roboto-CondensedItalic.eot'); src: url('../fonts/Roboto-CondensedItalic.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-CondensedItalic.woff2') format('woff2'), url('../fonts/Roboto-CondensedItalic.woff') format('woff'), url('../fonts/Roboto-CondensedItalic.ttf') format('truetype'), url('../fonts/Roboto-CondensedItalic.svg#Roboto-CondensedItalic') format('svg'); font-weight: normal; font-style: italic; font-display: swap; } @font-face { font-family: 'Roboto'; src: url('../fonts/Roboto-Italic.eot'); src: url('../fonts/Roboto-Italic.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-Italic.woff2') format('woff2'), url('../fonts/Roboto-Italic.woff') format('woff'), url('../fonts/Roboto-Italic.ttf') format('truetype'), url('../fonts/Roboto-Italic.svg#Roboto-Italic') format('svg'); font-weight: normal; font-style: italic; font-display: swap; } @font-face { font-family: 'Roboto Lt'; src: url('../fonts/Roboto-Light.eot'); src: url('../fonts/Roboto-Light.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-Light.woff2') format('woff2'), url('../fonts/Roboto-Light.woff') format('woff'), url('../fonts/Roboto-Light.ttf') format('truetype'), url('../fonts/Roboto-Light.svg#Roboto-Light') format('svg'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Roboto Lt'; src: url('../fonts/Roboto-LightItalic.eot'); src: url('../fonts/Roboto-LightItalic.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-LightItalic.woff2') format('woff2'), url('../fonts/Roboto-LightItalic.woff') format('woff'), url('../fonts/Roboto-LightItalic.ttf') format('truetype'), url('../fonts/Roboto-LightItalic.svg#Roboto-LightItalic') format('svg'); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: 'Roboto Lt'; src: url('../fonts/Roboto-Medium.eot'); src: url('../fonts/Roboto-Medium.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-Medium.woff2') format('woff2'), url('../fonts/Roboto-Medium.woff') format('woff'), url('../fonts/Roboto-Medium.ttf') format('truetype'), url('../fonts/Roboto-Medium.svg#Roboto-Medium') format('svg'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Roboto Lt'; src: url('../fonts/Roboto-MediumItalic.eot'); src: url('../fonts/Roboto-MediumItalic.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-MediumItalic.woff2') format('woff2'), url('../fonts/Roboto-MediumItalic.woff') format('woff'), url('../fonts/Roboto-MediumItalic.ttf') format('truetype'), url('../fonts/Roboto-MediumItalic.svg#Roboto-MediumItalic') format('svg'); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: 'Roboto'; src: url('../fonts/Roboto-Regular.eot'); src: url('../fonts/Roboto-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-Regular.woff2') format('woff2'), url('../fonts/Roboto-Regular.woff') format('woff'), url('../fonts/Roboto-Regular.ttf') format('truetype'), url('../fonts/Roboto-Regular.svg#Roboto-Regular') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Roboto Th'; src: url('../fonts/Roboto-Thin.eot'); src: url('../fonts/Roboto-Thin.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-Thin.woff2') format('woff2'), url('../fonts/Roboto-Thin.woff') format('woff'), url('../fonts/Roboto-Thin.ttf') format('truetype'), url('../fonts/Roboto-Thin.svg#Roboto-Thin') format('svg'); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: 'Roboto Th'; src: url('../fonts/Roboto-ThinItalic.eot'); src: url('../fonts/Roboto-ThinItalic.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-ThinItalic.woff2') format('woff2'), url('../fonts/Roboto-ThinItalic.woff') format('woff'), url('../fonts/Roboto-ThinItalic.ttf') format('truetype'), url('../fonts/Roboto-ThinItalic.svg#Roboto-ThinItalic') format('svg'); font-weight: 100; font-style: italic; font-display: swap; } @font-face { font-family: 'Material Icons'; font-style: normal; src: url(../fonts/MaterialSymbolsOutlined.woff2) format('woff2'), url(../fonts/MaterialSymbolsOutlined.woff) format('woff'); } :root { --bs-body-font-family: 'Roboto' !important; --bs-primary: #00538E; --bs-primary-rgb: 0, 83, 142; --bs-secondary: #008FD3; --bs-link-color: #008FD3; --bs-link-color-rgb: 0,143,211; --cs-color-light-blue: #e6edf5; --cs-color-light-grey: #f7f7f7; --cs-color-lighter: #fafafa; --cs-color-red-alert: #e33434; --cs-color-red-prices: #e2503a; --cs-color-green-in-stock: #44b367; --cs-color-red-out-of-stock: #e33434; --cs-color-orange-partial-in-stock: #ffc107; --cs-color-orange-promotions: #ff4d4d; --cs-color-red-flashsales: #ff6f3c; --cs-color-yellow-egagnants: #FFCC33; --cs-color-pink-qoeliquids: #de1c42; --cs-color-green-action: #098F51; --cs-color-orange-action: #ff4d4d; --cs-color-yellow-action: #ffff00; --cs-border: 1px solid #e5e5e5; } .btn-primary { --bs-btn-color: #fff; --bs-btn-bg: #00538E; --bs-btn-border-color: #00538E; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #008FD3; --bs-btn-hover-border-color: #008FD3; --bs-btn-focus-shadow-rgb: 49, 132, 253; --bs-btn-active-color: #fff; --bs-btn-active-bg: #008FD3; --bs-btn-active-border-color: #00538E; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #00538E; --bs-btn-disabled-border-color: #00538E; } .btn-outline-primary { --bs-btn-color: #00538E; --bs-btn-border-color: #00538E; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #00538E; --bs-btn-hover-border-color: #00538E; --bs-btn-focus-shadow-rgb: 13, 110, 253; --bs-btn-active-color: #fff; --bs-btn-active-bg: #00538E; --bs-btn-active-border-color: #00538E; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); --bs-btn-disabled-color: #00538E; --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: #00538E; --bs-gradient: none; } .btn-secondary { --bs-btn-color: #fff; --bs-btn-bg: var(--bs-secondary);; --bs-btn-border-color: var(--bs-secondary);; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--bs-secondary);; --bs-btn-hover-border-color: var(--bs-secondary);; --bs-btn-focus-shadow-rgb: 49, 132, 253; --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--bs-secondary); --bs-btn-active-border-color: var(--bs-secondary); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--bs-secondary); --bs-btn-disabled-border-color: var(--bs-secondary);; } body{ font-family: 'Roboto' !important; font-size: 14px; line-height: 18px; } body main#wrapper{ background-color: #fafafa; } body.not-logged-in .page-content{ padding-top: 2rem; } /** ** All ** **/ .badge{ background-color: var(--bs-primary); } .badge.out_of_stock{ background-color: var(--cs-color-red-alert); } .badge.discount{ background-color: var(--cs-color-red-prices); color: #FFFFFF; font-weight: bold; border-color: var(--cs-color-red-prices); } .badge.new{ border: 1px solid var(--bs-primary); } .page-item:not(:first-child) .page-link{ height: 100%; } .table tbody.toggle{ display: none; } .table thead th.toggle, .table tfoot tr td.toggle{ cursor: pointer; text-decoration: underline; } table.sticky-header thead.fixed{ position: fixed; top: 80px; /* Ajuste selon ton header Prestashop */ background: #fff; z-index: 10; } /** Loader **/ .lappstar-loader{ font-size: 14px; color: #555; } .material-icons.spin{ animation: spin 1s linear infinite; font-size: 18px; vertical-align: middle; margin-right: 4px; } /** Tooltip **/ .custom-tooltip{ position: absolute;background: #333;color: white;padding: 6px 10px;border-radius: 6px;font-size: 12px;pointer-events: none;white-space: nowrap;opacity: 0;transform: translate(-50%, 0);transition: opacity 0.15s ease, transform 0.15s ease;z-index: 9999; } .custom-tooltip.visible{ opacity: 1;transform: translate(-50%, -8px); } .bg-lightblue{ background-color: var(--cs-color-light-blue) !important; } .bg-lighter{ background-color: var(--cs-color-lighter); } .btn.btn-primary.small, .btn.btn-outline-primary.small{ padding: 1px 5px; font-size: 12px; } .btn.btn-primary.green-action{ background-color: var(--cs-color-green-action); border-color: var(--cs-color-green-action) } .btn.btn-primary.orange-action{ background-color: var(--cs-color-orange-action); border-color: var(--cs-color-orange-action) } .btn.btn-primary.green-action:hover{ border-color: var(--cs-color-green-action); opacity: 0.8; } .btn.btn-primary.orange-promotion{ background-color: var(--cs-color-orange-promotions); border-color: var(--cs-color-orange-promotions); } .btn.btn-primary.orange-promotion:hover, .btn.btn-outline-primary.orange-promotion, .btn.btn-outline-primary.orange-promotion:hover{ border-color: var(--cs-color-orange-promotions); } .btn.btn-outline-primary.orange-promotion:hover{ background-color: var(--cs-color-orange-promotions); color: #FFFFFF; } .btn.btn-outline-primary.orange-promotion{ color: var(--cs-color-orange-promotions); } .btn.btn-primary.yellow-action{ background-color: var(--cs-color-yellow-action); border-color: var(--cs-color-yellow-action); color: #000000; } .btn.btn-primary.yellow-action:hover{ border-color: var(--cs-color-yellow-action); } .text-small{ display: block; font-size: 10px; line-height: 12px; } /** ** Swipper ** **/ .swiper{ --swiper-navigation-color: #FFFFFF; --swiper-navigation-size: 10px; --swiper-pagination-color: var(--bs-secondary); --swiper-pagination-left: auto; --swiper-pagination-right: 8px; --swiper-pagination-bottom: 0; --swiper-pagination-top: auto; --swiper-pagination-fraction-color: inherit; --swiper-pagination-progressbar-bg-color: rgba(0, 0, 0, 0.25); --swiper-pagination-progressbar-size: 4px; --swiper-pagination-bullet-size: 8px; --swiper-pagination-bullet-width: 8px; --swiper-pagination-bullet-height: 8px; --swiper-pagination-bullet-inactive-color: #000; --swiper-pagination-bullet-inactive-opacity: 0.2; --swiper-pagination-bullet-opacity: 1; --swiper-pagination-bullet-horizontal-gap: 4px; --swiper-pagination-bullet-vertical-gap: 6px; } .mega-menu-slider{ margin-bottom: 1rem; padding-bottom: .7rem; border-bottom: 1px solid #eee; } .mega-menu-slider .js-menu-mega-slider-swiper{ padding-bottom: 20px; } .mega-menu-slider .mega-slider__title a{ color: inherit; text-decoration: underline; } .mega-menu-slider .swiper-wrapper{ display: flex; align-items: stretch; } .mega-menu-slider .swiper-slide{ display: flex; background: #FFFFFF; border-radius: 8px; padding: 1rem; height: 100%; /* important */ } .mega-menu-slider .swiper-slide:hover{ filter: drop-shadow(0 4px 8px rgba(0,0,0,.1)); } .mega-menu-slider .swiper-slide .mega-menu-slider .slider-title{ font-size: 1.1rem; font-weight: 700; margin-bottom: .8rem; } .mega-menu-slider .swiper-slide .slider-item{ text-align: right; gap: 5px; } .mega-menu-slider .swiper-slide a > img{ width: 60%; max-width: 60%; border-radius: 6px; } .mega-menu-slider .swiper-slide a, .mega-menu-slider .swiper-slide .product-name{ display: block; font-size: .7rem; line-height: .65rem; font-weight: 900; text-align: left; padding-right: 5px; } .mega-menu-slider .swiper-slide a{ display: flex; color: inherit; text-align: center; gap: 5px; } .mega-menu-slider .product-price{ display: block; color: var(--bs-secondary); font-weight: 600; text-align: left; margin-top: 5px; } .swiper-button-prev, .swiper-button-next{ width: 20px !important; height: 20px !important; font-weight: 900; background-color: var(--bs-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; } /** ** Header ** **/ header#header{ position: inherit; } header#header .container-md{ max-width: 100%; } header#header .header-top-desktop .header-top__left a:not(.btn){ text-decoration: underline; } header#header .header-top-desktop .header-top__left a.btn.btn-primary{ padding: 5px; font-size: 12px; color: #FFFFFF; } header#header .header-top-desktop .header-top__left a.btn.btn-primary i{ font-size: 17px; line-height: 16px; } header#header .header-top-desktop .header-top__left a.promotions, .main-menu__additionnals a.promotions{ border-color: var(--cs-color-orange-promotions); background-color: var(--cs-color-orange-promotions); } header#header .header-top-desktop .header-top__left a.flashsales, .main-menu__additionnals a.flashsales{ border-color: var(--cs-color-red-flashsales); background-color: var(--cs-color-red-flashsales); } header#header .header-top-desktop .header-top__left a.egagnants, .main-menu__additionnals a.egagnants{ border-color: var(--cs-color-yellow-egagnants); background-color: var(--cs-color-yellow-egagnants); color: var(--header-color) !important; } header#header .header-top-desktop .header-top__left a.qoeliquids, .main-menu__additionnals a.qoeliquids{ border-color: var(--cs-color-pink-qoeliquids); background-color: var(--cs-color-pink-qoeliquids); } header#header .header-menu-item{ position: relative; display: inline-block; } header#header .header-menu-item .submenu-buttons{ display: flex; gap: 5px; flex-wrap: wrap; padding: 5px; background: rgba(255, 255, 255, .7); backdrop-filter: blur(7px); border: 1px solid #ddd; position: absolute; top: 100%; left: 0; opacity: 0; visibility: hidden; transform: translateY(5px); transition: all .25s ease; z-index: 200; white-space: nowrap; border-radius: 8px; } header#header .header-menu-item:hover .submenu-buttons{ opacity: 1; visibility: visible; transform: translateY(0); } header#header .submenu-buttons .submenu-item{ cursor: pointer; padding: 3px 10px; transition: all .2s ease; } header#header .submenu-buttons .submenu-item:hover{ color: #FFFFFF !important; } header#header .header-menu-item .submenu-buttons{ box-shadow: 0 4px 12px rgba(0,0,0,0.08); } header#header .header-top-desktop .header-top__left a.specific span.icon{ padding: 2px; /*background: #FFFFFF;* border-radius: 2px; border: 1px solid #FFFFFF;*/ border-radius: 2px; animation: pulseButtonIcon 5s infinite ease-in-out; } header#header .header-top-desktop .header-top__left a.specific:hover{ opacity: .8; } header#header .header-top-desktop .header-top__left a.specific:hover i{ color: inherit; } header#header .btn-primary.sedid{ background-color: var(--cs-color-yellow-action); border-color: var(--cs-color-yellow-action); color: #000000; font-weight: 600; } header#header .header-bottom .navbar-brand .logo{ max-width: 50px; } header#header .header-bottom__row{ justify-content: space-between; } header#header .header-bottom__row .lappstaras-search-container{ order: 2; } header#header .header-bottom .header-bottom__container .header-bottom__row .lappstaras-clearboth{ display: none; } .breadcrumb__wrapper{ background-color: #e6edf5; } #_desktop_cart .header-block.blockcart > a.header-block__action-btn{ padding-right: 0; } .main-menu__additionnals{ padding: 5px 0 5px 0; display: flex; flex-wrap: wrap; gap: 5px; } .main-menu__additionnals a i{ font-size: 12px; line-height: 12px; } /** ** Layout ** **/ .layout-main-body{ display: flex; min-height: calc(100vh - 120px); /* ajuste selon header/footer */ } .layout-main-content{ flex-grow: 1; min-width: 0; padding: 0; } /** Width 100 **/ #module-lappstar-productsquickorder .layout-main-content > .container/*, body#product .layout-main-content > .container*/{ max-width: 100%; } /** ** Mega menu ** **/ #desktop-left-column{ width: 280px; background: #fff; border-right: 1px solid #ddd; flex-shrink: 0; overflow-y: auto; padding: /*43px*/ 0; } #desktop-left-column .js-menu-desktop{ width: 100%; z-index: 99; background: #fff; } #desktop-left-column .sidebar-left{ padding: 1rem; } #desktop-left-column .sidebar-left .block{ margin-bottom: 1.5rem; border: 1px solid #eee; padding: 1rem; border-radius: 8px; background: #fafafa; } #desktop-left-column .dashboard-link{ position: relative; padding: 11px 18px; background-color: var(--cs-color-light-blue); cursor: pointer; transition: all 0.2s ease; } #desktop-left-column .dashboard-link::after{ content: ""; display: inline-block; margin-left: .555em; vertical-align: .255em; border-top: .3em solid transparent; border-bottom: .3em solid transparent; border-left: .3em solid; border-right: 0; position: absolute; right: 10px; } #desktop-left-column .dashboard-link:hover{ padding-left: 22px; } #desktop-left-column .dashboard-container{ position: fixed !important; left: 279px; background: rgba(230, 237, 245, 0.85); backdrop-filter: blur(7px); border-left: 1px solid #ddd; padding: 10px 0; overflow-y: auto; z-index: 999; top: 0 !important; margin-top: 0 !important; width: calc(100% - 279px); height: 100%; max-width: 600px; } #desktop-left-column .dashboard-container .alert.alert-info{ display: none; } #desktop-left-column .dashboard-container:not(.is-active){ display: none; } #desktop-left-column .dashboard-container .animate-greeting::before{ content: "👋"; display: inline-block; animation: wave 1s ease-in-out 1; transform-origin: 70% 70%; margin-right: .4rem; transition: opacity 0.8s ease, transform 0.8s ease; } #desktop-left-column .dashboard-container .animate-greeting.done::before{ opacity: 0; } #desktop-left-column .dashboard-container .animate-greeting::after{ content: ""; display: inline-block; margin-left: .4rem; opacity: 0; transform: scale(0.5); transition: opacity 0.8s ease, transform 0.8s ease; } #desktop-left-column .dashboard-container .animate-greeting.show.day::before{ content: "☀"; } #desktop-left-column .dashboard-container .animate-greeting.show.night::before{ content: "🌙"; } #desktop-left-column .dashboard-container .animate-greeting.show::before{ opacity: 1; } #desktop-left-column .dashboard-container .commercial img{ max-width: 100%; } #desktop-left-column .dashboard-container a.dropdown-item:hover{ color: var(--bs-secondary); text-decoration: underline; } #desktop-left-column .js-menu-desktop .main-menu__tree[data-depth="0"]{ display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 0; } #desktop-left-column .js-menu-desktop .main-menu__tree[data-depth="0"] .main-menu__tree__item, #desktop-left-column .js-menu-desktop .main-menu__tree[data-depth="0"] .js-menu-item-lvl-0 > .main-menu__tree__link{ width: 100%; } #desktop-left-column .js-menu-desktop .main-menu__tree[data-depth="0"] .main-menu__tree__item{ border-bottom: 1px solid #ddd; } #desktop-left-column .js-menu-desktop .main-menu__tree[data-depth="0"] .js-menu-item-lvl-0 > .main-menu__tree__link{ display: flex; align-items: center; position: relative; padding: 7px 18px; font-weight: 600; text-transform: uppercase; color: #333; transition: all 0.2s ease; } #desktop-left-column .js-menu-desktop .main-menu__tree[data-depth="0"] .js-menu-item-lvl-0 > .main-menu__tree__link:hover, #desktop-left-column .js-menu-desktop .main-menu__tree[data-depth="0"] .js-menu-item-lvl-0.is-active > .main-menu__tree__link{ background: var(--cs-color-light-blue); color: #000; padding-left: 22px; /* lĂ©ger mouvement au hover */ } #desktop-left-column .js-menu-desktop .main-menu__tree[data-depth="0"] .js-menu-item-lvl-0 > .main-menu__tree__link.dropdown-toggle:after{ content: ""; display: inline-block; margin-left: .555em; vertical-align: .255em; border-top: .3em solid transparent; border-bottom: .3em solid transparent; border-left: .3em solid; /* flĂšche vers la droite */ border-right: 0; position: absolute; right: 10px; } #desktop-left-column .menu-container{ position: fixed !important; /*top: 109px !important;*/ left: 279px; width: calc(100% - 279px); /*background: rgba(255, 255, 255, 0.85);*/ background: rgba(230, 237, 245, 0.85); backdrop-filter: blur(7px); border-left: 1px solid #ddd; display: none; padding: 10px 0; overflow-y: auto; } /* Variante full screen*/ #desktop-left-column .menu-container{ top: 0 !important; margin-top: 0 !important; height: 100%; /*width: calc(70% - 279px);*/ width: calc(100% - 279px); /*max-width: 1120px;*/ max-width: 1190px; } #desktop-left-column .menu-container .container{ max-width: 100%; } #desktop-left-column li:hover > .menu-container{ display: none; animation: fadeInY 0.3s ease; } #desktop-left-column .menu-container.is-active{ display: block !important; margin-top: -34px; animation: fadeInY 0.3s ease; } #desktop-left-column .menu-container-title{ font-size: 2.25rem; font-weight: 700; margin-bottom: 1rem; padding-bottom: 0.7rem; border-bottom: 1px solid #eee; } #desktop-left-column .menu-container-close{ display: flex; align-items: center; justify-content: center; border: none; background: #FFFFFF; border-radius: 50%; font-size: 1.4rem; line-height: 1.2rem; cursor: pointer; padding: 10px } #desktop-left-column .menu-container-close:hover { opacity: .7; } #desktop-left-column .menu-container .container > ul[data-depth="1"]{ display: grid !important; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 30px; margin: 0; padding: 0; } #desktop-left-column .menu-container.js-sub-menu .container .row[data-depth="1"]{ gap: 5px; margin-top: 0; } #desktop-left-column .menu-container.js-sub-menu .container .row[data-depth="1"] li > ul.submenu[data-depth="2"]{ padding: 5px 10px; } #desktop-left-column .menu-container.js-sub-menu .container .row[data-depth="1"] li > ul.submenu[data-depth="2"] a:hover{ text-decoration: underline; padding-left: 5px; } #desktop-left-column .menu-container.js-sub-menu .container .row[data-depth="1"] li > ul.submenu[data-depth="2"].submenu.two-columns{ column-count: 2; } #desktop-left-column .menu-container.js-sub-menu .container .row[data-depth="1"] ul > li.category{ border-left: 1px solid #ddd; padding-left: 5px; display: flow-root; } #desktop-left-column ul.submenu.two-columns li.category{ break-inside: avoid; display: inline-block; width: 100%; } #desktop-left-column .menu-container.js-sub-menu .container .row > .category{ width: 100%; padding: 0; margin: 0; background: #FFFFFF; border-radius: 7px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.1)); } #desktop-left-column .menus.menus-promotions .menus-promotions-title{ display: flex; align-items: center; position: relative; padding: 7px 18px; font-weight: 600; text-transform: uppercase; color: var(--cs-color-orange-promotions); transition: all 0.2s ease; } #desktop-left-column .menus.menus-promotions .menus-promotions-title::after{ content: ""; display: inline-block; margin-left: .555em; vertical-align: .255em; /* Triangles */ border-left: .3em solid transparent; border-right: .3em solid transparent; border-top: .3em solid; /* flĂšche vers le bas */ border-bottom: 0; position: absolute; right: 10px; } #desktop-left-column .menus.menus-promotions .btn{ border-radius: 0; } #desktop-left-column .menus.menus-promotions img{ width: 100%; } #desktop-left-column .menus.menus-promotions ul{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; padding: 4px; } .menus.menus-promotions ul li{ display: flex; } .menus.menus-promotions ul li a{ display: flex; align-items: center; justify-content: center; width: 100%; } .menus.menus-promotions ul li.no-image a{ background-color: var(--cs-color-orange-promotions); border-color: var(--cs-color-orange-promotions); color: #FFFFFF; } .menus.menus-promotions ul li:not(.no-image) a:hover{ opacity: .7; } .menus.menus-promotions ul li a, .menus.menus-promotions ul li img{ border-radius: 5px !important; font-size: 10px; } /** ** Home ** **/ .carousel .carousel-item img{ object-fit: contain; height: auto; } section.page-home{ position: relative; } section.page-home .carousel-indicators{ margin-bottom: 30px; } section.page-home .section-title:first-child{ margin-top: 0; } section.page-home .container{ max-width: 100%; } section.page-home section.new-products, section.page-home section.best-sellers-products{ padding: 10px; } section.page-home .best-sellers-products-footer, section.page-home .new-products-footer{ margin-top: 20px; } section.page-home .home-ads__inner{ display: flex; align-items: center; justify-content: center; overflow: hidden; } /** Flash sales **/ .flash-sales .flash-sale{ display: flex; flex-direction: column; background: #FFFFFF; border-radius: 15px; overflow: hidden; transition: transform .3s ease, box-shadow .3s ease; position: relative; min-height: 120px; } .flash-sales .flash-sale:hover{ transform: translateY(-6px) scale(1.02); box-shadow: 0 18px 40px rgba(0,0,0,.15); } .flash-sales .flash-sale .flash-img-wrapper{ flex: 0 0 50%; overflow: hidden; } .flash-sales .flash-sale .flash-img{ width: 100%; transition: transform .4s ease; } .flash-sales .flash-sale .flash-info{ flex: 1; } .flash-sales .flash-sale .flash-info h4{ font-size: 24px; line-height: 24px; font-weight: 600; background: linear-gradient(90deg, transparent, #ffe5e5); padding: 5px; } .flash-sales .flash-sale .countdown{ display: flex; width: 100%; gap: 6px; } .flash-sales .flash-sale .cd-item{ text-align: center; } .flash-sales .flash-sale .cd-num{ background: var(--bs-primary); color: #FFFFFF; display: block; width: 100%; padding: 5px; border-radius: 5px; font-size: 1.5rem; font-weight: 900; line-height: 1; box-shadow: 0 4px 12px rgba(0,0,0,0.12); } /*.flash-sales .flash-sale .btn{ animation: offerBlink 3.5s ease-in-out infinite; transition: 0.2s; }*/ .flash-sales .flash-sale:hover .btn, .flash-sales .flash-sale .btn:hover{ transform: scale(1.05); background: var(--cs-color-orange-promotions) !important; color: #FFFFFF !important; animation: none; /* arrĂȘt du clignotement au survol */ } /** ** Contact ** **/ #contact .contact-page .contact-form-right #contact-form-success-message{ display: none; text-align: center; } #contact .contact-page svg{ width: 50px; height: 120px; } #contact .contact-page .commercial img{ max-width: 100%; } /** ** Products ** **/ #js-product-list .no-products i{ font-size: 4rem; } .product-list-group h2.title{ font-size: 1.4rem; font-weight: 700; border-bottom: 1px solid #ddd; } body#category .mb-4{ margin-bottom: 10px !important; } body#category .category-cover img{ width: 100%; } .category-fixed-banner{ position: sticky; top: 0; background: #fafafa; z-index: 10; border-bottom: 1px solid #ddd; padding: 10px; display: flex; flex-direction: column; /* titre en haut, liste en dessous */ box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.15); } .category-banner-title{ font-weight: 600; margin-bottom: 10px; font-size: 1rem; color: #333; } .category-fixed-banner .category-level-list{ display: flex; flex-wrap: nowrap; overflow-x: auto; list-style: none; margin: 0; padding: 0 10px 5px 0; /* ⬅ padding-bottom pour descendre la scrollbar */ scrollbar-width: thin; /* Firefox */ scrollbar-color: transparent transparent; } .category-fixed-banner .category-level-list li{ margin-right: 5px; white-space: nowrap; /* empĂȘche les retours Ă  la ligne */ } .category-fixed-banner .category-level-list li a{ color: #333; font-weight: 500; font-size: 12px; padding: 3px 5px; border-radius: 7px; background-color: #f2f4f7; transition: background-color 0.3s, color 0.3s; } .category-fixed-banner .category-level-list li a:hover, .category-fixed-banner .category-level-list li a.active{ background-color: var(--bs-primary); color: #fff; } /* Chrome / Safari / Edge */ .category-fixed-banner .category-level-list::-webkit-scrollbar{ height: 3px; /* ⬅ trĂšs fin */} .category-fixed-banner .category-level-list::-webkit-scrollbar-track{ background: transparent; margin-top: 2px; /* ⬅ dĂ©cale lĂ©gĂšrement la track */ } /* đŸ”„ Apparition au hover */ .category-fixed-banner:hover .category-level-list::-webkit-scrollbar-thumb{ background-color: rgba(0, 0, 0, 0.25); } /* Firefox */ .category-fixed-banner:hover .category-level-list{ scrollbar-color: rgba(0,0,0,0.25) transparent; } #search_filters_wrapper{ padding-bottom: 0; } #search_filters_wrapper{ margin-bottom: 0; } #search-filters .search-filters-title{ display: none !important; } #search-filters .dropdown-menu.show{ background: none; background: rgba(255, 255, 255 , .7); backdrop-filter: blur(7px); border: 1px solid #ddd; } #search-filters .dropdown-menu.show label:not(.active).btn.btn-outline-primary{ background-color: #FFFFFF; } #search-filters .dropdown-menu.show label:not(.active).btn.btn-outline-primary:hover{ background-color: var(--bs-primary); color: #FFFFFF; } #search-filters .fs-columns{ column-gap: 5px; } #search-filters .fs-col-1{ column-count: 1; } #search-filters .fs-col-2{ column-count: 2; } #search-filters .fs-col-3{ column-count: 3; } #search-filters .fs-col-4{ column-count: 4; } #search-filters .fs-col-5{ column-count: 5; } #search-filters .dropdown-menu label{ break-inside: avoid !important; page-break-inside: avoid; -webkit-column-break-inside: avoid; display: block; width: 100%; min-width: 180px; text-align: left; } h1#js-product-list-header{ font-weight: 900; margin-left: calc(var(--bs-gutter-x)*-.5); } .category-tree__child .category-tree__list{ row-gap: 0; } .accordion-item .accordion-collapse{ padding: 5px 7px; } .accordion-item .search-filters-subtitle.facet-title button{ /*background-color: var(--cs-color-light-blue); margin-bottom: 2px; padding-left: 5px !important;*/ text-transform: uppercase; border-radius: 3px; font-size: 14px; } #js-active-search-filters .rounded-pill{ background-color: #FFFFFF !important; border: 1px solid; font-size: 14px; } #js-active-search-filters .rounded-pill.js-search-filters-clear-all{ background-color: var(--cs-color-red-alert) !important; color: #FFFFFF; } #js-active-search-filters .rounded-pill .material-icons{ display: flex; align-items: center; justify-content: center; font-size: 14px; margin-right: 5px; background-color: var(--cs-color-red-alert); color: #FFFFFF; width: 17px; height: 17px; border-radius: 50%; } .category-tree__item.accordion-item .accordion-collapse{ padding: 0 7px 10px 7px; } .products.row{ margin-left: 0; margin-right: 0; } .products.row:not(.list){ display: grid; row-gap: 5px; column-gap: 5px; grid-template-columns: repeat(auto-fill, minmax(234px, 1fr)); grid-column-gap: 5px; grid-row-gap: 5px; } .products.row > article{ width: 100%; } .products.row > *{ padding-left: 0; padding-right: 0; } .accordion-button:after{ margin-left: 10px; background-size: .7rem; height: .7rem; width: .7rem; } .product-miniature{ margin-bottom: 0; } .product-miniature .product-flags{ align-items: center; } .product-miniature .stock-bullet{ position: absolute; top: 5px; right: 5px; z-index: 9; width: 12px; height: 12px; border-radius: 50%; } .stock-bullet.in-stock{ background-color: var(--cs-color-green-in-stock); } .stock-bullet.out-of-stock{ background-color: var(--cs-color-red-out-of-stock); } .stock-bullet.partial-in-stock{ background-color: var(--cs-color-orange-partial-in-stock); } .product-flags .eg-sticker{ display: flex; align-items: center; justify-content: center; width: 25px; height: 25px; background-color: var(--cs-color-yellow-egagnants); color: #000000; border-radius: 5px; } .product-flags .eg-sticker i{ font-size: 17px; } .product-miniature .product-miniature__image-container{ text-align: center; padding-top: 25px; } .product-miniature .product-miniature__image{ width: 80%; } .product-miniature .product-miniature__title{ font-weight: bold; } .product-miniature .js-menu-combinations-slider-swiper .swiper-button-prev{ left: 0; top: 28px; } .product-miniature .js-menu-combinations-slider-swiper .swiper-button-next{ right: 0; top: 28px; } .product-miniature .js-menu-combinations-slider-swiper .swiper-button-disabled{ visibility: hidden; } .product-miniature .js-menu-combinations-slider-swiper .slider-item:not(.swiper-slide-active){ width: 33.33%; } /*.product-miniature .js-menu-combinations-slider-swiper .swiper-button-next{ width: 30px; height: 100% !important; border-radius: 0; top: 0; right: 0; }*/ .product-miniature .display-product-attributes-on-miniature .combinations{ display: flex; text-align: center; align-items: flex-end; /*flex-wrap: wrap;*/ } .product-miniature .display-product-attributes-on-miniature .combination{ min-width: 50px; justify-content: center; border: 1px solid #f1f1f1; padding: 5px; margin-right: 3px; margin-bottom: 7px; border-radius: 3px; cursor: pointer; } .product-miniature .display-product-attributes-on-miniature .combination span{ font-size: 11px; line-height: 12px; margin: auto; } .product-miniature .display-product-attributes-on-miniature .combination span.value:not(:first-child){ margin-top: 5px; } .product-miniature .display-product-attributes-on-miniature .combination span.unit-color{ height: 6px; border-radius: 3px; } .product-miniature .display-product-attributes-on-miniature .combination .addtocart-manage{ margin-top: 5px; } .product-miniature .display-product-attributes-on-miniature .combination .addtocart-manage div span{ font-size: 15px; line-height: 18px; } .product-miniature .display-product-attributes-on-miniature a.more-combinations{ display: flex; align-items: center; justify-content: center; font-size: 12px; min-width: 30px; font-weight: bold; background-color: var(--bs-primary) !important; color: #FFFFFF; border-radius: 5px; margin-bottom: 10px; padding: 3px 5px; } .product-miniature .display-product-attributes-on-miniature .current, .product-miniature .display-product-attributes-on-miniature .combination:not(.is_in_cart):hover{ background-color: #f2f4f7; border: 1px solid #A8A8A8 !important; } .product-miniature .display-product-attributes-on-miniature .combination:hover .addtocart-manage{ background-color: var(--bs-primary); color: #FFFFFF; } .product-miniature .display-product-attributes-on-miniature .is_in_cart{ border-bottom: 3px solid #6aa2ba !important; color:#6aa2ba; background-color: #e1ecf1; } .product-miniature .display-product-attributes-on-miniature .is_in_cart > div.label{ background-color: #e1ecf1; color: #548194; } .product-miniature .product-miniature__link:hover .product-miniature__image{ transform: none; } .product-miniature .product-miniature__infos{ z-index: 9; } .product-miniature .product-miniature__infos__top > a{ color: inherit; } .product-miniature .product-miniature__prices{ justify-content: flex-end; margin-top: 10px; } .product-miniature .product-miniature__prices .product-miniature__price{ font-size: 16px; padding: 3px; background-color: #ffff00; margin-right: 0 !important; } .product-miniature .product-miniature__prices .wholesale-price{ font-size: 11px; margin-top: 3px; } .product__prices.hidden, .product-miniature .product-miniature__prices.hidden, .product-miniature .product-miniature__prices .product-miniature__price.hidden, .product-miniature .product-miniature__prices .wholesale-price.hidden, .product-all-combinations-container .product-addtocart.combinations .product-combination > div.product-price span.price.hidden, .product-all-combinations-container .product-addtocart.combinations .product-combination > div.product-price span.wholesale-price.hidden{ display: none !important; } .product-all-combinations-container .product-addtocart.combinations .product-combination > div.product-addtocart .btn.green-action{ padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x); font-size: 14px; font-weight: 900; } body#product .product__col{ position: relative; } body#product .product__col .js-add-favorite{ position: absolute; top: 0; right: calc(var(--bs-gutter-x)*.5); } body#product .product__infos .info__container{ padding: 10px; margin-top: 10px; border-radius: 10px; background-color: #FFFFFF; } body#product .product__infos .info__container > ul{ margin-bottom:0; } body#product .product__infos .info__container > ul li:last-child{ border-bottom: 0; } .page-product .product__discount{ color: var(--cs-color-red-prices); } .page-product .product__prices{ display: flex; padding: 10px; background-color: #FFFFFF; width: fit-content; border-radius: 8px; margin-bottom: 10px; } .page-product .product__prices .product__current-price{ font-family: 'Roboto Cn'; font-size: 42px; line-height: 50px; letter-spacing: -2px; font-weight: bold; color: var(--bs-primary); } .page-product .product__prices .product__tax-label{ padding-bottom: 7px; } .product-miniature__image { transition: opacity 0.25s ease-in-out; } .product-miniature__image.is-fading { opacity: 0; } /** All declination **/ .product-all-combinations-container .combinations-groups{ display: flex; flex-wrap: wrap; gap: 5px; margin-top: 15px; padding-top: 20px; border-top: var(--cs-border); } .product-all-combinations-container .combinations-groups .combination-group{ display: flex; padding: 5px; border-radius: 5px; background-color: var(--cs-color-light-grey); } .product-all-combinations-container .combinations-groups .combination-group:hover, .product-all-combinations-container .combinations-groups .combination-group.active{ cursor: pointer; background-color: var(--bs-secondary); color: #FFFFFF; } .product-all-combinations-container .combinations-groups .combination-group:not(:last-child){ margin-right: 5px; } .product-all-combinations-container .combinations-groups .combination-group span.color{ display: block; width: 20px; height: 20px; border-radius: 5px; } .product-all-combinations-container .combinations-groups .combination-group span.attribute-name{ margin-left: 5px; font-weight: 600; } .product-all-combinations-container .combinations-groups .combination-group span.svg{ margin-left: 5px; } .product-all-combinations-container .combinations-groups .combination-group span.svg svg{ width: 15px; height: 10px; } .product-all-combinations-container .combinations-groups .combination-group:hover span.svg svg, .product-all-combinations-container .combinations-groups .combination-group.active span.svg svg{ fill: #FFFFFF; } .product-all-combinations-container .combinations-groups .combination-group.active span.svg svg{ transform: rotate(90deg); } .product-all-combinations-container .product-addtocart.combinations #combination-image-preview{ display: none; position: fixed; z-index: 999999; } .product-all-combinations-container .product-addtocart.combinations #combination-image-preview img{ border: 1px solid #ccc; background: #fff; /*box-shadow: 0 0 10px rgba(0,0,0,0.2);*/ } .product-all-combinations-container .product-addtocart.combinations .product-combination{ display: flex; } .product-all-combinations-container .product-addtocart.combinations .product-combination.border-bottom{ border-bottom: var(--cs-border); } .product-all-combinations-container .product-addtocart.combinations .product-combination:hover{ background-color: var(--global-palette7); } .product-all-combinations-container .product-addtocart.combinations .product-combination > div{ display: flex; align-items: center; justify-content: center; } .product-all-combinations-container .product-addtocart.combinations .product-combination > div.product-image{ max-width: 80px; cursor: pointer; } .product-all-combinations-container .product-addtocart.combinations .product-combination > div.product-image img{ max-width: 100%; } .product-all-combinations-container .product-addtocart.combinations .product-combination > div.product-sku{ font-size: 12px; } .product-all-combinations-container .product-addtocart.combinations .product-combination > div.product-name{ flex-direction: column; font-size: 12px; justify-content: center; align-items: start; } .product-all-combinations-container .product-addtocart.combinations .product-combination > div.product-name .attributes{ display: flex; } .product-all-combinations-container .product-addtocart.combinations .product-combination > div.product-name .attributes > div:not(:last-child){ margin-right: 5px; } /*.product-all-combinations-container .product-addtocart.combinations .product-combination > div.product-name .attributes > div:not(:first-child)::before{ content: ' | '; }*/ .product-all-combinations-container .product-addtocart.combinations .product-combination div.product-stock div, .product-all-combinations-container .product-addtocart.combinations .product-combination > div.product-price div{ font-weight: 600; } .product-all-combinations-container .product-addtocart.combinations .product-combination div.product-stock div.out-of-stock{ color: var(--cs-color-red-alert); } .product-all-combinations-container .product-addtocart.combinations .product-combination div.product-stock div.is-in-stock{ display: flex; align-items: center; color: #44b367; } .product-all-combinations-container .product-addtocart.combinations .product-combination div.product-stock div.is-in-stock .badge-stock{ font-size: 12px; padding: 3px 5px; } .product-all-combinations-container .product-addtocart.combinations .product-combination > div.product-price span.regular-price{ text-decoration: line-through; } .product-all-combinations-container .product-addtocart.combinations .product-combination > div.product-price span.discount{ color: var(--cs-color-red-prices); } .product-all-combinations-container .product-addtocart.combinations .product-combination > div.product-price span.wholesale-price{ margin-top: 3px; font-size: 11px; font-weight: 400; } .product-all-combinations-container .product-addtocart.combinations .product-combination > div.product-addtocart .addtocart-container{ display: flex; } .product-all-combinations-container td.combination-name span{ color: var(--global-palette3); } .product-all-combinations-container .product-flags .is-in-stock, .product-all-combinations-container .product-flags .out-of-stock{ border-radius: 5px; color: #FFFFFF; } .product-all-combinations-container .product-flags .is-in-stock{ background-color: #44b367; } .product-all-combinations-container .product-flags .out-of-stock{ background-color: var(--cs-color-red-alert); } .product-all-combinations-container .product-flags .qty-in-cart{ background-color: #e1ecf1; display: flex; flex-direction: row; color: #548194; justify-content: center; font-weight: 400; align-items: center; width: 100%; } .product-all-combinations-container .product-flags .qty-in-cart svg{ fill: #548194; width: 15px; height: 15px; margin-left: 1px; margin-top: -3px; } .product-all-combinations-container .product-flags .qty-in-cart div{ display: flex; font-weight: 700; font-size: 14px; } .product-all-combinations-container .product-flags .new{ background-color: var(--global-palette7); border-radius: 5px; } .product-all-combinations-container .product-flags div:not(:last-child){ margin-bottom: 5px; } .product-all-combinations-container .container-order-actions{ display: flex; justify-content: center; align-items: center; } .product-all-combinations-container .container-order-actions .addtocart-container .addtocart-manage{ border-radius: 5px; } .product-all-combinations-container .label{ color: #313537; font-weight: 600; font-size: 14px; padding-top: 10px; padding-bottom: 10px; margin: 0; text-align: center; } .product-all-combinations-container .label:hover{ color: #fff; } .product-all-combinations-container table td.container-image img{ max-width: 80px; width: 100%; } .product-all-combinations-container table td.product-prices{ float: none; width: auto; } .product-all-combinations-container table td.flags svg{ width: 40px; height: 40px; } #category .product-all-combinations-container td.container-image{ max-width: 50px; } #category .product-all-combinations-container td{ padding: 5px; } .product-list.list > article{ margin-bottom: 5px; } .product-list.list .card{ display: flex; flex-direction: row; } .product-list.list .card .product-miniature__image-container{ max-width: 150px; padding: 10px; } /** Add to cart **/ .addtocart-container{ position: relative; } .addtocart-container > svg{ width: 30px; height: 30px; cursor: pointer; } .addtocart-container .alert-reappro, .product-all-combinations-container .alert-reappro{ background-color: #fff3cd !important; color: #856404 !important; border-color: #ffeeba !important; } .addtocart-container .addtocart-manage{ cursor: pointer; } .addtocart-container .addtocart-manage.category{ display: flex; justify-content: center; width: 100%; background-color: #fbfbfb; border: 1px solid #A8A8A8; border-radius: 3px; } .addtocart-container .addtocart-manage:hover{ background-color: var(--bs-secondary); } .addtocart-container .addtocart-selection{ display: none; padding: 5px; background-color: #FFFFFF; z-index: 9999; flex-direction: column; width: 100%; min-width: 240px; top: 0; } .product-all-combinations-container td.order-actions svg, .addtocart-container .addtocart-selection svg{ width: 15px; height: 15px; } .addtocart-container .addtocart-selection .qty-in-cart{ background-color: #e1ecf1; width:100%; display: flex; flex-direction: row; gap: 5px; padding: 3px; color: #548194; justify-content: center; font-weight: 400; align-items: center; margin-bottom: 5px; } .addtocart-container .addtocart-selection .qty-in-cart svg{ fill: #548194; } .addtocart-container .addtocart-selection .product-name{ align-self: flex-start; font-size: 16px; text-transform: uppercase; color: #1a1a1a; margin: 0 0 5px 0; text-align: left; font-style: normal; font-weight: 400; font-family: "Roboto"; letter-spacing: 0; line-height: 1.188em; } .addtocart-container .addtocart-selection .product-name:hover{ color: var(--bs-primary); } .addtocart-container .addtocart-selection .display-info-cdtmnt{ font-size: 12px; text-align: center; color: var(--bs-primary); } .addtocart-container .addtocart-selection .field{ display: flex; position: relative; width: 100%; z-index: 9; } .addtocart-container .addtocart-selection .field input{ width: 100%; padding: 5px; } .addtocart-container .addtocart-selection .field .price-by-qty{ width: 100%; height: 58px; display: flex; flex-direction: column; text-align: center; gap: 4px; justify-content: center; border-left: 3px solid #fff; border-right: 3px solid #fff; } .addtocart-container .addtocart-selection .field .price-by-qty .label-hover{ text-transform: uppercase; font-weight: 400; font-size: 8px; line-height: 10px; justify-content: center; } .addtocart-container .addtocart-selection .field .price-by-qty .price-hover{ font-size: 17px; line-height: 17px; font-style: normal; font-weight: 500; font-family: "Roboto"; color: var(--cs-color-red-prices); display: flex; flex-direction: row; justify-content: center; align-items: baseline; } .addtocart-container .addtocart-selection .field .price-by-qty .price-hover span{ font-size: 8px; font-style: normal; font-weight: 500; font-family: "Roboto"; margin-left: 2px; } .addtocart-container .addtocart-selection .field .price-by-qty .remise-hover{ color: white; background: var(--cs-color-red-prices); font-weight: 400; font-size: 12px; line-height: 1.5em; margin-top: -5px; } .addtocart-container .addtocart-selection .field .price-by-qty .price-hover, .addtocart-container .addtocart-selection .field .price-by-qty span{ color: var(--cs-color-red-prices); } .addtocart-container .addtocart-selection .field .price-by-qty:not(.discount) .price-hover, .addtocart-container .addtocart-selection .field .price-by-qty:not(.discount) span{ color: #555555; } .addtocart-container .addtocart-selection .field .price-by-qty:not(.discount) .remise-hover{ display: none; } .addtocart-container .addtocart-selection .field .addtocart-qty{ font-size: 20px; text-align: center; color: #555555; border: 1px solid var(--cs-color-orange-action); } .addtocart-container .addtocart-selection .field .btn-calculator{ background-color: var(--bs-primary); border: 1px solid #A8A8A8; color: #FFFFFF; font-style: normal; font-weight: 400; font-size: 13px;} .addtocart-container .addtocart-selection .field .btn-calculator:hover{ background-color: var(--bs-secondary); color: #FFFFFF; } .addtocart-container .addtocart-selection button.close{ display: flex; align-items: center; justify-content: center; width: 100%; height: 30px; background: #257a57; opacity: 1; position: absolute; top: -30px; right: 0px; border: 2px solid #313537; } .addtocart-container .addtocart-selection .container-see-product .content-see-product{ display: flex; flex-direction: row; width: 100%; justify-content: space-around; border-top: 1px solid #f1f1f1; border-bottom: 1px solid #f1f1f1; margin-bottom: 5px; } .addtocart-container .addtocart-selection .container-see-product .content-see-product .svgscontainer{ display: flex; justify-content: center; flex-grow: 1; padding: 7px; } .addtocart-container .addtocart-selection .container-see-product .content-see-product .svgscontainer:hover{ background-color: #f1f1f1; cursor: pointer; } .addtocart-container .addtocart-selection .container-see-product .content-see-product .svgscontainer.close{ background-color: #f8d7da; opacity: 1; } .addtocart-container .addtocart-selection .container-see-product .content-see-product .svgscontainer a, .addtocart-container .addtocart-selection .container-see-product .content-see-product .svgscontainer div{ display: flex; align-items: center; } .addtocart-container .addtocart-selection .container-see-product .content-see-product .svgscontainer .svgic{ fill: #878787; } .addtocart-container .addtocart-selection .choices{ padding-top: 5px; padding-bottom: 5px; width: 100%; background-color: #f2f4f7; border: 1px solid #A8A8A8; margin-bottom: 3px; } .addtocart-container .addtocart-selection .choices ul{ display: grid; grid-template-columns: 20% 20% 20% 20% 20%; width: 100%; padding-left: 6px; padding-right: 6px; } .addtocart-container .addtocart-selection .choices ul li{ list-style-type: none; color: #7d7a71; padding: 5px; text-align: center; font-size: 14px; } .addtocart-container .addtocart-selection .choices ul li:not(:nth-child(5n)){ border-right: 1px solid #A8A8A8; } .addtocart-container .addtocart-selection .choices ul li:hover{ background-color: #07658c; color: #fff; cursor: pointer; } .addtocart-container .product-stocks{ width: 100%; justify-content: center; } .addtocart-container .product-stocks .action-part .btn{ width: 100%; border-radius: 8px; transition: none; padding-top: 10px; padding-bottom: 10px; font-size: 14px; font-style: normal; font-weight: 600; color: #313537; background-color: #fff; border: 1px solid #dfdfdf; font-family: 'Roboto'; text-transform: inherit; letter-spacing: 0; line-height: inherit !important; } .addtocart-container .product-stocks .action-part .btn:hover:enabled{ background-color: var(--bs-secondary); color: #fff; } .addtocart-container .product-stocks .action-part .already-notified{ color: rgb(49, 112, 143); background-color: rgb(217, 237, 247); border-color: rgb(188, 223, 241); } /** Customization **/ .product-customization.btn-group.pricing-options .btn{ padding: 2px 0; font-size: 14px; line-height: 14px; } .product-customization.btn-group.pricing-options .btn i{ font-size: 14px; } .product-customization.btn-group.pricing-options .egagnants.active, .product-customization.btn-group.pricing-options .egagnants:hover, .product-customization.product-options-all.egagnants:hover{ background-color: var(--cs-color-yellow-egagnants); border-color: var(--cs-color-yellow-egagnants); color: #333333; } .product-customization.btn-group.pricing-options .remise.active, .product-customization.btn-group.pricing-options .remise:hover, .product-customization.product-options-all.remise:hover{ background-color: var(--cs-color-orange-promotions); border-color: var(--cs-color-orange-promotions); color: #FFFFFF; } .product-customization.btn-group.pricing-options .gift.active, .product-customization.btn-group.pricing-options .gift:hover{ background-color: var(--bs-primary); border-color: var(--bs-primary); color: #FFFFFF; } .product-customization.btn-group.pricing-options .btn:not(:hover):not(.active){ opacity: .5; } /** Quick Order **/ #module-lappstar-productsquickorder .menu-horizontal{ margin-bottom: 30px; position: relative; z-index: 12; } #module-lappstar-productsquickorder .menu-horizontal .menu-contenances{ display: flex; justify-content: space-evenly; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; gap: 5px; } #module-lappstar-productsquickorder .menu-horizontal .menu-contenances li, #module-lappstar-productsquickorder .menu-horizontal .menu-contenances a{ font-size: 16px; color: #333; } #module-lappstar-productsquickorder .menu-horizontal .menu-contenance-item{ position: relative; } #module-lappstar-productsquickorder .menu-horizontal .menu-contenances > li{ flex: 1; } #module-lappstar-productsquickorder .menu-horizontal .menu-contenances > li > a{ width: 100%; } #module-lappstar-productsquickorder .menu-horizontal .menu-contenance-item li a{ display: block; padding: 5px 15px; width: 100%; } #module-lappstar-productsquickorder .menu-horizontal .menu-contenance-item li:not(:last-child) a{ border-bottom: 1px solid #FFF; } #module-lappstar-productsquickorder .menu-horizontal .menu-contenance-item li a:last-child{ border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } #module-lappstar-productsquickorder .menu-horizontal .menu-contenance-item li a:not(.active):hover{ background-color: #ddd; } #module-lappstar-productsquickorder .menu-horizontal .menu-contenance-item.active > .menu-toggle:not(.active){ background-color: #ddd; } #module-lappstar-productsquickorder .menu-horizontal .menu-toggle{ display: inline-block; padding: 0.4rem 1rem; border-radius: 5px; background-color: #eee; color: #333; text-decoration: none; font-weight: 500; border: 1px solid transparent; white-space: nowrap; } #module-lappstar-productsquickorder .menu-horizontal .menu-toggle.active, #module-lappstar-productsquickorder .menu-horizontal .submenu-brands a.active{ background-color: #333; color: #fff; } #module-lappstar-productsquickorder .menu-horizontal .submenu-brands{ display: none; position: absolute; top: 37px; left: 0; margin-left: 0; z-index: 10; background: #eee; width: 100%; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } #module-lappstar-productsquickorder .menu-horizontal .submenu-brands li{ list-style-type: none; } #module-lappstar-productsquickorder .menu-horizontal .menu-contenance-item:hover .submenu-brands{ display: block; } #module-lappstar-productsquickorder .menu-horizontal .menu-selected-brand{ margin-top: 5px; } #module-lappstar-productsquickorder .menu-horizontal .brand-pill{ display: inline-flex; align-items: center; padding: 0.3rem 0.8rem; border-radius: 5px; background-color: #333; color: #fff; font-weight: 500; margin-top: 5px; border: 1px solid transparent; font-size: 16px; } #module-lappstar-productsquickorder .menu-horizontal .brand-pill .remove-brand{ margin-left: 0.5rem; cursor: pointer; font-weight: bold; color: #fff; } #module-lappstar-productsquickorder .menu-horizontal .brand-pill .remove-brand:hover{ color: #ff5a5a; } #module-lappstar-productsquickorder .fixed-thead{ position: fixed; top: 0; z-index: 12; pointer-events: none; background: white; box-shadow: 0 2px 4px rgba(0,0,0,0.2); } .quickorder-table img{ max-width: 70px; } .quickorder-table thead th{ background: var(--quickorder-mgml-color); color: #fff; } .quickorder-table .mgml-0{ --quickorder-mgml-color: #b4d0dc; } .quickorder-table .mgml-1-7{ --quickorder-mgml-color: #9bc1d1; } .quickorder-table .mgml-2{ --quickorder-mgml-color: #91baca; } .quickorder-table .mgml-3{ --quickorder-mgml-color: #83b2c5; } .quickorder-table .mgml-4{ --quickorder-mgml-color: #7aa8bf; } .quickorder-table .mgml-5{ --quickorder-mgml-color: #79a2b3; } .quickorder-table .mgml-6{ --quickorder-mgml-color: #6aa2ba; } .quickorder-table .mgml-7{ --quickorder-mgml-color: #639ab4; } .quickorder-table .mgml-8{ --quickorder-mgml-color: #5193ae; } .quickorder-table .mgml-9{ --quickorder-mgml-color: #3883a3; } .quickorder-table .mgml-10{ --quickorder-mgml-color: #1f7497; } .quickorder-table .mgml-11{ --quickorder-mgml-color: #07658c; } .quickorder-table .mgml-12{ --quickorder-mgml-color: #065a7e; } .quickorder-table .mgml-13{ --quickorder-mgml-color: #1b5f7b; } .quickorder-table .mgml-14{ --quickorder-mgml-color: #1a566f; } .quickorder-table .mgml-15{ --quickorder-mgml-color: #185c78; } .quickorder-table .mgml-16{ --quickorder-mgml-color: #055070; } .quickorder-table .mgml-17{ --quickorder-mgml-color: #044662; } .quickorder-table .mgml-18{ --quickorder-mgml-color: #043c54; } .quickorder-table .mgml-19{ --quickorder-mgml-color: #033246; } .quickorder-table .mgml-20{ --quickorder-mgml-color: #022838; } .quickorder-table .less-container, .quickorder-table .more-container, .quickorder-table .form-group{ flex: 1; display: flex; flex-direction: column; justify-content: center; background-color: #eee; font-size: 12px; } .quickorder-table .form-group input[type="text"]{ flex: 1; text-align: center; font-size: 18px; border-radius: 0; border: 0; } .quickorder-table .less-container > div, .quickorder-table .more-container > div{ padding: 5px 0; } .quickorder-table .less-container > div:first-child, .quickorder-table .more-container > div:first-child{ border-bottom: 1px solid var(--bs-border-color) !important; } .quickorder-table .less-container > div:hover, .quickorder-table .more-container > div:hover{ background-color: var(--bs-primary); cursor: pointer; color: #FFFFFF; } .quickorder-table td{ padding: 0 !important; min-width: 180px; max-width: 180px; } .quickorder-table td input.is-in-cart{ background-color: var(--cs-color-light-blue); } .quickorder-table td:first-child, .quickorder-table th:first-child{ position: sticky; left: 0; background: #fff; z-index: 11; } /* OI */ #module-lappstar-customizableoffers .offer-cat-card{ display: block; text-decoration: none; color: inherit; } #module-lappstar-customizableoffers .offer-cat-card:hover{ transform: translateY(-4px); } #module-lappstar-customizableoffers .offer-cat-card:hover .btn{ background-color: var(--bs-primary); color: #FFFFFF; } #module-lappstar-customizableoffers .offer-cat-inner{ position: relative; display: flex; height: 120px; overflow: hidden; border-radius: 14px; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.1); } #module-lappstar-customizableoffers .offer-cat-image{ width: 100%; position: relative; background-size: cover; background-position: left; } #module-lappstar-customizableoffers .offer-cat-image::before{ content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .55); } #module-lappstar-customizableoffers .offer-icon-on-image{ position: absolute; bottom: calc(50% - 38px); left: calc(50% - 50px); background: rgba(255,255,255,0.15); backdrop-filter: blur(4px); padding: 14px; border-radius: 50%; } #module-lappstar-customizableoffers .offer-icon-on-image i{ font-size: 45px; color: white; } #module-lappstar-customizableoffers .offer-cat-content{ width: 50%; background: #fff; position: relative; padding-right: 10px; } #module-lappstar-customizableoffers .offer-cat-content::before{ content: ""; position: absolute; top: 0; left: -60px; width: 120px; height: 100%; background: #fff;transform: skewX(-18deg); transform-origin: center; } #module-lappstar-customizableoffers .offer-cat-content-inner{ position: relative; z-index: 5; } #module-lappstar-customizableoffers .offer-cat-content h3{ font-size: 23px; line-height: 23px; font-weight: 700; } #module-lappstar-customizableoffers .offer-count{ font-size: 14px; color: #555; } #module-lappstar-customizableoffers .layout-main-content > .container, #module-lappstar-customizableoffers .layout-main-content > .container .content > .container{ max-width: 100%; } #module-lappstar-customizableoffers .customizable-offers .offer-card{ transition: .2s ease-in-out; } #module-lappstar-customizableoffers .customizable-offers .offer-card:hover{ transform: translateY(-4px); box-shadow: 0 5px 15px rgba(0,0,0,.15); } #module-lappstar-customizableoffers .customizable-offers .offer-card i{ font-size: 70px; } #module-lappstar-customizableoffers .offer-builder-container{ display: flex; gap: 25px; } #module-lappstar-customizableoffers .offer-builder-sidebar{ width: 260px; position: sticky; top: 20px; height: fit-content; } #module-lappstar-customizableoffers .offer-summary-section{ margin-bottom: 15px; } #module-lappstar-customizableoffers .offer-summary .progress-bar{ width: 100%; height: 12px; background: #ddd; border-radius: 10px; } #module-lappstar-customizableoffers .offer-summary .progress-fill{ background: var(--cs-color-green-action); height: 100%; width: 0%; border-radius: 10px; transition: width .3s; } #module-lappstar-customizableoffers .offer-builder-main{ flex: 1; } #module-lappstar-customizableoffers .products-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 5px; } #module-lappstar-customizableoffers .offer-product{ background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 15px; display: flex; flex-direction: column; gap: 10px; transition: box-shadow 0.2s ease; position: relative; } #module-lappstar-customizableoffers .offer-product.active{ background-color: var(--cs-color-light-blue); transition: background-color 0.35s ease-in-out; } #module-lappstar-customizableoffers .offer-product:hover{ box-shadow: 0 4px 14px rgba(0,0,0,0.1); } #module-lappstar-customizableoffers .product-image img{ width: 100%; height: auto; border-radius: 8px; } #module-lappstar-customizableoffers .offer-product .qty-controls .form-control, #module-lappstar-customizableoffers .offer-product .qty-controls .btn{ border-radius: 0; } #module-lappstar-customizableoffers .offer-product .qty-controls .btn{ width: 30%; } #module-lappstar-customizableoffers .offer-card{ display: flex; flex-direction: column; background: #FFFFFF; border-radius: 15px; overflow: hidden; transition: transform .3s ease, box-shadow .3s ease; position: relative; min-height: 120px; } #module-lappstar-customizableoffers .offer-card:hover{ transform: translateY(-6px) scale(1.02); box-shadow: 0 18px 40px rgba(0,0,0,.15); } #module-lappstar-customizableoffers .offer-card .offer-img-wrapper{ flex: 0 0 50%; overflow: hidden; } #module-lappstar-customizableoffers .offer-card .offer-img{ width: 100%; transition: transform .4s ease; } #module-lappstar-customizableoffers .offer-card .offer-info{ flex: 1; } #module-lappstar-customizableoffers .offer-card .offer-info h4{ font-size: 24px; line-height: 24px; font-weight: 600; background: linear-gradient(90deg, transparent, var(--cs-color-light-blue)); padding: 5px; } #module-lappstar-customizableoffers .offer-card .countdown{ display: flex; width: 100%; gap: 6px; } #module-lappstar-customizableoffers .offer-card .cd-item{ text-align: center; } #module-lappstar-customizableoffers .offer-card .cd-num{ background: var(--bs-primary); color: #FFFFFF; display: block; width: 100%; padding: 5px; border-radius: 5px; font-size: 1.5rem; font-weight: 900; line-height: 1; box-shadow: 0 4px 12px rgba(0,0,0,0.12); } #module-lappstar-customizableoffers .offer-card:hover .btn, #module-lappstar-customizableoffers .offer-card .btn:hover{ transform: scale(1.05); background: var(--bs-primary) !important; color: #FFFFFF !important; animation: none; /* arrĂȘt du clignotement au survol */ } .offer-total .price{ background-color: var(--cs-color-yellow-action); } /** ** Cart ** **/ body#cart .cart-container hr{ margin: 5px 0; } body#cart .cart__item .product-line__image img{ max-width: 50px; } body#cart .cart__item .product-line__image .product-line__image-preview{ display: none; position: fixed; z-index: 999999; } body#cart .cart__item .product-line__image .product-line__image-preview img{ border: 1px solid #ccc; background: #fff; max-width: 100%; } body#cart .cart__item .product-line__title{ white-space: normal !important; overflow: visible !important; text-overflow: unset !important; word-break: break-word; } body#cart .cart__item .product-line__informations .stock-bullet{ width: fit-content; color: #FFFFFF; padding: 0 5px; border-radius: 3px; } body#cart .cart__item .product-line__actions a{ font-size: 12px; } body#cart .cart__item .product-line__actions a:after{ background: none; } body#cart .cart__item .product-line__actions a.addtocart-manage{ padding: 3px 5px; text-decoration: none; } body#cart .cart__item .product-line__actions a.remove-from-cart{ color: var(--bs-gray-800); margin-left: 10px; text-decoration: underline; } .cart-detailed__totals .nb-articles, .cart-summary__products > p{ text-align: right; font-weight: bold; } .cart-detailed__totals .cart-detailed__subtotals .franco.not-reached, .cart-summary__subtotals__container .franco.not-reached{ color: var(--cs-color-red-alert); } .cart-detailed__totals .cart-detailed__subtotals .franco.to-reached, .cart-summary__subtotals__container .franco.to-reached{ color: var(--bs-primary); } .cart-summary__totals .cart-summary__label{ max-width: 70%; } .cart-summary__totals .cart-summary__label a, .order-confirmation__totals a{ color: inherit; text-decoration: underline; } .cart-summary__line .cart-summary__label.encours{ font-size: 14px; } .cart-summary__line .cart-summary__value.encours{ background-color: var(--cs-color-yellow-action); border-color: var(--cs-color-yellow-action); color: #000000; font-weight: 600; font-size: 14px; } /** Financial data **/ .customer-financial-data span.data{ display: none; } .customer-financial-data td.label-cell{ background: #f8f9fa; font-weight: 500; padding-right: 12px; border-right: 1px solid #eee; width: 60%; } .customer-financial-data .value-cell{ min-height: 50px; height: 50px; } .customer-financial-data tr:last-child td{ border-bottom: 0 !important; } /** ** Order ** **/ #conditions-to-approve input{ width: 15px; height: 15px; border: 1px solid var(--cs-color-red-alert); } /** ** Login ** **/ body#authentication header#header, body.not-logged-in .page-header, body.not-logged-in footer.page-footer{ display: none; } body.not-logged-in footer{ --footer-background-color: #fafafa; } body.not-logged-in footer a, body.not-logged-in #footer.footer .footer-container-bottom .bottom-links span{ color: inherit; } body.not-logged-in .login-page{ display: flex; align-items: center; justify-content: flex-end; min-height: 100vh; background: #f8f9fa; } body.not-logged-in .login-page .login-page__background, body.not-logged-in .login-page .login-page__backgrounds{ position: absolute; top: 50%; left: 0; width: 75%; height: calc(100% - 30px); transform: translateY(-50%); border-top-right-radius: 2rem; border-bottom-right-radius: 2rem; overflow: hidden; } body.not-logged-in .login-page .login-page__backgrounds .bg-slide{ position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.5s ease-in-out; } body.not-logged-in .login-page .login-page__backgrounds .bg-slide.active{ opacity: 1; } body.not-logged-in .login-page .login-page__overlay{ position: absolute; inset: 0; z-index: 2; opacity: 0; animation: fadeIn 1.2s ease-in forwards } body.not-logged-in .login-page .login-page__logo img{ max-width: 80px; } body.not-logged-in .login-page .login-page__form-wrapper{ position: relative; z-index: 2; flex: 0 0 400px; min-width: 30vw; width: 100%; margin-right: 5vw; border-radius: 1.5rem; box-shadow: 0 8px 25px rgba(0,0,0,.1); } body.not-logged-in .login-page .login-page__form{ flex: 1; display: flex; align-items: center; justify-content: flex-start; padding: 2rem; } body.not-logged-in .login-page .login-page__image{ flex: 2; background: #e9ecef; border-top-right-radius: 2rem; border-bottom-right-radius: 2rem; overflow: hidden; } body.not-logged-in .login-page .login-page__image img{ width: 100%; height: 100%; object-fit: cover; } body.not-logged-in .login-page .animate-slide-in{ opacity: 0; transform: translateX(40px); animation: slideIn .8s ease-out forwards; animation-delay: .3s; } body.not-logged-in .login-page .animate-fade-in{ opacity: 0; animation: fadeIn 1.2s ease-in forwards; } body.not-logged-in .login-page .bg-slide.active { opacity: 1; animation: kenburns 10s ease-in-out forwards; } body.not-logged-in .login-page .login-page__headline{ position: absolute; top: 50%; left: 7vw; transform: translateY(-50%); z-index: 3; color: #fff; text-align: left; } body.not-logged-in .login-page .headline-content{ max-width: 40vw; } body.not-logged-in .login-page .headline-content h2, body.not-logged-in .login-page .headline-content p{ text-shadow: 0 1px 5px rgba(0,0,0,0.4); } body.not-logged-in .login-page .headline-content h2{ font-size: clamp(1.5rem, 5vw, 2.5rem); line-height: clamp(1.5rem, 5vw, 2.5rem); font-weight: bold; text-shadow: 0 2px 10px rgba(0,0,0,0.5); } body.not-logged-in .login-page .headline-content p{ font-size: clamp(1rem, 3vw, 1.2rem); line-height: clamp(1rem, 3vw, 1.2rem); margin-top: 1rem; text-shadow: 0 1px 5px rgba(0,0,0,0.4); } body.not-logged-in .login-page .cursor{ display: inline-block; margin-left: 2px; animation: blink 1s infinite; } body.not-logged-in .login-page .headline-cta{ display: inline-block; margin-top: 1.5rem; font-size: clamp(1rem, 3vw, 1.2rem); line-height: clamp(1rem, 3vw, 1.2rem); font-weight: 500; color: #fff; text-decoration: none; position: relative; } body.not-logged-in .login-page .headline-cta.underline::after{ content: ""; position: absolute; left: 0; bottom: -3px; width: 0; height: 2px; background: #fff; animation: underlineGrow 0.6s ease forwards; } body.not-logged-in .login-page .hidden{ display: none; } body.not-logged-in .login-page .visible{ opacity: 1; } /** ** Account ** **/ .account-title{ display: flex; align-items: center; justify-content: space-between; } .account-title a{ font-size: 16px; color: var(--bs-gray-800); } .account-title a.account-link:nth-child(1) i{ margin-top: -3px; } .account-title a.account-link:nth-child(2) i{ margin-top: -7px; } .account-menu > a.active, .account-menu > a:hover{ font-weight: 900; } #my-account .commercial img{ max-width: 100%; } #my-account .account-card{ transition: all 0.2s ease;border-radius: 12px;background: #fff; } #my-account .account-card:hover{ transform: translateY(-3px);box-shadow: 0 6px 20px rgba(0,0,0,0.08); } #lappstar-account .menu{ display: flex; flex-direction: row; gap: 5px; flex-wrap: wrap; align-items: baseline; margin-bottom: 10px; } #lappstar-account .menu div{ width: fit-content; } #lappstar-account .menu a{ padding: 7px; display: block; color: #777777; text-transform: uppercase; border: 1px solid #A8A8A8; background-color: #FDFDFD; text-align: center; border-radius: 7px; width: 100%; } #lappstar-account .menu a:hover{ background-color: #d9edf7; border-color: #bcdff1; color: #31708f; } #lappstar-account .menu .active{ background-color: #d9edf7; border-color: #bcdff1; color: #31708f; } #lappstar-account .menu div.informations-manquantes{ margin-top: 5px; margin-bottom: 5px; } #lappstar-account .menu .informations-manquantes .notification{ margin-top: 5px; margin-bottom: 5px; } /** ** Footer ** **/ #footer.footer .small, #footer.footer ul.small li a{ color: #777777 !important; } #footer.footer ul.small li a:hover, #footer.footer a:hover{ color: var(--bs-primary) !important; } #footer.footer .small{ font-size: 1em; } #footer.footer .reassurance-content .label-cb{ display: flex; } #footer.footer .reassurance-content .label-cb svg{ width: 60px; height: 60px; fill: #FFFFFF; } #footer.footer .reassurance-content .label-cb > div:nth-child(2){ margin-left: 10px; } #footer.footer .footer-container-bottom .bottom-links span{ color: #FFFFFF; } /** ** J GROWL ** **/ #jGrowl .jGrowl-notification, #jGrowl .jGrowl-closer{ min-height: 40px; font-size: 14px; line-height: 16px; font-family: inherit; font-weight: 400; opacity: 1; color: #FFFFFF; padding: 10px; height: auto; } #jGrowl .jGrowl-notification.error{ background-color: #dc3545 !important; } #jGrowl .jGrowl-notification.success{ background-color: #28a745 !important; } #jGrowl .jGrowl-notification.info{ background-color: #e1ecf1 !important; } #jGrowl .jGrowl-notification.info *{ color: #548194 !important; } #jGrowl .jGrowl-notification.warning{ background-color: #ffc107 !important; } #jGrowl .jGrowl-notification.warning *{ color: #333333 !important; } /** ** Responsive ** **/ @media screen and (min-width: 544px) { } @media screen and (min-width: 680px) { } @media screen and (min-width: 680px) { } @media screen and (min-width: 769px) { /*header#header .header-bottom .header-bottom__container .header-bottom__row .logo{ flex: 1; } header#header .header-bottom .header-bottom__container .header-bottom__row .lappstaras-search-container{ flex: 2; max-width: 700px !important; }*/ body#product .product__col:not(.is-combinations) .product__prices.js-product-prices{ margin-bottom: 0; } body#product .product__col:not(.is-combinations) .addtocart-container, body#product .product__col:not(.is-combinations) .addtocart-selection{ display: block !important; position: relative; } body#product .product__col:not(.is-combinations) .addtocart-selection{ z-index: 1; } body#product .product__col:not(.is-combinations) .container-see-product, body#product .product__col:not(.is-combinations) .btn.green-action{ display: none; } body#product .product__col:not(.is-combinations) .product-addtocart.combinations .product-combination{ flex-direction: column-reverse; align-items: flex-start; margin-top: 0; } body#product .product__col:not(.is-combinations) .product-addtocart.combinations .product-combination > div.product-name{ flex-direction: row; max-width: 100%; align-items: center; justify-content: flex-start; gap: 10px; } } @media screen and (min-width: 992px) { #left-column #search_filters_wrapper{ position: -webkit-sticky; position: sticky; align-self: flex-start; } #left-column #search_filters_wrapper{ overflow-y: auto; padding-right: 5px; } #left-column #search_filters_wrapper::-webkit-scrollbar{ width: 6px; } #left-column #search_filters_wrapper::-webkit-scrollbar-thumb{ background: rgba(0,0,0,0.3); border-radius: 3px; } header#header .js-menu-desktop #top-menu[data-depth="0"] > li > a{ font-weight: bold; font-size: 16px; } .main-menu__tree > li .menu-container a[data-depth="1"]:hover, .main-menu__tree > li .menu-container a[data-depth="2"]:hover{ color: var(--bs-primary); } .main-menu__tree > li .menu-container a[data-depth="1"]{ font-size: 17px; line-height: 20px; font-weight: 900; text-transform: uppercase; padding: 7px 10px; background-color: var(--cs-color-light-blue); border-top-left-radius: 5px; border-top-right-radius: 5px; } .main-menu__tree > li .menu-container a[data-depth="2"]{ font-size: 14px; line-height: 14px; margin: 2px 0; } body#category main#wrapper .container, body#new-products main#wrapper .container{ width: 100% !important; max-width: 100%; } .product-all-combinations-container .product-addtocart.combinations .product-combination > div.product-name{ max-width: 25%; } } @media screen and (min-width: 1200px) { header#header .menu-mobile{ display: none !important; } header#header .header-bottom{ border-bottom: 0; } header#header .main-menu{ justify-content: center; } body#product .col-xl-7{ width: 35%; } body#product .col-xl-5{ width: 65%; } body#product .product__name{ font-size: 1.9rem; } .pro-block.sticky{ position: fixed; top: 50px; z-index: 1000; } .pro-block.sticky-stop{ position: absolute; top: auto; bottom: 0; } } @media screen and (min-width: 1280px) { } @media screen and (min-width: 1500px) { } @media screen and (min-width: 1599px) { .flash-sales .flash-sale .flash-info h4{ max-width: 90%; } } @media screen and (min-width: 1601px) { /*#home-slider{ padding: 20px; }*/ } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1199px) { .header-top-desktop .header-top__left{ display: none; } .header-top-desktop .header-top__right{ width: 100%; } .menu-mobile{ position: relative; width: 100%; overflow: hidden; padding: 0 10px 0 0; } .menu-mobile::after{ content: ""; position: absolute; top: 0; right: 0; width: 70px; height: 100%; pointer-events: none; background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0)); opacity: 1; transition: opacity .3s ease; } .menu-mobile.fade-end::after{ opacity: 0; } .menu-mobile .menus.menus-promotions{ width: 100%; overflow-x: scroll; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */ margin: 10px 20px 10px 10px; } .menu-mobile .menus.menus-promotions::-webkit-scrollbar { display: none; /* Chrome, Safari */ } .menu-mobile .menus.menus-promotions ul{ gap: 5px; margin: 0; } .menu-mobile .menus.menus-promotions ul li{ width: auto; } .menu-mobile .menus.menus-promotions ul li:last-child a{ margin-right: 10px; } .menu-mobile .menus.menus-promotions ul li a, .menu-mobile .menus.menus-promotions ul li a img{ width: auto; max-height: 30px; } .menu-mobile .menus.menus-promotions ul li a span{ display: block; min-width: 100px; } header#header .header-menu-item .submenu-buttons{ display: none; } .main-menu__mobile .menu--childrens{ border-bottom: 1px solid var(--cs-color-light-grey); } .main-menu__mobile .menu--childrens a{ font-weight: bold; } .main-menu__mobile .menu--childrens .material-icons.rtl-flip{ background-color: var(--bs-primary); border-radius: 50%; color: #FFFFFF; } .home-wrapper > .home-left{ margin-left: 0; margin-bottom: -10px; } .home-wrapper > .home-left .pro-block{ min-height: auto; margin: 0; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } } @media screen and (max-width: 991px) { body.not-logged-in .login-page{ flex-direction: column; justify-content: flex-end; align-items: center; min-height: 100vh; overflow: hidden; } body.not-logged-in .login-page .login-page__backgrounds{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 0; transform: inherit; } body.not-logged-in .login-page .login-page__headline{ display: flex; justify-content: center; position: absolute; top: 15vh; left: 50%; transform: translateX(-50%); text-align: center; z-index: 3; width: 95%; max-width: 95%; } body.not-logged-in .login-page .headline-content{ width: 95%; max-width: 95%; } body.not-logged-in .login-page .login-page__headline p{ display: none !important; } body.not-logged-in .login-page .headline-cta{ margin-top: 10px; } body.not-logged-in .login-page .login__register-prompt a{ font-size: 13px; } body.not-logged-in .login-page .login-page__form-wrapper{ position: relative; width: 100%; margin: 0; border-radius: 1.2rem 1.2rem 0 0; z-index: 4; animation: slideUp 0.8s ease-out forwards; box-shadow: none; } } @media screen and (max-width: 768px) { .product-all-combinations-container .product-addtocart.combinations .product-combination{ display: flex; flex-direction: column; gap: 5px; } .product-all-combinations-container .product-addtocart.combinations .product-image{ margin-bottom: 0.5rem; } .product-all-combinations-container .product-addtocart.combinations .attributes div{ display: block; } header#header .header-bottom .header-bottom__container .header-bottom__row .lappstaras-search-container{ margin: 10px 0; } .products.row:not(.list){ display: grid; row-gap: 5px; column-gap: 5px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); grid-column-gap: 5px; grid-row-gap: 5px; } .addtocart-container .addtocart-selection{ position: fixed !important; margin: 0 auto; padding: 25px!important; width: 100% !important; } .addtocart-container .addtocart-selection .arrow{ display: none; } .addtocart-container .addtocart-selection ul li{ padding: 7px; font-size: 17px; } .flash-sales .flash-sale .flash-info h4{ font-size: 1rem; line-height: 1rem; } } @media screen and (max-width: 543px) { } /** SpĂ©cifiques **/ /* 3 colonnes entre 768px et 1200px */ @media (min-width: 768px) and (max-width: 1600px) { .col-custom-3 { flex: 0 0 33.3333%; max-width: 33.3333%; } } /** ** Animations ** **/ @keyframes kenburns{ 0% { transform: scale(1) translateX(0); } 50% { transform: scale(1.1) translateX(-2%); } 100% { transform: scale(1.2) translateX(2%); } } @keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } @keyframes underlineGrow { from { width: 0; } to { width: 100%; } } @keyframes slideUp { 0% { transform: translateY(100%); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @keyframes pulseButtonIcon { 0% { opacity: 1; } 15% { opacity: 0; } 20% { opacity: 1; } 25% { opacity: 0; } 30% { opacity: 1; } /* Pause prolongĂ©e */ 100% { opacity: 1; } } /* Animation bouton flash sales */ @keyframes offerBlink { 0% { background: var(--cs-color-orange-promotions); color: #FFFFFF; } 10% { background: transparent; color: var(--cs-color-orange-promotions); } 20% { background: var(--cs-color-orange-promotions); color: #FFFFFF; } /* 20% → 60% : PAUSE */ 60% { background: var(--cs-color-orange-promotions); color: #FFFFFF; } /* second blink */ 70% { background: transparent; color: var(--cs-color-orange-promotions); } 80% { background: var(--cs-color-orange-promotions); color: #FFFFFF; } /* 80–100% : PAUSE */ 100% { background: var(--cs-color-orange-promotions); color: #FFFFFF; } } @keyframes wave { 0% { transform: rotate(0deg); } 20% { transform: rotate(15deg); } 40% { transform: rotate(-10deg); } 60% { transform: rotate(15deg); } 80% { transform: rotate(-5deg); } 100% { transform: rotate(0deg); } } @keyframes slideIn{ to { opacity: 1; transform: translateX(0); } } @keyframes fadeIn{ to { opacity: 1; } } @keyframes fadeInY{ from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }