/* Child Classic Theme - Custom Styles */
/* Minimal version - restoration to working state */

/* Bouton wishlist - cœur rouge */
.wishlist-button-add i {
  color: #bf2d2d !important;
}

/* CORRECTIF: Forcer le header derrière le modal de visualisation d'images produit UNIQUEMENT */
/* Ne pas appliquer à tous les modals (sinon le modal d'ajout au panier bloque la page) */

/* Quand le modal #product-modal (visualisation images) est visible */
html:has(#product-modal[style*="display: block"]) header,
html:has(#product-modal[style*="display:block"]) header,
html:has(#product-modal.show) header,
html:has(#product-modal.in) header {
  z-index: -1 !important;
  position: relative !important;
}

/* Arrondis (carousels): l'arrondi doit être porté par le conteneur (sinon, pendant le slide, les images ne "se suivent" pas) */
.carousel {
  overflow: hidden;
  border-radius: 0.75rem;
}

.carousel .carousel-inner {
  overflow: hidden;
  border-radius: 0.75rem;
}

/* Les items/images ne doivent PAS avoir leur propre radius (évite des micro-gaps pendant l'animation) */
.carousel .carousel-item {
  overflow: hidden;
  border-radius: 0;
}

/*
  IMPORTANT (#carousel): CSS complet pour le glissement (slide) du carousel Bootstrap.
  On réintroduit TOUTES les règles nécessaires avec !important pour forcer le slide.
*/

/* Conteneur du carousel */
#carousel .carousel-inner {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
}

/* Items du carousel - TOUS visibles, empilés via margin-right: -100% */
#carousel .carousel-item {
  position: relative !important;
  width: 100% !important;
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  -webkit-transition: -webkit-transform 0.6s ease-in-out !important;
  transition: transform 0.6s ease-in-out !important;
  /* Bootstrap: les items inactifs ne doivent pas impacter le layout */
  display: none !important;
  -webkit-transform: translateX(0) !important;
  transform: translateX(0) !important;
}

/* Item actif: visible au centre */
#carousel .carousel-item.active {
  -webkit-transform: translateX(0) !important;
  transform: translateX(0) !important;
  z-index: 1 !important;
  display: block !important;
}

/* Items en transition (Bootstrap v4 + compat v4 alpha) */
#carousel .carousel-item-next,
#carousel .carousel-item-prev,
#carousel .carousel-item.next,
#carousel .carousel-item.prev {
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 2 !important;
}

/* ======================================
   SLIDE VERS LA GAUCHE (next/suivant)
   ====================================== */

/* Item ENTRANT (next) - démarre à droite (+100%) */
#carousel .carousel-item-next,
#carousel .carousel-item.next {
  -webkit-transform: translateX(100%) !important;
  transform: translateX(100%) !important;
}

/* Item ENTRANT (next) - quand il reçoit la classe de transition, va vers 0 */
#carousel .carousel-item-next.carousel-item-left,
#carousel .carousel-item-next.carousel-item-start {
  -webkit-transform: translateX(0) !important;
  transform: translateX(0) !important;
}

/* Compat Bootstrap v4 alpha: .next.left */
#carousel .carousel-item.next.left {
  -webkit-transform: translateX(0) !important;
  transform: translateX(0) !important;
}

/* Item SORTANT (active) - part vers la gauche (-100%) */
#carousel .carousel-item.active.carousel-item-left,
#carousel .carousel-item.active.carousel-item-start {
  -webkit-transform: translateX(-100%) !important;
  transform: translateX(-100%) !important;
}

/* Compat Bootstrap v4 alpha: .active.left */
#carousel .carousel-item.active.left {
  -webkit-transform: translateX(-100%) !important;
  transform: translateX(-100%) !important;
}

/* ======================================
   SLIDE VERS LA DROITE (prev/précédent)
   ====================================== */

/* Comportement standard Bootstrap: prev entre par la gauche (-100%) */
/* Item ENTRANT (prev) - démarre à gauche (-100%) */
#carousel .carousel-item-prev,
#carousel .carousel-item.prev {
  -webkit-transform: translateX(-100%) !important;
  transform: translateX(-100%) !important;
}

/* Item ENTRANT (prev) - quand il reçoit la classe de transition, va vers 0 */
#carousel .carousel-item-prev.carousel-item-right,
#carousel .carousel-item-prev.carousel-item-end {
  -webkit-transform: translateX(0) !important;
  transform: translateX(0) !important;
}

/* Compat Bootstrap v4 alpha: .prev.right */
#carousel .carousel-item.prev.right {
  -webkit-transform: translateX(0) !important;
  transform: translateX(0) !important;
}

/* Item SORTANT (active) - part vers la droite (+100%) */
#carousel .carousel-item.active.carousel-item-right,
#carousel .carousel-item.active.carousel-item-end,
/* Compat Bootstrap v4 alpha: .active.right */
#carousel .carousel-item.active.right {
  -webkit-transform: translateX(100%) !important;
  transform: translateX(100%) !important;
}

