/* === Styles généraux === */

body {
  background-color: #FBEBD9;
  color: #5EACA6;
  font-family: "Quicksand", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Lilita One", cursive;
  color: #C88168;
}

a {
  color: #86D0BE;
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: #C88168;
}

.btn, .button, .btn-primary {
  background-color: #EFAE9D;
  color: #5EACA6;
  border: 1px solid #5EACA6;
  transition: all 0.3s ease;
}

.btn:hover, .button:hover, .btn-primary:hover {
  background-color: #C88168;
  color: #FBEBD9;
  border-color: #C88168;
}

hr, .line, .divider {
  border: none;
  border-top: 1px solid #C88168;
  margin: 1.5rem 0;
}

.section-secondary, .content-secondary, .block-secondary {
  background-color: #F9C5BF;
}

.card, .box, .block {
  box-shadow: 0 2px 8px rgba(200, 129, 104, 0.2);
  border-radius: 8px;
}

.icon, .info, .subtext {
  color: #5EACA6;
}

.skeleton-part, .product-title, .category-title {
  color: #86D0BE;
  font-weight: bold;
}

input, textarea, select {
  border: 1px solid #5EACA6;
  background-color: #FFFFFF;
  color: #5EACA6;
}

/* Suppressions box-shadow et bordures */
.card,
.product-container,
.block-category,
.block-categories,
.block-contact,
.footer,
.header-top,
.page-header {
  box-shadow: none;
  border: none;
}

/* Couleurs et fonds pour zones spécifiques */
.page-home,
.page-content,
.container,
#content,
.main-content,
body#checkout,
body#authentication,
body#cart {
  background-color: #FBEBD9;
}

body,
#wrapper,
#wrapper #content,
#wrapper .page {
  background-color: #FBEBD9;
}

/* Header */
.header-top,
.header-banner,
.header-nav,
.page-header,
#header,
#header .container,
#header .row {
  background-color: #FBEBD9;
  border: none;
  box-shadow: none;
}

#_desktop_top_menu,
#_desktop_top_menu .top-menu {
  background-color: #FBEBD9;
}

/* Footer */
#footer,
#footer .footer-container,
.footer-container .row {
  background-color: #FBEBD9;
  border: none;
  box-shadow: none;
}

/* Footer newsletter */
#footer .block_newsletter,
#footer .block_newsletter .col-md-12,
#footer .block_newsletter form,
#footer .block_newsletter .form-group,
#footer .block_newsletter input,
#footer .block_newsletter .btn {
  background-color: #FBEBD9;
  border: none;
  box-shadow: none;
  color: #5EACA6;
}

#footer .block_newsletter input::placeholder {
  color: #C88168;
  opacity: 0.7;
}

/* Header banner image */
.header-banner {
  background-color: transparent;
  text-align: center;
  padding: 0;
  margin: 0 auto;
  width: 100%;
  display: block;
  margin-top: 0;
}

.header-banner img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  padding-top: 20px;
  padding-bottom: 20px;
}

.header-nav {
  margin-top: 10px;
}

/* Top bar */
#top-bar {
  background-color: #FBEBD9;
  padding: 10px 0;
  font-family: "Quicksand", sans-serif;
  font-size: 14px;
  color: #5EACA6;
  border-bottom: 1px solid #C88168;
}

#top-bar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.top-bar-left a,
.top-bar-right a {
  color: #86D0BE;
  text-decoration: none;
  margin-left: 15px;
  transition: color 0.3s ease;
}

.top-bar-left a:hover,
.top-bar-right a:hover {
  color: #C88168;
}

/* Cart & user info */
#_desktop_cart .header,
#block_myaccount_infos .myaccount-title,
#_desktop_user_info .user-info a {
  color: #5EACA6;
  text-decoration: none;
}

#block_myaccount_infos .myaccount-title a {
  text-transform: uppercase;
  font-family: "Lilita One", cursive;
  font-size: 16px;
  color: #86D0BE;
  text-decoration: none;
  font-weight: 600;
  display: inline-block;
  padding: 0;
  margin: 0;
}

#_desktop_user_info .user-info a {
  display: flex;
  align-items: center;
  gap: 5px;
}

#_desktop_user_info .user-info i.material-icons {
  font-size: 20px;
  color: #86D0BE;
}

#_desktop_user_info {
  display: none;
}

/* Top column (panier/connexion) */
#top-column {
  background-color: #FBEBD9;
  padding: 10px 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  font-family: "Quicksand", sans-serif;
  font-size: 14px;
  position: relative;
  background: #FBEBD9;
}

/* Cart header */
#_desktop_cart .header {
  color: #86D0BE;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

#_desktop_cart .header:hover {
  color: #C88168;
}

