/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */


  /* A utiliser si pas Bootstrap - old font

  @font-face{
  font-family: "Montserrat";
  src:url(../font/Montserrat-VariableFont_wght.ttf)format("truetype");
  font-style: normal;
 }

 @font-face{
 font-family: "Rubik";
 src:url(../font/Rubik-VariableFont_wght.ttf)format("truetype");
 font-style: normal;
}
*/

/* new font charge - optim seo gpt */

/* Montserrat 400 */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Montserrat 700 */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Rubik 400 */
@font-face {
  font-family: "Rubik";
  src: url("../fonts/Rubik-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Rubik 500 */
@font-face {
  font-family: "Rubik";
  src: url("../fonts/Rubik-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}




 :root {
     --primary-bg-color: #5E525A;
     --secondary-bg-color:#FFB560;
     --terciary-bg-color:#AC9894;
     --quaternary-bg-color:#EDE9E6;
     --primary-font: 'Montserrat', Helvetica, sans-serif;
     --secondary-font: 'Quicksand','Poppins', Helvetica, sans-serif;

     --white:#ffffff;
     --black:#2b2927; /* old : #2f2c2c;*/


     --border-radius-img: 12px;
  }

  /* Classes utilisant les variables */

.bg-primary {
  background-color: var(--primary-bg-color) !important;
}

.bg-secondary {
  background-color: var(--secondary-bg-color) !important;
}

.bg-tertiary {
  background-color: var(--tertiary-bg-color) !important;
}

.bg-quaternary {
  background-color: var(--quaternary-bg-color) !important;
}


  /*

  --primary-bg-color: #5E525A;
  --primary-text-color: #ffffff;
  --secondary-bg-color:#FFB560;
  --secondary-text-color: #ffffff;
  --terciary-bg-color:#AC9894;
  --terciary-text-color: #ffffff;
  --quaternary-bg-color:#EDE9E6;
  --quaternary-text-color: #ffffff;
--body-text-color: #666666;
  --body-background-color: #F8F6F4;
--header-nav-text-color: #ffffff;
  --header-nav-bg-color: #856AA0;
--header-menu-text-color: #5F2D6D;
  --header-background-color: #F8F6F4;
--header-top-text-color: #ffffff;
--header-top-texthvr-color: #856AA0;
--header-top-bg-color: #5F2D6D;
  --price-color:#A96380;
--border-color: #5F2D6D;
--secondary-border-color: #A96380;
--main-title-color: #A96380;
--product-title-color: #A96380;
--footer-news-bg-color: #111111;
--footer-news-title-color: #A96380;
--footer-news-desc-color: #aaaaaa;
--footer-title-color: #A96380;
--footer-link-color: #666666;
--footer-link-hvr-color: #111111;
--primary-font: 'Quicksand:wght@500&display=swap', Helvetica, sans-serif;
--secondary-font: 'Poppins', Helvetica, sans-serif;

  */


body{
      font-family: "Rubik";
      color: var(--black);
      white-space: normal;
      overflow-wrap: normal;
      /*word-break: break-word;*/
      word-break: auto-phrase;
      hyphens: auto;
}

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .h1,
  .h2,
  .h3,
  .h4,
  .h5,
  .h6{
    font-family: "Montserrat";
    color: var(--primary-bg-color);
  }
  h2,
  .h2 {
      color: var(--primary-bg-color);
      margin: 2.5rem 0 1rem 0;
  }
  h3,
  .h3 {
      color: var(--primary-bg-color);
      margin: 1.5rem 0 0.5rem 0;
  }
  h4,
  .h4 {
     color: var(--primary-bg-color);
     font-weight: inherit;
  }

  #product h1,
  .h1 {
  padding: 1rem 0;
  }

  .btn {
      border-radius: var(--border-radius-img);
      white-space: normal;
      height: auto;
  }

  .btn-primary, .btn-primary:hover {
    background-color:var(--secondary-bg-color) !important;
    color: var(--primary-bg-color) !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: break-spaces;
  }
  .btn-comment {
    background-color: #899ea5 !important;
    color: var(--white) !important;
    font-size:small;
}
  .bg-secondary{
      background-color:var(--primary-bg-color) !important;
  }
  .bg-terciary{
      background-color:var(--terciary-bg-color) !important;
  }
  .bg-quaternary{
      background-color:var(--quaternary-bg-color) !important;
  }
  .bg-fond{
      background:var(--body-background-color) !important;
  }

 a {
     background-color: transparent;
     color : var(--secondary-bg-color);
 }

 a:hover {
     color : var(--primary-bg-color);
}

  .img-center {
   display: block;
   margin: 0 auto;
 }

 b, strong {
    font-weight: bolder;
    font-weight: 600;
}

 img {
    border-radius: var(--border-radius-img);
    /*  aspect-ratio: 4 / 3; */
}


 .tabs .nav-tabs .nav-link.active, .tabs .nav-tabs .nav-link:hover {
    border-bottom: var(--primary-bg-color) 3px solid;
}

.tabs .nav-tabs .nav-link.active {
    color: var(--primary-bg-color) !important;
}

.mx-auto{
  text-align: center;
  margin 0 auto;
}

 /* Body DIV */

 #header{ background: #EDE9E6 !important; }

 #header a:hover {
    color: var(--secondary-bg-color) !important;
}

 #wrapper {
   background: inherit;
   background-image: url(../img/bg-wrapper.jpg);
   background-position: top;
   background-repeat: repeat-x;
   padding-top: 0;
 }


 /*  Header */

 #header .logo {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

#header .header-top {
    padding: 0;
}

.page-index #header .header-top {
    padding: 1.25rem 0 0 0;
}