/* ======================================
   FORCER LE SLIDE - désactiver fade
   ====================================== */

/* Si une classe "fade" est ajoutée par erreur, on neutralise juste l'opacité.
   Le slide reste piloté par les règles ci-dessus. */
#carousel.carousel-fade .carousel-item,
#carousel .carousel-fade .carousel-item,
.carousel-fade #carousel .carousel-item {
  opacity: 1 !important;
}

/* Bootstrap/ps_imageslider: arrondis sur le conteneur */
#carousel .carousel-inner,
#carousel .carousel-inner .carousel-item > a > figure {
  overflow: hidden;
  border-radius: 0.75rem;
}

/* Carousel principal: clip + arrondis fiables (y compris pendant l'animation, mobile/iOS) */
#carousel,
#carousel .carousel-inner {
  overflow: hidden !important;
  border-radius: 0.75rem !important;
}

#carousel .carousel-inner {
  /* Clip moderne: garde les coins arrondis pendant les transforms, sans casser la fluidité */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@supports (clip-path: inset(0 round 1px)) {
  .carousel .carousel-inner {
    clip-path: inset(0 round 0.75rem);
  }
}

/* Carousel: hauteur responsive + image en cover (rendu uniforme) */
#carousel {
  /* Hauteur pilotée par breakpoint (plus prévisible que aspect-ratio sur des visuels hétérogènes) */
  --carousel-height: clamp(220px, 22vw, 460px);
  width: 100%;
  max-width: 100%;

  /* Neutralise les décalages possibles du thème parent (toutes tailles, pas seulement mobile) */
  position: relative;
  box-sizing: border-box;
  display: block !important;
  float: none !important;
  clear: both;
  margin-left: auto !important;
  margin-right: auto !important;
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
}

/* Mobile: plus compact pour éviter un "hero" trop grand */
@media (max-width: 575.98px) {
  #carousel {
    --carousel-height: clamp(170px, 56vw, 320px);
  }
}

/* Tablette: un peu plus haut (souvent en portrait) */
@media (min-width: 576px) and (max-width: 991.98px) {
  #carousel {
/* =====================
   Menu latéral: cacher les sous-menus par défaut
   et les afficher UNIQUEMENT au survol du parent
   ===================== */
.homepage-sidebar-menu ul ul {
  display: none;
}

.homepage-sidebar-menu .sidebar-submenu-flyout {
  /* flyout invisible par défaut (gestion via opacity/visibility pour transitions) */
  opacity: 0;
  visibility: hidden;
  transform: translateX(-10px);
  pointer-events: none;
}

.homepage-sidebar-menu ul li.has-submenu:hover > .sidebar-submenu-flyout,
.homepage-sidebar-menu ul li:hover > ul {
  /* Affiche le sous-menu au survol du parent */
  display: block;
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
}

/* Pour les petits écrans, laisser le menu natif (pas de flyout au survol) */
@media (max-width: 991.98px) {
  .homepage-sidebar-menu .sidebar-submenu-flyout {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    display: none; /* s'affiche via clic/js du thème mobile si nécessaire */
  }
}

    --carousel-height: clamp(220px, 34vw, 420px);
  }
}

/* Très grands écrans: éviter un slider trop plat */
@media (min-width: 1400px) {
  #carousel {
    --carousel-height: clamp(320px, 18vw, 520px);
  }
}

/* Carousel principal: masquer les 3 points (indicateurs) */
#carousel .carousel-indicators,
#carousel ol.carousel-indicators {
  display: none !important;
}

/* Carousel principal: flèches (touch = visibles, desktop = au survol) */
#carousel .carousel-control-prev,
#carousel .carousel-control-next,
#carousel a.carousel-control-prev,
#carousel a.carousel-control-next,
/* Compat Bootstrap 3 */
#carousel .left.carousel-control,
#carousel .right.carousel-control,
#carousel a.left.carousel-control,
#carousel a.right.carousel-control {
  opacity: 0.65;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
  /* Sur desktop, on masque par défaut puis on affiche au survol */
  #carousel .carousel-control-prev,
  #carousel .carousel-control-next,
  #carousel a.carousel-control-prev,
  #carousel a.carousel-control-next,
  /* Compat Bootstrap 3 */
  #carousel .left.carousel-control,
  #carousel .right.carousel-control,
  #carousel a.left.carousel-control,
  #carousel a.right.carousel-control {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  #carousel:hover .carousel-control-prev,
  #carousel:hover .carousel-control-next,
  #carousel:hover a.carousel-control-prev,
  #carousel:hover a.carousel-control-next,
  /* Compat Bootstrap 3 */
  #carousel:hover .left.carousel-control,
  #carousel:hover .right.carousel-control,
  #carousel:hover a.left.carousel-control,
  #carousel:hover a.right.carousel-control {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

#carousel .carousel-inner {
  height: var(--carousel-height);
  width: 100%;
  max-width: 100%;
}

#carousel .carousel-inner .carousel-item {
  height: 100%;
  overflow: hidden;
  border-radius: 0;
  position: relative;
}