/* Account infos */
#block_myaccount_infos {
  position: relative;
  cursor: pointer;
}

#block_myaccount_infos .myaccount-title a:hover {
  color: #C88168;
}

/* Account dropdown */
.account-list {
  display: none;
  position: absolute;
  top: 100%;
  right: auto;
  background: #FBEBD9;
  border: 1px solid #C88168;
  padding: 10px 15px;
  margin-top: 5px;
  z-index: 1000;
  list-style: none;
  min-width: 180px;
  box-shadow: 0 2px 8px rgba(200, 129, 104, 0.2);
  border-radius: 6px;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  left: 0;
}

#block_myaccount_infos:hover .account-list {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

.account-list li {
  padding: 6px 0;
}

/* Liens du menu déroulant "Mon compte" (uniquement le contenu, pas le bouton) */
#block_myaccount_infos ul.account-list li a {
  font-family: 'Quicksand', sans-serif !important;
  color: #5EACA6;
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  display: block;
}

#block_myaccount_infos ul.account-list li a:hover {
  color: #C88168;
}

/* Desktop logo hidden */
#_desktop_logo {
  display: none;
}

/* Desktop menu links */
#_desktop_top_menu .top-menu > li > a {
  color: #C88168;
  transition: color 0.3s ease;
}

#_desktop_top_menu .top-menu > li > a:hover,
#_desktop_top_menu .top-menu > li.sfHover > a {
  color: #86D0BE;
}

#_desktop_top_menu > ul.top-menu > li > a {
  color: #C88168;
  transition: color 0.3s ease;
}

#_desktop_top_menu > ul.top-menu > li:hover > a,
#_desktop_top_menu > ul.top-menu > li.sfHover > a {
  color: #86D0BE;
}

/* Product prices and titles */
.product-price, 
.price, 
.product-price span,
.product-price .price,
.product-price .discount,
.product-price .regular-price {
  color: #C88168;
}

.product-title, 
.product-name, 
.product-title a, 
.product-name a {
  color: #C88168;
  font-weight: 600;
}

/* Buttons */
button, 
.btn, 
.button, 
.btn-primary, 
input[type="submit"], 
input[type="button"] {
  background-color: #C88168;
  color: #FBEBD9;
  border: 1px solid #C88168;
  transition: background-color 0.3s ease, color 0.3s ease;
}

button:hover, 
.btn:hover, 
.button:hover, 
.btn-primary:hover, 
input[type="submit"]:hover, 
input[type="button"]:hover {
  background-color: #EFAE9D;
  color: #5EACA6;
  border-color: #EFAE9D;
}

/* Breadcrumb */
.breadcrumb,
.breadcrumb a,
.breadcrumb span {
  color: #B45A4B;
}

.breadcrumb a:hover {
  color: #EFAE9D;
  text-decoration: underline;
}

/* Footer links */
#footer a,
#footer a:visited {
  color: #B45A4B;
  text-decoration: none;
  transition: color 0.3s ease;
}

#footer a:hover,
#footer a:focus {
  color: #86D0BE;
  text-decoration: underline;
}

/* Footer headings */
#footer h1,
#footer h2,
#footer h3,
#footer h4,
#footer h5,
#footer h6 {
  color: #B45A4B;
  font-weight: bold;
}

#footer h1:hover,
#footer h2:hover,
#footer h3:hover,
#footer h4:hover,
#footer h5:hover,
#footer h6:hover {
  color: #86D0BE;
  cursor: default;
}

/* === Footer custom icons === */
.footer-custom-icons {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  margin-top: 20px;
  flex-direction: column;
  align-items: center;
}

.footer-custom-icons a {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  text-indent: -9999px;
  border-radius: 0;
  overflow: hidden;
}

.footer-custom-icons a.facebook {
  background-image: url("/img/social/bouton fb.png");
}

.footer-custom-icons a.instagram {
  background-image: url("/img/social/bouton insta.png");
}

/* === MOBILE STYLES === */
@media (max-width: 768px) {

  /* Logo / bannière */
  .top-logo, .top-logo img, a.logo {
    position: relative !important;
    z-index: 1500 !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .block-categories { display: none !important; }

  /* Icônes user / panier */
  .mobile-icons {
    position: relative !important;
    z-index: 1450 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    padding: 0.5rem 1rem !important;
    background-color: #FBEBD9 !important;
  }

  #_mobile_user_info i, #_mobile_cart i {
    color: #86D0BE !important;
    font-size: 1.8rem !important;
  }

  /* Carousel */
  #carousel {
    position: relative !important;
    z-index: 1300 !important;
    margin-top: 0 !important;
    background-color: transparent !important;
  }

  /* Footer mobile titres */
  .footer-container span.h3 {
    font-family: 'Lilita One', cursive !important;
    color: #86D0BE !important;
    font-size: 1.3rem !important;
    font-weight: 400 !important;
  }

  .footer-container .navbar-toggler.collapse-icons i {
    color: #86D0BE !important;
  }

  .footer-container .collapse.show a {
    font-family: 'Quicksand', sans-serif !important;
    color: #C88168 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
  }
}