#header .row {
    margin-left: 1rem;
}

.header-top .container{
  background-image: url(../img/bg-header.png);
  background-position: bottom left;
  background-repeat: no-repeat;
  background-size: 550px;
  padding: 0.6rem 0 2rem 0;
}

.page-index  .header-top .container{
  padding: 0 0 2.4rem 0;
}

#block_myaccount_infos .myaccount-title a, #header a, #wrapper .breadcrumb li a, .block-contact .block-contact-title, .block-contact .navbar-toggler .material-icons, .linklist .blockcms-title a {
    color: var(--black);
}

#header .header-nav .cart-preview.active {
    background: var(--primary-bg-color);
}
#header .header-nav {
    background: var(--quaternary-bg-color);
    white-space: nowrap;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}
#header .header-nav #menu-icon {
    margin: 0 1rem 0 0;
}

 /*  breadcrumb */
#wrapper .breadcrumb{
      background-color:var(--primary-bg-color) !important;
      padding: 0.5em 3em 0.5em 1em ;
      display: inline-block;
      margin-left: -15px;
      font-weight: 600;
      font-size: 10px;
  }

#wrapper .breadcrumb li a{
  color: var(--white);
}

#wrapper .breadcrumb li:last-child {
    color: var(--terciary-bg-color) !important;
}

 /* Body general */

    /* Remplace le jaune presta */
.has-discount .discount, .product-flags li.product-flag.discount, .product-flags li.product-flag.discount-amount, .product-flags li.product-flag.discount-percentage {
    background-color: var(--primary-bg-color) !important;
}

.has-discount .page-content.page-cms ul, .has-discount p, .has-discount.product-price, .page-content.page-cms .has-discount ul {
    color: var(--primary-bg-color);
}

  /* Remplace le bleu presta */


  /* footer  */
.block_newsletter .btn-primary, .block_newsletter .btn-primary:hover {
  background-color: var(--primary-bg-color) !important;
  color: var(--white) !important;
}

#footer {
  background-color: var(--quaternary-bg-color) !important;
}

#footer .block_newsletter{
  background-color: var(--quaternary-bg-color) !important;
}