/* Homeslider (ps_imageslider): le <a>/<figure> doit occuper toute la largeur */
#carousel .carousel-inner .carousel-item > a,
#carousel .carousel-inner .carousel-item > a > figure {
  display: block;
  width: 100%;
  margin: 0;
}

/* Important: le <a> doit aussi remplir la hauteur, sinon un "vide" peut apparaître sous l'image */
#carousel .carousel-inner .carousel-item > a {
  height: 100%;
}

#carousel .carousel-inner .carousel-item > a > figure {
  height: 100%;
  position: relative;
}

.carousel .carousel-item img {
  width: 100%;
  max-width: 100%;
  height: 100%;
  border-radius: 0;
  display: block;
  margin: 0 auto;
  object-fit: cover;
  object-position: center;
}

/* Carousel + banner centrés sur grand écran */
.carousel,
.banner {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.banner img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

/* Images / blocs - radius uniforme */
.product-cover img,
.product-cover .layer:hover,
.product-images img,
.product-thumbnail img,
.thumbnail-container,
.banner {
  border-radius: 0.75rem !important;
}

/* Exception: modal produit */
.product-cover-modal {
  border-radius: 0.75rem 0.75rem 0 0 !important;
}

/*
  FIX: visionneuse / modal des images produit
  Le header-top est sticky avec z-index: 1100.
  Or Bootstrap met par défaut les modals à 1050 → le menu passe au-dessus.
  On remonte uniquement la pile du modal produit + backdrop.
*/
/* FORCE ABSOLUE: le modal produit doit être au-dessus de TOUT (quand il est ouvert) */
#product-modal.show,
#product-modal.in,
.modal.js-product-modal.show,
.modal.js-product-images-modal.show,
.modal.show[id="product-modal"] {
  z-index: 999999 !important;
}

#product-modal .modal-dialog,
.modal.js-product-images-modal .modal-dialog {
  z-index: 999999 !important;
  position: relative !important;
}

#product-modal .modal-content,
.modal.js-product-images-modal .modal-content {
  z-index: 999999 !important;
}

/* Le backdrop doit aussi passer au-dessus du header sticky - UNIQUEMENT pour le modal produit */
/* On utilise le JavaScript pour ajouter une classe spécifique au backdrop du product-modal */
.modal-backdrop.product-modal-backdrop {
  z-index: 999998 !important;
}

/*
  Sécurité: si le modal est rendu dans un conteneur qui crée un stacking-context
  (transform / position / z-index), remonter le modal seul peut ne pas suffire.
  Dans ce cas, on baisse le z-index du header pendant l'ouverture d'un modal.
*/
/* FORCE: quand le modal de visualisation d'images est ouvert, le header passe derrière */
/* Utiliser :has() pour cibler uniquement #product-modal, pas tous les modals */
html:has(#product-modal.show) #header,
html:has(#product-modal.show) #header .header-top,
html:has(#product-modal.show) #header .header-top.header-top--fixed,
html:has(#product-modal.show) .page-top-mini-carousel,
html:has(#product-modal.in) #header,
html:has(#product-modal.in) #header .header-top,
html:has(#product-modal.in) #header .header-top.header-top--fixed,
html:has(#product-modal.in) .page-top-mini-carousel {
  z-index: -1 !important;
  position: relative !important;
}

/*
  Autres visionneuses fréquentes (selon modules / thème parent)
  Objectif: l'overlay doit TOUJOURS être au-dessus du header sticky.
*/
.fancybox-container,
.fancybox__container,
.fancybox__backdrop,
.fancybox__toolbar,
.fancybox__carousel,
.fancybox__thumbs,
.fancybox-is-open,
.pswp,
.pswp__bg,
.pswp__scroll-wrap,
.mfp-bg,
.mfp-wrap,
.lg-backdrop,
.lg-outer,
.zoomContainer,
.ui-widget-overlay {
  z-index: 10000 !important;
}

/* Si une classe "active" est ajoutée au body/html, on force le header derrière */
html.fancybox-active #header .header-top,
body.fancybox-active #header .header-top,
body.lg-on #header .header-top,
body.pswp--open #header .header-top,
body.mfp-zoom-out-cur #header .header-top {
  z-index: 900 !important;
}

.container {
  width: 75%;
  margin-left: auto;
  margin-right: auto;
}

/* Mobile: la largeur 75% décale certains blocs (ex: #carousel). */
@media (max-width: 767.98px) {
  .container {
    width: 100%;
  }

  /* Mobile (page d'accueil): supprime l'espace du bloc juste après le carousel */
  body#index #carousel + * {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Mobile: certains wrappers du module réservent un espace sous le slider */
  #homepage-slider,
  .homeslider-container,
  .homeslider,
  .home-slider,
  .ps-imageslider,
  .ps_imageslider {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Mobile: supprime le vide blanc sous le carousel principal (margin/padding hérités) */
  #carousel,
  #carousel.carousel {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  #carousel .carousel-inner {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Mobile: si le texte du slider a été supprimé, on supprime aussi la zone "caption" réservée */
  #carousel .carousel-caption,
  #carousel .caption,
  #carousel .carousel-content,
  #carousel figcaption,
  #carousel .carousel-item figcaption {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Sécurité: neutralise un éventuel décalage hérité (left/right/transform) */
  #carousel {
    display: block !important;
    float: none !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }

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

/* Sticky uniquement sur header-top (logo/recherche/menu) */
#header {
  overflow: visible;
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  background: #A9A9A9;
}

#header .header-top {
  /* Réglage: augmente/réduit la hauteur du header sans changer la taille du contenu */
  --header-top-padding-y: 0px;
  padding-top: 8px;
  padding-bottom: var(--header-top-padding-y);

  position: -webkit-sticky;
  position: sticky;
  top: 0;
  /* IMPORTANT: ne pas passer au-dessus des visionneuses (modal/zoom/lightbox). */
  z-index: 200 !important;
  background: #A9A9A9;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

/* Lisibilité sur fond clair */
#header .header-top,
#header .header-top a,
#header .header-top span,
#header .header-top i,
#header .header-top .material-icons {
  color: #111827;
}

#header .header-top a:hover {
  color: #111827;
  opacity: 0.9;
}

/* Fallback JS: quand la classe est ajoutée, on force un sticky fiable (fixed) */
#header .header-top.header-top--fixed {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 200 !important;
  background: #A9A9A9;
}

/* Ultra-override: si un CSS du thème parent/module force un z-index plus haut */
html body #header .header-top {
  z-index: 200 !important;
}
html body #header .header-top.header-top--fixed {
  z-index: 200 !important;
}

/* Quand une visionneuse est ouverte, le header passe derrière (pas caché, juste z-index bas) */
html.fancybox-active #header,
body.fancybox-active #header,
body.lg-on #header,
body.pswp--open #header,
body.mfp-zoom-out-cur #header {
  z-index: 1 !important;
}

/*
  Fallback moderne (sans classes body/html):
  si le viewer injecte juste un overlay dans le DOM, on le détecte via :has().
  (progressive enhancement: si :has() n'est pas supporté, ces règles sont ignorées)
*/
/* Quand le modal de visualisation d'images est visible, baisser le z-index du header */
@supports selector(html:has(*)) {
  html:has(#product-modal.show) #header,
  html:has(#product-modal.in) #header,
  html:has(.js-product-images-modal.show) #header {
    z-index: 1 !important;
  }
}

/* Conserver les dropdowns du header au-dessus du header lui-même */
#header .header-top .dropdown-menu,
#header .header-top .top-menu .dropdown-menu {
  z-index: 300 !important;
}

#header .header-nav {
  background: #A9A9A9 !important;
  color: #111827;

  /* La barre du haut ne doit pas être sticky */
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  z-index: auto !important;
  transform: none !important;
}