/* === PATCH MOBILE PROPRE (max-width: 991.98px) === */
@media (max-width: 991.98px) {

  body {
    padding-top: 0 !important;
  }

  #header, #mobile_top_menu_wrapper, #_mobile_top_menu, #top-column, .mobile-icons {
    position: relative !important;
    z-index: auto !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Menu principal horizontal multi-lignes */
  #mobile_top_menu_wrapper,
  #_mobile_top_menu {
    width: 100% !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #FBEBD9 !important;
  }

  #_mobile_top_menu #top-menu {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }

  #_mobile_top_menu #top-menu > li {
    flex: 0 1 auto !important;
    text-align: center !important;
    margin: 0.2rem !important;
  }

  #_mobile_top_menu #top-menu > li > a {
    display: inline-block !important;
    color: #86D0BE !important;
    font-family: 'Lilita One', cursive !important;
    font-size: 1rem !important;
    padding: 0.4rem 0.8rem !important;
    border-radius: 10px !important;
    background: transparent !important;
    transition: color 0.3s ease !important;
  }

  #_mobile_top_menu #top-menu > li > a:hover {
    color: #EFAE9D !important;
  }

  /* Sous-menus déroulants */
  #_mobile_top_menu .popover.sub-menu,
  #_mobile_top_menu .js-sub-menu {
    position: relative !important;
    width: 100% !important;
    display: none !important;
    background: transparent !important;
    padding: 0.25rem 1rem !important;
    margin: 0 !important;
  }

  #_mobile_top_menu .popover.sub-menu.show,
  #_mobile_top_menu .js-sub-menu.show {
    display: block !important;
  }

  /* Icônes +/- */
  .navbar-toggler .remove { display: none; }
  .navbar-toggler[aria-expanded="true"] .remove { display: inline-block; }
  .navbar-toggler[aria-expanded="true"] .add { display: none; }

  /* Sous-menu contenu */
  #_mobile_top_menu .sub-menu {
    display: block !important;
    background: #FBEBD9 !important;
    padding: 0.5rem;
  }

  #_mobile_top_menu .sub-menu a {
    color: #333 !important;
    font-size: 16px;
    display: block;
    padding: 0.3rem 0;
  }

  #_mobile_top_menu .sub-menu a:hover {
    color: #a34c2d !important;
  }
}

/* === PATCH DESKTOP (≥ 992px) === */
@media (min-width: 992px) {
  .header-banner img {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .header-nav {
    margin-top: 0 !important;
  }
  #wrapper {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  #content-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}
/* === CORRECTIF AFFICHAGE MENU MOBILE === */
@media (max-width: 991.98px) {
  /* La bannière et le header passent au-dessus du menu */
  .header-banner,
  #header,
  .mobile-icons {
    position: relative;
    z-index: 1000; /* plus haut que le contenu */
  }

  /* Le menu mobile juste en dessous de la bannière */
  #mobile_top_menu_wrapper {
    position: relative;
    z-index: 900; /* en-dessous de la bannière mais au-dessus du contenu */
    background: #FBEBD9;
  }

  /* Les sous-menus doivent s’afficher par-dessus le contenu */
  #_mobile_top_menu .popover.sub-menu,
  #_mobile_top_menu .js-sub-menu,
  #_mobile_top_menu .collapse.show {
    position: relative;
    z-index: 950; /* au-dessus du contenu */
    display: block !important;
    background: #FBEBD9;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  }

  /* Style des sous-menus pour qu’ils soient lisibles */
  #_mobile_top_menu .popover.sub-menu ul.top-menu {
    list-style: none;
    margin: 0;
    padding: 0.5rem;
  }

  #_mobile_top_menu .popover.sub-menu ul.top-menu > li > a {
    display: block;
    padding: 0.5rem 1rem;
    color: #333 !important;
    background: #fff;
    border-radius: 4px;
    margin: 0.25rem 0;
  }

  #_mobile_top_menu .popover.sub-menu ul.top-menu > li > a:hover {
    background: #EFAE9D;
    color: #fff !important;
  }
}