#footer .footer-container {
  background-color: var(--primary-bg-color) !important;
}

#footer .footer-container a, #footer .footer-container p, #footer .footer-container #contact-infos {
  color: white;
}


/* home - accueil  */

#index h2, #index .h2, #index h3, #index .h3 {
  text-align: center;
}

#index #carousel h2 {
  text-align: left;
}


    /* anim text */
#anim-set{
  font-family: 'Rubik';
  text-align:center;
  font-weight: 900;
  font-size: 32px;
  margin: 4rem 0rem 1rem 0rem;
  padding: 0;
  line-height: 40px;
  color: var(--primary-bg-color) !important;
  overflow:hidden;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
  -webkit-transform: translate3d(0,0,0);
}

#anim-set div { display: inline-block; overflow: hidden; white-space: nowrap; }
#anim-set div:first-of-type { animation: showup 7s infinite; }
#anim-set div:last-of-type { width: 0; animation: reveal 7s infinite; }
#anim-set div:last-of-type span { margin-left: -460px; animation: slidein 7s infinite; }

@keyframes showup { 0%,100% { opacity:0; } 20%,80% { opacity:1; } }
@keyframes slidein { 0%,20% { margin-left:-800px; } 35%,100% { margin-left:0; } }
@keyframes reveal { 0%,100% { opacity:0;width:460px;} 20%,80% { opacity:1;width:0;} 30% { width:460px; } }

/* carousel-inner  */

#carousel {
    margin: 1rem 0 1.5rem 0;
    background: var(--primary-bg-color) !important;
}

Slider caroussel
#index .carousel {
  height: 680px !important; /* ou la taille que vous souhaitez */
  overflow: hidden;
}

#index .carousel img {
  height: 100%;
  object-fit: cover; /* Pour que l’image remplisse le cadre sans déformation */
}

#carousel figure {
  height: 100%;
  width: 100%;
}

#carousel .carousel-inner {
  height: 100% !important;
}

.carousel .carousel-item .caption .display-1 {
  color: var(--white) !important;
}

.carousel .carousel-item .caption .caption-description{
  color: var(--secondary-bg-color) !important;
}

.carousel .carousel-item .caption {
    max-width: inherit;
}

/* Bloc double choix accueil personnalisé */
.bloc-custom-choice {
  min-height: 600px;
  display: flex;
  justify-content: right;
  align-items: center;
  padding: 2rem;
  text-align: center;
  font-family: var(--primary-font);
  color : var(--terciary-bg-color) !important;
  border-radius: var(--border-radius-img);
  background: url(../img/custom-block-1.jpg);
  background-size: cover;
  margin-bottom: 2rem;
}

.bloc-custom-choice:nth-child(even) {
  background: url(../img/custom-block-2.jpg);
  background-size: cover;
  justify-content: left;
  background-position: right;
}

.bloc-custom-choice-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.bloc-custom-choice-content h3, .bloc-custom-choice-content span{
  color : var(--white) !important;
}

.bloc-custom-choice-content .btn {
  background: var(--secondary-bg-color) !important;
  color: var(--primary-bg-color) !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: break-spaces;
}

/* home bloc txt pro */
.info-home {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}

.info-home .material-icons {
font-size: 82px;
background-color: var(--quaternary-bg-color) !important;
color: var(--secondary-bg-color) !important;
border-radius: 50%;
padding-top: 1rem;
}

.txt-pro-home {
  text-align: center;
  padding: 1rem 1rem 2rem 1rem;
  background: var(--quaternary-bg-color) !important;
  border-radius: var(--border-radius-img);
  margin-bottom: 1rem;
}


/* Supprime tout éventuel padding/margin de Bootstrap .row */
.bloc-custom-choice_row {
  display: flex;
  gap: 24px; /* 👈 Gouttière entre les colonnes
  flex-wrap: wrap;*/
}

