* Custom code goes here.
* A template should always ship with an empty custom.css
*/
#products .all-product-link, .featured-products .all-product-link, .product-accessories .all-product-link, a, a:hover {color: #001F3F;}
#header a,
#header a:hover,
#header i {
color: #001F3F;
}
#header .header-top a[data-depth="0"], #header .header-top a[data-depth="0"]:hover {color:#E8EDF2; text-transform: none; font-weight: normal;}
.btn-primary, .btn-primary:hover, #footer.js-footer .container .row {background:#AAB4BF;}
#header,
#header .header-top,
.top-menu a.dropdown-submenu {text-transform: capitalize;}
.product-miniature .product-title a, .product-miniature .product-price-and-shipping, .block_newsletter #block-newsletter-label, .block_newsletter form .row .col-xs-12:last-of-type .page-content.page-cms ul, .block_newsletter form .row .col-xs-12:last-of-type p, .page-content.page-cms .block_newsletter form .row .col-xs-12:last-of-type ul {color: #212529;}
.product-miniature .regular-price, .product-discount .regular-price {color: #C5205B;}
.product-flags li.product-flag.discount, .product-flags li.product-flag.discount-amount, .product-flags li.product-flag.discount-percentage, .has-discount .discount {background: #C5205B;}
.wishlist-button-add i, .wishlist-button-add i:hover {color: #001F3F !important;}
#products .all-product-link, .featured-products .all-product-link, .product-accessories .all-product-link {text-decoration: underline; font-style: italic;}
.product-miniature .highlighted-informations .quick-view:hover, .block-contact, .footer-container li a {color: #7a7a7a;}
.product-images>li.thumb-container .thumb.selected, .product-images>li.thumb-container .thumb:hover {border: none; border-radius:5px; object-fit: cover;}
.btn-primary, .btn-secondary, .h1, .h2, .h3, #custom-text h2 {text-transform: none;}
#footer.js-footer .container {width: 100%;}
.block_newsletter #block-newsletter-label {
line-height: 33px;
align-items: center; font-weight:600;}
#footer .btn-primary {border: #212529 2px solid; border-radius: 5px; margin-left: 3%; padding: 0.2rem 1.25rem;}
#custom-text h2 {font-size: 1.375rem; font-weight: bold; line-height: 1.5em; text-align: justify;}
#custom-text {text-align: justify; padding:0.5%; background-color: #F3F4F6; border-radius:5px; margin:2%; padding-top:3%; padding-bottom:3%;}
#custom-text h1, #custom-text h3, #custom-text h4, #custom-text h5 {text-align: left;}
#custom-text h1, #bloc-seo-home h2, #bloc-seo-home h3, #faq-canape-convertible h2, #faq-canape-convertible h3 {margin-bottom: 2%; margin-top: 1%; line-height: 1.45em; font-size: 1.375rem;}
#custom-text h3, #custom-text h4, #custom-text h5 {margin-bottom: 1%; margin-top: 2%; line-height: 1.45em;}
#custom-text h4, #custom-text h5 {margin-bottom: 2%; margin-top: 4%; line-height: 1.35em; font-size: 90%;}
#footer.js-footer .footer-container .container .row {background:white;}
.container, #footer.js-footer .footer-container .container .row .col-md-6.links {width: 100%;}
.text-uppercase {text-transform: none !important;}
.block-contact:hover, .footer-container li a:hover {color: #001F3F;}
#footer.js-footer .footer-container .container .row .col-md-6.links .row .col-md-6.wrapper {width: 24%;}
@media (min-width: 768px) {#footer .col-md-6, #footer .col-md-7 {float: right;}}
#footer.js-footer .footer-container .row {padding-top:0%;}
.product-flags li.product-flag {background: #bd9d6c; text-transform: none;}
#header .logo {width:auto;}
@media (min-width: 768px) {
#header .col-md-2,
#header .col-md-10 {
display: flex;
align-items: center;
}
}
@media (min-width: 768px) {#header .header-top {padding: 0.2rem 0;}}
@media (min-width: 499px) and (max-width: 767px) {#header .top-logo img {padding-top:2%;}}
@media (max-width: 767px) {#custom-text {padding:1%;}}
@media (max-width: 767px) {.block_newsletter {padding-bottom: 0; padding-top: 0; border-bottom: 0px;} #footer.js-footer .footer-container .container .row .col-md-6.links .row .col-md-6.wrapper {width: 100%;}}
.carousel {margin-bottom: 0; padding-bottom:0;}
@media (max-width: 991px) {.carousel .carousel-item .caption .display-1 {font-size: 1.5rem; color: #001F3F;} .carousel .carousel-item .caption .caption-description p {color: #001F3F;}}
@media (max-width: 767px) {#header .header-top a[data-depth="0"], #header .header-top a[data-depth="0"]:hover, #mobile_top_menu_wrapper .js-top-menu-bottom #contact-link, #mobile_top_menu_wrapper .js-top-menu-bottom a, #mobile_top_menu_wrapper .js-top-menu-bottom a:hover {color:#404E60; background:#CACACA; border-radius: 5px; margin-bottom: 6px;} #mobile_top_menu_wrapper #top-menu {margin-bottom:0;} }
.carousel-indicators {bottom: 0px;}
@media (min-width: 768px) { #carousel h2 {margin-bottom: 1.5rem;} .carousel .carousel-item .caption .display-1 {font-size: 2rem; Font-weight: 700;}}
.banner {text-align:center; margin-left:auto; margin-right:auto;}
.carousel .carousel-control .icon-next i:hover, .carousel .carousel-control .icon-prev i:hover {color:#ffffff;}
.btn-primary, .btn-primary:hover, #header .cart-preview .shopping-cart {color:#212529;}
.product-flags li.product-flag {color: #ffffff; border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;}
@media (min-width: 992px) {.carousel {text-align:center; margin-left:auto; margin-right:auto;}}
.product-miniature .product-flags li.product-flag {font-weight:normal; font-size: 85%;}
.col-md-7.right-nav {display:inline-flex;}
#contact-link a, #header a, #contact-link a:hover, #header a:hover, .header, .header:hover {color:#212529;}
@media (min-width: 768px) { #header a,
#header .cart-preview .shopping-cart { color: #212529; }
#header .blockcart { margin-left: 0; }}
@media (min-width: 576px) {.header-top .search-widgets {max-width: 100%;}}
@media (max-width: 1199px) {span.hidden-sm-down, #contact-link a {display: none !important;} }
#index #wrapper {display: block !important;}
#mobile_top_menu_wrapper .top-menu a[data-depth="0"] {border-bottom: 1px solid #404E60;}
@media (max-width: 767px) {.nav-hooks {display: none;}}
@media (min-width: 768px) {.nav-hooks {display: inline-flex;}}
@media (min-width: 768px) {.user-info, .header {margin-left: 20px;}}
@media (min-width: 1200px) {.user-info, .header {margin-left: 40px;} #header .header-top {padding-bottom: 0rem; padding: 0rem;} #index {padding-bottom: 46px;} #header .header-top {padding-bottom: 0rem;} #search_widget form i {padding: 0.3rem;}}
#header .user-info {margin-left: 1.5rem;}
#footer .block-social.col-lg-4.col-md-12.col-sm-12 {display: none;}
#footer.js-footer .container .row {padding-top:0.7%;}
@media (min-width: 768px) and (max-width: 834px) {#footer.js-footer .container .row {padding-left:4%; padding-right:3%;}}
@media (min-width: 835px) and (max-width: 874px) {#footer.js-footer .container .row {padding-left:7%; padding-right:3%;}}
.block_newsletter form input {height:33px; border-radius: 5px;}
@media (max-width: 991px) {
.carousel {
left: 0%;
width: 100%;
margin-left: 0%;
} }
@media (min-width: 768px) {
#content .carousel {
display: inline-block;
vertical-align: top;
width: 66%;
}
#content .carousel .carousel-inner {
height: 527px;
overflow: hidden;
position: relative;
}
#content .carousel .carousel-item {
height: 100%;
position: relative;
}
#content .carousel .carousel-item img {
width: 100%; /* đ„ occupe 100% de la largeur dispo */
height: 100%; /* đ„ occupe toute la hauteur dispo */
object-fit: cover; /* đ„ rempli tout en rognant si besoin */
object-position: center center; /* đ„ rogner centrĂ© */
display: block;
position: absolute;
top: 0;
left: 0;
transform: none; /* plus besoin de translateX maintenant */
max-height: 527px;
}
}
@media (min-width: 768px) {
#content .banner {
display: inline-block;
vertical-align: top;
width: 33.77%;
height: 527px; /* đ„ on FORCE la hauteur ici */
overflow: hidden;
text-align: center;
position: relative;
}
#content .banner img {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
height: 100%;
width: auto;
object-fit: cover;
object-position: center center; /* đ„ centre le rognage */
display: block;
}
}
@media (max-width: 767px) {
#content .banner img {
position: static;
width: 100%;
height: auto;
object-fit: contain;
object-position: center center;
transform: none;
}
}
.carousel-fade .carousel-item {
transition: opacity 0.7s ease-in-out;
}
#carousel .carousel-item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.7s ease-in-out;
z-index: 1;
}
#carousel .carousel-item.active {
opacity: 1;
z-index: 2;
}
/* EmpĂȘcher dĂ©placement slide */
#carousel .carousel-item-next,
#carousel .carousel-item-prev,
#carousel .carousel-item.active.carousel-item-start,
#carousel .carousel-item.active.carousel-item-end,
#carousel .carousel-item-next.carousel-item-start,
#carousel .carousel-item-prev.carousel-item-end {
transform: none !important;
}
/* Zoom lent premium sur les images */
#carousel .carousel-item img {
width: 100%;
object-fit: cover;
object-position: center;
display: block;
animation: zoomSlow 9s ease-in-out infinite;
animation-fill-mode: forwards;
}
#carousel .carousel-item.active img {
animation: zoomSlow 9s ease-in-out forwards;
}
@keyframes zoomSlow {
0% {
transform: scale(1);
}
100% {
transform: scale(1.20); /* Zoom léger trÚs élégant */
}
}
.block_newsletter #block-newsletter-label {font-size: 0.97rem; width:54%;}
#footer .block_newsletter .col-xs-12 p {font-style: italic; color: #5A6470;}
@media (min-width: 768px) {.col-md-7 {width: 46%;}}
input[name="email"] {
border: none !important;
outline: none !important;
box-shadow: none !important;
}
input[name="email"]:focus {
border: none !important;
outline: none !important;
box-shadow: none !important;
}
input[name="email"]:-webkit-autofill,
input[name="email"]:-webkit-autofill:focus {
border: none !important;
outline: none !important;
box-shadow: none !important;
-webkit-box-shadow: 0 0 0px 1000px white inset !important; /* si tu veux fond blanc */
-webkit-text-fill-color: inherit !important;
}
.col-xs-12 {padding-right: 0px; padding-left: 0px;}
/* On regroupe Carousel + Banner */
#content {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
}
#carousel {
width: 66%;
min-width: 0;
height: 527px;
}
.banner {
width: 34%;
min-width: 0;
height: 527px;
display: flex;
align-items: center;
justify-content: center;
}
.banner img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Le texte (customer-text) reste en dessous */
#custom-text {
width: 100%;
margin-top: 30px;
}
/* RESPONSIVE */
@media (max-width: 767px) {
#content {
flex-direction: column;
}
#carousel,
.banner,
#custom-text {
width: 100%;
height: auto;
}
.banner img {
height: auto;
object-fit: contain;
}
}
/* EmpĂȘche le slide latĂ©ral Bootstrap */
#carousel .carousel-item-next,
#carousel .carousel-item-prev,
#carousel .carousel-item.active.carousel-item-start,
#carousel .carousel-item.active.carousel-item-end,
#carousel .carousel-item-next.carousel-item-start,
#carousel .carousel-item-prev.carousel-item-end {
transform: none !important;
transition: none !important;
}
/* Garantit que les slides empilés fonctionnent bien */
#carousel .carousel-inner {
position: relative;
}
#carousel .carousel-item {
pointer-events: none;
}
#carousel .carousel-item.active {
pointer-events: auto;
}
#carousel .carousel-item {
backface-visibility: hidden;
will-change: opacity;
}
@media (min-width: 1200px) {
#cms #main, #cms #main #content {
margin-top: 1%;
margin-bottom: 3%;
margin-left: 2%; margin-right: 2%;
padding: 2%;
background-color: #EFF2F5;
border-radius: 5px;
text-align: justify;}}
#footer, .footer-container {
padding: 0%;}
.page-content.page-cms {
background-color: #EFF2F5; padding:0;}
#content.page-content.page-cms {display: inline-block;}
#cms h2, #cms h3, #cms h4 {font-size: 0.9375rem; margin-bottom: 2%; margin-top: 2%;}
#main .page-content {margin-bottom: 0rem;}
strong {font-weight:normal;}
.logo-wrapper img {
max-width: 461px; /* ou toute autre valeur souhaitée */
height: auto;
display: block;
margin: 0 auto;
}
@media (max-width: 1200px) {.logo-wrapper img {
max-height: 64px;}
}
@media (min-width: 768px) {.logo-wrapper img {
height: 64px;}
}
.logo-wrapper {
max-width: 461px;
display: block;
}
body {line-height: 1.5em; overflow-y: auto !important;}
#wrapper {background: white;}
.form-control-select, .form-control, .btn-primary {border-radius: 5px;}
.input-group .input-group-btn>.btn { border-top-right-radius: 5px; border-bottom-right-radius: 5px; background-color:#404E60;color: #bd9d6c;text-transform: none;}
.contact-form, #wrapper .card-block {margin-right:4%; margin-left:4%;}
.contact-form h3, form .form-control-label {color: #001F3F; text-transform: none;}
#contactform-message.form-control {padding-bottom: 3rem;}
#contactform-message:focus, .form-control:focus {
outline: none; /* Supprime la bordure bleue du navigateur */
box-shadow: none; /* Supprime les effets de halo */
border: 1px solid #ccc; /* Garde la mĂȘme bordure quâau repos */
}
#search_widget form input, .block_newsletter form input[type=email] { background-color: #F4F5F7; /* doux, clair, premium */
border: 1px solid #D1D6DB; /* bordure subtile */}
#contact #content-wrapper {margin-bottom: 2%;}
#contact .btn-primary {float:right;}
h1 {margin-bottom: 2rem; line-height: 1.5rem;}
@media (min-width: 992px) {
body#contact .col-lg-3 { width: 0%; }
body#contact .col-lg-9 { width: 100%; }
}
@media (min-width: 768px) {
body#contact .col-md-9 { width: 100%; }
}
body#guest-tracking #content-wrapper, body#authentication #content-wrapper, body#search #content-wrapper, body#password #content-wrapper {background-color: #EFF2F5; margin-top: 2%; margin-bottom: 4%; padding: 2%; border-radius: 5px; margin-left: 2%; margin-right: 2%; width: 96%;}
body#authentication #content {display: grid; flex-direction: column;}
body#authentication #wrapper .card-block {margin-right: auto; margin-left: auto; text-align: center;}
/* Centrage du lien "Mot de passe oublié ?" */
.page-authentication .forgot-password {
text-align: center;
margin-top: 10px;
}
@media (min-width: 768px) { body#authentication .col-md-6, body#authentication .col-md-7 { float: right; width: 74%;}}
.input-group .input-group-btn>.btn[data-action=show-password] {background: #404E60;}
body#search #content {background-color: #EFF2F5;}
body#search #search_widget form input {border-radius: 5px; background-color: #F4F5F7; /* doux, clair, premium */
border: 1px solid #D1D6DB; /* bordure subtile */}
body#search #content #search_widget {margin-top: 6%; margin-bottom: 4%;}
body#password .send-renew-password-link {margin-bottom: 6%; margin-top: 2%;}
body#password #send-reset-link {margin-left: 1%;}
body#password #main .page-footer {margin-top: 2%; font-weight: bold;}
.forgotten-password .form-group {
display: flex;
align-items: center;
gap: 10px; /* espace entre le label et le champ */
}
.forgotten-password .form-group label {
white-space: nowrap; /* empĂȘche le retour Ă la ligne */
margin-bottom: 0;
}
.forgotten-password .form-group input {
flex: 1;
}
.forgotten-password button[type="submit"],
.forgotten-password button[type="submit"]:hover,
.forgotten-password button[type="submit"]:focus,
.forgotten-password button[type="submit"]:active {
background-color: #404E60;
color: #bd9d6c;
border: none;
box-shadow: none;
outline: none;
transition: none;
cursor: pointer;
}
/* === HEADER MOBILE FINAL PROPRE === */
@media (max-width: 767px) {
.mobile-header {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 56px;
padding: 0px;
box-sizing: border-box;
}
#menu-icon {
width: auto;
display: flex;
align-items: center;
justify-content: center;
}
.material-icons {
font-size: 20px !important;
}
#mobile_top_menu_wrapper {
display: none;
width: 100%;
background: #f5f5f5;
padding: 10px 15px;
}
#mobile_top_menu_wrapper.active {
display: block !important;
}
body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
}
@media (max-width: 767px) {
/* Réordonner les éléments pour que le logo passe avant la recherche */
#menu-icon {
order: 0;
}
/* Forcer la ligne Ă se remettre Ă plat */
#header .row {
align-items: center;
justify-content: space-between;
}
}
/* === CORRECTIONS COMPLĂTES MOBILE POUR PAGE DâACCUEIL === */
@media (max-width: 767px) {
/* Carrousel */
#carousel {
display: block;
width: 100%;
height: auto;
overflow: hidden;
margin-bottom: 0;
}
#carousel .carousel-inner {
width: 100%;
height: auto;
}
#carousel .carousel-item,
#carousel .carousel-item img {
width: 100% !important;
height: auto !important;
object-fit: cover;
object-position: center;
display: block;
}
/* BanniĂšre */
.banner {
display: block !important;
width: 100% !important;
height: auto !important;
text-align: center;
margin: 0 auto 20px auto;
padding: 0;
}
.banner img {
width: 100%;
height: auto;
object-fit: contain;
display: block;
margin: 0 auto;
}
/* Bloc de texte centré */
#custom-text {
max-width: 100%;
margin: 0 auto 30px auto;
padding: 15px;
background-color: #EFF2F5;
border-radius: 5px;
text-align: justify;
box-sizing: border-box;
}
#custom-text h1,
#custom-text h2,
#custom-text h3 {
text-align: left;
}
/* DĂ©sactivation flottants */
[class*="col-"].force-full-width {
float: none !important;
width: 100% !important;
}
/* Assure l'affichage du menu déroulant */
#mobile_top_menu_wrapper {
display: none;
background-color: #f5f5f5;
padding: 15px;
}
#mobile_top_menu_wrapper.active {
display: block !important;
}
}
@media (max-width: 767px) {
/* Corriger le carrousel */
#carousel .carousel-item {
position: relative !important;
height: auto !important;
display: block;
}
#carousel .carousel-item img {
width: 100% !important;
object-position: top center !important;
}
#carousel {
margin-bottom: 0;
padding: 0;
overflow: visible !important;
}
/* RĂ©activer la banniĂšre */
.banner {
display: block !important;
width: 100% !important;
height: auto !important;
text-align: center;
margin: 0 auto 20px auto;
padding: 0;
overflow: hidden;
}
.banner img {
width: 100% !important;
height: auto !important;
object-fit: contain !important;
display: block;
margin: 0 auto;
}
/* Centrage du bloc texte (si pas encore actif) */
#custom-text {
margin: 20px auto !important;
max-width: 100%;
padding: 15px;
background-color: #EFF2F5;
border-radius: 5px;
text-align: justify;
box-sizing: border-box;
}
}
@media (max-width: 767px) {
#content {
padding-top: 10px;
}
.banner {
display: block;
width: 100%;
margin-top: 10px;
}
.banner img {
display: block;
width: 100%;
height: auto;
object-fit: contain;
}
#custom-text {
width: 100%;
margin: 20px auto;
padding: 15px;
background: #EFF2F5;
border-radius: 5px;
text-align: justify; padding-top:8%;
}
#wrapper, body, html {
overflow-x: hidden;
}
.carousel .carousel-item,
.carousel .carousel-item img {
object-fit: cover;
}
.carousel {
margin-bottom: 0;
}
#footer {
display: block !important;
width: 100%;
padding: 20px 10px;
background-color: #AAB4BF;
color: white;
}
#footer .footer-container {
width: 100%;
}
}
@media (max-width: 767px) {
/* CAROUSEL fonctionnement horizontal */
#carousel {
width: 100%;
overflow: hidden;
margin-bottom: 0;
}
#carousel .carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
}
#carousel .carousel-item {
display: none;
width: 100%;
transition: opacity 0.6s ease-in-out;
}
#carousel .carousel-item.active {
display: block;
}
#carousel .carousel-item {
flex: 0 0 100%;
max-width: 100%;
height: auto;
position: relative;
float: none !important;
}
#carousel .carousel-item img {
width: 100% !important;
object-fit: cover;
object-position: center;
display: block;
}
/* BANNIĂRE visible */
.banner {
display: block !important;
width: 100%;
margin: 10px auto;
text-align: center;
}
.banner img {
width: 100%;
height: auto;
object-fit: contain;
display: block;
}
}
@media (max-width: 991px) {
.carousel {
background-color: white;
}
}
@media (max-width: 767px) {
.banner {
display: block !important;
height: auto !important;
padding: 0 !important;
overflow: hidden !important;
text-align: center;
}
.banner img {
display: block !important;
width: 100% !important;
height: auto !important;
object-fit: contain !important;
object-position: center center !important;
margin: 0 auto !important;
visibility: visible !important;
opacity: 1 !important;
}
}
@media (max-width: 1199px) {
#content-wrapper {
display: flex;
flex-direction: column;
} }
#footer .row .col-xs-12{
padding: 2% 3% 2% 3%;}
@media (max-width: 449px) {
#block-newsletter-label { margin:0; font-size:97% !important; padding: 1% 1% 0% 4% !important;}}
@media (min-width: 450px) and (max-width: 1199px){
#block-newsletter-label { margin:0; font-size:97% !important; padding: 1% 1% 0% 6% !important;}}
#footer { padding: 0px 10px; padding-bottom: 10%;}
#main .page-footer {
margin-bottom: 0.7rem;}
@media (min-width: 768px) {#custom-text {
margin: 1% auto 0 auto !important;
} .custom-home-text.container {margin-bottom: 2%; margin-top: 0.5%;} }
#bloc-seo-home, #faq-canape-convertible, .col-md-6.custom-home-text-left {text-align: justify;
background-color: #F3F4F6;}
#bloc-seo-home .row, #faq-canape-convertible .row, .col-md-6.custom-home-text-left {margin: 10px auto 0 auto;padding: 0%; padding-top:2%; padding-bottom:0%;}
#footer .block_newsletter p {
padding-top: 0rem;
}
#footer .block_newsletter .col-xs-12 p {
padding: 0% 2% 0% 2%;
}
#footer .footer-container {
border-radius: 5px; margin-bottom:2%;}
.banner {
order: 2;
display: block !important;
text-align: center;
}
.banner img {
max-width: 94%;
height: auto !important;
object-fit: contain;
display: block;
border-radius: 5px;
background-color: #EFF2F5;
box-sizing: border-box;
}
}
}
/* Par défaut : banniÚre à sa place normale */
.banner {
order: initial;
}
/* Sur écrans †1199px : déplacer la banniÚre sous le texte */
@media (max-width: 1199px) {
#content-wrapper {
display: flex;
flex-direction: column;
}
.banner {
order: 2;
display: block !important;
width: 100%;
margin: 20px auto 30px auto;
text-align: center;
}
.banner img {
width: 100%;
height: auto;
object-fit: contain;
display: block;
}
}
@media (max-width: 1199px) {
.banner {
display: block !important;
width: 100%;
margin: 20px auto 30px auto;
text-align: center;
}
.banner img {
width: 100%;
height: auto;
object-fit: contain;
display: block;
}
}
#banner-mobile {
display: none;
}
#banner-desktop {
display: block;
}
@media (max-width: 1199px) {
#banner-desktop {
display: none !important;
}
#banner-mobile {
display: block !important;
margin: 20px auto 30px auto;
text-align: center;
}
#banner-mobile img {
width: 100%;
height: auto;
object-fit: contain;
display: block;
}
}
/* Structure en colonne par défaut */
#home-flex-wrapper {
display: flex;
flex-direction: column;
}
/* Ce qui est aujourd'hui dans le hook (texte + banniĂšre) */
.banner-wrapper {
display: flex;
flex-direction: column;
}
/* Changer lâordre en mobile uniquement */
@media (max-width: 1199px) {
.banner-wrapper {
display: flex;
flex-direction: column;
}
}
@media (max-width: 1199px) {
.banner {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
text-align: center;
margin: 20px auto;
}
.banner img {
display: block !important;
width: 100% !important;
height: auto !important;
object-fit: contain;
object-position: center;
opacity: 1 !important;
visibility: visible !important;
}
}
/* Par défaut sur desktop */
.banner {
order: initial;
display: block;
width: 100%;
margin: 0 auto;
text-align: center;
}
.banner img {
display: block;
width: 100%;
height: auto;
object-fit: contain;
object-position: center;
}
/* Sur mobile †1199px */
@media (max-width: 1199px) {
#content-wrapper {
display: flex;
flex-direction: column;
}
.banner {
order: 2;
display: block !important;
margin: 20px auto 30px auto;
text-align: center;
visibility: visible !important;
opacity: 1 !important;
}
.banner img {
width: 100% !important;
height: auto !important;
object-fit: contain;
object-position: center;
display: block;
}
}
@keyframes zoomSlowMobile {
0% {
transform: scale(1);
}
100% {
transform: scale(1.2);
}
}
@media (max-width: 1199px) {
#footer_sub_menu_2 { display: block; }
/* Le conteneur doit ĂȘtre flex en colonne */
#footer.js-footer .footer-container .container .row .col-md-6.links .row {
display: flex !important;
flex-direction: column !important;
}
/* Dernier bloc => ordre -3 => 1er */
#footer.js-footer .footer-container .container .row .col-md-6.links .row .col-md-6.wrapper:last-of-type {
order: -3;
}
/* Avant-dernier bloc => ordre -2 => 2e */
#footer.js-footer .footer-container .container .row .col-md-6.links .row .col-md-6.wrapper:nth-last-of-type(2) {
order: -2;
}
/* DeuxiĂšme bloc => ordre -1 => 3e */
#footer.js-footer .footer-container .container .row .col-md-6.links .row .col-md-6.wrapper:nth-of-type(2) {
order: -1;
}
/* Premier bloc => ordre 0 => 4e */
#footer.js-footer .footer-container .container .row .col-md-6.links .row .col-md-6.wrapper:nth-of-type(1) {
order: 0;
}
/* Cacher lâicĂŽne dâexpansion sur le 1er bloc (HTML) du footer */
#footer.js-footer .footer-container .container .row .col-md-6.links .row .col-md-6.wrapper:nth-of-type(4) .float-xs-right {
display: none !important;
}
}
@media (max-width: 1199px) {
#cms #main {
margin-top: 1%;
margin-bottom: 7%;
margin-left: 2%; margin-right: 2%;
padding: 4%;
background-color: #EFF2F5;
border-radius: 5px;
text-align: justify; padding-top:8%;}
#contact #content {
display: flex;
justify-content: center; /* Centre horizontalement */
padding-top: 40px; /* Ajustable selon besoin */
padding-bottom: 40px; /* Idem */
box-sizing: border-box;
}
.contact-form {
width: 95%;}
body#guest-tracking #content-wrapper, #authentication #content-wrapper {
width: 95% !important; padding-top: 8% !important;}
body#guest-tracking h1, #authentication h1 {padding-left: 4%;}
.contact-form, #contact #wrapper .card-block, #guest-tracking #wrapper .card-block, #authentication .card-block{
margin-right: 3%;
margin-left: 3%;}
#contact label, #guest-tracking label, #authentication label {
text-align: left;}
#guest-tracking #content, #authentication #content{
padding-top: 40px; /* Ajustable selon besoin */
padding-bottom: 40px; /* Idem */}
}
html,
body {
height: 100%;}
body {
position: relative;
overflow-y: auto;
-webkit-overflow-scrolling: auto; /* désactive le rebond iOS */
}
@media (min-width: 1200px) {
#content .banner img {
height: 527px !important;
max-width: 100%;
}
#custom-text,
#bloc-seo-home,
#faq-canape-convertible {
width: 97%;
margin-top: 10px;
margin-bottom: 2% !important;
}
#footer {padding: 0px 0px !important; padding-bottom: 0px !important;}
#js-content-wrapper .col-xs-12 { margin-bottom: 2%;}
#footer .row .col-xs-12 { padding: 0% 0% 0% 0%;}
#footer.js-footer .footer-container .container .row { padding-top: 1%;}
#footer .block_newsletter .col-xs-12 p { padding: 0% 0% 0% 0%;}
}
@media (max-width: 380px) {
#cms #wrapper, #contact #wrapper, #guest-tracking #wrapper, #authentication #wrapper {padding-top: 5rem;}}
@media (min-width: 381px) and (max-width: 420px) {#cms #wrapper, #contact #wrapper, #guest-tracking #wrapper, #authentication #wrapper {padding-top: 6rem;}}
@media (min-width: 421px) and (max-width: 498px) {#cms #wrapper, #contact #wrapper, #guest-tracking #wrapper, #authentication #wrapper {padding-top: 6.5rem;}}
@media (min-width: 499px) and (max-width: 1199px) {#cms #wrapper, #contact #wrapper, #guest-tracking #wrapper, #authentication #wrapper {padding-top: 8.5rem;}}
@media (min-width: 768px) and (max-width: 1199px) {
/* Ătend les styles mobiles aux tablettes et petits Ă©crans dâordinateurs */
#carousel, .banner, #custom-text {
width: 100% !important;
height: auto !important;
display: block;
margin: 0 auto 20px auto;
}
.banner img, #carousel .carousel-item img {
width: 100% !important;
height: auto !important;
object-fit: contain;
object-position: center;
display: block;
}
#custom-text {
max-width: 95%;
padding: 15px;
background-color: #EFF2F5;
border-radius: 5px;
text-align: justify;
box-sizing: border-box;
}
.footer-container .row {
flex-direction: column !important;
}
#footer.js-footer .footer-container .container .row .col-md-6.links .row {
display: flex !important;
flex-direction: column !important;
}
/* RĂ©organisation des blocs de footer */
#footer.js-footer .footer-container .container .row .col-md-6.links .row .col-md-6.wrapper:last-of-type {
order: -3;
}
#footer.js-footer .footer-container .container .row .col-md-6.links .row .col-md-6.wrapper:nth-last-of-type(2) {
order: -2;
}
#footer.js-footer .footer-container .container .row .col-md-6.links .row .col-md-6.wrapper:nth-of-type(2) {
order: -1;
}
#footer.js-footer .footer-container .container .row .col-md-6.links .row .col-md-6.wrapper:nth-of-type(1) {
order: 0;
}
#footer.js-footer .footer-container .container .row .col-md-6.links .row .col-md-6.wrapper:nth-of-type(4) .float-xs-right {
display: none !important;
}
}
@media (min-width: 768px) and (max-width: 1199px) {
#content .banner img {
position: relative; margin-top: 5%;}
#footer.js-footer .container .row {
padding-left: 1%;
padding-right: 0%;}
#block-newsletter-label { padding: 3% 1% 2% 6% !important;}
#footer .row .col-xs-12 {padding: 2% 7% 2% 3%;}
#footer.js-footer .footer-container .container .row .col-md-6.links .row {
flex-direction: initial !important;}
.col-md-7 { width: 50%;}
.block_newsletter #block-newsletter-label { width: 50%;}
#footer.js-footer .container .row {
padding-top: 0%;}
#footer {
padding: 0px 0px;
padding-bottom: 0%;}
.col-md-8, .col-md-9 {
width: 100%;}
#footer.js-footer .container {
margin-top: 4%;}
#footer.js-footer .footer-container .container .row .col-md-6.links .row .col-md-6.wrapper {
padding-bottom: 3% !important;}
#cms #wrapper, #contact #wrapper, #guest-tracking #wrapper, #authentication #wrapper {
padding-top: 4rem;}
#cms #main {
margin-bottom: 2%;}
body#authentication .col-md-6, body#authentication .col-md-7 {
width: 50%;}
}
@media (min-width: 1200px) {
.banner img { border-radius: 0px;}
}
.mb-2 {
margin-bottom: 0rem !important;
}
@media (min-width: 768px) {
#footer {
background-color: white;}
}
@media (min-width: 1200px) {
#search_filters {
display: flex;
align-items: flex-start;
}
body[class*="category"] .contact-form, #wrapper .card-block {
border-radius: 5px;
margin-right: 1%;
margin-left: 0%; margin-bottom:0%;}
.block-category h1 {
margin-bottom: 1.5%;
line-height: 1.45em;}
/* Grille responsive avec 3 produits par ligne sur desktop */
#js-product-list .products {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2rem;
padding: 2rem 1rem;
}}
/* Responsive : 2 par ligne sur tablette */
@media (max-width: 992px) {
#js-product-list .product {
flex: 0 0 calc(50% - 2rem);
max-width: calc(50% - 2rem);
}
}
/* Responsive : 1 par ligne sur mobile */
@media (max-width: 600px) {
#js-product-list .product {
flex: 0 0 100%;
max-width: 100%;
}
}
#js-product-list-top {
padding: 0rem 1.25rem;}
.pagination{
padding: 1rem 1.25rem;}
.product-miniature .thumbnail-container {
margin-bottom: 0rem;}
/* â
Conteneur des produits */
#js-product-list .products {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 2rem;
padding: 0rem 1rem;
margin: 0 auto;
}
#js-product-list .product {
background: #fff;
border-radius: 8px;
position: relative;
z-index: 1;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#js-product-list .product:hover {
transform: translateY(-2px);
filter: brightness(1.015);
z-index: 2;
}
/* â
Centrage pagination */
.pagination {
justify-content: center;
margin-top: 0rem;
}
/* â
Centrage du bloc filtres */
#search_filters_wrapper {
margin: 0 auto 2rem auto;}
/* â
Responsive tablette et mobile */
@media (max-width: 1024px) {
#js-product-list .products {
gap: 1.5rem;
padding: 1.5rem 1rem;
}
#js-product-list .product {
flex: 1 1 45%;
max-width: 100%;
}
}
@media (max-width: 768px) {
#js-product-list .product {
flex: 1 1 100%;
}
}
/* EmpĂȘche toute animation de survol si .quick-view est absent */
.highlighted-informations {
pointer-events: none;
opacity: 0;
transition: none !important;
transform: none !important;
}
/* Optionnel : rĂ©activer sâil y a des variantes affichĂ©es */
.highlighted-informations.no-variants {
display: none;
}
.product-flags li.product-flag.on-sale {
width: fit-content;
}
/* ==== IMAGES VIGNETTES PRODUITS (catégories, bestsellers, etc.) ==== */
/* Le cadre qui contient lâimage */
.product-miniature .thumbnail-top {
position: relative;
width: 100%;
overflow: hidden;
}
/* Le lien autour de lâimage */
.product-miniature .product-thumbnail {
display: block; border-top-right-radius: 10px; border-top-left-radius:10px;
}
/* Lâimage elle-mĂȘme : plus de position:absolute */
.product-miniature .thumbnail-top img {
position: static;
display: block;
width: 100%;
height: auto;
max-width: 100%;
object-fit: cover;
object-position: center center;
aspect-ratio: 3 / 2;
vertical-align: middle;
}
.product-miniature .product-title a {
font-weight: 500; text-transform: initial; font-size: 0.95rem; color: #333E48;}
.product-miniature .product-price-and-shipping {
color: #212529 ;}
#search_filters, #search_filters_brands, #search_filters_suppliers {
padding: 0rem 0rem; margin-left: 1%; margin-right: 1%;padding-left: 1.25rem; padding-right: 1.25rem;}
@media (min-width: 1200px) {
body[class*="category"] .col-lg-7 {
width: 30.5%;
float: right; }
#js-product-list .products > * {
flex: 0 0 calc(33.333% - 1.34rem); /* 3 par ligne avec 2rem de gap */
box-sizing: border-box; }
body[class*="category"] .col-xl-4 { width: 100%; }
}
@media (min-width: 768px) and (max-width: 999px) {
#category #wrapper {margin-top:2.5%; }}
@media (min-width: 1000px) and (max-width: 1199px) {
#category #wrapper {margin-top:1%; }
}
.block-category {
min-height: 0rem;}
@media (min-width: 768px) and (max-width: 1199px) {
#categorie-accueil {
background-color: white !important;
margin-bottom: 2%;
text-align: justify;
box-sizing: border-box;
padding: 15px;
border-radius: 5px;
padding-left:2%;
} .card-block { padding: 0;}
}
@media (min-width: 1200px) {
#categorie-accueil {
margin-top: 1%;
margin-bottom: 0% !important;
margin-top: 0px !important;
padding: 2%;
padding-top: 0.3%;
padding-bottom: 0.3%;
}
}
@media (max-width: 767px) {
#categorie-accueil {
width: 100%;
margin: 20px auto;
padding: 15px;
background-color: white !important;
border-radius: 5px;
text-align: justify;
height: auto;
box-sizing: border-box;
padding-left:2%;
padding-right:0%;
margin-left:0%;
margin-right:0%;
padding-top:0%;
margin-top:0%;}
}
#categorie-accueil h2 {
font-size: 1.375rem;
font-weight: 700;
margin-bottom: 2% !important;
margin-top: 0.5%;
line-height: 1.45em;
text-align: left;
width: 94%;
padding: 15px;
}
#categorie-accueil .text-center.mb-4 h2 {
margin-bottom: 2% !important;
}
#categorie-accueil .cat-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
padding: 1rem;
border-radius: 12px;
background: white;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
height: 100%;
}
#categorie-accueil .cat-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
#categorie-accueil img {
max-width: 100%;
height: auto;
object-fit: cover;
border-radius: 8px;
margin-bottom: 1rem;
}
.d-block {text-align: center;}
#categorie-accueil strong {
font-size: 0.73rem;
color: #3A3F47;
font-weight: 400;
}
@media (max-width: 1299px) {#categorie-accueil strong {
font-size: 0.575rem;}}
@media (min-width: 1300px)and (max-width: 1499px) {#categorie-accueil strong {
font-size: 0.675rem;}}
@media (min-width: 1500px) {#categorie-accueil strong {
font-size: 0.73rem;}}
@media (max-width: 1199px) {
#categorie-accueil .row {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 colonnes */
gap: 10px;
justify-content: center; /* centre la grille entiĂšre */
margin-left: 20px;
margin-right: 20px;
}
#categorie-accueil .row > div {
max-width: none;
width: 100%;
text-align: center;
}
#categorie-accueil .row > div {
flex: 0 0 calc(100% / 4.5); /* environ 4 par ligne selon espace */
max-width: 160px;
text-align: center;
}
#categorie-accueil img {
width: 100%;
height: auto;
object-fit: contain;
border-radius: 8px;
}
#categorie-accueil h2 {
margin-bottom: 10% !important;}
}
@media (min-width: 1200px) {
#categorie-accueil .row {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
overflow-x: auto;
padding-bottom: 2.0rem; gap:0.5%;
/* ajout pour les ombres */
padding: 0 1.5rem 0rem; /* left + right padding */
box-sizing: border-box;
}}
#categorie-accueil img {
width: 100%;
height: auto;
max-height: 150px;
object-fit: contain;
border-radius: 8px;
}
#categorie-accueil .row::-webkit-scrollbar {
height: 8px;
}
#categorie-accueil .row::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 4px;
}
.mb-2 {
margin-bottom: 0rem !important;
}
.brands-sort .select-title, .products-sort-order .select-title, .suppliers-sort .select-title {
border-radius: 5px;}
.brands-sort .dropdown-menu, .products-sort-order .dropdown-menu, .suppliers-sort .dropdown-menu {
background: white;}
.brands-sort .select-list:hover, .products-sort-order .select-list:hover, .suppliers-sort .select-list:hover {
background: whitesmoke;color: #232323;}
.dropdown-menu {font-size:.875rem;}
@media (max-width: 390px) {.products-sort-order .select-title {color: #001F3F;}.products-selection .filter-button .btn-secondary, .products-selection .filter-button .btn-tertiary {
padding: 0.4rem;} .products-sort-order .select-title { padding: 0.3rem;}}
.swiper {
overflow-x: hidden;
}
.block-category h1 {color:#2C2F36;}
@media (max-width: 767px) { .block-category h1 {font-size:1rem;}}
@media (min-width: 992px) { #search_filters { gap: 0.2rem; margin-bottom:1.25rem;} #search_filters{ line-height: 1.05em;} #search_filters_wrapper { margin: 0 0 1rem 0; padding: 0 0rem;}}
#search_filters .facet .facet-label a { white-space: normal;}
#search_filters .ui-slider-horizontal {width: 95%;}
@media (min-width: 992px) and (max-width: 1099px) { body[class*="category"] #content-wrapper.col-lg-9 { width: 100%; } #search_filters .facet .facet-title, #search_filters_brands .facet .facet-title, #search_filters_suppliers .facet .facet-title { font-size: 0.75rem;}#search_filters .facet .facet-label a, #search_filters_brands .facet .facet-label a, #search_filters_suppliers .facet .facet-label a {font-size: .68rem;}}
@media (min-width: 1100px) and (max-width: 1199px) { body[class*="category"] #content-wrapper.col-lg-9 { width: 100%; } #search_filters .facet .facet-title, #search_filters_brands .facet .facet-title, #search_filters_suppliers .facet .facet-title { font-size: 0.75rem;}#search_filters .facet .facet-label a, #search_filters_brands .facet .facet-label a, #search_filters_suppliers .facet .facet-label a {font-size: .72rem;}}
@media (min-width: 1200px) and (max-width: 1299px) { body[class*="category"] #content-wrapper.col-lg-9 { width: 100%; } #search_filters .facet .facet-title, #search_filters_brands .facet .facet-title, #search_filters_suppliers .facet .facet-title { font-size: 0.80rem;}#search_filters .facet .facet-label a, #search_filters_brands .facet .facet-label a, #search_filters_suppliers .facet .facet-label a {font-size: .75rem;}}
@media (min-width: 1300px) and (max-width: 1399px) { body[class*="category"] #content-wrapper.col-lg-9 { width: 100%; } #search_filters .facet .facet-title, #search_filters_brands .facet .facet-title, #search_filters_suppliers .facet .facet-title { font-size: 0.80rem;}#search_filters .facet .facet-label a, #search_filters_brands .facet .facet-label a, #search_filters_suppliers .facet .facet-label a {font-size: .75rem;}}
@media (min-width: 1400px) and (max-width: 1499px) { body[class*="category"] #content-wrapper.col-lg-9 { width: 100%; } #search_filters .facet .facet-title, #search_filters_brands .facet .facet-title, #search_filters_suppliers .facet .facet-title { font-size: 0.80rem;}#search_filters .facet .facet-label a, #search_filters_brands .facet .facet-label a, #search_filters_suppliers .facet .facet-label a {font-size: .75rem;}}
@media (min-width: 1500px) and (max-width: 1599px) { body[class*="category"] #content-wrapper.col-lg-9 { width: 100%; } #search_filters .facet .facet-title, #search_filters_brands .facet .facet-title, #search_filters_suppliers .facet .facet-title { font-size: 0.80rem;}#search_filters .facet .facet-label a, #search_filters_brands .facet .facet-label a, #search_filters_suppliers .facet .facet-label a {font-size: .75rem;}}
@media (min-width: 1600px) { body[class*="category"] #content-wrapper.col-lg-9 { width: 100%; } #search_filters .facet .facet-title, #search_filters_brands .facet .facet-title, #search_filters_suppliers .facet .facet-title { font-size: 0.80rem;}#search_filters .facet .facet-label a, #search_filters_brands .facet .facet-label a, #search_filters_suppliers .facet .facet-label a {font-size: .75rem;}}
@media (min-width: 1200px) {brands-sort .select-title, .products-sort-order .select-title, .suppliers-sort .select-title { padding: .325rem; text-align:center;}}
@media (min-width: 768px) and (max-width: 1199px) {.block-category.card.card-block { margin-bottom: 0;}}
@media (min-width: 1200px) {.block-category.card.card-block { padding-top: 0;}}
body[class*="index"] #categorie-accueil .row > div { padding-left: 0;padding-right: 0;}
@media (min-width: 768px) {
.facet.collapsed ul,
.facet.collapsed .faceted-slider,
.facet.collapsed .facet-dropdown,
.facet.collapsed .dropdown-menu {
display: none !important;
}
.facet-title {
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: normal;
margin-bottom: 0.5rem;
font-size: 1rem;
}
.facet-toggle-icon {
font-family: 'Material Icons';
font-size: 20px;
line-height: 1;
margin-left: 0.5rem;
transition: transform 0.3s ease;
color: #333;
}
/* Supprimer tout parasite */
.facet-title::before,
.facet-title::after,
.facet-toggle-icon::before,
.facet-toggle-icon::after {
display: none !important;
content: none !important;
}
#search_filters .facet .facet-title {
width: calc(100% - 0px);}
}
.material-icons {
font-family: 'Material Icons';
font-style: normal;
font-weight: normal;
line-height: 1;
display: inline-block;
text-transform: none;
white-space: nowrap;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
.material-icons {
visibility: hidden;
}
.material-icons-loaded .material-icons {
visibility: visible;
}
@media (min-width: 768px) {
#search_filters {
flex-wrap: nowrap; /* empĂȘche le retour Ă la ligne */
gap: 1rem;}
#search_filters {justify-content: center; }
#search_filters .facet {
max-width: 100%;
flex: 1 1 auto;
border-radius: 19px;
text-align: center;
margin-left: auto;
margin-right: auto;
justify-content: center;
background-color: #F4F6F9;
border: 1px solid transparent; }
}
#search_filters .facet .facet-title, #search_filters_brands .facet .facet-title, #search_filters_suppliers .facet .facet-title
{ color: #333E48; font-weight: 450;}
/* Masquer les flĂšches des filtres sur desktop */
.facet-toggle-icon {
display: none !important;}
/* Masquer les flĂšches des filtres sur mobile */
.navbar-toggler.collapse-icons {
display: none !important;}
#search_filters { justify-content: center; /* â
centre tous les filtres */}
#search_filters .facet .facet-title, #search_filters_brands .facet .facet-title, #search_filters_suppliers .facet .facet-title { justify-content: center;}
body[class*="category"] .col-xl-4 {padding-right:0;padding-left:0;}
/* Pour Ă©viter tout masque sur le shadow */
#categorie-contenu > div {
overflow: visible !important;
}
/* Style par défaut pour toutes les images de catégorie */
#categorie-contenu .img-fluid {
display: block;
margin: 0 auto;
background-color: #F1EFEA;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08), 0 -6px 18px rgba(0, 0, 0, 0.05);
border-radius: 12px;
transition: all 0.3s ease;
position: relative;
z-index: 1;
max-width:250px;
margin-top:10%;
}
/* Colonne active : nécessaire pour positionner le badge */
#category #categorie-contenu .active-category .img-fluid {
position: relative;
border: 3px solid #B6BCC3; /* Fine bordure premium */
border-radius: 12px;
}
/* Effet hover sur les non-actives */
#categorie-contenu .col-6:not(.active-category) .img-fluid:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}
/* Catégorie active : couleur plus claire + encadré doux */
#category #categorie-contenu .active-category .img-fluid {
background-color: #E1E5EA;
transform: none;
border: 3px solid #333E48;
}
/* Titre de la catégorie (sous l'image) */
#categorie-contenu strong {
font-family: 'Inter', sans-serif;
font-weight: normal;
font-size: 0.75rem;
color: #333E48;
display: block;
text-align: center;
margin-top: 1px;
position: relative;
}
/* Badge âââ en haut Ă droite */
#categorie-contenu .active-category::after {
content: "â";
position: absolute;
top: 8px;
right: 14px;
font-size: 1rem;
color: #2E7D32;
background-color: #fff;
border-radius: 50%;
padding: 2px 6px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
font-weight: bold;
z-index: 3;
}
#categorie-contenu .active-category strong {
color: #333E48; /* ou var(--success) si votre thĂšme le gĂšre */ font-weight:750; font-size:0.85rem;}
.h1, .h2, .h3, .h4, #custom-text h2 {color: #333E48;}
#custom-text p, body, #blockcart-modal, #product-description-short, .page-content.page-cms ul, p, .product-prices .tax-shipping-delivery-label, .has-discount .page-content.page-cms ul, .has-discount p, .has-discount.product-price, .page-content.page-cms .has-discount ul, .product-price, .products-selection .sort-by-row .select-title, #products, .product-miniature .highlighted-informations .quick-view:hover, .block-contact, .footer-container li a {color: #4A4F55;}
input::placeholder {
color: #A0A4A8;
font-weight: 400;
opacity: 1;
}
#search_widget form input {
color: #212529;
}
.products-selection { margin-bottom: 0rem;}
body[class*="category"] .card-block {padding-bottom: 0;}
#search_filters .facet .facet-label .custom-checkbox, #search_filters .facet .facet-label .custom-radio { top: 2px;}
.custom-checkbox input[type=checkbox]+span
{ border-radius: 5px;}
/* â
Alignement correct des cases Ă cocher */
#search_filters .facet .facet-label .custom-checkbox,
#search_filters .facet .facet-label .custom-radio {
top: 2px;
}
.custom-checkbox input[type=checkbox] + span {
border-radius: 5px;
}
/* â
Bloc de filtre */
.facet {
position: relative;
z-index: 10;
margin-bottom: 0.5rem;
overflow: visible;
}
/* â
Conteneur des options de filtre */
.facet-options {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
border: 1px solid #ddd;
border-radius: 6px;
min-width: 250px;
max-height: 300px;
overflow-y: auto;
z-index: 999;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
}
/* â
Ouverture dâun filtre */
.facet.open .facet-options {
display: block;
opacity: 1;
pointer-events: auto;
}
/* â
Labels dâoptions : une seule ligne lisible */
.facet .facet-label {
display: inline-flex;
align-items: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
padding-right: 0.5em;
}
/* â
Cases à cocher bien positionnées */
.facet .facet-label .custom-checkbox {
flex-shrink: 0;
margin-right: 0.5em;
}
/* â
Liste des options dans les filtres */
.facet .facet-options li {
display: block;
width: auto;
margin-bottom: 0.5em;
}
/* â
Superposition et débordement géré */
#search_filters {
position: relative;
overflow: visible !important;
z-index: auto;
}
.product-miniature,
.product-thumbnail,
.block-products {
z-index: 1;
position: relative;
}
/* â
Correction spécifique pour les liens dans les labels */
#search_filters .facet .facet-label a {
overflow: visible !important;
white-space: nowrap !important;
display: inline !important;
}
#search_filters .facet .collapse,
#search_filters_brands .facet .collapse,
#search_filters_suppliers .facet .collapse {
display: none;
}
#search_filters .facet .collapse.show,
#search_filters_brands .facet .collapse.show,
#search_filters_suppliers .facet .collapse.show {
display: block;
}
@media (min-width: 768px) { #menu-icon .material-icons { font-size: 40px;} #search_filter_controls{ display: none;}}
.facet {
position: relative;
}
.facet .collapse {
position: absolute;
top: 100%;
left: 0;
z-index: 999;
width: 100%;
background: white;
display: none;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12), 0 8px 32px rgba(0, 0, 0, 0.08);
border-radius: 5px;
}
.facet .collapse.show {
display: block;
}
.collapsing {
transition: none !important;
height: auto !important;
display: none !important;
}
.facet-label {
display: inline-flex;
align-items: center;
white-space: nowrap;
}
.facet-label a {
display: inline-block;
white-space: nowrap;
overflow: visible;
text-overflow: unset;
width: auto;
max-width: none;
}
.facet-content,
ul.facet-options,
ul.facet-content {
width: auto !important;
max-width: none !important;
padding: 15%;
}
[id^="facet_label_"] {
white-space: nowrap;
overflow: visible;
text-overflow: unset;
display: inline-block;
}
.faceted-slider, ul.faceted-slider{
width: auto !important;
max-width: none !important;
padding: 30%;
}
.pagination { margin-bottom: 0rem;}
#category h2, #category h3 {color:#2C2F36; margin-top:1.5%;margin-bottom:1.5%; margin-top:2%;}
#category h2, #category h1, #category h3 {font-size: 1rem;}
@media (min-width: 1200px) {#js-product-list-header {
width: 98%;
margin-top: 1%;
margin-bottom: 2% !important;
margin-top: 10px !important; }}
@media (max-width: 767px) {#js-product-list-header {
width: 94%; box-sizing: border-box;height: auto;}}
@media (min-width: 768px) and (max-width: 1199px) {
#js-product-list-header {
max-width: 95%;
padding: 15px;
width: 100% !important;
height: auto !important;
display: block; }}
#js-product-list-header {order: 1;
margin: 0px auto 4% auto !important;
text-align: justify;
padding: 2%;
background-color: #EFF2F5;
border-radius: 5px;}
.block-category.card.card-block {background-color: #EFF2F5;}
.pagination-premium {margin-bottom: 0px ;}
#category .card-block {padding: 1%;}
#products .up .btn-secondary,
#products .up .btn-tertiary,#product .up .btn-secondary,
#product .up .btn-tertiary {
position: fixed;
bottom: 2rem;
right: 2rem;
background-color: #EFF2F5;
color: #4A4F55;
border: 1px solid #AAB4BF;
border-radius: 0.375rem;
padding: 0.75rem 1rem;
font-weight: 500;
font-size: 0.875rem;
text-transform: uppercase;
cursor: pointer;
z-index: 999;
transition: all 0.3s ease;
}
#products .up .btn-secondary:hover,
#products .up .btn-tertiary:hover, #products .up .btn-secondary:hover,
#products .up .btn-tertiary:hover {
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);}
.up {
display: none;
position: fixed;
bottom: 30px;
right: 20px;
z-index: 999;
}
.page-content.page-cms ul, p { font-size: .875rem;}
section.facet[data-name="Couleur"] .custom-checkbox input[type="checkbox"] + span {
border: none !important;}
#search_filters .facet.active { border: 3px solid #333E48;}
#search_filters .facet.active .facet-title { font-weight: 600;}
@media (min-width: 1200px) {
.active_filters, #_desktop_search_filters_clear_all { display: none !important; }}
@media (max-width: 767px) {
.hidden-sm-down {
display: block; }}
.material-icons.visible {
opacity: 1;
}
.material-icons.invisible {
opacity: 0;
transition: opacity 0.1s ease;
}
.facet-content.open-left {
left: auto !important;
right: 0;
}
#categorie-contenu .category-item:hover strong {
color: #333E48; /* ou var(--success) si votre thĂšme le gĂšre */ font-weight:750; font-size:0.85rem;}
#category #categorie-contenu .img-fluid:hover {
background-color: #E1E5EA;
transform: none;
border: 3px solid #333E48;}
.label, label { font-size: .75rem;}
.product-miniature .product-description { padding: .25rem .25rem .25rem;}
#product #content { max-width: 100%;}
.blockreassurance_product { display: flex;justify-content: space-between;}
.product-description h2, .product-description p, .product-description ul, .product-description body { font-size: 0.875rem;
font-weight: 400;
color: #4A4F55;
word-break: break-word; line-height:1.5em; text-align:justify;}
.block-title {color: #212529 !important; text-align:center !important; align-content:center;}
.product-actions .control-label { font-size: 0.875rem; font-weight: 400; color: #232323; word-break: break-word; line-height:1.5em;text-transform: capitalize;}
.product-prices .tax-shipping-delivery-label { display: none;}
#product h3 { font-size: 0.9rem;color:#2C2F36;}
.tabs .nav-tabs .nav-link.active, .tabs .nav-tabs .nav-link:hover { border-bottom: #333E48 3px solid;}
.tabs .nav-tabs .nav-link.active, .block-title p {color: #333E48;}
#product .block-title p {color: #333E48 !important;}
#product-description-short ol li, #product-description-short ul li, .product-information .product-description ol li, .product-information .product-description ul li {
font-size: .875rem; font-weight:400; color: #232323;line-height:1.5em;}
.input-color:checked+span, .input-color:hover+span, .input-radio:checked+span, .input-radio:hover+span, label .color {
border: none; border-radius: 5px;}
.product-quantity #quantity_wanted {
padding-left: 0.75rem;
color: #212529;
border-radius: 5px;
font-weight: bold;
font-size: 150%;}
.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down, .bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up {
border-radius: 5px;}
.bootstrap-touchspin .input-group-btn-vertical .touchspin-up::after, .bootstrap-touchspin .input-group-btn-vertical .touchspin-down::after { font-weight: bold;}
.col-md-66 .product-cover {
aspect-ratio: 3 / 2;
width: 100%;
}
.col-md-66 .product-cover img {
width: 100%;
height: 100%;
object-fit: cover;
}
.product-cover img { border-radius: 5px;}
@media (min-width: 768px) { .col-md-66 { float: left; width: 60%; }}
@media (min-width: 768px) { .col-md-6 { width: 40%; padding-top:0.5%;}}
@media (min-width: 768px) { #index .col-md-6 { width: 50%; padding-top:0%;}}
#product #content { display: block;}
@media (min-width: 1200px) { #product #wrapper .row {margin-right: 0px; margin-left: 0px; }.page-content {padding-right: 15px;} }
.input-color .color input[type="radio"]:checked + span.color-swatch {
position: relative;
border-radius: 5%;
box-shadow: 0 0 0 2px #bd9d6c, inset 0 0 0 1px #fff;
outline: none;
transition: box-shadow 0.3s ease-in-out;
}
.input-color .color span.color-swatch {
display: inline-block;
width: 26px;
height: 26px;
border-radius: 5%;
border: 1px solid #ccc;
cursor: pointer;
transition: all 0.2s ease;
}
.input-container input[type="radio"]:checked ~ span.color {
box-shadow: 0 0 0 3px #ffffff, 0 0 0 5px #bd9d6c;
border-radius: 5%;
transition: all 0.2s ease;
}
.product-variants .control-label, .product-actions .control-label { display:none;}
.btn.btn-primary.add-to-cart {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px; /* espace entre icĂŽne et texte */
background-color: #bd9d6c;
color: #fff;
border: none;
font-weight: 600;
font-size: 1rem;
padding: 0.85rem 1.5rem;
border-radius: 6px;
text-transform: uppercase;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
transition: all 0.3s ease;
line-height: 1.2; /* important pour éviter les désalignements */
}
.btn.btn-primary.add-to-cart:hover {
background-color: #a6844c;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
transform: translateY(-2px);
}
.btn.btn-primary.add-to-cart:active {
transform: translateY(0);
box-shadow: none;
}
.wishlist-button.in-wishlist i::before {
content: "favorite";
color: #bd9d6c;
}
.wishlist-button i::before {
content: "favorite_border";
color: #666;
}
.product-add-to-cart {
display: flex;
align-items: center;
gap: 1.5rem; margin-bottom:4%;
}
.product-add-to-cart .product-quantity {
display: flex;
align-items: center;
gap: 1rem;
}
.product-add-to-cart .qty,
.product-add-to-cart .add {
margin: 0;
}
#wishlist-link {
font-size: 0.875rem;
white-space: nowrap;
font-weight: 400;
}
#wishlist-link,#wishlist-link:hover{
color: #212529;
text-decoration: none;
}
.wishlist-link-style, wishlist-link-style:hover, wishlist-link-style:focus {
color: #212529 !important;
text-decoration: underline !important;
padding-right: 7%;
font-size: 0.875rem;
font-weight: 400;
transition: color 0.3s ease;
}
.wishlist-count {
color: #bd9d6c;
font-weight: bold;
}
#pagenotfound h1 { margin-bottom: 1%; margin-top: 8%; text-align: center;}
#pagenotfound p { text-align: center;}
@media (min-width: 1200px) { #footer .block_newsletter #block-newsletter-label { padding-right: 4%;}}
@media (min-width: 768px) { .col-md-67 { float: left; width: 100%; }}
.nav-tabs {
display: flex;
flex-direction: column;
border-bottom: none; /* optionnel : enlĂšve la ligne sous les tabs */
}
.nav-tabs .nav-item {
margin-bottom: 0.5rem; /* espace entre les onglets */
}
.nav-tabs .nav-link {
border: 1px solid #dee2e6;
border-radius: 0.25rem;
}
.product-tab-section {
margin-bottom: 2rem;
padding: 1rem;
border: 1px solid #ccc;
border-radius: 4px;
background: #f9f9f9;
}
#wishlist-link .wishlist-icon {
color: #888;
transition: color 0.3s;
}
#wishlist-link.favorited .wishlist-icon {
color: red;
content: "favorite";
}
/* Mise en page de la page des favoris */
#wishlist-container {
padding: 2rem 1rem;
background-color: #ffffff;
border-radius: 5px;
max-width: 900px;
margin: 0 auto;
}
.wishlist-item h3 {
font-size: 1.1rem;
margin-bottom: 1rem;
font-weight: 600;
color: #333E48;
}
.wishlist-item .btn-primary {
background-color: #6C7A89;
border: none;
margin-right: 0.5rem;
}
.wishlist-item .btn-outline-danger {
border-color: #ff4c4c;
color: #ff4c4c;
}
.wishlist-item .btn-outline-danger:hover {
background-color: #ff4c4c;
color: #fff;
}
/* Corrige les marges automatiques du CMS */
#cms #main,
#cms #main #content {
margin: 0 auto;
padding: 0;
background: none;
border: none;
}
.page-content.page-cms {
background-color: transparent;
}
@media (max-width: 768px) {
#wishlist-container {
padding: 1rem;
}
.wishlist-item .card {
padding: 1rem;
}
}
#wishlist-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
padding: 2rem 1rem;
max-width: 1200px;
margin: 0 auto;
}
.wishlist-item .card {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 0rem;
background: #fff;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.wishlist-item h3 {
font-size: 1.1rem;
margin-bottom: 1rem;
font-weight: 600;
color: #333E48;
}
.wishlist-item .btn-primary {
background-color: #6C7A89;
border: none;
margin-bottom: 0.5rem;
}
.wishlist-item .btn-outline-danger {
border-color: #ff4c4c;
color: #ff4c4c;
}
.wishlist-item .btn-outline-danger:hover {
background-color: #ff4c4c;
color: #fff;
}
.wishlist-item .card {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* Grille */
#wishlist-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 2rem;
padding: 2rem 1rem;
max-width: 1200px;
margin: 0 auto;
}
/* Carte */
.wishlist-card {
background: #fff;
border: 1px solid #eee;
border-radius: 10px;
padding: 1.5rem;
text-align: center;
box-shadow: 0 2px 10px rgba(0,0,0,0.04);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wishlist-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}
/* Image */
.wishlist-img {
max-width: 100%;
height: auto;
border-radius: 6px;
object-fit: cover;
transition: opacity 0.3s ease;
}
.wishlist-link:hover .wishlist-img {
opacity: 0.85;
}
/* Titre */
.wishlist-title {
font-size: 1rem;
font-weight: 600;
color: #333;
margin-top: 0.5rem;
text-decoration: none;
}
/* Bouton Supprimer */
.btn-remove-fav {
background: none;
border: 1px solid #ff4c4c;
color: #ff4c4c;
padding: 0.4rem 0.9rem;
font-size: 0.85rem;
border-radius: 20px;
cursor: pointer;
transition: all 0.2s ease;
margin-bottom:2%;
}
.btn-remove-fav:hover {
background: #ff4c4c;
color: #fff;
}
/* Image de favoris : bord Ă bord sans padding */
.wishlist-img {
width: 100%;
height: auto;
object-fit: cover;
display: block;
border-radius: 10px 10px 0 0;
margin: 0;
aspect-ratio: 3 / 2;
}
.wishlist-card {
padding: 0;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wishlist-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}
.cms-id-7 .mb-3 {margin-bottom: 0rem !important; }
.fadeout-before-redirect {
transition: opacity 0.8s ease;
opacity: 1;
}
.wishlist-link {
display: block;
margin: 0;
padding: 0;
text-align: center;
}
#fullscreen-image {
cursor: zoom-in;
}
:fullscreen #fullscreen-image {
cursor: zoom-out;
}
#fullscreen-overlay {
display: none;
position: fixed;
top: 0; left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.9);
z-index: 9999;
transition: opacity 0.3s ease;
opacity: 0;
}
#fullscreen-overlay.active {
display: block;
opacity: 1;
}
.medium-zoom-overlay {
z-index: 10000 !important;
}
.medium-zoom-image--opened {
z-index: 10001 !important;
}
#fullscreen-image {
cursor: zoom-in;
}
.medium-zoom-image--opened {
cursor: zoom-out;
}
.secondary-images-row img {
border: 1px solid #ccc;
border-radius: 6px;
transition: transform 0.2s ease; width: 100%;
display: block;
border-radius: 6px;
}
.secondary-images-row img:hover {
transform: scale(1.02);
}
.d-flex.gap-2.mt-3 {display: flex;margin-top:10px !important; gap: 10px; /* Espace entre les deux images */}
.secondary-images-row > div {
flex: 1; /* Les deux colonnes prennent 50% de la largeur disponible */
}
.fancybox__thumbs .carousel__slide .fancybox__thumb::after {
border: 4px solid #a1783e !important;}
.tabs .tab-pane {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
height: auto !important;
transform: none !important;
}
.tabs .tab-pane.fade {
transition: none;
}
.tab-title {
padding: 8px 16px;
background-color: #f4f4f4;
border: 1px solid #ddd;
font-weight: 600;
margin-top: 24px;
margin-bottom: 8px;
border-radius: 6px;
}
.highlights-list {
list-style: none;
padding-left: 0;
margin: 0;
}
.highlights-list li {
font-size: 1rem;
padding: 8px 0;
border-bottom: 1px dashed #ddd;
color: #444;
display: flex;
align-items: center;
}
.highlights-list li:last-child {
border-bottom: none;
}
.icon-check {
display: inline-block;
width: 18px;
height: 18px;
margin-right: 10px;
background-color: #bd9d6c;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center;
mask: url('data:image/svg+xml;utf8,') no-repeat center;
mask-size: contain;
-webkit-mask-size: contain;
}
.tabs {
padding: 0;
margin-top: 0;}
.product-cover { margin-bottom: 0rem;}
.col-md-66.scrollable-vertical{
height: calc(100vh - 50px); /* ajuste selon ton header+haut de page */
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin; /* Pour Firefox */
overscroll-behavior: contain;
scroll-behavior: smooth;
max-height: none; /* ou sera fixé dynamiquement par JS */
-webkit-overflow-scrolling: touch; /* utile mobile */
height: auto ;
}
/* Pour Chrome/Edge (scrollbar personnalisée optionnelle) */
.col-md-66.scrollable-vertical::-webkit-scrollbar{
width: 6px;
}
.col-md-66.scrollable-vertical::-webkit-scrollbar-thumb {
background-color: #ccc;
border-radius: 4px;
}
.row.product-container {
height: 100vh;
}
.col-md-66 { max-height: 100vh;
box-sizing: border-box; }
.visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
@media (max-width: 320px) {
#wrapper { margin-top: 8%;}
}
@media (min-width: 321px) and (max-width: 339px) {
#wrapper { margin-top: 7%; }
}
@media (min-width: 340px) and (max-width: 359px) {
#wrapper { margin-top: 6%;}
}
@media (min-width: 360px) and (max-width: 380px) {
#wrapper { margin-top: 5%; }
}
@media (min-width: 381px) and (max-width: 498px) {
#wrapper { margin-top: 7.5%;}
}
@media (min-width: 499px) and (max-width: 509px) {
#wrapper { margin-top: 12.5%; }
}
@media (min-width: 510px) and (max-width: 579px) {
#wrapper { margin-top: 9.5%;}
}
@media (min-width: 580px) and (max-width: 679px) {
#wrapper{ margin-top: 7%; }
}
@media (min-width: 680px) and (max-width: 767px) {
#wrapper { margin-top: 4.5%; }
}
@media (min-width: 768px) and (max-width: 1199px) {
#wrapper{ margin-top: 8.5%; }
}
@media (min-width: 1200px) {
#wrapper{ margin-top: 2.5%; }
}
#index #wrapper { margin-top: 0% !important; }
.fancybox__backdrop {
background: linear-gradient(145deg, rgba(240, 242, 245, 0.98), rgba(220, 224, 228, 0.95)) !important;
backdrop-filter: blur(2px) !important;
}
@media (min-width: 1024px) {
.fancybox__slide {
padding: 16px 25px !important;
}
}
.bloc-prix-stock {display: flex; align-items: center; gap: 3%; }
.product-prices div, #product label {margin-top: 0rem; margin-bottom: 0rem;}
.product-quantities label { color:#4CAF50; font-weight:bold;font-size: 1rem;}
#product .h5 {line-height: 1.5em;}
.product-prices{ margin-top: 0rem;}
.product-description h2 { margin-bottom: 1.5%;}
.col-md-6 { padding-bottom: 0%;}
.top-fiche-produit { margin-bottom: 4%; padding: 3%;
border-radius: 5px;
background-color: #EFF2F5;}
.col-md-69.scrollable-vertical {
height: calc(100vh - 300px); /* ajuste selon ton header+haut de page */
overflow-y: auto;
overflow-x: hidden;
padding-right: 10px;
box-sizing: border-box;
scrollbar-width: thin;
scroll-behavior: smooth;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch; /* utile mobile */
}
.col-md-69.scrollable-vertical::-webkit-scrollbar {
width: 6px;
}
.col-md-69.scrollable-vertical::-webkit-scrollbar-thumb {
background-color: #ccc;
border-radius: 4px;
}
html { scroll-behavior: smooth; overscroll-behavior-y: none; /* empĂȘche les "rebonds" visuels sur certains navigateurs */}
.product-discounts { margin-bottom: 0.8%;}
#product .h1 {margin-bottom: 1rem; line-height: 2rem;}
.definition-list dl dd:nth-of-type(even), .definition-list dl dt:nth-of-type(even), .product-features>dl.data-sheet dd.value:nth-of-type(even), .product-features>dl.data-sheet dt.name:nth-of-type(even), .product-features>dl.data-sheet dd.value, .product-features>dl.data-sheet dt.name{ border-radius: 5px; background-color: #EFF2F5; text-transform:none; color: #4A4F55; font-size:0.875rem; font-weight: 400;}
/* FlĂšches de navigation (blanches avec contour sombre pour contraste) */
.carousel__button.is-next svg path,
.carousel__button.is-prev svg path {
stroke: white;
stroke-width: 2.5;
fill: none;
filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.6));
}
/* IcĂŽnes de la toolbar gauche et droite (blanches + halo sombre) */
.fancybox__toolbar__items.fancybox__toolbar__items--left svg path,
.fancybox__toolbar__items.fancybox__toolbar__items--right svg path {
stroke: white;
stroke-width: 2.5;
fill: none;
filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.6));
}
/* La toolbar elle-mĂȘme reste transparente */
.fancybox__toolbar {
background: transparent;
backdrop-filter: none;
border: none;
box-shadow: none;
}
.product-swiper {
width: 100%;
max-width: 100%;
position: relative;
margin-bottom: 1rem;
}
.product-swiper .swiper-slide {
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.swiper-button-prev,
.swiper-button-next {
color: white !important;
filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.6)) !important;
}
.product-swiper .swiper-slide {
position: relative;
width: 100%;
aspect-ratio: 5 / 3; /* â
impose le ratio 5:3 */
overflow: hidden;
}
.product-swiper img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; /* â
remplit sans Ă©tirer */
object-position: center center;
border-radius: 5px;
}
.hidden-md-up.text-xs-right.up {
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
position: fixed;
bottom: 20px;
right: 20px;
z-index: 999;
}
.radio-inline input[type="radio"] {
vertical-align: middle;
margin-top: -2px; /* ajuste finement selon le rendu de ta police */
}
.underline-favoris {
text-decoration: underline; color: #212529 !; font-size: 0.8rem;}
.delivery-bold { font-weight: 600; /* ou 700 pour plus marqué */}
.estimated-delivery {font-size: 0.8rem;}
.top-fiche-produit h1,
.top-fiche-produit .grade-stars {
display: inline-block;
vertical-align: middle;
margin-right: 12px;
}
.product-comments-links {
display: inline-block;
vertical-align: middle;
font-size: 0.9rem;
color: #666;
}
.product-comments-links a {
color: #007bff;
text-decoration: underline;
margin: 0 4px;
}
.bloc-titre {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.bloc-titre .h1 {
display: inline;
font-size: 1.6rem;
font-weight: 600;
margin: 0;
}
.product-review-summary,
.product-list-reviews {
font-size: 0.9rem;
color: #666; margin-bottom: 2%; }
.stars-placeholder {
color: #ccc;
letter-spacing: 1px; font-size: 1.25rem;}
.review-number { color: #4A4F55; font-weight: bold; font-size: 1rem;}
#product #wrapper .row { margin-bottom: 0%;}
.stars-inline {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: nowrap;
}
.stars-wrapper {
position: relative;
font-size: 1.3rem;
line-height: 1;
display: inline-block;
}
.stars-overlay {
position: absolute;
top: 0;
left: 0;
white-space: nowrap;
}
.stars-background {
color: #A0A4AA;
z-index: 1;
top: 0;
left: 0;
overflow: hidden;
z-index: 1;
}
.stars-overlay {
color: #f4b400; /* un doré plus foncé que #f4c150 */
font-weight: bold;
z-index: 2;
overflow: hidden;
}
.stars-background .star,
.stars-overlay .star {
display: inline-block;
width: 1em;
height: 1em;
}
.average-grade {
font-size: 1rem;
font-weight: 500;
color: #333;
}
.review-count {
font-size: 1rem;
color: #444;
font-weight: 500;
}
.underline {
text-decoration: underline;
}
.stars-background,
.stars-overlay {
font-size: 1.4rem;
}
/* === ULTRA PREMIUM PRODUCT COMMENTS FINAL === */
.premium-review-section {
background-color: #fdfdfc;
padding: 60px 20px;
font-family: var(--font-family-primary, 'Playfair Display', Georgia, serif);
color: #2e2e2e;
border-top: 2px solid #ececec; margin-top:3%;
}
/* Titre principal */
.review-header {
text-align: center;
font-size: 2.2rem;
margin-bottom: 40px;
font-weight: bold;
text-transform: uppercase;
}
/* Note globale */
.review-summary {
display: flex;
margin-bottom: 50px;
}
.summary-grade {
text-align: center;
margin-bottom: 20px; }
.summary-grade .note-globale-label {
display: block;
font-size: 1rem;
margin-bottom: 5px;
color: #555;
font-weight: 500; margin-bottom:2%;
}
.summary-grade .grade-number {
font-size: 3rem;
font-weight: 600;
margin-bottom: 8px;
}
.summary-grade .stars,
.review-stars,
.product-global-stars i {
color: #e3b52f !important;
font-size: 1.4rem;
}
/* RĂ©partition des notes */
.summary-distribution {
width: 100%;
max-width: 500px;
margin: 0 auto 30px;
}
.distribution-bar {
display: flex;
align-items: center;
gap: 10px;
margin: 6px 0;
}
.star-label::before {
content: 'â
';
color: #e3b52f;
margin-right: 4px;
}
.star-label {
width: 40px;
text-align: left;
font-size: 1.1rem;
}
.bar {
background: #eaeaea;
flex: 1;
height: 8px;
border-radius: 4px;
overflow: hidden;
}
.bar-fill {
background-color: #e3b52f;
height: 100%;
border-radius: 4px;
transition: width 0.3s ease-in-out;
}
.bar-count {
width: 30px;
text-align: right;
font-size: 0.9rem;
}
/* Tableau des critĂšres */
.criteria-table {
width: 100%;
max-width: 600px;
margin: 30px auto;
border-collapse: collapse;
font-size: 0.95rem;
}
.criteria-table th,
.criteria-table td {
padding: 12px 16px;
border-bottom: 1px solid #e0e0e0;
text-align: left;
}
.criteria-table th {
background-color: #f9f9f9;
font-weight: 600;
}
.criteria-table td:last-child {
text-align: right;
font-weight: bold;
}
/* Avis */
.review-list {
margin-top: 40px;
}
.review-item {
margin-bottom: 30px;
border-top: 1px solid #ddd;
padding-top: 30px;
}
.review-meta {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.95rem;
}
.review-author {
font-weight: 600;
font-size: 0.95rem;
text-transform: none;
}
.review-date {
font-size: 0.9rem;
color: #888;
}
.review-content {
margin-top: 15px;
font-size: 1.05rem;
line-height: 1.6;
}
.review-grades {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 15px;
}
.review-criterion {
background: #f1f1f1;
padding: 6px 10px;
border-radius: 6px;
font-size: 0.9rem;
}
/* RĂ©ponse du service client */
.review-reply {
background-color: #f9f9f9;
border-left: 4px solid #e3b52f;
padding: 15px;
margin-top: 20px;
font-style: italic;
color: #555;
}
/* Galerie photos */
.review-gallery {
margin: 50px 0;
}
.review-gallery h3 {
text-align: center;
margin-bottom: 20px;
font-weight: bold;
}
.image-slider {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
.review-thumb {
width: 250px;
height: 100px;
object-fit: cover;}
.review-thumb:hover {
transform: scale(1.05);
}
/* Pied */
.review-footer {
text-align: center;
margin-top: 60px;
font-size: 0.85rem;
color: #777;
}
/* Bloc global */
.premium-review-section {
background: #fff;
padding: 0rem 1rem;
max-width: 1200px;
margin-right: auto;
margin-left: auto;
}
/* Titre section */
.premium-review-section h2.review-header {
text-align: center;
font-size: 2rem;
margin-bottom: 2rem;
font-weight: 600;
text-transform: uppercase;
color: #2d2d2d;
padding-top: 2.5rem;
}
/* Note globale */
.review-summary .grade-number {
font-size: 3rem;
font-weight: 700;
color: #2d2d2d;
}
.review-summary .stars i {
font-size: 1.5rem;
color: #f6b01e;
}
/* RĂ©partition des Ă©toiles */
.grade-distribution {
margin-top: 1rem;
}
.grade-distribution .d-flex {
align-items: center; display: flex; margin-bottom: 1rem !important; margin-top: 1.3rem; gap: 3%;
}
.grade-distribution .progress {
height: 10px;
background-color: #eee;
border-radius: 5px;
overflow: hidden;
width: 150px;
}
.grade-distribution .progress-bar {
background-color: #bd9d6c;
height: 100%;
}
/* Tableau des critĂšres */
.criteria-table {
width: 100%;
margin-top: 2rem;
border-collapse: collapse;
font-size: 0.95rem;
}
.criteria-table th,
.criteria-table td {
padding: 0.75rem;
text-align: left;
border-bottom: 1px solid #ddd;
}
.criteria-table th {
font-weight: 600;
background: #f9f9f9;
}
/* Galerie photos */
.review-gallery {
margin: 3rem auto;
text-align: center;
}
.review-thumb {
max-width: 250px;
height: auto;
margin: 0 5px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* Avis client */
.review-list {
margin-top: 3rem;
}
.review-item {
border-top: 1px solid #ccc;
padding: 2rem 0;
}
.review-meta {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
font-size: 0.9rem;
margin-bottom: 0.5rem;
}
.review-author {
font-weight: bold;
color: #bd9d6c;
}
.review-content {
font-size: 1rem;
color: #333;
margin: 0.5rem 0 1rem;
}
/* RĂ©ponse service client */
.review-reply {
background: #f9f9f9;
padding: 1rem;
border-left: 4px solid #bd9d6c;
font-size: 0.9rem;
color: #555;
margin-top: 1rem;
}
/* Responsive */
@media (max-width: 768px) {
.review-meta {
flex-direction: column;
gap: 0.3rem;
}
.criteria-table th,
.criteria-table td {
font-size: 0.9rem;
}
.grade-number {
font-size: 2.5rem;
}
.review-content {
font-size: 0.95rem;
}
.review-thumb {
max-width: 60px;
}
}
.review-summary {
margin-top: 2rem;
gap: 2rem;
flex-wrap: wrap;
}
.review-summary > div {
min-width: 280px;
flex: 1;
}
.summary-grade .grade-number {
font-size: 2.5rem;
font-weight: bold;
color: #bd9d6c;
}
.criteria-table {
border-collapse: collapse;
margin-top: 10px;
width: 100%;
max-width: 320px;
}
.criteria-table th,
.criteria-table td {
border: 1px solid #ddd;
padding: 6px 12px;
text-align: center;
}
.review-criterions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 1rem;
padding: 1rem;
border-radius: 6px;
background-color: #f9f9f9;
font-size: 0.95rem;
justify-content: space-between;
}
.criterion-line {
display: flex;
align-items: center;
padding: 6px 10px;
border: 1px solid #eee;
border-radius: 4px;
background-color: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,0.03);
white-space: nowrap;
max-width: 100%;
flex-shrink: 0;
}
.criterion-name {
color: #333;
font-weight: 600;
font-family: 'Open Sans', sans-serif;
margin-right: 6px;
}
.criterion-grade {
color: #bd9d6c;
font-weight: 600;
font-family: 'Open Sans', sans-serif;
}
/* Style harmonisĂ© pour les produits du slider "mĂȘme catĂ©gorie" */
.same-category-products .product-style {
padding: 10px;
}
.same-category-products .product-miniature {
border: 1px solid #ddd;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
background-color: #fff;transition: none !important;
}
.same-category-products .product-miniature:hover, .product-miniature:hover,
.product-miniature:hover img, {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) ;
transform: translateY(-4px); transition: none !important; transform: none !important;
}
.same-category-products .swiper-scrollbar {
height: 6px;
margin-top: 10px;
background: rgba(0, 0, 0, 0.08); /* partie claire */
border-radius: 3px;
}
.same-category-products .swiper-scrollbar-drag {
background: rgba(0, 0, 0, 0.4); /* poignée noire (partielle) */
border-radius: 3px;
cursor: pointer;
}
.products-slider-section {
padding: 2rem 1rem;
}
.category-products-swiper {
padding-bottom: 2rem;
}
.category-products-swiper .swiper-slide {
width: auto;
max-width: 220px;
}
.category-products-swiper img {
max-width: 100%;
height: auto;
object-fit: cover;
border-radius: 8px;
}
.category-products-swiper .swiper-button-prev,
.category-products-swiper .swiper-button-next {
color: #bd9d6c;
}
.h2.text-center.mb-4 {margin-bottom: 1.3%; margin-top: 4%;}
.review-note.me-1.fw-semibold.text-dark {color: #bd9d6c; font-weight: bold;}
.review-item-last {
border-bottom: 1px solid #e5e5e5;
padding-bottom: 2rem;
margin-bottom: 2rem;
}
.criteria-modern-list .criterion-name {
font-size: 1rem;
color: #333;
}
.criteria-modern-list .criterion-grade i {
font-size: 14px;
}
.grade-distribution i {
font-size: 16px;
}
.review-item-last {
border-bottom: 1px solid #ddd;
padding-bottom: 20px;
}
.review-thumb {
max-width: 100%;
height: auto;
border-radius: 5px;
margin-top: 10px;
}
.progress { margin-bottom: 0rem;
}
.review-distribution {
font-family: var(--font-family, 'Open Sans', sans-serif);
max-width: 400px;
}
.review-distribution-row {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.review-label {
width: 80px;
font-size: 14px;
}
.review-bar {
flex-grow: 1;
height: 8px;
background-color: #e0e0e0;
margin: 0 10px;
border-radius: 4px;
position: relative;
}
.review-bar-fill {
height: 100%;
background-color: #bd9d6c;
border-radius: 4px;
}
.review-count {
width: 20px;
text-align: right;
font-size: 14px;
}
#product .review-title .h6 .fw-bold h3 { font-size:1rem; font-weight: normal;}
.criteria-table-wrapper table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background-color: #fff;
}
.criteria-table-wrapper td {
padding: 14px 18px;
font-size: 15px;
vertical-align: middle;
}
.criteria-table-wrapper tr:not(:last-child) td {
border-bottom: 1px solid #f0f0f0;
}
.criteria-table-wrapper td:first-child {
font-weight: 600;
text-align: left;
width: 50%;
}
.criteria-table-wrapper td:last-child {
text-align: right;
white-space: nowrap;
}
.criteria-table-wrapper .material-icons {
vertical-align: middle;
margin-left: 2px;
font-size: 18px;
}
.progress { margin-bottom: 0rem;}
.criteria-table-premium {
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
overflow: hidden;
background: #fff;
width: 100%;
font-size: 0.9375rem; /* plus compact */
}
.criteria-table-premium td,
.criteria-table-premium th {
padding: 8px 12px;
vertical-align: middle;
white-space: nowrap; /* â
empĂȘche le retour Ă la ligne */
text-align: left;
}
.criteria-table-premium td:last-child {
text-align: right;
}
.criteria-table-premium tr {
height: 40px; /* â
réduit la hauteur */
}
@media (max-width: 768px) {
.criteria-table-premium td,
.criteria-table-premium th {
font-size: 0.875rem;
padding: 6px 10px;
}
.criteria-table-premium tr {
height: auto;
}
}
.material-icons {
vertical-align: middle;
font-size: 16px; /* ajuste si tu veux plus petit/grand */
transition: color 0.3s ease;
}
.star-inline {
display: inline-flex;
align-items: center;
gap: 2px; /* espacement entre les Ă©toiles */
}
.star-inline .material-icons {
padding: 0;
margin: 0;
line-height: 1;
}
.star-inline.large .material-icons {
font-size: 30px; margin-top:2%;
}
.img-thumbnail {border: none; padding:0;}
#product .py-2 {padding-top: 0rem !important;}
/* Harmoniser le style du titre d'avis avec le texte */
.review-title {
font-weight: bold;
color: #2c2c2c;
font-size: 1rem !important;
margin-top: 2rem; margin-bottom: 1.25rem;
}
/* Ajouter une marge entre le prénom et le titre */
.review-author {
margin-bottom: 0.25rem;
}
/* Ajouter une bordure sous le dernier avis */
.review-item:last-of-type {
border-bottom: 1px solid #ddd;
padding-bottom: 1rem;
margin-bottom: 1rem;
}
.recommendation {
font-size: 0.95rem;
color: #555;
}
.recommendation strong {
color: #333;
}
.recommend-percent .text-muted {
font-size: 1rem;
color: #555 !important;
font-family: var(--font-family);
font-weight: 500;}
.recommend-percent strong {
color: #bd9d6c; font-weight: bold; font-size: 22px;
}
#content-wrapper .summary-grade {
display: flex; align-items: center;}
#content-wrapper .summary-grade .grade-number { font-size: 1rem;}
#content-wrapper .star-inline.large .material-icons { font-size: 20px;}
#content-wrapper .summary-grade .grade-number { margin-bottom: 0;}
#content-wrapper .text-muted { margin-bottom: 0; font-weight: bold; color: #4A4F55 !important;}
#content-wrapper .mt-3 { margin-top: 0rem !important;}
#content-wrapper .product-review-summary { margin-bottom: 0;}
#content-wrapper .summary-grade { margin-bottom: 1%; gap: 4%;}
#content-wrapper .product-review-summary {
margin-bottom: 1.5%;
background: white;
padding: 1%;
border-radius: 6px;
}
.btn-outline-primary,.btn-outline-primary:hover, .btn-outline-primary:active, .btn-outline-primary:focus {
color: #212529;
border-color: #212529; background-color: white;
}
#post-product-comment-modal .modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2%; background-color: #AAB4BF; border:none; color: #212529; border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
#post-product-comment-modal .modal-content {
border-radius: 10px; border:none; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}
#post-product-comment-modal .h2 {
margin: 0;
font-size: 1.2rem;
flex-grow: 1;
}
#post-product-comment-modal .close {
font-size: 2rem;
color: #333E48;
opacity: 1;
background: none;
border: none;
line-height: 1;text-shadow: none;
}
#post-product-comment-modal .product-cover img {
max-width: 100%;
height: auto;
}
#post-product-comment-modal .h3 {
font-size: 1.1rem;
text-align: center; line-height: 1.5; margin-top:8% !important;
}
#post-product-comment-modal .col-sm-10, #post-product-comment-modal .col-sm-9, #post-product-comment-modal .col-sm-11, #post-product-comment-modal .col-sm-4, #post-product-comment-modal .col-sm-8 {
width:50%;}
#post-product-comment-modal .col-sm-6, #post-product-comment-modal .col-sm-16, #post-product-comment-modal .col-sm-16, #post-product-comment-modal .col-sm-46, #post-product-comment-modal .col-sm-36 {width:100%;}
#post-product-comment-modal .mb-2 {display:flex; justify-content: space-between; width: 60%; margin-left: 20%;}
#post-product-comment-modal .mb-55 {margin-top:0%; width: 60%; margin-left: 20%; font-style:italic; font-size: 0.7rem;}
#post-product-comment-modal .mb-3 { margin-bottom: 1.5rem !important;}
#post-product-comment-modal input[name="email"] {border: 1px solid rgba(0, 0, 0, .25) !important;}
#post-product-comment-modal .col-sm-16 {width: 50%; margin-left:25%; margin-right: 25%; }
#post-product-comment-modal .fw-bold .mb-2 .d-block {margin-bottom: 5%; color: #333E48; font-weight: bold;}
#post-product-comment-modal label { margin-top: 4.5%;}
#post-product-comment-modal .d-flex { margin-top: 4%;}
#post-product-comment-modal #recommend_product,
label[for="recommend_product"] {
width: 60%;
margin-left: 20%;
display: block; text-align: left;
}
#post-product-comment-modal #comment_images { font-size: 0.75rem;}
#post-product-comment-modal .col-sm-56 {display:flex; justify-content: space-between; }
#post-product-comment-modal .form-group { margin-bottom: 0rem;}
#post-product-comment-modal .btn {border-radius: 5px; font-weight: bold; background-color: #212529; color: white; margin-top: 4%; margin-bottom: 4%;}
#post-product-comment-modal .col-sm-36 {justify-content: space-evenly; display:flex; margin-top:4%; margin-bottom:4%; }
#post-product-comment-modal .form-group mt-3 { margin-top: 5%;}
#post-product-comment-modal .mt-3 { margin-top: 0rem !important;}
#post-product-comment-modal .bouton-modal { font-size: 0.8rem; font-style: italic; margin-top: 4%;}
#post-product-comment-modal .col-sm-46 {padding-left:15px; padding-right: 15px; }
#product #wrapper #post-product-comment-modal .row { margin-bottom: 0%;}
#product .container .col-md-6, #product .container-fluid .col-md-6 {
padding-right: 0px;}
.same-category-products { padding-left: 50px;padding-right: 50px;margin-bottom: 3%;}
.product-comment-response {
font-size: 0.9rem;
color: #333;
border-left: 4px solid #bd9d6c;
background-color: #fdfaf4;
border-radius: 6px;
}
#product-comments .product-comment-response.mt-3.p-3 { padding: 1rem !important;}
#product-comments .product-comment-response.mt-3 { margin-top: 0rem !important; margin-bottom: 1rem;}
#product #wrapper { margin-top: 1%; }
/* Bloc CTA - mĂȘme collection */
.card.rounded-2xl.cta-collection {
border: none;
border-radius: 1.25rem;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);
transition: all 0.3s ease;
}
.card.cta-collection .card-body {
font-family: 'Inter', 'Helvetica Neue', sans-serif;
padding: 1.5rem;
}
.card.cta-collection .card-body p {
color: #555;
font-size: 0.95rem;
line-height: 1.6;
margin-bottom: 1.2rem;
}
.card.cta-collection .btn-theme-outline {
border: 1.5px solid #bd9d6c;
color: #fff;
font-weight: 530;
font-size: 0.85rem;
padding: 0.4rem 1.4rem;
border-radius: 50px;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: all 0.2s ease-in-out;
background-color: #bd9d6c;
}
.card.cta-collection {
border: none;
border-radius: 1.25rem;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
font-family: 'Inter', sans-serif;
}
.card.cta-collection {
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
}
.card.cta-collection .card-body {
padding: 1.8rem 1.2rem;
text-align: center;
}
.card.cta-collection p {
margin-bottom: 1.3rem;
font-size: 0.95rem;
color: #444;
line-height: 1.6;
}
.btn.btn-theme-outline {
display: inline-block;
padding: 0.5rem 1.6rem;
font-size: 0.85rem;
text-transform: uppercase;
font-weight: 500;
color: #bd9d6c;
border: 1.5px solid #bd9d6c;
border-radius: 999px;
letter-spacing: 0.4px;
background-color: transparent;
transition: all 0.25s ease-in-out;
}
.btn.btn-theme-outline:hover {
background-color: #bd9d6c;
color: #fff;
text-decoration: none;
}
.card.cta-collection {
background-color: #f7efe8;
border: 1px solid #e7d6bc; /* optionnel : bordure dorée trÚs subtile */
transition: background-color 0.3s ease;
}
.blockreassurance_product {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #f7efe8;
border-radius: 1rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
padding: 1%;
gap: 1.2%;
font-family: 'Inter', 'Helvetica Neue', sans-serif;
text-align: center; margin-top:0; margin-bottom:5%; margin-left:2%; margin-right:2%; padding-top:0%;
}
.blockreassurance_product > div {
display: flex;
align-items: center;
justify-content: center;
gap: 1.2rem;
}
.blockreassurance_product svg {
width: 24px;
height: 24px;
flex-shrink: 0;
}
.blockreassurance_product svg path {
fill: #bd9d6c !important;
}
.blockreassurance_product .block-title {
font-size: 0.95rem;
font-weight: 600; /* plus affirmĂ© sans ĂȘtre lourd */
color: #7a5e3b !important; /* brun doux qui fait Ă©cho au #bd9d6c */
white-space: nowrap;
margin: 0;
line-height: 1.4;
margin-top: 2.5%;
}
.sticky-add-to-cart {
position: fixed;
bottom: 0;
background-color: #fff;
z-index: 9999;
border-top: 1px solid #eee;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(100%);
color: #4A4F55; font-weight: bold;
display: flex;
width: 100vw; /* force 100% largeur Ă©cran */
justify-content: space-between;align-items:center;
font-family: 'Inter', 'Helvetica Neue', sans-serif;
}
.sticky-add-to-cart .btn-primary {
background-color: #bd9d6c;
border-color: #bd9d6c !important;
color: white;
font-weight: 550;
transition: all 0.3s ease-in-out; padding: 0.2rem 1.15rem;
}
.py-3, .py-4 { padding-top: 6px !important;
padding-bottom: 6px !important; }
.py-4 { text-align:right;}
#product .py-2 { display: flex; white-space: nowrap;align-items: center; padding-bottom:0 !important;}
#product .py-3 { white-space: nowrap;}
.star-inline large-1, .grade-number.me-2-1 { margin-right: 3%;}
.sticky-stars-wrapper, .sticky-add-to-cart > .container { display: flex; }
.sticky-add-to-cart .btn.btn-primary:focus {
outline: none;
box-shadow: none;
}
#product-availability {
font-weight: normal;
text-align: center; font-size:0.8rem;
}
.sticky-add-to-cart.visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}
#product-availability .product-last-items {font-size:20px; margin-bottom:3.5%; margin-left:4%; margin-right:2%;color: #bd9d6c;}
#product-availability {color: #bd9d6c;}
.product-quantities {
display: inline-flex;
align-items: center;
white-space: nowrap;
gap: 0.5rem;
}
.product-quantities .label {
margin-bottom: 0;
display: inline-block;
white-space: nowrap;
}
#product-availability {
display: inline-flex;
align-items: center;
white-space: nowrap;
font-size: 0.8rem;
line-height: 1.2;margin-top: 0rem;
}
#product-availability i {
margin-right: 0.25rem;
font-size: 18px;
vertical-align: middle;
}
.sticky-stars-wrapper {
align-items: center;
}
#product .py-3 { align-content: center;}
body#product a[href="#header"] {
display: none !important;
}
.delivery-option[style*="display: none"] {
display: none !important;
}
.delivery-option {
display: block;
}
.delivery-options-wrapper {
visibility: hidden;
opacity: 0;
}
.delivery-options-wrapper.loaded {
visibility: visible;
opacity: 1;
transition: opacity 0.3s ease-in;
}
#delivery-method, .delivery-options {
display: none !important;
}
.delivery-options-wrapper {
padding: 2%;
padding-bottom: 1%;
background-color: white;
border-radius: 6px;
margin-bottom: 3%;
text-align: center;}
.delivery-option.d-block.mb-2 label {
color: #4A4F55;
text-align: justify;
padding-bottom: 2%;
padding-left: 2%;
padding-right: 3%;}
#product .delivery-label { font-weight: bold; color: #bd9d6c;}
.product-variants>.product-variants-item { margin-bottom: 0;}
.delivery-price.float-right { font-weight: bold; text-transform: uppercase; color: #212529;font-size: 0.85rem;}
.text-success { color: #212529 !important;}
.blockcart {
display: inline-block; font-weight:bold;
}
.user-info { font-weight: bold; }
#checkout #header a:hover { color: #212529; }
#main-add-to-cart,
#main-add-to-cart:hover,
#main-add-to-cart:active {
cursor: pointer !important;
}
.shake-cart {
animation: cartshake 0.6s ease;
}
@keyframes cartshake {
0% { transform: translateX(0); }
25% { transform: translateX(-4px); }
50% { transform: translateX(4px); }
75% { transform: translateX(-2px); }
100% { transform: translateX(0); }
}
.cart-highlighted {
color: #bd9d6c !important;
transition: color 0.3s ease;
}
#main-add-to-cart:focus {
outline: none !important;
box-shadow: none !important;
}
.remove-from-checkout {
color: #bd2f2f;
font-size: 14px;
text-decoration: none;
margin-top: 5px;
display: inline-block;
}
.remove-from-checkout:hover {
color: #a00;
text-decoration: underline;
}
.fade-out {
opacity: 0;
transition: opacity 0.4s ease;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden;
}
#checkout .cart-grid-body.col-xs-12.col-lg-8, #checkout .cart-grid-right.col-xs-12.col-lg-4 { width: 100%; padding-left:4%; padding-right:4%; }
#checkout h1 { padding-left: 5%; padding-right:5%; margin-bottom:0%;}
.cart-summary-products-premium .product-row {
display: none !important;}
@media (min-width: 1200px) { #checkout #wrapper .container { width: 1140px; }}
.cart-summary-products-premium {
position: relative;
width: 100%;
/* Pas de margin-bottom ici si tu veux un layout collĂ©âŻ! */
transition: none !important;
margin-bottom: 0 !important;
}
.cart-summary-products-premium .premium-block-loader,
.cart-summary-products-premium .empty-cart-premium {
position: absolute;
left: 0; top: 0; width: 100%; height: 100%;
display: flex;
align-items: center; justify-content: center;
z-index: 22;
background: rgba(255,255,255,0.93);
}
.cart-summary-products-premium .empty-cart-premium {
z-index: 21; /* pour ĂȘtre sous le loader si les deux sont lĂ */
}
body#checkout section.checkout-step.-current .step-title
{ margin-top: 1%;}
.cart-overview.cart-scrollable {
max-height: 400px; /* Ajuste la hauteur visible du bloc */
overflow-y: auto; /* Active le scroll vertical si besoin */
background: #fff; /* Fond blanc ou adapte Ă ton thĂšme */
border-radius: 14px; /* Coins arrondis premium */
box-shadow: 0 2px 14px #0001; /* Ombre légÚre */
padding: 0 0 0 0; /* Ajuste si tu veux des marges intérieures */
scrollbar-width: thin; /* Scroll fin (Firefox) */
scrollbar-color: #bd9d6c #f8f8f8; /* Scroll couleur premium (Firefox) */
}
/* Scrollbar stylé Chrome/Edge/Safari */
.cart-overview.cart-scrollable::-webkit-scrollbar {
width: 8px;
background: #f8f8f8;
}
.cart-overview.cart-scrollable::-webkit-scrollbar-thumb {
background: #bd9d6c;
border-radius: 5px;
}
.cart-item { margin-top: 29px;}
/* ---- Corrections alignements checkout produit premium ---- */
/* Structure générale : répartition des blocs */
.cart-summary-products-premium .cart-item {
align-items: center; /* change: center, plus flex-start */
gap: 20px;
padding: 24px 34px 16px 22px;
min-height: 92px;
background: #fff;
}
/* Bloc image */
.cart-summary-products-premium .cart-item .product-line-grid-left {
flex: 0 0 72px;
display: flex;
align-items: center;
justify-content: center;
padding-right: 0;
}
/* Bloc centre : titre + attributs */
.cart-summary-products-premium .cart-item .product-line-grid-body {
flex: 1 1 0;
padding-left: 10px;
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
}
/* Ligne centre : nom et prix unitaire */
.cart-summary-products-premium .cart-item .label, .cart-summary-products-premium .cart-item a.label:hover {
font-size: 1.09em;
font-weight: 600;
color: #212121;
margin-bottom: 6px;
white-space: normal;
line-height: 1.3;
}
.cart-summary-products-premium .cart-item .product-line-info.product-price {
font-size: 1.13em;
font-weight: 500;
color: #383838;
margin: 4px 0 0 0;
letter-spacing: .01em;
}
/* Bloc actions (quantité, poubelle, prix) bien aligné */
.cart-summary-products-premium .cart-item .product-line-actions {
flex: 0 0 335px; /* Largeur suffisante pour qty, poubelle, prix */
display: flex;
flex-direction: row;
align-items: center; /* IMPORTANT : tout centré verticalement */
justify-content: flex-end;
gap: 20px;
padding-left: 0;
min-width: 320px;
}
/* Quantité + boutons verticaux + poubelle */
.cart-summary-products-premium .cart-item .qty {
min-width: 106px;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 8px;
margin-right: 0;
height: 54px;
}
/* Touchspin natif aligné avec la corbeille */
.cart-summary-products-premium .cart-item .bootstrap-touchspin {
display: flex !important;
align-items: center;
flex-direction: row;
gap: 0;
background: none;
box-shadow: none;
border: none;
}
.cart-summary-products-premium .cart-item .bootstrap-touchspin input[type="number"] {
width: 48px !important;
min-width: 46px;
text-align: center;
border-radius: 8px;
border: 1px solid #ccc;
font-size: 1.11em;
font-weight: 500;
padding: 2px 5px;
background: #fff;
margin: 0 2px;
height: 38px;
}
.cart-summary-products-premium .cart-item .bootstrap-touchspin .input-group-btn-vertical {
display: flex;
flex-direction: column;
margin-left: 3px;
gap: 1px;
}
.cart-summary-products-premium .cart-item .bootstrap-touchspin .btn-touchspin {
border: 1px solid #bd9d6c;
background: #fff;
color: #bd9d6c;
border-radius: 6px;
width: 30px;
height: 22px;
font-size: 1.08em;
display: flex;
align-items: center;
justify-content: center;
margin: 0 0 2px 0;
padding: 0;
transition: background .18s, color .18s;
}
.cart-summary-products-premium .cart-item .bootstrap-touchspin .btn-touchspin:last-child {
margin-bottom: 0;
}
.cart-summary-products-premium .cart-item .bootstrap-touchspin .btn-touchspin:hover {
background: #bd9d6c;
color: #fff;
}
/* Poubelle bien alignée au centre du input qty */
.cart-summary-products-premium .cart-item .remove-from-cart {
border: 1.5px solid #e53935;
color: #e53935;
background: #fff;
width: 38px;
height: 38px;
border-radius: 7px;
margin-left: 0;
margin-top: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background .15s, border-color .15s;
font-size: 1.19em;
}
/* Prix total bien alignĂ© Ă droite avec un peu dâair */
.cart-summary-products-premium .cart-item .price {
min-width: 120px;
text-align: right;
font-weight: 600;
font-size: 1em;
color: #1f2323;
display: flex;
align-items: center;
margin-right: 12px;
margin-left: 12px;
}
/* Infos couleur en bas, espace */
.cart-summary-products-premium .cart-item .couleur {
font-size: 1em;
margin: 9px 0 0 0;
}
.cart-summary-products-premium .cart-item .couleur .label {
font-weight: 600;
color: #222;
}
/* Responsive : mobile */
@media (max-width: 991px) {
.cart-summary-products-premium .cart-item {
flex-direction: column;
align-items: stretch;
gap: 10px;
padding: 18px 8px 10px 8px;
}
.cart-summary-products-premium .cart-item .product-line-actions {
flex: unset;
min-width: unset;
padding-left: 0;
margin-top: 8px;
justify-content: flex-start;
gap: 12px;
}
.cart-summary-products-premium .cart-item .price {
margin-left: 0;
margin-right: 0;
min-width: 84px;
}
}
/* Plus serré sur trÚs petit écran */
@media (max-width: 576px) {
.cart-summary-products-premium .cart-overview.cart-scrollable {
max-height: 140px;
border-radius: 11px;
}
.cart-summary-products-premium .cart-item {
padding: 12px 5px 10px 5px;
gap: 6px;
}
}
.product-line-info {margin-right:12px; margin-left:12px; margin-top:4%;}
.product-line-grid-left img {border-radius:5px;}
.product-line-grid-right.product-line-actions.col-md-5.col-xs-12 .row {display:flex; align-items:center;}
.col-md-2.col-xs-2.text-xs-right {margin-top:3%;}
.livraison-soustitre {
font-weight: normal !important;
font-size: 0.97em; /* légÚrement plus petit si tu veux */
display: inline;
}
.col-md-6.col-xs-2.price {display:block; text-align:center;}
.cart-summary-products-premium .product-price {text-align: center !important; margin-left: 0px !important;}
#checkout #content { display:block !important;}
#checkout input[name="email"], #checkout .form-control { border: 1px solid rgba(0,0,0,.1) !important;}
.form-group label {font-weight: 400; font-size:0.9rem;}
.onepage-checkout-container h2 { margin-top: 3% !important; margin-bottom: 3% !important;}
.onepage-checkout-container { padding: 10px 24px !important;}
#checkout .form-row {gap: 10%; padding-right: 5%;}
.payment-conditions .form-check { margin-bottom: 2.5% !important; font-size: 0.85rem; color: #232323; font-family: Manrope,sans-serif; font-weight:500;}
.payment-conditions a { text-decoration: underline;}
#checkout .form-group-1 {padding-top: 2%; }
.form-group-1 label[for="same_address"] { font-size: 0.85rem;}
#checkout input[name="email"], #checkout .form-control {
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.08); /* Ombre douce et visible */
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#checkout input[name="email"]:focus, #checkout .form-control:focus {
box-shadow: 0 4px 10px rgba(0,0,0,0.12);
outline: none;
}
/* Supprime lâhabillage de focus/active par dĂ©faut */
.btn-checkout:focus,
.btn-checkout:active {
outline: none;
box-shadow: none !important; /* utile si Bootstrap ajoute un shadow */
}
/* Option accessible : ne montrer un focus propre quâau clavier */
.btn-checkout:focus-visible {
outline: 2px solid #bd9d6c;
outline-offset: 2px;
box-shadow: none !important;
}
/* Mobile (Android) : retire le flash noir/bleu */
.btn-checkout {
-webkit-tap-highlight-color: transparent;
}
#bloc-seo-home li {font-size: .875rem; color: #4A4F55; font-weight: 400;}
#custom-text h3 {font-size: .950rem;}
#custom-text h2 {margin-bottom: 4%; margin-top: 2%; line-height: 1.45em;}
#custom-text .mb-3 {margin-bottom: 0% !important;}
#index h2 {line-height: 1.5em;}
/* ===== Bloc texte + image de la home : 50/50 full-width ===== */
/* 1) Le container de ce bloc doit occuper toute la largeur possible */
.custom-home-text.container {
max-width: 100%;
width: 100%;
padding-left: 0;
padding-right: 0;
}
/* 2) Faire de la row un flex pour aligner hauteur des colonnes */
.custom-home-text .row.align-items-center {
display: flex;
flex-wrap: wrap;
align-items: stretch; /* mĂȘme hauteur */
margin-left: 0;
margin-right: 0;
}
/* 3) Enlever marges/paddings hérités sur les colonnes */
.custom-home-text .col-12.col-md-6.custom-home-text-left,
.custom-home-text .col-12.col-md-6.custom-home-text-right {
padding-left: 0 !important;
padding-right: 0 !important;
margin: 0 !important; }
/* 4) Colonne texte : fond gris, centré vertical, padding interne propre */
.custom-home-text .col-12.col-md-6.custom-home-text-left {
display: flex;
flex-direction: column;
justify-content: center;
background-color: #F3F4F6;
}
.custom-home-text .col-12.col-md-6.custom-home-text-left > * {
padding: 40px;
}
/* === Bloc texte + image : hauteurs identiques === */
@media (min-width: 768px) {
/* la row aligne déjà les colonnes en hauteur avec align-items:stretch */
.custom-home-text .col-12.col-md-6.custom-home-text-right {
display: flex;
}
.custom-home-text .col-12.col-md-6.custom-home-text-right > .custom-home-text-img {
flex: 1 1 auto;
width: 100%;
height: 100%; /* l'image prend toute la hauteur de la colonne */
object-fit: cover; /* ou 'contain' si tu ne veux pas de recadrage */
}
}
/* Sur mobile on garde lâempilement naturel texte puis image */
@media (max-width: 767.98px) {
.custom-home-text .row.align-items-center {
display: block;
}
.custom-home-text-img {
width: 100%;
height: auto;
object-fit: contain;
}
}
/* 6) Sur mobile : empilement classique texte puis image */
@media (max-width: 767.98px) {
.custom-home-text .row.align-items-center {
display: block;
}
.custom-home-text .col-12.col-md-6.custom-home-text-left > * {
padding: 20px;
}
.custom-home-text-img {
height: auto; /* laisser lâimage garder sa hauteur naturelle */
}
}
.custom-home-text.container p { margin-bottom: 0;}
.custom-home-text .col-12.col-md-6.custom-home-text-left li { font-size:0.875rem;}
.custom-home-text .col-12.col-md-6.custom-home-text-left > * {padding-top: 20px; padding-bottom: 10px;}
#index #content-wrapper .mt-3 { margin-bottom: 0.1rem;}
.featured-products .products-section-title { margin-bottom: 1.25rem; text-align:left !importanyt; margin-top: 2rem;}
.featured-products .products { justify-content: space-between;}
@media (min-width: 1200px) { .products .col-xl-3 { width: 32.5%; }}
#index h2 { text-align: left !important;}
.custom-home-text.container p { padding-top: 0px; padding-bottom: 0px;}
#index h1 { font-size: 1.125rem; margin-bottom:1rem;}
/* Bloc global */
.home-reviews {
max-width: 1160px;
margin: 4.5rem auto;
padding: 3.25rem 3rem;
background: #f7f8fb;
border-radius: 20px;
border: 1px solid #e1e3ec;
box-shadow: 0 22px 55px rgba(14, 18, 38, 0.08);
color: #20232b;
}
/* En-tĂȘte */
.home-reviews-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 2.5rem;
margin-bottom: 2.4rem;
}
.home-reviews-titleblock h2 {
margin: 0 0 0.4rem;
font-size: 1.7rem;
font-weight: 600;
letter-spacing: 0.03em;
}
.home-reviews-titleblock p {
margin: 0;
font-size: 0.98rem;
color: #6e7380;
}
/* Bloc note / recommandation */
.home-reviews-stats {
display: flex;
align-items: center;
gap: 1.4rem;
}
.home-reviews-score {
position: relative;
width: 82px;
height: 82px;
border-radius: 999px;
background: radial-gradient(circle at 30% 20%, #ffffff 0, #f0ece4 45%, #e1d2bc 100%);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 14px 35px rgba(118, 98, 69, 0.35);
}
.home-reviews-score-value {
font-size: 2rem;
font-weight: 600;
color: #2b2620;
}
.home-reviews-score-total {
font-size: 1rem;
font-weight: 500;
color: #6f6457;
align-self: flex-end;
margin-left: 2px;
margin-bottom: 8px;
}
.home-reviews-score-meta {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.home-reviews-stars {
font-size: 1rem;
letter-spacing: 0.12em;
color: #c19a5b; /* doré discret */
}
.home-reviews-meta-line {
font-size: 0.9rem;
color: #565b67;
}
/* Bandeau chiffres clés */
.home-reviews-kpis {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.5rem;
margin-bottom: 2.1rem;
padding: 1.2rem 1.5rem;
background: #ffffff;
border-radius: 16px;
border: 1px solid #e5e6ee;
}
.home-reviews-kpi {
border-right: 1px solid #ececf3;
padding-right: 1.5rem;
}
.home-reviews-kpi:last-child {
border-right: none;
padding-right: 0;
}
.home-reviews-kpi-label {
display: block;
font-size: 0.78rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #8c909c;
margin-bottom: 0.25rem;
}
.home-reviews-kpi-value {
display: block;
font-size: 1.25rem;
font-weight: 600;
color: #2f313a;
margin-bottom: 0.1rem;
}
.home-reviews-kpi-caption {
display: block;
font-size: 0.86rem;
color: #6f7480;
}
/* Sous-titre "avis récents" */
.home-reviews-subtitle {
margin-bottom: 1.4rem;
}
.home-reviews-subtitle span {
font-size: 0.82rem;
text-transform: uppercase;
letter-spacing: 0.18em;
color: #9a9fad;
}
/* Grille des avis (cartes) */
.home-reviews-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.75rem;
}
/* Carte dâavis */
.home-review {
position: relative;
background: #ffffff;
border-radius: 14px;
border: 1px solid #e6e7ed;
padding: 1.9rem 1.7rem;
box-shadow: 0 14px 36px rgba(15, 18, 32, 0.05);
overflow: hidden;
transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, border-color 0.2s ease-out;
}
.home-review::before {
content: "â";
position: absolute;
top: -32px;
left: 14px;
font-size: 84px;
line-height: 1;
opacity: 0.04;
font-family: "Georgia", serif;
}
.home-review:hover {
transform: translateY(-4px);
box-shadow: 0 20px 46px rgba(15, 18, 32, 0.09);
border-color: #d9c6a5;
}
/* Haut de carte */
.home-review-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.1rem;
}
.home-review-stars {
font-size: 0.95rem;
letter-spacing: 0.08em;
color: #c19a5b;
}
.home-review-gamme {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.16em;
color: #8a8e9a;
}
/* Texte & footer */
.home-review-text {
margin: 0 0 1.4rem;
font-size: 0.98rem;
line-height: 1.7;
color: #3c3f48;
}
.home-review-footer {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 0.75rem;
}
.home-review-name {
margin: 0;
font-size: 0.9rem;
font-weight: 500;
color: #565b67;
}
.home-review-date {
margin: 0;
font-size: 0.8rem;
color: #9a9fad;
}
/* Footer global */
.home-reviews-footer {
margin-top: 2.4rem;
font-size: 0.9rem;
color: #7a7e88;
text-align: right;
}
/* Responsive */
@media (max-width: 1024px) {
.home-reviews-header {
flex-direction: column;
align-items: flex-start;
}
.home-reviews-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.home-reviews-kpis {
grid-template-columns: 1fr;
}
.home-reviews-kpi {
border-right: none;
padding-right: 0;
border-bottom: 1px solid #ececf3;
padding-bottom: 1rem;
}
.home-reviews-kpi:last-child {
border-bottom: none;
padding-bottom: 0;
}
}
@media (max-width: 768px) {
.home-reviews {
padding: 2.6rem 1.6rem;
margin: 3rem 1rem;
}
.home-reviews-grid {
grid-template-columns: 1fr;
}
.home-reviews-footer {
text-align: left;
}
}
/* Bloc réassurance home */
.home-reassurance {
padding: 3.5rem 0 3rem;
background: #f7f7f9;
}
.home-reassurance-header {
max-width: 720px;
margin: 0 auto 2.2rem;
text-align: center;
}
.home-reassurance-header h2 {
margin: 0 0 0.6rem;
font-size: 1.6rem;
font-weight: 600;
letter-spacing: 0.03em;
color: #20232b;
}
.home-reassurance-header p {
margin: 0;
font-size: 0.98rem;
color: #6e7380;
}
/* Desktop : 5 blocs sur une seule ligne */
.home-reassurance-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 1.5rem;
}
/* Carte engagement */
.home-reassurance-item {
background: #ffffff;
border-radius: 16px;
border: 1px solid #e3e4ec;
padding: 5%;
box-shadow: 0 12px 30px rgba(17, 17, 26, 0.04);
position: relative;
overflow: hidden;
transition: transform 0.18s ease-out, box-shadow 0.18s ease-out, border-color 0.18s ease-out;
}
.home-reassurance-item::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 0 0, rgba(217, 198, 165, 0.16), transparent 55%);
opacity: 0;
transition: opacity 0.18s ease-out;
}
.home-reassurance-item:hover {
transform: translateY(-3px);
box-shadow: 0 18px 40px rgba(17, 17, 26, 0.08);
border-color: #d9c6a5;
}
.home-reassurance-item:hover::before {
opacity: 1;
}
.home-reassurance-item h3 {
position: relative;
margin: 0 0 0.6rem;
font-size: 1rem;
font-weight: 600;
color: #262933;
}
.home-reassurance-item h3::before {
content: "";
position: absolute;
left: 0;
bottom: -0.45rem;
width: 34px;
height: 2px;
border-radius: 999px;
background: linear-gradient(90deg, #c19a5b, transparent);
}
.home-reassurance-item p {
position: relative;
margin: 1.1rem 0 0;
font-size: 0.95rem;
line-height: 1.6;
color: #5b606b;
}
/* Responsive tablettes */
@media (max-width: 991.98px) {
.home-reassurance {
padding: 3rem 0 2.6rem;
}
.home-reassurance-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Responsive mobiles */
@media (max-width: 575.98px) {
.home-reassurance {
padding: 2.6rem 0 2.3rem;
}
.home-reassurance-header h2 {
font-size: 1.4rem;
}
.home-reassurance-grid {
grid-template-columns: 1fr;
}
.home-reassurance-item {
padding: 1.4rem 1.25rem 1.3rem;
}
}
/* Variante "manifeste" de la grille */
.home-reassurance-grid-manifest {
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 1.5rem;
}
/* Badge numéroté */
.home-reassurance-item {
position: relative;
padding-top: 2.3rem; /* on libÚre de la place pour le numéro */
}
.home-reassurance-index {
position: absolute;
top: 1.1rem;
left: 1.5rem;
font-size: 0.8rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #b0a594;
}
.home-reassurance-item h3 {
margin-top: 0.6rem;
}
/* Responsive : on garde la logique mais on casse correctement */
@media (max-width: 1199.98px) {
.home-reassurance-grid-manifest {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 767.98px) {
.home-reassurance-grid-manifest {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 575.98px) {
.home-reassurance-grid-manifest {
grid-template-columns: 1fr;
}
}
/* ===== Bloc avis boutique ===== */
.cs-reviews {
max-width: 1160px;
margin: 4rem auto;
padding: 2.8rem 2.6rem;
background: #f7f8fb;
border-radius: 22px;
border: 1px solid #e1e3ec;
box-shadow: 0 20px 55px rgba(14, 18, 38, 0.08);
color: #20232b;
}
.cs-reviews__header {
margin: 0 0 2rem;
}
.cs-reviews__header h2 {
margin: 0 0 0.35rem;
font-size: 1.6rem;
font-weight: 600;
letter-spacing: 0.03em;
}
.cs-reviews__header p {
margin: 0;
font-size: 0.96rem;
color: #6e7380;
}
/* Ligne du haut */
.cs-reviews__top {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
gap: 2rem;
margin-bottom: 2.1rem;
}
/* Carte résumé */
.cs-reviews__summary {
background: #ffffff;
border-radius: 16px;
border: 1px solid #E5E7EB;
padding: 4%;
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}
.cs-reviews__label, .cs-reviews__bottom-header{
font-size: 0.95rem !important;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #9a9fad !important;
font-weight: 500 !important;
}
.cs-reviews__score-row {
display: flex;
align-items: baseline;
gap: 1rem;
margin-bottom: 2%; margin-top: 9.5%;
}
.cs-reviews__score-main {
display: flex;
align-items: center;
margin-bottom: 12%;
}
.cs-reviews__score {
font-size: 2.25rem;
font-weight: 600;
color: #2b2620;
}
.cs-reviews__score-total {
font-size: 1rem;
font-weight: 500;
color: #6f6457;
margin-left: 3%; margin-right:3%;
}
.cs-reviews__score-stars {
font-size: 2rem;
letter-spacing: 0.12em;
color: #f4b400;
}
.cs-reviews__reco {
margin: 0 0 0.15rem;
font-size: 0.95rem;
color: #3d414c;
}
.cs-reviews__count { font-style:italic;
margin: 0 0 0.9rem;
font-size: 0.9rem;
color: #7a7f8b;
}
.cs-reviews__footnote {font-style:italic;
margin: 0;
font-size: 0.8rem;
color: #9a9fad;
}
/* Carte critĂšres */
.cs-reviews__criteria {
background: #ffffff;
border-radius: 18px;
border: 1px solid #e3e4ec;
padding: 1.7rem 1.7rem 1.4rem;
box-shadow: 0 12px 32px rgba(15, 18, 32, 0.06);
position: relative;
overflow: hidden;
}
.cs-reviews__criteria::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 0 0, rgba(193, 154, 91, 0.14), transparent 55%);
opacity: 0.9;
pointer-events: none;
}
.cs-reviews__criteria h3 {
position: relative;
margin: 0 0 0.9rem;
font-size: 1.04rem;
font-weight: 600;
color: #262933;
}
.cs-reviews__criteria-list {
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
.cs-reviews__criteria-list li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 0;
border-bottom: 1px solid #f0f1f5;
}
.cs-reviews__criteria-list li:last-child {
border-bottom: none;
}
.cs-reviews__crit-left {
display: flex;
flex-direction: column;
gap: 0.12rem;
}
.cs-reviews__crit-label {
font-size: 0.9rem;
color: #2f333e;
position: relative;
padding-left: 14px;
}
.cs-reviews__crit-label::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 7px;
height: 7px;
border-radius: 999px;
background: linear-gradient(135deg, #c19a5b, #e3d2af);
}
.cs-reviews__crit-stars {
font-size: 0.86rem;
letter-spacing: 0.08em;
color: #c19a5b;
}
.cs-reviews__crit-score {
font-size: 0.86rem;
font-weight: 500;
color: #5a4a32;
padding: 0.25rem 0.6rem;
border-radius: 999px;
background: #f4ede0;
border: 1px solid #e0d3bf;
}
/* Ligne du bas : slider */
.cs-reviews__bottom {
margin-top: 0.4rem;
}
.cs-reviews__bottom-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2%;
}
.cs-reviews__bottom-header h3 {
margin: 0;
font-size: 1rem;
font-weight: 500;
color: #9a9fad;
margin-top: 0% !important;
}
/* FlĂšches slider */
.cs-reviews__slider-controls {
display: flex;
gap: 0.4rem;
}
.cs-reviews__arrow {
width: 28px;
height: 28px;
border-radius: 999px;
border: 1px solid #d2d6e0;
background: #ffffff;
font-size: 1.1rem;
line-height: 1;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
color: #4b4f59;
transition: background-color 0.15s ease-out, border-color 0.15s ease-out, transform 0.1s ease-out;
}
.cs-reviews__arrow:hover {
background: #f3f4f8;
border-color: #c0c4d0;
transform: translateY(-1px);
}
/* Slider VERTICAL (colonne de droite) */
.cs-reviews__slider {
display: flex;
flex-direction: column;
gap: 0.45rem;
max-height: 340px; /* hauteur visible sur desktop, ajuste à ton goût */
overflow-y: auto;
padding-right: 1rem;
scroll-behavior: smooth;
}
/* Scrollbar discrĂšte verticale */
.cs-reviews__slider::-webkit-scrollbar {
width: 6px;
}
.cs-reviews__slider::-webkit-scrollbar-track {
background: transparent;
}
.cs-reviews__slider::-webkit-scrollbar-thumb {
background: #d4d7e2;
border-radius: 999px;
}
.cs-reviews__slider::-webkit-scrollbar-track {
background: transparent;
}
.cs-reviews__slider::-webkit-scrollbar-thumb {
background: #d4d7e2;
border-radius: 999px;
}
/* Cartes d'avis dans le slider vertical */
.cs-reviews__card {
background: #ffffff;
border-radius: 14px;
border: 1px solid #eceef5;
padding: 1rem 1rem 0.9rem;
box-shadow: 0 10px 24px rgba(15, 18, 32, 0.05);
font-size: 0.87rem;
color: #3f4350;
flex: 0 0 auto; /* plus de largeur fixe, le slider gĂšre la hauteur */
max-width: 100%;
}
.cs-reviews__card-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.4rem;
border-top: 1px solid #cecece;
padding-top: 2%;
}
.cs-reviews__card-stars {
font-size: 1.2rem;
letter-spacing: 0.09em;
color: #00b67a;
}
.cs-reviews__card-tag {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.16em;
color: #6f7480;
}
.cs-reviews__card-title {
margin: 0 0 0.25rem;
font-size: 0.92rem;
font-weight: 600;
color: #252733;
}
.cs-reviews__card-text {
margin: 0 0 0.35rem;
line-height: 1.55;
}
.cs-reviews__card-meta {
margin: 0;
font-size: 0.76rem;
color: #7b808c;
}
/* Responsive */
@media (max-width: 991.98px) {
.cs-reviews {
padding: 2.4rem 1.8rem;
}
.cs-reviews__top {
grid-template-columns: 1fr;
}
}
@media (max-width: 575.98px) {
.cs-reviews {
padding: 2.2rem 1.2rem;
margin: 3rem 0.5rem;
}
.cs-reviews__card {
flex: 0 0 82%;
max-width: 82%;
}
}
.cs-reviews__card-top {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.35rem;
}
.cs-reviews__card-date {
font-size: 0.78rem;
color: #9a9fad;
}
.cs-reviews__card-title {
margin: 0 0 0.25rem;
font-size: 0.9rem;
font-weight: 600;
color: #252733;
}
.cs-reviews__card-text {
margin: 0 0 0.3rem;
line-height: 1.55;
}
.cs-reviews__card-meta {
margin: 0;
font-size: 0.8rem;
font-weight: 500;
color: #5f6470;
}
/* Responsive : on garde juste un peu d'air */
@media (max-width: 575.98px) {
.cs-reviews__card {
padding: 0.9rem 0.9rem 0.8rem;
}
}
#index .container, #index .container-fluid {
margin-left: 0 ;
margin-right: 0 ;
}
@media (max-width: 767px) { .block_newsletter #block-newsletter-label { width: 100%;} .custom-home-text .col-12.col-md-6.custom-home-text-left {
padding-bottom: 5%;} }
@media (max-width: 767px) { #categorie-accueil .row { margin-top: 5%; }}
#header .header-top { padding-top: 0rem;}
@media (max-width: 767px) { #header .top-logo img { margin-top: 0%; padding-top: 0%; margin-left: 0;} }
@media (min-width: 768px) and (max-width: 1199px) {
#index #categorie-accueil {
padding: 0px;
padding-left:0%;
}}
@media (max-width: 767px) {
#index #categorie-accueil {
padding: 0px;
padding-left:0%;}}
#custom-text.container. my-4.text-center {padding: 0;}
@media (max-width: 1199px) {
.featured-products.clearfix.mt-3 {
display: contents !important;
}
}
@media (max-width: 1199px) {
#custom-text {
margin-right:0% !important;
margin-bottom:0px !important;
margin-left: 0% !important;}
#custom-text-1 .container,#custom-text-1 .container-fluid {
padding-left: 0% !important;
padding-right: 0% !important;}}
@media (max-width: 767px) {#custom-text {
margin-top: 0px !important;
} .banner {
margin-bottom:3% !important;
margin-left: 0% !important;
width: 100%;} }
@media (max-width: 767px) { .featured-products .products-section-title { font-weight:700; font-size:1.125rem;margin-top:0%; padding:20px; color: #4a4f55; margin-bottom:0px; padding-top: 0%;} }
/* === FIX BLOC BESTSELLERS : 2 COLONNES, PLUS DE SLIDER GLOBAL === */
/* On neutralise le wrapper de l'ancien slider */
#index .featured-products .bestsellers-slider-wrapper {
display: block !important;
width: 100% !important;
}
/* On transforme l'ancien slider horizontal en simple grille fluide */
#index .featured-products .bestsellers-slider {
display: flex !important;
flex-wrap: wrap !important; /* plusieurs lignes */
justify-content: center !important; /* produits centrés */
gap: 2rem !important; /* espace entre cartes */
overflow-x: visible !important; /* plus de scroll horizontal */
padding: 0 !important;
}
/* 2 produits par ligne sur la home */
#index .featured-products .bestsellers-slide {
flex: 0 0 calc(50% - 2rem) !important;
max-width: calc(50% - 2rem) !important;
}
/* Sur mobile : 1 produit par ligne pour la lisibilité */
@media (max-width: 767.98px) {
#index .featured-products .bestsellers-slide {
flex: 0 0 100% !important;
max-width: 100% !important;
}
}
/* On masque définitivement les flÚches de l'ancien slider */
#index .featured-products .bestsellers-arrow,
#index .featured-products .bestsellers-arrow-prev,
#index .featured-products .bestsellers-arrow-next {
display: none !important;
}
/* === FIX DĂFINITIF BLOC BESTSELLERS : 2 PRODUITS PAR LIGNE, PLUS DE SLIDER === */
/* On transforme le conteneur du slider en simple grille */
#index .featured-products .bestsellers-slider,
#index .featured-products #bestsellers-slider {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* 2 colonnes */
gap: 2rem !important; /* espace entre cartes */
overflow: visible !important; /* pas de scroll horizontal */
padding: 0 !important;
margin: 0 auto !important;
scroll-behavior: auto !important;
}
/* Chaque .bestsellers-slide devient juste un item normal de la grille */
#index .featured-products .bestsellers-slide {
flex: none !important;
width: auto !important;
max-width: 100% !important;
}
/* Sur mobile : 1 produit par ligne pour rester lisible */
@media (max-width: 767.98px) {
#index .featured-products .bestsellers-slider,
#index .featured-products #bestsellers-slider {
grid-template-columns: 1fr !important;
}
}
/* On masque définitivement les flÚches de l'ancien slider */
#index .featured-products .bestsellers-arrow,
#index .featured-products .bestsellers-arrow-prev,
#index .featured-products .bestsellers-arrow-next {
display: none !important;
}
/* ==== IMAGES VIGNETTES PRODUITS ==== */
/* Le cadre de l'image */
.product-miniature .thumbnail-top {
position: relative;
width: 100%;
overflow: hidden;
}
/* Le lien autour de l'image */
.product-miniature .product-thumbnail {
display: block;
}
/* L'image elle-mĂȘme : plus de position:absolute */
.product-miniature .thumbnail-top img {
position: static;
display: block;
width: 100%;
height: auto;
max-width: 100%;
object-fit: cover;
object-position: center center;
aspect-ratio: 3 / 2;
vertical-align: middle;
}
.featured-products.clearfix.mt-3 {width:100%; margin-bottom:5%; padding-left:15px; padding-right:15px;}
.product-miniature.js-product-miniature, .thumbnail-container {width:100%; margin-bottom:5%;}
/* --- FlĂšches de navigation sur le slider produit --- */
.js-product-image-slider {
position: relative;
width: 100%;
overflow: hidden;
}
/* Boutons flĂšches */
.js-product-image-slider .product-image-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 28px;
height: 28px;
border-radius: 50%;
border: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.32);
color: #fff;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
z-index: 2;
}
/* Apparition au survol uniquement (sur desktop) */
.js-product-image-slider:hover .product-image-arrow {
opacity: 1;
visibility: visible;
transform: translateY(-50%);
}
/* Positions gauche / droite */
.js-product-image-slider .product-image-arrow--prev {
left: 6px;
}
.js-product-image-slider .product-image-arrow--next {
right: 6px;
}
/* Dessin des chevrons */
.js-product-image-slider .product-image-arrow::before {
content: '';
border-style: solid;
border-width: 0 2px 2px 0;
display: inline-block;
padding: 4px;
}
.js-product-image-slider .product-image-arrow--prev::before {
transform: rotate(135deg); /* flĂšche vers la gauche */
}
.js-product-image-slider .product-image-arrow--next::before {
transform: rotate(-45deg); /* flĂšche vers la droite */
}
/* ==== SLIDER PRODUIT : fondu + dots sur l'image + flĂšches ==== */
/* On s'assure que le cadre image est positionné */
.product-miniature .thumbnail-top {
position: relative;
overflow: hidden;
}
/* Conteneur du slider dans la carte produit */
.js-product-image-slider {
width: 100%;
}
/* Quand le JS a initialisé le slider */
.js-product-image-slider.is-slider-ready {
position: relative;
width: 100%;
aspect-ratio: 3 / 2;
overflow: hidden;
}
/* Slides empilées (fondu) */
.js-product-image-slider.is-slider-ready .product-image-slide {
position: absolute;
inset: 0;
opacity: 0;
pointer-events: none;
transition: opacity 0.6s ease;
}
/* Slide visible */
.js-product-image-slider.is-slider-ready .product-image-slide.is-active {
opacity: 1;
pointer-events: auto;
}
/* L'image prend tout le cadre */
.js-product-image-slider .product-image-slide img,
.js-product-image-slider img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Dots SUR l'image, discrets */
.js-product-image-slider .product-image-dots {
position: absolute;
left: 50%;
bottom: 6px;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 4px;
padding: 2px 6px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.25); /* plus léger qu'avant */
z-index: 5;
}
/* Petits points blancs, discrets */
.js-product-image-slider .product-image-dot {
width: 6px;
height: 6px;
border-radius: 50%;
border: 0;
padding: 0;
cursor: pointer;
background: rgba(255, 255, 255, 0.6);
box-shadow: none;
transform: none;
transition: background 0.15s ease, transform 0.15s ease;
}
.js-product-image-slider .product-image-dot.is-active,
.js-product-image-slider .product-image-dot:hover {
background: #ffffff;
transform: scale(1.15);
}
/* FlĂšches de navigation dans l'image */
.js-product-image-slider .product-image-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 26px;
height: 26px;
border-radius: 999px;
border: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.35);
color: #fff;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
z-index: 2;
}
.js-product-image-slider:hover .product-image-arrow,
.js-product-image-slider:focus-within .product-image-arrow {
opacity: 1;
visibility: visible;
}
.js-product-image-slider .product-image-arrow--prev {
left: 6px;
}
.js-product-image-slider .product-image-arrow--next {
right: 6px;
}
.js-product-image-slider .product-image-arrow::before {
content: '';
border-style: solid;
border-width: 0 2px 2px 0;
display: inline-block;
padding: 4px;
}
.js-product-image-slider .product-image-arrow--prev::before {
transform: rotate(135deg); /* flĂšche vers la gauche */
}
.js-product-image-slider .product-image-arrow--next::before {
transform: rotate(-45deg); /* flĂšche vers la droite */
}
/* Sur mobile : flĂšches un peu visibles mĂȘme sans hover */
@media (max-width: 767px) {
.js-product-image-slider .product-image-arrow {
opacity: 0.6;
visibility: visible;
}
}
/* Pas de contour noir au clic sur les flĂšches */
.js-product-image-slider .product-image-arrow {
outline: none;
}
.js-product-image-slider .product-image-arrow:focus {
outline: none;
}
/* === PATCH FINALE FLECHES SLIDER === */
/* Pas de contour/bordure au clic */
.js-product-image-slider .product-image-arrow {
outline: none;
border: 0;
}
/* MĂȘme si le navigateur met un focus, on ne montre pas la flĂšche juste pour ça */
.js-product-image-slider .product-image-arrow:focus {
outline: none;
}
/* RÚgle absolue : si la souris N'EST PAS sur l'image, flÚches cachées (desktop) */
@media (min-width: 768px) {
.js-product-image-slider:not(:hover) .product-image-arrow {
opacity: 0 !important;
visibility: hidden !important;
transform: translateY(-50%) translateY(2px) !important;
}
.js-product-image-slider:hover .product-image-arrow {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(-50%) !important;
}
}
/* === VISIBILITĂ DES FLĂCHES + TAP DISCRET === */
/* Par défaut : flÚches cachées */
.js-product-image-slider .product-image-arrow {
opacity: 0;
visibility: hidden;
outline: none;
border: 0;
-webkit-tap-highlight-color: transparent; /* pas de flash noir au tap */
}
/* Desktop : flĂšches visibles au survol */
@media (min-width: 768px) {
.js-product-image-slider:hover .product-image-arrow {
opacity: 1;
visibility: visible;
}
}
/* Mobile / tactile : flÚches visibles seulement quand le slider est "touché" */
.js-product-image-slider.is-touch-active .product-image-arrow {
opacity: 1;
visibility: visible;
}
/* Supprimer les flĂšches du slider sur les devices (mobile + tablette) */
@media (max-width: 991.98px) {
.js-product-image-slider .product-image-arrow {
display: none !important;
}
}
/* === SLIDER PRODUIT : coulissement au drag === */
/* Le conteneur */
.js-product-image-slider {
position: relative;
display: block;
width: 100%;
overflow: hidden;
aspect-ratio: 3 / 2;
}
/* Chaque .product-image-slide est une "slide" horizontale */
.js-product-image-slider .product-image-slide {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
transform: translateX(0);
transition: transform 0.3s ease;
pointer-events: none; /* on laisse le slider gérer les clics */
}
/* La slide active accepte les clics (si nécessaire) */
.js-product-image-slider .product-image-slide.is-active {
pointer-events: auto;
}
/* Dots existants : on les met sur l'image, de façon discrÚte */
.thumbnail-container .product-image-dots {
position: absolute;
left: 50%;
bottom: 6px;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 4px;
padding: 2px 6px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.25);
z-index: 5;
}
.thumbnail-container .product-image-dot {
width: 6px;
height: 6px;
border-radius: 50%;
border: 0;
padding: 0;
cursor: pointer;
background: rgba(255, 255, 255, 0.6);
transform: none;
transition: background 0.15s ease, transform 0.15s ease;
}
.thumbnail-container .product-image-dot.is-active,
.thumbnail-container .product-image-dot:hover {
background: #ffffff;
transform: scale(1.2);
}
/* Curseur propre pour le slider produit */
.js-product-image-slider {
cursor: grab;
}
.js-product-image-slider.is-dragging {
cursor: grabbing;
}
/* === Slider d'images sur chaque produit (coulissement au drag) === */
/* Cadre de l'image dans la vignette */
.product-miniature .thumbnail-top {
position: relative;
width: 100%;
overflow: hidden;
}
/* Lien / slider */
.js-product-image-slider {
position: relative;
display: block;
width: 100%;
overflow: hidden;
aspect-ratio: 3 / 2; /* adapte si besoin */
cursor: grab;
}
/* Curseur pendant le drag */
.js-product-image-slider.is-dragging {
cursor: grabbing;
}
/* Chaque slide est empilée, on gÚre tout avec transform */
.js-product-image-slider .product-image-slide {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
transform: translateX(0);
transition: transform 0.25s ease-out;
pointer-events: none;
}
.js-product-image-slider .product-image-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* La slide "courante" accepte les clics (si besoin) */
.js-product-image-slider .product-image-slide.is-active {
pointer-events: auto;
}
/* Dots overlay sur l'image */
.thumbnail-container .product-image-dots,
.product-miniature .thumbnail-top .product-image-dots {
position: absolute;
left: 50%;
bottom: 0.6rem;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 2px 6px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.25);
z-index: 5;
}
/* Style des petits points */
.product-miniature .thumbnail-top .product-image-dot {
width: 6px;
height: 6px;
border-radius: 50%;
border: 0;
padding: 0;
cursor: pointer;
background: rgba(255, 255, 255, 0.55);
transition: background 0.15s ease, transform 0.15s ease;
}
.product-miniature .thumbnail-top .product-image-dot.is-active,
.product-miniature .thumbnail-top .product-image-dot:hover {
background: #ffffff;
transform: scale(1.25);
}
/* On cache d'Ă©ventuels vieux blocs de dots sous la description */
.product-miniature .product-description + .product-image-dots,
.product-miniature .product-description ~ .product-image-dots {
display: none !important;
}
/* ==== FIX CENTRAGE CATEGORIES ACCUEIL TABLETTE ==== */
@media (min-width: 768px) and (max-width: 1199px) {
/* Conteneur global centré et symétrique */
#categorie-accueil {
margin: 20px auto;
padding: 15px 0; /* padding horizontal retiré pour éviter les décalages */
background-color: white !important;
border-radius: 5px;
box-sizing: border-box;
}
/* Titre : largeur auto, plus 94% */
#categorie-accueil h2 {
width: auto;
padding: 0 15px;
margin-bottom: 1.5rem !important;
}
/* Grille 3 colonnes bien centrée */
#categorie-accueil .row {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px 10px;
justify-content: center;
margin: 0 auto; /* supprime le décalage 20px gauche/droite */
}
#categorie-accueil .row > div {
max-width: none;
width: 100%;
text-align: center;
}
}
/* Boutons du slider avis : Ă©tat focus plus discret */
.cs-reviews__arrow {
outline: none !important; /* supprime le contour par défaut */
}
.cs-reviews__arrow:focus-visible {
outline: 2px solid #c19a5b !important; /* petit halo doré */
outline-offset: 2px;
}
.cs-reviews__latest { background-color: white; padding: 4%; border-radius: 16px; border: 1px solid #E5E7EB; box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);}
#custom-text .avis { padding-left:3%; padding-right:3%; }
#custom-text .avis h2 { margin-top:0%; margin-bottom:2%; }
#custom-text .avis h4 { margin-top:0% !important; }
/* Cartes : Note globale + Derniers avis */
.cs-reviews__criteria,
.cs-reviews__latest,. cs-reviews__summary{
background: linear-gradient(135deg, #FDFBF7 0%, #F3F2EE 100%);
border-radius: 20px;
border: 1px solid rgba(193, 154, 91, 0.16); /* liseré doré trÚs léger */
box-shadow: 0 18px 38px rgba(11, 15, 32, 0.08); /* ombre plus âluxeâ */
position: relative;
overflow: hidden;
}
/* Halo doré + rappel bleu/gris canapés convertibles */
.cs-reviews__criteria::before,
.cs-reviews__latest::before,. cs-reviews__summary::before{
content: "";
position: absolute;
inset: -1px;
background:
radial-gradient(circle at 0 0, rgba(193,154,91,0.22), transparent 55%),
radial-gradient(circle at 100% 100%, rgba(64,78,96,0.14), transparent 55%);
opacity: 0.95;
pointer-events: none;
}
/* Pour que le contenu reste net par-dessus le dégradé */
.cs-reviews__criteria > *,
.cs-reviews__latest > * ,. cs-reviews__summary> *{
position: relative;
}
@media (min-width: 992px) {
.cs-reviews__slider {
max-height: 250px; }}
#custom-text .container my-4 text-center {background: #0F172A !important;}
#custom-toxt { width:97%; border-radius: 24px; padding: 2.5%; background: #F3F4F6; padding-bottom: 1.5%; padding-top:1.5%; margin-top: 1%; margin-bottom: 2%;}
#custom-toxt .avis h2 { color: #333e48; padding-bottom:1%; }
@media (max-width: 991px) {#custom-toxt {
width: 100%;
border-radius: 0px;
padding: 3.5%;
padding-bottom: 1.5%;
padding-top: 10%;
margin-top: 0%;
margin-bottom: 0%;
margin-left: 0%; }}
/* ----- CONTENEUR GLOBAL ----- */
.new-products-header, .new-products--header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
margin-bottom: 1.5rem;
margin-top: 2rem;
}
@media (max-width: 768px) {.new-products-header
{
display: flex;
align-items: center;
justify-content: space-between;
gap: 0rem;
margin-bottom: 3rem;
margin-top: 2rem; padding-left:3px; padding-right:3px;
} .new-products-subtitle { text-align: justify;} }
@media (max-width: 768px) {.new-products--header
{margin-top: 0rem;} .new-products-header, .new-products--header {
gap: 0;
margin-bottom: 2.5rem;
} }
h2.new-products-title {font-weight: 500 !important; color: #333E48;}
/* ----- BOUTON ----- */
/* ----- CTA "Voir toutes les nouveautés" : cohérent avec le thÚme ----- */
.btn-cta {
text-decoration: none;
font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
font-weight: 500;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 0.55rem 1.8rem;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
border: 1.5px solid #bd9d6c; /* mĂȘme dorĂ© que tes autres CTA */
color: #bd9d6c;
background-color: transparent;
transition:
background-color .2s ease,
color .2s ease,
box-shadow .2s ease,
transform .15s ease;
}
/* Hover / focus souris */
.btn-cta:hover {
background-color: #bd9d6c;
color: #fff;
text-decoration: none;
box-shadow: 0 8px 22px rgba(0,0,0,0.12);
transform: translateY(-1px);
}
/* Active (clic en cours) */
.btn-cta:active {
transform: translateY(0);
box-shadow: 0 4px 12px rgba(0,0,0,0.10);
}
/* Focus clavier accessible */
.btn-cta:focus-visible {
outline: 2px solid #333E48;
outline-offset: 2px;
}
/* ----- GRILLE DES PRODUITS ----- */
.new-products-section .products {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)); /* desktop : 3 colonnes */
column-gap: 30px;
row-gap: 30px;
}
/* ----- RESPONSIVE ----- */
/* Tablette : 2 colonnes */
@media (max-width: 768px) {
.new-products-header, .new-products--header {
flex-direction: column;
align-items: flex-start;
}
.new-products-cta {
margin-top: 0.75rem; } .new-products--cta {
margin-top: 2.75rem; } .new-products-a-cta {
margin-top: 1.5rem; }
.new-products-section .products {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Mobile : 1 produit par ligne + CTA plein largeur */
@media (max-width: 768px) {
.new-products-cta{
margin-top: 0.75rem;width: 90%; margin-left: 5%;}
.new-products--cta {
margin-top: 2.75rem; } .new-products-a-cta {
margin-top: 1.5rem;width: 90%; }
.new-products-section .products {
grid-template-columns: 1fr;
}
#content .new-products-section {
padding-bottom: 8% !important;
} }
#content .new-products-section {
flex: 0 0 100%; /* occupe 100% de la ligne */
max-width: 100%; /* pas de limite */
padding-left: 15px; padding-right: 15px;
padding-bottom: 2%; padding-top: 0%;
}
.new-products-subtitle {
color: #666;}
/* Le conteneur des couleurs */
.variant-links {
display: flex;
align-items: center;
gap: 4px;
}
/* Les ronds de couleurs restent comme ils sont */
/* Le badge +8 */
.variant-links .count {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 0.5rem;
height: 22px;
border-radius: 999px; /* forme pilule */
background: #f3f3f3; /* fond clair (Ă ajuster) */
color: #555; /* texte gris */
font-size: 0.75rem;
font-weight: 500;
}
.product-flags li.product-flag {
background: #c2a57c; /* or couleur marque */
border-radius: 999px;
padding: 0.2rem 0.6rem;
font-size: 0.75rem !important;
font-weight: 500 !important; margin-left:0.35rem;
}
/* Zone texte sous lâimage */
.new-products-section .product-description {
padding: 0.25rem 1rem 0.5rem; border-bottom-left-radius: 10px; border-bottom-right-radius:10px;
}
.product-miniature .thumbnail-container {
border: 1px solid #F3F4F6; border-radius: 10px;}
/* Titre : propre, max 2 lignes */
.new-products-section .product-title a {
font-size: 0.95rem;
font-weight: 500;
color: #333E48;
text-decoration: none;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.4;
}
/* Prix mis en avant */
.new-products-section .product-price-and-shipping .price {
display: inline-block;
margin-top: 0rem;
font-size: 1rem;
font-weight: 600;
color: #000000;
}
/* === CARTE PRODUIT â BLOC NOUVELLE COLLECTION === */
/* Carte produit dans le bloc "nouvelle collection" */
.new-products-section .product-miniature, .product-miniature .thumbnail-container {
width: 100%;
margin: 0;
/* on annule la bordure globale */
border: none !important;
border-radius: 12px;
overflow: hidden;
background: #ffffff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}
/* Hover premium uniquement dans ce bloc â version sans mouvement */
@media (hover:hover) and (pointer:fine) {
.new-products-section .product-miniature:hover,
.new-products-section .product-miniature .thumbnail-container:hover {
transform: none !important; /* plus de déplacement vertical */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important; /* ombre "normale" */
}
}
/* Description sous l'image dans le bloc nouveautés */
.new-products-section .product-miniature .product-description, .product-miniature .thumbnail-container .product-description {
border-top: none !important;
}
/* Au cas oĂč un ::before/::after du thĂšme dessine une ligne */
.new-products-section .product-miniature .product-description::before,
.new-products-section .product-miniature .product-description::after, .product-miniature .thumbnail-container .product-description::before,
.product-miniature .thumbnail-container .product-description::after {
content: none !important;
}
.cta-button-new-products, .cta-button--new-products { margin-left: auto;
margin-right: auto;
text-align: center;
margin-top: 3%;}
.cta-button--new-products { margin-left: auto;
margin-top: 1%; margin-bottom: 2%; }
@media (max-width: 768px) {.cta-button-new-products,.cta-button--new-products {margin-top: 1%; margin-bottom:8%;} .cta-button-new-products .btn-cta new-products-cta a, .btn-cta new-products-cta a.cta-button--new-products, .btn-cta new-products-cta a,.btn-cta new-products--cta a,.btn-cta new-products-a-cta a {margin-left: 0% !important;}}
/* Ligne de points clés sous le prix */
.product-keypoints {
margin-top: 0.35rem;
font-size: 0.78rem;
color: #555; text-align:center;
flex-wrap: wrap;
gap: 0.25rem 0.5rem; justify-content:center;
}
.product-keypoints span {
position: relative;
padding-left: 0.8rem;
white-space: normal; /* garde la micro-info sur une ligne */
}
/* Petit point séparateur premium, trÚs discret */
.product-keypoints span::before {
content: "";
position: absolute;
left: 0.25rem;
top: 50%;
width: 4px;
height: 4px;
border-radius: 50%;
background: #C0C6CF; /* gris clair cohérent avec ton thÚme */
transform: translateY(-50%);
}
.product-rating {
margin-top: 0.25rem;
font-size: 0.78rem;
color: #555;
display: flex;
align-items: center;
gap: 0.35rem;
}
/* Si le module sort déjà ses propres étoiles, adapte juste la couleur
en ciblant ses classes (à ajuster en fonction de ton HTML réel) */
.product-rating .star,
.product-rating .grade-stars i {
font-size: 0.8rem;
}
/* Titres des produits dans le bloc nouveautés : jusqu'à 2 lignes */
.new-products-section .product-title a {
white-space: normal; /* autorise le retour Ă la ligne */
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 2 lignes max */
}
.featured-products .bestsellers-heading .products-section-title {
margin-bottom: .25rem;
}
.featured-products .bestsellers-heading .new-products-subtitle {
margin-bottom: 0;
}
/* ===== Bloc FAQ 2 colonnes : gauche FAQ principale, droite FAQ rapide ===== */
.custom-home-text.faq-block {
margin-left:5%; margin-right:5%;
width:90%;
}
.faq-row {
row-gap: 2.5rem;
align-items: stretch;
}
/* --- Carte FAQ principale (gauche) --- */
.faq-main-card {
background: #ffffff;
border-radius: 20px;
padding: clamp(2rem, 3vw, 2.7rem);
box-shadow: 0 16px 60px rgba(15, 23, 42, 0.14);
}
.faq-eyebrow {
text-transform: uppercase;
letter-spacing: 0.22em;
font-size: 0.75rem;
font-weight: 600;
color: #9ca3af;
margin-bottom: 0.6rem;
}
.faq-title {
font-size: clamp(1.9rem, 2.4vw, 2.25rem);
line-height: 1.2;
letter-spacing: -0.03em;
margin-bottom: 0.4rem;
}
.faq-subtitle {
font-size: 0.95rem;
color: #6b7280;
max-width: 28rem;
margin-bottom: 1.8rem;
}
/* --- Accordéon premium --- */
.faq-accordion {
margin-top: 0.75rem;
}
.faq-accordion input[type="radio"] {
display: none;
}
.faq-accordion-label {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.95rem 1.4rem;
margin-bottom: 0.5rem;
border-radius: 999px;
border: 1px solid #e5e7eb;
background: #ffffff;
cursor: pointer;
transition:
background 0.25s ease,
border-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.25s ease,
color 0.25s ease;
}
@media (hover:hover) and (pointer:fine) {
.faq-accordion-label:hover {
border-color: #d1d5db;
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
transform: translateY(-1px);
}
}
.faq-index {
min-width: 2.2rem;
height: 2.2rem;
border-radius: 999px;
border: 1px solid #e5e7eb;
background: #f9fafb;
color: #6b7280;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
display: inline-flex;
align-items: center;
justify-content: center;
}
.faq-question-text {
font-size: 0.95rem;
font-weight: 600;
line-height: 1.45;
}
.faq-chevron {
margin-left: auto;
width: 14px;
height: 14px;
position: relative;
flex-shrink: 0;
opacity: 0.5;
}
.faq-chevron::before {
content: "";
position: absolute;
inset: 0;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
transition: transform 0.25s ease, opacity 0.25s ease;
}
.faq-accordion-content {
max-height: 0;
overflow: hidden;
padding: 0 1.4rem 0 3.9rem;
transition:
max-height 0.3s ease,
padding-top 0.3s ease,
padding-bottom 0.3s ease;
}
.faq-accordion-content p {
margin: 0;
font-size: 0.9375rem;
line-height: 1.7;
color: #4b5563; text-align: justify;
}
/* Ătat ouvert : bleu du thĂšme */
.faq-accordion input:checked + .faq-accordion-label {
background: #001F3F;
color: #ffffff;
border-color: transparent;
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}
.faq-accordion input:checked + .faq-accordion-label .faq-index {
background: #ffffff;
color: #001F3F;
border-color: transparent;
}
.faq-accordion input:checked + .faq-accordion-label .faq-chevron {
opacity: 0.9;
}
.faq-accordion input:checked + .faq-accordion-label .faq-chevron::before {
transform: rotate(-135deg);
}
.faq-accordion input:checked + .faq-accordion-label + .faq-accordion-content {
max-height: 320px;
padding-top: 0.55rem;
padding-bottom: 0.9rem;
}
/* --- Colonne droite : autres éléments de FAQ --- */
.faq-side {
display: flex;
flex-direction: column;
gap: 1.1rem;
}
.faq-side-card {
background: #ffffff;
border-radius: 16px;
padding: 1.4rem 1.5rem;
box-shadow: 0 12px 40px rgba(15, 23, 42, 0.12);
}
.faq-side-card--light {
box-shadow: 0 6px 24px rgba(15, 23, 42, 0.08);
}
.faq-side-title {
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.16em;
color: #6b7280;
margin: 0 0 0.9rem;
}
/* mini items Q/R avec icĂŽne */
.faq-side-item {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0.6rem 0;
}
.faq-side-item + .faq-side-item {
border-top: 1px solid #f3f4f6;
}
.faq-side-icon {
width: 34px;
height: 34px;
border-radius: 999px;
background: rgba(0, 31, 63, 0.06);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.faq-side-icon img {
width: 20px;
height: 20px;
object-fit: contain;
}
.faq-side-question {
font-size: 0.9rem;
font-weight: 600;
margin: 0 0 0.15rem;
}
.faq-side-answer {
font-size: 0.875rem;
color: #4b5563;
margin: 0;
}
/* checklist */
.faq-checklist {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.5rem;
}
.faq-checklist li {
display: flex;
align-items: flex-start;
gap: 0.6rem;
font-size: 0.875rem;
color: #374151;
}
.faq-check-number {
width: 22px;
height: 22px;
border-radius: 999px;
border: 1px solid #e5e7eb;
background: #f9fafb;
font-size: 0.75rem;
font-weight: 600;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* --- Responsive --- */
@media (max-width: 991.98px) {
.faq-main-card {
border-radius: 18px;
padding: 2rem 1.8rem 2.2rem;
}
.faq-side-card {
border-radius: 14px;
}
}
/* IcĂŽne circulaire en pur CSS pour les questions rapides */
.faq-side-icon {
width: 34px;
height: 34px;
border-radius: 999px;
background: rgba(0, 31, 63, 0.06);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
position: relative;
}
/* petit check / tick stylisé */
.faq-side-icon::before {
content: "";
width: 11px;
height: 6px;
border-left: 2px solid #001F3F;
border-bottom: 2px solid #001F3F;
transform: rotate(-45deg);
}
/* Correction ordre des blocs en home */
#content #custom-text {
order: 0; /* revient avant tout ce qui a order > 0 */
}
/* =============================================
Alignement vertical des titres produit
- Bloc Nouveaux produits (.new-products-section)
- Bloc Best Sellers (.featured-products .bestsellers-grid)
============================================= */
/* 1er titre : h2/h3.product-title */
.new-products-section .product-miniature .product-description .product-title,
.featured-products .bestsellers-grid .product-miniature .product-description .product-title {
display: flex; justify-content:center;
align-items: center; /* centre verticalement le dans la hauteur donnée par le JS */
line-height:1.4
}
/* Titre dans les cartes produits (pour pouvoir centrer verticalement si besoin) */
.new-products-section .product-miniature .product-description .product-title,
.featured-products .bestsellers-grid .product-miniature .product-description .product-title {
display: flex;
align-items: center;
}
/* Petit espace entre les 2 lignes du titre */
.product-miniature .product-title a {
line-height: 1.25;
}
/* EmpĂȘcher l'animation au tout premier positionnement des slides
dans les blocs Nouveaux produits et Meilleures ventes */
#index .featured-products .bestsellers-grid .js-product-image-slider.no-init-transition .product-image-slide,
.new-products-section .js-product-image-slider.no-init-transition .product-image-slide {
transition: none !important;
}
/* ==========================================================
FAQ HOME â VERSION PROPRE & DĂFINITIVE (PREMIUM)
========================================================== */
/* ---------- Structure générale ---------- */
.faq-block {
margin: 2.5rem 0 3rem;
}
.faq-row {
display: flex;
}
.faq-row > [class*="col-"] {
display: flex;
}
.faq-main-card {
flex: 1;
background: #ffffff;
border-radius: 8px;
padding: 32px 36px 34px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
display: flex;
flex-direction: column;
}
/* ---------- Titres ---------- */
.faq-eyebrow {
font-size: 0.72rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #8A9199;
margin-bottom: 6px;
}
.faq-title {
font-size: 1.25rem;
font-weight: 600;
color: #333E48;
margin-bottom: 8px;
}
.faq-subtitle {
font-size: 0.9rem;
color: #6B7280;
line-height: 1.6;
margin-bottom: 26px;
max-width: 95%;
}
/* ---------- Accordéon ---------- */
.faq-accordion {
display: flex;
flex-direction: column;
gap: 18px;
}
/* ---------- Question ---------- */
.faq-accordion-label {
display: flex;
align-items: center; /* ALIGNEMENT VERTICAL PARFAIT */
gap: 14px;
padding: 14px 22px;
min-height: 44px;
border-radius: 12px;
background: #F7F9FB;
cursor: pointer;
transition: background 0.25s ease, box-shadow 0.25s ease;
}
/* Texte question */
.faq-question-text {
font-size: 0.89rem;
font-weight: 500;
line-height: 1.35;
color: #333E48;
}
/* ---------- Suppression des numéros ---------- */
.faq-index {
display: none !important;
}
/* ---------- FlĂšche premium ---------- */
.faq-chevron {
margin-left: auto;
width: 32px;
height: 32px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.faq-chevron::before {
content: "";
width: 35px;
height: 35px;
background-color: #FFFFFF;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6z'/%3E%3C/svg%3E") no-repeat center;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6z'/%3E%3C/svg%3E") no-repeat center;
transition: transform 0.25s ease;
}
/* ---------- Ătat actif ---------- */
.faq-accordion input:checked + .faq-accordion-label {
background: linear-gradient(
180deg,
#42464D 0%,
#40444B 100%
);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.faq-accordion input:checked + .faq-accordion-label .faq-question-text {
color: rgba(255, 255, 255, 0.92);
}
.faq-accordion input:checked + .faq-accordion-label .faq-chevron::before {
transform: rotate(180deg);
}
/* ---------- RĂ©ponses ---------- */
.faq-accordion-content {
display: none;
padding: 14px 28px 22px 54px;
}
.faq-accordion-content p {
font-size: 0.88rem;
line-height: 1.75;
color: #4A4F55;
margin: 0;
max-width: 90%;
}
/* Afficher uniquement la réponse active */
.faq-accordion input:checked + .faq-accordion-label + .faq-accordion-content {
display: block;
}
/* ---------- Responsive ---------- */
@media (max-width: 991px) {
.faq-main-card {
padding: 26px 24px 30px;
}
.faq-title {
font-size: 1.15rem;
}
.faq-accordion-label {
padding: 12px 16px;
}
.faq-accordion-content {
padding-left: 44px;
}
}
/* ==========================================================
FAQ â MOBILE OPTIMISATION
========================================================== */
@media (max-width: 767px) {
/* Une seule colonne */
.faq-row {
flex-direction: column;
}
.faq-main-card {
padding: 22px 18px 26px;
border-radius: 10px;
}
/* Titres */
.faq-title {
font-size: 1.05rem;
}
.faq-subtitle {
font-size: 0.85rem;
margin-bottom: 20px;
}
/* Accordéon */
.faq-accordion {
gap: 14px;
}
/* Question */
.faq-accordion-label {
padding: 12px 14px;
min-height: auto;
border-radius: 10px;
}
.faq-question-text {
font-size: 0.88rem;
line-height: 1.4;
}
/* FlĂšche plus proche et bien visible */
.faq-chevron {
width: 26px;
height: 26px;
}
.faq-chevron::before {
width: 25px;
height: 25px;
}
/* RĂ©ponse */
.faq-accordion-content {
padding: 12px 14px 18px;
}
.faq-accordion-content p {
font-size: 0.87rem;
line-height: 1.7;
max-width: 100%;
}
}
/* ==========================================================
FAQ â TABLETTE OPTIMISATION
========================================================== */
@media (min-width: 768px) and (max-width: 991px) {
/* Toujours 1 colonne (plus lisible en tablette) */
.faq-row {
flex-direction: column;
}
.faq-main-card {
padding: 28px 26px 30px;
}
.faq-title {
font-size: 1.15rem;
}
.faq-accordion-label {
padding: 13px 18px;
}
.faq-chevron {
width: 28px;
height: 28px;
}
.faq-accordion-content {
padding: 14px 20px 20px;
}
}
/* ==========================================================
FAQ â FLĂCHE INACTIVE (FERMĂE)
========================================================== */
.faq-chevron::before {
content: "";
background-color: #40444B; /* mĂȘme teinte que fond actif */
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6z'/%3E%3C/svg%3E") no-repeat center;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6z'/%3E%3C/svg%3E") no-repeat center;
transform: rotate(0deg); /* flĂšche vers le bas */;
transition: transform 0.25s ease, background-color 0.25s ease;
}
/* ==========================================================
FAQ â FLĂCHE ACTIVE (OUVERTE)
========================================================== */
.faq-accordion input:checked + .faq-accordion-label .faq-chevron::before {
transform: rotate(180deg); /* flĂšche vers le haut */
background-color: #FFFFFF; /* contraste actif */
}
@media (max-width: 1191px) {.faq-block { margin-bottom:0.5rem; margin:2.5rem;} #custom-text-1.container.my-5 { padding-left:0; padding-right:0;} .custom-home-text.faq-block .col-12.col-lg-6 { padding-left:0; padding-right:0;}}
/* =========================
HEADER â CLEAN & STABLE
========================= */
/* Header dans le flux normal */
#header {
background: #404E60;
z-index: 10;
}
/* Structure */
/* Logo */
#header .logo {
width: auto;
}
/* Recherche */
#search_widget {
max-width: 100%;
}
/* ===== MOBILE ===== */
@media (max-width: 767px) {
#menu-icon {
display: flex;
align-items: center;
justify-content: center;
}
}
/* =========================
HEADER â CLEAN (CLASSIC SAFE)
========================= */
/* Header normal (non sticky) */
#header {
background: #404E60;
z-index: 10;
}
/* Ligne principale : NE JAMAIS WRAP */
/* Logo */
#header .logo {
flex: 0 0 auto;
}
#search_widget form input {
width: 100%;
border-radius: 4px;
}
/* IcĂŽnes menu / panier */
#menu-icon {
flex: 0 0 auto;
}
#mobile_top_menu_wrapper { padding: 0px;}
/* === FIX ESPACE HEADER / SLIDER === */
#header {
margin-bottom: 0 !important;
}
#header + #wrapper,
#header + #content-wrapper,
#header + #content {
margin-top: 0 !important;
padding-top: 0 !important;
}
#carousel {
margin-top: 0 !important;
}
/* === FIX OVERFLOW HEADER MOBILE === */
html, body {
overflow-x: hidden !important;
}
/* === EMPĂCHER LES FLĂCHES DU SLIDER DE REMONTER DANS LE HEADER === */
#carousel .swiper-button-prev,
#carousel .swiper-button-next,
#carousel .slick-prev,
#carousel .slick-next {
z-index: 5;
}
/* === MENU ICON MOBILE SIZE FIX === */
#menu-icon i.material-icons {
font-size: 28px !important;
line-height: 1 !important;
}
#menu-icon {
min-width: 44px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
/* === SUPPRESSION ESPACE BLANC HEADER / SLIDER (MOBILE) === */
@media (max-width: 767px) {
#header {
margin-bottom: 0 !important;
}
.header-top {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
#wrapper,
#content,
#index #wrapper {
padding-top: 0 !important;
margin-top: 0 !important;
}
#carousel {
margin-top: 0 !important;
}
}
@media (max-width: 767px) { #header .header-top .position-static { padding-bottom: 2.5%;}}
#header .header-top-right {
display: flex;
align-items: center;
justify-content: space-between;
}
#search_widget form input[type="search"],
#search_widget form input[type="text"] {
padding: 6px 45px;
}
@media (min-width: 768px) {
#header {
display: block; }}
@media (min-width: 1200px) {
#search_widget form {
margin-left: auto;
margin-right: auto;
}
}
@media (max-width: 767px) {#header .header-top .position-static { display:none;} }
/* Le form devient le conteneur de référence */
#search_widget form {
position: relative;
}
/* IcÎne positionnée dans le champ */
#search_widget .search-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
pointer-events: auto;
color: #444;
display: flex;
align-items: center;
}
/* đ Neutralisation complĂšte du focus sur la barre de recherche */
#search_widget input[type="text"],
#search_widget input[type="search"] {
border: 1px solid #D1D6DB;
outline: none !important;
box-shadow: none !important;
}
#search_widget input[type="text"]:focus,
#search_widget input[type="search"]:focus,
#search_widget input[type="text"]:focus-visible,
#search_widget input[type="search"]:focus-visible {
border: 1px solid #D1D6DB !important;
outline: none !important;
box-shadow: none !important;
}
/* =====================================
AUTOCOMPLETION â FIX JQUERY UI PRO
===================================== */
/* Conteneur global */
.ui-autocomplete {
background-color: #EFF2F5;
border: 1px solid #D1D6DB;
border-radius: 5px;
box-shadow: 0 6px 18px rgba(0,0,0,0.12);
padding: 4px 0;
margin-top: 6px;
box-sizing: border-box;
}
/* Suppression styles jQuery UI parasites */
.ui-autocomplete .ui-menu-item {
margin: 0;
padding: 0;
}
/* LIGNE CLIQUABLE (clé du fix) */
.ui-autocomplete .ui-menu-item-wrapper {
display: flex; /* đ layout horizontal */
align-items: center; /* đ alignement vertical */
gap: 12px;
padding: 10px 14px;
width: 100%;
text-align: left; /* đ texte Ă gauche */
background: transparent !important;
color: #333E48 !important; /* đ couleur thĂšme */
font-weight: 500;
box-sizing: border-box;
cursor: pointer;
}
/* Hover + clavier (on NE MET PAS blanc) */
.ui-autocomplete .ui-menu-item-wrapper:hover,
.ui-autocomplete .ui-menu-item-wrapper.ui-state-active {
background-color: #F4F5F7 !important;
color: #333E48 !important; /* đ reste lisible */
}
/* IMAGE PRODUIT */
.ui-autocomplete .autocomplete-thumbnail {
object-fit: cover;
border-radius: 5px;
background-color: #F3F4F6;
flex-shrink: 0;
}
/* TEXTE PRODUIT */
.ui-menu .ui-menu-item a {
display: flex !important;
align-items:center !important;
font-size: 0.95rem;
line-height: 1.3;
color: #333E48 !important; /* đ titre thĂšme */
}
/* DĂ©sactive le style jQuery UI bleu/blanc */
.ui-autocomplete .ui-state-active,
.ui-autocomplete .ui-state-focus {
border: none !important;
}
/* Scrollbar */
.ui-autocomplete::-webkit-scrollbar {
width: 6px;
}
.ui-autocomplete::-webkit-scrollbar-thumb {
background-color: #AAB4BF;
border-radius: 6px;
}
.ui-autocomplete.searchbar-autocomplete li a .autocomplete-thumbnail {
width: 150px;}
/* đ Hauteur max globale du dropdown */
.ui-autocomplete {
max-height: 420px;
overflow-y: auto;
}
/* =====================================================
FIX HEADER TABLETTE / PETITS DEVICES (768â1199px)
===================================================== */
@media (min-width: 768px) and (max-width: 1199px) {
/* Colonnes Bootstrap neutralisées */
#_desktop_logo,
.header-top-right {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Panier */
.nav-hooks {
flex: 0 0 auto !important;
margin-left: auto !important;
}
}
#header .header-top>.container>.row:first-of-type { justify-content: center;}
@media (min-width: 1200px) { #header .header-top>.container>.row:first-of-type { height:64px;}}
/* ==================================================
HEADER â FIX DEFINITIF DOUBLONS DESKTOP
================================================== */
/* â„ 768px : JAMAIS de header mobile */
@media (min-width: 768px) {
.mobile-header,
.mobile-logo,
.mobile-cart {
display: none !important;
}
/* Sécurité legacy */
#_mobile_logo,
#_mobile_cart,
#_mobile_user_info {
display: none !important;
}
}
/* ==================================================
PANIER MOBILE â STYLE PREMIUM (FINAL)
================================================== */
@media (max-width: 767px) {
.mobile-cart {
display: flex;
align-items: center;
justify-content: center;
}
.mobile-cart .blockcart {
display: flex;
align-items: center;
justify-content: center;
border-radius: 999px;
padding: 0px;
min-width: 44px;
min-height: 44px;
transition: background 0.2s ease,
box-shadow 0.2s ease,
transform 0.15s ease;
}
.mobile-cart .blockcart i {
font-size: 22px;
color: #333E48;
}
.mobile-cart .blockcart .cart-products-count {
background: #C5205B;
color: #fff;
font-size: 11px;
font-weight: 600;
border-radius: 999px;
padding: 3px 4px !important;
margin-left: 6px;
line-height: 1;
}
.cart-products-count {
width: 18px;
height: 18px; }
.mobile-cart .blockcart:hover {
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
transform: translateY(-1px);
}
/* Sécurité : cacher panier desktop en mobile */
.header-top-right .blockcart {
display: none !important;
}
}
/* Sécurité : jamais de panier mobile hors mobile */
@media (min-width: 768px) {
.mobile-cart {
display: none !important;
}
}
/* ==================================================
ICĂNE PANIER PREMIUM â MOBILE
================================================== */
@media (max-width: 767px) {
/* Lien panier */
.mobile-cart .cart-link {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
/* IcĂŽne SVG */
.mobile-cart .cart-icon {
width: 22px;
height: 22px;
fill: none;
stroke: #333E48;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
display: block;
}
/* Supprimer texte panier en mobile */
.mobile-cart .cart-label {
display: none !important;
}
}
#header .header-top a[data-depth="0"], #header .header-top a[data-depth="0"]:hover {
color: #E8EDF2; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
}
#header .header-top a[data-depth="0"], #header .header-top a[data-depth="0"]:hover {
font-weight: 500;
letter-spacing: 0.02em;
padding: 0 14px;
color: #E8EDF2; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto; }
@media (min-width: 1251px) {
#header .header-top a[data-depth="0"], #header .header-top a[data-depth="0"]:hover {
font-size: 0.95rem; }
}
@media (min-width: 1200px) and (max-width: 1250px) {
#header .header-top a[data-depth="0"], #header .header-top a[data-depth="0"]:hover {
font-size: 0.92rem; }
}
@media (min-width: 880px) and (max-width: 1199px) {
#header .header-top a[data-depth="0"], #header .header-top a[data-depth="0"]:hover {
font-size: 0.90rem; }
}
@media (min-width: 768px) and (max-width: 941px) {
#header .header-top a[data-depth="0"],
#header .header-top a[data-depth="0"]:hover {
font-size: 0.80rem;
}
}
.cart-icon-wrapper {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* IcĂŽne sac premium */
.cart-icon {
width: 40px;
height: 40px;
stroke: #212529;
stroke-width: 1.5;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
display: block;
}
.cart-products-text,
.cart-products-label,
.blockcart .cart-products-text {
display: none !important;
}
.cart-products-count {
position: absolute;
top: 0px;
right: -12px;
width: 19px;
height: 19px;
padding: 0 !important;
background: #c5205b;
color: #ffffff;
font-size: 11px;
font-weight: 500;
line-height: 18px;
text-align: center;
border-radius: 50% !important;
min-width: unset !important;
pointer-events: none;
}
/* EmpĂȘche lâaffichage du texte "articles" au chargement */
.cart-products-count {
visibility: hidden;
}
#header-cart-link {
display: flex;
align-items: center;
height: 100%;
}
.cart-link {
display: flex;
align-items: center;
margin-right: 20px; /* déplace vers la gauche */
}
.cart-icon-wrapper {
transform: translateY(1px);
}
@media (max-width: 767.98px) { .row.align-items-center {
height: auto !important;
}}
/* =========================
HEADER STICKY â PROPRE
========================= */
#header {
position: sticky;
top: 0;
z-index: 10000;
}
@media (min-width: 992px) {.col-lg-9 { width: 100%; }}
#categorie-contenu { display: flex; }
#categorie-contenu .active-category img {
transform: scale(1.02);
}
/* ===== HERO ===== */
.canapes-hero {
padding: 70px 0 40px;
text-align: center;
}
.canapes-hero h1 {
font-size: 36px;
font-weight: 600;
margin-bottom: 18px;
}
.canapes-hero-text {
max-width: 720px;
margin: 0 auto;
color: #6b7280;
font-size: 17px;
}
/* ===== CATEGORIES ===== */
.canapes-categories {
padding: 45px 0;
background: #f8f9fb;
}
@media (min-width: 768px) {.canapes-categories {
padding: 30px 0;}}
.canapes-categories h2 {
text-align: center;
font-size: 26px;
margin-bottom: 35px;
}
.canapes-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 26px;
}
.canapes-card {
background: #fff;
border-radius: 18px;
padding: 20px;
text-align: center;
text-decoration: none;
color: inherit;
box-shadow: 0 8px 24px rgba(0,0,0,.08);
transition: transform .25s ease, box-shadow .25s ease;
}
.canapes-card img {
max-height: 110px;
margin-bottom: 14px;
}
.canapes-card .title {
display: block;
font-weight: 600;
margin-bottom: 6px;
}
.canapes-card .desc {
font-size: 14px;
color: #6b7280;
}
.canapes-card:hover {
transform: translateY(-6px);
box-shadow: 0 16px 36px rgba(0,0,0,.15);
}
/* ===== BOTTOM ===== */
.canapes-bottom {
padding: 60px 0 80px;
text-align: center; padding-left: 15px; padding-right:15px;
}
.canapes-bottom p {
max-width: 720px;
margin: 0 auto 30px;
color: #6b7280;
}
.btn-canapes {
display: inline-block;
padding: 14px 34px;
background: #212529;
color: #fff;
border-radius: 40px;
font-size: 16px;
text-decoration: none;
}
.btn-canapes:hover {
background: #000;
}
/* ======================================================
OVERRIDES RESPONSIVE â CANAPES (PRODUCTION READY)
====================================================== */
/* ===== HERO RESPONSIVE ===== */
@media (max-width: 768px) {
.canapes-hero {
padding: 40px 0 28px; padding-left: 15px; padding-right:15px;
}
.canapes-hero h1 {
font-size: 24px;
line-height: 1.25;
margin-bottom: 14px;
}
.canapes-hero-text {
font-size: 14px;
padding: 0 14px;
}
}
/* ===== GRID MAĂTRISĂE ===== */
/* Desktop : 3 colonnes fixes (Ă©vite les trous) */
@media (min-width: 1200px) {
.canapes-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* Laptop / tablette large */
@media (max-width: 1199px) and (min-width: 769px) {
.canapes-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* Mobile : 2 cartes par ligne */
@media (max-width: 767.99px) {
.canapes-grid {
grid-template-columns: repeat(2, 1fr);
gap: 16px; padding-left: 20px; padding-right:20px; margin-top:12%;
}
}
@media (min-width: 768px) {
.canapes-grid { margin-top:4%; } }
/* ===== CARTES MOBILE ===== */
@media (max-width: 768px) {
.canapes-card {
padding: 14px;
border-radius: 14px;
box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.canapes-card img {
max-height: 80px;
margin-bottom: 10px;
}
.canapes-card .title {
font-size: 14px;
}
.canapes-card .desc {
font-size: 12px;
line-height: 1.35;
}
.canapes-card:hover {
transform: none; /* pas de jump mobile */
box-shadow: 0 8px 22px rgba(0,0,0,.12);
}
}
/* ===== CTA RESPONSIVE ===== */
@media (max-width: 768px) {
.btn-canapes {
width: 100%;
max-width: 280px;
padding: 14px 0;
font-size: 15px;
}
}
@media (min-width: 768px) {#cms #main #content, .canapes-categories{ width: 100%; padding-left:15px; padding-right:15px; } }
/* =========================================
NEUTRALISATION COULEUR TITRE AU CLIC / HOVER
========================================= */
/* Liens cartes : aucune variation de couleur */
.canapes-card,
.canapes-card:hover,
.canapes-card:focus,
.canapes-card:active {
color: inherit;
text-decoration: none;
}
/* Titre : couleur strictement fixe */
.canapes-card .title,
.canapes-card:hover .title,
.canapes-card:focus .title,
.canapes-card:active .title {
color: #212529 !important; /* adapte si besoin */
}
/* Description idem */
.canapes-card .desc,
.canapes-card:hover .desc,
.canapes-card:focus .desc,
.canapes-card:active .desc {
color: #6b7280 !important;
}
/* Supprime effet navigateur au clic */
.canapes-card:focus-visible {
outline: none;
}
/* =========================================
CTA â COULEUR TEXTE VERROUILLĂE
========================================= */
.btn-canapes,
.btn-canapes:hover,
.btn-canapes:focus,
.btn-canapes:active,
.btn-canapes:visited {
color: #ffffff !important; /* texte toujours blanc */
text-decoration: none;
}
/* Focus navigateur supprimé */
.btn-canapes:focus-visible {
outline: none;
}
.btn-canapes:hover, .btn-canapes:active{
background: #232323;
}
@media (max-width: 768px) {
.canapes-grid > .canapes-card:last-child:nth-child(odd) {
grid-column: 1 / -1;
justify-self: center;
max-width: 190px;
}
}
/* ===========================
AUTOCOMPLETE â PRODUITS
=========================== */
.search-autocomplete {
margin-top: 12px;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 14px 34px rgba(0,0,0,0.18);
overflow: hidden;
display: none;
}
.search-autocomplete a {
display: block;
padding: 14px 18px;
text-decoration: none;
color: #212529;
border-bottom: 1px solid #EEF0F2;
}
.search-autocomplete a:last-child {
border-bottom: none;
}
.search-autocomplete a:hover {
background: #F4F5F7;
}
/* Titre */
.search-autocomplete .sa-title {
font-size: 14px;
font-weight: 600;
margin-bottom: 4px;
}
/* Prix */
.search-autocomplete .sa-price {
font-size: 13px;
color: #404E60;
margin-bottom: 6px;
}
/* Keypoints */
.search-autocomplete .sa-keypoints {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.search-autocomplete .sa-keypoints span {
font-size: 11px;
padding: 3px 6px;
border-radius: 6px;
background: #E9EDF2;
color: #404E60;
}
#header,
#header .header-top {
background: linear-gradient(
145deg,
rgba(0,0,0,0.22) 0%, /* noir lisible immédiat */
rgba(0,0,0,0.16) 6%,
rgba(64,78,96,1) 32%, /* gris bleuté principal plus tÎt */
rgba(64,78,96,1) 65%,
rgba(0,0,0,0.03) 100%
);
}
/* neutralise les backgrounds parasites */
#header .header-top .container,
#header .header-top .row {
background: transparent !important;
}
@media (max-width: 767.99px) {
/* la row reste bien en hauteur automatique */
.row.align-items-center {
height: auto !important;
min-height: unset !important;
}
.mobile-header {
background: linear-gradient(
145deg,
rgba(255,255,255,0.03) 0%,
rgba(64,78,96,1) 45%,
rgba(64,78,96,1) 55%,
rgba(0,0,0,0.03) 100%
);
}
}
#header svg:not(:root) {color: #E8EDF2; fill: #E8EDF2; stroke: rgba(31,41,51,0.35);stroke-width:0.35; display: flex;}
@media (min-width: 768px) {#header svg:not(:root) {color: white; fill: white;}}
#header::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(
circle at 110px 50%,
rgba(0,0,0,0.42) 0%,
rgba(0,0,0,0.22) 120px,
rgba(0,0,0,0.00) 300px
);
pointer-events: none;
}
#header,
#header * {
-webkit-font-smoothing: antialiased;
text-rendering: geometricPrecision;
}
#header, #header a, .nav-hooks {
filter: contrast(1.02);
}
#header {
will-change: transform;
backface-visibility: hidden;
}
@media (min-width: 1200px) {
#header {
height: 64px;
transition: height 200ms cubic-bezier(0.4, 0.0, 0.2, 1),
box-shadow 200ms ease;
}
#header.is-shrink {
height: 54px;
box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
}
@media (max-width: 767px) {
#header {
height: 56px;
transition: none;
}
}
@media (max-width: 768px) {
#header {
padding-top: env(safe-area-inset-top);
}
}
/* ==========================================================
FIX DĂFINITIF â DĂCALAGE DES LIENS DU MENU (FOUT / FOIT)
========================================================== */
/* Le du menu */
#top-menu {
display: flex;
flex-wrap: nowrap;
}
/* CHAQUE item du menu */
#top-menu > li {
flex: 0 0 auto;
white-space: nowrap;
}
/* CHAQUE lien : largeur verrouillée */
#top-menu > li > a {
display: inline-block;
min-width: max-content; /* đ„ clĂ© du fix */
font-weight: normal;
letter-spacing: 0;
transform: translateZ(0); /* force rendu GPU stable */
}
/* EmpĂȘche toute variation de mĂ©trique de police */
#top-menu,
#top-menu * {
font-synthesis: none;
text-rendering: geometricPrecision;
}
/* MENU MOBILE â SVG INSTANTANĂ */
.burger-icon {
display: inline-flex;
width: 28px;
height: 28px;
color: #E8EDF2;
}
.burger-icon svg {
display: block;
}
/* ===========================
SEARCH â DESKTOP / MOBILE
=========================== */
/* Desktop */
@media (min-width: 768px) {
#search-wrapper-desktop {
display: block;
}
#search-wrapper-mobile {
display: none;
}
}
/* Mobile */
@media (max-width: 767px) {
#search-wrapper-desktop {
display: none;
}
#search-wrapper-mobile {
display: block;
}
}
/* ===========================
SEARCH MOBILE â ACCORDĂON
=========================== */
@media (max-width: 767px) {
.mobile-search-accordion {
display: none;
}
.mobile-search-accordion.is-open {
display: block;
}
}
@media (max-width: 767.99px) {
#header {
overflow: visible !important;
}
}
/* Mobile uniquement */
@media (max-width: 767px) {
#mobile-search {
width: 100%;
}
}
/* Accordéon */
.mobile-search-accordion {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.3s ease, opacity 0.2s ease;
}
.mobile-search-accordion.is-open {
max-height: 160px; /* ajuste */
opacity: 1;
}
#index #wrapper {padding-top: 0px;}
/* ALIGNEMENT VERTICAL MENU */
#_desktop_top_menu {
display: flex;
align-items: center;
}
#_desktop_top_menu .top-menu {
display: flex;
align-items: center;
height: 100%;
}
#_desktop_top_menu .top-menu > li > a {
display: flex;
align-items: center;
line-height: 1;
padding: 0 14px;
}
/* STRUCTURE HEADER DROIT */
.header-top-right {
display: flex;
align-items: center;
gap: 24px;
}
/* WRAPPER MENU + SEARCH */
#search-wrapper-desktop {
display: flex;
align-items: center;
gap: 24px;
flex: 1 1 auto;
}
/* BARRE DE RECHERCHE CENTRĂE */
#search_widget {
flex: 0 0 420px;
max-width: 420px;
margin-left: auto;
margin-right: auto;
}
#search_widget form {
width: 100%;
}
#search_widget input[type="text"] {
width: 100%;
}
/* ALIGNER HEADER AVEC LE CONTENU */
.header-top {
display: flex;
justify-content: center;
}
.header-top > .container {
max-width: 1200px;
width: 100%;
}
/* TABLETTE : RECHERCHE PLUS COMPACTE */
@media (max-width: 991px) {
#search_widget {
flex: 0 1 280px;
}
}
@media (max-width: 767px) {
.header-top-right {
display: none !important;
}
}
.logo-wrapper img {
width: auto;
object-fit: contain;
}
/* ===== FIX TABLETTE HEADER (768px) ===== */
@media (min-width: 768px) and (max-width: 991px) {
/* Autoriser Bootstrap Ă respirer */
#header .row {
flex-wrap: wrap;
}
/* Recherche maßtrisée */
#search_widget {
flex: 0 0 260px;
max-width: 260px;
}
/* Sécurité menu */
#_desktop_top_menu {
overflow: hidden;
}
}
/* ==========================================================
HEADER â FIX RESPONSIVE (desktop + 768â1199)
Objectif : ne plus casser Bootstrap + search fluide
========================================================== */
/* 1) Ne jamais clipper le header (sinon ça coupe search/panier) */
#header .header-top,
#header .header-top .container,
#header .header-top .row {
overflow: visible !important;
max-width: none !important;
}
/* 2) Restaurer les largeurs Bootstrap des colonnes desktop */
@media (min-width: 768px) {
#_desktop_logo.col-md-2 {
flex: 0 0 25% !important;
max-width: 25% !important;
}
.header-top-right.col-md-10 {
flex: 0 0 75% !important;
max-width: 75% !important;
}
}
/* 3) Layout interne du bloc droit (menu + search + panier) */
@media (min-width: 768px) {
.header-top-right {
display: flex !important;
align-items: center !important;
gap: 16px !important;
}
/* IMPORTANT : autorise les flex items à rétrécir (sinon overflow) */
#search-wrapper-desktop,
#_desktop_top_menu {
min-width: 0 !important;
}
#search-wrapper-desktop {
display: flex !important;
align-items: center !important;
gap: 18px !important;
flex: 1 1 auto !important;
}
/* Menu prend lâespace dispo */
#_desktop_top_menu {
flex: 1 1 auto !important;
}
#_desktop_top_menu .top-menu {
display: flex !important;
align-items: center !important;
flex-wrap: nowrap !important;
white-space: nowrap !important;
}
/* Search = largeur fluide qui sâadapte */
#search_widget {
flex: 0 1 clamp(220px, 26vw, 420px) !important;
min-width: 200px !important;
max-width: 420px !important;
}
}
/* 4) Ă 992â1199 : search un peu plus compacte pour Ă©viter la coupe */
@media (min-width: 992px) and (max-width: 1199px) {
#search_widget {
flex: 0 1 320px !important;
max-width: 320px !important;
}
}
/* 5) Ă 768â991 : encore plus compacte */
@media (min-width: 768px) and (max-width: 991px) {
#search_widget {
flex: 0 1 240px !important;
max-width: 240px !important;
}
}
/* ==========================================================
HEADER FIX PROPRE
- â„1200 : 1 ligne (menu + search)
- 768â1199 : menu sur 1â2 lignes + search dessous
========================================================== */
/* ===== DESKTOP LARGE (â„1200) ===== */
@media (min-width: 1200px) {
#header .header-top > .container > .row:first-of-type{
min-height: 64px;
height: auto !important;
align-items: center;
}
#_desktop_top_menu{
display: flex;
align-items: center;
height: 64px;
}
#_desktop_top_menu .top-menu{
display: flex;
align-items: center;
flex-wrap: nowrap;
height: 100%;
}
#_desktop_top_menu .top-menu > li > a{
display: flex;
align-items: center;
height: 64px;
line-height: 1;
padding: 0 14px;
white-space: nowrap;
}
#search-wrapper-desktop{ min-width: 0; }
#search_widget{
flex: 0 1 420px;
max-width: 420px;
min-width: 240px;
}
}
/* ==========================================================
HEADER 768â1199 : UNE LIGNE
- Logo Ă gauche
- Menu au centre (peut passer sur 2 lignes si manque de place)
- Search + panier Ă droite (reste sur 1 ligne)
========================================================== */
@media (min-width: 768px) and (max-width: 1199px) {
/* 1) Le container doit autoriser la flex-row */
#header .header-top .row.align-items-center{
display: flex !important;
flex-wrap: nowrap !important; /* une seule ligne */
align-items: center !important; margin-left: 0.1%; margin-right: 0.1%;
}
/* 2) Logo: fixe, ne rétrécit pas trop */
#_desktop_logo{
flex: 0 0 auto !important;
min-width: 140px; /* Ă©vite Ă©crasement logo */
}
/* 3) Bloc droite (search + panier) : fixe */
.header-top-right{
display: flex !important;
align-items: center !important;
flex-wrap: nowrap !important;
gap: 12px !important;
flex: 1 1 auto !important; /* prend le reste */
min-width: 0 !important; /* CRUCIAL */
}
/* wrapper menu + search = 2 zones : menu (flex) + search (fixe) */
#search-wrapper-desktop{
display: flex !important;
align-items: center !important;
flex: 1 1 auto !important;
min-width: 0 !important; /* CRUCIAL */
gap: 14px !important;
}
/* 4) MENU : zone flexible qui peut WRAP sur 2 lignes */
#_desktop_top_menu{
flex: 1 1 auto !important;
min-width: 0 !important; /* CRUCIAL */
}
#_desktop_top_menu .top-menu{
display: flex !important;
flex-wrap: wrap !important; /* <- 2 lignes si besoin */
align-items: center !important;
row-gap: 0px !important;
column-gap: 0px !important;
margin: 0 !important; justify-content: center;
}
/* Liens alignés verticalement et compacts */
#_desktop_top_menu .top-menu > li > a{
display: flex !important;
align-items: center !important;
line-height: 1.1 !important;
padding: 0px 8px !important; /* réduit pour éviter débordement */
white-space: nowrap !important;
}
/* 5) SEARCH : fixe et compacte sur 768â1199 */
#search_widget{
max-width: 260px !important;
min-width: 200px !important;
}
#search_widget input[type="text"]{
width: 100% !important;
}
/* 6) Panier : toujours visible Ă droite */
.nav-hooks{
flex: 0 0 auto !important;
}
}
/* ===== Menu : MAX 2 lignes (768â1199) ===== */
@media (min-width: 768px) and (max-width: 1199px) {
#_desktop_top_menu .top-menu{
overflow: hidden;
}
#_desktop_top_menu .top-menu > li > a{
line-height: 1.2; /* cohérent avec le calcul */
}
}
/* ===== Zone serrée : réduire légÚrement pour éviter une 3e ligne ===== */
@media (min-width: 768px) and (max-width: 900px) {
/* Menu un peu plus compact */
#_desktop_top_menu .top-menu > li > a{
font-size: 13px;
padding: 5px 7px;
}
#_desktop_top_menu .top-menu{
column-gap: 12px;
row-gap: 6px;
}
/* Search un peu plus petite pour libérer de la place */
#search_widget{
flex-basis: 220px;
max-width: 220px;
min-width: 180px;
}
/* Gaps plus petits */
.header-top-right{ gap: 10px; }
#search-wrapper-desktop{ gap: 12px; }
}
/* ===== MENU : alignement vertical propre + 2 lignes max ===== */
@media (min-width: 768px) and (max-width: 1199px) {
/* Chaque item devient un "bloc" de hauteur identique */
#_desktop_top_menu .top-menu > li { display: flex; }
#_desktop_top_menu .top-menu > li > a{
height: 32px; /* IMPORTANT : aligne verticalement */
line-height: 1; /* Ă©vite l'effet "haut" */
padding: 0 8px; /* remplace ton padding vertical 6px */
display: flex;
align-items: center;
}
/* 2 lignes max = 2 * 32px + gap (6px) */
#_desktop_top_menu .top-menu{
row-gap: 6px;
max-height: calc(32px * 2 + 6px);
overflow: hidden;
}
}
/* ===== PADDING + LOGO/PANIER SAFE ===== */
@media (min-width: 768px) and (max-width: 1199px) {
#header .header-top .container{
padding-left: 16px;
padding-right: 16px;
}
#header .header-top, {
height: 64px;
}
#_desktop_logo img{
max-height: 56px; /* Ă©vite la coupe visuelle */
width: auto;
display: block;
}
.nav-hooks{
padding-left: 6px;
margin-right: 2px; /* Ă©vite ras-bord */
}
}
/* ===== SEARCH : hauteur stable (Ă©vite "plein header") ===== */
@media (min-width: 768px) and (max-width: 1199px) {
#search_widget form{
height: 38px;
display: flex;
align-items: center;
}
#search_widget input[type="text"]{
height: 30px;
line-height: 30px;
padding-top: 0;
padding-bottom: 0;
}
}
{
.col-md-10 { width: 75%; } .col-md-2, .col-md-3 { width: 25%; }
}
/* ===== Fix : "Contact" coupé entre 1200 et 1399px ===== */
@media (min-width: 1200px) and (max-width: 1399px) {
/* 1) LibÚre de la place au menu en réduisant un peu la search */
#search_widget{
flex: 0 0 300px !important;
max-width: 300px !important;
}
/* 2) Menu un poil plus compact (juste sur cette tranche) */
#_desktop_top_menu .top-menu{
column-gap: 0px !important;
}
#_desktop_top_menu .top-menu > li > a{
padding: 0 10px !important; /* si tu es à 14px, ça déborde vite */
}
/* 3) Sécurité anti "coupure" si un overflow traßne */
#_desktop_top_menu,
#_desktop_top_menu .top-menu{
overflow: visible !important;
}
#header .header-top .menu { padding-left: 0px;}
}
@media (min-width: 541px) {
.mobile-logo img { height:56px; width: auto;}}
.mobile-search-toggle,
.mobile-search-toggle:hover,
.mobile-search-toggle:active,
.mobile-search-toggle:focus {
background: transparent;
border: none;
outline: none;
box-shadow: none;
-webkit-tap-highlight-color: transparent;
}
/* ===============================
HEADER + SEARCH MOBILE UNIFIĂS
=============================== */
@media (max-width: 767px) {
/* Bloc parent unique */
.header-mobile-unified {
position: sticky;
top: 0;
z-index: 1000;
background: linear-gradient(145deg,
rgba(0,0,0,0.22) 0%, /* noir lisible immédiat */
rgba(0,0,0,0.16) 6%,
rgba(64,78,96,1) 32%, /* gris bleuté principal plus tÎt */
rgba(64,78,96,1) 65%,
rgba(0,0,0,0.03) 100%
);
}
/* Header : fond transparent car porté par le parent */
.header-mobile-unified #header,
.header-mobile-unified .header-top {
background: transparent !important;
}
/* Search mobile */
#mobile-search {
background: transparent !important;
padding: 6px 12px 10px;
}
/* Barre de recherche elle-mĂȘme */
#mobile-search #search_widget {
max-width: 92%;
margin: 0 auto;
}
#mobile-search input[type="text"] {
height: 38px;
border-radius: 6px; font-size: 90%;
}
}
#header,
#mobile-search {
background: transparent !important;
}
.header-top::before,
.header-top::after {
content: none !important;
display: none !important;
}
@media (max-width: 767px) {
#mobile-search {
margin-top: 0 !important;
padding-top: 6px;
background: transparent !important;
}
#mobile-search .search-widgets,
#mobile-search form {
background: transparent !important;
}
}
/* â
Continuité : 1 seul background (header + search) */
@media (max-width: 767px){
/* Le background UNIQUE est porté par le wrapper */
.header-mobile-unified{
background: linear-gradient(
145deg,
rgba(0,0,0,0.40) 0%, /* nettement plus sombre Ă gauche */
rgba(0,0,0,0.30) 6%,
rgba(64,78,96,1) 32%,
rgba(64,78,96,1) 65%,
rgba(0,0,0,0.12) 100%
); !important;
}
/* Tout ce qui est dedans doit ĂȘtre transparent (sinon â2 blocsâ) */
.header-mobile-unified #header,
.header-mobile-unified #header .header-top,
.header-mobile-unified #header .container,
.header-mobile-unified #header .row,
.header-mobile-unified #header .mobile-header,
.header-mobile-unified #mobile-search{
background: transparent !important;
}
/* Si tu as un overlay/::before sur #header, il casse la continuité */
.header-mobile-unified #header::before{
content: none !important;
background: none !important;
}
}
/* =========================================================
Ombre du header : OK fermé / continuité parfaite ouvert
(nécessite que #mobile-search soit dans .header-mobile-unified)
========================================================= */
@media (max-width: 767.98px) {
/* Quand la recherche mobile est OUVERTE :
- on enlĂšve l'ombre du #header (sinon "ligne" entre 2 blocs)
- on met la mĂȘme ombre sur le conteneur unifiĂ© */
.header-mobile-unified:has(#mobile-search.is-open) {
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .11);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .11);
}
.header-mobile-unified:has(#mobile-search.is-open) #header {
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
/* Sécurité : aucune bordure/ombre parasite sur le bloc search */
.header-mobile-unified:has(#mobile-search.is-open) #mobile-search {
-webkit-box-shadow: none !important;
box-shadow: none !important;
border-top: 0 !important;
margin-top: 0 !important;
}
}
#header {
position: sticky;
top: 0;
z-index: 1000;
will-change: transform, height;
backface-visibility: hidden;
}
.col-md-10.hidden-sm-down.header-top-right.d-flex.align-items-center {
padding-left: 0px;
padding-right: 30px;
}
@media (max-width: 430px) {
.mobile-header {
padding-left: 10px; padding-right: 10px; }}
@media (min-width: 431px) and (max-width: 767px) {
.mobile-header {
padding-left: 30px; padding-right: 30px; }}
@media (min-width: 1200px) {#header svg:not(:root) {
width: 30px;
height: 30px;}}
@media (max-width: 767px) {
#header svg:not(:root) {color: white; fill: white;}}
/* FORCER lâaffichage de la croix */
#mobile-search .material-icons.clear {
display: inline-flex !important;
align-items: center;
justify-content: center;
}
/* Tout sur UNE ligne (Ă©vite le retour ligne) */
#mobile-search .search-widgets form {
display: flex;
align-items: center;
}
#search_widget .search-icon svg {
color: #6B7280; fill: #6B7280;
}
#search_widget input[type="text"],
#search_widget input::placeholder {
font-size: 0.85rem;
}
.header-mobile-unified {
position: sticky;
top: 0;
z-index: 10000;
}
/* Fix anti-saut compteur panier */
.cart-products-count {
display: inline-block;
min-width: 2ch; /* réserve la place pour 2 caractÚre */
text-align: center;
white-space: nowrap;
}
@media (min-width: 768px) and (max-width: 991px) {
#search_widget input[type="text"], #search_widget input::placeholder
{ font-size: 0.62rem;
}}
/* =====================================================
FIX DOUBLON SEARCH APRES ROTATION (iPhone landscape)
===================================================== */
@media (min-width: 768px) {
.mobile-search-accordion,
#mobile-search,
#search-wrapper-mobile {
display: none !important;
max-height: 0 !important;
opacity: 0 !important;
overflow: hidden !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
#search_widget form input[type="search"], #search_widget form input[type="text"]
{ padding: 5px 33px;}
#header svg:not(:root) { width: 20px; height: 20px;}
}
@media (min-width: 992px) and (max-width: 1199px) {
#search_widget form input[type="search"], #search_widget form input[type="text"] {
padding: 5px 40px;}
#header svg:not(:root) { width: 27px; height: 27px;}
}
/* =========================================
FIX SCROLL HORIZONTAL â SEARCH DESKTOP
Actif UNIQUEMENT Ă partir de 768px
========================================= */
@media (min-width: 768px) {
/* 1ïžâŁ Le form ne doit JAMAIS dĂ©border */
#search_widget form {
display: flex;
align-items: center;
width: 100%;
max-width: 100%;
overflow: hidden; /* đ„ empĂȘche tout dĂ©passement */
}
/* 2ïžâŁ Tous les enfants respectent la largeur */
#search_widget form > * {
box-sizing: border-box;
max-width: 100%;
}
/* 3ïžâŁ INPUT search = source n°1 du bug */
#search_widget input[type="search"] {
flex: 1 1 auto;
min-width: 0; /* đ„ CRITIQUE */
width: 100%;
max-width: 100%;
}
/* 4ïžâŁ IcĂŽne loupe SVG */
#search_widget .search-icon {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* 5ïžâŁ IcĂŽne clear (neutralise margin nĂ©gatif desktop) */
#search_widget .material-icons.clear {
flex: 0 0 auto;
margin: 0 !important; /* â supprime le -10px desktop */
cursor: pointer;
}
/* 6ïžâŁ SĂ©curitĂ© navigateur (Safari / Chrome) */
#search_widget input[type="search"]::-webkit-search-decoration,
#search_widget input[type="search"]::-webkit-search-cancel-button {
display: none;
}
/* 7ïžâŁ SĂ©curitĂ© ultime (au cas oĂč un thĂšme injecte autre chose) */
#search_widget {
max-width: 100%;
overflow-x: hidden;
}
}
/* =========================================
FIX "PLACEHOLDER JUMP" â SEARCH DESKTOP
Stabilise la typo au chargement
========================================= */
@media (min-width: 992px) {
/* Input search : typo verrouillée */
#search_widget input[type="search"] {
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
font-size: 14px; /* đ taille FIXE */
line-height: 1.4; /* đ Ă©vite le reflow */
font-weight: 400;
}
/* Placeholder : EXACTEMENT la mĂȘme typo */
#search_widget input[type="search"]::placeholder {
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
font-size: 14px;
line-height: 1.4;
font-weight: 400;
opacity: 0.65; /* premium, stable */
}
/* Safari / Chrome */
#search_widget input[type="search"]::-webkit-input-placeholder {
font-size: 14px;
line-height: 1.4;
}
/* Firefox */
#search_widget input[type="search"]::-moz-placeholder {
font-size: 14px;
line-height: 1.4;
}
}
@media (min-width: 768px) and (max-width: 991px) {
/* Input search : typo verrouillée */
#search_widget input[type="search"] {
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
font-size: 12px; /* đ taille FIXE */
line-height: 1.4; /* đ Ă©vite le reflow */
font-weight: 400;
}
/* Placeholder : EXACTEMENT la mĂȘme typo */
#search_widget input[type="search"]::placeholder {
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
font-size: 12px;
line-height: 1.4;
font-weight: 400;
opacity: 0.65; /* premium, stable */
}
/* Safari / Chrome */
#search_widget input[type="search"]::-webkit-input-placeholder {
font-size: 12px;
line-height: 1.4;
}
/* Firefox */
#search_widget input[type="search"]::-moz-placeholder {
font-size: 12px;
line-height: 1.4;
}
}
/* =====================================================
SEARCH BAR â LARGEUR FIXE + ICĂNES ABSOLUTES
ZĂRO REFLOW / CROIX TOUJOURS VISIBLE
===================================================== */
@media (min-width: 768px) {
/* đ Largeur FIXE par breakpoint */
#search_widget,
#search_widget form {
position: relative;
}
}
/* === 768 â 991 === */
@media (min-width: 768px) and (max-width: 991px) {
#search_widget,
#search_widget form {
width: 360px;
}
#search_widget input[type="search"] {
width: 100%;
padding-left: 44px; /* place pour la loupe */
padding-right: 44px; /* place pour la croix */
}
}
/* === 992 â 1199 === */
@media (min-width: 992px) and (max-width: 1199px) {
#search_widget,
#search_widget form {
width: 420px;
}
#search_widget input[type="search"] {
width: 100%;
padding-left: 44px;
padding-right: 44px;
}
}
/* === 1200 â 1399 === */
@media (min-width: 1200px) and (max-width: 1399px) {
#search_widget,
#search_widget form {
width: 480px;
}
#search_widget input[type="search"] {
width: 100%;
padding-left: 44px;
padding-right: 44px;
}
}
/* === â„ 1400 === */
@media (min-width: 1400px) {
#search_widget,
#search_widget form {
width: 520px;
}
#search_widget input[type="search"] {
width: 100%;
padding-left: 44px;
padding-right: 44px;
}
}
/* === ICĂNES â POSITION ABSOLUE, JAMAIS MASQUĂES === */
@media (min-width: 768px) {
#search_widget .search-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
}
#search_widget .material-icons.clear {
position: absolute;
right: 12px;
transform: translateY(-50%);
cursor: pointer;
z-index: 2;
}
}
@media (min-width: 1200px) {
#search_widget .material-icons.clear {
top: 20%; }
}
@media (min-width: 768px) and (max-width: 1199px) {
#search_widget .material-icons.clear {
top: 32%; }
}