/* === PATCH FINAL SIMPLIFIÉ === */
@media (max-width: 991.98px) {
  /* S'assurer qu'aucun conteneur ne masque */
  .row, .container, .container-fluid, #header, .header-nav, .header-banner,
  .hidden-md-up.text-sm-center.mobile, #mobile_top_menu_wrapper, #_mobile_top_menu {
    overflow: visible !important;
  }

  /* Bannière + icônes : toujours au-dessus */
  .header-banner,
  .mobile-icons,
  #_mobile_logo {
    position: relative !important;
    z-index: 5000 !important;
  }

  /* Menu horizontal : sous la bannière, mais au-dessus du contenu */
  #mobile_top_menu_wrapper,
  #_mobile_top_menu {
    position: relative !important;
    z-index: 3500 !important;
    background: #FBEBD9 !important;
  }

  /* Le contenu reste derrière le menu */
  #content-wrapper, #main, #content, .page-home, .page-content {
    position: relative !important;
    z-index: 1000 !important;
    transform: none !important;
  }

  /* SOUS-MENUS : forcer leur empilement */
  #_mobile_top_menu .popover.sub-menu,
  #_mobile_top_menu .js-sub-menu {
    position: relative !important;    /* reste dans le flux Bootstrap */
    z-index: 3600 !important;         /* au-dessus du contenu */
    background: #FBEBD9 !important;
  }

  /* Lisibilité des liens */
  #_mobile_top_menu .popover.sub-menu a,
  #_mobile_top_menu .js-sub-menu a {
    color: #5EACA6 !important;
    background: #fff !important;
    border-radius: 6px !important;
    display: block !important;
    padding: .4rem .8rem !important;
    margin: .2rem 0 !important;
  }

  #_mobile_top_menu .popover.sub-menu a:hover,
  #_mobile_top_menu .js-sub-menu a:hover {
    background: #EFAE9D !important;
    color: #fff !important;
  }
}
/* === FIX VISIBILITÉ SOUS-CATÉGORIES MOBILE === */
@media (max-width: 991.98px) {
  /* Corrige la hauteur forcée à 0 par Bootstrap */
  #_mobile_top_menu .sub-menu.collapse.show,
  #_mobile_top_menu .popover.sub-menu.collapse.show {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Styles lisibles des liens de sous-cat */
  #_mobile_top_menu .sub-menu ul.top-menu > li > a,
  #_mobile_top_menu .popover.sub-menu ul.top-menu > li > a {
    display: block !important;
    color: #5EACA6 !important;     /* texte vert */
    background: #FFFFFF !important; /* fond blanc */
    font-size: 1rem !important;
    font-family: 'Quicksand', sans-serif !important;
    padding: 0.4rem 0.8rem !important;
    margin: 0.2rem 0 !important;
    border-radius: 6px !important;
  }

  #_mobile_top_menu .sub-menu ul.top-menu > li > a:hover,
  #_mobile_top_menu .popover.sub-menu ul.top-menu > li > a:hover {
    background: #EFAE9D !important;
    color: #fff !important;
  }

  /* DEBUG VISUEL : encadré rouge autour du bloc sous-menu */
  #_mobile_top_menu .sub-menu.show {
    outline: 2px solid red !important;
  }
}

/* === FIX FINAL SOUS-CATÉGORIES MOBILE === */
@media (max-width: 991.98px) {
  /* Le bloc sub-menu s'affiche correctement */
  #_mobile_top_menu .sub-menu,
  #_mobile_top_menu .popover.sub-menu,
  #_mobile_top_menu .js-sub-menu {
    position: relative !important;
    display: none !important;   /* masqué par défaut */
    height: auto !important;
    overflow: visible !important;
    visibility: visible !important;
    background: transparent !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Quand il est ouvert */
  #_mobile_top_menu .sub-menu.show,
  #_mobile_top_menu .popover.sub-menu.show,
  #_mobile_top_menu .js-sub-menu.show {
    display: block !important;
  }

  /* Liste des sous-catégories dans le flux du menu parent */
  #_mobile_top_menu .sub-menu ul.top-menu {
    list-style: none !important;
    margin: 0.3rem 0 !important;
    padding: 0 !important;
    display: block !important;
  }

  #_mobile_top_menu .sub-menu ul.top-menu > li {
    display: block !important;
    margin: 0.2rem 0 !important;
  }

  #_mobile_top_menu .sub-menu ul.top-menu > li > a {
    display: block !important;
    padding: 0.4rem 0.8rem !important;
    font-size: 0.95rem !important;
    font-family: 'Quicksand', sans-serif !important;
    color: #5EACA6 !important;
    background: #fff !important;
    border-radius: 6px !important;
  }

  #_mobile_top_menu .sub-menu ul.top-menu > li > a:hover {
    background: #EFAE9D !important;
    color: #fff !important;
  }
}