.no-bootstrap-gutter{
  display: flex;
  gap: 24px; /* 👈 Gouttière entre les colonnes*/
  flex-wrap: wrap;
}

/* Assure que chaque colonne prend bien 50%
.no-bootstrap-gutter .col-md-6 {
  flex: 0 0 calc(50% - 12px); *//* 24px de gap divisé entre les deux côtés
  max-width: calc(50% - 12px);
}
*/

/* Home - bloc à la une  */
.horizontal-gallery {
  overflow-x: auto;
  white-space: nowrap;
  padding: 10px;
}

.thumbnail-item {
  padding: 0 10px;
  display: inline-block;
  float: none;
}

.thumbnail img {
  width: 100%;
  height: auto;
}

.home-add {
    margin: 2rem 0;
}

.home-add h2{
  padding-top: 2rem;
}

.home-une{
background: var(--terciary-bg-color) !important;
border-radius: var(--border-radius-img);
}
.home-deux{
  background: var(--quaternary-bg-color) !important;
  border-radius: var(--border-radius-img);
}
.home-trois{
  background: var(--terciary-bg-color) !important;
  border-radius: var(--border-radius-img);
}
.home-quatre{
  background: var(--quaternary-bg-color) !important;
  border-radius: var(--border-radius-img);
}
.home-cinq{
}

.graphisme-prod-home {
  display: flex;
  background-color: var(--terciary-bg-color) !important;
  padding: 3rem;
  margin: 1rem auto;
  border-radius: var(--border-radius-img);
  align-items: stretch; /* Permet aux colonnes d'avoir la même hauteur */
}

.img-graphisme{
  text-align: center;
}

/* lien all produits modules */
#products .all-product-link, .featured-products .all-product-link, .product-accessories .all-product-link {
    margin-top: 0rem;
}

/* lien all produits modules */
.home-add .all-product-link {
    margin-top: 1rem;
}

.featured-products .h2, .featured-products h2{
  text-transform: inherit;
}

/* Conteneur scrollable horizontal */
.horizontal-gallery {
    overflow-x: auto;        /* scroll horizontal */
    white-space: nowrap;     /* empêche le wrapping */
    scroll-behavior: smooth; /* défilement fluide */
    padding: 0 0 1.5rem 0;
}

/* Chrome, Edge, Safari */
.horizontal-gallery::-webkit-scrollbar {
    height: 6px; /* hauteur de la scrollbar horizontale */
    width: 12px;  /* largeur si vertical (utile si vertical scrollbar aussi) */
}

.horizontal-gallery::-webkit-scrollbar-track {
    background: transparent !important; /* fond de la barre */
    border-radius: 6px;
    margin:  22rem;
}
.horizontal-gallery::-webkit-scrollbar-thumb {
    background-color: var(--primary-bg-color) !important; /* couleur du curseur */
    border-radius: 6px;
    /* border: 3px solid #f0f0f0;  marge autour du curseur */
}

.horizontal-gallery::-webkit-scrollbar-thumb:hover {
    background-color: #0056b3; /* survol du curseur */
}

/* Chevron style */
.next-slide-container {
  padding: 0.5rem 1rem;
  border-radius: 6px;
  display: inline-flex; /* aligne les éléments horizontalement */
  cursor: pointer;
}

.double-chevron {
  font-size: 2rem;
  font-weight: bold;
  color: #fff;
}

.tout-voir {
  font-size: 1rem;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
}

.tout-voir:hover {
  text-decoration: underline;
}

/* Supprime les marges si besoin */
.row.no-gutters {
  margin-left: 0;
  margin-right: 0;
}
.row.no-gutters > [class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}


/* category  */
#subcategories ul li {
  width: calc(100% / 3 - 20px);
}

#subcategories .subcategory-heading {
  margin-top: 0;
}

#subcategories ul li .subcategory-image a {
  border: 0px;
}