#header .header-nav a,
#header .header-nav span,
#header .header-nav i,
#header .header-nav .material-icons {
  color: inherit;
}

#header .header-nav a:hover {
  color: inherit;
  opacity: 0.9;
}

/* Top-menu: liens noirs + survol cuivre */
#header #_desktop_top_menu a,
#header #_desktop_top_menu .top-menu a {
  color: #000 !important;
}

#header #_desktop_top_menu a:hover,
#header #_desktop_top_menu a:focus,
#header #_desktop_top_menu .top-menu a:hover,
#header #_desktop_top_menu .top-menu a:focus {
  color: #B66E41 !important;
  opacity: 1;
}

/* Exceptions: dropdowns (langue/devise/compte) restent en fond clair */
#header .header-nav .dropdown-menu {
  background: #fff;
}

#header .header-nav .dropdown-menu,
#header .header-nav .dropdown-menu a,
#header .header-nav .dropdown-menu span,
#header .header-nav .dropdown-menu i,
#header .header-nav .dropdown-menu .material-icons {
  color: #111827;
}

/* Supprime le bouton "Contactez-nous" (desktop) */
@media (min-width: 768px) {
  #header .header-nav #_desktop_contact_link,
  #header .header-nav #contact-link {
    display: none !important;
  }
}

/* Après déplacement via JS, on peut masquer complètement la barre du haut (desktop) */
@media (min-width: 768px) {
  #header.header-nav--moved .header-nav {
    display: none !important;
  }
}

/* Top header: descendre les éléments (alignement bas) */
@media (min-width: 768px) {
  #header .header-nav {
    padding-top: 0.5rem;
    padding-bottom: 0;
  }

  #header .header-nav .row {
    align-items: flex-end !important;
  }

  #header .header-nav .row > [class*="col"] {
    display: flex;
    align-items: flex-end !important;
  }

  /* Aide visuelle: rapproche le texte du bas */
  #header .header-nav a,
  #header .header-nav span,
  #header .header-nav i {
    line-height: 1.1;
  }
}

/* Ultra-override au cas où le thème parent utilise une spécificité plus forte */
html body #header .header-nav {
  position: static !important;
}