/* === FIX MOBILE FINAL : menu 2 lignes + sous-menus visibles et à la bonne place === */
@media (max-width: 991.98px) {

  /* 1) Le menu principal occupe 2 lignes fixes (4 catégories => 2 x 2) */
  #_mobile_top_menu #top-menu {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  #_mobile_top_menu #top-menu > li {
    flex: 0 0 50% !important;     /* => 2 colonnes */
    max-width: 50% !important;
    text-align: center !important;
    margin: 0 !important;
  }
  #_mobile_top_menu #top-menu > li > a {
    display: inline-block !important;
    padding: 0.4rem 0.8rem !important;
    white-space: nowrap !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: #86D0BE !important;
    font-family: 'Lilita One', cursive !important;
  }

  /* 2) Le conteneur du sous-menu s’affiche dans le flux, sous sa catégorie */
  #_mobile_top_menu .popover.sub-menu,
  #_mobile_top_menu .js-sub-menu,
  #_mobile_top_menu .sub-menu {
    position: static !important;      /* PAS d’absolu / popover */
    transform: none !important;       /* neutralise les styles inline */
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;

    /* visible quand .show, caché sinon (sans height:0) */
    display: none !important;
    height: auto !important;
    overflow: visible !important;
    visibility: visible !important;

    margin: 0.25rem 0 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }
  #_mobile_top_menu .popover.sub-menu.show,
  #_mobile_top_menu .js-sub-menu.show,
  #_mobile_top_menu .sub-menu.show {
    display: block !important;
  }

  /* 3) Empêche Bootstrap de re-collapser à height:0 pendant l’anim */
  #_mobile_top_menu .collapsing {
    height: auto !important;
    overflow: visible !important;
    transition: none !important;
  }

  /* 4) La liste interne est bien visible (pas « vide ») */
  #_mobile_top_menu .popover.sub-menu > ul.top-menu,
  #_mobile_top_menu .js-sub-menu > ul.top-menu,
  #_mobile_top_menu .sub-menu > ul.top-menu {
    display: block !important;
    list-style: none !important;
    margin: 0.25rem 0 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }
  #_mobile_top_menu .sub-menu > ul.top-menu > li {
    margin: 0.25rem 0 !important;
  }
  #_mobile_top_menu .sub-menu > ul.top-menu > li > a {
    display: block !important;
    padding: 0.45rem 0.8rem !important;
    border-radius: 6px !important;
    background: #FFFFFF !important;
    color: #5EACA6 !important;        /* vert lisible */
    font-family: 'Quicksand', sans-serif !important;
    font-size: 0.95rem !important;
    text-align: left !important;
  }
  #_mobile_top_menu .sub-menu > ul.top-menu > li > a:hover {
    background: #EFAE9D !important;
    color: #FFFFFF !important;
  }

  /* 5) TUE le « second bloc » : tout popover *décroché* du <li> est masqué */
  #_mobile_top_menu > .popover.sub-menu,
  #mobile_top_menu_wrapper > .popover.sub-menu,
  body > .popover.sub-menu {
    display: none !important;
  }

  /* 6) Empilement : le menu passe devant le contenu mais reste sous la bannière */
  #header { position: relative; z-index: 1000; }
  .header-banner { position: relative; z-index: 1100; }   /* la bannière au-dessus du header */
  #mobile_top_menu_wrapper { position: relative; z-index: 1050; } /* menu sous la bannière */
  #content-wrapper { position: relative; z-index: 1; }    /* contenu derrière */

  /* Sécurité : pas de overflow qui coupe le sous-menu */
  #content, #content-wrapper, #wrapper {
    overflow: visible !important;
  }
}

