@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&display=swap');
:root {
--bo-teal: #1b8c8f;
--bo-teal-dark: #167275;
--bo-orange: #EB5A25;
--bo-orange-dark: #d14a1a;
--bo-ink: #0f1f20;
--bo-muted: #5a6f70;
--bo-line: rgba(15, 31, 32, 0.12);
--bo-bg: #f5f8f8;
--bo-surface: #ffffff;
--bo-radius: 12px;
--bo-shadow: 0 8px 24px rgba(14, 85, 88, 0.1);
--bo-font: "Open Sans", system-ui, sans-serif;
--bo-title-bg: rgba(27, 140, 143, 0.08);
}
.box-shadow {
background: var(--bo-surface) !important;
border: 1px solid var(--bo-line) !important;
border-radius: var(--bo-radius) !important;
box-shadow: var(--bo-shadow) !important;
overflow: hidden;
}
.checkout-page .checkout-sep,
.checkout-page .checkout-sep.active,
div.checkout-sep.active,
.mini-cart .checkout-sep.active {
background: var(--bo-title-bg) !important;
border: none !important;
border-bottom: 1px solid var(--bo-line) !important;
border-radius: 0 !important;
color: var(--bo-ink) !important;
font-weight: 600 !important;
font-size: 14px !important;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 14px 16px !important;
margin-bottom: 0 !important;
position: relative;
}
.checkout-page .checkout-sep.active::before,
div.checkout-sep.active::before,
.mini-cart .checkout-sep.active::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--bo-teal);
}
#left_column .block,
#left_column .block.left-module {
background: var(--bo-surface) !important;
border: 1px solid var(--bo-line) !important;
border-radius: var(--bo-radius) !important;
box-shadow: var(--bo-shadow) !important;
overflow: hidden;
margin-bottom: 16px;
}
#left_column .block .title_block {
background: var(--bo-title-bg) !important;
border-bottom: 1px solid var(--bo-line);
color: var(--bo-ink) !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 0.05em;
text-transform: uppercase;
padding: 14px 16px 14px 18px !important;
margin: 0 !important;
position: relative;
}
#left_column .block .title_block::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--bo-teal);
}
#left_column .block .block_content {
padding: 6px !important;
}
#left_column .tree-menu {
margin: 0;
padding: 0;
list-style: none;
}
#left_column .tree-menu li {
display: grid !important;
grid-template-columns: 18px minmax(0, 1fr);
column-gap: 4px;
align-items: center;
padding: 0 !important;
margin: 0 !important;
list-style: none;
white-space: normal !important;
overflow: visible !important;
text-overflow: unset !important;
}
#left_column .tree-menu li > span,
#left_column .tree-menu li > i.categorie-small {
grid-column: 1;
grid-row: 1;
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
margin: 0 !important;
padding: 0 !important;
left: 0 !important;
position: relative !important;
line-height: 1 !important;
font-size: 12px !important;
color: var(--bo-muted) !important;
opacity: 0.75;
flex: none !important;
}
#left_column .tree-menu li > span:before {
content: "\f105";
font-family: "FontAwesome";
font-size: 12px;
font-weight: 700;
line-height: 1;
color: var(--bo-muted);
padding: 0 !important;
display: block;
text-align: center;
}
#left_column .tree-menu li > span.open:before {
content: "\f107";
color: var(--bo-teal);
}
#left_column .tree-menu li > a {
grid-column: 2;
grid-row: 1;
display: block;
min-width: 0;
width: auto;
margin: 0 !important;
padding: 5px 8px !important;
border-radius: 8px;
color: var(--bo-ink) !important;
font-weight: 400 !important;
font-size: 13px;
line-height: 1.3;
text-decoration: none !important;
transition: background 0.15s ease, color 0.15s ease;
white-space: normal !important;
overflow: visible !important;
text-overflow: unset !important;
flex: none !important;
}
#left_column .tree-menu li > a:hover,
#left_column .tree-menu li:hover > a {
background: #f0fafa !important;
color: var(--bo-teal-dark) !important;
}
#left_column .tree-menu li > a.active,
#left_column .tree-menu li.current > a,
#left_column .tree-menu li.active > a {
background: rgba(27, 140, 143, 0.12) !important;
color: var(--bo-teal-dark) !important;
font-weight: 600 !important;
}
#left_column .tree-menu li > ul {
grid-column: 1 / -1;
grid-row: 2;
width: 100%;
margin: 2px 0 4px !important;
padding: 0 0 0 10px !important;
border-left: 2px solid rgba(27, 140, 143, 0.15);
box-sizing: border-box;
}
#left_column .tree-menu li > ul > li > a {
font-size: 12.5px;
color: var(--bo-muted) !important;
padding: 4px 8px !important;
}
#left_column .tree-menu li > ul > li > a.active {
color: var(--bo-teal-dark) !important;
}
#left_column .tree-menu li > ul > li > ul {
padding-left: 8px !important;
margin-left: 4px !important;
}
.product-tab {
background: var(--bo-surface) !important;
border: 1px solid var(--bo-line) !important;
border-radius: var(--bo-radius) !important;
box-shadow: var(--bo-shadow) !important;
overflow: hidden;
}
.product-tab .nav-tab {
background: transparent !important;
border-radius: 0 !important;
width: 100% !important;
display: flex;
flex-wrap: wrap;
gap: 0;
border-bottom: 1px solid var(--bo-line);
margin: 0 !important;
padding: 0 8px !important;
overflow: visible !important;
}
.product-tab .nav-tab > li {
float: none !important;
height: auto !important;
line-height: 1.2 !important;
background: transparent !important;
font-weight: 600 !important;
font-size: 13px !important;
letter-spacing: 0.04em;
}
.product-tab .nav-tab > li > a,
.product-tab .nav-tab > li > .bo-product-desc-label {
display: block;
color: var(--bo-muted) !important;
padding: 14px 12px !important;
height: auto !important;
margin: 0 !important;
border-bottom: 3px solid transparent !important;
transition: color 0.15s ease, border-color 0.15s ease;
}
.product-tab .nav-tab > li:hover > a,
.product-tab .nav-tab > li.active > a,
.product-tab .nav-tab > li.active > .bo-product-desc-label {
background: transparent !important;
color: var(--bo-teal-dark) !important;
border-bottom-color: var(--bo-teal) !important;
border-bottom-width: 3px !important;
border-bottom-style: solid !important;
}
.product-tab .tab-container {
padding: 8px 8px 16px !important;
border-top: none !important;
margin-top: 0 !important;
}
.product-tab .tab-container .tab-panel {
padding: 16px 16px 8px !important;
line-height: 1.6 !important;
color: var(--bo-ink);
}
a.btn-add-cart,
.btn-add-cart {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
background: var(--bo-orange) !important;
border-radius: 999px !important;
box-shadow: 0 6px 16px rgba(235, 90, 37, 0.28);
transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
font-family: var(--bo-font);
letter-spacing: 0.02em;
text-align: center !important;
padding: 10px 22px !important;
line-height: 1.2 !important;
position: relative;
width: auto !important;
max-width: 100%;
}
a.btn-add-cart:hover,
.btn-add-cart:hover,
a.btn-add-cart:focus,
.btn-add-cart:focus {
background: var(--bo-orange-dark) !important;
color: #fff !important;
opacity: 1 !important;
transform: translateY(-1px);
box-shadow: 0 10px 22px rgba(235, 90, 37, 0.35);
text-decoration: none !important;
}
a.btn-add-cart:before,
.btn-add-cart:before {
display: none !important;
content: none !important;
}
a.btn-add-cart .fa,
.btn-add-cart .fa {
position: static !important;
left: auto !important;
right: auto !important;
float: none !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
font-size: 18px !important;
line-height: 1 !important;
margin: 0 !important;
width: auto !important;
height: auto !important;
}
#product .pb-right-column a.btn-add-cart,
.produit-page-info a.btn-add-cart,
.form-option a.btn-add-cart {
width: 100% !important;
max-width: none;
box-sizing: border-box;
}
.form-option.ajouter-panier-mobile.addcart-fixed a.btn-add-cart {
width: 100% !important;
max-width: none;
border-radius: 0 !important;
gap: 8px !important;
}
#product .form-option .button-group,
.produit-page-info .form-option .button-group,
.form-option .attributes .button-group {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap;
align-items: stretch;
gap: 10px;
width: 100%;
max-width: 420px;
}
#product .form-option .button-group > a.btn-add-cart,
#product .form-option .button-group > a.btn-link-affiliate,
.produit-page-info .button-group > a.btn-add-cart,
.produit-page-info .button-group > a.btn-link-affiliate,
.form-option .button-group > a.btn-add-cart,
.form-option .button-group > a.btn-link-affiliate {
flex: 1 1 calc(50% - 5px);
min-width: 140px;
width: auto !important;
max-width: none !important;
margin: 0 !important;
height: 48px;
box-sizing: border-box;
border-radius: 999px !important;
}
a.btn-link-affiliate,
.btn-link-affiliate {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
background: var(--bo-teal) !important;
color: #fff !important;
border-radius: 999px !important;
box-shadow: 0 6px 16px rgba(27, 140, 143, 0.28);
font-family: var(--bo-font);
font-weight: 600;
font-size: 16px;
letter-spacing: 0.02em;
text-transform: uppercase;
text-decoration: none !important;
padding: 10px 18px !important;
line-height: 1.2 !important;
position: relative;
transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
a.btn-link-affiliate:hover,
.btn-link-affiliate:hover,
a.btn-link-affiliate:focus,
.btn-link-affiliate:focus {
background: var(--bo-teal-dark) !important;
color: #fff !important;
transform: translateY(-1px);
box-shadow: 0 10px 22px rgba(27, 140, 143, 0.35);
text-decoration: none !important;
}
a.btn-link-affiliate .fa,
.btn-link-affiliate .fa {
position: static !important;
left: auto !important;
right: auto !important;
float: none !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
font-size: 16px !important;
line-height: 1 !important;
margin: 0 !important;
}
a.btn-link-affiliate > div {
all: unset;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
width: 100%;
height: 100%;
}
@media (max-width: 991px) {
#product .form-option .button-group,
.form-option .attributes .button-group {
max-width: none;
}
.form-option.ajouter-panier-mobile:not(.addcart-fixed) .button-group > a.btn-add-cart,
.form-option.ajouter-panier-mobile:not(.addcart-fixed) .button-group > a.btn-link-affiliate {
flex: 1 1 100%;
}
.bo-mobile-cta {
display: flex;
align-items: stretch;
width: 100%;
gap: 0;
}
.bo-mobile-cta > a.btn-add-cart,
.bo-mobile-cta > a.btn-link-affiliate {
flex: 1 1 50%;
width: auto !important;
max-width: none !important;
margin: 0 !important;
border-radius: 0 !important;
min-height: 52px;
height: 52px;
box-shadow: none !important;
font-size: 14px !important;
gap: 8px !important;
padding: 0 12px !important;
}
.bo-mobile-cta:not(.bo-mobile-cta--split) > a.btn-add-cart {
flex: 1 1 100%;
width: 100% !important;
}
.form-option.ajouter-panier-mobile.addcart-fixed {
padding: 0 !important;
box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.12);
}
.form-option.ajouter-panier-mobile.addcart-fixed .bo-mobile-cta > a.btn-add-cart,
.form-option.ajouter-panier-mobile.addcart-fixed .bo-mobile-cta > a.btn-link-affiliate {
line-height: 1.2 !important;
}
body:has(.ajouter-panier-mobile.addcart-fixed) #product,
body:has(.ajouter-panier-mobile.addcart-fixed) .page-product-box {
padding-bottom: 72px !important;
}
}
.checkout-page button.btn-warning[type="submit"],
.checkout-page .btn.btn-warning[type="submit"] {
background: var(--bo-orange) !important;
border-color: var(--bo-orange-dark) !important;
border-radius: 999px !important;
padding: 12px 22px !important;
font-size: 16px !important;
font-weight: 700 !important;
box-shadow: 0 6px 16px rgba(235, 90, 37, 0.28);
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.checkout-page button.btn-warning[type="submit"]:hover,
.checkout-page .btn.btn-warning[type="submit"]:hover {
background: var(--bo-orange-dark) !important;
transform: translateY(-1px);
}
.bo-pay-methods {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 16px !important;
width: 100%;
box-sizing: border-box;
}
.bo-pay-card {
position: relative;
display: block;
margin: 0 !important;
cursor: pointer;
font-weight: 400 !important;
min-width: 0;
}
.bo-pay-card > input[type="radio"] {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
margin: 0;
pointer-events: none;
}
.bo-pay-card__body {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
min-height: 100%;
min-width: 0;
width: 100%;
padding: 14px 14px 16px;
border: 2px solid var(--bo-line);
border-radius: var(--bo-radius);
background: var(--bo-surface);
box-shadow: 0 2px 8px rgba(14, 85, 88, 0.04);
transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
box-sizing: border-box;
}
.bo-pay-card:hover .bo-pay-card__body {
border-color: rgba(27, 140, 143, 0.45);
}
.bo-pay-card > input[type="radio"]:checked + .bo-pay-card__body {
border-color: var(--bo-teal);
background: #f0fafa;
box-shadow: var(--bo-shadow);
}
.bo-pay-card > input[type="radio"]:focus-visible + .bo-pay-card__body {
outline: 2px solid var(--bo-teal);
outline-offset: 2px;
}
.bo-pay-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 10px;
background: var(--bo-bg);
color: var(--bo-teal);
font-size: 18px;
}
.bo-pay-card__icon--bank {
width: 88px;
height: 40px;
padding: 4px 8px;
background: #fff;
border: 1px solid var(--bo-line);
box-sizing: border-box;
}
.bo-pay-bank-logo {
display: block;
width: 100%;
max-width: 72px;
height: auto;
max-height: 28px;
object-fit: contain;
object-position: center;
}
.bo-pay-card > input[type="radio"]:checked + .bo-pay-card__body .bo-pay-card__icon {
background: rgba(27, 140, 143, 0.15);
color: var(--bo-teal-dark);
}
.bo-pay-card > input[type="radio"]:checked + .bo-pay-card__body .bo-pay-card__icon--bank {
background: #fff;
border-color: var(--bo-teal);
}
.bo-pay-card__title {
display: block;
font-size: 15px;
font-weight: 600;
line-height: 1.3;
color: var(--bo-ink);
padding-right: 28px;
word-wrap: break-word;
}
.bo-pay-card__meta {
display: block;
width: 100%;
min-width: 0;
font-size: 12px;
line-height: 1.45;
color: var(--bo-muted);
overflow-wrap: break-word;
}
.bo-pay-card__meta .rib {
display: block;
margin-top: 4px;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 12px;
font-weight: 600;
color: var(--bo-ink);
letter-spacing: 0;
word-break: break-all;
line-height: 1.4;
}
.bo-pay-card__check {
position: absolute;
top: 12px;
right: 12px;
width: 22px;
height: 22px;
border-radius: 50%;
border: 2px solid var(--bo-line);
background: #fff;
box-sizing: border-box;
}
.bo-pay-card__check::after {
content: "";
position: absolute;
inset: 3px;
border-radius: 50%;
background: var(--bo-teal);
opacity: 0;
transform: scale(0.6);
transition: opacity 0.15s ease, transform 0.15s ease;
}
.bo-pay-card > input[type="radio"]:checked + .bo-pay-card__body .bo-pay-card__check {
border-color: var(--bo-teal);
}
.bo-pay-card > input[type="radio"]:checked + .bo-pay-card__body .bo-pay-card__check::after {
opacity: 1;
transform: scale(1);
}
.checkout-page .bo-pay-note {
margin-top: 0;
padding: 8px 16px 16px !important;
font-size: 13px;
line-height: 1.45;
color: var(--bo-muted);
clear: both;
float: none !important;
width: auto !important;
}
.mini-cart .cart-product,
.mini-cart .bo-cart-item {
display: grid !important;
grid-template-columns: 64px 1fr;
grid-template-rows: auto auto;
gap: 8px 12px;
align-items: start;
position: relative;
padding: 14px 16px !important;
margin: 0 !important;
border-bottom: 1px solid var(--bo-line);
min-height: 0 !important;
overflow: visible !important;
}
.mini-cart .bo-cart-item > img,
.mini-cart .cart-product > img {
grid-column: 1;
grid-row: 1 / span 2;
float: none !important;
width: 64px !important;
height: 64px !important;
object-fit: cover;
border-radius: 8px;
margin: 0 !important;
}
.mini-cart .bo-cart-item__body {
grid-column: 2;
grid-row: 1;
min-width: 0;
padding-right: 28px;
}
.mini-cart .bo-cart-item__meta {
grid-column: 2;
grid-row: 2;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px;
min-width: 0;
}
.mini-cart .cart-product .remove-product,
.mini-cart .bo-cart-item .remove-product {
position: absolute !important;
top: 12px !important;
right: 12px !important;
left: auto !important;
z-index: 2;
color: var(--bo-muted) !important;
}
.mini-cart .product-name,
.mini-cart span.product-name,
.mini-cart .cart_ref,
.mini-cart .cart-product span {
position: static !important;
right: auto !important;
float: none !important;
}
.mini-cart span.product-name {
display: -webkit-box !important;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden !important;
text-overflow: ellipsis;
line-height: 1.35 !important;
height: auto !important;
max-height: 2.7em;
padding-right: 0 !important;
font-weight: 600 !important;
font-size: 13px;
color: var(--bo-ink);
}
.mini-cart span.product-name a {
color: inherit !important;
text-decoration: none !important;
}
.mini-cart .cart_ref {
display: block;
font-size: 11px;
color: var(--bo-muted);
margin-top: 2px;
}
.mini-cart .bo-cart-item__meta > span,
.mini-cart .bo-cart-item__price {
font-weight: 600 !important;
font-size: 13px;
color: var(--bo-ink);
}
.mini-cart .qty {
position: static !important;
right: auto !important;
bottom: auto !important;
display: inline-flex !important;
align-items: center;
gap: 6px;
font-size: 13px !important;
margin: 0 !important;
}
.mini-cart .qty span {
font-weight: 500 !important;
}
.mini-cart .total {
padding: 10px 16px !important;
clear: both;
}
.mini-cart .bo-cart-row {
display: flex !important;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 10px 16px !important;
}
.mini-cart .bo-cart-row__label,
.mini-cart .bo-cart-row__value {
float: none !important;
display: block;
position: static !important;
}
.mini-cart .bo-cart-row__label {
flex: 0 1 auto;
font-weight: 600 !important;
color: var(--bo-ink);
font-size: 13px;
line-height: 1.4;
}
.mini-cart .bo-cart-row__value {
flex: 1 1 auto;
text-align: right;
font-weight: 500 !important;
color: var(--bo-muted);
font-size: 13px;
line-height: 1.4;
word-break: break-word;
min-width: 0;
}
.mini-cart .bo-cart-row__value.total-total,
.mini-cart .bo-cart-row .total-total {
color: var(--bo-orange) !important;
font-size: 18px !important;
font-weight: 700 !important;
}
.mini-cart .bo-cart-row--note {
display: block !important;
padding-top: 4px !important;
}
.mini-cart .bo-cart-row--note p {
margin: 0;
color: var(--bo-muted);
}
.mini-cart hr {
margin: 8px 16px 0 !important;
border-color: var(--bo-line);
}
html.arabic .bo-pay-card__check {
right: auto;
left: 12px;
}
html.arabic .bo-pay-card__title {
padding-right: 0;
padding-left: 28px;
}
html.arabic .bo-pay-card__body {
align-items: flex-end;
text-align: right;
}
html.arabic #left_column .block .title_block {
padding: 14px 18px 14px 16px !important;
}
html.arabic #left_column .block .title_block::before,
html.arabic .checkout-page .checkout-sep.active::before,
html.arabic div.checkout-sep.active::before,
html.arabic .mini-cart .checkout-sep.active::before {
left: auto;
right: 0;
}
html.arabic #left_column .tree-menu li > a {
padding: 5px 8px !important;
}
html.arabic #left_column .tree-menu li > ul {
padding: 0 10px 0 0 !important;
border-left: none;
border-right: 2px solid rgba(27, 140, 143, 0.15);
}
html.arabic #left_column .tree-menu li > ul > li > a {
padding: 4px 8px !important;
}
html.arabic #left_column .tree-menu li > ul > li > ul {
padding-right: 8px !important;
padding-left: 0 !important;
margin-right: 4px !important;
margin-left: 0 !important;
}
html.arabic #left_column .tree-menu li > span:before,
html.arabic #left_column .tree-menu li > span.open:before {
padding: 0 !important;
}
html.arabic .mini-cart .bo-cart-item__body {
padding-right: 0;
padding-left: 28px;
}
html.arabic .mini-cart .cart-product .remove-product,
html.arabic .mini-cart .bo-cart-item .remove-product {
right: auto !important;
left: 12px !important;
}
html.arabic .mini-cart .bo-cart-row__value {
text-align: left;
}
html.arabic .product-tab .nav-tab {
flex-direction: row-reverse;
}
@media (max-width: 1199px) {
.bo-pay-methods {
grid-template-columns: 1fr;
}
.bo-pay-card__icon--bank {
width: 96px;
height: 44px;
padding: 5px 10px;
}
.bo-pay-bank-logo {
max-width: 80px;
max-height: 30px;
}
}
@media (max-width: 767px) {
.bo-pay-methods {
grid-template-columns: 1fr;
gap: 10px;
padding: 12px !important;
}
.bo-pay-card__icon--bank {
width: 104px;
height: 40px;
padding: 5px 10px;
}
.bo-pay-bank-logo {
max-width: 88px;
max-height: 28px;
}
.checkout-page button.btn-warning[type="submit"],
.checkout-page .btn.btn-warning[type="submit"] {
width: 100% !important;
float: none !important;
display: flex !important;
align-items: center;
justify-content: center;
gap: 8px;
margin: 16px 0 0 !important;
}
.product-tab {
box-shadow: var(--bo-shadow) !important;
border-radius: var(--bo-radius) !important;
}
}
.toggle-affiliation-info {
margin: 8px 0 12px;
text-align: right;
}
.toggle-affiliation-info a {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 999px;
background: var(--bo-bg);
border: 1px solid var(--bo-line);
color: var(--bo-teal-dark) !important;
font-size: 13px;
font-weight: 600;
text-decoration: none !important;
transition: background 0.15s ease, box-shadow 0.15s ease;
}
.toggle-affiliation-info a:hover {
background: #f0fafa;
box-shadow: 0 4px 12px rgba(14, 85, 88, 0.08);
}
.toggle-affiliation-info .fa {
color: var(--bo-teal);
}
.affiliation-navigation {
margin-top: 8px;
}
.affiliation-nav.navbar-default {
background: var(--bo-surface) !important;
border: 1px solid var(--bo-line) !important;
border-radius: var(--bo-radius) !important;
box-shadow: var(--bo-shadow) !important;
overflow: hidden;
min-height: 0 !important;
}
.affiliation-nav .navbar-collapse {
padding: 0 !important;
border: none !important;
box-shadow: none !important;
}
ul.nav.navbar-nav.affiliation-nav-actions {
display: flex !important;
flex-wrap: wrap;
width: 100% !important;
margin: 0 !important;
float: none !important;
}
.affiliation-nav-actions > li {
float: none !important;
width: auto !important;
flex: 1 1 0;
min-width: 140px;
margin: 0 !important;
border-right: 1px solid var(--bo-line);
}
.affiliation-nav-actions > li:last-child {
border-right: none;
}
.affiliation-nav.navbar-default .navbar-nav > li > a,
.affiliation-nav-actions > li > a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
flex-direction: row !important;
padding: 14px 12px !important;
margin: 0 !important;
border: none !important;
border-radius: 0 !important;
background: transparent !important;
color: var(--bo-ink) !important;
font-size: 13px !important;
font-weight: 600 !important;
line-height: 1.25 !important;
white-space: nowrap;
transition: background 0.15s ease, color 0.15s ease;
}
.affiliation-nav.navbar-default .navbar-nav > li > a .fa,
.affiliation-nav-actions > li > a .fa {
position: static !important;
float: none !important;
display: inline-flex !important;
font-size: 16px !important;
padding: 0 !important;
margin: 0 !important;
line-height: 1 !important;
color: var(--bo-muted);
}
.affiliation-nav.navbar-default .navbar-nav > li > a span,
.affiliation-nav-actions > li > a span {
display: inline !important;
}
.affiliation-nav li.active a,
.affiliation-nav.navbar-default .navbar-nav > li.active > a,
.affiliation-nav.navbar-default .navbar-nav > li.active > a:hover,
.affiliation-nav.navbar-default .navbar-nav > li.active > a:focus {
background: var(--bo-teal) !important;
color: #fff !important;
}
.affiliation-nav li.active a .fa {
color: #fff !important;
}
.affiliation-nav.navbar-default .navbar-nav > li > a:hover {
background: #f0fafa !important;
color: var(--bo-teal-dark) !important;
}
.affiliation-nav li.active a:hover {
background: var(--bo-teal-dark) !important;
color: #fff !important;
}
.affiliation-content > hr.line-height,
.affiliation-navigation + .clearfix + hr {
display: none;
}
.affiliation-content {
margin-top: 16px;
padding: 16px;
background: var(--bo-surface);
border: 1px solid var(--bo-line);
border-radius: var(--bo-radius);
box-shadow: var(--bo-shadow);
}
.affiliation-tableau-bord .metrics {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin: 0 0 8px !important;
}
.affiliation-tableau-bord .metrics .metric,
.affiliation-tableau-bord .metrics .column {
float: none !important;
width: calc(33.333% - 8px) !important;
padding: 0 !important;
margin: 0 !important;
}
.affiliation-tableau-bord .valDesc {
margin: 0 !important;
padding: 0 !important;
border: 1px solid transparent;
border-radius: 14px;
background: var(--bo-surface);
box-shadow: 0 6px 18px rgba(14, 85, 88, 0.1);
overflow: hidden;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.affiliation-tableau-bord .valDesc:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(14, 85, 88, 0.16);
}
.affiliation-tableau-bord .kTitle {
background: transparent !important;
border-bottom: none;
color: #fff;
font-size: 12px !important;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 10px 12px 0 !important;
white-space: normal !important;
line-height: 1.3;
}
.affiliation-tableau-bord .kValue,
.affiliation-tableau-bord .kValue.col-md-12 {
border: none !important;
padding: 8px 12px 14px !important;
font-size: 24px !important;
font-weight: 800 !important;
color: #fff !important;
width: 100% !important;
float: none !important;
line-height: 1.15;
background: transparent !important;
}
.affiliation-tableau-bord .bo-kpi-clics .valDesc {
background: linear-gradient(145deg, #1fb5b9 0%, #148a8d 100%);
box-shadow: 0 8px 20px rgba(27, 140, 143, 0.35);
}
.affiliation-tableau-bord .bo-kpi-attente .valDesc {
background: linear-gradient(145deg, #ff7a3d 0%, #eb5a25 100%);
box-shadow: 0 8px 20px rgba(235, 90, 37, 0.35);
}
.affiliation-tableau-bord .bo-kpi-confirmes .valDesc {
background: linear-gradient(145deg, #2ecc71 0%, #1e9e55 100%);
box-shadow: 0 8px 20px rgba(30, 158, 85, 0.35);
}
.affiliation-tableau-bord .bo-kpi-produits .valDesc {
background: linear-gradient(145deg, #3aa0ff 0%, #1f6fd1 100%);
box-shadow: 0 8px 20px rgba(31, 111, 209, 0.35);
}
.affiliation-tableau-bord .bo-kpi-gains-cours .valDesc {
background: linear-gradient(145deg, #f0b429 0%, #d97706 100%);
box-shadow: 0 8px 20px rgba(217, 119, 6, 0.35);
}
.affiliation-tableau-bord .bo-kpi-gains-confirmes .valDesc {
background: linear-gradient(145deg, #0f766e 0%, #115e59 55%, #134e4a 100%);
box-shadow: 0 8px 22px rgba(15, 118, 110, 0.4);
}
.affiliation-tableau-bord .Earnings .kValue {
background: transparent !important;
color: #fff !important;
}
.sortPagiBar.bo-filters,
.sortPagiBar-top.bo-filters,
.bo-filters.sortPagiBar-top {
float: none !important;
width: 100% !important;
margin: 12px 0 16px !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
z-index: 2;
height: auto !important;
}
.bo-filters form,
.bo-filters-form {
display: flex;
flex-wrap: wrap;
align-items: stretch;
justify-content: flex-start;
gap: 10px;
width: 100%;
margin: 0;
padding: 12px;
background: var(--bo-surface);
border: 1px solid var(--bo-line);
border-radius: var(--bo-radius);
box-shadow: var(--bo-shadow);
box-sizing: border-box;
}
.bo-filters .filter-category,
.bo-filters .sort-product,
.bo-filters .show-product-item {
float: none !important;
position: relative !important;
display: block;
flex: 0 0 auto;
width: auto !important;
height: auto !important;
margin: 0 !important;
border: none !important;
background: transparent !important;
min-width: 0;
}
.bo-filters .filter-category {
flex: 1 1 220px;
max-width: 280px;
}
.bo-filters .show-product-item {
flex: 0 0 160px;
width: 160px !important;
max-width: 160px;
}
.bo-filters .sort-product {
flex: 0 0 240px;
width: 240px !important;
max-width: 260px;
}
.bo-filters select,
.bo-filters .form-control {
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: 42px !important;
margin: 0 !important;
padding: 8px 36px 8px 12px !important;
border: 1px solid var(--bo-line) !important;
border-radius: 10px !important;
background-color: #fff !important;
box-shadow: none !important;
font-family: var(--bo-font) !important;
font-size: 13px !important;
font-weight: 500;
color: var(--bo-ink) !important;
line-height: 1.3 !important;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231b8c8f' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 12px center !important;
box-sizing: border-box;
}
.bo-filters .sort-product select {
padding-right: 36px !important;
}
.bo-filters .sort-product-icon {
display: none !important;
}
.view-product-list .relative,
.view-product-list .relative.rel2,
.bo-aff-filter-wrap,
.affiliation-tableau-bord .relative,
.affiliation-tableau-bord .bo-aff-filter-wrap,
.affiliation-tableau-bord .relative.rel2 {
position: relative !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
height: auto !important;
overflow: visible !important;
}
.view-product-list .relative::before,
.view-product-list .relative::after,
.bo-aff-filter-wrap::before,
.bo-aff-filter-wrap::after,
.affiliation-tableau-bord .relative::before,
.affiliation-tableau-bord .relative::after,
.affiliation-tableau-bord .bo-aff-filter-wrap::before,
.affiliation-tableau-bord .bo-aff-filter-wrap::after {
display: none !important;
content: none !important;
}
#bo-aff-products.bo-aff-products--loading,
.bo-aff-products-grid.bo-aff-products--loading {
opacity: 0.45;
pointer-events: none;
transition: opacity 0.2s ease;
}
.affiliation-tableau-bord .bo-aff-pagination {
margin-top: 12px;
clear: both;
}
.portfeuille {
width: 100% !important;
max-width: 560px;
margin: 0 auto !important;
padding: 28px 28px 36px !important;
border-radius: 20px !important;
background: linear-gradient(145deg, #1b8c8f 0%, #146e71 100%) !important;
box-shadow: 0 16px 40px rgba(14, 85, 88, 0.28);
overflow: visible;
}
.portfeuille .title {
font-family: var(--bo-font) !important;
font-size: 15px !important;
font-weight: 700 !important;
letter-spacing: 0.08em;
opacity: 0.95;
}
.portfeuille .sub-title {
font-size: 13px !important;
line-height: 1.45 !important;
opacity: 0.85;
max-width: 36em;
margin-top: 6px;
}
.portfeuille .argent {
font-family: var(--bo-font) !important;
font-size: 42px !important;
font-weight: 700 !important;
letter-spacing: -0.02em;
margin: 18px 0 8px !important;
line-height: 1.1;
}
.retirer-agrent {
width: 100% !important;
max-width: 360px;
margin: 18px auto 0 !important;
position: relative !important;
top: 0 !important;
}
.retirer-agrent a {
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px;
background: #fff;
border-radius: 14px;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
text-decoration: none !important;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.retirer-agrent a:hover {
transform: translateY(-2px);
box-shadow: 0 14px 32px rgba(0, 0, 0, 0.16);
}
.retirer-agrent img {
display: none !important;
}
.retirer-agrent .t1-t2-holder {
position: static !important;
top: auto !important;
left: auto !important;
flex: 1 1 auto;
min-width: 0;
}
.retirer-agrent .t1 {
color: var(--bo-teal-dark) !important;
font-size: 15px !important;
font-weight: 700 !important;
}
.retirer-agrent .t2 {
color: var(--bo-muted) !important;
font-size: 12px !important;
margin-top: 2px;
}
.retirer-agrent a::after {
content: "\f155";
font-family: "FontAwesome";
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--bo-orange);
color: #fff;
font-size: 18px;
flex: 0 0 auto;
box-shadow: 0 6px 14px rgba(235, 90, 37, 0.35);
}
.rappel-affiliation-stats {
margin-top: 28px !important;
}
.affiliation-progress {
display: flex !important;
flex-direction: column;
gap: 8px;
clear: none !important;
position: relative !important;
margin-bottom: 18px;
padding: 14px 16px !important;
background: var(--bo-bg);
border: 1px solid var(--bo-line);
border-radius: var(--bo-radius);
overflow: hidden;
box-sizing: border-box;
}
.bo-aff-stat__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
width: 100%;
}
.affiliation-progress label {
position: static !important;
float: none !important;
top: auto !important;
bottom: auto !important;
left: auto !important;
right: auto !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
font-family: var(--bo-font) !important;
font-size: 13px !important;
font-weight: 700 !important;
color: var(--bo-ink);
line-height: 1.2;
}
.affiliation-progress .progress {
position: static !important;
float: none !important;
clear: both !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: 8px !important;
border-radius: 999px;
background: #e5eeef;
overflow: hidden;
margin: 0 !important;
box-shadow: none !important;
}
.affiliation-progress .progress-bar {
border-radius: 999px;
min-width: 0;
}
.affiliation-progress .result {
position: static !important;
float: none !important;
top: auto !important;
bottom: auto !important;
left: auto !important;
right: auto !important;
display: block !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
font-family: var(--bo-font) !important;
font-size: 22px !important;
font-weight: 700 !important;
line-height: 1.1 !important;
text-align: right !important;
color: var(--bo-teal-dark);
transform: none !important;
}
.affiliation-progress .result span,
.bo-aff-stat__caption {
display: block !important;
position: static !important;
float: none !important;
top: auto !important;
bottom: auto !important;
width: auto !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
font-family: var(--bo-font) !important;
font-size: 12px !important;
font-weight: 500 !important;
line-height: 1.3 !important;
text-align: left !important;
color: var(--bo-muted);
text-transform: none;
}
.bo-aff-stat__caption {
order: 3;
}
.affiliation-content .table {
border-collapse: separate;
border-spacing: 0;
border: 1px solid var(--bo-line);
border-radius: 12px;
overflow: hidden;
}
.affiliation-content .table > thead > tr > th {
background: var(--bo-title-bg) !important;
border-bottom: 1px solid var(--bo-line) !important;
color: var(--bo-ink);
font-size: 12px !important;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
padding: 12px 10px !important;
vertical-align: middle;
}
.affiliation-content .table > tbody > tr > td {
padding: 12px 10px !important;
border-top: 1px solid var(--bo-line) !important;
vertical-align: middle;
}
.affiliation-content .alert-warning {
border-radius: 12px;
border: 1px solid rgba(235, 90, 37, 0.25);
background: #fff7f2;
color: #5a3a2a;
}
@media (max-width: 991px) {
.affiliation-tableau-bord .metrics .metric,
.affiliation-tableau-bord .metrics .column {
width: calc(50% - 6px) !important;
}
.portfeuille .argent {
font-size: 36px !important;
}
.affiliation-nav-actions > li {
flex: 1 1 50%;
border-right: none;
border-bottom: 1px solid var(--bo-line);
}
.affiliation-nav.navbar-default .navbar-nav > li > a {
white-space: normal;
padding: 12px 8px !important;
font-size: 12px !important;
text-align: center;
}
.portfeuille {
padding: 22px 18px 28px !important;
border-radius: 16px !important;
}
.portfeuille .title {
font-size: 13px !important;
padding: 0 !important;
}
.portfeuille .sub-title {
font-size: 12px !important;
line-height: 1.4 !important;
padding: 0 !important;
}
.portfeuille .argent {
font-size: 32px !important;
padding: 0 !important;
padding-bottom: 0 !important;
word-break: break-word;
}
.retirer-agrent {
width: 100% !important;
max-width: none;
margin: 14px 0 0 !important;
top: 0 !important;
}
.retirer-agrent .t1-t2-holder {
position: static !important;
top: auto !important;
left: auto !important;
}
.retirer-agrent img {
display: none !important;
margin: 0 !important;
width: auto !important;
}
.affiliation-progress {
overflow: hidden;
}
.affiliation-progress label {
position: static !important;
bottom: auto !important;
font-size: 12px !important;
}
.affiliation-progress .progress {
width: 100% !important;
float: none !important;
}
.affiliation-progress .result {
width: auto !important;
float: none !important;
bottom: auto !important;
font-size: 20px !important;
text-align: right !important;
}
.affiliation-progress .result span,
.bo-aff-stat__caption {
width: auto !important;
top: auto !important;
font-size: 11px !important;
text-align: left !important;
}
}
@media (max-width: 767px) {
.affiliation-tableau-bord .metrics .metric,
.affiliation-tableau-bord .metrics .column {
width: calc(50% - 6px) !important;
}
.affiliation-tableau-bord .kTitle {
font-size: 11px !important;
padding: 10px 10px 0 !important;
}
.affiliation-tableau-bord .kValue,
.affiliation-tableau-bord .kValue.col-md-12 {
font-size: 20px !important;
padding: 6px 10px 12px !important;
}
.affiliation-content {
padding: 12px;
}
.bo-filters form,
.bo-filters-form {
grid-template-columns: 1fr;
padding: 10px;
}
.bo-filters .filter-category,
.bo-filters .show-product-item,
.bo-filters .sort-product {
grid-column: 1 / -1;
flex: 1 1 100%;
}
.bo-filters select,
.bo-filters .form-control {
height: 44px !important;
font-size: 14px !important;
}
.portfeuille .argent {
font-size: 28px !important;
}
}
.bo-aff-page {
width: 100%;
}
.bo-aff-intro {
margin: 0 0 14px;
color: var(--bo-muted);
line-height: 1.5;
}
.bo-aff-note {
margin-bottom: 16px !important;
}
.bo-aff-toolbar {
margin-bottom: 14px;
}
.bo-aff-filter {
max-width: 280px;
}
.bo-aff-filter label {
display: block;
margin-bottom: 6px;
font-size: 13px;
}
.bo-aff-filter .form-control {
border-radius: 10px;
height: 40px;
border-color: var(--bo-line);
}
.bo-aff-panel {
background: var(--bo-surface);
border: 1px solid var(--bo-line);
border-radius: var(--bo-radius);
box-shadow: 0 4px 16px rgba(14, 85, 88, 0.06);
overflow: hidden;
margin-top: 8px;
}
.bo-aff-panel__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px;
border-bottom: 1px solid var(--bo-line);
background: var(--bo-title-bg);
}
.bo-aff-panel__head h3 {
margin: 0;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--bo-ink);
}
.bo-aff-panel .table-responsive {
margin: 0;
padding: 8px 8px 12px;
}
.bo-aff-datatable {
width: 100% !important;
margin: 0 !important;
border: none !important;
}
.bo-aff-datatable thead th {
background: transparent !important;
border-bottom: 2px solid var(--bo-line) !important;
color: var(--bo-ink) !important;
font-size: 12px !important;
font-weight: 700 !important;
text-transform: uppercase;
letter-spacing: 0.03em;
padding: 12px 10px !important;
white-space: nowrap;
}
.bo-aff-datatable tbody td {
padding: 12px 10px !important;
border-top: 1px solid var(--bo-line) !important;
vertical-align: middle !important;
font-size: 13px;
}
.bo-aff-datatable tbody tr:hover {
background: #f7fbfb;
}
.dataTables_wrapper {
padding: 4px 8px 8px;
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
border: 1px solid var(--bo-line);
border-radius: 8px;
padding: 6px 10px;
height: 34px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
border-radius: 8px !important;
border: 1px solid transparent !important;
padding: 4px 10px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
background: var(--bo-teal) !important;
border-color: var(--bo-teal) !important;
color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
background: #f0fafa !important;
border-color: var(--bo-line) !important;
color: var(--bo-teal-dark) !important;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
font-size: 13px;
color: var(--bo-muted);
margin-bottom: 8px;
}
.bo-aff-lite-search {
padding: 12px 12px 0;
}
.bo-aff-lite-search .form-control {
max-width: 320px;
height: 38px;
border-radius: 10px;
border-color: var(--bo-line);
}
.bo-aff-paiement__top {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 16px;
align-items: stretch;
margin-bottom: 18px;
}
.bo-aff-paiement .portfeuille {
width: 100% !important;
max-width: none;
height: 100%;
box-sizing: border-box;
}
.bo-aff-paiement .rappel-affiliation-stats {
margin-top: 0 !important;
display: flex;
flex-direction: column;
gap: 12px;
}
.bo-aff-paiement .affiliation-progress {
margin-bottom: 0;
flex: 1;
clear: none !important;
}
.bo-aff-paiement .affiliation-progress .result {
text-align: right !important;
margin-top: 0 !important;
}
.bo-aff-paiement .affiliation-progress label {
margin: 0 !important;
}
.bo-aff-paiement .retirer-agrent {
position: relative !important;
top: 0 !important;
width: 100% !important;
max-width: none;
margin: 16px 0 0 !important;
}
.bo-aff-paiement .retirer-agrent a {
width: 100%;
box-sizing: border-box;
}
.bo-aff-paiement .retirer-agrent .t1-t2-holder {
position: static !important;
top: auto !important;
left: auto !important;
text-align: left;
}
.bo-aff-paiement .portfeuille .title,
.bo-aff-paiement .portfeuille .sub-title,
.bo-aff-paiement .portfeuille .argent {
padding: 0 !important;
}
.bo-aff-paiement .portfeuille .argent {
font-size: 40px !important;
word-break: break-word;
}
.bo-aff-paiement .bo-aff-panel {
margin-top: 4px;
}
.bo-aff-paiement .bo-aff-note {
font-size: 13px;
line-height: 1.45;
padding: 12px 14px;
}
@media (max-width: 991px) {
.bo-aff-paiement__top {
grid-template-columns: 1fr;
gap: 12px;
margin-bottom: 14px;
}
.affiliation-content {
padding: 10px !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.bo-aff-paiement .portfeuille {
padding: 18px 16px 20px !important;
border-radius: 16px !important;
width: 100% !important;
}
.bo-aff-paiement .portfeuille .title {
font-size: 13px !important;
letter-spacing: 0.06em;
}
.bo-aff-paiement .portfeuille .sub-title {
font-size: 12px !important;
line-height: 1.4 !important;
}
.bo-aff-paiement .portfeuille .argent {
font-size: 32px !important;
margin: 14px 0 10px !important;
line-height: 1.15 !important;
padding-bottom: 0 !important;
}
.bo-aff-paiement .retirer-agrent {
margin-top: 12px !important;
}
.bo-aff-paiement .retirer-agrent a {
padding: 12px 14px;
gap: 10px;
}
.bo-aff-paiement .retirer-agrent a::after {
width: 38px;
height: 38px;
font-size: 16px;
border-radius: 10px;
}
.bo-aff-paiement .retirer-agrent img {
display: none !important;
}
.bo-aff-paiement .affiliation-progress {
padding: 12px 14px !important;
}
.bo-aff-paiement .affiliation-progress .result {
text-align: right !important;
}
}
@media (max-width: 767px) {
.affiliation-content .no-padding,
.bo-aff-paiement.col-md-12,
.bo-aff-page.col-md-12 {
padding-left: 0 !important;
padding-right: 0 !important;
}
.bo-aff-paiement .portfeuille .argent {
font-size: 28px !important;
}
.bo-aff-paiement .retirer-agrent .t1 {
font-size: 14px !important;
}
.bo-aff-paiement .retirer-agrent .t2 {
font-size: 11px !important;
}
.bo-aff-paiement .affiliation-progress label {
font-size: 12px !important;
}
.bo-aff-paiement .affiliation-progress .result {
font-size: 20px !important;
}
.bo-aff-paiement .bo-aff-stat__caption {
font-size: 11px !important;
}
.bo-aff-paiement .bo-aff-panel__head {
padding: 12px;
}
.bo-aff-paiement .bo-aff-panel .table-responsive {
padding: 4px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.bo-aff-paiement .bo-aff-datatable thead th,
.bo-aff-paiement .bo-aff-datatable tbody td {
padding: 10px 8px !important;
font-size: 12px !important;
white-space: nowrap;
}
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length {
float: none !important;
text-align: left !important;
width: 100%;
}
.dataTables_wrapper .dataTables_filter input {
width: 100%;
margin-left: 0 !important;
box-sizing: border-box;
}
.dataTables_wrapper .dataTables_paginate {
float: none !important;
text-align: center !important;
width: 100% !important;
padding: 8px 0 !important;
}
.dataTables_wrapper .dataTables_info {
float: none !important;
text-align: center;
width: 100%;
}
}
.bo-services-view #view-product-list .product-list.bo-services-posters,
.product-list.bo-services-posters {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
grid-auto-rows: 1fr;
align-items: stretch;
gap: 20px !important;
margin: 16px 0 28px !important;
padding: 0 !important;
list-style: none !important;
width: 100% !important;
max-width: 100% !important;
float: none !important;
clear: both !important;
}
.bo-services-view #view-product-list .product-list.bo-services-posters > li,
.product-list.bo-services-posters > li.bo-service-poster,
.product-list.bo-services-posters > li.product {
display: flex !important;
float: none !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
box-sizing: border-box !important;
}
.product-list.bo-services-posters > li.bo-service-poster .bo-service-poster__link {
display: flex;
flex-direction: column;
align-items: stretch;
flex: 1 1 auto;
width: 100%;
height: 100%;
text-decoration: none !important;
background: var(--bo-surface, #fff);
border: 1px solid var(--bo-line, #e5eeef);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 8px 22px rgba(14, 85, 88, 0.1);
transition: transform 0.18s ease, box-shadow 0.18s ease;
box-sizing: border-box;
}
.product-list.bo-services-posters > li.bo-service-poster .bo-service-poster__link:hover {
transform: translateY(-3px);
box-shadow: 0 14px 32px rgba(14, 85, 88, 0.16);
}
.bo-service-poster__media {
flex: 0 0 auto;
width: 100% !important;
max-width: none !important;
min-width: 0;
aspect-ratio: 1 / 1;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
align-self: stretch;
position: relative;
padding: 0;
margin: 0;
box-sizing: border-box;
background: #e8f2f2;
overflow: hidden;
}
.bo-service-poster__media img,
.bo-service-poster__media img.img-responsive,
.product-list.bo-services-posters .bo-service-poster__media img {
position: absolute !important;
inset: 0 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
min-width: 0 !important;
min-height: 0 !important;
object-fit: cover !important;
object-position: center center !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
transform: scale(1.02) !important;
transition: transform 0.35s ease;
}
.product-list.bo-services-posters > li.bo-service-poster .bo-service-poster__link:hover .bo-service-poster__media img {
transform: scale(1.06) !important;
}
.bo-service-poster__body {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 8px;
padding: 14px 16px 16px;
min-width: 0;
min-height: 132px;
box-sizing: border-box;
}
.bo-service-poster__title {
margin: 0 !important;
padding: 0 !important;
font-family: var(--bo-font, inherit);
font-size: 16px !important;
font-weight: 700 !important;
line-height: 1.35 !important;
color: var(--bo-ink, #1a2b2c) !important;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.bo-service-poster__excerpt {
margin: 0;
font-size: 13px;
line-height: 1.4;
color: var(--bo-muted, #6b7c7d);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.bo-service-poster__price {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 8px;
margin-top: 2px;
}
.bo-service-poster__price .product-price {
font-size: 16px !important;
font-weight: 800 !important;
color: var(--bo-teal, #1b8c8f) !important;
}
.bo-service-poster__price .old-price {
font-size: 13px !important;
color: #9aa7a8 !important;
text-decoration: line-through;
}
.bo-service-poster__cta {
display: inline-flex;
align-items: center;
justify-content: center;
align-self: flex-start;
margin-top: auto;
padding: 9px 16px;
border-radius: 8px;
background: var(--bo-orange, #EB5A25);
color: #fff !important;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1.2;
box-shadow: 0 4px 10px rgba(235, 90, 37, 0.28);
}
.product-list.bo-services-posters > li.bo-service-poster .bo-service-poster__link:hover .bo-service-poster__cta {
background: var(--bo-orange-dark, #d14a1a);
}
@media (max-width: 767px) {
.bo-services-view #view-product-list .product-list.bo-services-posters,
.product-list.bo-services-posters,
.product-list.bo-services-posters.row {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
.bo-filters .show-product-item,
.bo-filters .sort-product {
flex: 1 1 100%;
width: 100% !important;
max-width: none;
}
.bo-service-poster__body {
padding: 14px 14px 16px;
min-height: 0;
}
.bo-service-poster__title {
font-size: 15px !important;
}
}
#product .product-options,
#options-popup .product-options,
.sous-options .product-options {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 8px;
margin: 8px 0 12px;
float: none !important;
clear: both;
}
#product .product-options::after,
#options-popup .product-options::after,
.sous-options .clearfix {
display: none !important;
}
#product .product-option,
#options-popup .product-option {
float: none !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box;
transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
#product .product-option:not(.sous-option) img,
#options-popup .product-option:not(.sous-option) img,
#product .product-option.have-image img,
#options-popup .product-option.have-image img {
width: 64px !important;
height: 64px !important;
border-radius: 12px !important;
border: 2px solid var(--bo-line, #e5eeef) !important;
object-fit: cover !important;
display: block;
box-shadow: 0 2px 8px rgba(14, 85, 88, 0.08);
}
#product .product-option.active:not(.sous-option) img,
#options-popup .product-option.active:not(.sous-option) img,
#product .product-option.active.have-image img,
#options-popup .product-option.active.have-image img,
#product .product-option:not(.sous-option):hover img,
#options-popup .product-option:not(.sous-option):hover img {
border-color: var(--bo-teal, #1b8c8f) !important;
box-shadow: 0 4px 14px rgba(27, 140, 143, 0.28);
transform: scale(1.04);
}
#product .product-option.sous-option:not(.have-image),
#options-popup .product-option.sous-option:not(.have-image),
.sous-options .product-option.sous-option:not(.have-image) {
display: inline-flex !important;
align-items: center;
justify-content: center;
flex: 0 1 auto;
min-height: 40px;
padding: 8px 14px !important;
border-radius: 999px !important;
border: 1.5px solid var(--bo-line, #e5eeef) !important;
background: #fff !important;
box-shadow: none !important;
text-align: center;
}
#product .product-option.sous-option:not(.have-image) span,
#options-popup .product-option.sous-option:not(.have-image) span,
.sous-options .product-option.sous-option:not(.have-image) span {
font-family: var(--bo-font, inherit);
font-size: 13px !important;
font-weight: 600 !important;
line-height: 1.25 !important;
color: var(--bo-ink, #0f1f20) !important;
white-space: normal;
}
#product .product-option.sous-option:not(.have-image):hover,
#options-popup .product-option.sous-option:not(.have-image):hover,
#product .product-option.sous-option:not(.have-image).active,
#options-popup .product-option.sous-option:not(.have-image).active,
.sous-options .product-option.sous-option:not(.have-image).active {
border-color: var(--bo-teal, #1b8c8f) !important;
background: rgba(27, 140, 143, 0.1) !important;
color: #0f1f20 !important;
font-weight: 700 !important;
box-shadow: 0 2px 10px rgba(27, 140, 143, 0.15) !important;
}
#product .product-option.sous-option:not(.have-image).active span,
#options-popup .product-option.sous-option:not(.have-image).active span,
.sous-options .product-option.sous-option:not(.have-image).active span {
color: #0f1f20 !important;
font-weight: 700 !important;
}
.sous-options {
margin: 4px 0 10px;
clear: both;
}
.sous-options > span {
font-size: 13px !important;
font-weight: 600;
color: var(--bo-muted, #5a6f70);
margin-bottom: 8px !important;
line-height: 1.3 !important;
}
#product .qty,
#options-popup .qty {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 10px;
margin: 10px 0 12px;
font-size: 13px;
font-weight: 600;
color: var(--bo-ink, #0f1f20);
}
#product .qty .fa,
#options-popup .qty .fa {
font-size: 22px !important;
color: var(--bo-teal, #1b8c8f);
vertical-align: middle;
}
#product .qty .service-qty,
#options-popup .qty .service-qty {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
font-size: 15px !important;
font-weight: 700;
padding: 0 4px !important;
}
#product .produit-texte-deplacement,
#options-popup .produit-texte-deplacement {
font-size: 12.5px;
line-height: 1.45;
color: var(--bo-muted, #5a6f70);
margin: 8px 0 12px;
}
#options-popup .btn-add-service,
#product .btn-add-service {
border-radius: 12px !important;
font-weight: 700 !important;
letter-spacing: 0.02em;
}
@media (min-width: 1200px) {
#product .product-option:not(.sous-option) img,
#product .product-option.have-image img {
width: 68px !important;
height: 68px !important;
}
#product .product-option.sous-option:not(.have-image) {
flex: 0 1 auto;
min-height: 38px;
padding: 8px 16px !important;
}
}
@media (max-width: 575px) {
#options-popup .scroll {
padding-top: 4px;
}
#options-popup .product-options {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
gap: 8px;
padding-bottom: 4px;
margin: 6px 0 10px;
}
#options-popup .product-option:not(.sous-option) img,
#options-popup .product-option.have-image img {
width: 56px !important;
height: 56px !important;
border-radius: 10px !important;
flex-shrink: 0;
}
#options-popup .sous-options .product-options {
flex-wrap: wrap;
overflow: visible;
}
#options-popup .product-option.sous-option:not(.have-image),
#options-popup .sous-options .product-option.sous-option:not(.have-image) {
flex: 1 1 100%;
width: 100%;
min-height: 40px;
padding: 10px 12px !important;
border-radius: 12px !important;
}
#options-popup .product-option.sous-option:not(.have-image) span {
font-size: 13px !important;
}
#options-popup .qty {
margin: 8px 0 10px;
}
#options-popup .produit-texte-deplacement {
font-size: 12px;
margin: 6px 0 10px;
}
#options-popup .btn-add-service {
margin-top: 4px;
}
}
.bo-cat-footer {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px 20px;
margin: 18px 0 8px;
padding: 14px 16px;
background: var(--bo-surface);
border: 1px solid var(--bo-line);
border-radius: var(--bo-radius);
box-shadow: var(--bo-shadow);
}
.bo-cat-footer__meta {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
font-family: var(--bo-font);
font-size: 14px;
color: var(--bo-muted);
}
.bo-cat-footer__count strong {
color: var(--bo-teal);
font-weight: 700;
font-size: 16px;
}
.bo-cat-footer__pages {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 999px;
background: var(--bo-title-bg);
color: var(--bo-teal-dark);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.02em;
}
.bo-pagination-bar {
margin: 0 !important;
padding: 0 !important;
float: none !important;
width: auto !important;
}
.bo-pagination-bar .bottom-pagination {
float: none !important;
text-align: inherit !important;
}
#center_column.box-shadow {
padding-bottom: 28px !important;
}
#center_column h1.page-heading,
#center_column h2.page-heading {
display: block !important;
width: auto !important;
max-width: none !important;
height: auto !important;
min-height: 0 !important;
margin: 10px 10px 14px !important;
padding: 16px 18px !important;
border: none !important;
border-bottom: none !important;
border-radius: 14px !important;
background: linear-gradient(135deg, var(--bo-teal, #1b8c8f) 0%, var(--bo-teal-dark, #167275) 100%);
color: #fff !important;
box-shadow: 0 6px 18px rgba(27, 140, 143, 0.22);
text-align: center !important;
line-height: 1.25 !important;
font-family: var(--bo-font, "Open Sans", system-ui, sans-serif) !important;
font-size: 20px !important;
font-weight: 700 !important;
letter-spacing: 0.01em;
overflow: visible !important;
position: relative !important;
}
#center_column h1.page-heading .page-heading-title,
#center_column h1.page-heading .page-heading-title2,
#center_column h2.page-heading .page-heading-title,
#center_column h2.page-heading .page-heading-title2 {
display: block !important;
position: static !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
border-bottom: none !important;
background: transparent !important;
color: #fff !important;
font: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
text-align: center !important;
text-transform: none !important;
}
@media (min-width: 768px) {
#center_column h1.page-heading,
#center_column h2.page-heading {
margin: 14px 14px 18px !important;
padding: 18px 22px !important;
border-radius: 16px !important;
font-size: 24px !important;
}
}
@media (min-width: 1200px) {
#center_column h1.page-heading,
#center_column h2.page-heading {
margin: 16px 16px 20px !important;
padding: 20px 24px !important;
font-size: 26px !important;
}
}
#view-product-list,
.view-product-list {
margin-bottom: 8px;
}
#view-product-list + .sortPagiBar,
.view-product-list + .sortPagiBar,
#view-product-list + .bo-cat-footer,
.view-product-list + .bo-cat-footer,
.sortPagiBar:has(.bottom-pagination),
.bo-cat-footer {
clear: both !important;
overflow: hidden;
margin-top: 24px !important;
margin-bottom: 4px !important;
}
.sortPagiBar .bottom-pagination {
clear: both;
}
.sortPagiBar .bottom-pagination .pagination,
.bottom-pagination .pagination,
.pagination.bo-pagination {
display: flex !important;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
border-radius: 0 !important;
}
.sortPagiBar .bottom-pagination .pagination > li,
.bottom-pagination .pagination > li,
.pagination.bo-pagination > li {
display: inline-flex !important;
margin: 0 !important;
float: none !important;
}
.sortPagiBar .bottom-pagination .pagination > li > a,
.sortPagiBar .bottom-pagination .pagination > li > span,
.bottom-pagination .pagination > li > a,
.bottom-pagination .pagination > li > span,
.pagination.bo-pagination > li > a,
.pagination.bo-pagination > li > span {
display: inline-flex !important;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 12px !important;
margin: 0 !important;
float: none !important;
border: 1px solid var(--bo-line) !important;
border-radius: 10px !important;
background: var(--bo-surface) !important;
color: var(--bo-ink) !important;
font-family: var(--bo-font);
font-size: 14px !important;
font-weight: 600;
line-height: 1 !important;
text-decoration: none !important;
box-shadow: none !important;
transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.sortPagiBar .bottom-pagination .pagination > li:first-child > a,
.sortPagiBar .bottom-pagination .pagination > li:first-child > span,
.sortPagiBar .bottom-pagination .pagination > li:last-child > a,
.sortPagiBar .bottom-pagination .pagination > li:last-child > span,
.bottom-pagination .pagination > li:first-child > a,
.bottom-pagination .pagination > li:first-child > span,
.bottom-pagination .pagination > li:last-child > a,
.bottom-pagination .pagination > li:last-child > span,
.pagination.bo-pagination > li:first-child > a,
.pagination.bo-pagination > li:first-child > span,
.pagination.bo-pagination > li:last-child > a,
.pagination.bo-pagination > li:last-child > span {
border-top-left-radius: 10px !important;
border-top-right-radius: 10px !important;
border-bottom-left-radius: 10px !important;
border-bottom-right-radius: 10px !important;
margin-left: 0 !important;
}
.sortPagiBar .bottom-pagination .pagination > li > a:hover,
.bottom-pagination .pagination > li > a:hover,
.pagination.bo-pagination > li > a:hover {
border-color: var(--bo-teal) !important;
color: var(--bo-teal) !important;
background: var(--bo-title-bg) !important;
transform: translateY(-1px);
}
.sortPagiBar .bottom-pagination .pagination > li.active > a,
.sortPagiBar .bottom-pagination .pagination > li.active > a:hover,
.bottom-pagination .pagination > li.active > a,
.bottom-pagination .pagination > li.active > a:hover,
.pagination.bo-pagination > li.active > a,
.pagination.bo-pagination > li.active > a:hover {
background: var(--bo-teal) !important;
border-color: var(--bo-teal) !important;
color: #fff !important;
transform: none;
cursor: default;
}
html.arabic .bo-cat-footer {
flex-direction: row-reverse;
}
html.arabic .bo-cat-footer__meta {
flex-direction: row-reverse;
}
html.arabic .sortPagiBar .bottom-pagination .pagination,
html.arabic .bottom-pagination .pagination,
html.arabic .pagination.bo-pagination {
flex-direction: row;
}
@media (max-width: 1199px) {
#center_column.box-shadow {
padding-bottom: 40px !important;
}
#view-product-list,
.view-product-list {
margin-bottom: 16px;
padding-bottom: 8px;
}
#view-product-list + .sortPagiBar,
.view-product-list + .sortPagiBar,
#view-product-list + .bo-cat-footer,
.view-product-list + .bo-cat-footer,
.sortPagiBar:has(.bottom-pagination),
.bo-cat-footer {
margin-top: 28px !important;
}
.sortPagiBar .bottom-pagination {
float: none !important;
width: 100%;
margin-top: 10px !important;
margin-left: 0 !important;
margin-right: 0 !important;
text-align: center;
}
.sortPagiBar .bottom-pagination .pagination,
.bottom-pagination .pagination,
.pagination.bo-pagination {
justify-content: center;
}
}
@media (max-width: 767px) {
#center_column.box-shadow {
padding-bottom: 44px !important;
}
.bo-cat-footer {
flex-direction: column;
align-items: stretch;
padding: 12px;
margin-top: 32px !important;
}
#view-product-list + .sortPagiBar,
.view-product-list + .sortPagiBar,
.sortPagiBar:has(.bottom-pagination) {
margin-top: 32px !important;
}
}
.main-header .header-link.header-sign-in,
.main-header .header-link.header-liste-envie,
.main-header .header-link.header-cart,
#header .header-link.header-sign-in,
#header .header-link.header-liste-envie,
#header .header-link.header-cart {
transition: transform 0.18s ease;
}
.main-header .header-link > a,
#header .header-link > a {
display: flex;
align-items: center;
gap: 8px;
text-decoration: none;
color: var(--bo-ink);
transition: color 0.18s ease;
}
.main-header .header-link > a:hover,
#header .header-link > a:hover {
color: var(--bo-teal);
}
.main-header .header-link > a i,
#header .header-link > a i {
float: none !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
margin: 0 !important;
top: 0 !important;
font-size: 18px !important;
line-height: 1 !important;
border-radius: 50%;
background: var(--bo-title-bg);
color: var(--bo-teal-dark);
box-shadow: 0 2px 8px rgba(14, 85, 88, 0.08), inset 0 0 0 1px var(--bo-line);
transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.main-header .header-link > a:hover i,
#header .header-link > a:hover i {
background: var(--bo-teal);
color: #fff;
box-shadow: 0 8px 18px rgba(27, 140, 143, 0.32);
transform: translateY(-2px) scale(1.06);
}
.main-header .header-link .text,
#header .header-link .text {
font-family: var(--bo-font);
font-size: 12px;
line-height: 1.25;
color: var(--bo-muted);
}
.main-header .header-link .text strong,
#header .header-link .text strong {
color: var(--bo-ink);
font-weight: 700;
}
.main-header .header-link > a:hover .text,
.main-header .header-link > a:hover .text strong,
#header .header-link > a:hover .text,
#header .header-link > a:hover .text strong {
color: var(--bo-teal);
}
#header .header-cart,
.main-header .header-cart {
position: relative;
}
#header span.number-of-cart-items,
.main-header span.number-of-cart-items,
span.number-of-cart-items {
display: inline-flex !important;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 5px;
left: 28px !important;
top: -2px !important;
font-size: 11px;
font-weight: 700;
line-height: 1;
border-radius: 999px !important;
background: var(--bo-orange) !important;
color: #fff !important;
box-shadow: 0 2px 8px rgba(235, 90, 37, 0.35);
border: 2px solid #fff;
transition: transform 0.18s ease, background 0.18s ease;
z-index: 2;
}
#header .header-cart > a:hover span.number-of-cart-items,
.main-header .header-cart > a:hover span.number-of-cart-items {
transform: scale(1.12);
background: var(--bo-orange-dark) !important;
color: #fff !important;
border-color: #fff;
animation: boCartBadgePulse 0.45s ease;
}
@keyframes boCartBadgePulse {
0% { transform: scale(1); }
40% { transform: scale(1.18); }
100% { transform: scale(1.12); }
}
#header .header-sign-in,
.main-header .header-sign-in {
position: relative;
}
#header .header-sign-in .dropdown-menu.mega_dropdown,
.main-header .header-sign-in .dropdown-menu.mega_dropdown {
margin-top: 0 !important;
top: calc(100% - 2px) !important;
padding: 8px !important;
min-width: 200px;
border: 1px solid var(--bo-line) !important;
border-radius: var(--bo-radius) !important;
background: var(--bo-surface) !important;
box-shadow: var(--bo-shadow) !important;
overflow: visible !important;
animation: boHeaderDropIn 0.18s ease;
}
#header .header-sign-in .dropdown-menu.mega_dropdown::before,
.main-header .header-sign-in .dropdown-menu.mega_dropdown::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: -12px;
height: 12px;
background: transparent;
}
@keyframes boHeaderDropIn {
from {
opacity: 0;
transform: translateY(-6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
#header .header-sign-in .mega_dropdown > li > a,
.main-header .header-sign-in .mega_dropdown > li > a {
display: block;
padding: 10px 12px !important;
margin: 2px 0;
border-radius: 8px;
color: var(--bo-ink) !important;
font-family: var(--bo-font);
font-size: 13px !important;
font-weight: 500;
transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
#header .header-sign-in .mega_dropdown > li > a:hover,
.main-header .header-sign-in .mega_dropdown > li > a:hover {
background: var(--bo-title-bg) !important;
color: var(--bo-teal) !important;
transform: translateX(3px);
}
html.arabic #header .header-sign-in .mega_dropdown > li > a:hover,
html.arabic .main-header .header-sign-in .mega_dropdown > li > a:hover {
transform: translateX(-3px);
}
#header .header-sign-in .mega_dropdown li.login-items {
border-bottom: 1px solid var(--bo-line) !important;
padding-bottom: 8px;
margin-bottom: 4px;
}
#header .header-sign-in .mega_dropdown .btn,
.main-header .header-sign-in .mega_dropdown .btn {
border-radius: 10px !important;
font-weight: 600;
}
html.arabic .main-header .header-link > a i,
html.arabic #header .header-link > a i {
margin: 0 !important;
}
html.arabic #header span.number-of-cart-items,
html.arabic .main-header span.number-of-cart-items {
left: auto !important;
right: 28px !important;
}
@media (max-width: 1199px) {
.main-header .header-link > a i,
#header .header-link > a i {
width: 38px;
height: 38px;
font-size: 16px !important;
}
#header span.number-of-cart-items,
.main-header span.number-of-cart-items {
left: 24px !important;
}
html.arabic #header span.number-of-cart-items,
html.arabic .main-header span.number-of-cart-items {
right: 24px !important;
left: auto !important;
}
}
#footer .social-link {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-top: 12px;
}
#footer .social-link > a {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
border-radius: 50%;
transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}
#footer .social-link > a:hover {
transform: translateY(-3px) scale(1.06);
box-shadow: 0 8px 18px rgba(14, 85, 88, 0.18);
opacity: 1;
}
#footer .social-link .iconfollowus {
width: 36px;
height: 36px;
display: block;
margin: 0;
}
@media (min-width: 992px) {
#footer {
position: relative;
margin-top: 48px;
padding: 40px 0 0;
background:
linear-gradient(180deg, rgba(27, 140, 143, 0.06) 0%, rgba(245, 248, 248, 0.95) 28%, #fff 100%);
border-top: 1px solid var(--bo-line);
overflow: hidden;
}
#footer::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--bo-teal) 0%, var(--bo-orange) 100%);
}
#footer .container {
position: relative;
z-index: 1;
}
#footer #introduce-box {
margin-top: 8px !important;
padding-bottom: 28px;
}
#footer .introduce-title {
font-family: var(--bo-font);
font-size: 13px !important;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--bo-ink);
margin-bottom: 14px !important;
padding-bottom: 8px;
border-bottom: none;
position: relative;
display: inline-block;
}
#footer .introduce-title::after {
content: "";
display: block;
width: 28px;
height: 3px;
margin-top: 8px;
border-radius: 2px;
background: var(--bo-teal);
transition: width 0.22s ease;
}
#footer .col-sm-4:hover .introduce-title::after,
#footer #contact-box:hover .introduce-title::after {
width: 48px;
}
#footer .introduce-list {
padding-left: 0 !important;
list-style: none !important;
margin: 0;
}
#footer .introduce-list li {
padding: 0 !important;
margin: 0 0 6px;
}
#footer .introduce-list li a {
display: inline-block;
padding: 4px 0;
font-family: var(--bo-font);
font-size: 13px;
color: var(--bo-muted);
text-decoration: none;
transition: color 0.15s ease, transform 0.15s ease;
}
#footer .introduce-list li a:hover {
color: var(--bo-teal);
transform: translateX(4px);
}
html.arabic #footer .introduce-list li a:hover {
transform: translateX(-4px);
}
#footer #address-box img {
max-width: 180px;
height: auto;
margin-bottom: 14px;
}
#footer #address-list {
font-family: var(--bo-font);
font-size: 13px;
line-height: 1.55;
color: var(--bo-muted);
}
#footer #address-list .tit-contain {
margin-bottom: 6px;
}
#footer #address-list .tit-contain strong {
color: var(--bo-ink);
font-weight: 700;
}
#footer #address-list a {
color: var(--bo-teal);
font-weight: 600;
text-decoration: none;
transition: color 0.15s ease;
}
#footer #address-list a:hover {
color: var(--bo-orange);
}
#footer #contact-box small {
display: block;
font-family: var(--bo-font);
font-size: 12px;
line-height: 1.45;
color: var(--bo-muted);
margin-bottom: 12px;
}
#footer #mail-box {
display: flex !important;
align-items: stretch;
gap: 0;
margin-top: 4px !important;
margin-bottom: 8px !important;
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--bo-line);
background: var(--bo-surface);
box-shadow: 0 4px 14px rgba(14, 85, 88, 0.06);
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
#footer #mail-box:focus-within {
border-color: var(--bo-teal);
box-shadow: 0 6px 18px rgba(27, 140, 143, 0.12);
}
#footer #mail-box input {
flex: 1;
height: 42px !important;
border: none !important;
border-radius: 0 !important;
background: transparent !important;
padding: 0 14px !important;
font-family: var(--bo-font);
font-size: 13px;
color: var(--bo-ink);
box-shadow: none !important;
}
#footer #mail-box .input-group-btn {
border-radius: 0 !important;
width: auto;
}
#footer #mail-box .btn,
#footer #mail-box .btn.btn-primary {
height: 42px !important;
padding: 0 18px !important;
border: none !important;
border-radius: 0 !important;
background: var(--bo-teal) !important;
font-family: var(--bo-font);
font-weight: 700;
font-size: 13px;
letter-spacing: 0.02em;
transition: background 0.18s ease, transform 0.18s ease;
}
#footer #mail-box .btn:hover,
#footer #mail-box .btn.btn-primary:hover {
background: var(--bo-teal-dark) !important;
}
#footer #footer-menu-box {
margin-top: 8px;
padding: 16px 0 20px;
border-top: 1px solid var(--bo-line);
}
#footer #footer-menu-box p {
margin: 0;
font-family: var(--bo-font);
font-size: 12px;
color: var(--bo-muted);
letter-spacing: 0.02em;
}
}
#hot-categories {
padding: 24px 20px 12px !important;
border-radius: var(--bo-radius) !important;
}
#hot-categories .group-title-box {
margin-bottom: 24px !important;
}
#hot-categories .group-title-box h3 {
font-family: var(--bo-font);
font-size: 20px;
color: var(--bo-ink);
margin: 0;
}
#hot-categories .group-title-box h3 span {
display: inline-block;
position: relative;
padding-bottom: 8px;
border-bottom: none !important;
}
#hot-categories .group-title-box h3 span::after {
content: "";
display: block;
width: 40px;
height: 3px;
margin: 10px auto 0;
border-radius: 2px;
background: var(--bo-teal);
}
#hot-categories .cate-box {
padding-bottom: 24px !important;
transition: transform 0.22s ease;
}
#hot-categories .cate-box:hover {
transform: translateY(-3px);
}
#hot-categories .cate-box .cate-tit {
background: var(--bo-title-bg) !important;
border: 1px solid var(--bo-line);
border-radius: 12px !important;
box-shadow: 0 4px 14px rgba(14, 85, 88, 0.06);
overflow: hidden;
transition: box-shadow 0.22s ease, border-color 0.22s ease;
}
#hot-categories .cate-box:hover .cate-tit {
box-shadow: 0 10px 24px rgba(14, 85, 88, 0.14);
border-color: rgba(27, 140, 143, 0.25);
}
#hot-categories .cate-box .cate-tit .div-1 {
padding-left: 12px !important;
padding-right: 24px !important;
width: 48% !important;
}
#hot-categories .cate-box .cate-name {
font-family: var(--bo-font);
color: var(--bo-ink);
font-size: 15px !important;
}
#hot-categories .cate-box .cate-link {
display: inline-flex !important;
align-items: center;
margin-left: -4px;
padding: 5px 12px 5px 14px !important;
border-radius: 999px !important;
background: var(--bo-teal) !important;
box-shadow: 0 4px 12px rgba(27, 140, 143, 0.25);
transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}
#hot-categories .cate-box .cate-link:hover {
background: var(--bo-orange) !important;
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(235, 90, 37, 0.3);
}
#hot-categories .cate-link span {
font-family: var(--bo-font);
font-weight: 700;
letter-spacing: 0.04em;
background-position: right 0 top 50% !important;
transition: background-position 0.2s ease;
}
#hot-categories .cate-box .cate-link:hover span {
background-position: right -2px top 50% !important;
}
#hot-categories .cate-box .div-2 {
width: 52% !important;
overflow: hidden;
}
#hot-categories .cate-box .div-2 img {
transition: transform 0.35s ease;
}
#hot-categories .cate-box:hover .div-2 img {
transform: scale(1.06);
}
#hot-categories .cate-content {
padding-top: 12px !important;
}
#hot-categories .cate-content ul li a {
display: block;
padding: 4px 0;
font-family: var(--bo-font);
font-size: 13px;
color: var(--bo-muted);
text-decoration: none;
transition: color 0.15s ease, transform 0.15s ease;
}
#hot-categories .cate-content ul li a:hover {
color: var(--bo-teal);
transform: translateX(3px);
}
#hot-categories .cate-content ul li a:before {
color: var(--bo-teal);
transition: transform 0.15s ease;
}
#hot-categories .cate-content ul li a:hover:before {
transform: translateX(2px);
}
html.arabic #hot-categories .cate-content ul li a:hover {
transform: translateX(-3px);
}
#hot-categories .cate-tit .div-2 a[title]:hover::after,
#hot-categories .cate-tit .div-2 a[title]:hover::before {
display: none !important;
content: none !important;
}
.brand-showcase.marques {
margin-top: 36px;
margin-bottom: 28px;
padding: 28px 24px 20px;
background: var(--bo-surface);
border: 1px solid var(--bo-line);
border-radius: var(--bo-radius);
box-shadow: var(--bo-shadow);
}
.brand-showcase .brand-showcase-title {
font-family: var(--bo-font) !important;
font-size: 18px !important;
font-weight: 700 !important;
color: var(--bo-ink) !important;
text-align: center;
letter-spacing: 0.06em;
margin-bottom: 20px !important;
position: relative;
padding-bottom: 12px;
border-bottom: none !important;
}
.brand-showcase .brand-showcase-title::after {
content: "";
display: block;
width: 44px;
height: 3px;
margin: 10px auto 0;
border-radius: 2px;
background: var(--bo-teal);
}
.brand-showcase-box {
position: relative;
padding-top: 0;
}
.brand-showcase-box .brand-showcase-logo {
background: var(--bo-bg) !important;
border-radius: 10px;
padding: 8px 4px !important;
position: relative;
margin-top: 36px;
overflow: visible;
}
.brand-showcase-box .brand-showcase-logo li.item {
border-radius: 8px !important;
transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.brand-showcase-box .brand-showcase-logo li.item:hover,
.brand-showcase-box .brand-showcase-logo li.item.active {
background: #fff !important;
box-shadow: 0 4px 14px rgba(14, 85, 88, 0.12);
transform: translateY(-1px);
}
.brand-showcase-box .brand-showcase-logo li.item.no-logo {
opacity: 0.55;
}
.brand-showcase-box .brand-showcase-logo .owl-controls .owl-prev,
.brand-showcase-box .brand-showcase-logo .owl-controls .owl-next {
background: var(--bo-teal) !important;
border-radius: 50% !important;
width: 32px !important;
height: 32px !important;
line-height: 32px !important;
top: -34px !important;
transform: none !important;
transition: background 0.18s ease, transform 0.18s ease;
}
.brand-showcase-box .brand-showcase-logo .owl-controls .owl-next {
right: 0 !important;
}
.brand-showcase-box .brand-showcase-logo .owl-controls .owl-prev {
left: auto !important;
right: 40px !important;
}
.brand-showcase-box .brand-showcase-logo .owl-controls .owl-prev:hover,
.brand-showcase-box .brand-showcase-logo .owl-controls .owl-next:hover {
background: var(--bo-teal-dark) !important;
transform: scale(1.06) !important;
}
.brand-showcase .trademark-info .trademark-link {
display: inline-flex !important;
align-items: center;
gap: 6px;
margin-top: 16px !important;
padding: 8px 16px !important;
border: none !important;
border-radius: 999px !important;
background: var(--bo-teal) !important;
color: #fff !important;
font-family: var(--bo-font);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.04em;
text-transform: uppercase;
float: none !important;
box-shadow: 0 4px 12px rgba(27, 140, 143, 0.25);
transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.brand-showcase .trademark-info .trademark-link:hover {
background: var(--bo-orange) !important;
color: #fff !important;
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(235, 90, 37, 0.3);
}
.brand-showcase .trademark-info .trademark-link:after {
color: #fff !important;
}
.brand-showcase .trademark-product .product-item {
padding: 12px;
border-radius: 12px;
border: 1px solid transparent;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.brand-showcase .trademark-product .product-item:hover {
transform: translateY(-3px);
border-color: var(--bo-line);
box-shadow: 0 10px 22px rgba(14, 85, 88, 0.12);
}
.brand-showcase .trademark-product .image-product {
position: relative;
}
.brand-showcase .bo-brand-badge {
position: absolute;
top: 6px;
left: 6px;
z-index: 3;
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 56px;
max-height: 28px;
padding: 3px 6px;
background: rgba(255, 255, 255, 0.95);
border: 1px solid var(--bo-line);
border-radius: 6px;
box-shadow: 0 2px 8px rgba(14, 85, 88, 0.1);
}
.brand-showcase .bo-brand-badge img,
.brand-showcase .bo-brand-badge .bo-brand-badge__img,
.brand-showcase .bo-brand-badge img.bo-brand-badge__img {
max-width: 44px;
max-height: 20px;
width: auto;
height: auto;
object-fit: contain;
display: block;
}
.brand-showcase .trademark-product .info-product .btn-view-more {
border-radius: 999px !important;
border: none !important;
background: var(--bo-orange) !important;
color: #fff !important;
font-weight: 700;
padding: 0 14px !important;
box-shadow: 0 4px 12px rgba(235, 90, 37, 0.28);
transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.brand-showcase .trademark-product .info-product .btn-view-more:hover {
background: var(--bo-orange-dark) !important;
color: #fff !important;
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(235, 90, 37, 0.35);
}
html.arabic .brand-showcase .bo-brand-badge {
left: auto;
right: 6px;
}
.empty-cart.bo-empty-cart {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
max-width: 560px;
margin: 32px auto !important;
padding: 48px 40px !important;
font-size: inherit !important;
background: var(--bo-surface) !important;
border: 1px solid var(--bo-line) !important;
border-radius: var(--bo-radius) !important;
box-shadow: var(--bo-shadow) !important;
animation: boEmptyCartIn 0.35s ease;
}
@keyframes boEmptyCartIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.bo-empty-cart__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 88px;
height: 88px;
margin-bottom: 8px;
border-radius: 50%;
background: var(--bo-title-bg);
color: var(--bo-teal);
font-size: 36px;
box-shadow: inset 0 0 0 1px var(--bo-line);
animation: boEmptyIconFloat 2.4s ease-in-out infinite;
}
@keyframes boEmptyIconFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
.bo-empty-cart__icon .fa {
line-height: 1;
}
.bo-empty-cart__title {
margin: 0 !important;
font-family: var(--bo-font);
font-size: 24px !important;
font-weight: 700 !important;
color: var(--bo-ink) !important;
text-transform: none !important;
line-height: 1.3 !important;
text-align: center !important;
}
.bo-empty-cart__text {
margin: 0 0 8px;
max-width: 360px;
font-family: var(--bo-font);
font-size: 14px;
line-height: 1.5;
color: var(--bo-muted);
text-align: center;
}
.bo-empty-cart__cta {
display: inline-flex !important;
align-items: center;
justify-content: center;
margin-top: 12px !important;
padding: 12px 28px !important;
width: auto !important;
border: none !important;
border-radius: 999px !important;
background: var(--bo-orange) !important;
color: #fff !important;
font-family: var(--bo-font);
font-size: 15px !important;
font-weight: 700;
text-decoration: none !important;
box-shadow: 0 6px 16px rgba(235, 90, 37, 0.3);
transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.bo-empty-cart__cta:hover,
.bo-empty-cart__cta:focus {
background: var(--bo-orange-dark) !important;
color: #fff !important;
transform: translateY(-2px);
box-shadow: 0 10px 22px rgba(235, 90, 37, 0.38);
text-decoration: none !important;
}
@media (max-width: 991px) {
.empty-cart.bo-empty-cart {
margin: 24px auto !important;
width: calc(100% - 24px);
max-width: 560px;
padding: 40px 28px !important;
box-sizing: border-box;
height: auto !important;
}
.bo-empty-cart__icon {
width: 80px;
height: 80px;
font-size: 32px;
}
.bo-empty-cart__title {
font-size: 22px !important;
}
}
@media (max-width: 575px) {
.empty-cart.bo-empty-cart {
margin: 16px auto !important;
width: calc(100% - 16px);
max-width: 560px;
padding: 32px 20px !important;
box-sizing: border-box;
height: auto !important;
}
.bo-empty-cart__icon {
width: 72px;
height: 72px;
font-size: 28px;
}
.bo-empty-cart__title {
font-size: 20px !important;
}
.bo-empty-cart__cta {
width: 100% !important;
max-width: 320px;
}
}
#builder.modal {
padding: 0 !important;
}
#builder .bo-builder-dialog {
width: auto !important;
max-width: 880px;
margin: 24px auto;
}
#builder .bo-builder {
border: none !important;
border-radius: 16px !important;
box-shadow: 0 16px 48px rgba(15, 31, 32, 0.18) !important;
overflow: hidden;
background: var(--bo-surface, #fff);
}
#builder .bo-builder__close {
position: absolute;
top: 12px;
right: 14px;
z-index: 5;
opacity: 1;
width: 36px;
height: 36px;
line-height: 32px;
text-align: center;
border-radius: 50%;
background: rgba(15, 31, 32, 0.06);
font-size: 22px;
font-weight: 400;
color: var(--bo-ink, #0f1f20);
}
#builder .bo-builder__close:hover {
background: rgba(27, 140, 143, 0.12);
color: var(--bo-teal-dark, #167275);
}
#builder .bo-builder__body.modal-body {
padding: 0 !important;
height: auto !important;
max-height: none !important;
overflow: hidden !important;
display: flex;
flex-direction: column;
}
#builder .bo-builder__scroll {
flex: 1 1 auto;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 28px 24px 16px;
max-height: min(78vh, 720px);
max-height: min(78dvh, 720px);
}
#builder .bo-builder__header {
margin: 0 0 20px;
padding-right: 40px;
}
#builder .bo-builder__grid {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 28px 32px;
align-items: start;
}
#builder .bo-builder__form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 16px;
align-items: start;
}
#builder .bo-builder__form > .bo-builder__field {
grid-column: 1 / -1;
}
#builder .bo-builder__form > .bo-builder__field:has(.col2),
#builder .bo-builder__form > .bo-builder__field:has(.colfin) {
grid-column: auto;
}
#builder .bo-builder__title {
text-align: left !important;
margin: 0 0 8px !important;
padding-right: 0;
font-family: var(--bo-font, inherit);
font-size: 22px !important;
font-weight: 700 !important;
line-height: 1.25;
color: var(--bo-ink, #0f1f20);
}
#builder .bo-builder__desc {
font-size: 13.5px;
line-height: 1.5;
color: var(--bo-muted, #5a6f70);
margin: 0;
}
#builder .bo-builder__field {
margin-bottom: 14px;
}
#builder .bo-builder__label {
display: block;
margin: 0 0 4px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--bo-muted, #5a6f70);
}
#builder .bo-builder__field-note {
margin: 4px 0 0;
padding-left: 0.9em;
text-indent: -0.9em;
font-size: 11px;
font-weight: 600;
color: #c62828;
line-height: 1.35;
}
#builder .bo-builder__form > .bo-builder__field--full {
grid-column: 1 / -1 !important;
}
#builder .bo-builder__field--full .form-control {
min-height: 52px !important;
height: auto !important;
}
#builder .bo-builder__recap .options {
font-weight: 700;
color: #0f1f20;
}
#builder .bo-builder__field .form-control,
#builder .bo-builder__form .form-control {
height: 44px !important;
margin-bottom: 0 !important;
padding: 10px 14px !important;
border: 1.5px solid var(--bo-line, rgba(15, 31, 32, 0.12)) !important;
border-radius: 12px !important;
box-shadow: none !important;
font-size: 15px;
color: var(--bo-ink, #0f1f20);
background: var(--bo-bg, #f5f8f8);
transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
#builder .bo-builder__field textarea.form-control {
height: auto !important;
min-height: 88px;
resize: vertical;
}
#builder .bo-builder__field .form-control:focus {
border-color: var(--bo-teal, #1b8c8f) !important;
background: #fff;
box-shadow: 0 0 0 3px rgba(27, 140, 143, 0.18) !important;
outline: none;
}
#builder .bo-builder__field .form-control.col2,
#builder .bo-builder__field .form-control.colfin {
width: 100%;
float: none;
margin-right: 0;
}
#builder .bo-builder__field--checks .checkbox {
margin: 0 0 8px;
padding: 10px 12px;
border: 1px solid var(--bo-line, rgba(15, 31, 32, 0.12));
border-radius: 10px;
background: var(--bo-bg, #f5f8f8);
}
#builder .bo-builder__field--checks .checkbox label {
font-weight: 600;
color: var(--bo-ink, #0f1f20);
padding-left: 0;
}
#builder .bo-builder__recap {
background: linear-gradient(165deg, rgba(27, 140, 143, 0.08) 0%, #fff 42%);
border: 1px solid var(--bo-line, rgba(15, 31, 32, 0.12));
border-radius: 14px;
padding: 18px 16px 16px;
}
#builder .bo-builder__image {
display: block;
width: 100%;
min-height: 220px;
max-height: 280px;
object-fit: contain;
margin: 0 0 14px !important;
border-radius: 12px;
background: #fff;
}
#builder .bo-builder__recap-row {
margin: 0 0 12px;
font-size: 14px;
line-height: 1.4;
color: var(--bo-ink, #0f1f20);
}
#builder .bo-builder__recap-label {
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--bo-muted, #5a6f70);
margin-bottom: 2px;
}
#builder .bo-builder__recap-row--fees:empty,
#builder .bo-builder__recap-row--fees:has(.frais_deplacement:empty) {
display: none;
}
#builder .bo-builder__total {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin-top: 8px;
padding-top: 14px;
border-top: 1px solid var(--bo-line, rgba(15, 31, 32, 0.12));
font-size: 15px;
font-weight: 700;
color: var(--bo-ink, #0f1f20);
}
#builder .bo-builder__total .total {
font-size: 26px !important;
font-weight: 800 !important;
color: var(--bo-teal, #1b8c8f) !important;
line-height: 1.1;
}
#builder .bo-builder__deplacement {
margin: 12px 0 0 !important;
font-size: 12.5px;
line-height: 1.45;
color: var(--bo-muted, #5a6f70);
}
#builder .bo-builder__cta {
flex: 0 0 auto;
padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
background: #fff;
border-top: 1px solid var(--bo-line, rgba(15, 31, 32, 0.12));
box-shadow: 0 -8px 24px rgba(15, 31, 32, 0.06);
}
#builder .bo-builder__submit {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 14px 18px !important;
min-height: 50px;
border: none !important;
border-radius: 12px !important;
background: var(--bo-orange, #EB5A25) !important;
color: #fff !important;
font-size: 16px !important;
font-weight: 700 !important;
letter-spacing: 0.02em;
box-shadow: 0 8px 20px rgba(235, 90, 37, 0.28);
transition: background 0.15s ease, transform 0.12s ease;
}
#builder .bo-builder__submit:hover,
#builder .bo-builder__submit:focus {
background: var(--bo-orange-dark, #d14a1a) !important;
color: #fff !important;
}
#builder .bo-builder__submit:active {
transform: scale(0.985);
}
#builder .bo-builder__submit[disabled] {
opacity: 0.75;
transform: none;
}
@media (max-width: 480px) {
#options-popup .btn-add-service,
#options-popup .btn-add-cart {
height: auto !important;
min-height: 48px;
padding-bottom: env(safe-area-inset-bottom, 0px) !important;
line-height: 44px !important;
box-sizing: content-box;
}
#options-popup .scroll {
padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px)) !important;
}
}
@media (max-width: 767px) {
#builder .modal-dialog.bo-builder-dialog {
width: 100% !important;
max-width: none;
margin: 0 !important;
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: auto;
}
#builder .bo-builder {
border-radius: 16px 16px 0 0 !important;
max-height: 92vh;
max-height: 92dvh;
display: flex;
flex-direction: column;
}
#builder .bo-builder__body.modal-body {
flex: 1 1 auto;
min-height: 0;
max-height: 92vh;
max-height: 92dvh;
}
#builder .bo-builder__scroll {
max-height: none;
padding: 22px 16px 12px;
}
#builder .bo-builder__header {
padding-right: 28px;
padding-left: 28px;
margin-bottom: 14px;
text-align: center;
}
#builder .bo-builder__title {
font-size: 19px !important;
text-align: center !important;
padding-right: 0 !important;
padding-left: 0 !important;
}
#builder .bo-builder__grid {
display: flex;
flex-direction: column;
gap: 18px;
}
#builder .bo-builder__image {
min-height: 200px;
max-height: min(260px, 38vh);
max-height: min(260px, 38dvh);
}
#builder .bo-builder__form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 12px;
order: 0;
}
#builder .bo-builder__form > input[type="hidden"] {
display: none !important;
}
#builder .bo-builder__form > .bo-builder__field {
grid-column: auto;
}
#builder .bo-builder__form > .bo-builder__field:has(.col2),
#builder .bo-builder__form > .bo-builder__field:has(.colfin) {
grid-column: auto;
}
#builder .bo-builder__form > .bo-builder__field--full {
grid-column: 1 / -1 !important;
}
#builder .bo-builder__form .form-control {
font-size: 14px;
padding: 10px 10px !important;
}
#builder .bo-builder__recap {
order: 1;
}
#builder .bo-builder__total .total {
font-size: 22px !important;
}
#builder .bo-builder__cta {
position: sticky;
bottom: 0;
z-index: 4;
}
#builder.fade .modal-dialog {
transform: translate3d(0, 100%, 0);
transition: transform 0.28s ease-out;
}
#builder.in .modal-dialog {
transform: translate3d(0, 0, 0);
}
}
html.arabic #builder .bo-builder__close {
right: auto;
left: 14px;
}
html.arabic #builder .bo-builder__header {
padding-right: 0;
padding-left: 40px;
}
html.arabic #builder .bo-builder__title {
padding-right: 0;
padding-left: 0;
}
html.arabic #builder .bo-builder__field--checks .checkbox label {
padding-right: 0;
}
.wsmenucontainer.bo-drawer {
--bo-drawer-w: min(92vw, 360px, calc(100vw - 56px));
font-family: var(--bo-font, "Open Sans", system-ui, sans-serif);
}
.wsmenucontainer.bo-drawer .overlapblackbg {
background-color: rgba(15, 31, 32, 0.45) !important;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.wsmenucontainer.bo-drawer .wsmain,
.wsmenucontainer.bo-drawer .bo-drawer__panel {
width: var(--bo-drawer-w) !important;
left: calc(-1 * var(--bo-drawer-w)) !important;
height: 100% !important;
height: 100dvh !important;
top: 0 !important;
margin: 0 !important;
float: none !important;
position: fixed !important;
z-index: 10050 !important;
background: linear-gradient(180deg, #f7fbfb 0%, #ffffff 28%) !important;
border: none !important;
border-radius: 0 16px 16px 0 !important;
box-shadow: 8px 0 32px rgba(15, 31, 32, 0.14) !important;
display: block !important;
-webkit-transition: left 0.28s ease-out !important;
transition: left 0.28s ease-out !important;
}
.wsmenucontainer.bo-drawer.wsoffcanvasopener {
margin-left: var(--bo-drawer-w) !important;
}
.wsmenucontainer.bo-drawer.wsoffcanvasopener .wsmain,
.wsmenucontainer.bo-drawer.wsoffcanvasopener .bo-drawer__panel {
left: 0 !important;
}
.wsmenucontainer.bo-drawer .wsmenu,
.wsmenucontainer.bo-drawer .bo-drawer__nav {
float: none !important;
width: 100% !important;
height: 100% !important;
overflow-x: hidden !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
border: none !important;
padding: 20px 0 calc(20px + env(safe-area-inset-bottom, 0px)) !important;
display: block !important;
}
.wsmenucontainer.bo-drawer .bo-drawer__list,
.wsmenucontainer.bo-drawer .wsmenu-list {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 8px 12px 0 !important;
text-align: left !important;
}
.wsmenucontainer.bo-drawer .bo-drawer__list > li,
.wsmenucontainer.bo-drawer .wsmenu-list > li {
float: none !important;
display: block !important;
width: 100% !important;
position: relative !important;
margin: 0 0 6px !important;
padding: 0 !important;
text-align: left !important;
border: none !important;
background: transparent !important;
}
.wsmenucontainer.bo-drawer .bo-drawer__search {
margin: 4px 0 14px !important;
padding-top: 8px !important;
}
.wsmenucontainer.bo-drawer .topmenusearch {
position: relative !important;
width: 100% !important;
margin: 0 !important;
float: none !important;
display: block !important;
}
.wsmenucontainer.bo-drawer .topmenusearch input {
width: 100% !important;
height: 44px !important;
margin: 0 !important;
padding: 10px 48px 10px 16px !important;
border: 1.5px solid var(--bo-line, rgba(15, 31, 32, 0.12)) !important;
border-radius: 999px !important;
background: #fff !important;
box-shadow: none !important;
font-size: 15px !important;
color: var(--bo-ink, #0f1f20) !important;
box-sizing: border-box !important;
}
.wsmenucontainer.bo-drawer .topmenusearch input:focus {
border-color: var(--bo-teal, #1b8c8f) !important;
box-shadow: 0 0 0 3px rgba(27, 140, 143, 0.16) !important;
outline: none !important;
}
.wsmenucontainer.bo-drawer .topmenusearch .btnstyle {
position: absolute !important;
right: 4px !important;
top: 4px !important;
width: 36px !important;
height: 36px !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
border-radius: 50% !important;
background: var(--bo-teal, #1b8c8f) !important;
color: #fff !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: none !important;
}
.wsmenucontainer.bo-drawer .topmenusearch .btnstyle .fa,
.wsmenucontainer.bo-drawer .topmenusearch .searchicon {
position: static !important;
float: none !important;
margin: 0 !important;
color: #fff !important;
font-size: 15px !important;
line-height: 1 !important;
}
.wsmenucontainer.bo-drawer .bo-drawer__link > a {
display: flex !important;
align-items: center !important;
gap: 12px !important;
width: 100% !important;
min-height: 46px !important;
margin: 0 !important;
padding: 10px 14px !important;
border: none !important;
border-radius: 12px !important;
background: transparent !important;
color: var(--bo-ink, #0f1f20) !important;
font-size: 15px !important;
font-weight: 600 !important;
line-height: 1.3 !important;
text-align: left !important;
text-decoration: none !important;
transition: background 0.15s ease, color 0.15s ease;
}
.wsmenucontainer.bo-drawer .bo-drawer__link > a:hover,
.wsmenucontainer.bo-drawer .bo-drawer__link > a:focus {
background: rgba(27, 140, 143, 0.08) !important;
color: var(--bo-teal-dark, #167275) !important;
}
.wsmenucontainer.bo-drawer .bo-drawer__link > a > .fa {
width: 22px !important;
text-align: center !important;
color: var(--bo-teal, #1b8c8f) !important;
font-size: 16px !important;
}
.wsmenucontainer.bo-drawer .bo-drawer__link > a .arrow {
display: none !important;
}
.wsmenucontainer.bo-drawer .bo-drawer__link > a .mobiletext {
display: inline !important;
}
.wsmenucontainer.bo-drawer .bo-drawer__section {
margin: 14px 0 8px !important;
}
.wsmenucontainer.bo-drawer a.menucategorie {
display: flex !important;
align-items: center !important;
gap: 10px !important;
width: 100% !important;
min-height: 44px !important;
margin: 0 !important;
padding: 10px 14px !important;
border: none !important;
border-radius: 12px !important;
background: linear-gradient(135deg, rgba(27, 140, 143, 0.14) 0%, rgba(27, 140, 143, 0.06) 100%) !important;
color: var(--bo-teal-dark, #167275) !important;
font-size: 13px !important;
font-weight: 800 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
text-decoration: none !important;
box-shadow: none !important;
}
.wsmenucontainer.bo-drawer a.menucategorie .fa {
color: var(--bo-teal, #1b8c8f) !important;
font-size: 15px !important;
}
.wsmenucontainer.bo-drawer a.menucategorie .mobiletext {
display: inline !important;
}
.wsmenucontainer.bo-drawer .bo-drawer__cat {
margin-bottom: 4px !important;
}
.wsmenucontainer.bo-drawer .bo-cat-row,
.wsmenucontainer.bo-drawer a.link-categorie {
display: flex !important;
align-items: center !important;
gap: 12px !important;
width: 100% !important;
min-height: 52px !important;
margin: 0 !important;
padding: 10px 48px 10px 10px !important;
border: 1px solid transparent !important;
border-radius: 12px !important;
background: #fff !important;
box-shadow: 0 1px 2px rgba(15, 31, 32, 0.04) !important;
color: var(--bo-ink, #0f1f20) !important;
font-size: 15px !important;
font-weight: 600 !important;
line-height: 1.25 !important;
text-align: left !important;
text-decoration: none !important;
position: relative !important;
transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.wsmenucontainer.bo-drawer .bo-cat-row:hover,
.wsmenucontainer.bo-drawer .bo-cat-row:focus,
.wsmenucontainer.bo-drawer a.link-categorie:hover {
background: rgba(27, 140, 143, 0.07) !important;
border-color: rgba(27, 140, 143, 0.2) !important;
color: var(--bo-teal-dark, #167275) !important;
box-shadow: 0 4px 14px rgba(27, 140, 143, 0.1) !important;
}
.wsmenucontainer.bo-drawer .bo-cat-row__icon {
flex: 0 0 36px;
width: 36px;
height: 36px;
border-radius: 10px;
background: var(--bo-bg, #f5f8f8);
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.wsmenucontainer.bo-drawer .bo-cat-row__icon .icon-menu,
.wsmenucontainer.bo-drawer .link-categorie .icon-menu {
position: static !important;
top: auto !important;
width: 22px !important;
height: 22px !important;
object-fit: contain !important;
display: block !important;
}
.wsmenucontainer.bo-drawer .bo-cat-row__icon--empty {
color: var(--bo-teal, #1b8c8f);
font-size: 14px;
}
.wsmenucontainer.bo-drawer .categorie-name,
.wsmenucontainer.bo-drawer .link-categorie .categorie-name {
padding: 0 !important;
flex: 1 1 auto;
min-width: 0;
}
.wsmenucontainer.bo-drawer .wsmenu-click,
.wsmenucontainer.bo-drawer .wsmenu-click02 {
border: none !important;
background: transparent !important;
width: 44px !important;
height: 100% !important;
min-height: 52px !important;
right: 2px !important;
top: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
z-index: 3 !important;
border-radius: 12px !important;
}
.wsmenucontainer.bo-drawer .wsmenu-click i,
.wsmenucontainer.bo-drawer .wsmenu-click02 i {
float: none !important;
margin: 0 !important;
width: 28px !important;
height: 28px !important;
line-height: 28px !important;
border-radius: 50% !important;
background: rgba(27, 140, 143, 0.1) !important;
color: var(--bo-teal, #1b8c8f) !important;
font-size: 14px !important;
text-align: center !important;
-webkit-transition: transform 0.2s ease, background 0.15s ease !important;
transition: transform 0.2s ease, background 0.15s ease !important;
}
.wsmenucontainer.bo-drawer .wsmenu-click.ws-activearrow i,
.wsmenucontainer.bo-drawer .wsmenu-click02 .wsmenu-rotate {
background: var(--bo-teal, #1b8c8f) !important;
color: #fff !important;
-webkit-transform: rotate(180deg) !important;
transform: rotate(180deg) !important;
}
.wsmenucontainer.bo-drawer .wsmenu-click.ws-activearrow i {
top: 0 !important;
}
.wsmenucontainer.bo-drawer .wsmenu-submenu,
.wsmenucontainer.bo-drawer .wsmenu-submenu-sub {
position: static !important;
width: 100% !important;
margin: 4px 0 8px !important;
padding: 6px 0 6px 12px !important;
border: none !important;
border-left: 2px solid rgba(27, 140, 143, 0.2) !important;
border-radius: 0 10px 10px 0 !important;
background: rgba(27, 140, 143, 0.04) !important;
box-shadow: none !important;
float: none !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
}
.wsmenucontainer.bo-drawer .wsmenu-submenu > li,
.wsmenucontainer.bo-drawer .wsmenu-submenu-sub > li {
position: relative !important;
margin: 0 0 2px !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
}
.wsmenucontainer.bo-drawer .wsmenu-submenu > li > a,
.wsmenucontainer.bo-drawer .wsmenu-submenu-sub > li > a {
display: block !important;
padding: 10px 44px 10px 12px !important;
border: none !important;
border-radius: 8px !important;
background: transparent !important;
color: var(--bo-muted, #5a6f70) !important;
font-size: 14px !important;
font-weight: 600 !important;
text-align: left !important;
line-height: 1.3 !important;
}
.wsmenucontainer.bo-drawer .wsmenu-submenu > li > a:hover,
.wsmenucontainer.bo-drawer .wsmenu-submenu-sub > li > a:hover {
background: rgba(27, 140, 143, 0.1) !important;
color: var(--bo-teal-dark, #167275) !important;
}
.wsmenucontainer.bo-drawer .wsmenu-submenu .fa.fa-angle-right {
display: none !important;
}
.wsmenucontainer.bo-drawer .wsmenu-click02 {
min-height: 40px !important;
height: 40px !important;
}
.wsmenucontainer.bo-drawer .wsmenu-submenu > li > .wsmenu-click02 {
top: 0 !important;
}
.wsmenucontainer.bo-drawer .bo-drawer__list > li.bo-drawer__social,
.wsmenucontainer.bo-drawer .wsmenu-list > li.bo-drawer__social {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
width: 100% !important;
margin: 28px 0 10px !important;
padding: 20px 8px 12px !important;
border-top: 1px solid var(--bo-line, rgba(15, 31, 32, 0.1)) !important;
float: none !important;
}
.wsmenucontainer.bo-drawer .bo-drawer__social .iconfollowus {
display: block !important;
flex: 0 0 34px !important;
width: 34px !important;
height: 34px !important;
max-width: 34px !important;
margin: 0 !important;
padding: 0 !important;
left: auto !important;
top: auto !important;
position: static !important;
object-fit: contain !important;
font-size: 0 !important;
cursor: pointer;
transition: transform 0.15s ease;
}
.wsmenucontainer.bo-drawer .bo-drawer__social .iconfollowus:active {
transform: scale(0.92);
}
.wsmenucontainer.bo-drawer .animated-arrow {
position: fixed !important;
left: 15px !important;
top: 16px !important;
z-index: 10060 !important;
width: 28px !important;
height: 20px !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
display: block !important;
cursor: pointer !important;
-webkit-transition: left 0.28s ease-out !important;
transition: left 0.28s ease-out !important;
}
.wsmenucontainer.bo-drawer .animated-arrow span {
position: absolute !important;
display: block !important;
width: 22px !important;
height: 2px !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 1px !important;
background: var(--bo-teal, #1b8c8f) !important;
top: 9px !important;
left: 3px !important;
right: auto !important;
bottom: auto !important;
-webkit-transition: background 0.2s ease !important;
transition: background 0.2s ease !important;
}
.wsmenucontainer.bo-drawer .animated-arrow span:before,
.wsmenucontainer.bo-drawer .animated-arrow span:after {
content: "" !important;
position: absolute !important;
left: 0 !important;
width: 22px !important;
height: 2px !important;
border-radius: 1px !important;
background: var(--bo-teal, #1b8c8f) !important;
display: block !important;
-webkit-transition: transform 0.22s ease, top 0.22s ease, bottom 0.22s ease, background 0.2s ease !important;
transition: transform 0.22s ease, top 0.22s ease, bottom 0.22s ease, background 0.2s ease !important;
}
.wsmenucontainer.bo-drawer .animated-arrow span:before {
top: -7px !important;
bottom: auto !important;
transform: none !important;
}
.wsmenucontainer.bo-drawer .animated-arrow span:after {
bottom: -7px !important;
top: auto !important;
transform: none !important;
}
.wsmenucontainer.bo-drawer.wsoffcanvasopener .animated-arrow {
left: calc(var(--bo-drawer-w) + 10px) !important;
top: 14px !important;
width: 32px !important;
height: 32px !important;
border-radius: 50% !important;
background: #fff !important;
box-shadow: 0 4px 14px rgba(15, 31, 32, 0.18) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.wsmenucontainer.bo-drawer.wsoffcanvasopener .animated-arrow span {
position: relative !important;
top: auto !important;
left: auto !important;
width: 14px !important;
height: 2px !important;
background: transparent !important;
}
.wsmenucontainer.bo-drawer.wsoffcanvasopener .animated-arrow span:before,
.wsmenucontainer.bo-drawer.wsoffcanvasopener .animated-arrow span:after {
width: 14px !important;
height: 2px !important;
}
.wsmenucontainer.bo-drawer.wsoffcanvasopener .animated-arrow span:before {
top: 0 !important;
bottom: auto !important;
background: var(--bo-ink, #0f1f20) !important;
-webkit-transform: rotate(45deg) !important;
transform: rotate(45deg) !important;
}
.wsmenucontainer.bo-drawer.wsoffcanvasopener .animated-arrow span:after {
top: 0 !important;
bottom: auto !important;
background: var(--bo-ink, #0f1f20) !important;
-webkit-transform: rotate(-45deg) !important;
transform: rotate(-45deg) !important;
}
body.bo-drawer-open [id^="gb-widget"],
body.bo-drawer-open .gb-widget,
body.bo-drawer-open iframe[src*="getbutton"] {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
.wsmenucontainer.bo-drawer .bo-drawer__link .wsmenu-submenu > li > a .fa {
display: none !important;
}
html.arabic .wsmenucontainer.bo-drawer .bo-drawer__list,
html.arabic .wsmenucontainer.bo-drawer .wsmenu-list {
text-align: right !important;
}
html.arabic .wsmenucontainer.bo-drawer .bo-cat-row,
html.arabic .wsmenucontainer.bo-drawer a.link-categorie {
flex-direction: row-reverse;
text-align: right !important;
padding: 10px 10px 10px 48px !important;
}
html.arabic .wsmenucontainer.bo-drawer .bo-drawer__link > a,
html.arabic .wsmenucontainer.bo-drawer a.menucategorie {
flex-direction: row-reverse;
text-align: right !important;
}
html.arabic .wsmenucontainer.bo-drawer .wsmenu-click,
html.arabic .wsmenucontainer.bo-drawer .wsmenu-click02 {
right: auto !important;
left: 2px !important;
}
html.arabic .wsmenucontainer.bo-drawer .topmenusearch input {
padding: 10px 16px 10px 48px !important;
}
html.arabic .wsmenucontainer.bo-drawer .topmenusearch .btnstyle {
right: auto !important;
left: 4px !important;
}
html.arabic .wsmenucontainer.bo-drawer .wsmain,
html.arabic .wsmenucontainer.bo-drawer .bo-drawer__panel {
border-radius: 16px 0 0 16px !important;
box-shadow: -8px 0 32px rgba(15, 31, 32, 0.14) !important;
}
html.arabic .wsmenucontainer.bo-drawer .wsmenu-submenu,
html.arabic .wsmenucontainer.bo-drawer .wsmenu-submenu-sub {
border-left: none !important;
border-right: 2px solid rgba(27, 140, 143, 0.2) !important;
border-radius: 10px 0 0 10px !important;
padding: 6px 12px 6px 0 !important;
}
.bo-affiliation-copy,
.text-affiliation {
box-sizing: border-box;
max-width: 100%;
overflow-x: hidden;
overflow-wrap: break-word;
word-wrap: break-word;
text-align: left;
}
.bo-affiliation-copy img,
.bo-affiliation-copy table,
.bo-affiliation-copy iframe,
.bo-affiliation-copy video,
.text-affiliation img,
.text-affiliation table,
.text-affiliation iframe,
.text-affiliation video {
max-width: 100% !important;
height: auto !important;
}
.bo-affiliation-copy p,
.bo-affiliation-copy li,
.bo-affiliation-copy h1,
.bo-affiliation-copy h2,
.bo-affiliation-copy h3,
.bo-affiliation-copy h4,
.text-affiliation p,
.text-affiliation li,
.text-affiliation h1,
.text-affiliation h2,
.text-affiliation h3,
.text-affiliation h4 {
max-width: 100%;
overflow-wrap: break-word;
text-align: left !important;
text-align-last: left !important;
}
html.arabic .bo-affiliation-copy,
html.arabic .text-affiliation,
html.arabic .bo-affiliation-copy p,
html.arabic .bo-affiliation-copy li,
html.arabic .bo-affiliation-copy h1,
html.arabic .bo-affiliation-copy h2,
html.arabic .bo-affiliation-copy h3,
html.arabic .text-affiliation p,
html.arabic .text-affiliation li,
html.arabic .text-affiliation h1,
html.arabic .text-affiliation h2,
html.arabic .text-affiliation h3 {
text-align: right !important;
text-align-last: right !important;
}
.affiliation-top .affiliation-bg h1,
.affiliation-top .affiliation-bg .lead {
max-width: 100%;
padding-left: 16px;
padding-right: 16px;
overflow-wrap: break-word;
box-sizing: border-box;
}
a.devenir-affilie,
a.btn.devenir-affilie,
.devenir-affilie-2 a.btn,
.affiliation-top a.btn-success.devenir-affilie,
.affiliation-top a.btn-success.connect-btn,
.affiliation-bottom a.btn-success.devenir-affilie,
.affiliation-bottom a.btn-success.connect-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px;
min-height: 48px;
padding: 12px 28px !important;
border: none !important;
border-radius: 999px !important;
background: var(--bo-orange, #EB5A25) !important;
color: #fff !important;
font-family: var(--bo-font, "Open Sans", system-ui, sans-serif) !important;
font-size: 17px !important;
font-weight: 700 !important;
letter-spacing: 0.02em;
line-height: 1.2 !important;
text-decoration: none !important;
box-shadow: 0 8px 22px rgba(235, 90, 37, 0.32) !important;
transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease !important;
}
a.devenir-affilie:hover,
a.devenir-affilie:focus,
.devenir-affilie-2 a.btn:hover,
.affiliation-top a.btn-success.connect-btn:hover,
.affiliation-bottom a.btn-success.connect-btn:hover {
background: var(--bo-orange-dark, #d14a1a) !important;
color: #fff !important;
box-shadow: 0 10px 26px rgba(235, 90, 37, 0.4) !important;
transform: translateY(-1px);
}
a.devenir-affilie:active,
.devenir-affilie-2 a.btn:active {
transform: scale(0.98);
}
.affiliation-bottom.jumbotron {
height: auto !important;
min-height: 0 !important;
padding: 24px 12px 32px !important;
margin-top: 20px !important;
background-size: cover !important;
background-position: center !important;
overflow: visible !important;
}
.affiliation-bottom .title-1 {
width: calc(100% - 24px) !important;
max-width: 420px !important;
margin: 0 auto 16px !important;
padding: 12px 16px !important;
border-radius: 14px !important;
border: none !important;
background: rgba(255, 255, 255, 0.95) !important;
box-shadow: 0 8px 24px rgba(15, 31, 32, 0.12);
font-size: 18px !important;
line-height: 1.3 !important;
box-sizing: border-box !important;
}
.affiliation-bottom .title-1 span {
display: block;
font-size: 22px !important;
line-height: 1.25 !important;
}
.devenir-affilie-2 {
margin: 12px 0 8px !important;
}
.affiliation-bottom .bloc {
float: none !important;
width: 100% !important;
padding: 0 12px !important;
box-sizing: border-box;
}
.affiliation-bottom .bloc > div {
margin-top: 12px !important;
padding: 16px !important;
border-radius: 14px !important;
background: rgba(255, 255, 255, 0.96) !important;
opacity: 1 !important;
text-align: left !important;
text-align-last: left !important;
font-size: 15px !important;
line-height: 1.5 !important;
box-shadow: 0 6px 18px rgba(15, 31, 32, 0.1);
}
.affiliation-bottom .bloc > div > div,
.affiliation-bottom .bloc > div h2,
.affiliation-bottom .bloc > div strong {
text-align: left !important;
text-align-last: left !important;
font-size: 17px !important;
font-weight: 700 !important;
margin-bottom: 8px !important;
word-spacing: normal !important;
}
.affiliation-bottom .bloc > div,
.affiliation-bottom .bloc > div > div,
.affiliation-bottom .bloc > div p {
text-align: left !important;
text-align-last: left !important;
font-family: var(--bo-font, "Open Sans", system-ui, sans-serif) !important;
}
html.arabic .affiliation-bottom .bloc > div,
html.arabic .affiliation-bottom .bloc > div > div,
html.arabic .affiliation-bottom .bloc > div p {
text-align: right !important;
text-align-last: right !important;
}
@media (max-width: 767px) {
.affiliation-top.jumbotron {
max-width: 100%;
overflow: hidden;
box-sizing: border-box;
}
.bo-affiliation-copy,
.text-affiliation {
padding: 12px 16px 20px !important;
font-size: 16px !important;
line-height: 1.55 !important;
text-align: left !important;
}
.bo-affiliation-copy p,
.bo-affiliation-copy li,
.text-affiliation p,
.text-affiliation li {
font-size: inherit !important;
line-height: inherit !important;
text-align: left !important;
text-align-last: left !important;
}
.bo-affiliation-copy h1,
.bo-affiliation-copy h2,
.bo-affiliation-copy h3,
.text-affiliation h1,
.text-affiliation h2,
.text-affiliation h3 {
font-size: 1.2em !important;
line-height: 1.3 !important;
text-align: left !important;
}
.bo-affiliation-share {
padding: 8px 16px 24px !important;
box-sizing: border-box;
max-width: 100%;
}
.affiliation-bottom.jumbotron {
height: auto !important;
padding: 20px 10px 28px !important;
}
.affiliation-bottom .title-1 {
margin-top: 0 !important;
width: calc(100% - 20px) !important;
}
a.devenir-affilie,
.affiliation-top a.btn-success.connect-btn,
.affiliation-bottom a.btn-success.connect-btn {
width: calc(100% - 32px) !important;
max-width: 320px !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
@media (min-width: 768px) and (max-width: 1199px) and (orientation: portrait) {
.affiliation-top.jumbotron {
max-width: 100%;
overflow: hidden;
box-sizing: border-box;
}
.bo-affiliation-copy,
.text-affiliation {
padding: 16px 24px 24px !important;
font-size: 17px !important;
line-height: 1.55 !important;
text-align: left !important;
}
.bo-affiliation-share {
padding: 12px 24px 28px !important;
}
.affiliation-bottom.jumbotron {
height: auto !important;
padding: 28px 20px 36px !important;
}
.affiliation-bottom .bloc {
padding: 0 16px !important;
}
.affiliation-bottom .bloc > div {
font-size: 16px !important;
padding: 18px !important;
}
.affiliation-bottom .title-1 {
max-width: 480px !important;
margin-top: 0 !important;
}
}
@media (max-width: 1024px) {
#wh-widget-send-button,
#wh-widget-send-button-wrapper,
#wh-widget-send-button-iframe,
iframe[src*="getbutton"],
iframe[src*="widget-send-button"],
[id^="gb-widget"],
[id*="gb-widget"],
[class*="gb-widget"] {
transform: translateY(-72px) !important;
}
.grecaptcha-badge {
bottom: 72px !important;
}
}
.bo-grooming {
max-width: 100%;
}
.bo-grooming-kicker {
font-weight: 700;
color: var(--bo-teal-dark, #167275);
font-size: 16px;
margin-bottom: 8px !important;
}
.bo-grooming-nav {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 16px 0 20px !important;
}
.bo-grooming-nav a {
display: inline-block;
padding: 6px 12px;
border-radius: 999px;
background: #fff3e8;
color: var(--bo-orange-dark, #d14a1a) !important;
font-weight: 600;
font-size: 13px;
text-decoration: none !important;
}
.bo-grooming-nav a:hover {
background: var(--bo-orange, #EB5A25);
color: #fff !important;
}
.bo-grooming-card {
margin: 0 0 28px;
padding: 0 0 8px;
border-bottom: 1px solid var(--bo-line, rgba(15, 31, 32, 0.12));
scroll-margin-top: 88px;
}
.bo-grooming-card h3 {
margin: 8px 0 10px;
color: var(--bo-ink, #0f1f20);
font-size: 20px;
font-weight: 700;
}
.bo-grooming-card ul {
margin: 0 0 12px 18px !important;
padding: 0 !important;
}
.bo-grooming-card li {
margin: 0 0 6px;
line-height: 1.5;
}
.bo-grooming-card img {
width: 100% !important;
height: auto !important;
border-radius: 12px;
margin: 0 0 8px !important;
display: block;
}
.bo-grooming-warn {
color: #c0392b !important;
font-weight: 700;
margin: 0 0 8px !important;
}
.bo-grooming-note {
font-weight: 700;
color: var(--bo-teal-dark, #167275);
margin: 0 0 8px !important;
}
.bo-grooming-avis {
margin-top: 12px;
padding: 16px;
border: 1px solid #dadce0;
border-radius: 12px;
background: #fff;
scroll-margin-top: 88px;
}
.bo-grooming-avis-head {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 14px;
}
.bo-grooming-glogo {
width: 18px !important;
height: 18px !important;
flex: 0 0 18px;
display: block;
}
.bo-grooming-avis h3 {
margin: 0 !important;
font-size: 16px;
line-height: 1.2;
color: #202124;
}
.bo-grooming-avis-place {
margin: 2px 0 0 !important;
font-size: 13px;
color: #5f6368;
}
.bo-grooming-avis-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.bo-grooming-quote {
background: #fff;
border: 1px solid #dadce0;
border-radius: 8px;
padding: 14px 14px 16px;
margin: 0;
box-shadow: 0 1px 2px rgba(60, 64, 67, 0.12);
}
.bo-grooming-quote-top {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 6px !important;
}
.bo-grooming-quote-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 700;
font-size: 15px;
flex: 0 0 36px;
background: #1a73e8;
}
.bo-grooming-quote:nth-child(2) .bo-grooming-quote-avatar { background: #e37400; }
.bo-grooming-quote:nth-child(3) .bo-grooming-quote-avatar { background: #188038; }
.bo-grooming-quote:nth-child(4) .bo-grooming-quote-avatar { background: #9334e6; }
.bo-grooming-quote:nth-child(5) .bo-grooming-quote-avatar { background: #d93025; }
.bo-grooming-quote:nth-child(6) .bo-grooming-quote-avatar { background: #00897b; }
.bo-grooming-quote-name {
font-weight: 600;
margin: 0 !important;
color: #202124;
font-size: 14px;
}
.bo-grooming-quote-stars {
margin: 0 0 8px !important;
line-height: 1;
min-height: 16px;
padding-left: 46px;
}
.bo-grooming-quote-stars::before {
content: "\2605\2605\2605\2605\2605";
color: #fbbc04;
font-size: 13px;
letter-spacing: 1px;
}
.bo-grooming-quote blockquote {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
font-style: normal;
color: #3c4043;
font-size: 13px;
line-height: 1.5;
}
@media (max-width: 680px) {
.bo-grooming-avis-grid {
grid-template-columns: 1fr;
}
.bo-grooming-quote-stars {
padding-left: 0;
}
}
.product-page--blearning .bo-recommended,
.product-page--blearning #left_column,
.product-page--blearning .col-left-slide {
display: none !important;
}
.product-page--blearning #center_column {
width: 100% !important;
max-width: 100% !important;
float: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
#product.product-page--blearning {
max-width: 1120px;
margin: 0 auto;
padding: 1.5rem 1.25rem 2rem;
}
.columns-container:has(.product-page--blearning),
body:has(.product-page--blearning) {
background: linear-gradient(180deg, #e8f3f3 0%, #f3f8f8 40%, #f7fbfb 100%);
}
.product-page--blearning .white-bg > .container {
max-width: 1120px !important;
width: 100% !important;
margin: 0 auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.product-page--blearning .white-bg {
background: transparent !important;
}
#product.product-page--blearning .primary-box,
#product.product-page--blearning .bo-blearning-hero,
.product-page--blearning .primary-box,
.product-page--blearning .bo-blearning-hero {
display: grid !important;
grid-template-columns: 1.05fr 0.95fr;
gap: 2rem;
align-items: start;
width: 100%;
float: none !important;
overflow: visible !important;
}
#product.product-page--blearning .pb-right-column,
#product.product-page--blearning .produit-page-info {
line-height: 1.35 !important;
margin-top: 0 !important;
}
.product-page--blearning .produit-page-image,
.product-page--blearning .produit-page-info,
.product-page--blearning .pb-left-column,
.product-page--blearning .pb-right-column {
width: 100% !important;
float: none !important;
max-width: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.product-page--blearning .product-image {
width: 100%;
margin: 0;
}
.product-page--blearning .product-full,
.product-page--blearning .product-full-mobile,
.product-page--blearning .pb-left-column .product-image .product-full {
position: relative;
aspect-ratio: 1 / 1;
height: auto !important;
width: 100% !important;
padding: 0 !important;
overflow: hidden;
border-radius: 22px;
border: 1px solid rgba(15, 31, 32, 0.08);
background:
linear-gradient(145deg, rgba(27, 140, 143, 0.08), transparent 40%),
#fff;
box-shadow: 0 18px 50px rgba(14, 85, 88, 0.08);
}
.product-page--blearning .product-full img,
.product-page--blearning .product-full-mobile img,
.product-page--blearning #product-zoom,
#product.product-page--blearning .pb-left-column .product-image .product-full img {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
object-fit: contain !important;
object-position: center center !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
}
.product-page--blearning .produit-page-info .product-name,
.product-page--blearning .pb-right-column .product-name,
#product.product-page--blearning .pb-right-column .product-name,
#product.product-page--blearning .bo-bl-name,
#product.product-page--blearning .produit-page-info h1.bo-bl-name,
#product.product-page--blearning .produit-page-info h1.product-name.bo-bl-name {
font-family: "Fraunces", Georgia, serif !important;
font-size: clamp(2.4rem, 4.6vw, 3.35rem) !important;
font-weight: 700 !important;
line-height: 1.08 !important;
letter-spacing: -0.03em;
margin: 0 0 0.85rem !important;
color: #0e5558 !important;
}
.product-page--blearning .bo-bl-info {
padding-top: 0.35rem;
}
.product-page--blearning .bo-bl-eyebrow {
margin: 0 0 0.65rem;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #6b7f80;
}
#product.product-page--blearning .bo-bl-price,
.product-page--blearning .bo-bl-price {
font-size: clamp(1.85rem, 3.2vw, 2.35rem);
font-weight: 800;
color: #EB5A25 !important;
margin: 0 0 1.05rem;
letter-spacing: -0.02em;
}
#product.product-page--blearning .bo-bl-price-was,
.product-page--blearning .bo-bl-price-was {
display: inline-block;
margin-right: 0.55rem;
font-size: 1.05rem;
font-weight: 600;
color: #8a9a9b !important;
text-decoration: line-through;
}
#product.product-page--blearning .bo-bl-price-now,
.product-page--blearning .bo-bl-price-now {
color: #EB5A25 !important;
font-weight: 800;
}
#product.product-page--blearning .bo-bl-desc,
.product-page--blearning .bo-bl-desc {
color: #243536;
font-size: 1.05rem !important;
line-height: 1.55 !important;
margin: 0 0 1.35rem;
max-width: 100%;
font-weight: 500;
padding: 1.05rem 1.2rem 1.05rem 1.35rem;
border-radius: 18px;
background: rgba(255, 255, 255, 0.42);
border: 1px solid rgba(255, 255, 255, 0.72);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.65),
0 12px 32px rgba(14, 85, 88, 0.08);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
position: relative;
}
#product.product-page--blearning .bo-bl-desc::before,
.product-page--blearning .bo-bl-desc::before {
content: "";
position: absolute;
left: 0;
top: 12px;
bottom: 12px;
width: 3px;
border-radius: 3px;
background: #0e5558;
}
#product.product-page--blearning .bo-bl-desc p,
.product-page--blearning .bo-bl-desc p {
margin: 0;
padding: 0;
font-size: inherit;
line-height: inherit;
color: inherit;
}
#product.product-page--blearning .bo-bl-modules,
.product-page--blearning .bo-bl-modules {
list-style: none;
margin: 0.7rem 0 0;
padding: 0;
}
#product.product-page--blearning .bo-bl-modules li,
.product-page--blearning .bo-bl-modules li {
position: relative;
margin: 0;
padding: 0.32rem 0 0.32rem 1.15rem;
font-size: 0.95rem !important;
line-height: 1.4 !important;
font-weight: 600;
color: #243536;
}
#product.product-page--blearning .bo-bl-modules li::before,
.product-page--blearning .bo-bl-modules li::before {
content: "";
position: absolute;
left: 0;
top: 0.72em;
width: 6px;
height: 6px;
border-radius: 50%;
background: #EB5A25;
}
#product.product-page--blearning .bo-bl-actions,
.product-page--blearning .bo-bl-actions {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 0.85rem;
margin: 0 0 0.35rem;
}
#product.product-page--blearning .bo-bl-duration,
.product-page--blearning .bo-bl-duration {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.85rem;
margin: 0;
min-height: 76px;
padding: 0.95rem 1.55rem 0.95rem 1.05rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.78);
border: 1px solid rgba(14, 85, 88, 0.16);
color: #0e5558 !important;
font-size: 1.2rem !important;
font-weight: 700;
box-shadow: 0 12px 26px rgba(14, 85, 88, 0.12);
flex: 0 0 auto;
}
#product.product-page--blearning .bo-bl-duration-icon,
.product-page--blearning .bo-bl-duration-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3.2rem;
height: 3.2rem;
border-radius: 50%;
background: #EB5A25;
color: #fff;
font-size: 1.55rem !important;
transform-origin: 50% 50%;
animation: bo-bl-tick 1.6s ease-in-out infinite;
flex-shrink: 0;
}
#product.product-page--blearning .bo-bl-duration-icon i,
.product-page--blearning .bo-bl-duration-icon i {
font-size: 1.55rem !important;
line-height: 1;
color: #fff;
}
#product.product-page--blearning .bo-bl-duration-copy,
.product-page--blearning .bo-bl-duration-copy {
display: flex;
flex-direction: column;
align-items: flex-start;
line-height: 1.12;
gap: 0.1rem;
}
#product.product-page--blearning .bo-bl-duration-num,
.product-page--blearning .bo-bl-duration-num {
font-size: 1.7rem !important;
font-weight: 800;
letter-spacing: -0.03em;
color: #0e5558 !important;
}
#product.product-page--blearning .bo-bl-duration-sub,
.product-page--blearning .bo-bl-duration-sub {
font-size: 0.88rem !important;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #5d7374 !important;
}
@keyframes bo-bl-tick {
0%, 100% { transform: rotate(0deg) scale(1); }
25% { transform: rotate(-14deg) scale(1.06); }
55% { transform: rotate(10deg) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
.product-page--blearning .bo-bl-duration-icon {
animation: none;
}
}
#product.product-page--blearning a.bo-bl-cta,
.product-page--blearning .bo-bl-cta {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 1 1 240px;
min-width: 240px;
min-height: 76px;
padding: 1.05rem 1.85rem;
border-radius: 999px;
background: #EB5A25;
color: #fff !important;
font-size: 1.5rem !important;
line-height: 1.2 !important;
font-weight: 800 !important;
letter-spacing: 0.01em;
text-decoration: none !important;
text-transform: none !important;
box-shadow: 0 14px 30px rgba(235, 90, 37, 0.34);
}
#product.product-page--blearning a.bo-bl-cta:hover,
.product-page--blearning .bo-bl-cta:hover {
background: #d14a1a;
color: #fff !important;
}
#product.product-page--blearning a.bo-bl-cta-fixed,
.product-page--blearning .bo-bl-cta-fixed {
display: none !important;
}
.product-page--blearning .product-img-thumb {
display: none !important;
}
.product-page--blearning .nav-tab,
.product-page--blearning .product-tabs {
float: none !important;
border: none !important;
background: none !important;
margin: 0 0 0.85rem !important;
padding: 0 !important;
width: 100% !important;
}
.product-page--blearning .nav-tab li,
.product-page--blearning .product-tabs li {
float: none !important;
border: none !important;
background: none !important;
padding: 0 !important;
margin: 0 !important;
width: auto !important;
}
.product-page--blearning .bo-product-desc-label {
font-family: "Fraunces", Georgia, serif !important;
font-size: 1.35rem !important;
font-weight: 700 !important;
color: #0e5558 !important;
background: none !important;
border: none !important;
padding: 0 !important;
display: block;
}
.product-page--blearning .product-tab {
display: block !important;
visibility: visible !important;
overflow: visible !important;
height: auto !important;
max-height: none !important;
opacity: 1 !important;
background: transparent !important;
box-shadow: none !important;
border: none !important;
border-top: 1px solid rgba(15, 31, 32, 0.08) !important;
border-radius: 0 !important;
margin-top: 2rem;
padding: 1.75rem 0 0 !important;
}
.product-page--blearning .product-tab .tab-container,
.product-page--blearning .tab-container,
.product-page--blearning #product-detail,
.product-page--blearning .tab-panel.active {
display: block !important;
visibility: visible !important;
overflow: visible !important;
height: auto !important;
max-height: none !important;
opacity: 1 !important;
color: #243536 !important;
}
.product-page--blearning #product-detail,
.product-page--blearning #product-detail p,
.product-page--blearning #product-detail li {
font-size: 1.02rem !important;
line-height: 1.7 !important;
color: #243536 !important;
}
.product-page--blearning #product-detail h3 {
font-family: "Fraunces", Georgia, serif;
font-size: 1.15rem;
font-weight: 700;
color: #0e5558;
margin: 1.35rem 0 0.45rem;
}
.product-page--blearning .ajouter-panier-mobile,
.product-page--blearning .form-option.ajouter-panier-mobile,
#product.product-page--blearning .ajouter-panier-mobile,
#product.product-page--blearning .form-option.ajouter-panier-mobile,
.product-page--blearning .addthis_inline_share_toolbox_v1sm,
.product-page--blearning .addthis_inline_share_toolbox_v1sm_erj5 {
display: none !important;
}
.product-page--blearning .produit-middle {
background: transparent;
padding: 8px 0 40px;
}
.product-page--blearning .produit-middle .container {
max-width: 1120px;
padding-left: 0;
padding-right: 0;
}
.bo-blearning-autres {
background: #fff;
padding: 8px 0 28px;
margin: 0;
border-top: 1px solid rgba(15, 31, 32, 0.06);
}
.bo-blearning-autres .container {
max-width: 1120px;
padding-left: 0;
padding-right: 0;
}
.bo-blearning-autres .bo-related-title {
font-size: 1.45rem;
margin-bottom: 1.25rem;
}
@media (min-width: 768px) and (max-width: 1199px) {
#product.product-page--blearning .primary-box,
#product.product-page--blearning .bo-blearning-hero {
display: grid !important;
overflow: visible !important;
}
#product.product-page--blearning .produit-page-image,
#product.product-page--blearning .produit-page-info,
#product.product-page--blearning .pb-left-column,
#product.product-page--blearning .pb-right-column,
#product.product-page--blearning .col-xs-12,
#product.product-page--blearning .col-sm-6 {
width: 100% !important;
float: none !important;
max-width: none !important;
margin-top: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
#product.product-page--blearning .product-full,
#product.product-page--blearning .product-full-mobile,
#product.product-page--blearning .pb-left-column .product-image .product-full {
aspect-ratio: 1 / 1;
height: auto !important;
width: 100% !important;
}
#product.product-page--blearning .product-full img,
#product.product-page--blearning .product-full-mobile img,
#product.product-page--blearning #product-zoom,
#product.product-page--blearning .produit-page-image .product-full img {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
object-fit: contain !important;
}
#product.product-page--blearning .produit-page-info .product-name,
#product.product-page--blearning .produit-page-info h1.bo-bl-name,
#product.product-page--blearning .produit-page-info h1.product-name.bo-bl-name {
font-size: clamp(1.9rem, 3.8vw, 2.75rem) !important;
line-height: 1.12 !important;
color: #0e5558 !important;
font-weight: 700 !important;
}
#product.product-page--blearning .bo-bl-price,
#product.product-page--blearning .bo-bl-price-now {
color: #EB5A25 !important;
font-weight: 800 !important;
font-size: clamp(1.7rem, 3vw, 2.2rem) !important;
}
#product.product-page--blearning .form-option.ajouter-panier-mobile,
#product.product-page--blearning .ajouter-panier-mobile {
display: none !important;
}
}
@media (max-width: 900px) {
#product.product-page--blearning {
padding: 1rem 1rem 1.5rem !important;
}
#product.product-page--blearning .primary-box,
#product.product-page--blearning .bo-blearning-hero {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 1.25rem !important;
}
#product.product-page--blearning .col-xs-12,
#product.product-page--blearning .col-sm-6,
#product.product-page--blearning .pb-left-column,
#product.product-page--blearning .pb-right-column {
width: 100% !important;
float: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
#product.product-page--blearning .produit-page-info .product-name,
#product.product-page--blearning .produit-page-info h1.product-name.bo-bl-name {
font-size: clamp(1.7rem, 7vw, 2.25rem) !important;
line-height: 1.12 !important;
}
#product.product-page--blearning .bo-bl-price,
#product.product-page--blearning .bo-bl-price-now {
color: #EB5A25 !important;
font-weight: 800 !important;
font-size: clamp(1.55rem, 6vw, 2rem) !important;
}
#product.product-page--blearning .bo-bl-actions {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
width: 100%;
}
#product.product-page--blearning .bo-bl-duration {
width: 100% !important;
justify-content: center;
min-height: 64px !important;
height: auto;
}
#product.product-page--blearning .bo-bl-actions a.bo-bl-cta {
display: none !important;
}
#product.product-page--blearning .product-tab,
#product.product-page--blearning .product-tab .tab-container,
#product.product-page--blearning #product-detail,
#product.product-page--blearning .tab-panel.active {
display: block !important;
visibility: visible !important;
overflow: visible !important;
height: auto !important;
max-height: none !important;
opacity: 1 !important;
}
#product.product-page--blearning .product-tab {
margin-top: 1.5rem;
padding: 1.5rem 0 0 !important;
background: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
}
}
@media (max-width: 1024px) {
body:has(.product-page--blearning) {
padding-bottom: 0;
}
#product.product-page--blearning {
padding-bottom: calc(5.75rem + env(safe-area-inset-bottom, 0px)) !important;
}
#product.product-page--blearning .product-tab,
#product.product-page--blearning .product-tab .tab-container,
#product.product-page--blearning #product-detail,
#product.product-page--blearning .tab-panel.active {
display: block !important;
visibility: visible !important;
overflow: visible !important;
height: auto !important;
max-height: none !important;
opacity: 1 !important;
}
#product.product-page--blearning .bo-bl-actions a.bo-bl-cta {
display: none !important;
}
#product.product-page--blearning a.bo-bl-cta-fixed,
.product-page--blearning .bo-bl-cta-fixed {
display: flex !important;
position: fixed !important;
left: 0;
right: 0;
bottom: 0;
z-index: 10040;
width: 100%;
min-width: 0 !important;
min-height: 52px;
height: auto;
margin: 0;
padding: 0.95rem 1.25rem calc(0.95rem + env(safe-area-inset-bottom, 0px));
border-radius: 0;
font-size: 1.35rem !important;
box-shadow: 0 -6px 24px rgba(15, 31, 32, 0.08);
}
}