html body #header .header-top {
  position: -webkit-sticky !important;
  position: sticky !important;
}

/* Jointure mini-slider / header: enlever tout trait visible */
#header,
#header .header-top {
  border-top: 0 !important;
}

#header .header-nav {
  border-top: 0 !important;
  box-shadow: none !important;
}

/* Bande de "recouvrement" pour masquer un micro-gap (tous DPI) */
.page-top-mini-carousel::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 4px;
  background: inherit;
  pointer-events: none;
}

/* Bande de recouvrement côté header (évite un trait blanc au refresh entre le mini-carousel et le header) */
#header .header-top::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -2px;
  height: 4px;
  background: inherit;
  pointer-events: none;
}


/* Mini-carousel AU-DESSUS du header (non-sticky) */
.page-top-mini-carousel {
  --mini-carousel-height: clamp(40px, 5vw, 70px);
  width: 100%;
  margin: 0;
  margin-bottom: -1px !important;
  padding: 0;
  background: #A9A9A9;

  /* Cache un éventuel "hairline" (anti-aliasing / subpixel gap) */
  border-bottom: 0 !important;
  box-shadow: none !important;
  position: relative;
}

/* Base styles (mobile included): 2 carrousels côte à côte */
.page-top-mini-carousel .page-top-mini-carousel-split {
  display: flex;
  width: 100%;
  height: var(--mini-carousel-height);
  /* Collé au header + pas d'arrondis en haut */
  border-radius: 0 0 0.75rem 0.75rem;
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  overflow: hidden;
  position: relative;
  margin: 0;
  background: #A9A9A9;
}

.page-top-mini-carousel .page-top-mini-carousel-left {
  flex: 0 0 75%;
  min-width: 0;
  height: 100%;
  background: #fff !important;
}

.page-top-mini-carousel .page-top-mini-carousel-right {
  flex: 0 0 25%;
  min-width: 0;
  height: 100%;
  border-left: 1px solid rgba(17, 24, 39, 0.25);
  position: relative;
  background: #A9A9A9;
}

/* Léger voile vert au-dessus des slides (garde les liens cliquables) */
.page-top-mini-carousel .page-top-mini-carousel-right::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(169, 169, 169, 0.22);
  pointer-events: none;
  z-index: 1;
}

.page-top-mini-carousel .page-top-mini-carousel-right .header-mini-carousel {
  position: relative;
  z-index: 0;
}

.page-top-mini-carousel .page-top-mini-carousel-split .header-mini-carousel {
  height: 100%;
  width: 100%;
  margin: 0;
  border-radius: 0;
  background: transparent;
}

.page-top-mini-carousel .header-mini-carousel-track {
  height: 100%;
  width: 100%;
  display: flex;
  transition: transform 450ms ease;
  will-change: transform;
}

/* Le carrousel de droite doit défiler du haut vers le bas */
.page-top-mini-carousel .header-mini-carousel[data-direction="y"] .header-mini-carousel-track {
  flex-direction: column;
}

.page-top-mini-carousel .header-mini-carousel-slide {
  flex: 0 0 100%;
  height: 100%;
  width: 100%;
}

.page-top-mini-carousel .header-mini-carousel-slide a,
.page-top-mini-carousel .header-mini-carousel-slide img {
  display: block;
  width: 100%;
  height: 100%;
}

.page-top-mini-carousel .header-mini-carousel-slide img {
  object-fit: cover;
  object-position: center;
}