/* === FIX MOBILE FINAL : menu 2 lignes + sous-menus visibles et à la bonne place === */
@media (max-width: 991.98px) {

  /* 1) Le menu principal occupe 2 lignes fixes (4 catégories => 2 x 2) */
  #_mobile_top_menu #top-menu {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  #_mobile_top_menu #top-menu > li {
    flex: 0 0 50% !important;     /* => 2 colonnes */
    max-width: 50% !important;
    text-align: center !important;
    margin: 0 !important;
  }
  #_mobile_top_menu #top-menu > li > a {
    display: inline-block !important;
    padding: 0.4rem 0.8rem !important;
    white-space: nowrap !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: #86D0BE !important;
    font-family: 'Lilita One', cursive !important;
  }

  /* 2) Le conteneur du sous-menu s’affiche dans le flux, sous sa catégorie */
  #_mobile_top_menu .popover.sub-menu,
  #_mobile_top_menu .js-sub-menu,
  #_mobile_top_menu .sub-menu {
    position: static !important;      /* PAS d’absolu / popover */
    transform: none !important;       /* neutralise les styles inline */
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;

    /* visible quand .show, caché sinon (sans height:0) */
    display: none !important;
    height: auto !important;
    overflow: visible !important;
    visibility: visible !important;

    margin: 0.25rem 0 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }
  #_mobile_top_menu .popover.sub-menu.show,
  #_mobile_top_menu .js-sub-menu.show,
  #_mobile_top_menu .sub-menu.show {
    display: block !important;
  }

  /* 3) Empêche Bootstrap de re-collapser à height:0 pendant l’anim */
  #_mobile_top_menu .collapsing {
    height: auto !important;
    overflow: visible !important;
    transition: none !important;
  }

  /* 4) La liste interne est bien visible (pas « vide ») */
  #_mobile_top_menu .popover.sub-menu > ul.top-menu,
  #_mobile_top_menu .js-sub-menu > ul.top-menu,
  #_mobile_top_menu .sub-menu > ul.top-menu {
    display: block !important;
    list-style: none !important;
    margin: 0.25rem 0 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }
  #_mobile_top_menu .sub-menu > ul.top-menu > li {
    margin: 0.25rem 0 !important;
  }
  #_mobile_top_menu .sub-menu > ul.top-menu > li > a {
    display: block !important;
    padding: 0.45rem 0.8rem !important;
    border-radius: 6px !important;
    background: #FFFFFF !important;
    color: #5EACA6 !important;        /* vert lisible */
    font-family: 'Quicksand', sans-serif !important;
    font-size: 0.95rem !important;
    text-align: left !important;
  }
  #_mobile_top_menu .sub-menu > ul.top-menu > li > a:hover {
    background: #EFAE9D !important;
    color: #FFFFFF !important;
  }

  /* 5) TUE le « second bloc » : tout popover *décroché* du <li> est masqué */
  #_mobile_top_menu > .popover.sub-menu,
  #mobile_top_menu_wrapper > .popover.sub-menu,
  body > .popover.sub-menu {
    display: none !important;
  }

  /* 6) Empilement : le menu passe devant le contenu mais reste sous la bannière */
  #header { position: relative; z-index: 1000; }
  .header-banner { position: relative; z-index: 1100; }   /* la bannière au-dessus du header */
  #mobile_top_menu_wrapper { position: relative; z-index: 1050; } /* menu sous la bannière */
  #content-wrapper { position: relative; z-index: 1; }    /* contenu derrière */

  /* Sécurité : pas de overflow qui coupe le sous-menu */
  #content, #content-wrapper, #wrapper {
    overflow: visible !important;
  }
}

/* === CORRECTIF MENU MOBILE : 2 lignes fluides + style sous-catégories === */
@media (max-width: 991.98px) {

  /* Catégories principales : 2 colonnes max mais flexibles */
  #_mobile_top_menu #top-menu > li {
    flex: 1 1 45% !important;   /* 2 items par ligne quand possible */
    max-width: 50% !important;
    text-align: center !important;
    margin: 0.2rem 0 !important;
  }

  #_mobile_top_menu #top-menu > li > a {
    display: inline-block !important;
    padding: 0.4rem 0.8rem !important;
    white-space: nowrap !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: #86D0BE !important;
    font-family: 'Lilita One', cursive !important;
    font-size: 1rem !important;
  }

  /* Bloc sous-menu : suppression du cadre rouge et fond transparent */
  #_mobile_top_menu .sub-menu {
    border: none !important;        /* vire le contour rouge */
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Liens de sous-catégories : brun rosé sans fond */
  #_mobile_top_menu .sub-menu > ul.top-menu > li > a {
    background: transparent !important;  /* plus de carré blanc */
    color: #C88168 !important;           /* brun rosé */
    font-family: 'Quicksand', sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    padding: 0.3rem 0.6rem !important;
    border-radius: 0 !important;
    text-align: left !important;
  }
  #_mobile_top_menu .sub-menu > ul.top-menu > li > a:hover {
    color: #86D0BE !important;           /* vert en hover */
  }
}

/* === VISUEL SOUS-MENU MOBILE : pas de bordure, pas de fond, texte brun rosé === */
@media (max-width: 991.98px) {
  /* Conteneur du sous-menu (Bootstrap .popover) */
  #_mobile_top_menu .popover.sub-menu {
    background: transparent !important;
    border: 0 !important;         /* supprime le cadre rouge */
    box-shadow: none !important;
    padding: 0 !important;
  }
  #_mobile_top_menu .popover.sub-menu::before,
  #_mobile_top_menu .popover.sub-menu::after,
  #_mobile_top_menu .popover.sub-menu .arrow {
    display: none !important;      /* cache la flèche/traits du popover */
  }

  /* Liste interne */
  #_mobile_top_menu .popover.sub-menu > ul.top-menu {
    background: transparent !important;
    border: 0 !important;
    margin: 0.3rem 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  /* Liens de sous-catégories : brun rosé, sans fond */
  #_mobile_top_menu .popover.sub-menu > ul.top-menu > li > a,
  #_mobile_top_menu .js-sub-menu > ul.top-menu > li > a,
  #_mobile_top_menu .sub-menu a.dropdown-item {
    background: transparent !important;  /* enlève le fond blanc */
    border: 0 !important;
    color: #C88168 !important;           /* brun rosé */
    font-family: 'Quicksand', sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    padding: 0.35rem 0.5rem !important;
    text-decoration: none !important;
  }

  #_mobile_top_menu .sub-menu a:hover,
  #_mobile_top_menu .sub-menu a:focus {
    color: #86D0BE !important;           /* vert en hover */
    background: transparent !important;
  }

  /* Neutralise les styles Bootstrap par sécurité */
  #_mobile_top_menu .sub-menu .dropdown-item {
    background: transparent !important;
    border: 0 !important;
  }
}