#category-description{
  padding: 0 1rem;
}
#category-description h2{
 margin: 1rem 0 2rem 0;
}
#category-description h3{
 margin: 1rem 0 2rem 0;
}

.block-category .block-category-inner #category-description strong {
    font-weight: 600;
    color: var(--black) !important;
}

.block-category .category-cover {
 margin: 1rem 0 2rem 0;
}

.product-miniature, .product-miniature .product {
  display: inherit;
}

#subcategories ul li:hover{
  color: var(--secondary-bg-color) !important;
}

.product-miniature .product-title {
  text-transform: uppercase;
  font-family: 'Rubik';
  margin: 1rem;
}

.category-enfant .product-miniature .product-title a {
    font-size: 1.3rem;
    margin-top: 1rem;
    font-weight: 600;
    color: var(--secondary-bg-color) !important;
}

.product-miniature .product-title a {
  font-weight: 400;
  color: var(--secondary-bg-color) !important;
}

.block-category .block-category-inner .category-cover img {
    width: 210px;
    height: 149px;
}

.block-category {
    margin-bottom: 1.563rem;
    padding-bottom: 1.563rem;
}


/* product page  */
#product #content {
    max-width: 100%;
}

.page-content.page-cms ul {
    list-style: initial;
}

.page-content.page-cms ul, p {
    color: #595758;
}

#graphisme-prod{
  background-color: var(--terciary-bg-color) !important;
  margin-top: -12rem;
  padding: 5rem 3rem 7rem 3rem;
  align-items: stretch; /* Permet aux colonnes d'avoir la même hauteur */
}

.graph-prod h3{
  color: var(--secondary-bg-color) !important;
}

#graph-prod{
    text-align: center;
    position: relative;
    transform: translate(0%, -15%);
    z-index: 1000;
}

#graph-prod-achat{
    text-align: center;
    position: relative;
    margin: 1rem 0;
    z-index: 1000;
}

.divider-graph-top{
  height: 100px;
  top: -98px;
  margin-top: 5px;
  position: relative;
  rotate: 180deg;
}

#product-modal .modal-content .modal-body, #product .modal-body figure, #product .modal-content, #product modal-dialog {
}

#product-modal .modal-content .modal-body .product-images img{
  width: 140px;
  height: 99px;
}

#product-modal .modal-content .modal-body .product-cover-modal, .product-cover img {
  border-radius: inherit;
  margin-bottom: 1rem;
}

#product-modal .modal-content .modal-body .image-caption {
  background: var(--secondary-bg-color) !important;
  color: var(--primary-bg-color) !important;
  text-transform: uppercase;
  font-family: 'Rubik';
  text-align: center;
  font-weight: 500;
}

#product-modal .modal-content .modal-body .arrows .arrow-down {
  bottom: -5rem;
}

.declinaisons-count{
  margin-top: 2rem;
  cursor: default;
  background-color: #5e525a !important;
}

#product .product-prices{
  display: flex;
}
#product .current-price{
  margin: 0 10px 0 0;
}

#product-cde {
  background: var(--terciary-bg-color) !important;
  margin: 1rem 0;
  padding: 1rem 0 2rem 0;
  display: inline-block;
  border-radius: var(--border-radius-img);
}

.media-list, ul {
    padding-left: 2rem;
    list-style: disc;
}

.blockreassurance_product {
  display: flex;
  justify-content: space-between;
}

.blockreassurance_product .item-product{
  height: 100%;
  margin-right: 1rem;
}

#checkout .blockreassurance_product {
  display: block;
}

.product-actions .product-add-to-cart {
  margin-top: 4rem;
}

.product-actions .product-add-to-cart .btn {
  white-space: inherit;
  height: 100%;
}

.product-add-to-cart {
  background: var(--quaternary-bg-color) !important;
  max-resolution: 1px;rem;
  padding: 2rem;
  border-radius: var(--border-radius-img);
}