/* Header (desktop) - recherche au-dessus + menu en bas */
@media (min-width: 768px) {
  /* Dots: plus discrets vu la faible hauteur */
  .page-top-mini-carousel .header-mini-carousel-dots {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.2rem;
    justify-content: center;
    gap: 0.25rem;
    z-index: 2;
    pointer-events: none;
  }

  .page-top-mini-carousel .header-mini-carousel-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.12);
    pointer-events: none;
  }

  .page-top-mini-carousel .header-mini-carousel-dot.is-active {
    background: rgba(17, 24, 39, 0.9);
    border-color: rgba(17, 24, 39, 0.9);
  }

  /* Ligne "recherche + actions" (langue/connexion/panier) */
  #header .header-top .header-top-right .header-search-row {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
    width: 100%;
    order: 0;
  }

  #header .header-top .header-top-right .header-search-row #search_widget {
    flex: 1 1 auto;
    min-width: 0;
  }

  #header .header-top .header-top-right .header-top-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    white-space: nowrap;
  }

  /* Normalise l'alignement des 3 blocs déplacés */
  #header .header-top .header-top-right .header-top-actions > div {
    display: flex;
    align-items: center;
  }

  /* Réduit un peu la hauteur visuelle pour s'aligner sur la search */
  #header .header-top .header-top-right .header-top-actions .material-icons {
    line-height: 1;
  }

  /* Force la ligne à "étirer" ses colonnes à la hauteur du logo */
  #header .header-top .row {
    align-items: stretch !important;
  }

  /* La colonne de droite devient une colonne flex (pour réordonner les blocs) */
  #header .header-top .header-top-right {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  /* Recherche au-dessus du menu */
  #header .header-top .header-top-right #search_widget {
    order: 0;
    width: 100%;
    margin-bottom: 0.5rem;
    float: none;
  }

  /* Menu sous la recherche et collé en bas du bloc */
  #header .header-top .header-top-right #_desktop_top_menu {
    order: 1;
    margin-top: auto;
    padding-top: 6px;
  }

  /* Optionnel : assure que le menu ne "remonte" pas via alignments Bootstrap */
  #header #_desktop_top_menu {
    align-self: stretch;
  }

  /* Barre de recherche plus longue + bouton à droite */
  #header .header-top .header-top-right #search_widget form {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: 44px;
    align-items: stretch;
    width: 100%;
    column-gap: 0.5rem;
    margin: 0;
  }

  /* Masque les icônes du module (on utilise un vrai bouton texte) */
  #header .header-top .header-top-right #search_widget form > i.material-icons {
    display: none;
  }

  #header .header-top .header-top-right #search_widget input[name="s"],
  #header .header-top .header-top-right #search_widget .search-widget-button {
    height: 100%;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    font: inherit;
  }

  #header .header-top .header-top-right #search_widget input[name="s"] {
    min-width: 0;
    align-self: stretch;
    padding: 0 0.875rem;
    border: 1px solid #d0d5dd;
    border-radius: 0.5rem;
    background: #fff;
    line-height: 44px;
  }

  #header .header-top .header-top-right #search_widget .search-widget-button {
    align-self: stretch;
    justify-self: end;
    width: max-content;
    min-width: 0;
    padding: 0 1rem;
    border: 1px solid #111827;
    border-radius: 0.5rem;
    background: #111827;
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    display: block;
    text-align: center;
    line-height: 44px;
    /* Neutralise tout décalage appliqué par d'autres CSS (top/transform/etc.) */
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
  }

  #header .header-top .header-top-right #search_widget .search-widget-button:hover {
    background: #000;
    border-color: #000;
  }

  /* Donne visuellement plus de place à la recherche (≈ "3x plus longue" vs style par défaut) */
  #header .header-top .header-top-right #search_widget {
    max-width: 900px;
  }
}
/* Mobile: ne pas afficher le bouton (le layout mobile du thème gère déjà la recherche) */
@media (max-width: 767.98px) {
  #search_widget .search-widget-button {
    display: none;
  }
}

/* Anti-FOUC header (desktop): évite d'afficher brièvement les anciennes positions
   des blocs (langue/compte/panier) pendant que le JS les repositionne.
   Fallback: ils réapparaissent automatiquement après un court délai même si JS ne tourne pas. */
@keyframes childHeaderReveal {
  to {
    opacity: 1;
    visibility: visible;
  }
}

@media (min-width: 768px) {
  #_desktop_language_selector,
  #_desktop_user_info,
  #_desktop_cart {
    opacity: 0;
    visibility: hidden;
    animation: childHeaderReveal 0s linear 220ms forwards;
  }
}

@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  #_desktop_language_selector,
  #_desktop_user_info,
  #_desktop_cart {
    animation-delay: 0ms;
  }
}


/* =====================================================
   AMÉLIORATIONS VISUELLES LÉGÈRES
   Version: 2026-01-28
   ===================================================== */

/* Variables CSS pour la cohérence */
:root {
  --child-accent: #B66E41;
  --child-accent-light: #d4956c;
  --child-shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --child-shadow: 0 2px 8px rgba(0,0,0,0.1);
  --child-radius: 0.75rem;
}

/* =====================
   BADGES PROMO/NOUVEAU - Amélioration subtile
   ===================== */

.product-miniature .product-flags .product-flag {
  font-weight: 600;
  border-radius: 0.35rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.7rem;
}

/* Badge PROMO - plus visible */
.product-miniature .product-flag.discount,
.product-miniature .product-flag.on-sale {
  background: #dc2626;
  color: #fff !important;
}

/* Badge NOUVEAU */
.product-miniature .product-flag.new {
  background: var(--child-accent);
  color: #fff !important;
}

/* =====================
   HOVER SUBTIL SUR PRODUITS
   ===================== */

.product-miniature {
  transition: box-shadow 200ms ease, transform 200ms ease;
}

.product-miniature:hover {
  box-shadow: var(--child-shadow);
  transform: translateY(-2px);
}

/* =====================
   BOUTON AJOUTER AU PANIER - Style amélioré
   ===================== */

.add-to-cart,
.btn.add-to-cart,
button.add-to-cart {
  background: var(--child-accent) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 600;
  border-radius: 0.5rem;
  transition: background 200ms ease;
}

.add-to-cart:hover,
.btn.add-to-cart:hover,
button.add-to-cart:hover {
  background: var(--child-accent-light) !important;
}

/* =====================
   TITRES DE SECTIONS
   ===================== */

h2.products-section-title,
.products-section-title {
  font-weight: 700;
  position: relative;
  padding-bottom: 0.5rem;
  margin-bottom: 1.25rem;
}