/* === FORCE LA SUPPRESSION DE LA BORDURE DES SOUS-MENUS MOBILE === */
@media (max-width: 991.98px) {
  #_mobile_top_menu .popover.sub-menu,
  #_mobile_top_menu .js-sub-menu,
  #_mobile_top_menu .sub-menu,
  #_mobile_top_menu .sub-menu.collapse.show {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }

  /* Parfois la bordure vient d'un ::before/::after */
  #_mobile_top_menu .popover.sub-menu::before,
  #_mobile_top_menu .popover.sub-menu::after,
  #_mobile_top_menu .sub-menu::before,
  #_mobile_top_menu .sub-menu::after {
    display: none !important;
    border: none !important;
  }
}

/* 1) police + couleur général */
nav.breadcrumb,
nav.breadcrumb * {
  font-family: 'Quicksand', sans-serif !important;
  color: #F9C5BF !important;
}

/* liens / texte */
nav.breadcrumb a,
nav.breadcrumb span { color: #F9C5BF !important; }

/* 2) pseudo-éléments texte / chevrons usuels */
nav.breadcrumb ol li + li::before,
nav.breadcrumb li + li::before,
nav.breadcrumb .breadcrumb-item + .breadcrumb-item::before,
.breadcrumb-item + .breadcrumb-item::before,
nav.breadcrumb li::before,
nav.breadcrumb li::after,
nav.breadcrumb .separator,
nav.breadcrumb .breadcrumb-separator {
  color: #F9C5BF !important;
  border-color: #F9C5BF !important;
  background: none !important; /* neutralise les images de fond si possible */
  background-image: none !important;
  fill: #F9C5BF !important;    /* pour SVG inline */
  stroke: #F9C5BF !important;  /* pour SVG inline */
}

/* 3) SVG inline éventuel */
nav.breadcrumb svg,
nav.breadcrumb svg * {
  fill: #F9C5BF !important;
  stroke: #F9C5BF !important;
}

/* 4) cas Bootstrap 5 (variable CSS) */
nav.breadcrumb { --bs-breadcrumb-divider: "/"; }
nav.breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: #F9C5BF !important; }

/* ====== Douceur page Informations (/identite) ======
   Remplace le texte noir par du brun-rosé sans toucher aux inputs */
form[action$="/identite"],
form[action$="/identite"] *:not(input):not(textarea):not(select):not(button):not(.material-icons) {
  color: #C88168 !important;
  font-family: 'Quicksand', sans-serif !important; /* optionnel : met Quicksand si tu veux */
}

/* Exclure proprement les champs (conserve leur apparence pour la saisie) */
form[action$="/identite"] input,
form[action$="/identite"] textarea,
form[action$="/identite"] select,
form[action$="/identite"] button,
form[action$="/identite"] .material-icons {
  color: inherit !important;
}

/* Pseudo-éléments / SVG */
form[action$="/identite"] *::before,
form[action$="/identite"] *::after,
form[action$="/identite"] svg,
form[action$="/identite"] svg * {
  color: #C88168 !important;
  fill: #C88168 !important;
  stroke: #C88168 !important;
}

/* Bouton "Enregistrer" - texte rose coquillage uniquement hors survol */
form[action$="/identite"] .btn.btn-primary.form-control-submit {
  color: #F9C5BF !important;
}

/* Change le texte du formulaire d'adresse en brun rosé */
.address-form, 
.address-form label, 
.address-form input, 
.address-form select, 
.address-form .form-control-comment {
    color: #8B5E57; /* brun rosé doux */
}

/* Titre Panier */
.cart-container h1 {
    color: #C88168 !important;
}

/* Prix et totaux */
.cart-container .price,
.cart-summary-line .label,
.cart-summary-line .value {
    color: #5EACA6 !important;
}

/* Lien "Continuer mes achats" */
.cart-container a.label,
.cart-container a {
    color: #C88168 !important;
}

/* Icônes (poubelle, chevron, etc.) */
.cart-container .material-icons,
.cart-line-product-actions i {
    color: #C88168 !important;
}

/* Quantités (texte + bordures) */
.cart-container input[type="number"],
.cart-container .bootstrap-touchspin input {
    color: #C88168 !important;
    border: 1px solid #C88168 !important;
}

/* Séparateurs horizontaux */
.cart-container hr.separator {
    border-color: #C88168 !important;
}

/* Prix en gras */
.cart-container .product-price strong {
    color: #5EACA6 !important;
}

/* Lien exact "Continuer mes achats" */
.cart-grid-body > a.label {
    color: #C88168 !important;  /* brun rosé par défaut */
    text-decoration: none !important;
}

/* Survol : menthe douce */
.cart-grid-body > a.label:hover {
    color: #86D0BE !important;  /* menthe douce au hover */
}

/* 1. Tous les gros titres des étapes */
#content-wrapper .step-title {
    color: #C88168;
}

