/* ===================================
CSS VARIABLES (Custom Properties)
=================================== */
:root {
/* Colors */
--primary-green: #91bd31;
--primary-green-dark: #7aad0c;
--primary-green-darker: #628b08;
--primary-green-light: #54750e;
--primary-green-hover: #486111;
--secondary-gray: #545c60;
--secondary-gray-light: #f6f6f6;
--text-dark: #333;
--text-light: #7a7a7a;
--text-medium: #474747;
--white: #fff;
--black: #000;
--error-red: #f64e60;
--warning-orange: #ffa800;
--success-green: #1bc5bd;
--border-gray: #ddd;
--border-light: #e5e5e5;
--background-light: #f1f1f1;
--background-alt: #efefef;
--primary-button-background-color: #0e2e28;
--primary-button-background-color-hovered: #051814;
/* Typography */
--font-primary: "Poppins", Arial, sans-serif;
--font-secondary: "PT Sans", sans-serif;
--font-montserrat: "Montserrat", sans-serif;
/* Spacing */
--border-radius-3px: 3px;
--border-radius: 0.75rem;
--border-radius-large: 5px;
--padding-small: 0.5rem;
--padding-medium: 1rem;
--padding-large: 1.25rem;
--margin-small: 0.5rem;
--margin-medium: 1rem;
--margin-large: 1.5rem;
/* Transitions */
--transition-fast: all 0.3s ease;
--transition-medium: all 0.4s ease;
--transition-slow: all 0.35s ease;
/* Shadows */
--shadow-light: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
--shadow-medium: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
--shadow-heavy: 0 7px 22px -5px rgba(47, 56, 68, 0.2);
--shadow-box: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
/* Layout */
--container-padding: 15px;
--header-height: 3rem;
}
/* ===================================
FONTS
=================================== */
/* ===================================
BASE STYLES
=================================== */
body {
background-color: var(--white);
color: var(--text-dark);
padding: 0;
margin: 0;
font-family: var(--font-secondary);
font-weight: 400;
font-style: normal;
line-height: 1;
position: relative;
cursor: default;
overflow-x: hidden;
overflow-y: scroll;
}
body:not(#index) {
background-color: var(--secondary-gray-light);
}
sup {
top: -0.9em;
}
body,
input,
textarea {
font-family: var(--font-primary);
font-size: 14px;
}
@media screen and (max-width: 768px) {
.container {
overflow-x: hidden;
width: 100%;
max-width: 100vw;
}
/* Pour les images et médias */
/* img,
video,
iframe {
max-width: 100%;
height: auto;
} */
}
dl,
ol,
p,
ul {
line-height: 1.6;
margin-bottom: 0.25rem;
}
p,
.page-content.page-cms ul {
font-size: 1.1375rem;
font-weight: 400;
color: var(--text-dark);
}
.product-information .product-description ul li,
.product-information .product-description ol li {
font-size: 1.1375rem;
color: var(--text-medium);
}
main {
position: relative;
}
/* ===================================
UTILITY CLASSES
=================================== */
.d-flex {
display: flex;
transition: var(--transition-fast);
}
.text-color-red {
color: #b12704 !important;
}
.color-green {
color: var(--primary-green) !important;
}
.text-center {
text-align: center;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.img-responsive {
width: 100%;
max-width: 100%;
}
/* Shadows */
.shadow {
/* box-shadow: var(--shadow-box) !important; */
box-shadow: 0 2px 4px #0000000d !important;
}
.card-1 {
box-shadow: var(--shadow-light);
transition: var(--transition-fast);
}
.card-1:hover {
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.card-2 {
box-shadow: var(--shadow-medium);
}
.card-3 {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.card-4 {
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.card-5 {
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
}
.modal-backdrop.in {
opacity: 0.5;
}
.text-primary {
color: var(--primary-green) !important;
}
/* ===================================
LINKS
=================================== */
a {
color: var(--primary-green);
text-decoration: none;
transition: var(--transition-fast);
}
a:hover {
color: var(--primary-green-dark);
}
#header a:hover {
color: var(--primary-green);
text-decoration: none;
}
.svg-icon-green-hover svg [fill]:not(.permanent):not(g) {
transition: fill 0.3s ease;
fill: var(--primary-green);
}
/* ===================================
FORMS & INPUTS
=================================== */
.form-control {
border-radius: var(--border-radius-3px);
border: 1px solid var(--border-gray);
padding: var(--padding-small) var(--padding-medium);
/* transition: var(--transition-fast); */
}
.form-control:focus {
border-color: var(--primary-green);
outline: none;
box-shadow: 0 0 0 2px rgba(145, 189, 49, 0.2);
}
select.form-control:not([size]):not([multiple]) {
height: auto;
}
form .form-control-label {
font-size: 1.105rem;
font-weight: 400;
color: var(--text-dark);
}
.input-group .input-group-btn > .btn[data-action="show-password"] {
background: var(--primary-button-background-color);
font-size: 0.8875rem;
}
.input-group .input-group-btn > .btn[data-action="show-password"]:hover {
background: var(--primary-button-background-color-hovered);
}
.form-control-comment {
display: block;
text-align: left;
margin-top: 0.235rem;
}
.btn.btn-primary {
color: #fff;
border-color: var(--primary-green);
background-color: var(--primary-green);
}
.btn.btn-primary:hover {
color: #fff;
border-color: var(--primary-green-light);
background-color: var(--primary-green-light);
}
label,
.label {
font-size: 1.075rem !important;
}
/* ===================================
CHECKBOX STYLES
=================================== */
.checkbox {
display: flex;
align-items: center;
position: relative;
text-align: left;
cursor: pointer;
font-size: 1rem;
transition: var(--transition-fast);
margin: 0;
}
.checkbox > span {
background-color: none;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: var(--border-radius-3px);
height: 18px;
width: 18px;
background-color: transparent;
border: 1px solid var(--primary-green-darker);
}
.checkbox > span:after {
content: "";
border-color: transparent;
border-style: solid;
border-width: 0 2px 2px 0 !important;
transform: rotate(45deg);
margin-top: -2px;
width: 5px;
height: 10px;
}
.checkbox > input {
position: absolute;
z-index: -1;
opacity: 0;
}
.checkbox:hover > input:not([disabled]) ~ span,
.checkbox > input:focus ~ span {
transition: var(--transition-fast);
border: 1px solid var(--primary-green-darker);
}
.checkbox.checkbox-disabled {
opacity: 0.6;
cursor: not-allowed;
}
.checkbox > input:checked ~ span {
transition: var(--transition-fast);
background-color: var(--primary-green);
}
.checkbox > input:checked ~ span:after {
display: block;
border-color: var(--white);
}
/* Checkbox variants */
.checkbox.checkbox-square > span {
border-radius: 0;
}
.checkbox.checkbox-circle > span {
border-radius: 50%;
}
.checkbox.checkbox-outline > span {
border-width: 1px;
border-style: solid;
background-color: transparent;
border-color: #d1d3e0;
}
.checkbox.checkbox-outline > input:checked ~ span {
background-color: transparent;
border-color: var(--primary-green-darker);
}
.checkbox.checkbox-outline > input:checked ~ span:after {
border-color: var(--primary-green-darker);
}
.checkbox.checkbox-lg > span {
height: 24px;
width: 24px;
}
.checkbox.checkbox-lg > span:after {
width: 6px;
height: 12px;
}
.checkbox-inline {
display: flex;
flex-wrap: wrap;
}
.checkbox-inline .checkbox {
margin-right: 1rem;
margin-bottom: 0.35rem;
}
.checkbox-inline .checkbox span {
margin-right: 0.75rem;
}
.checkbox-inline .checkbox:last-child {
margin-right: 0;
}
.checkbox-list {
display: flex;
flex-direction: column;
position: relative;
}
.checkbox-list .checkbox {
color: var(--text-light);
}
.checkbox-list .checkbox span {
margin-right: 0.75rem;
}
.checkbox-list .checkbox:last-child {
margin-bottom: 0;
}
/* ===================================
BUTTONS
=================================== */
.btn {
border-radius: 3px;
border: none;
padding: var(--padding-small) var(--padding-large);
font-weight: 600;
text-transform: uppercase;
transition: var(--transition-fast);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
white-space: normal;
}
.btn-primary {
background: var(--primary-green);
color: var(--white);
border-radius: 3px;
}
.btn-primary:hover {
background: var(--primary-green-hover) !important;
color: var(--white);
}
.btn-green {
color: var(--white);
background-color: var(--primary-green);
border-color: transparent;
}
.btn-green:hover {
background-color: var(--primary-green-light);
}
.btn-secondary {
background-color: var(--secondary-gray-light);
color: var(--text-dark);
border: 1px solid var(--border-gray);
}
.btn-secondary:hover {
background-color: var(--border-gray);
color: var(--white);
}
.btn-primary-cadre {
border: 1px solid var(--primary-green) !important;
color: var(--primary-green);
border-radius: var(--border-radius);
background: transparent !important;
}
.btn-primary-cadre:hover {
background: var(--primary-green) !important;
color: var(--white);
}
.btn-bm {
background-color: var(--primary-button-background-color);
color: var(--white);
border: 1px solid var(--primary-button-background-color-hovered);
}
.btn-bm:hover {
background-color: var(--primary-button-background-color-hovered);
color: var(--white);
}
.btn.inline {
color: var(--white);
border-radius: var(--border-radius);
}
.btn i {
line-height: normal;
}
.btn.btn-primary i,
.btn.btn-secondary i {
line-height: normal !important;
}
.btn-hover-green:hover {
background-color: var(--primary-green-dark);
border-color: transparent;
color: var(--white) !important;
}
.btn-check:active + .btn.btn-primary,
.btn-check:checked + .btn.btn-primary,
.btn.btn-primary.active,
.btn.btn-primary.show,
.btn.btn-primary:active:not(.btn-active),
.btn.btn-primary:focus:not(.btn-active),
.btn.btn-primary:hover:not(.btn-active),
.show > .btn.btn-primary {
color: var(--white);
border-color: var(--primary-green-dark);
background-color: var(--primary-green-dark) !important;
}
.btn-danger,
.btn-primary,
.btn-secondary,
.btn-tertiary {
padding: var(--padding-small) var(--padding-large);
font-weight: 600;
text-transform: none;
}
/* ===================================
HEADER
=================================== */
body#index .container-xxl {
padding-right: 0;
padding-left: 0;
width: 100%;
max-width: 100%;
transition: var(--transition-fast);
}
.breadcrumb {
padding: 20px 0 !important;
}
#left-column {
padding-left: 0;
padding-right: 0;
position: relative;
}
#content-wrapper {
padding-right: 0;
}
#header {
box-shadow: 0 2px 4px rgb(0 0 0 / 8%);
}
#header .header-top {
padding: 0;
}
#header .header-nav-bar {
background-color: var(--secondary-gray);
}
#header .header-nav-bar i {
color: var(--white);
}
#header .header-nav-bar span {
color: var(--white);
}
#contact-link li {
border-right: 1px solid var(--white);
padding-right: 12px;
}
#contact-link li:last-child {
border: none;
}
#_desktop_logo {
padding-bottom: 10px;
}
#_desktop_logo .baseline {
color: var(--primary-green);
font-size: 11px;
text-align: center;
}
#_desktop_logo a {
display: block;
text-align: center;
}
#search_widget {
position: relative;
}
#search_widget form {
position: relative;
z-index: 80;
}
#search_widget form input {
border: 1px solid;
}
#search_widget .searchForm_input {
transition: all 0.3s ease;
}
#search_widget .searchForm_input::placeholder {
color: var(--text-medium);
opacity: 0.8;
transition: all 0.3s ease;
}
#search_widget .searchForm_input:focus::placeholder {
opacity: 0.6;
color: var(--text-light);
}
/* Animation de curseur clignotant (optionnel) */
@keyframes blink {
0%,
50% {
opacity: 1;
}
51%,
100% {
opacity: 0;
}
}
#search_widget .searchForm_input.typing::after {
content: "|";
animation: blink 1s infinite;
color: var(--primary-green);
}
.HeaderLeonidas_overlay[data-overlay="overlay-menu"],
.HeaderLeonidas_overlay[data-overlay="overlay-search"] {
position: fixed;
z-index: 80;
background-color: #141414;
opacity: 0.24;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.signin-title {
font-size: 12px;
line-height: 16px;
font-weight: 400;
}
.signin-description {
font-size: 14px;
line-height: 20px;
font-weight: 600;
}
.LoginButton_button {
position: relative;
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
flex-direction: column;
margin: 0;
padding: 0 8px;
cursor: pointer;
text-align: left;
text-decoration: none;
font-family: inherit;
white-space: nowrap;
color: #505971;
}
#_desktop_cart {
position: relative;
}
#blockcart-modal .cart-content {
padding-left: 0;
}
#blockcart-modal .divide-right {
border-right: none;
}
.cart-products-count {
/* position: absolute; */
background: var(--primary-green);
padding: 5px;
border-radius: 26px;
color: var(--white);
font-weight: 400;
top: 0;
right: 0;
}
._desktop_cart_header .cart-products-count {
position: absolute;
}
#header #_desktop_user_info a,
._desktop_cart_header_a {
display: flex;
padding: 5px;
align-items: center;
transition: var(--transition-fast);
font-size: 1.1254rem;
}
#header #_desktop_user_info a:hover,
._desktop_cart_header_a:hover {
background: var(--background-light);
border-radius: var(--border-radius);
}
#header #_desktop_user_info .dropdown-toggle::after {
position: absolute;
top: 15px;
right: 0;
}
.line_drapeau {
display: flex;
}
.line_drapeau img {
height: 1px;
width: 100%;
}
/* Search Widget */
#search_widget #top_search {
text-align: left;
font-size: 12px;
line-height: 16px;
padding: 10px 0 0 0;
}
ul#top-search-link {
padding-left: 0.8em;
}
#search_widget #top_search .top-search-label {
font-weight: 600;
color: #aeaeae;
}
#search_widget #top_search ul {
display: inline-block;
margin: 0;
}
#search_widget #top_search ul li {
display: inline-block;
font-size: 0;
padding: 0 5px;
}
#search_widget #top_search ul li a {
font-size: 12px;
text-decoration: underline;
position: relative;
transition: var(--transition-fast);
margin-right: 2px;
}
@media screen and (max-width: 767px) {
#search_widget img {
display: none;
}
#search_widget {
width: 23rem;
}
}
/* User Info */
.user-info svg {
font-size: 35px;
width: 35px;
height: 35px;
}
.user-info .logout.signout svg {
font-size: 35px;
width: 25px;
height: 25px;
}
/* ===================================
MEGA MENU
=================================== */
.ets_mm_megamenu {
margin-top: 0 !important;
}
.mm_menu_content_title {
padding: 10px;
}
.layout_layout1 .ets_mm_megamenu_content {
border-top: 1px solid var(--border-gray);
border-bottom: 1px solid var(--border-gray);
}
.mm_menu_content_title i.fa.fa-bars {
color: var(--white);
}
.mm_tab_toggle_title {
padding: 4px 15px;
}
.mm_blocks_ul .ets_mm_block > .h4 {
border-bottom: none;
color: #444444;
font-weight: 600;
text-transform: none;
height: 30px;
display: flex;
align-items: center;
position: relative;
z-index: 1;
justify-content: center;
text-align: center;
}
.mm_tabs_li .mm_columns_contents_ul {
padding: 0;
}
.mm_menus_li .mm_columns_ul.mm_columns_ul_tab {
height: auto;
}
.column_size_3 .mm_blocks_ul {
border-right: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
}
.mm_blocks_li {
padding: 0;
margin-bottom: 0;
}
.ets_mm_block.mm_block_type_image {
padding: 10px;
}
.mm_block_type_image .ets_mm_block_content {
width: 140px;
margin: 0 auto;
}
.logoflag {
display: block;
margin: 0 auto;
padding-top: 15px;
}
/* ===================================
DROPDOWN CART
=================================== */
#header .blockcart.cart-preview .dropdown-menu {
padding: 10px 15px;
width: 260px !important;
min-width: 260px !important;
right: -0.85rem;
left: inherit !important;
box-shadow: var(--shadow-heavy);
}
#header .blockcart.cart-preview .dropdown-toggle {
background: none;
border: none;
}
#header .blockcart.cart-preview .dropdown-product-item {
display: table;
position: relative;
width: 100%;
padding: 9px 0;
border-top: 1px dashed #d8e0e6;
}
#header .blockcart.cart-preview .dropdown-product-item:first-child {
border-top: 0;
}
#header
.blockcart.cart-preview
.dropdown-product-item
> .dropdown-product-thumb,
.dropdown-product-item > .dropdown-product-info {
display: table-cell;
vertical-align: top;
}
#header
.blockcart.cart-preview
.dropdown-product-item
> .dropdown-product-thumb {
width: 55px;
border-radius: 50%;
overflow: hidden;
}
#header
.blockcart.cart-preview
.dropdown-product-item
> .dropdown-product-thumb
> img {
display: block;
width: 100%;
}
#header
.blockcart.cart-preview
.dropdown-product-item
> .dropdown-product-remove {
display: block;
position: absolute;
top: 9px;
left: 0;
font-size: 12px;
line-height: 1;
cursor: pointer;
background: var(--white);
border-radius: 50%;
box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075) !important;
}
#header
.blockcart.cart-preview
.dropdown-product-item
> .dropdown-product-remove
i {
color: #ff5252 !important;
}
#header
.blockcart.cart-preview
.dropdown-product-item
> .dropdown-product-info {
padding-right: 15px;
padding-left: 12px;
}
#header .blockcart.cart-preview .dropdown-product-item .dropdown-product-title {
display: block;
padding-top: 2px;
transition: color 0.3s;
color: #373a3c !important;
font-size: 14px;
font-weight: 500;
text-decoration: none;
}
#header
.blockcart.cart-preview
.dropdown-product-item
.dropdown-product-title:hover {
color: #0da9ef;
}
#header
.blockcart.cart-preview
.dropdown-product-item
.dropdown-product-details {
color: #9da9b9;
font-size: 14px;
}
#header .blockcart.cart-preview .blockcart {
background: var(--background-light);
height: 3rem;
padding: 0.75rem;
margin-left: 0.9375rem;
text-align: center;
white-space: nowrap;
}
#header .blockcart.cart-preview .toolbar-dropdown-group {
display: table;
width: 100%;
padding: 9px 0;
border-top: 1px solid #e1e7ec;
border-bottom: 1px solid #e1e7ec;
font-size: 14px;
}
#header .blockcart.cart-preview .toolbar-dropdown-group div {
padding-bottom: 2px;
height: 14px;
}
#header .blockcart.cart-preview .text-right {
text-align: right;
}
#header .blockcart.cart-preview .btn-checkout,
#header .blockcart.cart-preview .btn-view {
display: block;
width: 100%;
margin-top: 12px;
margin-bottom: 12px;
height: 36px;
padding: 0 18px;
border-radius: 3px;
font-size: 13px;
line-height: 34px;
transform: translateZ(0);
transition: var(--transition-medium);
text-align: center;
text-transform: none;
}
#header .blockcart.cart-preview .btn-view {
background-color: var(--secondary-gray-light);
border-color: #e1e7ec;
color: #606975 !important;
}
#header .blockcart.cart-preview .btn-view:hover {
background-color: #cbcbcb !important;
}
#header .blockcart.cart-preview .btn-checkout:hover {
color: var(--white) !important;
}
#_desktop_cart .dropdown-toggle::after {
position: absolute;
top: 30px;
right: 0;
}
._desktop_cart_header .toolbar-dropdown {
height: 290px;
overflow-y: scroll;
}
/* ===================================
FOOTER
=================================== */
footer {
background: var(--secondary-gray) !important;
clear: both;
padding-top: 0 !important;
}
footer .footer-before {
background: var(--background-light) none repeat;
}
footer .footer {
background: var(--secondary-gray) !important;
clear: both;
color: var(--white);
padding-top: 40px;
padding-bottom: 40px;
}
#main .page-footer {
margin-bottom: 0;
}
footer ol,
footer ul {
padding-left: 0;
}
footer li {
padding: 5px 0;
margin-right: 5px;
line-height: 20px;
}
footer .contact-name {
color: var(--white);
text-transform: uppercase;
font-weight: 400;
display: block;
padding-bottom: 0.5rem;
font-size: 1.745rem;
}
.block-contact p,
.block-slogan p {
font-family: var(--font-primary);
margin-bottom: 0;
font-size: 14px;
color: var(--white);
letter-spacing: 0.7px;
font-weight: 400;
line-height: 1.4;
}
.footer-nav-search-query li a {
color: #717171;
transition: opacity 0.3s;
}
.footer-nav-search-query li {
position: relative;
display: inline;
padding: 0 5px;
background-color: var(--secondary-gray-light);
border-radius: 50px;
margin: 2px;
line-height: 1.8;
transition: background-color 0.2s ease;
}
.footer-nav-search-query li:hover {
background-color: var(--text-dark);
}
.footer-nav-search-query li:hover a {
color: var(--white);
opacity: inherit;
transition: color 0.2s ease;
}
.blockreassurance_product {
background: var(--secondary-gray);
margin-top: 0;
}
.footer-box-bootam-support {
position: relative;
border-right: 1px solid var(--white);
}
.footer-box-bootam-support.last {
border-right: none;
}
.footer-box-bootam-support img {
margin-bottom: 30px;
}
.blockreassurance_product i {
color: var(--white);
font-size: 48px !important;
margin-bottom: 30px;
}
.block-title .name {
font-weight: 600;
color: var(--white);
font-size: 1.2em;
display: block;
margin-bottom: 10px;
}
.block-title .desc {
font-weight: 400;
color: var(--white);
font-size: 1.2em;
}
.block_newsletter-footer form input {
height: 42px;
box-shadow: none;
}
.block_newsletter-footer form .input-wrapper {
overflow: hidden;
}
.block_newsletter-footer form input[type="email"] {
width: 100%;
padding: 11px;
border: 1px solid var(--border-gray);
}
.block-newsletter-form .btn-green {
border-radius: 0;
}
#block-newsletter-label {
text-align: left;
}
.new-tendance {
background: url(/themes/nhpmoto/assets/img/bg_tendance.webp) center center
no-repeat;
background-size: cover;
position: relative;
}
.footer-one {
margin-bottom: 50px;
}
.one-four {
display: inline-block;
vertical-align: top;
width: 45%;
margin-left: 1%;
margin-bottom: 15px;
}
.one-four.mobile-full.text-center.logotext-footer {
width: 25%;
}
.one-four a {
color: #f0f0f0;
font-size: 14px;
}
.one-four a:hover {
color: var(--white);
text-decoration: underline !important;
}
.forminusdesk {
display: block;
}
.footerhtreetwo {
font-size: 1.4em;
font-family: var(--font-primary);
padding: 5px;
text-transform: uppercase;
line-height: 1.2;
position: relative;
color: var(--white);
font-weight: 400;
margin-bottom: 20px;
}
.footerhtreetwo::before {
content: "";
position: absolute;
width: 40px;
height: 1px;
bottom: 0;
border-bottom: 2px solid var(--white);
}
.logotext-footer p {
color: #f0f0f0;
}
.logotext-footer {
margin-right: 80px;
}
footer hr:not([size]) {
color: var(--white);
}
#goToTop {
position: fixed;
bottom: 100px;
right: 25px;
z-index: 9999;
width: 40px;
height: 40px;
text-align: center;
line-height: 30px;
background: var(--primary-green);
color: var(--white);
cursor: pointer;
border-radius: 50%;
text-decoration: none;
transition: opacity 0.2s ease-out;
opacity: 0;
}
#goToTop.show {
opacity: 1;
}
#goToTop i {
font-size: 22px;
height: 100%;
padding-top: 9px;
width: 100%;
color: var(--white);
}
#menuArea {
display: none;
}
.content_menu {
display: table;
position: fixed;
bottom: 0;
z-index: 9;
width: 100%;
background: var(--primary-green);
}
.content_menu label {
display: table-cell;
vertical-align: middle;
width: 33.33%;
text-align: center;
text-transform: uppercase;
font-size: 14px;
border-right: 1px solid var(--white);
padding: 10px;
}
.content_menu label a {
color: var(--white);
display: block;
}
.content_menu label a:hover {
color: var(--white) !important;
}
.content_menu .svg-icon svg [fill]:not(.permanent):not(g) {
transition: fill 0.3s ease;
fill: var(--white);
}
#copyright_link p {
color: var(--white);
font-size: 15px;
}
#copyright_link a {
color: var(--primary-green);
}
.copyright {
text-align: center;
}
.headingh4 {
position: relative;
}
.headingh4::before {
content: "";
position: absolute;
width: 40px;
height: 1px;
bottom: 0;
border-bottom: 2px solid var(--white);
}
body#checkout #footer {
padding: 0;
}
/* ===================================
CAROUSEL
=================================== */
#wrapper {
padding-top: 0;
}
.carousel-inner,
.carousel {
margin-bottom: 0;
}
.mask_transparent {
background: var(--black);
opacity: 0.3;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 2;
}
.carousel .carousel-inner {
height: 530px;
padding: 0;
}
.carousel .left i {
transform: rotate(35deg);
-webkit-transform: rotate(35deg);
}
.slideAway img {
display: block;
height: 100vh !important;
object-fit: cover;
transform: scale(1);
animation: animate 400s 1 ease-in-out;
width: 100% !important;
position: absolute;
max-height: 100%;
top: 0;
z-index: 1;
}
.carousel-item {
height: 100%;
position: relative;
}
.carousel .carousel-item .caption {
z-index: 3;
position: absolute;
bottom: 28px;
left: 90px;
max-width: 340px;
color: var(--white);
border-radius: 10px;
padding: 15px;
}
.mask_transparent_caption {
background: var(--white);
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 2;
border-radius: 10px;
}
.carousel .carousel-item .caption .display-1,
.carousel .carousel-item .caption .caption-description {
position: relative;
z-index: 4;
}
/* ===================================
HOMEPAGE
=================================== */
div#bloc-slogan {
width: 100%;
margin: 0;
padding: 20px 15px;
border: none;
background: var(--background-alt);
}
div#bloc-slogan h1 {
font-size: 29px;
text-align: center;
width: 60%;
margin: 0 auto;
line-height: 36px;
transition: var(--transition-slow);
color: var(--text-dark);
text-transform: uppercase;
letter-spacing: 1px;
}
div#bloc-slogan h2 {
text-align: center;
font-weight: 300;
margin-top: 10px;
}
#bloc-slogan strong {
color: var(--primary-green);
}
.Imgservicesone {
position: relative;
background-image: url(/themes/nhpmoto/assets/img/nhp-motoculture.jpg) !important;
background-position: center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
}
.blochp {
width: 50%;
}
#adw_services_1 {
width: 100%;
margin: 0 auto;
display: inline-block;
background: var(--background-light) none repeat scroll 0 0;
padding: 50px 70px;
}
#adw_services_1 p {
color: var(--text-dark);
font-size: 16px;
}
.ishibannerblock-container {
background: var(--background-alt);
padding: 20px;
}
.ishibannerblock-container .image-container {
position: relative;
width: 100%;
height: 100%;
padding-top: 15px;
padding-bottom: 15px;
}
.ishibannerblock-container .image-container a {
position: relative;
width: 100%;
height: 100%;
display: block;
}
.ishibannerblock-container .image-container img {
position: relative;
width: 100%;
height: 100%;
object-fit: cover;
}
.ishibannerblock-container .image-container p {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
padding: 10px 6px;
background: var(--secondary-gray);
margin-bottom: 0;
font-weight: 700;
font-size: 16px;
color: var(--white);
}
@media screen and (max-width: 767px) {
.ishibannerblock-container {
padding: 20px 6px;
}
}
/* ===================================
PRODUCTS
=================================== */
.product-information .fade:not(.show) {
opacity: 1;
}
.new-products .adwnew-content,
.new-tendance .adwnew-content {
width: 100%;
position: relative;
}
.new-products .adwnew-content .product,
.new-tendance .adwnew-content .product {
width: 100%;
}
.new-products,
.new-tendance {
padding: 50px 0;
}
.owl-wrapper-outer {
width: 100%;
overflow: hidden;
}
.owl-wrapper-outer .owl-wrapper {
position: relative;
}
.owl-wrapper-outer .owl-wrapper:after {
clear: both;
content: ".";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
}
.owl-wrapper-outer .owl-wrapper .owl-item {
float: left;
}
.owl-wrapper-outer .owl-wrapper .owl-item .product-miniature {
width: 100%;
}
.owl-buttons {
display: inline-block;
float: none;
padding: 0;
text-align: center;
vertical-align: top;
}
.owl-buttons div {
border: 1px solid var(--primary-green);
border-radius: 50%;
cursor: pointer;
float: left;
font-size: 0;
height: 41px;
line-height: 40px;
margin: 0 2px;
padding: 0;
vertical-align: top;
width: 41px;
}
.owl-buttons div:hover {
border-color: var(--primary-green);
background: var(--primary-green);
}
.owl-buttons div:hover i {
color: var(--white);
}
.owl-prev {
float: left;
position: absolute;
top: 37%;
left: -7px;
background: rgb(247 247 247);
}
.owl-next {
float: right;
position: absolute;
top: 37%;
right: -7px;
background: rgb(247 247 247);
}
.allproduct {
float: left;
text-align: center;
display: block;
width: 100%;
}
.allproduct > a {
border-radius: var(--border-radius);
position: relative;
display: inline-flex;
align-content: center;
align-items: center;
background: var(--primary-green);
color: var(--white);
float: none;
padding: 8px 25px;
vertical-align: top;
font-size: 14px;
font-weight: 600;
letter-spacing: 0;
text-transform: uppercase;
}
.allproduct > a > i {
color: var(--white);
}
.cart-grid-body .card-block h1 {
padding-right: 0;
font-family: var(--font-primary);
display: block;
line-height: 40px;
font-size: 2.2em;
margin-bottom: 1.5rem;
text-transform: uppercase;
color: var(--text-dark);
position: relative;
margin-top: 0;
font-weight: 800;
text-rendering: optimizelegibility;
text-align: left;
}
.cart-grid-body .card-block h1::before {
content: "";
position: absolute;
width: 40px;
height: 1px;
bottom: 0;
border-bottom: 2px solid var(--text-dark);
}
.insteadofhtwo {
padding-right: 0;
font-family: var(--font-primary);
display: block;
line-height: 40px;
font-size: 2.2em;
margin-bottom: 50px;
text-transform: uppercase;
color: var(--text-dark);
position: relative;
margin-top: 0;
vertical-align: middle;
font-weight: 800;
text-rendering: optimizelegibility;
text-align: center;
}
.insteadofhtwo::before {
content: "";
position: absolute;
width: 40px;
height: 1px;
bottom: 0;
border-bottom: 2px solid var(--text-dark);
}
.product-description.proddeskmoby {
background: var(--secondary-gray-light);
padding: 20px 5px;
}
#products .products .product {
margin-bottom: 1.5rem !important;
}
#products .product-title,
.featured-products .product-title,
.product-accessories .product-title,
.product-miniature .product-title {
height: 4rem;
display: flex;
}
#products .thumbnail-container,
.featured-products .thumbnail-container,
.product-accessories .thumbnail-container,
.product-miniature .thumbnail-container,
.tabs {
border-radius: var(--border-radius);
}
#products .thumbnail-container,
.featured-products .thumbnail-container,
.product-accessories .thumbnail-container,
.product-miniature .thumbnail-container {
width: 295px;
margin: 0 auto;
}
#products .thumbnail-container:hover,
.featured-products .thumbnail-container:hover,
.product-accessories .thumbnail-container:hover,
.product-miniature .thumbnail-container:hover {
cursor: pointer;
box-shadow: 0 4px 8px #00000014 !important;
}
#checkout-personal-information-step .nav {
align-items: center;
}
#checkout-personal-information-step .nav-inline .nav-item + .nav-item,
#checkout-personal-information-step .nav-inline .nav-link + .nav-link {
margin-left: 0;
}
#checkout-personal-information-step .nav-inline .nav-item .nav-link {
font-size: 1.2253em;
}
#checkout-personal-information-step .radio-inline {
display: flex;
flex-direction: row;
align-items: center;
}
#checkout-personal-information-step .form-control-valign {
display: flex;
flex-direction: row;
align-items: center;
}
h3.product-title {
height: 55px;
}
#products .product-title a,
.featured-products .product-title a,
.product-accessories .product-title a,
.product-miniature .product-title a {
font-size: 1.075rem;
font-weight: 600;
color: var(--text-dark);
text-align: center;
text-decoration: none;
height: 40px;
display: block;
}
.product .product-price-and-shipping span.price {
color: #b10417;
color: #ff5f3e;
font-weight: 900;
}
.product-price-and-shipping .price,
.product-price-and-shipping .new {
font-size: 1.9em;
font-weight: normal;
}
.product-flags {
display: flex;
flex-wrap: wrap;
flex-direction: column;
padding: 0;
}
.product-flags li.product-flag.new {
color: var(--white);
background-color: #9f9f9f;
font-weight: bold;
width: 83px;
height: 40px;
text-align: center;
font-size: 0.8em;
}
.product-flags li.product-flag {
font-size: 0.8em;
}
.out_of_stock .thumbnail-container {
opacity: 0.3;
}
.new-products-image {
position: relative;
background: var(--black) url(../img/tronconneuse.jpg.webp);
background-repeat: no-repeat;
background-size: cover;
height: 400px;
}
.product-attachments .attachment {
background: var(--secondary-gray-light);
padding: 15px;
}
#product-availability {
margin-top: 0.625rem;
font-weight: 700;
align-content: center;
}
#availability.last_remaining_items {
background: var(--warning-orange);
color: var(--white);
border: 2px solid #b57900;
font-size: 15px;
}
#availability.last_remaining_items .svg-icon svg [fill]:not(.permanent):not(g) {
transition: fill 0.3s ease;
fill: var(--secondary-gray);
}
#availability.unavailable {
background: var(--error-red);
color: var(--white);
padding: 5px 15px;
font-size: 15px;
}
#availability.unavailable .svg-icon svg [fill]:not(.permanent):not(g) {
transition: fill 0.3s ease;
fill: var(--secondary-gray);
}
.product-description iframe {
width: 100%;
}
/* ===================================
PAGINATION
=================================== */
#products .pagination .current a {
font-size: 0.925rem !important;
}
.pagination .current a.btn-hover-green.active {
background-color: var(--primary-green) !important;
border-color: transparent !important;
color: var(--white) !important;
}
.pagination a:not(.previous):not(.next) {
letter-spacing: 0;
}
.pagination {
background: var(--white);
padding-left: 15px;
}
/* ===================================
CATEGORY & FILTERS
=================================== */
#products .product-description,
.featured-products .product-description,
.product-accessories .product-description,
.product-miniature .product-description {
padding-bottom: 20px;
background: #fff;
padding-left: 5px;
padding-right: 5px;
}
#left-column,
#search_filters,
#search_filters_brands,
#search_filters_suppliers,
.block-categories {
background: var(--white);
}
.block-categories .category-sub-menu li[data-depth="0"] > a {
text-transform: lowercase;
}
.block-categories .category-top-menu {
padding-left: 0;
}
#search_filters .facet .facet-title {
background: var(--primary-green);
padding: 10px;
color: var(--white);
font-weight: 800;
font-size: 15px;
width: 100%;
}
.facet ul {
padding-left: 0;
margin-bottom: 20px;
clear: both;
}
.facet ul .col-md-12 {
float: none;
}
.btn-unstyle.select-title,
.js-search-filters-clear-all {
display: flex;
align-items: center;
justify-content: space-between;
}
.btn.js-search-filters-clear-all i {
line-height: normal;
}
.modal.modal_facet .modal-body .d-flex {
flex-wrap: wrap;
}
.modal.modal_facet .modal-body .d-flex .modal-item {
padding: 5px;
border: 1px solid var(--border-light);
margin: 3px;
text-align: center;
}
.modal .modal-header {
align-items: center;
justify-content: space-between;
border-top-left-radius: -0.525rem;
border-top-right-radius: 0.475rem;
border-end-end-radius: 0;
border-end-start-radius: 0;
}
.modal .modal-header.alert-primary {
color: var(--white);
background-color: var(--primary-green);
border-color: var(--primary-green);
}
.modal .modal-header.alert-primary h5 {
color: var(--white);
}
.modal.modal_facet .modal-body .d-flex .modal-item span {
display: block;
text-align: center;
padding: 5px;
font-size: 16px;
font-weight: bold;
background: var(--border-light);
border-end-start-radius: var(--border-radius);
border-end-end-radius: var(--border-radius);
}
.modal-footer {
align-items: center;
justify-content: center;
}
#search_filters .facet .facet-title i,
#search_filters .facet .facet-title a {
color: var(--white);
}
#search_filters .facet .facet-title a span {
font-size: 11px;
position: relative;
top: -5px;
}
#_desktop_search_filters_clear_all
.btn:not(.btn-outline):not(.btn-dashed):not(.border-hover):not(
.border-active
):not(.btn-flush):not(.btn-icon) {
background: var(--white);
}
.popover.fade:not(.show) {
opacity: 1;
}
.popover {
box-shadow: 0 0 150px 0 rgba(82, 63, 105, 0.3);
background: var(--black) !important;
border: none !important;
color: var(--white) !important;
}
.popover.popover-top::after,
.popover.bs-tether-element-attached-bottom::after {
bottom: -10px;
margin-left: -10px;
border-top-color: var(--black);
}
#products .thumbnail-container .product-thumbnail,
.featured-products .thumbnail-container .product-thumbnail,
.product-accessories .thumbnail-container .product-thumbnail,
.product-miniature .thumbnail-container .product-thumbnail {
text-align: center;
}
#left-column .wrappe .facet-dropdown.open > .select-title {
background: var(--secondary-gray-light);
border: 3px solid var(--primary-green);
}
#left-column .wrappe .facet-dropdown .select-list:hover {
background: var(--primary-green);
}
.facet-dropdown.dropdown.open {
position: absolute;
width: 90%;
}
.facet-dropdown.dropdown.open .dropdown-menu {
height: 300px;
overflow-y: scroll;
position: absolute;
width: 100%;
padding-right: 0 !important;
margin-right: 0 !important;
}
.facet .collapse {
min-height: 45px;
}
.facet-dropdown .dropdown-menu {
top: 50px;
}
#category-description strong {
color: var(--primary-green) !important;
font-weight: 900 !important;
}
.quick-view.js-quick-view:hover {
background: var(--primary-green);
color: var(--white) !important;
}
.quick-view.js-quick-view:hover i {
color: var(--white) !important;
}
#product-availability .product-available {
color: var(--primary-green);
}
.product-miniature .flags {
position: absolute;
top: 10px;
z-index: 2;
}
.available_later {
background: #d03e41;
padding: 5px;
color: var(--white);
font-weight: 800;
}
.product-flags li.product-flag.on-sale {
display: none;
}
.product-flags li.product-flag.discount-percentage,
.product-flags li.product-flag.discount-amount,
.product-flags li.product-flag.discount {
background: var(--black);
font-size: 1.5rem;
}
.discount.discount-percentage {
background: var(--black);
}
.wishlist-button-add i {
color: var(--primary-green) !important;
}
#category #products .thumbnail-container,
#category .featured-products .thumbnail-container,
#category .product-accessories .thumbnail-container,
#category .product-miniature .thumbnail-container {
width: 100%;
}
#category #products .product-description,
#category .featured-products .product-description,
#category .product-accessories .product-description,
#category .product-miniature .product-description {
width: 100%;
}
#search_filters .facet .facet-label span.js-search-link {
width: calc(100% - 30px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
margin-top: 0.4375rem;
font-size: 0.9375rem;
color: #232323;
}
#search_filters_brands .facet .facet-label span.js-search-link,
#search_filters_suppliers .facet .facet-label span.js-search-link {
display: inline-block;
margin-top: 0.4375rem;
font-size: 0.9375rem;
color: #232323;
}
/* #products .thumbnail-container .product-thumbnail img, .featured-products .thumbnail-container .product-thumbnail img, .product-accessories .thumbnail-container .product-thumbnail img, .product-miniature .thumbnail-container .product-thumbnail img{ */
#products .thumbnail-container .product-thumbnail img{
width: 100%;
height: auto;
object-fit: cover;
}
/* ===================================
PRODUCT PAGE
=================================== */
.product-images.js-qv-product-images {
padding-left: 0;
}
.product-images > li.thumb-container > .thumb.selected,
.product-images > li.thumb-container > .thumb:hover {
border: var(--primary-green) 3px solid;
}
.current-price-value {
color: #b10417;
font-size: 30px;
}
.product-prices.js-product-prices {
display: flex;
flex-direction: column;
}
#product .product-description {
margin-top: 1rem;
margin-bottom: 1rem;
}
.product-quantity .btn.btn-primary.add-to-cart {
border: 0;
padding: calc(0.48rem + 1px) calc(1.5rem + 35px) !important;
}
.product-quantity .btn.btn-primary.add-to-cart {
/* height: auto; */
}
.product-quantity #quantity_wanted {
height: 2.8rem;
}
.product-quantity .btn-touchspin {
height: 1.468rem;
}
#product .product-quantity {
flex-direction: column;
}
#product .product-quantity .product-prices {
margin-right: 35px;
}
.product-quantity .qty,
.product-quantity .add {
margin-right: 5px;
}
.tabs .nav-tabs .nav-link {
text-transform: uppercase;
font-size: 1.225rem;
}
#product-details .label,
.product-features > dl.data-sheet dd.value,
.product-features > dl.data-sheet dt.name {
font-size: 1.225rem;
}
.tabs .nav-tabs .nav-link.active {
color: var(--primary-green);
border-bottom: var(--primary-green-dark) 3px solid;
}
.tabs .nav-tabs .nav-link:hover {
color: var(--primary-green);
border-bottom: var(--primary-green-dark) 3px solid;
}
#product #content {
max-width: 100%;
}
.product-prices .tax-shipping-delivery-label {
color: var(--black);
font-weight: 900;
}
.product-cover {
border: 1px solid var(--primary-green);
}
.qty .btn i.material-icons {
display: inline-flex;
padding-right: 0;
vertical-align: middle;
line-height: 1;
}
.qty .bootstrap-touchspin .btn.btn-touchspin {
background-color: var(--white);
border: 1px solid rgba(0, 0, 0, 0.25) !important;
padding: 0.65rem 0.6875rem !important;
}
.product-quantity #quantity_wanted {
text-align: center;
width: 6rem;
}
.product-actions .add-to-cart .material-icons {
font-size: 24px;
}
.product-information
.product-actions
.btn:not(.btn-outline):not(.btn-dashed):not(.border-hover):not(
.border-active
):not(.btn-flush):not(.btn-icon).add-to-cart {
padding: 7px 20px;
}
#product .featured-products .product-description {
margin-bottom: 0;
}
.products.owl-carousel {
position: relative;
}
#notifications .alert {
margin-top: 40px;
}
.alert {
font-size: 1.2125rem;
border-radius: var(--border-radius-3px);
}
.help-block ul {
padding-left: 0px;
}
.images-info {
position: absolute;
z-index: 1;
bottom: 10px;
left: 52%;
background: var(--secondary-gray-light);
padding: 9px;
font-weight: 700;
}
.images-piece_origine,
.images-piece_adaptable {
position: absolute;
z-index: 1;
top: 10px;
right: 10px;
}
.product-cover .layer {
z-index: 9;
}
.images-piece_origine img,
.images-piece_adaptable img {
width: 100px !important;
}
.quickview .product-cover .images-piece_origine img,
.quickview .product-cover .images-piece_adaptable img {
width: 100px !important;
}
#blockcart-modal .modal-header {
background: var(--primary-green);
}
#blockcart-modal .modal-title i.material-icons {
color: var(--white);
}
#blockcart-modal .product-image {
display: block;
width: 100%;
max-width: fit-content;
margin: 0;
}
#blockcart-modal .modal-title {
font-size: 1.2rem;
font-weight: 400;
color: var(--white);
text-transform: uppercase;
}
#blockcart-modal .cart-content p,
#blockcart-modal .cart-content .page-content.page-cms ul,
.page-content.page-cms #blockcart-modal .cart-content ul {
align-items: center;
}
#blockcart-modal .cart-content p.cart-products-count,
#blockcart-modal .cart-content .page-content.page-cms ul.cart-products-count,
.page-content.page-cms #blockcart-modal .cart-content ul.cart-products-count {
color: var(--white);
border-radius: 3px;
}
#blockcart-modal .product-name {
color: var(--primary-green);
}
.btn.btn-primary.d-flex i,
.btn.btn-secondary i {
line-height: normal !important;
}
#blockcart-modal .cart-content .cart-content-btn .btn {
white-space: inherit;
border-radius: var(--border-radius);
}
#product .product-accessories .product-description {
margin-bottom: 0;
}
#product-modal .modal-content .modal-body .product-images img {
height: 100%;
}
#availability .svg-icon svg [fill]:not(.permanent):not(g) {
transition: fill 0.3s ease;
fill: var(--black);
}
#availability {
display: inline-flex;
align-items: center;
background: #fb2625;
padding: 5px 10px;
color: var(--white);
border: 2px solid #fb2625;
min-width: 330px;
animation: bounce 0.9s infinite alternate;
}
#availability.disponible {
display: inline-flex;
align-items: center;
background: var(--primary-green);
padding: 5px 10px;
color: var(--white);
border: 2px solid #567217;
}
#availability .texte {
font-size: 1.2rem;
text-transform: uppercase;
}
.disponibilite {
background-color: #fbfbfb;
border-radius: 50%;
box-shadow: 0 2px 3px 0 rgb(51 51 51 / 20%);
color: #113c2b;
height: 3rem;
line-height: 3rem;
width: 3rem;
margin-right: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.label.label-default {
background: var(--secondary-gray);
padding: 3px 10px;
color: var(--white);
margin-top: 15px;
display: inline-flex;
}
.label.label-primary {
background: var(--primary-green);
padding: 3px;
color: var(--white);
margin-top: 15px;
display: inline-flex;
}
.product-line-grid-body > .product-line-info > .available {
color: var(--white);
}
.product-line-grid-body > .product-line-info a.label {
font-size: 1.075rem;
}
#product #main h1 {
font-size: 2.15rem;
}
#newAvailability {
display: flex;
align-items: center;
}
#newAvailability.available.disponible .disponibilite {
background-color: var(--primary-green);
}
#newAvailability.available.disponible
.disponibilite.svg-icon
svg
[fill]:not(.permanent):not(g) {
fill: var(--white);
}
#newAvailability.available:not(.disponible) .disponibilite {
background-color: #fb2625;
}
#newAvailability.available:not(.disponible)
.disponibilite.svg-icon
svg
[fill]:not(.permanent):not(g) {
fill: var(--white);
}
#newAvailability.available.disponible span {
color: var(--primary-green);
font-weight: 900;
font-size: 1.2em;
}
#newAvailability.available:not(.disponible) span {
color: #fb2625;
font-weight: 900;
font-size: 1.2em;
}
#newAvailability.last_remaining_items .disponibilite {
background-color: var(--warning-orange);
}
#newAvailability.last_remaining_items
.disponibilite.svg-icon
svg
[fill]:not(.permanent):not(g) {
fill: var(--white);
}
#newAvailability.last_remaining_items span {
color: var(--warning-orange);
font-weight: 900;
font-size: 1.2em;
}
#product .alma-pp-container {
/* margin-top: 2em; */
}
.regular-price .alma-pp-container.ps17 {
height: 0px !important;
display: none;
margin-bottom: 0px;
}
.featured-products {
margin: 5rem 0 !important;
}
@media (max-width: 1024px) {
#product .product-container {
flex-direction: column;
}
#product .product-container .col-md-7 {
width: 100%;
}
#product .product-container .col-md-5 {
display: flex;
justify-content: center;
width: 100%;
}
}
@media (max-width: 767.98px) {
.add-cart__wrapper {
display: flex;
flex-direction: column;
}
.add-cart__wrapper .add,
.add-cart__wrapper .add button {
width: 100%;
margin-right: 0px;
font-size: 1.3254rem;
}
.product-actions .add-to-cart {
height: auto;
}
#top_search {
display: none;
}
}
/* @media (max-width: 767.98px) {
#product .product-add-to-cart .product-quantity {
background-color: #fff;
border-top: 0.0625rem solid #ccc;
bottom: 0;
left: 0;
padding: 1.75rem 0.9375rem;
position: fixed;
right: 0;
z-index: 9999999;
}
#product .product-add-to-cart .product-quantity .product-prices {
margin-top: 0px;
}
#product .product-add-to-cart .product-quantity .product-prices div {
margin-bottom: 0px;
}
} */
.highlighted-informations-mod .svg-icon svg [fill]:not(.permanent):not(g),
.highlighted-informations .svg-icon svg [fill]:not(.permanent):not(g) {
fill: #000000;
}
/* ===================================
CART & CHECKOUT
=================================== */
#cart #wrapper,
#checkout #wrapper {
padding-top: 50px;
}
#cart .bootstrap-touchspin input.form-control,
#cart .bootstrap-touchspin input.input-group {
height: 2.8rem;
}
.transform_devis {
padding: 1.25rem 1.25rem 0.5rem;
}
.transform_devis a {
width: 100%;
}
.cart-grid.wrappercart {
margin-bottom: 1rem;
background: var(--white);
border-radius: var(--border-radius);
display: flex;
align-items: flex-start;
align-content: flex-start;
justify-content: space-between;
width: 100%;
}
.cart-grid.wrappercart .cart-grid-right {
padding-right: 0;
align-self: stretch;
background-color: #eee;
border-top-right-radius: var(--border-radius);
border-end-end-radius: var(--border-radius);
}
.cart-grid.wrappercart .cart-grid-right .card {
background-color: #eee;
border-top-right-radius: 6px;
border-end-end-radius: 6px;
}
.block-promo .promo-input {
height: 3.3rem;
color: #232323;
text-indent: 0.625rem;
border: var(--secondary-gray-light) 1px solid;
width: 100%;
margin-right: 0;
}
.block-promo .promo-input + button {
margin-top: 10px;
}
.product-line-grid {
border-bottom: 1px solid var(--primary-green);
}
#cart #content-wrapper {
width: 100%;
}
.cart-voucher.js-cart-voucher {
padding: 0 1.25rem 0.825rem;
}
#dispo-custom {
padding-left: 30px;
}
.dispo-custom {
margin-top: 0;
margin-bottom: 20px;
text-align: left;
font-size: 1rem;
}
.has-discount .discount {
padding: 0.0005rem 0.625rem;
border-radius: 0.354rem;
padding: 0.325rem;
}
/* Checkout specific */
body#checkout section.checkout-step.-reachable.-current .step-number {
background-color: var(--primary-green);
}
#cart-summary-product-list .product-price {
display: inline-block;
color: var(--primary-green);
font-size: 14px;
}
body#checkout a.btn.btn-primary:hover {
background: var(--primary-green-dark) !important;
color: var(--white);
}
body#checkout a.btn.btn-secondary {
color: var(--text-dark);
}
body#checkout a.btn.btn-secondary:hover {
color: var(--white);
}
body#checkout
.cart-grid-right
.card
.cart-summary-subtotals-container
.cart-summary-line
.label {
font-size: 1.1rem;
}
body#checkout .cart-summary-line .label,
body#checkout .cart-summary-line .value {
font-size: 1.1rem;
}
body#checkout .card-block.cart-summary-totals .cart-summary-line {
padding: 0.5rem 0 0;
}
body#checkout
.card-block.cart-summary-totals
.cart-summary-line.cart-total
.label {
font-size: 1.1rem;
}
body#checkout .cart-summary-products .media-body .product-name a,
body#checkout .cart-summary-products .media-body .product-quantity {
font-size: 1.1rem;
}
.cart-summary-line.cart-total span {
color: #ff5f3e;
font-size: 1.4rem !important;
}
.checkoutWrapper {
background: var(--white);
border-radius: var(--border-radius-large);
display: flex;
align-items: flex-start;
align-content: flex-start;
}
.checkoutWrapper .cart-grid-right.col-xs-12.col-lg-4 {
padding-right: 0;
align-self: stretch;
background-color: #eee;
border-radius: 0 var(--border-radius-large) var(--border-radius-large) 0;
}
#js-checkout-summary.card {
background-color: #eee;
border-radius: 0;
border: none;
color: var(--text-dark);
border-radius: 0 var(--border-radius-large) 0 0;
padding-right: 10px;
}
.payment-option {
display: flex;
align-items: center;
}
.payment-option label {
margin-bottom: 0;
font-size: 1.1rem;
}
#conditions-to-approve ol,
#conditions-to-approve ul {
padding-left: 0;
}
body#checkout section.checkout-step .address-item.selected {
border: var(--primary-green) 3px solid;
}
body#checkout section.checkout-step .address-footer {
background: var(--primary-green) !important;
padding: 10px !important;
display: flex;
justify-content: space-around;
}
body#checkout section.checkout-step .address {
font-size: 13px;
line-height: 19px;
min-height: 160px;
}
.address-footer a,
.address-footer a i {
color: var(--white) !important;
font-size: 1.275rem;
}
.custom-radio {
display: flex;
justify-content: center;
align-items: center;
}
.custom-radio input[type="radio"]:checked + span {
background-color: var(--primary-green);
top: auto;
left: auto;
}
.done {
color: var(--primary-green);
}
body#checkout section.checkout-step .form-footer {
display: flex;
justify-content: center;
align-items: center;
}
body#checkout section.checkout-step .step-title {
border-bottom: none;
padding-bottom: 0.95rem;
}
.step-wrapper-h1 {
border-bottom: 1px solid var(--border-gray);
padding-bottom: 0.95rem;
}
body#checkout .cancel-address {
color: var(--primary-green);
font-size: 1.158rem;
font-weight: 700;
}
.product-line-grid .current-price .price,
.product-line-grid-right .product-price strong {
color: #ff5f3e;
font-weight: 900 !important;
font-size: 1.5rem;
}
.product-line-grid-right .cart-line-product-actions .remove-from-cart, .product-line-grid-right .product-price .remove-from-cartt{
margin-top: 0px;
}
.remove-from-cart i{
color :#ff5f3e;
}
@media screen and (max-width: 767.98px) {
.product-line-grid-right-content__wrapper {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.product-line-grid-right-content {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.product-line-grid-right-content .qty,
.product-line-grid-right-content .price {
width: 8rem;
}
.product-line-grid-right-content__wrapper .col-md-10 {
width: 18rem;
}
.product-line-grid-right-content__wrapper .col-md-2 {
width: auto;
}
}
/* ===================================
AUTHENTICATION
=================================== */
#authentication #content-wrapper {
width: 100%;
}
.page-authentication #content {
max-width: 936px;
margin: 0 auto;
}
.page-authentication {
text-align: center;
}
footer.form-footer {
background: transparent !important;
}
.page-customer-account #content .no-account {
background: #f7f7f7;
padding: 15px;
}
.authentication-rgpd {
max-width: 936px;
margin: 2rem auto 60px;
}
/* .authentication-rgpd p {
font-size: 11px;
font-style: italic;
} */
#authentication .form-group span.input-group-btn {
position: absolute;
right: 86px;
top: 0;
height: 55px;
z-index: 99;
}
#authentication .form-group span.input-group-btn button {
height: 36px;
width: 90px;
}
div.customcheckbox em {
padding-left: 25px;
display: flex;
font-size: 10px;
}
#authentication .form-footer {
text-align: center !important;
}
#submit-login.btn.btn-primary,
#customer-form .form-footer .btn.btn-primary {
display: inline-block;
text-align: center;
}
.my-account-svg .link-item {
display: flex;
}
.page-my-account #content .my-account-svg span.link-item {
display: flex !important;
align-items: center;
}
.svg-icon.svg-icon-primary svg [fill]:not(.permanent):not(g) {
transition: fill 0.3s ease;
fill: var(--primary-green);
}
.page-my-account #content .my-account-svg span.link-item svg {
margin-right: 10px;
}
#my-account .page-content > #notifications {
display: none;
}
footer.page-footer {
background: transparent !important;
}
.page-footer .account-link span {
font-size: 1.075rem;
}
.page-my-account #content .links a {
margin-bottom: 1.075rem;
font-size: 1.2rem;
font-weight: 700;
color: var(--text-dark);
text-align: center;
text-transform: uppercase;
}
.page-addresses .address .address-footer {
border-top: 1px solid #648321;
background: var(--primary-green);
display: flex;
justify-content: space-evenly;
}
.page-addresses .address .address-footer a span {
font-size: 1.175rem;
vertical-align: middle;
font-weight: 900;
}
.page-addresses .address .address-body h4 {
font-size: 1.5rem;
font-weight: 700;
}
.page-addresses .address .address-body address {
min-height: 14rem;
font-size: 1.2rem;
line-height: 21px;
margin-top: 20px;
}
.page-addresses .addresses-footer a span {
margin-top: 0;
}
#order-detail.page-order-detail #content {
font-size: 1.175rem;
line-height: 22px;
}
#order-detail.page-order-detail .thead-default tr td {
padding-left: 5px !important;
}
.table td:first-child,
.table th:first-child,
.table tr:first-child {
padding-left: 5px;
}
#order-products.table > :not(:first-child) {
border-top: 1px solid #eee;
}
.lastOrder__content__blocInformations {
background: var(--white);
padding: 10px;
margin-bottom: 94px;
margin-left: 15px;
margin-right: 15px;
}
.lastOrder__content__blocInformations p {
margin-top: 2rem;
}
#order-detail.page-order-detail
select.form-control:not([size]):not([multiple]) {
height: auto;
}
#my-account .productLabel {
font-size: 16px;
font-weight: 600;
line-height: 24px;
}
#my-account .blocInformations__lastOrderDate,
#my-account .blocInformations__lastOrderPrice {
font-size: 16px;
font-weight: 300;
line-height: 24px;
}
#my-account .productLblMob {
display: none;
}
.lastOrder__content__blocActions {
margin-top: 10px;
}
#send-reset-link.btn.btn-primary {
border-radius: 0 var(--border-radius) var(--border-radius) 0;
}
#password .forgotten-password .form-fields label.required {
width: auto;
}
#checkout-personal-information-step p.identity {
font-weight: 800;
text-align: center;
}
#checkout-personal-information-step .notYou {
border-top: 1px solid var(--primary-green);
padding-top: 1rem;
text-align: center;
margin-top: 1rem;
}
.identity_form {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
body#checkout section.checkout-step.-reachable h1 .step-edit {
color: var(--primary-green) !important;
font-size: 1.1rem;
float: right;
text-transform: capitalize;
font-weight: 800;
}
body#checkout section.checkout-step .step-edit .edit {
color: var(--primary-green) !important;
}
#content-checkout-addresses-step .form-group.company,
#content-checkout-addresses-step .form-group.vat_number,
.addresses-hide,
#js-checkout-process-shop
.checkout-process-shop
.step-edit[aria-expanded="true"],
#js-checkout-process-shop .checkout-process-shop .-current .step-edit {
display: none !important;
}
.checkout-process-shop .checkout-step.-unreachable:not(.-reachable) {
opacity: 0.4;
}
.register-form .form-control-valign {
display: flex;
align-items: center;
}
#authentication .radio-inline {
padding: 0;
display: flex;
align-items: center;
}
#authentication .radio-inline .custom-radio {
margin-right: 0.5rem;
}
/* ===================================
HOMEPAGE SPECIFIC
=================================== */
#slider {
position: relative;
height: 500px;
overflow: hidden;
}
.section-white {
background: var(--white);
}
.category-section {
padding-top: 80px;
padding-bottom: 80px;
margin: 0;
}
#slider .description {
position: absolute;
background: var(--white);
padding: 10px;
width: 300px;
height: 80px;
font-size: 25px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
top: 70%;
left: 10%;
opacity: 0.8;
width: auto !important;
}
#slider .description h1 {
font-size: 3.75rem;
margin-bottom: 0;
}
.signature-vert {
color: var(--primary-green);
font-weight: 600;
font-style: italic;
}
#equipe p {
line-height: 22px;
}
#equipe .descriptions .content {
padding: 30px 0 0 0;
}
#equipe .d-flex {
align-items: center;
}
#text_info_1 {
padding-top: 50px;
padding-bottom: 50px;
}
/* .page-landingpage h3.product-title {
height: auto;
} */
#freeshippinginfo {
padding: 15px;
margin-bottom: 20px;
}
#cms .landingpage-body div#page {
margin-top: 0;
}
#wrapper-search-by-nhp p {
font-size: 1.8375rem;
font-weight: 600;
margin-bottom: 1.2em;
}
#index #wrapper-search-by-nhp {
margin-bottom: 0;
}
#index #wrapper-search-by-nhp p {
font-size: 1.8em;
font-weight: 900;
margin-bottom: 1em;
}
/* ===================================
CMS PAGES
=================================== */
.page-content.page-cms .h2,
.page-content.page-cms h2 {
font-size: 1.8rem;
margin-bottom: 30px;
margin-top: 20px;
color: var(--primary-green);
font-weight: 900;
}
.page-content.page-cms .h3,
.page-content.page-cms h3 {
font-size: 1.4rem;
margin-bottom: 10px;
margin-top: 20px;
font-weight: 900;
text-transform: uppercase;
}
.surligne-vert-important {
color: #f1416c;
}
.cms_services .ets_mm_block_content {
display: none;
}
.cms_services .mm_blocks_ul .ets_mm_block > .h4 {
justify-content: flex-start;
padding-left: 10px;
}
/* ===================================
HISTORY
=================================== */
#history #content .table-bordered {
font-size: 14px;
}
#history.page-customer-account #content .order-actions a {
padding: calc(0.15rem + 1px) calc(1.5rem + 1px);
}
#order-detail #order-history,
#order-detail .follow_up {
background-color: #dbdbdb;
border: 1px solid var(--primary-green);
}
#order-detail #order-history h3 {
text-align: center;
font-size: 2rem;
}
#order-detail #order-history .table-labeled .label {
font-weight: 900;
color: var(--white);
}
#order-detail #order-history .table-striped tbody tr:nth-of-type(odd) {
background-color: rgb(161 161 161 / 59%);
}
#order-detail #order-history .label_pill_2.dark,
#order-detail #order-history .label_pill_4.dark {
color: #423434;
}
#order-detail .follow_up a {
text-decoration: underline;
color: var(--black);
}
/* ===================================
LOYALTY
=================================== */
#module-loyalty-default #order-list.table tr {
width: 100% !important;
}
table#order-list {
font-size: 14px;
}
table#order-list th {
font-weight: bold;
}
.bold {
font-weight: bold;
}
.table-striped tbody tr:nth-of-type(odd) {
background-color: rgb(145 189 49 / 59%);
}
/* ===================================
PROMOTIONS
=================================== */
#prices-drop #left-column {
display: none;
}
#prices-drop #content-wrapper {
width: 100%;
}
/* ===================================
CONTACT
=================================== */
#contact .wrapper-flex {
background: var(--white);
margin-bottom: 50px;
}
#contact .wrapper-flex #left-column {
background: #eee;
padding: 20px;
}
#contact .contact-rich .block .data {
font-size: 1.075rem;
line-height: 19px;
}
.contact-rich .block a[href^="mailto:"] {
font-size: 1.075rem;
line-height: 19px;
}
#contact
.input-group-btn
.btn:not(.btn-outline):not(.btn-dashed):not(.border-hover):not(
.border-active
):not(.btn-flush):not(.btn-icon) {
border: 0;
padding: calc(1.15rem + 1px) calc(1.5rem + 1px);
height: 43px;
}
.group-span-filestyle .btn-default,
.group-span-filestyle .bootstrap-touchspin .btn-touchspin,
.bootstrap-touchspin .group-span-filestyle .btn-touchspin {
background: var(--primary-green);
}
#js-product-list-header {
margin-bottom: 1rem;
font-size: 2rem;
}
.quickview #product-description-short video {
width: 100%;
}
.wishlist-add-to-new {
width: auto !important;
height: auto !important;
}
.wishlist-add-to-new span,
.wishlist-add-to-new i {
color: var(--text-dark) !important;
}
#module-payline-payment #wrapper {
padding-top: 50px;
}
.wishlist-modal .modal-header p {
color: #232323;
font-size: 22px;
font-weight: 700;
letter-spacing: 0;
line-height: 30px;
}
#colissimo-widget-container {
height: 100% !important;
}
#colissimo-widget-container .widget_colissimo_bouton_validation {
width: 206px !important;
height: 38px !important;
}
/* ===================================
PAYMENT OPTIONS
=================================== */
body#checkout section.checkout-step .payment-options .payment-option {
border: 1px solid var(--primary-green);
background: var(--secondary-gray-light);
color: var(--white);
margin-bottom: 15px;
padding: 0.5rem 1rem;
border-radius: var(--border-radius-3px);
}
.label-option span {
margin-top: 0px !important;
font-size: 1.2rem;
}
body#checkout section.checkout-step .payment-options label {
display: flex;
align-items: center;
height: 2rem;
}
.payment-options-payplug #payment-option-1-container label .label-image{
background: url(/themes/nhpmoto/assets/img/paiements/cartes.svg)
center center no-repeat;
position: relative;
display: block;
margin-right: 15px;
width: 147px !important;
height: 28px !important;
background-size: contain;
}
.payment-options-payplug #payment-option-2-container label .label-image{
background: url(/themes/nhpmoto/assets/img/paiements/amex.svg)
center center no-repeat;
position: relative;
display: block;
margin-right: 15px;
width: 147px !important;
height: 28px !important;
background-size: contain;
}
.payment-options-clicktopay label .label-image {
background: url(/themes/nhpmoto/assets/img/paiements/click-to-pay-mastercard-logo-resize.png)
center center no-repeat;
position: relative;
display: block;
margin-right: 15px;
width: 147px !important;
height: 28px !important;
background-size: contain;
}
.payment-options-clicktopay label.label-option #mc-ctp-src-mark {
display: none;
}
.payment-options-stripe_official label .label-image,
.payment-options-stripejs label .label-image {
background: url(/themes/nhpmoto/assets/img/paiements/paiment_stripe.png)
center center no-repeat;
position: relative;
display: block;
margin-right: 15px;
width: 140px !important;
height: 28px !important;
background-size: contain;
}
.payment-options-stripeprbutton label .label-image {
background: url(/themes/nhpmoto/assets/img/paiements/applepay.png) center
center no-repeat;
position: relative;
display: block;
margin-right: 15px;
width: 140px !important;
height: 27px !important;
background-size: contain;
}
.payment-options-ps_checkout-paypal label .label-image,
.payment-options-ps_checkout-paylater label .label-image,
.payment-options-paypal label .label-image,
.payment-options-paypal_bnpl label .label-image {
background: url(/themes/nhpmoto/assets/img/paiements/paypal.png) center center
no-repeat;
position: relative;
display: block;
margin-right: 15px;
width: 140px !important;
height: 25px !important;
background-size: contain;
}
.payment-options-payline label .label-image {
background: url(/themes/nhpmoto/assets/img/paiements/carte.png) center center
no-repeat;
position: relative;
display: block;
margin-right: 15px;
width: 140px !important;
height: 29px !important;
background-size: contain;
}
.payment-options-ps_wirepayment label .label-image {
background: url(/themes/nhpmoto/assets/img/paiements/virement_b.png) center
center no-repeat;
position: relative;
display: block;
margin-right: 15px;
width: 140px !important;
height: 29px !important;
background-size: contain;
}
.payment-options-paiementadministratif label .label-image {
background: url(/themes/nhpmoto/assets/img/paiements/mandat.png) center center
no-repeat;
position: relative;
display: block;
margin-right: 15px;
width: 140px !important;
height: 29px !important;
background-size: contain;
}
.payment-options-ps_checkpayment label .label-image {
background: url(/themes/nhpmoto/assets/img/paiements/cheque.png) center center
no-repeat;
position: relative;
display: block;
margin-right: 15px;
width: 140px !important;
height: 29px !important;
background-size: contain;
}
.payment-options-opartdevis label .label-image {
background: url(/themes/nhpmoto/assets/img/paiements/devis.png) center center
no-repeat;
position: relative;
display: block;
margin-right: 15px;
width: 140px !important;
height: 29px !important;
background-size: contain;
}
.payment-options-custompaymentmethod_1 label .label-image {
background: url(/themes/nhpmoto/assets/img/paiements/espece.png) center center
no-repeat;
position: relative;
display: block;
margin-right: 15px;
width: 140px !important;
height: 29px !important;
background-size: contain;
}
.payment-options-alma #payment-option-9-container label .label-image,
.payment-options-alma #payment-option-8-container label .label-image,
.payment-options-alma #payment-option-10-container label .label-image,
.payment-options-alma #payment-option-11-container label .label-image,
.payment-options-alma #payment-option-12-container label .label-image,
.payment-options-alma #payment-option-13-container label .label-image {
background: url(/themes/nhpmoto/assets/img/paiements/logo2023.svg) center
center no-repeat;
position: relative;
display: block;
margin-right: 65px;
width: 90px !important;
height: 16px !important;
background-size: contain;
}
.payplugIntegratedPayment{
max-width: 100% !important;
}
.payment-option .custom-radio.float-xs-left {
margin-top: 0px !important;
}
.ps_checkout-payment-option label {
display: flex !important;
}
.ps_checkout-mark {
display: none !important;
}
body#checkout section.checkout-step .delivery-options .delivery-option,
body#checkout
section.checkout-step
.delivery-options
.delivery-option
label
> .row,
body#checkout
section.checkout-step
.delivery-options
.delivery-option
.carrier {
align-items: center;
}
.alert-info {
background-color: #d1ecf1;
border-color: #bee5eb;
color: #0e626d;
}
.alertOne {
border: 1px solid transparent;
border-radius: 0.3125rem;
margin-bottom: 1rem;
padding: 0.75rem 1.25rem;
position: relative;
}
.js-terms {
font-size: 1.275rem;
}
body#checkout .custom-checkbox span {
top: 0.325rem;
}
.ps-shown-by-js {
display: flex;
justify-content: center;
}
.ps-shown-by-js button {
text-transform: uppercase;
}
#js-stripe-payment-form {
margin-bottom: 3em;
}
#js-clicktopay-payment-form {
margin-left: 0;
}
.clicktopay-container {
max-width: 100%;
}
.otp-form-container {
max-width: 100%;
width: 100%;
}
@media screen and (max-width: 767.98px) {
.payment-options .label-image{
display: none !important;
}
body#checkout .additional-information{
padding-left: 0% !important;
}
}
/* ===================================
DEVIS MODULE
=================================== */
#module-opartdevis-listquotation #content {
padding: 1rem;
background: var(--white);
font-size: 0.875rem;
color: var(--text-light);
}
#lineven_absencemanager_banner .message {
color: var(--white);
text-align: center;
padding: 15px;
font-size: 16px;
}
.checkoutWrapper #lineven_absencemanager {
display: none;
}
.messageExpeditionInventaire {
color: #9b1c1c;
background: #ffdede;
padding: 10px;
margin-bottom: 1rem;
border-radius: 0.564em;
}
/* ===================================
BRANDS
=================================== */
#manufacturer #main ul .brand-img {
position: relative;
width: 200px;
margin: auto;
height: 120px;
display: flex;
align-content: center;
justify-content: center;
align-items: center;
}
#manufacturer #main ul .brand-img img {
width: 100%;
}
#manufacturer #main ul .brand-infos a {
display: inline-block;
font-weight: 900;
}
#manufacturer #main ul .brand-products {
display: block;
}
#products .page-not-found,
#pagenotfound .page-not-found {
max-width: 100%;
padding: 4rem;
margin: 40px auto;
}
/* ===================================
HIGHLIGHTED INFORMATIONS
=================================== */
.highlighted-informations-mod .hidden,
.highlighted-informations .hidden,
.highlighted-informations-mod-access .hidden {
display: none;
}
.product-description::after {
border-top: none !important;
}
#products .highlighted-informations,
.featured-products .highlighted-informations,
.product-accessories .highlighted-informations,
.product-miniature .highlighted-informations {
position: absolute;
top: 217px;
bottom: 6.25rem;
z-index: 2;
width: 100%;
height: auto;
padding-top: 0.625rem;
text-align: center;
background: transparent;
transition: top 0.3s, bottom 0.3s;
}
.highlighted-informations-mod {
position: absolute;
top: 148px;
bottom: 6.25rem;
z-index: 2;
width: 100%;
height: auto;
padding-top: 0.625rem;
text-align: center;
background: transparent;
transition: top 0.3s, bottom 0.3s;
}
#index .highlighted-informations-mod {
top: 195px;
}
.highlighted-informations-mod-access {
position: absolute;
top: 75px;
bottom: 6.25rem;
z-index: 2;
width: 100%;
height: auto;
padding-top: 0.625rem;
text-align: center;
background: transparent;
transition: top 0.3s, bottom 0.3s;
}
.product-accessories .owl-buttons div {
z-index: 999;
}
.btn-icon.btn-bg-light:hover svg [fill]:not(.permanent):not(g) {
transition: fill 0.3s ease;
fill: var(--white);
}
.btn-action.btn-hover-green.btn.btn-icon.btn-bg-light.add-to-cart {
margin-right: 4px;
}
#products .highlighted-informations .quick-view,
.featured-products .highlighted-informations .quick-view,
.product-accessories .highlighted-informations .quick-view,
.product-miniature .highlighted-informations .quick-view {
font-size: 1.08rem;
}
.product-accessories .insteadofhtwo {
margin-bottom: 20px;
}
/* ===================================
MODAL SHOPPING CART
=================================== */
#blockcart-modal.modal {
z-index: 999999999;
}
#blockcart-modal.new_blockcart .modal-content {
opacity: 1;
transform: scale(1);
transition: all 0.17s;
}
#blockcart-modal:not(.new_blockcart) .modal-content {
transform: scale(0);
-webkit-transform: scale(0);
}
div#blockcart-modal:not(.new_blockcart):before {
content: "";
display: inline-block;
font-family: FontAwesome, sans-serif;
font-size: 16px;
animation: spiner_loading 1s infinite linear;
width: 60px;
height: 60px;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
margin-top: -30px;
margin-left: -30px;
}
@-webkit-keyframes spiner_loading {
from {
transform: rotate(0);
-webkit-transform: rotate(0);
}
to {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
@keyframes spiner_loading {
from {
transform: rotate(0);
-webkit-transform: rotate(0);
}
to {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
#blockcart-modal.modal.fade
.modal-dialog__offcanvas.modal-dialog__offcanvas--right {
right: 0;
transform: translateX(100%);
}
#blockcart-modal.modal.in .modal-dialog__offcanvas,
#blockcart-modal.modal.in
.modal-dialog__offcanvas.modal-dialog__offcanvas--right {
transform: translateX(0);
}
#blockcart-modal.modal.fade
.modal-dialog__offcanvas.modal-dialog__offcanvas--big {
max-width: 31.25rem;
}
#blockcart-modal.modal.fade .modal-dialog__offcanvas {
height: 100%;
margin: 0;
max-width: 21.875rem;
position: absolute;
top: 0;
transform: translateX(-100%);
transition: transform 0.3s ease-out;
transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
width: 100%;
}
#blockcart-modal .modal-dialog__offcanvas .modal-content {
border-radius: 0;
border-width: 0;
height: inherit;
box-shadow: 0 0.25rem 0.5rem rgba(4, 28, 28, 0.5);
}
#blockcart-modal .modal-dialog__offcanvas .modal-header {
border-radius: inherit;
}
#blockcart-modal .modal-dialog__offcanvas .modal-body {
height: inherit;
overflow-y: auto;
}
/* Effet de flou sur le body quand une modal est ouverte */
/* body.modal-open {
overflow: hidden;
}
body.modal-open > *:not(.modal):not(.modal-backdrop) {
filter: blur(3px);
transition: filter 0.3s ease-in-out;
} */
/* Alternative avec sélecteurs plus spécifiques */
/* body.modal-open #wrapper,
body.modal-open #header,
body.modal-open #footer,
body.modal-open main {
filter: blur(3px);
transition: filter 0.3s ease-in-out;
} */
/* Retirer le flou quand la modal se ferme */
/* body:not(.modal-open) > * {
filter: none;
transition: filter 0.3s ease-in-out;
} */
/* Assurer que la modal et le backdrop ne soient pas floutés */
/* .modal,
.modal-backdrop {
filter: none !important;
} */
/* ===================================
CAROUSEL SLIDER PRODUCT
=================================== */
.images-container .carousel {
position: relative;
}
.images-container .carousel .carousel-inner {
height: auto;
padding: 0;
}
.carousel-indicators .owl-wrapper-outer.active {
width: auto;
height: auto;
background-color: transparent;
}
.carousel-indicators .active {
background-color: transparent;
}
.carousel-indicators .thumb-container .active {
width: 12px;
height: 12px;
margin: 0;
background-color: var(--white);
}
.images-container .carousel-item {
border: 1px solid var(--primary-green);
}
.images-container .carousel-indicators {
position: relative;
top: 0;
left: 0;
height: auto;
width: 100%;
margin-left: auto;
display: flex;
}
.images-container .carousel-indicators li {
text-indent: 0;
display: inherit;
float: left;
width: 98px;
height: 98px;
margin: 5px 0;
border-color: transparent;
background: transparent;
position: relative;
}
.images-container .carousel-indicators li img {
width: 100%;
height: auto;
border: none;
padding: 0;
}
.images-container .product-images li.thumb-container:hover img,
.images-container .product-images li.thumb-container img.selected {
border: var(--primary-green) 3px solid;
}
.images-container .product-images li.thumb-container img {
border: #d9d9d9 3px solid;
}
.images-container .product-images li.thumb-container .thumb {
margin-right: 0;
margin-bottom: 0;
}
.images-container .carousel-control.right,
.images-container .carousel-control.left {
background-image: none;
}
.images-container
.product-images
li.thumb-container.product-video-thumb:before {
background: rgba(0, 0, 0, 0.45);
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
}
.images-container .item-slider {
margin-top: 0;
position: relative;
}
.images-container .owl-buttons div {
top: 35px;
}
.images-container .owl-pagination {
display: none;
}
.images-container .layer {
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
text-align: center;
cursor: pointer;
background: rgba(0, 0, 0, 0.6);
opacity: 0;
}
.images-container .layer:hover {
opacity: 1;
}
.quickview .images-container .layer:hover {
opacity: 0;
}
.images-container .layer .zoom-in {
font-size: 3.125rem;
color: var(--white);
}
.images-container
.product-images
li.thumb-container.product-video-thumb
.video-icon {
right: calc(50% - 1.25rem);
top: calc(50% - 1.25rem);
background-color: transparent;
color: var(--white);
font-size: 2.5rem;
position: absolute;
}
/* ===================================
FLOATING BUTTON
=================================== */
.HeaderFloatingButton {
position: fixed;
top: 0;
bottom: 0;
right: 0.5rem;
margin: auto 0;
align-items: flex-end;
justify-content: center;
flex-direction: column;
pointer-events: none;
display: none;
z-index: 1000;
}
.HeaderFloatingButton .block-button,
.HeaderFloatingButton .block-button.button-style2 {
pointer-events: all;
height: inherit;
margin: 3px 0 0;
}
.HeaderFloatingButton .block-button .button,
.HeaderFloatingButton .block-button.button-style2 .button {
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: row;
width: 60px;
padding: 1rem;
overflow: hidden;
border-radius: 40px !important;
background: #75bf77;
box-shadow: none;
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
background 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.HeaderFloatingButton .block-button .button .txt,
.HeaderFloatingButton .block-button.button-style2 .button .txt {
opacity: 0;
white-space: nowrap;
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) 20ms;
color: var(--white);
vertical-align: middle;
display: inline-block;
font-size: 1rem;
text-transform: inherit;
font-style: inherit;
font-weight: inherit;
margin: inherit;
}
.HeaderFloatingButton .block-button .button .ico,
.HeaderFloatingButton .block-button.button-style2 .button .ico {
margin: 0;
display: inline-block;
vertical-align: middle;
}
.HeaderFloatingButton .block-button .button .ico + .txt,
.HeaderFloatingButton .block-button .button .txt + .ico,
.HeaderFloatingButton .block-button.button-style2 .button .ico + .txt,
.HeaderFloatingButton .block-button.button-style2 .button .txt + .ico {
padding-left: 0.5rem;
}
.HeaderFloatingButton .block-button .button [class^="icon-"],
.HeaderFloatingButton .block-button.button-style2 .button [class^="icon-"] {
display: block;
width: 1.75rem !important;
height: 1.75rem !important;
}
.HeaderFloatingButton .block-button .button:hover,
.HeaderFloatingButton .block-button.button-style2 .button:hover {
width: 250px;
background: #149618;
box-shadow: none;
}
.HeaderFloatingButton .block-button .button:hover .txt,
.HeaderFloatingButton .block-button.button-style2 .button:hover .txt {
opacity: 1;
}
.HeaderFloatingButton .block-button.button-style2 .button {
background: #75bf77;
}
.HeaderFloatingButton .block-button.button-style2 .button .txt {
color: var(--white);
}
.HeaderFloatingButton .block-button.button-style2 .button:hover {
background: #52af55;
}
.HeaderFloatingButton .block-socialbar {
pointer-events: all;
background: transparent;
padding: 0;
margin: 0;
}
.HeaderFloatingButton .block-socialbar.vertical li {
height: 70px;
margin: 3px 0 0;
}
.HeaderFloatingButton .block-socialbar.vertical li a {
position: relative;
padding: 1.5rem;
border-radius: 40px;
display: inline-block;
}
.HeaderFloatingButton .block-socialbar.vertical li.img a {
position: relative;
padding: 0;
display: inline-block;
}
.HeaderFloatingButton .block-socialbar.vertical li a [class^="icon-"],
.scrollUp [class^="icon-"] .color1 {
fill: var(--white);
}
.HeaderFloatingButton .block-socialbar.vertical li a:before {
background: #149618;
text-transform: capitalize;
white-space: nowrap;
content: attr(title);
border-radius: 4px;
padding: 8px;
color: var(--white);
position: absolute;
top: 20%;
bottom: 20%;
right: 0;
z-index: -1;
opacity: 0;
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
height: 35px;
margin-right: 10px;
}
.HeaderFloatingButton .block-socialbar.vertical li a:hover:before {
right: 4.5rem;
opacity: 1;
}
.HeaderFloatingButton [class^="icon-"] {
pointer-events: none;
display: block;
width: 1.95rem;
height: 1.95rem;
}
.HeaderFloatingButton
.block-socialbar.vertical
li
.block-socialbar.vertical
li
+ li {
margin: 3px 0 0;
}
.HeaderFloatingButton .block-socialbar.vertical li .block-socialbar a {
padding: 1rem !important;
border-radius: 40px !important;
}
/* Social media colors */
.HeaderFloatingButton .block-socialbar.vertical li.googleplus a,
.HeaderFloatingButton .block-socialbar.vertical li.googleplus a:before {
background: #dd4b39;
}
.HeaderFloatingButton .block-socialbar.vertical li.facebook1 a,
.HeaderFloatingButton .block-socialbar.vertical li.facebook1 a:before {
background: #2d9be5;
}
.HeaderFloatingButton .block-socialbar.vertical li.googlemybusiness a,
.HeaderFloatingButton .block-socialbar.vertical li.googlemybusiness a:before {
background: #4e8df7;
}
.HeaderFloatingButton .block-socialbar.vertical li.pinterest a,
.HeaderFloatingButton .block-socialbar.vertical li.pinterest a:before {
background: #cb2027;
}
.HeaderFloatingButton .block-socialbar.vertical li.facebook a,
.HeaderFloatingButton .block-socialbar.vertical li.facebook a:before {
background: #3b5998;
}
.HeaderFloatingButton .block-socialbar.vertical li.twitter a,
.HeaderFloatingButton .block-socialbar.vertical li.twitter a:before {
background: #55acee;
}
.HeaderFloatingButton .block-socialbar.vertical li.linkedin a,
.HeaderFloatingButton .block-socialbar.vertical li.linkedin a:before {
background: #008cc9;
}
.HeaderFloatingButton .block-socialbar.vertical li.viadeo a,
.HeaderFloatingButton .block-socialbar.vertical li.viadeo a:before {
background: #f07355;
}
.HeaderFloatingButton .block-socialbar.vertical li.instagram a,
.HeaderFloatingButton .block-socialbar.vertical li.instagram a:before {
background: #125688;
}
.HeaderFloatingButton .block-socialbar.vertical li.youtube a,
.HeaderFloatingButton .block-socialbar.vertical li.youtube a:before {
background: #e62117;
}
.HeaderFloatingButton.left {
left: 0.5rem;
right: inherit;
align-items: flex-start;
}
.HeaderFloatingButton.left .block-socialbar.vertical li a:before {
left: 0;
right: inherit;
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.HeaderFloatingButton.left .block-socialbar.vertical li a:hover:before {
left: 4.5rem;
right: inherit;
opacity: 1;
}
header .block-openhours li,
header .block-openhours ul {
display: inline-block;
margin-right: 0.5rem;
line-height: 1.4;
font-weight: 100;
}
header .block-openhours .day {
display: inline-block;
color: var(--white);
border-radius: 0;
text-transform: uppercase;
font-weight: 600;
padding: 0.5rem;
margin: 0.25rem;
background-color: #494e50;
}
header .header-nav-bar ul {
padding-left: 0;
}
header .header-nav-bar a {
transition: var(--transition-slow);
}
header .header-nav-bar a:hover {
background-color: #494e50;
border-radius: var(--border-radius);
color: var(--white);
}
/* ===================================
NEWSLETTER POPUP
=================================== */
.custom-popup-newsletter#dialogNewsletter {
border-radius: 7px;
background: var(--white);
background-size: cover;
border: 1px solid #d1d1d1;
z-index: 99999999;
position: fixed;
top: 55px;
left: 0;
right: 0;
max-width: 1040px;
width: 90vw;
padding: 2em 1.5em;
color: #f0f0f0;
}
.custom-popup-newsletter#dialogNewsletter form.close {
height: 40px;
width: 40px;
position: absolute;
top: 10px;
right: 20px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 100%;
opacity: 1;
}
.custom-popup-newsletter#dialogNewsletter form.close:hover {
border-width: 2px;
}
.custom-popup-newsletter#dialogNewsletter form.close button {
background-color: transparent;
border: none;
color: #f0f0f0;
font-size: 1.5em;
cursor: pointer;
}
.custom-popup-newsletter#dialogNewsletter .wrapper-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
row-gap: 2em;
column-gap: 4em;
}
.custom-popup-newsletter#dialogNewsletter .pictures-container {
display: none;
flex-flow: column;
justify-content: center;
align-items: center;
}
.custom-popup-newsletter#dialogNewsletter .picturewatch {
z-index: 150;
margin: auto;
display: flex;
width: 100%;
max-width: 330px;
justify-content: center;
padding-bottom: 0;
}
.custom-popup-newsletter#dialogNewsletter .picturewatch img {
width: 100%;
max-width: 100%;
height: fit-content;
}
.custom-popup-newsletter#dialogNewsletter .logointerstellar {
margin-top: 1em;
max-width: 160px;
}
.custom-popup-newsletter#dialogNewsletter .main-container {
display: flex;
flex-flow: column;
width: 100%;
max-width: 680px;
}
.custom-popup-newsletter#dialogNewsletter .main-container h3 {
text-transform: uppercase;
font-size: 35px;
font-style: normal;
font-weight: 400;
line-height: 40px;
letter-spacing: 0.15em;
color: var(--black);
margin-bottom: 1em;
}
.custom-popup-newsletter#dialogNewsletter .main-container h4 {
font-size: 1.25rem;
font-family: "Lato", Arial, Helvetica, sans-serif;
margin-bottom: 1em;
text-align: left;
color: #f0f0f0;
}
.custom-popup-newsletter#dialogNewsletter .two {
margin-top: 4rem;
}
.custom-popup-newsletter#dialogNewsletter p.line {
color: #fafafa;
font-family: Lato;
font-size: 0.9375rem;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.04688rem;
}
.custom-popup-newsletter#dialogNewsletter p.line span {
color: #9e8c4a;
}
.custom-popup-newsletter#dialogNewsletter input {
width: calc(100% - 130px);
height: 3.1rem;
border: 1px solid #b8b7b7;
background-color: var(--white);
margin-bottom: 1.5em;
padding: 1em 0.5em;
color: #585858 !important;
}
.custom-popup-newsletter#dialogNewsletter .main-container input:hover,
.custom-popup-newsletter#dialogNewsletter .main-container input:active,
.custom-popup-newsletter#dialogNewsletter .main-container input:focus {
border-color: #dc3e36;
color: var(--white);
}
.custom-popup-newsletter#dialogNewsletter .main-container button {
height: 3.1rem;
color: var(--white);
border-color: #9e8c4a;
border-width: 0;
background-color: #9e8c4a;
font-size: 1.25em;
font-family: "Lato", Arial, Helvetica, sans-serif;
margin-bottom: 1em;
text-align: center;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
}
.custom-popup-newsletter#dialogNewsletter .main-container button:hover,
.custom-popup-newsletter#dialogNewsletter .main-container button:active {
color: #f0f0f0;
border-color: #9e8c4a;
background-color: #9e8c4a;
}
.custom-popup-newsletter#dialogNewsletter .main-container label {
display: none;
}
#dialogNewsletter-backdrop {
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
pointer-events: none;
position: fixed;
inset: 0;
z-index: 998;
backdrop-filter: blur(10px);
background-color: rgb(107 114 128 / 0.4);
}
#dialogNewsletter-backdrop.hidden {
display: none;
}
#dialogNewsletter .countdown-container {
margin-bottom: 1em;
margin-top: 1.5em;
display: flex;
width: 100%;
flex-flow: row;
align-items: center;
justify-content: center;
color: #f0f0f0;
}
#dialogNewsletter .countdown-wrapper {
margin: auto;
display: flex;
width: 100%;
max-width: 320px;
flex-flow: row;
justify-content: space-around;
align-items: center;
}
#dialogNewsletter .countdown-wrapper .unit-container {
display: flex;
width: 100%;
max-width: 50px;
flex-flow: column;
}
#dialogNewsletter .countdown-wrapper .unit-container.larger {
max-width: 75px;
}
#dialogNewsletter .countdown-wrapper .unit {
display: flex;
justify-content: center;
font-size: 2.5em;
}
#dialogNewsletter .countdown-wrapper .unit-container span {
text-align: center;
font-size: 10px;
font-weight: 100;
text-transform: uppercase;
font-family: "Articulat CF", Arial, Helvetica, sans-serif;
margin-top: 0.5rem;
}
#dialogNewsletter #mce-responses {
margin-top: 0.2rem !important;
margin-bottom: 1rem !important;
}
#dialogNewsletter .logoLunar {
text-align: center;
margin-bottom: 1rem;
}
/* ===================================
SPECIAL BANNERS
=================================== */
.barreFlash {
display: flex;
justify-items: center;
background: #e13f17;
padding: 0.5rem 2rem;
align-items: center;
}
.barreFlash p {
margin: 0;
}
.barreFlash .font-semibold {
font-weight: 600;
}
.barreFlash .leading-6 {
line-height: 1.5rem;
}
.barreFlash .text-sm {
font-size: 1.275rem;
line-height: 1.25rem;
text-align: center;
}
.barreFlash .text-white {
color: var(--white) !important;
}
.barreFlash .justify-end {
justify-content: flex-end;
}
.barreFlash .flex-1 {
flex: 1 1 0%;
}
.barreFlash .flex {
display: flex;
}
.barreFlash .-m-3 {
margin: -0.75rem;
}
.barreFlash svg:not(:root) {
overflow: hidden;
}
.barreFlash .w-5 {
width: 1.25rem;
}
.barreFlash .h-5 {
height: 1.25rem;
}
.barreFlash .inline {
display: inline;
}
.barreFlash .fill-current {
fill: currentColor;
}
.barreFlash .w-0\.5 {
width: 0.125rem;
}
.barreFlash .h-0\.5 {
height: 0.125rem;
}
.barreFlash .sr-only {
border: 0 !important;
clip: rect(1px, 1px, 1px, 1px) !important;
clip-path: inset(50%) !important;
height: 1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
white-space: nowrap !important;
}
.barreFlash [type="button"],
.barreFlash button {
appearance: button;
background-color: transparent;
background-image: none;
border: none;
font-family: inherit;
font-size: 100%;
font-weight: inherit;
line-height: inherit;
color: inherit;
margin: 0;
padding: 0;
}
.MyOrderBtn {
display: flex;
justify-content: space-between;
flex-direction: column-reverse;
}
.MyOrderBtn button {
margin: 1rem 0;
}
/* ===================================
SPECIAL WIDGETS
=================================== */
#smartsupp-widget-container {
position: relative;
z-index: 9999999999999;
}
#smartsupp-widget-container > [data-testid="widgetMessengerFrame"] {
z-index: 9999999999999 !important;
}
#trustbadge-container-98e3dadd90eb493088abdc5597a70810 {
z-index: 9999 !important;
}
._1gwv20v ._owyw4l {
inset: auto 10px 164px auto !important;
}
._1gwv20v:hover ._owyw4l,
._1gwv20v ._owyw4l:hover {
inset: auto 10px 164px auto !important;
}
._12n8yed {
inset: auto 0 54px 22px !important;
}
._12n8yed:hover {
inset: auto 0 54px 22px !important;
}
._x4mley {
left: 20px !important;
}
/* ===================================
MISCELLANEOUS
=================================== */
.fade.in:not(.show) {
opacity: 1;
}
.modal-backdrop.fade.in:not(.show) {
opacity: 0.5;
}
.availability-inline.available {
/* Additional styles if needed */
}
/* ===================================
MEDIA QUERIES
=================================== */
@media (max-width: 500px) {
#_desktop_logo {
display: block !important;
}
#search_widget #top_search {
display: none;
}
div#bloc-slogan h1 {
font-size: 25px;
line-height: 33px;
padding-left: 15px;
padding-right: 15px;
width: 100%;
}
#adw_services_1 {
padding: 50px 30px;
}
.one-four.mobile-full.text-center.logotext-footer {
width: 100%;
}
.logotext-footer {
margin-right: 0;
}
.d-flex-reseau {
display: none;
}
#product .product-quantity {
flex-direction: column;
}
.product-description h2,
.product-description h3,
.product-description h4 {
word-break: break-all;
}
.product-description video,
.product-description iframe {
width: 100%;
}
#slider .description h1 {
font-size: 1.75rem;
}
#slider {
height: auto;
}
#slider .description {
top: auto;
bottom: 0;
left: 0;
}
.page-landingpage #category_1 {
padding-top: 0;
}
.custom-popup-newsletter#dialogNewsletter .main-container button {
font-size: 0.9em;
}
.custom-popup-newsletter#dialogNewsletter input {
width: calc(100% - 94px);
}
.custom-popup-newsletter#dialogNewsletter .main-container h3 {
font-size: 1.35em;
line-height: 30px;
}
.custom-popup-newsletter#dialogNewsletter .main-container h4 {
font-size: 0.75em;
}
.custom-popup-newsletter#dialogNewsletter .picturewatch {
max-width: 190px;
}
#index .carousel .carousel-inner {
height: 610px !important;
}
#index .carousel .carousel-indicators {
display: none;
}
#header #_desktop_user_info .menu-sub-dropdown {
display: none;
}
#header .header-nav-bar .container .row > .d-flex {
flex-wrap: wrap;
align-items: center !important;
}
#header .header-nav-bar .d-flex > div {
width: 100%;
}
#header .header-nav-bar {
padding: 5px !important;
}
.block-openhours li {
width: 100%;
text-align: center;
}
.register-form .checkbox-inline.customcheckbox .checkbox {
flex-direction: row;
}
.register-form .checkbox-inline.customcheckbox div {
width: 80%;
}
.register-form .checkbox-inline.customcheckbox .checkbox span {
margin-right: 1.9rem;
}
.register-form .checkbox-inline.customcheckbox em {
padding-left: 0;
}
#js-product-list-header {
margin-top: 2rem;
}
#category #left-column #search_filters_wrapper {
padding-left: 15px !important;
padding-right: 15px !important;
margin: 0 !important;
}
.products-selection .filter-button {
padding-left: calc(var(--bs-gutter-x) * 0.5);
margin-top: 20px;
}
#search_filter_toggler {
background: var(--primary-green);
color: var(--white);
}
#contact .wrapper-flex {
flex-direction: column;
margin-top: 40px;
}
#contact .input-group > .form-control,
.input-group > .form-select {
position: relative;
flex: 0;
width: 54%;
}
#identity .input-group.js-parent-focus {
display: block;
}
#identity .input-group > .form-control,
.input-group > .form-select {
position: relative;
flex: 0;
width: 220px;
}
#identity .input-group.js-parent-focus .input-group-btn .btn {
height: 40px;
}
#authentication .form-group span.input-group-btn button {
height: 40px;
}
#checkout .input-group > .form-control,
#checkout .input-group > .form-select {
flex: none;
width: 220px;
}
#checkout
.btn:not(.btn-outline):not(.btn-dashed):not(.border-hover):not(
.border-active
):not(.btn-flush):not(.btn-icon) {
border: 0;
padding: calc(0.75rem + 3px) calc(1.5rem + 1px);
}
body#checkout section.checkout-step .forgot-password {
margin-left: 0;
margin-bottom: 10px;
}
body#checkout section.checkout-step .step-title {
font-size: 1.3rem;
}
.page-addresses .addresses-footer {
width: auto !important;
}
#blockcart-modal .modal-dialog {
width: calc(100% - 12px);
}
.quickview .modal-dialog {
width: calc(100% - 10px);
max-width: 64rem;
}
.highlighted-informations-mod-access,
.highlighted-informations {
position: absolute;
top: 215px;
bottom: 6.25rem;
z-index: 2;
width: 100% !important;
display: block !important;
}
.highlighted-informations-mod {
position: absolute;
top: 195px;
bottom: 6.25rem;
z-index: 2;
width: 100%;
display: block !important;
}
.carousel-indicators {
top: 115px;
left: 95px;
}
.carousel-indicators li img {
width: 95%;
height: 50px;
}
.carousel-indicators li {
width: 20%;
height: 50px;
}
.carousel-indicators .active {
width: 20%;
height: 50px;
}
#equipe .d-flex {
flex-direction: column;
}
#category #left-column #search_filters .facet {
margin-bottom: 15px;
}
#search_filters_wrapper {
padding: 15px;
}
#dispo-custom {
padding-left: 15px;
}
#blockcart-modal .cart-content {
padding-left: 0;
}
form .form-control-label {
text-align: left;
}
}
@media (max-width: 600px) {
.m-justify-center {
justify-content: center !important;
}
.d-flex.footer-one {
flex-wrap: wrap;
justify-content: center;
}
.footer-one-right {
margin-top: 50px;
}
.cart-grid.wrappercart {
flex-direction: column;
}
.cart-grid-body,
.product-line-grid-body,
.cart-grid-right {
width: 100%;
}
.product-line-grid-right .cart-line-product-actions .remove-from-cart,
.product-line-grid-right .product-price .remove-from-cart {
display: block;
}
.dispo-custom {
width: 100%;
}
#myCarouselProduct {
width: 100%;
left: auto;
margin-left: auto;
}
#myCarouselProduct iframe {
width: 100%;
height: 341px;
}
#js-product-list .products.row {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-column-start: auto;
gap: 0.1rem;
}
#products .product-miniature,
.featured-products .product-miniature,
.product-accessories .product-miniature,
.product-miniature .product-miniature {
margin: 0 0.5125rem;
}
.MyOrderBtn {
flex-direction: column;
}
.MyOrderBtn button {
margin: 1rem 0;
}
#blockcart-modal .product-image {
margin: 0;
}
._desktop_cart_header .toolbar-dropdown {
height: 200px;
overflow-y: scroll;
}
.insteadofhtwo {
margin-top: 50px;
}
.custom-popup-newsletter#dialogNewsletter .picturewatch {
max-width: 270px;
}
}
@media (max-width: 731px) {
.blockreassurance.footer-box-bootam-support {
border: none;
}
}
@media (max-width: 767px) {
.entry_account,
.entry_account .row_one {
flex-direction: column;
}
.links.w-50,
.links-details.w-50,
.entry_account .row_one > div {
width: 100% !important;
}
#category .wrapper-flex {
flex-wrap: wrap;
}
#content-wrapper {
margin-top: 2rem;
}
}
@media (max-width: 768px) {
.product-line-grid-right.product-line-wrapper,
.product-line-grid-right.product-line-sous-wrapper {
padding-left: 0;
padding-right: 0;
}
}
@media (max-width: 960px) {
#menuArea {
display: inline-block;
position: relative;
z-index: 999;
height: 36px;
width: 100%;
}
.content_menu {
display: table;
position: fixed;
bottom: 0;
z-index: 9;
width: 100%;
background: var(--primary-green);
}
.content_menu label {
display: table-cell;
vertical-align: middle;
width: 33.33%;
text-align: center;
text-transform: uppercase;
font-size: 14px;
border-right: 1px solid var(--white);
padding: 10px;
}
.content_menu label a {
color: var(--white);
display: block;
}
.content_menu label a:hover {
color: var(--white) !important;
}
.content_menu .svg-icon svg [fill]:not(.permanent):not(g) {
transition: fill 0.3s ease;
fill: var(--white);
}
.arrow {
border: transparent !important;
}
.mm_menu_content_title i.fa.fa-bars {
color: var(--primary-green);
}
.custom-popup-newsletter#dialogNewsletter .picturewatch {
max-width: 270px;
}
.custom-popup-newsletter#dialogNewsletter .main-container h3 {
font-size: 1.35em;
line-height: 30px;
}
.custom-popup-newsletter#dialogNewsletter .main-container h4 {
font-size: 0.75em;
}
.custom-popup-newsletter#dialogNewsletter .main-container button {
font-size: 0.9em;
}
.custom-popup-newsletter#dialogNewsletter input {
width: calc(100% - 94px);
}
}
@media (max-width: 1000px) {
.header-nav-bar .contact-link {
display: none;
width: 0;
}
.header-nav-bar .col-md-5.right-nav.text-center {
width: 65%;
}
.blockreassurance_product .row {
justify-content: center;
}
.blockreassurance_product .row .col-3 {
flex: 0 0 auto;
width: 330px;
}
.blockreassurance.footer-box-bootam-support:nth-child(2) {
border: none;
}
.footer-one-right {
flex-wrap: wrap;
justify-content: center;
}
.footer-one-right .one-four {
width: 49%;
}
}
@media (max-width: 1024px) {
.entry_account,
.entry_account .row_one {
flex-direction: column;
}
.links.w-50,
.links-details.w-50,
.entry_account .row_one > div {
width: 100% !important;
}
}
@media (max-width: 1199px) {
.owl-wrapper-outer .owl-wrapper .owl-item .product {
width: 100% !important;
}
.owl-wrapper-outer .owl-wrapper .owl-item .product-miniature {
width: auto;
}
#products .thumbnail-container,
.featured-products .thumbnail-container,
.product-accessories .thumbnail-container,
.product-miniature .thumbnail-container {
width: auto;
height: auto;
}
#products .thumbnail-container img,
.featured-products .thumbnail-container img,
.product-accessories .thumbnail-container img,
.product-miniature .thumbnail-container img {
width: auto;
height: auto;
}
.owl-carousel .col-md-3 {
flex: 0 0 auto;
width: 100%;
}
#products .product-description,
.featured-products .product-description,
.product-accessories .product-description,
.product-miniature .product-description {
width: 100%;
}
.highlighted-informations-mod-access,
.highlighted-informations {
position: absolute;
top: 155px;
bottom: 6.25rem;
z-index: 2;
width: 100% !important;
display: block !important;
}
.highlighted-informations-mod {
position: absolute;
top: 115px;
bottom: 6.25rem;
z-index: 2;
width: 100%;
display: block !important;
}
}
@media (max-width: 1200px) {
#category .wrapper-flex,
#new-products .wrapper-flex {
flex-direction: column;
}
#category #left-column {
width: 100%;
margin-bottom: 0;
margin-top: 15px;
min-height: 0;
}
#category #content-wrapper,
#prices-drop #content-wrapper,
#new-products #content-wrapper {
width: 100%;
padding-left: 0;
}
.blochp {
display: none !important;
}
.changestatus .mm_tabs_li .mm_columns_contents_ul {
padding: 0;
}
}
@media (max-width: 1230px) {
.cart-grid.wrappercart {
flex-direction: column;
}
.cart-grid-body,
.product-line-grid-body,
.cart-grid-right {
width: 100%;
}
.product-line-grid-right .cart-line-product-actions .remove-from-cart,
.product-line-grid-right .product-price .remove-from-cart {
display: block;
}
.dispo-custom {
width: 100%;
}
}
@media (max-width: 1270px) {
.blochp {
display: none !important;
}
}
@media (max-width: 1391px) {
.MyOrderBtn {
flex-direction: column;
}
.MyOrderBtn button {
margin: 1rem 0;
}
}
@media (min-width: 768px) {
#header .layout_layout1 .ets_mm_megamenu_content {
background: transparent;
}
.mm_block_type_image .ets_mm_block_content {
width: 140px;
margin: 0 auto;
}
}
@media (min-width: 992px) {
#myCarouselProduct {
width: 100%;
margin: 0 auto;
left: 0;
}
#myCarouselProduct iframe {
width: 100%;
height: 289px;
}
#left-column .wrapper {
position: sticky;
top: 15rem;
right: 0;
height: calc(100vh - 7rem);
overflow-y: auto;
}
body#checkout section.checkout-step .address-item {
margin: 3px;
}
#manufacturer #js-product-list .product.col-lg-3 {
flex: 0 0 auto;
width: 20%;
}
}
@media (min-width: 1200px) {
#search_widget {
min-width: 70%;
}
#js-product-list .products .product {
flex: 0 0 25%;
max-width: 25%;
}
.column_size_3 {
display: flex;
align-items: center;
justify-content: center;
width: 20%;
height: calc(802px / 4);
position: relative;
box-sizing: border-box;
overflow: hidden;
}
.mm_columns_contents_ul {
height: calc(100% - 230px + 2px);
overflow: scroll;
}
}
@media (min-width: 1450px) {
#js-product-list .products .product {
flex: 0 0 20%;
max-width: 20%;
}
}
@media (min-width: 640px) {
.barreFlash:before {
content: "";
flex: 1 1 0%;
}
}
@media (min-height: 835px) {
.custom-popup-newsletter#dialogNewsletter .pictures-container {
display: flex;
}
.custom-popup-newsletter#dialogNewsletter h4 {
/* display: flex; */
}
}
@media only screen and (min-width: 90.063em) {
.block-contact p {
font-size: 14px;
color: var(--white);
letter-spacing: 0.7px;
font-weight: 400;
margin-bottom: 0;
line-height: 1.4;
}
}
@media only screen and (min-width: 94.063em) {
.content .sectionideal2-form .block-form {
width: 80%;
}
.HeaderFloatingButton {
display: flex;
}
}
@media screen and (min-width: 320px) and (max-width: 360px) {
.carousel-indicators {
top: 115px;
left: 95px;
}
.carousel-indicators li img {
width: 95%;
height: 50px;
}
.carousel-indicators li {
width: 20%;
height: 50px;
}
.carousel-indicators .active {
width: 20%;
height: 50px;
}
}
@media screen and (min-width: 768px) and (max-width: 980px) {
.carousel-indicators {
top: 240px;
left: 213px;
}
}
/* ===================================
KEYFRAMES
=================================== */
@keyframes bounce {
to {
transform: scale(0.9);
}
}
@keyframes animate {
0% {
transform: scale(1);
}
100% {
transform: scale(1.1);
}
}
/* ===================================
PRINT STYLES
=================================== */
@media print {
.no-print,
#header,
#footer,
.btn,
.HeaderFloatingButton,
#goToTop,
.content_menu {
display: none !important;
}
body {
background: var(--white) !important;
color: var(--black) !important;
}
.product-price-and-shipping .price {
color: var(--black) !important;
}
}
/* ===================================
ACCESSIBILITY
=================================== */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
@media (prefers-contrast: high) {
:root {
--primary-green: #0066cc;
--text-dark: #000000;
--border-gray: #000000;
--white: #ffffff;
}
}
/* ===================================
FOCUS STYLES
=================================== */
*:focus {
outline: 2px solid var(--primary-green);
outline-offset: 2px;
}
.btn:focus,
.form-control:focus,
input:focus,
textarea:focus,
select:focus {
outline: 2px solid var(--primary-green);
outline-offset: 2px;
}
/* ===================================
PERFORMANCE OPTIMIZATIONS
=================================== */
.will-change-transform {
will-change: transform;
}
.will-change-opacity {
will-change: opacity;
}
.backface-hidden {
backface-visibility: hidden;
}
.gpu-accelerated {
transform: translateZ(0);
}
/* ===================================
DARK MODE SUPPORT
=================================== */
/* @media (prefers-color-scheme: dark) {
:root {
--white: #1a1a1a;
--black: #ffffff;
--text-dark: #ffffff;
--text-light: #cccccc;
--secondary-gray-light: #2d2d2d;
--background-light: #2d2d2d;
--background-alt: #333333;
--border-gray: #555555;
--border-light: #444444;
}
body {
background-color: #1a1a1a;
color: #ffffff;
}
.modal {
background-color: #2d2d2d;
}
.card,
.form-control {
background-color: #2d2d2d;
border-color: #555555;
color: #ffffff;
}
} */
/* ===================================
TEXTE EXPANDABLE
=================================== */
.expandable-text {
position: relative;
}
.expandable-content {
position: relative;
}
.text-truncated {
display: none;
}
.expandable-text.expanded .text-truncated {
display: inline;
}
.btn-expand,
.btn-expand-auto {
background: none;
border: none;
color: var(--primary-green);
cursor: pointer;
font-size: 0.9rem;
font-weight: 600;
padding: 0.5rem 0;
margin-top: 0.5rem;
display: inline-flex;
align-items: center;
gap: 0.25rem;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.btn-expand:hover,
.btn-expand-auto:hover {
color: var(--primary-green-hover);
transform: translateY(-1px);
}
.btn-expand:focus,
.btn-expand-auto:focus {
outline: 2px solid var(--primary-green);
outline-offset: 2px;
}
.btn-expand .material-icons,
.btn-expand-auto .material-icons {
font-size: 1.2rem;
transition: transform 0.3s ease;
}
.expandable-text.expanded .btn-expand .material-icons {
transform: rotate(180deg);
}
/* Styles pour la version automatique */
.auto-expandable {
transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
}
.btn-expand-auto {
margin-top: 0.75rem;
background: rgba(var(--primary-green-rgb), 0.1);
border-radius: var(--border-radius);
padding: 0.5rem 1rem;
}
.btn-expand-auto:hover {
background: rgba(var(--primary-green-rgb), 0.2);
}
/* Animation pour l'icône */
@keyframes rotateIcon {
from {
transform: rotate(0deg);
}
to {
transform: rotate(180deg);
}
}
.expandable-text.expanded .expand-icon {
animation: rotateIcon 0.3s ease forwards;
}
/* Responsive */
@media (max-width: 768px) {
.btn-expand,
.btn-expand-auto {
font-size: 0.85rem;
padding: 0.4rem 0.8rem;
}
}
/* Variantes de style */
.expandable-text.style-minimal .btn-expand {
color: var(--text-medium);
font-weight: 400;
text-transform: none;
letter-spacing: normal;
}
.expandable-text.style-highlighted .btn-expand {
background: var(--primary-green);
color: var(--white);
padding: 0.4rem 0.8rem;
border-radius: var(--border-radius);
margin-top: 0.75rem;
}
.expandable-text.style-highlighted .btn-expand:hover {
background: var(--primary-green-hover);
}
/* ===================================
COMPANY VALUES SECTION
=================================== */
.company-values-section {
background: var(--background-light);
padding: 3rem 0;
/* margin: 2rem 0; */
}
.company-values-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
.company-values-title {
text-align: center;
margin-bottom: 2.5rem;
}
.company-values-title h2 {
font-size: 2.2rem;
color: var(--text-dark);
margin-bottom: 1rem;
font-weight: 700;
text-transform: uppercase;
position: relative;
display: inline-block;
}
.company-values-title h2::after {
content: "";
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: var(--primary-green);
}
.company-values-title p {
font-size: 1.1rem;
color: var(--text-medium);
margin-top: 1.5rem;
}
.company-values-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.value-card {
background: var(--white);
border-radius: var(--border-radius);
padding: 2rem 1.5rem;
text-align: center;
box-shadow: var(--shadow-light);
transition: all 0.3s ease;
border: 2px solid transparent;
position: relative;
overflow: hidden;
}
.value-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--primary-green);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.value-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-medium);
border-color: var(--primary-green);
}
.value-card:hover::before {
transform: scaleX(1);
}
.value-icon {
width: 80px;
height: 80px;
margin: 0 auto 1.5rem;
display: flex;
align-items: center;
justify-content: center;
background: rgba(145, 189, 49, 0.1);
border-radius: 50%;
transition: all 0.3s ease;
}
.value-card:hover .value-icon {
background: var(--primary-green);
transform: scale(1.1);
}
.value-icon img {
max-width: 70px;
max-height: 70px;
transition: filter 0.3s ease;
}
.value-card:hover .value-icon img {
/* filter: brightness(0) invert(1); */
}
.value-icon.icon-flag {
background: linear-gradient(45deg, #0055a4, #ffffff, #ef4135);
}
.value-icon.icon-bretagne {
background: linear-gradient(45deg, #000000, #ffffff);
}
.value-icon.icon-partner {
background: linear-gradient(45deg, #ff6b35, #f7931e);
}
.value-icon.icon-google {
background: linear-gradient(45deg, #4285f4, #34a853, #fbbc05, #ea4335);
}
.value-title {
font-size: 1.3rem;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 1rem;
text-transform: uppercase;
}
.value-description {
font-size: 1rem;
color: var(--text-medium);
line-height: 1.6;
margin-bottom: 1.5rem;
}
.value-badge {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--primary-green);
color: var(--white);
padding: 0.5rem 1rem;
border-radius: 25px;
font-size: 0.9rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: all 0.3s ease;
}
.value-card:hover .value-badge {
background: var(--primary-green-hover);
transform: scale(1.05);
}
.value-logo {
max-width: 70px;
max-height: 70px;
object-fit: contain;
border-radius: 50%;
}
.value-logo-business {
font-size: 55px;
width: 44px;
color: #fff;
}
/* Styles spécifiques pour chaque carte */
/* .value-card.french-company .value-icon {
background: linear-gradient(
135deg,
#0055a4 33%,
#ffffff 33%,
#ffffff 66%,
#ef4135 66%
);
} */
/* .value-card.bretagne-company .value-icon {
background: linear-gradient(135deg, #000000 50%, #ffffff 50%);
}
.value-card.official-partner .value-icon {
background: linear-gradient(135deg, #ff6b35, #f7931e);
}
.value-card.google-business .value-icon {
background: linear-gradient(
135deg,
#4285f4 25%,
#34a853 25%,
#34a853 50%,
#fbbc05 50%,
#fbbc05 75%,
#ea4335 75%
);
} */
/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.value-card {
animation: fadeInUp 0.6s ease-out;
}
.value-card:nth-child(1) {
animation-delay: 0.1s;
}
.value-card:nth-child(2) {
animation-delay: 0.2s;
}
.value-card:nth-child(3) {
animation-delay: 0.3s;
}
.value-card:nth-child(4) {
animation-delay: 0.4s;
}
/* Rating stars pour Google */
.google-rating {
display: flex;
justify-content: center;
align-items: center;
margin: 1rem 0;
gap: 0.25rem;
}
.star {
color: #ffd700;
font-size: 1.2rem;
}
.rating-text {
margin-left: 0.5rem;
font-weight: 600;
color: var(--text-dark);
}
/* Responsive */
@media (max-width: 768px) {
.company-values-section {
padding: 2rem 0;
}
.company-values-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.value-card {
padding: 1.5rem 1rem;
}
.company-values-title h2 {
font-size: 1.8rem;
}
.value-icon {
width: 70px;
height: 70px;
}
.value-logo {
max-width: 50px;
max-height: 50px;
}
}
@media (max-width: 480px) {
.company-values-title h2 {
font-size: 1.5rem;
}
.value-title {
font-size: 1.1rem;
}
.value-description {
font-size: 0.9rem;
}
}