h2.products-section-title::after,
.products-section-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50px;
  height: 3px;
  background: var(--child-accent);
  border-radius: 2px;
}

/* =====================
   LIEN "TOUS LES PRODUITS"
   ===================== */

.all-product-link,
a.all-product-link {
  color: var(--child-accent);
  font-weight: 600;
  transition: color 200ms ease;
}

.all-product-link:hover,
a.all-product-link:hover {
  color: var(--child-accent-light);
}

/* =====================================================
   PRODUCT SLIDERS - Vrais sliders avec boutons
   ===================================================== */

/* Wrapper du slider */
.products-slider-wrapper {
  position: relative;
  overflow: hidden;
  z-index: 1; /* Bas pour ne pas bloquer les modals */
}

/* Container de produits */
.featured-products .products,
.new-products .products,
.sale-products .products,
.products-block .products,
.product-accessories .products,
.crossselling-products .products {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 16px;
  padding: 10px 5px 20px 5px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  /* Cacher la scrollbar */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.featured-products .products::-webkit-scrollbar,
.new-products .products::-webkit-scrollbar,
.sale-products .products::-webkit-scrollbar,
.products-block .products::-webkit-scrollbar {
  display: none;
}

/* Cartes produits dans le slider */
.featured-products .products .product-miniature,
.new-products .products .product-miniature,
.sale-products .products .product-miniature,
.products-block .products .product-miniature,
.product-accessories .products .product-miniature,
.crossselling-products .products .product-miniature {
  flex: 0 0 auto;
  width: 220px;
  min-width: 220px;
  max-width: 220px;
  scroll-snap-align: start;
}

/* Boutons de navigation */
.slider-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #333;
  transition: all 0.2s ease;
}

.slider-nav-btn:hover {
  background: var(--child-accent);
  color: #fff;
  border-color: var(--child-accent);
}

.slider-nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.slider-nav-btn.prev {
  left: 0;
}

.slider-nav-btn.next {
  right: 0;
}

/* Header de section modernisé */
.products-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding: 0 5px;
}

.products-section-header .products-section-title,
.products-section-header h2 {
  margin-bottom: 0 !important;
}

.products-section-header .all-product-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 991px) {
  .featured-products .products .product-miniature,
  .new-products .products .product-miniature,
  .sale-products .products .product-miniature,
  .products-block .products .product-miniature {
    width: 180px;
    min-width: 180px;
    max-width: 180px;
  }
  
  .slider-nav-btn {
    width: 35px;
    height: 35px;
    font-size: 18px;
  }
}

@media (max-width: 575px) {
  .featured-products .products .product-miniature,
  .new-products .products .product-miniature,
  .sale-products .products .product-miniature,
  .products-block .products .product-miniature {
    width: 160px;
    min-width: 160px;
    max-width: 160px;
  }
  
  .featured-products .products,
  .new-products .products,
  .sale-products .products,
  .products-block .products {
    gap: 12px;
    padding: 8px 2px 16px 2px;
  }
  
  .slider-nav-btn {
    width: 30px;
    height: 30px;
    font-size: 16px;
  }
}

/* =====================================================
   HOMEPAGE HERO LAYOUT - Menu latéral + Slider + Bannières
   Style inspiré de glotelho.cm
   ===================================================== */

/* Conteneur principal hero */
.homepage-hero-layout {
  display: flex;
  gap: 16px;
  margin-bottom: 2rem;
  align-items: flex-start; /* Les enfants ne s'étirent plus */
}

/* Menu latéral gauche - hauteur fixe basée sur le slider */
.homepage-sidebar-menu {
  flex: 0 0 220px;
  width: 220px;
  max-height: var(--carousel-height, 350px); /* Même hauteur que le slider */
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  overflow: visible; /* Permettre au flyout de déborder */
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 100; /* Au-dessus du slider pour le flyout */
}