.block-social ul, .product-quantity {
  display: grid;
}

    /* suppr btn quantité (dans product perso si besoin = .product-id-category-10) */
.product-quantity .input-group-btn-vertical{
  display:none;
}

.product-quantity #quantity_wanted {
    width: 5rem;
    pointer-events: none;
    background-color: var(--secondary-bg-color) !important;
    border-radius: var(--border-radius-img);
    border: 0px;
    text-align: center;
}

      /* dividers graph prod */

.custom-shape-divider-top-1743571751 {
    position: relative;
    top: 1px;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    margin-top: -3rem;
}

.svg-graph-1{
  height: 47px;
  width: 100%;
  rotate: 180deg;
}

.custom-shape-divider-top-1743571751 .shape-fill {
   fill: #fff;
}

 /* menu header hamburger desktop - Adgence */

.header-banner{
  background-color: var(--primary-bg-color) !important;
  color: var(--white) !important;
 }

.menu-burger{
  margin-left: 3rem;
}

.burger-icon {
  display: inline-block;
  vertical-align: middle;
  margin-right:0.5rem;
}

.burger-icon_menu {
  display:inline-block;
  vertical-align:middle;
  font-size: larger;
  margin-top: 3px;
}

.burger-icon-xs_menu {
  display:inline-block;
  vertical-align:middle;
  font-size: small;
}

#ttcmsheader{
  margin: 0 auto;
}

#ttcmsheader p {
  display: inherit;
}

#ad-banner{
  display: flex;
}

 /* Sidenav menu */
  #header .menu, #header .menu>ul>li {
    display: block;
  }

 .sidenav {
   height: 100%;
   width: 450px;
   position: fixed;
   z-index: 1;
   top: 0;
   left: -450px;
   background-color: #fff;
   padding-top: 60px;
   transition: left 0.5s ease;
 }

 #top-menu{
   margin: 1rem 0 3rem 0;
 }

 #mySidenav .logo{
   max-width: 80%;
 }

 #mySidenav #search_widget{
   margin: 0 0 3rem 0;
 }

 /* Sidenav menu links */
 .sidenav a {
   padding: 8px 8px 8px 32px;
   text-decoration: none;
   font-size: 20px;
   display: block;
   transition: 0.3s;
 }

 #header #mySidenav a[data-depth="0"] {
     border-bottom: 1px solid #f6f6f6;
     border-top: 1px solid #f6f6f6;
 }

 #header .top-menu a, #header .header-top a[data-depth="0"]  {
   color: var(--primary-bg-color);
 }

  #header .top-menu a:hover, #header .header-top a[data-depth="0"]:hover  {
    color: var(--secondary-bg-color);
  }

 .sidenav ul {
   list-style-type: none;
   padding: 0;
   margin: 0;
 }

 /* Active class */
 .sidenav.active {
   left: 0;
 }

 /* Close btn */
 .sidenav .close {
   position: absolute;
   top: 0;
   right: 25px;
   font-size: 36px;
   opacity: .7;
 }

 a#sidenav.close {
  color: #000;
 }

 /* Icône burger */
 .burger-icon span {
   display: block;
   width: 35px;
   height: 5px;
   background-color: var(--primary-bg-color);
   margin: 6px 0;
 }

 .page-index #header .logo {
  max-width: 120%;
 }

 .page-index .burger-icon span{
  margin: 6px 0 0 3rem;
 }


 /* overlay menu blanc */
 .overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(103, 103, 103, 0.7); /* Blanc transparent */
     display: none; /* Masqué par défaut */
     z-index: 0; /* Au-dessus du contenu */
 }

  /* ss menu dropdown boostrap */
  /* Empêche le dropdown d'être en position absolue
  #mySidenav .submenu {
    position: static !important;
    display: block;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease;
    padding-left: 1rem;
    margin-top: 0;
  } */

  /* On cible le menu latéral - scroll hauteur */
  #mySidenav {
    height: 100%;            /* Prend toute la hauteur de l’écran */
    overflow-y: auto;        /* Ajoute un scroll vertical si besoin */
    -webkit-overflow-scrolling: touch; /* Scroll fluide sur mobile */
  }
  /* Évite que le contenu dépasse horizontalement */
  #mySidenav ul {
    overflow-x: hidden;
  }
  /* masque les chevrons */