/* 2. Les labels des champs de formulaire (Prénom, Nom, Alias, etc.) */
#content-wrapper .form-control-label,
#content-wrapper label {
    color: #C88168;
}

/* 3. Conteneurs des champs et leurs bordures */
#content-wrapper .js-input-column {
    color: #C88168; /* texte à l'intérieur */
}

/* 4. Texte des options, comme "Utiliser aussi cette adresse pour la facturation" */
#content-wrapper .form-group label {
    color: #C88168;
}

/* 5. Checkbox cochée en aqua vintage (#5EACA6) */
#content-wrapper input[type="checkbox"]:checked + label::before {
    background-color: #5EACA6;
    border-color: #5EACA6;
}

/* 6. Texte des boutons en blanc pour lisibilité */
#content-wrapper button,
#content-wrapper input[type="submit"],
#content-wrapper .btn {
    color: #ffffff !important;
}
/* === Page Contact : textes en brun rosé === */
#contact .contact-rich .data,
#contact .contact-rich h4,
#contact .col-md-9.col-md-offset-3 h3 {
    color: #A66A5B; /* brun rosé, tu peux ajuster la teinte */
}
/* === Page Contact : bouton Choisir un fichier === */
#contact label.btn.btn-default {
    background-color: #7FDBFF; /* aqua vintage de base */
    color: inherit; /* conserve la couleur du texte actuelle */
}

#contact label.btn.btn-default:hover {
    background-color: #F9C5BF; /* fond rose au survol */
    color: inherit; /* conserve la couleur du texte au survol */
}
/* H2 uniquement sur la page Plan du site */
body#sitemap h2 {
    color: #C88168; /* brun rosé */
}
.tax-shipping-delivery-label {
    display: none !important;
}
/* Lien "Commander en tant qu'invité" */
.nav-link.active[href="#checkout-guest-form"] {
    color: #b76e79; /* brun rosé de base */
    transition: color 0.3s ease; /* transition douce au survol */
}

.nav-link.active[href="#checkout-guest-form"]:hover {
    color: #7fd8d8; /* aqua vintage au survol */
}
.product-add-to-cart .control-label {
    display: none;
}
/* Change la couleur du nombre dans l'encart */
.product-add-to-cart #quantity_wanted {
    color: #b76e79; /* même brun rosé */
}
    
 /* =========================================================
   CONFIRMATION DE COMMANDE – TITRES
   ========================================================= */

body#order-confirmation h3.card-title,
body#order-confirmation h3.h1.card-title {
  color: #C88168 !important;
}

body#order-confirmation .material-icons.done {
  color: #86D0BE !important;
}
/* =========================================================
   PAGE CONFIRMATION DE COMMANDE – OVERRIDE CLASSIC
   ========================================================= */

.page-order-confirmation.page-order-confirmation
.card-title,
.page-order-confirmation.page-order-confirmation
h3.card-title,
.page-order-confirmation.page-order-confirmation
h3.h1.card-title,
.page-order-confirmation.page-order-confirmation
h3.h3.card-title {
  color: #C88168 !important;
}

/* Icône check */
.page-order-confirmation
.material-icons.done {
  color: #86D0BE !important;
}
.out-of-stock-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: #EFAE9D; /* corail tendre de ta charte */
  color: white;
  padding: 5px 10px;
  font-weight: bold;
  border-radius: 5px;
  z-index: 10;
  font-size: 0.9em;
}

.thumbnail-container {
  position: relative; /* nécessaire pour que le badge s'affiche correctement */
}

/* Masquer les sous-sous-catégories dans le menu */
.menu ul ul ul {
    display: none !important;
}

@media (max-width: 768px) {
  .page-cms img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .page-cms img {
    border-radius: 12px;
  }
}
.p-CondensedSinglePromotionView--Message {
    display: none !important;
}