/* Bannières latérales droites - hauteur fixe basée sur le slider */
.homepage-side-banners {
  flex: 0 0 200px;
  width: 200px;
  height: var(--carousel-height, 350px); /* Même hauteur que le slider */
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.homepage-sidebar-menu .sidebar-menu-title {
  background: var(--child-accent, #B66E41);
  color: #fff;
  padding: 12px 16px;
  font-weight: 600;
  font-size: 14px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.homepage-sidebar-menu .sidebar-menu-title::before {
  content: '☰';
  font-size: 16px;
}

.homepage-sidebar-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  overflow: visible; /* Permettre au flyout de déborder */
  background: #fff;
  border-radius: 0 0 8px 8px;
}

/* Quand le menu est développé, activer le scroll SANS changer la taille */
.homepage-sidebar-menu ul.menu-expanded {
  overflow-y: auto;
  overflow-x: visible;
  scrollbar-width: thin;
  scrollbar-color: var(--child-accent, #B66E41) #f0f0f0;
}

.homepage-sidebar-menu ul.menu-expanded::-webkit-scrollbar {
  width: 6px;
}

.homepage-sidebar-menu ul.menu-expanded::-webkit-scrollbar-track {
  background: #f0f0f0;
}

.homepage-sidebar-menu ul.menu-expanded::-webkit-scrollbar-thumb {
  background: var(--child-accent, #B66E41);
  border-radius: 3px;
}

/* Bouton "Plus" en bas du menu */
.homepage-sidebar-menu .sidebar-more-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  background: #f8f8f8;
  color: var(--child-accent, #B66E41);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  border: none;
  border-top: 1px solid #eee;
  transition: all 0.2s ease;
  flex-shrink: 0;
  cursor: pointer;
  width: 100%;
}

.homepage-sidebar-menu .sidebar-more-link:hover {
  background: var(--child-accent, #B66E41);
  color: #fff;
}

.homepage-sidebar-menu .sidebar-more-link .more-icon {
  font-size: 10px;
  transition: transform 0.2s ease;
}

.homepage-sidebar-menu ul li {
  border-bottom: 1px solid #f0f0f0;
  position: relative;
}

.homepage-sidebar-menu ul li:last-child {
  border-bottom: none;
}

.homepage-sidebar-menu ul li a {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  color: #333;
  text-decoration: none;
  font-size: 13px;
  transition: all 0.2s ease;
}

.homepage-sidebar-menu ul li a:hover {
  background: #f8f8f8;
  color: var(--child-accent, #B66E41);
  padding-left: 20px;
}

/* Flèche seulement pour les items avec sous-menu */
.homepage-sidebar-menu ul li.has-submenu > a::after {
  content: '›';
  margin-left: auto;
  color: #999;
  font-size: 16px;
}

/* Flyout sous-menu - s'affiche juste à côté de l'élément déclencheur */
.sidebar-submenu-flyout {
  position: absolute;
  left: 100%;
  top: 0;
  min-width: 280px;
  max-width: 400px;
  background: #fff;
  border-radius: 0 8px 8px 0;
  box-shadow: 4px 4px 20px rgba(0,0,0,0.15);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-10px);
  transition: all 0.2s ease;
  z-index: 1000;
  max-height: 350px;
  overflow-y: auto;
}

.homepage-sidebar-menu ul li.has-submenu:hover > .sidebar-submenu-flyout {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.sidebar-submenu-flyout .flyout-title {
  background: var(--child-accent, #B66E41);
  color: #fff;
  padding: 10px 16px;
  font-weight: 600;
  font-size: 13px;
  border-radius: 0 8px 0 0;
}

.sidebar-submenu-flyout ul {
  list-style: none;
  margin: 0;
  padding: 8px 0;
}

.sidebar-submenu-flyout ul li {
  border-bottom: none !important;
}

.sidebar-submenu-flyout ul li a {
  padding: 8px 16px;
  font-size: 12px;
  color: #444;
}

.sidebar-submenu-flyout ul li a:hover {
  background: #f5f5f5;
  color: var(--child-accent, #B66E41);
  padding-left: 20px;
}

.sidebar-submenu-flyout ul li a::after {
  display: none;
}

/* Slider principal (centre) */
.homepage-main-slider {
  flex: 1;
  min-width: 0;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.homepage-main-slider #carousel,
.homepage-main-slider .carousel {
  border-radius: 8px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.homepage-main-slider .carousel-inner {
  flex: 1;
}

/* Styles des bannières */
.homepage-side-banners .side-banner {
  flex: 1;
  border-radius: 8px;
  overflow: hidden;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0; /* Important pour flex equal height */
}

.homepage-side-banners .side-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.homepage-side-banners .side-banner a {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.homepage-side-banners .side-banner .banner-text {
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Responsive */
@media (max-width: 1199px) {
  .homepage-sidebar-menu {
    flex: 0 0 200px;
    width: 200px;
  }
  
  .homepage-side-banners {
    flex: 0 0 180px;
    width: 180px;
  }
}

@media (max-width: 991px) {
  .homepage-hero-layout {
@media (min-width: 992px) {
  .homepage-sidebar-menu ul ul,
  .homepage-sidebar-menu .sidebar-submenu-flyout,
  .homepage-sidebar-menu li.has-submenu > ul {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  .homepage-sidebar-menu ul li:hover > ul,
  .homepage-sidebar-menu ul li.has-submenu:hover > .sidebar-submenu-flyout {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    height: auto !important;
  }
}
    flex-wrap: wrap;
  }
  
  .homepage-sidebar-menu {
    display: none; /* Caché sur tablette/mobile */
  }
  
  .homepage-main-slider {
    flex: 1 1 100%;
    order: 1;
  }
  
  .homepage-side-banners {
    flex: 1 1 100%;
    flex-direction: row;
    width: 100%;
    order: 2;
  }
  
  .homepage-side-banners .side-banner {
    flex: 1;
    min-height: 120px;
  }
}

@media (max-width: 575px) {
  .homepage-side-banners {
    flex-direction: column;
  }
  
  .homepage-side-banners .side-banner {
    min-height: 100px;
  }
}