.menu .material-icons{
    display : none;
  }

  /* Empêche le dropdown d'être en position absolue */
  #mySidenav .submenu {
    position: static !important;
    display: block;
    overflow: initial;
    transition: max-height 0.3s ease;
    padding-left: 1rem;
    margin-top: 0;
  }

  /* Quand ouvert, le sous-menu prend sa hauteur naturelle */
  #mySidenav .submenu.show {
    max-height: 1000px; /* valeur suffisante pour la hauteur du sous-menu */
  }

  .top-menu a:not([data-depth="0"]) {
      padding-left: 1.625rem;
      font-size: medium;
  }

  .top-menu a[data-depth="0"] {
    padding: .5rem;
  }

  .top-menu[data-depth="1"] {
    margin: inherit;
  }

  .top-menu a[data-depth="1"], .top-menu a[data-depth="2"] {
      padding: 0 .625rem .625rem 1rem;
  }
  /* Chevron visuel */
  #mySidenav .menu-link .chevron {
    transition: transform 0.3s ease;
  }

  /* Chevron tourné */
  #mySidenav .menu-link.collapsed .chevron {
    transform: rotate(-90deg);
  }

  .submenu-wrapper {
  position: static !important;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.submenu-wrapper.show {
  max-height: 1000px;
}

.dropdown-item {
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
}


 /* Tableau discount product style */
.product-discounts .table {
 word-break: auto-phrase;
 hyphens: auto;
}

/* Effet au survol */
.js-add-to-cart-discount:hover {
    background-color: var(--terciary-bg-color) !important;
    cursor: pointer;
}

/* Lorsqu'une ligne est cliquée, elle devient jaune */
.js-add-to-cart-discount.selected {
    background-color: var(--secondary-bg-color) !important;
}

.blockcart{
  display: none;
}

#checkout .header-banner #_desktop_user_info {
  display: flex;
  justify-content: flex-end; /* aligne à droite */
  align-items: center;
  gap: 10px;             /* espace entre les éléments */
}

#checkout .header-banner #_desktop_user_info, #_desktop_user_info a {
  color:  var(--terciary-bg-color) !important;
}

#_desktop_user_info a:hover {
  color:  var(--secondary-bg-color) !important;
}

.share-buttons .linkedin { background: #0077b5; color: #fff; padding: 5px; border-radius: 3px; }
.share-buttons .instagram { background: #e1306c; color: #fff; padding: 5px; border-radius: 3px; }


/**** footer  *******/
.footer-container h3, .footer-container .h3 {
    color: var(--terciary-bg-color) !important;
}


/***** btn radio, select et déroulant facon bbostrap *******/
/* --- SELECT (liste déroulante) --- */
.product-variants select.form-control {
  display: flex;
  width: 100%;
  padding: 0.6rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.5rem; /* arrondi */
  transition: border-color 0.2s, box-shadow 0.2s;
}

.product-variants select.form-control:focus {
  border-color: var(--terciary-bg-color) !important;
  outline: 0;
}

/* --- RADIO (input) --- */
.product-variants .input-radio {
  display: none; /* cacher le vrai bouton */
}

.product-variants .radio-label {
  display: inline-block;
  padding: 0.5rem 1rem;
  margin: 0.2rem;
  font-size: 0.95rem;
  border: 1px solid #ced4da;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  background-color: #fff;
}

.product-variants .input-radio:checked + .radio-label {
  background-color: var(--terciary-bg-color) !important;
  color: #fff;
  border-color: var(--terciary-bg-color) !important;
}

.product-variants .radio-label:hover {
  border-color: var(--terciary-bg-color) !important;
}

.form-control:focus {
    outline:
}

/***** ---------- compte client ---------*******/

.page-customer-account #content .table .order-actions{
  display: grid;
}

.page-customer-account #content .view-order-details-link {
  background-color: var(--primary-bg-color) !important;
  color: #fff;
  height: 2rem;
  align-content: center;
  margin: 4px 0;
}

.page-customer-account #content .reorder-link{
  background-color: var(--terciary-bg-color) !important;
  color: var(--quaternary-bg-color) !important;
}


/***** ---------- @media ---------*******/

@media (max-width: 991px) {
    .carousel {
        left: inherit;
        width: 100%;
        padding-bottom: .5rem;
        margin-left: -50vw;
        background-color: #f6f6f6;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    #anim-set{
      min-height: 140px;
    }
}

@media only screen and (min-width: 992px) {
    #search_widget {
        min-width: 20rem;
    }
}


 /* btn recherche main-menu */
@media only screen and (min-width: 768px) {
    #search_widget {
        float: left;
        margin-bottom: 0;
    }
}

@media (max-width: 767px) {
  #header .top-logo img {
      max-height: 3rem;
  }
  .header-nav .material-icons {
    font-size: 38px;
  }
  .header-nav {
    color: var(--primary-bg-color) !important;
  }
  .top-menu a[data-depth="0"] {
    font-size: 0.7rem;
  }
  .bloc-custom-choice_row {
    display: inherit;
    gap: 24px;
    margin-bottom: 1rem;
  }
  #subcategories .subcategory-heading {
    margin: 1rem 0 0 1rem;
  }
  #subcategories {
    margin-top: 1rem;
    border-top: 1px solid #f6f6f6;
  }
  .card {
    background-color: var(--white) !important;
  }
  .card-block {
       padding: 1.25rem 1.25rem .5rem;
   }
   .footer-container .links ul {
    margin-bottom: 0;
    background-color: initial;
    }
    .blockreassurance_product {
      display: inherit;
      justify-content: center;
    }
    .graphisme-prod-home {
      display: inherit;
      padding: 1rem;
    }
}

@media only screen and (max-width: 576px) {
  .product-add-to-cart {
    margin: inherit;
    padding: 5px;
  }

  .product-actions .add-to-cart {
    white-space: normal;
    height: auto;
}

  #anim-set div {
    display : inherit;
    overflow: hidden;
    white-space: nowrap;
  }

  #anim-set div:last-of-type span {
    margin-left:-240px;
    animation: slidein 7s infinite;
    font-size: 20px;
  }

  @keyframes slidein {
      0% { margin-left:-800px; }
      20% { margin-left:-800px; }
      35% { margin-left:0px; }
      100% { margin-left:0px; }
  }

  @keyframes reveal {
      0% {opacity:0;width:0px;}
      20% {opacity:1;width:0px;}
      30% {width:320px;}
      80% {opacity:1;}
      100% {opacity:0;width:320px;overflow: initial;}
  }

  .horizontal-gallery::-webkit-scrollbar {
      height: 5px; /* hauteur de la scrollbar horizontale */
      width: 38px;  /* largeur si vertical (utile si vertical scrollbar aussi) */
  }

  .horizontal-gallery::-webkit-scrollbar-track {
      background: var(--primary-bg-color) !important; /* couleur du curseur */
      border-radius: 6px;
      margin:  4rem;
  }
  .horizontal-gallery::-webkit-scrollbar-thumb {
      background-color: var(--primary-bg-color) !important; /* couleur du curseur */
      border-radius: 6px;
      /* border: 3px solid #f0f0f0;  marge autour du curseur */
  }

  .horizontal-gallery::-webkit-scrollbar-thumb:hover {
      background-color: #0056b3; /* survol du curseur */
  }

}